@gemboss/gem-framework 0.15.0 → 0.18.11

package/dist/section-gate.js

@@ -1,3 +1,38 @@
+// ../../packages/gem-framework/src/section-dividers.ts
+var spikes = (() => {
+  const teeth = [];
+  for (let x = 95; x > 0; x -= 5) teeth.push(`L${x} ${teeth.length % 2 === 0 ? 10 : 3}`);
+  return `M0 0 H100 V3 ${teeth.join(" ")} L0 ${teeth.length % 2 === 0 ? 10 : 3} Z`;
+})();
+var GEM_SECTION_DIVIDER_PATHS = Object.freeze({
+  wave: "M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z",
+  slope: "M0 0 H100 V10 Z",
+  spikes,
+  arch: "M0 0 H100 V2 Q50 12 0 2 Z",
+  blob: "M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z"
+});
+var NUMBER = "[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?";
+var CHANNEL = new RegExp(`^${NUMBER}%?$`, "i");
+var PERCENT = new RegExp(`^${NUMBER}%$`, "i");
+var ANGLE = new RegExp(`^${NUMBER}(?:deg|grad|rad|turn)?$`, "i");
+var GEM_ELEMENT_SECTION_DIVIDER_CSS = [
+  ".gem-el-section[data-gem-element-dividers] { position: relative; }",
+  // A configured edge must escape the band's parallax clip. The media keeps its own clipped
+  // wrapper so releasing the root cannot expose the deliberately oversized moving background.
+  ".gem-el-section[data-gem-parallax][data-gem-element-dividers] { overflow: visible; isolation: auto; }",
+  ".gem-el-section[data-gem-element-dividers] > .gem-el-section__parallax-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }",
+  // Edge paint may extend into a neighbour with little padding. Only content, never its background,
+  // stacks above it. Guard on the current document's opted-in markup: a retained CSS resource after
+  // navigation must not change a page with no native dividers.
+  // An ordinary neighbouring parallax band also isolates its content by default. Release that
+  // stacking context on divider documents, retaining its existing media clip and direct markup.
+  "body:has(.gem-el-section[data-gem-element-dividers]) .gem-el-section[data-gem-parallax] { isolation: auto; }",
+  "body:has(.gem-el-section[data-gem-element-dividers]) .gem-el-section > .gem-el-section__inner { position: relative; z-index: 2; }",
+  ".gem-el-section > .gem-el-section__divider { position: absolute; display: block; inset-inline: 0; width: 100%; max-width: none; height: var(--gem-element-divider-height, 48px); color: var(--gem-element-divider-color, var(--gem-color-background)); overflow: hidden; pointer-events: none; z-index: 1; transform: scaleX(var(--gem-element-divider-scale-x, 1)); }",
+  ".gem-el-section > .gem-el-section__divider--bottom { top: 100%; }",
+  ".gem-el-section > .gem-el-section__divider--top { bottom: 100%; transform: scaleX(var(--gem-element-divider-scale-x, 1)) scaleY(-1); }"
+].join("\n");
+
 // ../../packages/gem-framework/src/form-set.ts
 var GEM_FORM_TOKEN_KEYS = [
   "radius",
@@ -51,7 +86,7 @@ var GEM_FORM_DEFAULTS = {
   checkboxAccent: "var(--gem-color-accent)",
   checkboxSize: "24px"
 };
-var GEM_FORM_VAR_SCOPE = "[data-gem-form-set], [data-gem-form-set] :is(input, select, textarea, button, form)";
+var GEM_FORM_VAR_SCOPE = "[data-gem-form-set], [data-gem-form-set] :is(input, select, textarea, button, form, output)";
 function gemFormCssBlock(form) {
   const vars = gemFormCssVars(form);
   return vars.length ? `${GEM_FORM_VAR_SCOPE} {
@@ -573,12 +608,12 @@ function gemMobileTokenCssVars(tokens, phone = readPhoneTokens(tokens)) {
 var rampKey = (k) => k.toLowerCase().replace(/[^a-z0-9]/g, "");
 var isRampKey = (k) => GEM_TYPE_RAMP_KEYS.some((r) => rampKey(r) === rampKey(k));
 var LENGTH = /^\d*\.?\d+(px|rem|em)$/;
-var NUMBER = /^\d*\.?\d+$/;
+var NUMBER2 = /^\d*\.?\d+$/;
 var typeRampValue = (typography, key) => {
   const hit = Object.entries(typography ?? {}).find(([k]) => rampKey(k) === rampKey(key));
   const v = hit == null || hit[1] == null ? "" : stripImportant(hit[1]).trim();
   if (!v) return null;
-  return (key === "scale" ? NUMBER.test(v) && Number(v) > 0 : LENGTH.test(v)) ? v : null;
+  return (key === "scale" ? NUMBER2.test(v) && Number(v) > 0 : LENGTH.test(v)) ? v : null;
 };
 var GEM_TYPE_MOBILE_MAX = "749px";
 function gemTypeRampCssVars(typography) {
@@ -653,6 +688,14 @@ function slugify(value) {
 var EDITION_2_CSS = [
   `:where(&) { ${GEM_HEADING_SIZE_CSS_VARS.filter((decl) => !decl.startsWith("--gem-section-heading-size-mobile") && !decl.startsWith("--gem-hero-heading-size-mobile")).join(" ")} }`
 ];
+var EDITION_3_ELEMENTS = [
+  `:where(&) .gem-product-card-grid--quick-view-grid .gem-product-card-grid__card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }`,
+  `:where(&) .gem-product-card-grid--quick-view-grid .gem-product-card__media > .gem-product-card__badges { display: flex; }`,
+  `@media (max-width: 989px) { :where(&) .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid[data-gem-product-grid] { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); } }`,
+  `:where(&) .gem-hero.gem-hero-banner--compact-collection .gem-hero__overlay:not(.has-media) { position: relative; inset: auto; z-index: auto; opacity: 1; width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin: clamp(24px, 5vw, 48px) auto 0; background: none; color: var(--gem-color-text); border-radius: 0; }`,
+  `:where(&) .gem-hero.gem-hero-banner--compact-collection .gem-hero__overlay:not(.has-media) .gem-hero__heading { color: var(--gem-color-text); }`,
+  `:where(&) .gem-section.gem-hero.gem-hero-banner--compact-collection:not(:has(> .gem-hero__bg)) { padding-block-end: 0; }`
+];
 var GEM_FRAMEWORK_EDITIONS = [
   { edition: 1, since: "0.1.0", released: "2026-07-04", changes: [], css: [] },
   {
@@ -661,12 +704,27 @@ var GEM_FRAMEWORK_EDITIONS = [
     released: "2026-10-10",
     changes: ["Section headings and hero titles follow your type scale on tablets and computers. Phones keep their current size."],
     css: EDITION_2_CSS
+  },
+  {
+    // Edition 3. Collection pages at Dawn's tiers (12/10/2026, measured on a "Start from scratch" theme): EDITION_3_ELEMENTS.
+    edition: 3,
+    since: "0.17.0",
+    released: "2026-10-12",
+    changes: [
+      "Collection grids: each product photo fills its column, phones and tablets show your mobile column count, and Sale and Sold out badges appear.",
+      "The collection title sits on the page, lined up with the products, in your text colour."
+    ],
+    css: [],
+    elements: EDITION_3_ELEMENTS
   }
 ];
 var LATEST_GEM_FRAMEWORK_EDITION = GEM_FRAMEWORK_EDITIONS[GEM_FRAMEWORK_EDITIONS.length - 1].edition;
 function gemFrameworkEditionScope(edition) {
   return GEM_FRAMEWORK_EDITIONS.filter((e) => e.edition >= edition).map((e) => `[data-gem-edition='${e.edition}']`).join(", ");
 }
+function gemFrameworkEditionElementCss() {
+  return GEM_FRAMEWORK_EDITIONS.flatMap((e) => (e.elements ?? []).map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
+}
 function gemFrameworkEditionCss() {
   return GEM_FRAMEWORK_EDITIONS.flatMap((e) => e.css.map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
 }
@@ -1086,18 +1144,8 @@ var GEM_POPUP_SHELL_CSS = GEM_POPUP_SHELL_CSS_LINES.join("\n");
 
 // ../../packages/gem-framework/src/primitives.ts
 var dividerMask = (path) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='${path}'/%3E%3C/svg%3E")`;
-var spikePath = (() => {
-  const teeth = [];
-  for (let x = 95; x > 0; x -= 5) teeth.push(`L${x} ${teeth.length % 2 === 0 ? 10 : 3}`);
-  return `M0 0 H100 V3 ${teeth.join(" ")} L0 ${teeth.length % 2 === 0 ? 10 : 3} Z`;
-})();
-var DIVIDER_SHAPES = {
-  wave: "M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z",
-  slope: "M0 0 H100 V10 Z",
-  spikes: spikePath,
-  arch: "M0 0 H100 V2 Q50 12 0 2 Z",
-  blob: "M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z"
-};
+var knownValues = (attr, values) => `:where(${values.map((v) => `[${attr}='${v}']`).join(", ")})`;
+var DIVIDER_SHAPES = Object.keys(GEM_SECTION_DIVIDER_PATHS);
 var GEM_DIVIDER_CSS_LINES = [
   // The clip is WIDENED, not removed. `.gem-section` sets `overflow: clip` and the wedge is drawn
   // at `top: 100%` / `bottom: 100%` — entirely outside the box — so the parent deleted every
@@ -1108,7 +1156,8 @@ var GEM_DIVIDER_CSS_LINES = [
   // it entirely would paint square corners over that radius. A browser without
   // `overflow-clip-margin` keeps plain `clip` — the divider stays hidden, which is today's
   // behaviour rather than a broken layout.
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }",
+  // Only for a shape that has a mask (knownValues): a "none" edge used to widen the clip by 48px for nothing.
+  `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]${knownValues("data-gem-divider-top", DIVIDER_SHAPES)}, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]${knownValues("data-gem-divider-bottom", DIVIDER_SHAPES)} { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }`,
   // Shared geometry. `top: 100%` / `bottom: 100%` put it outside the box; z-index 1 keeps it above the
   // neighbouring band's background. pointer-events: none so it never eats a click near the seam.
   // Qualified by SHAPE. Unqualified, any value paints a solid 48px slab — including the literal
@@ -1118,7 +1167,7 @@ var GEM_DIVIDER_CSS_LINES = [
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]::after { top: 100%; }",
   // The top edge reuses the same masks, mirrored, so five shapes cover both edges.
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]::before { bottom: 100%; transform: scaleY(-1); }",
-  ...Object.entries(DIVIDER_SHAPES).flatMap(([name, path]) => {
+  ...Object.entries(GEM_SECTION_DIVIDER_PATHS).flatMap(([name, path]) => {
     const mask = dividerMask(path);
     return [
       `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='${name}']::after { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`,
@@ -1127,8 +1176,10 @@ var GEM_DIVIDER_CSS_LINES = [
   })
 ];
 var GEM_DIVIDER_CSS = GEM_DIVIDER_CSS_LINES.join("\n");
+var GEM_CARD_STYLES = ["outline", "shadow", "filled"];
 var GEM_CARD_CSS_LINES = [
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card] :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }",
+  // Only for a style that draws (knownValues): "none", the knob's revert value, arrives here as an attribute too.
+  `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card]${knownValues("data-gem-card", GEM_CARD_STYLES)} :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }`,
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='outline'] :is(.gem-section__inner, [class*='__inner']) { border: 1px solid var(--gem-color-border); }",
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='shadow'] :is(.gem-section__inner, [class*='__inner']) { background: var(--gem-color-surface); box-shadow: var(--gem-shadow-md); }",
   // `filled` tints the section's own ground rather than reaching for a fixed colour, so it stays
@@ -1415,7 +1466,7 @@ function createGemBaseCssParts(profile) {
   ].join("\n");
   return {
     // Edition rules close the primitives (editions.ts): custom properties on <html>, scoped :where([data-gem-edition]).
-    primitives: [reset, "", createPrimitiveCss(), "", gemFrameworkEditionCss(), "", ""].join("\n"),
+    primitives: [reset, "", createPrimitiveCss(), "", gemFrameworkEditionElementCss(), "", gemFrameworkEditionCss(), "", ""].join("\n"),
     sections: [createShellCss(), "", createSectionCss(), "", createThemeProfileCss(profile)].join("\n")
   };
 }
@@ -1425,7 +1476,11 @@ function createThemeProfileCss(profile = "dawn-parity") {
 function createMorphProfileCss() {
   return [
     "/* Gem morph profile: style packs and section presets provide visual transformation above core primitives. */",
-    ":root { --gem-profile-mode: morph; }"
+    ":root { --gem-profile-mode: morph; }",
+    // A morph theme's quick-view card is a box drawn from its card tokens (the .gem-card primitive). Edition 3 unboxes this
+    // card for Dawn's collection page; restated here one class higher, so a morph theme keeps its box and its card knobs on
+    // every edition (review of #764). The same values as .gem-card: nothing changes for a morph store on edition 1 or 2.
+    ".gem-product-card-grid--quick-view-grid .gem-card.gem-product-card-grid__card { border: var(--gem-border-subtle, 1px solid var(--gem-color-border)); border-radius: var(--gem-card-radius, var(--gem-radius-md)); background: var(--gem-card-background, var(--gem-color-surface)); padding: var(--gem-component-card-padding, var(--gem-space-md)); box-shadow: var(--gem-shadow-sm, none); }"
   ].join("\n");
 }
 function createPrimitiveCss() {
@@ -1871,17 +1926,25 @@ function createPrimitiveCss() {
     // .gem-rating above is a type rule for a text label; every actual star row in the theme was a
     // hardcoded five-glyph literal, so a captured 4-of-5 (or a half star) had nowhere to land. The
     // fill is a percentage-width overlay, so fractional values render exactly instead of rounding.
+    // SVG stars (GemFactory gap #45, 0.18.11): real review widgets draw each star as an SVG (solid + outline), and the
+    // eight product-reviews sections rebuilt in GemFactory put those SVGs in __base / __fill. Two things broke the fill
+    // (measured 12/10/2026): the base `svg { max-width: 100% }` shrank the SVGs in the clipped __fill to the fill's
+    // width (4.2 drew as five squeezed stars), and a .gem-stars that is a stretched grid / flex item computed its
+    // percentage against the stretched width (3 of 5 drew as 5). The row is as wide as its stars, always, and a star
+    // keeps its own size inside the clip.
     ".gem-stars {",
     "  --gem-stars-total: 5;",
     "  --gem-stars-value: 5;",
     "  position: relative;",
     "  display: inline-block;",
+    "  width: max-content;",
     "  line-height: 1;",
     "  font-size: var(--gem-text-sm, 0.8125rem);",
     "  letter-spacing: 0.1em;",
     "  color: var(--gem-color-border);",
     "}",
     ".gem-stars__base, .gem-stars__fill { display: block; white-space: nowrap; }",
+    ".gem-stars :is(svg, img) { max-width: none; flex: none; }",
     ".gem-stars__fill {",
     "  position: absolute;",
     "  inset: 0;",
@@ -3387,7 +3450,7 @@ function createDawnParityCss() {
     ".gem-card, .gem-product-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }",
     ".gem-product-card__media, .gem-media { border: 0; border-radius: 0; box-shadow: none; background: rgb(244 244 244); }",
     ".gem-product-card__media { display: block; position: relative; width: 100%; height: 0; min-block-size: 0; padding-bottom: 100%; aspect-ratio: auto; overflow: hidden; }",
-    ".gem-featured-collection--editorial-grid .gem-product-card__media, .gem-product-card-grid--quick-view-grid .gem-product-card__media, .gem-main-search .gem-product-card__media, .gem-cart-recommendations--dawn-empty .gem-product-card__media { min-block-size: 0 !important; }",
+    ".gem-featured-collection--editorial-grid .gem-product-card__media, .gem-product-card-grid--quick-view-grid .gem-product-card__media, .gem-main-search .gem-product-card__media, .gem-cart-recommendations--dawn-empty .gem-product-card__media, .gem-recommended-products--product-rail .gem-product-card__media, .gem-cart-recommendations--product-rail .gem-product-card__media { min-block-size: 0 !important; }",
     ".gem-product-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }",
     // Home product grids show generated/lifestyle imagery (not catalog product-on-white shots), so
     // `contain` letterboxes them inside the square card (looks misaligned / floating off the box).
@@ -3404,7 +3467,7 @@ function createDawnParityCss() {
     ".gem-cart-recommendations--dawn-empty .gem-product-card__quick-actions { display: none; }",
     ".gem-featured-collection--editorial-grid > .gem-section__inner > .gem-section__heading, .gem-featured-collection--editorial-grid > .gem-section__inner > .gem-section__body { display: none; }",
     ".gem-featured-collection--editorial-grid { padding-block: 28px 36px; }",
-    ".gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-columns, 4), minmax(0, 1fr)); gap: 8px; }",
+    ".gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-columns, 4), minmax(0, 1fr)); gap: 8px; }",
     ".gem-product-card-grid--quick-view-grid { padding-top: 0; }",
     ".gem-product-card-grid--quick-view-grid .gem-section__heading:empty { display: none; }",
     // Hide a compare-at only when the price ISN'T actually on sale. The rule used to hide it
@@ -3574,14 +3637,16 @@ function createDawnParityMobileCss() {
     "  .gem-hero-banner--compact-collection { padding-block: 25px; }",
     "  .gem-hero-banner--compact-collection .gem-section__heading { font-size: 30px; line-height: 39px; }",
     "  .gem-product-card-grid--quick-view-grid > .gem-section__inner, .gem-main-search > .gem-section__inner { width: calc(100% - 30px); }",
-    "  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 4px !important; }",
+    // 8px on a phone too, as the featured collection and the two product rails: the cards are Dawn's flat cards, and with
+    // no padding of their own a 4px gap left two columns of titles 4px apart at 320 (review of gemsite #951).
+    "  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !important; }",
     "  .gem-product-card__content { padding-top: 8px; gap: 4px; }",
     "  .gem-product-card__title { font-size: 15px; line-height: 24px; }",
     "  .gem-product-card__price, .gem-product-card__price .gem-price { font-size: 16px; line-height: 24px; }",
     // Fallback = the profile's own phone heading, declared once as --gem-heading-phone-cap on the :root above.
     "  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, var(--gem-heading-phone-cap)); }",
     "  .gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size-mobile, var(--gem-heading-phone-cap)); }",
-    "  .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }",
+    "  .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] > .gem-section__inner { width: calc(100% - 30px); }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__frame { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__item { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; }",
@@ -4813,14 +4878,15 @@ function layoutKnobCheck(tsx, knobExempt = /* @__PURE__ */ new Set()) {
 }
 function slotsReadBy(raw) {
   const source = raw.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/(^|[^:])\/\/.*$/gm, "$1 ");
-  const names = /* @__PURE__ */ new Set(["slots"]);
-  for (const m of source.matchAll(/(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:section\.)?content_slots\b/g)) names.add(m[1]);
-  const alt = [...names].map((n) => n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+  const aliases = /* @__PURE__ */ new Set(["slots"]);
+  for (const m of source.matchAll(/(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*(?::[^=;]+)?=\s*(?:[A-Za-z_$][\w$]*\??\.)*content_slots\b/g)) aliases.add(m[1]);
+  const esc = (n) => n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const bag = `(?:(?<![\\w$.\\-/"'\`])(?:${[...aliases].map(esc).join("|")})|(?<![\\w$\\-/"'\`])content_slots)`;
   const keys = /* @__PURE__ */ new Set();
-  for (const m of source.matchAll(new RegExp(`(?:${alt})\\.([A-Za-z_][A-Za-z0-9_]*)`, "g"))) keys.add(m[1]);
-  for (const m of source.matchAll(new RegExp(`(?:${alt})\\[["']([^"']+)["']\\]`, "g"))) keys.add(m[1]);
+  for (const m of source.matchAll(new RegExp(`${bag}\\??\\.([A-Za-z_][A-Za-z0-9_]*)`, "g"))) keys.add(m[1]);
+  for (const m of source.matchAll(new RegExp(`${bag}\\??\\.?\\[["']([^"']+)["']\\]`, "g"))) keys.add(m[1]);
   const prefixes = [];
-  for (const m of source.matchAll(new RegExp("(?:" + alt + ")\\[`([^`]*)`\\]", "g"))) {
+  for (const m of source.matchAll(new RegExp(`${bag}\\??\\.?\\[\`([^\`]*)\`\\]`, "g"))) {
     const literal = m[1].split("${")[0];
     if (literal.length >= 3) prefixes.push(literal);
   }
@@ -5060,6 +5126,11 @@ var claimNamed = (key) => CLAIM_KEY.test(key) && !DISPLAY_QUANTITY.test(key);
 function stringLiteralsIn(line) {
   return [...line.matchAll(/(["'`])((?:\\.|(?!\1)[^\\])*)\1/g)].map((m) => m[2]);
 }
+var VERIFIED_FLAG = String.raw`\b(?:is_?)?verified(?:_?(?:buyer|purchase|purchaser|customer|review))?\b`;
+var VERIFIED_BY_DEFAULT = new RegExp(
+  `(?:${VERIFIED_FLAG}\\s*(?:!==?\\s*false\\b|(?:\\?\\?|\\|\\|)=?\\s*(?:true|!0)\\b|===?\\s*false\\s*\\?\\s*(?:null|undefined|false|""|'')\\s*:)|(?<=[{[,(]\\s*)${VERIFIED_FLAG}\\s*=(?![=>])\\s*(?:true|!0)\\b)`,
+  "i"
+);
 function fabricatedProofInSource(raw) {
   const src = blankComments(raw);
   const out = [];
@@ -5107,6 +5178,11 @@ function fabricatedProofInSource(raw) {
       out.push({ line: at, why: `${kind} ${JSON.stringify(text)}`, text: line.trim() });
     }
   });
+  const code = src.replace(/(["'])((?:\\.|(?!\1)[^\\\n])*)\1/g, (_m, q, body) => q + body.replace(/[^\n]/g, " ") + q);
+  for (const m of code.matchAll(new RegExp(VERIFIED_BY_DEFAULT.source, "gi"))) {
+    const at = code.slice(0, m.index).split("\n").length;
+    out.push({ line: at, why: `verified by default (${m[0].replace(/\s+/g, " ").trim()}); badge only on verified === true`, text: (lines[at - 1] ?? "").trim() });
+  }
   for (const r of demoReads) {
     const onDemoLine = caught.has(`${r.entry.line}\0key\0${r.key}`) || stringLiteralsIn(r.entry.value).some((text) => caught.has(`${r.entry.line}\0str\0${text}`));
     if (!onDemoLine) out.push({ line: r.at, why: r.why, text: r.text });
@@ -5271,6 +5347,7 @@ export {
   SHARED_FRAMEWORK_PREFIXES,
   TESTIMONY_NAME,
   TESTIMONY_PROPERTY,
+  VERIFIED_BY_DEFAULT,
   claimIn,
   classesStyledBy,
   cssPairingOrphans,

package/dist/sections.css

@@ -859,7 +859,7 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-card, .gem-product-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
 .gem-product-card__media, .gem-media { border: 0; border-radius: 0; box-shadow: none; background: rgb(244 244 244); }
 .gem-product-card__media { display: block; position: relative; width: 100%; height: 0; min-block-size: 0; padding-bottom: 100%; aspect-ratio: auto; overflow: hidden; }
-.gem-featured-collection--editorial-grid .gem-product-card__media, .gem-product-card-grid--quick-view-grid .gem-product-card__media, .gem-main-search .gem-product-card__media, .gem-cart-recommendations--dawn-empty .gem-product-card__media { min-block-size: 0 !important; }
+.gem-featured-collection--editorial-grid .gem-product-card__media, .gem-product-card-grid--quick-view-grid .gem-product-card__media, .gem-main-search .gem-product-card__media, .gem-cart-recommendations--dawn-empty .gem-product-card__media, .gem-recommended-products--product-rail .gem-product-card__media, .gem-cart-recommendations--product-rail .gem-product-card__media { min-block-size: 0 !important; }
 .gem-product-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
 .gem-featured-collection .gem-product-card__media > img, .gem-product-card-grid .gem-product-card__media > img { object-fit: cover; }
 .gem-product-card-grid--quick-view-grid .gem-product-card__media { display: block; min-height: 0; }
@@ -873,7 +873,7 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-cart-recommendations--dawn-empty .gem-product-card__quick-actions { display: none; }
 .gem-featured-collection--editorial-grid > .gem-section__inner > .gem-section__heading, .gem-featured-collection--editorial-grid > .gem-section__inner > .gem-section__body { display: none; }
 .gem-featured-collection--editorial-grid { padding-block: 28px 36px; }
-.gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-columns, 4), minmax(0, 1fr)); gap: 8px; }
+.gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-columns, 4), minmax(0, 1fr)); gap: 8px; }
 .gem-product-card-grid--quick-view-grid { padding-top: 0; }
 .gem-product-card-grid--quick-view-grid .gem-section__heading:empty { display: none; }
 .gem-product-card-grid--quick-view-grid .gem-price:not(.gem-price--on-sale) .gem-price__compare { display: none; }
@@ -1027,13 +1027,13 @@ main > .gem-section:first-child { padding-top: 0; }
   .gem-hero-banner--compact-collection { padding-block: 25px; }
   .gem-hero-banner--compact-collection .gem-section__heading { font-size: 30px; line-height: 39px; }
   .gem-product-card-grid--quick-view-grid > .gem-section__inner, .gem-main-search > .gem-section__inner { width: calc(100% - 30px); }
-  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 4px !important; }
+  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !important; }
   .gem-product-card__content { padding-top: 8px; gap: 4px; }
   .gem-product-card__title { font-size: 15px; line-height: 24px; }
   .gem-product-card__price, .gem-product-card__price .gem-price { font-size: 16px; line-height: 24px; }
   .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, var(--gem-heading-phone-cap)); }
   .gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size-mobile, var(--gem-heading-phone-cap)); }
-  .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }
+  .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] > .gem-section__inner { width: calc(100% - 30px); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__frame { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__item { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; }

package/dist/sections.js

@@ -82,8 +82,8 @@ function subscriptionPlans(allocations, basePrice) {
     if (!id || seen.has(id)) continue;
     const adjustments = Array.isArray(row?.priceAdjustments) ? row.priceAdjustments.filter(Boolean) : [];
     const first = adjustments[0];
-    const money = first?.perDeliveryPrice ?? first?.price ?? null;
-    const amount = adjustments.length ? num(money?.amount) : base > 0 ? base : null;
+    const money2 = first?.perDeliveryPrice ?? first?.price ?? null;
+    const amount = adjustments.length ? num(money2?.amount) : base > 0 ? base : null;
     if (amount === null) continue;
     seen.add(id);
     const cheaper = base > 0 && amount < base;
@@ -92,7 +92,7 @@ function subscriptionPlans(allocations, basePrice) {
       id,
       name: typeof row?.sellingPlan?.name === "string" && row.sellingPlan.name.trim() || "Subscription",
       amount,
-      currencyCode: typeof money?.currencyCode === "string" && money.currencyCode || void 0,
+      currencyCode: typeof money2?.currencyCode === "string" && money2.currencyCode || void 0,
       savingPct: Math.round(discountPct),
       discountPct,
       introOnly: adjustments.length > 1
@@ -153,10 +153,10 @@ function merge(runs) {
   }
   return out.length ? out : [{ text: "", marks: [] }];
 }
-function place(text, phrases) {
+function place(text2, phrases) {
   const taken = [];
   phrases.forEach((phrase, index) => {
-    for (let at = text.indexOf(phrase); at >= 0; at = text.indexOf(phrase, at + 1)) {
+    for (let at = text2.indexOf(phrase); at >= 0; at = text2.indexOf(phrase, at + 1)) {
       const end = at + phrase.length;
       if (!taken.some(([s, e]) => at < e && s < end)) {
         taken.push([at, end, index]);
@@ -166,8 +166,8 @@ function place(text, phrases) {
   });
   return taken;
 }
-function phraseMarkRuns(text, lists = {}) {
-  const copy = String(text ?? "");
+function phraseMarkRuns(text2, lists = {}) {
+  const copy = String(text2 ?? "");
   const n = copy.length;
   const marks = Array.from({ length: n });
   const hrefs = Array.from({ length: n });
@@ -207,10 +207,10 @@ var OPEN = [["***", ["bold", "italic"]], ["**", ["bold"]], ["==", ["highlight"]]
 var ESCAPABLE = "*_=!^[]()\\";
 var STAND_IN = 57344;
 var escapeMarkers = (src) => src.replace(/\\([*_=!^[\]()\\])/g, (_, c) => String.fromCharCode(STAND_IN + ESCAPABLE.indexOf(c)));
-var unescapeMarkers = (text) => text.replace(/[-]/g, (c) => ESCAPABLE[c.charCodeAt(0) - STAND_IN]);
+var unescapeMarkers = (text2) => text2.replace(/[-]/g, (c) => ESCAPABLE[c.charCodeAt(0) - STAND_IN]);
 function read(src, inherited, href, depth) {
   const out = [];
-  const at = (text, marks, h = href) => ({ text, marks: ordered(marks), ...h ? { href: h } : {} });
+  const at = (text2, marks, h = href) => ({ text: text2, marks: ordered(marks), ...h ? { href: h } : {} });
   let last = 0;
   for (const m of src.matchAll(INLINE)) {
     const i = m.index ?? 0;
@@ -235,10 +235,10 @@ function read(src, inherited, href, depth) {
   return out;
 }
 function inlineMarkRuns(src) {
-  const text = String(src ?? "");
-  const escapes = !/[\ue000-\ue009]/.test(text);
+  const text2 = String(src ?? "");
+  const escapes = !/[\ue000-\ue009]/.test(text2);
   const runs = [];
-  text.split("\n").forEach((line, i) => {
+  text2.split("\n").forEach((line, i) => {
     if (i) runs.push({ text: "\n", marks: [] });
     if (line.length > MAX_INLINE) return void runs.push({ text: line, marks: [] });
     const read1 = read(escapes ? escapeMarkers(line) : line, [], void 0, 0);
@@ -253,8 +253,118 @@ function markClassName(marks) {
 function inlineMarkText(src) {
   return inlineMarkRuns(src).map((r) => r.text).join("");
 }
+
+// ../../packages/gem-sections/src/card-price.ts
+function priceAmount(m) {
+  const a = m?.amount;
+  if (a == null || typeof a === "string" && !a.trim()) return NaN;
+  return typeof a === "number" || typeof a === "string" ? Number(a) : NaN;
+}
+var text = (v) => typeof v === "string" && v.trim() ? v : void 0;
+var finite = (n) => typeof n === "number" && Number.isFinite(n) ? n : void 0;
+var MONEY = /* @__PURE__ */ new Map();
+function money(n, currency) {
+  if (!Number.isFinite(n) || !currency) return void 0;
+  let format = MONEY.get(currency);
+  if (format === void 0) {
+    try {
+      format = new Intl.NumberFormat(void 0, { style: "currency", currency });
+    } catch {
+      format = null;
+    }
+    if (MONEY.size < 64) MONEY.set(currency, format);
+  }
+  return format ? format.format(n) : `${n.toFixed(2)} ${currency}`;
+}
+var WHOLE;
+var CENTS;
+function plain(n, cents = !Number.isInteger(n)) {
+  if (!Number.isFinite(n)) return void 0;
+  if (!cents) {
+    if (!WHOLE) WHOLE = new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 });
+    return WHOLE.format(n);
+  }
+  if (!CENTS) CENTS = new Intl.NumberFormat(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  return CENTS.format(n);
+}
+var SEP = "[,'\u2019 \\u00a0\\u2009\\u202f]";
+var SEPS = new RegExp(SEP, "g");
+var ONE_NUMBER = new RegExp(`^(\\D*)(\\d{1,3}(?:(?:${SEP}\\d{2})*(?:${SEP}\\d{3})+)?|\\d+)(\\.\\d{1,2})?(\\D*)$`);
+var MULTIPLIER = /^\s*(?:k|tr|triệu|nghìn|ngàn|m|mn|mio|b|bn)(?!\p{L})/iu;
+function priceTextAmount(value) {
+  const m = value ? ONE_NUMBER.exec(value.trim()) : null;
+  if (!m || /[.,]$/.test(m[1]) || new Set(m[2].replace(/\d/g, "")).size > 1 || MULTIPLIER.test(m[4])) return void 0;
+  return Number(m[2].replace(SEPS, "") + (m[3] ?? ""));
+}
+function startsWithFrom(value, label) {
+  if (typeof value !== "string") return false;
+  const head = value.trim().normalize("NFC").toLowerCase();
+  return [label, "from", "t\u1EEB"].some((w) => {
+    const t = String(w ?? "").trim().normalize("NFC").toLowerCase();
+    return Boolean(t) && head.startsWith(t) && !/^\p{L}/u.test(head.slice(t.length));
+  });
+}
+var NUMBER_RUN = /\d(?:[\d.,'’    ]*\d)?/g;
+function readAlike(value) {
+  const runs = value.trim().match(NUMBER_RUN);
+  if (!runs || runs.length !== 1) return void 0;
+  const run = runs[0];
+  const tail = /^(.*)[.,](\d{1,2})$/.exec(run);
+  const n = Number(tail ? `${tail[1].replace(/\D/g, "")}.${tail[2]}` : run.replace(/\D/g, ""));
+  return Number.isFinite(n) ? { n, frame: value.trim().replace(run, "#") } : void 0;
+}
+function struckAbove(price, struck) {
+  const a = readAlike(price), b = readAlike(struck);
+  return a != null && b != null && a.frame === b.frame && b.n > a.n;
+}
+function cardPrice(product, fromLabel = "From") {
+  const p = product ?? {};
+  const seller = text(p.price);
+  const nodes = (Array.isArray(p.variants?.nodes) ? p.variants.nodes : []).filter((v) => v != null && typeof v === "object");
+  const sel = p.selectedVariant != null && typeof p.selectedVariant === "object" ? p.selectedVariant : void 0;
+  const at = sel ? nodes.findIndex((v) => sel.id != null && v.id === sel.id || nodes.length === 1 && (v.id == null || sel.id == null)) : -1;
+  const variants = at >= 0 ? nodes.map((v, i) => i === at ? { ...sel, ...v } : v) : sel ? [sel, ...nodes] : nodes;
+  const priced = variants.filter((v) => Number.isFinite(priceAmount(v.price)));
+  const amounts = priced.map((v) => priceAmount(v.price));
+  const min = p.priceRange?.minVariantPrice;
+  const minAmount = priceAmount(min);
+  const maxAmount = priceAmount(p.priceRange?.maxVariantPrice);
+  const lowest = Number.isFinite(minAmount) ? minAmount : amounts.length ? Math.min(...amounts) : finite(p.price) ?? NaN;
+  const code = (v) => text(v)?.trim();
+  const currency = code(min?.currencyCode) ?? priced.map((v) => code(v.price?.currencyCode)).find(Boolean);
+  const varies = p.priceVaries === true || Number.isFinite(lowest) && (amounts.some((a) => a !== lowest) || Number.isFinite(maxAmount) && maxAmount !== lowest);
+  const amount = finite(lowest) ?? priceTextAmount(seller);
+  const soldOut = p.soldOut === true || p.availableForSale === false || p.availableForSale !== true && variants.length > 0 && variants.every((v) => v.availableForSale === false);
+  const buyable = soldOut ? [] : variants.filter((v) => v.availableForSale !== false);
+  const atLowest = buyable.filter((v) => priceAmount(v.price) === lowest);
+  const discounted = atLowest.find((v) => priceAmount(v.compareAtPrice) > lowest);
+  const withId = (list) => list.find((v) => v.id != null);
+  const anyBuyable = priced.length === 0 ? withId(buyable) : void 0;
+  const base = { varies, amount, soldOut };
+  const formatted = money(lowest, currency);
+  if (formatted || Number.isFinite(lowest) && !seller) {
+    const cmp = discounted ? priceAmount(discounted.compareAtPrice) : NaN;
+    const cents = !Number.isInteger(lowest) || Number.isFinite(cmp) && !Number.isInteger(cmp);
+    const show = (n) => money(n, currency) ?? plain(n, cents);
+    const variant = discounted ? discounted.id != null ? discounted : void 0 : withId(atLowest) ?? anyBuyable;
+    return { text: show(lowest), from: varies, compareAt: discounted ? show(cmp) : void 0, variant, ...base };
+  }
+  if (seller) {
+    const named = priceTextAmount(seller) === lowest ? withId(atLowest) : void 0;
+    const struck = text(p.compareAtPrice);
+    return {
+      text: seller,
+      from: p.priceVaries === true && !startsWithFrom(seller, fromLabel),
+      compareAt: !soldOut && struck && struckAbove(seller, struck) ? struck : void 0,
+      variant: named ?? anyBuyable,
+      ...base
+    };
+  }
+  return { from: false, variant: anyBuyable, ...base };
+}
 export {
   MARK_KINDS,
+  cardPrice,
   defaultPlan,
   elementOverrides,
   imageSrcSet,