@promptui-lib/figma-parser 0.1.20 → 0.1.23

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/layout-parser.d.ts

@@ -14,6 +14,7 @@ export interface ILayoutProperties {
     height?: IStyleProperty;
     flex?: IStyleProperty;
     flexWrap?: IStyleProperty;
+    flexShrink?: IStyleProperty;
 }
 /**
  * Parseia padding de um node (funciona com ou sem Auto Layout)
@@ -26,11 +27,13 @@ export declare function parseLayout(node: IFigmaNode): ILayoutProperties;
 /**
  * Parseia sizing de um node
  * @param isRoot - indica se é o node raiz do componente
+ * @param parentHasAutoLayout - indica se o pai tem Auto Layout (para aplicar flex-shrink)
  */
-export declare function parseSizing(node: IFigmaNode, isRoot?: boolean): ILayoutProperties;
+export declare function parseSizing(node: IFigmaNode, isRoot?: boolean, parentHasAutoLayout?: boolean): ILayoutProperties;
 /**
  * Combina layout e sizing
  * @param isRoot - indica se é o node raiz do componente
+ * @param parentHasAutoLayout - indica se o pai tem Auto Layout
  */
-export declare function parseLayoutAndSizing(node: IFigmaNode, isRoot?: boolean): IStyleProperty[];
+export declare function parseLayoutAndSizing(node: IFigmaNode, isRoot?: boolean, parentHasAutoLayout?: 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,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"}
+{"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;IAC1B,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;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;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,GAAE,OAAe,EAAE,mBAAmB,GAAE,OAAe,GAAG,iBAAiB,CA+F9H;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,GAAE,OAAe,EAAE,mBAAmB,GAAE,OAAe,GAAG,cAAc,EAAE,CAStI"}

package/dist/parser/layout-parser.js

@@ -141,11 +141,17 @@ function isScreenNode(node) {
 /**
  * Parseia sizing de um node
  * @param isRoot - indica se é o node raiz do componente
+ * @param parentHasAutoLayout - indica se o pai tem Auto Layout (para aplicar flex-shrink)
  */
-export function parseSizing(node, isRoot = false) {
+export function parseSizing(node, isRoot = false, parentHasAutoLayout = false) {
     const properties = {};
     // Se é o node raiz e é uma tela, usa viewport units
     const isScreen = isRoot && isScreenNode(node);
+    // Verifica se precisa de flex-shrink: 0 (quando tem sizing HUG ou FIXED dentro de flex)
+    const needsFlexShrink = parentHasAutoLayout && (node.layoutSizingHorizontal === 'HUG' ||
+        node.layoutSizingHorizontal === 'FIXED' ||
+        node.layoutSizingVertical === 'HUG' ||
+        node.layoutSizingVertical === 'FIXED');
     // Width
     if (node.layoutSizingHorizontal) {
         switch (node.layoutSizingHorizontal) {
@@ -217,15 +223,23 @@ export function parseSizing(node, isRoot = false) {
             value: 'hidden',
         };
     }
+    // Adiciona flex-shrink: 0 quando necessário
+    if (needsFlexShrink) {
+        properties.flexShrink = {
+            property: 'flex-shrink',
+            value: '0',
+        };
+    }
     return properties;
 }
 /**
  * Combina layout e sizing
  * @param isRoot - indica se é o node raiz do componente
+ * @param parentHasAutoLayout - indica se o pai tem Auto Layout
  */
-export function parseLayoutAndSizing(node, isRoot = false) {
+export function parseLayoutAndSizing(node, isRoot = false, parentHasAutoLayout = false) {
     const layout = parseLayout(node);
-    const sizing = parseSizing(node, isRoot);
+    const sizing = parseSizing(node, isRoot, parentHasAutoLayout);
     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,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;AAulBD;;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,145 @@ function isAssetNode(node) {
     }
     return false;
 }
+/**
+ * Patterns para detectar elementos de formulário com prefixo explícito $tipo:nome
+ * O usuário deve marcar explicitamente os elementos para conversão
+ */
+const FORM_ELEMENT_PREFIX_PATTERN = /^\$(input|textarea|select|checkbox|radio|button|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
+ *
+ * IMPORTANTE: A detecção só acontece quando o nome tem prefixo explícito:
+ *   $input:nome, $textarea:nome, $select:nome, etc.
+ *
+ * Isso preserva a estrutura visual do Figma por padrão.
+ */
+function detectSimulatedFormElement(node) {
+    if (!isValidFrameNode(node)) {
+        return null;
+    }
+    const name = node.name.trim();
+    // Verifica se tem prefixo explícito $tipo:nome
+    const match = name.match(FORM_ELEMENT_PREFIX_PATTERN);
+    if (!match) {
+        // Sem prefixo explícito = não é um form element
+        return null;
+    }
+    const elementType = match[1].toLowerCase();
+    return elementType;
+}
+/**
+ * Extrai o nome limpo do node (remove prefixos especiais como $input:, #, etc.)
+ */
+function extractCleanName(name) {
+    // Remove prefixo de form element $tipo:
+    let clean = name.replace(FORM_ELEMENT_PREFIX_PATTERN, '');
+    // Remove prefixo de exportação #
+    clean = clean.replace(/^#/, '');
+    // Remove prefixo interno _
+    clean = clean.replace(/^_/, '');
+    return clean.trim();
+}
+/**
+ * Detecta o tipo específico de input baseado no contexto
+ */
+function detectInputType(node, parentNode) {
+    const nodeName = extractCleanName(node.name).toLowerCase();
+    const parentName = parentNode ? extractCleanName(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 = extractCleanName(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 +224,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.)
@@ -159,12 +409,14 @@ function collectStyles(node, blockName, depth = 0, parentNode) {
         : `.${generateBEMElement(blockName, elementName)}`;
     // Coleta propriedades deste node
     const properties = [];
+    // Verifica se o pai tem Auto Layout (para aplicar flex-shrink nos filhos)
+    const parentHasAutoLayoutMode = parentNode ? hasAutoLayout(parentNode) : false;
     // Layout e sizing
     // Para FRAME, COMPONENT, INSTANCE: extrai layout completo (flex, gap, etc)
     // 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, isRoot));
+        properties.push(...parseLayoutAndSizing(node, isRoot, parentHasAutoLayoutMode));
         // Se é um container sem Auto Layout, adiciona position: relative
         const containerPos = parseContainerPosition(node);
         if (containerPos) {
@@ -181,7 +433,7 @@ function collectStyles(node, blockName, depth = 0, parentNode) {
     }
     else if (node.type === 'GROUP') {
         // GROUPs são containers visuais - precisam de position: relative e sizing
-        const sizingProps = parseSizing(node);
+        const sizingProps = parseSizing(node, false, parentHasAutoLayoutMode);
         const sizingArray = Object.values(sizingProps).filter((p) => p !== undefined);
         properties.push(...sizingArray);
         // GROUP sempre precisa de position: relative se tiver filhos
@@ -194,7 +446,7 @@ function collectStyles(node, blockName, depth = 0, parentNode) {
     }
     else if (node.type !== 'TEXT' && node.absoluteBoundingBox) {
         // Para elementos não-texto com dimensões, extrai apenas sizing
-        const sizingProps = parseSizing(node);
+        const sizingProps = parseSizing(node, false, parentHasAutoLayoutMode);
         const sizingArray = Object.values(sizingProps).filter((p) => p !== undefined);
         properties.push(...sizingArray);
     }

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;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"}
+{"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;AA6BD;;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

@@ -13,12 +13,20 @@ function roundPixelValue(value) {
     return Math.round(value * 10) / 10;
 }
 /**
- * Formata valor de pixel arredondado
+ * Formata valor de pixel arredondado (suporta valores negativos)
  */
 function formatPixels(value) {
     const rounded = roundPixelValue(value);
     return `${rounded}px`;
 }
+/**
+ * Formata valor de pixel para CSS, incluindo valores negativos
+ * Valores negativos são importantes para elementos que "vazam" do container
+ */
+function formatPixelsWithNegative(value) {
+    const rounded = roundPixelValue(value);
+    return `${rounded}px`;
+}
 /**
  * Verifica se um node pai tem 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;AAuRrD;;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;AAgJD;;;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,33 +173,47 @@ 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
+    // NOTA: Patterns de form elements são desativados por padrão para preservar a estrutura visual.
+    // Use prefixo $input:, $label:, etc. no Figma para ativar a conversão.
+    // Os patterns abaixo são mantidos apenas para elementos claramente marcados.
     form: /^(form|formulario|login-form|signup-form|contact-form|search-form)/i,
-    input: /^(input|field|textfield|entrada|campo|text-input)/i,
-    label: /^(label|rotulo|field-label|input-label)/i,
-    select: /^(select|dropdown|picker|seletor|selecao|combobox)/i,
-    textarea: /^(textarea|text-area|area-texto|multiline)/i,
-    checkbox: /^(checkbox|check-box|caixa-selecao|toggle)/i,
-    radio: /^(radio|radio-button|opcao-radio)/i,
+    // input/label/select/etc NÃO são mais detectados automaticamente
+    // para evitar converter estruturas visuais em elementos HTML
+    input: /^(\$input:|never-match-automatically)/i, // Desativado - use $input:nome
+    label: /^(\$label:|never-match-automatically)/i, // Desativado - use $label:nome
+    select: /^(\$select:|never-match-automatically)/i, // Desativado - use $select:nome
+    textarea: /^(\$textarea:|never-match-automatically)/i, // Desativado - use $textarea:nome
+    checkbox: /^(\$checkbox:|never-match-automatically)/i, // Desativado - use $checkbox:nome
+    radio: /^(\$radio:|never-match-automatically)/i, // Desativado - use $radio:nome
     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 +263,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 +386,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 +454,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';
 }
@@ -414,8 +491,9 @@ function detectTextTag(node, parentNode, normalizedName) {
     if (fontSize >= 24 && fontWeight >= 600) {
         return getHeadingLevel(fontSize);
     }
-    // Labels (geralmente associados a inputs)
-    if (SEMANTIC_PATTERNS.label.test(name)) {
+    // Labels - só detecta com prefixo explícito $label:
+    // NÃO detecta automaticamente para preservar estrutura visual
+    if (name.startsWith('$label:')) {
         return 'label';
     }
     // Links - mas não se o pai já é um link (evita <a> aninhado)

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.23",
   "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.23"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",