@mohasinac/appkit 4.30.16 → 4.30.18

package/dist/features/stores/components/StoreLiveItemsListing.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, Pagination, Row, Text, StickyToolbar } from "../../../ui";
+import { Div, FilterDrawer, Grid, ListingToolbar, Pagination, Row, Text, StickyToolbar } from "../../../ui";
 import { LiveItemFilters } from "../../live/components/LiveItemFilters";
 import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
 import { PRODUCT_FIELDS } from "../../../constants/field-names";
@@ -56,8 +56,7 @@ export function StoreLiveItemsListing({ storeId, initialData }) {
         availability,
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
-    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-[var(--appkit-space-4)]";
-    return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search live animals & plants\u2026", onSearchChange: setSearchInput, onSearchCommit: () => table.set("q", searchInput.trim()), sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => table.set("sort", v), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: STORE_LIVE_TYPES }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: _jsx(Div, { className: gridClass, children: isLoading
+    return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search live animals & plants\u2026", onSearchChange: setSearchInput, onSearchCommit: () => table.set("q", searchInput.trim()), sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => table.set("sort", v), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: STORE_LIVE_TYPES }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: _jsx(Grid, { cols: "cards", gap: "md", children: isLoading
                         ? Array.from({ length: 8 }).map((_, i) => _jsx(Div, { surface: "muted", rounded: "xl", className: "aspect-square animate-pulse" }, i))
                         : products.length === 0
                             ? _jsx(Div, { paddingY: "y-4xl", className: "col-span-full text-left", children: _jsx(Text, { color: "muted", children: "No live items in this store yet." }) })

package/dist/features/stores/components/StorePreOrdersListing.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, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
+import { Div, FilterDrawer, Grid, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui";
 import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
 import { ProductFilters } from "../../products/components/ProductFilters";
 import { ROUTES } from "../../../next";
@@ -64,7 +64,6 @@ export function StorePreOrdersListing({ storeId, initialData }) {
         // table.set("q", v) already resets page to 1 — see root-cause #13.
         table.set("q", searchInput.trim());
     }, [searchInput, table]);
-    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-[var(--appkit-space-4)]";
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: PREORDER_PUBLIC_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
                 }, view: view, onViewChange: (v) => {
@@ -72,5 +71,5 @@ export function StorePreOrdersListing({ storeId, initialData }) {
                         return;
                     setView(v);
                     table.set("view", v);
-                }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: STORE_PRE_ORDER_TYPES }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-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-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "This store has no pre-orders yet." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) : (_jsx(Div, { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
+                }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: STORE_PRE_ORDER_TYPES }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Grid, { cols: "cards", gap: "md", children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-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-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "This store has no pre-orders yet." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) : (_jsx(Grid, { cols: "cards", gap: "md", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
 }

package/dist/features/stores/components/StoreProductsListing.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";
@@ -104,5 +104,5 @@ export function StoreProductsListing({ storeId, listingTypes = ["standard"], ini
     }, [localCart, showToast]);
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store products...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PRODUCT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
-                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: listingTypes }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_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: "overflow-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))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view, emptyLabel: "This store has no products yet.", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: listingTypes }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Grid, { cols: "cards", gap: "lg", children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-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))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view, emptyLabel: "This store has no products yet.", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

package/dist/features/stores/components/StoresIndexListing.js

@@ -4,7 +4,7 @@ import { Row, SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useStores } from "../hooks/useStores";
-import { BulkActionBar, Div, ListingFilterDrawer, ListingToolbar, Pagination, Text, StickyToolbar } from "../../../ui";
+import { BulkActionBar, Div, Grid, ListingFilterDrawer, ListingToolbar, Pagination, Text, StickyToolbar } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { InteractiveStoreCard } from "./InteractiveStoreCard";
 import { StoreFilters } from "./StoreFilters";
@@ -161,10 +161,10 @@ export function StoresIndexListing({ initialData }) {
                         disabled: selection.selectedCount !== 1,
                         onClick: () => { selection.clearSelection(); },
                     },
-                ] }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: table.getNumber("page", 1), 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(Div, { className: `${__P.p4} space-y-[0.625rem]`, children: [_jsx(Row, { align: "center", gap: "sm", children: _jsx(Div, { className: "h-10 w-10", surface: "subtle", rounded: "lg" }) }), _jsx(Div, { className: "h-4 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] })] }, i))) })) : stores.length === 0 ? (_jsx(Text, { paddingY: "4xl", color: "muted", size: "sm", align: "start", children: "No stores found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: stores.map((store) => {
+                ] }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: table.getNumber("page", 1), 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(Div, { className: `${__P.p4} space-y-[0.625rem]`, children: [_jsx(Row, { align: "center", gap: "sm", children: _jsx(Div, { className: "h-10 w-10", surface: "subtle", rounded: "lg" }) }), _jsx(Div, { className: "h-4 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] })] }, i))) })) : stores.length === 0 ? (_jsx(Text, { paddingY: "4xl", color: "muted", size: "sm", align: "start", children: "No stores found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: stores.map((store) => {
                         const storeKey = store.storeSlug ?? store.id;
                         return (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(storeKey)), selectable: selection.isSelecting, isSelected: selection.isSelected(store.id ?? store.storeSlug), onSelect: (id, sel) => { void sel; selection.toggle(id); } }, storeKey));
-                    }) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: stores.map((store) => {
+                    }) })) : (_jsx(Grid, { cols: "cards", gap: "lg", children: stores.map((store) => {
                         const storeKey = store.storeSlug ?? store.id;
                         return (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(storeKey)), selectable: selection.isSelecting, isSelected: selection.isSelected(store.id ?? store.storeSlug), onSelect: (id, sel) => { void sel; selection.toggle(id); } }, storeKey));
                     }) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: pendingFilterCount, children: _jsx(StoreFilters, { table: pendingTable }) })] }));

package/dist/features/tester/seed-data/tester-checklist-seed-data.js

@@ -174,6 +174,24 @@ const rawTesterChecklistItems = [
                 { key: "browse-categories", label: "Browsing categories shows relevant products", href: "/categories" },
                 { key: "search", label: "Search returns relevant results", href: "/search" },
                 { key: "filters", label: "Search/listing filters (price, brand, condition) work correctly" },
+                {
+                    key: "grid-one-card-per-row-on-phone",
+                    label: "On a phone, a product listing shows exactly ONE card per row — not two narrow ones",
+                    description: "BEFORE (until 2026-08-28): every listing put 2 cards per row at 375px, so each card was ~170px wide and its title/price squeezed. AFTER: 1 card per row on a phone, 2 on a tablet (~768px), 3–4 on a desktop. Check /products, /stores, /blog and an admin listing in card view. Resize slowly through 375 / 768 / 1024 / 1440 — the count should go 1, 2, 3, 4 and the cards should always fill the full width between the page margins, never leave a gap on the right.",
+                    href: "/products",
+                },
+                {
+                    key: "grid-short-last-row-not-stretched",
+                    label: "A listing whose last row is short does NOT stretch that card across the page",
+                    description: "Find a listing showing e.g. 4 items while 3 fit per row (add filters until the count is not a multiple of the row size). The single card left over on the last row must be exactly as wide as the cards above it, sitting on the left with empty space to its right. If it stretches to full width, the grid was switched from `auto-fill` to `auto-fit` — report it, this is the specific bug the layout was rebuilt to fix.",
+                    href: "/products",
+                },
+                {
+                    key: "grid-follows-sidebar-not-viewport",
+                    label: "Opening the desktop filter sidebar drops ONE column and keeps the cards the same size",
+                    description: "On a wide desktop (~1440px) open /products and toggle the filter sidebar. The card count per row should drop by one while each card stays roughly the same width — the grid measures its own container, not the window. If the cards instead shrink to squeeze the same number in, report it.",
+                    href: "/products",
+                },
                 {
                     key: "homepage-prize-draws-section",
                     label: "The homepage shows a \"Prize Draws\" strip with real cards — NOT an empty gap and NOT a \"Something went wrong\" block",
@@ -192,6 +210,18 @@ const rawTesterChecklistItems = [
                     description: "Press F12 → Console tab, then load the page. A missing translation key logs 'MISSING_MESSAGE: <key>' and renders the raw key text instead of a readable label. Report the exact key name if you see one.",
                     href: "/products",
                 },
+                {
+                    key: "listing-toolbar-collapsed-on-mobile",
+                    label: "On a phone, a listing opens with the search/filter toolbar COLLAPSED to a single \"Show Toolbar\" strip",
+                    description: "BEFORE (until 2026-08-28): every listing opened with two stacked toolbar rows — search + Filter, then a scrolling sort/view chip row — roughly 100px of chrome above the first card. AFTER: a phone gets one thin \"Show Toolbar\" strip instead. Tap it: search, Filter and sort appear. Navigate to another listing and back — it should stay expanded, because you chose that. On a desktop (~1440px) the toolbar must still be open by default, exactly as before. Also confirm the toolbar is never simply GONE — there must always be a visible strip to tap.",
+                    href: "/products",
+                },
+                {
+                    key: "listing-toolbar-forced-open-on-selection",
+                    label: "Selecting rows on a phone force-opens the toolbar so the bulk actions are reachable",
+                    description: "In an admin or seller listing on a phone, collapse the toolbar, then select a row (long-press or the checkbox). The toolbar must open by itself, because the bulk-action bar lives inside it — if it stays collapsed you can select rows but have no way to act on them. Report if the bulk bar is invisible or cut off.",
+                    href: "/products",
+                },
                 {
                     key: "product-filter-status-labels",
                     label: "In an admin/seller listing's filter drawer, every Status option reads as words (Published / Draft / In Review / Archived) — never a raw key like \"filters.statusInReview\"",
@@ -687,6 +717,18 @@ const rawTesterChecklistItems = [
                     label: "A seller's per-listing \"Minimum Bid Increment\" can require MORE than the admin tier, but can never let a bid undercut the tier",
                     description: "Set a listing's \"Minimum Bid Increment\" below the current tier's value (e.g. 1) and confirm the effective minimum bid still enforces the tier, not the smaller override. Then set it above the tier (e.g. 500 when the tier is 100) and confirm the higher override is now enforced instead.",
                 },
+                {
+                    key: "bid-succeeds-and-outbids-previous-winner",
+                    label: "Placing a valid bid actually records it — the current bid rises and the previous high bid flips to \"outbid\"",
+                    description: "Fixed 2026-08-28. BEFORE: every bid failed and the modal showed the raw text \"Batch write failed: Cannot find module '../providers/db-firebase' Require stack: - /var/task/.next/server/chunks/ssr/...\" in the amount field. AFTER: the bid is accepted, \"Current bid\" rises by at least the minimum increment, and the previous winner's row in Bid History reads \"outbid\". Note the failure returned a normally-rendered modal and an HTTP 200, so \"the page loaded\" and \"no error in the network tab\" both prove nothing — read the actual numbers. Root cause: a relative-path runtime require inside appkit that only breaks once bundled into a Lambda chunk.",
+                    href: "/auctions/auction-tester-sandbox-cycle-1",
+                },
+                {
+                    key: "server-error-copy-is-never-raw",
+                    label: "A server failure shows plain-English copy — never a file path, stack trace or \"Cannot find module\"",
+                    description: "Fixed 2026-08-28. BEFORE: any 500 printed its own internal message to the user, including absolute server paths under /var/task/. AFTER: the user sees \"A database error occurred. Please try again\" (or \"Something went wrong. Please try again.\"), while the FULL original text plus its cause chain appears in Admin → Maintenance → Server errors. Check both halves: generic in the browser, specific in the admin list. Seeing the raw text in either the bid modal or any toast is a regression.",
+                    href: "/auctions/auction-tester-sandbox-cycle-1",
+                },
                 {
                     key: "bid-increment-live-tier-change",
                     label: "The displayed \"min increment\" on an open auction updates live (without a page refresh) if another bidder's bid pushes the current bid across a tier boundary",
@@ -1738,7 +1780,18 @@ const rawTesterChecklistItems = [
             cases: [
                 { key: "start-conversation", label: "Starting a conversation with a seller works" },
                 { key: "receive-reply", label: "Receiving and reading a seller's reply works" },
-                { key: "message-realtime-update", label: "A new message appears in the recipient's thread without a manual page refresh (realtime ping-channel)", href: "/user/messages" },
+                {
+                    key: "message-realtime-update",
+                    label: "A new message appears in the RECIPIENT's thread without a manual page refresh (realtime ping-channel)",
+                    description: "Fixed 2026-08-28. BEFORE: only the SENDER saw their own message, because the send handler calls refetch() directly — the recipient saw nothing until they reloaded. Two stacked faults: the hooks subscribed without ever signing in to the realtime database, AND the `conversationIds` claim the security rule requires had no issuer anywhere (the token route only sent `chatIds`, from an unrelated collection). Both errors were swallowed, one into a literal `// ignore`. AFTER: open the same conversation as buyer in one browser and seller in another, send from one, and the other updates on its own. Test it from BOTH directions — testing only the sender's own window is what let this pass before.",
+                    href: "/user/messages",
+                },
+                {
+                    key: "message-live-updates-survive-bulk-job",
+                    label: "Running a bulk admin action while a message thread is open does not kill that thread's live updates",
+                    description: "Fixed 2026-08-28. BEFORE: the realtime app is a single shared connection, and finishing a bulk job signed it out globally — so an open chat or message thread silently stopped updating, and vice versa (opening a chat killed an in-flight bulk job's progress). AFTER: open a message thread, run any bulk action from an admin listing until it completes, then send a message from the other account — the thread must still update live without a reload.",
+                    href: "/user/messages",
+                },
                 { key: "messages-list-thread", label: "The messages list and individual thread view both load correctly", href: "/user/messages" },
             ],
         },

package/dist/next/api/routeHandler.js

@@ -32,6 +32,7 @@ import { NextResponse } from "next/server.js";
 import { getProviders } from "../../contracts";
 import { isEffectiveAdminUser } from "../../features/auth/role-predicates";
 import { mapToHttpError, HTTP_ERROR_CODES } from "../../errors/error-mapping";
+import { describeCauseChain } from "../../errors/describe-cause";
 import { buildErrorEnvelope, toApiIssues } from "../../errors/error-envelope";
 import { serverErrorsRepository } from "../../features/server-errors/repository/server-errors.repository";
 import { userRepository } from "../../repositories";
@@ -93,10 +94,17 @@ const LOG_AS_INCIDENT_CODES = new Set([
     HTTP_ERROR_CODES.PAYMENT_ROLLBACK_ATTEMPTED,
     HTTP_ERROR_CODES.PAYMENT_ROLLBACK_FAILED,
 ]);
-function shouldPersist(status, code) {
-    if (status >= 500)
+function shouldPersist(mapped) {
+    if (mapped.status >= 500)
         return true;
-    return LOG_AS_INCIDENT_CODES.has(code);
+    // Firestore itself refused. `permission-denied` (expired service-account
+    // key) and `resource-exhausted` (quota blown) map to 403/429, which sit
+    // below the 5xx threshold — so these were previously recorded nowhere.
+    // Keyed on provenance rather than code, because our own RBAC guard and rate
+    // limiter emit those same codes in normal operation.
+    if (mapped.infrastructure)
+        return true;
+    return LOG_AS_INCIDENT_CODES.has(mapped.code);
 }
 /**
  * Resolve the body schema for a createRouteHandler call. Accepts either a
@@ -282,16 +290,28 @@ export function createRouteHandler(options) {
             const mapped = mapToHttpError(err, {
                 isProduction: process.env.NODE_ENV === "production",
             });
-            // -- Persisted log (5xx + selected 4xx) --------------------------------
-            if (shouldPersist(mapped.status, mapped.code)) {
-                void serverErrorsRepository().record({
+            // -- Persisted log (5xx + infrastructure + selected 4xx) ---------------
+            // AWAITED, not fire-and-forget. `void record(...)` raced the response:
+            // the lambda can be frozen or reclaimed the moment we return, and
+            // `record()` swallows its own failures, so a lost write left no trace
+            // anywhere — indistinguishable from "the error never happened".
+            // `record()` is documented never to throw, so awaiting it cannot turn a
+            // logging failure into a request failure; the cost is one Firestore
+            // round-trip on an already-failed request.
+            if (shouldPersist(mapped)) {
+                await serverErrorsRepository().record({
                     source: "vercel",
                     route: new URL(request.url).pathname,
                     method: request.method,
                     ...(user?.uid ? { userId: user.uid } : {}),
                     code: mapped.code,
-                    message: mapped.message,
+                    // internalMessage ?? message — `mapped.message` is scrubbed to a
+                    // generic string for 5xx in production so it is safe to send to a
+                    // browser. The store must get the real one, or the scrub would have
+                    // traded a UI leak for blindness.
+                    message: mapped.internalMessage ?? mapped.message,
                     stack: err instanceof Error ? err.stack : undefined,
+                    cause: describeCauseChain(err),
                     requestId,
                     userAgent: request.headers.get("user-agent") ?? undefined,
                 });

package/dist/providers/db-firebase/base.repository.js

@@ -5,6 +5,17 @@ import { applySieveToFirestore, countSieveMatches, } from "./sieve";
 import { deserializeTimestamps, prepareForFirestore } from "./helpers";
 import { getAdminDb } from "./admin";
 import { encryptPiiFields, piiIndicesFor } from "../../security/pii-encrypt";
+/**
+ * The underlying failure's message, for interpolation into a DatabaseError.
+ *
+ * Every wrap below used to read `"Failed to update document: abc123"` and
+ * nothing else, so the persisted serverErrors row — whose `message` is what the
+ * admin list renders — said only which method failed, never why. `cause` now
+ * carries the stack, but a human scanning the list needs the reason on the row.
+ */
+function detailOf(error) {
+    return error instanceof Error ? error.message : String(error);
+}
 export class BaseRepository {
     constructor(collectionName) {
         /**
@@ -60,7 +71,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError(`Failed to find document by ID: ${id}`, error);
+            throw new DatabaseError(`Failed to find document by ID: ${id}: ${detailOf(error)}`, error);
         }
     }
     async findByIdOrFail(id) {
@@ -79,7 +90,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError(`Failed to find documents by ${field}`, error);
+            throw new DatabaseError(`Failed to find documents by ${field}: ${detailOf(error)}`, error);
         }
     }
     async findOneBy(field, value) {
@@ -95,7 +106,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError(`Failed to find document by ${field}`, error);
+            throw new DatabaseError(`Failed to find document by ${field}: ${detailOf(error)}`, error);
         }
     }
     async findAll(limit) {
@@ -109,7 +120,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError("Failed to fetch all documents", error);
+            throw new DatabaseError(`Failed to fetch all documents: ${detailOf(error)}`, error);
         }
     }
     /**
@@ -158,7 +169,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError("Failed to create document", error);
+            throw new DatabaseError(`Failed to create document: ${detailOf(error)}`, error);
         }
     }
     async createWithId(id, data) {
@@ -169,20 +180,20 @@ export class BaseRepository {
                 createdAt: now,
                 updatedAt: now,
             });
-            serverLogger.debug(`Creating document with ID: ${id} in collection: ${this.collection}`);
+            // No success-path logging. This emitted one debug + one info line for
+            // EVERY document written, against Rule #6's ~4 KB/s log budget, and the
+            // failure path below already carries everything the success path did.
             await this.getCollection().doc(id).set(cleanData);
-            serverLogger.info(`Document created successfully: ${id}`);
             const doc = await this.getCollection().doc(id).get();
             return this.mapDoc(doc);
         }
         catch (error) {
             void normalizeError(error);
-            serverLogger.error(`Failed to create document with ID: ${id}`, {
-                collection: this.collection,
-                error: error.message,
-                code: error.code,
-            });
-            throw new DatabaseError(`Failed to create document with ID: ${id}`, error);
+            // No serverLogger.error here either — this method was the only one of the
+            // ten wraps that logged AND rethrew, so its failures were recorded twice
+            // (once here, once by createRouteHandler), the first copy strictly less
+            // informative. The DatabaseError below now carries the same detail.
+            throw new DatabaseError(`Failed to create document with ID: ${id}: ${detailOf(error)}`, error);
         }
     }
     async update(id, data) {
@@ -196,7 +207,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError(`Failed to update document: ${id}`, error);
+            throw new DatabaseError(`Failed to update document: ${id}: ${detailOf(error)}`, error);
         }
     }
     async delete(id) {
@@ -205,7 +216,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError(`Failed to delete document: ${id}`, error);
+            throw new DatabaseError(`Failed to delete document: ${id}: ${detailOf(error)}`, error);
         }
     }
     async exists(id) {
@@ -215,7 +226,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError(`Failed to check document existence: ${id}`, error);
+            throw new DatabaseError(`Failed to check document existence: ${id}: ${detailOf(error)}`, error);
         }
     }
     /**
@@ -237,7 +248,7 @@ export class BaseRepository {
         }
         catch (error) {
             void normalizeError(error);
-            throw new DatabaseError("Failed to count documents", error);
+            throw new DatabaseError(`Failed to count documents: ${detailOf(error)}`, error);
         }
     }
     async sieveQuery(model, fields, options) {
@@ -298,7 +309,12 @@ export class BaseRepository {
             }
             catch (error) {
                 void normalizeError(error);
-                serverLogger.warn(`facetCounts: count failed for ${this.collection}.${field}==${value}; facet will stay visible`);
+                // ERROR, not warn, and WITH the error object. A count failing here is
+                // almost always a missing composite index — a permanent, silent
+                // degradation of every facet on the listing page, not a transient
+                // blip. Logging it at warn with no error attached meant the actual
+                // FAILED_PRECONDITION (which names the index to create) was discarded.
+                serverLogger.error(`facetCounts: count failed for ${this.collection}.${field}==${value}; facet will stay visible`, { collection: this.collection, field, value, error });
                 return [value, undefined];
             }
         }));

package/dist/react/hooks/useRealtimeEvent.js

@@ -2,6 +2,7 @@
 import { normalizeError } from "../../errors/normalize";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getClientRealtimeProvider, } from "../../contracts/client-realtime";
+import { acquireExternalRealtimeLease } from "../../contracts/realtime-session";
 import { RealtimeEventType, RealtimeEventStatus, RTDBPayloadStatus, } from "./realtime-event-constants";
 // Re-exported for existing client import paths — the canonical definitions
 // now live in realtime-event-constants.ts (a plain, non-"use client" module)
@@ -31,6 +32,8 @@ export function useRealtimeEvent(config) {
     const unsubscribeRef = useRef(null);
     const timeoutRef = useRef(null);
     const eventIdRef = useRef(null);
+    /** Lease on the shared realtime session — see cleanup() for why. */
+    const releaseSessionRef = useRef(null);
     const cleanup = useCallback(() => {
         if (unsubscribeRef.current) {
             unsubscribeRef.current();
@@ -40,10 +43,20 @@ export function useRealtimeEvent(config) {
             clearTimeout(timeoutRef.current);
             timeoutRef.current = null;
         }
-        const provider = configRef.current.realtimeProvider ?? getClientRealtimeProvider();
-        provider.signOut().catch(() => {
-            // no-op
-        });
+        // 🛑 Deliberately NO provider.signOut() here.
+        //
+        // `FirebaseClientRealtimeProvider` is a SINGLETON on the shared
+        // "letitrip-realtime" app, so signing out is a global act. When a bulk job
+        // finished, this line tore the session out from under any admin chat or
+        // conversation subscription that was still open — and in reverse, those
+        // channels' tokens overwrote an in-flight bulk token. Whoever finished
+        // last broke whoever was still working.
+        //
+        // Sessions are reference-counted now (contracts/realtime-session.ts); the
+        // release returned by `acquireRealtimeSession` is the only thing that may
+        // end one, and only once the last consumer has let go.
+        releaseSessionRef.current?.();
+        releaseSessionRef.current = null;
     }, []);
     const subscribe = useCallback((eventId, customToken) => {
         const { type, rtdbPath, realtimeProvider, timeoutMs = DEFAULT_TIMEOUT_MS, extractData, messages, onLogError, } = configRef.current;
@@ -60,6 +73,11 @@ export function useRealtimeEvent(config) {
         (async () => {
             try {
                 await provider.signInWithToken(customToken);
+                // Hold a lease for as long as this subscription lives. This hook owns
+                // its own sign-in (the token carries a job-scoped `bulkJobId` claim),
+                // but it must still participate in the ref-count so its cleanup
+                // cannot end a session another channel is relying on.
+                releaseSessionRef.current = acquireExternalRealtimeLease();
             }
             catch (authErr) {
                 void normalizeError(authErr);

package/dist/server.d.ts

@@ -6,6 +6,8 @@ export { SERVER_ERRORS_COLLECTION, SERVER_ERROR_FIELDS, SERVER_ERROR_STACK_MAX_B
 export type { ServerErrorDocument, ServerErrorSource, } from "./features/server-errors/schemas/firestore";
 export { wrapAction, isOk, unwrap, } from "./_internal/shared/types/action-result";
 export type { ActionResult } from "./_internal/shared/types/action-result";
+export { setActionErrorReporter, hasActionErrorReporter, } from "./_internal/shared/types/action-error-reporter";
+export type { ActionErrorReport, ActionErrorReporter, } from "./_internal/shared/types/action-error-reporter";
 export { attachPaymentProofAction, adminVerifyPaymentAction, adminRequestProofReuploadAction, adminRejectPaymentAsFraudAction, raiseOrderDisputeAction, } from "./_internal/server/features/orders/actions";
 export { wrapJobHandler, wrapScheduleHandler, wrapTriggerHandler, wrapCallableHandler, } from "./_internal/server/jobs/core/wrapJobHandler";
 export { analyzeLogs } from "./_internal/server/features/maintenance/analyze";

package/dist/server.js

@@ -11,6 +11,11 @@ export { SERVER_ERRORS_COLLECTION, SERVER_ERROR_FIELDS, SERVER_ERROR_STACK_MAX_B
 // [SERVER-ONLY] ActionResult envelope + wrapAction helper for "use server" functions.
 // Mirrors the routeHandler envelope so client wrappers consume both surfaces uniformly.
 export { wrapAction, isOk, unwrap, } from "./_internal/shared/types/action-result";
+// [SERVER-ONLY] Registration seam for recording server-action failures.
+// Must be called once from src/instrumentation.ts — see the module docstring
+// for why it is a hook rather than a direct import, and why it is registered
+// server-side rather than from a client bootstrap.
+export { setActionErrorReporter, hasActionErrorReporter, } from "./_internal/shared/types/action-error-reporter";
 // [SERVER-ONLY] P-1 manual payment proof server actions.
 export { attachPaymentProofAction, adminVerifyPaymentAction, adminRequestProofReuploadAction, adminRejectPaymentAsFraudAction, raiseOrderDisputeAction, } from "./_internal/server/features/orders/actions";
 // [SERVER-ONLY] Cloud Function handler wrappers — persist exceptions to