Upload 16 files

Dockerfile

@@ -1,18 +1,18 @@
-FROM mcr.microsoft.com/playwright:v1.60.0-noble
-
-ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
-
-WORKDIR /app
-
-COPY package*.json ./
-RUN npm install --omit=dev --ignore-scripts --no-audit --no-fund
-
-COPY . .
-
-ENV NODE_ENV=production
-ENV HOST=0.0.0.0
-ENV PORT=7860
-
-EXPOSE 7860
-
-CMD ["npm", "start"]
+FROM mcr.microsoft.com/playwright:v1.60.0-noble
+
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install --omit=dev --ignore-scripts --no-audit --no-fund
+
+COPY . .
+
+ENV NODE_ENV=production
+ENV HOST=0.0.0.0
+ENV PORT=7860
+
+EXPOSE 7860
+
+CMD ["npm", "start"]

README.md

@@ -1,49 +1,49 @@
----
-title: Morphus
-sdk: docker
-app_port: 7860
-pinned: false
----
-
-# Morphus
-
-Morphus converts HTML into editable Figma designs with a local HTML-first flow.
-
-## Flow
-1. Playwright renders the HTML and captures computed styles.
-2. The local pipeline resolves fonts, ordering, and Figma-ready layout data.
-3. A local server returns Figma-ready JSON.
-4. The Figma plugin builds the design from that JSON automatically.
-
-## Quickstart
-```bash
-npm install
-npx playwright install chromium
-npm run server
-```
-
-Then in Figma: open the Morphus plugin, paste or upload HTML, and click `Convert & Build`.
-
-## Commands
-```bash
-npm run convert -- --input ./tests/vela/input.html --output ./out/vela.json
-npm run server
-npm test
-npm run snapshot:update
-```
-
-## Project Checklist
-See [CHECKLIST.md](CHECKLIST.md) for the list of completed project items.
-
-## Public Use
-To let other people use the plugin without running the local server, deploy the converter as a public HTTPS Node/Playwright service and update the plugin's converter URL. See [docs/deployment.md](docs/deployment.md).
-
-## Snapshot Test
-`tests/vela/expected-snapshot.json` is the deterministic baseline for `tests/vela/input.html`.
-
-## Project Layout
-- `scripts/convert.js` CLI conversion
-- `scripts/server.js` local bridge for the plugin
-- `figma-plugin/` Figma UI and builder
-- `src/` Playwright extraction and Figma mapping code
-- `tests/vela/` fixture and snapshot
+---
+title: Morphus
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Morphus
+
+Morphus converts HTML into editable Figma designs with a local HTML-first flow.
+
+## Flow
+1. Playwright renders the HTML and captures computed styles.
+2. The local pipeline resolves fonts, ordering, and Figma-ready layout data.
+3. A local server returns Figma-ready JSON.
+4. The Figma plugin builds the design from that JSON automatically.
+
+## Quickstart
+```bash
+npm install
+npx playwright install chromium
+npm run server
+```
+
+Then in Figma: open the Morphus plugin, paste or upload HTML, and click `Convert & Build`.
+
+## Commands
+```bash
+npm run convert -- --input ./tests/landing-page/input.html --output ./out/landing-page.json
+npm run server
+npm test
+npm run snapshot:update
+```
+
+## Project Checklist
+See [CHECKLIST.md](CHECKLIST.md) for the list of completed project items.
+
+## Public Use
+To let other people use the plugin without running the local server, deploy the converter as a public HTTPS Node/Playwright service and update the plugin's converter URL. See [docs/deployment.md](docs/deployment.md).
+
+## Snapshot Test
+`tests/landing-page/expected-snapshot.json` is the deterministic baseline for `tests/landing-page/input.html`.
+
+## Project Layout
+- `scripts/convert.js` CLI conversion
+- `scripts/server.js` local bridge for the plugin
+- `figma-plugin/` Figma UI and builder
+- `src/` Playwright extraction and Figma mapping code
+- `tests/landing-page/` fixture and snapshot

package.json

@@ -1,22 +1,22 @@
-{
-  "name": "morphus",
-  "version": "0.1.0",
-  "description": "Morphus converts HTML into editable Figma designs with a deterministic local pipeline",
-  "type": "module",
-  "main": "scripts/convert.js",
-  "scripts": {
-    "convert": "node scripts/convert.js",
-    "start": "node scripts/server.js",
-    "server": "node scripts/server.js",
-    "snapshot:update": "node scripts/update-snapshot.js",
-    "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js"
-  },
-  "dependencies": {
-    "commander": "^12.0.0",
-    "playwright-core": "^1.60.0"
-  },
-  "devDependencies": {
-    "jest": "^29.7.0",
-    "playwright": "^1.60.0"
-  }
-}
+{
+  "name": "morphus",
+  "version": "0.1.0",
+  "description": "Morphus converts HTML into editable Figma designs with a deterministic local pipeline",
+  "type": "module",
+  "main": "scripts/convert.js",
+  "scripts": {
+    "convert": "node scripts/convert.js",
+    "start": "node scripts/server.js",
+    "server": "node scripts/server.js",
+    "snapshot:update": "node scripts/update-snapshot.js",
+    "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js"
+  },
+  "dependencies": {
+    "commander": "^12.0.0",
+    "playwright-core": "^1.60.0"
+  },
+  "devDependencies": {
+    "jest": "^29.7.0",
+    "playwright": "^1.60.0"
+  }
+}

scripts/convert.js

@@ -1,45 +1,45 @@
-#!/usr/bin/env node
-/**
- * Morphus CLI
- * Usage: node scripts/convert.js --input ./examples/page.html --output ./out/page.json
- */
-
-import { program } from 'commander';
-import { writeFileSync, mkdirSync } from 'fs';
-import { dirname } from 'path';
-import { convertHtmlFile } from '../src/pipeline/convert.js';
-
-program
-  .requiredOption('--input <path>', 'Path to input HTML file')
-  .requiredOption('--output <path>', 'Path for output JSON (loaded by Figma plugin)')
-  .option('--width <px>', 'Viewport width', '1440')
-  .option('--height <px>', 'Viewport height', '900')
-  .parse();
-
-const opts = program.opts();
-
-async function run() {
-  console.log(`\nConverting ${opts.input}...`);
-
-  const output = await convertHtmlFile(opts.input, {
-    viewport: {
-      width: parseInt(opts.width, 10),
-      height: parseInt(opts.height, 10),
-    },
-  });
-
-  mkdirSync(dirname(opts.output), { recursive: true });
-  writeFileSync(opts.output, JSON.stringify(output, null, 2));
-
-  for (const warning of output.warnings ?? []) {
-    console.warn(`Warning: ${warning}`);
-  }
-
-  console.log(`\nDone. Output -> ${opts.output}`);
-  console.log('Load this file in the Figma plugin, or use the plugin HTML flow with the local server.\n');
-}
-
-run().catch((err) => {
-  console.error('Conversion failed:', err);
-  process.exit(1);
-});
+#!/usr/bin/env node
+/**
+ * Morphus CLI
+ * Usage: node scripts/convert.js --input ./examples/page.html --output ./out/page.json
+ */
+
+import { program } from 'commander';
+import { writeFileSync, mkdirSync } from 'fs';
+import { dirname } from 'path';
+import { convertHtmlFile } from '../src/pipeline/convert.js';
+
+program
+  .requiredOption('--input <path>', 'Path to input HTML file')
+  .requiredOption('--output <path>', 'Path for output JSON (loaded by Figma plugin)')
+  .option('--width <px>', 'Viewport width', '1440')
+  .option('--height <px>', 'Viewport height', '900')
+  .parse();
+
+const opts = program.opts();
+
+async function run() {
+  console.log(`\nConverting ${opts.input}...`);
+
+  const output = await convertHtmlFile(opts.input, {
+    viewport: {
+      width: parseInt(opts.width, 10),
+      height: parseInt(opts.height, 10),
+    },
+  });
+
+  mkdirSync(dirname(opts.output), { recursive: true });
+  writeFileSync(opts.output, JSON.stringify(output, null, 2));
+
+  for (const warning of output.warnings ?? []) {
+    console.warn(`Warning: ${warning}`);
+  }
+
+  console.log(`\nDone. Output -> ${opts.output}`);
+  console.log('Load this file in the Figma plugin, or use the plugin HTML flow with the local server.\n');
+}
+
+run().catch((err) => {
+  console.error('Conversion failed:', err);
+  process.exit(1);
+});

scripts/server.js

@@ -1,173 +1,173 @@
-#!/usr/bin/env node
-/**
- * Local Morphus bridge for the Figma plugin.
- * The plugin UI sends HTML here, and this server returns the converted JSON.
- */
-
-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.MORPHUS_PORT ?? '3210', 10);
-const HOST = process.env.HOST ?? '0.0.0.0';
-const jobs = new Map();
-
-const server = http.createServer(async (req, res) => {
-  setCors(res);
-
-  if (req.method === 'OPTIONS') {
-    res.writeHead(204);
-    res.end();
-    return;
-  }
-
-  if (req.method === 'GET' && req.url === '/health') {
-    res.writeHead(200, { 'Content-Type': 'application/json' });
-    res.end(JSON.stringify({ ok: true, host: HOST, port: PORT }));
-    return;
-  }
-
-  if (req.method === 'POST' && req.url === '/jobs') {
-    try {
-      const body = await readJsonBody(req);
-      if (!body.html || typeof body.html !== 'string') {
-        throw new Error('`html` is required.');
-      }
-
-      const jobId = randomUUID();
-      jobs.set(jobId, {
-        state: 'queued',
-        progress: 0,
-        message: 'Queued',
-        result: null,
-        error: null,
-      });
-
-      runJob(jobId, body).catch((error) => {
-        setJobError(jobId, error);
-      });
-
-      res.writeHead(202, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ jobId }));
-      return;
-    } catch (error) {
-      res.writeHead(400, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ error: error.message }));
-      return;
-    }
-  }
-
-  if (req.method === 'GET' && req.url && req.url.startsWith('/jobs/')) {
-    const jobId = req.url.split('/').pop();
-    const job = jobs.get(jobId);
-    if (!job) {
-      res.writeHead(404, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ error: 'Job not found' }));
-      return;
-    }
-
-    res.writeHead(200, { 'Content-Type': 'application/json' });
-    res.end(JSON.stringify(job));
-    return;
-  }
-
-  if (req.method === 'POST' && req.url === '/convert') {
-    try {
-      const body = await readJsonBody(req);
-      if (!body.html || typeof body.html !== 'string') {
-        throw new Error('`html` is required.');
-      }
-
-      const result = await convertHtmlString(body.html, {
-        sourceName: body.sourceName || 'inline.html',
-        baseUrl: body.baseUrl || null,
-        viewport: {
-          width: body.viewport?.width,
-          height: body.viewport?.height,
-        },
-      });
-
-      res.writeHead(200, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify(result));
-      return;
-    } catch (error) {
-      res.writeHead(400, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ error: error.message }));
-      return;
-    }
-  }
-
-  res.writeHead(404, { 'Content-Type': 'application/json' });
-  res.end(JSON.stringify({ error: 'Not found' }));
-});
-
-server.listen(PORT, HOST, () => {
-  const displayHost = HOST === '0.0.0.0' ? 'localhost' : HOST;
-  console.log(`Morphus server listening on http://${displayHost}:${PORT}`);
-});
-
-async function runJob(jobId, body) {
-  setJob(jobId, 'running', 1, 'Starting conversion...');
-
-  const result = await convertHtmlString(body.html, {
-    sourceName: body.sourceName || 'inline.html',
-    baseUrl: body.baseUrl || null,
-    viewport: {
-      width: body.viewport && body.viewport.width,
-      height: body.viewport && body.viewport.height,
-    },
-    onProgress: (progress, message) => {
-      setJob(jobId, 'running', progress, message);
-    },
-  });
-
-  setJob(jobId, 'done', 100, 'Done', result);
-}
-
-function setJob(jobId, state, progress, message, result) {
-  jobs.set(jobId, {
-    state: state,
-    progress: progress,
-    message: message,
-    result: result || null,
-    error: null,
-  });
-}
-
-function setJobError(jobId, error) {
-  jobs.set(jobId, {
-    state: 'error',
-    progress: 100,
-    message: 'Conversion failed',
-    result: null,
-    error: error && error.message ? error.message : String(error),
-  });
-}
-
-function setCors(res) {
-  res.setHeader('Access-Control-Allow-Origin', '*');
-  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
-  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
-}
-
-function readJsonBody(req) {
-  return new Promise((resolve, reject) => {
-    let raw = '';
-    req.setEncoding('utf8');
-    req.on('data', (chunk) => {
-      raw += chunk;
-      if (raw.length > 10 * 1024 * 1024) {
-        reject(new Error('Request body too large.'));
-        req.destroy();
-      }
-    });
-    req.on('end', () => {
-      try {
-        resolve(JSON.parse(raw || '{}'));
-      } catch {
-        reject(new Error('Invalid JSON body.'));
-      }
-    });
-    req.on('error', reject);
-  });
-}
+#!/usr/bin/env node
+/**
+ * Local Morphus bridge for the Figma plugin.
+ * The plugin UI sends HTML here, and this server returns the converted JSON.
+ */
+
+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.MORPHUS_PORT ?? '3210', 10);
+const HOST = process.env.HOST ?? '0.0.0.0';
+const jobs = new Map();
+
+const server = http.createServer(async (req, res) => {
+  setCors(res);
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+
+  if (req.method === 'GET' && req.url === '/health') {
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ ok: true, host: HOST, port: PORT }));
+    return;
+  }
+
+  if (req.method === 'POST' && req.url === '/jobs') {
+    try {
+      const body = await readJsonBody(req);
+      if (!body.html || typeof body.html !== 'string') {
+        throw new Error('`html` is required.');
+      }
+
+      const jobId = randomUUID();
+      jobs.set(jobId, {
+        state: 'queued',
+        progress: 0,
+        message: 'Queued',
+        result: null,
+        error: null,
+      });
+
+      runJob(jobId, body).catch((error) => {
+        setJobError(jobId, error);
+      });
+
+      res.writeHead(202, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ jobId }));
+      return;
+    } catch (error) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: error.message }));
+      return;
+    }
+  }
+
+  if (req.method === 'GET' && req.url && req.url.startsWith('/jobs/')) {
+    const jobId = req.url.split('/').pop();
+    const job = jobs.get(jobId);
+    if (!job) {
+      res.writeHead(404, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: 'Job not found' }));
+      return;
+    }
+
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify(job));
+    return;
+  }
+
+  if (req.method === 'POST' && req.url === '/convert') {
+    try {
+      const body = await readJsonBody(req);
+      if (!body.html || typeof body.html !== 'string') {
+        throw new Error('`html` is required.');
+      }
+
+      const result = await convertHtmlString(body.html, {
+        sourceName: body.sourceName || 'inline.html',
+        baseUrl: body.baseUrl || null,
+        viewport: {
+          width: body.viewport?.width,
+          height: body.viewport?.height,
+        },
+      });
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify(result));
+      return;
+    } catch (error) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: error.message }));
+      return;
+    }
+  }
+
+  res.writeHead(404, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify({ error: 'Not found' }));
+});
+
+server.listen(PORT, HOST, () => {
+  const displayHost = HOST === '0.0.0.0' ? 'localhost' : HOST;
+  console.log(`Morphus server listening on http://${displayHost}:${PORT}`);
+});
+
+async function runJob(jobId, body) {
+  setJob(jobId, 'running', 1, 'Starting conversion...');
+
+  const result = await convertHtmlString(body.html, {
+    sourceName: body.sourceName || 'inline.html',
+    baseUrl: body.baseUrl || null,
+    viewport: {
+      width: body.viewport && body.viewport.width,
+      height: body.viewport && body.viewport.height,
+    },
+    onProgress: (progress, message) => {
+      setJob(jobId, 'running', progress, message);
+    },
+  });
+
+  setJob(jobId, 'done', 100, 'Done', result);
+}
+
+function setJob(jobId, state, progress, message, result) {
+  jobs.set(jobId, {
+    state: state,
+    progress: progress,
+    message: message,
+    result: result || null,
+    error: null,
+  });
+}
+
+function setJobError(jobId, error) {
+  jobs.set(jobId, {
+    state: 'error',
+    progress: 100,
+    message: 'Conversion failed',
+    result: null,
+    error: error && error.message ? error.message : String(error),
+  });
+}
+
+function setCors(res) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+}
+
+function readJsonBody(req) {
+  return new Promise((resolve, reject) => {
+    let raw = '';
+    req.setEncoding('utf8');
+    req.on('data', (chunk) => {
+      raw += chunk;
+      if (raw.length > 10 * 1024 * 1024) {
+        reject(new Error('Request body too large.'));
+        req.destroy();
+      }
+    });
+    req.on('end', () => {
+      try {
+        resolve(JSON.parse(raw || '{}'));
+      } catch {
+        reject(new Error('Invalid JSON body.'));
+      }
+    });
+    req.on('error', reject);
+  });
+}

scripts/update-snapshot.js

@@ -1,20 +1,20 @@
-#!/usr/bin/env node
-/**
- * Regenerates the deterministic baseline snapshot used in tests.
- */
-
-import { writeFileSync, mkdirSync } from 'fs';
-import { dirname } from 'path';
-import { convertHtmlFile } from '../src/pipeline/convert.js';
-
-const SNAPSHOT_PATH = 'tests/vela/expected-snapshot.json';
-const INPUT_PATH = './tests/vela/input.html';
-
-const output = await convertHtmlFile(INPUT_PATH, {
-  viewport: { width: 1440, height: 900 },
-});
-
-mkdirSync(dirname(SNAPSHOT_PATH), { recursive: true });
-writeFileSync(SNAPSHOT_PATH, JSON.stringify(output, null, 2));
-
-console.log(`Updated snapshot at ${SNAPSHOT_PATH}`);
+#!/usr/bin/env node
+/**
+ * Regenerates the deterministic baseline snapshot used in tests.
+ */
+
+import { writeFileSync, mkdirSync } from 'fs';
+import { dirname } from 'path';
+import { convertHtmlFile } from '../src/pipeline/convert.js';
+
+const SNAPSHOT_PATH = 'tests/landing-page/expected-snapshot.json';
+const INPUT_PATH = './tests/landing-page/input.html';
+
+const output = await convertHtmlFile(INPUT_PATH, {
+  viewport: { width: 1440, height: 900 },
+});
+
+mkdirSync(dirname(SNAPSHOT_PATH), { recursive: true });
+writeFileSync(SNAPSHOT_PATH, JSON.stringify(output, null, 2));
+
+console.log(`Updated snapshot at ${SNAPSHOT_PATH}`);

src/core/dom-tree.js

@@ -1,43 +1,43 @@
-/**
- * src/core/dom-tree.js
- * Utilities for walking and querying the intermediate DOM tree JSON.
- */
-
-/**
- * Depth-first walk of the dom tree.
- * @param {object} node
- * @param {(node: object, depth: number) => void} fn
- */
-export function walk(node, fn, depth = 0) {
-  fn(node, depth);
-  for (const child of node.children ?? []) {
-    walk(child, fn, depth + 1);
-  }
-}
-
-/**
- * Collect all nodes matching a predicate.
- */
-export function findAll(node, predicate) {
-  const results = [];
-  walk(node, (n) => { if (predicate(n)) results.push(n); });
-  return results;
-}
-
-/**
- * Find all nodes that use CSS grid.
- */
-export function findGridNodes(domTree) {
-  return findAll(domTree, (n) => n.computed?.display === 'grid');
-}
-
-/**
- * Find all nodes with hover-relevant classes (heuristic).
- */
-export function findInteractiveNodes(domTree) {
-  const interactiveTags = new Set(['button', 'a', 'input', 'select', 'textarea']);
-  return findAll(domTree, (n) =>
-    interactiveTags.has(n.tag) ||
-    n.classList?.some(c => c.includes('btn') || c.includes('card') || c.includes('link'))
-  );
-}
+/**
+ * src/core/dom-tree.js
+ * Utilities for walking and querying the intermediate DOM tree JSON.
+ */
+
+/**
+ * Depth-first walk of the dom tree.
+ * @param {object} node
+ * @param {(node: object, depth: number) => void} fn
+ */
+export function walk(node, fn, depth = 0) {
+  fn(node, depth);
+  for (const child of node.children ?? []) {
+    walk(child, fn, depth + 1);
+  }
+}
+
+/**
+ * Collect all nodes matching a predicate.
+ */
+export function findAll(node, predicate) {
+  const results = [];
+  walk(node, (n) => { if (predicate(n)) results.push(n); });
+  return results;
+}
+
+/**
+ * Find all nodes that use CSS grid.
+ */
+export function findGridNodes(domTree) {
+  return findAll(domTree, (n) => n.computed?.display === 'grid');
+}
+
+/**
+ * Find all nodes with hover-relevant classes (heuristic).
+ */
+export function findInteractiveNodes(domTree) {
+  const interactiveTags = new Set(['button', 'a', 'input', 'select', 'textarea']);
+  return findAll(domTree, (n) =>
+    interactiveTags.has(n.tag) ||
+    n.classList?.some(c => c.includes('btn') || c.includes('card') || c.includes('link'))
+  );
+}

src/core/extractor.js

@@ -16,7 +16,9 @@ import { pathToFileURL } from 'url';
  */
 export async function extractFromFile(filePath, { width = 1440, height = 900 } = {}) {
   const absPath = resolve(filePath);
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({
+    args: ['--disable-web-security']
+  });
   const page = await browser.newPage({ viewport: { width, height } });
 
   await page.goto(pathToFileURL(absPath).href);
@@ -31,7 +33,9 @@ export async function extractFromFile(filePath, { width = 1440, height = 900 } =
  * @returns {{ domTree, title: string }}
  */
 export async function extractFromHtml(html, { width = 1440, height = 900, baseUrl = null } = {}) {
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({
+    args: ['--disable-web-security']
+  });
   const page = await browser.newPage({ viewport: { width, height } });
   const htmlWithBase = injectBaseHref(html, normalizeBaseUrl(baseUrl));
 
@@ -53,6 +57,25 @@ async function extractFromPage(page) {
 async function stabilizePage(page) {
   await page.waitForLoadState('networkidle');
 
+  // Wait for all images to finish loading completely (with a 2-second timeout)
+  await page.evaluate(async () => {
+    const imgs = Array.from(document.querySelectorAll('img'));
+    await Promise.all(imgs.map(img => {
+      if (img.complete) return Promise.resolve();
+      return new Promise(resolve => {
+        const timer = setTimeout(resolve, 2000);
+        img.onload = () => {
+          clearTimeout(timer);
+          resolve();
+        };
+        img.onerror = () => {
+          clearTimeout(timer);
+          resolve();
+        };
+      });
+    }));
+  });
+
   await page.evaluate(() => {
     document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));
 
@@ -60,30 +83,30 @@ async function stabilizePage(page) {
       const cs = window.getComputedStyle(el);
       return cs.animationName !== 'none' || cs.transitionDuration !== '0s';
     });
-    animated.forEach((el) => el.setAttribute('data-morphus-animated', '1'));
+    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' && shouldForceAnimatedElementVisible(el, cs)) {
-        el.style.opacity = '1';
-        if (isTranslateOnlyTransform(cs.transform)) {
-          el.style.transform = 'none';
-        }
-      }
-    });
-
-    limitPaginatedTableRows();
-
-    function shouldForceAnimatedElementVisible(el, cs) {
-      if (cs.display === 'none' || cs.visibility === 'hidden') {
-        return false;
-      }
-
-      if (cs.position === 'absolute' || cs.position === 'fixed') {
+    document.querySelectorAll('[data-morphus-animated="1"]').forEach((el) => {
+      const cs = window.getComputedStyle(el);
+      if (cs.opacity === '0' && shouldForceAnimatedElementVisible(el, cs)) {
+        el.style.opacity = '1';
+        if (isTranslateOnlyTransform(cs.transform)) {
+          el.style.transform = 'none';
+        }
+      }
+    });
+
+    limitPaginatedTableRows();
+
+    function shouldForceAnimatedElementVisible(el, cs) {
+      if (cs.display === 'none' || cs.visibility === 'hidden') {
+        return false;
+      }
+
+      if (cs.position === 'fixed') {
         return false;
       }
 
@@ -135,115 +158,115 @@ async function stabilizePage(page) {
             && Math.abs(values[3] - 1) <= tolerance;
         }
       }
-
-      return /^translate(?:3d|x|y)?\(/i.test(text);
-    }
-
-    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');
-        }
-      }
-    }
-
-    function isPaginationElement(el) {
-      if (!el || el.nodeType !== Node.ELEMENT_NODE) {
-        return false;
-      }
-
-      const identity = `${el.id || ''} ${String(el.className || '')} ${el.getAttribute('role') || ''}`.toLowerCase();
-      if (/(pagination|paginator|pager|page-nav|page-control)/.test(identity)) {
-        return true;
-      }
-
-      const text = normalizePaginationText(el.innerText || el.textContent || '');
-      if (!text || text.length > 160) {
-        return false;
-      }
-
-      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);
-    }
-
-    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;
-      }
-
-      return null;
-    }
-
-    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);
-        }
-      }
-
-      return rows;
-    }
-
-    function normalizePaginationText(value) {
-      return String(value || '').replace(/\s+/g, ' ').trim();
-    }
-  });
+
+      return /^translate(?:3d|x|y)?\(/i.test(text);
+    }
+
+    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');
+        }
+      }
+    }
+
+    function isPaginationElement(el) {
+      if (!el || el.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+      }
+
+      const identity = `${el.id || ''} ${String(el.className || '')} ${el.getAttribute('role') || ''}`.toLowerCase();
+      if (/(pagination|paginator|pager|page-nav|page-control)/.test(identity)) {
+        return true;
+      }
+
+      const text = normalizePaginationText(el.innerText || el.textContent || '');
+      if (!text || text.length > 160) {
+        return false;
+      }
+
+      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);
+    }
+
+    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;
+      }
+
+      return null;
+    }
+
+    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);
+        }
+      }
+
+      return rows;
+    }
+
+    function normalizePaginationText(value) {
+      return String(value || '').replace(/\s+/g, ' ').trim();
+    }
+  });
 
   await waitForCanvasPaint(page);
 }
@@ -273,7 +296,7 @@ async function waitForCanvasPaint(page) {
       }
 
       const now = performance.now();
-      const state = window.__morphusCanvasCaptureState || {
+      const state = window.__morphusCanvasCaptureState || {
         startedAt: now,
         lastSignature: '',
         stableCount: 0,
@@ -293,7 +316,7 @@ async function waitForCanvasPaint(page) {
         state.stableCount = 0;
       }
 
-      window.__morphusCanvasCaptureState = state;
+      window.__morphusCanvasCaptureState = state;
       return state.stableCount >= 2 && now - state.startedAt >= 500;
 
       function captureCanvasSnapshot(canvas) {
@@ -310,7 +333,7 @@ async function waitForCanvasPaint(page) {
           return { readable: false };
         }
 
-        canvas.__morphusCanvasCaptureSrc = src;
+        canvas.__morphusCanvasCaptureSrc = src;
         return {
           readable: Boolean(src && src !== 'data:,'),
           signature: `${width}x${height}:${src.length}:${hashString(src)}`,
@@ -377,36 +400,36 @@ function escapeHtmlAttribute(value) {
  */
 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([
-    'a',
-    'abbr',
-    'b',
-    'bdi',
-    'bdo',
-    'cite',
-    'code',
-    'data',
-    'dfn',
-    'em',
-    'i',
-    'kbd',
-    'label',
-    'mark',
-    'q',
-    's',
-    'samp',
-    'small',
-    'span',
-    'strong',
-    'sub',
-    'sup',
-    'time',
-    'u',
-    'var',
-    'br',
-    'wbr',
-  ]);
+  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([
+    'a',
+    'abbr',
+    'b',
+    'bdi',
+    'bdo',
+    'cite',
+    'code',
+    'data',
+    'dfn',
+    'em',
+    'i',
+    'kbd',
+    'label',
+    'mark',
+    'q',
+    's',
+    'samp',
+    'small',
+    'span',
+    'strong',
+    'sub',
+    'sup',
+    'time',
+    'u',
+    'var',
+    'br',
+    'wbr',
+  ]);
   const TEXT_INPUT_TYPES = new Set([
     '',
     'date',
@@ -440,10 +463,10 @@ function walkDOMInBrowser() {
     if (isVisuallyHiddenElement(cs)) return null;
 
     const rawText = normalizeTextContent(el.innerText || el.textContent || '');
-    const hasVisualBox =
-      !isTransparentColor(cs.backgroundColor) ||
-      cs.backgroundImage !== 'none' ||
-      cs.borderStyle !== 'none' ||
+    const hasVisualBox =
+      !isTransparentColor(cs.backgroundColor) ||
+      cs.backgroundImage !== 'none' ||
+      cs.borderStyle !== 'none' ||
       parseFloat(cs.borderTopWidth) > 0 ||
       parseFloat(cs.borderRightWidth) > 0 ||
       parseFloat(cs.borderBottomWidth) > 0 ||
@@ -451,53 +474,61 @@ function walkDOMInBrowser() {
       parseFloat(cs.paddingTop) > 0 ||
       parseFloat(cs.paddingRight) > 0 ||
       parseFloat(cs.paddingBottom) > 0 ||
-      parseFloat(cs.paddingLeft) > 0 ||
-      cs.boxShadow !== 'none';
-
-    const inlineVisualFragments = extractInlineVisualFragments(el, tag, cs, csBefore, csAfter, rect, rawText, hasVisualBox);
-    if (inlineVisualFragments) {
-      return inlineVisualFragments;
-    }
-
-    const inlineTextFragments = extractInlineTextFragments(el, tag, cs, csBefore, csAfter, rect, rawText, hasVisualBox);
-    if (inlineTextFragments) {
-      return inlineTextFragments;
-    }
-
-    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)
+      parseFloat(cs.paddingLeft) > 0 ||
+      cs.boxShadow !== 'none' ||
+      cs.filter !== 'none';
+
+    const inlineVisualFragments = extractInlineVisualFragments(el, tag, cs, csBefore, csAfter, rect, rawText, hasVisualBox);
+    if (inlineVisualFragments) {
+      return inlineVisualFragments;
+    }
+
+    const inlineTextFragments = extractInlineTextFragments(el, tag, cs, csBefore, csAfter, rect, rawText, hasVisualBox);
+    if (inlineTextFragments) {
+      return inlineTextFragments;
+    }
+
+    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 beforeData = extractPseudoElementData(el, tag, cs, csBefore, 'before');
-    const afterData = extractPseudoElementData(el, tag, cs, csAfter, 'after');
-    const formControl = extractFormControlData(el, tag, cs);
-    const nodeText = formControl ? null : rawText;
-    const textData = nodeText ? extractTextData(el) : null;
-    const renderedText = textData?.text || nodeText;
-    const svgMarkup = isSvg ? serializeSvgElement(el, rect) : null;
-    const imageData = isImage
-      ? extractImageData(el)
-      : isCanvas
-        ? extractCanvasImageData(el)
-        : null;
-
-    const children = isSvg || isImage || isCanvas || isTextContainer || formControl
-      ? []
-      : Array.from(el.childNodes)
-          .map((child) => getChildNode(child, el, cs, depth + 1))
-          .filter(Boolean);
+    const beforeData = extractPseudoElementData(el, tag, cs, csBefore, 'before');
+    const afterData = extractPseudoElementData(el, tag, cs, csAfter, 'after');
+    const formControl = extractFormControlData(el, tag, cs);
+    const nodeText = formControl ? null : rawText;
+    const textData = nodeText ? extractTextData(el) : null;
+    const renderedText = textData?.text || nodeText;
+    const svgMarkup = isSvg ? serializeSvgElement(el, rect) : null;
+    const imageData = isImage
+      ? extractImageData(el)
+      : isCanvas
+        ? extractCanvasImageData(el)
+        : null;
+
+    const children = isSvg || isImage || isCanvas || isTextContainer || formControl
+      ? []
+      : 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: renderedText || null,
-      textRuns: textData?.runs || [],
+      tag,
+      id: el.id || null,
+      classList: Array.from(el.classList),
+      text: renderedText || null,
+      textRuns: textData?.runs || [],
       isTextContainer,
-      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      rect: {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        offsetWidth: el.offsetWidth !== undefined ? el.offsetWidth : rect.width,
+        offsetHeight: el.offsetHeight !== undefined ? el.offsetHeight : rect.height,
+      },
       computed: extractRelevantStyles(cs),
       ...(formControl ? { formControl } : {}),
       ...(svgMarkup ? { svgMarkup } : {}),
@@ -506,449 +537,449 @@ function walkDOMInBrowser() {
         before: beforeData,
         after: afterData,
       },
-      children,
-    };
-  }
-
-  function extractInlineVisualFragments(el, tag, cs, csBefore, csAfter, rect, rawText, hasVisualBox) {
-    if (!shouldSplitInlineVisualElement(el, tag, cs, csBefore, csAfter, rawText, hasVisualBox)) {
-      return null;
-    }
-
-    const fragmentRects = getElementClientRects(el);
-    if (fragmentRects.length <= 1) {
-      return null;
-    }
-
-    const lines = collectInlineVisualTextLines(el, fragmentRects);
-    if (!lines.some((line) => line.text)) {
-      return null;
-    }
-
-    const wrapperComputed = makeTransparentInlineWrapperStyles(cs, rect);
-    const fragmentNodes = fragmentRects
-      .map((fragmentRect, index) => buildInlineVisualFragmentNode(el, tag, cs, fragmentRect, lines[index]))
-      .filter(Boolean);
-
-    if (fragmentNodes.length <= 1) {
-      return null;
-    }
-
-    return {
-      tag,
-      id: el.id || null,
-      classList: Array.from(el.classList),
-      text: null,
-      textRuns: [],
-      isTextContainer: false,
-      _inlineFragmentGroup: true,
-      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-      computed: wrapperComputed,
-      pseudo: {
-        before: null,
-        after: null,
-      },
-      children: fragmentNodes,
-    };
-  }
-
-  function extractInlineTextFragments(el, tag, cs, csBefore, csAfter, rect, rawText, hasVisualBox) {
-    if (!shouldSplitInlineTextElement(el, tag, cs, csBefore, csAfter, rawText, hasVisualBox)) {
-      return null;
-    }
-
-    const fragmentRects = getElementClientRects(el);
-    if (fragmentRects.length <= 1) {
-      return null;
-    }
-
-    const lines = collectInlineVisualTextLines(el, fragmentRects);
-    const fragmentNodes = lines
-      .map((line) => buildInlineTextFragmentNode(el, cs, line))
-      .filter(Boolean);
-
-    if (fragmentNodes.length <= 1) {
-      return null;
-    }
-
-    return {
-      tag,
-      id: el.id || null,
-      classList: Array.from(el.classList),
-      text: null,
-      textRuns: [],
-      isTextContainer: false,
-      _inlineTextFragmentGroup: true,
-      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-      computed: makeTransparentInlineWrapperStyles(cs, rect),
-      pseudo: {
-        before: null,
-        after: null,
-      },
-      children: fragmentNodes,
-    };
-  }
-
-  function shouldSplitInlineTextElement(el, tag, cs, csBefore, csAfter, rawText, hasVisualBox) {
-    if (hasVisualBox || !rawText || !INLINE_TAGS.has(tag)) {
-      return false;
-    }
-
-    if (cs.display !== 'inline' || cs.position !== 'static') {
-      return false;
-    }
-
-    if (hasRenderablePseudo(csBefore) || hasRenderablePseudo(csAfter)) {
-      return false;
-    }
-
-    return getElementClientRects(el).length > 1;
-  }
-
-  function buildInlineTextFragmentNode(el, cs, line) {
-    if (!line?.text || !line.textRect) {
-      return null;
-    }
-
-    const computed = extractRelevantStyles(cs);
-    computed.display = 'inline';
-    computed.position = 'static';
-    computed.width = `${line.textRect.width}px`;
-    computed.height = `${line.textRect.height}px`;
-    computed.minWidth = '0px';
-    computed.minHeight = '0px';
-
-    return {
-      tag: el.tagName.toLowerCase(),
-      id: null,
-      classList: Array.from(el.classList),
-      text: line.text,
-      textRuns: line.runs,
-      isTextContainer: true,
-      _inlineTextFragment: true,
-      rect: line.textRect,
-      computed,
-      pseudo: {
-        before: null,
-        after: null,
-      },
-      children: [],
-    };
-  }
-
-  function shouldSplitInlineVisualElement(el, tag, cs, csBefore, csAfter, rawText, hasVisualBox) {
-    if (!hasVisualBox || !rawText || !INLINE_TAGS.has(tag)) {
-      return false;
-    }
-
-    if (cs.display !== 'inline' || cs.position !== 'static') {
-      return false;
-    }
-
-    if (hasRenderablePseudo(csBefore) || hasRenderablePseudo(csAfter)) {
-      return false;
-    }
-
-    return getElementClientRects(el).length > 1;
-  }
-
-  function getElementClientRects(el) {
-    return Array.from(el.getClientRects())
-      .map(rectToPlainObject)
-      .filter((rect) => rect.width > 0 && rect.height > 0);
-  }
-
-  function buildInlineVisualFragmentNode(el, tag, cs, fragmentRect, line) {
-    const computed = extractRelevantStyles(cs);
-    computed.display = 'inline';
-    computed.position = 'static';
-    computed.width = `${fragmentRect.width}px`;
-    computed.height = `${fragmentRect.height}px`;
-    computed.minWidth = '0px';
-    computed.minHeight = '0px';
-
-    const textNode = line?.text
-      ? buildInlineFragmentTextNode(cs, line)
-      : null;
-
-    return {
-      tag,
-      id: null,
-      classList: Array.from(el.classList),
-      text: null,
-      textRuns: [],
-      isTextContainer: false,
-      _inlineFragment: true,
-      rect: fragmentRect,
-      computed,
-      pseudo: {
-        before: null,
-        after: null,
-      },
-      children: textNode ? [textNode] : [],
-    };
-  }
-
-  function buildInlineFragmentTextNode(cs, line) {
-    const computed = extractRelevantStyles(cs);
-    computed.display = 'inline';
-    computed.position = 'static';
-    computed.width = `${line.textRect.width}px`;
-    computed.height = `${line.textRect.height}px`;
-    computed.minWidth = '0px';
-    computed.minHeight = '0px';
-    computed.backgroundColor = 'rgba(0, 0, 0, 0)';
-    computed.backgroundImage = 'none';
-    computed.paddingTop = '0px';
-    computed.paddingRight = '0px';
-    computed.paddingBottom = '0px';
-    computed.paddingLeft = '0px';
-    computed.border = '0px none rgba(0, 0, 0, 0)';
-    computed.borderWidth = '0px';
-    computed.borderStyle = 'none';
-    computed.boxShadow = 'none';
-
-    return {
-      tag: 'span',
-      id: null,
-      classList: [],
-      text: line.text,
-      textRuns: line.runs,
-      isTextContainer: true,
-      _inlineFragmentText: true,
-      rect: line.textRect,
-      computed,
-      pseudo: {
-        before: null,
-        after: null,
-      },
-      children: [],
-    };
-  }
-
-  function collectInlineVisualTextLines(el, fragmentRects) {
-    const lines = fragmentRects.map((fragmentRect) => ({
-      fragmentRect,
-      text: '',
-      runs: [],
-      textRect: null,
-    }));
-    let pendingWhitespace = false;
-    let previousLineIndex = null;
-
-    function walkInlineText(node, styleEl) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        collectTextNodeLines(node, styleEl);
-        return;
-      }
-
-      if (node.nodeType !== Node.ELEMENT_NODE) {
-        return;
-      }
-
-      const element = node;
-      if (element.tagName.toLowerCase() === 'br') {
-        pendingWhitespace = false;
-        previousLineIndex = null;
-        return;
-      }
-
-      for (const child of element.childNodes) {
-        walkInlineText(child, element);
-      }
-    }
-
-    function collectTextNodeLines(textNode, styleEl) {
-      const text = textNode.textContent || '';
-      const tokenPattern = /\s+|\S+/g;
-      let match;
-
-      while ((match = tokenPattern.exec(text)) !== null) {
-        const token = match[0];
-        if (/^\s+$/.test(token)) {
-          pendingWhitespace = true;
-          continue;
-        }
-
-        appendMeasuredToken(textNode, match.index, match.index + token.length, token, styleEl);
-      }
-    }
-
-    function appendMeasuredToken(textNode, start, end, token, styleEl) {
-      const tokenRects = measureTextRangeClientRects(textNode, start, end);
-      if (tokenRects.length <= 1) {
-        const rect = tokenRects[0];
-        if (!rect) return;
-        appendLineText(findBestFragmentIndex(rect, fragmentRects), token, rect, styleEl);
-        return;
-      }
-
-      let segment = '';
-      let segmentLineIndex = null;
-      let segmentRect = null;
-
-      for (let offset = start; offset < end; offset++) {
-        const char = (textNode.textContent || '').slice(offset, offset + 1);
-        const charRect = measureTextRangeClientRects(textNode, offset, offset + 1)[0];
-        if (!charRect) continue;
-
-        const lineIndex = findBestFragmentIndex(charRect, fragmentRects);
-        if (segment && lineIndex !== segmentLineIndex) {
-          appendLineText(segmentLineIndex, segment, segmentRect, styleEl);
-          segment = '';
-          segmentRect = null;
-        }
-
-        segment += char;
-        segmentLineIndex = lineIndex;
-        segmentRect = unionTwoRects(segmentRect, charRect);
-      }
-
-      if (segment) {
-        appendLineText(segmentLineIndex, segment, segmentRect, styleEl);
-      }
-    }
-
-    function appendLineText(lineIndex, rawToken, rect, styleEl) {
-      const line = lines[lineIndex];
-      if (!line || !rawToken || !rect) {
-        return;
-      }
-
-      const normalizedToken = normalizeTextFragment(rawToken);
-      if (!normalizedToken) {
-        return;
-      }
-
-      const prefix = pendingWhitespace && previousLineIndex === lineIndex && line.text ? ' ' : '';
-      const text = prefix + normalizedToken;
-      line.text += text;
-      line.runs.push({
-        text,
-        lineIndex: 0,
-        computed: extractTextRunStyles(window.getComputedStyle(styleEl || el)),
-      });
-      line.textRect = unionTwoRects(line.textRect, rect);
-      pendingWhitespace = false;
-      previousLineIndex = lineIndex;
-    }
-
-    for (const child of el.childNodes) {
-      walkInlineText(child, el);
-    }
-
-    for (const line of lines) {
-      if (!line.textRect) {
-        line.textRect = line.fragmentRect;
-      }
-      line.text = normalizeTextContent(line.text);
-    }
-
-    return lines;
-  }
-
-  function measureTextRangeClientRects(textNode, start, end) {
-    const range = document.createRange();
-    range.setStart(textNode, start);
-    range.setEnd(textNode, end);
-    return Array.from(range.getClientRects())
-      .map(rectToPlainObject)
-      .filter((rect) => rect.width > 0 && rect.height > 0);
-  }
-
-  function findBestFragmentIndex(rect, fragmentRects) {
-    let bestIndex = 0;
-    let bestScore = -1;
-    const centerY = rect.y + rect.height / 2;
-
-    for (let index = 0; index < fragmentRects.length; index++) {
-      const fragment = fragmentRects[index];
-      const overlapX = Math.max(0, Math.min(rect.x + rect.width, fragment.x + fragment.width) - Math.max(rect.x, fragment.x));
-      const overlapY = Math.max(0, Math.min(rect.y + rect.height, fragment.y + fragment.height) - Math.max(rect.y, fragment.y));
-      const area = overlapX * overlapY;
-      const yDistance = Math.abs(centerY - (fragment.y + fragment.height / 2));
-      const score = area > 0 ? area : -yDistance;
-      if (score > bestScore) {
-        bestScore = score;
-        bestIndex = index;
-      }
-    }
-
-    return bestIndex;
-  }
-
-  function makeTransparentInlineWrapperStyles(cs, rect) {
-    const computed = extractRelevantStyles(cs);
-    computed.display = 'inline';
-    computed.position = 'static';
-    computed.width = `${rect.width}px`;
-    computed.height = `${rect.height}px`;
-    computed.minWidth = '0px';
-    computed.minHeight = '0px';
-    computed.paddingTop = '0px';
-    computed.paddingRight = '0px';
-    computed.paddingBottom = '0px';
-    computed.paddingLeft = '0px';
-    computed.backgroundColor = 'rgba(0, 0, 0, 0)';
-    computed.backgroundImage = 'none';
-    computed.borderRadius = '0px';
-    computed.borderTopLeftRadius = '0px';
-    computed.borderTopRightRadius = '0px';
-    computed.borderBottomRightRadius = '0px';
-    computed.borderBottomLeftRadius = '0px';
-    computed.border = '0px none rgba(0, 0, 0, 0)';
-    computed.borderWidth = '0px';
-    computed.borderColor = 'rgba(0, 0, 0, 0)';
-    computed.borderStyle = 'none';
-    computed.borderTopWidth = '0px';
-    computed.borderRightWidth = '0px';
-    computed.borderBottomWidth = '0px';
-    computed.borderLeftWidth = '0px';
-    computed.borderTopColor = 'rgba(0, 0, 0, 0)';
-    computed.borderRightColor = 'rgba(0, 0, 0, 0)';
-    computed.borderBottomColor = 'rgba(0, 0, 0, 0)';
-    computed.borderLeftColor = 'rgba(0, 0, 0, 0)';
-    computed.borderTopStyle = 'none';
-    computed.borderRightStyle = 'none';
-    computed.borderBottomStyle = 'none';
-    computed.borderLeftStyle = 'none';
-    computed.boxShadow = 'none';
-    return computed;
-  }
-
-  function rectToPlainObject(rect) {
-    return {
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: rect.height,
-    };
-  }
-
-  function unionTwoRects(a, b) {
-    if (!a) return b ? { x: b.x, y: b.y, width: b.width, height: b.height } : null;
-    if (!b) return { x: a.x, y: a.y, width: a.width, height: a.height };
-
-    const left = Math.min(a.x, b.x);
-    const top = Math.min(a.y, b.y);
-    const right = Math.max(a.x + a.width, b.x + b.width);
-    const bottom = Math.max(a.y + a.height, b.y + b.height);
-    return {
-      x: left,
-      y: top,
-      width: Math.max(right - left, 0),
-      height: Math.max(bottom - top, 0),
-    };
-  }
-
-  function extractFormControlData(el, tag, computedStyles) {
-    if (tag === 'select') {
-      return extractSelectControlData(el);
-    }
-
-    if (tag !== 'input' && tag !== 'textarea') {
-      return null;
-    }
+      children,
+    };
+  }
+
+  function extractInlineVisualFragments(el, tag, cs, csBefore, csAfter, rect, rawText, hasVisualBox) {
+    if (!shouldSplitInlineVisualElement(el, tag, cs, csBefore, csAfter, rawText, hasVisualBox)) {
+      return null;
+    }
+
+    const fragmentRects = getElementClientRects(el);
+    if (fragmentRects.length <= 1) {
+      return null;
+    }
+
+    const lines = collectInlineVisualTextLines(el, fragmentRects);
+    if (!lines.some((line) => line.text)) {
+      return null;
+    }
+
+    const wrapperComputed = makeTransparentInlineWrapperStyles(cs, rect);
+    const fragmentNodes = fragmentRects
+      .map((fragmentRect, index) => buildInlineVisualFragmentNode(el, tag, cs, fragmentRect, lines[index]))
+      .filter(Boolean);
+
+    if (fragmentNodes.length <= 1) {
+      return null;
+    }
+
+    return {
+      tag,
+      id: el.id || null,
+      classList: Array.from(el.classList),
+      text: null,
+      textRuns: [],
+      isTextContainer: false,
+      _inlineFragmentGroup: true,
+      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      computed: wrapperComputed,
+      pseudo: {
+        before: null,
+        after: null,
+      },
+      children: fragmentNodes,
+    };
+  }
+
+  function extractInlineTextFragments(el, tag, cs, csBefore, csAfter, rect, rawText, hasVisualBox) {
+    if (!shouldSplitInlineTextElement(el, tag, cs, csBefore, csAfter, rawText, hasVisualBox)) {
+      return null;
+    }
+
+    const fragmentRects = getElementClientRects(el);
+    if (fragmentRects.length <= 1) {
+      return null;
+    }
+
+    const lines = collectInlineVisualTextLines(el, fragmentRects);
+    const fragmentNodes = lines
+      .map((line) => buildInlineTextFragmentNode(el, cs, line))
+      .filter(Boolean);
+
+    if (fragmentNodes.length <= 1) {
+      return null;
+    }
+
+    return {
+      tag,
+      id: el.id || null,
+      classList: Array.from(el.classList),
+      text: null,
+      textRuns: [],
+      isTextContainer: false,
+      _inlineTextFragmentGroup: true,
+      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      computed: makeTransparentInlineWrapperStyles(cs, rect),
+      pseudo: {
+        before: null,
+        after: null,
+      },
+      children: fragmentNodes,
+    };
+  }
+
+  function shouldSplitInlineTextElement(el, tag, cs, csBefore, csAfter, rawText, hasVisualBox) {
+    if (hasVisualBox || !rawText || !INLINE_TAGS.has(tag)) {
+      return false;
+    }
+
+    if (cs.display !== 'inline' || cs.position !== 'static') {
+      return false;
+    }
+
+    if (hasRenderablePseudo(csBefore) || hasRenderablePseudo(csAfter)) {
+      return false;
+    }
+
+    return getElementClientRects(el).length > 1;
+  }
+
+  function buildInlineTextFragmentNode(el, cs, line) {
+    if (!line?.text || !line.textRect) {
+      return null;
+    }
+
+    const computed = extractRelevantStyles(cs);
+    computed.display = 'inline';
+    computed.position = 'static';
+    computed.width = `${line.textRect.width}px`;
+    computed.height = `${line.textRect.height}px`;
+    computed.minWidth = '0px';
+    computed.minHeight = '0px';
+
+    return {
+      tag: el.tagName.toLowerCase(),
+      id: null,
+      classList: Array.from(el.classList),
+      text: line.text,
+      textRuns: line.runs,
+      isTextContainer: true,
+      _inlineTextFragment: true,
+      rect: line.textRect,
+      computed,
+      pseudo: {
+        before: null,
+        after: null,
+      },
+      children: [],
+    };
+  }
+
+  function shouldSplitInlineVisualElement(el, tag, cs, csBefore, csAfter, rawText, hasVisualBox) {
+    if (!hasVisualBox || !rawText || !INLINE_TAGS.has(tag)) {
+      return false;
+    }
+
+    if (cs.display !== 'inline' || cs.position !== 'static') {
+      return false;
+    }
+
+    if (hasRenderablePseudo(csBefore) || hasRenderablePseudo(csAfter)) {
+      return false;
+    }
+
+    return getElementClientRects(el).length > 1;
+  }
+
+  function getElementClientRects(el) {
+    return Array.from(el.getClientRects())
+      .map(rectToPlainObject)
+      .filter((rect) => rect.width > 0 && rect.height > 0);
+  }
+
+  function buildInlineVisualFragmentNode(el, tag, cs, fragmentRect, line) {
+    const computed = extractRelevantStyles(cs);
+    computed.display = 'inline';
+    computed.position = 'static';
+    computed.width = `${fragmentRect.width}px`;
+    computed.height = `${fragmentRect.height}px`;
+    computed.minWidth = '0px';
+    computed.minHeight = '0px';
+
+    const textNode = line?.text
+      ? buildInlineFragmentTextNode(cs, line)
+      : null;
+
+    return {
+      tag,
+      id: null,
+      classList: Array.from(el.classList),
+      text: null,
+      textRuns: [],
+      isTextContainer: false,
+      _inlineFragment: true,
+      rect: fragmentRect,
+      computed,
+      pseudo: {
+        before: null,
+        after: null,
+      },
+      children: textNode ? [textNode] : [],
+    };
+  }
+
+  function buildInlineFragmentTextNode(cs, line) {
+    const computed = extractRelevantStyles(cs);
+    computed.display = 'inline';
+    computed.position = 'static';
+    computed.width = `${line.textRect.width}px`;
+    computed.height = `${line.textRect.height}px`;
+    computed.minWidth = '0px';
+    computed.minHeight = '0px';
+    computed.backgroundColor = 'rgba(0, 0, 0, 0)';
+    computed.backgroundImage = 'none';
+    computed.paddingTop = '0px';
+    computed.paddingRight = '0px';
+    computed.paddingBottom = '0px';
+    computed.paddingLeft = '0px';
+    computed.border = '0px none rgba(0, 0, 0, 0)';
+    computed.borderWidth = '0px';
+    computed.borderStyle = 'none';
+    computed.boxShadow = 'none';
+
+    return {
+      tag: 'span',
+      id: null,
+      classList: [],
+      text: line.text,
+      textRuns: line.runs,
+      isTextContainer: true,
+      _inlineFragmentText: true,
+      rect: line.textRect,
+      computed,
+      pseudo: {
+        before: null,
+        after: null,
+      },
+      children: [],
+    };
+  }
+
+  function collectInlineVisualTextLines(el, fragmentRects) {
+    const lines = fragmentRects.map((fragmentRect) => ({
+      fragmentRect,
+      text: '',
+      runs: [],
+      textRect: null,
+    }));
+    let pendingWhitespace = false;
+    let previousLineIndex = null;
+
+    function walkInlineText(node, styleEl) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        collectTextNodeLines(node, styleEl);
+        return;
+      }
+
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return;
+      }
+
+      const element = node;
+      if (element.tagName.toLowerCase() === 'br') {
+        pendingWhitespace = false;
+        previousLineIndex = null;
+        return;
+      }
+
+      for (const child of element.childNodes) {
+        walkInlineText(child, element);
+      }
+    }
+
+    function collectTextNodeLines(textNode, styleEl) {
+      const text = textNode.textContent || '';
+      const tokenPattern = /\s+|\S+/g;
+      let match;
+
+      while ((match = tokenPattern.exec(text)) !== null) {
+        const token = match[0];
+        if (/^\s+$/.test(token)) {
+          pendingWhitespace = true;
+          continue;
+        }
+
+        appendMeasuredToken(textNode, match.index, match.index + token.length, token, styleEl);
+      }
+    }
+
+    function appendMeasuredToken(textNode, start, end, token, styleEl) {
+      const tokenRects = measureTextRangeClientRects(textNode, start, end);
+      if (tokenRects.length <= 1) {
+        const rect = tokenRects[0];
+        if (!rect) return;
+        appendLineText(findBestFragmentIndex(rect, fragmentRects), token, rect, styleEl);
+        return;
+      }
+
+      let segment = '';
+      let segmentLineIndex = null;
+      let segmentRect = null;
+
+      for (let offset = start; offset < end; offset++) {
+        const char = (textNode.textContent || '').slice(offset, offset + 1);
+        const charRect = measureTextRangeClientRects(textNode, offset, offset + 1)[0];
+        if (!charRect) continue;
+
+        const lineIndex = findBestFragmentIndex(charRect, fragmentRects);
+        if (segment && lineIndex !== segmentLineIndex) {
+          appendLineText(segmentLineIndex, segment, segmentRect, styleEl);
+          segment = '';
+          segmentRect = null;
+        }
+
+        segment += char;
+        segmentLineIndex = lineIndex;
+        segmentRect = unionTwoRects(segmentRect, charRect);
+      }
+
+      if (segment) {
+        appendLineText(segmentLineIndex, segment, segmentRect, styleEl);
+      }
+    }
+
+    function appendLineText(lineIndex, rawToken, rect, styleEl) {
+      const line = lines[lineIndex];
+      if (!line || !rawToken || !rect) {
+        return;
+      }
+
+      const normalizedToken = normalizeTextFragment(rawToken);
+      if (!normalizedToken) {
+        return;
+      }
+
+      const prefix = pendingWhitespace && previousLineIndex === lineIndex && line.text ? ' ' : '';
+      const text = prefix + normalizedToken;
+      line.text += text;
+      line.runs.push({
+        text,
+        lineIndex: 0,
+        computed: extractTextRunStyles(window.getComputedStyle(styleEl || el)),
+      });
+      line.textRect = unionTwoRects(line.textRect, rect);
+      pendingWhitespace = false;
+      previousLineIndex = lineIndex;
+    }
+
+    for (const child of el.childNodes) {
+      walkInlineText(child, el);
+    }
+
+    for (const line of lines) {
+      if (!line.textRect) {
+        line.textRect = line.fragmentRect;
+      }
+      line.text = normalizeTextContent(line.text);
+    }
+
+    return lines;
+  }
+
+  function measureTextRangeClientRects(textNode, start, end) {
+    const range = document.createRange();
+    range.setStart(textNode, start);
+    range.setEnd(textNode, end);
+    return Array.from(range.getClientRects())
+      .map(rectToPlainObject)
+      .filter((rect) => rect.width > 0 && rect.height > 0);
+  }
+
+  function findBestFragmentIndex(rect, fragmentRects) {
+    let bestIndex = 0;
+    let bestScore = -1;
+    const centerY = rect.y + rect.height / 2;
+
+    for (let index = 0; index < fragmentRects.length; index++) {
+      const fragment = fragmentRects[index];
+      const overlapX = Math.max(0, Math.min(rect.x + rect.width, fragment.x + fragment.width) - Math.max(rect.x, fragment.x));
+      const overlapY = Math.max(0, Math.min(rect.y + rect.height, fragment.y + fragment.height) - Math.max(rect.y, fragment.y));
+      const area = overlapX * overlapY;
+      const yDistance = Math.abs(centerY - (fragment.y + fragment.height / 2));
+      const score = area > 0 ? area : -yDistance;
+      if (score > bestScore) {
+        bestScore = score;
+        bestIndex = index;
+      }
+    }
+
+    return bestIndex;
+  }
+
+  function makeTransparentInlineWrapperStyles(cs, rect) {
+    const computed = extractRelevantStyles(cs);
+    computed.display = 'inline';
+    computed.position = 'static';
+    computed.width = `${rect.width}px`;
+    computed.height = `${rect.height}px`;
+    computed.minWidth = '0px';
+    computed.minHeight = '0px';
+    computed.paddingTop = '0px';
+    computed.paddingRight = '0px';
+    computed.paddingBottom = '0px';
+    computed.paddingLeft = '0px';
+    computed.backgroundColor = 'rgba(0, 0, 0, 0)';
+    computed.backgroundImage = 'none';
+    computed.borderRadius = '0px';
+    computed.borderTopLeftRadius = '0px';
+    computed.borderTopRightRadius = '0px';
+    computed.borderBottomRightRadius = '0px';
+    computed.borderBottomLeftRadius = '0px';
+    computed.border = '0px none rgba(0, 0, 0, 0)';
+    computed.borderWidth = '0px';
+    computed.borderColor = 'rgba(0, 0, 0, 0)';
+    computed.borderStyle = 'none';
+    computed.borderTopWidth = '0px';
+    computed.borderRightWidth = '0px';
+    computed.borderBottomWidth = '0px';
+    computed.borderLeftWidth = '0px';
+    computed.borderTopColor = 'rgba(0, 0, 0, 0)';
+    computed.borderRightColor = 'rgba(0, 0, 0, 0)';
+    computed.borderBottomColor = 'rgba(0, 0, 0, 0)';
+    computed.borderLeftColor = 'rgba(0, 0, 0, 0)';
+    computed.borderTopStyle = 'none';
+    computed.borderRightStyle = 'none';
+    computed.borderBottomStyle = 'none';
+    computed.borderLeftStyle = 'none';
+    computed.boxShadow = 'none';
+    return computed;
+  }
+
+  function rectToPlainObject(rect) {
+    return {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+    };
+  }
+
+  function unionTwoRects(a, b) {
+    if (!a) return b ? { x: b.x, y: b.y, width: b.width, height: b.height } : null;
+    if (!b) return { x: a.x, y: a.y, width: a.width, height: a.height };
+
+    const left = Math.min(a.x, b.x);
+    const top = Math.min(a.y, b.y);
+    const right = Math.max(a.x + a.width, b.x + b.width);
+    const bottom = Math.max(a.y + a.height, b.y + b.height);
+    return {
+      x: left,
+      y: top,
+      width: Math.max(right - left, 0),
+      height: Math.max(bottom - top, 0),
+    };
+  }
+
+  function extractFormControlData(el, tag, computedStyles) {
+    if (tag === 'select') {
+      return extractSelectControlData(el);
+    }
+
+    if (tag !== 'input' && tag !== 'textarea') {
+      return null;
+    }
 
     const type = tag === 'input'
       ? String(el.getAttribute('type') || 'text').trim().toLowerCase()
@@ -975,34 +1006,34 @@ function walkDOMInBrowser() {
       type,
       value,
       placeholder,
-      ...(placeholderComputed ? { placeholderComputed } : {}),
-    };
-  }
-
-  function extractSelectControlData(el) {
-    const selectedOptions = Array.from(el.selectedOptions || []);
-    const renderedOptions = selectedOptions.length > 0
-      ? selectedOptions
-      : [el.options && el.selectedIndex >= 0 ? el.options[el.selectedIndex] : null].filter(Boolean);
-    const renderedText = normalizeFormControlText(
-      renderedOptions
-        .map((option) => option.label || option.textContent || '')
-        .filter(Boolean)
-        .join(el.multiple ? '\n' : ' ')
-    );
-
-    if (!renderedText) {
-      return null;
-    }
-
-    const size = Number.parseInt(el.getAttribute('size') || '1', 10);
-    return {
-      type: 'select',
-      value: renderedText,
-      optionValue: renderedOptions[0] ? renderedOptions[0].value : el.value,
-      hasChevron: !el.multiple && (!Number.isFinite(size) || size <= 1),
-    };
-  }
+      ...(placeholderComputed ? { placeholderComputed } : {}),
+    };
+  }
+
+  function extractSelectControlData(el) {
+    const selectedOptions = Array.from(el.selectedOptions || []);
+    const renderedOptions = selectedOptions.length > 0
+      ? selectedOptions
+      : [el.options && el.selectedIndex >= 0 ? el.options[el.selectedIndex] : null].filter(Boolean);
+    const renderedText = normalizeFormControlText(
+      renderedOptions
+        .map((option) => option.label || option.textContent || '')
+        .filter(Boolean)
+        .join(el.multiple ? '\n' : ' ')
+    );
+
+    if (!renderedText) {
+      return null;
+    }
+
+    const size = Number.parseInt(el.getAttribute('size') || '1', 10);
+    return {
+      type: 'select',
+      value: renderedText,
+      optionValue: renderedOptions[0] ? renderedOptions[0].value : el.value,
+      hasChevron: !el.multiple && (!Number.isFinite(size) || size <= 1),
+    };
+  }
 
   function extractPlaceholderStyles(el, fallbackStyles) {
     try {
@@ -1081,6 +1112,7 @@ function walkDOMInBrowser() {
       borderBottomStyle: cs.borderBottomStyle,
       borderLeftStyle: cs.borderLeftStyle,
       boxShadow: cs.boxShadow,
+      filter: cs.filter,
       overflow: cs.overflow,
       overflowX: cs.overflowX,
       overflowY: cs.overflowY,
@@ -1095,16 +1127,18 @@ function walkDOMInBrowser() {
       lineHeight: cs.lineHeight,
       letterSpacing: cs.letterSpacing,
       textAlign: cs.textAlign,
-      textTransform: cs.textTransform,
-      whiteSpace: cs.whiteSpace,
-      textOverflow: cs.textOverflow,
-      textDecoration: cs.textDecoration,
-      textDecorationLine: cs.textDecorationLine,
-      textDecorationStyle: cs.textDecorationStyle,
-      textDecorationColor: cs.textDecorationColor,
-      textDecorationThickness: cs.textDecorationThickness,
-      webkitTextStrokeWidth: cs.webkitTextStrokeWidth,
-      webkitTextStrokeColor: cs.webkitTextStrokeColor,
+      textTransform: cs.textTransform,
+      whiteSpace: cs.whiteSpace,
+      textOverflow: cs.textOverflow,
+      textShadow: cs.textShadow,
+      textDecoration: cs.textDecoration,
+      textDecorationLine: cs.textDecorationLine,
+      textDecorationStyle: cs.textDecorationStyle,
+      textDecorationColor: cs.textDecorationColor,
+      textDecorationThickness: cs.textDecorationThickness,
+      webkitTextStrokeWidth: cs.webkitTextStrokeWidth,
+      webkitTextStrokeColor: cs.webkitTextStrokeColor,
+      writingMode: cs.writingMode,
       // Positioning
       top: cs.top,
       right: cs.right,
@@ -1133,8 +1167,22 @@ function walkDOMInBrowser() {
       return null;
     }
 
+    let base64Src = src;
+    try {
+      if (el.complete && el.naturalWidth > 0 && el.naturalHeight > 0) {
+        const canvas = document.createElement('canvas');
+        canvas.width = el.naturalWidth;
+        canvas.height = el.naturalHeight;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(el, 0, 0);
+        base64Src = canvas.toDataURL('image/png');
+      }
+    } catch (err) {
+      // Fallback to original src if canvas conversion fails
+    }
+
     return {
-      src,
+      src: base64Src,
       alt: el.getAttribute('alt') || '',
       naturalWidth: Number.isFinite(el.naturalWidth) ? el.naturalWidth : 0,
       naturalHeight: Number.isFinite(el.naturalHeight) ? el.naturalHeight : 0,
@@ -1148,7 +1196,7 @@ function walkDOMInBrowser() {
       return null;
     }
 
-    let src = String(el.__morphusCanvasCaptureSrc || '');
+    let src = String(el.__morphusCanvasCaptureSrc || '');
     try {
       src = src || el.toDataURL('image/png');
     } catch (err) {
@@ -1172,28 +1220,28 @@ function walkDOMInBrowser() {
     const pieces = [];
     let lineIndex = 0;
 
-    function pushText(text, styleSource) {
-      const normalized = normalizeTextFragment(text);
-      if (!normalized) return;
-      pieces.push(normalized);
-      runs.push({
-        text: normalized,
-        lineIndex,
-        computed: extractTextRunStyles(resolveTextRunComputedStyles(styleSource)),
-      });
-    }
-
-    function pushPseudoText(element, pseudoType) {
-      const pseudoStyles = window.getComputedStyle(element, pseudoType);
-      const content = parseCssContent(pseudoStyles.content);
-      if (!content) return;
-      pushText(content, pseudoStyles);
-    }
-
-    function walkText(node, styleEl) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        pushText(node.textContent || '', styleEl);
-        return;
+    function pushText(text, styleSource) {
+      const normalized = normalizeTextFragment(text);
+      if (!normalized) return;
+      pieces.push(normalized);
+      runs.push({
+        text: normalized,
+        lineIndex,
+        computed: extractTextRunStyles(resolveTextRunComputedStyles(styleSource)),
+      });
+    }
+
+    function pushPseudoText(element, pseudoType) {
+      const pseudoStyles = window.getComputedStyle(element, pseudoType);
+      const content = parseCssContent(pseudoStyles.content);
+      if (!content) return;
+      pushText(content, pseudoStyles);
+    }
+
+    function walkText(node, styleEl) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        pushText(node.textContent || '', styleEl);
+        return;
       }
 
       if (node.nodeType !== Node.ELEMENT_NODE) return;
@@ -1204,16 +1252,16 @@ function walkDOMInBrowser() {
       if (tagName === 'br') {
         pieces.push('\n');
         lineIndex++;
-        return;
-      }
-
-      const nextStyleEl = element;
-      pushPseudoText(element, '::before');
-      for (const child of element.childNodes) {
-        walkText(child, nextStyleEl);
-      }
-      pushPseudoText(element, '::after');
-    }
+        return;
+      }
+
+      const nextStyleEl = element;
+      pushPseudoText(element, '::before');
+      for (const child of element.childNodes) {
+        walkText(child, nextStyleEl);
+      }
+      pushPseudoText(element, '::after');
+    }
 
     for (const child of el.childNodes) {
       walkText(child, el);
@@ -1224,17 +1272,17 @@ function walkDOMInBrowser() {
       .replace(/[ \t]*\n[ \t]*/g, '\n')
       .replace(/[ \t]{2,}/g, ' ')
       .trim();
-
-    return { text, runs };
-  }
-
-  function resolveTextRunComputedStyles(styleSource) {
-    if (styleSource && typeof styleSource.getPropertyValue === 'function') {
-      return styleSource;
-    }
-
-    return window.getComputedStyle(styleSource);
-  }
+
+    return { text, runs };
+  }
+
+  function resolveTextRunComputedStyles(styleSource) {
+    if (styleSource && typeof styleSource.getPropertyValue === 'function') {
+      return styleSource;
+    }
+
+    return window.getComputedStyle(styleSource);
+  }
 
   function extractTextRunStyles(cs) {
     return {
@@ -1248,15 +1296,18 @@ function walkDOMInBrowser() {
       letterSpacing: cs.letterSpacing,
       textAlign: cs.textAlign,
       textTransform: cs.textTransform,
-      color: cs.color,
-      opacity: cs.opacity,
-      textDecoration: cs.textDecoration,
-      textDecorationLine: cs.textDecorationLine,
-      textDecorationStyle: cs.textDecorationStyle,
-      textDecorationColor: cs.textDecorationColor,
-      textDecorationThickness: cs.textDecorationThickness,
-      webkitTextStrokeWidth: cs.webkitTextStrokeWidth,
-      webkitTextStrokeColor: cs.webkitTextStrokeColor,
+      color: cs.color,
+      opacity: cs.opacity,
+      textShadow: cs.textShadow,
+      textDecoration: cs.textDecoration,
+      textDecorationLine: cs.textDecorationLine,
+      textDecorationStyle: cs.textDecorationStyle,
+      textDecorationColor: cs.textDecorationColor,
+      textDecorationThickness: cs.textDecorationThickness,
+      webkitTextStrokeWidth: cs.webkitTextStrokeWidth,
+      webkitTextStrokeColor: cs.webkitTextStrokeColor,
+      writingMode: cs.writingMode,
+      filter: cs.filter,
     };
   }
 
@@ -1285,7 +1336,7 @@ function walkDOMInBrowser() {
       const cloneEl = cloneElements[index];
       if (!sourceEl || !cloneEl) continue;
 
-      cloneEl.removeAttribute('data-morphus-animated');
+      cloneEl.removeAttribute('data-morphus-animated');
       const cs = window.getComputedStyle(sourceEl);
       const isRoot = index === 0;
 
@@ -1337,51 +1388,51 @@ function walkDOMInBrowser() {
     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, parentEl, parentStyles);
-    }
-
-    if (child.nodeType === Node.ELEMENT_NODE) {
-      const node = getNode(child, depth);
-      if (!node) {
-        return null;
-      }
-
-      if (parentEl && parentStyles && clippingEnabled(parentStyles)) {
-        const parentRect = parentEl.getBoundingClientRect();
-        if (isClippedOutsideParent(node.rect, parentRect, parentStyles)) {
-          return null;
-        }
-      }
-
-      return node;
-    }
-
-    return null;
-  }
-
-  function getDirectTextNode(textNode, parentEl, parentStyles) {
-    const normalizedText = normalizeTextFragment(textNode.textContent || '').trim();
-    if (!normalizedText) {
-      return null;
-    }
+  function getChildNode(child, parentEl, parentStyles, depth) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      return getDirectTextNode(child, parentEl, parentStyles);
+    }
+
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const node = getNode(child, depth);
+      if (!node) {
+        return null;
+      }
+
+      if (parentEl && parentStyles && clippingEnabled(parentStyles)) {
+        const parentRect = parentEl.getBoundingClientRect();
+        if (isClippedOutsideParent(node.rect, parentRect, parentStyles)) {
+          return null;
+        }
+      }
+
+      return node;
+    }
+
+    return null;
+  }
+
+  function getDirectTextNode(textNode, parentEl, 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;
-    }
-
-    if (parentEl && parentStyles && clippingEnabled(parentStyles)) {
-      const parentRect = parentEl.getBoundingClientRect();
-      if (isClippedOutsideParent(rect, parentRect, parentStyles)) {
-        return null;
-      }
-    }
-
-    const computed = extractRelevantStyles(parentStyles);
+    const rect = range.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      return null;
+    }
+
+    if (parentEl && parentStyles && clippingEnabled(parentStyles)) {
+      const parentRect = parentEl.getBoundingClientRect();
+      if (isClippedOutsideParent(rect, parentRect, parentStyles)) {
+        return null;
+      }
+    }
+
+    const computed = extractRelevantStyles(parentStyles);
     computed.display = 'inline';
     computed.position = 'static';
     computed.width = `${rect.width}px`;
@@ -1551,7 +1602,7 @@ function walkDOMInBrowser() {
     }
 
     const parentRect = el.getBoundingClientRect();
-    const rect = estimatePseudoTextRect(parentRect, parentStyles, pseudoStyles, pseudoType, content);
+    const rect = estimatePseudoTextRect(parentRect, parentStyles, pseudoStyles, pseudoType, content);
     const transformedRect = applyPseudoTransformRect(rect, pseudoStyles.transform);
     const finalRect = transformedRect || rect;
 
@@ -1597,86 +1648,87 @@ function walkDOMInBrowser() {
       parseFloat(cs.borderRightWidth) > 0 ||
       parseFloat(cs.borderBottomWidth) > 0 ||
       parseFloat(cs.borderLeftWidth) > 0 ||
-      cs.boxShadow !== 'none';
+      cs.boxShadow !== 'none' ||
+      cs.filter !== 'none';
+  }
+
+  function estimatePseudoTextRect(parentRect, parentStyles, pseudoStyles, pseudoType, content = '') {
+    const metrics = content ? measurePseudoTextMetrics(content, pseudoStyles) : null;
+    const width = Math.max(parseCssPx(pseudoStyles.width), metrics?.width || 0);
+    const height = Math.max(
+      parseCssPx(pseudoStyles.height) || parseCssPx(pseudoStyles.lineHeight) || parseCssPx(pseudoStyles.fontSize),
+      metrics?.height || 0
+    );
+    const position = pseudoStyles.position;
+
+    if (position === 'absolute' || position === 'fixed') {
+      return expandRectForTextMetrics(estimatePositionedPseudoRect(parentRect, pseudoStyles, width, height), metrics);
+    }
+
+    if (parentStyles.display === 'flex' || parentStyles.display === 'inline-flex') {
+      return expandRectForTextMetrics(estimateFlexPseudoRect(parentRect, parentStyles, width, height, pseudoType), metrics);
+    }
+
+    return expandRectForTextMetrics({
+      x: pseudoType === 'before' ? parentRect.x : parentRect.right - width,
+      y: parentRect.y + Math.max((parentRect.height - height) / 2, 0),
+      width,
+      height,
+    }, metrics);
   }
 
-  function estimatePseudoTextRect(parentRect, parentStyles, pseudoStyles, pseudoType, content = '') {
-    const metrics = content ? measurePseudoTextMetrics(content, pseudoStyles) : null;
-    const width = Math.max(parseCssPx(pseudoStyles.width), metrics?.width || 0);
-    const height = Math.max(
-      parseCssPx(pseudoStyles.height) || parseCssPx(pseudoStyles.lineHeight) || parseCssPx(pseudoStyles.fontSize),
-      metrics?.height || 0
-    );
-    const position = pseudoStyles.position;
-
-    if (position === 'absolute' || position === 'fixed') {
-      return expandRectForTextMetrics(estimatePositionedPseudoRect(parentRect, pseudoStyles, width, height), metrics);
-    }
-
-    if (parentStyles.display === 'flex' || parentStyles.display === 'inline-flex') {
-      return expandRectForTextMetrics(estimateFlexPseudoRect(parentRect, parentStyles, width, height, pseudoType), metrics);
-    }
-
-    return expandRectForTextMetrics({
-      x: pseudoType === 'before' ? parentRect.x : parentRect.right - width,
-      y: parentRect.y + Math.max((parentRect.height - height) / 2, 0),
-      width,
-      height,
-    }, metrics);
-  }
-
-  function measurePseudoTextMetrics(content, pseudoStyles) {
-    try {
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      if (!ctx) {
-        return null;
-      }
-
-      ctx.font = [
-        pseudoStyles.fontStyle,
-        pseudoStyles.fontVariant,
-        pseudoStyles.fontWeight,
-        pseudoStyles.fontSize,
-        pseudoStyles.fontFamily,
-      ].filter(Boolean).join(' ');
-
-      const metrics = ctx.measureText(content);
-      const left = Number.isFinite(metrics.actualBoundingBoxLeft) ? metrics.actualBoundingBoxLeft : 0;
-      const right = Number.isFinite(metrics.actualBoundingBoxRight) ? metrics.actualBoundingBoxRight : metrics.width;
-      const ascent = Number.isFinite(metrics.actualBoundingBoxAscent) ? metrics.actualBoundingBoxAscent : 0;
-      const descent = Number.isFinite(metrics.actualBoundingBoxDescent) ? metrics.actualBoundingBoxDescent : 0;
-
-      return {
-        width: Math.max(metrics.width || 0, Math.abs(left) + Math.abs(right)),
-        height: Math.max(parseCssPx(pseudoStyles.lineHeight), Math.abs(ascent) + Math.abs(descent)),
-        leftOverflow: Math.max(left, 0),
-        rightOverflow: Math.max(right - (metrics.width || 0), 0),
-        topOverflow: Math.max(ascent - parseCssPx(pseudoStyles.lineHeight), 0),
-        bottomOverflow: Math.max(descent, 0),
-      };
-    } catch (err) {
-      return null;
-    }
-  }
-
-  function expandRectForTextMetrics(rect, metrics) {
-    if (!metrics) {
-      return rect;
-    }
-
-    const leftOverflow = metrics.leftOverflow || 0;
-    const rightOverflow = metrics.rightOverflow || 0;
-    const topOverflow = metrics.topOverflow || 0;
-    const bottomOverflow = metrics.bottomOverflow || 0;
-
-    return {
-      x: rect.x - leftOverflow,
-      y: rect.y - topOverflow,
-      width: Math.max(rect.width + leftOverflow + rightOverflow, metrics.width),
-      height: Math.max(rect.height + topOverflow + bottomOverflow, metrics.height),
-    };
-  }
+  function measurePseudoTextMetrics(content, pseudoStyles) {
+    try {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        return null;
+      }
+
+      ctx.font = [
+        pseudoStyles.fontStyle,
+        pseudoStyles.fontVariant,
+        pseudoStyles.fontWeight,
+        pseudoStyles.fontSize,
+        pseudoStyles.fontFamily,
+      ].filter(Boolean).join(' ');
+
+      const metrics = ctx.measureText(content);
+      const left = Number.isFinite(metrics.actualBoundingBoxLeft) ? metrics.actualBoundingBoxLeft : 0;
+      const right = Number.isFinite(metrics.actualBoundingBoxRight) ? metrics.actualBoundingBoxRight : metrics.width;
+      const ascent = Number.isFinite(metrics.actualBoundingBoxAscent) ? metrics.actualBoundingBoxAscent : 0;
+      const descent = Number.isFinite(metrics.actualBoundingBoxDescent) ? metrics.actualBoundingBoxDescent : 0;
+
+      return {
+        width: Math.max(metrics.width || 0, Math.abs(left) + Math.abs(right)),
+        height: Math.max(parseCssPx(pseudoStyles.lineHeight), Math.abs(ascent) + Math.abs(descent)),
+        leftOverflow: Math.max(left, 0),
+        rightOverflow: Math.max(right - (metrics.width || 0), 0),
+        topOverflow: Math.max(ascent - parseCssPx(pseudoStyles.lineHeight), 0),
+        bottomOverflow: Math.max(descent, 0),
+      };
+    } catch (err) {
+      return null;
+    }
+  }
+
+  function expandRectForTextMetrics(rect, metrics) {
+    if (!metrics) {
+      return rect;
+    }
+
+    const leftOverflow = metrics.leftOverflow || 0;
+    const rightOverflow = metrics.rightOverflow || 0;
+    const topOverflow = metrics.topOverflow || 0;
+    const bottomOverflow = metrics.bottomOverflow || 0;
+
+    return {
+      x: rect.x - leftOverflow,
+      y: rect.y - topOverflow,
+      width: Math.max(rect.width + leftOverflow + rightOverflow, metrics.width),
+      height: Math.max(rect.height + topOverflow + bottomOverflow, metrics.height),
+    };
+  }
 
   function applyPseudoTransformRect(rect, transformValue) {
     const matrix = parseCssTransformMatrix(transformValue);

src/figma/css-to-figma.js

@@ -23,80 +23,80 @@ function isTransparentCssColor(value) {
   if (!value || value === 'transparent' || value === 'none') {
     return true;
   }
-  return cssColorToFigma(value).a === 0;
-}
-
-function meaningfulTextOverflow(value) {
-  const normalized = String(value || '').trim().toLowerCase();
-  return normalized && normalized !== 'clip' && normalized !== 'none' ? normalized : '';
-}
-
-function overflowClipsInlineContent(computed) {
-  if (!computed) {
-    return false;
-  }
-
-  return ['overflow', 'overflowX'].some((prop) => {
-    return isClippingOverflowValue(computed[prop]);
-  });
-}
-
-function isClippingOverflowValue(value) {
-  return String(value || '')
-    .trim()
-    .toLowerCase()
-    .split(/\s+/)
-    .some((part) => part === 'hidden' || part === 'clip' || part === 'scroll' || part === 'auto');
-}
-
-function isSingleLineWhiteSpace(value) {
-  const normalized = String(value || '').trim().toLowerCase();
-  return normalized.includes('nowrap') || normalized === 'pre';
-}
-
-/**
- * CSS ellipsis requires text-overflow, non-wrapping inline text,
- * and clipping on either the text box or the parent cell/container.
- */
-export function shouldTruncateText(computed = {}, parentComputed = null) {
-  const textOverflow = meaningfulTextOverflow(computed?.textOverflow)
-    || meaningfulTextOverflow(parentComputed?.textOverflow);
-
-  if (!textOverflow.includes('ellipsis')) {
-    return false;
-  }
-
-  if (!isSingleLineWhiteSpace(computed?.whiteSpace) && !isSingleLineWhiteSpace(parentComputed?.whiteSpace)) {
-    return false;
-  }
-
-  return overflowClipsInlineContent(computed) || overflowClipsInlineContent(parentComputed);
-}
+  return cssColorToFigma(value).a === 0;
+}
+
+function meaningfulTextOverflow(value) {
+  const normalized = String(value || '').trim().toLowerCase();
+  return normalized && normalized !== 'clip' && normalized !== 'none' ? normalized : '';
+}
+
+function overflowClipsInlineContent(computed) {
+  if (!computed) {
+    return false;
+  }
+
+  return ['overflow', 'overflowX'].some((prop) => {
+    return isClippingOverflowValue(computed[prop]);
+  });
+}
+
+function isClippingOverflowValue(value) {
+  return String(value || '')
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .some((part) => part === 'hidden' || part === 'clip' || part === 'scroll' || part === 'auto');
+}
+
+function isSingleLineWhiteSpace(value) {
+  const normalized = String(value || '').trim().toLowerCase();
+  return normalized.includes('nowrap') || normalized === 'pre';
+}
+
+/**
+ * CSS ellipsis requires text-overflow, non-wrapping inline text,
+ * and clipping on either the text box or the parent cell/container.
+ */
+export function shouldTruncateText(computed = {}, parentComputed = null) {
+  const textOverflow = meaningfulTextOverflow(computed?.textOverflow)
+    || meaningfulTextOverflow(parentComputed?.textOverflow);
+
+  if (!textOverflow.includes('ellipsis')) {
+    return false;
+  }
+
+  if (!isSingleLineWhiteSpace(computed?.whiteSpace) && !isSingleLineWhiteSpace(parentComputed?.whiteSpace)) {
+    return false;
+  }
+
+  return overflowClipsInlineContent(computed) || overflowClipsInlineContent(parentComputed);
+}
 
 // ─── LAYOUT ──────────────────────────────────────────────────────────────────
 
 /**
  * display: flex → Figma Auto Layout
  */
-export function mapFlexLayout(computed) {
-  const isRow = computed.flexDirection !== 'column' && computed.flexDirection !== 'column-reverse';
-  const columnGap = parsePx(computed.columnGap || computed.gap);
-  const rowGap = parsePx(computed.rowGap || computed.gap);
-  const wraps = computed.flexWrap === 'wrap' || computed.flexWrap === 'wrap-reverse';
-  const result = {
-    layoutMode: isRow ? 'HORIZONTAL' : 'VERTICAL',
-    primaryAxisAlignItems: JUSTIFY_MAP[computed.justifyContent] ?? 'MIN',
-    counterAxisAlignItems: ALIGN_MAP[computed.alignItems] ?? 'MIN',
-    itemSpacing: isRow ? columnGap : rowGap,
-  };
-
-  if (wraps) {
-    result.layoutWrap = 'WRAP';
-    result.counterAxisSpacing = isRow ? rowGap : columnGap;
-  }
-
-  return result;
-}
+export function mapFlexLayout(computed) {
+  const isRow = computed.flexDirection !== 'column' && computed.flexDirection !== 'column-reverse';
+  const columnGap = parsePx(computed.columnGap || computed.gap);
+  const rowGap = parsePx(computed.rowGap || computed.gap);
+  const wraps = computed.flexWrap === 'wrap' || computed.flexWrap === 'wrap-reverse';
+  const result = {
+    layoutMode: isRow ? 'HORIZONTAL' : 'VERTICAL',
+    primaryAxisAlignItems: JUSTIFY_MAP[computed.justifyContent] ?? 'MIN',
+    counterAxisAlignItems: ALIGN_MAP[computed.alignItems] ?? 'MIN',
+    itemSpacing: isRow ? columnGap : rowGap,
+  };
+
+  if (wraps) {
+    result.layoutWrap = 'WRAP';
+    result.counterAxisSpacing = isRow ? rowGap : columnGap;
+  }
+
+  return result;
+}
 
 /**
  * padding → Figma frame padding
@@ -113,13 +113,13 @@ export function mapPadding(computed) {
 /**
  * overflow → Figma clipsContent
  */
-export function mapOverflow(computed) {
-  return {
-    clipsContent: isClippingOverflowValue(computed.overflow)
-      || isClippingOverflowValue(computed.overflowX)
-      || isClippingOverflowValue(computed.overflowY),
-  };
-}
+export function mapOverflow(computed) {
+  return {
+    clipsContent: isClippingOverflowValue(computed.overflow)
+      || isClippingOverflowValue(computed.overflowX)
+      || isClippingOverflowValue(computed.overflowY),
+  };
+}
 
 /**
  * border-radius → Figma cornerRadius
@@ -180,11 +180,38 @@ export function parseLinearGradient(cssGradient) {
   };
 }
 
-export function parseLinearGradientLayers(cssBackgroundImage) {
-  return splitCssLayers(cssBackgroundImage)
-    .filter((layer) => /^linear-gradient\(/i.test(layer.trim()))
-    .map((layer) => parseLinearGradient(layer));
-}
+export function parseLinearGradientLayers(cssBackgroundImage) {
+  return splitCssLayers(cssBackgroundImage)
+    .filter((layer) => /^linear-gradient\(/i.test(layer.trim()))
+    .map((layer) => parseLinearGradient(layer));
+}
+
+export function parseGradientLayers(cssBackgroundImage, rect = null) {
+  return splitCssLayers(cssBackgroundImage)
+    .map((layer) => parseGradientLayer(layer, rect))
+    .filter(Boolean);
+}
+
+export function parseGradientLayer(cssGradient, rect = null) {
+  const source = String(cssGradient || '').trim();
+  if (/^linear-gradient\(/i.test(source)) {
+    return parseLinearGradient(source);
+  }
+  if (/^radial-gradient\(/i.test(source)) {
+    return parseRadialGradient(source, rect);
+  }
+  return null;
+}
+
+export function parseRadialGradient(cssGradient, rect = null) {
+  const geometry = parseRadialGradientGeometry(cssGradient, rect);
+
+  return {
+    type: 'GRADIENT_RADIAL',
+    gradientTransform: radialGradientTransform(geometry),
+    gradientStops: extractGradientStops(cssGradient),
+  };
+}
 
 function linearGradientTransform(cssGradient) {
   const angle = parseLinearGradientAngle(cssGradient);
@@ -228,26 +255,404 @@ function parseLinearGradientAngle(cssGradient) {
   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) {
+function extractGradientStops(css) {
+  const stopRegex = /(rgba?\([^)]+\)|#[0-9a-f]{3,8}|transparent)\s*([\d.]+%)?/gi;
+  const stops = [];
+  let match;
+
+  while ((match = stopRegex.exec(css)) !== null) {
+    const color = cssColorToFigma(match[1]);
+    const position = match[2] ? parseFloat(match[2]) / 100 : null;
+    stops.push({
+      color,
+      position: Number.isFinite(position) ? position : null,
+      rawColor: match[1],
+    });
+  }
+
+  if (stops.length === 0) {
+    return fallbackTransparentGradientStops();
+  }
+
+  return normalizeTransparentGradientStops(normalizeGradientStopPositions(stops))
+    .map((stop) => ({
+      color: stop.color,
+      position: stop.position,
+    }));
+}
+
+function normalizeGradientStopPositions(stops) {
+  const result = stops.map((stop) => ({ ...stop }));
+  const lastIndex = result.length - 1;
+
+  if (result[0].position === null) {
+    result[0].position = 0;
+  }
+  if (result[lastIndex].position === null) {
+    result[lastIndex].position = lastIndex === 0 ? result[0].position : 1;
+  }
+
+  let index = 0;
+  while (index < result.length) {
+    if (result[index].position !== null) {
+      index++;
+      continue;
+    }
+
+    const startIndex = index - 1;
+    let endIndex = index + 1;
+    while (endIndex < result.length && result[endIndex].position === null) {
+      endIndex++;
+    }
+
+    const startPosition = result[startIndex]?.position ?? 0;
+    const endPosition = result[endIndex]?.position ?? 1;
+    const gap = endIndex - startIndex;
+    for (let fillIndex = index; fillIndex < endIndex; fillIndex++) {
+      const step = fillIndex - startIndex;
+      result[fillIndex].position = startPosition + ((endPosition - startPosition) * step) / gap;
+    }
+
+    index = endIndex;
+  }
+
+  let previous = 0;
+  for (let stopIndex = 0; stopIndex < result.length; stopIndex++) {
+    const position = Number.isFinite(result[stopIndex].position) ? result[stopIndex].position : previous;
+    previous = Math.max(previous, Math.min(Math.max(position, 0), 1));
+    result[stopIndex].position = previous;
+  }
+
+  return result;
+}
+
+function normalizeTransparentGradientStops(stops) {
+  return stops.map((stop, index) => {
+    if ((stop.color?.a ?? 1) > 0) {
+      return stop;
+    }
+
+    const neighboringColor = findNeighboringOpaqueStopColor(stops, index);
+    if (!neighboringColor) {
+      return stop;
+    }
+
+    return {
+      ...stop,
+      color: {
+        r: neighboringColor.r,
+        g: neighboringColor.g,
+        b: neighboringColor.b,
+        a: 0,
+      },
+    };
+  });
+}
+
+function findNeighboringOpaqueStopColor(stops, index) {
+  for (let before = index - 1; before >= 0; before--) {
+    if ((stops[before].color?.a ?? 1) > 0) {
+      return stops[before].color;
+    }
+  }
+  for (let after = index + 1; after < stops.length; after++) {
+    if ((stops[after].color?.a ?? 1) > 0) {
+      return stops[after].color;
+    }
+  }
+  return null;
+}
+
+function fallbackTransparentGradientStops() {
+  return [
+    { color: { r: 0, g: 0, b: 0, a: 0 }, position: 0 },
+    { color: { r: 0, g: 0, b: 0, a: 0 }, position: 1 },
+  ];
+}
+
+function parseRadialGradientGeometry(cssGradient, rect = null) {
+  const args = getGradientArguments(cssGradient);
+  const prelude = getRadialGradientPrelude(args);
+  const atParts = splitRadialPreludeAt(prelude);
+  const shape = /\bcircle\b/i.test(atParts.size) ? 'circle' : 'ellipse';
+  const size = atParts.size
+    .replace(/\b(circle|ellipse)\b/gi, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+  const center = parseRadialPosition(atParts.position, rect);
+  const radii = parseRadialRadii(size, shape, center, rect);
+
+  return {
+    center,
+    radiusX: Math.max(radii.radiusX, 0.0001),
+    radiusY: Math.max(radii.radiusY, 0.0001),
+  };
+}
+
+function getGradientArguments(cssGradient) {
+  const source = String(cssGradient || '').trim();
+  const openIndex = source.indexOf('(');
+  const closeIndex = source.lastIndexOf(')');
+  if (openIndex === -1 || closeIndex <= openIndex) {
+    return [];
+  }
+  return splitCssLayers(source.slice(openIndex + 1, closeIndex));
+}
+
+function getRadialGradientPrelude(args) {
+  const first = (args && args[0] ? String(args[0]) : '').trim();
+  return isRadialGradientPrelude(first) ? first : '';
+}
+
+function isRadialGradientPrelude(value) {
+  const source = String(value || '').trim();
+  if (!source) {
+    return false;
+  }
+  const lower = source.toLowerCase();
+  return /\bat\b/.test(lower)
+    || /\b(circle|ellipse|closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)\b/.test(lower)
+    || /^[\d.]+(?:%|px)?(?:\s+[\d.]+(?:%|px)?)?$/.test(lower);
+}
+
+function splitRadialPreludeAt(prelude) {
+  const source = String(prelude || '').trim();
+  const match = source.match(/\bat\b/i);
+  if (!match) {
+    return { size: source, position: '' };
+  }
+
+  return {
+    size: source.slice(0, match.index).trim(),
+    position: source.slice(match.index + match[0].length).trim(),
+  };
+}
+
+function parseRadialPosition(position, rect = null) {
+  const source = String(position || '').trim().toLowerCase();
+  if (!source) {
+    return { x: 0.5, y: 0.5 };
+  }
+
+  const tokens = source.split(/\s+/).filter(Boolean);
+  if (tokens.length >= 4) {
+    return parseFourTokenRadialPosition(tokens, rect);
+  }
+
+  let x = null;
+  let y = null;
+  for (const token of tokens) {
+    if (token === 'center') {
+      if (x === null) {
+        x = 0.5;
+      } else if (y === null) {
+        y = 0.5;
+      }
+    } else if (isHorizontalPositionKeyword(token)) {
+      x = positionKeywordToValue(token);
+    } else if (isVerticalPositionKeyword(token)) {
+      y = positionKeywordToValue(token);
+    } else if (x === null) {
+      x = parsePositionLength(token, rect?.width);
+    } else if (y === null) {
+      y = parsePositionLength(token, rect?.height);
+    }
+  }
+
+  return {
+    x: clampUnit(x === null ? 0.5 : x),
+    y: clampUnit(y === null ? 0.5 : y),
+  };
+}
+
+function parseFourTokenRadialPosition(tokens, rect = null) {
+  let x = 0.5;
+  let y = 0.5;
+  for (let index = 0; index < tokens.length - 1; index += 2) {
+    const edge = tokens[index];
+    const offset = tokens[index + 1];
+    if (edge === 'left') {
+      x = parsePositionLength(offset, rect?.width);
+    } else if (edge === 'right') {
+      x = 1 - parsePositionLength(offset, rect?.width);
+    } else if (edge === 'top') {
+      y = parsePositionLength(offset, rect?.height);
+    } else if (edge === 'bottom') {
+      y = 1 - parsePositionLength(offset, rect?.height);
+    }
+  }
+  return { x: clampUnit(x), y: clampUnit(y) };
+}
+
+function isHorizontalPositionKeyword(token) {
+  return token === 'left' || token === 'right';
+}
+
+function isVerticalPositionKeyword(token) {
+  return token === 'top' || token === 'bottom';
+}
+
+function positionKeywordToValue(token) {
+  if (token === 'left' || token === 'top') return 0;
+  if (token === 'right' || token === 'bottom') return 1;
+  return 0.5;
+}
+
+function parsePositionLength(token, axisLength) {
+  const source = String(token || '').trim();
+  if (source.endsWith('%')) {
+    return parseFloat(source) / 100;
+  }
+  if (source.endsWith('px') && axisLength > 0) {
+    return parsePx(source) / axisLength;
+  }
+  const value = parseFloat(source);
+  return Number.isFinite(value) ? value : 0.5;
+}
+
+function parseRadialRadii(size, shape, center, rect = null) {
+  const source = String(size || '').trim().toLowerCase();
+  const explicit = extractRadialSizeTokens(source);
+  if (explicit.length > 0) {
+    return parseExplicitRadialRadii(explicit, shape, rect);
+  }
+
+  const keyword = source.match(/\b(closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)\b/)?.[1]
+    || 'farthest-corner';
+  return keywordRadialRadii(keyword, shape, center, rect);
+}
+
+function extractRadialSizeTokens(value) {
+  return (String(value || '').match(/(?:\d*\.)?\d+(?:%|px)?/g) || [])
+    .filter((token) => Number.isFinite(parseFloat(token)));
+}
+
+function parseExplicitRadialRadii(tokens, shape, rect = null) {
+  if (shape === 'circle') {
+    if (String(tokens[0]).endsWith('px') && rect?.width > 0 && rect?.height > 0) {
+      const px = parsePx(tokens[0]);
+      return {
+        radiusX: px / rect.width,
+        radiusY: px / rect.height,
+      };
+    }
+
+    const radius = parseRadialRadiusToken(tokens[0], Math.min(rect?.width || 0, rect?.height || 0));
+    return { radiusX: radius, radiusY: radius };
+  }
+
+  return {
+    radiusX: parseRadialRadiusToken(tokens[0], rect?.width),
+    radiusY: parseRadialRadiusToken(tokens[1] || tokens[0], rect?.height),
+  };
+}
+
+function parseRadialRadiusToken(token, axisLength) {
+  const source = String(token || '').trim();
+  if (source.endsWith('%')) {
+    return parseFloat(source) / 100;
+  }
+  if (source.endsWith('px') && axisLength > 0) {
+    return parsePx(source) / axisLength;
+  }
+  const value = parseFloat(source);
+  return Number.isFinite(value) ? value : 0.5;
+}
+
+function keywordRadialRadii(keyword, shape, center, rect = null) {
+  if (shape === 'circle') {
+    const radiusPx = keywordCircleRadius(keyword, center, rect);
+    const width = rect?.width || 1;
+    const height = rect?.height || 1;
+    return {
+      radiusX: radiusPx / width,
+      radiusY: radiusPx / height,
+    };
+  }
+
+  const closestX = Math.min(center.x, 1 - center.x);
+  const closestY = Math.min(center.y, 1 - center.y);
+  const farthestX = Math.max(center.x, 1 - center.x);
+  const farthestY = Math.max(center.y, 1 - center.y);
+
+  if (keyword === 'closest-side' || keyword === 'contain') {
+    return { radiusX: closestX, radiusY: closestY };
+  }
+  if (keyword === 'farthest-side') {
+    return { radiusX: farthestX, radiusY: farthestY };
+  }
+  if (keyword === 'closest-corner') {
+    return { radiusX: closestX * Math.SQRT2, radiusY: closestY * Math.SQRT2 };
+  }
+  return { radiusX: farthestX * Math.SQRT2, radiusY: farthestY * Math.SQRT2 };
+}
+
+function keywordCircleRadius(keyword, center, rect = null) {
+  const width = rect?.width || 1;
+  const height = rect?.height || 1;
+  const left = center.x * width;
+  const right = (1 - center.x) * width;
+  const top = center.y * height;
+  const bottom = (1 - center.y) * height;
+
+  if (keyword === 'closest-side' || keyword === 'contain') {
+    return Math.min(left, right, top, bottom);
+  }
+  if (keyword === 'farthest-side') {
+    return Math.max(left, right, top, bottom);
+  }
+
+  const distances = [
+    Math.hypot(left, top),
+    Math.hypot(right, top),
+    Math.hypot(left, bottom),
+    Math.hypot(right, bottom),
+  ];
+  return keyword === 'closest-corner' ? Math.min(...distances) : Math.max(...distances);
+}
+
+function radialGradientTransform({ center, radiusX, radiusY }) {
+  const centerHandle = { x: center.x, y: center.y };
+  const radiusYHandle = { x: center.x, y: center.y + radiusY };
+  const radiusXHandle = { x: center.x + radiusX, y: center.y };
+  return gradientTransformFromHandles(centerHandle, radiusYHandle, radiusXHandle);
+}
+
+function gradientTransformFromHandles(start, end, width) {
+  const ux = end.x - start.x;
+  const uy = end.y - start.y;
+  const vx = width.x - start.x;
+  const vy = width.y - start.y;
+  const det = ux * vy - vx * uy;
+
+  if (Math.abs(det) < 1e-8) {
+    return [
+      [1, 0, 0],
+      [0, 1, 0],
+    ];
+  }
+
+  const m00 = vy / det;
+  const m01 = -vx / det;
+  const m10 = 0.5 * uy / det;
+  const m11 = -0.5 * ux / det;
+  const tx = -m00 * start.x - m01 * start.y;
+  const ty = 0.5 - m10 * start.x - m11 * start.y;
+
+  return [
+    [normalizeZero(m00), normalizeZero(m01), normalizeZero(tx)],
+    [normalizeZero(m10), normalizeZero(m11), normalizeZero(ty)],
+  ];
+}
+
+function clampUnit(value) {
+  if (!Number.isFinite(value)) {
+    return 0.5;
+  }
+  return Math.max(0, Math.min(value, 1));
+}
+
+export function splitCssLayers(css) {
   const source = String(css || '');
   const layers = [];
   let current = '';
@@ -419,25 +824,108 @@ function normalizeCssValue(value) {
 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 [];
+  return splitCssLayers(computed.boxShadow)
+    .map((layer) => parseShadowEffect(layer, true))
+    .filter(Boolean);
+}
 
-  const [, leadingColor, x, y, blur, spread = '0px', trailingColor] = parts;
-  const colorStr = leadingColor || trailingColor;
-  if (!colorStr) return [];
-  const color = cssColorToFigma(colorStr);
+export function mapTextEffects(computed = {}) {
+  return [
+    ...mapTextShadow(computed),
+    ...mapDropShadowFilter(computed),
+  ];
+}
+
+export function mapTextShadow(computed = {}) {
+  if (!computed.textShadow || computed.textShadow === 'none') return [];
+
+  return splitCssLayers(computed.textShadow)
+    .map((layer) => parseShadowEffect(layer, false))
+    .filter(Boolean);
+}
+
+export function mapDropShadowFilter(computed = {}) {
+  const filter = String(computed.filter || '').trim();
+  if (!filter || filter === 'none' || !filter.includes('drop-shadow(')) return [];
+
+  const effects = [];
+  const regex = /drop-shadow\(([^)]+(?:\)[^)]*)?)\)/gi;
+  let match;
+  while ((match = regex.exec(filter)) !== null) {
+    const effect = parseShadowEffect(match[1], false);
+    if (effect) {
+      effects.push(effect);
+    }
+  }
+  return effects;
+}
+
+const CSS_NAMED_COLORS = new Set([
+  'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond',
+  'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue',
+  'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey',
+  'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen',
+  'darkslate50', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink',
+  'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
+  'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink',
+  'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue',
+  'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink',
+  'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue',
+  'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid',
+  'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred',
+  'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab',
+  'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip',
+  'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue',
+  'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue',
+  'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise',
+  'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen', 'transparent'
+]);
+
+function parseShadowEffect(value, allowSpread) {
+  const source = String(value || '').trim();
+
+  // 1. Check for functional colors or hex colors
+  const fnOrHexRegex = /(?:rgba?|hsla?|hwb|oklab|oklch|color)\([^)]+\)|#[0-9a-fA-F]{3,8}/gi;
+  const fnOrHexMatches = source.match(fnOrHexRegex) || [];
+  let colorStr = fnOrHexMatches[0];
+
+  let withoutColor = source;
+  if (colorStr) {
+    withoutColor = source.replace(colorStr, ' ');
+  } else {
+    // 2. Check for named colors
+    const words = source.match(/\b[a-zA-Z-]+\b/g) || [];
+    for (const word of words) {
+      const lowerWord = word.toLowerCase();
+      if (CSS_NAMED_COLORS.has(lowerWord) && lowerWord !== 'inset') {
+        colorStr = word;
+        withoutColor = source.replace(new RegExp(`\\b${word}\\b`, 'gi'), ' ');
+        break;
+      }
+    }
+  }
+
+  if (!colorStr) return null;
+
+  // Clean "inset" keyword if present
+  const cleaned = withoutColor.replace(/\binset\b/gi, ' ').trim();
+  const lengths = cleaned.match(/-?[\d.]+(?:px|em|rem|vh|vw|%)?|0/gi) || [];
+  if (lengths.length < 2) return null;
 
-  return [{
+  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),
+    color: shadowColor(colorStr),
+    offset: { x: parsePx(lengths[0]), y: parsePx(lengths[1]) },
+    radius: parsePx(lengths[2] || '0px'),
+    spread: allowSpread ? parsePx(lengths[3] || '0px') : 0,
     visible: true,
     blendMode: 'NORMAL',
-  }];
+  };
+}
+
+function shadowColor(colorStr) {
+  const color = cssColorToFigma(colorStr);
+  return { r: color.r, g: color.g, b: color.b, a: color.a };
 }
 
 // ─── TYPOGRAPHY ───────────────────────────────────────────────────────────────
@@ -453,105 +941,107 @@ export function mapTypography(computed, fontMap = {}, parentComputed = null) {
 
   const font = fontMap?.[fontKey] ?? { family: familyRaw, style: 'Regular' };
   const fontSize = parsePx(computed.fontSize) || 16;
+  const effects = mapTextEffects(computed);
 
-  const result = {
-    fontName: font,
-    fontSize,
-    lineHeight: lineHeightToFigma(computed.lineHeight, computed.fontSize),
-    letterSpacing: {
-      value: letterSpacingToPx(computed.letterSpacing, computed.fontSize),
+  const result = {
+    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)
-    fills: isTransparentCssColor(computed.color)
-      ? []
-      : [solidPaint(computed.color)],
-    ...mapTextDecoration(computed),
-  };
-
-  if (shouldTruncateText(computed, parentComputed)) {
-    result.textTruncation = 'ENDING';
-  }
-
-  return result;
-}
-
-function mapTextDecoration(computed = {}) {
-  const line = String(computed.textDecorationLine || computed.textDecoration || '').toLowerCase();
-  const hasUnderline = line.includes('underline');
-  const hasStrikethrough = line.includes('line-through');
-  if (!hasUnderline && !hasStrikethrough) {
-    return {};
-  }
-
-  const result = {
-    textDecoration: hasUnderline ? 'UNDERLINE' : 'STRIKETHROUGH',
-  };
-
-  const style = mapTextDecorationStyle(computed.textDecorationStyle || computed.textDecoration);
-  if (style) {
-    result.textDecorationStyle = style;
-  }
-
-  const color = mapTextDecorationColor(computed.textDecorationColor);
-  if (color) {
-    result.textDecorationColor = color;
-  }
-
-  const thickness = mapTextDecorationThickness(computed.textDecorationThickness);
-  if (thickness) {
-    result.textDecorationThickness = thickness;
-  }
-
-  return result;
-}
-
-function mapTextDecorationStyle(value) {
-  const normalized = String(value || '').toLowerCase();
-  if (normalized.includes('dotted')) return 'DOTTED';
-  if (normalized.includes('wavy')) return 'WAVY';
-  if (normalized.includes('solid')) return 'SOLID';
-  return null;
-}
-
-function mapTextDecorationColor(value) {
-  if (!value || value === 'currentcolor' || value === 'currentColor') {
-    return null;
-  }
-
-  const color = cssColorToFigma(value);
-  if (color.a === 0) {
-    return null;
-  }
-
-  return {
-    value: {
-      type: 'SOLID',
-      color: { r: color.r, g: color.g, b: color.b },
-      opacity: color.a,
-    },
-  };
-}
-
-function mapTextDecorationThickness(value) {
-  const raw = String(value || '').trim().toLowerCase();
-  if (!raw || raw === 'auto' || raw === 'from-font') {
-    return null;
-  }
-
-  if (raw.endsWith('%')) {
-    const percent = parseFloat(raw);
-    return Number.isFinite(percent) ? { value: percent, unit: 'PERCENT' } : null;
-  }
-
-  const px = parsePx(raw);
-  return px > 0 ? { value: px, unit: 'PIXELS' } : null;
-}
-
-/**
- * Map -webkit-text-stroke to Figma strokes on a text node.
+    textCase: TEXT_CASE_MAP[computed.textTransform] ?? 'ORIGINAL',
+    // -webkit-text-stroke → outline text (color: transparent + stroke)
+    fills: isTransparentCssColor(computed.color)
+      ? [solidPaint('transparent')]
+      : [solidPaint(computed.color)],
+    ...mapTextDecoration(computed),
+    ...(effects.length ? { effects } : {}),
+  };
+
+  if (shouldTruncateText(computed, parentComputed)) {
+    result.textTruncation = 'ENDING';
+  }
+
+  return result;
+}
+
+function mapTextDecoration(computed = {}) {
+  const line = String(computed.textDecorationLine || computed.textDecoration || '').toLowerCase();
+  const hasUnderline = line.includes('underline');
+  const hasStrikethrough = line.includes('line-through');
+  if (!hasUnderline && !hasStrikethrough) {
+    return {};
+  }
+
+  const result = {
+    textDecoration: hasUnderline ? 'UNDERLINE' : 'STRIKETHROUGH',
+  };
+
+  const style = mapTextDecorationStyle(computed.textDecorationStyle || computed.textDecoration);
+  if (style) {
+    result.textDecorationStyle = style;
+  }
+
+  const color = mapTextDecorationColor(computed.textDecorationColor);
+  if (color) {
+    result.textDecorationColor = color;
+  }
+
+  const thickness = mapTextDecorationThickness(computed.textDecorationThickness);
+  if (thickness) {
+    result.textDecorationThickness = thickness;
+  }
+
+  return result;
+}
+
+function mapTextDecorationStyle(value) {
+  const normalized = String(value || '').toLowerCase();
+  if (normalized.includes('dotted')) return 'DOTTED';
+  if (normalized.includes('wavy')) return 'WAVY';
+  if (normalized.includes('solid')) return 'SOLID';
+  return null;
+}
+
+function mapTextDecorationColor(value) {
+  if (!value || value === 'currentcolor' || value === 'currentColor') {
+    return null;
+  }
+
+  const color = cssColorToFigma(value);
+  if (color.a === 0) {
+    return null;
+  }
+
+  return {
+    value: {
+      type: 'SOLID',
+      color: { r: color.r, g: color.g, b: color.b },
+      opacity: color.a,
+    },
+  };
+}
+
+function mapTextDecorationThickness(value) {
+  const raw = String(value || '').trim().toLowerCase();
+  if (!raw || raw === 'auto' || raw === 'from-font') {
+    return null;
+  }
+
+  if (raw.endsWith('%')) {
+    const percent = parseFloat(raw);
+    return Number.isFinite(percent) ? { value: percent, unit: 'PERCENT' } : null;
+  }
+
+  const px = parsePx(raw);
+  return px > 0 ? { value: px, unit: 'PIXELS' } : null;
+}
+
+/**
+ * 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,

src/figma/font-resolver.js

@@ -10,21 +10,21 @@
 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',
-                        'Thin Italic', 'ExtraLight Italic', 'Light Italic', 'Italic', 'Medium Italic',
-                        'SemiBold Italic', 'Bold Italic', 'ExtraBold Italic', 'Black Italic'],
-  'DM Sans': ['Thin', 'ExtraLight', 'Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black',
-               'Thin Italic', 'ExtraLight Italic', 'Light Italic', 'Italic', 'Medium Italic',
-               'SemiBold Italic', 'Bold Italic', 'ExtraBold Italic', 'Black Italic'],
-  'Bebas Neue': ['Regular'],
-  'Inter': ['Thin', 'ExtraLight', 'Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black',
-             'Thin Italic', 'ExtraLight Italic', 'Light Italic', 'Italic', 'Medium Italic',
-             'SemiBold Italic', 'Bold Italic', 'ExtraBold Italic', 'Black Italic'],
-  Georgia: ['Regular', 'Italic', 'Bold', 'Bold Italic'],
-  'Courier New': ['Regular', 'Italic', 'Bold', 'Bold Italic'],
-};
+// Known Google Fonts available in Figma + their available styles
+const FIGMA_FONT_STYLES = {
+  'Playfair Display': ['Thin', 'ExtraLight', 'Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black',
+                        'Thin Italic', 'ExtraLight Italic', 'Light Italic', 'Italic', 'Medium Italic',
+                        'SemiBold Italic', 'Bold Italic', 'ExtraBold Italic', 'Black Italic'],
+  'DM Sans': ['Thin', 'ExtraLight', 'Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black',
+               'Thin Italic', 'ExtraLight Italic', 'Light Italic', 'Italic', 'Medium Italic',
+               'SemiBold Italic', 'Bold Italic', 'ExtraBold Italic', 'Black Italic'],
+  'Bebas Neue': ['Regular'],
+  'Inter': ['Thin', 'ExtraLight', 'Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black',
+             'Thin Italic', 'ExtraLight Italic', 'Light Italic', 'Italic', 'Medium Italic',
+             'SemiBold Italic', 'Bold Italic', 'ExtraBold Italic', 'Black Italic'],
+  Georgia: ['Regular', 'Italic', 'Bold', 'Bold Italic'],
+  'Courier New': ['Regular', 'Italic', 'Bold', 'Bold Italic'],
+};
 
 /**
  * @param {object} domTree
@@ -33,34 +33,34 @@ const FIGMA_FONT_STYLES = {
 export async function resolveFonts(domTree) {
   const needed = new Set();
 
-  walk(domTree, (node) => {
-    const { fontFamily, fontWeight, fontStyle } = node.computed ?? {};
-    if (fontFamily) {
-      const key = `${fontFamily}|${fontWeight ?? '400'}|${fontStyle ?? 'normal'}`;
-      needed.add(key);
-    }
-
-    for (const run of node.textRuns ?? []) {
-      const runFamily = run.computed?.fontFamily;
-      if (!runFamily) continue;
-      const key = `${runFamily}|${run.computed?.fontWeight ?? '400'}|${run.computed?.fontStyle ?? 'normal'}`;
-      needed.add(key);
-    }
-
-    for (const pseudo of [node.pseudo?.before, node.pseudo?.after]) {
-      const pseudoFamily = pseudo?.computed?.fontFamily;
-      if (!pseudoFamily) continue;
-      const key = `${pseudoFamily}|${pseudo.computed?.fontWeight ?? '400'}|${pseudo.computed?.fontStyle ?? 'normal'}`;
-      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;
-  }
+  walk(domTree, (node) => {
+    const { fontFamily, fontWeight, fontStyle } = node.computed ?? {};
+    if (fontFamily) {
+      const key = `${fontFamily}|${fontWeight ?? '400'}|${fontStyle ?? 'normal'}`;
+      needed.add(key);
+    }
+
+    for (const run of node.textRuns ?? []) {
+      const runFamily = run.computed?.fontFamily;
+      if (!runFamily) continue;
+      const key = `${runFamily}|${run.computed?.fontWeight ?? '400'}|${run.computed?.fontStyle ?? 'normal'}`;
+      needed.add(key);
+    }
+
+    for (const pseudo of [node.pseudo?.before, node.pseudo?.after]) {
+      const pseudoFamily = pseudo?.computed?.fontFamily;
+      if (!pseudoFamily) continue;
+      const key = `${pseudoFamily}|${pseudo.computed?.fontWeight ?? '400'}|${pseudo.computed?.fontStyle ?? 'normal'}`;
+      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;
 }
@@ -69,104 +69,104 @@ export async function resolveFonts(domTree) {
  * Strip quotes from CSS font-family string.
  * e.g. "'Playfair Display', serif" → "Playfair Display"
  */
-function cleanFamilyName(css) {
-  return getFontFamilyStack(css)[0] ?? '';
-}
-
-/**
- * Resolve to a specific Figma font, with fallback chain.
- */
-function resolveFont(cssFamily, weightStr, isItalic) {
-  const stack = getFontFamilyStack(cssFamily);
-  const family = cleanFamilyName(cssFamily);
-  const weight = parseInt(weightStr) || 400;
-  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') {
-      candidates.push('Georgia');
-    } else if (generic === 'monospace') {
-      candidates.push('Courier New');
-    } else {
-      candidates.push('Inter');
-    }
-  }
-
-  if (family && family !== candidates[0] && FIGMA_FONT_STYLES[family]) {
-    candidates.push(family);
-  }
-
-  if (!candidates.includes('Inter')) {
-    candidates.push('Inter');
-  }
-
-  for (const candidate of candidates) {
-    const styles = FIGMA_FONT_STYLES[candidate];
-    if (!styles) {
-      return { family: candidate, style: targetStyle };
-    }
-    if (styles.includes(targetStyle)) {
-      return { family: candidate, style: targetStyle };
-    }
-    if (styles.includes('Regular')) {
-      return { family: candidate, style: 'Regular' };
-    }
-  }
-
-  return { family: 'Inter', style: 'Regular' };
-}
-
-function getFontFamilyStack(cssFamily) {
-  return String(cssFamily || '')
-    .split(',')
-    .map((part) => part.trim().replace(/['"]/g, ''))
-    .filter(Boolean);
-}
-
-function getGenericFontFamily(stack) {
-  if (!Array.isArray(stack) || stack.length === 0) {
-    return null;
-  }
-
-  const last = stack[stack.length - 1].toLowerCase();
-  if (last === 'serif' || last === 'sans-serif' || last === 'monospace') {
-    return last;
-  }
-
-  return null;
-}
-
-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';
-}
+function cleanFamilyName(css) {
+  return getFontFamilyStack(css)[0] ?? '';
+}
+
+/**
+ * Resolve to a specific Figma font, with fallback chain.
+ */
+function resolveFont(cssFamily, weightStr, isItalic) {
+  const stack = getFontFamilyStack(cssFamily);
+  const family = cleanFamilyName(cssFamily);
+  const weight = parseInt(weightStr) || 400;
+  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') {
+      candidates.push('Georgia');
+    } else if (generic === 'monospace') {
+      candidates.push('Courier New');
+    } else {
+      candidates.push('Inter');
+    }
+  }
+
+  if (family && family !== candidates[0] && FIGMA_FONT_STYLES[family]) {
+    candidates.push(family);
+  }
+
+  if (!candidates.includes('Inter')) {
+    candidates.push('Inter');
+  }
+
+  for (const candidate of candidates) {
+    const styles = FIGMA_FONT_STYLES[candidate];
+    if (!styles) {
+      return { family: candidate, style: targetStyle };
+    }
+    if (styles.includes(targetStyle)) {
+      return { family: candidate, style: targetStyle };
+    }
+    if (styles.includes('Regular')) {
+      return { family: candidate, style: 'Regular' };
+    }
+  }
+
+  return { family: 'Inter', style: 'Regular' };
+}
+
+function getFontFamilyStack(cssFamily) {
+  return String(cssFamily || '')
+    .split(',')
+    .map((part) => part.trim().replace(/['"]/g, ''))
+    .filter(Boolean);
+}
+
+function getGenericFontFamily(stack) {
+  if (!Array.isArray(stack) || stack.length === 0) {
+    return null;
+  }
+
+  const last = stack[stack.length - 1].toLowerCase();
+  if (last === 'serif' || last === 'sans-serif' || last === 'monospace') {
+    return last;
+  }
+
+  return null;
+}
+
+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

@@ -15,11 +15,12 @@ import {
   mapBackgroundColor,
   mapBorder,
   mapBoxShadow,
+  mapDropShadowFilter,
   mapTypography,
   mapTextStroke,
   shouldTruncateText,
-  parseLinearGradient,
-  parseLinearGradientLayers,
+  parseGradientLayers,
+  splitCssLayers,
 } from './css-to-figma.js';
 import { cssColorToFigma, solidPaint as colorSolidPaint } from '../utils/color.js';
 import { parsePx } from '../utils/units.js';
@@ -39,6 +40,15 @@ export function buildFigmaTree({ annotated }, { pseudoElements = [], gridStrateg
 
 function buildNode(node, parentContext, ctx, path) {
   const { computed, rect, tag, text, textRuns = [], children = [], classList, isTextContainer, _pageLayout, _role, svgMarkup, imageData } = node;
+
+  let liIndex;
+  if (tag === 'li' && parentContext?.sourceNode?.children) {
+    const siblings = parentContext.sourceNode.children.filter(c => c.tag === 'li');
+    const idx = siblings.indexOf(node);
+    if (idx !== -1) {
+      liIndex = idx + 1;
+    }
+  }
   const rawResolvedRect = resolveRenderedRect(node, parentContext);
   const parentResolvedRect = parentContext?.resolvedRect ?? null;
   const isLeafText = Boolean(text) && children.length === 0;
@@ -53,14 +63,56 @@ function buildNode(node, parentContext, ctx, path) {
   const isAbsolute = isAbsoluteLikeNode(node) || node._layoutPositioning === 'ABSOLUTE';
   const childLayoutSizing = mapChildLayoutSizing(node, parentContext, resolvedRect);
 
+  const transform = computed.transform || 'none';
+  let { rotation } = parseRotationAndScale(transform);
+
+  const writingMode = computed.writingMode || 'horizontal-tb';
+  const isVerticalWritingMode = writingMode.startsWith('vertical-');
+
+  let unrotatedWidth = resolvedRect.width;
+  let unrotatedHeight = resolvedRect.height;
+
+  if (isVerticalWritingMode && Math.abs(rotation) <= 0.01) {
+    rotation = -90;
+    unrotatedWidth = resolvedRect.offsetHeight || resolvedRect.height;
+    unrotatedHeight = resolvedRect.offsetWidth || resolvedRect.width;
+  } else if (Math.abs(rotation) > 0.01) {
+    if (resolvedRect.offsetWidth && resolvedRect.offsetHeight) {
+      unrotatedWidth = resolvedRect.offsetWidth;
+      unrotatedHeight = resolvedRect.offsetHeight;
+    } else if (Math.abs(Math.abs(rotation) - 90) < 5) {
+      unrotatedWidth = resolvedRect.height;
+      unrotatedHeight = resolvedRect.width;
+    }
+  }
+
+  let figmaX = resolvedRect.x - (parentResolvedRect?.x ?? 0);
+  let figmaY = resolvedRect.y - (parentResolvedRect?.y ?? 0);
+
+  if (Math.abs(rotation) > 0.01) {
+    const rad = (rotation * Math.PI) / 180;
+    const cosVal = Math.cos(rad);
+    const sinVal = Math.sin(rad);
+
+    const cx = resolvedRect.x + resolvedRect.width / 2;
+    const cy = resolvedRect.y + resolvedRect.height / 2;
+
+    const absoluteFigmaX = cx - (unrotatedWidth / 2) * cosVal + (unrotatedHeight / 2) * sinVal;
+    const absoluteFigmaY = cy - (unrotatedWidth / 2) * sinVal - (unrotatedHeight / 2) * cosVal;
+
+    figmaX = absoluteFigmaX - (parentResolvedRect?.x ?? 0);
+    figmaY = absoluteFigmaY - (parentResolvedRect?.y ?? 0);
+  }
+
   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),
+    x: Math.round(figmaX),
+    y: Math.round(figmaY),
+    width: Math.round(unrotatedWidth),
+    height: Math.round(unrotatedHeight),
+    ...(Math.abs(rotation) > 0.01 ? { rotation: roundFloat(rotation, 2) } : {}),
     ...(isAbsolute ? { layoutPositioning: 'ABSOLUTE' } : {}),
     ...childLayoutSizing,
   };
@@ -83,7 +135,7 @@ function buildNode(node, parentContext, ctx, path) {
       opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
       ...mapBorderRadius(computed, rect),
       ...mapBorder(computed),
-      effects: mapBoxShadow(computed),
+      effects: mapVisualEffects(computed),
       ...(computed.mixBlendMode && computed.mixBlendMode !== 'normal' ? {
         blendMode: computed.mixBlendMode.toUpperCase().replace(/-/g, '_'),
       } : {}),
@@ -100,7 +152,7 @@ function buildNode(node, parentContext, ctx, path) {
       typography.textTruncation = 'ENDING';
     }
 
-    return {
+    const textNode = {
       ...base,
       characters: text,
       ...typography,
@@ -109,6 +161,12 @@ function buildNode(node, parentContext, ctx, path) {
       textRuns: buildTextRuns(textRuns, ctx.fontMap),
       opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
     };
+
+    if (parentContext?.sourceNode?.tag === 'li' && parentContext?.parentLayout?.layoutMode === 'HORIZONTAL') {
+      textNode._forceAutoWidth = true;
+    }
+
+    return textNode;
   }
 
   // Frame node
@@ -117,11 +175,38 @@ function buildNode(node, parentContext, ctx, path) {
   const isInlineBlock = computed.display === 'inline-block';
   const flexLayoutInfo = isFlex ? getRenderableFlexLayout(node) : null;
 
-  const layout = isFlex
+  let layout = isFlex
     ? flexLayoutInfo?.layout
     : isInlineBlock
       ? getRenderableInlineLayout(node)
       : null;
+
+  if (!layout && tag === 'li' && (node.pseudo?.before || node.pseudoChildren?.some(p => p.name && (p.name === 'before' || p.name.endsWith('::before'))))) {
+    const children = Array.isArray(node.children) ? node.children.filter(Boolean) : [];
+    const hasOnlyInlineOrSimpleChildren = children.every(child => 
+      child.tag === 'span' || 
+      child.tag === 'a' || 
+      child.tag === 'code' || 
+      child.tag === 'strong' || 
+      child.tag === 'em' ||
+      child.tag === 'i' ||
+      child.tag === 'b' ||
+      child.tag === 'u' ||
+      child.tag === 'small' ||
+      child.tag === 'p' ||
+      child.isTextContainer ||
+      !child.tag
+    );
+
+    if (hasOnlyInlineOrSimpleChildren) {
+      layout = {
+        layoutMode: 'HORIZONTAL',
+        primaryAxisAlignItems: 'MIN',
+        counterAxisAlignItems: 'CENTER',
+        itemSpacing: 12,
+      };
+    }
+  }
   const flexAutoMarginLayout = isFlex ? getFlexAutoMarginLayoutOverride(node, layout) : null;
   const nativeControlLayout = getNativeControlLayout(node);
 
@@ -137,10 +222,10 @@ function buildNode(node, parentContext, ctx, path) {
   let fills = mapBackgroundColor(computed);
   const backgroundPattern = detectBackgroundPattern(computed);
 
-  // Handle linear-gradient in backgroundImage
-  if (!backgroundPattern && computed.backgroundImage && computed.backgroundImage.includes('linear-gradient')) {
+  // Handle supported CSS gradient layers in backgroundImage.
+  if (!backgroundPattern && computed.backgroundImage) {
     try {
-      fills.push(parseLinearGradient(computed.backgroundImage));
+      fills.push(...parseGradientLayers(computed.backgroundImage, rect));
     } catch { /* skip malformed gradients */ }
   }
 
@@ -159,7 +244,7 @@ function buildNode(node, parentContext, ctx, path) {
     ...mapOverflow(computed),
     ...mapBorderRadius(computed, rect),
     ...mapBorder(computed),
-    effects: mapBoxShadow(computed),
+    effects: mapVisualEffects(computed),
     opacity: roundFloat(parseFloat(computed.opacity ?? 1)),
     ...(layout || {}),
     ...(flexAutoMarginLayout || {}),
@@ -169,6 +254,15 @@ function buildNode(node, parentContext, ctx, path) {
     } : {}),
   };
 
+  if (layout && tag === 'li') {
+    const pseudoBefore = node.pseudo?.before || node.pseudoChildren?.find(p => p.name === 'before' || p.name?.endsWith('::before'));
+    const isAbsolutePseudo = pseudoBefore?.computed?.position === 'absolute';
+    if (isAbsolutePseudo) {
+      const originalPaddingLeft = frameNode.paddingLeft || 0;
+      frameNode.paddingLeft = Math.max(0, originalPaddingLeft - 24);
+    }
+  }
+
   if (_pageLayout || tag === 'body') {
     frameNode.clipsContent = true;
   }
@@ -193,7 +287,11 @@ function buildNode(node, parentContext, ctx, path) {
   const childTextTruncationContext = usesTableCellAutoWidth ? null : getChildTextTruncationContext(node, resolvedRect, inheritedTextTruncationContext);
 
   if (isLeafText) {
-    childNodes.push(buildEmbeddedTextNode(node, ctx, `${path}.text`, resolvedRect, 'text', childTextTruncationContext, usesTableCellAutoWidth));
+    const textNode = buildEmbeddedTextNode(node, ctx, `${path}.text`, resolvedRect, 'text', childTextTruncationContext, usesTableCellAutoWidth);
+    if (parentContext?.sourceNode?.tag === 'li' && parentContext?.parentLayout?.layoutMode === 'HORIZONTAL') {
+      textNode._forceAutoWidth = true;
+    }
+    childNodes.push(textNode);
   }
 
   const controlTextNode = buildFormControlTextNode(node, ctx, `${path}.control`, resolvedRect, childTextTruncationContext, usesTableCellAutoWidth);
@@ -216,11 +314,17 @@ function buildNode(node, parentContext, ctx, path) {
 
   const pseudoBefore = renderablePseudoChildren
     .filter((pseudo) => pseudo.zOrder !== 'top')
-    .map((pseudo, index) => buildPseudoNode(pseudo, `${path}.pseudo.${index}`, ctx))
+    .map((pseudo, index) => buildPseudoNode(pseudo, `${path}.pseudo.${index}`, ctx, {
+      participatesInLayout: shouldPseudoParticipateInParentLayout(node, pseudo, layout),
+      liIndex,
+    }))
     .filter(Boolean);
   const pseudoTop = renderablePseudoChildren
     .filter((pseudo) => pseudo.zOrder === 'top')
-    .map((pseudo, index) => buildPseudoNode(pseudo, `${path}.pseudoTop.${index}`, ctx))
+    .map((pseudo, index) => buildPseudoNode(pseudo, `${path}.pseudoTop.${index}`, ctx, {
+      participatesInLayout: shouldPseudoParticipateInParentLayout(node, pseudo, layout),
+      liIndex,
+    }))
     .filter(Boolean);
 
   const orderedChildren = getOrderedChildren(children);
@@ -234,6 +338,7 @@ function buildNode(node, parentContext, ctx, path) {
           textTruncationContext: childTextTruncationContext,
           tableCellAutoWidth: usesTableCellAutoWidth,
           surfaceFills: nextSurfaceFills,
+          parentLayout: layout,
         }, ctx, `${path}.${index}`),
     }))
     .filter((pair) => Boolean(pair.built));
@@ -253,6 +358,16 @@ function buildNode(node, parentContext, ctx, path) {
 function mapChildLayoutSizing(node, parentContext, resolvedRect) {
   const parentNode = parentContext?.sourceNode;
   const parentComputed = parentNode?.computed;
+
+  if (parentNode?.tag === 'li' && parentContext?.parentLayout?.layoutMode === 'HORIZONTAL') {
+    const isPseudo = node._isPseudo || node.name === 'before' || node.name === 'after' || node.name?.startsWith('[pseudo]');
+    if (!isPseudo) {
+      return {
+        layoutSizingHorizontal: 'FILL',
+      };
+    }
+  }
+
   if (!node || !resolvedRect || !parentContext?.resolvedRect || !isFlexDisplay(parentComputed?.display) || isAbsoluteLikeNode(node)) {
     return {};
   }
@@ -425,11 +540,16 @@ function getNativePseudoChildren(node) {
   return result;
 }
 
-function buildPseudoNode(pseudo, path, ctx = {}) {
+function buildPseudoNode(pseudo, path, ctx = {}, options = {}) {
   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) : [];
+  let pseudoContent = pseudo.content;
+  if (pseudoContent && pseudoContent.includes('counter(')) {
+    pseudoContent = resolveCounterText(pseudoContent, options.liIndex || 1);
+  }
+  const isTextPseudo = pseudo.type === 'text' && Boolean(pseudoContent);
+  const pseudoBackgrounds = isTextPseudo ? [] : buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor, pseudo);
+  const pseudoBackgroundPattern = isTextPseudo ? null : detectBackgroundPattern(pseudo.computed);
+  const pseudoEffects = pseudo.computed ? mapVisualEffects(pseudo.computed) : [];
   const pseudoStrokes = pseudo.computed ? mapBorder(pseudo.computed) : {};
   const textTypography = pseudo.computed
     ? {
@@ -447,36 +567,65 @@ function buildPseudoNode(pseudo, path, ctx = {}) {
           : [colorSolidPaint('#ffffff')],
       };
 
+  let pseudoWidth = pseudo.width;
+  let pseudoHeight = pseudo.height;
+  if (isTextPseudo && pseudoContent && options.liIndex) {
+    const fontSize = textTypography.fontSize || 16;
+    const estimatedWidth = Math.ceil(pseudoContent.length * fontSize * 0.65) + 4;
+    const estimatedHeight = Math.ceil(fontSize * 1.2);
+    if (pseudoWidth > estimatedWidth) {
+      pseudoWidth = estimatedWidth;
+    }
+    if (pseudoHeight > estimatedHeight) {
+      pseudoHeight = estimatedHeight;
+    }
+  }
+
   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,
-    ...(isTextPseudo ? { clipsContent: false } : {}),
-    ...pseudoStrokes,
+    width: Math.round(pseudoWidth),
+    height: Math.round(pseudoHeight),
+    ...(!options.participatesInLayout ? { layoutPositioning: 'ABSOLUTE' } : {}),
+    opacity: roundFloat(pseudo.opacity ?? 1),
+    fills: pseudoBackgrounds,
+    ...(pseudoBackgroundPattern ? { _backgroundPattern: pseudoBackgroundPattern } : {}),
+    ...(isTextPseudo ? { clipsContent: false } : {}),
+    ...pseudoStrokes,
     effects: pseudoEffects,
     _isPseudo: true,
     _pseudoType: pseudo.type,
     _pseudoPosition: pseudo.position,
-    children: pseudo.content ? [{
+    children: pseudoContent ? [{
       id: `${pseudoId}-content`,
       name: 'content',
       type: 'TEXT',
-      characters: pseudo.content,
+      characters: pseudoContent,
       x: 0, y: 0,
-      width: pseudo.width,
-      height: pseudo.height,
+      width: pseudoWidth,
+      height: pseudoHeight,
       ...textTypography,
     }] : [],
   };
 }
 
+function shouldPseudoParticipateInParentLayout(node, pseudo, layout = null) {
+  const hasAutoLayout = isFlexDisplay(node.computed?.display) || Boolean(layout);
+  if (!node || !pseudo || !hasAutoLayout) {
+    return false;
+  }
+
+  if (node.tag === 'li' && layout) {
+    return true;
+  }
+
+  const position = pseudo.position || pseudo.computed?.position || 'static';
+  return position !== 'absolute' && position !== 'fixed';
+}
+
 function buildFormControlTextNode(node, ctx, path, resolvedRect = null, textTruncationContext = null, tableCellAutoWidth = false) {
   const rendered = resolveFormControlText(node.formControl);
   if (!rendered) {
@@ -629,25 +778,29 @@ function mergeFormControlTextStyles(baseComputed, overrideComputed) {
   return merged;
 }
 
-function buildPseudoBackgrounds(computed, fallbackFillColor) {
-  if (!computed) {
-    return fallbackFillColor && fallbackFillColor !== 'noise-texture'
-      ? [colorSolidPaint(fallbackFillColor)]
-      : [];
+function buildPseudoBackgrounds(computed, fallbackFillColor, rect = null) {
+  if (!computed) {
+    return fallbackFillColor && fallbackFillColor !== 'noise-texture'
+      ? [colorSolidPaint(fallbackFillColor)]
+      : [];
+  }
+
+  if (detectBackgroundPattern(computed)) {
+    return mapBackgroundColor(computed);
   }
 
   const fills = mapBackgroundColor(computed);
-  if (computed.backgroundImage && computed.backgroundImage.includes('linear-gradient')) {
-    fills.push(...parseLinearGradientLayers(computed.backgroundImage));
-  }
-
-  // A pseudo box inherits `color` from its parent, but that text color is not a
-  // background paint. Unsupported decorative backgrounds should stay transparent.
-  return fills;
-}
+  if (computed.backgroundImage) {
+    fills.push(...parseGradientLayers(computed.backgroundImage, rect));
+  }
+
+  // A pseudo box inherits `color` from its parent, but that text color is not a
+  // background paint. Unsupported decorative backgrounds should stay transparent.
+  return fills;
+}
 
 function buildMergedPseudoBackgrounds(pseudo) {
-  const paints = buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor);
+  const paints = buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor, pseudo);
   const opacity = Number.isFinite(pseudo.opacity) ? pseudo.opacity : 1;
   return paints.map((paint) => applyPaintOpacity(paint, opacity));
 }
@@ -657,6 +810,10 @@ function shouldMergePseudoIntoParent(node, pseudo) {
     return false;
   }
 
+  if (detectBackgroundPattern(pseudo.computed)) {
+    return false;
+  }
+
   const position = pseudo.position;
   if (position !== 'absolute' && position !== 'fixed') {
     return false;
@@ -679,7 +836,7 @@ function shouldMergePseudoIntoParent(node, pseudo) {
     return false;
   }
 
-  return buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor).length > 0;
+  return buildPseudoBackgrounds(pseudo.computed, pseudo.fillColor, pseudo).length > 0;
 }
 
 function isTransparentCssBackground(computed) {
@@ -710,6 +867,13 @@ function clonePaints(paints) {
   return (paints || []).map((paint) => JSON.parse(JSON.stringify(paint)));
 }
 
+function mapVisualEffects(computed = {}) {
+  return [
+    ...mapBoxShadow(computed),
+    ...mapDropShadowFilter(computed),
+  ];
+}
+
 function isPaginationNode(node) {
   if (!node) {
     return false;
@@ -1712,28 +1876,267 @@ function mapFlexTextAxisAlignment(value, axisRole) {
 }
 
 function detectBackgroundPattern(computed) {
+  if (!computed) {
+    return null;
+  }
+
   const backgroundImage = computed.backgroundImage || '';
   const backgroundSize = computed.backgroundSize || '';
-  if (!backgroundImage.includes('linear-gradient') || !backgroundSize.includes('px')) {
+  if (!backgroundImage.includes('linear-gradient')) {
     return null;
   }
 
-  const gradientCount = (backgroundImage.match(/linear-gradient\(/g) || []).length;
-  if (gradientCount < 2) {
+  const repeatingPattern = detectRepeatingLinearGridPattern(backgroundImage);
+  if (repeatingPattern) {
+    return repeatingPattern;
+  }
+
+  return detectSizedLinearGridPattern(backgroundImage, backgroundSize);
+}
+
+function detectSizedLinearGridPattern(backgroundImage, backgroundSize) {
+  if (!String(backgroundSize || '').includes('px')) {
     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) {
+  const layers = splitCssLayers(backgroundImage)
+    .filter((layer) => /^linear-gradient\(/i.test(layer.trim()));
+  if (layers.length < 2) {
+    return null;
+  }
+
+  const size = parseBackgroundGridSize(backgroundSize);
+  const color = findVisibleCssColor(backgroundImage);
+  if (!size || !color) {
     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]),
+    cellWidth: size.width,
+    cellHeight: size.height,
+    strokeWeight: detectGridStrokeWeight(layers) || 1,
+    paint: colorSolidPaint(color),
+    verticalLines: true,
+    horizontalLines: true,
   };
 }
+
+function detectRepeatingLinearGridPattern(backgroundImage) {
+  const layers = splitCssLayers(backgroundImage)
+    .map((layer) => parseRepeatingLinearGridLayer(layer))
+    .filter(Boolean);
+
+  if (layers.length === 0) {
+    return null;
+  }
+
+  const vertical = layers.find((layer) => layer.axis === 'x');
+  const horizontal = layers.find((layer) => layer.axis === 'y');
+  if (!vertical && !horizontal) {
+    return null;
+  }
+
+  const first = vertical || horizontal;
+  return {
+    kind: 'grid',
+    cellWidth: Math.max(Math.round(vertical?.cellSize || horizontal?.cellSize || 1), 1),
+    cellHeight: Math.max(Math.round(horizontal?.cellSize || vertical?.cellSize || 1), 1),
+    strokeWeight: Math.max(Math.round(Math.min(
+      vertical?.strokeWeight || horizontal?.strokeWeight || 1,
+      horizontal?.strokeWeight || vertical?.strokeWeight || 1
+    )), 1),
+    paint: colorSolidPaint((vertical || horizontal).color),
+    verticalLines: Boolean(vertical),
+    horizontalLines: Boolean(horizontal),
+  };
+}
+
+function parseRepeatingLinearGridLayer(layer) {
+  const source = String(layer || '').trim();
+  if (!/^repeating-linear-gradient\(/i.test(source)) {
+    return null;
+  }
+
+  const color = findVisibleCssColor(source);
+  const positions = extractPxPositions(source);
+  if (!color || positions.length < 2) {
+    return null;
+  }
+
+  const axis = getLinearGradientAxis(source);
+  const unique = Array.from(new Set(positions.map((value) => roundFloat(value, 3)))).sort((a, b) => a - b);
+  const cellSize = Math.max(...unique);
+  const strokeWeight = getSmallestPositiveGap(unique) || 1;
+  if (!Number.isFinite(cellSize) || cellSize <= 0) {
+    return null;
+  }
+
+  return { axis, cellSize, strokeWeight, color };
+}
+
+function parseBackgroundGridSize(backgroundSize) {
+  const values = extractPxPositions(String(backgroundSize || '').split(',')[0] || '');
+  if (values.length === 0) {
+    return null;
+  }
+
+  return {
+    width: Math.max(Math.round(values[0]), 1),
+    height: Math.max(Math.round(values[1] || values[0]), 1),
+  };
+}
+
+function detectGridStrokeWeight(layers) {
+  const weights = [];
+  for (const layer of layers) {
+    const positions = Array.from(new Set(extractPxPositions(layer))).sort((a, b) => a - b);
+    const gap = getSmallestPositiveGap(positions);
+    if (gap) weights.push(gap);
+  }
+  return weights.length ? Math.max(Math.round(Math.min(...weights)), 1) : 1;
+}
+
+function getSmallestPositiveGap(values) {
+  let best = null;
+  for (let index = 1; index < values.length; index++) {
+    const gap = values[index] - values[index - 1];
+    if (gap > 0 && (best === null || gap < best)) {
+      best = gap;
+    }
+  }
+  return best;
+}
+
+function extractPxPositions(value) {
+  return (String(value || '').match(/-?[\d.]+px/g) || [])
+    .map((part) => parseFloat(part))
+    .filter((number) => Number.isFinite(number));
+}
+
+function findVisibleCssColor(value) {
+  const matches = String(value || '').match(/rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}/g) || [];
+  for (const match of matches) {
+    if (cssColorToFigma(match).a > 0) {
+      return match;
+    }
+  }
+  return null;
+}
+
+function getLinearGradientAxis(layer) {
+  const lower = String(layer || '').toLowerCase();
+  if (/repeating-linear-gradient\(\s*(90deg|270deg|to\s+(right|left))/.test(lower)) {
+    return 'x';
+  }
+  return 'y';
+}
+
+function toRoman(num, uppercase = true) {
+  const romanLookup = [
+    ['M', 1000],
+    ['CM', 900],
+    ['D', 500],
+    ['CD', 400],
+    ['C', 100],
+    ['XC', 90],
+    ['L', 50],
+    ['XL', 40],
+    ['X', 10],
+    ['IX', 9],
+    ['V', 5],
+    ['IV', 4],
+    ['I', 1]
+  ];
+  let res = '';
+  let val = num;
+  for (const [str, amount] of romanLookup) {
+    while (val >= amount) {
+      res += str;
+      val -= amount;
+    }
+  }
+  return uppercase ? res : res.toLowerCase();
+}
+
+function toAlpha(num, uppercase = true) {
+  let res = '';
+  let val = num;
+  while (val > 0) {
+    const mod = (val - 1) % 26;
+    res = String.fromCharCode((uppercase ? 65 : 97) + mod) + res;
+    val = Math.floor((val - 1) / 26);
+  }
+  return res;
+}
+
+function resolveCounterText(content, index) {
+  if (!content) return '';
+  const trimmed = content.trim();
+
+  // Format: counter(name, style)
+  const counterMatch = trimmed.match(/counter\([^,]+,\s*([^)]+)\)/);
+  if (counterMatch) {
+    const style = counterMatch[1].trim().toLowerCase();
+    if (style === 'decimal-leading-zero') {
+      return String(index).padStart(2, '0');
+    }
+    if (style === 'upper-roman') {
+      return toRoman(index, true);
+    }
+    if (style === 'lower-roman') {
+      return toRoman(index, false);
+    }
+    if (style === 'lower-alpha' || style === 'lower-latin') {
+      return toAlpha(index, false);
+    }
+    if (style === 'upper-alpha' || style === 'upper-latin') {
+      return toAlpha(index, true);
+    }
+    return String(index);
+  }
+
+  // Format: counter(name)
+  if (trimmed.includes('counter(')) {
+    return String(index);
+  }
+
+  return content;
+}
+
+function parseRotationAndScale(transform) {
+  if (!transform || transform === 'none') {
+    return { rotation: 0, scaleX: 1, scaleY: 1 };
+  }
+
+  const matrixMatch = transform.match(/^matrix\(([^)]+)\)$/i);
+  if (matrixMatch) {
+    const values = matrixMatch[1].split(',').map((part) => parseFloat(part.trim()));
+    if (values.length === 6 && values.every(Number.isFinite)) {
+      const [a, b, c, d] = values;
+      const angleRad = Math.atan2(b, a);
+      const rotation = angleRad * (180 / Math.PI);
+      const scaleX = Math.hypot(a, b);
+      const scaleY = Math.hypot(c, d);
+      return { rotation, scaleX, scaleY };
+    }
+  }
+
+  const matrix3dMatch = transform.match(/^matrix3d\(([^)]+)\)$/i);
+  if (matrix3dMatch) {
+    const values = matrix3dMatch[1].split(',').map((part) => parseFloat(part.trim()));
+    if (values.length === 16 && values.every(Number.isFinite)) {
+      const a = values[0];
+      const b = values[1];
+      const c = values[4];
+      const d = values[5];
+      const angleRad = Math.atan2(b, a);
+      const rotation = angleRad * (180 / Math.PI);
+      const scaleX = Math.hypot(a, b);
+      const scaleY = Math.hypot(c, d);
+      return { rotation, scaleX, scaleY };
+    }
+  }
+
+  return { rotation: 0, scaleX: 1, scaleY: 1 };
+}

src/figma/z-index-sorter.js

@@ -1,84 +1,84 @@
-/**
- * src/figma/z-index-sorter.js
- * Converts CSS z-index stacking contexts into Figma layer order.
- *
- * Figma layer order: index 0 = bottom, index n-1 = top.
- * CSS z-index: higher = on top.
- *
- * Strategy:
- * 1. Flatten DOM into a list with effective z-index (inheriting from parent stacking context)
- * 2. Sort ascending
- * 3. Figma plugin inserts nodes in this order
- */
-
-import { walk } from '../core/dom-tree.js';
-
-/**
- * Returns the DOM tree annotated with effectiveZ values,
- * and the flat sorted list for layer insertion order.
- *
- * @param {object} domTree
- * @returns {{ annotated: object, sortedFlat: object[] }}
- */
-export function sortByZIndex(domTree) {
-  const flat = [];
-
-  // First pass: annotate each node with effectiveZ
-  function annotate(node, parentZ = 0) {
-    const z = parseZIndex(node.computed?.zIndex);
-    const isStackingContext = createsStackingContext(node.computed);
-    const effectiveZ = isStackingContext ? parentZ + z : parentZ;
-
-    const annotated = { ...node, effectiveZ };
-    flat.push(annotated);
-
-    annotated.children = (node.children ?? []).map(child =>
-      annotate(child, effectiveZ)
-    );
-
-    return annotated;
-  }
-
-  const annotated = annotate(domTree);
-
-  // Sort flat list: lower effectiveZ = insert first (bottom layer in Figma)
-  const sortedFlat = [...flat].sort((a, b) => a.effectiveZ - b.effectiveZ);
-
-  return { annotated, sortedFlat };
-}
-
-function parseZIndex(value) {
-  if (!value || value === 'auto') return 0;
-  const n = parseInt(value);
-  return isNaN(n) ? 0 : n;
-}
-
-/**
- * An element creates a stacking context if it has:
- * - position + z-index (not auto)
- * - opacity < 1
- * - transform (not none)
- * - filter
- * - will-change
- */
-function createsStackingContext(computed) {
-  if (!computed) return false;
-  const hasPosition = computed.position !== 'static';
-  const hasZ = computed.zIndex !== 'auto';
-  const hasOpacity = parseFloat(computed.opacity) < 1;
-  const hasTransform = computed.transform !== 'none' && computed.transform !== '';
-  return (hasPosition && hasZ) || hasOpacity || hasTransform;
-}
-
-/**
- * Get the VELA-specific z-index map for reference.
- * Used for validation / documentation purposes.
- */
-export const VELA_Z_REFERENCE = [
-  { element: 'body background', z: 'auto' },
-  { element: 'section.hero', z: 'auto' },
-  { element: '.hero-right (decorative)', z: 'auto' },
-  { element: '.hero-left (text content)', z: 2 },
-  { element: 'nav (fixed)', z: 100 },
-  { element: 'body::before (grain overlay)', z: 9999 },
-];
+/**
+ * src/figma/z-index-sorter.js
+ * Converts CSS z-index stacking contexts into Figma layer order.
+ *
+ * Figma layer order: index 0 = bottom, index n-1 = top.
+ * CSS z-index: higher = on top.
+ *
+ * Strategy:
+ * 1. Flatten DOM into a list with effective z-index (inheriting from parent stacking context)
+ * 2. Sort ascending
+ * 3. Figma plugin inserts nodes in this order
+ */
+
+import { walk } from '../core/dom-tree.js';
+
+/**
+ * Returns the DOM tree annotated with effectiveZ values,
+ * and the flat sorted list for layer insertion order.
+ *
+ * @param {object} domTree
+ * @returns {{ annotated: object, sortedFlat: object[] }}
+ */
+export function sortByZIndex(domTree) {
+  const flat = [];
+
+  // First pass: annotate each node with effectiveZ
+  function annotate(node, parentZ = 0) {
+    const z = parseZIndex(node.computed?.zIndex);
+    const isStackingContext = createsStackingContext(node.computed);
+    const effectiveZ = isStackingContext ? parentZ + z : parentZ;
+
+    const annotated = { ...node, effectiveZ };
+    flat.push(annotated);
+
+    annotated.children = (node.children ?? []).map(child =>
+      annotate(child, effectiveZ)
+    );
+
+    return annotated;
+  }
+
+  const annotated = annotate(domTree);
+
+  // Sort flat list: lower effectiveZ = insert first (bottom layer in Figma)
+  const sortedFlat = [...flat].sort((a, b) => a.effectiveZ - b.effectiveZ);
+
+  return { annotated, sortedFlat };
+}
+
+function parseZIndex(value) {
+  if (!value || value === 'auto') return 0;
+  const n = parseInt(value);
+  return isNaN(n) ? 0 : n;
+}
+
+/**
+ * An element creates a stacking context if it has:
+ * - position + z-index (not auto)
+ * - opacity < 1
+ * - transform (not none)
+ * - filter
+ * - will-change
+ */
+function createsStackingContext(computed) {
+  if (!computed) return false;
+  const hasPosition = computed.position !== 'static';
+  const hasZ = computed.zIndex !== 'auto';
+  const hasOpacity = parseFloat(computed.opacity) < 1;
+  const hasTransform = computed.transform !== 'none' && computed.transform !== '';
+  return (hasPosition && hasZ) || hasOpacity || hasTransform;
+}
+
+/**
+ * Get the VELA-specific z-index map for reference.
+ * Used for validation / documentation purposes.
+ */
+export const VELA_Z_REFERENCE = [
+  { element: 'body background', z: 'auto' },
+  { element: 'section.hero', z: 'auto' },
+  { element: '.hero-right (decorative)', z: 'auto' },
+  { element: '.hero-left (text content)', z: 2 },
+  { element: 'nav (fixed)', z: 100 },
+  { element: 'body::before (grain overlay)', z: 9999 },
+];

src/pipeline/convert.js

@@ -1,5 +1,5 @@
 /**
- * Shared Morphus conversion pipeline.
+ * Shared Morphus conversion pipeline.
  * Reused by the CLI and the local HTTP bridge for the Figma plugin.
  */
 
@@ -44,38 +44,38 @@ export async function convertHtmlString(html, options = {}) {
 
 async function convertWithExtractor({ extractor, source, viewport, baseUrl = null, onProgress = null }) {
   progress(onProgress, 5, 'Extracting page...');
-  const { domTree, title } = await extractor();
+  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 } : {}),
-    },
+  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,
   };
-}
-
-function normalizeDocumentTitle(title) {
-  return String(title || '').replace(/\s+/g, ' ').trim();
-}
-
-function progress(onProgress, percent, message) {
-  if (typeof onProgress === 'function') {
-    onProgress(percent, message);
-  }
-}
+}
+
+function normalizeDocumentTitle(title) {
+  return String(title || '').replace(/\s+/g, ' ').trim();
+}
+
+function progress(onProgress, percent, message) {
+  if (typeof onProgress === 'function') {
+    onProgress(percent, message);
+  }
+}
 
 function normalizeViewport(viewport = {}) {
   const width = Number.parseInt(viewport.width ?? DEFAULT_VIEWPORT.width, 10);

src/utils/color.js

@@ -1,68 +1,335 @@
-/**
- * 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).
+ */
+
+const NAMED_COLORS = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslate50: '#483d8b',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32',
+  transparent: '#00000000',
+};
+
+/**
+ * Convert hex color to Figma RGBA object.
+ * Supports: #rgb, #rgba, #rrggbb, #rrggbbaa
+ * @param {string} hex - e.g. "#c9a84c" or "#fff"
+ * @returns {{ r: number, g: number, b: number, a: number }}
+ */
+export function hexToFigmaRGB(hex) {
+  const clean = hex.replace('#', '');
+  if (clean.length === 3 || clean.length === 4) {
+    const r = parseInt(clean[0] + clean[0], 16) / 255;
+    const g = parseInt(clean[1] + clean[1], 16) / 255;
+    const b = parseInt(clean[2] + clean[2], 16) / 255;
+    const a = clean.length === 4 ? parseInt(clean[3] + clean[3], 16) / 255 : 1;
+    return { r, g, b, a };
+  }
+  const r = parseInt(clean.substring(0, 2), 16) / 255;
+  const g = parseInt(clean.substring(2, 4), 16) / 255;
+  const b = parseInt(clean.substring(4, 6), 16) / 255;
+  const a = clean.length === 8 ? parseInt(clean.substring(6, 8), 16) / 255 : 1;
+  return { r, g, b, a };
+}
+
+/**
+ * Convert CSS rgba() string to Figma RGBA.
+ * Supports standard commas syntax, modern spaces syntax, and percentages.
+ * @param {string} rgba - e.g. "rgba(201, 168, 76, 0.3)" or "rgba(200 255 0 / 0.5)"
+ * @returns {{ r: number, g: number, b: number, a: number }}
+ */
+export function rgbaStringToFigma(rgba) {
+  const normalized = rgba.trim().toLowerCase();
+  const matches = normalized.match(/[\d.]+%?/g) || [];
+  if (matches.length < 3) {
+    return { r: 0, g: 0, b: 0, a: 1 };
+  }
+
+  const parseComponent = (val, max) => {
+    if (val.endsWith('%')) {
+      return (parseFloat(val) / 100) * max;
+    }
+    return parseFloat(val);
+  };
+
+  const rVal = parseComponent(matches[0], 255);
+  const gVal = parseComponent(matches[1], 255);
+  const bVal = parseComponent(matches[2], 255);
+
+  let aVal = 1;
+  if (matches.length >= 4) {
+    const aPart = matches[3];
+    if (aPart.endsWith('%')) {
+      aVal = parseFloat(aPart) / 100;
+    } else {
+      aVal = parseFloat(aPart);
+    }
+  }
+
+  return {
+    r: Math.max(0, Math.min(255, rVal)) / 255,
+    g: Math.max(0, Math.min(255, gVal)) / 255,
+    b: Math.max(0, Math.min(255, bVal)) / 255,
+    a: Math.max(0, Math.min(1, aVal))
+  };
+}
+
+/**
+ * Convert HSL HSL/HSLA color values to RGB.
+ */
+function hslToRgb(h, s, l) {
+  h = h % 360;
+  if (h < 0) h += 360;
+  s = Math.max(0, Math.min(100, s)) / 100;
+  l = Math.max(0, Math.min(100, l)) / 100;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+
+  let r = 0, g = 0, b = 0;
+  if (h >= 0 && h < 60) {
+    r = c; g = x; b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x; g = c; b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0; g = c; b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0; g = x; b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x; g = 0; b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c; g = 0; b = x;
+  }
+
+  return {
+    r: r + m,
+    g: g + m,
+    b: b + m
+  };
+}
+
+/**
+ * Convert HSL/HSLA string to Figma RGBA.
+ */
+export function hslStringToFigma(hslStr) {
+  const normalized = hslStr.trim().toLowerCase();
+  const matches = normalized.match(/[\d.]+(?:%|deg)?/g) || [];
+  if (matches.length < 3) {
+    return { r: 0, g: 0, b: 0, a: 1 };
+  }
+
+  const hVal = parseFloat(matches[0]);
+  const sVal = parseFloat(matches[1]);
+  const lVal = parseFloat(matches[2]);
+
+  let aVal = 1;
+  if (matches.length >= 4) {
+    const aPart = matches[3];
+    if (aPart.endsWith('%')) {
+      aVal = parseFloat(aPart) / 100;
+    } else {
+      aVal = parseFloat(aPart);
+    }
+  }
+
+  const rgb = hslToRgb(hVal, sVal, lVal);
+  return {
+    r: rgb.r,
+    g: rgb.g,
+    b: rgb.b,
+    a: Math.max(0, Math.min(1, aVal))
+  };
+}
+
+/**
+ * Parse any CSS color string → Figma RGBA.
+ * Handles: hex, rgba(), rgb(), hsl(), hsla(), named colors
+ */
+export function cssColorToFigma(color) {
+  if (!color) {
+    return { r: 0, g: 0, b: 0, a: 0 };
+  }
+  const clean = color.trim().toLowerCase();
+  if (clean === 'transparent' || clean === 'none') {
+    return { r: 0, g: 0, b: 0, a: 0 };
+  }
+  if (clean.startsWith('#')) {
+    const parsed = hexToFigmaRGB(clean);
+    return { r: parsed.r, g: parsed.g, b: parsed.b, a: parsed.a ?? 1 };
+  }
+  if (clean.startsWith('rgb')) {
+    return rgbaStringToFigma(clean);
+  }
+  if (clean.startsWith('hsl')) {
+    return hslStringToFigma(clean);
+  }
+  if (NAMED_COLORS[clean]) {
+    const hex = NAMED_COLORS[clean];
+    if (hex === '#00000000') {
+      return { r: 0, g: 0, b: 0, a: 0 };
+    }
+    const parsed = hexToFigmaRGB(hex);
+    return { r: parsed.r, g: parsed.g, b: parsed.b, a: parsed.a ?? 1 };
+  }
+  // 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/units.js

@@ -1,109 +1,109 @@
-/**
- * src/utils/units.js
- * Unit conversion helpers for CSS → Figma (always px).
- * Since we use computed styles from Playwright, most values
- * are already resolved to px by the browser. These helpers
- * handle the remaining edge cases.
- */
-
-/**
- * Parse a CSS px string → number.
- * e.g. "24px" → 24, "0" → 0
- */
-export function parsePx(value) {
-  if (!value || value === 'none' || value === 'auto') return 0;
-  const n = parseFloat(value);
-  return isNaN(n) ? 0 : n;
-}
-
-/**
- * Convert CSS letter-spacing (em) to px, given a font size.
- * e.g. "0.12em", fontSize=13 → 1.56
- */
-export function letterSpacingToPx(value, fontSize) {
-  if (!value || value === 'normal') return 0;
-  if (value.endsWith('em')) {
-    return parseFloat(value) * parsePx(fontSize);
-  }
-  return parsePx(value);
-}
-
-/**
- * Convert CSS line-height to Figma format.
- * Returns { value: number, unit: "PERCENT" | "PIXELS" | "AUTO" }
- */
-export function lineHeightToFigma(value, fontSize) {
-  if (!value || value === 'normal') return { unit: 'AUTO' };
-
-  // Unitless (e.g. 1.8) → multiply by 100 for percent
-  const n = parseFloat(value);
-  if (!isNaN(n) && !value.includes('px') && !value.includes('%')) {
-    return { value: Math.round(n * 100), unit: 'PERCENT' };
-  }
-
-  if (value.endsWith('%')) {
-    return { value: parseFloat(value), unit: 'PERCENT' };
-  }
-
-  if (value.endsWith('px')) {
-    return { value: n, unit: 'PIXELS' };
-  }
-
-  return { unit: 'AUTO' };
-}
-
-/**
- * Convert CSS font-weight number → Figma style name.
- */
-export const WEIGHT_MAP = {
-  100: 'Thin',
-  200: 'ExtraLight',
-  300: 'Light',
-  400: 'Regular',
-  500: 'Medium',
-  600: 'SemiBold',
-  700: 'Bold',
-  800: 'ExtraBold',
-  900: 'Black',
-};
-
-/**
- * Convert CSS text-align → Figma textAlignHorizontal.
- */
-export const TEXT_ALIGN_MAP = {
-  left: 'LEFT',
-  center: 'CENTER',
-  right: 'RIGHT',
-  justify: 'JUSTIFIED',
-};
-
-/**
- * Convert CSS text-transform → Figma textCase.
- */
-export const TEXT_CASE_MAP = {
-  uppercase: 'UPPER',
-  lowercase: 'LOWER',
-  capitalize: 'TITLE',
-  none: 'ORIGINAL',
-};
-
-/**
- * Convert CSS justify-content → Figma primaryAxisAlignItems.
- */
-export const JUSTIFY_MAP = {
-  'flex-start': 'MIN',
-  'center': 'CENTER',
-  'flex-end': 'MAX',
-  'space-between': 'SPACE_BETWEEN',
-};
-
-/**
- * Convert CSS align-items → Figma counterAxisAlignItems.
- */
-export const ALIGN_MAP = {
-  'flex-start': 'MIN',
-  'center': 'CENTER',
-  'flex-end': 'MAX',
-  'stretch': 'STRETCH',
-  'baseline': 'BASELINE',
-};
+/**
+ * src/utils/units.js
+ * Unit conversion helpers for CSS → Figma (always px).
+ * Since we use computed styles from Playwright, most values
+ * are already resolved to px by the browser. These helpers
+ * handle the remaining edge cases.
+ */
+
+/**
+ * Parse a CSS px string → number.
+ * e.g. "24px" → 24, "0" → 0
+ */
+export function parsePx(value) {
+  if (!value || value === 'none' || value === 'auto') return 0;
+  const n = parseFloat(value);
+  return isNaN(n) ? 0 : n;
+}
+
+/**
+ * Convert CSS letter-spacing (em) to px, given a font size.
+ * e.g. "0.12em", fontSize=13 → 1.56
+ */
+export function letterSpacingToPx(value, fontSize) {
+  if (!value || value === 'normal') return 0;
+  if (value.endsWith('em')) {
+    return parseFloat(value) * parsePx(fontSize);
+  }
+  return parsePx(value);
+}
+
+/**
+ * Convert CSS line-height to Figma format.
+ * Returns { value: number, unit: "PERCENT" | "PIXELS" | "AUTO" }
+ */
+export function lineHeightToFigma(value, fontSize) {
+  if (!value || value === 'normal') return { unit: 'AUTO' };
+
+  // Unitless (e.g. 1.8) → multiply by 100 for percent
+  const n = parseFloat(value);
+  if (!isNaN(n) && !value.includes('px') && !value.includes('%')) {
+    return { value: Math.round(n * 100), unit: 'PERCENT' };
+  }
+
+  if (value.endsWith('%')) {
+    return { value: parseFloat(value), unit: 'PERCENT' };
+  }
+
+  if (value.endsWith('px')) {
+    return { value: n, unit: 'PIXELS' };
+  }
+
+  return { unit: 'AUTO' };
+}
+
+/**
+ * Convert CSS font-weight number → Figma style name.
+ */
+export const WEIGHT_MAP = {
+  100: 'Thin',
+  200: 'ExtraLight',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'SemiBold',
+  700: 'Bold',
+  800: 'ExtraBold',
+  900: 'Black',
+};
+
+/**
+ * Convert CSS text-align → Figma textAlignHorizontal.
+ */
+export const TEXT_ALIGN_MAP = {
+  left: 'LEFT',
+  center: 'CENTER',
+  right: 'RIGHT',
+  justify: 'JUSTIFIED',
+};
+
+/**
+ * Convert CSS text-transform → Figma textCase.
+ */
+export const TEXT_CASE_MAP = {
+  uppercase: 'UPPER',
+  lowercase: 'LOWER',
+  capitalize: 'TITLE',
+  none: 'ORIGINAL',
+};
+
+/**
+ * Convert CSS justify-content → Figma primaryAxisAlignItems.
+ */
+export const JUSTIFY_MAP = {
+  'flex-start': 'MIN',
+  'center': 'CENTER',
+  'flex-end': 'MAX',
+  'space-between': 'SPACE_BETWEEN',
+};
+
+/**
+ * Convert CSS align-items ��� Figma counterAxisAlignItems.
+ */
+export const ALIGN_MAP = {
+  'flex-start': 'MIN',
+  'center': 'CENTER',
+  'flex-end': 'MAX',
+  'stretch': 'STRETCH',
+  'baseline': 'BASELINE',
+};