@mohasinac/appkit 4.30.15 → 4.30.17

package/dist/errors/error-display-map.js

@@ -1,3 +1,4 @@
+import { normalizeError } from "./normalize";
 import { ERROR_CODES, BID_ERROR_CODES, OFFER_ERROR_CODES } from "./error-codes";
 import { HTTP_ERROR_CODES } from "./error-mapping";
 const k = (code) => `errors.codes.${code}`;
@@ -240,3 +241,48 @@ export const ERROR_DISPLAY_MAP = {
 export function getErrorDisplay(code) {
     return ERROR_DISPLAY_MAP[code] ?? { messageKey: "errors.codes.UNKNOWN" };
 }
+/** Last-resort copy when no translator is available. Never a server string. */
+export const GENERIC_USER_MESSAGE = "Something went wrong. Please try again.";
+/**
+ * The user-facing message for an error code. **Never returns server text.**
+ *
+ * 🛑 This is the whole point: every previous way of doing this ended in a raw
+ * fallback. `ERROR_DISPLAY_MAP[code] ?? error` — the pattern CLAUDE.md Rule #9
+ * §6 itself documented — falls through to the server's own message, and that
+ * is how a Node `MODULE_NOT_FOUND`, complete with
+ * `/var/task/.next/server/chunks/...` and its full require stack, was rendered
+ * as copy inside the "Place your bid" modal. `surfaceError` had the same tail.
+ * There was no shared helper that did this correctly, which is why ~60 call
+ * sites each invented `err.message`.
+ *
+ * The chain is: code -> messageKey -> translation -> `errors.codes.UNKNOWN` ->
+ * `GENERIC_USER_MESSAGE`. It terminates in a constant, deliberately.
+ *
+ * @param code    stable error code from an `ActionResult` / error envelope
+ * @param t       a next-intl translator; omitted, the generic string is used
+ * @param options `fallback` overrides the generic string with FEATURE-SPECIFIC
+ *                copy you have authored ("Could not place your bid"). It must
+ *                never be a value derived from an error object.
+ */
+export function toUserMessage(code, t, options) {
+    const generic = options?.fallback ?? GENERIC_USER_MESSAGE;
+    if (!code)
+        return generic;
+    const { messageKey } = getErrorDisplay(code);
+    if (!t)
+        return generic;
+    try {
+        const translated = t(messageKey);
+        // next-intl returns the key itself (or throws) when a message is missing;
+        // either way that is not something to show a user.
+        if (translated && translated !== messageKey)
+            return translated;
+        // next-intl throws MISSING_MESSAGE for an absent key. This function's whole
+        // contract is to degrade to generic copy rather than let ANY internal
+        // string — including an i18n internal — reach the user.
+    }
+    catch (translateErr) {
+        void normalizeError(translateErr);
+    }
+    return generic;
+}

package/dist/errors/error-mapping.d.ts

@@ -31,18 +31,58 @@ export type HttpErrorCode = (typeof HTTP_ERROR_CODES)[keyof typeof HTTP_ERROR_CO
 export interface MappedError {
     status: number;
     code: string;
+    /**
+     * The CLIENT-FACING message. For any `status >= 500` in production this is a
+     * generic string — never the thrown error's own text.
+     */
     message: string;
+    /**
+     * The unscrubbed message, present only when `message` was replaced.
+     *
+     * 🛑 Recorders (serverErrors, logs) MUST use `internalMessage ?? message`.
+     * Responses MUST use `message`. The whole point of the split is that
+     * scrubbing the UI must not blind the log store — before this existed, the
+     * raw text was the only copy of the fault and it was being shipped to the
+     * browser instead (a `/var/task/...` path leaked to end users), while
+     * scrubbing it naively would have left nothing anywhere.
+     */
+    internalMessage?: string;
     issues?: unknown[];
+    /**
+     * True when the status/code came from the FIRESTORE error map — i.e. the
+     * datastore itself refused, rather than our own business logic deciding.
+     *
+     * Needed because the two are indistinguishable by code alone. Firestore
+     * `permission-denied` (an expired service-account key) and
+     * `resource-exhausted` (quota blown) map to 403/429 — exactly the codes our
+     * RBAC guard and rate limiter emit in normal operation. Before this flag,
+     * those infrastructure failures fell below the `status >= 500` persist
+     * threshold and were recorded nowhere; adding their CODES to
+     * `LOG_AS_INCIDENT_CODES` instead would have persisted every ordinary 404
+     * and every rate-limited request along with them.
+     */
+    infrastructure?: boolean;
 }
 /**
- * Map any thrown value to a stable HTTP error envelope shape.
+ * Classify a thrown value AND make the result safe to send to a browser.
  *
- * Order of precedence:
- *  - AppError subclasses use their declared statusCode + code
- *  - DatabaseError unwraps its `data` to look for a wrapped FirestoreError
- *  - FirestoreError (numeric .code or string .code) maps via the table above
- *  - ZodError shape maps to 400 VALIDATION_FAILED + issues
- *  - Unknown Error → 500 INTERNAL; message scrubbed when isProduction
+ * 🛑 The scrub is keyed on **status**, not on which branch matched.
+ *
+ * It used to be the other way round: `isProduction` was consulted in exactly
+ * one place — the unknown-error tail at the bottom of `classifyError` — while
+ * the `DatabaseError`, `AppError` and `ApiError` branches above it returned
+ * `err.message` verbatim, in production. Since almost every real 500 in this
+ * codebase is a `DatabaseError`, the scrub essentially never ran. That is how
+ * a Node `MODULE_NOT_FOUND` — including the absolute server path
+ * `/var/task/.next/server/chunks/...` and its full require stack — was rendered
+ * as user-facing copy inside the "Place your bid" modal.
+ *
+ * Keying on status means a branch added later cannot reintroduce the leak by
+ * forgetting to check a flag.
+ *
+ * 4xx messages are NOT scrubbed: they are deliberate, user-actionable copy
+ * ("Bid too low", "Coupon expired") produced by our own validation, and
+ * replacing them with a generic string would make the product worse.
  */
 export declare function mapToHttpError(err: unknown, opts?: {
     isProduction?: boolean;

package/dist/errors/error-mapping.js

@@ -34,6 +34,8 @@ export const HTTP_ERROR_CODES = {
     CLIENT_WINDOW_ERROR: "CLIENT_WINDOW_ERROR",
     CLIENT_UNHANDLED: "CLIENT_UNHANDLED",
 };
+/** Shown to users for any 5xx in production. */
+const GENERIC_5XX_MESSAGE = "An internal error occurred";
 function isZodLikeError(err) {
     return (typeof err === "object" &&
         err !== null &&
@@ -84,6 +86,7 @@ function mapFirestore(err) {
         status: mapped.status,
         code: mapped.code,
         message: err.message ?? mapped.code,
+        infrastructure: true,
     };
 }
 /**
@@ -94,9 +97,12 @@ function mapFirestore(err) {
  *  - DatabaseError unwraps its `data` to look for a wrapped FirestoreError
  *  - FirestoreError (numeric .code or string .code) maps via the table above
  *  - ZodError shape maps to 400 VALIDATION_FAILED + issues
- *  - Unknown Error → 500 INTERNAL; message scrubbed when isProduction
+ *  - Unknown Error → 500 INTERNAL
+ *
+ * Production scrubbing of 5xx messages is applied ONCE, by `mapToHttpError`
+ * below — deliberately not inside these branches. See the note there.
  */
-export function mapToHttpError(err, opts) {
+function classifyError(err, opts) {
     const isProduction = opts?.isProduction ?? false;
     // AppError subclasses first — they carry status + code authoritatively
     if (err instanceof ValidationError) {
@@ -194,15 +200,50 @@ export function mapToHttpError(err, opts) {
             };
         }
     }
-    // Unknown — keep message in dev, scrub in prod
+    // Unknown
+    void isProduction; // scrubbing happens once, in mapToHttpError
     const rawMessage = err instanceof Error
         ? err.message
         : typeof err === "string"
             ? err
-            : "An internal error occurred";
+            : GENERIC_5XX_MESSAGE;
     return {
         status: 500,
         code: HTTP_ERROR_CODES.INTERNAL,
-        message: isProduction ? "An internal error occurred" : rawMessage,
+        message: rawMessage,
+    };
+}
+/**
+ * Classify a thrown value AND make the result safe to send to a browser.
+ *
+ * 🛑 The scrub is keyed on **status**, not on which branch matched.
+ *
+ * It used to be the other way round: `isProduction` was consulted in exactly
+ * one place — the unknown-error tail at the bottom of `classifyError` — while
+ * the `DatabaseError`, `AppError` and `ApiError` branches above it returned
+ * `err.message` verbatim, in production. Since almost every real 500 in this
+ * codebase is a `DatabaseError`, the scrub essentially never ran. That is how
+ * a Node `MODULE_NOT_FOUND` — including the absolute server path
+ * `/var/task/.next/server/chunks/...` and its full require stack — was rendered
+ * as user-facing copy inside the "Place your bid" modal.
+ *
+ * Keying on status means a branch added later cannot reintroduce the leak by
+ * forgetting to check a flag.
+ *
+ * 4xx messages are NOT scrubbed: they are deliberate, user-actionable copy
+ * ("Bid too low", "Coupon expired") produced by our own validation, and
+ * replacing them with a generic string would make the product worse.
+ */
+export function mapToHttpError(err, opts) {
+    const isProduction = opts?.isProduction ?? false;
+    const mapped = classifyError(err, opts);
+    if (!isProduction || mapped.status < 500)
+        return mapped;
+    if (mapped.message === GENERIC_5XX_MESSAGE)
+        return mapped;
+    return {
+        ...mapped,
+        message: GENERIC_5XX_MESSAGE,
+        internalMessage: mapped.message,
     };
 }

package/dist/errors/index.d.ts

@@ -17,3 +17,4 @@ export { safeRead, installDegradedReadReporter, type DegradedReadReport, } from
 export { normalizeError, getErrorMessage, isAuthError, isApiNormalized, isAppNormalized, isFirebaseAuthNormalized, isFirebaseFirestoreNormalized, isFirebaseStorageNormalized, isNativeNormalized, isNetworkNormalized, isUnknownNormalized, isZodNormalized, } from "./normalize";
 export type { NormalizedError, NormalizedApiError, NormalizedAppError, NormalizedFirebaseAuthError, NormalizedFirebaseFirestoreError, NormalizedFirebaseStorageError, NormalizedNativeError, NormalizedNetworkError, NormalizedUnknownThrownValue, NormalizedZodError, } from "./normalize";
 export * from "./degraded";
+export { describeCauseChain } from "./describe-cause";

package/dist/errors/index.js

@@ -26,3 +26,7 @@ export { safeRead, installDegradedReadReporter, } from "./safe-read";
 // `appkit/src/utils/auth-error.ts` (now a thin re-export shim).
 export { normalizeError, getErrorMessage, isAuthError, isApiNormalized, isAppNormalized, isFirebaseAuthNormalized, isFirebaseFirestoreNormalized, isFirebaseStorageNormalized, isNativeNormalized, isNetworkNormalized, isUnknownNormalized, isZodNormalized, } from "./normalize";
 export * from "./degraded";
+// Flattens Error.cause into a persistable string. Required by every recorder:
+// AppError rebases its own stack onto the wrap site, so the frames naming the
+// real fault exist only on the cause.
+export { describeCauseChain } from "./describe-cause";

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

@@ -119,7 +119,7 @@ function renderProfileHero(t, ctx) {
     return (_jsx(Section, { color: "inverse", tone: "accent-banner", paddingY: "y-2-5xl", children: _jsx(Div, { className: `${page.container.md}`, children: _jsxs(Stack, { direction: "sm-row", wrap: true, align: "center", smAlign: "end", gap: "md", children: [_jsx(Row, { align: "center", justify: "center", className: `w-20 h-20 flex-shrink-0 ${__O.hidden}`, surface: "default", rounded: "full", children: photoURL ? _jsx(MediaImage, { src: photoURL, alt: displayName, size: "avatar", fallback: "\uD83D\uDC64" }) : _jsx(User, { className: "w-10 h-10 text-white/60" }) }), _jsxs(Stack, { gap: "xs", className: "text-center sm:text-left", children: [_jsxs(Row, { justify: "start", gap: "xs", wrap: true, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-0", children: displayName }), isSeller && _jsx(Span, { color: "inverse", size: "xs", weight: "semibold", className: "bg-[white]/20", padding: "pill-sm", rounded: "full", children: t("roleSeller") })] }), _jsx(Text, { color: "inverse", variant: "none", size: "sm", children: memberSince })] }), isSeller && storeSlug && (_jsx(Div, { className: "sm:ml-auto", children: _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "inline-flex items-center gap-[var(--appkit-space-1-5)] rounded-full border border-white/30 bg-white/10 hover:bg-white/20 px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-white transition-colors", children: [_jsx(ExternalLink, { className: "w-3.5 h-3.5" }), t("visitStore")] }) }))] }) }) }));
 }
 function renderProfileStatsRow(flex, statItems) {
-    return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-4", children: statItems.map(({ icon: Icon, label, value }) => (_jsxs(Div, { rounded: "xl", className: `${__P.p4} text-center`, border: "default", surface: "muted", children: [_jsx(Row, { centered: true, className: `${flex.center} mb-1`, children: _jsx(Icon, { className: "w-4 h-4 text-neutral-400" }) }), _jsx(Text, { size: "lg", weight: "bold", children: value }), _jsx(Text, { variant: "secondary", size: "xs", children: label })] }, label))) }));
+    return (_jsx(Grid, { cols: "statTiles", gap: "md", children: statItems.map(({ icon: Icon, label, value }) => (_jsxs(Div, { rounded: "xl", className: `${__P.p4} text-center`, border: "default", surface: "muted", children: [_jsx(Row, { centered: true, className: `${flex.center} mb-1`, children: _jsx(Icon, { className: "w-4 h-4 text-neutral-400" }) }), _jsx(Text, { size: "lg", weight: "bold", children: value }), _jsx(Text, { variant: "secondary", size: "xs", children: label })] }, label))) }));
 }
 function renderProfileBioSection(pub) {
     if (!pub?.bio && !pub?.location && !pub?.website)
@@ -132,11 +132,11 @@ function renderStoreDescriptionSection(isSeller, storeSlug, storeDescription, st
     return (_jsx(Section, { children: _jsxs(Div, { rounded: "2xl", className: `${__P.p6}`, border: "default", surface: "subtle", children: [_jsx(Heading, { level: 3, className: "mb-2", children: storeName }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: storeDescription }), _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "mt-3 inline-flex items-center gap-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-medium text-primary hover:underline", children: [t("visitStore"), " \u2192"] })] }) }));
 }
 function renderProfileListingsSection(t, products, storeSlug) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("listingsTitle") }), products.length === 0 ? (_jsxs(Div, { rounded: "2xl", padding: "3xl", className: "text-center", border: "default", surface: "subtle", children: [_jsx(ShoppingBag, { className: CLS_EMPTY_ICON }), _jsx(Text, { variant: "secondary", size: "sm", children: t("noListings") })] })) : (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: products.slice(0, 8).map((p) => _jsx(ProductCard, { product: toProductItem(p), href: getProductHref(p) }, p.id)) })), products.length > 8 && storeSlug && (_jsx(Div, { className: "mt-4 text-center", children: _jsx(Link, { href: String(ROUTES.PUBLIC.STORE_PRODUCTS(storeSlug)), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary hover:underline", children: t("viewAllListings", { count: products.length }) }) }))] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("listingsTitle") }), products.length === 0 ? (_jsxs(Div, { rounded: "2xl", padding: "3xl", className: "text-center", border: "default", surface: "subtle", children: [_jsx(ShoppingBag, { className: CLS_EMPTY_ICON }), _jsx(Text, { variant: "secondary", size: "sm", children: t("noListings") })] })) : (_jsx(Grid, { cols: "cards", gap: "md", children: products.slice(0, 8).map((p) => _jsx(ProductCard, { product: toProductItem(p), href: getProductHref(p) }, p.id)) })), products.length > 8 && storeSlug && (_jsx(Div, { className: "mt-4 text-center", children: _jsx(Link, { href: String(ROUTES.PUBLIC.STORE_PRODUCTS(storeSlug)), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary hover:underline", children: t("viewAllListings", { count: products.length }) }) }))] }));
 }
 function renderAuthoredReviewsSection(t, reviews, displayName) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("reviewsAuthoredTitle", { name: displayName }) }), reviews.length === 0 ? (_jsxs(Div, { rounded: "2xl", padding: "3xl", className: "text-center", border: "default", surface: "subtle", children: [_jsx(Star, { className: CLS_EMPTY_ICON }), _jsx(Text, { variant: "secondary", size: "sm", children: t("noReviewsAuthored", { name: displayName }) })] })) : (_jsx(Grid, { gap: "md", className: "grid-cols-1 sm:grid-cols-2", children: reviews.slice(0, 6).map((review) => _jsx(ReviewCard, { review: review }, review.id)) }))] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("reviewsAuthoredTitle", { name: displayName }) }), reviews.length === 0 ? (_jsxs(Div, { rounded: "2xl", padding: "3xl", className: "text-center", border: "default", surface: "subtle", children: [_jsx(Star, { className: CLS_EMPTY_ICON }), _jsx(Text, { variant: "secondary", size: "sm", children: t("noReviewsAuthored", { name: displayName }) })] })) : (_jsx(Grid, { cols: "cardsWide", gap: "md", children: reviews.slice(0, 6).map((review) => _jsx(ReviewCard, { review: review }, review.id)) }))] }));
 }
 function renderBuyerReceivedReviewsSection(t, reviews) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("reviewsReceivedAsBuyerTitle") || "Reviews Received" }), _jsx(Grid, { gap: "md", className: "grid-cols-1 sm:grid-cols-2", children: reviews.slice(0, 6).map((review) => _jsx(ReviewCard, { review: review }, review.id)) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("reviewsReceivedAsBuyerTitle") || "Reviews Received" }), _jsx(Grid, { cols: "cardsWide", gap: "md", children: reviews.slice(0, 6).map((review) => _jsx(ReviewCard, { review: review }, review.id)) })] }));
 }

package/dist/features/account/components/AddressBook.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Div, Span, Stack, Text } from "../../../ui";
+import { Button, Div, Grid, Span, Stack, Text } from "../../../ui";
 export function AddressCard({ address, onEdit, onDelete, onSetDefault, labels = {}, }) {
     const line1 = "line1" in address && address.line1
         ? address.line1
@@ -10,5 +10,5 @@ export function AddressCard({ address, onEdit, onDelete, onSetDefault, labels =
     return (_jsxs(Div, { surface: "card", padding: "sm", className: "relative", children: [address.isDefault && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "absolute right-3 top-3", rounded: "full", padding: "pill-xs", children: labels.defaultBadge ?? "Default" })), address.label && (_jsx(Text, { className: "mb-1 tracking-wide text-[var(--appkit-color-text-muted)]", size: "xs", weight: "semibold", transform: "uppercase", children: address.label })), _jsx(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", children: line1 }), line2 && _jsx(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", children: line2 }), _jsxs(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", children: [address.city, ", ", address.state, " ", address.postalCode] }), _jsx(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", children: address.country }), address.phone && (_jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: address.phone })), _jsxs(Div, { layout: "flex", gap: "1", className: "mt-3", children: [onEdit && (_jsx(Button, { onClick: () => onEdit(address), variant: "ghost", size: "sm", className: "text-[length:var(--appkit-text-xs)] font-medium text-primary hover:underline", children: labels.edit ?? "Edit" })), onDelete && (_jsx(Button, { onClick: () => onDelete(address.id), variant: "ghost", size: "sm", className: "text-[length:var(--appkit-text-xs)] font-medium text-error hover:underline", children: labels.delete ?? "Delete" })), !address.isDefault && onSetDefault && (_jsx(Button, { onClick: () => onSetDefault(address.id), variant: "outline", size: "sm", className: "ml-auto text-[length:var(--appkit-text-xs)] font-medium", children: labels.setDefault ?? "Set default" }))] })] }));
 }
 export function AddressBook({ addresses, onEdit, onDelete, onSetDefault, onAdd, emptyLabel = "No saved addresses", addLabel = "Add Address", }) {
-    return (_jsxs(Stack, { gap: "md", children: [addresses.length === 0 && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: emptyLabel })), _jsx(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: addresses.map((addr) => (_jsx(AddressCard, { address: addr, onEdit: onEdit, onDelete: onDelete, onSetDefault: onSetDefault }, addr.id))) }), onAdd && (_jsxs(Button, { rounded: "lg", onClick: onAdd, variant: "outline", paddingX: "md", paddingY: "md", textSize: "sm", weight: "medium", className: "mt-2 border border-dashed border-neutral-300 dark:border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] dark:text-[var(--appkit-color-text-muted)] transition hover:border-neutral-400 dark:hover:border-[var(--appkit-color-border-subtle)] hover:text-neutral-700 dark:hover:text-[var(--appkit-color-text)]", children: ["+ ", addLabel] }))] }));
+    return (_jsxs(Stack, { gap: "md", children: [addresses.length === 0 && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: emptyLabel })), _jsx(Grid, { cols: "cardsWide", gap: "md", children: addresses.map((addr) => (_jsx(AddressCard, { address: addr, onEdit: onEdit, onDelete: onDelete, onSetDefault: onSetDefault }, addr.id))) }), onAdd && (_jsxs(Button, { rounded: "lg", onClick: onAdd, variant: "outline", paddingX: "md", paddingY: "md", textSize: "sm", weight: "medium", className: "mt-2 border border-dashed border-neutral-300 dark:border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] dark:text-[var(--appkit-color-text-muted)] transition hover:border-neutral-400 dark:hover:border-[var(--appkit-color-border-subtle)] hover:text-neutral-700 dark:hover:text-[var(--appkit-color-text)]", children: ["+ ", addLabel] }))] }));
 }

package/dist/features/account/components/AddressesIndexListing.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 { useAddresses } from "../hooks/useAddresses";
-import { Div, ListingFilterDrawer, ListingToolbar, Stack, Text } from "../../../ui";
+import { Div, Grid, ListingFilterDrawer, ListingToolbar, Stack, Text } from "../../../ui";
 import { AddressBook } from "./AddressBook";
 import { AddressFilters } from "./AddressFilters";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
@@ -74,5 +74,5 @@ export function AddressesIndexListing({ onAdd, onEdit, onDelete, }) {
         },
     });
     return (_jsxs(Stack, { gap: "md", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by address, postcode or label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, view: view, onViewChange: (v) => { if (v === "table")
-                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { className: "sm:px-[1rem]", padding: "x-sm", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: Array.from({ length: 4 }).map((_, i) => (_jsxs(Stack, { gap: "sm", rounded: "xl", border: "default", padding: "md", className: "animate-pulse", children: [_jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { paddingY: "xl", color: "muted", size: "sm", align: "start", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(AddressFilters, { table: pendingTable }) })] }));
+                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { className: "sm:px-[1rem]", padding: "x-sm", children: isLoading ? (_jsx(Grid, { cols: "cardsWide", gap: "md", children: Array.from({ length: 4 }).map((_, i) => (_jsxs(Stack, { gap: "sm", rounded: "xl", border: "default", padding: "md", className: "animate-pulse", children: [_jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { paddingY: "xl", color: "muted", size: "sm", align: "start", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(AddressFilters, { table: pendingTable }) })] }));
 }

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

@@ -3,7 +3,18 @@ import { type AddressBanStatus, type AddressCreateInput, type AddressDocument, t
 export declare class AddressesRepository extends BaseRepository<AddressDocument> {
     constructor();
     private decryptAddress;
-    private encryptAddressData;
+    /**
+     * Declared, not hand-rolled.
+     *
+     * `BaseRepository.applyWriteHooks` already does exactly what the private
+     * `encryptAddressData` 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 ["fullName", "phone", "addressLine1", "addressLine2"];
     protected mapDoc<D = AddressDocument>(snap: DocumentSnapshot): D;
     createWithId(id: string, data: Partial<AddressDocument>): Promise<AddressDocument>;
     update(id: string, data: Partial<AddressDocument>): Promise<AddressDocument>;

package/dist/features/addresses/repository/addresses.repository.js

@@ -13,28 +13,37 @@ import { normalizeError } from "../../../errors/normalize";
 import { DatabaseError } from "../../../errors";
 import { serverLogger } from "../../../monitoring";
 import { BaseRepository, getFirestoreCount, prepareForFirestore, } from "../../../providers/db-firebase";
-import { ADDRESS_PII_FIELDS, decryptPiiFields, encryptPiiFields, } from "../../../security";
+import { ADDRESS_PII_FIELDS, decryptPiiFields, } from "../../../security";
 import { ADDRESS_FIELDS, ADDRESSES_COLLECTION, } from "../schemas";
 export class AddressesRepository extends BaseRepository {
     constructor() {
         super(ADDRESSES_COLLECTION);
+        /**
+         * Declared, not hand-rolled.
+         *
+         * `BaseRepository.applyWriteHooks` already does exactly what the private
+         * `encryptAddressData` 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 = ADDRESS_PII_FIELDS;
     }
     decryptAddress(doc) {
         return decryptPiiFields(doc, [...ADDRESS_PII_FIELDS]);
     }
-    encryptAddressData(data) {
-        return encryptPiiFields(data, [...ADDRESS_PII_FIELDS]);
-    }
     mapDoc(snap) {
         const raw = super.mapDoc(snap);
         return this.decryptAddress(raw);
     }
     async createWithId(id, data) {
-        const encrypted = this.encryptAddressData(data);
+        const encrypted = this.applyWriteHooks(data);
         return super.createWithId(id, encrypted);
     }
     async update(id, data) {
-        const encrypted = this.encryptAddressData(data);
+        const encrypted = this.applyWriteHooks(data);
         return super.update(id, encrypted);
     }
     async listByOwner(ownerType, ownerId) {
@@ -91,7 +100,7 @@ export class AddressesRepository extends BaseRepository {
                 createdAt: now,
                 updatedAt: now,
             };
-            const encrypted = this.encryptAddressData(addressData);
+            const encrypted = this.applyWriteHooks(addressData);
             await docRef.set(prepareForFirestore(encrypted));
             serverLogger.info("Address created", {
                 ownerType,

package/dist/features/admin/components/AdminAnalyticsView.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
-import { Div, Heading, Stack } from "../../../ui";
+import { Div, Grid, Heading, Stack } from "../../../ui";
 import { Alert } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -21,7 +21,7 @@ export function AdminAnalyticsView({ data, labels = {}, formatRevenue = (n) => S
     const summary = resolvedData?.summary;
     const ordersByMonth = resolvedData?.ordersByMonth ?? [];
     const topProducts = resolvedData?.topProducts ?? [];
-    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : labels.title ? (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })) : null, query.error ? (_jsx(Alert, { variant: "error", title: "Could not load analytics", children: query.error instanceof Error ? query.error.message : "Unknown error" })) : null, renderDateRange?.(), renderSummaryCards ? (renderSummaryCards()) : busy ? (_jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4", children: Array.from({ length: 4 }).map((_, index) => (_jsx(Div, { className: "h-28 border border-[var(--appkit-color-border-subtle)] animate-pulse", surface: "default", rounded: "xl" }, index))) })) : summary ? (_jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4", children: [_jsx(AdminStatCard, { label: labels.totalRevenue ?? "Total Revenue", value: formatRevenue(summary.totalRevenue) }), _jsx(AdminStatCard, { label: labels.totalOrders ?? "Total Orders", value: String(summary.totalOrders) }), _jsx(AdminStatCard, { label: labels.revenueThisMonth ?? "Revenue This Month", value: formatRevenue(summary.revenueThisMonth) }), _jsx(AdminStatCard, { label: labels.ordersThisMonth ?? "Orders This Month", value: String(summary.newOrdersThisMonth) })] })) : null, renderCharts ? (renderCharts()) : ordersByMonth.length > 0 ? (_jsxs(Stack, { gap: "lg", children: [_jsx(AdminRevenueChart, { data: ordersByMonth, labels: { title: labels.revenueByMonth } }), _jsx(AdminOrdersChart, { data: ordersByMonth, labels: { title: labels.ordersByMonth } })] })) : null, renderTable ? (renderTable()) : topProducts.length > 0 ? (_jsx(AdminTopProductsTable, { products: topProducts, labels: {
+    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : labels.title ? (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })) : null, query.error ? (_jsx(Alert, { variant: "error", title: "Could not load analytics", children: query.error instanceof Error ? query.error.message : "Unknown error" })) : null, renderDateRange?.(), renderSummaryCards ? (renderSummaryCards()) : busy ? (_jsx(Grid, { cols: "statTiles", gap: "md", children: Array.from({ length: 4 }).map((_, index) => (_jsx(Div, { className: "h-28 border border-[var(--appkit-color-border-subtle)] animate-pulse", surface: "default", rounded: "xl" }, index))) })) : summary ? (_jsxs(Grid, { cols: "statTiles", gap: "md", children: [_jsx(AdminStatCard, { label: labels.totalRevenue ?? "Total Revenue", value: formatRevenue(summary.totalRevenue) }), _jsx(AdminStatCard, { label: labels.totalOrders ?? "Total Orders", value: String(summary.totalOrders) }), _jsx(AdminStatCard, { label: labels.revenueThisMonth ?? "Revenue This Month", value: formatRevenue(summary.revenueThisMonth) }), _jsx(AdminStatCard, { label: labels.ordersThisMonth ?? "Orders This Month", value: String(summary.newOrdersThisMonth) })] })) : null, renderCharts ? (renderCharts()) : ordersByMonth.length > 0 ? (_jsxs(Stack, { gap: "lg", children: [_jsx(AdminRevenueChart, { data: ordersByMonth, labels: { title: labels.revenueByMonth } }), _jsx(AdminOrdersChart, { data: ordersByMonth, labels: { title: labels.ordersByMonth } })] })) : null, renderTable ? (renderTable()) : topProducts.length > 0 ? (_jsx(AdminTopProductsTable, { products: topProducts, labels: {
                     title: labels.topProducts,
                     orders: labels.orders,
                     view: labels.view,

package/dist/features/admin/components/AdminCouponsView.js

@@ -5,7 +5,7 @@ import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useCallback } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { Div, FilterChipGroup, ListingLayout, Text, useToast } from "../../../ui";
+import { Div, Grid, FilterChipGroup, ListingLayout, Text, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ROW_ACTION_META, ROW_ACTION_ID, ADMIN_BULK_ACTIONS } from "../../products/constants/action-defs";
 import { ADMIN_COUPON_TYPE_TABS } from "../constants/filter-tabs";
@@ -116,7 +116,7 @@ export function AdminCouponsView({ children, onBulkArchive, onBulkDelete, ...pro
                     ], value: pendingFilters.showExpired ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showExpired: id })), allId: "" })] })),
         renderCards: (rows, _view, selectionCtx, isLoading) => {
             rowsRef.current = rows;
-            return isLoading ? (_jsx(Div, { gap: "3", className: "fluid-grid-card", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Stack, { border: "skeleton", className: "animate-pulse", gap: "3", rounded: "xl", padding: "md", children: [_jsx(Div, { className: "h-6 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-4xl", children: _jsx(Text, { color: "faint", children: "No coupons found" }) })) : (_jsx(Div, { gap: "3", className: "fluid-grid-card", children: rows.map((row) => (_jsx(CouponCard, { coupon: row.raw, onEdit: selectionCtx.openEditPanel, onToggleActive: handleToggle, onDelete: handleDelete }, row.id))) }));
+            return isLoading ? (_jsx(Grid, { cols: "cardsWide", gap: "3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Stack, { border: "skeleton", className: "animate-pulse", gap: "3", rounded: "xl", padding: "md", children: [_jsx(Div, { className: "h-6 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-4xl", children: _jsx(Text, { color: "faint", children: "No coupons found" }) })) : (_jsx(Grid, { cols: "cardsWide", gap: "3", children: rows.map((row) => (_jsx(CouponCard, { coupon: row.raw, onEdit: selectionCtx.openEditPanel, onToggleActive: handleToggle, onDelete: handleDelete }, row.id))) }));
         },
         renderEditor: ({ editId, closePanel }) => (_jsx(AdminCouponEditorView, { couponId: editId ?? undefined, initialData: editId ? rowsRef.current.find((r) => r.id === editId)?.raw : undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
         resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Coupon" : "Edit Coupon"),

package/dist/features/admin/components/AdminGuideHubView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Users, Package, Store, ShoppingBag, FileText, Settings, Shield, BarChart2, AlertTriangle, BookOpen, MessageSquare, CreditCard, } from "lucide-react";
-import { Alert, Div, Heading, Row, Section, Stack, Text, TextLink } from "../../../ui";
+import { Alert, Div, Grid, Heading, Row, Section, Stack, Text, TextLink } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const CLS_WARN_PANEL = "rounded-2xl border border-amber-200 bg-warning-surface dark:border-amber-800 p-[var(--appkit-space-6)]";
 const CLS_WARN_HEAD = "font-semibold text-amber-800 dark:text-amber-300 mb-1";
@@ -88,5 +88,5 @@ export function AdminGuideHubView({ permissions = [], isFullAdmin = false }) {
     const hasPermission = (perm) => isFullAdmin || permissions.includes(perm);
     const visibleCards = GUIDE_CARDS.filter((c) => hasPermission(c.permission));
     const hasAny = visibleCards.length > 0;
-    return (_jsxs(Stack, { gap: "xl", padding: "b-2xl", children: [_jsx(Section, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", shadow: "sm", children: _jsxs(Div, { paddingX: "x-md-xl", paddingY: "y-xl", className: "[background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_60%,var(--appkit-color-secondary-400)_100%)]", children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", surface: "default", align: "center", justify: "center", rounded: "xl", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { color: "inverse", className: "/80 tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin & Employee Guide" })] }), _jsx(Heading, { color: "inverse", level: 1, className: "mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "LetItRip Internal Guide" }), _jsx(Text, { color: "inverse", className: "/80", size: "base", children: "Everything you need to operate and manage LetItRip \u2014 India's largest collectibles marketplace." })] }) }), _jsx(Alert, { variant: "info", compact: true, children: "These guides describe expected platform behaviour. Real access to each section is enforced independently by the permission system \u2014 this page is reference only." }), !hasAny && (_jsx(Alert, { variant: "info", title: "Limited access", children: "Your permission set doesn't include read access to any admin sections yet. Contact your admin to request the permissions you need." })), hasAny && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)] mb-4", size: "lg", weight: "semibold", children: "Guides" }), _jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: visibleCards.map(({ Icon, title, description, href }) => (_jsxs(TextLink, { variant: "bare", href: href, rounded: "xl", layout: "flex-col", gap: "md", paddingX: "lg", paddingY: "lg", shadow: "hover-md", className: "group border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] hover:border-[var(--appkit-color-primary)] transition-all", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-9 h-9 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "lg", children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", weight: "semibold", children: title })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: description }), _jsx(Text, { className: "text-[var(--appkit-color-primary)] mt-auto", size: "xs", weight: "medium", children: "Read guide \u2192" })] }, title))) })] })), _jsx(Section, { className: CLS_WARN_PANEL, children: _jsxs(Row, { align: "start", gap: "3", children: [_jsx(AlertTriangle, { className: "w-5 h-5 text-warning flex-shrink-0 mt-0.5" }), _jsxs(Div, { children: [_jsx(Text, { className: CLS_WARN_HEAD, children: "Remember: with great access comes responsibility" }), _jsx(Text, { className: CLS_WARN_BODY, children: "Admin actions are logged. Never access user PII (email, phone) without a legitimate support reason. Never grant capabilities or permissions without documented approval. When in doubt, escalate to a senior admin." })] })] }) })] }));
+    return (_jsxs(Stack, { gap: "xl", padding: "b-2xl", children: [_jsx(Section, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", shadow: "sm", children: _jsxs(Div, { paddingX: "x-md-xl", paddingY: "y-xl", className: "[background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_60%,var(--appkit-color-secondary-400)_100%)]", children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", surface: "default", align: "center", justify: "center", rounded: "xl", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { color: "inverse", className: "/80 tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin & Employee Guide" })] }), _jsx(Heading, { color: "inverse", level: 1, className: "mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "LetItRip Internal Guide" }), _jsx(Text, { color: "inverse", className: "/80", size: "base", children: "Everything you need to operate and manage LetItRip \u2014 India's largest collectibles marketplace." })] }) }), _jsx(Alert, { variant: "info", compact: true, children: "These guides describe expected platform behaviour. Real access to each section is enforced independently by the permission system \u2014 this page is reference only." }), !hasAny && (_jsx(Alert, { variant: "info", title: "Limited access", children: "Your permission set doesn't include read access to any admin sections yet. Contact your admin to request the permissions you need." })), hasAny && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)] mb-4", size: "lg", weight: "semibold", children: "Guides" }), _jsx(Grid, { cols: "cards", gap: "md", children: visibleCards.map(({ Icon, title, description, href }) => (_jsxs(TextLink, { variant: "bare", href: href, rounded: "xl", layout: "flex-col", gap: "md", paddingX: "lg", paddingY: "lg", shadow: "hover-md", className: "group border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] hover:border-[var(--appkit-color-primary)] transition-all", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-9 h-9 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "lg", children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", weight: "semibold", children: title })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: description }), _jsx(Text, { className: "text-[var(--appkit-color-primary)] mt-auto", size: "xs", weight: "medium", children: "Read guide \u2192" })] }, title))) })] })), _jsx(Section, { className: CLS_WARN_PANEL, children: _jsxs(Row, { align: "start", gap: "3", children: [_jsx(AlertTriangle, { className: "w-5 h-5 text-warning flex-shrink-0 mt-0.5" }), _jsxs(Div, { children: [_jsx(Text, { className: CLS_WARN_HEAD, children: "Remember: with great access comes responsibility" }), _jsx(Text, { className: CLS_WARN_BODY, children: "Admin actions are logged. Never access user PII (email, phone) without a legitimate support reason. Never grant capabilities or permissions without documented approval. When in doubt, escalate to a senior admin." })] })] }) })] }));
 }

package/dist/features/admin/components/AdminMediaView.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Alert, Button, Div, Input, Row, Select, Stack, StackedViewShell, Text, useToast } from "../../../ui";
+import { Alert, Button, Div, Grid, Input, Row, Select, Stack, StackedViewShell, Text, useToast } from "../../../ui";
 import { normalizeError } from "../../../errors/normalize";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -64,7 +64,7 @@ function MediaBrowser({ onCopy }) {
             return files;
         return files.filter((f) => f.name.toLowerCase().includes(q));
     }, [files, search]);
-    return (_jsxs(Stack, { className: `${__P.p4}`, gap: "3", rounded: "xl", surface: "default", border: "default", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Browse existing media" }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", wrapperClassName: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Div, { layout: "grid", gap: "2", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6", children: [filtered.map((f) => {
+    return (_jsxs(Stack, { className: `${__P.p4}`, gap: "3", rounded: "xl", surface: "default", border: "default", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Browse existing media" }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", wrapperClassName: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Grid, { cols: "navTiles", gap: "sm", children: [filtered.map((f) => {
                         const isImage = (f.contentType ?? "").startsWith("image/");
                         return (_jsxs(Div, { className: "group overflow-hidden", surface: "muted", rounded: "lg", border: "default", children: [_jsx(Row, { color: "muted", textSize: "xs", className: "relative aspect-square", surface: "subtle", align: "center", justify: "center", children: isImage ? (_jsx(MediaImage, { src: f.downloadURL, alt: f.name, size: "thumbnail" })) : (_jsx(Text, { align: "center", paddingX: "x-xs", className: "break-all", children: f.contentType ?? "file" })) }), _jsxs(Div, { className: "p-[0.375rem]", children: [_jsx(Text, { className: "truncate text-[10px] font-mono", color: "muted", children: f.name.split("/").pop() }), _jsx(Button, { type: "button", variant: "ghost", textSize: "xs", className: "mt-1 w-full", onClick: () => onCopy(f.downloadURL), children: ACTIONS.MEDIA["copy-url"].label })] })] }, f.name));
                     }), filtered.length === 0 && !isLoading && (_jsx(Text, { paddingY: "lg", className: "col-span-full", color: "muted", size: "sm", align: "center", children: "No files found." }))] }), _jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { size: "xs", color: "muted", children: [filtered.length, " file(s)", nextPageToken ? " · more available" : ""] }), nextPageToken && (_jsx(Button, { type: "button", variant: "outline", onClick: () => void load(nextPageToken), disabled: isLoading, children: isLoading ? "Loading…" : "Load more" }))] })] }));

package/dist/features/admin/components/AdminViewCards.js

@@ -69,7 +69,7 @@ export function AdminViewCards({ rows, view, isLoading, emptyLabel = "No items f
         if (view === "list") {
             return (_jsx(Div, { rounded: "xl", border: "subtle", className: `${__O.hidden} divide-y divide-zinc-100 divide-[var(--appkit-color-border)]`, children: Array.from({ length: count }).map((_, i) => _jsx(SkeletonCard, { view: "list" }, i)) }));
         }
-        return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: count }).map((_, i) => _jsx(SkeletonCard, { view: "grid" }, i)) }));
+        return (_jsx(Grid, { cols: "cards", gap: "md", children: Array.from({ length: count }).map((_, i) => _jsx(SkeletonCard, { view: "grid" }, i)) }));
     }
     if (rows.length === 0) {
         return (_jsx(Text, { paddingY: "3xl", size: "sm", color: "muted", align: "center", children: emptyLabel }));
@@ -77,5 +77,5 @@ export function AdminViewCards({ rows, view, isLoading, emptyLabel = "No items f
     if (view === "list") {
         return (_jsx(Div, { rounded: "xl", border: "subtle", className: `${__O.hidden} divide-y divide-zinc-100 divide-[var(--appkit-color-border)]`, children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "list", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick, renderRowActions: renderRowActions, resourceIcon: resourceIcon }, row.id))) }));
     }
-    return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "grid", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick, renderRowActions: renderRowActions, resourceIcon: resourceIcon }, row.id))) }));
+    return (_jsx(Grid, { cols: "cards", gap: "md", children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "grid", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick, renderRowActions: renderRowActions, resourceIcon: resourceIcon }, row.id))) }));
 }

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

@@ -203,6 +203,6 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
                                 bidCount: typeof r.bidCount === "number" ? r.bidCount : undefined,
                                 slug: typeof r.slug === "string" ? r.slug : undefined,
                             }));
-                            return (_jsxs(Stack, { gap: "xl", children: [related.length > 0 && (_jsx(RelatedProducts, { labels: { title: "Similar Auctions" }, renderGrid: () => (_jsx(MarketplaceAuctionGrid, { auctions: related, gridClassName: "grid grid-cols-2 gap-[var(--appkit-space-4)] sm:grid-cols-3 lg:grid-cols-4" })) })), _jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: storeName || undefined })] }));
+                            return (_jsxs(Stack, { gap: "xl", children: [related.length > 0 && (_jsx(RelatedProducts, { labels: { title: "Similar Auctions" }, renderGrid: () => (_jsx(MarketplaceAuctionGrid, { auctions: related })) })), _jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: storeName || undefined })] }));
                         } }), renderAuctionStoreReviews(storeId), onPlaceBid && (_jsx(AuctionBottomActions, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, tiers: bidIncrementTiers, minBidIncrementOverride: minBidIncrementOverride, currency: currency, isEnded: isEnded, auctionEndDate: endDate, buyNowPrice: buyNowPrice, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow }))] })] }));
 }

package/dist/features/auctions/components/MarketplaceAuctionGrid.d.ts

@@ -13,10 +13,9 @@ export interface MarketplaceAuctionGridProps {
     selectable?: boolean;
     selectedIds?: string[];
     onSelectionChange?: (ids: string[]) => void;
-    gridClassName?: string;
     emptyIcon?: ReactNode;
     labels?: MarketplaceAuctionGridLabels;
     cardLabels?: MarketplaceAuctionCardLabels;
     wishlistActions?: WishlistToggleActions;
 }
-export declare function MarketplaceAuctionGrid({ auctions, loading, skeletonCount, variant, selectable, selectedIds, onSelectionChange, gridClassName, emptyIcon, labels, cardLabels, wishlistActions, }: MarketplaceAuctionGridProps): import("react").JSX.Element;
+export declare function MarketplaceAuctionGrid({ auctions, loading, skeletonCount, variant, selectable, selectedIds, onSelectionChange, emptyIcon, labels, cardLabels, wishlistActions, }: MarketplaceAuctionGridProps): import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Gavel } from "lucide-react";
-import { Div, Row, Stack, Text } from "../../../ui";
+import { Div, Grid, Row, Stack, Text } from "../../../ui";
 import { MarketplaceAuctionCard, } from "./MarketplaceAuctionCard";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
@@ -20,7 +20,7 @@ function AuctionCardSkeleton({ variant = "grid", }) {
     }
     return (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, rounded: "xl", surface: "subtle", children: [_jsx(Div, { surface: "skeleton", className: "aspect-square" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { surface: "skeleton", className: "h-4 w-3/4", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-3 w-1/3", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-5 w-1/2", rounded: "default" }), _jsxs(Row, { justify: "between", children: [_jsx(Div, { surface: "skeleton", className: "h-3 w-1/4", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-3 w-1/3", rounded: "default" })] }), _jsx(Row, { gap: "sm", children: _jsx(Div, { className: CLS_SKELETON_BTN }) })] })] }));
 }
-export function MarketplaceAuctionGrid({ auctions, loading = false, skeletonCount = 12, variant = "grid", selectable = false, selectedIds = [], onSelectionChange, gridClassName, emptyIcon, labels, cardLabels, wishlistActions, }) {
+export function MarketplaceAuctionGrid({ auctions, loading = false, skeletonCount = 12, variant = "grid", selectable = false, selectedIds = [], onSelectionChange, emptyIcon, labels, cardLabels, wishlistActions, }) {
     const mergedLabels = { ...DEFAULT_GRID_LABELS, ...labels };
     const handleSelect = (id, selected) => {
         if (!onSelectionChange)
@@ -31,14 +31,15 @@ export function MarketplaceAuctionGrid({ auctions, loading = false, skeletonCoun
         }
         onSelectionChange(selectedIds.filter((selectedId) => selectedId !== id));
     };
-    const containerClass = variant === "list"
-        ? "flex flex-col gap-[var(--appkit-space-4)]"
-        : `${gridClassName ?? "grid grid-cols-1 gap-[var(--appkit-space-6)] sm:grid-cols-2 xl:grid-cols-4"}`;
+    /* The container is either the canonical card ladder or a plain stack — the
+       caller no longer supplies a grid className, so a store's auctions tab and
+       /auctions can no longer drift apart in column count. */
+    const Container = ({ children }) => variant === "list" ? (_jsx(Stack, { gap: "md", children: children })) : (_jsx(Grid, { cols: "cards", gap: "lg", children: children }));
     if (loading) {
-        return (_jsx(Div, { className: containerClass, children: Array.from({ length: skeletonCount }).map((_, index) => (_jsx(AuctionCardSkeleton, { variant: variant }, `auction-skeleton-${index}`))) }));
+        return (_jsx(Container, { children: Array.from({ length: skeletonCount }).map((_, index) => (_jsx(AuctionCardSkeleton, { variant: variant }, `auction-skeleton-${index}`))) }));
     }
     if (auctions.length === 0) {
         return (_jsxs(Stack, { justify: "center", padding: "y-6xl", align: "start", gap: "3", className: "text-left", children: [emptyIcon ?? _jsx(Gavel, { className: "h-16 w-16" }), _jsx(Text, { size: "xl", weight: "medium", color: "primary", children: mergedLabels.emptyTitle }), _jsx(Text, { size: "sm", color: "muted", children: mergedLabels.emptyDescription })] }));
     }
-    return (_jsx(Div, { className: containerClass, children: auctions.map((auction) => (_jsx(MarketplaceAuctionCard, { product: auction, variant: variant, selectable: selectable, isSelected: selectedIds.includes(auction.id), onSelect: handleSelect, labels: cardLabels, wishlistActions: wishlistActions }, auction.id))) }));
+    return (_jsx(Container, { children: auctions.map((auction) => (_jsx(MarketplaceAuctionCard, { product: auction, variant: variant, selectable: selectable, isSelected: selectedIds.includes(auction.id), onSelect: handleSelect, labels: cardLabels, wishlistActions: wishlistActions }, auction.id))) }));
 }