@styleframe/figma 1.0.0

package/dist/index.js

@@ -0,0 +1,831 @@
+import { formatHex, formatHex8, parse } from "culori";
+
+//#region src/converters/name-mapping.ts
+/**
+* Convert Styleframe variable name to Figma format
+* @example "color.primary" → "color/primary"
+*/
+function styleframeToFigmaName(name) {
+	return name.replace(/\./g, "/");
+}
+/**
+* Convert Figma variable name to Styleframe format
+* @example "color/primary" → "color.primary"
+*/
+function figmaToStyleframeName(name) {
+	return name.replace(/\//g, ".");
+}
+/**
+* Extract the category (first segment) from a variable name
+* @example "color.primary.500" → "color"
+* @example "color/primary/500" → "color"
+*/
+function extractCategory(name) {
+	const separator = name.includes("/") ? "/" : ".";
+	return name.split(separator)[0] ?? "";
+}
+/**
+* Extract the key (last segment) from a variable name
+* @example "color.primary.500" → "500"
+* @example "spacing.md" → "md"
+*/
+function extractKey(name) {
+	const separator = name.includes("/") ? "/" : ".";
+	const parts = name.split(separator);
+	return parts[parts.length - 1] ?? "";
+}
+/**
+* Convert a Styleframe variable name to a camelCase JavaScript identifier
+* @example "color.primary" → "colorPrimary"
+* @example "spacing.md" → "spacingMd"
+*/
+function toVariableIdentifier(name) {
+	return (name.includes("/") ? figmaToStyleframeName(name) : name).split(".").map((part, index) => index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+/**
+* Convert a CSS custom property name to Styleframe format
+* @example "--color--primary" → "color.primary"
+*/
+function cssVariableToStyleframeName(cssName) {
+	return cssName.replace(/^--/, "").replace(/--/g, ".");
+}
+/**
+* Convert a Styleframe name to CSS custom property format
+* @example "color.primary" → "--color--primary"
+*/
+function styleframeToCssVariable(name) {
+	return `--${name.replace(/\./g, "--")}`;
+}
+
+//#endregion
+//#region src/converters/value-parsing.ts
+/**
+* Convert a CSS color string to Figma RGBA format (0-1 range)
+* Supports: hex, rgb(), rgba(), hsl(), hsla(), named colors
+*/
+function cssColorToFigma(value) {
+	const parsed = parse(value);
+	if (!parsed) return null;
+	const rgb = parsed;
+	return {
+		r: rgb.r ?? 0,
+		g: rgb.g ?? 0,
+		b: rgb.b ?? 0,
+		a: rgb.alpha ?? 1
+	};
+}
+/**
+* Convert Figma RGBA format (0-1 range) to CSS hex color
+*/
+function figmaColorToCss(rgba) {
+	const color = {
+		mode: "rgb",
+		r: rgba.r,
+		g: rgba.g,
+		b: rgba.b,
+		alpha: rgba.a ?? 1
+	};
+	if (rgba.a !== void 0 && rgba.a < 1) return formatHex8(color) ?? "#000000";
+	return formatHex(color) ?? "#000000";
+}
+function parseDimension(value) {
+	const match = value.match(/^(-?\d*\.?\d+)(px|rem|em|%|vh|vw|vmin|vmax|ch)?$/);
+	if (!match) return null;
+	return {
+		value: Number.parseFloat(match[1] ?? "0"),
+		unit: match[2] ?? ""
+	};
+}
+/**
+* Convert a CSS dimension to a pixel number
+*/
+function dimensionToPixels(value, baseFontSize = 16) {
+	const parsed = parseDimension(value);
+	if (!parsed) return null;
+	switch (parsed.unit) {
+		case "px":
+		case "": return parsed.value;
+		case "rem":
+		case "em": return parsed.value * baseFontSize;
+		case "%": return parsed.value;
+		default: return null;
+	}
+}
+/**
+* Convert a pixel value to a CSS dimension
+*/
+function pixelsToDimension(pixels, unit = "px", baseFontSize = 16) {
+	switch (unit) {
+		case "rem": return `${pixels / baseFontSize}rem`;
+		case "em": return `${pixels / baseFontSize}em`;
+		case "%": return `${pixels}%`;
+		case "px":
+		default: return `${pixels}px`;
+	}
+}
+/**
+* Detect if a string value is a color
+*/
+function isColorValue(value) {
+	if (value.startsWith("#")) return true;
+	if (value.startsWith("rgb")) return true;
+	if (value.startsWith("hsl")) return true;
+	if (value.startsWith("oklch")) return true;
+	if (value.startsWith("oklab")) return true;
+	if (value.startsWith("lch")) return true;
+	if (value.startsWith("lab")) return true;
+	return parse(value) !== void 0;
+}
+/**
+* Detect if a string value is a dimension
+*/
+function isDimensionValue(value) {
+	return parseDimension(value) !== null;
+}
+/**
+* Detect the Figma variable type from a Styleframe value
+*/
+function detectFigmaType(value) {
+	if (typeof value === "boolean") return "BOOLEAN";
+	if (typeof value === "number") return "FLOAT";
+	if (typeof value === "string") {
+		if (isColorValue(value)) return "COLOR";
+		if (isDimensionValue(value)) return "FLOAT";
+		return "STRING";
+	}
+	return "STRING";
+}
+/**
+* Convert a Styleframe token value to a Figma-compatible value
+*/
+function styleframeValueToFigma(value, type, baseFontSize = 16) {
+	if (typeof value === "boolean") return value;
+	if (typeof value === "number") return value;
+	if (typeof value !== "string") return null;
+	switch (type) {
+		case "COLOR": return cssColorToFigma(value);
+		case "FLOAT": return dimensionToPixels(value, baseFontSize);
+		case "BOOLEAN": return value === "true";
+		case "STRING":
+		default: return value;
+	}
+}
+/**
+* Convert a Figma variable value to a Styleframe-compatible CSS value
+*/
+function figmaValueToStyleframe(value, type, useRem = false, baseFontSize = 16) {
+	switch (type) {
+		case "COLOR":
+			if (typeof value === "object" && "r" in value) return figmaColorToCss(value);
+			return String(value);
+		case "FLOAT":
+			if (typeof value === "number") {
+				if (useRem) return `${value / baseFontSize}rem`;
+				return `${value}px`;
+			}
+			return typeof value === "string" ? value : String(value);
+		case "BOOLEAN": return Boolean(value);
+		case "STRING":
+		default: return String(value);
+	}
+}
+
+//#endregion
+//#region src/converters/codegen.ts
+/**
+* Known composable categories and their function names
+*/
+const COMPOSABLE_MAP = {
+	color: "useColor",
+	spacing: "useSpacing",
+	fontSize: "useFontSize",
+	fontWeight: "useFontWeight",
+	fontFamily: "useFontFamily",
+	lineHeight: "useLineHeight",
+	letterSpacing: "useLetterSpacing",
+	borderWidth: "useBorderWidth",
+	borderRadius: "useBorderRadius",
+	boxShadow: "useBoxShadow"
+};
+/**
+* Check if a value is a Figma variable alias
+*/
+function isVariableAlias(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "VARIABLE_ALIAS";
+}
+/**
+* Check if a value is a Figma RGBA color
+*/
+function isFigmaColor(value) {
+	return typeof value === "object" && value !== null && "r" in value && "g" in value && "b" in value;
+}
+/**
+* Parse Figma export format into structured data for code generation
+*/
+function parseVariables(data, options) {
+	const { useRem = false, baseFontSize = 16, defaultModeName } = options;
+	const defaultMode = defaultModeName || data.modes[0] || "Default";
+	const themeNames = data.modes.filter((m) => m !== defaultMode);
+	const nameMap = /* @__PURE__ */ new Map();
+	for (const v of data.variables) nameMap.set(v.name, figmaToStyleframeName(v.name));
+	const variables = [];
+	const themeVariablesMap = /* @__PURE__ */ new Map();
+	for (const themeName of themeNames) themeVariablesMap.set(themeName, []);
+	for (const variable of data.variables) {
+		const styleframeName = figmaToStyleframeName(variable.name);
+		const category = extractCategory(styleframeName);
+		const defaultValue = variable.values[defaultMode];
+		if (defaultValue === void 0) continue;
+		let type = "string";
+		if (variable.type === "COLOR") type = "color";
+		else if (variable.type === "FLOAT") type = "number";
+		else if (variable.type === "BOOLEAN") type = "boolean";
+		const isReference = isVariableAlias(defaultValue);
+		let referenceTo;
+		let value;
+		if (isReference) {
+			referenceTo = variable.aliasTo ? figmaToStyleframeName(variable.aliasTo) : void 0;
+			value = "";
+		} else if (isFigmaColor(defaultValue)) value = figmaValueToStyleframe(defaultValue, "COLOR", useRem, baseFontSize);
+		else if (typeof defaultValue === "number") value = figmaValueToStyleframe(defaultValue, "FLOAT", useRem, baseFontSize);
+		else if (typeof defaultValue === "boolean") value = defaultValue;
+		else value = String(defaultValue);
+		variables.push({
+			name: styleframeName,
+			value,
+			type,
+			category,
+			isReference,
+			referenceTo
+		});
+		for (const themeName of themeNames) {
+			const themeValue = variable.values[themeName];
+			if (themeValue === void 0) continue;
+			const isThemeReference = isVariableAlias(themeValue);
+			let themeStyleframeValue;
+			if (isThemeReference) continue;
+			else if (isFigmaColor(themeValue)) themeStyleframeValue = figmaValueToStyleframe(themeValue, "COLOR", useRem, baseFontSize);
+			else if (typeof themeValue === "number") themeStyleframeValue = figmaValueToStyleframe(themeValue, "FLOAT", useRem, baseFontSize);
+			else if (typeof themeValue === "boolean") themeStyleframeValue = themeValue;
+			else themeStyleframeValue = String(themeValue);
+			if (themeStyleframeValue !== value) {
+				const themeVariables = themeVariablesMap.get(themeName) || [];
+				themeVariables.push({
+					name: styleframeName,
+					value: themeStyleframeValue,
+					type,
+					category,
+					isReference: false
+				});
+				themeVariablesMap.set(themeName, themeVariables);
+			}
+		}
+	}
+	const themes = [];
+	for (const [name, vars] of themeVariablesMap) if (vars.length > 0) themes.push({
+		name: name.toLowerCase(),
+		variables: vars
+	});
+	return {
+		variables,
+		themes
+	};
+}
+/**
+* Group variables by category
+*/
+function groupByCategory(variables) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const v of variables) {
+		const existing = groups.get(v.category) || [];
+		existing.push(v);
+		groups.set(v.category, existing);
+	}
+	return groups;
+}
+/**
+* Generate code using composables
+*/
+function generateComposableCode(category, variables, instanceName) {
+	const composableName = COMPOSABLE_MAP[category];
+	if (!composableName) return null;
+	const nonRefVars = variables.filter((v) => !v.isReference);
+	if (nonRefVars.length === 0) return null;
+	const identifiers = [];
+	const valueEntries = [];
+	for (const v of nonRefVars) {
+		const key = v.name.split(".").slice(1).join(".") || v.name;
+		const identifier = toVariableIdentifier(v.name);
+		identifiers.push(identifier);
+		const valueStr = typeof v.value === "string" ? `"${v.value}"` : String(v.value);
+		valueEntries.push(`\t${key}: ${valueStr},`);
+	}
+	return {
+		code: `const { ${identifiers.join(", ")} } = ${composableName}(${instanceName}, {\n${valueEntries.join("\n")}\n});`,
+		identifiers,
+		composable: composableName
+	};
+}
+/**
+* Generate variable declaration code
+* Returns null if the variable cannot be generated (e.g., reference with unknown target)
+*/
+function generateVariableCode(variable) {
+	const identifier = toVariableIdentifier(variable.name);
+	if (variable.isReference) {
+		if (variable.referenceTo) {
+			const refTarget = toVariableIdentifier(variable.referenceTo);
+			return `const ${identifier} = variable("${variable.name}", ref(${refTarget}));`;
+		}
+		return null;
+	}
+	const valueStr = typeof variable.value === "string" ? `"${variable.value}"` : String(variable.value);
+	return `const ${identifier} = variable("${variable.name}", ${valueStr});`;
+}
+/**
+* Generate theme block code
+*/
+function generateThemeCode(theme, instanceName) {
+	const lines = [];
+	lines.push(`theme("${theme.name}", (ctx) => {`);
+	for (const v of theme.variables) {
+		const identifier = toVariableIdentifier(v.name);
+		const valueStr = typeof v.value === "string" ? `"${v.value}"` : String(v.value);
+		lines.push(`\tctx.variable(${identifier}, ${valueStr});`);
+	}
+	lines.push("});");
+	return lines.join("\n");
+}
+/**
+* Generate Styleframe TypeScript code from Figma export format
+*/
+function generateStyleframeCode(data, options = {}) {
+	const { useComposables = true, instanceName = "s" } = options;
+	const { variables, themes } = parseVariables(data, options);
+	const grouped = groupByCategory(variables);
+	const imports = ["styleframe"];
+	const usedComposables = /* @__PURE__ */ new Set();
+	const lines = [];
+	const generatedIdentifiers = /* @__PURE__ */ new Set();
+	for (const [category, vars] of grouped) {
+		lines.push(`\n// ${category.charAt(0).toUpperCase() + category.slice(1)} variables`);
+		if (useComposables) {
+			const composableResult = generateComposableCode(category, vars, instanceName);
+			if (composableResult) {
+				lines.push(composableResult.code);
+				usedComposables.add(composableResult.composable);
+				for (const id of composableResult.identifiers) generatedIdentifiers.add(id);
+			}
+		}
+		for (const v of vars) {
+			const identifier = toVariableIdentifier(v.name);
+			if (generatedIdentifiers.has(identifier)) continue;
+			if (!useComposables || v.isReference || !COMPOSABLE_MAP[category]) {
+				const code$1 = generateVariableCode(v);
+				if (code$1) {
+					lines.push(code$1);
+					generatedIdentifiers.add(identifier);
+				}
+			}
+		}
+	}
+	if (themes.length > 0) {
+		lines.push("");
+		for (const theme of themes) lines.push(generateThemeCode(theme, instanceName));
+	}
+	const composableImports = Array.from(usedComposables).sort();
+	let code = `import { styleframe } from "styleframe";\n`;
+	if (composableImports.length > 0) {
+		code += `import { ${composableImports.join(", ")} } from "@styleframe/theme";\n`;
+		imports.push(...composableImports);
+	}
+	code += `\nconst ${instanceName} = styleframe();\n`;
+	code += `const { variable, ref, theme } = ${instanceName};\n`;
+	code += lines.join("\n");
+	code += `\n\nexport default ${instanceName};\n`;
+	return {
+		code,
+		variables,
+		themes,
+		imports
+	};
+}
+
+//#endregion
+//#region src/converters/dtcg/types.ts
+/**
+* Check if a value is a DTCG alias
+*/
+function isDTCGAlias(value) {
+	return typeof value === "string" && value.startsWith("{") && value.endsWith("}");
+}
+/**
+* Type guard to check if a value is a DTCGToken (has $value property)
+*/
+function isDTCGToken(value) {
+	return typeof value === "object" && value !== null && "$value" in value;
+}
+/**
+* Type guard to check if a value is a DTCGGroup (object without $value)
+*/
+function isDTCGGroup(value) {
+	return typeof value === "object" && value !== null && !("$value" in value) && !Array.isArray(value);
+}
+
+//#endregion
+//#region src/converters/dtcg/type-mapping.ts
+/**
+* Map Figma variable types to DTCG types
+*/
+function figmaTypeToDTCG(figmaType) {
+	switch (figmaType) {
+		case "COLOR": return "color";
+		case "FLOAT": return "dimension";
+		case "STRING": return "string";
+		case "BOOLEAN": return "string";
+		default: return "string";
+	}
+}
+/**
+* Map DTCG types to Figma variable types
+*/
+function dtcgTypeToFigma(dtcgType) {
+	switch (dtcgType) {
+		case "color": return "COLOR";
+		case "dimension":
+		case "number":
+		case "fontWeight":
+		case "duration": return "FLOAT";
+		case "fontFamily":
+		case "string": return "STRING";
+		case "cubicBezier": return "STRING";
+		default: return "STRING";
+	}
+}
+/**
+* Detect DTCG type from a value
+*/
+function detectDTCGType(value) {
+	if (typeof value === "number") return "number";
+	if (typeof value === "string") {
+		if (value.startsWith("#") || value.startsWith("rgb") || value.startsWith("hsl") || value.startsWith("oklch") || value.startsWith("oklab")) return "color";
+		if (/^-?\d*\.?\d+(px|rem|em|%|vh|vw|vmin|vmax|ch)$/.test(value)) return "dimension";
+		if (/^\d*\.?\d+(ms|s)$/.test(value)) return "duration";
+	}
+	if (Array.isArray(value) && value.length === 4) {
+		if (value.every((v) => typeof v === "number")) return "cubicBezier";
+	}
+	return "string";
+}
+
+//#endregion
+//#region src/converters/dtcg/alias-parsing.ts
+/**
+* Parse a DTCG alias string to get the referenced path
+* @example "{color.primary}" → "color.primary"
+*/
+function parseAlias(alias) {
+	return alias.slice(1, -1);
+}
+/**
+* Create a DTCG alias string from a token path
+* @example "color.primary" → "{color.primary}"
+*/
+function createAlias(path) {
+	return `{${path.replace(/\//g, ".")}}`;
+}
+/**
+* Convert Figma slash notation to DTCG dot notation
+* @example "color/primary" → "color.primary"
+*/
+function figmaPathToDTCG(figmaPath) {
+	return figmaPath.replace(/\//g, ".");
+}
+/**
+* Convert DTCG dot notation to Figma slash notation
+* @example "color.primary" → "color/primary"
+*/
+function dtcgPathToFigma(dtcgPath) {
+	return dtcgPath.replace(/\./g, "/");
+}
+/**
+* Check if a value is an alias and resolve it to Figma format
+*/
+function resolveAliasForFigma(value) {
+	if (isDTCGAlias(value)) return {
+		isAlias: true,
+		target: dtcgPathToFigma(parseAlias(value))
+	};
+	return { isAlias: false };
+}
+/**
+* Get the segments of a token path
+* @example "color.primary.500" → ["color", "primary", "500"]
+*/
+function getPathSegments(path) {
+	return path.split(/[./]/);
+}
+/**
+* Join path segments into a DTCG path
+* @example ["color", "primary", "500"] → "color.primary.500"
+*/
+function joinPath(segments) {
+	return segments.join(".");
+}
+
+//#endregion
+//#region src/converters/dtcg/to-dtcg.ts
+const DTCG_SCHEMA_URL = "https://design-tokens.github.io/community-group/format/";
+/**
+* Convert FigmaExportFormat to DTCG format
+*/
+function toDTCG(data, options = {}) {
+	const { includeSchema = true, schemaUrl = DTCG_SCHEMA_URL, useModifiers = true, themeNames } = options;
+	const doc = {};
+	if (includeSchema) doc.$schema = schemaUrl;
+	doc.$extensions = { "dev.styleframe": {
+		collection: data.collection,
+		modes: data.modes
+	} };
+	const defaultMode = data.modes[0] || "Default";
+	const themeModes = themeNames ? data.modes.filter((m) => themeNames.includes(m) && m !== defaultMode) : data.modes.slice(1);
+	const modeOverrides = /* @__PURE__ */ new Map();
+	for (const mode of themeModes) modeOverrides.set(mode, /* @__PURE__ */ new Map());
+	for (const variable of data.variables) {
+		const { token, overrides } = variableToTokenWithOverrides(variable, data.modes, useModifiers, themeModes);
+		setNestedToken(doc, variable.name, token);
+		if (useModifiers) for (const [modeName, value] of overrides) {
+			const modeMap = modeOverrides.get(modeName);
+			if (modeMap) {
+				const tokenPath = figmaPathToDTCG(variable.name);
+				modeMap.set(tokenPath, value);
+			}
+		}
+	}
+	if (useModifiers && themeModes.length > 0 && hasAnyOverrides(modeOverrides)) doc.$modifiers = { theme: {
+		$type: "modifier",
+		contexts: buildModifierContexts(modeOverrides)
+	} };
+	return doc;
+}
+/**
+* Convert a single Figma variable to a DTCG token, returning overrides separately
+*/
+function variableToTokenWithOverrides(variable, modes, useModifiers, themeModes) {
+	const defaultMode = modes[0] || "Default";
+	const defaultValue = variable.values[defaultMode];
+	const dtcgType = figmaTypeToDTCG(variable.type);
+	const overrides = /* @__PURE__ */ new Map();
+	if (variable.aliasTo) {
+		const token$1 = {
+			$value: createAlias(variable.aliasTo),
+			$type: dtcgType
+		};
+		if (variable.description) token$1.$description = variable.description;
+		return {
+			token: token$1,
+			overrides
+		};
+	}
+	const $value = convertValueToDTCG(defaultValue, variable.type);
+	const token = {
+		$value,
+		$type: dtcgType
+	};
+	if (variable.description) token.$description = variable.description;
+	if (modes.length > 1) {
+		const modeValues = {};
+		let hasModeOverrides = false;
+		for (const mode of modes) {
+			if (mode === defaultMode) continue;
+			const modeValue = variable.values[mode];
+			if (modeValue !== void 0) {
+				const convertedValue = convertValueToDTCG(modeValue, variable.type);
+				if (convertedValue !== $value) {
+					const isThemeMode = themeModes.includes(mode);
+					if (useModifiers && isThemeMode) overrides.set(mode, convertedValue);
+					else if (!useModifiers || !isThemeMode) {
+						modeValues[mode] = convertedValue;
+						hasModeOverrides = true;
+					}
+				}
+			}
+		}
+		if (hasModeOverrides) token.$extensions = { "dev.styleframe": { modes: modeValues } };
+	}
+	return {
+		token,
+		overrides
+	};
+}
+/**
+* Convert a Figma value to DTCG format
+*/
+function convertValueToDTCG(value, type) {
+	if (type === "COLOR" && typeof value === "object" && value !== null && "r" in value) return figmaColorToCss(value);
+	if (type === "FLOAT" && typeof value === "number") return `${value}px`;
+	if (typeof value === "boolean") return value.toString();
+	return String(value);
+}
+/**
+* Set a token at a nested path in the document
+* @example "color/primary" creates { color: { primary: token } }
+*/
+function setNestedToken(doc, path, token) {
+	const segments = getPathSegments(path);
+	let current = doc;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const segment = segments[i];
+		if (!current[segment] || typeof current[segment] !== "object") current[segment] = {};
+		current = current[segment];
+	}
+	const leafKey = segments[segments.length - 1];
+	current[leafKey] = token;
+}
+/**
+* Check if any mode has overrides
+*/
+function hasAnyOverrides(modeOverrides) {
+	for (const overrides of modeOverrides.values()) if (overrides.size > 0) return true;
+	return false;
+}
+/**
+* Build modifier contexts from collected overrides
+*/
+function buildModifierContexts(modeOverrides) {
+	const contexts = {};
+	for (const [modeName, tokenOverrides] of modeOverrides) {
+		if (tokenOverrides.size === 0) continue;
+		const context = {};
+		for (const [tokenPath, value] of tokenOverrides) setNestedValue(context, tokenPath, { $value: value });
+		contexts[modeName] = context;
+	}
+	return contexts;
+}
+/**
+* Set a value at a nested path using dot notation
+*/
+function setNestedValue(obj, path, value) {
+	const segments = path.split(".");
+	let current = obj;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const segment = segments[i];
+		if (!current[segment] || typeof current[segment] !== "object" || "$value" in current[segment]) current[segment] = {};
+		current = current[segment];
+	}
+	current[segments[segments.length - 1]] = value;
+}
+
+//#endregion
+//#region src/converters/dtcg/from-dtcg.ts
+/**
+* Convert DTCG format to FigmaExportFormat
+*/
+function fromDTCG(doc, options = {}) {
+	const { defaultModeName = "Default", collectionName, preferredModifier = "theme" } = options;
+	const { modes } = extractModes(doc, defaultModeName, preferredModifier);
+	const sfExtension = doc.$extensions?.["dev.styleframe"];
+	const collection = collectionName || sfExtension?.collection || "Design Tokens";
+	const variables = [];
+	const modifierOverrides = extractModifierOverrides(doc, preferredModifier);
+	walkTokens(doc, "", modes[0] || defaultModeName, (path, token, inheritedType) => {
+		const variable = tokenToVariableWithModifiers(path, token, inheritedType, modes, modes[0] || defaultModeName, modifierOverrides);
+		if (variable) variables.push(variable);
+	});
+	return {
+		collection,
+		modes,
+		variables
+	};
+}
+/**
+* Walk all tokens in a DTCG document
+*/
+function walkTokens(node, parentPath, defaultModeName, callback, inheritedType) {
+	const currentType = node.$type || inheritedType;
+	for (const [key, value] of Object.entries(node)) {
+		if (key.startsWith("$")) continue;
+		const path = parentPath ? `${parentPath}/${key}` : key;
+		if (isDTCGToken(value)) callback(path, value, currentType);
+		else if (isDTCGGroup(value)) walkTokens(value, path, defaultModeName, callback, currentType);
+	}
+}
+/**
+* Extract modes from document, preferring modifiers over legacy format
+*/
+function extractModes(doc, defaultModeName, preferredModifier) {
+	const modifier = doc.$modifiers?.[preferredModifier];
+	if (modifier && modifier.contexts) {
+		const contextNames = Object.keys(modifier.contexts);
+		if (contextNames.length > 0) {
+			const sfExtension$1 = doc.$extensions?.["dev.styleframe"];
+			const defaultMode = modifier.$default || sfExtension$1?.modes?.[0] || defaultModeName;
+			return {
+				modes: [defaultMode, ...contextNames.filter((n) => n !== defaultMode)],
+				modeSource: "modifier"
+			};
+		}
+	}
+	const sfExtension = doc.$extensions?.["dev.styleframe"];
+	if (sfExtension?.modes && sfExtension.modes.length > 0) return {
+		modes: sfExtension.modes,
+		modeSource: "extension"
+	};
+	return {
+		modes: [defaultModeName],
+		modeSource: "default"
+	};
+}
+/**
+* Extract all modifier overrides into a lookup map
+* Returns: Map<tokenPath, Map<contextName, value>>
+*/
+function extractModifierOverrides(doc, preferredModifier) {
+	const overrides = /* @__PURE__ */ new Map();
+	const modifier = doc.$modifiers?.[preferredModifier];
+	if (!modifier?.contexts) return overrides;
+	for (const [contextName, context] of Object.entries(modifier.contexts)) walkModifierContext(context, "", (tokenPath, value) => {
+		if (!overrides.has(tokenPath)) overrides.set(tokenPath, /* @__PURE__ */ new Map());
+		overrides.get(tokenPath).set(contextName, value);
+	});
+	return overrides;
+}
+/**
+* Walk a modifier context to extract token overrides
+*/
+function walkModifierContext(context, parentPath, callback) {
+	for (const [key, value] of Object.entries(context)) {
+		const path = parentPath ? `${parentPath}.${key}` : key;
+		if (value && typeof value === "object" && "$value" in value) callback(path, value.$value);
+		else if (value && typeof value === "object") walkModifierContext(value, path, callback);
+	}
+}
+/**
+* Convert a DTCG token to FigmaExportVariable, applying modifier overrides
+*/
+function tokenToVariableWithModifiers(path, token, inheritedType, modes, defaultModeName, modifierOverrides) {
+	const figmaType = dtcgTypeToFigma(token.$type || inheritedType || "string");
+	const isAlias = isDTCGAlias(token.$value);
+	let aliasTo;
+	const values = {};
+	if (isAlias) {
+		aliasTo = parseAlias(token.$value);
+		values[defaultModeName] = {
+			type: "VARIABLE_ALIAS",
+			id: dtcgPathToFigma(aliasTo)
+		};
+	} else {
+		values[defaultModeName] = convertValueToFigma(token.$value, figmaType);
+		const tokenPath = path.replace(/\//g, ".");
+		const pathOverrides = modifierOverrides.get(tokenPath);
+		if (pathOverrides) for (const [modeName, modeValue] of pathOverrides) if (isDTCGAlias(modeValue)) values[modeName] = {
+			type: "VARIABLE_ALIAS",
+			id: dtcgPathToFigma(parseAlias(modeValue))
+		};
+		else values[modeName] = convertValueToFigma(modeValue, figmaType);
+		if (!pathOverrides || pathOverrides.size === 0) {
+			const legacyModeOverrides = token.$extensions?.["dev.styleframe"]?.modes;
+			if (legacyModeOverrides) for (const [modeName, modeValue] of Object.entries(legacyModeOverrides)) if (isDTCGAlias(modeValue)) values[modeName] = {
+				type: "VARIABLE_ALIAS",
+				id: dtcgPathToFigma(parseAlias(modeValue))
+			};
+			else values[modeName] = convertValueToFigma(modeValue, figmaType);
+		}
+	}
+	return {
+		name: path,
+		styleframeName: path.replace(/\//g, "."),
+		type: figmaType,
+		values,
+		aliasTo,
+		description: token.$description
+	};
+}
+/**
+* Convert a DTCG value to Figma format
+*/
+function convertValueToFigma(value, figmaType) {
+	if (figmaType === "COLOR" && typeof value === "string") {
+		const rgba = cssColorToFigma(value);
+		if (rgba) return rgba;
+	}
+	if (figmaType === "FLOAT") {
+		if (typeof value === "number") return value;
+		if (typeof value === "string") {
+			const pixels = dimensionToPixels(value);
+			if (pixels !== null) return pixels;
+			const num = Number.parseFloat(value);
+			if (!Number.isNaN(num)) return num;
+		}
+	}
+	if (figmaType === "BOOLEAN") {
+		if (typeof value === "boolean") return value;
+		if (value === "true") return true;
+		if (value === "false") return false;
+	}
+	return String(value);
+}
+
+//#endregion
+export { createAlias, cssColorToFigma, cssVariableToStyleframeName, detectDTCGType, detectFigmaType, dimensionToPixels, dtcgPathToFigma, dtcgTypeToFigma, extractCategory, extractKey, figmaColorToCss, figmaPathToDTCG, figmaToStyleframeName, figmaTypeToDTCG, figmaValueToStyleframe, fromDTCG, generateStyleframeCode, getPathSegments, isColorValue, isDTCGAlias, isDTCGGroup, isDTCGToken, isDimensionValue, joinPath, parseAlias, parseDimension, pixelsToDimension, resolveAliasForFigma, styleframeToCssVariable, styleframeToFigmaName, styleframeValueToFigma, toDTCG, toVariableIdentifier };
+//# sourceMappingURL=index.js.map