@mohasinac/appkit 4.54.1 → 4.55.0

package/dist/features/layout/NavbarLayout.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import Link from "next/link.js";
 import { ChevronDown } from "lucide-react";
 import { Div, IconButton, Li, Nav, Row, Span, Ul } from "../../ui/index.js";
@@ -10,6 +11,20 @@ import { useHoldToOpen } from "./useHoldToOpen.js";
 const __O = {
     hidden: "overflow-hidden",
 };
+/**
+ * How long the panel survives the pointer leaving the trigger.
+ *
+ * It is a hover BRIDGE, and it replaces the `pt` padding the in-flow panel used
+ * to carry for the same job: the panel is portalled to `<body>` now, so there is
+ * no shared box the pointer can cross and no padding that would help. 150ms is
+ * long enough for a diagonal flick from the trigger to the first menu row and
+ * short enough that it never reads as a stuck menu.
+ */
+const CLOSE_GRACE_MS = 150;
+/** `min-w-[15rem]` on the panel — the width estimate used before it has mounted. */
+const PANEL_MIN_WIDTH_PX = 240;
+/** Keeps a right-aligned panel off the viewport edge. */
+const VIEWPORT_MARGIN_PX = 8;
 function DefaultNavItem({ item, isActive, }) {
     const activeClasses = item.highlighted
         ? "border border-primary-400/40 dark:border-secondary-400/30 text-primary-700 dark:text-secondary-400 bg-primary-50/80 dark:bg-secondary-900/30 px-[var(--appkit-space-3)] transition-colors duration-150"
@@ -18,21 +33,105 @@ function DefaultNavItem({ item, isActive, }) {
             : "text-[var(--appkit-color-text-muted)] hover:bg-surface-hover hover:text-zinc-950 dark:hover:text-white transition-colors duration-150 px-[var(--appkit-space-3)]";
     const hasChildren = Boolean(item.children && item.children.length > 0);
     /*
-     * Click-to-open state, which exists ONLY for the caret.
+     * 🛑 OPEN STATE IS JS, AND THE PANEL IS PORTALLED. Neither is a preference.
+     *
+     * This used to open on `group-hover` / `group-focus-within` with the panel
+     * `position: absolute` inside the item — and the panel was INVISIBLE on every
+     * surface that renders this navbar, because `NavbarLayout` wraps the items in
+     * `relative flex-1 overflow-hidden` and a `overflow-x-auto` scroller for its
+     * scroll arrows. An absolutely-positioned descendant cannot escape an
+     * ancestor's overflow, and `overflow-x: auto` forces `overflow-y` to `auto`
+     * as well, so the 346px panel was clipped to the 40px nav strip.
+     *
+     * That is also why it was previously measured as working: the computed style
+     * really is `display: block` with a 346px height. Clipping does not show up
+     * in a computed style — only in what you can see.
      *
-     * 🛑 Hover and focus stay pure CSS below, and this does not replace them. The
-     * panel opens on `group-hover` / `group-focus-within` with no JS at all, which
-     * is what keeps it usable for a keyboard user on Tab and before hydration.
-     * This adds the third affordance that was genuinely missing: a pointer user
-     * who CLICKS the caret expecting a menu got a navigation instead, because the
-     * caret was inside the parent `<Link>`.
+     * The only fix is to take the panel out of the clipping ancestor entirely, so
+     * it renders into `<body>` as `position: fixed` at coordinates read off the
+     * trigger. Hover and focus therefore cannot be CSS any more: there is no
+     * shared ancestor left for `:hover` to descend through. All four affordances
+     * survive — hover, focusing the trigger, the caret button, and hold-to-open
+     * on touch — and what is given up is the pre-hydration open, which was never
+     * real here: a clipped panel is not a working no-JS fallback.
+     *
+     * 🛑 Known limit, deliberately accepted rather than papered over: the panel
+     * is at the END of `<body>`, so TABBING off the caret moves to the next nav
+     * item (closing the menu) instead of into the children. The children stay
+     * reachable because the parent is a real link to a page that lists them all
+     * — the same argument the CSS version made — and Escape returns focus to the
+     * caret. Closing that properly means roving-tabindex menu semantics, which is
+     * its own change and should not ride along with a clipping fix.
      */
     const [open, setOpen] = useState(false);
+    const [coords, setCoords] = useState(null);
+    const [mounted, setMounted] = useState(false);
     const wrapRef = useRef(null);
+    const panelRef = useRef(null);
+    const closeTimerRef = useRef(null);
     const panelId = `nav-panel-${item.href.replace(/[^a-z0-9]+/gi, "-")}`;
+    // `createPortal` needs a DOM node, which does not exist during SSR.
+    useEffect(() => setMounted(true), []);
+    const cancelClose = useCallback(() => {
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    const openNow = useCallback(() => {
+        cancelClose();
+        setOpen(true);
+    }, [cancelClose]);
+    const scheduleClose = useCallback(() => {
+        cancelClose();
+        closeTimerRef.current = setTimeout(() => setOpen(false), CLOSE_GRACE_MS);
+    }, [cancelClose]);
+    // A pending timer outliving the item would call `setOpen` after unmount; the
+    // nav re-renders its item list whenever the listing-type flags or the session
+    // resolve.
+    useEffect(() => cancelClose, [cancelClose]);
+    /*
+     * Re-read the trigger's position whenever anything can move it.
+     *
+     * 🛑 The scroll listener is CAPTURING. The nav items live in their own
+     * horizontal scroller, so the scroll that slides the trigger sideways is that
+     * element's, not the window's — a bubbling listener on `window` never sees
+     * it, and the panel would hang over wherever the trigger used to be.
+     */
+    const measure = useCallback(() => {
+        const el = wrapRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const width = panelRef.current?.offsetWidth || PANEL_MIN_WIDTH_PX;
+        const maxLeft = Math.max(VIEWPORT_MARGIN_PX, window.innerWidth - width - VIEWPORT_MARGIN_PX);
+        setCoords({
+            top: rect.bottom,
+            left: Math.min(Math.max(rect.left, VIEWPORT_MARGIN_PX), maxLeft),
+        });
+    }, []);
+    useEffect(() => {
+        if (!open) {
+            setCoords(null);
+            return;
+        }
+        measure();
+        window.addEventListener("resize", measure);
+        window.addEventListener("scroll", measure, true);
+        return () => {
+            window.removeEventListener("resize", measure);
+            window.removeEventListener("scroll", measure, true);
+        };
+    }, [open, measure]);
     /*
      * Close on outside click, on Escape, and whenever the route changes.
      *
+     * 🛑 The outside test has to accept the PANEL too. It is portalled, so it is
+     * not inside `wrapRef` any more — testing the wrapper alone would treat a
+     * click on a menu link as "outside", unmount the link on `mousedown`, and the
+     * `click` that follows would land on nothing. Every menu item would silently
+     * fail to navigate.
+     *
      * The route-change close is the one that is easy to miss and the most
      * annoying to live with: the panel's own links navigate, and without this the
      * menu stays open over the page it just took you to. `isActive` is derived
@@ -42,12 +141,20 @@ function DefaultNavItem({ item, isActive, }) {
         if (!open)
             return;
         const onDown = (e) => {
-            if (!wrapRef.current?.contains(e.target))
-                setOpen(false);
+            const target = e.target;
+            if (wrapRef.current?.contains(target))
+                return;
+            if (panelRef.current?.contains(target))
+                return;
+            setOpen(false);
         };
         const onKey = (e) => {
-            if (e.key === "Escape")
-                setOpen(false);
+            if (e.key !== "Escape")
+                return;
+            setOpen(false);
+            // Escape has to return the caret focus, or the user is left tabbing from
+            // wherever inside a menu that no longer exists.
+            wrapRef.current?.querySelector("button")?.focus();
         };
         document.addEventListener("mousedown", onDown);
         document.addEventListener("keydown", onKey);
@@ -64,7 +171,7 @@ function DefaultNavItem({ item, isActive, }) {
      * one gesture is defined once. See `useHoldToOpen` for why the "did we hold"
      * flag has to be a ref.
      */
-    const holdHandlers = useHoldToOpen(() => setOpen(true), hasChildren);
+    const holdHandlers = useHoldToOpen(openNow, hasChildren);
     const trigger = (_jsxs(Link, { href: item.href, "aria-current": isActive ? "page" : undefined, className: `flex items-center gap-[var(--appkit-space-1-5)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] rounded-lg font-medium transition-colors duration-150 whitespace-nowrap ${activeClasses}${hasChildren ? " select-none touch-manipulation" : ""}`, ...holdHandlers, children: [item.icon, _jsx(Span, { children: item.label })] }));
     /*
      * The explicit narrow, not just `hasChildren`. A boolean derived from
@@ -76,29 +183,29 @@ function DefaultNavItem({ item, isActive, }) {
     if (!hasChildren || children.length === 0)
         return trigger;
     /*
-     * 🛑 Hover/focus-within CSS, not React state, and the trigger is still a real
-     * link.
-     *
-     * Two things this buys. The group stays usable without JS and without a
-     * pointer — `focus-within` opens it on Tab, so a keyboard user reaches the
-     * children. And the parent is a real link whose children are also reachable
-     * from the page it leads to, which is the progressive-enhancement shape
-     * rather than a menu that traps people.
-     *
-     * 🛑 The CARET is now a separate button, and `aria-expanded` is real rather
-     * than faked. It used to live INSIDE the parent `<Link>`, so clicking the one
+     * 🛑 The CARET is a separate button, and `aria-expanded` is real rather than
+     * faked. It used to live INSIDE the parent `<Link>`, so clicking the one
      * control that looks like a disclosure navigated away instead of disclosing —
-     * the caret was announcing an affordance the markup did not have. It is the
-     * button that owns `aria-expanded`/`aria-controls`, because it is the only
-     * part that tracks state; the hover and focus paths still open the panel
-     * without touching it, which is why the attribute can be false while the
-     * panel is visible. That asymmetry is honest: the button reports what the
-     * BUTTON did, and a hover is not a disclosure a screen reader user performed.
+     * the caret was announcing an affordance the markup did not have.
      *
-     * The `pt` on the panel is a hover bridge: without it the gap between the
-     * trigger and the panel closes the menu as the pointer crosses it.
+     * The trigger stays a real link, so a tap still follows it and a crawler
+     * still gets a destination; the menu is the affordance on top, never a
+     * replacement for it.
      */
-    return (_jsxs(Div, { ref: wrapRef, className: "relative group", children: [_jsxs(Row, { align: "center", gap: "none", children: [trigger, _jsx(IconButton, { type: "button", size: "sm", variant: "ghost", rounded: "md", "aria-expanded": open, "aria-haspopup": "true", "aria-controls": panelId, "aria-label": `${item.label} menu`, onClick: () => setOpen((v) => !v), icon: _jsx(ChevronDown, { className: `w-3.5 h-3.5 shrink-0 opacity-70 transition-transform duration-150 ${open ? "rotate-180" : ""}`, "aria-hidden": "true" }) })] }), _jsx(Div, { id: panelId, className: `absolute left-0 top-full z-20 pt-[var(--appkit-space-1)] group-hover:block group-focus-within:block ${open ? "block" : "hidden"}`, children: _jsx(Div, { surface: "elevated", border: "default", rounded: "lg", shadow: "lg", padding: "xs", children: _jsx(Ul, { className: "min-w-[15rem] list-none", children: children.map((child) => (_jsx(Li, { children: _jsxs(Link, { href: child.href, className: "flex items-start gap-[var(--appkit-space-2)] rounded-md px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text)] hover:bg-surface-hover transition-colors duration-150", children: [child.icon && (_jsx(Span, { className: "flex-shrink-0 mt-[var(--appkit-space-0-5)]", "aria-hidden": "true", children: child.icon })), _jsxs(Span, { className: "block", children: [_jsx(Span, { weight: "medium", className: "block", children: child.label }), child.description && (_jsx(Span, { size: "xs", color: "muted", className: "block mt-[var(--appkit-space-0-5)] whitespace-normal", children: child.description }))] })] }) }, child.href))) }) }) })] }));
+    const panel = (_jsx(Div, { ref: panelRef, id: panelId, 
+        // Positioning only — the exception the inline-style rule names, since
+        // these are runtime measurements with no representable class.
+        style: {
+            position: "fixed",
+            top: coords?.top ?? 0,
+            left: coords?.left ?? 0,
+            zIndex: "var(--appkit-z-dropdown)",
+            // Rendered-but-hidden for exactly one frame: the panel has to be in the
+            // DOM for `measure` to read its real width, and `visibility` keeps it
+            // measurable without painting it at the placeholder position.
+            visibility: coords ? "visible" : "hidden",
+        }, onPointerEnter: cancelClose, onPointerLeave: scheduleClose, onFocusCapture: cancelClose, onBlurCapture: scheduleClose, children: _jsx(Div, { surface: "elevated", border: "default", rounded: "lg", shadow: "lg", padding: "xs", children: _jsx(Ul, { className: "min-w-[15rem] list-none", children: children.map((child) => (_jsx(Li, { children: _jsxs(Link, { href: child.href, onClick: () => setOpen(false), className: "flex items-start gap-[var(--appkit-space-2)] rounded-md px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text)] hover:bg-surface-hover transition-colors duration-150", children: [child.icon && (_jsx(Span, { className: "flex-shrink-0 mt-[var(--appkit-space-0-5)]", "aria-hidden": "true", children: child.icon })), _jsxs(Span, { className: "block", children: [_jsx(Span, { weight: "medium", className: "block", children: child.label }), child.description && (_jsx(Span, { size: "xs", color: "muted", className: "block mt-[var(--appkit-space-0-5)] whitespace-normal", children: child.description }))] })] }) }, child.href))) }) }) }));
+    return (_jsxs(Div, { ref: wrapRef, className: "relative", onPointerEnter: openNow, onPointerLeave: scheduleClose, onFocusCapture: openNow, onBlurCapture: scheduleClose, children: [_jsxs(Row, { align: "center", gap: "none", children: [trigger, _jsx(IconButton, { type: "button", size: "sm", variant: "ghost", rounded: "md", "aria-expanded": open, "aria-haspopup": "true", "aria-controls": panelId, "aria-label": `${item.label} menu`, onClick: () => (open ? setOpen(false) : openNow()), icon: _jsx(ChevronDown, { className: `w-3.5 h-3.5 shrink-0 opacity-70 transition-transform duration-150 ${open ? "rotate-180" : ""}`, "aria-hidden": "true" }) })] }), open && mounted ? createPortal(panel, document.body) : null] }));
 }
 /**
  * NavbarLayout — generic horizontal navigation bar shell.

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

@@ -449,7 +449,7 @@ export interface OrderDocument extends BaseDocument {
     platformFee?: number;
     depositAmount?: number;
     codRemainingAmount?: number;
-    /** COD handling fee charged to the buyer: max(codHandlingFeeMin, subtotal × codHandlingFeePercent / 100). Only set when paymentMethod === "cod". */
+    /** COD handling fee charged to the buyer: min(subtotal × codHandlingFeePercent / 100, codHandlingFeeCap). Only set when paymentMethod === "cod". */
     codHandlingFee?: number;
     /** Buyer opted into gift wrapping at checkout (unchecked by default). */
     giftWrapAddon?: boolean;

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

@@ -31,8 +31,7 @@ import { ctaAnchorProps } from "../../layout/cta-anchor.js";
 import { ContextualTrail } from "../../categories/components/ContextualTrail.js";
 import { productCrumbs, withTrailHead } from "../../categories/utils/breadcrumb-chain.js";
 import { getDefaultCurrency } from "../../../core/baseline-resolver.js";
-import { OwnerQuickActions } from "../../admin/components/OwnerQuickActions.js";
-import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { ProductOwnerQuickActions } from "./ProductOwnerQuickActions.js";
 import { PurchaseReviewAffordance } from "../../reviews/components/PurchaseReviewAffordance.js";
 import { Button, Container, Div, Heading, Main, PriceDisplay, RichText, Row, Section, Span, Stack, Text, Ul, Ol, Li, SpecTable, Icon, } from "../../../ui/index.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
@@ -353,29 +352,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                     price: product.price,
                     storeId: product.storeId,
                     storeName: product.storeName,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(ContextualTrail, { trails: trails, alternates: { ids: categoryIds, names: categoryIdNames } }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(OwnerQuickActions, { resource: "PRODUCT", placement: "detail", recordLabel: title || String(product.slug ?? product.id), storeId: product.storeId ? String(product.storeId) : undefined, editHref: String(ROUTES.STORE.PRODUCTS_EDIT(String(product.id))), onClone: async () => {
-                                        const res = await fetch(SELLER_ENDPOINTS.PRODUCT_DUPLICATE(String(product.id)), { method: "POST" });
-                                        if (!res.ok)
-                                            return;
-                                        const json = (await res.json());
-                                        const newId = json?.data?.id;
-                                        /*
-                                         * Land on the COPY's editor. The endpoint returns the new
-                                         * draft's id precisely so a one-click clone ends somewhere
-                                         * useful rather than back on the public page, where the
-                                         * draft is invisible.
-                                         */
-                                        if (newId && typeof window !== "undefined") {
-                                            window.location.assign(String(ROUTES.STORE.PRODUCTS_EDIT(newId)));
-                                        }
-                                    }, onDelete: async () => {
-                                        await fetch(SELLER_ENDPOINTS.PRODUCT_BY_ID(String(product.id)), {
-                                            method: "DELETE",
-                                        });
-                                        if (typeof window !== "undefined") {
-                                            window.location.assign(String(ROUTES.PUBLIC.PRODUCTS));
-                                        }
-                                    } }), _jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(ContextualTrail, { trails: trails, alternates: { ids: categoryIds, names: categoryIdNames } }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(ProductOwnerQuickActions, { productId: String(product.id), recordLabel: title || String(product.slug ?? product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
                                                 ? "Brand New"
                                                 : condition === "like_new"
                                                     ? "Like New"

package/dist/features/products/components/ProductOwnerQuickActions.d.ts

@@ -0,0 +1,11 @@
+export interface ProductOwnerQuickActionsProps {
+    /** The product's document id — what both endpoints are keyed on. */
+    productId: string;
+    /** Store SLUG. `SessionUser.storeId` holds the slug, not the Auth UID. */
+    storeId?: string;
+    /** Names the record in the delete confirmation. */
+    recordLabel?: string;
+    placement?: "card" | "detail";
+    className?: string;
+}
+export declare function ProductOwnerQuickActions({ productId, storeId, recordLabel, placement, className, }: ProductOwnerQuickActionsProps): import("react").JSX.Element;

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

@@ -0,0 +1,120 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The product flavour of `OwnerQuickActions` — pencil, admin clone, bin.
+ *
+ * ## 🛑 Why this file exists at all
+ *
+ * `OwnerQuickActions` takes `onClone` / `onDelete` as FUNCTIONS, and
+ * `ProductDetailPageView` is a Server Component. A function cannot cross that
+ * boundary: React throws
+ *
+ *     Event handlers cannot be passed to Client Component props.
+ *       {resource: "PRODUCT", …, onClone: function onClone, onDelete: …}
+ *
+ * at render, which took down EVERY `/products/[slug]` page in production with
+ * an opaque React error — two digests, one per handler. It is not a schema
+ * mismatch and no `<Suspense>` boundary affects it: Suspense governs when a
+ * subtree may stream, serialization governs what may be sent, and a closure is
+ * never sendable.
+ *
+ * So the closures have to be authored on the client side of the boundary. This
+ * component is that side: the Server Component hands it strings, and it builds
+ * the handlers here.
+ *
+ * ## 🛑 Why not just put `"use client"` on the detail view
+ *
+ * It renders the whole product page, pulls server-resolved data through a
+ * dozen render props, and is the SEO surface for every listing. Marking it a
+ * Client Component would drag all of that into the browser bundle to fix two
+ * buttons. The boundary belongs at the smallest thing that needs it.
+ *
+ * ## 🛑 Why ids, not endpoint strings
+ *
+ * An earlier shape passed `cloneEndpoint` / `deleteEndpoint` as props. That is
+ * one more pair of strings a caller can get wrong, and the clone's redirect
+ * target depends on the id the endpoint RETURNS, which no caller can know in
+ * advance. Taking the product id and deriving all three here keeps the
+ * endpoints next to the code that reads their responses.
+ *
+ * @tag domain:products
+ * @tag layer:components
+ * @tag access:client
+ */
+import { useCallback } from "react";
+import { OwnerQuickActions } from "../../admin/components/OwnerQuickActions.js";
+import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { useToast } from "../../../ui/index.js";
+import { normalizeError } from "../../../errors/normalize.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
+export function ProductOwnerQuickActions({ productId, storeId, recordLabel, placement = "detail", className, }) {
+    const { showToast } = useToast();
+    /*
+     * Clone reuses POST /api/store/products/[id]/duplicate, which already strips
+     * identity, analytics, bid state and group membership and forces
+     * status: draft — hence no confirmation on it, and admin-only.
+     */
+    const handleClone = useCallback(async () => {
+        /*
+         * 🛑 Clone reports its own failures. `OwnerQuickActions` catches and toasts
+         * for DELETE only — it invokes clone as `void onClone?.()`, so a rejection
+         * here would be an unhandled promise and nothing at all would appear on
+         * screen. The previous inline version was worse than silent: it did
+         * `if (!res.ok) return`, so a refused clone looked exactly like a button
+         * that does nothing, and the obvious response is to press it again.
+         */
+        try {
+            const res = await fetch(SELLER_ENDPOINTS.PRODUCT_DUPLICATE(productId), {
+                method: "POST",
+            });
+            if (!res.ok) {
+                const body = (await res.json().catch(() => null));
+                showToast(toUserMessage(body?.code ?? "UNKNOWN"), "error");
+                return;
+            }
+            const json = (await res.json());
+            const newId = json?.data?.id;
+            /*
+             * Land on the COPY's editor. The endpoint returns the new draft's id
+             * precisely so a one-click clone ends somewhere useful rather than back
+             * on the public page, where a draft is invisible.
+             */
+            if (newId && typeof window !== "undefined") {
+                window.location.assign(String(ROUTES.STORE.PRODUCTS_EDIT(newId)));
+                return;
+            }
+            /*
+             * A 2xx with no id is a successful call that cannot be acted on — the
+             * copy may well exist, so saying "failed" would be wrong, and saying
+             * nothing leaves the admin believing the click was ignored.
+             */
+            showToast("Copy created, but its editor could not be opened.", "info");
+        }
+        catch (err) {
+            const normalized = normalizeError(err);
+            showToast(toUserMessage(normalized.code ?? "UNKNOWN"), "error");
+        }
+    }, [productId, showToast]);
+    /*
+     * 🛑 Throws on a failed DELETE rather than returning quietly.
+     * `OwnerQuickActions.handleConfirmedDelete` catches and toasts — and because
+     * success navigates away, a swallowed failure is indistinguishable from "it
+     * worked but the page did not move". The previous inline version ignored
+     * `res.ok` entirely and navigated regardless, so a refused delete sent the
+     * owner to the product list as though it had succeeded.
+     */
+    const handleDelete = useCallback(async () => {
+        const res = await fetch(SELLER_ENDPOINTS.PRODUCT_BY_ID(productId), {
+            method: "DELETE",
+        });
+        if (!res.ok) {
+            const body = (await res.json().catch(() => null));
+            throw Object.assign(new Error("Delete failed"), { code: body?.code });
+        }
+        if (typeof window !== "undefined") {
+            window.location.assign(String(ROUTES.PUBLIC.PRODUCTS));
+        }
+    }, [productId]);
+    return (_jsx(OwnerQuickActions, { resource: "PRODUCT", placement: placement, className: className, recordLabel: recordLabel, storeId: storeId, editHref: String(ROUTES.STORE.PRODUCTS_EDIT(productId)), onClone: handleClone, onDelete: handleDelete }));
+}

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { ShoppingCart, Heart, Columns } from "lucide-react";
 import { useRouter } from "next/navigation.js";
 import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
@@ -31,6 +31,7 @@ import { PRODUCT_FIELDS } from "../../../constants/field-names.js";
 import { useBottomActions } from "../../layout/index.js";
 import { GENERIC_PRODUCT_LISTING_TYPES, PRODUCT_TYPE_FILTER_TABS } from "../constants/listing-tabs.js";
 import { parseSelectedListingTypes } from "../utils/listing-type.js";
+import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags.js";
 import { commonSortOptionsFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { AVAILABILITY_VALUES } from "../../../constants/field-names.js";
 import { AvailabilityTabs } from "./AvailabilityTabs.js";
@@ -77,13 +78,42 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
     const [filterOpen, setFilterOpen] = useState(false);
     const [compareIds, setCompareIds] = useState([]);
     const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
+    /*
+     * ── What this page actually spans ────────────────────────────────────────
+     *
+     * 🛑 A type an admin has switched OFF must not appear as a filter option.
+     * `listingTypes` / `typeTabs` describe what the page covers by DESIGN
+     * (`GENERIC_PRODUCT_LISTING_TYPES`, or a store tab's own set); the flags
+     * describe what this site offers. Only the intersection is real.
+     *
+     * Ticking a disabled type was not merely untidy — `listPublicProducts`
+     * narrows the request to `selected ∩ span` and falls back to the FULL span
+     * when that intersection is empty, so a chip for a disabled type silently
+     * WIDENED the results instead of narrowing them (the same trap documented
+     * for out-of-span types on `/products`).
+     *
+     * Falling back to the ungated sets when the filter empties them is
+     * deliberate: an empty span is not "show nothing", it is a settings document
+     * that disabled everything this page covers, and rendering a type-less
+     * listing is more useful than rendering an empty one. `useListingTypeFlags`
+     * already fails open while settings load, so there is no first-paint flash.
+     */
+    const listingTypeFlags = useListingTypeFlags();
+    const enabledSpan = useMemo(() => {
+        const kept = listingTypes.filter((t) => listingTypeFlags[t]);
+        return (kept.length > 0 ? kept : listingTypes);
+    }, [listingTypes, listingTypeFlags]);
+    const enabledTypeTabs = useMemo(() => {
+        const kept = typeTabs.filter((tab) => enabledSpan.includes(tab.id));
+        return kept.length > 0 ? kept : typeTabs;
+    }, [typeTabs, enabledSpan]);
     // ── Type filter (multi-select) ───────────────────────────────────────────
     // The URL value is a pipe-joined set; empty means "every type this page
     // spans". Unknown tokens are dropped rather than passed through to a
     // Firestore `==` that could never match (Root Cause #33).
     const typeParam = table.get(TABLE_KEYS.LISTING_TYPE);
-    const selectedTypes = parseSelectedListingTypes(typeParam).filter((t) => listingTypes.includes(t));
-    const effectiveTypes = (selectedTypes.length > 0 ? selectedTypes : listingTypes);
+    const selectedTypes = parseSelectedListingTypes(typeParam).filter((t) => enabledSpan.includes(t));
+    const effectiveTypes = (selectedTypes.length > 0 ? selectedTypes : enabledSpan);
     // Sorts valid across every selected type. Pick Auctions alone and you get
     // "Ending Soon"; pick Auctions + Products and you get only what both
     // support, because a sort on `auctionEndDate` would order the products
@@ -109,9 +139,9 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
     // The drawer's own, uncommitted type selection. The "Full <type> filters →"
     // link tracks THIS rather than the applied URL value, so it appears the
     // moment the user ticks a single type instead of only after Apply.
-    const pendingTypes = parseSelectedListingTypes(pendingTable.get(TABLE_KEYS.LISTING_TYPE)).filter((t) => listingTypes.includes(t));
+    const pendingTypes = parseSelectedListingTypes(pendingTable.get(TABLE_KEYS.LISTING_TYPE)).filter((t) => enabledSpan.includes(t));
     const dedicatedPage = dedicatedPageFor(pendingTypes);
-    const listingTypeOptions = typeTabs.map((t) => ({ value: t.id, label: t.label }));
+    const listingTypeOptions = enabledTypeTabs.map((t) => ({ value: t.id, label: t.label }));
     const openFilters = useCallback(() => {
         onFilterReset();
         setFilterOpen(true);

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

@@ -10,6 +10,9 @@ import { GENERIC_PRODUCT_LISTING_TYPES } from "../constants/listing-tabs.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { listPublicProducts, parsePublicProductParams, defaultAvailabilityForListingTypes, } from "../../../_internal/server/features/products/list-public.js";
 import { parseSelectedListingTypes } from "../utils/listing-type.js";
+import { isListingTypeEnabled } from "../../../_internal/shared/listing-types/feature-flags.js";
+import { siteSettingsRepository } from "../../../repositories/index.js";
+import { safeRead } from "../../../errors/safe-read.js";
 const DEFAULT_PAGE_SIZE = 24;
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
 export async function ProductsIndexPageView({ searchParams = {} }) {
@@ -47,11 +50,41 @@ export async function ProductsIndexPageView({ searchParams = {} }) {
     const effectiveTypes = selectedTypes.length > 0 ? selectedTypes : GENERIC_PRODUCT_LISTING_TYPES;
     // See ArtStickersListView — one shared filter implementation with
     // /api/products, so SSR and the client refetch agree by construction.
-    const products = await listPublicProducts(parsePublicProductParams(searchParams, {
-        listingTypes: GENERIC_PRODUCT_LISTING_TYPES,
-        pageSize: DEFAULT_PAGE_SIZE,
-        sorts: DEFAULT_SORT,
-        ...defaultAvailabilityForListingTypes(effectiveTypes),
-    }));
-    return (_jsxs(Main, { children: [_jsx(Section, { border: "bottom-subtle", paddingY: "b-md", padding: "t-xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "bold", color: "primary", children: "Products" }), _jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: "Discover amazing products and deals" }), _jsx(Div, { className: "mt-3", children: _jsx(TextLink, { variant: "bare", href: String(ROUTES.PUBLIC.AUCTIONS), rounded: "full", paddingX: "sm", paddingY: "2xs", size: "xs", weight: "medium", layout: "inline-flex", align: "center", gap: "sm", className: "border border-primary/30 bg-primary/10 text-primary-700 dark:text-primary-400 hover:bg-primary/15 transition-colors", children: "\uD83C\uDFF7\uFE0F Looking for unique deals? Browse Auctions \u2192" }) })] }) }), _jsxs(Container, { size: "xl", padding: "x-md", children: [_jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing, { initialData: products ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] })] }));
+    const [products, settings] = await Promise.all([
+        listPublicProducts(parsePublicProductParams(searchParams, {
+            listingTypes: GENERIC_PRODUCT_LISTING_TYPES,
+            pageSize: DEFAULT_PAGE_SIZE,
+            sorts: DEFAULT_SORT,
+            ...defaultAvailabilityForListingTypes(effectiveTypes),
+        })),
+        /*
+         * Read in parallel with the listing — the banner below is the only
+         * consumer, and serialising a settings read in front of the page's main
+         * query would spend a round trip against Rule #6's budget for one link.
+         *
+         * 🛑 `safeRead`, so a settings failure hides the banner rather than
+         * failing the catalogue. Auctions have their own nav entry and their own
+         * page; the banner is a shortcut, and a shortcut is the correct thing to
+         * lose when its gate cannot be evaluated.
+         */
+        safeRead(() => siteSettingsRepository.findById("global"), {
+            route: "/products",
+            key: "products.siteSettings",
+            fallback: null,
+        }),
+    ]);
+    /*
+     * 🛑 Auctions are a LISTING TYPE an admin can switch off, and this banner
+     * advertised them unconditionally.
+     *
+     * Every other auction entry point already respects the flag — the navbar
+     * child (filtered by key in `LayoutShellClient`), the footer link
+     * (`FOOTER_LINK_LISTING_TYPES`), the store tabs (`tabs.ts`), the
+     * category/brand tabs, and the homepage section (`gatedListing`). This was
+     * the one surface left promoting a page that renders nothing on a site with
+     * auctions disabled, which is Root Cause #37's dead-link shape reached from
+     * the other direction.
+     */
+    const showAuctionsBanner = isListingTypeEnabled("auction", settings);
+    return (_jsxs(Main, { children: [_jsx(Section, { border: "bottom-subtle", paddingY: "b-md", padding: "t-xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "bold", color: "primary", children: "Products" }), _jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: "Discover amazing products and deals" }), showAuctionsBanner && (_jsx(Div, { className: "mt-3", children: _jsx(TextLink, { variant: "bare", href: String(ROUTES.PUBLIC.AUCTIONS), rounded: "full", paddingX: "sm", paddingY: "2xs", size: "xs", weight: "medium", layout: "inline-flex", align: "center", gap: "sm", className: "border border-primary/30 bg-primary/10 text-primary-700 dark:text-primary-400 hover:bg-primary/15 transition-colors", children: "\uD83C\uDFF7\uFE0F Looking for unique deals? Browse Auctions \u2192" }) }))] }) }), _jsxs(Container, { size: "xl", padding: "x-md", children: [_jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing, { initialData: products ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] })] }));
 }

package/dist/providers/shipping-shiprocket/index.d.ts

@@ -12,10 +12,19 @@
  *    `loginResponse` requires — the rest are ignored, as Zod ignores unknown
  *    keys by default.
  *
- * 🛑 NOT VERIFIED: every other endpoint. Order creation, AWB assignment,
- *    tracking, serviceability and label generation all MUTATE or bill against
- *    a real carrier account, so none was called. Their field names below are
- *    claims taken from the published docs, not facts read off a payload.
+ * ✅ ALSO VERIFIED (2026-10-20): `GET /courier/serviceability/` from pickup
+ *    `413001`. HTTP 200, and `data.available_courier_companies` came back with
+ *    10-11 entries for Mumbai, Bengaluru and Delhi carrying `courier_name`,
+ *    `rate` and `estimated_delivery_days` — so `serviceabilityResponse` below
+ *    is read off a real payload, not inferred. It is a read-only quote: no
+ *    shipment is created and nothing is booked.
+ *
+ * 🛑 NOT VERIFIED: order creation, AWB assignment, tracking and label
+ *    generation. Each MUTATES or bills a real carrier account — creating an
+ *    order can schedule a pickup, an AWB can consume an allocation, a cancel
+ *    may still bill — so none was called, and none is discoverable without
+ *    incurring it. Their field names below are claims from the published docs,
+ *    not facts read off a payload.
  *
  * That asymmetry is the reason every response is parsed through Zod rather
  * than cast: an unverified contract that is wrong surfaces as a named error at