@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -33,7 +33,7 @@ export interface FAQDocument {
     updatedAt: Date;
 }
 export declare const FAQS_COLLECTION: "faqs";
-export declare const FAQS_INDEXED_FIELDS: readonly ["seo.slug", "category", "order", "showOnHomepage", "showInFooter", "isPinned", "priority", "tags", "searchTokens", "isActive", "stats.helpful", "createdBy", "createdAt"];
+export declare const FAQS_INDEXED_FIELDS: readonly ["slug", "seo.slug", "category", "order", "showOnHomepage", "showInFooter", "isPinned", "priority", "tags", "searchTokens", "isActive", "stats.helpful", "createdBy", "createdAt"];
 export declare const FAQ_CATEGORY_LABELS: Record<FAQCategory, string>;
 export declare const DEFAULT_FAQ_DATA: Partial<FAQDocument>;
 export declare const FAQS_PUBLIC_FIELDS: readonly ["id", "question", "answer", "category", "showOnHomepage", "showInFooter", "isPinned", "order", "priority", "tags", "relatedFAQs", "stats.views", "stats.helpful", "stats.notHelpful", "seo.slug", "seo.metaTitle", "seo.metaDescription", "isActive", "createdAt"];
@@ -45,7 +45,7 @@ export interface FAQWithInterpolatedAnswer extends Omit<FAQDocument, "answer"> {
     };
 }
 export declare const faqQueryHelpers: {
-    readonly bySlug: (slug: string) => readonly ["seo.slug", "==", string];
+    readonly bySlug: (slug: string) => readonly ["slug", "==", string];
     readonly byCategory: (category: FAQCategory) => readonly ["category", "==", FAQCategory];
     readonly homepage: () => readonly ["showOnHomepage", "==", true];
     readonly footer: () => readonly ["showInFooter", "==", true];

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

@@ -4,6 +4,7 @@
 import { generateFAQId } from "../../../utils/id-generators";
 export const FAQS_COLLECTION = "faqs";
 export const FAQS_INDEXED_FIELDS = [
+    "slug",
     "seo.slug",
     "category",
     "order",
@@ -63,7 +64,7 @@ export const FAQS_PUBLIC_FIELDS = [
     "createdAt",
 ];
 export const faqQueryHelpers = {
-    bySlug: (slug) => ["seo.slug", "==", slug],
+    bySlug: (slug) => ["slug", "==", slug],
     byCategory: (category) => ["category", "==", category],
     homepage: () => ["showOnHomepage", "==", true],
     footer: () => ["showInFooter", "==", true],

package/dist/features/faq/schemas/index.d.ts

@@ -103,9 +103,9 @@ export declare const faqSchema: z.ZodObject<{
     seo?: {
         slug?: string | undefined;
     } | undefined;
+    isPinned?: boolean | undefined;
     showOnHomepage?: boolean | undefined;
     showInFooter?: boolean | undefined;
-    isPinned?: boolean | undefined;
     relatedFAQs?: string[] | undefined;
 }, {
     id: string;
@@ -129,9 +129,9 @@ export declare const faqSchema: z.ZodObject<{
     seo?: {
         slug?: string | undefined;
     } | undefined;
+    isPinned?: boolean | undefined;
     showOnHomepage?: boolean | undefined;
     showInFooter?: boolean | undefined;
-    isPinned?: boolean | undefined;
     relatedFAQs?: string[] | undefined;
 }>;
 /** Base schema for list-query parameters. */
@@ -143,14 +143,14 @@ export declare const faqListParamsSchema: z.ZodObject<{
     perPage: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     q?: string | undefined;
-    page?: number | undefined;
     category?: "general" | "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | undefined;
+    page?: number | undefined;
     perPage?: number | undefined;
     homepage?: boolean | undefined;
 }, {
     q?: string | undefined;
-    page?: number | undefined;
     category?: "general" | "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | undefined;
+    page?: number | undefined;
     perPage?: number | undefined;
     homepage?: boolean | undefined;
 }>;

package/dist/features/filters/FilterFacetSection.d.ts

@@ -19,5 +19,6 @@ export interface FilterFacetSectionProps {
 /**
  * FilterFacetSection — collapsible checkbox/radio filter section.
  * Supports single-select and multi-select modes.
+ * When searchable, the search input is always visible and typing auto-expands.
  */
 export declare function FilterFacetSection({ title, options, selected, onChange, selectionMode, defaultCollapsed, searchable, isOpen: controlledOpen, onToggle, onClear, className, }: FilterFacetSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/filters/FilterFacetSection.js

@@ -6,6 +6,7 @@ import { cn } from "./filterUtils";
 /**
  * FilterFacetSection — collapsible checkbox/radio filter section.
  * Supports single-select and multi-select modes.
+ * When searchable, the search input is always visible and typing auto-expands.
  */
 export function FilterFacetSection({ title, options, selected, onChange, selectionMode = "multi", defaultCollapsed = true, searchable = false, isOpen: controlledOpen, onToggle, onClear, className = "", }) {
     const isControlled = controlledOpen !== undefined;
@@ -18,6 +19,13 @@ export function FilterFacetSection({ title, options, selected, onChange, selecti
         else
             setInternalCollapsed((c) => !c);
     };
+    // When typing in the search box, auto-expand options
+    function handleSearch(value) {
+        setSearch(value);
+        if (value && internalCollapsed && !isControlled) {
+            setInternalCollapsed(false);
+        }
+    }
     const filtered = search
         ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
         : options;
@@ -32,7 +40,11 @@ export function FilterFacetSection({ title, options, selected, onChange, selecti
         }
     };
     const hasValue = selected.length > 0;
-    return (_jsxs(Div, { className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: handleToggle, variant: "ghost", size: "sm", className: "flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { className: "inline-flex items-center justify-center w-5 h-5 text-xs rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 ring-1 ring-emerald-600/20 dark:ring-emerald-400/20", children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: "inline-flex items-center justify-center w-5 h-5 p-0 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-zinc-100 dark:hover:bg-slate-700 transition-colors rounded-full", "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Div, { className: "mt-3 space-y-1", children: [searchable && options.length > 8 && (_jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 mb-2" })), filtered.map((option) => {
+    // Selected labels for inline chips (shown when collapsed)
+    const selectedLabels = selected
+        .map((v) => options.find((o) => o.value === v)?.label ?? v)
+        .slice(0, 3);
+    return (_jsxs(Div, { className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: handleToggle, variant: "ghost", size: "sm", className: "flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { className: "inline-flex items-center justify-center w-5 h-5 text-xs rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 ring-1 ring-emerald-600/20 dark:ring-emerald-400/20", children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: "inline-flex items-center justify-center w-5 h-5 p-0 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-zinc-100 dark:hover:bg-slate-700 transition-colors rounded-full", "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), isCollapsed && hasValue && (_jsxs(Div, { className: "mt-2 flex flex-wrap gap-1", children: [selectedLabels.map((label) => (_jsx(Span, { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-zinc-100 dark:bg-slate-700 text-zinc-700 dark:text-zinc-300 border border-zinc-200 dark:border-slate-600", children: label }, label))), selected.length > 3 && (_jsxs(Span, { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs text-zinc-400 dark:text-zinc-500", children: ["+", selected.length - 3, " more"] }))] })), searchable && (_jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20" }) })), !isCollapsed && (_jsxs(Div, { className: "mt-3 space-y-1", children: [filtered.map((option) => {
                         const isSelected = selected.includes(option.value);
                         return (_jsxs(Row, { gap: "2.5", className: "py-1 cursor-pointer group", children: [selectionMode === "single" ? (_jsx("input", { type: "radio", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: cn("flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer", "w-4 h-4 rounded-full text-primary-600 dark:text-secondary-500", "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30") })) : (_jsx("input", { type: "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: cn("flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer", "w-4 h-4 rounded text-primary-600 dark:text-secondary-500 checked:bg-primary-600 dark:checked:bg-secondary-500", "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30") })), _jsx(Span, { className: "flex-1 text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors truncate", children: option.label }), option.count !== undefined && (_jsx(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500 tabular-nums flex-shrink-0", children: option.count }))] }, option.value));
                     }), filtered.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500 py-1", children: "No results" }))] }))] }));

package/dist/features/filters/SwitchFilter.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Div, Row, Span, Text } from "../../ui";
 import { cn } from "./filterUtils";
-export function SwitchFilter({ title, label, checked, onChange, defaultCollapsed = true, className = "", isOpen: controlledOpen, onToggle, onClear, }) {
+export function SwitchFilter({ title, label, checked, onChange, defaultCollapsed = false, className = "", isOpen: controlledOpen, onToggle, onClear, }) {
     const isControlled = controlledOpen !== undefined;
     const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
     const isCollapsed = isControlled ? !controlledOpen : internalCollapsed;

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

@@ -0,0 +1,32 @@
+/**
+ * Grouped Listings Firestore Document Types & Constants
+ *
+ * A grouped listing bundles multiple products together, optionally at a
+ * discounted bundle price. Standard products and pre-orders only — auctions
+ * are excluded per GP1 spec. Displayed as a horizontal scroller of circular
+ * thumbnail cards between the buy-box and the TABS row on the detail page.
+ *
+ * Used in Session 86 (GP1–GP2).
+ */
+export interface GroupedListingDocument {
+    id: string;
+    slug: string;
+    title: string;
+    description?: string;
+    productIds: string[];
+    coverImage?: string;
+    bundlePrice?: number;
+    originalPrice?: number;
+    discountPercent?: number;
+    currency: "INR";
+    isActive: boolean;
+    isFeatured: boolean;
+    storeId?: string;
+    brandSlug?: string;
+    categorySlug?: string;
+    createdBy: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export declare const GROUPED_LISTINGS_COLLECTION: "groupedListings";
+export declare const GROUPED_LISTINGS_INDEXED_FIELDS: readonly ["storeId", "brandSlug", "categorySlug", "isActive", "isFeatured", "createdAt"];

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

@@ -0,0 +1,19 @@
+/**
+ * Grouped Listings Firestore Document Types & Constants
+ *
+ * A grouped listing bundles multiple products together, optionally at a
+ * discounted bundle price. Standard products and pre-orders only — auctions
+ * are excluded per GP1 spec. Displayed as a horizontal scroller of circular
+ * thumbnail cards between the buy-box and the TABS row on the detail page.
+ *
+ * Used in Session 86 (GP1–GP2).
+ */
+export const GROUPED_LISTINGS_COLLECTION = "groupedListings";
+export const GROUPED_LISTINGS_INDEXED_FIELDS = [
+    "storeId",
+    "brandSlug",
+    "categorySlug",
+    "isActive",
+    "isFeatured",
+    "createdAt",
+];

package/dist/features/homepage/components/AdSlot.d.ts

@@ -17,9 +17,7 @@ export interface AdSlotProps {
  * - The slot id is not registered
  * - `enabled: false` in config
  * - `requiresConsent: true` and consent has not been granted
- *
- * When `reservedHeight` is set in the config, the container always reserves
- * that height to prevent CLS — even before the ad loads.
+ * - No active ad exists for the slot (for manual provider without manualContent)
  *
  * @example
  * <AdSlot id="homepage-hero-banner" />

package/dist/features/homepage/components/AdSlot.js

@@ -1,7 +1,8 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { getAdSlot, isAdSlotRenderable } from "../ad-registry";
+import { useActiveAd } from "../hooks/useActiveAd";
 // ---------------------------------------------------------------------------
 // Sub-renderers
 // ---------------------------------------------------------------------------
@@ -26,6 +27,12 @@ function ThirdPartyAd({ config }) {
     }
     return null;
 }
+function ManualAdBanner({ ad }) {
+    const { creative } = ad;
+    if (!creative)
+        return null;
+    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs("div", { className: "flex-1 min-w-0", children: [creative.title ? (_jsx("p", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate", children: creative.title })) : null, creative.body ? (_jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: creative.body })) : null] }), creative.ctaLabel ? (_jsx("span", { className: "flex-shrink-0 rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-white", children: creative.ctaLabel })) : null] }));
+}
 // ---------------------------------------------------------------------------
 // Primary component
 // ---------------------------------------------------------------------------
@@ -36,9 +43,7 @@ function ThirdPartyAd({ config }) {
  * - The slot id is not registered
  * - `enabled: false` in config
  * - `requiresConsent: true` and consent has not been granted
- *
- * When `reservedHeight` is set in the config, the container always reserves
- * that height to prevent CLS — even before the ad loads.
+ * - No active ad exists for the slot (for manual provider without manualContent)
  *
  * @example
  * <AdSlot id="homepage-hero-banner" />
@@ -46,6 +51,7 @@ function ThirdPartyAd({ config }) {
  */
 export function AdSlot({ id, manualContent, className = "" }) {
     const [hydrated, setHydrated] = useState(false);
+    const { ad: activeAd } = useActiveAd(id);
     useEffect(() => {
         setHydrated(true);
     }, []);
@@ -54,19 +60,14 @@ export function AdSlot({ id, manualContent, className = "" }) {
     }
     const config = getAdSlot(id);
     const renderable = isAdSlotRenderable(id);
-    const reservedStyle = config?.reservedHeight
-        ? { minHeight: config.reservedHeight }
-        : undefined;
     if (!config || !renderable) {
-        // Preserve reserved space even when ad is not shown (avoids layout jumps
-        // when ads are re-enabled after consent grant in the same session).
-        if (config?.reservedHeight && config?.enabled !== false) {
-            return (_jsx("div", { className: className, style: reservedStyle, "aria-hidden": "true", "data-ad-slot-id": id, "data-ad-slot-state": "awaiting-consent" }));
-        }
         return null;
     }
-    const content = renderProvider(config.provider, config, manualContent);
-    return (_jsx("div", { className: className, style: reservedStyle, "data-ad-slot-id": id, "aria-label": "Advertisement", children: content }));
+    const resolvedManualContent = manualContent ?? (activeAd ? _jsx(ManualAdBanner, { ad: activeAd }) : null);
+    const content = renderProvider(config.provider, config, resolvedManualContent);
+    if (!content)
+        return null;
+    return (_jsx("div", { className: className, "data-ad-slot-id": id, "aria-label": "Advertisement", children: content }));
 }
 // ---------------------------------------------------------------------------
 // Provider dispatch

package/dist/features/homepage/components/BlogArticlesSection.d.ts

@@ -1,8 +1,10 @@
+import type { BlogPost } from "../../blog/types";
 export interface BlogArticlesSectionProps {
     title?: string;
     description?: string;
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    initialItems?: BlogPost[];
 }
-export declare function BlogArticlesSection({ title, description, viewMoreHref, viewMoreLabel, className, }: BlogArticlesSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlogArticlesSection({ title, description, viewMoreHref, viewMoreLabel, className, initialItems, }: BlogArticlesSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/BlogArticlesSection.js

@@ -5,8 +5,8 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useBlogArticles } from "../hooks/useBlogArticles";
 import { BlogFeaturedCard } from "../../blog/components/BlogFeaturedCard";
 import { ROUTES } from "../../../next";
-export function BlogArticlesSection({ title = "From Our Blog", description, viewMoreHref, viewMoreLabel = "View all posts →", className = "", }) {
-    const { data, isLoading } = useBlogArticles();
+export function BlogArticlesSection({ title = "From Our Blog", description, viewMoreHref, viewMoreLabel = "View all posts →", className = "", initialItems, }) {
+    const { data, isLoading } = useBlogArticles({ initialPosts: initialItems });
     const items = data?.posts ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 16, keyExtractor: (post) => post.id, renderItem: (post) => (_jsx(BlogFeaturedCard, { post: post, href: ROUTES.BLOG.ARTICLE(post.slug) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "From Our Blog", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (post) => post.id, renderItem: (post) => (_jsx(BlogFeaturedCard, { post: post, href: ROUTES.BLOG.ARTICLE(post.slug) })), className: className }));
 }

package/dist/features/homepage/components/BrandsSection.d.ts

@@ -1,3 +1,4 @@
+import type { CategoryItem } from "../../categories/types";
 export interface BrandsSectionProps {
     title?: string;
     subtitle?: string;
@@ -5,5 +6,6 @@ export interface BrandsSectionProps {
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    initialItems?: CategoryItem[];
 }
-export declare function BrandsSection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, }: BrandsSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BrandsSection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, initialItems, }: BrandsSectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/BrandsSection.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
 import Link from "next/link";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Heading, HorizontalScroller, Section, Text } from "../../../ui";
@@ -9,11 +10,11 @@ function BrandLogo({ brand }) {
     const iconSrc = brand.display?.icon;
     const coverImage = brand.display?.coverImage;
     const initial = brand.name[0]?.toUpperCase() ?? "?";
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900", children: [iconSrc || coverImage ? (_jsx("img", { src: iconSrc ?? coverImage, alt: brand.name, className: "h-10 w-10 rounded object-contain" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900", children: [iconSrc || coverImage ? (_jsx(Image, { src: iconSrc ?? coverImage, alt: brand.name, width: 40, height: 40, className: "h-10 w-10 rounded object-contain" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
 }
-export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", }) {
+export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, }) {
     const { themed } = THEME_CONSTANTS;
-    const { data: brands = [], isLoading } = useTopBrands(limit);
+    const { data: brands = [], isLoading } = useTopBrands(limit, { initialData: initialItems });
     if (!isLoading && brands.length === 0)
         return null;
     return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:underline", children: viewMoreLabel }))] }), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-24 w-28 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false }))] }) }));

package/dist/features/homepage/components/CustomCardsSection.d.ts

@@ -0,0 +1,3 @@
+import type { CustomCardsSectionConfig } from "../schemas";
+export type CustomCardsSectionProps = CustomCardsSectionConfig;
+export declare function CustomCardsSection(config: CustomCardsSectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/CustomCardsSection.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, HorizontalScroller, Section } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { MediaImage } from "../../media/MediaImage";
+// --- Helpers -----------------------------------------------------------------
+const COLS_CLASS = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+const RADIUS_CLASS = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    full: "rounded-full",
+};
+const SHADOW_CLASS = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+};
+const VARIANT_CLASS = {
+    primary: "inline-flex items-center justify-center px-4 py-2 rounded-md bg-[var(--appkit-color-primary)] text-white text-sm font-medium hover:opacity-90 transition-opacity",
+    secondary: "inline-flex items-center justify-center px-4 py-2 rounded-md bg-[var(--appkit-color-secondary)] text-white text-sm font-medium hover:opacity-90 transition-opacity",
+    outline: "inline-flex items-center justify-center px-4 py-2 rounded-md border border-current text-sm font-medium hover:bg-black/5 transition-colors",
+    ghost: "inline-flex items-center justify-center px-4 py-2 text-sm font-medium hover:underline transition-colors",
+};
+// --- Card Item ---------------------------------------------------------------
+function CardItem({ card }) {
+    const radiusClass = RADIUS_CLASS[card.borderRadius ?? "lg"] ?? "rounded-lg";
+    const shadowClass = SHADOW_CLASS[card.shadowLevel ?? "sm"] ?? "shadow-sm";
+    const cardStyle = {};
+    if (card.backgroundColor)
+        cardStyle.backgroundColor = card.backgroundColor;
+    if (card.textColor)
+        cardStyle.color = card.textColor;
+    return (_jsxs("div", { className: `flex flex-col overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, style: cardStyle, children: [card.image && (_jsx("div", { className: "relative w-full aspect-video overflow-hidden", children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs("div", { className: "flex flex-col gap-2 p-4 flex-1", children: [card.eyebrow && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest opacity-70", children: card.eyebrow })), card.title && (_jsx("p", { className: "text-base font-bold leading-snug", children: card.title })), card.body && (_jsx("p", { className: "text-sm opacity-80 leading-relaxed flex-1", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
+}
+// --- Section Header ----------------------------------------------------------
+function SectionHeader({ title }) {
+    const { themed } = THEME_CONSTANTS;
+    if (!title)
+        return null;
+    return (_jsx("div", { className: "mb-6", children: _jsx(Heading, { level: 2, className: themed.textPrimary, children: title }) }));
+}
+export function CustomCardsSection(config) {
+    const { title, layout, columns = 3, cards, autoScroll, scrollIntervalMs } = config;
+    const { themed } = THEME_CONSTANTS;
+    if (!cards?.length)
+        return null;
+    // autoScroll: wrap all cards in SectionCarousel (client carousel)
+    if (autoScroll) {
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto px-4", children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, perView: { base: 1, sm: 2, md: columns } }) }) }));
+    }
+    // Row layout: horizontal scroller
+    if (layout === "row") {
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, children: cards.map((card) => (_jsx("div", { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+    }
+    // Masonry layout: CSS columns
+    if (layout === "masonry") {
+        const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
+        const masonryClass = colsClass
+            .split(" ")
+            .map((c) => c.replace("grid-cols-", "columns-"))
+            .join(" ");
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `${masonryClass} gap-4 space-y-4`, children: cards.map((card) => (_jsx("div", { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+    }
+    // Grid layout (default)
+    const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `grid ${colsClass} gap-4`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
+}

package/dist/features/homepage/components/EventsSection.d.ts

@@ -1,3 +1,4 @@
+import type { EventItem } from "../../events/types";
 export interface EventsSectionProps {
     title?: string;
     description?: string;
@@ -5,5 +6,6 @@ export interface EventsSectionProps {
     viewMoreLabel?: string;
     limit?: number;
     className?: string;
+    initialItems?: EventItem[];
 }
-export declare function EventsSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, }: EventsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventsSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, initialItems, }: EventsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/EventsSection.js

@@ -4,7 +4,7 @@ import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useHomepageEvents } from "../hooks/useHomepageEvents";
 import { EventCard } from "../../events/components/EventCard";
-export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", }) {
-    const { data: items = [], isLoading } = useHomepageEvents(limit);
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: THEME_CONSTANTS.carousel.perView.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
+export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", initialItems, }) {
+    const { data: items = [], isLoading } = useHomepageEvents(limit, { initialData: initialItems });
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Events & Offers", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: THEME_CONSTANTS.carousel.perView.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
 }

package/dist/features/homepage/components/FeaturedAuctionsSection.d.ts

@@ -1,8 +1,11 @@
+import type { ProductItem } from "../../products/types";
 export interface FeaturedAuctionsSectionProps {
     title?: string;
     description?: string;
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    filterByBrand?: string;
+    initialItems?: ProductItem[];
 }
-export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedAuctionsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, }: FeaturedAuctionsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedAuctionsSection.js

@@ -4,7 +4,7 @@ import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedAuctions } from "../hooks/useFeaturedAuctions";
 import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
-export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", }) {
-    const { data: items = [], isLoading } = useFeaturedAuctions();
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.compact, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
+export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", filterByBrand, initialItems, }) {
+    const { data: items = [], isLoading } = useFeaturedAuctions({ filterByBrand, initialData: initialItems });
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Live Auctions", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
 }

package/dist/features/homepage/components/FeaturedPreOrdersSection.d.ts

@@ -1,8 +1,11 @@
+import type { ProductItem } from "../../products/types";
 export interface FeaturedPreOrdersSectionProps {
     title?: string;
     description?: string;
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    filterByBrand?: string;
+    initialItems?: ProductItem[];
 }
-export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedPreOrdersSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, }: FeaturedPreOrdersSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedPreOrdersSection.js

@@ -4,7 +4,7 @@ import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedPreOrders } from "../hooks/useFeaturedPreOrders";
 import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
-export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", }) {
-    const { data: items = [], isLoading } = useFeaturedPreOrders();
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.compact, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
+export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", filterByBrand, initialItems, }) {
+    const { data: items = [], isLoading } = useFeaturedPreOrders({ filterByBrand, initialData: initialItems });
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Pre-Order Incoming", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
 }

package/dist/features/homepage/components/FeaturedProductsSection.d.ts

@@ -1,8 +1,11 @@
+import type { ProductItem } from "../../products/types";
 export interface FeaturedProductsSectionProps {
     title?: string;
     description?: string;
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    filterByBrand?: string;
+    initialItems?: ProductItem[];
 }
-export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedProductsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, }: FeaturedProductsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedProductsSection.js

@@ -4,8 +4,13 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedProducts } from "../hooks/useFeaturedProducts";
 import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
 import { ROUTES } from "../../../next";
-export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", }) {
-    const { data, isLoading } = useFeaturedProducts();
+export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, }) {
+    const { data, isLoading } = useFeaturedProducts({
+        filterByBrand,
+        initialData: initialItems?.length
+            ? { items: initialItems, total: initialItems.length, page: 1, pageSize: initialItems.length, totalPages: 1, hasMore: false }
+            : undefined,
+    });
     const items = data?.items ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: { base: 1 }, gap: 16, rows: 2, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) })), className: className }));
 }

package/dist/features/homepage/components/FeaturedStoresSection.d.ts

@@ -1,3 +1,4 @@
+import type { StoreListItem } from "../../stores/types";
 export interface FeaturedStoresSectionProps {
     title?: string;
     description?: string;
@@ -5,5 +6,6 @@ export interface FeaturedStoresSectionProps {
     viewMoreLabel?: string;
     limit?: number;
     className?: string;
+    initialItems?: StoreListItem[];
 }
-export declare function FeaturedStoresSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, }: FeaturedStoresSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedStoresSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, initialItems, }: FeaturedStoresSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedStoresSection.js

@@ -5,7 +5,7 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedStores } from "../hooks/useFeaturedStores";
 import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
 import { ROUTES } from "../../../next";
-export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", }) {
-    const { data: items = [], isLoading } = useFeaturedStores(limit);
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
+export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", initialItems, }) {
+    const { data: items = [], isLoading } = useFeaturedStores(limit, { initialData: initialItems });
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Top Stores", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
 }

package/dist/features/homepage/components/GoogleReviewsSection.d.ts

@@ -0,0 +1,3 @@
+import type { GoogleReviewsSectionConfig } from "../schemas";
+export type GoogleReviewsSectionProps = GoogleReviewsSectionConfig;
+export declare function GoogleReviewsSection(config: GoogleReviewsSectionProps): Promise<import("react/jsx-runtime").JSX.Element | null>;