@astryx-vue/core 0.3.0 → 0.4.0

package/dist/Theme-CtaUWo4g.js

@@ -1,1246 +0,0 @@
-import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
-import { n as themeContextKey, r as themeNestingKey, t as mediaThemeKey } from "./context-Cws_tXTr.js";
-import { a as syntaxThemeStyle } from "./syntaxTheme-R7xnu5x5.js";
-import { n as resolveLightDark, r as syntaxThemeKey, t as readColorMode } from "./colorMode-CBgdgDSn.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, h, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, unref, useAttrs, useTemplateRef, watch } from "vue";
-import "../styles/media-theme.css";
-import "../styles/theme.css";
-//#region src/Theme/tokenName.ts
-const THEME_TOKEN_PREFIX = /^--(?:color|font|text|radius|duration|ease|spacing|size|shadow|border|focus|heading)-/;
-/** Accept `--color-accent`, `--astryx-color-accent`, or `color-accent`. */
-function normalizeTokenName(name) {
-	const trimmed = name.trim();
-	if (trimmed.startsWith("--astryx-")) return trimmed;
-	if (trimmed.startsWith("--")) return `--astryx-${trimmed.slice(2)}`;
-	return `--astryx-${trimmed}`;
-}
-/**
-* Rewrite `var(--color-accent)` to `var(--astryx-color-accent)`.
-*
-* Custom properties outside the theme vocabulary are left alone.
-*/
-function prefixTokenReferences(value) {
-	return value.replace(/var\(\s*(--(?!astryx-)[\w-]+)/g, (match, name) => {
-		if (!THEME_TOKEN_PREFIX.test(name)) return match;
-		return `var(${normalizeTokenName(name)}`;
-	});
-}
-//#endregion
-//#region src/Theme/componentStyles.ts
-const COMPONENT_NAME = /^[a-z][a-z0-9-]*$/i;
-const STYLE_PART = /^([a-z][a-z0-9-]*):([a-z0-9][a-z0-9-]*)$/;
-const UNSAFE_VALUE = /[;{}<>\n\r\\]|\/\*|\*\//;
-const PSEUDO = /* @__PURE__ */ new Set([
-	":hover",
-	":focus",
-	":focus-visible",
-	":focus-within",
-	":active",
-	":checked",
-	":disabled",
-	":invalid",
-	":valid",
-	":placeholder-shown",
-	":read-only",
-	":required"
-]);
-function componentClass(name) {
-	const kebab = name.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
-	if (!COMPONENT_NAME.test(kebab)) throw new Error(`Theme component name "${name}" is not a component name.`);
-	return `astryx-${kebab}`;
-}
-function styleTargets(className, key) {
-	if (key === "base") return `.${className}`;
-	const parts = key.split("+");
-	if (parts.length === 0 || parts.some((part) => !STYLE_PART.test(part))) throw new Error(`Theme component style "${key}" must be base or prop:value.`);
-	return `.${className}${parts.map((part) => {
-		const match = STYLE_PART.exec(part);
-		return `[data-${match?.[1]}="${match?.[2]}"]`;
-	}).join("")}, .${className}${parts.map((part) => {
-		const match = STYLE_PART.exec(part);
-		return `.${className}--${match?.[1]}-${match?.[2]}`;
-	}).join("")}`;
-}
-function scope(themeName, targets) {
-	return targets.split(", ").map((target) => `[data-astryx-theme="${themeName}"] ${target}`).join(", ");
-}
-function cssProperty(name) {
-	if (name.startsWith("--")) {
-		const normalized = normalizeTokenName(name);
-		if (!/^--astryx-[a-z0-9-]+$/.test(normalized)) throw new Error(`Theme style property "${name}" is not a custom property.`);
-		return normalized;
-	}
-	const kebab = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-	if (!/^-?[a-z][a-z0-9-]*$/.test(kebab)) throw new Error(`Theme style property "${name}" is not a CSS property.`);
-	return kebab;
-}
-function declarationValue(value, property) {
-	if (UNSAFE_VALUE.test(value)) throw new Error(`Theme style ${property} has an unsupported value.`);
-	return prefixTokenReferences(value);
-}
-function declarations(body) {
-	return Object.entries(body).map(([property, value]) => {
-		const name = cssProperty(property);
-		return `  ${name}: ${declarationValue(value, name)};`;
-	}).join("\n");
-}
-function splitOverrides(overrides) {
-	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(`Theme style pseudo "${key}" is not supported.`);
-			pseudos[key] = value;
-			continue;
-		}
-		if (typeof value !== "string") throw new Error(`Theme style property "${key}" must be a CSS value.`);
-		base[key] = value;
-	}
-	return {
-		base,
-		pseudos
-	};
-}
-function withPseudo(selectorList, pseudo) {
-	return selectorList.split(", ").map((selector) => `${selector}${pseudo}`).join(", ");
-}
-/**
-* Compile component style overrides into one scoped sheet.
-*
-* `base` matches `.astryx-<component>`. `variant:secondary` matches both
-* `[data-variant="secondary"]` and `.astryx-<component>--variant-secondary`.
-* Join props with `+`. A `:hover` block skips disabled controls.
-* The sheet lives in the `astryx.overrides` layer.
-*/
-function compileComponentStyles(themeName, components) {
-	if (!components || Object.keys(components).length === 0) return void 0;
-	const rules = [];
-	for (const [component, styles] of Object.entries(components)) {
-		const className = componentClass(component);
-		for (const [key, overrides] of Object.entries(styles)) {
-			const selector = scope(themeName, styleTargets(className, key));
-			const { base, pseudos } = splitOverrides(overrides);
-			if (Object.keys(base).length > 0) rules.push(`${selector} {\n${declarations(base)}\n}`);
-			for (const [pseudo, body] of Object.entries(pseudos)) {
-				const suffix = pseudo === ":hover" ? ":hover:not(:disabled):not([aria-disabled=\"true\"])" : pseudo;
-				if (Object.keys(body).length === 0) continue;
-				rules.push(`${withPseudo(selector, suffix)} {\n${declarations(body)}\n}`);
-			}
-		}
-	}
-	if (rules.length === 0) return void 0;
-	return `@layer astryx.overrides {\n${rules.join("\n")}\n}\n`;
-}
-function mergeComponentMaps(base, next) {
-	if (base == null && next == null) return void 0;
-	const names = /* @__PURE__ */ new Set([...Object.keys(base ?? {}), ...Object.keys(next ?? {})]);
-	const merged = {};
-	for (const name of names) merged[name] = {
-		...base?.[name],
-		...next?.[name]
-	};
-	return merged;
-}
-//#endregion
-//#region src/Theme/contrast.ts
-const HEX$1 = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
-const RGB = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+)(%)?)?\s*\)$/i;
-function parseColor(input) {
-	const value = input.trim().toLowerCase();
-	if (value === "transparent") return {
-		r: 0,
-		g: 0,
-		b: 0,
-		a: 0
-	};
-	const hex = HEX$1.exec(value);
-	if (hex?.[1]) {
-		const raw = hex[1];
-		const expanded = raw.length === 3 ? raw.split("").map((part) => part + part).join("") : raw;
-		const channels = expanded.length === 6 ? `${expanded}ff` : expanded;
-		return {
-			r: Number.parseInt(channels.slice(0, 2), 16),
-			g: Number.parseInt(channels.slice(2, 4), 16),
-			b: Number.parseInt(channels.slice(4, 6), 16),
-			a: Number.parseInt(channels.slice(6, 8), 16) / 255
-		};
-	}
-	const rgb = RGB.exec(value);
-	if (!rgb) return null;
-	const alpha = rgb[4] == null ? 1 : rgb[5] === "%" ? Number.parseFloat(rgb[4]) / 100 : Number.parseFloat(rgb[4]);
-	return {
-		r: Number.parseFloat(rgb[1] ?? "0"),
-		g: Number.parseFloat(rgb[2] ?? "0"),
-		b: Number.parseFloat(rgb[3] ?? "0"),
-		a: alpha
-	};
-}
-function channel(value) {
-	const scaled = value / 255;
-	return scaled <= .04045 ? scaled / 12.92 : ((scaled + .055) / 1.055) ** 2.4;
-}
-function relativeLuminance(color) {
-	return .2126 * channel(color.r) + .7152 * channel(color.g) + .0722 * channel(color.b);
-}
-/** WCAG contrast ratio. 1 is no contrast. */
-function contrastRatio(foreground, background) {
-	const first = relativeLuminance(foreground);
-	const second = relativeLuminance(background);
-	const lighter = Math.max(first, second);
-	const darker = Math.min(first, second);
-	return (lighter + .05) / (darker + .05);
-}
-const ON_DARK = {
-	r: 255,
-	g: 255,
-	b: 255,
-	a: 1
-};
-const ON_LIGHT = {
-	r: 23,
-	g: 23,
-	b: 23,
-	a: 1
-};
-/**
-* Choose a media surface from the painted background.
-*
-* `off` means the ambient text already reads on that background at 3:1, so no
-* inverted context is needed. `null` means the background is too transparent
-* to judge.
-*/
-function pickMediaMode(background, ambientText) {
-	if (background.a < .2) return null;
-	if (contrastRatio(ambientText, background) >= 3) return "off";
-	return contrastRatio(ON_DARK, background) >= contrastRatio(ON_LIGHT, background) ? "dark" : "light";
-}
-//#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/defineTheme.ts
-const THEME_NAME = /^[a-z0-9][a-z0-9-]*$/i;
-const UNSAFE_TOKEN = /[;{}<>\n\r]/;
-function isDefinedTheme(value) {
-	return !!value && typeof value === "object" && value.__astryxTheme === true;
-}
-function assertTokenValue(value, name) {
-	if (UNSAFE_TOKEN.test(value)) throw new Error(`Theme token ${name} has an unsupported value.`);
-}
-function isTokenPair(value) {
-	return Array.isArray(value);
-}
-function resolveTokenMap(tokens) {
-	const resolved = {};
-	if (!tokens) return resolved;
-	for (const [name, value] of Object.entries(tokens)) {
-		if (value == null) continue;
-		const key = normalizeTokenName(name);
-		if (isTokenPair(value)) {
-			const [light, dark] = value;
-			assertTokenValue(light, key);
-			assertTokenValue(dark, key);
-			resolved[key] = prefixTokenReferences(`light-dark(${light}, ${dark})`);
-			continue;
-		}
-		assertTokenValue(value, key);
-		resolved[key] = prefixTokenReferences(value);
-	}
-	return resolved;
-}
-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;
-}
-/**
-* 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.
-*
-* `var(--color-accent)` inside a value is rewritten to the prefixed name.
-*/
-function defineTheme(input) {
-	if (!THEME_NAME.test(input.name)) throw new Error(`Theme name "${input.name}" must use letters, numbers, and hyphens.`);
-	if (input.extends != null && !isDefinedTheme(input.extends)) throw new Error("defineTheme extends must be a theme returned by defineTheme().");
-	const base = input.extends;
-	const typography = resolveTypography(input.typography);
-	const generated = {
-		...input.color ? expandColorScale(input.color) : {},
-		...typography.tokens,
-		...input.radius ? expandRadiusScale(input.radius) : {},
-		...input.motion ? expandMotionScale(input.motion) : {}
-	};
-	const icons = mergeMaps(base?.icons, input.icons);
-	const indicators = sealIndicators(mergeMaps(base?.indicators, input.indicators));
-	const components = mergeComponentMaps(mergeComponentMaps(base?.components, typography.components), input.components);
-	const css = compileComponentStyles(input.name, components);
-	return {
-		__astryxTheme: true,
-		name: input.name,
-		tokens: {
-			...base?.tokens,
-			...resolveTokenMap({
-				...generated,
-				...input.tokens
-			})
-		},
-		onDark: {
-			...base?.onDark,
-			...resolveTokenMap(input.onDark?.tokens)
-		},
-		onLight: {
-			...base?.onLight,
-			...resolveTokenMap(input.onLight?.tokens)
-		},
-		syntax: input.syntax ?? base?.syntax,
-		...icons ? { icons } : {},
-		...indicators ? { indicators } : {},
-		...components ? { components } : {},
-		...css ? { css } : {}
-	};
-}
-/** Neutral, with no token overrides. Colors come from `@astryx-vue/themes/neutral.css`. */
-const neutralTheme = defineTheme({ name: "neutral" });
-//#endregion
-//#region src/Theme/themeStyle.ts
-/**
-* Aliases declared on `:root` are substituted there. A later override of the
-* semantic token does not flow through that already-substituted value, so the
-* alias has to be written again on the element that sets the semantic token.
-*
-* Card background and border are not aliases: Neutral paints them with its own
-* stops, and they follow the semantic token only when a theme sets one.
-*/
-const COMPONENT_BRIDGES = {
-	"--astryx-color-text-primary": [
-		"--astryx-text-foreground",
-		"--astryx-heading-foreground",
-		"--astryx-button-secondary-foreground",
-		"--astryx-button-ghost-foreground"
-	],
-	"--astryx-color-text-secondary": ["--astryx-text-supporting-foreground"],
-	"--astryx-color-accent": ["--astryx-button-primary-background", "--astryx-button-focus"],
-	"--astryx-color-on-accent": ["--astryx-button-primary-foreground"],
-	"--astryx-color-neutral": ["--astryx-button-secondary-background"],
-	"--astryx-color-icon-primary": ["--astryx-icon-primary-foreground"],
-	"--astryx-color-background-card": ["--astryx-card-background"],
-	"--astryx-color-background-muted": ["--astryx-card-muted-background"],
-	"--astryx-color-border": ["--astryx-card-border"]
-};
-/** Surfaces keep their own button treatment. Text aliases still follow onDark and onLight. */
-const SURFACE_BRIDGES = {
-	"--astryx-color-text-primary": ["--astryx-text-foreground", "--astryx-heading-foreground"],
-	"--astryx-color-text-secondary": ["--astryx-text-supporting-foreground"],
-	"--astryx-color-background-card": ["--astryx-card-background"],
-	"--astryx-color-background-muted": ["--astryx-card-muted-background"],
-	"--astryx-color-border": ["--astryx-card-border"]
-};
-function bridgeComponentTokens(tokens, bridges = COMPONENT_BRIDGES) {
-	const style = { ...tokens };
-	for (const [source, targets] of Object.entries(bridges)) {
-		const value = tokens[source];
-		if (!value) continue;
-		for (const target of targets) style[target] = value;
-	}
-	return style;
-}
-/** Token bridges for an inverted surface. Button colors stay with MediaTheme. */
-function bridgeSurfaceTokens(tokens) {
-	return bridgeComponentTokens(tokens, SURFACE_BRIDGES);
-}
-/** Inline custom properties for a theme subtree, including syntax colors. */
-function themeStyle(theme) {
-	const style = bridgeComponentTokens(theme.tokens);
-	if (theme.syntax) Object.assign(style, syntaxThemeStyle(theme.syntax));
-	return style;
-}
-//#endregion
-//#region src/Theme/useAutoMediaMode.ts
-function readPaintedBackground(start) {
-	let current = start;
-	for (let depth = 0; current && depth < 6; depth += 1) {
-		const style = getComputedStyle(current);
-		const background = parseColor(style.backgroundColor);
-		if (background && background.a >= .2) return {
-			background,
-			ambient: parseColor(style.color) ?? {
-				r: 23,
-				g: 23,
-				b: 23,
-				a: 1
-			}
-		};
-		current = current.parentElement;
-	}
-	return null;
-}
-/**
-* Measure the element that actually paints behind a `display: contents` media
-* theme. Returns `null` when the surface cannot be read.
-*/
-function useAutoMediaMode(element, enabled) {
-	const detected = ref(null);
-	function measure() {
-		if (!enabled.value || typeof getComputedStyle !== "function") {
-			detected.value = null;
-			return;
-		}
-		const parent = element.value?.parentElement;
-		if (!parent) {
-			detected.value = null;
-			return;
-		}
-		const painted = readPaintedBackground(parent);
-		detected.value = painted ? pickMediaMode(painted.background, painted.ambient) : null;
-	}
-	onMounted(measure);
-	watch(enabled, measure);
-	return detected;
-}
-//#endregion
-//#region src/Theme/MediaTheme.vue
-const _hoisted_1$1 = ["data-astryx-media"];
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
-	name: "AstryxMediaTheme",
-	inheritAttrs: false,
-	__name: "MediaTheme",
-	props: {
-		mode: {},
-		fallback: { default: "dark" }
-	},
-	setup(__props, { expose: __expose }) {
-		const props = __props;
-		const attrs = useAttrs();
-		const root = useTemplateRef("root");
-		const theme = inject(themeContextKey, null);
-		const detected = useAutoMediaMode(root, computed(() => props.mode === "auto"));
-		const resolved = computed(() => {
-			if (props.mode === "off") return "off";
-			if (props.mode === "auto") return detected.value ?? props.fallback;
-			return props.mode;
-		});
-		provide(mediaThemeKey, resolved);
-		const rootStyle = computed(() => {
-			const surface = resolved.value === "dark" ? theme?.value.theme.onDark : resolved.value === "light" ? theme?.value.theme.onLight : void 0;
-			if (!surface) return {};
-			return bridgeSurfaceTokens(surface);
-		});
-		__expose({ element: root });
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "root",
-				ref: root,
-				class: normalizeClass(["astryx-media-theme", unref(attrs).class]),
-				"data-astryx-media": resolved.value === "off" ? void 0 : resolved.value,
-				style: normalizeStyle([rootStyle.value, unref(attrs).style])
-			}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1$1);
-		};
-	}
-});
-//#endregion
-//#region src/Theme/themeStyleTag.ts
-/** Injects compiled component rules. A template `<style>` is ignored by Vue. */
-const ThemeStyle = defineComponent({
-	name: "AstryxThemeStyle",
-	props: { css: {
-		type: String,
-		required: true
-	} },
-	setup(props) {
-		return () => h("style", { "data-astryx-theme-style": "" }, 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,
-			...themeStyle(props.theme)
-		}));
-		__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
-//#region src/Theme/useTheme.ts
-function readDocumentToken(name, mode) {
-	if (typeof document === "undefined") return "";
-	const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-	return raw ? resolveLightDark(raw, mode) : "";
-}
-/**
-* Read the nearest theme. Outside a `Theme`, the name is `neutral` and tokens
-* are read from the document's custom properties.
-*/
-function useTheme() {
-	const context = inject(themeContextKey, null);
-	const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
-	const mode = computed(() => {
-		const requested = context?.value.mode;
-		if (requested === "light" || requested === "dark") return requested;
-		return readColorMode(prefersDark.value);
-	});
-	const name = computed(() => context?.value.theme.name ?? "neutral");
-	const tokens = computed(() => {
-		const source = context?.value.theme.tokens ?? {};
-		const resolved = {};
-		for (const [key, value] of Object.entries(source)) resolved[key] = resolveLightDark(value, mode.value);
-		return resolved;
-	});
-	function token(tokenName) {
-		const key = normalizeTokenName(tokenName);
-		return tokens.value[key] ?? readDocumentToken(key, mode.value);
-	}
-	return {
-		name,
-		mode,
-		token,
-		tokens
-	};
-}
-//#endregion
-export { defineTheme as a, expandTypeScale as c, expandColorScale as d, normalizeTokenName as f, _sfc_main$1 as i, expandRadiusScale as l, useMediaTheme as n, isDefinedTheme as o, _sfc_main as r, neutralTheme as s, useTheme as t, expandMotionScale as u };