@mohasinac/appkit 4.30.15 → 4.30.17

package/dist/features/auctions/components/PlaceBidFormClient.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
 import { formatCurrency } from "../../../utils/number.formatter";
 import { isAuthError } from "../../../utils/auth-error";
 import { Button, CountdownDisplay, Div, LoginRequiredModal, Modal, Row, Span, Stack, Text } from "../../../ui";
@@ -14,16 +15,25 @@ import { AUCTION_BUYOUT_WINDOW_MINUTES } from "../../../_internal/shared/checkou
 import { BID_PRESET_MULTIPLIERS, isBuyNowAvailable, resolveMinBid, resolveMinBidIncrement, } from "../../../_internal/shared/features/auctions/config";
 import { normalizeError } from "../../../errors/normalize";
 import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { toUserMessage } from "../../../errors/error-display-map";
 const __P = {
     p5: "p-[var(--appkit-space-5)]",
 };
-const BID_ERROR_DISPLAY = {
-    BID_AUCTION_ENDED: "This auction has closed. No more bids are accepted.",
-    BID_AMOUNT_TOO_LOW: "Your bid must exceed the current winning bid.",
-    BID_INCREMENT_TOO_LOW: "Your bid does not meet the minimum increment requirement.",
-    BID_SELF_BID: "You cannot bid on your own listing.",
-    BID_USER_BANNED: "Your account is currently restricted from bidding. Contact support.",
-};
+// The local `BID_ERROR_DISPLAY` map that used to live here is gone.
+//
+// It covered 5 of the ~78 codes the server can emit, and — the actual defect —
+// fell back to `result.error`, the server's own message. `result.error` is
+// always a string, so the safe literal after it was unreachable, and a 500
+// therefore printed its raw internals into the bid field: this component is
+// where `Cannot find module '../providers/db-firebase' Require stack: -
+// /var/task/.next/server/chunks/...` was shown to users.
+//
+// Its five strings already existed as `errors.codes.BID_*` in messages/en.json,
+// so nothing was lost by deleting it. `toUserMessage` resolves every code and
+// terminates in `errors.codes.UNKNOWN` — never in server text.
+/** Feature-specific last resort. Authored copy, never derived from an error. */
+const BID_FALLBACK = "Failed to place bid. Please try again.";
+const BUY_NOW_FALLBACK = "Buy Now failed. Please try again.";
 export function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, startingBid, tiers, minBidIncrementOverride, currency, isEnded, auctionEndDate, buyNowPrice, bidCount: ssrBidCount, tags = [], onPlaceBid, onBuyNow, }) {
     const router = useRouter();
     // Live-updates while the bid card is open — reflects other bidders'
@@ -47,6 +57,10 @@ export function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, start
     const [isPending, startTransition] = useTransition();
     const [isBuyNowPending, startBuyNowTransition] = useTransition();
     const [success, setSuccess] = useState(false);
+    // Root translator (no namespace) — `toUserMessage` passes fully-qualified
+    // `errors.codes.*` keys, and resolves them itself, so a missing key degrades
+    // to generic copy rather than throwing MISSING_MESSAGE at render time.
+    const t = useTranslations();
     const [showLoginModal, setShowLoginModal] = useState(false);
     /**
      * Buy Now has no field to hang an error off — it is a standalone button, not
@@ -141,16 +155,17 @@ export function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, start
                 setShowLoginModal(true);
             }
             else {
-                setFieldError("bidAmount", err instanceof Error ? err.message : "Failed to place bid. Please try again.");
+                // `err.message` deliberately NOT used — a thrown error here can carry
+                // server internals just as an envelope can.
+                setFieldError("bidAmount", BID_FALLBACK);
             }
         }
     }
     function bidErrorMessage(result) {
         if (result.ok)
             return null;
-        return ((result.code && BID_ERROR_DISPLAY[result.code]) ??
-            result.error ??
-            "Failed to place bid. Please try again.");
+        // No `?? result.error` tail. That is what leaked the require stack.
+        return toUserMessage(result.code, t, { fallback: BID_FALLBACK });
     }
     /**
      * Show a Buy Now failure.
@@ -164,14 +179,16 @@ export function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, start
      * `place_bids` soft ban. A login prompt for those tells the buyer to fix
      * something that is not the problem.
      */
-    function reportBuyNowFailure(code, message) {
+    function reportBuyNowFailure(code, _message) {
         if (code === "UNAUTHENTICATED") {
             setShowLoginModal(true);
             return;
         }
-        setBuyNowError((code && BID_ERROR_DISPLAY[code]) ??
-            message ??
-            "Buy Now failed. Please try again.");
+        // `_message` is the SERVER's message and is intentionally ignored — it was
+        // the `?? message` tail here, same defect as bidErrorMessage above. Kept in
+        // the signature so callers need no change and the omission is visible.
+        void _message;
+        setBuyNowError(toUserMessage(code, t, { fallback: BUY_NOW_FALLBACK }));
     }
     function handleBuyNow() {
         if (!onBuyNow)

package/dist/features/auth/repository/user.repository.d.ts

@@ -6,7 +6,28 @@ export declare class UserRepository extends BaseRepository<UserDocument> {
     static readonly SIEVE_FIELDS: FirebaseSieveFields;
     constructor();
     private decryptUser;
-    private encryptUserData;
+    /**
+     * Declared, not hand-rolled.
+     *
+     * `BaseRepository.applyWriteHooks` already does exactly what the private
+     * `encryptUserData` did — encrypt the listed fields, then add the mapped blind
+     * indices derived from the PLAINTEXT source. Declaring the fields means all
+     * nine mutating methods get it, including the `createWithId` / `*InTx` /
+     * `*InBatch` family that inherited unhooked base implementations while the
+     * encryption lived in a private method only three call sites remembered to
+     * call.
+     */
+    protected piiFields: readonly ["email", "phoneNumber", "googleLinkedEmail"];
+    protected piiIndexMap: Record<string, string>;
+    /**
+     * The base hook, plus the nested objects it cannot see.
+     *
+     * `piiFields` is a flat list of top-level names, so a nested blob has to be
+     * encrypted separately. Calling `super.applyWriteHooks` FIRST keeps a single
+     * encryption path with one extra step on top, rather than two parallel paths
+     * that have to agree — which is what the hand-rolled override was.
+     */
+    protected applyWriteHooks<D extends object>(data: D): D;
     protected mapDoc<D = UserDocument>(snap: DocumentSnapshot): D;
     createWithId(id: string, data: Partial<UserDocument>): Promise<UserDocument>;
     create(input: Omit<UserDocument, "id" | "createdAt" | "updatedAt">): Promise<UserDocument>;

package/dist/features/auth/repository/user.repository.js

@@ -1,11 +1,24 @@
 import { normalizeError } from "../../../errors/normalize";
 import { DatabaseError } from "../../../errors";
 import { BaseRepository, getFirestoreCount, prepareForFirestore, parseSieveDateValue, } from "../../../providers/db-firebase";
-import { USER_PII_FIELDS, USER_PII_INDEX_MAP, piiIndicesFor, decryptPayoutDetails, decryptPiiFields, decryptShippingConfig, encryptPayoutDetails, encryptPiiFields, encryptShippingConfig, piiBlindIndex, } from "../../../security";
+import { USER_PII_FIELDS, USER_PII_INDEX_MAP, decryptPayoutDetails, decryptPiiFields, decryptShippingConfig, encryptPayoutDetails, encryptShippingConfig, piiBlindIndex, } from "../../../security";
 import { USER_COLLECTION, USER_FIELDS, } from "../schemas";
 export class UserRepository extends BaseRepository {
     constructor() {
         super(USER_COLLECTION);
+        /**
+         * Declared, not hand-rolled.
+         *
+         * `BaseRepository.applyWriteHooks` already does exactly what the private
+         * `encryptUserData` did — encrypt the listed fields, then add the mapped blind
+         * indices derived from the PLAINTEXT source. Declaring the fields means all
+         * nine mutating methods get it, including the `createWithId` / `*InTx` /
+         * `*InBatch` family that inherited unhooked base implementations while the
+         * encryption lived in a private method only three call sites remembered to
+         * call.
+         */
+        this.piiFields = USER_PII_FIELDS;
+        this.piiIndexMap = USER_PII_INDEX_MAP;
     }
     decryptUser(doc) {
         const decrypted = decryptPiiFields(doc, [...USER_PII_FIELDS]);
@@ -17,32 +30,22 @@ export class UserRepository extends BaseRepository {
         }
         return decrypted;
     }
-    encryptUserData(data) {
-        // encryptPiiFields encrypts each PII field in-place AND adds the corresponding
-        // blind-index sibling (e.g. email → emailIndex) from the plaintext value.
-        // addPiiIndices is intentionally NOT called here — it spreads the original
-        // plaintext `data` back into the result, which would overwrite the encrypted
-        // ciphertext with the original plaintext values, defeating the encryption.
-        //
-        // The mapped indices below are not optional. `encryptPiiFields` derives its
-        // sibling name mechanically as `${field}Index`, so `phoneNumber` produces
-        // `phoneNumberIndex` — but `findByPhone` queries `USER_FIELDS.PHONE_INDEX`,
-        // which is `phoneIndex`. Only the seed paths ever wrote that name, so
-        // **phone lookup could never match a user created by the app.**
-        // `piiIndicesFor` applies USER_PII_INDEX_MAP's real names and, unlike
-        // `addPiiIndices`, carries no plaintext back over the ciphertext.
-        const encrypted = {
-            ...encryptPiiFields(data, [...USER_PII_FIELDS]),
-            ...piiIndicesFor(data, USER_PII_INDEX_MAP),
-        };
-        const access = encrypted;
-        if (access.payoutDetails) {
+    /**
+     * The base hook, plus the nested objects it cannot see.
+     *
+     * `piiFields` is a flat list of top-level names, so a nested blob has to be
+     * encrypted separately. Calling `super.applyWriteHooks` FIRST keeps a single
+     * encryption path with one extra step on top, rather than two parallel paths
+     * that have to agree — which is what the hand-rolled override was.
+     */
+    applyWriteHooks(data) {
+        const out = super.applyWriteHooks(data);
+        const access = out;
+        if (access.payoutDetails)
             access.payoutDetails = encryptPayoutDetails(access.payoutDetails);
-        }
-        if (access.shippingConfig) {
+        if (access.shippingConfig)
             access.shippingConfig = encryptShippingConfig(access.shippingConfig);
-        }
-        return encrypted;
+        return out;
     }
     mapDoc(snap) {
         const raw = super.mapDoc(snap);
@@ -57,7 +60,7 @@ export class UserRepository extends BaseRepository {
         // check with no error anywhere (found via a live RBAC bug where an
         // admin account created this way couldn't access /admin).
         const withUid = { uid: id, ...data };
-        const encrypted = this.encryptUserData(withUid);
+        const encrypted = this.applyWriteHooks(withUid);
         return super.createWithId(id, encrypted);
     }
     async create(input) {
@@ -78,7 +81,7 @@ export class UserRepository extends BaseRepository {
             createdAt: new Date(),
             updatedAt: new Date(),
         };
-        const encrypted = this.encryptUserData(userData);
+        const encrypted = this.applyWriteHooks(userData);
         await this.db
             .collection(this.collection)
             .doc(id)
@@ -155,7 +158,7 @@ export class UserRepository extends BaseRepository {
         }
     }
     async update(uid, data) {
-        const encrypted = this.encryptUserData(data);
+        const encrypted = this.applyWriteHooks(data);
         return super.update(uid, encrypted);
     }
     async markEmailAsVerified(uid) {

package/dist/features/before-after/components/BeforeAfterGallery.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BeforeAfterSlider } from "./BeforeAfterSlider";
-import { Div, Stack, Text } from "../../../ui";
+import { Div, Grid, Stack, Text } from "../../../ui";
 export function BeforeAfterGallery({ items, className = "", }) {
     if (items.length === 0)
         return null;
-    return (_jsx(Div, { layout: "grid", gap: "6", className: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ${className}`, children: items.map((item) => (_jsxs(Stack, { gap: "sm", children: [_jsx(BeforeAfterSlider, { item: item }), (item.title || item.description) && (_jsxs(Div, { className: "text-center", children: [item.title && (_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: item.title })), item.description && (_jsx(Text, { className: "mt-0.5", color: "muted", size: "xs", children: item.description }))] }))] }, item.id))) }));
+    return (_jsx(Grid, { cols: "cards", gap: "lg", className: className, children: items.map((item) => (_jsxs(Stack, { gap: "sm", children: [_jsx(BeforeAfterSlider, { item: item }), (item.title || item.description) && (_jsxs(Div, { className: "text-center", children: [item.title && (_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: item.title })), item.description && (_jsx(Text, { className: "mt-0.5", color: "muted", size: "xs", children: item.description }))] }))] }, item.id))) }));
 }

package/dist/features/blog/components/BlogIndexListing.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBlogPosts } from "../hooks/useBlog";
-import { Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
+import { Div, Grid, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { BlogCard } from "./BlogListView";
 import { BlogFilters, BLOG_PUBLIC_SORT_OPTIONS } from "./BlogFilters";
@@ -19,7 +19,7 @@ const __O = {
 function renderBlogGrid(props) {
     const { isLoading, posts, view } = props;
     if (isLoading) {
-        return (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-video", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p5}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-1/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" })] })] }, i))) }));
+        return (_jsx(Grid, { cols: "cards", gap: "lg", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-video", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p5}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-1/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" })] })] }, i))) }));
     }
     if (posts.length === 0) {
         return _jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "No posts found." });
@@ -27,7 +27,7 @@ function renderBlogGrid(props) {
     if (view === "list") {
         return (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
     }
-    return (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
+    return (_jsx(Grid, { cols: "cards", gap: "lg", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
 }
 function renderBlogFilterDrawer(props) {
     const { filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable } = props;

package/dist/features/blog/components/BlogListView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import Link from "next/link";
-import { Article, Button, Div, Heading, Pagination, Row, Span, Stack, Text } from "../../../ui";
+import { Article, Button, Div, Grid, Heading, Pagination, Row, Span, Stack, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 import { getMediaUrl } from "../../media/types/index";
@@ -37,7 +37,7 @@ export function BlogCategoryTabs({ categories, active, onSelect, labels = {}, })
 }
 export function BlogListView({ posts, isLoading, totalPages = 1, currentPage = 1, total = 0, onPageChange, onPostClick, emptyLabel = "No posts found", slots, }) {
     if (isLoading) {
-        return (_jsx(Div, { layout: "grid", gap: "6", className: "sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: "animate-pulse overflow-hidden border border-neutral-200 bg-[var(--appkit-color-surface)]", rounded: "xl", children: [_jsx(Div, { className: "aspect-video bg-neutral-200" }), _jsxs(Stack, { className: `${__P.p5}`, gap: "sm", children: [_jsx(Div, { className: "h-4 w-16 bg-neutral-200", rounded: "default" }), _jsx(Div, { className: "h-5 w-full bg-neutral-200", rounded: "default" }), _jsx(Div, { className: "h-4 w-3/4 bg-neutral-200", rounded: "default" })] })] }, i))) }));
+        return (_jsx(Grid, { cols: "cards", gap: "lg", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: "animate-pulse overflow-hidden border border-neutral-200 bg-[var(--appkit-color-surface)]", rounded: "xl", children: [_jsx(Div, { className: "aspect-video bg-neutral-200" }), _jsxs(Stack, { className: `${__P.p5}`, gap: "sm", children: [_jsx(Div, { className: "h-4 w-16 bg-neutral-200", rounded: "default" }), _jsx(Div, { className: "h-5 w-full bg-neutral-200", rounded: "default" }), _jsx(Div, { className: "h-4 w-3/4 bg-neutral-200", rounded: "default" })] })] }, i))) }));
     }
     if (posts.length === 0) {
         if (slots?.renderEmptyState) {
@@ -47,7 +47,7 @@ export function BlogListView({ posts, isLoading, totalPages = 1, currentPage = 1
     }
     return (_jsxs(Stack, { gap: "xl", children: [slots?.renderHeader
                 ? slots.renderHeader({ total })
-                : null, _jsx(Div, { layout: "grid", gap: "6", className: "sm:grid-cols-2 lg:grid-cols-3", children: posts.map((post, i) => slots?.renderCard ? (_jsx(React.Fragment, { children: slots.renderCard(post, i) }, post.id)) : (_jsx(BlogCard, { post: post, onClick: onPostClick }, post.id))) }), slots?.renderFooter ? slots.renderFooter({
+                : null, _jsx(Grid, { cols: "cards", gap: "lg", children: posts.map((post, i) => slots?.renderCard ? (_jsx(React.Fragment, { children: slots.renderCard(post, i) }, post.id)) : (_jsx(BlogCard, { post: post, onClick: onPostClick }, post.id))) }), slots?.renderFooter ? slots.renderFooter({
                 page: currentPage,
                 totalPages,
             }) : totalPages > 1 && onPageChange ? (_jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }) })) : null] }));

package/dist/features/blog/components/BlogPostView.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import Link from "next/link";
-import { Div, Heading, RichText, Row, Scrim, Span, Stack, Text } from "../../../ui";
+import { Div, Grid, Heading, RichText, Row, Scrim, Span, Stack, Text } from "../../../ui";
 import { Iframe } from "../../../ui/components/Iframe";
 import { MediaImage } from "../../media/MediaImage";
 import { useBlogPost } from "../hooks/useBlog";
@@ -31,7 +31,7 @@ function renderBlogPostHeader(post, date, labels) {
 function renderBlogPostRelated(related, title, renderRelatedCard) {
     if (related.length === 0)
         return null;
-    return (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-6", size: "xl", weight: "semibold", children: title }), _jsx(Div, { layout: "grid", gap: "6", className: "sm:grid-cols-3", children: related.map((rel, i) => renderRelatedCard ? (_jsx(React.Fragment, { children: renderRelatedCard(rel, i) }, rel.id)) : (_jsx(BlogCard, { post: rel, href: String(ROUTES.BLOG.ARTICLE(rel.slug)) }, rel.id))) })] }));
+    return (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-6", size: "xl", weight: "semibold", children: title }), _jsx(Grid, { cols: "cards", gap: "lg", children: related.map((rel, i) => renderRelatedCard ? (_jsx(React.Fragment, { children: renderRelatedCard(rel, i) }, rel.id)) : (_jsx(BlogCard, { post: rel, href: String(ROUTES.BLOG.ARTICLE(rel.slug)) }, rel.id))) })] }));
 }
 export function BlogPostView({ slug, initialData, labels = {}, renderImage, renderContent, renderBackButton, renderLoading, renderError, renderRelatedCard, renderAuthorBio, className = "", }) {
     const { post, related, relatedByTags, relatedByAuthor, isLoading, error } = useBlogPost(slug, {

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

@@ -1,5 +1,4 @@
 import { type DocumentReference } from "firebase-admin/firestore";
-import type { DocumentSnapshot } from "../../../providers/db-firebase";
 import { BaseRepository, type FirebaseSieveResult, type SieveModel } from "../../../providers/db-firebase";
 import { type AddToCartInput, type CartAppliedCoupon, type CartDocument, type CartStoreAddons, type CartItemDocument, type AddGroupLineInput, type UpdateCartItemInput, type UpdateCartGroupMembersInput } from "../schemas";
 export declare class CartRepository extends BaseRepository<CartDocument> {
@@ -7,7 +6,21 @@ export declare class CartRepository extends BaseRepository<CartDocument> {
     constructor();
     /** Admin-facing paginated list of carts. */
     list(model: SieveModel): Promise<FirebaseSieveResult<CartDocument>>;
-    protected mapDoc<D = CartDocument>(snap: DocumentSnapshot): D;
+    /**
+     * `mapDoc` is deliberately NOT overridden.
+     *
+     * It used to decrypt `items[].storeName` on every read — and nothing has
+     * ever encrypted that field. `CartRepository` declares no `piiFields`, and
+     * `storeName` appears nowhere in pii-schemas.ts. `decryptPii` passes a
+     * non-`enc:v1:` string straight through, so the call was a no-op on every
+     * document while reading as protection — the most expensive kind of dead
+     * code, because it answers the question "is this handled?" wrongly.
+     *
+     * A store name is not PII: it is the seller's public shopfront name, shown
+     * on every listing. If a genuinely private field is added to a cart line,
+     * declare it in `piiFields` so `applyWriteHooks` encrypts it on all nine
+     * write paths — do not reintroduce a decrypt with no matching encrypt.
+     */
     findByUserId(userId: string): Promise<CartDocument | null>;
     getOrCreate(userId: string): Promise<CartDocument>;
     createEmpty(userId: string): Promise<CartDocument>;

package/dist/features/cart/repository/cart.repository.js

@@ -6,7 +6,6 @@ import { normalizeError } from "../../../errors/normalize";
 const ERR_CART_ITEM_NOT_FOUND = "Cart item not found";
 const ERR_CART_ITEM_LOCKED = "This item requires payment and cannot be removed or modified.";
 import { BaseRepository, prepareForFirestore, parseSieveDateValue, } from "../../../providers/db-firebase";
-import { decryptPii } from "../../../security";
 import { CART_COLLECTION, } from "../schemas";
 export class CartRepository extends BaseRepository {
     constructor() {
@@ -16,18 +15,21 @@ export class CartRepository extends BaseRepository {
     async list(model) {
         return this.sieveQuery(model, CartRepository.SIEVE_FIELDS);
     }
-    mapDoc(snap) {
-        const raw = super.mapDoc(snap);
-        return {
-            ...raw,
-            items: (raw.items ?? []).map((item) => ({
-                ...item,
-                storeName: typeof item.storeName === "string"
-                    ? (decryptPii(item.storeName) ?? item.storeName)
-                    : item.storeName,
-            })),
-        };
-    }
+    /**
+     * `mapDoc` is deliberately NOT overridden.
+     *
+     * It used to decrypt `items[].storeName` on every read — and nothing has
+     * ever encrypted that field. `CartRepository` declares no `piiFields`, and
+     * `storeName` appears nowhere in pii-schemas.ts. `decryptPii` passes a
+     * non-`enc:v1:` string straight through, so the call was a no-op on every
+     * document while reading as protection — the most expensive kind of dead
+     * code, because it answers the question "is this handled?" wrongly.
+     *
+     * A store name is not PII: it is the seller's public shopfront name, shown
+     * on every listing. If a genuinely private field is added to a cart line,
+     * declare it in `piiFields` so `applyWriteHooks` encrypts it on all nine
+     * write paths — do not reintroduce a decrypt with no matching encrypt.
+     */
     async findByUserId(userId) {
         return this.findById(userId);
     }

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

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState } from "react";
 import Link from "next/link";
-import { Button, Div, Row, Text } from "../../../ui";
+import { Button, Div, Grid, Row, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { ImageLightbox } from "../../../ui/components/ImageLightbox";
 import { ROUTES } from "../../../next/routing/route-map";
@@ -40,7 +40,7 @@ export function BundleCollage({ members, onItemClick }) {
     if (!members.length)
         return null;
     const galleryImages = toGalleryImages(members);
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4", children: members.map((p, idx) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { cols: "categoryCards", gap: "3", children: members.map((p, idx) => {
                     const cover = p.mainImage ?? p.images?.[0];
                     const href = String(ROUTES.PUBLIC.PRODUCT_DETAIL?.(p.slug ?? p.id) ?? "#");
                     return (_jsxs(Div, { layout: "flex-col", className: "group relative overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] transition-transform hover:scale-[1.01]", rounded: "lg", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: makeBundleItemClickHandler(p, idx, onItemClick, setLightboxIndex), paddingX: "none", paddingY: "none", rounded: "none", className: "relative aspect-square w-full overflow-hidden focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)]", "aria-label": `View ${p.title} in lightbox`, children: _jsxs(Div, { className: "relative aspect-square w-full", children: [cover ? (_jsx(MediaImage, { src: cover, alt: p.title, size: "card", className: "transition-transform group-hover:scale-105" })) : (_jsx(Row, { textSize: "3xl", surface: "muted", className: "absolute inset-0", align: "center", justify: "center", children: PLACEHOLDER_EMOJI })), _jsxs(Div, { textWeight: "semibold", textSize: "xs", surface: "overlay-xl", padding: "chip-2xs", className: "absolute left-2 top-2 text-white", rounded: "default", children: ["#", idx + 1] })] }) }), _jsxs(Div, { padding: "xs", children: [_jsx(Link, { href: href, className: "line-clamp-2 text-[length:var(--appkit-text-sm)] font-medium hover:underline", children: p.title }), _jsx(Text, { className: "mt-0.5 text-[var(--appkit-color-text-muted)]", size: "xs", children: formatCurrency(p.price ?? 0, p.currency ?? "INR") })] })] }, p.id));

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { useCategoriesFiltered } from "../hooks/useCategories";
 import { ROUTES } from "../../../next";
-import { Button, Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
+import { Button, Div, Grid, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
 import { CategoryCard } from "./CategoryGrid";
 import { CategoryFilters } from "./CategoryFilters";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
@@ -21,7 +21,7 @@ function renderCategoryGrid(props) {
     const { isLoading, categories, view, activeSearch, activeTab, brandsOnly } = props;
     const isBrandView = activeTab === "brands" || brandsOnly;
     if (isLoading) {
-        return (_jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-[4/3]", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}.5`, gap: "sm", children: [_jsx(Div, { className: "h-3.5 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" })] })] }, i))) }));
+        return (_jsx(Grid, { cols: "categoryCards", gap: "md", children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-[4/3]", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}.5`, gap: "sm", children: [_jsx(Div, { className: "h-3.5 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" })] })] }, i))) }));
     }
     if (categories.length === 0) {
         return (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: activeSearch ? `No ${isBrandView ? "brands" : "categories"} matching "${activeSearch}"` : isBrandView ? "No brands found" : "No categories found" }));
@@ -29,7 +29,7 @@ function renderCategoryGrid(props) {
     if (view === "list") {
         return (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
     }
-    return (_jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
+    return (_jsx(Grid, { cols: "categoryCards", gap: "md", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
 }
 function renderCategoryFilterDrawer(props) {
     const { filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable } = props;

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

@@ -10,7 +10,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  */
 import { Row, Stack, sortBy } from "@mohasinac/appkit/client";
 import { useMemo, useCallback, useState } from "react";
-import { Div, Label, Span, Text, Toggle, StickyToolbar } from "../../../ui";
+import { Div, Grid, Label, Span, Text, Toggle, StickyToolbar } from "../../../ui";
 import { ListingToolbar, Pagination, FilterDrawer } from "../../../ui";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { BundleBuyNowCta } from "./BundleBuyNowCta";
@@ -93,5 +93,5 @@ export function CategoryBundlesListing({ initialBundles, brandName, onBuyNow, })
                     // Apply → close. <FilterDrawer> below stays available for parity
                     // with every other listing page's filter affordance.
                     { label: "Show out-of-stock", active: showOutOfStock, onChange: (next) => table.setMany({ showOutOfStock: next ? "true" : "", page: "1" }) },
-                ] }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: pageItems.length === 0 ? (_jsxs(Text, { paddingY: "4xl", color: "muted", size: "sm", align: "start", children: ["No bundles match your search", brandName ? ` for ${brandName}` : "", "."] })) : (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: pageItems.map((bundle) => (_jsxs(Stack, { children: [_jsx(MarketplaceBundleCard, { bundle: bundle }), onBuyNow && (_jsx(Div, { border: "default", surface: "default", className: "-mt-px border-t border-t-0 border-[var(--appkit-color-border)] pt-[0.5rem] pb-[0.75rem]", padding: "x-sm", roundedBottom: "lg", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: bundle.bundleStockStatus === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }, bundle.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingShowOutOfStock(false), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Stack, { className: `${__P.p4}`, gap: "md", children: _jsxs(Label, { layout: "flex", gap: "lg", className: "justify-[space-between] cursor-pointer", children: [_jsx(Span, { size: "sm", weight: "medium", color: "muted", children: "Show out-of-stock bundles" }), _jsx(Toggle, { checked: pendingShowOutOfStock, onChange: setPendingShowOutOfStock, size: "sm" })] }) }) })] }));
+                ] }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: pageItems.length === 0 ? (_jsxs(Text, { paddingY: "4xl", color: "muted", size: "sm", align: "start", children: ["No bundles match your search", brandName ? ` for ${brandName}` : "", "."] })) : (_jsx(Grid, { cols: "cards", gap: "lg", children: pageItems.map((bundle) => (_jsxs(Stack, { children: [_jsx(MarketplaceBundleCard, { bundle: bundle }), onBuyNow && (_jsx(Div, { border: "default", surface: "default", className: "-mt-px border-t border-t-0 border-[var(--appkit-color-border)] pt-[0.5rem] pb-[0.75rem]", padding: "x-sm", roundedBottom: "lg", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: bundle.bundleStockStatus === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }, bundle.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingShowOutOfStock(false), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Stack, { className: `${__P.p4}`, gap: "md", children: _jsxs(Label, { layout: "flex", gap: "lg", className: "justify-[space-between] cursor-pointer", children: [_jsx(Span, { size: "sm", weight: "medium", color: "muted", children: "Show out-of-stock bundles" }), _jsx(Toggle, { checked: pendingShowOutOfStock, onChange: setPendingShowOutOfStock, size: "sm" })] }) }) })] }));
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
-import { Div, Row, Span, Stack, Text } from "../../../ui";
+import { Div, Grid, Row, Span, Stack, Text } from "../../../ui";
 import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv";
 import { MediaImage } from "../../media/MediaImage";
 const __P = {
@@ -30,5 +30,5 @@ export function CategoryGrid({ categories, getHref, onCategoryClick, emptyLabel
     if (categories.length === 0) {
         return (_jsx(Text, { paddingY: "3xl", className: "text-[var(--appkit-color-text-muted)]", size: "sm", align: "start", children: emptyLabel }));
     }
-    return (_jsx(Div, { layout: "grid", gap: "4", className: `grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 ${className}`, children: categories.map((cat) => (_jsx(CategoryCard, { category: cat, href: getHref ? getHref(cat) : undefined, onClick: !getHref ? onCategoryClick : undefined }, cat.id))) }));
+    return (_jsx(Grid, { cols: "categoryCards", gap: "md", className: className, children: categories.map((cat) => (_jsx(CategoryCard, { category: cat, href: getHref ? getHref(cat) : undefined, onClick: !getHref ? onCategoryClick : undefined }, cat.id))) }));
 }

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

@@ -4,7 +4,7 @@ import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Div, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Row, Stack, useToast, StickyToolbar } from "../../../ui";
+import { Div, Grid, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Row, Stack, useToast, StickyToolbar } from "../../../ui";
 import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { ACTION_ID } from "../../products/constants/action-defs";
 import { ROUTES } from "../../../next";
@@ -26,7 +26,7 @@ const FILTER_KEYS = ["condition", "brand", "minPrice", "maxPrice"];
 function renderCategoryProductGrid(props) {
     const { isLoading, products, view, getProductHref, onWishlistToggle, wishlistedIds, onAddToCart } = props;
     if (isLoading) {
-        return (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" })] })] }, i))) }));
+        return (_jsx(Grid, { cols: "cards", gap: "lg", children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" })] })] }, i))) }));
     }
     return (_jsx(ProductGrid, { products: products, getProductHref: getProductHref, view: view, emptyLabel: "No products found in this category.", onWishlistToggle: onWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: onAddToCart }));
 }

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

@@ -2,10 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
 import { ROUTES } from "../../../next";
-import { Div, Stack, Text } from "../../../ui";
+import { Grid, Stack, Text } from "../../../ui";
 export function CategoryStoresListing({ stores }) {
     if (stores.length === 0) {
         return (_jsx(Stack, { justify: "center", className: "text-left", padding: "y-4xl", align: "start", children: _jsx(Text, { size: "sm", color: "muted", children: "No stores found in this category." }) }));
     }
-    return (_jsx(Div, { layout: "grid", gap: "5", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: stores.map((store) => (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug)) }, store.id))) }));
+    return (_jsx(Grid, { cols: "cards", gap: "lg", children: stores.map((store) => (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug)) }, store.id))) }));
 }

package/dist/features/collections/components/CollectionCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Text, TextLink } from "../../../ui";
+import { Div, Grid, Heading, Text, TextLink } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { LAYOUT } from "../../../tokens";
 const CLS_PLACEHOLDER = "w-full";
@@ -7,5 +7,5 @@ export function CollectionCard({ collection, href }) {
     return (_jsxs(TextLink, { rounded: "xl", href: href, shadow: "hover-lg", className: "group relative block overflow-hidden bg-[var(--appkit-color-surface)] dark:bg-[var(--appkit-color-surface-elevated)] transition", children: [collection.image ? (_jsx(Div, { className: `relative ${LAYOUT.cardHeight.md} w-full`, overflow: "hidden", children: _jsx(MediaImage, { src: collection.image, alt: collection.title, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Div, { surface: "muted", className: `${LAYOUT.cardHeight.md} ${CLS_PLACEHOLDER}` })), _jsxs(Div, { surface: "default", padding: "sm", children: [_jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)]", weight: "semibold", children: collection.title }), collection.subtitle && (_jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: collection.subtitle })), collection.productCount !== undefined && (_jsxs(Text, { className: "mt-2 text-gray-400", size: "xs", children: [collection.productCount, " ", collection.productCount === 1 ? "item" : "items"] }))] })] }));
 }
 export function CollectionGrid({ collections, getHref }) {
-    return (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: collections.map((c) => (_jsx(CollectionCard, { collection: c, href: getHref(c.slug) }, c.slug))) }));
+    return (_jsx(Grid, { cols: "cards", gap: "lg", children: collections.map((c) => (_jsx(CollectionCard, { collection: c, href: getHref(c.slug) }, c.slug))) }));
 }

package/dist/features/events/components/EventRafflesSection.js

@@ -8,7 +8,7 @@ import { serverLogger } from "../../../monitoring/server-logger";
 // this section silently rendered nothing instead of failing loudly.
 import { sieveFilter, sieveAnd, SIEVE_OP } from "../../../utils/sieve-builder";
 import { sortBy } from "../../../constants/sort";
-import { Container, Div, Heading, Section, Stack, Text, } from "../../../ui";
+import { Container, Grid, Heading, Section, Stack, Text } from "../../../ui";
 import { eventRepository } from "../repository/events.repository";
 import { EventCard } from "./EventCard";
 /**
@@ -40,5 +40,5 @@ export async function EventRafflesSection({ config, }) {
     }
     if (events.length === 0)
         return null;
-    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), _jsx(Div, { gap: "3", className: "fluid-grid-card", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })] }) }) }));
+    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), _jsx(Grid, { cols: "cardsWide", gap: "3", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })] }) }) }));
 }

package/dist/features/events/components/EventsIndexListing.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useEvents } from "../hooks/useEvents";
-import { Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
+import { Div, Grid, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
 import { EventCard } from "./EventCard";
 import { EventFilters, EVENT_PUBLIC_SORT_OPTIONS } from "./EventFilters";
 import { EVENT_FIELDS } from "../../../constants/field-names";
@@ -123,5 +123,5 @@ export function EventsIndexListing({ initialData, facetCounts }) {
     }, [searchInput, table]);
     return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search events...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || sortBy(EVENT_FIELDS.STARTS_AT, "ASC"), sortOptions: EVENT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
                     { label: "Show expired", active: showExpired, onChange: (next) => table.set(TABLE_KEYS.SHOW_EXPIRED, next ? "true" : "") },
-                ] }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-video", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p4}`, gap: "sm", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8 mt-2", surface: "subtle", rounded: "default" })] })] }, i))) })) : events.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "No events found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(EventFilters, { table: pendingTable, variant: "public", counts: facetCounts, hideEmpty: Boolean(facetCounts) }) })] }));
+                ] }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Grid, { cols: "cards", gap: "lg", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-video", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p4}`, gap: "sm", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8 mt-2", surface: "subtle", rounded: "default" })] })] }, i))) })) : events.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "No events found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })) : (_jsx(Grid, { cols: "cards", gap: "lg", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(EventFilters, { table: pendingTable, variant: "public", counts: facetCounts, hideEmpty: Boolean(facetCounts) }) })] }));
 }