@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/homepage/schemas/index.js

@@ -1 +1,165 @@
 export * from "./firestore";
+// ─── Firestore document schemas (W2) ──────────────────────────────────────────
+// Mirrors HomepageSectionDocument + CarouselSlideDocument + CarouselDocument in
+// ./firestore.ts. Registered into:
+//   SCHEMAS.firestore.homepageSections
+//   SCHEMAS.firestore.carouselSlides
+//   SCHEMAS.firestore.carousels
+//
+// Per-section-type config schemas live in adminSectionsBuildParse (W5 row 1).
+// Here the `config` field is treated as a typed `Record<string, JsonValue>` —
+// the section-builder schemas validate it at the form boundary.
+import { z } from "zod";
+import { auditTimestampsShape, firestoreDateSchema } from "../../../schemas/firestore-helpers";
+export const homepageSectionTypeSchema = z.enum([
+    "welcome",
+    "carousel",
+    "stats",
+    "trust-indicators",
+    "categories",
+    "brands",
+    "products",
+    "pre-orders",
+    "auctions",
+    "banner",
+    "features",
+    "reviews",
+    "whatsapp-community",
+    "faq",
+    "blog-articles",
+    "newsletter",
+    "stores",
+    "events",
+    "social-feed",
+    "custom-cards",
+    "google-reviews",
+    "featured-bundles",
+    "prize-draws",
+    "event-raffles",
+    "collection-cards",
+]);
+// JsonValue Zod — used for section configs whose shape varies per section type.
+// The section-builder schemas (W5 row 1) provide the per-type validation.
+const jsonValueSchema = z.lazy(() => z.union([
+    z.string(),
+    z.number(),
+    z.boolean(),
+    z.null(),
+    z.array(jsonValueSchema),
+    z.record(z.string(), jsonValueSchema),
+]));
+export const homepageSectionFirestoreSchema = z.object({
+    id: z.string(),
+    type: homepageSectionTypeSchema,
+    order: z.number().int(),
+    enabled: z.boolean(),
+    config: z.record(z.string(), jsonValueSchema),
+    ...auditTimestampsShape,
+});
+export const carouselBackgroundSchema = z.object({
+    type: z.enum(["image", "video", "color", "gradient"]),
+    url: z.string().optional(),
+    mobileUrl: z.string().optional(),
+    thumbnail: z.string().optional(),
+    color: z.string().optional(),
+    gradientFrom: z.string().optional(),
+    gradientTo: z.string().optional(),
+    gradientAngle: z.number().min(0).max(360).optional(),
+    dimOverlay: z
+        .object({ enabled: z.boolean(), opacity: z.number().min(0).max(1) })
+        .optional(),
+});
+export const carouselCardSchema = z.object({
+    id: z.string(),
+    zone: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5), z.literal(6)]),
+    mobileZone: z.union([z.literal(2), z.literal(5)]).optional(),
+    background: carouselBackgroundSchema,
+    content: z
+        .object({
+        eyebrow: z.string().optional(),
+        title: z.string().optional(),
+        subtitle: z.string().optional(),
+        description: z.string().optional(),
+        textColor: z.string().optional(),
+        textAlign: z.enum(["left", "center", "right"]).optional(),
+    })
+        .optional(),
+    buttons: z
+        .array(z.object({
+        id: z.string().optional(),
+        text: z.string(),
+        href: z.string(),
+        variant: z.enum(["primary", "secondary", "outline", "ghost", "link"]),
+        openInNewTab: z.boolean().optional(),
+    }))
+        .optional(),
+    hover: z
+        .object({
+        effect: z.enum(["scale", "color", "glow", "none"]),
+        scaleValue: z.number().optional(),
+        colorValue: z.string().optional(),
+    })
+        .optional(),
+    isButtonOnly: z.boolean().optional(),
+    gridRow: z.union([z.literal(1), z.literal(2)]).optional(),
+    gridCol: z.union([z.literal(1), z.literal(2), z.literal(3)]).optional(),
+});
+export const carouselFirestoreSchema = z.object({
+    id: z.string(),
+    name: z.string(),
+    status: z.enum(["active", "draft"]),
+    slideIds: z.array(z.string()),
+    createdBy: z.string(),
+    ...auditTimestampsShape,
+});
+export const carouselSlideFirestoreSchema = z.object({
+    id: z.string(),
+    carouselId: z.string().nullable().optional(),
+    title: z.string(),
+    order: z.number().int(),
+    active: z.boolean(),
+    background: carouselBackgroundSchema.optional(),
+    media: z
+        .object({
+        type: z.enum(["image", "video"]),
+        url: z.string(),
+        alt: z.string().optional(),
+        thumbnail: z.string().optional(),
+    })
+        .optional(),
+    link: z.object({ url: z.string(), openInNewTab: z.boolean() }).optional(),
+    mobileMedia: z
+        .object({ type: z.enum(["image", "video"]), url: z.string(), alt: z.string().optional() })
+        .optional(),
+    cards: z.array(carouselCardSchema),
+    overlay: z
+        .object({
+        enabled: z.boolean().optional(),
+        color: z.string().optional(),
+        opacity: z.number().optional(),
+        title: z.string().optional(),
+        subtitle: z.string().optional(),
+        description: z.string().optional(),
+        button: z
+            .object({
+            id: z.string().optional(),
+            text: z.string(),
+            link: z.string(),
+            variant: z.enum(["primary", "secondary", "outline"]),
+            openInNewTab: z.boolean(),
+        })
+            .optional(),
+    })
+        .optional(),
+    settings: z
+        .object({
+        autoplayDelayMs: z.number().int().optional(),
+        height: z.enum(["viewport", "tall", "medium"]).optional(),
+    })
+        .optional(),
+    analytics: z
+        .object({ views: z.number().int().nonnegative(), lastViewed: firestoreDateSchema.optional() })
+        .optional(),
+    createdBy: z.string(),
+    ...auditTimestampsShape,
+});

package/dist/features/layout/AppLayoutShell.js

@@ -1,17 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-// QueryClientProvider intentionally NOT imported here — see the comment in the
-// component body. The consumer-level QueryProvider owns the QueryClient.
-import { Main, Div, Text, TextLink, Ul, Li, AvatarDisplay, BackgroundRenderer, UnsavedChangesModal, } from "../../ui";
+// QueryClientProvider intentionally NOT imported here. Consumer's QueryProvider
+// owns the singleton; nesting another would risk Turbopack chunk-splitting.
+// The actual 2.8.8 SSR crash was a peer-dep duplicate fixed by the
+// scripts/dedupe-peer-deps.mjs postinstall hook (see scripts/ and CLAUDE.md #19).
+import { AvatarDisplay, BackgroundRenderer, Div, Li, Main, Row, Span, Stack, Text, TextLink, Ul, UnsavedChangesModal } from "../../ui";
+// Role indicator dots — distinct hues per role tier. Brand-decorative palette
+// kept inline so a future tokens.css "role" namespace can replace this in one
+// edit. The audit allows these as static role markers.
 const ROLE_DOT_COLORS = {
-    admin: "#9333ea",
-    moderator: "#0ea5e9",
-    seller: "#0d9488",
-    employee: "#f59e0b",
+    admin: "#9333ea", // audit-hex-tokens-ok: role indicator (purple-600)
+    moderator: "#0ea5e9", // audit-hex-tokens-ok: role indicator (sky-500)
+    seller: "#0d9488", // audit-hex-tokens-ok: role indicator (teal-600)
+    employee: "#f59e0b", // audit-hex-tokens-ok: role indicator (amber-500)
 };
-import { useTheme } from "../../react";
+import { useTheme } from "../../_internal/client/theme";
 import { useAuth } from "../../react/contexts/SessionContext";
+import { isBuyerUser } from "../auth/role-predicates";
 import { NavbarWithSettings } from "./NavbarWithSettings";
 import { useBottomActionsContext } from "./BottomActionsContext";
 import BottomActions from "./BottomActions";
@@ -22,35 +28,39 @@ import { SidebarLayout } from "./SidebarLayout";
 import { TitleBar } from "./TitleBar";
 import { BackToTop } from "./BackToTop";
 import { useDashboardNav } from "./DashboardNavContext";
+// Background defaults consumed by BackgroundRenderer — these are seed values
+// written into siteSettings on first deploy and may be overridden at runtime.
+// audit-hex-tokens-ok: seed defaults for siteSettings.theme.background
 const DEFAULT_LIGHT_BG = {
     type: "color",
-    value: "#f9fafb",
-    overlay: { enabled: false, color: "#000000", opacity: 0 },
+    value: "#f9fafb", // audit-hex-tokens-ok: zinc-50 seed default
+    overlay: { enabled: false, color: "#000000", opacity: 0 }, // audit-hex-tokens-ok: overlay seed default
 };
 const CLS_STAT_BOX = "flex flex-col items-center gap-1 p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg text-center";
 const CLS_STAT_LABEL = "text-xs text-zinc-500 dark:text-zinc-400";
-const CLS_LOGOUT_BTN = "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950/30 dark:hover:text-red-300";
+const CLS_LOGOUT_BTN = "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-error transition-colors hover:bg-error-surface hover:text-error dark:text-error dark:hover:bg-error-surface dark:hover:text-error";
+// audit-hex-tokens-ok: dark theme background seed default
 const DEFAULT_DARK_BG = {
     type: "color",
-    value: "#030712",
-    overlay: { enabled: false, color: "#000000", opacity: 0 },
+    value: "#030712", // audit-hex-tokens-ok: gray-950 seed default
+    overlay: { enabled: false, color: "#000000", opacity: 0 }, // audit-hex-tokens-ok: overlay seed default
 };
 /** Collapsible accordion section for the public sidebar. */
 function CollapsibleNavGroup({ title, children, }) {
     const [open, setOpen] = useState(false);
-    return (_jsxs(Div, { className: "space-y-0.5", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-1 py-1 text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: [_jsx("span", { children: title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && _jsx(Div, { className: "space-y-0.5", children: children })] }));
+    return (_jsxs(Stack, { gap: "none", className: "", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-1 py-1 text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: [_jsx(Span, { children: title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && _jsx(Stack, { gap: "none", className: "", children: children })] }));
 }
 function CollapsibleSidebarSection({ section, navItemClass, }) {
     const [open, setOpen] = useState(section.defaultOpen ?? false);
     const hasTitle = !!section.title;
     if (!hasTitle) {
-        return (_jsx(Ul, { className: "space-y-0.5", children: section.items.map((item) => (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: navItemClass, children: [item.icon && (_jsx("span", { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`))) }));
+        return (_jsx(Ul, { spacing: "2xs", children: section.items.map((item) => (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: navItemClass, children: [item.icon && (_jsx(Span, { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`))) }));
     }
-    return (_jsxs(Div, { className: "space-y-0.5", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-1 py-1 text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: [_jsx("span", { children: section.title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Ul, { className: "space-y-0.5", children: section.items.map((item) => (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: navItemClass, children: [item.icon && (_jsx("span", { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`))) }))] }));
+    return (_jsxs(Stack, { gap: "none", className: "", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-1 py-1 text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: [_jsx(Span, { children: section.title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Ul, { spacing: "2xs", children: section.items.map((item) => (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: navItemClass, children: [item.icon && (_jsx(Span, { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`))) }))] }));
 }
 /** Sidebar header when a user is logged in — avatar + display name + close button. */
 function SidebarUserHeader({ user, onClose, }) {
-    return (_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsxs(Div, { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsxs(Div, { className: "flex-shrink-0 relative", children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata
+    return (_jsxs(Row, { align: "center", justify: "between", gap: "3", children: [_jsxs(Row, { className: "flex-1 min-w-0", align: "center", gap: "3", children: [_jsxs(Div, { className: "flex-shrink-0 relative", children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata
                                     ? {
                                         url: user.avatarMetadata.url,
                                         position: user.avatarMetadata.position ?? { x: 50, y: 50 },
@@ -58,13 +68,13 @@ function SidebarUserHeader({ user, onClose, }) {
                                     }
                                     : user.photoURL
                                         ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 }
-                                        : null, size: "md", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && user.role !== "user" && (_jsx(Div, { className: "absolute -bottom-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full border-2 border-white dark:border-slate-900 text-white text-[9px] font-bold leading-none select-none", 
+                                        : null, size: "md", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && !isBuyerUser(user) && (_jsx(Row, { textWeight: "bold", className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 border-2 border-white text-white text-[9px] leading-none select-none", align: "center", justify: "center", rounded: "full", 
                                 // audit-inline-style-ok: runtime brand gradient
-                                style: { background: ROLE_DOT_COLORS[user.role] ?? "#6b7280" }, title: user.role.charAt(0).toUpperCase() + user.role.slice(1), "aria-label": user.role, children: user.role.charAt(0).toUpperCase() }))] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: user.displayName || "User" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: user.email || "" })] })] }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: onClose, className: "flex-shrink-0 rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }));
+                                style: { background: ROLE_DOT_COLORS[user.role] ?? "var(--appkit-color-text-muted)" }, title: user.role.charAt(0).toUpperCase() + user.role.slice(1), "aria-label": user.role, children: user.role.charAt(0).toUpperCase() }))] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "medium", children: user.displayName || "User" }), _jsx(Text, { className: "truncate", color: "muted", size: "xs", children: user.email || "" })] })] }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: onClose, className: "flex-shrink-0 rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }));
 }
 /** Sidebar header when no user is logged in — title + close button. */
 function SidebarGuestHeader({ sidebarTitle, onClose, }) {
-    return (_jsxs(Div, { className: "flex items-center justify-between", children: [_jsx(Div, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: sidebarTitle }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: onClose, className: "rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }));
+    return (_jsxs(Row, { align: "center", justify: "between", children: [_jsx(Div, { textWeight: "semibold", textSize: "sm", color: "primary", children: sidebarTitle }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: onClose, className: "rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }));
 }
 function SidebarContent({ sidebarItems, sidebarSections, sidebarPrimaryActions, user, profileHref, userOrdersHref, userWishlistHref, userSettingsHref, adminHref, storeHref, sellerHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, theme, toggleTheme, onLogout, onAfterLogout, }) {
     const hasLegacyItems = sidebarItems.length > 0;
@@ -90,20 +100,21 @@ function SidebarContent({ sidebarItems, sidebarSections, sidebarPrimaryActions,
         : hasLegacyItems
             ? [{ items: sidebarItems }]
             : [];
-    return (_jsxs(Div, { className: "space-y-6", children: [!isAuthenticated && sidebarPrimaryActions && sidebarPrimaryActions.length > 0 && (_jsx(Div, { className: "space-y-2", children: sidebarPrimaryActions.map((action) => (_jsx(TextLink, { href: action.href, variant: "none", className: [
+    return (_jsxs(Stack, { gap: "lg", children: [!isAuthenticated && sidebarPrimaryActions && sidebarPrimaryActions.length > 0 && (_jsx(Stack, { gap: "sm", children: sidebarPrimaryActions.map((action) => (_jsx(TextLink, { href: action.href, variant: "none", className: [
                         "block w-full rounded-lg px-3 py-2.5 text-center text-sm font-semibold transition-all duration-200 hover:scale-[1.02] shadow-sm",
                         action.variant === "outline"
                             ? "border border-zinc-300 text-zinc-700 hover:bg-zinc-50 dark:border-slate-700 dark:text-zinc-100 dark:hover:bg-slate-800"
                             : "bg-primary text-white hover:bg-primary-600 dark:bg-primary dark:hover:bg-primary-600 btn-glow",
-                    ].join(" "), children: action.label }, `${action.href}-${action.label}`))) })), isAuthenticated && (_jsx(CollapsibleNavGroup, { title: labels.sectionTitle, children: _jsxs(Ul, { className: "space-y-0.5", children: [_jsx(Li, { children: _jsx(TextLink, { href: profileHref, variant: "none", className: navItemClass, children: labels.profile }) }), userOrdersHref && (_jsx(Li, { children: _jsx(TextLink, { href: userOrdersHref, variant: "none", className: navItemClass, children: labels.orders }) })), userWishlistHref && (_jsx(Li, { children: _jsx(TextLink, { href: userWishlistHref, variant: "none", className: navItemClass, children: labels.wishlist }) })), userSettingsHref && (_jsx(Li, { children: _jsx(TextLink, { href: userSettingsHref, variant: "none", className: navItemClass, children: labels.settings }) }))] }) })), isAuthenticated && user?.stats && (_jsxs(Div, { className: "grid grid-cols-2 gap-2", children: [user.stats.totalOrders != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.totalOrders }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Orders" })] })), user.stats.reviewsCount != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.reviewsCount }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Reviews" })] })), user.stats.auctionsWon != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.auctionsWon }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Auctions Won" })] })), user.stats.itemsSold != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.itemsSold }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Items Sold" })] }))] })), isAuthenticated && isAdminOrSeller && (adminHref || resolvedStoreHref) && (_jsx(CollapsibleNavGroup, { title: labels.dashboardSectionTitle, children: _jsxs(Ul, { className: "space-y-0.5", children: [adminHref && role === "admin" && (_jsx(Li, { children: _jsx(TextLink, { href: adminHref, variant: "none", className: navItemClass, children: labels.adminDashboard }) })), resolvedStoreHref && isAdminOrSeller && (_jsx(Li, { children: _jsx(TextLink, { href: resolvedStoreHref, variant: "none", className: navItemClass, children: labels.storeDashboard }) }))] }) })), normalizedSections.map((section, sectionIndex) => (_jsx(CollapsibleSidebarSection, { section: section, navItemClass: navItemClass }, `sidebar-section-${sectionIndex}`))), (sidebarLocaleSlot || showThemeToggleInSidebar || (isAuthenticated && onLogout)) && (_jsxs(Div, { className: "border-t border-zinc-200 pt-4 space-y-3 dark:border-slate-800", children: [sidebarLocaleSlot, showThemeToggleInSidebar && (_jsxs("button", { type: "button", onClick: toggleTheme, className: "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-primary-50 hover:text-primary-800 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-secondary-300", children: [_jsx("span", { "aria-hidden": "true", children: theme === "dark" ? "☀️" : "🌙" }), theme === "dark" ? "Light mode" : "Dark mode"] })), isAuthenticated && onLogout && (_jsx("button", { type: "button", onClick: () => { onLogout(); onAfterLogout(); }, className: CLS_LOGOUT_BTN, children: labels.logout }))] }))] }));
+                    ].join(" "), children: action.label }, `${action.href}-${action.label}`))) })), isAuthenticated && (_jsx(CollapsibleNavGroup, { title: labels.sectionTitle, children: _jsxs(Ul, { spacing: "2xs", children: [_jsx(Li, { children: _jsx(TextLink, { href: profileHref, variant: "none", className: navItemClass, children: labels.profile }) }), userOrdersHref && (_jsx(Li, { children: _jsx(TextLink, { href: userOrdersHref, variant: "none", className: navItemClass, children: labels.orders }) })), userWishlistHref && (_jsx(Li, { children: _jsx(TextLink, { href: userWishlistHref, variant: "none", className: navItemClass, children: labels.wishlist }) })), userSettingsHref && (_jsx(Li, { children: _jsx(TextLink, { href: userSettingsHref, variant: "none", className: navItemClass, children: labels.settings }) }))] }) })), isAuthenticated && user?.stats && (_jsxs(Div, { layout: "grid", gap: "2", className: "grid-cols-2", children: [user.stats.totalOrders != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.totalOrders }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Orders" })] })), user.stats.reviewsCount != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.reviewsCount }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Reviews" })] })), user.stats.auctionsWon != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.auctionsWon }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Auctions Won" })] })), user.stats.itemsSold != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.itemsSold }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Items Sold" })] }))] })), isAuthenticated && isAdminOrSeller && (adminHref || resolvedStoreHref) && (_jsx(CollapsibleNavGroup, { title: labels.dashboardSectionTitle, children: _jsxs(Ul, { spacing: "2xs", children: [adminHref && role === "admin" && (_jsx(Li, { children: _jsx(TextLink, { href: adminHref, variant: "none", className: navItemClass, children: labels.adminDashboard }) })), resolvedStoreHref && isAdminOrSeller && (_jsx(Li, { children: _jsx(TextLink, { href: resolvedStoreHref, variant: "none", className: navItemClass, children: labels.storeDashboard }) }))] }) })), normalizedSections.map((section, sectionIndex) => (_jsx(CollapsibleSidebarSection, { section: section, navItemClass: navItemClass }, `sidebar-section-${sectionIndex}`))), (sidebarLocaleSlot || showThemeToggleInSidebar || (isAuthenticated && onLogout)) && (_jsxs(Stack, { border: "default", className: "border-t dark:border-slate-800", padding: "t-md", gap: "3", children: [sidebarLocaleSlot, showThemeToggleInSidebar && (_jsxs("button", { type: "button", onClick: toggleTheme, className: "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-primary-50 hover:text-primary-800 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-secondary-300", children: [_jsx(Span, { "aria-hidden": "true", children: theme === "dark" ? "☀️" : "🌙" }), theme === "dark" ? "Light mode" : "Dark mode"] })), isAuthenticated && onLogout && (_jsx("button", { type: "button", onClick: () => { onLogout(); onAfterLogout(); }, className: CLS_LOGOUT_BTN, children: labels.logout }))] }))] }));
 }
 // ─── Main component ────────────────────────────────────────────────────────────
 export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle = false, suppressDashboardNav = false, hideSidebarToggle = false, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar = false, sidebarProfileLabels, eventBannerSlot, contentClassName, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
     // QueryClientProvider used to be created here so AppLayoutShell could stand
-    // alone, but the consumer's QueryProvider wraps the entire app and nesting a
-    // second QueryClientProvider risks splitting QueryClientContext across
-    // Turbopack chunks → "No QueryClient set" on every SSR route. Rely on the
-    // outer consumer-supplied QueryClient instead.
+    // alone. The real cause of the 2026-06-10/11 "No QueryClient set" prod crash
+    // turned out to be a peer-dep duplicate of @tanstack/query-core under
+    // appkit/node_modules/ (fixed by scripts/dedupe-peer-deps.mjs in the
+    // postinstall hook). Keeping this nested provider removed regardless because
+    // a single consumer-level QueryProvider is the correct architecture.
     const [sidebarOpen, setSidebarOpen] = useState(false);
     const [searchOpen, setSearchOpen] = useState(false);
     const { theme, toggleTheme } = useTheme();
@@ -142,6 +153,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
         value: lightBackground.value,
         overlay: {
             enabled: lightBackground.overlay?.enabled ?? false,
+            // audit-hex-tokens-ok: black overlay fallback when admin hasn't configured one
             color: lightBackground.overlay?.color ?? "#000000",
             opacity: lightBackground.overlay?.opacity ?? 0,
         },
@@ -151,9 +163,10 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
         value: darkBackground.value,
         overlay: {
             enabled: darkBackground.overlay?.enabled ?? false,
+            // audit-hex-tokens-ok: black overlay fallback when admin hasn't configured one
             color: darkBackground.overlay?.color ?? "#000000",
             opacity: darkBackground.overlay?.opacity ?? 0,
         },
     };
-    return (_jsx(_Fragment, { children: _jsxs(Div, { className: "flex min-h-screen w-full flex-col overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot)] }), eventBannerSlot, _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { className: "relative flex w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", className: `w-full flex-1 flex flex-col ${hasBottomActions ? "mb-28" : "mb-16"} md:mb-0`, children: _jsx(Div, { className: `flex-1 ${contentClassName ?? "w-full px-5 py-6 md:px-6 lg:px-8"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomActions, {}), _jsx(BottomNavbar, { user: user, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: hasDashboardNav ? toggleDashboardNav : handleTogglePublicSidebar }), _jsx(UnsavedChangesModal, {})] }) }));
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot)] }), eventBannerSlot, _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", className: `w-full flex-1 flex flex-col ${hasBottomActions ? "mb-28" : "mb-16"} md:mb-0`, children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "w-full px-5 md:px-6 lg:px-8"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomActions, {}), _jsx(BottomNavbar, { user: user, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: hasDashboardNav ? toggleDashboardNav : handleTogglePublicSidebar }), _jsx(UnsavedChangesModal, {})] }) }));
 }

package/dist/features/layout/AutoBreadcrumbs.js

@@ -77,8 +77,8 @@ export function AutoBreadcrumbs({ pathLabels, separator = "/", className = "", r
         href: `${localePrefix}/${segments.slice(0, i + 1).join("/")}`,
     }));
     const allCrumbs = [{ label: "Home", href: localePrefix || "/" }, ...crumbs];
-    return (_jsx(Div, { className: "border-y border-zinc-200/80 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:border-slate-800 dark:bg-slate-950/95 dark:supports-[backdrop-filter]:bg-slate-950/85", children: _jsx(Div, { className: "container mx-auto max-w-[1920px] px-5 py-2 sm:px-6 lg:px-8", children: _jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 text-sm flex-wrap", children: allCrumbs.map((crumb, index) => {
+    return (_jsx(Div, { border: "default", className: "border-y /80 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:supports-[backdrop-filter]:bg-slate-950/85", surface: "default", children: _jsx(Div, { className: "container mx-auto max-w-[1920px] px-5 sm:px-6 lg:px-8", padding: "y-xs", children: _jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 flex-wrap", size: "sm", children: allCrumbs.map((crumb, index) => {
                         const isLast = index === allCrumbs.length - 1;
-                        return (_jsxs(Li, { className: "flex items-center gap-2", children: [isLast ? (_jsx(Span, { "aria-current": "page", className: "text-zinc-700 dark:text-zinc-200", children: crumb.label })) : renderLink ? (renderLink(crumb.href, crumb.label)) : (_jsx(Link, { href: crumb.href, className: "text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-colors", children: crumb.label })), !isLast && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400/90 select-none", "aria-hidden": "true", children: separator }))] }, crumb.href));
+                        return (_jsxs(Li, { layout: "flex-center", gap: "2", children: [isLast ? (_jsx(Span, { "aria-current": "page", color: "primary", children: crumb.label })) : renderLink ? (renderLink(crumb.href, crumb.label)) : (_jsx(Link, { href: crumb.href, className: "text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-colors", children: crumb.label })), !isLast && (_jsx(Span, { className: "dark:text-zinc-400/90 select-none", color: "muted", "aria-hidden": "true", children: separator }))] }, crumb.href));
                     }) }) }) }) }));
 }

package/dist/features/layout/BottomActions.js

@@ -10,7 +10,7 @@ const BOTTOM_NAV_BG = "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-
 const Z_BOTTOM_ACTIONS = "z-40";
 const BOTTOM_NAV_HEIGHT = "h-14";
 const FLEX_CENTER = "flex items-center justify-center";
-const CLS_COUNT_BADGE = "bg-red-500 text-white";
+const CLS_COUNT_BADGE = "bg-error-surface text-white";
 // ─── Sub-components ───────────────────────────────────────────────────────────
 function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect, }) {
     return (_jsx("div", { role: "listbox", "aria-label": "Bulk actions", className: [
@@ -49,7 +49,7 @@ function PageActionsRow({ pageActions, dispatchAction, }) {
                     isIconOnly ? "px-0 justify-center" : "",
                 ]
                     .filter(Boolean)
-                    .join(" "), children: [action.icon && (_jsx(Span, { className: ["flex-shrink-0", action.label ? "mr-1.5" : ""].join(" "), "aria-hidden": "true", children: action.icon })), action.label && _jsx(Span, { className: "truncate leading-none", children: action.label }), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] ${CLS_COUNT_BADGE} text-[10px] font-bold rounded-full ${FLEX_CENTER} px-1 pointer-events-none select-none`, "aria-hidden": "true", children: action.badge }))] }, action.id));
+                    .join(" "), children: [action.icon && (_jsx(Span, { className: ["flex-shrink-0", action.label ? "mr-1.5" : ""].join(" "), "aria-hidden": "true", children: action.icon })), action.label && _jsx(Span, { className: "truncate leading-none", children: action.label }), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] ${CLS_COUNT_BADGE} text-[10px] ${FLEX_CENTER} px-1 pointer-events-none select-none`, rounded: "full", weight: "bold", "aria-hidden": "true", children: action.badge }))] }, action.id));
         }) }));
 }
 export default function BottomActions() {
@@ -100,7 +100,7 @@ export default function BottomActions() {
             isVisible ? "translate-y-0" : "translate-y-full pointer-events-none",
         ]
             .filter(Boolean)
-            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-secondary-400 to-primary-600 dark:from-primary-600 dark:via-primary-400 dark:to-primary-600" })), infoLabel && !isBulkMode && (_jsx(Div, { className: "px-4 pt-2 pb-0 border-b border-zinc-100/80 dark:border-slate-800/80", children: _jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 leading-5 truncate", children: infoLabel }) })), _jsx(Row, { className: `gap-2 px-3 ${BOTTOM_NAV_HEIGHT}`, children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), infoLabel && !isBulkMode && (_jsx(Div, { border: "subtle", className: "pt-2 pb-0 border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), _jsx(Row, { className: `${BOTTOM_NAV_HEIGHT}`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
                                         ? `${bulk.selectedCount} ${bulk.noun}`
                                         : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                                 "flex-1 min-w-0 h-10 flex items-center gap-2 px-3 rounded-lg border text-sm font-medium transition-colors",
@@ -111,7 +111,7 @@ export default function BottomActions() {
                                     : "text-zinc-800 dark:text-zinc-100",
                             ]
                                 .filter(Boolean)
-                                .join(" "), children: [selectedAction?.icon && (_jsx(Span, { className: `flex-shrink-0 w-4 h-4 ${FLEX_CENTER}`, "aria-hidden": "true", children: selectedAction.icon })), _jsx(Span, { className: "flex-1 truncate text-left leading-none", children: selectedAction?.label ?? "Bulk actions" }), pickerOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" }))] })), bulkActions.length > 0 && (_jsx(Button, { type: "button", variant: selectedAction?.variant ?? "primary", size: "sm", isLoading: selectedAction?.loading, disabled: !selectedActionId ||
+                                .join(" "), children: [selectedAction?.icon && (_jsx(Span, { className: `flex-shrink-0 w-4 h-4 ${FLEX_CENTER}`, "aria-hidden": "true", children: selectedAction.icon })), _jsx(Span, { className: "flex-1 truncate leading-none", align: "start", children: selectedAction?.label ?? "Bulk actions" }), pickerOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" }))] })), bulkActions.length > 0 && (_jsx(Button, { type: "button", variant: selectedAction?.variant ?? "primary", size: "sm", isLoading: selectedAction?.loading, disabled: !selectedActionId ||
                                 selectedAction?.disabled ||
                                 selectedAction?.loading, onClick: handleApply, className: "h-10 flex-shrink-0", children: _jsx(Span, { className: "leading-none", children: "Apply" }) }))] })) : (
                 /* Page mode — action buttons inline ------------------------------ */

package/dist/features/layout/BottomNavItem.d.ts

@@ -16,12 +16,12 @@ export interface BottomNavItemProps {
  * @example
  * ```tsx
  * <BottomNavLayout ariaLabel="Main navigation">
- *   <BottomNavItem
- *     href="/products"
- *     icon={<ShoppingBagIcon className="w-6 h-6" />}
- *     label="Shop"
- *     isActive={pathname === "/products"}
- *   />
+ * <BottomNavItem
+ * href="/products"
+ * icon={<ShoppingBagIcon className="w-6 h-6" />}
+ * label="Shop"
+ * isActive={pathname === "/products"}
+ * />
  * </BottomNavLayout>
  * ```
  */

package/dist/features/layout/BottomNavItem.js

@@ -9,12 +9,12 @@ import { Li, Span } from "../../ui";
  * @example
  * ```tsx
  * <BottomNavLayout ariaLabel="Main navigation">
- *   <BottomNavItem
- *     href="/products"
- *     icon={<ShoppingBagIcon className="w-6 h-6" />}
- *     label="Shop"
- *     isActive={pathname === "/products"}
- *   />
+ * <BottomNavItem
+ * href="/products"
+ * icon={<ShoppingBagIcon className="w-6 h-6" />}
+ * label="Shop"
+ * isActive={pathname === "/products"}
+ * />
  * </BottomNavLayout>
  * ```
  */
@@ -23,5 +23,5 @@ export function BottomNavItem({ href, label, icon, badge, isActive = false, clas
     // Consumer projects may swap for next/link if preferred.
     return (_jsx(Li, { className: "flex-1", children: _jsxs("a", { href: href, "aria-label": label, "aria-current": isActive ? "page" : undefined, className: `relative flex flex-col items-center justify-center gap-0.5 h-full w-full min-h-[44px] transition-colors ${isActive
                 ? "text-primary-600 dark:text-secondary-400"
-                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"}${className ? ` ${className}` : ""}`, children: [_jsxs(Span, { className: "relative", children: [icon, badge != null && badge > 0 && (_jsx(Span, { "aria-label": `${badge} items`, className: "absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold bg-secondary-500 text-white flex items-center justify-center leading-none", children: badge > 99 ? "99+" : badge }))] }), _jsx(Span, { weight: "medium", className: "text-[10px] leading-none", children: label })] }) }));
+                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"}${className ? ` ${className}` : ""}`, children: [_jsxs(Span, { className: "relative", children: [icon, badge != null && badge > 0 && (_jsx(Span, { layout: "flex-center", color: "inverse", "aria-label": `${badge} items`, className: "absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-1 text-[10px] bg-secondary-500 leading-none", rounded: "full", weight: "bold", children: badge > 99 ? "99+" : badge }))] }), _jsx(Span, { weight: "medium", className: "text-[10px] leading-none", children: label })] }) }));
 }

package/dist/features/layout/BottomNavbar.js

@@ -27,6 +27,16 @@ export function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref,
         return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [visibleItems.map((item) => (_jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: item.href, label: item.label, icon: item.icon ?? defaultIcon, isActive: pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href + "/")), variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }, item.key))), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onMoreToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.more, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }), _jsx(Span, { className: labelClassName, children: labels.more })] }) })] }));
     }
     const itemStyle = { width: "20%" };
-    return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: ["// audit-inline-style-ok: pass-through style prop", _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: homeHref, label: labels.home, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), "// audit-inline-style-ok: pass-through style prop", _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: shopHref, label: labels.products, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), "// audit-inline-style-ok: pass-through style prop", _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs("button", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.search, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.search })] }) }), "// audit-inline-style-ok: pass-through style prop", _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": labels.cart, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), "// audit-inline-style-ok: pass-through style prop", _jsx(Li, { className: "flex-1", style: itemStyle, children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.profile, children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
-                                (user.photoURL ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 } : null), size: "sm", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Span, { className: `text-[7px] font-semibold uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-zinc-500 dark:text-slate-400"}`, children: user.role }))] })) : (_jsx(NavItem, { href: loginHref, label: labels.profile, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), isActive: pathname === loginHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName })) })] }));
+    return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1", 
+                // audit-inline-style-ok: pass-through style prop
+                style: itemStyle, children: _jsx(NavItem, { href: homeHref, label: labels.home, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", 
+                // audit-inline-style-ok: pass-through style prop
+                style: itemStyle, children: _jsx(NavItem, { href: shopHref, label: labels.products, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", 
+                // audit-inline-style-ok: pass-through style prop
+                style: itemStyle, children: _jsxs("button", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.search, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.search })] }) }), _jsx(Li, { className: "flex-1", 
+                // audit-inline-style-ok: pass-through style prop
+                style: itemStyle, children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": labels.cart, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), _jsx(Li, { className: "flex-1", 
+                // audit-inline-style-ok: pass-through style prop
+                style: itemStyle, children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.profile, children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
+                                (user.photoURL ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 } : null), size: "sm", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Span, { className: `text-[7px] uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-zinc-500 dark:text-slate-400"}`, weight: "semibold", children: user.role }))] })) : (_jsx(NavItem, { href: loginHref, label: labels.profile, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), isActive: pathname === loginHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName })) })] }));
 }

package/dist/features/layout/BottomSheet.d.ts

@@ -21,7 +21,7 @@ export interface BottomSheetProps {
  * @example
  * ```tsx
  * <BottomSheet open={isOpen} onClose={() => setIsOpen(false)} title="Filters">
- *   <FilterPanel />
+ * <FilterPanel />
  * </BottomSheet>
  * ```
  */

package/dist/features/layout/BottomSheet.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useCallback } from "react";
-import { Button, Div, Row, Span } from "../../ui";
+import { Button, Div, Row, Span, Stack } from "../../ui";
 const __O = {
     yAuto: "overflow-y-auto",
 };
@@ -17,7 +17,7 @@ const __O = {
  * @example
  * ```tsx
  * <BottomSheet open={isOpen} onClose={() => setIsOpen(false)} title="Filters">
- *   <FilterPanel />
+ * <FilterPanel />
  * </BottomSheet>
  * ```
  */
@@ -38,5 +38,5 @@ export function BottomSheet({ open, onClose, title, children, className, maxHeig
     }, [open, handleEscape]);
     if (!open)
         return null;
-    return (_jsxs(Div, { className: "fixed inset-0 z-50 lg:hidden", role: "presentation", children: [_jsx(Div, { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", "aria-hidden": "true", onClick: onClose }), _jsxs(Div, { role: "dialog", "aria-modal": "true", "aria-label": title, className: `absolute bottom-0 inset-x-0 flex flex-col rounded-t-2xl bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 shadow-2xl ${maxHeight} animate-slide-up${className ? ` ${className}` : ""}`, children: [_jsxs(Row, { justify: "between", className: "px-4 py-3 border-b border-zinc-100 dark:border-zinc-800 shrink-0", children: [_jsx(Div, { className: "absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-600" }), title && (_jsx(Span, { size: "sm", weight: "semibold", className: "text-zinc-800 dark:text-zinc-100 mt-2", children: title })), _jsx(Button, { type: "button", onClick: onClose, "aria-label": "Close", className: "ml-auto mt-2 p-1.5 rounded-lg text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx(Div, { className: `flex-1 ${__O.yAuto} overscroll-contain pb-[env(safe-area-inset-bottom)]`, children: children })] })] }));
+    return (_jsxs(Div, { className: "fixed inset-0 z-50 lg:hidden", role: "presentation", children: [_jsx(Div, { surface: "overlay-sm", className: "absolute inset-0 backdrop-blur-sm", "aria-hidden": "true", onClick: onClose }), _jsxs(Stack, { role: "dialog", "aria-modal": "true", "aria-label": title, className: `absolute bottom-0 inset-x-0 rounded-t-2xl border-t border-zinc-200 dark:border-zinc-800 shadow-2xl ${maxHeight} animate-slide-up${className ? ` ${className}` : ""}`, surface: "default", children: [_jsxs(Row, { border: "subtle", justify: "between", className: "border-b shrink-0", padding: "inline", children: [_jsx(Div, { surface: "skeleton", className: "absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 dark:bg-zinc-600", rounded: "full" }), title && (_jsx(Span, { size: "sm", weight: "semibold", className: "mt-2", color: "primary", children: title })), _jsx(Button, { rounded: "lg", type: "button", onClick: onClose, "aria-label": "Close", className: "ml-auto mt-2 p-1.5 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors min-h-[44px] min-w-[44px] justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx(Div, { className: `flex-1 ${__O.yAuto} overscroll-contain pb-[env(safe-area-inset-bottom)]`, children: children })] })] }));
 }

package/dist/features/layout/Breadcrumbs.js

@@ -15,11 +15,11 @@ import { Li, Nav, Ol, Span } from "../../ui";
  */
 export function Breadcrumbs({ children, separator = "/", className = "", }) {
     const items = React.Children.toArray(children);
-    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 text-sm flex-wrap", children: items.map((item, index) => (_jsxs(Li, { className: "flex items-center gap-2", children: [item, index < items.length - 1 && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400/90 select-none", "aria-hidden": "true", children: separator }))] }, index))) }) }));
+    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 flex-wrap", size: "sm", children: items.map((item, index) => (_jsxs(Li, { layout: "flex-center", gap: "2", children: [item, index < items.length - 1 && (_jsx(Span, { className: "dark:text-zinc-400/90 select-none", color: "muted", "aria-hidden": "true", children: separator }))] }, index))) }) }));
 }
 export function BreadcrumbItem({ href, children, current = false, className = "", }) {
     if (current || !href) {
-        return (_jsx(Span, { "aria-current": current ? "page" : undefined, className: `text-zinc-700 dark:text-zinc-200 ${className}`, children: children }));
+        return (_jsx(Span, { "aria-current": current ? "page" : undefined, className: `${className}`, color: "primary", children: children }));
     }
     return (_jsx(Link, { href: href, className: `text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-colors ${className}`, children: children }));
 }