@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -1,12 +1,13 @@
 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, Div, Heading, Li, 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";
 // -- 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: Comparison table -----------------------------------------------
 const LISTING_TYPES = [
@@ -40,7 +41,7 @@ function ListingTypesTable() {
         { label: "Required fields", keys: ["requiredFields"] },
         { label: "Ideal use case", keys: ["idealUseCase"] },
     ];
-    return (_jsx(Div, { className: "overflow-x-auto -mx-6", children: _jsxs("table", { className: "min-w-full text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "border-b border-[var(--appkit-color-border)]", children: HEADERS.map((h) => (_jsx("th", { className: "px-6 py-3 text-left font-semibold text-[var(--appkit-color-text)]", children: h }, h))) }) }), _jsx("tbody", { className: "divide-y divide-[var(--appkit-color-border)]", children: ROWS.map(({ label, keys }) => (_jsxs("tr", { children: [_jsx("td", { className: "px-6 py-3 font-medium text-[var(--appkit-color-text-muted)] whitespace-nowrap", children: label }), LISTING_TYPES.map((t) => (_jsx("td", { className: "px-6 py-3 text-[var(--appkit-color-text)] align-top", children: t[keys[0]] }, t.type)))] }, label))) })] }) }));
+    return (_jsx(Div, { className: "overflow-x-auto -mx-6", children: _jsxs(Table, { className: "min-w-full", size: "sm", children: [_jsx(Thead, { children: _jsx(Tr, { className: "border-b border-[var(--appkit-color-border)]", children: HEADERS.map((h) => (_jsx(Th, { weight: "semibold", padding: "lg-3", className: "text-left text-[var(--appkit-color-text)]", children: h }, h))) }) }), _jsx(Tbody, { className: "divide-y divide-[var(--appkit-color-border)]", children: ROWS.map(({ label, keys }) => (_jsxs(Tr, { children: [_jsx(Td, { weight: "medium", padding: "lg-3", className: "text-[var(--appkit-color-text-muted)] whitespace-nowrap", children: label }), LISTING_TYPES.map((t) => (_jsx(Td, { padding: "lg-3", className: "text-[var(--appkit-color-text)] align-top", children: t[keys[0]] }, t.type)))] }, label))) })] }) }));
 }
 // -- Section 2: Standard product walkthrough -----------------------------------
 const STANDARD_STEPS = [
@@ -87,29 +88,29 @@ const STANDARD_STEPS = [
     },
 ];
 function StandardWalkthrough() {
-    return (_jsx(Div, { className: "space-y-5", children: STANDARD_STEPS.map(({ step, items }) => (_jsxs(Div, { children: [_jsx(Text, { className: "mb-2 font-semibold text-[var(--appkit-color-text)]", children: step }), _jsx("ul", { className: "space-y-1.5 pl-5", children: items.map((item) => (_jsx("li", { className: "list-disc text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: item }, item))) })] }, step))) }));
+    return (_jsx(Stack, { gap: "5", children: STANDARD_STEPS.map(({ step, items }) => (_jsxs(Div, { children: [_jsx(Text, { className: "mb-2 text-[var(--appkit-color-text)]", weight: "semibold", children: step }), _jsx(Ul, { className: "space-y-1.5", indent: "lg", children: items.map((item) => (_jsx(Li, { textSize: "sm", color: "muted", className: LIST_DISC, children: item }, item))) })] }, step))) }));
 }
 // -- Section 3: Auction walkthrough --------------------------------------------
 function AuctionWalkthrough() {
-    return (_jsxs(Div, { className: "space-y-4 text-sm text-[var(--appkit-color-text-muted)]", children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Reserve price vs starting bid" }), _jsxs(Text, { className: "leading-relaxed", children: ["The ", _jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "starting bid" }), " is the minimum first bid a buyer can place. The ", _jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "reserve price" }), " is the minimum price you are willing to accept \u2014 if bidding does not reach the reserve, you are not obligated to sell. The reserve is hidden from buyers."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Bid increment" }), _jsx(Div, { className: "overflow-x-auto", children: _jsxs("table", { className: "text-xs min-w-[320px]", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--appkit-color-border)]", children: [_jsx("th", { className: "py-2 pr-4 text-left font-semibold text-[var(--appkit-color-text)]", children: "Current high bid" }), _jsx("th", { className: "py-2 text-left font-semibold text-[var(--appkit-color-text)]", children: "Minimum increment" })] }) }), _jsx("tbody", { className: "divide-y divide-[var(--appkit-color-border)]", children: [
+    return (_jsxs(Stack, { textSize: "sm", className: "text-[var(--appkit-color-text-muted)]", gap: "md", children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Reserve price vs starting bid" }), _jsxs(Text, { className: "leading-relaxed", children: ["The ", _jsx(Span, { weight: "bold", children: "starting bid" }), " is the minimum first bid a buyer can place. The ", _jsx(Span, { weight: "bold", children: "reserve price" }), " is the minimum price you are willing to accept \u2014 if bidding does not reach the reserve, you are not obligated to sell. The reserve is hidden from buyers."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Bid increment" }), _jsx(Div, { className: "overflow-x-auto", children: _jsxs(Table, { className: "min-w-[320px]", size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "border-b border-[var(--appkit-color-border)]", children: [_jsx(Th, { weight: "semibold", align: "left", paddingSide: "pr-md", className: "text-[var(--appkit-color-text)]", padding: "xs-tall", children: "Current high bid" }), _jsx(Th, { weight: "semibold", align: "left", className: "text-[var(--appkit-color-text)]", padding: "xs-tall", children: "Minimum increment" })] }) }), _jsx(Tbody, { className: "divide-y divide-[var(--appkit-color-border)]", children: [
                                         ["₹0 – ₹499", "₹10"],
                                         ["₹500 – ₹1,999", "₹25"],
                                         ["₹2,000 – ₹9,999", "₹100"],
                                         ["₹10,000 – ₹49,999", "₹500"],
                                         ["₹50,000+", "₹1,000"],
-                                    ].map(([range, inc]) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 pr-4", children: range }), _jsx("td", { className: "py-2", children: inc })] }, range))) })] }) })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Auction end" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsx("li", { className: LIST_DISC, children: "Winner receives an email and has 48 hours to complete payment." }), _jsx("li", { className: LIST_DISC, children: "If payment is not completed within 48 hours, the order is auto-cancelled." }), _jsx("li", { className: LIST_DISC, children: "The next-highest bidder may be offered the item (if enabled in your auction settings)." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Editing a live auction" }), _jsx(Text, { className: "leading-relaxed", children: "Once a bid has been placed, you cannot change the reserve price or starting bid. You can edit the title, description, and images at any time." })] })] }));
+                                    ].map(([range, inc]) => (_jsxs(Tr, { children: [_jsx(Td, { paddingSide: "pr-md", padding: "xs-tall", children: range }), _jsx(Td, { padding: "xs-tall", children: inc })] }, range))) })] }) })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Auction end" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "Winner receives an email and has 48 hours to complete payment." }), _jsx(Li, { className: LIST_DISC, children: "If payment is not completed within 48 hours, the order is auto-cancelled." }), _jsx(Li, { className: LIST_DISC, children: "The next-highest bidder may be offered the item (if enabled in your auction settings)." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Editing a live auction" }), _jsx(Text, { className: "leading-relaxed", children: "Once a bid has been placed, you cannot change the reserve price or starting bid. You can edit the title, description, and images at any time." })] })] }));
 }
 // -- Section 4: Pre-order walkthrough ------------------------------------------
 function PreorderWalkthrough() {
-    return (_jsxs(Div, { className: "space-y-4 text-sm text-[var(--appkit-color-text-muted)]", children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Deposit mechanic" }), _jsxs(Text, { className: "leading-relaxed", children: ["Set a ", _jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "deposit percentage" }), " (e.g. 20%). Buyers pay the deposit at checkout. The balance is collected when the item arrives and you mark the pre-order ready. Buyers see both amounts clearly on the checkout page."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Expected delivery date" }), _jsx(Text, { className: "leading-relaxed", children: "Set a realistic estimate. Buyers rely on this to decide whether to pre-order. You can update the date later, but repeated delays hurt your store rating." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "\"Confirmed supplier\" requirement" }), _jsx(Text, { className: "leading-relaxed", children: "Only list pre-orders for items you have confirmed supply for \u2014 e.g. you have placed a purchase order with a distributor or manufacturer. Speculative pre-orders without supplier confirmation violate platform rules and may result in store suspension." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Cancellation rules" }), _jsx(Text, { className: "leading-relaxed", children: "Buyers can cancel a pre-order within 24 hours of placing it. After 24 hours, cancellation requires seller approval. If you cannot fulfill the pre-order, initiate cancellation promptly \u2014 the deposit is refunded automatically." })] })] }));
+    return (_jsxs(Stack, { textSize: "sm", className: "text-[var(--appkit-color-text-muted)]", gap: "md", children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Deposit mechanic" }), _jsxs(Text, { className: "leading-relaxed", children: ["Set a ", _jsx(Span, { weight: "bold", children: "deposit percentage" }), " (e.g. 20%). Buyers pay the deposit at checkout. The balance is collected when the item arrives and you mark the pre-order ready. Buyers see both amounts clearly on the checkout page."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Expected delivery date" }), _jsx(Text, { className: "leading-relaxed", children: "Set a realistic estimate. Buyers rely on this to decide whether to pre-order. You can update the date later, but repeated delays hurt your store rating." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "\"Confirmed supplier\" requirement" }), _jsx(Text, { className: "leading-relaxed", children: "Only list pre-orders for items you have confirmed supply for \u2014 e.g. you have placed a purchase order with a distributor or manufacturer. Speculative pre-orders without supplier confirmation violate platform rules and may result in store suspension." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Cancellation rules" }), _jsx(Text, { className: "leading-relaxed", children: "Buyers can cancel a pre-order within 24 hours of placing it. After 24 hours, cancellation requires seller approval. If you cannot fulfill the pre-order, initiate cancellation promptly \u2014 the deposit is refunded automatically." })] })] }));
 }
 // -- Section 5: Product status lifecycle ---------------------------------------
 const STATUS_LIFECYCLE = `
 DRAFT ──────────────────────────────────► PUBLISHED
-  │                                           │
-  │    (seller publishes)        (seller archives / auto-archive)
-  │                                           │
-  └──────────────────────────────────────► ARCHIVED
+ │ │
+ │ (seller publishes) (seller archives / auto-archive)
+ │ │
+ └──────────────────────────────────────► ARCHIVED
 
 PUBLISHED ──► (buyer places bid / buys) ──► SOLD (auction only)
 `;
@@ -120,7 +121,7 @@ const STATUS_NOTES = [
     { status: "SOLD", note: "Auction only — marked when the winning bid is confirmed paid." },
 ];
 function StatusLifecycle() {
-    return (_jsxs(Div, { className: "space-y-4", children: [_jsx(Div, { className: "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-subtle,var(--appkit-color-border))/20] p-4 font-mono text-xs text-[var(--appkit-color-text-muted)] overflow-x-auto whitespace-pre", children: STATUS_LIFECYCLE }), _jsx(Div, { className: "space-y-2", children: STATUS_NOTES.map(({ status, note }) => (_jsxs(Div, { className: "flex gap-3 text-sm", 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))) }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Live auctions with at least one bid cannot be taken to ARCHIVED until the auction ends." })] }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Div, { textSize: "xs", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-subtle,var(--appkit-color-border))/20] font-mono text-[var(--appkit-color-text-muted)] overflow-x-auto whitespace-pre", rounded: "lg", padding: "md", children: STATUS_LIFECYCLE }), _jsx(Stack, { gap: "sm", children: STATUS_NOTES.map(({ status, note }) => (_jsxs(Row, { textSize: "sm", 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))) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Live auctions with at least one bid cannot be taken to ARCHIVED until the auction ends." })] }));
 }
 // -- Section 6: Media guide ----------------------------------------------------
 const MEDIA_TIPS = [
@@ -132,7 +133,7 @@ const MEDIA_TIPS = [
     { label: "Video", detail: "Add a YouTube video ID to embed an unboxing or showcase. Not a replacement for photos." },
 ];
 function MediaGuide() {
-    return (_jsx(Div, { className: "space-y-3", children: MEDIA_TIPS.map(({ label, detail }) => (_jsxs(Div, { className: "flex gap-3 text-sm", children: [_jsx(Text, { className: "shrink-0 w-28 font-semibold text-[var(--appkit-color-text)]", children: label }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", children: detail })] }, label))) }));
+    return (_jsx(Stack, { gap: "3", children: MEDIA_TIPS.map(({ label, detail }) => (_jsxs(Row, { textSize: "sm", gap: "3", children: [_jsx(Text, { className: "shrink-0 w-28 text-[var(--appkit-color-text)]", weight: "semibold", children: label }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", children: detail })] }, label))) }));
 }
 // -- Section 7: Common mistakes ------------------------------------------------
 const MISTAKES = [
@@ -144,8 +145,8 @@ const MISTAKES = [
     "Forgetting to configure shipping before publishing. Orders without a shipping method cannot be fulfilled.",
 ];
 function CommonMistakes() {
-    return (_jsx(Alert, { variant: "warning", title: "Common mistakes to avoid", children: _jsx("ul", { className: "mt-2 space-y-2 pl-4", children: MISTAKES.map((m) => (_jsx("li", { className: "list-disc text-sm leading-relaxed", children: m }, m))) }) }));
+    return (_jsx(Alert, { variant: "warning", title: "Common mistakes to avoid", children: _jsx(Ul, { className: "mt-2", spacing: "comfortable", indent: "md", children: MISTAKES.map((m) => (_jsx(Li, { textSize: "sm", className: LIST_DISC, children: m }, m))) }) }));
 }
 export function StoreListingsGuideView(_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: "Listings Guide" }), _jsx(Text, { className: "mt-1 text-sm text-[var(--appkit-color-text-muted)]", children: "Products, auctions, and pre-orders \u2014 create and manage your listings." })] }), _jsx(GuideSection, { title: "1. Three listing types", children: _jsx(ListingTypesTable, {}) }), _jsx(GuideSection, { title: "2. Standard product walkthrough", children: _jsx(StandardWalkthrough, {}) }), _jsx(GuideSection, { title: "3. Auction walkthrough", children: _jsx(AuctionWalkthrough, {}) }), _jsx(GuideSection, { title: "4. Pre-order walkthrough", children: _jsx(PreorderWalkthrough, {}) }), _jsx(GuideSection, { title: "5. Product status lifecycle", children: _jsx(StatusLifecycle, {}) }), _jsx(GuideSection, { title: "6. Media guide", children: _jsx(MediaGuide, {}) }), _jsx(GuideSection, { title: "7. Common mistakes", children: _jsx(CommonMistakes, {}) })] }));
+    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: "Listings Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Products, auctions, and pre-orders \u2014 create and manage your listings." })] }), _jsx(GuideSection, { title: "1. Three listing types", children: _jsx(ListingTypesTable, {}) }), _jsx(GuideSection, { title: "2. Standard product walkthrough", children: _jsx(StandardWalkthrough, {}) }), _jsx(GuideSection, { title: "3. Auction walkthrough", children: _jsx(AuctionWalkthrough, {}) }), _jsx(GuideSection, { title: "4. Pre-order walkthrough", children: _jsx(PreorderWalkthrough, {}) }), _jsx(GuideSection, { title: "5. Product status lifecycle", children: _jsx(StatusLifecycle, {}) }), _jsx(GuideSection, { title: "6. Media guide", children: _jsx(MediaGuide, {}) }), _jsx(GuideSection, { title: "7. Common mistakes", children: _jsx(CommonMistakes, {}) })] }));
 }

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

@@ -5,7 +5,7 @@ export function StoreNavTabs({ tabs, activeValue, onTabChange, renderTabBar, cla
     if (renderTabBar) {
         return _jsx(_Fragment, { children: renderTabBar(tabs, activeValue, handleChange) });
     }
-    return (_jsx(Div, { role: "tablist", className: `flex gap-2 border-b border-neutral-200 dark:border-slate-700 overflow-x-auto ${className}`, children: tabs.map((tab) => tab.href ? (_jsx("a", { href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
+    return (_jsx(Div, { layout: "flex", gap: "2", role: "tablist", border: "bottom", className: `overflow-x-auto ${className}`, children: tabs.map((tab) => tab.href ? (_jsx("a", { href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
                 ? "border-primary text-primary"
                 : "border-transparent text-neutral-500 dark:text-zinc-400 hover:text-neutral-800 dark:hover:text-zinc-200"}`, children: tab.label }, tab.value)) : (_jsx("button", { type: "button", role: "tab", "aria-selected": activeValue === tab.value, onClick: () => handleChange(tab.value), className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
                 ? "border-primary text-primary"

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

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
-import { Accordion, Alert, Div, Heading, Section, Span, Text } from "../../../ui";
+import { Accordion, Alert, Code, Div, Heading, Li, Ol, 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: Order lifecycle ------------------------------------------------
 const STATUS_LIFECYCLE = `
 PENDING ──► PROCESSING ──► SHIPPED ──► DELIVERED
-   │              │              │
-   └──► CANCELLED │              └──► RETURN_REQUESTED ──► REFUNDED
-                  │
-                  └──► CANCELLED
+ │ │ │
+ └──► CANCELLED │ └──► RETURN_REQUESTED ──► REFUNDED
+ │
+ └──► CANCELLED
 `;
 const STATUS_ROWS = [
     {
@@ -55,7 +55,7 @@ const STATUS_ROWS = [
     },
 ];
 function OrderLifecycle() {
-    return (_jsxs(Div, { className: "space-y-4", children: [_jsx(Div, { className: "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-subtle,var(--appkit-color-border))/20] p-4 font-mono text-xs text-[var(--appkit-color-text-muted)] overflow-x-auto whitespace-pre", children: STATUS_LIFECYCLE }), _jsx(Div, { className: "space-y-2", children: STATUS_ROWS.map(({ status, meaning, action }) => (_jsxs(Div, { className: "rounded-lg border border-[var(--appkit-color-border)] p-3 text-sm", children: [_jsxs(Div, { className: "flex items-center gap-2 mb-1", children: [_jsx(Text, { className: "font-mono font-semibold text-[var(--appkit-color-text)] w-28 shrink-0", children: status }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: meaning })] }), _jsxs(Text, { className: "pl-30 text-[var(--appkit-color-text-muted)] italic text-xs", children: ["\u2192 ", action] })] }, status))) })] }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Div, { textSize: "xs", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-subtle,var(--appkit-color-border))/20] font-mono text-[var(--appkit-color-text-muted)] overflow-x-auto whitespace-pre", rounded: "lg", padding: "md", children: STATUS_LIFECYCLE }), _jsx(Stack, { gap: "sm", children: STATUS_ROWS.map(({ status, meaning, action }) => (_jsxs(Div, { textSize: "sm", className: "border border-[var(--appkit-color-border)]", rounded: "lg", padding: "sm", children: [_jsxs(Row, { className: "mb-1", align: "center", gap: "sm", children: [_jsx(Text, { className: "font-mono text-[var(--appkit-color-text)] w-28 shrink-0", weight: "semibold", children: status }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: meaning })] }), _jsxs(Text, { className: "pl-30 text-[var(--appkit-color-text-muted)] italic", size: "xs", children: ["\u2192 ", action] })] }, status))) })] }));
 }
 // -- Section 2: Processing an order -------------------------------------------
 const PROCESSING_STEPS = [
@@ -68,7 +68,7 @@ const PROCESSING_STEPS = [
     "Share any additional tracking link in the order notes if the carrier app is easier to use.",
 ];
 function ProcessingWalkthrough() {
-    return (_jsx("ol", { className: "space-y-3 pl-5", children: PROCESSING_STEPS.map((step, i) => (_jsx("li", { className: "list-decimal text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: step }, i))) }));
+    return (_jsx(Ol, { spacing: "loose", indent: "lg", children: PROCESSING_STEPS.map((step, i) => (_jsx(Li, { textSize: "sm", color: "muted", className: "list-decimal leading-relaxed", children: step }, i))) }));
 }
 // -- Section 3: Supported carriers --------------------------------------------
 const CARRIERS = [
@@ -81,19 +81,19 @@ const CARRIERS = [
     { name: "Shadowfax", sla: "1–3 business days — good for urban same-day" },
 ];
 function CarriersSection() {
-    return (_jsxs(Div, { className: "space-y-3", children: [_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Any carrier is accepted \u2014 enter the tracking number manually in the order detail. Buyers receive the tracking number as entered; they look it up on the carrier's website." }), _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-3 text-left font-semibold text-[var(--appkit-color-text)]", children: "Carrier" }), _jsx("th", { className: "px-6 py-3 text-left font-semibold text-[var(--appkit-color-text)]", children: "Typical SLA" })] }) }), _jsx("tbody", { className: "divide-y divide-[var(--appkit-color-border)]", children: CARRIERS.map(({ name, sla }) => (_jsxs("tr", { children: [_jsx("td", { className: "px-6 py-3 font-medium text-[var(--appkit-color-text)]", children: name }), _jsx("td", { className: "px-6 py-3 text-[var(--appkit-color-text-muted)]", children: sla })] }, name))) })] }) }), _jsx(Alert, { variant: "info", title: "Tip: insurance for high-value shipments", children: "For items above \u20B95,000, consider using a carrier that offers shipment insurance (Blue Dart, Delhivery Premium). Document the item with photos before sealing the package \u2014 this is your evidence if a damage claim arises." })] }));
+    return (_jsxs(Stack, { gap: "3", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Any carrier is accepted \u2014 enter the tracking number manually in the order detail. Buyers receive the tracking number as entered; they look it up on the carrier's website." }), _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", padding: "lg-3", className: "text-left text-[var(--appkit-color-text)]", children: "Carrier" }), _jsx(Th, { weight: "semibold", padding: "lg-3", className: "text-left text-[var(--appkit-color-text)]", children: "Typical SLA" })] }) }), _jsx(Tbody, { className: "divide-y divide-[var(--appkit-color-border)]", children: CARRIERS.map(({ name, sla }) => (_jsxs(Tr, { children: [_jsx(Td, { weight: "medium", padding: "lg-3", className: "text-[var(--appkit-color-text)]", children: name }), _jsx(Td, { padding: "lg-3", className: "text-[var(--appkit-color-text-muted)]", children: sla })] }, name))) })] }) }), _jsx(Alert, { variant: "info", title: "Tip: insurance for high-value shipments", children: "For items above \u20B95,000, consider using a carrier that offers shipment insurance (Blue Dart, Delhivery Premium). Document the item with photos before sealing the package \u2014 this is your evidence if a damage claim arises." })] }));
 }
 // -- Section 4: Cancellations -------------------------------------------------
 function CancellationsSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Who can cancel" }), _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: "Buyer" }), " \u2014 can self-cancel any time before the order reaches SHIPPED status."] }), _jsxs("li", { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Seller (you)" }), " \u2014 can cancel any time before SHIPPED (e.g. item found damaged during packaging)."] }), _jsxs("li", { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "LetItRip admin" }), " \u2014 can force-cancel at any status for policy violations or unresolved disputes."] })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Refund timeline" }), _jsxs(Text, { className: "leading-relaxed", children: ["Cancellation triggers an automatic Razorpay refund. Funds typically reach the buyer in", _jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: " 3\u20137 business days" }), " depending on the payment method (UPI is usually 1\u20132 business days)."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Already shipped?" }), _jsx(Text, { className: "leading-relaxed", children: "If you have already dispatched the item but the order is still PROCESSING (tracking not yet entered), enter the tracking number and mark it SHIPPED first \u2014 then contact the buyer via order notes. Do not cancel after shipping; work with the buyer to return the item through the normal return flow." })] }), _jsx(Alert, { variant: "warning", title: "Repeated cancellations affect your rating", children: "Cancelling more than 5% of your orders per month will reduce your store rating and may result in listing restrictions. Only cancel if you genuinely cannot fulfil \u2014 never as a price-change workaround." })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Who can cancel" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsxs(Li, { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", children: "Buyer" }), " \u2014 can self-cancel any time before the order reaches SHIPPED status."] }), _jsxs(Li, { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", children: "Seller (you)" }), " \u2014 can cancel any time before SHIPPED (e.g. item found damaged during packaging)."] }), _jsxs(Li, { className: LIST_DISC, children: [_jsx(Span, { weight: "bold", children: "LetItRip admin" }), " \u2014 can force-cancel at any status for policy violations or unresolved disputes."] })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Refund timeline" }), _jsxs(Text, { className: "leading-relaxed", children: ["Cancellation triggers an automatic Razorpay refund. Funds typically reach the buyer in", _jsx(Span, { weight: "bold", children: " 3\u20137 business days" }), " depending on the payment method (UPI is usually 1\u20132 business days)."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Already shipped?" }), _jsx(Text, { className: "leading-relaxed", children: "If you have already dispatched the item but the order is still PROCESSING (tracking not yet entered), enter the tracking number and mark it SHIPPED first \u2014 then contact the buyer via order notes. Do not cancel after shipping; work with the buyer to return the item through the normal return flow." })] }), _jsx(Alert, { variant: "warning", title: "Repeated cancellations affect your rating", children: "Cancelling more than 5% of your orders per month will reduce your store rating and may result in listing restrictions. Only cancel if you genuinely cannot fulfil \u2014 never as a price-change workaround." })] }));
 }
 // -- Section 5: Return requests -----------------------------------------------
 function ReturnsSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "When a buyer can raise a return" }), _jsxs(Text, { className: "leading-relaxed", children: ["Buyers can open a return request within the ", _jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "return window" }), " after the order is marked DELIVERED. The default return window is 7 days. Stores with the ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "extended_return_window" }), " capability can offer 30 days."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What you see" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsx("li", { className: LIST_DISC, children: "The buyer's reason for return (pre-defined category + optional description)." }), _jsx("li", { className: LIST_DISC, children: "Photos of the item as received." }), _jsx("li", { className: LIST_DISC, children: "A 3-day SLA to respond before LetItRip mediates." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Accepting a return" }), _jsx(Text, { className: "leading-relaxed", children: "Click \"Accept return\" in the order detail. The buyer will receive a return shipping label or instructions. Once the item is received by you and you confirm it, the refund is triggered automatically via Razorpay. The payout for this order is withheld." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Rejecting a return" }), _jsx(Text, { className: "leading-relaxed", children: "You can reject a return request with a reason. If the buyer disagrees, they can escalate to LetItRip support. LetItRip will mediate \u2014 if the evidence supports the buyer, the return will be approved regardless of your rejection. Unjustified rejections count against your seller rating." })] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "When a buyer can raise a return" }), _jsxs(Text, { className: "leading-relaxed", children: ["Buyers can open a return request within the ", _jsx(Span, { weight: "bold", children: "return window" }), " after the order is marked DELIVERED. The default return window is 7 days. Stores with the ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "extended_return_window" }), " capability can offer 30 days."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What you see" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "The buyer's reason for return (pre-defined category + optional description)." }), _jsx(Li, { className: LIST_DISC, children: "Photos of the item as received." }), _jsx(Li, { className: LIST_DISC, children: "A 3-day SLA to respond before LetItRip mediates." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Accepting a return" }), _jsx(Text, { className: "leading-relaxed", children: "Click \"Accept return\" in the order detail. The buyer will receive a return shipping label or instructions. Once the item is received by you and you confirm it, the refund is triggered automatically via Razorpay. The payout for this order is withheld." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Rejecting a return" }), _jsx(Text, { className: "leading-relaxed", children: "You can reject a return request with a reason. If the buyer disagrees, they can escalate to LetItRip support. LetItRip will mediate \u2014 if the evidence supports the buyer, the return will be approved regardless of your rejection. Unjustified rejections count against your seller rating." })] })] }));
 }
 // -- Section 6: Auction orders ------------------------------------------------
 function AuctionOrdersSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Payment window" }), _jsxs(Text, { className: "leading-relaxed", children: ["Auction winners have ", _jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "48 hours" }), " from auction end to complete payment. You will receive a notification when the auction closes and again when the winner pays."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "If the winner does not pay" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsx("li", { className: LIST_DISC, children: "The order is automatically cancelled after 48 hours." }), _jsx("li", { className: LIST_DISC, children: "You are notified. The winner may receive a bid restriction on their account." }), _jsx("li", { className: LIST_DISC, children: "If \"offer to next bidder\" is enabled in your auction settings, the next-highest bidder is contacted automatically." }), _jsx("li", { className: LIST_DISC, children: "You can re-list the item immediately." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Fulfilment after payment" }), _jsx(Text, { className: "leading-relaxed", children: "Once the auction order is paid, it enters PENDING status \u2014 the same fulfilment flow as a standard order applies. Process and ship within your stated dispatch time." })] }), _jsx(Alert, { variant: "info", title: "Auction orders cannot be cancelled by the buyer", children: "Unlike standard orders, auction orders cannot be self-cancelled by the buyer after payment. If a buyer requests a cancel, it requires seller approval. Treat winning bids as binding commitments." })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Payment window" }), _jsxs(Text, { className: "leading-relaxed", children: ["Auction winners have ", _jsx(Span, { weight: "bold", children: "48 hours" }), " from auction end to complete payment. You will receive a notification when the auction closes and again when the winner pays."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "If the winner does not pay" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "The order is automatically cancelled after 48 hours." }), _jsx(Li, { className: LIST_DISC, children: "You are notified. The winner may receive a bid restriction on their account." }), _jsx(Li, { className: LIST_DISC, children: "If \"offer to next bidder\" is enabled in your auction settings, the next-highest bidder is contacted automatically." }), _jsx(Li, { className: LIST_DISC, children: "You can re-list the item immediately." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Fulfilment after payment" }), _jsx(Text, { className: "leading-relaxed", children: "Once the auction order is paid, it enters PENDING status \u2014 the same fulfilment flow as a standard order applies. Process and ship within your stated dispatch time." })] }), _jsx(Alert, { variant: "info", title: "Auction orders cannot be cancelled by the buyer", children: "Unlike standard orders, auction orders cannot be self-cancelled by the buyer after payment. If a buyer requests a cancel, it requires seller approval. Treat winning bids as binding commitments." })] }));
 }
 // -- Section 7: Common questions (FAQ collapsibles) ----------------------------
 const FAQS = [
@@ -115,8 +115,8 @@ const FAQS = [
     },
 ];
 function CommonFAQs() {
-    return (_jsx(Div, { className: "space-y-3", children: FAQS.map(({ q, a }) => (_jsx(Accordion, { title: q, children: _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: a }) }, q))) }));
+    return (_jsx(Stack, { gap: "3", children: FAQS.map(({ q, a }) => (_jsx(Accordion, { title: q, children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: a }) }, q))) }));
 }
 export function StoreOrdersGuideView(_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: "Orders & Fulfilment Guide" }), _jsx(Text, { className: "mt-1 text-sm text-[var(--appkit-color-text-muted)]", children: "Processing orders, shipping, cancellations, returns, and auction orders." })] }), _jsx(GuideSection, { title: "1. Order lifecycle", children: _jsx(OrderLifecycle, {}) }), _jsx(GuideSection, { title: "2. Processing an order", children: _jsx(ProcessingWalkthrough, {}) }), _jsx(GuideSection, { title: "3. Supported carriers", children: _jsx(CarriersSection, {}) }), _jsx(GuideSection, { title: "4. Cancellations", children: _jsx(CancellationsSection, {}) }), _jsx(GuideSection, { title: "5. Return requests", children: _jsx(ReturnsSection, {}) }), _jsx(GuideSection, { title: "6. Auction orders", children: _jsx(AuctionOrdersSection, {}) }), _jsx(GuideSection, { title: "7. Common questions", children: _jsx(CommonFAQs, {}) })] }));
+    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: "Orders & Fulfilment Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Processing orders, shipping, cancellations, returns, and auction orders." })] }), _jsx(GuideSection, { title: "1. Order lifecycle", children: _jsx(OrderLifecycle, {}) }), _jsx(GuideSection, { title: "2. Processing an order", children: _jsx(ProcessingWalkthrough, {}) }), _jsx(GuideSection, { title: "3. Supported carriers", children: _jsx(CarriersSection, {}) }), _jsx(GuideSection, { title: "4. Cancellations", children: _jsx(CancellationsSection, {}) }), _jsx(GuideSection, { title: "5. Return requests", children: _jsx(ReturnsSection, {}) }), _jsx(GuideSection, { title: "6. Auction orders", children: _jsx(AuctionOrdersSection, {}) }), _jsx(GuideSection, { title: "7. Common questions", children: _jsx(CommonFAQs, {}) })] }));
 }

package/dist/features/stores/components/StorePreOrdersListing.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, FilterDrawer, ListingToolbar, Pagination, Text } from "../../../ui";
+import { Div, FilterDrawer, ListingToolbar, Pagination, Row, Stack, Text } from "../../../ui";
 import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
 import { ProductFilters } from "../../products/components/ProductFilters";
 import { ROUTES } from "../../../next";
@@ -55,8 +55,8 @@ export function StorePreOrdersListing({ storeId, initialData }) {
     };
     const { products: preOrders, totalPages, page, isLoading } = useProducts(params, { initialData });
     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 gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4";
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: PREORDER_SORT_OPTIONS, onSortChange: (v) => {
@@ -66,5 +66,5 @@ export function StorePreOrdersListing({ 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-3 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))) })) : preOrders.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "This store has no pre-orders yet." })) : view === "list" ? (_jsx(Div, { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) : (_jsx(Div, { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
+                }, 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-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "This store has no pre-orders yet." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", border: "subtle", rounded: "xl", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) : (_jsx(Div, { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
 }

package/dist/features/stores/components/StoreProductsListing.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 { ROUTES } from "../../../next";
@@ -57,8 +57,8 @@ export function StoreProductsListing({ storeId, initialData }) {
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
     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 handleViewToggle = (next) => {
         setView(next);
@@ -93,5 +93,5 @@ export function StoreProductsListing({ storeId, initialData }) {
     }, [localCart, showToast]);
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store products...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PRODUCT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
-                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), 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: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6", 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-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view, emptyLabel: "This store has no products yet.", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), 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, { layout: "grid", gap: "6", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", 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-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" })] })] }, i))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view, emptyLabel: "This store has no products yet.", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

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

@@ -8,7 +8,7 @@ export function StoreProductsView({ storeSlug, labels = {}, renderProducts, rend
     const [sort, setSort] = useState("-createdAt");
     const [viewMode, setViewMode] = useState("grid");
     void storeSlug;
-    return (_jsx(Div, { className: `py-4 ${className}`, children: _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderHeader: () => labels.title ? (_jsx(Heading, { level: 2, className: "mb-1 text-xl font-semibold", children: labels.title })) : null, renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search store products", className: "max-w-sm" })), renderSort: () => renderSort?.(sort, setSort) ?? (_jsx(Select, { value: sort, onValueChange: setSort, options: [
+    return (_jsx(Div, { className: `${className}`, padding: "y-md", children: _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderHeader: () => labels.title ? (_jsx(Heading, { level: 2, className: "mb-1", size: "xl", weight: "semibold", children: labels.title })) : null, renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search store products", className: "max-w-sm" })), renderSort: () => renderSort?.(sort, setSort) ?? (_jsx(Select, { value: sort, onValueChange: setSort, options: [
                     { value: sortBy("createdAt", "DESC"), label: "Newest" },
                     { value: sortBy("createdAt", "ASC"), label: "Oldest" },
                     { value: sortBy("price", "ASC"), label: "Price: Low to High" },

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, Span, Text } from "../../../ui";
+import { Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, Span, Stack, Text } from "../../../ui";
 import { ReviewCard } from "../../reviews/components/ReviewsList";
 import { ReviewFilters, REVIEW_PUBLIC_SORT_OPTIONS } from "../../reviews/components/ReviewFilters";
 import { useStoreReviews } from "../hooks/useStores";
@@ -62,6 +62,7 @@ export function StoreReviewsListing({ storeSlug }) {
         buildSieveParams: () => "",
         buildSearchParams: () => "",
         params: new URLSearchParams(),
+        // audit-unknown-ok: TS structural escape — table-state type
     }), [pendingFilters]);
     const openFilters = useCallback(() => {
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
@@ -107,5 +108,5 @@ export function StoreReviewsListing({ storeSlug }) {
         value: opt.value,
         label: SORT_OPTION_LABELS[opt.key] ?? opt.key,
     }));
-    return (_jsxs(Div, { className: "min-h-screen", children: [totalReviews > 0 && (_jsxs(Row, { align: "center", gap: "sm", className: "px-4 py-3 border-b border-zinc-200 dark:border-slate-700", children: [_jsx(Span, { weight: "bold", className: "text-2xl text-zinc-900 dark:text-zinc-100", children: averageRating.toFixed(1) }), _jsxs(Span, { size: "sm", className: "text-zinc-500 dark:text-zinc-400", children: ["/ 5 \u00B7 ", totalReviews, " reviews"] })] })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search reviews...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: sortOptions, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, 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: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6 px-4", children: isLoading ? (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: _jsxs(Div, { className: `${__P.p4} space-y-3`, children: [_jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" })] }) }, i))) })) : reviews.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No reviews found." })) : view === "list" ? (_jsx(Div, { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: reviews.map((review) => (_jsx(ReviewCard, { review: review, context: "store" }, review.id))) })) : (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: reviews.map((review) => (_jsx(ReviewCard, { review: review, context: "store" }, review.id))) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(ReviewFilters, { table: pendingTable, variant: "public" }) })] }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [totalReviews > 0 && (_jsxs(Row, { border: "default", align: "center", gap: "sm", className: "border-b", padding: "inline", children: [_jsx(Span, { weight: "bold", size: "2xl", color: "primary", children: averageRating.toFixed(1) }), _jsxs(Span, { size: "sm", color: "muted", children: ["/ 5 \u00B7 ", totalReviews, " reviews"] })] })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search reviews...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: sortOptions, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, 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: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { paddingY: "y-lg", paddingX: "x-md", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "3", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" })] }) }, i))) })) : reviews.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "No reviews found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", border: "subtle", rounded: "xl", children: reviews.map((review) => (_jsx(ReviewCard, { review: review, context: "store" }, review.id))) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: reviews.map((review) => (_jsx(ReviewCard, { review: review, context: "store" }, review.id))) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(ReviewFilters, { table: pendingTable, variant: "public" }) })] }));
 }

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

@@ -23,5 +23,7 @@ export function StoreScopedSearch({ storeId, storeName, placeholder, className =
             params.set("q", q);
         router.push(`${base}?${params.toString()}`);
     };
-    return (_jsx("form", { onSubmit: submit, className: `w-full ${className}`, children: _jsxs(Row, { gap: "sm", align: "center", className: "w-full", children: [_jsx(Input, { type: "search", value: value, onChange: (e) => setValue(e.target.value), placeholder: placeholder ?? `Search ${storeName}…`, "aria-label": `Search ${storeName}`, className: "flex-1" }), _jsx(Button, { type: "submit", variant: "primary", size: "sm", children: "Search" })] }) }));
+    return (
+    // audit-raw-form-input-ok: store-scoped search bar — single query field, no validation needed
+    _jsx("form", { onSubmit: submit, className: `w-full ${className}`, children: _jsxs(Row, { gap: "sm", align: "center", className: "w-full", children: [_jsx(Input, { type: "search", value: value, onChange: (e) => setValue(e.target.value), placeholder: placeholder ?? `Search ${storeName}…`, "aria-label": `Search ${storeName}`, className: "flex-1" }), _jsx(Button, { type: "submit", variant: "primary", size: "sm", children: "Search" })] }) }));
 }

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

@@ -1,17 +1,18 @@
 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";
 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: Store profile -------------------------------------------------
 function StoreProfileSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Store name & description" }), _jsx(Text, { className: "leading-relaxed", children: "Your store name appears in search results, listing cards, order emails, and the store profile page. Choose a name that clearly describes your niche \u2014 buyers search by seller name. The description appears on your profile page below your banner \u2014 include your niche, location, and turnaround time (e.g. \"Graded Pok\u00E9mon TCG from Mumbai \u00B7 ships within 2 business days\")." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Logo (storeLogoURL)" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsx("li", { className: LIST_DISC, children: "Minimum size: 200 \u00D7 200 px. Recommended: 400 \u00D7 400 px." }), _jsx("li", { className: LIST_DISC, children: "Displayed as a circle avatar on your profile page and in order confirmation emails." }), _jsx("li", { className: LIST_DISC, children: "Format: PNG with transparent background looks best." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Banner (storeBannerURL)" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsx("li", { className: LIST_DISC, children: "Minimum size: 1200 \u00D7 300 px. Recommended: 1600 \u00D7 400 px." }), _jsx("li", { className: LIST_DISC, children: "Displayed at the top of your store profile page." }), _jsx("li", { className: LIST_DISC, children: "Avoid putting critical text near the edges \u2014 it may be cropped on mobile." })] })] }), _jsx(Alert, { variant: "info", title: "Profile completeness affects discoverability", children: "Stores with a logo, banner, description, and at least one published listing appear higher in the Stores directory. The Getting Started checklist on your Guide Hub shows which steps remain." })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Store name & description" }), _jsx(Text, { className: "leading-relaxed", children: "Your store name appears in search results, listing cards, order emails, and the store profile page. Choose a name that clearly describes your niche \u2014 buyers search by seller name. The description appears on your profile page below your banner \u2014 include your niche, location, and turnaround time (e.g. \"Graded Pok\u00E9mon TCG from Mumbai \u00B7 ships within 2 business days\")." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Logo (storeLogoURL)" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "Minimum size: 200 \u00D7 200 px. Recommended: 400 \u00D7 400 px." }), _jsx(Li, { className: LIST_DISC, children: "Displayed as a circle avatar on your profile page and in order confirmation emails." }), _jsx(Li, { className: LIST_DISC, children: "Format: PNG with transparent background looks best." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Banner (storeBannerURL)" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "Minimum size: 1200 \u00D7 300 px. Recommended: 1600 \u00D7 400 px." }), _jsx(Li, { className: LIST_DISC, children: "Displayed at the top of your store profile page." }), _jsx(Li, { className: LIST_DISC, children: "Avoid putting critical text near the edges \u2014 it may be cropped on mobile." })] })] }), _jsx(Alert, { variant: "info", title: "Profile completeness affects discoverability", children: "Stores with a logo, banner, description, and at least one published listing appear higher in the Stores directory. The Getting Started checklist on your Guide Hub shows which steps remain." })] }));
 }
 // -- Section 2: Shipping configuration ----------------------------------------
 function ShippingSection() {
@@ -19,15 +20,15 @@ function ShippingSection() {
 }
 // -- Section 3: Return policy -------------------------------------------------
 function ReturnPolicySection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Store-level return window" }), _jsxs(Text, { className: "leading-relaxed", children: ["The default return window is ", _jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "7 days" }), " from the DELIVERED date. Stores with the", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded mx-1", children: "extended_return_window" }), "capability can offer 30 days. The return window is displayed on every product detail page in the Returns tab."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Non-returnable categories" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsx("li", { className: LIST_DISC, children: "Opened card packs (boosters, elite trainer boxes)." }), _jsx("li", { className: LIST_DISC, children: "Cracked or opened graded slabs \u2014 unless the defect was documented before shipping." }), _jsx("li", { className: LIST_DISC, children: "Items explicitly marked \"Final Sale\" in the listing." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What buyers see" }), _jsx(Text, { className: "leading-relaxed", children: "Buyers see the return window and non-returnable note in the product detail page Returns tab before purchasing. This cannot be suppressed \u2014 it is platform policy to always show return terms." })] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Store-level return window" }), _jsxs(Text, { className: "leading-relaxed", children: ["The default return window is ", _jsx(Span, { weight: "bold", children: "7 days" }), " from the DELIVERED date. Stores with the", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "extended_return_window" }), "capability can offer 30 days. The return window is displayed on every product detail page in the Returns tab."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Non-returnable categories" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "Opened card packs (boosters, elite trainer boxes)." }), _jsx(Li, { className: LIST_DISC, children: "Cracked or opened graded slabs \u2014 unless the defect was documented before shipping." }), _jsx(Li, { className: LIST_DISC, children: "Items explicitly marked \"Final Sale\" in the listing." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What buyers see" }), _jsx(Text, { className: "leading-relaxed", children: "Buyers see the return window and non-returnable note in the product detail page Returns tab before purchasing. This cannot be suppressed \u2014 it is platform policy to always show return terms." })] })] }));
 }
 // -- Section 4: Vacation mode -------------------------------------------------
 function VacationModeSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What vacation mode does" }), _jsxs("ul", { className: "space-y-1 pl-5", children: [_jsx("li", { className: LIST_DISC, children: "All your published listings are hidden from search results and browse pages." }), _jsx("li", { className: LIST_DISC, children: "Your store profile page shows a \"On Vacation\" banner." }), _jsx("li", { className: LIST_DISC, children: "Buyers cannot add your items to cart or checkout while on vacation." }), _jsx("li", { className: LIST_DISC, children: "Existing orders that were placed before vacation mode must still be fulfilled." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How to enable" }), _jsx(Text, { className: "leading-relaxed", children: "Go to your Store Dashboard \u2192 Settings \u2192 Storefront tab. Toggle \"Vacation mode\" on. Your listings re-appear instantly when you toggle it off." })] }), _jsx(Alert, { variant: "warning", title: "Ongoing orders are not paused", children: "Enabling vacation mode does not pause or cancel any existing orders. You are still responsible for fulfilling orders placed before vacation mode was enabled." })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What vacation mode does" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "All your published listings are hidden from search results and browse pages." }), _jsx(Li, { className: LIST_DISC, children: "Your store profile page shows a \"On Vacation\" banner." }), _jsx(Li, { className: LIST_DISC, children: "Buyers cannot add your items to cart or checkout while on vacation." }), _jsx(Li, { className: LIST_DISC, children: "Existing orders that were placed before vacation mode must still be fulfilled." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How to enable" }), _jsx(Text, { className: "leading-relaxed", children: "Go to your Store Dashboard \u2192 Settings \u2192 Storefront tab. Toggle \"Vacation mode\" on. Your listings re-appear instantly when you toggle it off." })] }), _jsx(Alert, { variant: "warning", title: "Ongoing orders are not paused", children: "Enabling vacation mode does not pause or cancel any existing orders. You are still responsible for fulfilling orders placed before vacation mode was enabled." })] }));
 }
 // -- Section 5: WhatsApp integration ------------------------------------------
 function WhatsAppSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Text, { className: "leading-relaxed", children: ["The WhatsApp integration allows your customers to contact you via WhatsApp from your store profile and lets you sync your product catalog to your WhatsApp Business Catalog (requires the", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded mx-1", children: "whatsapp_catalog_sync" }), " capability)."] }), _jsxs(Text, { className: "leading-relaxed", children: ["Full settings and the catalog sync toggle are at", " ", _jsx("a", { href: String(ROUTES.STORE.WHATSAPP), className: "underline text-[var(--appkit-color-primary)] hover:opacity-80", children: "Settings \u2192 WhatsApp" }), ". See the WhatsApp settings page for step-by-step setup instructions."] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Text, { className: "leading-relaxed", children: ["The WhatsApp integration allows your customers to contact you via WhatsApp from your store profile and lets you sync your product catalog to your WhatsApp Business Catalog (requires the", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "whatsapp_catalog_sync" }), " capability)."] }), _jsxs(Text, { className: "leading-relaxed", children: ["Full settings and the catalog sync toggle are at", " ", _jsx("a", { href: String(ROUTES.STORE.WHATSAPP), className: "underline text-[var(--appkit-color-primary)] hover:opacity-80", children: "Settings \u2192 WhatsApp" }), ". See the WhatsApp settings page for step-by-step setup instructions."] })] }));
 }
 // -- Section 6: Visibility states ---------------------------------------------
 function VisibilityStatesSection() {
@@ -49,8 +50,8 @@ function VisibilityStatesSection() {
             note: "Admin action. All listings hidden. Store profile shows 'Unavailable' banner. Contact support@letitrip.in to resolve.",
         },
     ];
-    return (_jsx(Div, { className: "space-y-3", children: STATES.map(({ state, note }) => (_jsxs(Div, { className: "flex gap-3 text-sm", children: [_jsx(Text, { className: "shrink-0 w-32 font-semibold text-[var(--appkit-color-text)]", children: state }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", children: note })] }, state))) }));
+    return (_jsx(Stack, { gap: "3", children: STATES.map(({ state, note }) => (_jsxs(Row, { textSize: "sm", gap: "3", children: [_jsx(Text, { className: "shrink-0 w-32 text-[var(--appkit-color-text)]", weight: "semibold", children: state }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", children: note })] }, state))) }));
 }
 export function StoreSettingsGuideView(_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: "Settings Guide" }), _jsx(Text, { className: "mt-1 text-sm text-[var(--appkit-color-text-muted)]", children: "Store profile, shipping, returns, vacation mode, WhatsApp, and visibility." })] }), _jsx(GuideSection, { title: "1. Store profile", children: _jsx(StoreProfileSection, {}) }), _jsx(GuideSection, { title: "2. Shipping configuration", children: _jsx(ShippingSection, {}) }), _jsx(GuideSection, { title: "3. Return policy", children: _jsx(ReturnPolicySection, {}) }), _jsx(GuideSection, { title: "4. Vacation mode", children: _jsx(VacationModeSection, {}) }), _jsx(GuideSection, { title: "5. WhatsApp integration", children: _jsx(WhatsAppSection, {}) }), _jsx(GuideSection, { title: "6. Visibility states", children: _jsx(VisibilityStatesSection, {}) })] }));
+    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: "Settings Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Store profile, shipping, returns, vacation mode, WhatsApp, and visibility." })] }), _jsx(GuideSection, { title: "1. Store profile", children: _jsx(StoreProfileSection, {}) }), _jsx(GuideSection, { title: "2. Shipping configuration", children: _jsx(ShippingSection, {}) }), _jsx(GuideSection, { title: "3. Return policy", children: _jsx(ReturnPolicySection, {}) }), _jsx(GuideSection, { title: "4. Vacation mode", children: _jsx(VacationModeSection, {}) }), _jsx(GuideSection, { title: "5. WhatsApp integration", children: _jsx(WhatsAppSection, {}) }), _jsx(GuideSection, { title: "6. Visibility states", children: _jsx(VisibilityStatesSection, {}) })] }));
 }

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { Row, SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useStores } from "../hooks/useStores";
@@ -65,6 +65,7 @@ export function StoresIndexListing({ initialData }) {
         buildSieveParams: () => "",
         buildSearchParams: () => "",
         params: new URLSearchParams(),
+        // audit-unknown-ok: TS structural escape — table-state type
     }), [pendingFilters]);
     const openFilters = useCallback(() => {
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
@@ -135,10 +136,10 @@ export function StoresIndexListing({ initialData }) {
                         disabled: selection.selectedCount !== 1,
                         onClick: () => { selection.clearSelection(); },
                     },
-                ] }), 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: table.getNumber("page", 1), totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: isLoading ? (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-video bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p4} space-y-2.5`, children: [_jsx(Div, { className: "flex items-center gap-2", children: _jsx(Div, { className: "h-10 w-10 rounded-lg bg-zinc-200 dark:bg-slate-700" }) }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] })] }, i))) })) : stores.length === 0 ? (_jsx(Text, { className: "py-16 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No stores found." })) : view === "list" ? (_jsx(Div, { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: stores.map((store) => {
+                ] }), 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: table.getNumber("page", 1), totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-video", surface: "subtle" }), _jsxs(Div, { className: `${__P.p4} space-y-2.5`, children: [_jsx(Row, { align: "center", gap: "sm", children: _jsx(Div, { className: "h-10 w-10", surface: "subtle", rounded: "lg" }) }), _jsx(Div, { className: "h-4 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] })] }, i))) })) : stores.length === 0 ? (_jsx(Text, { paddingY: "4xl", color: "muted", size: "sm", align: "center", children: "No stores found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", border: "subtle", rounded: "xl", children: stores.map((store) => {
                         const storeKey = store.storeSlug ?? store.id;
                         return (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(storeKey)), selectable: selection.isSelecting, isSelected: selection.isSelected(store.id ?? store.storeSlug), onSelect: (id, sel) => { void sel; selection.toggle(id); } }, storeKey));
-                    }) })) : (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: stores.map((store) => {
+                    }) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: stores.map((store) => {
                         const storeKey = store.storeSlug ?? store.id;
                         useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                                     {

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

@@ -14,5 +14,5 @@ export async function StoresIndexPageView({ searchParams = {} }) {
     const result = await storeRepository
         .listStores({ page, pageSize, sorts: sort }, true)
         .catch(() => null);
-    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Stores" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(StoresIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8", color: "primary", size: "3xl", weight: "semibold", children: "Stores" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(StoresIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

package/dist/features/stores/hooks/useStoreAddressSelector.d.ts

@@ -16,7 +16,7 @@ export declare function useStoreAddressSelector(options?: {
 }): {
     addresses: SavedAddress[];
     isLoading: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<SavedAddress[], Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<SavedAddress[]>, Error>>;
     createAddress: import("@tanstack/react-query").UseMutateFunction<CreateAddressApiResponse, Error, AddressFormData, unknown>;
     isSaving: boolean;
 };