@mohasinac/appkit 4.43.0 → 4.45.0

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

@@ -4,12 +4,88 @@ import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
-import { Card, CardBody, ConfirmDeleteModal, Div, Input, PaginatedSelect, Stack, StackedViewShell, Text, Toggle, useToast, Show, StickyToolbar } from "../../../ui";
-import { apiClient } from "../../../http";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
-import { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms";
-import { SectionForm, useSectionFormNav } from "../../shell";
+import { Button, 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 { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms/index.js";
+import { SectionForm, useSectionFormNav } from "../../shell/index.js";
+/*
+ * ── Content & Templates (C2c) ────────────────────────────────────────────────
+ *
+ * 🛑 `highlights` and `faqs` have had NO editor since they shipped, and B3
+ * added `contentBody`, `descriptionTemplates` and `productDefaults` with none
+ * either. All five are in `CATEGORIES_UPDATABLE_FIELDS`, so the repository has
+ * always been willing — the only thing missing was somewhere to type them.
+ *
+ * ## Why string arrays are newline-separated textareas
+ *
+ * `highlights`, `inTheBox` and `seoKeywords` are flat `string[]`. A drag-handle
+ * repeater for each would be three widgets to build and three to maintain, and
+ * an admin pasting six bullets from a competitor's page wants to paste six
+ * lines. The textarea IS the better tool here, not a shortcut — order is
+ * preserved, reordering is a cut-and-paste, and a blank line is dropped rather
+ * than stored as an empty bullet.
+ *
+ * Repeaters are reserved for the shapes that genuinely need per-row fields:
+ * FAQs (question + answer), specifications (name + value + unit) and templates
+ * (label + variant + body).
+ */
+const linesToList = (raw) => raw
+    .split("\n")
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+const listToLines = (list) => (list ?? []).join("\n");
+const TEMPLATE_VARIANT_OPTIONS = [
+    { value: "default", label: "Default — any condition" },
+    { value: "new_in_box", label: "New in box" },
+    { value: "new_in_packet", label: "New in packet" },
+    { value: "pre_owned", label: "Pre-owned / used" },
+    { value: "replica", label: "Reproduction" },
+];
+const AUTHENTICITY_OPTIONS = [
+    { value: "", label: "Not set — the seller chooses" },
+    { value: "original", label: "Original" },
+    { value: "reproduction", label: "Reproduction (midfake)" },
+    { value: "unverified", label: "Unverified" },
+];
+const CONDITION_DEFAULT_OPTIONS = [
+    { value: "", label: "Not set — the seller chooses" },
+    { value: "new", label: "New" },
+    { value: "like_new", label: "Like New" },
+    { value: "good", label: "Good" },
+    { value: "fair", label: "Fair" },
+    { 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)
+        params.set("q", query);
+    const res = await apiClient.get(`${ADMIN_ENDPOINTS.TAX_CODES}?${params.toString()}`);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const payload = res?.data ?? res;
+    const items = payload?.items ?? payload?.data ?? [];
+    return {
+        items: items.map((t) => ({
+            value: t.id,
+            label: t.label ?? `${t.hsnCode ?? t.id} — ${t.gstRate ?? "?"}%`,
+        })),
+        hasMore: payload?.hasMore ?? false,
+    };
+}
 /**
  * Covers every field the form actually edits.
  *
@@ -33,6 +109,32 @@ const categoryFormSchema = z.object({
         .or(z.literal("")),
     isActive: z.boolean().optional(),
     showInMenu: z.boolean().optional(),
+    // ── Content & Templates ──────────────────────────────────────────────────
+    contentBody: z
+        .string()
+        .max(12000, "Keep the body under 12,000 characters")
+        .optional()
+        .or(z.literal("")),
+    highlightsText: z.string().optional().or(z.literal("")),
+    taxCodeId: z.string().optional().or(z.literal("")),
+    defaultCondition: z.string().optional().or(z.literal("")),
+    defaultAuthenticity: z.string().optional().or(z.literal("")),
+    inTheBoxText: z.string().optional().or(z.literal("")),
+    seoTitleTemplate: z.string().max(200).optional().or(z.literal("")),
+    seoDescriptionTemplate: z.string().max(400).optional().or(z.literal("")),
+    seoKeywordsText: z.string().optional().or(z.literal("")),
+    /*
+     * Typed in a text input and sent through `Number()`, so validated as a
+     * numeric STRING here rather than coerced — the same treatment `order`
+     * already gets two fields up. A category default is a PACKED weight (C5a),
+     * which is why the helper text says so: it drives the shipping estimate, and
+     * seeding an item weight there under-estimates every booking.
+     */
+    weightG: z.string().regex(/^\d*$/, "Weight must be a whole number of grams").optional().or(z.literal("")),
+    dimL: z.string().regex(/^\d*\.?\d*$/, "Length must be a number").optional().or(z.literal("")),
+    dimW: z.string().regex(/^\d*\.?\d*$/, "Width must be a number").optional().or(z.literal("")),
+    dimH: z.string().regex(/^\d*\.?\d*$/, "Height must be a number").optional().or(z.literal("")),
+    fragile: z.boolean().optional(),
 });
 const EMPTY_VALUES = {
     name: "",
@@ -42,6 +144,20 @@ const EMPTY_VALUES = {
     order: "",
     isActive: true,
     showInMenu: true,
+    contentBody: "",
+    highlightsText: "",
+    taxCodeId: "",
+    defaultCondition: "",
+    defaultAuthenticity: "",
+    inTheBoxText: "",
+    seoTitleTemplate: "",
+    seoDescriptionTemplate: "",
+    seoKeywordsText: "",
+    weightG: "",
+    dimL: "",
+    dimW: "",
+    dimH: "",
+    fragile: false,
 };
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
@@ -62,6 +178,80 @@ async function loadCategoryOptions(query, page) {
         hasMore: payload?.hasMore ?? false,
     };
 }
+/**
+ * The content half of the PUT payload.
+ *
+ * 🛑 Every field is sent on EVERY save, including as an empty array or an
+ * omitted key — because the route spreads this straight into
+ * `categoriesRepository.update()`, and an admin who DELETES all five
+ * highlights must end up with no highlights rather than with the old five.
+ * Only sending non-empty values is how a removal silently fails, which is the
+ * defect the whole C2b-fix commit was about one layer down.
+ *
+ * `productDefaults` is rebuilt whole rather than merged, for the same reason —
+ * clearing the tax code has to mean clearing it. The advisory
+ * `priceGuidance` half is CARRIED THROUGH from the loaded document and never
+ * edited here: it is seed-owned market data plus C1's rollup output, and an
+ * editor that round-tripped it would let an admin overwrite a measured band by
+ * hand with nothing recording that they had.
+ */
+function buildContentPayload(v, faqs, specs, templates, carriedPriceGuidance) {
+    const num = (s) => {
+        const t = s.trim();
+        if (t === "")
+            return undefined;
+        const n = Number(t);
+        return Number.isFinite(n) ? n : undefined;
+    };
+    const str = (s) => {
+        const t = String(s ?? "").trim();
+        return t === "" ? undefined : t;
+    };
+    const list = (s) => {
+        const out = linesToList(String(s ?? ""));
+        return out.length === 0 ? undefined : out;
+    };
+    const l = num(String(v.dimL ?? ""));
+    const w = num(String(v.dimW ?? ""));
+    const h = num(String(v.dimH ?? ""));
+    const keptSpecs = specs.filter((s) => s.name.trim() !== "" && s.value.trim() !== "");
+    const authenticity = str(v.defaultAuthenticity);
+    /*
+     * Assembled field by field rather than through a `Record<string, unknown>`
+     * accumulator. The accumulator version was shorter and `audit-unknown-leakage`
+     * was right to reject it: `unknown` in a payload builder is how a wrong key
+     * or a wrong shape reaches Firestore with nothing to catch it, and this
+     * object's whole job is to be the right shape.
+     */
+    const defaults = {
+        ...(str(v.taxCodeId) ? { taxCodeId: str(v.taxCodeId) } : {}),
+        ...(str(v.defaultCondition) ? { defaultCondition: str(v.defaultCondition) } : {}),
+        ...(authenticity === "original" || authenticity === "reproduction" || authenticity === "unverified"
+            ? { defaultAuthenticity: authenticity }
+            : {}),
+        ...(list(v.inTheBoxText) ? { inTheBox: list(v.inTheBoxText) } : {}),
+        ...(str(v.seoTitleTemplate) ? { seoTitleTemplate: str(v.seoTitleTemplate) } : {}),
+        ...(str(v.seoDescriptionTemplate)
+            ? { seoDescriptionTemplate: str(v.seoDescriptionTemplate) }
+            : {}),
+        ...(list(v.seoKeywordsText) ? { seoKeywords: list(v.seoKeywordsText) } : {}),
+        ...(num(String(v.weightG ?? "")) != null ? { weightG: num(String(v.weightG ?? "")) } : {}),
+        ...(keptSpecs.length > 0 ? { specifications: keptSpecs } : {}),
+        // All three or none — a box with a length and no width is not a dimension.
+        ...(l != null && w != null && h != null ? { dimensionsCm: { l, w, h } } : {}),
+        ...(v.fragile === true ? { fragile: true } : {}),
+        ...(carriedPriceGuidance !== undefined ? { priceGuidance: carriedPriceGuidance } : {}),
+    };
+    return {
+        contentBody: String(v.contentBody ?? ""),
+        highlights: linesToList(String(v.highlightsText ?? "")),
+        faqs: faqs.filter((f) => f.question.trim() !== "" && f.answer.trim() !== ""),
+        descriptionTemplates: templates
+            .filter((t) => t.label.trim() !== "" && t.body.trim() !== "")
+            .map((t) => ({ ...t, id: t.id || toCategorySlug(t.label) || "template" })),
+        productDefaults: defaults,
+    };
+}
 function toCategorySlug(str) {
     return str
         .toLowerCase()
@@ -73,6 +263,19 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
     const isEdit = Boolean(categoryId);
     const [deleteOpen, setDeleteOpen] = React.useState(false);
     const [values, setValues] = React.useState(EMPTY_VALUES);
+    /*
+     * The three repeater arrays live OUTSIDE `values`.
+     *
+     * `CategoryFormValues` carries an index signature of `JsonValue` so
+     * `SectionForm` can map a Zod path back to the panel that owns it, and an
+     * array of objects satisfies that only after a cast at every read. Keeping
+     * them as their own typed state costs one extra dependency on the sections
+     * memo and buys real types at every use — the alternative is a `as any` in a
+     * render loop, which is where this codebase's worst defects live.
+     */
+    const [faqs, setFaqs] = React.useState([]);
+    const [specs, setSpecs] = React.useState([]);
+    const [templates, setTemplates] = React.useState([]);
     /* UI state, not a form value — whether the user has taken the slug over. */
     const [slugManual, setSlugManual] = React.useState(false);
     const { showToast } = useToast();
@@ -112,7 +315,29 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
             order: cat.order !== undefined ? String(cat.order) : "",
             isActive: cat.isActive ?? true,
             showInMenu: cat.display?.showInMenu ?? true,
+            contentBody: cat.contentBody ?? "",
+            highlightsText: listToLines(cat.highlights),
+            taxCodeId: cat.productDefaults?.taxCodeId ?? "",
+            defaultCondition: cat.productDefaults?.defaultCondition ?? "",
+            defaultAuthenticity: cat.productDefaults?.defaultAuthenticity ?? "",
+            inTheBoxText: listToLines(cat.productDefaults?.inTheBox),
+            seoTitleTemplate: cat.productDefaults?.seoTitleTemplate ?? "",
+            seoDescriptionTemplate: cat.productDefaults?.seoDescriptionTemplate ?? "",
+            seoKeywordsText: listToLines(cat.productDefaults?.seoKeywords),
+            weightG: cat.productDefaults?.weightG != null ? String(cat.productDefaults.weightG) : "",
+            dimL: cat.productDefaults?.dimensionsCm?.l != null ? String(cat.productDefaults.dimensionsCm.l) : "",
+            dimW: cat.productDefaults?.dimensionsCm?.w != null ? String(cat.productDefaults.dimensionsCm.w) : "",
+            dimH: cat.productDefaults?.dimensionsCm?.h != null ? String(cat.productDefaults.dimensionsCm.h) : "",
+            fragile: cat.productDefaults?.fragile ?? false,
         });
+        setFaqs((cat.faqs ?? []).map((f) => ({ ...f })));
+        setSpecs((cat.productDefaults?.specifications ?? []).map((s) => ({ ...s })));
+        setTemplates((cat.descriptionTemplates ?? []).map((t) => ({
+            id: t.id,
+            label: t.label,
+            variant: t.variant,
+            body: t.body,
+        })));
     }, [categoryQuery.data]);
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save category.",
@@ -128,7 +353,25 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
                 display: { showInMenu: values.showInMenu ?? true },
             };
             if (isEdit) {
-                return apiClient.put(ADMIN_ENDPOINTS.CATEGORY_BY_ID(categoryId), payload);
+                /*
+                 * 🛑 The content fields go on the PUT only, and that is not a
+                 * limitation to work around.
+                 *
+                 * `POST /api/admin/categories`' schema is a `z.object()` naming nine
+                 * keys, and Zod STRIPS unknown ones — so sending a description
+                 * template on create would return 200, show a success toast and write
+                 * nothing (Root Cause #76b, the admin grouped-listings shape). The
+                 * section renders only in edit mode so the form never shows a field it
+                 * is about to discard.
+                 *
+                 * It is also the right workflow: creating a category is naming it and
+                 * placing it in the tree. Writing its SEO body and its five
+                 * description templates is a separate sitting.
+                 */
+                return apiClient.put(ADMIN_ENDPOINTS.CATEGORY_BY_ID(categoryId), {
+                    ...payload,
+                    ...buildContentPayload(values, faqs, specs, templates, categoryQuery.data?.productDefaults?.["priceGuidance"]),
+                });
             }
             return apiClient.post(ADMIN_ENDPOINTS.CATEGORIES, payload);
         },
@@ -178,7 +421,30 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
             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 }) })] })),
         },
-    ], []);
+        /*
+         * 🛑 EDIT ONLY. The create route's `z.object()` would strip every one of
+         * these and answer 200, so the form must not offer them yet. See
+         * buildContentPayload's header.
+         */
+        ...(isEdit
+            ? [
+                {
+                    id: "content",
+                    label: "Content & Templates",
+                    fields: ["contentBody", "highlightsText"],
+                    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." }))] }), _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
+                                                        ? `Slots used: ${usedPlaceholders(row.body).map((p) => `{{${p}}}`).join(", ")}`
+                                                        : "No slots used — this body will read identically on every listing." })] })) })] })] })),
+                },
+                {
+                    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 }) })] })),
+                },
+            ]
+            : []),
+    ], [isEdit, faqs, specs, templates]);
     const nav = useSectionFormNav(sections, values);
     const { shellCtx } = useFormShellState(categoryFormSchema, {
         sections: nav.sectionMeta,

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

@@ -10,10 +10,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * of a three-option sort array. See listing-type-listing-config.ts.
  */
 import React from "react";
-import { ListingLayout } from "../../../ui";
-import { buildListingTypeListingConfig } from "../../products/config/listing-type-listing-config";
-import { DataListingView } from "./DataListingView";
-import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+import { ListingLayout } from "../../../ui/index.js";
+import { buildListingTypeListingConfig } from "../../products/config/listing-type-listing-config.js";
+import { DataListingView } from "./DataListingView.js";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope.js";
 const LISTING_TYPES = ["classified"];
 const CONFIG_OPTS = {
     title: "Classified",

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

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Span, useApiMutation } from "@mohasinac/appkit/client";
 import { useQueryClient } from "@tanstack/react-query";
-import { Button, Div, FormActions, Row, SideDrawer, Stack, Text, useToast } from "../../../ui";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { apiClient } from "../../../http";
+import { Button, Div, FormActions, Row, SideDrawer, Stack, Text, useToast } from "../../../ui/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { apiClient } from "../../../http/index.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
     p4: "p-[var(--appkit-space-4)]",

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

@@ -5,16 +5,16 @@ import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
-import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
-import { ADMIN_CONTACT_STATUS_TABS } from "../constants/filter-tabs";
-import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
-import { DataListingView } from "./DataListingView";
-import { AdminContactEditorView } from "./AdminContactEditorView";
-import { apiClient } from "../../../http";
+import { ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers.js";
+import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs.js";
+import { ADMIN_CONTACT_STATUS_TABS } from "../constants/filter-tabs.js";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData.js";
+import { DataListingView } from "./DataListingView.js";
+import { AdminContactEditorView } from "./AdminContactEditorView.js";
+import { apiClient } from "../../../http/index.js";
 export function AdminContactView({ children, onBulkMarkRead, onBulkArchive, onBulkDelete, ...props }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { FileText, Calendar, BookOpen, Layout, Grid, Megaphone, Mail } from "lucide-react";
-import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Text, Ul } from "../../../ui";
-import { GC } from "../../_guide-cls";
+import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Text, Ul } from "../../../ui/index.js";
+import { GC } from "../../_guide-cls.js";
 export function AdminContentGuideView() {
     return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "xl", children: _jsx(FileText, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Content & Marketing" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Blog posts, events, FAQs, carousel, homepage sections, ads, and newsletter on LetItRip." })] }), [
                 {

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

@@ -1,20 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { normalizeError } from "../../../errors/normalize";
+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";
-import { FieldInput, FormErrorSummary } from "../../../ui/forms";
-import { apiClient } from "../../../http";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { adminCouponFormSchema } from "../../seller/schemas/coupon-form";
-import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
-import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
-import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
-import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
-import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
-import { CategoryChipPicker } from "../../seller/components/CategoryChipPicker";
+import { ConfirmDeleteModal, Div, StackedViewShell, useToast } from "../../../ui/index.js";
+import { FieldInput, FormErrorSummary } from "../../../ui/forms/index.js";
+import { apiClient } from "../../../http/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { adminCouponFormSchema } from "../../seller/schemas/coupon-form.js";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell.js";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues.js";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections.js";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm.js";
+import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect.js";
+import { CategoryChipPicker } from "../../seller/components/CategoryChipPicker.js";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };

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

@@ -1,19 +1,19 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { normalizeError } from "../../../errors/normalize";
+import { normalizeError } from "../../../errors/normalize.js";
 import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useCallback } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { Div, Grid, FilterChipGroup, ListingLayout, Text, useToast } from "../../../ui";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { ROW_ACTION_META, ROW_ACTION_ID, ADMIN_BULK_ACTIONS } from "../../products/constants/action-defs";
-import { ADMIN_COUPON_TYPE_TABS } from "../constants/filter-tabs";
-import { apiClient } from "../../../http";
-import { toRecordArray, toStringValue, } from "../hooks/useAdminListingData";
-import { DataListingView } from "./DataListingView";
-import { AdminCouponEditorView } from "./AdminCouponEditorView";
-import { CouponCard } from "../../promotions/components/CouponCard";
+import { Div, Grid, FilterChipGroup, ListingLayout, Text, useToast } from "../../../ui/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { ROW_ACTION_META, ROW_ACTION_ID, ADMIN_BULK_ACTIONS } from "../../products/constants/action-defs.js";
+import { ADMIN_COUPON_TYPE_TABS } from "../constants/filter-tabs.js";
+import { apiClient } from "../../../http/index.js";
+import { toRecordArray, toStringValue, } from "../hooks/useAdminListingData.js";
+import { DataListingView } from "./DataListingView.js";
+import { AdminCouponEditorView } from "./AdminCouponEditorView.js";
+import { CouponCard } from "../../promotions/components/CouponCard.js";
 export function AdminCouponsView({ children, onBulkArchive, onBulkDelete, ...props }) {
     const { showToast } = useToast();
     const queryClient = useQueryClient();

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
-import { StackedViewShell } from "../../../ui";
-import { Alert } from "../../../ui";
-import { apiClient } from "../../../http";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { DashboardStatsGrid } from "./DashboardStats";
+import { StackedViewShell } from "../../../ui/index.js";
+import { Alert } from "../../../ui/index.js";
+import { apiClient } from "../../../http/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { DashboardStatsGrid } from "./DashboardStats.js";
 export function AdminDashboardView({ labels = {}, endpoint = ADMIN_ENDPOINTS.DASHBOARD, stats = {}, isLoading = false, renderStats, renderQuickActions, renderRecentActivity, renderAlerts, renderCharts, ...rest }) {
     const shouldFetch = Object.keys(stats).length === 0;
     const query = useQuery({

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

@@ -10,10 +10,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * of a three-option sort array. See listing-type-listing-config.ts.
  */
 import React from "react";
-import { ListingLayout } from "../../../ui";
-import { buildListingTypeListingConfig } from "../../products/config/listing-type-listing-config";
-import { DataListingView } from "./DataListingView";
-import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+import { ListingLayout } from "../../../ui/index.js";
+import { buildListingTypeListingConfig } from "../../products/config/listing-type-listing-config.js";
+import { DataListingView } from "./DataListingView.js";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope.js";
 const LISTING_TYPES = ["digital-code"];
 const CONFIG_OPTS = {
     title: "Digital Codes",

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

@@ -3,16 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { Checkbox, ConfirmDeleteModal, Details, Div, PaginatedSelect, SideDrawer, Span, Stack, Summary, Text, useToast } from "../../../ui";
-import { apiClient } from "../../../http";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { PERMISSION_GROUPS, PERMISSION_DOMAINS, getPermissionsForDomain, formatPermLabel, } from "../../auth/permissions/constants";
-import { employeeInviteSchema, employeePermissionsSchema, } from "../schemas/admin-ops-forms";
-import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
-import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
-import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
-import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
-import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
+import { Checkbox, ConfirmDeleteModal, Details, Div, PaginatedSelect, SideDrawer, Span, Stack, Summary, Text, useToast } from "../../../ui/index.js";
+import { apiClient } from "../../../http/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { PERMISSION_GROUPS, PERMISSION_DOMAINS, getPermissionsForDomain, formatPermLabel, } from "../../auth/permissions/constants.js";
+import { employeeInviteSchema, employeePermissionsSchema, } from "../schemas/admin-ops-forms.js";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary.js";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell.js";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues.js";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections.js";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm.js";
 const __O = {
     yAuto: "overflow-y-auto",
 };

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

@@ -4,12 +4,12 @@ import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
-import { ConfirmDeleteModal, Div, Input, RichTextEditor, Select, Stack, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
-import { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms";
-import { SectionForm, useSectionFormNav } from "../../shell";
-import { apiClient } from "../../../http";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { FAQ_CATEGORY_LABELS } from "../../faq/schemas/firestore";
+import { ConfirmDeleteModal, Div, Input, RichTextEditor, Select, Stack, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui/index.js";
+import { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms/index.js";
+import { SectionForm, useSectionFormNav } from "../../shell/index.js";
+import { apiClient } from "../../../http/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { FAQ_CATEGORY_LABELS } from "../../faq/schemas/firestore.js";
 /**
  * Matches the draft this form actually holds, and the payload it actually
  * sends.

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

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useMemo } from "react";
-import { FilterChipGroup, Heading, ListingLayout, Span, Text } from "../../../ui";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { ADMIN_BULK_ACTIONS, ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
-import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
-import { DataListingView } from "./DataListingView";
-import { AdminFaqEditorView } from "./AdminFaqEditorView";
+import { FilterChipGroup, Heading, ListingLayout, Span, Text } from "../../../ui/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { ADMIN_BULK_ACTIONS, ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs.js";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData.js";
+import { DataListingView } from "./DataListingView.js";
+import { AdminFaqEditorView } from "./AdminFaqEditorView.js";
 const COLUMNS = [
     {
         key: "primary",

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

@@ -4,15 +4,15 @@ import { Row } from "@mohasinac/appkit/ui";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Checkbox, ConfirmDeleteModal, Div, Label, StackedViewShell, Text, useToast, } from "../../../ui";
-import { apiClient } from "../../../http";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { FormErrorSummary, applyZodIssues } from "../../../ui/forms";
-import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
-import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
-import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
-import { productFeatureFormSchema } from "../../products/schemas/product-features.validators";
-import { PRODUCT_FEATURE_CATEGORY_OPTIONS, PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER, PRODUCT_FEATURE_ICON_COLOR_OPTIONS, PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS, PRODUCT_FEATURE_SCOPE_OPTIONS, } from "../../products/constants/product-features.constants";
+import { Checkbox, ConfirmDeleteModal, Div, Label, StackedViewShell, Text, useToast, } from "../../../ui/index.js";
+import { apiClient } from "../../../http/index.js";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { FormErrorSummary, applyZodIssues } from "../../../ui/forms/index.js";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell.js";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections.js";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm.js";
+import { productFeatureFormSchema } from "../../products/schemas/product-features.validators.js";
+import { PRODUCT_FEATURE_CATEGORY_OPTIONS, PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER, PRODUCT_FEATURE_ICON_COLOR_OPTIONS, PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS, PRODUCT_FEATURE_SCOPE_OPTIONS, } from "../../products/constants/product-features.constants.js";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };