mkfashion-sdk 1.0.0

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package/README.md

@@ -0,0 +1,62 @@
+# mKFashion SDK
+
+SDK para integrar o provador virtual de roupas com IA em qualquer site ou e-commerce.
+
+## Instalação
+
+```html
+<script src="https://unpkg.com/mkfashion-sdk/src/mkfashion.js"></script>
+```
+
+## Uso Rápido
+
+```javascript
+// 1. Registrar callback do carrinho
+mkfashion.addToCart(function(payload) {
+  console.log("Produto:", payload.identifier);
+  console.log("Tamanho:", payload.size);
+});
+
+// 2. Abrir o provador
+mkfashion.open({
+  type: 'iframe',
+  projectid: 'minha-loja',
+  identifier: 'PRODUTO-001',
+  width: 400,
+  height: 700
+});
+```
+
+## Documentação
+
+- [Introdução](./docs/index.md)
+- [Instalação do Plugin](./docs/instalacao.md)
+- [Abrir o Visualizador](./docs/abrir-visualizador.md)
+- [Integração com Carrinho](./docs/integracao-carrinho.md)
+- [SDK Reference](./docs/sdk-reference.md)
+
+## Métodos Disponíveis
+
+| Método | Descrição |
+|--------|-----------|
+| `open(options)` | Abre o provador virtual |
+| `close()` | Fecha o provador |
+| `restart()` | Reinicia a experiência |
+| `destroy()` | Remove do DOM |
+| `getStatus()` | Retorna estado atual |
+| `addToCart(callback)` | Callback ao adicionar ao carrinho |
+| `onReady(callback)` | Callback quando pronto |
+| `onClose(callback)` | Callback ao fechar |
+| `onGenerationComplete(callback)` | Callback ao gerar imagem |
+| `onError(callback)` | Callback de erro |
+
+## Desenvolvimento
+
+```bash
+# Testar localmente
+# Abra test.html no navegador
+```
+
+## Licença
+
+MIT - metaKosmos

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "mkfashion-sdk",
+  "version": "1.0.0",
+  "description": "SDK para integrar o provador virtual mKFashion",
+  "main": "src/mkfashion.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Abra test.html no navegador\""
+  },
+  "keywords": [
+    "fashion",
+    "virtual",
+    "try-on",
+    "sdk",
+    "metakosmos"
+  ],
+  "author": "metaKosmos",
+  "license": "MIT"
+}

package/src/mkfashion.js

@@ -0,0 +1,437 @@
+/**
+ * mKFashion SDK
+ * SDK para integrar o provador virtual mKFashion em qualquer site
+ *
+ * Instalacao:
+ *   <script src="https://unpkg.com/mkfashion-sdk/src/mkfashion.js"></script>
+ *
+ * Uso:
+ *   mkfashion.open({
+ *     type: 'iframe',
+ *     projectid: 'gregory',
+ *     identifier: 'SKU-001',
+ *     width: 400,
+ *     height: 700
+ *   })
+ *
+ *   mkfashion.addToCart(function(payload) {
+ *     console.log('Produto adicionado:', payload)
+ *   })
+ */
+
+const mkfashion = {
+
+  // ============ CONFIGURACAO ============
+
+  appUrl: 'https://fashion.metakosmos.com/',
+  debug: false,
+
+  // Estado interno
+  _iframe: null,
+  _modal: null,
+  _isOpen: false,
+  _config: null,
+  _callbacks: {
+    onReady: null,
+    onClose: null,
+    onAddToCart: null,
+    onGenerationComplete: null,
+    onError: null
+  },
+  _escHandler: null,
+  _messageHandler: null,
+
+  // ============ METODOS PUBLICOS ============
+
+  /**
+   * Abre o provador virtual
+   * @param {Object} options - Configuracoes
+   * @param {string} options.type - 'iframe' (modal) ou 'embed' (default: 'iframe')
+   * @param {string} options.projectid - Identificador do projeto/empresa (obrigatorio)
+   * @param {string} options.identifier - SKU ou ID do produto (obrigatorio)
+   * @param {string|number} options.width - Largura (ex: 800 ou '90%')
+   * @param {string|number} options.height - Altura (ex: 600 ou '95%')
+   * @param {string} options.targetId - ID do container (obrigatorio para type='embed')
+   */
+  open(options = {}) {
+    if (this._isOpen) {
+      this._log('Ja esta aberto')
+      return
+    }
+
+    // Valida opcoes obrigatorias
+    if (!options.projectid) {
+      console.error('[mKFashion] projectid e obrigatorio')
+      return
+    }
+    if (!options.identifier) {
+      console.error('[mKFashion] identifier e obrigatorio')
+      return
+    }
+
+    // Salva configuracao
+    this._config = {
+      type: options.type || 'iframe',
+      projectid: options.projectid,
+      identifier: options.identifier,
+      width: options.width || '90%',
+      height: options.height || '95%',
+      targetId: options.targetId || null
+    }
+
+    // Inicia listener de mensagens
+    this._setupMessageListener()
+
+    // Abre de acordo com o tipo
+    if (this._config.type === 'iframe') {
+      this._openModal()
+    } else if (this._config.type === 'embed') {
+      this._openEmbed()
+    }
+
+    this._isOpen = true
+    this._log('Aberto', this._config)
+  },
+
+  /**
+   * Fecha o provador virtual
+   */
+  close() {
+    if (!this._isOpen) {
+      this._log('Ja esta fechado')
+      return
+    }
+
+    // Remove listener de mensagens
+    this._removeMessageListener()
+
+    if (this._config.type === 'iframe') {
+      this._closeModal()
+    } else if (this._config.type === 'embed') {
+      this._closeEmbed()
+    }
+
+    // Dispara callback de fechamento
+    this._triggerCallback('onClose')
+
+    this._isOpen = false
+    this._log('Fechado')
+  },
+
+  /**
+   * Registra callback para quando usuario adicionar ao carrinho
+   * @param {Function} callback - Funcao que recebe o payload do produto
+   */
+  addToCart(callback) {
+    if (typeof callback === 'function') {
+      this._callbacks.onAddToCart = callback
+      this._log('Callback addToCart registrado')
+    } else {
+      console.error('[mKFashion] addToCart requer uma funcao como parametro')
+    }
+  },
+
+  /**
+   * Registra callback para quando app estiver pronta
+   * @param {Function} callback - Funcao chamada quando app carregar
+   */
+  onReady(callback) {
+    if (typeof callback === 'function') {
+      this._callbacks.onReady = callback
+      this._log('Callback onReady registrado')
+    }
+  },
+
+  /**
+   * Registra callback para quando modal fechar
+   * @param {Function} callback - Funcao chamada ao fechar
+   */
+  onClose(callback) {
+    if (typeof callback === 'function') {
+      this._callbacks.onClose = callback
+      this._log('Callback onClose registrado')
+    }
+  },
+
+  /**
+   * Registra callback para quando geracao completar
+   * @param {Function} callback - Funcao que recebe dados da geracao
+   */
+  onGenerationComplete(callback) {
+    if (typeof callback === 'function') {
+      this._callbacks.onGenerationComplete = callback
+      this._log('Callback onGenerationComplete registrado')
+    }
+  },
+
+  /**
+   * Registra callback para erros
+   * @param {Function} callback - Funcao que recebe dados do erro
+   */
+  onError(callback) {
+    if (typeof callback === 'function') {
+      this._callbacks.onError = callback
+      this._log('Callback onError registrado')
+    }
+  },
+
+  /**
+   * Reinicia a experiencia (volta para tela de instrucoes)
+   */
+  restart() {
+    if (!this._iframe || !this._config) {
+      this._log('Nenhum iframe ativo')
+      return
+    }
+
+    this._iframe.src = this._buildUrl()
+    this._log('Reiniciado')
+  },
+
+  /**
+   * Remove completamente do DOM
+   */
+  destroy() {
+    this.close()
+    this._iframe = null
+    this._modal = null
+    this._config = null
+    this._callbacks = {
+      onReady: null,
+      onClose: null,
+      onAddToCart: null,
+      onGenerationComplete: null,
+      onError: null
+    }
+    this._log('Destruido')
+  },
+
+  /**
+   * Retorna o estado atual
+   */
+  getStatus() {
+    return {
+      isOpen: this._isOpen,
+      config: this._config
+    }
+  },
+
+  // ============ METODOS PRIVADOS ============
+
+  _log(message, data = null) {
+    if (this.debug) {
+      if (data) {
+        console.log(`[mKFashion] ${message}`, data)
+      } else {
+        console.log(`[mKFashion] ${message}`)
+      }
+    }
+  },
+
+  _triggerCallback(name, data = null) {
+    if (this._callbacks && typeof this._callbacks[name] === 'function') {
+      try {
+        this._callbacks[name](data)
+        this._log(`Callback ${name} executado`, data)
+      } catch (error) {
+        console.error(`[mKFashion] Erro no callback ${name}:`, error)
+      }
+    }
+  },
+
+  _buildUrl() {
+    const url = new URL(this.appUrl)
+    url.searchParams.set('company', this._config.projectid)
+    url.searchParams.set('sku', this._config.identifier)
+    url.searchParams.set('sdk', 'true')
+    return url.toString()
+  },
+
+  _openModal() {
+    // Cria o fundo escuro
+    this._modal = document.createElement('div')
+    this._modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 99999;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    `
+
+    // Cria o iframe
+    this._iframe = this._createIframe()
+    this._iframe.style.cssText += `
+      border-radius: 12px;
+      transform: scale(0.95);
+      transition: transform 0.3s ease;
+    `
+
+    // Adiciona ao modal
+    this._modal.appendChild(this._iframe)
+    document.body.appendChild(this._modal)
+
+    // Anima a entrada
+    requestAnimationFrame(() => {
+      this._modal.style.opacity = '1'
+      this._iframe.style.transform = 'scale(1)'
+    })
+
+    // Fecha ao clicar fora
+    this._modal.addEventListener('click', (e) => {
+      if (e.target === this._modal) {
+        this.close()
+      }
+    })
+
+    // Fecha com ESC
+    this._escHandler = (e) => {
+      if (e.key === 'Escape') {
+        this.close()
+      }
+    }
+    document.addEventListener('keydown', this._escHandler)
+  },
+
+  _closeModal() {
+    if (!this._modal) return
+
+    // Anima a saida
+    this._modal.style.opacity = '0'
+    this._iframe.style.transform = 'scale(0.95)'
+
+    // Remove apos animacao
+    setTimeout(() => {
+      if (this._modal && this._modal.parentNode) {
+        this._modal.parentNode.removeChild(this._modal)
+      }
+      this._modal = null
+      this._iframe = null
+    }, 300)
+
+    // Remove listener do ESC
+    if (this._escHandler) {
+      document.removeEventListener('keydown', this._escHandler)
+    }
+  },
+
+  _openEmbed() {
+    const targetId = this._config.targetId
+    if (!targetId) {
+      console.error('[mKFashion] targetId e obrigatorio para type="embed"')
+      return
+    }
+
+    const container = document.getElementById(targetId)
+    if (!container) {
+      console.error(`[mKFashion] Elemento #${targetId} nao encontrado`)
+      return
+    }
+
+    this._iframe = this._createIframe()
+    this._iframe.style.cssText += `
+      border-radius: 12px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    `
+
+    container.innerHTML = ''
+    container.appendChild(this._iframe)
+  },
+
+  _closeEmbed() {
+    if (!this._config.targetId) return
+
+    const container = document.getElementById(this._config.targetId)
+    if (container) {
+      container.innerHTML = ''
+    }
+
+    this._iframe = null
+  },
+
+  _createIframe() {
+    const { width, height } = this._config
+    const iframe = document.createElement('iframe')
+    iframe.src = this._buildUrl()
+    iframe.style.width = typeof width === 'number' ? `${width}px` : width
+    iframe.style.height = typeof height === 'number' ? `${height}px` : height
+    iframe.style.border = 'none'
+    iframe.setAttribute('allow', 'camera; microphone')
+    iframe.setAttribute('allowfullscreen', 'true')
+    return iframe
+  },
+
+  // Configura listener para mensagens do iframe
+  _setupMessageListener() {
+    this._messageHandler = (event) => {
+      // Ignora mensagens que nao sao da app
+      if (!event.data || event.data.source !== 'mkfashion-app') {
+        return
+      }
+
+      const { action, data } = event.data
+      this._log('Mensagem recebida:', action, data)
+
+      // Trata as acoes
+      switch (action) {
+        case 'close_request':
+          this.close()
+          break
+
+        case 'restart_request':
+          this.restart()
+          break
+
+        case 'ready':
+          this._log('App pronta', data)
+          this._triggerCallback('onReady', data)
+          break
+
+        case 'add_to_cart':
+          this._log('Adicionar ao carrinho', data)
+          this._triggerCallback('onAddToCart', {
+            identifier: this._config.identifier,
+            size: data?.size || null,
+            ...data
+          })
+          break
+
+        case 'generation_complete':
+          this._log('Geracao completa', data)
+          this._triggerCallback('onGenerationComplete', data)
+          break
+
+        case 'generation_error':
+          this._log('Erro na geracao', data)
+          this._triggerCallback('onError', data)
+          break
+
+        default:
+          this._log('Acao desconhecida:', action)
+      }
+    }
+
+    window.addEventListener('message', this._messageHandler)
+    this._log('Listener de mensagens ativado')
+  },
+
+  // Remove listener de mensagens
+  _removeMessageListener() {
+    if (this._messageHandler) {
+      window.removeEventListener('message', this._messageHandler)
+      this._messageHandler = null
+      this._log('Listener de mensagens removido')
+    }
+  }
+}
+
+// Disponibiliza globalmente
+if (typeof window !== 'undefined') {
+  window.mkfashion = mkfashion
+}

package/test.html

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Teste - mKFashion SDK</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      padding: 40px;
+      background: #f5f5f5;
+    }
+
+    h1 {
+      margin-bottom: 10px;
+      color: #333;
+    }
+
+    p {
+      color: #666;
+      margin-bottom: 30px;
+    }
+
+    .buttons {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 30px;
+    }
+
+    button {
+      padding: 12px 24px;
+      font-size: 16px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+
+    button:hover {
+      transform: scale(1.05);
+    }
+
+    .btn-primary {
+      background: #4F46E5;
+      color: white;
+    }
+
+    .btn-secondary {
+      background: #6B7280;
+      color: white;
+    }
+
+    .code-box {
+      margin-top: 20px;
+      padding: 20px;
+      background: #1e1e1e;
+      border-radius: 8px;
+      color: #d4d4d4;
+      font-family: monospace;
+      font-size: 14px;
+      overflow-x: auto;
+    }
+
+    .code-box .comment {
+      color: #6a9955;
+    }
+
+    .code-box .string {
+      color: #ce9178;
+    }
+
+    .code-box .keyword {
+      color: #569cd6;
+    }
+
+    .code-box .function {
+      color: #dcdcaa;
+    }
+
+    .events-log {
+      margin-top: 30px;
+      padding: 20px;
+      background: white;
+      border-radius: 8px;
+      border: 1px solid #e5e5e5;
+    }
+
+    .events-log h3 {
+      margin-bottom: 15px;
+      color: #333;
+    }
+
+    .events-log ul {
+      list-style: none;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    .events-log li {
+      padding: 8px 12px;
+      margin-bottom: 5px;
+      background: #f9f9f9;
+      border-radius: 4px;
+      font-family: monospace;
+      font-size: 13px;
+    }
+
+    .events-log li.ready {
+      border-left: 3px solid #22c55e;
+    }
+
+    .events-log li.close {
+      border-left: 3px solid #ef4444;
+    }
+
+    .events-log li.cart {
+      border-left: 3px solid #3b82f6;
+    }
+
+    .events-log li.generation {
+      border-left: 3px solid #a855f7;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>mKFashion SDK - Teste</h1>
+  <p>Clique no botao para testar o provador virtual</p>
+
+  <div class="buttons">
+    <button class="btn-primary" onclick="abrirModal()">Abrir Modal</button>
+    <button class="btn-secondary" onclick="mkfashion.close()">Fechar</button>
+    <button class="btn-secondary" onclick="mkfashion.restart()">Reiniciar</button>
+    <button class="btn-secondary" onclick="limparLogs()">Limpar Logs</button>
+  </div>
+
+  <div class="code-box">
+    <span class="comment">// 1. Instalar via CDN</span><br>
+    &lt;script src=<span class="string">"https://unpkg.com/mkfashion-sdk/src/mkfashion.js"</span>&gt;&lt;/script&gt;<br><br>
+
+    <span class="comment">// 2. Registrar callback do carrinho</span><br>
+    mkfashion.<span class="function">addToCart</span>(<span class="keyword">function</span>(payload) {<br>
+    &nbsp;&nbsp;<span class="keyword">console</span>.log(<span class="string">"Produto adicionado:"</span>, payload);<br>
+    });<br><br>
+
+    <span class="comment">// 3. Abrir o visualizador</span><br>
+    mkfashion.<span class="function">open</span>({<br>
+    &nbsp;&nbsp;type: <span class="string">'iframe'</span>,<br>
+    &nbsp;&nbsp;projectid: <span class="string">'gregory'</span>,<br>
+    &nbsp;&nbsp;identifier: <span class="string">'VEST-001-AZUL'</span>,<br>
+    &nbsp;&nbsp;width: <span class="keyword">400</span>,<br>
+    &nbsp;&nbsp;height: <span class="keyword">700</span><br>
+    });
+  </div>
+
+  <div class="events-log">
+    <h3>Eventos recebidos:</h3>
+    <ul id="eventsList">
+      <li style="color: #999;">Nenhum evento ainda...</li>
+    </ul>
+  </div>
+
+  <script src="src/mkfashion.js"></script>
+  <script>
+    // Ativa logs no console
+    mkfashion.debug = true
+
+    // Para testar local, mude a URL
+    mkfashion.appUrl = 'http://localhost:5173/'
+
+    // Funcao para adicionar evento na lista
+    function logEvent(type, message, data = null) {
+      const list = document.getElementById('eventsList')
+
+      // Remove mensagem inicial
+      if (list.children.length === 1 && list.children[0].style.color) {
+        list.innerHTML = ''
+      }
+
+      const li = document.createElement('li')
+      li.className = type
+      const time = new Date().toLocaleTimeString()
+      li.textContent = `[${time}] ${message}${data ? ': ' + JSON.stringify(data) : ''}`
+      list.insertBefore(li, list.firstChild)
+    }
+
+    // Registra callbacks (padrao mK3D)
+    mkfashion.addToCart(function(payload) {
+      logEvent('cart', 'Adicionar ao carrinho', payload)
+      alert(`Produto ${payload.identifier} tamanho ${payload.size} adicionado ao carrinho!`)
+    })
+
+    mkfashion.onReady(function(data) {
+      logEvent('ready', 'App pronta', data)
+    })
+
+    mkfashion.onClose(function() {
+      logEvent('close', 'Modal fechado')
+    })
+
+    mkfashion.onGenerationComplete(function(data) {
+      logEvent('generation', 'Geracao completa', data)
+    })
+
+    mkfashion.onError(function(data) {
+      logEvent('close', 'Erro', data)
+    })
+
+    function abrirModal() {
+      mkfashion.open({
+        type: 'iframe',
+        projectid: 'gregory',
+        identifier: 'VEST-001-AZUL',
+        width: 400,
+        height: 700
+      })
+
+      logEvent('ready', 'Modal aberto')
+    }
+
+    function limparLogs() {
+      document.getElementById('eventsList').innerHTML = '<li style="color: #999;">Nenhum evento ainda...</li>'
+    }
+  </script>
+</body>
+
+</html>