@mohasinac/appkit 2.8.2 → 2.8.4

package/dist/_internal/client/features/classified/ClassifiedDetailView.js

@@ -5,6 +5,12 @@ import Link from "next/link";
 import { Badge, Button, Container, Div, Heading, Row, Section, Stack, Text, } from "../../../../ui";
 import { ROUTES } from "../../../../next/routing/route-map";
 import { formatCurrency } from "../../../../utils/number.formatter";
+const __P = {
+    p4: "p-4",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
 export function ClassifiedDetailView({ product, isLoading = false, onContactSeller, }) {
     const [pending, setPending] = useState(false);
     const [conversation, setConversation] = useState(null);
@@ -31,5 +37,5 @@ export function ClassifiedDetailView({ product, isLoading = false, onContactSell
             setPending(false);
         }
     }
-    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: "overflow-hidden rounded-lg bg-muted", children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Classified" }), meta?.negotiable && _jsx(Badge, { variant: "secondary", children: "Negotiable" }), meta?.acceptsShipping && _jsx(Badge, { variant: "secondary", children: "Shipping available" })] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), location && (_jsx(Text, { className: "text-sm text-muted-foreground", children: location })), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), conversation ? (_jsxs(Div, { className: "rounded-lg border border-border bg-muted/40 p-4", children: [_jsx(Text, { className: "mb-2 font-medium", children: "Conversation started!" }), _jsx(Link, { href: ROUTES.USER.MESSAGES, className: "text-primary underline underline-offset-2", children: "Go to your messages \u2192" })] })) : (_jsxs(Stack, { gap: "sm", children: [error && (_jsx(Text, { className: "text-sm text-destructive", children: error })), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleContactSeller, className: "w-full", children: "Contact Seller" })] }))] }) }) }));
+    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} rounded-lg bg-muted`, children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Classified" }), meta?.negotiable && _jsx(Badge, { variant: "secondary", children: "Negotiable" }), meta?.acceptsShipping && _jsx(Badge, { variant: "secondary", children: "Shipping available" })] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), location && (_jsx(Text, { className: "text-sm text-muted-foreground", children: location })), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), conversation ? (_jsxs(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4}`, children: [_jsx(Text, { className: "mb-2 font-medium", children: "Conversation started!" }), _jsx(Link, { href: ROUTES.USER.MESSAGES, className: "text-primary underline underline-offset-2", children: "Go to your messages \u2192" })] })) : (_jsxs(Stack, { gap: "sm", children: [error && (_jsx(Text, { className: "text-sm text-destructive", children: error })), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleContactSeller, className: "w-full", children: "Contact Seller" })] }))] }) }) }));
 }

package/dist/_internal/client/features/digital-code/CodeRevealPanel.js

@@ -2,6 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Div, Span, Stack, Text } from "../../../../ui";
+const __P = {
+    p4: "p-4",
+};
 export function CodeRevealPanel({ orderId, redemptionInstructions, fetchCode, }) {
     const [pending, setPending] = useState(false);
     const [revealed, setRevealed] = useState(null);
@@ -28,5 +31,5 @@ export function CodeRevealPanel({ orderId, redemptionInstructions, fetchCode, })
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     }
-    return (_jsx(Div, { className: "rounded-lg border border-border bg-muted/40 p-4", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "font-medium", children: "Your Digital Code" }), !revealed ? (_jsxs(Stack, { gap: "sm", children: [error && _jsx(Text, { className: "text-sm text-destructive", children: error }), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleReveal, className: "w-full", children: "Reveal Code" })] })) : (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { className: "flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 font-mono text-lg", children: [_jsx(Span, { className: "flex-1 select-all", children: revealed.code }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCopy, className: "shrink-0", children: copied ? "Copied!" : "Copy" })] }), redemptionInstructions && (_jsx(Text, { className: "text-sm text-muted-foreground", children: redemptionInstructions }))] }))] }) }));
+    return (_jsx(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4}`, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "font-medium", children: "Your Digital Code" }), !revealed ? (_jsxs(Stack, { gap: "sm", children: [error && _jsx(Text, { className: "text-sm text-destructive", children: error }), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleReveal, className: "w-full", children: "Reveal Code" })] })) : (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { className: "flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 font-mono text-lg", children: [_jsx(Span, { className: "flex-1 select-all", children: revealed.code }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCopy, className: "shrink-0", children: copied ? "Copied!" : "Copy" })] }), redemptionInstructions && (_jsx(Text, { className: "text-sm text-muted-foreground", children: redemptionInstructions }))] }))] }) }));
 }

package/dist/_internal/client/features/digital-code/DigitalCodeDetailView.js

@@ -3,6 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Container, Div, Heading, Row, Section, Stack, Text, } from "../../../../ui";
 import { formatCurrency } from "../../../../utils/number.formatter";
 import { CodeRevealPanel } from "./CodeRevealPanel";
+const __P = {
+    p4: "p-4",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
 export function DigitalCodeDetailView({ product, isLoading = false, orderId, fetchCode, }) {
     if (isLoading || !product) {
         return (_jsx(Container, { children: _jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-muted-foreground", children: isLoading ? "Loading…" : "Digital code listing not found." }) }) }));
@@ -10,5 +16,5 @@ export function DigitalCodeDetailView({ product, isLoading = false, orderId, fet
     const meta = product.digitalCode;
     const price = formatCurrency(product.price, product.currency ?? "INR");
     const codesLeft = meta?.codesAvailable ?? 0;
-    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: "overflow-hidden rounded-lg bg-muted", children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Badge, { variant: "active", children: [codesLeft, " available"] })) : (_jsx(Badge, { variant: "danger", children: "Sold out" }))] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), orderId && fetchCode ? (_jsx(CodeRevealPanel, { orderId: orderId, redemptionInstructions: meta?.redemptionInstructions, fetchCode: fetchCode })) : (_jsxs(Div, { className: "rounded-lg border border-border bg-muted/40 p-4", children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: "After purchase, return to your order to reveal the code instantly." }), meta?.redemptionInstructions && (_jsx(Text, { className: "mt-2 text-sm", children: meta.redemptionInstructions }))] }))] }) }) }));
+    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} rounded-lg bg-muted`, children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Badge, { variant: "active", children: [codesLeft, " available"] })) : (_jsx(Badge, { variant: "danger", children: "Sold out" }))] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), orderId && fetchCode ? (_jsx(CodeRevealPanel, { orderId: orderId, redemptionInstructions: meta?.redemptionInstructions, fetchCode: fetchCode })) : (_jsxs(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4}`, children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: "After purchase, return to your order to reveal the code instantly." }), meta?.redemptionInstructions && (_jsx(Text, { className: "mt-2 text-sm", children: meta.redemptionInstructions }))] }))] }) }) }));
 }

package/dist/_internal/client/features/layout/DashboardLayoutClient.js

@@ -29,6 +29,7 @@ import { UserSidebar } from "../../../../features/account/components/UserSidebar
 import { DASHBOARD_DESKTOP_MEDIA_QUERY } from "../../../shared/features/layout/config";
 import { filterNavItems } from "./filterNavItems";
 import { useSiteSettings } from "../../../../core/hooks/useSiteSettings";
+import { Div } from "../../../../ui";
 /**
  * Hoisted drawer-state hook — the matchMedia-aware open/close logic that was
  * triplicated across admin/store/user layouts. Used internally by
@@ -93,9 +94,9 @@ export function DashboardLayoutClient({ variant, groups, permissions, activeHref
     const adminGroups = variant === "admin"
         ? filteredGroups
         : groups;
-    return (_jsxs(_Fragment, { children: [variant === "admin" && (_jsx(AdminSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activePath: activeHref, groups: adminGroups, onCloseMobile: close, onToggle: toggle, className: className })), variant === "store" && (_jsx(StoreSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activeHref: activeHref, items: [], groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className })), variant === "user" && (_jsx(UserSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, items: filteredGroups.flatMap((g) => g.items), groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className })), _jsx("div", { className: [
+    return (_jsxs(_Fragment, { children: [variant === "admin" && (_jsx(AdminSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activePath: activeHref, groups: adminGroups, onCloseMobile: close, onToggle: toggle, className: className })), variant === "store" && (_jsx(StoreSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activeHref: activeHref, items: [], groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className })), variant === "user" && (_jsx(UserSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, items: filteredGroups.flatMap((g) => g.items), groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className })), _jsx(Div, { className: [
                     "w-full flex-1 flex flex-col min-h-[calc(100dvh-var(--header-height,3.5rem))]",
                     contentPadding ?? DEFAULT_CONTENT_PADDING,
                     contentSurface,
-                ].filter(Boolean).join(" "), children: _jsx("div", { className: ["w-full flex-1 mx-auto", contentMaxWidth ?? DEFAULT_CONTENT_MAX_WIDTH].filter(Boolean).join(" "), children: children }) })] }));
+                ].filter(Boolean).join(" "), children: _jsx(Div, { className: ["w-full flex-1 mx-auto", contentMaxWidth ?? DEFAULT_CONTENT_MAX_WIDTH].filter(Boolean).join(" "), children: children }) })] }));
 }

package/dist/_internal/client/features/live/LiveItemDetailView.js

@@ -2,6 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Container, Div, Heading, Row, Section, Stack, Text, } from "../../../../ui";
 import { formatCurrency } from "../../../../utils/number.formatter";
+const __P = {
+    p4: "p-4",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
+const CLS_WARN_BOX = "rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm";
+const CLS_WARN_TITLE = "font-medium text-amber-900";
+const CLS_WARN_BODY = "mt-1 text-amber-800";
 export function LiveItemDetailView({ product, isLoading = false, renderActions, }) {
     if (isLoading || !product) {
         return (_jsx(Container, { children: _jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-muted-foreground", children: isLoading ? "Loading…" : "Live listing not found." }) }) }));
@@ -10,6 +19,6 @@ export function LiveItemDetailView({ product, isLoading = false, renderActions,
     const price = formatCurrency(product.price, product.currency ?? "INR");
     const jurisdictions = meta?.jurisdictionAllowed ?? [];
     const transport = meta?.transport;
-    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: "overflow-hidden rounded-lg bg-muted", children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Live Item" }), meta?.vendorVerified && (_jsx(Badge, { variant: "active", children: "Verified Seller" })), meta?.cites && (_jsxs(Badge, { variant: "warning", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), meta?.species && (_jsxs(Text, { className: "text-sm italic text-muted-foreground", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] })), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), jurisdictions.length > 0 && (_jsxs(Div, { className: "rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm", children: [_jsx(Text, { className: "font-medium text-amber-900", children: "Delivery restrictions" }), _jsxs(Text, { className: "mt-1 text-amber-800", children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { className: "rounded-lg border border-border bg-muted/40 p-4 text-sm", children: [_jsx(Text, { className: "font-medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFeeInPaise !== undefined &&
-                                        ` · Handling: ${formatCurrency(transport.handlingFeeInPaise, "INR")}`, transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { className: "rounded-lg border border-border bg-muted/40 p-4 text-sm", children: [_jsx(Text, { className: "font-medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), renderActions?.()] }) }) }));
+    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} rounded-lg bg-muted`, children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Live Item" }), meta?.vendorVerified && (_jsx(Badge, { variant: "active", children: "Verified Seller" })), meta?.cites && (_jsxs(Badge, { variant: "warning", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), meta?.species && (_jsxs(Text, { className: "text-sm italic text-muted-foreground", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] })), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4} text-sm`, children: [_jsx(Text, { className: "font-medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFeeInPaise !== undefined &&
+                                        ` · Handling: ${formatCurrency(transport.handlingFeeInPaise, "INR")}`, transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4} text-sm`, children: [_jsx(Text, { className: "font-medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), renderActions?.()] }) }) }));
 }

package/dist/_internal/client/scaffolds/AppShell.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div } from "../../../ui";
 export function AppShell({ children, slotHeader, slotFooter, slotSidebar, renderHeader, renderFooter, renderSidebar, path, className, }) {
     const ctx = { path };
     const header = renderHeader ? renderHeader(ctx) : slotHeader;
     const footer = renderFooter ? renderFooter(ctx) : slotFooter;
     const sidebar = renderSidebar ? renderSidebar(ctx) : slotSidebar;
-    return (_jsxs("div", { className: `appkit-app-shell flex min-h-screen flex-col ${className ?? ""}`, children: [header ? (_jsx("header", { className: "sticky top-0 z-30 w-full", "data-appshell-slot": "header", children: header })) : null, _jsxs("div", { className: "flex flex-1", children: [sidebar ? (_jsx("aside", { className: "hidden lg:block lg:w-64 lg:shrink-0", "data-appshell-slot": "sidebar", children: sidebar })) : null, _jsx("main", { className: "min-w-0 flex-1", "data-appshell-slot": "main", children: children })] }), footer ? (_jsx("footer", { className: "w-full", "data-appshell-slot": "footer", children: footer })) : null] }));
+    return (_jsxs(Div, { className: `appkit-app-shell flex min-h-screen flex-col ${className ?? ""}`, children: [header ? (_jsx("header", { className: "sticky top-0 z-30 w-full", "data-appshell-slot": "header", children: header })) : null, _jsxs(Div, { className: "flex flex-1", children: [sidebar ? (_jsx("aside", { className: "hidden lg:block lg:w-64 lg:shrink-0", "data-appshell-slot": "sidebar", children: sidebar })) : null, _jsx("main", { className: "min-w-0 flex-1", "data-appshell-slot": "main", children: children })] }), footer ? (_jsx("footer", { className: "w-full", "data-appshell-slot": "footer", children: footer })) : null] }));
 }

package/dist/_internal/client/scaffolds/DashboardScaffold.js

@@ -13,11 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * placement; the consumer owns the items.
  */
 import * as React from "react";
+import { Div } from "../../../ui";
 export function DashboardScaffold({ children, slotPageHeader, renderNav, renderBottomNav, slotMenuToggle, initialDrawerOpen = false, className, }) {
     const [drawerOpen, setDrawerOpen] = React.useState(initialDrawerOpen);
     const toggleDrawer = React.useCallback(() => setDrawerOpen((v) => !v), []);
     const ctx = { drawerOpen, toggleDrawer };
     const nav = renderNav ? renderNav(ctx) : null;
     const bottomNav = renderBottomNav ? renderBottomNav(ctx) : nav;
-    return (_jsxs("div", { className: `appkit-dashboard-scaffold flex min-h-screen ${className ?? ""}`, children: [nav ? (_jsx("aside", { className: "sticky top-0 hidden h-screen w-64 shrink-0 overflow-y-auto border-r border-[var(--appkit-color-border,#e5e7eb)] lg:block", "data-dashboard-slot": "sidebar", children: nav })) : null, nav ? (_jsxs("div", { className: `fixed inset-0 z-40 transition-transform md:block lg:hidden ${drawerOpen ? "translate-x-0" : "-translate-x-full"}`, "data-dashboard-slot": "drawer", "aria-hidden": !drawerOpen, children: [_jsx("div", { className: "absolute inset-0 bg-black/40", onClick: () => setDrawerOpen(false), role: "presentation" }), _jsx("nav", { className: "relative h-full w-64 overflow-y-auto bg-[var(--appkit-color-surface,#ffffff)] shadow-xl", children: nav })] })) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [(slotPageHeader || slotMenuToggle) && (_jsxs("div", { className: "sticky top-0 z-20 flex items-center gap-3 border-b border-[var(--appkit-color-border,#e5e7eb)] bg-[var(--appkit-color-surface,#ffffff)] px-4 py-2", "data-dashboard-slot": "page-header", children: [slotMenuToggle ? (_jsx("span", { className: "lg:hidden", onClick: toggleDrawer, role: "presentation", children: slotMenuToggle })) : null, _jsx("div", { className: "min-w-0 flex-1", children: slotPageHeader })] })), _jsx("main", { className: "min-w-0 flex-1 pb-20 lg:pb-0", "data-dashboard-slot": "main", children: children }), bottomNav ? (_jsx("nav", { className: "fixed bottom-0 left-0 right-0 z-30 border-t border-[var(--appkit-color-border,#e5e7eb)] bg-[var(--appkit-color-surface,#ffffff)] lg:hidden", "data-dashboard-slot": "bottom-nav", children: bottomNav })) : null] })] }));
+    return (_jsxs(Div, { className: `appkit-dashboard-scaffold flex min-h-screen ${className ?? ""}`, children: [nav ? (_jsx("aside", { className: "sticky top-0 hidden h-screen w-64 shrink-0 overflow-y-auto border-r border-[var(--appkit-color-border,#e5e7eb)] lg:block", "data-dashboard-slot": "sidebar", children: nav })) : null, nav ? (_jsxs("div", { className: `fixed inset-0 z-40 transition-transform md:block lg:hidden ${drawerOpen ? "translate-x-0" : "-translate-x-full"}`, "data-dashboard-slot": "drawer", "aria-hidden": !drawerOpen, children: [_jsx("div", { className: "absolute inset-0 bg-black/40", onClick: () => setDrawerOpen(false), role: "presentation" }), _jsx("nav", { className: "relative h-full w-64 overflow-y-auto bg-[var(--appkit-color-surface,#ffffff)] shadow-xl", children: nav })] })) : null, _jsxs(Div, { className: "flex min-w-0 flex-1 flex-col", children: [(slotPageHeader || slotMenuToggle) && (_jsxs("div", { className: "sticky top-0 z-20 flex items-center gap-3 border-b border-[var(--appkit-color-border,#e5e7eb)] bg-[var(--appkit-color-surface,#ffffff)] px-4 py-2", "data-dashboard-slot": "page-header", children: [slotMenuToggle ? (_jsx("span", { className: "lg:hidden", onClick: toggleDrawer, role: "presentation", children: slotMenuToggle })) : null, _jsx(Div, { className: "min-w-0 flex-1", children: slotPageHeader })] })), _jsx("main", { className: "min-w-0 flex-1 pb-20 lg:pb-0", "data-dashboard-slot": "main", children: children }), bottomNav ? (_jsx("nav", { className: "fixed bottom-0 left-0 right-0 z-30 border-t border-[var(--appkit-color-border,#e5e7eb)] bg-[var(--appkit-color-surface,#ffffff)] lg:hidden", "data-dashboard-slot": "bottom-nav", children: bottomNav })) : null] })] }));
 }

package/dist/_internal/server/features/checkout/actions.js

@@ -172,6 +172,43 @@ function buildStockUpdatePayload(product, qtyDelta) {
         ...rule.stockDecrementExtras(product, qtyDelta),
     };
 }
+async function flushCouponUsageAccumulator(accumulator, uid) {
+    if (accumulator.size === 0)
+        return;
+    Promise.all([...accumulator.values()].map(async ({ couponId, code, orderIds: ids, totalDiscount }) => {
+        await couponsRepository.applyCoupon(couponId, code, uid, ids, totalDiscount);
+        try {
+            const coupon = await couponsRepository.findById(couponId);
+            const perUserLimit = coupon?.usage?.perUserLimit ?? 1;
+            const newCount = await couponsRepository.getUserCouponUsageCount(uid, couponId);
+            if (newCount >= perUserLimit) {
+                await claimedCouponsRepository
+                    .markUsed(uid, code, ids[0] ?? "")
+                    .catch(() => { });
+            }
+        }
+        catch (err) {
+            serverLogger.warn("Failed to update claimed-coupon status", { err });
+        }
+    })).catch((err) => serverLogger.error("Failed to record coupon usage:", err));
+}
+function grantConsentOtpBypassCredit(db, uid, emailOtpUsed, unavailableCount) {
+    if (!emailOtpUsed || unavailableCount === 0)
+        return;
+    const metaRef = consentOtpRateLimitRef(db, uid);
+    metaRef
+        .get()
+        .then((snap) => {
+        const cur = snap.exists ? (snap.data()?.bypassCredits ?? 0) : 0;
+        return metaRef.set({ bypassCredits: Math.min(cur + 1, CONSENT_OTP_MAX_BYPASS_CREDITS) }, { merge: true });
+    })
+        .catch((err) => serverLogger.warn("Failed to grant consent OTP bypass credit", { err }));
+}
+function dispatchOrderConfirmationEmails(emailsToSend) {
+    if (emailsToSend.length === 0)
+        return;
+    Promise.all(emailsToSend.map((e) => sendOrderConfirmationEmail(e))).catch((err) => serverLogger.error("Order confirmation email error:", err));
+}
 /**
  * Place order(s) from the user's cart in a single Firestore transaction.
  *
@@ -554,45 +591,9 @@ export async function createCheckoutOrderAction(input) {
             paid: adminBypass,
         });
     }
-    if (couponUsageAccumulator.size > 0) {
-        Promise.all([...couponUsageAccumulator.values()].map(async ({ couponId, code, orderIds: ids, totalDiscount }) => {
-            await couponsRepository.applyCoupon(couponId, code, uid, ids, totalDiscount);
-            // Flip the user's claimed-coupon wallet row to "used" when the
-            // per-user redemption limit has been reached (default: single-use
-            // when `perUserLimit` is absent or 1). Multi-use coupons with
-            // remaining redemptions stay "active" in the wallet.
-            try {
-                const coupon = await couponsRepository.findById(couponId);
-                // Default to single-use (1) when the coupon has no explicit
-                // per-user cap configured. Coupons issued via the wallet are
-                // claim-once-use-once by design unless the seller opts into a
-                // higher cap.
-                const perUserLimit = coupon?.usage?.perUserLimit ?? 1;
-                const newCount = await couponsRepository.getUserCouponUsageCount(uid, couponId);
-                if (newCount >= perUserLimit) {
-                    await claimedCouponsRepository
-                        .markUsed(uid, code, ids[0] ?? "")
-                        .catch(() => { });
-                }
-            }
-            catch (err) {
-                serverLogger.warn("Failed to update claimed-coupon status", { err });
-            }
-        })).catch((err) => serverLogger.error("Failed to record coupon usage:", err));
-    }
-    if (emailOtpUsed && unavailable.length > 0) {
-        const metaRef = consentOtpRateLimitRef(db, uid);
-        metaRef
-            .get()
-            .then((snap) => {
-            const cur = snap.exists ? (snap.data()?.bypassCredits ?? 0) : 0;
-            return metaRef.set({ bypassCredits: Math.min(cur + 1, CONSENT_OTP_MAX_BYPASS_CREDITS) }, { merge: true });
-        })
-            .catch((err) => serverLogger.warn("Failed to grant consent OTP bypass credit", { err }));
-    }
-    if (emailsToSend.length > 0) {
-        Promise.all(emailsToSend.map((e) => sendOrderConfirmationEmail(e))).catch((err) => serverLogger.error("Order confirmation email error:", err));
-    }
+    await flushCouponUsageAccumulator(couponUsageAccumulator, uid);
+    grantConsentOtpBypassCredit(db, uid, emailOtpUsed, unavailable.length);
+    dispatchOrderConfirmationEmails(emailsToSend);
     serverLogger.info(`createCheckoutOrderAction: ${orderIds.length} order(s) placed for uid=${uid}` +
         (unavailable.length > 0 ? ` (${unavailable.length} item(s) unavailable)` : ""));
     return {

package/dist/_internal/shared/actions/action-registry.js

@@ -1498,6 +1498,12 @@ export const ACTIONS = {
             description: "Cancel a single event entry.",
             kind: "danger",
             permissions: ["admin", "moderator"],
+            confirmation: {
+                title: "Cancel this entry?",
+                body: "This will remove the participant from the event. They can re-register if the event is still open.",
+                confirmLabel: "Cancel entry",
+                confirmKind: "danger",
+            },
         },
         // ── Review management (row-level) ─────────────────────────────────
         "feature-review": {

package/dist/_internal/shared/config/index.d.ts

@@ -1 +1 @@
-export type { AppkitConfig, AppkitSmokeRoute, AppkitThemeProbeRoute, AppkitAuthFixture, AppkitFirebaseConfig, AppkitFirebaseExtensions, AppkitVercelConfig, AppkitBrandConfig, AppkitSeoConfig, AppkitI18nConfig, AppkitImagePattern, FirestoreIndex, FirestoreIndexField, FirestoreFieldOverride, } from "./schema";
+export type { AppkitConfig, AppkitSmokeRoute, AppkitThemeProbeRoute, AppkitAuthFixture, AppkitFirebaseConfig, AppkitFirebaseExtensions, AppkitVercelConfig, AppkitBrandConfig, AppkitSeoConfig, AppkitI18nConfig, FirestoreIndex, FirestoreIndexField, FirestoreFieldOverride, } from "./schema";

package/dist/_internal/shared/config/schema.d.ts

@@ -127,12 +127,6 @@ export interface AppkitI18nConfig {
      */
     enableLocaleCookie?: boolean;
 }
-export interface AppkitImagePattern {
-    protocol?: "http" | "https";
-    hostname: string;
-    port?: string;
-    pathname?: string;
-}
 export interface AppkitVercelConfig {
     /** Vercel project ID */
     projectId: string;
@@ -154,8 +148,6 @@ export interface AppkitConfig {
     seo?: AppkitSeoConfig;
     /** i18n / next-intl routing options */
     i18n?: AppkitI18nConfig;
-    /** next/image remotePatterns for external image hosts (demo / seed data) */
-    externalImagePatterns?: AppkitImagePattern[];
     /** Route configuration for smoke tests and theme probing */
     routes?: {
         /** Routes to SSR-verify: must return 200 + expected strings in initial HTML */

package/dist/client-entry.d.ts

@@ -18,6 +18,6 @@ export type { AppkitLabelSet } from "./_internal/client/i18n/LabelsProvider";
 export { AppShell, DashboardScaffold } from "./_internal/client/scaffolds/index";
 export type { AppShellProps, AppShellRenderContext, DashboardScaffoldProps, DashboardScaffoldRenderContext, } from "./_internal/client/scaffolds/index";
 export { toClient, clientInitial } from "./_internal/shared/serialization/index";
-export type { AppkitConfig, AppkitFirebaseConfig, AppkitFirebaseExtensions, AppkitVercelConfig, AppkitBrandConfig, AppkitSeoConfig, AppkitI18nConfig, AppkitImagePattern, FirestoreIndex, FirestoreIndexField, FirestoreFieldOverride, } from "./_internal/shared/config/schema";
+export type { AppkitConfig, AppkitFirebaseConfig, AppkitFirebaseExtensions, AppkitVercelConfig, AppkitBrandConfig, AppkitSeoConfig, AppkitI18nConfig, FirestoreIndex, FirestoreIndexField, FirestoreFieldOverride, } from "./_internal/shared/config/schema";
 export { SEMANTIC_COLORS, SEMANTIC_COLORS_DARK, SEMANTIC_RADIUS, SEMANTIC_SHADOWS, SEMANTIC_Z_INDEX, MOTION_TOKENS, BREAKPOINTS, PLATFORM_LIMITS, } from "./_internal/shared/tokens/index";
 export type { Responsive, Breakpoint, SemanticColor } from "./_internal/shared/tokens/index";

package/dist/client.d.ts

@@ -62,9 +62,11 @@ export type { UseBulkSelectionOptions, UseBulkSelectionReturn } from "./react/ho
 export { useEntityDelete } from "./react/hooks/useEntityDelete";
 export type { UseEntityDeleteOptions, UseEntityDeleteReturn } from "./react/hooks/useEntityDelete";
 export { ROUTES, PUBLIC_ROUTES, PROTECTED_ROUTES, AUTH_ROUTES } from "./constants/index";
+export { SORT_DIR, sortBy } from "./constants/sort";
+export { SIEVE_OP, sieveFilter, sieveAnd, sieveMultiEq } from "./utils/sieve-builder";
 export { Container, Grid, Row, Stack } from "./ui/components/Layout";
 export { Div } from "./ui/components/Div";
-export { Main, Section } from "./ui/components/Semantic";
+export { Main, Section, Nav, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td } from "./ui/components/Semantic";
 export { Badge } from "./ui/components/Badge";
 export { Button } from "./ui/components/Button";
 export { ClaimCouponButton } from "./ui/components/ClaimCouponButton";

package/dist/client.js

@@ -125,9 +125,11 @@ export { useBulkSelection } from "./react/hooks/useBulkSelection";
 export { useEntityDelete } from "./react/hooks/useEntityDelete";
 // Client-safe constants, UI primitives, and views
 export { ROUTES, PUBLIC_ROUTES, PROTECTED_ROUTES, AUTH_ROUTES } from "./constants/index";
+export { SORT_DIR, sortBy } from "./constants/sort";
+export { SIEVE_OP, sieveFilter, sieveAnd, sieveMultiEq } from "./utils/sieve-builder";
 export { Container, Grid, Row, Stack } from "./ui/components/Layout";
 export { Div } from "./ui/components/Div";
-export { Main, Section } from "./ui/components/Semantic";
+export { Main, Section, Nav, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td } from "./ui/components/Semantic";
 export { Badge } from "./ui/components/Badge";
 export { Button } from "./ui/components/Button";
 export { ClaimCouponButton } from "./ui/components/ClaimCouponButton";

package/dist/configs/next.js

@@ -11,8 +11,8 @@ import path from "path";
  *   current and future @google-cloud/* subpackage (incl. build/protos/**) is
  *   included in Vercel Lambda bundles without needing per-package entries.
  * - Consumer additions to the same route key are MERGED (union), not replaced.
- * - `images.remotePatterns` restricts to Firebase Storage + localhost; consumer
- *   can append additional patterns via `images.remotePatterns`.
+ * - `images.unoptimized: true` by default so any external host loads without
+ *   remotePatterns maintenance (consumer can override).
  * - `experimental.serverActions.bodySizeLimit` set to "4mb"
  * - Optional `IgnorePlugin` for optional native deps (request, fast-crc32c)
  *
@@ -268,23 +268,16 @@ export function defineNextConfig(override = {}) {
         }
         return consumerWebpack ? consumerWebpack(config, ctx) : config;
     }
-    // Default remotePatterns: Firebase Storage + localhost only.
-    // External URLs are watermarked via /api/media/ext — they must never be
-    // loaded directly by next/image. Consumer can append additional patterns.
-    const defaultRemotePatterns = [
-        { protocol: "https", hostname: "firebasestorage.googleapis.com" },
-        { protocol: "https", hostname: "*.firebasestorage.googleapis.com" },
-        { protocol: "https", hostname: "storage.googleapis.com" },
-        { protocol: "http", hostname: "localhost" },
-        { protocol: "http", hostname: "127.0.0.1" },
-    ];
+    // Default to `unoptimized: true` so any external image host loads without
+    // remotePatterns maintenance. Pre-launch demo data pulls from various
+    // hosts (ygoprodeck, unsplash, picsum); prod images move to Firebase
+    // Storage via /api/media. Consumer can still pass an explicit
+    // `images.unoptimized: false` + remotePatterns to opt back in.
     const consumerImages = override.images ?? {};
-    const consumerRemotePatterns = consumerImages.remotePatterns ?? [];
-    const mergedRemotePatterns = [
-        ...defaultRemotePatterns,
-        ...consumerRemotePatterns.filter((p) => !defaultRemotePatterns.some((d) => d.hostname ===
-            p.hostname)),
-    ];
+    const mergedImages = {
+        unoptimized: true,
+        ...consumerImages,
+    };
     // Turbopack (used by `next build`) has its own alias system separate from
     // webpack. Mirror the firebase deduplication alias so prod builds share the
     // same Firebase app registry as dev builds.
@@ -299,10 +292,7 @@ export function defineNextConfig(override = {}) {
         },
     };
     return {
-        images: {
-            ...consumerImages,
-            remotePatterns: mergedRemotePatterns,
-        },
+        images: mergedImages,
         ...rest,
         serverExternalPackages: mergedExternal,
         experimental: mergedExperimental,

package/dist/constants/api-endpoints.d.ts

@@ -137,6 +137,8 @@ export declare const ADMIN_ENDPOINTS: {
     readonly SCAMMER_BY_ID: (id: string) => string;
     readonly ADDRESSES: "/api/admin/addresses";
     readonly ADDRESS_BY_ID: (id: string) => string;
+    readonly GROUPED_LISTINGS: "/api/admin/grouped-listings";
+    readonly GROUPED_LISTING_BY_ID: (id: string) => string;
 };
 export declare const CHAT_ENDPOINTS: {
     readonly LIST: "/api/chat";
@@ -457,6 +459,8 @@ export declare const API_ENDPOINTS: {
         readonly SCAMMER_BY_ID: (id: string) => string;
         readonly ADDRESSES: "/api/admin/addresses";
         readonly ADDRESS_BY_ID: (id: string) => string;
+        readonly GROUPED_LISTINGS: "/api/admin/grouped-listings";
+        readonly GROUPED_LISTING_BY_ID: (id: string) => string;
     };
     readonly CHAT: {
         readonly LIST: "/api/chat";
@@ -779,6 +783,8 @@ export declare const API_ROUTES: {
         readonly SCAMMER_BY_ID: (id: string) => string;
         readonly ADDRESSES: "/api/admin/addresses";
         readonly ADDRESS_BY_ID: (id: string) => string;
+        readonly GROUPED_LISTINGS: "/api/admin/grouped-listings";
+        readonly GROUPED_LISTING_BY_ID: (id: string) => string;
     };
     readonly CHAT: {
         readonly LIST: "/api/chat";

package/dist/constants/api-endpoints.js

@@ -156,6 +156,8 @@ export const ADMIN_ENDPOINTS = {
     SCAMMER_BY_ID: (id) => `/api/admin/scammers/${id}`,
     ADDRESSES: "/api/admin/addresses",
     ADDRESS_BY_ID: (id) => `/api/admin/addresses/${id}`,
+    GROUPED_LISTINGS: "/api/admin/grouped-listings",
+    GROUPED_LISTING_BY_ID: (id) => `/api/admin/grouped-listings/${id}`,
 };
 // ---------------------------------------------------------------------------
 // Chat

package/dist/features/about/components/AboutView.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, Section, Span, Text } from "../../../ui";
+import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
+const __P = {
+    p8: "p-8",
+};
 export function AboutView({ labels = {}, howItems = [], valueItems = [], milestones = [], heroBannerClass = "bg-gradient-to-br from-violet-600 to-indigo-600", ctaBannerClass = "bg-gradient-to-br from-violet-600 to-indigo-600", renderCtaButtons, }) {
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "aboutview-div-81", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-16 md:py-20 lg:py-24`, children: _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", "data-section": "aboutview-div-82", children: [_jsx(Heading, { level: 1, variant: "none", className: "text-4xl md:text-5xl font-bold mb-6 text-white", children: labels.title }), _jsx(Text, { variant: "none", className: "text-xl text-white/80 max-w-2xl mx-auto", children: labels.subtitle })] }) }), _jsxs("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20 space-y-16 md:space-y-20", "data-section": "aboutview-div-83", children: [_jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [_jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }), _jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-12", children: labels.howItWorksTitle }), _jsx("div", { className: "grid md:grid-cols-3 gap-6 md:gap-8", "data-section": "aboutview-div-84", children: howItems.map(({ title, text, icon, color }) => (_jsxs("div", { className: `bg-gradient-to-br ${color ?? "from-primary/5 to-primary/5"} rounded-2xl p-6 space-y-3`, "data-section": "aboutview-div-85", children: [_jsx("div", { className: "text-4xl", "data-section": "aboutview-div-86", children: icon }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-12", children: labels.valuesTitle }), _jsx("div", { className: "grid md:grid-cols-3 gap-5 md:gap-6", "data-section": "aboutview-div-87", children: valueItems.map(({ title, text, icon }) => (_jsxs("div", { className: "bg-white dark:bg-slate-800 rounded-xl p-6 space-y-3 border border-neutral-200 dark:border-slate-700", "data-section": "aboutview-div-88", children: [_jsx("div", { className: "text-3xl", "data-section": "aboutview-div-89", children: icon }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-10", children: labels.milestonesTitle }), _jsx("div", { className: "relative border-l-2 border-primary/30 pl-8 space-y-8 max-w-2xl mx-auto", "data-section": "aboutview-div-90", children: milestones.map(({ year, text }) => (_jsxs("div", { className: "relative", "data-section": "aboutview-div-91", children: [_jsx("div", { className: "absolute -left-10 top-1 w-4 h-4 rounded-full bg-primary border-2 border-white dark:border-slate-900" }), _jsx(Span, { size: "xs", weight: "bold", className: "text-primary uppercase tracking-wide", children: year }), _jsx(Text, { className: "mt-1", children: text })] }, year))) })] }), _jsxs(Section, { className: `text-center ${ctaBannerClass} rounded-2xl p-8 md:p-12 text-white`, children: [_jsx(Heading, { level: 2, variant: "none", className: "text-3xl font-bold mb-8 text-white", children: labels.ctaTitle }), renderCtaButtons ? (renderCtaButtons()) : (_jsx("div", { className: "flex justify-center gap-3 flex-wrap", "data-section": "aboutview-div-92", children: _jsxs(Span, { className: "text-white/70 text-sm", children: [labels.ctaSell, " \u00B7 ", labels.ctaShop] }) }))] })] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-16 md:py-20 lg:py-24`, children: _jsxs(Div, { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [_jsx(Heading, { level: 1, variant: "none", className: "text-4xl md:text-5xl font-bold mb-6 text-white", children: labels.title }), _jsx(Text, { variant: "none", className: "text-xl text-white/80 max-w-2xl mx-auto", children: labels.subtitle })] }) }), _jsxs(Div, { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20 space-y-16 md:space-y-20", children: [_jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [_jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }), _jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-12", children: labels.howItWorksTitle }), _jsx(Div, { className: "grid md:grid-cols-3 gap-6 md:gap-8", children: howItems.map(({ title, text, icon, color }) => (_jsxs("div", { className: `bg-gradient-to-br ${color ?? "from-primary/5 to-primary/5"} rounded-2xl p-6 space-y-3`, children: [_jsx(Div, { className: "text-4xl", children: icon }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-12", children: labels.valuesTitle }), _jsx(Div, { className: "grid md:grid-cols-3 gap-5 md:gap-6", children: valueItems.map(({ title, text, icon }) => (_jsxs("div", { className: "bg-white dark:bg-slate-800 rounded-xl p-6 space-y-3 border border-neutral-200 dark:border-slate-700", children: [_jsx(Div, { className: "text-3xl", children: icon }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-10", children: labels.milestonesTitle }), _jsx(Div, { className: "relative border-l-2 border-primary/30 pl-8 space-y-8 max-w-2xl mx-auto", children: milestones.map(({ year, text }) => (_jsxs(Div, { className: "relative", children: [_jsx(Div, { className: "absolute -left-10 top-1 w-4 h-4 rounded-full bg-primary border-2 border-white dark:border-slate-900" }), _jsx(Span, { size: "xs", weight: "bold", className: "text-primary uppercase tracking-wide", children: year }), _jsx(Text, { className: "mt-1", children: text })] }, year))) })] }), _jsxs(Section, { className: `text-center ${ctaBannerClass} rounded-2xl ${__P.p8} md:p-12 text-white`, children: [_jsx(Heading, { level: 2, variant: "none", className: "text-3xl font-bold mb-8 text-white", children: labels.ctaTitle }), renderCtaButtons ? (renderCtaButtons()) : (_jsx(Row, { justify: "center", gap: "3", wrap: true, children: _jsxs(Span, { size: "sm", className: "text-white/70", children: [labels.ctaSell, " \u00B7 ", labels.ctaShop] }) }))] })] })] }));
 }

package/dist/features/about/components/FAQPageView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, RichTextRenderer } from "../../../ui";
+import { Div, Heading, Text, Section, Stack, RichTextRenderer } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { HelpCircle, ChevronRight } from "lucide-react";
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
@@ -19,9 +19,9 @@ export async function FAQPageView({ category, heroBannerClass = DEFAULT_HERO_CLA
         ? allItems.filter((item) => item.category === category)
         : allItems;
     const activeCategory = categories.find((c) => c.slug === category);
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "faqpageview-div-93", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "faqpageview-div-94", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-3 text-white", children: activeCategory ? activeCategory.label : t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsx("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16`, "data-section": "faqpageview-div-95", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-8", "data-section": "faqpageview-div-96", children: [categories.length > 0 && (_jsxs("aside", { className: "md:w-56 flex-shrink-0", children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400 mb-3", children: t("categoriesLabel") }), _jsxs("nav", { className: "space-y-1", children: [_jsxs(TextLink, { href: String(ROUTES.PUBLIC.FAQS), className: `flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${!category
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-3 text-white", children: activeCategory ? activeCategory.label : t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsx(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16`, children: _jsxs(Div, { className: "flex flex-col md:flex-row gap-8", children: [categories.length > 0 && (_jsxs("aside", { className: "md:w-56 flex-shrink-0", children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400 mb-3", children: t("categoriesLabel") }), _jsxs("nav", { className: "space-y-1", children: [_jsxs(TextLink, { href: String(ROUTES.PUBLIC.FAQS), className: `flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${!category
                                                 ? "bg-primary/10 text-primary font-semibold"
                                                 : "hover:bg-neutral-100 dark:hover:bg-neutral-800"}`, children: [_jsxs("span", { className: `${flex.row} gap-2`, children: [_jsx(HelpCircle, { className: "w-4 h-4" }), t("allCategories")] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }), categories.map((cat) => (_jsxs(TextLink, { href: String(ROUTES.PUBLIC.FAQ_CATEGORY(cat.slug)), className: `flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${category === cat.slug
                                                 ? "bg-primary/10 text-primary font-semibold"
-                                                : "hover:bg-neutral-100 dark:hover:bg-neutral-800"}`, children: [_jsxs("span", { className: `${flex.row} gap-2`, children: [_jsx("span", { children: cat.icon }), cat.label] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }, cat.slug)))] })] })), _jsxs("div", { className: "flex-1 min-w-0", "data-section": "faqpageview-div-97", children: [visibleItems.length === 0 ? (_jsxs(Section, { className: `text-center py-16 rounded-2xl border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(HelpCircle, { className: "w-10 h-10 mx-auto mb-3 text-zinc-300 dark:text-zinc-600" }), _jsx(Heading, { level: 3, className: "mb-2 text-base", children: t("emptyTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("emptyText") })] })) : (_jsx(Stack, { gap: "sm", className: "space-y-3", children: visibleItems.map((item, i) => (_jsxs("details", { className: `group rounded-xl border ${themed.border} ${themed.bgPrimary} overflow-hidden`, children: [_jsxs("summary", { className: `flex items-center justify-between px-5 py-4 cursor-pointer list-none select-none font-medium text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors`, children: [_jsx("span", { children: item.question }), _jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 ml-3 transition-transform group-open:rotate-90" })] }), _jsx("div", { className: "px-5 pb-5 pt-1", "data-section": "faqpageview-div-98", children: _jsx(RichTextRenderer, { html: item.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" }) })] }, i))) })), _jsxs(Section, { className: `mt-10 rounded-2xl p-6 text-center border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 3, className: "mb-2 text-base", children: t("stillNeedHelpTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm mb-4", children: t("stillNeedHelpText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "faqpageview-div-99", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("contactUs") })] })] })] })] }) })] }));
+                                                : "hover:bg-neutral-100 dark:hover:bg-neutral-800"}`, children: [_jsxs("span", { className: `${flex.row} gap-2`, children: [_jsx("span", { children: cat.icon }), cat.label] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }, cat.slug)))] })] })), _jsxs(Div, { className: "flex-1 min-w-0", children: [visibleItems.length === 0 ? (_jsxs(Section, { className: `text-center py-16 rounded-2xl border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(HelpCircle, { className: "w-10 h-10 mx-auto mb-3 text-zinc-300 dark:text-zinc-600" }), _jsx(Heading, { level: 3, className: "mb-2 text-base", children: t("emptyTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("emptyText") })] })) : (_jsx(Stack, { gap: "sm", className: "space-y-3", children: visibleItems.map((item, i) => (_jsxs("details", { className: `group rounded-xl border ${themed.border} ${themed.bgPrimary} overflow-hidden`, children: [_jsxs("summary", { className: `flex items-center justify-between px-5 py-4 cursor-pointer list-none select-none font-medium text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors`, children: [_jsx("span", { children: item.question }), _jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 ml-3 transition-transform group-open:rotate-90" })] }), _jsx(Div, { className: "px-5 pb-5 pt-1", children: _jsx(RichTextRenderer, { html: item.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" }) })] }, i))) })), _jsxs(Section, { className: `mt-10 rounded-2xl p-6 text-center border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 3, className: "mb-2 text-base", children: t("stillNeedHelpTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm mb-4", children: t("stillNeedHelpText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("contactUs") })] })] })] })] }) })] }));
 }

package/dist/features/about/components/FeesView.js

@@ -1,8 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Caption } from "../../../ui";
+import { Div, Heading, Text, Section, Caption, Table, Thead, Tbody, Tr, Th, Td } from "../../../ui";
+const __P = {
+    p5: "p-5",
+};
+const __O = {
+    xAuto: "overflow-x-auto",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
+const CLS_RATE_CELL = "py-3 px-4 font-semibold text-violet-700 dark:text-violet-400";
+const CLS_HIGHLIGHT = "font-bold text-green-700 dark:text-green-400";
 export async function FeesView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, page } = THEME_CONSTANTS;
     const { getTranslations } = await import("next-intl/server");
@@ -53,14 +61,14 @@ export async function FeesView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
         { label: t("netPayoutLabel"), example: "= ₹917.40", highlight: true },
     ];
     void ROUTES; // ROUTES imported for future CTA links if needed
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "feesview-div-100", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.sm} text-center`, "data-section": "feesview-div-101", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.sm} py-10 md:py-12 lg:py-16 space-y-12`, "data-section": "feesview-div-102", children: [renderFeeTableSection(t, themed, FEE_ROWS), renderPayoutExampleSection(t, themed, OFFER_PAYOUT_ROWS), renderDisclaimerSection(t, themed)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.sm} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.sm} py-10 md:py-12 lg:py-16 space-y-12`, children: [renderFeeTableSection(t, themed, FEE_ROWS), renderPayoutExampleSection(t, themed, OFFER_PAYOUT_ROWS), renderDisclaimerSection(t, themed)] })] }));
 }
 function renderFeeTableSection(t, themed, rows) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("tableTitle") }), _jsx("div", { className: `overflow-x-auto rounded-xl border ${themed.border}`, "data-section": "feesview-div-103", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: themed.bgSecondary, children: _jsxs("tr", { children: [_jsx("th", { className: "py-3 px-4 text-left font-semibold", children: t("colFeeType") }), _jsx("th", { className: "py-3 px-4 text-left font-semibold", children: t("colRate") }), _jsx("th", { className: "py-3 px-4 text-left font-semibold", children: t("colPaidBy") }), _jsx("th", { className: "py-3 px-4 text-left font-semibold hidden md:table-cell", children: t("colNote") })] }) }), _jsx("tbody", { className: "divide-y divide-neutral-100 dark:divide-neutral-800", children: rows.map((row) => (_jsxs("tr", { className: `${themed.bgPrimary} hover:bg-neutral-50 dark:hover:bg-neutral-800/50`, children: [_jsx("td", { className: "py-3 px-4 font-medium", children: row.category }), _jsx("td", { className: "py-3 px-4 font-semibold text-violet-700 dark:text-violet-400", children: row.rate }), _jsx("td", { className: "py-3 px-4", children: _jsx(Caption, { children: row.who }) }), _jsx("td", { className: "py-3 px-4 text-neutral-500 dark:text-neutral-400 hidden md:table-cell text-xs", children: row.note })] }, row.category))) })] }) }), _jsx(Caption, { className: "mt-3 block text-zinc-500 dark:text-zinc-400", children: t("tableNote") })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("tableTitle") }), _jsx(Div, { className: `${__O.xAuto} rounded-xl border ${themed.border}`, children: _jsxs(Table, { className: "w-full text-sm", children: [_jsx(Thead, { className: themed.bgSecondary, children: _jsxs(Tr, { children: [_jsx(Th, { className: "py-3 px-4 text-left font-semibold", children: t("colFeeType") }), _jsx(Th, { className: "py-3 px-4 text-left font-semibold", children: t("colRate") }), _jsx(Th, { className: "py-3 px-4 text-left font-semibold", children: t("colPaidBy") }), _jsx(Th, { className: "py-3 px-4 text-left font-semibold hidden md:table-cell", children: t("colNote") })] }) }), _jsx(Tbody, { className: "divide-y divide-neutral-100 dark:divide-neutral-800", children: rows.map((row) => (_jsxs(Tr, { className: `${themed.bgPrimary} hover:bg-neutral-50 dark:hover:bg-neutral-800/50`, children: [_jsx(Td, { className: "py-3 px-4 font-medium", children: row.category }), _jsx(Td, { className: CLS_RATE_CELL, children: row.rate }), _jsx(Td, { className: "py-3 px-4", children: _jsx(Caption, { children: row.who }) }), _jsx(Td, { className: "py-3 px-4 text-neutral-500 dark:text-neutral-400 hidden md:table-cell text-xs", children: row.note })] }, row.category))) })] }) }), _jsx(Caption, { className: "mt-3 block text-zinc-500 dark:text-zinc-400", children: t("tableNote") })] }));
 }
 function renderPayoutExampleSection(t, themed, rows) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("payoutExampleTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6", children: t("payoutExampleSubtitle") }), _jsxs("div", { className: `rounded-xl border ${themed.border} ${themed.bgPrimary} p-5 max-w-sm`, "data-section": "feesview-div-104", children: [_jsx(Heading, { level: 3, className: "text-base mb-4", children: t("payoutExampleProduct") }), _jsx("div", { className: "space-y-2", "data-section": "feesview-div-105", children: rows.map((row, i) => (_jsxs("div", { className: `flex justify-between text-sm ${row.highlight ? "border-t border-neutral-200 dark:border-neutral-700 pt-2 mt-2 font-bold" : ""}`, "data-section": "feesview-div-106", children: [_jsx(Text, { className: row.highlight ? "font-bold" : "text-neutral-600 dark:text-neutral-400", children: row.label }), _jsx(Text, { className: row.highlight ? "font-bold text-green-700 dark:text-green-400" : "", children: row.example })] }, i))) })] })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("payoutExampleTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6", children: t("payoutExampleSubtitle") }), _jsxs(Div, { className: `rounded-xl border ${themed.border} ${themed.bgPrimary} ${__P.p5} max-w-sm`, children: [_jsx(Heading, { level: 3, className: "text-base mb-4", children: t("payoutExampleProduct") }), _jsx(Div, { className: "space-y-2", children: rows.map((row, i) => (_jsxs(Div, { className: `flex justify-between text-sm ${row.highlight ? "border-t border-neutral-200 dark:border-neutral-700 pt-2 mt-2 font-bold" : ""}`, children: [_jsx(Text, { className: row.highlight ? "font-bold" : "text-neutral-600 dark:text-neutral-400", children: row.label }), _jsx(Text, { className: row.highlight ? CLS_HIGHLIGHT : "", children: row.example })] }, i))) })] })] }));
 }
 function renderDisclaimerSection(t, themed) {
-    return (_jsxs(Section, { className: `rounded-xl border ${themed.border} p-5 ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 3, className: "text-base mb-2", children: t("disclaimerTitle") }), _jsx(Caption, { className: "leading-relaxed", children: t("disclaimerText") })] }));
+    return (_jsxs(Section, { className: `rounded-xl border ${themed.border} ${__P.p5} ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 3, className: "text-base mb-2", children: t("disclaimerTitle") }), _jsx(Caption, { className: "leading-relaxed", children: t("disclaimerText") })] }));
 }