@mohasinac/appkit 4.42.1 → 4.42.2

package/dist/features/cart/schemas/index.d.ts

@@ -5,17 +5,20 @@ export declare const cartItemMetaSchema: z.ZodObject<{
     price: z.ZodNumber;
     currency: z.ZodDefault<z.ZodString>;
     slug: z.ZodOptional<z.ZodString>;
+    storeName: z.ZodOptional<z.ZodString>;
     attributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
 }, "strip", z.ZodTypeAny, {
     currency: string;
     title: string;
     price: number;
+    storeName?: string | undefined;
     slug?: string | undefined;
     attributes?: Record<string, string> | undefined;
 }, {
     title: string;
     price: number;
     currency?: string | undefined;
+    storeName?: string | undefined;
     slug?: string | undefined;
     attributes?: Record<string, string> | undefined;
 }>;
@@ -40,17 +43,20 @@ export declare const cartItemSchema: z.ZodObject<{
         price: z.ZodNumber;
         currency: z.ZodDefault<z.ZodString>;
         slug: z.ZodOptional<z.ZodString>;
+        storeName: z.ZodOptional<z.ZodString>;
         attributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
     }, "strip", z.ZodTypeAny, {
         currency: string;
         title: string;
         price: number;
+        storeName?: string | undefined;
         slug?: string | undefined;
         attributes?: Record<string, string> | undefined;
     }, {
         title: string;
         price: number;
         currency?: string | undefined;
+        storeName?: string | undefined;
         slug?: string | undefined;
         attributes?: Record<string, string> | undefined;
     }>>;
@@ -63,6 +69,7 @@ export declare const cartItemSchema: z.ZodObject<{
         currency: string;
         title: string;
         price: number;
+        storeName?: string | undefined;
         slug?: string | undefined;
         attributes?: Record<string, string> | undefined;
     } | undefined;
@@ -76,6 +83,7 @@ export declare const cartItemSchema: z.ZodObject<{
         title: string;
         price: number;
         currency?: string | undefined;
+        storeName?: string | undefined;
         slug?: string | undefined;
         attributes?: Record<string, string> | undefined;
     } | undefined;
@@ -96,17 +104,20 @@ export declare const cartSummarySchema: z.ZodObject<{
             price: z.ZodNumber;
             currency: z.ZodDefault<z.ZodString>;
             slug: z.ZodOptional<z.ZodString>;
+            storeName: z.ZodOptional<z.ZodString>;
             attributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
         }, "strip", z.ZodTypeAny, {
             currency: string;
             title: string;
             price: number;
+            storeName?: string | undefined;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         }, {
             title: string;
             price: number;
             currency?: string | undefined;
+            storeName?: string | undefined;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         }>>;
@@ -119,6 +130,7 @@ export declare const cartSummarySchema: z.ZodObject<{
             currency: string;
             title: string;
             price: number;
+            storeName?: string | undefined;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         } | undefined;
@@ -132,6 +144,7 @@ export declare const cartSummarySchema: z.ZodObject<{
             title: string;
             price: number;
             currency?: string | undefined;
+            storeName?: string | undefined;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         } | undefined;
@@ -153,6 +166,7 @@ export declare const cartSummarySchema: z.ZodObject<{
             currency: string;
             title: string;
             price: number;
+            storeName?: string | undefined;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         } | undefined;
@@ -170,6 +184,7 @@ export declare const cartSummarySchema: z.ZodObject<{
             title: string;
             price: number;
             currency?: string | undefined;
+            storeName?: string | undefined;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         } | undefined;

package/dist/features/cart/schemas/index.js

@@ -6,6 +6,8 @@ export const cartItemMetaSchema = z.object({
     price: z.number(),
     currency: z.string().default(getDefaultCurrency()),
     slug: z.string().optional(),
+    /* Named field, not an `attributes` entry — see CartItemMeta.storeName. */
+    storeName: z.string().optional(),
     attributes: z.record(z.string(), z.string()).optional(),
 });
 /**

package/dist/features/cart/types/index.d.ts

@@ -1,11 +1,33 @@
 export interface CartItemMeta {
     productId: string;
     storeId?: string;
+    /**
+     * The seller's display name, for grouping lines by seller and for the cart's
+     * own search box.
+     *
+     * 🛑 It lives here and NOT in `attributes`, which is rendered verbatim.
+     * `CartItemRow` prints every attribute entry as `` `${key}: ${value}` ``, so
+     * putting the store name in that bag printed the literal string
+     * `storeName: Beyblade Arena` under the product title on `/cart` — a field
+     * name shown to a buyer on the highest-intent page in the funnel, one line
+     * below the same value already rendered properly as `SOLD BY BEYBLADE ARENA`.
+     */
+    storeName?: string;
     title: string;
     image?: string;
     price: number;
     currency?: string;
     slug?: string;
+    /**
+     * Genuine per-line product attributes — the kind a buyer needs in order to
+     * tell two lines of the same product apart (size, colour, edition).
+     *
+     * 🛑 DISPLAY ONLY. Every entry is rendered to the buyer as
+     * `` `${key}: ${value}` ``, joined with commas. Never use this to carry
+     * plumbing a component needs: a field put here to be *read* is also a field
+     * printed with its own name, and the leak looks like a debug string rather
+     * than like a bug. Add a named field to this interface instead.
+     */
     attributes?: Record<string, string>;
 }
 export interface CartItem {

package/dist/features/categories/components/CategoriesIndexListing.js

@@ -38,9 +38,27 @@ function renderCategoryFilterDrawer(props) {
 function getNumericParam(table, key) {
     return table.get(key) ? Number(table.get(key)) : undefined;
 }
-const DEFAULT_SORT = sortBy(CATEGORY_FIELDS.NAME, "ASC");
+/*
+ * 🛑 TIER FIRST, NOT NAME. Found by
+ * checklist-happy-path-guest-browse-categories-index-lists-roots, 2026-09-29.
+ *
+ * This was `name ASC`, which sorts 47 categories alphabetically with no
+ * awareness of the tree — so BOTH roots fell off page 1. "Spinning Tops" sorts
+ * under S onto page 3 and "Living Collectibles" under L onto page 2, while
+ * their own descendants filled page 1: Bits, Blades, Discs, Drivers, Energy
+ * Rings. A visitor opening /categories met component-level leaves, eight of
+ * them reading "0 items", and never saw either root.
+ *
+ * `tier` is already `canSort: true` in the repository's SIEVE_FIELDS, and a
+ * single-field sort needs no composite index, so this costs nothing to deploy.
+ * Deliberately NOT `tier ASC, name ASC`: that pairing has no
+ * `(tier, name)` index and a missing composite fails as an empty page rather
+ * than an error (Root Cause #59).
+ */
+const DEFAULT_SORT = sortBy(CATEGORY_FIELDS.TIER, "ASC");
 const FILTER_KEYS = [TABLE_KEYS.IS_FEATURED, "isBrand", "rootOnly", "tier", "minItemCount", "maxItemCount"];
 const SORT_OPTIONS = [
+    { value: sortBy(CATEGORY_FIELDS.TIER, "ASC"), label: "Top level first" },
     { value: sortBy(CATEGORY_FIELDS.NAME, "ASC"), label: "Name A–Z" },
     { value: sortBy(CATEGORY_FIELDS.NAME), label: "Name Z–A" },
     { value: sortBy("metrics.productCount", "DESC"), label: "Most Products" },

package/dist/features/categories/components/CategoriesIndexPageView.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "../../../constants/sort";
+import { CATEGORY_FIELDS } from "../../../constants/field-names";
 import { categoriesRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
@@ -38,7 +40,18 @@ function buildCategoryFilters(params) {
     return parts.join(",");
 }
 export async function CategoriesIndexPageView({ searchParams = {} }) {
-    const sort = sp(searchParams, "sort") || "name";
+    /*
+     * 🛑 MUST MATCH CategoriesIndexListing's DEFAULT_SORT.
+     *
+     * This defaulted to "name" while the client listing defaulted to the same,
+     * and both were wrong: the roots fell off page 1. Now both default to tier
+     * ascending — and they have to agree, because this view hands its result to
+     * the listing as initialData and every public listing hook sets
+     * `staleTime: Infinity` when given it. A disagreement here is not a
+     * transient wrong first paint; it is frozen for that query key
+     * (Root Cause #30).
+     */
+    const sort = sp(searchParams, "sort") || sortBy(CATEGORY_FIELDS.TIER, "ASC");
     const page = Number(sp(searchParams, "page")) || 1;
     const filters = buildCategoryFilters(searchParams);
     const result = await safeRead(() => categoriesRepository.list({

package/dist/features/classified/components/ClassifiedDetailPageView.d.ts

@@ -18,6 +18,14 @@ export interface ClassifiedDetailPageViewProps {
         currency: string;
         minOfferPercent: number;
         bounds: OfferBounds;
+        /**
+         * The owning store's SLUG, so the control can suppress itself for the
+         * seller who owns the listing. Kept identical to `ProductDetailPageView`'s
+         * ctx — the comment at the `/classified/[slug]` call site asserts the two
+         * contracts match precisely so a consumer snippet can be shared, and an
+         * added field on one is drift unless it lands on both.
+         */
+        listingStoreId?: string;
     }) => React.ReactNode;
 }
 export declare function ClassifiedDetailPageView({ slug, initialProduct, renderOfferAction }: ClassifiedDetailPageViewProps): Promise<import("react").JSX.Element>;

package/dist/features/classified/components/ClassifiedDetailPageView.js

@@ -105,6 +105,7 @@ export async function ClassifiedDetailPageView({ slug, initialProduct, renderOff
                                         minOfferPercent: typeof p.minOfferPercent === "number"
                                             ? p.minOfferPercent
                                             : DEFAULT_MIN_OFFER_PERCENT,
+                                        listingStoreId: typeof p.storeId === "string" ? p.storeId : undefined,
                                         bounds: offerBounds,
                                     }), _jsx(Text, { size: "xs", color: "muted", children: offerBounds.isBuyRequest
                                             ? "Send a request to buy and the seller will confirm. Payment and collection are arranged after they accept."

package/dist/features/events/actions/event-actions.d.ts

@@ -101,6 +101,19 @@ export declare function getEventLeaderboard(eventId: string): Promise<import("..
  * caller can render a generic "Guest" label instead of a raw hash.
  */
 export declare function getEventSpinResults(eventId: string, limit?: number): Promise<import("../types").SpinResultEntry[]>;
+/**
+ * The CALLER'S OWN winning spins for an event, newest first.
+ *
+ * The companion to `getEventSpinResults`, which is a public masked feed of
+ * everyone's recent spins. That feed cannot answer "what did I win", and a
+ * checklist case asserting it did was the thing that surfaced the gap: read as
+ * a buyer who had never spun, the page listed three other people's prizes and
+ * showed no empty state, because from its point of view nothing was empty.
+ *
+ * Unmasked on purpose — these are the caller's own results, and `userId` is
+ * supplied by the server from a verified session, never by the client.
+ */
+export declare function getUserSpinResultsForEvent(eventId: string, userId: string): Promise<import("../types").SpinResultEntry[]>;
 /**
  * Per-option vote tally for a poll event — replaces the voter-ranked
  * leaderboard for event.type === "poll", where ranking "who happened to

package/dist/features/events/actions/event-actions.js

@@ -16,6 +16,7 @@ const ERR_EVENT_NOT_FOUND = "Event not found";
 import { coerceMediaField, getMediaUrl } from "../../../utils";
 import { finalizeStagedMediaField, finalizeStagedMediaObject, finalizeStagedMediaObjectArray, } from "../../media/finalize";
 import { hidePublicTestData } from "../../../_internal/server/features/tester/visibility";
+import { maskName } from "../../../security/pii-mask";
 // --- Admin: Create Event --------------------------------------------------
 export async function createEvent(adminId, input) {
     const finalizedCoverUrl = await finalizeStagedMediaField(getMediaUrl(input.coverImage) ??
@@ -194,13 +195,56 @@ export async function getEventSpinResults(eventId, limit = 10) {
     const entries = await eventEntryRepository.getRecentSpinResults(event.id, limit);
     return entries.map((entry) => ({
         id: entry.id,
-        userDisplayName: entry.userId ? entry.userDisplayName : undefined,
+        /*
+         * 🛑 MASKED. This is a public feed on a public event page — the route is
+         * not viewer-scoped and never has been — so it was publishing real winners'
+         * full display names beside the prize each one won, to anybody with the
+         * event's URL.
+         *
+         * Root Cause #50 is the precedent and it is the same shape: a real bidder's
+         * display name was going out on public Bid History because `maskPublicBid`
+         * spread its input instead of calling `maskName`. Nothing rendered the field
+         * conspicuously there either, which is why it sat unnoticed.
+         *
+         * `maskName` returns "Anonymous" for a missing name, so the guest case still
+         * reads sensibly, and `isGuest` below is what the renderer actually branches
+         * on for its own label. A caller's OWN spins are served unmasked by
+         * `getUserSpinResultsForEvent` — masking is for other people's.
+         */
+        userDisplayName: entry.userId ? maskName(entry.userDisplayName) : undefined,
         isGuest: !entry.userId,
         spinPrizeId: entry.spinPrizeId,
         spinPrizeTitle: entry.spinPrizeId ? prizeTitleById.get(entry.spinPrizeId) : undefined,
         spinWonAt: entry.spinWonAt ? new Date(entry.spinWonAt).toISOString() : undefined,
     }));
 }
+/**
+ * The CALLER'S OWN winning spins for an event, newest first.
+ *
+ * The companion to `getEventSpinResults`, which is a public masked feed of
+ * everyone's recent spins. That feed cannot answer "what did I win", and a
+ * checklist case asserting it did was the thing that surfaced the gap: read as
+ * a buyer who had never spun, the page listed three other people's prizes and
+ * showed no empty state, because from its point of view nothing was empty.
+ *
+ * Unmasked on purpose — these are the caller's own results, and `userId` is
+ * supplied by the server from a verified session, never by the client.
+ */
+export async function getUserSpinResultsForEvent(eventId, userId) {
+    const event = await eventRepository.findByIdOrSlug(eventId);
+    if (!event || event.type !== "spin_wheel")
+        return [];
+    const prizeTitleById = new Map((event.spinPrizes ?? []).map((p) => [p.id, p.label]));
+    const entries = await eventEntryRepository.getUserSpinResults(event.id, userId);
+    return entries.map((entry) => ({
+        id: entry.id,
+        userDisplayName: entry.userDisplayName,
+        isGuest: false,
+        spinPrizeId: entry.spinPrizeId,
+        spinPrizeTitle: entry.spinPrizeId ? prizeTitleById.get(entry.spinPrizeId) : undefined,
+        spinWonAt: entry.spinWonAt ? new Date(entry.spinWonAt).toISOString() : undefined,
+    }));
+}
 /**
  * Per-option vote tally for a poll event — replaces the voter-ranked
  * leaderboard for event.type === "poll", where ranking "who happened to
@@ -324,6 +368,36 @@ export async function enterEvent(eventId, input, user, request) {
             throw new ValidationError(ERROR_MESSAGES.EVENT.ALREADY_ENTERED);
         }
     }
+    /*
+     * 🛑 A signed-in user could vote in a poll as many times as they liked, and
+     * every vote counted.
+     *
+     * Three paths reach this point and only two of them guarded. A GUEST is
+     * deduped by hashed IP just above; a SURVEY enforces `maxEntriesPerUser`
+     * immediately above that; a poll had neither, so the one case that is trivial
+     * to abuse — an authenticated voter clicking Cast Vote again — was the
+     * unguarded one. Measured on /events/event-favourite-blader-poll: voted for
+     * one option, reloaded, voted for a DIFFERENT option, and the second was
+     * accepted with the same "Vote recorded!" confirmation. The event's
+     * Participants counter went 362 -> 364 on those two votes from one account, so
+     * the tally itself was corrupted, not merely the UI.
+     *
+     * A poll is one vote per person by definition — there is no
+     * `maxEntriesPerUser` to consult and no change-your-vote affordance anywhere
+     * in the UI — so the rule is simply "not twice". Uses the same
+     * `countUserEntries` the survey path already relies on rather than a new
+     * query, so the read cost and the index it needs are both already proven.
+     *
+     * ValidationError, so the caller gets `ALREADY_ENTERED` and a real message:
+     * the previous behaviour silently produced a duplicate, which is the failure
+     * mode this refusal exists to replace.
+     */
+    if (user && event.type === "poll") {
+        const priorVotes = await eventEntryRepository.countUserEntries(resolvedEventId, user.uid);
+        if (priorVotes >= 1) {
+            throw new ValidationError(ERROR_MESSAGES.EVENT.ALREADY_ENTERED);
+        }
+    }
     if (event.type === "poll" && event.pollConfig) {
         const validOptionIds = event.pollConfig.options.map((o) => o.id);
         const votes = input.pollVotes ?? [];

package/dist/features/events/repository/event-entry.repository.d.ts

@@ -22,6 +22,23 @@ declare class EventEntryRepository extends BaseRepository<EventEntryDocument> {
      * (every write path sets `spinWonAt` and `spinPrizeId` together).
      */
     getRecentSpinResults(eventId: string, limit?: number): Promise<EventEntryDocument[]>;
+    /**
+     * One caller's own winning spins for an event, newest first.
+     *
+     * 🛑 Deliberately the SAME query shape as `countUserEntries` — two equalities
+     * on `(eventId, userId)` and no `orderBy` — so it needs no composite index
+     * that does not already exist. `getRecentSpinResults` orders by `spinWonAt`,
+     * which is fine with its single equality but would demand a new
+     * `(eventId, userId, spinWonAt)` index here, and an index that has not been
+     * deployed fails with FAILED_PRECONDITION at runtime while looking perfectly
+     * correct in source (Root Cause #2).
+     *
+     * Sorting in memory is safe precisely because this set is tiny and bounded by
+     * the event's own `spinMaxPerUser` — it is "my spins", not a feed. Rows with
+     * no `spinWonAt` are dropped rather than sorted to an arbitrary end: an entry
+     * that never resolved a prize is not a spin result.
+     */
+    getUserSpinResults(eventId: string, userId: string): Promise<EventEntryDocument[]>;
     countUserEntries(eventId: string, userId: string): Promise<number>;
     getLeaderboard(eventId: string, limit?: number): Promise<import("../types").LeaderboardEntry[]>;
     /**

package/dist/features/events/repository/event-entry.repository.js

@@ -92,6 +92,42 @@ class EventEntryRepository extends BaseRepository {
             throw new DatabaseError(`Failed to get recent spin results for event ${eventId}`, error);
         }
     }
+    /**
+     * One caller's own winning spins for an event, newest first.
+     *
+     * 🛑 Deliberately the SAME query shape as `countUserEntries` — two equalities
+     * on `(eventId, userId)` and no `orderBy` — so it needs no composite index
+     * that does not already exist. `getRecentSpinResults` orders by `spinWonAt`,
+     * which is fine with its single equality but would demand a new
+     * `(eventId, userId, spinWonAt)` index here, and an index that has not been
+     * deployed fails with FAILED_PRECONDITION at runtime while looking perfectly
+     * correct in source (Root Cause #2).
+     *
+     * Sorting in memory is safe precisely because this set is tiny and bounded by
+     * the event's own `spinMaxPerUser` — it is "my spins", not a feed. Rows with
+     * no `spinWonAt` are dropped rather than sorted to an arbitrary end: an entry
+     * that never resolved a prize is not a spin result.
+     */
+    async getUserSpinResults(eventId, userId) {
+        try {
+            const snapshot = await this.getCollection()
+                .where(EVENT_ENTRY_FIELDS.EVENT_ID, "==", eventId)
+                .where(EVENT_ENTRY_FIELDS.USER_ID, "==", userId)
+                .get();
+            return snapshot.docs
+                .map((doc) => this.mapDoc(doc))
+                .filter((entry) => Boolean(entry.spinWonAt))
+                .sort((a, b) => {
+                const at = new Date(a.spinWonAt).getTime();
+                const bt = new Date(b.spinWonAt).getTime();
+                return (Number.isFinite(bt) ? bt : 0) - (Number.isFinite(at) ? at : 0);
+            });
+        }
+        catch (error) {
+            void normalizeError(error);
+            throw new DatabaseError(`Failed to load spin results for user ${userId} on event ${eventId}`, error);
+        }
+    }
     async countUserEntries(eventId, userId) {
         try {
             const snapshot = await this.getCollection()

package/dist/features/homepage/components/BrandsSection.js

@@ -45,5 +45,5 @@ export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, view
     });
     if (!isLoading && allBrands.length === 0)
         return null;
-    return (_jsx(Section, { className: `${className}`, surface: "subtle", paddingY: "y-3xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Row, { className: "mb-6", align: "center", justify: "between", reverse: hand === "left", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs(Row, { wrap: true, gap: "sm", className: "mb-4", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden}`, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Div, { className: "h-32 w-36 flex-none animate-pulse md:h-40", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, loop: loop })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, surface: "subtle", paddingY: "y-3xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Row, { className: "mb-6", align: "center", justify: "between", reverse: hand === "left", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[0.375rem] rounded-[var(--appkit-radius-md)] px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-semibold transition-colors bg-primary text-white hover:bg-primary-600", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs(Row, { wrap: true, gap: "sm", className: "mb-4", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden}`, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Div, { className: "h-32 w-36 flex-none animate-pulse md:h-40", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, loop: loop })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
 }

package/dist/features/homepage/components/CustomerReviewsSection.js

@@ -17,5 +17,5 @@ export function CustomerReviewsSection({ title, subtitle, items, renderItem, vie
     }
     if (items.length === 0)
         return null;
-    return (_jsx(Section, { className: `${className}`, surface: "muted", padding: "y-3xl", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto md:px-[2rem]", padding: "x-md", children: [_jsxs(Div, { className: "text-left mb-10", children: [_jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary}`, size: "base", children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: perView ?? CAROUSEL_PER_VIEW.reviews, gap: 24, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: loop }), viewMoreHref && (_jsx(Div, { className: "text-left mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-primary hover:text-primary/80", size: "sm", weight: "medium", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, surface: "muted", padding: "y-3xl", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto md:px-[2rem]", padding: "x-md", children: [_jsxs(Div, { className: "text-left mb-10", children: [_jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary}`, size: "base", children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: perView ?? CAROUSEL_PER_VIEW.reviews, gap: 24, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: loop }), viewMoreHref && (_jsx(Div, { className: "text-left mt-8", children: _jsx(TextLink, { href: viewMoreHref, rounded: "md", align: "center", gap: "xs", className: "inline-flex px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] transition-colors bg-primary text-white hover:bg-primary-600", size: "sm", weight: "semibold", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/homepage/components/FeaturedBundlesSection.js

@@ -30,7 +30,7 @@ export function FeaturedBundlesSection({ title = BUNDLE_COPY.featuredDefaultTitl
     const items = maxItems && maxItems > 0 ? bundles.slice(0, maxItems) : bundles;
     if (items.length === 0)
         return null;
-    return (_jsx(Section, { className: `${className}`, padding: "y-2xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, reverse: hand === "left", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), description && (_jsx(Text, { size: "sm", color: "muted", children: description }))] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLES), className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel })] }), _jsx(Grid, { cols: "cards", gap: "3", children: items.map((bundle) => (_jsx(FeaturedBundleCard, { bundle: bundle, showSavingsBadge: showSavingsBadge, onBuyNow: onBuyNow }, bundle.id))) })] }) }));
+    return (_jsx(Section, { className: `${className}`, padding: "y-2xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, reverse: hand === "left", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), description && (_jsx(Text, { size: "sm", color: "muted", children: description }))] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLES), className: "inline-flex items-center gap-[0.375rem] rounded-[var(--appkit-radius-md)] px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-semibold transition-colors bg-primary text-white hover:bg-primary-600", children: viewMoreLabel })] }), _jsx(Grid, { cols: "cards", gap: "3", children: items.map((bundle) => (_jsx(FeaturedBundleCard, { bundle: bundle, showSavingsBadge: showSavingsBadge, onBuyNow: onBuyNow }, bundle.id))) })] }) }));
 }
 function FeaturedBundleCard({ bundle, showSavingsBadge = true, onBuyNow, }) {
     const stock = bundle.bundleStockStatus ?? "in_stock";

package/dist/features/homepage/components/ShopByCategorySection.js

@@ -69,5 +69,5 @@ export function ShopByCategorySection({ title = "Shop by Category", subtitle, li
                             if (!cat)
                                 return null;
                             return (_jsx(FilterChip, { label: cat.name, active: activeFilter === id, onClick: () => setActiveFilter(activeFilter === id ? "all" : id) }, id));
-                        })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden} px-[0.25rem]`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: autoScroll, autoScrollInterval: scrollInterval, showArrows: true, snapToItems: true, showScrollbar: false, loop: loop, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+                        })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden} px-[0.25rem]`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: autoScroll, autoScrollInterval: scrollInterval, showArrows: true, snapToItems: true, showScrollbar: false, loop: loop, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[0.375rem] rounded-[var(--appkit-radius-md)] px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-semibold transition-colors bg-primary text-white hover:bg-primary-600", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/media/upload/MediaUploadField.js

@@ -101,9 +101,27 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
     const [extInput, setExtInput] = useState("");
     const [extError, setExtError] = useState("");
     const hasAlternateSources = showYoutube || showExternal;
-    // PDF mode: derived from the `accept` prop. Hides camera capture + alternate
-    // URL tabs (YouTube/External never make sense for invoice/payout-doc fields)
-    // and trim/thumbnail flow.
+    /*
+     * PDF mode: derived from the `accept` prop. It forces file-only capture
+     * (`effectiveCaptureSource` below) and does nothing else.
+     *
+     * 🛑 This comment used to claim it also hid "alternate URL tabs (YouTube /
+     * External never make sense for invoice/payout-doc fields) and trim/thumbnail
+     * flow". Two of those three were never implemented — `pdfMode` has exactly one
+     * consumer — so a reader checking whether a document field could be given a
+     * YouTube link found a comment saying no and code saying yes. The buyer's
+     * payment-proof field was offering "YouTube" and "External URL" as ways to
+     * evidence a real payment because of it.
+     *
+     * The intent in that comment is still right, and closing it properly means
+     * deciding one rule for all 11 mounts: `showYoutube`/`showExternal` default to
+     * TRUE and NOT ONE mount in the codebase opts out, while `AUTO_KIND_DEFAULTS`
+     * accepts `application/pdf`, so gating the tabs on `pdfMode` alone would also
+     * strip YouTube from every `kind="auto"` field — including the product video
+     * field, where the YouTube source is deliberate (Root Cause #49). Until that
+     * rule is chosen, a field that must not accept a URL says so explicitly, as
+     * the payment-proof page now does.
+     */
     // SB-UNI-Z5 2026-05-13 — fold `kind` defaults under explicit props.
     const kindDefaults = kind === "auto"
         ? AUTO_KIND_DEFAULTS

package/dist/features/orders/components/OrdersList.js

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Div, Pagination, Row, Span, Stack, Text } from "../../../ui";
+import { shortOrderRef } from "../utils/order-ref";
 import { MediaImage } from "../../media/MediaImage";
 import { formatCurrency } from "../../../utils/number.formatter";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
@@ -31,7 +32,7 @@ export function OrderCard({ order, onClick, labels = {}, renderActions }) {
     const revealsRemaining = unrevealedPrizeDraws.length;
     return (_jsxs(Div, { padding: "5", role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (e) => (e.key === "Enter" || e.key === "") && onClick(order)
-            : undefined, onClick: onClick ? () => onClick(order) : undefined, className: `border border-neutral-200 ${onClick ? "cursor-pointer transition hover:shadow-md" : ""}`, rounded: "xl", surface: "default", children: [_jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "3", children: [_jsxs(Div, { children: [_jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: ["Order #", order.id.slice(-8).toUpperCase()] }), date && (_jsx(Text, { className: "mt-0.5", color: "faint", size: "xs", children: date }))] }), _jsx(Span, { size: "xs", weight: "semibold", className: `capitalize ${statusColor}`, rounded: "full", padding: "pill-md", children: labels[order.orderStatus] ?? order.orderStatus.replace(/_/g, " ") })] }), revealsRemaining > 0 && (_jsx(Row, { gap: "sm", className: "mt-2", children: _jsxs(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: [revealsRemaining, " ", revealsRemaining === 1 ? "reveal" : "reveals", " pending"] }) })), _jsxs(Row, { wrap: true, gap: "3", className: "mt-4", children: [order.items.slice(0, 3).map((item, i) => (_jsxs(Row, { gap: "sm", children: [item.image && (_jsx(Div, { className: "relative h-10 w-10 flex-shrink-0", rounded: "lg", overflow: "hidden", children: _jsx(MediaImage, { src: item.image, alt: item.title, size: "thumbnail" }) })), _jsxs(Div, { children: [_jsx(Text, { truncate: true, size: "sm", weight: "medium", color: "primary", children: item.title }), _jsxs(Text, { size: "xs", color: "faint", children: ["\u00D7", item.quantity] })] })] }, i))), order.items.length > 3 && (_jsxs(Span, { size: "xs", className: "self-center", color: "faint", children: ["+", order.items.length - 3, " more"] }))] }), _jsxs(Row, { justify: "between", className: "mt-4 border-t border-neutral-100", padding: "t-sm", children: [_jsxs(Span, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: [order.currency ?? "", " Total"] }), _jsx(Span, { weight: "semibold", className: "text-[var(--appkit-color-text)]", children: formatCurrency(order.total, order.currency) })] }), renderActions && (_jsx(Row, { justify: "end", gap: "sm", className: "mt-3", onClick: (e) => e.stopPropagation(), children: renderActions(order) }))] }));
+            : undefined, onClick: onClick ? () => onClick(order) : undefined, className: `border border-neutral-200 ${onClick ? "cursor-pointer transition hover:shadow-md" : ""}`, rounded: "xl", surface: "default", children: [_jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "3", children: [_jsxs(Div, { children: [_jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: ["Order #", shortOrderRef(order.id)] }), date && (_jsx(Text, { className: "mt-0.5", color: "faint", size: "xs", children: date }))] }), _jsx(Span, { size: "xs", weight: "semibold", className: `capitalize ${statusColor}`, rounded: "full", padding: "pill-md", children: labels[order.orderStatus] ?? order.orderStatus.replace(/_/g, " ") })] }), revealsRemaining > 0 && (_jsx(Row, { gap: "sm", className: "mt-2", children: _jsxs(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: [revealsRemaining, " ", revealsRemaining === 1 ? "reveal" : "reveals", " pending"] }) })), _jsxs(Row, { wrap: true, gap: "3", className: "mt-4", children: [order.items.slice(0, 3).map((item, i) => (_jsxs(Row, { gap: "sm", children: [item.image && (_jsx(Div, { className: "relative h-10 w-10 flex-shrink-0", rounded: "lg", overflow: "hidden", children: _jsx(MediaImage, { src: item.image, alt: item.title, size: "thumbnail" }) })), _jsxs(Div, { children: [_jsx(Text, { truncate: true, size: "sm", weight: "medium", color: "primary", children: item.title }), _jsxs(Text, { size: "xs", color: "faint", children: ["\u00D7", item.quantity] })] })] }, i))), order.items.length > 3 && (_jsxs(Span, { size: "xs", className: "self-center", color: "faint", children: ["+", order.items.length - 3, " more"] }))] }), _jsxs(Row, { justify: "between", className: "mt-4 border-t border-neutral-100", padding: "t-sm", children: [_jsxs(Span, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: [order.currency ?? "", " Total"] }), _jsx(Span, { weight: "semibold", className: "text-[var(--appkit-color-text)]", children: formatCurrency(order.total, order.currency) })] }), renderActions && (_jsx(Row, { justify: "end", gap: "sm", className: "mt-3", onClick: (e) => e.stopPropagation(), children: renderActions(order) }))] }));
 }
 export function OrdersList({ orders, isLoading, onOrderClick, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No orders found", renderActions, }) {
     if (isLoading) {

package/dist/features/orders/index.d.ts

@@ -4,5 +4,6 @@ export * from "./components";
 export * from "./schemas";
 export * from "./columns";
 export * from "./utils/order-splitter";
+export { shortOrderRef } from "./utils/order-ref";
 export { groupOrderItemsByLine, type LineOrderGroup, type OrderItemForLineGrouping, } from "./utils/bundle-grouping";
 export { manifest } from "./manifest";

package/dist/features/orders/index.js

@@ -4,6 +4,7 @@ export * from "./components";
 export * from "./schemas";
 export * from "./columns";
 export * from "./utils/order-splitter";
+export { shortOrderRef } from "./utils/order-ref";
 // S-SBUNI-5 2026-05-13 — bundle-aware order item grouping.
 export { groupOrderItemsByLine, } from "./utils/bundle-grouping";
 export { manifest } from "./manifest";

package/dist/features/orders/types/index.d.ts

@@ -148,6 +148,8 @@ export interface Order {
     shipmentProtectionFee?: number;
     /** Buyer-facing platform commission apportioned to this order. */
     platformFee?: number;
+    /** COD handling fee, charged only on cash-on-delivery orders. */
+    codHandlingFee?: number;
     trackingNumber?: string;
     shippingCarrier?: string;
     /** Carrier tracking page URL — rendered as an external link that opens in a new tab. No live-tracking API integration; this is just the passthrough URL a seller/admin entered. */

package/dist/features/orders/utils/order-ref.d.ts

@@ -0,0 +1,45 @@
+/**
+ * The short, buyer-facing reference for an order.
+ *
+ * 🛑 WHY THIS EXISTS. Four sites independently rendered
+ * `order.id.slice(-8).toUpperCase()` — the buyer's order view (twice), the
+ * invoice, and `OrdersList`. A fixed-width tail is the wrong shape for these
+ * ids: `generateOrderId` produces
+ *
+ *     order-{itemCount}-{YYYYMMDD}-{rand6}
+ *
+ * whose final segment is **6** characters, so `slice(-8)` takes seven of them
+ * plus one extra — and that extra is the last digit of the DATE. Measured on a
+ * real order, `order-2-20260929-ezq0pc` rendered as **`#9-EZQ0PC`**.
+ *
+ * Three things are wrong with that, in increasing order of cost:
+ *
+ * 1. It straddles a delimiter, so the reference is not a substring of anything
+ *    meaningful — the leading `9` looks like part of a structured reference and
+ *    is a fragment of `20260929`.
+ * 2. Every order placed on the 9th, 19th or 29th of any month renders the same
+ *    leading digit, and the 1st/11th/21st/31st share another. The digit adds no
+ *    distinguishing information while looking like it does.
+ * 3. It is the number a buyer reads off their own screen and quotes to support,
+ *    and it does not appear anywhere in the real document id. The payment page
+ *    shows the full `order-2-20260929-ezq0pc`, so the same order presents two
+ *    unrelated-looking references depending on which page you are on.
+ *
+ * The random suffix alone is the intended unique part, so that is what this
+ * returns. Taking the last hyphen-delimited SEGMENT rather than a character
+ * count also means the format can change without silently re-slicing.
+ *
+ * @tag domain:orders
+ * @tag layer:utils
+ * @tag access:isomorphic
+ * @tag sideEffects:none — pure
+ */
+/**
+ * `order-2-20260929-ezq0pc` → `EZQ0PC`.
+ *
+ * Falls back to the whole id, uppercased, for anything that is not in the
+ * generator's shape (a legacy Firestore auto-id, say) — a reference that is
+ * merely long is far better than one that is wrong, and an empty string would
+ * render as a bare `#`.
+ */
+export declare function shortOrderRef(orderId: string): string;