figma-metadata-extractor 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1462 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const path = require("path");
+const fs = require("fs");
+const sharp = require("sharp");
+const child_process = require("child_process");
+const util = require("util");
+const remeda = require("remeda");
+const yaml = require("js-yaml");
+async function applyCropTransform(imagePath, cropTransform) {
+  const { Logger: Logger2 } = await Promise.resolve().then(() => logger);
+  try {
+    const scaleX = cropTransform[0]?.[0] ?? 1;
+    const skewX = cropTransform[0]?.[1] ?? 0;
+    const translateX = cropTransform[0]?.[2] ?? 0;
+    const skewY = cropTransform[1]?.[0] ?? 0;
+    const scaleY = cropTransform[1]?.[1] ?? 1;
+    const translateY = cropTransform[1]?.[2] ?? 0;
+    const image = sharp(imagePath);
+    const metadata = await image.metadata();
+    if (!metadata.width || !metadata.height) {
+      throw new Error(`Could not get image dimensions for ${imagePath}`);
+    }
+    const { width, height } = metadata;
+    const cropLeft = Math.max(0, Math.round(translateX * width));
+    const cropTop = Math.max(0, Math.round(translateY * height));
+    const cropWidth = Math.min(width - cropLeft, Math.round(scaleX * width));
+    const cropHeight = Math.min(height - cropTop, Math.round(scaleY * height));
+    if (cropWidth <= 0 || cropHeight <= 0) {
+      Logger2.log(`Invalid crop dimensions for ${imagePath}, using original image`);
+      return imagePath;
+    }
+    const tempPath = imagePath + ".tmp";
+    await image.extract({
+      left: cropLeft,
+      top: cropTop,
+      width: cropWidth,
+      height: cropHeight
+    }).toFile(tempPath);
+    fs.renameSync(tempPath, imagePath);
+    Logger2.log(`Cropped image saved (overwritten): ${imagePath}`);
+    Logger2.log(
+      `Crop region: ${cropLeft}, ${cropTop}, ${cropWidth}x${cropHeight} from ${width}x${height}`
+    );
+    return imagePath;
+  } catch (error) {
+    Logger2.error(`Error cropping image ${imagePath}:`, error);
+    return imagePath;
+  }
+}
+async function getImageDimensions(imagePath) {
+  const { Logger: Logger2 } = await Promise.resolve().then(() => logger);
+  try {
+    const metadata = await sharp(imagePath).metadata();
+    if (!metadata.width || !metadata.height) {
+      throw new Error(`Could not get image dimensions for ${imagePath}`);
+    }
+    return {
+      width: metadata.width,
+      height: metadata.height
+    };
+  } catch (error) {
+    Logger2.error(`Error getting image dimensions for ${imagePath}:`, error);
+    return { width: 1e3, height: 1e3 };
+  }
+}
+async function downloadAndProcessImage(fileName, localPath, imageUrl, needsCropping = false, cropTransform, requiresImageDimensions = false) {
+  const { Logger: Logger2 } = await Promise.resolve().then(() => logger);
+  const processingLog = [];
+  const { downloadFigmaImage: downloadFigmaImage2 } = await Promise.resolve().then(() => common);
+  const originalPath = await downloadFigmaImage2(fileName, localPath, imageUrl);
+  Logger2.log(`Downloaded original image: ${originalPath}`);
+  const originalDimensions = await getImageDimensions(originalPath);
+  Logger2.log(`Original dimensions: ${originalDimensions.width}x${originalDimensions.height}`);
+  let finalPath = originalPath;
+  let wasCropped = false;
+  let cropRegion;
+  if (needsCropping && cropTransform) {
+    Logger2.log("Applying crop transform...");
+    const scaleX = cropTransform[0]?.[0] ?? 1;
+    const scaleY = cropTransform[1]?.[1] ?? 1;
+    const translateX = cropTransform[0]?.[2] ?? 0;
+    const translateY = cropTransform[1]?.[2] ?? 0;
+    const cropLeft = Math.max(0, Math.round(translateX * originalDimensions.width));
+    const cropTop = Math.max(0, Math.round(translateY * originalDimensions.height));
+    const cropWidth = Math.min(
+      originalDimensions.width - cropLeft,
+      Math.round(scaleX * originalDimensions.width)
+    );
+    const cropHeight = Math.min(
+      originalDimensions.height - cropTop,
+      Math.round(scaleY * originalDimensions.height)
+    );
+    if (cropWidth > 0 && cropHeight > 0) {
+      cropRegion = { left: cropLeft, top: cropTop, width: cropWidth, height: cropHeight };
+      finalPath = await applyCropTransform(originalPath, cropTransform);
+      wasCropped = true;
+      Logger2.log(`Cropped to region: ${cropLeft}, ${cropTop}, ${cropWidth}x${cropHeight}`);
+    } else {
+      Logger2.log("Invalid crop dimensions, keeping original image");
+    }
+  }
+  const finalDimensions = await getImageDimensions(finalPath);
+  Logger2.log(`Final dimensions: ${finalDimensions.width}x${finalDimensions.height}`);
+  let cssVariables;
+  if (requiresImageDimensions) {
+    cssVariables = generateImageCSSVariables(finalDimensions);
+  }
+  return {
+    filePath: finalPath,
+    originalDimensions,
+    finalDimensions,
+    wasCropped,
+    cropRegion,
+    cssVariables,
+    processingLog
+  };
+}
+function generateImageCSSVariables({
+  width,
+  height
+}) {
+  return `--original-width: ${width}px; --original-height: ${height}px;`;
+}
+const Logger = {
+  isHTTP: false,
+  log: (...args) => {
+    if (Logger.isHTTP) {
+      console.log("[INFO]", ...args);
+    } else {
+      console.error("[INFO]", ...args);
+    }
+  },
+  error: (...args) => {
+    console.error("[ERROR]", ...args);
+  }
+};
+function writeLogs(name, value) {
+  if (process.env.NODE_ENV !== "development") return;
+  try {
+    const logsDir = "logs";
+    const logPath = `${logsDir}/${name}`;
+    fs.accessSync(process.cwd(), fs.constants.W_OK);
+    if (!fs.existsSync(logsDir)) {
+      fs.mkdirSync(logsDir, { recursive: true });
+    }
+    fs.writeFileSync(logPath, JSON.stringify(value, null, 2));
+    Logger.log(`Debug log written to: ${logPath}`);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    Logger.log(`Failed to write logs to ${name}: ${errorMessage}`);
+  }
+}
+const logger = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Logger,
+  writeLogs
+}, Symbol.toStringTag, { value: "Module" }));
+const execFileAsync = util.promisify(child_process.execFile);
+async function fetchWithRetry(url, options = {}) {
+  try {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      throw new Error(`Fetch failed with status ${response.status}: ${response.statusText}`);
+    }
+    return await response.json();
+  } catch (fetchError) {
+    Logger.log(
+      `[fetchWithRetry] Initial fetch failed for ${url}: ${fetchError.message}. Likely a corporate proxy or SSL issue. Attempting curl fallback.`
+    );
+    const curlHeaders = formatHeadersForCurl(options.headers);
+    const curlArgs = ["-s", "-S", "--fail-with-body", "-L", ...curlHeaders, url];
+    try {
+      Logger.log(`[fetchWithRetry] Executing curl with args: ${JSON.stringify(curlArgs)}`);
+      const { stdout, stderr } = await execFileAsync("curl", curlArgs);
+      if (stderr) {
+        if (!stdout || stderr.toLowerCase().includes("error") || stderr.toLowerCase().includes("fail")) {
+          throw new Error(`Curl command failed with stderr: ${stderr}`);
+        }
+        Logger.log(
+          `[fetchWithRetry] Curl command for ${url} produced stderr (but might be informational): ${stderr}`
+        );
+      }
+      if (!stdout) {
+        throw new Error("Curl command returned empty stdout.");
+      }
+      const result = JSON.parse(stdout);
+      if (result.status && result.status !== 200) {
+        throw new Error(`Curl command failed: ${result}`);
+      }
+      return result;
+    } catch (curlError) {
+      Logger.error(`[fetchWithRetry] Curl fallback also failed for ${url}: ${curlError.message}`);
+      throw fetchError;
+    }
+  }
+}
+function formatHeadersForCurl(headers) {
+  if (!headers) {
+    return [];
+  }
+  const headerArgs = [];
+  for (const [key, value] of Object.entries(headers)) {
+    headerArgs.push("-H", `${key}: ${value}`);
+  }
+  return headerArgs;
+}
+class FigmaService {
+  apiKey;
+  oauthToken;
+  useOAuth;
+  baseUrl = "https://api.figma.com/v1";
+  constructor({ figmaApiKey, figmaOAuthToken, useOAuth }) {
+    this.apiKey = figmaApiKey || "";
+    this.oauthToken = figmaOAuthToken || "";
+    this.useOAuth = !!useOAuth && !!this.oauthToken;
+  }
+  getAuthHeaders() {
+    if (this.useOAuth) {
+      Logger.log("Using OAuth Bearer token for authentication");
+      return { Authorization: `Bearer ${this.oauthToken}` };
+    } else {
+      Logger.log("Using Personal Access Token for authentication");
+      return { "X-Figma-Token": this.apiKey };
+    }
+  }
+  /**
+   * Filters out null values from Figma image responses. This ensures we only work with valid image URLs.
+   */
+  filterValidImages(images) {
+    if (!images) return {};
+    return Object.fromEntries(Object.entries(images).filter(([, value]) => !!value));
+  }
+  async request(endpoint) {
+    try {
+      Logger.log(`Calling ${this.baseUrl}${endpoint}`);
+      const headers = this.getAuthHeaders();
+      return await fetchWithRetry(`${this.baseUrl}${endpoint}`, {
+        headers
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      throw new Error(
+        `Failed to make request to Figma API endpoint '${endpoint}': ${errorMessage}`
+      );
+    }
+  }
+  /**
+   * Builds URL query parameters for SVG image requests.
+   */
+  buildSvgQueryParams(svgIds, svgOptions) {
+    const params = new URLSearchParams({
+      ids: svgIds.join(","),
+      format: "svg",
+      svg_outline_text: String(svgOptions.outlineText),
+      svg_include_id: String(svgOptions.includeId),
+      svg_simplify_stroke: String(svgOptions.simplifyStroke)
+    });
+    return params.toString();
+  }
+  /**
+   * Gets download URLs for image fills without downloading them.
+   *
+   * @returns Map of imageRef to download URL
+   */
+  async getImageFillUrls(fileKey) {
+    const endpoint = `/files/${fileKey}/images`;
+    const response = await this.request(endpoint);
+    return response.meta.images || {};
+  }
+  /**
+   * Gets download URLs for rendered nodes without downloading them.
+   *
+   * @returns Map of node ID to download URL
+   */
+  async getNodeRenderUrls(fileKey, nodeIds, format, options = {}) {
+    if (nodeIds.length === 0) return {};
+    if (format === "png") {
+      const scale = options.pngScale || 2;
+      const endpoint = `/images/${fileKey}?ids=${nodeIds.join(",")}&format=png&scale=${scale}`;
+      const response = await this.request(endpoint);
+      return this.filterValidImages(response.images);
+    } else {
+      const svgOptions = options.svgOptions || {
+        outlineText: true,
+        includeId: false,
+        simplifyStroke: true
+      };
+      const params = this.buildSvgQueryParams(nodeIds, svgOptions);
+      const endpoint = `/images/${fileKey}?${params}`;
+      const response = await this.request(endpoint);
+      return this.filterValidImages(response.images);
+    }
+  }
+  /**
+   * Download images method with post-processing support for cropping and returning image dimensions.
+   *
+   * Supports:
+   * - Image fills vs rendered nodes (based on imageRef vs nodeId)
+   * - PNG vs SVG format (based on filename extension)
+   * - Image cropping based on transform matrices
+   * - CSS variable generation for image dimensions
+   *
+   * @returns Array of local file paths for successfully downloaded images
+   */
+  async downloadImages(fileKey, localPath, items, options = {}) {
+    if (items.length === 0) return [];
+    const sanitizedPath = path.normalize(localPath).replace(/^(\.\.(\/|\\|$))+/, "");
+    const resolvedPath = path.resolve(sanitizedPath);
+    if (!resolvedPath.startsWith(path.resolve(process.cwd()))) {
+      throw new Error("Invalid path specified. Directory traversal is not allowed.");
+    }
+    const { pngScale = 2, svgOptions } = options;
+    const downloadPromises = [];
+    const imageFills = items.filter(
+      (item) => !!item.imageRef
+    );
+    const renderNodes = items.filter(
+      (item) => !!item.nodeId
+    );
+    if (imageFills.length > 0) {
+      const fillUrls = await this.getImageFillUrls(fileKey);
+      const fillDownloads = imageFills.map(({ imageRef, fileName, needsCropping, cropTransform, requiresImageDimensions }) => {
+        const imageUrl = fillUrls[imageRef];
+        return imageUrl ? downloadAndProcessImage(
+          fileName,
+          resolvedPath,
+          imageUrl,
+          needsCropping,
+          cropTransform,
+          requiresImageDimensions
+        ) : null;
+      }).filter((promise) => promise !== null);
+      if (fillDownloads.length > 0) {
+        downloadPromises.push(Promise.all(fillDownloads));
+      }
+    }
+    if (renderNodes.length > 0) {
+      const pngNodes = renderNodes.filter((node) => !node.fileName.toLowerCase().endsWith(".svg"));
+      const svgNodes = renderNodes.filter((node) => node.fileName.toLowerCase().endsWith(".svg"));
+      if (pngNodes.length > 0) {
+        const pngUrls = await this.getNodeRenderUrls(
+          fileKey,
+          pngNodes.map((n) => n.nodeId),
+          "png",
+          { pngScale }
+        );
+        const pngDownloads = pngNodes.map(({ nodeId, fileName, needsCropping, cropTransform, requiresImageDimensions }) => {
+          const imageUrl = pngUrls[nodeId];
+          return imageUrl ? downloadAndProcessImage(
+            fileName,
+            resolvedPath,
+            imageUrl,
+            needsCropping,
+            cropTransform,
+            requiresImageDimensions
+          ) : null;
+        }).filter((promise) => promise !== null);
+        if (pngDownloads.length > 0) {
+          downloadPromises.push(Promise.all(pngDownloads));
+        }
+      }
+      if (svgNodes.length > 0) {
+        const svgUrls = await this.getNodeRenderUrls(
+          fileKey,
+          svgNodes.map((n) => n.nodeId),
+          "svg",
+          { svgOptions }
+        );
+        const svgDownloads = svgNodes.map(({ nodeId, fileName, needsCropping, cropTransform, requiresImageDimensions }) => {
+          const imageUrl = svgUrls[nodeId];
+          return imageUrl ? downloadAndProcessImage(
+            fileName,
+            resolvedPath,
+            imageUrl,
+            needsCropping,
+            cropTransform,
+            requiresImageDimensions
+          ) : null;
+        }).filter((promise) => promise !== null);
+        if (svgDownloads.length > 0) {
+          downloadPromises.push(Promise.all(svgDownloads));
+        }
+      }
+    }
+    const results = await Promise.all(downloadPromises);
+    return results.flat();
+  }
+  /**
+   * Get raw Figma API response for a file (for use with flexible extractors)
+   */
+  async getRawFile(fileKey, depth) {
+    const endpoint = `/files/${fileKey}${depth ? `?depth=${depth}` : ""}`;
+    Logger.log(`Retrieving raw Figma file: ${fileKey} (depth: ${depth ?? "default"})`);
+    const response = await this.request(endpoint);
+    writeLogs("figma-raw.json", response);
+    return response;
+  }
+  /**
+   * Get raw Figma API response for specific nodes (for use with flexible extractors)
+   */
+  async getRawNode(fileKey, nodeId, depth) {
+    const endpoint = `/files/${fileKey}/nodes?ids=${nodeId}${depth ? `&depth=${depth}` : ""}`;
+    Logger.log(
+      `Retrieving raw Figma node: ${nodeId} from ${fileKey} (depth: ${depth ?? "default"})`
+    );
+    const response = await this.request(endpoint);
+    writeLogs("figma-raw.json", response);
+    return response;
+  }
+}
+async function downloadFigmaImage(fileName, localPath, imageUrl) {
+  try {
+    if (!fs.existsSync(localPath)) {
+      fs.mkdirSync(localPath, { recursive: true });
+    }
+    const fullPath = path.join(localPath, fileName);
+    const response = await fetch(imageUrl, {
+      method: "GET"
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to download image: ${response.statusText}`);
+    }
+    const writer = fs.createWriteStream(fullPath);
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error("Failed to get response body");
+    }
+    return new Promise((resolve, reject) => {
+      const processStream = async () => {
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+              writer.end();
+              break;
+            }
+            writer.write(value);
+          }
+        } catch (err) {
+          writer.end();
+          fs.unlink(fullPath, () => {
+          });
+          reject(err);
+        }
+      };
+      writer.on("finish", () => {
+        resolve(fullPath);
+      });
+      writer.on("error", (err) => {
+        reader.cancel();
+        fs.unlink(fullPath, () => {
+        });
+        reject(new Error(`Failed to write image: ${err.message}`));
+      });
+      processStream();
+    });
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    throw new Error(`Error downloading image: ${errorMessage}`);
+  }
+}
+function generateVarId(prefix = "var") {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+  let result = "";
+  for (let i = 0; i < 6; i++) {
+    const randomIndex = Math.floor(Math.random() * chars.length);
+    result += chars[randomIndex];
+  }
+  return `${prefix}_${result}`;
+}
+function generateCSSShorthand(values, {
+  ignoreZero = true,
+  suffix = "px"
+} = {}) {
+  const { top, right, bottom, left } = values;
+  if (ignoreZero && top === 0 && right === 0 && bottom === 0 && left === 0) {
+    return void 0;
+  }
+  if (top === right && right === bottom && bottom === left) {
+    return `${top}${suffix}`;
+  }
+  if (right === left) {
+    if (top === bottom) {
+      return `${top}${suffix} ${right}${suffix}`;
+    }
+    return `${top}${suffix} ${right}${suffix} ${bottom}${suffix}`;
+  }
+  return `${top}${suffix} ${right}${suffix} ${bottom}${suffix} ${left}${suffix}`;
+}
+function isVisible(element) {
+  return element.visible ?? true;
+}
+function pixelRound(num) {
+  if (isNaN(num)) {
+    throw new TypeError(`Input must be a valid number`);
+  }
+  return Number(Number(num).toFixed(2));
+}
+const common = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  downloadFigmaImage,
+  generateCSSShorthand,
+  generateVarId,
+  isVisible,
+  pixelRound
+}, Symbol.toStringTag, { value: "Module" }));
+function hasValue(key, obj, typeGuard) {
+  const isObject = typeof obj === "object" && obj !== null;
+  if (!isObject || !(key in obj)) return false;
+  const val = obj[key];
+  return typeGuard ? typeGuard(val) : val !== void 0;
+}
+function isFrame(val) {
+  return typeof val === "object" && !!val && "clipsContent" in val && typeof val.clipsContent === "boolean";
+}
+function isLayout(val) {
+  return typeof val === "object" && !!val && "absoluteBoundingBox" in val && typeof val.absoluteBoundingBox === "object" && !!val.absoluteBoundingBox && "x" in val.absoluteBoundingBox && "y" in val.absoluteBoundingBox && "width" in val.absoluteBoundingBox && "height" in val.absoluteBoundingBox;
+}
+function isInAutoLayoutFlow(node, parent) {
+  const autoLayoutModes = ["HORIZONTAL", "VERTICAL"];
+  return isFrame(parent) && autoLayoutModes.includes(parent.layoutMode ?? "NONE") && isLayout(node) && node.layoutPositioning !== "ABSOLUTE";
+}
+function isStrokeWeights(val) {
+  return typeof val === "object" && val !== null && "top" in val && "right" in val && "bottom" in val && "left" in val;
+}
+function isRectangle(key, obj) {
+  const recordObj = obj;
+  return typeof obj === "object" && !!obj && key in recordObj && typeof recordObj[key] === "object" && !!recordObj[key] && "x" in recordObj[key] && "y" in recordObj[key] && "width" in recordObj[key] && "height" in recordObj[key];
+}
+function isRectangleCornerRadii(val) {
+  return Array.isArray(val) && val.length === 4 && val.every((v) => typeof v === "number");
+}
+function extractFromDesign(nodes, extractors, options = {}, globalVars = { styles: {} }) {
+  const context = {
+    globalVars,
+    currentDepth: 0
+  };
+  const processedNodes = nodes.filter((node) => shouldProcessNode(node, options)).map((node) => processNodeWithExtractors(node, extractors, context, options)).filter((node) => node !== null);
+  return {
+    nodes: processedNodes,
+    globalVars: context.globalVars
+  };
+}
+function processNodeWithExtractors(node, extractors, context, options) {
+  if (!shouldProcessNode(node, options)) {
+    return null;
+  }
+  const result = {
+    id: node.id,
+    name: node.name,
+    type: node.type === "VECTOR" ? "IMAGE-SVG" : node.type
+  };
+  for (const extractor of extractors) {
+    extractor(node, result, context);
+  }
+  if (shouldTraverseChildren(node, context, options)) {
+    const childContext = {
+      ...context,
+      currentDepth: context.currentDepth + 1,
+      parent: node
+    };
+    if (hasValue("children", node) && node.children.length > 0) {
+      const children = node.children.filter((child) => shouldProcessNode(child, options)).map((child) => processNodeWithExtractors(child, extractors, childContext, options)).filter((child) => child !== null);
+      if (children.length > 0) {
+        const childrenToInclude = options.afterChildren ? options.afterChildren(node, result, children) : children;
+        if (childrenToInclude.length > 0) {
+          result.children = childrenToInclude;
+        }
+      }
+    }
+  }
+  return result;
+}
+function shouldProcessNode(node, options) {
+  if (!isVisible(node)) {
+    return false;
+  }
+  if (options.nodeFilter && !options.nodeFilter(node)) {
+    return false;
+  }
+  return true;
+}
+function shouldTraverseChildren(node, context, options) {
+  if (options.maxDepth !== void 0 && context.currentDepth >= options.maxDepth) {
+    return false;
+  }
+  return true;
+}
+function simplifyComponents(aggregatedComponents) {
+  return Object.fromEntries(
+    Object.entries(aggregatedComponents).map(([id, comp]) => [
+      id,
+      {
+        id,
+        key: comp.key,
+        name: comp.name,
+        componentSetId: comp.componentSetId
+      }
+    ])
+  );
+}
+function simplifyComponentSets(aggregatedComponentSets) {
+  return Object.fromEntries(
+    Object.entries(aggregatedComponentSets).map(([id, set]) => [
+      id,
+      {
+        id,
+        key: set.key,
+        name: set.name,
+        description: set.description
+      }
+    ])
+  );
+}
+function simplifyRawFigmaObject(apiResponse, nodeExtractors, options = {}) {
+  const { metadata, rawNodes, components, componentSets, extraStyles } = parseAPIResponse(apiResponse);
+  const globalVars = { styles: {}, extraStyles };
+  const { nodes: extractedNodes, globalVars: finalGlobalVars } = extractFromDesign(
+    rawNodes,
+    nodeExtractors,
+    options,
+    globalVars
+  );
+  return {
+    ...metadata,
+    nodes: extractedNodes,
+    components: simplifyComponents(components),
+    componentSets: simplifyComponentSets(componentSets),
+    globalVars: { styles: finalGlobalVars.styles }
+  };
+}
+function parseAPIResponse(data) {
+  const aggregatedComponents = {};
+  const aggregatedComponentSets = {};
+  let extraStyles = {};
+  let nodesToParse;
+  if ("nodes" in data) {
+    const nodeResponses = Object.values(data.nodes);
+    nodeResponses.forEach((nodeResponse) => {
+      if (nodeResponse.components) {
+        Object.assign(aggregatedComponents, nodeResponse.components);
+      }
+      if (nodeResponse.componentSets) {
+        Object.assign(aggregatedComponentSets, nodeResponse.componentSets);
+      }
+      if (nodeResponse.styles) {
+        Object.assign(extraStyles, nodeResponse.styles);
+      }
+    });
+    nodesToParse = nodeResponses.map((n) => n.document).filter(isVisible);
+  } else {
+    Object.assign(aggregatedComponents, data.components);
+    Object.assign(aggregatedComponentSets, data.componentSets);
+    if (data.styles) {
+      extraStyles = data.styles;
+    }
+    nodesToParse = data.document.children.filter(isVisible);
+  }
+  const { name } = data;
+  return {
+    metadata: {
+      name
+    },
+    rawNodes: nodesToParse,
+    extraStyles,
+    components: aggregatedComponents,
+    componentSets: aggregatedComponentSets
+  };
+}
+function buildSimplifiedLayout(n, parent) {
+  const frameValues = buildSimplifiedFrameValues(n);
+  const layoutValues = buildSimplifiedLayoutValues(n, parent, frameValues.mode) || {};
+  return { ...frameValues, ...layoutValues };
+}
+function convertAlign(axisAlign, stretch) {
+  if (stretch && stretch.mode !== "none") {
+    const { children, mode, axis } = stretch;
+    const direction = getDirection(axis, mode);
+    const shouldStretch = children.length > 0 && children.reduce((shouldStretch2, c) => {
+      if (!shouldStretch2) return false;
+      if ("layoutPositioning" in c && c.layoutPositioning === "ABSOLUTE") return true;
+      if (direction === "horizontal") {
+        return "layoutSizingHorizontal" in c && c.layoutSizingHorizontal === "FILL";
+      } else if (direction === "vertical") {
+        return "layoutSizingVertical" in c && c.layoutSizingVertical === "FILL";
+      }
+      return false;
+    }, true);
+    if (shouldStretch) return "stretch";
+  }
+  switch (axisAlign) {
+    case "MIN":
+      return void 0;
+    case "MAX":
+      return "flex-end";
+    case "CENTER":
+      return "center";
+    case "SPACE_BETWEEN":
+      return "space-between";
+    case "BASELINE":
+      return "baseline";
+    default:
+      return void 0;
+  }
+}
+function convertSelfAlign(align) {
+  switch (align) {
+    case "MIN":
+      return void 0;
+    case "MAX":
+      return "flex-end";
+    case "CENTER":
+      return "center";
+    case "STRETCH":
+      return "stretch";
+    default:
+      return void 0;
+  }
+}
+function convertSizing(s) {
+  if (s === "FIXED") return "fixed";
+  if (s === "FILL") return "fill";
+  if (s === "HUG") return "hug";
+  return void 0;
+}
+function getDirection(axis, mode) {
+  switch (axis) {
+    case "primary":
+      switch (mode) {
+        case "row":
+          return "horizontal";
+        case "column":
+          return "vertical";
+      }
+    case "counter":
+      switch (mode) {
+        case "row":
+          return "horizontal";
+        case "column":
+          return "vertical";
+      }
+  }
+}
+function buildSimplifiedFrameValues(n) {
+  if (!isFrame(n)) {
+    return { mode: "none" };
+  }
+  const frameValues = {
+    mode: !n.layoutMode || n.layoutMode === "NONE" ? "none" : n.layoutMode === "HORIZONTAL" ? "row" : "column"
+  };
+  const overflowScroll = [];
+  if (n.overflowDirection?.includes("HORIZONTAL")) overflowScroll.push("x");
+  if (n.overflowDirection?.includes("VERTICAL")) overflowScroll.push("y");
+  if (overflowScroll.length > 0) frameValues.overflowScroll = overflowScroll;
+  if (frameValues.mode === "none") {
+    return frameValues;
+  }
+  frameValues.justifyContent = convertAlign(n.primaryAxisAlignItems ?? "MIN", {
+    children: n.children,
+    axis: "primary",
+    mode: frameValues.mode
+  });
+  frameValues.alignItems = convertAlign(n.counterAxisAlignItems ?? "MIN", {
+    children: n.children,
+    axis: "counter",
+    mode: frameValues.mode
+  });
+  frameValues.alignSelf = convertSelfAlign(n.layoutAlign);
+  frameValues.wrap = n.layoutWrap === "WRAP" ? true : void 0;
+  frameValues.gap = n.itemSpacing ? `${n.itemSpacing ?? 0}px` : void 0;
+  if (n.paddingTop || n.paddingBottom || n.paddingLeft || n.paddingRight) {
+    frameValues.padding = generateCSSShorthand({
+      top: n.paddingTop ?? 0,
+      right: n.paddingRight ?? 0,
+      bottom: n.paddingBottom ?? 0,
+      left: n.paddingLeft ?? 0
+    });
+  }
+  return frameValues;
+}
+function buildSimplifiedLayoutValues(n, parent, mode) {
+  if (!isLayout(n)) return void 0;
+  const layoutValues = { mode };
+  layoutValues.sizing = {
+    horizontal: convertSizing(n.layoutSizingHorizontal),
+    vertical: convertSizing(n.layoutSizingVertical)
+  };
+  if (
+    // If parent is a frame but not an AutoLayout, or if the node is absolute, include positioning-related properties
+    isFrame(parent) && !isInAutoLayoutFlow(n, parent)
+  ) {
+    if (n.layoutPositioning === "ABSOLUTE") {
+      layoutValues.position = "absolute";
+    }
+    if (n.absoluteBoundingBox && parent.absoluteBoundingBox) {
+      layoutValues.locationRelativeToParent = {
+        x: pixelRound(n.absoluteBoundingBox.x - parent.absoluteBoundingBox.x),
+        y: pixelRound(n.absoluteBoundingBox.y - parent.absoluteBoundingBox.y)
+      };
+    }
+  }
+  if (isRectangle("absoluteBoundingBox", n)) {
+    const dimensions = {};
+    if (mode === "row") {
+      if (!n.layoutGrow && n.layoutSizingHorizontal == "FIXED")
+        dimensions.width = n.absoluteBoundingBox.width;
+      if (n.layoutAlign !== "STRETCH" && n.layoutSizingVertical == "FIXED")
+        dimensions.height = n.absoluteBoundingBox.height;
+    } else if (mode === "column") {
+      if (n.layoutAlign !== "STRETCH" && n.layoutSizingHorizontal == "FIXED")
+        dimensions.width = n.absoluteBoundingBox.width;
+      if (!n.layoutGrow && n.layoutSizingVertical == "FIXED")
+        dimensions.height = n.absoluteBoundingBox.height;
+      if (n.preserveRatio) {
+        dimensions.aspectRatio = n.absoluteBoundingBox?.width / n.absoluteBoundingBox?.height;
+      }
+    } else {
+      if (!n.layoutSizingHorizontal || n.layoutSizingHorizontal === "FIXED") {
+        dimensions.width = n.absoluteBoundingBox.width;
+      }
+      if (!n.layoutSizingVertical || n.layoutSizingVertical === "FIXED") {
+        dimensions.height = n.absoluteBoundingBox.height;
+      }
+    }
+    if (Object.keys(dimensions).length > 0) {
+      if (dimensions.width) {
+        dimensions.width = pixelRound(dimensions.width);
+      }
+      if (dimensions.height) {
+        dimensions.height = pixelRound(dimensions.height);
+      }
+      layoutValues.dimensions = dimensions;
+    }
+  }
+  return layoutValues;
+}
+function translateScaleMode(scaleMode, hasChildren, scalingFactor) {
+  const isBackground = hasChildren;
+  switch (scaleMode) {
+    case "FILL":
+      return {
+        css: isBackground ? { backgroundSize: "cover", backgroundRepeat: "no-repeat", isBackground: true } : { objectFit: "cover", isBackground: false },
+        processing: { needsCropping: false, requiresImageDimensions: false }
+      };
+    case "FIT":
+      return {
+        css: isBackground ? { backgroundSize: "contain", backgroundRepeat: "no-repeat", isBackground: true } : { objectFit: "contain", isBackground: false },
+        processing: { needsCropping: false, requiresImageDimensions: false }
+      };
+    case "TILE":
+      return {
+        css: {
+          backgroundRepeat: "repeat",
+          backgroundSize: scalingFactor ? `calc(var(--original-width) * ${scalingFactor}) calc(var(--original-height) * ${scalingFactor})` : "auto",
+          isBackground: true
+        },
+        processing: { needsCropping: false, requiresImageDimensions: true }
+      };
+    case "STRETCH":
+      return {
+        css: isBackground ? { backgroundSize: "100% 100%", backgroundRepeat: "no-repeat", isBackground: true } : { objectFit: "fill", isBackground: false },
+        processing: { needsCropping: false, requiresImageDimensions: false }
+      };
+    default:
+      return {
+        css: {},
+        processing: { needsCropping: false, requiresImageDimensions: false }
+      };
+  }
+}
+function generateTransformHash(transform) {
+  const values = transform.flat();
+  const hash = values.reduce((acc, val) => {
+    const str = val.toString();
+    for (let i = 0; i < str.length; i++) {
+      acc = (acc << 5) - acc + str.charCodeAt(i) & 4294967295;
+    }
+    return acc;
+  }, 0);
+  return Math.abs(hash).toString(16).substring(0, 6);
+}
+function handleImageTransform(imageTransform) {
+  const transformHash = generateTransformHash(imageTransform);
+  return {
+    needsCropping: true,
+    requiresImageDimensions: false,
+    cropTransform: imageTransform,
+    filenameSuffix: `${transformHash}`
+  };
+}
+function buildSimplifiedStrokes(n, hasChildren = false) {
+  let strokes = { colors: [] };
+  if (hasValue("strokes", n) && Array.isArray(n.strokes) && n.strokes.length) {
+    strokes.colors = n.strokes.filter(isVisible).map((stroke) => parsePaint(stroke, hasChildren));
+  }
+  if (hasValue("strokeWeight", n) && typeof n.strokeWeight === "number" && n.strokeWeight > 0) {
+    strokes.strokeWeight = `${n.strokeWeight}px`;
+  }
+  if (hasValue("strokeDashes", n) && Array.isArray(n.strokeDashes) && n.strokeDashes.length) {
+    strokes.strokeDashes = n.strokeDashes;
+  }
+  if (hasValue("individualStrokeWeights", n, isStrokeWeights)) {
+    strokes.strokeWeight = generateCSSShorthand(n.individualStrokeWeights);
+  }
+  return strokes;
+}
+function parsePaint(raw, hasChildren = false) {
+  if (raw.type === "IMAGE") {
+    const baseImageFill = {
+      type: "IMAGE",
+      imageRef: raw.imageRef,
+      scaleMode: raw.scaleMode,
+      scalingFactor: raw.scalingFactor
+    };
+    const isBackground = hasChildren || baseImageFill.scaleMode === "TILE";
+    const { css, processing } = translateScaleMode(
+      baseImageFill.scaleMode,
+      isBackground,
+      raw.scalingFactor
+    );
+    let finalProcessing = processing;
+    if (raw.imageTransform) {
+      const transformProcessing = handleImageTransform(raw.imageTransform);
+      finalProcessing = {
+        ...processing,
+        ...transformProcessing,
+        // Keep requiresImageDimensions from scale mode (needed for TILE)
+        requiresImageDimensions: processing.requiresImageDimensions || transformProcessing.requiresImageDimensions
+      };
+    }
+    return {
+      ...baseImageFill,
+      ...css,
+      imageDownloadArguments: finalProcessing
+    };
+  } else if (raw.type === "SOLID") {
+    const { hex, opacity } = convertColor(raw.color, raw.opacity);
+    if (opacity === 1) {
+      return hex;
+    } else {
+      return formatRGBAColor(raw.color, opacity);
+    }
+  } else if (raw.type === "PATTERN") {
+    return parsePatternPaint(raw);
+  } else if (["GRADIENT_LINEAR", "GRADIENT_RADIAL", "GRADIENT_ANGULAR", "GRADIENT_DIAMOND"].includes(
+    raw.type
+  )) {
+    return {
+      type: raw.type,
+      gradient: convertGradientToCss(raw)
+    };
+  } else {
+    throw new Error(`Unknown paint type: ${raw.type}`);
+  }
+}
+function parsePatternPaint(raw) {
+  let backgroundRepeat = "repeat";
+  let horizontal = "left";
+  switch (raw.horizontalAlignment) {
+    case "START":
+      horizontal = "left";
+      break;
+    case "CENTER":
+      horizontal = "center";
+      break;
+    case "END":
+      horizontal = "right";
+      break;
+  }
+  let vertical = "top";
+  switch (raw.verticalAlignment) {
+    case "START":
+      vertical = "top";
+      break;
+    case "CENTER":
+      vertical = "center";
+      break;
+    case "END":
+      vertical = "bottom";
+      break;
+  }
+  return {
+    type: raw.type,
+    patternSource: {
+      type: "IMAGE-PNG",
+      nodeId: raw.sourceNodeId
+    },
+    backgroundRepeat,
+    backgroundSize: `${Math.round(raw.scalingFactor * 100)}%`,
+    backgroundPosition: `${horizontal} ${vertical}`
+  };
+}
+function convertColor(color, opacity = 1) {
+  const r = Math.round(color.r * 255);
+  const g = Math.round(color.g * 255);
+  const b = Math.round(color.b * 255);
+  const a = Math.round(opacity * color.a * 100) / 100;
+  const hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+  return { hex, opacity: a };
+}
+function formatRGBAColor(color, opacity = 1) {
+  const r = Math.round(color.r * 255);
+  const g = Math.round(color.g * 255);
+  const b = Math.round(color.b * 255);
+  const a = Math.round(opacity * color.a * 100) / 100;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+function mapGradientStops(gradient, elementBounds = { width: 1, height: 1 }) {
+  const handles = gradient.gradientHandlePositions;
+  if (!handles || handles.length < 2) {
+    const stops = gradient.gradientStops.map(({ position, color }) => {
+      const cssColor = formatRGBAColor(color, 1);
+      return `${cssColor} ${Math.round(position * 100)}%`;
+    }).join(", ");
+    return { stops, cssGeometry: "0deg" };
+  }
+  const [handle1, handle2, handle3] = handles;
+  switch (gradient.type) {
+    case "GRADIENT_LINEAR": {
+      return mapLinearGradient(gradient.gradientStops, handle1, handle2);
+    }
+    case "GRADIENT_RADIAL": {
+      return mapRadialGradient(gradient.gradientStops, handle1);
+    }
+    case "GRADIENT_ANGULAR": {
+      return mapAngularGradient(gradient.gradientStops, handle1, handle2);
+    }
+    case "GRADIENT_DIAMOND": {
+      return mapDiamondGradient(gradient.gradientStops, handle1);
+    }
+    default: {
+      const stops = gradient.gradientStops.map(({ position, color }) => {
+        const cssColor = formatRGBAColor(color, 1);
+        return `${cssColor} ${Math.round(position * 100)}%`;
+      }).join(", ");
+      return { stops, cssGeometry: "0deg" };
+    }
+  }
+}
+function mapLinearGradient(gradientStops, start, end, elementBounds) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const gradientLength = Math.sqrt(dx * dx + dy * dy);
+  if (gradientLength === 0) {
+    const stops = gradientStops.map(({ position, color }) => {
+      const cssColor = formatRGBAColor(color, 1);
+      return `${cssColor} ${Math.round(position * 100)}%`;
+    }).join(", ");
+    return { stops, cssGeometry: "0deg" };
+  }
+  const angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+  const extendedIntersections = findExtendedLineIntersections(start, end);
+  if (extendedIntersections.length >= 2) {
+    const fullLineStart = Math.min(extendedIntersections[0], extendedIntersections[1]);
+    const fullLineEnd = Math.max(extendedIntersections[0], extendedIntersections[1]);
+    const mappedStops2 = gradientStops.map(({ position, color }) => {
+      const cssColor = formatRGBAColor(color, 1);
+      const figmaLinePosition = position;
+      const tOnExtendedLine = figmaLinePosition * (1 - 0) + 0;
+      const extendedPosition = (tOnExtendedLine - fullLineStart) / (fullLineEnd - fullLineStart);
+      const clampedPosition = Math.max(0, Math.min(1, extendedPosition));
+      return `${cssColor} ${Math.round(clampedPosition * 100)}%`;
+    });
+    return {
+      stops: mappedStops2.join(", "),
+      cssGeometry: `${Math.round(angle)}deg`
+    };
+  }
+  const mappedStops = gradientStops.map(({ position, color }) => {
+    const cssColor = formatRGBAColor(color, 1);
+    return `${cssColor} ${Math.round(position * 100)}%`;
+  });
+  return {
+    stops: mappedStops.join(", "),
+    cssGeometry: `${Math.round(angle)}deg`
+  };
+}
+function findExtendedLineIntersections(start, end) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  if (Math.abs(dx) < 1e-10 && Math.abs(dy) < 1e-10) {
+    return [];
+  }
+  const intersections = [];
+  if (Math.abs(dy) > 1e-10) {
+    const t = -start.y / dy;
+    const x = start.x + t * dx;
+    if (x >= 0 && x <= 1) {
+      intersections.push(t);
+    }
+  }
+  if (Math.abs(dy) > 1e-10) {
+    const t = (1 - start.y) / dy;
+    const x = start.x + t * dx;
+    if (x >= 0 && x <= 1) {
+      intersections.push(t);
+    }
+  }
+  if (Math.abs(dx) > 1e-10) {
+    const t = -start.x / dx;
+    const y = start.y + t * dy;
+    if (y >= 0 && y <= 1) {
+      intersections.push(t);
+    }
+  }
+  if (Math.abs(dx) > 1e-10) {
+    const t = (1 - start.x) / dx;
+    const y = start.y + t * dy;
+    if (y >= 0 && y <= 1) {
+      intersections.push(t);
+    }
+  }
+  const uniqueIntersections = [
+    ...new Set(intersections.map((t) => Math.round(t * 1e6) / 1e6))
+  ];
+  return uniqueIntersections.sort((a, b) => a - b);
+}
+function mapRadialGradient(gradientStops, center, edge, widthHandle, elementBounds) {
+  const centerX = Math.round(center.x * 100);
+  const centerY = Math.round(center.y * 100);
+  const stops = gradientStops.map(({ position, color }) => {
+    const cssColor = formatRGBAColor(color, 1);
+    return `${cssColor} ${Math.round(position * 100)}%`;
+  }).join(", ");
+  return {
+    stops,
+    cssGeometry: `circle at ${centerX}% ${centerY}%`
+  };
+}
+function mapAngularGradient(gradientStops, center, angleHandle, widthHandle, elementBounds) {
+  const centerX = Math.round(center.x * 100);
+  const centerY = Math.round(center.y * 100);
+  const angle = Math.atan2(angleHandle.y - center.y, angleHandle.x - center.x) * (180 / Math.PI) + 90;
+  const stops = gradientStops.map(({ position, color }) => {
+    const cssColor = formatRGBAColor(color, 1);
+    return `${cssColor} ${Math.round(position * 100)}%`;
+  }).join(", ");
+  return {
+    stops,
+    cssGeometry: `from ${Math.round(angle)}deg at ${centerX}% ${centerY}%`
+  };
+}
+function mapDiamondGradient(gradientStops, center, edge, widthHandle, elementBounds) {
+  const centerX = Math.round(center.x * 100);
+  const centerY = Math.round(center.y * 100);
+  const stops = gradientStops.map(({ position, color }) => {
+    const cssColor = formatRGBAColor(color, 1);
+    return `${cssColor} ${Math.round(position * 100)}%`;
+  }).join(", ");
+  return {
+    stops,
+    cssGeometry: `ellipse at ${centerX}% ${centerY}%`
+  };
+}
+function convertGradientToCss(gradient) {
+  const sortedGradient = {
+    ...gradient,
+    gradientStops: [...gradient.gradientStops].sort((a, b) => a.position - b.position)
+  };
+  const { stops, cssGeometry } = mapGradientStops(sortedGradient);
+  switch (gradient.type) {
+    case "GRADIENT_LINEAR": {
+      return `linear-gradient(${cssGeometry}, ${stops})`;
+    }
+    case "GRADIENT_RADIAL": {
+      return `radial-gradient(${cssGeometry}, ${stops})`;
+    }
+    case "GRADIENT_ANGULAR": {
+      return `conic-gradient(${cssGeometry}, ${stops})`;
+    }
+    case "GRADIENT_DIAMOND": {
+      return `radial-gradient(${cssGeometry}, ${stops})`;
+    }
+    default:
+      return `linear-gradient(0deg, ${stops})`;
+  }
+}
+function buildSimplifiedEffects(n) {
+  if (!hasValue("effects", n)) return {};
+  const effects = n.effects.filter((e) => e.visible);
+  const dropShadows = effects.filter((e) => e.type === "DROP_SHADOW").map(simplifyDropShadow);
+  const innerShadows = effects.filter((e) => e.type === "INNER_SHADOW").map(simplifyInnerShadow);
+  const boxShadow = [...dropShadows, ...innerShadows].join(", ");
+  const filterBlurValues = effects.filter((e) => e.type === "LAYER_BLUR").map(simplifyBlur).join(" ");
+  const backdropFilterValues = effects.filter((e) => e.type === "BACKGROUND_BLUR").map(simplifyBlur).join(" ");
+  const result = {};
+  if (boxShadow) {
+    if (n.type === "TEXT") {
+      result.textShadow = boxShadow;
+    } else {
+      result.boxShadow = boxShadow;
+    }
+  }
+  if (filterBlurValues) result.filter = filterBlurValues;
+  if (backdropFilterValues) result.backdropFilter = backdropFilterValues;
+  return result;
+}
+function simplifyDropShadow(effect) {
+  return `${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${effect.spread ?? 0}px ${formatRGBAColor(effect.color)}`;
+}
+function simplifyInnerShadow(effect) {
+  return `inset ${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${effect.spread ?? 0}px ${formatRGBAColor(effect.color)}`;
+}
+function simplifyBlur(effect) {
+  return `blur(${effect.radius}px)`;
+}
+function isTextNode(n) {
+  return n.type === "TEXT";
+}
+function hasTextStyle(n) {
+  return hasValue("style", n) && Object.keys(n.style).length > 0;
+}
+function extractNodeText(n) {
+  if (hasValue("characters", n, remeda.isTruthy)) {
+    return n.characters;
+  }
+  return void 0;
+}
+function extractTextStyle(n) {
+  if (hasTextStyle(n)) {
+    const style = n.style;
+    const textStyle = {
+      fontFamily: style.fontFamily,
+      fontWeight: style.fontWeight,
+      fontSize: style.fontSize,
+      lineHeight: "lineHeightPx" in style && style.lineHeightPx && style.fontSize ? `${style.lineHeightPx / style.fontSize}em` : void 0,
+      letterSpacing: style.letterSpacing && style.letterSpacing !== 0 && style.fontSize ? `${style.letterSpacing / style.fontSize * 100}%` : void 0,
+      textCase: style.textCase,
+      textAlignHorizontal: style.textAlignHorizontal,
+      textAlignVertical: style.textAlignVertical
+    };
+    return textStyle;
+  }
+  return void 0;
+}
+function findOrCreateVar(globalVars, value, prefix) {
+  const [existingVarId] = Object.entries(globalVars.styles).find(
+    ([_, existingValue]) => JSON.stringify(existingValue) === JSON.stringify(value)
+  ) ?? [];
+  if (existingVarId) {
+    return existingVarId;
+  }
+  const varId = generateVarId(prefix);
+  globalVars.styles[varId] = value;
+  return varId;
+}
+const layoutExtractor = (node, result, context) => {
+  const layout = buildSimplifiedLayout(node, context.parent);
+  if (Object.keys(layout).length > 1) {
+    result.layout = findOrCreateVar(context.globalVars, layout, "layout");
+  }
+};
+const textExtractor = (node, result, context) => {
+  if (isTextNode(node)) {
+    result.text = extractNodeText(node);
+  }
+  if (hasTextStyle(node)) {
+    const textStyle = extractTextStyle(node);
+    if (textStyle) {
+      const styleName = getStyleName(node, context, ["text", "typography"]);
+      if (styleName) {
+        context.globalVars.styles[styleName] = textStyle;
+        result.textStyle = styleName;
+      } else {
+        result.textStyle = findOrCreateVar(context.globalVars, textStyle, "style");
+      }
+    }
+  }
+};
+const visualsExtractor = (node, result, context) => {
+  const hasChildren = hasValue("children", node) && Array.isArray(node.children) && node.children.length > 0;
+  if (hasValue("fills", node) && Array.isArray(node.fills) && node.fills.length) {
+    const fills = node.fills.map((fill) => parsePaint(fill, hasChildren)).reverse();
+    const styleName = getStyleName(node, context, ["fill", "fills"]);
+    if (styleName) {
+      context.globalVars.styles[styleName] = fills;
+      result.fills = styleName;
+    } else {
+      result.fills = findOrCreateVar(context.globalVars, fills, "fill");
+    }
+  }
+  const strokes = buildSimplifiedStrokes(node, hasChildren);
+  if (strokes.colors.length) {
+    const styleName = getStyleName(node, context, ["stroke", "strokes"]);
+    if (styleName) {
+      context.globalVars.styles[styleName] = strokes.colors;
+      result.strokes = styleName;
+      if (strokes.strokeWeight) result.strokeWeight = strokes.strokeWeight;
+      if (strokes.strokeDashes) result.strokeDashes = strokes.strokeDashes;
+      if (strokes.strokeWeights) result.strokeWeights = strokes.strokeWeights;
+    } else {
+      result.strokes = findOrCreateVar(context.globalVars, strokes, "stroke");
+    }
+  }
+  const effects = buildSimplifiedEffects(node);
+  if (Object.keys(effects).length) {
+    const styleName = getStyleName(node, context, ["effect", "effects"]);
+    if (styleName) {
+      context.globalVars.styles[styleName] = effects;
+      result.effects = styleName;
+    } else {
+      result.effects = findOrCreateVar(context.globalVars, effects, "effect");
+    }
+  }
+  if (hasValue("opacity", node) && typeof node.opacity === "number" && node.opacity !== 1) {
+    result.opacity = node.opacity;
+  }
+  if (hasValue("cornerRadius", node) && typeof node.cornerRadius === "number") {
+    result.borderRadius = `${node.cornerRadius}px`;
+  }
+  if (hasValue("rectangleCornerRadii", node, isRectangleCornerRadii)) {
+    result.borderRadius = `${node.rectangleCornerRadii[0]}px ${node.rectangleCornerRadii[1]}px ${node.rectangleCornerRadii[2]}px ${node.rectangleCornerRadii[3]}px`;
+  }
+};
+const componentExtractor = (node, result, _context) => {
+  if (node.type === "INSTANCE") {
+    if (hasValue("componentId", node)) {
+      result.componentId = node.componentId;
+    }
+    if (hasValue("componentProperties", node)) {
+      result.componentProperties = Object.entries(node.componentProperties ?? {}).map(
+        ([name, { value, type }]) => ({
+          name,
+          value: value.toString(),
+          type
+        })
+      );
+    }
+  }
+};
+function getStyleName(node, context, keys) {
+  if (!hasValue("styles", node)) return void 0;
+  const styleMap = node.styles;
+  for (const key of keys) {
+    const styleId = styleMap[key];
+    if (styleId) {
+      const meta = context.globalVars.extraStyles?.[styleId];
+      if (meta?.name) return meta.name;
+    }
+  }
+  return void 0;
+}
+const allExtractors = [layoutExtractor, textExtractor, visualsExtractor, componentExtractor];
+const layoutAndText = [layoutExtractor, textExtractor];
+const contentOnly = [textExtractor];
+const visualsOnly = [visualsExtractor];
+const layoutOnly = [layoutExtractor];
+const SVG_ELIGIBLE_TYPES = /* @__PURE__ */ new Set([
+  "IMAGE-SVG",
+  "STAR",
+  "LINE",
+  "ELLIPSE",
+  "REGULAR_POLYGON",
+  "RECTANGLE"
+]);
+function collapseSvgContainers(node, result, children) {
+  const allChildrenAreSvgEligible = children.every(
+    (child) => SVG_ELIGIBLE_TYPES.has(child.type)
+  );
+  if ((node.type === "FRAME" || node.type === "GROUP" || node.type === "INSTANCE") && allChildrenAreSvgEligible) {
+    result.type = "IMAGE-SVG";
+    return [];
+  }
+  return children;
+}
+async function getFigmaMetadata(figmaUrl, options = {}) {
+  const { apiKey, oauthToken, useOAuth = false, outputFormat = "object", depth } = options;
+  if (!apiKey && !oauthToken) {
+    throw new Error("Either apiKey or oauthToken is required");
+  }
+  const urlMatch = figmaUrl.match(/figma\.com\/(file|design)\/([a-zA-Z0-9]+)/);
+  if (!urlMatch) {
+    throw new Error("Invalid Figma URL format");
+  }
+  const fileKey = urlMatch[2];
+  const nodeIdMatch = figmaUrl.match(/node-id=([^&]+)/);
+  const nodeId = nodeIdMatch ? nodeIdMatch[1].replace(/-/g, ":") : void 0;
+  const figmaService = new FigmaService({
+    figmaApiKey: apiKey || "",
+    figmaOAuthToken: oauthToken || "",
+    useOAuth: useOAuth && !!oauthToken
+  });
+  try {
+    Logger.log(
+      `Fetching ${depth ? `${depth} layers deep` : "all layers"} of ${nodeId ? `node ${nodeId} from file` : `full file`} ${fileKey}`
+    );
+    let rawApiResponse;
+    if (nodeId) {
+      rawApiResponse = await figmaService.getRawNode(fileKey, nodeId, depth || void 0);
+    } else {
+      rawApiResponse = await figmaService.getRawFile(fileKey, depth || void 0);
+    }
+    const simplifiedDesign = simplifyRawFigmaObject(rawApiResponse, allExtractors, {
+      maxDepth: depth || void 0,
+      afterChildren: collapseSvgContainers
+    });
+    Logger.log(
+      `Successfully extracted data: ${simplifiedDesign.nodes.length} nodes, ${Object.keys(simplifiedDesign.globalVars?.styles || {}).length} styles`
+    );
+    const { nodes, globalVars, ...metadata } = simplifiedDesign;
+    const result = {
+      metadata,
+      nodes,
+      globalVars
+    };
+    if (outputFormat === "json") {
+      return JSON.stringify(result, null, 2);
+    } else if (outputFormat === "yaml") {
+      return yaml.dump(result);
+    } else {
+      return result;
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    Logger.error(`Error fetching file ${fileKey}:`, message);
+    throw new Error(`Failed to fetch Figma data: ${message}`);
+  }
+}
+async function downloadFigmaImages(figmaUrl, nodes, options) {
+  const { apiKey, oauthToken, useOAuth = false, pngScale = 2, localPath } = options;
+  if (!apiKey && !oauthToken) {
+    throw new Error("Either apiKey or oauthToken is required");
+  }
+  const urlMatch = figmaUrl.match(/figma\.com\/(file|design)\/([a-zA-Z0-9]+)/);
+  if (!urlMatch) {
+    throw new Error("Invalid Figma URL format");
+  }
+  const fileKey = urlMatch[2];
+  const figmaService = new FigmaService({
+    figmaApiKey: apiKey || "",
+    figmaOAuthToken: oauthToken || "",
+    useOAuth: useOAuth && !!oauthToken
+  });
+  try {
+    const processedNodes = nodes.map((node) => ({
+      ...node,
+      nodeId: node.nodeId.replace(/-/g, ":")
+    }));
+    const results = await figmaService.downloadImages(fileKey, localPath, processedNodes, {
+      pngScale
+    });
+    return results;
+  } catch (error) {
+    Logger.error(`Error downloading images from ${fileKey}:`, error);
+    throw new Error(`Failed to download images: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+exports.allExtractors = allExtractors;
+exports.collapseSvgContainers = collapseSvgContainers;
+exports.componentExtractor = componentExtractor;
+exports.contentOnly = contentOnly;
+exports.downloadFigmaImages = downloadFigmaImages;
+exports.extractFromDesign = extractFromDesign;
+exports.getFigmaMetadata = getFigmaMetadata;
+exports.layoutAndText = layoutAndText;
+exports.layoutExtractor = layoutExtractor;
+exports.layoutOnly = layoutOnly;
+exports.simplifyRawFigmaObject = simplifyRawFigmaObject;
+exports.textExtractor = textExtractor;
+exports.visualsExtractor = visualsExtractor;
+exports.visualsOnly = visualsOnly;