@stapel/listings-react 0.23.0 → 0.25.0

package/src/default/ListingSpecList.tsx

@@ -0,0 +1,195 @@
+/**
+ * The listing page's spec rows ("Characteristics"), as SENTENCES.
+ *
+ * ── What was on screen, and why a table was the wrong shape ───────────────
+ *
+ * The list was `<Descriptions column={1}>`: a real two-column table, label
+ * cell beside value cell. On a phone — and in the split layout's half-width
+ * left column — the value cell is narrow, so a long answer ("Trim level",
+ * a full trim name, a two-line address) wrapped INSIDE it and stacked under
+ * itself in a column a third of the page wide, beside acres of empty label
+ * gutter. A spec row is not tabular data that a reader scans down one axis;
+ * it is a short question and its answer, and it reads as a line of text.
+ *
+ * So the label is an inline `<span>`, muted, and the value follows it in the
+ * SAME text flow. A long value now wraps as a paragraph — full measure,
+ * hanging under the label — and a short one costs one line instead of a row
+ * of a table.
+ *
+ * ── The two-column grid that survives is a grid of ROWS ───────────────────
+ *
+ * The split layout still puts two columns of spec rows side by side on a wide
+ * screen, because a forty-row list under a photograph is a scroll nobody
+ * finishes. What is gone is the label being its own COLUMN: the columns hold
+ * whole rows, cut by row count so the category's declaration order still
+ * reads top-to-bottom, left column first. `<ListingSpecColumns>` is that cut,
+ * kept here beside the row it cuts.
+ *
+ * ── Units and digits ─────────────────────────────────────────────────────
+ *
+ * Every value goes through `formatSpecValue` rather than the shared
+ * `formatFeatureValue`: same answer, typeset — the unit appended and the
+ * digits grouped by the reader's locale. `model/featureText.ts` says where
+ * the unit comes from and why there is no `unit` key to read it from.
+ */
+import type { CSSProperties, ReactElement } from "react";
+import { Typography, theme as antdTheme } from "antd";
+import { SkinTheme } from "@stapel/tokens-antd/skin";
+import { useI18n, useT } from "@stapel/core";
+import { spacing } from "@stapel/tokens";
+import {
+  ATTRIBUTES_I18N_KEYS,
+  featureName,
+  featureType,
+  isRedactedValue,
+  isValuePresent,
+  isValueVerified,
+} from "@stapel/attributes-react";
+import type { FeatureDef, FeatureValueDto } from "@stapel/attributes-react";
+import { formatSpecValue } from "../model/featureText.js";
+
+/** The class one spec row carries. */
+export const SPEC_ROW_CLASS = "stapel-listing-spec-row";
+/** The class the row's inline label carries. */
+export const SPEC_LABEL_CLASS = "stapel-listing-spec-label";
+/** The `href` the hoisted spec stylesheet is deduplicated by. */
+export const SPEC_STYLE_HREF = "stapel-listings-spec";
+
+/**
+ * The rules an inline style cannot express — the label's own colour is set
+ * per-instance as a custom property so ONE hoisted copy serves either theme.
+ *
+ * `display: inline` on the label is the whole fix and is stated rather than
+ * inherited: antd's `<Text>` renders a `<span>`, but a skin that retunes it
+ * to a block would silently put the table back.
+ */
+export function specListCss(): string {
+  return [
+    // A paragraph, not a table row. `margin: 0` because the gap between rows
+    // is the list's, so a row can be lifted into a grid cell unchanged.
+    `.${SPEC_ROW_CLASS}{margin:0;min-inline-size:0;overflow-wrap:anywhere}`,
+    `.${SPEC_LABEL_CLASS}{display:inline;color:var(--listing-spec-label)}`,
+    // The one space between the question and the answer, owned by the label
+    // rather than written as a text node — a `{" "}` between two JSX elements
+    // is the kind of whitespace a formatter deletes.
+    `.${SPEC_LABEL_CLASS}::after{content:"\\00a0"}`,
+  ].join("");
+}
+
+export interface ListingSpecListProps {
+  /** The category's features, in the order they are declared. */
+  readonly features: readonly FeatureDef[];
+  /** The DISPLAY envelope — redacted stubs included, which is what makes a
+   * withheld row keep its place. */
+  readonly values: Readonly<Record<string, FeatureValueDto>>;
+  /** The surface's own test id, so a split page holding two columns of these
+   * does not hand a test two elements under one name. */
+  readonly testId?: string;
+  readonly style?: CSSProperties;
+}
+
+/**
+ * A withheld value's row: what the system OBSERVED, and nothing more — the
+ * same three states `@stapel/attributes-react` prints, said with its own
+ * copy keys so the two lists cannot drift into two different sentences.
+ */
+function redactedText(dto: FeatureValueDto | undefined, t: (key: string) => string): string {
+  if (!isValuePresent(dto)) return t(ATTRIBUTES_I18N_KEYS.valueNotSet);
+  if (isValueVerified(dto)) return t(ATTRIBUTES_I18N_KEYS.valueVerified);
+  return t(ATTRIBUTES_I18N_KEYS.valueProvided);
+}
+
+export function ListingSpecList(props: ListingSpecListProps): ReactElement {
+  const t = useT();
+  const { locale } = useI18n();
+  const { token } = antdTheme.useToken();
+
+  // A `header` is a section caption in a FORM, not a value: it has none, and
+  // a spec table that printed one would print "not specified" under it.
+  const rows = props.features.filter((feature) => featureType(feature) !== "header");
+
+  return (
+    <SkinTheme surface="bare">
+      <style href={SPEC_STYLE_HREF} precedence="default">
+        {specListCss()}
+      </style>
+      <div
+        data-testid={props.testId ?? "listings-spec-list"}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: spacing[1],
+          minWidth: 0,
+          ["--listing-spec-label" as string]: token.colorTextSecondary,
+          ...props.style,
+        }}
+      >
+        {rows.map((feature) => {
+          const dto = props.values[feature.slug];
+          const redacted = isRedactedValue(dto);
+          const text = redacted
+            ? redactedText(dto, t)
+            : (formatSpecValue(feature, dto, { t, locale }) ??
+              t(
+                dto === undefined || featureType(feature) === undefined
+                  ? ATTRIBUTES_I18N_KEYS.valueNotSet
+                  : ATTRIBUTES_I18N_KEYS.valueUnreadable
+              ));
+          return (
+            <p
+              key={feature.slug}
+              className={SPEC_ROW_CLASS}
+              data-testid={`listings-spec-row-${feature.slug}`}
+            >
+              <Typography.Text
+                type="secondary"
+                className={SPEC_LABEL_CLASS}
+                data-testid={`listings-spec-label-${feature.slug}`}
+              >
+                {featureName(feature)}
+              </Typography.Text>
+              <span data-testid={`listings-spec-value-${feature.slug}`}>{text}</span>
+            </p>
+          );
+        })}
+      </div>
+    </SkinTheme>
+  );
+}
+
+/**
+ * The same rows in TWO columns on a wide screen — a grid of whole rows, cut
+ * by row count so the category's declaration order still reads top-to-bottom,
+ * left column first.
+ *
+ * The cut is here rather than inside the list because a CSS `columns` rule
+ * would break a wrapped paragraph across the column boundary, which is
+ * exactly the defect the paragraph shape was adopted to avoid.
+ */
+export function ListingSpecColumns(props: ListingSpecListProps): ReactElement {
+  const half = Math.ceil(props.features.length / 2);
+  return (
+    <div
+      data-testid={props.testId ?? "listings-detail-specs-split"}
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+        gap: spacing[4],
+        alignItems: "start",
+      }}
+    >
+      <ListingSpecList
+        features={props.features.slice(0, half)}
+        values={props.values}
+        testId="listings-spec-list"
+      />
+      {props.features.length > half ? (
+        <ListingSpecList
+          features={props.features.slice(half)}
+          values={props.values}
+          testId="listings-spec-list-second"
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/default/cardGallery.ts

@@ -0,0 +1,287 @@
+/**
+ * The card gallery's two gestures — the ones a classified is expected to have
+ * and this pair did not.
+ *
+ * ── Hover scrub, on a device that has a pointer ──────────────────────────
+ *
+ * A card with six photographs showed one, and the only way to the other five
+ * was to open the listing. Every mature classified answers this the same way:
+ * the media box is divided into N equal segments, and the segment the cursor
+ * is over IS the photograph on screen. Six photos become six glances and no
+ * clicks, and the pointer leaving puts the first photo back — the card must
+ * be in the same state after a hover as before one, or a grid of forty tiles
+ * becomes forty different tiles depending on where a cursor happened to pass.
+ *
+ * It is gated on `(hover: hover) and (pointer: fine)` and on a `mouse`
+ * pointer type, both, and the two gates are not redundant: the media query
+ * says the DEVICE has a real pointer, the pointer type says THIS gesture came
+ * from it. A touch laptop answers `hover: hover` and still delivers finger
+ * events, and a scrub driven by a finger dragging across the box is the
+ * gesture below wearing the wrong costume.
+ *
+ * ── Swipe, on a device that does not ─────────────────────────────────────
+ *
+ * A finger gets the same six photographs by swiping horizontally, one photo
+ * per swipe, in either direction.
+ *
+ * The rule that matters is the one about the OTHER axis: a card is a small
+ * box inside a long scrolling feed, and a gesture layer that treats every
+ * touch as its own turns the page into something that will not scroll. So
+ * the strip declares `touch-action: pan-y` — the browser keeps the vertical
+ * axis, unconditionally, and can never be argued out of it — and this hook
+ * only acts on a drag that has declared horizontal INTENT: past
+ * {@link SWIPE_MIN_PX}, and further across than down by
+ * {@link SWIPE_AXIS_RATIO}. A diagonal thumb scrolling the feed changes no
+ * photograph.
+ *
+ * ── What neither gesture touches ─────────────────────────────────────────
+ *
+ * The keyboard, and the card's single link target. The strip underneath is
+ * still `<SkinCarousel>`: a real scroll container, a tab stop, arrow-key
+ * scrollable, with the slides in the document and its own dots reporting the
+ * position. Both gestures below work by SCROLLING it — they set no state the
+ * strip does not already publish — so what a keyboard reaches, what a screen
+ * reader reads and what the dots say are unchanged, and the card stays one
+ * anchor with one accessible name.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { PointerEvent as ReactPointerEvent, RefObject } from "react";
+
+/** The class the gallery's own box carries — see {@link cardGalleryCss}. */
+export const CARD_GALLERY_CLASS = "stapel-listing-gallery";
+/** The `href` the hoisted gallery stylesheet is deduplicated by. */
+export const CARD_GALLERY_STYLE_HREF = "stapel-listings-card-gallery";
+
+/** The environment a hover scrub is allowed in, and the only one. */
+export const SCRUB_MEDIA = "(hover: hover) and (pointer: fine)";
+
+/**
+ * How far a finger travels before it has said "photo", in CSS pixels.
+ *
+ * Under this, a drag is a tap that wobbled — and a tap on a card is a
+ * navigation, so a low threshold does not change a photograph, it changes one
+ * and then leaves the listing.
+ */
+export const SWIPE_MIN_PX = 32;
+
+/**
+ * How much more horizontal than vertical a drag must be to count.
+ *
+ * 1.2 rather than 1: a thumb scrolling a feed travels a few degrees off
+ * vertical, and a bare `|dx| > |dy|` comparison hands the gesture to the
+ * gallery on the first pixel where the wobble wins.
+ */
+export const SWIPE_AXIS_RATIO = 1.2;
+
+/**
+ * Which of `count` equal segments the pointer is over.
+ *
+ * Clamped at both ends: `offsetX` can be reported one pixel past the box's
+ * own width, and an index of `count` is a photograph that does not exist.
+ */
+export function segmentIndex(offsetX: number, width: number, count: number): number {
+  if (count <= 1 || width <= 0) return 0;
+  const raw = Math.floor((offsetX / width) * count);
+  return Math.min(count - 1, Math.max(0, raw));
+}
+
+/**
+ * A drag → the number of photographs it asks for: `1` forward, `-1` back, `0`
+ * for a drag that has not declared horizontal intent.
+ *
+ * Dragging LEFT advances, the direction the content moves under the finger —
+ * the same mapping the native scroller has.
+ */
+export function swipeStep(dx: number, dy: number): -1 | 0 | 1 {
+  const across = Math.abs(dx);
+  if (across < SWIPE_MIN_PX) return 0;
+  if (across <= Math.abs(dy) * SWIPE_AXIS_RATIO) return 0;
+  return dx < 0 ? 1 : -1;
+}
+
+/** Does this environment have a real pointer? `false` where there is no
+ * `matchMedia` to ask (a server render, an old jsdom), which is the safe
+ * side: a scrub that does not happen costs a hover, a scrub on a phone is a
+ * photograph that changes when nobody touched it. */
+export function hasFinePointer(): boolean {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  try {
+    return window.matchMedia(SCRUB_MEDIA).matches;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * {@link hasFinePointer}, as state.
+ *
+ * It opens `false` and settles in an effect rather than reading the media
+ * query during render: a server render has no `matchMedia`, and a first
+ * client render that disagreed with it is a hydration mismatch on every card
+ * on the page. Nothing is drawn differently either way — the flag only gates
+ * a gesture — so the one frame it costs is invisible.
+ */
+export function useFinePointer(): boolean {
+  const [fine, setFine] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    let query: MediaQueryList;
+    try {
+      query = window.matchMedia(SCRUB_MEDIA);
+    } catch {
+      return;
+    }
+    setFine(query.matches);
+    const onChange = (event: MediaQueryListEvent): void => {
+      setFine(event.matches);
+    };
+    // `addEventListener` is the modern spelling; Safari < 14 has only
+    // `addListener`, and a card grid that throws on mount there is worse than
+    // one that never notices a device changing its pointer.
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", onChange);
+      return () => {
+        query.removeEventListener("change", onChange);
+      };
+    }
+    return;
+  }, []);
+  return fine;
+}
+
+/** The handlers and the box reference a gallery hands its media well. */
+export interface CardGallery {
+  readonly ref: RefObject<HTMLDivElement | null>;
+  /** The photograph currently on screen. */
+  readonly active: number;
+  /** True while a pointer is scrubbing — the box publishes it so the strip's
+   * smooth-scroll can be switched off for the duration. */
+  readonly scrubbing: boolean;
+  readonly onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  readonly onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  readonly onPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  readonly onPointerCancel: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  readonly onPointerLeave: (event: ReactPointerEvent<HTMLDivElement>) => void;
+}
+
+/** Scroll the strip inside `box` so that slide `index` is at its leading
+ * edge. Rectangles rather than `scrollLeft / slideWidth`, for the reason
+ * `SkinCarousel`'s own `nearestSlideIndex` gives: the arithmetic version has
+ * to know the gap, the peek and the writing direction. */
+function showSlide(box: HTMLElement, index: number, instant: boolean): void {
+  const strip = box.querySelector<HTMLElement>("[data-stapel-carousel-strip]");
+  if (strip === null) return;
+  const slide = strip.children.item(index);
+  if (slide === null) return;
+  const left =
+    slide.getBoundingClientRect().left - strip.getBoundingClientRect().left + strip.scrollLeft;
+  if (typeof strip.scrollTo === "function") {
+    strip.scrollTo({ left, behavior: instant ? "auto" : "smooth" });
+  } else {
+    strip.scrollLeft = left;
+  }
+}
+
+/**
+ * The gallery gestures for a media well holding `count` photographs.
+ *
+ * A well with one photograph gets an inert bag: every handler returns
+ * immediately, so a grid of forty single-photo tiles pays for nothing.
+ */
+export function useCardGallery(count: number): CardGallery {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [active, setActive] = useState(0);
+  const [scrubbing, setScrubbing] = useState(false);
+  // The origin of the drag in progress, or `null`. A ref rather than state:
+  // it changes on every move and no render depends on it.
+  const origin = useRef<{ x: number; y: number } | null>(null);
+  const fine = useFinePointer();
+  const many = count > 1;
+
+  // The one place the strip is driven. `active` is the whole state of both
+  // gestures, so neither handler talks to the DOM.
+  useEffect(() => {
+    const box = ref.current;
+    if (box === null || !many) return;
+    showSlide(box, active, scrubbing);
+  }, [active, scrubbing, many]);
+
+  const onPointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>): void => {
+      if (!many) return;
+      if (event.pointerType === "mouse") {
+        if (!fine) return;
+        const box = ref.current;
+        if (box === null) return;
+        const rect = box.getBoundingClientRect();
+        setScrubbing(true);
+        setActive(segmentIndex(event.clientX - rect.left, rect.width, count));
+        return;
+      }
+      const from = origin.current;
+      if (from === null) return;
+      const step = swipeStep(event.clientX - from.x, event.clientY - from.y);
+      if (step === 0) return;
+      // The origin moves with the commit, so a long drag walks the strip one
+      // photograph per threshold rather than one per gesture.
+      origin.current = { x: event.clientX, y: event.clientY };
+      setScrubbing(false);
+      setActive((current) => Math.min(count - 1, Math.max(0, current + step)));
+    },
+    [count, fine, many]
+  );
+
+  const onPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>): void => {
+      if (!many || event.pointerType === "mouse") return;
+      origin.current = { x: event.clientX, y: event.clientY };
+    },
+    [many]
+  );
+
+  const endDrag = useCallback((): void => {
+    origin.current = null;
+  }, []);
+
+  const onPointerLeave = useCallback((): void => {
+    origin.current = null;
+    if (!many) return;
+    // The card goes back to the photograph it was drawn with. A hover is a
+    // look, not an edit.
+    setScrubbing(false);
+    setActive(0);
+  }, [many]);
+
+  return {
+    ref,
+    active,
+    scrubbing,
+    onPointerMove,
+    onPointerDown,
+    onPointerUp: endDrag,
+    onPointerCancel: endDrag,
+    onPointerLeave,
+  };
+}
+
+/**
+ * The rules an inline style cannot reach: they apply to the STRIP inside the
+ * carousel, which this package renders through a component and does not hold
+ * a handle on.
+ */
+export function cardGalleryCss(): string {
+  const box = `.${CARD_GALLERY_CLASS}`;
+  return [
+    // THE VERTICAL AXIS IS THE BROWSER'S, and is not negotiable: a card is a
+    // small box in a long feed, and the one unacceptable outcome of a gallery
+    // gesture is a page that will not scroll. `pan-y` says so at the platform
+    // level, where no handler can argue with it, and takes the horizontal
+    // axis for the swipe above.
+    `${box} [data-stapel-carousel-strip]{touch-action:pan-y}`,
+    // A per-pixel scrub must not animate: the strip's own `scroll-behavior:
+    // smooth` is right for a swipe committing one photograph and turns a
+    // cursor sweep into a queue of easing curves finishing after the pointer
+    // has left.
+    `${box}[data-scrubbing="true"] [data-stapel-carousel-strip]{scroll-behavior:auto}`,
+  ].join("");
+}

package/src/default/index.ts

@@ -104,6 +104,28 @@ export {
   LISTING_PHOTO_ASPECT,
 } from "./ListingPhoto.js";
 export type { ListingPhotoProps } from "./ListingPhoto.js";
+
+// ── the listing page's characteristics, and a card's badge line ──────────────
+export {
+  ListingSpecColumns,
+  ListingSpecList,
+  specListCss,
+} from "./ListingSpecList.js";
+export type { ListingSpecListProps } from "./ListingSpecList.js";
+export { CardBadges, CardSpecLine } from "./CardBadges.js";
+export type { CardBadgesProps } from "./CardBadges.js";
+
+// ── the card gallery's two gestures ─────────────────────────────────────────
+export {
+  SWIPE_AXIS_RATIO,
+  SWIPE_MIN_PX,
+  cardGalleryCss,
+  hasFinePointer,
+  segmentIndex,
+  swipeStep,
+  useCardGallery,
+} from "./cardGallery.js";
+export type { CardGallery } from "./cardGallery.js";
 export { SignInLink } from "./SignInLink.js";
 export type { SignInLinkProps } from "./SignInLink.js";
 export type { CategoryFeaturesProp, ThemeModeProp } from "./types.js";

package/src/headless/ListingComposer.tsx

@@ -57,12 +57,21 @@ import { useMandateGate } from "./useMandateGate.js";
  *
  * ── The steps, and why they are not a `@flow_step` funnel ──────────────────
  *
- *     pick a category → create the draft row → save into it → publish
+ *     create the draft row → save into it → pick a category → publish
  *
  * The server does not sequence these (see `flows/registry.ts`). What DOES
  * sequence them is here, and its stages are named so analytics can follow the
  * funnel without the backend having declared one.
  *
+ * The row comes FIRST, and the category is a field saved into it like any
+ * other. That is not a preference: `category_id` is nullable on the draft half
+ * (stapel-listings 0.21.4) precisely so an id exists before the form is
+ * answerable, and everything addressed by that id — a background analysis of
+ * the first photo, an upload filed against the draft, a link back into an
+ * unfinished submission — cannot start until it does (D261). The category is
+ * mandatory to PUBLISH and nowhere earlier; the server says the same thing,
+ * refusing a publish with `publish_validation_failed` naming `category_id`.
+ *
  * ── The three seams, and why none of them is an import ─────────────────────
  *
  * `@stapel/listings-react`, `@stapel/cdn-react` and `@stapel/categories-react`
@@ -112,7 +121,16 @@ export interface ListingImagesBag {
   readonly settled: ActionAvailability;
 }
 
-/** Where the submission has got to. Named so a funnel can be measured. */
+/**
+ * Where the submission has got to. Named so a funnel can be measured.
+ *
+ * `choosing_category` says the category is not chosen yet and NOTHING about
+ * whether the row exists — since D261 the draft is created by the first save,
+ * category or no category, so `bag.listingId` can be a real id at this stage.
+ * A surface that needs "is there a row" must read `listingId`; reading it off
+ * the stage is what made a draft-addressed job wait for a step it did not
+ * depend on.
+ */
 export type ComposeStage =
   | "choosing_category"
   | "editing"
@@ -457,7 +475,16 @@ export function useListingComposer(
     ? actionBlocked(LISTINGS_I18N_KEYS.composeBlockedBusy)
     : actionAvailable();
 
-  const saveGate = firstBlock(mandate, categoryGate, busyGate);
+  // NO `categoryGate` here (D261). A draft is allowed to exist without a
+  // category — stapel-listings 0.21.4 made `category_id` nullable on the draft
+  // half and `save-draft` accepts a body without one — and holding the SAVE
+  // until a category was picked meant the row did not exist during the step
+  // before it. Everything addressed BY the draft id (an analysis job handed
+  // the id, an upload filed against it, a resumable link) therefore had no id
+  // to be addressed by, and the work never started. The category is still
+  // mandatory to PUBLISH, which is the gate below and the server's own
+  // `publish_validation_failed`.
+  const saveGate = firstBlock(mandate, busyGate);
 
   // The publish gate is the save gate PLUS everything that must be true for a
   // submission to be complete. Order is the order a person would be told:
@@ -490,10 +517,17 @@ export function useListingComposer(
       : actionAvailable()
   );
 
-  /** Create the row on demand: the id is what every other write needs. */
+  /**
+   * Create the row on demand: the id is what every other write needs.
+   *
+   * Created REGARDLESS of the category (D261). The create body carries the
+   * category when there is one and is `{}` when there is not — both are valid
+   * to `POST /listings/` since 0.21.4 — so the earliest save any surface makes
+   * produces an id, and a category picked afterwards is written by the next
+   * `save-draft` like any other field.
+   */
   const ensureListingId = useCallback(async (): Promise<number | undefined> => {
     if (listingId !== undefined && listingId > 0) return listingId;
-    if (effectiveValues.categoryId.length === 0) return undefined;
     const draft = await createDraft.mutateAsync(
       createDraftBody(effectiveValues.categoryId)
     );

package/src/i18n/es.ts

@@ -219,6 +219,9 @@ export const listingsI18nBundleEs: I18nDictionary = {
   "error.400.listing_zero_price_not_allowed":
     "En esta categoría no se permite un precio de 0. Deja el precio vacío para «precio no indicado».",
 
+  "error.400.listing_draft_meta_too_large":
+    "El borrador es demasiado grande (máximo {max_bytes} bytes). Quita parte de los datos y guarda de nuevo.",
+
   "listings.blocked.sign_in": "Inicia sesión para hacer esto",
   "listings.blocked.guest":
     "Esta cuenta todavía no puede hacerlo — termina de configurarla primero",

package/src/i18n/generated/errors.es.gen.ts

@@ -8,7 +8,7 @@ import type { ListingsErrorCode } from "./errors.gen.js";
 /**
  * `es` texts for the backend error codes this catalog carries.
  *
- * PARTIAL, and deliberately typed to say so: 26 key(s) owned by
+ * PARTIAL, and deliberately typed to say so: 27 key(s) owned by
  * stapel_attributes, stapel_listings are absent, because that owner ships no locale catalog
  * (ERRORS_LOCALE_EXEMPT_OWNERS). English for them still comes from the registry
  * artifact via the en bundle; the pair layers its own authored `es`

package/src/i18n/generated/errors.gen.ts

@@ -66,6 +66,7 @@ export const LISTINGS_ERRORS = {
   "error.400.field.unique": { status: 400, params: ["field"], remediation: "fix_input", en: "{field} must be unique" },
   "error.400.image_required": { status: 400, params: [], remediation: "fix_input", en: "At least one image is required to publish" },
   "error.400.invalid_ad_id": { status: 400, params: [], remediation: "fix_input", en: "Invalid advertisement ID" },
+  "error.400.listing_draft_meta_too_large": { status: 400, params: ["max_bytes"], remediation: "fix_input", en: "draft_meta is too large ({max_bytes} bytes max)" },
   "error.400.listing_feature_not_allowed": { status: 400, params: ["feature"], remediation: "fix_input", en: "Feature '{feature}' is not allowed for this category" },
   "error.400.listing_invalid_status_filter": { status: 400, params: ["status"], remediation: "fix_input", en: "Unknown listing status '{status}'" },
   "error.400.listing_location_required": { status: 400, params: [], remediation: "fix_input", en: "Choose where the item is before publishing" },
@@ -140,6 +141,7 @@ export const LISTINGS_ERROR_CODES: readonly ListingsErrorCode[] = [
   "error.400.field.unique",
   "error.400.image_required",
   "error.400.invalid_ad_id",
+  "error.400.listing_draft_meta_too_large",
   "error.400.listing_feature_not_allowed",
   "error.400.listing_invalid_status_filter",
   "error.400.listing_location_required",
@@ -216,6 +218,7 @@ export const listingsErrorBundleEn: Record<ListingsErrorCode, string> = {
   "error.400.field.unique": "{field} must be unique",
   "error.400.image_required": "At least one image is required to publish",
   "error.400.invalid_ad_id": "Invalid advertisement ID",
+  "error.400.listing_draft_meta_too_large": "draft_meta is too large ({max_bytes} bytes max)",
   "error.400.listing_feature_not_allowed": "Feature '{feature}' is not allowed for this category",
   "error.400.listing_invalid_status_filter": "Unknown listing status '{status}'",
   "error.400.listing_location_required": "Choose where the item is before publishing",

package/src/i18n/generated/errors.json

@@ -268,6 +268,15 @@
     "remediation": "fix_input",
     "en": "Invalid advertisement ID"
   },
+  {
+    "code": "error.400.listing_draft_meta_too_large",
+    "status": 400,
+    "params": [
+      "max_bytes"
+    ],
+    "remediation": "fix_input",
+    "en": "draft_meta is too large ({max_bytes} bytes max)"
+  },
   {
     "code": "error.400.listing_feature_not_allowed",
     "status": 400,

package/src/i18n/generated/errors.ru.gen.ts

@@ -8,7 +8,7 @@ import type { ListingsErrorCode } from "./errors.gen.js";
 /**
  * `ru` texts for the backend error codes this catalog carries.
  *
- * PARTIAL, and deliberately typed to say so: 26 key(s) owned by
+ * PARTIAL, and deliberately typed to say so: 27 key(s) owned by
  * stapel_attributes, stapel_listings are absent, because that owner ships no locale catalog
  * (ERRORS_LOCALE_EXEMPT_OWNERS). English for them still comes from the registry
  * artifact via the en bundle; the pair layers its own authored `ru`

package/src/i18n/ru.ts

@@ -244,6 +244,11 @@ export const listingsI18nBundleRu: I18nDictionary = {
   "error.400.listing_zero_price_not_allowed":
     "В этой категории цена 0 недопустима. Оставьте поле пустым — это и есть «цена не указана».",
 
+  // stapel-listings 0.21.2: the composer's per-field provenance sidecar has a
+  // size ceiling, and the number is the server's own — never restated here.
+  "error.400.listing_draft_meta_too_large":
+    "Черновик слишком большой (не больше {max_bytes} байт). Уберите часть данных и сохраните ещё раз.",
+
   "listings.blocked.sign_in": "Войдите, чтобы сделать это",
   "listings.blocked.guest":
     "Этот аккаунт пока так не может — сначала завершите настройку",