@promptui-lib/figma-parser 0.1.9 → 0.1.11

package/dist/parser/index.d.ts

@@ -4,6 +4,8 @@ export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, pars
 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 type { IPositionProperties } from './position-parser.js';
 export { parseNode, parseNodes, parseFrameName } from './node-parser.js';
 export type { IParseOptions } from './node-parser.js';
 export { detectSemanticTag, normalizeName, getSemanticAttributes } from './semantic-detector.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,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,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"}

package/dist/parser/index.js

@@ -1,5 +1,6 @@
 export { parseLayout, parseSizing, parseLayoutAndSizing } from './layout-parser.js';
 export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, parseBoxShadow } from './style-parser.js';
 export { parseTextStyles, extractTextContent } from './text-parser.js';
+export { parsePosition, parseContainerPosition, hasAutoLayout } 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.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;AAGrE,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,CAwD/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,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"}

package/dist/parser/layout-parser.js

@@ -3,6 +3,29 @@
  * Converte AutoLayout do Figma para propriedades CSS flexbox
  */
 import { findGapToken, generatePaddingToken } from '@promptui-lib/core';
+/**
+ * Arredonda valores de pixel para evitar decimais desnecessários
+ * Valores inteiros ou próximos de .5 são preservados
+ */
+function roundPixelValue(value) {
+    // Se é inteiro ou muito próximo de inteiro, retorna inteiro
+    if (Math.abs(value - Math.round(value)) < 0.01) {
+        return Math.round(value);
+    }
+    // Arredonda para 1 casa decimal no máximo
+    return Math.round(value * 10) / 10;
+}
+/**
+ * Formata valor de pixel arredondado
+ */
+function formatPixels(value) {
+    const rounded = roundPixelValue(value);
+    // Se é inteiro, não mostra decimal
+    if (Number.isInteger(rounded)) {
+        return `${rounded}px`;
+    }
+    return `${rounded}px`;
+}
 /**
  * Parseia AutoLayout de um node
  */
@@ -103,12 +126,19 @@ export function parseSizing(node) {
                 if (node.absoluteBoundingBox?.width) {
                     properties.width = {
                         property: 'width',
-                        value: `${node.absoluteBoundingBox.width}px`,
+                        value: formatPixels(node.absoluteBoundingBox.width),
                     };
                 }
                 break;
         }
     }
+    else if (node.absoluteBoundingBox?.width) {
+        // Fallback: Se não tem layoutSizing mas tem dimensões, usa o tamanho absoluto
+        properties.width = {
+            property: 'width',
+            value: formatPixels(node.absoluteBoundingBox.width),
+        };
+    }
     // Height
     if (node.layoutSizingVertical) {
         switch (node.layoutSizingVertical) {
@@ -128,12 +158,19 @@ export function parseSizing(node) {
                 if (node.absoluteBoundingBox?.height) {
                     properties.height = {
                         property: 'height',
-                        value: `${node.absoluteBoundingBox.height}px`,
+                        value: formatPixels(node.absoluteBoundingBox.height),
                     };
                 }
                 break;
         }
     }
+    else if (node.absoluteBoundingBox?.height) {
+        // Fallback: Se não tem layoutSizing mas tem dimensões, usa o tamanho absoluto
+        properties.height = {
+            property: 'height',
+            value: formatPixels(node.absoluteBoundingBox.height),
+        };
+    }
     return properties;
 }
 /**

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,EAKb,cAAc,EACd,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAe5B,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;AAuJD;;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,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;AAkND;;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

@@ -2,11 +2,12 @@
  * Node Parser
  * Parser principal que converte node do Figma em AST do componente
  */
-import { generateComponentName, generateFileName, generateBEMBlock, generateBEMElement, classifyComponent, extractBaseName, extractVariants, } from '@promptui-lib/core';
-import { parseLayoutAndSizing } from './layout-parser.js';
+import { generateComponentName, generateFileName, generateBEMBlock, generateBEMElement, classifyComponent, extractBaseName, extractVariants, isComponentNode, } from '@promptui-lib/core';
+import { parseLayoutAndSizing, parseSizing } 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';
 /**
  * Parseia o nome do frame para extrair informações
  */
@@ -33,6 +34,7 @@ export function parseFrameName(name) {
 }
 /**
  * Converte um node em elemento JSX
+ * Se o filho for um componente (marcado com #), retorna IJSXComponent em vez de JSX inline
  */
 function nodeToJSX(node, blockName, depth = 0, parentNode) {
     const isRoot = depth === 0;
@@ -57,7 +59,21 @@ function nodeToJSX(node, blockName, depth = 0, parentNode) {
             if (child.visible === false || child.name.startsWith('_')) {
                 continue;
             }
-            children.push(nodeToJSX(child, blockName, depth + 1, node));
+            // Se o filho é um componente (marcado com #), cria referência ao componente
+            if (isComponentNode(child.name)) {
+                const childComponentName = generateComponentName(child.name);
+                const childFileName = generateFileName(childComponentName);
+                const childLayer = classifyComponent(child);
+                children.push({
+                    type: 'component',
+                    componentName: childComponentName,
+                    layer: childLayer,
+                    fileName: childFileName,
+                });
+            }
+            else {
+                children.push(nodeToJSX(child, blockName, depth + 1, node));
+            }
         }
     }
     // Tags self-closing
@@ -75,7 +91,7 @@ function nodeToJSX(node, blockName, depth = 0, parentNode) {
 /**
  * Coleta estilos de um node recursivamente
  */
-function collectStyles(node, blockName, depth = 0) {
+function collectStyles(node, blockName, depth = 0, parentNode) {
     const blocks = [];
     const isRoot = depth === 0;
     // Usa nome normalizado (traduzido)
@@ -86,9 +102,41 @@ function collectStyles(node, blockName, depth = 0) {
         : `.${generateBEMElement(blockName, elementName)}`;
     // Coleta propriedades deste node
     const properties = [];
-    // Layout
+    // 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));
+        // Se é um container sem Auto Layout, adiciona position: relative
+        const containerPos = parseContainerPosition(node);
+        if (containerPos) {
+            properties.push(containerPos);
+        }
+    }
+    else if (node.type === 'GROUP') {
+        // GROUPs são containers visuais - precisam de position: relative e sizing
+        const sizingProps = parseSizing(node);
+        const sizingArray = Object.values(sizingProps).filter((p) => p !== undefined);
+        properties.push(...sizingArray);
+        // GROUP sempre precisa de position: relative se tiver filhos
+        if (node.children && node.children.length > 0) {
+            properties.push({
+                property: 'position',
+                value: 'relative',
+            });
+        }
+    }
+    else if (node.type !== 'TEXT' && node.absoluteBoundingBox) {
+        // Para elementos não-texto com dimensões, extrai apenas sizing
+        const sizingProps = parseSizing(node);
+        const sizingArray = Object.values(sizingProps).filter((p) => p !== undefined);
+        properties.push(...sizingArray);
+    }
+    // Posicionamento absoluto (quando pai não tem Auto Layout)
+    if (parentNode && !isRoot) {
+        const positionProps = parsePosition(node, parentNode);
+        properties.push(...positionProps);
     }
     // Estilos visuais
     properties.push(...parseStyles(node));
@@ -103,13 +151,18 @@ function collectStyles(node, blockName, depth = 0) {
             properties,
         });
     }
-    // Processa filhos
+    // Processa filhos (passa o node atual como pai)
+    // Ignora filhos marcados com # pois são componentes com seus próprios estilos
     if (node.children) {
         for (const child of node.children) {
             if (child.visible === false || child.name.startsWith('_')) {
                 continue;
             }
-            blocks.push(...collectStyles(child, blockName, depth + 1));
+            // Ignora componentes filhos - eles têm seus próprios estilos
+            if (isComponentNode(child.name)) {
+                continue;
+            }
+            blocks.push(...collectStyles(child, blockName, depth + 1, node));
         }
     }
     return blocks;

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

@@ -0,0 +1,32 @@
+/**
+ * Position Parser
+ * Converte posicionamento e constraints do Figma para CSS
+ * Usado quando elementos não estão dentro de Auto Layout
+ */
+import type { IFigmaNode, IStyleProperty } from '@promptui-lib/core';
+export interface IPositionProperties {
+    position?: IStyleProperty;
+    top?: IStyleProperty;
+    right?: IStyleProperty;
+    bottom?: IStyleProperty;
+    left?: IStyleProperty;
+    transform?: IStyleProperty;
+}
+/**
+ * Verifica se um node pai tem Auto Layout
+ */
+export declare function hasAutoLayout(node: IFigmaNode): boolean;
+/**
+ * Parseia constraints e posição de um node
+ */
+export declare function parsePosition(node: IFigmaNode, parentNode?: IFigmaNode): IStyleProperty[];
+/**
+ * Verifica se o pai precisa de position: relative
+ * (necessário quando tem filhos com position: absolute)
+ */
+export declare function needsRelativePosition(node: IFigmaNode): boolean;
+/**
+ * Parseia position: relative para containers sem Auto Layout
+ */
+export declare function parseContainerPosition(node: IFigmaNode): IStyleProperty | null;
+//# sourceMappingURL=position-parser.d.ts.map

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

@@ -0,0 +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"}

package/dist/parser/position-parser.js

@@ -0,0 +1,196 @@
+/**
+ * Position Parser
+ * Converte posicionamento e constraints do Figma para CSS
+ * Usado quando elementos não estão dentro de Auto Layout
+ */
+/**
+ * Arredonda valores de pixel para evitar decimais desnecessários
+ */
+function roundPixelValue(value) {
+    if (Math.abs(value - Math.round(value)) < 0.01) {
+        return Math.round(value);
+    }
+    return Math.round(value * 10) / 10;
+}
+/**
+ * Formata valor de pixel arredondado
+ */
+function formatPixels(value) {
+    const rounded = roundPixelValue(value);
+    return `${rounded}px`;
+}
+/**
+ * Verifica se um node pai tem Auto Layout
+ */
+export function hasAutoLayout(node) {
+    return node.layoutMode !== undefined && node.layoutMode !== 'NONE';
+}
+/**
+ * Calcula a posição relativa de um filho em relação ao pai
+ */
+function calculateRelativePosition(child, parent) {
+    if (!child.absoluteBoundingBox || !parent.absoluteBoundingBox) {
+        return null;
+    }
+    const childBox = child.absoluteBoundingBox;
+    const parentBox = parent.absoluteBoundingBox;
+    return {
+        top: childBox.y - parentBox.y,
+        left: childBox.x - parentBox.x,
+        right: parentBox.x + parentBox.width - (childBox.x + childBox.width),
+        bottom: parentBox.y + parentBox.height - (childBox.y + childBox.height),
+    };
+}
+/**
+ * Parseia constraints e posição de um node
+ */
+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)) {
+        return properties;
+    }
+    // Calcula posição relativa
+    const relPos = calculateRelativePosition(node, parentNode);
+    if (!relPos) {
+        return properties;
+    }
+    const constraints = node.constraints;
+    // Se é um elemento dentro de um container sem Auto Layout, usa posição absoluta
+    properties.push({
+        property: 'position',
+        value: 'absolute',
+    });
+    // Aplica constraints ou usa posição padrão (top-left)
+    if (constraints) {
+        // Horizontal constraints
+        switch (constraints.horizontal) {
+            case 'LEFT':
+                properties.push({
+                    property: 'left',
+                    value: formatPixels(relPos.left),
+                });
+                break;
+            case 'RIGHT':
+                properties.push({
+                    property: 'right',
+                    value: formatPixels(relPos.right),
+                });
+                break;
+            case 'CENTER':
+                properties.push({
+                    property: 'left',
+                    value: '50%',
+                });
+                properties.push({
+                    property: 'transform',
+                    value: 'translateX(-50%)',
+                });
+                break;
+            case 'LEFT_RIGHT':
+                properties.push({
+                    property: 'left',
+                    value: formatPixels(relPos.left),
+                });
+                properties.push({
+                    property: 'right',
+                    value: formatPixels(relPos.right),
+                });
+                break;
+            case 'SCALE':
+                // Usa porcentagem
+                const parentWidth = parentNode.absoluteBoundingBox?.width ?? 1;
+                const leftPercent = (relPos.left / parentWidth) * 100;
+                properties.push({
+                    property: 'left',
+                    value: `${roundPixelValue(leftPercent)}%`,
+                });
+                break;
+        }
+        // Vertical constraints
+        switch (constraints.vertical) {
+            case 'TOP':
+                properties.push({
+                    property: 'top',
+                    value: formatPixels(relPos.top),
+                });
+                break;
+            case 'BOTTOM':
+                properties.push({
+                    property: 'bottom',
+                    value: formatPixels(relPos.bottom),
+                });
+                break;
+            case 'CENTER':
+                // Se já tem transform de X, combina
+                const existingTransform = properties.find(p => p.property === 'transform');
+                if (existingTransform) {
+                    existingTransform.value = 'translate(-50%, -50%)';
+                }
+                else {
+                    properties.push({
+                        property: 'transform',
+                        value: 'translateY(-50%)',
+                    });
+                }
+                properties.push({
+                    property: 'top',
+                    value: '50%',
+                });
+                break;
+            case 'TOP_BOTTOM':
+                properties.push({
+                    property: 'top',
+                    value: formatPixels(relPos.top),
+                });
+                properties.push({
+                    property: 'bottom',
+                    value: formatPixels(relPos.bottom),
+                });
+                break;
+            case 'SCALE':
+                const parentHeight = parentNode.absoluteBoundingBox?.height ?? 1;
+                const topPercent = (relPos.top / parentHeight) * 100;
+                properties.push({
+                    property: 'top',
+                    value: `${roundPixelValue(topPercent)}%`,
+                });
+                break;
+        }
+    }
+    else {
+        // Sem constraints, usa posição top-left padrão
+        properties.push({
+            property: 'top',
+            value: formatPixels(relPos.top),
+        });
+        properties.push({
+            property: 'left',
+            value: formatPixels(relPos.left),
+        });
+    }
+    return properties;
+}
+/**
+ * Verifica se o pai precisa de position: relative
+ * (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) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Parseia position: relative para containers sem Auto Layout
+ */
+export function parseContainerPosition(node) {
+    if (needsRelativePosition(node)) {
+        return {
+            property: 'position',
+            value: 'relative',
+        };
+    }
+    return null;
+}

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;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,UAAU,EACvB,KAAK,GAAE,MAAU,GAChB,MAAM,CAmKR;AA4JD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,MAAM,EACX,cAAc,EAAE,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkKxB"}
+{"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;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,UAAU,EACvB,KAAK,GAAE,MAAU,GAChB,MAAM,CAmKR;AA4JD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,MAAM,EACX,cAAc,EAAE,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAwKxB"}

package/dist/parser/semantic-detector.js

@@ -513,11 +513,17 @@ function hasInputChild(node) {
  */
 export function getSemanticAttributes(node, tag, normalizedName) {
     const attrs = {};
-    // Links - não adiciona href automático para evitar warnings de a11y
+    // Links - adiciona href placeholder para evitar warnings de a11y
     // O desenvolvedor deve preencher o href correto
-    // if (tag === 'a') {
-    //   attrs['href'] = '#'; // Removido - causa warning jsx-a11y/anchor-is-valid
-    // }
+    if (tag === 'a') {
+        // Gera um href placeholder baseado no nome do link
+        const hrefSlug = normalizedName
+            .replace(/link$/i, '')
+            .replace(/[-\s]+/g, '-')
+            .replace(/^-|-$/g, '')
+            .toLowerCase();
+        attrs['href'] = hrefSlug ? `/${hrefSlug}` : '/';
+    }
     // Inputs
     if (tag === 'input') {
         // Detecta tipo de input

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;AAS5B,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,CAuBnE;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,CAmCtE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CASpE;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,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,EAAE,CAmB9D"}

package/dist/parser/style-parser.js

@@ -3,6 +3,15 @@
  * Converte fills, strokes, effects do Figma para CSS
  */
 import { rgbaToHex, findColorToken, findRadiusToken, findShadowToken, generateBorderRadius, } from '@promptui-lib/core';
+/**
+ * Arredonda valores de pixel para evitar decimais desnecessários
+ */
+function roundPixelValue(value) {
+    if (Math.abs(value - Math.round(value)) < 0.01) {
+        return Math.round(value);
+    }
+    return Math.round(value * 10) / 10;
+}
 /**
  * Extrai cor de um fill sólido
  */
@@ -49,9 +58,10 @@ export function parseBorder(node) {
     }
     const hex = rgbaToHex(stroke.color.r, stroke.color.g, stroke.color.b, stroke.opacity ?? 1);
     const token = findColorToken(hex);
+    const strokeWidth = roundPixelValue(node.strokeWeight);
     return {
         property: 'border',
-        value: `${node.strokeWeight}px solid ${token ?? hex}`,
+        value: `${strokeWidth}px solid ${token ?? hex}`,
         token: token ?? undefined,
     };
 }
@@ -105,9 +115,13 @@ export function parseBoxShadow(node) {
     // Gera box-shadow customizado
     const { offset, radius, spread, color } = shadow;
     const hex = rgbaToHex(color.r, color.g, color.b, color.a);
+    const x = roundPixelValue(offset.x);
+    const y = roundPixelValue(offset.y);
+    const r = roundPixelValue(radius);
+    const s = roundPixelValue(spread ?? 0);
     return {
         property: 'box-shadow',
-        value: `${offset.x}px ${offset.y}px ${radius}px ${spread ?? 0}px ${hex}`,
+        value: `${x}px ${y}px ${r}px ${s}px ${hex}`,
     };
 }
 /**
@@ -115,9 +129,11 @@ export function parseBoxShadow(node) {
  */
 export function parseOpacity(node) {
     if (node.opacity !== undefined && node.opacity < 1) {
+        // Arredonda para 2 casas decimais
+        const rounded = Math.round(node.opacity * 100) / 100;
         return {
             property: 'opacity',
-            value: `${node.opacity}`,
+            value: `${rounded}`,
         };
     }
     return null;

package/package.json

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