@mohasinac/appkit 4.58.0 → 4.60.0

package/dist/features/print/components/labels.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Physical labels — the ones that get stuck to things.
+ *
+ * 🛑 EVERYTHING HERE IS SIZED IN MILLIMETRES, because the output is a physical
+ * object. `PrintCenterView` sized its labels `w-[200px]` and emitted no `@page`
+ * rule at all, so a thermal printer received the browser's default A4 with a
+ * 200-pixel card in the corner of it. Nothing errored; the operator found out
+ * by holding a mostly-blank 50 x 25 mm label.
+ *
+ * ── THE TWO UNIT CONVERSIONS THAT MATTER ────────────────────────────────────
+ *
+ * 1. CSS defines 96 px per inch, EXACTLY, regardless of screen DPI. At print
+ *    time the browser maps that to physical length, so a CSS px is 25.4/96 =
+ *    0.2646 mm of paper. That is the only bridge between a layout and a ruler.
+ *
+ * 2. `JsBarcode`'s `width` option is PIXELS PER MODULE, not millimetres. The
+ *    previous code passed `width: 2`, i.e. a 0.53 mm module — twice the density
+ *    needed, which is why those barcodes were enormous. `moduleWidthPx()`
+ *    converts a target mm module into that option so the intent is stated once.
+ *
+ * 🛑 AND THE WHOLE CHAIN IS DEFEATED BY THE PRINT DIALOG. "Fit to page" or any
+ * scale other than 100% rescales the symbol, taking the module width with it —
+ * silently, and the label still looks correct. Every printable view here says
+ * so on screen, because it is the one failure no code can prevent.
+ *
+ * ── WHY THIS FILE USES `style={{}}` FOR DIMENSIONS ──────────────────────────
+ *
+ * Normally a variant or a token; here the numbers come from the PROFILE at
+ * runtime, so `w-[${profile.widthMm}mm]` is a class Tailwind's build-time
+ * scanner never sees and therefore never generates — it would silently emit
+ * nothing and every label would collapse to its content size. These are the
+ * "dynamic values impossible with classes" case the inline-style rule exists
+ * to permit, and none of them is a COLOUR: every `style` here is a length or a
+ * position. Colour, surface and type still go through the primitives.
+ */
+import { useEffect, useMemo, useRef } from "react";
+import JsBarcode from "jsbarcode";
+import { Div, Row, Stack, Text } from "../../../ui/index.js";
+import { normalizeError } from "../../../errors/normalize.js";
+import { MM_PER_INCH, SAFE_MODULE_MM, labelFitsProfile, sheetPositionMm, } from "../../../_internal/shared/features/print/label-profiles.js";
+/** CSS px per inch is 96 by definition — not a screen measurement. */
+const CSS_PX_PER_INCH = 96;
+/** Millimetres of paper to CSS pixels. The only unit bridge in this file. */
+export function mmToCssPx(mm) {
+    return (mm / MM_PER_INCH) * CSS_PX_PER_INCH;
+}
+/**
+ * A target module width in mm, as JsBarcode's `width` option.
+ *
+ * Not rounded to an integer: JsBarcode accepts a fractional module width and
+ * rounding to 1 px would quantise every density to 0.265 mm steps — which on a
+ * 50 x 25 mm label is the difference between fitting and not.
+ */
+export function moduleWidthPx(moduleMm = SAFE_MODULE_MM) {
+    return mmToCssPx(moduleMm);
+}
+/**
+ * Renders a CODE128 symbol at a known physical density.
+ *
+ * 🛑 THE QUIET ZONE IS COMPUTED, NOT GUESSED. CODE128 requires 10 modules of
+ * clear space each side, and JsBarcode's `margin` is in pixels — so it must
+ * scale with the module. The previous code passed a FIXED `margin: 8` beside
+ * `width: 2`, which is 4 modules: under half the spec minimum. A short quiet
+ * zone does not look wrong and does not fail to render; it just makes some
+ * scanners refuse some reads, which is indistinguishable from a worn label.
+ */
+function Barcode({ value, moduleMm = SAFE_MODULE_MM, heightMm, showValue = true, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current || !value)
+            return;
+        const px = moduleWidthPx(moduleMm);
+        try {
+            JsBarcode(ref.current, value, {
+                format: "CODE128",
+                width: px,
+                height: mmToCssPx(heightMm),
+                displayValue: showValue,
+                // ~2 mm of type: readable by a human squinting, and small enough that
+                // it does not steal height from the bars on a 25 mm label.
+                fontSize: mmToCssPx(2),
+                textMargin: mmToCssPx(0.4),
+                margin: 10 * px,
+            });
+        }
+        catch (_err) {
+            /*
+             * JsBarcode throws on a value CODE128 cannot encode. The `<svg>` is left
+             * empty and the label still prints its text, which is the right
+             * degradation: a label with a title and no barcode is filable by hand,
+             * and the only real fix is correcting the code on the record.
+             */
+            void normalizeError(_err);
+        }
+    }, [value, moduleMm, heightMm, showValue]);
+    return _jsx("svg", { ref: ref, "aria-label": `Barcode ${value}` });
+}
+/**
+ * The single `@page` owner for a printable view.
+ *
+ * 🛑 EXACTLY ONE OF THESE PER VIEW. `@page` is document-global and cannot be
+ * scoped — two of them does not give two geometries, the later one in document
+ * order silently wins and the label prints at the wrong size with nothing in
+ * the markup looking wrong. `audit-label-profiles` R3 enforces that only
+ * `label-profiles.ts` may author the rule at all.
+ */
+export function LabelPageStyle({ css }) {
+    return _jsx("style", { children: css });
+}
+/** One label's box, in mm, with the profile's padding inside it. */
+function LabelBox({ profile, children, }) {
+    return (_jsx(Div, { className: "appkit-label", style: {
+            width: `${profile.widthMm}mm`,
+            height: `${profile.heightMm}mm`,
+            padding: `${profile.paddingMm}mm`,
+            boxSizing: "border-box",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center",
+        }, children: children }));
+}
+/**
+ * A product label: symbol, name, price, and WHERE IT LIVES.
+ *
+ * 🛑 THE BOX CODE IS THE ADDITION THAT MAKES THE LABEL USEFUL FOR PUTTING
+ * THINGS AWAY. Without it a picker holding the item has to scan it and look at
+ * a screen to learn which shelf it came off; with it the label answers the
+ * question the person holding it is actually asking. It replaces the free-text
+ * `physicalLocation` that used to print here — that field was three
+ * inconsistent inputs with no registry behind it, so two people wrote "shelf
+ * 3", "Shelf-3" and "AC60 3" for one place and no list could group them.
+ */
+export function ProductLabel({ profile, product, }) {
+    const code = product.barcodeId ?? product.sku ?? null;
+    /*
+     * The fit is checked PER LABEL, against the code this label actually
+     * carries — not once for the profile. Codes vary in length (a seller-authored
+     * SKU is variable width by design), so one product can fit stock that the
+     * next cannot.
+     */
+    const fit = useMemo(() => (code ? labelFitsProfile(profile, code.length) : null), [profile, code]);
+    /*
+     * 🛑 REFUSES, NEVER SCALES. A symbol squeezed to fit looks perfect and does
+     * not scan — the proportions stay right while the module width drops below
+     * what a scanner resolves, so the failure surfaces weeks later as "the
+     * scanner is broken" with every label already stuck to something. A visible
+     * refusal is read in the second it happens, by the person who can still pick
+     * different stock.
+     */
+    const refuse = fit !== null && !fit.fits;
+    return (_jsxs(LabelBox, { profile: profile, children: [code && !refuse ? (_jsx(Barcode, { value: code, 
+                // A third of the label's height, which leaves room for the name and
+                // price without the bars becoming too short to scan at an angle.
+                heightMm: Math.max(6, profile.heightMm * 0.42) })) : code ? (_jsxs(Text, { size: "xs", color: "error", children: ["Code too long for ", profile.widthMm, "\u00D7", profile.heightMm, " mm"] })) : (_jsx(Text, { size: "xs", color: "muted", children: "No barcode" })), _jsx(Text, { size: "xs", weight: "medium", truncate: 1, children: product.name }), _jsxs(Row, { gap: "xs", justify: "center", wrap: true, children: [product.price != null && (_jsxs(Text, { size: "xs", color: "muted", children: ["\u20B9", product.price.toLocaleString("en-IN")] })), product.boxCode && (_jsx(Text, { size: "xs", weight: "semibold", children: product.boxCode }))] })] }));
+}
+/**
+ * A box label: the code, large, plus what it held WHEN PRINTED.
+ *
+ * 🛑 THE PRINT DATE IS NOT DECORATION — it is what makes the counts honest. A
+ * label is a frozen snapshot stuck to a moving object: the moment something is
+ * picked, the printed count is wrong. Printing "8 items" with no date invites
+ * the operator to trust it; printing "8 items as of 21 Oct" says plainly that
+ * it is a note from the past and the screen is authoritative.
+ *
+ * 🛑 The barcode encodes `BOX-{code}`, with the prefix, because the receive
+ * station discriminates on it: a `BOX-` scan arms a box and a `LIR-` scan adds
+ * an item, and that decision has to be makeable without a lookup. The stored
+ * `code` is the bare `AC60-03`.
+ */
+export function BoxLabel({ profile, box, }) {
+    const value = `BOX-${box.code.toUpperCase()}`;
+    const fit = labelFitsProfile(profile, value.length);
+    return (_jsxs(LabelBox, { profile: profile, children: [fit.fits ? (_jsx(Barcode, { value: value, heightMm: Math.max(8, profile.heightMm * 0.4) })) : (_jsxs(Text, { size: "xs", color: "error", children: [value, " too long for this stock"] })), _jsx(Text, { size: "lg", weight: "bold", numeric: true, children: box.code }), _jsx(Text, { size: "xs", color: "muted", children: [box.boxType, box.location].filter(Boolean).join(" · ") }), box.totalUnits != null ? (_jsxs(Text, { size: "xs", color: "muted", children: [box.distinctProducts ?? 0, " product", box.distinctProducts === 1 ? "" : "s", " \u00B7 ", box.totalUnits, " unit", box.totalUnits === 1 ? "" : "s", box.countedAt
+                        ? ` as of ${new Date(box.countedAt).toLocaleDateString("en-IN", {
+                            day: "numeric",
+                            month: "short",
+                        })}`
+                        : ""] })) : (
+            /*
+             * "Not yet counted" rather than "0 products". The rollup is written by
+             * a scheduled job, so a box registered this morning has no counts —
+             * and a printed `0` about a full box is worse than no number at all.
+             */
+            _jsx(Text, { size: "xs", color: "muted", children: "Not yet counted" }))] }));
+}
+/**
+ * Lays labels out on an A4 die-cut sheet, at the stock's real pitch.
+ *
+ * 🛑 ABSOLUTE POSITIONING FROM THE PITCH, not a flex grid. A grid distributes
+ * whatever space it is given; a die-cut sheet has fixed holes, and the only
+ * thing that lands ink inside them is placing each label at
+ * `margin + n x pitch`. One millimetre of accumulated flex rounding is
+ * invisible on label one and off the die-cut by label thirteen.
+ */
+export function LabelSheet({ profile, children, }) {
+    const sheet = profile.sheet;
+    if (!sheet) {
+        // Thermal: the page IS the label, so each child is its own page and the
+        // `@page` rule plus `break-after` handles it. No positioning to do.
+        return _jsx(_Fragment, { children: children });
+    }
+    const perPage = sheet.columns * sheet.rows;
+    const pages = [];
+    for (let i = 0; i < children.length; i += perPage) {
+        pages.push(children.slice(i, i + perPage));
+    }
+    return (_jsx(_Fragment, { children: pages.map((page, pageIndex) => (_jsx(Div, { className: "appkit-label-sheet", style: {
+                position: "relative",
+                width: `${profile.page.widthMm}mm`,
+                height: `${profile.page.heightMm}mm`,
+                // A sheet past the first must start on a new page; the first must
+                // NOT, or every print begins with a blank sheet.
+                breakBefore: pageIndex === 0 ? "auto" : "page",
+            }, children: page.map((child, i) => {
+                const pos = sheetPositionMm(sheet, i);
+                if (!pos)
+                    return null;
+                return (_jsx(Div, { style: {
+                        position: "absolute",
+                        left: `${pos.leftMm}mm`,
+                        top: `${pos.topMm}mm`,
+                    }, children: child }, i));
+            }) }, pageIndex))) }));
+}
+/**
+ * An A4 sheet listing what is in a box — the thing that goes INSIDE it, or on
+ * the shelf beside it.
+ *
+ * 🛑 A4, not a label, and that is the point of having it at all. A 50 x 25 mm
+ * label cannot list eight products, so the box label carries only a total; the
+ * contents have to live somewhere a person can read them without a screen, and
+ * that is a sheet of paper. It is explicitly a snapshot, dated in the header
+ * for the same reason the box label's counts are.
+ */
+export function BoxContentsSheet({ boxCode, boxType, location, rows, printedAt, }) {
+    const totalUnits = rows.reduce((n, r) => n + r.quantity, 0);
+    return (_jsx(Div, { className: "appkit-label-sheet", style: {
+            width: "210mm",
+            minHeight: "297mm",
+            padding: "12mm",
+            boxSizing: "border-box",
+        }, children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { size: "2xl", weight: "bold", numeric: true, children: boxCode }), _jsx(Text, { size: "sm", color: "muted", children: [boxType, location].filter(Boolean).join(" · ") })] }), _jsxs(Text, { size: "sm", color: "muted", children: [rows.length, " product", rows.length === 1 ? "" : "s", " \u00B7 ", totalUnits, " ", "unit", totalUnits === 1 ? "" : "s", " \u00B7 printed", " ", new Date(printedAt).toLocaleString("en-IN")] }), _jsx(Text, { size: "xs", color: "muted", children: "A snapshot. The dashboard is authoritative \u2014 anything picked since this was printed is still listed here." }), _jsx(Div, { style: { marginTop: "6mm" }, children: rows.length === 0 ? (_jsx(Text, { color: "muted", children: "This box is empty." })) : (_jsx(Stack, { gap: "none", children: rows.map((r, i) => (_jsxs(Row, { justify: "between", align: "center", padding: "y-2xs", border: "bottom", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", children: r.productTitle }), (r.productSku || r.slot) && (_jsx(Text, { size: "xs", color: "muted", numeric: true, children: [r.productSku, r.slot].filter(Boolean).join(" · ") }))] }), _jsxs(Text, { size: "sm", weight: "semibold", numeric: true, children: ["\u00D7", r.quantity] })] }, `${r.productTitle}-${i}`))) })) })] }) }));
+}
+/**
+ * The on-screen warning that no code can replace.
+ *
+ * Every density calculation in this file assumes the browser prints at 100%.
+ * "Fit to page" rescales the symbol and takes the module width with it, and
+ * the result still looks like a correct label.
+ */
+export function PrintScaleWarning() {
+    return (_jsx(Text, { size: "sm", color: "warning", className: "no-print", children: "Print at 100% / \u201CActual size\u201D. Any scaling \u2014 including \u201CFit to page\u201D \u2014 narrows the barcode below what scanners read, and the label will still look correct." }));
+}

package/dist/features/print/components/labels.style.css

@@ -0,0 +1,46 @@
+/*
+ * Print-layout classes for physical labels and printable documents.
+ *
+ * 🛑 THESE LIVE IN A STATIC STYLESHEET, NOT ONLY IN `labelPageCss`'s STRING.
+ *
+ * `labelPageCss()` and `documentPageCss()` emit an `@page` rule plus these
+ * same `break-*` declarations into a runtime `<style>`. That is necessary for
+ * `@page` — its `size` is computed from the chosen profile, so it cannot be
+ * static — but it meant `.appkit-label` and `.appkit-label-sheet` existed
+ * ONLY inside a template literal.
+ *
+ * Consequence: `audit-dead-css-classes` reported them as classes generating no
+ * CSS rule, correctly, because nothing it can read defines them. A class whose
+ * only definition is a string concatenation is invisible to every tool — the
+ * audit, an editor's go-to-definition, and anyone grepping the stylesheets.
+ * Declaring them here makes them real; the runtime string still carries its
+ * own copy because a print view may be opened in a context where the bundled
+ * stylesheet has not loaded, and a duplicated `break-inside: avoid` is
+ * harmless where a missing one splits a label across two pages.
+ *
+ * @tag domain:print
+ * @tag layer:feature
+ */
+
+@media print {
+  /*
+   * A label must never be split across a page boundary. On thermal stock a
+   * page IS a label, so a split would print the top half on one label and the
+   * bottom half on the next — and the operator discovers it after both have
+   * been peeled and stuck to something.
+   */
+  .appkit-label {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  /*
+   * A sheet is one A4 page of die-cut labels, or one contents sheet. Same
+   * rule, different unit — splitting it would offset every label after the
+   * break from its die-cut hole.
+   */
+  .appkit-label-sheet {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}

package/dist/features/print/index.d.ts

@@ -0,0 +1,6 @@
+export { LabelPageStyle, LabelSheet, ProductLabel, BoxLabel, BoxContentsSheet, PrintScaleWarning, mmToCssPx, moduleWidthPx, } from "./components/labels";
+export type { ProductLabelData, BoxLabelData, BoxContentsRow, } from "./components/labels";
+export { LabelProfilePicker } from "./components/LabelProfilePicker";
+export type { LabelProfilePickerProps } from "./components/LabelProfilePicker";
+export { BoxLabelPrintView } from "./components/BoxLabelPrintView";
+export type { BoxLabelPrintViewProps, PrintableBox, } from "./components/BoxLabelPrintView";

package/dist/features/print/index.js

@@ -0,0 +1,16 @@
+/*
+ * The print feature's surface — physical labels and printable documents.
+ *
+ * Everything here is a Client Component or a pure isomorphic helper, so unlike
+ * `features/inventory` there is no `firebase-admin` reachability hazard. It is
+ * still not re-exported from `appkit/src/index.ts`: nothing in the consumer
+ * imports it through a barrel, and adding a re-export for convenience is what
+ * Root Cause #18 is about.
+ *
+ * @tag domain:print
+ * @tag layer:feature
+ * @tag access:client
+ */
+export { LabelPageStyle, LabelSheet, ProductLabel, BoxLabel, BoxContentsSheet, PrintScaleWarning, mmToCssPx, moduleWidthPx, } from "./components/labels.js";
+export { LabelProfilePicker } from "./components/LabelProfilePicker.js";
+export { BoxLabelPrintView } from "./components/BoxLabelPrintView.js";

package/dist/features/products/columns/productTableColumns.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, GatedPrice, Row, Span } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
+import { statusLabel } from "../../../ui/columns/cell-renderers.js";
 import { formatCurrency as defaultFormatCurrency } from "../../../utils/number.formatter.js";
 const __O = {
     hidden: "overflow-hidden",
 };
 const STATUS_STYLES = {
     published: "bg-success-surface text-success dark:bg-success-surface dark:text-success",
-    draft: "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]",
+    draft: "bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]",
     out_of_stock: "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
     discontinued: "bg-error-surface text-error dark:bg-error-surface dark:text-error",
     sold: "bg-primary/10 dark:bg-primary/20 text-primary",
@@ -54,8 +55,8 @@ export function getProductTableColumns({ labels, onEdit, onDelete, currencyCode,
                 return (_jsx(Span, { className: [
                         "rounded px-[var(--appkit-space-2)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium",
                         STATUS_STYLES[status] ??
-                            "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]",
-                    ].join(" "), children: status.replace("_", " ") }));
+                            "bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]",
+                    ].join(" "), children: statusLabel(status) }));
             },
         },
         {
@@ -76,7 +77,7 @@ export function getProductTableColumns({ labels, onEdit, onDelete, currencyCode,
                         "rounded px-[var(--appkit-space-2)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium",
                         featured
                             ? CLS_LOW_STOCK
-                            : "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]",
+                            : "bg-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)]",
                     ].join(" "), children: featured ? labels.yes : labels.no }));
             },
         },

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

@@ -50,7 +50,7 @@ export function MarketplaceBundleCard({ bundle, className = "", variant = "grid"
         }
         router.push(String(detailHref));
     }, [detailHref, onNavigate, router]);
-    const card = (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: String(detailHref), className: "absolute inset-0 block", children: showCollage ? (_jsx(Div, { layout: "grid", className: `h-full w-full gap-[0.125rem] bg-[var(--appkit-color-surface-muted)] ${collageTiles.length === 2 ? "grid-cols-2 grid-rows-1" : "grid-cols-2 grid-rows-2"}`, children: collageTiles.map((tile, i) => (_jsxs(Div, { className: "relative overflow-hidden bg-[var(--appkit-color-surface-muted)]", children: [_jsx(MediaImage, { src: tile.imageURL, alt: tile.title ?? `${bundle.name} item ${i + 1}`, size: "card" }), i === collageTiles.length - 1 && overflow > 0 && (_jsxs(Row, { textWeight: "semibold", textSize: "sm", surface: "overlay-md", className: "absolute inset-0 text-white", align: "center", justify: "center", children: ["+", overflow] }))] }, `${tile.productId}-${i}`))) })) : cover ? (_jsx(Div, { className: "absolute inset-0 bg-[var(--appkit-color-surface-muted)]", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "card" }) })) : (_jsx(Row, { className: "absolute inset-0 bg-[var(--appkit-color-surface-muted)]", align: "center", justify: "center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "No image" }) })) }), discount && (_jsx(PricesOnly, { children: _jsx(Span, { size: "xs", weight: "bold", className: "absolute left-2 top-2 bg-success-solid text-success-on-solid", rounded: "full", padding: "pill-xs", children: BUNDLE_COPY.detail.discountBadge(discount.percent) }) })), _jsxs(Stack, { className: "absolute right-2 top-2", align: "end", gap: "xs", children: [_jsx(Span, { size: "xs", weight: "medium", className: CLS_BUNDLE_PILL, children: mergedLabels.bundleBadge }), _jsx(Span, { layout: "inline-flex", color: "inverse", className: `${stock === "out_of_stock" ? "bg-neutral-500 " : CLS_STOCK_OK}`, rounded: "full", padding: "pill-xs", size: "xs", weight: "medium", children: stock === "out_of_stock" ? mergedLabels.outOfStockBadge : mergedLabels.inStockBadge })] }), stock === "out_of_stock" && (_jsx(Row, { surface: "overlay-xs", className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { color: "inverse", size: "xs", weight: "bold", className: "bg-neutral-900/80 tracking-wider", rounded: "default", padding: "pill-md", transform: "uppercase", children: mergedLabels.outOfStockBadge }) })), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
+    const card = (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: String(detailHref), className: "absolute inset-0 block", children: showCollage ? (_jsx(Div, { layout: "grid", className: `h-full w-full gap-[0.125rem] bg-[var(--appkit-color-bg)] ${collageTiles.length === 2 ? "grid-cols-2 grid-rows-1" : "grid-cols-2 grid-rows-2"}`, children: collageTiles.map((tile, i) => (_jsxs(Div, { className: "relative overflow-hidden bg-[var(--appkit-color-bg)]", children: [_jsx(MediaImage, { src: tile.imageURL, alt: tile.title ?? `${bundle.name} item ${i + 1}`, size: "card" }), i === collageTiles.length - 1 && overflow > 0 && (_jsxs(Row, { textWeight: "semibold", textSize: "sm", surface: "overlay-md", className: "absolute inset-0 text-white", align: "center", justify: "center", children: ["+", overflow] }))] }, `${tile.productId}-${i}`))) })) : cover ? (_jsx(Div, { className: "absolute inset-0 bg-[var(--appkit-color-bg)]", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "card" }) })) : (_jsx(Row, { className: "absolute inset-0 bg-[var(--appkit-color-bg)]", align: "center", justify: "center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "No image" }) })) }), discount && (_jsx(PricesOnly, { children: _jsx(Span, { size: "xs", weight: "bold", className: "absolute left-2 top-2 bg-success-solid text-success-on-solid", rounded: "full", padding: "pill-xs", children: BUNDLE_COPY.detail.discountBadge(discount.percent) }) })), _jsxs(Stack, { className: "absolute right-2 top-2", align: "end", gap: "xs", children: [_jsx(Span, { size: "xs", weight: "medium", className: CLS_BUNDLE_PILL, children: mergedLabels.bundleBadge }), _jsx(Span, { layout: "inline-flex", color: "inverse", className: `${stock === "out_of_stock" ? "bg-neutral-500 " : CLS_STOCK_OK}`, rounded: "full", padding: "pill-xs", size: "xs", weight: "medium", children: stock === "out_of_stock" ? mergedLabels.outOfStockBadge : mergedLabels.inStockBadge })] }), stock === "out_of_stock" && (_jsx(Row, { surface: "overlay-xs", className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { color: "inverse", size: "xs", weight: "bold", className: "bg-neutral-900/80 tracking-wider", rounded: "default", padding: "pill-md", transform: "uppercase", children: mergedLabels.outOfStockBadge }) })), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
                             event.stopPropagation();
                             onSelect(bundle.id, !isSelected);
                         }, className: selectable || isSelected
@@ -77,5 +77,5 @@ export function MarketplaceBundleCard({ bundle, className = "", variant = "grid"
      * Sibling of the card, never a child — see the prop's docstring. `z-20`
      * clears this card's own overlays, which all sit at `z-10`.
      */
-    return (_jsxs(Div, { className: "relative h-full", children: [card, _jsx(Div, { className: "absolute right-2 top-2 z-20", children: ownerActions })] }));
+    return (_jsxs(Div, { className: "flex h-full flex-col", children: [card, _jsx(Div, { className: "flex justify-end px-[var(--appkit-space-3)] pb-[var(--appkit-space-3)]", children: ownerActions })] }));
 }

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

@@ -11,7 +11,7 @@ const CLS_PRIZE_PILL = "inline-flex items-center rounded-full bg-fuchsia-600 px-
 import { BaseListingCard, Button, Div, GatedPrice, Row, Span, Stack, Text, TextLink } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { CardStoreLine } from "./CardStoreLine.js";
-import { ProductOwnerQuickActions } from "./ProductOwnerQuickActions.js";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 const DEFAULT_LABELS = {
     prizeDrawBadge: "Prize draw",
     pendingBadge: "Reveal pending",
@@ -91,11 +91,11 @@ export function MarketplacePrizeDrawCard({ product, className = "", variant = "g
         }
         router.push(String(detailHref));
     }, [detailHref, onNavigate, router]);
-    const card = (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: String(detailHref), className: "absolute inset-0 block", children: thumbItems.length > 0 ? (_jsx(Div, { layout: "grid", className: "grid-cols-2 grid-rows-2 gap-[0.125rem] h-full w-full bg-[var(--appkit-color-surface-muted)]", children: Array.from({ length: 4 }).map((_, i) => {
+    const card = (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: String(detailHref), className: "absolute inset-0 block", children: thumbItems.length > 0 ? (_jsx(Div, { layout: "grid", className: "grid-cols-2 grid-rows-2 gap-[0.125rem] h-full w-full bg-[var(--appkit-color-bg)]", children: Array.from({ length: 4 }).map((_, i) => {
                                 const it = thumbItems[i];
                                 const img = it?.images?.[0];
-                                return (_jsx(Div, { className: "relative overflow-hidden bg-[var(--appkit-color-surface-muted)]", children: img ? (_jsx(MediaImage, { src: img, alt: it?.title ?? `Prize ${i + 1}`, size: "card" })) : null }, `thumb-${i}`));
-                            }) })) : (_jsx(Row, { className: "absolute inset-0 bg-[var(--appkit-color-surface-muted)]", align: "center", justify: "center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "No prizes" }) })) }), _jsxs(Stack, { className: "absolute right-2 top-2", align: "end", gap: "xs", children: [_jsx(Span, { size: "xs", weight: "medium", className: CLS_PRIZE_PILL, children: mergedLabels.prizeDrawBadge }), _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", className: `${statusVariant(status)}`, rounded: "full", padding: "pill-xs", children: statusLabel(status, mergedLabels) })] }), status === "closed" ? (_jsx(Row, { surface: "overlay-xs", className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { color: "inverse", size: "xs", weight: "bold", className: "bg-neutral-900/80 tracking-wider", rounded: "default", padding: "pill-md", transform: "uppercase", children: mergedLabels.closedBadge }) })) : null, onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
+                                return (_jsx(Div, { className: "relative overflow-hidden bg-[var(--appkit-color-bg)]", children: img ? (_jsx(MediaImage, { src: img, alt: it?.title ?? `Prize ${i + 1}`, size: "card" })) : null }, `thumb-${i}`));
+                            }) })) : (_jsx(Row, { className: "absolute inset-0 bg-[var(--appkit-color-bg)]", align: "center", justify: "center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "No prizes" }) })) }), _jsxs(Stack, { className: "absolute right-2 top-2", align: "end", gap: "xs", children: [_jsx(Span, { size: "xs", weight: "medium", className: CLS_PRIZE_PILL, children: mergedLabels.prizeDrawBadge }), _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", className: `${statusVariant(status)}`, rounded: "full", padding: "pill-xs", children: statusLabel(status, mergedLabels) })] }), status === "closed" ? (_jsx(Row, { surface: "overlay-xs", className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { color: "inverse", size: "xs", weight: "bold", className: "bg-neutral-900/80 tracking-wider", rounded: "default", padding: "pill-md", transform: "uppercase", children: mergedLabels.closedBadge }) })) : null, onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
                             event.stopPropagation();
                             onSelect(product.id, !isSelected);
                         }, className: selectable || isSelected
@@ -111,7 +111,7 @@ export function MarketplacePrizeDrawCard({ product, className = "", variant = "g
     const ownerActions = renderOwnerActions
         ? renderOwnerActions()
         : product.id
-            ? (_jsx(ProductOwnerQuickActions, { productId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined, recordLabel: product.title, placement: "card" }))
+            ? (_jsx(RecordOwnerQuickActions, { resource: "PRODUCT", recordId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined, recordLabel: product.title, placement: "card" }))
             : null;
     if (!ownerActions)
         return card;
@@ -119,5 +119,5 @@ export function MarketplacePrizeDrawCard({ product, className = "", variant = "g
      * Sibling of the card, never a child — see the prop's docstring. `z-20`
      * clears this card's own overlays, which all sit at `z-10`.
      */
-    return (_jsxs(Div, { className: "relative h-full", children: [card, _jsx(Div, { className: "absolute right-2 top-2 z-20", children: ownerActions })] }));
+    return (_jsxs(Div, { className: "flex h-full flex-col", children: [card, _jsx(Div, { className: "flex justify-end px-[var(--appkit-space-3)] pb-[var(--appkit-space-3)]", children: ownerActions })] }));
 }

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

@@ -75,7 +75,7 @@ export function PrizeDrawCollage({ items, highlightItemNumber, onItemClick, wonL
                             isHighlight
                                 ? "ring-2 ring-offset-2 ring-[var(--appkit-color-primary)] scale-[1.02]"
                                 : "hover:scale-[1.01]",
-                        ].join(" "), "aria-label": `View ${it.title || `prize #${it.itemNumber}`} in lightbox`, children: [_jsxs(Div, { className: "relative aspect-square w-full", children: [cover ? (_jsx(MediaImage, { src: cover, alt: it.title || `Prize #${it.itemNumber}`, size: "thumbnail" })) : (_jsx(Row, { className: "absolute inset-0 bg-[var(--appkit-color-surface-muted)]", align: "center", justify: "center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "No image" }) })), _jsxs(Div, { textWeight: "semibold", textSize: "xs", surface: "overlay-xl", padding: "chip-2xs", className: "absolute left-2 top-2 text-white", rounded: "default", children: ["#", it.itemNumber] }), it.isWon && !hideWonState ? (_jsxs(_Fragment, { children: [_jsx(Scrim, { direction: "diagonal", intensity: "medium", multiply: true, className: "absolute inset-0" }), _jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Text, { className: CLS_WON_STAMP, children: wonLabel }) })] })) : null] }), _jsxs(Div, { padding: "xs", children: [_jsx(Text, { className: "line-clamp-2", size: "sm", weight: "medium", children: it.title || `Prize #${it.itemNumber}` }), it.estimatedValue != null ? (
+                        ].join(" "), "aria-label": `View ${it.title || `prize #${it.itemNumber}`} in lightbox`, children: [_jsxs(Div, { className: "relative aspect-square w-full", children: [cover ? (_jsx(MediaImage, { src: cover, alt: it.title || `Prize #${it.itemNumber}`, size: "thumbnail" })) : (_jsx(Row, { className: "absolute inset-0 bg-[var(--appkit-color-bg)]", align: "center", justify: "center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "No image" }) })), _jsxs(Div, { textWeight: "semibold", textSize: "xs", surface: "overlay-xl", padding: "chip-2xs", className: "absolute left-2 top-2 text-white", rounded: "default", children: ["#", it.itemNumber] }), it.isWon && !hideWonState ? (_jsxs(_Fragment, { children: [_jsx(Scrim, { direction: "diagonal", intensity: "medium", multiply: true, className: "absolute inset-0" }), _jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Text, { className: CLS_WON_STAMP, children: wonLabel }) })] })) : null] }), _jsxs(Div, { padding: "xs", children: [_jsx(Text, { className: "line-clamp-2", size: "sm", weight: "medium", children: it.title || `Prize #${it.itemNumber}` }), it.estimatedValue != null ? (
                                     // The prize's estimated value is a money amount like any
                                     // other — hidden rather than prompted, because the entry
                                     // price beside it already carries the sign-in gate.

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

@@ -95,7 +95,7 @@ export function PrizeDrawItemsEditor({ items, onChange, onUploadImage, onUploadV
                                                     }), disabled: locked, placeholder: "2999" }) })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["Images (", (it.images ?? []).length, "/", MAX_IMAGES_PER_ITEM, ")"] }), _jsx(Row, { gap: "sm", wrap: true, children: Array.from({ length: MAX_IMAGES_PER_ITEM }).map((_, slot) => {
                                                     const existing = (it.images ?? [])[slot];
                                                     return (_jsxs(Div, { className: "w-40", children: [_jsx(ImageUpload, { currentImage: existing, label: existing ? "Replace" : `Image ${slot + 1}`, onUpload: (file) => onUploadImage(file, it.itemNumber), onChange: (url) => setImage(index, slot, url) }), existing && !locked ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeImage(index, slot), children: "Remove" })) : null] }, slot));
-                                                }) })] }), onUploadVideo ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Video (optional)" }), _jsx(Input, { bare: true, type: "file", accept: "video/*", disabled: locked, onChange: (e) => handleVideoFileChange(e, index, it.itemNumber) }), it.video?.url ? (_jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] truncate", size: "xs", children: ["Current: ", it.video.url] })) : null] })) : null] })] }, `prize-item-${it.itemNumber}-${index}`));
+                                                }) })] }), onUploadVideo ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Video (optional)" }), _jsx(Input, { bare: true, "aria-label": `Video for item ${it.itemNumber} (optional)`, type: "file", accept: "video/*", disabled: locked, onChange: (e) => handleVideoFileChange(e, index, it.itemNumber) }), it.video?.url ? (_jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] truncate", size: "xs", children: ["Current: ", it.video.url] })) : null] })) : null] })] }, `prize-item-${it.itemNumber}-${index}`));
                 }) }), items.length < MIN_ITEMS ? (_jsxs(Div, { textSize: "sm", className: "border border-error/40", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "default", children: ["At least ", MIN_ITEMS, " prizes are required."] })) : null] }));
 }
 export default PrizeDrawItemsEditor;

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

@@ -24,8 +24,8 @@ export function PrizeRevealModal({ open, onClose, items, initialPrizeWon, reveal
     const winnerImg = winner?.images?.[0];
     return (_jsx(Modal, { isOpen: open, onClose: onClose, title: "Prize Reveal", size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(PrizeDrawCollage, { items: items, hideWonState: true }), !winner ? (
                 // audit-content-alignment-ok: informational reveal-status panel, not marketing content
-                _jsxs(Div, { className: `bg-[var(--appkit-color-surface-muted)] ${__P.p4} text-center`, rounded: "default", children: [_jsx(Text, { size: "lg", weight: "semibold", children: "Reveal pending" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: PENDING_COPY[revealMode] })] })) : (
+                _jsxs(Div, { className: `bg-[var(--appkit-color-bg)] ${__P.p4} text-center`, rounded: "default", children: [_jsx(Text, { size: "lg", weight: "semibold", children: "Reveal pending" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: PENDING_COPY[revealMode] })] })) : (
                 // audit-content-alignment-ok: theatrical reveal-modal centerpiece, not marketing content
-                _jsxs(Div, { className: `border-2 border-[var(--appkit-color-primary)] bg-[var(--appkit-color-surface)] ${__P.p4} text-center`, rounded: "lg", children: [_jsx(Text, { className: "tracking-wider text-[var(--appkit-color-text-muted)]", size: "xs", transform: "uppercase", children: "You won" }), _jsxs(Heading, { level: 2, className: "my-2", children: ["#", winner.itemNumber, " \u2014 ", winner.title] }), winnerImg ? (_jsx(Div, { className: "relative mx-auto h-64 w-64 max-w-full", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: winnerImg, alt: winner.title, size: "hero", objectFit: "contain" }) })) : null, winner.estimatedValue != null ? (_jsx(PricesOnly, { children: _jsxs(Text, { className: "mt-2 text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Estimated value: \u20B9", winner.estimatedValue.toLocaleString("en-IN")] }) })) : null] })), _jsxs(Div, { textSize: "xs", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-muted)] text-[var(--appkit-color-text-muted)]", padding: "inlineSm", rounded: "default", children: [_jsx(Span, { weight: "bold", children: "Fairness guarantee:" }), " ", "Winners are picked by ", _jsx("code", { children: "crypto.randomInt" }), " running on LetItRip's server the moment your prize is assigned. Neither the store nor LetItRip staff can influence the outcome.", " ", rngSourceUrl ? (_jsx(Anchor, { href: rngSourceUrl, tone: "none", underline: "always", children: "View RNG source code \u2192" })) : null] })] }) }));
+                _jsxs(Div, { className: `border-2 border-[var(--appkit-color-primary)] bg-[var(--appkit-color-surface)] ${__P.p4} text-center`, rounded: "lg", children: [_jsx(Text, { className: "tracking-wider text-[var(--appkit-color-text-muted)]", size: "xs", transform: "uppercase", children: "You won" }), _jsxs(Heading, { level: 2, className: "my-2", children: ["#", winner.itemNumber, " \u2014 ", winner.title] }), winnerImg ? (_jsx(Div, { className: "relative mx-auto h-64 w-64 max-w-full", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: winnerImg, alt: winner.title, size: "hero", objectFit: "contain" }) })) : null, winner.estimatedValue != null ? (_jsx(PricesOnly, { children: _jsxs(Text, { className: "mt-2 text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Estimated value: \u20B9", winner.estimatedValue.toLocaleString("en-IN")] }) })) : null] })), _jsxs(Div, { textSize: "xs", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg)] text-[var(--appkit-color-text-muted)]", padding: "inlineSm", rounded: "default", children: [_jsx(Span, { weight: "bold", children: "Fairness guarantee:" }), " ", "Winners are picked by ", _jsx("code", { children: "crypto.randomInt" }), " running on LetItRip's server the moment your prize is assigned. Neither the store nor LetItRip staff can influence the outcome.", " ", rngSourceUrl ? (_jsx(Anchor, { href: rngSourceUrl, tone: "none", underline: "always", children: "View RNG source code \u2192" })) : null] })] }) }));
 }
 export default PrizeRevealModal;

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

@@ -31,7 +31,7 @@ import { ctaAnchorProps } from "../../layout/cta-anchor.js";
 import { ContextualTrail } from "../../categories/components/ContextualTrail.js";
 import { productCrumbs, withTrailHead } from "../../categories/utils/breadcrumb-chain.js";
 import { getDefaultCurrency } from "../../../core/baseline-resolver.js";
-import { ProductOwnerQuickActions } from "./ProductOwnerQuickActions.js";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 import { PurchaseReviewAffordance } from "../../reviews/components/PurchaseReviewAffordance.js";
 import { Button, Container, Div, Heading, Main, PriceDisplay, RichText, Row, Section, Span, Stack, Text, Ul, Ol, Li, SpecTable, Icon, } from "../../../ui/index.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
@@ -348,11 +348,25 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const { relatedItems, relatedByBrand, relatedByTags, relatedByStore } = related;
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: product.id, productType: "product", snapshot: {
                     title: product.title,
-                    thumb: product.mainImage ?? product.images?.[0],
+                    /*
+                     * 🛑 `images` is `ProductImage[]`, not `string[]` — reading
+                     * `product.images?.[0]` here wrote an OBJECT into the history
+                     * snapshot, which `resolveMediaUrl` then refuses on every later
+                     * render of `/user/history` ("expected a string, received
+                     * [object Object]") and shows a placeholder for. The three sibling
+                     * detail views (classified, digital-code, live) already use the
+                     * derived `images` array for exactly this reason; this one was
+                     * missed by the `string[]` -> `ProductImage[]` migration.
+                     *
+                     * `mainImage` stays first because it is the authored cover and is
+                     * not part of the gallery array, so `images[0]` is a different
+                     * picture whenever both exist.
+                     */
+                    thumb: typeof product.mainImage === "string" ? product.mainImage : images[0],
                     price: product.price,
                     storeId: product.storeId,
                     storeName: product.storeName,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(ContextualTrail, { trails: trails, alternates: { ids: categoryIds, names: categoryIdNames } }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(ProductOwnerQuickActions, { productId: String(product.id), recordLabel: title || String(product.slug ?? product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(ContextualTrail, { trails: trails, alternates: { ids: categoryIds, names: categoryIdNames } }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(RecordOwnerQuickActions, { resource: "PRODUCT", recordId: String(product.id), recordLabel: title || String(product.slug ?? product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
                                                 ? "Brand New"
                                                 : condition === "like_new"
                                                     ? "Like New"
@@ -360,7 +374,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                                         ? "Refurbished"
                                                         : condition === "used"
                                                             ? "Used"
-                                                            : condition })), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title || "Untitled Product" })] }), avgRating !== null ? (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { size: "sm", color: "muted", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), showViews && (_jsxs(Span, { size: "sm", color: "muted", children: ["\u00B7 ", views7d.toLocaleString(), " viewed this week"] })), _jsxs(Span, { size: "xs", weight: "medium", surface: inStock ? "success-surface" : "danger-surface", className: `ml-auto ${inStock ? "text-success" : "text-error"}`, padding: "pill-sm", rounded: "full", children: [madeToOrder
+                                                            : condition })), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title || "Untitled Product" })] }), avgRating !== null && (reviewCount ?? 0) > 0 ? (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { size: "sm", color: "muted", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), showViews && (_jsxs(Span, { size: "sm", color: "muted", children: ["\u00B7 ", views7d.toLocaleString(), " viewed this week"] })), _jsxs(Span, { size: "xs", weight: "medium", surface: inStock ? "success-surface" : "danger-surface", className: `ml-auto ${inStock ? "text-success" : "text-error"}`, padding: "pill-sm", rounded: "full", children: [madeToOrder
                                                     ? "✓ Made to order"
                                                     : inStock
                                                         ? "✓ In Stock"