@mohasinac/appkit 4.58.0 → 4.60.0

package/dist/features/seller/components/SellerProductShell.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation.js";
 import { z } from "zod";
 import { FormShell, SectionForm, useSectionFormNav, useFormShell } from "../../shell/index.js";
-import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms/index.js";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary, AddAnotherToggle, addAnotherSubmitLabel, } from "../../../ui/forms/index.js";
 import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, TagInput, Text, Toggle, useToast, Row } from "../../../ui/index.js";
 import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "../../media/index.js";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate.js";
@@ -15,6 +15,9 @@ import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js"
 import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config.js";
 import { PRODUCT_MAX_IMAGES, PRODUCT_MAX_VIDEOS, PRODUCT_IMAGE_INDEX_MAX, } from "../../../_internal/shared/media/limits.js";
 import { isFinalSale } from "../../products/constants/final-sale.js";
+// The one `ProductImage[] | string[]` → `string[]` normaliser — a value
+// import, needed at runtime by `galleryFields` below.
+import { productImageUrls } from "../../products/schemas/firestore.js";
 import { ProductFeaturesSelector } from "../../products/components/ProductFeaturesSelector.js";
 import { normalizeError } from "../../../errors/normalize.js";
 /**
@@ -143,7 +146,20 @@ function StepBasic({ values, onChange, renderCategorySelector, renderBrandSelect
                                     : /* And back again drops the count, for the same reason. */
                                         { isLot: false, lotSize: undefined }), label: values.isLot ? "A lot of several items" : "A single item", size: "sm" }), values.isLot && (_jsx(FormField, { name: "lotSize", label: "How many?", type: "number", value: values.lotSize != null ? String(values.lotSize) : "", onChange: (v) => onChange({ lotSize: v ? Number(v) : undefined }), placeholder: "optional" }))] }), _jsx(Text, { size: "xs", color: "muted", children: values.isLot
                             ? "A lot files under a category rather than one model, because a category is a collection — naming one model would claim every item in the pile is that model."
-                            : "A single item can be filed against the exact bey or part it is, so buyers searching that name find it." })] }), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Category" }), renderCategorySelector({
+                            : "A single item can be filed against the exact bey or part it is, so buyers searching that name find it." })] }), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (
+                    /*
+                     * 🛑 ONE element, not a Fragment. `.appkit-form-group` is
+                     * `display: grid` (Form.style.css), and a Fragment renders no DOM
+                     * node — so `<>{label}{picker}</>` handed the grid THREE children
+                     * instead of two. At `md:grid-cols-2` that put the word "Category"
+                     * alone in the left cell, the picker in the right cell, and pushed
+                     * Condition onto its own row: three different label layouts in one
+                     * section, from one pair of angle brackets.
+                     *
+                     * `FormField` (the else branch, and Condition beside it) renders its
+                     * own single wrapper, which is why only this branch was affected.
+                     */
+                    _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Category" }), renderCategorySelector({
                                 value: values.category ?? "",
                                 onChange: (v) => onChange({ category: v }),
                                 isLot: values.isLot === true,
@@ -170,7 +186,7 @@ function StepBasic({ values, onChange, renderCategorySelector, renderBrandSelect
                 context: templateContext,
                 isDescriptionDirty,
                 onApply: onChange,
-            }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: description, onChange: (v) => onChange({ description: v }), placeholder: "Describe your listing in detail\u2026" }), renderBrandSelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Brand" }), renderBrandSelector({ value: values.brand ?? "", onChange: (v) => onChange({ brand: v }) })] })) : (_jsx(FormField, { name: "brand", label: "Brand", type: "text", value: values.brand ?? "", onChange: (v) => onChange({ brand: v }), placeholder: "e.g. Pok\u00E9mon Company" })), _jsx(TagInput, { label: "Tags", value: values.tags ?? [], onChange: (tags) => onChange({ tags }), placeholder: "pokemon, psa9, charizard, holo" }), _jsx(BarcodeField, { value: values.barcodeId ?? "", onChange: (v) => onChange({ barcodeId: v || undefined }), onScan: (v) => onChange({ barcodeId: v }), helperText: "Leave blank to auto-generate. Scan a pre-printed sticker to link it." })] }));
+            }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: description, onChange: (v) => onChange({ description: v }), placeholder: "Describe your listing in detail\u2026" }), renderBrandSelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Brand" }), renderBrandSelector({ value: values.brand ?? "", onChange: (v) => onChange({ brand: v }) })] })) : (_jsx(FormField, { name: "brand", label: "Brand", type: "text", value: values.brand ?? "", onChange: (v) => onChange({ brand: v }), placeholder: "e.g. Pok\u00E9mon Company" })), _jsx(TagInput, { label: "Tags", value: values.tags ?? [], onChange: (tags) => onChange({ tags }), placeholder: "pokemon, psa9, charizard, holo" }), _jsx(FormField, { name: "sku", label: "SKU", type: "text", value: values.sku ?? "", onChange: (v) => onChange({ sku: v || undefined }), placeholder: "LIR-BURS-001", hint: "Your own stock code. Leave blank and one is generated from the category." }), _jsx(BarcodeField, { value: values.barcodeId ?? "", onChange: (v) => onChange({ barcodeId: v || undefined }), onScan: (v) => onChange({ barcodeId: v }), helperText: "Leave blank to auto-generate. Scan a pre-printed sticker to link it." })] }));
 }
 // ── Step 1b: Details — the inherited-but-editable fields (C2c) ───────────────
 const AUTHENTICITY_OPTIONS = [
@@ -211,13 +227,21 @@ function StepMedia({ values, onChange, storeSlug = "store", }) {
     /*
      * One control for both media kinds.
      *
-     * The document keeps `images: string[]` and a single `video` — unchanged —
-     * so this seeds from both and splits again on write. Collapsing the two
-     * into one stored `media[]` would be a Firestore migration touching cards,
-     * detail, cart, orders and search; the input surface is what needed fixing.
+     * This seeds from `images` + `video` and splits them again on write.
+     * Collapsing the two into one stored `media[]` would be a Firestore
+     * migration touching cards, detail, cart, orders and search; the input
+     * surface is what needed fixing.
+     *
+     * 🛑 `images` IS NOT `string[]` AT RUNTIME. This comment asserted it was,
+     * and the line below mapped each entry as a URL — but
+     * `ProductDocument.images` has been `ProductImage[]` (objects) since A6, so
+     * the seller's own gallery tiles rendered `MediaImage`'s 📦 placeholder
+     * instead of their photos. Same defect as `ProductForm`, same cause: a cast
+     * at the seeding boundary claims `Partial<ProductItem>` while the document
+     * holds objects. `productImageUrls` accepts both shapes.
      */
     const galleryFields = [
-        ...(values.images ?? []).map((url) => ({ url, type: "image" })),
+        ...productImageUrls(values.images).map((url) => ({ url, type: "image" })),
         ...(values.video?.url
             ? [{
                     url: values.video.url,
@@ -508,7 +532,18 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
      * yet — it needs the sections — so it is composed in below. That ordering is
      * why the original `wizardShellCtx` existed; only its contents change.
      */
-    const { shellCtx: baseShellCtx, setFieldError, clearErrors, validate } = useFormShellState(sellerProductSchema);
+    const { shellCtx: baseShellCtx, setFieldError, clearErrors, validate, markSubmitAttempted } = 
+    /*
+     * 🛑 "Create & add another" OFFERED ONLY IN CREATE MODE. Editing an
+     * existing listing and then "adding another" would have to mean "save this
+     * one, then start a blank one" — a different action, and not one anybody
+     * reaches for while fixing a typo. The toggle hides itself on edit too,
+     * but gating the OFFER means the branch below cannot be reached from edit
+     * at all rather than relying on a component to hide.
+     */
+    useFormShellState(sellerProductSchema, undefined, {
+        allowAddAnother: mode === "create",
+    });
     const [stepError, setStepError] = useState(null);
     const { isDirty, markDirty, markClean } = useFormShell();
     const router = useRouter();
@@ -546,6 +581,33 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
         else
             router.back();
     }, [onDiscard, router]);
+    /*
+     * ── "Create & add another": what survives, and what must not ──────────────
+     *
+     * 🛑 AN ALLOW-LIST, NOT A DELETE-LIST. The obvious implementation is
+     * `{ ...draft, title: "", images: [] }` — spread the last one and blank the
+     * bits that look item-specific. That is the deny-list shape this codebase
+     * has been bitten by all session (Root Cause #70: a public payload built by
+     * spreading a document and deleting three keys published everything nobody
+     * thought to delete). Here it would carry the previous listing's barcode,
+     * its SKU, its slug, its SEO title, its stock count and its video into the
+     * next record — and `barcodeId` and `slug` are UNIQUE, so the second save
+     * would either collide or silently overwrite the first listing.
+     *
+     * So the next draft is built from NOTHING plus the four fields a batch
+     * genuinely shares. A field added to the draft type later is excluded by
+     * default, which is the direction that cannot lose data.
+     *
+     * `listingType` and the store are PROPS, not draft fields, so they persist
+     * without being listed — they are part of which editor is mounted.
+     */
+    const nextDraftForAnother = useCallback((saved) => ({
+        status: "draft",
+        condition: saved.condition ?? "new",
+        category: saved.category,
+        brand: saved.brand,
+    }), []);
+    const addAnother = baseShellCtx.addAnother;
     // `silent` suppresses the success toast — used by the debounced auto-save
     // effect above so it doesn't pop a "Saved." toast every couple of seconds
     // while the seller is still typing. The manual "Save Draft"/"Save Changes"
@@ -567,6 +629,30 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
                 return;
             }
             applyZodIssues(result.issues ?? [], setFieldError);
+            /*
+             * 🛑 WITHOUT THIS THE TOAST IS A LIE — Root Cause #74, regressed here.
+             *
+             * `<FormErrorSummary>` early-returns `null` unless `ctx.submitAttempted`,
+             * and the per-field inline errors gate on `touched` — so on a field the
+             * seller never visited, nothing renders either. This form's Save and
+             * Publish are `type="button"` with `onClick`, which fires no native
+             * submit event, so nothing was marking the attempt. The result was a
+             * toast reading "Fix the highlighted errors and try again" with
+             * **nothing highlighted anywhere on the page** — four of them stacked up
+             * in the reported screenshot, and no way to find a single field.
+             *
+             * CLAUDE.md states the rule exactly: "Marking the attempt has to happen
+             * where an attempt happens", and a `type="button"` submit must call this
+             * itself. It is marked only on the FAILURE path: a save that succeeds
+             * has no errors to reveal, and flipping the flag anyway would arm the
+             * summary for every later keystroke.
+             *
+             * Marked even when `silent` (auto-save). The summary is the only durable
+             * record of what is wrong — auto-save deliberately suppresses its toast
+             * to avoid one every two seconds, so suppressing the summary too would
+             * leave the seller with no signal at all.
+             */
+            markSubmitAttempted();
             if (!silent) {
                 showToast(saveFailureMessage(result.code, (result.issues ?? []).length), "error");
             }
@@ -576,7 +662,7 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
             if (!silent)
                 showToast("Failed to save.", "error");
         }
-    }, [draft, onSave, markClean, clearErrors, setFieldError, showToast]);
+    }, [draft, onSave, markClean, clearErrors, setFieldError, showToast, markSubmitAttempted]);
     const handleAutoSave = useCallback(async () => {
         try {
             await handleSave(true);
@@ -605,17 +691,41 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
             if (result.ok) {
                 markClean();
                 clearErrors();
+                /*
+                 * 🛑 THE TOAST NAMES WHAT WAS PUBLISHED, because the form is about to
+                 * be empty. "Published." over a blank form reads as though the thing
+                 * on screen vanished; "Published Dran Sword. Next one — category and
+                 * condition kept." says what happened and what was kept, which is the
+                 * only confirmation the seller gets that their work landed.
+                 */
+                if (addAnother) {
+                    const title = draft.title?.trim();
+                    setDraft(nextDraftForAnother(draft));
+                    /*
+                     * `markClean()` ran above, and the fresh draft must stay clean:
+                     * `update()` marks dirty, and `setDraft` here deliberately bypasses
+                     * it. Otherwise the 2-second create-mode auto-save effect fires on
+                     * the empty draft and writes a second, blank listing.
+                     */
+                    showToast(title
+                        ? `Published ${title}. Next one — category and condition kept.`
+                        : "Published. Next one — category and condition kept.", "success");
+                    return;
+                }
                 showToast("Published.", "success");
                 return;
             }
             applyZodIssues(result.issues ?? [], setFieldError);
+            // See the note on the same call in `handleSave` — without this the
+            // "Fix the highlighted errors" toast points at nothing (Root Cause #74).
+            markSubmitAttempted();
             showToast(saveFailureMessage(result.code, (result.issues ?? []).length), "error");
         }
         catch (err) {
             void normalizeError(err);
             showToast("Failed to publish.", "error");
         }
-    }, [draft, onPublish, markClean, clearErrors, setFieldError, showToast]);
+    }, [draft, onPublish, markClean, clearErrors, setFieldError, showToast, addAnother, nextDraftForAnother, markSubmitAttempted]);
     const listingTypeLabel = pluginForMode(listingType).typeLabel;
     const typeSpecificSection = TYPE_SPECIFIC_SECTIONS[listingType] ?? null;
     const sections = [
@@ -749,7 +859,7 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
                     }) }) }) }));
     }
     if (mode === "create") {
-        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: previewSlot, splitPreview: !!previewSlot, renderBottomBar: () => (_jsxs(Div, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(Div, { paddingX: "x-5", padding: "y-sm", children: _jsx(FormErrorSummary, {}) }) }), _jsx(Div, { paddingX: "x-5", padding: "b-sm", children: _jsxs(Row, { gap: "sm", justify: "between", wrap: true, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => void handleSave(), disabled: isLoading || !draft.title?.trim(), children: "Save as draft & finish later" }), _jsx(Button, { variant: "primary", onClick: () => void handlePublish(), isLoading: isLoading, disabled: isLoading, children: `Publish ${listingTypeLabel}` })] }) }), stepError && (_jsx(Text, { className: "text-[var(--appkit-color-error)] px-[1.25rem] pb-[0.75rem]", size: "sm", children: stepError }))] })), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handlePublish, schema: sellerProductSchema, openIds: openIds, onOpenChange: setOpenIds, isLoading: isLoading, hideActions: true }) }) }));
+        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: previewSlot, splitPreview: !!previewSlot, renderBottomBar: () => (_jsxs(Div, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(Div, { paddingX: "x-5", padding: "y-sm", children: _jsx(FormErrorSummary, {}) }) }), _jsxs(Div, { paddingX: "x-5", padding: "b-sm", children: [_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(AddAnotherToggle, { noun: listingTypeLabel.toLowerCase(), isCreate: mode === "create" }) }), _jsxs(Row, { gap: "sm", justify: "between", wrap: true, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => void handleSave(), disabled: isLoading || !draft.title?.trim(), children: "Save as draft & finish later" }), _jsx(Button, { variant: "primary", onClick: () => void handlePublish(), isLoading: isLoading, disabled: isLoading, children: addAnotherSubmitLabel(`Publish ${listingTypeLabel}`, addAnother) })] })] }), stepError && (_jsx(Text, { className: "text-[var(--appkit-color-error)] px-[1.25rem] pb-[0.75rem]", size: "sm", children: stepError }))] })), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handlePublish, schema: sellerProductSchema, openIds: openIds, onOpenChange: setOpenIds, isLoading: isLoading, hideActions: true }) }) }));
     }
     // Edit mode — FormShell with section nav + full form
     const editSections = [
@@ -759,5 +869,5 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
     return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, footerTopSlot: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(FormErrorSummary, {}) }), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), typeSpecificSection && (_jsxs(Section, { id: typeSpecificSection.id, children: [_jsx(Heading, { level: 3, className: "mb-4", children: typeSpecificSection.sectionHeading ?? typeSpecificSection.label }), typeSpecificSection.render({ values: draft, onChange: update, errors: {} }), mode === "edit" &&
                                 listingType === "digital-code" &&
                                 productId &&
-                                renderDigitalContentPool?.(productId)] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "returns", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Returns" }), _jsx(StepReturns, { values: draft, onChange: update })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-secondary-text)]", size: "xs", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
+                                renderDigitalContentPool?.(productId)] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "returns", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Returns" }), _jsx(StepReturns, { values: draft, onChange: update })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "xs", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
 }

package/dist/features/seller/components/SellerReviewsView.js

@@ -188,6 +188,8 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
     const config = {
         portal: "seller",
         title: "Reviews",
+        // The page authors its own visible <h1>, so the shell must not add a second.
+        hideHeader: true,
         searchPlaceholder: "Search product, reviewer, or comment…",
         emptyLabel: "No reviews found.",
         filterKeys: ["rating", "replied"],
@@ -226,7 +228,7 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
                 setBulkReplyOpen(true);
             },
         })),
-        renderCards: (rows, _view, selection, isLoading) => (_jsx(Stack, { gap: "md", children: isLoading ? (_jsx(Div, { className: "text-center", padding: "y-xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Loading reviews\u2026" }) })) : rows.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-3xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "No reviews found." }) })) : (rows.map((review) => (_jsx(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", padding: "md", children: _jsxs(Row, { align: "start", justify: "between", gap: "3", wrap: true, children: [_jsxs(Row, { align: "start", className: "flex-1 min-w-0", gap: "3", children: [_jsx(Checkbox, { checked: selection.selectedIds.includes(review.id), onChange: () => selection.toggleSelect(review.id), "aria-label": "Select review" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate", weight: "medium", children: review.productTitle }), _jsxs(Row, { className: "mt-1", align: "center", gap: "sm", wrap: true, children: [_jsx(Stars, { rating: review.rating }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["by ", review.userName] }), review.verified && _jsx(Badge, { variant: "success", children: "Verified" }), statusBadge(review.status), _jsx(Badge, { variant: review.sellerReply ? "success" : "warning", children: review.sellerReply ? "Store replied" : "Awaiting store reply" })] }), review.title && _jsx(Text, { className: "mt-2", weight: "medium", children: review.title }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-secondary)] line-clamp-3", size: "sm", children: review.comment }), review.sellerReply && (_jsxs(Div, { className: "mt-2 pl-[0.75rem] border-l-2 border-[var(--appkit-color-primary)]", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "Store reply:" }), _jsx(Text, { size: "sm", children: review.sellerReply })] }))] })] }), _jsxs(Row, { className: "flex-shrink-0", gap: "sm", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => openReply(review), children: review.sellerReply ? "Edit Reply" : ACTIONS.STORE["reply-review"].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setContestTarget(review), children: ACTIONS.STORE["contest-review"].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setFeedbackTarget(review), children: ACTIONS.STORE["buyer-feedback"].label })] })] }) }, review.id)))) })),
+        renderCards: (rows, _view, selection, isLoading) => (_jsx(Stack, { gap: "md", children: isLoading ? (_jsx(Div, { className: "text-center", padding: "y-xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Loading reviews\u2026" }) })) : rows.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-3xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "No reviews found." }) })) : (rows.map((review) => (_jsx(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", padding: "md", children: _jsxs(Row, { align: "start", justify: "between", gap: "3", wrap: true, children: [_jsxs(Row, { align: "start", className: "flex-1 min-w-0", gap: "3", children: [_jsx(Checkbox, { checked: selection.selectedIds.includes(review.id), onChange: () => selection.toggleSelect(review.id), "aria-label": "Select review" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate", weight: "medium", children: review.productTitle }), _jsxs(Row, { className: "mt-1", align: "center", gap: "sm", wrap: true, children: [_jsx(Stars, { rating: review.rating }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["by ", review.userName] }), review.verified && _jsx(Badge, { variant: "success", children: "Verified" }), statusBadge(review.status), _jsx(Badge, { variant: review.sellerReply ? "success" : "warning", children: review.sellerReply ? "Store replied" : "Awaiting store reply" })] }), review.title && _jsx(Text, { className: "mt-2", weight: "medium", children: review.title }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)] line-clamp-3", size: "sm", children: review.comment }), review.sellerReply && (_jsxs(Div, { className: "mt-2 pl-[0.75rem] border-l-2 border-[var(--appkit-color-primary)]", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "Store reply:" }), _jsx(Text, { size: "sm", children: review.sellerReply })] }))] })] }), _jsxs(Row, { className: "flex-shrink-0", gap: "sm", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => openReply(review), children: review.sellerReply ? "Edit Reply" : ACTIONS.STORE["reply-review"].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setContestTarget(review), children: ACTIONS.STORE["contest-review"].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setFeedbackTarget(review), children: ACTIONS.STORE["buyer-feedback"].label })] })] }) }, review.id)))) })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: !!replyTarget, onClose: () => setReplyTarget(null), title: replyTarget?.sellerReply ? "Edit Reply" : "Reply to Review", mode: "create", children: _jsxs(Stack, { gap: "md", className: `${__P.p4}`, children: [replyTarget && (_jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-muted)]`, rounded: "default", children: [_jsx(Stars, { rating: replyTarget.rating }), _jsx(Text, { className: "mt-1", size: "sm", children: replyTarget.comment })] })), replyError && _jsx(Alert, { variant: "error", children: replyError }), _jsx(ReviewTextForm, { schema: reviewReplySchema, values: replyDraft, onChange: (partial) => setReplyDraft((d) => ({ ...d, ...partial })), onSubmit: () => void handleReplySave(refetchReviews), submitLabel: replyTarget?.sellerReply ? "Update Reply" : "Post Reply", onCancel: () => setReplyTarget(null), isLoading: replySaving, scope: "store:review-reply" })] }) }), _jsx(Modal, { isOpen: bulkReplyOpen, onClose: () => setBulkReplyOpen(false), title: "Bulk reply to selected reviews", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewBulkReplySchema, values: bulkDraft, onChange: (partial) => setBulkDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitBulkReply(), submitLabel: "Send reply", onCancel: () => setBulkReplyOpen(false), isLoading: bulkSaving, scope: "store:review-bulk-reply" }) }) }), _jsx(Modal, { isOpen: !!contestTarget, onClose: () => setContestTarget(null), title: "Contest this review", children: _jsxs(Stack, { gap: "md", padding: "2xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Flag this review for admin investigation." }), _jsx(ReviewTextForm, { schema: reviewContestSchema, values: contestDraft, onChange: (partial) => setContestDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitContest(refetchReviews), submitLabel: "Submit", onCancel: () => setContestTarget(null), scope: "store:review-contest" })] }) }), _jsx(Modal, { isOpen: !!feedbackTarget, onClose: () => setFeedbackTarget(null), title: "Send feedback to buyer", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewFeedbackSchema, values: feedbackDraft, onChange: (partial) => setFeedbackDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitFeedback(), submitLabel: "Send", onCancel: () => setFeedbackTarget(null), scope: "store:review-feedback" }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: !!replyTarget, onClose: () => setReplyTarget(null), title: replyTarget?.sellerReply ? "Edit Reply" : "Reply to Review", mode: "create", children: _jsxs(Stack, { gap: "md", className: `${__P.p4}`, children: [replyTarget && (_jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-bg)]`, rounded: "default", children: [_jsx(Stars, { rating: replyTarget.rating }), _jsx(Text, { className: "mt-1", size: "sm", children: replyTarget.comment })] })), replyError && _jsx(Alert, { variant: "error", children: replyError }), _jsx(ReviewTextForm, { schema: reviewReplySchema, values: replyDraft, onChange: (partial) => setReplyDraft((d) => ({ ...d, ...partial })), onSubmit: () => void handleReplySave(refetchReviews), submitLabel: replyTarget?.sellerReply ? "Update Reply" : "Post Reply", onCancel: () => setReplyTarget(null), isLoading: replySaving, scope: "store:review-reply" })] }) }), _jsx(Modal, { isOpen: bulkReplyOpen, onClose: () => setBulkReplyOpen(false), title: "Bulk reply to selected reviews", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewBulkReplySchema, values: bulkDraft, onChange: (partial) => setBulkDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitBulkReply(), submitLabel: "Send reply", onCancel: () => setBulkReplyOpen(false), isLoading: bulkSaving, scope: "store:review-bulk-reply" }) }) }), _jsx(Modal, { isOpen: !!contestTarget, onClose: () => setContestTarget(null), title: "Contest this review", children: _jsxs(Stack, { gap: "md", padding: "2xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Flag this review for admin investigation." }), _jsx(ReviewTextForm, { schema: reviewContestSchema, values: contestDraft, onChange: (partial) => setContestDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitContest(refetchReviews), submitLabel: "Submit", onCancel: () => setContestTarget(null), scope: "store:review-contest" })] }) }), _jsx(Modal, { isOpen: !!feedbackTarget, onClose: () => setFeedbackTarget(null), title: "Send feedback to buyer", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewFeedbackSchema, values: feedbackDraft, onChange: (partial) => setFeedbackDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitFeedback(), submitLabel: "Send", onCancel: () => setFeedbackTarget(null), scope: "store:review-feedback" }) }) })] }));
 }

package/dist/features/seller/components/SellerSidebar.js

@@ -84,7 +84,7 @@ export function StoreSidebar({ items, groups, activeHref, storeName, storeLogoUR
     const navContent = groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close }));
     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-[18rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "sidePanel", className: `flex-1 ${rail.borderClass} ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsxs(Row, { className: "min-w-0", align: "center", gap: "3", children: [storeLogoURL ? (_jsx(Div, { className: CLS_STORE_AVATAR, children: _jsx(MediaImage, { src: storeLogoURL, alt: storeName ?? "", size: "thumbnail" }) })) : (_jsx(Div, { className: CLS_STORE_FALLBACK, children: storeName?.[0]?.toUpperCase() })), _jsx(Text, { className: CLS_STORE_NAME, children: storeName || panelTitle })] }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: navContent }), 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: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, 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-[18rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "sidePanel", className: `flex-1 ${rail.borderClass} ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsxs(Row, { className: "min-w-0", align: "center", gap: "3", children: [storeLogoURL ? (_jsx(Div, { className: CLS_STORE_AVATAR, children: _jsx(MediaImage, { src: storeLogoURL, alt: storeName ?? "", size: "thumbnail" }) })) : (_jsx(Div, { className: CLS_STORE_FALLBACK, children: storeName?.[0]?.toUpperCase() })), _jsx(Text, { className: CLS_STORE_NAME, children: storeName || panelTitle })] }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: navContent }), 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: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
     }
     return (_jsxs(_Fragment, { children: [mounted && mobileOpen &&
                 createPortal(_jsx(DrawerPanel, { title: panelTitle, onClose: close, children: navContent }), document.body), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));

package/dist/features/seller/schemas/coupon-form.d.ts

@@ -200,6 +200,16 @@ export declare const adminCouponFormSchema: z.ZodEffects<z.ZodObject<{
     buyQuantity: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
     getQuantity: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
     currentUsage: z.ZodOptional<z.ZodNumber>;
+    tiers: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        minAmount: z.ZodNumber;
+        discountValue: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        minAmount: number;
+        discountValue: number;
+    }, {
+        minAmount: number;
+        discountValue: number;
+    }>, "many">>;
     firstTimeUserOnly: z.ZodBoolean;
     appliesToAuctions: z.ZodBoolean;
 }, "strip", z.ZodTypeAny, {
@@ -218,6 +228,10 @@ export declare const adminCouponFormSchema: z.ZodEffects<z.ZodObject<{
     appliesToAuctions: boolean;
     value?: string | undefined;
     description?: string | undefined;
+    tiers?: {
+        minAmount: number;
+        discountValue: number;
+    }[] | undefined;
     currentUsage?: number | undefined;
     maxDiscount?: string | undefined;
     buyQuantity?: string | undefined;
@@ -238,6 +252,10 @@ export declare const adminCouponFormSchema: z.ZodEffects<z.ZodObject<{
     appliesToAuctions: boolean;
     value?: string | undefined;
     description?: string | undefined;
+    tiers?: {
+        minAmount: number;
+        discountValue: number;
+    }[] | undefined;
     currentUsage?: number | undefined;
     maxDiscount?: string | undefined;
     buyQuantity?: string | undefined;
@@ -258,6 +276,10 @@ export declare const adminCouponFormSchema: z.ZodEffects<z.ZodObject<{
     appliesToAuctions: boolean;
     value?: string | undefined;
     description?: string | undefined;
+    tiers?: {
+        minAmount: number;
+        discountValue: number;
+    }[] | undefined;
     currentUsage?: number | undefined;
     maxDiscount?: string | undefined;
     buyQuantity?: string | undefined;
@@ -278,6 +300,10 @@ export declare const adminCouponFormSchema: z.ZodEffects<z.ZodObject<{
     appliesToAuctions: boolean;
     value?: string | undefined;
     description?: string | undefined;
+    tiers?: {
+        minAmount: number;
+        discountValue: number;
+    }[] | undefined;
     currentUsage?: number | undefined;
     maxDiscount?: string | undefined;
     buyQuantity?: string | undefined;

package/dist/features/seller/schemas/coupon-form.js

@@ -246,6 +246,33 @@ export const adminCouponFormSchema = couponFormBase
         section: "limits", order: 5, row: "pair", derived: true, tier: "t3-mirror",
         label: "Current usage", help: "Updated by orders.",
     }),
+    /*
+     * ── Tiered discounts ────────────────────────────────────────────────────
+     *
+     * 🛑 `CouponDocument.tiers` has existed since the collection shipped and
+     * had NO editor on either portal — and `getTieredDiscount`, its helper,
+     * had zero callers, so even a hand-seeded tier was ignored by the
+     * discount calculation. Both halves are fixed together: wiring an editor
+     * to a field nothing reads would hand an admin a control that does
+     * nothing, which is the defect this audit keeps removing rather than
+     * adding.
+     *
+     * 🛑 `when` limits it to the two types that HAVE a `discount.value` for a
+     * tier to replace. A BOGO's value lives in `bxgy` and free shipping is a
+     * shipping-line waiver, so a tier on either would be meaningless — and an
+     * input that cannot affect the outcome is worse than an absent one.
+     */
+    tiers: annotate(z
+        .array(z.object({
+        minAmount: z.number().min(0, "Spend threshold cannot be negative"),
+        discountValue: z.number().min(0, "Discount cannot be negative"),
+    }))
+        .max(6, "At most 6 tiers")
+        .optional(), {
+        section: "limits", order: 6, row: "full", label: "Spend tiers",
+        when: (v) => v.type === "percentage" || v.type === "fixed",
+        help: "Replaces the discount value once the order reaches a threshold. The highest matching tier wins.",
+    }),
     firstTimeUserOnly: annotate(z.boolean(), {
         section: "scope", order: 3, row: "quarter", label: "First-time users only",
     }),

package/dist/features/seller/schemas/product-form.d.ts

@@ -85,6 +85,7 @@ export declare const productDraftSchema: z.ZodObject<{
     seoTitle: z.ZodOptional<z.ZodString>;
     seoDescription: z.ZodOptional<z.ZodString>;
     barcodeId: z.ZodOptional<z.ZodString>;
+    sku: z.ZodOptional<z.ZodString>;
     startingBid: z.ZodOptional<z.ZodNumber>;
     reservePrice: z.ZodOptional<z.ZodNumber>;
     buyNowPrice: z.ZodOptional<z.ZodNumber>;
@@ -175,6 +176,7 @@ export declare const productDraftSchema: z.ZodObject<{
     seoTitle: z.ZodOptional<z.ZodString>;
     seoDescription: z.ZodOptional<z.ZodString>;
     barcodeId: z.ZodOptional<z.ZodString>;
+    sku: z.ZodOptional<z.ZodString>;
     startingBid: z.ZodOptional<z.ZodNumber>;
     reservePrice: z.ZodOptional<z.ZodNumber>;
     buyNowPrice: z.ZodOptional<z.ZodNumber>;
@@ -265,6 +267,7 @@ export declare const productDraftSchema: z.ZodObject<{
     seoTitle: z.ZodOptional<z.ZodString>;
     seoDescription: z.ZodOptional<z.ZodString>;
     barcodeId: z.ZodOptional<z.ZodString>;
+    sku: z.ZodOptional<z.ZodString>;
     startingBid: z.ZodOptional<z.ZodNumber>;
     reservePrice: z.ZodOptional<z.ZodNumber>;
     buyNowPrice: z.ZodOptional<z.ZodNumber>;

package/dist/features/seller/schemas/product-form.js

@@ -87,6 +87,11 @@ export const productDraftSchema = z
     seoTitle: z.string().optional(),
     seoDescription: z.string().optional(),
     barcodeId: z.string().optional(),
+    /*
+     * The human stock key. Separate from barcodeId because they are two keys
+     * with opposite requirements — see ProductDocument.sku.
+     */
+    sku: z.string().max(64).optional(),
     // Auction
     startingBid: z.number().optional(),
     reservePrice: z.number().optional(),

package/dist/features/shell/FormShell.js

@@ -6,7 +6,7 @@ import { Button } from "../../ui/components/Button.js";
 import { IconButton } from "../../ui/components/IconButton.js";
 import { classNames } from "../../ui/style.helper.js";
 import { FORM_ACTION_META, FORM_ACTION_ID } from "../products/constants/action-defs.js";
-import { ActionRow, Div, OverflowRow, Row, Span, Stack, Text } from "../../ui/index.js";
+import { ActionRow, Div, Heading, OverflowRow, Row, Span, Stack, Text } from "../../ui/index.js";
 /**
  * Carries the `schema` prop passed to `<FormShell>` down to any nested
  * `<SectionForm>` that doesn't declare its own `schema`/`SectionDef.schema` —
@@ -122,7 +122,7 @@ export function FormShell({ isOpen, onClose, title, breadcrumb, schema, isDirty
     };
     if (!isOpen)
         return null;
-    return (_jsxs(FormSchemaContext.Provider, { value: schema, children: [_jsx(Div, { surface: "overlay-sm", className: "fixed inset-0 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs(Div, { layout: "flex", ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] [flex-direction:column] bg-[var(--appkit-color-surface)]", shadow: "2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs(Row, { gap: "sm", paddingX: "x-5", className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", children: [previewMode ? (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", gap: "xs", rounded: "lg", textSize: "sm", textColor: "muted", className: "flex-shrink-0", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx(IconButton, { type: "button", onClick: attemptClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs(Div, { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] truncate mb-0.5", size: "xs", children: breadcrumb })), _jsx(Text, { className: "text-[var(--appkit-color-text)] truncate", size: "sm", weight: "semibold", children: previewMode ? `Preview — ${title}` : title })] }), _jsx(Row, { gap: "xs", className: "flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs(Button, { variant: "outline", type: "button", onClick: () => setPreviewMode(true), gap: "xs", rounded: "lg", paddingX: "sm", textSize: "sm", textColor: "muted", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs(Div, { layout: "flex", className: `flex-1 ${__O.hidden}`, children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-[var(--appkit-space-4)] px-[var(--appkit-space-3)] gap-[var(--appkit-space-1)] overflow-y-auto", children: sections.map((sec) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => scrollToSection(sec.id), rounded: "lg", paddingX: "sm", paddingY: "xs", textSize: "sm", textColor: "muted", justify: "start", className: "text-left", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx(Row, { gap: "px", className: "lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 px-[1.25rem] bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]", padding: "y-xs", children: _jsx(OverflowRow, { items: sections.map((sec) => ({
+    return (_jsxs(FormSchemaContext.Provider, { value: schema, children: [_jsx(Div, { surface: "overlay-sm", className: "fixed inset-0 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs(Div, { layout: "flex", ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] [flex-direction:column] bg-[var(--appkit-color-surface)]", shadow: "2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs(Row, { gap: "sm", paddingX: "x-5", className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", children: [previewMode ? (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", gap: "xs", rounded: "lg", textSize: "sm", textColor: "muted", className: "flex-shrink-0", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx(IconButton, { type: "button", onClick: attemptClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs(Div, { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] truncate mb-0.5", size: "xs", children: breadcrumb })), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] truncate", size: "sm", weight: "semibold", children: previewMode ? `Preview — ${title}` : title })] }), _jsx(Row, { gap: "xs", className: "flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs(Button, { variant: "outline", type: "button", onClick: () => setPreviewMode(true), gap: "xs", rounded: "lg", paddingX: "sm", textSize: "sm", textColor: "muted", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs(Div, { layout: "flex", className: `flex-1 ${__O.hidden}`, children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-[var(--appkit-space-4)] px-[var(--appkit-space-3)] gap-[var(--appkit-space-1)] overflow-y-auto", children: sections.map((sec) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => scrollToSection(sec.id), rounded: "lg", paddingX: "sm", paddingY: "xs", textSize: "sm", textColor: "muted", justify: "start", className: "text-left", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx(Row, { gap: "px", className: "lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 px-[1.25rem] bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]", padding: "y-xs", children: _jsx(OverflowRow, { items: sections.map((sec) => ({
                                         id: sec.id,
                                         label: sec.label,
                                         onSelect: () => scrollToSection(sec.id),

package/dist/features/shell/QuickFormDrawer.js

@@ -203,6 +203,20 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
         submitAttempted,
         submitAttemptCount,
         markSubmitAttempted: () => setSubmitAttemptCount((n) => n + 1),
+        /*
+         * 🛑 Not offered here. This drawer's whole purpose is the 1-3 field
+         * inline edit opened from a picker's "+ Create new" — it CLOSES on
+         * success and auto-selects what it just made, which is the opposite of
+         * staying put. "Add another" would have to mean "create a second one you
+         * did not ask for and cannot select", so the control has no coherent
+         * meaning in this shell.
+         *
+         * Also note this context backs ONLY `<FormErrorSummary>` — the comment
+         * above says so — so even a `true` here would reach no submit handler.
+         */
+        addAnotherEnabled: false,
+        addAnother: false,
+        setAddAnother: () => { },
     }), [liveErrors, submitting, submitAttempted, submitAttemptCount]);
     if (!isOpen)
         return null;

package/dist/features/shell/SectionForm.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 import type { JsonValue } from "@mohasinac/appkit/client";
 import type { ZodTypeAny } from "zod";
 import { type FormShellStep } from "../../ui/forms/FormShell";
+import { type LabelPlacement } from "../../ui/forms/FieldLabel";
 /**
  * A collapsible form segment. Replaces `StepDef` — the differences are the
  * point, not incidental:
@@ -33,6 +34,24 @@ export interface SectionDef<T extends object = Record<string, JsonValue>> {
      * `CollapsibleSection.keepMounted`.
      */
     keepMounted?: boolean;
+    /**
+     * How every field in THIS section labels itself: `"above"` (the default),
+     * `"inline"`, or `"hidden"`.
+     *
+     * 🛑 A SECTION-LEVEL DECISION, which is the whole reason it lives here
+     * rather than on each field. One field labelling above beside one labelling
+     * inline reads as broken rather than as varied, and the choice is really
+     * about a section's density — a 12-field address block wants inline, a
+     * 3-field settings panel wants above. The field-level prop exists as an
+     * escape hatch and should stay unused.
+     *
+     * `"hidden"` renders the label to assistive technology and hides it visually
+     * (`sr-only`, never `display: none`, which would remove it from the
+     * accessibility tree and produce the unlabelled field it was meant to
+     * avoid). It is for fields whose purpose is obvious from context, NOT a way
+     * to suppress the unlabelled-field count.
+     */
+    labelPlacement?: LabelPlacement;
     render: (props: {
         values: T;
         onChange: (partial: Partial<T>) => void;