@mohasinac/appkit 4.26.0 → 4.28.0

package/dist/features/products/components/CompareOverlay.js

@@ -9,7 +9,7 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const REL_NOOPENER = "noopener noreferrer";
-const CLS_REMOVE_BTN = "shrink-0 text-zinc-400 hover:bg-[var(--appkit-color-surface)] hover:text-error hover:bg-[var(--appkit-color-surface-elevated)]";
+const CLS_REMOVE_BTN = "shrink-0 text-zinc-400 hover:text-error hover:bg-surface-hover";
 import Link from "next/link";
 import { X } from "lucide-react";
 import { Button, Div, Heading, IconButton, Row, Span, Stack, Text } from "../../../ui";

package/dist/features/products/components/PrizeDrawDetailPageView.js

@@ -44,7 +44,7 @@ function statusClass(s) {
         case "open":
             return "bg-success-surface text-success";
         case "closed":
-            return "bg-zinc-200 text-zinc-700 bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]";
+            return " bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]";
         case "pending":
         default:
             return "bg-warning-surface text-warning";

package/dist/features/products/components/PrizeDrawEntryActions.js

@@ -18,7 +18,7 @@ import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
  */
 export function PrizeDrawEntryActions({ productId, productSlug, title, pricePerEntry, currency, remainingEntries, revealStatus, prizeGithubFileUrl, }) {
     const router = useRouter();
-    const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();
+    const { requireAuth, isAuthResolving, modalOpen, modalMessage, closeModal } = useAuthGate();
     const [consentOpen, setConsentOpen] = useState(false);
     const closed = revealStatus === "closed" || remainingEntries === 0;
     const handleEnter = useCallback(() => {
@@ -31,5 +31,5 @@ export function PrizeDrawEntryActions({ productId, productSlug, title, pricePerE
         const slug = productSlug ?? productId;
         router.push(`${String(ROUTES.USER.CHECKOUT)}?directItem=${encodeURIComponent(slug)}&type=prize-draw`);
     }, [productSlug, productId, router]);
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "2xl", weight: "bold", color: "primary", children: [formatCurrency(pricePerEntry, currency), _jsx(Text, { as: "span", className: "ml-1 text-[var(--appkit-color-text-muted)]", size: "xs", weight: "normal", children: "per entry" })] }), _jsx(Button, { action: closed ? undefined : ACTIONS.PRIZE_DRAW["buy-now"], variant: "primary", size: "md", className: "w-full", disabled: closed, onClick: handleEnter, children: closed ? "Draw closed" : undefined }), prizeGithubFileUrl ? (_jsx(Anchor, { href: prizeGithubFileUrl, tone: "none", underline: "hover", size: "xs", weight: "medium", className: "text-left text-primary-600 underline-offset-4 dark:text-primary-400", children: "View RNG source code on GitHub \u2192" })) : null, _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", align: "start", children: "Winners chosen by Node.js crypto.randomInt \u2014 fully auditable. Entries are locked once paid; refunds only if the prize pool is exhausted." }), _jsx(NonRefundableConsentModal, { open: consentOpen, listingType: "prize-draw", itemTitle: title, priceLabel: formatCurrency(pricePerEntry, currency), onCancel: () => setConsentOpen(false), onConfirm: handleConfirm }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "2xl", weight: "bold", color: "primary", children: [formatCurrency(pricePerEntry, currency), _jsx(Text, { as: "span", className: "ml-1 text-[var(--appkit-color-text-muted)]", size: "xs", weight: "normal", children: "per entry" })] }), _jsx(Button, { action: closed ? undefined : ACTIONS.PRIZE_DRAW["buy-now"], variant: "primary", size: "md", className: "w-full", disabled: closed || isAuthResolving, onClick: handleEnter, children: closed ? "Draw closed" : isAuthResolving ? "Checking…" : undefined }), prizeGithubFileUrl ? (_jsx(Anchor, { href: prizeGithubFileUrl, tone: "none", underline: "hover", size: "xs", weight: "medium", className: "text-left text-primary-600 underline-offset-4 dark:text-primary-400", children: "View RNG source code on GitHub \u2192" })) : null, _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", align: "start", children: "Winners chosen by Node.js crypto.randomInt \u2014 fully auditable. Entries are locked once paid; refunds only if the prize pool is exhausted." }), _jsx(NonRefundableConsentModal, { open: consentOpen, listingType: "prize-draw", itemTitle: title, priceLabel: formatCurrency(pricePerEntry, currency), onCancel: () => setConsentOpen(false), onConfirm: handleConfirm }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

package/dist/features/products/components/PrizeDrawsSection.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { sortBy } from "@mohasinac/appkit/client";
+// Import from the DEFINING module, never `@mohasinac/appkit/client` — that entry
+// is `"use client"`, so in this async Server Component `sortBy` would resolve to
+// a client-reference proxy and calling it throws during the server render
+// (Root Cause #18). That is exactly what took `section-prize-draws` down.
+import { sortBy } from "../../../constants/sort";
 import { Container, Div, Heading, Section, Stack, Text, } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { listPublicProducts } from "../../../_internal/server/features/products/list-public";

package/dist/features/products/components/ProductDetailActions.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Button, Stack, LoginRequiredModal } from "../../../ui";
+import { Button, Stack, LoginRequiredModal, Icon } from "../../../ui";
 import { useToast } from "../../../ui/components/Toast";
 import { useAddToCart } from "../../cart/hooks/useAddToCart";
 import { apiClient } from "../../../http";
@@ -22,9 +22,13 @@ import { normalizeError } from "../../../errors/normalize";
 export function ProductDetailActions({ productId, productTitle, productImage, price, currency, storeId, storeName, inStock, variant = "desktop", }) {
     const router = useRouter();
     const { showToast } = useToast();
-    const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();
+    const { requireAuth, isAuthResolving, modalOpen, modalMessage, closeModal } = useAuthGate();
     const [busy, setBusy] = useState(null);
     const [wishlisted, setWishlisted] = useState(false);
+    // `isAuthResolving` covers the window where the session has not settled and a
+    // click would be parked by useAuthGate rather than acted on. Without it the
+    // button looks live, swallows the click, and appears to do nothing.
+    const blocked = busy !== null || isAuthResolving;
     // Success toast (item + updated count/total) is now shown by useAddToCart
     // itself — centralised so every add-to-cart call site gets the same
     // richer toast, not just this one.
@@ -98,24 +102,24 @@ export function ProductDetailActions({ productId, productTitle, productImage, pr
             actions: [
                 {
                     id: ACTION_ID.ADD_TO_WISHLIST,
-                    label: wishlisted ? "♥ Saved" : "♡ Wishlist",
+                    label: wishlisted ? "Saved" : "Wishlist",
                     variant: "ghost",
                     grow: false,
-                    disabled: busy !== null || wishlisted,
+                    disabled: blocked || wishlisted,
                     onClick: handleWishlist,
                 },
                 {
                     id: ACTION_ID.ADD_TO_CART,
                     label: busy === "cart" ? "Adding…" : "Add to Cart",
                     variant: "outline",
-                    disabled: !inStock || busy !== null,
+                    disabled: !inStock || blocked,
                     onClick: () => handleAddToCart(),
                 },
                 {
                     id: ACTION_ID.BUY_NOW,
                     label: !inStock ? "Out of Stock" : busy === "buy" ? "Loading…" : "Buy Now",
                     variant: "primary",
-                    disabled: !inStock || busy !== null,
+                    disabled: !inStock || blocked,
                     onClick: handleBuyNow,
                 },
             ],
@@ -132,5 +136,5 @@ export function ProductDetailActions({ productId, productTitle, productImage, pr
     if (variant === "mobile") {
         return _jsx(_Fragment, { children: authModal });
     }
-    return (_jsxs(_Fragment, { children: [authModal, _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: !inStock || busy !== null, onClick: handleBuyNow, children: !inStock ? "Out of Stock" : busy === "buy" ? "Loading…" : "Buy Now" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: !inStock || busy !== null, onClick: () => handleAddToCart(), children: !inStock ? "Out of Stock" : busy === "cart" ? "Adding…" : "Add to Cart" }), _jsx(Button, { variant: "ghost", size: "md", className: "w-full", disabled: busy !== null || wishlisted, onClick: handleWishlist, children: wishlisted ? "♥ In Wishlist" : "♡ Add to Wishlist" })] })] }));
+    return (_jsxs(_Fragment, { children: [authModal, _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: !inStock || blocked, onClick: handleBuyNow, children: !inStock ? "Out of Stock" : busy === "buy" ? "Loading…" : "Buy Now" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: !inStock || blocked, onClick: () => handleAddToCart(), children: !inStock ? "Out of Stock" : busy === "cart" ? "Adding…" : "Add to Cart" }), _jsxs(Button, { variant: "ghost", size: "md", className: "w-full", disabled: blocked || wishlisted, onClick: handleWishlist, children: [_jsx(Icon, { name: "wishlist", size: "md", filled: wishlisted }), wishlisted ? "In Wishlist" : "Add to Wishlist"] })] })] }));
 }

package/dist/features/products/components/ProductDetailPageView.js

@@ -22,7 +22,7 @@ const CLS_BUNDLE_LABEL = "text-[length:var(--appkit-text-xs)] text-success dark:
 const CLS_BUNDLE_CTA = "flex-shrink-0 rounded-lg bg-success-solid hover:brightness-110 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-success-on-solid transition-colors";
 import { ROUTES } from "../../../next";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
-import { Button, Container, Div, Heading, Main, Nav, PriceDisplay, RichText, Row, Section, Span, Stack, Text, Ul, Ol, Li, Dl, Dt, Dd, } from "../../../ui";
+import { Button, Container, Div, Heading, Main, Nav, PriceDisplay, RichText, Row, Section, Span, Stack, Text, Ul, Ol, Li, Dl, Dt, Dd, Icon, } from "../../../ui";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 import { safeDisplayName } from "../../../security";
 import { ReviewsListingPanel } from "../../reviews/components/ReviewsListingPanel";
@@ -204,7 +204,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                                     ? ` — only ${effectiveStock} left`
                                                     : ""] })] })) : (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `w-fit .5 ${inStock ? CLS_STOCK_IN : CLS_STOCK_OUT}`, rounded: "full", padding: "pill-md", size: "xs", weight: "medium", children: [inStock ? "✓ In Stock" : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
                                             ? ` — only ${effectiveStock} left`
-                                            : ""] })), (categorySlugs.length > 0 || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [categorySlugs.map((slug, i) => (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryNames[i] ?? slug }, slug))), subcategory && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", transform: "capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_PILL, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, codAvailable: codEnabled === true, codHref: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), emiAvailable: emiEnabled === true, emiHref: String(ROUTES.PUBLIC.HOW_EMI_WORKS), condition: condition ?? undefined, returnable: returnPolicy != null && returnPolicy.length > 0, labels: {
+                                            : ""] })), (categorySlugs.length > 0 || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [categorySlugs.map((slug, i) => (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: categoryNames[i] ?? slug }, slug))), subcategory && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", transform: "capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_PILL, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, codAvailable: codEnabled === true, codHref: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), emiAvailable: emiEnabled === true, emiHref: String(ROUTES.PUBLIC.HOW_EMI_WORKS), condition: condition ?? undefined, returnable: returnPolicy != null && returnPolicy.length > 0, labels: {
                                         featured: "Featured",
                                         fasterDelivery: "Faster Delivery",
                                         ratedSeller: "Rated Seller",
@@ -232,7 +232,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                             storeName: typeof p.storeName === "string" ? p.storeName : undefined,
                                             inStock,
                                             variant: "desktop",
-                                        })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "ghost", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: "\u2661 Add to Wishlist" })] })), allowOffers && offerableType && offersEnabled && price !== null && renderOfferAction?.({
+                                        })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsxs(Button, { variant: "ghost", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: [_jsx(Icon, { name: "wishlist", size: "md" }), "Add to Wishlist"] })] })), allowOffers && offerableType && offersEnabled && price !== null && renderOfferAction?.({
                                             productId: product.id,
                                             price,
                                             currency,

package/dist/features/products/components/ProductFeatureBadges.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-import { Row, Span, TextLink } from "../../../ui";
+import { Row, Span, TextLink, Icon } from "../../../ui";
 export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, condition, returnable, freeShipping, wishlistCount, categoryProductCount, categoryName, codAvailable, codHref, emiAvailable, emiHref, labels, formatCount, categoryBadgeClassName, }) {
     const badges = [];
     if (featured) {
@@ -89,7 +89,7 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
     if (wishlistCount && wishlistCount > 0) {
         badges.push({
             key: "wishlist",
-            icon: _jsx(Span, { size: "xs", children: "\u2665" }),
+            icon: _jsx(Icon, { name: "wishlist", size: "xs", filled: true }),
             label: labels.wishlistCount(wishlistCount),
             colorClass: "text-pink-700 dark:text-pink-300",
             bgClass: "bg-pink-50 dark:bg-pink-900/30 border-pink-200 dark:border-pink-800",

package/dist/features/products/components/ProductFeaturesSelector.js

@@ -11,7 +11,7 @@ const SECTION_LABEL_CLASS = "text-[var(--appkit-font-size-2xs,11px)] font-semibo
 const ROW_BASE_CLASS = "flex items-start gap-[var(--appkit-space-2)] rounded-lg border px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-xs)] cursor-pointer transition-colors";
 const ROW_CHECKED_CLASS = "border-primary bg-primary/5 dark:bg-primary/10";
 const ROW_DISABLED_CLASS = "border-[var(--appkit-color-border)] opacity-50 cursor-not-allowed";
-const ROW_DEFAULT_CLASS = "border-[var(--appkit-color-border)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]";
+const ROW_DEFAULT_CLASS = "border-[var(--appkit-color-border)] hover:bg-surface-hover";
 const OVER_LIMIT_BANNER_CLASS = "rounded-lg border border-error/20 bg-error-surface px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-xs)] text-error";
 const EMPTY_STATE_CLASS = "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-3)] py-[var(--appkit-space-4)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] text-left";
 function applyProductType(list, productType) {

package/dist/features/products/components/ProductFilters.js

@@ -75,12 +75,21 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
         { value: PRODUCT_FIELDS.CONDITION_VALUES.REFURBISHED, label: t("conditionRefurbished") },
         { value: PRODUCT_FIELDS.CONDITION_VALUES.BROKEN, label: t("conditionBroken") },
     ];
-    const defaultStatusOptions = [
-        { value: PRODUCT_FIELDS.STATUS_VALUES.PUBLISHED, label: t("statusPublished") },
-        { value: PRODUCT_FIELDS.STATUS_VALUES.DRAFT, label: t("statusDraft") },
-        { value: PRODUCT_FIELDS.STATUS_VALUES.IN_REVIEW, label: t("statusInReview") },
-        { value: PRODUCT_FIELDS.STATUS_VALUES.ARCHIVED, label: t("statusArchived") },
-    ];
+    const resolvedVariant = variant ?? (showStatus ? "admin" : "public");
+    const shouldShowStatus = resolvedVariant !== "public" || showStatus;
+    // Built ONLY when the status facet actually renders. This used to be
+    // constructed unconditionally at the top of the component, so every public
+    // listing that never shows a status facet still called t() four times —
+    // five such listings mount ProductFilters, which is how one missing key
+    // (`statusInReview`) produced a MISSING_MESSAGE storm on every page load.
+    const defaultStatusOptions = shouldShowStatus
+        ? [
+            { value: PRODUCT_FIELDS.STATUS_VALUES.PUBLISHED, label: t("statusPublished") },
+            { value: PRODUCT_FIELDS.STATUS_VALUES.DRAFT, label: t("statusDraft") },
+            { value: PRODUCT_FIELDS.STATUS_VALUES.IN_REVIEW, label: t("statusInReview") },
+            { value: PRODUCT_FIELDS.STATUS_VALUES.ARCHIVED, label: t("statusArchived") },
+        ]
+        : [];
     const splitPipe = (key) => table.get(key) ? table.get(key).split("|").filter(Boolean) : [];
     const selectedCategories = splitPipe(TABLE_KEYS.CATEGORY);
     const selectedBrands = splitPipe(TABLE_KEYS.BRAND);
@@ -90,7 +99,5 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
     const selectedStatuses = splitPipe(TABLE_KEYS.STATUS);
     const selectedSublistings = splitPipe(TABLE_KEYS.SUBLISTING_CATEGORY);
     const selectedFeatures = splitPipe(TABLE_KEYS.FEATURES);
-    const resolvedVariant = variant ?? (showStatus ? "admin" : "public");
-    const shouldShowStatus = resolvedVariant !== "public" || showStatus;
     return (_jsxs(Div, { children: [loadCategoryOptions ? (_jsx(AsyncFacetSection, { title: t("category"), loadOptions: loadCategoryOptions, selected: selectedCategories, onChange: (vals) => table.set(TABLE_KEYS.CATEGORY, vals.join("|")), defaultCollapsed: false })) : categoryOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set(TABLE_KEYS.CATEGORY, vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })) : null, _jsx(FilterFacetSection, { title: t("condition"), options: conditionOptions, selected: selectedConditions, onChange: (vals) => table.set(TABLE_KEYS.CONDITION, vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get(TABLE_KEYS.MIN_PRICE), maxValue: table.get(TABLE_KEYS.MAX_PRICE), onMinChange: (v) => table.set(TABLE_KEYS.MIN_PRICE, v), onMaxChange: (v) => table.set(TABLE_KEYS.MAX_PRICE, v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: false }), loadBrandOptions ? (_jsx(AsyncFacetSection, { title: t("brand"), loadOptions: loadBrandOptions, selected: selectedBrands, onChange: (vals) => table.set(TABLE_KEYS.BRAND, vals.join("|")), defaultCollapsed: false })) : brandOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set(TABLE_KEYS.BRAND, vals.join("|")), searchable: brandOptions.length > 4, defaultCollapsed: brandOptions.length > 6 })) : null, loadStoreOptions ? (_jsx(AsyncFacetSection, { title: t("store"), loadOptions: loadStoreOptions, selected: selectedSellers, onChange: (vals) => table.set(TABLE_KEYS.STORE_ID, vals.join("|")), defaultCollapsed: false })) : resolvedStoreOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("store"), options: resolvedStoreOptions, selected: selectedSellers, onChange: (vals) => table.set(TABLE_KEYS.STORE_ID, vals.join("|")), searchable: resolvedStoreOptions.length > 4, defaultCollapsed: resolvedStoreOptions.length > 6 })) : null, showShipping && (_jsx(SwitchFilter, { title: t("shipping"), label: t("freeShippingOnly"), checked: table.get(TABLE_KEYS.FREE_SHIPPING) === "true", onChange: (v) => table.set(TABLE_KEYS.FREE_SHIPPING, v ? "true" : ""), defaultCollapsed: false })), tagOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("tags"), options: tagOptions, selected: selectedTags, onChange: (vals) => table.set(TABLE_KEYS.TAGS, vals.join("|")), searchable: tagOptions.length > 4, defaultCollapsed: tagOptions.length > 6 })), shouldShowStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions ?? defaultStatusOptions, selected: selectedStatuses, onChange: (vals) => table.set(TABLE_KEYS.STATUS, vals.join("|")), searchable: false, defaultCollapsed: false })), sublistingCategoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: "Sublisting Type", options: sublistingCategoryOptions, selected: selectedSublistings, onChange: (vals) => table.set(TABLE_KEYS.SUBLISTING_CATEGORY, vals.join("|")), searchable: sublistingCategoryOptions.length > 4, defaultCollapsed: false })), showBundleFilter && (_jsx(SwitchFilter, { title: "Bundles", label: "Part of a bundle only", checked: table.get(TABLE_KEYS.IS_PART_OF_BUNDLE) === "true", onChange: (v) => table.set(TABLE_KEYS.IS_PART_OF_BUNDLE, v ? "true" : ""), defaultCollapsed: false })), featureOptions.length > 0 && (_jsx(FilterFacetSection, { title: "Features", options: featureOptions, selected: selectedFeatures, onChange: (vals) => table.set(TABLE_KEYS.FEATURES, vals.join("|")), searchable: featureOptions.length > 4, defaultCollapsed: featureOptions.length > 4 }))] }));
 }

package/dist/features/products/components/ProductGrid.js

@@ -15,6 +15,7 @@ import { useProductFeatures } from "./ProductFeaturesContext";
 import { PRODUCT_FEATURE_CARD_MAX_VISIBLE } from "../constants/product-features.constants";
 import { normalizeListingType } from "../utils/listing-type";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
+import { WishlistHeartButton } from "../../wishlist/components/WishlistHeartButton";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -30,15 +31,11 @@ const CLS_BADGE_LIMITED = "rounded-full bg-info-solid px-[var(--appkit-space-2)]
 // inverts with the theme. `warning` because success/info/error are each already
 // taken by a sibling pill in this same stack.
 const CLS_BADGE_OFFERABLE = "rounded-full bg-warning-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-warning-on-solid shadow-sm";
-const CLS_HEART_ACTIVE = "bg-[var(--appkit-color-surface-elevated)]/90 text-error hover:bg-[var(--appkit-color-surface-elevated)]";
-const CLS_HEART_IDLE = "bg-[var(--appkit-color-surface-elevated)]/90 text-[var(--appkit-color-text-muted)] hover:text-error hover:bg-[var(--appkit-color-surface-elevated)]";
 const CLS_STAR = "text-[11px] text-warning";
 const CLS_DISCOUNT_TEXT = "mt-1 text-[11px] font-semibold text-error";
 const CLS_DISCOUNT_TEXT_BARE = "text-[10px] text-error";
 const CLS_STAR_BARE = "text-warning";
 const CLS_BID_TEXT = "text-[11px] text-error";
-const CLS_HEART_ROSE_ACTIVE = "text-error";
-const CLS_HEART_ROSE_IDLE = "text-zinc-300 dark:text-[var(--appkit-color-text-muted)] hover:text-error";
 export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className = "", selectionMode = false, isSelected = false, onSelect, }) {
     const discount = product.originalPrice && product.originalPrice > product.price
         ? Math.round(((product.originalPrice - product.price) / product.originalPrice) *
@@ -55,9 +52,9 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
         ? (e) => { e.preventDefault(); e.stopPropagation(); onSelect?.(product.id); }
         : onClick && !href ? () => onClick(product) : undefined;
     const cardBody = (_jsxs(Div, { role: selectionMode ? "checkbox" : onClick ? "button" : undefined, "aria-checked": selectionMode ? isSelected : undefined, tabIndex: selectionMode || (onClick && !href) ? 0 : undefined, onKeyDown: selectionMode
-            ? (e) => (e.key === "Enter" || e.key === " ") && onSelect?.(product.id)
+            ? (e) => (e.key === "Enter" || e.key === "") && onSelect?.(product.id)
             : onClick && !href
-                ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
+                ? (e) => (e.key === "Enter" || e.key === "") && onClick(product)
                 : undefined, onClick: handleCardClick, ...(!selectionMode ? longPress : {}), className: [
             "group relative flex h-full flex-col overflow-hidden",
             "rounded-2xl border bg-[var(--appkit-color-surface)]",
@@ -73,17 +70,11 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
             .filter(Boolean)
             .join(" "), children: [_jsxs(Div, { className: `relative ${__O.hidden} aspect-square`, surface: "subtle", children: [product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "card", className: "transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { surface: "muted", className: "h-full w-full", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-30", size: "4xl", children: "\uD83D\uDECD\uFE0F" }) })), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(product.id); }, label: isSelected ? "Deselect" : "Select", position: "top-2 left-2", className: selectionMode || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Stack, { className: `absolute top-2 ${onSelect ? "left-10" : "left-2"}`, gap: "xs", children: !selectionMode && !isSelected && (_jsxs(_Fragment, { children: [discount && (_jsxs(Span, { weight: "bold", className: CLS_BADGE_NEW, children: ["-", discount, "%"] })), typeBadge && (_jsx(Span, { weight: "bold", className: `text-[10px] ${typeBadge.cls}`, rounded: "full", padding: "pill-xs", shadow: "sm", children: typeBadge.label })), product.partOfBundleIds && product.partOfBundleIds.length > 0 && (_jsx(Span, { className: CLS_BADGE_SALE, title: product.partOfBundleTitles && product.partOfBundleTitles.length > 0
                                         ? `In bundle: ${product.partOfBundleTitles[0]}`
-                                        : "In a bundle", children: "Bundled" })), product.groupId && (_jsx(Span, { className: CLS_BADGE_TRENDING, title: product.groupTitle ? `Part of set: ${product.groupTitle}` : "Part of a set", children: product.isGroupParent ? "Set Parent" : "In Set" })), product.allowOffers && (_jsx(Span, { className: CLS_BADGE_OFFERABLE, title: "The seller accepts offers on this listing", children: "Taking Offers" })), product.sublistingCategoryId && (_jsx(Span, { className: CLS_BADGE_LIMITED, title: "Has variants or sub-listings", children: "Has Variants" }))] })) }), _jsx(BaseListingCard.IconOverlay, { groupIcon: product.groupIcon, sublistingIcon: product.sublistingIcon, position: "bottom-2 right-2" }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+                                        : "In a bundle", children: "Bundled" })), product.groupId && (_jsx(Span, { className: CLS_BADGE_TRENDING, title: product.groupTitle ? `Part of set: ${product.groupTitle}` : "Part of a set", children: product.isGroupParent ? "Set Parent" : "In Set" })), product.allowOffers && (_jsx(Span, { className: CLS_BADGE_OFFERABLE, title: "The seller accepts offers on this listing", children: "Taking Offers" })), product.sublistingCategoryId && (_jsx(Span, { className: CLS_BADGE_LIMITED, title: "Has variants or sub-listings", children: "Has Variants" }))] })) }), _jsx(BaseListingCard.IconOverlay, { groupIcon: product.groupIcon, sublistingIcon: product.sublistingIcon, position: "bottom-2 right-2" }), onAddToWishlist && (_jsx(WishlistHeartButton, { size: "card", variant: "overlay", inWishlist: !!isWishlisted, addLabel: "Add to wishlist", removeLabel: "Remove from wishlist", className: "absolute right-2 top-2", onToggle: (e) => {
                             e.stopPropagation();
                             e.preventDefault();
                             onAddToWishlist(product.id);
-                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: [
-                            "absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-full shadow-sm",
-                            "transition-all duration-150",
-                            isWishlisted
-                                ? CLS_HEART_ACTIVE
-                                : CLS_HEART_IDLE,
-                        ].join(" "), children: _jsx("svg", { className: "h-4 w-4", fill: isWishlisted ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" }) }) }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3} pt-[0.625rem]`, children: [_jsx(Text, { className: `leading-snug`, truncate: 2, size: "sm", weight: "semibold", color: "primary", children: product.title }), (() => {
+                        } }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3} pt-[0.625rem]`, children: [_jsx(Text, { className: `leading-snug`, truncate: 2, size: "sm", weight: "semibold", color: "primary", children: product.title }), (() => {
                         const categories = Array.isArray(product.categoryNames)
                             ? product.categoryNames.filter(Boolean)
                             : product.categoryName
@@ -142,7 +133,7 @@ function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
             100)
         : null;
     return (_jsxs(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
-            ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
+            ? (e) => (e.key === "Enter" || e.key === "") && onClick(product)
             : undefined, onClick: onClick ? () => onClick(product) : undefined, className: [
             "flex items-center gap-[var(--appkit-space-3)] p-[var(--appkit-space-2)] sm:p-[var(--appkit-space-3)]",
             "hover:bg-[var(--appkit-color-surface)]/60 transition-colors",
@@ -160,10 +151,10 @@ function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
                                 return (_jsx(Span, { weight: "medium", className: `text-[11px] ${low
                                         ? "text-warning"
                                         : "text-[var(--appkit-color-text-faint)]"}`, children: low ? `Only ${stock} left` : `${stock} in stock` }));
-                            })()] })] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+                            })()] })] }), onAddToWishlist && (_jsx(WishlistHeartButton, { size: "inline", inWishlist: !!isWishlisted, addLabel: "Add to wishlist", removeLabel: "Remove from wishlist", onToggle: (e) => {
                     e.stopPropagation();
                     onAddToWishlist(product.id);
-                }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: `flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-full text-[length:var(--appkit-text-base)] leading-none ${isWishlisted ? CLS_HEART_ROSE_ACTIVE : CLS_HEART_ROSE_IDLE}`, children: isWishlisted ? "♥" : "♡" }))] }));
+                } }))] }));
 }
 function safeHref(href) {
     if (!href)

package/dist/features/products/components/ProductTabs.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Row } from "@mohasinac/appkit/ui";
+import { Tabs, TabsList, TabsTrigger } from "@mohasinac/appkit/ui";
 import React from "react";
 import { Div } from "../../../ui/components/Div";
 const DEFAULT_TABS = [
@@ -19,7 +19,10 @@ export function ProductTabs({ renderDescription, renderSpecs, renderReviews, ext
         ...extraTabs,
     ];
     const tabs = allTabs.length > 0 ? allTabs : DEFAULT_TABS;
-    return (_jsxs(Div, { className: className, children: [renderTabBar ? (renderTabBar(activeTab, setActiveTab, tabs)) : (_jsx(Row, { gap: "md", className: "border-b mb-4", children: tabs.map((t) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => setActiveTab(t.value), paddingX: "none", paddingY: "xs", textSize: "sm", weight: "medium", rounded: "none", className: `border-b-2 transition-colors ${activeTab === t.value
-                        ? "border-current text-current"
-                        : "border-transparent text-[var(--appkit-color-text-muted)]"}`, children: t.label }, t.value))) })), activeTab === "description" && renderDescription?.(), activeTab === "specs" && renderSpecs?.(), activeTab === "reviews" && renderReviews?.(), renderExtraTab?.(activeTab)] }));
+    return (_jsxs(Div, { className: className, children: [renderTabBar ? (renderTabBar(activeTab, setActiveTab, tabs)) : (
+            // Was a hand-rolled <Row> of ghost <Button>s whose ACTIVE state was
+            // `border-current text-current` — the inherited colour, i.e. visually
+            // identical to inactive. It also had no role="tablist"/role="tab"/
+            // aria-selected at all; routing through Tabs supplies all three.
+            _jsx(Tabs, { value: activeTab, onChange: setActiveTab, className: "mb-4", children: _jsx(TabsList, { children: tabs.map((t) => (_jsx(TabsTrigger, { value: t.value, children: t.label }, t.value))) }) })), activeTab === "description" && renderDescription?.(), activeTab === "specs" && renderSpecs?.(), activeTab === "reviews" && renderReviews?.(), renderExtraTab?.(activeTab)] }));
 }

package/dist/features/products/components/ProductTabsShell.js

@@ -1,11 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button } from "../../../ui/components/Button";
 import { Div } from "../../../ui/components/Div";
-const __O = {
-    xAuto: "overflow-x-auto",
-};
+import { Tabs, TabsList, TabsTrigger } from "../../../ui/components/Tabs";
 const STATIC_TABS = [
     { id: "description", label: "Description" },
     { id: "specs", label: "Specifications" },
@@ -40,7 +37,5 @@ export function ProductTabsShell({ descriptionContent, specsContent, gradingCont
     if (allTabs.length === 0)
         return null;
     const activeContent = allTabs.find((t) => t.id === activeId)?.content;
-    return (_jsxs(Div, { className: `mt-8 ${className}`, children: [_jsx(Div, { layout: "flex", gap: "1", border: "default", className: `mb-6 ${__O.xAuto} border-b pb-px`, children: allTabs.map((t) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => setActiveId(t.id), paddingX: "md", paddingY: "none", textSize: "sm", weight: "medium", rounded: "none", className: `flex-shrink-0 -mb-px pb-[var(--appkit-space-3)] border-b-2 transition-colors ${activeId === t.id
-                        ? "border-[var(--appkit-color-primary)] text-[var(--appkit-color-primary)]"
-                        : "border-transparent text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)]"}`, children: t.label }, t.id))) }), _jsx("div", { children: activeContent })] }));
+    return (_jsxs(Div, { className: `mt-8 ${className}`, children: [_jsx(Tabs, { value: activeId, onChange: setActiveId, className: "mb-6", children: _jsx(TabsList, { children: allTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, children: t.label }, t.id))) }) }), _jsx("div", { children: activeContent })] }));
 }

package/dist/features/products/constants/action-defs.d.ts

@@ -32,6 +32,8 @@ export declare const ACTION_ID: {
     readonly CANCEL_RESERVATION: "cancel-reservation";
     readonly CHECKOUT: "checkout";
     readonly CONTINUE_TO_VERIFY: "continue-to-verification";
+    readonly CONTINUE_TO_PAYMENT: "continue-to-payment";
+    readonly CHECKOUT_BACK: "checkout-back";
     readonly VERIFY_OTP: "verify-otp";
     readonly PAY_ONLINE: "pay-online";
     readonly PAY_COD: "pay-cod";
@@ -74,10 +76,25 @@ export interface ActionMeta {
     /** Message shown in LoginRequiredModal. Required when requiresAuth=true. */
     authMessage?: string;
     /**
-     * RBAC permission key required to use this action.
-     * If set, user must have this permission in addition to being signed in.
-     * Uses the 85+ permission keys from the RBAC system.
-     * Example: "products.create", "orders.refund", "admin.users.suspend"
+     * RBAC permission key required to use this action, checked by `useAuthGate`
+     * against `SessionUser.permissions`.
+     *
+     * 🛑 Two preconditions, and BOTH must hold or the action is a guaranteed
+     * denial that looks like a working permission check:
+     *
+     * 1. The value must be a **colon**-separated key that actually exists in
+     *    `DEFAULT_ROLES` (`"admin:blog:read"`), not dot-separated. Three entries
+     *    here carried dot-form keys (`"seller.payouts.request"`,
+     *    `"seller.reviews.respond"`, `"user.account.delete"`) that match no role;
+     *    they were removed 2026-08-27. Same family as the 182 guaranteed-403
+     *    `permission:` lines deleted 2026-08-19.
+     * 2. `SessionUser.permissions` must be populated for the acting user — today
+     *    that happens only on the employee path
+     *    (`_internal/server/features/auth/permissions.ts`). Neither
+     *    `buildSessionUser` nor `fetchUserProfileFromServer` sets it, so for an
+     *    ordinary buyer/seller this field denies unconditionally.
+     *
+     * Leave it unset unless you have verified both.
      */
     requiredPermission?: string;
     /**

package/dist/features/products/constants/action-defs.js

@@ -53,6 +53,8 @@ export const ACTION_ID = {
     // ── Checkout / navigation CTAs ───────────────────────────────────────────
     CHECKOUT: "checkout",
     CONTINUE_TO_VERIFY: "continue-to-verification",
+    CONTINUE_TO_PAYMENT: "continue-to-payment",
+    CHECKOUT_BACK: "checkout-back",
     VERIFY_OTP: "verify-otp",
     PAY_ONLINE: "pay-online",
     PAY_COD: "pay-cod",
@@ -98,6 +100,8 @@ export const ACTION_META = {
     // ── Checkout / navigation CTAs ────────────────────────────────────────────
     [ACTION_ID.CHECKOUT]: { id: ACTION_ID.CHECKOUT, label: regLabel("CART", "checkout", "Checkout"), variant: "primary", requiresAuth: true, authMessage: "You need to be signed in to checkout." },
     [ACTION_ID.CONTINUE_TO_VERIFY]: { id: ACTION_ID.CONTINUE_TO_VERIFY, label: regLabel("CHECKOUT", "continue-to-verification", "Continue"), variant: "primary", requiresAuth: true, authMessage: "You need to be signed in to checkout." },
+    [ACTION_ID.CONTINUE_TO_PAYMENT]: { id: ACTION_ID.CONTINUE_TO_PAYMENT, label: regLabel("CHECKOUT", "continue-to-payment", "Continue to payment"), variant: "primary", requiresAuth: true, authMessage: "You need to be signed in to checkout." },
+    [ACTION_ID.CHECKOUT_BACK]: { id: ACTION_ID.CHECKOUT_BACK, label: regLabel("CHECKOUT", "back", "Back"), variant: "ghost" },
     [ACTION_ID.VERIFY_OTP]: { id: ACTION_ID.VERIFY_OTP, label: regLabel("CHECKOUT", "verify-otp", "Verify & Continue"), variant: "primary", requiresAuth: true, authMessage: "You need to be signed in to checkout." },
     [ACTION_ID.PAY_ONLINE]: { id: ACTION_ID.PAY_ONLINE, label: regLabel("CHECKOUT", "pay-online", "Pay Online"), variant: "primary", requiresAuth: true, authMessage: "You need to be signed in to checkout." },
     [ACTION_ID.PAY_COD]: { id: ACTION_ID.PAY_COD, label: regLabel("CHECKOUT", "pay-cod", "Cash on Delivery"), variant: "secondary", requiresAuth: true, authMessage: "You need to be signed in to checkout." },
@@ -113,8 +117,8 @@ export const ACTION_META = {
     [ACTION_ID.MESSAGE_SELLER]: { id: ACTION_ID.MESSAGE_SELLER, label: "Message Seller", variant: "outline", requiresAuth: true, authMessage: "You need to be signed in to message a seller." },
     // ── Seller CTAs ───────────────────────────────────────────────────────────
     [ACTION_ID.BECOME_SELLER]: { id: ACTION_ID.BECOME_SELLER, label: "Apply as Seller", variant: "primary", requiresAuth: true, authMessage: "You need to be signed in to apply as a seller." },
-    [ACTION_ID.REQUEST_PAYOUT]: { id: ACTION_ID.REQUEST_PAYOUT, label: regLabel("STORE", "request-payout", "Request Payout"), variant: "outline", requiresAuth: true, authMessage: "You need to be signed in to request a payout.", requiredPermission: "seller.payouts.request" },
-    [ACTION_ID.RESPOND_TO_REVIEW]: { id: ACTION_ID.RESPOND_TO_REVIEW, label: regLabel("STORE", "reply-review", "Respond to Review"), variant: "outline", requiresAuth: true, authMessage: "You need to be signed in to respond to a review.", requiredPermission: "seller.reviews.respond" },
+    [ACTION_ID.REQUEST_PAYOUT]: { id: ACTION_ID.REQUEST_PAYOUT, label: regLabel("STORE", "request-payout", "Request Payout"), variant: "outline", requiresAuth: true, authMessage: "You need to be signed in to request a payout." },
+    [ACTION_ID.RESPOND_TO_REVIEW]: { id: ACTION_ID.RESPOND_TO_REVIEW, label: regLabel("STORE", "reply-review", "Respond to Review"), variant: "outline", requiresAuth: true, authMessage: "You need to be signed in to respond to a review." },
     // ── User account actions ──────────────────────────────────────────────────
     [ACTION_ID.CANCEL_ORDER]: { id: ACTION_ID.CANCEL_ORDER, label: regLabel("USER", "cancel-order", "Cancel Order"), variant: "danger", requiresAuth: true, authMessage: "You need to be signed in to cancel an order." },
     [ACTION_ID.REQUEST_RETURN]: { id: ACTION_ID.REQUEST_RETURN, label: regLabel("USER", "request-return", "Request Return"), variant: "outline", requiresAuth: true, authMessage: "You need to be signed in to request a return." },
@@ -125,7 +129,7 @@ export const ACTION_META = {
     [ACTION_ID.EDIT_ADDRESS]: { id: ACTION_ID.EDIT_ADDRESS, label: "Edit Address", variant: "ghost", requiresAuth: true, authMessage: "You need to be signed in to edit an address." },
     [ACTION_ID.DELETE_ADDRESS]: { id: ACTION_ID.DELETE_ADDRESS, label: regLabel("USER", "delete-address", "Delete Address"), variant: "danger", requiresAuth: true, authMessage: "You need to be signed in to delete an address." },
     [ACTION_ID.CHANGE_PASSWORD]: { id: ACTION_ID.CHANGE_PASSWORD, label: regLabel("USER", "update-password", "Change Password"), variant: "outline", requiresAuth: true, authMessage: "You need to be signed in to change your password." },
-    [ACTION_ID.DELETE_ACCOUNT]: { id: ACTION_ID.DELETE_ACCOUNT, label: "Delete Account", variant: "danger", requiresAuth: true, authMessage: "You need to be signed in to delete your account.", requiredPermission: "user.account.delete" },
+    [ACTION_ID.DELETE_ACCOUNT]: { id: ACTION_ID.DELETE_ACCOUNT, label: "Delete Account", variant: "danger", requiresAuth: true, authMessage: "You need to be signed in to delete your account." },
 };
 // Detail page action groups — ordered top-to-bottom in the right-hand panel
 export const DETAIL_ACTIONS = {

package/dist/features/products/hooks/useRelatedProducts.js

@@ -1,4 +1,5 @@
-import { sieveAnd, sieveFilter, SIEVE_OP, sortBy } from "@mohasinac/appkit/client";
+import { sieveAnd, sieveFilter, SIEVE_OP } from "../../../utils/sieve-builder";
+import { sortBy } from "../../../constants/sort";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints";

package/dist/features/products/repository/products.repository.d.ts

@@ -277,7 +277,7 @@ export declare class ProductRepository extends BaseRepository<ProductDocument> {
             canFilter: boolean;
             canSort: boolean;
         };
-        searchTokens: {
+        searchTxt: {
             canFilter: boolean;
             canSort: boolean;
         };

package/dist/features/products/repository/products.repository.js

@@ -4,7 +4,8 @@ import { DatabaseError } from "../../../errors";
 import { BaseRepository, prepareForFirestore, parseSieveDateValue, } from "../../../providers/db-firebase";
 import { cacheManager } from "../../../core";
 import { serverLogger } from "../../../monitoring";
-import { generateUniqueId, slugify, buildSearchTokens, tokenizeQuery, generateBarcodeId } from "../../../utils";
+import { generateUniqueId, slugify, generateBarcodeId } from "../../../utils";
+import { buildSearchTxt, parseSearchTxtQuery } from "../../../utils/search-txt";
 import { PRODUCT_COLLECTION, ProductStatusValues } from "../schemas";
 import { PRODUCT_FIELDS } from "../../../constants/field-names";
 /**
@@ -45,8 +46,21 @@ function buildListingKindClause(kind, inverted) {
     const op = inverted ? "!=" : "==";
     return `${PRODUCT_FIELDS.LISTING_TYPE}${op}${canonical}`;
 }
-function buildProductSearchTokens(p) {
-    return buildSearchTokens(p.title, p.description, p.brand, p.brandSlug, p.categoryNames, p.tags, p.features, p.condition, p.card?.setName, p.card?.cardNumber, p.grading?.service, p.specifications?.map((s) => `${s.name} ${s.value}`));
+function buildProductSearchTxt(p) {
+    return buildSearchTxt([
+        p.title,
+        p.description,
+        p.brand,
+        p.brandSlug,
+        p.categoryNames,
+        p.tags,
+        p.features,
+        p.condition,
+        p.card?.setName,
+        p.card?.cardNumber,
+        p.grading?.service,
+        p.specifications?.map((s) => `${s.name} ${s.value}`),
+    ]);
 }
 export class ProductRepository extends BaseRepository {
     constructor() {
@@ -97,7 +111,7 @@ export class ProductRepository extends BaseRepository {
         const merged = { ...current, ...data };
         const updated = await super.update(id, {
             ...data,
-            searchTokens: buildProductSearchTokens(merged),
+            searchTxt: buildProductSearchTxt(merged),
         });
         this.cacheSet(updated);
         return updated;
@@ -121,7 +135,7 @@ export class ProductRepository extends BaseRepository {
             barcodeId,
             slug: id,
             availableQuantity: input.stockQuantity,
-            searchTokens: buildProductSearchTokens(input),
+            searchTxt: buildProductSearchTxt(input),
             createdAt: new Date(),
             updatedAt: new Date(),
         };
@@ -359,17 +373,17 @@ export class ProductRepository extends BaseRepository {
         if (opts?.storeId) {
             baseQuery = baseQuery.where(PRODUCT_FIELDS.STORE_ID, "==", opts.storeId);
         }
-        const searchTokens = tokenizeQuery(opts?.search ?? "");
-        if (searchTokens.length > 0 && opts?.categoriesIn && opts.categoriesIn.length > 0) {
+        const searchTxt = parseSearchTxtQuery(opts?.search ?? "");
+        if (searchTxt.length > 0 && opts?.categoriesIn && opts.categoriesIn.length > 0) {
             // Firestore cannot combine two array operators in one query
         }
-        else if (searchTokens.length === 1) {
-            baseQuery = baseQuery.where(PRODUCT_FIELDS.SEARCH_TOKENS, "array-contains", searchTokens[0]);
+        else if (searchTxt.length === 1) {
+            baseQuery = baseQuery.where(PRODUCT_FIELDS.SEARCH_TXT, "array-contains", searchTxt[0]);
         }
-        else if (searchTokens.length > 1) {
-            baseQuery = baseQuery.where(PRODUCT_FIELDS.SEARCH_TOKENS, "array-contains-any", searchTokens);
+        else if (searchTxt.length > 1) {
+            baseQuery = baseQuery.where(PRODUCT_FIELDS.SEARCH_TXT, "array-contains-any", searchTxt);
         }
-        if (searchTokens.length === 0 && opts?.categoriesIn && opts.categoriesIn.length > 0) {
+        if (searchTxt.length === 0 && opts?.categoriesIn && opts.categoriesIn.length > 0) {
             let categoriesIn = opts.categoriesIn;
             if (categoriesIn.length > ProductRepository.MAX_ARRAY_CONTAINS_ANY) {
                 // Products carry their FULL ancestor chain in `categorySlugs`, so a
@@ -559,7 +573,7 @@ ProductRepository.SIEVE_FIELDS = {
     // field had no entry: `throwExceptions:false` means an unknown field is
     // silently skipped. The toggle did nothing at all until 2026-08-21.
     shippingPaidBy: { canFilter: true, canSort: false },
-    searchTokens: { canFilter: true, canSort: false },
+    searchTxt: { canFilter: true, canSort: false },
     "classified.meetupArea": { canFilter: true, canSort: false },
     "classified.acceptsShipping": { canFilter: true, canSort: false },
     "classified.negotiable": { canFilter: true, canSort: false },

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

@@ -349,7 +349,8 @@ export interface ProductDocument extends BaseDocument {
      *  Auto-generated as `LIR-{8-char-hex}` on product creation when not supplied.
      *  Override by scanning a pre-printed sticker during the create/edit flow. */
     barcodeId?: string;
-    searchTokens?: string[];
+    /** Normalized edge-n-gram search field. Replaced `searchTokens`. */
+    searchTxt?: string[];
 }
 /**
  * Single prize within a prize-draw listing. A draw can have between 3 and 16
@@ -381,7 +382,7 @@ export declare const ProductStatusValues: {
     readonly ARCHIVED: "archived";
 };
 export declare const PRODUCT_COLLECTION: "products";
-export declare const PRODUCT_INDEXED_FIELDS: readonly ["storeId", "status", "category", "featured", "listingType", "isPromoted", "isOnSale", "isSold", "searchTokens", "createdAt", "barcodeId"];
+export declare const PRODUCT_INDEXED_FIELDS: readonly ["storeId", "status", "category", "featured", "listingType", "isPromoted", "isOnSale", "isSold", "searchTxt", "createdAt", "barcodeId"];
 export declare const DEFAULT_PRODUCT_DATA: Partial<ProductDocument>;
 export declare const PRODUCT_PUBLIC_FIELDS: readonly ["allowOffers", "minOfferPercent", "id", "title", "description", "category", "subcategory", "brand", "price", "currency", "stockQuantity", "availableQuantity", "images", "status", "storeName", "featured", "tags", "specifications", "features", "shippingInfo", "returnPolicy", "listingType", "auctionEndDate", "startingBid", "currentBid", "bidCount", "reservePrice", "buyNowPrice", "minBidIncrement", "autoExtendable", "auctionExtensionMinutes", "auctionShippingPaidBy", "bidsHaveStarted", "grading", "card", "classified", "digitalCode", "liveItem", "catalogProductId", "preOrderDeliveryDate", "preOrderDepositPercent", "preOrderDepositAmount", "preOrderMaxQuantity", "preOrderCurrentCount", "preOrderProductionStatus", "preOrderCancellable", "condition", "insurance", "insuranceCost", "shippingPaidBy", "isPromoted", "isOnSale", "isSold", "slug", "seoTitle", "seoDescription", "seoKeywords", "viewCount", "customFields", "customSections", "sublistingCategoryId", "groupId", "isGroupParent", "groupParentSlug", "groupChildSlugs", "groupTitle", "createdAt"];
 export declare const PRODUCT_UPDATABLE_FIELDS: readonly ["title", "description", "category", "subcategory", "brand", "price", "stockQuantity", "images", "status", "tags", "specifications", "features", "shippingInfo", "returnPolicy", "pickupAddressId", "condition", "insurance", "shippingPaidBy", "autoExtendable", "auctionExtensionMinutes", "auctionShippingPaidBy", "reservePrice", "buyNowPrice", "minBidIncrement", "bidsHaveStarted", "grading", "card", "classified", "digitalCode", "liveItem", "catalogProductId", "listingType", "preOrderDeliveryDate", "preOrderDepositPercent", "preOrderDepositAmount", "preOrderMaxQuantity", "preOrderProductionStatus", "preOrderCancellable", "isOnSale", "isSold", "allowShipBeforeEmiComplete", "printMeta", "seoTitle", "seoDescription", "seoKeywords", "customFields", "customSections", "sublistingCategoryId", "groupId", "isGroupParent", "groupParentSlug", "groupChildSlugs", "groupTitle", "barcodeId"];

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

@@ -21,7 +21,7 @@ export const PRODUCT_INDEXED_FIELDS = [
     "isPromoted",
     "isOnSale",
     "isSold",
-    "searchTokens",
+    "searchTxt",
     "createdAt",
     "barcodeId",
 ];