@mohasinac/appkit 4.59.0 → 4.60.0

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

@@ -9,9 +9,15 @@ import { PRODUCT_MAX_IMAGES, PRODUCT_MAX_VIDEOS, PRODUCT_IMAGE_INDEX_MAX, } from
 import { CustomSectionsEditor } from "./CustomSectionsEditor.js";
 import { SublistingCategorySelect } from "./SublistingCategorySelect.js";
 import { ProductFeaturesSelector } from "./ProductFeaturesSelector.js";
+// The one `ProductImage[] | string[]` → `string[]` normaliser. Value import,
+// not a type: the gallery needs it at runtime (see `galleryImages` below).
+import { productImageUrls } from "../schemas/firestore.js";
 import { ImageUpload, MediaUploadField, MediaUploadList, } from "../../media/index.js";
 import { useMediaUpload } from "../../media/index.js";
 import { resolveDate } from "../../../utils/date.formatter.js";
+// Read-only here: the inputs that WROTE this field are gone — see the Physical
+// Inventory block for why three free-text boxes could not be made consistent.
+import { formatPhysicalLocation } from "../../../utils/physical-location.js";
 import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags.js";
@@ -68,13 +74,36 @@ canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderPrice
     const update = (partial) => {
         onChange({ ...product, ...partial });
     };
+    /*
+     * The legacy free-text location, if this listing carries one. Shown so the
+     * value is not invisible while it still exists; there is no input for it any
+     * more. `formatPhysicalLocation` returns `undefined` when all three parts are
+     * blank, which is what distinguishes "never set" from "set to nothing".
+     */
+    const existingLocation = formatPhysicalLocation(product.physicalLocation);
     /*
      * One control for both media kinds — see the matching comment in
-     * SellerProductShell's StepMedia. The document keeps `images: string[]` plus
-     * a single `video`; this seeds from both and splits again on write.
+     * SellerProductShell's StepMedia. This seeds from `images` + `video` and
+     * splits them again on write.
+     *
+     * 🛑 `images` IS NOT `string[]` AT RUNTIME, whatever the type says. This
+     * comment used to assert "the document keeps `images: string[]`" and the
+     * line below mapped each entry as a URL — but `ProductDocument.images` has
+     * been `ProductImage[]` (objects) since A6, and the editors seed this form
+     * by CASTING the raw API document to `Partial<ProductItem>`
+     * (`AdminProductEditorView:231`). The cast is what makes the compiler agree
+     * with a shape the data does not have.
+     *
+     * The result was `{ url: { url: "/media/…" }, type: "image" }`, so the
+     * gallery tile handed `MediaImage` an object, `resolveMediaUrl` returned
+     * undefined for a non-string, and the tile rendered the 📦 placeholder with
+     * no network request at all.
+     *
+     * `productImageUrls` is the one normaliser and accepts both shapes, so this
+     * is correct whether the seeder passed documents or legacy strings.
      */
     const galleryImages = [
-        ...(product.images ?? []).map((url) => ({ url, type: "image" })),
+        ...productImageUrls(product.images).map((url) => ({ url, type: "image" })),
         ...(product.video?.url
             ? [{
                     url: product.video.url,
@@ -123,7 +152,7 @@ canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderPrice
                     content: product.description || "",
                     onChange: (value) => update({ description: value }),
                     editable: !isReadonly,
-                }) })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: t("formDescription") }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(product.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, placeholder: "Enter product description" }), _jsx(Text, { size: "xs", color: "muted", children: "Rich text is supported for product descriptions." })] })), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsx(_Fragment, { children: renderCategorySelector({
+                }) })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: t("formDescription") }), _jsx(RichTextEditor, { ariaLabel: t("formDescription"), value: normalizeRichTextHtml(product.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, placeholder: "Enter product description" }), _jsx(Text, { size: "xs", color: "muted", children: "Rich text is supported for product descriptions." })] })), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsx(_Fragment, { children: renderCategorySelector({
                             label: t("formCategory"),
                             value: (product.categorySlugs?.[0] ?? product.category) || "",
                             onChange: (value) => update({ categorySlugs: value ? [value] : [] }),
@@ -284,23 +313,5 @@ canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderPrice
                 disabled: isReadonly,
             }), !isAuctionListing(product) && renderGroupSettings?.(product), _jsx(ProductFeaturesSelector, { value: product.features ?? [], onChange: (features) => update({ features }), productType: LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE[normalizeListingType(product)], storeId: product.storeId, disabled: isReadonly }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Custom Sections" }), _jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Add up to 3 custom tabs to your product page \u2014 e.g. \"Box Contents\", \"Compatibility\", \"Grading Details\"." }), _jsx(CustomSectionsEditor, { sections: product.customSections ?? [], onChange: (sections) => update({ customSections: sections }) })] }), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsxs(Div, { children: [_jsx(Toggle, { checked: !isFinalSale(product), onChange: (checked) => update({ finalSale: !checked }), disabled: isReadonly, label: "Accept change-of-mind returns" }), _jsx(Text, { className: "mt-1", size: "xs", color: "muted", children: isFinalSale(product)
                             ? "Final sale (default). Not-received, damaged, wrong-item, not-as-described and counterfeit claims are still accepted."
-                            : "Buyers can return this listing within the platform return window for any reason." })] }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Physical Inventory" }), _jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Assign a storage location for warehouse or shelf organisation. Used by the Print & Label Center." }), _jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { name: "physicalLocation.zone", label: "Zone", type: "text", placeholder: "e.g. A", value: product.physicalLocation?.zone ?? "", onChange: (v) => update({
-                                    physicalLocation: {
-                                        zone: v,
-                                        shelf: product.physicalLocation?.shelf ?? "",
-                                        bin: product.physicalLocation?.bin ?? "",
-                                    },
-                                }), disabled: isReadonly }), _jsx(FormField, { name: "physicalLocation.shelf", label: "Shelf", type: "text", placeholder: "e.g. 3", value: product.physicalLocation?.shelf ?? "", onChange: (v) => update({
-                                    physicalLocation: {
-                                        zone: product.physicalLocation?.zone ?? "",
-                                        shelf: v,
-                                        bin: product.physicalLocation?.bin ?? "",
-                                    },
-                                }), disabled: isReadonly }), _jsx(FormField, { name: "physicalLocation.bin", label: "Bin", type: "text", placeholder: "e.g. Blue", value: product.physicalLocation?.bin ?? "", onChange: (v) => update({
-                                    physicalLocation: {
-                                        zone: product.physicalLocation?.zone ?? "",
-                                        shelf: product.physicalLocation?.shelf ?? "",
-                                        bin: v,
-                                    },
-                                }), disabled: isReadonly })] })] }), product.storeName && (_jsx(FormField, { name: "storeName", label: t("formSeller"), type: "text", value: product.storeName, onChange: () => { }, disabled: true }))] }));
+                            : "Buyers can return this listing within the platform return window for any reason." })] }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Physical Inventory" }), existingLocation ? (_jsxs(Text, { className: "mb-3", color: "muted", size: "xs", children: ["Legacy location on this listing: ", _jsx("strong", { children: existingLocation }), ". It is still printed on labels, but it is free text with no box behind it \u2014 place this item in a storage box to replace it."] })) : (_jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Where this item is stored is recorded by placing it in a storage box, not typed here \u2014 a placement has a quantity, and one product can sit in two boxes. Use the receive station or the box's own page." }))] }), product.storeName && (_jsx(FormField, { name: "storeName", label: t("formSeller"), type: "text", value: product.storeName, onChange: () => { }, disabled: true }))] }));
 }

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

@@ -1,9 +1,7 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Link from "next/link.js";
-import { useRouter } from "next/navigation.js";
-import { ROUTES } from "../../../next/routing/route-map.js";
 import { BaseListingCard, Button, Div, GatedPrice, Grid, PriceDisplay, PricesOnly, Row, Span, Stack, Text } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
@@ -11,13 +9,14 @@ import { getDefaultCurrency } from "../../../core/baseline-resolver.js";
 import { useLongPress } from "../../../react/hooks/useLongPress.js";
 import { CardStoreLine } from "./CardStoreLine.js";
 import { isFinalSale } from "../constants/final-sale.js";
+import { CARD_BADGE, resolveCardBadges } from "../constants/card-badges.js";
 import { FeatureBadgeList } from "./FeatureBadge.js";
 import { useProductFeatures } from "./ProductFeaturesContext.js";
 import { PRODUCT_FEATURE_CARD_MAX_VISIBLE } from "../constants/product-features.constants.js";
 import { normalizeListingType } from "../utils/listing-type.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { WishlistHeartButton } from "../../wishlist/components/WishlistHeartButton.js";
-import { ProductOwnerQuickActions } from "./ProductOwnerQuickActions.js";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -25,22 +24,6 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const CLS_BADGE_NEW = "rounded-full bg-error-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] text-error-on-solid shadow-sm";
-const CLS_BADGE_SALE = "rounded-full bg-success-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-success-on-solid shadow-sm";
-const CLS_BADGE_TRENDING = "rounded-full bg-indigo-600 px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-white shadow-sm";
-const CLS_BADGE_LIMITED = "rounded-full bg-info-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-info-on-solid shadow-sm";
-// Overlay badge sitting on the product photo, so the pairing is `-solid` +
-// `-on-solid` (Root Cause #67) — never `text-white` on a status colour, which
-// 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";
-/*
- * Final sale. A fixed dark scrim with white ink, following CLS_BADGE_TRENDING's
- * precedent rather than a `-surface` token: this sits on top of the product
- * PHOTO, where a theme-relative tint is a near-white fill that vanishes against
- * a light image (Root Cause #67). Not `warning-solid`, which "Taking Offers"
- * already owns — two amber pills stacked would read as one control.
- */
-const CLS_BADGE_FINAL_SALE = "rounded-full bg-zinc-900/90 px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-white shadow-sm";
 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";
@@ -51,11 +34,65 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
         ? Math.round(((product.originalPrice - product.price) / product.originalPrice) *
             100)
         : null;
-    const router = useRouter();
     const listingPlugin = pluginFor(normalizeListingType(product));
     const typeBadge = listingPlugin.badge
         ? { label: listingPlugin.badge.label, cls: listingPlugin.badge.className }
         : null;
+    /*
+     * The badge corner, resolved once. Two candidates, ordered and capped by
+     * `card-badges.ts` — see the stack below for what the other five badges were
+     * and where they went.
+     */
+    const cardBadges = resolveCardBadges([
+        discount
+            ? {
+                id: CARD_BADGE.DISCOUNT,
+                label: `-${discount}%`,
+                className: CLS_BADGE_NEW,
+                title: `${discount}% off the original price`,
+            }
+            : null,
+        typeBadge
+            ? {
+                id: CARD_BADGE.LISTING_TYPE,
+                label: typeBadge.label,
+                // The plugin's own class, plus the shared pill geometry the inline
+                // version used to spell out at the call site.
+                className: `rounded-full px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] shadow-sm ${typeBadge.cls}`,
+            }
+            : null,
+    ]);
+    /*
+     * The five demoted badges, as plain words on the metadata line.
+     *
+     * 🛑 DEMOTED, NOT DELETED. Each states something true that a buyer needs —
+     * "Final Sale" is a refund-policy warning and dropping it silently would be
+     * a worse defect than crowding the image. But a 10px pill over a photograph
+     * is the wrong place to say it: a shopper scanning a grid cannot act on any
+     * of them, and five of them hid the two they could act on.
+     *
+     * `isFinalSale(product)` rather than `product.finalSale` — absent MEANS
+     * final sale, so reading the raw field would leave every listing created
+     * before it existed unlabelled while still being final sale at the refund
+     * gate.
+     */
+    const cardNotes = [
+        product.partOfBundleIds && product.partOfBundleIds.length > 0
+            ? product.partOfBundleTitles?.[0]
+                ? `In bundle: ${product.partOfBundleTitles[0]}`
+                : "In a bundle"
+            : null,
+        product.groupId
+            ? product.isGroupParent
+                ? "Set parent"
+                : product.groupTitle
+                    ? `Part of set: ${product.groupTitle}`
+                    : "Part of a set"
+            : null,
+        product.allowOffers ? "Taking offers" : null,
+        isFinalSale(product) ? "Final sale" : null,
+        product.sublistingCategoryId ? "Has variants" : null,
+    ].filter((n) => n != null);
     const longPress = useLongPress(() => onSelect?.(product.id));
     const featuresList = useProductFeatures();
     const handleCardClick = selectionMode
@@ -78,36 +115,13 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
             className,
         ]
             .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" })), isFinalSale(product) && (_jsx(Span, { className: CLS_BADGE_FINAL_SALE, title: "Final sale \u2014 no change-of-mind returns. Not-received, damaged, wrong-item, not-as-described and counterfeit claims are still accepted.", children: "Final Sale" })), 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) => {
+            .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 &&
+                            cardBadges.map((b) => (_jsx(Span, { weight: "bold", className: b.className, title: b.title, children: b.label }, b.id))) }), _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);
-                        } }))] }), _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
-                                ? [product.categoryName]
-                                : [];
-                        if (!categories.length && !product.brand)
-                            return null;
-                        const MAX_CHIPS = 3;
-                        const visible = categories.slice(0, MAX_CHIPS);
-                        const overflow = Math.max(0, categories.length - MAX_CHIPS);
-                        return (_jsxs(Row, { className: "mt-1", gap: "xs", wrap: true, children: [visible.map((name) => (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", className: "gap-[0.125rem] text-[10px]", rounded: "full", surface: "subtle", color: "muted", children: [_jsx("svg", { className: "h-2.5 w-2.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" }) }), name] }, name))), overflow > 0 && (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", weight: "medium", className: "text-[10px]", rounded: "full", surface: "subtle", color: "muted", title: categories.slice(MAX_CHIPS).join(", "), children: ["+", overflow] })), product.brand && (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", gap: "2xs", className: `text-[10px] ${product.brandSlug ? "cursor-pointer hover:underline" : ""}`, rounded: "full", surface: "subtle", color: "muted", ...(product.brandSlug
-                                        ? {
-                                            onClick: (e) => {
-                                                // The whole card is already wrapped in a <Link> — a nested
-                                                // <a> here would be invalid HTML, so this navigates via
-                                                // stopPropagation + router.push instead of a real Link.
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                router.push(String(ROUTES.PUBLIC.BRAND_DETAIL(product.brandSlug)));
-                                            },
-                                        }
-                                        : {}), children: [_jsx("svg", { className: "h-2.5 w-2.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" }) }), product.brand] }))] }));
-                    })(), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), product.rating !== undefined && (_jsxs(Row, { className: "mt-1", gap: "xs", children: [_jsx(Span, { className: CLS_STAR, children: "\u2605" }), _jsxs(Span, { className: "text-[11px]", color: "muted", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), _jsxs(Div, { className: "mt-auto", padding: "t-xs", children: [_jsx(PriceDisplay, { amount: product.price, originalAmount: product.originalPrice, currency: getDefaultCurrency(), variant: "compact" }), (() => {
+                        } }))] }), _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 }), product.brand && (_jsx(Text, { className: "mt-1", size: "xs", color: "muted", truncate: 1, children: product.brand })), cardNotes.length > 0 && (_jsx(Text, { className: "mt-1", size: "xs", color: "muted", truncate: 1, title: cardNotes.join(" · "), children: cardNotes.join(" · ") })), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), product.rating !== undefined && (product.reviewCount ?? 0) > 0 && (_jsxs(Row, { className: "mt-1", gap: "xs", children: [_jsx(Span, { className: CLS_STAR, children: "\u2605" }), _jsxs(Span, { className: "text-[11px]", color: "muted", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), _jsxs(Div, { className: "mt-auto", padding: "t-xs", children: [_jsx(PriceDisplay, { amount: product.price, originalAmount: product.originalPrice, currency: getDefaultCurrency(), variant: "compact" }), (() => {
                                 const stock = product.stockCount ?? product.stockQuantity ?? product.availableQuantity;
                                 if (stock === undefined || !listingPlugin.showsStockQuantity)
                                     return null;
@@ -116,15 +130,15 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
                                 }
                                 const low = stock <= 5;
                                 return (_jsx(Text, { className: `mt-1 text-[11px] ${low ? "text-warning" : "text-[var(--appkit-color-text-faint)]"}`, weight: "medium", children: low ? `Only ${stock} left` : `${stock} in stock` }));
-                            })(), featuresList && product.features && product.features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: product.features, features: featuresList, maxVisible: PRODUCT_FEATURE_CARD_MAX_VISIBLE, className: "mt-2" })), (onAddToCart || onBuyNow) && (_jsxs(Div, { layout: "grid", gap: "1", className: `mt-2 ${onBuyNow && onAddToCart ? "grid-cols-2" : "grid-cols-1"}`, children: [onBuyNow && (_jsxs(Button, { gap: "sm", type: "button", variant: "primary", size: "sm", onClick: (e) => {
+                            })(), featuresList && product.features && product.features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: product.features, features: featuresList, maxVisible: PRODUCT_FEATURE_CARD_MAX_VISIBLE, className: "mt-2" })), (onAddToCart || onBuyNow) && (_jsxs(Div, { layout: "grid", gap: "1", className: `mt-2 ${onBuyNow && onAddToCart ? "grid-cols-2" : "grid-cols-1"}`, children: [onBuyNow && (_jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: (e) => {
                                             e.stopPropagation();
                                             e.preventDefault();
                                             onBuyNow(product);
-                                        }, className: "justify-center text-[length:var(--appkit-text-xs)] btn-glow", children: [_jsx("svg", { className: "h-3.5 w-3.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2.5, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), "Buy Now"] })), onAddToCart && (_jsxs(Button, { gap: "sm", type: "button", variant: "outline", size: "sm", onClick: (e) => {
+                                        }, className: "justify-center text-[length:var(--appkit-text-xs)] btn-glow", children: "Buy Now" })), onAddToCart && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: (e) => {
                                             e.stopPropagation();
                                             e.preventDefault();
                                             onAddToCart(product);
-                                        }, className: "justify-center text-[length:var(--appkit-text-xs)]", children: [_jsx("svg", { className: "h-3.5 w-3.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 3h2l.4 2M7 13h10l4-8H5.4m1.6 8L5 3H3m4 10v7a1 1 0 001 1h8a1 1 0 001-1v-7M9 21h6" }) }), "Cart"] }))] }))] })] })] }));
+                                        }, className: "justify-center text-[length:var(--appkit-text-xs)]", children: "Cart" }))] }))] })] })] }));
     const wrapped = href && !selectionMode ? (_jsx(Link, { href: href, className: "block h-full", children: cardBody })) : (cardBody);
     /*
      * 🛑 Default, not opt-in — nothing in either repo ever passed
@@ -138,29 +152,39 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
      * editor. `storeId` is the store SLUG, which is what `SessionUser.storeId`
      * holds — the component renders nothing for anyone who owns neither.
      */
-    const ownerActions = renderOwnerActions ? (renderOwnerActions()) : product.id ? (_jsx(ProductOwnerQuickActions, { productId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined, recordLabel: product.title, placement: "card" })) : null;
+    const ownerActions = renderOwnerActions ? (renderOwnerActions()) : product.id ? (_jsx(RecordOwnerQuickActions, { resource: "PRODUCT", recordId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined, recordLabel: product.title, placement: "card" })) : null;
     // Selection is still suppressed: a bulk-select gesture and a per-record edit
     // are different intents, and offering both at once invites the wrong one.
     if (!ownerActions || selectionMode || isSelected)
         return wrapped;
     /*
-     * 🛑 OUTSIDE the anchor, as a sibling — never inside `cardBody`.
+     * 🛑 STILL OUTSIDE THE ANCHOR, as a sibling — never inside `cardBody`.
      *
      * This card wraps its entire body in a `<Link>` whenever `href` is set, and
      * `InteractiveProductCard` wraps it in another one. A `<button>` inside an
      * `<a>` is invalid HTML that browsers resolve by closing the anchor early,
      * which breaks the CARD's navigation rather than just the button's —
-     * stopPropagation stops the click but cannot fix the parse.
+     * stopPropagation stops the click but cannot fix the parse. That constraint
+     * is unchanged and is why this sits here rather than next to the title.
+     *
+     * 🛑 BUT NO LONGER ABSOLUTE, AND NO LONGER ON THE PHOTO.
+     *
+     * It used to be `absolute right-2 top-14 z-20`, chosen by elimination — the
+     * wishlist heart owns `top-2 right-2`, the checkbox and badges own top-left,
+     * `IconOverlay` owns bottom-right — which left the middle of the product
+     * photograph as the only free corner. So every seller-visible card had three
+     * icons sitting on the artwork, and on the pre-order card the same logic put
+     * them on top of the "Reserve now" button.
      *
-     * Positioned `top-14 right-2`: directly below the 44px wishlist heart at
-     * `top-2 right-2`, so it clears every occupied corner (checkbox and badges
-     * top-left, IconOverlay bottom-right) without needing to know the hero's
-     * height. The hero is `aspect-square`, so it is always taller than
-     * 3.5rem + 44px and the toolbar lands on the photo.
+     * In normal flow at the FOOT of the card it collides with nothing by
+     * construction: no corner budget to reason about, no overlap with a CTA, and
+     * the same position on every card type. The toolbar supplies its own box, so
+     * it reads as a distinct owner strip rather than as part of the listing.
      *
-     * `z-20` beats the in-card overlays, which all sit at `z-10`.
+     * `justify-end` keeps it on the side the eye already uses for card actions;
+     * `pt-0` because the card body's own bottom padding is the gap.
      */
-    return (_jsxs(Div, { className: "relative h-full", children: [wrapped, _jsx(Div, { className: "absolute right-2 top-14 z-20", children: ownerActions })] }));
+    return (_jsxs(Div, { className: "flex h-full flex-col", children: [wrapped, _jsx(Div, { className: "flex justify-end px-[var(--appkit-space-3)] pb-[var(--appkit-space-3)] pt-0", children: ownerActions })] }));
 }
 function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
     const discount = product.originalPrice && product.originalPrice > product.price
@@ -178,7 +202,7 @@ function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
             .join(" "), children: [_jsx(Div, { className: `flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 ${__O.hidden} bg-[var(--appkit-color-surface)]`, rounded: "lg", children: product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "thumbnail" })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200" })) }), _jsxs(Stack, { className: "flex-1 min-w-0 gap-[2px]", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }), (product.categoryName || product.brand) && (_jsx(Span, { className: "text-[11px] truncate", color: "faint", children: [product.categoryName, product.brand].filter(Boolean).join(" · ") })), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId, className: "text-[11px]" }), _jsxs(Row, { className: "mt-0.5", align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { size: "sm", weight: "semibold", className: "text-primary", children: _jsx(GatedPrice, { children: formatCurrency(product.price, getDefaultCurrency()) }) }), discount && (
                             // The discount % is derived from price vs originalPrice, so it is a
                             // money disclosure even though it carries no currency symbol.
-                            _jsx(PricesOnly, { children: _jsxs(Span, { weight: "bold", className: CLS_DISCOUNT_TEXT_BARE, children: ["-", discount, "%"] }) })), product.rating !== undefined && (_jsxs(Span, { layout: "flex", gap: "2xs", className: "text-[11px]", color: "faint", children: [_jsx(Span, { className: CLS_STAR_BARE, children: "\u2605" }), product.rating.toFixed(1)] })), (() => {
+                            _jsx(PricesOnly, { children: _jsxs(Span, { weight: "bold", className: CLS_DISCOUNT_TEXT_BARE, children: ["-", discount, "%"] }) })), product.rating !== undefined && (product.reviewCount ?? 0) > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", className: "text-[11px]", color: "faint", children: [_jsx(Span, { className: CLS_STAR_BARE, children: "\u2605" }), product.rating.toFixed(1)] })), (() => {
                                 const stock = product.stockCount ?? product.stockQuantity ?? product.availableQuantity;
                                 if (stock === undefined)
                                     return null;

package/dist/features/products/constants/card-badges.d.ts

@@ -0,0 +1,97 @@
+/**
+ * What a product card may say in its badge corner, and in what order.
+ *
+ * ── THE DEFECT THIS REPLACES ────────────────────────────────────────────────
+ *
+ * `ProductCard` rendered SEVEN independent badges into one absolutely-
+ * positioned stack, each unconditionally shown when its own condition held:
+ *
+ *   -20%  ·  Auction  ·  Bundled  ·  In Set  ·  Taking Offers  ·  Final Sale
+ *   ·  Has Variants
+ *
+ * None of them knew about the others. A discounted auction that is a bundled
+ * set member with offers enabled, final sale and variants renders all seven,
+ * stacked top-left, covering the product photograph the card exists to show.
+ * Nothing is wrong with any one of those badges; the defect is that nobody
+ * decided which matters.
+ *
+ * ── THE RULE ────────────────────────────────────────────────────────────────
+ *
+ * 🛑 A BADGE EARNS ITS PLACE BY CHANGING WHETHER THE SHOPPER CLICKS. That is
+ * the whole test, and it sorts the seven cleanly:
+ *
+ *   KEEPS ITS PLACE — changes the decision to click
+ *     · listing TYPE: an auction and a pre-order are different transactions
+ *       with different CTAs. Not knowing is a wasted click.
+ *     · DISCOUNT: the single commercial reason to look at this card first.
+ *
+ *   LOSES ITS PLACE — matters when deciding to BUY, not to click
+ *     · Final Sale, Taking Offers, Bundled, In Set, Has Variants
+ *
+ * The second group is not deleted — it moves to the detail page, where there
+ * is room to state it in words rather than a 10px pill. A badge a shopper
+ * cannot act on from a grid is noise, and noise hides the badge they can act
+ * on, which is the actual cost of having seven.
+ *
+ * 🛑 `MAX_CARD_BADGES = 2` IS THE MECHANISM, and it has to exist separately
+ * from the precedence list. A precedence with no cap is still seven badges in
+ * a known order; the cap is what makes adding an eighth a design decision
+ * instead of a silent append. An overflow count ("+3") was considered and
+ * rejected — it is itself a badge, and one that says nothing.
+ *
+ * ── WHY A MODULE AND NOT A `.slice(0, 2)` AT THE CALL SITE ─────────────────
+ *
+ * Three card components render these (`ProductCard`, its list layout, and the
+ * per-type marketplace cards), and a cap applied at one of them is the shape
+ * this codebase has paid for repeatedly: `unitPriceFor` documented itself as
+ * "the single source of truth" and was then hand-copied into four more places,
+ * one of which never learned about locked prices and charged the list price
+ * for a negotiated sale (Root Cause #75).
+ *
+ * @tag domain:products
+ * @tag layer:shared
+ * @tag access:isomorphic
+ */
+/** Stable ids, so a consumer can reason about precedence without string-matching. */
+export declare const CARD_BADGE: {
+    readonly DISCOUNT: "discount";
+    readonly LISTING_TYPE: "listing-type";
+};
+export type CardBadgeId = (typeof CARD_BADGE)[keyof typeof CARD_BADGE];
+export interface CardBadge {
+    id: CardBadgeId;
+    label: string;
+    /** Resolved by the caller from the listing-type plugin, or a local constant. */
+    className: string;
+    /** Long form, for the `title` attribute. */
+    title?: string;
+}
+/**
+ * 🛑 THE CAP. Two is not a round number — it is one commercial signal
+ * (discount) plus one transactional one (type), which are the only two
+ * questions a shopper answers before clicking. A third badge would have to
+ * displace one of those to earn its place.
+ */
+export declare const MAX_CARD_BADGES = 2;
+/**
+ * Precedence, highest first.
+ *
+ * 🛑 DISCOUNT OUTRANKS TYPE, deliberately, and this is the one judgement call
+ * in the file. Type is what the card IS; discount is why this card rather than
+ * the one beside it. In a grid the shopper is comparing, so the comparative
+ * signal goes first — and at the cap of two both are shown anyway, so the
+ * order only decides which is read first.
+ */
+export declare const CARD_BADGE_PRECEDENCE: readonly CardBadgeId[];
+/**
+ * Sort candidates by precedence and cap them.
+ *
+ * Takes already-resolved badges rather than a product, so this module needs no
+ * import of the listing-type registry or the product schema — it stays a pure
+ * ordering decision, which is the only thing it should be opinionated about.
+ *
+ * An id absent from `CARD_BADGE_PRECEDENCE` sorts LAST rather than being
+ * dropped: silently discarding a badge a caller built would be the harder
+ * failure to find, and the cap removes it anyway if it does not fit.
+ */
+export declare function resolveCardBadges(candidates: readonly (CardBadge | null | undefined)[]): CardBadge[];

package/dist/features/products/constants/card-badges.js

@@ -0,0 +1,100 @@
+/**
+ * What a product card may say in its badge corner, and in what order.
+ *
+ * ── THE DEFECT THIS REPLACES ────────────────────────────────────────────────
+ *
+ * `ProductCard` rendered SEVEN independent badges into one absolutely-
+ * positioned stack, each unconditionally shown when its own condition held:
+ *
+ *   -20%  ·  Auction  ·  Bundled  ·  In Set  ·  Taking Offers  ·  Final Sale
+ *   ·  Has Variants
+ *
+ * None of them knew about the others. A discounted auction that is a bundled
+ * set member with offers enabled, final sale and variants renders all seven,
+ * stacked top-left, covering the product photograph the card exists to show.
+ * Nothing is wrong with any one of those badges; the defect is that nobody
+ * decided which matters.
+ *
+ * ── THE RULE ────────────────────────────────────────────────────────────────
+ *
+ * 🛑 A BADGE EARNS ITS PLACE BY CHANGING WHETHER THE SHOPPER CLICKS. That is
+ * the whole test, and it sorts the seven cleanly:
+ *
+ *   KEEPS ITS PLACE — changes the decision to click
+ *     · listing TYPE: an auction and a pre-order are different transactions
+ *       with different CTAs. Not knowing is a wasted click.
+ *     · DISCOUNT: the single commercial reason to look at this card first.
+ *
+ *   LOSES ITS PLACE — matters when deciding to BUY, not to click
+ *     · Final Sale, Taking Offers, Bundled, In Set, Has Variants
+ *
+ * The second group is not deleted — it moves to the detail page, where there
+ * is room to state it in words rather than a 10px pill. A badge a shopper
+ * cannot act on from a grid is noise, and noise hides the badge they can act
+ * on, which is the actual cost of having seven.
+ *
+ * 🛑 `MAX_CARD_BADGES = 2` IS THE MECHANISM, and it has to exist separately
+ * from the precedence list. A precedence with no cap is still seven badges in
+ * a known order; the cap is what makes adding an eighth a design decision
+ * instead of a silent append. An overflow count ("+3") was considered and
+ * rejected — it is itself a badge, and one that says nothing.
+ *
+ * ── WHY A MODULE AND NOT A `.slice(0, 2)` AT THE CALL SITE ─────────────────
+ *
+ * Three card components render these (`ProductCard`, its list layout, and the
+ * per-type marketplace cards), and a cap applied at one of them is the shape
+ * this codebase has paid for repeatedly: `unitPriceFor` documented itself as
+ * "the single source of truth" and was then hand-copied into four more places,
+ * one of which never learned about locked prices and charged the list price
+ * for a negotiated sale (Root Cause #75).
+ *
+ * @tag domain:products
+ * @tag layer:shared
+ * @tag access:isomorphic
+ */
+/** Stable ids, so a consumer can reason about precedence without string-matching. */
+export const CARD_BADGE = {
+    DISCOUNT: "discount",
+    LISTING_TYPE: "listing-type",
+};
+/**
+ * 🛑 THE CAP. Two is not a round number — it is one commercial signal
+ * (discount) plus one transactional one (type), which are the only two
+ * questions a shopper answers before clicking. A third badge would have to
+ * displace one of those to earn its place.
+ */
+export const MAX_CARD_BADGES = 2;
+/**
+ * Precedence, highest first.
+ *
+ * 🛑 DISCOUNT OUTRANKS TYPE, deliberately, and this is the one judgement call
+ * in the file. Type is what the card IS; discount is why this card rather than
+ * the one beside it. In a grid the shopper is comparing, so the comparative
+ * signal goes first — and at the cap of two both are shown anyway, so the
+ * order only decides which is read first.
+ */
+export const CARD_BADGE_PRECEDENCE = [
+    CARD_BADGE.DISCOUNT,
+    CARD_BADGE.LISTING_TYPE,
+];
+/**
+ * Sort candidates by precedence and cap them.
+ *
+ * Takes already-resolved badges rather than a product, so this module needs no
+ * import of the listing-type registry or the product schema — it stays a pure
+ * ordering decision, which is the only thing it should be opinionated about.
+ *
+ * An id absent from `CARD_BADGE_PRECEDENCE` sorts LAST rather than being
+ * dropped: silently discarding a badge a caller built would be the harder
+ * failure to find, and the cap removes it anyway if it does not fit.
+ */
+export function resolveCardBadges(candidates) {
+    const rank = (id) => {
+        const i = CARD_BADGE_PRECEDENCE.indexOf(id);
+        return i === -1 ? CARD_BADGE_PRECEDENCE.length : i;
+    };
+    return candidates
+        .filter((b) => b != null)
+        .sort((a, b) => rank(a.id) - rank(b.id))
+        .slice(0, MAX_CARD_BADGES);
+}

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

@@ -15,7 +15,7 @@ import { BaseRepository, prepareForFirestore, parseSieveDateValue, } from "../..
  */
 import { cacheManager } from "../../../core/CacheManager.js";
 import { serverLogger } from "../../../monitoring/index.js";
-import { generateUniqueId, slugify, generateBarcodeId } from "../../../utils/index.js";
+import { generateUniqueId, slugify, generateBarcodeId, generateSku } from "../../../utils/index.js";
 import { parseSearchTxtQuery } from "../../../utils/search-txt.js";
 // The shared search plan/refine the other eleven migrated collections use.
 // `planSearchTxt` carries the `empty` guard that keeps a punctuation-only query
@@ -941,6 +941,30 @@ export class ProductRepository extends BaseRepository {
             }
         });
         const barcodeId = input.barcodeId ?? await generateBarcodeId(id);
+        /*
+         * The HUMAN key, derived on create beside the machine one.
+         *
+         * 🛑 Generated here rather than left to the form, because an absent `sku`
+         * is what produced "No SKU" on every row of /admin/products and an admin
+         * search box promising a field that did not exist. A key that is only
+         * present when someone remembered to type it is a key nothing can rely on.
+         *
+         * Synchronous, unlike `generateBarcodeId` — it is a `Math.imul` hash
+         * rather than `crypto.subtle`, specifically so seed rows and form state
+         * can call it without threading a promise through every row builder.
+         *
+         * Reads the DERIVED taxonomy below where it can, but the leaf is not
+         * resolved until `deriveTaxonomy` runs, so this uses the inbound value and
+         * accepts a slightly less specific token over a second await.
+         */
+        const sku = input.sku ??
+            generateSku({
+                productId: id,
+                categorySlug: Array.isArray(input.categorySlugs)
+                    ? input.categorySlugs[0]
+                    : input.category,
+                brand: input.brand,
+            });
         // Always derive on create — one extra read per listing created, and it is
         // what makes a UI-created product reachable from its own category page at
         // all. A seed row already carrying the correct chain derives to the same
@@ -955,6 +979,15 @@ export class ProductRepository extends BaseRepository {
         const withTaxonomy = {
             ...input,
             ...derived,
+            /*
+             * 🛑 `sku` goes in HERE, not just on `productData` below, and the
+             * difference matters: `buildProductSearchTxt(withTaxonomy)` is what
+             * builds the stored token list. A `sku` added only to the stored
+             * document would be invisible to every search — which is Root Cause
+             * #101's shape exactly, a field present on the object and absent from
+             * what a query reads.
+             */
+            sku,
             ...(input.images !== undefined ? { images: toProductImages(input.images) } : {}),
         };
         const productData = {