@stapel/listings-react 0.25.10 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/CHANGELOG.md +259 -0
  2. package/MODULE.md +3 -1
  3. package/README.md +122 -9
  4. package/dist/api/generated/schema.d.ts +22 -12
  5. package/dist/api/generated/schema.d.ts.map +1 -1
  6. package/dist/default/CardBadges.d.ts.map +1 -1
  7. package/dist/default/CardBadges.js +3 -1
  8. package/dist/default/CardBadges.js.map +1 -1
  9. package/dist/default/ListingActions.d.ts +108 -0
  10. package/dist/default/ListingActions.d.ts.map +1 -0
  11. package/dist/default/ListingActions.js +29 -0
  12. package/dist/default/ListingActions.js.map +1 -0
  13. package/dist/default/ListingCard.d.ts.map +1 -1
  14. package/dist/default/ListingCard.js +15 -8
  15. package/dist/default/ListingCard.js.map +1 -1
  16. package/dist/default/ListingDetailPane.d.ts +170 -62
  17. package/dist/default/ListingDetailPane.d.ts.map +1 -1
  18. package/dist/default/ListingDetailPane.js +284 -28
  19. package/dist/default/ListingDetailPane.js.map +1 -1
  20. package/dist/default/ListingFeedCard.d.ts.map +1 -1
  21. package/dist/default/ListingFeedCard.js +2 -1
  22. package/dist/default/ListingFeedCard.js.map +1 -1
  23. package/dist/default/ListingPhoto.d.ts.map +1 -1
  24. package/dist/default/ListingPhoto.js +5 -2
  25. package/dist/default/ListingPhoto.js.map +1 -1
  26. package/dist/default/ListingSerpCard.d.ts.map +1 -1
  27. package/dist/default/ListingSerpCard.js +18 -4
  28. package/dist/default/ListingSerpCard.js.map +1 -1
  29. package/dist/default/MyListingsPane.d.ts.map +1 -1
  30. package/dist/default/MyListingsPane.js +49 -21
  31. package/dist/default/MyListingsPane.js.map +1 -1
  32. package/dist/default/ShareAction.d.ts +32 -0
  33. package/dist/default/ShareAction.d.ts.map +1 -0
  34. package/dist/default/ShareAction.js +116 -0
  35. package/dist/default/ShareAction.js.map +1 -0
  36. package/dist/default/actionRow.d.ts +58 -0
  37. package/dist/default/actionRow.d.ts.map +1 -0
  38. package/dist/default/actionRow.js +128 -0
  39. package/dist/default/actionRow.js.map +1 -0
  40. package/dist/default/cardGallery.d.ts +2 -0
  41. package/dist/default/cardGallery.d.ts.map +1 -1
  42. package/dist/default/cardGallery.js +31 -0
  43. package/dist/default/cardGallery.js.map +1 -1
  44. package/dist/default/detailGallery.d.ts +77 -0
  45. package/dist/default/detailGallery.d.ts.map +1 -0
  46. package/dist/default/detailGallery.js +91 -0
  47. package/dist/default/detailGallery.js.map +1 -0
  48. package/dist/default/favorite.d.ts +25 -0
  49. package/dist/default/favorite.d.ts.map +1 -1
  50. package/dist/default/favorite.js +29 -3
  51. package/dist/default/favorite.js.map +1 -1
  52. package/dist/default/icons.d.ts +19 -0
  53. package/dist/default/icons.d.ts.map +1 -1
  54. package/dist/default/icons.js +23 -0
  55. package/dist/default/icons.js.map +1 -1
  56. package/dist/default/index.d.ts +11 -2
  57. package/dist/default/index.d.ts.map +1 -1
  58. package/dist/default/index.js +10 -1
  59. package/dist/default/index.js.map +1 -1
  60. package/dist/default/movableCluster.d.ts +18 -0
  61. package/dist/default/movableCluster.d.ts.map +1 -0
  62. package/dist/default/movableCluster.js +110 -0
  63. package/dist/default/movableCluster.js.map +1 -0
  64. package/dist/default/notice.d.ts +14 -0
  65. package/dist/default/notice.d.ts.map +1 -0
  66. package/dist/default/notice.js +62 -0
  67. package/dist/default/notice.js.map +1 -0
  68. package/dist/headless/MyListings.d.ts +61 -19
  69. package/dist/headless/MyListings.d.ts.map +1 -1
  70. package/dist/headless/MyListings.js +58 -19
  71. package/dist/headless/MyListings.js.map +1 -1
  72. package/dist/headless/Share.d.ts +103 -0
  73. package/dist/headless/Share.d.ts.map +1 -0
  74. package/dist/headless/Share.js +190 -0
  75. package/dist/headless/Share.js.map +1 -0
  76. package/dist/i18n/es.d.ts.map +1 -1
  77. package/dist/i18n/es.js +21 -0
  78. package/dist/i18n/es.js.map +1 -1
  79. package/dist/i18n/generated/errors.es.gen.d.ts +1 -1
  80. package/dist/i18n/generated/errors.es.gen.js +1 -1
  81. package/dist/i18n/generated/errors.gen.d.ts +18 -0
  82. package/dist/i18n/generated/errors.gen.d.ts.map +1 -1
  83. package/dist/i18n/generated/errors.gen.js +9 -0
  84. package/dist/i18n/generated/errors.gen.js.map +1 -1
  85. package/dist/i18n/generated/errors.ru.gen.d.ts +1 -1
  86. package/dist/i18n/generated/errors.ru.gen.js +1 -1
  87. package/dist/i18n/keys.d.ts +45 -0
  88. package/dist/i18n/keys.d.ts.map +1 -1
  89. package/dist/i18n/keys.js +60 -0
  90. package/dist/i18n/keys.js.map +1 -1
  91. package/dist/i18n/ru.d.ts.map +1 -1
  92. package/dist/i18n/ru.js +21 -0
  93. package/dist/i18n/ru.js.map +1 -1
  94. package/dist/index.d.ts +5 -3
  95. package/dist/index.d.ts.map +1 -1
  96. package/dist/index.js +2 -1
  97. package/dist/index.js.map +1 -1
  98. package/dist/model/cardBadges.d.ts +52 -3
  99. package/dist/model/cardBadges.d.ts.map +1 -1
  100. package/dist/model/cardBadges.js +74 -12
  101. package/dist/model/cardBadges.js.map +1 -1
  102. package/dist/model/mineSource.d.ts +9 -3
  103. package/dist/model/mineSource.d.ts.map +1 -1
  104. package/dist/model/mineSource.js.map +1 -1
  105. package/dist/model/status.d.ts +79 -15
  106. package/dist/model/status.d.ts.map +1 -1
  107. package/dist/model/status.js +86 -17
  108. package/dist/model/status.js.map +1 -1
  109. package/llms.txt +8 -3
  110. package/manifest.json +96 -4
  111. package/nav-manifest.json +1 -1
  112. package/package.json +10 -10
  113. package/src/analytics/generated/events.json +1 -1
  114. package/src/api/generated/schema.ts +22 -12
  115. package/src/default/CardBadges.tsx +3 -1
  116. package/src/default/ListingActions.tsx +196 -0
  117. package/src/default/ListingCard.tsx +79 -43
  118. package/src/default/ListingDetailPane.tsx +520 -89
  119. package/src/default/ListingFeedCard.tsx +2 -0
  120. package/src/default/ListingPhoto.tsx +28 -0
  121. package/src/default/ListingSerpCard.tsx +39 -12
  122. package/src/default/MyListingsPane.tsx +81 -44
  123. package/src/default/ShareAction.tsx +260 -0
  124. package/src/default/actionRow.ts +131 -0
  125. package/src/default/cardGallery.ts +31 -0
  126. package/src/default/detailGallery.ts +97 -0
  127. package/src/default/favorite.tsx +68 -1
  128. package/src/default/icons.tsx +60 -0
  129. package/src/default/index.ts +37 -1
  130. package/src/default/movableCluster.tsx +137 -0
  131. package/src/default/notice.ts +68 -0
  132. package/src/headless/MyListings.tsx +130 -39
  133. package/src/headless/Share.tsx +278 -0
  134. package/src/i18n/es.ts +28 -0
  135. package/src/i18n/generated/errors.es.gen.ts +1 -1
  136. package/src/i18n/generated/errors.gen.ts +9 -0
  137. package/src/i18n/generated/errors.json +31 -0
  138. package/src/i18n/generated/errors.ru.gen.ts +1 -1
  139. package/src/i18n/keys.ts +63 -0
  140. package/src/i18n/ru.ts +28 -0
  141. package/src/index.ts +22 -0
  142. package/src/model/cardBadges.ts +124 -12
  143. package/src/model/mineSource.ts +9 -3
  144. package/src/model/status.ts +102 -20
@@ -0,0 +1,128 @@
1
+ /**
2
+ * The geometry of a listing's action row — the heart, the share button, and
3
+ * the rules that make both of them reachable with a thumb.
4
+ *
5
+ * Split out of `<ListingActions>` so `<ShareAction>` can carry the same class
6
+ * without the two modules importing each other, and so the numbers below are
7
+ * something a test can READ rather than something a rendered button implies.
8
+ *
9
+ * ── Why a class and not an inline style ───────────────────────────────────
10
+ *
11
+ * Three of the four rules here cannot be written inline at all: a media query
12
+ * (the label that disappears on a phone), a descendant selector (the hit area
13
+ * of whatever element the skin registry substituted for antd's button), and
14
+ * `:focus-visible`. The fourth — the 44px floor — is written here with them so
15
+ * that "how big is this control" has ONE answer in this package instead of one
16
+ * per surface, which is how the SERP heart ended up 32px while the feed
17
+ * heart was 40 and neither was the number the platform guidelines ask for.
18
+ *
19
+ * ── 44 px, and where the number comes from ────────────────────────────────
20
+ *
21
+ * `controls["height-phone"]` — the token dictionary's own touch floor, the
22
+ * same value `SkinTheme` feeds antd as `controlHeight` on a phone (WCAG 2.5.8
23
+ * and both platform HIGs land on 44 CSS px). It is applied here as a MINIMUM
24
+ * on every viewport rather than only on a phone: these two controls are small
25
+ * glyphs pinned to the corner of a photograph, and a 32px circle at the edge
26
+ * of an image is a miss on a touchscreen laptop as surely as on a phone.
27
+ */
28
+ import { breakpoints, controls, radii, spacing } from "@stapel/tokens";
29
+ /** The class every control in the PAGE cluster carries: the 44px floor. */
30
+ export const LISTING_ACTION_CLASS = "stapel-listing-action";
31
+ /**
32
+ * The class a CARD's control carries — the same floor, one tier smaller on a
33
+ * pointer device.
34
+ *
35
+ * A card heart is drawn forty to a screen on a desktop grid, where the
36
+ * reference classified uses a 36px target and a cursor hits it every time;
37
+ * the same glyph on a phone is a thumb target and goes back to 44. Two tiers
38
+ * rather than one number, because a 44px circle in the corner of a 267px
39
+ * photograph is a fifth of the picture's height on a desktop — measured
40
+ * against the reference (§23), which is why this is not simply
41
+ * {@link LISTING_ACTION_CLASS}.
42
+ *
43
+ * The GLYPH does not change size in either tier; only the box around it does.
44
+ */
45
+ export const LISTING_CARD_ACTION_CLASS = "stapel-listing-card-action";
46
+ /** The class the cluster's row carries. */
47
+ export const LISTING_ACTIONS_CLASS = "stapel-listing-actions";
48
+ /**
49
+ * The class that pins the cluster to the trailing TOP corner of the media it
50
+ * is drawn over.
51
+ *
52
+ * Top-trailing is the one corner of a card gallery that is free: the dots own
53
+ * the bottom centre (`SkinCarousel`) and the "3 of 16" counter owns the
54
+ * bottom trailing corner (`cardGalleryCss`). Nothing here may move into
55
+ * either, which is why this is a named constant with a comment rather than
56
+ * two numbers picked per surface.
57
+ */
58
+ export const LISTING_ACTIONS_OVERLAY_CLASS = "stapel-listing-actions-over";
59
+ /** The class on the WORD beside a glyph — painted on a desktop, dropped on a
60
+ * phone, where the same word is still the control's accessible name. */
61
+ export const LISTING_ACTION_LABEL_CLASS = "stapel-listing-action-label";
62
+ /** The `href` the hoisted action-row stylesheet is deduplicated by. */
63
+ export const LISTING_ACTIONS_STYLE_HREF = "stapel-listings-action-row";
64
+ /**
65
+ * The minimum touch target for every control in the cluster, in CSS pixels.
66
+ *
67
+ * Exported so a host laying out beside the cluster measures against the same
68
+ * number — and so `test/shareAction.test.tsx` asserts the rule carries THIS
69
+ * value rather than a literal that could drift from the token.
70
+ */
71
+ export const LISTING_ACTION_HIT = controls["height-phone"];
72
+ /**
73
+ * A CARD control's minimum target on a pointer device, in CSS pixels.
74
+ *
75
+ * The reference classified's own desktop measurement (§23). It is not on the
76
+ * token scale, and it is not meant to be: the scale carries a control HEIGHT
77
+ * (32) and a touch FLOOR (44), and this is the third thing — the smallest box
78
+ * a cursor reliably hits around a 16px glyph. Named, with the measurement,
79
+ * rather than typed into a stylesheet as `36`.
80
+ *
81
+ * On a phone the card control goes back to {@link LISTING_ACTION_HIT}: there
82
+ * is no such thing as a small touch target.
83
+ */
84
+ export const LISTING_CARD_ACTION_HIT = 36;
85
+ export function actionRowCss() {
86
+ const action = `.${LISTING_ACTION_CLASS}`;
87
+ const cardAction = `.${LISTING_CARD_ACTION_CLASS}`;
88
+ const row = `.${LISTING_ACTIONS_CLASS}`;
89
+ const over = `.${LISTING_ACTIONS_OVERLAY_CLASS}`;
90
+ const label = `.${LISTING_ACTION_LABEL_CLASS}`;
91
+ const hit = String(LISTING_ACTION_HIT);
92
+ const phone = `(max-width:${String(breakpoints.tablet - 1)}px)`;
93
+ return [
94
+ // The floor. `min-*` rather than `width`/`height`: a share button with a
95
+ // word in it is wider than 44px and must stay so, and antd's own
96
+ // `controlHeight` already reaches the height on a phone — this is the
97
+ // guarantee for every OTHER viewport and for a host-registered button
98
+ // that never read the antd token at all.
99
+ `${action}{min-inline-size:${hit}px;min-block-size:${hit}px;` +
100
+ `display:inline-flex;align-items:center;justify-content:center}`,
101
+ // A card's control: one tier smaller where there is a cursor, the same
102
+ // 44px where there is a thumb. See LISTING_CARD_ACTION_HIT.
103
+ `${cardAction}{min-inline-size:${String(LISTING_CARD_ACTION_HIT)}px;` +
104
+ `min-block-size:${String(LISTING_CARD_ACTION_HIT)}px;` +
105
+ `display:inline-flex;align-items:center;justify-content:center}`,
106
+ `@media ${phone}{${cardAction}{min-inline-size:${hit}px;min-block-size:${hit}px}}`,
107
+ // The cluster. `align-items:flex-end` so a blocked heart's reason — the
108
+ // one thing here that can be two lines — stacks against the same edge
109
+ // instead of pushing the controls inwards (the arrangement
110
+ // `<ListingFeedCard>` already ships).
111
+ `${row}{display:flex;align-items:flex-end;gap:${String(spacing[2])}px}`,
112
+ // Over a photograph. `z-index:2` puts it above the counter's `1`; the two
113
+ // never meet anyway (top-trailing against bottom-trailing) and the layer
114
+ // is stated so a future third overlay has an order to join.
115
+ `${over}{position:absolute;inset-block-start:${String(spacing[2])}px;` +
116
+ `inset-inline-end:${String(spacing[2])}px;z-index:2;` +
117
+ `flex-direction:column;align-items:flex-end;` +
118
+ `border-radius:${String(radii.full)}px}`,
119
+ // THE WORD DISAPPEARS ON A PHONE, THE NAME NEVER DOES. Both controls
120
+ // carry their `aria-label` in every arm, so what a screen reader
121
+ // announces is identical at 390px and at 1440px; what changes is whether
122
+ // there is room to paint the word as well. A viewport query rather than a
123
+ // container one: this is chrome, not a layout that has to fit a track,
124
+ // and the question really is "is this a phone".
125
+ `@media ${phone}{${label}{display:none}}`,
126
+ ].join("");
127
+ }
128
+ //# sourceMappingURL=actionRow.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"actionRow.js","sourceRoot":"","sources":["../../src/default/actionRow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEvE,2EAA2E;AAC3E,MAAM,CAAC,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;AAC5D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,4BAA4B,CAAC;AACtE,2CAA2C;AAC3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAC9D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,6BAA6B,CAAC;AAC3E;wEACwE;AACxE,MAAM,CAAC,MAAM,0BAA0B,GAAG,6BAA6B,CAAC;AACxE,uEAAuE;AACvE,MAAM,CAAC,MAAM,0BAA0B,GAAG,4BAA4B,CAAC;AAEvE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEnE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAE1C,MAAM,UAAU,YAAY;IAC1B,MAAM,MAAM,GAAG,IAAI,oBAAoB,EAAE,CAAC;IAC1C,MAAM,UAAU,GAAG,IAAI,yBAAyB,EAAE,CAAC;IACnD,MAAM,GAAG,GAAG,IAAI,qBAAqB,EAAE,CAAC;IACxC,MAAM,IAAI,GAAG,IAAI,6BAA6B,EAAE,CAAC;IACjD,MAAM,KAAK,GAAG,IAAI,0BAA0B,EAAE,CAAC;IAC/C,MAAM,GAAG,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,cAAc,MAAM,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC;IAChE,OAAO;QACL,yEAAyE;QACzE,iEAAiE;QACjE,sEAAsE;QACtE,sEAAsE;QACtE,yCAAyC;QACzC,GAAG,MAAM,oBAAoB,GAAG,qBAAqB,GAAG,KAAK;YAC3D,gEAAgE;QAClE,uEAAuE;QACvE,4DAA4D;QAC5D,GAAG,UAAU,oBAAoB,MAAM,CAAC,uBAAuB,CAAC,KAAK;YACnE,kBAAkB,MAAM,CAAC,uBAAuB,CAAC,KAAK;YACtD,gEAAgE;QAClE,UAAU,KAAK,IAAI,UAAU,oBAAoB,GAAG,qBAAqB,GAAG,MAAM;QAClF,wEAAwE;QACxE,sEAAsE;QACtE,2DAA2D;QAC3D,sCAAsC;QACtC,GAAG,GAAG,0CAA0C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;QACvE,0EAA0E;QAC1E,yEAAyE;QACzE,4DAA4D;QAC5D,GAAG,IAAI,wCAAwC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;YACpE,oBAAoB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,eAAe;YACrD,6CAA6C;YAC7C,iBAAiB,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK;QAC1C,qEAAqE;QACrE,iEAAiE;QACjE,yEAAyE;QACzE,0EAA0E;QAC1E,uEAAuE;QACvE,gDAAgD;QAChD,UAAU,KAAK,IAAI,KAAK,iBAAiB;KAC1C,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC"}
@@ -1,6 +1,8 @@
1
1
  import type { PointerEvent as ReactPointerEvent, RefObject } from "react";
2
2
  /** The class the gallery's own box carries — see {@link cardGalleryCss}. */
3
3
  export declare const CARD_GALLERY_CLASS = "stapel-listing-gallery";
4
+ /** The class the "3 of 16" pill carries — see {@link cardGalleryCss}. */
5
+ export declare const CARD_GALLERY_COUNTER_CLASS = "stapel-listing-gallery-count";
4
6
  /** The `href` the hoisted gallery stylesheet is deduplicated by. */
5
7
  export declare const CARD_GALLERY_STYLE_HREF = "stapel-listings-card-gallery";
6
8
  /** The environment a hover scrub is allowed in, and the only one. */
@@ -1 +1 @@
1
- {"version":3,"file":"cardGallery.d.ts","sourceRoot":"","sources":["../../src/default/cardGallery.ts"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,YAAY,IAAI,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,2BAA2B,CAAC;AAC3D,oEAAoE;AACpE,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,qEAAqE;AACrE,eAAO,MAAM,WAAW,uCAAuC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIlF;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAK5D;AAED;;;qDAGqD;AACrD,wBAAgB,cAAc,IAAI,OAAO,CAOxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,IAAI,OAAO,CA0BxC;AAED,yEAAyE;AACzE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,0CAA0C;IAC1C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD;6DACyD;IACzD,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3E,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3E,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC7E;AAoBD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAgIzD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAevC"}
1
+ {"version":3,"file":"cardGallery.d.ts","sourceRoot":"","sources":["../../src/default/cardGallery.ts"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,YAAY,IAAI,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,2BAA2B,CAAC;AAC3D,yEAAyE;AACzE,eAAO,MAAM,0BAA0B,iCAAiC,CAAC;AACzE,oEAAoE;AACpE,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,qEAAqE;AACrE,eAAO,MAAM,WAAW,uCAAuC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIlF;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAK5D;AAED;;;qDAGqD;AACrD,wBAAgB,cAAc,IAAI,OAAO,CAOxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,IAAI,OAAO,CA0BxC;AAED,yEAAyE;AACzE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,0CAA0C;IAC1C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD;6DACyD;IACzD,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3E,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3E,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC7E;AAoBD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAgIzD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,MAAM,CA2CvC"}
@@ -45,8 +45,11 @@
45
45
  * anchor with one accessible name.
46
46
  */
47
47
  import { useCallback, useEffect, useRef, useState } from "react";
48
+ import { fontSize, radii, spacing } from "@stapel/tokens";
48
49
  /** The class the gallery's own box carries — see {@link cardGalleryCss}. */
49
50
  export const CARD_GALLERY_CLASS = "stapel-listing-gallery";
51
+ /** The class the "3 of 16" pill carries — see {@link cardGalleryCss}. */
52
+ export const CARD_GALLERY_COUNTER_CLASS = "stapel-listing-gallery-count";
50
53
  /** The `href` the hoisted gallery stylesheet is deduplicated by. */
51
54
  export const CARD_GALLERY_STYLE_HREF = "stapel-listings-card-gallery";
52
55
  /** The environment a hover scrub is allowed in, and the only one. */
@@ -297,7 +300,35 @@ export function useCardGallery(count) {
297
300
  */
298
301
  export function cardGalleryCss() {
299
302
  const box = `.${CARD_GALLERY_CLASS}`;
303
+ const counter = `.${CARD_GALLERY_COUNTER_CLASS}`;
300
304
  return [
305
+ // The counter is placed against this box, so the box has to be the
306
+ // containing block. Nothing else about the gallery changes: a `relative`
307
+ // with no offsets moves no pixel of what is already in it.
308
+ `${box}{position:relative}`,
309
+ // "3 of 16", bottom-TRAILING corner — the dots own the bottom centre
310
+ // (`SkinCarousel`: `inset-inline:0; justify-content:center`) and two
311
+ // indicators fighting for one spot is worse than neither.
312
+ //
313
+ // `pointer-events:none` is load-bearing rather than tidy: this box owns
314
+ // the hover-scrub and the swipe, and an element that swallowed a pointer
315
+ // would make one corner of every card's photograph dead to both gestures.
316
+ //
317
+ // A FIXED scrim and white text, not a theme role, and this is the one
318
+ // place in the package where that is the right answer: the pill sits on
319
+ // an arbitrary PHOTOGRAPH, which is neither light nor dark, so a value
320
+ // that followed the page's theme would be unreadable on half the photos
321
+ // in either one.
322
+ `${counter}{position:absolute;inset-block-end:${String(spacing[2])}px;` +
323
+ `inset-inline-end:${String(spacing[2])}px;z-index:1;pointer-events:none;` +
324
+ `padding:${String(spacing[1] / 2)}px ${String(spacing[2])}px;` +
325
+ `border-radius:${String(radii.full)}px;` +
326
+ `background:rgba(0,0,0,0.55);color:#fff;` +
327
+ `font-size:${String(fontSize.xs.fontSize)}px;` +
328
+ `line-height:${String(fontSize.xs.lineHeight)}px;` +
329
+ // A counter whose digits change width makes the pill twitch on every
330
+ // swipe.
331
+ `font-variant-numeric:tabular-nums}`,
301
332
  // THE VERTICAL AXIS IS THE BROWSER'S, and is not negotiable: a card is a
302
333
  // small box in a long feed, and the one unacceptable outcome of a gallery
303
334
  // gesture is a page that will not scroll. `pan-y` says so at the platform
@@ -1 +1 @@
1
- {"version":3,"file":"cardGallery.js","sourceRoot":"","sources":["../../src/default/cardGallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjE,4EAA4E;AAC5E,MAAM,CAAC,MAAM,kBAAkB,GAAG,wBAAwB,CAAC;AAC3D,oEAAoE;AACpE,MAAM,CAAC,MAAM,uBAAuB,GAAG,8BAA8B,CAAC;AAEtE,qEAAqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG,oCAAoC,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAE/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,KAAa,EAAE,KAAa;IACxE,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC;IACvC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;IAClD,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,EAAU,EAAE,EAAU;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC5B,IAAI,MAAM,GAAG,YAAY;QAAE,OAAO,CAAC,CAAC;IACpC,IAAI,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,gBAAgB;QAAE,OAAO,CAAC,CAAC;IACxD,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC;AAED;;;qDAGqD;AACrD,MAAM,UAAU,cAAc;IAC5B,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;QAAE,OAAO,KAAK,CAAC;IAC3F,IAAI,CAAC;QACH,OAAO,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC;IAChD,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;YAAE,OAAO;QACrF,IAAI,KAAqB,CAAC;QAC1B,IAAI,CAAC;YACH,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QACzC,CAAC;QAAC,MAAM,CAAC;YACP,OAAO;QACT,CAAC;QACD,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,QAAQ,GAAG,CAAC,KAA0B,EAAQ,EAAE;YACpD,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACzB,CAAC,CAAC;QACF,kEAAkE;QAClE,0EAA0E;QAC1E,wDAAwD;QACxD,IAAI,OAAO,KAAK,CAAC,gBAAgB,KAAK,UAAU,EAAE,CAAC;YACjD,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAC3C,OAAO,GAAG,EAAE;gBACV,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAChD,CAAC,CAAC;QACJ,CAAC;QACD,OAAO;IACT,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,IAAI,CAAC;AACd,CAAC;AA8BD;;;0DAG0D;AAC1D,SAAS,SAAS,CAAC,GAAgB,EAAE,KAAa,EAAE,OAAgB;IAClE,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAc,8BAA8B,CAAC,CAAC;IAC7E,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO;IAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO;IAC3B,MAAM,IAAI,GACR,KAAK,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC;IAC7F,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;QACzC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IAClE,CAAC;SAAM,CAAC;QACN,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;IAC1B,CAAC;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,KAAa;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,0EAA0E;IAC1E,wDAAwD;IACxD,MAAM,MAAM,GAAG,MAAM,CAAkC,IAAI,CAAC,CAAC;IAC7D;;;;;;;;;;;;;OAaG;IACH,MAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAC9B,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;IAEvB,wEAAwE;IACxE,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,IAA4C,EAAQ,EAAE;QACrD,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE;YACpB,MAAM,KAAK,GAAG,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAChE,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;YAC1B,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;IACL,CAAC,EACD,EAAE,CACH,CAAC;IAEF;;;;;;;OAOG;IACH,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAa,EAAQ,EAAE;QACxD,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,0EAA0E;IAC1E,wEAAwE;IACxE,oBAAoB;IACpB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;QACxB,IAAI,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO;QAClC,IAAI,SAAS,CAAC,OAAO,KAAK,MAAM;YAAE,OAAO;QACzC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;IAE9B,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAwC,EAAQ,EAAE;QACjD,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,KAAK,CAAC,WAAW,KAAK,OAAO,EAAE,CAAC;YAClC,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;YACxB,IAAI,GAAG,KAAK,IAAI;gBAAE,OAAO;YACzB,MAAM,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;YACzC,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;YACpE,OAAO;QACT,CAAC;QACD,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;QAC5B,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAC1B,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACvE,IAAI,IAAI,KAAK,CAAC;YAAE,OAAO;QACvB,uEAAuE;QACvE,wDAAwD;QACxD,MAAM,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QACxD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IACzE,CAAC,EACD,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,CAC7B,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAwC,EAAQ,EAAE;QACjD,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,WAAW,KAAK,OAAO;YAAE,OAAO;QACnD,MAAM,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;IAC1D,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CAAC,GAAS,EAAE;QACrC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAwC,EAAQ,EAAE;QACjD,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,qDAAqD;QACrD,EAAE;QACF,iEAAiE;QACjE,uEAAuE;QACvE,qEAAqE;QACrE,mEAAmE;QACnE,iEAAiE;QACjE,gEAAgE;QAChE,wCAAwC;QACxC,IAAI,KAAK,CAAC,WAAW,KAAK,OAAO;YAAE,OAAO;QAC1C,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,OAAO,CAAC,CAAC,CAAC,CAAC;IACb,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,OAAO;QACL,GAAG;QACH,MAAM;QACN,SAAS;QACT,aAAa;QACb,aAAa;QACb,aAAa;QACb,WAAW,EAAE,OAAO;QACpB,eAAe,EAAE,OAAO;QACxB,cAAc;KACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,GAAG,GAAG,IAAI,kBAAkB,EAAE,CAAC;IACrC,OAAO;QACL,yEAAyE;QACzE,0EAA0E;QAC1E,0EAA0E;QAC1E,sEAAsE;QACtE,4BAA4B;QAC5B,GAAG,GAAG,mDAAmD;QACzD,wEAAwE;QACxE,qEAAqE;QACrE,yEAAyE;QACzE,YAAY;QACZ,GAAG,GAAG,4EAA4E;KACnF,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC"}
1
+ {"version":3,"file":"cardGallery.js","sourceRoot":"","sources":["../../src/default/cardGallery.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,77 @@
1
+ /**
2
+ * HOW THE LISTING PAGE LAYS OUT ITS PHOTOGRAPHS — and why the answer is a
3
+ * class and a prop rather than an inline `display`.
4
+ *
5
+ * ── The defect a container was carrying ───────────────────────────────────
6
+ *
7
+ * The gallery is an element-width grid (`repeat(auto-fit, minmax(14rem,
8
+ * 1fr))`), which on a 390px phone resolves to ONE column: a listing with three
9
+ * pictures pushes its own title and price nearly three screens down, and the
10
+ * first thing a person sees after tapping a search result is a photograph with
11
+ * nothing beside it. A phone lays photographs out as a snap-scrolling STRIP —
12
+ * one visible with the next peeking, title and price directly under it.
13
+ *
14
+ * That is layout, and layout is the container's to decide. But the pane wrote
15
+ * `display: grid` INLINE, and an inline declaration is beaten by nothing that
16
+ * is not `!important` — so a live storefront carried
17
+ * `[data-testid="listings-detail-gallery"] { display: flex !important }`
18
+ * against a pair's own geometry, named by a test id, to say a thing the pair
19
+ * offered no way to say (a client storefront's own stylesheet, §2).
20
+ *
21
+ * ── The seam ──────────────────────────────────────────────────────────────
22
+ *
23
+ * Two halves, and both matter:
24
+ *
25
+ * 1. `<ListingDetailPane galleryLayout>` — the pane ships BOTH layouts and
26
+ * the host names one, exactly as it already names `layout="split"` and
27
+ * `gutter`. The host is the side that knows the viewport it granted;
28
+ * a media query guessed in a leaf is the thing this package does not do.
29
+ * 2. `display` and the track are no longer inline. They live on this
30
+ * stylesheet, at one class plus one attribute, so a host that wants
31
+ * something neither arm offers can still write CSS for it at its own
32
+ * breakpoints — and needs no `!important` to be heard, only a selector of
33
+ * its own (`[data-testid="listings-detail-gallery"][data-gallery-layout]`
34
+ * ties; add any third condition and it wins).
35
+ *
36
+ * What stays inline is what nobody overrides and what a stylesheet would make
37
+ * worse: the `gap` (the page's own responsive gutter token, D418 — a var, so
38
+ * a resize reflows it) and `position: relative`, which is the containing block
39
+ * the `actionsPlacement="gallery"` overlay is pinned to.
40
+ */
41
+ /**
42
+ * The narrowest a gallery tile may get before the grid drops a column. A
43
+ * measure rather than a pixel: the tiles then fill whatever the ELEMENT is,
44
+ * which is §83's geometry rule — one photo per row on a phone, three on a
45
+ * desktop pane, and no `width: 320` that is near-full-bleed on one and a
46
+ * postage stamp on the other.
47
+ *
48
+ * Declared here rather than in `<ListingDetailPane>` because this is the file
49
+ * that writes the track it feeds; the pane re-exports it, so the public name
50
+ * is unchanged.
51
+ */
52
+ export declare const DETAIL_PHOTO_MIN = "14rem";
53
+ /** Which shape the photographs take. See the file header. */
54
+ export type ListingGalleryLayout = "grid" | "strip";
55
+ /** The class the gallery box carries. */
56
+ export declare const LISTINGS_GALLERY_CLASS = "stapel-listings-detail-gallery";
57
+ /** The `href` the hoisted gallery stylesheet is deduplicated by. */
58
+ export declare const LISTINGS_GALLERY_STYLE_HREF = "stapel-listings-detail-gallery";
59
+ /**
60
+ * How much of the strip's width ONE photograph takes.
61
+ *
62
+ * Not 100: the remaining sliver of the next picture is the only thing on a
63
+ * phone that says the strip scrolls at all. Exported so a host laying out
64
+ * beside it measures against the same number instead of guessing it back out
65
+ * of a screenshot.
66
+ */
67
+ export declare const LISTINGS_GALLERY_STRIP_BASIS = "86%";
68
+ /**
69
+ * The gallery's layout rules, for the hoisted `<style>`.
70
+ *
71
+ * The strip's child rule (`> *`) is the reason this is a stylesheet and not
72
+ * two more inline properties: an inline style cannot reach a child, and the
73
+ * flex basis is what makes the strip a strip rather than a row of squeezed
74
+ * photographs.
75
+ */
76
+ export declare function detailGalleryCss(): string;
77
+ //# sourceMappingURL=detailGallery.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"detailGallery.d.ts","sourceRoot":"","sources":["../../src/default/detailGallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,UAAU,CAAC;AAExC,6DAA6D;AAC7D,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,yCAAyC;AACzC,eAAO,MAAM,sBAAsB,mCAAmC,CAAC;AAEvE,oEAAoE;AACpE,eAAO,MAAM,2BAA2B,mCAAmC,CAAC;AAE5E;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,QAAQ,CAAC;AAElD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAgBzC"}
@@ -0,0 +1,91 @@
1
+ /**
2
+ * HOW THE LISTING PAGE LAYS OUT ITS PHOTOGRAPHS — and why the answer is a
3
+ * class and a prop rather than an inline `display`.
4
+ *
5
+ * ── The defect a container was carrying ───────────────────────────────────
6
+ *
7
+ * The gallery is an element-width grid (`repeat(auto-fit, minmax(14rem,
8
+ * 1fr))`), which on a 390px phone resolves to ONE column: a listing with three
9
+ * pictures pushes its own title and price nearly three screens down, and the
10
+ * first thing a person sees after tapping a search result is a photograph with
11
+ * nothing beside it. A phone lays photographs out as a snap-scrolling STRIP —
12
+ * one visible with the next peeking, title and price directly under it.
13
+ *
14
+ * That is layout, and layout is the container's to decide. But the pane wrote
15
+ * `display: grid` INLINE, and an inline declaration is beaten by nothing that
16
+ * is not `!important` — so a live storefront carried
17
+ * `[data-testid="listings-detail-gallery"] { display: flex !important }`
18
+ * against a pair's own geometry, named by a test id, to say a thing the pair
19
+ * offered no way to say (a client storefront's own stylesheet, §2).
20
+ *
21
+ * ── The seam ──────────────────────────────────────────────────────────────
22
+ *
23
+ * Two halves, and both matter:
24
+ *
25
+ * 1. `<ListingDetailPane galleryLayout>` — the pane ships BOTH layouts and
26
+ * the host names one, exactly as it already names `layout="split"` and
27
+ * `gutter`. The host is the side that knows the viewport it granted;
28
+ * a media query guessed in a leaf is the thing this package does not do.
29
+ * 2. `display` and the track are no longer inline. They live on this
30
+ * stylesheet, at one class plus one attribute, so a host that wants
31
+ * something neither arm offers can still write CSS for it at its own
32
+ * breakpoints — and needs no `!important` to be heard, only a selector of
33
+ * its own (`[data-testid="listings-detail-gallery"][data-gallery-layout]`
34
+ * ties; add any third condition and it wins).
35
+ *
36
+ * What stays inline is what nobody overrides and what a stylesheet would make
37
+ * worse: the `gap` (the page's own responsive gutter token, D418 — a var, so
38
+ * a resize reflows it) and `position: relative`, which is the containing block
39
+ * the `actionsPlacement="gallery"` overlay is pinned to.
40
+ */
41
+ /**
42
+ * The narrowest a gallery tile may get before the grid drops a column. A
43
+ * measure rather than a pixel: the tiles then fill whatever the ELEMENT is,
44
+ * which is §83's geometry rule — one photo per row on a phone, three on a
45
+ * desktop pane, and no `width: 320` that is near-full-bleed on one and a
46
+ * postage stamp on the other.
47
+ *
48
+ * Declared here rather than in `<ListingDetailPane>` because this is the file
49
+ * that writes the track it feeds; the pane re-exports it, so the public name
50
+ * is unchanged.
51
+ */
52
+ export const DETAIL_PHOTO_MIN = "14rem";
53
+ /** The class the gallery box carries. */
54
+ export const LISTINGS_GALLERY_CLASS = "stapel-listings-detail-gallery";
55
+ /** The `href` the hoisted gallery stylesheet is deduplicated by. */
56
+ export const LISTINGS_GALLERY_STYLE_HREF = "stapel-listings-detail-gallery";
57
+ /**
58
+ * How much of the strip's width ONE photograph takes.
59
+ *
60
+ * Not 100: the remaining sliver of the next picture is the only thing on a
61
+ * phone that says the strip scrolls at all. Exported so a host laying out
62
+ * beside it measures against the same number instead of guessing it back out
63
+ * of a screenshot.
64
+ */
65
+ export const LISTINGS_GALLERY_STRIP_BASIS = "86%";
66
+ /**
67
+ * The gallery's layout rules, for the hoisted `<style>`.
68
+ *
69
+ * The strip's child rule (`> *`) is the reason this is a stylesheet and not
70
+ * two more inline properties: an inline style cannot reach a child, and the
71
+ * flex basis is what makes the strip a strip rather than a row of squeezed
72
+ * photographs.
73
+ */
74
+ export function detailGalleryCss() {
75
+ return `
76
+ .${LISTINGS_GALLERY_CLASS}[data-gallery-layout="grid"] {
77
+ display: grid;
78
+ grid-template-columns: repeat(auto-fit, minmax(${DETAIL_PHOTO_MIN}, 1fr));
79
+ }
80
+ .${LISTINGS_GALLERY_CLASS}[data-gallery-layout="strip"] {
81
+ display: flex;
82
+ overflow-x: auto;
83
+ scroll-snap-type: x mandatory;
84
+ }
85
+ .${LISTINGS_GALLERY_CLASS}[data-gallery-layout="strip"] > * {
86
+ flex: 0 0 ${LISTINGS_GALLERY_STRIP_BASIS};
87
+ scroll-snap-align: start;
88
+ }
89
+ `.trim();
90
+ }
91
+ //# sourceMappingURL=detailGallery.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"detailGallery.js","sourceRoot":"","sources":["../../src/default/detailGallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC;AAKxC,yCAAyC;AACzC,MAAM,CAAC,MAAM,sBAAsB,GAAG,gCAAgC,CAAC;AAEvE,oEAAoE;AACpE,MAAM,CAAC,MAAM,2BAA2B,GAAG,gCAAgC,CAAC;AAE5E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO;GACN,sBAAsB;;mDAE0B,gBAAgB;;GAEhE,sBAAsB;;;;;GAKtB,sBAAsB;cACX,4BAA4B;;;CAGzC,CAAC,IAAI,EAAE,CAAC;AACT,CAAC"}
@@ -74,6 +74,31 @@ export interface FavoriteHeartProps {
74
74
  * its reason, which is all a surface with no sign-in route can offer.
75
75
  */
76
76
  readonly signIn?: SignInCta;
77
+ /**
78
+ * The hit-target class this surface wants — `LISTING_CARD_ACTION_CLASS` on
79
+ * a card (36px with a cursor, 44px with a thumb),
80
+ * `LISTING_ACTION_CLASS` on the listing page (44px everywhere).
81
+ *
82
+ * A CLASS rather than a size prop: the tiers are a media query, and a
83
+ * component that took a number would have to be told the viewport — which
84
+ * is the thing a leaf must never ask. See `actionRow.ts`.
85
+ */
86
+ readonly className?: string;
87
+ /**
88
+ * SAY THE OUTCOME OUT LOUD — a short toast on each successful press.
89
+ *
90
+ * Off by default and ON for the listing page: one heart on a screen the
91
+ * person came to act on earns a sentence, forty hearts on a grid do not.
92
+ * The icon fill remains the state in both cases; this is the acknowledgement
93
+ * that the press was received, which is the half a small glyph pinned to
94
+ * the corner of a photograph cannot carry on its own.
95
+ *
96
+ * It is raised on the GESTURE, from the predicted next state, for the same
97
+ * reason `useFavoriteToggle` draws that state optimistically: the toast has
98
+ * to arrive with the press. A write that then fails rolls the icon back and
99
+ * states the failure through the heart's own `ErrorAlert`.
100
+ */
101
+ readonly announce?: boolean;
77
102
  readonly style?: CSSProperties;
78
103
  }
79
104
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../src/default/favorite.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAO9C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B;qEACiE;IACjE,QAAQ,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,sEAAsE;IACtE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B;+EAC2E;IAC3E,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACrC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAkHrE"}
1
+ {"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../src/default/favorite.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAS9C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B;qEACiE;IACjE,QAAQ,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,sEAAsE;IACtE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B;+EAC2E;IAC3E,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACrC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;;;;OAQG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA0JrE"}
@@ -7,6 +7,8 @@ import { useFavoriteToggle } from "../headless/Favorites.js";
7
7
  import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
8
8
  import { GateReasonPopover } from "./GateReasonPopover.js";
9
9
  import { HeartIcon } from "./icons.js";
10
+ import { useNotice } from "./notice.js";
11
+ import { LISTING_ACTIONS_STYLE_HREF, actionRowCss } from "./actionRow.js";
10
12
  /**
11
13
  * The heart and its refusal. It is NEVER hidden from a visitor: it is blocked,
12
14
  * the reason is on the page as ordinary text, and the container's sign-in door
@@ -55,6 +57,7 @@ import { HeartIcon } from "./icons.js";
55
57
  */
56
58
  export function FavoriteHeart(props) {
57
59
  const t = useT();
60
+ const notice = useNotice();
58
61
  const { token } = antdTheme.useToken();
59
62
  const favorite = useFavoriteToggle(props.listingId, props.favorited);
60
63
  const label = t(favorite.favorited
@@ -68,6 +71,19 @@ export function FavoriteHeart(props) {
68
71
  // place a blocked reason becomes words in this fleet.
69
72
  const gate = useActionGate(favorite.gate);
70
73
  const reason = gate.reason;
74
+ // The press, plus the sentence the surface asked for. The next state is the
75
+ // one the icon is about to draw, so the toast and the fill say the same
76
+ // thing at the same moment — see `announce`.
77
+ const announce = props.announce === true;
78
+ const press = () => {
79
+ const next = !favorite.favorited;
80
+ favorite.toggle();
81
+ if (!announce || !favorite.gate.available)
82
+ return;
83
+ notice(t(next
84
+ ? LISTINGS_I18N_KEYS.favoriteAdded
85
+ : LISTINGS_I18N_KEYS.favoriteRemoved));
86
+ };
71
87
  // D431. A blocked gate plus a door the surface handed in: the press is not
72
88
  // refused, it is ROUTED — through the door, keeping whatever `?next=` the
73
89
  // container put in the href. With no door there is nothing better for the
@@ -88,13 +104,23 @@ export function FavoriteHeart(props) {
88
104
  ...doorPress,
89
105
  ...(door?.href !== undefined ? {} : { "aria-pressed": favorite.favorited }),
90
106
  }
91
- : { "aria-pressed": favorite.favorited, onClick: favorite.toggle };
107
+ : { "aria-pressed": favorite.favorited, onClick: press };
92
108
  // A failed save, stated where the heart is. The rollback already put the
93
109
  // icon back; this says why it went back.
110
+ // (see `press` above for the toast that rides the successful half)
94
111
  const failure = (_jsx(ErrorAlert, { testId: `${props.testId}-error`, thrown: favorite.error, variant: "inline" }));
112
+ // The hit-target rules the surfaces address by class. Hoisted here rather
113
+ // than by each card, because the heart is what carries the class and a
114
+ // stylesheet that arrived only on the surfaces that remembered it is a
115
+ // 32px target on the one that forgot.
116
+ const sheet = (_jsx("style", { href: LISTING_ACTIONS_STYLE_HREF, precedence: "default", children: actionRowCss() }));
95
117
  if (props.blockedReason === "popover" && reason !== undefined) {
96
- return (_jsx(GateReasonPopover, { reason: reason, cta: props.signIn, testId: `${props.testId}-reason`, signInTestId: props.signInTestId ?? `${props.testId}-sign-in`, children: (bind) => (_jsx(Button, { shape: "circle", ...(opensDoor ? {} : { "aria-disabled": true }), ...bind, "aria-label": label, "data-testid": props.testId, "data-favorited": String(favorite.favorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", ...asDoor, icon: icon, ...(props.style !== undefined ? { style: props.style } : {}) })) }));
118
+ return (_jsxs(_Fragment, { children: [sheet, _jsx(GateReasonPopover, { reason: reason, cta: props.signIn, testId: `${props.testId}-reason`, signInTestId: props.signInTestId ?? `${props.testId}-sign-in`, children: (bind) => (_jsx(Button, { shape: "circle", ...(opensDoor ? {} : { "aria-disabled": true }), ...bind, ...(props.className !== undefined
119
+ ? { className: props.className }
120
+ : {}), "aria-label": label, "data-testid": props.testId, "data-favorited": String(favorite.favorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", ...asDoor, icon: icon, ...(props.style !== undefined ? { style: props.style } : {}) })) })] }));
97
121
  }
98
- return (_jsx(GatedControl, { gate: favorite.gate, testId: props.gateTestId ?? `${props.testId}-gate`, ...(opensDoor ? { whenBlocked: "annotate" } : {}), ...(props.layout !== undefined ? { layout: props.layout } : {}), ...(props.style !== undefined ? { style: props.style } : {}), children: (bind) => (_jsxs(_Fragment, { children: [_jsx(Button, { shape: "circle", ...bind, "aria-label": label, "data-testid": props.testId, "data-favorited": String(favorite.favorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", ...asDoor, icon: icon }), failure] })) }));
122
+ return (_jsxs(_Fragment, { children: [sheet, _jsx(GatedControl, { gate: favorite.gate, testId: props.gateTestId ?? `${props.testId}-gate`, ...(opensDoor ? { whenBlocked: "annotate" } : {}), ...(props.layout !== undefined ? { layout: props.layout } : {}), ...(props.style !== undefined ? { style: props.style } : {}), children: (bind) => (_jsxs(_Fragment, { children: [_jsx(Button, { shape: "circle", ...bind, ...(props.className !== undefined
123
+ ? { className: props.className }
124
+ : {}), "aria-label": label, "data-testid": props.testId, "data-favorited": String(favorite.favorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", ...asDoor, icon: icon }), failure] })) })] }));
99
125
  }
100
126
  //# sourceMappingURL=favorite.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"favorite.js","sourceRoot":"","sources":["../../src/default/favorite.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"favorite.js","sourceRoot":"","sources":["../../src/default/favorite.tsx"],"names":[],"mappings":"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"}
@@ -29,6 +29,25 @@ export interface HeartIconProps {
29
29
  readonly color?: string;
30
30
  }
31
31
  export declare function HeartIcon(props: HeartIconProps): ReactElement;
32
+ /**
33
+ * The share glyph — three nodes and two edges, the platform-neutral shape
34
+ * both Android and the web draw for "send this somewhere else".
35
+ *
36
+ * `aria-hidden`, like the heart: the control it sits in carries the verb as
37
+ * its accessible name in every arm, including the phone arm where the word
38
+ * itself is not painted, and a glyph announced beside its own label reads the
39
+ * action twice.
40
+ *
41
+ * Deliberately not the iOS "box with an arrow": that shape means "share" to
42
+ * an iPhone user and "upload" or "export" to everybody else, and this control
43
+ * is drawn on a browser, not inside an app the platform styled.
44
+ */
45
+ export declare function ShareIcon(): ReactElement;
46
+ /**
47
+ * A chain link — the copy row's glyph, and the one thing on the menu that is
48
+ * not a network's own brand.
49
+ */
50
+ export declare function LinkIcon(): ReactElement;
32
51
  /**
33
52
  * Which way the asking price moved — an arrow, and a NAME for it.
34
53
  *
@@ -1 +1 @@
1
- {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/default/icons.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,cAAc;IAC7B;uEACmE;IACnE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAkB7D;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,YAAY,CAmBf"}
1
+ {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/default/icons.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,cAAc;IAC7B;uEACmE;IACnE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAkB7D;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,IAAI,YAAY,CAqBxC;AAED;;;GAGG;AACH,wBAAgB,QAAQ,IAAI,YAAY,CAkBvC;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,YAAY,CAmBf"}
@@ -3,6 +3,29 @@ export function HeartIcon(props) {
3
3
  const paint = props.color ?? "currentColor";
4
4
  return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: props.filled ? paint : "none", stroke: paint, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", role: "img", "aria-hidden": "true", children: _jsx("path", { d: "M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8z" }) }));
5
5
  }
6
+ /**
7
+ * The share glyph — three nodes and two edges, the platform-neutral shape
8
+ * both Android and the web draw for "send this somewhere else".
9
+ *
10
+ * `aria-hidden`, like the heart: the control it sits in carries the verb as
11
+ * its accessible name in every arm, including the phone arm where the word
12
+ * itself is not painted, and a glyph announced beside its own label reads the
13
+ * action twice.
14
+ *
15
+ * Deliberately not the iOS "box with an arrow": that shape means "share" to
16
+ * an iPhone user and "upload" or "export" to everybody else, and this control
17
+ * is drawn on a browser, not inside an app the platform styled.
18
+ */
19
+ export function ShareIcon() {
20
+ return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", role: "img", "aria-hidden": "true", children: [_jsx("circle", { cx: "18", cy: "5", r: "3" }), _jsx("circle", { cx: "6", cy: "12", r: "3" }), _jsx("circle", { cx: "18", cy: "19", r: "3" }), _jsx("path", { d: "M8.6 10.5 15.4 6.6" }), _jsx("path", { d: "M8.6 13.5 15.4 17.4" })] }));
21
+ }
22
+ /**
23
+ * A chain link — the copy row's glyph, and the one thing on the menu that is
24
+ * not a network's own brand.
25
+ */
26
+ export function LinkIcon() {
27
+ return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", role: "img", "aria-hidden": "true", children: [_jsx("path", { d: "M10 13a5 5 0 0 0 7.5.6l3-3a5 5 0 0 0-7-7l-1.7 1.7" }), _jsx("path", { d: "M14 11a5 5 0 0 0-7.5-.6l-3 3a5 5 0 0 0 7 7l1.7-1.7" })] }));
28
+ }
6
29
  /**
7
30
  * Which way the asking price moved — an arrow, and a NAME for it.
8
31
  *
@@ -1 +1 @@
1
- {"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/default/icons.tsx"],"names":[],"mappings":";AAgCA,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,cAAc,CAAC;IAC5C,OAAO,CACL,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EACnC,MAAM,EAAE,KAAK,EACb,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,KAAK,iBACE,MAAM,YAElB,eAAM,CAAC,EAAC,kHAAkH,GAAG,GACzH,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,KAG9B;IACC,MAAM,IAAI,GAAG,KAAK,CAAC,SAAS,KAAK,MAAM,CAAC;IACxC,OAAO,CACL,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,KAAK,gBACE,KAAK,CAAC,KAAK,aAEvB,eAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GAAI,EAC3C,eAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,GAAI,IACjD,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/default/icons.tsx"],"names":[],"mappings":";AAgCA,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,cAAc,CAAC;IAC5C,OAAO,CACL,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EACnC,MAAM,EAAE,KAAK,EACb,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,KAAK,iBACE,MAAM,YAElB,eAAM,CAAC,EAAC,kHAAkH,GAAG,GACzH,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,KAAK,iBACE,MAAM,aAElB,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,EAC/B,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG,EAC/B,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG,EAChC,eAAM,CAAC,EAAC,oBAAoB,GAAG,EAC/B,eAAM,CAAC,EAAC,qBAAqB,GAAG,IAC5B,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,CACL,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,KAAK,iBACE,MAAM,aAElB,eAAM,CAAC,EAAC,mDAAmD,GAAG,EAC9D,eAAM,CAAC,EAAC,oDAAoD,GAAG,IAC3D,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,KAG9B;IACC,MAAM,IAAI,GAAG,KAAK,CAAC,SAAS,KAAK,MAAM,CAAC;IACxC,OAAO,CACL,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,KAAK,gBACE,KAAK,CAAC,KAAK,aAEvB,eAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GAAI,EAC3C,eAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,GAAI,IACjD,CACP,CAAC;AACJ,CAAC"}