@design-embed/plugin-figma-html 0.1.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2026 Jin-Woo Lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# @design-embed/plugin-figma-html
+
+The official Figma source plugin for design-embed.
+
+It fetches an explicitly requested Figma node, downloads referenced image fills, and converts the design payload into raw HTML that can be passed into the local compiler. This package is intentionally separate from the core compiler because Figma access may require network calls and credentials, while core compilation stays local and deterministic.

package/dist/compilers/compilerUtils.js

@@ -0,0 +1,182 @@
+export function toComponentName(name, fallback = "FigmaExport") {
+    const cleaned = (name || "").replace(/[^a-zA-Z0-9가-힣]/g, "");
+    if (!cleaned)
+        return fallback;
+    return /^[0-9]/.test(cleaned) ? `${fallback}${cleaned}` : cleaned;
+}
+export function escapeHtml(value) {
+    return (value || "")
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+export function escapeJsString(value) {
+    return JSON.stringify(value || "");
+}
+export function getNodeStyles(node, parent) {
+    const styles = {};
+    const bounds = node.absoluteBoundingBox;
+    const parentBounds = parent?.absoluteBoundingBox;
+    const parentUsesLayout = Boolean(parent?.layoutMode && parent.layoutMode !== "NONE");
+    const isAbsoluteChild = Boolean(parent && (!parentUsesLayout || node.layoutPositioning === "ABSOLUTE"));
+    if (isAbsoluteChild && bounds && parentBounds) {
+        styles.position = "absolute";
+        styles.left = `${Math.round((bounds.x || 0) - (parentBounds.x || 0))}px`;
+        styles.top = `${Math.round((bounds.y || 0) - (parentBounds.y || 0))}px`;
+    }
+    else if (node.children?.length || node.layoutMode === "NONE") {
+        styles.position = "relative";
+    }
+    if (bounds && node.layoutSizingHorizontal !== "HUG") {
+        styles.width = `${Math.round(bounds.width || 0)}px`;
+    }
+    if (bounds && node.layoutSizingVertical !== "HUG") {
+        styles.height = `${Math.round(bounds.height || 0)}px`;
+    }
+    if (node.layoutMode === "HORIZONTAL" || node.layoutMode === "VERTICAL") {
+        styles.display = "flex";
+        styles.flexDirection = node.layoutMode === "HORIZONTAL" ? "row" : "column";
+        styles.boxSizing = "border-box";
+        if (node.layoutWrap === "WRAP")
+            styles.flexWrap = "wrap";
+        if (node.itemSpacing !== undefined)
+            styles.gap = `${Math.round(node.itemSpacing)}px`;
+        if (node.counterAxisSpacing !== undefined && node.layoutWrap === "WRAP") {
+            styles.rowGap = `${Math.round(node.counterAxisSpacing)}px`;
+        }
+        styles.justifyContent = mapPrimaryAxisAlignment(node.primaryAxisAlignItems);
+        styles.alignItems = mapCounterAxisAlignment(node.counterAxisAlignItems);
+    }
+    else if (node.layoutMode === "GRID") {
+        styles.display = "grid";
+        styles.boxSizing = "border-box";
+        if (node.gridColumnsSizing)
+            styles.gridTemplateColumns = node.gridColumnsSizing;
+        if (node.gridRowsSizing)
+            styles.gridTemplateRows = node.gridRowsSizing;
+        if (node.gridColumnGap !== undefined)
+            styles.columnGap = `${Math.round(node.gridColumnGap)}px`;
+        if (node.gridRowGap !== undefined)
+            styles.rowGap = `${Math.round(node.gridRowGap)}px`;
+    }
+    if (node.layoutSizingHorizontal === "FILL" || node.layoutGrow === 1) {
+        styles.flex = 1;
+        styles.width = "100%";
+    }
+    if (node.layoutSizingVertical === "FILL") {
+        styles.height = "100%";
+    }
+    if (node.layoutAlign === "STRETCH") {
+        styles.alignSelf = "stretch";
+    }
+    if (node.gridColumnSpan && node.gridColumnSpan > 1) {
+        styles.gridColumn = `span ${node.gridColumnSpan}`;
+    }
+    if (node.gridRowSpan && node.gridRowSpan > 1) {
+        styles.gridRow = `span ${node.gridRowSpan}`;
+    }
+    if (node.paddingTop !== undefined)
+        styles.paddingTop = `${node.paddingTop}px`;
+    if (node.paddingBottom !== undefined)
+        styles.paddingBottom = `${node.paddingBottom}px`;
+    if (node.paddingLeft !== undefined)
+        styles.paddingLeft = `${node.paddingLeft}px`;
+    if (node.paddingRight !== undefined)
+        styles.paddingRight = `${node.paddingRight}px`;
+    if (node.clipsContent)
+        styles.overflow = "hidden";
+    if (node.opacity !== undefined && node.opacity !== 1)
+        styles.opacity = node.opacity;
+    const fill = node.fills?.find((item) => item.type === "SOLID" && item.color);
+    if (fill?.color) {
+        if (node.type === "TEXT") {
+            styles.color = toRgba(fill.color, fill.opacity ?? 1);
+        }
+        else {
+            styles.backgroundColor = toRgba(fill.color, fill.opacity ?? 1);
+        }
+    }
+    const imageFill = node.fills?.find((item) => item.type === "IMAGE" && (item.imageLocalPath || item.imageUrl));
+    const imageSource = imageFill?.imageLocalPath || imageFill?.imageUrl;
+    if (imageSource) {
+        styles.backgroundImage = `url("${imageSource}")`;
+        styles.backgroundRepeat = "no-repeat";
+        styles.backgroundPosition = "center";
+        styles.backgroundSize = mapImageScaleMode(imageFill.scaleMode);
+    }
+    const stroke = node.strokes?.find((item) => item.type === "SOLID" && item.color);
+    if (stroke?.color && node.strokeWeight) {
+        styles.border = `${Math.round(node.strokeWeight)}px solid ${toRgba(stroke.color, stroke.opacity ?? 1)}`;
+        styles.boxSizing = "border-box";
+    }
+    if (node.rectangleCornerRadii?.length === 4) {
+        styles.borderRadius = node.rectangleCornerRadii
+            .map((radius) => `${Math.round(radius)}px`)
+            .join(" ");
+    }
+    else if (node.cornerRadius) {
+        styles.borderRadius = `${Math.round(node.cornerRadius)}px`;
+    }
+    if (node.type === "TEXT") {
+        const textStyle = node.style || {};
+        if (textStyle.fontSize)
+            styles.fontSize = `${textStyle.fontSize}px`;
+        if (textStyle.fontWeight)
+            styles.fontWeight = textStyle.fontWeight;
+        if (textStyle.fontFamily)
+            styles.fontFamily = `"${textStyle.fontFamily}", sans-serif`;
+        if (textStyle.lineHeightPx)
+            styles.lineHeight = `${Math.round(textStyle.lineHeightPx)}px`;
+    }
+    return styles;
+}
+export function toReactStyle(styles) {
+    return JSON.stringify(styles).replace(/"([^"]+)":/g, "$1:");
+}
+export function toCssText(styles) {
+    return Object.entries(styles)
+        .map(([key, value]) => `${toKebabCase(key)}: ${value};`)
+        .join(" ");
+}
+function toKebabCase(value) {
+    return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+function mapPrimaryAxisAlignment(value) {
+    switch (value) {
+        case "CENTER":
+            return "center";
+        case "MAX":
+            return "flex-end";
+        case "SPACE_BETWEEN":
+            return "space-between";
+        default:
+            return "flex-start";
+    }
+}
+function mapCounterAxisAlignment(value) {
+    switch (value) {
+        case "CENTER":
+            return "center";
+        case "MAX":
+            return "flex-end";
+        case "BASELINE":
+            return "baseline";
+        default:
+            return "flex-start";
+    }
+}
+function mapImageScaleMode(value) {
+    switch (value) {
+        case "FIT":
+            return "contain";
+        case "TILE":
+            return "auto";
+        default:
+            return "cover";
+    }
+}
+function toRgba(color, opacity) {
+    return `rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${opacity})`;
+}

package/dist/compilers/htmlCompiler.js

@@ -0,0 +1,35 @@
+import { escapeHtml, getNodeStyles, toCssText } from "./compilerUtils.js";
+export const compileHtml = (node) => [
+    {
+        path: "index.html",
+        contents: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${escapeHtml(node.name || "Figma Export")}</title>
+  </head>
+  <body>
+${walkHtml(node, undefined, 2).trimEnd()}
+  </body>
+</html>
+`,
+    },
+];
+function walkHtml(node, parent, depth = 0) {
+    if (!node || node.visible === false)
+        return "";
+    const indent = "  ".repeat(depth);
+    const childIndent = "  ".repeat(depth + 1);
+    const name = escapeHtml(node.name || "LayoutBox");
+    const style = escapeHtml(toCssText(getNodeStyles(node, parent)));
+    if (node.type === "TEXT") {
+        return `${indent}<span style="${style}" data-layer="${name}">
+${childIndent}${escapeHtml(node.characters)}
+${indent}</span>\n`;
+    }
+    const children = node.children?.map((child) => walkHtml(child, node, depth + 1)).join("") ||
+        "";
+    return `${indent}<div style="${style}" data-layer="${name}">
+${children}${indent}</div>\n`;
+}

package/dist/compilers/index.js

@@ -0,0 +1,17 @@
+import { compileHtml } from "./htmlCompiler.js";
+import { compileReact } from "./reactCompiler.js";
+import { compileVanjs } from "./vanjsCompiler.js";
+export { compileHtml } from "./htmlCompiler.js";
+export { compileReact } from "./reactCompiler.js";
+export { compileVanjs } from "./vanjsCompiler.js";
+export const compilers = {
+    react: compileReact,
+    html: compileHtml,
+    vanjs: compileVanjs,
+};
+export function isCompilerMode(value) {
+    return Boolean(value && value in compilers);
+}
+export function getCompiler(mode) {
+    return compilers[mode];
+}

package/dist/compilers/reactCompiler.js

@@ -0,0 +1,58 @@
+import { escapeHtml, escapeJsString, getNodeStyles, toComponentName, toReactStyle, } from "./compilerUtils.js";
+export const compileReact = (node) => {
+    const componentName = toComponentName(node.name);
+    return [
+        {
+            path: "FigmaComponent.tsx",
+            contents: `import React from 'react';
+
+/**
+ * Auto-generated UI component from Figma frame: "${escapeHtml(node.name)}"
+ */
+export const ${componentName}: React.FC = () => {
+  return (
+${walkReact(node).trimEnd()}
+  );
+};
+
+export default ${componentName};
+`,
+        },
+    ];
+};
+function walkReact(node, depth = 2) {
+    if (!node || node.visible === false)
+        return "";
+    const indent = "  ".repeat(depth);
+    const childIndent = "  ".repeat(depth + 1);
+    const name = escapeHtml(node.name || "LayoutBox");
+    const styles = toReactStyle(getNodeStyles(node));
+    if (node.type === "TEXT") {
+        return `${indent}<span style={${styles}} data-layer={${escapeJsString(node.name || "LayoutBox")}}>
+${childIndent}{${escapeJsString(node.characters)}}
+${indent}</span>\n`;
+    }
+    const children = node.children
+        ?.map((child) => walkReactWithParent(child, node, depth + 1))
+        .join("") || "";
+    return `${indent}<div style={${styles}} data-layer="${name}">
+${children}${indent}</div>\n`;
+}
+function walkReactWithParent(node, parent, depth) {
+    if (!node || node.visible === false)
+        return "";
+    const indent = "  ".repeat(depth);
+    const childIndent = "  ".repeat(depth + 1);
+    const name = escapeHtml(node.name || "LayoutBox");
+    const styles = toReactStyle(getNodeStyles(node, parent));
+    if (node.type === "TEXT") {
+        return `${indent}<span style={${styles}} data-layer={${escapeJsString(node.name || "LayoutBox")}}>
+${childIndent}{${escapeJsString(node.characters)}}
+${indent}</span>\n`;
+    }
+    const children = node.children
+        ?.map((child) => walkReactWithParent(child, node, depth + 1))
+        .join("") || "";
+    return `${indent}<div style={${styles}} data-layer="${name}">
+${children}${indent}</div>\n`;
+}

package/dist/compilers/vanjsCompiler.js

@@ -0,0 +1,55 @@
+import { escapeHtml, escapeJsString, getNodeStyles, toCssText, } from "./compilerUtils.js";
+export const compileVanjs = (node) => [
+    {
+        path: "index.html",
+        contents: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${escapeHtml(node.name || "Figma Export")}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
+`,
+    },
+    {
+        path: "main.js",
+        contents: `import van from 'https://cdn.jsdelivr.net/npm/vanjs-core@1.5.5/src/van.min.js';
+
+const { div, span } = van.tags;
+
+const App = () => (
+${walkVanjs(node, undefined, 1).trimEnd()}
+);
+
+van.add(document.getElementById('app'), App());
+`,
+    },
+];
+function walkVanjs(node, parent, depth = 0) {
+    if (!node || node.visible === false)
+        return "null";
+    const indent = "  ".repeat(depth);
+    const childIndent = "  ".repeat(depth + 1);
+    const tag = node.type === "TEXT" ? "span" : "div";
+    const props = `{
+${childIndent}style: ${escapeJsString(toCssText(getNodeStyles(node, parent)))},
+${childIndent}"data-layer": ${escapeJsString(node.name || "LayoutBox")}
+${indent}}`;
+    if (node.type === "TEXT") {
+        return `${indent}${tag}(${props}, ${escapeJsString(node.characters)})\n`;
+    }
+    const children = (node.children || [])
+        .map((child) => walkVanjs(child, node, depth + 1))
+        .filter((value) => value.trim() !== "null")
+        .join(",");
+    if (!children) {
+        return `${indent}${tag}(${props})\n`;
+    }
+    return `${indent}${tag}(${props},
+${children}${indent})\n`;
+}

package/dist/external/figmaApi.js

@@ -0,0 +1,74 @@
+export function extractParamsFromURL(input) {
+    const cleanInput = input.trim();
+    const fileKeyPattern = /figma\.com\/(?:file|design)\/([^/]+)/;
+    const fileKeyMatch = cleanInput.match(fileKeyPattern);
+    const fileKey = fileKeyMatch?.[1] || cleanInput;
+    let nodeId = null;
+    try {
+        if (cleanInput.includes("figma.com")) {
+            const url = new URL(cleanInput);
+            const rawNodeId = url.searchParams.get("node-id");
+            if (rawNodeId) {
+                nodeId = rawNodeId.replace(/-/g, ":");
+            }
+        }
+    }
+    catch {
+        // Treat non-URL input as a raw Figma file key.
+    }
+    return { fileKey, nodeId };
+}
+export async function fetchFigmaNode(fileKey, nodeId, options) {
+    const data = (await fetchFigmaApiResponse(fileKey, nodeId, options));
+    const rootNode = nodeId ? data.nodes?.[nodeId]?.document : data.document;
+    if (!rootNode) {
+        throw new Error(`Could not find valid element tree for Node ID: ${nodeId}`);
+    }
+    const imageFills = await fetchFigmaImageFills(fileKey, options);
+    attachImageFillUrls(rootNode, imageFills);
+    return rootNode;
+}
+export async function fetchFigmaApiResponse(fileKey, nodeId, options) {
+    const endpoint = buildFigmaNodeEndpoint(fileKey, nodeId);
+    const fetcher = options.fetcher ?? fetch;
+    const response = await fetcher(endpoint, {
+        method: "GET",
+        headers: { "X-Figma-Token": options.token },
+    });
+    if (!response.ok) {
+        throw new Error(`Figma API Error: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+}
+export function buildFigmaNodeEndpoint(fileKey, nodeId) {
+    if (!nodeId) {
+        return `https://api.figma.com/v1/files/${fileKey}?depth=2`;
+    }
+    return `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${encodeURIComponent(nodeId)}`;
+}
+export async function fetchFigmaImageFills(fileKey, options) {
+    const endpoint = buildFigmaImageFillsEndpoint(fileKey);
+    const fetcher = options.fetcher ?? fetch;
+    const response = await fetcher(endpoint, {
+        method: "GET",
+        headers: { "X-Figma-Token": options.token },
+    });
+    if (!response.ok) {
+        throw new Error(`Figma image fills API Error: ${response.status} ${response.statusText}`);
+    }
+    const data = (await response.json());
+    return Object.fromEntries(Object.entries(data.images || {}).filter((entry) => typeof entry[1] === "string"));
+}
+export function buildFigmaImageFillsEndpoint(fileKey) {
+    return `https://api.figma.com/v1/files/${fileKey}/images`;
+}
+function attachImageFillUrls(node, imageFills) {
+    for (const fill of node.fills || []) {
+        if (fill.type === "IMAGE" && fill.imageRef) {
+            fill.imageUrl = imageFills[fill.imageRef];
+        }
+    }
+    for (const child of node.children || []) {
+        attachImageFillUrls(child, imageFills);
+    }
+}

package/dist/external/imageDownloader.js

@@ -0,0 +1,82 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join, posix } from "node:path";
+export async function downloadFigmaImageFills(rootNode, outDir, options = {}) {
+    const targets = collectImageFillTargets(rootNode);
+    const uniqueTargets = Array.from(new Map(targets.map((target) => [target.imageRef, target])).values());
+    if (uniqueTargets.length === 0)
+        return [];
+    mkdirSync(outDir, { recursive: true });
+    const downloadedImages = await Promise.all(uniqueTargets.map((target) => downloadImageFill(target, outDir, options)));
+    const publicPathByRef = new Map(downloadedImages.map((image) => [image.imageRef, image.publicPath]));
+    for (const target of targets) {
+        const fill = target.fills[target.fillIndex];
+        if (fill) {
+            fill.imageLocalPath = publicPathByRef.get(target.imageRef);
+        }
+    }
+    return downloadedImages;
+}
+function collectImageFillTargets(node) {
+    const targets = [];
+    node.fills?.forEach((fill, fillIndex, fills) => {
+        if (fill.type === "IMAGE" && fill.imageRef && fill.imageUrl) {
+            targets.push({
+                imageRef: fill.imageRef,
+                imageUrl: fill.imageUrl,
+                fills,
+                fillIndex,
+            });
+        }
+    });
+    for (const child of node.children || []) {
+        targets.push(...collectImageFillTargets(child));
+    }
+    return targets;
+}
+async function downloadImageFill(target, outDir, options) {
+    const fetcher = options.fetcher ?? fetch;
+    const response = await fetcher(target.imageUrl);
+    if (!response.ok) {
+        throw new Error(`Figma image download failed for ${target.imageRef}: ${response.status} ${response.statusText}`);
+    }
+    const extension = extensionFromResponse(response, target.imageUrl);
+    const filename = `${sanitizeFilename(target.imageRef)}.${extension}`;
+    const filePath = join(outDir, filename);
+    const publicPath = posix.join(options.publicPath || outDir, filename);
+    writeFileSync(filePath, Buffer.from(await response.arrayBuffer()));
+    return {
+        imageRef: target.imageRef,
+        sourceUrl: target.imageUrl,
+        filePath,
+        publicPath,
+    };
+}
+function extensionFromResponse(response, url) {
+    const contentType = response.headers.get("content-type")?.split(";")[0];
+    switch (contentType) {
+        case "image/jpeg":
+            return "jpg";
+        case "image/png":
+            return "png";
+        case "image/svg+xml":
+            return "svg";
+        case "image/webp":
+            return "webp";
+        case "image/gif":
+            return "gif";
+    }
+    const pathname = safeUrlPathname(url);
+    const extension = pathname.match(/\.([a-z0-9]+)$/i)?.[1]?.toLowerCase();
+    return extension || "img";
+}
+function safeUrlPathname(url) {
+    try {
+        return new URL(url).pathname;
+    }
+    catch {
+        return url;
+    }
+}
+function sanitizeFilename(value) {
+    return value.replace(/[^a-zA-Z0-9_-]/g, "_");
+}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { compileHtml, compileReact, compileVanjs, getCompiler, isCompilerMode, } from "./compilers/index.js";
+export { extractParamsFromURL, fetchFigmaApiResponse, fetchFigmaNode, } from "./external/figmaApi.js";
+export { FigmaHtmlPlugin } from "./plugin.js";

package/dist/plugin.js

@@ -0,0 +1,56 @@
+import { join } from "node:path";
+import { compileHtml } from "./compilers/index.js";
+import { extractParamsFromURL, fetchFigmaNode } from "./external/figmaApi.js";
+import { downloadFigmaImageFills } from "./external/imageDownloader.js";
+export class FigmaHtmlPlugin {
+    options;
+    name = "figma-html";
+    constructor(options) {
+        this.options = options;
+    }
+    async run(input) {
+        const { url, token: optionsToken, assetsDir = "assets" } = this.options;
+        const token = optionsToken ?? process.env.FIGMA_TOKEN;
+        if (!token) {
+            return {
+                diagnostics: [
+                    {
+                        code: "FIGMA_TOKEN_REQUIRED",
+                        message: "figma-html requires a Figma token. Pass token in the FigmaHtmlPlugin constructor or set the FIGMA_TOKEN environment variable.",
+                        severity: "error",
+                    },
+                ],
+            };
+        }
+        try {
+            const { fileKey, nodeId } = extractParamsFromURL(url);
+            const rootNode = await fetchFigmaNode(fileKey, nodeId, { token });
+            const downloadedImages = await downloadFigmaImageFills(rootNode, join(input.cwd, assetsDir), { publicPath: assetsDir });
+            const [htmlFile] = compileHtml(rootNode);
+            return {
+                html: htmlFile?.contents,
+                diagnostics: downloadedImages.length > 0
+                    ? [
+                        {
+                            code: "FIGMA_ASSETS_DOWNLOADED",
+                            message: `Downloaded ${downloadedImages.length} image asset(s).`,
+                            severity: "info",
+                        },
+                    ]
+                    : [],
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            return {
+                diagnostics: [
+                    {
+                        code: "FIGMA_HTML_FAILED",
+                        message,
+                        severity: "error",
+                    },
+                ],
+            };
+        }
+    }
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/node_modules/@design-embed/config/README.md

@@ -0,0 +1,5 @@
+# @design-embed/config
+
+Internal configuration loading and validation for design-embed.
+
+It parses the project config format used by the compiler, validates supported output targets, style modes, component mappings, token settings, plugin settings, and local transformer declarations. It also reports config diagnostics in a stable shape so callers can fail early before compilation begins.