@stapel/listings-react 0.13.0 → 0.14.1

package/dist/default/index.js

@@ -33,7 +33,10 @@
  * that wrapped its own composition in `<ListingsSkinTheme>` imports
  * `<SkinTheme>` from the substrate instead — same props, plus a `surface`.
  */
-export { ListingCard } from "./ListingCard.js";
+export { ListingCard, 
+// The card's row arm, for a container that wants to lay out against the same
+// threshold (and for a test that measures it). See `<ListingCard>`'s header.
+LISTING_CARD_ROW_MIN, LISTING_CARD_ROW_MEDIA, } from "./ListingCard.js";
 export { ListingSerpCard } from "./ListingSerpCard.js";
 export { ListingFeedCard } from "./ListingFeedCard.js";
 export { FeedGrid, FEED_GRID_COLUMNS } from "./FeedGrid.js";
@@ -42,6 +45,6 @@ export { ListingComposerPage, COMPOSER_DETAILS_PLACEMENT, COMPOSER_MEASURE, comp
 export { MyListingsPane } from "./MyListingsPane.js";
 export { FavoritesPane, FAVORITES_CARD_MIN } from "./FavoritesPane.js";
 export { LifecycleTag, ListingStatusBlock, ModerationNote } from "./StatusTags.js";
-export { ListingPhoto, LISTING_PHOTO_ASPECT } from "./ListingPhoto.js";
+export { ListingPhoto, ListingPhotoStrip, LISTING_PHOTO_ASPECT, } from "./ListingPhoto.js";
 export { SignInLink } from "./SignInLink.js";
 //# sourceMappingURL=index.js.map

package/dist/default/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAMvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKvD,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE7F,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAC1B,gBAAgB,EAChB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AASlC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAMvE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EACL,WAAW;AACX,6EAA6E;AAC7E,6EAA6E;AAC7E,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAMvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKvD,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE7F,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAC1B,gBAAgB,EAChB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AASlC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAMvE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/llms.txt

@@ -1,4 +1,4 @@
-# @stapel/listings-react 0.13.0
+# @stapel/listings-react 0.14.1
 
 Headless React flow pair for stapel-listings (contract >=0.10 <0.11) — business + state, zero visual opinion.
 Built on @stapel/core: typed client + StapelApiError envelope, auth token refresh,
@@ -106,14 +106,15 @@ const { tracked } = useTracked();
 ```
 
 ## Demos (defineDemo → manifest.demos; compiled, linted, rendered examples)
-- listings.card → <ListingCard> [default|saved|visitor|no-photo]  demo/ListingCard.demo.tsx
+- listings.card → <ListingCard> [default|saved|visitor|grid cell|list row|no-photo]  demo/ListingCard.demo.tsx
 - listings.composer → <ListingComposerPage> [default|unwired|photos-in-flight|unsupported-type]  demo/ListingComposer.demo.tsx
 - listings.detail → <ListingDetailPane> [default|contact-unwired|owner|not-found]  demo/ListingDetail.demo.tsx
 - listings.favorites → <FavoritesPane> [default|paged|empty|failed|visitor]  demo/Favorites.demo.tsx
 - listings.feed-card → <ListingFeedCard> [default|tile|visitor|wide]  demo/ListingFeedCard.demo.tsx
 - listings.mine → <MyListingsPane> [default|no-editor|taken-down|visitor|failed]  demo/MyListings.demo.tsx
 - listings.parts → <ListingStatusBlock> [default|tags|notes|media|door]  demo/ListingParts.demo.tsx
-- listings.serp-card → <ListingSerpCard> [default|trend|visitor|bare]  demo/ListingSerpCard.demo.tsx
+- listings.photo-strip → <ListingPhotoStrip> [default|single|no photos]  demo/ListingPhotoStrip.demo.tsx
+- listings.serp-card → <ListingSerpCard> [default|trend|visitor|desktop row|bare]  demo/ListingSerpCard.demo.tsx
 Each source file is the canonical usage snippet (open the default variant).
 
 ## Snippets

package/manifest.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-manifest.mjs — do not edit; drift-gated (pnpm gen:manifest:check)",
   "package": "@stapel/listings-react",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "backend": {
     "module": "stapel-listings",
     "contract": ">=0.10 <0.11"
@@ -669,6 +669,8 @@
         "default",
         "saved",
         "visitor",
+        "grid cell",
+        "list row",
         "no-photo"
       ],
       "source": "demo/ListingCard.demo.tsx"
@@ -795,6 +797,22 @@
       ],
       "source": "demo/ListingParts.demo.tsx"
     },
+    {
+      "id": "listings.photo-strip",
+      "title": "Listing photo strip",
+      "description": "Every stored photo of a listing as one swipeable, snapping strip — the gallery <ListingCard> and <ListingSerpCard> both render, always as a SIBLING of the card's anchor. A swipeable strip is a control, a link may not contain one, and a horizontal swipe that ends inside an <a> is a swipe the browser may deliver as a click; that is what made the desktop gallery unreachable on a live deployment while the phone one worked.",
+      "component": "ListingPhotoStrip",
+      "tokens": [
+        "surface-sunken",
+        "text-muted"
+      ],
+      "variants": [
+        "default",
+        "single",
+        "no photos"
+      ],
+      "source": "demo/ListingPhotoStrip.demo.tsx"
+    },
     {
       "id": "listings.serp-card",
       "title": "Listing SERP card",
@@ -811,6 +829,7 @@
         "default",
         "trend",
         "visitor",
+        "desktop row",
         "bare"
       ],
       "source": "demo/ListingSerpCard.demo.tsx"

package/nav-manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "@stapel/listings-react",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "entries": [
     {
       "id": "listings.detail",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stapel/listings-react",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "Headless React pair for stapel-listings: a typed client over the draft twin, the composer that turns a category schema into a submittable listing, and the owner's dashboard. Two independent axes are rendered as two — lifecycle `status` decides visibility and `moderation_status` decides nothing about it, so an edit to a live listing stays live and says 'under review' instead of vanishing. Feature values are drawn and mirrored by @stapel/attributes-react; photos arrive as an injected upload bag whose `refs` ARE `images_draft` and whose `settled` gates the submit; a publish refusal is routed onto the control that caused it by slug. Zero visual opinion in the main entry; an opt-in /default subpath ships the antd skin.",
   "license": "MIT",
   "repository": {
@@ -102,7 +102,7 @@
     "size-limit": "^11.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
-    "@stapel/attributes-react": "^0.7.0",
+    "@stapel/attributes-react": "^0.8.1",
     "@stapel/core": "^0.22.0",
     "@stapel/currencies-react": "^0.3.0",
     "@stapel/image": "^0.4.2",

package/src/analytics/generated/events.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-events.mjs — do not edit; drift-gated (pnpm gen:events:check)",
   "package": "@stapel/listings-react",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "defined": [],
   "flows": []
 }

package/src/default/ListingCard.tsx

@@ -16,9 +16,9 @@
  * Nothing on a classified works that way: the card IS the target, and the only
  * separate control on it is the favourite heart.
  *
- * So the photo, the price, the title, the badges and the location now live
- * INSIDE one anchor that covers the whole card, and `listings.card.open` is
- * retired rather than left orphaned in three catalogues.
+ * So the price, the title, the badges and the location live INSIDE one anchor
+ * that covers the whole card, and `listings.card.open` is retired rather than
+ * left orphaned in three catalogues.
  *
  * What that must not cost is the anchor semantics won earlier: this is a real
  * `<a href>`, so middle-click opens a tab, ⌘-click opens a tab, "copy link
@@ -44,6 +44,29 @@
  * A listing with no title falls back to `listings.card.untitled`, because a
  * link announced as nothing is worse than one announced as untitled.
  *
+ * ── The photos moved OUT of the anchor, and the card became a ROW ─────────
+ *
+ * Both from the same measurement of the live desktop SERP, in list view:
+ * **one card per screen** — 974×835, of which the photograph was 974×731 —
+ * showing a SINGLE photo, with no carousel, and that photo inside the anchor.
+ * The phone card beside it was correct on every count.
+ *
+ * The photo used to be inside the anchor on the argument that a still `<img>`
+ * in a link is just a bigger link, which is true and stops being true the
+ * moment there is more than one photo: a swipeable strip is a control, a link
+ * may not contain one, and a horizontal swipe that ends inside an `<a>` is a
+ * swipe the browser may deliver as a click. So the strip is a SIBLING of the
+ * anchor — the arrangement `<ListingSerpCard>` has always used, and the reason
+ * the phone gallery works — and the anchor still covers everything a person
+ * READS. `<ListingPhotoStrip>` is the one gallery both cards draw.
+ *
+ * The row is the other half. A grid card handed a full-page-wide track keeps
+ * its shape and becomes a banner; this card now asks its OWN width
+ * (`@container`, see {@link LISTING_CARD_ROW_MIN}) and lays the photo beside
+ * the text above 560px. In a grid its column is never that wide, so nothing
+ * about the grid changes; in a list several rows fit a screen, which is the
+ * only reason a list exists.
+ *
  * ── Why the heart is a row under the card and not floating on the photo ────
  *
  * Because for a signed-out visitor — which is most of the traffic a storefront
@@ -88,7 +111,7 @@ import { useFavoriteToggle } from "../headless/Favorites.js";
 import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
 import { HeartIcon } from "./icons.js";
 import { SignInLink } from "./SignInLink.js";
-import { ListingPhoto } from "./ListingPhoto.js";
+import { ListingPhotoStrip } from "./ListingPhoto.js";
 import { ListingPrice } from "./ListingPrice.js";
 import type { CategoryFeaturesProp, ThemeModeProp } from "./types.js";
 
@@ -151,10 +174,45 @@ export type ListingCardBlockedReason = "text" | "line";
 
 /** The class the whole-card target carries, for {@link cardTargetCss}. */
 export const CARD_TARGET_CLASS = "stapel-listing-card-target";
+/** The class the card's OUTER box carries — the size container the row layout
+ * is asked about. A container cannot answer a query about itself, which is why
+ * this is a wrapper and not the frame. */
+export const CARD_QUERY_CLASS = "stapel-listing-card-q";
+/** The class the media/reading frame carries. */
+export const CARD_FRAME_CLASS = "stapel-listing-card-frame";
+/** The class the photo strip's box carries. */
+export const CARD_MEDIA_CLASS = "stapel-listing-card-media";
+/** The class the reading column carries. */
+export const CARD_MAIN_CLASS = "stapel-listing-card-main";
+/** Added to the frame by a card whose media is FULL-BLEED when stacked
+ * (`<ListingCard>`), so the row arm gets the inset the stacked arm does not. */
+export const CARD_BLEED_CLASS = "stapel-listing-card-bleed";
 
 /** The `href` the hoisted card stylesheet is deduplicated by. */
 export const CARD_TARGET_STYLE_HREF = "stapel-listings-card-target";
 
+/**
+ * The card's own inline size above which it stops being a card and becomes a
+ * ROW.
+ *
+ * Measured on the live desktop SERP in "list" view: **one card per screen**,
+ * 974×835, of which the photograph was 974×731 — a grid card handed a
+ * full-page track and asked to keep its shape. A shopper comparing offers got
+ * one offer per scroll.
+ *
+ * 560px is the width at which a 4:3 photo stops being a banner: below it a
+ * two-column row leaves the text nothing, above it the photo is a thumbnail
+ * beside a paragraph. A `@container` query rather than a media query because
+ * the card does not know the viewport and must not care: the same card is a
+ * grid cell 300px wide on a 1440px screen and a full-width row on a 700px one,
+ * and only its OWN width decides which it is.
+ */
+export const LISTING_CARD_ROW_MIN = 560;
+
+/** The photo's width in the row arm. Wide enough to read the goods, narrow
+ * enough that several rows fit a screen — the whole point of a list. */
+export const LISTING_CARD_ROW_MEDIA = 260;
+
 /**
  * The one rule an inline style cannot express: `:focus-visible`.
  *
@@ -168,9 +226,33 @@ export const CARD_TARGET_STYLE_HREF = "stapel-listings-card-target";
  * design system's ROLE catalogue and this is a component's private plumbing.
  */
 export function cardTargetCss(): string {
+  const q = `.${CARD_QUERY_CLASS}`;
+  const frame = `.${CARD_FRAME_CLASS}`;
+  const media = `.${CARD_MEDIA_CLASS}`;
+  const main = `.${CARD_MAIN_CLASS}`;
+  const bleed = `.${CARD_BLEED_CLASS}`;
   return [
     `.${CARD_TARGET_CLASS}{display:block;color:inherit;text-decoration:none}`,
     `.${CARD_TARGET_CLASS}:focus-visible{outline:2px solid var(--listing-card-focus);outline-offset:2px}`,
+    // The card asks about its OWN width, not the window's — see
+    // `LISTING_CARD_ROW_MIN`.
+    `${q}{container-type:inline-size}`,
+    `${frame}{display:flex;flex-direction:column;min-inline-size:0}`,
+    `${media}{min-inline-size:0}`,
+    `${main}{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0}`,
+    // The row arm. `align-items:flex-start` so a short text column does not
+    // stretch the photo, and a fixed media basis so the picture cannot grow
+    // into the 974px banner the live SERP was measured at.
+    `@container (min-width:${String(LISTING_CARD_ROW_MIN)}px){` +
+      `${frame}{flex-direction:row;align-items:flex-start}` +
+      `${media}{flex:0 0 ${String(LISTING_CARD_ROW_MEDIA)}px;` +
+      `max-inline-size:${String(LISTING_CARD_ROW_MEDIA)}px}` +
+      // A full-bleed stacked card has no padding of its own to give the row
+      // arm, so the row arm states its own; the reading column's padding is
+      // what separates the two.
+      `${bleed}{padding-block:var(--listing-card-inset);` +
+      `padding-inline-start:var(--listing-card-inset)}` +
+      `}`,
   ].join("");
 }
 
@@ -343,8 +425,9 @@ export function ListingCard(props: ListingCardProps): ReactElement {
     title.length > 0 ? title : t(LISTINGS_I18N_KEYS.cardUntitled);
 
   /**
-   * Everything a person reads on the card, in the order a classified reads it:
-   * photo, price, title, the seller's own spec line, the badges, the place.
+   * Everything a person READS on the card, in the order a classified reads it:
+   * price, title, the seller's own spec line, the badges, the place. The
+   * photos are not here — they are the strip beside this, outside the anchor.
    *
    * The search projection carries `title`, `price`, `currency`,
    * `location_label`, `image` and `published_at` and NO feature badges — so
@@ -353,57 +436,51 @@ export function ListingCard(props: ListingCardProps): ReactElement {
    * they are the two fields a result always has.
    */
   const content = (
-    <>
-      <ListingPhoto
-        imageRef={listing.images?.[0]}
-        alt={title.length > 0 ? title : String(listing.id)}
-      />
-      <Flex
-        vertical
-        gap={spacing[1]}
-        style={{ minWidth: 0, padding: token.paddingSM }}
-      >
-        {props.badge}
-
-        <Typography.Text strong data-testid="listings-card-price">
-          <ListingPrice
-            amount={listing.price}
-            {...(listing.currency !== undefined ? { currency: listing.currency } : {})}
-          />
-        </Typography.Text>
+    <Flex
+      vertical
+      gap={spacing[1]}
+      style={{ minWidth: 0, padding: token.paddingSM }}
+    >
+      {props.badge}
 
-        <Typography.Text ellipsis data-testid="listings-card-title">
-          {title}
-        </Typography.Text>
+      <Typography.Text strong data-testid="listings-card-price">
+        <ListingPrice
+          amount={listing.price}
+          {...(listing.currency !== undefined ? { currency: listing.currency } : {})}
+        />
+      </Typography.Text>
 
-        {/* The title features are a stored projection too — the seller's
-            "1.5 TB, black" line, already ordered by the server. */}
-        {titleDaos.length > 0 ? (
-          <Typography.Text type="secondary" ellipsis>
-            <FeatureBadges
-              features={featuresFromDaoList(titleDaos, copy).map(
-                (view) => view.feature
-              )}
-              values={featuresDtoFromDaoList(titleDaos)}
-            />
-          </Typography.Text>
-        ) : null}
+      <Typography.Text ellipsis data-testid="listings-card-title">
+        {title}
+      </Typography.Text>
 
-        {badgeFeatures.length > 0 ? (
+      {/* The title features are a stored projection too — the seller's
+          "1.5 TB, black" line, already ordered by the server. */}
+      {titleDaos.length > 0 ? (
+        <Typography.Text type="secondary" ellipsis>
           <FeatureBadges
-            features={badgeFeatures.map((view) => view.feature)}
-            values={badgeValues}
+            features={featuresFromDaoList(titleDaos, copy).map(
+              (view) => view.feature
+            )}
+            values={featuresDtoFromDaoList(titleDaos)}
           />
-        ) : null}
+        </Typography.Text>
+      ) : null}
+
+      {badgeFeatures.length > 0 ? (
+        <FeatureBadges
+          features={badgeFeatures.map((view) => view.feature)}
+          values={badgeValues}
+        />
+      ) : null}
 
-        {listing.location_label !== undefined &&
-        listing.location_label.length > 0 ? (
-          <Typography.Text type="secondary" data-testid="listings-card-location">
-            {listing.location_label}
-          </Typography.Text>
-        ) : null}
-      </Flex>
-    </>
+      {listing.location_label !== undefined &&
+      listing.location_label.length > 0 ? (
+        <Typography.Text type="secondary" data-testid="listings-card-location">
+          {listing.location_label}
+        </Typography.Text>
+      ) : null}
+    </Flex>
   );
 
   return (
@@ -421,70 +498,92 @@ export function ListingCard(props: ListingCardProps): ReactElement {
         {...(status !== undefined
           ? { "data-listing-status": status.status }
           : {})}
-        // The body's own padding is zero because the ANCHOR fills the card:
-        // padding outside it would be a strip of card that looks pressable and
-        // is not. The text block inside the anchor carries the same padding
-        // back, from the same token.
+        // The body's own padding is zero because the frame fills the card and
+        // the photo runs edge to edge when it is stacked: padding here would
+        // be a strip of card around a picture. The text block inside the
+        // anchor carries the same padding back, from the same token, and the
+        // row arm states its own inset (`--listing-card-inset`).
         styles={{ body: { minWidth: 0, padding: 0 } }}
-        style={{ ["--listing-card-focus" as string]: token.colorPrimary }}
+        style={{
+          ["--listing-card-focus" as string]: token.colorPrimary,
+          ["--listing-card-inset" as string]: `${String(token.paddingSM)}px`,
+        }}
       >
-        <CardTarget {...props} listingId={listing.id} label={targetLabel}>
-          {content}
-        </CardTarget>
+        <div className={CARD_QUERY_CLASS}>
+          <div className={`${CARD_FRAME_CLASS} ${CARD_BLEED_CLASS}`}>
+            {/* The photos, OUTSIDE the anchor — see `<ListingPhotoStrip>`.
+                A swipeable strip is a control, and a link may not contain
+                one; the anchor still covers everything a person reads. */}
+            <div className={CARD_MEDIA_CLASS}>
+              <ListingPhotoStrip
+                images={listing.images ?? []}
+                title={title.length > 0 ? title : String(listing.id)}
+                testId="listings-card-photos"
+              />
+            </div>
 
-        {/* The heart, and only the heart, lives OUTSIDE the anchor: a button
-            inside a link is neither valid HTML nor operable. Its refusal gets
-            a line of its own here, which is the whole reason it is a row under
-            the card rather than a glyph floating on the photograph. */}
-        {props.showFavorite === false ? null : (
-          <div
-            style={{
-              paddingInline: token.paddingSM,
-              paddingBlockEnd: token.paddingSM,
-            }}
-          >
-            <GatedControl
-              gate={favorite.gate}
-              testId="listings-card-actions"
-              style={{ width: "100%" }}
-            >
-              {(bind) => (
-                <Flex justify="flex-end" style={{ width: "100%" }}>
-                  <Button
-                    disabled={bind.disabled}
-                    data-disabled-reason="the enclosing <GatedControl> renders the gate's reason beside this button"
-                    {...(bind["aria-describedby"] !== undefined
-                      ? { "aria-describedby": bind["aria-describedby"] }
-                      : {})}
-                    aria-label={favoriteLabel}
-                    aria-pressed={favorite.favorited}
-                    data-testid="listings-card-favorite"
-                    data-favorited={String(favorite.favorited)}
-                    data-analytics="none"
-                    data-analytics-reason="business action — host app wraps with its own tracked()"
-                    onClick={favorite.toggle}
-                    icon={<HeartIcon filled={favorite.favorited} />}
-                  />
-                </Flex>
-              )}
-            </GatedControl>
+            <div className={CARD_MAIN_CLASS}>
+              <CardTarget {...props} listingId={listing.id} label={targetLabel}>
+                {content}
+              </CardTarget>
 
-            {/* The door. `GatedControl` above already prints the reason and
-                wires `aria-describedby` to it; what it cannot know is WHERE a
-                visitor signs in, which is the container's business and arrives
-                as `signIn`. On a grid `blockedReason="line"` drops the door and
-                keeps the sentence — twenty-four doors to one place is not
-                twenty-four pieces of help. */}
-            {favoriteGate.reason === undefined || blockedReason === "line" ? null : (
-              <Typography.Text
-                type="secondary"
-                data-testid="listings-card-favorite-blocked"
-              >
-                <SignInLink cta={props.signIn} testId="listings-card-sign-in" />
-              </Typography.Text>
-            )}
+              {/* The heart, and only the heart, is a separate CONTROL outside the
+                  anchor: a button inside a link is neither valid HTML nor operable.
+                  Its refusal gets a line of its own here, which is the whole reason
+                  it is a row under the card rather than a glyph floating on the
+                  photograph. */}
+              {props.showFavorite === false ? null : (
+                <div
+                  style={{
+                    paddingInline: token.paddingSM,
+                    paddingBlockEnd: token.paddingSM,
+                  }}
+                >
+                  <GatedControl
+                    gate={favorite.gate}
+                    testId="listings-card-actions"
+                    style={{ width: "100%" }}
+                  >
+                    {(bind) => (
+                      <Flex justify="flex-end" style={{ width: "100%" }}>
+                        <Button
+                          disabled={bind.disabled}
+                          data-disabled-reason="the enclosing <GatedControl> renders the gate's reason beside this button"
+                          {...(bind["aria-describedby"] !== undefined
+                            ? { "aria-describedby": bind["aria-describedby"] }
+                            : {})}
+                          aria-label={favoriteLabel}
+                          aria-pressed={favorite.favorited}
+                          data-testid="listings-card-favorite"
+                          data-favorited={String(favorite.favorited)}
+                          data-analytics="none"
+                          data-analytics-reason="business action — host app wraps with its own tracked()"
+                          onClick={favorite.toggle}
+                          icon={<HeartIcon filled={favorite.favorited} />}
+                        />
+                      </Flex>
+                    )}
+                  </GatedControl>
+
+                  {/* The door. `GatedControl` above already prints the reason and
+                      wires `aria-describedby` to it; what it cannot know is WHERE a
+                      visitor signs in, which is the container's business and arrives
+                      as `signIn`. On a grid `blockedReason="line"` drops the door and
+                      keeps the sentence — twenty-four doors to one place is not
+                      twenty-four pieces of help. */}
+                  {favoriteGate.reason === undefined || blockedReason === "line" ? null : (
+                    <Typography.Text
+                      type="secondary"
+                      data-testid="listings-card-favorite-blocked"
+                    >
+                      <SignInLink cta={props.signIn} testId="listings-card-sign-in" />
+                    </Typography.Text>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
-        )}
+        </div>
       </Card>
     </SkinTheme>
   );

package/src/default/ListingPhoto.tsx

@@ -25,6 +25,7 @@ import type { CSSProperties, ReactElement } from "react";
 import { useMemo } from "react";
 import { Typography, theme as antdTheme } from "antd";
 import { Image } from "@stapel/image";
+import { SkinCarousel } from "@stapel/tokens-antd/skin";
 import { useT } from "@stapel/core";
 import { radii, spacing } from "@stapel/tokens";
 import { useListingsRuntime } from "../model/context.js";
@@ -133,3 +134,66 @@ export function ListingPhoto(props: ListingPhotoProps): ReactElement {
     />
   );
 }
+
+/**
+ * A listing's photos as ONE swipeable strip — the shape every card surface in
+ * this pair uses, so there is one gallery and not three.
+ *
+ * ── Why the strip is never inside a card's anchor ──────────────────────────
+ *
+ * A `<SkinCarousel>` is a scroll container with its own tab stop, and a
+ * horizontal swipe that ends inside an `<a>` is a swipe the browser may
+ * deliver as a click: every attempt to look at photo two would open the
+ * listing. A link may not contain a control, and a swipeable strip is a
+ * control. So a card renders this as a SIBLING of its anchor and keeps the
+ * anchor around everything a person READS — which is the arrangement
+ * `<ListingSerpCard>` has shipped since it existed, and the one the live phone
+ * SERP was measured correct on while the desktop card (a still `<img>` inside
+ * the anchor, one photo, no dots) was not.
+ *
+ * A listing with no photos still gets one slide, so a row's height does not
+ * depend on whether a seller uploaded anything, and a ONE-photo strip gets
+ * neither peek nor dots: the sliver of a next slide is an affordance for
+ * something that is there.
+ */
+export function ListingPhotoStrip(props: {
+  /** The stored references, in the seller's order. */
+  readonly images: readonly string[];
+  /** The listing's title — the fallback alt for a single photo. */
+  readonly title: string;
+  /** The surface's own test id, so a screen holding two kinds of card does
+   * not hand a test two elements under one name. */
+  readonly testId: string;
+}): ReactElement {
+  const t = useT();
+  const { images, title } = props;
+  const many = images.length > 1;
+  return (
+    <SkinCarousel
+      label={t(LISTINGS_I18N_KEYS.cardPhotos)}
+      aspectRatio={LISTING_PHOTO_ASPECT}
+      peek={many}
+      dots={many}
+      data-testid={props.testId}
+    >
+      {images.length === 0 ? (
+        <ListingPhoto imageRef={undefined} alt={title} />
+      ) : (
+        images.map((reference, index) => (
+          <ListingPhoto
+            key={reference}
+            imageRef={reference}
+            alt={
+              many
+                ? t(LISTINGS_I18N_KEYS.detailPhotoAlt, {
+                    index: index + 1,
+                    total: images.length,
+                  })
+                : title
+            }
+          />
+        ))
+      )}
+    </SkinCarousel>
+  );
+}