@mohasinac/appkit 4.70.0 → 4.71.2

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

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { formatPhysicalLocation } from "../../../utils/physical-location.js";
 import { normalizeError } from "../../../errors/normalize.js";
-import { trackError, ErrorCategory, ErrorSeverity, } from "../../../monitoring/error-tracking.js";
 import { toUserMessage } from "../../../errors/error-display-map.js";
 import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { LOW_STOCK_THRESHOLD } from "../../store-extensions/constants/alert-metrics.js";
@@ -10,7 +9,7 @@ import { sortBy } from "@mohasinac/appkit/client";
 import { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete.js";
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch.js";
-import { Eye, EyeOff, Pencil, Trash2, Printer, MapPin, Boxes, Wrench, Scissors } from "lucide-react";
+import { Eye, EyeOff, Trash2, Printer, MapPin, Boxes } from "lucide-react";
 import { PhysicalLocationModal } from "./PhysicalLocationModal.js";
 import { BulkStockModal } from "./BulkStockModal.js";
 import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
@@ -21,7 +20,7 @@ import { Row } from "../../../ui/components/Layout.js";
 import { Select } from "../../../ui/components/Select.js";
 import { Span, Text } from "../../../ui/components/Typography.js";
 import { useToast } from "../../../ui/components/toast-context.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { SELLER_PRODUCT_STATUS_TABS } from "../../admin/constants/filter-tabs.js";
 import { ROUTES } from "../../../constants/index.js";
@@ -37,10 +36,10 @@ import { SellerProductsCards } from "./SellerProductsCards.js";
 import { SellerProductsFilterFields } from "./SellerProductsFilterDrawer.js";
 import { listingBadgeVariant } from "../../products/utils/listing-badge-variant.js";
 import { DataListingView } from "../../admin/components/DataListingView.js";
-import { AssemblyDrawer, } from "../../parts/components/AssemblyDrawer.js";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers.js";
 import { productImageUrls } from "../../products/schemas/firestore.js";
+import { formatMoney } from "../../../utils/number.formatter.js";
 const FILTER_KEYS = [
     "status",
     "category",
@@ -247,7 +246,7 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
     const sideTable = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
     const listingKind = (sideTable.get("listingType") || "all");
     // The scope bar spans whichever types the type-dropdown has narrowed to, so
-    // its middle tab reads "Ended" on Auctions and "Sold" on Products.
+    // its middle tab reads "Ended" on Collector Drops and "Sold" on Products.
     const scope = useAvailabilityScope(listingKind === "all" ? ALL_LISTING_TYPES : [listingKind]);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
         deleteFn: onDeleteProduct,
@@ -259,94 +258,6 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
     const [setLocationOpen, setSetLocationOpen] = useState(false);
     const [selectedIdsForLocation, setSelectedIdsForLocation] = useState([]);
     const [setStockOpen, setSetStockOpen] = useState(false);
-    /*
-     * ── D13: assembly ──────────────────────────────────────────────────────
-     *
-     * 🛑 The drawer's data is fetched when it OPENS, not with the page. 50 part
-     * listings and a composition per row would be a read nobody asked for on a
-     * view that renders 50 rows — and the drawer is used on a handful of them.
-     */
-    const [assembleFor, setAssembleFor] = useState(null);
-    const [assembleData, setAssembleData] = useState(null);
-    const [assembleLoading, setAssembleLoading] = useState(false);
-    const openAssembly = useCallback(async (row, direction) => {
-        setAssembleFor({ id: row.id, title: row.primary ?? row.id, direction });
-        setAssembleData(null);
-        setAssembleLoading(true);
-        try {
-            const res = await fetch(SELLER_ENDPOINTS.PRODUCT_ASSEMBLE(row.id));
-            const body = (await res.json().catch(() => null));
-            if (!res.ok)
-                throw new Error(body?.error ?? "Could not load your parts");
-            setAssembleData({
-                compositions: body?.data?.compositions ?? [],
-                options: body?.data?.options ?? [],
-                targetAvailable: body?.data?.targetAvailable ?? 0,
-            });
-        }
-        catch (err) {
-            const e = normalizeError(err);
-            /*
-             * 🛑 Closed and reported, never left open and empty. An empty picker
-             * with no explanation is the state in which a seller concludes they
-             * hold no parts — which may be false.
-             */
-            setAssembleFor(null);
-            /*
-             * 🛑 AUTHORED copy, not `e.message`. Unlike the 409 (which carries
-             * `{needs, has}` and composes a sentence around the real figures),
-             * a load failure has no number worth surfacing — so this is one honest
-             * line, and the raw text goes to the recorder where it belongs.
-             */
-            showToast("Could not load your parts. Please try again.", "error");
-            trackError(e.message, ErrorCategory.API, ErrorSeverity.MEDIUM, {
-                component: "SellerProductsView",
-                action: "openAssembly",
-            });
-        }
-        finally {
-            setAssembleLoading(false);
-        }
-    }, [showToast]);
-    const submitAssembly = useCallback(async (input) => {
-        const id = assembleFor?.id;
-        if (!id)
-            throw new Error("No listing selected");
-        const res = await fetch(SELLER_ENDPOINTS.PRODUCT_ASSEMBLE(id), {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(input),
-        });
-        const body = (await res.json().catch(() => null));
-        /*
-         * 🛑 THROWS with the server's own message, which the drawer renders. A
-         * 409 reads "Not enough available: needs 6, has 5" — the one sentence
-         * that tells the seller what to do. Swallowing it into a generic failure
-         * would turn "restock" into "retry".
-         */
-        if (!res.ok) {
-            /*
-             * 🛑 Carries the structured DETAIL to the drawer and never a rendered
-             * sentence. The drawer composes its own copy around `{needs, has}`;
-             * `message` here is for the recorder (Root Cause #86 —
-             * `audit-raw-error-text` blocks showing a thrown `.message`).
-             */
-            const err = new Error(body?.error ?? "assembly failed");
-            /*
-             * Typed rather than `unknown`: the 409's shape is OURS — the planner
-             * throws `{ kind, productId, needs, has }` — so declaring it is what
-             * lets the drawer compose a sentence around real figures instead of
-             * casting at the boundary (Root Cause #57/#70: a cast at a boundary is
-             * where this class of bug lives).
-             */
-            err.detail = { code: body?.code, ...(body?.details ?? {}) };
-            throw err;
-        }
-        return {
-            unitsBuilt: body?.data?.unitsBuilt ?? input.units,
-            consumed: body?.data?.consumed ?? [],
-        };
-    }, [assembleFor?.id]);
     const [selectedIdsForStock, setSelectedIdsForStock] = useState([]);
     const [stockBusy, setStockBusy] = useState(false);
     /*
@@ -361,12 +272,12 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
         sideTable.setMany({ listingType: kind === "all" ? "" : kind, page: "1" });
     }, [sideTable]);
     const handleEdit = (row) => {
-        const href = row.listingKind === "auction"
-            ? String(ROUTES.STORE.AUCTIONS_EDIT(row.id))
+        const href = row.listingKind === "collector-drop"
+            ? String(ROUTES.STORE.COLLECTOR_DROPS_EDIT(row.id))
             : row.listingKind === "pre-order"
                 ? String(ROUTES.STORE.PRE_ORDERS_EDIT(row.id))
-                : row.listingKind === "prize-draw"
-                    ? String(ROUTES.STORE.PRIZE_DRAWS_EDIT(row.id))
+                : row.listingKind === "clearance"
+                    ? String(ROUTES.STORE.CLEARANCE_EDIT(row.id))
                     : String(ROUTES.STORE.PRODUCTS_EDIT(row.id));
         void dispatch({ type: "NAVIGATE", href });
     };
@@ -517,14 +428,14 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
                 // in the seller table (2026-08-21).
                 const kind = lt;
                 const priceRaw = typeof item.price === "number" ? item.price : 0;
-                const auctionSecondary = kind === "auction"
+                const collectorDropSecondary = kind === "collector-drop"
                     ? [
                         typeof item.reservePrice === "number"
-                            ? `Reserve ₹${item.reservePrice.toLocaleString("en-IN")}`
+                            ? `Reserve ${formatMoney(item.reservePrice)}`
                             : null,
                         `${typeof item.bidCount === "number" ? item.bidCount : 0} bids`,
-                        item.auctionEndDate
-                            ? `Ends ${new Date(item.auctionEndDate).toLocaleDateString("en-IN", { month: "short", day: "numeric" })}`
+                        item.collectorDropEndDate
+                            ? `Ends ${new Date(item.collectorDropEndDate).toLocaleDateString("en-IN", { month: "short", day: "numeric" })}`
                             : null,
                     ]
                         .filter(Boolean)
@@ -559,9 +470,9 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
                  * Those are the two numbers a seller scans for, so price leads.
                  * `stockQuantity` was not mapped at all and is added here.
                  *
-                 * An auction keeps its own summary (reserve / bids / ends) and is not
-                 * given a list price: for an auction the meaningful money is the
-                 * reserve and the current bid, both already in `auctionSecondary`, and
+                 * A collector drop keeps its own summary (reserve / bids / ends) and is not
+                 * given a list price: for a collector drop the meaningful money is the
+                 * reserve and the current bid, both already in `collectorDropSecondary`, and
                  * a "price" beside them would read as a third, competing figure.
                  */
                 const rowId = toStringValue(item.id, `product-${index}`);
@@ -577,9 +488,9 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
                 const availableRaw = typeof item.availableQuantity === "number" ? item.availableQuantity : null;
                 const stockRaw = stockOverride ?? (typeof item.stockQuantity === "number" ? item.stockQuantity : null);
                 const stockValue = stockOverride ?? availableRaw ?? stockRaw;
-                const priceLabel = kind !== "auction" && priceRaw ? `₹${priceRaw.toLocaleString("en-IN")}` : "";
+                const priceLabel = kind !== "collector-drop" && priceRaw ? formatMoney(priceRaw) : "";
                 const stockLabel = stockRaw === null ? "" : `${stockRaw} in stock`;
-                const secondaryBase = auctionSecondary || toStringValue(item.condition, "");
+                const secondaryBase = collectorDropSecondary || toStringValue(item.condition, "");
                 return {
                     id: rowId,
                     primary: toStringValue(item.title ?? item.name, "Untitled product"),
@@ -589,7 +500,7 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
                     imageUrl: toStringValue(item.mainImage, undefined) || productImageUrls(item.images)[0],
                     image: toStringValue(item.mainImage, undefined) || productImageUrls(item.images)[0],
                     listingKind: kind,
-                    price: priceRaw ? `₹${priceRaw.toLocaleString("en-IN")}` : "—",
+                    price: priceRaw ? formatMoney(priceRaw) : "—",
                     stock: stockLabel || "—",
                     stockValue,
                     // Carried through ONLY when the document really has it — see the
@@ -617,8 +528,8 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
             const statusFilter = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined;
             const kindFilter = !state.listingType || state.listingType === "all" ? undefined : sieveFilter("listingType", SIEVE_OP.EQ, state.listingType);
             // The hardcoded `isSold==false` that used to live here is gone: it asked
-            // a narrower question than the rest of the app (an ended auction is not
-            // `isSold`), so the seller dashboard and /auctions disagreed about the
+            // a narrower question than the rest of the app (an ended collector drop is not
+            // `isSold`), so the seller dashboard and /collector-drops disagreed about the
             // same rows. The scope param carries the per-type meaning instead.
             return [statusFilter, kindFilter].filter(Boolean).join(",") || undefined;
         },
@@ -640,29 +551,19 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
             ];
         },
         renderCards: (rows, view, selection, isLoading) => (_jsx(SellerProductsCards, { view: view, rows: rows, isLoading: isLoading, listingKind: listingKind, selectedIds: new Set(selection.selectedIds), toggle: selection.toggleSelect, onEdit: handleEdit, onDuplicate: (row) => void handleDuplicate(row), onDelete: onDeleteProduct ? (row) => void handleDelete(row) : undefined })),
-        rowHrefTemplate: (row) => row.listingKind === "auction"
-            ? `/auctions/${row.id}`
+        rowHrefTemplate: (row) => row.listingKind === "collector-drop"
+            ? `/collector-drops/${row.id}`
             : row.listingKind === "pre-order"
                 ? `/pre-orders/${row.id}`
                 : `/products/${row.id}`,
         renderRowActions: (row) => {
             const isPublished = (statusOverrides.get(row.id) ?? row.status) === "published";
-            return (_jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); handleEdit(row); }, "aria-label": ACTIONS.STORE["edit-listing"].ariaLabel, children: _jsx(Pencil, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void openAssembly(row, "assemble"); }, "aria-label": ACTIONS.STORE["assemble-from-parts"].ariaLabel, title: ACTIONS.STORE["assemble-from-parts"].label, disabled: assembleLoading, children: _jsx(Wrench, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void openAssembly(row, "part-out"); }, "aria-label": ACTIONS.STORE["part-out-listing"].ariaLabel, title: ACTIONS.STORE["part-out-listing"].label, disabled: assembleLoading, children: _jsx(Scissors, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleTogglePublish(row); }, "aria-label": isPublished
+            return (_jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleTogglePublish(row); }, "aria-label": isPublished
                             ? ACTIONS.STORE["unpublish-listing"].label
                             : ACTIONS.STORE["publish-listing"].label, title: isPublished
                             ? ACTIONS.STORE["unpublish-listing"].description
                             : ACTIONS.STORE["publish-listing"].description, disabled: publishingId === row.id, children: isPublished ? _jsx(EyeOff, { className: "w-4 h-4" }) : _jsx(Eye, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleDuplicate(row); }, "aria-label": "Duplicate listing", title: "Duplicate", children: "\u29C9" }), onDeleteProduct && (_jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-listing"], onClick: (e) => { e.stopPropagation(); void handleDelete(row); }, disabled: deletingId === row.id, className: "text-[var(--appkit-color-error)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(Trash2, { className: "w-4 h-4" }) }))] }));
         },
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selectedIdsForLocation.length, onSave: (loc) => handleSetLocation(loc, selectedIdsForLocation), onClose: () => setSetLocationOpen(false) })), setStockOpen && (_jsx(BulkStockModal, { count: selectedIdsForStock.length, busy: stockBusy, onSave: (qty) => handleSetStock(qty, selectedIdsForStock), onClose: () => setSetStockOpen(false) })), assembleFor && assembleData && (_jsx(AssemblyDrawer, { isOpen: true, 
-                /*
-                 * 🛑 No refetch on close, and that is a stated limitation rather than
-                 * a silent one: `DataListingView` owns the query and exposes no
-                 * refetch handle to a consumer. The drawer reports the real
-                 * before/after per component, so the seller SEES what moved — but the
-                 * row behind it still shows the pre-build figure until the next
-                 * navigation. Wiring a refetch means giving `ListingViewConfig` a
-                 * handle, which is a shared-surface change and its own commit.
-                 */
-                onClose: () => { setAssembleFor(null); setAssembleData(null); }, direction: assembleFor.direction, targetTitle: assembleFor.title, targetAvailable: assembleData.targetAvailable, compositions: assembleData.compositions, options: assembleData.options, onSubmit: submitAssembly }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selectedIdsForLocation.length, onSave: (loc) => handleSetLocation(loc, selectedIdsForLocation), onClose: () => setSetLocationOpen(false) })), setStockOpen && (_jsx(BulkStockModal, { count: selectedIdsForStock.length, busy: stockBusy, onSave: (qty) => handleSetStock(qty, selectedIdsForStock), onClose: () => setSetStockOpen(false) }))] }));
 }

package/dist/features/seller/components/SellerReviewsView.d.ts

@@ -1,6 +1,15 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface SellerReviewsViewProps {
     reviewsApiBase?: string;
     replyApiBase?: string;
+    /**
+     * Admin-curated page-region cards (Phase 12). Omit for no extra content.
+     * This view's host page.tsx (`/store/reviews`) is "use client" with no
+     * Server Component boundary to fetch `getPageRegion()` from, so this
+     * always defaults to `[]` here — same reasoning as `DataListingView`'s
+     * own default.
+     */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function SellerReviewsView({ reviewsApiBase, replyApiBase, }: SellerReviewsViewProps): React.JSX.Element;
+export declare function SellerReviewsView({ reviewsApiBase, replyApiBase, pageRegionCards, }: SellerReviewsViewProps): React.JSX.Element;

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

@@ -24,6 +24,7 @@ import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/a
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { sortBy, sieveFilter, SIEVE_OP } from "../../../utils/sieve-builder.js";
 import { DataListingView } from "../../admin/components/DataListingView.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const SORT_OPTIONS = [
     { value: sortBy("createdAt", "DESC"), label: "Newest" },
     { value: sortBy("createdAt", "ASC"), label: "Oldest" },
@@ -77,7 +78,7 @@ function ReviewTextForm({ schema, values, onChange, onSubmit, submitLabel, onCan
                     onSubmit();
                 }, onValidationChange: () => form.validate(values), schema: schema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: submitLabel, cancelLabel: "Cancel", onCancel: onCancel, isLoading: isLoading })] }));
 }
-export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, replyApiBase = SELLER_ENDPOINTS.REVIEWS, }) {
+export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, replyApiBase = SELLER_ENDPOINTS.REVIEWS, pageRegionCards = [], }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const refetchReviews = useCallback(() => queryClient.invalidateQueries({ queryKey: ["seller", "reviews", "listing"] }), [queryClient]);
@@ -240,5 +241,5 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
         })),
         renderCards: (rows, _view, selection, isLoading) => (_jsx(Stack, { gap: "md", children: isLoading ? (_jsx(Div, { className: "text-center", padding: "y-xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Loading reviews\u2026" }) })) : rows.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-3xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "No reviews found." }) })) : (rows.map((review) => (_jsx(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", padding: "md", children: _jsxs(Row, { align: "start", justify: "between", gap: "3", wrap: true, children: [_jsxs(Row, { align: "start", className: "flex-1 min-w-0", gap: "3", children: [_jsx(Checkbox, { checked: selection.selectedIds.includes(review.id), onChange: () => selection.toggleSelect(review.id), "aria-label": "Select review" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate", weight: "medium", children: review.productTitle }), _jsxs(Row, { className: "mt-1", align: "center", gap: "sm", wrap: true, children: [_jsx(Stars, { rating: review.rating }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["by ", review.userName] }), review.verified && _jsx(Badge, { variant: "success", children: "Verified" }), statusBadge(review.status), _jsx(Badge, { variant: review.sellerReply ? "success" : "warning", children: review.sellerReply ? "Store replied" : "Awaiting store reply" })] }), review.title && _jsx(Text, { className: "mt-2", weight: "medium", children: review.title }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)] line-clamp-3", size: "sm", children: review.comment }), review.sellerReply && (_jsxs(Div, { className: "mt-2 pl-[0.75rem] border-l-2 border-[var(--appkit-color-primary)]", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "Store reply:" }), _jsx(Text, { size: "sm", children: review.sellerReply })] }))] })] }), _jsxs(Row, { className: "flex-shrink-0", gap: "sm", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => openReply(review), children: review.sellerReply ? "Edit Reply" : ACTIONS.STORE["reply-review"].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setContestTarget(review), children: ACTIONS.STORE["contest-review"].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setFeedbackTarget(review), children: ACTIONS.STORE["buyer-feedback"].label })] })] }) }, review.id)))) })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: !!replyTarget, onClose: () => setReplyTarget(null), title: replyTarget?.sellerReply ? "Edit Reply" : "Reply to Review", mode: "create", children: _jsxs(Stack, { gap: "md", className: `${__P.p4}`, children: [replyTarget && (_jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-bg)]`, rounded: "default", children: [_jsx(Stars, { rating: replyTarget.rating }), _jsx(Text, { className: "mt-1", size: "sm", children: replyTarget.comment })] })), replyError && _jsx(Alert, { variant: "error", children: replyError }), _jsx(ReviewTextForm, { schema: reviewReplySchema, values: replyDraft, onChange: (partial) => setReplyDraft((d) => ({ ...d, ...partial })), onSubmit: () => void handleReplySave(refetchReviews), submitLabel: replyTarget?.sellerReply ? "Update Reply" : "Post Reply", onCancel: () => setReplyTarget(null), isLoading: replySaving, scope: "store:review-reply" })] }) }), _jsx(Modal, { isOpen: bulkReplyOpen, onClose: () => setBulkReplyOpen(false), title: "Bulk reply to selected reviews", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewBulkReplySchema, values: bulkDraft, onChange: (partial) => setBulkDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitBulkReply(), submitLabel: "Send reply", onCancel: () => setBulkReplyOpen(false), isLoading: bulkSaving, scope: "store:review-bulk-reply" }) }) }), _jsx(Modal, { isOpen: !!contestTarget, onClose: () => setContestTarget(null), title: "Contest this review", children: _jsxs(Stack, { gap: "md", padding: "2xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Flag this review for admin investigation." }), _jsx(ReviewTextForm, { schema: reviewContestSchema, values: contestDraft, onChange: (partial) => setContestDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitContest(refetchReviews), submitLabel: "Submit", onCancel: () => setContestTarget(null), scope: "store:review-contest" })] }) }), _jsx(Modal, { isOpen: !!feedbackTarget, onClose: () => setFeedbackTarget(null), title: "Send feedback to buyer", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewFeedbackSchema, values: feedbackDraft, onChange: (partial) => setFeedbackDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitFeedback(), submitLabel: "Send", onCancel: () => setFeedbackTarget(null), scope: "store:review-feedback" }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "store-reviews", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: !!replyTarget, onClose: () => setReplyTarget(null), title: replyTarget?.sellerReply ? "Edit Reply" : "Reply to Review", mode: "create", children: _jsxs(Stack, { gap: "md", className: `${__P.p4}`, children: [replyTarget && (_jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-bg)]`, rounded: "default", children: [_jsx(Stars, { rating: replyTarget.rating }), _jsx(Text, { className: "mt-1", size: "sm", children: replyTarget.comment })] })), replyError && _jsx(Alert, { variant: "error", children: replyError }), _jsx(ReviewTextForm, { schema: reviewReplySchema, values: replyDraft, onChange: (partial) => setReplyDraft((d) => ({ ...d, ...partial })), onSubmit: () => void handleReplySave(refetchReviews), submitLabel: replyTarget?.sellerReply ? "Update Reply" : "Post Reply", onCancel: () => setReplyTarget(null), isLoading: replySaving, scope: "store:review-reply" })] }) }), _jsx(Modal, { isOpen: bulkReplyOpen, onClose: () => setBulkReplyOpen(false), title: "Bulk reply to selected reviews", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewBulkReplySchema, values: bulkDraft, onChange: (partial) => setBulkDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitBulkReply(), submitLabel: "Send reply", onCancel: () => setBulkReplyOpen(false), isLoading: bulkSaving, scope: "store:review-bulk-reply" }) }) }), _jsx(Modal, { isOpen: !!contestTarget, onClose: () => setContestTarget(null), title: "Contest this review", children: _jsxs(Stack, { gap: "md", padding: "2xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Flag this review for admin investigation." }), _jsx(ReviewTextForm, { schema: reviewContestSchema, values: contestDraft, onChange: (partial) => setContestDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitContest(refetchReviews), submitLabel: "Submit", onCancel: () => setContestTarget(null), scope: "store:review-contest" })] }) }), _jsx(Modal, { isOpen: !!feedbackTarget, onClose: () => setFeedbackTarget(null), title: "Send feedback to buyer", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewFeedbackSchema, values: feedbackDraft, onChange: (partial) => setFeedbackDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitFeedback(), submitLabel: "Send", onCancel: () => setFeedbackTarget(null), scope: "store:review-feedback" }) }) })] }));
 }

package/dist/features/seller/components/SellerShippingOfferView.d.ts

@@ -0,0 +1,5 @@
+export interface SellerShippingOfferViewProps {
+    /** `/api/store/shipping-offer`. Injected so the host owns its own routes. */
+    apiBase: string;
+}
+export declare function SellerShippingOfferView({ apiBase }: SellerShippingOfferViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,164 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * THE SELLER'S SHIPPING OFFER — the dashboard surface for the owner's
+ * 2026-11-08 ruling.
+ *
+ * *"A seller agrees from their dashboard for the shipping option. If they
+ * select custom — i.e. their own — then they must set a per-order fee. But if
+ * they are okay with our shipping providers' quotes then they must accept that
+ * as well. Both can be enabled."*
+ *
+ * Drawn from `mocks/18-shipping-fees.qm` — two toggles, a required per-order
+ * fee under the custom one, an optional free-above threshold, a buyer-facing
+ * label, and a commitment table saying what each choice obliges the seller to.
+ *
+ * ## 🛑 This writes `StoreDocument.shippingPricing`, the field checkout READS
+ *
+ * The neighbouring `SellerShippingView` writes `sellerProfiles.shippingConfig`
+ * — the legacy flat number `mode.ts` calls an accident. Measured 2026-11-08:
+ * `shippingPricing` had two readers on the money path and **zero writers**
+ * anywhere, so the authoritative config had no surface at all. This is it.
+ *
+ * ## 🛑 The client validates, and the SERVER refuses
+ *
+ * The local checks below exist to put the message under the right input before
+ * a round trip. They are not the gate: `validateSellerShippingOffer` runs
+ * server-side in `PATCH /api/store/shipping-offer` and answers 422 with the
+ * reason, because a form is not a place to enforce a money rule.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Badge, Div, FormField, Heading, Row, Stack, Text, Toggle, } from "../../../ui/index.js";
+import { StackedViewShell } from "../../../ui/components/StackedViewShell.js";
+import { normalizeError } from "../../../errors/normalize.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
+const EMPTY_DRAFT = {
+    platformQuotesAccepted: false,
+    customEnabled: true,
+    customFeePerOrder: "",
+    customFreeAbove: "",
+    customLabel: "",
+};
+/**
+ * `""` → `null`, a number → itself.
+ *
+ * 🛑 `null`, never `0`. The whole point of the save-time refusal is that a
+ * blank fee is an unfinished form and `0` is a deliberate offer of free
+ * shipping — coercing the first into the second is exactly what the server
+ * refuses to do, so the client must not do it either on the way there.
+ */
+function toNullableNumber(raw) {
+    const trimmed = raw.trim();
+    if (trimmed === "")
+        return null;
+    const n = Number(trimmed);
+    return Number.isFinite(n) ? n : null;
+}
+export function SellerShippingOfferView({ apiBase }) {
+    const [draft, setDraft] = useState(EMPTY_DRAFT);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [fieldError, setFieldError] = useState({});
+    const [success, setSuccess] = useState(false);
+    useEffect(() => {
+        let live = true;
+        fetch(apiBase)
+            .then((r) => r.json())
+            .then((res) => {
+            if (!live)
+                return;
+            const o = res?.data?.offer;
+            if (!o)
+                return;
+            setDraft({
+                platformQuotesAccepted: o.platformQuotesAccepted === true,
+                customEnabled: o.customEnabled === true,
+                customFeePerOrder: o.customFeePerOrder == null ? "" : String(o.customFeePerOrder),
+                customFreeAbove: o.customFreeAbove == null ? "" : String(o.customFreeAbove),
+                customLabel: o.customLabel ?? "",
+            });
+        })
+            .catch((err) => {
+            void normalizeError(err);
+        })
+            .finally(() => {
+            if (live)
+                setLoading(false);
+        });
+        return () => {
+            live = false;
+        };
+    }, [apiBase]);
+    const update = useCallback((partial) => {
+        setDraft((prev) => ({ ...prev, ...partial }));
+        setSuccess(false);
+        setFieldError({});
+    }, []);
+    const handleSave = async () => {
+        setError(null);
+        setFieldError({});
+        setSuccess(false);
+        setSaving(true);
+        try {
+            const res = await fetch(apiBase, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    platformQuotesAccepted: draft.platformQuotesAccepted,
+                    customEnabled: draft.customEnabled,
+                    customFeePerOrder: draft.customEnabled
+                        ? toNullableNumber(draft.customFeePerOrder)
+                        : null,
+                    customFreeAbove: toNullableNumber(draft.customFreeAbove),
+                    customLabel: draft.customLabel.trim() === "" ? null : draft.customLabel.trim(),
+                }),
+            });
+            const json = await res.json();
+            if (!res.ok) {
+                /*
+                 * The server's refusal reason arrives as `issues`, already pointed at
+                 * the field that caused it — so "set your per-order fee" lands under
+                 * the fee input rather than in a banner above four controls.
+                 */
+                const issues = json?.issues;
+                if (Array.isArray(issues)) {
+                    const next = {};
+                    for (const i of issues)
+                        next[String(i.path[0])] = i.message;
+                    setFieldError(next);
+                }
+                setError(toUserMessage(json?.code, json?.message, {
+                    fallback: "We couldn't save your shipping options.",
+                }));
+                return;
+            }
+            setSuccess(true);
+        }
+        catch (err) {
+            void normalizeError(err);
+            setError(err.message);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const busy = loading || saving;
+    const noMethod = !draft.platformQuotesAccepted && !draft.customEnabled;
+    const customNeedsFee = draft.customEnabled && toNullableNumber(draft.customFeePerOrder) === null;
+    /** What each combination obliges the seller to — the mock's right-hand panel. */
+    const commitment = noMethod
+        ? "You cannot publish a listing that ships until you enable a method."
+        : draft.platformQuotesAccepted && draft.customEnabled
+            ? "Whatever the BUYER picks. If they choose your own shipping, you must fulfil it yourself — we have already taken their money against that method."
+            : draft.customEnabled
+                ? "You ship it yourself, at your price, on every order."
+                : "You buy the label we quote. Its cost comes off your payout.";
+    return (_jsx(StackedViewShell, { portal: "seller", title: "Shipping options", sections: [
+            _jsxs(Div, { children: [error && (_jsx(Alert, { variant: "error", className: "mb-4", children: error })), success && (_jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping options saved." })), _jsxs(Stack, { gap: "lg", children: [_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 3, children: "At least one method, and your own needs a price" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: "A seller who offers neither cannot publish a listing that ships. Both can be enabled \u2014 then the buyer chooses, and what they choose is what you owe." })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Row, { align: "center", gap: "sm", children: _jsx(Toggle, { checked: draft.platformQuotesAccepted, onChange: (checked) => update({ platformQuotesAccepted: checked }), disabled: busy, label: "Accept platform carrier quotes" }) }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)] pl-1", children: "Buyers see live rates from our carrier integrations. You buy the label here; its cost comes off your payout." }), _jsx(Row, { align: "center", gap: "sm", className: "mt-4", children: _jsx(Toggle, { checked: draft.customEnabled, onChange: (checked) => update({ customEnabled: checked }), disabled: busy, label: "Offer my own shipping" }) }), draft.customEnabled && (_jsxs(Stack, { gap: "md", className: "pl-1", children: [_jsx(FormField, { name: "customFeePerOrder", label: "Per-order fee (\u20B9) *", type: "number", value: draft.customFeePerOrder, onChange: (v) => update({ customFeePerOrder: v }), placeholder: "200", error: fieldError.customFeePerOrder, helpText: "Required. Enter 0 if you ship free \u2014 leaving it blank is not the same thing, and will be refused.", disabled: busy }), _jsx(FormField, { name: "customFreeAbove", label: "Free above (\u20B9, optional)", type: "number", value: draft.customFreeAbove, onChange: (v) => update({ customFreeAbove: v }), placeholder: "2500", error: fieldError.customFreeAbove, helpText: "Order value at or above which your own shipping is free. Leave blank to disable.", disabled: busy }), _jsx(FormField, { name: "customLabel", label: "Label shown to buyers", type: "text", value: draft.customLabel, onChange: (v) => update({ customLabel: v }), placeholder: "e.g. BeyIndia courier (we pack and ship ourselves)", disabled: busy }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: "PER ORDER, not per item. A per-item custom fee is how a four-item order quietly becomes \u20B9800 \u2014 you are quoting one parcel, not four." })] }))] }), _jsxs(Div, { className: "rounded-md border border-[var(--appkit-color-border)] p-4", children: [_jsx(Row, { align: "center", gap: "sm", className: "mb-2", children: _jsx(Badge, { variant: noMethod || customNeedsFee ? "warning" : "success", children: noMethod
+                                                ? "No method enabled"
+                                                : customNeedsFee
+                                                    ? "Fee required"
+                                                    : "What you owe" }) }), _jsx(Text, { size: "sm", children: commitment }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)] mt-2", children: "If you override the buyer's choice: refund the excess if yours was cheaper, and absorb the difference if it cost more. The buyer is never re-billed after payment." })] }), _jsx(Row, { gap: "sm", children: _jsx("button", { type: "button", onClick: handleSave, disabled: busy, className: "rounded-md border border-[var(--appkit-color-border)] px-4 py-2 text-sm font-medium disabled:opacity-50", children: saving ? "Saving…" : "Save shipping options" }) })] })] }, "offer"),
+        ] }));
+}

package/dist/features/seller/components/SellerShippingView.d.ts

@@ -1,4 +1,7 @@
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface SellerShippingViewProps {
     apiBase?: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function SellerShippingView({ apiBase }: SellerShippingViewProps): import("react").JSX.Element;
+export declare function SellerShippingView({ apiBase, pageRegionCards }: SellerShippingViewProps): import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { z } from "zod";
 import { Alert, Badge, Div, FormField, Heading, Row, Stack, Text } from "../../../ui/index.js";
@@ -10,6 +10,7 @@ import { SectionForm, useSectionFormNav } from "../../shell/SectionForm.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { normalizeError } from "../../../errors/normalize.js";
 import { toUserMessage } from "../../../errors/error-display-map.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const shippingDraftSchema = z.object({
     customCarrierName: z.string().min(1, "Carrier name is required"),
     customShippingPrice: z.string(),
@@ -29,7 +30,7 @@ const DEFAULT_DRAFT = {
     freeShippingThreshold: "",
     fragileSurcharge: "",
 };
-export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
+export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING, pageRegionCards = [] }) {
     const [draft, setDraft] = useState(DEFAULT_DRAFT);
     const [current, setCurrent] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -134,7 +135,7 @@ export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
     useEffect(() => {
         validate(draft);
     }, [draft, validate]);
-    return (_jsx(StackedViewShell, { portal: "seller", title: "Shipping Configuration", sections: [
-            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handleSave, schema: shippingDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: "Save Configuration", isLoading: busy })] })] }, "shipping"),
-        ] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "store-shipping", initialCards: pageRegionCards }), _jsx(StackedViewShell, { portal: "seller", title: "Shipping Configuration", sections: [
+                    _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handleSave, schema: shippingDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: "Save Configuration", isLoading: busy })] })] }, "shipping"),
+                ] })] }));
 }

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useCallback } from "react";
+import { DASHBOARD_ACCENT_CLASSES } from "../../../_internal/shared/features/layout/config.js";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link.js";
 import { Button } from "../../../ui/components/Button.js";
@@ -10,13 +11,14 @@ import { Input } from "../../../ui/components/Input.js";
 import { Li, Nav, Ul } from "../../../ui/components/Semantic.js";
 import { Row, Stack } from "../../../ui/components/Layout.js";
 import { Span, Text } from "../../../ui/components/Typography.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { BottomSheet } from "../../layout/BottomSheet.js";
 import { SidebarCollapseToggle } from "../../../_internal/client/features/layout/SidebarCollapseToggle.js";
 import { useSidebarSearch } from "../../../_internal/client/features/layout/useSidebarSearch.js";
 import { findActiveNavGroup, findActiveNavItem } from "../../../_internal/client/features/layout/navActive.js";
 import { getSidebarRailClasses, getSidebarOverlayClasses } from "../../../_internal/client/features/layout/sidebarPositionClasses.js";
 import { useHandMode } from "../../../_internal/client/hand-mode/index.js";
+import { useClickOutside } from "../../../react/hooks/useClickOutside.js";
 const __O = {
     hidden: "overflow-hidden",
     yAuto: "overflow-y-auto",
@@ -24,7 +26,17 @@ const __O = {
 const CLS_STORE_AVATAR = "relative h-8 w-8 overflow-hidden rounded-md bg-cover bg-center flex-shrink-0";
 const CLS_STORE_FALLBACK = "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-primary/10 text-[length:var(--appkit-text-sm)] font-bold text-primary";
 const CLS_STORE_NAME = "text-[length:var(--appkit-text-sm)] font-semibold text-[var(--appkit-color-text)] truncate";
-const CLS_NAV_ACTIVE = "bg-warning-surface dark:bg-warning-surface text-warning dark:text-warning";
+/*
+ * Sourced from the shared DASHBOARD_ACCENT_CLASSES.store map (Phase 4D,
+ * overhaul brief) rather than re-hardcoded here — `bg-warning-surface` /
+ * `text-warning` are already theme-aware CSS-variable-backed utilities, so
+ * (unlike the string this replaced) no separate `dark:` variant is needed;
+ * the map's own author already made that call for `activeBg`/`activeText`.
+ * Concatenated as two COMPLETE literal tokens, never built via template-
+ * literal interpolation of a partial class name — Tailwind's scanner reads
+ * this file as plain text and cannot resolve an interpolated fragment.
+ */
+const CLS_NAV_ACTIVE = `${DASHBOARD_ACCENT_CLASSES.store.activeBg} ${DASHBOARD_ACCENT_CLASSES.store.activeText}`;
 const CLS_NAV_BADGE = "shrink-0 rounded-full bg-warning-solid px-[var(--appkit-space-1-5)] py-[var(--appkit-space-0-5)] text-[10px] text-warning-on-solid leading-none";
 const CLS_NAV_ICON_ACTIVE = "text-warning dark:text-warning";
 function NavLink({ item, isActive, onClick }) {
@@ -81,16 +93,28 @@ export function StoreSidebar({ items, groups, activeHref, storeName, storeLogoUR
     const { hand } = useHandMode();
     const rail = getSidebarRailClasses(hand);
     const [mounted, setMounted] = useState(false);
+    const desktopPanelRef = useRef(null);
+    const handleToggle = onToggle ?? close;
     useEffect(() => { setMounted(true); }, []);
     useEffect(() => {
         document.body.style.overflow = mobileOpen ? "hidden" : "";
         return () => { document.body.style.overflow = ""; };
     }, [mobileOpen]);
+    // See the "NO DESKTOP BACKDROP, BUT DISMISSIBLE" note below — inert
+    // (no listener attached) outside the desktop "sidebar" variant.
+    useClickOutside(desktopPanelRef, handleToggle, {
+        enabled: variant === "sidebar" && desktopOpen,
+    });
     const panelTitle = storeName ?? "Store Panel";
     const navContent = groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close }));
+    // Desktop "sidebar" variant's own nav content — deliberately NOT the
+    // `navContent` above. That one's `onItemClick={close}` closes via
+    // `onCloseMobile`, which this variant's caller doesn't wire (it's
+    // controlled by `desktopOpen`/`onToggle` instead) — reusing it here left
+    // nav-link clicks not collapsing the desktop panel at all.
+    const sidebarNavContent = groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: handleToggle })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: handleToggle }));
     if (variant === "sidebar") {
-        const handleToggle = onToggle ?? close;
-        return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: `hidden lg:flex fixed ${rail.edgeClass} z-40 transition-transform duration-300 top-[var(--header-height,3.5rem)] h-[calc(100vh-var(--header-height,3.5rem))] w-[18rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "sidePanel", className: `flex-1 ${rail.borderClass} ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsxs(Row, { className: "min-w-0", align: "center", gap: "3", children: [storeLogoURL ? (_jsx(Div, { className: CLS_STORE_AVATAR, children: _jsx(MediaImage, { src: storeLogoURL, alt: storeName ?? "", size: "thumbnail" }) })) : (_jsx(Div, { className: CLS_STORE_FALLBACK, children: storeName?.[0]?.toUpperCase() })), _jsx(Text, { className: CLS_STORE_NAME, children: storeName || panelTitle })] }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: navContent }), renderFooter && _jsx(Div, { border: "top", padding: "inline", children: renderFooter() })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle, edge: hand })] }), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Div, { ref: desktopPanelRef, className: `hidden lg:flex fixed ${rail.edgeClass} z-40 transition-transform duration-300 top-[var(--header-height,3.5rem)] h-[calc(100vh-var(--header-height,3.5rem))] w-[18rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "sidePanel", className: `flex-1 ${rail.borderClass} ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsxs(Row, { className: "min-w-0", align: "center", gap: "3", children: [storeLogoURL ? (_jsx(Div, { className: CLS_STORE_AVATAR, children: _jsx(MediaImage, { src: storeLogoURL, alt: storeName ?? "", size: "thumbnail" }) })) : (_jsx(Div, { className: CLS_STORE_FALLBACK, children: storeName?.[0]?.toUpperCase() })), _jsx(Text, { className: CLS_STORE_NAME, children: storeName || panelTitle })] }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: sidebarNavContent }), renderFooter && _jsx(Div, { border: "top", padding: "inline", children: renderFooter() })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle, edge: hand })] }), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
     }
     return (_jsxs(_Fragment, { children: [mounted && mobileOpen &&
                 createPortal(_jsx(DrawerPanel, { title: panelTitle, onClose: close, children: navContent }), document.body), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));