@gemboss/gem-framework 0.12.1 → 0.14.0

package/README.md

@@ -9,7 +9,7 @@ gem-framework của GemTheme đóng thành package, cho các repo **ngoài** mon
 | `…/sections` | 4 hàm `headless.tsx` được import (`elementOverrides`, `imageSrcSet`, `subscriptionPlans`, `defaultPlan`) | `packages/gem-sections/src` |
 | `…/section-gate` | `validateSectionArtifacts`: ĐÚNG bộ kiểm section gemtheme dùng khi duyệt. Từ 0.3.0 thêm ba cổng của thư viện cho MỘT section: `layoutKnobCheck` (+ `LAYOUT_ATTRS`), `slotContractDrift` (+ `slotsReadBy`, `slotSourceFromElementTree`), `cssPairingOrphans` (+ `classesStyledBy`, truyền CSS từ `createGemThemeCss`). Từ 0.3.2 thêm hai cổng pháp lý: `fabricatedProofInSource` / `fabricatedProofInSchema` (điểm, số lượt, người, lời hứa bịa) và `inventedTestimonyIn` (hằng DEMO_*_QUOTE/REVIEW… làm giá trị khi thiếu dữ liệu). Từ 0.3.3 hai cổng này đọc được tiếng Việt ("4,8/5", "đã bán", "miễn phí vận chuyển", "199k", cả chữ NFD), tra giá trị của `DEMO.<key>` ở mọi chỗ đọc nó (`??`, `\|\|`, toán tử ba ngôi, dòng bị Prettier ngắt), và bỏ qua số lượng hiển thị (`reviews_to_show`…). Nâng từ 0.3.2 lên có thể làm đỏ section trước đó xanh: đó là lời khẳng định nằm trong DEMO. Từ 0.3.5 bắt thêm chữ ký người Việt (tên kèm nơi chốn như "Chị Lan, Hà Nội", hoặc họ + Thị/Văn như "Nguyễn Thị Hoa"; tiêu đề viết hoa từng chữ thì không), điểm sao ("4,9 ★"), `rating: 4.9` / `reviewCount: "1.284"` trong mảng sản phẩm mẫu, và hằng demo ở nhánh else của toán tử ba ngôi (`bound ? [] : DEMO_REVIEWS`). Mỗi thứ bịa chỉ báo MỘT lần: tại dòng DEMO nếu dòng đó tự lộ, không thì tại chỗ đọc. "đồng hồ" không còn bị đọc là giá. Từ 0.3.6 bắt lời hứa có thời hạn đứng sau từ khoá ("Dùng thử 30 ngày", "Bảo hành 12 tháng", "Nhận trong 2–4 ngày", "Giao 2 giờ") và "hoàn tiền" không kèm số; "Chính sách hoàn tiền" vẫn là nhãn. Từ 0.3.7 câu hỏi (kết thúc bằng "?") không bao giờ là lời hứa, "không hợp lệ"/số bước/nhịp giao không bị báo, và bắt thêm "trong vòng N ngày", "Giao hàng 2–4 ngày", "Bảo hành 1 đổi 1…", "Try it free for 30 days", "Ships in 24h". Từ 0.3.8 xuất thêm `claimIn` (câu hỏi "một chuỗi này có phải lời khẳng định, người bịa, hay lời hứa?"). Từ 0.3.9 bắt "cancel anytime", "guaranteed delivery", "huỷ bất cứ lúc nào" (chính sách huỷ gói và giao hàng). Từ 0.3.10 lời từ chối ("cannot be canceled", "Không thể hủy") không bị báo, "giao dịch/giao diện" không phải giao hàng, "Delivery not guaranteed" là lời miễn trừ, một chuỗi chỉ gồm con số viết tắt ("199k", "12k+") mang nhãn trung tính "hardcoded figure" (không phân biệt được giá với số đếm), và `stringLiteralsIn(line)` thay cho hằng `STRING_LITERAL` (đã gỡ: một regex `/g` dùng chung rò `lastIndex`; 0 chỗ dùng ở gemboss/gemfactory/gemsite). Từ 0.3.11 "Huỷ bỏ lọc…" và "Hủy đơn, gọi chúng tôi bất cứ lúc nào" không bị đọc là chính sách huỷ; "huỷ đăng ký" là bỏ nhận tin (như "Unsubscribe anytime"); `SOURCE.json` ghi `gemtheme_dirty`, và `npm pack` từ chối khi ĐẦU VÀO của gói (`packages/`, gói này trừ `package.json`, `scripts/lib/`) có thay đổi chưa commit hoặc git không trả lời được. Từ 0.3.12 bắt lời hứa hoàn tiền không có chữ "hoàn tiền" liền nhau ("nhận lại toàn bộ tiền", "Hoàn lại 100% tiền", "Trả lại tiền nếu không hài lòng"); lời từ chối ("Không được hoàn lại tiền") và tiền thừa/thối khi thanh toán không bị bắt Từ 0.4.0: `demoOutsidePreview(tsx)` (chữ mẫu DEMO chỉ hiện trong bản xem trước, tức khi `section.demo === true`; plan xuất bản không bao giờ mang cờ đó) và schema `SectionSpec` khai trường `demo` | `packages/gem-sections/src/section-artifacts.ts`, `section-contract.ts` |
 | `…/settings-schema` | `validateSettingsSchema` | `scripts/lib/settings-schema-contract.mjs` |
-| `…/gem-framework.css`, `…/gem-runtime.js` | CSS token mặc định + runtime mọi plugin, dựng sẵn. `gem-runtime.js` tự chạy khi tải: đăng ký và lên lịch đủ 22 plugin | build |
+| `…/gem-framework.css`, `…/gem-runtime.js` | CSS token mặc định + runtime mọi plugin, dựng sẵn. `gem-runtime.js` tự chạy khi tải: đăng ký và lên lịch đủ 23 plugin | build |
 | `…/tokens.css`, `…/primitives.css`, `…/sections.css`, `…/popup-shell.css` | Từ 0.8.0: `gem-framework.css` cắt ba (từ 0.8.3 cắt bốn), nối lại theo đúng thứ tự đó thì bằng `gem-framework.css` từng byte (build dừng nếu không bằng). `tokens.css`: biến `:root` + núm style. `primitives.css`: reset, phần tử nền, tiện ích, mọi primitive `.gem-*`. `sections.css`: khung header/footer, lớp section chung, profile theme. `popup-shell.css` (0.8.3): khung popup `.gem-popup-shell`, chỉ trang có popup mới cần tải, đặt sau `primitives.css` và trước `sections.css` (thứ tự nối: tokens, primitives, popup-shell, sections). CSS riêng của từng section (`section-library/**/gem.css`) KHÔNG nằm trong gói | `createGemThemeCssParts` |
 | `…/plugins/<key>` (`…/plugins/<key>.js`), `…/runtime-core` | Từ 0.8.0: mỗi plugin của runtime là một ES module, `export function mount(root = document, options?)` trả về `unmount()`, import không làm gì. Cùng dòng mã với `gem-runtime.js` (một bảng trong `runtime.ts`), chỉ khác: mọi `x.addEventListener(` thành `__gemListen(x, ` để unmount gỡ được. `runtime-core.js` là phần dùng chung: `mountPlugin`, `createGemApi`, `gemApi` | `runtime.ts`, `runtime-modules.ts`, `runtime-core.js` |
 
@@ -93,6 +93,44 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.14.0** (11/10/2026): CHỈ THÊM, store đang chạy không đổi pixel nào (không section nào của gemtheme, gemsite, gemboss
+  đọc các tên dưới đây; 30 mục kho GemFactory tự khai thang dùng tên riêng theo mục). Hai gap của bộ interaction "Gọn"
+  (Lily 08/10/2026) mà kho đang chép tay vào từng mục:
+  (1) **Thang chuyển động (#32).** `createGemTokenCss` luôn phát `--gem-motion-fast` 100ms, `-base` 180ms, `-slow` 260ms,
+  `--gem-ease-enter` / `--gem-ease-exit`, `--gem-motion-distance` 8px, `-distance-lg` 16px, `-stagger` 30ms, `-blur` 8px
+  (`GEM_MOTION_SCALE_DEFAULTS`, `gemMotionScaleCssVars`); plan đổi được qua `motion.fast|base|slow|enter|exit|distance|
+  distanceLg|stagger|blur`, viết kiểu nào cũng được (`Slow`, `distance_lg`): mặc định chỉ phát cho biến plan chưa khai.
+  Plan có `motion.duration` bằng 0 (style pack `motion_level: "none"`) nhận thang tĩnh. Kèm một khối
+  `@media (prefers-reduced-motion: reduce)` cùng selector đưa thời lượng về 1ms (sự kiện end vẫn bắn), quãng, nhịp so le
+  và độ nhoè về 0 (`GEM_MOTION_REDUCED`), mang `!important` ở cuối khai báo để stylesheet đến sau khai thang trên `:root`
+  không đè được lựa chọn của người dùng. Bộ kiểm CSS nhận các biến này là biến chuẩn. Bí danh motion giờ tra theo slug
+  (`motionCssVarName(key)`, dùng hàm này thay vì tra `motionCssVarAliases` theo đúng chữ):
+  `easing_soft`, `ambient-slow`, `Enter` ra đúng `--gem-ease-soft`, `--gem-ambient-slow`, `--gem-ease-enter` (trước đó ra
+  `--gem-motion-easing-soft`…, biến không rule nào đọc).
+  (2) **Ảnh hiện dần (#38).** `data-gem-img-in` trên `<img>` hoặc trên khung chứa (áp cho mọi ảnh bên trong). Plugin mới
+  `img-in` (critical, `gem:img-in:ready` mang số ảnh đã gắn) đánh dấu TỪNG ảnh (`data-gem-bound-img-in`) chưa tải xong lúc
+  gắn và đặt `data-gem-img-in-state="loading"`; tải xong `"in"`, hết hoạt ảnh `gem-img-in` thì gỡ (ảnh hiện lại từ
+  display:none không chạy lại), lỗi thì gỡ. Tải xong mà trạng thái nhoè không thực sự hiện (luật section ưu tiên cao hơn,
+  reveal đặt sau) hoặc người dùng giảm chuyển động thì gỡ thẳng, không chạy hoạt ảnh. Đứng ngoài: ảnh đã tải sẵn, và ảnh
+  section đã tự đặt opacity / filter / animation (ảnh phụ chờ rê chuột, hero tối, `data-gem-ambient`). Một listener pha
+  capture trên document, nên ảnh nhân bản lúc đang tải (marquee, slider vô hạn) không kẹt nhoè. Khung lồng khung gắn một
+  lần. CSS (`GEM_IMG_IN_CSS`, trong `createPrimitiveCss`) nằm trong `:where()` (độ ưu tiên 0) và chỉ khớp ảnh còn dấu, nên
+  unmount lúc ảnh đang tải không để ảnh kẹt nhoè; mount lại xoá trạng thái sót trên ảnh đã tải. Gắn MỘT lần: `gem-runtime.js`
+  không quét lại, ảnh do plugin khác chèn sau hiện như thường; bản module gắn nội dung mới bằng `mount(gốc mới)`, kể cả
+  khi vùng bật là tổ tiên ngoài gốc. Không JS thì ảnh hiện như thường. `runtimePluginKeySchema` (`@gemtheme/schemas`) có
+  thêm `img-in`; runtime đủ 23 plugin. Planner chưa lên lịch img-in (danh sách khoá của planner là bản chép tay, thiếu cả
+  tabs, hero-slideshow, reveal-on-scroll, offer-engine): store nhận plugin qua `gem-runtime.js` hoặc module.
+- **0.13.0** (11/10/2026): kiểu nút **`gradient`** (`plan.global_settings.button_style`, `<body data-gem-button-style="gradient">`).
+  GemFactory Global Style đo 339 trang store hàng đầu: nút mua chính là gradient ở 8,4% (10,6% trang landing), 16/21 cái đo
+  được là MỘT tông đi từ sáng sang sẫm, và 14/21 có chữ dưới 4,5:1. Đầu kia của gradient là màu nhấn dời 25%
+  (`GEM_BUTTON_GRADIENT_SHIFT`) RA XA chữ nút: về đen khi màu nhấn tối hơn chữ, về trắng khi sáng hơn, nên chữ không bao giờ
+  kém tương phản hơn trên nền đặc. Viết bằng CSS (`color-mix` + `rgb(from …)`), đọc `--gem-color-accent` / `-accent-text`,
+  nên nút trong băng tối / băng accent theo bộ màu của băng; nằm trong `@supports`, trình duyệt không có cú pháp màu tương đối
+  giữ nút đặc như cũ. Bỏ qua nút link và secondary. Export mới: `gemButtonGradientEnd` (cùng phép tính bằng JS, cho phép đo),
+  `gemButtonGradientEndCss`, `GEM_BUTTON_GRADIENT_SHIFT`, `GEM_BUTTON_GRADIENT_PIVOT`. Schema `@gemtheme/schemas`: một
+  `buttonStyleSchema` cho cả ba chỗ trước đây tự liệt kê (cài đặt theme, design system plan, preset morph). Store không chọn
+  gradient không đổi gì, nên không cần edition mới. Biết mà chưa sửa: luật outline / soft cũng chạm nút link (chờ edition sau).
+
 - **0.12.1** (10/10/2026): hai ca biên của token nút, review gemsite #839 bắt khi gemsite chép phép đọc này để phát token
   cho store. (1) Bo trỏ một bậc bo khác (`radius.button: var(--gem-radius-pill)`) không bị nhân núm `--gem-style-radius`
   lần hai: bậc được trỏ tới đã nhân rồi (pill 1,4 thành 1,96×). Áp chung cho mọi thang qua `toScaledCssVars`; giá trị số

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.12.1",
-  "gemtheme_sha": "4ceacbe0c2ace7da410851fc5fe15589c1d87b77",
+  "version": "0.14.0",
+  "gemtheme_sha": "75954020da59dcca83cdae5676c0a9746e40ba4b",
   "gemtheme_dirty": false,
-  "framework_version": "0.12.1"
+  "framework_version": "0.14.0"
 }

package/dist/editions.js

@@ -71,11 +71,24 @@ var PHONE_TARGET_BY_KEY = Object.fromEntries(
 );
 var GEM_LINE_HEIGHT_TOKEN_KEYS = ["headingLineHeight", "bodyLineHeight"];
 var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
+var GEM_MOTION_SCALE_DEFAULTS = {
+  fast: "100ms",
+  base: "180ms",
+  slow: "260ms",
+  enter: "cubic-bezier(.33, 1, .68, 1)",
+  exit: "cubic-bezier(.4, 0, 1, 1)",
+  distance: "8px",
+  distanceLg: "16px",
+  stagger: "30ms",
+  blur: "8px"
+};
 var optionalGemTokenKeys = {
   typography: [...GEM_TYPE_RAMP_KEYS, ...GEM_LINE_HEIGHT_TOKEN_KEYS, ...GEM_BUTTON_TOKEN_KEYS.typography],
   spacing: [...Object.keys(GEM_DERIVED_SPACE_STEPS), ...GEM_PHONE_TOKEN_TARGETS.spacing.map((k) => `${k}Mobile`)],
   layout: GEM_PHONE_TOKEN_TARGETS.layout.map((k) => `${k}Mobile`),
-  radius: [...GEM_BUTTON_TOKEN_KEYS.radius]
+  radius: [...GEM_BUTTON_TOKEN_KEYS.radius],
+  // Khoá motion ngoài duration / easing: nền ambient (đã phát từ trước nhưng chưa khai ở đây) và thang "Gọn" (#32).
+  motion: ["easingSoft", "ambientSlow", "ambientMid", "ambientFast", "ambientAmp", ...Object.keys(GEM_MOTION_SCALE_DEFAULTS)]
 };
 var GEM_HEADING_SIZE_CSS_VARS = [
   "--gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1));",
@@ -83,6 +96,18 @@ var GEM_HEADING_SIZE_CSS_VARS = [
   "--gem-section-heading-size-mobile: min(var(--gem-section-heading-size), var(--gem-heading-phone-cap, clamp(1.75rem, 9vw, 2.75rem)));",
   "--gem-hero-heading-size-mobile: min(var(--gem-hero-heading-size), var(--gem-heading-phone-cap, clamp(1.75rem, 9vw, 2.75rem)));"
 ];
+var motionCssVarAliases = {
+  easingSoft: "--gem-ease-soft",
+  enter: "--gem-ease-enter",
+  exit: "--gem-ease-exit",
+  ambientSlow: "--gem-ambient-slow",
+  ambientMid: "--gem-ambient-mid",
+  ambientFast: "--gem-ambient-fast",
+  ambientAmp: "--gem-ambient-amp"
+};
+var motionCssVarAliasBySlug = Object.fromEntries(
+  Object.entries(motionCssVarAliases).map(([key, name]) => [slugify(key), name])
+);
 function slugify(value) {
   return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }

package/dist/gem-framework.css

@@ -37,6 +37,15 @@
   --gem-ambient-mid: 7s;
   --gem-ambient-fast: 5.5s;
   --gem-ambient-amp: 7px;
+  --gem-motion-fast: 100ms;
+  --gem-motion-base: 180ms;
+  --gem-motion-slow: 260ms;
+  --gem-ease-enter: cubic-bezier(.33, 1, .68, 1);
+  --gem-ease-exit: cubic-bezier(.4, 0, 1, 1);
+  --gem-motion-distance: 8px;
+  --gem-motion-distance-lg: 16px;
+  --gem-motion-stagger: 30ms;
+  --gem-motion-blur: 8px;
   --gem-layout-page: 1180px;
   --gem-layout-gutter: 32px;
   --gem-layout-section: 64px;
@@ -68,6 +77,17 @@
   --gem-border-subtle: calc(1px * var(--gem-style-border, 1)) solid var(--gem-color-border);
   --gem-border-strong: calc(1px * var(--gem-style-border, 1)) solid color-mix(in srgb, var(--gem-color-text) 28%, transparent);
 }
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --gem-motion-fast: 1ms !important;
+    --gem-motion-base: 1ms !important;
+    --gem-motion-slow: 1ms !important;
+    --gem-motion-distance: 0px !important;
+    --gem-motion-distance-lg: 0px !important;
+    --gem-motion-stagger: 0ms !important;
+    --gem-motion-blur: 0px !important;
+  }
+}
 
 *, *::before, *::after {
   box-sizing: border-box;
@@ -214,6 +234,16 @@ a {
   border-color: transparent;
   color: var(--gem-color-text);
 }
+@supports (color: rgb(from color-mix(in srgb, red 50%, rgb(from blue calc(255 - r) g b)) clamp(0, (r - 127.5) * 1000, 255) g b)) {
+  [data-gem-button-style='gradient'] .gem-button:not(.gem-button--secondary, .gem-button--link),
+  [data-gem-button-style='gradient'] .gem-button--primary {
+    background-color: var(--gem-color-accent);
+    background-image: linear-gradient(135deg, var(--gem-color-accent), color-mix(in srgb, var(--gem-color-accent) 75%, rgb(from color-mix(in srgb, var(--gem-color-accent) 50%, rgb(from var(--gem-color-accent-text, var(--gem-color-surface)) calc(255 - r) calc(255 - g) calc(255 - b))) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) / 1)));
+    background-origin: border-box;
+    border-color: transparent;
+    color: var(--gem-color-accent-text, var(--gem-color-surface));
+  }
+}
 .gem-card {
   border: var(--gem-border-subtle, 1px solid var(--gem-color-border));
   border-radius: var(--gem-card-radius, var(--gem-radius-md));
@@ -1090,6 +1120,9 @@ a {
 [data-gem-reveal='zoom'][data-gem-reveal-state='ready'] { opacity: 0; transform: scale(0.94); }
 [data-gem-reveal='blur'][data-gem-reveal-state='ready'] { opacity: 0; filter: blur(10px); transform: none; }
 @media (prefers-reduced-motion: reduce) { [data-gem-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } }
+:where(img[data-gem-bound-img-in][data-gem-img-in-state='loading']) { filter: blur(var(--gem-motion-blur, 8px)); opacity: 0.6; }
+@media (prefers-reduced-motion: no-preference) { :where(img[data-gem-bound-img-in][data-gem-img-in-state='in']) { animation: gem-img-in var(--gem-motion-slow, 260ms) var(--gem-ease-enter, cubic-bezier(.33, 1, .68, 1)); } }
+@keyframes gem-img-in { from { filter: blur(var(--gem-motion-blur, 8px)); opacity: 0.6; } }
 @keyframes gem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--gem-ambient-amp, 7px))); } }
 @keyframes gem-sheen { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
 @keyframes gem-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

package/dist/gem-runtime.js

@@ -1,5 +1,5 @@
 (() => {
-  const config = {"planId":"gem-framework-package","base":"gem-native","dawnAdapter":false,"plugins":[{"key":"cart-drawer","loadStrategy":"interaction","dependsOn":[]},{"key":"mobile-menu","loadStrategy":"interaction","dependsOn":[]},{"key":"quantity-input","loadStrategy":"interaction","dependsOn":[]},{"key":"variant-selects","loadStrategy":"interaction","dependsOn":[]},{"key":"predictive-search","loadStrategy":"critical","dependsOn":[]},{"key":"localization","loadStrategy":"interaction","dependsOn":[]},{"key":"disclosure","loadStrategy":"interaction","dependsOn":[]},{"key":"tabs","loadStrategy":"interaction","dependsOn":[]},{"key":"media-gallery","loadStrategy":"viewport","dependsOn":[]},{"key":"carousel","loadStrategy":"viewport","dependsOn":[]},{"key":"hero-slideshow","loadStrategy":"idle","dependsOn":[]},{"key":"quick-view","loadStrategy":"interaction","dependsOn":[]},{"key":"promo-popup","loadStrategy":"idle","dependsOn":[]},{"key":"before_after","loadStrategy":"viewport","dependsOn":[]},{"key":"runtime-slot-loader","loadStrategy":"idle","dependsOn":[]},{"key":"sticky-atc","loadStrategy":"viewport","dependsOn":[]},{"key":"recently-viewed","loadStrategy":"idle","dependsOn":[]},{"key":"countdown","loadStrategy":"viewport","dependsOn":[]},{"key":"reveal-on-scroll","loadStrategy":"viewport","dependsOn":[]},{"key":"seasonal-effects","loadStrategy":"idle","dependsOn":[]},{"key":"context-adapter","loadStrategy":"idle","dependsOn":[]},{"key":"offer-engine","loadStrategy":"interaction","dependsOn":[]}]};
+  const config = {"planId":"gem-framework-package","base":"gem-native","dawnAdapter":false,"plugins":[{"key":"cart-drawer","loadStrategy":"interaction","dependsOn":[]},{"key":"mobile-menu","loadStrategy":"interaction","dependsOn":[]},{"key":"quantity-input","loadStrategy":"interaction","dependsOn":[]},{"key":"variant-selects","loadStrategy":"interaction","dependsOn":[]},{"key":"predictive-search","loadStrategy":"critical","dependsOn":[]},{"key":"localization","loadStrategy":"interaction","dependsOn":[]},{"key":"disclosure","loadStrategy":"interaction","dependsOn":[]},{"key":"tabs","loadStrategy":"interaction","dependsOn":[]},{"key":"media-gallery","loadStrategy":"viewport","dependsOn":[]},{"key":"carousel","loadStrategy":"viewport","dependsOn":[]},{"key":"hero-slideshow","loadStrategy":"idle","dependsOn":[]},{"key":"quick-view","loadStrategy":"interaction","dependsOn":[]},{"key":"promo-popup","loadStrategy":"idle","dependsOn":[]},{"key":"before_after","loadStrategy":"viewport","dependsOn":[]},{"key":"runtime-slot-loader","loadStrategy":"idle","dependsOn":[]},{"key":"sticky-atc","loadStrategy":"viewport","dependsOn":[]},{"key":"recently-viewed","loadStrategy":"idle","dependsOn":[]},{"key":"countdown","loadStrategy":"viewport","dependsOn":[]},{"key":"reveal-on-scroll","loadStrategy":"viewport","dependsOn":[]},{"key":"img-in","loadStrategy":"critical","dependsOn":[]},{"key":"seasonal-effects","loadStrategy":"idle","dependsOn":[]},{"key":"context-adapter","loadStrategy":"idle","dependsOn":[]},{"key":"offer-engine","loadStrategy":"interaction","dependsOn":[]}]};
   const target = window;
   const existing = target.GemTheme || {};
   const listeners = existing.listeners || {};
@@ -914,6 +914,37 @@
     });
     api.emit('gem:reveal:ready', { source: 'gem-runtime', count: bound });
   });
+  registerPlugin('img-in', ({ api }) => {
+    const STATE = 'data-gem-img-in-state';
+    const BOUND = 'data-gem-bound-img-in';
+    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const style = (img) => (typeof target.getComputedStyle === 'function' ? target.getComputedStyle(img) : null);
+    const owned = (s) => Boolean(s && ((s.opacity && s.opacity !== '1') || (s.filter && s.filter !== 'none') || (s.animationName && s.animationName !== 'none')));
+    const overridden = (s) => Boolean(s && ((s.opacity && s.opacity !== '0.6') || (s.filter && s.filter.indexOf('blur') === -1)));
+    const settle = (event) => {
+      const img = event.target;
+      if (!img || img.tagName !== 'IMG' || !img.hasAttribute(BOUND)) return;
+      const state = img.getAttribute(STATE);
+      if (event.type === 'load' || event.type === 'error') {
+        if (state !== 'loading') return;
+        if (event.type === 'load' && !reduce && !overridden(style(img))) img.setAttribute(STATE, 'in');
+        else img.removeAttribute(STATE);
+        return;
+      }
+      if (state === 'in' && event.animationName === 'gem-img-in') img.removeAttribute(STATE);
+    };
+    ['load', 'error', 'animationend', 'animationcancel'].forEach((type) => document.addEventListener(type, settle, true));
+    const candidates = [];
+    document.querySelectorAll('img').forEach((img) => {
+      if (!img.closest('[data-gem-img-in]')) return;
+      if (img.complete) { if (!img.hasAttribute(BOUND)) img.removeAttribute(STATE); return; }
+      if (mark(img, 'img-in')) candidates.push(img);
+    });
+    const own = candidates.map((img) => owned(style(img)));
+    let bound = 0;
+    candidates.forEach((img, i) => { if (own[i]) return; img.setAttribute(STATE, 'loading'); bound += 1; });
+    api.emit('gem:img-in:ready', { source: 'gem-runtime', count: bound });
+  });
   registerPlugin('recently-viewed', ({ api }) => {
     const storageKey = 'gem:recently-viewed-products';
     const readItems = () => {

package/dist/index.js

@@ -259,9 +259,28 @@ function aaLabelColor(preferred, fill, fallbacks = []) {
   if (pass) return pass;
   return candidates.reduce((a, b) => hexContrastRatio(b, ground) > hexContrastRatio(a, ground) ? b : a, preferred);
 }
+var GEM_BUTTON_GRADIENT_SHIFT = 0.25;
+var GEM_BUTTON_GRADIENT_PIVOT = 127.5;
+var weighted = (r, g, b) => 0.2126 * r + 0.7152 * g + 0.0722 * b;
+var target = (w) => Math.min(255, Math.max(0, (w - GEM_BUTTON_GRADIENT_PIVOT) * 1e3));
+function gemButtonGradientEnd(accent, accentText) {
+  const a = normalizeHex(accent);
+  const t = normalizeHex(accentText);
+  if (!a || !t) return void 0;
+  const ch = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
+  const [ar, ag, ab] = ch(a);
+  const [tr, tg, tb] = ch(t);
+  const gray = Math.round(target(weighted((ar + 255 - tr) / 2, (ag + 255 - tg) / 2, (ab + 255 - tb) / 2))).toString(16).padStart(2, "0");
+  return mixHex(a, `#${gray}${gray}${gray}`, GEM_BUTTON_GRADIENT_SHIFT);
+}
+function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText = "var(--gem-color-accent-text, var(--gem-color-surface))") {
+  const t = `clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - ${GEM_BUTTON_GRADIENT_PIVOT}) * 1000, 255)`;
+  const probe = `color-mix(in srgb, ${accent} 50%, rgb(from ${accentText} calc(255 - r) calc(255 - g) calc(255 - b)))`;
+  return `color-mix(in srgb, ${accent} ${100 - GEM_BUTTON_GRADIENT_SHIFT * 100}%, rgb(from ${probe} ${t} ${t} ${t} / 1))`;
+}
 
 // ../../packages/gem-framework/src/tokens.ts
-var gemFrameworkVersion = "0.12.1";
+var gemFrameworkVersion = "0.14.0";
 var GEM_FOCUS_RING_CSS_VAR = "--gem-focus-ring: 2px solid var(--gem-color-accent);";
 var GEM_TAP_MIN_CSS_VAR = "--gem-tap-min: 44px;";
 var GEM_FOCUS_OFFSET_CSS_VAR = "--gem-focus-offset: 3px;";
@@ -464,13 +483,13 @@ function readPhoneTokens(tokens) {
   for (const group of ["spacing", "layout"]) {
     const ownGroup = group === "spacing" ? /var\(\s*--gem-space-/i : /var\(\s*--gem-layout-/i;
     for (const [key, raw] of Object.entries(tokens?.[group] ?? {})) {
-      const target = gemPhoneTokenTarget(group, key);
-      if (target == null) continue;
+      const target2 = gemPhoneTokenTarget(group, key);
+      if (target2 == null) continue;
       const v = stripImportant(String(raw ?? "")).trim();
       const kind = gemSpaceMdKind(v);
       if (kind === "absent") continue;
-      if (kind === "zero") out[group][target] = "0px";
-      else if (kind === "length" && !ownGroup.test(v)) out[group][target] = v;
+      if (kind === "zero") out[group][target2] = "0px";
+      else if (kind === "length" && !ownGroup.test(v)) out[group][target2] = v;
       else out.invalid.push({ path: `${group}.${key}`, value: raw, why: kind === "length" ? `it reads a ${group} variable, which re-declared on :root is a cycle` : "not a length (a number needs a unit, e.g. 70px)" });
     }
   }
@@ -482,11 +501,41 @@ var isLineHeightKey = (k) => GEM_LINE_HEIGHT_TOKEN_KEYS.some((l) => tokenKeyNorm
 var badLineHeight = (k, v) => isLineHeightKey(k) && !LINE_HEIGHT_SHAPE.test(stripImportant(String(v ?? "")).trim());
 var desktopEntries = (group, values) => values ? Object.fromEntries(Object.entries(values).filter(([key]) => gemPhoneTokenTarget(group, key) == null)) : values;
 var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
+var GEM_MOTION_SCALE_DEFAULTS = {
+  fast: "100ms",
+  base: "180ms",
+  slow: "260ms",
+  enter: "cubic-bezier(.33, 1, .68, 1)",
+  exit: "cubic-bezier(.4, 0, 1, 1)",
+  distance: "8px",
+  distanceLg: "16px",
+  stagger: "30ms",
+  blur: "8px"
+};
+var GEM_MOTION_REDUCED = {
+  fast: "1ms",
+  base: "1ms",
+  slow: "1ms",
+  distance: "0px",
+  distanceLg: "0px",
+  stagger: "0ms",
+  blur: "0px"
+};
+var cssVarName = (line) => line.slice(0, line.indexOf(":")).trim();
+function gemMotionScaleCssVars(motion) {
+  const declared = new Set(toMotionCssVars(motion ?? {}).map(cssVarName));
+  const duration = Object.entries(motion ?? {}).find(([key]) => motionCssVarName(key) === "--gem-motion-duration")?.[1];
+  const still = /^0+(?:\.0+)?(?:m?s)?$/i.test(String(duration ?? "").trim());
+  const scale = still ? { ...GEM_MOTION_SCALE_DEFAULTS, ...GEM_MOTION_REDUCED } : GEM_MOTION_SCALE_DEFAULTS;
+  return toMotionCssVars(scale).filter((line) => !declared.has(cssVarName(line)));
+}
 var optionalGemTokenKeys = {
   typography: [...GEM_TYPE_RAMP_KEYS, ...GEM_LINE_HEIGHT_TOKEN_KEYS, ...GEM_BUTTON_TOKEN_KEYS.typography],
   spacing: [...Object.keys(GEM_DERIVED_SPACE_STEPS), ...GEM_PHONE_TOKEN_TARGETS.spacing.map((k) => `${k}Mobile`)],
   layout: GEM_PHONE_TOKEN_TARGETS.layout.map((k) => `${k}Mobile`),
-  radius: [...GEM_BUTTON_TOKEN_KEYS.radius]
+  radius: [...GEM_BUTTON_TOKEN_KEYS.radius],
+  // Khoá motion ngoài duration / easing: nền ambient (đã phát từ trước nhưng chưa khai ở đây) và thang "Gọn" (#32).
+  motion: ["easingSoft", "ambientSlow", "ambientMid", "ambientFast", "ambientAmp", ...Object.keys(GEM_MOTION_SCALE_DEFAULTS)]
 };
 var GEM_HEADING_SIZE_CSS_VARS = [
   "--gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1));",
@@ -643,6 +692,8 @@ function createGemTokenCss(tokens, selector = ":root", options = {}) {
     // and marquee primitives consume; unrecognised keys fall back to the --gem-motion-* namespace,
     // so duration/easing keep emitting --gem-motion-duration/easing exactly as before (back-compat).
     ...toMotionCssVars(tokens.motion),
+    // Thang "Gọn" (#32): khoá plan không khai thì phát mặc định, sau các dòng của plan để thứ tự cũ không đổi.
+    ...gemMotionScaleCssVars(tokens.motion),
     ...toCssVars("layout", desktopEntries("layout", tokens.layout)),
     ...phone.layout.section ? [`--gem-layout-section-mobile: ${phone.layout.section};`] : [],
     ...toCssVars("component", tokens.component),
@@ -675,6 +726,14 @@ function createGemTokenCss(tokens, selector = ":root", options = {}) {
     "}",
     ...bandBorders.length ? [`:where(${bandScope}) {`, ...bandBorders.map((line) => `  ${line}`), "}"] : [],
     ...mobile.length ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, ...mobile.map((line) => `    ${line}`), "  }", "}"] : [],
+    "@media (prefers-reduced-motion: reduce) {",
+    `  ${selector} {`,
+    // !important ở CUỐI khai báo (hợp lệ, khác cờ lọt vào giữa giá trị): stylesheet đến sau khai thang trên :root
+    // (gemsite theme-plan-style) không đè được lựa chọn giảm chuyển động của người dùng. Section tự khai thang trên chính
+    // nó vẫn giữ giá trị của nó, như mọi biến kế thừa.
+    ...toMotionCssVars(GEM_MOTION_REDUCED).map((line) => `    ${line.replace(/;$/, " !important;")}`),
+    "  }",
+    "}",
     ...formBlock ? [formBlock] : [],
     ...buttonCase ? [buttonCase] : []
   ].join("\n");
@@ -723,16 +782,22 @@ function toCssVars(namespace, values) {
 }
 var motionCssVarAliases = {
   easingSoft: "--gem-ease-soft",
+  enter: "--gem-ease-enter",
+  exit: "--gem-ease-exit",
   ambientSlow: "--gem-ambient-slow",
   ambientMid: "--gem-ambient-mid",
   ambientFast: "--gem-ambient-fast",
   ambientAmp: "--gem-ambient-amp"
 };
+var motionCssVarAliasBySlug = Object.fromEntries(
+  Object.entries(motionCssVarAliases).map(([key, name]) => [slugify(key), name])
+);
+function motionCssVarName(key) {
+  return motionCssVarAliasBySlug[slugify(key)] ?? `--gem-motion-${slugify(key)}`;
+}
 function toMotionCssVars(values) {
-  return Object.entries(values).map(([key, value]) => {
-    const name = motionCssVarAliases[key] ?? `--gem-motion-${slugify(key)}`;
-    return `${name}: ${value};`;
-  });
+  if (!values) return [];
+  return Object.entries(values).map(([key, value]) => `${motionCssVarName(key)}: ${value};`);
 }
 function toScaledCssVars(namespace, values, knob) {
   if (!values) return [];
@@ -1181,6 +1246,11 @@ var gemFrameworkRuntimePlugins = [
     load_strategy: "viewport",
     events: ["gem:reveal:ready", "gem:reveal:in"]
   },
+  {
+    key: "img-in",
+    load_strategy: "critical",
+    events: ["gem:img-in:ready"]
+  },
   {
     key: "seasonal-effects",
     load_strategy: "idle",
@@ -1507,6 +1577,12 @@ var GEM_REVEAL_CSS_LINES = [
   "@media (prefers-reduced-motion: reduce) { [data-gem-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } }"
 ];
 var GEM_REVEAL_CSS = GEM_REVEAL_CSS_LINES.join("\n");
+var GEM_IMG_IN_CSS_LINES = [
+  ":where(img[data-gem-bound-img-in][data-gem-img-in-state='loading']) { filter: blur(var(--gem-motion-blur, 8px)); opacity: 0.6; }",
+  "@media (prefers-reduced-motion: no-preference) { :where(img[data-gem-bound-img-in][data-gem-img-in-state='in']) { animation: gem-img-in var(--gem-motion-slow, 260ms) var(--gem-ease-enter, cubic-bezier(.33, 1, .68, 1)); } }",
+  "@keyframes gem-img-in { from { filter: blur(var(--gem-motion-blur, 8px)); opacity: 0.6; } }"
+];
+var GEM_IMG_IN_CSS = GEM_IMG_IN_CSS_LINES.join("\n");
 var GEM_AMBIENT_CSS_LINES = [
   "@keyframes gem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--gem-ambient-amp, 7px))); } }",
   "@keyframes gem-sheen { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }",
@@ -1767,6 +1843,9 @@ function createPrimitiveCss() {
     // and `.gem-button--soft` following button_style on the published storefront but NOT in the
     // preview, which is the drift this rule exists to remove. `--primary` is named too so the
     // modifier keeps winning where both could apply.
+    // KNOWN (11/10/2026): these two also reach `.gem-button--link` (soft paints its tint behind a link-styled button,
+    // outline recolours it). The gradient rule below leaves the link out; fixing these changes stores that did not ask,
+    // so it waits for the next framework edition (editions.ts).
     "[data-gem-button-style='outline'] .gem-button:not(.gem-button--secondary),",
     "[data-gem-button-style='outline'] .gem-button--primary {",
     "  background: transparent;",
@@ -1778,6 +1857,28 @@ function createPrimitiveCss() {
     "  border-color: transparent;",
     "  color: var(--gem-color-text);",
     "}",
+    // `gradient` (0.13.0). GemFactory Global Style, 339 top-store pages: the main CTA is a gradient on 8.4% (10.6% of
+    // landing pages), and 16 of the 21 measured are ONE hue going lighter → darker; 14 of the 21 drew their text under
+    // 4.5:1. The far stop is the accent moved GEM_BUTTON_GRADIENT_SHIFT AWAY from the button text: toward black when the
+    // accent is the darker of the two, toward white when it is the lighter (gemButtonGradientEnd is the same sum in JS;
+    // contrast.ts has the two versions that failed), so the text only gains contrast across the button. It reads
+    // --gem-color-accent / -accent-text, which a dark or accent band points at its own scheme, so a gradient button inside
+    // a band follows the band. The text colour is set here because a bare `.gem-button` sets none. The link variant is
+    // left out (it is text). Behind @supports, and in LONGHANDS: @supports only proves the syntax parses, and a value that
+    // still fails at computed time (a var() that does not resolve) would take the whole `background` shorthand to
+    // transparent under white text (review of #737, reproduced). As longhands only the image drops, over the accent.
+    // Near black or white the two stops all but meet (#121212 → #0e0e0e): moving toward the text would break the AA
+    // promise, so such a palette draws a flat button, and GemFactory's preset gate says so.
+    "@supports (color: rgb(from color-mix(in srgb, red 50%, rgb(from blue calc(255 - r) g b)) clamp(0, (r - 127.5) * 1000, 255) g b)) {",
+    "  [data-gem-button-style='gradient'] .gem-button:not(.gem-button--secondary, .gem-button--link),",
+    "  [data-gem-button-style='gradient'] .gem-button--primary {",
+    "    background-color: var(--gem-color-accent);",
+    `    background-image: linear-gradient(135deg, var(--gem-color-accent), ${gemButtonGradientEndCss()});`,
+    "    background-origin: border-box;",
+    "    border-color: transparent;",
+    "    color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  }",
+    "}",
     ".gem-card {",
     "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
     "  border-radius: var(--gem-card-radius, var(--gem-radius-md));",
@@ -2653,6 +2754,7 @@ function createPrimitiveCss() {
     "  opacity: 1;",
     "}",
     ...GEM_REVEAL_CSS_LINES,
+    ...GEM_IMG_IN_CSS_LINES,
     ...GEM_AMBIENT_CSS_LINES,
     ...GEM_DIVIDER_CSS_LINES,
     ...GEM_CARD_CSS_LINES,
@@ -4561,6 +4663,7 @@ var runtimePluginReadyEvents = {
   "recently-viewed": "gem:recently-viewed:ready",
   countdown: "gem:countdown:ready",
   "reveal-on-scroll": "gem:reveal:ready",
+  "img-in": "gem:img-in:ready",
   "seasonal-effects": "gem:seasonal:ready",
   "context-adapter": "gem:context:ready",
   "offer-engine": "gem:offer:ready"
@@ -5530,6 +5633,39 @@ var revealOnScrollPluginRegistrationLines = [
   "    api.emit('gem:reveal:ready', { source: 'gem-runtime', count: bound });",
   "  });"
 ];
+var imgInPluginRegistrationLines = [
+  "  registerPlugin('img-in', ({ api }) => {",
+  "    const STATE = 'data-gem-img-in-state';",
+  "    const BOUND = 'data-gem-bound-img-in';",
+  "    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;",
+  "    const style = (img) => (typeof target.getComputedStyle === 'function' ? target.getComputedStyle(img) : null);",
+  "    const owned = (s) => Boolean(s && ((s.opacity && s.opacity !== '1') || (s.filter && s.filter !== 'none') || (s.animationName && s.animationName !== 'none')));",
+  "    const overridden = (s) => Boolean(s && ((s.opacity && s.opacity !== '0.6') || (s.filter && s.filter.indexOf('blur') === -1)));",
+  "    const settle = (event) => {",
+  "      const img = event.target;",
+  "      if (!img || img.tagName !== 'IMG' || !img.hasAttribute(BOUND)) return;",
+  "      const state = img.getAttribute(STATE);",
+  "      if (event.type === 'load' || event.type === 'error') {",
+  "        if (state !== 'loading') return;",
+  "        if (event.type === 'load' && !reduce && !overridden(style(img))) img.setAttribute(STATE, 'in');",
+  "        else img.removeAttribute(STATE);",
+  "        return;",
+  "      }",
+  "      if (state === 'in' && event.animationName === 'gem-img-in') img.removeAttribute(STATE);",
+  "    };",
+  "    ['load', 'error', 'animationend', 'animationcancel'].forEach((type) => document.addEventListener(type, settle, true));",
+  "    const candidates = [];",
+  "    document.querySelectorAll('img').forEach((img) => {",
+  "      if (!img.closest('[data-gem-img-in]')) return;",
+  "      if (img.complete) { if (!img.hasAttribute(BOUND)) img.removeAttribute(STATE); return; }",
+  "      if (mark(img, 'img-in')) candidates.push(img);",
+  "    });",
+  "    const own = candidates.map((img) => owned(style(img)));",
+  "    let bound = 0;",
+  "    candidates.forEach((img, i) => { if (own[i]) return; img.setAttribute(STATE, 'loading'); bound += 1; });",
+  "    api.emit('gem:img-in:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
 var recentlyViewedPluginRegistrationLines = [
   "  registerPlugin('recently-viewed', ({ api }) => {",
   "    const storageKey = 'gem:recently-viewed-products';",
@@ -5626,6 +5762,7 @@ var runtimePluginSourceLines = [
   ["before_after", beforeAfterPluginRegistrationLines],
   ["countdown", countdownPluginRegistrationLines],
   ["reveal-on-scroll", revealOnScrollPluginRegistrationLines],
+  ["img-in", imgInPluginRegistrationLines],
   ["recently-viewed", recentlyViewedPluginRegistrationLines],
   ["runtime-slot-loader", runtimeSlotLoaderPluginRegistrationLines],
   ["offer-engine", offerEnginePluginRegistrationLines]
@@ -5927,6 +6064,8 @@ var canonicalCssVariableNames = /* @__PURE__ */ new Set([
   GEM_FOCUS_RING_CSS_VAR.split(":")[0].trim(),
   GEM_TAP_MIN_CSS_VAR.split(":")[0].trim(),
   GEM_FOCUS_OFFSET_CSS_VAR.split(":")[0].trim(),
+  // Thang chuyển động "Gọn" (tokens.ts GEM_MOTION_SCALE_DEFAULTS, #32): luôn phát, section đọc được.
+  ...toMotionCssVars(GEM_MOTION_SCALE_DEFAULTS).map((line) => line.split(":")[0].trim()),
   // The derived spacing steps (tokens.ts GEM_DERIVED_SPACE_STEPS): always emitted, never required.
   ...GEM_DERIVED_SPACE_CSS_VARIABLES,
   // Extension points a section SETS (gemtheme #650): icon size, drawer slide distance.
@@ -6389,9 +6528,9 @@ function renderHeroElementBlocks(section) {
     const s = b?.settings ?? {};
     if (b?.type === "countdown") {
       const label = str(s.label) ? `<p class="gem-hero__countdown-label">${escapeHtml(str(s.label))}</p>` : "";
-      const target = escapeAttribute(str(s.end_date));
+      const target2 = escapeAttribute(str(s.end_date));
       const unit = (n, l) => `<div class="gem-countdown__unit"><span class="gem-countdown__num" data-gem-cd-${n}>00</span><span class="gem-countdown__label">${l}</span></div>`;
-      return `<div class="gem-hero__countdown">${label}<div class="gem-countdown" data-gem-countdown data-gem-countdown-target="${target}" role="timer" aria-label="Offer countdown">${unit("days", "Days")}<div class="gem-countdown__sep">:</div>${unit("hours", "Hrs")}<div class="gem-countdown__sep">:</div>${unit("mins", "Min")}<div class="gem-countdown__sep">:</div>${unit("secs", "Sec")}</div></div>`;
+      return `<div class="gem-hero__countdown">${label}<div class="gem-countdown" data-gem-countdown data-gem-countdown-target="${target2}" role="timer" aria-label="Offer countdown">${unit("days", "Days")}<div class="gem-countdown__sep">:</div>${unit("hours", "Hrs")}<div class="gem-countdown__sep">:</div>${unit("mins", "Min")}<div class="gem-countdown__sep">:</div>${unit("secs", "Sec")}</div></div>`;
     }
     if (b?.type === "trust_badges") {
       const items = ["badge_1", "badge_2", "badge_3"].map((k) => str(s[k])).filter(Boolean).map((t) => `<li class="gem-hero__trust-item"><svg class="gem-hero__trust-check" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>${escapeHtml(t)}</li>`).join("");
@@ -7255,6 +7394,8 @@ export {
   GEM_AMBIENT_CSS,
   GEM_BAND_SCHEMES,
   GEM_BAND_SCHEME_FALLBACK_CSS,
+  GEM_BUTTON_GRADIENT_PIVOT,
+  GEM_BUTTON_GRADIENT_SHIFT,
   GEM_BUTTON_TOKEN_KEYS,
   GEM_BUTTON_TOKEN_SHAPES,
   GEM_COUNTDOWN_ENDED_CSS,
@@ -7270,7 +7411,10 @@ export {
   GEM_FRAMEWORK_EDITIONS,
   GEM_GRID_COLUMNS_ROW_KNOB_CSS,
   GEM_HEADING_SIZE_CSS_VARS,
+  GEM_IMG_IN_CSS,
   GEM_LINE_HEIGHT_TOKEN_KEYS,
+  GEM_MOTION_REDUCED,
+  GEM_MOTION_SCALE_DEFAULTS,
   GEM_PART_CLASS,
   GEM_POPUP_SHELL_CSS,
   GEM_REVEAL_CSS,
@@ -7310,6 +7454,8 @@ export {
   gemBandSchemeCssVars,
   gemBandSchemeDeclarations,
   gemButtonCaseCss,
+  gemButtonGradientEnd,
+  gemButtonGradientEndCss,
   gemFormAttributes,
   gemFormCssBlock,
   gemFormCssVars,
@@ -7323,6 +7469,7 @@ export {
   gemFrameworkValidationRules,
   gemFrameworkVersion,
   gemMobileTokenCssVars,
+  gemMotionScaleCssVars,
   gemPartClass,
   gemPhoneTokenTarget,
   gemPlanShapeKnobs,
@@ -7336,6 +7483,7 @@ export {
   modernMineralFamilyLineage,
   modernMineralHomepageLineageSections,
   motionCssVarAliases,
+  motionCssVarName,
   normalizeGemTokens,
   normalizeHex,
   offerEngineRuntimeScript,

package/dist/plugins/img-in.d.ts

@@ -0,0 +1,9 @@
+// @gemboss/gem-framework/plugins/img-in: types of the ES module next to this file. Generated; do not edit here.
+import type { MountOptions, Unmount } from "../runtime-core.js";
+
+export type { MountOptions, Unmount };
+export declare const key: "img-in";
+export declare const readyEvent: "gem:img-in:ready";
+/** Bind every "img-in" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export declare function mount(root?: ParentNode | null, options?: MountOptions): Unmount;
+export default mount;

package/dist/plugins/img-in.js

@@ -0,0 +1,47 @@
+// @gemboss/gem-framework/plugins/img-in: the gem-runtime plugin "img-in" as an ES module. Generated from
+// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.
+import { mountPlugin } from "../runtime-core.js";
+
+export const key = "img-in";
+export const readyEvent = "gem:img-in:ready";
+
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+  registerPlugin('img-in', ({ api }) => {
+    const STATE = 'data-gem-img-in-state';
+    const BOUND = 'data-gem-bound-img-in';
+    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const style = (img) => (typeof target.getComputedStyle === 'function' ? target.getComputedStyle(img) : null);
+    const owned = (s) => Boolean(s && ((s.opacity && s.opacity !== '1') || (s.filter && s.filter !== 'none') || (s.animationName && s.animationName !== 'none')));
+    const overridden = (s) => Boolean(s && ((s.opacity && s.opacity !== '0.6') || (s.filter && s.filter.indexOf('blur') === -1)));
+    const settle = (event) => {
+      const img = event.target;
+      if (!img || img.tagName !== 'IMG' || !img.hasAttribute(BOUND)) return;
+      const state = img.getAttribute(STATE);
+      if (event.type === 'load' || event.type === 'error') {
+        if (state !== 'loading') return;
+        if (event.type === 'load' && !reduce && !overridden(style(img))) img.setAttribute(STATE, 'in');
+        else img.removeAttribute(STATE);
+        return;
+      }
+      if (state === 'in' && event.animationName === 'gem-img-in') img.removeAttribute(STATE);
+    };
+    ['load', 'error', 'animationend', 'animationcancel'].forEach((type) => __gemListen(document, type, settle, true));
+    const candidates = [];
+    document.querySelectorAll('img').forEach((img) => {
+      if (!img.closest('[data-gem-img-in]')) return;
+      if (img.complete) { if (!img.hasAttribute(BOUND)) img.removeAttribute(STATE); return; }
+      if (mark(img, 'img-in')) candidates.push(img);
+    });
+    const own = candidates.map((img) => owned(style(img)));
+    let bound = 0;
+    candidates.forEach((img, i) => { if (own[i]) return; img.setAttribute(STATE, 'loading'); bound += 1; });
+    api.emit('gem:img-in:ready', { source: 'gem-runtime', count: bound });
+  });
+}
+
+/** Bind every "img-in" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export function mount(root, options) {
+  return mountPlugin(key, install, root, options);
+}
+
+export default mount;

package/dist/primitives.css

@@ -143,6 +143,16 @@ a {
   border-color: transparent;
   color: var(--gem-color-text);
 }
+@supports (color: rgb(from color-mix(in srgb, red 50%, rgb(from blue calc(255 - r) g b)) clamp(0, (r - 127.5) * 1000, 255) g b)) {
+  [data-gem-button-style='gradient'] .gem-button:not(.gem-button--secondary, .gem-button--link),
+  [data-gem-button-style='gradient'] .gem-button--primary {
+    background-color: var(--gem-color-accent);
+    background-image: linear-gradient(135deg, var(--gem-color-accent), color-mix(in srgb, var(--gem-color-accent) 75%, rgb(from color-mix(in srgb, var(--gem-color-accent) 50%, rgb(from var(--gem-color-accent-text, var(--gem-color-surface)) calc(255 - r) calc(255 - g) calc(255 - b))) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) / 1)));
+    background-origin: border-box;
+    border-color: transparent;
+    color: var(--gem-color-accent-text, var(--gem-color-surface));
+  }
+}
 .gem-card {
   border: var(--gem-border-subtle, 1px solid var(--gem-color-border));
   border-radius: var(--gem-card-radius, var(--gem-radius-md));
@@ -1019,6 +1029,9 @@ a {
 [data-gem-reveal='zoom'][data-gem-reveal-state='ready'] { opacity: 0; transform: scale(0.94); }
 [data-gem-reveal='blur'][data-gem-reveal-state='ready'] { opacity: 0; filter: blur(10px); transform: none; }
 @media (prefers-reduced-motion: reduce) { [data-gem-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } }
+:where(img[data-gem-bound-img-in][data-gem-img-in-state='loading']) { filter: blur(var(--gem-motion-blur, 8px)); opacity: 0.6; }
+@media (prefers-reduced-motion: no-preference) { :where(img[data-gem-bound-img-in][data-gem-img-in-state='in']) { animation: gem-img-in var(--gem-motion-slow, 260ms) var(--gem-ease-enter, cubic-bezier(.33, 1, .68, 1)); } }
+@keyframes gem-img-in { from { filter: blur(var(--gem-motion-blur, 8px)); opacity: 0.6; } }
 @keyframes gem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--gem-ambient-amp, 7px))); } }
 @keyframes gem-sheen { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
 @keyframes gem-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

package/dist/section-gate.js

@@ -139,6 +139,13 @@ function aaLabelColor(preferred, fill, fallbacks = []) {
   if (pass) return pass;
   return candidates.reduce((a, b) => hexContrastRatio(b, ground) > hexContrastRatio(a, ground) ? b : a, preferred);
 }
+var GEM_BUTTON_GRADIENT_SHIFT = 0.25;
+var GEM_BUTTON_GRADIENT_PIVOT = 127.5;
+function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText = "var(--gem-color-accent-text, var(--gem-color-surface))") {
+  const t = `clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - ${GEM_BUTTON_GRADIENT_PIVOT}) * 1000, 255)`;
+  const probe = `color-mix(in srgb, ${accent} 50%, rgb(from ${accentText} calc(255 - r) calc(255 - g) calc(255 - b)))`;
+  return `color-mix(in srgb, ${accent} ${100 - GEM_BUTTON_GRADIENT_SHIFT * 100}%, rgb(from ${probe} ${t} ${t} ${t} / 1))`;
+}
 
 // ../../packages/gem-framework/src/tokens.ts
 var GEM_FOCUS_RING_CSS_VAR = "--gem-focus-ring: 2px solid var(--gem-color-accent);";
@@ -361,11 +368,41 @@ var isLineHeightKey = (k) => GEM_LINE_HEIGHT_TOKEN_KEYS.some((l) => tokenKeyNorm
 var badLineHeight = (k, v) => isLineHeightKey(k) && !LINE_HEIGHT_SHAPE.test(stripImportant(String(v ?? "")).trim());
 var desktopEntries = (group, values) => values ? Object.fromEntries(Object.entries(values).filter(([key]) => gemPhoneTokenTarget(group, key) == null)) : values;
 var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
+var GEM_MOTION_SCALE_DEFAULTS = {
+  fast: "100ms",
+  base: "180ms",
+  slow: "260ms",
+  enter: "cubic-bezier(.33, 1, .68, 1)",
+  exit: "cubic-bezier(.4, 0, 1, 1)",
+  distance: "8px",
+  distanceLg: "16px",
+  stagger: "30ms",
+  blur: "8px"
+};
+var GEM_MOTION_REDUCED = {
+  fast: "1ms",
+  base: "1ms",
+  slow: "1ms",
+  distance: "0px",
+  distanceLg: "0px",
+  stagger: "0ms",
+  blur: "0px"
+};
+var cssVarName = (line) => line.slice(0, line.indexOf(":")).trim();
+function gemMotionScaleCssVars(motion) {
+  const declared = new Set(toMotionCssVars(motion ?? {}).map(cssVarName));
+  const duration = Object.entries(motion ?? {}).find(([key]) => motionCssVarName(key) === "--gem-motion-duration")?.[1];
+  const still = /^0+(?:\.0+)?(?:m?s)?$/i.test(String(duration ?? "").trim());
+  const scale = still ? { ...GEM_MOTION_SCALE_DEFAULTS, ...GEM_MOTION_REDUCED } : GEM_MOTION_SCALE_DEFAULTS;
+  return toMotionCssVars(scale).filter((line) => !declared.has(cssVarName(line)));
+}
 var optionalGemTokenKeys = {
   typography: [...GEM_TYPE_RAMP_KEYS, ...GEM_LINE_HEIGHT_TOKEN_KEYS, ...GEM_BUTTON_TOKEN_KEYS.typography],
   spacing: [...Object.keys(GEM_DERIVED_SPACE_STEPS), ...GEM_PHONE_TOKEN_TARGETS.spacing.map((k) => `${k}Mobile`)],
   layout: GEM_PHONE_TOKEN_TARGETS.layout.map((k) => `${k}Mobile`),
-  radius: [...GEM_BUTTON_TOKEN_KEYS.radius]
+  radius: [...GEM_BUTTON_TOKEN_KEYS.radius],
+  // Khoá motion ngoài duration / easing: nền ambient (đã phát từ trước nhưng chưa khai ở đây) và thang "Gọn" (#32).
+  motion: ["easingSoft", "ambientSlow", "ambientMid", "ambientFast", "ambientAmp", ...Object.keys(GEM_MOTION_SCALE_DEFAULTS)]
 };
 var GEM_HEADING_SIZE_CSS_VARS = [
   "--gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1));",
@@ -479,6 +516,8 @@ function createGemTokenCss(tokens, selector = ":root", options = {}) {
     // and marquee primitives consume; unrecognised keys fall back to the --gem-motion-* namespace,
     // so duration/easing keep emitting --gem-motion-duration/easing exactly as before (back-compat).
     ...toMotionCssVars(tokens.motion),
+    // Thang "Gọn" (#32): khoá plan không khai thì phát mặc định, sau các dòng của plan để thứ tự cũ không đổi.
+    ...gemMotionScaleCssVars(tokens.motion),
     ...toCssVars("layout", desktopEntries("layout", tokens.layout)),
     ...phone.layout.section ? [`--gem-layout-section-mobile: ${phone.layout.section};`] : [],
     ...toCssVars("component", tokens.component),
@@ -511,6 +550,14 @@ function createGemTokenCss(tokens, selector = ":root", options = {}) {
     "}",
     ...bandBorders.length ? [`:where(${bandScope}) {`, ...bandBorders.map((line) => `  ${line}`), "}"] : [],
     ...mobile.length ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, ...mobile.map((line) => `    ${line}`), "  }", "}"] : [],
+    "@media (prefers-reduced-motion: reduce) {",
+    `  ${selector} {`,
+    // !important ở CUỐI khai báo (hợp lệ, khác cờ lọt vào giữa giá trị): stylesheet đến sau khai thang trên :root
+    // (gemsite theme-plan-style) không đè được lựa chọn giảm chuyển động của người dùng. Section tự khai thang trên chính
+    // nó vẫn giữ giá trị của nó, như mọi biến kế thừa.
+    ...toMotionCssVars(GEM_MOTION_REDUCED).map((line) => `    ${line.replace(/;$/, " !important;")}`),
+    "  }",
+    "}",
     ...formBlock ? [formBlock] : [],
     ...buttonCase ? [buttonCase] : []
   ].join("\n");
@@ -559,16 +606,22 @@ function toCssVars(namespace, values) {
 }
 var motionCssVarAliases = {
   easingSoft: "--gem-ease-soft",
+  enter: "--gem-ease-enter",
+  exit: "--gem-ease-exit",
   ambientSlow: "--gem-ambient-slow",
   ambientMid: "--gem-ambient-mid",
   ambientFast: "--gem-ambient-fast",
   ambientAmp: "--gem-ambient-amp"
 };
+var motionCssVarAliasBySlug = Object.fromEntries(
+  Object.entries(motionCssVarAliases).map(([key, name]) => [slugify(key), name])
+);
+function motionCssVarName(key) {
+  return motionCssVarAliasBySlug[slugify(key)] ?? `--gem-motion-${slugify(key)}`;
+}
 function toMotionCssVars(values) {
-  return Object.entries(values).map(([key, value]) => {
-    const name = motionCssVarAliases[key] ?? `--gem-motion-${slugify(key)}`;
-    return `${name}: ${value};`;
-  });
+  if (!values) return [];
+  return Object.entries(values).map(([key, value]) => `${motionCssVarName(key)}: ${value};`);
 }
 function toScaledCssVars(namespace, values, knob) {
   if (!values) return [];
@@ -1185,6 +1238,12 @@ var GEM_REVEAL_CSS_LINES = [
   "@media (prefers-reduced-motion: reduce) { [data-gem-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } }"
 ];
 var GEM_REVEAL_CSS = GEM_REVEAL_CSS_LINES.join("\n");
+var GEM_IMG_IN_CSS_LINES = [
+  ":where(img[data-gem-bound-img-in][data-gem-img-in-state='loading']) { filter: blur(var(--gem-motion-blur, 8px)); opacity: 0.6; }",
+  "@media (prefers-reduced-motion: no-preference) { :where(img[data-gem-bound-img-in][data-gem-img-in-state='in']) { animation: gem-img-in var(--gem-motion-slow, 260ms) var(--gem-ease-enter, cubic-bezier(.33, 1, .68, 1)); } }",
+  "@keyframes gem-img-in { from { filter: blur(var(--gem-motion-blur, 8px)); opacity: 0.6; } }"
+];
+var GEM_IMG_IN_CSS = GEM_IMG_IN_CSS_LINES.join("\n");
 var GEM_AMBIENT_CSS_LINES = [
   "@keyframes gem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--gem-ambient-amp, 7px))); } }",
   "@keyframes gem-sheen { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }",
@@ -1438,6 +1497,9 @@ function createPrimitiveCss() {
     // and `.gem-button--soft` following button_style on the published storefront but NOT in the
     // preview, which is the drift this rule exists to remove. `--primary` is named too so the
     // modifier keeps winning where both could apply.
+    // KNOWN (11/10/2026): these two also reach `.gem-button--link` (soft paints its tint behind a link-styled button,
+    // outline recolours it). The gradient rule below leaves the link out; fixing these changes stores that did not ask,
+    // so it waits for the next framework edition (editions.ts).
     "[data-gem-button-style='outline'] .gem-button:not(.gem-button--secondary),",
     "[data-gem-button-style='outline'] .gem-button--primary {",
     "  background: transparent;",
@@ -1449,6 +1511,28 @@ function createPrimitiveCss() {
     "  border-color: transparent;",
     "  color: var(--gem-color-text);",
     "}",
+    // `gradient` (0.13.0). GemFactory Global Style, 339 top-store pages: the main CTA is a gradient on 8.4% (10.6% of
+    // landing pages), and 16 of the 21 measured are ONE hue going lighter → darker; 14 of the 21 drew their text under
+    // 4.5:1. The far stop is the accent moved GEM_BUTTON_GRADIENT_SHIFT AWAY from the button text: toward black when the
+    // accent is the darker of the two, toward white when it is the lighter (gemButtonGradientEnd is the same sum in JS;
+    // contrast.ts has the two versions that failed), so the text only gains contrast across the button. It reads
+    // --gem-color-accent / -accent-text, which a dark or accent band points at its own scheme, so a gradient button inside
+    // a band follows the band. The text colour is set here because a bare `.gem-button` sets none. The link variant is
+    // left out (it is text). Behind @supports, and in LONGHANDS: @supports only proves the syntax parses, and a value that
+    // still fails at computed time (a var() that does not resolve) would take the whole `background` shorthand to
+    // transparent under white text (review of #737, reproduced). As longhands only the image drops, over the accent.
+    // Near black or white the two stops all but meet (#121212 → #0e0e0e): moving toward the text would break the AA
+    // promise, so such a palette draws a flat button, and GemFactory's preset gate says so.
+    "@supports (color: rgb(from color-mix(in srgb, red 50%, rgb(from blue calc(255 - r) g b)) clamp(0, (r - 127.5) * 1000, 255) g b)) {",
+    "  [data-gem-button-style='gradient'] .gem-button:not(.gem-button--secondary, .gem-button--link),",
+    "  [data-gem-button-style='gradient'] .gem-button--primary {",
+    "    background-color: var(--gem-color-accent);",
+    `    background-image: linear-gradient(135deg, var(--gem-color-accent), ${gemButtonGradientEndCss()});`,
+    "    background-origin: border-box;",
+    "    border-color: transparent;",
+    "    color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  }",
+    "}",
     ".gem-card {",
     "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
     "  border-radius: var(--gem-card-radius, var(--gem-radius-md));",
@@ -2324,6 +2408,7 @@ function createPrimitiveCss() {
     "  opacity: 1;",
     "}",
     ...GEM_REVEAL_CSS_LINES,
+    ...GEM_IMG_IN_CSS_LINES,
     ...GEM_AMBIENT_CSS_LINES,
     ...GEM_DIVIDER_CSS_LINES,
     ...GEM_CARD_CSS_LINES,
@@ -4371,6 +4456,8 @@ var canonicalCssVariableNames = /* @__PURE__ */ new Set([
   GEM_FOCUS_RING_CSS_VAR.split(":")[0].trim(),
   GEM_TAP_MIN_CSS_VAR.split(":")[0].trim(),
   GEM_FOCUS_OFFSET_CSS_VAR.split(":")[0].trim(),
+  // Thang chuyển động "Gọn" (tokens.ts GEM_MOTION_SCALE_DEFAULTS, #32): luôn phát, section đọc được.
+  ...toMotionCssVars(GEM_MOTION_SCALE_DEFAULTS).map((line) => line.split(":")[0].trim()),
   // The derived spacing steps (tokens.ts GEM_DERIVED_SPACE_STEPS): always emitted, never required.
   ...GEM_DERIVED_SPACE_CSS_VARIABLES,
   // Extension points a section SETS (gemtheme #650): icon size, drawer slide distance.

package/dist/tokens.css

@@ -37,6 +37,15 @@
   --gem-ambient-mid: 7s;
   --gem-ambient-fast: 5.5s;
   --gem-ambient-amp: 7px;
+  --gem-motion-fast: 100ms;
+  --gem-motion-base: 180ms;
+  --gem-motion-slow: 260ms;
+  --gem-ease-enter: cubic-bezier(.33, 1, .68, 1);
+  --gem-ease-exit: cubic-bezier(.4, 0, 1, 1);
+  --gem-motion-distance: 8px;
+  --gem-motion-distance-lg: 16px;
+  --gem-motion-stagger: 30ms;
+  --gem-motion-blur: 8px;
   --gem-layout-page: 1180px;
   --gem-layout-gutter: 32px;
   --gem-layout-section: 64px;
@@ -68,4 +77,15 @@
   --gem-border-subtle: calc(1px * var(--gem-style-border, 1)) solid var(--gem-color-border);
   --gem-border-strong: calc(1px * var(--gem-style-border, 1)) solid color-mix(in srgb, var(--gem-color-text) 28%, transparent);
 }
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --gem-motion-fast: 1ms !important;
+    --gem-motion-base: 1ms !important;
+    --gem-motion-slow: 1ms !important;
+    --gem-motion-distance: 0px !important;
+    --gem-motion-distance-lg: 0px !important;
+    --gem-motion-stagger: 0ms !important;
+    --gem-motion-blur: 0px !important;
+  }
+}
 

package/package.json

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