@stapel/listings-react 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,167 @@
 # @stapel/listings-react
 
+## 0.3.1
+
+### Patch Changes
+
+- 67793b0: The stock row printed `{count}` at a buyer, and the wiring snippet taught the
+  banned idiom
+
+  Two things the live storefront walk found, both of them the shape of a
+  sentence rather than a bug in behaviour.
+
+  **`<ListingDetailPane>`'s stock row.** `listings.detail.stock` was a whole
+  sentence — `"В наличии: {count}"` — used as a `<Descriptions.Item>` LABEL, with
+  the quantity in the value cell beside it. antd renders the label as written, so
+  the page said `В наличии: {count}: 3`: a raw placeholder in front of a shopper,
+  on the one row that tells them whether the thing is in stock. The row is now
+  what a `<Descriptions>` row is — a label cell (`"In stock"` / `"В наличии"` /
+  `"Disponibles"`, no placeholder; antd draws the colon) and a value cell holding
+  the number, `data-testid="listings-detail-stock"`. A host that overrode this
+  key must drop the `{count}` from its own copy.
+
+  **MODULE.md §4.1.** The composer's wiring example handed features in as
+  `features={features.data ?? []}` — the exact expression `stapel/
+no-flattened-load-state` exists to refuse, published as the recommended way to
+  mount the screen. It now reads `loadStateFromQuery` → `loadedRowsOrEmpty` +
+  `isLoadLoading` / `isLoadFailed`, so "still loading", "this category asks
+  nothing" and "the schema read failed" stay three answers where the publish gate
+  can still tell them apart.
+
+  **The peer floor states what the imports already require.** `LinkComponent`,
+  `SignInCta` and `SignInCtaProp` first shipped in `@stapel/core@0.16.0`, and
+  this package has imported them since; the declared floor still said
+  `>=0.15.0`. It now reads `>=0.16.0 <1.0.0`.
+
+## 0.3.0
+
+### Minor Changes
+
+- 88a8be4: The composer's category seam runs in both directions, so `/new` can be mounted
+
+  A seam that only goes one way is not a seam. `ListingComposerPage.categorySlot`
+  was a `ReactNode`, and the composer's category moves only through
+  `bag.setCategory` — which a node handed in from outside cannot reach. There was
+  no `onCategoryChange` either, so a container could neither set the category nor
+  learn it, and `features` — the schema OF the chosen category, the entire reason
+  the slot exists — was unreachable rather than withheld. The screen rendered and
+  could not be used; the storefront named it a gap instead of shipping it (Wave
+  D, G-1).
+
+  Two ways in, and `categorySlot` keeps rendering (deprecated, nothing breaks):
+
+  ```tsx
+  <ListingComposerPage
+    category={categoryId === null ? "" : String(categoryId)}
+    onCategoryChange={(id) => setCategoryId(id === "" ? null : Number(id))}
+    renderCategoryPicker={({ value, setCategory }) => (
+      <CategoryPickerField
+        value={value === "" ? null : Number(value)}
+        onChange={(id) => setCategory(id === null ? "" : String(id))}
+      />
+    )}
+    features={features.data ?? []}
+    featuresLoading={features.isPending}
+    featuresError={features.error ?? undefined}
+  />
+  ```
+
+  `renderCategoryPicker({ value, setCategory })` is the render-prop shape
+  `<CategoryPage renderListings>` already uses in the sibling pair. `category` /
+  `onCategoryChange` make the hook controlled on that one field, for the
+  container that holds the id anyway — it must, because
+  `useCategoryFeatures(id)` is keyed by it. `onCategoryChange` fires either way:
+  it is the wire the schema read is asked for on.
+
+  `useListingComposer` takes the same two options, so a host with its own skin
+  gets the same seam.
+
+  The README's example is now the wiring that works, and
+  `test/composerCategorySeam.test.tsx` gates it against the props declaration —
+  this pair documented `<MediaGalleryField bag={…}>` for a whole release while
+  the package had no such prop, and nothing in the suite could tell.
+
+- 9230f5f: `<ListingCard>`: one click, one navigation — and a `<Link>` it can be handed
+
+  `href` and `onOpen` were two optional props and the card rendered BOTH when
+  both were given: the handler ran, the container routed, and the browser then
+  followed the anchor still sitting on the button. Two navigations for one click.
+  The storefront's workaround was `onOpen` alone, which cost the most linkable
+  element in the app its anchor — no middle-click, no "open in new tab", nothing
+  for a crawler to follow (Wave D, G-2).
+
+  `ListingCardOpenProps` is now a union with three arms and no fourth:
+
+  ```tsx
+  <ListingCard listing={row} href={`/l/${row.id}`} />                       // an anchor
+  <ListingCard listing={row} href={`/l/${row.id}`} linkComponent={Link} />  // the host's <Link>
+  <ListingCard listing={row} onOpen={(id) => navigate(`/l/${id}`)} />       // a button
+  <ListingCard listing={row} />                                            // no open control
+  ```
+
+  Passing `href` and `onOpen` together no longer typechecks, and neither does a
+  `linkComponent` on the callback arm — `linkComponent` IS the link.
+
+  `linkComponent` is `@stapel/core`'s `LinkComponent`, a component taking a plain
+  `href`, so this pair stays router-agnostic and a container keeps a real anchor
+  while the click stays inside the SPA:
+
+  ```tsx
+  const RouterLink: LinkComponent = ({ href, children, ...rest }) => (
+    <Link to={href} {...rest}>
+      {children}
+    </Link>
+  );
+  ```
+
+  `<FavoritesPane>` takes the same union one level up (`hrefFor` / `onOpen` /
+  `linkComponent`), so a pane cannot re-introduce upstream what the card refuses.
+
+  Breaking only for a caller that passed both props — which is the defect this
+  release removes, and which had no correct behaviour to preserve.
+
+- 3e2e2a3: A blocked control now carries the door, not just the reason: `signIn`
+
+  `actionBlocked` ended the grey-rectangle incident by making every switched-off
+  control state its reason. It did not end the next one. "Sign in to save this",
+  "sign in to leave a review", "sign in to message the seller" are reasons whose
+  next action is a LINK, and no pair took one — so the storefront had to put its
+  own notice a screen away from each of the three controls it was about, and
+  named it a gap rather than shipping it (Wave D, G-3).
+
+  All three now take the same prop, core's `SignInCta`:
+
+  ```tsx
+  <ListingCard listing={row} signIn={{ href: `/login?next=${here}` }} />
+  <ReviewsPanel target={target} signIn={{ href: `/login?next=${here}` }} />
+  <StartChatButton sellerId={sellerId} signIn={{ onSignIn: () => openModal() }} />
+  ```
+
+  `{href}` **or** `{onSignIn}`, never both. Omit it and the reason renders alone,
+  with no trailing whitespace where the link is not — a host with no sign-in
+  route is a supported host.
+
+  Two more things each pair had to fix to make the door reachable:
+
+  - **listings**: the favourite's reason lived only in a `title` on a DISABLED
+    button, which receives no pointer events in any browser — core's own
+    `actionGate.ts` calls that "a reason nobody can read". It is now text beside
+    the heart (`listings-card-favorite-blocked`), with the link inside it. The
+    heart is still never hidden from a visitor.
+  - **chat**: `StartDirectChat` had no mandate gate at all, so a visitor could
+    press "message the seller" and collect a 401 — a refusal delivered at the one
+    moment it is useless. The axis is now the first arm of its `firstBlock`, read
+    through core's `MandateSource` seam. `member` may write; `guest`/`anonymous`
+    are told to sign in; `asking` says we are still asking. `unavailable` stays
+    AVAILABLE on purpose: that is what core answers outside a `<MandateProvider>`
+    too, and a host that never wired the axis must not lose its button — "we
+    could not ask" is not "you may not". This raises chat-react's `@stapel/core`
+    floor to `>=0.15.0`, where `useMandate`/`matchMandate` shipped.
+
+  The link's LABEL is each pair's own (`listings.card.sign_in`,
+  `reviews.form.sign_in`, `chat.start.sign_in`), in all three locales — core
+  floors `en` and `ru`, and these pairs also ship `es`.
+
 ## 0.2.0
 
 ### Minor Changes

package/MODULE.md

@@ -137,13 +137,117 @@ never import each other (the monorepo README states the direction). So:
   by `useUploadQueue()`'s bag. `bag.refs` IS the value of `images_draft` (same
   order, first tile the cover) and `bag.settled` is the submit gate. That pair
   wrote its bag to this contract on purpose (its §13.6 note 9);
-- **the category schema** is a plain `readonly FeatureDef[]`, plus a
-  `categorySlot` for the chooser;
+- **the category schema** is a plain `readonly FeatureDef[]`, plus
+  `renderCategoryPicker` for the chooser (see below);
 - **a stored image reference** is resolved by a host-supplied
-  `ListingImageResolver`.
+  `ListingImageResolver`;
+- **navigation** is core's `LinkComponent` — a component taking a plain `href`.
+  Not react-router: there are several routers and a library that picks one
+  picks it for every host.
 
 `@stapel/attributes-react` IS a dependency; it is L0, like `@stapel/image`.
 
+### 4.0 How a card opens is one contract, and the type enforces it
+
+`href` and `onOpen` were two optional props, and a card given both navigated
+TWICE for one click: the handler ran, the container routed, and the browser
+then followed the anchor still sitting on the button. The storefront worked
+around it by passing `onOpen` alone — which cost the most linkable element in
+the app its anchor (no middle-click, no "open in new tab", nothing for a
+crawler) and was named as gap G-2 rather than shipped as a preference.
+
+`ListingCardOpenProps` is now a three-armed union — `{href, linkComponent?}`,
+`{onOpen}`, or neither — so exactly one navigation mechanism reaches the DOM
+and "both" does not typecheck. `linkComponent` rides on the link arm because
+it IS the link; handing one to a callback card would be two answers to one
+question again. `<FavoritesPane>` takes the same union one level up
+(`hrefFor` / `onOpen` / `linkComponent`), so a pane cannot re-introduce
+upstream what the card refuses.
+
+`test/cardNavigation.test.tsx` asserts on the DOM, not on the props: an anchor
+and no handler, a button and no `href`, a `linkComponent` and no `<a href>` at
+all, plus two `@ts-expect-error` cases for the combinations that used to
+compile.
+
+### 4.1 The category seam has to run in both directions
+
+A seam that only goes one way is not a seam. Until 0.3.0 the chooser arrived
+as `categorySlot: ReactNode` and the composer's category moved only through
+`bag.setCategory` — which a node handed in from outside cannot reach. There
+was no `onCategoryChange` either, so the container could neither set the
+category nor learn it, and `features` — the schema OF the chosen category,
+which is the entire reason the slot exists — was unreachable rather than
+withheld. The screen could not be mounted at all (storefront Wave D, G-1).
+
+Two ways in, both shipping in 0.3.0:
+
+- `renderCategoryPicker({ value, setCategory })` — the render-prop shape
+  `<CategoryPage renderListings>` already uses in the sibling pair;
+- `category` / `onCategoryChange` — controlled, for the container that holds
+  the id anyway.
+
+`categorySlot` still renders (nothing that passed it breaks) and is
+deprecated.
+
+**The features wiring, end to end, and it is the container's:**
+
+```tsx
+const [categoryId, setCategoryId] = useState<number | null>(null);
+const query = useCategoryFeatures(categoryId);      // @stapel/categories-react
+const features = loadStateFromQuery(query);         // @stapel/core
+
+<ListingComposerPage
+  category={categoryId === null ? "" : String(categoryId)}
+  onCategoryChange={(id) => setCategoryId(id === "" ? null : Number(id))}
+  renderCategoryPicker={({ value, setCategory }) => (
+    <CategoryPickerField
+      value={value === "" ? null : Number(value)}
+      onChange={(id) => setCategory(id === null ? "" : String(id))}
+    />
+  )}
+  features={loadedRowsOrEmpty(features)}
+  featuresLoading={isLoadLoading(features)}
+  featuresError={isLoadFailed(features) ? features.error : undefined}
+/>
+```
+
+`features={query.data ?? []}` is what this snippet used to say, and the fleet's
+own `stapel/no-flattened-load-state` forbids it: `?? []` collapses "still
+loading", "loaded and this category asks nothing" and "the schema read failed"
+into one empty array, and the publish gate downstream then cannot tell the
+three apart. `loadStateFromQuery` keeps the discriminant and
+`loadedRowsOrEmpty` is the sanctioned way to hand a non-discriminating
+consumer its rows, with the state — not a flattened array — answering the two
+flags beside it.
+
+`useCategoryFeatures` returns `UseQueryResult<readonly CategoryFeature[]>` and
+`CategoryFeature` IS `FeatureDef` (categories-react re-exports the L0 type
+rather than mirroring it), so nothing converts. The three props travel
+together on purpose: `features={[]}` alone would say "this category asks
+nothing", which during the read is a lie the publish gate must not repeat.
+
+Category ids cross this seam as STRINGS because that is what
+`Listing.category` carries on the wire; the picker speaks numbers, and the two
+lines above are the whole conversion — done once, in the container, where both
+halves are visible.
+
+### 4.2 A stated reason needs a next action
+
+`actionBlocked` ended the grey-rectangle incident: every switched-off control
+states its reason. It did not end the next one. "Sign in to save this" is a
+reason whose next action is a LINK, and no pair took one — so the storefront
+put its own notice a screen away from the three controls it was about (Wave D,
+G-3), and the card's reason lived only in a `title` on a disabled button, which
+receives no pointer events in any browser.
+
+Both halves are closed here: the reason renders as text beside the heart, and
+`signIn` — core's `SignInCta`, `{href}` or `{onSignIn}` and never both — is
+rendered inside the same element. `<StartChatButton>` and `<ReviewFormCard>`
+take the identical prop, so a container writes the destination once.
+
+The LABEL is this pair's (`listings.card.sign_in`, all three locales) rather
+than core's: core floors `en` and `ru`, and this pair also ships `es`.
+
 ## 5. Gates and their reasons
 
 Every write in the pair is behind an `ActionAvailability`. The mandate axis is

package/README.md

@@ -68,6 +68,45 @@ container is the seam:
 that carries each type's display config beside its value. A grid of forty
 cards therefore costs one query and **no category read**.
 
+### How a card opens: one of three, never two
+
+```tsx
+<ListingCard listing={row} href={`/l/${row.id}`} />                       // an anchor
+<ListingCard listing={row} href={`/l/${row.id}`} linkComponent={Link} />  // the host's <Link>
+<ListingCard listing={row} onOpen={(id) => navigate(`/l/${id}`)} />       // a button
+<ListingCard listing={row} />                                            // no open control
+```
+
+`href` and `onOpen` are arms of a union, not two optional props, because a card
+that had both navigated **twice** for one click — the handler ran and the
+browser then followed the anchor. Passing both is now a type error.
+
+`linkComponent` is `@stapel/core`'s `LinkComponent`: a component taking a plain
+`href`, so the pair stays router-agnostic and a container keeps a real anchor
+(middle-click, "open in new tab", a crawler) while the click stays inside the
+SPA:
+
+```tsx
+const RouterLink: LinkComponent = ({ href, children, ...rest }) => (
+  <Link to={href} {...rest}>{children}</Link>
+);
+```
+
+`<FavoritesPane>` takes the same union (`hrefFor` / `onOpen` / `linkComponent`),
+so a pane cannot re-introduce upstream what the card no longer allows.
+
+### The heart a visitor can see, read, and act on
+
+```tsx
+<ListingCard listing={row} href={`/l/${row.id}`} signIn={{ href: `/login?next=${here}` }} />
+```
+
+The favourite control is never hidden from a visitor — it is switched off, the
+reason is printed as TEXT beside it (a tooltip on a disabled button is a reason
+nobody can read), and `signIn` is the door. `SignInCta` is core's, `{href}`
+**or** `{onSignIn}`, the same prop `@stapel/chat-react` and
+`@stapel/reviews-react` take. Omit it and the reason renders alone.
+
 ## Submitting a listing
 
 Four contracts meet on the composer, and three of them arrive as seams rather
@@ -80,17 +119,43 @@ than dependencies:
 | the value editors | `@stapel/attributes-react` | L0, so a direct dependency |
 
 ```tsx
+const [categoryId, setCategoryId] = useState<number | null>(null);
 const gallery = useUploadQueue({ max: 10 });        // @stapel/cdn-react
 const features = useCategoryFeatures(categoryId);   // @stapel/categories-react
 
 <ListingComposerPage
-  features={features}
+  features={features.data ?? []}
+  featuresLoading={features.isPending}
+  featuresError={features.error ?? undefined}
   images={gallery}
-  categorySlot={<CategoryPickerField value={categoryId} onChange={setCategoryId} />}
+  category={categoryId === null ? "" : String(categoryId)}
+  onCategoryChange={(id) => setCategoryId(id === "" ? null : Number(id))}
+  renderCategoryPicker={({ value, setCategory }) => (
+    <CategoryPickerField
+      value={value === "" ? null : Number(value)}
+      onChange={(id) => setCategory(id === null ? "" : String(id))}
+    />
+  )}
   gallerySlot={<MediaGalleryField bag={gallery} />}
 />
 ```
 
+The category is a **render prop**, not a node, because the composer's category
+moves only through `setCategory` — a node rendered into a slot cannot reach it,
+and a picker that cannot report what was chosen means `features` (the whole
+point of the slot) is never read. `category` / `onCategoryChange` are there
+because the container holds the id anyway: `useCategoryFeatures(id)` is keyed
+by it.
+
+The gallery is a node, but the BAG is the same object the composer got — that
+is what makes `bag.refs` the value of `images_draft` and `bag.settled` the
+publish gate. Two queues means the gate talks about photos it cannot see.
+
+The schema arrives as three props, not one, so an empty list is never mistaken
+for "this category asks nothing": `featuresLoading` and `featuresError` each
+block the publish with their own sentence, and only a settled, empty schema
+prints "no extra details for this category".
+
 The flow is `create draft → save into it → publish`. The composer always saves
 before it publishes, because `publish` promotes the STORED draft: publishing
 without saving would promote whatever was there before the last keystroke.

package/dist/default/FavoritesPane.d.ts

@@ -8,11 +8,26 @@
  * the substitution that cost the fleet an incident (spec §7.4).
  */
 import type { ReactElement } from "react";
+import type { LinkComponent } from "@stapel/core";
 import type { ThemeModeProp } from "./types.js";
-export interface FavoritesPaneProps extends ThemeModeProp {
+/** How a card in this grid opens — the same one-contract union `<ListingCard>`
+ * takes, one level up, so a pane cannot re-introduce the double navigation the
+ * card no longer allows. */
+export type FavoritesPaneOpenProps = {
     /** Where a card leads. The container owns routing. */
-    readonly hrefFor?: (id: number) => string;
-    readonly onOpen?: (id: number) => void;
-}
+    readonly hrefFor: (id: number) => string;
+    /** The host's `<Link>`, so a click stays inside the SPA. */
+    readonly linkComponent?: LinkComponent;
+    readonly onOpen?: undefined;
+} | {
+    readonly onOpen: (id: number) => void;
+    readonly hrefFor?: undefined;
+    readonly linkComponent?: undefined;
+} | {
+    readonly hrefFor?: undefined;
+    readonly onOpen?: undefined;
+    readonly linkComponent?: undefined;
+};
+export type FavoritesPaneProps = ThemeModeProp & FavoritesPaneOpenProps;
 export declare function FavoritesPane(props: FavoritesPaneProps): ReactElement;
 //# sourceMappingURL=FavoritesPane.d.ts.map

package/dist/default/FavoritesPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FavoritesPane.d.ts","sourceRoot":"","sources":["../../src/default/FavoritesPane.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,sDAAsD;IACtD,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAiGrE"}
+{"version":3,"file":"FavoritesPane.d.ts","sourceRoot":"","sources":["../../src/default/FavoritesPane.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAOlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD;;4BAE4B;AAC5B,MAAM,MAAM,sBAAsB,GAC9B;IACE,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,4DAA4D;IAC5D,QAAQ,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B,GACD;IACE,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;CACpC,GACD;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;CACpC,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,sBAAsB,CAAC;AAiBxE,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA2FrE"}

package/dist/default/FavoritesPane.js

@@ -6,6 +6,18 @@ import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
 import { ErrorAlert } from "./ErrorAlert.js";
 import { ListingCard } from "./ListingCard.js";
 import { ListingsSkinTheme } from "./theme.js";
+/** The card's own open props for one row. One arm, never two. */
+function cardOpenProps(props, id) {
+    if (props.hrefFor !== undefined) {
+        const href = props.hrefFor(id);
+        return props.linkComponent !== undefined
+            ? { href, linkComponent: props.linkComponent }
+            : { href };
+    }
+    if (props.onOpen !== undefined)
+        return { onOpen: props.onOpen };
+    return {};
+}
 export function FavoritesPane(props) {
     const t = useT();
     const describe = useDescribeFlowError();
@@ -20,9 +32,7 @@ export function FavoritesPane(props) {
                             language: undefined,
                         }), action: _jsx(Button, { size: "small", "data-analytics": "none", "data-analytics-reason": "retrying a read the person already asked for; not a business action", onClick: bag.refetch, children: t(LISTINGS_I18N_KEYS.mineRetry) }) })),
                     empty: () => (_jsx(Empty, { "data-testid": "listings-favorites-empty", description: t(LISTINGS_I18N_KEYS.favoritesEmpty) })),
-                    ready: (rows) => (_jsx(Flex, { wrap: true, gap: 16, "data-testid": "listings-favorites-grid", children: rows.map((row) => (_jsx("div", { style: { width: 240 }, children: _jsx(ListingCard, { listing: row, ...(props.hrefFor !== undefined
-                                    ? { href: props.hrefFor(row.id) }
-                                    : {}), ...(props.onOpen !== undefined ? { onOpen: props.onOpen } : {}) }) }, row.id))) })),
+                    ready: (rows) => (_jsx(Flex, { wrap: true, gap: 16, "data-testid": "listings-favorites-grid", children: rows.map((row) => (_jsx("div", { style: { width: 240 }, children: _jsx(ListingCard, { listing: row, ...cardOpenProps(props, row.id) }) }, row.id))) })),
                 }), _jsxs(Space, { children: [_jsx(Button, { size: "small", disabled: !bag.prevPage.available, "data-testid": "listings-favorites-prev", "data-analytics": "none", "data-analytics-reason": "paging a list the person is already reading; not a business action", onClick: bag.goPrev, children: t(LISTINGS_I18N_KEYS.pagePrev) }), _jsx(Button, { size: "small", disabled: !bag.nextPage.available, "data-testid": "listings-favorites-next", "data-analytics": "none", "data-analytics-reason": "paging a list the person is already reading; not a business action", onClick: bag.goNext, children: t(LISTINGS_I18N_KEYS.pageNext) })] })] }) }));
 }
 //# sourceMappingURL=FavoritesPane.js.map

package/dist/default/FavoritesPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoritesPane.js","sourceRoot":"","sources":["../../src/default/FavoritesPane.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FavoritesPane.js","sourceRoot":"","sources":["../../src/default/FavoritesPane.tsx"],"names":[],"mappings":"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"}

package/dist/default/ListingCard.d.ts

@@ -4,7 +4,15 @@
  * `@stapel/search-react` takes a `renderCard` slot and the container fills it
  * with this (spec §3.7 / §6.2 item 1). The two pairs never import each other;
  * the CONTAINER is the seam, which is why this component takes a plain card
- * row and a plain `href`/`onOpen` rather than reaching for a router.
+ * row and a plain `href` rather than reaching for a router.
+ *
+ * ── One click, one navigation ──────────────────────────────────────────────
+ *
+ * `href` and `onOpen` used to be two optional props, and a card given both
+ * navigated TWICE: the handler ran, and the browser then followed the anchor
+ * that was still on the button. They are now three arms of a union — link,
+ * button, or neither — and `linkComponent` rides on the link arm so a
+ * container can hand in its router's `<Link>` and keep the anchor.
  *
  * ── What it renders without asking the server anything else ────────────────
  *
@@ -16,21 +24,55 @@
  *
  * ── The heart is never hidden ──────────────────────────────────────────────
  *
- * A visitor sees it, blocked, with the reason and the sign-in CTA the
- * container attaches (`?next=`). Hiding it would teach nobody that
- * favourites exist (private-space canon §6.3, spec §6.2 item 6).
+ * A visitor sees it, blocked, with the reason IN WORDS beside it and the
+ * sign-in link the container supplies (`signIn`, typically `?next=<current>`).
+ * Hiding it would teach nobody that favourites exist (private-space canon
+ * §6.3, spec §6.2 item 6) — and until 0.3.0 the reason lived only in a tooltip
+ * on a disabled button, which receives no pointer events in any browser: a
+ * reason nobody could read, and no door to walk through.
  */
 import type { ReactElement, ReactNode } from "react";
+import type { LinkComponent, SignInCtaProp } from "@stapel/core";
 import type { ListingCard as ListingCardData } from "../api/types.js";
 import type { ThemeModeProp } from "./types.js";
-export interface ListingCardProps extends ThemeModeProp {
+/**
+ * How the card opens — ONE of three, and the type says so.
+ *
+ * It used to be two optional props, and a caller that passed both got two
+ * navigations for one click: the handler ran and the browser then followed the
+ * anchor anyway. The storefront worked around it by passing `onOpen` only,
+ * which cost it a real anchor (no middle-click, no "open in new tab", nothing
+ * for a crawler to follow) on the most linkable element in the app.
+ *
+ * So the union has three arms and no fourth: a link, a button, or neither.
+ * `linkComponent` belongs to the link arm because it IS the link — handing a
+ * `<Link>` to a card that navigates by callback would be two answers to one
+ * question again.
+ */
+export type ListingCardOpenProps = {
+    /** Where the card leads. A plain path — the pair never calls
+     * `window.location` and never builds a router descriptor. */
+    readonly href: string;
+    /** The host's `<Link>`, so the click stays inside the SPA. Absent: an
+     * antd link-button carrying the `href`, which reloads the page in a
+     * router app — correct, just not fast. */
+    readonly linkComponent?: LinkComponent;
+    readonly onOpen?: undefined;
+} | {
+    /** The card opens by callback: rendered as a button, with no `href` for
+     * the browser to follow after the handler has already navigated. */
+    readonly onOpen: (id: number) => void;
+    readonly href?: undefined;
+    readonly linkComponent?: undefined;
+} | {
+    /** No open control at all — a card inside a screen that is already the
+     * listing. */
+    readonly href?: undefined;
+    readonly onOpen?: undefined;
+    readonly linkComponent?: undefined;
+};
+export interface ListingCardBaseProps extends ThemeModeProp, SignInCtaProp {
     readonly listing: ListingCardData;
-    /** Where the card leads. The container owns routing, so this is a plain
-     * href a `<Link>` or an `<a>` can carry — the pair never calls
-     * `window.location`. */
-    readonly href?: string;
-    /** Called instead of following `href`, for a host with its own navigation. */
-    readonly onOpen?: (id: number) => void;
     /** Extra chrome the container adds (a `promoted` tag from search, say —
      * DSA Art. 26 marking belongs to the pair that receives it). */
     readonly badge?: ReactNode;
@@ -38,5 +80,6 @@ export interface ListingCardProps extends ThemeModeProp {
      * sense (the owner's own dashboard). NOT a way to hide it from visitors. */
     readonly showFavorite?: boolean;
 }
+export type ListingCardProps = ListingCardBaseProps & ListingCardOpenProps;
 export declare function ListingCard(props: ListingCardProps): ReactElement;
 //# sourceMappingURL=ListingCard.d.ts.map

package/dist/default/ListingCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListingCard.d.ts","sourceRoot":"","sources":["../../src/default/ListingCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAQtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC;;4BAEwB;IACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;oEACgE;IAChE,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;gFAC4E;IAC5E,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA6HjE"}
+{"version":3,"file":"ListingCard.d.ts","sourceRoot":"","sources":["../../src/default/ListingCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAStE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,oBAAoB,GAC5B;IACE;iEAC6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;8CAE0C;IAC1C,QAAQ,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B,GACD;IACE;wEACoE;IACpE,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;CACpC,GACD;IACE;kBACc;IACd,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;CACpC,CAAC;AAEN,MAAM,WAAW,oBAAqB,SAAQ,aAAa,EAAE,aAAa;IACxE,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC;oEACgE;IAChE,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;gFAC4E;IAC5E,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAmE3E,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAgIjE"}

package/dist/default/ListingCard.js

@@ -1,14 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Card, Flex, Tooltip, Typography } from "antd";
-import { useT } from "@stapel/core";
+import { useActionGate, useT } from "@stapel/core";
 import { FeatureBadges } from "@stapel/attributes-react/default";
 import { asFeatureDaoList, featuresDtoFromDaoList, featuresFromDaoList } from "../model/features.js";
 import { lifecycleCaption } from "../model/status.js";
 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 { ListingsSkinTheme } from "./theme.js";
+/**
+ * The one control that opens the card: an anchor, a button, or nothing.
+ *
+ * Exactly one of the three renders, so exactly one navigation happens per
+ * click. That is the whole fix — the branch below has no arm in which both a
+ * handler and an `href` reach the DOM.
+ */
+function OpenControl(props) {
+    const t = useT();
+    const label = t(LISTINGS_I18N_KEYS.cardOpen);
+    if (props.href !== undefined) {
+        const Link = props.linkComponent;
+        // The host's component is rendered as it comes: this pair has no CSS and
+        // no way to hand antd's button styling to a foreign element, and a wrapper
+        // element around a link is a click target that is not the link. A host
+        // that wants the antd look styles its own `<Link>` — it is one component,
+        // written once, and it is already the thing that knows the design system.
+        return Link !== undefined ? (_jsx(Link, { href: props.href, "aria-label": label, "data-testid": "listings-card-open", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", children: label })) : (_jsx(Button, { size: "small", type: "link", href: props.href, "data-testid": "listings-card-open", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", children: label }));
+    }
+    if (props.onOpen !== undefined) {
+        const onOpen = props.onOpen;
+        return (_jsx(Button, { size: "small", type: "link", "data-testid": "listings-card-open", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: () => {
+                onOpen(props.listingId);
+            }, children: label }));
+    }
+    return null;
+}
 export function ListingCard(props) {
     const t = useT();
     const { listing } = props;
@@ -21,6 +49,7 @@ export function ListingCard(props) {
     const price = listing.price !== undefined && listing.price.length > 0
         ? `${listing.price} ${listing.currency ?? ""}`.trim()
         : t(LISTINGS_I18N_KEYS.cardPriceAbsent);
+    const favoriteGate = useActionGate(favorite.gate);
     const favoriteLabel = t(favorite.favorited
         ? LISTINGS_I18N_KEYS.cardFavoriteRemove
         : LISTINGS_I18N_KEYS.cardFavoriteAdd);
@@ -28,10 +57,8 @@ export function ListingCard(props) {
                 ? { "data-listing-status": status.status }
                 : {}), cover: _jsx(ListingPhoto, { imageRef: listing.images?.[0], alt: listing.title ?? String(listing.id), style: { aspectRatio: "4 / 3" } }), children: _jsxs(Flex, { vertical: true, gap: 4, children: [props.badge, _jsx(Typography.Text, { strong: true, "data-testid": "listings-card-price", children: price }), _jsx(Typography.Text, { ellipsis: true, "data-testid": "listings-card-title", children: listing.title ?? "" }), titleDaos.length > 0 ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, children: _jsx(FeatureBadges, { features: featuresFromDaoList(titleDaos)
                                 .map((view) => view.feature), values: featuresDtoFromDaoList(titleDaos) }) })) : null, badgeFeatures.length > 0 ? (_jsx(FeatureBadges, { features: badgeFeatures.map((view) => view.feature), values: badgeValues })) : null, listing.location_label !== undefined &&
-                        listing.location_label.length > 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-card-location", children: listing.location_label })) : null, _jsxs(Flex, { gap: 8, align: "center", children: [props.href !== undefined || props.onOpen !== undefined ? (_jsx(Button, { size: "small", type: "link", ...(props.href !== undefined ? { href: props.href } : {}), "data-testid": "listings-card-open", "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: () => {
-                                    props.onOpen?.(listing.id);
-                                }, children: t(LISTINGS_I18N_KEYS.cardOpen) })) : null, props.showFavorite === false ? null : (_jsx(Tooltip, { title: favorite.gate.available
+                        listing.location_label.length > 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-card-location", children: listing.location_label })) : null, _jsxs(Flex, { gap: 8, align: "center", children: [_jsx(OpenControl, { ...props, listingId: listing.id }), props.showFavorite === false ? null : (_jsx(Tooltip, { title: favorite.gate.available
                                     ? favoriteLabel
-                                    : t(favorite.gate.block.code, favorite.gate.block.params), children: _jsx("span", { "data-testid": "listings-card-favorite-wrap", children: _jsx(Button, { size: "small", disabled: !favorite.gate.available, "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 \u2014 host app wraps with its own tracked()", onClick: favorite.toggle, icon: _jsx(HeartIcon, { filled: favorite.favorited }) }) }) }))] })] }) }) }));
+                                    : t(favorite.gate.block.code, favorite.gate.block.params), children: _jsx("span", { "data-testid": "listings-card-favorite-wrap", children: _jsx(Button, { size: "small", disabled: !favorite.gate.available, "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 \u2014 host app wraps with its own tracked()", onClick: favorite.toggle, icon: _jsx(HeartIcon, { filled: favorite.favorited }) }) }) }))] }), props.showFavorite === false || favoriteGate.reason === undefined ? null : (_jsxs(Typography.Text, { type: "secondary", "data-testid": "listings-card-favorite-blocked", children: [favoriteGate.reason, _jsx(SignInLink, { cta: props.signIn, testId: "listings-card-sign-in" })] }))] }) }) }));
 }
 //# sourceMappingURL=ListingCard.js.map