@mohasinac/appkit 4.59.0 → 4.60.1

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

@@ -25,7 +25,7 @@ const SECTIONS = [
     },
     {
         Icon: CheckCircle, title: "Order Confirmation",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: GC.textMuted, children: "After a successful payment you'll see an on-screen confirmation with your order ID. You'll also receive:" }), _jsxs(Ul, { className: `${GC.listDiscMuted} mt-3`, children: [_jsx(Li, { children: "An email confirmation to your registered address" }), _jsx(Li, { children: "A WhatsApp message if you've added and verified your phone number" })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: ["View all your orders at any time under ", _jsx(Span, { weight: "bold", children: "My Account \u2192 My Orders" }), "."] })] })),
+        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: GC.textMuted, children: "After a successful payment you'll see an on-screen confirmation with your order ID. You'll also receive:" }), _jsxs(Ul, { className: `${GC.listDiscMuted} mt-3`, children: [_jsx(Li, { children: "An email confirmation to your registered address" }), _jsx(Li, { children: "An in-app notification you can read any time from the bell in the header" })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: ["View all your orders at any time under ", _jsx(Span, { weight: "bold", children: "My Account \u2192 My Orders" }), "."] })] })),
     },
     {
         Icon: UserX, title: "Guest Limitations",

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

@@ -24,7 +24,7 @@ function ToggleRow({ label, description, checked, onChange, disabled, }) {
 }
 // ─── Section card ───────────────────────────────────────────────────────────
 function SectionCard({ title, children }) {
-    return (_jsxs(Div, { className: `border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden}`, rounded: "xl", children: [_jsx(Div, { className: "border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-alt,var(--appkit-color-surface))]", padding: "inline", children: _jsx(Text, { className: "tracking-widest text-[var(--appkit-color-text-muted)]", size: "xs", weight: "semibold", transform: "uppercase", children: title }) }), _jsx(Div, { padding: "x-md", children: children })] }));
+    return (_jsxs(Div, { className: `border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden}`, rounded: "xl", children: [_jsx(Div, { className: "border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg,var(--appkit-color-surface))]", padding: "inline", children: _jsx(Text, { className: "tracking-widest text-[var(--appkit-color-text-muted)]", size: "xs", weight: "semibold", transform: "uppercase", children: title }) }), _jsx(Div, { padding: "x-md", children: children })] }));
 }
 export function NotificationPreferencesPanel({ fetchUrl = ACCOUNT_ENDPOINTS.NOTIFICATION_PREFERENCES, saveUrl = ACCOUNT_ENDPOINTS.NOTIFICATION_PREFERENCES, onSave, }) {
     const { showToast } = useToast();

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

@@ -50,6 +50,23 @@ const ORDER_LANE_TABS = [
     { id: "standard", label: "Normal" },
     { id: "auction", label: "Auction wins" },
     { id: "offer", label: "Offer wins" },
+    /*
+     * 🛑 `"preorder"` WITHOUT A HYPHEN, and this is not a typo to tidy up.
+     *
+     * `OrderType` (`orders/utils/order-splitter.ts`) spells it `"preorder"`,
+     * while `ListingType` spells the same concept `"pre-order"` WITH a hyphen.
+     * Two unions, two spellings, and the tab must match the one actually stored
+     * on `OrderDocument.orderType` — a tab id matching no stored value returns
+     * zero rows forever with no error anywhere (Root Cause #33), which is
+     * exactly the failure this file's own comment above warns about.
+     *
+     * These two lanes existed in the union and had no tab, so pre-order and
+     * prize-draw orders were reachable only by landing on "All" and scrolling.
+     * Five lanes, four tabs — the eighth instance this session of a
+     * hand-written enumeration drifting from the union it filters.
+     */
+    { id: "preorder", label: "Pre-orders" },
+    { id: "prize-draw", label: "Prize draws" },
 ];
 /**
  * Payment-method tabs — a THIRD axis, independent of the lane tabs above and

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

@@ -97,7 +97,7 @@ export function UserSidebar({ items, groups, mobileOpen = false, onCloseMobile,
     // ── Persistent sidebar variant (desktop left slide-over, mobile bottom-sheet) ──────
     if (variant === "sidebar") {
         const handleToggle = onToggle ?? close;
-        return (_jsxs(_Fragment, { children: [desktopOpen && (_jsx(Div, { surface: "overlay-xs", className: "hidden lg:block fixed inset-0 backdrop-blur-[2px] z-30", onClick: handleToggle, "aria-hidden": "true" })), _jsxs(Div, { className: `hidden lg:flex fixed ${rail.edgeClass} z-40 transition-transform duration-300 top-[var(--header-height,3.5rem)] h-[calc(100vh-var(--header-height,3.5rem))] w-[13rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "default", className: `flex-1 ${rail.borderClass} dark:border-[var(--appkit-color-border)] ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsx(Span, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: "My Account" }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname }) }), renderFooter && _jsx(Div, { border: "top", padding: "inline", children: renderFooter() })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle, edge: hand })] }), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: "My Account", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }) }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: `hidden lg:flex fixed ${rail.edgeClass} z-40 transition-transform duration-300 top-[var(--header-height,3.5rem)] h-[calc(100vh-var(--header-height,3.5rem))] w-[13rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "default", className: `flex-1 ${rail.borderClass} dark:border-[var(--appkit-color-border)] ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsx(Span, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: "My Account" }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname }) }), renderFooter && _jsx(Div, { border: "top", padding: "inline", children: renderFooter() })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle, edge: hand })] }), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: "My Account", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }) }) })] }));
     }
     // ── Overlay variant (default) — portal on desktop, bottom-sheet on mobile ─
     const content = (_jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }));

package/dist/features/account/hooks/useNotifications.js

@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { useOptionalSession } from "../../../react/contexts/SessionContext.js";
 import { apiClient } from "../../../http/index.js";
 import { NOTIFICATIONS_ENDPOINTS } from "../../../constants/api-endpoints.js";
 /**
@@ -10,7 +11,35 @@ export function useNotifications(limit = 10, options) {
     const notificationsEndpoint = options?.notificationsEndpoint ?? NOTIFICATIONS_ENDPOINTS.LIST;
     const readAllEndpoint = options?.readAllEndpoint ?? NOTIFICATIONS_ENDPOINTS.READ_ALL;
     const readEndpoint = options?.readEndpoint ?? NOTIFICATIONS_ENDPOINTS.BY_ID;
+    /*
+     * 🛑 SIGNED-OUT VISITORS WERE POLLING AN AUTH-ONLY ENDPOINT.
+     *
+     * The interval below was tuned carefully and at length — and the query had
+     * no `enabled` gate at all. `TitleBar` mounts this hook on every page, so a
+     * signed-out visitor fetched `/api/notifications` on mount and again every
+     * five minutes per open tab, collecting a 401 each time. That is the
+     * audit's "two 401s fire for signed-out visitors, including a notifications
+     * poll that should not run at all", and signed-out is the majority of
+     * traffic on a public catalogue.
+     *
+     * Every one of those was a billed function invocation (Rule #6) spent
+     * asking for the unread count of nobody.
+     *
+     * `useOptionalSession`, not `useSession`: this hook is library code mounted
+     * in shared chrome, so it must not require a provider — and with no
+     * provider it fails CLOSED, which is the safe direction for a request that
+     * can only 401. Same precedent as `useCanSeePrices`.
+     *
+     * `loading` is deliberately part of the gate. `SessionProvider` mounts
+     * `initialUser={null}` (the root layout must stay static), so `user` is
+     * null on every hard load until Firebase resolves — firing then would 401
+     * for a signed-IN user too, and firing again afterwards would double the
+     * request.
+     */
+    const session = useOptionalSession();
+    const isSignedIn = Boolean(session?.user?.uid) && !session?.loading;
     const { data, isLoading, refetch } = useQuery({
+        enabled: isSignedIn,
         queryKey: ["notifications", "list", String(limit)],
         queryFn: () => apiClient.get(`${notificationsEndpoint}?limit=${limit}`),
         staleTime: NOTIFICATIONS_POLL_MS,

package/dist/features/admin/actions/admin-coupon-actions.js

@@ -7,6 +7,8 @@
 import { couponsRepository } from "../../promotions/repository/coupons.repository.js";
 import { NotFoundError, ValidationError } from "../../../errors/index.js";
 import { serverLogger } from "../../../monitoring/index.js";
+import { normalizeError } from "../../../errors/normalize.js";
+import { claimedCouponsRepository } from "../../promotions/repository/claimed-coupons.repository.js";
 import { recordAdminAction } from "../../../_internal/server/features/audit-log/actions.js";
 import { AdminAuditActionValues } from "../../audit-log/schemas/firestore.js";
 export async function adminCreateCoupon(adminId, input) {
@@ -58,6 +60,40 @@ export async function adminUpdateCoupon(adminId, id, input) {
             : {}),
     };
     const updated = await couponsRepository.update(id, updateData);
+    /*
+     * D59 — re-sync every wallet's denormalised snapshot. Nothing did this, so
+     * `/user/coupons` kept rendering the terms as they were at CLAIM time while
+     * checkout applied the live ones.
+     *
+     * 🛑 Display only, verified: redemption reads the live coupon via
+     * `getCouponByCode`, so the drift never changed what was charged. Fixing it
+     * stops the wallet advertising terms checkout will not honour.
+     *
+     * Best-effort and fire-and-forget: the admin's edit has already committed,
+     * and a failed re-sync must not fail it. The fallback is a stale display —
+     * which is exactly today's behaviour, so the worst case is no regression.
+     */
+    void claimedCouponsRepository
+        .resyncSnapshotsForCoupon(id, {
+        name: updated.name,
+        ...(updated.description ? { description: updated.description } : {}),
+        type: updated.type,
+        scope: updated.scope ?? "admin",
+        ...(updated.storeId ? { storeId: updated.storeId } : {}),
+        discount: updated.discount,
+        restrictions: updated.restrictions,
+    })
+        .then((n) => {
+        if (n > 0)
+            serverLogger.info("adminUpdateCoupon: wallet snapshots re-synced", { couponId: id, wallets: n });
+        if (n === 500) {
+            serverLogger.warn("adminUpdateCoupon: snapshot re-sync hit its 500-wallet bound — later wallets still show stale terms", { couponId: id });
+        }
+    })
+        .catch((err) => {
+        void normalizeError(err);
+        serverLogger.warn("adminUpdateCoupon: wallet snapshot re-sync failed (display only)", { couponId: id });
+    });
     serverLogger.info("adminUpdateCoupon", {
         adminId,
         couponId: id,

package/dist/features/admin/components/AdminBeysView.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";
 /**
  * AdminBeysView — browse and correct the generated Beyblade database.
  *
@@ -174,5 +174,5 @@ export function AdminBeysView({ children, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Beyblades" }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Beyblades" }), _jsx(DataListingView, { config: ADMIN_BEYS_CONFIG })] }));
+    return _jsx(DataListingView, { config: ADMIN_BEYS_CONFIG });
 }

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

@@ -207,7 +207,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                         }, placeholder: "e.g. How to Grade Pok\u00E9mon Cards" }), _jsx(Input, { label: "Slug", value: values.slug, onChange: (e) => {
                             setSlugManual(true);
                             onChange({ slug: e.target.value });
-                        }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsx(Input, { label: "Excerpt", value: values.excerpt, onChange: (e) => onChange({ excerpt: e.target.value }), placeholder: "Short summary shown in listings and cards" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Content" }), _jsx(RichTextEditor, { value: values.content, onChange: (v) => onChange({ content: v }), placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] })] })),
+                        }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsx(Input, { label: "Excerpt", value: values.excerpt, onChange: (e) => onChange({ excerpt: e.target.value }), placeholder: "Short summary shown in listings and cards" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Content" }), _jsx(RichTextEditor, { ariaLabel: "Content", value: values.content, onChange: (v) => onChange({ content: v }), placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] })] })),
         },
         {
             id: "media",
@@ -265,7 +265,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }
-    const previewSection = (_jsxs(Div, { rounded: "lg", padding: "5", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] max-h-[calc(100vh-12rem)] overflow-y-auto", children: [_jsx(Row, { textSize: "xs", textWeight: "semibold", color: "muted", className: "mb-3 uppercase tracking-wide", align: "center", gap: "sm", children: _jsx(Span, { children: "Live preview" }) }), draft.coverImage ? (_jsx(Div, { className: "relative h-64 w-full mb-4", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: draft.coverImage, alt: "", size: "hero" }) })) : null, _jsx(Heading, { level: 1, className: "mb-1", size: "2xl", weight: "bold", children: draft.title || "Untitled post" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mb-4", size: "xs", children: [draft.authorName || "Anonymous", draft.category ? ` · ${draft.category}` : ""] }), draft.excerpt ? (_jsx(Text, { className: "italic text-[var(--appkit-color-text-secondary)] mb-4", children: draft.excerpt })) : null, _jsx(RichTextRenderer, { html: draft.content || "<em>No content yet…</em>" }), draft.tags.length > 0 ? (_jsx(Row, { wrap: true, gap: "xs", className: "mt-6", children: draft.tags.map((t) => (_jsxs(Span, { size: "xs", className: "bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)]", rounded: "full", padding: "pill-xs", children: ["#", t] }, t))) })) : null] }, "preview"));
+    const previewSection = (_jsxs(Div, { rounded: "lg", padding: "5", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] max-h-[calc(100vh-12rem)] overflow-y-auto", children: [_jsx(Row, { textSize: "xs", textWeight: "semibold", color: "muted", className: "mb-3 uppercase tracking-wide", align: "center", gap: "sm", children: _jsx(Span, { children: "Live preview" }) }), draft.coverImage ? (_jsx(Div, { className: "relative h-64 w-full mb-4", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: draft.coverImage, alt: "", size: "hero" }) })) : null, _jsx(Heading, { level: 1, className: "mb-1", size: "2xl", weight: "bold", children: draft.title || "Untitled post" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mb-4", size: "xs", children: [draft.authorName || "Anonymous", draft.category ? ` · ${draft.category}` : ""] }), draft.excerpt ? (_jsx(Text, { className: "italic text-[var(--appkit-color-text-muted)] mb-4", children: draft.excerpt })) : null, _jsx(RichTextRenderer, { html: draft.content || "<em>No content yet…</em>" }), draft.tags.length > 0 ? (_jsx(Row, { wrap: true, gap: "xs", className: "mt-6", children: draft.tags.map((t) => (_jsxs(Span, { size: "xs", className: "bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)]", rounded: "full", padding: "pill-xs", children: ["#", t] }, t))) })) : null] }, "preview"));
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Post" : "New Blog Post", sections: [
             _jsxs(Div, { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-[1.5rem]", children: [_jsx(Div, { children: formContent }), _jsx(Div, { className: "mt-6 lg:mt-0 lg:sticky lg:top-4 lg:self-start", children: previewSection })] }, "split"),
         ] }));

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",