@mohasinac/appkit 3.9.0 → 3.9.1

package/dist/features/admin/components/AdminSectionsView.js

@@ -703,7 +703,7 @@ export function AdminSectionsView({ children }) {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Reviews Section Builder" }), _jsx(Input, { label: "Section title", value: reviewsBuilder.title, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Reviews source", value: reviewsBuilder.source, onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, source: v })), options: [
                         { label: "Platform reviews (LetItRip)", value: "platform" },
                         { label: "Google Business Reviews", value: "google" },
-                    ] }), reviewsBuilder.source === "google" ? (_jsx(Input, { label: "Google Place ID", value: reviewsBuilder.placeId, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at maps.google.com/placesinventory" })) : null, _jsx(Select, { label: "Max reviews", value: String(reviewsBuilder.maxReviews), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, maxReviews: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Select, { label: "Items per view", value: String(reviewsBuilder.itemsPerView), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, itemsPerView: Number(v) })), options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }] }), _jsx(Checkbox, { checked: reviewsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(reviewsBuilder.scrollInterval), onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+                    ] }), reviewsBuilder.source === "google" ? (_jsx(Input, { label: "Google Place ID", value: reviewsBuilder.placeId, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at maps.google.com/placesinventory" })) : null, _jsx(Select, { label: "Max reviews", value: String(reviewsBuilder.maxReviews), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, maxReviews: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Select, { label: "Items per view", value: String(reviewsBuilder.itemsPerView), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, itemsPerView: Number(v) })), options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }] }), _jsx(Checkbox, { checked: reviewsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(reviewsBuilder.scrollInterval), onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) }), _jsx(Checkbox, { checked: reviewsBuilder.loop, label: "Loop carousel", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, loop: e.target.checked })) })] }));
     }
     function renderWhatsAppBuilder() {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "WhatsApp Community Builder" }), _jsx(Input, { label: "Title", value: whatsappBuilder.title, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: whatsappBuilder.description, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "WhatsApp group link", type: "url", value: whatsappBuilder.groupLink, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, groupLink: e.target.value })), placeholder: "https://chat.whatsapp.com/..." }), _jsx(Input, { label: "Member count", type: "number", min: 0, value: String(whatsappBuilder.memberCount), onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, memberCount: Math.max(0, Number(e.target.value) || 0) })) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Benefits" }), whatsappBuilder.benefits.map((benefit, index) => (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Input, { value: benefit, onChange: (e) => setWhatsappBuilder((prev) => { const next = [...prev.benefits]; next[index] = e.target.value; return { ...prev, benefits: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: prev.benefits.filter((_, i) => i !== index) })), children: "\u2715" })] }, `wb-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: [...prev.benefits, ""] })), children: "+ Add benefit" })] }), _jsx(Input, { label: "Button text", value: whatsappBuilder.buttonText, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Testimonial (optional)", value: whatsappBuilder.testimonial, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, testimonial: e.target.value })) })] }));
@@ -715,10 +715,10 @@ export function AdminSectionsView({ children }) {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Trust Indicators Builder" }), _jsx(Input, { label: "Section title", value: trustIndicatorsBuilder.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => ({ ...prev, title: e.target.value })) }), trustIndicatorsBuilder.indicators.map((ind, index) => (_jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "md", border: "default", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Indicator ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: prev.indicators.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Icon (emoji or text)", value: ind.icon, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], icon: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Title", value: ind.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], title: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Description", value: ind.description, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], description: e.target.value }; return { ...prev, indicators: next }; }) })] }, ind.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: [...prev.indicators, { id: `ti-${Date.now()}`, icon: "✨", title: "", description: "" }] })), children: "+ Add indicator" })] }));
     }
     function renderCategoriesBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Categories Section Builder" }), _jsx(Input, { label: "Section title", value: categoriesBuilder.title, onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Max categories (4\u201312)", type: "number", min: 4, max: 12, value: String(categoriesBuilder.maxCategories), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, maxCategories: Math.min(12, Math.max(4, Number(e.target.value) || 4)) })) }), _jsx(Checkbox, { checked: categoriesBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(categoriesBuilder.scrollInterval), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Categories Section Builder" }), _jsx(Input, { label: "Section title", value: categoriesBuilder.title, onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Max categories (4\u201312)", type: "number", min: 4, max: 12, value: String(categoriesBuilder.maxCategories), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, maxCategories: Math.min(12, Math.max(4, Number(e.target.value) || 4)) })) }), _jsx(Checkbox, { checked: categoriesBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(categoriesBuilder.scrollInterval), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) }), _jsx(Checkbox, { checked: categoriesBuilder.loop, label: "Loop carousel", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, loop: e.target.checked })) })] }));
     }
     function renderBrandsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Brands Section Builder" }), _jsx(Input, { label: "Section title", value: brandsBuilder.title, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: brandsBuilder.subtitle, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Max brands", type: "number", min: 1, max: 30, value: String(brandsBuilder.maxBrands), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, maxBrands: Math.max(1, Number(e.target.value) || 1) })) }), _jsx(Checkbox, { checked: brandsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(brandsBuilder.scrollInterval), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Brands Section Builder" }), _jsx(Input, { label: "Section title", value: brandsBuilder.title, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: brandsBuilder.subtitle, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Max brands", type: "number", min: 1, max: 30, value: String(brandsBuilder.maxBrands), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, maxBrands: Math.max(1, Number(e.target.value) || 1) })) }), _jsx(Checkbox, { checked: brandsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(brandsBuilder.scrollInterval), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) }), _jsx(Checkbox, { checked: brandsBuilder.loop, label: "Loop carousel", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, loop: e.target.checked })) })] }));
     }
     function renderCarouselBuilder() {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Carousel Section Builder" }), _jsx(Input, { label: "Section title", value: carouselBuilder.title, onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Hero Carousel" }), _jsx(Select, { label: "Slide height", value: carouselBuilder.height, onValueChange: (value) => setCarouselBuilder((prev) => ({ ...prev, height: value })), options: [
@@ -786,7 +786,7 @@ export function AdminSectionsView({ children }) {
                     ] }), _jsx(Checkbox, { checked: customCardsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(customCardsBuilder.scrollIntervalMs), onChange: (e) => setCustomCardsBuilder((prev) => ({
                         ...prev,
                         scrollIntervalMs: Math.max(1000, Number(e.target.value) || 4000),
-                    })) }), _jsxs(Stack, { gap: "3", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Cards (", customCardsBuilder.cards.length, ")"] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addCard, children: "Add card" })] }), customCardsBuilder.cards.map((card, index) => renderCardFields(card, index)), customCardsBuilder.cards.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No cards added yet. Click \"Add card\" to start." })) : null] })] }));
+                    })) }), _jsx(Checkbox, { checked: customCardsBuilder.loop, label: "Loop carousel", onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsxs(Stack, { gap: "3", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Cards (", customCardsBuilder.cards.length, ")"] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addCard, children: "Add card" })] }), customCardsBuilder.cards.map((card, index) => renderCardFields(card, index)), customCardsBuilder.cards.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No cards added yet. Click \"Add card\" to start." })) : null] })] }));
     }
     function renderGoogleReviewsBuilder() {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Google Reviews Builder" }), _jsx(Input, { label: "Google Place ID", value: googleReviewsBuilder.placeId, onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at developers.google.com/maps/documentation/places/web-service/place-id" }), _jsx(Input, { label: "Max reviews to show", type: "number", min: 1, max: 20, value: String(googleReviewsBuilder.maxReviews), onChange: (e) => setGoogleReviewsBuilder((prev) => ({

package/dist/features/admin/components/sections/adminSectionsBuildParse.js

@@ -190,7 +190,7 @@ export function parseProductsBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_PRODUCTS_BUILDER.loop),
     };
 }
 export function parseAuctionsBuilder(config) {
@@ -210,7 +210,7 @@ export function parseAuctionsBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_AUCTIONS_BUILDER.loop),
     };
 }
 export function parseStatsBuilder(config) {
@@ -271,7 +271,7 @@ export function parsePreOrdersBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_PRE_ORDERS_BUILDER.loop),
     };
 }
 export function parseStoresBuilder(config) {
@@ -292,7 +292,7 @@ export function parseStoresBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_STORES_BUILDER.loop),
     };
 }
 export function parseEventsBuilder(config) {
@@ -313,7 +313,7 @@ export function parseEventsBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_EVENTS_BUILDER.loop),
     };
 }
 export function buildSocialFeedConfig(builder) {
@@ -395,6 +395,7 @@ export function buildCategoriesConfig(builder) {
         maxCategories: builder.maxCategories,
         autoScroll: builder.autoScroll,
         scrollInterval: builder.scrollInterval,
+        loop: builder.loop,
     };
 }
 export function parseCategoriesBuilder(config) {
@@ -403,6 +404,7 @@ export function parseCategoriesBuilder(config) {
         maxCategories: toNumberValue(config.maxCategories, DEFAULT_CATEGORIES_BUILDER.maxCategories),
         autoScroll: toBooleanValue(config.autoScroll, DEFAULT_CATEGORIES_BUILDER.autoScroll),
         scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_CATEGORIES_BUILDER.scrollInterval),
+        loop: toBooleanValue(config.loop, DEFAULT_CATEGORIES_BUILDER.loop),
     };
 }
 export function buildBrandsConfig(builder) {
@@ -412,6 +414,7 @@ export function buildBrandsConfig(builder) {
         maxBrands: builder.maxBrands,
         autoScroll: builder.autoScroll,
         scrollInterval: builder.scrollInterval,
+        loop: builder.loop,
     };
 }
 export function parseBrandsBuilder(config) {
@@ -421,6 +424,7 @@ export function parseBrandsBuilder(config) {
         maxBrands: toNumberValue(config.maxBrands, DEFAULT_BRANDS_BUILDER.maxBrands),
         autoScroll: toBooleanValue(config.autoScroll, DEFAULT_BRANDS_BUILDER.autoScroll),
         scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_BRANDS_BUILDER.scrollInterval),
+        loop: toBooleanValue(config.loop, DEFAULT_BRANDS_BUILDER.loop),
     };
 }
 export function buildBannerConfig(builder) {
@@ -486,6 +490,7 @@ export function buildReviewsConfig(builder) {
         mobileItemsPerView: 1,
         autoScroll: builder.autoScroll,
         scrollInterval: builder.scrollInterval,
+        loop: builder.loop,
         source: builder.source,
         placeId: builder.source === "google" ? builder.placeId || undefined : undefined,
     };
@@ -497,6 +502,7 @@ export function parseReviewsBuilder(config) {
         itemsPerView: toNumberValue(config.itemsPerView, DEFAULT_REVIEWS_BUILDER.itemsPerView),
         autoScroll: toBooleanValue(config.autoScroll, DEFAULT_REVIEWS_BUILDER.autoScroll),
         scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_REVIEWS_BUILDER.scrollInterval),
+        loop: toBooleanValue(config.loop, DEFAULT_REVIEWS_BUILDER.loop),
         source: toStringValue(config.source, "platform"),
         placeId: toStringValue(config.placeId),
     };
@@ -613,6 +619,7 @@ export function buildCustomCardsConfig(builder) {
         columns: builder.columns,
         autoScroll: builder.autoScroll,
         scrollIntervalMs: builder.scrollIntervalMs,
+        loop: builder.loop,
         cards: builder.cards.map((card, index) => ({
             id: card.id || `card-${index + 1}`,
             image: card.image || undefined,
@@ -639,6 +646,7 @@ export function parseCustomCardsBuilder(config) {
         columns: ([1, 2, 3, 4].includes(cols) ? cols : DEFAULT_CUSTOM_CARDS_BUILDER.columns),
         autoScroll: toBooleanValue(config.autoScroll, DEFAULT_CUSTOM_CARDS_BUILDER.autoScroll),
         scrollIntervalMs: toNumberValue(config.scrollIntervalMs, DEFAULT_CUSTOM_CARDS_BUILDER.scrollIntervalMs),
+        loop: toBooleanValue(config.loop, DEFAULT_CUSTOM_CARDS_BUILDER.loop),
         cards: cardsRaw.map((item, index) => {
             const c = (item ?? {});
             const br = toStringValue(c.borderRadius, "none");

package/dist/features/admin/components/sections/adminSectionsTypes.d.ts

@@ -150,6 +150,7 @@ export interface CategoriesBuilderState {
     maxCategories: number;
     autoScroll: boolean;
     scrollInterval: number;
+    loop: boolean;
 }
 export interface BrandsBuilderState {
     title: string;
@@ -157,6 +158,7 @@ export interface BrandsBuilderState {
     maxBrands: number;
     autoScroll: boolean;
     scrollInterval: number;
+    loop: boolean;
 }
 export interface BannerBuilderState {
     height: "sm" | "md" | "lg" | "xl";
@@ -185,6 +187,7 @@ export interface ReviewsBuilderState {
     itemsPerView: number;
     autoScroll: boolean;
     scrollInterval: number;
+    loop: boolean;
     source: "platform" | "google";
     placeId: string;
 }
@@ -249,6 +252,7 @@ export interface CustomCardsBuilderState {
     columns: 1 | 2 | 3 | 4;
     autoScroll: boolean;
     scrollIntervalMs: number;
+    loop: boolean;
     cards: CustomCardsCardBuilderEntry[];
 }
 export interface GoogleReviewsBuilderState {

package/dist/features/admin/components/sections/adminSectionsTypes.js

@@ -42,7 +42,7 @@ export const DEFAULT_PRODUCTS_BUILDER = {
     manualResourceIds: "",
     filterByCategory: "",
     maxCount: 10,
-    loop: false,
+    loop: true,
 };
 export const DEFAULT_AUCTIONS_BUILDER = {
     title: "Live Auctions",
@@ -57,7 +57,7 @@ export const DEFAULT_AUCTIONS_BUILDER = {
     manualResourceIds: "",
     filterByCategory: "",
     maxCount: 10,
-    loop: false,
+    loop: true,
 };
 const DEFAULT_STAT_ROW = {
     source: "static",
@@ -89,7 +89,7 @@ export const DEFAULT_PRE_ORDERS_BUILDER = {
     manualResourceIds: "",
     filterByCategory: "",
     maxCount: 10,
-    loop: false,
+    loop: true,
 };
 export const DEFAULT_STORES_BUILDER = {
     title: "Featured Stores",
@@ -105,7 +105,7 @@ export const DEFAULT_STORES_BUILDER = {
     manualResourceIds: "",
     filterByCategory: "",
     maxCount: 10,
-    loop: false,
+    loop: true,
 };
 export const DEFAULT_EVENTS_BUILDER = {
     title: "Events & Offers",
@@ -121,7 +121,7 @@ export const DEFAULT_EVENTS_BUILDER = {
     manualResourceIds: "",
     filterByCategory: "",
     maxCount: 10,
-    loop: false,
+    loop: true,
 };
 export const DEFAULT_SOCIAL_FEED_BUILDER = {
     title: "",
@@ -156,6 +156,7 @@ export const DEFAULT_CATEGORIES_BUILDER = {
     maxCategories: 8,
     autoScroll: false,
     scrollInterval: 5000,
+    loop: true,
 };
 export const DEFAULT_BRANDS_BUILDER = {
     title: "Top Brands",
@@ -163,6 +164,7 @@ export const DEFAULT_BRANDS_BUILDER = {
     maxBrands: 13,
     autoScroll: true,
     scrollInterval: 4000,
+    loop: true,
 };
 export const DEFAULT_BANNER_BUILDER = {
     height: "lg",
@@ -187,6 +189,7 @@ export const DEFAULT_REVIEWS_BUILDER = {
     itemsPerView: 3,
     autoScroll: true,
     scrollInterval: 5000,
+    loop: true,
     source: "platform",
     placeId: "",
 };
@@ -237,6 +240,7 @@ export const DEFAULT_CUSTOM_CARDS_BUILDER = {
     columns: 3,
     autoScroll: false,
     scrollIntervalMs: 4000,
+    loop: true,
     cards: [],
 };
 export const DEFAULT_GOOGLE_REVIEWS_BUILDER = {

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

@@ -13,5 +13,8 @@ export interface BrandsSectionProps {
         featuredOnly?: boolean;
         byCountry?: string;
     };
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function BrandsSection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, initialItems, cta, filters, }: BrandsSectionProps): import("react").JSX.Element | null;
+export declare function BrandsSection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, initialItems, cta, filters, autoScroll, scrollInterval, loop, }: BrandsSectionProps): import("react").JSX.Element | null;

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

@@ -29,7 +29,7 @@ function BrandLogo({ brand }) {
     const initial = brand.name[0]?.toUpperCase() ?? "?";
     return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-32 w-36 flex-col items-center justify-center gap-[var(--appkit-space-2)] rounded-xl border border-zinc-200 bg-[var(--appkit-color-surface)] p-[var(--appkit-space-3)] shadow-sm transition-all hover:border-primary-300 hover:shadow-md border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] md:h-40", children: [iconSrc || coverImage ? (_jsx(Image, { src: iconSrc ?? coverImage, alt: brand.name, width: 64, height: 64, className: "h-16 w-16 rounded object-contain" })) : (_jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-16 w-16 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: initial })), _jsx(Text, { className: "w-full truncate", color: "muted", size: "xs", weight: "medium", align: "start", children: brand.name })] }));
 }
-export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, cta, filters, }) {
+export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, cta, filters, autoScroll = true, scrollInterval = 4000, loop = true, }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY };
     const { data: allBrands = [], isLoading } = useTopBrands(limit, { initialData: initialItems });
     const [activeFilter, setActiveFilter] = useState("all");
@@ -42,5 +42,5 @@ export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, view
     });
     if (!isLoading && allBrands.length === 0)
         return null;
-    return (_jsx(Section, { className: `${className}`, surface: "subtle", paddingY: "y-3xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Row, { className: "mb-6", align: "center", justify: "between", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs(Row, { wrap: true, gap: "sm", className: "mb-4", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden}`, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Div, { className: "h-32 w-36 flex-none animate-pulse md:h-40", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, loop: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, surface: "subtle", paddingY: "y-3xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Row, { className: "mb-6", align: "center", justify: "between", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs(Row, { wrap: true, gap: "sm", className: "mb-4", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden}`, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Div, { className: "h-32 w-36 flex-none animate-pulse md:h-40", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, loop: loop })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
 }

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

@@ -55,16 +55,16 @@ function SectionHeader({ title }) {
     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 { title, layout, columns = 3, cards, autoScroll, scrollIntervalMs, loop = true } = config;
     if (!cards?.length)
         return null;
     // autoScroll: wrap all cards in SectionCarousel (client carousel)
     if (autoScroll) {
-        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsx(Div, { className: CLS_CONTAINER, 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 } }) }) }));
+        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, loop: loop, perView: { base: 1, sm: 2, md: columns } }) }) }));
     }
     // Row layout: horizontal scroller
     if (layout === "row") {
-        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, loop: true, items: cards, keyExtractor: (card) => card.id, renderItem: (card) => (_jsx(Div, { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) })) })] }) }));
+        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, loop: loop, items: cards, keyExtractor: (card) => card.id, renderItem: (card) => (_jsx(Div, { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) })) })] }) }));
     }
     // Masonry layout: CSS columns
     if (layout === "masonry") {

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

@@ -9,5 +9,8 @@ export interface CustomerReviewsSectionProps<T = unknown> {
     isLoading?: boolean;
     keyExtractor?: (item: T) => string;
     className?: string;
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function CustomerReviewsSection<T = unknown>({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel, isLoading, keyExtractor, className, }: CustomerReviewsSectionProps<T>): React.JSX.Element | null;
+export declare function CustomerReviewsSection<T = unknown>({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel, isLoading, keyExtractor, className, autoScroll, scrollInterval, loop, }: CustomerReviewsSectionProps<T>): React.JSX.Element | null;

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

@@ -10,12 +10,12 @@ const __O = {
     hidden: "overflow-hidden",
 };
 // --- Section -----------------------------------------------------------------
-export function CustomerReviewsSection({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel = "See all reviews", isLoading = false, keyExtractor, className = "", }) {
+export function CustomerReviewsSection({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel = "See all reviews", isLoading = false, keyExtractor, className = "", autoScroll = true, scrollInterval = 4500, loop = true, }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
     if (isLoading) {
         return (_jsx(Section, { className: `${__P.p8} ${className}`, surface: "muted", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto", children: [_jsx(Div, { className: `h-8 ${skeleton.base} mb-8 max-w-xs mx-auto` }), _jsx(Div, { layout: "flex", gap: "6", className: `${__O.hidden}`, children: [...Array(3)].map((_, i) => (_jsx(Div, { className: `${skeleton.card} h-[clamp(180px,26vh,260px)] min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] flex-none` }, i))) })] }) }));
     }
     if (items.length === 0)
         return null;
-    return (_jsx(Section, { className: `${className}`, surface: "muted", padding: "y-3xl", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto md:px-[2rem]", padding: "x-md", children: [_jsxs(Div, { className: "text-left mb-10", children: [_jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary}`, size: "base", children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: CAROUSEL_PER_VIEW.reviews, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: true }), viewMoreHref && (_jsx(Div, { className: "text-left mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-primary hover:text-primary/80", size: "sm", weight: "medium", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, surface: "muted", padding: "y-3xl", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto md:px-[2rem]", padding: "x-md", children: [_jsxs(Div, { className: "text-left mb-10", children: [_jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary}`, size: "base", children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: CAROUSEL_PER_VIEW.reviews, gap: 24, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: loop }), viewMoreHref && (_jsx(Div, { className: "text-left mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-primary hover:text-primary/80", size: "sm", weight: "medium", children: viewMoreLabel }) }))] }) }));
 }

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

@@ -8,5 +8,8 @@ export interface EventsSectionProps {
     limit?: number;
     className?: string;
     initialItems?: EventItem[];
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function EventsSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, initialItems, }: EventsSectionProps): React.JSX.Element;
+export declare function EventsSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, initialItems, autoScroll, scrollInterval, loop, }: EventsSectionProps): React.JSX.Element;

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

@@ -4,7 +4,7 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useHomepageEvents } from "../hooks/useHomepageEvents";
 import { EventCard } from "../../events/components/EventCard";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
-export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", initialItems, }) {
+export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", initialItems, autoScroll = false, scrollInterval = 5000, loop = true, }) {
     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: CAROUSEL_PER_VIEW.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Events & Offers", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: CAROUSEL_PER_VIEW.events, gap: 16, autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
 }

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

@@ -11,5 +11,6 @@ export interface FeaturedAuctionsSectionProps {
     rows?: number;
     autoScroll?: boolean;
     scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, }: FeaturedAuctionsSectionProps): React.JSX.Element;
+export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, loop, }: FeaturedAuctionsSectionProps): React.JSX.Element;

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

@@ -4,7 +4,7 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedAuctions } from "../hooks/useFeaturedAuctions";
 import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
-export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, }) {
+export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, loop = true, }) {
     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: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Live Auctions", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
 }

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

@@ -11,5 +11,6 @@ export interface FeaturedPreOrdersSectionProps {
     rows?: number;
     autoScroll?: boolean;
     scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, }: FeaturedPreOrdersSectionProps): React.JSX.Element;
+export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, loop, }: FeaturedPreOrdersSectionProps): React.JSX.Element;

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

@@ -4,7 +4,7 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedPreOrders } from "../hooks/useFeaturedPreOrders";
 import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
-export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, }) {
+export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, loop = true, }) {
     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: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Pre-Order Incoming", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
 }

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

@@ -11,5 +11,6 @@ export interface FeaturedProductsSectionProps {
     maxItems?: number;
     autoScroll?: boolean;
     scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, }: FeaturedProductsSectionProps): import("react").JSX.Element;
+export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, loop, }: FeaturedProductsSectionProps): import("react").JSX.Element;

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

@@ -5,7 +5,7 @@ import { useFeaturedProducts } from "../hooks/useFeaturedProducts";
 import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
 import { ROUTES } from "../../../next";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
-export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, }) {
+export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, loop = true, }) {
     const { data, isLoading } = useFeaturedProducts({
         filterByBrand,
         initialData: initialItems?.length
@@ -13,5 +13,5 @@ export function FeaturedProductsSection({ title = "Featured Products", descripti
             : undefined,
     });
     const items = data?.items ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: String(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, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, 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

@@ -8,5 +8,8 @@ export interface FeaturedStoresSectionProps {
     limit?: number;
     className?: string;
     initialItems?: StoreListItem[];
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function FeaturedStoresSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, initialItems, }: FeaturedStoresSectionProps): React.JSX.Element;
+export declare function FeaturedStoresSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, initialItems, autoScroll, scrollInterval, loop, }: FeaturedStoresSectionProps): React.JSX.Element;

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

@@ -5,7 +5,7 @@ import { useFeaturedStores } from "../hooks/useFeaturedStores";
 import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
 import { ROUTES } from "../../../next";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
-export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", initialItems, }) {
+export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", initialItems, autoScroll = false, scrollInterval = 5000, loop = true, }) {
     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: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Top Stores", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
 }

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

@@ -5,5 +5,8 @@ export interface HomepageCustomerReviewsSectionProps {
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function HomepageCustomerReviewsSection({ title, subtitle, viewMoreHref, viewMoreLabel, className, }: HomepageCustomerReviewsSectionProps): React.JSX.Element;
+export declare function HomepageCustomerReviewsSection({ title, subtitle, viewMoreHref, viewMoreLabel, className, autoScroll, scrollInterval, loop, }: HomepageCustomerReviewsSectionProps): React.JSX.Element;

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

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CustomerReviewsSection } from "./CustomerReviewsSection";
 import { useHomepageReviews } from "../hooks/useHomepageReviews";
 import { ReviewCard } from "../../reviews/components";
-export function HomepageCustomerReviewsSection({ title = "What Our Customers Say", subtitle, viewMoreHref, viewMoreLabel = "See all reviews →", className = "", }) {
+export function HomepageCustomerReviewsSection({ title = "What Our Customers Say", subtitle, viewMoreHref, viewMoreLabel = "See all reviews →", className = "", autoScroll = true, scrollInterval = 4500, loop = true, }) {
     const { data: reviews = [], isLoading } = useHomepageReviews();
-    return (_jsx(CustomerReviewsSection, { title: title, subtitle: subtitle, items: reviews, renderItem: (review) => (_jsx(ReviewCard, { review: review, className: "h-full border-zinc-200 shadow-sm border-[var(--appkit-color-border)]" })), viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, isLoading: isLoading, keyExtractor: (review) => review.id, className: className }));
+    return (_jsx(CustomerReviewsSection, { title: title, subtitle: subtitle, items: reviews, renderItem: (review) => (_jsx(ReviewCard, { review: review, className: "h-full border-zinc-200 shadow-sm border-[var(--appkit-color-border)]" })), viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, isLoading: isLoading, keyExtractor: (review) => review.id, className: className, autoScroll: autoScroll, scrollInterval: scrollInterval, loop: loop }));
 }

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

@@ -41,6 +41,8 @@ export interface SectionCarouselProps<T = unknown> {
     autoScroll?: boolean;
     /** Interval between auto-scroll steps in ms. Default: 3500 */
     autoScrollInterval?: number;
+    /** Circular auto-rotate at the carousel edges. Default: true */
+    loop?: boolean;
     /** Key extractor for the HorizontalScroller. */
     keyExtractor?: (item: T, index: number) => string;
     /**
@@ -72,4 +74,4 @@ export interface SectionCarouselProps<T = unknown> {
      */
     minItemWidth?: number;
 }
-export declare function SectionCarousel<T = unknown>({ title, description, headingVariant, pillLabel, backgroundImage, viewMoreHref, viewMoreLabel, items, renderItem, perView, gap, autoScroll, autoScrollInterval, keyExtractor, rows, className, isLoading, skeletonCount, lightText, showPeek: _showPeek, minItemWidth, }: SectionCarouselProps<T>): React.JSX.Element | null;
+export declare function SectionCarousel<T = unknown>({ title, description, headingVariant, pillLabel, backgroundImage, viewMoreHref, viewMoreLabel, items, renderItem, perView, gap, autoScroll, autoScrollInterval, loop, keyExtractor, rows, className, isLoading, skeletonCount, lightText, showPeek: _showPeek, minItemWidth, }: SectionCarouselProps<T>): React.JSX.Element | null;

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

@@ -12,7 +12,7 @@ function CarouselSkeleton({ count }) {
     return (_jsx(Div, { layout: "flex", gap: "4", className: `${__O.hidden}`, padding: "x-md", children: Array.from({ length: count }).map((_, i) => (_jsxs(Stack, { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)]", gap: "sm", children: [_jsx(Div, { className: `aspect-square ${skeleton.image}`, rounded: "xl" }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) }));
 }
 // --- Component ---------------------------------------------------------------
-export function SectionCarousel({ title, description, headingVariant = "editorial", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = CAROUSEL_PER_VIEW.standard, gap = 16, autoScroll = false, autoScrollInterval = 3500, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek: _showPeek = false, minItemWidth = 220, }) {
+export function SectionCarousel({ title, description, headingVariant = "editorial", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = CAROUSEL_PER_VIEW.standard, gap = 16, autoScroll = false, autoScrollInterval = 3500, loop = true, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek: _showPeek = false, minItemWidth = 220, }) {
     if (!isLoading && items.length === 0)
         return null;
     const hasBg = Boolean(backgroundImage);
@@ -41,5 +41,5 @@ export function SectionCarousel({ title, description, headingVariant = "editoria
                                     headingClass,
                                 ]
                                     .filter(Boolean)
-                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs(Row, { align: "center", justify: "center", gap: "sm", textSize: "xs", color: "faint", className: "mt-1 select-none", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `${descVariant} mt-2`, size: "base", children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: true, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx(Row, { className: "mt-6", justify: "start", children: _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "sm", href: viewMoreHref, className: `inline-flex items-[center] gap-[0.375rem] border transition-colors ${useLightText ? "border-white/40 text-white hover:bg-[rgba(255,255,255,0.1)]" : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]"}`, size: "sm", weight: "medium", children: viewMoreLabel }) }))] })] }));
+                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs(Row, { align: "center", justify: "center", gap: "sm", textSize: "xs", color: "faint", className: "mt-1 select-none", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `${descVariant} mt-2`, size: "base", children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: loop, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx(Row, { className: "mt-6", justify: "start", children: _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "sm", href: viewMoreHref, className: `inline-flex items-[center] gap-[0.375rem] border transition-colors ${useLightText ? "border-white/40 text-white hover:bg-[rgba(255,255,255,0.1)]" : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]"}`, size: "sm", weight: "medium", children: viewMoreLabel }) }))] })] }));
 }

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

@@ -14,5 +14,8 @@ export interface ShopByCategorySectionProps {
         rootOnly?: boolean;
         rootCategoryId?: string;
     };
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    loop?: boolean;
 }
-export declare function ShopByCategorySection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, initialItems, cta, filters, }: ShopByCategorySectionProps): import("react").JSX.Element | null;
+export declare function ShopByCategorySection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, initialItems, cta, filters, autoScroll, scrollInterval, loop, }: ShopByCategorySectionProps): import("react").JSX.Element | null;

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

@@ -37,7 +37,7 @@ function FilterChip({ label, active, onClick, }) {
                 : "border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-primary)]",
         ].join(" "), children: label }));
 }
-export function ShopByCategorySection({ title = "Shop by Category", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "View all categories →", className = "", initialItems, cta, filters, }) {
+export function ShopByCategorySection({ title = "Shop by Category", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "View all categories →", className = "", initialItems, cta, filters, autoScroll = true, scrollInterval = 3500, loop = true, }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY };
     const { data: allCategories = [], isLoading } = useTopCategories(limit, { initialData: initialItems });
     const [activeFilter, setActiveFilter] = useState("all");
@@ -68,5 +68,5 @@ export function ShopByCategorySection({ title = "Shop by Category", subtitle, li
                             if (!cat)
                                 return null;
                             return (_jsx(FilterChip, { label: cat.name, active: activeFilter === id, onClick: () => setActiveFilter(activeFilter === id ? "all" : id) }, id));
-                        })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden} px-[0.25rem]`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: true, autoScrollInterval: 3500, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, loop: true, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+                        })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden} px-[0.25rem]`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: autoScroll, autoScrollInterval: scrollInterval, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, loop: loop, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/homepage/lib/section-renderer.js

@@ -53,7 +53,7 @@ function renderSectionElement(section, newsletterFormSlot, faqItems, slides, liv
         }
         case "categories": {
             const cfg = config;
-            return (_jsx(ShopByCategorySection, { title: cleanTitle(cfg?.title) || "Shop by Category", viewMoreHref: ROUTES.PUBLIC.CATEGORIES, viewMoreLabel: "All categories \u2192", initialItems: sectionData.categories, cta: cfg?.cta, filters: cfg?.filters }));
+            return (_jsx(ShopByCategorySection, { title: cleanTitle(cfg?.title) || "Shop by Category", viewMoreHref: ROUTES.PUBLIC.CATEGORIES, viewMoreLabel: "All categories \u2192", initialItems: sectionData.categories, cta: cfg?.cta, filters: cfg?.filters, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval, loop: cfg?.loop }));
         }
         case "stats": {
             const cfg = config;
@@ -84,27 +84,27 @@ function renderSectionElement(section, newsletterFormSlot, faqItems, slides, liv
         }
         case "products": {
             const cfg = config;
-            return (_jsx(FeaturedProductsSection, { title: cleanTitle(cfg?.title) || "Featured Products", viewMoreHref: ROUTES.PUBLIC.PRODUCTS, viewMoreLabel: "View all products \u2192", filterByBrand: cfg?.filterByBrand, initialItems: sectionData.products, rows: cfg?.rows, maxItems: cfg?.maxItems, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval }));
+            return (_jsx(FeaturedProductsSection, { title: cleanTitle(cfg?.title) || "Featured Products", viewMoreHref: ROUTES.PUBLIC.PRODUCTS, viewMoreLabel: "View all products \u2192", filterByBrand: cfg?.filterByBrand, initialItems: sectionData.products, rows: cfg?.rows, maxItems: cfg?.maxItems, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval, loop: cfg?.loop }));
         }
         case "auctions": {
             const cfg = config;
-            return (_jsx(FeaturedAuctionsSection, { title: cleanTitle(cfg?.title) || "Live Auctions", viewMoreHref: ROUTES.PUBLIC.AUCTIONS, viewMoreLabel: "View all auctions \u2192", filterByBrand: cfg?.filterByBrand, initialItems: sectionData.auctions, rows: cfg?.rows, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval }));
+            return (_jsx(FeaturedAuctionsSection, { title: cleanTitle(cfg?.title) || "Live Auctions", viewMoreHref: ROUTES.PUBLIC.AUCTIONS, viewMoreLabel: "View all auctions \u2192", filterByBrand: cfg?.filterByBrand, initialItems: sectionData.auctions, rows: cfg?.rows, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval, loop: cfg?.loop }));
         }
         case "pre-orders": {
             const cfg = config;
-            return (_jsx(FeaturedPreOrdersSection, { title: cleanTitle(cfg?.title) || "Reserve Before It Ships", viewMoreHref: ROUTES.PUBLIC.PRE_ORDERS, viewMoreLabel: "View all pre-orders \u2192", filterByBrand: cfg?.filterByBrand, initialItems: sectionData.preOrders, rows: cfg?.rows, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval }));
+            return (_jsx(FeaturedPreOrdersSection, { title: cleanTitle(cfg?.title) || "Reserve Before It Ships", viewMoreHref: ROUTES.PUBLIC.PRE_ORDERS, viewMoreLabel: "View all pre-orders \u2192", filterByBrand: cfg?.filterByBrand, initialItems: sectionData.preOrders, rows: cfg?.rows, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval, loop: cfg?.loop }));
         }
         case "stores": {
             const cfg = config;
-            return (_jsx(FeaturedStoresSection, { title: cleanTitle(cfg?.title) || "Featured Stores", viewMoreHref: ROUTES.PUBLIC.STORES, viewMoreLabel: "View all stores \u2192", initialItems: sectionData.stores }));
+            return (_jsx(FeaturedStoresSection, { title: cleanTitle(cfg?.title) || "Featured Stores", viewMoreHref: ROUTES.PUBLIC.STORES, viewMoreLabel: "View all stores \u2192", initialItems: sectionData.stores, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval, loop: cfg?.loop }));
         }
         case "events": {
             const cfg = config;
-            return (_jsx(EventsSection, { title: cleanTitle(cfg?.title) || "Events & Offers", viewMoreHref: ROUTES.PUBLIC.EVENTS, viewMoreLabel: "View all events \u2192", initialItems: sectionData.events }));
+            return (_jsx(EventsSection, { title: cleanTitle(cfg?.title) || "Events & Offers", viewMoreHref: ROUTES.PUBLIC.EVENTS, viewMoreLabel: "View all events \u2192", initialItems: sectionData.events, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval, loop: cfg?.loop }));
         }
         case "reviews": {
             const cfg = config;
-            return (_jsx(HomepageCustomerReviewsSection, { title: cleanTitle(cfg?.title) || "What Our Customers Say", viewMoreHref: ROUTES.PUBLIC.REVIEWS, viewMoreLabel: "See all reviews \u2192" }));
+            return (_jsx(HomepageCustomerReviewsSection, { title: cleanTitle(cfg?.title) || "What Our Customers Say", viewMoreHref: ROUTES.PUBLIC.REVIEWS, viewMoreLabel: "See all reviews \u2192", autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval, loop: cfg?.loop }));
         }
         case "banner": {
             const cfg = config;
@@ -156,7 +156,7 @@ function renderSectionElement(section, newsletterFormSlot, faqItems, slides, liv
         }
         case "brands": {
             const cfg = config;
-            return (_jsx(BrandsSection, { title: cleanTitle(cfg?.title) || "Top Brands", subtitle: cfg?.subtitle, limit: cfg?.maxBrands || 12, viewMoreHref: ROUTES.PUBLIC.CATEGORIES, viewMoreLabel: "All brands \u2192", initialItems: sectionData.brands, cta: cfg?.cta, filters: cfg?.filters }));
+            return (_jsx(BrandsSection, { title: cleanTitle(cfg?.title) || "Top Brands", subtitle: cfg?.subtitle, limit: cfg?.maxBrands || 12, viewMoreHref: ROUTES.PUBLIC.CATEGORIES, viewMoreLabel: "All brands \u2192", initialItems: sectionData.brands, cta: cfg?.cta, filters: cfg?.filters, autoScroll: cfg?.autoScroll, scrollInterval: cfg?.scrollInterval, loop: cfg?.loop }));
         }
         case "social-feed": {
             const cfg = config;
@@ -169,7 +169,7 @@ function renderSectionElement(section, newsletterFormSlot, faqItems, slides, liv
             const cfg = config;
             if (!cfg?.cards?.length)
                 return null;
-            return (_jsx(CustomCardsSection, { title: cleanTitle(cfg.title), layout: cfg.layout ?? "grid", columns: cfg.columns ?? 3, cards: cfg.cards, autoScroll: cfg.autoScroll, scrollIntervalMs: cfg.scrollIntervalMs }));
+            return (_jsx(CustomCardsSection, { title: cleanTitle(cfg.title), layout: cfg.layout ?? "grid", columns: cfg.columns ?? 3, cards: cfg.cards, autoScroll: cfg.autoScroll, scrollIntervalMs: cfg.scrollIntervalMs, loop: cfg.loop }));
         }
         case "google-reviews": {
             const cfg = config;

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

@@ -196,6 +196,8 @@ export interface CategoriesSectionConfig {
     maxCategories: 4;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Circular auto-rotate at the carousel edges. Default: true. */
+    loop?: boolean;
     /** Optional CTA button rendered below the scroller. */
     cta?: SectionCTA;
     /** Optional client-side filter chips above the scroller. */
@@ -213,6 +215,8 @@ export interface BrandsSectionConfig {
     maxBrands: number;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Circular auto-rotate at the carousel edges. Default: true. */
+    loop?: boolean;
     /** Optional CTA button rendered below the scroller. */
     cta?: SectionCTA;
     /** Optional client-side filter chips above the scroller. */
@@ -306,6 +310,8 @@ export interface ReviewsSectionConfig {
     mobileItemsPerView: 1;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Circular auto-rotate at the carousel edges. Default: true. */
+    loop?: boolean;
     source?: "platform" | "google";
     placeId?: string;
 }
@@ -496,6 +502,8 @@ export interface CustomCardsSectionConfig {
     cards: CustomCardsCard[];
     autoScroll?: boolean;
     scrollIntervalMs?: number;
+    /** Circular auto-rotate at the carousel edges. Default: true. */
+    loop?: boolean;
 }
 export type CollectionCardType = "products" | "auctions" | "pre-orders" | "stores" | "events" | "blog-posts" | "reviews" | "brands" | "categories";
 export interface CollectionCardsEntry {

package/dist/seed/homepage-sections-seed-data.js

@@ -86,6 +86,7 @@ export const homepageSectionsSeedData = [
             maxCategories: 4,
             autoScroll: true,
             scrollInterval: 4000,
+            loop: true,
         },
         createdAt: daysAgo(90),
         updatedAt: daysAgo(2),
@@ -101,6 +102,7 @@ export const homepageSectionsSeedData = [
             maxBrands: 13,
             autoScroll: true,
             scrollInterval: 3000,
+            loop: true,
         },
         createdAt: daysAgo(90),
         updatedAt: daysAgo(2),
@@ -119,6 +121,7 @@ export const homepageSectionsSeedData = [
             mobileItemsPerRow: 2,
             autoScroll: true,
             scrollInterval: 5000,
+            loop: true,
         },
         createdAt: daysAgo(90),
         updatedAt: daysAgo(2),
@@ -137,6 +140,7 @@ export const homepageSectionsSeedData = [
             mobileItemsPerRow: 1,
             autoScroll: true,
             scrollInterval: 5000,
+            loop: true,
         },
         createdAt: daysAgo(90),
         updatedAt: daysAgo(2),
@@ -155,6 +159,7 @@ export const homepageSectionsSeedData = [
             mobileItemsPerRow: 2,
             autoScroll: true,
             scrollInterval: 5000,
+            loop: true,
         },
         createdAt: daysAgo(90),
         updatedAt: daysAgo(2),
@@ -214,6 +219,7 @@ export const homepageSectionsSeedData = [
             mobileItemsPerView: 1,
             autoScroll: true,
             scrollInterval: 4000,
+            loop: true,
         },
         createdAt: daysAgo(90),
         updatedAt: daysAgo(2),
@@ -229,6 +235,7 @@ export const homepageSectionsSeedData = [
             maxStores: 8,
             autoScroll: true,
             scrollInterval: 4000,
+            loop: true,
         },
         createdAt: daysAgo(90),
         updatedAt: daysAgo(2),
@@ -244,6 +251,7 @@ export const homepageSectionsSeedData = [
             maxEvents: 6,
             autoScroll: true,
             scrollInterval: 6000,
+            loop: true,
         },
         createdAt: daysAgo(60),
         updatedAt: daysAgo(2),
@@ -374,6 +382,7 @@ export const homepageSectionsSeedData = [
             mobileItemsPerRow: 2,
             autoScroll: true,
             scrollInterval: 5000,
+            loop: true,
             filterByBrand: "brand-konami",
             sortBy: "featured",
         },
@@ -394,6 +403,7 @@ export const homepageSectionsSeedData = [
             mobileItemsPerRow: 2,
             autoScroll: true,
             scrollInterval: 5000,
+            loop: true,
             filterByBrand: "brand-upper-deck",
             sortBy: "featured",
         },

package/dist/ui/components/HorizontalScroller.js

@@ -294,6 +294,9 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         ? {
             onMouseEnter: () => setIsPaused(true),
             onMouseLeave: () => setIsPaused(false),
+            onTouchStart: () => setIsPaused(true),
+            onTouchEnd: () => setIsPaused(false),
+            onTouchCancel: () => setIsPaused(false),
         }
         : {};
     const combinedOnScroll = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"