@mohasinac/appkit 4.61.0 → 4.62.0

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

@@ -53,8 +53,8 @@ export declare const emiInstallmentSchema: z.ZodObject<{
     }, z.ZodTypeAny, "passthrough">>]>>;
 }, "strip", z.ZodTypeAny, {
     status: "paid" | "pending" | "overdue";
-    amount: number;
     index: number;
+    amount: number;
     dueDate: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
@@ -68,8 +68,8 @@ export declare const emiInstallmentSchema: z.ZodObject<{
     }, z.ZodTypeAny, "passthrough"> | undefined;
 }, {
     status: "paid" | "pending" | "overdue";
-    amount: number;
     index: number;
+    amount: number;
     dueDate: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
@@ -405,8 +405,8 @@ export declare const orderFirestoreSchema: z.ZodObject<{
         }, z.ZodTypeAny, "passthrough">>]>>;
     }, "strip", z.ZodTypeAny, {
         status: "paid" | "pending" | "overdue";
-        amount: number;
         index: number;
+        amount: number;
         dueDate: string | Date | z.objectOutputType<{
             toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
         }, z.ZodTypeAny, "passthrough">;
@@ -420,8 +420,8 @@ export declare const orderFirestoreSchema: z.ZodObject<{
         }, z.ZodTypeAny, "passthrough"> | undefined;
     }, {
         status: "paid" | "pending" | "overdue";
-        amount: number;
         index: number;
+        amount: number;
         dueDate: string | Date | z.objectInputType<{
             toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
         }, z.ZodTypeAny, "passthrough">;
@@ -684,8 +684,8 @@ export declare const orderFirestoreSchema: z.ZodObject<{
     emiSurchargeAmount?: number | undefined;
     emiInstallments?: {
         status: "paid" | "pending" | "overdue";
-        amount: number;
         index: number;
+        amount: number;
         dueDate: string | Date | z.objectOutputType<{
             toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
         }, z.ZodTypeAny, "passthrough">;
@@ -838,8 +838,8 @@ export declare const orderFirestoreSchema: z.ZodObject<{
     emiSurchargeAmount?: number | undefined;
     emiInstallments?: {
         status: "paid" | "pending" | "overdue";
-        amount: number;
         index: number;
+        amount: number;
         dueDate: string | Date | z.objectInputType<{
             toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
         }, z.ZodTypeAny, "passthrough">;

package/dist/features/products/components/GroupMemberPicker.js

@@ -29,6 +29,7 @@ import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js"
 import { normalizeListingType } from "../utils/listing-type.js";
 import { resolveGroupMemberImage } from "../utils/group-member-image.js";
 import { checkGroupRules, describeGroupRules, EMPTY_GROUP_RULES, } from "../../../_internal/shared/features/products/group-rules.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
 const __O = { xAuto: "overflow-x-auto", hidden: "overflow-hidden" };
 const memberImage = resolveGroupMemberImage;
 function memberHref(m) {
@@ -112,9 +113,11 @@ export function GroupMemberPicker({ groupId, groupSource, members, rules = EMPTY
                 onAuthRequired?.();
                 return;
             }
+            // `code` is the stable identifier the error envelope carries; `error` is
+            // the server's own sentence and is deliberately no longer read here.
             const json = (await res.json());
             if (!res.ok || json.success === false) {
-                setError(json.error ?? "Couldn't add those items to your cart.");
+                setError(toUserMessage(json.code, undefined, { fallback: "Couldn't add those items to your cart." }));
                 return;
             }
             setQty({});

package/dist/features/products/components/PrizeDrawEntryActions.js

@@ -12,6 +12,7 @@ import { NonRefundableConsentModal } from "./NonRefundableConsentModal.js";
 import { useAuthGate } from "../../../react/hooks/useAuthGate.js";
 import { ACTION_ID } from "../constants/action-defs.js";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
 /**
  * Client buy panel for a prize-draw detail page (SB4-G).
  *
@@ -81,7 +82,7 @@ export function PrizeDrawEntryActions({ productId, productSlug, title, pricePerE
              * a correct refusal look like the same silent nothing this flow did
              * before it was repaired.
              */
-            showToast(n.message, "error");
+            showToast(toUserMessage(n.code, undefined, { fallback: "We couldn't enter you into that draw. Please try again." }), "error");
             return;
         }
         router.push(String(ROUTES.USER.CART));

package/dist/features/products/components/ProductDetailActions.js

@@ -15,6 +15,7 @@ import { useBottomActions } from "../../layout/hooks/useBottomActions.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { useCanSeePrices } from "../../../react/hooks/useCanSeePrices.js";
 import { normalizeError } from "../../../errors/normalize.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
 /**
  * Wires the three primary product-detail CTAs (Buy Now / Add to Cart / Wishlist)
  * to the server APIs with guest-fallback. Replaces the previously-unwired
@@ -35,7 +36,7 @@ export function ProductDetailActions({ productId, productTitle, productImage, pr
     // itself — centralised so every add-to-cart call site gets the same
     // richer toast, not just this one.
     const addCart = useAddToCart({
-        onError: (err) => showToast(err?.message ?? "Could not add to cart", "error"),
+        onError: (err) => showToast(toUserMessage(err?.code, undefined, { fallback: "Could not add to cart" }), "error"),
     });
     async function handleAddToCart(then) {
         setBusy("cart");

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

@@ -9,7 +9,8 @@ import { apiClient } from "../../../http/index.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { BarcodeField } from "./BarcodeField.js";
 import { normalizeError } from "../../../errors/normalize.js";
-import { useToast } from "../../../ui/index.js";
+import { useToast, TextLink } from "../../../ui/index.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
 function statusBadgeVariant(status) {
     if (status === "confirmed")
         return "warning";
@@ -118,5 +119,5 @@ export function FulfillmentView({ currentUserId, }) {
                                             setScanError(null);
                                         }, children: "Cancel" })] })] })), !scanResult && !scanError && (_jsx(Text, { color: "muted", size: "sm", children: orders.length === 0 && !isLoadingOrders
                             ? "No orders waiting — great work!"
-                            : `${orders.length} order${orders.length === 1 ? "" : "s"} in queue.` }))] })), mode === "list" && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Button, { variant: filterMine ? "primary" : "secondary", size: "sm", onClick: () => setFilterMine((v) => !v), children: filterMine ? "Showing My Orders" : "My Orders" }), _jsx(Text, { size: "xs", color: "muted", children: isLoadingOrders ? "Loading…" : `${visibleOrders.length} order${visibleOrders.length === 1 ? "" : "s"}` })] }), visibleOrders.length === 0 && !isLoadingOrders && (_jsx(Text, { color: "muted", children: "No orders waiting \u2014 great work!" })), visibleOrders.map((order) => (_jsxs(Stack, { surface: "card", padding: "sm", rounded: "md", gap: "xs", children: [_jsxs(Row, { align: "center", gap: "xs", wrap: true, children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["#", order.id] }), _jsx(Badge, { variant: statusBadgeVariant(order.status), children: order.status }), order.pickedAt && (_jsx(Badge, { variant: "success", children: "Picked" })), order.packedAt && (_jsx(Badge, { variant: "success", children: "Packed" }))] }), _jsxs(Text, { size: "xs", color: "muted", children: [order.userName, order.items && order.items.length > 0 && (_jsxs(_Fragment, { children: [" \u00B7 ", order.items.map((i) => i.productTitle).join(", ")] }))] }), order.assignedWorkerId && (_jsxs(Text, { size: "xs", color: "muted", children: ["Assigned: ", order.assignedWorkerId === currentUserId ? "Me" : order.assignedWorkerId] })), _jsxs(Row, { gap: "xs", children: [!order.pickedAt && (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => handleMarkPicked(order.id), isLoading: actionLoadingId === order.id + ":picked", children: "Mark Picked" })), order.pickedAt && !order.packedAt && (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => handleMarkPacked(order.id), isLoading: actionLoadingId === order.id + ":packed", children: "Mark Packed" }))] })] }, order.id)))] }))] }));
+                            : `${orders.length} order${orders.length === 1 ? "" : "s"} in queue.` }))] })), mode === "list" && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Button, { variant: filterMine ? "primary" : "secondary", size: "sm", onClick: () => setFilterMine((v) => !v), children: filterMine ? "Showing My Orders" : "My Orders" }), _jsx(Text, { size: "xs", color: "muted", children: isLoadingOrders ? "Loading…" : `${visibleOrders.length} order${visibleOrders.length === 1 ? "" : "s"}` })] }), visibleOrders.length === 0 && !isLoadingOrders && (_jsx(Text, { color: "muted", children: "No orders waiting \u2014 great work!" })), visibleOrders.map((order) => (_jsxs(Stack, { surface: "card", padding: "sm", rounded: "md", gap: "xs", children: [_jsxs(Row, { align: "center", gap: "xs", wrap: true, children: [_jsxs(TextLink, { href: String(ROUTES.STORE.ORDER_DETAIL(order.id)), size: "sm", weight: "medium", children: ["#", order.id] }), _jsx(Badge, { variant: statusBadgeVariant(order.status), children: order.status }), order.pickedAt && (_jsx(Badge, { variant: "success", children: "Picked" })), order.packedAt && (_jsx(Badge, { variant: "success", children: "Packed" }))] }), _jsxs(Text, { size: "xs", color: "muted", children: [order.userName, order.items && order.items.length > 0 && (_jsxs(_Fragment, { children: [" \u00B7 ", order.items.map((i) => i.productTitle).join(", ")] }))] }), order.assignedWorkerId && (_jsxs(Text, { size: "xs", color: "muted", children: ["Assigned: ", order.assignedWorkerId === currentUserId ? "Me" : order.assignedWorkerId] })), _jsxs(Row, { gap: "xs", children: [!order.pickedAt && (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => handleMarkPicked(order.id), isLoading: actionLoadingId === order.id + ":picked", children: "Mark Picked" })), order.pickedAt && !order.packedAt && (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => handleMarkPacked(order.id), isLoading: actionLoadingId === order.id + ":packed", children: "Mark Packed" }))] })] }, order.id)))] }))] }));
 }

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

@@ -11,6 +11,7 @@ import { useEntityDelete } from "../../../react/hooks/useEntityDelete.js";
 import { normalizeError } from "../../../errors/normalize.js";
 import { TextLink } from "../../../ui/index.js";
 import { ROUTES } from "../../../constants/index.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
 const __O = {
     xAuto: "overflow-x-auto",
 };
@@ -47,9 +48,9 @@ function fromDoc(doc) {
         isDefault: doc.isDefault,
     };
 }
-function AddressCard({ address, onEdit, onDelete, }) {
+function AddressCard({ address, onEdit, onDelete, onSetDefault, }) {
     const isBanned = address.banStatus === "banned";
-    return (_jsxs(Stack, { surface: "card", padding: "sm", gap: "sm", children: [_jsxs(Row, { align: "start", justify: "between", gap: "xs", children: [_jsxs(Row, { gap: "xs", wrap: true, className: "min-w-0", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", weight: "semibold", className: "truncate", color: "primary", children: address.label }), address.isDefault && (_jsxs(Span, { size: "xs", weight: "medium", className: CLS_DEFAULT_PILL, children: [_jsx(Star, { className: "h-3 w-3" }), "Default"] })), isBanned && _jsx(Badge, { variant: "danger", size: "sm", children: "Banned" })] }), _jsx(Row, { gap: "px", className: "shrink-0", children: isBanned ? (_jsx(Span, { size: "xs", color: "muted", title: "Contact support to resolve address ban", children: "Contact support" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { type: "button", onClick: onEdit, title: "Edit address", "aria-label": "Edit address", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)] hover:text-[var(--appkit-color-text-muted)]", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx(IconButton, { type: "button", onClick: onDelete, title: "Delete address", "aria-label": "Delete address", variant: "ghost", rounded: "lg", className: CLS_DELETE_BTN, children: _jsx(Trash2, { className: "h-4 w-4" }) })] })) })] }), _jsxs(Text, { size: "sm", color: "muted", children: [address.fullName, " \u00B7 ", address.phone] }), _jsxs(Text, { className: "leading-relaxed", color: "muted", size: "xs", children: [address.addressLine1, address.addressLine2 ? `, ${address.addressLine2}` : "", address.landmark ? ` (near ${address.landmark})` : "", _jsx("br", {}), address.city, ", ", address.state, " ", address.postalCode, ", ", address.country] })] }));
+    return (_jsxs(Stack, { surface: "card", padding: "sm", gap: "sm", children: [_jsxs(Row, { align: "start", justify: "between", gap: "xs", children: [_jsxs(Row, { gap: "xs", wrap: true, className: "min-w-0", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", weight: "semibold", className: "truncate", color: "primary", children: address.label }), address.isDefault && (_jsxs(Span, { size: "xs", weight: "medium", className: CLS_DEFAULT_PILL, children: [_jsx(Star, { className: "h-3 w-3" }), "Default"] })), isBanned && _jsx(Badge, { variant: "danger", size: "sm", children: "Banned" })] }), _jsx(Row, { gap: "px", className: "shrink-0", children: isBanned ? (_jsx(Span, { size: "xs", color: "muted", title: "Contact support to resolve address ban", children: "Contact support" })) : (_jsxs(_Fragment, { children: [!address.isDefault && (_jsx(IconButton, { type: "button", onClick: onSetDefault, title: "Set as default pickup address", "aria-label": `Set ${address.label} as the default pickup address`, variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)] hover:text-[var(--appkit-color-text-muted)]", children: _jsx(Star, { className: "h-4 w-4" }) })), _jsx(IconButton, { type: "button", onClick: onEdit, title: "Edit address", "aria-label": "Edit address", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)] hover:text-[var(--appkit-color-text-muted)]", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx(IconButton, { type: "button", onClick: onDelete, title: "Delete address", "aria-label": "Delete address", variant: "ghost", rounded: "lg", className: CLS_DELETE_BTN, children: _jsx(Trash2, { className: "h-4 w-4" }) })] })) })] }), _jsxs(Text, { size: "sm", color: "muted", children: [address.fullName, " \u00B7 ", address.phone] }), _jsxs(Text, { className: "leading-relaxed", color: "muted", size: "xs", children: [address.addressLine1, address.addressLine2 ? `, ${address.addressLine2}` : "", address.landmark ? ` (near ${address.landmark})` : "", _jsx("br", {}), address.city, ", ", address.state, " ", address.postalCode, ", ", address.country] })] }));
 }
 // ---------------------------------------------------------------------------
 // Main Component
@@ -129,7 +130,7 @@ export function SellerAddressesView({ apiBase = SELLER_ENDPOINTS.STORE_ADDRESSES
         }
         catch (err) {
             void normalizeError(err);
-            setSaveError(err instanceof Error ? err.message : "Failed to save address");
+            setSaveError(toUserMessage(err?.code, undefined, { fallback: "Failed to save address" }));
         }
         finally {
             setSaving(false);
@@ -141,9 +142,36 @@ export function SellerAddressesView({ apiBase = SELLER_ENDPOINTS.STORE_ADDRESSES
         onSuccess: () => { load(); },
     });
     const handleDelete = (addr) => setDeleteTargetAddr(addr);
+    /**
+     * Promote one pickup address to the default.
+     *
+     * A partial PUT rather than a dedicated endpoint: unlike buyer addresses,
+     * which have `/api/user/addresses/[id]/set-default`, the store side has no
+     * such route — but `addressUpdateSchema` is the form schema `.partial()`,
+     * so `{ isDefault: true }` on its own is a valid body.
+     */
+    const handleSetDefault = async (addr) => {
+        try {
+            // Same request shape as `handleSave` below, rather than a second
+            // hand-rolled fetch beside it.
+            const method = "PUT";
+            const res = await fetch(`${apiBase}/${addr.id}`, {
+                method,
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ isDefault: true }),
+            });
+            if (!res.ok)
+                throw new Error("Failed to set default address");
+            await load();
+        }
+        catch (err) {
+            const normalized = normalizeError(err);
+            setSaveError(toUserMessage(normalized.code, undefined, { fallback: "Failed to set default address" }));
+        }
+    };
     const set = (key, value) => setDraft((p) => ({ ...p, [key]: value }));
     const setField = (key) => (value) => set(key, value);
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(StickyToolbar, { offset: "header", tone: "default", border: true, padding: "md", children: _jsxs(Row, { justify: "between", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", color: "primary", children: "Pickup Addresses" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: "Manage your store's pickup and return locations" })] }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(TextLink, { href: String(ROUTES.STORE.ADDRESSES_NEW), children: "Open full page \u2192" }), _jsxs(Button, { gap: "sm", size: "sm", onClick: openAdd, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "Add Address" })] })] })] }) }), _jsxs(Div, { paddingX: "x-md-lg", className: "max-w-2xl", padding: "y-lg", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Row, { justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })) : addresses.length === 0 ? (_jsxs(Stack, { border: "default", className: "border-2 border-dashed", padding: "y-4xl", align: "center", gap: "3", rounded: "xl", children: [_jsx(MapPin, { className: "h-8 w-8 text-[var(--appkit-color-text-muted)]" }), _jsx(Text, { size: "sm", color: "muted", children: "No pickup addresses yet" }), _jsx(Button, { size: "sm", variant: "outline", onClick: openAdd, children: "Add your first address" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Row, { justify: "end", className: "mb-2", children: [_jsx(Button, { size: "sm", variant: listView === "table" ? "primary" : "ghost", onClick: () => setListView("table"), children: "Table" }), _jsx(Button, { size: "sm", variant: listView === "cards" ? "primary" : "ghost", onClick: () => setListView("cards"), children: "Cards" })] }), listView === "cards" ? (_jsx(Grid, { gap: "sm", children: addresses.map((addr) => (_jsx(Div, { className: deletingId === addr.id ? "opacity-50 pointer-events-none" : "", children: _jsx(AddressCard, { address: addr, onEdit: () => openEdit(addr), onDelete: () => handleDelete(addr) }) }, addr.id))) })) : (_jsx(Div, { className: `${__O.xAuto}`, rounded: "lg", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { surface: "muted", children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Label" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Name" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "City" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Phone" }), _jsx(Th, { className: "text-right", padding: "sm", weight: "semibold", children: "Actions" })] }) }), _jsx(Tbody, { children: addresses.map((addr) => {
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(StickyToolbar, { offset: "header", tone: "default", border: true, padding: "md", children: _jsxs(Row, { justify: "between", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", color: "primary", children: "Pickup Addresses" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: "Manage your store's pickup and return locations" })] }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(TextLink, { href: String(ROUTES.STORE.ADDRESSES_NEW), children: "Open full page \u2192" }), _jsxs(Button, { gap: "sm", size: "sm", onClick: openAdd, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "Add Address" })] })] })] }) }), _jsxs(Div, { paddingX: "x-md-lg", className: "max-w-2xl", padding: "y-lg", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Row, { justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })) : addresses.length === 0 ? (_jsxs(Stack, { border: "default", className: "border-2 border-dashed", padding: "y-4xl", align: "center", gap: "3", rounded: "xl", children: [_jsx(MapPin, { className: "h-8 w-8 text-[var(--appkit-color-text-muted)]" }), _jsx(Text, { size: "sm", color: "muted", children: "No pickup addresses yet" }), _jsx(Button, { size: "sm", variant: "outline", onClick: openAdd, children: "Add your first address" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Row, { justify: "end", className: "mb-2", children: [_jsx(Button, { size: "sm", variant: listView === "table" ? "primary" : "ghost", onClick: () => setListView("table"), children: "Table" }), _jsx(Button, { size: "sm", variant: listView === "cards" ? "primary" : "ghost", onClick: () => setListView("cards"), children: "Cards" })] }), listView === "cards" ? (_jsx(Grid, { gap: "sm", children: addresses.map((addr) => (_jsx(Div, { className: deletingId === addr.id ? "opacity-50 pointer-events-none" : "", children: _jsx(AddressCard, { address: addr, onEdit: () => openEdit(addr), onDelete: () => handleDelete(addr), onSetDefault: () => void handleSetDefault(addr) }) }, addr.id))) })) : (_jsx(Div, { className: `${__O.xAuto}`, rounded: "lg", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { surface: "muted", children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Label" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Name" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "City" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Phone" }), _jsx(Th, { className: "text-right", padding: "sm", weight: "semibold", children: "Actions" })] }) }), _jsx(Tbody, { children: addresses.map((addr) => {
                                                 const isBanned = addr.banStatus === "banned";
                                                 return (_jsxs(Tr, { className: `border-t border-[var(--appkit-color-border)] ${deletingId === addr.id ? "opacity-50" : ""}`, children: [_jsx(Td, { padding: "sm", children: _jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Span, { children: addr.label }), isBanned && _jsx(Badge, { variant: "danger", size: "sm", children: "Banned" })] }) }), _jsx(Td, { padding: "sm", children: addr.fullName }), _jsxs(Td, { padding: "sm", children: [addr.city, ", ", addr.state] }), _jsx(Td, { className: "tabular-nums", padding: "sm", children: addr.phone }), _jsx(Td, { className: "text-right", padding: "sm", children: isBanned ? (_jsx(Span, { size: "xs", color: "muted", title: "Contact support to resolve address ban", children: "Contact support" })) : (_jsxs(Row, { justify: "end", gap: "xs", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => openEdit(addr), children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleDelete(addr), children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label })] })) })] }, addr.id));
                                             }) })] }) }))] }))] }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: editingId ? "Edit Address" : "Add Address", footer: 

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React, { useState, useCallback } from "react";
+import { z } from "zod";
 import { alertMetricsForScope } from "../../store-extensions/constants/alert-metrics.js";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Alert, Badge, Button, Div, Heading, Row, Section, Stack, Text, Toggle, useToast } from "../../../ui/index.js";
@@ -14,6 +15,7 @@ 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 { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
+import { QuickEditMenu } from "../../admin/components/QuickEditMenu.js";
 const __P = {
     p5: "p-[var(--appkit-space-5)]",
 };
@@ -80,11 +82,55 @@ const OPERATOR_BADGE = {
 // ---------------------------------------------------------------------------
 // Sub-components
 // ---------------------------------------------------------------------------
-function AlertCard({ alert, onToggle, onDelete, }) {
+/**
+ * The three values a seller actually tunes once an alert is live.
+ *
+ * Deliberately not `metric` or `operator`: changing either turns the alert
+ * into a different alert while keeping its firing history, so
+ * `lastTriggeredAt`/`lastObservedValue` on the card would then describe a rule
+ * that no longer exists. Those stay a delete-and-recreate.
+ */
+const alertQuickEditSchema = z.object({
+    label: z.string().trim().min(1, "A name is required."),
+    threshold: z.coerce.number().min(0, "Threshold cannot be negative."),
+    windowHours: z.coerce.number().int().min(1),
+});
+const ALERT_QUICK_FIELDS = [
+    { name: "label", label: "Name", type: "text", required: true },
+    {
+        name: "threshold",
+        label: "Threshold",
+        type: "number",
+        required: true,
+        helperText: "The value the metric is compared against.",
+    },
+    {
+        name: "windowHours",
+        label: "Window",
+        type: "select",
+        required: true,
+        options: WINDOW_OPTIONS,
+    },
+];
+function AlertCard({ alert, onToggle, onDelete, onEdit, }) {
     const metricLabel = METRIC_OPTIONS.find((m) => m.value === alert.metric)?.label ?? alert.metric;
     const opLabel = OPERATOR_OPTIONS.find((o) => o.value === alert.operator)?.label ?? alert.operator;
     const windowLabel = WINDOW_OPTIONS.find((w) => w.value === String(alert.windowHours))?.label ?? `${alert.windowHours}h`;
-    return (_jsxs(Row, { surface: "card", padding: "sm", align: "start", justify: "between", gap: "md", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-1", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: alert.label }), _jsx(Badge, { variant: alert.isActive ? "success" : "default", children: alert.isActive ? "Active" : "Paused" })] }), _jsxs(Text, { className: "mb-1", color: "muted", size: "xs", children: [metricLabel, " ", opLabel, " ", alert.threshold, " \u00B7 ", windowLabel] }), METRIC_DESCRIPTIONS[alert.metric] ? (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: METRIC_DESCRIPTIONS[alert.metric] })) : null, alert.lastTriggeredAt ? (_jsxs(Text, { className: "mb-1", color: "muted", size: "xs", children: ["Last fired ", new Date(alert.lastTriggeredAt).toLocaleString(), alert.lastObservedValue != null ? ` at ${alert.lastObservedValue}` : ""] })) : null, _jsx(Row, { gap: "xs", wrap: true, children: alert.notifyChannels.map((ch) => (_jsx(Badge, { variant: OPERATOR_BADGE[alert.operator] ?? "default", children: ch }, ch))) }), alert.lastTriggeredAt && (_jsxs(Text, { className: "mt-1", color: "faint", size: "xs", children: ["Last triggered: ", new Date(alert.lastTriggeredAt).toLocaleString("en-IN")] }))] }), _jsxs(Row, { className: "shrink-0", align: "center", gap: "sm", children: [_jsx(Toggle, { checked: alert.isActive, onChange: (v) => onToggle(alert.id, v), size: "sm" }), _jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-analytics-alert"], onClick: () => onDelete(alert.id), className: "text-error hover:text-error" })] })] }));
+    return (_jsxs(Row, { surface: "card", padding: "sm", align: "start", justify: "between", gap: "md", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-1", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: alert.label }), _jsx(Badge, { variant: alert.isActive ? "success" : "default", children: alert.isActive ? "Active" : "Paused" })] }), _jsxs(Text, { className: "mb-1", color: "muted", size: "xs", children: [metricLabel, " ", opLabel, " ", alert.threshold, " \u00B7 ", windowLabel] }), METRIC_DESCRIPTIONS[alert.metric] ? (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: METRIC_DESCRIPTIONS[alert.metric] })) : null, alert.lastTriggeredAt ? (_jsxs(Text, { className: "mb-1", color: "muted", size: "xs", children: ["Last fired ", new Date(alert.lastTriggeredAt).toLocaleString(), alert.lastObservedValue != null ? ` at ${alert.lastObservedValue}` : ""] })) : null, _jsx(Row, { gap: "xs", wrap: true, children: alert.notifyChannels.map((ch) => (_jsx(Badge, { variant: OPERATOR_BADGE[alert.operator] ?? "default", children: ch }, ch))) }), alert.lastTriggeredAt && (_jsxs(Text, { className: "mt-1", color: "faint", size: "xs", children: ["Last triggered: ", new Date(alert.lastTriggeredAt).toLocaleString("en-IN")] }))] }), _jsxs(Row, { className: "shrink-0", align: "center", gap: "sm", children: [_jsx(Toggle, { checked: alert.isActive, onChange: (v) => onToggle(alert.id, v), size: "sm", ariaLabel: `${alert.isActive ? "Pause" : "Resume"} ${alert.label}` }), _jsx(QuickEditMenu, { actions: [
+                            {
+                                label: "Edit alert",
+                                formTitle: `Edit "${alert.label}"`,
+                                schema: alertQuickEditSchema,
+                                fields: ALERT_QUICK_FIELDS,
+                                defaultValues: {
+                                    label: alert.label,
+                                    threshold: alert.threshold,
+                                    windowHours: String(alert.windowHours),
+                                },
+                                onSubmit: (values) => onEdit(alert.id, values),
+                                submitLabel: "Save alert",
+                            },
+                        ] }), _jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-analytics-alert"], onClick: () => onDelete(alert.id), className: "text-error hover:text-error" })] })] }));
 }
 const EMPTY_DRAFT = {
     label: "",
@@ -142,6 +188,17 @@ export function SellerAnalyticsAlertsView({ labels = {}, }) {
             void queryClient.invalidateQueries({ queryKey: ["seller", "analytics-alerts"] });
         },
     });
+    const editMutation = useApiMutation({
+        errorMessage: "Failed to update alert",
+        mutationFn: async ({ id, values }) => {
+            const parsed = alertQuickEditSchema.parse(values);
+            return apiClient.patch(SELLER_ENDPOINTS.ANALYTICS_ALERT_BY_ID(id), parsed);
+        },
+        onSuccess: () => {
+            showToast("Alert updated", "success");
+            void queryClient.invalidateQueries({ queryKey: ["seller", "analytics-alerts"] });
+        },
+    });
     const toggleChannel = useCallback((ch) => {
         setDraft((d) => ({
             ...d,
@@ -192,5 +249,7 @@ export function SellerAnalyticsAlertsView({ labels = {}, }) {
                                  * page's own form — a viewport-pinned Save would claim the
                                  * bottom tier for a control the reader may have scrolled past.
                                  */
-                                bottomBar: false })] })] })), isLoading && (_jsx(Stack, { gap: "sm", children: [1, 2, 3].map((i) => (_jsx(Div, { className: "h-16 animate-pulse", surface: "subtle", rounded: "lg" }, i))) })), !isLoading && alerts.length === 0 && !showForm && (_jsx(Alert, { variant: "info", children: "No alerts configured. Create an alert to get notified when a key metric crosses a threshold." })), !isLoading && alerts.length > 0 && (_jsx(Stack, { gap: "3", children: alerts.map((alert) => (_jsx(AlertCard, { alert: alert, onToggle: (id, isActive) => toggleMutation.mutate({ id, isActive }), onDelete: (id) => deleteMutation.mutate(id) }, alert.id))) }))] }));
+                                bottomBar: false })] })] })), isLoading && (_jsx(Stack, { gap: "sm", children: [1, 2, 3].map((i) => (_jsx(Div, { className: "h-16 animate-pulse", surface: "subtle", rounded: "lg" }, i))) })), !isLoading && alerts.length === 0 && !showForm && (_jsx(Alert, { variant: "info", children: "No alerts configured. Create an alert to get notified when a key metric crosses a threshold." })), !isLoading && alerts.length > 0 && (_jsx(Stack, { gap: "3", children: alerts.map((alert) => (_jsx(AlertCard, { alert: alert, onToggle: (id, isActive) => toggleMutation.mutate({ id, isActive }), onDelete: (id) => deleteMutation.mutate(id), onEdit: async (id, values) => {
+                        await editMutation.mutateAsync({ id, values });
+                    } }, alert.id))) }))] }));
 }

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

@@ -1,12 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SIEVE_OP, sieveFilter, sortBy } from "@mohasinac/appkit/client";
-import { Badge, Button, FilterChipGroup, Stack, Text, TextLink } from "../../../ui/index.js";
+import { Badge, Button, FilterChipGroup, Stack, Text, TextLink, Toggle } from "../../../ui/index.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs.js";
 import { SELLER_BULK_ACTIONS } from "../../products/constants/action-defs.js";
 import { BUNDLE_COPY, BUNDLE_STOCK_VARIANT, } from "../../../_internal/shared/features/categories/bundle-copy.js";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../../admin/hooks/useAdminListingData.js";
+import { useOptimisticRowFlag } from "../../admin/hooks/useOptimisticRowFlag.js";
+import { apiClient } from "../../../http/index.js";
 import { DataListingView } from "../../admin/components/DataListingView.js";
 function formatPrice(value) {
     if (typeof value !== "number" || value <= 0)
@@ -38,6 +40,22 @@ const COLUMNS = [
     { key: "updatedAt", header: "Updated", className: "w-28" },
 ];
 export function SellerBundlesView({ editHrefTemplate, newHref }) {
+    /*
+     * 🛑 `isActive` was a READ-ONLY badge here, and the update schema was built
+     * to take it on its own — shipping-config's even says so in a comment: "a
+     * PATCH may legitimately carry only `isActive`". Nothing in the client had
+     * ever sent one, so flipping one boolean meant a full-editor round trip.
+     *
+     * The optimistic/rollback logic lives in the hook because eight listings
+     * grew this control at once; see its header for why rollback must DELETE
+     * the override key rather than write back a captured value.
+     */
+    const activeFlag = useOptimisticRowFlag({
+        mutate: (id, next) => apiClient.put(SELLER_ENDPOINTS.BUNDLE_BY_ID(id), { isActive: next }),
+        invalidate: [["seller", "bundles", "listing"], ["bundles"]],
+        successMessage: (next) => (next ? "Bundle activated." : "Bundle deactivated."),
+        errorMessage: "Could not change that bundle's status.",
+    });
     const config = {
         portal: "seller",
         title: "Bundles",
@@ -60,19 +78,29 @@ export function SellerBundlesView({ editHrefTemplate, newHref }) {
             { value: sortBy("createdAt", "ASC"), label: "Oldest" },
         ],
         columns: COLUMNS,
-        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
-            id: toStringValue(item.id, `bundle-${index}`),
-            primary: toStringValue(item.name, "Untitled bundle"),
-            secondary: toStringValue(item.slug, "no-slug"),
-            price: formatPrice(item.bundlePrice),
-            members: String(Array.isArray(item.bundleProductIds) ? item.bundleProductIds.length : 0),
-            stockStatus: toStringValue(item.bundleStockStatus, "in_stock"),
-            isActive: item.isActive === true,
-            status: item.isActive === true
-                ? BUNDLE_COPY.adminList.activeBadge
-                : BUNDLE_COPY.adminList.inactiveBadge,
-            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-        })),
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => {
+            const id = toStringValue(item.id, `bundle-${index}`);
+            /*
+             * Resolved ONCE, through the pending override, and then used for both
+             * `isActive` and the `status` LABEL below. Deriving the label from the
+             * raw value while the flag read the override is how the badge ends up
+             * saying "Inactive" beside a switch that is on.
+             */
+            const isActive = activeFlag.resolve(id, item.isActive === true);
+            return {
+                id,
+                primary: toStringValue(item.name, "Untitled bundle"),
+                secondary: toStringValue(item.slug, "no-slug"),
+                price: formatPrice(item.bundlePrice),
+                members: String(Array.isArray(item.bundleProductIds) ? item.bundleProductIds.length : 0),
+                stockStatus: toStringValue(item.bundleStockStatus, "in_stock"),
+                isActive,
+                status: isActive
+                    ? BUNDLE_COPY.adminList.activeBadge
+                    : BUNDLE_COPY.adminList.inactiveBadge,
+                updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            };
+        }),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
         buildFilters: (filterState) => {
             const parts = [];
@@ -83,6 +111,17 @@ export function SellerBundlesView({ editHrefTemplate, newHref }) {
             return parts.join(",") || undefined;
         },
         rowHrefTemplate: editHrefTemplate,
+        /*
+         * 🛑 This view had NO renderRowActions at all — the only per-row
+         * affordance was the row link to the editor, so a bundle could only be
+         * activated or deactivated by opening it.
+         *
+         * The toggle lives here rather than in a column because `rowHrefTemplate`
+         * makes the row an anchor: a normal column cell does not stop
+         * propagation, so a switch there would flip AND navigate. This slot is
+         * already click-stopped in all three renderers.
+         */
+        renderRowActions: (row) => (_jsx(Toggle, { size: "sm", checked: row.isActive, disabled: activeFlag.pendingId === row.id, ariaLabel: `${row.isActive ? "Deactivate" : "Activate"} ${row.primary}`, onChange: (next) => { void activeFlag.set(row.id, next); } })),
         toolbarExtra: (_jsx(Button, { asChild: true, size: "sm", variant: "primary", children: _jsx(TextLink, { href: newHref, layout: "flex", align: "center", gap: "xs", children: "+ New Bundle" }) })),
         // Rule #7: bulk-action array sourced from the SELLER_BULK_ACTIONS preset.
         buildBulkActions: (selection) => {

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

@@ -1,11 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row, sortBy } from "@mohasinac/appkit/client";
-import { Badge, Button, Span } from "../../../ui/index.js";
+import { Badge, Button, Span, Toggle } from "../../../ui/index.js";
 import { SELLER_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 { toRecordArray, toRelativeDate, toStringValue, } from "../../admin/hooks/useAdminListingData.js";
+import { useOptimisticRowFlag } from "../../admin/hooks/useOptimisticRowFlag.js";
+import { apiClient } from "../../../http/index.js";
 import { DataListingView } from "../../admin/components/DataListingView.js";
 const THEME_LABELS = {
     related: "Related",
@@ -51,6 +53,22 @@ const COLUMNS = [
     },
 ];
 export function SellerGroupedListingsView({ onCreateClick, onEditClick, onDeleteClick, }) {
+    /*
+     * 🛑 `isActive` was a READ-ONLY badge here, and the update schema was built
+     * to take it on its own — shipping-config's even says so in a comment: "a
+     * PATCH may legitimately carry only `isActive`". Nothing in the client had
+     * ever sent one, so flipping one boolean meant a full-editor round trip.
+     *
+     * The optimistic/rollback logic lives in the hook because eight listings
+     * grew this control at once; see its header for why rollback must DELETE
+     * the override key rather than write back a captured value.
+     */
+    const activeFlag = useOptimisticRowFlag({
+        mutate: (id, next) => apiClient.patch(SELLER_ENDPOINTS.GROUPED_LISTING_BY_ID(id), { isActive: next }),
+        invalidate: [["seller", "grouped-listings"], ["grouped-listings"]],
+        successMessage: (next) => (next ? "Group activated." : "Group deactivated."),
+        errorMessage: "Could not change that group's status.",
+    });
     const config = {
         portal: "seller",
         title: "Grouped Listings",
@@ -72,7 +90,9 @@ export function SellerGroupedListingsView({ onCreateClick, onEditClick, onDelete
             title: toStringValue(item.title, "Untitled group"),
             groupTheme: toStringValue(item.groupTheme, "generic"),
             productCount: Array.isArray(item.productIds) ? item.productIds.length : 0,
-            isActive: item.isActive === true,
+            // Resolved through the pending override so the Status badge and the
+            // row toggle cannot disagree between the click and the refetch.
+            isActive: activeFlag.resolve(toStringValue(item.id, `group-${index}`), item.isActive === true),
             visibilityStatus: toStringValue(item.visibilityStatus, "hidden"),
             createdAt: toRelativeDate(item.createdAt),
         })),
@@ -92,7 +112,7 @@ export function SellerGroupedListingsView({ onCreateClick, onEditClick, onDelete
             : undefined,
         // Mirrors the "Edit" row action below so table rows and cards both navigate on click.
         onRowClick: onEditClick ? (row) => onEditClick(row.id) : undefined,
-        renderRowActions: (row) => (_jsxs(Row, { gap: "xs", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onEditClick?.(row.id), children: ACTIONS.STORE["edit-listing"].label }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => onDeleteClick?.(row.id), children: ACTIONS.STORE["delete-listing"].label })] })),
+        renderRowActions: (row) => (_jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Toggle, { size: "sm", checked: row.isActive, disabled: activeFlag.pendingId === row.id, ariaLabel: `${row.isActive ? "Deactivate" : "Activate"} ${row.title}`, onChange: (next) => { void activeFlag.set(row.id, next); } }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => onEditClick?.(row.id), children: ACTIONS.STORE["edit-listing"].label }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => onDeleteClick?.(row.id), children: ACTIONS.STORE["delete-listing"].label })] })),
     };
     return _jsx(DataListingView, { config: config });
 }

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

@@ -37,6 +37,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import React, { useCallback, useState } from "react";
 import { Badge, ConfirmDeleteModal, RowActionMenu, Span, Text } from "../../../ui/index.js";
+import { apiClient } from "../../../http/index.js";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
@@ -46,6 +47,7 @@ import { PRODUCT_FIELDS } from "../../../constants/field-names.js";
 import { SIEVE_OP, sieveFilter } from "../../../utils/sieve-builder.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { toCurrency, toRecordArray, toRelativeDate, toStringValue, } from "../../admin/hooks/useAdminListingData.js";
+import { useOptimisticRowFlag } from "../../admin/hooks/useOptimisticRowFlag.js";
 import { DataListingView } from "../../admin/components/DataListingView.js";
 import { ROW_ACTION_META, SELLER_BULK_ACTIONS } from "../../products/constants/action-defs.js";
 import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope.js";
@@ -204,6 +206,17 @@ export function SellerListingTypeView({ type, onCreateClick, onEditClick, onDele
         await performDelete(id);
         setDeleteTargetId(null);
     }, [performDelete]);
+    /*
+     * Optimistic status, via the shared hook — see its header for why a
+     * rollback must DELETE the override key rather than write back a captured
+     * value, and why the key is cleared on success too.
+     */
+    const statusFlag = useOptimisticRowFlag({
+        mutate: (id, next) => apiClient.patch(SELLER_ENDPOINTS.PRODUCT_BY_ID(id), { status: next }),
+        invalidate: [["seller", plugin.tabSlug]],
+        successMessage: (next) => next === "published" ? "Listing published." : "Listing unpublished.",
+        errorMessage: "Could not change that listing's status.",
+    });
     const handleEdit = useCallback((id) => {
         if (onEditClick)
             onEditClick(id);
@@ -233,7 +246,15 @@ export function SellerListingTypeView({ type, onCreateClick, onEditClick, onDele
         {
             key: "status",
             header: "Status",
-            render: (row) => (_jsx(Badge, { variant: row.status === "active" ? "active" : "inactive", size: "xs", className: "capitalize", children: row.status })),
+            /*
+             * Reads the optimistic override so the badge and the row action agree
+             * the instant one is used — otherwise the menu would say "Unpublish"
+             * while the badge beside it still said published, until the refetch.
+             */
+            render: (row) => {
+                const status = statusFlag.resolve(row.id, row.status);
+                return (_jsx(Badge, { variant: status === "active" || status === "published" ? "active" : "inactive", size: "xs", className: "capitalize", children: status }));
+            },
         },
         textCell("createdAt", spec.createdHeader ?? "Created"),
     ];
@@ -291,15 +312,40 @@ export function SellerListingTypeView({ type, onCreateClick, onEditClick, onDele
                 },
             }))
             : undefined,
-        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
-                { label: ACTIONS.STORE["edit-listing"].label, onClick: () => handleEdit(row.id) },
-                {
-                    label: ACTIONS.STORE["delete-listing"].label,
-                    destructive: true,
-                    onClick: () => setDeleteTargetId(row.id),
-                    disabled: deletingId === row.id,
-                },
-            ] })),
+        renderRowActions: (row) => {
+            const isPublished = statusFlag.resolve(row.id, row.status) === "published";
+            return (_jsx(RowActionMenu, { actions: [
+                    { label: ACTIONS.STORE["edit-listing"].label, onClick: () => handleEdit(row.id) },
+                    /*
+                     * 🛑 This one entry lights up SIX seller pages — art, classified,
+                     * digital codes, live, spares and stickers are each a ~25-line
+                     * wrapper around this component.
+                     *
+                     * `status` was a read-only Badge on all of them, so changing one
+                     * listing from published to draft meant opening the full editor,
+                     * even though `PATCH /api/store/products/[id]` has always taken
+                     * `status` and SellerProductsView already drives that exact call.
+                     *
+                     * `ACTIONS.STORE["publish-listing"]` / `["unpublish-listing"]`
+                     * were defined with ZERO call sites — this is what finally wires
+                     * them, rather than reinventing the labels inline.
+                     */
+                    {
+                        label: isPublished
+                            ? ACTIONS.STORE["unpublish-listing"].label
+                            : ACTIONS.STORE["publish-listing"].label,
+                        separator: true,
+                        disabled: statusFlag.pendingId === row.id,
+                        onClick: () => { void statusFlag.set(row.id, isPublished ? "draft" : "published"); },
+                    },
+                    {
+                        label: ACTIONS.STORE["delete-listing"].label,
+                        destructive: true,
+                        onClick: () => setDeleteTargetId(row.id),
+                        disabled: deletingId === row.id,
+                    },
+                ] }));
+        },
     };
     return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: `Delete ${spec.deleteLabel}`, message: `Are you sure you want to delete this ${spec.deleteLabel.toLowerCase()}? This cannot be undone.`, onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }