@promptui-lib/figma-parser 0.1.20 → 0.1.22

package/dist/parser/index.d.ts

@@ -1,6 +1,6 @@
 export { parseLayout, parseSizing, parseLayoutAndSizing, parsePadding } from './layout-parser.js';
 export type { ILayoutProperties } from './layout-parser.js';
-export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, parseBoxShadow } from './style-parser.js';
+export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, parseBoxShadow, parseOverflow, parseTransform } from './style-parser.js';
 export type { IStyleProperties } from './style-parser.js';
 export { parseTextStyles, extractTextContent } from './text-parser.js';
 export type { ITextProperties } from './text-parser.js';

package/dist/parser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClG,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACtH,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACpH,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClG,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACrJ,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACpH,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/parser/index.js

@@ -1,5 +1,5 @@
 export { parseLayout, parseSizing, parseLayoutAndSizing, parsePadding } from './layout-parser.js';
-export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, parseBoxShadow } from './style-parser.js';
+export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, parseBoxShadow, parseOverflow, parseTransform } from './style-parser.js';
 export { parseTextStyles, extractTextContent } from './text-parser.js';
 export { parsePosition, parseContainerPosition, hasAutoLayout, isAbsolutelyPositioned } from './position-parser.js';
 export { parseNode, parseNodes, parseFrameName } from './node-parser.js';

package/dist/parser/node-parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node-parser.d.ts","sourceRoot":"","sources":["../../src/parser/node-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EAOb,cAAc,EACd,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAiB5B,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAwB7D;AA+RD;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,UAAU,EAChB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CA6Cf;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,UAAU,EAAE,EACnB,OAAO,GAAE,aAAkB,GAC1B,aAAa,EAAE,CAEjB"}
+{"version":3,"file":"node-parser.d.ts","sourceRoot":"","sources":["../../src/parser/node-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EAOb,cAAc,EACd,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAiB5B,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAwB7D;AAqmBD;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,UAAU,EAChB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CA6Cf;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,UAAU,EAAE,EACnB,OAAO,GAAE,aAAkB,GAC1B,aAAa,EAAE,CAEjB"}

package/dist/parser/node-parser.js

@@ -60,6 +60,166 @@ function isAssetNode(node) {
     }
     return false;
 }
+/**
+ * Patterns para detectar elementos de formulário simulados
+ */
+const FORM_ELEMENT_PATTERNS = {
+    // Input de texto (uma linha)
+    input: /^(input|text-?input|entrada|campo-texto|field-input|input-field)$/i,
+    // Textarea (múltiplas linhas)
+    textarea: /^(textarea|text-?area|area-?texto|multiline|multi-line|mensagem-input|message-input)$/i,
+    // Select/Dropdown
+    select: /^(select|dropdown|combo-?box|picker|seletor|selecao|lista-selecao|select-input)$/i,
+    // Checkbox
+    checkbox: /^(checkbox|check-?box|caixa-?selecao|toggle|switch)$/i,
+    // Radio button
+    radio: /^(radio|radio-?button|opcao-?radio|radio-?input)$/i,
+    // Button
+    button: /^(button|btn|botao|submit|cancel|action|cta)$/i,
+    // Label
+    label: /^(label|rotulo|field-?label|input-?label)$/i,
+};
+/**
+ * Verifica se um node é um frame válido (FRAME, INSTANCE ou COMPONENT)
+ */
+function isValidFrameNode(node) {
+    return node.type === 'FRAME' || node.type === 'INSTANCE' || node.type === 'COMPONENT';
+}
+/**
+ * Procura por texto nos filhos (pode estar em qualquer nível)
+ */
+function hasTextChild(node) {
+    if (node.type === 'TEXT')
+        return true;
+    if (node.children) {
+        return node.children.some(child => hasTextChild(child));
+    }
+    return false;
+}
+/**
+ * Extrai o primeiro texto encontrado nos filhos
+ */
+function extractFirstText(node) {
+    function findFirstText(n) {
+        if (n.type === 'TEXT' && n.characters) {
+            return n.characters;
+        }
+        if (n.children) {
+            for (const child of n.children) {
+                const text = findFirstText(child);
+                if (text)
+                    return text;
+            }
+        }
+        return null;
+    }
+    return findFirstText(node) || '';
+}
+/**
+ * Extrai todos os textos encontrados nos filhos (para opções de select)
+ */
+function extractAllTexts(node) {
+    const texts = [];
+    function findTexts(n) {
+        if (n.type === 'TEXT' && n.characters) {
+            texts.push(n.characters);
+        }
+        if (n.children) {
+            for (const child of n.children) {
+                findTexts(child);
+            }
+        }
+    }
+    findTexts(node);
+    return texts;
+}
+/**
+ * Detecta qual tipo de elemento de formulário um node representa
+ */
+function detectSimulatedFormElement(node) {
+    if (!isValidFrameNode(node)) {
+        return null;
+    }
+    const name = node.name.toLowerCase().trim();
+    // Verifica cada pattern
+    if (FORM_ELEMENT_PATTERNS.textarea.test(name)) {
+        return 'textarea';
+    }
+    if (FORM_ELEMENT_PATTERNS.select.test(name)) {
+        return 'select';
+    }
+    if (FORM_ELEMENT_PATTERNS.checkbox.test(name)) {
+        return 'checkbox';
+    }
+    if (FORM_ELEMENT_PATTERNS.radio.test(name)) {
+        return 'radio';
+    }
+    if (FORM_ELEMENT_PATTERNS.button.test(name)) {
+        // Só é button se tiver texto dentro
+        if (hasTextChild(node)) {
+            return 'button';
+        }
+    }
+    if (FORM_ELEMENT_PATTERNS.label.test(name)) {
+        // Só é label se tiver texto direto como filho
+        if (node.children?.some(child => child.type === 'TEXT')) {
+            return 'label';
+        }
+    }
+    if (FORM_ELEMENT_PATTERNS.input.test(name)) {
+        // Só é input se tiver texto dentro (placeholder)
+        if (hasTextChild(node)) {
+            return 'input';
+        }
+    }
+    return null;
+}
+/**
+ * Detecta o tipo específico de input baseado no contexto
+ */
+function detectInputType(node, parentNode) {
+    const nodeName = node.name.toLowerCase();
+    const parentName = parentNode?.name.toLowerCase() || '';
+    const combinedContext = `${parentName} ${nodeName}`;
+    // Detecta por palavras-chave no contexto
+    if (combinedContext.includes('senha') || combinedContext.includes('password')) {
+        return 'password';
+    }
+    if (combinedContext.includes('email') || combinedContext.includes('e-mail')) {
+        return 'email';
+    }
+    if (combinedContext.includes('busca') || combinedContext.includes('search') || combinedContext.includes('pesquisa')) {
+        return 'search';
+    }
+    if (combinedContext.includes('telefone') || combinedContext.includes('phone') || combinedContext.includes('tel')) {
+        return 'tel';
+    }
+    if (combinedContext.includes('numero') || combinedContext.includes('number') || combinedContext.includes('quantidade')) {
+        return 'number';
+    }
+    if (combinedContext.includes('url') || combinedContext.includes('website') || combinedContext.includes('site')) {
+        return 'url';
+    }
+    if (combinedContext.includes('data') || combinedContext.includes('date')) {
+        return 'date';
+    }
+    return 'text';
+}
+/**
+ * Detecta o tipo de button baseado no contexto
+ */
+function detectButtonType(node) {
+    const name = node.name.toLowerCase();
+    const text = extractFirstText(node).toLowerCase();
+    const context = `${name} ${text}`;
+    if (context.includes('submit') || context.includes('enviar') || context.includes('entrar') || context.includes('login') || context.includes('cadastrar')) {
+        return 'submit';
+    }
+    if (context.includes('reset') || context.includes('limpar') || context.includes('cancelar')) {
+        return 'reset';
+    }
+    return 'button';
+}
 /**
  * Gera nome seguro para arquivo de asset
  */
@@ -85,6 +245,117 @@ function nodeToJSX(node, blockName, depth = 0, parentNode, usedTags) {
     const className = isRoot
         ? blockName
         : generateBEMElement(blockName, elementName);
+    // ============================================================
+    // DETECÇÃO DE ELEMENTOS DE FORMULÁRIO SIMULADOS DO FIGMA
+    // Frames que representam inputs, selects, textareas, etc.
+    // ============================================================
+    const formElement = detectSimulatedFormElement(node);
+    if (formElement) {
+        switch (formElement) {
+            case 'input': {
+                const placeholder = extractFirstText(node);
+                const inputType = detectInputType(node, parentNode);
+                const inputProps = { type: inputType };
+                if (placeholder) {
+                    inputProps['placeholder'] = placeholder;
+                }
+                return {
+                    tag: 'input',
+                    className,
+                    props: inputProps,
+                    children: [],
+                    selfClosing: true,
+                };
+            }
+            case 'textarea': {
+                const placeholder = extractFirstText(node);
+                const textareaProps = { rows: '4' };
+                if (placeholder) {
+                    textareaProps['placeholder'] = placeholder;
+                }
+                return {
+                    tag: 'textarea',
+                    className,
+                    props: textareaProps,
+                    children: [],
+                    selfClosing: false,
+                };
+            }
+            case 'select': {
+                // Extrai opções do select (textos dentro dos filhos)
+                const options = extractAllTexts(node);
+                const selectChildren = [];
+                // Adiciona placeholder como primeira opção desabilitada
+                if (options.length > 0) {
+                    selectChildren.push({
+                        tag: 'option',
+                        className: '',
+                        props: { value: '', disabled: 'true', selected: 'true' },
+                        children: [{ type: 'text', value: options[0] }],
+                        selfClosing: false,
+                    });
+                    // Adiciona outras opções
+                    for (let i = 1; i < options.length; i++) {
+                        selectChildren.push({
+                            tag: 'option',
+                            className: '',
+                            props: { value: options[i].toLowerCase().replace(/\s+/g, '-') },
+                            children: [{ type: 'text', value: options[i] }],
+                            selfClosing: false,
+                        });
+                    }
+                }
+                return {
+                    tag: 'select',
+                    className,
+                    props: {},
+                    children: selectChildren,
+                    selfClosing: false,
+                };
+            }
+            case 'checkbox': {
+                const labelText = extractFirstText(node);
+                return {
+                    tag: 'input',
+                    className,
+                    props: { type: 'checkbox' },
+                    children: [],
+                    selfClosing: true,
+                };
+            }
+            case 'radio': {
+                return {
+                    tag: 'input',
+                    className,
+                    props: { type: 'radio' },
+                    children: [],
+                    selfClosing: true,
+                };
+            }
+            case 'button': {
+                const buttonText = extractFirstText(node);
+                const buttonType = detectButtonType(node);
+                return {
+                    tag: 'button',
+                    className,
+                    props: { type: buttonType },
+                    children: [{ type: 'text', value: buttonText }],
+                    selfClosing: false,
+                };
+            }
+            case 'label': {
+                const textChild = node.children?.find(child => child.type === 'TEXT');
+                const labelText = textChild?.characters || '';
+                return {
+                    tag: 'label',
+                    className,
+                    props: {},
+                    children: [{ type: 'text', value: labelText }],
+                    selfClosing: false,
+                };
+            }
+        }
+    }
     // Detecta a tag HTML semântica apropriada (passa usedTags para evitar duplicação de <main>)
     const tag = detectSemanticTag(node, parentNode, depth, tagsSet);
     // Obtém atributos semânticos (href, type, etc.)

package/dist/parser/semantic-detector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-detector.d.ts","sourceRoot":"","sources":["../../src/parser/semantic-detector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAmQrD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAalD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,UAAU,EACvB,MAAM,GAAE,MAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GACrB,MAAM,CAoLR;AA+ID;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,MAAM,EACX,cAAc,EAAE,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgLxB"}
+{"version":3,"file":"semantic-detector.d.ts","sourceRoot":"","sources":["../../src/parser/semantic-detector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAkRrD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAalD;AA0DD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,UAAU,EACvB,MAAM,GAAE,MAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GACrB,MAAM,CA4MR;AA+ID;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,MAAM,EACX,cAAc,EAAE,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgLxB"}

package/dist/parser/semantic-detector.js

@@ -173,13 +173,14 @@ const NAME_TRANSLATIONS = {
 };
 /**
  * Patterns para detectar tipos de elementos
+ * NOTA: Usamos patterns mais flexíveis para capturar variações comuns no Figma
  */
 const SEMANTIC_PATTERNS = {
     // Títulos
     heading: /^(title|heading|h[1-6]|titulo|cabecalho|header-text|headline)/i,
     subheading: /^(subtitle|subheading|subtitulo|sub-title)/i,
-    // Botões
-    button: /^(btn|button|cta|submit|cancel|action|botao|icon-button)/i,
+    // Botões - detecta em qualquer posição do nome
+    button: /(^btn$|^button$|^cta$|^submit$|^cancel$|^action$|^botao$|icon-button|-btn$|-button$)/i,
     // Links
     link: /(link|anchor|href|ancora|forgot|esqueci|saiba-mais|ver-mais|leia-mais)/i,
     // Formulários
@@ -191,15 +192,23 @@ const SEMANTIC_PATTERNS = {
     checkbox: /^(checkbox|check-box|caixa-selecao|toggle)/i,
     radio: /^(radio|radio-button|opcao-radio)/i,
     fieldset: /^(fieldset|field-group|grupo-campos)/i,
-    // Navegação
-    nav: /^(nav|navigation|navbar|menu|navegacao|breadcrumb|tabs|pagination)/i,
-    // Seções estruturais
-    header: /^(header|cabecalho|top-bar|topbar|app-bar)/i,
-    footer: /^(footer|rodape|bottom-bar|bottom-nav)/i,
-    main: /^(main|content|principal|conteudo|page-content)/i,
-    section: /^(section|secao|block|grupo)/i,
-    article: /^(article|artigo|post|card|blog-post|news)/i,
-    aside: /^(aside|sidebar|lateral|barra-lateral|complementar)/i,
+    // Navegação - expandido para mais variações
+    nav: /^(nav|navigation|navbar|menu|navegacao|breadcrumb|tabs|pagination|nav-bar|top-nav|main-nav|side-nav)/i,
+    // Seções estruturais - EXPANDIDO para detectar mais variações
+    // Header: topo da página, barra superior, cabeçalho
+    header: /^(header|cabecalho|top-?bar|topbar|app-?bar|page-?header|site-?header|main-?header)/i,
+    // Footer: rodapé, barra inferior
+    footer: /^(footer|rodape|bottom-?bar|bottom-?nav|page-?footer|site-?footer|main-?footer)/i,
+    // Main: conteúdo principal da página
+    main: /^(main|content|principal|conteudo|page-?content|main-?content|body-?content|central|centro)/i,
+    // Section: seções genéricas
+    section: /^(section|secao|block|grupo|area|zone|region|wrapper|container)$/i,
+    // Article: artigos, posts, cards de conteúdo
+    article: /^(article|artigo|post|blog-?post|news|noticia|story)/i,
+    // Aside: conteúdo lateral, complementar
+    aside: /^(aside|sidebar|lateral|barra-?lateral|complementar|side-?panel|side-?content)/i,
+    // Container/Wrapper - novo pattern para containers genéricos
+    container: /^(container|wrapper|box|caixa|holder|frame|panel|painel|card-?shadow|card-?container)/i,
     // Imagens e mídia
     image: /^(image|img|photo|picture|imagem|foto|thumbnail|banner)/i,
     avatar: /^(avatar|profile-pic|user-image|foto-perfil)/i,
@@ -249,6 +258,47 @@ export function normalizeName(name) {
     });
     return translatedWords.join('-');
 }
+/**
+ * Detecta se um node é um elemento estrutural baseado em sua posição e características
+ * Isso complementa a detecção por nome quando o designer não nomeia corretamente
+ */
+function detectStructuralByPosition(node, parentNode, depth = 0) {
+    // Só detecta por posição em níveis próximos do root (depth 1 ou 2)
+    if (depth > 2 || !parentNode) {
+        return null;
+    }
+    const siblings = parentNode.children;
+    if (!siblings || siblings.length < 2) {
+        return null;
+    }
+    // Encontra índice do node atual entre os irmãos visíveis
+    const visibleSiblings = siblings.filter(s => s.visible !== false && !s.name.startsWith('_'));
+    const nodeIndex = visibleSiblings.findIndex(s => s.id === node.id);
+    if (nodeIndex === -1) {
+        return null;
+    }
+    // Verifica características do node
+    const box = node.absoluteBoundingBox;
+    const parentBox = parentNode.absoluteBoundingBox;
+    if (!box || !parentBox) {
+        return null;
+    }
+    // Altura relativa ao pai
+    const heightRatio = box.height / parentBox.height;
+    // Primeiro elemento visível com altura pequena (< 15% do pai) = possível header
+    if (nodeIndex === 0 && heightRatio < 0.15) {
+        return 'header';
+    }
+    // Último elemento visível com altura pequena (< 10% do pai) = possível footer
+    if (nodeIndex === visibleSiblings.length - 1 && heightRatio < 0.10) {
+        return 'footer';
+    }
+    // Elemento do meio com maior altura = possível main
+    if (nodeIndex > 0 && nodeIndex < visibleSiblings.length - 1 && heightRatio > 0.5) {
+        return 'main';
+    }
+    return null;
+}
 /**
  * Detecta a tag HTML semântica apropriada
  * @param usedTags - Set de tags já usadas na hierarquia (para evitar duplicação de <main>)
@@ -331,6 +381,12 @@ export function detectSemanticTag(node, parentNode, _depth = 0, usedTags) {
     if (SEMANTIC_PATTERNS.aside.test(normalizedName)) {
         return 'aside';
     }
+    // Container - mapeia para div mas com semântica de container
+    // Containers são divs que agrupam conteúdo, não têm tag semântica específica
+    // mas são importantes para layout
+    if (SEMANTIC_PATTERNS.container.test(normalizedName)) {
+        return 'div';
+    }
     // Mídia
     if (SEMANTIC_PATTERNS.figure.test(normalizedName)) {
         return 'figure';
@@ -393,6 +449,22 @@ export function detectSemanticTag(node, parentNode, _depth = 0, usedTags) {
     if (SEMANTIC_PATTERNS.alert.test(normalizedName)) {
         return 'div'; // com role="alert"
     }
+    // Tenta detectar por posição/estrutura se não encontrou por nome
+    const structuralTag = detectStructuralByPosition(node, parentNode, _depth);
+    if (structuralTag) {
+        // Verifica se já existe a tag (evita duplicação)
+        if (structuralTag === 'main' && usedTags?.has('main')) {
+            return 'section';
+        }
+        if (structuralTag === 'header' && usedTags?.has('header')) {
+            return 'div';
+        }
+        if (structuralTag === 'footer' && usedTags?.has('footer')) {
+            return 'div';
+        }
+        usedTags?.add(structuralTag);
+        return structuralTag;
+    }
     // Default
     return 'div';
 }

package/dist/parser/style-parser.d.ts

@@ -32,6 +32,15 @@ export declare function parseBoxShadow(node: IFigmaNode): IStyleProperty | null;
  * Parseia opacity de um node
  */
 export declare function parseOpacity(node: IFigmaNode): IStyleProperty | null;
+/**
+ * Parseia overflow de um node (clipsContent)
+ */
+export declare function parseOverflow(node: IFigmaNode): IStyleProperty | null;
+/**
+ * Parseia rotation/transform de um node
+ * A rotação vem em graus e precisa ser convertida para CSS
+ */
+export declare function parseTransform(node: IFigmaNode): IStyleProperty | null;
 /**
  * Parseia todos os estilos visuais de um node
  */

package/dist/parser/style-parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-parser.d.ts","sourceRoot":"","sources":["../../src/parser/style-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,UAAU,EAIV,cAAc,EACf,MAAM,oBAAoB,CAAC;AAmB5B,MAAM,WAAW,gBAAgB;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAWD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CA2B5E;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAwBnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAyBzE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAuCtE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAWpE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,EAAE,CAmB9D"}
+{"version":3,"file":"style-parser.d.ts","sourceRoot":"","sources":["../../src/parser/style-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,UAAU,EAIV,cAAc,EACf,MAAM,oBAAoB,CAAC;AAmB5B,MAAM,WAAW,gBAAgB;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAWD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CA2B5E;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAwBnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAyBzE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAuCtE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAWpE;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CASrE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CA+BtE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,EAAE,CAyB9D"}

package/dist/parser/style-parser.js

@@ -138,6 +138,50 @@ export function parseOpacity(node) {
     }
     return null;
 }
+/**
+ * Parseia overflow de um node (clipsContent)
+ */
+export function parseOverflow(node) {
+    if (node.clipsContent === true) {
+        return {
+            property: 'overflow',
+            value: 'hidden',
+        };
+    }
+    return null;
+}
+/**
+ * Parseia rotation/transform de um node
+ * A rotação vem em graus e precisa ser convertida para CSS
+ */
+export function parseTransform(node) {
+    // Verifica se tem rotação direta
+    if (node.rotation !== undefined && node.rotation !== 0) {
+        // Figma usa graus, CSS também
+        const degrees = roundPixelValue(node.rotation);
+        return {
+            property: 'transform',
+            value: `rotate(${degrees}deg)`,
+        };
+    }
+    // Verifica se tem relativeTransform com rotação
+    // A matriz 2D [[a, b, tx], [c, d, ty]] onde a rotação pode ser extraída de a,b,c,d
+    if (node.relativeTransform) {
+        const [[a, b], [c, d]] = node.relativeTransform;
+        // Calcula ângulo de rotação a partir da matriz
+        // rotation = atan2(b, a) em radianos
+        const radians = Math.atan2(b, a);
+        const degrees = radians * (180 / Math.PI);
+        // Só aplica se houver rotação significativa (> 0.1 grau)
+        if (Math.abs(degrees) > 0.1) {
+            return {
+                property: 'transform',
+                value: `rotate(${roundPixelValue(degrees)}deg)`,
+            };
+        }
+    }
+    return null;
+}
 /**
  * Parseia todos os estilos visuais de um node
  */
@@ -158,5 +202,11 @@ export function parseStyles(node) {
     const opacity = parseOpacity(node);
     if (opacity)
         properties.push(opacity);
+    const overflow = parseOverflow(node);
+    if (overflow)
+        properties.push(overflow);
+    const transform = parseTransform(node);
+    if (transform)
+        properties.push(transform);
     return properties;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/figma-parser",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "private": false,
   "description": "Figma API client and parser for PromptUI",
   "license": "UNLICENSED",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "dependencies": {
-    "@promptui-lib/core": "0.1.20"
+    "@promptui-lib/core": "0.1.22"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",