@promptui-lib/figma-parser 0.1.19 → 0.1.22

package/dist/parser/index.d.ts

@@ -1,10 +1,10 @@
-export { parseLayout, parseSizing, parseLayoutAndSizing } from './layout-parser.js';
+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';
-export { parsePosition, parseContainerPosition, hasAutoLayout } from './position-parser.js';
+export { parsePosition, parseContainerPosition, hasAutoLayout, isAbsolutelyPositioned } from './position-parser.js';
 export type { IPositionProperties } from './position-parser.js';
 export { parseNode, parseNodes, parseFrameName } from './node-parser.js';
 export type { IParseOptions } from './node-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,MAAM,oBAAoB,CAAC;AACpF,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,MAAM,sBAAsB,CAAC;AAC5F,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,6 +1,6 @@
-export { parseLayout, parseSizing, parseLayoutAndSizing } from './layout-parser.js';
-export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, parseBoxShadow } from './style-parser.js';
+export { parseLayout, parseSizing, parseLayoutAndSizing, parsePadding } from './layout-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 } from './position-parser.js';
+export { parsePosition, parseContainerPosition, hasAutoLayout, isAbsolutelyPositioned } from './position-parser.js';
 export { parseNode, parseNodes, parseFrameName } from './node-parser.js';
 export { detectSemanticTag, normalizeName, getSemanticAttributes } from './semantic-detector.js';

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

@@ -15,16 +15,22 @@ export interface ILayoutProperties {
     flex?: IStyleProperty;
     flexWrap?: IStyleProperty;
 }
+/**
+ * Parseia padding de um node (funciona com ou sem Auto Layout)
+ */
+export declare function parsePadding(node: IFigmaNode): IStyleProperty | null;
 /**
  * Parseia AutoLayout de um node
  */
 export declare function parseLayout(node: IFigmaNode): ILayoutProperties;
 /**
  * Parseia sizing de um node
+ * @param isRoot - indica se é o node raiz do componente
  */
-export declare function parseSizing(node: IFigmaNode): ILayoutProperties;
+export declare function parseSizing(node: IFigmaNode, isRoot?: boolean): ILayoutProperties;
 /**
  * Combina layout e sizing
+ * @param isRoot - indica se é o node raiz do componente
  */
-export declare function parseLayoutAndSizing(node: IFigmaNode): IStyleProperty[];
+export declare function parseLayoutAndSizing(node: IFigmaNode, isRoot?: boolean): IStyleProperty[];
 //# sourceMappingURL=layout-parser.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout-parser.d.ts","sourceRoot":"","sources":["../../src/parser/layout-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AA4BrE,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,CA2F/D;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,CAoE/D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,EAAE,CASvE"}
+{"version":3,"file":"layout-parser.d.ts","sourceRoot":"","sources":["../../src/parser/layout-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AA4BrE,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAuBpE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,CA2F/D;AAwBD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,GAAE,OAAe,GAAG,iBAAiB,CA+ExF;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,GAAE,OAAe,GAAG,cAAc,EAAE,CAShG"}

package/dist/parser/layout-parser.js

@@ -26,6 +26,24 @@ function formatPixels(value) {
     }
     return `${rounded}px`;
 }
+/**
+ * Parseia padding de um node (funciona com ou sem Auto Layout)
+ */
+export function parsePadding(node) {
+    const hasPadding = node.paddingTop ||
+        node.paddingRight ||
+        node.paddingBottom ||
+        node.paddingLeft;
+    if (!hasPadding) {
+        return null;
+    }
+    const paddingToken = generatePaddingToken(node.paddingTop ?? 0, node.paddingRight ?? 0, node.paddingBottom ?? 0, node.paddingLeft ?? 0);
+    return {
+        property: 'padding',
+        value: paddingToken,
+        token: paddingToken.startsWith('$') ? paddingToken : undefined,
+    };
+}
 /**
  * Parseia AutoLayout de um node
  */
@@ -102,11 +120,32 @@ export function parseLayout(node) {
     }
     return properties;
 }
+/**
+ * Detecta se o node é uma tela/página (root component que deve ocupar viewport)
+ */
+function isScreenNode(node) {
+    const name = node.name.toLowerCase().replace(/^#/, '');
+    const screenPatterns = /screen|page|view|layout|template|tela|pagina/i;
+    // Verifica se é uma tela pelo nome
+    if (screenPatterns.test(name)) {
+        return true;
+    }
+    // Verifica se tem dimensões típicas de tela (>= 320px width e >= 568px height)
+    const box = node.absoluteBoundingBox;
+    if (box && box.width >= 320 && box.height >= 568) {
+        // Se é um frame de nível superior com dimensões de tela
+        return true;
+    }
+    return false;
+}
 /**
  * Parseia sizing de um node
+ * @param isRoot - indica se é o node raiz do componente
  */
-export function parseSizing(node) {
+export function parseSizing(node, isRoot = false) {
     const properties = {};
+    // Se é o node raiz e é uma tela, usa viewport units
+    const isScreen = isRoot && isScreenNode(node);
     // Width
     if (node.layoutSizingHorizontal) {
         switch (node.layoutSizingHorizontal) {
@@ -126,17 +165,17 @@ export function parseSizing(node) {
                 if (node.absoluteBoundingBox?.width) {
                     properties.width = {
                         property: 'width',
-                        value: formatPixels(node.absoluteBoundingBox.width),
+                        value: isScreen ? '100vw' : formatPixels(node.absoluteBoundingBox.width),
                     };
                 }
                 break;
         }
     }
     else if (node.absoluteBoundingBox?.width) {
-        // Fallback: Se não tem layoutSizing mas tem dimensões, usa o tamanho absoluto
+        // Fallback: Se não tem layoutSizing mas tem dimensões
         properties.width = {
             property: 'width',
-            value: formatPixels(node.absoluteBoundingBox.width),
+            value: isScreen ? '100vw' : formatPixels(node.absoluteBoundingBox.width),
         };
     }
     // Height
@@ -158,27 +197,35 @@ export function parseSizing(node) {
                 if (node.absoluteBoundingBox?.height) {
                     properties.height = {
                         property: 'height',
-                        value: formatPixels(node.absoluteBoundingBox.height),
+                        value: isScreen ? '100vh' : formatPixels(node.absoluteBoundingBox.height),
                     };
                 }
                 break;
         }
     }
     else if (node.absoluteBoundingBox?.height) {
-        // Fallback: Se não tem layoutSizing mas tem dimensões, usa o tamanho absoluto
+        // Fallback: Se não tem layoutSizing mas tem dimensões
         properties.height = {
             property: 'height',
-            value: formatPixels(node.absoluteBoundingBox.height),
+            value: isScreen ? '100vh' : formatPixels(node.absoluteBoundingBox.height),
+        };
+    }
+    // Para screens, adiciona overflow hidden para evitar scroll
+    if (isScreen) {
+        properties.flex = {
+            property: 'overflow',
+            value: 'hidden',
         };
     }
     return properties;
 }
 /**
  * Combina layout e sizing
+ * @param isRoot - indica se é o node raiz do componente
  */
-export function parseLayoutAndSizing(node) {
+export function parseLayoutAndSizing(node, isRoot = false) {
     const layout = parseLayout(node);
-    const sizing = parseSizing(node);
+    const sizing = parseSizing(node, isRoot);
     const combined = { ...layout, ...sizing };
     return Object.values(combined).filter((prop) => prop !== undefined);
 }

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,EAMb,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;AAuND;;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

@@ -3,11 +3,11 @@
  * Parser principal que converte node do Figma em AST do componente
  */
 import { generateComponentName, generateFileName, generateBEMBlock, generateBEMElement, classifyComponent, extractBaseName, extractVariants, isComponentNode, } from '@promptui-lib/core';
-import { parseLayoutAndSizing, parseSizing } from './layout-parser.js';
+import { parseLayoutAndSizing, parseSizing, parsePadding } from './layout-parser.js';
 import { parseStyles } from './style-parser.js';
 import { parseTextStyles } from './text-parser.js';
 import { detectSemanticTag, normalizeName, getSemanticAttributes } from './semantic-detector.js';
-import { parsePosition, parseContainerPosition } from './position-parser.js';
+import { parsePosition, parseContainerPosition, hasAutoLayout } from './position-parser.js';
 /**
  * Parseia o nome do frame para extrair informações
  */
@@ -32,6 +32,204 @@ export function parseFrameName(name) {
         extractedProps,
     };
 }
+/**
+ * Verifica se um node deve ser exportado como asset (SVG/imagem)
+ * Tipos que são gráficos vetoriais ou ícones devem ser exportados como SVG
+ */
+function isAssetNode(node) {
+    // Tipos de nodes que são gráficos vetoriais
+    const vectorTypes = ['VECTOR', 'BOOLEAN_OPERATION', 'STAR', 'LINE', 'ELLIPSE', 'REGULAR_POLYGON'];
+    if (vectorTypes.includes(node.type)) {
+        return true;
+    }
+    // Verifica se o nome indica que é um ícone
+    const name = node.name.toLowerCase();
+    if (/^(icon|ico|icone|svg)[-_]?/i.test(name) || name.includes('-icon') || name.includes('_icon')) {
+        return true;
+    }
+    // Frames pequenos (< 64x64) com fills complexos podem ser ícones
+    if (node.type === 'FRAME' && node.absoluteBoundingBox) {
+        const { width, height } = node.absoluteBoundingBox;
+        if (width <= 64 && height <= 64) {
+            // Verifica se tem apenas elementos vetoriais como filhos
+            const hasOnlyVectors = node.children?.every((child) => vectorTypes.includes(child.type) || child.type === 'GROUP');
+            if (hasOnlyVectors && node.children && node.children.length > 0) {
+                return true;
+            }
+        }
+    }
+    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
+ */
+function generateAssetFileName(nodeName, blockName) {
+    const cleanName = nodeName
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+    return `${blockName}-${cleanName || 'icon'}`;
+}
 /**
  * Converte um node em elemento JSX
  * Se o filho for um componente (marcado com #), retorna IJSXComponent em vez de JSX inline
@@ -47,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.)
@@ -74,6 +383,22 @@ function nodeToJSX(node, blockName, depth = 0, parentNode, usedTags) {
                     fileName: childFileName,
                 });
             }
+            else if (isAssetNode(child)) {
+                // Se é um asset (ícone/vetor), cria referência para exportação
+                const childNormalizedName = normalizeName(child.name);
+                const childElementName = childNormalizedName.replace(/\s+/g, '-');
+                const childClassName = generateBEMElement(blockName, childElementName);
+                children.push({
+                    type: 'asset',
+                    nodeId: child.id,
+                    fileName: generateAssetFileName(child.name, blockName),
+                    format: 'svg',
+                    className: childClassName,
+                    alt: childNormalizedName,
+                    width: child.absoluteBoundingBox?.width,
+                    height: child.absoluteBoundingBox?.height,
+                });
+            }
             else {
                 children.push(nodeToJSX(child, blockName, depth + 1, node, tagsSet));
             }
@@ -110,12 +435,20 @@ function collectStyles(node, blockName, depth = 0, parentNode) {
     // Para GROUP: extrai sizing e position: relative (container sem flex)
     // Para outros tipos (RECTANGLE, etc): extrai apenas sizing (width, height)
     if (node.type === 'FRAME' || node.type === 'COMPONENT' || node.type === 'INSTANCE') {
-        properties.push(...parseLayoutAndSizing(node));
+        properties.push(...parseLayoutAndSizing(node, isRoot));
         // Se é um container sem Auto Layout, adiciona position: relative
         const containerPos = parseContainerPosition(node);
         if (containerPos) {
             properties.push(containerPos);
         }
+        // Extrai padding mesmo se não tem Auto Layout (para elementos como inputs)
+        // parseLayoutAndSizing já extrai padding quando tem Auto Layout, mas não quando não tem
+        if (!hasAutoLayout(node)) {
+            const paddingProp = parsePadding(node);
+            if (paddingProp) {
+                properties.push(paddingProp);
+            }
+        }
     }
     else if (node.type === 'GROUP') {
         // GROUPs são containers visuais - precisam de position: relative e sizing

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

@@ -16,6 +16,11 @@ export interface IPositionProperties {
  * Verifica se um node pai tem Auto Layout
  */
 export declare function hasAutoLayout(node: IFigmaNode): boolean;
+/**
+ * Verifica se um node está posicionado absolutamente
+ * (mesmo dentro de um container com Auto Layout)
+ */
+export declare function isAbsolutelyPositioned(node: IFigmaNode): boolean;
 /**
  * Parseia constraints e posição de um node
  */

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

@@ -1 +1 @@
-{"version":3,"file":"position-parser.d.ts","sourceRoot":"","sources":["../../src/parser/position-parser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAgB,MAAM,oBAAoB,CAAC;AAEnF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAoBD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAEvD;AAwBD;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,UAAU,GACtB,cAAc,EAAE,CAmIlB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAM/D;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAQ9E"}
+{"version":3,"file":"position-parser.d.ts","sourceRoot":"","sources":["../../src/parser/position-parser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAgB,MAAM,oBAAoB,CAAC;AAEnF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAoBD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAEvD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAEhE;AAwBD;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,UAAU,GACtB,cAAc,EAAE,CA6IlB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAa/D;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAQ9E"}

package/dist/parser/position-parser.js

@@ -25,6 +25,13 @@ function formatPixels(value) {
 export function hasAutoLayout(node) {
     return node.layoutMode !== undefined && node.layoutMode !== 'NONE';
 }
+/**
+ * Verifica se um node está posicionado absolutamente
+ * (mesmo dentro de um container com Auto Layout)
+ */
+export function isAbsolutelyPositioned(node) {
+    return node.layoutPositioning === 'ABSOLUTE';
+}
 /**
  * Calcula a posição relativa de um filho em relação ao pai
  */
@@ -46,8 +53,16 @@ function calculateRelativePosition(child, parent) {
  */
 export function parsePosition(node, parentNode) {
     const properties = [];
-    // Se não tem pai ou o pai tem Auto Layout, não precisa de posicionamento absoluto
-    if (!parentNode || hasAutoLayout(parentNode)) {
+    if (!parentNode) {
+        return properties;
+    }
+    // Verifica se o node precisa de posicionamento absoluto:
+    // 1. O pai NÃO tem Auto Layout, OU
+    // 2. O node tem layoutPositioning: 'ABSOLUTE' (absoluto dentro de Auto Layout)
+    const parentHasAutoLayout = hasAutoLayout(parentNode);
+    const nodeIsAbsolute = isAbsolutelyPositioned(node);
+    if (parentHasAutoLayout && !nodeIsAbsolute) {
+        // Pai tem Auto Layout e o node não é absoluto - não precisa de posicionamento
         return properties;
     }
     // Calcula posição relativa
@@ -56,7 +71,7 @@ export function parsePosition(node, parentNode) {
         return properties;
     }
     const constraints = node.constraints;
-    // Se é um elemento dentro de um container sem Auto Layout, usa posição absoluta
+    // Elemento precisa de posição absoluta
     properties.push({
         property: 'position',
         value: 'absolute',
@@ -176,11 +191,16 @@ export function parsePosition(node, parentNode) {
  * (necessário quando tem filhos com position: absolute)
  */
 export function needsRelativePosition(node) {
-    // Se não tem Auto Layout e tem filhos, precisa de relative
-    if (!hasAutoLayout(node) && node.children && node.children.length > 0) {
+    if (!node.children || node.children.length === 0) {
+        return false;
+    }
+    // Se não tem Auto Layout, precisa de relative (todos os filhos serão absolutos)
+    if (!hasAutoLayout(node)) {
         return true;
     }
-    return false;
+    // Se tem Auto Layout, verifica se algum filho tem layoutPositioning: 'ABSOLUTE'
+    const hasAbsoluteChild = node.children.some((child) => isAbsolutelyPositioned(child));
+    return hasAbsoluteChild;
 }
 /**
  * Parseia position: relative para containers sem Auto Layout

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.19",
+  "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.19"
+    "@promptui-lib/core": "0.1.22"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",