@mohasinac/appkit 2.4.10 → 2.5.0

package/dist/features/homepage/schemas/firestore.d.ts

@@ -64,8 +64,29 @@ export interface CarouselCard {
 /** @deprecated Use CarouselCard. This alias is kept for backward compatibility. */
 export type GridCard = CarouselCard;
 export type GridCardCreateInput = Omit<CarouselCard, "id">;
+/** A named carousel that holds up to MAX_SLIDES_PER_CAROUSEL slide references. */
+export interface CarouselDocument {
+    id: string;
+    name: string;
+    status: "active" | "draft";
+    /** Ordered slide IDs (max MAX_SLIDES_PER_CAROUSEL). */
+    slideIds: string[];
+    createdAt: Date;
+    updatedAt: Date;
+    createdBy: string;
+}
+export type CarouselCreateInput = Omit<CarouselDocument, "id" | "createdAt" | "updatedAt">;
+export type CarouselUpdateInput = Partial<Pick<CarouselDocument, "name" | "status" | "slideIds">>;
+export declare class TooManySlidesError extends Error {
+    constructor();
+}
 export interface CarouselSlideDocument {
     id: string;
+    /**
+     * Reference to a named CarouselDocument (EX2).
+     * null = default hero carousel (backward-compat with pre-EX2 slides).
+     */
+    carouselId?: string | null;
     title: string;
     order: number;
     active: boolean;
@@ -117,8 +138,11 @@ export interface CarouselSlideDocument {
     createdBy: string;
 }
 export declare const CAROUSEL_SLIDES_COLLECTION: "carouselSlides";
+export declare const CAROUSELS_COLLECTION: "carousels";
 export declare const CAROUSEL_SLIDES_INDEXED_FIELDS: readonly ["active", "order", "createdBy", "createdAt"];
 export declare const MAX_ACTIVE_SLIDES: 5;
+/** Maximum slides per named carousel (EX2). */
+export declare const MAX_SLIDES_PER_CAROUSEL: 5;
 export declare const GRID_CONFIG: {
     readonly rows: 2;
     readonly cols: 3;
@@ -143,6 +167,11 @@ export interface CarouselSectionConfig {
     pauseOnHover?: boolean;
     showDots?: boolean;
     showArrows?: boolean;
+    /**
+     * ID of a named CarouselDocument (EX2).
+     * When absent, the section loads all active slides (pre-EX2 default hero behavior).
+     */
+    carouselId?: string;
 }
 export interface WelcomeSectionConfig {
     h1: string;
@@ -161,11 +190,24 @@ export interface TrustIndicatorsSectionConfig {
         description: string;
     }>;
 }
+export interface SectionCTA {
+    label: string;
+    href: string;
+    variant: "outline" | "filled" | "text";
+}
 export interface CategoriesSectionConfig {
     title: string;
     maxCategories: 4;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Optional CTA button rendered below the scroller. */
+    cta?: SectionCTA;
+    /** Optional client-side filter chips above the scroller. */
+    filters?: {
+        featuredOnly?: boolean;
+        rootOnly?: boolean;
+        rootCategoryId?: string;
+    };
 }
 export interface BrandsSectionConfig {
     title: string;
@@ -173,14 +215,27 @@ export interface BrandsSectionConfig {
     maxBrands: number;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Optional CTA button rendered below the scroller. */
+    cta?: SectionCTA;
+    /** Optional client-side filter chips above the scroller. */
+    filters?: {
+        featuredOnly?: boolean;
+        byCountry?: string;
+    };
 }
+export type SectionPagination = "load-more" | "arrows" | "auto-scroll";
 export interface ProductsSectionConfig {
     title: string;
     subtitle?: string;
-    maxProducts: 18;
-    rows: 2;
-    itemsPerRow: 3;
-    mobileItemsPerRow: 1;
+    maxProducts?: number;
+    /** Number of display rows (1–4). Each row shows itemsPerRow cards. Default: 1. */
+    rows?: number;
+    itemsPerRow?: number;
+    mobileItemsPerRow?: number;
+    /** Maximum total items to show (5–20). Default: rows * 5. */
+    maxItems?: number;
+    /** Pagination mode for multi-row display. */
+    pagination?: SectionPagination;
     autoScroll: boolean;
     scrollInterval: number;
     filterByBrand?: string;
@@ -190,11 +245,26 @@ export interface ProductsSectionConfig {
     loop?: boolean;
 }
 /**
- * Metrics that the homepage stats section can resolve live from Firestore.
- * When a stat has source "live" and a matching metric, the value field is
- * used only as a fallback (shown if the live fetch fails or is still loading).
+ * Preset metrics the homepage stats section resolves live from Firestore.
+ * Each string corresponds to a repository query in live-stats.ts.
+ */
+export type LiveStatPreset = "total_listings" | "verified_sellers" | "total_buyers" | "platform_rating" | "total_orders" | "total_reviews";
+/**
+ * A custom Firestore collection count query used when source is "live-collection".
+ * The collection must be in ALLOWED_LIVE_COLLECTIONS to prevent arbitrary access.
  */
-export type LiveStatMetric = "total_listings" | "verified_sellers" | "total_buyers" | "platform_rating" | "total_orders" | "total_reviews";
+export interface CollectionQueryMetric {
+    type: "collection-query";
+    collection: string;
+    filterField?: string;
+    filterValue?: string | number | boolean;
+    suffix?: string;
+}
+/** @deprecated Alias kept for backward compatibility — use LiveStatPreset. */
+export type LiveStatMetric = LiveStatPreset;
+/** Collections that may be queried via CollectionQueryMetric on the homepage. */
+export declare const ALLOWED_LIVE_COLLECTIONS: readonly ["products", "stores", "users", "reviews", "orders", "events", "bids"];
+export type AllowedLiveCollection = (typeof ALLOWED_LIVE_COLLECTIONS)[number];
 export interface StatsSectionConfig {
     title?: string;
     stats: Array<{
@@ -202,10 +272,16 @@ export interface StatsSectionConfig {
         label: string;
         /** Fallback value shown when source is "static" or when a live fetch fails. */
         value: string;
-        /** "live" resolves the value from Firestore at render time; "static" uses value as-is. */
-        source?: "static" | "live";
-        /** Which Firestore metric to fetch when source is "live". */
-        metric?: LiveStatMetric;
+        /**
+         * "static"      — use value as-is (no Firestore query).
+         * "live" / "live-preset" — query a preset Firestore metric; specify metric.
+         * "live-collection"      — run a custom collection count query; specify collectionQuery.
+         */
+        source?: "static" | "live" | "live-preset" | "live-collection";
+        /** Which preset metric to fetch when source is "live" or "live-preset". */
+        metric?: LiveStatPreset;
+        /** Custom collection query when source is "live-collection". */
+        collectionQuery?: CollectionQueryMetric;
         /** Optional suffix appended after the live value (e.g. "★", "+"). */
         suffix?: string;
     }>;
@@ -248,14 +324,23 @@ export interface FeaturesSectionConfig {
     title: string;
     features: string[];
 }
+export type FAQCategoryKey = "general" | "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support";
 export interface FAQSectionConfig {
     title: string;
     subtitle?: string;
     showOnHomepage: boolean;
     displayCount: number;
-    expandedByDefault: boolean;
+    /** When true, render a tab bar so visitors can filter by category. */
+    showCategoryTabs: boolean;
+    /** Which category tabs to surface (in display order). Empty = all categories that have items. */
+    visibleTabs: FAQCategoryKey[];
+    /** Allow multiple accordions to be open simultaneously. */
+    allowMultipleOpen: boolean;
+    /** Number of items to expand on initial render. 0 = none open. */
+    defaultOpenCount: number;
     linkToFullPage: boolean;
-    categories: Array<"general" | "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support">;
+    /** Which FAQ categories to pull items from for this section. */
+    categories: FAQCategoryKey[];
 }
 export interface BlogArticlesSectionConfig {
     title: string;
@@ -294,28 +379,52 @@ export interface EventsSectionConfig {
     maxCount?: 5 | 10 | 20;
     loop?: boolean;
 }
-export type SocialPlatform = "instagram" | "facebook" | "tiktok" | "deviantart";
+export type SocialPlatform = "instagram" | "facebook" | "tiktok" | "deviantart" | "youtube";
 export type SocialPostType = "all" | "images" | "videos" | "reels";
 export type SocialFeedLayout = "grid" | "masonry" | "carousel";
+/**
+ * A manually configured static social post — used for YouTube videos (no API token needed)
+ * and as a fallback when platform credentials are not configured.
+ * videoId is stored; thumbnail URL is computed at render time from the video ID.
+ * Do NOT store raw YouTube CDN thumbnail URLs in Firestore (they may expire).
+ */
+export interface StaticSocialPost {
+    id: string;
+    platform: SocialPlatform;
+    /** YouTube video ID (e.g. "dQw4w9WgXcQ"). Required when platform is "youtube". */
+    videoId?: string;
+    /** YouTube channel display name shown as a chip. */
+    channelName?: string;
+    caption?: string;
+}
 export interface SocialFeedSectionConfig {
     title: string;
     subtitle?: string;
     platform: SocialPlatform;
-    /** Username, page ID, or handle for the platform account */
-    handle: string;
+    /** Username, page ID, or handle for the platform account. Optional for YouTube (uses static posts). */
+    handle?: string;
     postType: SocialPostType;
     /** Number of posts to display (4–12) */
     count: number;
     layout: SocialFeedLayout;
     showCaption: boolean;
     showStats: boolean;
+    /**
+     * Manually configured static posts (YouTube videos, etc.).
+     * Rendered alongside or instead of platform-fetched posts.
+     */
+    posts?: StaticSocialPost[];
 }
 /** Normalised social post returned by /api/social-feed */
 export interface SocialPost {
     id: string;
     platform: SocialPlatform;
-    imageUrl: string;
+    imageUrl?: string;
     videoThumbnailUrl?: string;
+    /** YouTube video ID — present when platform is "youtube". */
+    videoId?: string;
+    /** YouTube channel display name. */
+    channelName?: string;
     caption?: string;
     permalink: string;
     mediaType: "image" | "video" | "carousel";
@@ -324,7 +433,7 @@ export interface SocialPost {
         views?: number;
         comments?: number;
     };
-    publishedAt: string;
+    publishedAt?: string;
 }
 export interface PreOrdersSectionConfig {
     title: string;
@@ -386,6 +495,53 @@ export interface CustomCardsSectionConfig {
     autoScroll?: boolean;
     scrollIntervalMs?: number;
 }
+export type CollectionCardType = "products" | "auctions" | "pre-orders" | "stores" | "events" | "blog-posts" | "reviews" | "brands" | "categories";
+export interface CollectionCardsEntry {
+    type: CollectionCardType;
+    label?: string;
+    limit?: number;
+    storeId?: string;
+    categorySlug?: string;
+    brandSlug?: string;
+    featuredOnly?: boolean;
+}
+export interface CollectionCardsSectionConfig {
+    title?: string;
+    subtitle?: string;
+    collections: CollectionCardsEntry[];
+    layout?: "carousel" | "grid" | "mixed-row";
+    itemsPerRow?: 3 | 4 | 5;
+    maxItems?: number;
+    showCollectionTabs?: boolean;
+    cta?: SectionCTA;
+}
+export declare const COLLECTION_CARDS_MAX_ENTRIES: 3;
+export interface FeaturedBundlesSectionConfig {
+    title?: string;
+    subtitle?: string;
+    maxItems?: number;
+    storeId?: string;
+    categorySlug?: string;
+    sortBy?: "newest" | "savings-desc" | "price-asc";
+    showSavingsBadge?: boolean;
+}
+export interface PrizeDrawsSectionConfig {
+    title?: string;
+    subtitle?: string;
+    maxItems?: number;
+    storeId?: string;
+    revealStatus?: "pending" | "open" | "all";
+    showCountdown?: boolean;
+    showEntriesRemaining?: boolean;
+}
+export interface EventRafflesSectionConfig {
+    title?: string;
+    subtitle?: string;
+    maxItems?: number;
+    raffleType?: "raffle" | "spin_wheel" | "all";
+    showEntryCount?: boolean;
+    showCountdown?: boolean;
+}
 export interface GoogleReviewsSectionConfig {
     placeId: string;
     maxReviews?: number;
@@ -396,8 +552,8 @@ export interface GoogleReviewsSectionConfig {
     linkToGoogleMaps?: boolean;
     googleMapsUrl?: string;
 }
-export type SectionType = "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";
-export type SectionConfig = CarouselSectionConfig | WelcomeSectionConfig | StatsSectionConfig | TrustIndicatorsSectionConfig | CategoriesSectionConfig | BrandsSectionConfig | ProductsSectionConfig | PreOrdersSectionConfig | AuctionsSectionConfig | BannerSectionConfig | FeaturesSectionConfig | ReviewsSectionConfig | WhatsAppCommunitySectionConfig | FAQSectionConfig | BlogArticlesSectionConfig | NewsletterSectionConfig | StoresSectionConfig | EventsSectionConfig | SocialFeedSectionConfig | CustomCardsSectionConfig | GoogleReviewsSectionConfig;
+export type SectionType = "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";
+export type SectionConfig = CarouselSectionConfig | WelcomeSectionConfig | StatsSectionConfig | TrustIndicatorsSectionConfig | CategoriesSectionConfig | BrandsSectionConfig | ProductsSectionConfig | PreOrdersSectionConfig | AuctionsSectionConfig | BannerSectionConfig | FeaturesSectionConfig | ReviewsSectionConfig | WhatsAppCommunitySectionConfig | FAQSectionConfig | BlogArticlesSectionConfig | NewsletterSectionConfig | StoresSectionConfig | EventsSectionConfig | SocialFeedSectionConfig | CustomCardsSectionConfig | GoogleReviewsSectionConfig | FeaturedBundlesSectionConfig | PrizeDrawsSectionConfig | EventRafflesSectionConfig | CollectionCardsSectionConfig;
 export interface HomepageSectionDocument {
     id: string;
     type: SectionType;

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

@@ -3,7 +3,14 @@
  * Covers: carousel slides, homepage sections
  */
 import { generateCarouselId, generateHomepageSectionId, } from "../../../utils/id-generators";
+export class TooManySlidesError extends Error {
+    constructor() {
+        super(`A carousel may have at most ${MAX_SLIDES_PER_CAROUSEL} slides.`);
+        this.name = "TooManySlidesError";
+    }
+}
 export const CAROUSEL_SLIDES_COLLECTION = "carouselSlides";
+export const CAROUSELS_COLLECTION = "carousels";
 export const CAROUSEL_SLIDES_INDEXED_FIELDS = [
     "active",
     "order",
@@ -11,6 +18,8 @@ export const CAROUSEL_SLIDES_INDEXED_FIELDS = [
     "createdAt",
 ];
 export const MAX_ACTIVE_SLIDES = 5;
+/** Maximum slides per named carousel (EX2). */
+export const MAX_SLIDES_PER_CAROUSEL = 5;
 export const GRID_CONFIG = { rows: 2, cols: 3 };
 export const DEFAULT_CAROUSEL_SLIDE_DATA = {
     active: false,
@@ -47,6 +56,17 @@ export function isValidGridPosition(gridRow, gridCol) {
 export function canActivateSlide(currentActiveCount) {
     return currentActiveCount < MAX_ACTIVE_SLIDES;
 }
+/** Collections that may be queried via CollectionQueryMetric on the homepage. */
+export const ALLOWED_LIVE_COLLECTIONS = [
+    "products",
+    "stores",
+    "users",
+    "reviews",
+    "orders",
+    "events",
+    "bids",
+];
+export const COLLECTION_CARDS_MAX_ENTRIES = 3;
 export const HOMEPAGE_SECTIONS_COLLECTION = "homepageSections";
 export const HOMEPAGE_SECTIONS_INDEXED_FIELDS = [
     "enabled",
@@ -75,6 +95,10 @@ export const DEFAULT_SECTION_ORDER = {
     "social-feed": 12,
     "custom-cards": 13,
     "google-reviews": 14,
+    "featured-bundles": 20,
+    "prize-draws": 21,
+    "event-raffles": 22,
+    "collection-cards": 23,
 };
 export const BANNER_HEIGHTS = {
     sm: "200px",

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

@@ -31,6 +31,8 @@ export interface AppLayoutShellProps {
     user?: BottomNavbarUser | null;
     brandName: string;
     brandShortName?: string;
+    /** Admin-uploaded site logo URL. Falls back to the SVG wordmark when empty. */
+    siteLogoUrl?: string;
     logoHref: string;
     promotionsHref?: string;
     cartHref: string;
@@ -104,4 +106,4 @@ export interface AppLayoutShellProps {
         };
     };
 }
-export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, lightBackground, darkBackground, }: AppLayoutShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, lightBackground, darkBackground, }: AppLayoutShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/AppLayoutShell.js

@@ -37,7 +37,7 @@ function CollapsibleSidebarSection({ section, navItemClass, }) {
     }
     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}`))) }))] }));
 }
-export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, 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, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
+export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, 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, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
     const [queryClient] = useState(() => new QueryClient());
     const [sidebarOpen, setSidebarOpen] = useState(false);
     const [searchOpen, setSearchOpen] = useState(false);
@@ -148,7 +148,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
             opacity: darkBackground.overlay?.opacity ?? 0,
         },
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, 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, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(MainNavbar, { navItems: navItems, hiddenNavItems: hiddenNavItems }), 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 ? (_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 (_jsx(QueryClientProvider, { client: queryClient, 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, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(MainNavbar, { navItems: navItems, hiddenNavItems: hiddenNavItems }), 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 ? (_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
                                                             ? {
                                                                 url: user.avatarMetadata.url,
                                                                 position: user.avatarMetadata.position ?? {

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

@@ -14,6 +14,8 @@ export interface TitleBarLayoutProps {
     searchOpen: boolean;
     brandName: string;
     brandShortName?: string;
+    /** Admin-uploaded site logo URL. Falls back to the SVG wordmark when empty. */
+    siteLogoUrl?: string;
     logoHref: string;
     promotionsHref?: string;
     /** Href for the compare page/drawer. When provided, renders a Compare icon button. */
@@ -49,4 +51,4 @@ export interface TitleBarLayoutProps {
  * Receives all domain data as props — zero domain imports.
  * Domain shell reads useAuth() and SITE_CONFIG and passes values in.
  */
-export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -1,16 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from "next/image";
 import Link from "next/link";
-import { BlockHeader, Button, Div, Row, Span } from "../../ui";
+import { BlockHeader, Button, Div, Row, SiteLogo, Span } from "../../ui";
 /**
  * TitleBarLayout — generic top sticky title-bar shell.
  *
  * Receives all domain data as props — zero domain imports.
  * Domain shell reads useAuth() and SITE_CONFIG and passes values in.
  */
-export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav = false, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav = false, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
     void searchOpen;
-    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800 shadow-sm ${className}`, children: [promoStripText && (_jsx(Div, { className: "bg-gradient-to-r from-primary-700 to-secondary-600 dark:from-primary-700 dark:to-cobalt-700 text-white text-xs py-1 text-center font-medium", children: promoStripText })), _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsxs(Row, { justify: "between", gap: "none", className: "h-14", children: [_jsx(Row, { gap: "3", children: _jsx(Link, { href: logoHref, className: "font-bold text-xl tracking-tight text-zinc-900 dark:text-zinc-50 hover:text-primary dark:hover:text-secondary transition-colors", children: brandShortName ? (_jsxs(_Fragment, { children: [_jsx(Span, { className: "md:hidden", children: brandShortName }), _jsx(Span, { className: "hidden md:inline", children: brandName })] })) : (brandName) }) }), navSlot && _jsx(Div, { className: "hidden md:flex", children: navSlot }), _jsxs(Row, { gap: "xs", children: [promotionsHref && (_jsxs(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "hidden lg:flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-primary-100 text-primary-700 dark:bg-secondary-900/40 dark:text-secondary-400 hover:bg-primary-200 dark:hover:bg-secondary-900/60 transition-colors border border-primary-200/60 dark:border-secondary-700/40", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.37.86.58 1.41.58.55 0 1.05-.21 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z" }) }), "Today's Deals"] })), compareHref && (_jsx(Link, { href: compareHref, "aria-label": "Compare items", className: "hidden lg:flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", onClick: onSearchToggle, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" }) }) }), notificationSlot, devSlot, onToggleTheme && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: onToggleTheme, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: isDark ? (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m8.66-9h-1M4.34 12h-1m15.07-6.07-.71.71M6.34 17.66l-.71.71m12.73 0-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 1 0 0 14A7 7 0 0 0 12 5z" }) })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z" }) })) })), wishlistHref && (_jsxs(Link, { href: wishlistHref, "aria-label": `Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`, className: "relative flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none", children: wishlistCount > 9 ? "9+" : wishlistCount }))] })), cartHref && (_jsxs(Link, { href: cartHref, "aria-label": `Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`, className: "relative flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) }), cartCount > 0 && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none", children: cartCount > 9 ? "9+" : cartCount }))] })), !hideSidebarToggle && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": sidebarOpen ? "Close menu" : "Open menu", "aria-expanded": sidebarOpen, "aria-controls": "secondary-sidebar", onClick: onToggleSidebar, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: sidebarOpen ? (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })) : (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })) }) })), profileHref && (_jsx(Link, { href: profileHref, "aria-label": user
+    void brandShortName;
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800 shadow-sm ${className}`, children: [promoStripText && (_jsx(Div, { className: "bg-gradient-to-r from-primary-700 to-secondary-600 dark:from-primary-700 dark:to-cobalt-700 text-white text-xs py-1 text-center font-medium", children: promoStripText })), _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsxs(Row, { justify: "between", gap: "none", className: "h-14", children: [_jsx(Row, { gap: "3", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteLogo, { title: brandName, src: siteLogoUrl, className: "h-7 md:h-9 lg:h-10" }) }) }), navSlot && _jsx(Div, { className: "hidden md:flex", children: navSlot }), _jsxs(Row, { gap: "xs", children: [promotionsHref && (_jsxs(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "hidden lg:flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-primary-100 text-primary-700 dark:bg-secondary-900/40 dark:text-secondary-400 hover:bg-primary-200 dark:hover:bg-secondary-900/60 transition-colors border border-primary-200/60 dark:border-secondary-700/40", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.37.86.58 1.41.58.55 0 1.05-.21 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z" }) }), "Today's Deals"] })), compareHref && (_jsx(Link, { href: compareHref, "aria-label": "Compare items", className: "hidden lg:flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", onClick: onSearchToggle, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" }) }) }), notificationSlot, devSlot, onToggleTheme && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: onToggleTheme, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: isDark ? (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m8.66-9h-1M4.34 12h-1m15.07-6.07-.71.71M6.34 17.66l-.71.71m12.73 0-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 1 0 0 14A7 7 0 0 0 12 5z" }) })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z" }) })) })), wishlistHref && (_jsxs(Link, { href: wishlistHref, "aria-label": `Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`, className: "relative flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none", children: wishlistCount > 9 ? "9+" : wishlistCount }))] })), cartHref && (_jsxs(Link, { href: cartHref, "aria-label": `Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`, className: "relative flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) }), cartCount > 0 && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none", children: cartCount > 9 ? "9+" : cartCount }))] })), !hideSidebarToggle && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": sidebarOpen ? "Close menu" : "Open menu", "aria-expanded": sidebarOpen, "aria-controls": "secondary-sidebar", onClick: onToggleSidebar, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: sidebarOpen ? (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })) : (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })) }) })), profileHref && (_jsx(Link, { href: profileHref, "aria-label": user
                                         ? `Profile — ${user.displayName ?? user.email}`
                                         : "Sign in", className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 transition-colors", children: user?.photoURL ? (_jsx(Image, { src: user.photoURL, alt: user.displayName ?? "Profile", width: 28, height: 28, className: "w-7 h-7 rounded-full object-cover" })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) })) }))] })] }) })] }));
 }

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

@@ -27,7 +27,7 @@ export type { ListingLayoutProps, ListingLayoutLabels } from "./ListingLayout";
 export { LayoutClient } from "./LayoutClient";
 export type { LayoutClientProps, LayoutProvider } from "./LayoutClient";
 export { AppLayoutShell } from "./AppLayoutShell";
-export type { AppLayoutShellProps } from "./AppLayoutShell";
+export type { AppLayoutShellProps, AppLayoutShellSidebarLink, AppLayoutShellSidebarSection } from "./AppLayoutShell";
 export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActionsContext";
 export type { BottomAction, BottomBulkConfig, BottomActionsState, } from "./BottomActionsContext";
 export { useBottomActions } from "./hooks/useBottomActions";

package/dist/features/media/MediaPickerModal.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { Modal } from "../../ui/components/Modal";
-import { Button, Input, Label, Row, Stack, Text, Alert } from "../../ui";
+import { Button, Div, Input, Label, Row, Stack, Text, Alert } from "../../ui";
 import { MediaUploadField } from "./upload/MediaUploadField";
 import { useMediaUpload, useMediaCleanup } from "./index";
+const MEDIA_LIST_ENDPOINT = "/api/admin/media";
+const EXISTING_GRID_MAX_HEIGHT = "max-h-96";
 /**
  * MediaPickerModal — pick or upload a media file for use in a form field.
  *
@@ -26,6 +28,49 @@ export function MediaPickerModal({ isOpen, onClose, onSelect, accept = "image/*"
     const [uploadedUrl, setUploadedUrl] = useState("");
     const [externalUrl, setExternalUrl] = useState("");
     const [urlError, setUrlError] = useState("");
+    const [existingFiles, setExistingFiles] = useState([]);
+    const [existingLoading, setExistingLoading] = useState(false);
+    const [existingError, setExistingError] = useState(null);
+    const [existingSearch, setExistingSearch] = useState("");
+    const [selectedExisting, setSelectedExisting] = useState("");
+    const [existingPrefix, setExistingPrefix] = useState(() => uploadPath && uploadPath !== "media" ? `${uploadPath}/` : "");
+    React.useEffect(() => {
+        if (tab !== "existing" || !isOpen)
+            return;
+        let cancelled = false;
+        setExistingLoading(true);
+        setExistingError(null);
+        const params = new URLSearchParams();
+        if (existingPrefix)
+            params.set("prefix", existingPrefix);
+        fetch(`${MEDIA_LIST_ENDPOINT}?${params.toString()}`, { credentials: "include" })
+            .then((r) => {
+            if (!r.ok)
+                throw new Error("Failed to list media");
+            return r.json();
+        })
+            .then((data) => {
+            if (!cancelled)
+                setExistingFiles(data.data.files);
+        })
+            .catch((err) => {
+            if (!cancelled)
+                setExistingError(err instanceof Error ? err.message : "Failed to load");
+        })
+            .finally(() => {
+            if (!cancelled)
+                setExistingLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [tab, isOpen, existingPrefix]);
+    const filteredExisting = React.useMemo(() => {
+        const q = existingSearch.trim().toLowerCase();
+        if (!q)
+            return existingFiles;
+        return existingFiles.filter((f) => f.name.toLowerCase().includes(q));
+    }, [existingFiles, existingSearch]);
     const { upload } = useMediaUpload();
     const { cleanup } = useMediaCleanup();
     const handleUpload = useCallback((file) => upload(file, uploadPath, true), [upload, uploadPath]);
@@ -36,6 +81,12 @@ export function MediaPickerModal({ isOpen, onClose, onSelect, accept = "image/*"
         onSelect(uploadedUrl);
         resetAndClose();
     }
+    function handleUseExisting() {
+        if (!selectedExisting)
+            return;
+        onSelect(selectedExisting);
+        resetAndClose();
+    }
     function handleUseExternal() {
         const trimmed = externalUrl.trim();
         if (!trimmed) {
@@ -56,6 +107,8 @@ export function MediaPickerModal({ isOpen, onClose, onSelect, accept = "image/*"
         setUploadedUrl("");
         setExternalUrl("");
         setUrlError("");
+        setSelectedExisting("");
+        setExistingSearch("");
         setTab("upload");
         onClose();
     }
@@ -65,7 +118,18 @@ export function MediaPickerModal({ isOpen, onClose, onSelect, accept = "image/*"
     ]
         .filter(Boolean)
         .join(" ");
-    return (_jsx(Modal, { isOpen: isOpen, onClose: resetAndClose, title: title, size: "lg", actions: _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: resetAndClose, children: "Cancel" }), tab === "upload" ? (_jsx(Button, { variant: "primary", onClick: handleUseUpload, disabled: !uploadedUrl, children: "Use this file" })) : (_jsx(Button, { variant: "primary", onClick: handleUseExternal, disabled: !externalUrl.trim(), children: "Use this URL" }))] }), children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "none", className: "appkit-media-picker__tabs", children: [_jsx("button", { type: "button", className: tabBtnClass(tab === "upload"), onClick: () => setTab("upload"), children: "Upload file" }), _jsx("button", { type: "button", className: tabBtnClass(tab === "url"), onClick: () => setTab("url"), children: "External URL" })] }), tab === "upload" && (_jsx(MediaUploadField, { label: "File", value: uploadedUrl, onChange: setUploadedUrl, onUpload: handleUpload, accept: accept, maxSizeMB: maxSizeMB, onAbort: handleAbort })), tab === "url" && (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { htmlFor: "media-picker-url", children: "Image or video URL" }), _jsx(Input, { id: "media-picker-url", value: externalUrl, onChange: (e) => {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: resetAndClose, title: title, size: "lg", actions: _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: resetAndClose, children: "Cancel" }), tab === "upload" && (_jsx(Button, { variant: "primary", onClick: handleUseUpload, disabled: !uploadedUrl, children: "Use this file" })), tab === "existing" && (_jsx(Button, { variant: "primary", onClick: handleUseExisting, disabled: !selectedExisting, children: "Use selected" })), tab === "url" && (_jsx(Button, { variant: "primary", onClick: handleUseExternal, disabled: !externalUrl.trim(), children: "Use this URL" }))] }), children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "none", className: "appkit-media-picker__tabs", children: [_jsx("button", { type: "button", className: tabBtnClass(tab === "upload"), onClick: () => setTab("upload"), children: "Upload file" }), _jsx("button", { type: "button", className: tabBtnClass(tab === "existing"), onClick: () => setTab("existing"), children: "Existing" }), _jsx("button", { type: "button", className: tabBtnClass(tab === "url"), onClick: () => setTab("url"), children: "External URL" })] }), tab === "existing" && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", children: [_jsx(Input, { placeholder: `Filter "${existingPrefix || "all"}"…`, value: existingSearch, onChange: (e) => setExistingSearch(e.target.value) }), _jsx(Input, { placeholder: "Prefix (e.g. products/)", value: existingPrefix, onChange: (e) => setExistingPrefix(e.target.value) })] }), existingError && _jsx(Alert, { variant: "error", children: existingError }), _jsxs(Div, { className: `grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 ${EXISTING_GRID_MAX_HEIGHT} overflow-y-auto`, children: [filteredExisting.map((f) => {
+                                    const isImage = (f.contentType ?? "").startsWith("image/");
+                                    const isSelected = selectedExisting === f.downloadURL;
+                                    return (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setSelectedExisting(f.downloadURL), className: [
+                                            "rounded-lg border overflow-hidden text-left transition p-0 h-auto",
+                                            isSelected
+                                                ? "border-primary-500 ring-2 ring-primary-300"
+                                                : "border-zinc-200 dark:border-slate-700",
+                                        ].join(" "), "aria-pressed": isSelected, children: [_jsx(Div, { className: "aspect-square flex items-center justify-center bg-zinc-100 dark:bg-slate-800 w-full", children: isImage ? (
+                                                // eslint-disable-next-line @next/next/no-img-element
+                                                _jsx("img", { src: f.downloadURL, alt: f.name, className: "h-full w-full object-cover", loading: "lazy" })) : (_jsx(Text, { size: "sm", color: "muted", children: f.contentType ?? "file" })) }), _jsx(Text, { className: "block truncate p-1.5 text-xs font-mono", children: f.name.split("/").pop() })] }, f.name));
+                                }), existingLoading && (_jsx(Text, { className: "col-span-full py-6 text-center", color: "muted", children: "Loading\u2026" })), !existingLoading && filteredExisting.length === 0 && (_jsx(Text, { className: "col-span-full py-6 text-center", color: "muted", children: "No files match." }))] })] })), tab === "upload" && (_jsx(MediaUploadField, { label: "File", value: uploadedUrl, onChange: setUploadedUrl, onUpload: handleUpload, accept: accept, maxSizeMB: maxSizeMB, onAbort: handleAbort })), tab === "url" && (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { htmlFor: "media-picker-url", children: "Image or video URL" }), _jsx(Input, { id: "media-picker-url", value: externalUrl, onChange: (e) => {
                                 setExternalUrl(e.target.value);
                                 setUrlError("");
                             }, placeholder: "https://example.com/image.jpg" }), urlError && _jsx(Alert, { variant: "error", children: urlError }), _jsx(Text, { size: "sm", color: "muted", children: "External URLs are stored as-is and are not watermarked." })] }))] }) }));

package/dist/features/media/types/index.d.ts

@@ -21,15 +21,15 @@ export declare const mediaFieldSchema: z.ZodObject<{
     source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
     youtubeId: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    url: string;
     type: "video" | "image" | "file";
+    url: string;
     source?: "external" | "upload" | "youtube" | undefined;
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
     youtubeId?: string | undefined;
 }, {
-    url: string;
     type: "video" | "image" | "file";
+    url: string;
     source?: "external" | "upload" | "youtube" | undefined;
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;