Upload 15 files

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "tempelhtml",
+  "name": "morphus",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "tempelhtml",
+      "name": "morphus",
       "version": "0.1.0",
       "dependencies": {
         "commander": "^12.0.0",

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "tempelhtml",
+  "name": "morphus",
   "version": "0.1.0",
-  "description": "HTML to Figma converter with a deterministic local pipeline",
+  "description": "Morphus converts HTML into editable Figma designs with a deterministic local pipeline",
   "type": "module",
   "main": "scripts/convert.js",
   "scripts": {

scripts/convert.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * tempelhtml CLI
+ * Morphus CLI
  * Usage: node scripts/convert.js --input ./examples/page.html --output ./out/page.json
  */
 

scripts/server.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * Local tempelhtml bridge for the Figma plugin.
+ * Local Morphus bridge for the Figma plugin.
  * The plugin UI sends HTML here, and this server returns the converted JSON.
  */
 
@@ -8,7 +8,7 @@ import http from 'node:http';
 import { randomUUID } from 'node:crypto';
 import { convertHtmlString } from '../src/pipeline/convert.js';
 
-const PORT = Number.parseInt(process.env.PORT ?? process.env.TEMPELHTML_PORT ?? '3210', 10);
+const PORT = Number.parseInt(process.env.PORT ?? process.env.MORPHUS_PORT ?? '3210', 10);
 const HOST = process.env.HOST ?? '0.0.0.0';
 const jobs = new Map();
 
@@ -103,7 +103,7 @@ const server = http.createServer(async (req, res) => {
 
 server.listen(PORT, HOST, () => {
   const displayHost = HOST === '0.0.0.0' ? 'localhost' : HOST;
-  console.log(`tempelhtml server listening on http://${displayHost}:${PORT}`);
+  console.log(`Morphus server listening on http://${displayHost}:${PORT}`);
 });
 
 async function runJob(jobId, body) {

src/core/extractor.js

@@ -1,1013 +1,1353 @@
-/**
- * src/core/extractor.js
- * Renders HTML in headless Playwright, extracts computed styles
- * and bounding rects for every DOM element.
- */
-
-import { chromium } from 'playwright-core';
-import { existsSync, statSync } from 'fs';
-import { dirname, resolve } from 'path';
-import { pathToFileURL } from 'url';
-
-/**
- * @param {string} filePath - absolute or relative path to HTML file
- * @param {{ width: number, height: number }} viewport
- * @returns {{ domTree }}
- */
-export async function extractFromFile(filePath, { width = 1440, height = 900 } = {}) {
-  const absPath = resolve(filePath);
-  const browser = await chromium.launch();
-  const page = await browser.newPage({ viewport: { width, height } });
-
-  await page.goto(pathToFileURL(absPath).href);
-  const result = await extractFromPage(page);
-  await browser.close();
-  return result;
-}
-
-/**
- * @param {string} html
- * @param {{ width?: number, height?: number, baseUrl?: string | null }} options
- * @returns {{ domTree }}
- */
-export async function extractFromHtml(html, { width = 1440, height = 900, baseUrl = null } = {}) {
-  const browser = await chromium.launch();
-  const page = await browser.newPage({ viewport: { width, height } });
-  const htmlWithBase = injectBaseHref(html, normalizeBaseUrl(baseUrl));
-
-  await page.setContent(htmlWithBase, { waitUntil: 'load' });
-  const result = await extractFromPage(page);
-  await browser.close();
-  return result;
-}
-
-async function extractFromPage(page) {
-  await stabilizePage(page);
-
-  // Walk the full DOM and capture computed styles + rects
-  const domTree = await page.evaluate(walkDOMInBrowser);
-  return { domTree };
-}
-
-async function stabilizePage(page) {
-  await page.evaluate(() => {
-    document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));
-
-    const animated = Array.from(document.querySelectorAll('*')).filter((el) => {
-      const cs = window.getComputedStyle(el);
-      return cs.animationName !== 'none' || cs.transitionDuration !== '0s';
-    });
-    animated.forEach((el) => el.setAttribute('data-tempelhtml-animated', '1'));
-
-    const style = document.createElement('style');
-    style.textContent = '*, *::before, *::after { animation: none !important; transition: none !important; }';
-    document.head.appendChild(style);
-
-    document.querySelectorAll('[data-tempelhtml-animated="1"]').forEach((el) => {
+/**
+ * src/core/extractor.js
+ * Renders HTML in headless Playwright, extracts computed styles
+ * and bounding rects for every DOM element.
+ */
+
+import { chromium } from 'playwright-core';
+import { existsSync, statSync } from 'fs';
+import { dirname, resolve } from 'path';
+import { pathToFileURL } from 'url';
+
+/**
+ * @param {string} filePath - absolute or relative path to HTML file
+ * @param {{ width: number, height: number }} viewport
+ * @returns {{ domTree, title: string }}
+ */
+export async function extractFromFile(filePath, { width = 1440, height = 900 } = {}) {
+  const absPath = resolve(filePath);
+  const browser = await chromium.launch();
+  const page = await browser.newPage({ viewport: { width, height } });
+
+  await page.goto(pathToFileURL(absPath).href);
+  const result = await extractFromPage(page);
+  await browser.close();
+  return result;
+}
+
+/**
+ * @param {string} html
+ * @param {{ width?: number, height?: number, baseUrl?: string | null }} options
+ * @returns {{ domTree, title: string }}
+ */
+export async function extractFromHtml(html, { width = 1440, height = 900, baseUrl = null } = {}) {
+  const browser = await chromium.launch();
+  const page = await browser.newPage({ viewport: { width, height } });
+  const htmlWithBase = injectBaseHref(html, normalizeBaseUrl(baseUrl));
+
+  await page.setContent(htmlWithBase, { waitUntil: 'load' });
+  const result = await extractFromPage(page);
+  await browser.close();
+  return result;
+}
+
+async function extractFromPage(page) {
+  await stabilizePage(page);
+
+  // Walk the full DOM and capture computed styles + rects
+  const title = await page.title();
+  const domTree = await page.evaluate(walkDOMInBrowser);
+  return { domTree, title };
+}
+
+async function stabilizePage(page) {
+  await page.waitForLoadState('networkidle');
+
+  await page.evaluate(() => {
+    document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));
+
+    const animated = Array.from(document.querySelectorAll('*')).filter((el) => {
+      const cs = window.getComputedStyle(el);
+      return cs.animationName !== 'none' || cs.transitionDuration !== '0s';
+    });
+    animated.forEach((el) => el.setAttribute('data-morphus-animated', '1'));
+
+    const style = document.createElement('style');
+    style.textContent = '*, *::before, *::after { animation: none !important; transition: none !important; }';
+    document.head.appendChild(style);
+
+    document.querySelectorAll('[data-morphus-animated="1"]').forEach((el) => {
       const cs = window.getComputedStyle(el);
-      if (cs.opacity === '0') {
+      if (cs.opacity === '0' && shouldForceAnimatedElementVisible(el, cs)) {
         el.style.opacity = '1';
-      }
-      if (cs.transform !== 'none') {
-        el.style.transform = 'none';
+        if (isTranslateOnlyTransform(cs.transform)) {
+          el.style.transform = 'none';
+        }
       }
     });
-  });
-
-  await page.waitForLoadState('networkidle');
-}
-
-function normalizeBaseUrl(baseUrl) {
-  if (!baseUrl) return null;
-  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(baseUrl)) return baseUrl;
-
-  const absPath = resolve(baseUrl);
-  const targetPath = existsSync(absPath) && !statSync(absPath).isDirectory()
-    ? dirname(absPath)
-    : absPath;
-
-  let href = pathToFileURL(targetPath).href;
-  if (!href.endsWith('/')) {
-    href += '/';
-  }
-  return href;
-}
-
-function injectBaseHref(html, baseHref) {
-  if (!baseHref || /<base\s/i.test(html)) {
-    return html;
-  }
-
-  const baseTag = `<base href="${escapeHtmlAttribute(baseHref)}">`;
-  if (/<head[^>]*>/i.test(html)) {
-    return html.replace(/<head([^>]*)>/i, `<head$1>\n${baseTag}`);
-  }
-
-  if (/<html[^>]*>/i.test(html)) {
-    return html.replace(/<html([^>]*)>/i, `<html$1><head>${baseTag}</head>`);
-  }
-
-  return `<!DOCTYPE html><html><head>${baseTag}</head><body>${html}</body></html>`;
-}
-
-function escapeHtmlAttribute(value) {
-  return String(value)
-    .replace(/&/g, '&amp;')
-    .replace(/"/g, '&quot;');
-}
-
-/**
- * This function is serialized and run inside the browser context.
- * It must be self-contained (no imports).
- */
-function walkDOMInBrowser() {
-  const SKIP_TAGS = new Set(['SCRIPT', 'STYLE', 'LINK', 'META', 'HEAD', 'NOSCRIPT']);
-  const TEXT_TAGS = new Set(['p', 'span', 'a', 'label', 'em', 'strong', 'b', 'i', 'small', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
-  const INLINE_TAGS = new Set(['span', 'a', 'label', 'em', 'strong', 'b', 'i', 'small', 'mark', 'sup', 'sub', 'u', 's', 'code', 'br', 'wbr']);
-  const TEXT_INPUT_TYPES = new Set([
-    '',
-    'date',
-    'datetime-local',
-    'email',
-    'month',
-    'number',
-    'password',
-    'search',
-    'tel',
-    'text',
-    'time',
-    'url',
-    'week',
-  ]);
-
-  function getNode(el, depth = 0) {
-    if (SKIP_TAGS.has(el.tagName)) return null;
-
-    const rect = el.getBoundingClientRect();
-    const cs = window.getComputedStyle(el);
-    const csBefore = window.getComputedStyle(el, '::before');
-    const csAfter = window.getComputedStyle(el, '::after');
-    const tag = el.tagName.toLowerCase();
-    const isSvg = tag === 'svg';
 
-    // Skip invisible/zero-size elements
-    if (rect.width === 0 && rect.height === 0 && cs.position === 'static') return null;
+    limitPaginatedTableRows();
 
-    const rawText = normalizeTextContent(el.innerText || el.textContent || '');
-    const hasVisualBox =
-      !isTransparentColor(cs.backgroundColor) ||
-      cs.backgroundImage !== 'none' ||
-      cs.borderStyle !== 'none' ||
-      parseFloat(cs.borderTopWidth) > 0 ||
-      parseFloat(cs.borderRightWidth) > 0 ||
-      parseFloat(cs.borderBottomWidth) > 0 ||
-      parseFloat(cs.borderLeftWidth) > 0 ||
-      parseFloat(cs.paddingTop) > 0 ||
-      parseFloat(cs.paddingRight) > 0 ||
-      parseFloat(cs.paddingBottom) > 0 ||
-      parseFloat(cs.paddingLeft) > 0 ||
-      cs.boxShadow !== 'none';
-    const hasOnlyInlineTextChildren = Boolean(rawText) && Array.from(el.children).length > 0 && Array.from(el.children).every((child) => isInlineTextChild(child));
-    const isTextContainer = Boolean(rawText)
-      && !hasVisualBox
-      && !hasRenderablePseudo(csBefore)
-      && !hasRenderablePseudo(csAfter)
-      && canCollapseToTextContainer(el, tag, cs, hasOnlyInlineTextChildren);
-
-    const textData = rawText ? extractTextData(el) : null;
-    const beforeData = extractPseudoElementData(el, tag, cs, csBefore, 'before');
-    const afterData = extractPseudoElementData(el, tag, cs, csAfter, 'after');
-    const formControl = extractFormControlData(el, tag, cs);
-    const svgMarkup = isSvg ? serializeSvgElement(el, rect) : null;
-
-    const children = isSvg || isTextContainer
-      ? []
-      : Array.from(el.childNodes)
-          .map((child) => getChildNode(child, el, cs, depth + 1))
-          .filter(Boolean);
-
-    return {
-      tag,
-      id: el.id || null,
-      classList: Array.from(el.classList),
-      text: rawText || null,
-      textRuns: textData?.runs || [],
-      isTextContainer,
-      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-      computed: extractRelevantStyles(cs),
-      ...(formControl ? { formControl } : {}),
-      ...(svgMarkup ? { svgMarkup } : {}),
-      pseudo: {
-        before: beforeData,
-        after: afterData,
-      },
-      children,
-    };
-  }
-
-  function extractFormControlData(el, tag, computedStyles) {
-    if (tag !== 'input' && tag !== 'textarea') {
-      return null;
-    }
-
-    const type = tag === 'input'
-      ? String(el.getAttribute('type') || 'text').trim().toLowerCase()
-      : 'textarea';
-
-    if (tag === 'input' && !TEXT_INPUT_TYPES.has(type)) {
-      return null;
-    }
-
-    const placeholder = normalizeFormControlText(el.getAttribute('placeholder') || '', tag === 'textarea');
-    const value = type === 'password'
-      ? ''
-      : normalizeFormControlText(el.value || '', tag === 'textarea');
-
-    if (!placeholder && !value) {
-      return null;
+    function shouldForceAnimatedElementVisible(el, cs) {
+      if (cs.display === 'none' || cs.visibility === 'hidden') {
+        return false;
+      }
+
+      if (cs.position === 'absolute' || cs.position === 'fixed') {
+        return false;
+      }
+
+      if (el.closest('[hidden], [aria-hidden="true"], [inert]')) {
+        return false;
+      }
+
+      if (hasLiveOrProgressSemantics(el)) {
+        return false;
+      }
+
+      const rect = el.getBoundingClientRect();
+      return rect.width > 0 && rect.height > 0;
+    }
+
+    function hasLiveOrProgressSemantics(el) {
+      if (!el || el.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+      }
+
+      const role = String(el.getAttribute('role') || '').toLowerCase();
+      if (role === 'progressbar' || role === 'status' || role === 'alert') {
+        return true;
+      }
+
+      if (el.hasAttribute('aria-busy') || el.hasAttribute('aria-live')) {
+        return true;
+      }
+
+      return Boolean(el.querySelector('progress, meter, [role="progressbar"], [aria-busy], [aria-live]'));
+    }
+
+    function isTranslateOnlyTransform(value) {
+      if (!value || value === 'none') {
+        return false;
+      }
+
+      const text = String(value).trim();
+      const matrixMatch = text.match(/^matrix\(([^)]+)\)$/i);
+      if (matrixMatch) {
+        const values = matrixMatch[1]
+          .split(',')
+          .map((part) => parseFloat(part.trim()));
+        if (values.length === 6 && values.every((number) => Number.isFinite(number))) {
+          const tolerance = 0.001;
+          return Math.abs(values[0] - 1) <= tolerance
+            && Math.abs(values[1]) <= tolerance
+            && Math.abs(values[2]) <= tolerance
+            && Math.abs(values[3] - 1) <= tolerance;
+        }
+      }
+
+      return /^translate(?:3d|x|y)?\(/i.test(text);
     }
 
-    const placeholderComputed = placeholder
-      ? extractPlaceholderStyles(el, computedStyles)
-      : null;
-
-    return {
-      type,
-      value,
-      placeholder,
-      ...(placeholderComputed ? { placeholderComputed } : {}),
-    };
-  }
-
-  function extractPlaceholderStyles(el, fallbackStyles) {
-    try {
-      const placeholderStyles = window.getComputedStyle(el, '::placeholder');
-      if (placeholderStyles) {
-        return extractRelevantStyles(placeholderStyles);
+    function limitPaginatedTableRows() {
+      const pagers = Array.from(document.querySelectorAll('*')).filter((el) => isPaginationElement(el));
+
+      for (const pager of pagers) {
+        const pagerRect = pager.getBoundingClientRect();
+        if (pagerRect.width <= 0 || pagerRect.height <= 0) {
+          continue;
+        }
+
+        const container = findPaginatedDataContainer(pager, pagerRect);
+        if (!container) {
+          continue;
+        }
+
+        const rows = getDataRows(container).filter((row) => !pager.contains(row));
+        if (rows.length < 8) {
+          continue;
+        }
+
+        const cutoffY = pagerRect.bottom - 1;
+        let hiddenCount = 0;
+        for (const row of rows) {
+          const rect = row.getBoundingClientRect();
+          if (rect.width <= 0 || rect.height <= 0) {
+            continue;
+          }
+          if (rect.top >= cutoffY) {
+            row.setAttribute('data-morphus-paginated-row-clipped', '1');
+            row.style.display = 'none';
+            hiddenCount++;
+          }
+        }
+
+        if (hiddenCount > 0) {
+          container.setAttribute('data-morphus-paginated-preview', '1');
+        }
       }
-    } catch (err) {}
-
-    return extractRelevantStyles(fallbackStyles);
-  }
-
-  function extractRelevantStyles(cs) {
-    return {
-      display: cs.display,
-      position: cs.position,
-      zIndex: cs.zIndex,
-      // Layout
-      flexDirection: cs.flexDirection,
-      justifyContent: cs.justifyContent,
-      alignItems: cs.alignItems,
-      flexWrap: cs.flexWrap,
-      gap: cs.gap,
-      columnGap: cs.columnGap,
-      rowGap: cs.rowGap,
-      gridTemplateColumns: cs.gridTemplateColumns,
-      gridTemplateRows: cs.gridTemplateRows,
-      gridRow: cs.gridRow,
-      gridColumn: cs.gridColumn,
-      // Sizing
-      width: cs.width,
-      height: cs.height,
-      minWidth: cs.minWidth,
-      maxWidth: cs.maxWidth,
-      minHeight: cs.minHeight,
-      // Spacing
-      paddingTop: cs.paddingTop,
-      paddingRight: cs.paddingRight,
-      paddingBottom: cs.paddingBottom,
-      paddingLeft: cs.paddingLeft,
-      marginTop: cs.marginTop,
-      marginRight: cs.marginRight,
-      marginBottom: cs.marginBottom,
-      marginLeft: cs.marginLeft,
-      // Visual
-      backgroundColor: cs.backgroundColor,
-      backgroundImage: cs.backgroundImage,
-      backgroundSize: cs.backgroundSize,
-      backgroundPosition: cs.backgroundPosition,
-      color: cs.color,
-      opacity: cs.opacity,
-      borderRadius: cs.borderRadius,
-      borderTopLeftRadius: cs.borderTopLeftRadius,
-      borderTopRightRadius: cs.borderTopRightRadius,
-      borderBottomRightRadius: cs.borderBottomRightRadius,
-      borderBottomLeftRadius: cs.borderBottomLeftRadius,
-      border: cs.border,
-      borderWidth: cs.borderWidth,
-      borderColor: cs.borderColor,
-      borderStyle: cs.borderStyle,
-      borderTopWidth: cs.borderTopWidth,
-      borderRightWidth: cs.borderRightWidth,
-      borderBottomWidth: cs.borderBottomWidth,
-      borderLeftWidth: cs.borderLeftWidth,
-      borderTopColor: cs.borderTopColor,
-      borderRightColor: cs.borderRightColor,
-      borderBottomColor: cs.borderBottomColor,
-      borderLeftColor: cs.borderLeftColor,
-      borderTopStyle: cs.borderTopStyle,
-      borderRightStyle: cs.borderRightStyle,
-      borderBottomStyle: cs.borderBottomStyle,
-      borderLeftStyle: cs.borderLeftStyle,
-      boxShadow: cs.boxShadow,
-      overflow: cs.overflow,
-      overflowX: cs.overflowX,
-      overflowY: cs.overflowY,
-      clipPath: cs.clipPath,
-      mixBlendMode: cs.mixBlendMode,
-      transform: cs.transform,
-      // Typography
-      fontFamily: cs.fontFamily,
-      fontSize: cs.fontSize,
-      fontWeight: cs.fontWeight,
-      fontStyle: cs.fontStyle,
-      lineHeight: cs.lineHeight,
-      letterSpacing: cs.letterSpacing,
-      textAlign: cs.textAlign,
-      textTransform: cs.textTransform,
-      whiteSpace: cs.whiteSpace,
-      textDecoration: cs.textDecoration,
-      webkitTextStrokeWidth: cs.webkitTextStrokeWidth,
-      webkitTextStrokeColor: cs.webkitTextStrokeColor,
-      // Positioning
-      top: cs.top,
-      right: cs.right,
-      bottom: cs.bottom,
-      left: cs.left,
-      inset: cs.inset,
-      // Content (for pseudo-elements)
-      content: cs.content,
-    };
-  }
-
-  function extractTextData(el) {
-    const runs = [];
-    const pieces = [];
-    let lineIndex = 0;
-
-    function pushText(text, styleEl) {
-      const normalized = normalizeTextFragment(text);
-      if (!normalized) return;
-      pieces.push(normalized);
-      runs.push({
-        text: normalized,
-        lineIndex,
-        computed: extractTextRunStyles(window.getComputedStyle(styleEl)),
-      });
     }
 
-    function walkText(node, styleEl) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        pushText(node.textContent || '', styleEl);
-        return;
+    function isPaginationElement(el) {
+      if (!el || el.nodeType !== Node.ELEMENT_NODE) {
+        return false;
       }
 
-      if (node.nodeType !== Node.ELEMENT_NODE) return;
-
-      const element = node;
-      const tagName = element.tagName.toLowerCase();
-
-      if (tagName === 'br') {
-        pieces.push('\n');
-        lineIndex++;
-        return;
+      const identity = `${el.id || ''} ${String(el.className || '')} ${el.getAttribute('role') || ''}`.toLowerCase();
+      if (/(pagination|paginator|pager|page-nav|page-control)/.test(identity)) {
+        return true;
       }
 
-      const nextStyleEl = element;
-      for (const child of element.childNodes) {
-        walkText(child, nextStyleEl);
+      const text = normalizePaginationText(el.innerText || el.textContent || '');
+      if (!text || text.length > 160) {
+        return false;
       }
-    }
 
-    for (const child of el.childNodes) {
-      walkText(child, el);
+      return /\b(hal|page)\s*\d+\s*\/\s*\d+\b/i.test(text)
+        || /\b(baris|rows?)\s+\d+\s*[–-]\s*\d+\b/i.test(text);
     }
 
-    const text = pieces
-      .join('')
-      .replace(/[ \t]*\n[ \t]*/g, '\n')
-      .replace(/[ \t]{2,}/g, ' ')
-      .trim();
-
-    return { text, runs };
-  }
-
-  function extractTextRunStyles(cs) {
-    return {
-      display: cs.display,
-      position: cs.position,
-      fontFamily: cs.fontFamily,
-      fontSize: cs.fontSize,
-      fontWeight: cs.fontWeight,
-      fontStyle: cs.fontStyle,
-      lineHeight: cs.lineHeight,
-      letterSpacing: cs.letterSpacing,
-      textAlign: cs.textAlign,
-      textTransform: cs.textTransform,
-      color: cs.color,
-      opacity: cs.opacity,
-      textDecoration: cs.textDecoration,
-      webkitTextStrokeWidth: cs.webkitTextStrokeWidth,
-      webkitTextStrokeColor: cs.webkitTextStrokeColor,
-    };
-  }
-
-  function serializeSvgElement(svgEl, rect) {
-    const clone = svgEl.cloneNode(true);
+    function findPaginatedDataContainer(pager, pagerRect) {
+      let current = pager.parentElement;
+      while (current && current !== document.documentElement) {
+        const rows = getDataRows(current).filter((row) => !pager.contains(row));
+        if (rows.length >= 8) {
+          const before = rows.filter((row) => {
+            const rect = row.getBoundingClientRect();
+            return rect.width > 0 && rect.height > 0 && rect.bottom <= pagerRect.top + 1;
+          });
+          const after = rows.filter((row) => {
+            const rect = row.getBoundingClientRect();
+            return rect.width > 0 && rect.height > 0 && rect.top >= pagerRect.bottom - 1;
+          });
+
+          if (before.length >= 3 && after.length >= 1) {
+            return current;
+          }
+        }
+
+        current = current.parentElement;
+      }
 
-    clone.setAttribute('xmlns', clone.getAttribute('xmlns') || 'http://www.w3.org/2000/svg');
-    clone.setAttribute('width', formatSvgNumber(rect.width));
-    clone.setAttribute('height', formatSvgNumber(rect.height));
-    clone.removeAttribute('opacity');
-    if (clone.style) {
-      clone.style.removeProperty('opacity');
+      return null;
     }
 
-    inlineSvgPresentationStyles(svgEl, clone);
-
-    return new XMLSerializer().serializeToString(clone);
-  }
-
-  function inlineSvgPresentationStyles(sourceRoot, cloneRoot) {
-    const sourceElements = [sourceRoot].concat(Array.from(sourceRoot.querySelectorAll('*')));
-    const cloneElements = [cloneRoot].concat(Array.from(cloneRoot.querySelectorAll('*')));
-
-    for (let index = 0; index < sourceElements.length; index++) {
-      const sourceEl = sourceElements[index];
-      const cloneEl = cloneElements[index];
-      if (!sourceEl || !cloneEl) continue;
-
-      cloneEl.removeAttribute('data-tempelhtml-animated');
-      const cs = window.getComputedStyle(sourceEl);
-      const isRoot = index === 0;
-
-      setSvgPresentationAttribute(cloneEl, 'fill', cs.fill);
-      setSvgPresentationAttribute(cloneEl, 'stroke', cs.stroke);
-      setSvgPresentationAttribute(cloneEl, 'stroke-width', cs.strokeWidth);
-      setSvgPresentationAttribute(cloneEl, 'stroke-linecap', cs.strokeLinecap);
-      setSvgPresentationAttribute(cloneEl, 'stroke-linejoin', cs.strokeLinejoin);
-      setSvgPresentationAttribute(cloneEl, 'stroke-miterlimit', cs.strokeMiterlimit);
-      setSvgPresentationAttribute(cloneEl, 'stroke-dasharray', cs.strokeDasharray);
-      setSvgPresentationAttribute(cloneEl, 'fill-rule', cs.fillRule);
-      setSvgPresentationAttribute(cloneEl, 'clip-rule', cs.clipRule);
-      setSvgPresentationAttribute(cloneEl, 'vector-effect', cs.vectorEffect);
-
-      if (!isRoot) {
-        setSvgPresentationAttribute(cloneEl, 'opacity', cs.opacity);
-        setSvgPresentationAttribute(cloneEl, 'fill-opacity', cs.fillOpacity);
-        setSvgPresentationAttribute(cloneEl, 'stroke-opacity', cs.strokeOpacity);
+    function getDataRows(container) {
+      const seen = new Set();
+      const rows = [];
+      const selectors = ['tr', '[role="row"]'];
+
+      for (const selector of selectors) {
+        for (const row of container.querySelectorAll(selector)) {
+          if (seen.has(row) || row.closest('thead')) {
+            continue;
+          }
+          seen.add(row);
+          rows.push(row);
+        }
       }
-    }
-  }
 
-  function setSvgPresentationAttribute(el, name, value) {
-    if (!isUsableSvgPresentationValue(value)) {
-      return;
+      return rows;
     }
 
-    el.setAttribute(name, normalizeSvgPresentationValue(value));
-  }
-
-  function isUsableSvgPresentationValue(value) {
-    if (value === undefined || value === null) {
-      return false;
+    function normalizePaginationText(value) {
+      return String(value || '').replace(/\s+/g, ' ').trim();
     }
-
-    const normalized = String(value).trim();
-    return normalized !== '' && normalized !== 'normal' && normalized !== 'auto';
-  }
-
-  function normalizeSvgPresentationValue(value) {
-    return String(value).trim();
-  }
-
-  function formatSvgNumber(value) {
-    const number = Number(value);
-    if (!Number.isFinite(number)) {
-      return '1';
-    }
-    return String(Math.max(Math.round(number * 1000) / 1000, 1));
-  }
-
+  });
+
+  await waitForCanvasPaint(page);
+}
+
+async function waitForCanvasPaint(page) {
+  const canvasCount = await page.locator('canvas').count();
+  if (canvasCount === 0) {
+    return;
+  }
+
+  try {
+    await page.waitForFunction(() => {
+      const canvases = Array.from(document.querySelectorAll('canvas'))
+        .filter((canvas) => {
+          const rect = canvas.getBoundingClientRect();
+          const cs = window.getComputedStyle(canvas);
+          const opacity = parseFloat(cs.opacity);
+          return rect.width > 0
+            && rect.height > 0
+            && cs.display !== 'none'
+            && cs.visibility !== 'hidden'
+            && (!Number.isFinite(opacity) || opacity > 0);
+        });
+
+      if (canvases.length === 0) {
+        return true;
+      }
+
+      const now = performance.now();
+      const state = window.__morphusCanvasCaptureState || {
+        startedAt: now,
+        lastSignature: '',
+        stableCount: 0,
+      };
+
+      const snapshots = canvases.map((canvas) => captureCanvasSnapshot(canvas));
+      const readableSnapshots = snapshots.filter((snapshot) => snapshot.readable);
+      if (readableSnapshots.length === 0) {
+        return true;
+      }
+
+      const signature = readableSnapshots.map((snapshot) => snapshot.signature).join('|');
+      if (signature && signature === state.lastSignature) {
+        state.stableCount += 1;
+      } else {
+        state.lastSignature = signature;
+        state.stableCount = 0;
+      }
+
+      window.__morphusCanvasCaptureState = state;
+      return state.stableCount >= 2 && now - state.startedAt >= 500;
+
+      function captureCanvasSnapshot(canvas) {
+        const width = Math.floor(canvas.width || 0);
+        const height = Math.floor(canvas.height || 0);
+        if (width <= 0 || height <= 0) {
+          return { readable: false };
+        }
+
+        let src = '';
+        try {
+          src = canvas.toDataURL('image/png');
+        } catch (err) {
+          return { readable: false };
+        }
+
+        canvas.__morphusCanvasCaptureSrc = src;
+        return {
+          readable: Boolean(src && src !== 'data:,'),
+          signature: `${width}x${height}:${src.length}:${hashString(src)}`,
+        };
+      }
+
+      function hashString(value) {
+        let hash = 2166136261;
+        const text = String(value || '');
+        for (let index = 0; index < text.length; index++) {
+          hash ^= text.charCodeAt(index);
+          hash = Math.imul(hash, 16777619);
+        }
+        return hash >>> 0;
+      }
+    }, null, { timeout: 2500, polling: 80 });
+  } catch (err) {
+    // Continue with the best available canvas state instead of failing conversion.
+  }
+}
+
+function normalizeBaseUrl(baseUrl) {
+  if (!baseUrl) return null;
+  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(baseUrl)) return baseUrl;
+
+  const absPath = resolve(baseUrl);
+  const targetPath = existsSync(absPath) && !statSync(absPath).isDirectory()
+    ? dirname(absPath)
+    : absPath;
+
+  let href = pathToFileURL(targetPath).href;
+  if (!href.endsWith('/')) {
+    href += '/';
+  }
+  return href;
+}
+
+function injectBaseHref(html, baseHref) {
+  if (!baseHref || /<base\s/i.test(html)) {
+    return html;
+  }
+
+  const baseTag = `<base href="${escapeHtmlAttribute(baseHref)}">`;
+  if (/<head[^>]*>/i.test(html)) {
+    return html.replace(/<head([^>]*)>/i, `<head$1>\n${baseTag}`);
+  }
+
+  if (/<html[^>]*>/i.test(html)) {
+    return html.replace(/<html([^>]*)>/i, `<html$1><head>${baseTag}</head>`);
+  }
+
+  return `<!DOCTYPE html><html><head>${baseTag}</head><body>${html}</body></html>`;
+}
+
+function escapeHtmlAttribute(value) {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * This function is serialized and run inside the browser context.
+ * It must be self-contained (no imports).
+ */
+function walkDOMInBrowser() {
+  const SKIP_TAGS = new Set(['SCRIPT', 'STYLE', 'LINK', 'META', 'HEAD', 'NOSCRIPT']);
+  const TEXT_TAGS = new Set(['p', 'span', 'a', 'label', 'em', 'strong', 'b', 'i', 'small', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th']);
+  const INLINE_TAGS = new Set(['span', 'a', 'label', 'em', 'strong', 'b', 'i', 'small', 'mark', 'sup', 'sub', 'u', 's', 'code', 'br', 'wbr']);
+  const TEXT_INPUT_TYPES = new Set([
+    '',
+    'date',
+    'datetime-local',
+    'email',
+    'month',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'time',
+    'url',
+    'week',
+  ]);
+
+  function getNode(el, depth = 0) {
+    if (SKIP_TAGS.has(el.tagName)) return null;
+
+    const rect = el.getBoundingClientRect();
+    const cs = window.getComputedStyle(el);
+    const csBefore = window.getComputedStyle(el, '::before');
+    const csAfter = window.getComputedStyle(el, '::after');
+    const tag = el.tagName.toLowerCase();
+    const isSvg = tag === 'svg';
+    const isImage = tag === 'img';
+    const isCanvas = tag === 'canvas';
+
+    // Skip invisible/zero-size elements
+    if (rect.width === 0 && rect.height === 0 && cs.position === 'static') return null;
+    if (isVisuallyHiddenElement(cs)) return null;
+
+    const rawText = normalizeTextContent(el.innerText || el.textContent || '');
+    const hasVisualBox =
+      !isTransparentColor(cs.backgroundColor) ||
+      cs.backgroundImage !== 'none' ||
+      cs.borderStyle !== 'none' ||
+      parseFloat(cs.borderTopWidth) > 0 ||
+      parseFloat(cs.borderRightWidth) > 0 ||
+      parseFloat(cs.borderBottomWidth) > 0 ||
+      parseFloat(cs.borderLeftWidth) > 0 ||
+      parseFloat(cs.paddingTop) > 0 ||
+      parseFloat(cs.paddingRight) > 0 ||
+      parseFloat(cs.paddingBottom) > 0 ||
+      parseFloat(cs.paddingLeft) > 0 ||
+      cs.boxShadow !== 'none';
+    const hasOnlyInlineTextChildren = Boolean(rawText) && Array.from(el.children).length > 0 && Array.from(el.children).every((child) => isInlineTextChild(child));
+    const isTextContainer = Boolean(rawText)
+      && !hasVisualBox
+      && !hasRenderablePseudo(csBefore)
+      && !hasRenderablePseudo(csAfter)
+      && canCollapseToTextContainer(el, tag, cs, hasOnlyInlineTextChildren);
+
+    const textData = rawText ? extractTextData(el) : null;
+    const beforeData = extractPseudoElementData(el, tag, cs, csBefore, 'before');
+    const afterData = extractPseudoElementData(el, tag, cs, csAfter, 'after');
+    const formControl = extractFormControlData(el, tag, cs);
+    const svgMarkup = isSvg ? serializeSvgElement(el, rect) : null;
+    const imageData = isImage
+      ? extractImageData(el)
+      : isCanvas
+        ? extractCanvasImageData(el)
+        : null;
+
+    const children = isSvg || isImage || isCanvas || isTextContainer
+      ? []
+      : Array.from(el.childNodes)
+          .map((child) => getChildNode(child, el, cs, depth + 1))
+          .filter(Boolean);
+
+    return {
+      tag,
+      id: el.id || null,
+      classList: Array.from(el.classList),
+      text: rawText || null,
+      textRuns: textData?.runs || [],
+      isTextContainer,
+      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      computed: extractRelevantStyles(cs),
+      ...(formControl ? { formControl } : {}),
+      ...(svgMarkup ? { svgMarkup } : {}),
+      ...(imageData ? { imageData } : {}),
+      pseudo: {
+        before: beforeData,
+        after: afterData,
+      },
+      children,
+    };
+  }
+
+  function extractFormControlData(el, tag, computedStyles) {
+    if (tag !== 'input' && tag !== 'textarea') {
+      return null;
+    }
+
+    const type = tag === 'input'
+      ? String(el.getAttribute('type') || 'text').trim().toLowerCase()
+      : 'textarea';
+
+    if (tag === 'input' && !TEXT_INPUT_TYPES.has(type)) {
+      return null;
+    }
+
+    const placeholder = normalizeFormControlText(el.getAttribute('placeholder') || '', tag === 'textarea');
+    const value = type === 'password'
+      ? ''
+      : normalizeFormControlText(el.value || '', tag === 'textarea');
+
+    if (!placeholder && !value) {
+      return null;
+    }
+
+    const placeholderComputed = placeholder
+      ? extractPlaceholderStyles(el, computedStyles)
+      : null;
+
+    return {
+      type,
+      value,
+      placeholder,
+      ...(placeholderComputed ? { placeholderComputed } : {}),
+    };
+  }
+
+  function extractPlaceholderStyles(el, fallbackStyles) {
+    try {
+      const placeholderStyles = window.getComputedStyle(el, '::placeholder');
+      if (placeholderStyles) {
+        return extractRelevantStyles(placeholderStyles);
+      }
+    } catch (err) {}
+
+    return extractRelevantStyles(fallbackStyles);
+  }
+
+  function extractRelevantStyles(cs) {
+    return {
+      display: cs.display,
+      position: cs.position,
+      zIndex: cs.zIndex,
+      // Layout
+      flexDirection: cs.flexDirection,
+      justifyContent: cs.justifyContent,
+      alignItems: cs.alignItems,
+      flexWrap: cs.flexWrap,
+      flexGrow: cs.flexGrow,
+      flexShrink: cs.flexShrink,
+      flexBasis: cs.flexBasis,
+      gap: cs.gap,
+      columnGap: cs.columnGap,
+      rowGap: cs.rowGap,
+      gridTemplateColumns: cs.gridTemplateColumns,
+      gridTemplateRows: cs.gridTemplateRows,
+      gridRow: cs.gridRow,
+      gridColumn: cs.gridColumn,
+      // Sizing
+      width: cs.width,
+      height: cs.height,
+      minWidth: cs.minWidth,
+      maxWidth: cs.maxWidth,
+      minHeight: cs.minHeight,
+      // Spacing
+      paddingTop: cs.paddingTop,
+      paddingRight: cs.paddingRight,
+      paddingBottom: cs.paddingBottom,
+      paddingLeft: cs.paddingLeft,
+      marginTop: cs.marginTop,
+      marginRight: cs.marginRight,
+      marginBottom: cs.marginBottom,
+      marginLeft: cs.marginLeft,
+      // Visual
+      backgroundColor: cs.backgroundColor,
+      backgroundImage: cs.backgroundImage,
+      backgroundSize: cs.backgroundSize,
+      backgroundPosition: cs.backgroundPosition,
+      objectFit: cs.objectFit,
+      objectPosition: cs.objectPosition,
+      color: cs.color,
+      opacity: cs.opacity,
+      borderRadius: cs.borderRadius,
+      borderTopLeftRadius: cs.borderTopLeftRadius,
+      borderTopRightRadius: cs.borderTopRightRadius,
+      borderBottomRightRadius: cs.borderBottomRightRadius,
+      borderBottomLeftRadius: cs.borderBottomLeftRadius,
+      border: cs.border,
+      borderWidth: cs.borderWidth,
+      borderColor: cs.borderColor,
+      borderStyle: cs.borderStyle,
+      borderTopWidth: cs.borderTopWidth,
+      borderRightWidth: cs.borderRightWidth,
+      borderBottomWidth: cs.borderBottomWidth,
+      borderLeftWidth: cs.borderLeftWidth,
+      borderTopColor: cs.borderTopColor,
+      borderRightColor: cs.borderRightColor,
+      borderBottomColor: cs.borderBottomColor,
+      borderLeftColor: cs.borderLeftColor,
+      borderTopStyle: cs.borderTopStyle,
+      borderRightStyle: cs.borderRightStyle,
+      borderBottomStyle: cs.borderBottomStyle,
+      borderLeftStyle: cs.borderLeftStyle,
+      boxShadow: cs.boxShadow,
+      overflow: cs.overflow,
+      overflowX: cs.overflowX,
+      overflowY: cs.overflowY,
+      clipPath: cs.clipPath,
+      mixBlendMode: cs.mixBlendMode,
+      transform: cs.transform,
+      // Typography
+      fontFamily: cs.fontFamily,
+      fontSize: cs.fontSize,
+      fontWeight: cs.fontWeight,
+      fontStyle: cs.fontStyle,
+      lineHeight: cs.lineHeight,
+      letterSpacing: cs.letterSpacing,
+      textAlign: cs.textAlign,
+      textTransform: cs.textTransform,
+      whiteSpace: cs.whiteSpace,
+      textOverflow: cs.textOverflow,
+      textDecoration: cs.textDecoration,
+      webkitTextStrokeWidth: cs.webkitTextStrokeWidth,
+      webkitTextStrokeColor: cs.webkitTextStrokeColor,
+      // Positioning
+      top: cs.top,
+      right: cs.right,
+      bottom: cs.bottom,
+      left: cs.left,
+      inset: cs.inset,
+      // Content (for pseudo-elements)
+      content: cs.content,
+    };
+  }
+
+  function isVisuallyHiddenElement(cs) {
+    if (!cs) {
+      return true;
+    }
+
+    const opacity = parseFloat(cs.opacity);
+    return cs.display === 'none'
+      || cs.visibility === 'hidden'
+      || (Number.isFinite(opacity) && opacity <= 0);
+  }
+
+  function extractImageData(el) {
+    const src = String(el.currentSrc || el.src || el.getAttribute('src') || '').trim();
+    if (!src) {
+      return null;
+    }
+
+    return {
+      src,
+      alt: el.getAttribute('alt') || '',
+      naturalWidth: Number.isFinite(el.naturalWidth) ? el.naturalWidth : 0,
+      naturalHeight: Number.isFinite(el.naturalHeight) ? el.naturalHeight : 0,
+    };
+  }
+
+  function extractCanvasImageData(el) {
+    const width = Number(el.width) || 0;
+    const height = Number(el.height) || 0;
+    if (width <= 0 || height <= 0 || typeof el.toDataURL !== 'function') {
+      return null;
+    }
+
+    let src = String(el.__morphusCanvasCaptureSrc || '');
+    try {
+      src = src || el.toDataURL('image/png');
+    } catch (err) {
+      return null;
+    }
+
+    if (!src || src === 'data:,') {
+      return null;
+    }
+
+    return {
+      src,
+      alt: el.getAttribute('aria-label') || el.getAttribute('title') || '',
+      naturalWidth: width,
+      naturalHeight: height,
+    };
+  }
+
+  function extractTextData(el) {
+    const runs = [];
+    const pieces = [];
+    let lineIndex = 0;
+
+    function pushText(text, styleEl) {
+      const normalized = normalizeTextFragment(text);
+      if (!normalized) return;
+      pieces.push(normalized);
+      runs.push({
+        text: normalized,
+        lineIndex,
+        computed: extractTextRunStyles(window.getComputedStyle(styleEl)),
+      });
+    }
+
+    function walkText(node, styleEl) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        pushText(node.textContent || '', styleEl);
+        return;
+      }
+
+      if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+      const element = node;
+      const tagName = element.tagName.toLowerCase();
+
+      if (tagName === 'br') {
+        pieces.push('\n');
+        lineIndex++;
+        return;
+      }
+
+      const nextStyleEl = element;
+      for (const child of element.childNodes) {
+        walkText(child, nextStyleEl);
+      }
+    }
+
+    for (const child of el.childNodes) {
+      walkText(child, el);
+    }
+
+    const text = pieces
+      .join('')
+      .replace(/[ \t]*\n[ \t]*/g, '\n')
+      .replace(/[ \t]{2,}/g, ' ')
+      .trim();
+
+    return { text, runs };
+  }
+
+  function extractTextRunStyles(cs) {
+    return {
+      display: cs.display,
+      position: cs.position,
+      fontFamily: cs.fontFamily,
+      fontSize: cs.fontSize,
+      fontWeight: cs.fontWeight,
+      fontStyle: cs.fontStyle,
+      lineHeight: cs.lineHeight,
+      letterSpacing: cs.letterSpacing,
+      textAlign: cs.textAlign,
+      textTransform: cs.textTransform,
+      color: cs.color,
+      opacity: cs.opacity,
+      textDecoration: cs.textDecoration,
+      webkitTextStrokeWidth: cs.webkitTextStrokeWidth,
+      webkitTextStrokeColor: cs.webkitTextStrokeColor,
+    };
+  }
+
+  function serializeSvgElement(svgEl, rect) {
+    const clone = svgEl.cloneNode(true);
+
+    clone.setAttribute('xmlns', clone.getAttribute('xmlns') || 'http://www.w3.org/2000/svg');
+    clone.setAttribute('width', formatSvgNumber(rect.width));
+    clone.setAttribute('height', formatSvgNumber(rect.height));
+    clone.removeAttribute('opacity');
+    if (clone.style) {
+      clone.style.removeProperty('opacity');
+    }
+
+    inlineSvgPresentationStyles(svgEl, clone);
+
+    return new XMLSerializer().serializeToString(clone);
+  }
+
+  function inlineSvgPresentationStyles(sourceRoot, cloneRoot) {
+    const sourceElements = [sourceRoot].concat(Array.from(sourceRoot.querySelectorAll('*')));
+    const cloneElements = [cloneRoot].concat(Array.from(cloneRoot.querySelectorAll('*')));
+
+    for (let index = 0; index < sourceElements.length; index++) {
+      const sourceEl = sourceElements[index];
+      const cloneEl = cloneElements[index];
+      if (!sourceEl || !cloneEl) continue;
+
+      cloneEl.removeAttribute('data-morphus-animated');
+      const cs = window.getComputedStyle(sourceEl);
+      const isRoot = index === 0;
+
+      setSvgPresentationAttribute(cloneEl, 'fill', cs.fill);
+      setSvgPresentationAttribute(cloneEl, 'stroke', cs.stroke);
+      setSvgPresentationAttribute(cloneEl, 'stroke-width', cs.strokeWidth);
+      setSvgPresentationAttribute(cloneEl, 'stroke-linecap', cs.strokeLinecap);
+      setSvgPresentationAttribute(cloneEl, 'stroke-linejoin', cs.strokeLinejoin);
+      setSvgPresentationAttribute(cloneEl, 'stroke-miterlimit', cs.strokeMiterlimit);
+      setSvgPresentationAttribute(cloneEl, 'stroke-dasharray', cs.strokeDasharray);
+      setSvgPresentationAttribute(cloneEl, 'fill-rule', cs.fillRule);
+      setSvgPresentationAttribute(cloneEl, 'clip-rule', cs.clipRule);
+      setSvgPresentationAttribute(cloneEl, 'vector-effect', cs.vectorEffect);
+
+      if (!isRoot) {
+        setSvgPresentationAttribute(cloneEl, 'opacity', cs.opacity);
+        setSvgPresentationAttribute(cloneEl, 'fill-opacity', cs.fillOpacity);
+        setSvgPresentationAttribute(cloneEl, 'stroke-opacity', cs.strokeOpacity);
+      }
+    }
+  }
+
+  function setSvgPresentationAttribute(el, name, value) {
+    if (!isUsableSvgPresentationValue(value)) {
+      return;
+    }
+
+    el.setAttribute(name, normalizeSvgPresentationValue(value));
+  }
+
+  function isUsableSvgPresentationValue(value) {
+    if (value === undefined || value === null) {
+      return false;
+    }
+
+    const normalized = String(value).trim();
+    return normalized !== '' && normalized !== 'normal' && normalized !== 'auto';
+  }
+
+  function normalizeSvgPresentationValue(value) {
+    return String(value).trim();
+  }
+
+  function formatSvgNumber(value) {
+    const number = Number(value);
+    if (!Number.isFinite(number)) {
+      return '1';
+    }
+    return String(Math.max(Math.round(number * 1000) / 1000, 1));
+  }
+
   function getChildNode(child, parentEl, parentStyles, depth) {
     if (child.nodeType === Node.TEXT_NODE) {
-      return getDirectTextNode(child, parentStyles);
+      return getDirectTextNode(child, parentEl, parentStyles);
     }
 
     if (child.nodeType === Node.ELEMENT_NODE) {
-      return getNode(child, depth);
-    }
-
-    return null;
-  }
-
-  function getDirectTextNode(textNode, parentStyles) {
-    const normalizedText = normalizeTextFragment(textNode.textContent || '').trim();
-    if (!normalizedText) {
-      return null;
-    }
-
-    const range = document.createRange();
-    range.selectNodeContents(textNode);
-    const rect = range.getBoundingClientRect();
-    if (rect.width === 0 && rect.height === 0) {
-      return null;
-    }
-
-    const computed = extractRelevantStyles(parentStyles);
-    computed.display = 'inline';
-    computed.position = 'static';
-    computed.width = `${rect.width}px`;
-    computed.height = `${rect.height}px`;
-    computed.minWidth = '0px';
-    computed.minHeight = '0px';
-
-    return {
-      tag: 'span',
-      id: null,
-      classList: [],
-      text: normalizedText,
-      textRuns: [{
-        text: normalizedText,
-        lineIndex: 0,
-        computed: extractTextRunStyles(parentStyles),
-      }],
-      isTextContainer: true,
-      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-      computed,
-      pseudo: {
-        before: null,
-        after: null,
-      },
-      children: [],
-    };
-  }
-
-  function normalizeTextFragment(text) {
-    return String(text || '')
-      .replace(/\r/g, '')
-      .replace(/\u00a0/g, ' ')
-      .replace(/\s+/g, ' ');
-  }
-
-  function isInlineTextChild(child) {
-    if (!child || child.nodeType !== Node.ELEMENT_NODE) return false;
-    const childTag = child.tagName.toLowerCase();
-    if (!INLINE_TAGS.has(childTag)) return false;
-
-    const childCs = window.getComputedStyle(child);
-    if (childCs.position !== 'static') return false;
-    if (childCs.display !== 'inline' && childCs.display !== 'contents') return false;
-    return !hasVisualBoxForStyles(childCs);
-  }
-
-  function hasVisualBoxForStyles(cs) {
-    return !isTransparentColor(cs.backgroundColor) ||
-      cs.backgroundImage !== 'none' ||
-      cs.borderStyle !== 'none' ||
-      parseFloat(cs.borderTopWidth) > 0 ||
-      parseFloat(cs.borderRightWidth) > 0 ||
-      parseFloat(cs.borderBottomWidth) > 0 ||
-      parseFloat(cs.borderLeftWidth) > 0 ||
-      parseFloat(cs.paddingTop) > 0 ||
-      parseFloat(cs.paddingRight) > 0 ||
-      parseFloat(cs.paddingBottom) > 0 ||
-      parseFloat(cs.paddingLeft) > 0 ||
-      cs.boxShadow !== 'none';
-  }
-
-  function hasRenderablePseudo(cs) {
-    if (!cs || cs.content === 'none' || cs.content === 'normal') {
-      return false;
-    }
-
-    return parseCssContent(cs.content) !== '' || hasSupportedPseudoVisual(cs);
-  }
-
-  function isVisuallyHiddenPseudo(cs, rect = null, parentRect = null, parentStyles = null) {
-    if (!cs) {
-      return true;
-    }
-
-    const opacity = parseFloat(cs.opacity);
-    if (cs.display === 'none' || cs.visibility === 'hidden' || (Number.isFinite(opacity) && opacity <= 0)) {
-      return true;
-    }
-
-    if (hasCollapsedTransform(cs.transform)) {
-      return true;
-    }
-
-    if (rect && isFullyClippedByClipPath(cs.clipPath, rect)) {
-      return true;
-    }
-
-    if (rect && parentRect && parentStyles && isClippedOutsideParent(rect, parentRect, parentStyles)) {
-      return true;
-    }
-
-    return false;
-  }
-
-  function hasCollapsedTransform(transformValue) {
-    if (!transformValue || transformValue === 'none') {
-      return false;
-    }
-
-    const scale = parseTransformScale(transformValue);
-    if (!scale) {
-      return false;
-    }
-
-    const tolerance = 0.001;
-    return scale.x <= tolerance || scale.y <= tolerance;
-  }
-
-  function parseTransformScale(transformValue) {
-    const value = String(transformValue).trim();
-    const matrixMatch = value.match(/^matrix\(([^)]+)\)$/i);
-    if (matrixMatch) {
-      const values = parseTransformNumbers(matrixMatch[1]);
-      if (values.length === 6) {
-        return {
-          x: Math.hypot(values[0], values[1]),
-          y: Math.hypot(values[2], values[3]),
-        };
+      const node = getNode(child, depth);
+      if (!node) {
+        return null;
       }
-    }
 
-    const matrix3dMatch = value.match(/^matrix3d\(([^)]+)\)$/i);
-    if (matrix3dMatch) {
-      const values = parseTransformNumbers(matrix3dMatch[1]);
-      if (values.length === 16) {
-        return {
-          x: Math.hypot(values[0], values[1], values[2]),
-          y: Math.hypot(values[4], values[5], values[6]),
-        };
+      if (parentEl && parentStyles && clippingEnabled(parentStyles)) {
+        const parentRect = parentEl.getBoundingClientRect();
+        if (isClippedOutsideParent(node.rect, parentRect, parentStyles)) {
+          return null;
+        }
       }
-    }
-
-    return parseScaleFunction(value);
-  }
-
-  function parseTransformNumbers(value) {
-    return String(value)
-      .split(',')
-      .map((part) => parseFloat(part.trim()))
-      .filter((number) => Number.isFinite(number));
-  }
 
-  function parseScaleFunction(value) {
-    const scaleX = value.match(/scaleX\(\s*([-+]?\d*\.?\d+)/i);
-    const scaleY = value.match(/scaleY\(\s*([-+]?\d*\.?\d+)/i);
-    const scale = value.match(/scale\(\s*([-+]?\d*\.?\d+)(?:\s*,\s*([-+]?\d*\.?\d+))?/i);
-
-    if (scaleX || scaleY || scale) {
-      const uniformScale = scale ? Math.abs(parseFloat(scale[1])) : 1;
-      return {
-        x: scaleX ? Math.abs(parseFloat(scaleX[1])) : uniformScale,
-        y: scaleY ? Math.abs(parseFloat(scaleY[1])) : (scale?.[2] ? Math.abs(parseFloat(scale[2])) : uniformScale),
-      };
+      return node;
     }
 
     return null;
   }
 
-  function extractPseudoElementData(el, tag, parentStyles, pseudoStyles, pseudoType) {
-    if (!hasRenderablePseudo(pseudoStyles)) {
-      return null;
-    }
-
-    const content = parseCssContent(pseudoStyles.content);
-    if (!content && !hasSupportedPseudoVisual(pseudoStyles)) {
-      return null;
-    }
-
-    const parentRect = el.getBoundingClientRect();
-    const rect = estimatePseudoTextRect(parentRect, parentStyles, pseudoStyles, pseudoType);
-    const transformedRect = applyPseudoTransformRect(rect, pseudoStyles.transform);
-    const finalRect = transformedRect || rect;
-
-    if (isVisuallyHiddenPseudo(pseudoStyles, finalRect, parentRect, parentStyles)) {
-      return null;
-    }
-
-    if (!content && (finalRect.width <= 0 || finalRect.height <= 0)) {
-      return null;
-    }
-
-    if (finalRect.width === 0 && finalRect.height === 0) {
+  function getDirectTextNode(textNode, parentEl, parentStyles) {
+    const normalizedText = normalizeTextFragment(textNode.textContent || '').trim();
+    if (!normalizedText) {
       return null;
     }
-
-    return {
-      name: `${buildPseudoName(el, tag)}::${pseudoType}`,
-      type: content ? 'text' : 'box',
-      content: content || null,
-      rect: finalRect,
-      fillColor: pseudoStyles.color,
-      opacity: Number.isFinite(parseFloat(pseudoStyles.opacity)) ? parseFloat(pseudoStyles.opacity) : 1,
-      position: pseudoStyles.position,
-      zOrder: resolvePseudoZOrder(pseudoStyles, pseudoType),
-      computed: extractRelevantStyles(pseudoStyles),
-    };
-  }
-
-  function resolvePseudoZOrder(pseudoStyles, pseudoType) {
-    const zIndex = parseFloat(pseudoStyles.zIndex);
-    if (Number.isFinite(zIndex)) {
-      return zIndex < 0 ? 'bottom' : 'top';
-    }
-
-    return pseudoType === 'before' ? 'bottom' : 'top';
-  }
-
-  function hasSupportedPseudoVisual(cs) {
-    return !isTransparentColor(cs.backgroundColor) ||
-      String(cs.backgroundImage || '').includes('linear-gradient') ||
-      cs.borderStyle !== 'none' ||
-      parseFloat(cs.borderTopWidth) > 0 ||
-      parseFloat(cs.borderRightWidth) > 0 ||
-      parseFloat(cs.borderBottomWidth) > 0 ||
-      parseFloat(cs.borderLeftWidth) > 0 ||
-      cs.boxShadow !== 'none';
-  }
-
-  function estimatePseudoTextRect(parentRect, parentStyles, pseudoStyles, pseudoType) {
-    const width = parseCssPx(pseudoStyles.width);
-    const height = parseCssPx(pseudoStyles.height) || parseCssPx(pseudoStyles.lineHeight) || parseCssPx(pseudoStyles.fontSize);
-    const position = pseudoStyles.position;
-
-    if (position === 'absolute' || position === 'fixed') {
-      return estimatePositionedPseudoRect(parentRect, pseudoStyles, width, height);
-    }
-
-    if (parentStyles.display === 'flex' || parentStyles.display === 'inline-flex') {
-      return estimateFlexPseudoRect(parentRect, parentStyles, width, height, pseudoType);
-    }
-
-    return {
-      x: pseudoType === 'before' ? parentRect.x : parentRect.right - width,
-      y: parentRect.y + Math.max((parentRect.height - height) / 2, 0),
-      width,
-      height,
-    };
-  }
-
-  function applyPseudoTransformRect(rect, transformValue) {
-    const matrix = parseCssTransformMatrix(transformValue);
-    if (!matrix) {
-      return rect;
-    }
-
-    const points = [
-      transformPoint(matrix, rect.x, rect.y),
-      transformPoint(matrix, rect.x + rect.width, rect.y),
-      transformPoint(matrix, rect.x, rect.y + rect.height),
-      transformPoint(matrix, rect.x + rect.width, rect.y + rect.height),
-    ];
-
-    const xs = points.map((point) => point.x);
-    const ys = points.map((point) => point.y);
-    const minX = Math.min(...xs);
-    const maxX = Math.max(...xs);
-    const minY = Math.min(...ys);
-    const maxY = Math.max(...ys);
-
-    return {
-      x: minX,
-      y: minY,
-      width: Math.max(maxX - minX, 0),
-      height: Math.max(maxY - minY, 0),
-    };
-  }
-
-  function parseCssTransformMatrix(transformValue) {
-    const value = String(transformValue || '').trim();
-    if (!value || value === 'none') {
+
+    const range = document.createRange();
+    range.selectNodeContents(textNode);
+    const rect = range.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
       return null;
     }
 
-    const matrixMatch = value.match(/^matrix\(([^)]+)\)$/i);
-    if (matrixMatch) {
-      const values = parseTransformNumbers(matrixMatch[1]);
-      if (values.length === 6) {
-        return {
-          a: values[0],
-          b: values[1],
-          c: values[2],
-          d: values[3],
-          e: values[4],
-          f: values[5],
-        };
+    if (parentEl && parentStyles && clippingEnabled(parentStyles)) {
+      const parentRect = parentEl.getBoundingClientRect();
+      if (isClippedOutsideParent(rect, parentRect, parentStyles)) {
+        return null;
       }
     }
 
-    const matrix3dMatch = value.match(/^matrix3d\(([^)]+)\)$/i);
-    if (matrix3dMatch) {
-      const values = parseTransformNumbers(matrix3dMatch[1]);
-      if (values.length === 16) {
-        return {
-          a: values[0],
-          b: values[1],
-          c: values[4],
-          d: values[5],
-          e: values[12],
-          f: values[13],
-        };
-      }
-    }
-
-    return null;
-  }
-
-  function transformPoint(matrix, x, y) {
-    return {
-      x: (matrix.a * x) + (matrix.c * y) + matrix.e,
-      y: (matrix.b * x) + (matrix.d * y) + matrix.f,
-    };
-  }
-
-  function isFullyClippedByClipPath(clipPath, rect) {
-    const value = String(clipPath || '').trim();
-    if (!value || value === 'none') {
-      return false;
-    }
-
-    const insetMatch = value.match(/^inset\((.+)\)$/i);
-    if (!insetMatch) {
-      return false;
-    }
-
-    const parts = splitInsetTokens(insetMatch[1]);
-    const [topToken, rightToken, bottomToken, leftToken] = normalizeInsetTokens(parts);
-    const top = resolveInsetValue(topToken, rect.height);
-    const right = resolveInsetValue(rightToken, rect.width);
-    const bottom = resolveInsetValue(bottomToken, rect.height);
-    const left = resolveInsetValue(leftToken, rect.width);
-
-    return rect.width - left - right <= 0 || rect.height - top - bottom <= 0;
-  }
-
-  function splitInsetTokens(value) {
-    return String(value)
-      .split(/\s+round\s+/i)[0]
-      .trim()
-      .split(/\s+/)
-      .filter(Boolean);
-  }
-
-  function normalizeInsetTokens(tokens) {
-    if (tokens.length === 1) {
-      return [tokens[0], tokens[0], tokens[0], tokens[0]];
-    }
-    if (tokens.length === 2) {
-      return [tokens[0], tokens[1], tokens[0], tokens[1]];
-    }
-    if (tokens.length === 3) {
-      return [tokens[0], tokens[1], tokens[2], tokens[1]];
-    }
-    return [tokens[0], tokens[1], tokens[2], tokens[3]];
-  }
-
-  function resolveInsetValue(token, size) {
-    const value = String(token || '').trim();
-    if (!value || value === 'auto') {
-      return 0;
-    }
-    if (value.endsWith('%')) {
-      const ratio = parseFloat(value);
-      return Number.isFinite(ratio) ? (ratio / 100) * size : 0;
-    }
-    const parsed = parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : 0;
-  }
-
-  function isClippedOutsideParent(rect, parentRect, parentStyles) {
-    if (!clippingEnabled(parentStyles)) {
-      return false;
-    }
-
-    const intersectionWidth = Math.min(rect.x + rect.width, parentRect.x + parentRect.width) - Math.max(rect.x, parentRect.x);
-    const intersectionHeight = Math.min(rect.y + rect.height, parentRect.y + parentRect.height) - Math.max(rect.y, parentRect.y);
-
-    return intersectionWidth <= 0.5 || intersectionHeight <= 0.5;
-  }
-
-  function clippingEnabled(parentStyles) {
-    if (!parentStyles) {
-      return false;
-    }
-
-    return ['overflow', 'overflowX', 'overflowY'].some((prop) => {
-      const value = String(parentStyles[prop] || '').toLowerCase();
-      return value === 'hidden' || value === 'clip' || value === 'scroll' || value === 'auto';
-    });
-  }
-
-  function estimatePositionedPseudoRect(parentRect, pseudoStyles, width, height) {
-    const left = pseudoStyles.left !== 'auto' ? parseCssPx(pseudoStyles.left) : null;
-    const right = pseudoStyles.right !== 'auto' ? parseCssPx(pseudoStyles.right) : null;
-    const top = pseudoStyles.top !== 'auto' ? parseCssPx(pseudoStyles.top) : null;
-    const bottom = pseudoStyles.bottom !== 'auto' ? parseCssPx(pseudoStyles.bottom) : null;
-
-    return {
-      x: parentRect.x + (left !== null ? left : parentRect.width - width - (right || 0)),
-      y: parentRect.y + (top !== null ? top : parentRect.height - height - (bottom || 0)),
-      width,
-      height,
-    };
-  }
-
-  function estimateFlexPseudoRect(parentRect, parentStyles, width, height, pseudoType) {
-    const isRow = parentStyles.flexDirection !== 'column' && parentStyles.flexDirection !== 'column-reverse';
-    const isReverse = parentStyles.flexDirection === 'row-reverse' || parentStyles.flexDirection === 'column-reverse';
-    const isEnd = (pseudoType === 'after') !== isReverse;
-
-    if (isRow) {
-      return {
-        x: isEnd ? parentRect.right - width : parentRect.x,
-        y: alignCrossAxis(parentRect.y, parentRect.height, height, parentStyles.alignItems),
-        width,
-        height,
-      };
-    }
-
-    return {
-      x: alignCrossAxis(parentRect.x, parentRect.width, width, parentStyles.alignItems),
-      y: isEnd ? parentRect.bottom - height : parentRect.y,
-      width,
-      height,
-    };
-  }
-
-  function alignCrossAxis(start, parentSize, childSize, alignItems) {
-    if (alignItems === 'center') {
-      return start + Math.max((parentSize - childSize) / 2, 0);
-    }
-    if (alignItems === 'flex-end') {
-      return start + Math.max(parentSize - childSize, 0);
-    }
-    return start;
-  }
-
-  function parseCssContent(value) {
-    if (!value || value === 'none' || value === 'normal') return '';
-    const trimmed = String(value).trim();
-    if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
-      return trimmed.slice(1, -1)
-        .replace(/\\"/g, '"')
-        .replace(/\\'/g, "'");
-    }
-    return trimmed;
-  }
-
-  function parseCssPx(value) {
-    if (!value || value === 'auto' || value === 'normal' || value === 'none') return 0;
-    const parsed = parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : 0;
-  }
-
-  function buildPseudoName(el, tag) {
-    const classPart = Array.from(el.classList || []).slice(0, 2).join('.');
-    return classPart ? `${tag}.${classPart}` : tag;
-  }
-
-  function canCollapseToTextContainer(el, tag, cs, hasOnlyInlineTextChildren) {
-    const hasElementChildren = el.children.length > 0;
-    if (!hasElementChildren) {
-      return true;
-    }
-
-    if (!hasOnlyInlineTextChildren) {
-      return false;
-    }
-
-    return TEXT_TAGS.has(tag) || tag === 'div';
-  }
-
-function normalizeTextContent(value) {
-  return String(value || '')
-    .replace(/\r/g, '')
-    .replace(/\u00a0/g, ' ')
-    .replace(/[ \t]+\n/g, '\n')
-    .replace(/\n[ \t]+/g, '\n')
-    .replace(/[ \t]{2,}/g, ' ')
-    .trim();
-}
-
-function normalizeFormControlText(value, preserveLineBreaks = false) {
-  const text = String(value || '').replace(/\r/g, '');
-  if (preserveLineBreaks) {
-    return text.trim();
-  }
-  return normalizeTextContent(text);
-}
-
-function isTransparentColor(value) {
-  return !value || value === 'transparent' || value === 'none' || value === 'rgba(0, 0, 0, 0)';
-}
-
-  return getNode(document.body);
-}
+    const computed = extractRelevantStyles(parentStyles);
+    computed.display = 'inline';
+    computed.position = 'static';
+    computed.width = `${rect.width}px`;
+    computed.height = `${rect.height}px`;
+    computed.minWidth = '0px';
+    computed.minHeight = '0px';
+
+    return {
+      tag: 'span',
+      id: null,
+      classList: [],
+      text: normalizedText,
+      textRuns: [{
+        text: normalizedText,
+        lineIndex: 0,
+        computed: extractTextRunStyles(parentStyles),
+      }],
+      isTextContainer: true,
+      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      computed,
+      pseudo: {
+        before: null,
+        after: null,
+      },
+      children: [],
+    };
+  }
+
+  function normalizeTextFragment(text) {
+    return String(text || '')
+      .replace(/\r/g, '')
+      .replace(/\u00a0/g, ' ')
+      .replace(/\s+/g, ' ');
+  }
+
+  function isInlineTextChild(child) {
+    if (!child || child.nodeType !== Node.ELEMENT_NODE) return false;
+    const childTag = child.tagName.toLowerCase();
+    if (!INLINE_TAGS.has(childTag)) return false;
+
+    const childCs = window.getComputedStyle(child);
+    if (childCs.position !== 'static') return false;
+    if (childCs.display !== 'inline' && childCs.display !== 'contents') return false;
+    return !hasVisualBoxForStyles(childCs);
+  }
+
+  function hasVisualBoxForStyles(cs) {
+    return !isTransparentColor(cs.backgroundColor) ||
+      cs.backgroundImage !== 'none' ||
+      cs.borderStyle !== 'none' ||
+      parseFloat(cs.borderTopWidth) > 0 ||
+      parseFloat(cs.borderRightWidth) > 0 ||
+      parseFloat(cs.borderBottomWidth) > 0 ||
+      parseFloat(cs.borderLeftWidth) > 0 ||
+      parseFloat(cs.paddingTop) > 0 ||
+      parseFloat(cs.paddingRight) > 0 ||
+      parseFloat(cs.paddingBottom) > 0 ||
+      parseFloat(cs.paddingLeft) > 0 ||
+      cs.boxShadow !== 'none';
+  }
+
+  function hasRenderablePseudo(cs) {
+    if (!cs || cs.content === 'none' || cs.content === 'normal') {
+      return false;
+    }
+
+    return parseCssContent(cs.content) !== '' || hasSupportedPseudoVisual(cs);
+  }
+
+  function isVisuallyHiddenPseudo(cs, rect = null, parentRect = null, parentStyles = null) {
+    if (!cs) {
+      return true;
+    }
+
+    const opacity = parseFloat(cs.opacity);
+    if (cs.display === 'none' || cs.visibility === 'hidden' || (Number.isFinite(opacity) && opacity <= 0)) {
+      return true;
+    }
+
+    if (hasCollapsedTransform(cs.transform)) {
+      return true;
+    }
+
+    if (rect && isFullyClippedByClipPath(cs.clipPath, rect)) {
+      return true;
+    }
+
+    if (rect && parentRect && parentStyles && isClippedOutsideParent(rect, parentRect, parentStyles)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  function hasCollapsedTransform(transformValue) {
+    if (!transformValue || transformValue === 'none') {
+      return false;
+    }
+
+    const scale = parseTransformScale(transformValue);
+    if (!scale) {
+      return false;
+    }
+
+    const tolerance = 0.001;
+    return scale.x <= tolerance || scale.y <= tolerance;
+  }
+
+  function parseTransformScale(transformValue) {
+    const value = String(transformValue).trim();
+    const matrixMatch = value.match(/^matrix\(([^)]+)\)$/i);
+    if (matrixMatch) {
+      const values = parseTransformNumbers(matrixMatch[1]);
+      if (values.length === 6) {
+        return {
+          x: Math.hypot(values[0], values[1]),
+          y: Math.hypot(values[2], values[3]),
+        };
+      }
+    }
+
+    const matrix3dMatch = value.match(/^matrix3d\(([^)]+)\)$/i);
+    if (matrix3dMatch) {
+      const values = parseTransformNumbers(matrix3dMatch[1]);
+      if (values.length === 16) {
+        return {
+          x: Math.hypot(values[0], values[1], values[2]),
+          y: Math.hypot(values[4], values[5], values[6]),
+        };
+      }
+    }
+
+    return parseScaleFunction(value);
+  }
+
+  function parseTransformNumbers(value) {
+    return String(value)
+      .split(',')
+      .map((part) => parseFloat(part.trim()))
+      .filter((number) => Number.isFinite(number));
+  }
+
+  function parseScaleFunction(value) {
+    const scaleX = value.match(/scaleX\(\s*([-+]?\d*\.?\d+)/i);
+    const scaleY = value.match(/scaleY\(\s*([-+]?\d*\.?\d+)/i);
+    const scale = value.match(/scale\(\s*([-+]?\d*\.?\d+)(?:\s*,\s*([-+]?\d*\.?\d+))?/i);
+
+    if (scaleX || scaleY || scale) {
+      const uniformScale = scale ? Math.abs(parseFloat(scale[1])) : 1;
+      return {
+        x: scaleX ? Math.abs(parseFloat(scaleX[1])) : uniformScale,
+        y: scaleY ? Math.abs(parseFloat(scaleY[1])) : (scale?.[2] ? Math.abs(parseFloat(scale[2])) : uniformScale),
+      };
+    }
+
+    return null;
+  }
+
+  function extractPseudoElementData(el, tag, parentStyles, pseudoStyles, pseudoType) {
+    if (!hasRenderablePseudo(pseudoStyles)) {
+      return null;
+    }
+
+    const content = parseCssContent(pseudoStyles.content);
+    if (!content && !hasSupportedPseudoVisual(pseudoStyles)) {
+      return null;
+    }
+
+    const parentRect = el.getBoundingClientRect();
+    const rect = estimatePseudoTextRect(parentRect, parentStyles, pseudoStyles, pseudoType);
+    const transformedRect = applyPseudoTransformRect(rect, pseudoStyles.transform);
+    const finalRect = transformedRect || rect;
+
+    if (isVisuallyHiddenPseudo(pseudoStyles, finalRect, parentRect, parentStyles)) {
+      return null;
+    }
+
+    if (!content && (finalRect.width <= 0 || finalRect.height <= 0)) {
+      return null;
+    }
+
+    if (finalRect.width === 0 && finalRect.height === 0) {
+      return null;
+    }
+
+    return {
+      name: `${buildPseudoName(el, tag)}::${pseudoType}`,
+      type: content ? 'text' : 'box',
+      content: content || null,
+      rect: finalRect,
+      fillColor: pseudoStyles.color,
+      opacity: Number.isFinite(parseFloat(pseudoStyles.opacity)) ? parseFloat(pseudoStyles.opacity) : 1,
+      position: pseudoStyles.position,
+      zOrder: resolvePseudoZOrder(pseudoStyles, pseudoType),
+      computed: extractRelevantStyles(pseudoStyles),
+    };
+  }
+
+  function resolvePseudoZOrder(pseudoStyles, pseudoType) {
+    const zIndex = parseFloat(pseudoStyles.zIndex);
+    if (Number.isFinite(zIndex)) {
+      return zIndex < 0 ? 'bottom' : 'top';
+    }
+
+    return pseudoType === 'before' ? 'bottom' : 'top';
+  }
+
+  function hasSupportedPseudoVisual(cs) {
+    return !isTransparentColor(cs.backgroundColor) ||
+      String(cs.backgroundImage || '').includes('linear-gradient') ||
+      cs.borderStyle !== 'none' ||
+      parseFloat(cs.borderTopWidth) > 0 ||
+      parseFloat(cs.borderRightWidth) > 0 ||
+      parseFloat(cs.borderBottomWidth) > 0 ||
+      parseFloat(cs.borderLeftWidth) > 0 ||
+      cs.boxShadow !== 'none';
+  }
+
+  function estimatePseudoTextRect(parentRect, parentStyles, pseudoStyles, pseudoType) {
+    const width = parseCssPx(pseudoStyles.width);
+    const height = parseCssPx(pseudoStyles.height) || parseCssPx(pseudoStyles.lineHeight) || parseCssPx(pseudoStyles.fontSize);
+    const position = pseudoStyles.position;
+
+    if (position === 'absolute' || position === 'fixed') {
+      return estimatePositionedPseudoRect(parentRect, pseudoStyles, width, height);
+    }
+
+    if (parentStyles.display === 'flex' || parentStyles.display === 'inline-flex') {
+      return estimateFlexPseudoRect(parentRect, parentStyles, width, height, pseudoType);
+    }
+
+    return {
+      x: pseudoType === 'before' ? parentRect.x : parentRect.right - width,
+      y: parentRect.y + Math.max((parentRect.height - height) / 2, 0),
+      width,
+      height,
+    };
+  }
+
+  function applyPseudoTransformRect(rect, transformValue) {
+    const matrix = parseCssTransformMatrix(transformValue);
+    if (!matrix) {
+      return rect;
+    }
+
+    const points = [
+      transformPoint(matrix, rect.x, rect.y),
+      transformPoint(matrix, rect.x + rect.width, rect.y),
+      transformPoint(matrix, rect.x, rect.y + rect.height),
+      transformPoint(matrix, rect.x + rect.width, rect.y + rect.height),
+    ];
+
+    const xs = points.map((point) => point.x);
+    const ys = points.map((point) => point.y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+
+    return {
+      x: minX,
+      y: minY,
+      width: Math.max(maxX - minX, 0),
+      height: Math.max(maxY - minY, 0),
+    };
+  }
+
+  function parseCssTransformMatrix(transformValue) {
+    const value = String(transformValue || '').trim();
+    if (!value || value === 'none') {
+      return null;
+    }
+
+    const matrixMatch = value.match(/^matrix\(([^)]+)\)$/i);
+    if (matrixMatch) {
+      const values = parseTransformNumbers(matrixMatch[1]);
+      if (values.length === 6) {
+        return {
+          a: values[0],
+          b: values[1],
+          c: values[2],
+          d: values[3],
+          e: values[4],
+          f: values[5],
+        };
+      }
+    }
+
+    const matrix3dMatch = value.match(/^matrix3d\(([^)]+)\)$/i);
+    if (matrix3dMatch) {
+      const values = parseTransformNumbers(matrix3dMatch[1]);
+      if (values.length === 16) {
+        return {
+          a: values[0],
+          b: values[1],
+          c: values[4],
+          d: values[5],
+          e: values[12],
+          f: values[13],
+        };
+      }
+    }
+
+    return null;
+  }
+
+  function transformPoint(matrix, x, y) {
+    return {
+      x: (matrix.a * x) + (matrix.c * y) + matrix.e,
+      y: (matrix.b * x) + (matrix.d * y) + matrix.f,
+    };
+  }
+
+  function isFullyClippedByClipPath(clipPath, rect) {
+    const value = String(clipPath || '').trim();
+    if (!value || value === 'none') {
+      return false;
+    }
+
+    const insetMatch = value.match(/^inset\((.+)\)$/i);
+    if (!insetMatch) {
+      return false;
+    }
+
+    const parts = splitInsetTokens(insetMatch[1]);
+    const [topToken, rightToken, bottomToken, leftToken] = normalizeInsetTokens(parts);
+    const top = resolveInsetValue(topToken, rect.height);
+    const right = resolveInsetValue(rightToken, rect.width);
+    const bottom = resolveInsetValue(bottomToken, rect.height);
+    const left = resolveInsetValue(leftToken, rect.width);
+
+    return rect.width - left - right <= 0 || rect.height - top - bottom <= 0;
+  }
+
+  function splitInsetTokens(value) {
+    return String(value)
+      .split(/\s+round\s+/i)[0]
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean);
+  }
+
+  function normalizeInsetTokens(tokens) {
+    if (tokens.length === 1) {
+      return [tokens[0], tokens[0], tokens[0], tokens[0]];
+    }
+    if (tokens.length === 2) {
+      return [tokens[0], tokens[1], tokens[0], tokens[1]];
+    }
+    if (tokens.length === 3) {
+      return [tokens[0], tokens[1], tokens[2], tokens[1]];
+    }
+    return [tokens[0], tokens[1], tokens[2], tokens[3]];
+  }
+
+  function resolveInsetValue(token, size) {
+    const value = String(token || '').trim();
+    if (!value || value === 'auto') {
+      return 0;
+    }
+    if (value.endsWith('%')) {
+      const ratio = parseFloat(value);
+      return Number.isFinite(ratio) ? (ratio / 100) * size : 0;
+    }
+    const parsed = parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+
+  function isClippedOutsideParent(rect, parentRect, parentStyles) {
+    if (!clippingEnabled(parentStyles)) {
+      return false;
+    }
+
+    const intersectionWidth = Math.min(rect.x + rect.width, parentRect.x + parentRect.width) - Math.max(rect.x, parentRect.x);
+    const intersectionHeight = Math.min(rect.y + rect.height, parentRect.y + parentRect.height) - Math.max(rect.y, parentRect.y);
+
+    return intersectionWidth <= 0.5 || intersectionHeight <= 0.5;
+  }
+
+  function clippingEnabled(parentStyles) {
+    if (!parentStyles) {
+      return false;
+    }
+
+    return ['overflow', 'overflowX', 'overflowY'].some((prop) => {
+      const value = String(parentStyles[prop] || '').toLowerCase();
+      return value === 'hidden' || value === 'clip' || value === 'scroll' || value === 'auto';
+    });
+  }
+
+  function estimatePositionedPseudoRect(parentRect, pseudoStyles, width, height) {
+    const left = pseudoStyles.left !== 'auto' ? parseCssPx(pseudoStyles.left) : null;
+    const right = pseudoStyles.right !== 'auto' ? parseCssPx(pseudoStyles.right) : null;
+    const top = pseudoStyles.top !== 'auto' ? parseCssPx(pseudoStyles.top) : null;
+    const bottom = pseudoStyles.bottom !== 'auto' ? parseCssPx(pseudoStyles.bottom) : null;
+
+    return {
+      x: parentRect.x + (left !== null ? left : parentRect.width - width - (right || 0)),
+      y: parentRect.y + (top !== null ? top : parentRect.height - height - (bottom || 0)),
+      width,
+      height,
+    };
+  }
+
+  function estimateFlexPseudoRect(parentRect, parentStyles, width, height, pseudoType) {
+    const isRow = parentStyles.flexDirection !== 'column' && parentStyles.flexDirection !== 'column-reverse';
+    const isReverse = parentStyles.flexDirection === 'row-reverse' || parentStyles.flexDirection === 'column-reverse';
+    const isEnd = (pseudoType === 'after') !== isReverse;
+
+    if (isRow) {
+      return {
+        x: isEnd ? parentRect.right - width : parentRect.x,
+        y: alignCrossAxis(parentRect.y, parentRect.height, height, parentStyles.alignItems),
+        width,
+        height,
+      };
+    }
+
+    return {
+      x: alignCrossAxis(parentRect.x, parentRect.width, width, parentStyles.alignItems),
+      y: isEnd ? parentRect.bottom - height : parentRect.y,
+      width,
+      height,
+    };
+  }
+
+  function alignCrossAxis(start, parentSize, childSize, alignItems) {
+    if (alignItems === 'center') {
+      return start + Math.max((parentSize - childSize) / 2, 0);
+    }
+    if (alignItems === 'flex-end') {
+      return start + Math.max(parentSize - childSize, 0);
+    }
+    return start;
+  }
+
+  function parseCssContent(value) {
+    if (!value || value === 'none' || value === 'normal') return '';
+    const trimmed = String(value).trim();
+    if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+      return trimmed.slice(1, -1)
+        .replace(/\\"/g, '"')
+        .replace(/\\'/g, "'");
+    }
+    return trimmed;
+  }
+
+  function parseCssPx(value) {
+    if (!value || value === 'auto' || value === 'normal' || value === 'none') return 0;
+    const parsed = parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+
+  function buildPseudoName(el, tag) {
+    const classPart = Array.from(el.classList || []).slice(0, 2).join('.');
+    return classPart ? `${tag}.${classPart}` : tag;
+  }
+
+  function canCollapseToTextContainer(el, tag, cs, hasOnlyInlineTextChildren) {
+    const hasElementChildren = el.children.length > 0;
+    if (!hasElementChildren) {
+      return true;
+    }
+
+    if (!hasOnlyInlineTextChildren) {
+      return false;
+    }
+
+    return TEXT_TAGS.has(tag) || tag === 'div';
+  }
+
+function normalizeTextContent(value) {
+  return String(value || '')
+    .replace(/\r/g, '')
+    .replace(/\u00a0/g, ' ')
+    .replace(/[ \t]+\n/g, '\n')
+    .replace(/\n[ \t]+/g, '\n')
+    .replace(/[ \t]{2,}/g, ' ')
+    .trim();
+}
+
+function normalizeFormControlText(value, preserveLineBreaks = false) {
+  const text = String(value || '').replace(/\r/g, '');
+  if (preserveLineBreaks) {
+    return text.trim();
+  }
+  return normalizeTextContent(text);
+}
+
+function isTransparentColor(value) {
+  return !value || value === 'transparent' || value === 'none' || value === 'rgba(0, 0, 0, 0)';
+}
+
+  return getNode(document.body);
+}

src/figma/css-to-figma.js

@@ -1,452 +1,498 @@
-/**
- * src/figma/css-to-figma.js
- * Deterministic CSS property → Figma property mapper.
- * This is the core 1:1 mapping layer.
- *
- * All functions here take CSS computed style values
- * and return Figma Plugin API property objects.
- */
-
-import { cssColorToFigma, solidPaint } from '../utils/color.js';
-import {
-  parsePx,
-  letterSpacingToPx,
-  lineHeightToFigma,
-  WEIGHT_MAP,
-  TEXT_ALIGN_MAP,
-  TEXT_CASE_MAP,
-  JUSTIFY_MAP,
-  ALIGN_MAP,
-} from '../utils/units.js';
-
-function isTransparentCssColor(value) {
-  if (!value || value === 'transparent' || value === 'none') {
-    return true;
-  }
+/**
+ * src/figma/css-to-figma.js
+ * Deterministic CSS property → Figma property mapper.
+ * This is the core 1:1 mapping layer.
+ *
+ * All functions here take CSS computed style values
+ * and return Figma Plugin API property objects.
+ */
+
+import { cssColorToFigma, solidPaint } from '../utils/color.js';
+import {
+  parsePx,
+  letterSpacingToPx,
+  lineHeightToFigma,
+  WEIGHT_MAP,
+  TEXT_ALIGN_MAP,
+  TEXT_CASE_MAP,
+  JUSTIFY_MAP,
+  ALIGN_MAP,
+} from '../utils/units.js';
+
+function isTransparentCssColor(value) {
+  if (!value || value === 'transparent' || value === 'none') {
+    return true;
+  }
   return cssColorToFigma(value).a === 0;
 }
 
-// ─── LAYOUT ──────────────────────────────────────────────────────────────────
-
-/**
- * display: flex → Figma Auto Layout
- */
-export function mapFlexLayout(computed) {
-  const isRow = computed.flexDirection !== 'column' && computed.flexDirection !== 'column-reverse';
-  return {
-    layoutMode: isRow ? 'HORIZONTAL' : 'VERTICAL',
-    primaryAxisAlignItems: JUSTIFY_MAP[computed.justifyContent] ?? 'MIN',
-    counterAxisAlignItems: ALIGN_MAP[computed.alignItems] ?? 'MIN',
-    itemSpacing: parsePx(computed.gap || computed.columnGap || computed.rowGap),
-  };
-}
-
-/**
- * padding → Figma frame padding
- */
-export function mapPadding(computed) {
-  return {
-    paddingTop: parsePx(computed.paddingTop),
-    paddingRight: parsePx(computed.paddingRight),
-    paddingBottom: parsePx(computed.paddingBottom),
-    paddingLeft: parsePx(computed.paddingLeft),
-  };
-}
-
-/**
- * overflow → Figma clipsContent
- */
-export function mapOverflow(computed) {
-  return {
-    clipsContent: computed.overflow === 'hidden' || computed.overflowX === 'hidden' || computed.overflowY === 'hidden',
-  };
+function meaningfulTextOverflow(value) {
+  const normalized = String(value || '').trim().toLowerCase();
+  return normalized && normalized !== 'clip' && normalized !== 'none' ? normalized : '';
 }
 
-/**
- * border-radius → Figma cornerRadius
- */
-export function mapBorderRadius(computed, rect = { width: 0, height: 0 }) {
-  const tl = parseRadiusValue(computed.borderTopLeftRadius, rect);
-  const tr = parseRadiusValue(computed.borderTopRightRadius, rect);
-  const br = parseRadiusValue(computed.borderBottomRightRadius, rect);
-  const bl = parseRadiusValue(computed.borderBottomLeftRadius, rect);
-
-  if (tl === tr && tr === br && br === bl) {
-    return { cornerRadius: tl };
+function overflowClipsInlineContent(computed) {
+  if (!computed) {
+    return false;
   }
-  return {
-    topLeftRadius: tl,
-    topRightRadius: tr,
-    bottomRightRadius: br,
-    bottomLeftRadius: bl,
-  };
-}
 
-function parseRadiusValue(value, rect) {
-  if (!value || value === 'none' || value === 'auto') return 0;
-  if (typeof value === 'string' && value.endsWith('%')) {
-    const percent = parseFloat(value);
-    if (Number.isFinite(percent)) {
-      return (Math.min(rect.width || 0, rect.height || 0) * percent) / 100;
-    }
-  }
-  return parsePx(value);
+  return ['overflow', 'overflowX'].some((prop) => {
+    const value = String(computed[prop] || '').trim().toLowerCase();
+    return value.split(/\s+/).some((part) => part === 'hidden' || part === 'clip' || part === 'scroll' || part === 'auto');
+  });
 }
 
-// ─── VISUAL / FILLS ───────────────────────────────────────────────────────────
-
-/**
- * background-color → Figma solid fill
- */
-export function mapBackgroundColor(computed) {
-  const color = computed.backgroundColor;
-  if (isTransparentCssColor(color)) return [];
-  return [solidPaint(color)];
+function isSingleLineWhiteSpace(value) {
+  const normalized = String(value || '').trim().toLowerCase();
+  return normalized.includes('nowrap') || normalized === 'pre';
 }
 
 /**
- * Parse CSS linear-gradient → Figma GRADIENT_LINEAR paint.
- * Handles: linear-gradient(to bottom, ...) and linear-gradient(180deg, ...)
+ * CSS ellipsis requires text-overflow, non-wrapping inline text,
+ * and clipping on either the text box or the parent cell/container.
  */
-export function parseLinearGradient(cssGradient) {
-  const gradientTransform = linearGradientTransform(cssGradient);
-
-  // Extract color stops (simplified — handles rgba and hex)
-  const stops = extractGradientStops(cssGradient);
+export function shouldTruncateText(computed = {}, parentComputed = null) {
+  const textOverflow = meaningfulTextOverflow(computed?.textOverflow)
+    || meaningfulTextOverflow(parentComputed?.textOverflow);
 
-  return {
-    type: 'GRADIENT_LINEAR',
-    gradientTransform,
-    gradientStops: stops,
-  };
-}
-
-export function parseLinearGradientLayers(cssBackgroundImage) {
-  return splitCssLayers(cssBackgroundImage)
-    .filter((layer) => /^linear-gradient\(/i.test(layer.trim()))
-    .map((layer) => parseLinearGradient(layer));
-}
-
-function linearGradientTransform(cssGradient) {
-  const angle = parseLinearGradientAngle(cssGradient);
-  const rad = ((angle - 90) * Math.PI) / 180;
-  const dx = normalizeZero(Math.cos(rad));
-  const dy = normalizeZero(Math.sin(rad));
-
-  return [
-    [dx, dy, normalizeZero(0.5 - dx / 2 - dy / 2)],
-    [normalizeZero(-dy), dx, normalizeZero(0.5 + dy / 2 - dx / 2)],
-  ];
-}
-
-function normalizeZero(value) {
-  if (Math.abs(value) < 1e-12) return 0;
-  if (Math.abs(value - 1) < 1e-12) return 1;
-  if (Math.abs(value + 1) < 1e-12) return -1;
-  return value;
-}
-
-function parseLinearGradientAngle(cssGradient) {
-  const directionMatch = cssGradient.match(/linear-gradient\(\s*to\s+([a-z\s]+?)(?:,|\))/i);
-  if (directionMatch) {
-    const direction = directionMatch[1].trim().toLowerCase();
-    if (direction === 'right') return 90;
-    if (direction === 'left') return 270;
-    if (direction === 'bottom') return 180;
-    if (direction === 'top') return 0;
-    if (direction === 'bottom right' || direction === 'right bottom') return 135;
-    if (direction === 'bottom left' || direction === 'left bottom') return 225;
-    if (direction === 'top right' || direction === 'right top') return 45;
-    if (direction === 'top left' || direction === 'left top') return 315;
+  if (!textOverflow.includes('ellipsis')) {
+    return false;
   }
 
-  const degMatch = cssGradient.match(/linear-gradient\(\s*(-?[\d.]+)deg/i);
-  if (degMatch) {
-    const angle = parseFloat(degMatch[1]);
-    if (Number.isFinite(angle)) return angle;
+  if (!isSingleLineWhiteSpace(computed?.whiteSpace) && !isSingleLineWhiteSpace(parentComputed?.whiteSpace)) {
+    return false;
   }
 
-  return 180;
+  return overflowClipsInlineContent(computed) || overflowClipsInlineContent(parentComputed);
 }
-
-function extractGradientStops(css) {
-  const stopRegex = /(rgba?\([^)]+\)|#[0-9a-f]{3,8}|transparent)\s*([\d.]+%)?/gi;
-  const stops = [];
-  let match;
-  let index = 0;
-
-  while ((match = stopRegex.exec(css)) !== null) {
-    const color = cssColorToFigma(match[1]);
-    const position = match[2] ? parseFloat(match[2]) / 100 : index === 0 ? 0 : 1;
-    stops.push({ color, position });
-    index++;
-  }
-
-  return stops.length > 0 ? stops : [
-    { color: { r: 0, g: 0, b: 0, a: 0 }, position: 0 },
-    { color: { r: 0, g: 0, b: 0, a: 0 }, position: 1 },
-  ];
-}
-
-function splitCssLayers(css) {
-  const source = String(css || '');
-  const layers = [];
-  let current = '';
-  let depth = 0;
-  let quote = null;
-
-  for (let index = 0; index < source.length; index++) {
-    const char = source[index];
-
-    if (quote) {
-      current += char;
-      if (char === quote && source[index - 1] !== '\\') {
-        quote = null;
-      }
-      continue;
-    }
-
-    if (char === '"' || char === "'") {
-      quote = char;
-      current += char;
-      continue;
-    }
-
-    if (char === '(') {
-      depth++;
-      current += char;
-      continue;
-    }
-
-    if (char === ')') {
-      depth = Math.max(depth - 1, 0);
-      current += char;
-      continue;
-    }
-
-    if (char === ',' && depth === 0) {
-      if (current.trim()) {
-        layers.push(current.trim());
-      }
-      current = '';
-      continue;
-    }
-
-    current += char;
-  }
-
-  if (current.trim()) {
-    layers.push(current.trim());
-  }
-
-  return layers;
-}
-
-// ─── BORDERS / STROKES ────────────────────────────────────────────────────────
-
-/**
- * border → Figma strokes
- */
-export function mapBorder(computed) {
-  const sides = getBorderSides(computed);
-  const visibleSides = Object.values(sides).filter((side) => isRenderableBorderSide(side));
-  if (visibleSides.length === 0) return {};
-
-  const color = cssColorToFigma(visibleSides[0].color);
+
+// ─── LAYOUT ──────────────────────────────────────────────────────────────────
+
+/**
+ * display: flex → Figma Auto Layout
+ */
+export function mapFlexLayout(computed) {
+  const isRow = computed.flexDirection !== 'column' && computed.flexDirection !== 'column-reverse';
+  return {
+    layoutMode: isRow ? 'HORIZONTAL' : 'VERTICAL',
+    primaryAxisAlignItems: JUSTIFY_MAP[computed.justifyContent] ?? 'MIN',
+    counterAxisAlignItems: ALIGN_MAP[computed.alignItems] ?? 'MIN',
+    itemSpacing: parsePx(computed.gap || computed.columnGap || computed.rowGap),
+  };
+}
+
+/**
+ * padding → Figma frame padding
+ */
+export function mapPadding(computed) {
+  return {
+    paddingTop: parsePx(computed.paddingTop),
+    paddingRight: parsePx(computed.paddingRight),
+    paddingBottom: parsePx(computed.paddingBottom),
+    paddingLeft: parsePx(computed.paddingLeft),
+  };
+}
+
+/**
+ * overflow → Figma clipsContent
+ */
+export function mapOverflow(computed) {
+  return {
+    clipsContent: computed.overflow === 'hidden' || computed.overflowX === 'hidden' || computed.overflowY === 'hidden',
+  };
+}
+
+/**
+ * border-radius → Figma cornerRadius
+ */
+export function mapBorderRadius(computed, rect = { width: 0, height: 0 }) {
+  const tl = parseRadiusValue(computed.borderTopLeftRadius, rect);
+  const tr = parseRadiusValue(computed.borderTopRightRadius, rect);
+  const br = parseRadiusValue(computed.borderBottomRightRadius, rect);
+  const bl = parseRadiusValue(computed.borderBottomLeftRadius, rect);
+
+  if (tl === tr && tr === br && br === bl) {
+    return { cornerRadius: tl };
+  }
+  return {
+    topLeftRadius: tl,
+    topRightRadius: tr,
+    bottomRightRadius: br,
+    bottomLeftRadius: bl,
+  };
+}
+
+function parseRadiusValue(value, rect) {
+  if (!value || value === 'none' || value === 'auto') return 0;
+  if (typeof value === 'string' && value.endsWith('%')) {
+    const percent = parseFloat(value);
+    if (Number.isFinite(percent)) {
+      return (Math.min(rect.width || 0, rect.height || 0) * percent) / 100;
+    }
+  }
+  return parsePx(value);
+}
+
+// ─── VISUAL / FILLS ───────────────────────────────────────────────────────────
+
+/**
+ * background-color → Figma solid fill
+ */
+export function mapBackgroundColor(computed) {
+  const color = computed.backgroundColor;
+  if (isTransparentCssColor(color)) return [];
+  return [solidPaint(color)];
+}
+
+/**
+ * Parse CSS linear-gradient → Figma GRADIENT_LINEAR paint.
+ * Handles: linear-gradient(to bottom, ...) and linear-gradient(180deg, ...)
+ */
+export function parseLinearGradient(cssGradient) {
+  const gradientTransform = linearGradientTransform(cssGradient);
+
+  // Extract color stops (simplified — handles rgba and hex)
+  const stops = extractGradientStops(cssGradient);
+
+  return {
+    type: 'GRADIENT_LINEAR',
+    gradientTransform,
+    gradientStops: stops,
+  };
+}
+
+export function parseLinearGradientLayers(cssBackgroundImage) {
+  return splitCssLayers(cssBackgroundImage)
+    .filter((layer) => /^linear-gradient\(/i.test(layer.trim()))
+    .map((layer) => parseLinearGradient(layer));
+}
+
+function linearGradientTransform(cssGradient) {
+  const angle = parseLinearGradientAngle(cssGradient);
+  const rad = ((angle - 90) * Math.PI) / 180;
+  const dx = normalizeZero(Math.cos(rad));
+  const dy = normalizeZero(Math.sin(rad));
+
+  return [
+    [dx, dy, normalizeZero(0.5 - dx / 2 - dy / 2)],
+    [normalizeZero(-dy), dx, normalizeZero(0.5 + dy / 2 - dx / 2)],
+  ];
+}
+
+function normalizeZero(value) {
+  if (Math.abs(value) < 1e-12) return 0;
+  if (Math.abs(value - 1) < 1e-12) return 1;
+  if (Math.abs(value + 1) < 1e-12) return -1;
+  return value;
+}
+
+function parseLinearGradientAngle(cssGradient) {
+  const directionMatch = cssGradient.match(/linear-gradient\(\s*to\s+([a-z\s]+?)(?:,|\))/i);
+  if (directionMatch) {
+    const direction = directionMatch[1].trim().toLowerCase();
+    if (direction === 'right') return 90;
+    if (direction === 'left') return 270;
+    if (direction === 'bottom') return 180;
+    if (direction === 'top') return 0;
+    if (direction === 'bottom right' || direction === 'right bottom') return 135;
+    if (direction === 'bottom left' || direction === 'left bottom') return 225;
+    if (direction === 'top right' || direction === 'right top') return 45;
+    if (direction === 'top left' || direction === 'left top') return 315;
+  }
+
+  const degMatch = cssGradient.match(/linear-gradient\(\s*(-?[\d.]+)deg/i);
+  if (degMatch) {
+    const angle = parseFloat(degMatch[1]);
+    if (Number.isFinite(angle)) return angle;
+  }
+
+  return 180;
+}
+
+function extractGradientStops(css) {
+  const stopRegex = /(rgba?\([^)]+\)|#[0-9a-f]{3,8}|transparent)\s*([\d.]+%)?/gi;
+  const stops = [];
+  let match;
+  let index = 0;
+
+  while ((match = stopRegex.exec(css)) !== null) {
+    const color = cssColorToFigma(match[1]);
+    const position = match[2] ? parseFloat(match[2]) / 100 : index === 0 ? 0 : 1;
+    stops.push({ color, position });
+    index++;
+  }
+
+  return stops.length > 0 ? stops : [
+    { color: { r: 0, g: 0, b: 0, a: 0 }, position: 0 },
+    { color: { r: 0, g: 0, b: 0, a: 0 }, position: 1 },
+  ];
+}
+
+function splitCssLayers(css) {
+  const source = String(css || '');
+  const layers = [];
+  let current = '';
+  let depth = 0;
+  let quote = null;
+
+  for (let index = 0; index < source.length; index++) {
+    const char = source[index];
+
+    if (quote) {
+      current += char;
+      if (char === quote && source[index - 1] !== '\\') {
+        quote = null;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      current += char;
+      continue;
+    }
+
+    if (char === '(') {
+      depth++;
+      current += char;
+      continue;
+    }
+
+    if (char === ')') {
+      depth = Math.max(depth - 1, 0);
+      current += char;
+      continue;
+    }
+
+    if (char === ',' && depth === 0) {
+      if (current.trim()) {
+        layers.push(current.trim());
+      }
+      current = '';
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current.trim()) {
+    layers.push(current.trim());
+  }
+
+  return layers;
+}
+
+// ─── BORDERS / STROKES ────────────────────────────────────────────────────────
+
+/**
+ * border → Figma strokes
+ */
+export function mapBorder(computed) {
+  const sides = getBorderSides(computed);
+  const visibleSides = Object.values(sides).filter((side) => isRenderableBorderSide(side));
+  if (visibleSides.length === 0) return {};
+
+  const color = cssColorToFigma(visibleSides[0].color);
+  const result = {
+    strokes: [{
+      type: 'SOLID',
+      color: { r: color.r, g: color.g, b: color.b },
+      opacity: color.a,
+    }],
+    strokeWeight: visibleSides[0].width,
+    strokeAlign: 'INSIDE', // CSS border-box behavior
+  };
+
+  if (!hasUniformBorder(sides)) {
+    result.strokeTopWeight = isRenderableBorderSide(sides.top) ? sides.top.width : 0;
+    result.strokeRightWeight = isRenderableBorderSide(sides.right) ? sides.right.width : 0;
+    result.strokeBottomWeight = isRenderableBorderSide(sides.bottom) ? sides.bottom.width : 0;
+    result.strokeLeftWeight = isRenderableBorderSide(sides.left) ? sides.left.width : 0;
+  }
+
+  return result;
+}
+
+function getBorderSides(computed) {
+  return {
+    top: getBorderSide(computed, 'Top', 0),
+    right: getBorderSide(computed, 'Right', 1),
+    bottom: getBorderSide(computed, 'Bottom', 2),
+    left: getBorderSide(computed, 'Left', 3),
+  };
+}
+
+function getBorderSide(computed, sideName, shorthandIndex) {
+  const lowerSide = sideName.toLowerCase();
+  return {
+    width: parsePx(computed[`border${sideName}Width`] ?? getCssBoxValue(computed.borderWidth, shorthandIndex)),
+    style: computed[`border${sideName}Style`] ?? getCssBoxValue(computed.borderStyle, shorthandIndex) ?? 'none',
+    color: computed[`border${sideName}Color`] ?? getCssBoxValue(computed.borderColor, shorthandIndex) ?? computed.color ?? '#000',
+    side: lowerSide,
+  };
+}
+
+function isRenderableBorderSide(side) {
+  return side.width > 0 && side.style !== 'none' && side.style !== 'hidden' && cssColorToFigma(side.color).a > 0;
+}
+
+function hasUniformBorder(sides) {
+  const values = Object.values(sides);
+  const first = values[0];
+  return values.every((side) =>
+    isRenderableBorderSide(side) &&
+    side.width === first.width &&
+    side.style === first.style &&
+    normalizeCssValue(side.color) === normalizeCssValue(first.color)
+  );
+}
+
+function getCssBoxValue(value, index) {
+  const parts = splitCssWhitespaceList(value);
+  if (parts.length === 0) return null;
+  if (parts.length === 1) return parts[0];
+  if (parts.length === 2) return index === 0 || index === 2 ? parts[0] : parts[1];
+  if (parts.length === 3) return index === 0 ? parts[0] : index === 2 ? parts[2] : parts[1];
+  return parts[index] ?? null;
+}
+
+function splitCssWhitespaceList(value) {
+  const source = String(value || '').trim();
+  if (!source) return [];
+
+  const parts = [];
+  let current = '';
+  let depth = 0;
+
+  for (let index = 0; index < source.length; index++) {
+    const char = source[index];
+    if (char === '(') depth++;
+    if (char === ')') depth = Math.max(depth - 1, 0);
+
+    if (/\s/.test(char) && depth === 0) {
+      if (current.trim()) {
+        parts.push(current.trim());
+      }
+      current = '';
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current.trim()) {
+    parts.push(current.trim());
+  }
+
+  return parts;
+}
+
+function normalizeCssValue(value) {
+  return String(value || '').replace(/\s+/g, '').toLowerCase();
+}
+
+// ─── EFFECTS ─────────────────────────────────────────────────────────────────
+
+/**
+ * box-shadow → Figma DROP_SHADOW effect
+ * Handles: "0 0 30px 10px rgba(201,168,76,0.3)"
+ */
+export function mapBoxShadow(computed) {
+  if (!computed.boxShadow || computed.boxShadow === 'none') return [];
+
+  const parts = computed.boxShadow.match(
+    /(?:(rgba?\([^)]+\)|#[0-9a-f]{3,8})\s+)?(-?[\d.]+px)\s+(-?[\d.]+px)\s+([\d.]+px)\s*([\d.]+px)?(?:\s+(rgba?\([^)]+\)|#[0-9a-f]{3,8}))?/i
+  );
+  if (!parts) return [];
+
+  const [, leadingColor, x, y, blur, spread = '0px', trailingColor] = parts;
+  const colorStr = leadingColor || trailingColor;
+  if (!colorStr) return [];
+  const color = cssColorToFigma(colorStr);
+
+  return [{
+    type: 'DROP_SHADOW',
+    color: { r: color.r, g: color.g, b: color.b, a: color.a },
+    offset: { x: parsePx(x), y: parsePx(y) },
+    radius: parsePx(blur),
+    spread: parsePx(spread),
+    visible: true,
+    blendMode: 'NORMAL',
+  }];
+}
+
+// ─── TYPOGRAPHY ───────────────────────────────────────────────────────────────
+
+/**
+ * CSS text properties → Figma text node properties
+ */
+export function mapTypography(computed, fontMap = {}, parentComputed = null) {
+  const familyRaw = computed.fontFamily?.split(',')[0].replace(/['"]/g, '').trim() ?? 'Inter';
+  const weight = computed.fontWeight ?? '400';
+  const isItalic = computed.fontStyle === 'italic';
+  const fontKey = `${computed.fontFamily}|${weight}|${isItalic ? 'italic' : 'normal'}`;
+
+  const font = fontMap?.[fontKey] ?? { family: familyRaw, style: 'Regular' };
+  const fontSize = parsePx(computed.fontSize) || 16;
+
   const result = {
-    strokes: [{
-      type: 'SOLID',
-      color: { r: color.r, g: color.g, b: color.b },
-      opacity: color.a,
-    }],
-    strokeWeight: visibleSides[0].width,
-    strokeAlign: 'INSIDE', // CSS border-box behavior
-  };
-
-  if (!hasUniformBorder(sides)) {
-    result.strokeTopWeight = isRenderableBorderSide(sides.top) ? sides.top.width : 0;
-    result.strokeRightWeight = isRenderableBorderSide(sides.right) ? sides.right.width : 0;
-    result.strokeBottomWeight = isRenderableBorderSide(sides.bottom) ? sides.bottom.width : 0;
-    result.strokeLeftWeight = isRenderableBorderSide(sides.left) ? sides.left.width : 0;
-  }
-
-  return result;
-}
-
-function getBorderSides(computed) {
-  return {
-    top: getBorderSide(computed, 'Top', 0),
-    right: getBorderSide(computed, 'Right', 1),
-    bottom: getBorderSide(computed, 'Bottom', 2),
-    left: getBorderSide(computed, 'Left', 3),
-  };
-}
-
-function getBorderSide(computed, sideName, shorthandIndex) {
-  const lowerSide = sideName.toLowerCase();
-  return {
-    width: parsePx(computed[`border${sideName}Width`] ?? getCssBoxValue(computed.borderWidth, shorthandIndex)),
-    style: computed[`border${sideName}Style`] ?? getCssBoxValue(computed.borderStyle, shorthandIndex) ?? 'none',
-    color: computed[`border${sideName}Color`] ?? getCssBoxValue(computed.borderColor, shorthandIndex) ?? computed.color ?? '#000',
-    side: lowerSide,
-  };
-}
-
-function isRenderableBorderSide(side) {
-  return side.width > 0 && side.style !== 'none' && side.style !== 'hidden' && cssColorToFigma(side.color).a > 0;
-}
-
-function hasUniformBorder(sides) {
-  const values = Object.values(sides);
-  const first = values[0];
-  return values.every((side) =>
-    isRenderableBorderSide(side) &&
-    side.width === first.width &&
-    side.style === first.style &&
-    normalizeCssValue(side.color) === normalizeCssValue(first.color)
-  );
-}
-
-function getCssBoxValue(value, index) {
-  const parts = splitCssWhitespaceList(value);
-  if (parts.length === 0) return null;
-  if (parts.length === 1) return parts[0];
-  if (parts.length === 2) return index === 0 || index === 2 ? parts[0] : parts[1];
-  if (parts.length === 3) return index === 0 ? parts[0] : index === 2 ? parts[2] : parts[1];
-  return parts[index] ?? null;
-}
-
-function splitCssWhitespaceList(value) {
-  const source = String(value || '').trim();
-  if (!source) return [];
-
-  const parts = [];
-  let current = '';
-  let depth = 0;
-
-  for (let index = 0; index < source.length; index++) {
-    const char = source[index];
-    if (char === '(') depth++;
-    if (char === ')') depth = Math.max(depth - 1, 0);
-
-    if (/\s/.test(char) && depth === 0) {
-      if (current.trim()) {
-        parts.push(current.trim());
-      }
-      current = '';
-      continue;
-    }
-
-    current += char;
-  }
-
-  if (current.trim()) {
-    parts.push(current.trim());
-  }
-
-  return parts;
-}
-
-function normalizeCssValue(value) {
-  return String(value || '').replace(/\s+/g, '').toLowerCase();
-}
-
-// ─── EFFECTS ─────────────────────────────────────────────────────────────────
-
-/**
- * box-shadow → Figma DROP_SHADOW effect
- * Handles: "0 0 30px 10px rgba(201,168,76,0.3)"
- */
-export function mapBoxShadow(computed) {
-  if (!computed.boxShadow || computed.boxShadow === 'none') return [];
-
-  const parts = computed.boxShadow.match(
-    /(?:(rgba?\([^)]+\)|#[0-9a-f]{3,8})\s+)?(-?[\d.]+px)\s+(-?[\d.]+px)\s+([\d.]+px)\s*([\d.]+px)?(?:\s+(rgba?\([^)]+\)|#[0-9a-f]{3,8}))?/i
-  );
-  if (!parts) return [];
-
-  const [, leadingColor, x, y, blur, spread = '0px', trailingColor] = parts;
-  const colorStr = leadingColor || trailingColor;
-  if (!colorStr) return [];
-  const color = cssColorToFigma(colorStr);
-
-  return [{
-    type: 'DROP_SHADOW',
-    color: { r: color.r, g: color.g, b: color.b, a: color.a },
-    offset: { x: parsePx(x), y: parsePx(y) },
-    radius: parsePx(blur),
-    spread: parsePx(spread),
-    visible: true,
-    blendMode: 'NORMAL',
-  }];
-}
-
-// ─── TYPOGRAPHY ───────────────────────────────────────────────────────────────
-
-/**
- * CSS text properties → Figma text node properties
- */
-export function mapTypography(computed, fontMap) {
-  const familyRaw = computed.fontFamily?.split(',')[0].replace(/['"]/g, '').trim() ?? 'Inter';
-  const weight = computed.fontWeight ?? '400';
-  const isItalic = computed.fontStyle === 'italic';
-  const fontKey = `${computed.fontFamily}|${weight}|${isItalic ? 'italic' : 'normal'}`;
-
-  const font = fontMap?.[fontKey] ?? { family: familyRaw, style: 'Regular' };
-  const fontSize = parsePx(computed.fontSize) || 16;
-
-  return {
     fontName: font,
     fontSize,
     lineHeight: lineHeightToFigma(computed.lineHeight, computed.fontSize),
     letterSpacing: {
       value: letterSpacingToPx(computed.letterSpacing, computed.fontSize),
-      unit: 'PIXELS',
-    },
-    textAlignHorizontal: TEXT_ALIGN_MAP[computed.textAlign] ?? 'LEFT',
-    textCase: TEXT_CASE_MAP[computed.textTransform] ?? 'ORIGINAL',
-    // -webkit-text-stroke → outline text (color: transparent + stroke)
+      unit: 'PIXELS',
+    },
+    textAlignHorizontal: TEXT_ALIGN_MAP[computed.textAlign] ?? 'LEFT',
+    textCase: TEXT_CASE_MAP[computed.textTransform] ?? 'ORIGINAL',
+    // -webkit-text-stroke → outline text (color: transparent + stroke)
     fills: isTransparentCssColor(computed.color)
       ? []
       : [solidPaint(computed.color)],
   };
-}
-
-/**
- * Map -webkit-text-stroke to Figma strokes on a text node.
- */
-export function mapTextStroke(computed) {
-  // CSS doesn't expose webkit-text-stroke in getComputedStyle reliably,
-  // but if fill is transparent we know it's outline text
-  if (isTransparentCssColor(computed.color) && parsePx(computed.webkitTextStrokeWidth) > 0) {
-    const width = parsePx(computed.webkitTextStrokeWidth);
-    const color = cssColorToFigma(computed.webkitTextStrokeColor ?? '#000');
-    return {
-      strokes: [{
-        type: 'SOLID',
-        color: { r: color.r, g: color.g, b: color.b },
-        opacity: color.a,
-      }],
-      strokeWeight: width,
-      strokeAlign: 'OUTSIDE',
-    };
-  }
-  return {};
-}
 
-// ─── POSITIONING ─────────────────────────────────────────────────────────────
-
-/**
- * position: absolute → Figma absolute positioning
- */
-export function mapPositioning(computed, rect, parentRect) {
-  if (computed.position !== 'absolute' && computed.position !== 'fixed') {
-    return {};
+  if (shouldTruncateText(computed, parentComputed)) {
+    result.textTruncation = 'ENDING';
   }
 
-  return {
-    layoutPositioning: 'ABSOLUTE',
-    x: rect.x - (parentRect?.x ?? 0),
-    y: rect.y - (parentRect?.y ?? 0),
-  };
+  return result;
 }
+
+/**
+ * Map -webkit-text-stroke to Figma strokes on a text node.
+ */
+export function mapTextStroke(computed) {
+  // CSS doesn't expose webkit-text-stroke in getComputedStyle reliably,
+  // but if fill is transparent we know it's outline text
+  if (isTransparentCssColor(computed.color) && parsePx(computed.webkitTextStrokeWidth) > 0) {
+    const width = parsePx(computed.webkitTextStrokeWidth);
+    const color = cssColorToFigma(computed.webkitTextStrokeColor ?? '#000');
+    return {
+      strokes: [{
+        type: 'SOLID',
+        color: { r: color.r, g: color.g, b: color.b },
+        opacity: color.a,
+      }],
+      strokeWeight: width,
+      strokeAlign: 'OUTSIDE',
+    };
+  }
+  return {};
+}
+
+// ─── POSITIONING ─────────────────────────────────────────────────────────────
+
+/**
+ * position: absolute → Figma absolute positioning
+ */
+export function mapPositioning(computed, rect, parentRect) {
+  if (computed.position !== 'absolute' && computed.position !== 'fixed') {
+    return {};
+  }
+
+  return {
+    layoutPositioning: 'ABSOLUTE',
+    x: rect.x - (parentRect?.x ?? 0),
+    y: rect.y - (parentRect?.y ?? 0),
+  };
+}

src/figma/font-resolver.js

@@ -1,15 +1,15 @@
-/**
- * src/figma/font-resolver.js
- * Resolves CSS font families and weights to Figma font names.
- * Builds a font map for the entire DOM tree before node creation.
- *
- * NOTE: This module runs in Node.js (not inside Figma).
- * It outputs a fontMap that the Figma plugin reads and pre-loads.
- */
-
-import { walk } from '../core/dom-tree.js';
-import { WEIGHT_MAP } from '../utils/units.js';
-
+/**
+ * src/figma/font-resolver.js
+ * Resolves CSS font families and weights to Figma font names.
+ * Builds a font map for the entire DOM tree before node creation.
+ *
+ * NOTE: This module runs in Node.js (not inside Figma).
+ * It outputs a fontMap that the Figma plugin reads and pre-loads.
+ */
+
+import { walk } from '../core/dom-tree.js';
+import { WEIGHT_MAP } from '../utils/units.js';
+
 // Known Google Fonts available in Figma + their available styles
 const FIGMA_FONT_STYLES = {
   'Playfair Display': ['Thin', 'ExtraLight', 'Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black',
@@ -25,14 +25,14 @@ const FIGMA_FONT_STYLES = {
   Georgia: ['Regular', 'Italic', 'Bold', 'Bold Italic'],
   'Courier New': ['Regular', 'Italic', 'Bold', 'Bold Italic'],
 };
-
-/**
- * @param {object} domTree
- * @returns {Promise<FontMap>} Map of "family|weight|italic" → { family, style }
- */
-export async function resolveFonts(domTree) {
-  const needed = new Set();
-
+
+/**
+ * @param {object} domTree
+ * @returns {Promise<FontMap>} Map of "family|weight|italic" → { family, style }
+ */
+export async function resolveFonts(domTree) {
+  const needed = new Set();
+
   walk(domTree, (node) => {
     const { fontFamily, fontWeight, fontStyle } = node.computed ?? {};
     if (fontFamily) {
@@ -54,21 +54,21 @@ export async function resolveFonts(domTree) {
       needed.add(key);
     }
   });
-
+
   const fontMap = {};
   for (const key of needed) {
     const [family, weight, style] = key.split('|');
     const resolved = resolveFont(family, weight, style === 'italic');
     fontMap[key] = resolved;
   }
-
-  return fontMap;
-}
-
-/**
- * Strip quotes from CSS font-family string.
- * e.g. "'Playfair Display', serif" → "Playfair Display"
- */
+
+  return fontMap;
+}
+
+/**
+ * Strip quotes from CSS font-family string.
+ * e.g. "'Playfair Display', serif" → "Playfair Display"
+ */
 function cleanFamilyName(css) {
   return getFontFamilyStack(css)[0] ?? '';
 }
@@ -83,11 +83,14 @@ function resolveFont(cssFamily, weightStr, isItalic) {
   const styleName = WEIGHT_MAP[weight] ?? 'Regular';
   const italicSuffix = isItalic ? ' Italic' : '';
   const targetStyle = styleName === 'Regular' && isItalic ? 'Italic' : `${styleName}${italicSuffix}`;
+  const requestedNamedFamily = getRequestedNamedFamily(stack);
 
   const candidates = [];
   const availableStackFamily = stack.find((name) => FIGMA_FONT_STYLES[name]);
   if (availableStackFamily) {
     candidates.push(availableStackFamily);
+  } else if (requestedNamedFamily) {
+    candidates.push(requestedNamedFamily);
   } else {
     const generic = getGenericFontFamily(stack);
     if (generic === 'serif') {
@@ -109,7 +112,9 @@ function resolveFont(cssFamily, weightStr, isItalic) {
 
   for (const candidate of candidates) {
     const styles = FIGMA_FONT_STYLES[candidate];
-    if (!styles) continue;
+    if (!styles) {
+      return { family: candidate, style: targetStyle };
+    }
     if (styles.includes(targetStyle)) {
       return { family: candidate, style: targetStyle };
     }
@@ -141,6 +146,28 @@ function getGenericFontFamily(stack) {
   return null;
 }
 
-/**
- * @typedef {Record<string, { family: string, style: string }>} FontMap
- */
+function getRequestedNamedFamily(stack) {
+  if (!Array.isArray(stack)) {
+    return null;
+  }
+
+  return stack.find((name) => !isGenericFontFamily(name)) || null;
+}
+
+function isGenericFontFamily(name) {
+  const normalized = String(name || '').toLowerCase();
+  return normalized === 'serif'
+    || normalized === 'sans-serif'
+    || normalized === 'monospace'
+    || normalized === 'cursive'
+    || normalized === 'fantasy'
+    || normalized === 'system-ui'
+    || normalized === 'ui-serif'
+    || normalized === 'ui-sans-serif'
+    || normalized === 'ui-monospace'
+    || normalized === 'ui-rounded';
+}
+
+/**
+ * @typedef {Record<string, { family: string, style: string }>} FontMap
+ */

src/figma/mapper.js

@@ -1,106 +1,138 @@
-/**
- * src/figma/mapper.js
- * Converts the annotated DOM tree (with z-index) into
- * a Figma node tree JSON that the Figma plugin can execute.
- *
- * Output format: array of FigmaNode instructions
- * that the plugin reads and calls figma.create* for each.
- */
-
-import {
-  mapFlexLayout,
-  mapPadding,
-  mapOverflow,
-  mapBorderRadius,
-  mapBackgroundColor,
-  mapBorder,
+/**
+ * src/figma/mapper.js
+ * Converts the annotated DOM tree (with z-index) into
+ * a Figma node tree JSON that the Figma plugin can execute.
+ *
+ * Output format: array of FigmaNode instructions
+ * that the plugin reads and calls figma.create* for each.
+ */
+
+import {
+  mapFlexLayout,
+  mapPadding,
+  mapOverflow,
+  mapBorderRadius,
+  mapBackgroundColor,
+  mapBorder,
   mapBoxShadow,
   mapTypography,
   mapTextStroke,
+  shouldTruncateText,
   parseLinearGradient,
   parseLinearGradientLayers,
 } from './css-to-figma.js';
-import { cssColorToFigma, solidPaint as colorSolidPaint } from '../utils/color.js';
-import { parsePx } from '../utils/units.js';
-
-/**
- * @param {{ annotated: object, sortedFlat: object[] }} sorted
- * @param {{ pseudoElements, gridStrategies, hoverSpecs, fontMap }} extras
- * @returns {FigmaNode[]}
- */
+import { cssColorToFigma, solidPaint as colorSolidPaint } from '../utils/color.js';
+import { parsePx } from '../utils/units.js';
+
+/**
+ * @param {{ annotated: object, sortedFlat: object[] }} sorted
+ * @param {{ pseudoElements, gridStrategies, hoverSpecs, fontMap }} extras
+ * @returns {FigmaNode[]}
+ */
 export function buildFigmaTree({ annotated }, { pseudoElements = [], gridStrategies = {}, hoverSpecs = {}, fontMap = {} } = {}) {
   attachPseudoElements(annotated, pseudoElements);
   const normalizedRoot = normalizeRootStructure(annotated);
 
   // Build the main node tree
-  return [buildNode(normalizedRoot, null, { fontMap, gridStrategies, hoverSpecs }, '0')];
+  return [buildNode(normalizedRoot, null, { fontMap, gridStrategies, hoverSpecs, surfaceFills: [] }, '0')];
 }
-
+
 function buildNode(node, parentContext, ctx, path) {
-  const { computed, rect, tag, text, textRuns = [], children = [], classList, isTextContainer, _pageLayout, _role, svgMarkup } = node;
-  const resolvedRect = resolveRenderedRect(node, parentContext);
+  const { computed, rect, tag, text, textRuns = [], children = [], classList, isTextContainer, _pageLayout, _role, svgMarkup, imageData } = node;
+  const rawResolvedRect = resolveRenderedRect(node, parentContext);
   const parentResolvedRect = parentContext?.resolvedRect ?? null;
   const isLeafText = Boolean(text) && children.length === 0;
   const isText = isLeafText && Boolean(isTextContainer);
+  const usesTableCellAutoWidth = Boolean(parentContext?.tableCellAutoWidth) || isTableCellNode(node) || isTableCellNode(parentContext?.sourceNode);
+  const inheritedTextTruncationContext = usesTableCellAutoWidth ? null : getInheritedTextTruncationContext(parentContext);
+  const resolvedRect = isText && inheritedTextTruncationContext
+    ? clampRectToTextTruncationContext(rawResolvedRect, inheritedTextTruncationContext)
+    : rawResolvedRect;
   const isSvg = tag === 'svg' && Boolean(svgMarkup);
-
-  const base = {
-    id: buildStableId(tag, classList, path),
-    name: buildName(tag, classList),
-    type: isSvg ? 'SVG' : (isText && text ? 'TEXT' : 'FRAME'),
-    x: Math.round(resolvedRect.x - (parentResolvedRect?.x ?? 0)),
-    y: Math.round(resolvedRect.y - (parentResolvedRect?.y ?? 0)),
-    width: Math.round(resolvedRect.width),
-    height: Math.round(resolvedRect.height),
-  };
-
-  if (isSvg) {
-    const isAbsolute = computed.position === 'absolute' || computed.position === 'fixed';
-    return {
-      ...base,
-      _svgMarkup: svgMarkup,
-      opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
-      ...(isAbsolute ? { layoutPositioning: 'ABSOLUTE' } : {}),
-      ...(computed.mixBlendMode && computed.mixBlendMode !== 'normal' ? {
-        blendMode: computed.mixBlendMode.toUpperCase().replace(/-/g, '_'),
-      } : {}),
-    };
+  const isImage = Boolean(imageData?.src) && (tag === 'img' || tag === 'canvas');
+  const isAbsolute = isAbsoluteLikeNode(node) || node._layoutPositioning === 'ABSOLUTE';
+  const childLayoutSizing = mapChildLayoutSizing(node, parentContext, resolvedRect);
+
+  const base = {
+    id: buildStableId(tag, classList, path),
+    name: buildName(tag, classList),
+    type: isSvg ? 'SVG' : isImage ? 'IMAGE' : (isText && text ? 'TEXT' : 'FRAME'),
+    x: Math.round(resolvedRect.x - (parentResolvedRect?.x ?? 0)),
+    y: Math.round(resolvedRect.y - (parentResolvedRect?.y ?? 0)),
+    width: Math.round(resolvedRect.width),
+    height: Math.round(resolvedRect.height),
+    ...(isAbsolute ? { layoutPositioning: 'ABSOLUTE' } : {}),
+    ...childLayoutSizing,
+  };
+
+  if (isSvg) {
+    return {
+      ...base,
+      _svgMarkup: svgMarkup,
+      opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
+      ...(computed.mixBlendMode && computed.mixBlendMode !== 'normal' ? {
+        blendMode: computed.mixBlendMode.toUpperCase().replace(/-/g, '_'),
+      } : {}),
+    };
+  }
+
+  if (isImage) {
+    return {
+      ...base,
+      _image: imageData,
+      opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
+      ...mapBorderRadius(computed, rect),
+      ...mapBorder(computed),
+      effects: mapBoxShadow(computed),
+      ...(computed.mixBlendMode && computed.mixBlendMode !== 'normal' ? {
+        blendMode: computed.mixBlendMode.toUpperCase().replace(/-/g, '_'),
+      } : {}),
+      ...(computed.objectFit ? { _objectFit: computed.objectFit } : {}),
+      ...(computed.objectPosition ? { _objectPosition: computed.objectPosition } : {}),
+    };
   }
 
   if (base.type === 'TEXT') {
+    const typography = mapTypography(computed, ctx.fontMap, parentContext?.sourceNode?.computed);
+    if (usesTableCellAutoWidth) {
+      forceAutoWidthTableCellText(typography);
+    } else if (inheritedTextTruncationContext && !typography.textTruncation) {
+      typography.textTruncation = 'ENDING';
+    }
+
     return {
       ...base,
       characters: text,
-      ...mapTypography(computed, ctx.fontMap),
+      ...typography,
       ...mapFlexTextAlignment(computed),
       ...mapTextStroke(computed),
       textRuns: buildTextRuns(textRuns, ctx.fontMap),
       opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
-    };
-  }
-
-  // Frame node
-  const isGrid = computed.display === 'grid';
-  const isFlex = computed.display === 'flex' || computed.display === 'inline-flex';
-  const isInlineBlock = computed.display === 'inline-block';
-  const isAbsolute = computed.position === 'absolute' || computed.position === 'fixed';
-
-  const layout = isFlex
-    ? getRenderableFlexLayout(node)
-    : isInlineBlock
-      ? getRenderableInlineLayout(node)
-      : null;
-
-  // Check if a grid strategy was provided for this element
-  const gridClass = classList?.find(c => ctx.gridStrategies?.[`.${c}`]);
-  const gridStrategy = gridClass ? ctx.gridStrategies[`.${gridClass}`] : null;
-
-  // Check hover spec
-  const hoverClass = classList?.find(c => ctx.hoverSpecs?.[`.${c}`]);
-  const hoverSpec = hoverClass ? ctx.hoverSpecs[`.${hoverClass}`] : null;
-
+    };
+  }
+
+  // Frame node
+  const isGrid = computed.display === 'grid';
+  const isFlex = computed.display === 'flex' || computed.display === 'inline-flex';
+  const isInlineBlock = computed.display === 'inline-block';
+  const flexLayoutInfo = isFlex ? getRenderableFlexLayout(node) : null;
+
+  const layout = isFlex
+    ? flexLayoutInfo?.layout
+    : isInlineBlock
+      ? getRenderableInlineLayout(node)
+      : null;
+
+  // Check if a grid strategy was provided for this element
+  const gridClass = classList?.find(c => ctx.gridStrategies?.[`.${c}`]);
+  const gridStrategy = gridClass ? ctx.gridStrategies[`.${gridClass}`] : null;
+
+  // Check hover spec
+  const hoverClass = classList?.find(c => ctx.hoverSpecs?.[`.${c}`]);
+  const hoverSpec = hoverClass ? ctx.hoverSpecs[`.${hoverClass}`] : null;
+
   // Background fills
-  const fills = mapBackgroundColor(computed);
+  let fills = mapBackgroundColor(computed);
   const backgroundPattern = detectBackgroundPattern(computed);
 
   // Handle linear-gradient in backgroundImage
@@ -110,944 +142,1297 @@ function buildNode(node, parentContext, ctx, path) {
     } catch { /* skip malformed gradients */ }
   }
 
-  const frameNode = {
-    ...base,
-    ...(_pageLayout ? { _pageLayout: true } : {}),
-    ...(_role ? { _role } : {}),
-    fills,
-    ...mapPadding(computed),
-    ...mapOverflow(computed),
-    ...mapBorderRadius(computed, rect),
-    ...mapBorder(computed),
-    effects: mapBoxShadow(computed),
-    opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
-    ...(layout || {}),
-    ...(isAbsolute ? { layoutPositioning: 'ABSOLUTE' } : {}),
-    ...(computed.mixBlendMode && computed.mixBlendMode !== 'normal' ? {
-      blendMode: computed.mixBlendMode.toUpperCase().replace(/-/g, '_'),
-    } : {}),
-  };
-
-  // Apply grid strategy when a renderable fallback is available
-  const renderableGridStrategy = isGrid ? getRenderableGridStrategy(node, gridStrategy) : null;
-  if (renderableGridStrategy) {
-    frameNode._gridStrategy = renderableGridStrategy;
-    frameNode._gridNotes = gridStrategy.notes;
+  if (fills.length === 0 && isPaginationNode(node) && Array.isArray(parentContext?.surfaceFills) && parentContext.surfaceFills.length > 0) {
+    fills = clonePaints(parentContext.surfaceFills);
   }
 
-  // Attach hover spec for Figma plugin to create variants
-  if (hoverSpec) {
-    frameNode._hoverSpec = hoverSpec;
-  }
-  if (backgroundPattern) {
-    frameNode._backgroundPattern = backgroundPattern;
-  }
+  const nextSurfaceFills = fills.length > 0 ? clonePaints(fills) : (parentContext?.surfaceFills || []);
 
+  const frameNode = {
+    ...base,
+    ...(_pageLayout ? { _pageLayout: true } : {}),
+    ...(_role ? { _role } : {}),
+    fills,
+    ...mapPadding(computed),
+    ...mapOverflow(computed),
+    ...mapBorderRadius(computed, rect),
+    ...mapBorder(computed),
+    effects: mapBoxShadow(computed),
+    opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
+    ...(layout || {}),
+    ...(computed.mixBlendMode && computed.mixBlendMode !== 'normal' ? {
+      blendMode: computed.mixBlendMode.toUpperCase().replace(/-/g, '_'),
+    } : {}),
+  };
+
+  if (_pageLayout || tag === 'body') {
+    frameNode.clipsContent = true;
+  }
+
+  // Apply grid strategy when a renderable fallback is available
+  const renderableGridStrategy = isGrid ? getRenderableGridStrategy(node, gridStrategy) : null;
+  if (renderableGridStrategy) {
+    frameNode._gridStrategy = renderableGridStrategy;
+    frameNode._gridNotes = gridStrategy.notes;
+  }
+
+  // Attach hover spec for Figma plugin to create variants
+  if (hoverSpec) {
+    frameNode._hoverSpec = hoverSpec;
+  }
+  if (backgroundPattern) {
+    frameNode._backgroundPattern = backgroundPattern;
+  }
+
   // Recurse
   const childNodes = [];
+  const childTextTruncationContext = usesTableCellAutoWidth ? null : getChildTextTruncationContext(node, resolvedRect, inheritedTextTruncationContext);
 
   if (isLeafText) {
-    childNodes.push(buildEmbeddedTextNode(node, ctx, `${path}.text`, resolvedRect));
-  }
-
-  const controlTextNode = buildFormControlTextNode(node, ctx, `${path}.control`, resolvedRect);
-  if (controlTextNode) {
-    childNodes.push(controlTextNode);
-  }
-
-  const pseudoChildren = (node.pseudoChildren || []).concat(getNativePseudoChildren(node));
-  const mergeablePseudoBackgrounds = [];
-  const renderablePseudoChildren = [];
-
-  for (const pseudo of pseudoChildren) {
-    if (shouldMergePseudoIntoParent(node, pseudo)) {
-      mergeablePseudoBackgrounds.push(...buildMergedPseudoBackgrounds(pseudo));
-      continue;
-    }
-    renderablePseudoChildren.push(pseudo);
-  }
-
-  const pseudoBefore = renderablePseudoChildren
-    .filter((pseudo) => pseudo.zOrder !== 'top')
-    .map((pseudo, index) => buildPseudoNode(pseudo, `${path}.pseudo.${index}`, ctx))
-    .filter(Boolean);
-  const pseudoTop = renderablePseudoChildren
-    .filter((pseudo) => pseudo.zOrder === 'top')
-    .map((pseudo, index) => buildPseudoNode(pseudo, `${path}.pseudoTop.${index}`, ctx))
-    .filter(Boolean);
-
-  frameNode.children = pseudoBefore
-    .concat(childNodes)
-    .concat(
-      children
-        .map((child, index) => buildNode(child, { sourceRect: rect, resolvedRect }, ctx, `${path}.${index}`))
+    childNodes.push(buildEmbeddedTextNode(node, ctx, `${path}.text`, resolvedRect, 'text', childTextTruncationContext, usesTableCellAutoWidth));
+  }
+
+  const controlTextNode = buildFormControlTextNode(node, ctx, `${path}.control`, resolvedRect, childTextTruncationContext, usesTableCellAutoWidth);
+  if (controlTextNode) {
+    childNodes.push(controlTextNode);
+  }
+
+  const pseudoChildren = (node.pseudoChildren || []).concat(getNativePseudoChildren(node));
+  const mergeablePseudoBackgrounds = [];
+  const renderablePseudoChildren = [];
+
+  for (const pseudo of pseudoChildren) {
+    if (shouldMergePseudoIntoParent(node, pseudo)) {
+      mergeablePseudoBackgrounds.push(...buildMergedPseudoBackgrounds(pseudo));
+      continue;
+    }
+    renderablePseudoChildren.push(pseudo);
+  }
+
+  const pseudoBefore = renderablePseudoChildren
+    .filter((pseudo) => pseudo.zOrder !== 'top')
+    .map((pseudo, index) => buildPseudoNode(pseudo, `${path}.pseudo.${index}`, ctx))
+    .filter(Boolean);
+  const pseudoTop = renderablePseudoChildren
+    .filter((pseudo) => pseudo.zOrder === 'top')
+    .map((pseudo, index) => buildPseudoNode(pseudo, `${path}.pseudoTop.${index}`, ctx))
+    .filter(Boolean);
+
+  frameNode.children = pseudoBefore
+    .concat(childNodes)
+    .concat(
+      getOrderedChildren(children)
+        .map((child, index) => buildNode(child, {
+          sourceRect: rect,
+          resolvedRect,
+          sourceNode: node,
+          textTruncationContext: childTextTruncationContext,
+          tableCellAutoWidth: usesTableCellAutoWidth,
+          surfaceFills: nextSurfaceFills,
+        }, ctx, `${path}.${index}`))
         .filter(Boolean)
     )
     .concat(pseudoTop);
-
-  if (mergeablePseudoBackgrounds.length > 0) {
-    frameNode.fills = frameNode.fills.concat(mergeablePseudoBackgrounds);
-  }
-
-  return frameNode;
-}
-
-function resolveRenderedRect(node, parentContext) {
-  const sourceRect = node?.rect || { x: 0, y: 0, width: 0, height: 0 };
-  if (!parentContext?.sourceRect || !parentContext?.resolvedRect) {
-    return sourceRect;
-  }
-
-  const resolved = reprojectRectWithinParent(sourceRect, parentContext.sourceRect, parentContext.resolvedRect);
-  if (shouldStretchAspectWrapper(node, parentContext)) {
-    return {
-      ...resolved,
-      width: parentContext.resolvedRect.width,
-      height: parentContext.resolvedRect.height,
-      x: parentContext.resolvedRect.x + (sourceRect.x - parentContext.sourceRect.x),
-      y: parentContext.resolvedRect.y + (sourceRect.y - parentContext.sourceRect.y),
-    };
-  }
-
-  return resolved;
-}
-
-function reprojectRectWithinParent(childRect, sourceParentRect, resolvedParentRect) {
-  const rect = childRect || { x: 0, y: 0, width: 0, height: 0 };
-  const sourceParent = sourceParentRect || { x: 0, y: 0, width: 0, height: 0 };
-  const resolvedParent = resolvedParentRect || sourceParent;
-  const tolerance = 1.5;
-
-  if (isSameRect(sourceParent, resolvedParent)) {
-    return rect;
-  }
-
-  const leftOffset = (rect.x ?? 0) - (sourceParent.x ?? 0);
-  const topOffset = (rect.y ?? 0) - (sourceParent.y ?? 0);
-  const rightOffset = (sourceParent.x ?? 0) + (sourceParent.width ?? 0) - ((rect.x ?? 0) + (rect.width ?? 0));
-  const bottomOffset = (sourceParent.y ?? 0) + (sourceParent.height ?? 0) - ((rect.y ?? 0) + (rect.height ?? 0));
-
-  const fillsHorizontal = isClose(leftOffset, 0, tolerance)
-    && isClose(rightOffset, 0, tolerance)
-    && isClose(rect.width ?? 0, sourceParent.width ?? 0, tolerance);
-  const fillsVertical = isClose(topOffset, 0, tolerance)
-    && isClose(bottomOffset, 0, tolerance)
-    && isClose(rect.height ?? 0, sourceParent.height ?? 0, tolerance);
-
-  const width = fillsHorizontal ? resolvedParent.width : rect.width;
-  const height = fillsVertical ? resolvedParent.height : rect.height;
-
-  const x = fillsHorizontal
-    ? resolvedParent.x + leftOffset
-    : (rightOffset < leftOffset
-      ? resolvedParent.x + resolvedParent.width - rightOffset - width
-      : resolvedParent.x + leftOffset);
-
-  const y = fillsVertical
-    ? resolvedParent.y + topOffset
-    : (bottomOffset < topOffset
-      ? resolvedParent.y + resolvedParent.height - bottomOffset - height
-      : resolvedParent.y + topOffset);
-
-  return {
-    x,
-    y,
-    width,
-    height,
-  };
-}
-
-function shouldStretchAspectWrapper(node, parentContext) {
-  if (!node?.rect || !parentContext?.sourceRect || !parentContext?.resolvedRect) {
-    return false;
-  }
-
-  if (node.computed?.position === 'absolute' || node.computed?.position === 'fixed') {
-    return false;
-  }
-
-  if (parsePx(node.computed?.paddingBottom) <= 0) {
-    return false;
-  }
-
-  if (!Array.isArray(node.children) || node.children.length === 0) {
-    return false;
-  }
-
-  if (node.children.some((child) => !isAbsoluteLikeNode(child))) {
-    return false;
-  }
-
-  if (node.pseudoChildren?.length > 0 || node?.pseudo?.before || node?.pseudo?.after) {
-    return false;
-  }
-
-  const sourceRect = node.rect;
-  const parentRect = parentContext.sourceRect;
-  const widthMatches = isClose(sourceRect.width, parentRect.width, 2);
-  const xMatches = isClose(sourceRect.x, parentRect.x, 2);
-  const yMatches = isClose(sourceRect.y, parentRect.y, 2);
-  const isShorter = sourceRect.height + 2 < parentRect.height;
-
-  return widthMatches && xMatches && yMatches && isShorter;
-}
-
-function isClose(a, b, tolerance = 1.5) {
-  return Math.abs((a ?? 0) - (b ?? 0)) <= tolerance;
-}
-
-function isSameRect(a, b, tolerance = 0.01) {
-  return isClose(a?.x, b?.x, tolerance)
-    && isClose(a?.y, b?.y, tolerance)
-    && isClose(a?.width, b?.width, tolerance)
-    && isClose(a?.height, b?.height, tolerance);
-}
-
-function getNativePseudoChildren(node) {
-  const result = [];
-  const pseudo = node?.pseudo || {};
-  const rect = node?.rect || { x: 0, y: 0 };
-
-  for (const type of ['before', 'after']) {
-    const entry = pseudo[type];
-    if (!entry?.rect) continue;
-
-    result.push({
-      ...entry,
-      x: entry.rect.x - rect.x,
-      y: entry.rect.y - rect.y,
-      width: entry.rect.width,
-      height: entry.rect.height,
-      zOrder: entry.zOrder || (type === 'before' ? 'bottom' : 'top'),
-    });
-  }
-
-  return result;
-}
-
-function buildPseudoNode(pseudo, path, ctx = {}) {
-  const pseudoId = `pseudo-${path}-${pseudo.name.replace(/\s+/g, '-').toLowerCase()}`;
-  const isTextPseudo = pseudo.type === 'text' && Boolean(pseudo.content);
-  const pseudoBackgrounds = isTextPseudo ? [] : buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor);
-  const pseudoEffects = pseudo.computed ? mapBoxShadow(pseudo.computed) : [];
-  const pseudoStrokes = pseudo.computed ? mapBorder(pseudo.computed) : {};
-  const textTypography = pseudo.computed
-    ? {
-        ...mapTypography(pseudo.computed, ctx.fontMap),
-        ...mapTextStroke(pseudo.computed),
-      }
-    : {
-        fontName: {
-          family: 'Inter',
-          style: 'Regular',
-        },
-        fontSize: Math.max(Math.min(Math.round(pseudo.height || 16), 48), 12),
-        fills: pseudo.fillColor && pseudo.fillColor !== 'noise-texture'
-          ? [colorSolidPaint(pseudo.fillColor)]
-          : [colorSolidPaint('#ffffff')],
-      };
-
-  return {
-    id: pseudoId,
-    name: `[pseudo] ${pseudo.name}`,
-    type: 'FRAME',
-    x: Math.round(pseudo.x),
-    y: Math.round(pseudo.y),
-    width: Math.round(pseudo.width),
-    height: Math.round(pseudo.height),
-    opacity: roundFloat(pseudo.opacity ?? 1),
-    fills: pseudoBackgrounds,
-    ...pseudoStrokes,
-    effects: pseudoEffects,
-    _isPseudo: true,
-    _pseudoType: pseudo.type,
-    _pseudoPosition: pseudo.position,
-    children: pseudo.content ? [{
-      id: `${pseudoId}-content`,
-      name: 'content',
-      type: 'TEXT',
-      characters: pseudo.content,
-      x: 0, y: 0,
-      width: pseudo.width,
-      height: pseudo.height,
-      ...textTypography,
-    }] : [],
-  };
-}
-
-function buildFormControlTextNode(node, ctx, path, resolvedRect = null) {
-  const rendered = resolveFormControlText(node.formControl);
-  if (!rendered) {
-    return null;
-  }
-
-  const computed = rendered.kind === 'placeholder'
-    ? mergeFormControlTextStyles(node.computed, node.formControl?.placeholderComputed)
-    : node.computed;
-
-  return buildEmbeddedTextNode(
-    {
-      ...node,
-      text: rendered.text,
-      textRuns: [{
-        text: rendered.text,
-        lineIndex: 0,
-        computed,
-      }],
-      computed,
-    },
+
+  if (mergeablePseudoBackgrounds.length > 0) {
+    frameNode.fills = frameNode.fills.concat(mergeablePseudoBackgrounds);
+  }
+
+  return frameNode;
+}
+
+function mapChildLayoutSizing(node, parentContext, resolvedRect) {
+  const parentNode = parentContext?.sourceNode;
+  const parentComputed = parentNode?.computed;
+  if (!node || !resolvedRect || !parentContext?.resolvedRect || !isFlexDisplay(parentComputed?.display) || isAbsoluteLikeNode(node)) {
+    return {};
+  }
+
+  const result = {};
+  const parentRect = parentContext.resolvedRect;
+  const parentInnerWidth = Math.max(parentRect.width - parsePx(parentComputed.paddingLeft) - parsePx(parentComputed.paddingRight), 0);
+  const parentInnerHeight = Math.max(parentRect.height - parsePx(parentComputed.paddingTop) - parsePx(parentComputed.paddingBottom), 0);
+  const axis = isRowFlexDirection(parentComputed.flexDirection) ? 'HORIZONTAL' : 'VERTICAL';
+  const flexGrow = parseFloat(node.computed?.flexGrow);
+
+  if (axis === 'VERTICAL' && fillsAxis(resolvedRect.width, parentInnerWidth)) {
+    result.layoutSizingHorizontal = 'FILL';
+  }
+  if (axis === 'HORIZONTAL' && fillsAxis(resolvedRect.height, parentInnerHeight)) {
+    result.layoutSizingVertical = 'FILL';
+  }
+
+  if (Number.isFinite(flexGrow) && flexGrow > 0) {
+    if (axis === 'HORIZONTAL') {
+      if (!shouldHugSingleTextFlexChild(parentNode, node, axis)) {
+        result.layoutSizingHorizontal = 'FILL';
+      }
+    } else {
+      result.layoutSizingVertical = 'FILL';
+    }
+  }
+
+  return result;
+}
+
+function fillsAxis(childSize, parentInnerSize) {
+  if (!Number.isFinite(childSize) || !Number.isFinite(parentInnerSize) || parentInnerSize <= 0) {
+    return false;
+  }
+
+  return Math.abs(childSize - parentInnerSize) <= Math.max(2, parentInnerSize * 0.02);
+}
+
+function resolveRenderedRect(node, parentContext) {
+  const sourceRect = node?.rect || { x: 0, y: 0, width: 0, height: 0 };
+  if (!parentContext?.sourceRect || !parentContext?.resolvedRect) {
+    return sourceRect;
+  }
+
+  const resolved = reprojectRectWithinParent(sourceRect, parentContext.sourceRect, parentContext.resolvedRect);
+  if (shouldStretchAspectWrapper(node, parentContext)) {
+    return {
+      ...resolved,
+      width: parentContext.resolvedRect.width,
+      height: parentContext.resolvedRect.height,
+      x: parentContext.resolvedRect.x + (sourceRect.x - parentContext.sourceRect.x),
+      y: parentContext.resolvedRect.y + (sourceRect.y - parentContext.sourceRect.y),
+    };
+  }
+
+  return resolved;
+}
+
+function reprojectRectWithinParent(childRect, sourceParentRect, resolvedParentRect) {
+  const rect = childRect || { x: 0, y: 0, width: 0, height: 0 };
+  const sourceParent = sourceParentRect || { x: 0, y: 0, width: 0, height: 0 };
+  const resolvedParent = resolvedParentRect || sourceParent;
+  const tolerance = 1.5;
+
+  if (isSameRect(sourceParent, resolvedParent)) {
+    return rect;
+  }
+
+  const leftOffset = (rect.x ?? 0) - (sourceParent.x ?? 0);
+  const topOffset = (rect.y ?? 0) - (sourceParent.y ?? 0);
+  const rightOffset = (sourceParent.x ?? 0) + (sourceParent.width ?? 0) - ((rect.x ?? 0) + (rect.width ?? 0));
+  const bottomOffset = (sourceParent.y ?? 0) + (sourceParent.height ?? 0) - ((rect.y ?? 0) + (rect.height ?? 0));
+
+  const fillsHorizontal = isClose(leftOffset, 0, tolerance)
+    && isClose(rightOffset, 0, tolerance)
+    && isClose(rect.width ?? 0, sourceParent.width ?? 0, tolerance);
+  const fillsVertical = isClose(topOffset, 0, tolerance)
+    && isClose(bottomOffset, 0, tolerance)
+    && isClose(rect.height ?? 0, sourceParent.height ?? 0, tolerance);
+
+  const width = fillsHorizontal ? resolvedParent.width : rect.width;
+  const height = fillsVertical ? resolvedParent.height : rect.height;
+
+  const x = fillsHorizontal
+    ? resolvedParent.x + leftOffset
+    : (rightOffset < leftOffset
+      ? resolvedParent.x + resolvedParent.width - rightOffset - width
+      : resolvedParent.x + leftOffset);
+
+  const y = fillsVertical
+    ? resolvedParent.y + topOffset
+    : (bottomOffset < topOffset
+      ? resolvedParent.y + resolvedParent.height - bottomOffset - height
+      : resolvedParent.y + topOffset);
+
+  return {
+    x,
+    y,
+    width,
+    height,
+  };
+}
+
+function shouldStretchAspectWrapper(node, parentContext) {
+  if (!node?.rect || !parentContext?.sourceRect || !parentContext?.resolvedRect) {
+    return false;
+  }
+
+  if (node.computed?.position === 'absolute' || node.computed?.position === 'fixed') {
+    return false;
+  }
+
+  if (parsePx(node.computed?.paddingBottom) <= 0) {
+    return false;
+  }
+
+  if (!Array.isArray(node.children) || node.children.length === 0) {
+    return false;
+  }
+
+  if (node.children.some((child) => !isAbsoluteLikeNode(child))) {
+    return false;
+  }
+
+  if (node.pseudoChildren?.length > 0 || node?.pseudo?.before || node?.pseudo?.after) {
+    return false;
+  }
+
+  const sourceRect = node.rect;
+  const parentRect = parentContext.sourceRect;
+  const widthMatches = isClose(sourceRect.width, parentRect.width, 2);
+  const xMatches = isClose(sourceRect.x, parentRect.x, 2);
+  const yMatches = isClose(sourceRect.y, parentRect.y, 2);
+  const isShorter = sourceRect.height + 2 < parentRect.height;
+
+  return widthMatches && xMatches && yMatches && isShorter;
+}
+
+function isClose(a, b, tolerance = 1.5) {
+  return Math.abs((a ?? 0) - (b ?? 0)) <= tolerance;
+}
+
+function isSameRect(a, b, tolerance = 0.01) {
+  return isClose(a?.x, b?.x, tolerance)
+    && isClose(a?.y, b?.y, tolerance)
+    && isClose(a?.width, b?.width, tolerance)
+    && isClose(a?.height, b?.height, tolerance);
+}
+
+function getNativePseudoChildren(node) {
+  const result = [];
+  const pseudo = node?.pseudo || {};
+  const rect = node?.rect || { x: 0, y: 0 };
+
+  for (const type of ['before', 'after']) {
+    const entry = pseudo[type];
+    if (!entry?.rect) continue;
+
+    result.push({
+      ...entry,
+      x: entry.rect.x - rect.x,
+      y: entry.rect.y - rect.y,
+      width: entry.rect.width,
+      height: entry.rect.height,
+      zOrder: entry.zOrder || (type === 'before' ? 'bottom' : 'top'),
+    });
+  }
+
+  return result;
+}
+
+function buildPseudoNode(pseudo, path, ctx = {}) {
+  const pseudoId = `pseudo-${path}-${pseudo.name.replace(/\s+/g, '-').toLowerCase()}`;
+  const isTextPseudo = pseudo.type === 'text' && Boolean(pseudo.content);
+  const pseudoBackgrounds = isTextPseudo ? [] : buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor);
+  const pseudoEffects = pseudo.computed ? mapBoxShadow(pseudo.computed) : [];
+  const pseudoStrokes = pseudo.computed ? mapBorder(pseudo.computed) : {};
+  const textTypography = pseudo.computed
+    ? {
+        ...mapTypography(pseudo.computed, ctx.fontMap),
+        ...mapTextStroke(pseudo.computed),
+      }
+    : {
+        fontName: {
+          family: 'Inter',
+          style: 'Regular',
+        },
+        fontSize: Math.max(Math.min(Math.round(pseudo.height || 16), 48), 12),
+        fills: pseudo.fillColor && pseudo.fillColor !== 'noise-texture'
+          ? [colorSolidPaint(pseudo.fillColor)]
+          : [colorSolidPaint('#ffffff')],
+      };
+
+  return {
+    id: pseudoId,
+    name: `[pseudo] ${pseudo.name}`,
+    type: 'FRAME',
+    x: Math.round(pseudo.x),
+    y: Math.round(pseudo.y),
+    width: Math.round(pseudo.width),
+    height: Math.round(pseudo.height),
+    layoutPositioning: 'ABSOLUTE',
+    opacity: roundFloat(pseudo.opacity ?? 1),
+    fills: pseudoBackgrounds,
+    ...pseudoStrokes,
+    effects: pseudoEffects,
+    _isPseudo: true,
+    _pseudoType: pseudo.type,
+    _pseudoPosition: pseudo.position,
+    children: pseudo.content ? [{
+      id: `${pseudoId}-content`,
+      name: 'content',
+      type: 'TEXT',
+      characters: pseudo.content,
+      x: 0, y: 0,
+      width: pseudo.width,
+      height: pseudo.height,
+      ...textTypography,
+    }] : [],
+  };
+}
+
+function buildFormControlTextNode(node, ctx, path, resolvedRect = null, textTruncationContext = null, tableCellAutoWidth = false) {
+  const rendered = resolveFormControlText(node.formControl);
+  if (!rendered) {
+    return null;
+  }
+
+  const computed = rendered.kind === 'placeholder'
+    ? mergeFormControlTextStyles(node.computed, node.formControl?.placeholderComputed)
+    : node.computed;
+
+  return buildEmbeddedTextNode(
+    {
+      ...node,
+      text: rendered.text,
+      textRuns: [{
+        text: rendered.text,
+        lineIndex: 0,
+        computed,
+      }],
+      computed,
+    },
     ctx,
     path,
     resolvedRect,
-    rendered.kind
+    rendered.kind,
+    textTruncationContext,
+    tableCellAutoWidth
   );
 }
-
-function resolveFormControlText(formControl) {
-  if (!formControl) {
-    return null;
-  }
-
-  const value = normalizeControlText(formControl.value);
-  if (value) {
-    return { kind: 'value', text: value };
-  }
-
-  const placeholder = normalizeControlText(formControl.placeholder);
-  if (placeholder) {
-    return { kind: 'placeholder', text: placeholder };
-  }
-
-  return null;
-}
-
-function normalizeControlText(value) {
-  return String(value || '').replace(/\r/g, '').trim();
-}
-
-function mergeFormControlTextStyles(baseComputed, overrideComputed) {
-  if (!overrideComputed) {
-    return baseComputed;
-  }
-
-  const merged = { ...baseComputed };
-  const textKeys = [
-    'fontFamily',
-    'fontSize',
-    'fontWeight',
-    'fontStyle',
-    'lineHeight',
-    'letterSpacing',
-    'textAlign',
-    'textTransform',
-    'color',
-    'opacity',
-    'textDecoration',
-    'webkitTextStrokeWidth',
-    'webkitTextStrokeColor',
-  ];
-
-  for (const key of textKeys) {
-    if (overrideComputed[key] !== undefined && overrideComputed[key] !== null && overrideComputed[key] !== '') {
-      merged[key] = overrideComputed[key];
-    }
-  }
-
-  return merged;
-}
-
-function buildPseudoBackgrounds(computed, fallbackFillColor) {
-  if (!computed) {
-    return fallbackFillColor && fallbackFillColor !== 'noise-texture'
-      ? [colorSolidPaint(fallbackFillColor)]
-      : [];
-  }
-
-  const fills = mapBackgroundColor(computed);
-  if (computed.backgroundImage && computed.backgroundImage.includes('linear-gradient')) {
-    fills.push(...parseLinearGradientLayers(computed.backgroundImage));
-  }
-
-  if (fills.length === 0 && fallbackFillColor && fallbackFillColor !== 'noise-texture') {
-    fills.push(colorSolidPaint(fallbackFillColor));
-  }
-
-  return fills;
-}
-
-function buildMergedPseudoBackgrounds(pseudo) {
-  const paints = buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor);
-  const opacity = Number.isFinite(pseudo.opacity) ? pseudo.opacity : 1;
-  return paints.map((paint) => applyPaintOpacity(paint, opacity));
-}
-
-function shouldMergePseudoIntoParent(node, pseudo) {
-  if (!node?.computed || !pseudo || pseudo.type === 'text' || pseudo.zOrder !== 'bottom') {
-    return false;
-  }
-
-  const position = pseudo.position;
-  if (position !== 'absolute' && position !== 'fixed') {
-    return false;
-  }
-
-  if (!isTransparentCssBackground(node.computed) || !pseudo.rect || !node.rect) {
-    return false;
-  }
-
-  const parent = node.rect;
-  const child = pseudo.rect;
-  const tolerance = 1.5;
-  const coversParent =
-    Math.abs((child.x ?? 0) - (parent.x ?? 0)) <= tolerance &&
-    Math.abs((child.y ?? 0) - (parent.y ?? 0)) <= tolerance &&
-    Math.abs((child.width ?? 0) - (parent.width ?? 0)) <= tolerance &&
-    Math.abs((child.height ?? 0) - (parent.height ?? 0)) <= tolerance;
-
-  if (!coversParent) {
-    return false;
-  }
-
-  return buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor).length > 0;
-}
-
-function isTransparentCssBackground(computed) {
-  const backgroundColor = computed?.backgroundColor || '';
-  const backgroundImage = computed?.backgroundImage || '';
-  return isTransparentCssColor(backgroundColor) && backgroundImage === 'none';
-}
-
-function isTransparentCssColor(value) {
-  if (!value || value === 'transparent' || value === 'none') {
-    return true;
-  }
-  return cssColorToFigma(value).a === 0;
-}
-
+
+function resolveFormControlText(formControl) {
+  if (!formControl) {
+    return null;
+  }
+
+  const value = normalizeControlText(formControl.value);
+  if (value) {
+    return { kind: 'value', text: value };
+  }
+
+  const placeholder = normalizeControlText(formControl.placeholder);
+  if (placeholder) {
+    return { kind: 'placeholder', text: placeholder };
+  }
+
+  return null;
+}
+
+function normalizeControlText(value) {
+  return String(value || '').replace(/\r/g, '').trim();
+}
+
+function mergeFormControlTextStyles(baseComputed, overrideComputed) {
+  if (!overrideComputed) {
+    return baseComputed;
+  }
+
+  const merged = { ...baseComputed };
+  const textKeys = [
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'fontStyle',
+    'lineHeight',
+    'letterSpacing',
+    'textAlign',
+    'textTransform',
+    'color',
+    'opacity',
+    'textDecoration',
+    'webkitTextStrokeWidth',
+    'webkitTextStrokeColor',
+  ];
+
+  for (const key of textKeys) {
+    if (overrideComputed[key] !== undefined && overrideComputed[key] !== null && overrideComputed[key] !== '') {
+      merged[key] = overrideComputed[key];
+    }
+  }
+
+  return merged;
+}
+
+function buildPseudoBackgrounds(computed, fallbackFillColor) {
+  if (!computed) {
+    return fallbackFillColor && fallbackFillColor !== 'noise-texture'
+      ? [colorSolidPaint(fallbackFillColor)]
+      : [];
+  }
+
+  const fills = mapBackgroundColor(computed);
+  if (computed.backgroundImage && computed.backgroundImage.includes('linear-gradient')) {
+    fills.push(...parseLinearGradientLayers(computed.backgroundImage));
+  }
+
+  if (fills.length === 0 && fallbackFillColor && fallbackFillColor !== 'noise-texture') {
+    fills.push(colorSolidPaint(fallbackFillColor));
+  }
+
+  return fills;
+}
+
+function buildMergedPseudoBackgrounds(pseudo) {
+  const paints = buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor);
+  const opacity = Number.isFinite(pseudo.opacity) ? pseudo.opacity : 1;
+  return paints.map((paint) => applyPaintOpacity(paint, opacity));
+}
+
+function shouldMergePseudoIntoParent(node, pseudo) {
+  if (!node?.computed || !pseudo || pseudo.type === 'text' || pseudo.zOrder !== 'bottom') {
+    return false;
+  }
+
+  const position = pseudo.position;
+  if (position !== 'absolute' && position !== 'fixed') {
+    return false;
+  }
+
+  if (!isTransparentCssBackground(node.computed) || !pseudo.rect || !node.rect) {
+    return false;
+  }
+
+  const parent = node.rect;
+  const child = pseudo.rect;
+  const tolerance = 1.5;
+  const coversParent =
+    Math.abs((child.x ?? 0) - (parent.x ?? 0)) <= tolerance &&
+    Math.abs((child.y ?? 0) - (parent.y ?? 0)) <= tolerance &&
+    Math.abs((child.width ?? 0) - (parent.width ?? 0)) <= tolerance &&
+    Math.abs((child.height ?? 0) - (parent.height ?? 0)) <= tolerance;
+
+  if (!coversParent) {
+    return false;
+  }
+
+  return buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor).length > 0;
+}
+
+function isTransparentCssBackground(computed) {
+  const backgroundColor = computed?.backgroundColor || '';
+  const backgroundImage = computed?.backgroundImage || '';
+  return isTransparentCssColor(backgroundColor) && backgroundImage === 'none';
+}
+
+function isTransparentCssColor(value) {
+  if (!value || value === 'transparent' || value === 'none') {
+    return true;
+  }
+  return cssColorToFigma(value).a === 0;
+}
+
 function applyPaintOpacity(paint, opacity) {
   if (!paint || opacity === 1 || !Number.isFinite(opacity)) {
     return paint;
   }
-
-  const copy = JSON.parse(JSON.stringify(paint));
-  const existing = Number.isFinite(copy.opacity) ? copy.opacity : 1;
+
+  const copy = JSON.parse(JSON.stringify(paint));
+  const existing = Number.isFinite(copy.opacity) ? copy.opacity : 1;
   copy.opacity = existing * opacity;
   return copy;
 }
 
-function buildName(tag, classList) {
-  if (classList?.length > 0) return `${tag}.${classList.slice(0, 2).join('.')}`;
-  return tag;
+function clonePaints(paints) {
+  return (paints || []).map((paint) => JSON.parse(JSON.stringify(paint)));
 }
 
-function buildStableId(tag, classList, path) {
-  const slug = (classList?.slice(0, 2).join('-') || 'el')
-    .replace(/[^a-zA-Z0-9_-]+/g, '-')
-    .replace(/-+/g, '-')
-    .replace(/^-|-$/g, '')
-    || 'el';
-
-  return `${tag}-${slug}-${path.replace(/\./g, '-')}`;
-}
+function isPaginationNode(node) {
+  if (!node) {
+    return false;
+  }
 
-function roundFloat(value, precision = 4) {
-  const factor = 10 ** precision;
-  return Math.round((value + Number.EPSILON) * factor) / factor;
+  const haystack = `${node.tag || ''} ${(node.classList || []).join(' ')} ${node.id || ''} ${node.name || ''}`.toLowerCase();
+  return /(?:^|\s)(pagination|paginator|pager|page-nav|page-control)(?:\s|$)/.test(haystack)
+    || /pagination|paginator|pager|page-nav|page-control/.test(haystack);
 }
-
-function buildEmbeddedTextNode(node, ctx, path, resolvedRect = null, nameSuffix = 'text') {
+
+function buildName(tag, classList) {
+  if (classList?.length > 0) return `${tag}.${classList.slice(0, 2).join('.')}`;
+  return tag;
+}
+
+function buildStableId(tag, classList, path) {
+  const slug = (classList?.slice(0, 2).join('-') || 'el')
+    .replace(/[^a-zA-Z0-9_-]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    || 'el';
+
+  return `${tag}-${slug}-${path.replace(/\./g, '-')}`;
+}
+
+function roundFloat(value, precision = 4) {
+  const factor = 10 ** precision;
+  return Math.round((value + Number.EPSILON) * factor) / factor;
+}
+
+function buildEmbeddedTextNode(node, ctx, path, resolvedRect = null, nameSuffix = 'text', textTruncationContext = null, tableCellAutoWidth = false) {
   const { computed, rect, tag, text, textRuns = [], classList } = node;
   const insetX = parsePx(computed.paddingLeft);
   const insetY = parsePx(computed.paddingTop);
   const sourceRect = resolvedRect || rect;
-  const width = Math.max(Math.round(sourceRect.width - insetX - parsePx(computed.paddingRight)), 1);
-  const height = Math.max(Math.round(sourceRect.height - insetY - parsePx(computed.paddingBottom)), 1);
+  const initialTextRect = {
+    x: sourceRect.x + insetX,
+    y: sourceRect.y + insetY,
+    width: Math.max(sourceRect.width - insetX - parsePx(computed.paddingRight), 1),
+    height: Math.max(sourceRect.height - insetY - parsePx(computed.paddingBottom), 1),
+  };
+  const textRect = textTruncationContext
+    ? clampRectToTextTruncationContext(initialTextRect, textTruncationContext)
+    : initialTextRect;
+  const typography = mapTypography(computed, ctx.fontMap, node.computed);
+  if (tableCellAutoWidth) {
+    forceAutoWidthTableCellText(typography);
+  } else if (textTruncationContext && !typography.textTruncation) {
+    typography.textTruncation = 'ENDING';
+  }
 
   return {
     id: buildStableId(tag, classList, `${path}-inner`),
     name: `${buildName(tag, classList)} / ${nameSuffix}`,
     type: 'TEXT',
-    x: Math.round(insetX),
-    y: Math.round(insetY),
-    width,
-    height,
+    x: Math.round(textRect.x - sourceRect.x),
+    y: Math.round(textRect.y - sourceRect.y),
+    width: Math.max(Math.round(textRect.width), 1),
+    height: Math.max(Math.round(textRect.height), 1),
     characters: text,
-    ...mapTypography(computed, ctx.fontMap),
+    ...typography,
     ...mapFlexTextAlignment(computed),
     ...mapTextStroke(computed),
     textRuns: buildTextRuns(textRuns, ctx.fontMap),
   };
 }
 
-function attachPseudoElements(root, pseudoElements) {
-  if (!root || !Array.isArray(pseudoElements) || pseudoElements.length === 0) return;
-
-  for (const pseudo of pseudoElements) {
-    const target = findBestPseudoParent(root, pseudo) || root;
-    const relative = {
-      ...pseudo,
-      x: Math.round(pseudo.x - (target.rect?.x ?? 0)),
-      y: Math.round(pseudo.y - (target.rect?.y ?? 0)),
-    };
-    if (!target.pseudoChildren) {
-      target.pseudoChildren = [];
-    }
-    target.pseudoChildren.push(relative);
-  }
-}
-
-function normalizeRootStructure(root) {
-  if (!root || root.tag !== 'body' || !Array.isArray(root.children) || root.children.length === 0) {
-    return root;
-  }
-
-  const headerChildren = root.children.filter((child) => isTopHeaderChild(child, root.rect));
-  if (headerChildren.length === 0 || headerChildren.length === root.children.length) {
-    return {
-      ...root,
-      _pageLayout: true,
-    };
-  }
-
-  const otherChildren = root.children.filter((child) => !isTopHeaderChild(child, root.rect));
-  const syntheticHeader = buildSyntheticGroup('header', headerChildren);
-  return {
-    ...root,
-    _pageLayout: true,
-    children: [syntheticHeader].concat(otherChildren),
-  };
-}
-
-function isTopHeaderChild(node, rootRect) {
-  if (!node?.rect || !node?.computed) return false;
-
-  const position = node.computed.position;
-  if (position !== 'fixed' && position !== 'absolute') {
-    return false;
+function forceAutoWidthTableCellText(typography) {
+  if (!typography) {
+    return;
   }
 
-  const nearTop = Math.abs((node.rect.y ?? 0) - (rootRect?.y ?? 0)) <= 8;
-  const wideEnough = (node.rect.width ?? 0) >= Math.max((rootRect?.width ?? 0) * 0.6, 320);
-  const shortEnough = (node.rect.height ?? 0) <= Math.max((rootRect?.height ?? 0) * 0.2, 220);
-  return nearTop && wideEnough && shortEnough;
+  delete typography.textTruncation;
+  typography.whiteSpace = 'nowrap';
 }
 
-function buildSyntheticGroup(tag, children) {
-  const rect = unionRects(children.map((child) => child.rect).filter(Boolean));
-  const maxZ = Math.max(...children.map((child) => child.effectiveZ ?? 0), 0);
-
-  return {
-    tag,
-    id: null,
-    classList: [],
-    _role: 'header',
-    text: null,
-    textRuns: [],
-    isTextContainer: false,
-    rect,
-    computed: {
-      display: 'block',
-      position: 'static',
-      zIndex: String(maxZ),
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-      alignItems: 'stretch',
-      flexWrap: 'nowrap',
-      gap: '0px',
-      columnGap: '0px',
-      rowGap: '0px',
-      gridTemplateColumns: 'none',
-      gridTemplateRows: 'none',
-      gridRow: 'auto',
-      gridColumn: 'auto',
-      width: `${rect.width}px`,
-      height: `${rect.height}px`,
-      minWidth: '0px',
-      maxWidth: 'none',
-      minHeight: '0px',
-      paddingTop: '0px',
-      paddingRight: '0px',
-      paddingBottom: '0px',
-      paddingLeft: '0px',
-      marginTop: '0px',
-      marginRight: '0px',
-      marginBottom: '0px',
-      marginLeft: '0px',
-      backgroundColor: 'rgba(0, 0, 0, 0)',
-      backgroundImage: 'none',
-      backgroundSize: 'auto',
-      backgroundPosition: '0% 0%',
-      color: 'rgba(0, 0, 0, 0)',
-      opacity: '1',
-      borderRadius: '0px',
-      borderTopLeftRadius: '0px',
-      borderTopRightRadius: '0px',
-      borderBottomRightRadius: '0px',
-      borderBottomLeftRadius: '0px',
-      border: '0px none rgba(0, 0, 0, 0)',
-      borderWidth: '0px',
-      borderColor: 'rgba(0, 0, 0, 0)',
-      borderStyle: 'none',
-      boxShadow: 'none',
-      overflow: 'visible',
-      overflowX: 'visible',
-      overflowY: 'visible',
-      mixBlendMode: 'normal',
-      transform: 'none',
-      fontFamily: 'Inter',
-      fontSize: '16px',
-      fontWeight: '400',
-      fontStyle: 'normal',
-      lineHeight: 'normal',
-      letterSpacing: 'normal',
-      textAlign: 'left',
-      textTransform: 'none',
-      whiteSpace: 'normal',
-      textDecoration: 'none',
-      webkitTextStrokeWidth: '0px',
-      webkitTextStrokeColor: 'rgba(0, 0, 0, 0)',
-      top: 'auto',
-      right: 'auto',
-      bottom: 'auto',
-      left: 'auto',
-      inset: 'auto',
-      content: 'none',
-    },
-    pseudo: {
-      before: null,
-      after: null,
-    },
-    children,
-    effectiveZ: maxZ,
-  };
-}
-
-function unionRects(rects) {
-  if (!Array.isArray(rects) || rects.length === 0) {
-    return { x: 0, y: 0, width: 0, height: 0 };
-  }
-
-  const left = Math.min(...rects.map((rect) => rect.x));
-  const top = Math.min(...rects.map((rect) => rect.y));
-  const right = Math.max(...rects.map((rect) => rect.x + rect.width));
-  const bottom = Math.max(...rects.map((rect) => rect.y + rect.height));
-  return {
-    x: left,
-    y: top,
-    width: Math.max(right - left, 0),
-    height: Math.max(bottom - top, 0),
-  };
-}
-
-function getRenderableGridStrategy(node, gridStrategy) {
-  if (!node || !gridStrategy?.outerFrame || !Array.isArray(node.children) || node.children.length < 2) {
-    return null;
-  }
-
-  const axis = detectLinearChildAxis(node.children);
-  if (!axis) {
-    return null;
-  }
-
-  return {
-    ...gridStrategy.outerFrame,
-    layoutMode: axis,
-    itemSpacing: measureAxisSpacing(node.children, axis),
-  };
-}
-
-function getRenderableInlineLayout(node) {
-  if (!node?.computed || node.computed.display !== 'inline-block') {
-    return null;
-  }
-
-  const children = Array.isArray(node.children) ? node.children.filter(Boolean) : [];
-  if (children.length === 0) {
-    return null;
-  }
-
-  if (children.some((child) => !child?.rect || isAbsoluteLikeNode(child))) {
-    return null;
-  }
-
-  const detectedAxis = detectLinearChildAxis(children);
-  if (detectedAxis === 'VERTICAL') {
-    return null;
+function isTableCellNode(node) {
+  const tag = String(node?.tag || '').toLowerCase();
+  if (tag === 'td' || tag === 'th') {
+    return true;
   }
 
-  return {
-    layoutMode: 'HORIZONTAL',
-    primaryAxisAlignItems: 'MIN',
-    counterAxisAlignItems: 'MIN',
-    itemSpacing: measureAxisSpacing(children, 'HORIZONTAL'),
-  };
+  return String(node?.computed?.display || '').toLowerCase() === 'table-cell';
 }
 
-function getRenderableFlexLayout(node) {
-  if (!node?.computed) {
-    return null;
-  }
-
-  const children = Array.isArray(node.children) ? node.children.filter(Boolean) : [];
-  if (children.length === 0) {
-    return mapFlexLayout(node.computed);
-  }
-
-  if (children.some((child) => !child?.rect || isAbsoluteLikeNode(child))) {
-    return null;
-  }
-
-  const axis = isRowFlexDirection(node.computed.flexDirection) ? 'HORIZONTAL' : 'VERTICAL';
-  const detectedAxis = detectLinearChildAxis(children);
-  if (detectedAxis && detectedAxis !== axis) {
-    return null;
-  }
-
-  if (hasSignificantFlexChildMargins(children, axis)) {
-    return null;
+function getInheritedTextTruncationContext(parentContext) {
+  if (parentContext?.textTruncationContext) {
+    return parentContext.textTruncationContext;
   }
 
-  const gaps = measureAxisGaps(children, axis);
-  if (gaps.length > 1) {
-    const minGap = Math.min(...gaps);
-    const maxGap = Math.max(...gaps);
-    const tolerance = Math.max(8, Math.round(Math.abs(minGap) * 0.25));
-    if (maxGap - minGap > tolerance) {
-      return null;
-    }
+  if (parentContext?.sourceNode && shouldTruncateText(parentContext.sourceNode.computed, null)) {
+    return createTextTruncationContext(parentContext.resolvedRect, parentContext.sourceNode.computed);
   }
 
-  return mapFlexLayout(node.computed);
-}
-
-function isRowFlexDirection(flexDirection) {
-  return flexDirection !== 'column' && flexDirection !== 'column-reverse';
-}
-
-function isAbsoluteLikeNode(node) {
-  const position = node?.computed?.position;
-  return position === 'absolute' || position === 'fixed';
-}
-
-function hasSignificantFlexChildMargins(children, axis) {
-  return children.some((child) => {
-    const computed = child?.computed || {};
-    if (axis === 'HORIZONTAL') {
-      return Math.abs(parsePx(computed.marginLeft)) > 0.5 || Math.abs(parsePx(computed.marginRight)) > 0.5;
-    }
-
-    return Math.abs(parsePx(computed.marginTop)) > 0.5 || Math.abs(parsePx(computed.marginBottom)) > 0.5;
-  });
-}
-
-function detectLinearChildAxis(children) {
-  const tolerance = 8;
-  const xs = groupAxisValues(children.map((child) => child.rect?.x ?? 0), tolerance);
-  const ys = groupAxisValues(children.map((child) => child.rect?.y ?? 0), tolerance);
-
-  if (ys.length === 1 && xs.length > 1) {
-    return 'HORIZONTAL';
-  }
-  if (xs.length === 1 && ys.length > 1) {
-    return 'VERTICAL';
-  }
   return null;
 }
 
-function groupAxisValues(values, tolerance) {
-  const sorted = [...values].sort((a, b) => a - b);
-  const groups = [];
-
-  for (const value of sorted) {
-    const prev = groups[groups.length - 1];
-    if (prev === undefined || Math.abs(value - prev) > tolerance) {
-      groups.push(value);
-    }
-  }
-
-  return groups;
-}
-
-function measureAxisGaps(children, axis) {
-  const items = [...children]
-    .filter((child) => child?.rect)
-    .sort((a, b) => axis === 'HORIZONTAL' ? a.rect.x - b.rect.x : a.rect.y - b.rect.y);
-
-  const gaps = [];
-  for (let index = 1; index < items.length; index++) {
-    const prev = items[index - 1].rect;
-    const current = items[index].rect;
-    const gap = axis === 'HORIZONTAL'
-      ? current.x - (prev.x + prev.width)
-      : current.y - (prev.y + prev.height);
-    if (gap >= 0) {
-      gaps.push(gap);
-    }
-  }
-
-  return gaps;
-}
-
-function measureAxisSpacing(children, axis) {
-  const gaps = measureAxisGaps(children, axis);
-  let minGap = null;
-  for (let index = 0; index < gaps.length; index++) {
-    if (minGap === null || gaps[index] < minGap) {
-      minGap = gaps[index];
-    }
+function getChildTextTruncationContext(node, resolvedRect, inheritedContext) {
+  if (node && shouldTruncateText(node.computed, null)) {
+    return createTextTruncationContext(resolvedRect, node.computed);
   }
 
-  return Math.max(Math.round(minGap ?? 0), 0);
+  return inheritedContext;
 }
 
-function findBestPseudoParent(node, pseudo) {
-  let best = null;
-
-  function walk(current, depth = 0) {
-    if (!current || !current.rect || current.isTextContainer) return;
-
-    const score = scorePseudoParent(current, pseudo, depth);
-    if (score > 0 && (!best || score > best.score)) {
-      best = { node: current, score };
-    }
-
-    for (const child of current.children || []) {
-      walk(child, depth + 1);
-    }
-  }
-
-  walk(node, 0);
-  return best?.node ?? null;
-}
-
-function scorePseudoParent(node, pseudo, depth) {
-  const rect = node.rect;
-  if (!rect) return 0;
-
-  const nodeArea = Math.max(rect.width * rect.height, 1);
-  const pseudoArea = Math.max((pseudo.width || 0) * (pseudo.height || 0), 1);
-  const contains =
-    pseudo.x >= rect.x - 8 &&
-    pseudo.y >= rect.y - 8 &&
-    pseudo.x + pseudo.width <= rect.x + rect.width + 8 &&
-    pseudo.y + pseudo.height <= rect.y + rect.height + 8;
-  const intersects =
-    pseudo.x < rect.x + rect.width &&
-    pseudo.x + pseudo.width > rect.x &&
-    pseudo.y < rect.y + rect.height &&
-    pseudo.y + pseudo.height > rect.y;
-
-  if (!contains && !intersects) {
-    return 0;
-  }
-
-  const haystack = `${node.tag ?? ''} ${(node.classList || []).join(' ')} ${node.name ?? ''}`.toLowerCase();
-  const tokens = String(pseudo.name || '')
-    .toLowerCase()
-    .split(/[^a-z0-9]+/g)
-    .filter((token) => token.length > 2);
-  let tokenHits = 0;
-  for (const token of tokens) {
-    if (haystack.includes(token)) tokenHits++;
-  }
-
-  if (tokenHits === 0 && depth > 0) {
-    const nearSizedContainer = nodeArea <= pseudoArea * 64;
-    if (!nearSizedContainer) {
-      return 0;
-    }
-  }
-
-  let score = tokenHits * 1000;
-  if (contains) score += 500;
-  else if (intersects) score += 120;
-  score += Math.min(400, Math.round(100000 / nodeArea));
-  score += Math.min(100, depth * 5);
-  score += Math.min(80, Math.round(100000 / pseudoArea));
-  return score;
-}
-
-function buildTextRuns(runs, fontMap) {
-  return (runs || [])
-    .filter((run) => run && run.text)
-    .map((run) => ({
-      text: run.text,
-      lineIndex: run.lineIndex || 0,
-      ...mapTypography(run.computed, fontMap),
-      ...mapTextStroke(run.computed),
-    }));
-}
-
-function mapFlexTextAlignment(computed) {
-  if (!computed || (computed.display !== 'flex' && computed.display !== 'inline-flex')) {
-    return {};
-  }
-
-  const isRow = computed.flexDirection !== 'column' && computed.flexDirection !== 'column-reverse';
-  const primary = mapFlexTextAxisAlignment(computed.justifyContent, 'primary');
-  const counter = mapFlexTextAxisAlignment(computed.alignItems, 'counter');
-  const result = {};
-
-  if (isRow) {
-    if (primary.horizontal) result.textAlignHorizontal = primary.horizontal;
-    if (counter.vertical) result.textAlignVertical = counter.vertical;
-  } else {
-    if (counter.horizontal) result.textAlignHorizontal = counter.horizontal;
-    if (primary.vertical) result.textAlignVertical = primary.vertical;
+function createTextTruncationContext(rect, computed = {}) {
+  if (!rect) {
+    return null;
   }
 
-  return result;
-}
-
-function mapFlexTextAxisAlignment(value, axisRole) {
-  const normalized = String(value || '').toLowerCase();
-  const horizontalMap = {
-    center: 'CENTER',
-    'flex-start': 'LEFT',
-    start: 'LEFT',
-    left: 'LEFT',
-    'flex-end': 'RIGHT',
-    end: 'RIGHT',
-    right: 'RIGHT',
-  };
-  const verticalMap = {
-    center: 'CENTER',
-    'flex-start': 'TOP',
-    start: 'TOP',
-    'flex-end': 'BOTTOM',
-    end: 'BOTTOM',
-  };
+  const left = rect.x + parsePx(computed.paddingLeft);
+  const right = rect.x + rect.width - parsePx(computed.paddingRight);
+  const top = rect.y + parsePx(computed.paddingTop);
+  const bottom = rect.y + rect.height - parsePx(computed.paddingBottom);
 
   return {
-    horizontal: horizontalMap[normalized] || null,
-    vertical: verticalMap[normalized] || null,
-    axisRole,
+    left,
+    right: Math.max(right, left + 1),
+    top,
+    bottom: Math.max(bottom, top + 1),
   };
 }
 
-function detectBackgroundPattern(computed) {
-  const backgroundImage = computed.backgroundImage || '';
-  const backgroundSize = computed.backgroundSize || '';
-  if (!backgroundImage.includes('linear-gradient') || !backgroundSize.includes('px')) {
-    return null;
+function clampRectToTextTruncationContext(rect, context) {
+  if (!rect || !context) {
+    return rect;
   }
 
-  const gradientCount = (backgroundImage.match(/linear-gradient\(/g) || []).length;
-  if (gradientCount < 2) {
-    return null;
-  }
-
-  const sizeMatch = backgroundSize.match(/([\d.]+)px\s+([\d.]+)px/);
-  const colorMatch = backgroundImage.match(/rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}/);
-  if (!sizeMatch || !colorMatch) {
-    return null;
-  }
+  const left = Math.max(rect.x, context.left);
+  const right = Math.min(rect.x + rect.width, context.right);
+  const width = Math.max(right - left, 1);
 
   return {
-    kind: 'grid',
-    cellWidth: Math.max(Math.round(parseFloat(sizeMatch[1])), 1),
-    cellHeight: Math.max(Math.round(parseFloat(sizeMatch[2])), 1),
-    strokeWeight: 1,
-    paint: colorSolidPaint(colorMatch[0]),
+    ...rect,
+    x: left,
+    width,
   };
 }
+
+function getOrderedChildren(children) {
+  const items = (children || [])
+    .filter(Boolean)
+    .map((child, index) => ({
+      child,
+      index,
+      layerZ: getLayerZ(child),
+    }));
+
+  if (items.length <= 1) {
+    return items.map((item) => item.child);
+  }
+
+  const hasLayering = items.some((item) => Number.isFinite(item.layerZ));
+  if (!hasLayering) {
+    return items.map((item) => item.child);
+  }
+
+  return items
+    .sort((a, b) => {
+      const zA = Number.isFinite(a.layerZ) ? a.layerZ : 0;
+      const zB = Number.isFinite(b.layerZ) ? b.layerZ : 0;
+      if (zA !== zB) {
+        return zA - zB;
+      }
+      return a.index - b.index;
+    })
+    .map((item) => item.child);
+}
+
+function getLayerZ(node) {
+  if (!node) {
+    return null;
+  }
+
+  if (Number.isFinite(node.effectiveZ)) {
+    return node.effectiveZ;
+  }
+
+  const zIndex = parseFloat(node.computed?.zIndex);
+  return Number.isFinite(zIndex) ? zIndex : null;
+}
+
+function attachPseudoElements(root, pseudoElements) {
+  if (!root || !Array.isArray(pseudoElements) || pseudoElements.length === 0) return;
+
+  for (const pseudo of pseudoElements) {
+    const target = findBestPseudoParent(root, pseudo) || root;
+    const relative = {
+      ...pseudo,
+      x: Math.round(pseudo.x - (target.rect?.x ?? 0)),
+      y: Math.round(pseudo.y - (target.rect?.y ?? 0)),
+    };
+    if (!target.pseudoChildren) {
+      target.pseudoChildren = [];
+    }
+    target.pseudoChildren.push(relative);
+  }
+}
+
+function normalizeRootStructure(root) {
+  if (!root || root.tag !== 'body' || !Array.isArray(root.children) || root.children.length === 0) {
+    return root;
+  }
+
+  const headerChildren = root.children.filter((child) => isTopHeaderChild(child, root.rect));
+  if (headerChildren.length === 0 || headerChildren.length === root.children.length) {
+    return {
+      ...root,
+      _pageLayout: true,
+    };
+  }
+
+  const otherChildren = root.children.filter((child) => !isTopHeaderChild(child, root.rect));
+  const syntheticHeader = buildSyntheticGroup('header', headerChildren);
+  return {
+    ...root,
+    _pageLayout: true,
+    children: [syntheticHeader].concat(otherChildren),
+  };
+}
+
+function isTopHeaderChild(node, rootRect) {
+  if (!node?.rect || !node?.computed) return false;
+
+  const position = node.computed.position;
+  if (position !== 'fixed' && position !== 'absolute') {
+    return false;
+  }
+
+  const nearTop = Math.abs((node.rect.y ?? 0) - (rootRect?.y ?? 0)) <= 8;
+  const wideEnough = (node.rect.width ?? 0) >= Math.max((rootRect?.width ?? 0) * 0.6, 320);
+  const shortEnough = (node.rect.height ?? 0) <= Math.max((rootRect?.height ?? 0) * 0.2, 220);
+  return nearTop && wideEnough && shortEnough;
+}
+
+function buildSyntheticGroup(tag, children) {
+  const rect = unionRects(children.map((child) => child.rect).filter(Boolean));
+  const maxZ = Math.max(...children.map((child) => child.effectiveZ ?? 0), 0);
+
+  return {
+    tag,
+    id: null,
+    classList: [],
+    _role: 'header',
+    text: null,
+    textRuns: [],
+    isTextContainer: false,
+    rect,
+    computed: {
+      display: 'block',
+      position: 'static',
+      zIndex: String(maxZ),
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'stretch',
+      flexWrap: 'nowrap',
+      gap: '0px',
+      columnGap: '0px',
+      rowGap: '0px',
+      gridTemplateColumns: 'none',
+      gridTemplateRows: 'none',
+      gridRow: 'auto',
+      gridColumn: 'auto',
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      minWidth: '0px',
+      maxWidth: 'none',
+      minHeight: '0px',
+      paddingTop: '0px',
+      paddingRight: '0px',
+      paddingBottom: '0px',
+      paddingLeft: '0px',
+      marginTop: '0px',
+      marginRight: '0px',
+      marginBottom: '0px',
+      marginLeft: '0px',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+      backgroundImage: 'none',
+      backgroundSize: 'auto',
+      backgroundPosition: '0% 0%',
+      color: 'rgba(0, 0, 0, 0)',
+      opacity: '1',
+      borderRadius: '0px',
+      borderTopLeftRadius: '0px',
+      borderTopRightRadius: '0px',
+      borderBottomRightRadius: '0px',
+      borderBottomLeftRadius: '0px',
+      border: '0px none rgba(0, 0, 0, 0)',
+      borderWidth: '0px',
+      borderColor: 'rgba(0, 0, 0, 0)',
+      borderStyle: 'none',
+      boxShadow: 'none',
+      overflow: 'visible',
+      overflowX: 'visible',
+      overflowY: 'visible',
+      mixBlendMode: 'normal',
+      transform: 'none',
+      fontFamily: 'Inter',
+      fontSize: '16px',
+      fontWeight: '400',
+      fontStyle: 'normal',
+      lineHeight: 'normal',
+      letterSpacing: 'normal',
+      textAlign: 'left',
+      textTransform: 'none',
+      whiteSpace: 'normal',
+      textDecoration: 'none',
+      webkitTextStrokeWidth: '0px',
+      webkitTextStrokeColor: 'rgba(0, 0, 0, 0)',
+      top: 'auto',
+      right: 'auto',
+      bottom: 'auto',
+      left: 'auto',
+      inset: 'auto',
+      content: 'none',
+    },
+    pseudo: {
+      before: null,
+      after: null,
+    },
+    children,
+    effectiveZ: maxZ,
+  };
+}
+
+function unionRects(rects) {
+  if (!Array.isArray(rects) || rects.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+
+  const left = Math.min(...rects.map((rect) => rect.x));
+  const top = Math.min(...rects.map((rect) => rect.y));
+  const right = Math.max(...rects.map((rect) => rect.x + rect.width));
+  const bottom = Math.max(...rects.map((rect) => rect.y + rect.height));
+  return {
+    x: left,
+    y: top,
+    width: Math.max(right - left, 0),
+    height: Math.max(bottom - top, 0),
+  };
+}
+
+function getRenderableGridStrategy(node, gridStrategy) {
+  if (!node || !gridStrategy?.outerFrame || !Array.isArray(node.children) || node.children.length < 2) {
+    return null;
+  }
+
+  const axis = detectLinearChildAxis(node.children);
+  if (!axis) {
+    return null;
+  }
+
+  return {
+    ...gridStrategy.outerFrame,
+    layoutMode: axis,
+    itemSpacing: measureAxisSpacing(node.children, axis),
+  };
+}
+
+function getRenderableInlineLayout(node) {
+  if (!node?.computed || node.computed.display !== 'inline-block') {
+    return null;
+  }
+
+  const children = Array.isArray(node.children) ? node.children.filter(Boolean) : [];
+  if (children.length === 0) {
+    return null;
+  }
+
+  if (children.some((child) => !child?.rect || isAbsoluteLikeNode(child))) {
+    return null;
+  }
+
+  const detectedAxis = detectLinearChildAxis(children);
+  if (detectedAxis === 'VERTICAL') {
+    return null;
+  }
+
+  return {
+    layoutMode: 'HORIZONTAL',
+    primaryAxisAlignItems: 'MIN',
+    counterAxisAlignItems: 'MIN',
+    itemSpacing: measureAxisSpacing(children, 'HORIZONTAL'),
+  };
+}
+
+function getRenderableFlexLayout(node) {
+  if (!node?.computed) {
+    return null;
+  }
+
+  const children = getPresentChildren(node);
+  const layout = mapFlexLayout(node.computed);
+  if (children.length === 0) {
+    return { layout: withFlexSizing(node, [], layout) };
+  }
+
+  const flowChildren = getFlowChildren(node);
+  if (shouldStartAlignSingleTextFlexRow(node, flowChildren, layout)) {
+    layout.primaryAxisAlignItems = 'MIN';
+  }
+
+  if (flowChildren.length === 0) {
+    return { layout: withFlexSizing(node, flowChildren, layout) };
+  }
+
+  if (flowChildren.some((child) => !child?.rect)) {
+    return { layout: withFlexSizing(node, flowChildren, layout) };
+  }
+
+  const axis = isRowFlexDirection(node.computed.flexDirection) ? 'HORIZONTAL' : 'VERTICAL';
+  const measuredSpacing = measureAxisSpacing(flowChildren, axis);
+  const cssSpacing = layout.itemSpacing || 0;
+  if (layout.primaryAxisAlignItems !== 'SPACE_BETWEEN' && measuredSpacing > cssSpacing) {
+    layout.itemSpacing = measuredSpacing;
+  }
+
+  return {
+    layout: withFlexSizing(node, flowChildren, layout),
+  };
+}
+
+function withFlexSizing(node, flowChildren, layout) {
+  const axis = isRowFlexDirection(node.computed.flexDirection) ? 'HORIZONTAL' : 'VERTICAL';
+  const result = { ...layout };
+  const primaryFreeSpace = measureFlexFreeSpace(node, flowChildren, axis);
+  const counterFreeSpace = measureFlexFreeSpace(node, flowChildren, axis === 'HORIZONTAL' ? 'VERTICAL' : 'HORIZONTAL');
+  const primaryAlign = String(result.primaryAxisAlignItems || 'MIN').toUpperCase();
+  const counterAlign = String(result.counterAxisAlignItems || 'MIN').toUpperCase();
+
+  if (primaryFreeSpace > 2 || primaryAlign === 'CENTER' || primaryAlign === 'MAX' || primaryAlign === 'SPACE_BETWEEN') {
+    result.primaryAxisSizingMode = 'FIXED';
+  }
+
+  if (counterFreeSpace > 2 || counterAlign === 'CENTER' || counterAlign === 'MAX' || counterAlign === 'STRETCH') {
+    result.counterAxisSizingMode = 'FIXED';
+  }
+
+  return result;
+}
+
+function measureFlexFreeSpace(node, children, axis) {
+  const rect = node?.rect;
+  if (!rect) {
+    return 0;
+  }
+
+  const computed = node.computed || {};
+  const renderedSize = axis === 'HORIZONTAL' ? rect.width : rect.height;
+  const startPadding = axis === 'HORIZONTAL' ? parsePx(computed.paddingLeft) : parsePx(computed.paddingTop);
+  const endPadding = axis === 'HORIZONTAL' ? parsePx(computed.paddingRight) : parsePx(computed.paddingBottom);
+  const items = (children || []).filter((child) => child?.rect);
+
+  if (items.length === 0) {
+    return Math.max(renderedSize - startPadding - endPadding, 0);
+  }
+
+  if (axis === 'HORIZONTAL') {
+    const left = Math.min(...items.map((child) => child.rect.x));
+    const right = Math.max(...items.map((child) => child.rect.x + child.rect.width));
+    return Math.max(renderedSize - startPadding - endPadding - (right - left), 0);
+  }
+
+  const top = Math.min(...items.map((child) => child.rect.y));
+  const bottom = Math.max(...items.map((child) => child.rect.y + child.rect.height));
+  return Math.max(renderedSize - startPadding - endPadding - (bottom - top), 0);
+}
+
+function isRowFlexDirection(flexDirection) {
+  return flexDirection !== 'column' && flexDirection !== 'column-reverse';
+}
+
+function isAbsoluteLikeNode(node) {
+  const position = node?.computed?.position;
+  return position === 'absolute' || position === 'fixed';
+}
+
+function getPresentChildren(node) {
+  return Array.isArray(node?.children) ? node.children.filter(Boolean) : [];
+}
+
+function getFlowChildren(node) {
+  return getPresentChildren(node).filter((child) => !isAbsoluteLikeNode(child));
+}
+
+function shouldStartAlignSingleTextFlexRow(node, flowChildren, layout) {
+  const axis = isRowFlexDirection(node?.computed?.flexDirection) ? 'HORIZONTAL' : 'VERTICAL';
+  if (axis !== 'HORIZONTAL' || flowChildren.length !== 1 || !isTextLikeNode(flowChildren[0])) {
+    return false;
+  }
+
+  if (!singleTextChildUsesPrimaryStretch(node, flowChildren[0])) {
+    return false;
+  }
+
+  if (hasVisibleFrameSurface(node?.computed)) {
+    return false;
+  }
+
+  const primaryAlign = String(layout?.primaryAxisAlignItems || 'MIN').toUpperCase();
+  return primaryAlign === 'CENTER' || primaryAlign === 'MAX' || primaryAlign === 'SPACE_BETWEEN';
+}
+
+function singleTextChildUsesPrimaryStretch(parentNode, childNode) {
+  const flexGrow = parseFloat(childNode?.computed?.flexGrow);
+  if (Number.isFinite(flexGrow) && flexGrow > 0) {
+    return true;
+  }
+
+  const parentRect = parentNode?.rect;
+  const childRect = childNode?.rect;
+  if (!parentRect || !childRect) {
+    return false;
+  }
+
+  const computed = parentNode.computed || {};
+  const parentInnerWidth = Math.max(parentRect.width - parsePx(computed.paddingLeft) - parsePx(computed.paddingRight), 0);
+  return fillsAxis(childRect.width, parentInnerWidth);
+}
+
+function shouldHugSingleTextFlexChild(parentNode, childNode, axis) {
+  if (axis !== 'HORIZONTAL' || !parentNode || !childNode) {
+    return false;
+  }
+
+  const flowChildren = getFlowChildren(parentNode);
+  if (flowChildren.length !== 1 || flowChildren[0] !== childNode || !isTextLikeNode(childNode)) {
+    return false;
+  }
+
+  return shouldStartAlignSingleTextFlexRow(parentNode, flowChildren, mapFlexLayout(parentNode.computed || {}));
+}
+
+function isTextLikeNode(node) {
+  return Boolean(node?.text && node?.isTextContainer);
+}
+
+function hasVisibleFrameSurface(computed = {}) {
+  if (!isTransparentCssColor(computed.backgroundColor)) {
+    return true;
+  }
+
+  const backgroundImage = String(computed.backgroundImage || 'none').trim().toLowerCase();
+  if (backgroundImage && backgroundImage !== 'none') {
+    return true;
+  }
+
+  const boxShadow = String(computed.boxShadow || 'none').trim().toLowerCase();
+  if (boxShadow && boxShadow !== 'none') {
+    return true;
+  }
+
+  return hasVisibleBorder(computed);
+}
+
+function hasVisibleBorder(computed = {}) {
+  const sides = ['Top', 'Right', 'Bottom', 'Left'];
+  return sides.some((side) => {
+    const width = parsePx(computed[`border${side}Width`] ?? computed.borderWidth);
+    const style = String(computed[`border${side}Style`] ?? computed.borderStyle ?? 'none').toLowerCase();
+    const color = computed[`border${side}Color`] ?? computed.borderColor ?? computed.color;
+    return width > 0 && style !== 'none' && style !== 'hidden' && !isTransparentCssColor(color);
+  });
+}
+
+function hasSignificantFlexChildMargins(children, axis) {
+  return children.some((child) => {
+  const computed = child?.computed || {};
+    if (axis === 'HORIZONTAL') {
+      return Math.abs(parsePx(computed.marginLeft)) > 0.5 || Math.abs(parsePx(computed.marginRight)) > 0.5;
+    }
+
+    return Math.abs(parsePx(computed.marginTop)) > 0.5 || Math.abs(parsePx(computed.marginBottom)) > 0.5;
+  });
+}
+
+function hasUnevenFlexChildGaps(children, axis) {
+  const gaps = measureAxisGaps(children, axis);
+  if (gaps.length <= 1) {
+    return false;
+  }
+
+  const minGap = Math.min(...gaps);
+  const maxGap = Math.max(...gaps);
+  const tolerance = Math.max(8, Math.round(Math.abs(minGap) * 0.25));
+  return maxGap - minGap > tolerance;
+}
+
+function isFlexDisplay(display) {
+  return display === 'flex' || display === 'inline-flex';
+}
+
+function detectLinearChildAxis(children) {
+  const tolerance = 8;
+  const xs = groupAxisValues(children.map((child) => child.rect?.x ?? 0), tolerance);
+  const ys = groupAxisValues(children.map((child) => child.rect?.y ?? 0), tolerance);
+
+  if (ys.length === 1 && xs.length > 1) {
+    return 'HORIZONTAL';
+  }
+  if (xs.length === 1 && ys.length > 1) {
+    return 'VERTICAL';
+  }
+  return null;
+}
+
+function groupAxisValues(values, tolerance) {
+  const sorted = [...values].sort((a, b) => a - b);
+  const groups = [];
+
+  for (const value of sorted) {
+    const prev = groups[groups.length - 1];
+    if (prev === undefined || Math.abs(value - prev) > tolerance) {
+      groups.push(value);
+    }
+  }
+
+  return groups;
+}
+
+function measureAxisGaps(children, axis) {
+  const items = [...children]
+    .filter((child) => child?.rect)
+    .sort((a, b) => axis === 'HORIZONTAL' ? a.rect.x - b.rect.x : a.rect.y - b.rect.y);
+
+  const gaps = [];
+  for (let index = 1; index < items.length; index++) {
+    const prev = items[index - 1].rect;
+    const current = items[index].rect;
+    const gap = axis === 'HORIZONTAL'
+      ? current.x - (prev.x + prev.width)
+      : current.y - (prev.y + prev.height);
+    if (gap >= 0) {
+      gaps.push(gap);
+    }
+  }
+
+  return gaps;
+}
+
+function measureAxisSpacing(children, axis) {
+  const gaps = measureAxisGaps(children, axis);
+  let minGap = null;
+  for (let index = 0; index < gaps.length; index++) {
+    if (minGap === null || gaps[index] < minGap) {
+      minGap = gaps[index];
+    }
+  }
+
+  return Math.max(Math.round(minGap ?? 0), 0);
+}
+
+function findBestPseudoParent(node, pseudo) {
+  let best = null;
+
+  function walk(current, depth = 0) {
+    if (!current || !current.rect || current.isTextContainer) return;
+
+    const score = scorePseudoParent(current, pseudo, depth);
+    if (score > 0 && (!best || score > best.score)) {
+      best = { node: current, score };
+    }
+
+    for (const child of current.children || []) {
+      walk(child, depth + 1);
+    }
+  }
+
+  walk(node, 0);
+  return best?.node ?? null;
+}
+
+function scorePseudoParent(node, pseudo, depth) {
+  const rect = node.rect;
+  if (!rect) return 0;
+
+  const nodeArea = Math.max(rect.width * rect.height, 1);
+  const pseudoArea = Math.max((pseudo.width || 0) * (pseudo.height || 0), 1);
+  const contains =
+    pseudo.x >= rect.x - 8 &&
+    pseudo.y >= rect.y - 8 &&
+    pseudo.x + pseudo.width <= rect.x + rect.width + 8 &&
+    pseudo.y + pseudo.height <= rect.y + rect.height + 8;
+  const intersects =
+    pseudo.x < rect.x + rect.width &&
+    pseudo.x + pseudo.width > rect.x &&
+    pseudo.y < rect.y + rect.height &&
+    pseudo.y + pseudo.height > rect.y;
+
+  if (!contains && !intersects) {
+    return 0;
+  }
+
+  const haystack = `${node.tag ?? ''} ${(node.classList || []).join(' ')} ${node.name ?? ''}`.toLowerCase();
+  const tokens = String(pseudo.name || '')
+    .toLowerCase()
+    .split(/[^a-z0-9]+/g)
+    .filter((token) => token.length > 2);
+  let tokenHits = 0;
+  for (const token of tokens) {
+    if (haystack.includes(token)) tokenHits++;
+  }
+
+  if (tokenHits === 0 && depth > 0) {
+    const nearSizedContainer = nodeArea <= pseudoArea * 64;
+    if (!nearSizedContainer) {
+      return 0;
+    }
+  }
+
+  let score = tokenHits * 1000;
+  if (contains) score += 500;
+  else if (intersects) score += 120;
+  score += Math.min(400, Math.round(100000 / nodeArea));
+  score += Math.min(100, depth * 5);
+  score += Math.min(80, Math.round(100000 / pseudoArea));
+  return score;
+}
+
+function buildTextRuns(runs, fontMap) {
+  return (runs || [])
+    .filter((run) => run && run.text)
+    .map((run) => ({
+      text: run.text,
+      lineIndex: run.lineIndex || 0,
+      ...mapTypography(run.computed, fontMap),
+      ...mapTextStroke(run.computed),
+    }));
+}
+
+function mapFlexTextAlignment(computed) {
+  if (!computed || (computed.display !== 'flex' && computed.display !== 'inline-flex')) {
+    return {};
+  }
+
+  const isRow = computed.flexDirection !== 'column' && computed.flexDirection !== 'column-reverse';
+  const primary = mapFlexTextAxisAlignment(computed.justifyContent, 'primary');
+  const counter = mapFlexTextAxisAlignment(computed.alignItems, 'counter');
+  const result = {};
+
+  if (isRow) {
+    if (primary.horizontal) result.textAlignHorizontal = primary.horizontal;
+    if (counter.vertical) result.textAlignVertical = counter.vertical;
+  } else {
+    if (counter.horizontal) result.textAlignHorizontal = counter.horizontal;
+    if (primary.vertical) result.textAlignVertical = primary.vertical;
+  }
+
+  return result;
+}
+
+function mapFlexTextAxisAlignment(value, axisRole) {
+  const normalized = String(value || '').toLowerCase();
+  const horizontalMap = {
+    center: 'CENTER',
+    'flex-start': 'LEFT',
+    start: 'LEFT',
+    left: 'LEFT',
+    'flex-end': 'RIGHT',
+    end: 'RIGHT',
+    right: 'RIGHT',
+  };
+  const verticalMap = {
+    center: 'CENTER',
+    'flex-start': 'TOP',
+    start: 'TOP',
+    'flex-end': 'BOTTOM',
+    end: 'BOTTOM',
+  };
+
+  return {
+    horizontal: horizontalMap[normalized] || null,
+    vertical: verticalMap[normalized] || null,
+    axisRole,
+  };
+}
+
+function detectBackgroundPattern(computed) {
+  const backgroundImage = computed.backgroundImage || '';
+  const backgroundSize = computed.backgroundSize || '';
+  if (!backgroundImage.includes('linear-gradient') || !backgroundSize.includes('px')) {
+    return null;
+  }
+
+  const gradientCount = (backgroundImage.match(/linear-gradient\(/g) || []).length;
+  if (gradientCount < 2) {
+    return null;
+  }
+
+  const sizeMatch = backgroundSize.match(/([\d.]+)px\s+([\d.]+)px/);
+  const colorMatch = backgroundImage.match(/rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}/);
+  if (!sizeMatch || !colorMatch) {
+    return null;
+  }
+
+  return {
+    kind: 'grid',
+    cellWidth: Math.max(Math.round(parseFloat(sizeMatch[1])), 1),
+    cellHeight: Math.max(Math.round(parseFloat(sizeMatch[2])), 1),
+    strokeWeight: 1,
+    paint: colorSolidPaint(colorMatch[0]),
+  };
+}

src/pipeline/convert.js

@@ -1,68 +1,74 @@
-/**
- * Shared tempelhtml conversion pipeline.
- * Reused by the CLI and the local HTTP bridge for the Figma plugin.
- */
-
-import { extractFromFile, extractFromHtml } from '../core/extractor.js';
-import { resolveFonts } from '../figma/font-resolver.js';
-import { sortByZIndex } from '../figma/z-index-sorter.js';
-import { buildFigmaTree } from '../figma/mapper.js';
-
-const DEFAULT_VIEWPORT = { width: 1440, height: 900 };
-
-/**
- * @param {string} inputPath
- * @param {ConvertOptions} options
- */
-export async function convertHtmlFile(inputPath, options = {}) {
-  const viewport = normalizeViewport(options.viewport);
-  return convertWithExtractor({
-    extractor: () => extractFromFile(inputPath, viewport),
-    source: inputPath,
-    viewport,
-    onProgress: options.onProgress,
-  });
-}
-
-/**
- * @param {string} html
- * @param {ConvertHtmlOptions} options
- */
-export async function convertHtmlString(html, options = {}) {
-  const viewport = normalizeViewport(options.viewport);
-  return convertWithExtractor({
-    extractor: () => extractFromHtml(html, {
-      ...viewport,
-      baseUrl: options.baseUrl ?? null,
-    }),
-    source: options.sourceName ?? 'inline.html',
-    viewport,
-    baseUrl: options.baseUrl ?? null,
-    onProgress: options.onProgress,
-  });
-}
-
-async function convertWithExtractor({ extractor, source, viewport, baseUrl = null, onProgress = null }) {
-  progress(onProgress, 5, 'Extracting page...');
-  const { domTree } = await extractor();
-
-  progress(onProgress, 78, 'Resolving fonts...');
-  const fontMap = await resolveFonts(domTree);
+/**
+ * Shared Morphus conversion pipeline.
+ * Reused by the CLI and the local HTTP bridge for the Figma plugin.
+ */
+
+import { extractFromFile, extractFromHtml } from '../core/extractor.js';
+import { resolveFonts } from '../figma/font-resolver.js';
+import { sortByZIndex } from '../figma/z-index-sorter.js';
+import { buildFigmaTree } from '../figma/mapper.js';
+
+const DEFAULT_VIEWPORT = { width: 1440, height: 900 };
+
+/**
+ * @param {string} inputPath
+ * @param {ConvertOptions} options
+ */
+export async function convertHtmlFile(inputPath, options = {}) {
+  const viewport = normalizeViewport(options.viewport);
+  return convertWithExtractor({
+    extractor: () => extractFromFile(inputPath, viewport),
+    source: inputPath,
+    viewport,
+    onProgress: options.onProgress,
+  });
+}
+
+/**
+ * @param {string} html
+ * @param {ConvertHtmlOptions} options
+ */
+export async function convertHtmlString(html, options = {}) {
+  const viewport = normalizeViewport(options.viewport);
+  return convertWithExtractor({
+    extractor: () => extractFromHtml(html, {
+      ...viewport,
+      baseUrl: options.baseUrl ?? null,
+    }),
+    source: options.sourceName ?? 'inline.html',
+    viewport,
+    baseUrl: options.baseUrl ?? null,
+    onProgress: options.onProgress,
+  });
+}
+
+async function convertWithExtractor({ extractor, source, viewport, baseUrl = null, onProgress = null }) {
+  progress(onProgress, 5, 'Extracting page...');
+  const { domTree, title } = await extractor();
+
+  progress(onProgress, 78, 'Resolving fonts...');
+  const fontMap = await resolveFonts(domTree);
   progress(onProgress, 86, 'Building Figma tree...');
   const sorted = sortByZIndex(domTree);
   const figmaTree = buildFigmaTree(sorted, { fontMap });
+  const documentTitle = normalizeDocumentTitle(title);
   progress(onProgress, 90, 'Snapshot ready. Sending to Figma...');
 
   return {
     version: '0.1.0',
     meta: {
       source,
+      ...(documentTitle ? { title: documentTitle } : {}),
       viewport,
       ...(baseUrl ? { baseUrl } : {}),
     },
-    warnings: [],
-    figmaTree,
-  };
+    warnings: [],
+    figmaTree,
+  };
+}
+
+function normalizeDocumentTitle(title) {
+  return String(title || '').replace(/\s+/g, ' ').trim();
 }
 
 function progress(onProgress, percent, message) {
@@ -70,18 +76,18 @@ function progress(onProgress, percent, message) {
     onProgress(percent, message);
   }
 }
-
-function normalizeViewport(viewport = {}) {
-  const width = Number.parseInt(viewport.width ?? DEFAULT_VIEWPORT.width, 10);
-  const height = Number.parseInt(viewport.height ?? DEFAULT_VIEWPORT.height, 10);
-
-  return {
-    width: Number.isFinite(width) ? width : DEFAULT_VIEWPORT.width,
-    height: Number.isFinite(height) ? height : DEFAULT_VIEWPORT.height,
-  };
-}
-
-/**
- * @typedef {{ viewport?: { width?: number, height?: number } }} ConvertOptions
- * @typedef {ConvertOptions & { sourceName?: string, baseUrl?: string | null }} ConvertHtmlOptions
- */
+
+function normalizeViewport(viewport = {}) {
+  const width = Number.parseInt(viewport.width ?? DEFAULT_VIEWPORT.width, 10);
+  const height = Number.parseInt(viewport.height ?? DEFAULT_VIEWPORT.height, 10);
+
+  return {
+    width: Number.isFinite(width) ? width : DEFAULT_VIEWPORT.width,
+    height: Number.isFinite(height) ? height : DEFAULT_VIEWPORT.height,
+  };
+}
+
+/**
+ * @typedef {{ viewport?: { width?: number, height?: number } }} ConvertOptions
+ * @typedef {ConvertOptions & { sourceName?: string, baseUrl?: string | null }} ConvertHtmlOptions
+ */

src/utils/color.js

@@ -1,68 +1,68 @@
-/**
- * src/utils/color.js
- * Color conversion utilities for CSS → Figma RGB (0-1 range).
- */
-
-/**
- * Convert hex color to Figma RGB object.
- * @param {string} hex - e.g. "#c9a84c" or "#fff"
- * @returns {{ r: number, g: number, b: number }}
- */
-export function hexToFigmaRGB(hex) {
-  const clean = hex.replace('#', '');
-  const full = clean.length === 3
-    ? clean.split('').map(c => c + c).join('')
-    : clean;
-  const n = parseInt(full, 16);
-  return {
-    r: ((n >> 16) & 255) / 255,
-    g: ((n >> 8) & 255) / 255,
-    b: (n & 255) / 255,
-  };
-}
-
-/**
- * Convert CSS rgba() string to Figma RGBA.
- * @param {string} rgba - e.g. "rgba(201, 168, 76, 0.3)"
- * @returns {{ r: number, g: number, b: number, a: number }}
- */
-export function rgbaStringToFigma(rgba) {
-  const m = rgba.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/);
-  if (!m) return { r: 0, g: 0, b: 0, a: 1 };
-  return {
-    r: parseFloat(m[1]) / 255,
-    g: parseFloat(m[2]) / 255,
-    b: parseFloat(m[3]) / 255,
-    a: m[4] !== undefined ? parseFloat(m[4]) : 1,
-  };
-}
-
-/**
- * Parse any CSS color string → Figma RGBA.
- * Handles: hex, rgba(), rgb()
- */
-export function cssColorToFigma(color) {
-  if (!color || color === 'transparent' || color === 'none') {
-    return { r: 0, g: 0, b: 0, a: 0 };
-  }
-  if (color.startsWith('#')) {
-    return { ...hexToFigmaRGB(color), a: 1 };
-  }
-  if (color.startsWith('rgb')) {
-    return rgbaStringToFigma(color);
-  }
-  // Fallback
-  return { r: 0, g: 0, b: 0, a: 1 };
-}
-
-/**
- * Build a Figma solid paint object.
- */
-export function solidPaint(cssColor, opacity = 1) {
-  const { r, g, b, a } = cssColorToFigma(cssColor);
-  return {
-    type: 'SOLID',
-    color: { r, g, b },
-    opacity: opacity * a,
-  };
-}
+/**
+ * src/utils/color.js
+ * Color conversion utilities for CSS → Figma RGB (0-1 range).
+ */
+
+/**
+ * Convert hex color to Figma RGB object.
+ * @param {string} hex - e.g. "#c9a84c" or "#fff"
+ * @returns {{ r: number, g: number, b: number }}
+ */
+export function hexToFigmaRGB(hex) {
+  const clean = hex.replace('#', '');
+  const full = clean.length === 3
+    ? clean.split('').map(c => c + c).join('')
+    : clean;
+  const n = parseInt(full, 16);
+  return {
+    r: ((n >> 16) & 255) / 255,
+    g: ((n >> 8) & 255) / 255,
+    b: (n & 255) / 255,
+  };
+}
+
+/**
+ * Convert CSS rgba() string to Figma RGBA.
+ * @param {string} rgba - e.g. "rgba(201, 168, 76, 0.3)"
+ * @returns {{ r: number, g: number, b: number, a: number }}
+ */
+export function rgbaStringToFigma(rgba) {
+  const m = rgba.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/);
+  if (!m) return { r: 0, g: 0, b: 0, a: 1 };
+  return {
+    r: parseFloat(m[1]) / 255,
+    g: parseFloat(m[2]) / 255,
+    b: parseFloat(m[3]) / 255,
+    a: m[4] !== undefined ? parseFloat(m[4]) : 1,
+  };
+}
+
+/**
+ * Parse any CSS color string → Figma RGBA.
+ * Handles: hex, rgba(), rgb()
+ */
+export function cssColorToFigma(color) {
+  if (!color || color === 'transparent' || color === 'none') {
+    return { r: 0, g: 0, b: 0, a: 0 };
+  }
+  if (color.startsWith('#')) {
+    return { ...hexToFigmaRGB(color), a: 1 };
+  }
+  if (color.startsWith('rgb')) {
+    return rgbaStringToFigma(color);
+  }
+  // Fallback
+  return { r: 0, g: 0, b: 0, a: 1 };
+}
+
+/**
+ * Build a Figma solid paint object.
+ */
+export function solidPaint(cssColor, opacity = 1) {
+  const { r, g, b, a } = cssColorToFigma(cssColor);
+  return {
+    type: 'SOLID',
+    color: { r, g, b },
+    opacity: opacity * a,
+  };
+}