@stapel/listings-react 0.29.0 → 0.30.0

package/dist/default/ListingDetailPane.js

@@ -76,8 +76,43 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * `<h1>` through its published test id and a `MutationObserver`, for a
  * boolean the pane already knows. It is an `IntersectionObserver` on the
  * title, never a scroll listener.
+ *
+ * `actionsPlacement="condensed-top"` is the round after that: the pane draws
+ * the bar ITSELF — back, the title on one line, the travelling cluster — for
+ * the four things every container was writing identically around the render
+ * prop. See `condensedBar.ts`; the render prop is untouched and still wins.
+ *
+ * ── What else the reference has on this page, and now so does this ────────
+ *
+ * Three absences the closing-wave comparison measured against the reference
+ * classified, each closed as a SEAM rather than as a feature this pair
+ * invented data for:
+ *
+ *   the strip did not say where it was
+ *       `galleryLayout="strip"` is a native scroll container and the page had
+ *       no position indicator at all (REPORT §20b). `useGalleryPosition` reads
+ *       the strip's own scroll — never a tap, because the gesture that changes
+ *       the photograph is not one.
+ *
+ *   nothing on the page started a sentence
+ *       The reference puts four canned questions above its contact control on
+ *       every listing (§16). `quickQuestions` draws them and
+ *       `onQuickQuestion` reports the press, because chat-react's door takes
+ *       no initial message and a pane that claimed to prefill one would be
+ *       inventing a seam the other pair does not have.
+ *
+ *   the page ended
+ *       `similar` / `fromSeller` (rows) and `renderSimilar` /
+ *       `renderFromSeller` (slots) are the reference's two distinct "find
+ *       more" mechanisms (§16 comparison 4). The rows come from the HOST's
+ *       search, because this pair does not read search.
+ *
+ * And one that was NOT a defect in this component: the characteristics table
+ * draws every stored row it can key and counts the ones it cannot. Measured
+ * against a live answer, the shortfall the comparison saw was in the DATA —
+ * `characteristicsLimit` adds the reference's FOLD, not rows.
  */
-import { isValidElement, useCallback, useEffect, useRef } from "react";
+import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
 import { Descriptions, Divider, Flex, Typography, theme as antdTheme } from "antd";
 import { SkinButton as Button } from "@stapel/tokens-antd/skin";
 import { ErrorAlert, EmptyState, GatedButton, GatedControl, SkinTheme, } from "@stapel/tokens-antd/skin";
@@ -92,12 +127,15 @@ import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
 import { GateReasonPopover } from "./GateReasonPopover.js";
 import { ListingActions } from "./ListingActions.js";
 import { LISTING_ACTION_CLASS } from "./actionRow.js";
-import { LISTINGS_GALLERY_CLASS, LISTINGS_GALLERY_STYLE_HREF, detailGalleryCss, } from "./detailGallery.js";
+import { LISTINGS_GALLERY_CLASS, LISTINGS_GALLERY_COUNTER_CLASS, LISTINGS_GALLERY_FRAME_CLASS, LISTINGS_GALLERY_STYLE_HREF, detailGalleryCss, useGalleryPosition, } from "./detailGallery.js";
 import { useMovableCluster } from "./movableCluster.js";
+import { DETAIL_RHYTHM_CLASS, DETAIL_RHYTHM_STYLE_HREF, DETAIL_RULE_CLASS, detailRhythmCss, } from "./detailRhythm.js";
+import { CONDENSED_BAR_CLASS, CONDENSED_BAR_STYLE_HREF, CONDENSED_TITLE_CLASS, condensedBarCss, } from "./condensedBar.js";
+import { ListingRelatedStrip } from "./ListingRelated.js";
 import { useNotice } from "./notice.js";
 import { ListingSpecColumns, ListingSpecList } from "./ListingSpecList.js";
 import { SignInLink } from "./SignInLink.js";
-import { HeartIcon } from "./icons.js";
+import { BackIcon, HeartIcon } from "./icons.js";
 import { ListingPhoto } from "./ListingPhoto.js";
 import { ListingPrice } from "./ListingPrice.js";
 import { ListingStatusBlock } from "./StatusTags.js";
@@ -145,32 +183,45 @@ export { DETAIL_PHOTO_MIN } from "./detailGallery.js";
  * fallback for a host that loads no token stylesheet.
  */
 export const DETAIL_GALLERY_GUTTER = `${cssVar("page-gutter").slice(0, -1)}, ${String(spacing[3])}px)`;
-/** The cluster's HOME: the first entry that is not the borrowed bar. */
+/** The two LOANS: places the one cluster may travel to, neither of them a
+ * home. See {@link ListingDetailPaneProps.actionsPlacement}. */
+const LOANS = ["bar", "condensed-top"];
+/** The cluster's HOME: the first entry that is not one of the two loans. */
 function homePlacement(placement) {
-    if (placement === undefined)
-        return "header";
-    if (typeof placement === "string") {
-        // `"bar"` alone names no home — the cluster still has to live somewhere
+    const all = placement === undefined
+        ? []
+        : typeof placement === "string"
+            ? [placement]
+            : placement;
+    for (const one of all) {
+        // A loan alone names no home — the cluster still has to live somewhere
         // while the bar is off screen, and that somewhere is the default.
-        return placement === "bar" ? "header" : placement;
-    }
-    for (const one of placement) {
-        if (one !== "bar")
+        if (!LOANS.includes(one)) {
             return one;
+        }
     }
     return "header";
 }
-/** Did the host ask for the borrowed placement at all? */
-function wantsBar(placement) {
+/** Did the host ask for this borrowed placement at all? */
+function wants(placement, one) {
     if (placement === undefined)
         return false;
     if (typeof placement === "string")
-        return placement === "bar";
-    return placement.includes("bar");
+        return placement === one;
+    return placement.includes(one);
 }
 /** Priorities for the two mount points: the bar wins while it is on screen. */
 const CLUSTER_HOME = 0;
 const CLUSTER_BAR = 1;
+/**
+ * How many canned questions the page draws, whoever supplies them.
+ *
+ * Four is the reference's own count and it is not arbitrary: the chips stand
+ * between the price and the one primary action on the page, and a fifth does
+ * not lengthen the row on a 390px phone — it wraps, and pushes "message the
+ * seller" a line further down.
+ */
+export const QUICK_QUESTIONS_MAX = 4;
 /**
  * The pane's own title, watched — see
  * {@link ListingDetailPaneProps.onTitleVisible}.
@@ -186,13 +237,44 @@ function useTitleVisibility(onTitleVisible) {
         latest.current = onTitleVisible;
     });
     const wanted = onTitleVisible !== undefined;
+    /**
+     * THE ONE LIVE OBSERVER, held by the node it watches.
+     *
+     * React 19's ref cleanup is the normal way this is disconnected, and it is
+     * not the only caller: `<Typography.Title ref>` is antd's, which merges refs
+     * and invokes them itself — a callback's RETURN VALUE means nothing to a
+     * caller that is not React, so the cleanup was simply dropped and a fresh
+     * `IntersectionObserver` was attached to the same `<h1>` on every render of
+     * a page that re-renders on every query settle. Measured: three live
+     * observers on one heading after two crossings, each firing the host's
+     * callback again, so a subscriber counting crossings counted three where
+     * there were two.
+     *
+     * Holding the pair here makes the hook idempotent for the node it is already
+     * watching, whoever calls it and however many times, and disconnecting from
+     * an effect closes the case a dropped cleanup leaves open.
+     */
+    const held = useRef(null);
+    const stop = useCallback(() => {
+        held.current?.observer.disconnect();
+        held.current = null;
+    }, []);
+    // The belt, for the caller that discards the cleanup above.
+    useEffect(() => stop, [stop]);
     return useCallback((node) => {
-        if (node === null || !wanted)
+        if (node === null || !wanted) {
+            stop();
             return undefined;
+        }
         // No observer, no answer. A fabricated `true` would wedge a host's bar
         // open on an arm that has no scrolling to close it with.
         if (typeof IntersectionObserver === "undefined")
             return undefined;
+        // Already watching this very element: a second observer on it would
+        // report every crossing twice.
+        if (held.current?.node === node)
+            return stop;
+        stop();
         const observer = new IntersectionObserver((entries) => {
             const entry = entries[entries.length - 1];
             if (entry === undefined)
@@ -200,10 +282,9 @@ function useTitleVisibility(onTitleVisible) {
             latest.current?.(entry.isIntersecting);
         });
         observer.observe(node);
-        return () => {
-            observer.disconnect();
-        };
-    }, [wanted]);
+        held.current = { node, observer };
+        return stop;
+    }, [wanted, stop]);
 }
 /**
  * Which arm of `actions` this is.
@@ -245,10 +326,49 @@ export function ListingDetailPane(props) {
        rendered inline where it always was, no portal and no slot divs. */
     const galleryLayout = props.galleryLayout ?? "grid";
     const renderBar = props.renderActionsBar;
-    const barred = wantsBar(props.actionsPlacement) && renderBar !== undefined;
+    /* TWO LOANS, ONE WINNER. The host's own render prop is the specific answer
+       and the pane's condensed bar is the default one, so a page that asked for
+       both gets the host's — and never two bars competing for the top of one
+       viewport, each holding half a cluster. */
+    const hostBar = wants(props.actionsPlacement, "bar") && renderBar !== undefined;
+    const ownBar = !hostBar && wants(props.actionsPlacement, "condensed-top");
+    const barred = hostBar || ownBar;
     const movable = useMovableCluster(barred);
     const moving = barred && movable.portable;
-    const titleRef = useTitleVisibility(props.onTitleVisible);
+    /* IS THE TITLE ON SCREEN — the pane's own copy of the answer it already
+       publishes. `false` to start, because the page opens AT the title and a bar
+       that flashed on the first frame is the defect the observer exists to
+       avoid. */
+    const [titleGone, setTitleGone] = useState(false);
+    const onTitleVisible = props.onTitleVisible;
+    /* One observer for both readers. The hook holds the latest callback in a
+       ref, so this inline arrow costs no re-observation — and where the host
+       asked for neither, `undefined` keeps the whole thing unarmed. */
+    const titleRef = useTitleVisibility(onTitleVisible === undefined && !ownBar
+        ? undefined
+        : (visible) => {
+            // Only the arm that draws a bar keeps state. A host that merely
+            // subscribed does not get a re-render of this page per crossing.
+            if (ownBar)
+                setTitleGone(!visible);
+            onTitleVisible?.(visible);
+        });
+    /* WHERE THE STRIP IS. Armed only for the arm that scrolls and only for a
+       listing with something to scroll THROUGH — see `useGalleryPosition`. */
+    const strip = galleryLayout === "strip" && bag.images.length > 1;
+    const photo = useGalleryPosition(strip);
+    /* THE FOUR QUESTIONS. Defaults from this pair's own catalogue, a host's own
+       list when it has one, and NOTHING at all when nobody can act on a press —
+       see `onQuickQuestion`. Capped at four: a fifth is a second row of chips
+       standing between a reader and the one primary action on the page. */
+    const quickQuestions = props.onQuickQuestion === undefined
+        ? []
+        : (props.quickQuestions ?? [
+            t(LISTINGS_I18N_KEYS.detailQuestionAvailable),
+            t(LISTINGS_I18N_KEYS.detailQuestionPrice),
+            t(LISTINGS_I18N_KEYS.detailQuestionViewing),
+            t(LISTINGS_I18N_KEYS.detailQuestionDelivery),
+        ]).slice(0, QUICK_QUESTIONS_MAX);
     // The two arms of `actions` — see `isActionsConfig`.
     const actionsConfig = isActionsConfig(props.actions)
         ? props.actions
@@ -283,163 +403,224 @@ export function ListingDetailPane(props) {
             ? LISTINGS_I18N_KEYS.favoriteAdded
             : LISTINGS_I18N_KEYS.favoriteRemoved));
     };
-    return (_jsx(SkinTheme, { surface: "base", style: {
+    return (_jsxs(SkinTheme, { surface: "base", style: {
             maxWidth: props.measure ?? (split ? DETAIL_SPLIT_MEASURE : DETAIL_MEASURE),
             // See `gutter`: a frame that already placed the page edge does not get
             // a second one stacked inside it.
             padding: props.gutter === "shell" ? 0 : spacing[4],
-        }, ...(props.mode !== undefined ? { mode: props.mode } : {}), children: _jsxs(Flex, { vertical: true, gap: spacing[4], "data-testid": "listings-detail", children: [bag.removed ? (_jsx(ErrorAlert, { testId: "listings-detail-removed", message: t(LISTINGS_I18N_KEYS.detailRemoved) })) : null, matchLoad(bag.state, {
-                    loading: () => (_jsx("div", { role: "status", "aria-busy": "true", "aria-label": t(LISTINGS_I18N_KEYS.detailLoading), "data-testid": "listings-detail-loading", "data-stapel-load-state": "loading" })),
-                    // The failed arm, most specific sentence first: removed (the banner
-                    // above already says it) → not found → withdrawn → the generic
-                    // retry. `withdrawn` carries no retry control on purpose — the row
-                    // is gone by its owner's choice, and a retry that can never help is
-                    // what this arm replaces.
-                    failed: (error) => bag.removed ? null : bag.notFound ? (_jsx(EmptyState, { testId: "listings-detail-error", title: t(LISTINGS_I18N_KEYS.detailNotFound) })) : bag.withdrawn ? (_jsx(EmptyState, { testId: "listings-detail-withdrawn", title: t(LISTINGS_I18N_KEYS.detailWithdrawn) })) : (_jsx(ErrorAlert, { testId: "listings-detail-error", thrown: error, message: t(LISTINGS_I18N_KEYS.detailLoadFailed), onRetry: bag.refetch, retryLabel: t(LISTINGS_I18N_KEYS.detailRetry) })),
-                    ready: (listing) => {
-                        /* The moderation axis is the OWNER's business and nobody
-                           else's: a buyer has no use for "changes under review", and
-                           showing a stranger that a listing was refused would leak a
-                           verdict about someone else's content. Rendered above the
-                           split, full width — a verdict is about the PAGE, not about
-                           either of its columns. */
-                        const statusBlocks = (_jsxs(_Fragment, { children: [owner && bag.status !== undefined ? (_jsxs(Flex, { vertical: true, gap: spacing[2], "data-testid": "listings-detail-owner-view", children: [_jsx(ListingStatusBlock, { status: bag.status }), !bag.publiclyVisible ? (_jsx(Typography.Text, { type: "secondary", children: t(LISTINGS_I18N_KEYS.detailOwnerOnlyView) })) : null] })) : null, !owner && !bag.publiclyVisible ? (_jsx(ErrorAlert, { testId: "listings-detail-not-published", message: t(LISTINGS_I18N_KEYS.detailNotPublished), variant: "inline" })) : null] }));
-                        /* THE READER'S TWO ACTIONS, as one cluster — see
-                           `<ListingActions>` and `actionsPlacement`.
-            
-                           The heart is handed IN rather than mounted by the cluster:
-                           this page's favourite is driven by `useListingDetail`'s own
-                           optimistic bag (it holds the whole listing and flips the row it
-                           already has), not by `useFavoriteToggle` against a card row.
-                           One control, two hooks, one geometry.
-            
-                           The OWNER gets the share button and no heart: favouriting your
-                           own listing is not a thing anyone does, and sending somebody
-                           your own listing is the first thing a seller does. */
-                        const favoriteControl = owner ? null : props.blockedReason === "popover" &&
-                            favoriteView.reason !== undefined ? (
-                        /* The cards' third volume, verbatim: nothing standing, the
-                           reason and the door disclosed on the heart. `aria-disabled`
-                           rather than `disabled`, so the disclosure's hover, focus
-                           and tap all arrive — and the click is a safe no-op, because
-                           `toggleFavorite` refuses while the gate is blocked. */
-                        _jsx(GateReasonPopover, { reason: favoriteView.reason, cta: props.signIn, testId: "listings-detail-favorite-reason", signInTestId: "listings-detail-sign-in", children: (bind) => (_jsx(Button, { shape: "circle", "aria-disabled": true, ...bind, className: LISTING_ACTION_CLASS, "aria-label": favoriteLabel, "aria-pressed": bag.isFavorited, icon: heartIcon, "data-testid": "listings-detail-favorite", "data-favorited": String(bag.isFavorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: pressFavorite })) })) : (_jsxs(Flex, { vertical: true, gap: spacing[1], children: [_jsx(GatedControl, { gate: bag.favoriteGate, testId: "listings-detail-favorite-gate", children: (bind) => (_jsx(Button, { shape: "circle", ...bind, className: LISTING_ACTION_CLASS, "aria-label": favoriteLabel, "aria-pressed": bag.isFavorited, icon: heartIcon, "data-testid": "listings-detail-favorite", "data-favorited": String(bag.isFavorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: pressFavorite })) }), bag.favoriteGate.available ? null : (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-detail-favorite-blocked", children: _jsx(SignInLink, { cta: props.signIn, testId: "listings-detail-sign-in" }) }))] }));
-                        const readerActions = (_jsx(ListingActions, { listingId: props.id, favorite: favoriteControl, testId: "listings-detail-reader-actions", placement: placement === "gallery" ? "overlay" : "inline", actions: {
-                                ...actionsConfig,
-                                // The owner keeps the share button and loses the heart.
-                                ...(owner ? { favorite: false } : {}),
-                            }, ...(props.favoriteCount !== undefined && !owner
-                                ? { favoriteCount: props.favoriteCount }
-                                : {}), ...(props.shareUrl !== undefined ? { shareUrl: props.shareUrl } : {}), ...(listing.title !== undefined && listing.title !== null
-                                ? { shareTitle: listing.title }
-                                : {}), ...(props.sharePrefer !== undefined
-                                ? { sharePrefer: props.sharePrefer }
-                                : {}), ...(props.onShared !== undefined ? { onShared: props.onShared } : {}) }));
-                        /* What the PAGE draws where the cluster lives. With the bar in
-                           play that is a slot and not the cluster itself: the cluster is
-                           rendered once into `clusterLayer` below and travels between the
-                           two slots as a DOM node, so it mounts once, holds one
-                           `useFavoriteToggle`, and keeps its element identity across the
-                           move. Without it, the cluster is drawn inline exactly as it has
-                           always been. */
-                        const homeActions = moving
-                            ? movable.slot(CLUSTER_HOME, placement)
-                            : readerActions;
-                        /* The one instance, plus the host's bar around the slot that may
-                           borrow it. Rendered at the end of the page's own flow: the
-                           portal has no position of its own (its content is wherever the
-                           winning slot is), and a bar is `position: fixed` chrome whose
-                           place in the document order is not its place on the screen. */
-                        const clusterLayer = !moving || renderBar === undefined ? null : (_jsxs(_Fragment, { children: [movable.render(readerActions), renderBar(movable.slot(CLUSTER_BAR, "bar"))] }));
-                        /* Element-width tiles: the grid decides how many fit, the
-                           photos fill them. */
-                        const gallery = (_jsxs("div", { "data-testid": "listings-detail-gallery", className: LISTINGS_GALLERY_CLASS, "data-gallery-layout": galleryLayout, style: {
-                                // The page's own edge, per breakpoint — see
-                                // `DETAIL_GALLERY_GUTTER` (D418).
-                                gap: DETAIL_GALLERY_GUTTER,
-                                // The containing block the overlay arm is pinned to. A
-                                // `relative` with no offsets moves no pixel of what is
-                                // already in it — the same trick `cardGalleryCss` uses.
-                                position: "relative",
-                            }, children: [_jsx("style", { href: LISTINGS_GALLERY_STYLE_HREF, precedence: "default", children: detailGalleryCss() }), bag.images.length === 0 ? (_jsx(ListingPhoto, { imageRef: undefined, alt: listing.title ?? String(listing.id) })) : (bag.images.map((ref, index) => (_jsx(ListingPhoto, { imageRef: ref, alt: t(LISTINGS_I18N_KEYS.detailPhotoAlt, {
-                                        index: index + 1,
-                                        total: bag.images.length,
-                                    }) }, ref)))), placement === "gallery" ? homeActions : null] }));
-                        const heading = (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "flex-start", justify: "space-between", gap: spacing[3], children: [_jsx(Typography.Title, { level: props.headingLevel ?? 3, ref: titleRef, "data-testid": "listings-detail-title", style: { minWidth: 0, flex: "1 1 auto" }, children: listing.title ?? "" }), placement === "header" ? homeActions : null] }), bag.titleFeatures.length > 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-detail-title-features", children: bag.titleFeatures
-                                        // A hidden value is never part of a title: the server
-                                        // keeps one out of `features_title` entirely, and
-                                        // `formatFeatureValue` refuses a stub besides (it carries
-                                        // no value, so there is nothing to format). The filter is
-                                        // the third belt, and it is here rather than at the
-                                        // formatter's edge because THIS is the line where a
-                                        // leaked identifier would be read out loud.
-                                        .filter((view) => !isRedactedValue(view.value))
-                                        .map((view) => formatSpecValue(view.feature, view.value, { t, locale }))
-                                        .filter((text) => text !== undefined)
-                                        .join(" · ") })) : null, bag.viewCount !== undefined ? (_jsxs(Typography.Text, { type: "secondary", "data-testid": "listings-detail-meta", style: { display: "block" }, children: [t(LISTINGS_I18N_KEYS.detailViews), ":", " ", _jsx("span", { "data-testid": "listings-detail-views", children: bag.viewCount })] })) : null] }));
-                        /* In the split the price leads the buy column at level 2 — the
-                           measured page had it at 22px UNDER the title, smaller than the
-                           thing it prices, which is backwards on the one line a buyer
-                           came to read. In the column it stays the level-4 line it has
-                           always been. */
-                        const price = (_jsx(Typography.Title, { level: split ? 2 : 4, "data-testid": "listings-detail-price", children: _jsx(ListingPrice, { amount: listing.price, ...(listing.currency !== undefined
-                                    ? { currency: listing.currency }
-                                    : {}) }) }));
-                        /* The buy box. One primary, and which one depends on who is
-                           reading this page. */
-                        const buyBox = (_jsxs(Flex, { wrap: true, gap: spacing[3], align: "flex-start", "data-testid": "listings-detail-actions", children: [owner ? (_jsxs(_Fragment, { children: [_jsx(GatedButton, { gate: editGate, type: "primary", testId: "listings-detail-edit", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: () => {
-                                                props.onEdit?.(props.id);
-                                            }, children: t(LISTINGS_I18N_KEYS.detailEdit) }), _jsx(GatedButton, { gate: actions.archive, danger: true, testId: "listings-detail-take-down", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: actions.doArchive, children: t(LISTINGS_I18N_KEYS.detailTakeDown) })] })) : (_jsx("div", { "data-testid": "listings-detail-contact", children: props.contactSlot ?? _jsx(SlotPlaceholder, { name: "contactSlot" }) })), placement === "buy-box" ? homeActions : null, actionsNode] }));
-                        const actionError = (_jsxs(_Fragment, { children: [actions.error !== undefined && actions.error !== null ? (_jsx(ErrorAlert, { testId: "listings-detail-action-error", thrown: actions.error, variant: "inline" })) : null, _jsx(ErrorAlert, { testId: "listings-detail-favorite-error", thrown: bag.favoriteError, variant: "inline" })] }));
-                        const description = (_jsxs(_Fragment, { children: [_jsx(Typography.Title, { level: 5, children: t(LISTINGS_I18N_KEYS.detailDescription) }), _jsx(Typography.Paragraph, { "data-testid": "listings-detail-description", children: listing.description ?? "" })] }));
-                        /* The DISPLAY envelope, not the edit one: a redacted row keeps
-                           its place in the table and says the seller supplied the value.
-                           `featuresDtoFromDaoList` deliberately drops a stub, because it
-                           is what seeds a composer. */
-                        const specValues = featureValuesForDisplay(asFeatureDaoList(listing.features), props.categoryFeatures !== undefined
-                            ? { categoryFeatures: props.categoryFeatures }
-                            : {});
-                        /* Two spec columns in the split — a grid of whole ROWS, cut by
-                           row count so the category's declaration order survives: the
-                           first (larger) half fills the left list and the page reads
-                           top-to-bottom, left column first, exactly as the one-column
-                           list reads. The label is never a column of its own; see
-                           `<ListingSpecList>` for the shape and why the table went. */
-                        const specFeatures = bag.features.map((view) => view.feature);
-                        const specs = bag.features.length === 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-detail-no-specs", children: t(LISTINGS_I18N_KEYS.detailNoSpecs) })) : split ? (_jsx(ListingSpecColumns, { features: specFeatures, values: specValues })) : (_jsx(ListingSpecList, { features: specFeatures, values: specValues }));
-                        const specsSection = (_jsxs(_Fragment, { children: [_jsx(Typography.Title, { level: 5, children: t(LISTINGS_I18N_KEYS.detailSpecs) }), specs, bag.unreadableFeatures > 0 ? (_jsx(Typography.Text, { type: "warning", "data-testid": "listings-detail-unreadable", children: t(LISTINGS_I18N_KEYS.detailUnreadableFeatures, {
-                                        count: bag.unreadableFeatures,
-                                    }) })) : null] }));
-                        const hasStock = listing.stock_quantity != null;
-                        const hasPlace = listing.location_label !== undefined &&
-                            listing.location_label.length > 0;
-                        // Both rows absent draws an empty table, which the view count used
-                        // to hide by almost always being there. Nothing is nothing.
-                        const meta = !hasStock && !hasPlace ? null : (_jsxs(Descriptions, { size: "small", column: 1, children: [hasStock ? (_jsx(Descriptions.Item, { label: t(LISTINGS_I18N_KEYS.detailStock), children: _jsx("span", { "data-testid": "listings-detail-stock", children: listing.stock_quantity }) })) : null, hasPlace ? (_jsx(Descriptions.Item, { label: t(LISTINGS_I18N_KEYS.composeLocationLabel), children: listing.location_label })) : null] }));
-                        const aside = props.aside !== undefined ? (_jsx("div", { "data-testid": "listings-detail-aside", children: props.aside })) : null;
-                        if (!split) {
-                            // The single column. `"end"` is the order it has always read —
-                            // the host's aside joins where the footer's flow already is;
-                            // `"after-actions"` puts the seller beside the decision to
-                            // contact them, which is where the split layout already has it.
-                            const asideAfterActions = props.asidePlacement === "after-actions";
-                            return (_jsxs(_Fragment, { children: [statusBlocks, gallery, heading, price, buyBox, actionError, asideAfterActions ? aside : null, _jsx(Divider, {}), description, specsSection, meta, asideAfterActions ? null : aside, props.footer, clusterLayer] }));
-                        }
-                        return (_jsxs(_Fragment, { children: [statusBlocks, _jsxs("div", { "data-testid": "listings-detail-split", style: {
-                                        display: "grid",
-                                        // The reading column takes what is left and may shrink
-                                        // (`minmax(0, …)`, or a long unbroken title widens the
-                                        // track past the pane); the buy column's track is fixed —
-                                        // see DETAIL_SPLIT_ASIDE for why it is not a fraction.
-                                        gridTemplateColumns: `minmax(0, 1fr) ${DETAIL_SPLIT_ASIDE}`,
-                                        gap: spacing[5],
-                                        alignItems: "start",
-                                    }, children: [_jsxs(Flex, { vertical: true, gap: spacing[4], children: [gallery, heading, _jsx(Divider, {}), description, specsSection, meta, props.footer] }), _jsxs(Flex, { vertical: true, gap: spacing[3], "data-testid": "listings-detail-buy-column", style: {
-                                                position: "sticky",
-                                                top: props.buyTop ?? spacing[4],
-                                                alignSelf: "start",
-                                            }, children: [price, buyBox, actionError, aside] })] }), clusterLayer] }));
-                    },
-                })] }) }));
+        }, ...(props.mode !== undefined ? { mode: props.mode } : {}), children: [_jsx("style", { href: DETAIL_RHYTHM_STYLE_HREF, precedence: "default", children: detailRhythmCss() }), _jsxs(Flex, { vertical: true, gap: spacing[4], className: DETAIL_RHYTHM_CLASS, "data-testid": "listings-detail", children: [bag.removed ? (_jsx(ErrorAlert, { testId: "listings-detail-removed", message: t(LISTINGS_I18N_KEYS.detailRemoved) })) : null, matchLoad(bag.state, {
+                        loading: () => (_jsx("div", { role: "status", "aria-busy": "true", "aria-label": t(LISTINGS_I18N_KEYS.detailLoading), "data-testid": "listings-detail-loading", "data-stapel-load-state": "loading" })),
+                        // The failed arm, most specific sentence first: removed (the banner
+                        // above already says it) → not found → withdrawn → the generic
+                        // retry. `withdrawn` carries no retry control on purpose — the row
+                        // is gone by its owner's choice, and a retry that can never help is
+                        // what this arm replaces.
+                        failed: (error) => bag.removed ? null : bag.notFound ? (_jsx(EmptyState, { testId: "listings-detail-error", title: t(LISTINGS_I18N_KEYS.detailNotFound) })) : bag.withdrawn ? (_jsx(EmptyState, { testId: "listings-detail-withdrawn", title: t(LISTINGS_I18N_KEYS.detailWithdrawn) })) : (_jsx(ErrorAlert, { testId: "listings-detail-error", thrown: error, message: t(LISTINGS_I18N_KEYS.detailLoadFailed), onRetry: bag.refetch, retryLabel: t(LISTINGS_I18N_KEYS.detailRetry) })),
+                        ready: (listing) => {
+                            /* The moderation axis is the OWNER's business and nobody
+                               else's: a buyer has no use for "changes under review", and
+                               showing a stranger that a listing was refused would leak a
+                               verdict about someone else's content. Rendered above the
+                               split, full width — a verdict is about the PAGE, not about
+                               either of its columns. */
+                            const statusBlocks = (_jsxs(_Fragment, { children: [owner && bag.status !== undefined ? (_jsxs(Flex, { vertical: true, gap: spacing[2], "data-testid": "listings-detail-owner-view", children: [_jsx(ListingStatusBlock, { status: bag.status }), !bag.publiclyVisible ? (_jsx(Typography.Text, { type: "secondary", children: t(LISTINGS_I18N_KEYS.detailOwnerOnlyView) })) : null] })) : null, !owner && !bag.publiclyVisible ? (_jsx(ErrorAlert, { testId: "listings-detail-not-published", message: t(LISTINGS_I18N_KEYS.detailNotPublished), variant: "inline" })) : null] }));
+                            /* THE READER'S TWO ACTIONS, as one cluster — see
+                               `<ListingActions>` and `actionsPlacement`.
+                
+                               The heart is handed IN rather than mounted by the cluster:
+                               this page's favourite is driven by `useListingDetail`'s own
+                               optimistic bag (it holds the whole listing and flips the row it
+                               already has), not by `useFavoriteToggle` against a card row.
+                               One control, two hooks, one geometry.
+                
+                               The OWNER gets the share button and no heart: favouriting your
+                               own listing is not a thing anyone does, and sending somebody
+                               your own listing is the first thing a seller does. */
+                            const favoriteControl = owner ? null : props.blockedReason === "popover" &&
+                                favoriteView.reason !== undefined ? (
+                            /* The cards' third volume, verbatim: nothing standing, the
+                               reason and the door disclosed on the heart. `aria-disabled`
+                               rather than `disabled`, so the disclosure's hover, focus
+                               and tap all arrive — and the click is a safe no-op, because
+                               `toggleFavorite` refuses while the gate is blocked. */
+                            _jsx(GateReasonPopover, { reason: favoriteView.reason, cta: props.signIn, testId: "listings-detail-favorite-reason", signInTestId: "listings-detail-sign-in", children: (bind) => (_jsx(Button, { shape: "circle", "aria-disabled": true, ...bind, className: LISTING_ACTION_CLASS, "aria-label": favoriteLabel, "aria-pressed": bag.isFavorited, icon: heartIcon, "data-testid": "listings-detail-favorite", "data-favorited": String(bag.isFavorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: pressFavorite })) })) : (_jsxs(Flex, { vertical: true, gap: spacing[1], children: [_jsx(GatedControl, { gate: bag.favoriteGate, testId: "listings-detail-favorite-gate", children: (bind) => (_jsx(Button, { shape: "circle", ...bind, className: LISTING_ACTION_CLASS, "aria-label": favoriteLabel, "aria-pressed": bag.isFavorited, icon: heartIcon, "data-testid": "listings-detail-favorite", "data-favorited": String(bag.isFavorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: pressFavorite })) }), bag.favoriteGate.available ? null : (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-detail-favorite-blocked", children: _jsx(SignInLink, { cta: props.signIn, testId: "listings-detail-sign-in" }) }))] }));
+                            const readerActions = (_jsx(ListingActions, { listingId: props.id, favorite: favoriteControl, testId: "listings-detail-reader-actions", placement: placement === "gallery" ? "overlay" : "inline", actions: {
+                                    ...actionsConfig,
+                                    // The owner keeps the share button and loses the heart.
+                                    ...(owner ? { favorite: false } : {}),
+                                }, ...(props.favoriteCount !== undefined && !owner
+                                    ? { favoriteCount: props.favoriteCount }
+                                    : {}), ...(props.shareUrl !== undefined ? { shareUrl: props.shareUrl } : {}), ...(listing.title !== undefined && listing.title !== null
+                                    ? { shareTitle: listing.title }
+                                    : {}), ...(props.sharePrefer !== undefined
+                                    ? { sharePrefer: props.sharePrefer }
+                                    : {}), ...(props.onShared !== undefined ? { onShared: props.onShared } : {}) }));
+                            /* What the PAGE draws where the cluster lives. With the bar in
+                               play that is a slot and not the cluster itself: the cluster is
+                               rendered once into `clusterLayer` below and travels between the
+                               two slots as a DOM node, so it mounts once, holds one
+                               `useFavoriteToggle`, and keeps its element identity across the
+                               move. Without it, the cluster is drawn inline exactly as it has
+                               always been. */
+                            const homeActions = moving
+                                ? movable.slot(CLUSTER_HOME, placement)
+                                : readerActions;
+                            /* The one instance, plus the host's bar around the slot that may
+                               borrow it. Rendered at the end of the page's own flow: the
+                               portal has no position of its own (its content is wherever the
+                               winning slot is), and a bar is `position: fixed` chrome whose
+                               place in the document order is not its place on the screen. */
+                            /* THE PANE'S OWN CONDENSED BAR (`"condensed-top"`).
+                
+                               Mounted only while the title is off screen, which is what makes
+                               the cluster travel at all: the slot inside it is the higher
+                               priority, so appearing borrows the cluster and disappearing
+                               hands it straight back to the heading — the same DOM node, the
+                               same optimistic favourite, no second `useFavoriteToggle`.
+                
+                               The back arrow is absent when the host gave no `onBack`: a
+                               listing opened in a new tab has nothing to go back to. */
+                            const condensedBar = !moving || !ownBar || !titleGone ? null : (_jsxs("div", { className: CONDENSED_BAR_CLASS, "data-testid": "listings-detail-condensed-bar", children: [_jsx("style", { href: CONDENSED_BAR_STYLE_HREF, precedence: "default", children: condensedBarCss() }), props.onBack === undefined ? null : (_jsx(Button, { type: "text", shape: "circle", className: LISTING_ACTION_CLASS, "aria-label": t(LISTINGS_I18N_KEYS.detailBack), icon: _jsx(BackIcon, {}), "data-testid": "listings-detail-back", "data-analytics": "none", "data-analytics-reason": "navigation \u2014 the host owns its own history", onClick: props.onBack })), _jsx("span", { className: CONDENSED_TITLE_CLASS, "data-testid": "listings-detail-condensed-title", children: listing.title ?? "" }), movable.slot(CLUSTER_BAR, "condensed-top")] }));
+                            const clusterLayer = !moving ? null : (_jsxs(_Fragment, { children: [movable.render(readerActions), hostBar && renderBar !== undefined
+                                        ? renderBar(movable.slot(CLUSTER_BAR, "bar"))
+                                        : condensedBar] }));
+                            /* Element-width tiles: the grid decides how many fit, the
+                               photos fill them. */
+                            const galleryBox = (_jsxs("div", { ref: photo.ref, "data-testid": "listings-detail-gallery", "data-gallery-active": String(photo.active), className: LISTINGS_GALLERY_CLASS, "data-gallery-layout": galleryLayout, style: {
+                                    // The page's own edge, per breakpoint — see
+                                    // `DETAIL_GALLERY_GUTTER` (D418).
+                                    gap: DETAIL_GALLERY_GUTTER,
+                                    // The containing block the overlay arm is pinned to. A
+                                    // `relative` with no offsets moves no pixel of what is
+                                    // already in it — the same trick `cardGalleryCss` uses.
+                                    position: "relative",
+                                }, children: [_jsx("style", { href: LISTINGS_GALLERY_STYLE_HREF, precedence: "default", children: detailGalleryCss() }), bag.images.length === 0 ? (_jsx(ListingPhoto, { imageRef: undefined, alt: listing.title ?? String(listing.id) })) : (bag.images.map((ref, index) => (_jsx(ListingPhoto, { imageRef: ref, alt: t(LISTINGS_I18N_KEYS.detailPhotoAlt, {
+                                            index: index + 1,
+                                            total: bag.images.length,
+                                        }) }, ref)))), placement === "gallery" ? homeActions : null] }));
+                            /* "3 of 16" OVER THE STRIP, and it moves with the strip.
+                               `aria-live="polite"` because it changes with no gesture a screen
+                               reader would otherwise report — a finger scrolls the strip
+                               natively and this line is the only announcement of the move.
+                               The grid arm gets none of it: every photograph is on screen at
+                               once there, and "1 of 3" over a grid of three is a control
+                               panel for a picture that needs none.
+                
+                               It is a SIBLING of the strip inside a frame, never a child: in
+                               this arm the strip is the scroll container, and an absolutely
+                               positioned child of a scroller scrolls away with the content it
+                               is supposed to be counting. See `detailGallery.ts`. */
+                            const gallery = !strip ? (galleryBox) : (_jsxs("div", { className: LISTINGS_GALLERY_FRAME_CLASS, children: [galleryBox, _jsx("span", { className: LISTINGS_GALLERY_COUNTER_CLASS, "data-testid": "listings-detail-photo-counter", "aria-live": "polite", children: t(LISTINGS_I18N_KEYS.cardPhotoCounter, {
+                                            index: photo.active + 1,
+                                            total: bag.images.length,
+                                        }) })] }));
+                            const heading = (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "flex-start", justify: "space-between", gap: spacing[3], children: [_jsx(Typography.Title, { level: props.headingLevel ?? 3, ref: titleRef, "data-testid": "listings-detail-title", style: { minWidth: 0, flex: "1 1 auto" }, children: listing.title ?? "" }), placement === "header" ? homeActions : null] }), bag.titleFeatures.length > 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-detail-title-features", children: bag.titleFeatures
+                                            // A hidden value is never part of a title: the server
+                                            // keeps one out of `features_title` entirely, and
+                                            // `formatFeatureValue` refuses a stub besides (it carries
+                                            // no value, so there is nothing to format). The filter is
+                                            // the third belt, and it is here rather than at the
+                                            // formatter's edge because THIS is the line where a
+                                            // leaked identifier would be read out loud.
+                                            .filter((view) => !isRedactedValue(view.value))
+                                            .map((view) => formatSpecValue(view.feature, view.value, { t, locale }))
+                                            .filter((text) => text !== undefined)
+                                            .join(" · ") })) : null, bag.viewCount !== undefined ? (_jsxs(Typography.Text, { type: "secondary", "data-testid": "listings-detail-meta", style: { display: "block" }, children: [t(LISTINGS_I18N_KEYS.detailViews), ":", " ", _jsx("span", { "data-testid": "listings-detail-views", children: bag.viewCount })] })) : null] }));
+                            /* In the split the price leads the buy column at level 2 — the
+                               measured page had it at 22px UNDER the title, smaller than the
+                               thing it prices, which is backwards on the one line a buyer
+                               came to read. In the column it stays the level-4 line it has
+                               always been. */
+                            const price = (_jsx(Typography.Title, { level: split ? 2 : 4, "data-testid": "listings-detail-price", children: _jsx(ListingPrice, { amount: listing.price, ...(listing.currency !== undefined
+                                        ? { currency: listing.currency }
+                                        : {}) }) }));
+                            /* The buy box. One primary, and which one depends on who is
+                               reading this page. */
+                            const buyBox = (_jsxs(Flex, { wrap: true, gap: spacing[3], align: "flex-start", "data-testid": "listings-detail-actions", children: [owner ? (_jsxs(_Fragment, { children: [_jsx(GatedButton, { gate: editGate, type: "primary", testId: "listings-detail-edit", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: () => {
+                                                    props.onEdit?.(props.id);
+                                                }, children: t(LISTINGS_I18N_KEYS.detailEdit) }), _jsx(GatedButton, { gate: actions.archive, danger: true, testId: "listings-detail-take-down", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: actions.doArchive, children: t(LISTINGS_I18N_KEYS.detailTakeDown) })] })) : (_jsxs(Flex, { vertical: true, gap: spacing[2], style: { minWidth: 0 }, children: [quickQuestions.length === 0 ? null : (_jsxs(Flex, { vertical: true, gap: spacing[1], "data-testid": "listings-detail-questions", children: [_jsx(Typography.Text, { type: "secondary", children: t(LISTINGS_I18N_KEYS.detailAskSeller) }), _jsx(Flex, { wrap: true, gap: spacing[2], children: quickQuestions.map((question) => (_jsx(Button, { size: "small", "data-testid": "listings-detail-question", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: () => {
+                                                                props.onQuickQuestion?.(question);
+                                                            }, children: question }, question))) })] })), _jsx("div", { "data-testid": "listings-detail-contact", children: props.contactSlot ?? _jsx(SlotPlaceholder, { name: "contactSlot" }) })] })), placement === "buy-box" ? homeActions : null, actionsNode] }));
+                            const actionError = (_jsxs(_Fragment, { children: [actions.error !== undefined && actions.error !== null ? (_jsx(ErrorAlert, { testId: "listings-detail-action-error", thrown: actions.error, variant: "inline" })) : null, _jsx(ErrorAlert, { testId: "listings-detail-favorite-error", thrown: bag.favoriteError, variant: "inline" })] }));
+                            const description = (_jsxs(_Fragment, { children: [_jsx(Typography.Title, { level: 5, children: t(LISTINGS_I18N_KEYS.detailDescription) }), _jsx(Typography.Paragraph, { "data-testid": "listings-detail-description", children: listing.description ?? "" })] }));
+                            /* The DISPLAY envelope, not the edit one: a redacted row keeps
+                               its place in the table and says the seller supplied the value.
+                               `featuresDtoFromDaoList` deliberately drops a stub, because it
+                               is what seeds a composer. */
+                            const specValues = featureValuesForDisplay(asFeatureDaoList(listing.features), props.categoryFeatures !== undefined
+                                ? { categoryFeatures: props.categoryFeatures }
+                                : {});
+                            /* Two spec columns in the split — a grid of whole ROWS, cut by
+                               row count so the category's declaration order survives: the
+                               first (larger) half fills the left list and the page reads
+                               top-to-bottom, left column first, exactly as the one-column
+                               list reads. The label is never a column of its own; see
+                               `<ListingSpecList>` for the shape and why the table went. */
+                            const specFeatures = bag.features.map((view) => view.feature);
+                            const specs = bag.features.length === 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-detail-no-specs", children: t(LISTINGS_I18N_KEYS.detailNoSpecs) })) : split ? (_jsx(ListingSpecColumns, { features: specFeatures, values: specValues })) : (_jsx(ListingSpecList, { features: specFeatures, values: specValues, ...(props.characteristicsLimit !== undefined
+                                    ? { limit: props.characteristicsLimit }
+                                    : {}) }));
+                            const specsSection = (_jsxs(_Fragment, { children: [_jsx(Typography.Title, { level: 5, children: t(LISTINGS_I18N_KEYS.detailSpecs) }), specs, bag.unreadableFeatures > 0 ? (_jsx(Typography.Text, { type: "warning", "data-testid": "listings-detail-unreadable", children: t(LISTINGS_I18N_KEYS.detailUnreadableFeatures, {
+                                            count: bag.unreadableFeatures,
+                                        }) })) : null] }));
+                            const hasStock = listing.stock_quantity != null;
+                            const hasPlace = listing.location_label !== undefined &&
+                                listing.location_label.length > 0;
+                            // Both rows absent draws an empty table, which the view count used
+                            // to hide by almost always being there. Nothing is nothing.
+                            const meta = !hasStock && !hasPlace ? null : (_jsxs(Descriptions, { size: "small", column: 1, children: [hasStock ? (_jsx(Descriptions.Item, { label: t(LISTINGS_I18N_KEYS.detailStock), children: _jsx("span", { "data-testid": "listings-detail-stock", children: listing.stock_quantity }) })) : null, hasPlace ? (_jsx(Descriptions.Item, { label: t(LISTINGS_I18N_KEYS.composeLocationLabel), children: listing.location_label })) : null] }));
+                            const aside = props.aside !== undefined ? (_jsx("div", { "data-testid": "listings-detail-aside", children: props.aside })) : null;
+                            /* THE TWO "FIND MORE" SECTIONS — see `<ListingRelatedStrip>` for
+                               why the rows arrive from the host and are not read here.
+                
+                               The render prop wins over the rows for each strip separately: a
+                               host may have a catalogue-link widget for "similar" and a plain
+                               list of the seller's other listings, which is exactly the pair
+                               the reference draws. Neither is rendered empty. */
+                            const related = {
+                                listingId: props.id,
+                                ...(listing.category_id !== undefined && listing.category_id !== null
+                                    ? { categoryId: listing.category_id }
+                                    : { categoryId: undefined }),
+                                ownerKey: listing.owner,
+                                axes: bag.titleFeatures,
+                            };
+                            const strips = (_jsxs(_Fragment, { children: [props.renderSimilar !== undefined ? (props.renderSimilar(related)) : (_jsx(ListingRelatedStrip, { heading: t(LISTINGS_I18N_KEYS.detailSimilar), items: props.similar ?? [], testId: "listings-detail-similar", ...(props.similarHref !== undefined
+                                            ? { showAllHref: props.similarHref }
+                                            : {}), ...(props.listingHref !== undefined
+                                            ? { listingHref: props.listingHref }
+                                            : {}), ...(props.linkComponent !== undefined
+                                            ? { linkComponent: props.linkComponent }
+                                            : {}) })), props.renderFromSeller !== undefined ? (props.renderFromSeller(related)) : (_jsx(ListingRelatedStrip, { heading: t(LISTINGS_I18N_KEYS.detailFromSeller), items: props.fromSeller ?? [], testId: "listings-detail-from-seller", ...(props.fromSellerHref !== undefined
+                                            ? { showAllHref: props.fromSellerHref }
+                                            : {}), ...(props.listingHref !== undefined
+                                            ? { listingHref: props.listingHref }
+                                            : {}), ...(props.linkComponent !== undefined
+                                            ? { linkComponent: props.linkComponent }
+                                            : {}) }))] }));
+                            if (!split) {
+                                // The single column. `"end"` is the order it has always read —
+                                // the host's aside joins where the footer's flow already is;
+                                // `"after-actions"` puts the seller beside the decision to
+                                // contact them, which is where the split layout already has it.
+                                const asideAfterActions = props.asidePlacement === "after-actions";
+                                return (_jsxs(_Fragment, { children: [statusBlocks, gallery, heading, price, buyBox, actionError, asideAfterActions ? aside : null, _jsx(Divider, { className: DETAIL_RULE_CLASS }), description, specsSection, meta, strips, asideAfterActions ? null : aside, props.footer, clusterLayer] }));
+                            }
+                            return (_jsxs(_Fragment, { children: [statusBlocks, _jsxs("div", { "data-testid": "listings-detail-split", style: {
+                                            display: "grid",
+                                            // The reading column takes what is left and may shrink
+                                            // (`minmax(0, …)`, or a long unbroken title widens the
+                                            // track past the pane); the buy column's track is fixed —
+                                            // see DETAIL_SPLIT_ASIDE for why it is not a fraction.
+                                            gridTemplateColumns: `minmax(0, 1fr) ${DETAIL_SPLIT_ASIDE}`,
+                                            gap: spacing[5],
+                                            alignItems: "start",
+                                        }, children: [_jsxs(Flex, { vertical: true, gap: spacing[4], className: DETAIL_RHYTHM_CLASS, "data-testid": "listings-detail-reading-column", children: [gallery, heading, _jsx(Divider, { className: DETAIL_RULE_CLASS }), description, specsSection, meta, strips, props.footer] }), _jsxs(Flex, { vertical: true, gap: spacing[3], className: DETAIL_RHYTHM_CLASS, "data-testid": "listings-detail-buy-column", style: {
+                                                    position: "sticky",
+                                                    top: props.buyTop ?? spacing[4],
+                                                    alignSelf: "start",
+                                                }, children: [price, buyBox, actionError, aside] })] }), clusterLayer] }));
+                        },
+                    })] })] }));
 }
 //# sourceMappingURL=ListingDetailPane.js.map