@astryx-vue/core 0.3.0 → 0.4.0

package/dist/Theme-BbDT8B_C.js

@@ -0,0 +1,2125 @@
+import { n as themeContextKey, r as themeNestingKey, t as mediaThemeKey } from "./context-Cws_tXTr.js";
+import { a as syntaxThemeStyle } from "./syntaxTheme-R7xnu5x5.js";
+import { t as syntaxThemeKey } from "./syntaxContext-DmIfNNtb.js";
+import { a as normalizeTokenName, c as parseColor, i as isPortableTokenName, o as prefixTokenReferences, r as bridgeComponentTokens, s as contrastRatio } from "./MediaTheme-DlLqYhDy.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, h, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, renderSlot, unref, useAttrs, useTemplateRef, watch } from "vue";
+import "../styles/theme.css";
+//#region src/Theme/adaptationTypes.ts
+/** Fixed names for viewport-width tier start points. */
+const WIDTH_BREAKPOINT_NAMES = [
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+/** Default width tier start points, in CSS px. */
+const DEFAULT_WIDTH_BREAKPOINTS = Object.freeze({
+	"sm": 640,
+	"md": 768,
+	"lg": 1024,
+	"xl": 1280,
+	"2xl": 1536
+});
+//#endregion
+//#region src/Theme/declarationBoundary.ts
+/**
+* Whether one theme value can be written as exactly one CSS declaration.
+*
+* Theme objects are code, but apps also build them from stored input such as
+* brand colors. A value that closes the rule, opens a block, or ends the
+* declaration early would let one entry write CSS the theme never meant to.
+*
+* The checks follow CSS tokenization, so valid CSS a browser keeps inside one
+* declaration is accepted: a `;` inside a quoted string or a quoted `url()`,
+* an escaped character such as `Gill\ Sans`, and a closed comment. Rejected:
+* a top-level `;`, an unmatched bracket, an unclosed string, comment, or
+* `url(`, and a trailing backslash.
+*
+* Each check returns `null` when the input is safe, or a short reason.
+*/
+function isNewline(ch) {
+	return ch === "\n" || ch === "\r" || ch === "\f";
+}
+function isWhitespace(ch) {
+	return ch === " " || ch === "	" || isNewline(ch);
+}
+function isHexDigit(ch) {
+	return ch != null && /^[0-9a-f]$/i.test(ch);
+}
+function isNameStart(ch) {
+	return ch != null && (/^[a-z_]$/i.test(ch) || ch.charCodeAt(0) >= 128);
+}
+function isNameChar(ch) {
+	return isNameStart(ch) || ch != null && /^[0-9-]$/.test(ch);
+}
+function preprocess(input) {
+	return input.replace(/\r\n?|\f/g, "\n").replace(/\0/g, "�");
+}
+const NON_PRINTABLE = /[\x01-\x08\v\x0E-\x1F\x7F]/;
+function isValidEscape(input, pos) {
+	return input[pos] === "\\" && pos + 1 < input.length && !isNewline(input[pos + 1]);
+}
+function startsIdent(input, pos) {
+	const ch = input[pos];
+	if (ch === "-") {
+		const next = input[pos + 1];
+		return next === "-" || isNameStart(next) || isValidEscape(input, pos + 1);
+	}
+	if (ch === "\\") return isValidEscape(input, pos);
+	return isNameStart(ch);
+}
+/** Index just past an escape whose backslash sits at `pos - 1`. */
+function consumeEscape(input, pos) {
+	if (isHexDigit(input[pos])) {
+		let end = pos;
+		while (end < input.length && end - pos < 6 && isHexDigit(input[end])) end += 1;
+		return isWhitespace(input[end]) ? end + 1 : end;
+	}
+	return pos + ((input.codePointAt(pos) ?? 0) > 65535 ? 2 : 1);
+}
+function consumeIdent(input, pos) {
+	let name = "";
+	let i = pos;
+	while (i < input.length) {
+		const ch = input[i] ?? "";
+		if (isNameChar(ch)) {
+			name += ch;
+			i += 1;
+		} else if (isValidEscape(input, i)) {
+			const end = consumeEscape(input, i + 1);
+			name += input.slice(i + 1, end).trim();
+			i = end;
+		} else break;
+	}
+	return {
+		end: i,
+		name
+	};
+}
+function consumeString(input, pos) {
+	const quote = input[pos];
+	let i = pos + 1;
+	while (i < input.length) {
+		const ch = input[i];
+		if (ch === quote) return { end: i + 1 };
+		if (isNewline(ch)) return { reason: "a newline inside a quoted string makes a bad string" };
+		if (ch === "\\") {
+			if (i + 1 >= input.length) break;
+			i = isNewline(input[i + 1]) ? i + 2 : consumeEscape(input, i + 1);
+			continue;
+		}
+		i += 1;
+	}
+	return { reason: `an unclosed ${quote} string would swallow the rest of the rule` };
+}
+function consumeUrl(input, pos) {
+	let i = pos;
+	while (i < input.length) {
+		const ch = input[i] ?? "";
+		if (ch === ")") return { end: i + 1 };
+		if (isWhitespace(ch)) {
+			while (i < input.length && isWhitespace(input[i])) i += 1;
+			if (i >= input.length) break;
+			if (input[i] === ")") return { end: i + 1 };
+			return { reason: "whitespace inside an unquoted url() makes a bad url" };
+		}
+		if (NON_PRINTABLE.test(ch)) return { reason: "a non-printable character inside url() makes a bad url" };
+		if (ch === "\"" || ch === "'" || ch === "(") return { reason: `"${ch}" inside an unquoted url() makes a bad url; quote the URL instead` };
+		if (ch === "\\") {
+			if (!isValidEscape(input, i)) return { reason: "a stray backslash inside url() makes a bad url" };
+			i = consumeEscape(input, i + 1);
+			continue;
+		}
+		i += 1;
+	}
+	return { reason: "an unclosed url( would swallow the rest of the rule" };
+}
+const CLOSER = {
+	"(": ")",
+	"[": "]",
+	"{": "}"
+};
+const OPENER = {
+	")": "(",
+	"]": "[",
+	"}": "{"
+};
+/** Why `input` cannot be the value of one declaration, or `null` when it can. */
+function checkDeclarationValue(input) {
+	const value = preprocess(input);
+	const open = [];
+	let i = 0;
+	while (i < value.length) {
+		const ch = value[i] ?? "";
+		if (ch === "/" && value[i + 1] === "*") {
+			const close = value.indexOf("*/", i + 2);
+			if (close === -1) return "an unclosed /* comment would swallow the rest of the rule";
+			i = close + 2;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") {
+			const scanned = consumeString(value, i);
+			if ("reason" in scanned) return scanned.reason;
+			i = scanned.end;
+			continue;
+		}
+		if (startsIdent(value, i)) {
+			const ident = consumeIdent(value, i);
+			i = ident.end;
+			if (value[i] === "(" && ident.name.toLowerCase() === "url") {
+				let j = i + 1;
+				while (j < value.length && isWhitespace(value[j])) j += 1;
+				if (value[j] === "\"" || value[j] === "'") {
+					open.push(")");
+					i += 1;
+					continue;
+				}
+				const scanned = consumeUrl(value, j);
+				if ("reason" in scanned) return scanned.reason;
+				i = scanned.end;
+			}
+			continue;
+		}
+		if (ch === "\\") {
+			if (i + 1 >= value.length) return "a trailing backslash would escape the declaration terminator";
+			i = isNewline(value[i + 1]) ? i + 1 : consumeEscape(value, i + 1);
+			continue;
+		}
+		if (ch in CLOSER) {
+			if (ch === "{" && open.length === 0) return "an unquoted \"{\" would open a nested block";
+			open.push(CLOSER[ch] ?? "");
+			i += 1;
+			continue;
+		}
+		if (ch in OPENER) {
+			if (open.length === 0) return ch === "}" ? "an unquoted \"}\" would close the rule" : `an unbalanced "${ch}" has nothing to close`;
+			const expected = open.pop();
+			if (expected !== ch) return `"${ch}" does not close the open "${OPENER[expected ?? ""] ?? ""}"`;
+			i += 1;
+			continue;
+		}
+		if (ch === ";" && open.length === 0) return "an unquoted \";\" would end the declaration";
+		i += 1;
+	}
+	const closer = open[open.length - 1];
+	if (closer != null) return `an unclosed "${OPENER[closer]}" would swallow the rest of the rule`;
+	return null;
+}
+/** Shorten a value for a one-line message. */
+function previewValue(value) {
+	const oneLine = JSON.stringify(value);
+	return oneLine.length > 80 ? `${oneLine.slice(0, 77)}..."` : oneLine;
+}
+/**
+* Report one dropped declaration. The theme keeps every other declaration,
+* so a bad brand color from stored input cannot blank the whole theme.
+*/
+function warnDroppedDeclaration(property, value, location, reason) {
+	if (typeof console === "undefined") return;
+	console.warn(`[astryx theme] dropped "${property}" in ${location}: ${reason} (value: ${previewValue(value)})`);
+}
+/**
+* Why `input` cannot be a declaration's property name, or `null` when it can.
+* A property name is one CSS identifier: `color`, `-webkit-line-clamp`, or a
+* custom property such as `--brand-accent`.
+*/
+function checkDeclarationName(input) {
+	const name = preprocess(input);
+	if (name.length === 0 || !startsIdent(name, 0)) return "a property name must be a CSS identifier";
+	const { end } = consumeIdent(name, 0);
+	if (end !== name.length) return `a property name must be one CSS identifier; "${name[end]}" cannot appear in one`;
+	return null;
+}
+//#endregion
+//#region src/Theme/hct.ts
+const D65_WHITE = [
+	.95047,
+	1,
+	1.08883
+];
+const PALETTE_TONES = [
+	0,
+	5,
+	10,
+	20,
+	30,
+	40,
+	50,
+	60,
+	70,
+	80,
+	90,
+	95,
+	99,
+	100
+];
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function isHexColor(value) {
+	return HEX.test(value.trim());
+}
+function srgbToLinear(channel) {
+	const scaled = channel / 255;
+	return scaled <= .04045 ? scaled / 12.92 : ((scaled + .055) / 1.055) ** 2.4;
+}
+function linearToSrgb(channel) {
+	const scaled = channel <= .0031308 ? channel * 12.92 : 1.055 * channel ** (1 / 2.4) - .055;
+	return Math.round(Math.min(255, Math.max(0, scaled * 255)));
+}
+function linearRgbToXyz(r, g, b) {
+	return [
+		.4124564 * r + .3575761 * g + .1804375 * b,
+		.2126729 * r + .7151522 * g + .072175 * b,
+		.0193339 * r + .119192 * g + .9503041 * b
+	];
+}
+function xyzToLinearRgb(x, y, z) {
+	return [
+		3.2404542 * x - 1.5371385 * y - .4985314 * z,
+		-.969266 * x + 1.8760108 * y + .041556 * z,
+		.0556434 * x - .2040259 * y + 1.0572252 * z
+	];
+}
+function labF(t) {
+	const delta = 6 / 29;
+	return t > delta ** 3 ? Math.cbrt(t) : t / (3 * delta * delta) + 4 / 29;
+}
+function labFInv(t) {
+	const delta = 6 / 29;
+	return t > delta ? t ** 3 : 3 * delta * delta * (t - 4 / 29);
+}
+function xyzToLab(x, y, z) {
+	const fx = labF(x / D65_WHITE[0]);
+	const fy = labF(y / D65_WHITE[1]);
+	const fz = labF(z / D65_WHITE[2]);
+	return [
+		116 * fy - 16,
+		500 * (fx - fy),
+		200 * (fy - fz)
+	];
+}
+function labToXyz(l, a, b) {
+	const fy = (l + 16) / 116;
+	const fx = a / 500 + fy;
+	const fz = fy - b / 200;
+	return [
+		labFInv(fx) * D65_WHITE[0],
+		labFInv(fy) * D65_WHITE[1],
+		labFInv(fz) * D65_WHITE[2]
+	];
+}
+function toneToY(tone) {
+	return labFInv((tone + 16) / 116);
+}
+function formatHex(r, g, b) {
+	return `#${[
+		r,
+		g,
+		b
+	].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`.toUpperCase();
+}
+function parseHexChannels(hex) {
+	const raw = HEX.exec(hex.trim())?.[1];
+	if (!raw) return null;
+	const expanded = raw.length === 3 ? raw.split("").map((part) => part + part).join("") : raw;
+	return [
+		Number.parseInt(expanded.slice(0, 2), 16),
+		Number.parseInt(expanded.slice(2, 4), 16),
+		Number.parseInt(expanded.slice(4, 6), 16)
+	];
+}
+/** Hue 0–360, chroma from 0, tone 0–100. An unreadable hex is black. */
+function hexToHct(hex) {
+	const [r, g, b] = parseHexChannels(hex) ?? [
+		0,
+		0,
+		0
+	];
+	const [x, y, z] = linearRgbToXyz(srgbToLinear(r), srgbToLinear(g), srgbToLinear(b));
+	const [l, a, bLab] = xyzToLab(x, y, z);
+	let hue = Math.atan2(bLab, a) * 180 / Math.PI;
+	if (hue < 0) hue += 360;
+	return {
+		hue,
+		chroma: Math.sqrt(a * a + bLab * bLab),
+		tone: Math.max(0, Math.min(100, l))
+	};
+}
+function toneToGray(tone) {
+	return linearToSrgb(toneToY(tone));
+}
+function hctComponentToHex(hue, chroma, tone) {
+	const hueRad = hue * Math.PI / 180;
+	const [x, y, z] = labToXyz(tone, Math.cos(hueRad) * chroma, Math.sin(hueRad) * chroma);
+	const [linearR, linearG, linearB] = xyzToLinearRgb(x, y, z);
+	const r = linearToSrgb(linearR);
+	const g = linearToSrgb(linearG);
+	const bOut = linearToSrgb(linearB);
+	const tolerance = .02;
+	if (Math.abs(srgbToLinear(r) - linearR) > tolerance || Math.abs(srgbToLinear(g) - linearG) > tolerance || Math.abs(srgbToLinear(bOut) - linearB) > tolerance || r < 0 || r > 255 || g < 0 || g > 255 || bOut < 0 || bOut > 255) return null;
+	return formatHex(r, g, bOut);
+}
+/** Fit chroma down until the color is inside sRGB. */
+function hctToHex(hct) {
+	const { hue, chroma, tone } = hct;
+	if (tone <= 0) return "#000000";
+	if (tone >= 100) return "#FFFFFF";
+	if (chroma < .5) {
+		const gray = toneToGray(tone);
+		return formatHex(gray, gray, gray);
+	}
+	let low = 0;
+	let high = chroma;
+	let best = "#000000";
+	for (let step = 0; step < 16; step += 1) {
+		const mid = (low + high) / 2;
+		const candidate = hctComponentToHex(hue, mid, tone);
+		if (candidate != null) {
+			best = candidate;
+			low = mid;
+		} else high = mid;
+	}
+	return best;
+}
+/** Hex stops at the standard tones for one hue and chroma. */
+function tonalPalette(hue, chroma) {
+	const palette = {};
+	for (const tone of PALETTE_TONES) palette[tone] = hctToHex({
+		hue,
+		chroma,
+		tone
+	});
+	return palette;
+}
+/** `#RRGGBB` plus an alpha byte, for example `0.1` becomes `1A`. */
+function hexWithAlpha(hex, alpha) {
+	return `${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0").toUpperCase()}`;
+}
+//#endregion
+//#region src/Theme/expandColorScale.ts
+const NEUTRAL_CHROMA = {
+	warm: 7,
+	cool: 5,
+	neutral: 3
+};
+const NEUTRAL_VARIANT_CHROMA = {
+	warm: 10,
+	cool: 8,
+	neutral: 6
+};
+/** Hue source when `accent` is omitted. Accent tokens themselves stay unset. */
+const DEFAULT_ACCENT_SEED = "#0064E0";
+const NON_TEXT_MIN_CONTRAST = 3;
+function lightDark(light, dark) {
+	return `light-dark(${light}, ${dark})`;
+}
+function accentWithAlpha(alpha) {
+	return `color-mix(in srgb, var(--color-accent) ${alpha * 100}%, transparent)`;
+}
+function ratio(foreground, background) {
+	const fg = parseColor(foreground);
+	const bg = parseColor(background);
+	if (!fg || !bg) return 1;
+	return contrastRatio(fg, bg);
+}
+/**
+* Walk tone until the color reaches `minRatio` against `background`.
+* Tone is Lab lightness, so each step moves luminance in one direction.
+*/
+function ensureContrastTone(hue, chroma, startTone, step, background, minRatio) {
+	let tone = startTone;
+	let hex = hctToHex({
+		hue,
+		chroma,
+		tone
+	});
+	while (ratio(hex, background) < minRatio && tone + step >= 0 && tone + step <= 100) {
+		tone += step;
+		hex = hctToHex({
+			hue,
+			chroma,
+			tone
+		});
+	}
+	return hex;
+}
+function assertAccent(value, which) {
+	if (!isHexColor(value)) throw new Error(`Theme color ${which} must be a hex color such as #0064E0.`);
+}
+function seedPair(accent) {
+	if (accent == null) return [DEFAULT_ACCENT_SEED, DEFAULT_ACCENT_SEED];
+	if (typeof accent === "string") {
+		assertAccent(accent, "accent");
+		return [accent, accent];
+	}
+	const [light, dark] = accent;
+	assertAccent(light, "accent light stop");
+	assertAccent(dark, "accent dark stop");
+	return [light, dark];
+}
+/**
+* Semantic color tokens derived from an accent.
+*
+* Status colors, chart colors, and on-dark / on-light stay out of this map.
+* `--color-accent-muted`, `--color-text-accent`, and `--color-icon-accent`
+* point at `var(--color-accent)`. `--color-on-accent` is baked from the seed,
+* because the contrast pick cannot be expressed as a CSS reference.
+*
+* Names are the upstream names. `defineTheme()` adds the `--astryx-` prefix.
+*/
+function expandColorScale(config = {}) {
+	const { accent, neutralStyle = "cool", contrast = "standard" } = config;
+	const [lightAccent, darkAccent] = seedPair(accent);
+	const lightSeed = hexToHct(lightAccent);
+	const sameSeed = darkAccent.toLowerCase() === lightAccent.toLowerCase();
+	const darkSeed = sameSeed ? lightSeed : hexToHct(darkAccent);
+	const neutralChroma = NEUTRAL_CHROMA[neutralStyle] ?? 5;
+	const neutralVariantChroma = NEUTRAL_VARIANT_CHROMA[neutralStyle] ?? 8;
+	const accentLight = tonalPalette(lightSeed.hue, Math.max(lightSeed.chroma, 48));
+	const neutralLight = tonalPalette(lightSeed.hue, neutralChroma);
+	const neutralVariantLight = tonalPalette(lightSeed.hue, neutralVariantChroma);
+	const accentDark = sameSeed ? accentLight : tonalPalette(darkSeed.hue, Math.max(darkSeed.chroma, 48));
+	const neutralDark = sameSeed ? neutralLight : tonalPalette(darkSeed.hue, neutralChroma);
+	const neutralVariantDark = sameSeed ? neutralVariantLight : tonalPalette(darkSeed.hue, neutralVariantChroma);
+	const high = contrast === "high";
+	const textPrimaryLight = high ? 0 : 10;
+	const textPrimaryDark = high ? 99 : 90;
+	const textSecondaryLight = high ? 20 : 30;
+	const textSecondaryDark = high ? 80 : 70;
+	const borderAlpha = high ? .2 : .1;
+	const borderEmphasized = lightDark(ensureContrastTone(lightSeed.hue, neutralVariantChroma, high ? 50 : 70, -1, neutralLight[99] ?? "#FFFFFF", NON_TEXT_MIN_CONTRAST), ensureContrastTone(darkSeed.hue, neutralVariantChroma, high ? 50 : 30, 1, neutralDark[10] ?? "#000000", NON_TEXT_MIN_CONTRAST));
+	return {
+		...accent != null ? {
+			"--color-accent": lightDark(accentLight[40] ?? "#000000", accentDark[80] ?? "#FFFFFF"),
+			"--color-accent-muted": lightDark(accentWithAlpha(.2), accentWithAlpha(.25)),
+			"--color-on-accent": lightDark(accentLight[100] ?? "#FFFFFF", accentDark[20] ?? "#000000")
+		} : {},
+		"--color-neutral": lightDark(hexWithAlpha(neutralLight[10] ?? "#000000", .1), hexWithAlpha(neutralDark[90] ?? "#FFFFFF", .2)),
+		"--color-background-surface": lightDark(neutralLight[99] ?? "#FFFFFF", neutralDark[10] ?? "#000000"),
+		"--color-background-body": lightDark(neutralLight[95] ?? "#FFFFFF", neutralDark[5] ?? "#000000"),
+		"--color-overlay": lightDark(hexWithAlpha(neutralLight[10] ?? "#000000", .4), hexWithAlpha(neutralDark[10] ?? "#000000", .6)),
+		"--color-overlay-hover": lightDark(hexWithAlpha(neutralLight[10] ?? "#000000", .05), hexWithAlpha(neutralDark[100] ?? "#FFFFFF", .05)),
+		"--color-overlay-pressed": lightDark(hexWithAlpha(neutralLight[10] ?? "#000000", .1), hexWithAlpha(neutralDark[100] ?? "#FFFFFF", .1)),
+		"--color-background-muted": lightDark(hexWithAlpha(neutralLight[10] ?? "#000000", .05), hexWithAlpha(neutralDark[10] ?? "#000000", .5)),
+		"--color-text-primary": lightDark(neutralLight[textPrimaryLight] ?? "#000000", neutralDark[textPrimaryDark] ?? "#FFFFFF"),
+		"--color-text-secondary": lightDark(neutralVariantLight[textSecondaryLight] ?? "#000000", neutralVariantDark[textSecondaryDark] ?? "#FFFFFF"),
+		"--color-text-disabled": lightDark(neutralVariantLight[60] ?? "#000000", neutralVariantDark[40] ?? "#FFFFFF"),
+		"--color-text-accent": "var(--color-accent)",
+		"--color-icon-accent": "var(--color-accent)",
+		"--color-icon-primary": lightDark(neutralLight[textPrimaryLight] ?? "#000000", neutralDark[textPrimaryDark] ?? "#FFFFFF"),
+		"--color-icon-secondary": lightDark(neutralVariantLight[textSecondaryLight] ?? "#000000", neutralVariantDark[textSecondaryDark] ?? "#FFFFFF"),
+		"--color-icon-disabled": lightDark(neutralVariantLight[60] ?? "#000000", neutralVariantDark[40] ?? "#FFFFFF"),
+		"--color-background-card": lightDark(neutralLight[99] ?? "#FFFFFF", neutralDark[10] ?? "#000000"),
+		"--color-background-popover": lightDark(neutralLight[99] ?? "#FFFFFF", neutralDark[20] ?? "#000000"),
+		"--color-background-inverted": lightDark(neutralLight[10] ?? "#000000", neutralDark[99] ?? "#FFFFFF"),
+		"--color-border": lightDark(hexWithAlpha(neutralLight[10] ?? "#000000", borderAlpha), hexWithAlpha(neutralDark[95] ?? "#FFFFFF", borderAlpha)),
+		"--color-border-emphasized": borderEmphasized,
+		"--color-skeleton": lightDark(neutralVariantLight[70] ?? "#000000", neutralVariantDark[30] ?? "#FFFFFF"),
+		"--color-track": lightDark(neutralVariantLight[70] ?? "#000000", neutralVariantDark[30] ?? "#FFFFFF"),
+		"--color-shadow": lightDark(hexWithAlpha(neutralLight[0] ?? "#000000", .1), hexWithAlpha(neutralDark[0] ?? "#000000", .3)),
+		"--color-tint-hover": lightDark("black", "white")
+	};
+}
+//#endregion
+//#region src/Theme/expandMotionScale.ts
+function assertMotion(config) {
+	for (const [label, value] of [
+		["fast", config.fast],
+		["medium", config.medium],
+		["slow", config.slow]
+	]) {
+		if (value == null) continue;
+		if (!Number.isFinite(value) || value < 0) throw new Error(`Theme motion ${label} must be a non-negative number of milliseconds.`);
+	}
+	if (!Number.isFinite(config.ratio) || config.ratio <= 0 || config.ratio > 1) throw new Error("Theme motion ratio must be greater than 0 and at most 1.");
+	if (config.easing != null && /[;{}<>\n\r]/.test(config.easing)) throw new Error("Theme motion easing has an unsupported value.");
+}
+function roundMs(ms) {
+	return Math.round(ms / 5) * 5;
+}
+/** `--duration-*` and an optional `--ease-standard`. */
+function expandMotionScale(config) {
+	assertMotion(config);
+	const { fast, medium, slow, ratio, easing } = config;
+	const tokens = {
+		"--duration-fast-min": `${roundMs(fast * ratio)}ms`,
+		"--duration-fast": `${roundMs(fast)}ms`,
+		"--duration-fast-max": `${roundMs(fast / ratio)}ms`,
+		"--duration-medium-min": `${roundMs(medium * ratio)}ms`,
+		"--duration-medium": `${roundMs(medium)}ms`,
+		"--duration-medium-max": `${roundMs(medium / ratio)}ms`
+	};
+	if (slow != null) {
+		tokens["--duration-slow-min"] = `${roundMs(slow * ratio)}ms`;
+		tokens["--duration-slow"] = `${roundMs(slow)}ms`;
+		tokens["--duration-slow-max"] = `${roundMs(slow / ratio)}ms`;
+	}
+	if (easing) tokens["--ease-standard"] = easing;
+	return tokens;
+}
+//#endregion
+//#region src/Theme/expandRadiusScale.ts
+function assertRadius(config) {
+	if (!Number.isFinite(config.base) || config.base < 0) throw new Error("Theme radius base must be a non-negative number of pixels.");
+	if (!Number.isFinite(config.multiplier) || config.multiplier < 0) throw new Error("Theme radius multiplier must be a non-negative number.");
+}
+/** `--radius-*` tokens. Names are unprefixed; `defineTheme()` adds `--astryx-`. */
+function expandRadiusScale(config) {
+	assertRadius(config);
+	const { base, multiplier } = config;
+	const step = (factor) => `${Math.round(base * factor * multiplier)}px`;
+	return {
+		"--radius-none": "0px",
+		"--radius-inner": step(1),
+		"--radius-element": step(2),
+		"--radius-container": step(3),
+		"--radius-page": step(7),
+		"--radius-chat": step(7),
+		"--radius-full": "9999px"
+	};
+}
+//#endregion
+//#region src/Theme/expandTypeScale.ts
+const STEP_TO_SIZE_TOKEN = {
+	[-5]: "--font-size-4xs",
+	[-4]: "--font-size-3xs",
+	[-3]: "--font-size-2xs",
+	[-2]: "--font-size-xs",
+	[-1]: "--font-size-sm",
+	0: "--font-size-base",
+	1: "--font-size-lg",
+	2: "--font-size-xl",
+	3: "--font-size-2xl",
+	4: "--font-size-3xl",
+	5: "--font-size-4xl",
+	6: "--font-size-5xl"
+};
+const HEADING_STEPS = {
+	1: 3,
+	2: 2,
+	3: 1,
+	4: 0,
+	5: -1,
+	6: -2
+};
+const TEXT_STEPS = {
+	"body": 0,
+	"large": 1,
+	"label": 0,
+	"code": 0,
+	"supporting": -1,
+	"display-1": 6,
+	"display-2": 5,
+	"display-3": 4
+};
+const DEFAULT_HEADING_WEIGHTS = {
+	1: "var(--font-weight-semibold)",
+	2: "var(--font-weight-semibold)",
+	3: "var(--font-weight-semibold)",
+	4: "var(--font-weight-semibold)",
+	5: "var(--font-weight-semibold)",
+	6: "var(--font-weight-semibold)"
+};
+const DEFAULT_TEXT_WEIGHTS = {
+	"body": "var(--font-weight-normal)",
+	"large": "var(--font-weight-semibold)",
+	"label": "var(--font-weight-medium)",
+	"code": "var(--font-weight-normal)",
+	"supporting": "var(--font-weight-normal)",
+	"display-1": "var(--font-weight-normal)",
+	"display-2": "var(--font-weight-normal)",
+	"display-3": "var(--font-weight-normal)"
+};
+const TEXT_FONT_FAMILIES = {
+	"body": "var(--font-family-body)",
+	"large": "var(--font-family-body)",
+	"label": "var(--font-family-body)",
+	"code": "var(--font-family-code)",
+	"supporting": "var(--font-family-body)",
+	"display-1": "var(--font-family-heading)",
+	"display-2": "var(--font-family-heading)",
+	"display-3": "var(--font-family-heading)"
+};
+function assertScale(config) {
+	if (!Number.isFinite(config.base) || config.base <= 0) throw new Error("Theme type scale base must be a positive number of pixels.");
+	if (!Number.isFinite(config.ratio) || config.ratio <= 0) throw new Error("Theme type scale ratio must be a positive number.");
+}
+function computeSize(base, ratio, step) {
+	return Math.round(base * ratio ** step);
+}
+function pxToRem(px) {
+	return `${Math.round(px / 16 * 1e4) / 1e4}rem`;
+}
+/** Under 20px uses 1.5, under 32px uses 1.4, and the rest uses 1.25. */
+function targetLeadingRatio(fontSize) {
+	if (fontSize < 20) return 1.5;
+	if (fontSize < 32) return 1.4;
+	return 1.25;
+}
+function computeLeading(fontSize) {
+	const raw = fontSize * targetLeadingRatio(fontSize);
+	const snapped = Math.max(Math.round(raw / 4) * 4, Math.ceil((fontSize + 4) / 4) * 4);
+	return Math.round(snapped / fontSize * 1e4) / 1e4;
+}
+/**
+* Raw `--font-size-*` steps, then heading and text roles.
+*
+* Sizes on the roles point at the raw steps with `var()`. Line heights are
+* unitless ratios snapped onto a 4px grid. Weights point at `--font-weight-*`.
+*/
+function expandTypeScale(config) {
+	assertScale(config);
+	const { base, ratio, weights } = config;
+	const tokens = {};
+	const headingWeights = {
+		...DEFAULT_HEADING_WEIGHTS,
+		...weights?.heading
+	};
+	const textWeights = {
+		...DEFAULT_TEXT_WEIGHTS,
+		...weights?.text
+	};
+	for (let step = -5; step <= 6; step += 1) {
+		const name = STEP_TO_SIZE_TOKEN[step];
+		if (name) tokens[name] = pxToRem(computeSize(base, ratio, step));
+	}
+	for (const level of [
+		1,
+		2,
+		3,
+		4,
+		5,
+		6
+	]) {
+		const step = HEADING_STEPS[level] ?? 0;
+		const size = computeSize(base, ratio, step);
+		const sizeToken = STEP_TO_SIZE_TOKEN[step];
+		tokens[`--text-heading-${level}-size`] = `var(${sizeToken})`;
+		tokens[`--text-heading-${level}-weight`] = headingWeights[level] ?? "var(--font-weight-semibold)";
+		tokens[`--text-heading-${level}-leading`] = `${computeLeading(size)}`;
+	}
+	for (const [type, step] of Object.entries(TEXT_STEPS)) {
+		const size = computeSize(base, ratio, step);
+		tokens[`--text-${type}-size`] = `var(${STEP_TO_SIZE_TOKEN[step]})`;
+		tokens[`--text-${type}-weight`] = textWeights[type] ?? DEFAULT_TEXT_WEIGHTS[type] ?? "var(--font-weight-normal)";
+		tokens[`--text-${type}-leading`] = `${computeLeading(size)}`;
+	}
+	return tokens;
+}
+/**
+* Heading and text rules that read the generated tokens.
+*
+* `type:display-*` is emitted after `level:*` so display sizing wins when a
+* heading carries both classes.
+*/
+function generateTypeScaleComponents() {
+	const heading = {};
+	for (const level of [
+		1,
+		2,
+		3,
+		4,
+		5,
+		6
+	]) heading[`level:${level}`] = {
+		fontFamily: "var(--font-family-heading)",
+		fontSize: `var(--text-heading-${level}-size)`,
+		fontWeight: `var(--text-heading-${level}-weight)`,
+		lineHeight: `var(--text-heading-${level}-leading)`
+	};
+	for (const type of [
+		"display-1",
+		"display-2",
+		"display-3"
+	]) heading[`type:${type}`] = {
+		fontFamily: "var(--font-family-heading)",
+		fontSize: `var(--text-${type}-size)`,
+		lineHeight: `var(--text-${type}-leading)`
+	};
+	const text = {};
+	for (const type of [
+		"body",
+		"large",
+		"label",
+		"code",
+		"supporting",
+		"display-1",
+		"display-2",
+		"display-3"
+	]) text[`type:${type}`] = {
+		fontFamily: TEXT_FONT_FAMILIES[type] ?? "var(--font-family-body)",
+		fontSize: `var(--text-${type}-size)`,
+		lineHeight: `var(--text-${type}-leading)`
+	};
+	return {
+		heading,
+		text
+	};
+}
+//#endregion
+//#region src/Theme/typography.ts
+const NAMED_WEIGHTS = {
+	normal: "var(--font-weight-normal)",
+	regular: "var(--font-weight-normal)",
+	medium: "var(--font-weight-medium)",
+	semibold: "var(--font-weight-semibold)",
+	bold: "var(--font-weight-bold)"
+};
+function weightToken(value) {
+	return NAMED_WEIGHTS[value.trim()] ?? value;
+}
+function quoteFamily(family) {
+	const trimmed = family.trim();
+	if (trimmed.startsWith("\"") || trimmed.startsWith("'")) return trimmed;
+	if (/[^a-z0-9-]/i.test(trimmed)) return `"${trimmed.replace(/"/g, "")}"`;
+	return trimmed;
+}
+function fontStack(role) {
+	if (!role?.family && !role?.fallbacks) return void 0;
+	const family = role.family ? quoteFamily(role.family) : void 0;
+	if (family && role.fallbacks) return `${family}, ${role.fallbacks}`;
+	return family ?? role.fallbacks;
+}
+function headingSizeAliases(tokens) {
+	const aliases = {};
+	for (let level = 1; level <= 6; level += 1) {
+		const size = `--text-heading-${level}-size`;
+		if (tokens[size]) aliases[`--heading-level-${level}-size`] = `var(${size})`;
+	}
+	for (const step of [
+		1,
+		2,
+		3
+	]) {
+		const size = `--text-display-${step}-size`;
+		if (tokens[size]) aliases[`--heading-display-${step}-size`] = `var(${size})`;
+	}
+	return aliases;
+}
+function assignHeadingWeight(heading, level, weight) {
+	if (level >= 1 && level <= 6) heading[level] = weightToken(weight);
+}
+function scaleConfig(config) {
+	const scale = config.scale;
+	if (!scale) throw new Error("Theme typography scale is missing.");
+	const heading = {};
+	if (config.heading?.weight) {
+		const weight = weightToken(config.heading.weight);
+		for (const level of [
+			1,
+			2,
+			3,
+			4,
+			5,
+			6
+		]) heading[level] = weight;
+	}
+	for (const [level, weight] of Object.entries(config.heading?.weights ?? {})) if (weight) assignHeadingWeight(heading, Number(level), weight);
+	for (const [level, weight] of Object.entries(scale.weights?.heading ?? {})) if (weight) assignHeadingWeight(heading, Number(level), weight);
+	const text = {};
+	if (config.body?.weight) text.body = weightToken(config.body.weight);
+	if (config.code?.weight) text.code = weightToken(config.code.weight);
+	for (const [name, weight] of Object.entries(scale.weights?.text ?? {})) if (weight) text[name] = weightToken(weight);
+	return {
+		base: scale.base,
+		ratio: scale.ratio,
+		weights: {
+			heading,
+			text
+		}
+	};
+}
+/**
+* Font stacks, the type scale, and the heading size aliases Heading reads.
+* Heading inherits the body stack when it does not name its own.
+*/
+function resolveTypography(config) {
+	if (!config) return { tokens: {} };
+	const tokens = {};
+	const bodyStack = fontStack(config.body);
+	const headingStack = fontStack(config.heading) ?? bodyStack;
+	const codeStack = fontStack(config.code);
+	if (bodyStack) tokens["--font-family-body"] = bodyStack;
+	if (headingStack) tokens["--font-family-heading"] = headingStack;
+	if (codeStack) tokens["--font-family-code"] = codeStack;
+	const components = {};
+	if (config.scale) {
+		Object.assign(tokens, expandTypeScale(scaleConfig(config)));
+		Object.assign(tokens, headingSizeAliases(tokens));
+		Object.assign(components, generateTypeScaleComponents());
+	}
+	if (fontStack(config.heading)) components.heading = {
+		...components.heading,
+		base: {
+			fontFamily: "var(--font-family-heading)",
+			...components.heading?.base
+		}
+	};
+	if (codeStack) components.text = {
+		...components.text,
+		"type:code": {
+			fontFamily: "var(--font-family-code)",
+			...components.text?.["type:code"]
+		}
+	};
+	return {
+		tokens,
+		...Object.keys(components).length > 0 ? { components } : {}
+	};
+}
+//#endregion
+//#region src/Theme/resolveThemeValues.ts
+function isTokenPair(value) {
+	return Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
+}
+/**
+* One token value as CSS. A string is used as written and a `[light, dark]`
+* tuple becomes `light-dark()`. Anything else is not a token value.
+*/
+function tokenValueToCss(value, path) {
+	if (typeof value === "string") return prefixTokenReferences(value);
+	if (isTokenPair(value)) return prefixTokenReferences(`light-dark(${value[0]}, ${value[1]})`);
+	throw new Error(`${path} must be a CSS string or a [light, dark] string tuple.`);
+}
+/**
+* Write a token map with the `--astryx-` prefix.
+*
+* A name or value that cannot stay one CSS declaration is dropped with a
+* warning, and the rest of the theme still applies.
+*/
+function resolveTokenMap(tokens, location) {
+	const resolved = {};
+	for (const [name, value] of Object.entries(tokens ?? {})) {
+		if (value == null) continue;
+		const key = normalizeTokenName(name);
+		const css = tokenValueToCss(value, `${location}["${name}"]`);
+		const reason = checkDeclarationName(key) ?? checkDeclarationValue(css);
+		if (reason != null) {
+			warnDroppedDeclaration(key, css, location, reason);
+			continue;
+		}
+		resolved[key] = css;
+	}
+	return resolved;
+}
+/**
+* Merge component maps. `next` wins per style key and per property, so a
+* child that restates one property of `button.base` keeps the rest.
+*/
+function mergeComponentMaps(base, next) {
+	if (base == null) return next;
+	if (next == null) return base;
+	const merged = {};
+	for (const [component, rules] of Object.entries(base)) merged[component] = { ...rules };
+	for (const [component, rules] of Object.entries(next)) {
+		const target = merged[component] ?? {};
+		for (const [key, styles] of Object.entries(rules)) target[key] = {
+			...target[key],
+			...styles
+		};
+		merged[component] = target;
+	}
+	return merged;
+}
+/**
+* Expand the generator axes, then lay explicit `tokens` over the result.
+* Explicit tokens win token by token. Authored component styles win over
+* the generated type-scale rules property by property.
+*/
+function resolveThemeValues(input, location) {
+	const typography = resolveTypography(input.typography);
+	return {
+		tokens: {
+			...resolveTokenMap({
+				...input.color ? expandColorScale(input.color) : {},
+				...typography.tokens,
+				...input.radius ? expandRadiusScale(input.radius) : {},
+				...input.motion ? expandMotionScale(input.motion) : {}
+			}, `${location}generated`),
+			...resolveTokenMap(input.tokens, `${location}tokens`)
+		},
+		components: mergeComponentMaps(typography.components, input.components)
+	};
+}
+//#endregion
+//#region src/Theme/localTokens.ts
+const CUSTOM_PROPERTY_NAME = /^--[\w-]+$/;
+const VAR_REFERENCE = /var\(\s*(--[\w-]+)/g;
+function references(value) {
+	return [...value.matchAll(VAR_REFERENCE)].map((match) => match[1] ?? "");
+}
+/** A readable loop inside one strongly connected group, starting at `start`. */
+function cyclePath(start, group, edges) {
+	const path = [start];
+	const seen = new Set(path);
+	const search = (name) => {
+		for (const next of edges.get(name) ?? []) {
+			if (!group.has(next)) continue;
+			if (next === start) {
+				path.push(start);
+				return true;
+			}
+			if (seen.has(next)) continue;
+			path.push(next);
+			seen.add(next);
+			if (search(next)) return true;
+			path.pop();
+		}
+		return false;
+	};
+	search(start);
+	return path;
+}
+/**
+* Throw when values in `tokens` reference each other in a loop.
+*
+* A loop makes every token on it invalid at computed-value time, so the
+* theme would silently lose those values. `relevant` limits the report to
+* loops whose strongly connected group holds at least one of those names,
+* so a loop that was already in the root theme is not blamed on a rule.
+*/
+function assertNoTokenCycles(tokens, context, relevant) {
+	const edges = /* @__PURE__ */ new Map();
+	for (const [name, value] of Object.entries(tokens)) edges.set(name, references(value).filter((next) => Object.hasOwn(tokens, next)));
+	let counter = 0;
+	const index = /* @__PURE__ */ new Map();
+	const low = /* @__PURE__ */ new Map();
+	const stack = [];
+	const onStack = /* @__PURE__ */ new Set();
+	const visit = (name) => {
+		const own = counter++;
+		index.set(name, own);
+		low.set(name, own);
+		stack.push(name);
+		onStack.add(name);
+		for (const next of edges.get(name) ?? []) if (!index.has(next)) {
+			visit(next);
+			low.set(name, Math.min(low.get(name) ?? own, low.get(next) ?? own));
+		} else if (onStack.has(next)) low.set(name, Math.min(low.get(name) ?? own, index.get(next) ?? own));
+		if (low.get(name) !== own) return;
+		const group = [];
+		let member;
+		do {
+			member = stack.pop();
+			if (member === void 0) break;
+			onStack.delete(member);
+			group.push(member);
+		} while (member !== name);
+		if (!(group.length > 1 || (edges.get(name) ?? []).includes(name)) || relevant && !group.some((item) => relevant.has(item))) return;
+		const start = group.find((item) => relevant?.has(item)) ?? name;
+		throw new Error(`${context}: theme token cycle detected: ${cyclePath(start, new Set(group), edges).join(" -> ")}.`);
+	};
+	for (const name of Object.keys(tokens)) if (!index.has(name)) visit(name);
+}
+/**
+* Resolve `localTokens` for one theme.
+*
+* Names are kept exactly as written: a theme-local token is the theme
+* family's own vocabulary, not a shared token, so no prefix is added.
+* A child theme inherits its base's local tokens and may replace their
+* values; the first theme to declare a name stays its owner.
+*
+* Refused:
+* - a name that is not a custom property;
+* - a shared token name such as `--color-accent` or `--astryx-spacing-4`,
+*   because components already read that name with a fixed meaning;
+* - a name the theme also sets through `tokens`;
+* - a reference cycle among the local tokens.
+*/
+function resolveLocalTokens(themeName, declarations, base, portableTokens) {
+	if (declarations === void 0 && base?.localTokens === void 0) return void 0;
+	if (declarations !== void 0 && (declarations === null || typeof declarations !== "object" || Array.isArray(declarations))) throw new Error(`defineTheme("${themeName}"): localTokens must be a token map.`);
+	const localTokens = { ...base?.localTokens };
+	const owners = { ...base?.localTokenOwners };
+	for (const [name, value] of Object.entries(declarations ?? {})) {
+		const path = `defineTheme("${themeName}").localTokens["${name}"]`;
+		if (!CUSTOM_PROPERTY_NAME.test(name)) throw new Error(`${path}: a local token name must be a CSS custom property such as --brand-ink.`);
+		if (isPortableTokenName(name)) throw new Error(`${path}: "${name}" is a shared theme token. Set it through tokens, or pick a name outside the shared vocabulary.`);
+		const css = tokenValueToCss(value, path);
+		const reason = checkDeclarationValue(css);
+		if (reason != null) throw new Error(`${path}: ${reason}.`);
+		localTokens[name] = css;
+		owners[name] ??= themeName;
+	}
+	for (const name of Object.keys(localTokens)) if (Object.hasOwn(portableTokens, name)) throw new Error(`defineTheme("${themeName}"): token "${name}" cannot be declared in both tokens and localTokens.`);
+	assertNoTokenCycles(localTokens, `defineTheme("${themeName}").localTokens`);
+	return {
+		localTokens,
+		owners
+	};
+}
+/**
+* Resolve the local-token writes of one adaptation rule.
+*
+* A rule may give a new value to a name the root theme lineage declared. It
+* cannot introduce a name of its own.
+*/
+function resolveAdaptationLocalTokens(path, declarations, rootLocalTokens) {
+	if (declarations === void 0) return void 0;
+	const resolved = {};
+	for (const [name, value] of Object.entries(declarations)) {
+		if (!rootLocalTokens || !Object.hasOwn(rootLocalTokens, name)) throw new Error(`${path}["${name}"] cannot add a theme-local token. Declare it in the root theme or a theme it extends first.`);
+		const css = tokenValueToCss(value, `${path}["${name}"]`);
+		const reason = checkDeclarationValue(css);
+		if (reason != null) throw new Error(`${path}["${name}"]: ${reason}.`);
+		resolved[name] = css;
+	}
+	return Object.keys(resolved).length > 0 ? resolved : void 0;
+}
+//#endregion
+//#region src/Theme/adaptations.ts
+const BREAKPOINT_NAMES = new Set(WIDTH_BREAKPOINT_NAMES);
+const CONDITION_KEYS = /* @__PURE__ */ new Set([
+	"width",
+	"pointer",
+	"contrast",
+	"motion"
+]);
+const VALUE_KEYS = /* @__PURE__ */ new Set([
+	"typography",
+	"color",
+	"radius",
+	"motion",
+	"tokens",
+	"localTokens",
+	"components"
+]);
+const CONDITION_VALUES = {
+	pointer: ["coarse", "fine"],
+	contrast: [
+		"more",
+		"less",
+		"no-preference"
+	],
+	motion: ["reduce", "no-preference"]
+};
+function isRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function assertRecord(value, path, allowed) {
+	if (!isRecord(value)) throw new Error(`${path} must be an object.`);
+	for (const key of Object.keys(value)) if (allowed && !allowed.has(key)) throw new Error(`${path}.${key} is not supported.`);
+}
+function normalizeBreakpoints(value, path) {
+	assertRecord(value, path, BREAKPOINT_NAMES);
+	const points = {};
+	for (const name of WIDTH_BREAKPOINT_NAMES) {
+		const point = value[name];
+		if (point === void 0) continue;
+		if (typeof point !== "number" || !Number.isFinite(point) || point <= 0) throw new Error(`${path}.${name} must be a finite positive number of CSS pixels.`);
+		points[name] = point;
+	}
+	return points;
+}
+function normalizeCondition(value, path) {
+	assertRecord(value, path, CONDITION_KEYS);
+	const defined = Object.fromEntries(Object.entries(value).filter(([, nested]) => nested !== void 0));
+	if (Object.keys(defined).length === 0) throw new Error(`${path} must contain at least one condition.`);
+	if (defined.width !== void 0) {
+		assertRecord(defined.width, `${path}.width`, /* @__PURE__ */ new Set(["from", "below"]));
+		const { from, below } = defined.width;
+		if (from === void 0 && below === void 0) throw new Error(`${path}.width must contain \`from\`, \`below\`, or both.`);
+		for (const [edge, name] of [["from", from], ["below", below]]) if (name !== void 0 && (typeof name !== "string" || !BREAKPOINT_NAMES.has(name))) throw new Error(`${path}.width.${edge} must be one of ${WIDTH_BREAKPOINT_NAMES.join(", ")}.`);
+	}
+	for (const [key, allowed] of Object.entries(CONDITION_VALUES)) {
+		const field = defined[key];
+		if (field !== void 0 && !allowed.includes(field)) throw new Error(`${path}.${key} must be ${allowed.map((item) => `'${item}'`).join(" or ")}.`);
+	}
+	return structuredClone(defined);
+}
+function normalizeRule(value, path) {
+	assertRecord(value, path, /* @__PURE__ */ new Set(["when", "value"]));
+	if (!Object.hasOwn(value, "when")) throw new Error(`${path}.when is required.`);
+	if (!Object.hasOwn(value, "value")) throw new Error(`${path}.value is required.`);
+	assertRecord(value.value, `${path}.value`, VALUE_KEYS);
+	for (const key of VALUE_KEYS) {
+		const nested = value.value[key];
+		if (nested !== void 0 && !isRecord(nested)) throw new Error(`${path}.value.${key} must be an object.`);
+	}
+	return {
+		when: normalizeCondition(value.when, `${path}.when`),
+		value: structuredClone(value.value)
+	};
+}
+/**
+* Validate adaptations and append them to the inherited ones.
+*
+* Width points merge over the inherited map and must strictly increase.
+* Inherited rules come first, so a child's rules win when both match.
+*/
+function normalizeThemeAdaptations(themeName, inherited, input) {
+	const path = `defineTheme("${themeName}").adaptations`;
+	let points = {};
+	let rules = [];
+	if (input !== void 0) {
+		assertRecord(input, path, /* @__PURE__ */ new Set(["widthBreakpoints", "rules"]));
+		if (input.widthBreakpoints !== void 0) points = normalizeBreakpoints(input.widthBreakpoints, `${path}.widthBreakpoints`);
+		if (input.rules !== void 0) {
+			if (!Array.isArray(input.rules)) throw new Error(`${path}.rules must be an array of {when, value} objects.`);
+			rules = Array.from(input.rules, (rule, index) => normalizeRule(rule, `${path}.rules[${index}]`));
+		}
+	}
+	const widthBreakpoints = {
+		...DEFAULT_WIDTH_BREAKPOINTS,
+		...inherited?.widthBreakpoints,
+		...points
+	};
+	WIDTH_BREAKPOINT_NAMES.reduce((previous, name) => {
+		if (widthBreakpoints[name] <= widthBreakpoints[previous]) throw new Error(`${path}.widthBreakpoints must be strictly increasing: ${name} (${widthBreakpoints[name]}) is not above ${previous} (${widthBreakpoints[previous]}).`);
+		return name;
+	});
+	return {
+		widthBreakpoints,
+		rules: [...inherited?.rules ?? [], ...rules]
+	};
+}
+/** Media query text for one condition, in a fixed field order. */
+function mediaQuery(condition, points, path) {
+	const parts = [];
+	const { from, below } = condition.width ?? {};
+	if (from !== void 0 && below !== void 0 && points[from] >= points[below]) throw new Error(`${path}.width must resolve to \`from < below\`; ${from} is ${points[from]}px and ${below} is ${points[below]}px.`);
+	if (from !== void 0) parts.push(`(width >= ${points[from]}px)`);
+	if (below !== void 0) parts.push(`(width < ${points[below]}px)`);
+	if (condition.pointer !== void 0) parts.push(`(pointer: ${condition.pointer})`);
+	if (condition.contrast !== void 0) parts.push(`(prefers-contrast: ${condition.contrast})`);
+	if (condition.motion !== void 0) parts.push(`(prefers-reduced-motion: ${condition.motion})`);
+	return parts.join(" and ");
+}
+function mergeRole$1(root, rule) {
+	if (!root || !rule) return rule ?? root;
+	return {
+		...root,
+		...rule,
+		weights: root.weights || rule.weights ? {
+			...root.weights,
+			...rule.weights
+		} : void 0
+	};
+}
+function completeNumbers(root, rule, required, path) {
+	const merged = {
+		...root,
+		...rule
+	};
+	for (const key of required) {
+		const value = merged[key];
+		if (typeof value !== "number" || !Number.isFinite(value)) throw new Error(`${path}.${String(key)} is missing; supply it in the rule or on the root theme.`);
+	}
+	return merged;
+}
+function ruleInput(value, axes, path) {
+	let typography;
+	if (value.typography) {
+		const scale = value.typography.scale || axes.typography?.scale ? completeNumbers(axes.typography?.scale, value.typography.scale ?? {}, ["base", "ratio"], `${path}.typography.scale`) : void 0;
+		typography = {
+			...scale ? { scale: {
+				base: scale.base,
+				ratio: scale.ratio
+			} } : {},
+			body: mergeRole$1(axes.typography?.body, value.typography.body),
+			heading: mergeRole$1(axes.typography?.heading, value.typography.heading),
+			code: mergeRole$1(axes.typography?.code, value.typography.code)
+		};
+	}
+	return {
+		typography,
+		color: value.color ? {
+			...axes.color,
+			...value.color
+		} : void 0,
+		radius: value.radius ? completeNumbers(axes.radius, value.radius, ["base", "multiplier"], `${path}.radius`) : void 0,
+		motion: value.motion ? completeNumbers(axes.motion, value.motion, [
+			"fast",
+			"medium",
+			"ratio"
+		], `${path}.motion`) : void 0,
+		tokens: value.tokens,
+		components: value.components
+	};
+}
+/**
+* Type-scale rules a rule regenerates that the root already declares with the
+* same value only repeat root CSS. Dropping them keeps the root's authored
+* component pins in force. Authored rule writes are always kept.
+*/
+function omitRootDuplicates(resolved, root, authored) {
+	if (!resolved || !root) return resolved;
+	const kept = {};
+	for (const [target, rules] of Object.entries(resolved)) for (const [key, styles] of Object.entries(rules)) {
+		const writes = Object.fromEntries(Object.entries(styles).filter(([property]) => root[target]?.[key]?.[property] === void 0 || Object.hasOwn(authored?.[target]?.[key] ?? {}, property)));
+		if (Object.keys(writes).length > 0) (kept[target] ??= {})[key] = writes;
+	}
+	return Object.keys(kept).length > 0 ? kept : void 0;
+}
+function conditionMatches(condition, points, env) {
+	const { from, below } = condition.width ?? {};
+	if (from !== void 0 && env.width < points[from]) return false;
+	if (below !== void 0 && env.width >= points[below]) return false;
+	return [
+		"pointer",
+		"contrast",
+		"motion"
+	].every((key) => condition[key] === void 0 || condition[key] === env[key]);
+}
+/**
+* Check every environment the rules can meet together. In each one the
+* matching rules write in order over the root, like the CSS cascade, and the
+* result must hold no reference cycle through a name a rule wrote. A later
+* matching rule may repair a cycle an earlier one made.
+*/
+function assertNoReachableCycles(themeName, points, root, rules) {
+	const writers = rules.flatMap((rule, index) => Object.keys(rule.tokens).length > 0 || rule.localTokens ? [index] : []);
+	if (writers.length === 0) return;
+	const checked = /* @__PURE__ */ new Set();
+	for (const width of [0, ...WIDTH_BREAKPOINT_NAMES.map((name) => points[name])]) for (const pointer of [
+		"coarse",
+		"fine",
+		"none"
+	]) for (const contrast of [
+		"more",
+		"less",
+		"no-preference",
+		"custom"
+	]) for (const motion of ["reduce", "no-preference"]) {
+		const matching = writers.filter((index) => conditionMatches(rules[index].when, points, {
+			width,
+			pointer,
+			contrast,
+			motion
+		}));
+		const signature = matching.join(",");
+		if (matching.length === 0 || checked.has(signature)) continue;
+		checked.add(signature);
+		const effective = {
+			...root.tokens,
+			...root.localTokens
+		};
+		const written = /* @__PURE__ */ new Set();
+		for (const index of matching) {
+			const rule = rules[index];
+			Object.assign(effective, rule.tokens, rule.localTokens);
+			for (const name of [...Object.keys(rule.tokens), ...Object.keys(rule.localTokens ?? {})]) written.add(name);
+		}
+		const label = matching.length === 1 ? "rule" : "overlapping rules";
+		const queries = matching.map((index) => rules[index].query).join("; ");
+		assertNoTokenCycles(effective, `defineTheme("${themeName}").adaptations ${label} [${matching.join(", ")}] (${queries})`, written);
+	}
+}
+/** Lower every rule to concrete writes and reject reference cycles they create. */
+function resolveThemeAdaptationRules(themeName, adaptations, axes, root) {
+	if (adaptations.rules.length === 0) return void 0;
+	const resolved = adaptations.rules.map((rule, index) => {
+		const path = `defineTheme("${themeName}").adaptations.rules[${index}]`;
+		const input = ruleInput(rule.value, axes, `${path}.value`);
+		const values = resolveThemeValues(input, `${path}.value.`);
+		for (const name of Object.keys(rule.value.tokens ?? {})) if (root.localTokens && Object.hasOwn(root.localTokens, name)) throw new Error(`${path}.value.tokens["${name}"] is a theme-local token; write it through value.localTokens.`);
+		const localTokens = resolveAdaptationLocalTokens(`${path}.value.localTokens`, rule.value.localTokens, root.localTokens);
+		return {
+			when: rule.when,
+			query: mediaQuery(rule.when, adaptations.widthBreakpoints, `${path}.when`),
+			tokens: values.tokens,
+			...localTokens ? { localTokens } : {},
+			components: input.typography?.scale ? omitRootDuplicates(values.components, root.components, rule.value.components) : values.components
+		};
+	});
+	assertNoReachableCycles(themeName, adaptations.widthBreakpoints, root, resolved);
+	return resolved;
+}
+//#endregion
+//#region src/Theme/derivedVars.ts
+const DERIVED_VARS = {
+	"bottom-sheet": [{
+		property: "padding",
+		expand: "container"
+	}],
+	"card": [{
+		property: "borderRadius",
+		vars: ["--_card-radius"]
+	}, {
+		property: "padding",
+		expand: "container"
+	}],
+	"chat": [{
+		property: "borderRadius",
+		vars: ["--_chat-composer-radius"]
+	}, {
+		property: "padding",
+		vars: ["--_chat-composer-padding"]
+	}],
+	"context-menu": [{
+		property: "borderRadius",
+		vars: ["--_context-menu-radius"]
+	}, {
+		property: "padding",
+		vars: ["--_context-menu-padding"]
+	}],
+	"dialog": [{
+		property: "borderRadius",
+		vars: ["--_dialog-radius"]
+	}, {
+		property: "padding",
+		expand: "container"
+	}],
+	"dropdown-menu": [{
+		property: "borderRadius",
+		vars: ["--_dropdown-menu-radius"]
+	}, {
+		property: "padding",
+		vars: ["--_dropdown-menu-padding"]
+	}],
+	"progress-bar-mark": [{
+		property: "width",
+		vars: ["--_progressbar-mark-width"]
+	}, {
+		property: "height",
+		vars: ["--_progressbar-mark-height"]
+	}],
+	"segmented-control": [{
+		property: "borderRadius",
+		vars: ["--_segmented-control-radius"]
+	}, {
+		property: "padding",
+		vars: ["--_segmented-control-padding"]
+	}]
+};
+const PADDING_PROPS = /* @__PURE__ */ new Set([
+	"padding",
+	"paddingBlock",
+	"paddingInline",
+	"paddingBlockStart",
+	"paddingBlockEnd",
+	"paddingInlineStart",
+	"paddingInlineEnd"
+]);
+/**
+* Physical block longhands and the logical longhand each one is in every
+* horizontal writing mode. `paddingLeft` and `paddingRight` are not mapped:
+* which edge they mean flips in right-to-left text.
+*/
+const PHYSICAL_BLOCK_PADDING = {
+	paddingTop: "paddingBlockStart",
+	paddingBottom: "paddingBlockEnd"
+};
+function words(value) {
+	return value.trim().split(/\s+/);
+}
+function parsePadding(entries) {
+	const parsed = {};
+	for (const [raw, value] of entries) {
+		const prop = PHYSICAL_BLOCK_PADDING[raw] ?? raw;
+		const parts = words(value);
+		if (prop === "padding") {
+			parsed.blockStart = parts[0];
+			parsed.inline = parts[1] ?? parts[0];
+			parsed.blockEnd = parts[2] ?? parts[0];
+		} else if (prop === "paddingBlock") {
+			parsed.blockStart = parts[0];
+			parsed.blockEnd = parts[1] ?? parts[0];
+		} else if (prop === "paddingInline") {
+			if (parts.length === 1) parsed.inline = parts[0];
+			else {
+				parsed.inlineStart = parts[0];
+				parsed.inlineEnd = parts[1];
+			}
+		} else if (prop === "paddingBlockStart") parsed.blockStart = value;
+		else if (prop === "paddingBlockEnd") parsed.blockEnd = value;
+		else if (prop === "paddingInlineStart") parsed.inlineStart = value;
+		else if (prop === "paddingInlineEnd") parsed.inlineEnd = value;
+	}
+	return parsed;
+}
+/** Published container padding variables for one component. */
+function containerPadding(component, parsed) {
+	const prefix = `--astryx-${component}-padding`;
+	const start = parsed.inlineStart ?? parsed.inline;
+	const end = parsed.inlineEnd ?? parsed.inline;
+	if (start != null && start === end && start === parsed.blockStart && start === parsed.blockEnd) return [[prefix, start]];
+	const out = [];
+	if (parsed.inlineStart != null || parsed.inlineEnd != null) {
+		if (start != null) out.push([`${prefix}-inline-start`, start]);
+		if (end != null) out.push([`${prefix}-inline-end`, end]);
+	} else if (parsed.inline != null) out.push([`${prefix}-inline`, parsed.inline]);
+	if (parsed.blockStart != null) out.push([`${prefix}-block-start`, parsed.blockStart]);
+	if (parsed.blockEnd != null) out.push([`${prefix}-block-end`, parsed.blockEnd]);
+	return out;
+}
+function entriesFor(component, property) {
+	const entries = DERIVED_VARS[component] ?? [];
+	const lookup = PADDING_PROPS.has(property) || property in PHYSICAL_BLOCK_PADDING ? "padding" : property;
+	return entries.filter((entry) => entry.property === property || entry.property === lookup);
+}
+/**
+* Lower one rule's declarations through the component's derived variables.
+*
+* Input and output are `[camelCase or custom property, value]` pairs. A
+* container-expanded padding replaces the padding properties; every other
+* derived variable is written next to the property it mirrors.
+*/
+function applyDerivedVars(component, declarations) {
+	const derived = [];
+	const padding = [];
+	for (const [property, value] of declarations) for (const entry of entriesFor(component, property)) {
+		if (entry.expand === "container") padding.push([property, value]);
+		for (const name of entry.vars ?? []) derived.push([name, value]);
+	}
+	if (padding.length === 0) return [...declarations.map(([p, v]) => [p, v]), ...derived];
+	const expanded = new Set(padding.map(([property]) => property));
+	return [
+		...declarations.filter(([property]) => !expanded.has(property)).map(([p, v]) => [p, v]),
+		...containerPadding(component, parsePadding(padding)),
+		...derived
+	];
+}
+//#endregion
+//#region src/Theme/componentStyles.ts
+/** A theme target: `<component-kebab>` or `<component-kebab>-<part>`. */
+const TARGET_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+const PROP_NAME = /^[a-z][a-z0-9-]*$/i;
+const PSEUDO = /* @__PURE__ */ new Set([
+	":hover",
+	":focus",
+	":focus-visible",
+	":focus-within",
+	":active",
+	":checked",
+	":disabled",
+	":invalid",
+	":valid",
+	":placeholder-shown",
+	":read-only",
+	":required"
+]);
+/**
+* Keeps a themed `:hover` off disabled controls. `:where()` adds no
+* specificity, so the hover rule still weighs what it would without it.
+*/
+const HOVER_GUARD = ":where(:not(:disabled, [aria-disabled=\"true\"]))";
+/**
+* Check a theme target name.
+*
+* Only `<component-kebab>-<part>` names reach the selector. A camelCase or
+* run-together name such as `buttonIcon`, `progressbar`, or `codeblock` is not
+* rewritten; it is refused so the author sees the canonical name instead of a
+* rule that silently matches nothing.
+*/
+function assertTargetName(name) {
+	if (!TARGET_NAME.test(name)) throw new Error(`Theme component target "${name}" must be written as <component-kebab>-<part>, for example "button" or "card-header".`);
+	return name;
+}
+function escapeAttributeValue(value) {
+	return value.replace(/["\\]/g, (char) => `\\${char}`);
+}
+function parseStyleKey(key) {
+	return key.split("+").map((part) => {
+		const separator = part.indexOf(":");
+		const prop = separator === -1 ? part : part.slice(0, separator);
+		const value = separator === -1 ? part : part.slice(separator + 1);
+		if (!PROP_NAME.test(prop) || value === "") throw new Error(`Theme component style "${key}" must be base, a state, or prop:value.`);
+		return {
+			axis: prop.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(),
+			value
+		};
+	});
+}
+/**
+* Selectors for one target and style key.
+*
+* `variant:secondary` matches the reflected attribute
+* `.astryx-button[data-variant="secondary"]`, and also this package's
+* modifier class `.astryx-button--variant-secondary`. The modifier is how
+* components that do not reflect that axis as `data-*` yet still receive the
+* rule. Both are scoped to the target, so neither is a bare value class.
+*/
+function targetSelectors(target, key, surface) {
+	const root = `.astryx-${assertTargetName(target)}`;
+	const selectors = key === "base" ? [root] : (() => {
+		const parts = parseStyleKey(key);
+		const attributes = parts.map((part) => `[data-${part.axis}="${escapeAttributeValue(part.value)}"]`).join("");
+		const modifiers = parts.map((part) => `${root}--${part.axis}-${part.value}`).join("");
+		return parts.every((part) => /^[\w-]+$/.test(part.value)) ? [`${root}${attributes}`, `${root}${modifiers}`] : [`${root}${attributes}`];
+	})();
+	return surface ? selectors.map((selector) => `[data-astryx-media="${surface}"] ${selector}`) : selectors;
+}
+function withPseudo(selectors, pseudo) {
+	const suffix = pseudo === ":hover" ? `:hover${HOVER_GUARD}` : pseudo;
+	return selectors.map((selector) => `${selector}${suffix}`).join(", ");
+}
+/**
+* A component style property as CSS. camelCase becomes kebab-case. A custom
+* property gets the `--astryx-` prefix, so `--button-radius` and
+* `--astryx-button-radius` name the same variable; a component-internal
+* `--_name` is kept as written.
+*/
+function cssProperty(name) {
+	if (name.startsWith("--")) return name.startsWith("--_") ? name : normalizeTokenName(name);
+	return name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function declarationBlock(entries, location, { toProperty = cssProperty } = {}) {
+	const lines = [];
+	for (const [raw, rawValue] of entries) {
+		const property = toProperty(raw);
+		const value = prefixTokenReferences(rawValue);
+		const reason = checkDeclarationName(property) ?? checkDeclarationValue(value);
+		if (reason != null) {
+			warnDroppedDeclaration(property, value, location, reason);
+			continue;
+		}
+		lines.push(`  ${property}: ${value};`);
+	}
+	return lines.join("\n");
+}
+function splitOverrides(overrides, location) {
+	const base = [];
+	const pseudos = [];
+	for (const [key, value] of Object.entries(overrides)) {
+		if (key.startsWith(":")) {
+			if (!PSEUDO.has(key) || typeof value === "string") throw new Error(`${location}: theme style pseudo "${key}" is not supported.`);
+			pseudos.push([key, value]);
+			continue;
+		}
+		if (typeof value !== "string") throw new Error(`${location}: theme style property "${key}" must be a CSS value.`);
+		base.push([key, value]);
+	}
+	return {
+		base,
+		pseudos
+	};
+}
+/**
+* Compile a component style map into rule text, without scope or layer.
+*
+* Each rule targets the stable `.astryx-<target>` class plus the reflected
+* `data-*` attributes for the style key. Derived variables come along, so
+* a themed `borderRadius` or `padding` reaches the component's internals.
+*/
+function compileComponentRules(components, location, surface) {
+	const rules = [];
+	for (const [target, styles] of Object.entries(components ?? {})) for (const [key, overrides] of Object.entries(styles)) {
+		const where = `${location}components.${target}["${key}"]`;
+		const selectors = targetSelectors(target, key, surface);
+		const { base, pseudos } = splitOverrides(overrides, where);
+		const body = declarationBlock(applyDerivedVars(target, base), where);
+		if (body) rules.push(`${selectors.join(", ")} {\n${body}\n}`);
+		for (const [pseudo, block] of pseudos) {
+			const pseudoBody = declarationBlock(applyDerivedVars(target, Object.entries(block)), `${where}["${pseudo}"]`);
+			if (pseudoBody) rules.push(`${withPseudo(selectors, pseudo)} {\n${pseudoBody}\n}`);
+		}
+	}
+	return rules;
+}
+/**
+* One `selector { name: value; }` block from a resolved token map, or nothing
+* when empty. Names are written exactly as given: shared tokens already carry
+* the `--astryx-` prefix and theme-local tokens keep their own names.
+*/
+function tokenRule(selector, tokens, location) {
+	const entries = Object.entries(tokens ?? {});
+	if (entries.length === 0) return [];
+	const body = declarationBlock(entries, location, { toProperty: (name) => name });
+	return body ? [`${selector} {\n${body}\n}`] : [];
+}
+//#endregion
+//#region src/Theme/themeAxes.ts
+function mergeRole(base, own) {
+	if (!base || !own) return own ?? base;
+	return {
+		...base,
+		...own,
+		weights: base.weights || own.weights ? {
+			...base.weights,
+			...own.weights
+		} : void 0
+	};
+}
+/**
+* Resolve one font role through `extends`.
+*
+* A child that names a family replaces the inherited family and fallbacks.
+* A fallback without a family has no effect, matching how font tokens are
+* built. A child heading follows the child's own body family when the child
+* sets a body family and no heading family.
+*/
+function resolveFamily(base, own, followsOwnBody = false) {
+	const merged = mergeRole(base, own);
+	if (!merged) return void 0;
+	if (own?.family) return {
+		...merged,
+		family: own.family,
+		fallbacks: own.fallbacks
+	};
+	if (followsOwnBody) return {
+		...merged,
+		family: void 0,
+		fallbacks: void 0
+	};
+	return {
+		...merged,
+		family: base?.family,
+		fallbacks: base?.fallbacks
+	};
+}
+/**
+* The generator configs a theme effectively uses, after `extends`.
+*
+* Adaptation rules write partial values, such as only a new type-scale base,
+* and are completed from these. A child's own color config replaces the
+* base's, because a color config regenerates every neutral. Radius and
+* motion merge field by field. Weights belong to the most recent config that
+* declares a type scale, since weights only reach tokens through a scale.
+*/
+function resolveGenerativeAxes(inherited, own) {
+	const base = inherited?.typography;
+	const mine = own.typography;
+	let typography = base || mine ? {
+		...base,
+		...mine,
+		scale: mine?.scale ?? base?.scale,
+		body: resolveFamily(base?.body, mine?.body),
+		heading: resolveFamily(base?.heading, mine?.heading, Boolean(mine?.body?.family && !mine?.heading?.family)),
+		code: resolveFamily(base?.code, mine?.code)
+	} : void 0;
+	if (typography) {
+		const owner = mine?.scale ? mine : base?.scale ? base : void 0;
+		const withWeights = (role, from) => role ? {
+			...role,
+			weight: from?.weight,
+			weights: from?.weights
+		} : void 0;
+		typography = {
+			...typography,
+			body: withWeights(typography.body, owner?.body),
+			heading: withWeights(typography.heading, owner?.heading),
+			code: withWeights(typography.code, owner?.code)
+		};
+	}
+	const color = own.color ?? inherited?.color;
+	const radius = own.radius ? {
+		...inherited?.radius,
+		...own.radius
+	} : inherited?.radius;
+	const motion = own.motion ? {
+		...inherited?.motion,
+		...own.motion
+	} : inherited?.motion;
+	return {
+		...typography ? { typography } : {},
+		...color ? { color } : {},
+		...radius ? { radius } : {},
+		...motion ? { motion } : {}
+	};
+}
+//#endregion
+//#region src/Theme/propGuards.ts
+/** An authored value as CSS, or undefined when it cannot stay one declaration. */
+function safeValue(value) {
+	if (typeof value !== "string") return void 0;
+	const css = prefixTokenReferences(value);
+	return checkDeclarationValue(css) === null ? css : void 0;
+}
+/**
+* Explicit props that must keep winning over a theme's own type rules.
+*
+* Theme rules sit in `astryx.overrides`, above the component layer. A theme
+* that styles `heading level:2` or `text type:body` would otherwise beat an
+* explicit `weight`, `color`, or `size` prop on that element. Restating the
+* prop classes after the theme rules puts the prop back on top.
+*
+* Values mirror the component stylesheets in `packages/core/styles`, so a
+* restated prop looks exactly as it does without a theme.
+*/
+const GUARDS = {
+	heading: {
+		"weight:regular": { fontWeight: "var(--astryx-font-weight-regular, 400)" },
+		"weight:medium": { fontWeight: "var(--astryx-font-weight-medium, 500)" },
+		"weight:semibold": { fontWeight: "var(--astryx-font-weight-semibold, 600)" },
+		"weight:bold": { fontWeight: "var(--astryx-font-weight-bold, 700)" },
+		"color:primary": { color: "var(--astryx-color-text-primary, light-dark(#171717, #fafafa))" },
+		"color:secondary": { color: "var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3))" },
+		"color:accent": { color: "var(--astryx-color-text-accent, #0074e2)" }
+	},
+	text: {
+		"weight:regular": { fontWeight: "var(--astryx-font-weight-regular, 400)" },
+		"weight:medium": { fontWeight: "var(--astryx-font-weight-medium, 500)" },
+		"weight:semibold": { fontWeight: "var(--astryx-font-weight-semibold, 600)" },
+		"weight:bold": { fontWeight: "var(--astryx-font-weight-bold, 700)" },
+		"size:sm": { fontSize: "var(--astryx-text-sm-size, 0.75rem)" },
+		"size:md": { fontSize: "var(--astryx-text-md-size, 0.875rem)" },
+		"size:lg": { fontSize: "var(--astryx-text-lg-size, 1rem)" },
+		"size:xl": { fontSize: "var(--astryx-text-xl-size, 1.25rem)" },
+		"color:primary": { color: "var(--astryx-color-text-primary, light-dark(#171717, #fafafa))" },
+		"color:secondary": { color: "var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3))" },
+		"color:accent": { color: "var(--astryx-color-text-accent, #0074e2)" },
+		"color:disabled": { color: "var(--astryx-color-text-disabled, light-dark(#a3a3a3, #525252))" },
+		"color:placeholder": { color: "var(--astryx-color-text-placeholder, #737373)" }
+	},
+	link: {
+		"color:primary": { color: "var(--astryx-link-primary-foreground, var(--astryx-color-text-primary, #171717))" },
+		"color:secondary": { color: "var(--astryx-link-secondary-foreground, var(--astryx-color-text-secondary, #525252))" },
+		"color:accent": { color: "var(--astryx-link-accent-foreground, #0074e2)" }
+	}
+};
+const PROPERTY_CSS = {
+	fontWeight: "font-weight",
+	fontSize: "font-size",
+	color: "color"
+};
+/**
+* Prop rules for every guarded target this component map touches.
+*
+* A theme may restyle a prop on purpose, for example
+* `heading: { 'weight:medium': { fontWeight: '450' } }`; that authored value
+* is what gets restated. A value that cannot stay one declaration was
+* already reported where the component rule was compiled, so the default
+* is restated instead.
+*/
+function propGuardRules(components, options = {}) {
+	const rules = [];
+	for (const [target, keys] of Object.entries(GUARDS)) {
+		const own = components?.[target];
+		if (own === void 0 && !options.force) continue;
+		for (const [key, declarations] of Object.entries(keys)) {
+			const authored = own?.[key];
+			if (options.authoredOnly && authored === void 0) continue;
+			const fallback = options.inherited?.[target]?.[key];
+			const body = Object.entries(declarations).map(([property, value]) => {
+				const written = safeValue(authored?.[property]) ?? safeValue(fallback?.[property]);
+				return `${PROPERTY_CSS[property]}: ${written ?? value};`;
+			}).join(" ");
+			rules.push(`${targetSelectors(target, key, options.surface).join(", ")} { ${body} }`);
+		}
+	}
+	return rules;
+}
+/** Whether a component map touches any guarded target. */
+function touchesGuardedTargets(components) {
+	return Object.keys(GUARDS).some((target) => components?.[target] !== void 0);
+}
+//#endregion
+//#region src/Theme/themeCss.ts
+/** Wrap rules in this theme's subtree, stopping at a nested theme. */
+function scoped(themeName, rules) {
+	return `@scope (${`[data-astryx-theme="${themeName}"]`}) to ([data-astryx-theme]) {\n${rules.join("\n")}\n}`;
+}
+/**
+* Token writes target the `Theme` wrapper itself, the scope root, and never
+* `<html>`. `<html>` also carries the outermost theme's name so component rules
+* reach content teleported to `<body>`; tokens stay on the wrapper, so a
+* `Theme` that wraps one part of a page does not recolor the rest of it.
+*/
+const TOKEN_SCOPE = ":scope.astryx-theme";
+/** Root token values: semantic tokens with their aliases, locals, syntax. */
+function rootTokens(source) {
+	const tokens = {
+		...bridgeComponentTokens(source.tokens),
+		...source.localTokens
+	};
+	if (source.syntax) Object.assign(tokens, syntaxThemeStyle(source.syntax));
+	return tokens;
+}
+/** Token values one adaptation rule rewrites. */
+function adaptedTokens(rule) {
+	return {
+		...bridgeComponentTokens(rule.tokens),
+		...rule.localTokens
+	};
+}
+function rootRules(source) {
+	const rules = [];
+	rules.push(...tokenRule(TOKEN_SCOPE, rootTokens(source), ""));
+	rules.push(...compileComponentRules(source.components, ""));
+	rules.push(...propGuardRules(source.components));
+	return rules;
+}
+function adaptationBlocks(source) {
+	const rules = source.adaptationRules ?? [];
+	const blocks = [];
+	for (const [index, rule] of rules.entries()) {
+		const location = `adaptations[${index}].`;
+		const inner = [...tokenRule(TOKEN_SCOPE, adaptedTokens(rule), `${location}tokens`), ...compileComponentRules(rule.components, location)];
+		if (inner.length > 0) blocks.push(`@media ${rule.query} {\n${scoped(source.name, inner)}\n}`);
+	}
+	if (!rules.some((rule) => touchesGuardedTargets(rule.components))) return blocks;
+	blocks.push(scoped(source.name, propGuardRules(source.components, { force: true })));
+	for (const rule of rules) {
+		const authored = propGuardRules(rule.components, { authoredOnly: true });
+		if (authored.length > 0) blocks.push(`@media ${rule.query} {\n${scoped(source.name, authored)}\n}`);
+	}
+	return blocks;
+}
+function surfaceRules(source, surface) {
+	const components = surface === "dark" ? source.onDarkComponents : source.onLightComponents;
+	if (!components) return [];
+	return [...compileComponentRules(components, surface === "dark" ? "onDark." : "onLight.", surface), ...propGuardRules(components, {
+		surface,
+		inherited: source.components
+	})];
+}
+/**
+* Compile one theme's stylesheet into the `astryx.overrides` layer.
+*
+* Order is the cascade order: root rules, then each adaptation in authored
+* order, then media-surface rules, so a later section wins at equal
+* specificity. Every block is scoped to this theme and stops at a nested
+* theme, so an inner theme's components keep their own styling.
+*
+* Root tokens are the first rule of the sheet, written on the `Theme` wrapper.
+* An adaptation's token writes land in a later block with the same selector, so
+* a matching media query wins by source order. No declaration here outranks a
+* user rule, so a user can still override a token with ordinary specificity.
+* A nested theme inherits every token it does not set, adapted or not.
+*/
+function compileThemeCss(source) {
+	const blocks = [];
+	const root = rootRules(source);
+	if (root.length > 0) blocks.push(scoped(source.name, root));
+	blocks.push(...adaptationBlocks(source));
+	const surfaces = [...surfaceRules(source, "dark"), ...surfaceRules(source, "light")];
+	if (surfaces.length > 0) blocks.push(scoped(source.name, surfaces));
+	if (blocks.length === 0) return void 0;
+	return `@layer astryx.overrides {\n${blocks.join("\n")}\n}\n`.replace(/<\/(style)/gi, "<\\/$1");
+}
+//#endregion
+//#region src/Theme/defineTheme.ts
+const THEME_NAME = /^[a-z0-9][a-z0-9-]*$/i;
+function isDefinedTheme(value) {
+	return !!value && typeof value === "object" && value.__astryxTheme === true;
+}
+function describeBadBase(value) {
+	if (value === void 0 || value === null) return String(value);
+	if (typeof value !== "object") return typeof value;
+	const keys = Object.keys(value);
+	return `an object with keys [${keys.slice(0, 4).join(", ")}${keys.length > 4 ? ", …" : ""}]`;
+}
+function mergeMaps(base, next) {
+	if (base == null && next == null) return void 0;
+	return {
+		...base,
+		...next
+	};
+}
+function sealIndicators(indicators) {
+	if (indicators == null) return void 0;
+	const sealed = {};
+	for (const [name, component] of Object.entries(indicators)) if (component) sealed[name] = markRaw(component);
+	return sealed;
+}
+function assertTargets(components) {
+	for (const target of Object.keys(components ?? {})) assertTargetName(target);
+}
+/**
+* Create a theme object that `Theme` can apply to a subtree.
+*
+* Token names are the upstream names (`--color-accent`) or this package's
+* prefixed names (`--astryx-color-accent`). A `[light, dark]` tuple becomes
+* `light-dark()`. `color`, `typography`, `radius`, and `motion` generate
+* tokens; an explicit `tokens` entry wins for that name.
+*
+* `extends` starts from everything the base theme resolved to: tokens,
+* local tokens, component styles, surfaces, adaptations, icons, indicators.
+* This theme's own values win, and the result is self-contained.
+*/
+function defineTheme(input) {
+	if (!THEME_NAME.test(input.name)) throw new Error(`Theme name "${input.name}" must use letters, numbers, and hyphens.`);
+	if ("extends" in input && !isDefinedTheme(input.extends)) throw new Error(`defineTheme("${input.name}"): \`extends\` must be a theme from defineTheme(), got ${describeBadBase(input.extends)}. Check that the import naming the base theme resolves to it.`);
+	assertTargets(input.components);
+	assertTargets(input.onDark?.components);
+	assertTargets(input.onLight?.components);
+	const base = input.extends;
+	const own = resolveThemeValues(input, "");
+	const tokens = {
+		...base?.tokens,
+		...own.tokens
+	};
+	const components = mergeComponentMaps(base?.components, own.components);
+	const local = resolveLocalTokens(input.name, input.localTokens, base, tokens);
+	const ownAxes = {
+		typography: input.typography,
+		color: input.color,
+		radius: input.radius,
+		motion: input.motion
+	};
+	const axes = resolveGenerativeAxes(base?.axes, ownAxes);
+	const adaptations = normalizeThemeAdaptations(input.name, base?.adaptations, input.adaptations);
+	const adaptationRules = resolveThemeAdaptationRules(input.name, adaptations, axes, {
+		tokens,
+		localTokens: local?.localTokens,
+		components
+	});
+	const onDark = {
+		...base?.onDark,
+		...resolveTokenMap(input.onDark?.tokens, "onDark.tokens")
+	};
+	const onLight = {
+		...base?.onLight,
+		...resolveTokenMap(input.onLight?.tokens, "onLight.tokens")
+	};
+	const onDarkComponents = mergeComponentMaps(base?.onDarkComponents, input.onDark?.components);
+	const onLightComponents = mergeComponentMaps(base?.onLightComponents, input.onLight?.components);
+	const icons = mergeMaps(base?.icons, input.icons);
+	const indicators = sealIndicators(mergeMaps(base?.indicators, input.indicators));
+	const css = compileThemeCss({
+		name: input.name,
+		tokens,
+		localTokens: local?.localTokens,
+		components,
+		adaptationRules,
+		onDarkComponents,
+		onLightComponents,
+		syntax: input.syntax ?? base?.syntax
+	});
+	return {
+		__astryxTheme: true,
+		name: input.name,
+		tokens,
+		...local ? {
+			localTokens: local.localTokens,
+			localTokenOwners: local.owners
+		} : {},
+		onDark,
+		onLight,
+		...onDarkComponents ? { onDarkComponents } : {},
+		...onLightComponents ? { onLightComponents } : {},
+		syntax: input.syntax ?? base?.syntax,
+		...icons ? { icons } : {},
+		...indicators ? { indicators } : {},
+		...components ? { components } : {},
+		...css ? { css } : {},
+		adaptations,
+		...adaptationRules ? { adaptationRules } : {},
+		axes
+	};
+}
+/** Neutral, with no token overrides. Colors come from `@astryx-vue/themes/neutral.css`. */
+const neutralTheme = defineTheme({ name: "neutral" });
+//#endregion
+//#region src/Theme/themeStyleTag.ts
+/**
+* Injects a theme's compiled sheet. A template `<style>` is ignored by Vue.
+*
+* The sheet goes in as raw text: server rendering would otherwise
+* HTML-escape the quotes in `[data-astryx-theme="..."]` and `>` in
+* selectors, and break them. `compileThemeCss` never writes `</style`, so
+* the text cannot close the element early.
+*/
+const ThemeStyle = defineComponent({
+	name: "AstryxThemeStyle",
+	props: { css: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		return () => h("style", {
+			"data-astryx-theme-style": "",
+			"innerHTML": props.css
+		});
+	}
+});
+//#endregion
+//#region src/Theme/useThemeRootSync.ts
+const entries = [];
+let baseSnapshot = null;
+function capture() {
+	const root = document.documentElement;
+	return {
+		theme: root.getAttribute("data-astryx-theme"),
+		mode: root.getAttribute("data-astryx-color-mode")
+	};
+}
+function writeAttribute(name, value) {
+	const root = document.documentElement;
+	if (value == null) root.removeAttribute(name);
+	else root.setAttribute(name, value);
+}
+function apply(entry) {
+	const root = document.documentElement;
+	root.setAttribute("data-astryx-theme", entry.name());
+	const mode = entry.mode();
+	if (mode === "light" || mode === "dark") root.setAttribute("data-astryx-color-mode", mode);
+	else root.removeAttribute("data-astryx-color-mode");
+}
+function restoreBase() {
+	if (!baseSnapshot) return;
+	writeAttribute("data-astryx-theme", baseSnapshot.theme);
+	writeAttribute("data-astryx-color-mode", baseSnapshot.mode);
+	baseSnapshot = null;
+}
+/**
+* The outermost Theme mirrors its name and mode onto `documentElement`, so
+* portaled UI and browser chrome see the same theme. Nested themes do not.
+*/
+function useThemeRootSync(isNested, themeName, mode) {
+	if (isNested || typeof document === "undefined") return;
+	const entry = {
+		name: themeName,
+		mode
+	};
+	onMounted(() => {
+		if (entries.length === 0) baseSnapshot = capture();
+		entries.push(entry);
+		apply(entry);
+	});
+	watch(() => [themeName(), mode()], () => {
+		if (entries[entries.length - 1] === entry) apply(entry);
+	});
+	onBeforeUnmount(() => {
+		const index = entries.lastIndexOf(entry);
+		if (index >= 0) entries.splice(index, 1);
+		const top = entries[entries.length - 1];
+		if (top) apply(top);
+		else restoreBase();
+	});
+}
+//#endregion
+//#region src/Theme/Theme.vue
+const _hoisted_1 = ["data-astryx-theme", "data-astryx-color-mode"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTheme",
+	inheritAttrs: false,
+	__name: "Theme",
+	props: {
+		theme: {},
+		mode: { default: "system" }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		const isNested = inject(themeNestingKey, false);
+		const parentSyntax = inject(syntaxThemeKey, null);
+		provide(themeNestingKey, true);
+		provide(themeContextKey, computed(() => ({
+			theme: props.theme,
+			mode: props.mode
+		})));
+		if (parentSyntax || props.theme.syntax) provide(syntaxThemeKey, computed(() => props.theme.syntax ?? parentSyntax?.value ?? null));
+		useThemeRootSync(isNested, () => props.theme.name, () => props.mode);
+		const colorScheme = computed(() => {
+			if (props.mode === "dark") return "dark";
+			if (props.mode === "light") return "light";
+			return "light dark";
+		});
+		const rootStyle = computed(() => ({ colorScheme: colorScheme.value }));
+		__expose({ element: root });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["astryx-theme", unref(attrs).class]),
+				"data-astryx-theme": __props.theme.name,
+				"data-astryx-color-mode": __props.mode === "system" ? void 0 : __props.mode,
+				style: normalizeStyle([rootStyle.value, unref(attrs).style])
+			}, [__props.theme.css ? (openBlock(), createBlock(unref(ThemeStyle), {
+				key: 0,
+				css: __props.theme.css
+			}, null, 8, ["css"])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/Theme/useMediaTheme.ts
+/** Read the nearest MediaTheme. Outside one, the mode is `off`. */
+function useMediaTheme() {
+	return { mode: inject(mediaThemeKey, null) ?? computed(() => "off") };
+}
+//#endregion
+export { neutralTheme as a, expandMotionScale as c, WIDTH_BREAKPOINT_NAMES as d, isDefinedTheme as i, expandColorScale as l, _sfc_main as n, expandTypeScale as o, defineTheme as r, expandRadiusScale as s, useMediaTheme as t, DEFAULT_WIDTH_BREAKPOINTS as u };