@gemboss/gem-framework 0.16.1 → 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; }",
@@ -5061,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 = [];
@@ -5108,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 });
@@ -5272,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/settings-schema.js

@@ -11,12 +11,15 @@ var CONTROL_TYPES = Object.freeze([
   "range",
   "color",
   "color_scheme",
+  // the dialect's word for a scheme picker; validateColorScheme requires it stored as a select (normalize converts)
   "image_picker",
   "video",
   "url",
   "link_list",
   "collection",
   "product",
+  "datetime",
+  // a moment with its offset, stored as ISO 8601 (2026-12-31T23:59:00+07:00); the panel draws a date-time picker
   "edges",
   // 4-side spacing box, value = {t,r,b,l}
   "repeater",
@@ -24,6 +27,28 @@ var CONTROL_TYPES = Object.freeze([
   "header"
   // non-input group label
 ]);
+var RENDERED_COLOR_SCHEMES = Object.freeze([
+  "default",
+  "scheme-1",
+  "surface",
+  "accent",
+  "inverse",
+  "scheme-2",
+  "scheme-3",
+  "scheme-4",
+  "scheme-5"
+]);
+var RENDERED_COLOR_SCHEME_SET = new Set(RENDERED_COLOR_SCHEMES);
+var COLOR_SCHEME_OPTIONS = Object.freeze([
+  { value: "default", label: "Default" },
+  { value: "surface", label: "Surface" },
+  { value: "accent", label: "Accent" },
+  { value: "inverse", label: "Inverse" },
+  { value: "scheme-2", label: "Scheme 2" },
+  { value: "scheme-3", label: "Scheme 3" },
+  { value: "scheme-4", label: "Scheme 4" },
+  { value: "scheme-5", label: "Scheme 5" }
+].map((o) => Object.freeze(o)));
 var SETTING_GROUPS = Object.freeze(["content", "options", "design", "advanced"]);
 var CONTROL_TYPE_SET = new Set(CONTROL_TYPES);
 var GROUP_SET = new Set(SETTING_GROUPS);
@@ -32,6 +57,7 @@ var ADVANCED_ID_RE = /(^|_)(visibility|custom_css|custom_html|custom_class|class
 var DESIGN_ID_RE = /(^|_)(colou?r|scheme|radius|shadow|border|spacing|padding|margin|weight|font|typography|align|alignment|card|divider|overlay|tone|price)(_|$)/i;
 var CONTENT_TYPES = /* @__PURE__ */ new Set([
   "text",
+  "datetime",
   "textarea",
   "richtext",
   "inline_richtext",
@@ -119,16 +145,20 @@ function normalizeSetting(s = {}) {
   const options = Array.isArray(s.options) ? s.options : Array.isArray(s.enum) ? s.enum.map((v) => ({ value: String(v), label: humanizeId(String(v)) || String(v) })) : void 0;
   const min = s.min !== void 0 ? s.min : s.minimum;
   const max = s.max !== void 0 ? s.max : s.maximum;
-  const type = resolveType(s, Boolean(options));
+  let type = resolveType(s, Boolean(options));
+  const schemeChoice = (type === "color_scheme" || id === "color_scheme") && !(options && options.length && options.every((o) => o && RENDERED_COLOR_SCHEME_SET.has(o.value)));
+  if (schemeChoice) type = "select";
   const out = {
     id,
     type,
-    group: inferGroup({ ...s, type }),
+    group: inferGroup({ ...s, type: schemeChoice ? "color_scheme" : type }),
     label: s.label || humanizeId(id)
   };
   if (s.info) out.info = s.info;
-  if (s.default !== void 0) out.default = s.default;
-  if (options) out.options = options;
+  if (schemeChoice) out.default = RENDERED_COLOR_SCHEME_SET.has(s.default) && s.default !== "scheme-1" ? s.default : "default";
+  else if (s.default !== void 0) out.default = s.default;
+  if (schemeChoice) out.options = COLOR_SCHEME_OPTIONS.map((o) => ({ ...o }));
+  else if (options) out.options = options;
   if (min !== void 0) out.min = min;
   if (max !== void 0) out.max = max;
   if (s.step !== void 0) out.step = s.step;
@@ -195,14 +225,30 @@ function validateRow(s, seen, push) {
   if (!s.label) push("warn", "missing_label", `Setting "${s.id}" has no \`label\`.`, s.id);
   if (!s.group) push("warn", "missing_group", `Setting "${s.id}" has no \`group\`.`, s.id);
   else if (!GROUP_SET.has(s.group)) push("error", "unknown_group", `Setting "${s.id}" uses unknown group "${s.group}".`, s.id);
-  if ((s.type === "select" || s.type === "radio") && !Array.isArray(s.options))
-    push("warn", "choice_without_options", `Setting "${s.id}" (${s.type}) has no \`options\`.`, s.id);
+  if ((s.type === "select" || s.type === "radio") && !(Array.isArray(s.options) && s.options.length))
+    push("error", "choice_without_options", `Setting "${s.id}" (${s.type}) has no \`options\`.`, s.id);
+  if (s.type === "range" && !(Number.isFinite(s.min) && Number.isFinite(s.max)))
+    push("error", "range_without_bounds", `Setting "${s.id}" (range) needs numeric \`min\` and \`max\`.`, s.id);
+  if (s.id === "color_scheme" || s.type === "color_scheme") validateColorScheme(s, push);
   if (s.requires !== void 0) {
     const r = s.requires;
-    const ok = r && typeof r === "object" && typeof r.key === "string" && r.key && ("equals" in r && ["string", "number", "boolean"].includes(typeof r.equals) || r.set === true);
-    if (!ok) push("error", "invalid_requires", `Setting "${s.id}" has a malformed \`requires\` (want {key, equals} or {key, set: true}).`, s.id);
+    const scalar = (v) => ["string", "number", "boolean"].includes(typeof v);
+    const ok = r && typeof r === "object" && typeof r.key === "string" && r.key && ("equals" in r && scalar(r.equals) || r.set === true || Array.isArray(r.in) && r.in.length > 0 && r.in.every(scalar));
+    if (!ok) push("error", "invalid_requires", `Setting "${s.id}" has a malformed \`requires\` (want {key, equals}, {key, in: [...]} or {key, set: true}).`, s.id);
   }
 }
+function validateColorScheme(s, push) {
+  const options = Array.isArray(s.options) ? s.options : [];
+  if (s.type !== "select" || !options.length) {
+    push("error", "color_scheme_not_a_choice", `Setting "${s.id}" must be a select over the rendered schemes (${RENDERED_COLOR_SCHEMES.join(", ")}), not type "${s.type}".`, s.id);
+    return;
+  }
+  const unknown = options.map((o) => o && o.value).filter((v) => !RENDERED_COLOR_SCHEME_SET.has(v));
+  if (unknown.length)
+    push("error", "color_scheme_unrendered_option", `Setting "${s.id}" offers ${unknown.map((v) => `"${v}"`).join(", ")}, which no store draws.`, s.id);
+  if (s.default !== void 0 && !options.some((o) => o && o.value === s.default))
+    push("error", "color_scheme_default_not_offered", `Setting "${s.id}" defaults to "${s.default}", which is not one of its options.`, s.id);
+}
 function validateRequires(rows, push) {
   const byId = new Map(rows.filter((r) => r && r.id).map((r) => [r.id, r]));
   for (const s of rows) {
@@ -215,6 +261,20 @@ function validateRequires(rows, push) {
     }
     if ("equals" in r && Array.isArray(gate.options) && !gate.options.some((o) => o && String(o.value) === String(r.equals)))
       push("error", "requires_unknown_value", `Setting "${s.id}" requires ${r.key} = "${r.equals}", which is not one of its options.`, s.id);
+    if (Array.isArray(r.in) && r.in.every((v) => ["string", "number", "boolean"].includes(typeof v)) && Array.isArray(gate.options)) {
+      for (const v of r.in) if (!gate.options.some((o) => o && String(o.value) === String(v)))
+        push("error", "requires_unknown_value", `Setting "${s.id}" requires ${r.key} in [${r.in.join(", ")}], and "${v}" is not one of its options.`, s.id);
+    }
+  }
+  for (const s of rows) {
+    const seenKeys = /* @__PURE__ */ new Set();
+    for (let at = s; at && at.requires && typeof at.requires.key === "string"; at = byId.get(at.requires.key)) {
+      if (seenKeys.has(at.id)) {
+        push("error", "requires_cycle", `Setting "${s.id}" is gated in a cycle (${[...seenKeys].join(" \u2192 ")} \u2192 ${at.id}): no value ever shows it.`, s.id);
+        break;
+      }
+      seenKeys.add(at.id);
+    }
   }
 }
 function validateSettingsSchema(raw) {
@@ -244,7 +304,9 @@ function isCanonical(raw) {
   return validateSettingsSchema(raw).issues.every((i) => i.level !== "error");
 }
 export {
+  COLOR_SCHEME_OPTIONS,
   CONTROL_TYPES,
+  RENDERED_COLOR_SCHEMES,
   SETTING_GROUPS,
   humanizeId,
   inferGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/gem-framework",
-  "version": "0.16.1",
+  "version": "0.18.11",
   "description": "gem-framework của GemTheme (CSS, runtime, token, bộ kiểm) cộng đúng bộ kiểm section gemtheme dùng khi duyệt. Build từ gemtheme, không sửa ở đây.",
   "type": "module",
   "main": "./dist/index.js",