mk-sdk-git 0.1.0

package/src/platforms/index.js

@@ -0,0 +1,86 @@
+// platforms/index.js — registry de plataformas. CADA e-commerce num módulo
+// (detect + resolveSku + addToCart juntos). À prova de colapso:
+//   • nova PLATAFORMA  = 1 arquivo aqui + 1 linha no ADAPTERS
+//   • ajuste de 1 LOJA = receita/config server-driven, NUNCA código
+// O nº de arquivos cresce com plataformas (poucas), não com lojas (ilimitadas).
+
+import { getConfig, log } from '../core/config.js';
+import * as shopify from './shopify.js';
+import * as hybris from './hybris.js';
+import * as vtex from './vtex.js';
+import * as nuvemshop from './nuvemshop.js';
+import * as wake from './wake.js';
+import * as generic from './generic.js';
+
+// ordem importa: o primeiro detect() verdadeiro vence
+const ADAPTERS = [shopify, hybris, vtex, nuvemshop, wake];
+
+// plataformas que sabemos detectar mas ainda sem módulo dedicado (só rótulo p/ telemetria)
+const EXTRA_DETECT = [
+  ['woocommerce', () => !!(window.wc_add_to_cart_params || window.woocommerce_params)],
+  ['lojaintegrada', () => !!window.LojaIntegrada]
+];
+
+let _current;
+export function currentPlatform() {
+  if (_current) return _current;
+  _current = ADAPTERS.find((p) => { try { return p.detect(); } catch (_) { return false; } }) || generic;
+  return _current;
+}
+
+/** id da plataforma pra telemetria (null se desconhecida). */
+export function detectPlatformId() {
+  const a = ADAPTERS.find((p) => { try { return p.detect(); } catch (_) { return false; } });
+  if (a) return a.id;
+  for (const [pid, fn] of EXTRA_DETECT) { try { if (fn()) return pid; } catch (_) {} }
+  return null;
+}
+
+/** SKU: plataforma específica primeiro, genérico (JSON-LD/microdata) como fallback. */
+export function resolveSku() {
+  const plat = currentPlatform();
+  if (plat.id !== 'generic' && plat.resolveSku) {
+    try { const r = plat.resolveSku(); if (r) return r; } catch (_) {}
+  }
+  return generic.resolveSku();
+}
+
+/** add-to-cart pela plataforma ativa; fallback = clique nativo (generic). */
+export async function addToCart(payload) {
+  payload = payload || {};
+  const norm = {
+    size: payload.size || payload.selectedSize || null,
+    sku: payload.sku || payload.identifier || payload.selectedIdentifier || null,
+    quantity: payload.quantity || 1
+  };
+  const plat = currentPlatform();
+  try {
+    const result = plat.addToCart ? await plat.addToCart(norm) : await generic.addToCart(norm);
+    log('cart: adicionado', result);
+    notifyTheme();
+    maybeRedirect(plat);
+    return result;
+  } catch (e) {
+    log('cart: adapter "' + plat.id + '" falhou — fallback clique nativo', e && e.message);
+    const r = await generic.addToCart(norm);
+    notifyTheme();
+    maybeRedirect(plat);
+    return r;
+  }
+}
+
+function notifyTheme() {
+  ['cart:refresh', 'cart:updated', 'cart:build', 'ajaxProduct:added', 'product:added-to-cart'].forEach((n) => {
+    try { document.dispatchEvent(new CustomEvent(n)); } catch (_) {}
+  });
+}
+
+// leva o usuário ao carrinho após adicionar. Cada plataforma pode pular (skipRedirect,
+// quando o tema abre o mini-cart) ou ter sua rota própria (cartUrl).
+function maybeRedirect(plat) {
+  const cfg = getConfig();
+  if (!cfg.cartRedirect) return;
+  if (plat && plat.skipRedirect) return;
+  const url = (plat && plat.cartUrl) || '/cart';
+  setTimeout(() => { try { window.location.href = url; } catch (_) {} }, 250);
+}

package/src/platforms/nuvemshop.js

@@ -0,0 +1,48 @@
+// nuvemshop.js — Nuvemshop / Tiendanube: detecção, SKU e carrinho.
+// Carrinho: casa a variação no #product_form e dispara form.requestSubmit()
+// (o tema intercepta, adiciona via AJAX e abre o mini-cart). Validado ao vivo (eora).
+
+export const id = 'nuvemshop';
+export const skipRedirect = true;   // o tema abre o mini-cart sozinho após adicionar
+
+export function detect() { return !!(window.LS && (window.LS.cart || window.LS.addToCart)); }
+
+// O catálogo MK usa o SKU textual da VARIANTE (ex: LUADM), não o productId.
+// Ele vive em LS.variants[].sku — pegamos o da variante selecionada (variant_id do form).
+export function resolveSku() {
+  try {
+    const LS = window.LS;
+    const variants = (LS && LS.variants) || [];
+    const hidden = document.querySelector('[name="variant_id"]');
+    let variant = (hidden && hidden.value) ? variants.find((v) => String(v.id) === String(hidden.value)) : null;
+    if (!variant) variant = variants.find((v) => v.available !== false && v.sku) || variants.find((v) => v.sku) || variants[0];
+    if (variant && variant.sku) return { value: String(variant.sku), source: 'nuvemshop/variant' };
+    if (LS && LS.product && LS.product.sku) return { value: String(LS.product.sku), source: 'nuvemshop/product' };
+  } catch (_) {}
+  return null;   // cai no genérico (JSON-LD/microdata)
+}
+
+const norm = (s) => String(s == null ? '' : s).trim().toLowerCase();
+
+export async function addToCart({ size, quantity }) {
+  const form = document.getElementById('product_form') || document.querySelector('.js-product-form, form[action*="/comprar"]');
+  if (!form) throw new Error('nuvemshop: #product_form não encontrado');
+
+  // casa a variação escolhida no provador (cor/tamanho) com o(s) select(s)
+  if (size) {
+    form.querySelectorAll('select[name^="variation"]').forEach((sel) => {
+      const opt = [...sel.options].find((o) => norm(o.textContent).includes(norm(size)) || norm(o.value) === norm(size));
+      if (opt) { sel.value = opt.value; sel.dispatchEvent(new Event('change', { bubbles: true })); }
+    });
+  }
+  const qtyEl = form.querySelector('[name="quantity"]');
+  if (qtyEl && quantity) qtyEl.value = String(quantity);
+
+  await new Promise((r) => setTimeout(r, 400));   // deixa o tema recalcular o variant_id
+
+  if (typeof form.requestSubmit === 'function') form.requestSubmit();
+  else form.submit();
+
+  const vId = (form.querySelector('[name="variant_id"]') || {}).value || null;
+  return { platform: 'nuvemshop', variantId: vId };
+}

package/src/platforms/shopify.js

@@ -0,0 +1,35 @@
+// shopify.js — TUDO da plataforma Shopify: detecção, SKU e carrinho.
+// Carrinho validado ao vivo (lksneakers): /cart/add.js por variantId achado por tamanho.
+
+export const id = 'shopify';
+export function detect() { return !!(window.Shopify || window.ShopifyAnalytics); }
+
+export function resolveSku() {
+  const w = window;
+  if (w.ShopifyAnalytics && w.ShopifyAnalytics.meta && w.ShopifyAnalytics.meta.product)
+    return { value: String(w.ShopifyAnalytics.meta.product.id), source: 'shopify' };
+  return null;
+}
+
+const norm = (s) => String(s == null ? '' : s).trim().toLowerCase();
+
+export async function addToCart({ size, sku, quantity }) {
+  const handle = (location.pathname.split('/products/')[1] || '').split(/[?#]/)[0];
+  if (!handle) throw new Error('shopify: sem handle de produto na URL (não é PDP?)');
+  const prod = await fetch('/products/' + handle + '.js').then((r) => r.json());
+  const vars = prod.variants || [];
+  const matchesSize = (x) => [x.option1, x.option2, x.option3, x.title].some((o) => norm(o) === norm(size));
+
+  let v = null;
+  if (size) v = vars.find((x) => matchesSize(x) && x.available) || vars.find(matchesSize);
+  if (!v && sku) v = vars.find((x) => norm(x.sku) === norm(sku));
+  if (!v) v = vars.find((x) => x.available) || vars[0];
+  if (!v) throw new Error('shopify: variante não encontrada');
+
+  const resp = await fetch('/cart/add.js', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ items: [{ id: v.id, quantity: quantity || 1 }] })
+  });
+  if (!resp.ok) throw new Error('shopify: /cart/add.js HTTP ' + resp.status);
+  return { platform: 'shopify', variantId: v.id, size: v.title, sku: v.sku || null };
+}

package/src/platforms/vtex.js

@@ -0,0 +1,34 @@
+// vtex.js — plataforma VTEX: detecção, SKU e carrinho.
+// Carrinho via window.vtexjs.checkout.addToCart (mapeia o tamanho → skuId em
+// window.skuJson_0). ⚠️ NÃO validado ao vivo ainda — se vtexjs faltar ou falhar,
+// o registry cai no fallback de clique nativo.
+
+export const id = 'vtex';
+export function detect() { return !!(window.vtex || window.vtexjs || window.vtxctx || window.skuJson_0); }
+
+export function resolveSku() {
+  const w = window;
+  if (w.vtxctx && w.vtxctx.skus && w.vtxctx.skus[0]) return { value: String(w.vtxctx.skus[0]), source: 'vtex/vtxctx' };
+  if (w.skuJson_0 && w.skuJson_0.skus && w.skuJson_0.skus[0]) return { value: String(w.skuJson_0.skus[0].sku), source: 'vtex/skuJson' };
+  return null;
+}
+
+const norm = (s) => String(s == null ? '' : s).trim().toLowerCase();
+
+export async function addToCart({ size, quantity }) {
+  const skus = (window.skuJson_0 && window.skuJson_0.skus) || [];
+  if (!skus.length) throw new Error('vtex: skuJson_0 indisponível');
+
+  const matchSize = (s) => norm(s.skuname) === norm(size)
+    || (s.dimensions && Object.values(s.dimensions).some((d) => norm(d) === norm(size)));
+
+  let sku = size ? (skus.find((s) => matchSize(s) && s.available) || skus.find(matchSize)) : null;
+  if (!sku) sku = skus.find((s) => s.available) || skus[0];
+  if (!sku) throw new Error('vtex: variante não encontrada');
+
+  if (window.vtexjs && window.vtexjs.checkout && window.vtexjs.checkout.addToCart) {
+    await window.vtexjs.checkout.addToCart([{ id: parseInt(sku.sku, 10), quantity: quantity || 1, seller: '1' }]);
+    return { platform: 'vtex', skuId: sku.sku, size: sku.skuname || size };
+  }
+  throw new Error('vtex: vtexjs.checkout indisponível'); // → fallback clique nativo
+}

package/src/platforms/wake.js

@@ -0,0 +1,52 @@
+// wake.js — Wake Commerce (ex-Fbits; ex: Gregory): detecção, SKU e carrinho.
+// Carrinho via window.addOrCreateCheckout([{productVariantId,quantity,customization}])
+// (API do StorefrontClient). Validado ao vivo (Gregory): adiciona + dispara
+// o evento productAddedToCart.
+//
+// Nota: produtos-matriz (cor×tamanho) resolvem o variantId pela seleção na PDP
+// (input[name="product-variant-id"]). Tentamos aplicar o tamanho via selectAttribute,
+// mas se não propagar, usa-se a variante atual da PDP.
+
+export const id = 'wake';
+export const skipRedirect = true;   // o tema mostra overlay/mini-cart após adicionar
+
+export function detect() {
+  return !!(window.StorefrontClient || typeof window.addOrCreateCheckout === 'function' || typeof window.addToCartClick === 'function');
+}
+
+// O catálogo MK (Gregory) usa o productId da loja (ex: 164968), NÃO o sku do
+// JSON-LD (308573). Está no input[name="product-id"] e no fim da URL /produto/…-{id}.
+export function resolveSku() {
+  try {
+    const el = document.querySelector('input[name="product-id"], [data-product-id]');
+    const pid = el ? (el.value || el.getAttribute('data-product-id')) : null;
+    if (pid) return { value: String(pid).trim(), source: 'wake/product-id' };
+    const m = (location.pathname || '').match(/-(\d+)\/?(?:[?#]|$)/);
+    if (m) return { value: m[1], source: 'wake/url' };
+  } catch (_) {}
+  return null;
+}
+
+const norm = (s) => String(s == null ? '' : s).trim().toLowerCase();
+
+export async function addToCart({ size, quantity }) {
+  // tenta aplicar o tamanho escolhido no provador (radio attribute-value == size)
+  if (size) {
+    const radio = [...document.querySelectorAll('input[attribute-value]')]
+      .find((r) => norm(r.getAttribute('attribute-value')) === norm(size));
+    if (radio) {
+      try { radio.checked = true; } catch (_) {}
+      try { if (typeof window.selectAttribute === 'function') window.selectAttribute(radio); else radio.click(); } catch (_) {}
+      await new Promise((r) => setTimeout(r, 600));
+    }
+  }
+
+  const vEl = document.querySelector('[name="product-variant-id"]');
+  const variantId = vEl && vEl.value;
+  if (!variantId) throw new Error('wake: product-variant-id não encontrado');
+  if (typeof window.addOrCreateCheckout !== 'function') throw new Error('wake: addOrCreateCheckout indisponível');
+
+  const ok = await window.addOrCreateCheckout([{ productVariantId: Number(variantId), quantity: quantity || 1, customization: [] }]);
+  if (!ok) throw new Error('wake: addOrCreateCheckout retornou false');
+  return { platform: 'wake', productVariantId: variantId, size: size || null };
+}

package/src/tryon/anchor.js

@@ -0,0 +1,122 @@
+// anchor.js — decide ONDE injetar o botão de try-on na PDP.
+// Ordem: override (receita/picker) > heurística (add-to-cart nativo).
+//
+// Escolha de variante (desktop/mobile) é VISIBILIDADE-PRIMEIRO: usa a variante
+// cujo elemento-âncora está realmente visível agora (segue o layout responsivo
+// da loja, independe do breakpoint dela). Largura (breakpoint configurável) só
+// desempata quando ambas estão visíveis ou nenhuma.
+//
+// Retorna { el, position, mode, style } | null.
+
+import { getConfig } from '../core/config.js';
+
+const DEFAULT_BP_MOBILE = 767;   // <= mobile
+const DEFAULT_BP_TABLET = 1024;  // <= tablet; acima = desktop
+const ANCHOR_PATTERNS = /(adicionar\s*(à|a|ao)?\s*(sacola|carrinho|cesta|bolsa))|adicionar ao carrinho|add to (cart|bag)|comprar agora|^comprar$|finalizar compra|eu quero/i;
+const ANCHOR_NEGATIVE = /continuar|como comprar|lista|desejos|favorito|looks|cupom/i;
+
+function isVisible(el) {
+  try {
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) return false;
+    const s = getComputedStyle(el);
+    return s.display !== 'none' && s.visibility !== 'hidden' && s.opacity !== '0';
+  } catch (_) { return false; }
+}
+
+function selectorVisible(sel) {
+  if (!sel) return false;
+  try { const el = document.querySelector(sel); return !!el && isVisible(el); } catch (_) { return false; }
+}
+
+function textOf(el) {
+  const t = el.tagName === 'INPUT' ? (el.value || '') : (el.textContent || '');
+  return t.replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * Tolerância defensiva: se o CMS gravou o ENVELOPE inteiro `{mkAnchor:1, host,
+ * capturedAt, anchor:{...}}` como valor de um slot (em vez de extrair `anchor`
+ * antes do merge), desempacota automaticamente. O fix CERTO é no CMS — esta
+ * função evita que receitas bem capturadas mas mal-salvas fiquem inutilizáveis.
+ */
+function unwrapEnvelopeSlots(anchor) {
+  if (!anchor || typeof anchor !== 'object' || anchor.selector) return anchor;
+  let needsUnwrap = false;
+  ['mobile', 'tablet', 'desktop'].forEach((s) => {
+    const v = anchor[s];
+    if (v && v.mkAnchor === 1 && v.anchor && typeof v.anchor === 'object') needsUnwrap = true;
+  });
+  if (!needsUnwrap) return anchor;
+  const out = {};
+  ['mobile', 'tablet', 'desktop'].forEach((s) => {
+    const v = anchor[s];
+    if (!v) return;
+    if (v.selector) { out[s] = v; return; }
+    if (v.mkAnchor === 1 && v.anchor && typeof v.anchor === 'object') {
+      const inner = v.anchor[s] || v.anchor.desktop || v.anchor.mobile || v.anchor.tablet;
+      if (inner && inner.selector) out[s] = inner;
+    }
+  });
+  ['bpMobile', 'bpTablet', 'breakpoint'].forEach((k) => { if (anchor[k] != null) out[k] = anchor[k]; });
+  return out;
+}
+
+/**
+ * Escolhe a variante de âncora pro layout atual entre mobile/tablet/desktop.
+ * Aceita formato plano (compat: {selector,...}) ou { mobile, tablet, desktop, bpMobile?, bpTablet? }.
+ * Visibilidade-primeiro: usa a variante cujo seletor está visível; largura desempata.
+ */
+export function pickAnchorVariant(anchor) {
+  if (!anchor || typeof anchor !== 'object') return null;
+  anchor = unwrapEnvelopeSlots(anchor);          // tolera envelope mal-mergeado pelo CMS
+  if (anchor.selector) return anchor;            // formato plano (retrocompat)
+
+  const slots = [
+    ['mobile', anchor.mobile],
+    ['tablet', anchor.tablet],
+    ['desktop', anchor.desktop]
+  ].filter((s) => s[1] && s[1].selector);
+  if (slots.length === 0) return null;
+  if (slots.length === 1) return slots[0][1];
+
+  // 1. visibilidade-primeiro (independe do breakpoint da loja)
+  const visible = slots.filter(([, v]) => selectorVisible(v.selector));
+  if (visible.length === 1) return visible[0][1];
+
+  // 2. desempate por largura (breakpoints configuráveis; defaults 767 / 1024)
+  const w = window.innerWidth || 1024;
+  const bpM = Number(anchor.bpMobile) || Number(anchor.breakpoint) || DEFAULT_BP_MOBILE;
+  const bpT = Number(anchor.bpTablet) || DEFAULT_BP_TABLET;
+  const byId = (id) => (slots.find((s) => s[0] === id) || [])[1];
+  const pref = (w <= bpM) ? ['mobile', 'tablet', 'desktop']
+    : (w <= bpT) ? ['tablet', 'desktop', 'mobile']
+      : ['desktop', 'tablet', 'mobile'];
+  for (const id of pref) { const v = byId(id); if (v) return v; }
+  return slots[0][1];
+}
+
+export function resolveAnchor() {
+  const cfg = getConfig();
+
+  // 1. Override (receita / picker) — variante escolhida por visibilidade/breakpoint
+  const variant = pickAnchorVariant(cfg && cfg.anchor);
+  if (variant && variant.selector) {
+    try {
+      const o = document.querySelector(variant.selector);
+      if (o) return { el: o, position: variant.position || 'afterend', mode: variant.mode || 'flow', style: variant.style || '', align: variant.align || 'top-left', selector: variant.selector };
+    } catch (_) {}
+  }
+
+  // 2. Heurística: o botão de carrinho nativo visível é a âncora natural
+  const candidates = document.querySelectorAll(
+    'button, [role="button"], a.btn, a.button, input[type="submit"], input[type="button"]'
+  );
+  for (const el of candidates) {
+    const t = textOf(el);
+    if (!t || t.length > 40) continue;
+    if (ANCHOR_NEGATIVE.test(t)) continue;
+    if (ANCHOR_PATTERNS.test(t) && isVisible(el)) return { el, position: 'afterend', mode: 'flow', style: '', selector: null };
+  }
+  return null;
+}

package/src/tryon/automount.js

@@ -0,0 +1,255 @@
+// automount.js — gatilho zero-touch do botão de try-on.
+// Ao detectar PDP: resolve o SKU → checa disponibilidade → busca o template
+// do projeto → injeta o botão (Shadow DOM) na âncora resolvida.
+// Também expõe um canal de preview pro picker de posição do addon.
+
+import { getConfig, log } from '../core/config.js';
+import { track } from '../core/transport.js';
+import { resolveSku } from '../ecommerce/extractors.js';
+import { getAvailability, open } from './bridge.js';
+import { resolveAnchor, pickAnchorVariant } from './anchor.js';
+import { renderButton, fetchButtonTemplate, normalizeButtonConfig } from './buttons/registry.js';
+
+const HOST_ID = 'mk-tryon-button-host';
+let mountedKey = null;   // identifica o estado montado (sku + anchor) — pra SPA/preview
+let mounting = false;
+const availCache = {};   // sku -> Promise<bool> (dedupe a checagem a cada pageview SPA)
+let resizeWatchSet = false;
+
+// Template do projeto cacheado (1 fetch por sessão). A mesma Promise é compartilhada
+// entre as chamadas concorrentes de maybeMountButton — pra autoaplicar o ANCHOR
+// (template.tryOnButton.anchor) antes do 1º mount, sem flicker e sem 2 fetches.
+let _tplPromise = null;
+function getTemplateCached(apiUrl, projectId) {
+  if (!_tplPromise) _tplPromise = fetchButtonTemplate(apiUrl, projectId).catch(() => null);
+  return _tplPromise;
+}
+
+// re-avalia a variante visível quando o layout muda (resize, debounced).
+// maybeMountButton re-monta só se a variante escolhida (o key) realmente mudou.
+function ensureResizeWatch() {
+  if (resizeWatchSet) return;
+  resizeWatchSet = true;
+  let t = null;
+  try {
+    window.addEventListener('resize', () => {
+      clearTimeout(t);
+      t = setTimeout(() => { if (mountedKey) maybeMountButton('pdp'); }, 200);
+    });
+  } catch (_) {}
+}
+
+function removeButton() {
+  const h = document.getElementById(HOST_ID);
+  if (h) {
+    if (typeof h.__mkCleanup === 'function') { try { h.__mkCleanup(); } catch (_) {} }
+    if (h.parentNode) h.parentNode.removeChild(h);
+  }
+  mountedKey = null;
+}
+
+const REPLACED = { IMG: 1, INPUT: 1, VIDEO: 1, CANVAS: 1, EMBED: 1, OBJECT: 1, IFRAME: 1, BR: 1, HR: 1, SELECT: 1, TEXTAREA: 1, SVG: 1 };
+
+// ponto de ancoragem dentro do elemento (modo sobrepor) — grade 3x3.
+// A centralização (meios/centro) usa transform no HOST; o offset/escala do picker
+// vai no botão, então não há conflito de transform.
+function alignStyle(align) {
+  switch (align) {
+    case 'top-center':    return 'top:0;left:50%;transform:translateX(-50%);';
+    case 'top-right':     return 'top:0;right:0;';
+    case 'middle-left':   return 'top:50%;left:0;transform:translateY(-50%);';
+    case 'center':        return 'top:50%;left:50%;transform:translate(-50%,-50%);';
+    case 'middle-right':  return 'top:50%;right:0;transform:translateY(-50%);';
+    case 'bottom-left':   return 'bottom:0;left:0;';
+    case 'bottom-center': return 'bottom:0;left:50%;transform:translateX(-50%);';
+    case 'bottom-right':  return 'bottom:0;right:0;';
+    case 'top-left':
+    default:              return 'top:0;left:0;';
+  }
+}
+
+// Modo "sobrepor": posiciona o host por cima do ref SEM sair do container.
+// Vira filho do ref (que passa a ser o containing block via position:relative —
+// inócuo, não move o ref), no canto escolhido, e acompanha ele sem listeners.
+// Se o ref não aceita filhos (img etc), usa o container pai e reposiciona sobre o ref.
+function placeOverlay(ref, host, align) {
+  const acceptsChildren = !REPLACED[ref.tagName];
+  const container = acceptsChildren ? ref : (ref.parentElement || document.body);
+  try { if (getComputedStyle(container).position === 'static') container.style.position = 'relative'; } catch (_) {}
+
+  if (container === ref) {
+    host.style.cssText = 'position:absolute;z-index:2147483000;' + alignStyle(align);
+    ref.appendChild(host);   // sobrepõe no canto escolhido, dentro do ref; acompanha sem reposicionar
+    return;
+  }
+  // ref é replaced (img/input...): host no container pai, posicionado sobre o ref no ponto do align
+  host.style.cssText = 'position:absolute;z-index:2147483000;';
+  container.appendChild(host);
+  const reposition = () => {
+    try {
+      const rr = ref.getBoundingClientRect();
+      const cr = container.getBoundingClientRect();
+      const hw = host.offsetWidth, hh = host.offsetHeight;
+      const baseTop = rr.top - cr.top + container.scrollTop;
+      const baseLeft = rr.left - cr.left + container.scrollLeft;
+      const a = align || 'top-left';
+      let top = baseTop, left = baseLeft;
+      if (a.indexOf('bottom') === 0) top = baseTop + rr.height - hh;
+      else if (a.indexOf('middle') === 0 || a === 'center') top = baseTop + (rr.height - hh) / 2;
+      if (a.indexOf('right') >= 0) left = baseLeft + rr.width - hw;
+      else if (a.indexOf('center') >= 0) left = baseLeft + (rr.width - hw) / 2;
+      host.style.top = top + 'px';
+      host.style.left = left + 'px';
+    } catch (_) {}
+  };
+  reposition();
+  const onWin = () => reposition();
+  window.addEventListener('resize', onWin);
+  const t1 = setTimeout(reposition, 600);
+  const t2 = setTimeout(reposition, 1500);
+  host.__mkCleanup = () => { window.removeEventListener('resize', onWin); clearTimeout(t1); clearTimeout(t2); };
+}
+
+/** Insere `node` relativo a `ref` conforme a posição (nomes do insertAdjacentElement). */
+function insertByPosition(ref, node, position) {
+  try {
+    ref.insertAdjacentElement(position || 'afterend', node);
+    return true;
+  } catch (_) {
+    try { ref.parentNode.insertBefore(node, ref.nextSibling); return true; } catch (_) { return false; }
+  }
+}
+
+/**
+ * Chamado a cada pageview (inclusive SPA). Idempotente.
+ */
+export async function maybeMountButton(pageType) {
+  const cfg = getConfig();
+
+  if (pageType !== 'pdp') { removeButton(); return; }
+  if (!cfg.projectId) return;
+
+  // Auto-aplica a receita de posição salva no CMS (template.tryOnButton.anchor).
+  // Precedência: window.__MK.anchor (inline da loja) > extensão (postMessage) >
+  // API/CMS > heurística do resolveAnchor. Se a loja já setou inline, NÃO toca.
+  // Se o CMS não tem anchor, segue sem (cai na heurística — comportamento antigo).
+  if (!cfg.anchor) {
+    const tpl0 = await getTemplateCached(cfg.apiUrl, cfg.projectId);
+    if (tpl0 && tpl0.anchor) cfg.anchor = tpl0.anchor;
+  }
+
+  if (mounting) return;
+
+  const skuRes = resolveSku();
+  const sku = skuRes && skuRes.value;
+  const force = !!cfg.forceButton;
+  // key canônico (campos em ordem FIXA — não depende da ordem das chaves do objeto).
+  // Assim preview e save com a mesma config geram o MESMO key e o botão NÃO é
+  // re-montado ("pula"/desce) ao salvar.
+  const variant = pickAnchorVariant(cfg.anchor);
+  const key = [sku || 'demo', variant
+    ? [variant.selector, variant.position, variant.mode, variant.align, variant.style].join('~')
+    : 'heuristic'].join('|');
+
+  const existing = document.getElementById(HOST_ID);
+  if (existing && mountedKey === key) return;   // mesmo produto + mesma âncora
+  if (existing) removeButton();                  // mudou → re-monta
+
+  if (!sku && !force) { log('auto-mount: SKU não resolvido na PDP'); return; }
+
+  mounting = true;
+  try {
+    let available = force;
+    if (!force) {
+      // cache de PROMISE (guardada sincronamente) → dedupe mesmo chamadas concorrentes
+      if (!availCache[sku]) {
+        availCache[sku] = getAvailability(cfg.projectId, sku)
+          .then((r) => !!(r && r.available)).catch(() => false);
+      }
+      available = await availCache[sku];
+    }
+    if (!available) { log('auto-mount: produto sem try-on', sku); return; }
+
+    const tpl = await getTemplateCached(cfg.apiUrl, cfg.projectId);
+    const isMobile = window.matchMedia('(max-width: 767px)').matches;
+    const config = normalizeButtonConfig(tpl, isMobile);
+
+    const anchor = resolveAnchor();
+    const mode = (anchor && anchor.mode) || 'flow';
+    // re-resolve o SKU no clique (caso o usuário troque a variante na PDP depois)
+    const btn = renderButton(config, () => {
+      const live = resolveSku();
+      open({ projectId: cfg.projectId, identifier: (live && live.value) || sku || '' });
+    });
+
+    const host = document.createElement('div');
+    host.id = HOST_ID;
+    const shadow = host.attachShadow({ mode: 'open' });
+    shadow.appendChild(btn);
+
+    let placed = false;
+    if (anchor && anchor.el && anchor.el.parentNode) {
+      if (mode === 'overlay') {
+        placeOverlay(anchor.el, host, anchor.align);
+        placed = true;
+      } else {
+        // flow: o host flui dentro do container — vira flex item num flex, bloco num block.
+        // Sem margem forçada (o gap natural do container cuida); ajuste fino via CSS extra.
+        host.style.cssText = 'display:contents;';
+        placed = insertByPosition(anchor.el, host, anchor.position);
+      }
+    }
+    if (!placed) {
+      host.style.cssText = 'position:fixed;left:16px;bottom:16px;z-index:2147483000;';
+      document.body.appendChild(host);
+    }
+
+    // CSS extra (offset/escala/css) sempre no BOTÃO — assim não conflita com o
+    // transform de centralização que o overlay aplica no host (align center/meios).
+    if (anchor && anchor.style) {
+      try { btn.style.cssText += ';' + anchor.style; } catch (_) {}
+    }
+
+    mountedKey = key;
+    ensureResizeWatch();
+    log('auto-mount: botão injetado', { style: config.style, sku, anchorFound: !!anchor, position: anchor && anchor.position, mode, forced: force });
+    track('button_rendered', {
+      style: config.style, sku: sku || null, skuSource: skuRes && skuRes.source,
+      anchorFound: !!anchor, position: anchor ? anchor.position : null, mode, forced: force
+    });
+  } finally {
+    mounting = false;
+  }
+}
+
+/**
+ * Canal de preview pro picker do addon: ao receber um anchor, re-injeta o botão
+ * naquela posição (forçado, ignora disponibilidade) pra visualização ao vivo.
+ */
+export function initPickerBridge() {
+  try {
+    const cfg = getConfig();
+    const original = { anchor: cfg.anchor, forceButton: cfg.forceButton };
+    window.addEventListener('message', (e) => {
+      if (e.source !== window) return;
+      const d = e.data;
+      if (!d || !d.__mkCmd) return;
+      if (d.__mkCmd === 'remount') {
+        cfg.anchor = d.anchor || null;   // preview da variante sendo editada (plano)
+        cfg.forceButton = true;          // preview sempre mostra o botão
+        maybeMountButton('pdp');         // re-monta só se a config (key) mudou
+      } else if (d.__mkCmd === 'applyRecipe') {
+        // pós-save: aplica a receita completa. Sem removeButton — se a posição é a
+        // mesma do preview (key igual), o botão NÃO é re-montado (não "desce"/pula).
+        cfg.anchor = d.anchor || null;
+        cfg.forceButton = true;
+        maybeMountButton('pdp');
+      } else if (d.__mkCmd === 'cancelPreview') {
+        cfg.anchor = original.anchor;    // restaura o estado anterior ao picker
+        cfg.forceButton = original.forceButton;
+        removeButton();
+        maybeMountButton('pdp');
+      }
+    });
+  } catch (_) {}
+}