@vertebr/react 0.13.0 → 0.15.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/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,GACV,EAAE,iBAAiB,+BA+xBnB"}

package/dist/components/admin/VertebrAdmin.js

@@ -17,7 +17,7 @@ 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";
+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, }) {
     const basePath = basePathProp ?? adminBaseFromApiBase(apiBase);
     const { theme, setTheme } = useVertebrTheme(themeStorageKey);
@@ -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" }),
             });

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.13.0",
+  "version": "0.15.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"