@gemboss/gem-framework 0.9.0 → 0.9.3

package/README.md

@@ -73,6 +73,12 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.9.2** (06/10/2026): `reveal-on-scroll` bỏ qua `data-gem-reveal="none"` và `"default"` (hai giá trị "không áp gì" của
+  knob reveal): section hiện ngay, không ẩn chờ cuộn. Trước đó section đặt `none` vẫn bị ẩn như mọi section reveal.
+- **0.9.1** (06/10/2026): plugin `reveal-on-scroll` không còn giấu section khách đang thấy. Section đã nằm trong màn hình
+  lúc tải được hiện tại chỗ (trước đó bị đặt `ready` rồi mới hiện lại, nên phần đầu trang chớp tắt), và khi trình
+  duyệt bật `prefers-reduced-motion: reduce` mọi section hiện ngay, không ẩn chờ cuộn. Hai luật lấy từ
+  `components/revealOnScroll.js` của gemsite, để gemsite dùng được plugin của gói.
 - **0.9.0** (05/10/2026): `claimIn` (và mọi cổng dùng nó: `fabricatedProofInSource`, làn mã sinh theme của
   `check-fabricated-proof`) bắt lời hứa phí ship bằng 0 không có chữ "free" (`shippingZeroPromiseIn`: tách câu, bỏ ký hiệu đầu dòng, đòi CẢ câu khớp
   một dạng có tên):

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.9.0",
-  "gemtheme_sha": "a60504b03d89dabdda00812f0b026b5cc68fddfb",
+  "version": "0.9.3",
+  "gemtheme_sha": "63ccd6e35a160cee1935c6780b4db5deaef86571",
   "gemtheme_dirty": false,
   "framework_version": "0.1.0"
 }

package/dist/gem-framework.css

@@ -2466,7 +2466,7 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-product-card-grid--quick-view-grid .gem-product-card-grid__meta { display: flex; }
 .gem-product-card-grid__controls { display: flex; align-items: center; gap: 20px; min-height: 32px; margin: 0 0 24px; }
 .gem-product-card-grid--quick-view-grid .gem-product-card-grid__controls { min-height: 51px; height: 51px; margin: 0 0 16px !important; padding-top: 10px; }
-.gem-product-card-grid__grid { gap: 8px !important; }
+.gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !important; }
 .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters { display: flex; align-items: center; gap: 18px; border: 0; background: transparent; padding: 0; }
 .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary { min-width: auto; border: 0; background: transparent; padding: 0; pointer-events: none; }
 .gem-product-card-grid__controls .gem-collection-filter-toolbar__filter, .gem-product-card-grid__controls .gem-collection-filter-toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 400; }
@@ -2611,7 +2611,7 @@ 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__grid { gap: 4px !important; }
+  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 4px !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; }

package/dist/gem-runtime.js

@@ -847,7 +847,13 @@
     const nodes = document.querySelectorAll('[data-gem-reveal], .gem-reveal');
     let bound = 0;
     const reveal = (node) => { node.dataset.gemRevealState = 'in'; };
-    if (!target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }
+    // Reduced motion and no IntersectionObserver land on the same answer: show everything now (from gemsite revealOnScroll.js).
+    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce || !target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }
+    // Above the fold the browser has already painted the section: writing 'ready' would blink it out and back in.
+    // `none` and `default` are the knob's "apply nothing" values; the attribute is still written, so skip them here.
+    const off = (node) => { const v = node.getAttribute ? node.getAttribute('data-gem-reveal') : null; return v === 'none' || v === 'default'; };
+    const inViewport = (node) => { if (!node.getBoundingClientRect) return true; const r = node.getBoundingClientRect(); const h = target.innerHeight || (document.documentElement && document.documentElement.clientHeight) || 0; return r.top < h && r.bottom > 0; };
     const observer = new target.IntersectionObserver((entries, obs) => {
       entries.forEach((entry) => {
         if (!entry.isIntersecting) return;
@@ -858,6 +864,7 @@
     }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
     nodes.forEach((node) => {
       if (!mark(node, 'reveal-on-scroll')) return;
+      if (off(node) || inViewport(node)) { reveal(node); bound += 1; return; }
       if (!node.dataset.gemRevealState) node.dataset.gemRevealState = 'ready';
       observer.observe(node);
       bound += 1;

package/dist/index.js

@@ -3292,7 +3292,11 @@ function createDawnParityCss() {
     ".gem-product-card-grid--quick-view-grid .gem-product-card-grid__meta { display: flex; }",
     ".gem-product-card-grid__controls { display: flex; align-items: center; gap: 20px; min-height: 32px; margin: 0 0 24px; }",
     ".gem-product-card-grid--quick-view-grid .gem-product-card-grid__controls { min-height: 51px; height: 51px; margin: 0 0 16px !important; padding-top: 10px; }",
-    ".gem-product-card-grid__grid { gap: 8px !important; }",
+    // Scoped to the Dawn quick-view grid it was measured on, as gemsite's copy is (app/globals.css). Unscoped,
+    // it forced an 8px / 4px gap with !important on EVERY section reusing the class: GemFactory's tier-specs
+    // stacked its cards 2-4px apart on mobile (library audit 2026-10-05), and this repo's own
+    // product-card-grid/featured renamed its grid to __cards just to get out from under it (review #628).
+    ".gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !important; }",
     ".gem-product-card-grid__controls .gem-collection-filter-toolbar__filters { display: flex; align-items: center; gap: 18px; border: 0; background: transparent; padding: 0; }",
     ".gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary { min-width: auto; border: 0; background: transparent; padding: 0; pointer-events: none; }",
     ".gem-product-card-grid__controls .gem-collection-filter-toolbar__filter, .gem-product-card-grid__controls .gem-collection-filter-toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 400; }",
@@ -3445,7 +3449,7 @@ 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__grid { gap: 4px !important; }",
+    "  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 4px !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; }",
@@ -5098,7 +5102,13 @@ var revealOnScrollPluginRegistrationLines = [
   "    const nodes = document.querySelectorAll('[data-gem-reveal], .gem-reveal');",
   "    let bound = 0;",
   "    const reveal = (node) => { node.dataset.gemRevealState = 'in'; };",
-  "    if (!target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }",
+  "    // Reduced motion and no IntersectionObserver land on the same answer: show everything now (from gemsite revealOnScroll.js).",
+  "    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;",
+  "    if (reduce || !target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }",
+  "    // Above the fold the browser has already painted the section: writing 'ready' would blink it out and back in.",
+  '    // `none` and `default` are the knob\'s "apply nothing" values; the attribute is still written, so skip them here.',
+  "    const off = (node) => { const v = node.getAttribute ? node.getAttribute('data-gem-reveal') : null; return v === 'none' || v === 'default'; };",
+  "    const inViewport = (node) => { if (!node.getBoundingClientRect) return true; const r = node.getBoundingClientRect(); const h = target.innerHeight || (document.documentElement && document.documentElement.clientHeight) || 0; return r.top < h && r.bottom > 0; };",
   "    const observer = new target.IntersectionObserver((entries, obs) => {",
   "      entries.forEach((entry) => {",
   "        if (!entry.isIntersecting) return;",
@@ -5109,6 +5119,7 @@ var revealOnScrollPluginRegistrationLines = [
   "    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });",
   "    nodes.forEach((node) => {",
   "      if (!mark(node, 'reveal-on-scroll')) return;",
+  "      if (off(node) || inViewport(node)) { reveal(node); bound += 1; return; }",
   "      if (!node.dataset.gemRevealState) node.dataset.gemRevealState = 'ready';",
   "      observer.observe(node);",
   "      bound += 1;",

package/dist/plugins/reveal-on-scroll.js

@@ -10,7 +10,13 @@ function install({ document, window, target, mark, canListen, listen: __gemListe
     const nodes = document.querySelectorAll('[data-gem-reveal], .gem-reveal');
     let bound = 0;
     const reveal = (node) => { node.dataset.gemRevealState = 'in'; };
-    if (!target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }
+    // Reduced motion and no IntersectionObserver land on the same answer: show everything now (from gemsite revealOnScroll.js).
+    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce || !target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }
+    // Above the fold the browser has already painted the section: writing 'ready' would blink it out and back in.
+    // `none` and `default` are the knob's "apply nothing" values; the attribute is still written, so skip them here.
+    const off = (node) => { const v = node.getAttribute ? node.getAttribute('data-gem-reveal') : null; return v === 'none' || v === 'default'; };
+    const inViewport = (node) => { if (!node.getBoundingClientRect) return true; const r = node.getBoundingClientRect(); const h = target.innerHeight || (document.documentElement && document.documentElement.clientHeight) || 0; return r.top < h && r.bottom > 0; };
     const observer = new target.IntersectionObserver((entries, obs) => {
       entries.forEach((entry) => {
         if (!entry.isIntersecting) return;
@@ -21,6 +27,7 @@ function install({ document, window, target, mark, canListen, listen: __gemListe
     }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
     nodes.forEach((node) => {
       if (!mark(node, 'reveal-on-scroll')) return;
+      if (off(node) || inViewport(node)) { reveal(node); bound += 1; return; }
       if (!node.dataset.gemRevealState) node.dataset.gemRevealState = 'ready';
       observer.observe(node);
       bound += 1;

package/dist/sections.css

@@ -878,7 +878,7 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-product-card-grid--quick-view-grid .gem-product-card-grid__meta { display: flex; }
 .gem-product-card-grid__controls { display: flex; align-items: center; gap: 20px; min-height: 32px; margin: 0 0 24px; }
 .gem-product-card-grid--quick-view-grid .gem-product-card-grid__controls { min-height: 51px; height: 51px; margin: 0 0 16px !important; padding-top: 10px; }
-.gem-product-card-grid__grid { gap: 8px !important; }
+.gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !important; }
 .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters { display: flex; align-items: center; gap: 18px; border: 0; background: transparent; padding: 0; }
 .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary { min-width: auto; border: 0; background: transparent; padding: 0; pointer-events: none; }
 .gem-product-card-grid__controls .gem-collection-filter-toolbar__filter, .gem-product-card-grid__controls .gem-collection-filter-toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 400; }
@@ -1023,7 +1023,7 @@ 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__grid { gap: 4px !important; }
+  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 4px !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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/gem-framework",
-  "version": "0.9.0",
+  "version": "0.9.3",
   "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",