@mohasinac/appkit 4.58.0 → 4.60.0

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Create or edit a brand.
  *
@@ -20,7 +20,8 @@ import { useQuery } from "@tanstack/react-query";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { apiClient } from "../../../http/index.js";
-import { ConfirmDeleteModal, Div, StackedViewShell, useToast } from "../../../ui/index.js";
+import { ConfirmDeleteModal, Div, Input, StackedViewShell, Textarea, useToast } from "../../../ui/index.js";
+import { Repeater } from "../../../ui/components/Repeater.js";
 import { applyZodIssues } from "../../../ui/forms/apply-zod-issues.js";
 import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary.js";
 import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell.js";
@@ -41,6 +42,8 @@ const EMPTY = {
     founded: "",
     isActive: true,
     displayOrder: "",
+    highlightsText: "",
+    faqs: [],
 };
 function toBrandSlug(str) {
     const base = str
@@ -82,6 +85,8 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
             founded: brand.founded !== undefined ? String(brand.founded) : "",
             isActive: brand.isActive ?? true,
             displayOrder: brand.displayOrder !== undefined ? String(brand.displayOrder) : "",
+            highlightsText: (brand.highlights ?? []).join("\n"),
+            faqs: brand.faqs ?? [],
         });
     }, [brandQuery.data]);
     const sections = React.useMemo(() => buildSectionsFromSchema(brandFormSchema, {
@@ -90,6 +95,16 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
                     type: "brand-logo",
                     brand: values.name || values.slug,
                 }), onChange: (url) => onChange({ logoURL: url }) })),
+            /*
+             * The FAQ rows. `Repeater` is the one promoted out of
+             * `AdminCategoryEditorView` on the condition its own author set —
+             * "promote it when a fourth caller appears outside this file" — so
+             * this is that caller rather than a second implementation.
+             */
+            faqs: ({ values, onChange }) => {
+                const rows = values.faqs ?? [];
+                return (_jsx(Repeater, { rows: rows, onChange: (next) => onChange({ faqs: next }), blank: () => ({ question: "", answer: "" }), addLabel: "Add a question", max: 8, renderRow: (row, set) => (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Question", value: row.question, onChange: (e) => set({ question: e.target.value }), placeholder: "Are Takara-Tomy releases region-locked?" }), _jsx(Textarea, { label: "Answer", rows: 3, value: row.answer, onChange: (e) => set({ answer: e.target.value }) })] })) }));
+            },
         },
     }), [upload]);
     const nav = useSectionFormNav(sections, form, { scope: "admin:brand-editor" });
@@ -112,6 +127,21 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
                 founded: optionalNumber(form.founded),
                 isActive: form.isActive,
                 displayOrder: optionalNumber(form.displayOrder),
+                /*
+                 * 🛑 Sent even when EMPTY, which is what makes "remove the last
+                 * highlight" work. The mapper tests `!== undefined`, so an empty
+                 * array clears the list; omitting the key instead would leave the
+                 * stored value untouched and the admin unable to delete what they
+                 * can see.
+                 *
+                 * Blank lines and whitespace-only rows are dropped rather than
+                 * stored — an empty bullet renders as a gap on the brand page.
+                 */
+                highlights: form.highlightsText
+                    .split("\n")
+                    .map((l) => l.trim())
+                    .filter((l) => l.length > 0),
+                faqs: form.faqs.filter((f) => f.question.trim() && f.answer.trim()),
             };
             if (isEdit)
                 return apiClient.put(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId), payload);

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

@@ -134,7 +134,7 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "a
              * would have written that blank over a live bundle.
              *
              * Verified in production 2026-10-02: /admin/bundles/
-             * bundle-every-generation-starter-pack/edit polled for 14s with
+             * bundle-x-bx53-complete/edit polled for 14s with
              * `input[name="name"]` and `input[name="priceRupees"]` both `""` and no
              * member count, while `GET /api/admin/bundles/{id}` returned 200 with the
              * real bundle (`{ success, data: <bundle> }`, no nested `data`). I did not

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

@@ -76,7 +76,7 @@ function ZonePicker({ selected, onChange, disabled, }) {
 // ── Background Editor ────────────────────────────────────────────────────────
 function BackgroundEditor({ value, onChange, }) {
     const set = (patch) => onChange({ ...value, ...patch });
-    return (_jsxs(Stack, { gap: "3", children: [_jsx(Select, { label: "Background type", value: value.type, onChange: (e) => onChange({ type: e.target.value }), options: BG_TYPE_OPTIONS }), (value.type === "image" || value.type === "video") && (_jsxs(_Fragment, { children: [_jsx(Input, { label: `${value.type === "image" ? "Image" : "Video"} URL`, value: value.url ?? "", onChange: (e) => set({ url: e.target.value }), placeholder: "https://..." }), _jsx(Input, { label: "Mobile URL (optional)", value: value.mobileUrl ?? "", onChange: (e) => set({ mobileUrl: e.target.value || undefined }), placeholder: "https://... (portrait crop)" }), value.type === "video" && (_jsx(Input, { label: "Poster / thumbnail URL", value: value.thumbnail ?? "", onChange: (e) => set({ thumbnail: e.target.value || undefined }), placeholder: "https://..." })), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "lg", border: "default", children: [_jsx(Toggle, { label: "Dim overlay", checked: value.dimOverlay?.enabled ?? false, onChange: (v) => set({ dimOverlay: { enabled: v, opacity: value.dimOverlay?.opacity ?? 40 } }) }), value.dimOverlay?.enabled && (_jsxs(Div, { children: [_jsxs(Text, { className: "mb-1", size: "sm", weight: "medium", children: ["Opacity (", value.dimOverlay.opacity, "%)"] }), _jsx(Slider, { min: 0, max: 90, step: 5, value: value.dimOverlay.opacity, onChange: (opacity) => set({ dimOverlay: { enabled: true, opacity } }), showValue: false })] }))] })] })), value.type === "color" && (_jsx(Input, { label: "Colour (CSS token or hex)", value: value.color ?? "", onChange: (e) => set({ color: e.target.value }), placeholder: "var(--appkit-color-primary) or #1a1a2e" })), value.type === "gradient" && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "From colour", value: value.gradientFrom ?? "", onChange: (e) => set({ gradientFrom: e.target.value }), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "To colour", value: value.gradientTo ?? "", onChange: (e) => set({ gradientTo: e.target.value }), placeholder: "var(--appkit-color-secondary)" }), _jsx(Input, { label: "Angle (degrees)", type: "number", value: String(value.gradientAngle ?? 135), onChange: (e) => set({ gradientAngle: Number(e.target.value) }), min: 0, max: 360 })] }))] }));
+    return (_jsxs(Stack, { gap: "3", children: [_jsx(Select, { label: "Background type", value: value.type, onChange: (e) => onChange({ type: e.target.value }), options: BG_TYPE_OPTIONS }), (value.type === "image" || value.type === "video") && (_jsxs(_Fragment, { children: [_jsx(Input, { label: `${value.type === "image" ? "Image" : "Video"} URL`, value: value.url ?? "", onChange: (e) => set({ url: e.target.value }), placeholder: "https://..." }), _jsx(Input, { label: "Mobile URL (optional)", value: value.mobileUrl ?? "", onChange: (e) => set({ mobileUrl: e.target.value || undefined }), placeholder: "https://... (portrait crop)" }), value.type === "video" && (_jsx(Input, { label: "Poster / thumbnail URL", value: value.thumbnail ?? "", onChange: (e) => set({ thumbnail: e.target.value || undefined }), placeholder: "https://..." })), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "lg", border: "default", children: [_jsx(Toggle, { label: "Dim overlay", checked: value.dimOverlay?.enabled ?? false, onChange: (v) => set({ dimOverlay: { enabled: v, opacity: value.dimOverlay?.opacity ?? 40 } }) }), value.dimOverlay?.enabled && (_jsxs(Div, { children: [_jsxs(Text, { className: "mb-1", size: "sm", weight: "medium", children: ["Opacity (", value.dimOverlay.opacity, "%)"] }), _jsx(Slider, { "aria-label": `Dim overlay opacity, ${value.dimOverlay.opacity}%`, min: 0, max: 90, step: 5, value: value.dimOverlay.opacity, onChange: (opacity) => set({ dimOverlay: { enabled: true, opacity } }), showValue: false })] }))] })] })), value.type === "color" && (_jsx(Input, { label: "Colour (CSS token or hex)", value: value.color ?? "", onChange: (e) => set({ color: e.target.value }), placeholder: "var(--appkit-color-primary) or #1a1a2e" })), value.type === "gradient" && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "From colour", value: value.gradientFrom ?? "", onChange: (e) => set({ gradientFrom: e.target.value }), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "To colour", value: value.gradientTo ?? "", onChange: (e) => set({ gradientTo: e.target.value }), placeholder: "var(--appkit-color-secondary)" }), _jsx(Input, { label: "Angle (degrees)", type: "number", value: String(value.gradientAngle ?? 135), onChange: (e) => set({ gradientAngle: Number(e.target.value) }), min: 0, max: 360 })] }))] }));
 }
 // ── Card Editor ──────────────────────────────────────────────────────────────
 function CardEditor({ card, index, otherZones, onChange, onRemove, }) {

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

@@ -152,5 +152,5 @@ export function AdminCategoriesView({ children, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Categories" }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Categories" }), _jsx(DataListingView, { config: ADMIN_CATEGORIES_CONFIG })] }));
+    return _jsx(DataListingView, { config: ADMIN_CATEGORIES_CONFIG });
 }

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

@@ -4,11 +4,14 @@ import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
-import { Button, Card, CardBody, ConfirmDeleteModal, Div, Input, PaginatedSelect, Select, Span, Stack, StackedViewShell, Text, Textarea, Toggle, useToast, Show, StickyToolbar } from "../../../ui/index.js";
+import { Card, CardBody, ConfirmDeleteModal, Div, Input, PaginatedSelect, Select, Span, Stack, StackedViewShell, Text, Textarea, Toggle, useToast, Show, StickyToolbar } from "../../../ui/index.js";
 import { usedPlaceholders } from "../../../_internal/shared/templating/placeholders.js";
 import { apiClient } from "../../../http/index.js";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm.js";
+import { useMediaUpload } from "../../media/index.js";
+import { ImageUpload } from "../../media/upload/ImageUpload.js";
+import { Repeater } from "../../../ui/components/Repeater.js";
 import { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms/index.js";
 import { SectionForm, useSectionFormNav } from "../../shell/index.js";
 /*
@@ -59,17 +62,6 @@ const CONDITION_DEFAULT_OPTIONS = [
     { value: "used", label: "Used" },
     { value: "refurbished", label: "Refurbished" },
 ];
-/**
- * A minimal add/remove repeater.
- *
- * Deliberately NOT a new appkit primitive: three local shapes with three
- * different row renderers is not yet the Rule of Three on a *component* — it
- * is one container used three times with a render prop, which is what this is.
- * Promote it when a fourth caller appears outside this file.
- */
-function Repeater({ rows, onChange, blank, addLabel, renderRow, max, }) {
-    return (_jsxs(Stack, { gap: "sm", children: [rows.map((row, i) => (_jsx(Div, { rounded: "lg", border: "default", padding: "sm", children: _jsxs(Stack, { gap: "xs", children: [renderRow(row, (patch) => onChange(rows.map((r, j) => (j === i ? { ...r, ...patch } : r)))), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange(rows.filter((_, j) => j !== i)), children: "Remove" })] }) }, i))), rows.length < max ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: () => onChange([...rows, blank()]), children: addLabel })) : (_jsxs(Text, { size: "xs", color: "muted", children: ["Maximum of ", max, " reached."] }))] }));
-}
 async function loadTaxCodeOptions(query, page) {
     const params = new URLSearchParams({ page: String(page), pageSize: "25" });
     if (query)
@@ -108,6 +100,36 @@ const categoryFormSchema = z.object({
         .or(z.literal("")),
     isActive: z.boolean().optional(),
     showInMenu: z.boolean().optional(),
+    /*
+     * ── Discovery flags ──────────────────────────────────────────────────────
+     *
+     * All four are in `CATEGORIES_UPDATABLE_FIELDS`, so the repository has
+     * always accepted them — there was simply no form. An admin could not
+     * feature a category, set its priority, or take it out of search, on a
+     * taxonomy of 1,185 rows.
+     */
+    isFeatured: z.boolean().optional(),
+    featuredPriority: z
+        .string()
+        .regex(/^\d*$/, "Priority must be a whole number")
+        .optional()
+        .or(z.literal("")),
+    isSearchable: z.boolean().optional(),
+    showOnHomepage: z.boolean().optional(),
+    /*
+     * `display.coverImage`, flattened into the draft because the form is flat.
+     *
+     * 🛑 THE DATA MODEL HAS ALWAYS CARRIED THIS AND THE EDITOR NEVER EXPOSED IT.
+     * 504 category covers live in Storage, `resolveTaxonomyVisual` reads
+     * `display.coverImage`, and the category page renders it — the only missing
+     * piece was a way for an admin to set or change one. That is why the
+     * taxonomy looked unfinished.
+     *
+     * Not validated as a URL: the value is either a `/media/<slug>` path minted
+     * by the upload flow or empty, and a stricter rule here would reject the
+     * former. An empty string is a legitimate value and means "cleared".
+     */
+    coverImage: z.string().optional().or(z.literal("")),
     // ── Content & Templates ──────────────────────────────────────────────────
     contentBody: z
         .string()
@@ -151,6 +173,13 @@ const EMPTY_VALUES = {
     order: "",
     isActive: true,
     showInMenu: true,
+    isFeatured: false,
+    featuredPriority: "",
+    /* Searchable by DEFAULT — a new category nobody can find is a worse
+       default than one that appears in results. */
+    isSearchable: true,
+    showOnHomepage: false,
+    coverImage: "",
     contentBody: "",
     highlightsText: "",
     hasbroName: "",
@@ -277,6 +306,7 @@ function toCategorySlug(str) {
 export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(categoryId);
     const [deleteOpen, setDeleteOpen] = React.useState(false);
+    const { upload } = useMediaUpload();
     const [values, setValues] = React.useState(EMPTY_VALUES);
     /*
      * The three repeater arrays live OUTSIDE `values`.
@@ -330,6 +360,11 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
             order: cat.order !== undefined ? String(cat.order) : "",
             isActive: cat.isActive ?? true,
             showInMenu: cat.display?.showInMenu ?? true,
+            isFeatured: cat.isFeatured ?? false,
+            featuredPriority: cat.featuredPriority !== undefined ? String(cat.featuredPriority) : "",
+            isSearchable: cat.isSearchable ?? true,
+            showOnHomepage: cat.showOnHomepage ?? false,
+            coverImage: cat.display?.coverImage ?? "",
             contentBody: cat.contentBody ?? "",
             highlightsText: listToLines(cat.highlights),
             hasbroName: cat.hasbroName ?? "",
@@ -366,7 +401,22 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
                 parentId: String(values.parentId ?? "") || undefined,
                 order: values.order !== "" && values.order !== undefined ? Number(values.order) : undefined,
                 isActive: values.isActive ?? true,
-                display: { showInMenu: values.showInMenu ?? true },
+                isFeatured: values.isFeatured ?? false,
+                featuredPriority: values.featuredPriority !== "" && values.featuredPriority !== undefined
+                    ? Number(values.featuredPriority)
+                    : undefined,
+                isSearchable: values.isSearchable ?? true,
+                showOnHomepage: values.showOnHomepage ?? false,
+                /*
+                 * `coverImage` is sent even when empty — an empty string is how the
+                 * admin says "remove the cover", and omitting it would make clearing
+                 * the field a no-op now that the route merges rather than replaces.
+                 * Every reader trims and tests truthiness, so `""` reads as absent.
+                 */
+                display: {
+                    showInMenu: values.showInMenu ?? true,
+                    coverImage: String(values.coverImage ?? ""),
+                },
             };
             if (isEdit) {
                 /*
@@ -434,8 +484,14 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
         {
             id: "visibility",
             label: "Display",
-            fields: ["order", "isActive", "showInMenu"],
-            render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Input, { label: "Display order", value: String(v.order ?? ""), onChange: (e) => onChange({ order: e.target.value }), type: "number", min: 0, placeholder: "0", error: errors.order }), _jsx(Toggle, { label: "Active", checked: v.isActive ?? true, onChange: (checked) => onChange({ isActive: checked }) }), _jsx(Toggle, { label: "Show in menu", checked: v.showInMenu ?? true, onChange: (checked) => onChange({ showInMenu: checked }) })] })),
+            fields: ["order", "isActive", "showInMenu", "coverImage", "isFeatured", "featuredPriority", "isSearchable", "showOnHomepage"],
+            render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(ImageUpload, { label: "Cover image", helperText: "Shown on the category page hero and on category cards.", currentImage: String(v.coverImage ?? ""), onUpload: (file) => upload(file, "categories", true, {
+                            type: "category-image",
+                            // The filename is content-derived, so re-uploading for the
+                            // same category overwrites at the same storage path rather
+                            // than orphaning the previous object.
+                            name: String(v.name ?? "") || String(v.slug ?? ""),
+                        }), onChange: (url) => onChange({ coverImage: url }) }), _jsx(Input, { label: "Display order", value: String(v.order ?? ""), onChange: (e) => onChange({ order: e.target.value }), type: "number", min: 0, placeholder: "0", error: errors.order }), _jsx(Toggle, { label: "Active", checked: v.isActive ?? true, onChange: (checked) => onChange({ isActive: checked }) }), _jsx(Toggle, { label: "Show in menu", checked: v.showInMenu ?? true, onChange: (checked) => onChange({ showInMenu: checked }) }), _jsx(Toggle, { label: "Searchable", checked: v.isSearchable ?? true, onChange: (checked) => onChange({ isSearchable: checked }) }), _jsx(Toggle, { label: "Featured", checked: v.isFeatured ?? false, onChange: (checked) => onChange({ isFeatured: checked }) }), (v.isFeatured ?? false) ? (_jsx(Input, { label: "Featured priority", value: String(v.featuredPriority ?? ""), onChange: (e) => onChange({ featuredPriority: e.target.value }), type: "number", min: 0, placeholder: "0", helperText: "Lower sorts first among featured categories.", error: errors.featuredPriority })) : null, _jsx(Toggle, { label: "Show on homepage", checked: v.showOnHomepage ?? false, onChange: (checked) => onChange({ showOnHomepage: checked }) })] })),
         },
         /*
          * 🛑 EDIT ONLY. The create route's `z.object()` would strip every one of
@@ -448,7 +504,7 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
                     id: "content",
                     label: "Content & Templates",
                     fields: ["contentBody", "highlightsText", "hasbroName"],
-                    render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Category page body" }), _jsx(Textarea, { value: String(v.contentBody ?? ""), onChange: (e) => onChange({ contentBody: e.target.value }), rows: 8, placeholder: "400\u2013900 characters of keyword-rich HTML with links to sibling and parent categories\u2026" }), errors.contentBody ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: errors.contentBody })) : (_jsx(Text, { size: "xs", color: "muted", children: "Rendered on the category page. Distinct from the short Description above, which also feeds the SEO meta and every card. 36 of worldhobbyshop's 46 categories carry one of these and it is their actual ranking mechanism; no Shopify competitor in the crawl has any." }))] }), _jsx(FieldInput, { name: "hasbroName", label: "Hasbro / international name", value: String(v.hasbroName ?? ""), onChange: (val) => onChange({ hasbroName: val }), placeholder: "e.g. Beyblade Burst Turbo", error: errors.hasbroName, hint: "Only when the Hasbro season name genuinely differs from the Takara-Tomy one \u2014 Cho-Z ships as Turbo, God as Evolution. Rendered on the category page as 'Also known as'. Leave blank if there is no divergence, or if you cannot confirm one: a guessed pairing reads as fact." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Highlights \u2014 one per line" }), _jsx(Textarea, { value: String(v.highlightsText ?? ""), onChange: (e) => onChange({ highlightsText: e.target.value }), rows: 4, placeholder: "Genuine Takara Tomy stock\nChecked and photographed before listing" }), _jsx(Text, { size: "xs", color: "muted", children: "Short \"why shop this\" bullets, shown above the FAQs. Blank lines are dropped. Up to 12." })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Category FAQs" }), _jsx(Text, { size: "xs", color: "muted", children: "Rendered as an accordion on the category page and emitted as FAQPage structured data. Keep platform-wide answers in the global FAQ collection instead \u2014 two copies of one answer means the one that gets fixed is never the one being read." }), _jsx(Repeater, { rows: faqs, onChange: setFaqs, blank: () => ({ question: "", answer: "" }), addLabel: "Add an FAQ", max: 20, renderRow: (row, set) => (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Question", value: row.question, onChange: (e) => set({ question: e.target.value }), placeholder: "Are these compatible with Burst launchers?" }), _jsx(Textarea, { value: row.answer, onChange: (e) => set({ answer: e.target.value }), rows: 3, placeholder: "Answer\u2026" })] })) })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Description templates" }), _jsxs(Text, { size: "xs", color: "muted", children: ["What the seller form offers when a listing is filed here. One per condition band \u2014 worldhobbyshop reuses exactly two across 1,195 listings. Slots like", " ", _jsx(Span, { family: "mono", children: "{{title}}" }), ",", " ", _jsx(Span, { family: "mono", children: "{{brand}}" }), ",", " ", _jsx(Span, { family: "mono", children: "{{condition}}" }), " and", " ", _jsx(Span, { family: "mono", children: "{{series}}" }), " are filled from the listing; an unresolved one becomes empty and is reported to the seller, never left as a literal brace pair."] }), _jsx(Repeater, { rows: templates, onChange: setTemplates, blank: () => ({ id: "", label: "", variant: "default", body: "" }), addLabel: "Add a template", max: 8, renderRow: (row, set) => (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Label", value: row.label, onChange: (e) => set({ label: e.target.value }), placeholder: "Pre-owned \u2014 condition as pictured" }), _jsx(Select, { label: "Condition band", value: row.variant, onChange: (e) => set({ variant: e.target.value }), options: TEMPLATE_VARIANT_OPTIONS })] }), _jsx(Textarea, { value: row.body, onChange: (e) => set({ body: e.target.value }), rows: 6, placeholder: "Important things to know about {{title}} \u2014 HTML permitted\u2026" }), _jsx(Text, { size: "xs", color: "muted", children: usedPlaceholders(row.body).length > 0
+                    render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Textarea, { label: "Category page body", value: String(v.contentBody ?? ""), onChange: (e) => onChange({ contentBody: e.target.value }), rows: 8, placeholder: "400\u2013900 characters of keyword-rich HTML with links to sibling and parent categories\u2026" }), errors.contentBody ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: errors.contentBody })) : (_jsx(Text, { size: "xs", color: "muted", children: "Rendered on the category page. Distinct from the short Description above, which also feeds the SEO meta and every card. 36 of worldhobbyshop's 46 categories carry one of these and it is their actual ranking mechanism; no Shopify competitor in the crawl has any." }))] }), _jsx(FieldInput, { name: "hasbroName", label: "Hasbro / international name", value: String(v.hasbroName ?? ""), onChange: (val) => onChange({ hasbroName: val }), placeholder: "e.g. Beyblade Burst Turbo", error: errors.hasbroName, hint: "Only when the Hasbro season name genuinely differs from the Takara-Tomy one \u2014 Cho-Z ships as Turbo, God as Evolution. Rendered on the category page as 'Also known as'. Leave blank if there is no divergence, or if you cannot confirm one: a guessed pairing reads as fact." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Textarea, { label: "Highlights \u2014 one per line", value: String(v.highlightsText ?? ""), onChange: (e) => onChange({ highlightsText: e.target.value }), rows: 4, placeholder: "Genuine Takara Tomy stock\nChecked and photographed before listing" }), _jsx(Text, { size: "xs", color: "muted", children: "Short \"why shop this\" bullets, shown above the FAQs. Blank lines are dropped. Up to 12." })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Category FAQs" }), _jsx(Text, { size: "xs", color: "muted", children: "Rendered as an accordion on the category page and emitted as FAQPage structured data. Keep platform-wide answers in the global FAQ collection instead \u2014 two copies of one answer means the one that gets fixed is never the one being read." }), _jsx(Repeater, { rows: faqs, onChange: setFaqs, blank: () => ({ question: "", answer: "" }), addLabel: "Add an FAQ", max: 20, renderRow: (row, set) => (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Question", value: row.question, onChange: (e) => set({ question: e.target.value }), placeholder: "Are these compatible with Burst launchers?" }), _jsx(Textarea, { value: row.answer, onChange: (e) => set({ answer: e.target.value }), rows: 3, placeholder: "Answer\u2026" })] })) })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Description templates" }), _jsxs(Text, { size: "xs", color: "muted", children: ["What the seller form offers when a listing is filed here. One per condition band \u2014 worldhobbyshop reuses exactly two across 1,195 listings. Slots like", " ", _jsx(Span, { family: "mono", children: "{{title}}" }), ",", " ", _jsx(Span, { family: "mono", children: "{{brand}}" }), ",", " ", _jsx(Span, { family: "mono", children: "{{condition}}" }), " and", " ", _jsx(Span, { family: "mono", children: "{{series}}" }), " are filled from the listing; an unresolved one becomes empty and is reported to the seller, never left as a literal brace pair."] }), _jsx(Repeater, { rows: templates, onChange: setTemplates, blank: () => ({ id: "", label: "", variant: "default", body: "" }), addLabel: "Add a template", max: 8, renderRow: (row, set) => (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Label", value: row.label, onChange: (e) => set({ label: e.target.value }), placeholder: "Pre-owned \u2014 condition as pictured" }), _jsx(Select, { label: "Condition band", value: row.variant, onChange: (e) => set({ variant: e.target.value }), options: TEMPLATE_VARIANT_OPTIONS })] }), _jsx(Textarea, { value: row.body, onChange: (e) => set({ body: e.target.value }), rows: 6, placeholder: "Important things to know about {{title}} \u2014 HTML permitted\u2026" }), _jsx(Text, { size: "xs", color: "muted", children: usedPlaceholders(row.body).length > 0
                                                         ? `Slots used: ${usedPlaceholders(row.body).map((p) => `{{${p}}}`).join(", ")}`
                                                         : "No slots used — this body will read identically on every listing." })] })) })] })] })),
                 },
@@ -456,7 +512,7 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
                     id: "defaults",
                     label: "Product defaults",
                     fields: ["taxCodeId", "weightG", "dimL", "dimW", "dimH", "seoTitleTemplate", "seoDescriptionTemplate"],
-                    render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Text, { size: "xs", color: "muted", children: "What a listing filed under this category inherits. Written server-side when the product omits the field, and resolved PER FIELD up the ancestor chain \u2014 so a named-model leaf can supply its own features while the tax code and spec rows come from the line above it." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Tax code" }), _jsx(PaginatedSelect, { value: String(v.taxCodeId ?? "") || null, onChange: (val) => onChange({ taxCodeId: val ?? "" }), loadOptions: loadTaxCodeOptions, placeholder: "Search tax codes\u2026", searchPlaceholder: "HSN or label\u2026", noResultsText: "No tax codes found", ariaLabel: "Tax code" }), _jsx(Text, { size: "xs", color: "muted", children: "\uD83D\uDED1 This is the GST mechanism, not a nicety. A listing whose category resolves no tax code falls back to a default rate and is flagged for triage \u2014 and the measure of success is that the fallback fires for nothing." })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Select, { label: "Default condition", value: String(v.defaultCondition ?? ""), onChange: (e) => onChange({ defaultCondition: e.target.value }), options: CONDITION_DEFAULT_OPTIONS }), _jsx(Select, { label: "Default authenticity", value: String(v.defaultAuthenticity ?? ""), onChange: (e) => onChange({ defaultAuthenticity: e.target.value }), options: AUTHENTICITY_OPTIONS })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Specification rows" }), _jsx(Repeater, { rows: specs, onChange: setSpecs, blank: () => ({ name: "", value: "", unit: "" }), addLabel: "Add a specification", max: 20, renderRow: (row, set) => (_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-3", children: [_jsx(Input, { label: "Name", value: row.name, onChange: (e) => set({ name: e.target.value }), placeholder: "System" }), _jsx(Input, { label: "Value", value: row.value, onChange: (e) => set({ value: e.target.value }), placeholder: "Magne Core" }), _jsx(Input, { label: "Unit", value: row.unit ?? "", onChange: (e) => set({ unit: e.target.value }), placeholder: "g" })] })) })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "What's in the box \u2014 one per line" }), _jsx(Textarea, { value: String(v.inTheBoxText ?? ""), onChange: (e) => onChange({ inTheBoxText: e.target.value }), rows: 4, placeholder: "Beyblade top\nLauncher\nRipcord\nManual" }), _jsx(Text, { size: "xs", color: "muted", children: "Read by the description-template endpoint to fill the new-in-box body's list. Deliberately NOT written to the product's `features` field, which holds feature ids \u2014 putting prose there would break every facet on the listing." })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "SEO title template", value: String(v.seoTitleTemplate ?? ""), onChange: (e) => onChange({ seoTitleTemplate: e.target.value }), placeholder: "{{title}} \u2014 {{brand}} | {{siteName}}", error: errors.seoTitleTemplate }), _jsx(Input, { label: "SEO description template", value: String(v.seoDescriptionTemplate ?? ""), onChange: (e) => onChange({ seoDescriptionTemplate: e.target.value }), placeholder: "Buy {{title}} in India\u2026", error: errors.seoDescriptionTemplate })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "SEO keywords \u2014 one per line" }), _jsx(Textarea, { value: String(v.seoKeywordsText ?? ""), onChange: (e) => onChange({ seoKeywordsText: e.target.value }), rows: 3 })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-4", children: [_jsx(Input, { label: "Packed weight (g)", value: String(v.weightG ?? ""), onChange: (e) => onChange({ weightG: e.target.value }), placeholder: "300", error: errors.weightG, helperText: "Boxed, not the bare item." }), _jsx(Input, { label: "Length (cm)", value: String(v.dimL ?? ""), onChange: (e) => onChange({ dimL: e.target.value }), error: errors.dimL }), _jsx(Input, { label: "Width (cm)", value: String(v.dimW ?? ""), onChange: (e) => onChange({ dimW: e.target.value }), error: errors.dimW }), _jsx(Input, { label: "Height (cm)", value: String(v.dimH ?? ""), onChange: (e) => onChange({ dimH: e.target.value }), error: errors.dimH })] }), _jsx(Text, { size: "xs", color: "muted", children: "\uD83D\uDED1 The weight is a PACKED weight \u2014 a bey is ~30 g and ~300 g boxed. This figure drives the shipping estimate the buyer pays, and the seller's booking is capped at what was collected, so an item weight here under-estimates every booking and the difference is absorbed silently. All three dimensions or none." }), _jsx(Toggle, { label: "Fragile by default", checked: v.fragile === true, onChange: (checked) => onChange({ fragile: checked }) })] })),
+                    render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Text, { size: "xs", color: "muted", children: "What a listing filed under this category inherits. Written server-side when the product omits the field, and resolved PER FIELD up the ancestor chain \u2014 so a named-model leaf can supply its own features while the tax code and spec rows come from the line above it." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Tax code" }), _jsx(PaginatedSelect, { value: String(v.taxCodeId ?? "") || null, onChange: (val) => onChange({ taxCodeId: val ?? "" }), loadOptions: loadTaxCodeOptions, placeholder: "Search tax codes\u2026", searchPlaceholder: "HSN or label\u2026", noResultsText: "No tax codes found", ariaLabel: "Tax code" }), _jsx(Text, { size: "xs", color: "muted", children: "\uD83D\uDED1 This is the GST mechanism, not a nicety. A listing whose category resolves no tax code falls back to a default rate and is flagged for triage \u2014 and the measure of success is that the fallback fires for nothing." })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Select, { label: "Default condition", value: String(v.defaultCondition ?? ""), onChange: (e) => onChange({ defaultCondition: e.target.value }), options: CONDITION_DEFAULT_OPTIONS }), _jsx(Select, { label: "Default authenticity", value: String(v.defaultAuthenticity ?? ""), onChange: (e) => onChange({ defaultAuthenticity: e.target.value }), options: AUTHENTICITY_OPTIONS })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Specification rows" }), _jsx(Repeater, { rows: specs, onChange: setSpecs, blank: () => ({ name: "", value: "", unit: "" }), addLabel: "Add a specification", max: 20, renderRow: (row, set) => (_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-3", children: [_jsx(Input, { label: "Name", value: row.name, onChange: (e) => set({ name: e.target.value }), placeholder: "System" }), _jsx(Input, { label: "Value", value: row.value, onChange: (e) => set({ value: e.target.value }), placeholder: "Magne Core" }), _jsx(Input, { label: "Unit", value: row.unit ?? "", onChange: (e) => set({ unit: e.target.value }), placeholder: "g" })] })) })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Textarea, { label: "What's in the box \u2014 one per line", value: String(v.inTheBoxText ?? ""), onChange: (e) => onChange({ inTheBoxText: e.target.value }), rows: 4, placeholder: "Beyblade top\nLauncher\nRipcord\nManual" }), _jsx(Text, { size: "xs", color: "muted", children: "Read by the description-template endpoint to fill the new-in-box body's list. Deliberately NOT written to the product's `features` field, which holds feature ids \u2014 putting prose there would break every facet on the listing." })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "SEO title template", value: String(v.seoTitleTemplate ?? ""), onChange: (e) => onChange({ seoTitleTemplate: e.target.value }), placeholder: "{{title}} \u2014 {{brand}} | {{siteName}}", error: errors.seoTitleTemplate }), _jsx(Input, { label: "SEO description template", value: String(v.seoDescriptionTemplate ?? ""), onChange: (e) => onChange({ seoDescriptionTemplate: e.target.value }), placeholder: "Buy {{title}} in India\u2026", error: errors.seoDescriptionTemplate })] }), _jsx(Stack, { gap: "xs", children: _jsx(Textarea, { label: "SEO keywords \u2014 one per line", value: String(v.seoKeywordsText ?? ""), onChange: (e) => onChange({ seoKeywordsText: e.target.value }), rows: 3 }) }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-4", children: [_jsx(Input, { label: "Packed weight (g)", value: String(v.weightG ?? ""), onChange: (e) => onChange({ weightG: e.target.value }), placeholder: "300", error: errors.weightG, helperText: "Boxed, not the bare item." }), _jsx(Input, { label: "Length (cm)", value: String(v.dimL ?? ""), onChange: (e) => onChange({ dimL: e.target.value }), error: errors.dimL }), _jsx(Input, { label: "Width (cm)", value: String(v.dimW ?? ""), onChange: (e) => onChange({ dimW: e.target.value }), error: errors.dimW }), _jsx(Input, { label: "Height (cm)", value: String(v.dimH ?? ""), onChange: (e) => onChange({ dimH: e.target.value }), error: errors.dimH })] }), _jsx(Text, { size: "xs", color: "muted", children: "\uD83D\uDED1 The weight is a PACKED weight \u2014 a bey is ~30 g and ~300 g boxed. This figure drives the shipping estimate the buyer pays, and the seller's booking is capped at what was collected, so an item weight here under-estimates every booking and the difference is absorbed silently. All three dimensions or none." }), _jsx(Toggle, { label: "Fragile by default", checked: v.fragile === true, onChange: (checked) => onChange({ fragile: checked }) })] })),
                 },
             ]
             : []),

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

@@ -29,7 +29,7 @@ export function AdminContactEditorView({ open, onClose, submissionId, subject, n
     });
     const statusColor = {
         new: "bg-info-surface text-info",
-        read: "bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)] bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]",
+        read: "bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]",
         resolved: "bg-success-surface text-success",
     };
     return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: subject ?? "Contact Submission", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "5", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Text, { size: "xs", color: "muted", children: "Status:" }), _jsx(Span, { layout: "inline-flex", className: `${statusColor[currentStatus ?? "new"] ?? statusColor.new}`, size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: currentStatus ?? "new" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "medium", transform: "uppercase", children: "From" }), _jsx(Text, { size: "sm", weight: "medium", color: "primary", children: name ?? "Unknown" }), email && (_jsx(Text, { size: "sm", color: "muted", children: email }))] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "medium", transform: "uppercase", children: "Message" }), _jsx(Div, { className: `${__P.p3} max-h-64 ${__O.yAuto}`, rounded: "lg", surface: "muted", border: "default", children: _jsx(Text, { className: "whitespace-pre-wrap leading-relaxed", color: "primary", size: "sm", children: message ?? "No message body." }) })] }), _jsxs(FormActions, { align: "right", children: [email && (_jsx(Button, { type: "button", variant: "outline", onClick: () => {

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

@@ -4,7 +4,8 @@ import { normalizeError } from "../../../errors/normalize.js";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { ConfirmDeleteModal, Div, StackedViewShell, useToast } from "../../../ui/index.js";
+import { ConfirmDeleteModal, Div, Input, StackedViewShell, useToast } from "../../../ui/index.js";
+import { Repeater } from "../../../ui/components/Repeater.js";
 import { FieldInput, FormErrorSummary } from "../../../ui/forms/index.js";
 import { apiClient } from "../../../http/index.js";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
@@ -63,6 +64,7 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
         isActive: true,
         firstTimeUserOnly: false,
         appliesToAuctions: false,
+        tiers: [],
         applicableProducts: [],
         applicableCategories: [],
     });
@@ -113,6 +115,7 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
                 ? c.restrictions.applicableCategories
                 : [],
             appliesToAuctions: c.applicableToAuctions ?? false,
+            tiers: c.tiers ?? [],
         });
     }, [couponQuery.data]);
     const handleNameChange = (value) => {
@@ -166,6 +169,13 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
                     }),
                 },
                 applicableToAuctions: form.appliesToAuctions,
+                /*
+                 * 🛑 Sent even when EMPTY so that clearing the last tier persists —
+                 * the same reasoning as the brand highlights. A tier with no
+                 * threshold and no value is dropped rather than stored: it would be
+                 * a band that matches every order and discounts nothing.
+                 */
+                tiers: form.tiers.filter((t) => t.minAmount > 0 || t.discountValue > 0),
             };
             if (isEdit) {
                 return apiClient.patch(ADMIN_ENDPOINTS.COUPON_BY_ID(couponId), payload);
@@ -208,6 +218,21 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
     const sections = React.useMemo(() => buildSectionsFromSchema(adminCouponFormSchema, {
         options: { type: TYPE_OPTIONS.map((o) => ({ value: String(o.value), label: o.label })) },
         renderers: {
+            /*
+             * Spend tiers. `Repeater` is the one promoted out of
+             * `AdminCategoryEditorView`; this is its fifth caller.
+             *
+             * 🛑 Both inputs are NUMBERS, parsed here rather than kept as
+             * strings, because `getTieredDiscount` sorts on `minAmount` and
+             * compares it to the order total. A string "1000" sorts before
+             * "900" lexically, which would silently pick the wrong band.
+             */
+            tiers: ({ values, onChange }) => {
+                const rows = values.tiers ?? [];
+                return (_jsx(Repeater, { rows: rows, onChange: (next) => onChange({ tiers: next }), blank: () => ({ minAmount: 0, discountValue: 0 }), addLabel: "Add a tier", max: 6, renderRow: (row, set) => (_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Spend at least (\u20B9)", type: "number", min: 0, value: String(row.minAmount), onChange: (e) => set({ minAmount: Number(e.target.value) || 0 }) }), _jsx(Input, { label: values.type === "percentage"
+                                    ? "Discount (%)"
+                                    : "Discount (₹)", type: "number", min: 0, value: String(row.discountValue), onChange: (e) => set({ discountValue: Number(e.target.value) || 0 }) })] })) }));
+            },
             // Typing the campaign name fills the code until the admin edits it.
             name: ({ values, errors }) => (_jsx(FieldInput, { name: "name", label: "Campaign name", required: true, value: values.name, error: errors.name, onChange: handleNameChange })),
             code: ({ values, onChange, errors }) => (_jsx(FieldInput, { name: "code", label: "Coupon code", required: true, disabled: isEdit, hint: isEdit ? "A code cannot change once customers have it." : undefined, value: values.code, error: errors.code, onChange: (v) => {

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

@@ -187,7 +187,7 @@ export function AdminFaqEditorView({ faqId, onSaved, onDeleted, embedded, ...res
             render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(FieldInput, { name: "question", label: "Question", value: String(v.question ?? ""), onChange: (val) => onChange({ question: val }), required: true, placeholder: "e.g. How does bidding work on LetItRip?", error: errors.question }), _jsx(Input, { label: "Slug", value: String(v.slug ?? ""), onChange: (e) => {
                             setSlugManual(true);
                             onChange({ slug: e.target.value });
-                        }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from the question until you edit it. Must start with 'faq-'.", error: errors.slug }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Answer" }), _jsx(RichTextEditor, { value: String(v.answer ?? ""), onChange: (val) => onChange({ answer: val }), placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" }), errors.answer && (_jsx(Text, { size: "xs", color: "error", role: "alert", children: errors.answer }))] })] })),
+                        }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from the question until you edit it. Must start with 'faq-'.", error: errors.slug }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Answer" }), _jsx(RichTextEditor, { ariaLabel: "Answer", value: String(v.answer ?? ""), onChange: (val) => onChange({ answer: val }), placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" }), errors.answer && (_jsx(Text, { size: "xs", color: "error", role: "alert", children: errors.answer }))] })] })),
         },
         {
             id: "classification",

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useMemo } from "react";
@@ -101,5 +101,5 @@ export function AdminFaqsView({ children, onBulkArchive, onBulkDelete, ...props
     if (React.Children.count(children) > 0) {
         return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "FAQs" }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, className: "sr-only", children: "FAQs" }), _jsx(DataListingView, { config: config })] }));
+    return _jsx(DataListingView, { config: config });
 }

package/dist/features/admin/components/AdminGatewayEventsView.d.ts

@@ -0,0 +1,54 @@
+/**
+ * AdminGatewayEventsView — the webhook inbox, readable for the first time.
+ *
+ * ## What this is for
+ *
+ * `gatewayEvents` records every delivery verbatim, including event types we are
+ * subscribed to but do not implement — which is the whole reason the inbox
+ * exists rather than a logger line. Before it, a `payment.dispute.created`
+ * arriving ahead of the dispute handler would simply have vanished.
+ *
+ * This page answers three operator questions: did it arrive, what did we do
+ * with it, and can it be made to arrive again.
+ *
+ * ## 🛑 "Reopen for redelivery" is NOT "reprocess", and the UI must not imply it
+ *
+ * Nothing here can replay an event. R1's own header explains why: dispatching
+ * from anywhere but the webhook route would duplicate that route's whole switch
+ * and its RTDB signalling in a second place (Root Cause #75). The action only
+ * stops the inbox from refusing the NEXT delivery as a duplicate — the operator
+ * still presses Resend in the gateway dashboard.
+ *
+ * So the button says what it does, and the confirmation says what is left to
+ * do. A button labelled "Reprocess" doing only this would be the worst kind of
+ * half-truth: it would look like the work had happened.
+ *
+ * ## 🛑 Two statuses that look like failures and are not
+ *
+ * `ignored` means an event type we do not implement was recorded verbatim —
+ * healthy, and the inbox's purpose. `conflict` means a LATE event would have
+ * regressed an order's status, so it was recorded and not applied; the ack was
+ * 200 because the event is not wrong, it is out of date. Labelling either as an
+ * error would send operators chasing non-problems, which is how a queue stops
+ * being read.
+ *
+ * ## 🛑 No search box, and no sort on `status`
+ *
+ * `searchPlaceholder` is omitted because the endpoint does not read `q`;
+ * declaring it is what makes a dead box exist. And `status` is `canSort: false`
+ * in `SIEVE_FIELDS`, so a sort on it would be DROPPED silently by sievejs
+ * (Root Cause #63) — the status FILTER is the control, and it is in the panel.
+ *
+ * EXPORTS: AdminGatewayEventsView, type AdminGatewayEventsViewProps
+ *
+ * @tag domain:gateway-events
+ * @tag layer:component
+ * @tag pattern:listing
+ * @tag access:client
+ * @tag consumers:admin/maintenance/gateway-events
+ * @tag sideEffects:network
+ */
+import React from "react";
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminGatewayEventsViewProps = ListingLayoutProps;
+export declare function AdminGatewayEventsView({ children, ...props }: AdminGatewayEventsViewProps): React.JSX.Element;