@stapel/listings-react 0.12.0 → 0.14.0

package/src/default/ListingComposerPage.tsx

@@ -50,21 +50,44 @@
  * do not import each other; the container is the seam. A library that picked
  * one would pick it for every host.
  *
- * ── On a narrow form the CHARACTERISTICS come before the photos ────────────
- *
- * The details of the chosen category are the questions only that category
- * asks, and they are the reason a category is chosen at all. On a wide form
- * they can sit after the photos, because the whole form is one screen. On a
- * 390px one they cannot: measured on a live classified deployment, choosing
- * Mobile phones grew the page to 7292px and put the first attribute control at
- * y=1596 — nearly two viewports below the fold, behind a ~700px photo dropzone
- * — while the footer said "10 required details not filled in" with none of
- * them on screen. So on a narrow form the section moves directly under the
- * category that produced it, and the photo dropzone follows it.
- *
- * The measurement is the FORM's own width (`useElementWidth`, the fleet's one
- * observer), not the viewport's: a composer is not a viewport, and a viewport
- * query would call a 360px pane on a desktop "wide".
+ * ── The SECTION ORDER is this component's, and it is not a prop ────────────
+ *
+ * One order, at every width:
+ *
+ *   category → title → description → price → currency → where → photos →
+ *   the category's characteristics → the listing's own options
+ *
+ * The category comes first because everything after it depends on the choice.
+ * Then the five questions a seller came to answer — what it is, what it says,
+ * what it costs, where it is, what it looks like — and only then the questions
+ * the CATEGORY asks.
+ *
+ * This used to be two orders chosen by the form's width, and the narrow one
+ * put the characteristics directly under the category. The reason was real:
+ * measured on a live classified deployment, Mobile phones put the first
+ * attribute control at y=1596, two viewports below the fold, while the footer
+ * said "10 required details not filled in" with none of them on screen. The
+ * fix was not: the same leaf carries 32 imported fields, so on the next
+ * measurement of the same form the seller was asked for the parcel's weight,
+ * its length and "what the goods are measured in" BEFORE the title — title
+ * y=5575, price y=5871, photos y=6245, of a 7308px form. A composer that asks
+ * about postage before it asks what is being sold has no funnel left.
+ *
+ * So the discoverability problem is solved where it actually lives, and by two
+ * things that do not move the questions around:
+ *
+ *  - the count of unfilled details is a CONTROL that goes to the first of them
+ *    (`listings-composer-goto-missing`, below), so "10 required details" is
+ *    never a dead end wherever the region sits;
+ *  - the region itself is short, because `groupCollapse="auto"` opens the
+ *    groups that ask something required and leaves the plumbing (delivery
+ *    dimensions, wholesale terms) closed under its own heading.
+ *
+ * `detailsPlacement` is therefore gone as a decision — `data-placement` stays
+ * on the region as a constant, because an e2e that measured the regression
+ * needs something to read that is not a pixel count. A host that wants a
+ * different order does not want this page; it wants `<FeatureFields>` and its
+ * own form, which is exactly why that component is exported separately.
  *
  * ── Every blocked control says which of six reasons it is ──────────────────
  *
@@ -76,7 +99,6 @@
  * would be told, and `<GatedButton>` renders the reason beside the button —
  * never a grey rectangle, never a hover.
  */
-import { useRef } from "react";
 import type { ComponentType, ReactElement, ReactNode } from "react";
 import {
   Alert,
@@ -94,7 +116,6 @@ import {
   GatedButton,
   PaneGate,
   SkinTheme,
-  useElementWidth,
 } from "@stapel/tokens-antd/skin";
 import {
   SlotPlaceholder,
@@ -104,7 +125,7 @@ import {
   useI18n,
   useT,
 } from "@stapel/core";
-import { breakpoints, spacing } from "@stapel/tokens";
+import { spacing } from "@stapel/tokens";
 import type { FeatureDef } from "@stapel/attributes-react";
 import {
   BUILTIN_VALUE_EDITOR_TYPES,
@@ -135,16 +156,14 @@ import type { ThemeModeProp } from "./types.js";
 export const COMPOSER_MEASURE = "44rem";
 
 /**
- * Below this FORM width the composer is a one-thumb column, and the order of
- * its sections has to change — see {@link ListingComposerPage}'s header on why
- * the characteristics move up.
- *
- * The `tablet` breakpoint, which is what "narrow" means everywhere else in the
- * skin, measured against the form's OWN width and never the viewport's (§83).
- * A composer drawn in a 360px settings pane on a 1440px desktop is narrow; a
- * viewport query would call it wide and bury its questions.
+ * What `data-placement` says on the characteristics region.
+ *
+ * A constant, and deliberately so: the order is the composer's and does not
+ * depend on the width any more (see the header). The attribute stays because
+ * an e2e suite measured the regression through it and needs a reading that is
+ * not a pixel count.
  */
-export const COMPOSER_STACKED_BELOW: number = breakpoints.tablet;
+export const COMPOSER_DETAILS_PLACEMENT = "after-core-fields";
 
 /**
  * The DOM id of the control that answers one of the composer's own fields —
@@ -167,11 +186,18 @@ const FOCUSABLE =
   "input,select,textarea,button,[href],[tabindex]:not([tabindex='-1'])";
 
 /**
- * Put the person in front of one field: bring it into view, and focus what
- * they are meant to answer.
+ * Put the person in front of one field: open whatever it is folded inside,
+ * bring it into view, and focus what they are meant to answer.
+ *
+ * The disclosure step is the one that is easy to forget. A characteristic
+ * lives in a `<details>` section that may be closed (`groupCollapse="auto"`),
+ * and scrolling to a control inside a closed disclosure scrolls to nothing —
+ * the "take me to the first empty field" button would report success and move
+ * the page nowhere. Any depth of nesting is opened, because the answer to
+ * "where is it" must not depend on how the section was drawn.
  *
- * Both halves are guarded rather than assumed. `scrollIntoView` does not exist
- * in every environment this renders in (jsdom, older embedded engines), and a
+ * The rest is guarded rather than assumed. `scrollIntoView` does not exist in
+ * every environment this renders in (jsdom, older embedded engines), and a
  * field whose control came from a slot may have nothing focusable in it at
  * all — in which case scrolling to it is still the whole of the help that can
  * honestly be given.
@@ -180,6 +206,13 @@ function revealField(id: string): void {
   if (typeof document === "undefined") return;
   const anchor = document.getElementById(id);
   if (anchor === null) return;
+  for (
+    let folded = anchor.closest("details");
+    folded !== null;
+    folded = folded.parentElement?.closest("details") ?? null
+  ) {
+    folded.open = true;
+  }
   if (typeof anchor.scrollIntoView === "function") {
     anchor.scrollIntoView({ block: "center", behavior: "smooth" });
   }
@@ -483,15 +516,6 @@ export function ListingComposerPage(
   );
 
   const LocationPicker = props.locationPicker;
-  // The FORM's width, which is what decides the section order — see the
-  // header. `?? false` because an unmeasured box is not a narrow one (the rule
-  // `useElementWidth` states for every caller): the wide order is the one that
-  // reflows gracefully, so it is what the first frame draws.
-  const form = useRef<HTMLDivElement>(null);
-  const { below } = useElementWidth(form, {
-    thresholds: { stacked: COMPOSER_STACKED_BELOW },
-  });
-  const stacked = below.stacked ?? false;
 
   /**
    * The characteristics of the chosen category — built once and rendered in
@@ -506,7 +530,7 @@ export function ListingComposerPage(
   const details = (
     <div
       data-testid="listings-composer-details"
-      data-placement={stacked ? "after-category" : "after-photos"}
+      data-placement={COMPOSER_DETAILS_PLACEMENT}
     >
       <Divider />
       <Typography.Title level={5}>
@@ -539,6 +563,11 @@ export function ListingComposerPage(
           errors={bag.fieldErrors}
           disabled={bag.publishing}
           onChange={bag.setFeature}
+          // An imported leaf is mostly plumbing: 32 fields across seven
+          // headings, four of them parcel dimensions. Open what is required or
+          // already answered, leave the rest one tap away under its own
+          // heading — see `FeatureGroupCollapse`.
+          groupCollapse="auto"
         />
       )}
     </div>
@@ -603,11 +632,6 @@ export function ListingComposerPage(
           />
         ) : null}
 
-        {/* The measured box is the FORM, so a host that renders this page in
-            a narrow pane gets the narrow order without the viewport agreeing.
-            A plain block wrapper: antd's `Form` forwards its ref to the form
-            INSTANCE, not to a node. */}
-        <div ref={form}>
         <Form layout="vertical" data-testid="listings-composer-form">
           <SlotField
             label={t(LISTINGS_I18N_KEYS.composeCategory)}
@@ -634,10 +658,6 @@ export function ListingComposerPage(
             />
           ) : null}
 
-          {/* Narrow: the category's own questions, directly under the choice
-              that produced them and above the photo dropzone. */}
-          {stacked ? details : null}
-
           <Form.Item
             label={t(LISTINGS_I18N_KEYS.composeTitleLabel)}
             {...errorOf(TITLE_FIELD)}
@@ -788,9 +808,9 @@ export function ListingComposerPage(
             </>
           ) : null}
 
-          {/* Wide: the whole form is one screen, so the details keep their
-              place after the photos. */}
-          {stacked ? null : details}
+          {/* The category's own questions, after the five the seller came to
+              answer. See the header on why this is one order and not two. */}
+          {details}
 
           <Divider />
 
@@ -832,7 +852,6 @@ export function ListingComposerPage(
             </Checkbox>
           </Form.Item>
         </Form>
-        </div>
 
         {bag.refusal?.kind === "invalid_draft" ? (
           <ErrorAlert

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>
+  );
+}

package/src/default/ListingSerpCard.tsx

@@ -34,6 +34,17 @@
  * covers the four things that identify the listing — price, title, specs,
  * badges — so the card opens from everything a person reads.
  *
+ * ── One column on a phone, one ROW on a desktop ───────────────────────────
+ *
+ * The card is still one per row; what changes with width is where the photo
+ * sits. Full-bleed above the text is right at 390px and wrong at 974px, where
+ * it makes the picture the whole screen and the offer a footnote — measured on
+ * the live desktop SERP as one card per scroll. Above
+ * {@link LISTING_CARD_ROW_MIN} the strip moves BESIDE the text at a fixed
+ * width, from the card's own `@container` query rather than a viewport
+ * breakpoint: this card knows how wide it is and has no business knowing how
+ * wide the window is.
+ *
  * ── The two slots, and what they are honestly for ─────────────────────────
  *
  * `sellerSlot` is the seller's name and rating. It is a SLOT because a rating
@@ -64,7 +75,7 @@
  */
 import type { CSSProperties, ReactElement, ReactNode } from "react";
 import { Card, Flex, Typography, theme as antdTheme } from "antd";
-import { SkinCarousel, SkinTheme } from "@stapel/tokens-antd/skin";
+import { SkinTheme } from "@stapel/tokens-antd/skin";
 import { useT } from "@stapel/core";
 import { fontSize, spacing } from "@stapel/tokens";
 import { FeatureBadges } from "@stapel/attributes-react/default";
@@ -80,12 +91,16 @@ import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
 import { PriceTrendIcon } from "./icons.js";
 import { FavoriteHeart } from "./favorite.js";
 import {
+  CARD_FRAME_CLASS,
+  CARD_MAIN_CLASS,
+  CARD_MEDIA_CLASS,
+  CARD_QUERY_CLASS,
   CARD_TARGET_STYLE_HREF,
   CardTarget,
   cardTargetCss,
 } from "./ListingCard.js";
 import type { ListingCardOpenProps } from "./ListingCard.js";
-import { LISTING_PHOTO_ASPECT, ListingPhoto } from "./ListingPhoto.js";
+import { ListingPhotoStrip } from "./ListingPhoto.js";
 import { ListingPrice } from "./ListingPrice.js";
 import type { CategoryFeaturesProp, ThemeModeProp } from "./types.js";
 
@@ -177,12 +192,6 @@ export function ListingSerpCard(props: ListingSerpCardProps): ReactElement {
   const currency =
     listing.currency !== undefined ? { currency: listing.currency } : {};
 
-  // A one-photo strip gets neither a peek nor dots: the sliver of a next slide
-  // is an affordance for something that is there, and on a single photo it is
-  // just a strip of dead space at the trailing edge (`SkinCarousel` says the
-  // same thing from its own side).
-  const many = photos.length > 1;
-
   const rail =
     props.actionsRail !== undefined || props.showFavorite !== false ? (
       <Flex
@@ -221,144 +230,130 @@ export function ListingSerpCard(props: ListingSerpCardProps): ReactElement {
         styles={{ body: { minWidth: 0, padding: token.paddingSM } }}
         style={{ ["--listing-card-focus" as string]: token.colorPrimary }}
       >
-        <Flex vertical gap={spacing[3]}>
-          {/* The strip is a SIBLING of the anchor, never a child — see the
-              file header. A listing with no photos still gets one slide, so
-              the card's height does not depend on whether a seller uploaded
-              anything. */}
-          <SkinCarousel
-            label={t(LISTINGS_I18N_KEYS.cardPhotos)}
-            aspectRatio={LISTING_PHOTO_ASPECT}
-            peek={many}
-            dots={many}
-            data-testid="listings-serp-photos"
-          >
-            {photos.length === 0 ? (
-              <ListingPhoto
-                imageRef={undefined}
-                alt={title.length > 0 ? title : String(listing.id)}
+        <div className={CARD_QUERY_CLASS}>
+          <div className={CARD_FRAME_CLASS} style={{ gap: spacing[3] }}>
+            {/* The strip is a SIBLING of the anchor, never a child — see the
+                file header. A listing with no photos still gets one slide, so
+                the card's height does not depend on whether a seller uploaded
+                anything. */}
+            <div className={CARD_MEDIA_CLASS}>
+              <ListingPhotoStrip
+                images={photos}
+                title={title.length > 0 ? title : String(listing.id)}
+                testId="listings-serp-photos"
               />
-            ) : (
-              photos.map((reference, index) => (
-                <ListingPhoto
-                  key={reference}
-                  imageRef={reference}
-                  alt={t(LISTINGS_I18N_KEYS.detailPhotoAlt, {
-                    index: index + 1,
-                    total: photos.length,
-                  })}
-                />
-              ))
-            )}
-          </SkinCarousel>
-
-          <Flex gap={spacing[3]} align="flex-start">
-            <Flex vertical gap={spacing[1]} style={BODY}>
-              <CardTarget
-                {...openProps(props)}
-                listingId={listing.id}
-                label={targetLabel}
-                testId="listings-serp-open"
-                bodyTestId="listings-serp-body"
-              >
-                {props.badge}
+            </div>
 
-                {/* PRICE FIRST, and loud. `fontSize.xl` rather than an antd
-                    heading: this is a price, not a section title, and it must
-                    not enter the document outline of a page holding twenty of
-                    them. */}
-                <Flex align="center" gap={spacing[2]} wrap>
-                  <Typography.Text
-                    strong
-                    style={{ fontSize: fontSize.xl.fontSize }}
-                    data-testid="listings-serp-price"
+            <div className={CARD_MAIN_CLASS}>
+              <Flex gap={spacing[3]} align="flex-start">
+                <Flex vertical gap={spacing[1]} style={BODY}>
+                  <CardTarget
+                    {...openProps(props)}
+                    listingId={listing.id}
+                    label={targetLabel}
+                    testId="listings-serp-open"
+                    bodyTestId="listings-serp-body"
                   >
-                    <ListingPrice amount={listing.price} {...currency} />
-                  </Typography.Text>
-                  {priceTrend !== undefined && (
-                    <PriceTrendIcon
-                      direction={priceTrend.direction}
-                      label={t(
-                        priceTrend.direction === "down"
-                          ? LISTINGS_I18N_KEYS.cardPriceDropped
-                          : LISTINGS_I18N_KEYS.cardPriceRaised
+                    {props.badge}
+
+                    {/* PRICE FIRST, and loud. `fontSize.xl` rather than an antd
+                        heading: this is a price, not a section title, and it must
+                        not enter the document outline of a page holding twenty of
+                        them. */}
+                    <Flex align="center" gap={spacing[2]} wrap>
+                      <Typography.Text
+                        strong
+                        style={{ fontSize: fontSize.xl.fontSize }}
+                        data-testid="listings-serp-price"
+                      >
+                        <ListingPrice amount={listing.price} {...currency} />
+                      </Typography.Text>
+                      {priceTrend !== undefined && (
+                        <PriceTrendIcon
+                          direction={priceTrend.direction}
+                          label={t(
+                            priceTrend.direction === "down"
+                              ? LISTINGS_I18N_KEYS.cardPriceDropped
+                              : LISTINGS_I18N_KEYS.cardPriceRaised
+                          )}
+                        />
                       )}
-                    />
-                  )}
-                </Flex>
+                    </Flex>
 
-                {priceTrend !== undefined && (
-                  <Flex
-                    align="baseline"
-                    gap={spacing[1]}
-                    data-testid="listings-serp-old-price"
-                  >
-                    {/* The strike-through is what a sighted reader sees and
-                        nothing a screen reader announces, so the word is on
-                        the line too rather than left to the styling. */}
-                    <Typography.Text type="secondary">
-                      {t(LISTINGS_I18N_KEYS.cardPriceWas)}
-                    </Typography.Text>
-                    <Typography.Text type="secondary" delete>
-                      <ListingPrice amount={priceTrend.oldPrice} {...currency} />
+                    {priceTrend !== undefined && (
+                      <Flex
+                        align="baseline"
+                        gap={spacing[1]}
+                        data-testid="listings-serp-old-price"
+                      >
+                        {/* The strike-through is what a sighted reader sees and
+                            nothing a screen reader announces, so the word is on
+                            the line too rather than left to the styling. */}
+                        <Typography.Text type="secondary">
+                          {t(LISTINGS_I18N_KEYS.cardPriceWas)}
+                        </Typography.Text>
+                        <Typography.Text type="secondary" delete>
+                          <ListingPrice amount={priceTrend.oldPrice} {...currency} />
+                        </Typography.Text>
+                      </Flex>
+                    )}
+
+                    <Typography.Text data-testid="listings-serp-title">
+                      {title}
                     </Typography.Text>
-                  </Flex>
-                )}
 
-                <Typography.Text data-testid="listings-serp-title">
-                  {title}
-                </Typography.Text>
+                    {props.specsLine !== undefined && props.specsLine.length > 0 ? (
+                      <Typography.Text
+                        type="secondary"
+                        ellipsis
+                        data-testid="listings-serp-specs"
+                      >
+                        {props.specsLine}
+                      </Typography.Text>
+                    ) : titleDaos.length > 0 ? (
+                      <Typography.Text
+                        type="secondary"
+                        ellipsis
+                        data-testid="listings-serp-specs"
+                      >
+                        <FeatureBadges
+                          features={featuresFromDaoList(titleDaos, copy).map(
+                            (view) => view.feature,
+                          )}
+                          values={featuresDtoFromDaoList(titleDaos)}
+                        />
+                      </Typography.Text>
+                    ) : null}
 
-                {props.specsLine !== undefined && props.specsLine.length > 0 ? (
-                  <Typography.Text
-                    type="secondary"
-                    ellipsis
-                    data-testid="listings-serp-specs"
-                  >
-                    {props.specsLine}
-                  </Typography.Text>
-                ) : titleDaos.length > 0 ? (
-                  <Typography.Text
-                    type="secondary"
-                    ellipsis
-                    data-testid="listings-serp-specs"
-                  >
-                    <FeatureBadges
-                      features={featuresFromDaoList(titleDaos, copy).map(
-                        (view) => view.feature,
-                      )}
-                      values={featuresDtoFromDaoList(titleDaos)}
-                    />
-                  </Typography.Text>
-                ) : null}
+                    {badgeFeatures.length > 0 ? (
+                      <FeatureBadges
+                        features={badgeFeatures.map((view) => view.feature)}
+                        values={badgeValues}
+                      />
+                    ) : null}
+                  </CardTarget>
 
-                {badgeFeatures.length > 0 ? (
-                  <FeatureBadges
-                    features={badgeFeatures.map((view) => view.feature)}
-                    values={badgeValues}
-                  />
-                ) : null}
-              </CardTarget>
+                  {/* Outside the anchor, both of them: a seller line usually holds
+                      a link to the seller, and the place is the last thing read
+                      rather than part of what the card is called. */}
+                  {props.sellerSlot ?? null}
 
-              {/* Outside the anchor, both of them: a seller line usually holds
-                  a link to the seller, and the place is the last thing read
-                  rather than part of what the card is called. */}
-              {props.sellerSlot ?? null}
-
-              {listing.location_label !== undefined &&
-              listing.location_label.length > 0 ? (
-                <Typography.Text
-                  type="secondary"
-                  data-testid="listings-serp-location"
-                >
-                  {listing.location_label}
-                </Typography.Text>
-              ) : null}
-            </Flex>
+                  {listing.location_label !== undefined &&
+                  listing.location_label.length > 0 ? (
+                    <Typography.Text
+                      type="secondary"
+                      data-testid="listings-serp-location"
+                    >
+                      {listing.location_label}
+                    </Typography.Text>
+                  ) : null}
+                </Flex>
 
-            {rail}
-          </Flex>
-        </Flex>
+                {rail}
+              </Flex>
+            </div>
+          </div>
+        </div>
       </Card>
     </SkinTheme>
   );

package/src/default/index.ts

@@ -33,7 +33,13 @@
  * 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 type {
   ListingCardProps,
   ListingCardBaseProps,
@@ -57,8 +63,8 @@ export { ListingDetailPane, DETAIL_MEASURE, DETAIL_PHOTO_MIN } from "./ListingDe
 export type { ListingDetailPaneProps } from "./ListingDetailPane.js";
 export {
   ListingComposerPage,
+  COMPOSER_DETAILS_PLACEMENT,
   COMPOSER_MEASURE,
-  COMPOSER_STACKED_BELOW,
   composerFieldId,
 } from "./ListingComposerPage.js";
 export type {
@@ -79,7 +85,11 @@ export type {
 
 export { LifecycleTag, ListingStatusBlock, ModerationNote } from "./StatusTags.js";
 export type { ListingStatusProps } from "./StatusTags.js";
-export { ListingPhoto, LISTING_PHOTO_ASPECT } from "./ListingPhoto.js";
+export {
+  ListingPhoto,
+  ListingPhotoStrip,
+  LISTING_PHOTO_ASPECT,
+} from "./ListingPhoto.js";
 export type { ListingPhotoProps } from "./ListingPhoto.js";
 export { SignInLink } from "./SignInLink.js";
 export type { SignInLinkProps } from "./SignInLink.js";