@design-token-kit/core 0.1.1

package/lib/index.js

@@ -0,0 +1,4737 @@
+import { readFile, readdir, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { randomUUID } from "node:crypto";
+import path from "node:path";
+import { tmpdir } from "node:os";
+import Ajv from "ajv";
+import addFormats from "ajv-formats";
+import { fileURLToPath } from "node:url";
+//#region src/core/model/TokenGroup.ts
+/**
+* A named container for tokens and nested groups.
+*
+* Groups may declare a `$type` that is inherited by all descendant tokens
+* unless overridden at a lower level. Groups may also extend another group
+* via `$extends`.
+*
+* @see https://tr.designtokens.org/format/#groups
+*/
+var TokenGroup = class {
+	#children;
+	/** Inherited token type for descendant tokens that do not declare their own `$type`. */
+	type;
+	description;
+	deprecated;
+	extensions;
+	/** Reference to the group this group extends, if any. */
+	extends;
+	/**
+	* Optional root token for this group. Provides a base value while
+	* allowing for variants via nested tokens.
+	*
+	* @see https://tr.designtokens.org/format/#groups
+	*/
+	root;
+	constructor(options = {}) {
+		this.type = options.type;
+		this.description = options.description;
+		this.deprecated = options.deprecated;
+		this.extensions = options.extensions;
+		this.extends = options.extends;
+		this.root = options.root;
+		this.#children = options.children ?? /* @__PURE__ */ new Map();
+	}
+	/** Returns the child token or group with the given name, or undefined. */
+	get(name) {
+		return this.#children.get(name);
+	}
+	/** Returns all child names in insertion order. */
+	keys() {
+		return this.#children.keys();
+	}
+	/** Returns all child entries as [name, node] pairs in insertion order. */
+	entries() {
+		return this.#children.entries();
+	}
+	/** Returns true if this group contains a child with the given name. */
+	has(name) {
+		return this.#children.has(name);
+	}
+	get size() {
+		return this.#children.size;
+	}
+};
+//#endregion
+//#region src/core/model/TokenReference.ts
+/**
+* A reference to another token using curly-brace notation, e.g. `{color.base.red}`.
+*
+* References are not resolved at model level - resolution is the responsibility
+* of the consumer (resolver, converter, etc.).
+*
+* @see https://tr.designtokens.org/format/#aliases-references
+*/
+var TokenReference = class {
+	#value;
+	/** @param value - token path without curly braces, e.g. `color.base.red` */
+	constructor(value) {
+		this.#value = value;
+	}
+	/** Token path without curly braces, e.g. `color.base.red`. */
+	get value() {
+		return this.#value;
+	}
+	/** Serializes to canonical curly-brace notation, e.g. `{color.base.red}`. */
+	toString() {
+		return `{${this.#value}}`;
+	}
+};
+//#endregion
+//#region src/core/model/TokenNode.ts
+/**
+* Base class for all DTCG token nodes.
+*
+* A token node holds either a direct value (`$value`) or an alias to another token (`$ref`).
+* The `$type` field is inherited from the containing group when not explicitly set.
+* Alias tokens without an explicit or inherited `$type` have `type = undefined`.
+*
+* @see https://tr.designtokens.org/format/#design-token
+*/
+var TokenNode = class {
+	#type;
+	#value;
+	description;
+	deprecated;
+	extensions;
+	constructor(type, value, description, deprecated, extensions) {
+		this.#type = type;
+		this.#value = value;
+		this.description = description;
+		this.deprecated = deprecated;
+		this.extensions = extensions;
+	}
+	/**
+	* The token's DTCG type, or `undefined` for alias tokens without an explicit
+	* or inherited `$type`.
+	*/
+	get type() {
+		return this.#type;
+	}
+	/**
+	* The token's value, or a {@link TokenReference} when this token is an alias.
+	*
+	* @see https://tr.designtokens.org/format/#aliases-references
+	*/
+	get value() {
+		return this.#value;
+	}
+	/** Returns true when this token is an alias to another token. */
+	isAlias() {
+		return this.#value instanceof TokenReference;
+	}
+};
+//#endregion
+//#region src/core/model/values/BorderValue.ts
+/**
+* Represents a border style combining color, width, and stroke style.
+*
+* @see https://tr.designtokens.org/format/#border
+*/
+var BorderValue = class {
+	color;
+	width;
+	style;
+	constructor(color, width, style) {
+		this.color = color;
+		this.width = width;
+		this.style = style;
+	}
+};
+//#endregion
+//#region src/core/model/values/GradientValue.ts
+/**
+* A single stop on a gradient.
+* Position is a number in [0, 1] where 0 is the start and 1 is the end.
+*
+* @see https://tr.designtokens.org/format/#gradient
+*/
+var GradientStop = class {
+	color;
+	/** Position along the gradient axis, in range [0, 1]. */
+	position;
+	constructor(color, position) {
+		this.color = color;
+		this.position = position;
+	}
+};
+//#endregion
+//#region src/core/model/values/ShadowValue.ts
+/**
+* A single shadow layer.
+*
+* @see https://tr.designtokens.org/format/#shadow
+*/
+var ShadowLayer = class {
+	color;
+	offsetX;
+	offsetY;
+	blur;
+	spread;
+	/** When true, renders as an inner shadow. Defaults to false. */
+	inset;
+	constructor(color, offsetX, offsetY, blur, spread, inset = false) {
+		this.color = color;
+		this.offsetX = offsetX;
+		this.offsetY = offsetY;
+		this.blur = blur;
+		this.spread = spread;
+		this.inset = inset;
+	}
+};
+//#endregion
+//#region src/core/model/values/StrokeStyleValue.ts
+/**
+* A custom stroke style defined by a dash array and line cap.
+*
+* @see https://tr.designtokens.org/format/#stroke-style
+*/
+var StrokeStyleObject = class {
+	/** Alternating dash and gap lengths. */
+	dashArray;
+	lineCap;
+	constructor(dashArray, lineCap) {
+		this.dashArray = dashArray;
+		this.lineCap = lineCap;
+	}
+};
+//#endregion
+//#region src/core/model/values/TransitionValue.ts
+/**
+* Represents an animated transition between two states.
+*
+* @see https://tr.designtokens.org/format/#transition
+*/
+var TransitionValue = class {
+	duration;
+	delay;
+	timingFunction;
+	constructor(duration, delay, timingFunction) {
+		this.duration = duration;
+		this.delay = delay;
+		this.timingFunction = timingFunction;
+	}
+};
+//#endregion
+//#region src/core/model/values/TypographyValue.ts
+/**
+* Represents a complete typographic style.
+* `lineHeight` is a unitless multiplier of `fontSize`.
+*
+* @see https://tr.designtokens.org/format/#typography
+*/
+var TypographyValue = class {
+	fontFamily;
+	fontSize;
+	fontWeight;
+	letterSpacing;
+	/** Unitless multiplier of fontSize. */
+	lineHeight;
+	constructor(fontFamily, fontSize, fontWeight, letterSpacing, lineHeight) {
+		this.fontFamily = fontFamily;
+		this.fontSize = fontSize;
+		this.fontWeight = fontWeight;
+		this.letterSpacing = letterSpacing;
+		this.lineHeight = lineHeight;
+	}
+};
+//#endregion
+//#region src/core/model/Dtcg.ts
+/**
+* The root of a DTCG token document, corresponding to a single `.json` file.
+*
+* @see https://tr.designtokens.org/format/#file-format
+*/
+var Dtcg = class {
+	#root;
+	constructor(root) {
+		this.#root = root;
+	}
+	/** Returns the top-level child token or group with the given name, or undefined. */
+	get(name) {
+		return this.#root.get(name);
+	}
+	/** Returns all top-level child names in insertion order. */
+	keys() {
+		return this.#root.keys();
+	}
+	/** Returns all top-level child entries as [name, node] pairs in insertion order. */
+	entries() {
+		return this.#root.entries();
+	}
+	get size() {
+		return this.#root.size;
+	}
+	/**
+	* Validates the document and returns all found issues.
+	*
+	* @param base - Optional base document to use as fallback when resolving references.
+	*   Pass the base document when validating a theme file, so that references to tokens
+	*   defined in the base are resolved correctly.
+	*/
+	validate(base) {
+		const issues = [];
+		const seen = /* @__PURE__ */ new Set();
+		this.#validateGroup(this.#root, [], issues, seen, base);
+		return issues;
+	}
+	#push(issues, seen, severity, tokenPath, message) {
+		const key = `${severity}:${tokenPath}:${message}`;
+		if (seen.has(key)) return;
+		seen.add(key);
+		issues.push({
+			tokenPath,
+			severity,
+			message
+		});
+	}
+	#validateGroup(group, path, issues, seen, base) {
+		const groupPath = path.join(".") || "<root>";
+		if (group.extends instanceof TokenReference) this.#checkRef(group.extends, groupPath, issues, seen, new Set([groupPath]), base);
+		for (const [key, child] of group.entries()) {
+			const childPath = [...path, key];
+			if (child instanceof TokenGroup) this.#validateGroup(child, childPath, issues, seen, base);
+			else this.#validateToken(child, childPath, issues, seen, base);
+		}
+	}
+	#validateToken(token, path, issues, seen, base) {
+		const tokenPath = path.join(".");
+		const visiting = new Set([tokenPath]);
+		const value = token.value;
+		if (value instanceof TokenReference) {
+			this.#checkRef(value, tokenPath, issues, seen, visiting, base);
+			if (token.type !== void 0) {
+				const resolved = this.#resolveChain(value, void 0, base);
+				if (resolved instanceof TokenNode && resolved.type !== void 0 && resolved.type !== token.type) this.#push(issues, seen, "error", tokenPath, `type mismatch: token is "${token.type}" but references "${resolved.type}" token {${value.value}}`);
+			}
+			return;
+		}
+		if (value instanceof BorderValue) {
+			this.#checkRefField(value.color, tokenPath, issues, seen, visiting, base);
+			this.#checkRefField(value.width, tokenPath, issues, seen, visiting, base);
+			this.#checkRefField(value.style, tokenPath, issues, seen, visiting, base);
+			if (value.style instanceof StrokeStyleObject) for (const d of value.style.dashArray) this.#checkRefField(d, tokenPath, issues, seen, visiting, base);
+			return;
+		}
+		if (value instanceof TransitionValue) {
+			this.#checkRefField(value.duration, tokenPath, issues, seen, visiting, base);
+			this.#checkRefField(value.delay, tokenPath, issues, seen, visiting, base);
+			this.#checkRefField(value.timingFunction, tokenPath, issues, seen, visiting, base);
+			return;
+		}
+		if (value instanceof ShadowLayer) {
+			this.#validateShadowLayer(value, tokenPath, issues, seen, visiting, base);
+			return;
+		}
+		if (Array.isArray(value)) {
+			const positions = [];
+			for (const item of value) if (item instanceof TokenReference) this.#checkRef(item, tokenPath, issues, seen, visiting, base);
+			else if (item instanceof ShadowLayer) this.#validateShadowLayer(item, tokenPath, issues, seen, visiting, base);
+			else if (item instanceof GradientStop) {
+				this.#checkRefField(item.color, tokenPath, issues, seen, visiting, base);
+				this.#checkRefField(item.position, tokenPath, issues, seen, visiting, base);
+				if (typeof item.position === "number") if (positions.includes(item.position)) this.#push(issues, seen, "error", tokenPath, `gradient has duplicate stop position ${item.position}`);
+				else positions.push(item.position);
+			}
+			return;
+		}
+		if (value instanceof TypographyValue) {
+			this.#checkRefField(value.fontFamily, tokenPath, issues, seen, visiting, base);
+			this.#checkRefField(value.fontSize, tokenPath, issues, seen, visiting, base);
+			this.#checkRefField(value.fontWeight, tokenPath, issues, seen, visiting, base);
+			this.#checkRefField(value.letterSpacing, tokenPath, issues, seen, visiting, base);
+			this.#checkRefField(value.lineHeight, tokenPath, issues, seen, visiting, base);
+			if (Array.isArray(value.fontFamily)) {
+				for (const f of value.fontFamily) if (f instanceof TokenReference) this.#checkRef(f, tokenPath, issues, seen, visiting, base);
+			}
+		}
+	}
+	#validateShadowLayer(layer, tokenPath, issues, seen, visiting, base) {
+		this.#checkRefField(layer.color, tokenPath, issues, seen, visiting, base);
+		this.#checkRefField(layer.offsetX, tokenPath, issues, seen, visiting, base);
+		this.#checkRefField(layer.offsetY, tokenPath, issues, seen, visiting, base);
+		this.#checkRefField(layer.blur, tokenPath, issues, seen, visiting, base);
+		this.#checkRefField(layer.spread, tokenPath, issues, seen, visiting, base);
+	}
+	#checkRefField(value, tokenPath, issues, seen, visiting, base) {
+		if (value instanceof TokenReference) this.#checkRef(value, tokenPath, issues, seen, visiting, base);
+	}
+	#checkRef(ref, tokenPath, issues, seen, visiting, base) {
+		const target = this.#resolveRef(ref, base);
+		if (!target) {
+			this.#push(issues, seen, "error", tokenPath, `references {${ref.value}} which does not exist`);
+			return;
+		}
+		if (target instanceof TokenGroup) {
+			this.#push(issues, seen, "error", tokenPath, `references {${ref.value}} which is a group, not a token`);
+			return;
+		}
+		if (visiting.has(ref.value)) {
+			this.#push(issues, seen, "error", tokenPath, `circular reference: {${ref.value}}`);
+			return;
+		}
+		if (target.value instanceof TokenReference) {
+			visiting.add(ref.value);
+			this.#checkRef(target.value, ref.value, issues, seen, visiting, base);
+			visiting.delete(ref.value);
+		}
+		if (target.deprecated) this.#push(issues, seen, "warning", tokenPath, `references deprecated token {${ref.value}}`);
+	}
+	#resolveRef(ref, base) {
+		const parts = ref.value.split(".");
+		let node = this.#root.get(parts[0]);
+		for (let i = 1; i < parts.length; i++) {
+			if (!(node instanceof TokenGroup)) return void 0;
+			node = node.get(parts[i]);
+		}
+		if (node === void 0 && base !== void 0) return base.#resolveRef(ref);
+		return node;
+	}
+	#resolveChain(ref, visited = /* @__PURE__ */ new Set(), base) {
+		const target = this.#resolveRef(ref, base);
+		if (!(target instanceof TokenNode)) return target;
+		if (target.value instanceof TokenReference) {
+			if (visited.has(ref.value)) return void 0;
+			visited.add(ref.value);
+			return this.#resolveChain(target.value, visited, base);
+		}
+		return target;
+	}
+};
+//#endregion
+//#region src/core/model/tokens/AliasToken.ts
+/**
+* A token that is purely an alias to another token with no explicit `$type`.
+*
+* The effective type is determined by the referenced token and is not known
+* until the alias is resolved.
+*
+* @see https://tr.designtokens.org/format/#aliases-references
+*/
+var AliasToken = class extends TokenNode {
+	constructor(ref, description, deprecated, extensions) {
+		super(void 0, ref, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/BorderToken.ts
+/**
+* A token representing a border style (color, width, and stroke style).
+*
+* @see https://tr.designtokens.org/format/#border
+*/
+var BorderToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("border", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/ColorToken.ts
+/**
+* A token representing a color value.
+*
+* @see https://tr.designtokens.org/format/#color
+*/
+var ColorToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("color", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/CubicBezierToken.ts
+/**
+* A token representing a cubic-bezier easing function.
+*
+* @see https://tr.designtokens.org/format/#cubic-bezier
+*/
+var CubicBezierToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("cubicBezier", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/DimensionToken.ts
+/**
+* A token representing a distance value (e.g. spacing, size, radius).
+*
+* @see https://tr.designtokens.org/format/#dimension
+*/
+var DimensionToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("dimension", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/DurationToken.ts
+/**
+* A token representing an animation or transition duration.
+*
+* @see https://tr.designtokens.org/format/#duration
+*/
+var DurationToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("duration", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/FontFamilyToken.ts
+/**
+* A token representing a font family or a list of font families.
+*
+* @see https://tr.designtokens.org/format/#font-family
+*/
+var FontFamilyToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("fontFamily", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/FontWeightToken.ts
+/**
+* A token representing a font weight as a number (1-1000) or a keyword.
+*
+* @see https://tr.designtokens.org/format/#font-weight
+*/
+var FontWeightToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("fontWeight", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/GradientToken.ts
+/**
+* A token representing a color gradient as an ordered list of stops.
+*
+* @see https://tr.designtokens.org/format/#gradient
+*/
+var GradientToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("gradient", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/NumberToken.ts
+/**
+* A token representing a unitless number (e.g. opacity, line-height multiplier).
+*
+* @see https://tr.designtokens.org/format/#number
+*/
+var NumberToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("number", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/ShadowToken.ts
+/**
+* A token representing a shadow style - either a single layer or a list of layers.
+*
+* @see https://tr.designtokens.org/format/#shadow
+*/
+var ShadowToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("shadow", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/StrokeStyleToken.ts
+/**
+* A token representing a stroke (line) style - either a keyword or a custom dash pattern.
+*
+* @see https://tr.designtokens.org/format/#stroke-style
+*/
+var StrokeStyleToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("strokeStyle", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/TransitionToken.ts
+/**
+* A token representing an animated transition (duration, delay, timing function).
+*
+* @see https://tr.designtokens.org/format/#transition
+*/
+var TransitionToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("transition", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/tokens/TypographyToken.ts
+/**
+* A token representing a complete typographic style.
+*
+* @see https://tr.designtokens.org/format/#typography
+*/
+var TypographyToken = class extends TokenNode {
+	constructor(value, description, deprecated, extensions) {
+		super("typography", value, description, deprecated, extensions);
+	}
+};
+//#endregion
+//#region src/core/model/values/ColorValue.ts
+/**
+* Represents a color value in a specific color space.
+*
+* Components are ordered as defined by the color space (e.g., [R, G, B] for sRGB,
+* [H, S, L] for HSL). The `hex` field is an optional 6-digit CSS fallback.
+*
+* @see https://tr.designtokens.org/format/#color
+*/
+var ColorValue = class {
+	colorSpace;
+	components;
+	/** Alpha channel, 0 (transparent) to 1 (opaque). Defaults to 1. */
+	alpha;
+	/** Optional 6-digit hex fallback, e.g. `#ff00ff`. */
+	hex;
+	constructor(colorSpace, components, alpha = 1, hex) {
+		this.colorSpace = colorSpace;
+		this.components = components;
+		this.alpha = alpha;
+		this.hex = hex;
+	}
+};
+//#endregion
+//#region src/core/model/values/CubicBezierValue.ts
+/**
+* Represents a CSS cubic-bezier timing function with two control points P1 and P2.
+*
+* P0 is implicitly (0, 0) and P3 is implicitly (1, 1).
+* X coordinates must be in [0, 1]; Y coordinates are unbounded.
+*
+* @see https://tr.designtokens.org/format/#cubic-bezier
+*/
+var CubicBezierValue = class {
+	/** X coordinate of control point P1, in range [0, 1]. */
+	p1x;
+	/** Y coordinate of control point P1. */
+	p1y;
+	/** X coordinate of control point P2, in range [0, 1]. */
+	p2x;
+	/** Y coordinate of control point P2. */
+	p2y;
+	constructor(p1x, p1y, p2x, p2y) {
+		this.p1x = p1x;
+		this.p1y = p1y;
+		this.p2x = p2x;
+		this.p2y = p2y;
+	}
+	toString() {
+		return `cubic-bezier(${this.p1x}, ${this.p1y}, ${this.p2x}, ${this.p2y})`;
+	}
+};
+//#endregion
+//#region src/core/model/values/DimensionValue.ts
+/**
+* Represents a distance value with a unit.
+*
+* @see https://tr.designtokens.org/format/#dimension
+*/
+var DimensionValue = class {
+	value;
+	unit;
+	constructor(value, unit) {
+		this.value = value;
+		this.unit = unit;
+	}
+	toString() {
+		return `${this.value}${this.unit}`;
+	}
+};
+//#endregion
+//#region src/core/model/values/DurationValue.ts
+/**
+* Represents an animation or transition duration.
+*
+* @see https://tr.designtokens.org/format/#duration
+*/
+var DurationValue = class {
+	value;
+	unit;
+	constructor(value, unit) {
+		this.value = value;
+		this.unit = unit;
+	}
+	/** Returns the duration normalized to milliseconds. */
+	toMs() {
+		return this.unit === "ms" ? this.value : this.value * 1e3;
+	}
+	toString() {
+		return `${this.value}${this.unit}`;
+	}
+};
+//#endregion
+//#region src/core/io/HrdtTokenReader.ts
+var DIMENSION_RE = /^(-?\d+(?:\.\d+)?)(px|rem)$/;
+var DURATION_RE = /^(-?\d+(?:\.\d+)?)(ms|s)$/;
+var HEX_RE = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var REFERENCE_RE = /^\{[^{}]+\}$/;
+var TOKEN_TYPES = new Set([
+	"color",
+	"dimension",
+	"fontFamily",
+	"fontWeight",
+	"duration",
+	"cubicBezier",
+	"number",
+	"strokeStyle",
+	"border",
+	"transition",
+	"shadow",
+	"gradient",
+	"typography"
+]);
+/**
+* Reads an HRDT token file and parses it directly into a {@link Dtcg} model.
+*
+* The HRDT format uses YAML syntax and group path to infer token types
+* (e.g. `primitive.color.*` -> color tokens). Non-primitive groups
+* contain alias references to primitive tokens.
+*/
+var HrdtTokenReader = class {
+	parseRaw(hrdtContent) {
+		return new SimpleHrdtParser(hrdtContent).parse();
+	}
+	parse(hrdtContent) {
+		return new Dtcg(this.#parseRoot(new SimpleHrdtParser(hrdtContent).parse()));
+	}
+	async parseFile(filePath) {
+		return this.parse(await readFile(filePath, "utf8"));
+	}
+	#parseRoot(raw) {
+		const children = /* @__PURE__ */ new Map();
+		for (const [key, value] of Object.entries(raw)) {
+			if (key === "$schema") continue;
+			if (!this.#isObject(value)) continue;
+			if (key === "primitive") children.set(key, this.#parsePrimitiveRoot(value));
+			else children.set(key, this.#parseReferenceGroup(value));
+		}
+		return new TokenGroup({ children });
+	}
+	#parsePrimitiveRoot(raw) {
+		const children = /* @__PURE__ */ new Map();
+		for (const [typeName, tokens] of Object.entries(raw)) {
+			if (!TOKEN_TYPES.has(typeName)) throw new HrdtTokenReaderError(`Unknown primitive token type: "${typeName}"`);
+			const tokenType = typeName;
+			children.set(typeName, this.#parsePrimitiveTypeGroup(tokens, tokenType));
+		}
+		return new TokenGroup({ children });
+	}
+	#parsePrimitiveTypeGroup(raw, tokenType) {
+		const children = /* @__PURE__ */ new Map();
+		for (const [name, value] of Object.entries(raw)) children.set(name, this.#parsePrimitiveToken(value, tokenType));
+		return new TokenGroup({
+			type: tokenType,
+			children
+		});
+	}
+	#parsePrimitiveToken(value, tokenType) {
+		if (typeof value === "string" && REFERENCE_RE.test(value)) return new AliasToken(new TokenReference(value.slice(1, -1)));
+		switch (tokenType) {
+			case "color": return new ColorToken(this.#parseColor(value));
+			case "dimension": return new DimensionToken(this.#parseDimension(value));
+			case "fontFamily": return new FontFamilyToken(this.#parseFontFamily(value));
+			case "fontWeight": return new FontWeightToken(this.#parseFontWeight(value));
+			case "number": return new NumberToken(this.#parseNumber(value));
+			case "duration": return new DurationToken(this.#parseDuration(value));
+			case "cubicBezier": return new CubicBezierToken(this.#parseCubicBezier(value));
+			case "strokeStyle": return new StrokeStyleToken(this.#parseStrokeStyle(value));
+			case "border": return new BorderToken(this.#parseBorder(value));
+			case "transition": return new TransitionToken(this.#parseTransition(value));
+			case "shadow": return new ShadowToken(this.#parseShadow(value));
+			case "gradient": return new GradientToken(this.#parseGradient(value));
+			case "typography": return new TypographyToken(this.#parseTypography(value));
+		}
+	}
+	#parseReferenceGroup(raw) {
+		const children = /* @__PURE__ */ new Map();
+		for (const [key, value] of Object.entries(raw)) if (this.#isLeaf(value)) children.set(key, this.#parseReferenceToken(value));
+		else children.set(key, this.#parseReferenceGroup(value));
+		return new TokenGroup({ children });
+	}
+	#isLeaf(value) {
+		return !this.#isObject(value) || Array.isArray(value);
+	}
+	#parseReferenceToken(value) {
+		if (typeof value === "string" && REFERENCE_RE.test(value)) return new AliasToken(new TokenReference(value.slice(1, -1)));
+		throw new HrdtTokenReaderError(`Expected a reference in non-primitive group, got: ${JSON.stringify(value)}`);
+	}
+	#parseColor(value) {
+		if (typeof value !== "string" || !HEX_RE.test(value)) throw new HrdtTokenReaderError(`Expected hex color, got: ${JSON.stringify(value)}`);
+		const normalized = value.toLowerCase();
+		const hex = normalized.slice(0, 7);
+		const r = parseInt(normalized.slice(1, 3), 16);
+		const g = parseInt(normalized.slice(3, 5), 16);
+		const b = parseInt(normalized.slice(5, 7), 16);
+		const alpha = normalized.length === 9 ? this.#round(parseInt(normalized.slice(7, 9), 16) / 255) : 1;
+		return new ColorValue("srgb", [
+			this.#round(r / 255),
+			this.#round(g / 255),
+			this.#round(b / 255)
+		], alpha, hex);
+	}
+	#parseDimension(value) {
+		if (typeof value !== "string") throw new HrdtTokenReaderError(`Expected dimension string, got: ${JSON.stringify(value)}`);
+		const match = value.match(DIMENSION_RE);
+		if (!match) throw new HrdtTokenReaderError(`Expected dimension with px/rem unit, got: "${value}"`);
+		return new DimensionValue(Number(match[1]), match[2]);
+	}
+	#parseFontFamily(value) {
+		if (typeof value === "string") return value;
+		if (Array.isArray(value) && value.every((v) => typeof v === "string")) return value;
+		throw new HrdtTokenReaderError(`Expected fontFamily string or array, got: ${JSON.stringify(value)}`);
+	}
+	#parseFontWeight(value) {
+		if (typeof value === "string" || typeof value === "number") return value;
+		throw new HrdtTokenReaderError(`Expected fontWeight string or number, got: ${JSON.stringify(value)}`);
+	}
+	#parseNumber(value) {
+		if (typeof value !== "number") throw new HrdtTokenReaderError(`Expected number, got: ${JSON.stringify(value)}`);
+		return value;
+	}
+	#parseDuration(value) {
+		if (typeof value !== "string") throw new HrdtTokenReaderError(`Expected duration string, got: ${JSON.stringify(value)}`);
+		const match = value.match(DURATION_RE);
+		if (!match) throw new HrdtTokenReaderError(`Expected duration with ms/s unit, got: "${value}"`);
+		return new DurationValue(Number(match[1]), match[2]);
+	}
+	#parseCubicBezier(value) {
+		if (!Array.isArray(value) || value.length !== 4 || !value.every((v) => typeof v === "number")) throw new HrdtTokenReaderError(`Expected cubicBezier [n, n, n, n], got: ${JSON.stringify(value)}`);
+		return new CubicBezierValue(value[0], value[1], value[2], value[3]);
+	}
+	#parseStrokeStyle(value) {
+		if (typeof value === "string") return value;
+		if (this.#isObject(value)) {
+			const obj = value;
+			return new StrokeStyleObject(obj["dashArray"].map((d) => this.#parseDimension(d)), obj["lineCap"]);
+		}
+		throw new HrdtTokenReaderError(`Expected strokeStyle, got: ${JSON.stringify(value)}`);
+	}
+	#parseBorder(value) {
+		if (!this.#isObject(value)) throw new HrdtTokenReaderError(`Expected border object, got: ${JSON.stringify(value)}`);
+		const obj = value;
+		return new BorderValue(this.#parseColor(obj["color"]), this.#parseDimension(obj["width"]), this.#parseStrokeStyle(obj["style"]));
+	}
+	#parseTransition(value) {
+		if (!this.#isObject(value)) throw new HrdtTokenReaderError(`Expected transition object, got: ${JSON.stringify(value)}`);
+		const obj = value;
+		return new TransitionValue(this.#parseDuration(obj["duration"]), this.#parseDuration(obj["delay"]), this.#parseCubicBezier(obj["timingFunction"]));
+	}
+	#parseShadow(value) {
+		if (Array.isArray(value)) return value.map((item) => this.#parseShadowLayer(item));
+		return this.#parseShadowLayer(value);
+	}
+	#parseShadowLayer(value) {
+		if (!this.#isObject(value)) throw new HrdtTokenReaderError(`Expected shadow layer object, got: ${JSON.stringify(value)}`);
+		const obj = value;
+		return new ShadowLayer(this.#parseColor(obj["color"]), this.#parseDimension(obj["offsetX"]), this.#parseDimension(obj["offsetY"]), this.#parseDimension(obj["blur"]), this.#parseDimension(obj["spread"]));
+	}
+	#parseGradient(value) {
+		if (!Array.isArray(value)) throw new HrdtTokenReaderError(`Expected gradient stops array, got: ${JSON.stringify(value)}`);
+		return value.map((item) => {
+			if (!this.#isObject(item)) throw new HrdtTokenReaderError(`Expected gradient stop object, got: ${JSON.stringify(item)}`);
+			const obj = item;
+			return new GradientStop(this.#parseColor(obj["color"]), this.#parseNumber(obj["position"]));
+		});
+	}
+	#parseTypography(value) {
+		if (!this.#isObject(value)) throw new HrdtTokenReaderError(`Expected typography object, got: ${JSON.stringify(value)}`);
+		const obj = value;
+		return new TypographyValue(this.#parseFontFamily(obj["fontFamily"]), this.#parseDimension(obj["fontSize"]), this.#parseFontWeight(obj["fontWeight"]), this.#parseDimension(obj["letterSpacing"]), this.#parseNumber(obj["lineHeight"]));
+	}
+	#isObject(value) {
+		return typeof value === "object" && value !== null && !Array.isArray(value);
+	}
+	#round(value) {
+		return Number(value.toFixed(3));
+	}
+};
+/**
+* Thrown when the YAML content does not conform to the HRDT token format.
+*/
+var HrdtTokenReaderError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "HrdtTokenReaderError";
+	}
+};
+var SimpleHrdtParser = class {
+	#lines;
+	#index = 0;
+	constructor(content) {
+		this.#lines = content.replace(/^/, "").split(/\r?\n/g).map((line) => line.replace(/\s+$/u, "")).filter((line) => line.trim().length > 0 && !line.trimStart().startsWith("#")).map((line) => ({
+			indent: line.length - line.trimStart().length,
+			text: line.trimStart()
+		}));
+	}
+	parse() {
+		const result = this.#parseBlock(0);
+		if (typeof result !== "object" || result === null || Array.isArray(result)) throw new HrdtTokenReaderError("YAML root must be an object.");
+		return result;
+	}
+	#parseBlock(indent) {
+		const line = this.#current();
+		if (!line || line.indent < indent) return {};
+		return line.text.startsWith("- ") ? this.#parseSequence(indent) : this.#parseMapping(indent);
+	}
+	#parseMapping(indent) {
+		const output = {};
+		while (this.#index < this.#lines.length) {
+			const line = this.#current();
+			if (line.indent < indent) break;
+			if (line.indent > indent) throw new HrdtTokenReaderError(`Unexpected indentation near "${line.text}".`);
+			if (line.text.startsWith("- ")) break;
+			const { key, value } = this.#parseKeyValue(line.text);
+			this.#index += 1;
+			output[key] = value === void 0 ? this.#parseBlock(this.#nextIndent(indent)) : this.#parseScalar(value);
+		}
+		return output;
+	}
+	#parseSequence(indent) {
+		const output = [];
+		while (this.#index < this.#lines.length) {
+			const line = this.#current();
+			if (line.indent < indent) break;
+			if (line.indent !== indent || !line.text.startsWith("- ")) break;
+			const itemText = line.text.slice(2).trim();
+			this.#index += 1;
+			if (itemText.includes(":")) {
+				const { key, value } = this.#parseKeyValue(itemText);
+				const item = {};
+				item[key] = value === void 0 ? this.#parseBlock(this.#nextIndent(indent)) : this.#parseScalar(value);
+				if (this.#current()?.indent === indent + 2 && !this.#current()?.text.startsWith("- ")) Object.assign(item, this.#parseMapping(indent + 2));
+				output.push(item);
+			} else output.push(this.#parseScalar(itemText));
+		}
+		return output;
+	}
+	#parseKeyValue(text) {
+		const delimiter = text.indexOf(":");
+		if (delimiter < 0) throw new HrdtTokenReaderError(`Expected key-value pair, got "${text}".`);
+		const rawKey = text.slice(0, delimiter).trim();
+		if (!rawKey) throw new HrdtTokenReaderError(`Expected non-empty key in "${text}".`);
+		const value = text.slice(delimiter + 1).trim();
+		const key = rawKey.startsWith("\"") && rawKey.endsWith("\"") || rawKey.startsWith("'") && rawKey.endsWith("'") ? this.#unquote(rawKey) : rawKey;
+		return value.length === 0 ? { key } : {
+			key,
+			value
+		};
+	}
+	#parseScalar(value) {
+		if (value.startsWith("[") && value.endsWith("]")) return this.#parseInlineArray(value);
+		if (value.startsWith("\"") && value.endsWith("\"") || value.startsWith("'") && value.endsWith("'")) return this.#unquote(value);
+		if (value === "true") return true;
+		if (value === "false") return false;
+		if (value === "null") return null;
+		if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);
+		return value;
+	}
+	#parseInlineArray(value) {
+		const inner = value.slice(1, -1).trim();
+		if (!inner) return [];
+		return this.#splitInlineArray(inner).map((item) => this.#parseScalar(item.trim()));
+	}
+	#splitInlineArray(value) {
+		const items = [];
+		let current = "";
+		let quote;
+		for (let i = 0; i < value.length; i++) {
+			const char = value[i];
+			if (quote) {
+				current += char;
+				if (char === quote && value[i - 1] !== "\\") quote = void 0;
+				continue;
+			}
+			if (char === "\"" || char === "'") {
+				quote = char;
+				current += char;
+				continue;
+			}
+			if (char === ",") {
+				items.push(current);
+				current = "";
+				continue;
+			}
+			current += char;
+		}
+		items.push(current);
+		return items;
+	}
+	#unquote(value) {
+		if (value.startsWith("\"")) return JSON.parse(value);
+		return value.slice(1, -1).replace(/''/g, "'");
+	}
+	#current() {
+		return this.#lines[this.#index];
+	}
+	#nextIndent(currentIndent) {
+		const nextLine = this.#current();
+		if (!nextLine || nextLine.indent <= currentIndent) return currentIndent + 2;
+		return nextLine.indent;
+	}
+};
+//#endregion
+//#region src/core/model/DtcgList.ts
+/**
+* An ordered collection of DTCG documents representing a base token set and its theme overrides.
+*
+* The base document defines all tokens. Each theme document overrides a subset of them.
+* When validating a theme, references are resolved against the theme first, then the base.
+*
+* @see https://tr.designtokens.org/format/#file-format
+*/
+var DtcgList = class {
+	base;
+	themes;
+	constructor(base, themes) {
+		this.base = base;
+		this.themes = themes ?? /* @__PURE__ */ new Map();
+	}
+	validate() {
+		const issues = this.base.validate();
+		for (const theme of this.themes.values()) issues.push(...theme.validate(this.base));
+		return issues;
+	}
+};
+//#endregion
+//#region src/core/io/DtcgJsonReader.ts
+var GROUP_KEYS = new Set([
+	"$type",
+	"$description",
+	"$extensions",
+	"$deprecated",
+	"$extends",
+	"$root",
+	"$schema"
+]);
+/**
+* Parses a DTCG 2025.10 JSON document into a {@link Dtcg}.
+*
+* A child object is treated as a token when it contains `$value` or `$ref`,
+* and as a group otherwise.
+*
+* @see https://tr.designtokens.org/format/
+*/
+var DtcgJsonReader = class {
+	parse(content) {
+		const raw = JSON.parse(content);
+		return new Dtcg(this.#parseGroup(raw, void 0));
+	}
+	#parseGroup(raw, inheritedType) {
+		const type = this.#resolveType(raw["$type"], inheritedType);
+		const description = typeof raw["$description"] === "string" ? raw["$description"] : void 0;
+		const deprecated = this.#parseDeprecated(raw["$deprecated"]);
+		const extensions = this.#parseExtensions(raw["$extensions"]);
+		const extendsRef = this.#parseExtendsRef(raw["$extends"]);
+		const root = raw["$root"] != null ? this.#parseToken(raw["$root"], type) : void 0;
+		const children = /* @__PURE__ */ new Map();
+		for (const [key, value] of Object.entries(raw)) {
+			if (GROUP_KEYS.has(key)) continue;
+			if (typeof value !== "object" || value === null || Array.isArray(value)) continue;
+			const child = value;
+			if (this.#isToken(child)) children.set(key, this.#parseToken(child, type));
+			else children.set(key, this.#parseGroup(child, type));
+		}
+		return new TokenGroup({
+			type,
+			description,
+			deprecated,
+			extensions,
+			extends: extendsRef,
+			root,
+			children
+		});
+	}
+	#isToken(raw) {
+		return "$value" in raw || "$ref" in raw;
+	}
+	#parseToken(raw, inheritedType) {
+		const type = this.#resolveType(raw["$type"], inheritedType);
+		const description = typeof raw["$description"] === "string" ? raw["$description"] : void 0;
+		const deprecated = this.#parseDeprecated(raw["$deprecated"]);
+		const extensions = this.#parseExtensions(raw["$extensions"]);
+		if ("$ref" in raw) {
+			const ref = raw["$ref"];
+			if (typeof ref !== "string") throw new DtcgJsonReaderError("$ref must be a string");
+			return this.#makeToken(type, new TokenReference(ref), description, deprecated, extensions);
+		}
+		const rawValue = raw["$value"];
+		if (typeof rawValue === "string" && /^\{[^{}]+\}$/.test(rawValue)) {
+			const ref = new TokenReference(rawValue.slice(1, -1));
+			return this.#makeToken(type, ref, description, deprecated, extensions);
+		}
+		if (type == null) throw new DtcgJsonReaderError(`Token has no $type and no inherited type: ${JSON.stringify(raw)}`);
+		const value = this.#parseValue(type, rawValue);
+		return this.#makeToken(type, value, description, deprecated, extensions);
+	}
+	#makeToken(type, value, description, deprecated, extensions) {
+		switch (type) {
+			case "color": return new ColorToken(value, description, deprecated, extensions);
+			case "dimension": return new DimensionToken(value, description, deprecated, extensions);
+			case "fontFamily": return new FontFamilyToken(value, description, deprecated, extensions);
+			case "fontWeight": return new FontWeightToken(value, description, deprecated, extensions);
+			case "number": return new NumberToken(value, description, deprecated, extensions);
+			case "duration": return new DurationToken(value, description, deprecated, extensions);
+			case "cubicBezier": return new CubicBezierToken(value, description, deprecated, extensions);
+			case "strokeStyle": return new StrokeStyleToken(value, description, deprecated, extensions);
+			case "border": return new BorderToken(value, description, deprecated, extensions);
+			case "transition": return new TransitionToken(value, description, deprecated, extensions);
+			case "shadow": return new ShadowToken(value, description, deprecated, extensions);
+			case "gradient": return new GradientToken(value, description, deprecated, extensions);
+			case "typography": return new TypographyToken(value, description, deprecated, extensions);
+			case void 0: return new AliasToken(value, description, deprecated, extensions);
+			default: throw new DtcgJsonReaderError(`Unknown token type: ${String(type)}`);
+		}
+	}
+	#parseValue(type, raw) {
+		switch (type) {
+			case "color": return this.#parseColor(raw);
+			case "dimension": return this.#parseDimension(raw);
+			case "fontFamily": return this.#parseFontFamily(raw);
+			case "fontWeight": return this.#parseFontWeight(raw);
+			case "number": return this.#parseNumber(raw);
+			case "duration": return this.#parseDuration(raw);
+			case "cubicBezier": return this.#parseCubicBezier(raw);
+			case "strokeStyle": return this.#parseStrokeStyle(raw);
+			case "border": return this.#parseBorder(raw);
+			case "transition": return this.#parseTransition(raw);
+			case "shadow": return this.#parseShadow(raw);
+			case "gradient": return this.#parseGradient(raw);
+			case "typography": return this.#parseTypography(raw);
+		}
+	}
+	#parseColor(raw) {
+		if (typeof raw !== "object" || raw === null || Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid color value: ${JSON.stringify(raw)}`);
+		const obj = raw;
+		const colorSpace = obj["colorSpace"];
+		const components = obj["components"];
+		return new ColorValue(colorSpace, components, typeof obj["alpha"] === "number" ? obj["alpha"] : 1, typeof obj["hex"] === "string" ? obj["hex"] : void 0);
+	}
+	#parseDimension(raw) {
+		if (typeof raw !== "object" || raw === null || Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid dimension value: ${JSON.stringify(raw)}`);
+		const obj = raw;
+		return new DimensionValue(obj["value"], obj["unit"]);
+	}
+	#parseFontFamily(raw) {
+		if (typeof raw === "string") return raw;
+		if (Array.isArray(raw)) return raw;
+		throw new DtcgJsonReaderError(`Invalid fontFamily value: ${JSON.stringify(raw)}`);
+	}
+	#parseFontWeight(raw) {
+		if (typeof raw === "number" || typeof raw === "string") return raw;
+		throw new DtcgJsonReaderError(`Invalid fontWeight value: ${JSON.stringify(raw)}`);
+	}
+	#parseNumber(raw) {
+		if (typeof raw !== "number") throw new DtcgJsonReaderError(`Invalid number value: ${JSON.stringify(raw)}`);
+		return raw;
+	}
+	#parseDuration(raw) {
+		if (typeof raw !== "object" || raw === null || Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid duration value: ${JSON.stringify(raw)}`);
+		const obj = raw;
+		return new DurationValue(obj["value"], obj["unit"]);
+	}
+	#parseCubicBezier(raw) {
+		if (!Array.isArray(raw) || raw.length !== 4) throw new DtcgJsonReaderError(`Invalid cubicBezier value: ${JSON.stringify(raw)}`);
+		return new CubicBezierValue(raw[0], raw[1], raw[2], raw[3]);
+	}
+	#parseStrokeStyle(raw) {
+		if (typeof raw === "string") return raw;
+		if (typeof raw === "object" && raw !== null && !Array.isArray(raw)) {
+			const obj = raw;
+			return new StrokeStyleObject(obj["dashArray"].map((d) => this.#parseDimension(d)), obj["lineCap"]);
+		}
+		throw new DtcgJsonReaderError(`Invalid strokeStyle value: ${JSON.stringify(raw)}`);
+	}
+	#parseBorder(raw) {
+		if (typeof raw !== "object" || raw === null || Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid border value: ${JSON.stringify(raw)}`);
+		const obj = raw;
+		return new BorderValue(this.#parseColorOrRef(obj["color"]), this.#parseDimensionOrRef(obj["width"]), this.#parseStrokeStyleOrRef(obj["style"]));
+	}
+	#parseTransition(raw) {
+		if (typeof raw !== "object" || raw === null || Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid transition value: ${JSON.stringify(raw)}`);
+		const obj = raw;
+		return new TransitionValue(this.#parseDurationOrRef(obj["duration"]), this.#parseDurationOrRef(obj["delay"]), this.#parseCubicBezierOrRef(obj["timingFunction"]));
+	}
+	#parseShadow(raw) {
+		if (Array.isArray(raw)) return raw.map((item) => this.#parseShadowLayerOrRef(item));
+		return this.#parseShadowLayer(raw);
+	}
+	#parseShadowLayer(raw) {
+		if (typeof raw !== "object" || raw === null || Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid shadow layer: ${JSON.stringify(raw)}`);
+		const obj = raw;
+		return new ShadowLayer(this.#parseColorOrRef(obj["color"]), this.#parseDimensionOrRef(obj["offsetX"]), this.#parseDimensionOrRef(obj["offsetY"]), this.#parseDimensionOrRef(obj["blur"]), this.#parseDimensionOrRef(obj["spread"]), typeof obj["inset"] === "boolean" ? obj["inset"] : false);
+	}
+	#parseShadowLayerOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseShadowLayer(raw);
+	}
+	#parseGradient(raw) {
+		if (!Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid gradient value: ${JSON.stringify(raw)}`);
+		return raw.map((item) => this.#parseGradientStopOrRef(item));
+	}
+	#parseGradientStopOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		if (typeof raw !== "object" || raw === null || Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid gradient stop: ${JSON.stringify(raw)}`);
+		const obj = raw;
+		return new GradientStop(this.#parseColorOrRef(obj["color"]), this.#parseNumberOrRef(obj["position"]));
+	}
+	#parseTypography(raw) {
+		if (typeof raw !== "object" || raw === null || Array.isArray(raw)) throw new DtcgJsonReaderError(`Invalid typography value: ${JSON.stringify(raw)}`);
+		const obj = raw;
+		return new TypographyValue(this.#parseFontFamilyOrRef(obj["fontFamily"]), this.#parseDimensionOrRef(obj["fontSize"]), this.#parseFontWeightOrRef(obj["fontWeight"]), this.#parseDimensionOrRef(obj["letterSpacing"]), this.#parseNumberOrRef(obj["lineHeight"]));
+	}
+	#parseColorOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseColor(raw);
+	}
+	#parseDimensionOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseDimension(raw);
+	}
+	#parseDurationOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseDuration(raw);
+	}
+	#parseCubicBezierOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseCubicBezier(raw);
+	}
+	#parseStrokeStyleOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseStrokeStyle(raw);
+	}
+	#parseFontFamilyOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseFontFamily(raw);
+	}
+	#parseFontWeightOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseFontWeight(raw);
+	}
+	#parseNumberOrRef(raw) {
+		if (typeof raw === "string" && /^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return this.#parseNumber(raw);
+	}
+	#resolveType(raw, inherited) {
+		if (typeof raw === "string") return raw;
+		return inherited;
+	}
+	#parseDeprecated(raw) {
+		if (typeof raw === "boolean" || typeof raw === "string") return raw;
+	}
+	#parseExtensions(raw) {
+		if (typeof raw === "object" && raw !== null && !Array.isArray(raw)) return raw;
+	}
+	#parseExtendsRef(raw) {
+		if (typeof raw !== "string") return void 0;
+		if (/^\{[^{}]+\}$/.test(raw)) return new TokenReference(raw.slice(1, -1));
+		return raw;
+	}
+};
+/**
+* Thrown when the input JSON does not conform to the expected DTCG structure.
+*/
+var DtcgJsonReaderError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "DtcgJsonReaderError";
+	}
+};
+//#endregion
+//#region src/core/Source.ts
+var SourceType = /* @__PURE__ */ function(SourceType) {
+	SourceType["URL"] = "url";
+	SourceType["FILE"] = "file";
+	SourceType["CONTENT"] = "content";
+	return SourceType;
+}(SourceType || {});
+/**
+* Data source.
+* Wraps URL, File or content.
+*
+* Allows returning any of these data sources as a file.
+* Used in tool implementations to simplify the interface.
+*/
+var Source = class Source {
+	#type;
+	#input;
+	#filePath;
+	constructor(input) {
+		this.#input = input;
+		if (Source.#isHttpUrl(input)) this.#type = SourceType.URL;
+		else if (existsSync(input)) this.#type = SourceType.FILE;
+		else this.#type = SourceType.CONTENT;
+	}
+	static #isHttpUrl(value) {
+		try {
+			const url = new URL(value);
+			return url.protocol === "http:" || url.protocol === "https:";
+		} catch {
+			return false;
+		}
+	}
+	getInput() {
+		return this.#input;
+	}
+	getType() {
+		return this.#type;
+	}
+	async getContent() {
+		if (this.#type === SourceType.FILE) return readFile(this.#input, "utf8");
+		else if (this.#type === SourceType.URL) {
+			const response = await fetch(this.#input);
+			if (!response.ok) throw new Error(`Unable to fetch "${this.#input}": HTTP ${response.status}`);
+			return response.text();
+		} else if (this.#type === SourceType.CONTENT) return this.#input;
+		else throw new Error(`Unsupported source type "${this.#type}: ${this.#input}"`);
+	}
+	async getFile() {
+		if (this.#filePath !== void 0) return this.#filePath;
+		if (this.#type === SourceType.FILE) this.#filePath = this.#input;
+		else if (this.#type === SourceType.URL) {
+			const response = await fetch(this.#input);
+			if (!response.ok) throw new Error(`Unable to fetch "${this.#input}": HTTP ${response.status}`);
+			this.#filePath = await Source.#writeTemp(await response.text());
+		} else this.#filePath = await Source.#writeTemp(this.#input);
+		return this.#filePath;
+	}
+	static async #writeTemp(content) {
+		const filePath = path.join(tmpdir(), `designtokens-${randomUUID()}.tmp`);
+		await writeFile(filePath, content, "utf8");
+		return filePath;
+	}
+};
+//#endregion
+//#region src/core/css/DtcgTokenCssConverter.ts
+function extractThemeName$1(filePath) {
+	const withoutExt = (filePath.split("/").at(-1)?.split("\\").at(-1) ?? filePath).replace(/\.json$/i, "");
+	const dotIndex = withoutExt.lastIndexOf(".");
+	return dotIndex > 0 ? withoutExt.slice(dotIndex + 1) : withoutExt;
+}
+function tokenPathToCssVar(path) {
+	return `--${path.replace(/\./g, "-")}`;
+}
+function refToCssVar(ref) {
+	return `var(${tokenPathToCssVar(ref.value)})`;
+}
+function colorToCss(color) {
+	if (color.hex && color.alpha === 1) return color.hex;
+	const components = color.components.map((c) => c === "none" ? "none" : String(c)).join(" ");
+	const alpha = color.alpha !== 1 ? ` / ${color.alpha}` : "";
+	return `color(${color.colorSpace} ${components}${alpha})`;
+}
+function dimensionOrRefToCss(value) {
+	if (value instanceof TokenReference) return refToCssVar(value);
+	return `${value.value}${value.unit}`;
+}
+function durationOrRefToCss(value) {
+	if (value instanceof TokenReference) return refToCssVar(value);
+	return `${value.value}${value.unit}`;
+}
+function timingOrRefToCss(value) {
+	if (value instanceof TokenReference) return refToCssVar(value);
+	return `cubic-bezier(${value.p1x}, ${value.p1y}, ${value.p2x}, ${value.p2y})`;
+}
+function shadowLayerToCss(layer) {
+	return `${layer.inset ? "inset " : ""}${dimensionOrRefToCss(layer.offsetX)} ${dimensionOrRefToCss(layer.offsetY)} ${dimensionOrRefToCss(layer.blur)} ${dimensionOrRefToCss(layer.spread)} ${layer.color instanceof TokenReference ? refToCssVar(layer.color) : colorToCss(layer.color)}`;
+}
+function tokenValueToCss(value) {
+	if (value instanceof TokenReference) return refToCssVar(value);
+	if (value instanceof ColorValue) return colorToCss(value);
+	if (value instanceof DimensionValue) return `${value.value}${value.unit}`;
+	if (value instanceof DurationValue) return `${value.value}${value.unit}`;
+	if (value instanceof CubicBezierValue) return `cubic-bezier(${value.p1x}, ${value.p1y}, ${value.p2x}, ${value.p2y})`;
+	if (typeof value === "number") return String(value);
+	if (typeof value === "string") return value;
+	if (value instanceof ShadowLayer) return shadowLayerToCss(value);
+	if (value instanceof BorderValue) return `${dimensionOrRefToCss(value.width)} ${value.style instanceof TokenReference ? refToCssVar(value.style) : value.style instanceof StrokeStyleObject ? "dashed" : value.style} ${value.color instanceof TokenReference ? refToCssVar(value.color) : colorToCss(value.color)}`;
+	if (value instanceof TransitionValue) return `${durationOrRefToCss(value.duration)} ${timingOrRefToCss(value.timingFunction)} ${durationOrRefToCss(value.delay)}`;
+	if (Array.isArray(value)) {
+		if (value.length === 0) return void 0;
+		if (value[0] instanceof GradientStop || value[0] instanceof TokenReference && !(value[0] instanceof ShadowLayer)) {
+			if (value.every((item) => item instanceof GradientStop || item instanceof TokenReference)) {
+				if (value.some((item) => item instanceof GradientStop)) return void 0;
+			}
+		}
+		if (value[0] instanceof ShadowLayer || value[0] instanceof TokenReference) return value.map((item) => item instanceof ShadowLayer ? shadowLayerToCss(item) : refToCssVar(item)).join(", ");
+		return value.map((f) => f instanceof TokenReference ? refToCssVar(f) : `"${f}"`).join(", ");
+	}
+	if (value instanceof TypographyValue) return void 0;
+}
+function collectDeclarations(group, path) {
+	const result = [];
+	for (const [key, child] of group.entries()) {
+		const childPath = [...path, key];
+		if (child instanceof TokenGroup) result.push(...collectDeclarations(child, childPath));
+		else if (child instanceof TokenNode) {
+			const css = tokenValueToCss(child.value);
+			if (css !== void 0) result.push([tokenPathToCssVar(childPath.join(".")), css]);
+		}
+	}
+	return result;
+}
+function collectFromDoc(doc) {
+	const result = [];
+	for (const [key, child] of doc.entries()) if (child instanceof TokenGroup) result.push(...collectDeclarations(child, [key]));
+	else if (child instanceof TokenNode) {
+		const css = tokenValueToCss(child.value);
+		if (css !== void 0) result.push([tokenPathToCssVar(key), css]);
+	}
+	return result;
+}
+function renderBlock(selector, declarations) {
+	if (declarations.length === 0) return "";
+	return `${selector} {\n${declarations.map(([prop, val]) => `  ${prop}: ${val};`).join("\n")}\n}`;
+}
+async function readDoc$1(source) {
+	const content = await new Source(source).getContent();
+	return /\.(ya?ml)$/i.test(source) ? new HrdtTokenReader().parse(content) : new DtcgJsonReader().parse(content);
+}
+async function loadDtcgList(sources) {
+	const [base, ...rest] = await Promise.all(sources.map(readDoc$1));
+	return new DtcgList(base, new Map(rest.map((doc, i) => [extractThemeName$1(sources[i + 1]), doc])));
+}
+var DtcgTokenCssConverter = class {
+	async convert(sources) {
+		const list = await loadDtcgList(sources);
+		return this.convertList(list);
+	}
+	convertDocument(doc) {
+		return this.convertList(new DtcgList(doc, /* @__PURE__ */ new Map()));
+	}
+	convertList(list) {
+		const blocks = [];
+		const baseBlock = renderBlock(":root", collectFromDoc(list.base));
+		if (baseBlock) blocks.push(baseBlock);
+		for (const [themeName, theme] of list.themes) {
+			const block = renderBlock(`:root[data-theme="${themeName}"]`, collectFromDoc(theme));
+			if (block) blocks.push(block);
+		}
+		return blocks.join("\n\n");
+	}
+};
+//#endregion
+//#region src/core/showcase/CssTokenParser.ts
+/**
+* Parses generated CSS variables into a structure for the HTML showcase.
+*
+* @remarks
+* Finds `:root { ... }` blocks, extracts CSS custom properties from them
+* and keeps the link to themes from `Set` and `Modifier` comments.
+*
+* Returns:
+* - a full list of all found tokens;
+* - a list of tokens grouped by themes.
+*/
+var CssTokenParser = class {
+	parse(cssString) {
+		const entries = [];
+		const themeMap = /* @__PURE__ */ new Map();
+		let currentSet;
+		let pendingThemeName;
+		let currentThemeName;
+		let insideRootBlock = false;
+		const blockLines = [];
+		for (const line of cssString.split(/\r?\n/g)) {
+			const trimmed = line.trim();
+			if (!insideRootBlock && trimmed.startsWith("/* Set:")) {
+				currentSet = trimmed.replace("/* Set:", "").replace("*/", "").trim();
+				pendingThemeName = currentSet;
+				continue;
+			}
+			if (!insideRootBlock && trimmed.startsWith("/* Modifier:")) {
+				const modifierName = this.extractModifierThemeName(trimmed);
+				pendingThemeName = modifierName ? currentSet ? `${currentSet}.${modifierName}` : modifierName : void 0;
+				continue;
+			}
+			if (!insideRootBlock && trimmed.startsWith(":root") && trimmed.endsWith("{")) {
+				insideRootBlock = true;
+				currentThemeName = pendingThemeName ?? currentSet;
+				blockLines.length = 0;
+				pendingThemeName = void 0;
+				continue;
+			}
+			if (insideRootBlock) {
+				if (trimmed === "}") {
+					insideRootBlock = false;
+					const blockEntries = this.extractBlockEntries(blockLines.join("\n"), currentThemeName);
+					entries.push(...blockEntries);
+					if (currentThemeName && blockEntries.length > 0) {
+						if (!themeMap.has(currentThemeName)) themeMap.set(currentThemeName, []);
+						themeMap.get(currentThemeName).push(...blockEntries);
+					}
+					currentThemeName = void 0;
+					blockLines.length = 0;
+					continue;
+				}
+				blockLines.push(line);
+			}
+		}
+		return {
+			entries,
+			themes: [...themeMap.entries()].map(([name, themeEntries]) => ({
+				name,
+				entries: themeEntries
+			}))
+		};
+	}
+	extractModifierThemeName(annotationValue) {
+		return annotationValue.match(/theme\s*=\s*([a-zA-Z0-9_-]+)/)?.[1];
+	}
+	extractBlockEntries(body, themeName) {
+		const entries = [];
+		for (const match of body.matchAll(/--([^:]+):\s*([\s\S]*?);/g)) {
+			const name = `--${match[1]}`;
+			const value = match[2].replace(/\s+/g, " ").trim();
+			const scope = match[1].split("-")[0] || "other";
+			entries.push({
+				name,
+				value,
+				scope,
+				themeName
+			});
+		}
+		return entries;
+	}
+};
+//#endregion
+//#region src/core/showcase/TokenHtmlShowcaseStyles.ts
+var TOKEN_HTML_SHOWCASE_CSS = `
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-padding-top: 112px;
+}
+
+[id] {
+    scroll-margin-top: 112px;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: #f8fafc;
+    color: #1e293b;
+}
+
+.page-header {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    padding: 0 1.25rem;
+    border-bottom: 1px solid #e2e8f0;
+    background: #fff;
+}
+
+.page-title {
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: 0;
+    text-transform: uppercase;
+}
+
+.page-shell {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    min-height: calc(100vh - 64px);
+}
+
+.sidebar {
+    border-right: 1px solid #e2e8f0;
+    background: #fff;
+    padding: 0.875rem 0.625rem;
+    position: sticky;
+    top: 64px;
+    height: calc(100vh - 64px);
+    overflow: auto;
+}
+
+.sidebar-title {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #64748b;
+    text-transform: uppercase;
+    margin: 0 0.625rem 0.75rem;
+}
+
+.sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.sidebar-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.sidebar-group-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding-left: 0.75rem;
+}
+
+.sidebar-group-body--scope {
+    padding-left: 1rem;
+}
+
+.sidebar-group-body[hidden] {
+    display: none;
+}
+
+.sidebar-link {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+    min-height: 28px;
+    padding: 0.25rem 0.375rem;
+    border-radius: 4px;
+    text-decoration: none;
+    color: #334155;
+    font-size: 0.8125rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-weight: 600;
+    background: transparent;
+    border: 0;
+    text-align: left;
+    cursor: pointer;
+}
+
+.sidebar-link:hover {
+    background: #f1f5f9;
+}
+
+.sidebar-toggle[aria-expanded="true"] {
+    background: #e2e8f0;
+}
+
+.sidebar-chevron {
+    width: 0.3125rem;
+    height: 0.3125rem;
+    border-right: 1.25px solid #94a3b8;
+    border-bottom: 1.25px solid #94a3b8;
+    transform: rotate(-45deg);
+    transition: transform 0.12s ease;
+    flex-shrink: 0;
+}
+
+.sidebar-toggle[aria-expanded="true"] .sidebar-chevron {
+    transform: rotate(45deg);
+}
+
+.lucide-folder {
+    width: 1rem;
+    height: 1rem;
+    color: #64748b;
+    flex-shrink: 0;
+}
+
+.sidebar-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sidebar-sub-link {
+    display: block;
+    padding: 0.25rem 0.375rem 0.25rem 1rem;
+    border-radius: 4px;
+    text-decoration: none;
+    color: #64748b;
+    font-size: 0.75rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    line-height: 1.35;
+}
+
+.sidebar-sub-link:hover {
+    background: #f1f5f9;
+    color: #334155;
+}
+
+.sidebar-sub-label {
+    display: block;
+    padding: 0.375rem 0.625rem 0.125rem;
+    color: #334155;
+    font-size: 0.75rem;
+    font-weight: 700;
+    font-family: "JetBrains Mono", monospace;
+}
+
+.sidebar-sub-link--nested {
+    padding-left: 2rem;
+}
+
+.sidebar-sub-label--nested {
+    padding-left: 2rem;
+}
+
+.sidebar-sub-link--deep {
+    padding-left: 2.75rem;
+}
+
+.content {
+    padding: 1.5rem 1.5rem 2rem;
+}
+
+.theme-summary {
+    margin-bottom: 1.5rem;
+}
+
+.theme-summary-title {
+    font-size: 0.75rem;
+    color: #64748b;
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+}
+
+.theme-summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 0.5rem;
+}
+
+.theme-summary-card {
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    background: #fff;
+    padding: 0.625rem;
+}
+
+.theme-summary-header {
+    display: flex;
+    align-items: baseline;
+    gap: 0.375rem;
+}
+
+.theme-summary-label {
+    color: #64748b;
+    font-size: 0.6875rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.theme-summary-name {
+    color: #0f172a;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.875rem;
+}
+
+.theme-summary-stats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.375rem;
+    margin: 0.5rem 0 0;
+}
+
+.theme-summary-stats div {
+    border-radius: 8px;
+    background: #f8fafc;
+    padding: 0.375rem;
+}
+
+.theme-summary-stats dt {
+    color: #64748b;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+}
+
+.theme-summary-stats dd {
+    margin: 0.25rem 0 0;
+    color: #0f172a;
+    font-size: 0.9375rem;
+}
+
+.back-to-top {
+    position: fixed;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    z-index: 40;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: 1px solid #e2e8f0;
+    border-radius: 999px;
+    color: #334155;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+}
+
+.back-to-top:hover {
+    background: #f8fafc;
+}
+
+.token-category {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0 0 1rem;
+    padding-bottom: 0.5rem;
+    text-transform: capitalize;
+}
+
+.token-section {
+    margin-bottom: 2rem;
+}
+
+.token-section--theme-scope {
+    margin-bottom: 1.5rem;
+}
+
+.theme-section {
+    margin-bottom: 2rem;
+}
+
+.theme-title {
+    font-size: 1.4rem;
+    font-weight: 400;
+    color: #334155;
+    margin: 0 0 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.token-subgroup-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #64748b;
+    text-transform: uppercase;
+    margin: 0 0 0.625rem;
+}
+
+.token-subgroup {
+    margin-bottom: 1.5rem;
+}
+
+.token-list {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 0.75rem;
+}
+
+.token-list.token-list--font {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.token-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    min-height: 130px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 0.75rem 0.875rem;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.8125rem;
+}
+
+.token-swatch {
+    width: 100%;
+    height: 56px;
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+    flex-shrink: 0;
+}
+
+.token-item--color-card {
+    position: relative;
+    gap: 0;
+    min-height: 205px;
+    padding: 0.5rem;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.token-item--color-card .token-swatch {
+    height: 109px;
+    margin-bottom: 0.875rem;
+    border: 0;
+    border-radius: 4px;
+}
+
+.token-item--color-card .token-type-badge {
+    position: absolute;
+    top: 1.375rem;
+    left: 1.4375rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
+    border-radius: 3px;
+    background: #ffffff;
+    color: #8b5cf6;
+    font-size: 0.5625rem;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    line-height: 1;
+}
+
+.token-item--color-card .token-name {
+    width: 100%;
+    margin: 0 0 auto;
+    padding: 0 0.875rem 0 0;
+    color: #334155;
+    font-size: 0.875rem;
+    line-height: 1.45;
+    min-height: 0;
+    word-break: normal;
+    overflow-wrap: anywhere;
+}
+
+.token-item--color-card .token-meta {
+    padding: 0 0.875rem 0.375rem 0;
+}
+
+.token-item--color-card .token-meta b {
+    color: #334155;
+}
+
+.token-name {
+    color: #475569;
+    min-width: 0;
+    word-break: break-all;
+    font-size: 14px;
+    margin-bottom: 0.25rem;
+    min-height: 34px;
+}
+
+.font-preview {
+    width: 100%;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 0.7rem;
+    background: #f8fafc;
+    height: 128px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+    text-overflow: ellipsis;
+    overflow-wrap: anywhere;
+}
+
+.font-preview--grid {
+    background-color: #fcfcfd;
+    background-image:
+        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
+    background-size: 12px 12px;
+}
+
+.token-item--font-card {
+    min-height: 0;
+}
+
+.token-name--font-card {
+    min-height: 0;
+}
+
+.token-meta {
+    display: block;
+    width: 100%;
+    color: #64748b;
+    font-size: 0.6875rem;
+    line-height: 1.35;
+}
+
+.token-meta span {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.25rem;
+    min-width: 0;
+}
+
+.token-meta b {
+    color: #334155;
+    font-weight: 700;
+    margin-right: 0;
+    flex-shrink: 0;
+}
+
+.token-meta-value {
+    color: #64748b;
+    background: transparent;
+    border-radius: 0;
+    padding: 0;
+    display: inline-block;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.spacing-visual {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.spacing-bar {
+    height: 1rem;
+    background: #3b82f6;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.radius-visual {
+    width: 3rem;
+    height: 3rem;
+    background: #e2e8f0;
+    border: 1px dashed #94a3b8;
+    flex-shrink: 0;
+}
+
+.token-item--radius-card {
+    min-height: 0;
+}
+
+.radius-preview {
+    width: 100%;
+    height: 112px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 1.75rem;
+    background: #fcfcfd;
+}
+
+.radius-preview--grid {
+    background-image:
+        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
+    background-size: 12px 12px;
+}
+
+.radius-preview-box {
+    width: 100%;
+    height: 100%;
+    border: 2px solid #334155;
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.token-item--opacity-card {
+    min-height: 0;
+}
+
+.opacity-preview {
+    width: 100%;
+    height: 112px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 1.75rem;
+    background-color: #fcfcfd;
+    overflow: hidden;
+}
+
+.opacity-preview--checker {
+    background-image:
+        linear-gradient(45deg, rgba(148, 163, 184, 0.22) 25%, transparent 25%),
+        linear-gradient(-45deg, rgba(148, 163, 184, 0.22) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.22) 75%),
+        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.22) 75%);
+    background-position:
+        0 0,
+        0 6px,
+        6px -6px,
+        -6px 0;
+    background-size: 12px 12px;
+}
+
+.opacity-preview-fill {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    background: #334155;
+}
+
+.font-sample {
+    font-size: 1.125rem;
+}
+
+.shadow-visual {
+    width: 4rem;
+    height: 4rem;
+    background: #fff;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.token-item--shadow-card {
+    min-height: 0;
+}
+
+.shadow-preview {
+    width: 100%;
+    height: 112px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 1.75rem;
+    background: #fcfcfd;
+    overflow: visible;
+}
+
+.shadow-preview--grid {
+    background-image:
+        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
+    background-size: 12px 12px;
+}
+
+.shadow-preview-box {
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.92);
+}
+
+.shadow-layer {
+    display: block;
+    color: #64748b;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    line-height: 1.5;
+}
+
+.token-item--motion-card {
+    min-height: 0;
+}
+
+.motion-preview {
+    width: 100%;
+    height: 112px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 1.75rem;
+    background: #fcfcfd;
+    overflow: hidden;
+}
+
+.motion-preview--grid {
+    background-image:
+        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
+    background-size: 12px 12px;
+}
+
+.motion-track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-bottom: 2px solid rgba(51, 65, 85, 0.2);
+}
+
+.motion-dot {
+    position: absolute;
+    left: 0;
+    bottom: -7px;
+    width: 14px;
+    height: 14px;
+    border-radius: 999px;
+    background: #334155;
+    box-shadow: 0 0 0 4px rgba(44, 77, 243, 0.18);
+    animation: token-motion-move var(--motion-duration, 1200ms) var(--motion-timing, ease) var(--motion-delay, 0ms) infinite alternate;
+}
+
+@keyframes token-motion-move {
+    from {
+        left: 0;
+    }
+
+    to {
+        left: calc(100% - 14px);
+    }
+}
+
+.border-visual {
+    width: 4rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+}
+
+.token-item--border-card {
+    min-height: 0;
+}
+
+.border-preview {
+    width: 100%;
+    height: 112px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 1.75rem;
+    background: #fcfcfd;
+}
+
+.border-preview--grid {
+    background-image:
+        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
+    background-size: 12px 12px;
+}
+
+.border-preview-box {
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.token-item--dimension-card {
+    min-height: 0;
+}
+
+.dimension-preview {
+    position: relative;
+    width: 100%;
+    height: 112px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    background: #fcfcfd;
+    overflow: hidden;
+}
+
+.dimension-preview--grid {
+    background-image:
+        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
+    background-size: 12px 12px;
+}
+
+.dimension-marker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    min-width: 1px;
+    max-width: 100%;
+    background: #334155;
+    transform: translateX(-50%);
+}
+
+.token-meta--stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.gradient-visual {
+    width: 6rem;
+    height: 2.5rem;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.token-item--gradient-card {
+    min-height: 0;
+}
+
+.token-item--gradient-card .token-swatch {
+    height: 109px;
+}
+
+.gradient-stops {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.375rem;
+    width: 100%;
+}
+
+.gradient-stop {
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr);
+    gap: 0.5rem;
+    align-items: center;
+    min-width: 0;
+}
+
+.gradient-stop__swatch.token-swatch {
+    width: 48px;
+    height: 28px;
+    border-radius: 4px;
+}
+
+.gradient-stop__value {
+    min-width: 0;
+    color: #64748b;
+    font-size: 0.6875rem;
+    overflow-wrap: anywhere;
+}
+
+.token-type-badge {
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    padding: 0.125rem 0.375rem;
+}
+
+.semantic-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.section-header {
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.section-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.375rem;
+}
+
+.section-header p {
+    max-width: 680px;
+    color: #64748b;
+    font-size: 0.875rem;
+    line-height: 1.5;
+}
+
+.semantic-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.semantic-group {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0.75rem;
+    min-width: 0;
+}
+
+.semantic-group h3 {
+    grid-column: 1 / -1;
+    margin-bottom: 0.5rem;
+    color: #64748b;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.semantic-role {
+    display: grid;
+    grid-template-columns: 28px minmax(0, 1fr);
+    gap: 0.75rem;
+    align-items: flex-start;
+    min-height: 0;
+    padding: 0.75rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    background: #fff;
+}
+
+.semantic-role--plain {
+    grid-template-columns: 1fr;
+}
+
+.semantic-role__content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.375rem;
+    align-items: start;
+    min-width: 0;
+}
+
+.semantic-role__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    min-width: 0;
+}
+
+.semantic-role__name {
+    color: #1e293b;
+    font-size: 0.875rem;
+    font-weight: 700;
+}
+
+.semantic-role__token {
+    display: block;
+    color: #64748b;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.75rem;
+    overflow-wrap: anywhere;
+}
+
+.semantic-role__meta {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.375rem;
+    color: #64748b;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    min-width: 0;
+}
+
+.semantic-role__meta span {
+    flex-shrink: 0;
+    color: #334155;
+    font-weight: 700;
+}
+
+.semantic-role__meta code {
+    color: #64748b;
+    font-family: "JetBrains Mono", monospace;
+    overflow-wrap: anywhere;
+}
+
+.semantic-role__meta--resolved code {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.semantic-role__parts {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    color: #64748b;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.75rem;
+    line-height: 1.35;
+}
+
+.semantic-role__parts-label {
+    color: #334155;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-weight: 700;
+}
+
+.semantic-role__parts span:not(.semantic-role__parts-label) {
+    display: grid;
+    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
+    gap: 0.375rem;
+    min-width: 0;
+}
+
+.semantic-role__parts span:not(.semantic-role__parts-label) code:not(:last-child)::after {
+    content: ":";
+}
+
+.semantic-role__parts code {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.semantic-role__ref {
+    color: #2c4df3;
+    text-decoration: none;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.semantic-role__ref:hover {
+    text-decoration: underline;
+}
+
+.semantic-role__warning {
+    display: inline-flex;
+    align-items: center;
+    min-height: 18px;
+    padding: 0.125rem 0.375rem;
+    border-radius: 999px;
+    background: #fff7ed;
+    color: #9a3412;
+    font-size: 0.6875rem;
+    font-weight: 700;
+}
+
+.semantic-role__swatch,
+.semantic-role__marker,
+.semantic-role__space,
+.semantic-role__radius,
+.semantic-role__text-preview {
+    width: 28px;
+    height: 28px;
+    margin-top: 0.125rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    background: #fff;
+    flex-shrink: 0;
+}
+
+.semantic-role__swatch--empty {
+    background:
+        linear-gradient(45deg, transparent 45%, #cbd5e1 45%, #cbd5e1 55%, transparent 55%),
+        #f8fafc;
+}
+
+.semantic-role__marker {
+    background: #f8fafc;
+}
+
+.semantic-role__space,
+.semantic-role__radius {
+    position: relative;
+    overflow: hidden;
+    background:
+        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
+        #fcfcfd;
+    background-size: 7px 7px;
+}
+
+.semantic-role__space span {
+    position: absolute;
+    top: 7px;
+    bottom: 7px;
+    left: 4px;
+    min-width: 1px;
+    max-width: 20px;
+    background: #334155;
+}
+
+.semantic-role__radius span {
+    position: absolute;
+    inset: 6px;
+    border: 2px solid #334155;
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.semantic-role__text-preview {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #334155;
+    font-size: 0.875rem;
+    overflow: hidden;
+}
+
+@media (max-width: 1480px) {
+    .token-list {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 1200px) {
+    .token-list {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .token-list.token-list--font {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .semantic-group {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+}
+
+@media (max-width: 1100px) {
+    .semantic-group {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 900px) {
+    .page-shell {
+        grid-template-columns: 1fr;
+    }
+
+    .sidebar {
+        position: static;
+        height: auto;
+        border-right: 0;
+        border-bottom: 1px solid #e2e8f0;
+    }
+
+    .token-list {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .token-list.token-list--font {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .content {
+        padding: 1rem;
+    }
+
+    .token-item {
+        padding: 0.625rem 0.75rem;
+    }
+
+    .token-name {
+        min-width: 0;
+    }
+}
+
+@media (max-width: 560px) {
+    .token-list {
+        grid-template-columns: 1fr;
+    }
+
+    .token-list.token-list--font {
+        grid-template-columns: 1fr;
+    }
+
+    .semantic-group {
+        grid-template-columns: 1fr;
+    }
+
+    .semantic-role {
+        align-items: flex-start;
+    }
+
+    .semantic-role__content {
+        grid-template-columns: 1fr;
+        gap: 0.25rem;
+    }
+
+}
+
+`;
+//#endregion
+//#region src/core/showcase/TokenHtmlShowcaseAggregators.ts
+/**
+* Groups typography tokens into models for the HTML showcase.
+*
+* @remarks
+* Combines separate CSS variables of one text style:
+* font size, font weight, line height, letter spacing and font family.
+*
+* The result is used by the renderer to show one typography card
+* instead of many separate CSS variables.
+*/
+var TypographyTokenAggregator = class {
+	aggregate(tokens) {
+		const groups = /* @__PURE__ */ new Map();
+		const result = [];
+		for (const token of tokens) {
+			const aggregateKey = this.getTypographyAggregateKey(token.name);
+			if (!aggregateKey) {
+				result.push({
+					name: token.name,
+					value: token.value
+				});
+				continue;
+			}
+			let group = groups.get(aggregateKey.key);
+			if (!group) {
+				group = {
+					name: aggregateKey.key,
+					typography: {}
+				};
+				groups.set(aggregateKey.key, group);
+			}
+			this.assignTypographyProperty(group.typography, aggregateKey.property, token.value);
+		}
+		for (const group of groups.values()) result.push({
+			name: `--${group.name}`,
+			value: this.formatTypographyValue(group.typography),
+			typography: group.typography
+		});
+		return result.sort((left, right) => left.name.localeCompare(right.name));
+	}
+	getTypographyAggregateKey(name) {
+		const normalized = name.replace(/^--/, "");
+		for (const pattern of [
+			/^(.*)-fontSize$/,
+			/^(.*)-fontWeight$/,
+			/^(.*)-letterSpacing$/,
+			/^(.*)-lineHeight$/,
+			/^(.*)-fontFamily-\d+$/
+		]) {
+			const match = normalized.match(pattern);
+			if (!match) continue;
+			const property = normalized.slice(match[1].length + 1);
+			return {
+				key: match[1],
+				property
+			};
+		}
+		return null;
+	}
+	assignTypographyProperty(info, property, value) {
+		if (property === "fontSize") {
+			info.size = value;
+			return;
+		}
+		if (property === "fontWeight") {
+			info.weight = value;
+			return;
+		}
+		if (property === "letterSpacing") {
+			info.letterSpacing = value;
+			return;
+		}
+		if (property === "lineHeight") {
+			info.lineHeight = value;
+			return;
+		}
+		if (property.startsWith("fontFamily-")) info.family = info.family ? `${info.family}, ${value}` : value;
+	}
+	formatTypographyValue(info) {
+		const parts = [];
+		if (info.weight) parts.push(info.weight);
+		if (info.size) parts.push(info.lineHeight ? `${info.size}/${info.lineHeight}` : info.size);
+		if (info.family) parts.push(info.family);
+		if (parts.length === 0) return "";
+		if (info.letterSpacing) return `${parts.join(" ")}; letter-spacing ${info.letterSpacing}`;
+		return parts.join(" ");
+	}
+};
+/**
+* Groups font tokens into collections for the HTML showcase.
+*
+* @remarks
+* Sorts font family, font weight, font size, line height
+* and letter spacing into separate sections with a fixed order.
+*/
+var FontCollectionAggregator = class {
+	aggregate(tokens) {
+		const titles = new Map([
+			["font-family", "font family"],
+			["font-weight", "font weight"],
+			["font-size", "font size"],
+			["line-height", "line height"],
+			["letter-spacing", "letter spacing"]
+		]);
+		const order = [
+			"font-family",
+			"font-weight",
+			"font-size",
+			"line-height",
+			"letter-spacing",
+			"other"
+		];
+		const grouped = /* @__PURE__ */ new Map();
+		const fallback = [];
+		for (const token of tokens) {
+			const key = this.getFontCollectionKey(token.name);
+			if (!key) {
+				fallback.push(token);
+				continue;
+			}
+			if (!grouped.has(key)) grouped.set(key, []);
+			grouped.get(key).push(token);
+		}
+		if (fallback.length > 0) grouped.set("other", fallback);
+		const result = [];
+		for (const key of order) {
+			const entries = grouped.get(key);
+			if (!entries || entries.length === 0) continue;
+			result.push({
+				key,
+				title: titles.get(key) ?? key,
+				entries: [...entries].sort((left, right) => left.name.localeCompare(right.name))
+			});
+		}
+		return result;
+	}
+	getFontCollectionKey(name) {
+		const normalized = name.replace(/^--/, "").toLowerCase();
+		for (const pattern of [
+			"font-family",
+			"font-weight",
+			"font-size",
+			"line-height",
+			"letter-spacing"
+		]) if (normalized.includes(pattern)) return pattern;
+		return null;
+	}
+};
+/**
+* Groups border tokens into models for the HTML showcase.
+*
+* @remarks
+* Combines full border tokens and their parts: color, width and style.
+* Separates border-width and stroke-style tokens, and returns
+* unsupported values as fallback.
+*/
+var BorderTokenAggregator = class {
+	aggregate(tokens) {
+		const aggregated = this.aggregateBorderTokens(tokens);
+		const strokeStyles = this.aggregateStrokeStyleTokens(aggregated.fallback);
+		const strokeStyleNames = new Set(strokeStyles.flatMap((item) => this.getStrokeStyleTokenNames(item)));
+		const borderWidths = aggregated.fallback.map((token) => this.toBorderWidthTokenInfo(token)).filter((token) => token !== null);
+		const borderWidthNames = new Set(borderWidths.map((token) => this.normalizeTokenName(token.name)));
+		const fallback = aggregated.fallback.filter((token) => !strokeStyleNames.has(token.name) && !borderWidthNames.has(this.normalizeTokenName(token.name)));
+		return {
+			borders: aggregated.items,
+			borderWidths,
+			strokeStyles,
+			fallback
+		};
+	}
+	aggregateBorderTokens(tokens) {
+		const map = /* @__PURE__ */ new Map();
+		const consumed = /* @__PURE__ */ new Set();
+		for (const token of tokens) {
+			const parsed = this.parseBorderTokenName(token.name);
+			if (!parsed) continue;
+			const item = map.get(parsed.baseName) ?? { name: parsed.baseName };
+			if (parsed.property === "value") item.value = token.value;
+			else item[parsed.property] = token.value;
+			map.set(parsed.baseName, item);
+			consumed.add(token.name);
+		}
+		const items = [...map.values()].filter((item) => item.value && (item.color || item.width || item.style)).sort((left, right) => left.name.localeCompare(right.name));
+		const usedNames = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			usedNames.add(`--${item.name}`);
+			usedNames.add(`--${item.name}-color`);
+			usedNames.add(`--${item.name}-width`);
+			usedNames.add(`--${item.name}-style`);
+		}
+		return {
+			items,
+			fallback: tokens.filter((token) => !consumed.has(token.name) || !usedNames.has(token.name))
+		};
+	}
+	parseBorderTokenName(name) {
+		const normalized = name.replace(/^--/, "");
+		const propertyMatch = normalized.match(/^(.*-border-.+)-(color|width|style)$/);
+		if (propertyMatch) return {
+			baseName: propertyMatch[1],
+			property: propertyMatch[2]
+		};
+		if (/.*-border-.+/.test(normalized) && !normalized.includes("-border-width-")) return {
+			baseName: normalized,
+			property: "value"
+		};
+		return null;
+	}
+	toBorderWidthTokenInfo(token) {
+		const normalized = token.name.replace(/^--/, "");
+		if (!/-border-width-/.test(normalized)) return null;
+		return {
+			name: normalized,
+			value: token.value
+		};
+	}
+	aggregateStrokeStyleTokens(tokens) {
+		const map = /* @__PURE__ */ new Map();
+		for (const token of tokens) {
+			const parsed = this.parseStrokeStyleTokenName(token.name);
+			if (!parsed) continue;
+			const item = map.get(parsed.baseName) ?? {
+				name: parsed.baseName,
+				dashArray: []
+			};
+			if (parsed.property === "value") item.value = token.value;
+			else if (parsed.property === "lineCap") item.lineCap = token.value;
+			else item.dashArray[parsed.index ?? item.dashArray.length] = token.value;
+			map.set(parsed.baseName, item);
+		}
+		return [...map.values()].sort((left, right) => left.name.localeCompare(right.name));
+	}
+	parseStrokeStyleTokenName(name) {
+		const normalized = name.replace(/^--/, "");
+		const dashArrayMatch = normalized.match(/^(.*-stroke-style-.+)-dashArray-(\d+)$/);
+		if (dashArrayMatch) return {
+			baseName: dashArrayMatch[1],
+			property: "dashArray",
+			index: Number(dashArrayMatch[2])
+		};
+		const lineCapMatch = normalized.match(/^(.*-stroke-style-.+)-lineCap$/);
+		if (lineCapMatch) return {
+			baseName: lineCapMatch[1],
+			property: "lineCap"
+		};
+		if (/.*-stroke-style-.+/.test(normalized)) return {
+			baseName: normalized,
+			property: "value"
+		};
+		return null;
+	}
+	getStrokeStyleTokenNames(item) {
+		const names = [`--${item.name}`];
+		if (item.lineCap !== void 0) names.push(`--${item.name}-lineCap`);
+		item.dashArray.forEach((_value, index) => {
+			names.push(`--${item.name}-dashArray-${index}`);
+		});
+		return names;
+	}
+	normalizeTokenName(name) {
+		return name.replace(/^--/, "");
+	}
+};
+/**
+* Groups shadow tokens into models for the HTML showcase.
+*
+* @remarks
+* Combines single-layer and multi-layer shadows from separate CSS variables:
+* offsetX, offsetY, blur, spread and color.
+*
+* Returns unsupported or incomplete values as fallback.
+*/
+var ShadowTokenAggregator = class {
+	aggregate(tokens) {
+		const map = /* @__PURE__ */ new Map();
+		const consumed = /* @__PURE__ */ new Set();
+		for (const token of tokens) {
+			const parsed = this.parseShadowTokenName(token.name);
+			if (!parsed) continue;
+			const item = map.get(parsed.baseName) ?? {
+				name: parsed.baseName,
+				layers: []
+			};
+			if (parsed.property === "value") item.value = token.value;
+			else {
+				const layer = item.layers[parsed.layerIndex] ?? {};
+				layer[parsed.property] = token.value;
+				item.layers[parsed.layerIndex] = layer;
+			}
+			map.set(parsed.baseName, item);
+			consumed.add(token.name);
+		}
+		const items = [...map.values()].map((item) => ({
+			...item,
+			layers: item.layers.filter((layer) => layer !== void 0)
+		})).filter((item) => item.value && item.layers.length > 0).sort((left, right) => left.name.localeCompare(right.name));
+		const usedNames = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			usedNames.add(`--${item.name}`);
+			item.layers.forEach((_layer, index) => {
+				const layerPrefix = item.layers.length > 1 ? `${item.name}-${index}` : item.name;
+				usedNames.add(`--${layerPrefix}-offsetX`);
+				usedNames.add(`--${layerPrefix}-offsetY`);
+				usedNames.add(`--${layerPrefix}-blur`);
+				usedNames.add(`--${layerPrefix}-spread`);
+				usedNames.add(`--${layerPrefix}-color`);
+			});
+		}
+		return {
+			items,
+			fallback: tokens.filter((token) => !consumed.has(token.name) || !usedNames.has(token.name))
+		};
+	}
+	parseShadowTokenName(name) {
+		const normalized = name.replace(/^--/, "");
+		const layerMatch = normalized.match(/^(.*-shadow-.+)-(\d+)-(offsetX|offsetY|blur|spread|color)$/);
+		if (layerMatch) return {
+			baseName: layerMatch[1],
+			property: layerMatch[3],
+			layerIndex: Number(layerMatch[2])
+		};
+		const propertyMatch = normalized.match(/^(.*-shadow-.+)-(offsetX|offsetY|blur|spread|color)$/);
+		if (propertyMatch) return {
+			baseName: propertyMatch[1],
+			property: propertyMatch[2],
+			layerIndex: 0
+		};
+		if (/.*-shadow-.+/.test(normalized)) return {
+			baseName: normalized,
+			property: "value",
+			layerIndex: 0
+		};
+		return null;
+	}
+};
+/**
+* Groups gradient tokens into models for the HTML showcase.
+*
+* @remarks
+* Combines gradient stop parts: color and position.
+* The result is used by the renderer to build preview via CSS gradient.
+*
+* Returns unsupported or incomplete values as fallback.
+*/
+var GradientTokenAggregator = class {
+	aggregate(tokens) {
+		const map = /* @__PURE__ */ new Map();
+		const consumed = /* @__PURE__ */ new Set();
+		for (const token of tokens) {
+			const parsed = this.parseGradientTokenName(token.name);
+			if (!parsed) continue;
+			const item = map.get(parsed.baseName) ?? {
+				name: parsed.baseName,
+				stops: []
+			};
+			if (parsed.property === "value") item.value = token.value;
+			else {
+				const stop = item.stops[parsed.stopIndex] ?? {};
+				stop[parsed.property] = token.value;
+				item.stops[parsed.stopIndex] = stop;
+			}
+			map.set(parsed.baseName, item);
+			consumed.add(token.name);
+		}
+		const items = [...map.values()].map((item) => ({
+			...item,
+			stops: item.stops.filter((stop) => stop?.color)
+		})).filter((item) => item.stops.length > 0).sort((left, right) => left.name.localeCompare(right.name));
+		const usedNames = /* @__PURE__ */ new Set();
+		for (const item of items) item.stops.forEach((_stop, index) => {
+			usedNames.add(`--${item.name}-${index}-color`);
+			usedNames.add(`--${item.name}-${index}-position`);
+		});
+		return {
+			items,
+			fallback: tokens.filter((token) => !consumed.has(token.name) || !usedNames.has(token.name))
+		};
+	}
+	parseGradientTokenName(name) {
+		const normalized = name.replace(/^--/, "");
+		const stopMatch = normalized.match(/^(.*-gradient-.+)-(\d+)-(color|position)$/);
+		if (stopMatch) return {
+			baseName: stopMatch[1],
+			property: stopMatch[3],
+			stopIndex: Number(stopMatch[2])
+		};
+		if (/.*-gradient-.+/.test(normalized)) return {
+			baseName: normalized,
+			property: "value",
+			stopIndex: 0
+		};
+		return null;
+	}
+};
+/**
+* Groups transition tokens into models for the HTML showcase.
+*
+* @remarks
+* Combines duration, delay and timingFunction parts of one transition.
+* The result is used by the renderer to show motion cards.
+*
+* Returns unsupported values as fallback.
+*/
+var TransitionTokenAggregator = class {
+	aggregate(tokens) {
+		const map = /* @__PURE__ */ new Map();
+		const consumed = /* @__PURE__ */ new Set();
+		for (const token of tokens) {
+			const parsed = this.parseTransitionTokenName(token.name);
+			if (!parsed) continue;
+			const item = map.get(parsed.baseName) ?? {
+				name: parsed.baseName,
+				timingFunction: []
+			};
+			if (parsed.property === "value") item.value = token.value;
+			else if (parsed.property === "timingFunction") item.timingFunction[parsed.index ?? item.timingFunction.length] = token.value;
+			else item[parsed.property] = token.value;
+			map.set(parsed.baseName, item);
+			consumed.add(token.name);
+		}
+		const items = [...map.values()].filter((item) => item.value || item.duration || item.timingFunction.length > 0 || item.delay).sort((left, right) => left.name.localeCompare(right.name));
+		const usedNames = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			usedNames.add(`--${item.name}`);
+			usedNames.add(`--${item.name}-duration`);
+			usedNames.add(`--${item.name}-delay`);
+			item.timingFunction.forEach((_value, index) => {
+				usedNames.add(`--${item.name}-timingFunction-${index}`);
+			});
+		}
+		return {
+			items,
+			fallback: tokens.filter((token) => !consumed.has(token.name) || !usedNames.has(token.name))
+		};
+	}
+	parseTransitionTokenName(name) {
+		const normalized = name.replace(/^--/, "");
+		const timingMatch = normalized.match(/^(.*-transition-.+)-timingFunction-(\d+)$/);
+		if (timingMatch) return {
+			baseName: timingMatch[1],
+			property: "timingFunction",
+			index: Number(timingMatch[2])
+		};
+		const propertyMatch = normalized.match(/^(.*-transition-.+)-(duration|delay)$/);
+		if (propertyMatch) return {
+			baseName: propertyMatch[1],
+			property: propertyMatch[2]
+		};
+		if (/.*-transition-.+/.test(normalized)) return {
+			baseName: normalized,
+			property: "value"
+		};
+		return null;
+	}
+};
+//#endregion
+//#region src/core/showcase/TokenGroupClassifier.ts
+/**
+* Groups tokens for display in the HTML showcase.
+*
+* @remarks
+* Sorts tokens by scope: `primitive`, `semantic`, `component`,
+* separates primitive themes and sorts groups in a stable order.
+*
+* For visual sections uses simple heuristics by name and value
+* of CSS variable: colors, typography, spacing, shadows, motion and others.
+*/
+var TokenGroupClassifier = class TokenGroupClassifier {
+	static #COLOR_HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
+	groupEntriesByScope(entries) {
+		const scopes = /* @__PURE__ */ new Map();
+		for (const entry of entries) {
+			if (!scopes.has(entry.scope)) scopes.set(entry.scope, []);
+			scopes.get(entry.scope).push({
+				name: entry.name,
+				value: entry.value
+			});
+		}
+		return scopes;
+	}
+	getPrimitiveThemes(themes) {
+		return themes.map((theme) => ({
+			name: theme.name,
+			entries: theme.entries.filter((entry) => entry.scope === "primitive")
+		})).filter((theme) => theme.entries.length > 0);
+	}
+	getOrderedScopes(scopes) {
+		const priority = new Map([
+			["primitive", 0],
+			["semantic", 1],
+			["component", 2]
+		]);
+		return [...scopes.entries()].sort(([left], [right]) => {
+			const leftPriority = priority.get(left) ?? 99;
+			const rightPriority = priority.get(right) ?? 99;
+			if (leftPriority !== rightPriority) return leftPriority - rightPriority;
+			return left.localeCompare(right);
+		});
+	}
+	groupTokens(tokens) {
+		const grouped = /* @__PURE__ */ new Map();
+		const order = [
+			"colors",
+			"fonts",
+			"typography",
+			"borders",
+			"radius",
+			"spacing",
+			"shadows",
+			"gradients",
+			"motion",
+			"opacity",
+			"sizes",
+			"other"
+		];
+		for (const group of order) grouped.set(group, []);
+		for (const token of tokens) {
+			const group = this.classifyTokenGroup(token.name, token.value);
+			grouped.get(group).push(token);
+		}
+		const result = /* @__PURE__ */ new Map();
+		for (const group of order) {
+			const groupTokens = grouped.get(group);
+			if (groupTokens.length > 0) result.set(group, groupTokens);
+		}
+		return result;
+	}
+	classifyTokenGroup(name, value) {
+		const lowerName = name.toLowerCase();
+		const lowerValue = value.toLowerCase();
+		if (lowerName.includes("typography") || lowerValue.includes("typography") || lowerName.includes("-text-") || lowerName.includes("-body-") || lowerName.includes("-title-") || lowerName.includes("-code-")) return "typography";
+		if (lowerName.includes("font-family") || lowerName.includes("font-size") || lowerName.includes("font-weight") || lowerName.includes("line-height") || lowerName.includes("lineheight") || lowerName.includes("letter-spacing") || lowerName.includes("tracking")) return "fonts";
+		if (lowerName.includes("border") || lowerName.includes("stroke") || lowerName.includes("outline")) return "borders";
+		if (lowerName.includes("shadow") || lowerName.includes("elevation")) return "shadows";
+		if (lowerName.includes("gradient")) return "gradients";
+		if (lowerName.includes("color") || TokenGroupClassifier.#COLOR_HEX_RE.test(value) || lowerValue.startsWith("rgb") || lowerValue.startsWith("hsl")) return "colors";
+		if (lowerName.includes("radius") || lowerName.includes("rounded")) return "radius";
+		if (lowerName.includes("space") || lowerName.includes("spacing") || lowerName.includes("gap") || lowerName.includes("padding") || lowerName.includes("margin") || lowerName.includes("inset")) return "spacing";
+		if (lowerName.includes("duration") || lowerName.includes("easing") || lowerName.includes("cubic-bezier") || lowerName.includes("transition") || lowerName.includes("animation") || lowerValue.includes("cubic-bezier") || lowerValue.includes("ms") || lowerValue.endsWith("s")) return "motion";
+		if (lowerName.includes("opacity") || lowerName.includes("alpha")) return "opacity";
+		if (lowerName.includes("size") || lowerName.includes("width") || lowerName.includes("height")) return "sizes";
+		return "other";
+	}
+};
+//#endregion
+//#region src/core/showcase/TokenHtmlShowcaseRenderer.ts
+/**
+* Renders an HTML page for the token showcase.
+*
+* @remarks
+* Gets prepared token data and builds a complete HTML page:
+* layout, sidebar, sections, cards, preview elements and navigation script.
+*/
+var TokenHtmlShowcaseRenderer = class TokenHtmlShowcaseRenderer {
+	static #COLOR_HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
+	static #FONT_PREVIEW_TEXT = "On sector 42-B, a lone Jedi followed 3 fading signals through the desert night.";
+	static #SEMANTIC_GROUP_ORDER = [
+		"color.text",
+		"color.background",
+		"color.border",
+		"color.action",
+		"color.status",
+		"space.inset",
+		"space.inline",
+		"space.stack",
+		"shape.radius",
+		"shape.border",
+		"text",
+		"motion",
+		"other"
+	];
+	static #SEMANTIC_GROUP_TITLES = new Map([
+		["color.text", "Text colors"],
+		["color.background", "Background colors"],
+		["color.border", "Border colors"],
+		["color.action", "Action colors"],
+		["color.status", "Status colors"],
+		["space.inset", "Inset spacing"],
+		["space.inline", "Inline spacing"],
+		["space.stack", "Stack spacing"],
+		["shape.radius", "Radius roles"],
+		["shape.border", "Border roles"],
+		["text", "Text styles"],
+		["motion", "Motion roles"],
+		["other", "Other semantic roles"]
+	]);
+	#classifier;
+	#typographyAggregator = new TypographyTokenAggregator();
+	#fontAggregator = new FontCollectionAggregator();
+	#borderAggregator = new BorderTokenAggregator();
+	#shadowAggregator = new ShadowTokenAggregator();
+	#gradientAggregator = new GradientTokenAggregator();
+	#transitionAggregator = new TransitionTokenAggregator();
+	constructor(classifier = new TokenGroupClassifier()) {
+		this.#classifier = classifier;
+	}
+	renderPage(parsed) {
+		const scopes = this.#classifier.groupEntriesByScope(parsed.entries);
+		const visibleScopes = this.getVisibleScopes(scopes);
+		const visibleThemes = this.getVisibleThemes(parsed.themes);
+		if (visibleScopes.size === 0) return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design Tokens - showcase</title>
+<style>
+${TOKEN_HTML_SHOWCASE_CSS}
+body{padding:2rem}
+</style>
+</head>
+<body>
+        <h1>Design Tokens - showcase</h1>
+<p style="color:#64748b">No tokens found in the CSS output.</p>
+</body>
+</html>`;
+		return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design Tokens - showcase</title>
+<style>
+${TOKEN_HTML_SHOWCASE_CSS}
+</style>
+</head>
+<body>
+            <header class="page-header"><h1 class="page-title">Design Tokens - showcase</h1></header>
+<div class="page-shell">
+<aside class="sidebar">
+<div class="sidebar-title">Token Groups</div>
+<nav class="sidebar-nav">
+${this.renderMenu(visibleScopes, visibleThemes)}
+</nav>
+</aside>
+<main class="content">
+${this.renderThemeSummary(visibleThemes)}
+${this.renderTokens(visibleScopes, visibleThemes, parsed.entries)}
+</main>
+</div>
+<button class="back-to-top" type="button" aria-label="Back to top" title="Back to top">
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"></path></svg>
+</button>
+<script>
+(() => {
+  const OFFSET = 112;
+  function scrollToAnchor(id, smooth) {
+    if (!id) return;
+    const el = document.getElementById(id);
+    if (!el) return;
+    openMenuForAnchor(id);
+    const top = el.getBoundingClientRect().top + window.pageYOffset - OFFSET;
+    window.scrollTo({ top, behavior: smooth ? "smooth" : "auto" });
+  }
+  function setMenuPanel(key, expanded) {
+    if (!key) return;
+    const toggle = document.querySelector('[data-menu-toggle="' + key + '"]');
+    if (expanded && toggle && toggle.dataset.menuLevel === "root") {
+      document.querySelectorAll('[data-menu-toggle][data-menu-level="root"]').forEach((button) => {
+        if (button.dataset.menuToggle === key) return;
+        button.setAttribute("aria-expanded", "false");
+        document.querySelectorAll('[data-menu-panel="' + button.dataset.menuToggle + '"]').forEach((panel) => {
+          panel.hidden = true;
+        });
+      });
+    }
+    document.querySelectorAll("[data-menu-panel]").forEach((panel) => {
+      if (panel.dataset.menuPanel === key) {
+        panel.hidden = !expanded;
+      }
+    });
+    document.querySelectorAll("[data-menu-toggle]").forEach((button) => {
+      if (button.dataset.menuToggle === key) {
+        button.setAttribute("aria-expanded", expanded ? "true" : "false");
+      }
+    });
+  }
+  function openMenuForAnchor(id) {
+    let matched = false;
+    document.querySelectorAll('a.sidebar-sub-link[href^="#"]').forEach((link) => {
+      if (link.getAttribute("href") !== "#" + id) return;
+      matched = true;
+      let panel = link.closest("[data-menu-panel]");
+      while (panel) {
+        setMenuPanel(panel.dataset.menuPanel, true);
+        panel = panel.parentElement ? panel.parentElement.closest("[data-menu-panel]") : null;
+      }
+    });
+    if (!matched && id.startsWith("scope-")) {
+      const scope = id.slice("scope-".length);
+      const panel = document.querySelector('[data-menu-scope="' + scope + '"]');
+      if (panel) {
+        setMenuPanel(panel.dataset.menuPanel, true);
+      }
+    }
+  }
+  function openInitialMenu() {
+    const initial = document.querySelector("[data-menu-default]");
+    if (initial) {
+      setMenuPanel(initial.dataset.menuToggle, true);
+    }
+  }
+  document.querySelectorAll("[data-menu-toggle]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const key = button.dataset.menuToggle;
+      const expanded = button.getAttribute("aria-expanded") === "true";
+      setMenuPanel(key, !expanded);
+    });
+  });
+  document.querySelectorAll("a.sidebar-sub-link").forEach((link) => {
+    link.addEventListener("click", (event) => {
+      const href = link.getAttribute("href");
+      if (!href || !href.startsWith("#")) return;
+      event.preventDefault();
+      const id = href.slice(1);
+      history.replaceState(null, "", href);
+      scrollToAnchor(id, true);
+    });
+  });
+  document.querySelector(".back-to-top")?.addEventListener("click", () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
+  window.addEventListener("hashchange", () => {
+    scrollToAnchor(window.location.hash.slice(1), false);
+  });
+  if (window.location.hash) {
+    setTimeout(() => scrollToAnchor(window.location.hash.slice(1), false), 0);
+  } else {
+    openInitialMenu();
+  }
+})();
+<\/script>
+</body>
+</html>`;
+	}
+	getVisibleScopes(scopes) {
+		return new Map([...scopes.entries()].filter(([scope]) => scope !== "component"));
+	}
+	getVisibleThemes(themes) {
+		return themes.map((theme) => ({
+			name: theme.name,
+			entries: theme.entries.filter((entry) => entry.scope !== "component")
+		})).filter((theme) => theme.entries.length > 0);
+	}
+	renderMenu(scopes, themes) {
+		if (themes.length > 0) return this.renderThemedMenu(themes);
+		return this.renderScopeMenu(scopes);
+	}
+	renderThemedMenu(themes) {
+		let html = "";
+		for (const [index, theme] of themes.entries()) {
+			const themeKey = this.sectionId("menu-theme", theme.name);
+			html += `<section class="sidebar-group sidebar-group--theme">\n`;
+			html += this.renderSidebarToggle(theme.name, themeKey, "sidebar-toggle--theme", "root", index === 0);
+			html += `<div class="sidebar-group-body sidebar-group-body--theme" data-menu-panel="${this.esc(themeKey)}" hidden>\n`;
+			const themeScopes = this.getVisibleScopes(this.#classifier.groupEntriesByScope(theme.entries));
+			for (const [scope, tokens] of this.#classifier.getOrderedScopes(themeScopes)) {
+				const scopeKey = this.sectionId("menu-theme-scope", `${theme.name}-${scope}`);
+				html += `<section class="sidebar-group sidebar-group--nested">\n`;
+				html += this.renderSidebarToggle(scope, scopeKey, "sidebar-toggle--scope", "nested", false);
+				html += `<div class="sidebar-group-body sidebar-group-body--scope" data-menu-panel="${this.esc(scopeKey)}" data-menu-scope="${this.esc(scope)}" hidden>\n`;
+				if (scope === "semantic") html += this.renderSemanticMenuLinks(tokens, `semantic-${theme.name}`);
+				else html += this.renderMenuGroupLinks(`${scope}-${theme.name}`, tokens);
+				html += `</div>\n`;
+				html += `</section>\n`;
+			}
+			html += `</div>\n`;
+			html += `</section>\n`;
+		}
+		return html;
+	}
+	renderScopeMenu(scopes) {
+		let html = "";
+		for (const [index, [scope, tokens]] of this.#classifier.getOrderedScopes(scopes).entries()) {
+			const scopeKey = this.sectionId("menu-scope", scope);
+			html += `<section class="sidebar-group">\n`;
+			html += this.renderSidebarToggle(scope, scopeKey, "sidebar-toggle--scope", "root", index === 0);
+			html += `<div class="sidebar-group-body sidebar-group-body--scope" data-menu-panel="${this.esc(scopeKey)}" data-menu-scope="${this.esc(scope)}" hidden>\n`;
+			if (scope === "semantic") html += this.renderSemanticMenuLinks(tokens);
+			else html += this.renderMenuGroupLinks(scope, tokens);
+			html += `</div>\n`;
+			html += `</section>\n`;
+		}
+		return html;
+	}
+	renderSemanticMenuLinks(tokens, idPrefix = "semantic") {
+		return this.groupSemanticTokens(tokens).map((group) => {
+			const subId = this.sectionId(`${idPrefix}-group-title`, group.key);
+			return `<a class="sidebar-sub-link" href="#${this.esc(subId)}">${this.esc(group.title)}</a>`;
+		}).join("\n");
+	}
+	renderSidebarToggle(label, key, modifier, level, isDefault) {
+		const defaultAttr = isDefault ? ` data-menu-default="true"` : "";
+		return `<button class="sidebar-link sidebar-toggle ${this.esc(modifier)}" type="button" data-menu-toggle="${this.esc(key)}" data-menu-level="${this.esc(level)}" aria-expanded="false"${defaultAttr}><span class="sidebar-chevron" aria-hidden="true"></span>${this.renderFolderIcon()}<span class="sidebar-label">${this.esc(label)}</span></button>\n`;
+	}
+	renderFolderIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-folder" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>`;
+	}
+	renderThemeSummary(themes) {
+		if (themes.length === 0) return "";
+		const baseTokens = new Map(themes[0]?.entries.map((entry) => [entry.name, entry.value]) ?? []);
+		return `<section class="theme-summary"><div class="theme-summary-title">Theme statistics</div><div class="theme-summary-grid">${themes.map((theme, index) => {
+			const overrides = index === 0 ? 0 : theme.entries.filter((entry) => baseTokens.has(entry.name) && baseTokens.get(entry.name) !== entry.value).length;
+			return `<article class="theme-summary-card"><div class="theme-summary-header"><span class="theme-summary-label">Theme name:</span><span class="theme-summary-name">${this.esc(theme.name)}</span></div><dl class="theme-summary-stats"><div><dt>Tokens</dt><dd>${theme.entries.length}</dd></div><div><dt>Overrides</dt><dd>${overrides}</dd></div></dl></article>`;
+		}).join("\n")}</div></section>\n`;
+	}
+	renderTokens(scopes, themes, entries) {
+		if (themes.length > 0) return this.renderThemedTokens(themes, entries);
+		let html = "";
+		for (const [scope, tokens] of this.#classifier.getOrderedScopes(scopes)) {
+			html += `<section class="token-section" id="${this.esc(this.sectionId("scope", scope))}">\n`;
+			if (scope === "semantic") html += this.renderSemanticTokens(tokens, entries);
+			else {
+				html += `<h2 class="token-category">${this.esc(scope)}</h2>\n`;
+				html += this.renderGroupedTokens(tokens, scope);
+			}
+			html += `</section>\n`;
+		}
+		return html;
+	}
+	renderThemedTokens(themes, entries) {
+		let html = "";
+		for (const theme of themes) {
+			html += `<section class="theme-section" id="${this.esc(this.sectionId("primitive-theme", theme.name))}">\n`;
+			html += `<h3 class="theme-title">Theme: ${this.esc(theme.name)}</h3>\n`;
+			const themeScopes = this.getVisibleScopes(this.#classifier.groupEntriesByScope(theme.entries));
+			for (const [scope, tokens] of this.#classifier.getOrderedScopes(themeScopes)) {
+				html += `<section class="token-section token-section--theme-scope" id="${this.esc(this.sectionId("scope", `${theme.name}-${scope}`))}">\n`;
+				html += `<h2 class="token-category">${this.esc(scope)}</h2>\n`;
+				if (scope === "semantic") html += this.renderSemanticTokens(tokens, entries, `semantic-${theme.name}`);
+				else html += this.renderGroupedTokens(tokens, `${scope}-${theme.name}`);
+				html += `</section>\n`;
+			}
+			html += `</section>\n`;
+		}
+		return html;
+	}
+	renderSemanticTokens(tokens, entries, idPrefix = "semantic") {
+		const tokenMap = this.createTokenMap(entries);
+		const groups = this.groupSemanticTokens(tokens);
+		if (groups.length === 0) return "";
+		let html = `<section class="semantic-section">\n`;
+		html += `<header class="section-header">\n`;
+		html += `<h2>Semantic roles</h2>\n`;
+		html += `<p>Semantic tokens describe how primitive values are used in the design system.</p>\n`;
+		html += `</header>\n`;
+		html += `<div class="semantic-groups">\n`;
+		for (const group of groups) {
+			html += `<section class="semantic-group">\n`;
+			html += `<h3 id="${this.esc(this.sectionId(`${idPrefix}-group-title`, group.key))}">${this.esc(group.title)}</h3>\n`;
+			html += group.tokens.map((token) => this.renderSemanticRole(group.key, token, tokenMap)).join("");
+			html += `</section>\n`;
+		}
+		html += `</div>\n`;
+		html += `</section>\n`;
+		return html;
+	}
+	groupSemanticTokens(tokens) {
+		const grouped = /* @__PURE__ */ new Map();
+		for (const token of this.dedupeTokens(tokens)) {
+			const parts = this.cssVariableToTokenPath(token.name).split(".");
+			if (parts[0] !== "semantic") continue;
+			const key = this.getSemanticGroupKey(parts);
+			if (!grouped.has(key)) grouped.set(key, []);
+			grouped.get(key).push(token);
+		}
+		const result = [];
+		for (const key of TokenHtmlShowcaseRenderer.#SEMANTIC_GROUP_ORDER) {
+			const groupTokens = grouped.get(key);
+			if (!groupTokens || groupTokens.length === 0) continue;
+			result.push({
+				key,
+				title: TokenHtmlShowcaseRenderer.#SEMANTIC_GROUP_TITLES.get(key) ?? key,
+				tokens: [...groupTokens].sort((left, right) => left.name.localeCompare(right.name))
+			});
+		}
+		return result;
+	}
+	renderSemanticRole(groupKey, token, tokenMap) {
+		const path = this.cssVariableToTokenPath(token.name);
+		const roleName = this.getSemanticRoleName(path);
+		const resolved = this.resolveTokenValue(token.value, tokenMap);
+		const directRefs = this.extractVarReferences(token.value);
+		const warningMessages = this.getSemanticWarnings(directRefs, resolved.unresolvedRefs);
+		const roleType = this.getSemanticRoleType(groupKey);
+		const preview = this.renderSemanticPreview(roleType, resolved.value);
+		const aliasLine = directRefs.length > 0 ? `<div class="semantic-role__meta semantic-role__meta--alias"><span>value:</span> <code>${this.renderLinkedTokenValue(token.value)}</code></div>\n` : "";
+		const references = this.renderSemanticReferences(token.value, tokenMap);
+		const warnings = warningMessages.map((message) => `<span class="semantic-role__warning">${this.esc(message)}</span>`).join("");
+		const plainClass = preview ? "" : " semantic-role--plain";
+		return `<article class="semantic-role semantic-role--${this.esc(roleType)}${plainClass}" data-token-name="${this.esc(token.name)}">\n${preview}\n<div class="semantic-role__content">\n<div class="semantic-role__header"><div class="semantic-role__name">${this.esc(roleName)}</div>${warnings}</div>\n${aliasLine}${references}<div class="semantic-role__meta semantic-role__meta--resolved"><span>resolved:</span> <code>${this.esc(resolved.value || "unresolved")}</code></div>\n<div class="semantic-role__meta semantic-role__meta--role"><span>css:</span> <code class="semantic-role__token">${this.esc(token.name)}</code></div>\n</div>\n</article>\n`;
+	}
+	renderSemanticPreview(roleType, resolvedValue) {
+		if (roleType === "color") {
+			if (this.isRenderableColor(resolvedValue)) return `<span class="semantic-role__swatch" style="background:${this.esc(resolvedValue)}"></span>`;
+			return `<span class="semantic-role__swatch semantic-role__swatch--empty"></span>`;
+		}
+		return "";
+	}
+	renderSemanticReferences(value, tokenMap) {
+		const refs = this.extractVarReferences(value);
+		if (refs.length > 1) return this.renderSemanticParts(refs);
+		if (refs.length === 1) {
+			const nestedRefs = this.extractVarReferences(tokenMap.get(refs[0]) ?? "");
+			if (nestedRefs.length > 1) return this.renderSemanticParts(nestedRefs);
+		}
+		return "";
+	}
+	renderSemanticParts(refs) {
+		return `<div class="semantic-role__parts"><span class="semantic-role__parts-label">parts:</span>${[...new Set(refs)].map((ref) => {
+			const tokenPath = this.cssVariableToTokenPath(ref);
+			return `<span><code>${this.esc(this.getCompositePartName(ref))}</code><a class="semantic-role__ref" href="#${this.esc(this.tokenId(ref))}" title="${this.esc(tokenPath)}">${this.esc(tokenPath)}</a></span>`;
+		}).join("")}</div>\n`;
+	}
+	renderLinkedTokenValue(value) {
+		const pattern = /var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,[^)]+)?\)/g;
+		let html = "";
+		let lastIndex = 0;
+		for (const match of value.matchAll(pattern)) {
+			const index = match.index ?? 0;
+			html += this.esc(value.slice(lastIndex, index));
+			const ref = match[1];
+			const raw = match[0];
+			if (!ref.startsWith("--primitive-")) html += this.esc(raw);
+			else html += `<a class="semantic-role__ref" href="#${this.esc(this.tokenId(ref))}" title="${this.esc(ref)}">${this.esc(raw)}</a>`;
+			lastIndex = index + raw.length;
+		}
+		html += this.esc(value.slice(lastIndex));
+		return html;
+	}
+	getCompositePartName(ref) {
+		const match = ref.replace(/^--/, "").match(/-(width|style|color|duration|delay|timingFunction-\d+|offsetX|offsetY|blur|spread|fontSize|fontWeight|lineHeight|letterSpacing|fontFamily-\d+)$/);
+		if (!match) return "value";
+		return match[1];
+	}
+	getSemanticWarnings(directRefs, unresolvedRefs) {
+		const warnings = [];
+		if (directRefs.some((ref) => this.cssVariableToTokenPath(ref).startsWith("component."))) warnings.push("warning: references component token");
+		if (unresolvedRefs.length > 0) warnings.push("warning: unresolved reference");
+		return warnings;
+	}
+	resolveTokenValue(value, tokenMap, stack = []) {
+		const unresolvedRefs = [];
+		return {
+			value: value.replace(/var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,[^)]+)?\)/g, (_match, ref) => {
+				const aggregate = this.resolveAggregateTokenValue(ref, tokenMap);
+				if (aggregate) return aggregate;
+				if (stack.includes(ref) || !tokenMap.has(ref)) {
+					unresolvedRefs.push(ref);
+					return `var(${ref})`;
+				}
+				const nested = this.resolveTokenValue(tokenMap.get(ref), tokenMap, [...stack, ref]);
+				unresolvedRefs.push(...nested.unresolvedRefs);
+				return nested.value;
+			}).replace(/\s+/g, " ").trim(),
+			unresolvedRefs
+		};
+	}
+	resolveAggregateTokenValue(ref, tokenMap) {
+		if (tokenMap.has(ref)) return null;
+		const typography = this.resolveAggregateTypographyTokenValue(ref, tokenMap);
+		if (typography) return typography;
+		const gradient = this.resolveAggregateGradientTokenValue(ref, tokenMap);
+		if (gradient) return gradient;
+		return null;
+	}
+	resolveAggregateGradientTokenValue(ref, tokenMap) {
+		const prefix = `${ref}-`;
+		const stops = this.collectGradientStops(prefix, tokenMap);
+		if (stops.length === 0 || !ref.includes("-gradient-")) return null;
+		return `linear-gradient(90deg, ${stops.map((stop) => `${stop.color} ${this.formatGradientPosition(stop.position)}`.trim()).join(", ")})`;
+	}
+	collectGradientStops(prefix, tokenMap) {
+		const stops = /* @__PURE__ */ new Map();
+		const pattern = new RegExp(`^${this.escapeRegExp(prefix)}(\\d+)-(color|position)$`);
+		for (const [name, value] of tokenMap) {
+			const match = name.match(pattern);
+			if (!match) continue;
+			const index = Number(match[1]);
+			const stop = stops.get(index) ?? {};
+			if (match[2] === "color") stop.color = value;
+			else stop.position = value;
+			stops.set(index, stop);
+		}
+		return [...stops.entries()].sort(([left], [right]) => left - right).map(([, stop]) => stop).filter((stop) => Boolean(stop.color));
+	}
+	resolveAggregateTypographyTokenValue(ref, tokenMap) {
+		const prefix = `${ref}-`;
+		if ([...tokenMap.keys()].filter((name) => name.startsWith(prefix)).length === 0 || !ref.includes("-typography-")) return null;
+		const family = this.collectIndexedValues(prefix, "fontFamily", tokenMap).join(", ");
+		const size = tokenMap.get(`${prefix}fontSize`);
+		const weight = this.normalizeFontWeight(tokenMap.get(`${prefix}fontWeight`));
+		const lineHeight = tokenMap.get(`${prefix}lineHeight`);
+		const letterSpacing = tokenMap.get(`${prefix}letterSpacing`);
+		const parts = [];
+		if (weight) parts.push(weight);
+		if (size) parts.push(lineHeight ? `${size}/${lineHeight}` : size);
+		if (family) parts.push(family);
+		if (parts.length === 0) return null;
+		if (letterSpacing) return `${parts.join(" ")}; letter-spacing ${letterSpacing}`;
+		return parts.join(" ");
+	}
+	collectIndexedValues(prefix, property, tokenMap) {
+		const values = [];
+		const pattern = new RegExp(`^${this.escapeRegExp(prefix + property)}-(\\d+)$`);
+		for (const [name, value] of tokenMap) {
+			const match = name.match(pattern);
+			if (!match) continue;
+			values.push({
+				index: Number(match[1]),
+				value
+			});
+		}
+		return values.sort((left, right) => left.index - right.index).map((item) => item.value);
+	}
+	normalizeFontWeight(value) {
+		if (value === "regular") return "400";
+		return value;
+	}
+	escapeRegExp(value) {
+		return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	}
+	extractVarReferences(value) {
+		return [...value.matchAll(/var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,[^)]+)?\)/g)].map((match) => match[1]);
+	}
+	createTokenMap(entries) {
+		const map = /* @__PURE__ */ new Map();
+		for (const entry of entries) if (!map.has(entry.name)) map.set(entry.name, entry.value);
+		return map;
+	}
+	dedupeTokens(tokens) {
+		const seen = /* @__PURE__ */ new Set();
+		const result = [];
+		for (const token of tokens) {
+			if (seen.has(token.name)) continue;
+			seen.add(token.name);
+			result.push(token);
+		}
+		return result;
+	}
+	cssVariableToTokenPath(name) {
+		return name.replace(/^--/, "").replace(/-/g, ".");
+	}
+	getSemanticGroupKey(parts) {
+		const prefix = parts.slice(1, 3).join(".");
+		if (TokenHtmlShowcaseRenderer.#SEMANTIC_GROUP_TITLES.has(prefix)) return prefix;
+		if (parts[1] === "text") return "text";
+		if (parts[1] === "motion") return "motion";
+		return "other";
+	}
+	getSemanticRoleName(path) {
+		const parts = path.split(".");
+		if (parts[0] !== "semantic") return path;
+		if (parts[1] === "color" || parts[1] === "space" || parts[1] === "shape") return parts.slice(2).join(".");
+		return parts.slice(1).join(".");
+	}
+	getSemanticRoleType(groupKey) {
+		if (groupKey.startsWith("color.")) return "color";
+		if (groupKey.startsWith("space.")) return "spacing";
+		if (groupKey === "shape.radius") return "radius";
+		if (groupKey === "text") return "text";
+		if (groupKey === "motion") return "motion";
+		return "other";
+	}
+	isRenderableColor(value) {
+		const normalized = value.trim();
+		return TokenHtmlShowcaseRenderer.#COLOR_HEX_RE.test(normalized) || /^(rgb|rgba|hsl|hsla|oklch|oklab|lab|color)\(/i.test(normalized) || normalized === "transparent" || normalized === "currentColor";
+	}
+	renderGroupedTokens(tokens, idPrefix) {
+		let html = "";
+		for (const groupInfo of this.getDisplayGroups(tokens)) {
+			html += `<section class="token-subgroup">\n`;
+			html += `<h3 class="token-subgroup-title" id="${this.esc(this.sectionId(`${idPrefix}-group-title`, groupInfo.key))}">${this.esc(groupInfo.title)}</h3>\n`;
+			const listClass = groupInfo.group === "fonts" || groupInfo.group === "typography" || groupInfo.kind === "fontCollection" ? "token-list token-list--font" : "token-list";
+			html += `<div class="${listClass}">\n`;
+			html += groupInfo.kind === "fontCollection" ? groupInfo.tokens.map((entry) => this.renderFontVariantCard(this.toFontVariantCard(groupInfo.key, entry))).join("") : this.renderGroupItems(groupInfo.group, groupInfo.tokens);
+			html += `</div>\n`;
+			html += `</section>\n`;
+		}
+		return html;
+	}
+	getDisplayGroups(tokens) {
+		const grouped = this.#classifier.groupTokens(tokens);
+		const groups = [];
+		for (const [group, groupTokens] of grouped) if (group === "fonts") groups.push(...this.#fontAggregator.aggregate(groupTokens).map((collection) => ({
+			key: collection.key,
+			title: collection.title,
+			group,
+			tokens: collection.entries,
+			kind: "fontCollection"
+		})));
+		else groups.push({
+			key: group,
+			title: group,
+			group,
+			tokens: groupTokens,
+			kind: "tokens"
+		});
+		return groups.sort((left, right) => left.title.localeCompare(right.title));
+	}
+	renderMenuGroupLinks(idPrefix, tokens) {
+		return this.getDisplayGroups(tokens).map((group) => {
+			const subId = this.sectionId(`${idPrefix}-group-title`, group.key);
+			return `<a class="sidebar-sub-link" href="#${this.esc(subId)}">${this.esc(group.title)}</a>`;
+		}).join("\n");
+	}
+	sectionId(prefix, value) {
+		return `${prefix}-${value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "")}`;
+	}
+	tokenId(name) {
+		return this.sectionId("token", name.replace(/^--/, ""));
+	}
+	renderGroupItems(group, tokens) {
+		if (group === "borders") return this.renderBorderItems(tokens);
+		if (group === "typography") return this.renderTypographyItems(tokens);
+		if (group === "shadows") return this.renderShadowItems(tokens);
+		if (group === "gradients") return this.renderGradientItems(tokens);
+		if (group === "motion") return this.renderMotionItems(tokens);
+		return tokens.map((token) => this.renderTokenItem(group, token.name, token.value)).join("");
+	}
+	renderBorderItems(tokens) {
+		const aggregated = this.#borderAggregator.aggregate(tokens);
+		return [
+			...aggregated.borders.map((item) => this.renderBorderItem(item)),
+			...aggregated.borderWidths.map((item) => this.renderBorderWidthItem(item)),
+			...aggregated.strokeStyles.map((item) => this.renderStrokeStyleItem(item)),
+			...aggregated.fallback.map((token) => this.renderTokenItem("borders", token.name, token.value))
+		].join("");
+	}
+	renderTypographyItems(tokens) {
+		return this.#typographyAggregator.aggregate(tokens).map((item) => this.renderTokenItem("typography", item.name, item.value, item.typography)).join("");
+	}
+	renderShadowItems(tokens) {
+		const aggregated = this.#shadowAggregator.aggregate(tokens);
+		return [...aggregated.items.map((item) => this.renderShadowItem(item)), ...aggregated.fallback.map((token) => this.renderTokenItem("shadows", token.name, token.value))].join("");
+	}
+	renderGradientItems(tokens) {
+		const aggregated = this.#gradientAggregator.aggregate(tokens);
+		return [...aggregated.items.map((item) => this.renderGradientItem(item)), ...aggregated.fallback.map((token) => this.renderTokenItem("gradients", token.name, token.value))].join("");
+	}
+	renderMotionItems(tokens) {
+		const aggregated = this.#transitionAggregator.aggregate(tokens);
+		return [...aggregated.items.map((item) => this.renderTransitionItem(item)), ...aggregated.fallback.map((token) => this.renderMotionTokenItem(token.name, token.value))].join("");
+	}
+	getFontCollectionEntryLabel(name, key) {
+		const normalized = name.replace(/^--/, "");
+		return normalized.match(new RegExp(`${key}-([a-z0-9-]+)$`, "i"))?.[1] ?? normalized;
+	}
+	toFontVariantCard(key, entry) {
+		const label = this.getFontCollectionEntryLabel(entry.name, key);
+		const title = this.toTitleCase(label.replace(/-/g, " "));
+		const metaLabel = this.getFontCollectionMetaLabel(key);
+		return {
+			name: title,
+			value: entry.value,
+			previewStyle: this.getFontVariantPreviewStyle(key, entry.value),
+			metaLabel
+		};
+	}
+	getFontCollectionMetaLabel(key) {
+		if (key === "font-family") return "Font";
+		if (key === "font-weight") return "Weight";
+		if (key === "font-size") return "Size";
+		if (key === "line-height") return "Line height";
+		if (key === "letter-spacing") return "Letter spacing";
+		return "Value";
+	}
+	getFontVariantPreviewStyle(key, value) {
+		const base = [
+			"font-family: Inter, Arial, sans-serif",
+			"font-size: 24px",
+			"line-height: 1.6",
+			"font-weight: 400",
+			"letter-spacing: 0"
+		];
+		if (key === "font-family") base[0] = `font-family: ${this.esc(value)}`;
+		else if (key === "font-weight") base[3] = `font-weight: ${this.esc(value)}`;
+		else if (key === "font-size") base[1] = `font-size: ${this.esc(value)}`;
+		else if (key === "line-height") base[2] = `line-height: ${this.esc(value)}`;
+		else if (key === "letter-spacing") base[4] = `letter-spacing: ${this.esc(value)}`;
+		else return "";
+		return base.join(";");
+	}
+	renderFontVariantCard(card) {
+		return `<div class="token-item token-item--font-card">${this.renderGroupBadge("fonts")}<div class="font-preview font-preview--grid" style="${card.previewStyle ?? ""}">${this.esc(TokenHtmlShowcaseRenderer.#FONT_PREVIEW_TEXT)}</div><span class="token-name token-name--font-card">${this.esc(card.name)}</span><div class="token-meta"><span><b>${this.esc(card.metaLabel)}:</b> <span class="token-meta-value">${this.esc(card.value)}</span></span></div></div>\n`;
+	}
+	renderBorderItem(item) {
+		const badge = this.renderGroupBadge("borders");
+		const title = this.toTitleCase(item.name.replace(/^.*-border-/, "").replace(/-/g, " "));
+		const color = item.color ?? "currentColor";
+		const width = item.width ?? "1px";
+		const style = item.style ?? "solid";
+		const resolved = `${width} ${style} ${color}`;
+		const previewStyle = `border:${this.esc(resolved)}`;
+		const value = item.value ? this.renderMetaLine("value", item.value) : "";
+		const resolvedLine = this.renderMetaLine("resolved", resolved);
+		return `<div class="token-item token-item--border-card" id="${this.esc(this.tokenId(`--${item.name}`))}">${badge}<div class="border-preview border-preview--grid"><div class="border-preview-box" style="${previewStyle}"></div></div><span class="token-name token-name--font-card">${this.esc(title)}</span><div class="token-meta token-meta--stack">${value}${resolvedLine}<span><b>Color:</b> <span class="token-meta-value">${this.esc(color)}</span></span><span><b>Width:</b> <span class="token-meta-value">${this.esc(width)}</span></span><span><b>Style:</b> <span class="token-meta-value">${this.esc(style)}</span></span></div></div>\n`;
+	}
+	renderShadowItem(item) {
+		const badge = this.renderGroupBadge("shadows");
+		const title = this.toTitleCase(item.name.replace(/^.*-shadow-/, "").replace(/-/g, " "));
+		const layers = item.layers.map((layer) => this.formatShadowLayer(layer));
+		const boxShadow = layers.join(", ");
+		const value = item.value ? this.renderMetaLine("value", item.value) : "";
+		const resolved = this.renderMetaLine("resolved", boxShadow);
+		const details = layers.map((layer, index) => `<span class="shadow-layer"><b>Layer ${index + 1}:</b> <span class="token-meta-value">${this.esc(layer)}</span></span>`).join("");
+		return `<div class="token-item token-item--shadow-card" id="${this.esc(this.tokenId(`--${item.name}`))}" data-token-name="${this.esc(`--${item.name}`)}">${badge}<div class="shadow-preview shadow-preview--grid"><div class="shadow-preview-box" style="box-shadow:${this.esc(boxShadow)}"></div></div><span class="token-name token-name--font-card">${this.esc(title)}</span><div class="token-meta token-meta--stack">${value}${resolved}${details}</div></div>\n`;
+	}
+	renderGradientItem(item) {
+		const badge = this.renderGroupBadge("gradients");
+		const title = this.toTitleCase(item.name.replace(/^.*-gradient-/, "").replace(/-/g, " "));
+		const gradient = this.formatGradientValue(item);
+		const value = item.value ? this.renderMetaLine("value", item.value) : "";
+		const resolved = this.renderMetaLine("resolved", gradient);
+		const stops = this.renderGradientStops(item);
+		return `<div class="token-item token-item--gradient-card" id="${this.esc(this.tokenId(`--${item.name}`))}" data-token-name="${this.esc(`--${item.name}`)}">${badge}<div class="token-swatch" style="background:${this.esc(gradient)}"></div><span class="token-name">${this.esc(title)}</span>${stops}<div class="token-meta token-meta--stack">${value}${resolved}</div></div>\n`;
+	}
+	renderGradientStops(item) {
+		if (item.stops.length === 0) return "";
+		const stops = item.stops.map((stop) => {
+			const color = stop.color ?? "transparent";
+			const position = this.formatGradientPosition(stop.position);
+			const label = position ? `${color} ${position}` : color;
+			return `<span class="gradient-stop"><span class="gradient-stop__swatch token-swatch" style="background:${this.esc(color)}"></span><span class="gradient-stop__value">${this.esc(label)}</span></span>`;
+		}).join("");
+		return `<div class="gradient-stops" aria-label="${this.esc(item.name)} gradient colors">${stops}</div>`;
+	}
+	renderTransitionItem(item) {
+		const title = this.toTitleCase(item.name.replace(/^.*-transition-/, "").replace(/-/g, " "));
+		const duration = item.duration ?? this.extractDurationValue(item.value) ?? "1200ms";
+		const delay = item.delay ?? "0ms";
+		const timing = this.formatTransitionTiming(item.timingFunction, item.value);
+		const resolved = Boolean(item.duration || item.delay || item.timingFunction.length > 0) ? `${duration} ${timing} ${delay}` : void 0;
+		return this.renderMotionCard({
+			name: `--${item.name}`,
+			title,
+			duration,
+			delay,
+			timing,
+			value: item.value,
+			resolved
+		});
+	}
+	renderMotionTokenItem(name, value) {
+		const title = this.toMotionTitle(name);
+		const duration = this.getMotionPreviewDuration(name, value);
+		const timing = this.getMotionPreviewTiming(name, value);
+		const resolved = this.getMotionResolvedValue(name, value, duration, timing, "0ms");
+		return this.renderMotionCard({
+			name,
+			title,
+			duration,
+			delay: "0ms",
+			timing,
+			value,
+			resolved
+		});
+	}
+	renderMotionCard(info) {
+		const badge = this.renderGroupBadge("motion");
+		const style = [
+			`--motion-duration:${this.esc(this.normalizeMotionDuration(info.duration))}`,
+			`--motion-delay:${this.esc(info.delay)}`,
+			`--motion-timing:${this.esc(info.timing)}`
+		].join(";");
+		const value = info.value ? `<span><b>value:</b> <span class="token-meta-value">${this.esc(info.value)}</span></span>` : "";
+		const resolved = info.resolved && info.resolved !== info.value ? this.renderMetaLine("resolved", info.resolved) : "";
+		return `<div class="token-item token-item--motion-card" id="${this.esc(this.tokenId(info.name))}" data-token-name="${this.esc(info.name)}">${badge}<div class="motion-preview motion-preview--grid" style="${style}"><div class="motion-track"><div class="motion-dot"></div></div></div><span class="token-name token-name--font-card">${this.esc(info.title)}</span><div class="token-meta token-meta--stack"><span><b>Duration:</b> <span class="token-meta-value">${this.esc(info.duration)}</span></span><span><b>Delay:</b> <span class="token-meta-value">${this.esc(info.delay)}</span></span><span><b>Timing:</b> <span class="token-meta-value">${this.esc(info.timing)}</span></span>${value}${resolved}</div></div>\n`;
+	}
+	renderMetaLine(label, value) {
+		return `<span><b>${this.esc(label)}:</b> <span class="token-meta-value">${this.esc(value)}</span></span>`;
+	}
+	formatGradientValue(item) {
+		if (item.stops.length === 0 && item.value) return item.value;
+		return `linear-gradient(90deg, ${item.stops.map((stop) => `${stop.color ?? "transparent"} ${this.formatGradientPosition(stop.position)}`).join(", ")})`;
+	}
+	formatGradientPosition(position) {
+		if (!position) return "";
+		if (/^-?\d+(?:\.\d+)?$/.test(position)) return `${Number(position) * 100}%`;
+		return position;
+	}
+	formatTransitionTiming(timingFunction, value) {
+		const values = timingFunction.filter((part) => part !== void 0);
+		if (values.length === 4) return `cubic-bezier(${values.join(", ")})`;
+		if (value?.includes("cubic-bezier")) return value.match(/cubic-bezier\([^)]+\)/)?.[0] ?? "ease";
+		return "ease";
+	}
+	extractDurationValue(value) {
+		if (!value) return null;
+		return value.match(/\b\d+(?:\.\d+)?m?s\b/)?.[0] ?? null;
+	}
+	getMotionPreviewDuration(name, value) {
+		if (name.toLowerCase().includes("duration") && /^\d+(?:\.\d+)?m?s$/.test(value)) return value;
+		return this.extractDurationValue(value) ?? "1200ms";
+	}
+	getMotionPreviewTiming(name, value) {
+		if (name.toLowerCase().includes("cubic-bezier") && /^-?\d/.test(value)) return `cubic-bezier(${value})`;
+		if (value.includes("cubic-bezier")) return value.match(/cubic-bezier\([^)]+\)/)?.[0] ?? "ease";
+		return "ease";
+	}
+	getMotionResolvedValue(name, value, duration, timing, delay) {
+		if (name.toLowerCase().includes("cubic-bezier") && /^-?\d/.test(value)) return timing;
+		if (value.includes("cubic-bezier")) return `${duration} ${timing} ${delay}`;
+	}
+	normalizeMotionDuration(duration) {
+		if (duration === "0ms" || duration === "0s" || duration === "0") return "1ms";
+		return duration;
+	}
+	toMotionTitle(name) {
+		return this.toTitleCase(name.replace(/^--/, "").replace(/^.*-(duration|cubic-bezier|transition)-/, "").replace(/-/g, " "));
+	}
+	formatShadowLayer(layer) {
+		return [
+			layer.offsetX ?? "0px",
+			layer.offsetY ?? "0px",
+			layer.blur ?? "0px",
+			layer.spread ?? "0px",
+			this.formatShadowColor(layer.color ?? "currentColor")
+		].join(" ");
+	}
+	formatShadowColor(color) {
+		const match = color.match(/^#([0-9a-fA-F]{8})$/);
+		if (!match) return color;
+		const hex = match[1];
+		const red = Number.parseInt(hex.slice(0, 2), 16);
+		const green = Number.parseInt(hex.slice(2, 4), 16);
+		const blue = Number.parseInt(hex.slice(4, 6), 16);
+		const alpha = Number.parseInt(hex.slice(6, 8), 16);
+		return `rgb(${red} ${green} ${blue} / ${Number((alpha / 255).toFixed(2))})`;
+	}
+	renderBorderWidthItem(item) {
+		return this.renderDimensionItem("borders", item.name, item.value);
+	}
+	renderStrokeStyleItem(item) {
+		const badge = this.renderGroupBadge("borders");
+		const title = this.toTitleCase(item.name.replace(/^.*-stroke-style-/, "").replace(/-/g, " "));
+		const style = item.value ?? (item.dashArray.length > 0 ? "dashed" : "solid");
+		const previewStyle = `border:2px ${this.esc(style)} #334155`;
+		const dashArray = item.dashArray.filter(Boolean).join(", ");
+		return `<div class="token-item token-item--border-card" id="${this.esc(this.tokenId(`--${item.name}`))}">${badge}<div class="border-preview border-preview--grid"><div class="border-preview-box" style="${previewStyle}"></div></div><span class="token-name token-name--font-card">${this.esc(title)}</span><div class="token-meta token-meta--stack"><span><b>Style:</b> <span class="token-meta-value">${this.esc(style)}</span></span>${dashArray ? `<span><b>Dash:</b> <span class="token-meta-value">${this.esc(dashArray)}</span></span>` : ""}${item.lineCap ? `<span><b>Line cap:</b> <span class="token-meta-value">${this.esc(item.lineCap)}</span></span>` : ""}</div></div>\n`;
+	}
+	renderDimensionItem(group, name, value) {
+		const badge = this.renderGroupBadge(group);
+		const title = this.toDimensionTitle(name);
+		const markerStyle = this.getDimensionMarkerStyle(value);
+		return `<div class="token-item token-item--dimension-card" id="${this.esc(this.tokenId(name))}" data-token-name="${this.esc(name)}">${badge}<div class="dimension-preview dimension-preview--grid"><div class="dimension-marker" style="${markerStyle}"></div></div><span class="token-name token-name--font-card">${this.esc(title)}</span><div class="token-meta"><span><b>Dimension:</b> <span class="token-meta-value">${this.esc(value)}</span></span></div></div>\n`;
+	}
+	renderRadiusItem(name, value) {
+		const badge = this.renderGroupBadge("radius");
+		const title = this.toDimensionTitle(name);
+		const radius = this.esc(value);
+		return `<div class="token-item token-item--radius-card" id="${this.esc(this.tokenId(name))}" data-token-name="${this.esc(name)}">${badge}<div class="radius-preview radius-preview--grid"><div class="radius-preview-box" style="border-radius:${radius}"></div></div><span class="token-name token-name--font-card">${this.esc(title)}</span><div class="token-meta"><span><b>Radius:</b> <span class="token-meta-value">${this.esc(value)}</span></span></div></div>\n`;
+	}
+	renderOpacityItem(name, value) {
+		const badge = this.renderGroupBadge("opacity");
+		const title = this.toTitleCase(name.replace(/^--/, "").replace(/^.*-opacity-/, "").replace(/^.*-alpha-/, "").replace(/-/g, " "));
+		const opacity = this.parseOpacityValue(value);
+		const previewOpacity = opacity ?? 1;
+		const resolved = opacity !== null ? this.renderMetaLine("resolved", `${Math.round(opacity * 100)}%`) : "";
+		return `<div class="token-item token-item--opacity-card" id="${this.esc(this.tokenId(name))}" data-token-name="${this.esc(name)}">${badge}<div class="opacity-preview opacity-preview--checker"><div class="opacity-preview-fill" style="opacity:${this.esc(String(previewOpacity))}"></div></div><span class="token-name token-name--font-card">${this.esc(title)}</span><div class="token-meta token-meta--stack">${this.renderMetaLine("value", value)}${resolved}</div></div>\n`;
+	}
+	parseOpacityValue(value) {
+		const normalized = value.trim();
+		if (/^\d+(?:\.\d+)?%$/.test(normalized)) return Math.max(0, Math.min(1, Number.parseFloat(normalized) / 100));
+		if (/^\d+(?:\.\d+)?$/.test(normalized)) return Math.max(0, Math.min(1, Number.parseFloat(normalized)));
+		return null;
+	}
+	toDimensionTitle(name) {
+		return this.toTitleCase(name.replace(/^--/, "").replace(/^.*-dimension-/, "").replace(/-/g, " "));
+	}
+	getDimensionMarkerStyle(value) {
+		if (value === "0px" || value === "0") return "width:1px;opacity:0.25";
+		return `width:${this.esc(value)}`;
+	}
+	toTitleCase(value) {
+		return value.replace(/\b\w/g, (char) => char.toUpperCase());
+	}
+	renderTokenItem(group, name, value, typography) {
+		const lowerName = name.toLowerCase();
+		let preview = "";
+		let details = "";
+		if (group === "colors" || TokenHtmlShowcaseRenderer.#COLOR_HEX_RE.test(value) || value.startsWith("rgb") || value.startsWith("hsl")) preview = `<div class="token-swatch" style="background:${value}"></div>`;
+		else if (group === "gradients") {
+			preview = `<div class="token-swatch" style="background:${this.esc(value)}"></div>`;
+			details = this.renderGradientStopsFromValue(name, value);
+		} else if (group === "fonts" || group === "typography") {
+			const typographyInfo = typography ?? this.extractTypographyInfo(name, value);
+			const styleParts = this.getTypographyStyleParts(typographyInfo);
+			if (group === "typography" && styleParts.length === 0) styleParts.push(`font:${this.esc(value)}`);
+			preview = `<div class="font-preview" style="${styleParts.join(";")}">${this.esc(TokenHtmlShowcaseRenderer.#FONT_PREVIEW_TEXT)}</div>`;
+			details = `<div class="token-meta"><span><b>value:</b> <span class="token-meta-value">${this.esc(value)}</span></span></div>`;
+		} else if (group === "radius") return this.renderRadiusItem(name, value);
+		else if (group === "opacity") return this.renderOpacityItem(name, value);
+		else if (group === "spacing" || group === "sizes") return this.renderDimensionItem(group, name, value);
+		else if (lowerName.includes("shadow")) preview = `<div class="shadow-visual" style="box-shadow:${value}"></div>`;
+		else if (lowerName.includes("border") || lowerName.includes("stroke")) preview = `<div class="border-visual" style="border:${value}"></div>`;
+		else if (lowerName.includes("gradient")) preview = `<div class="gradient-visual" style="background:${value}"></div>`;
+		else if (lowerName.startsWith("--font-")) {
+			const prop = lowerName.slice(2).replace(/-/g, "-");
+			preview = `<div class="font-sample" style="${this.esc(prop)}:${this.esc(value)}">Aa</div>`;
+		} else if (group === "motion") return this.renderMotionTokenItem(name, value);
+		const badge = this.renderGroupBadge(group);
+		const valueLine = group === "fonts" || group === "typography" ? "" : `<div class="token-meta"><span><b>value:</b> <span class="token-meta-value">${this.esc(value)}</span></span></div>`;
+		return `<div class="token-item${group === "colors" ? " token-item--color-card" : group === "gradients" ? " token-item--gradient-card" : ""}" id="${this.esc(this.tokenId(name))}">${badge}${preview}<span class="token-name">${this.esc(name)}</span>${details}${valueLine}</div>\n`;
+	}
+	renderGradientStopsFromValue(name, value) {
+		const stops = [...value.matchAll(/(#[0-9a-fA-F]{3,8})\s*(-?\d+(?:\.\d+)?%?)?/g)].map((match) => ({
+			color: match[1],
+			position: match[2]
+		}));
+		if (stops.length === 0) return "";
+		const item = {
+			name: name.replace(/^--/, ""),
+			value,
+			stops
+		};
+		return this.renderGradientStops(item);
+	}
+	renderGroupBadge(group) {
+		if (!new Set([
+			"colors",
+			"fonts",
+			"typography",
+			"borders",
+			"radius",
+			"spacing",
+			"shadows",
+			"gradients",
+			"motion",
+			"opacity",
+			"sizes",
+			"other"
+		]).has(group)) return "";
+		return `<span class="token-type-badge">${this.esc(group)}</span>`;
+	}
+	getTypographyStyleParts(typographyInfo) {
+		const styleParts = [];
+		if (typographyInfo.family) styleParts.push(`font-family:${this.esc(typographyInfo.family)}`);
+		if (typographyInfo.size) styleParts.push(`font-size:${this.esc(typographyInfo.size)}`);
+		if (typographyInfo.weight) styleParts.push(`font-weight:${this.esc(typographyInfo.weight)}`);
+		if (typographyInfo.lineHeight) styleParts.push(`line-height:${this.esc(typographyInfo.lineHeight)}`);
+		if (typographyInfo.letterSpacing) styleParts.push(`letter-spacing:${this.esc(typographyInfo.letterSpacing)}`);
+		return styleParts;
+	}
+	extractTypographyInfo(name, value) {
+		const lowerName = name.toLowerCase();
+		const info = {};
+		if (lowerName.includes("family")) info.family = value;
+		if (lowerName.includes("size")) info.size = value;
+		if (lowerName.includes("weight")) info.weight = value;
+		if (lowerName.includes("line-height") || lowerName.includes("lineheight")) info.lineHeight = value;
+		if (lowerName.includes("letter-spacing") || lowerName.includes("tracking")) info.letterSpacing = value;
+		const shortMatch = value.match(/(\d+(?:\.\d+)?(?:px|rem|em|%)?)(?:\/([^\s]+))?\s+(.+)$/);
+		if (shortMatch) {
+			info.size ??= shortMatch[1];
+			info.lineHeight ??= shortMatch[2];
+			info.family ??= shortMatch[3].trim();
+		}
+		const weightMatch = value.match(/\b([1-9]00|normal|bold|lighter|bolder)\b/i);
+		if (weightMatch) info.weight ??= weightMatch[1];
+		return info;
+	}
+	esc(str) {
+		return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+	}
+};
+//#endregion
+//#region src/core/showcase/TokenHtmlShowcaseBuilder.ts
+/**
+* Builds an HTML showcase from JSON tokens or ready CSS.
+*
+* @remarks
+* Implements the common showcase pipeline and gives validation, conversion,
+* CSS parsing and HTML rendering to separate classes.
+*/
+var TokenHtmlShowcaseBuilder = class {
+	#validator;
+	#converter;
+	#parser;
+	#renderer;
+	constructor(validator, converter, parser = new CssTokenParser(), renderer = new TokenHtmlShowcaseRenderer()) {
+		this.#validator = validator;
+		this.#converter = converter;
+		this.#parser = parser;
+		this.#renderer = renderer;
+	}
+	async showcase(sources) {
+		if (sources.length === 0) throw new Error("No token sources provided");
+		if (sources.length === 1) {
+			const sourceContent = await readFile(sources[0], "utf8");
+			if (this.#isCssContent(sourceContent)) return this.#renderCss(sourceContent);
+		}
+		return this.#showcaseFromSources(sources);
+	}
+	async #showcaseFromSources(sources) {
+		const issues = await this.#validator.validate(sources);
+		if (this.#hasValidationErrors(issues)) throw new Error(this.#formatValidationIssues(issues));
+		const cssString = await this.#converter.convert(sources);
+		return this.#renderCss(cssString);
+	}
+	#renderCss(cssString) {
+		return this.#renderer.renderPage(this.#parser.parse(cssString));
+	}
+	#hasValidationErrors(issues) {
+		return issues.some((issue) => issue.severity === "error");
+	}
+	#formatValidationIssues(issues) {
+		return issues.filter((issue) => issue.severity === "error").map((issue) => `[${issue.name}] ${issue.sourcePath} - ${issue.message}`).join("\n");
+	}
+	#isCssContent(content) {
+		return /(^|\s)--[a-zA-Z0-9_-]+\s*:/.test(content) || /(^|\s):root\b/.test(content) || /(^|\s)@layer\b/.test(content);
+	}
+};
+//#endregion
+//#region src/core/validation/dtcg/DtcgSchemaValidator.ts
+var FORMAT_SCHEMA_ID = "https://www.designtokens.org/schemas/2025.10/format.json";
+/**
+* Validates DTCG JSON sources against the official DTCG JSON Schema.
+* Accepts DTCG JSON sources only.
+*/
+var DtcgSchemaValidator = class {
+	name = "dtcg";
+	async validate(sources) {
+		const validator = (await this.#createAjv()).getSchema(FORMAT_SCHEMA_ID);
+		if (!validator) throw new Error(`AJV schema "${FORMAT_SCHEMA_ID}" was not loaded.`);
+		const issues = [];
+		for (const source of sources) {
+			const content = await new Source(source).getContent();
+			if (validator(JSON.parse(content))) continue;
+			const errors = validator.errors ?? [];
+			for (const error of errors) issues.push(this.#toValidationIssue(source, error));
+		}
+		return issues;
+	}
+	async #createAjv() {
+		const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+		const schemaDir = path.resolve(moduleDir, "schemas/2025.10");
+		const ajv = new Ajv({
+			allErrors: true,
+			strict: false
+		});
+		addFormats(ajv);
+		for (const schemaFilePath of await listJsonFiles(schemaDir)) {
+			const rawSchema = await readFile(schemaFilePath, "utf8");
+			const schema = JSON.parse(rawSchema);
+			ajv.addSchema(schema, schema.$id ?? schemaFilePath);
+		}
+		return ajv;
+	}
+	#toValidationIssue(sourcePath, error) {
+		const instancePath = error.instancePath || "/";
+		const message = error.message ?? "Validation error.";
+		return {
+			name: this.name,
+			sourcePath,
+			severity: "error",
+			message: `${instancePath}: ${message}`,
+			raw: error
+		};
+	}
+};
+async function listJsonFiles(directoryPath) {
+	const entries = await readdir(directoryPath, { withFileTypes: true });
+	const files = [];
+	for (const entry of entries) {
+		const entryPath = path.join(directoryPath, entry.name);
+		if (entry.isDirectory()) files.push(...await listJsonFiles(entryPath));
+		else if (entry.isFile() && entry.name.toLowerCase().endsWith(".json")) files.push(entryPath);
+	}
+	return files;
+}
+//#endregion
+//#region src/core/validation/hrdt/HrdtTokenValidator.ts
+var SCHEMA_ID = "https://designtokens.local/schemas/hrdt-tokens.json";
+/**
+* Validator based on AJV and JSON Schema.
+* Accepts HRDT sources only.
+*/
+var HrdtTokenValidator = class {
+	name = "hrdt";
+	async validate(sources) {
+		const validator = (await this.#createAjv()).getSchema(SCHEMA_ID);
+		if (!validator) throw new Error(`AJV schema "${SCHEMA_ID}" was not loaded.`);
+		const issues = [];
+		for (const source of sources) {
+			const content = await new Source(source).getContent();
+			if (validator(new HrdtTokenReader().parseRaw(content))) continue;
+			const errors = validator.errors ?? [];
+			for (const error of errors) issues.push(this.#toValidationIssue(source, error));
+		}
+		return issues;
+	}
+	async #createAjv() {
+		const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+		const schemaPath = path.resolve(moduleDir, "schemas/hrdt-tokens.json");
+		const ajv = new Ajv({
+			allErrors: true,
+			strict: false
+		});
+		addFormats(ajv);
+		const rawSchema = await readFile(schemaPath, "utf8");
+		const schema = JSON.parse(rawSchema);
+		ajv.addSchema(schema, schema.$id ?? schemaPath);
+		return ajv;
+	}
+	#toValidationIssue(sourcePath, error) {
+		const instancePath = error.instancePath || "/";
+		const message = error.message ?? "Validation error.";
+		return {
+			name: this.name,
+			sourcePath,
+			severity: "error",
+			message: `${instancePath}: ${message}`,
+			raw: error
+		};
+	}
+};
+//#endregion
+//#region src/core/validation/DtcgTokenValidator.ts
+function extractThemeName(source) {
+	const withoutExt = (source.split("/").at(-1)?.split("\\").at(-1) ?? source).replace(/\.(json|ya?ml)$/i, "");
+	const dotIndex = withoutExt.lastIndexOf(".");
+	return dotIndex > 0 ? withoutExt.slice(dotIndex + 1) : withoutExt;
+}
+async function readDoc(source) {
+	const content = await new Source(source).getContent();
+	return /\.(ya?ml)$/i.test(source) ? new HrdtTokenReader().parse(content) : new DtcgJsonReader().parse(content);
+}
+/**
+* Validates DTCG JSON or HRDT token files using the internal model.
+*
+* Accepts one base file plus optional theme files. Validates references,
+* cycles, type mismatches, and deprecated token usage.
+*/
+var DtcgTokenValidator = class {
+	#name = "internal";
+	async validate(sources) {
+		const hrdtSources = sources.filter((s) => /\.(ya?ml)$/i.test(s));
+		const hrdtIssues = hrdtSources.length > 0 ? await new HrdtTokenValidator().validate(hrdtSources) : [];
+		if (hrdtIssues.some((i) => i.severity === "error")) return hrdtIssues;
+		const jsonSources = sources.filter((s) => !/\.(ya?ml)$/i.test(s));
+		const schemaIssues = jsonSources.length > 0 ? await new DtcgSchemaValidator().validate(jsonSources) : [];
+		if (schemaIssues.some((i) => i.severity === "error")) return schemaIssues;
+		const [base, ...rest] = await Promise.all(sources.map(readDoc));
+		return new DtcgList(base, new Map(rest.map((doc, i) => [extractThemeName(sources[i + 1]), doc]))).validate().map((issue) => ({
+			name: this.#name,
+			sourcePath: sources.join(", "),
+			message: `${issue.tokenPath}: ${issue.message}`,
+			severity: issue.severity
+		}));
+	}
+};
+//#endregion
+//#region src/core/DesignToken.ts
+function extractFileName(name) {
+	return name.split("/").at(-1)?.split("\\").at(-1) ?? name;
+}
+function extractTheme(fileName) {
+	const withoutExt = fileName.replace(/\.json$/i, "");
+	const dotIndex = withoutExt.lastIndexOf(".");
+	return dotIndex > 0 ? withoutExt.slice(dotIndex + 1) : withoutExt;
+}
+/**
+* A single design token, identified by file name.
+*
+* @remarks
+* The theme is extracted from the file name:
+* - `tokens.dark.json` → theme `dark`
+* - `base.json` → theme `base`
+* The first token in the {@link DesignTokens} collection is marked as base.
+*/
+var DesignToken = class {
+	#isBase;
+	/** Theme name extracted from the file name. */
+	themeName;
+	/**
+	* @param name - Path to the token file or its name.
+	* @param isBase - Whether the token is base.
+	*/
+	constructor(name, isBase) {
+		this.themeName = extractTheme(extractFileName(name));
+		this.#isBase = isBase;
+	}
+	/** Whether the token is base. */
+	get isBase() {
+		return this.#isBase;
+	}
+	/**
+	* Token theme name.
+	* @deprecated Use {@link DesignToken.themeName}.
+	*/
+	get name() {
+		return this.themeName;
+	}
+	/**
+	* CSS selector for the token theme.
+	* @returns `:root` for base theme, `:root[data-theme="<theme>"]` for others.
+	*/
+	get selector() {
+		return this.#isBase ? ":root" : `:root[data-theme="${this.themeName}"]`;
+	}
+};
+/**
+* Ordered collection of design tokens.
+*
+* @remarks
+* The first token in the collection is always the base token.
+* Use {@link DesignTokens.fromNames} to create from a list of file names
+* or {@link DesignTokens.scan} to scan a directory.
+*/
+var DesignTokens = class DesignTokens {
+	tokens;
+	constructor(tokens) {
+		this.tokens = tokens;
+	}
+	/**
+	* Scans a directory and creates a collection from found token files.
+	*
+	* @param directory - Path to the directory to scan.
+	* @returns Collection of tokens sorted by file name.
+	* @throws Error if directory is empty.
+	*/
+	static async scan(directory) {
+		const jsonFiles = (await readdir(directory)).sort().filter((file) => file.toLowerCase().endsWith(".json"));
+		if (jsonFiles.length === 0) throw new Error(`No token files found in directory: ${directory}`);
+		return new DesignTokens(jsonFiles.map((file, index) => new DesignToken(`${directory}/${file}`, index === 0)));
+	}
+	/**
+	* Creates a token collection from an array of file names.
+	*
+	* @param names - Array of token file paths or names.
+	*   The first element is considered the base token.
+	* @returns Collection of tokens in the order of given names.
+	* @throws Error if the array is empty.
+	*/
+	static fromNames(names) {
+		if (names.length === 0) throw new Error("No token sources provided");
+		return new DesignTokens(names.map((name, index) => new DesignToken(name, index === 0)));
+	}
+	/** Whether the collection has a base token. */
+	get hasBaseToken() {
+		return this.tokens.length > 0;
+	}
+	/** The base token of the collection (first token). */
+	get baseToken() {
+		return this.tokens[0];
+	}
+	/**
+	* Returns a token by theme name.
+	*
+	* @param themeName - Theme name (for example, `"dark"`, `"high-contrast"`).
+	* @returns Token with the given theme.
+	* @throws Error if the token with the given theme is not found.
+	*/
+	getToken(themeName) {
+		const token = this.tokens.find((t) => t.name === themeName);
+		if (!token) throw new Error(`Unknown token theme: ${themeName}`);
+		return token;
+	}
+	/**
+	* Returns a CSS selector for the given theme.
+	*
+	* @param themeName - Theme name.
+	* @param isBase - Whether the theme is base (`:root`).
+	* @returns CSS selector for the theme.
+	* @throws Error if the theme is not base and is not found in the collection.
+	*/
+	getSelector(themeName, isBase) {
+		return isBase ? ":root" : this.getToken(themeName).selector;
+	}
+};
+//#endregion
+//#region src/core/io/DtcgJsonWriter.ts
+var DTCG_SCHEMA = "https://www.designtokens.org/schemas/2025.10/format.json";
+/**
+* Serializes a {@link Dtcg} document to a DTCG JSON string.
+*
+* @see https://tr.designtokens.org/format/
+*/
+var DtcgJsonWriter = class {
+	write(doc) {
+		return JSON.stringify(this.#toObject(doc), null, 2) + "\n";
+	}
+	#toObject(doc) {
+		const result = { "$schema": DTCG_SCHEMA };
+		for (const [key, child] of doc.entries()) result[key] = child instanceof TokenGroup ? this.#writeGroup(child) : this.#writeToken(child);
+		return result;
+	}
+	#writeGroup(group) {
+		const obj = {};
+		if (group.type !== void 0) obj["$type"] = group.type;
+		if (group.description !== void 0) obj["$description"] = group.description;
+		if (group.deprecated !== void 0) obj["$deprecated"] = group.deprecated;
+		if (group.extensions !== void 0) obj["$extensions"] = group.extensions;
+		if (group.extends !== void 0) obj["$extends"] = group.extends instanceof TokenReference ? group.extends.toString() : group.extends;
+		if (group.root !== void 0) obj["$root"] = this.#writeToken(group.root);
+		for (const [key, child] of group.entries()) obj[key] = child instanceof TokenGroup ? this.#writeGroup(child) : this.#writeToken(child);
+		return obj;
+	}
+	#writeToken(token) {
+		const obj = {};
+		if (token.type !== void 0) obj["$type"] = token.type;
+		if (token.description !== void 0) obj["$description"] = token.description;
+		if (token.deprecated !== void 0) obj["$deprecated"] = token.deprecated;
+		if (token.extensions !== void 0) obj["$extensions"] = token.extensions;
+		obj["$value"] = this.#writeValue(token);
+		return obj;
+	}
+	#writeValue(token) {
+		const value = token.value;
+		if (value instanceof TokenReference) return value.toString();
+		if (token instanceof ColorToken) return this.#writeColor(value);
+		if (token instanceof DimensionToken) return this.#writeDimension(value);
+		if (token instanceof FontFamilyToken) return value;
+		if (token instanceof FontWeightToken) return value;
+		if (token instanceof NumberToken) return value;
+		if (token instanceof DurationToken) return this.#writeDuration(value);
+		if (token instanceof CubicBezierToken) return this.#writeCubicBezier(value);
+		if (token instanceof StrokeStyleToken) return this.#writeStrokeStyle(value);
+		if (token instanceof BorderToken) return this.#writeBorder(value);
+		if (token instanceof TransitionToken) return this.#writeTransition(value);
+		if (token instanceof ShadowToken) return this.#writeShadow(value);
+		if (token instanceof GradientToken) return this.#writeGradient(value);
+		if (token instanceof TypographyToken) return this.#writeTypography(value);
+		if (token instanceof AliasToken) return value.toString();
+		return value;
+	}
+	#writeColor(color) {
+		const obj = {
+			colorSpace: color.colorSpace,
+			components: color.components
+		};
+		if (color.alpha !== 1) obj["alpha"] = color.alpha;
+		if (color.hex !== void 0) obj["hex"] = color.hex;
+		return obj;
+	}
+	#writeDimension(dim) {
+		return {
+			value: dim.value,
+			unit: dim.unit
+		};
+	}
+	#writeDuration(dur) {
+		return {
+			value: dur.value,
+			unit: dur.unit
+		};
+	}
+	#writeCubicBezier(cb) {
+		return [
+			cb.p1x,
+			cb.p1y,
+			cb.p2x,
+			cb.p2y
+		];
+	}
+	#writeStrokeStyle(value) {
+		if (value instanceof StrokeStyleObject) return {
+			dashArray: value.dashArray.map((d) => d instanceof TokenReference ? d.toString() : this.#writeDimension(d)),
+			lineCap: value.lineCap
+		};
+		return value;
+	}
+	#writeBorder(border) {
+		return {
+			color: this.#writeColorOrRef(border.color),
+			width: this.#writeDimensionOrRef(border.width),
+			style: this.#writeStrokeStyleOrRef(border.style)
+		};
+	}
+	#writeTransition(transition) {
+		return {
+			duration: this.#writeDurationOrRef(transition.duration),
+			delay: this.#writeDurationOrRef(transition.delay),
+			timingFunction: this.#writeCubicBezierOrRef(transition.timingFunction)
+		};
+	}
+	#writeShadow(value) {
+		if (Array.isArray(value)) return value.map((item) => item instanceof TokenReference ? item.toString() : this.#writeShadowLayer(item));
+		return this.#writeShadowLayer(value);
+	}
+	#writeShadowLayer(layer) {
+		const obj = {
+			color: this.#writeColorOrRef(layer.color),
+			offsetX: this.#writeDimensionOrRef(layer.offsetX),
+			offsetY: this.#writeDimensionOrRef(layer.offsetY),
+			blur: this.#writeDimensionOrRef(layer.blur),
+			spread: this.#writeDimensionOrRef(layer.spread)
+		};
+		if (layer.inset) obj["inset"] = layer.inset;
+		return obj;
+	}
+	#writeGradient(stops) {
+		return stops.map((stop) => stop instanceof TokenReference ? stop.toString() : this.#writeGradientStop(stop));
+	}
+	#writeGradientStop(stop) {
+		return {
+			color: this.#writeColorOrRef(stop.color),
+			position: this.#writeNumberOrRef(stop.position)
+		};
+	}
+	#writeTypography(typo) {
+		const obj = {};
+		if (typo.fontFamily !== void 0) obj["fontFamily"] = this.#writeFontFamilyOrRef(typo.fontFamily);
+		if (typo.fontSize !== void 0) obj["fontSize"] = this.#writeDimensionOrRef(typo.fontSize);
+		if (typo.fontWeight !== void 0) obj["fontWeight"] = this.#writeFontWeightOrRef(typo.fontWeight);
+		if (typo.letterSpacing !== void 0) obj["letterSpacing"] = this.#writeDimensionOrRef(typo.letterSpacing);
+		if (typo.lineHeight !== void 0) obj["lineHeight"] = this.#writeNumberOrRef(typo.lineHeight);
+		return obj;
+	}
+	#writeColorOrRef(value) {
+		return value instanceof TokenReference ? value.toString() : this.#writeColor(value);
+	}
+	#writeDimensionOrRef(value) {
+		return value instanceof TokenReference ? value.toString() : this.#writeDimension(value);
+	}
+	#writeDurationOrRef(value) {
+		return value instanceof TokenReference ? value.toString() : this.#writeDuration(value);
+	}
+	#writeCubicBezierOrRef(value) {
+		return value instanceof TokenReference ? value.toString() : this.#writeCubicBezier(value);
+	}
+	#writeStrokeStyleOrRef(value) {
+		if (value instanceof TokenReference) return value.toString();
+		return this.#writeStrokeStyle(value);
+	}
+	#writeFontFamilyOrRef(value) {
+		return value instanceof TokenReference ? value.toString() : value;
+	}
+	#writeFontWeightOrRef(value) {
+		return value instanceof TokenReference ? value.toString() : value;
+	}
+	#writeNumberOrRef(value) {
+		return value instanceof TokenReference ? value.toString() : value;
+	}
+};
+//#endregion
+//#region src/core/io/HrdtTokenWriter.ts
+/**
+* Serializes a {@link Dtcg} document to the HRDT token format.
+*
+* The HRDT format uses YAML syntax and mirrors what {@link HrdtTokenReader} accepts:
+* primitive tokens are grouped by type under `primitive.<type>`,
+* all other groups contain only alias references.
+*/
+var HrdtTokenWriter = class {
+	write(doc) {
+		const lines = [];
+		for (const [key, child] of doc.entries()) if (child instanceof TokenGroup) {
+			lines.push(`${key}:`);
+			if (key === "primitive") this.#writePrimitiveRoot(child, lines, 1);
+			else this.#writeReferenceGroup(child, lines, 1);
+			lines.push("");
+		}
+		return lines.join("\n").trimEnd() + "\n";
+	}
+	#writePrimitiveRoot(group, lines, depth) {
+		for (const [typeName, child] of group.entries()) {
+			if (!(child instanceof TokenGroup)) continue;
+			lines.push(`${this.#indent(depth)}${typeName}:`);
+			for (const [name, token] of child.entries()) {
+				if (token instanceof TokenGroup) continue;
+				const serialized = this.#serializePrimitiveToken(token);
+				if (typeof serialized === "string" && !serialized.includes("\n")) lines.push(`${this.#indent(depth + 1)}${name}: ${serialized}`);
+				else if (typeof serialized === "string") {
+					lines.push(`${this.#indent(depth + 1)}${name}:`);
+					for (const subLine of serialized.split("\n")) lines.push(`${this.#indent(depth + 2)}${subLine}`);
+				} else {
+					lines.push(`${this.#indent(depth + 1)}${name}:`);
+					for (const subLine of serialized) lines.push(`${this.#indent(depth + 2)}${subLine}`);
+				}
+			}
+		}
+	}
+	#writeReferenceGroup(group, lines, depth) {
+		for (const [key, child] of group.entries()) if (child instanceof TokenGroup) {
+			lines.push(`${this.#indent(depth)}${key}:`);
+			this.#writeReferenceGroup(child, lines, depth + 1);
+		} else {
+			const value = child.value;
+			const ref = value instanceof TokenReference ? value.toString() : String(value);
+			lines.push(`${this.#indent(depth)}${key}: "${ref}"`);
+		}
+	}
+	#serializePrimitiveToken(token) {
+		const value = token.value;
+		if (value instanceof TokenReference) return `"${value}"`;
+		if (token instanceof ColorToken) return this.#serializeColor(value);
+		if (token instanceof DimensionToken) return this.#serializeDimension(value);
+		if (token instanceof DurationToken) return this.#serializeDuration(value);
+		if (token instanceof FontFamilyToken) return this.#serializeFontFamily(value);
+		if (token instanceof FontWeightToken) return String(value);
+		if (token instanceof NumberToken) return String(value);
+		if (token instanceof CubicBezierToken) return this.#serializeCubicBezier(value);
+		if (token instanceof StrokeStyleToken) return this.#serializeStrokeStyle(value);
+		if (token instanceof BorderToken) return this.#serializeBorder(value);
+		if (token instanceof TransitionToken) return this.#serializeTransition(value);
+		if (token instanceof ShadowToken) return this.#serializeShadow(value);
+		if (token instanceof GradientToken) return this.#serializeGradient(value);
+		if (token instanceof TypographyToken) return this.#serializeTypography(value);
+		if (token instanceof AliasToken) return `"${value}"`;
+		return String(value);
+	}
+	#serializeColor(color) {
+		if (color.hex) {
+			if (color.alpha === 1) return color.hex;
+			const alphaHex = Math.round(color.alpha * 255).toString(16).padStart(2, "0");
+			return `${color.hex}${alphaHex}`;
+		}
+		const [r, g, b] = color.components;
+		const toHex = (v) => typeof v === "number" ? Math.round(v * 255).toString(16).padStart(2, "0") : "00";
+		const base = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+		if (color.alpha === 1) return base;
+		return `${base}${Math.round(color.alpha * 255).toString(16).padStart(2, "0")}`;
+	}
+	#serializeDimension(dim) {
+		return `${dim.value}${dim.unit}`;
+	}
+	#serializeDuration(dur) {
+		return `${dur.value}${dur.unit}`;
+	}
+	#serializeFontFamily(value) {
+		if (Array.isArray(value)) return `[${value.map((v) => v.includes(" ") ? `"${v}"` : v).join(", ")}]`;
+		return value;
+	}
+	#serializeCubicBezier(cb) {
+		return `[${cb.p1x}, ${cb.p1y}, ${cb.p2x}, ${cb.p2y}]`;
+	}
+	#serializeStrokeStyle(value) {
+		if (typeof value === "string") return value;
+		if (value instanceof StrokeStyleObject) return [`dashArray: [${value.dashArray.map((d) => d instanceof TokenReference ? `"${d}"` : this.#serializeDimension(d)).join(", ")}]`, `lineCap: ${value.lineCap}`];
+		return String(value);
+	}
+	#serializeBorder(border) {
+		return [
+			`color: "${this.#serializeColorOrRef(border.color)}"`,
+			`width: ${this.#serializeDimensionOrRef(border.width)}`,
+			`style: ${this.#serializeStrokeStyleInline(border.style)}`
+		];
+	}
+	#serializeTransition(t) {
+		return [
+			`duration: ${this.#serializeDurationOrRef(t.duration)}`,
+			`delay: ${this.#serializeDurationOrRef(t.delay)}`,
+			`timingFunction: ${this.#serializeTimingFunctionOrRef(t.timingFunction)}`
+		];
+	}
+	#serializeShadow(value) {
+		const layers = Array.isArray(value) ? value : [value];
+		if (layers.length === 1) return this.#serializeShadowLayerLines(layers[0]);
+		const result = [];
+		for (const layer of layers) if (layer instanceof TokenReference) result.push(`- "${layer}"`);
+		else {
+			const [first, ...rest] = this.#serializeShadowLayerLines(layer);
+			result.push(`- ${first}`);
+			result.push(...rest.map((l) => `  ${l}`));
+		}
+		return result;
+	}
+	#serializeShadowLayerLines(layer) {
+		const lines = [
+			`color: "${this.#serializeColorOrRef(layer.color)}"`,
+			`offsetX: ${this.#serializeDimensionOrRef(layer.offsetX)}`,
+			`offsetY: ${this.#serializeDimensionOrRef(layer.offsetY)}`,
+			`blur: ${this.#serializeDimensionOrRef(layer.blur)}`,
+			`spread: ${this.#serializeDimensionOrRef(layer.spread)}`
+		];
+		if (layer.inset) lines.push("inset: true");
+		return lines;
+	}
+	#serializeGradient(stops) {
+		const result = [];
+		for (const stop of stops) if (stop instanceof TokenReference) result.push(`- "${stop}"`);
+		else {
+			result.push(`- color: "${this.#serializeColorOrRef(stop.color)}"`);
+			result.push(`  position: ${stop.position instanceof TokenReference ? `"${stop.position}"` : stop.position}`);
+		}
+		return result;
+	}
+	#serializeTypography(typo) {
+		const lines = [];
+		if (typo.fontFamily !== void 0) {
+			const ff = typo.fontFamily instanceof TokenReference ? `"${typo.fontFamily}"` : this.#serializeFontFamily(typo.fontFamily);
+			lines.push(`fontFamily: ${ff}`);
+		}
+		if (typo.fontSize !== void 0) lines.push(`fontSize: ${this.#serializeDimensionOrRef(typo.fontSize)}`);
+		if (typo.fontWeight !== void 0) lines.push(`fontWeight: ${typo.fontWeight instanceof TokenReference ? `"${typo.fontWeight}"` : typo.fontWeight}`);
+		if (typo.letterSpacing !== void 0) lines.push(`letterSpacing: ${this.#serializeDimensionOrRef(typo.letterSpacing)}`);
+		if (typo.lineHeight !== void 0) lines.push(`lineHeight: ${typo.lineHeight instanceof TokenReference ? `"${typo.lineHeight}"` : typo.lineHeight}`);
+		return lines;
+	}
+	#serializeColorOrRef(value) {
+		return value instanceof TokenReference ? value.toString() : this.#serializeColor(value);
+	}
+	#serializeDimensionOrRef(value) {
+		return value instanceof TokenReference ? `"${value}"` : this.#serializeDimension(value);
+	}
+	#serializeDurationOrRef(value) {
+		return value instanceof TokenReference ? `"${value}"` : this.#serializeDuration(value);
+	}
+	#serializeTimingFunctionOrRef(value) {
+		return value instanceof TokenReference ? `"${value}"` : this.#serializeCubicBezier(value);
+	}
+	#serializeStrokeStyleInline(value) {
+		if (typeof value === "string") return value;
+		if (value instanceof TokenReference) return `"${value}"`;
+		if (value instanceof StrokeStyleObject) return `{dashArray: [${value.dashArray.map((d) => d instanceof TokenReference ? `"${d}"` : this.#serializeDimension(d)).join(", ")}], lineCap: ${value.lineCap}}`;
+		return String(value);
+	}
+	#indent(depth) {
+		return "  ".repeat(depth);
+	}
+};
+//#endregion
+//#region src/index.ts
+function createTokenCssConverter() {
+	return new DtcgTokenCssConverter();
+}
+function createTokenHtmlShowcase() {
+	return new TokenHtmlShowcaseBuilder(new DtcgTokenValidator(), new DtcgTokenCssConverter());
+}
+//#endregion
+export { DesignToken, DesignTokens, Dtcg, DtcgJsonReader, DtcgJsonReaderError, DtcgJsonWriter, DtcgList, DtcgSchemaValidator, DtcgTokenCssConverter, DtcgTokenValidator, HrdtTokenReader, HrdtTokenReaderError, HrdtTokenValidator, HrdtTokenWriter, Source, TokenGroup, TokenHtmlShowcaseBuilder, TokenNode, TokenReference, createTokenCssConverter, createTokenHtmlShowcase };