mk-sdk-git 0.1.0

package/src/tryon/bridge.js

@@ -0,0 +1,210 @@
+// bridge.js — módulo de try-on. Abre o iframe do visualizer, escuta postMessages
+// e emite eventos de tracking. API pública exposta em window.mk.
+
+import { getConfig, log } from '../core/config.js';
+import { track } from '../core/transport.js';
+import { addToCart as cartAdd } from '../platforms/index.js';
+
+let modal = null;
+let iframe = null;
+let isOpen = false;
+let currentConfig = null;
+let availabilityChecked = {};
+let photoMethod = null;            // qrcode | gallery | camera (recebido via interaction)
+let generationStartedAt = 0;
+
+const callbacks = {
+  onReady: null, onClose: null, onAddToCart: null,
+  onProductLoaded: null, onError: null, onInteraction: null, onGenerationComplete: null
+};
+
+const STORE_ALIASES = { gregory: '698c7e791d3129430f15dddd' };
+function resolveProjectId(p) {
+  if (!p) return null;
+  return STORE_ALIASES[String(p).toLowerCase()] || p;
+}
+
+// ─── API de disponibilidade ───────────────────────────────────────────────
+export async function getAvailability(projectId, identifier) {
+  const cfg = getConfig();
+  const resolved = resolveProjectId(projectId);
+  identifier = String(identifier || '').trim();
+  const url = cfg.apiUrl + '/availability/' + resolved + '?sku=' + encodeURIComponent(identifier);
+  const resp = await fetch(url);
+  if (!resp.ok) throw new Error('availability HTTP ' + resp.status);
+  return resp.json();
+}
+
+export async function isAvailable(projectId, identifier) {
+  if (!identifier) { identifier = projectId; projectId = '698c7e791d3129430f15dddd'; }
+  try {
+    const data = await getAvailability(projectId, identifier);
+    return data.available === true;
+  } catch (_) { return false; }
+}
+
+// ─── Abrir / fechar modal ─────────────────────────────────────────────────
+export async function open(options) {
+  options = options || {};
+  if (isOpen) return;
+
+  const projectId = resolveProjectId(options.projectId || options.projectid || options.store);
+  const identifier = String(options.identifier || options.sku || '').trim();
+  if (!projectId || !identifier) {
+    console.error('[mk-sdk] open: projectId e identifier obrigatorios');
+    return;
+  }
+
+  // valida disponibilidade (pula se init já validou)
+  const key = projectId + ':' + identifier;
+  if (availabilityChecked[key] !== true) {
+    try {
+      const a = await getAvailability(projectId, identifier);
+      if (!a.available) { alert('Produto nao disponivel para prova virtual.'); return; }
+    } catch (_) { alert('Produto nao encontrado ou indisponivel.'); return; }
+    availabilityChecked[key] = true;
+  }
+
+  currentConfig = { projectId, identifier, width: options.width || 430, height: options.height || 800 };
+  setupMessageListener();
+  openModal(currentConfig);
+  isOpen = true;
+  generationStartedAt = Date.now();
+
+  track('modal_opened', { projectId, identifier });
+}
+
+export function close() {
+  if (!isOpen) return;
+  hideModal();
+  isOpen = false;
+  fire('onClose');
+  track('modal_closed', { projectId: currentConfig && currentConfig.projectId, identifier: currentConfig && currentConfig.identifier });
+}
+
+// ─── Modal DOM ────────────────────────────────────────────────────────────
+function openModal(cfg) {
+  modal = document.createElement('div');
+  modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:99999;';
+
+  const container = document.createElement('div');
+  const w = typeof cfg.width === 'number' ? cfg.width + 'px' : cfg.width;
+  const h = typeof cfg.height === 'number' ? cfg.height + 'px' : cfg.height;
+  container.style.cssText = 'position:relative;width:' + w + ';height:' + h + ';max-width:100vw;max-height:100dvh;border-radius:12px;overflow:hidden;background:#fff;';
+
+  iframe = document.createElement('iframe');
+  const encoded = encodeURIComponent(cfg.identifier).replace(/\./g, '%2E');
+  iframe.src = getConfig().appUrl + '/' + cfg.projectId + '/' + encoded;
+  iframe.style.cssText = 'width:100%;height:100%;border:none;';
+  iframe.setAttribute('allow', 'camera *; microphone *');
+  iframe.setAttribute('allowfullscreen', 'true');
+
+  container.appendChild(iframe);
+  modal.appendChild(container);
+  document.body.appendChild(modal);
+
+  log('try-on modal aberto', iframe.src);
+}
+
+function hideModal() {
+  if (modal && modal.parentNode) modal.parentNode.removeChild(modal);
+  modal = null;
+  iframe = null;
+}
+
+// ─── postMessage listener — capta eventos do iframe MK ────────────────────
+let listenerActive = false;
+// Ativa o listener de postMessages do provador no boot (não só ao abrir o modal),
+// pra captar add_to_cart mesmo que o fluxo de abertura varie.
+export function initListener() { setupMessageListener(); }
+function setupMessageListener() {
+  if (listenerActive) return;
+  listenerActive = true;
+  window.addEventListener('message', (event) => {
+    const data = event.data;
+    if (!data || data.source !== 'mkfashion-app') return;
+    const action = data.action;
+    const payload = data.data || {};
+
+    switch (action) {
+      case 'close_request':
+        close();
+        break;
+      case 'ready':
+        fire('onReady', payload);
+        // page_ready é redundante com modal_opened — não emitimos
+        break;
+      case 'product_loaded':
+        fire('onProductLoaded', payload);
+        track('product_loaded', stripImg(payload));
+        break;
+      case 'interaction': {
+        fire('onInteraction', payload);
+        // captura method quando o iframe avisa
+        if (payload && payload.method) photoMethod = payload.method;
+        track(interactionName(payload), stripImg(payload));
+        break;
+      }
+      case 'add_to_cart':
+        track('add_to_cart', Object.assign({ via: 'tryon' }, stripImg(payload)));
+        if (typeof callbacks.onAddToCart === 'function') {
+          fire('onAddToCart', payload);        // cliente cuida (compat SDK v2)
+        } else {
+          cartAdd(payload).catch(() => {});    // mk-sdk adiciona sozinho (zero-touch)
+        }
+        break;
+      case 'generation_start':
+        generationStartedAt = Date.now();
+        break;
+      case 'generation_complete':
+        fire('onGenerationComplete', payload);  // cliente recebe imageUrl completo
+        track('generation_complete', {
+          method: payload.method || photoMethod || 'unknown',
+          durationMs: generationStartedAt ? (Date.now() - generationStartedAt) : null,
+          success: payload.success !== false,
+          imageUrlPresent: !!payload.imageUrl
+        });
+        break;
+      case 'generation_error':
+        fire('onError', payload);
+        track('generation_error', { method: photoMethod || 'unknown', error: payload && payload.error });
+        break;
+    }
+  });
+}
+
+// Eventos de interaction viram page_<category>_<action> ou page_interaction
+function interactionName(payload) {
+  if (payload && payload.action) return 'interaction';  // mantém genérico, action vai no params
+  return 'interaction';
+}
+
+// Remove imageUrl pesado antes de track (sanitize do core também faz, mas garantimos)
+function stripImg(obj) {
+  if (!obj || typeof obj !== 'object') return obj;
+  const out = {};
+  for (const k in obj) {
+    if (k === 'imageUrl' || k === 'image' || k === 'product') {
+      if (k === 'product' && obj[k]) { out.productSku = obj[k].sku || null; out.productName = obj[k].name || null; }
+      else out[k + 'Present'] = !!obj[k];
+      continue;
+    }
+    out[k] = obj[k];
+  }
+  return out;
+}
+
+function fire(name, data) {
+  if (typeof callbacks[name] === 'function') {
+    try { callbacks[name](data); } catch (e) { console.error('[mk-sdk]', e); }
+  }
+}
+
+// ─── Registradores de callback (compat API v2) ────────────────────────────
+export function onReady(cb) { callbacks.onReady = cb; }
+export function onClose(cb) { callbacks.onClose = cb; }
+export function onAddToCart(cb) { callbacks.onAddToCart = cb; }
+export function onProductLoaded(cb) { callbacks.onProductLoaded = cb; }
+export function onError(cb) { callbacks.onError = cb; }
+export function onInteraction(cb) { callbacks.onInteraction = cb; }
+export function onGenerationComplete(cb) { callbacks.onGenerationComplete = cb; }

package/src/tryon/buttons/config.js

@@ -0,0 +1,56 @@
+// config.js (buttons) — defaults, template server-driven e normalização.
+// Portado da mkfashion-sdk (_BUTTON_DEFAULTS, _fetchButtonTemplate, _normalizeButtonConfig).
+
+import { BUTTON_RADIUS, CARD_RADIUS } from './helpers.js';
+
+export const BUTTON_DEFAULTS = {
+  style: 'gregory-black',
+  text: 'Provar Virtualmente',
+  fontSize: 14,
+  subtext: '',
+  bgColor: '#1E1E1E',
+  textColor: '#FFFFFF',
+  badgeBgColor: '#C51A1B',
+  badgeTextColor: '#FFFFFF',
+  borderRadius: 'md',
+  borderColor: '#1E1E1E',
+  borderWidth: 0,
+  cardTitle: '',
+  cardDescription: '',
+  cardFooter: '',
+  cardBgColor: '#F6F6F6',
+  cardTitleColor: '#1E1E1E',
+  cardTextColor: '#717171',
+  cardBorderRadius: 'md'
+};
+
+/**
+ * Busca o template do botão configurado por projeto (server-driven).
+ * GET {apiUrl}/projects/{projectId} → project.template.tryOnButton
+ * Retorna null em falha (o normalize cai nos defaults).
+ */
+export async function fetchButtonTemplate(apiUrl, projectId) {
+  try {
+    const r = await fetch(`${apiUrl}/projects/${projectId}`);
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    const data = await r.json();
+    return (data && data.project && data.project.template && data.project.template.tryOnButton)
+        || (data && data.template && data.template.tryOnButton)
+        || null;
+  } catch (_) {
+    return null;
+  }
+}
+
+/** Escolhe config desktop/mobile, força gregory-black em mobile, aplica defaults, pré-resolve px. */
+export function normalizeButtonConfig(template, isMobile) {
+  const raw = (isMobile ? (template && template.mobile) : (template && template.desktop))
+            || (template && template.desktop) || (template && template.mobile) || {};
+  const merged = { ...BUTTON_DEFAULTS, ...raw };
+  if (merged.style === 'gregory-card' && isMobile) merged.style = 'gregory-black';
+  merged.borderRadiusPx = BUTTON_RADIUS[merged.borderRadius] != null ? BUTTON_RADIUS[merged.borderRadius] : '0';
+  merged.cardBorderRadiusPx = CARD_RADIUS[merged.cardBorderRadius] != null ? CARD_RADIUS[merged.cardBorderRadius] : '0';
+  merged.fontSize = Number(merged.fontSize) || 14;
+  merged.borderWidth = Number(merged.borderWidth) || 0;
+  return merged;
+}

package/src/tryon/buttons/gregory-black.js

@@ -0,0 +1,38 @@
+// gregory-black.js — preset de botão simples (ícone + texto + badge opcional).
+// Portado de _renderSimpleButton / _renderBlackBadge da mkfashion-sdk.
+
+import { el, cameraIcon, borderFrom, ensureJakartaFont, FONT_STACK } from './helpers.js';
+
+function renderBadge(c) {
+  if (!c.subtext) return null;
+  return el('span', {
+    style: `display:flex;align-items:center;justify-content:center;padding:4px;background:${c.badgeBgColor};font-family:${FONT_STACK};font-weight:700;font-size:16px;text-transform:uppercase;color:${c.badgeTextColor};line-height:1;white-space:nowrap;`,
+    text: c.subtext
+  });
+}
+
+/** render(config, onClick) → HTMLButtonElement */
+export function render(c, onClick) {
+  ensureJakartaFont();
+  const content = el('span', {
+    style: 'display:inline-flex;align-items:center;gap:4px;',
+    children: [
+      cameraIcon(c.textColor),
+      el('span', {
+        text: c.text,
+        style: `font-family:${FONT_STACK};font-weight:700;font-size:${c.fontSize}px;text-transform:uppercase;letter-spacing:2px;color:${c.textColor};white-space:nowrap;text-align:center;line-height:1;`
+      })
+    ]
+  });
+
+  return el('button', {
+    attrs: { type: 'button' },
+    style: `display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;width:100%;max-width:238px;box-sizing:border-box;background:${c.bgColor};border:${borderFrom(c)};border-radius:${c.borderRadiusPx};font-family:${FONT_STACK};cursor:pointer;transition:opacity 0.2s ease;line-height:1;-webkit-appearance:none;appearance:none;`,
+    children: [content, renderBadge(c)],
+    on: {
+      mouseenter: (e) => { e.currentTarget.style.opacity = '0.85'; },
+      mouseleave: (e) => { e.currentTarget.style.opacity = '1'; },
+      click: () => { try { onClick && onClick(); } catch (_) {} }
+    }
+  });
+}

package/src/tryon/buttons/gregory-card.js

@@ -0,0 +1,76 @@
+// gregory-card.js — preset de card (título + descrição + CTA + badge).
+// Portado de _renderCardButton / _renderCardBadge / _renderCardCta da mkfashion-sdk.
+
+import { el, cameraIcon, sparkleIcon, borderFrom, ensureJakartaFont, FONT_STACK } from './helpers.js';
+
+function renderBadge(c) {
+  if (!c.subtext) return null;
+  return el('span', {
+    style: `display:flex;align-items:center;gap:4px;padding:4px;background:${c.badgeBgColor};font-family:${FONT_STACK};font-weight:600;font-size:10px;text-transform:uppercase;color:${c.badgeTextColor};line-height:1;white-space:nowrap;`,
+    children: [sparkleIcon(c.badgeTextColor), el('span', { text: c.subtext })]
+  });
+}
+
+function renderCta(c, onClick) {
+  return el('button', {
+    attrs: { type: 'button' },
+    style: `display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px 8px 8px;width:100%;margin-top:auto;box-sizing:border-box;background:${c.bgColor};border:${borderFrom(c)};border-radius:${c.borderRadiusPx};filter:drop-shadow(0 0 6px rgba(0,0,0,0.08));font-family:${FONT_STACK};cursor:pointer;transition:opacity 0.2s ease;line-height:1;-webkit-appearance:none;appearance:none;`,
+    children: [
+      cameraIcon(c.textColor),
+      el('span', {
+        text: c.text,
+        style: `font-family:${FONT_STACK};font-weight:700;font-size:${c.fontSize}px;color:${c.textColor};white-space:nowrap;line-height:1;`
+      })
+    ],
+    on: {
+      mouseenter: (e) => { e.currentTarget.style.opacity = '0.85'; },
+      mouseleave: (e) => { e.currentTarget.style.opacity = '1'; },
+      click: () => { try { onClick && onClick(); } catch (_) {} }
+    }
+  });
+}
+
+/** render(config, onClick) → HTMLDivElement (card) */
+export function render(c, onClick) {
+  ensureJakartaFont();
+
+  const titleBlock = el('div', {
+    style: 'display:flex;flex-direction:column;gap:4px;',
+    children: [
+      c.cardTitle && el('p', {
+        text: c.cardTitle,
+        style: `margin:0;font-family:${FONT_STACK};font-weight:700;font-size:16px;letter-spacing:1px;text-transform:uppercase;color:${c.cardTitleColor};line-height:1.2;`
+      }),
+      c.cardDescription && el('p', {
+        html: c.cardDescription,
+        style: `margin:0;font-family:${FONT_STACK};font-weight:400;font-size:12px;max-width:177px;line-height:1.2;color:${c.cardTextColor};`
+      })
+    ]
+  });
+
+  const details = el('div', {
+    style: 'display:flex;flex-direction:column;justify-content:space-between;gap:16px;flex:1 1 0;min-width:0;',
+    children: [
+      titleBlock,
+      c.cardFooter && el('p', {
+        text: c.cardFooter,
+        style: `margin:0;font-family:${FONT_STACK};font-weight:400;font-size:10px;color:${c.cardTextColor};line-height:1.2;`
+      })
+    ]
+  });
+
+  const right = el('div', {
+    style: 'display:flex;flex-direction:column;align-items:flex-end;flex:1 1 0;min-width:0;',
+    children: [renderBadge(c), renderCta(c, onClick)]
+  });
+
+  const row = el('div', {
+    style: 'display:flex;gap:16px;align-items:stretch;width:100%;flex:1;box-sizing:border-box;',
+    children: [details, right]
+  });
+
+  return el('div', {
+    style: `display:flex;flex-direction:column;align-items:flex-start;padding:12px;width:100%;max-width:402px;min-height:140px;box-sizing:border-box;background:${c.cardBgColor};border-radius:${c.cardBorderRadiusPx};font-family:${FONT_STACK};`,
+    children: [row]
+  });
+}

package/src/tryon/buttons/helpers.js

@@ -0,0 +1,57 @@
+// helpers.js — utilitários compartilhados pelos renderizadores de botão.
+// Portado da mkfashion-sdk (mkfashion.js, seção "BOTÃO TRY-ON").
+
+export const FONT_STACK = "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+export const BUTTON_RADIUS = { none: '0', sm: '4px', md: '8px', pill: '9999px' };
+export const CARD_RADIUS = { none: '0', sm: '4px', md: '8px', lg: '16px' };
+
+const CAMERA_ICON_SVG = '<svg viewBox="0 0 17.5263 20.6862" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;width:100%;height:100%"><g><path d="M8.49995 12.1862C10.1568 12.1862 11.5 10.8431 11.5 9.18622C11.5 7.52936 10.1568 6.18622 8.49995 6.18622C6.8431 6.18622 5.49995 7.52936 5.49995 9.18622C5.49995 10.8431 6.8431 12.1862 8.49995 12.1862Z" stroke="currentColor" shape-rendering="crispEdges"/><path d="M0.5 9.11152C0.5 6.56953 0.5 5.29894 1.1099 4.38664C1.375 3.9902 1.71424 3.65088 2.10821 3.38809C2.6945 2.9958 3.42899 2.85564 4.55351 2.80588C5.09013 2.80588 5.55183 2.39949 5.65687 1.87284C5.73715 1.48708 5.94572 1.14138 6.24735 0.894155C6.54898 0.646934 6.92516 0.51336 7.31231 0.516006H9.9734C10.7779 0.516006 11.4709 1.08412 11.6288 1.87284C11.7339 2.39949 12.1956 2.80588 12.7322 2.80588C13.8559 2.85564 12.9129 4.67413 13.5 5.06559C13.8949 5.32932 15.1484 3.80355 15.5 4.02647C16.1099 4.93876 16.7857 6.56953 16.7857 9.11152C16.7857 11.6535 16.7857 12.9233 16.1758 13.8364C15.9107 14.2328 15.5715 14.5722 15.1775 14.835C14.2647 15.4445 12.9936 15.4445 10.4522 15.4445H6.83351C4.29213 15.4445 3.02103 15.4445 2.10821 14.835C1.71446 14.5718 1.3755 14.2322 1.11071 13.8356C0.933802 13.5672 0.803519 13.2698 0.725557 12.9564" stroke="currentColor" stroke-linecap="round"/><path d="M12.676 0.607931C12.9446 -0.178095 14.0307 -0.2019 14.3491 0.536515L14.3761 0.60838L14.7385 1.66839C14.8216 1.91149 14.9559 2.13395 15.1322 2.32076C15.3086 2.50757 15.5229 2.65439 15.7608 2.75131L15.8583 2.78769L16.9183 3.14971C17.7044 3.41831 17.7282 4.50437 16.9902 4.82283L16.9183 4.84978L15.8583 5.21225C15.6151 5.29526 15.3926 5.42947 15.2057 5.60582C15.0188 5.78218 14.8719 5.99657 14.7749 6.23453L14.7385 6.33155L14.3765 7.39201C14.1079 8.17803 13.0219 8.20184 12.7039 7.46387L12.676 7.39201L12.314 6.332C12.231 6.08881 12.0968 5.86627 11.9204 5.67938C11.744 5.49249 11.5297 5.3456 11.2917 5.24863L11.1947 5.21225L10.1347 4.85022C9.34817 4.58163 9.32437 3.49557 10.0628 3.17756L10.1347 3.14971L11.1947 2.78769C11.4378 2.70462 11.6602 2.57039 11.847 2.39404C12.0339 2.21769 12.1807 2.00333 12.2776 1.76541L12.314 1.66839L12.676 0.607931Z" fill="currentColor"/></g></svg>';
+
+const SPARKLE_ICON_SVG = '<svg viewBox="0 0 11.6122 12.7248" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;width:12px;height:12px"><path d="M4.09055 2.01133C4.43939 0.9905 5.84989 0.959583 6.26347 1.91858L6.29847 2.01192L6.76922 3.38858C6.8771 3.7043 7.05144 3.99321 7.28047 4.23583C7.5095 4.47845 7.7879 4.66912 8.09689 4.795L8.22347 4.84225L9.60014 5.31242C10.621 5.66125 10.6519 7.07175 9.69347 7.48533L9.60014 7.52033L8.22347 7.99108C7.90764 8.09889 7.61862 8.2732 7.3759 8.50223C7.13318 8.73127 6.94241 9.0097 6.81647 9.31875L6.76922 9.44475L6.29905 10.822C5.95022 11.8428 4.53972 11.8737 4.12672 10.9153L4.09055 10.822L3.62039 9.44533C3.51258 9.12951 3.33827 8.84048 3.10924 8.59776C2.8802 8.35504 2.60177 8.16427 2.29272 8.03833L2.16672 7.99108L0.790054 7.52092C-0.231363 7.17208 -0.26228 5.76158 0.69672 5.34858L0.790054 5.31242L2.16672 4.84225C2.48244 4.73437 2.77135 4.56003 3.01397 4.331C3.25658 4.10197 3.44726 3.82357 3.57314 3.51458L3.62039 3.38858L4.09055 2.01133ZM9.86147 0C9.9706 0 10.0775 0.0306123 10.1701 0.0883584C10.2627 0.146104 10.3373 0.228668 10.3853 0.326667L10.4133 0.394917L10.6175 0.993417L11.2166 1.19758C11.3259 1.23474 11.4218 1.30353 11.492 1.39523C11.5623 1.48693 11.6037 1.59741 11.611 1.71268C11.6184 1.82795 11.5914 1.94281 11.5334 2.04271C11.4755 2.14261 11.3891 2.22305 11.2854 2.27383L11.2166 2.30183L10.6181 2.506L10.4139 3.10508C10.3767 3.21442 10.3078 3.31024 10.2161 3.38041C10.1244 3.45058 10.0139 3.49194 9.89859 3.49925C9.78333 3.50656 9.66849 3.47949 9.56863 3.42147C9.46876 3.36345 9.38837 3.27709 9.33764 3.17333L9.30964 3.10508L9.10547 2.50658L8.50639 2.30242C8.39702 2.26526 8.30115 2.19647 8.23092 2.10477C8.16069 2.01307 8.11926 1.90259 8.11189 1.78732C8.10452 1.67205 8.13153 1.55719 8.18951 1.45729C8.24749 1.35739 8.33381 1.27695 8.43755 1.22617L8.50639 1.19817L9.10489 0.994L9.30905 0.394917C9.34839 0.279665 9.42281 0.179613 9.52187 0.108791C9.62094 0.0379686 9.73969 -0.0000730808 9.86147 0Z" fill="currentColor"/></svg>';
+
+/** Cria elemento DOM declarativamente: el('tag', { style, text|html, children, on, attrs }) */
+export function el(tag, opts = {}) {
+  const node = document.createElement(tag);
+  if (opts.style) node.style.cssText = opts.style;
+  if (opts.text != null) node.textContent = opts.text;
+  if (opts.html != null) node.innerHTML = opts.html;
+  if (opts.attrs) for (const k in opts.attrs) node.setAttribute(k, opts.attrs[k]);
+  if (opts.on) for (const k in opts.on) node.addEventListener(k, opts.on[k]);
+  if (opts.children) for (const c of opts.children) if (c) node.appendChild(c);
+  return node;
+}
+
+export function cameraIcon(color) {
+  return el('span', {
+    style: `width:24px;height:24px;padding:2px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;color:${color};flex-shrink:0;`,
+    html: CAMERA_ICON_SVG
+  });
+}
+
+export function sparkleIcon(color) {
+  return el('span', {
+    style: `width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;color:${color};flex-shrink:0;`,
+    html: SPARKLE_ICON_SVG
+  });
+}
+
+export function borderFrom(c) {
+  return c.borderWidth > 0 && c.borderColor ? `${c.borderWidth}px solid ${c.borderColor}` : 'none';
+}
+
+/**
+ * Garante a fonte Jakarta no documento. Carregada no document (não no shadow),
+ * pois o carregamento de fontes é global e alcança o shadow tree.
+ */
+export function ensureJakartaFont() {
+  if (document.getElementById('mk-jakarta-font')) return;
+  try {
+    document.head.appendChild(el('link', {
+      attrs: {
+        id: 'mk-jakarta-font',
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap'
+      }
+    }));
+  } catch (_) {}
+}

package/src/tryon/buttons/registry.js

@@ -0,0 +1,21 @@
+// registry.js — registro de estilos de botão. Pra adicionar um novo tipo:
+// crie ./meu-estilo.js exportando render(config, onClick) e registre aqui.
+
+import * as gregoryBlack from './gregory-black.js';
+import * as gregoryCard from './gregory-card.js';
+import { fetchButtonTemplate, normalizeButtonConfig } from './config.js';
+
+const RENDERERS = {
+  'gregory-black': gregoryBlack.render,
+  'gregory-card': gregoryCard.render
+};
+
+export const AVAILABLE_STYLES = Object.keys(RENDERERS);
+
+/** Renderiza o botão do estilo informado (fallback: gregory-black). */
+export function renderButton(config, onClick) {
+  const fn = RENDERERS[config.style] || RENDERERS['gregory-black'];
+  return fn(config, onClick);
+}
+
+export { fetchButtonTemplate, normalizeButtonConfig };