@gemboss/gem-framework 0.18.15 → 0.18.16

package/README.md

@@ -93,6 +93,32 @@ 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

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.18.15",
-  "gemtheme_sha": "998fe4dc3096e9bc0a8e9d39e23b27081138b2c9",
+  "version": "0.18.16",
+  "gemtheme_sha": "bd2fed3a51b065235fd57cda3526879241ed2332",
   "gemtheme_dirty": false,
-  "framework_version": "0.18.15"
+  "framework_version": "0.18.16"
 }

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":"img-in","loadStrategy":"critical","dependsOn":[]},{"key":"seasonal-effects","loadStrategy":"idle","dependsOn":[]},{"key":"context-adapter","loadStrategy":"idle","dependsOn":[]},{"key":"offer-engine","loadStrategy":"interaction","dependsOn":[]},{"key":"reviews","loadStrategy":"idle","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":[]},{"key":"reviews","loadStrategy":"idle","dependsOn":[]},{"key":"bundle","loadStrategy":"idle","dependsOn":[]}]};
   const target = window;
   const existing = target.GemTheme || {};
   const listeners = existing.listeners || {};
@@ -1584,7 +1584,7 @@
           const b = document.createElement('button');
           b.type = 'button'; b.className = strip.getAttribute('data-rv-thumb-class') || ''; b.setAttribute('data-rv-lb-thumb', String(k));
           b.setAttribute('aria-label', (strip.getAttribute('data-rv-thumb-label') || 'Media {n} of {total}').replace('{n}', String(k + 1)).replace('{total}', String(lbSet.length)));
-          const img = document.createElement('img'); img.src = x.thumb; img.alt = ''; img.loading = 'lazy'; img.decoding = 'async';
+          const img = document.createElement('img'); img.loading = 'lazy'; img.decoding = 'async'; img.alt = ''; img.src = x.thumb;
           b.appendChild(img); strip.appendChild(b);
         });
         strip.hidden = lbSet.length <= 1;
@@ -1708,6 +1708,384 @@
     });
     api.emit('gem:reviews:ready', { source: 'gem-runtime', count: boundReviews });
   });
+  registerPlugin('bundle', ({ api }) => {
+    let boundBundles = 0;
+    const BB_WORDS = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+    document.querySelectorAll('[data-bb-root]').forEach((root) => {
+      if (!mark(root, 'bundle')) return;
+      boundBundles += 1;
+      const on = (el, type, fn, opt) => { if (canListen(el)) el.addEventListener(type, fn, opt); };
+      const isEl = (t) => t instanceof window.Element;
+      const parse = (attr, fallback) => { try { const v = JSON.parse(root.getAttribute(attr) || 'null'); return v == null ? fallback : v; } catch (e) { return fallback; } };
+      let rules = parse('data-bb-rules', {});
+      const text = root.hasAttribute('data-bb-messages') ? parse('data-bb-messages', {}) : parse('data-bb-labels', {});
+      const viMoney = root.getAttribute('data-bb-money') === 'vi';
+      const currency = root.getAttribute('data-bb-currency') || (viMoney ? 'VND' : 'USD');
+      let nf = null;
+      if (!viMoney) { try { nf = new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: currency === 'VND' ? 0 : 2 }); } catch (e) { nf = null; } }
+      const money = (n) => (viMoney ? String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, '.') + 'đ' : nf ? nf.format(Math.round(n * 100) / 100) : (Math.round(n * 100) / 100).toFixed(2));
+      // A strike price as stores show it: a whole number drops its cents ("$42", not "$42.00").
+      const moneyShort = (n) => { const s = money(n); return Math.abs(n - Math.round(n)) < 0.005 ? s.replace(/[.,]00(?=\D*$)/, '') : s; };
+      const fill = (tpl, vars) => String(tpl || '').replace(/\{(\w+)\}/g, (m, k) => (Object.hasOwn(vars, k) ? String(vars[k]) : m));
+      // A sentence with {reward}: the reward is a <strong>, the rest plain text. Never innerHTML.
+      const say = (el, tpl, vars) => {
+        if (!el) return;
+        const parts = String(tpl || '').split('{reward}');
+        el.replaceChildren();
+        parts.forEach((part, i) => {
+          if (part) el.append(document.createTextNode(fill(part, vars)));
+          if (i < parts.length - 1 && vars.reward) { const s = document.createElement('strong'); s.textContent = vars.reward; el.append(s); }
+        });
+      };
+      let min = Math.max(1, Number(rules.min) || 1);
+      let cap = Number(rules.max) > 0 ? Number(rules.max) : Infinity;
+      const per = Number(rules.per) > 0 ? Number(rules.per) : Infinity;
+      let tiers = Array.isArray(rules.tiers) ? rules.tiers : [];
+      let goal = tiers.length ? tiers[tiers.length - 1] : null;
+      // The catalog: one entry per item, plus one per extra variant of a card (<key>~<index>).
+      const catalog = new Map();
+      const cards = new Map();
+      root.querySelectorAll('[data-bb-item]').forEach((el) => {
+        const key = el.getAttribute('data-bb-item');
+        const base = {
+          el,
+          variantId: el.getAttribute('data-bb-variant') || '',
+          price: Number(el.getAttribute('data-bb-price')) || 0,
+          compare: Number(el.getAttribute('data-bb-compare')) || 0,
+          title: el.getAttribute('data-bb-title') || '',
+          subtitle: el.getAttribute('data-bb-subtitle') || '',
+          image: el.getAttribute('data-bb-image') || '',
+          group: el.getAttribute('data-bb-group') || '',
+          step: el.getAttribute('data-bb-step') || '',
+          short: el.getAttribute('data-bb-short') || '',
+          available: el.getAttribute('data-available') !== 'false',
+        };
+        catalog.set(key, base);
+        let vs = [];
+        try { vs = JSON.parse(el.getAttribute('data-bb-variants') || '[]'); } catch (e) { vs = []; }
+        if (!Array.isArray(vs)) vs = [];
+        vs.forEach((v, i) => {
+          if (!i) return;
+          catalog.set(key + '~' + i, { ...base, variantId: String(v.id || ''), price: Number(v.price) || 0, compare: Number(v.compare) || 0, image: v.image || base.image, variantTitle: v.title || '' });
+        });
+        if (vs[0]) base.variantTitle = vs[0].title || '';
+        cards.set(key, { el, variants: vs, gift: el.hasAttribute('data-bb-gift') });
+      });
+      const gifts = Array.from(cards.entries()).filter(([, c]) => c.gift).map(([k]) => k);
+      // The variant a card shows now (data-bb-current), as the key an action picks.
+      const currentKey = (key) => { const c = cards.get(key); const i = c ? Number(c.el.getAttribute('data-bb-current')) || 0 : 0; return i ? key + '~' + i : key; };
+      let picks = [];
+      let plan = 'one_time';
+      const planOf = (el) => (el.type === 'checkbox' ? (el.checked ? 'subscribe' : 'one_time') : el.getAttribute('data-bb-plan') || 'one_time');
+      const planInputs = Array.from(root.querySelectorAll('input[data-bb-plan]'));
+      const checkedPlan = planInputs.find((el) => el.checked);
+      if (checkedPlan) plan = planOf(checkedPlan);
+      const tierFor = (n) => tiers.filter((t) => n >= t.min).pop() || null;
+      const pctOf = (t, p) => (!t ? 0 : p === 'subscribe' ? Number(t.sub) || Number(t.pct) || 0 : Number(t.pct) || 0);
+      // The reward in a progress sentence is always "N% off" for the plan in force; a tier's label is the text on its milestone.
+      const rewardOf = (t, p) => (!t ? '' : pctOf(t, p) + '% off');
+      const qtyOf = (key) => picks.filter((p) => p === key).length;
+      const canAdd = (key) => picks.length < cap && (rules.repeat !== false || !picks.includes(key)) && qtyOf(key) < per;
+
+      // Box sizes, when the root declares them (data-bb-sizes): choosing a size sets floor = ceiling = its item count. "trim":
+      // a smaller box drops the LAST picks; "queue": they wait, in order, and come back when there is room again.
+      const sizeMode = root.getAttribute('data-bb-sizes');
+      const sizes = Array.isArray(rules.sizes) ? rules.sizes : [];
+      let size = null;
+      const waiting = [];
+      const refill = () => { while (sizeMode === 'queue' && picks.length < cap && waiting.length) picks.push(waiting.shift()); };
+      const applySize = (n) => {
+        const s = sizes.find((x) => Number(x.items) === n);
+        if (!s) return false;
+        size = s; min = Number(s.items); cap = Number(s.items);
+        goal = tierFor(min) || (tiers.length ? tiers[tiers.length - 1] : null);
+        if (picks.length > cap) { const out = picks.splice(cap); if (sizeMode === 'queue') waiting.unshift(...out); }
+        refill();
+        return true;
+      };
+      if (sizeMode) { const s0 = sizes.find((s) => Number(s.items) === Number(rules.size)) || sizes[0] || null; if (s0) applySize(Number(s0.items)); }
+
+      // Kits (rules.kits): each keeps its own picks and steps; a kit's own rules replace the bundle's while it is chosen.
+      // A kit with steps fills each step's slots in order and moves on by itself; optional steps open after the required ones.
+      const kits = Array.isArray(rules.kits) && rules.kits.length ? rules.kits : null;
+      const stateOf = new Map();
+      (kits || []).forEach((k) => {
+        const steps = Array.isArray(k.steps) ? k.steps : [];
+        const slots = {};
+        steps.forEach((s) => { slots[s.id] = Array.from({ length: Math.max(1, Number(s.pick) || 1) }, () => null); });
+        stateOf.set(k.id, { kit: k, steps, fill: slots, picks: [], current: steps.length ? steps[0].id : null });
+      });
+      let st = kits ? stateOf.get(kits[0].id) : { kit: null, steps: [], fill: {}, picks, current: null };
+      const useKit = (id) => {
+        if (!kits) return;
+        st = stateOf.get(id) || stateOf.get(kits[0].id);
+        const k = st.kit;
+        rules = { ...rules, min: k.min, max: k.max, tiers: k.tiers, repeat: k.repeat, price_mode: k.price_mode, fixed_price: k.fixed_price };
+        min = Math.max(1, Number(k.min) || 1);
+        cap = Number(k.max) > 0 ? Number(k.max) : Infinity;
+        tiers = Array.isArray(k.tiers) ? k.tiers : [];
+        goal = tiers.length ? tiers[tiers.length - 1] : null;
+        picks = st.picks;
+      };
+      if (kits) useKit(kits[0].id);
+      const stepsMode = () => st.steps.length > 0;
+      const required = () => st.steps.filter((s) => !s.optional);
+      const isFull = (s) => st.fill[s.id].every(Boolean);
+      // picks (in step order) are rebuilt from the slots after every change: price and cart read picks.
+      const syncPicks = () => { picks.length = 0; st.steps.forEach((s) => st.fill[s.id].forEach((k) => { if (k) picks.push(k); })); };
+      const openRequired = () => required().find((s) => !isFull(s)) || null;
+      const nextOpen = () => openRequired() || st.steps.find((s) => s.optional && !isFull(s)) || null;
+      const doneCount = () => required().filter(isFull).length;
+      const isComplete = () => (stepsMode() ? doneCount() === required().length : picks.length >= min);
+      const reachable = (s) => { const open = openRequired(); return !open || st.steps.indexOf(s) <= st.steps.indexOf(open); };
+      const slotRef = (idx) => {
+        let n = 0;
+        for (const s of st.steps) for (let j = 0; j < st.fill[s.id].length; j++) { if (n === idx) return [s, j]; n++; }
+        return null;
+      };
+      // Into the card's step: its first empty slot; a full step swaps its last pick (a full optional step refuses).
+      const addToStep = (key) => {
+        const it = catalog.get(key);
+        const step = (it && st.steps.find((s) => s.id === it.step)) || st.steps.find((s) => s.id === st.current);
+        if (!step || (rules.repeat === false && picks.includes(key))) return false;
+        const row = st.fill[step.id];
+        let i = row.indexOf(null);
+        if (i < 0) { if (step.optional) return false; i = row.length - 1; }
+        row[i] = key;
+        syncPicks();
+        if (isFull(step)) { const n = nextOpen(); if (n) st.current = n.id; }
+        return true;
+      };
+      // "Edit" on a required step empties the slot, closes the gap and goes back to that step; on an optional step it only removes.
+      const editSlot = (idx) => {
+        const ref = slotRef(idx);
+        if (!ref) return;
+        const [s, j] = ref;
+        const row = st.fill[s.id];
+        row.splice(j, 1); row.push(null);
+        syncPicks();
+        if (!s.optional) st.current = s.id;
+      };
+      const clearAll = () => {
+        st.steps.forEach((s) => { st.fill[s.id] = st.fill[s.id].map(() => null); });
+        picks.length = 0; waiting.length = 0;
+        st.current = st.steps.length ? st.steps[0].id : null;
+      };
+
+      // Prices. totals(): the bundle price at the tier the bundle WILL reach once it has its minimum (stores show the bundle
+      // price from the first pick), plus a container's base price. totalsNow(): at the tier reached now, rounded to the cent
+      // first so total + saved add up.
+      let basePrice = 0;
+      let cartHead = null;
+      const sumOf = () => {
+        let sum = 0; let compare = 0;
+        picks.forEach((k) => { const it = catalog.get(k); if (!it) return; sum += it.price; compare += Math.max(it.compare, it.price); });
+        return { sum, compare };
+      };
+      const totals = (p) => {
+        const { sum, compare } = sumOf();
+        if (rules.price_mode === 'fixed' && !basePrice) {
+          // A box size with a fixed one-time price; or a kit with one price whatever is picked (no strike price then).
+          if (size && Number(size.fixed) > 0) { if (p !== 'subscribe') return { sum, compare, total: Number(size.fixed) }; }
+          else if (Number(rules.fixed_price) > 0) return { sum, compare: 0, total: Number(rules.fixed_price) };
+        }
+        const t = tierFor(Math.max(picks.length, min)) || goal;
+        return { sum, compare, total: basePrice + sum * (1 - pctOf(t, p) / 100) };
+      };
+      const totalsNow = (p) => {
+        const { sum, compare } = sumOf();
+        return { sum, compare, total: Math.round(sum * (1 - pctOf(tierFor(picks.length), p) / 100) * 100 + 1e-6) / 100 };
+      };
+      // One item's price on its card at the bundle's current tier, counting at least one item.
+      const unitNow = (it, p) => it.price * (1 - pctOf(tierFor(Math.max(picks.length, 1)), p) / 100);
+
+      const frequency = () => root.querySelector('[data-bb-frequency]');
+      const planId = () => {
+        if (plan !== 'subscribe') return '';
+        const f = frequency();
+        if (!f) return '';
+        if (f.matches('select')) return f.value;
+        const c = f.querySelector('input:checked');
+        return c ? c.value : '';
+      };
+      const bundleName = () => {
+        const n = (st.kit && st.kit.label) || (root.querySelector('[data-bb-name]') || {}).textContent || 'Bundle';
+        return String(n).trim();
+      };
+      const toCart = () => {
+        const counts = new Map();
+        picks.concat(gifts).forEach((k) => { const it = catalog.get(k); if (it && it.variantId) counts.set(it.variantId, (counts.get(it.variantId) || 0) + 1); });
+        const ruleKey = root.getAttribute('data-bb-discount-key') || '';
+        const id = (root.getAttribute('data-gem-section-id') || 'bundle') + '-' + Date.now().toString(36);
+        const props = [{ key: '_bundle_id', value: id }, { key: '_bundle', value: bundleName() }].concat(ruleKey ? [{ key: '_bundle_rule', value: ruleKey }] : []);
+        const pid = planId();
+        const lines = Array.from(counts.entries()).map(([variantId, quantity]) => ({ variantId, quantity, properties: props.slice(), ...(pid ? { sellingPlanId: pid } : {}) }));
+        // A container line (a gift box) goes first and carries the section's own properties (lid, gift message).
+        const head = cartHead ? cartHead() : null;
+        if (head) {
+          const hp = props.concat(Array.isArray(head.properties) ? head.properties : []);
+          if (head.variantId) lines.unshift({ variantId: head.variantId, quantity: 1, properties: hp, ...(pid ? { sellingPlanId: pid } : {}) });
+          else if (lines[0]) lines[0].properties = hp;
+        }
+        if (lines.length && typeof window.CustomEvent === 'function') window.dispatchEvent(new window.CustomEvent('gem:cart:add-many', { detail: { lines, after: 'drawer' } }));
+        return lines.length;
+      };
+
+      let busy = false;
+      let wasComplete = false;
+      const state = () => {
+        const n = picks.length;
+        const counts = {};
+        picks.forEach((k) => { counts[k] = (counts[k] || 0) + 1; });
+        return {
+          picks, count: n, counts, min, cap, max: cap === Infinity ? null : cap, per, rules, text, tiers, goal, plan, size, sizes, waiting,
+          catalog, cards, gifts, reached: tierFor(n), next: tiers.find((t) => n < t.min) || null, left: Math.max(0, min - n),
+          kit: st.kit, kits, steps: st.steps, fill: st.fill, current: st.current, stepsMode: stepsMode(), done: doneCount(),
+          required: required(), complete: isComplete(), busy, base: basePrice,
+        };
+      };
+      const outs = () => root.querySelectorAll('[data-bb-out]');
+      const emit = (action, extra) => {
+        const n = picks.length;
+        const complete = isComplete();
+        root.setAttribute('data-bb-count', String(n));
+        root.setAttribute('data-bb-state', n === 0 ? 'empty' : n >= cap ? 'full' : complete ? 'complete' : 'partial');
+        if (outs().length) {
+          const t = totals(plan); const reached = tierFor(n);
+          const v = { count: String(n), left: String(Math.max(0, min - n)), total: money(t.total), compare: money(t.compare), saved: money(Math.max(0, t.compare - t.total)), reward: reached ? rewardOf(reached, plan) : '' };
+          outs().forEach((el) => { const k = el.getAttribute('data-bb-out'); if (Object.hasOwn(v, k)) el.textContent = v[k]; });
+        }
+        const detail = { source: 'gem-runtime', action, ...(extra || {}), count: n, min, max: cap === Infinity ? null : cap, plan, size: size ? Number(size.items) : null, kit: st.kit ? st.kit.id : null, step: st.current, complete, reward: tierFor(n) ? rewardOf(tierFor(n), plan) : '', total: totals(plan).total };
+        if (typeof window.CustomEvent === 'function') {
+          root.dispatchEvent(new window.CustomEvent('gem:bundle:change', { bubbles: true, detail }));
+          if (complete && !wasComplete) root.dispatchEvent(new window.CustomEvent('gem:bundle:complete', { bubbles: true, detail }));
+        }
+        wasComplete = complete;
+      };
+
+      // Actions: the handlers below call these, and so may a section's own controls (root.gemBundle.add(key)…).
+      const add = (key) => {
+        const before = st.current;
+        if (root.hasAttribute('data-bb-add-toggle') && picks.includes(key)) { picks.splice(picks.indexOf(key), 1); emit('remove', { key }); return true; }
+        if (stepsMode()) { if (!addToStep(key)) return false; }
+        else { if (!canAdd(key)) return false; picks.push(key); }
+        emit('add', { key, from: before });
+        return true;
+      };
+      const removeAt = (idx) => { if (stepsMode()) editSlot(idx); else { picks.splice(idx, 1); refill(); } emit('remove', { index: idx }); };
+      const dec = (key) => { const at = picks.lastIndexOf(key); if (at < 0) return false; picks.splice(at, 1); refill(); emit('dec', { key }); return true; };
+      const uncheck = (key) => { for (let i = picks.length - 1; i >= 0; i -= 1) if (picks[i] === key) picks.splice(i, 1); refill(); emit('uncheck', { key }); };
+      const clear = () => { clearAll(); emit('clear'); };
+      // A typed quantity: exactly k picks of that item, within the bundle's ceiling, the item's own and no-repeat.
+      const setQty = (key, want) => {
+        if (!catalog.has(key)) return;
+        const has = qtyOf(key);
+        const room = cap === Infinity ? Infinity : cap - (picks.length - has);
+        const k = Math.max(0, Math.min(Math.floor(Number(want)) || 0, room, per, rules.repeat === false ? 1 : Infinity));
+        for (let i = picks.length - 1; i >= 0; i--) if (picks[i] === key) picks.splice(i, 1);
+        for (let i = 0; i < k; i++) picks.push(key);
+        emit('qty', { key });
+      };
+      const setPlan = (p) => { plan = p === 'subscribe' ? 'subscribe' : 'one_time'; emit('plan'); };
+      const setSize = (n) => {
+        if (!sizeMode || !applySize(Number(n))) return false;
+        // A box size may name its default selling plan.
+        const f = frequency();
+        if (f && f.matches('select') && size && size.plan && Array.from(f.options).some((o) => o.value === size.plan)) f.value = size.plan;
+        emit('size');
+        return true;
+      };
+      // An item's variant radio (a pack size): the whole row changes variant and price, its count stays.
+      const applyVariant = (radio) => {
+        const it = catalog.get(radio.getAttribute('data-bb-size'));
+        if (!it) return false;
+        it.variantId = radio.getAttribute('data-bb-variant') || '';
+        it.price = Number(radio.getAttribute('data-bb-price')) || 0;
+        it.compare = Number(radio.getAttribute('data-bb-compare')) || 0;
+        it.el.setAttribute('data-bb-variant', it.variantId);
+        it.el.setAttribute('data-bb-price', String(it.price));
+        it.el.setAttribute('data-bb-compare', it.compare ? String(it.compare) : '');
+        return true;
+      };
+      const selectKit = (id) => { if (!kits) return; useKit(id); emit('kit'); };
+      const goStep = (id) => { const s = st.steps.find((x) => x.id === id); if (!s || !reachable(s)) return false; st.current = id; emit('step'); return true; };
+      const finish = (ok) => {
+        busy = false;
+        root.querySelectorAll('[data-bb-cta]').forEach((c) => { c.removeAttribute('data-state'); c.removeAttribute('aria-busy'); });
+        if (ok) clearAll();
+        emit(ok ? 'added' : 'add-failed');
+      };
+      const checkout = () => {
+        if (!isComplete() || busy || !picks.length) return false;
+        if (!toCart()) return false;
+        // With gemsite's cart bridge: wait for its answer before clearing (a failure keeps the bundle to try again).
+        if (window.__gemCartAddBridge) {
+          busy = true;
+          const box = st.kit ? root.querySelector('[data-bb-kit-box="' + st.kit.id + '"]') : null;
+          (box || root).querySelectorAll('[data-bb-cta]').forEach((c) => { c.setAttribute('data-state', 'loading'); c.setAttribute('aria-busy', 'true'); });
+          emit('checkout');
+        } else finish(true);
+        return true;
+      };
+
+      on(root, 'click', (event) => {
+        const t = isEl(event.target) ? event.target : null;
+        if (!t) return;
+        const addEl = t.closest('[data-bb-add], [data-bb-inc]');
+        if (addEl) { add(currentKey(addEl.getAttribute('data-bb-add') || addEl.getAttribute('data-bb-inc'))); return; }
+        const decEl = t.closest('[data-bb-dec], [data-bb-minus]');
+        if (decEl) { dec(currentKey(decEl.getAttribute('data-bb-dec') || decEl.getAttribute('data-bb-minus'))); return; }
+        const un = t.closest('[data-bb-uncheck]');
+        if (un) { uncheck(currentKey(un.getAttribute('data-bb-uncheck'))); return; }
+        const rm = t.closest('[data-bb-remove]');
+        if (rm) { removeAt(Number(rm.getAttribute('data-bb-remove')) || 0); return; }
+        if (t.closest('[data-bb-clear]')) { clear(); return; }
+        const nav = t.closest('[data-bb-step-nav]');
+        if (nav) { if (!nav.disabled) goStep(nav.getAttribute('data-bb-step-nav')); return; }
+        const tab = t.closest('[data-bb-kit-tab]');
+        if (tab) { selectKit(tab.getAttribute('data-bb-kit-tab')); return; }
+        if (t.closest('[data-bb-skip]')) { checkout(); return; }
+        const cta = t.closest('[data-bb-cta]');
+        if (cta) { event.preventDefault(); if (cta.getAttribute('aria-disabled') !== 'true') checkout(); }
+      });
+      on(root, 'change', (event) => {
+        const t = isEl(event.target) ? event.target : null;
+        if (!t) return;
+        const p = t.closest('input[data-bb-plan]');
+        if (p) { if (p.type === 'checkbox' || p.checked) setPlan(planOf(p)); return; }
+        const s = t.closest('input[data-bb-size]');
+        if (s && s.checked) { if (s.hasAttribute('data-bb-variant')) { if (applyVariant(s)) emit('variant', { key: s.getAttribute('data-bb-size') }); } else setSize(Number(s.value)); return; }
+        const q = t.closest('input[data-bb-count]');
+        if (q) setQty(q.getAttribute('data-bb-count'), q.value);
+      });
+      // A typed quantity applies as soon as it is a number (an emptied box waits for "change" to go back to 0).
+      on(root, 'input', (event) => {
+        const q = isEl(event.target) ? event.target.closest('input[data-bb-count]') : null;
+        if (q && q.value !== '' && Number.isFinite(Number(q.value))) setQty(q.getAttribute('data-bb-count'), q.value);
+      });
+      on(window, 'gem:cart:added', () => { if (busy) finish(true); });
+      on(window, 'gem:cart:add-failed', () => { if (busy) finish(false); });
+
+      // A page brought back from history restores its form: read back the variant radios and typed quantities in view.
+      root.querySelectorAll('input[data-bb-size][data-bb-variant]').forEach((r) => { if (r.checked) applyVariant(r); });
+      root.querySelectorAll('input[data-bb-count]').forEach((inp) => {
+        const v = Math.floor(Number(inp.value)) || 0;
+        const key = inp.getAttribute('data-bb-count');
+        if (v > 0 && catalog.has(key)) { const k = Math.min(v, per, rules.repeat === false ? 1 : Infinity, cap === Infinity ? Infinity : cap - picks.length); for (let i = 0; i < k; i++) picks.push(key); }
+      });
+
+      root.gemBundle = {
+        state, money, moneyShort, fill, say, words: BB_WORDS, tierFor, pctOf, rewardOf, canAdd, qtyOf, currentKey, totals, totalsNow, unitNow,
+        reachable, isFull, slotRef, required, add, removeAt, dec, uncheck, clear, setQty, setPlan, setSize, selectKit, goStep, checkout,
+        setBase: (n) => { basePrice = Number(n) || 0; emit('base'); },
+        setCartHead: (fn) => { cartHead = typeof fn === 'function' ? fn : null; },
+        refresh: () => emit('refresh'),
+      };
+      root.setAttribute('data-bb-ready', '');
+      emit('init');
+    });
+    api.emit('gem:bundle:ready', { source: 'gem-runtime', count: boundBundles });
+  });
   registerNoopPlugin("seasonal-effects", "gem:seasonal:ready");
   registerNoopPlugin("context-adapter", "gem:context:ready");
   const mark = (element, key) => {