@mohasinac/appkit 4.27.0 → 4.28.0

package/dist/features/faq/repository/faqs.repository.js

@@ -2,6 +2,7 @@ import { BaseRepository, prepareForFirestore, parseSieveDateValue, } from "../..
 import { DatabaseError } from "../../../errors";
 import { increment } from "../../../contracts/field-ops";
 import { FAQ_FIELDS } from "../../../constants/field-names";
+import { buildSearchTxt, matchesAllSearchTerms, parseSearchTxtQuery, } from "../../../utils/search-txt";
 import { FAQS_COLLECTION, createFAQId, slugifyQuestion, } from "../schemas";
 export class FAQsRepository {
     constructor(repo) {
@@ -51,38 +52,39 @@ export class FAQsRepository {
         return this.repo.delete(id);
     }
 }
+/**
+ * FAQ `searchTxt`. Exported so the seed derives byte-identical tokens — the
+ * seed writes documents raw via batch.set() and never goes through this
+ * repository, which is exactly why all 63 seeded FAQs had no tokens at all.
+ *
+ * EVERY field is prefix-expanded, including the answer body. An earlier version
+ * whole-worded the body to protect the token budget, and a seed test caught what
+ * that costs: searching "ship" returned FEWER FAQs than "shipping", because an
+ * answer mentioning shipping had only the whole word indexed. Partial match that
+ * silently excludes the body is not partial match.
+ *
+ * Measured over the real seed corpus: max 449 tokens, average 200, nothing near
+ * the 600 cap — so nothing is truncated. Re-measure before reusing this shape on
+ * a long-form collection (blog posts), where bodies are far larger.
+ */
+export function buildFaqSearchTxt(input) {
+    const answer = typeof input.answer === "string" ? input.answer : (input.answer?.text ?? "");
+    return buildSearchTxt([
+        input.question,
+        input.category,
+        ...(input.tags ?? []),
+        answer.replace(/<[^>]+>/g, " "),
+    ]);
+}
 export class FirebaseFAQsRepository extends BaseRepository {
     constructor() {
         super(FAQS_COLLECTION);
     }
-    buildSearchTokens(input) {
-        const rawText = [
-            input.question,
-            typeof input.answer === "string" ? input.answer : input.answer?.text,
-            input.category,
-            ...(input.tags ?? []),
-        ]
-            .filter(Boolean)
-            .join(" ")
-            .toLowerCase();
-        return Array.from(new Set(rawText
-            .split(/[^a-z0-9]+/i)
-            .map((token) => token.trim())
-            .filter((token) => token.length >= 2))).slice(0, 50);
-    }
     async create(data) {
-        const searchTokens = this.buildSearchTokens({
-            question: data.question ?? "",
-            answer: data.answer ?? {
-                text: "",
-                format: "plain",
-            },
-            tags: data.tags ?? [],
-            category: (data.category ?? "general"),
-        });
+        const searchTxt = buildFaqSearchTxt(data);
         return super.create({
             ...data,
-            searchTokens,
+            searchTxt,
         });
     }
     async update(id, data) {
@@ -96,39 +98,52 @@ export class FirebaseFAQsRepository extends BaseRepository {
         };
         return super.update(id, {
             ...data,
-            searchTokens: this.buildSearchTokens({
-                question: merged.question,
-                answer: merged.answer,
-                tags: merged.tags ?? [],
-                category: merged.category,
-            }),
+            searchTxt: buildFaqSearchTxt(merged),
         });
     }
     async list(model, opts) {
         let baseQuery = this.getCollection();
         const tags = opts?.tags?.filter(Boolean) ?? [];
-        const searchTokens = (opts?.search ?? "")
-            .toLowerCase()
-            .split(/[^a-z0-9]+/i)
-            .map((token) => token.trim())
-            .filter((token) => token.length >= 2)
-            .slice(0, 10);
-        if (tags.length > 0 && searchTokens.length > 0) {
-            throw new DatabaseError("Combining FAQ tag filters and token search requires a dedicated search index");
+        // Longest term first — only ONE may become the array-contains clause
+        // (Firestore permits a single array operator per query), and the longest is
+        // the cheapest proxy for "narrows the most" without cardinality stats.
+        const terms = parseSearchTxtQuery(opts?.search ?? "");
+        const rawSearch = (opts?.search ?? "").trim();
+        // A query that produced no usable term must return NOTHING, not everything.
+        // The old guard dropped tokens under 2 characters, so a 1-character search
+        // silently fell through to the entire unfiltered list.
+        if (rawSearch && terms.length === 0) {
+            return { items: [], total: 0, page: 1, pageSize: 0, totalPages: 0, hasMore: false };
         }
-        if (tags.length === 1) {
+        // Firestore allows one array operator per query, so tags and search cannot
+        // both be pushed down. Search takes the clause and tags refine in memory —
+        // this used to throw a DatabaseError and fail the request outright.
+        const pushTags = terms.length === 0;
+        if (pushTags && tags.length === 1) {
             baseQuery = baseQuery.where(FAQ_FIELDS.TAGS, "array-contains", tags[0]);
         }
-        else if (tags.length > 1) {
+        else if (pushTags && tags.length > 1) {
             baseQuery = baseQuery.where(FAQ_FIELDS.TAGS, "array-contains-any", tags.slice(0, 10));
         }
-        if (searchTokens.length === 1) {
-            baseQuery = baseQuery.where(FAQ_FIELDS.SEARCH_TOKENS, "array-contains", searchTokens[0]);
+        if (terms.length > 0) {
+            baseQuery = baseQuery.where(FAQ_FIELDS.SEARCH_TXT, "array-contains", terms[0]);
         }
-        else if (searchTokens.length > 1) {
-            baseQuery = baseQuery.where(FAQ_FIELDS.SEARCH_TOKENS, "array-contains-any", searchTokens);
-        }
-        return this.sieveQuery(model, FirebaseFAQsRepository.SIEVE_FIELDS, { baseQuery });
+        const result = await this.sieveQuery(model, FirebaseFAQsRepository.SIEVE_FIELDS, { baseQuery });
+        // Refine the remaining terms (AND) and any tags that could not be pushed
+        // down. `array-contains-any` would have been OR — "shipping cost" returning
+        // everything matching either word is why search felt like it did nothing.
+        const extraTerms = terms.slice(1);
+        if (extraTerms.length === 0 && (pushTags || tags.length === 0))
+            return result;
+        const items = result.items.filter((faq) => matchesAllSearchTerms(faq.searchTxt, extraTerms) &&
+            (pushTags || tags.length === 0 || tags.some((t) => faq.tags?.includes(t))));
+        return {
+            ...result,
+            items,
+            total: items.length,
+            totalPages: items.length === 0 ? 0 : 1,
+            hasMore: false,
+        };
     }
     async getFAQBySlug(slug) {
         const snapshot = await this.db
@@ -248,12 +263,7 @@ export class FirebaseFAQsRepository extends BaseRepository {
                 ...input.seo,
                 slug,
             },
-            searchTokens: this.buildSearchTokens({
-                question: input.question,
-                answer: input.answer,
-                tags: input.tags ?? [],
-                category: input.category,
-            }),
+            searchTxt: buildFaqSearchTxt(input),
             stats: {
                 views: 0,
                 helpful: 0,
@@ -293,7 +303,7 @@ FirebaseFAQsRepository.SIEVE_FIELDS = {
     order: { canFilter: true, canSort: true },
     priority: { canFilter: true, canSort: true },
     tags: { canFilter: true, canSort: false },
-    searchTokens: { canFilter: true, canSort: false },
+    searchTxt: { canFilter: true, canSort: false },
     "stats.helpful": { canFilter: false, canSort: true },
     createdAt: { canFilter: true, canSort: true, parseValue: parseSieveDateValue },
 };

package/dist/features/faq/schemas/firestore.d.ts

@@ -19,7 +19,8 @@ export interface FAQDocument extends BaseDocument {
     order: number;
     priority: number;
     tags: string[];
-    searchTokens?: string[];
+    /** Normalized edge-n-gram search field. Replaced `searchTokens`. */
+    searchTxt?: string[];
     relatedFAQs: string[];
     useSiteSettings: boolean;
     variables?: Record<string, string>;
@@ -31,7 +32,7 @@ export interface FAQDocument extends BaseDocument {
     createdBy: string;
 }
 export declare const FAQS_COLLECTION: "faqs";
-export declare const FAQS_INDEXED_FIELDS: readonly ["slug", "seo.slug", "category", "order", "showOnHomepage", "showInFooter", "isPinned", "priority", "tags", "searchTokens", "isActive", "stats.helpful", "createdBy", "createdAt"];
+export declare const FAQS_INDEXED_FIELDS: readonly ["slug", "seo.slug", "category", "order", "showOnHomepage", "showInFooter", "isPinned", "priority", "tags", "searchTxt", "isActive", "stats.helpful", "createdBy", "createdAt"];
 export declare const FAQ_CATEGORY_LABELS: Record<FAQCategory, string>;
 export declare const DEFAULT_FAQ_DATA: Partial<FAQDocument>;
 export declare const FAQS_PUBLIC_FIELDS: readonly ["id", "question", "answer", "category", "showOnHomepage", "showInFooter", "isPinned", "order", "priority", "tags", "relatedFAQs", "stats.views", "stats.helpful", "stats.notHelpful", "seo.slug", "seo.metaTitle", "seo.metaDescription", "isActive", "createdAt"];

package/dist/features/faq/schemas/firestore.js

@@ -13,7 +13,7 @@ export const FAQS_INDEXED_FIELDS = [
     "isPinned",
     "priority",
     "tags",
-    "searchTokens",
+    "searchTxt",
     "isActive",
     "stats.helpful",
     "createdBy",
@@ -36,7 +36,7 @@ export const DEFAULT_FAQ_DATA = {
     order: 0,
     priority: 0,
     tags: [],
-    searchTokens: [],
+    searchTxt: [],
     relatedFAQs: [],
     useSiteSettings: true,
     variables: {},

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

@@ -228,7 +228,7 @@ export declare const faqFirestoreSchema: z.ZodObject<{
     order: z.ZodNumber;
     priority: z.ZodNumber;
     tags: z.ZodArray<z.ZodString, "many">;
-    searchTokens: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    searchTxt: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     relatedFAQs: z.ZodArray<z.ZodString, "many">;
     useSiteSettings: z.ZodBoolean;
     variables: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
@@ -310,7 +310,7 @@ export declare const faqFirestoreSchema: z.ZodObject<{
         metaTitle?: string | undefined;
         metaDescription?: string | undefined;
     };
-    searchTokens?: string[] | undefined;
+    searchTxt?: string[] | undefined;
     variables?: Record<string, string> | undefined;
 }, {
     id: string;
@@ -349,7 +349,7 @@ export declare const faqFirestoreSchema: z.ZodObject<{
         metaTitle?: string | undefined;
         metaDescription?: string | undefined;
     };
-    searchTokens?: string[] | undefined;
+    searchTxt?: string[] | undefined;
     variables?: Record<string, string> | undefined;
 }>;
 export type FAQFromSchema = z.infer<typeof faqFirestoreSchema>;

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

@@ -85,7 +85,7 @@ export const faqFirestoreSchema = z.object({
     order: z.number().int(),
     priority: z.number().int(),
     tags: z.array(z.string()),
-    searchTokens: z.array(z.string()).optional(),
+    searchTxt: z.array(z.string()).optional(),
     relatedFAQs: z.array(z.string()),
     useSiteSettings: z.boolean(),
     variables: z.record(z.string(), z.string()).optional(),

package/dist/features/filters/FilterFacetSection.js

@@ -77,9 +77,9 @@ export function FilterFacetSection({ title, options, selected, onChange, selecti
     if (displayAs === "dropdown") {
         return (_jsxs(Div, { ref: dropdownRef, className: cn("relative inline-block", className), children: [_jsxs(Button, { type: "button", onClick: () => setDropdownOpen((o) => !o), variant: "ghost", className: cn("inline-flex items-center gap-[var(--appkit-space-1-5)] rounded-full border px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium transition-colors", hasValue
                         ? CLS_OPTION_SELECTED
-                        : "border-zinc-200 bg-[var(--appkit-color-surface)] text-zinc-700 hover:border-zinc-400 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-border)]"), children: [title, hasValue && (_jsx(Span, { weight: "bold", className: CLS_OPTION_DOT, children: selected.length })), _jsx("svg", { className: cn("h-3.5 w-3.5 text-zinc-400 transition-transform", dropdownOpen ? "rotate-180" : ""), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), dropdownOpen && (_jsxs(Div, { className: "absolute left-0 top-full z-[var(--appkit-z-dropdown,50)] mt-1 min-w-[180px] max-w-[260px]", surface: "default", rounded: "xl", shadow: "lg", border: "default", children: [searchable && (_jsx(Div, { border: "subtle", className: "border-b", padding: "xs", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border px-[var(--appkit-space-2)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] focus:outline-none border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] text-[var(--appkit-color-text)]" }) })), _jsxs(Div, { className: `max-h-56 ${__O.yAuto}`, padding: "y-2xs", children: [filtered.map((option) => {
+                        : " bg-[var(--appkit-color-surface)] hover:border-zinc-400 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-border)]"), children: [title, hasValue && (_jsx(Span, { weight: "bold", className: CLS_OPTION_DOT, children: selected.length })), _jsx("svg", { className: cn("h-3.5 w-3.5 text-zinc-400 transition-transform", dropdownOpen ? "rotate-180" : ""), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), dropdownOpen && (_jsxs(Div, { className: "absolute left-0 top-full z-[var(--appkit-z-dropdown,50)] mt-1 min-w-[180px] max-w-[260px]", surface: "default", rounded: "xl", shadow: "lg", border: "default", children: [searchable && (_jsx(Div, { border: "subtle", className: "border-b", padding: "xs", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border px-[var(--appkit-space-2)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] focus:outline-none border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] text-[var(--appkit-color-text)]" }) })), _jsxs(Div, { className: `max-h-56 ${__O.yAuto}`, padding: "y-2xs", children: [filtered.map((option) => {
                                     const isSelected = selected.includes(option.value);
-                                    return (_jsxs(Row, { gap: "xs", className: "cursor-pointer py-[0.375rem] hover:bg-[var(--appkit-color-bg)] mx-1", padding: "x-sm", rounded: "lg", onClick: () => toggle(option.value), children: [_jsx(Checkbox, { bare: true, type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: "h-3.5 w-3.5 flex-shrink-0 cursor-pointer rounded border-zinc-300 text-primary-600 border-[var(--appkit-color-border)] dark:text-secondary-500" }), _jsx(Span, { size: "xs", className: "flex-1 truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { className: "flex-shrink-0 text-[10px] tabular-nums", color: "faint", children: option.count }))] }, option.value));
+                                    return (_jsxs(Row, { gap: "xs", className: "cursor-pointer py-[0.375rem] hover:bg-[var(--appkit-color-bg)] mx-1", padding: "x-sm", rounded: "lg", onClick: () => toggle(option.value), children: [_jsx(Checkbox, { bare: true, type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: "h-3.5 w-3.5 flex-shrink-0 cursor-pointer rounded text-primary-600 border-[var(--appkit-color-border)] dark:text-secondary-500" }), _jsx(Span, { size: "xs", className: "flex-1 truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { className: "flex-shrink-0 text-[10px] tabular-nums", color: "faint", children: option.count }))] }, option.value));
                                 }), filtered.length === 0 && (_jsx(Text, { paddingY: "xs", paddingX: "x-sm", color: "faint", size: "xs", children: "No results" }))] }), hasValue && (_jsx(Div, { border: "subtle", className: "border-t p-[0.25rem]", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, onClick: () => { onChange([]); onClear?.(); setDropdownOpen(false); }, children: "Clear" }) }))] }))] }));
     }
     // ── Accordion variant (default) ─────────────────────────────────────────

package/dist/features/forms/Toggle.js

@@ -45,7 +45,7 @@ export function Toggle({ checked: controlledChecked, defaultChecked = false, onC
     const cfg = SIZE_CONFIG[size];
     return (_jsxs(Row, { className: cn("gap-3", className), children: [_jsx(Button, { type: "button", role: "switch", id: toggleId, "aria-checked": checked, disabled: disabled, onClick: handleChange, className: cn("relative inline-flex items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500/30 dark:focus:ring-secondary-400/30 focus:ring-offset-2 dark:focus:ring-offset-slate-900", cfg.track, checked
                     ? "bg-primary-600 dark:bg-secondary-500"
-                    : "bg-zinc-200 bg-[var(--appkit-color-border)]", disabled && "opacity-50 cursor-not-allowed"), children: _jsx(Span, { className: cn("inline-block rounded-full bg-[var(--appkit-color-surface)] shadow-sm transition-transform duration-200", cfg.thumb, checked ? cfg.translateOn : cfg.translateOff) }) }), label && (_jsx("label", { htmlFor: toggleId, className: cn("text-sm font-medium cursor-pointer select-none", checked
+                    : " bg-[var(--appkit-color-border)]", disabled && "opacity-50 cursor-not-allowed"), children: _jsx(Span, { className: cn("inline-block rounded-full bg-[var(--appkit-color-surface)] shadow-sm transition-transform duration-200", cfg.thumb, checked ? cfg.translateOn : cfg.translateOff) }) }), label && (_jsx("label", { htmlFor: toggleId, className: cn("text-sm font-medium cursor-pointer select-none", checked
                     ? "text-[var(--appkit-color-text)]"
                     : "text-[var(--appkit-color-text-muted)]", disabled && "opacity-50 cursor-not-allowed"), children: label }))] }));
 }

package/dist/features/grouped/components/GroupedListingEditorView.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+type Scope = "admin" | "store";
+export interface GroupedListingEditorViewProps {
+    scope: Scope;
+    /** Present → edit that group; absent → create a new one. */
+    groupId?: string;
+    /**
+     * Store the group belongs to. Required for admin CREATE (an admin owns no
+     * store, so there is nothing to derive it from); ignored on the seller side,
+     * where the route reads it from the session and a body value would let a
+     * seller file a group under someone else's store.
+     */
+    fixedStoreId?: string;
+    onSaved?: (id: string) => void;
+    onCancel?: () => void;
+}
+export declare function GroupedListingEditorView({ scope, groupId, fixedStoreId, onSaved, onCancel, }: GroupedListingEditorViewProps): React.JSX.Element;
+export {};

package/dist/features/grouped/components/GroupedListingEditorView.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * WHY: There were TWO hand-rolled grouped-listing forms (the seller's `new` and
+ *      `[id]/edit` pages), between them covering 5 of the entity's 8 fields —
+ *      `productIds` was hardcoded to `[]` on create, and `minActiveMembers` and
+ *      `coverImage` could not be set anywhere at all. Admin had no form.
+ * WHAT: One editor for both portals, deriving its sections from
+ *       `groupedListingFormSchema` so a field added to the schema appears here
+ *       without a second edit.
+ *
+ * ## The admin API was the blocker, not this component
+ *
+ * Pointing an editor at the admin endpoints used to give: create → 405 (there
+ * was no admin POST), and every save of `title`/`groupTheme`/`isActive` → a
+ * 200 that wrote nothing, because the admin PATCH schema was
+ * `z.object({ productIds })` and `z.object()` strips unknown keys. That is
+ * Root Cause #40's exact shape — a success response is what the broken version
+ * returns, so only a reload reveals it. Both were fixed alongside this file;
+ * an `endpointOverride` on the seller form could never have worked.
+ *
+ * ## Two fields are overridden, the other six are derived
+ *
+ * `productIds` needs the real product search (`ProductInlineSelect`), and admin
+ * create needs a store picker — a grouped listing is store-owned and the seller
+ * route takes `storeId` from the session, which an admin has no equivalent of.
+ * Everything else comes from `buildSectionsFromSchema`.
+ *
+ * EXPORTS: GroupedListingEditorView, type GroupedListingEditorViewProps
+ *
+ * @tag domain:grouped
+ * @tag layer:feature
+ * @tag pattern:slot-shell
+ * @tag access:client
+ * @tag consumers:admin/grouped-listings pages,store/grouped-listings pages
+ * @tag sideEffects:network
+ */
+import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { Stack, Text, useToast } from "../../../ui";
+import { FieldSelect, FormShellContext, FormErrorSummary, applyZodIssues, useFormShellState, } from "../../../ui/forms";
+import { SectionForm, useSectionFormNav } from "../../shell";
+import { buildSectionsFromSchema } from "../../shell/build-sections";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS, SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../next/routing/route-map";
+import { normalizeError } from "../../../errors/normalize";
+import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
+import { groupedListingFormSchema, } from "../schemas/grouped-listing-form";
+const EMPTY = {
+    title: "",
+    description: "",
+    groupTheme: "generic",
+    productIds: [],
+    minActiveMembers: 1,
+    coverImage: "",
+    isActive: true,
+    isFeatured: false,
+};
+export function GroupedListingEditorView({ scope, groupId, fixedStoreId, onSaved, onCancel, }) {
+    const router = useRouter();
+    const { showToast } = useToast();
+    const isEdit = Boolean(groupId);
+    const isAdmin = scope === "admin";
+    const listEndpoint = isAdmin ? ADMIN_ENDPOINTS.GROUPED_LISTINGS : SELLER_ENDPOINTS.GROUPED_LISTINGS;
+    const byIdEndpoint = isAdmin
+        ? ADMIN_ENDPOINTS.GROUPED_LISTING_BY_ID
+        : SELLER_ENDPOINTS.GROUPED_LISTING_BY_ID;
+    const [values, setValues] = React.useState(EMPTY);
+    const [storeId, setStoreId] = React.useState(fixedStoreId ?? "");
+    const [saving, setSaving] = React.useState(false);
+    /*
+     * Seeded from the single-item GET, never from a cached list row — a list
+     * projection is narrower than the document, and an editor seeded from one
+     * re-sends the fields it never received as their defaults (Root Cause #38).
+     */
+    const existing = useQuery({
+        queryKey: [scope, "grouped-listing", groupId],
+        queryFn: async () => {
+            const res = await apiClient.get(byIdEndpoint(groupId));
+            const body = res?.data ?? res;
+            // The admin GET wraps in `{ item }`; the seller GET returns the doc.
+            return (body?.item ?? body);
+        },
+        enabled: isEdit,
+    });
+    // Admin create only: an admin has no session store to derive the owner from.
+    const stores = useQuery({
+        queryKey: ["admin", "grouped-listing-editor", "stores"],
+        queryFn: async () => {
+            const res = await apiClient.get(`${ADMIN_ENDPOINTS.STORES}?pageSize=200&sorts=storeName`);
+            const body = res?.data ?? res;
+            return (body?.items ?? []);
+        },
+        enabled: isAdmin && !isEdit && !fixedStoreId,
+    });
+    React.useEffect(() => {
+        const doc = existing.data;
+        if (!doc)
+            return;
+        setValues({
+            title: String(doc.title ?? ""),
+            description: String(doc.description ?? ""),
+            groupTheme: doc.groupTheme ?? "generic",
+            productIds: Array.isArray(doc.productIds) ? doc.productIds.map(String) : [],
+            minActiveMembers: Number(doc.minActiveMembers ?? 1),
+            coverImage: String(doc.coverImage ?? ""),
+            isActive: doc.isActive !== false,
+            isFeatured: doc.isFeatured === true,
+        });
+        if (doc.storeId)
+            setStoreId(String(doc.storeId));
+    }, [existing.data]);
+    const update = React.useCallback((partial) => {
+        setValues((prev) => ({ ...prev, ...partial }));
+    }, []);
+    const needsStorePicker = isAdmin && !isEdit && !fixedStoreId;
+    const sections = React.useMemo(() => buildSectionsFromSchema(groupedListingFormSchema, {
+        renderers: {
+            productIds: ({ values: v, onChange }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(ProductInlineSelect, { scope: scope, multiple: true, value: v.productIds ?? [], onChange: (ids) => onChange({ productIds: ids }), placeholder: "Search products to add\u2026" }), _jsxs(Text, { size: "xs", color: "muted", children: [(v.productIds ?? []).length, " product", (v.productIds ?? []).length === 1 ? "" : "s", " in this group."] })] })),
+        },
+    }), [scope]);
+    /*
+     * The nav seam — without it `FormErrorSummary`'s "jump to section" resolves
+     * to undefined, which is what it did for every form before W0.
+     */
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, values);
+    const { shellCtx, setFieldError, validate } = useFormShellState(groupedListingFormSchema, {
+        sections: sectionMeta,
+        onGoToSection: goToSection,
+        fieldToSectionIndex,
+    });
+    React.useEffect(() => {
+        validate(values);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [values, validate]);
+    const handleSubmit = async () => {
+        const parsed = groupedListingFormSchema.safeParse(values);
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        if (needsStorePicker && !storeId) {
+            showToast("Pick the store this group belongs to.", "error");
+            return;
+        }
+        setSaving(true);
+        try {
+            if (isEdit) {
+                await apiClient.patch(byIdEndpoint(groupId), parsed.data);
+            }
+            else {
+                /*
+                 * `storeId` is sent ONLY by admin. The seller route derives it from the
+                 * session and rejects it in the body, which is what stops a seller
+                 * filing a group under another store.
+                 */
+                const payload = isAdmin ? { ...parsed.data, storeId } : parsed.data;
+                const res = await apiClient.post(listEndpoint, payload);
+                const created = res?.data?.id;
+                if (created && onSaved) {
+                    showToast("Group created.", "success");
+                    onSaved(created);
+                    return;
+                }
+            }
+            showToast(isEdit ? "Group updated." : "Group created.", "success");
+            if (onSaved)
+                onSaved(groupId ?? "");
+            else
+                router.push(String(isAdmin ? ROUTES.ADMIN.GROUPED_LISTINGS : ROUTES.STORE.GROUPED_LISTINGS));
+        }
+        catch (err) {
+            const e = normalizeError(err);
+            showToast(e.message || "Failed to save the group.", "error");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    if (isEdit && existing.isLoading) {
+        return _jsx(Text, { color: "muted", children: "Loading\u2026" });
+    }
+    return (_jsxs(Stack, { gap: "md", children: [needsStorePicker ? (_jsx(FieldSelect, { name: "storeId", label: "Store", required: true, value: storeId, onChange: setStoreId, options: [
+                    { value: "", label: "Select a store…" },
+                    ...(stores.data ?? []).map((s) => ({
+                        value: s.id,
+                        label: s.storeName ?? s.id,
+                    })),
+                ] })) : null, _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: values, onChange: update, onSubmit: handleSubmit, schema: groupedListingFormSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: isEdit ? "Save changes" : "Create group", isLoading: saving, onCancel: onCancel })] })] }));
+}

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

@@ -11,8 +11,8 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const CLS_GRADIENT_BG = "absolute inset-0 bg-[image:var(--appkit-gradient-promotion)]";
-const CLS_CTA_BTN_SM = "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface)] text-indigo-700 hover:bg-zinc-50 dark:hover:bg-zinc-200 font-semibold gap-[var(--appkit-space-1-5)] flex-shrink-0";
-const CLS_CTA_BTN_LG = "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface)] text-indigo-700 hover:bg-zinc-50 dark:hover:bg-zinc-200 font-semibold shadow-lg gap-[var(--appkit-space-2)]";
+const CLS_CTA_BTN_SM = "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface)] text-indigo-700 hover:bg-surface-hover font-semibold gap-[var(--appkit-space-1-5)] flex-shrink-0";
+const CLS_CTA_BTN_LG = "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface)] text-indigo-700 hover:bg-surface-hover font-semibold shadow-lg gap-[var(--appkit-space-2)]";
 // --- Constants ---------------------------------------------------------------
 const CLS_CONTAINER = "w-full max-w-7xl mx-auto";
 // --- Component ---------------------------------------------------------------

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

@@ -29,7 +29,7 @@ function BrandLogo({ brand }) {
     const iconSrc = brand.display?.icon;
     const coverImage = brand.display?.coverImage;
     const initial = brand.name[0]?.toUpperCase() ?? "?";
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-32 w-36 flex-col items-center justify-center gap-[var(--appkit-space-2)] rounded-xl border border-zinc-200 bg-[var(--appkit-color-surface)] p-[var(--appkit-space-3)] shadow-sm transition-all hover:border-primary-300 hover:shadow-md border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] md:h-40", children: [iconSrc || coverImage ? (_jsx(Image, { src: resolveMediaUrl(iconSrc ?? coverImage), alt: brand.name, width: 64, height: 64, className: "h-16 w-16 rounded object-contain" })) : (_jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-16 w-16 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: initial })), _jsx(Text, { className: "w-full truncate", color: "muted", size: "xs", weight: "medium", align: "start", children: brand.name })] }));
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-32 w-36 flex-col items-center justify-center gap-[var(--appkit-space-2)] rounded-xl border bg-[var(--appkit-color-surface)] p-[var(--appkit-space-3)] shadow-sm transition-all hover:border-primary-300 hover:shadow-md border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] md:h-40", children: [iconSrc || coverImage ? (_jsx(Image, { src: resolveMediaUrl(iconSrc ?? coverImage), alt: brand.name, width: 64, height: 64, className: "h-16 w-16 rounded object-contain" })) : (_jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-16 w-16 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: initial })), _jsx(Text, { className: "w-full truncate", color: "muted", size: "xs", weight: "medium", align: "start", children: brand.name })] }));
 }
 export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, cta, filters, autoScroll = true, scrollInterval = 4000, loop = true, }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY };

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

@@ -3,5 +3,5 @@ import Link from "next/link";
 import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 export function CTABannerSection({ title = "Thousands of collectibles. One marketplace.", subtitle, primaryLabel = "Shop All Products →", primaryHref = String(ROUTES.PUBLIC.PRODUCTS), secondaryLabel = "Browse Auctions →", secondaryHref = String(ROUTES.PUBLIC.AUCTIONS), className = "", }) {
-    return (_jsx(Section, { tone: "accent-banner", className: `${className}`, paddingY: "y-4xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-3xl text-left", children: [_jsx(Span, { className: "mb-4 inline-block", size: "2xl", "aria-hidden": "true", children: "\u2728" }), _jsx(Heading, { color: "inverse", level: 2, mdSize: "3xl", lgSize: "4xl", size: "2xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { color: "inverse", className: "mt-3 /80", size: "base", children: subtitle })), _jsxs(Row, { className: "mt-8", align: "center", justify: "start", gap: "md", wrap: true, children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-[var(--appkit-space-8)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-semibold text-primary-700 shadow-sm transition-all hover:bg-zinc-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-[var(--appkit-space-8)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] }) }));
+    return (_jsx(Section, { tone: "accent-banner", className: `${className}`, paddingY: "y-4xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-3xl text-left", children: [_jsx(Span, { className: "mb-4 inline-block", size: "2xl", "aria-hidden": "true", children: "\u2728" }), _jsx(Heading, { color: "inverse", level: 2, mdSize: "3xl", lgSize: "4xl", size: "2xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { color: "inverse", className: "mt-3 /80", size: "base", children: subtitle })), _jsxs(Row, { className: "mt-8", align: "center", justify: "start", gap: "md", wrap: true, children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-[var(--appkit-space-8)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-semibold text-primary-700 shadow-sm transition-all hover:bg-surface-hover hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-[var(--appkit-space-8)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] }) }));
 }

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

@@ -5,5 +5,5 @@ import { useHomepageReviews } from "../hooks/useHomepageReviews";
 import { ReviewCard } from "../../reviews/components";
 export function HomepageCustomerReviewsSection({ title = "What Our Customers Say", subtitle, viewMoreHref, viewMoreLabel = "See all reviews →", className = "", autoScroll = true, scrollInterval = 4500, loop = true, }) {
     const { data: reviews = [], isLoading } = useHomepageReviews();
-    return (_jsx(CustomerReviewsSection, { title: title, subtitle: subtitle, items: reviews, renderItem: (review) => (_jsx(ReviewCard, { review: review, className: "h-full border-zinc-200 shadow-sm border-[var(--appkit-color-border)]" })), viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, isLoading: isLoading, keyExtractor: (review) => review.id, className: className, autoScroll: autoScroll, scrollInterval: scrollInterval, loop: loop }));
+    return (_jsx(CustomerReviewsSection, { title: title, subtitle: subtitle, items: reviews, renderItem: (review) => (_jsx(ReviewCard, { review: review, className: "h-full shadow-sm border-[var(--appkit-color-border)]" })), viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, isLoading: isLoading, keyExtractor: (review) => review.id, className: className, autoScroll: autoScroll, scrollInterval: scrollInterval, loop: loop }));
 }

package/dist/features/homepage/components/HomepageSectionBoundary.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Crash containment for a single homepage section.
+ *
+ * The homepage renders ~26 independently-fetched sections. Before this existed,
+ * a throw inside ANY one of them propagated to `[locale]/error.tsx` and replaced
+ * the entire page with "Something went wrong" — which is exactly what one bad
+ * import in `PrizeDrawsSection` did in production on 2026-08-26.
+ *
+ * A section is not load-bearing for the page. Losing one should cost that strip
+ * and nothing else, so the fallback renders NOTHING: a visitor sees a homepage
+ * missing one row instead of a homepage that is entirely an error message.
+ *
+ * The failure is still reported — `ErrorBoundary` calls `trackError`, which the
+ * app wires to the client-error beacon, so the row lands in `serverErrors` and
+ * shows up at /admin/maintenance/server-errors. Silent to the visitor, loud to
+ * the operator; the inverse would be the Root Cause #59 swallow.
+ *
+ * `sectionId` is a plain string on purpose. This is a Client Component rendered
+ * from a Server Component, so a function prop (e.g. `onError`) would not be
+ * serialisable across that boundary.
+ */
+import { Component, type ErrorInfo, type ReactNode } from "react";
+export interface HomepageSectionBoundaryProps {
+    /** Homepage section document id — identifies the strip in the error report. */
+    sectionId: string;
+    /** Section type, e.g. "prize-draws". */
+    sectionType: string;
+    children: ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+export declare class HomepageSectionBoundary extends Component<HomepageSectionBoundaryProps, State> {
+    constructor(props: HomepageSectionBoundaryProps);
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

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

@@ -0,0 +1,49 @@
+"use client";
+/**
+ * Crash containment for a single homepage section.
+ *
+ * The homepage renders ~26 independently-fetched sections. Before this existed,
+ * a throw inside ANY one of them propagated to `[locale]/error.tsx` and replaced
+ * the entire page with "Something went wrong" — which is exactly what one bad
+ * import in `PrizeDrawsSection` did in production on 2026-08-26.
+ *
+ * A section is not load-bearing for the page. Losing one should cost that strip
+ * and nothing else, so the fallback renders NOTHING: a visitor sees a homepage
+ * missing one row instead of a homepage that is entirely an error message.
+ *
+ * The failure is still reported — `ErrorBoundary` calls `trackError`, which the
+ * app wires to the client-error beacon, so the row lands in `serverErrors` and
+ * shows up at /admin/maintenance/server-errors. Silent to the visitor, loud to
+ * the operator; the inverse would be the Root Cause #59 swallow.
+ *
+ * `sectionId` is a plain string on purpose. This is a Client Component rendered
+ * from a Server Component, so a function prop (e.g. `onError`) would not be
+ * serialisable across that boundary.
+ */
+import { Component } from "react";
+import { trackError, ErrorCategory, ErrorSeverity, } from "../../../monitoring/error-tracking";
+export class HomepageSectionBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        trackError(error, ErrorCategory.UI, ErrorSeverity.HIGH, {
+            component: "HomepageSection",
+            metadata: {
+                sectionId: this.props.sectionId,
+                sectionType: this.props.sectionType,
+                componentStack: errorInfo.componentStack ?? null,
+                digest: error.digest ?? null,
+            },
+        });
+    }
+    render() {
+        if (this.state.hasError)
+            return null;
+        return this.props.children;
+    }
+}