@gemboss/gem-framework 0.18.13 → 0.18.16

package/README.md

@@ -93,6 +93,60 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.18.16** (20/10/2026): plugin `bundle`, mô hình bộ tự chọn BYOB (GemFactory gap #41). 9 section bundle-builder của GemFactory
+  (slot-sidebar, box-size-first, routine-kit, tier-bar, system-list, reward-tiles, silhouette-tray, gift-box, grid-milestone-panel)
+  mỗi cái chép một khối "LÕI BYOB" trong behavior.js. Phần chúng VẼ khác nhau nhiều (ô + tab, cỡ hộp + độ đa dạng, thang bậc + bộ
+  đếm, kit + bước, hộp quà có nắp), nên engine là mô hình và bộ điều khiển, không vẽ.
+  - Section xin engine bằng `data-bb-root`.
+  - Engine giữ luật (`data-bb-rules`: min, max, per, repeat, tiers, price_mode, sizes, kits + steps), món đã chọn, cỡ hộp, kit và
+    bước, giá. Có ba cách tính: `totals` (theo bậc bộ sẽ đạt), `totalsNow` (theo bậc đang đạt), `unitNow` (giá một món trên thẻ).
+  - Engine xử lý mọi thao tác đổi bộ: `[data-bb-add]` / `[data-bb-inc]`, `[data-bb-dec]` / `[data-bb-minus]`, `[data-bb-uncheck]`,
+    `[data-bb-remove]`, `[data-bb-clear]`, ô số `input[data-bb-count]`, cách mua `input[data-bb-plan]` (radio hoặc checkbox),
+    `input[data-bb-size]` (cỡ hộp, hoặc biến thể của một món khi có `data-bb-variant`), `[data-bb-kit-tab]`, `[data-bb-step-nav]`,
+    `[data-bb-cta]` / `[data-bb-skip]` (nút mang `aria-disabled="true"` thì không gửi).
+  - Bật theo thuộc tính, không đổi gì của section không khai: cỡ hộp `data-bb-sizes="trim|queue"` (hạ cỡ thì bỏ món cuối, hoặc
+    giữ chúng chờ vào lại), bấm lại để bỏ `data-bb-add-toggle`, tiền "1.234đ" `data-bb-money="vi"`, chữ ở `data-bb-labels`; theo
+    dữ liệu của món: biến thể theo thẻ (`data-bb-variants` + `data-bb-current`, khoá `<thẻ>~<chỉ số>`), món quà `data-bb-gift`
+    (vào giỏ cùng bộ, không tính số món).
+  - Giỏ: MỘT `gem:cart:add-many`, mỗi dòng mang `_bundle_id`, `_bundle`, `_bundle_rule`, cộng `sellingPlanId` khi định kỳ. Có cầu giỏ
+    gemsite thì chờ `gem:cart:added` / `gem:cart:add-failed`. Phần riêng của section nối vào qua `setBase(giá)` (giá vỏ hộp vào tổng)
+    và `setCartHead(fn)` (dòng vỏ hộp đứng đầu, mang thuộc tính nắp / quà).
+  - Sau mỗi lần đổi phát `gem:bundle:change` (kèm `action`) trên gốc. API `root.gemBundle` (`state()`, `money`, `fill`, `say`, toán
+    bậc / giá, các thao tác) cho `paint()` của section.
+  - Đầu ra chung tuỳ chọn `[data-bb-out]` cho trang không tự vẽ.
+
+  Đối chiếu trong Chromium, 9 section, 1280 và 390: behavior.js gốc so với engine + behavior chỉ còn phần vẽ, cùng chuỗi thao tác
+  (thêm, +, −, ✓, ×, xoá hết, ô số, đổi cách mua, tần suất, cỡ hộp, biến thể, chip, kit, bước, nắp, quà, sheet, nút chính + nội
+  dung `gem:cart:add-many`). Trạng thái mọi phần tử mang hook, focus và giỏ trùng từng bước (0 khác biệt); engine cố ý làm sai một
+  bậc thì cả 9 lệch. Kèm vá của `reviews`: dải ảnh nhỏ trong lightbox đặt `loading` trước `src`.
+- **0.18.15** (20/10/2026): plugin `reviews`, engine danh sách review (GemFactory gap #44). 8 section product-reviews của
+  GemFactory mỗi cái mang một bản riêng của cùng một lõi trong behavior.js (14–27 KB mỗi cái); nay lõi đó là MỘT plugin:
+  `gem-runtime.js` (load `idle`) hoặc `import { mount } from "@gemboss/gem-framework/plugins/reviews"`. Section xin engine bằng
+  `data-rv-root` trên gốc của nó; section không có dấu đó (vẫn mang lõi riêng) không bị gắn, nên lõi riêng và plugin không chạy
+  chồng. Hợp đồng chỉ là thuộc tính `data-rv-*` (đầy đủ ở đầu `reviews-engine.ts`):
+  - Lõi: sort (menu hoặc select, 13 khoá), lọc sao / có ảnh / chủ đề / quốc gia / tìm (trễ 180 ms) / xoá lọc, trang số (một hay
+    nhiều thanh, cửa sổ cố định hoặc `1 2 3 4 … n`) hoặc xem thêm, đếm, đọc thêm, menu, sheet lọc, hữu ích một lần mỗi review
+    (`gem:review:vote` trên hub và trên window), lightbox.
+  - Chỗ 8 section khác nhau thành thuộc tính: thu gọn N review đầu (`data-rv-collapsed` + `data-rv-expand`), Show N mỗi trang,
+    nhãn trang, sao giữ khi bấm lại (`data-rv-star-keep`), chip bộ lọc đang bật, sheet có Apply / Reset, vùng bật tắt và vùng tự
+    bỏ lọc khi đóng, dải trượt, tô chữ tìm thấy, chữ số ít (`data-rv-count-one`, `data-rv-status-one`), số theo locale
+    (`data-rv-locale`), lightbox (đầu cuối ẩn / mờ / vòng, tập ảnh theo review / nhóm / danh sách JSON của thẻ, bỏ trùng, ảnh kế
+    ló ra, vuốt, nền mờ, bỏ phiếu từ trong lightbox hoặc chỉ xem).
+  - Khác bản cũ có chủ đích: chọn một mục trong menu thì focus về nút của menu (bản cũ để focus rơi xuống `<body>`); cửa sổ trang
+    cố định không còn vẽ dấu … trước trang đầu cửa sổ.
+  - Còn ở behavior của từng section: masonry, carousel vòng vô tận + tự chạy, hộp đọc cả review, dịch, sắp xếp hỏi đáp, thẻ chen
+    giữa. Chúng vẽ lại theo `gem:reviews:render` (phát trên hub VÀ trên gốc section), và nhờ engine vẽ lại bằng
+    `gem:reviews:refresh` trên gốc.
+  Đối chiếu trong Chromium trên markup thật của cả 8 section, cùng một chuỗi thao tác (sort, sao, lọc, trang, xem thêm, đọc thêm,
+  hữu ích, lightbox, menu; 1280 và 390), behavior.js gốc so với engine: trạng thái trùng từng bước, trừ khác biệt có chủ đích ở trên
+  và phần còn ở section.
+- **0.18.14** (20/10/2026): lớp phủ tối là một token (GemFactory gap #17). Khoá màu TUỲ CHỌN `color.scrim` (phát thành
+  `--gem-color-scrim`) là màu lớp phủ ở độ đậm tối đa; nền sau dialog popup (55%), lớp tối trên ảnh nền popup (35% → 60%), nền sau
+  cart drawer (36%) và lớp tối trên ảnh của hero mặc định (32%) đọc nó qua `gemScrim(N)` = `color-mix(in srgb,
+  var(--gem-color-scrim, #000) N%, transparent)`. Không đặt thì ra ĐÚNG như trước (đo Chromium: 5/5 độ đậm trùng từng giá trị
+  pixel với màu viết cứng cũ); preset đặt màu có alpha (`rgb(0 0 0 / .7)`) thì mọi lớp phủ nhạt cùng tỉ lệ. Băng dark / accent
+  không đảo khoá này. Cảnh báo `untokenized_visual_value` trên một màu đen có alpha giờ chỉ thẳng cách viết bằng token, giữ đúng
+  độ đậm.
 - **0.18.13** (20/10/2026): ô nhập, select, textarea có trạng thái hover và lỗi (§9.2; GemFactory Framework › Controls đo cả
   hai là INERT). Hover dày viền thêm 1px theo màu chữ của ô (vòng theo hộp; ô gạch chân và ô tô nền chỉ dày cạnh đáy), chỉ trên
   máy có chuột (`@media (hover: hover)`), không áp cho ô disabled hay ô lỗi. Lỗi (`aria-invalid="true"`, do form đặt) tô viền

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.18.13",
-  "gemtheme_sha": "74aee046a4ea5b333966a87c337ec1d855508775",
+  "version": "0.18.16",
+  "gemtheme_sha": "bd2fed3a51b065235fd57cda3526879241ed2332",
   "gemtheme_dirty": false,
-  "framework_version": "0.18.13"
+  "framework_version": "0.18.16"
 }

package/dist/editions.js

@@ -83,6 +83,8 @@ var GEM_MOTION_SCALE_DEFAULTS = {
   blur: "8px"
 };
 var optionalGemTokenKeys = {
+  // Lớp phủ tối (GemFactory gap #17): xem GEM_SCRIM_FALLBACK / gemScrim bên dưới.
+  color: ["scrim"],
   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`),

package/dist/gem-framework.css

@@ -9,6 +9,7 @@
   --gem-color-success: #008060;
   --gem-color-warning: #9a661a;
   --gem-color-danger: #d72c0d;
+  --gem-color-scrim: #000;
   --gem-font-body: Inter, system-ui, sans-serif;
   --gem-font-heading: Inter, system-ui, sans-serif;
   --gem-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -1295,7 +1296,7 @@ a {
 .gem-cart-drawer__overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.36);
+  background: color-mix(in srgb, var(--gem-color-scrim, #000) 36%, transparent);
 }
 @keyframes gem-cart-drawer-panel-in { from { translate: calc(var(--gem-drawer-offset, 24px) * var(--gem-drawer-dir, 1)) 0; opacity: 0; } }
 @keyframes gem-cart-drawer-overlay-in { from { opacity: 0; } }
@@ -1571,7 +1572,7 @@ a {
   width: min(880px, 92vw); max-width: none; max-height: min(640px, 92vh); overflow: hidden;
   border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-md);
 }
-.gem-popup-shell__dialog::backdrop { background: rgb(0 0 0 / 0.55); }
+.gem-popup-shell__dialog::backdrop { background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 .gem-popup-shell__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; height: 100%; }
 .gem-popup-shell__media { position: relative; min-width: 0; overflow: hidden; background: var(--gem-color-surface); }
 .gem-popup-shell__image { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -1594,7 +1595,7 @@ a {
 .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel {
   width: min(420px, 86%); margin: var(--gem-space-xl) 0; background: var(--gem-color-background); border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-sm);
 }
-.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6)); }
+.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--gem-color-scrim, #000) 35%, transparent), color-mix(in srgb, var(--gem-color-scrim, #000) 60%, transparent)); }
 .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel,
 .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__close { color: #fff; }
 .gem-popup-shell__close {
@@ -1641,10 +1642,10 @@ a {
   .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-rows: 1fr; }
   .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; max-height: none; }
 }
-:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: rgb(0 0 0 / 0.55); }
+:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 :root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: fixed; inset: 0; display: block; }
 :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }
-:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }
+:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 @media (min-width: 750px) {
   :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] { padding: 0; }
   :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { height: 720px; max-height: none; }
@@ -2474,7 +2475,7 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-hero-banner--default { position: relative; overflow: hidden; padding: 0; color: white; place-items: stretch; }
 .gem-hero-banner--default .gem-hero-banner__inner { position: static; width: 100%; min-height: 720px; height: 100%; display: grid; align-items: end; justify-items: center; padding-bottom: 0; }
 .gem-hero-banner--default .gem-hero-banner__media { position: absolute; inset: 0; z-index: 0; }
-.gem-hero-banner--default .gem-hero-banner__media::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 32%); }
+.gem-hero-banner--default .gem-hero-banner__media::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--gem-color-scrim, #000) 32%, transparent); }
 .gem-hero-banner--default .gem-hero-banner__image, .gem-hero-banner--default .gem-hero-banner__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
 .gem-hero-banner--default .gem-hero-banner__copy { position: absolute; z-index: 1; left: 50%; bottom: 50px; transform: translateX(-50%); width: min(702px, 100%); margin: 0; padding: 40px 0; text-align: center; display: block; }
 .gem-hero-banner--default .gem-section__heading { margin: 0; font-size: 52px; line-height: 67.6px; color: currentColor; }