@mohasinac/appkit 4.52.1 → 4.52.3

package/dist/features/layout/BottomActions.js

@@ -44,10 +44,13 @@ const DESKTOP_REVEAL_SCROLL_PX = 400;
 // ─── Sub-components ───────────────────────────────────────────────────────────
 function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect, }) {
     return (_jsx(Div, { role: "listbox", "aria-label": "Bulk actions", className: [
-            "absolute bottom-full left-0 right-0 overflow-hidden",
+            // Flips with the tier — see InfoPanel for why.
+            "absolute left-0 right-0 overflow-hidden",
+            "bottom-full lg:bottom-auto lg:top-full",
             BOTTOM_NAV_BG,
-            "border-t border-zinc-200/80 border-[var(--appkit-color-border)]/80",
+            "border-t lg:border-t-0 lg:border-b border-[var(--appkit-color-border)]/80",
             "shadow-[0_-8px_24px_rgba(0,0,0,0.10)] dark:shadow-[0_-8px_24px_rgba(0,0,0,0.35)]",
+            "lg:shadow-[0_8px_24px_rgba(0,0,0,0.10)] dark:lg:shadow-[0_8px_24px_rgba(0,0,0,0.35)]",
             "transition-[max-height,opacity] duration-200 ease-out",
             pickerOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0 pointer-events-none",
         ]
@@ -78,10 +81,16 @@ function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect,
  */
 function InfoPanel({ id, open, children, }) {
     return (_jsx(Div, { id: id, className: [
-            "absolute bottom-full left-0 right-0 overflow-hidden",
+            // Opens UPWARD from a bottom-edge bar, DOWNWARD from a desktop bar
+            // hanging under the header — a panel must always expand into the
+            // screen, never off it. Border and shadow flip with it, or the sheet
+            // is lit from the wrong side and reads as detached from its bar.
+            "absolute left-0 right-0 overflow-hidden",
+            "bottom-full lg:bottom-auto lg:top-full",
             BOTTOM_NAV_BG,
-            "border-t border-zinc-200/80 border-[var(--appkit-color-border)]/80",
+            "border-t lg:border-t-0 lg:border-b border-[var(--appkit-color-border)]/80",
             "shadow-[0_-8px_24px_rgba(0,0,0,0.10)] dark:shadow-[0_-8px_24px_rgba(0,0,0,0.35)]",
+            "lg:shadow-[0_8px_24px_rgba(0,0,0,0.10)] dark:lg:shadow-[0_8px_24px_rgba(0,0,0,0.35)]",
             "transition-[max-height,opacity] duration-200 ease-out",
             open ? "max-h-[60vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none",
         ]
@@ -273,11 +282,17 @@ export default function BottomActions() {
             .filter(Boolean)
             .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), hasInfoPanel && !isBulkMode && (_jsx(InfoPanel, { id: infoPanelId, open: infoOpen, children: infoPanel })), _jsx(Div, { className: `grid transition-[grid-template-rows] duration-300 ease-out ${isVisible ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`, children: _jsx(Div, { overflow: "hidden", className: "min-h-0", children: _jsxs(Div, { className: [
                             BOTTOM_NAV_BG,
+                            // Cast away from the edge the bar is welded to: upward from the
+                            // bottom edge, downward from under the header.
                             "shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:shadow-[0_-4px_20px_rgba(0,0,0,0.30)]",
+                            "lg:shadow-[0_4px_20px_rgba(0,0,0,0.08)] dark:lg:shadow-[0_4px_20px_rgba(0,0,0,0.30)]",
+                            // A hairline on the side facing the page, so the bar reads as
+                            // chrome rather than as a floating slab.
+                            "lg:border-b lg:border-[var(--appkit-color-border)]/80",
                             isVisible ? "" : "pointer-events-none",
                         ]
                             .filter(Boolean)
-                            .join(" "), children: [isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `min-${BOTTOM_NAV_HEIGHT} py-[var(--appkit-space-2)]`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- flex-shrink-0 bg-primary-50 hover:bg-primary-surface active:bg-primary-200 dark:bg-primary-950/30 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+                            .join(" "), children: [isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `min-${BOTTOM_NAV_HEIGHT} py-[var(--appkit-space-2)]`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "flex-shrink-0 bg-primary-50 hover:bg-primary-surface active:bg-primary-200 dark:bg-primary-950/30 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
                                                         ? `${bulk.selectedCount} ${bulk.noun}`
                                                         : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                                                 "flex-1 min-w-0 h-10 flex items-center gap-[var(--appkit-space-2)] px-[var(--appkit-space-3)] rounded-lg border text-[length:var(--appkit-text-sm)] font-medium transition-colors",

package/dist/features/layout/BottomChrome.d.ts

@@ -2,33 +2,4 @@ import React from "react";
 export interface BottomChromeProps {
     children: React.ReactNode;
 }
-/**
- * BottomChrome — the middle tier of the bottom edge.
- *
- * The bottom edge is three tiers: the nav bar is the floor, `BackToTop` is the
- * ceiling, and *everything else* lives in here. This container is what makes
- * that middle tier a single thing with a single height:
- *
- *   --keyboard-inset-height   useVisualViewportInset  (the on-screen keyboard)
- *   --bottom-nav-height       BottomNavLayout         (the tab bar)
- *   --bottom-chrome-height    THIS COMPONENT          (CTA row, pagination, …)
- *      ↑ BackToTop floats above the sum of all three
- *
- * Because it is a flex column, its own `offsetHeight` IS the sum of whatever is
- * inside it — a bar changing height, revealing on scroll, entering bulk mode,
- * or being added years from now all just resize this box, and the one
- * ResizeObserver below picks every case up. Consumers read one variable and
- * never have to learn about individual bars. Publishing a separate var per bar
- * was the alternative, and it fails the moment someone adds bar number three
- * without also editing every consumer's `calc()`.
- *
- * Two constraints this container places on its children:
- *   - A child must hide by COLLAPSING, not by transforming. `translate-y-full`
- *     leaves layout height behind, so a hidden bar would still be reserved here
- *     on every page that has no CTA. See BottomActions' grid-rows collapse.
- *   - No `overflow: hidden` here, ever. BottomActions' bulk-picker and info
- *     panels are `absolute bottom-full` — deliberately outside the flow (they
- *     are transient tap-to-open overlays, not persistent bands, so they are
- *     excluded from the published height) — and clipping would erase them.
- */
 export declare function BottomChrome({ children }: BottomChromeProps): React.JSX.Element;

package/dist/features/layout/BottomChrome.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Div } from "../../ui/index.js";
 import { BOTTOM_CHROME_SLOT_ID } from "../../ui/components/bottom-chrome-slot.js";
 /**
@@ -28,28 +28,93 @@ import { BOTTOM_CHROME_SLOT_ID } from "../../ui/components/bottom-chrome-slot.js
  *     leaves layout height behind, so a hidden bar would still be reserved here
  *     on every page that has no CTA. See BottomActions' grid-rows collapse.
  *   - No `overflow: hidden` here, ever. BottomActions' bulk-picker and info
- *     panels are `absolute bottom-full` — deliberately outside the flow (they
- *     are transient tap-to-open overlays, not persistent bands, so they are
- *     excluded from the published height) — and clipping would erase them.
+ *     panels are `absolute bottom-full` on mobile / `top-full` on desktop —
+ *     deliberately outside the flow (they are transient tap-to-open overlays,
+ *     not persistent bands, so they are excluded from the published height) —
+ *     and clipping would erase them.
+ *
+ * ── The tier CHANGES ENDS at `lg` ──────────────────────────────────────────
+ *
+ * Below `lg` it is the bottom edge, as described above. At `lg` and up it hangs
+ * from under the sticky header instead, and publishes its height as
+ * `--top-chrome-height` rather than `--bottom-chrome-height`.
+ *
+ * A full-width action bar welded to the bottom of a desktop window is a mobile
+ * pattern on a screen that has neither a thumb zone nor a tab bar to stack
+ * above — it reads as a browser download bar, and it is the furthest point on
+ * screen from the content it acts on. Under the header it sits where the eye
+ * already is and where the page's own chrome lives.
+ *
+ * Consumers therefore read whichever end they care about, and the two are
+ * mutually exclusive by construction (see `write()`).
+ */
+/**
+ * The breakpoint at which the tier moves from the bottom edge to under the
+ * header. 64rem is Tailwind's `lg` — the same line `BottomNavbar` disappears
+ * at, so the tier changes ends exactly when the thing it was stacking above
+ * stops existing.
  */
+const DESKTOP_QUERY = "(min-width: 64rem)";
 export function BottomChrome({ children }) {
     const ref = useRef(null);
+    const [isDesktop, setIsDesktop] = useState(false);
+    // Matched in JS as well as in CSS because the MEASUREMENT has to know which
+    // variable to publish — a media query alone can move the box but cannot tell
+    // the ResizeObserver which end of the screen it ended up at.
+    useEffect(() => {
+        const mq = window.matchMedia(DESKTOP_QUERY);
+        const sync = () => setIsDesktop(mq.matches);
+        sync();
+        mq.addEventListener("change", sync);
+        return () => mq.removeEventListener("change", sync);
+    }, []);
     useEffect(() => {
         const root = document.documentElement;
         const el = ref.current;
         if (!el)
             return;
-        const write = () => root.style.setProperty("--bottom-chrome-height", `${el.offsetHeight}px`);
+        /*
+         * 🛑 EXACTLY ONE of the two variables carries the height; the other is
+         * pinned to 0. They are not interchangeable and must never both be live:
+         * `--bottom-chrome-height` is clearance at the BOTTOM of the viewport
+         * (BackToTop floats above it, the footer reserves it) and
+         * `--top-chrome-height` is clearance at the TOP (content is pushed down by
+         * it). Publishing a real height to both would make every consumer reserve
+         * the bar twice — a gap the size of the bar at the end of every page on
+         * desktop, which is exactly the "looks ugly" symptom one tier up.
+         */
+        const write = () => {
+            const h = `${el.offsetHeight}px`;
+            root.style.setProperty("--top-chrome-height", isDesktop ? h : "0px");
+            root.style.setProperty("--bottom-chrome-height", isDesktop ? "0px" : h);
+        };
         const observer = new ResizeObserver(write);
         observer.observe(el);
         write();
         return () => {
             observer.disconnect();
             root.style.setProperty("--bottom-chrome-height", "0px");
+            root.style.setProperty("--top-chrome-height", "0px");
         };
-    }, []);
+    }, [isDesktop]);
     return (_jsxs(Div, { ref: ref, layout: "flex-col", 
         // `pointer-events-none` so an empty tier never eats clicks meant for the
         // page underneath; every child re-enables with `pointer-events-auto`.
-        className: "fixed left-0 right-0 bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))] z-[var(--appkit-z-bottom-nav)] pointer-events-none", children: [_jsx(Div, { id: BOTTOM_CHROME_SLOT_ID, className: "contents" }), children] }));
+        //
+        // Desktop pins the tier directly beneath the sticky header rather than to
+        // the bottom edge. A full-width bar welded to the bottom of a 1440px
+        // window is a mobile pattern borrowed onto a screen that has no thumb
+        // zone and no tab bar to sit above — on desktop the action row belongs
+        // with the page chrome, where the eye already is. `--header-height` is
+        // published by AppLayoutShell and already accounts for the announcement
+        // banner, so this needs no second measurement.
+        //
+        // 🛑 The child's `flex-col` ORDER is reversed on desktop: at the bottom
+        // edge the portalled slot must stack above the CTA row, and once the tier
+        // hangs from the top the same visual ordering is the other way round.
+        className: [
+            "fixed left-0 right-0 z-[var(--appkit-z-bottom-nav)] pointer-events-none",
+            "bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))]",
+            "lg:bottom-auto lg:top-[var(--header-height,0px)] lg:flex-col-reverse",
+        ].join(" "), children: [_jsx(Div, { id: BOTTOM_CHROME_SLOT_ID, className: "contents" }), children] }));
 }

package/dist/features/live/components/LiveItemDetailPageView.js

@@ -70,7 +70,7 @@ export async function LiveItemDetailPageView({ slug, initialProduct, renderActio
                     price: price ?? undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: storeName ?? undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFee !== undefined && (_jsx(PricesOnly, { children: ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}` })), transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", children: ["Method: ", transport.method, transport.handlingFee !== undefined && (_jsx(PricesOnly, { children: ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}` })), transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", children: meta.careInfo })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),

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

@@ -6,8 +6,45 @@ export interface ProductFeaturesSelectorProps {
     onChange: (next: string[]) => void;
     /** Determines which platform features are eligible. */
     productType: ProductFeatureProductType;
-    /** Store ID — when present, store-scope features are also loaded. */
+    /** Store ID — when present, store-scope features are also loaded, and the
+     *  picker can create new store-scope badges inline. */
     storeId?: string;
     disabled?: boolean;
 }
+/**
+ * Feature-badge picker.
+ *
+ * 🛑 A SEARCHABLE MULTI-SELECT, not a checkbox grid. This rendered every
+ * eligible badge as a two-column grid of bordered checkbox rows — on the real
+ * catalogue that is a wall of ~20+ tiles a seller has to read end-to-end to
+ * find "Sealed", and it grew every time an admin added a badge. CLAUDE.md's
+ * rule is explicit and this was the clearest violation of it left: anything
+ * over five options is a `<PaginatedSelect>`, because a long list nobody can
+ * search is a list nobody reads.
+ *
+ * Three things the conversion had to preserve, all of which the grid did by
+ * accident and a naive swap would have lost:
+ *
+ *   - THE SCOPE DISTINCTION. Platform badges are curated and shared; store
+ *     badges are the seller's own. The grid showed them under two headings.
+ *     `PaginatedSelect` has no option grouping, so the scope rides in the
+ *     option label as a suffix — visible in the list AND in the selected chip,
+ *     which is strictly more information than the heading gave (a chip used to
+ *     say nothing about where its badge came from).
+ *   - THE SELECTION CEILING. `MAX_FEATURES_PER_PRODUCT` was enforced by
+ *     disabling every unchecked row at the limit. A multi-select has no such
+ *     affordance, so the cap is enforced in `handleChange` — which also makes
+ *     it correct for a value arriving over the limit from an older document,
+ *     where the old code could only show a banner and hope.
+ *   - THE DESCRIPTION. Each row carried one. It is folded into the label after
+ *     an em-dash so it stays searchable: typing "factory" now finds "Sealed",
+ *     whose description is the only place that word appears.
+ *
+ * Create is wired only when `storeId` is present, and only to the STORE-scope
+ * endpoint. `POST /api/admin/features` is `ROLES_ADMIN_ONLY` +
+ * `admin:categories:write`, so offering it to a seller would be a control that
+ * 403s — worse than an absent one. A seller creating a badge is creating their
+ * own, which is exactly what `POST /api/store/features` does (it sets
+ * `storeId` server-side rather than trusting the body).
+ */
 export declare function ProductFeaturesSelector({ value, onChange, productType, storeId, disabled, }: ProductFeaturesSelectorProps): React.JSX.Element;

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

@@ -1,37 +1,88 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Checkbox, Div, Grid, Heading, Label, Stack, Text } from "../../../ui/index.js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Div, Heading, Stack, Text } from "../../../ui/index.js";
+import { PaginatedSelect } from "../../../ui/components/PaginatedSelect.js";
 import { apiClient } from "../../../http/index.js";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { ADMIN_ENDPOINTS, SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { PRODUCT_FEATURE_QUERY_STALE_MS } from "../constants/product-features.constants.js";
 import { MAX_FEATURES_PER_PRODUCT, } from "../schemas/product-features.js";
-const SECTION_LABEL_CLASS = "text-[var(--appkit-font-size-2xs,11px)] font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)] mb-2";
-const ROW_BASE_CLASS = "flex items-start gap-[var(--appkit-space-2)] rounded-lg border px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-xs)] cursor-pointer transition-colors";
-const ROW_CHECKED_CLASS = "border-primary bg-primary/5 dark:bg-primary/10";
-const ROW_DISABLED_CLASS = "border-[var(--appkit-color-border)] opacity-50 cursor-not-allowed";
-const ROW_DEFAULT_CLASS = "border-[var(--appkit-color-border)] hover:bg-surface-hover";
 const OVER_LIMIT_BANNER_CLASS = "rounded-lg border border-error/20 bg-error-surface px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-xs)] text-error";
 const EMPTY_STATE_CLASS = "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-3)] py-[var(--appkit-space-4)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] text-left";
+/** Inline-create form for a store-scope badge. Mirrors productFeatureStoreCreateSchema's required fields. */
+const CREATE_FIELDS = [
+    {
+        name: "label",
+        label: "Badge label",
+        type: "text",
+        required: true,
+        placeholder: "e.g. Hand-inspected",
+        helperText: "Shown on product cards and the detail page.",
+    },
+    {
+        name: "description",
+        label: "Description",
+        type: "textarea",
+        placeholder: "What this badge promises the buyer.",
+    },
+    {
+        name: "icon",
+        label: "Icon",
+        type: "text",
+        required: true,
+        defaultValue: "star",
+        helperText: "A Lucide icon name, e.g. star, shield, package.",
+    },
+];
 function applyProductType(list, productType) {
     if (productType === "all")
         return list;
     return list.filter((f) => f.productTypes.includes("all") || f.productTypes.includes(productType));
 }
-function rowClass(checked, cantSelect) {
-    if (checked)
-        return `${ROW_BASE_CLASS} ${ROW_CHECKED_CLASS}`;
-    if (cantSelect)
-        return `${ROW_BASE_CLASS} ${ROW_DISABLED_CLASS}`;
-    return `${ROW_BASE_CLASS} ${ROW_DEFAULT_CLASS}`;
-}
 function unwrapItems(res) {
     const body = res?.data ??
         res;
     return body?.items ?? [];
 }
+/**
+ * Feature-badge picker.
+ *
+ * 🛑 A SEARCHABLE MULTI-SELECT, not a checkbox grid. This rendered every
+ * eligible badge as a two-column grid of bordered checkbox rows — on the real
+ * catalogue that is a wall of ~20+ tiles a seller has to read end-to-end to
+ * find "Sealed", and it grew every time an admin added a badge. CLAUDE.md's
+ * rule is explicit and this was the clearest violation of it left: anything
+ * over five options is a `<PaginatedSelect>`, because a long list nobody can
+ * search is a list nobody reads.
+ *
+ * Three things the conversion had to preserve, all of which the grid did by
+ * accident and a naive swap would have lost:
+ *
+ *   - THE SCOPE DISTINCTION. Platform badges are curated and shared; store
+ *     badges are the seller's own. The grid showed them under two headings.
+ *     `PaginatedSelect` has no option grouping, so the scope rides in the
+ *     option label as a suffix — visible in the list AND in the selected chip,
+ *     which is strictly more information than the heading gave (a chip used to
+ *     say nothing about where its badge came from).
+ *   - THE SELECTION CEILING. `MAX_FEATURES_PER_PRODUCT` was enforced by
+ *     disabling every unchecked row at the limit. A multi-select has no such
+ *     affordance, so the cap is enforced in `handleChange` — which also makes
+ *     it correct for a value arriving over the limit from an older document,
+ *     where the old code could only show a banner and hope.
+ *   - THE DESCRIPTION. Each row carried one. It is folded into the label after
+ *     an em-dash so it stays searchable: typing "factory" now finds "Sealed",
+ *     whose description is the only place that word appears.
+ *
+ * Create is wired only when `storeId` is present, and only to the STORE-scope
+ * endpoint. `POST /api/admin/features` is `ROLES_ADMIN_ONLY` +
+ * `admin:categories:write`, so offering it to a seller would be a control that
+ * 403s — worse than an absent one. A seller creating a badge is creating their
+ * own, which is exactly what `POST /api/store/features` does (it sets
+ * `storeId` server-side rather than trusting the body).
+ */
 export function ProductFeaturesSelector({ value, onChange, productType, storeId, disabled, }) {
+    const queryClient = useQueryClient();
     const platformQuery = useQuery({
         queryKey: ["product-features", "platform", "active"],
         queryFn: async () => unwrapItems(await apiClient.get(`${ADMIN_ENDPOINTS.PRODUCT_FEATURES}?scope=platform&isActive=true`)),
@@ -45,28 +96,76 @@ export function ProductFeaturesSelector({ value, onChange, productType, storeId,
     });
     const platformFeatures = applyProductType(platformQuery.data ?? [], productType);
     const storeFeatures = applyProductType(storeQuery.data ?? [], productType);
-    const selectedSet = React.useMemo(() => new Set(value), [value]);
+    const options = React.useMemo(() => {
+        const toOption = (f, scopeSuffix) => ({
+            value: f.id,
+            // Description folded in so it is searchable — see the docstring.
+            label: f.description
+                ? `${f.label} — ${f.description} ${scopeSuffix}`
+                : `${f.label} ${scopeSuffix}`,
+        });
+        return [
+            ...platformFeatures.map((f) => toOption(f, "(platform)")),
+            ...storeFeatures.map((f) => toOption(f, "(your store)")),
+        ];
+    }, [platformFeatures, storeFeatures]);
     const atLimit = value.length >= MAX_FEATURES_PER_PRODUCT;
     const overLimit = value.length > MAX_FEATURES_PER_PRODUCT;
-    const toggle = (id) => {
+    /*
+     * 🛑 The cap is applied to the INCOMING array, not to a per-row disabled
+     * state. Truncating keeps the earliest selections, which is what a user who
+     * has just exceeded the limit expects (the one they clicked last is the one
+     * that fails), and it also silently repairs an over-limit value loaded from
+     * an older document instead of blocking save behind a banner.
+     */
+    const handleChange = (next) => {
         if (disabled)
             return;
-        if (selectedSet.has(id)) {
-            onChange(value.filter((v) => v !== id));
-            return;
-        }
-        if (atLimit)
-            return;
-        onChange([...value, id]);
-    };
-    const renderRow = (f) => {
-        const checked = selectedSet.has(f.id);
-        const cantSelect = !checked && atLimit;
-        return (_jsxs(Label, { className: rowClass(checked, cantSelect), children: [_jsx(Checkbox, { bare: true, className: "mt-0.5", checked: checked, disabled: disabled || cantSelect, onChange: () => toggle(f.id), "aria-label": f.label }), _jsxs(Div, { className: "flex-1", children: [_jsx(Text, { as: "span", className: "block", color: "primary", weight: "medium", children: f.label }), f.description && (_jsx(Text, { as: "span", className: "block mt-0.5", color: "muted", children: f.description }))] })] }, f.id));
+        onChange(next.length > MAX_FEATURES_PER_PRODUCT
+            ? next.slice(0, MAX_FEATURES_PER_PRODUCT)
+            : next);
     };
-    const hasAny = platformQuery.isLoading ||
-        storeQuery.isLoading ||
-        platformFeatures.length > 0 ||
-        storeFeatures.length > 0;
-    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Feature badges" }), _jsxs(Text, { size: "xs", color: "muted", children: ["Selected: ", value.length, " of ", MAX_FEATURES_PER_PRODUCT, ". Badges appear on product cards and detail pages."] })] }), overLimit && (_jsxs(Div, { className: OVER_LIMIT_BANNER_CLASS, children: ["Too many features selected \u2014 remove", " ", value.length - MAX_FEATURES_PER_PRODUCT, " before saving."] })), platformFeatures.length > 0 && (_jsxs(Div, { children: [_jsx(Div, { className: SECTION_LABEL_CLASS, children: "Platform features" }), _jsx(Grid, { cols: "halves", gap: "xs", children: platformFeatures.map(renderRow) })] })), storeFeatures.length > 0 && (_jsxs(Div, { children: [_jsx(Div, { className: SECTION_LABEL_CLASS, children: "Store custom features" }), _jsx(Grid, { cols: "halves", gap: "xs", children: storeFeatures.map(renderRow) })] })), !hasAny && (_jsx(Div, { className: EMPTY_STATE_CLASS, children: "No applicable feature badges available." }))] }));
+    /*
+     * Create is wired ONLY for a seller editing their own store, and only to the
+     * store-scope route — see the component docstring for why offering the admin
+     * one here would be a control that 403s.
+     *
+     * Extracted rather than written inline so the submit handler sits at a
+     * readable brace depth; it was five levels deep inside the JSX spread.
+     */
+    const createBadge = React.useCallback(async (values) => {
+        const created = await apiClient.post(SELLER_ENDPOINTS.FEATURES, {
+            label: String(values.label ?? "").trim(),
+            description: values.description ? String(values.description).trim() : undefined,
+            icon: String(values.icon ?? "star").trim(),
+            // Scoped to the type being edited; "all" would quietly widen the badge
+            // to every listing type the seller owns.
+            productTypes: [productType],
+            category: "custom",
+            isActive: true,
+            displayOrder: 0,
+        });
+        const doc = created?.data ??
+            created;
+        // Refetch so the new badge becomes a real option rather than a one-off
+        // chip that disappears on the next render.
+        await queryClient.invalidateQueries({
+            queryKey: ["product-features", "store", "active", storeId],
+        });
+        return { value: doc.id, label: doc.label };
+    }, [productType, queryClient, storeId]);
+    const createProps = storeId
+        ? {
+            createLabel: "Create a badge for my store",
+            drawerTitle: "New store feature badge",
+            createSubmitLabel: "Create badge",
+            createFields: CREATE_FIELDS,
+            onCreateSubmit: createBadge,
+        }
+        : {};
+    const isLoading = platformQuery.isLoading || (!!storeId && storeQuery.isLoading);
+    const hasAny = isLoading || options.length > 0;
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Feature badges" }), _jsxs(Text, { size: "xs", color: "muted", children: ["Selected: ", value.length, " of ", MAX_FEATURES_PER_PRODUCT, ". Badges appear on product cards and detail pages."] })] }), overLimit && (_jsxs(Div, { className: OVER_LIMIT_BANNER_CLASS, children: ["Too many features selected \u2014 remove", " ", value.length - MAX_FEATURES_PER_PRODUCT, " before saving."] })), hasAny ? (_jsx(PaginatedSelect, { multiple: true, value: value, onChange: handleChange, options: options, disabled: disabled, ariaLabel: "Feature badges", placeholder: atLimit
+                    ? `All ${MAX_FEATURES_PER_PRODUCT} badge slots used`
+                    : "Search feature badges…", searchPlaceholder: "Search badges by name or description\u2026", noResultsText: "No matching feature badge.", ...createProps })) : (_jsx(Div, { className: EMPTY_STATE_CLASS, children: "No applicable feature badges available." }))] }));
 }

package/dist/features/products/hooks/useProducts.js

@@ -6,6 +6,7 @@ import { useToast } from "../../../ui/index.js";
 import { useOptionalSession } from "../../../react/contexts/SessionContext.js";
 import { isAdminUser, isTesterUser } from "../../auth/role-predicates.js";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { LISTING_PARAM_NAMES } from "../../../utils/listing-params.js";
 export function useProducts(params = {}, opts) {
     const { showToast } = useToast();
     const sp = new URLSearchParams();
@@ -36,8 +37,24 @@ export function useProducts(params = {}, opts) {
         sp.set("listingType", params.listingType);
     if (params.storeId)
         sp.set("storeId", params.storeId);
+    /*
+     * 🛑 THE SHARED CONSTANT, not a hand-written string. This read
+     * `sp.set("sorts", …)` while `parsePublicProductParams` read
+     * `TABLE_KEYS.SORT` (= "sort") — two spellings of one concept, neither
+     * derived from the other, so they could not be kept in step by anything.
+     * Every client-side fetch therefore arrived with a sort the server could not
+     * see and fell back to `-createdAt`, while the dropdown displayed the sort
+     * the user had picked. Measured: `?sorts=auctionEndDate` returned byte-identical
+     * row order to sending no sort at all.
+     *
+     * "We have shared constants and it still broke" is exactly this: the
+     * constants existed, and this call site did not use them. The server now
+     * also accepts all three spellings (`s` / `sorts` / `sort`) the way every
+     * sibling listing route already did, so the two halves are belt-and-braces —
+     * but the literal is what made the gap possible and it is gone.
+     */
     if (params.sort)
-        sp.set("sorts", params.sort);
+        sp.set(LISTING_PARAM_NAMES.sorts.long, params.sort);
     if (params.page)
         sp.set("page", String(params.page));
     if (params.perPage)

package/dist/features/reviews/components/ReviewDetailShell.js

@@ -20,6 +20,7 @@ const CLS_ICON_PURPLE_BARE = "flex h-10 w-10 flex-shrink-0 items-center justify-
 import Link from "next/link.js";
 import { Button, Div, Grid, Heading, IconButton, RichText, Row, Section, Span, StarRating, Stack, Text } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
+import { MediaVideo } from "../../media/MediaVideo.js";
 import { maskName } from "../../../security/index.js";
 import { getDefaultLocale } from "../../../core/baseline-resolver.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
@@ -101,7 +102,7 @@ export function ReviewDetailShell({ review, storeHref }) {
         ? String(ROUTES.PUBLIC.PROFILE(reviewerProfileId))
         : null;
     const currentImage = lightboxIdx !== null ? images[lightboxIdx] : null;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "default", className: "border-b border-neutral-200 pt-[2.5rem]", padding: "b-xl", children: _jsxs(Div, { className: "mx-auto max-w-3xl", padding: "x-md", children: [_jsxs(Row, { gap: "sm", className: "mb-4", children: [_jsx(StarRating, { value: review.rating, size: "lg", readOnly: true }), _jsxs(Span, { color: "inverse", weight: "bold", className: "text-[var(--appkit-color-text)] dark:", size: "2xl", children: [review.rating, ".0"] }), review.verified && (_jsx(Span, { layout: "inline-flex", gap: "xs", color: "success", surface: "success-surface", size: "xs", weight: "semibold", rounded: "full", padding: "pill-md", children: "\u2713 Verified Purchase" })), review.featured && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_RATING_PILL, children: "\u2605 Featured" }))] }), review.title && (_jsx(Heading, { color: "inverse", level: 1, className: "text-[var(--appkit-color-text)] dark: mb-4 leading-snug", size: "2xl", weight: "bold", children: review.title })), _jsxs(Row, { gap: "sm", children: [review.userAvatar ? (_jsx(Div, { className: "relative h-11 w-11 flex-shrink-0 ring-2 ring-white ring-[var(--appkit-color-border-subtle)]", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: review.userAvatar, alt: displayName, size: "avatar" }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", centered: true, className: "h-11 w-11 flex-shrink-0 bg-primary/10 text-primary ring-2 ring-white ring-[var(--appkit-color-border-subtle)]", rounded: "full", children: initials })), _jsxs(Div, { className: "min-w-0", children: [reviewerHref ? (_jsx(Link, { href: reviewerHref, className: "text-[length:var(--appkit-text-sm)] font-semibold text-[var(--appkit-color-text)] dark:text-white hover:text-primary transition-colors", children: displayName })) : (_jsx(Span, { color: "inverse", size: "sm", weight: "semibold", className: "text-[var(--appkit-color-text)] dark:", children: review.isAnonymous ? "Anonymous" : displayName })), date && (_jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: date }))] })] })] }) }), _jsxs(Stack, { gap: "xl", className: "mx-auto max-w-3xl", paddingY: "y-xl", paddingX: "x-md", children: [review.comment && (_jsx(Section, { children: _jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-neutral dark:prose-invert max-w-none prose-p:leading-relaxed prose-headings:font-semibold prose-img:rounded-lg prose-a:text-primary", className: "text-[var(--appkit-color-text-muted)]" }) })), images.length > 0 && (_jsxs(Section, { children: [_jsxs(Heading, { level: 2, className: "tracking-wide mb-3", color: "faint", size: "sm", weight: "semibold", transform: "uppercase", children: ["Photos (", images.length, ")"] }), _jsx(Grid, { gap: "xs", className: "grid-cols-3 sm:grid-cols-4", children: images.map((img, i) => (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setLightboxIdx(i), "aria-label": `View photo ${i + 1}`, rounded: "xl", paddingX: "none", paddingY: "none", className: "group relative aspect-square overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] focus-visible:ring-2 focus-visible:ring-primary", children: [_jsx(MediaImage, { src: img, alt: `Review image ${i + 1}`, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }), _jsx(Row, { centered: true, className: "absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity bg-[rgba(0,0,0,0.3)]", children: _jsx(Span, { color: "inverse", size: "xl", children: "\uD83D\uDD0D" }) })] }, i))) })] })), review.video && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "tracking-wide mb-3", color: "faint", size: "sm", weight: "semibold", transform: "uppercase", children: "Video" }), _jsx(Div, { className: `${__O.hidden} border border-[var(--appkit-color-border)] bg-[rgb(0,0,0)] aspect-video`, rounded: "xl", children: _jsx("video", { src: review.video.url, poster: review.video.thumbnailUrl, controls: true, className: "h-full w-full", preload: "metadata" }) })] })), _jsxs(Section, { className: "flex items-[center] gap-[1rem] border-t border-neutral-100", padding: "y-md", children: [_jsx(Div, { textSize: "sm", className: "text-[var(--appkit-color-text-muted)]", children: helpfulCount > 0 && (_jsxs(Span, { children: [_jsx(Span, { color: "inverse", weight: "bold", className: "text-[var(--appkit-color-text)] dark:", children: helpfulCount }), " ", helpfulCount === 1 ? "person" : "people", " found this helpful"] })) }), _jsxs(Button, { variant: "outline", type: "button", onClick: handleVote, disabled: voted || voting, gap: "sm", rounded: "lg", paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", className: `ml-auto transition-colors ${voted
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "default", className: "border-b border-neutral-200 pt-[2.5rem]", padding: "b-xl", children: _jsxs(Div, { className: "mx-auto max-w-3xl", padding: "x-md", children: [_jsxs(Row, { gap: "sm", className: "mb-4", children: [_jsx(StarRating, { value: review.rating, size: "lg", readOnly: true }), _jsxs(Span, { color: "inverse", weight: "bold", className: "text-[var(--appkit-color-text)] dark:", size: "2xl", children: [review.rating, ".0"] }), review.verified && (_jsx(Span, { layout: "inline-flex", gap: "xs", color: "success", surface: "success-surface", size: "xs", weight: "semibold", rounded: "full", padding: "pill-md", children: "\u2713 Verified Purchase" })), review.featured && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_RATING_PILL, children: "\u2605 Featured" }))] }), review.title && (_jsx(Heading, { color: "inverse", level: 1, className: "text-[var(--appkit-color-text)] dark: mb-4 leading-snug", size: "2xl", weight: "bold", children: review.title })), _jsxs(Row, { gap: "sm", children: [review.userAvatar ? (_jsx(Div, { className: "relative h-11 w-11 flex-shrink-0 ring-2 ring-white ring-[var(--appkit-color-border-subtle)]", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: review.userAvatar, alt: displayName, size: "avatar" }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", centered: true, className: "h-11 w-11 flex-shrink-0 bg-primary/10 text-primary ring-2 ring-white ring-[var(--appkit-color-border-subtle)]", rounded: "full", children: initials })), _jsxs(Div, { className: "min-w-0", children: [reviewerHref ? (_jsx(Link, { href: reviewerHref, className: "text-[length:var(--appkit-text-sm)] font-semibold text-[var(--appkit-color-text)] dark:text-white hover:text-primary transition-colors", children: displayName })) : (_jsx(Span, { color: "inverse", size: "sm", weight: "semibold", className: "text-[var(--appkit-color-text)] dark:", children: review.isAnonymous ? "Anonymous" : displayName })), date && (_jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: date }))] })] })] }) }), _jsxs(Stack, { gap: "xl", className: "mx-auto max-w-3xl", paddingY: "y-xl", paddingX: "x-md", children: [review.comment && (_jsx(Section, { children: _jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-neutral dark:prose-invert max-w-none prose-p:leading-relaxed prose-headings:font-semibold prose-img:rounded-lg prose-a:text-primary", className: "text-[var(--appkit-color-text-muted)]" }) })), images.length > 0 && (_jsxs(Section, { children: [_jsxs(Heading, { level: 2, className: "tracking-wide mb-3", color: "faint", size: "sm", weight: "semibold", transform: "uppercase", children: ["Photos (", images.length, ")"] }), _jsx(Grid, { gap: "xs", className: "grid-cols-3 sm:grid-cols-4", children: images.map((img, i) => (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setLightboxIdx(i), "aria-label": `View photo ${i + 1}`, rounded: "xl", paddingX: "none", paddingY: "none", className: "group relative aspect-square overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] focus-visible:ring-2 focus-visible:ring-primary", children: [_jsx(MediaImage, { src: img, alt: `Review image ${i + 1}`, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }), _jsx(Row, { centered: true, className: "absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity bg-[rgba(0,0,0,0.3)]", children: _jsx(Span, { color: "inverse", size: "xl", children: "\uD83D\uDD0D" }) })] }, i))) })] })), review.video && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "tracking-wide mb-3", color: "faint", size: "sm", weight: "semibold", transform: "uppercase", children: "Video" }), _jsx(Div, { className: `${__O.hidden} border border-[var(--appkit-color-border)] bg-[rgb(0,0,0)] aspect-video relative`, rounded: "xl", children: _jsx(MediaVideo, { src: review.video.url, thumbnailUrl: review.video.thumbnailUrl, alt: "Review video", objectFit: "contain" }) })] })), _jsxs(Section, { className: "flex items-center gap-[1rem] border-t border-neutral-100", padding: "y-md", children: [_jsx(Div, { textSize: "sm", className: "text-[var(--appkit-color-text-muted)]", children: helpfulCount > 0 && (_jsxs(Span, { children: [_jsx(Span, { color: "inverse", weight: "bold", className: "text-[var(--appkit-color-text)] dark:", children: helpfulCount }), " ", helpfulCount === 1 ? "person" : "people", " found this helpful"] })) }), _jsxs(Button, { variant: "outline", type: "button", onClick: handleVote, disabled: voted || voting, gap: "sm", rounded: "lg", paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", className: `ml-auto transition-colors ${voted
                                     ? CLS_HELPFUL_ACTIVE
                                     : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-primary disabled:opacity-50"}`, children: [_jsx(Span, { "aria-hidden": "true", children: voted ? "✓" : "👍" }), voted ? "Marked helpful" : voting ? "Saving…" : "Helpful?"] })] }), _jsxs(Section, { className: "grid gap-[0.75rem] sm:grid-cols-3", children: [productHref && (_jsxs(Link, { href: productHref, className: CLS_RELATED_LINK, children: [_jsx(Span, { className: CLS_ICON_ORANGE, children: "\uD83D\uDCE6" }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_RELATED_LABEL, children: "Product" }), _jsx(Text, { className: CLS_RELATED_TITLE, children: review.productTitle ?? "View Product" })] })] })), sellerHref && (_jsxs(Link, { href: sellerHref, className: CLS_RELATED_LINK, children: [_jsx(Span, { className: CLS_ICON_BLUE, children: "\uD83C\uDFEA" }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_RELATED_LABEL, children: "Seller" }), _jsx(Text, { className: CLS_RELATED_TITLE, children: "View Seller" })] })] })), reviewerHref ? (_jsxs(Link, { href: reviewerHref, className: CLS_RELATED_LINK, children: [_jsx(Span, { className: CLS_ICON_PURPLE, children: "\uD83D\uDC64" }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_RELATED_LABEL, children: "Reviewer" }), _jsx(Text, { className: CLS_RELATED_TITLE, children: displayName })] })] })) : (_jsxs(Row, { surface: "default", gap: "sm", className: `border border-neutral-200 dark:border-[var(--appkit-color-border)] ${__P.p4}`, rounded: "xl", children: [_jsx(Span, { size: "xl", className: CLS_ICON_PURPLE_BARE, children: "\uD83D\uDC64" }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Span, { size: "xs", className: "block mb-0.5", color: "faint", children: "Reviewer" }), _jsx(Span, { color: "inverse", size: "sm", weight: "medium", className: "block text-[var(--appkit-color-text)] dark: truncate", children: "Anonymous" })] })] }))] })] }), lightboxIdx !== null && currentImage && (_jsxs(Row, { centered: true, className: "fixed inset-0 z-50 bg-[rgba(0,0,0,0.95)]", onClick: closeLightbox, role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", children: [_jsx(IconButton, { type: "button", onClick: closeLightbox, "aria-label": "Close lightbox", variant: "scrim", rounded: "full", className: "absolute top-4 right-4 z-10 h-10 w-10", children: _jsx(Span, { size: "xl", children: "\u00D7" }) }), _jsxs(Div, { textSize: "sm", className: "absolute top-4 left-1/2 -translate-x-1/2 text-white/70", children: [lightboxIdx + 1, " / ", images.length] }), images.length > 1 && (_jsx(IconButton, { type: "button", onClick: (e) => { e.stopPropagation(); prevImage(); }, "aria-label": "Previous image", variant: "scrim", rounded: "full", className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 h-12 w-12", children: _jsx(Span, { size: "2xl", children: "\u2039" }) })), _jsx(Row, { centered: true, className: "relative h-[85vh] w-[85vw]", onClick: (e) => e.stopPropagation(), children: _jsx(MediaImage, { src: currentImage, alt: `Review photo ${lightboxIdx + 1}`, size: "hero", objectFit: "contain", rounded: "lg", shadow: "2xl" }) }), images.length > 1 && (_jsx(IconButton, { type: "button", onClick: (e) => { e.stopPropagation(); nextImage(); }, "aria-label": "Next image", variant: "scrim", rounded: "full", className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 h-12 w-12", children: _jsx(Span, { size: "2xl", children: "\u203A" }) })), images.length > 1 && (_jsx(Row, { justify: "center", gap: "xs", className: "absolute bottom-4 left-0 right-0", padding: "x-md", children: images.map((img, i) => (_jsx(Button, { variant: "ghost", type: "button", onClick: (e) => { e.stopPropagation(); setLightboxIdx(i); }, "aria-label": `Go to image ${i + 1}`, rounded: "md", paddingX: "none", paddingY: "none", className: `h-12 w-12 flex-shrink-0 overflow-hidden border-2 transition-all ${i === lightboxIdx
                                 ? "border-white scale-110"

package/dist/features/reviews/components/ReviewSummary.js

@@ -14,7 +14,7 @@ const CLS_BAR = "h-full rounded-full bg-warning-surface transition-all duration-
  */
 export function ReviewSummary({ averageRating, totalReviews, distribution, className = "", }) {
     const stars = [5, 4, 3, 2, 1];
-    return (_jsxs(Stack, { align: "center", className: `sm:[flex-direction:row] sm: sm:gap-[2rem] ${className}`, gap: "md", children: [_jsxs(Stack, { className: "sm:items-[flex-start]", align: "center", gap: "xs", children: [_jsx(Span, { color: "inverse", weight: "bold", className: "leading-none text-[var(--appkit-color-text)] dark:", size: "5xl", children: averageRating.toFixed(1) }), _jsx(StarRating, { value: averageRating, size: "md", readOnly: true }), _jsxs(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: [totalReviews.toLocaleString(), " review", totalReviews !== 1 ? "s" : ""] })] }), _jsx(Stack, { className: "flex-1", gap: "sm", children: stars.map((star) => {
+    return (_jsxs(Stack, { align: "center", className: `sm:[flex-direction:row] sm: sm:gap-[2rem] ${className}`, gap: "md", children: [_jsxs(Stack, { className: /* audit-variant-ok: RESPONSIVE alignment override; `align` is base-breakpoint only */ "sm:items-start", align: "center", gap: "xs", children: [_jsx(Span, { color: "inverse", weight: "bold", className: "leading-none text-[var(--appkit-color-text)] dark:", size: "5xl", children: averageRating.toFixed(1) }), _jsx(StarRating, { value: averageRating, size: "md", readOnly: true }), _jsxs(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: [totalReviews.toLocaleString(), " review", totalReviews !== 1 ? "s" : ""] })] }), _jsx(Stack, { className: "flex-1", gap: "sm", children: stars.map((star) => {
                     const count = distribution[star] ?? 0;
                     const pct = totalReviews > 0 ? Math.round((count / totalReviews) * 100) : 0;
                     return (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { size: "xs", weight: "medium", className: "w-4 text-[var(--appkit-color-text-muted)] tabular-nums", align: "end", children: star }), _jsx(Span, { size: "xs", className: CLS_STAR, children: "\u2605" }), _jsx(Div, { className: "flex-1 h-2 bg-[var(--appkit-color-surface)] overflow-hidden", rounded: "full", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${star} star: ${pct}%`, children: _jsx(ProgressBarFill, { pct: pct, className: CLS_BAR }) }), _jsxs(Span, { size: "xs", className: "w-8 tabular-nums", color: "faint", align: "end", children: [pct, "%"] })] }, star));

package/dist/features/tester/seed-data/_happy-path.js

@@ -67,7 +67,7 @@ export const happyPathPages = [
                     "Wait for the grid to render.",
                     "Read every category name shown at the top level.",
                 ],
-                expectedBehaviour: "The index lists the tier-0 roots of the category forest, which are Spinning Tops and Living Collectibles.",
+                expectedBehaviour: "The index lists the tier-0 roots of the category forest — SIX of them: Spinning Tops, Trading Cards, Collectible Figures, Hot Wheels, Model Kits and Living Collectibles. It lists ONLY roots: the forest is 1,185 rows and the index used to render all of them flat.",
                 expectedUiState: "Both 'Spinning Tops' and 'Living Collectibles' are visible as cards or links. The page is not empty and does not render only leaf categories.",
                 expectedData: { rootCategoriesVisible: 2 },
                 endResult: "Nothing is written; reloading shows the same roots.",

package/dist/features/tester/seed-data/authored/admin__catalog-listings.js

@@ -51,7 +51,7 @@ export const authored = {
         startPage: "/admin/categories",
         steps: [
             "Sign in as admin@letitrip.in / TempPass123!.",
-            "Open /admin/categories and read the tree, noting the two roots and how depth is shown.",
+            "Open /admin/categories and read the tree, noting the six roots and how depth is shown.",
             "Create a child category named 'QA Category admin-crud' under category-beyblade-burst.",
             "Save, RELOAD, and read its parent, its tier and its position in the tree.",
             "Open /categories in a private window and find it beneath its parent.",