@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/stores/api/[storeSlug]/products/route.js

@@ -1,3 +1,4 @@
+import { normalizeError } from "../../../../../errors/normalize";
 /**
  * feat-stores — store products (GET /api/stores/[storeSlug]/products)
  *
@@ -87,6 +88,7 @@ export async function GET(request, context) {
         return NextResponse.json({ success: true, data: body });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-stores] GET /api/stores/[storeSlug]/products failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch store products" }, { status: 500 });
     }

package/dist/features/stores/api/[storeSlug]/reviews/route.js

@@ -15,6 +15,7 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../../contracts";
+import { normalizeError } from "../../../../../errors/normalize";
 // --- GET /api/stores/[storeSlug]/reviews --------------------------------------
 export async function GET(request, context) {
     try {
@@ -116,6 +117,7 @@ export async function GET(request, context) {
         // Apply hasImages filter
         if (hasImages) {
             filtered = filtered.filter((r) => {
+                // audit-unknown-ok: review images cast — Firestore array shape
                 const imgs = r.images;
                 return Array.isArray(imgs) && imgs.length > 0;
             });
@@ -142,6 +144,7 @@ export async function GET(request, context) {
         });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-stores] GET /api/stores/[storeSlug]/reviews failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch store reviews" }, { status: 500 });
     }

package/dist/features/stores/api/[storeSlug]/route.d.ts

@@ -5,7 +5,7 @@
  *
  * ```ts
  * // app/api/stores/[storeSlug]/route.ts
- * export { GET } from "@mohasinac/feat-stores";   // re-exported as storeSlugGET
+ * export { GET } from "@mohasinac/feat-stores"; // re-exported as storeSlugGET
  * ```
  *
  * Returns StoreDetail directly (no outer `{ store }` wrapper) so

package/dist/features/stores/api/[storeSlug]/route.js

@@ -5,7 +5,7 @@
  *
  * ```ts
  * // app/api/stores/[storeSlug]/route.ts
- * export { GET } from "@mohasinac/feat-stores";   // re-exported as storeSlugGET
+ * export { GET } from "@mohasinac/feat-stores"; // re-exported as storeSlugGET
  * ```
  *
  * Returns StoreDetail directly (no outer `{ store }` wrapper) so
@@ -13,6 +13,7 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../contracts";
+import { normalizeError } from "../../../../errors/normalize";
 // --- GET /api/stores/[storeSlug] ---------------------------------------------
 export async function GET(_request, context) {
     try {
@@ -60,6 +61,7 @@ export async function GET(_request, context) {
         return NextResponse.json({ success: true, data: store });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-stores] GET /api/stores/[storeSlug] failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch store" }, { status: 500 });
     }

package/dist/features/stores/api/route.js

@@ -11,6 +11,7 @@
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../contracts";
 import { parseListingParams } from "../../../utils/listing-params";
+import { normalizeError } from "../../../errors/normalize";
 const DEFAULT_PAGE = 1;
 const DEFAULT_PAGE_SIZE = 24;
 const DEFAULT_SORT = "-createdAt";
@@ -102,6 +103,7 @@ export async function GET(request) {
         return NextResponse.json({ success: true, data: body });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-stores] GET /api/stores failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch stores" }, { status: 500 });
     }

package/dist/features/stores/components/InteractiveStoreCard.js

@@ -2,15 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Link from "next/link";
-import { BaseListingCard, Heading, Span, Row, RichText, Div } from "../../../ui";
+import { BaseListingCard, Div, Heading, RichText, Row, Scrim, Span, Stack } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
-import { THEME_CONSTANTS } from "../../../tokens";
 import { normalizeRichTextHtml } from "../../../utils";
 import { useLongPress } from "../../../react/hooks/useLongPress";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_RATING_BADGE = "absolute top-2 right-2 flex items-center gap-1 rounded-full bg-black/50 backdrop-blur-sm px-2 py-0.5 text-xs font-semibold text-yellow-300";
+const CLS_RATING_BADGE = "absolute top-2 right-2 flex items-center gap-1 rounded-full bg-black/50 backdrop-blur-sm px-2 py-0.5 text-xs font-semibold text-warning";
 export function InteractiveStoreCard({ store, href, selectable, isSelected = false, onSelect, labels = {}, className = "", }) {
     const initial = store.storeName[0]?.toUpperCase() ?? "S";
     const [logoBroken, setLogoBroken] = useState(false);
@@ -27,5 +26,5 @@ export function InteractiveStoreCard({ store, href, selectable, isSelected = fal
         ].join(" "), onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => {
                     e.preventDefault();
                     onSelect(store.id, !isSelected);
-                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { className: `relative aspect-video w-full ${__O.hidden} bg-gradient-to-br from-zinc-100 via-zinc-200 to-zinc-300 dark:from-zinc-800 dark:via-zinc-700 dark:to-zinc-900 flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Span, { className: "text-5xl opacity-20 select-none", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Div, { className: "absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-black/40 to-transparent pointer-events-none" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Div, { className: "flex flex-col flex-1 px-4 pb-4", children: [_jsx(Div, { className: "-mt-5 mb-2 flex items-end justify-between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx("img", { src: store.storeLogoURL, alt: store.storeName, className: "h-10 w-10 rounded-lg border-2 border-white dark:border-zinc-800 shadow-md object-cover bg-white dark:bg-zinc-800", onError: () => setLogoBroken(true), loading: "lazy" })) : (_jsx(Div, { className: "flex h-10 w-10 items-center justify-center rounded-lg border-2 border-white dark:border-zinc-800 bg-primary/10 dark:bg-primary/20 text-base font-bold text-primary shadow-md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `${THEME_CONSTANTS.utilities.textClamp1} text-sm font-bold text-zinc-900 dark:text-zinc-100 group-hover:text-primary transition-colors`, children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mt-1 ${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-500 dark:text-zinc-400 flex-1` })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { gap: "sm", className: "mt-2.5 flex-wrap text-xs text-zinc-500 dark:text-zinc-400", children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { className: "flex items-center gap-0.5", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { className: "flex items-center gap-0.5", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Div, { className: "mt-3 pt-2.5 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", className: "text-zinc-400 dark:text-zinc-400", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
+                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx("img", { src: store.storeLogoURL, alt: store.storeName, className: "h-10 w-10 rounded-lg border-2 border-white dark:border-zinc-800 shadow-md object-cover bg-white dark:bg-zinc-800", onError: () => setLogoBroken(true), loading: "lazy" })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-xs text-zinc-500 dark:text-zinc-400 flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
 }

package/dist/features/stores/components/StoreAboutView.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, RichText, Text } from "../../../ui";
+import { Row } from "@mohasinac/appkit/ui";
+import { Div, Heading, RichText, Stack, Text } from "../../../ui";
 const CLS_LABEL = "font-medium text-neutral-700 min-w-[120px]";
-const CLS_WARN_BOX = "bg-yellow-50 border border-yellow-200 rounded-lg p-4";
-const CLS_WARN_TITLE = "text-yellow-800 font-medium";
-const CLS_WARN_BODY = "text-yellow-700 mt-1";
+const CLS_WARN_BOX = "bg-warning-surface border border-warning rounded-lg p-4";
+const CLS_WARN_TITLE = "text-warning font-medium";
+const CLS_WARN_BODY = "text-warning mt-1";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 export function StoreAboutView({ store, labels = {}, renderSocialLinks, renderStats, className = "", }) {
@@ -13,5 +14,5 @@ export function StoreAboutView({ store, labels = {}, renderSocialLinks, renderSt
             month: "long",
         })
         : null;
-    return (_jsxs(Div, { className: `space-y-6 py-6 ${className}`, children: [store.bio && (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold mb-2", children: labels.aboutTitle ?? "About" }), _jsx(RichText, { html: normalizeRichTextHtml(store.bio) })] })), renderStats?.(store), _jsxs(Div, { className: "space-y-3 text-sm", children: [store.location && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: CLS_LABEL, children: labels.locationLabel ?? "Location" }), _jsx(Text, { className: "", children: store.location })] })), joinDate && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: CLS_LABEL, children: labels.memberSinceLabel ?? "Member since" }), _jsx(Text, { className: "", children: joinDate })] })), store.website && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Text, { className: CLS_LABEL, children: labels.websiteLabel ?? "Website" }), _jsx("a", { href: store.website, target: "_blank", rel: "noopener noreferrer", className: "text-primary hover:underline break-all", children: store.website })] }))] }), store.socialLinks && renderSocialLinks?.(store.socialLinks), store.returnPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-base font-semibold mb-2", children: labels.returnPolicyLabel ?? "Return Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.returnPolicy) })] })), store.shippingPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-base font-semibold mb-2", children: labels.shippingPolicyLabel ?? "Shipping Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.shippingPolicy) })] })), store.isVacationMode && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: labels.vacationModeLabel ?? "This store is on vacation mode" }), store.vacationMessage && (_jsx(Text, { className: CLS_WARN_BODY, children: store.vacationMessage }))] }))] }));
+    return (_jsxs(Stack, { className: `${className}`, gap: "lg", padding: "y-lg", children: [store.bio && (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-2", size: "lg", weight: "semibold", children: labels.aboutTitle ?? "About" }), _jsx(RichText, { html: normalizeRichTextHtml(store.bio) })] })), renderStats?.(store), _jsxs(Stack, { textSize: "sm", gap: "3", children: [store.location && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.locationLabel ?? "Location" }), _jsx(Text, { className: "", children: store.location })] })), joinDate && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.memberSinceLabel ?? "Member since" }), _jsx(Text, { className: "", children: joinDate })] })), store.website && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.websiteLabel ?? "Website" }), _jsx("a", { href: store.website, target: "_blank", rel: "noopener noreferrer", className: "text-primary hover:underline break-all", children: store.website })] }))] }), store.socialLinks && renderSocialLinks?.(store.socialLinks), store.returnPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", weight: "semibold", children: labels.returnPolicyLabel ?? "Return Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.returnPolicy) })] })), store.shippingPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", weight: "semibold", children: labels.shippingPolicyLabel ?? "Shipping Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.shippingPolicy) })] })), store.isVacationMode && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: labels.vacationModeLabel ?? "This store is on vacation mode" }), store.vacationMessage && (_jsx(Text, { className: CLS_WARN_BODY, children: store.vacationMessage }))] }))] }));
 }

package/dist/features/stores/components/StoreAuctionsListing.js

@@ -4,7 +4,7 @@ import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Div, Pagination, useToast, ListingToolbar, FilterDrawer, LoginRequiredModal, } from "../../../ui";
+import { Div, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Row, Stack, useToast } from "../../../ui";
 import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { ACTION_ID } from "../../products/constants/action-defs";
 import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
@@ -83,8 +83,8 @@ export function StoreAuctionsListing({ storeId, initialData }) {
         buyNowPrice: p.buyNowPrice,
     }));
     const commitSearch = useCallback(() => {
+        // table.set("q", v) already resets page to 1 — see root-cause #13.
         table.set("q", searchInput.trim());
-        table.setPage(1);
     }, [searchInput, table]);
     const wishlistActions = {
         addToWishlist: (productId) => {
@@ -113,7 +113,7 @@ export function StoreAuctionsListing({ storeId, initialData }) {
                         return;
                     setView(v);
                     table.set("view", v);
-                }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx(Div, { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p3} space-y-2`, children: [_jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx(Div, { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions, labels: {
+                }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-hidden animate-pulse", border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions, labels: {
                         emptyTitle: "No auctions yet",
                         emptyDescription: "This store has no active auctions.",
                     } })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));

package/dist/features/stores/components/StoreCapabilitiesGuideView.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
-import { Alert, Div, Heading, Section, Text } from "../../../ui";
+import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Tr, Ul } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
 const SECTION_BODY = "space-y-4 text-sm text-[var(--appkit-color-text-muted)]";
 // -- Section wrapper -----------------------------------------------------------
 function GuideSection({ title, children, }) {
-    return (_jsxs(Section, { className: "rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-6 shadow-sm", children: [_jsx(Heading, { level: 2, className: "mb-4 text-lg font-semibold text-[var(--appkit-color-text)]", children: title }), children] }));
+    return (_jsxs(Section, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", shadow: "sm", padding: "lg", children: [_jsx(Heading, { level: 2, className: "mb-4 text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: title }), children] }));
 }
 // -- Section 1: What are capabilities -----------------------------------------
 function WhatAreCapabilitiesSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsx(Text, { className: "leading-relaxed", children: "Capabilities are per-store feature flags granted by the LetItRip team. They are not self-serve \u2014 they must be requested and approved. This gives LetItRip control over trust, quality, and platform safety as your store grows." }), _jsxs(Text, { className: "leading-relaxed", children: ["Two capabilities are enabled for every store at creation by default:", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded mx-1", children: "suggest_brands" }), " and", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded mx-1", children: "create_coupons" }), ". All others must be requested. Some require contractual agreements before they can be granted."] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsx(Text, { className: "leading-relaxed", children: "Capabilities are per-store feature flags granted by the LetItRip team. They are not self-serve \u2014 they must be requested and approved. This gives LetItRip control over trust, quality, and platform safety as your store grows." }), _jsxs(Text, { className: "leading-relaxed", children: ["Two capabilities are enabled for every store at creation by default:", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "suggest_brands" }), " and", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "create_coupons" }), ". All others must be requested. Some require contractual agreements before they can be granted."] })] }));
 }
 // -- Section 2: Capability table ----------------------------------------------
 const CAPABILITY_GROUPS = [
@@ -50,7 +50,7 @@ const CAPABILITY_GROUPS = [
     },
 ];
 function CapabilityTable() {
-    return (_jsx(Div, { className: "space-y-6", children: CAPABILITY_GROUPS.map(({ group, items }) => (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)] mb-2", children: group }), _jsx(Div, { className: "overflow-x-auto -mx-6", children: _jsxs("table", { className: "min-w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--appkit-color-border)]", children: [_jsx("th", { className: "px-6 py-2 text-left font-semibold text-[var(--appkit-color-text)]", children: "Capability" }), _jsx("th", { className: "px-6 py-2 text-left font-semibold text-[var(--appkit-color-text)]", children: "What it unlocks" }), _jsx("th", { className: "px-6 py-2 text-left font-semibold text-[var(--appkit-color-text)] w-24", children: "Default" })] }) }), _jsx("tbody", { className: "divide-y divide-[var(--appkit-color-border)]", children: items.map(({ cap, unlocks, defaultOn }) => (_jsxs("tr", { children: [_jsx("td", { className: "px-6 py-2 font-mono text-xs text-[var(--appkit-color-text)] align-top whitespace-nowrap", children: cap }), _jsx("td", { className: "px-6 py-2 text-[var(--appkit-color-text-muted)] align-top", children: unlocks }), _jsx("td", { className: "px-6 py-2 align-top", children: defaultOn ? (_jsx("span", { className: "inline-block rounded-full bg-[var(--appkit-color-success,#16a34a)]/10 text-[var(--appkit-color-success,#16a34a)] text-xs px-2 py-0.5 font-medium", children: "On" })) : (_jsx("span", { className: "inline-block rounded-full bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] text-xs px-2 py-0.5 font-medium", children: "Off" })) })] }, cap))) })] }) })] }, group))) }));
+    return (_jsx(Stack, { gap: "lg", children: CAPABILITY_GROUPS.map(({ group, items }) => (_jsxs(Div, { children: [_jsx(Text, { className: "tracking-wide text-[var(--appkit-color-text-muted)] mb-2", size: "xs", weight: "semibold", transform: "uppercase", children: group }), _jsx(Div, { className: "overflow-x-auto -mx-6", children: _jsxs(Table, { className: "min-w-full", size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "border-b border-[var(--appkit-color-border)]", children: [_jsx(Th, { weight: "semibold", className: "text-left text-[var(--appkit-color-text)]", padding: "lg-tight", children: "Capability" }), _jsx(Th, { weight: "semibold", className: "text-left text-[var(--appkit-color-text)]", padding: "lg-tight", children: "What it unlocks" }), _jsx(Th, { weight: "semibold", className: "text-left text-[var(--appkit-color-text)] w-24", padding: "lg-tight", children: "Default" })] }) }), _jsx(Tbody, { className: "divide-y divide-[var(--appkit-color-border)]", children: items.map(({ cap, unlocks, defaultOn }) => (_jsxs(Tr, { children: [_jsx(Td, { size: "xs", className: "font-mono text-[var(--appkit-color-text)] align-top whitespace-nowrap", padding: "lg-tight", children: cap }), _jsx(Td, { className: "text-[var(--appkit-color-text-muted)] align-top", padding: "lg-tight", children: unlocks }), _jsx(Td, { className: "align-top", padding: "lg-tight", children: defaultOn ? (_jsx(Span, { className: "inline-block bg-[var(--appkit-color-success)]/10 text-[var(--appkit-color-success)]", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "On" })) : (_jsx(Span, { className: "inline-block bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "Off" })) })] }, cap))) })] }) })] }, group))) }));
 }
 // -- Section 3: Locked feature guide ------------------------------------------
 const LOCKED_FEATURES = [
@@ -86,16 +86,16 @@ const LOCKED_FEATURES = [
     },
 ];
 function LockedFeatureGuide() {
-    return (_jsx(Div, { className: "space-y-4", children: LOCKED_FEATURES.map(({ cap, missing, howToUnlock, contractRequired }) => (_jsxs(Div, { className: "rounded-lg border border-[var(--appkit-color-border)] p-4 space-y-2", children: [_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Text, { className: "font-mono text-sm font-semibold text-[var(--appkit-color-text)]", children: cap }), contractRequired && (_jsx("span", { className: "inline-block rounded-full bg-[var(--appkit-color-warning,#ca8a04)]/10 text-[var(--appkit-color-warning,#ca8a04)] text-xs px-2 py-0.5 font-medium", children: "Requires agreement" }))] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-xs font-semibold text-[var(--appkit-color-text-muted)] mb-1", children: "What you are missing:" }), _jsx("ul", { className: "pl-4 space-y-0.5", children: missing.map((item) => (_jsx("li", { className: `text-sm text-[var(--appkit-color-text-muted)] ${LIST_DISC}`, children: item }, item))) })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-xs font-semibold text-[var(--appkit-color-text-muted)] mb-1", children: "How to unlock:" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: howToUnlock })] })] }, cap))) }));
+    return (_jsx(Stack, { gap: "md", children: LOCKED_FEATURES.map(({ cap, missing, howToUnlock, contractRequired }) => (_jsxs(Stack, { className: "border border-[var(--appkit-color-border)]", gap: "sm", rounded: "lg", padding: "md", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Text, { className: "font-mono text-[var(--appkit-color-text)]", size: "sm", weight: "semibold", children: cap }), contractRequired && (_jsx(Span, { className: "inline-block bg-[var(--appkit-color-warning)]/10 text-[var(--appkit-color-warning)]", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "Requires agreement" }))] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-1", size: "xs", weight: "semibold", children: "What you are missing:" }), _jsx(Ul, { spacing: "2xs", indent: "md", children: missing.map((item) => (_jsx(Li, { textSize: "sm", color: "muted", className: LIST_DISC, children: item }, item))) })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-1", size: "xs", weight: "semibold", children: "How to unlock:" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: howToUnlock })] })] }, cap))) }));
 }
 // -- Section 4: Verified seller badge -----------------------------------------
 function VerifiedSellerSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What it means for buyers" }), _jsx(Text, { className: "leading-relaxed", children: "The Verified badge appears on your store profile page and on every listing card. It signals to buyers that LetItRip has reviewed your identity and track record. Verified sellers typically see higher conversion rates, especially on high-value items." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Requirements" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsx("li", { className: LIST_DISC, children: "Government-issued photo ID submitted to LetItRip support." }), _jsx("li", { className: LIST_DISC, children: "Store active for at least 6 months." }), _jsx("li", { className: LIST_DISC, children: "Average rating of 4.5 or above (across all reviews)." }), _jsx("li", { className: LIST_DISC, children: "At least 50 delivered orders with no outstanding fraud reports." }), _jsx("li", { className: LIST_DISC, children: "No active hard ban or store suspension in the past 12 months." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How to apply" }), _jsx(Text, { className: "leading-relaxed", children: "Open a support ticket from your store dashboard with category \"Account\" and subject \"Verified Seller Application\". Attach your government ID scan. Our team reviews within 10 business days." })] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What it means for buyers" }), _jsx(Text, { className: "leading-relaxed", children: "The Verified badge appears on your store profile page and on every listing card. It signals to buyers that LetItRip has reviewed your identity and track record. Verified sellers typically see higher conversion rates, especially on high-value items." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Requirements" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "Government-issued photo ID submitted to LetItRip support." }), _jsx(Li, { className: LIST_DISC, children: "Store active for at least 6 months." }), _jsx(Li, { className: LIST_DISC, children: "Average rating of 4.5 or above (across all reviews)." }), _jsx(Li, { className: LIST_DISC, children: "At least 50 delivered orders with no outstanding fraud reports." }), _jsx(Li, { className: LIST_DISC, children: "No active hard ban or store suspension in the past 12 months." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How to apply" }), _jsx(Text, { className: "leading-relaxed", children: "Open a support ticket from your store dashboard with category \"Account\" and subject \"Verified Seller Application\". Attach your government ID scan. Our team reviews within 10 business days." })] })] }));
 }
 // -- Section 5: Multiple stores -----------------------------------------------
 function MultipleStoresSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Text, { className: "leading-relaxed", children: ["By default, each owner account can only create one store. The", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded mx-1", children: "multiple_stores" }), "capability allows the same owner to create and manage additional stores under the same account."] }), _jsx(Alert, { variant: "info", title: "Each store is independent", children: "Multiple stores share the same owner account (Firebase Auth UID) but are separate Firestore documents with their own listings, orders, payouts, and settings. Platform fees apply per-store. Admin grants this capability after reviewing your business justification." })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Text, { className: "leading-relaxed", children: ["By default, each owner account can only create one store. The", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "multiple_stores" }), "capability allows the same owner to create and manage additional stores under the same account."] }), _jsx(Alert, { variant: "info", title: "Each store is independent", children: "Multiple stores share the same owner account (Firebase Auth UID) but are separate Firestore documents with their own listings, orders, payouts, and settings. Platform fees apply per-store. Admin grants this capability after reviewing your business justification." })] }));
 }
 export function StoreCapabilitiesGuideView(_props) {
-    return (_jsxs(Div, { className: "space-y-6 pb-10", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold text-[var(--appkit-color-text)]", children: "Capabilities Guide" }), _jsx(Text, { className: "mt-1 text-sm text-[var(--appkit-color-text-muted)]", children: "Per-store feature flags \u2014 what they unlock, defaults, and how to request access." })] }), _jsx(GuideSection, { title: "1. What are capabilities?", children: _jsx(WhatAreCapabilitiesSection, {}) }), _jsx(GuideSection, { title: "2. Capability table", children: _jsx(CapabilityTable, {}) }), _jsx(GuideSection, { title: "3. How to unlock locked features", children: _jsx(LockedFeatureGuide, {}) }), _jsx(GuideSection, { title: "4. Verified seller badge", children: _jsx(VerifiedSellerSection, {}) }), _jsx(GuideSection, { title: "5. Multiple stores", children: _jsx(MultipleStoresSection, {}) })] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Capabilities Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Per-store feature flags \u2014 what they unlock, defaults, and how to request access." })] }), _jsx(GuideSection, { title: "1. What are capabilities?", children: _jsx(WhatAreCapabilitiesSection, {}) }), _jsx(GuideSection, { title: "2. Capability table", children: _jsx(CapabilityTable, {}) }), _jsx(GuideSection, { title: "3. How to unlock locked features", children: _jsx(LockedFeatureGuide, {}) }), _jsx(GuideSection, { title: "4. Verified seller badge", children: _jsx(VerifiedSellerSection, {}) }), _jsx(GuideSection, { title: "5. Multiple stores", children: _jsx(MultipleStoresSection, {}) })] }));
 }

package/dist/features/stores/components/StoreDetailLayoutView.js

@@ -24,7 +24,7 @@ function tabLabel(base, count) {
 export async function StoreDetailLayoutView({ storeSlug, activeTab, children, }) {
     const store = await getStoreBySlug(storeSlug);
     if (!store) {
-        return (_jsx(Main, { children: _jsx(Section, { className: "py-20", children: _jsx(Container, { size: "md", children: _jsx(Text, { className: "text-center text-zinc-500 dark:text-zinc-400", children: "Store not found." }) }) }) }));
+        return (_jsx(Main, { children: _jsx(Section, { padding: "y-5xl", children: _jsx(Container, { size: "md", children: _jsx(Text, { align: "center", color: "muted", children: "Store not found." }) }) }) }));
     }
     const storeId = store?.id;
     const settings = await siteSettingsRepository.findById("global").catch(() => null);
@@ -91,5 +91,5 @@ export async function StoreDetailLayoutView({ storeSlug, activeTab, children, })
         { value: "reviews", label: tabLabel("Reviews", reviewsCount), href: String(ROUTES.PUBLIC.STORE_REVIEWS(storeSlug)) },
         { value: "about", label: "About", href: String(ROUTES.PUBLIC.STORE_ABOUT(storeSlug)) },
     ];
-    return (_jsxs(Main, { children: [_jsx(StoreHeader, { store: store }), _jsxs(Container, { size: "xl", className: "mt-6", children: [_jsx(StoreNavTabs, { tabs: tabs, activeValue: activeTab }), _jsx(Section, { className: "pt-6", children: children })] })] }));
+    return (_jsxs(Main, { children: [_jsx(StoreHeader, { store: store }), _jsxs(Container, { size: "xl", className: "mt-6", children: [_jsx(StoreNavTabs, { tabs: tabs, activeValue: activeTab }), _jsx(Section, { padding: "t-lg", children: children })] })] }));
 }

package/dist/features/stores/components/StoreFinanceGuideView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row } from "@mohasinac/appkit/ui";
 import { ArrowLeft } from "lucide-react";
-import { Alert, Div, Heading, Section, Span, Text } from "../../../ui";
+import { Alert, Code, Div, Heading, Li, Section, Span, Stack, Text, Ul } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
@@ -8,11 +9,11 @@ const SECTION_BODY = "space-y-4 text-sm text-[var(--appkit-color-text-muted)]";
 const MONO_MUTED = "font-mono text-xs text-[var(--appkit-color-text-muted)]";
 // -- Section wrapper -----------------------------------------------------------
 function GuideSection({ title, children, }) {
-    return (_jsxs(Section, { className: "rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-6 shadow-sm", children: [_jsx(Heading, { level: 2, className: "mb-4 text-lg font-semibold text-[var(--appkit-color-text)]", children: title }), children] }));
+    return (_jsxs(Section, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", shadow: "sm", padding: "lg", children: [_jsx(Heading, { level: 2, className: "mb-4 text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: title }), children] }));
 }
 // -- Section 1: Commission structure ------------------------------------------
 function CommissionSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How it works" }), _jsx(Text, { className: "leading-relaxed", children: "LetItRip deducts a platform fee from every completed order before paying out to you. The current fee rate is shown in your store Settings \u2192 Finance page and in the platform site settings. Custom commission rates are available to high-volume sellers \u2014 see the Capabilities guide for details." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Worked example" }), _jsxs(Div, { className: "rounded-lg border border-[var(--appkit-color-border)] p-4 font-mono text-xs space-y-1", children: [_jsx(Text, { className: MONO_MUTED, children: "Order total: \u20B91,000.00" }), _jsx(Text, { className: MONO_MUTED, children: "Platform fee (e.g. 5%): \u2212 \u20B950.00" }), _jsx(Text, { className: MONO_MUTED, children: "Payment processing (Razorpay ~2%): \u2212 \u20B920.00" }), _jsx(Div, { className: "border-t border-[var(--appkit-color-border)] pt-1", children: _jsx(Text, { className: "font-mono text-xs font-semibold text-[var(--appkit-color-text)]", children: "Seller receives: \u2248 \u20B9930.00" }) })] }), _jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] mt-2", children: "Exact amounts depend on the current platform fee configured in Site Settings. Razorpay charges vary by payment method (UPI is lowest)." })] }), _jsx(Alert, { variant: "info", title: "Shipping is separate", children: "Shipping costs you charge buyers are passed through in full \u2014 the platform fee applies only to the product price, not the shipping amount." })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How it works" }), _jsx(Text, { className: "leading-relaxed", children: "LetItRip deducts a platform fee from every completed order before paying out to you. The current fee rate is shown in your store Settings \u2192 Finance page and in the platform site settings. Custom commission rates are available to high-volume sellers \u2014 see the Capabilities guide for details." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Worked example" }), _jsxs(Stack, { textSize: "xs", className: "border border-[var(--appkit-color-border)] font-mono", gap: "xs", rounded: "lg", padding: "md", children: [_jsx(Text, { className: MONO_MUTED, children: "Order total: \u20B91,000.00" }), _jsx(Text, { className: MONO_MUTED, children: "Platform fee (e.g. 5%): \u2212 \u20B950.00" }), _jsx(Text, { className: MONO_MUTED, children: "Payment processing (Razorpay ~2%): \u2212 \u20B920.00" }), _jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-2xs", children: _jsx(Text, { className: "font-mono text-[var(--appkit-color-text)]", size: "xs", weight: "semibold", children: "Seller receives: \u2248 \u20B9930.00" }) })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mt-2", size: "xs", children: "Exact amounts depend on the current platform fee configured in Site Settings. Razorpay charges vary by payment method (UPI is lowest)." })] }), _jsx(Alert, { variant: "info", title: "Shipping is separate", children: "Shipping costs you charge buyers are passed through in full \u2014 the platform fee applies only to the product price, not the shipping amount." })] }));
 }
 // -- Section 2: Payout cycle --------------------------------------------------
 const PAYOUT_STATUSES = [
@@ -22,7 +23,7 @@ const PAYOUT_STATUSES = [
     { status: "FAILED", note: "Transfer failed — usually a stale UPI ID or closed account. Update payoutDetails in Settings and contact support." },
 ];
 function PayoutCycleSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "When payouts are processed" }), _jsx(Text, { className: "leading-relaxed", children: "Payouts are processed weekly on Sunday. Orders included are those that reached DELIVERED status at least 7 days before the batch date (the settlement delay). This delay ensures time for return requests and fraud checks before funds are released." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Payout statuses" }), _jsx(Div, { className: "space-y-2", children: PAYOUT_STATUSES.map(({ status, note }) => (_jsxs(Div, { className: "flex gap-3", children: [_jsx(Text, { className: "shrink-0 font-mono font-semibold text-[var(--appkit-color-text)] w-24", children: status }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: note })] }, status))) })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Minimum payout threshold" }), _jsx(Text, { className: "leading-relaxed", children: "Payouts below the minimum threshold (visible in your Finance settings) are rolled over to the next week. There is no penalty for rolling over \u2014 it accumulates until the threshold is met." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Where to view payout history" }), _jsx(Text, { className: "leading-relaxed", children: "Go to your Store Dashboard \u2192 Finance \u2192 Payouts. Each payout shows the date range, orders included, gross amount, fee deducted, and net amount received." })] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "When payouts are processed" }), _jsx(Text, { className: "leading-relaxed", children: "Payouts are processed weekly on Sunday. Orders included are those that reached DELIVERED status at least 7 days before the batch date (the settlement delay). This delay ensures time for return requests and fraud checks before funds are released." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Payout statuses" }), _jsx(Stack, { gap: "sm", children: PAYOUT_STATUSES.map(({ status, note }) => (_jsxs(Row, { gap: "3", children: [_jsx(Text, { className: "shrink-0 font-mono text-[var(--appkit-color-text)] w-24", weight: "semibold", children: status }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: note })] }, status))) })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Minimum payout threshold" }), _jsx(Text, { className: "leading-relaxed", children: "Payouts below the minimum threshold (visible in your Finance settings) are rolled over to the next week. There is no penalty for rolling over \u2014 it accumulates until the threshold is met." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Where to view payout history" }), _jsx(Text, { className: "leading-relaxed", children: "Go to your Store Dashboard \u2192 Finance \u2192 Payouts. Each payout shows the date range, orders included, gross amount, fee deducted, and net amount received." })] })] }));
 }
 // -- Section 3: Coupons -------------------------------------------------------
 const COUPON_FIELDS = [
@@ -64,16 +65,16 @@ const COUPON_FIELDS = [
     },
 ];
 function CouponsSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Admin coupons vs store coupons" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsxs("li", { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Admin coupons" }), " \u2014 created by LetItRip and apply platform-wide (all stores). You cannot create these."] }), _jsxs("li", { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Store coupons" }), " \u2014 created by you. Apply only to purchases from your store. You control the terms."] }), _jsx("li", { className: LIST_DISC, children: "Admin coupons and store coupons can stack if the admin coupon has \"Combine with seller coupons\" enabled. If not, only the better coupon is applied automatically." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Coupon field reference" }), _jsx(Div, { className: "space-y-3", children: COUPON_FIELDS.map(({ field, detail }) => (_jsxs(Div, { className: "flex gap-3", children: [_jsx(Text, { className: "shrink-0 w-32 font-semibold text-[var(--appkit-color-text)] text-sm", children: field }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] text-sm leading-relaxed", children: detail })] }, field))) })] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Admin coupons vs store coupons" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsxs(Li, { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", children: "Admin coupons" }), " \u2014 created by LetItRip and apply platform-wide (all stores). You cannot create these."] }), _jsxs(Li, { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", children: "Store coupons" }), " \u2014 created by you. Apply only to purchases from your store. You control the terms."] }), _jsx(Li, { className: LIST_DISC, children: "Admin coupons and store coupons can stack if the admin coupon has \"Combine with seller coupons\" enabled. If not, only the better coupon is applied automatically." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Coupon field reference" }), _jsx(Stack, { gap: "3", children: COUPON_FIELDS.map(({ field, detail }) => (_jsxs(Row, { gap: "3", children: [_jsx(Text, { className: "shrink-0 w-32 text-[var(--appkit-color-text)]", size: "sm", weight: "semibold", children: field }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: detail })] }, field))) })] })] }));
 }
 // -- Section 4: Promoted & featured listings ----------------------------------
 function PromotedSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "isPromoted \u2014 Deals & promoted sections" }), _jsx(Text, { className: "leading-relaxed", children: "Promoted listings appear in the Deals carousel on the homepage and in search-result promoted slots. For most stores, this flag is set by a LetItRip admin. If you want a product promoted, contact support with the product slug and reason." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "isFeatured \u2014 Featured badge & priority" }), _jsxs(Text, { className: "leading-relaxed", children: ["Featured listings get a \"Featured\" badge on their listing card and receive priority ordering in search results and category pages. Like isPromoted, this is admin-controlled for most stores. Stores with the ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "manage_promoted_listings" }), " capability can self-promote from their dashboard."] })] }), _jsx(Alert, { variant: "info", title: "Promoted placement vs sponsored listings", children: "LetItRip does not currently offer paid sponsored placements \u2014 promoted and featured flags are granted editorially by the LetItRip team based on listing quality and seller performance." })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "isPromoted \u2014 Deals & promoted sections" }), _jsx(Text, { className: "leading-relaxed", children: "Promoted listings appear in the Deals carousel on the homepage and in search-result promoted slots. For most stores, this flag is set by a LetItRip admin. If you want a product promoted, contact support with the product slug and reason." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "isFeatured \u2014 Featured badge & priority" }), _jsxs(Text, { className: "leading-relaxed", children: ["Featured listings get a \"Featured\" badge on their listing card and receive priority ordering in search results and category pages. Like isPromoted, this is admin-controlled for most stores. Stores with the ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "manage_promoted_listings" }), " capability can self-promote from their dashboard."] })] }), _jsx(Alert, { variant: "info", title: "Promoted placement vs sponsored listings", children: "LetItRip does not currently offer paid sponsored placements \u2014 promoted and featured flags are granted editorially by the LetItRip team based on listing quality and seller performance." })] }));
 }
 // -- Section 5: Taxes notice --------------------------------------------------
 function TaxesSection() {
     return (_jsxs(Div, { className: SECTION_BODY, children: [_jsx(Alert, { variant: "warning", title: "Seller tax responsibility", children: "LetItRip is a marketplace platform. Each seller operates independently and is individually responsible for applicable taxes on their sales, including GST where required by Indian tax law. LetItRip does not collect or remit GST on your behalf. Consult a qualified tax advisor to understand your obligations based on your turnover and registration status." }), _jsx(Text, { className: "leading-relaxed", children: "TCS (Tax Collected at Source) deducted by LetItRip under Section 194-O of the Income Tax Act will be reflected in your annual Form 26AS. Your gross payouts (before TCS) are visible in the Finance \u2192 Payouts dashboard." })] }));
 }
 export function StoreFinanceGuideView(_props) {
-    return (_jsxs(Div, { className: "space-y-6 pb-10", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold text-[var(--appkit-color-text)]", children: "Finance Guide" }), _jsx(Text, { className: "mt-1 text-sm text-[var(--appkit-color-text-muted)]", children: "Payouts, commissions, coupons, and promoted listings." })] }), _jsx(GuideSection, { title: "1. Commission structure", children: _jsx(CommissionSection, {}) }), _jsx(GuideSection, { title: "2. Payout cycle", children: _jsx(PayoutCycleSection, {}) }), _jsx(GuideSection, { title: "3. Coupons", children: _jsx(CouponsSection, {}) }), _jsx(GuideSection, { title: "4. Promoted & featured listings", children: _jsx(PromotedSection, {}) }), _jsx(GuideSection, { title: "5. Taxes", children: _jsx(TaxesSection, {}) })] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Finance Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Payouts, commissions, coupons, and promoted listings." })] }), _jsx(GuideSection, { title: "1. Commission structure", children: _jsx(CommissionSection, {}) }), _jsx(GuideSection, { title: "2. Payout cycle", children: _jsx(PayoutCycleSection, {}) }), _jsx(GuideSection, { title: "3. Coupons", children: _jsx(CouponsSection, {}) }), _jsx(GuideSection, { title: "4. Promoted & featured listings", children: _jsx(PromotedSection, {}) }), _jsx(GuideSection, { title: "5. Taxes", children: _jsx(TaxesSection, {}) })] }));
 }

package/dist/features/stores/components/StoreGuideHubView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Package, ShoppingBag, Wallet, Settings, Shield, Headphones, CheckCircle2, Circle, BookOpen, } from "lucide-react";
-import { Div, Heading, Text, Section } from "../../../ui";
+import { Div, Heading, Row, Section, Stack, Text } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const CLS_CHECK_ICON = "w-5 h-5 flex-shrink-0 text-emerald-500";
 const CLS_SUCCESS_BOX = "rounded-xl border border-emerald-200 bg-emerald-50 dark:bg-emerald-950/30 dark:border-emerald-800 px-5 py-4";
@@ -77,13 +77,13 @@ export function StoreGuideHubView({ store }) {
     const storeName = store?.storeName ?? "Your Store";
     const steps = buildChecklist(store);
     const completedCount = steps.filter((s) => s.done).length;
-    return (_jsxs(Div, { className: "space-y-8 pb-10", children: [_jsx(Section, { className: "rounded-2xl overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm", children: _jsxs(Div, { className: "px-6 py-8 md:px-10", style: {
-                        background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 60%,var(--appkit-color-secondary-400,#7c3aed) 100%)",
-                    }, children: [_jsxs(Div, { className: "flex items-center gap-3 mb-3", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-white/80 uppercase tracking-widest", children: "Seller Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-white mb-2", children: storeName }), _jsx(Text, { className: "text-white/80 text-base", children: "Everything you need to know about selling on LetItRip." })] }) }), _jsxs(Div, { className: "grid grid-cols-1 gap-8 lg:grid-cols-3", children: [_jsxs(Div, { className: "lg:col-span-2 space-y-4", children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold text-[var(--appkit-color-text)]", children: "Guides" }), _jsx(Div, { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: GUIDE_CARDS.map(({ Icon, title, description, href }) => (_jsxs("a", { href: href, className: "group flex flex-col gap-3 rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-5 hover:border-[var(--appkit-color-primary)] hover:shadow-md transition-all", children: [_jsxs(Div, { className: "flex items-center gap-3", children: [_jsx(Div, { className: "flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center", style: {
-                                                        background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 100%)",
-                                                    }, children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", children: title })] }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: description }), _jsx(Text, { className: "text-xs font-medium text-[var(--appkit-color-primary)] mt-auto", children: "Read guide \u2192" })] }, title))) })] }), _jsxs(Div, { className: "space-y-4", children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold text-[var(--appkit-color-text)]", children: "Getting started" }), _jsxs(Div, { className: "rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden", children: [_jsxs(Div, { className: "px-5 pt-5 pb-4 border-b border-[var(--appkit-color-border)]", children: [_jsxs(Div, { className: "flex items-center justify-between mb-2", children: [_jsxs(Text, { className: "text-sm font-medium text-[var(--appkit-color-text)]", children: [completedCount, " of ", steps.length, " complete"] }), _jsxs(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: [Math.round((completedCount / steps.length) * 100), "%"] })] }), _jsx(Div, { className: "h-1.5 rounded-full bg-[var(--appkit-color-border)]", children: _jsx(Div, { className: "h-full rounded-full transition-all", style: {
+    return (_jsxs(Stack, { gap: "xl", padding: "b-2xl", children: [_jsx(Section, { className: "overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", shadow: "sm", children: _jsxs(Div, { paddingX: "x-md-xl", paddingY: "y-xl", style: {
+                        background: "linear-gradient(135deg,var(--appkit-color-primary-700) 0%,var(--appkit-color-cobalt) 60%,var(--appkit-color-secondary-400) 100%)",
+                    }, children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", surface: "default", align: "center", justify: "center", rounded: "xl", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { color: "inverse", className: "/80 tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Seller Guide" })] }), _jsx(Heading, { color: "inverse", level: 1, className: "mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: storeName }), _jsx(Text, { color: "inverse", className: "/80", size: "base", children: "Everything you need to know about selling on LetItRip." })] }) }), _jsxs(Div, { layout: "grid", gap: "8", className: "grid-cols-1 lg:grid-cols-3", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Guides" }), _jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-1 sm:grid-cols-2", children: GUIDE_CARDS.map(({ Icon, title, description, href }) => (_jsxs("a", { href: href, className: "group flex flex-col gap-3 rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-5 hover:border-[var(--appkit-color-primary)] hover:shadow-md transition-all", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-9 h-9", align: "center", justify: "center", rounded: "lg", style: {
+                                                        background: "linear-gradient(135deg,var(--appkit-color-primary-700) 0%,var(--appkit-color-cobalt) 100%)",
+                                                    }, children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", weight: "semibold", children: title })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: description }), _jsx(Text, { className: "text-[var(--appkit-color-primary)] mt-auto", size: "xs", weight: "medium", children: "Read guide \u2192" })] }, title))) })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Getting started" }), _jsxs(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden", rounded: "xl", children: [_jsxs(Div, { className: "px-5 pt-5 border-b border-[var(--appkit-color-border)]", padding: "b-md", children: [_jsxs(Row, { className: "mb-2", align: "center", justify: "between", children: [_jsxs(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "medium", children: [completedCount, " of ", steps.length, " complete"] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: [Math.round((completedCount / steps.length) * 100), "%"] })] }), _jsx(Div, { className: "h-1.5 bg-[var(--appkit-color-border)]", rounded: "full", children: _jsx(Div, { className: "h-full transition-all", rounded: "full", style: {
                                                         width: `${Math.round((completedCount / steps.length) * 100)}%`,
-                                                        background: "linear-gradient(90deg,var(--appkit-color-primary-700,#4f46e5),var(--appkit-color-cobalt,#2563eb))",
+                                                        background: "linear-gradient(90deg,var(--appkit-color-primary-700),var(--appkit-color-cobalt))",
                                                     } }) })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)]", children: steps.map(({ label, done, href }) => (_jsxs("a", { href: done ? "#" : href, "aria-disabled": done, className: `flex items-center gap-3 px-5 py-3.5 text-sm transition-colors ${done
                                                 ? "cursor-default"
                                                 : "hover:bg-[var(--appkit-color-border)]/30"}`, children: [done ? (_jsx(CheckCircle2, { className: CLS_CHECK_ICON })) : (_jsx(Circle, { className: "w-5 h-5 flex-shrink-0 text-[var(--appkit-color-text-muted)]" })), _jsx(Text, { className: `leading-snug ${done

package/dist/features/stores/components/StoreHeader.js

@@ -6,16 +6,18 @@ import { StoreScopedSearch } from "./StoreScopedSearch";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_AVATAR = "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold text-2xl shadow-sm";
-const CLS_STARS = "inline-flex items-center gap-1 text-amber-500";
-const CLS_FOLLOW_BTN = "rounded-lg border border-orange-500 px-4 py-2 text-sm font-medium text-orange-500 hover:bg-orange-50 transition-colors";
-const CLS_WARN_BANNER = "mt-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 px-3 py-2 text-sm text-yellow-700 dark:text-yellow-300";
+const CLS_AVATAR = "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-warning-surface dark:bg-warning-surface flex items-center justify-center text-warning dark:text-warning font-bold text-2xl shadow-sm";
+const CLS_STARS = "inline-flex items-center gap-1 text-warning";
+const CLS_FOLLOW_BTN = "rounded-lg border border-warning px-4 py-2 text-sm font-medium text-warning hover:bg-warning-surface transition-colors";
+const CLS_WARN_BANNER = "mt-3 rounded-lg bg-warning-surface dark:bg-warning-surface border border-warning dark:border-warning px-3 py-2 text-sm text-warning dark:text-warning";
 export function StoreHeader({ store, labels = {}, onFollow, className = "", }) {
-    return (_jsxs(Section, { surface: "default", className: `border-b border-gray-200 dark:border-slate-700 ${className}`, children: [store.storeBannerURL && (_jsx(Div, { className: `h-40 md:h-56 ${__O.hidden} bg-gray-100 dark:bg-slate-800`, children: _jsx(Div, { role: "img", "aria-label": `${store.storeName} banner`, className: "h-full w-full bg-center bg-cover", 
+    return (_jsxs(Section, { surface: "default", border: "bottom", className: className, children: [store.storeBannerURL && (
+            // audit-variant-ok: banner Div — h-40/md:h-56 responsive height ladder + bg-gray-100 placeholder while banner loads
+            _jsx(Div, { className: `h-40 md:h-56 ${__O.hidden} bg-gray-100 dark:bg-slate-800`, children: _jsx(Div, { role: "img", "aria-label": `${store.storeName} banner`, className: "h-full w-full bg-center bg-cover", 
                     // audit-inline-style-ok: dynamic image URL
-                    style: { backgroundImage: `url(${store.storeBannerURL})` } }) })), _jsxs(Div, { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4", children: [_jsxs(Div, { className: "flex items-end gap-4", children: [store.storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": store.storeName, className: "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-center bg-cover shadow-sm", 
+                    style: { backgroundImage: `url(${store.storeBannerURL})` } }) })), _jsxs(Div, { paddingX: "x-page", className: "max-w-7xl mx-auto", padding: "y-md", children: [_jsxs(Row, { align: "end", gap: "md", children: [store.storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": store.storeName, className: "-mt-8 h-16 w-16 border-2 border-white bg-center bg-cover", rounded: "xl", shadow: "sm", 
                                 // audit-inline-style-ok: dynamic image URL
-                                style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: CLS_AVATAR, children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Div, { className: "flex flex-wrap items-center gap-2 mb-0.5", children: [_jsx(Heading, { level: 1, className: "text-xl font-bold text-gray-900 dark:text-zinc-100", children: store.storeName }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { size: "sm", weight: "medium", className: CLS_STARS, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Row, { className: "gap-3 text-xs text-gray-500 dark:text-zinc-400 mb-0.5", children: [store.category && _jsx(Span, { className: "capitalize", children: store.category }), store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { children: [store.totalReviews, " ", labels.reviews ?? "reviews"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] }))] }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "mt-0.5" }))] }), _jsxs(Row, { gap: "sm", align: "center", className: "shrink-0", children: [_jsx(ShareButton, { title: store.storeName }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: CLS_FOLLOW_BTN, children: labels.follow ?? "Follow" }))] })] }), store.isVacationMode && (_jsx(Text, { className: CLS_WARN_BANNER, children: store.vacationMessage ??
+                                style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: CLS_AVATAR, children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-0.5", align: "center", gap: "sm", wrap: true, children: [_jsx(Heading, { level: 1, className: "text-gray-900", size: "xl", weight: "bold", children: store.storeName }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { size: "sm", weight: "medium", className: CLS_STARS, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Row, { textSize: "xs", className: "text-gray-500 mb-0.5", gap: "3", children: [store.category && _jsx(Span, { transform: "capitalize", children: store.category }), store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { children: [store.totalReviews, " ", labels.reviews ?? "reviews"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] }))] }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "mt-0.5" }))] }), _jsxs(Row, { gap: "sm", align: "center", className: "shrink-0", children: [_jsx(ShareButton, { title: store.storeName }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: CLS_FOLLOW_BTN, children: labels.follow ?? "Follow" }))] })] }), store.isVacationMode && (_jsx(Text, { className: CLS_WARN_BANNER, children: store.vacationMessage ??
                             labels.vacationMode ??
                             "Store is on vacation mode" })), _jsx(Div, { className: "mt-3", children: _jsx(StoreScopedSearch, { storeId: store.storeSlug, storeName: store.storeName }) })] })] }));
 }