@vertebr/react 0.13.0 → 0.16.0

package/dist/components/admin/AdminSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,eAAe,EAAE,MAAM,SAAS,CAAC;AAG7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AA6FF,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAwBvE"}
+{"version":3,"file":"AdminSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,eAAe,EAAE,MAAM,SAAS,CAAC;AAG7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AA+FF,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAwBvE"}

package/dist/components/admin/AdminSidebar.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { AdminPoweredBy } from "./AdminPoweredBy";
-import { iconForNavKey } from "../ui/icons";
+import { resolveNavIcon } from "../ui/icons";
 function SidebarNavItem({ item, collapsed, }) {
     const hasChildren = Boolean(item.children?.length);
     const childActive = item.children?.some((child) => child.active) ?? false;
     const sectionActive = item.active || childActive;
     const [open, setOpen] = useState(sectionActive);
-    const Icon = item.icon ?? iconForNavKey(item.key);
+    const Icon = item.icon ??
+        resolveNavIcon({ key: item.key, label: item.label, group: item.group });
     useEffect(() => {
         if (sectionActive)
             setOpen(true);

package/dist/components/admin/AdminTopBar.d.ts

@@ -2,6 +2,9 @@ import type { AdminEnvironment, HealthCheck } from "@vertebr/client";
 import type { VbTheme } from "../../hooks/useVertebrTheme";
 export type AdminTopBarProps = {
     brand: string;
+    brandLogoUrl?: string;
+    /** Optional mark for dark surfaces (skips CSS invert). */
+    brandLogoUrlDark?: string;
     hostName?: string;
     hostLogoUrl?: string;
     envList: AdminEnvironment[];
@@ -28,5 +31,5 @@ export type AdminTopBarProps = {
     healthChecks?: HealthCheck[] | null;
     onRefreshHealth?: () => Promise<void>;
 };
-export declare function AdminTopBar({ brand, hostName, hostLogoUrl, envList, environment, onEnvironmentChange, authUserLabel, onSignOut, getAccessToken, authViaTokenOnly, authRequired, token, tokenDraft, onTokenDraftChange, onSaveToken, onClearToken, theme, onThemeChange, sidebarCollapsed, onToggleSidebar, syncEnabled, onOpenSync, onOpenSearch, healthChecks, onRefreshHealth, }: AdminTopBarProps): import("react").JSX.Element;
+export declare function AdminTopBar({ brand, brandLogoUrl, brandLogoUrlDark, hostName, hostLogoUrl, envList, environment, onEnvironmentChange, authUserLabel, onSignOut, getAccessToken, authViaTokenOnly, authRequired, token, tokenDraft, onTokenDraftChange, onSaveToken, onClearToken, theme, onThemeChange, sidebarCollapsed, onToggleSidebar, syncEnabled, onOpenSync, onOpenSearch, healthChecks, onRefreshHealth, }: AdminTopBarProps): import("react").JSX.Element;
 //# sourceMappingURL=AdminTopBar.d.ts.map

package/dist/components/admin/AdminTopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminTopBar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminTopBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAI3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAiBF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,GAChB,EAAE,gBAAgB,+BA0JlB"}
+{"version":3,"file":"AdminTopBar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminTopBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAI3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAiBF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,GAChB,EAAE,gBAAgB,+BAoLlB"}

package/dist/components/admin/AdminTopBar.js

@@ -20,11 +20,15 @@ function healthLabel(tone) {
         return "Attention";
     return "Degraded";
 }
-export function AdminTopBar({ brand, hostName, hostLogoUrl, envList, environment, onEnvironmentChange, authUserLabel, onSignOut, getAccessToken, authViaTokenOnly, authRequired, token, tokenDraft, onTokenDraftChange, onSaveToken, onClearToken, theme, onThemeChange, sidebarCollapsed, onToggleSidebar, syncEnabled, onOpenSync, onOpenSearch, healthChecks, onRefreshHealth, }) {
+export function AdminTopBar({ brand, brandLogoUrl, brandLogoUrlDark, hostName, hostLogoUrl, envList, environment, onEnvironmentChange, authUserLabel, onSignOut, getAccessToken, authViaTokenOnly, authRequired, token, tokenDraft, onTokenDraftChange, onSaveToken, onClearToken, theme, onThemeChange, sidebarCollapsed, onToggleSidebar, syncEnabled, onOpenSync, onOpenSearch, healthChecks, onRefreshHealth, }) {
     const [healthOpen, setHealthOpen] = useState(false);
     const healthTone = healthOverall(healthChecks);
     const showTokenField = !getAccessToken &&
         !authViaTokenOnly &&
         (authRequired || Boolean(token));
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "vertebr-topbar", children: [_jsxs("div", { className: "vertebr-topbar-start", children: [_jsx("button", { type: "button", className: "vertebr-topbar-toggle", "aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar", onClick: onToggleSidebar, children: _jsx(IconMenu, {}) }), _jsx("div", { className: "vertebr-topbar-brand-wrap", children: hostName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-topbar-host", "data-primary": "true", children: [hostLogoUrl ? (_jsx("img", { className: "vertebr-topbar-host-logo", src: hostLogoUrl, alt: "" })) : null, _jsx("strong", { className: "vertebr-topbar-host-label", children: hostName })] }), _jsx("span", { className: "vertebr-topbar-product", children: brand })] })) : (_jsx("strong", { className: "vertebr-topbar-brand", children: brand })) }), envList.length > 1 ? (_jsx("div", { className: "vertebr-topbar-env", children: _jsx(EnvSelect, { environments: envList, value: environment, onChange: onEnvironmentChange }) })) : null] }), _jsx("div", { className: "vertebr-topbar-center", children: _jsxs("button", { type: "button", className: "vertebr-topbar-search", onClick: onOpenSearch, children: [_jsx(IconSearch, {}), _jsx("span", { children: "Search admin" }), _jsx("kbd", { children: "\u2318K" })] }) }), _jsxs("div", { className: "vertebr-topbar-end", children: [_jsxs("div", { className: "vertebr-topbar-cluster", "aria-label": "Operations", children: [healthTone && healthChecks?.length ? (_jsxs("button", { type: "button", className: "vertebr-topbar-health", "data-tone": healthTone, "aria-haspopup": "dialog", "aria-expanded": healthOpen, onClick: () => setHealthOpen(true), children: [_jsx("span", { className: "vertebr-topbar-health-dot", "aria-hidden": true }), _jsx("span", { className: "vertebr-topbar-health-text", children: healthLabel(healthTone) })] })) : null, syncEnabled && onOpenSync ? (_jsxs("button", { type: "button", className: "vertebr-topbar-action", onClick: onOpenSync, children: [_jsx(IconSync, {}), _jsx("span", { children: "Sync" })] })) : null] }), showTokenField ? (_jsxs("div", { className: "vertebr-topbar-token", children: [_jsx("input", { className: "vertebr-auth-input", type: "password", placeholder: "Access token", value: tokenDraft, onChange: (event) => onTokenDraftChange(event.target.value), autoComplete: "off" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onSaveToken, children: "Use" }), token ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onClearToken, children: "Clear" })) : null] })) : null, getAccessToken || onSignOut ? (_jsxs("div", { className: "vertebr-topbar-account", children: [getAccessToken && authUserLabel ? (_jsx("span", { className: "vertebr-topbar-user", title: authUserLabel, children: authUserLabel })) : null, onSignOut ? (_jsx("button", { type: "button", className: "vertebr-topbar-signout", onClick: () => void onSignOut(), children: "Sign out" })) : null] })) : null, _jsx(ThemeToggle, { theme: theme, onChange: onThemeChange, compact: true })] })] }), healthOpen && healthChecks?.length ? (_jsx(HealthModal, { checks: healthChecks, environment: environment, onClose: () => setHealthOpen(false), onRefresh: onRefreshHealth })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "vertebr-topbar", children: [_jsxs("div", { className: "vertebr-topbar-start", children: [_jsx("button", { type: "button", className: "vertebr-topbar-toggle", "aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar", onClick: onToggleSidebar, children: _jsx(IconMenu, {}) }), _jsx("div", { className: "vertebr-topbar-brand-wrap", children: hostName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-topbar-host", "data-primary": "true", children: [hostLogoUrl ? (_jsx("img", { className: "vertebr-topbar-host-logo", src: hostLogoUrl, alt: "" })) : null, _jsx("strong", { className: "vertebr-topbar-host-label", children: hostName })] }), brandLogoUrl ? (_jsx("span", { className: "vertebr-topbar-product", "data-mark": "true", children: _jsx("img", { className: "vertebr-topbar-brand-mark", src: theme === "light"
+                                                    ? brandLogoUrl
+                                                    : (brandLogoUrlDark ?? brandLogoUrl), alt: brand }) })) : (_jsx("span", { className: "vertebr-topbar-product", children: brand }))] })) : brandLogoUrl ? (_jsx("span", { className: "vertebr-topbar-brand", children: _jsx("img", { className: "vertebr-topbar-brand-mark", src: theme === "light"
+                                            ? brandLogoUrl
+                                            : (brandLogoUrlDark ?? brandLogoUrl), alt: brand }) })) : (_jsx("strong", { className: "vertebr-topbar-brand", children: brand })) }), envList.length > 1 ? (_jsx("div", { className: "vertebr-topbar-env", children: _jsx(EnvSelect, { environments: envList, value: environment, onChange: onEnvironmentChange }) })) : null] }), _jsx("div", { className: "vertebr-topbar-center", children: _jsxs("button", { type: "button", className: "vertebr-topbar-search", onClick: onOpenSearch, children: [_jsx(IconSearch, {}), _jsx("span", { children: "Search admin" }), _jsx("kbd", { children: "\u2318K" })] }) }), _jsxs("div", { className: "vertebr-topbar-end", children: [_jsxs("div", { className: "vertebr-topbar-cluster", "aria-label": "Operations", children: [healthTone && healthChecks?.length ? (_jsxs("button", { type: "button", className: "vertebr-topbar-health", "data-tone": healthTone, "aria-haspopup": "dialog", "aria-expanded": healthOpen, onClick: () => setHealthOpen(true), children: [_jsx("span", { className: "vertebr-topbar-health-dot", "aria-hidden": true }), _jsx("span", { className: "vertebr-topbar-health-text", children: healthLabel(healthTone) })] })) : null, syncEnabled && onOpenSync ? (_jsxs("button", { type: "button", className: "vertebr-topbar-action", onClick: onOpenSync, children: [_jsx(IconSync, {}), _jsx("span", { children: "Sync" })] })) : null] }), showTokenField ? (_jsxs("div", { className: "vertebr-topbar-token", children: [_jsx("input", { className: "vertebr-auth-input", type: "password", placeholder: "Access token", value: tokenDraft, onChange: (event) => onTokenDraftChange(event.target.value), autoComplete: "off" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onSaveToken, children: "Use" }), token ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onClearToken, children: "Clear" })) : null] })) : null, getAccessToken || onSignOut ? (_jsxs("div", { className: "vertebr-topbar-account", children: [getAccessToken && authUserLabel ? (_jsx("span", { className: "vertebr-topbar-user", title: authUserLabel, children: authUserLabel })) : null, onSignOut ? (_jsx("button", { type: "button", className: "vertebr-topbar-signout", onClick: () => void onSignOut(), children: "Sign out" })) : null] })) : null, _jsx(ThemeToggle, { theme: theme, onChange: onThemeChange, compact: true })] })] }), healthOpen && healthChecks?.length ? (_jsx(HealthModal, { checks: healthChecks, environment: environment, onClose: () => setHealthOpen(false), onRefresh: onRefreshHealth })) : null] }));
 }

package/dist/components/admin/VertebrAdmin.d.ts

@@ -1,4 +1,4 @@
 import type { VertebrAdminProps } from "./types";
 export type { VertebrAdminProps } from "./types";
-export declare function VertebrAdmin({ apiBase, basePath: basePathProp, title, envStorageKey, tokenStorageKey, themeStorageKey, metricsRangeStorageKey, getAccessToken, authUserLabel, onSignOut, }: VertebrAdminProps): import("react").JSX.Element;
+export declare function VertebrAdmin({ apiBase, basePath: basePathProp, title, envStorageKey, tokenStorageKey, themeStorageKey, metricsRangeStorageKey, getAccessToken, authUserLabel, onSignOut, brandLogoUrl, brandLogoUrlDark, }: VertebrAdminProps): import("react").JSX.Element;
 //# sourceMappingURL=VertebrAdmin.d.ts.map

package/dist/components/admin/VertebrAdmin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VertebrAdmin.d.ts","sourceRoot":"","sources":["../../../src/components/admin/VertebrAdmin.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAGV,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,QAAQ,EAAE,YAAY,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,eAAiC,EACjC,sBAAgD,EAChD,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BAkuBnB"}
+{"version":3,"file":"VertebrAdmin.d.ts","sourceRoot":"","sources":["../../../src/components/admin/VertebrAdmin.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAGV,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,QAAQ,EAAE,YAAY,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,eAAiC,EACjC,sBAAgD,EAChD,cAAc,EACd,aAAa,EACb,SAAS,EACT,YAAY,EACZ,gBAAgB,GACjB,EAAE,iBAAiB,+BAiyBnB"}

package/dist/components/admin/VertebrAdmin.js

@@ -17,8 +17,8 @@ import { sidebarGroups } from "./sidebar";
 import { clearStored, readStored, writeStored } from "./storage";
 import { SaveBarProvider } from "../../hooks/useSaveBar";
 import { ToastProvider } from "../../hooks/useToast";
-import { iconForNavKey } from "../ui/icons";
-export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, title = "Control plane", envStorageKey = "vertebr:env", tokenStorageKey = "vertebr:token", themeStorageKey = "vertebr:theme", metricsRangeStorageKey = "vertebr:metrics-range", getAccessToken, authUserLabel, onSignOut, }) {
+import { resolveNavIcon } from "../ui/icons";
+export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, title = "Control plane", envStorageKey = "vertebr:env", tokenStorageKey = "vertebr:token", themeStorageKey = "vertebr:theme", metricsRangeStorageKey = "vertebr:metrics-range", getAccessToken, authUserLabel, onSignOut, brandLogoUrl, brandLogoUrlDark, }) {
     const basePath = basePathProp ?? adminBaseFromApiBase(apiBase);
     const { theme, setTheme } = useVertebrTheme(themeStorageKey);
     const [environment, setEnvironment] = useState(() => readStored(envStorageKey) ?? "");
@@ -457,7 +457,13 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: "overview",
                 group: catalog.metrics.group ?? "Analytics",
                 label: catalog.metrics.label,
-                icon: iconForNavKey("overview"),
+                icon: resolveNavIcon({
+                    key: "overview",
+                    id: catalog.metrics.id,
+                    label: catalog.metrics.label,
+                    group: catalog.metrics.group,
+                    icon: catalog.metrics.icon,
+                }),
                 active: selection?.kind === "overview",
                 onSelect: () => setSelection({ kind: "overview" }),
             });
@@ -467,7 +473,13 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: "audit",
                 group: catalog.audit.group ?? "Analytics",
                 label: catalog.audit.label,
-                icon: iconForNavKey("audit"),
+                icon: resolveNavIcon({
+                    key: "audit",
+                    id: catalog.audit.id,
+                    label: catalog.audit.label,
+                    group: catalog.audit.group,
+                    icon: catalog.audit.icon,
+                }),
                 active: selection?.kind === "audit",
                 onSelect: () => setSelection({ kind: "audit" }),
             });
@@ -477,7 +489,13 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: `resource:${resource.id}`,
                 group: resource.group ?? "Resources",
                 label: resource.label,
-                icon: iconForNavKey(`resource:${resource.id}`),
+                icon: resolveNavIcon({
+                    key: `resource:${resource.id}`,
+                    id: resource.id,
+                    label: resource.label,
+                    group: resource.group,
+                    icon: resource.icon,
+                }),
                 active: selection?.kind === "resource" && selection.id === resource.id,
                 onSelect: () => setSelection({ kind: "resource", id: resource.id }),
             });
@@ -487,7 +505,13 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: "gallery",
                 group: catalog.gallery.group ?? "Resources",
                 label: catalog.gallery.label,
-                icon: iconForNavKey("gallery"),
+                icon: resolveNavIcon({
+                    key: "gallery",
+                    id: catalog.gallery.id,
+                    label: catalog.gallery.label,
+                    group: catalog.gallery.group,
+                    icon: catalog.gallery.icon,
+                }),
                 active: selection?.kind === "gallery",
                 onSelect: () => setSelection({ kind: "gallery" }),
             });
@@ -497,7 +521,13 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: "fonts",
                 group: catalog.fontLibrary.group ?? "Resources",
                 label: catalog.fontLibrary.label,
-                icon: iconForNavKey("fonts"),
+                icon: resolveNavIcon({
+                    key: "fonts",
+                    id: catalog.fontLibrary.id,
+                    label: catalog.fontLibrary.label,
+                    group: catalog.fontLibrary.group,
+                    icon: catalog.fontLibrary.icon,
+                }),
                 active: selection?.kind === "fontLibrary",
                 onSelect: () => setSelection({ kind: "fontLibrary" }),
             });
@@ -508,7 +538,13 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: "emails",
                 group: catalog.emails.group ?? "Growth",
                 label: catalog.emails.label,
-                icon: iconForNavKey("emails"),
+                icon: resolveNavIcon({
+                    key: "emails",
+                    id: catalog.emails.id,
+                    label: catalog.emails.label,
+                    group: catalog.emails.group,
+                    icon: catalog.emails.icon,
+                }),
                 active: selection?.kind === "emails",
                 onSelect: () => setSelection({ kind: "emails", tab: "compose" }),
                 children: [
@@ -538,7 +574,12 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: "addons:overview",
                 group: "Add-ons",
                 label: "Browse add-ons",
-                icon: iconForNavKey("addons:overview"),
+                icon: resolveNavIcon({
+                    key: "addons:overview",
+                    id: "addons",
+                    label: "Browse add-ons",
+                    group: "Add-ons",
+                }),
                 active: selection?.kind === "addons",
                 onSelect: () => setSelection({ kind: "addons" }),
             });
@@ -548,7 +589,15 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: `addon:${addon.id}`,
                 group: addon.group ?? "Add-ons",
                 label: addon.label,
-                icon: iconForNavKey(`addon:${addon.id}`),
+                icon: resolveNavIcon({
+                    key: `addon:${addon.id}`,
+                    id: addon.id,
+                    label: addon.label,
+                    group: addon.group,
+                    category: addon.category,
+                    section: "addon",
+                    icon: addon.icon,
+                }),
                 active: selection?.kind === "addon" && selection.id === addon.id,
                 onSelect: () => setSelection({ kind: "addon", id: addon.id }),
             });
@@ -559,7 +608,14 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: `config:${config.id}`,
                 group: config.group ?? fallback,
                 label: config.label,
-                icon: iconForNavKey(`config:${config.id}`),
+                icon: resolveNavIcon({
+                    key: `config:${config.id}`,
+                    id: config.id,
+                    label: config.label,
+                    group: config.group,
+                    section: config.section === "page" ? "page" : "config",
+                    icon: config.icon,
+                }),
                 active: selection?.kind === "config" && selection.id === config.id,
                 onSelect: () => setSelection({ kind: "config", id: config.id }),
             });
@@ -569,7 +625,12 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 key: "sync",
                 group: "Settings",
                 label: "Sync environments",
-                icon: iconForNavKey("sync"),
+                icon: resolveNavIcon({
+                    key: "sync",
+                    id: "sync",
+                    label: "Sync environments",
+                    group: "Settings",
+                }),
                 active: selection?.kind === "sync",
                 onSelect: () => setSelection({ kind: "sync" }),
             });
@@ -608,5 +669,5 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
         : selection?.kind === "addon"
             ? catalog?.addons?.find((item) => item.id === selection.id)?.description
             : undefined;
-    return (_jsx(SaveBarProvider, { children: _jsx(ToastProvider, { children: _jsxs("div", { className: "vertebr-root", "data-env": environment, "data-sidebar-collapsed": sidebarCollapsed || undefined, children: [_jsx(AdminTopBar, { brand: bootstrap?.brand ?? catalog?.brand ?? "Vertebr", hostName: bootstrap?.appearance?.hostName ?? catalog?.appearance?.hostName, hostLogoUrl: bootstrap?.appearance?.hostLogoUrl ?? catalog?.appearance?.hostLogoUrl, envList: envList, environment: environment, onEnvironmentChange: switchEnvironment, authUserLabel: authUserLabel, onSignOut: onSignOut, getAccessToken: getAccessToken, authViaTokenOnly: authViaTokenOnly, authRequired: authRequired, token: token, tokenDraft: tokenDraft, onTokenDraftChange: setTokenDraft, onSaveToken: saveToken, onClearToken: clearToken, theme: theme, onThemeChange: setTheme, sidebarCollapsed: sidebarCollapsed, onToggleSidebar: () => setSidebarCollapsed((prev) => !prev), syncEnabled: syncEnabled, onOpenSync: () => setSelection({ kind: "sync" }), onOpenSearch: () => setSearchOpen(true), healthChecks: healthChecks, onRefreshHealth: catalog?.health ? refreshHealth : undefined }), catalog && searchOpen ? (_jsx(AdminCommandPalette, { catalog: catalog, onClose: () => setSearchOpen(false), onSelect: setSelection })) : null, _jsx(AdminSidebar, { navGroups: navGroups, collapsed: sidebarCollapsed }), _jsxs("main", { className: "vertebr-main", children: [_jsx(AdminHeader, { activeLabel: activeLabel ?? (catalog ? "Dashboard" : "Sign in"), catalogLoaded: Boolean(catalog), authRequired: authRequired, selection: selection, isPageSelection: isPageSelection, hasPagePreview: hasPagePreview, selectionDescription: selectionDescription, error: error, breadcrumbs: breadcrumbsForSelection(selection, catalog) }), _jsx(AdminContent, { client: client, catalog: catalog, selection: selection, onSelectionChange: setSelection, authRequired: authRequired, loading: loading, isPageSelection: isPageSelection, metricsData: metricsData, metricsLoading: metricsLoading, metricsRange: metricsRange, onMetricsRangeChange: changeMetricsRange, onRefreshMetrics: refreshMetrics, galleryData: galleryData, galleryLoading: galleryLoading, onRefreshGallery: refreshGallery, fontLibraryData: fontLibraryData, fontLibraryLoading: fontLibraryLoading, onRefreshFonts: refreshFonts, emailsData: emailsData, emailsLoading: emailsLoading, onRefreshEmails: refreshEmails, resourceData: resourceData, resourceSearch: resourceSearch, onResourceSearchChange: setResourceSearch, onRefreshResource: refreshResource, configData: configData, onConfigSaved: setConfigData, onRefreshConfig: refreshConfig, galleryPicker: galleryPicker, fontLibraryPicker: fontLibraryPicker }), _jsx(AdminSaveBar, {})] }), _jsx(AdminToastStack, {})] }) }) }));
+    return (_jsx(SaveBarProvider, { children: _jsx(ToastProvider, { children: _jsxs("div", { className: "vertebr-root", "data-env": environment, "data-sidebar-collapsed": sidebarCollapsed || undefined, children: [_jsx(AdminTopBar, { brand: bootstrap?.brand ?? catalog?.brand ?? "Vertebr", brandLogoUrl: brandLogoUrl, brandLogoUrlDark: brandLogoUrlDark, hostName: bootstrap?.appearance?.hostName ?? catalog?.appearance?.hostName, hostLogoUrl: bootstrap?.appearance?.hostLogoUrl ?? catalog?.appearance?.hostLogoUrl, envList: envList, environment: environment, onEnvironmentChange: switchEnvironment, authUserLabel: authUserLabel, onSignOut: onSignOut, getAccessToken: getAccessToken, authViaTokenOnly: authViaTokenOnly, authRequired: authRequired, token: token, tokenDraft: tokenDraft, onTokenDraftChange: setTokenDraft, onSaveToken: saveToken, onClearToken: clearToken, theme: theme, onThemeChange: setTheme, sidebarCollapsed: sidebarCollapsed, onToggleSidebar: () => setSidebarCollapsed((prev) => !prev), syncEnabled: syncEnabled, onOpenSync: () => setSelection({ kind: "sync" }), onOpenSearch: () => setSearchOpen(true), healthChecks: healthChecks, onRefreshHealth: catalog?.health ? refreshHealth : undefined }), catalog && searchOpen ? (_jsx(AdminCommandPalette, { catalog: catalog, onClose: () => setSearchOpen(false), onSelect: setSelection })) : null, _jsx(AdminSidebar, { navGroups: navGroups, collapsed: sidebarCollapsed }), _jsxs("main", { className: "vertebr-main", children: [_jsx(AdminHeader, { activeLabel: activeLabel ?? (catalog ? "Dashboard" : "Sign in"), catalogLoaded: Boolean(catalog), authRequired: authRequired, selection: selection, isPageSelection: isPageSelection, hasPagePreview: hasPagePreview, selectionDescription: selectionDescription, error: error, breadcrumbs: breadcrumbsForSelection(selection, catalog) }), _jsx(AdminContent, { client: client, catalog: catalog, selection: selection, onSelectionChange: setSelection, authRequired: authRequired, loading: loading, isPageSelection: isPageSelection, metricsData: metricsData, metricsLoading: metricsLoading, metricsRange: metricsRange, onMetricsRangeChange: changeMetricsRange, onRefreshMetrics: refreshMetrics, galleryData: galleryData, galleryLoading: galleryLoading, onRefreshGallery: refreshGallery, fontLibraryData: fontLibraryData, fontLibraryLoading: fontLibraryLoading, onRefreshFonts: refreshFonts, emailsData: emailsData, emailsLoading: emailsLoading, onRefreshEmails: refreshEmails, resourceData: resourceData, resourceSearch: resourceSearch, onResourceSearchChange: setResourceSearch, onRefreshResource: refreshResource, configData: configData, onConfigSaved: setConfigData, onRefreshConfig: refreshConfig, galleryPicker: galleryPicker, fontLibraryPicker: fontLibraryPicker }), _jsx(AdminSaveBar, {})] }), _jsx(AdminToastStack, {})] }) }) }));
 }

package/dist/components/admin/types.d.ts

@@ -21,6 +21,15 @@ export type VertebrAdminProps = {
     authUserLabel?: string;
     /** Host-provided sign-out action. */
     onSignOut?: () => void | Promise<void>;
+    /**
+     * Optional product mark for light UI (dark ink on transparent).
+     */
+    brandLogoUrl?: string;
+    /**
+     * Optional product mark for dark UI (light ink on transparent).
+     * Falls back to `brandLogoUrl` when omitted.
+     */
+    brandLogoUrlDark?: string;
 };
 import type { ReactElement } from "react";
 export type EmailsTab = "compose" | "templates" | "activity";

package/dist/components/admin/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/admin/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oEAAoE;IACpE,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvC,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,YAAY,CAAC;AAEtE,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GACpB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GACnB;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GACvB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,CAAC,EAAE,SAAS,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC9B,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACf,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,OAAO,CAAC;QAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/admin/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oEAAoE;IACpE,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvC,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,YAAY,CAAC;AAEtE,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GACpB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GACnB;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GACvB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,CAAC,EAAE,SAAS,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC9B,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACf,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,OAAO,CAAC;QAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC"}

package/dist/components/ui/icons.d.ts

@@ -1,11 +1,24 @@
-import type { SVGProps } from "react";
+import type { ReactElement, SVGProps } from "react";
+import type { CatalogAddonCategory, NavIconName } from "@vertebr/client";
 type IconProps = SVGProps<SVGSVGElement>;
 export declare function IconHome(props: IconProps): import("react").JSX.Element;
 export declare function IconProducts(props: IconProps): import("react").JSX.Element;
+export declare function IconInventory(props: IconProps): import("react").JSX.Element;
+export declare function IconUsers(props: IconProps): import("react").JSX.Element;
+export declare function IconCard(props: IconProps): import("react").JSX.Element;
+export declare function IconTag(props: IconProps): import("react").JSX.Element;
+export declare function IconBolt(props: IconProps): import("react").JSX.Element;
 export declare function IconGallery(props: IconProps): import("react").JSX.Element;
 export declare function IconFonts(props: IconProps): import("react").JSX.Element;
 export declare function IconMail(props: IconProps): import("react").JSX.Element;
 export declare function IconPages(props: IconProps): import("react").JSX.Element;
+export declare function IconPalette(props: IconProps): import("react").JSX.Element;
+export declare function IconTruck(props: IconProps): import("react").JSX.Element;
+export declare function IconClock(props: IconProps): import("react").JSX.Element;
+export declare function IconStar(props: IconProps): import("react").JSX.Element;
+export declare function IconMegaphone(props: IconProps): import("react").JSX.Element;
+export declare function IconLayout(props: IconProps): import("react").JSX.Element;
+export declare function IconList(props: IconProps): import("react").JSX.Element;
 export declare function IconSettings(props: IconProps): import("react").JSX.Element;
 export declare function IconChart(props: IconProps): import("react").JSX.Element;
 export declare function IconChevronLeft(props: IconProps): import("react").JSX.Element;
@@ -13,6 +26,21 @@ export declare function IconSearch(props: IconProps): import("react").JSX.Elemen
 export declare function IconSync(props: IconProps): import("react").JSX.Element;
 export declare function IconMenu(props: IconProps): import("react").JSX.Element;
 export declare function IconAddon(props: IconProps): import("react").JSX.Element;
-export declare function iconForNavKey(key: string): typeof IconHome;
+export type NavIconComponent = (props: IconProps) => ReactElement;
+export declare const NAV_ICON_COMPONENTS: Record<NavIconName, NavIconComponent>;
+export type ResolveNavIconInput = {
+    key: string;
+    id?: string;
+    label?: string;
+    group?: string;
+    category?: CatalogAddonCategory;
+    section?: "config" | "page" | "addon";
+    icon?: NavIconName | null;
+};
+/** Resolve a stable icon name for a sidebar entry. */
+export declare function resolveNavIconName(input: ResolveNavIconInput): NavIconName;
+export declare function resolveNavIcon(input: ResolveNavIconInput): NavIconComponent;
+/** @deprecated Prefer `resolveNavIcon`. */
+export declare function iconForNavKey(key: string): NavIconComponent;
 export {};
 //# sourceMappingURL=icons.d.ts.map

package/dist/components/ui/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAiBzC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAQ3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAMzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,+BAM/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BASxC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAQxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,mBAYxC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEzE,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAiBzC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,+BAS7C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAQxC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,+BAOvC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAQ3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAS3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,+BAQ7C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAMzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,+BAM/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BASxC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAQxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,YAAY,CAAC;AAElE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAuBrE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACtC,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;AA8FF,sDAAsD;AACtD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,mBAAmB,GAAG,WAAW,CAY1E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAE3E;AAED,2CAA2C;AAC3C,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAE3D"}

package/dist/components/ui/icons.js

@@ -19,6 +19,21 @@ export function IconHome(props) {
 export function IconProducts(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3 6.5 10 2.5l7 4v9H3v-9z" }), _jsx("path", { d: "M7 11.5h6M7 14h4" })] }));
 }
+export function IconInventory(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3.5 7h13v9.5H3.5z" }), _jsx("path", { d: "M3.5 10.5h13" }), _jsx("path", { d: "M7 7V5.5h6V7" }), _jsx("path", { d: "M7 13h2M11 13h2" })] }));
+}
+export function IconUsers(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "7.5", cy: "7", r: "2.25" }), _jsx("path", { d: "M3.5 15.5c.4-2.4 2-3.75 4-3.75s3.6 1.35 4 3.75" }), _jsx("circle", { cx: "13.5", cy: "7.25", r: "1.75" }), _jsx("path", { d: "M12.2 11.9c1.35.2 2.55 1.1 2.9 3.1" })] }));
+}
+export function IconCard(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "5", width: "15", height: "10.5", rx: "1.5" }), _jsx("path", { d: "M2.5 8.5h15" }), _jsx("path", { d: "M5.5 12.5h4" })] }));
+}
+export function IconTag(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3.5 10.5V4.5H9.5l7 7-5 5-8-6z" }), _jsx("circle", { cx: "7", cy: "7", r: "1", fill: "currentColor", stroke: "none" })] }));
+}
+export function IconBolt(props) {
+    return (_jsx("svg", { ...base(props), children: _jsx("path", { d: "M11 2.5 5.5 11h4L9 17.5 14.5 9h-4L11 2.5z" }) }));
+}
 export function IconGallery(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "1.5" }), _jsx("path", { d: "m3.5 13 3.5-3.5 2.5 2.5L12.5 9l4 4.5" }), _jsx("circle", { cx: "7", cy: "7.5", r: "1", fill: "currentColor", stroke: "none" })] }));
 }
@@ -26,11 +41,32 @@ export function IconFonts(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M5 16.5V5.5h10M7.5 16.5V9h5v7.5" }), _jsx("path", { d: "M7 5.5h6" })] }));
 }
 export function IconMail(props) {
-    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "1.5" }), _jsx("path", { d: "m3.5 6.5 6.5 4.5 3.5 2.5 6.5-2.5 6.5 4.5" })] }));
+    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "1.5" }), _jsx("path", { d: "m3.5 6.5 6.5 4.5 6.5-4.5" })] }));
 }
 export function IconPages(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M6 3.5h5.5L16 8v8.5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1z" }), _jsx("path", { d: "M11.5 3.5V8H16" })] }));
 }
+export function IconPalette(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M10 3a7 7 0 1 0 0 14h1.2a1.8 1.8 0 0 0 0-3.6H10a2 2 0 0 1 0-4h3.5" }), _jsx("circle", { cx: "7.2", cy: "8", r: "0.9", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "8.4", cy: "11.2", r: "0.9", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "12.2", cy: "7.2", r: "0.9", fill: "currentColor", stroke: "none" })] }));
+}
+export function IconTruck(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M2.5 13.5V6.5h9v7" }), _jsx("path", { d: "M11.5 9.5h4l2 2.5v1.5h-6" }), _jsx("circle", { cx: "6", cy: "14.5", r: "1.5" }), _jsx("circle", { cx: "14.5", cy: "14.5", r: "1.5" })] }));
+}
+export function IconClock(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "10", cy: "10", r: "6.5" }), _jsx("path", { d: "M10 6.5V10l3 2" })] }));
+}
+export function IconStar(props) {
+    return (_jsx("svg", { ...base(props), children: _jsx("path", { d: "m10 3.5 1.8 3.7 4.1.6-3 2.9.7 4.1L10 13.2 6.4 14.8l.7-4.1-3-2.9 4.1-.6L10 3.5z" }) }));
+}
+export function IconMegaphone(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M4.5 11.5v-3l10-3.5v10L4.5 11.5z" }), _jsx("path", { d: "M4.5 8.5v5.5a2 2 0 0 0 2 0V11" }), _jsx("path", { d: "M15.5 7.5v5" })] }));
+}
+export function IconLayout(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }), _jsx("path", { d: "M3 8h14M9 8v8.5" })] }));
+}
+export function IconList(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M7 5.5h9.5M7 10h9.5M7 14.5h9.5" }), _jsx("path", { d: "M4 5.5h.01M4 10h.01M4 14.5h.01" })] }));
+}
 export function IconSettings(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "10", cy: "10", r: "2.25" }), _jsx("path", { d: "M10 2.5v2M10 15.5v2M3.5 10h2M14.5 10h2M5.4 5.4l1.4 1.4M13.2 13.2l1.4 1.4M5.4 14.6l1.4-1.4M13.2 6.8l1.4-1.4" })] }));
 }
@@ -52,26 +88,174 @@ export function IconMenu(props) {
 export function IconAddon(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M8 3.5h4v4H8z" }), _jsx("path", { d: "M3.5 8h4v4h-4z" }), _jsx("path", { d: "M12.5 8h4v4h-4z" }), _jsx("path", { d: "M8 12.5h4v4H8z" })] }));
 }
-export function iconForNavKey(key) {
+export const NAV_ICON_COMPONENTS = {
+    home: IconHome,
+    products: IconProducts,
+    inventory: IconInventory,
+    users: IconUsers,
+    card: IconCard,
+    tag: IconTag,
+    bolt: IconBolt,
+    gallery: IconGallery,
+    fonts: IconFonts,
+    mail: IconMail,
+    pages: IconPages,
+    palette: IconPalette,
+    truck: IconTruck,
+    clock: IconClock,
+    star: IconStar,
+    megaphone: IconMegaphone,
+    layout: IconLayout,
+    list: IconList,
+    chart: IconChart,
+    sync: IconSync,
+    addon: IconAddon,
+    settings: IconSettings,
+};
+function normalize(value) {
+    return (value ?? "").trim().toLowerCase().replace(/[_-]+/g, " ");
+}
+function haystack(input) {
+    return `${normalize(input.id)} ${normalize(input.label)}`.trim();
+}
+function matchHeuristic(text) {
+    if (!text)
+        return null;
+    if (/\binventory\b|\bstock\b|\bsku\b/.test(text))
+        return "inventory";
+    if (/\bwaitlist\b|\bsignups?\b|\bcustomers?\b|\bsubscribers?\b/.test(text))
+        return "users";
+    if (/\bwebhooks?\b|\bhooks?\b/.test(text))
+        return "bolt";
+    if (/\bdiscounts?\b|\bcoupons?\b|\bpromos?\b|\boffers?\b/.test(text))
+        return "tag";
+    if (/\bsessions?\b|\bpayments?\b|\bcheckout\b/.test(text))
+        return "card";
+    if (/\bstripe\b/.test(text))
+        return "card";
+    if (/\btheme\b|\bbrand(?:ing)?\b|\bappearance\b|\bcolors?\b/.test(text))
+        return "palette";
+    if (/\bshipping\b|\bfulfill\b|\bdelivery\b|\btruck\b/.test(text))
+        return "truck";
+    if (/\brefunds?\b|\breturns?\b/.test(text))
+        return "sync";
+    if (/\bterms\b|\bpolic(?:y|ies)\b|\blegal\b|\bprivacy\b/.test(text))
+        return "pages";
+    if (/\bproduct page\b|\blayout\b|\bblocks?\b/.test(text))
+        return "layout";
+    if (/\bpre[- ]?order\b|\bcountdown\b|\bschedule\b|\brelease\b/.test(text))
+        return "clock";
+    if (/\breviews?\b|\bratings?\b|\btestimonials?\b/.test(text))
+        return "star";
+    if (/\bannouncements?\b|\bbanners?\b|\bmegaphone\b|\balerts?\b/.test(text))
+        return "megaphone";
+    if (/\blookbook\b|\bpress\b|\blogos?\b|\bsize guide\b|\bguide\b/.test(text))
+        return "list";
+    if (/\bback in stock\b|\bfree shipping\b|\bthreshold\b/.test(text))
+        return "tag";
+    if (/\bemails?\b|\bmail\b|\bcampaigns?\b/.test(text))
+        return "mail";
+    if (/\bfonts?\b|\btypography\b/.test(text))
+        return "fonts";
+    if (/\bgallery\b|\bfiles?\b|\bmedia\b|\bimages?\b/.test(text))
+        return "gallery";
+    if (/\baudit\b|\bmetrics?\b|\banalytics\b/.test(text))
+        return "chart";
+    if (/\bsync\b|\benvironments?\b/.test(text))
+        return "sync";
+    if (/\bgeneral\b|\bsettings?\b/.test(text))
+        return "settings";
+    if (/\bproducts?\b|\bcatalog\b/.test(text))
+        return "products";
+    if (/\bhome\b|\boverview\b/.test(text))
+        return "home";
+    if (/\bnav(?:igation)?\b|\bmenu\b/.test(text))
+        return "list";
+    if (/\babout\b|\bcoming soon\b|\bpages?\b/.test(text))
+        return "pages";
+    return null;
+}
+function matchGroup(group) {
+    const g = normalize(group);
+    if (!g)
+        return null;
+    if (g.includes("payment"))
+        return "card";
+    if (g.includes("marketing") || g.includes("growth") || g.includes("customer"))
+        return "users";
+    if (g.includes("product") || g.includes("catalog"))
+        return "products";
+    if (g.includes("online store") ||
+        g.includes("pages") ||
+        g.includes("storefront"))
+        return "pages";
+    if (g.includes("setting") || g.includes("general"))
+        return "settings";
+    if (g.includes("content") || g.includes("media"))
+        return "gallery";
+    if (g.includes("analytic") || g.includes("home"))
+        return "chart";
+    if (g.includes("add-on") || g.includes("addon"))
+        return "addon";
+    return null;
+}
+function matchCategory(category) {
+    if (category === "product")
+        return "products";
+    if (category === "engagement")
+        return "megaphone";
+    if (category === "sales")
+        return "tag";
+    return null;
+}
+function kindDefault(key, section) {
     if (key === "overview")
-        return IconHome;
+        return "home";
     if (key === "audit")
-        return IconChart;
-    if (key.startsWith("resource:"))
-        return IconProducts;
+        return "chart";
     if (key === "gallery")
-        return IconGallery;
+        return "gallery";
     if (key === "fonts")
-        return IconFonts;
+        return "fonts";
     if (key === "emails")
-        return IconMail;
+        return "mail";
     if (key === "sync")
-        return IconSync;
+        return "sync";
     if (key === "addons:overview")
-        return IconAddon;
+        return "addon";
     if (key.startsWith("addon:"))
-        return IconAddon;
-    if (key.startsWith("config:"))
-        return IconPages;
-    return IconSettings;
+        return "addon";
+    if (key.startsWith("resource:"))
+        return "products";
+    if (key.startsWith("config:")) {
+        if (section === "page")
+            return "pages";
+        return "settings";
+    }
+    return "settings";
+}
+/** Resolve a stable icon name for a sidebar entry. */
+export function resolveNavIconName(input) {
+    if (input.icon && input.icon in NAV_ICON_COMPONENTS)
+        return input.icon;
+    const text = haystack(input);
+    const fromText = matchHeuristic(text);
+    if (fromText)
+        return fromText;
+    if (input.key.startsWith("addon:") || input.section === "addon") {
+        const fromCategory = matchCategory(input.category);
+        if (fromCategory)
+            return fromCategory;
+    }
+    const fromGroup = matchGroup(input.group);
+    if (fromGroup)
+        return fromGroup;
+    return kindDefault(input.key, input.section);
+}
+export function resolveNavIcon(input) {
+    return NAV_ICON_COMPONENTS[resolveNavIconName(input)];
+}
+/** @deprecated Prefer `resolveNavIcon`. */
+export function iconForNavKey(key) {
+    return resolveNavIcon({ key });
 }

package/dist/styles/shell.css

@@ -91,6 +91,16 @@
   letter-spacing: -0.01em;
   white-space: nowrap;
   color: var(--vb-text);
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+.vertebr-topbar-brand-mark {
+  display: block;
+  height: 1.55rem;
+  width: auto;
+  aspect-ratio: 1;
 }
 
 .vertebr-topbar-brand-wrap {
@@ -134,6 +144,16 @@
   white-space: nowrap;
 }
 
+.vertebr-topbar-product[data-mark="true"] {
+  line-height: 0;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.vertebr-topbar-product[data-mark="true"] .vertebr-topbar-brand-mark {
+  height: 1.15rem;
+}
+
 .vertebr-topbar-host-logo {
   width: 1.15rem;
   height: 1.15rem;

package/dist/styles/theme-toggle.css

@@ -64,6 +64,13 @@
   padding: 0.15rem 0.55rem 0.35rem;
 }
 
+.vertebr-brand-mark {
+  display: block;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin-bottom: 0.35rem;
+}
+
 .vertebr-brand strong {
   font-size: 1.05rem;
   letter-spacing: 0.14em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.13.0",
+  "version": "0.16.0",
   "description": "Vertebr admin dashboard UI",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,6 +20,7 @@
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.json && cp src/styles.css dist/styles.css && cp -R src/styles dist/styles && cp -R src/themes dist/themes",
     "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "tsx --test test/*.test.ts",
     "prepublishOnly": "npm run typecheck && npm run build"
   },
   "repository": {
@@ -60,6 +61,7 @@
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "tsx": "^4.20.5",
     "typescript": "^5.9.2"
   },
   "license": "SEE LICENSE IN LICENSE"