@stapel/listings-react 0.22.1 → 0.24.0

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.22.1",
+  "version": "0.24.0",
   "defined": [],
   "flows": []
 }

package/src/api/generated/schema.ts

@@ -159,6 +159,50 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/listings/api/v1/listings/{id}/draft/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * @description Read back the draft twins — the reopen half of ``save-draft``.
+         *
+         *     Every user-editable field on this module is a ``*_draft`` column
+         *     (``title_draft``, ``description_draft``, ``images_draft``,
+         *     ``features_draft``, the location trio, ...) and until now the only
+         *     call that ever returned one was the write itself: ``create``,
+         *     ``update`` and ``save-draft`` echo the bag back, and no READ did. So a
+         *     composer reopening a listing by id had exactly one source, the detail
+         *     read, which serves the PUBLISHED fields — empty on everything that has
+         *     never been published. The seller pressed «продолжить», got a blank
+         *     form, and their text and photos were sitting in the row the whole
+         *     time.
+         *
+         *     Deliberately a separate route rather than draft columns bolted onto
+         *     the detail read: the detail read is the PUBLIC one (a stranger and a
+         *     crawler read it without a session), and a shape whose key set depends
+         *     on who is asking is the shape a redaction bug hides in. Here the
+         *     answer is structural — ``_get_own`` is the module's one ownership
+         *     gate, 403 for someone else's listing, 404 for one that is absent or
+         *     soft-deleted — so no draft field can reach a non-owner by omission.
+         *
+         *     The payload is ``ListingDraftSerializer``, byte for byte what
+         *     ``save-draft`` returns, so a client reopens with the mapper it already
+         *     has for the write's response instead of a second one.
+         *
+         *     **Permissions:** `IsAuthenticated`
+         */
+        get: operations["listings_api_v1_listings_draft_retrieve"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/listings/api/v1/listings/{id}/favorite/": {
         parameters: {
             query?: never;
@@ -285,6 +329,15 @@ export interface paths {
          *     and the set the server accepts are one object, not two that agree
          *     today.
          *
+         *     One edge is not a lifecycle hop: ARCHIVED -> PUBLISHED is
+         *     «опубликовать снова», and it runs the publish service (validate,
+         *     promote, re-submit for review — see ``RESTORE_EDGES``). So it can
+         *     answer 400 when the draft is not publishable, and the ``status`` it
+         *     returns is where the deployment's moderation policy put the listing,
+         *     which under the default pre-moderation gate is ``pending`` and not the
+         *     ``published`` that was asked for. Read the status from the response,
+         *     never from the request.
+         *
          *     **Permissions:** `IsAuthenticated`
          */
         post: operations["listings_api_v1_listings_transition_create"];
@@ -815,7 +868,13 @@ export interface components {
             price_base?: string | null;
             currency?: string;
             readonly images: string[] | null;
-            readonly features_title: (components["schemas"]["FeatureDao"] | {
+            readonly features_title: ((Omit<components["schemas"]["FeatureDao"], "type"> & {
+                label: string;
+                unit?: string;
+                name: string;
+                /** @enum {unknown} */
+                presentation: "value" | "value_unit" | "name_value" | "name";
+            }) | {
                 slug?: string;
                 type?: string;
                 name?: string | null;
@@ -830,7 +889,13 @@ export interface components {
                 redacted: true;
                 present: boolean;
             })[];
-            readonly features_badges: (components["schemas"]["FeatureDao"] | {
+            readonly features_badges: ((Omit<components["schemas"]["FeatureDao"], "type"> & {
+                label: string;
+                unit?: string;
+                name: string;
+                /** @enum {unknown} */
+                presentation: "value" | "value_unit" | "name_value" | "name";
+            }) | {
                 slug?: string;
                 type?: string;
                 name?: string | null;
@@ -906,7 +971,13 @@ export interface components {
                 redacted: true;
                 present: boolean;
             })[];
-            readonly features_title: (components["schemas"]["FeatureDao"] | {
+            readonly features_title: ((Omit<components["schemas"]["FeatureDao"], "type"> & {
+                label: string;
+                unit?: string;
+                name: string;
+                /** @enum {unknown} */
+                presentation: "value" | "value_unit" | "name_value" | "name";
+            }) | {
                 slug?: string;
                 type?: string;
                 name?: string | null;
@@ -921,7 +992,13 @@ export interface components {
                 redacted: true;
                 present: boolean;
             })[];
-            readonly features_badges: (components["schemas"]["FeatureDao"] | {
+            readonly features_badges: ((Omit<components["schemas"]["FeatureDao"], "type"> & {
+                label: string;
+                unit?: string;
+                name: string;
+                /** @enum {unknown} */
+                presentation: "value" | "value_unit" | "name_value" | "name";
+            }) | {
                 slug?: string;
                 type?: string;
                 name?: string | null;
@@ -982,6 +1059,7 @@ export interface components {
             features_draft?: {
                 [key: string]: components["schemas"]["FeatureDto"];
             } | null;
+            draft_meta?: unknown;
             auto_republish?: boolean;
             countable?: boolean;
             /** Format: int64 */
@@ -1085,7 +1163,13 @@ export interface components {
             price_base?: string | null;
             currency?: string;
             readonly images: string[] | null;
-            readonly features_title: (components["schemas"]["FeatureDao"] | {
+            readonly features_title: ((Omit<components["schemas"]["FeatureDao"], "type"> & {
+                label: string;
+                unit?: string;
+                name: string;
+                /** @enum {unknown} */
+                presentation: "value" | "value_unit" | "name_value" | "name";
+            }) | {
                 slug?: string;
                 type?: string;
                 name?: string | null;
@@ -1100,7 +1184,13 @@ export interface components {
                 redacted: true;
                 present: boolean;
             })[];
-            readonly features_badges: (components["schemas"]["FeatureDao"] | {
+            readonly features_badges: ((Omit<components["schemas"]["FeatureDao"], "type"> & {
+                label: string;
+                unit?: string;
+                name: string;
+                /** @enum {unknown} */
+                presentation: "value" | "value_unit" | "name_value" | "name";
+            }) | {
                 slug?: string;
                 type?: string;
                 name?: string | null;
@@ -1199,6 +1289,7 @@ export interface components {
             features_draft?: {
                 [key: string]: components["schemas"]["FeatureDto"];
             } | null;
+            draft_meta?: unknown;
             auto_republish?: boolean;
             countable?: boolean;
             /** Format: int64 */
@@ -1648,6 +1739,28 @@ export interface operations {
             };
         };
     };
+    listings_api_v1_listings_draft_retrieve: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description A unique integer value identifying this listing. */
+                id: number;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ListingDraft"];
+                };
+            };
+        };
+    };
     listings_api_v1_listings_favorite_create: {
         parameters: {
             query?: never;

package/src/api/listingsApi.ts

@@ -169,6 +169,33 @@ export interface ListingsApi {
    */
   saveDraft(id: number, body: ListingDraftPatch): Promise<ListingDraft>;
 
+  /**
+   * The draft twin, read back — `GET {id}/draft/` (stapel-listings 0.21.1),
+   * owner-only. Answers the exact `ListingDraftSerializer` shape `save-draft`
+   * does, which is what finally lets a reopened listing seed from what was
+   * actually typed rather than from the published half (see
+   * `headless/ListingComposer.tsx`'s header on why that used to be
+   * impossible).
+   *
+   * A stranger's id 403s; an absent one 404s — same as every other owner
+   * read here. A build against an OLDER backend also 404s (the route did not
+   * exist yet), and a caller cannot tell the two apart from the response
+   * alone; `useListingComposer` treats either as "fall back to the detail
+   * seed" rather than surfacing a hard failure, because a reopened draft is
+   * strictly better served by the published half than by an error banner.
+   *
+   * Hand-authored: `stapel-listings` 0.21.1 has not been regenerated into
+   * this pair's pinned schema yet, so there is no `Schemas["..."]` for this
+   * operation to bind to. The response shape is declared by hand against
+   * {@link ListingDraft} — the same type `save-draft` already returns — the
+   * way `@stapel/categories-react` hand-declares `children_as` ahead of its
+   * own pin.
+   */
+  draft(
+    id: number,
+    options?: { readonly signal?: AbortSignal }
+  ): Promise<ListingDraft>;
+
   /**
    * Ask what publishing WOULD say, without publishing. Same validator as
    * `publish` (`services.publish.validate_draft`), so the two cannot disagree
@@ -321,6 +348,9 @@ export function createListingsApi(client: StapelClient): ListingsApi {
 
     saveDraft: (id, body) => client.post(`${listingPath(id)}save-draft/`, body),
 
+    draft: (id, options) =>
+      client.get(`${listingPath(id)}draft/`, signal(options)),
+
     validateDraft: (id, options) =>
       client.get(`${listingPath(id)}validate-draft/`, signal(options)),
 

package/src/api/types.ts

@@ -123,8 +123,58 @@ export function engagementIds(ids: readonly number[]): readonly number[] {
   return [...seen].sort((a, b) => a - b).slice(0, LISTINGS_ENGAGEMENT_BATCH_LIMIT);
 }
 
+/**
+ * The stored-feature columns, restated as the runtime shape.
+ *
+ * `features`, `features_title` and `features_badges` are `JSONField`s (this
+ * file's header, note 2): what reaches the wire is what `build_features_list`
+ * stored, and the OpenAPI union beside them is a DESCRIPTION swapped in by an
+ * extension rather than a filter anything applies. stapel-listings 0.21.3
+ * makes that gap load-bearing: its union spells a badge element with `label`,
+ * `name` and `presentation` REQUIRED, so a row from a server that predates the
+ * contract — the fallback arm `<CardBadges>` exists for, and every row on
+ * every listing published before 0.21.3 — no longer satisfies the generated
+ * type although it is exactly what a card receives.
+ *
+ * So the columns are typed as {@link ListingFeatureDao}, the mirror that says
+ * what a stored row IS, and the contract keys are read off the generated
+ * element instead (`model/cardBadges.ts`) — a rename upstream still breaks the
+ * build, without the generated union refusing the older half of the wire.
+ */
+/**
+ * The badge element the CARD BADGE CONTRACT describes, as the generated schema
+ * spells it (stapel-listings 0.21.3).
+ *
+ * Taken off `Schemas` rather than the relaxed row above, because this is the
+ * one place the contract's own names and readings should still come from the
+ * wire: `model/cardBadges.ts` derives its keys from here, so a rename or a
+ * fifth `presentation` upstream turns this build red.
+ */
+export type ListingCardBadgeElement = Extract<
+  Schemas["ListingCard"]["features_badges"][number],
+  { presentation: unknown }
+>;
+
+type StoredFeatureColumn = "features" | "features_title" | "features_badges";
+
+/**
+ * A stored row AS IT ARRIVES: every key of the mirror, none of them promised.
+ *
+ * `slug` is required on {@link ListingFeatureDao} because a row without one is
+ * unusable — and a JSONField ships one anyway when the projection misses it,
+ * which `featureFromDao` reports rather than papering over with a synthesized
+ * index. `asFeatureDaoList` is the single narrowing point between the two.
+ */
+export type ListingFeatureRow = Partial<ListingFeatureDao>;
+
+type WithStoredFeatures<Row> = Omit<Row, StoredFeatureColumn> & {
+  readonly [K in Extract<keyof Row, StoredFeatureColumn>]: readonly ListingFeatureRow[];
+};
+
 /** `GET /listings/{pk}/` 200 — everything a detail page reads. */
-export type ListingDetail = WithOptionalEngagement<Schemas["ListingDetail"]>;
+export type ListingDetail = WithStoredFeatures<
+  WithOptionalEngagement<Schemas["ListingDetail"]>
+>;
 
 /**
  * One row of a card list (`GET /listings/`, `GET /listings/my/favorites/`) —
@@ -158,8 +208,8 @@ type WithOptionalPrecision<Row extends { geo_precision_km?: number }> = Omit<
 > &
   Partial<Pick<Schemas["ListingCard"], "geo_precision_km">>;
 
-export type ListingCard = WithOptionalPrecision<
-  WithOptionalEngagement<Schemas["ListingCard"]>
+export type ListingCard = WithStoredFeatures<
+  WithOptionalPrecision<WithOptionalEngagement<Schemas["ListingCard"]>>
 >;
 
 /** `POST /listings/` request+response and `POST /{pk}/save-draft/` response —
@@ -216,8 +266,8 @@ export type PaginatedListingCards = Omit<
  *    tab keyed off them is a column of blank rows. `myListingTitle` /
  *    `myListingPrice` (`model/mine.ts`) are the one place the fallback lives.
  */
-export type MyListingCard = WithOptionalPrecision<
-  WithOptionalEngagement<Schemas["MyListingCard"]>
+export type MyListingCard = WithStoredFeatures<
+  WithOptionalPrecision<WithOptionalEngagement<Schemas["MyListingCard"]>>
 >;
 
 /** The keyset envelope `GET /listings/my/listings/` comes back in — the same

package/src/default/CardBadges.tsx

@@ -0,0 +1,105 @@
+/**
+ * A card's badge line, drawn against the CARD BADGE CONTRACT when the server
+ * speaks it and exactly as it draws today when it does not.
+ *
+ * The contract itself — the five keys, the four presentations, and the
+ * measured "Brick · 3 · 9" that earned it — is `model/cardBadges.ts`.
+ * This file is only the two arms:
+ *
+ *  - **the contract arm.** Each element already carries everything a reader
+ *    needs (its name, its unit, its resolved copy, and the server's decision
+ *    about which of them to print), so the text comes from `cardBadgeText`
+ *    and nothing here reaches for a category, a formatter or an option table;
+ *  - **the fallback arm.** No element declares a `presentation`, which means
+ *    a backend older than stapel-listings 0.21.3 — so the row goes through
+ *    `@stapel/attributes-react`'s `<FeatureBadges>` off the stored DAO's own
+ *    config, byte-identical to the release before this one.
+ *
+ * One component, called by all three card surfaces, for the same reason
+ * `CardTarget` is one function: three cards each deciding what a badge says
+ * is three places for the bare numbers to come back.
+ */
+import type { ReactElement } from "react";
+import { Flex, Tag, Typography } from "antd";
+import { SkinTheme } from "@stapel/tokens-antd/skin";
+import { useI18n } from "@stapel/core";
+import { spacing } from "@stapel/tokens";
+import { FeatureBadges } from "@stapel/attributes-react/default";
+import type { ListingFeatureDao } from "../api/types.js";
+import type { CardBadgeRow } from "../model/cardBadges.js";
+import { cardBadgeTexts, hasCardBadgeContract } from "../model/cardBadges.js";
+import { featuresDtoFromDaoList, featuresFromDaoList } from "../model/features.js";
+import type { FeatureCopySource } from "../model/features.js";
+
+export interface CardBadgesProps {
+  /** The stored projection — `features_badges` or `features_title`. */
+  readonly rows: readonly ListingFeatureDao[];
+  /** The category's option table, where the surface has one. Used by the
+   * FALLBACK arm only: a contract element carries its own resolved copy. */
+  readonly copy: FeatureCopySource;
+  /**
+   * `"badges"` draws tags (the card's badge strip); `"line"` draws one
+   * dot-separated run of secondary text (the seller's own spec line under
+   * the title, which is already a line on every surface).
+   */
+  readonly variant: "badges" | "line";
+  readonly testId?: string;
+}
+
+/** The separator of a spec line — the one every classified uses. */
+const LINE_SEPARATOR = " · ";
+
+export function CardBadges(props: CardBadgesProps): ReactElement | null {
+  const { locale } = useI18n();
+  const rows = props.rows as readonly CardBadgeRow[];
+
+  if (rows.length === 0) return null;
+
+  if (hasCardBadgeContract(rows)) {
+    const printed = cardBadgeTexts(rows, locale);
+    if (printed.length === 0) return null;
+    if (props.variant === "line") {
+      return (
+        <span data-testid={props.testId ?? "listings-card-badges"}>
+          {printed.map((one) => one.text).join(LINE_SEPARATOR)}
+        </span>
+      );
+    }
+    return (
+      <SkinTheme surface="bare">
+        <Flex gap={spacing[1]} wrap data-testid={props.testId ?? "listings-card-badges"}>
+          {printed.map((one) => (
+            <Tag key={one.slug} data-testid={`listings-card-badge-${one.slug}`}>
+              {one.text}
+            </Tag>
+          ))}
+        </Flex>
+      </SkinTheme>
+    );
+  }
+
+  // The older backend. Exactly what shipped before the contract existed.
+  const views = featuresFromDaoList(rows, props.copy);
+  if (views.length === 0) return null;
+  return (
+    <FeatureBadges
+      features={views.map((view) => view.feature)}
+      values={featuresDtoFromDaoList(rows)}
+    />
+  );
+}
+
+/** The spec line under a card's title, wrapped in the secondary, truncating
+ * text every surface already draws it in. */
+export function CardSpecLine(props: {
+  readonly rows: readonly ListingFeatureDao[];
+  readonly copy: FeatureCopySource;
+  readonly testId: string;
+}): ReactElement | null {
+  if (props.rows.length === 0) return null;
+  return (
+    <Typography.Text type="secondary" ellipsis data-testid={props.testId}>
+      <CardBadges rows={props.rows} copy={props.copy} variant="line" testId={`${props.testId}-text`} />
+    </Typography.Text>
+  );
+}

package/src/default/FavoritesPane.tsx

@@ -43,6 +43,16 @@ import { ListingCard } from "./ListingCard.js";
 import type { ListingCardOpenProps } from "./ListingCard.js";
 import { SignInLink } from "./SignInLink.js";
 import type { ThemeModeProp } from "./types.js";
+import type { ListingCard as ListingCardRow } from "../api/types.js";
+
+/**
+ * The row `hrefFor` is called with as its second argument — the same
+ * {@link ListingCardRow} the grid renders each card from. `title` is
+ * guaranteed present here: a favourite is always a PUBLISHED listing (a
+ * draft has nothing to favourite), so the public card's `title` is never the
+ * blank the wire allows for an unpublished one.
+ */
+export type FavoritesHrefRow = ListingCardRow & { title: string };
 
 /** The narrowest a card may get before the grid drops a column — the same
  * element-relative rule the detail gallery uses. It was `width: 240`, which
@@ -59,8 +69,13 @@ export const FAVORITES_MEASURE = "72rem";
  * card no longer allows. */
 export type FavoritesPaneOpenProps =
   | {
-      /** Where a card leads. The container owns routing. */
-      readonly hrefFor: (id: number) => string;
+      /**
+       * Where a card leads. The container owns routing. Called with the
+       * row's id and the row itself ({@link FavoritesHrefRow}, `title`
+       * guaranteed present) — a container that only needs the id keeps
+       * working unchanged.
+       */
+      readonly hrefFor: (id: number, row: FavoritesHrefRow) => string;
       /** The host's `<Link>`, so a click stays inside the SPA. */
       readonly linkComponent?: LinkComponent;
       readonly onOpen?: undefined;
@@ -95,10 +110,10 @@ export type FavoritesPaneProps = ThemeModeProp &
 /** The card's own open props for one row. One arm, never two. */
 function cardOpenProps(
   props: FavoritesPaneOpenProps,
-  id: number
+  row: FavoritesHrefRow
 ): ListingCardOpenProps {
   if (props.hrefFor !== undefined) {
-    const href = props.hrefFor(id);
+    const href = props.hrefFor(row.id, row);
     return props.linkComponent !== undefined
       ? { href, linkComponent: props.linkComponent }
       : { href };
@@ -180,7 +195,7 @@ export function FavoritesPane(props: FavoritesPaneProps): ReactElement {
                       listing={row}
                       blockedReason="line"
                       {...(props.signIn !== undefined ? { signIn: props.signIn } : {})}
-                      {...cardOpenProps(props, row.id)}
+                      {...cardOpenProps(props, row as FavoritesHrefRow)}
                     />
                   ))}
                 </div>

package/src/default/ListingCard.tsx

@@ -116,15 +116,15 @@ import {
 import { useActionGate, useT } from "@stapel/core";
 import type { LinkComponent, SignInCtaProp } from "@stapel/core";
 import { spacing } from "@stapel/tokens";
-import { FeatureBadges } from "@stapel/attributes-react/default";
 import type { ListingCard as ListingCardData } from "../api/types.js";
-import { asFeatureDaoList, featuresDtoFromDaoList, featuresFromDaoList } from "../model/features.js";
+import { asFeatureDaoList } from "../model/features.js";
 import type { FeatureCopySource } from "../model/features.js";
 import { lifecycleCaption } from "../model/status.js";
 import { isListingViewed } from "../model/engagement.js";
 import { useEngagedListing } from "../headless/Engagement.js";
 import { useFavoriteToggle } from "../headless/Favorites.js";
 import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
+import { CardBadges, CardSpecLine } from "./CardBadges.js";
 import { GateReasonPopover } from "./GateReasonPopover.js";
 import { HeartIcon } from "./icons.js";
 import { SignInLink } from "./SignInLink.js";
@@ -539,13 +539,13 @@ export function ListingCard(props: ListingCardProps): ReactElement {
   const badgeDaos = asFeatureDaoList(listing.features_badges);
   // The category's own option table, when the surface has it: a stored
   // `select` carries no table of its own, so without this a badge prints the
-  // storage slug. Absent on a mixed grid, which is why it is optional.
+  // storage slug. Absent on a mixed grid, which is why it is optional. Read
+  // by the FALLBACK arm of `<CardBadges>` only — an element that speaks the
+  // card badge contract carries its own resolved copy.
   const copy: FeatureCopySource =
     props.categoryFeatures !== undefined
       ? { categoryFeatures: props.categoryFeatures }
       : {};
-  const badgeFeatures = featuresFromDaoList(badgeDaos, copy);
-  const badgeValues = featuresDtoFromDaoList(badgeDaos);
   const titleDaos = asFeatureDaoList(listing.features_title);
 
   const status = listing.status === undefined ? undefined : lifecycleCaption(listing.status);
@@ -610,23 +610,9 @@ export function ListingCard(props: ListingCardProps): ReactElement {
 
       {/* 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}
+      <CardSpecLine rows={titleDaos} copy={copy} testId="listings-card-specs" />
 
-      {badgeFeatures.length > 0 ? (
-        <FeatureBadges
-          features={badgeFeatures.map((view) => view.feature)}
-          values={badgeValues}
-        />
-      ) : null}
+      <CardBadges rows={badgeDaos} copy={copy} variant="badges" />
 
       {/* ONE line, and it truncates (D185). Measured on a live 1440px feed:
           a two-part city-and-district name wrapped, the text block grew

package/src/default/ListingDetailPane.tsx

@@ -69,13 +69,14 @@ import {
 } from "@stapel/core";
 import type { SignInCta } from "@stapel/core";
 import { spacing } from "@stapel/tokens";
-import { FeatureValueList } from "@stapel/attributes-react/default";
-import { formatFeatureValue, isRedactedValue } from "@stapel/attributes-react";
+import { isRedactedValue } from "@stapel/attributes-react";
 import { useListingDetail } from "../headless/ListingDetail.js";
 import { useListingActions } from "../headless/ListingActions.js";
 import { asFeatureDaoList, featureValuesForDisplay } from "../model/features.js";
+import { formatSpecValue } from "../model/featureText.js";
 import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
 import { GateReasonPopover } from "./GateReasonPopover.js";
+import { ListingSpecColumns, ListingSpecList } from "./ListingSpecList.js";
 import { SignInLink } from "./SignInLink.js";
 import { HeartIcon } from "./icons.js";
 import { ListingPhoto } from "./ListingPhoto.js";
@@ -338,7 +339,7 @@ export function ListingDetailPane(props: ListingDetailPaneProps): ReactElement {
                       // leaked identifier would be read out loud.
                       .filter((view) => !isRedactedValue(view.value))
                       .map((view) =>
-                        formatFeatureValue(view.feature, view.value, { t, locale })
+                        formatSpecValue(view.feature, view.value, { t, locale })
                       )
                       .filter((text): text is string => text !== undefined)
                       .join(" · ")}
@@ -548,47 +549,22 @@ export function ListingDetailPane(props: ListingDetailPaneProps): ReactElement {
                 ? { categoryFeatures: props.categoryFeatures }
                 : {}
             );
-            /* Two spec columns in the split, split by ROW COUNT and not by
-               `<FeatureValueList>` — the halves are cut HERE so the category's
-               declaration order survives: the first (larger) half fills the
-               left list, and the table reads top-to-bottom, left column
-               first, exactly as the one-column table read. */
-            const specHalf = Math.ceil(bag.features.length / 2);
+            /* 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 ? (
                 <Typography.Text type="secondary" data-testid="listings-detail-no-specs">
                   {t(LISTINGS_I18N_KEYS.detailNoSpecs)}
                 </Typography.Text>
               ) : split ? (
-                <div
-                  data-testid="listings-detail-specs-split"
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                    gap: spacing[4],
-                    alignItems: "start",
-                  }}
-                >
-                  <FeatureValueList
-                    features={bag.features
-                      .slice(0, specHalf)
-                      .map((view) => view.feature)}
-                    values={specValues}
-                  />
-                  {bag.features.length > specHalf ? (
-                    <FeatureValueList
-                      features={bag.features
-                        .slice(specHalf)
-                        .map((view) => view.feature)}
-                      values={specValues}
-                    />
-                  ) : null}
-                </div>
+                <ListingSpecColumns features={specFeatures} values={specValues} />
               ) : (
-                <FeatureValueList
-                  features={bag.features.map((view) => view.feature)}
-                  values={specValues}
-                />
+                <ListingSpecList features={specFeatures} values={specValues} />
               );
 
             const specsSection = (