@vireo-ai/trellis-ui 0.1.61 → 0.1.62

package/packages/theme-engine/dist/trellis.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
-import { randomUUID } from "node:crypto";
+import { createHash, randomUUID } from "node:crypto";
 import { lstat, mkdir, readFile, realpath, rename, rm, stat, writeFile } from "node:fs/promises";
 import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -2711,7 +2712,8 @@ var extensions = (variable, artifact, options = {}) => ({ "dev.trellis": {
 		variable,
 		artifact,
 		...options.registry === void 0 ? {} : { registry: options.registry },
-		...options.unit === void 0 ? {} : { unit: options.unit }
+		...options.unit === void 0 ? {} : { unit: options.unit },
+		...options.spring === void 0 ? {} : { spring: options.spring }
 	},
 	...options.fluid === void 0 ? {} : { fluid: options.fluid }
 } });
@@ -2773,36 +2775,6 @@ var shadowValue = (layers) => {
 	}));
 	return values.length === 1 ? values[0] : values;
 };
-var addMotionTokens = (group, theme) => {
-	const { tempo, elasticity, displacement, duration, displacementScale, bounce } = theme.motion;
-	const number = (path, value, variable) => put(group, path, token("number", Number(value.toFixed(3)), variable, "runtime"));
-	number(["motion", "tempo"], tempo, "--motion-tempo");
-	number(["motion", "elasticity"], elasticity, "--motion-elasticity");
-	number(["motion", "displacement"], displacement, "--motion-displacement");
-	for (const [name, value] of Object.entries(duration)) put(group, [
-		"motion",
-		"duration",
-		name
-	], token("duration", {
-		value,
-		unit: "ms"
-	}, `--motion-duration-${name}`, "runtime"));
-	number(["motion", "displacement-scale"], displacementScale, "--motion-displacement-scale");
-	for (const [name, value] of Object.entries({
-		feedback: bounce.feedback,
-		presence: bounce.presence,
-		"presence-emphasized": bounce.presenceEmphasized,
-		layout: bounce.layout,
-		"layout-quick": bounce.layoutQuick,
-		"layout-spring": bounce.layoutSpring,
-		resize: bounce.resize,
-		"gesture-settle": bounce.gestureSettle
-	})) number([
-		"motion",
-		"bounce",
-		name
-	], value, `--motion-bounce-${name}`);
-};
 var spacingName = (step) => String(step).replace(".", "-");
 var addInvariantTokens = (group, theme) => {
 	const expandedTreatment = theme.appearances.light.semantic.interactions.disclosure.expandedTreatment;
@@ -2909,6 +2881,11 @@ var addInvariantTokens = (group, theme) => {
 			], token("dimension", alias(["radius", String(step)]), `--radius-${role}-${choice}`, "invariant", { registry: "theme" }));
 		}
 	}
+	put(group, [
+		"radius",
+		"role",
+		"dismiss"
+	], token("dimension", alias(["radius", String(theme.radius.dismiss)]), "--radius-dismiss", "invariant", { registry: "theme" }));
 	put(group, ["radius", "none"], dimensionToken(0, "--radius-none"));
 	put(group, ["radius", "full"], dimensionToken(9999, "--radius-full"));
 	put(group, ["radius", "circle"], token("number", .5, "--radius-circle", "invariant", {
@@ -3019,7 +2996,6 @@ var addInvariantTokens = (group, theme) => {
 		registry: "theme",
 		unit: "ch"
 	}));
-	addMotionTokens(group, theme);
 };
 var compositeColor = (semantic, substrate, surface) => semantic?.composites.find((candidate) => candidate.substrate === substrate && candidate.surface === surface)?.color;
 var addAppearanceTokens = (group, appearance) => {
@@ -3222,6 +3198,7 @@ var generateDesignTokens = (theme) => {
 //#endregion
 //#region packages/theme-engine/src/design-tokens/validate.ts
 var TOKEN_TYPES = /* @__PURE__ */ new Set([
+	"cubicBezier",
 	"color",
 	"dimension",
 	"duration",
@@ -3349,7 +3326,12 @@ var validateFontResource = (value, path, diagnostics) => {
 		reject(diagnostics, path, value, "A font resource must be an object.");
 		return;
 	}
-	if (typeof value.id !== "string") reject(diagnostics, `${path}/id`, value.id, "A font resource id must be a string.");
+	if (typeof value.resourceId !== "string") reject(diagnostics, `${path}/resourceId`, value.resourceId, "A font resource name must be a string.");
+	if (value.type === "fontsource") {
+		if (typeof value.id !== "string" || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value.id)) reject(diagnostics, `${path}/id`, value.id, "Invalid Fontsource catalog id.");
+		if (typeof value.version !== "string" || !/^\d+\.\d+\.\d+$/.test(value.version)) reject(diagnostics, `${path}/version`, value.version, "Fontsource requires an exact package version.");
+		return;
+	}
 	if (value.type === "bunny") {
 		if (typeof value.url !== "string") reject(diagnostics, `${path}/url`, value.url, "A Bunny font resource URL must be a string.");
 		return;
@@ -3369,6 +3351,7 @@ var validateFontResource = (value, path, diagnostics) => {
 			return;
 		}
 		for (const field of ["family", "src"]) if (typeof face[field] !== "string") reject(diagnostics, `${facePath}/${field}`, face[field], `Font face ${field} must be a string.`);
+		if (face.unicodeRange !== void 0 && (typeof face.unicodeRange !== "string" || !/^U\+[0-9A-F?]+(?:-[0-9A-F]+)?(?:\s*,\s*U\+[0-9A-F?]+(?:-[0-9A-F]+)?)*$/i.test(face.unicodeRange))) reject(diagnostics, `${facePath}/unicodeRange`, face.unicodeRange, "Invalid font Unicode range.");
 		if (!FONT_FORMATS.has(String(face.format))) reject(diagnostics, `${facePath}/format`, face.format, "The font face format is not supported by Trellis.");
 		if (!FONT_STYLES.has(String(face.style))) reject(diagnostics, `${facePath}/style`, face.style, "The font face style is not supported by Trellis.");
 		if (!isRecord$1(face.weight)) reject(diagnostics, `${facePath}/weight`, face.weight, "Font face weight must be an object.");
@@ -3401,6 +3384,9 @@ var validateTokenValue = (type, value, path, diagnostics) => {
 		case "dimension":
 			validateDimension(value, path, diagnostics);
 			break;
+		case "cubicBezier":
+			if (!Array.isArray(value) || value.length !== 4 || !value.every(isFiniteNumber) || value[0] < 0 || value[0] > 1 || value[2] < 0 || value[2] > 1) reject(diagnostics, path, value, "A cubic bezier must contain four finite coordinates with x values from 0 to 1.");
+			break;
 		case "duration":
 			validateDimension(value, path, diagnostics, DURATION_UNITS);
 			break;
@@ -5071,7 +5057,12 @@ var RadiusConfigSchema = Type.Object({
 		control: Type.Optional(RadiusStepSchema),
 		surface: Type.Optional(RadiusStepSchema),
 		overlay: Type.Optional(RadiusStepSchema)
-	}, closed$1))
+	}, closed$1)),
+	dismiss: Type.Optional(Type.Union([
+		RadiusStepSchema,
+		Type.Literal("none"),
+		Type.Literal("full")
+	]))
 }, closed$1);
 var SpacingStepSchema = Type.Number({
 	minimum: 0,
@@ -5197,37 +5188,46 @@ var FontWeightRangeSchema = Type.Object({
 		maximum: 1e3
 	})
 }, closed$1);
-var FontResourceSchema = Type.Union([Type.Object({
-	type: Type.Literal("bunny"),
-	url: Type.String({
-		minLength: 1,
-		maxLength: 2048
-	})
-}, closed$1), Type.Object({
-	type: Type.Literal("local"),
-	faces: Type.Array(Type.Object({
-		family: Type.String({
-			minLength: 1,
-			maxLength: 128
-		}),
-		src: Type.String({
+var FontResourceSchema = Type.Union([
+	Type.Object({
+		type: Type.Literal("fontsource"),
+		id: Type.String({ pattern: "^[a-z0-9]+(?:-[a-z0-9]+)*$" }),
+		version: Type.String({ pattern: "^\\d+\\.\\d+\\.\\d+$" })
+	}, closed$1),
+	Type.Object({
+		type: Type.Literal("bunny"),
+		url: Type.String({
 			minLength: 1,
 			maxLength: 2048
-		}),
-		format: Type.Union([
-			Type.Literal("woff2"),
-			Type.Literal("woff"),
-			Type.Literal("opentype"),
-			Type.Literal("truetype")
-		]),
-		weight: FontWeightRangeSchema,
-		style: Type.Union([
-			Type.Literal("normal"),
-			Type.Literal("italic"),
-			Type.Literal("oblique")
-		])
-	}, closed$1), { minItems: 1 })
-}, closed$1)]);
+		})
+	}, closed$1),
+	Type.Object({
+		type: Type.Literal("local"),
+		faces: Type.Array(Type.Object({
+			family: Type.String({
+				minLength: 1,
+				maxLength: 128
+			}),
+			src: Type.String({
+				minLength: 1,
+				maxLength: 2048
+			}),
+			format: Type.Union([
+				Type.Literal("woff2"),
+				Type.Literal("woff"),
+				Type.Literal("opentype"),
+				Type.Literal("truetype")
+			]),
+			weight: FontWeightRangeSchema,
+			style: Type.Union([
+				Type.Literal("normal"),
+				Type.Literal("italic"),
+				Type.Literal("oblique")
+			]),
+			unicodeRange: Type.Optional(Type.String({ pattern: "^U\\+[0-9A-Fa-f?]+(?:-[0-9A-Fa-f]+)?(?:\\s*,\\s*U\\+[0-9A-Fa-f?]+(?:-[0-9A-Fa-f]+)?)*$" }))
+		}, closed$1), { minItems: 1 })
+	}, closed$1)
+]);
 var FontFamilyBindingSchema = Type.Object({
 	resource: FontResourceNameSchema,
 	family: Type.String({
@@ -5488,6 +5488,11 @@ var IntentRoleProfileSchema = Type.Object({
 		rest: Type.Optional(SemanticColorReferenceSchema),
 		hover: Type.Optional(SemanticColorReferenceSchema),
 		pressed: Type.Optional(SemanticColorReferenceSchema),
+		strength: Type.Optional(Type.Object({
+			rest: Type.Optional(StateLayerStrengthSchema),
+			hover: Type.Optional(StateLayerStrengthSchema),
+			pressed: Type.Optional(StateLayerStrengthSchema)
+		}, closed$1)),
 		foreground: Type.Optional(SemanticColorReferenceSchema),
 		foregroundMuted: Type.Optional(SemanticColorReferenceSchema)
 	}, closed$1)),
@@ -5652,13 +5657,6 @@ var SemanticConfigSchema = Type.Object({
 		}, closed$1))
 	}, closed$1)) }, closed$1))
 }, closed$1);
-var MotionConfigSchema = Type.Object({
-	strategy: Type.Literal("semantic-motion"),
-	version: Type.Literal(1),
-	tempo: Type.Optional(Type.Number(unit)),
-	elasticity: Type.Optional(Type.Number(unit)),
-	displacement: Type.Optional(Type.Number(unit))
-}, closed$1);
 var ThemeConfigSchema = Type.Object({
 	$schema: Type.Optional(Type.String()),
 	schemaVersion: Type.Literal(1),
@@ -5690,7 +5688,6 @@ var ThemeConfigSchema = Type.Object({
 	spacing: Type.Optional(SpacingConfigSchema),
 	typography: Type.Optional(TypographyConfigSchema),
 	sizing: Type.Optional(SizingConfigSchema),
-	motion: Type.Optional(MotionConfigSchema),
 	semantic: Type.Optional(SemanticConfigSchema)
 }, {
 	$schema: "https://json-schema.org/draft/2020-12/schema",
@@ -10806,13 +10803,6 @@ var parseColor = (input, path) => {
 var isThemeDiagnostic = (value) => "severity" in value;
 //#endregion
 //#region packages/theme-engine/src/defaults.ts
-var BASELINE_MOTION = {
-	strategy: "semantic-motion",
-	version: 1,
-	tempo: .5,
-	elasticity: 0,
-	displacement: .5
-};
 var BASELINE_SUBSTRATE = {
 	strategy: "region-substrates",
 	version: 1,
@@ -10904,7 +10894,8 @@ var BASELINE_RADIUS = {
 		control: 3,
 		surface: 4,
 		overlay: 5
-	}
+	},
+	dismiss: "full"
 };
 var BASELINE_EDGE = {
 	strategy: "fixed-line-weights",
@@ -10969,7 +10960,7 @@ var BASELINE_SPACING = {
 			headerGap: 2,
 			headerPaddingInline: 3,
 			headerPaddingBlock: 2,
-			contentGap: 1,
+			contentGap: .5,
 			contentPaddingInline: 2,
 			contentPaddingBlock: 2
 		}
@@ -11104,10 +11095,10 @@ var BASELINE_SIZING = {
 			inset: fixedSizing(2)
 		},
 		menu: { minimumWidth: fixedSizing(192) },
-		menuItem: { controlSize: "lg" },
+		menuItem: { controlSize: "md" },
 		keybinding: { key: {
-			minimum: 18,
-			maximum: 18.5
+			minimum: 16,
+			maximum: 16
 		} },
 		select: { listboxMaxHeight: fixedSizing(256) },
 		panel: {
@@ -11166,12 +11157,14 @@ var BASELINE_TYPOGRAPHY = {
 	},
 	resources: {
 		brand: {
-			type: "bunny",
-			url: "https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap"
+			type: "fontsource",
+			id: "inter",
+			version: "5.3.0"
 		},
 		code: {
-			type: "bunny",
-			url: "https://fonts.bunny.net/css?family=fira-code:400,500,600,700&display=swap"
+			type: "fontsource",
+			id: "fira-code",
+			version: "5.3.0"
 		}
 	},
 	families: {
@@ -11204,8 +11197,8 @@ var BASELINE_TYPOGRAPHY = {
 		},
 		2: {
 			size: {
-				minimum: 14,
-				maximum: 14
+				minimum: 13,
+				maximum: 13
 			},
 			lineHeight: {
 				minimum: 20,
@@ -11416,17 +11409,22 @@ var intent = (family, neutral = false) => ({
 	},
 	soft: {
 		rest: {
-			kind: "alpha-step",
-			step: 3
+			kind: neutral ? "alpha-step" : "step",
+			step: neutral ? 2 : 9
 		},
 		hover: {
-			kind: "alpha-step",
-			step: 4
+			kind: neutral ? "alpha-step" : "step",
+			step: neutral ? 3 : 9
 		},
 		pressed: {
-			kind: "alpha-step",
-			step: 5
+			kind: neutral ? "alpha-step" : "step",
+			step: neutral ? 4 : 9
 		},
+		...neutral ? {} : { strength: {
+			rest: .1,
+			hover: .15,
+			pressed: .2
+		} },
 		foreground: {
 			kind: "step",
 			step: 11
@@ -12666,6 +12664,7 @@ var validateTypography = (typography) => {
 			}
 			continue;
 		}
+		if (resource.type === "fontsource") continue;
 		for (const [index, face] of resource.faces.entries()) if (face.weight.minimum > face.weight.maximum) diagnostics.push({
 			severity: "error",
 			code: "config.typography-weight-range",
@@ -12706,6 +12705,15 @@ var validateTypography = (typography) => {
 				requested: family.family,
 				message: `Typography family ${name} is not requested by its Bunny font resource.`
 			});
+		} else if (resource.type === "fontsource") {
+			if (family.family.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/^-|-$/g, "") !== resource.id) diagnostics.push({
+				severity: "error",
+				code: "config.typography-family-unavailable",
+				stage: "config",
+				path: `/typography/families/${name}/family`,
+				requested: family.family,
+				message: `Typography family ${name} does not match its Fontsource catalog id.`
+			});
 		} else if (!resource.faces.some((face) => face.family === family.family)) diagnostics.push({
 			severity: "error",
 			code: "config.typography-family-unavailable",
@@ -12826,7 +12834,7 @@ var validateTypography = (typography) => {
 		const resource = family === void 0 ? void 0 : typography.resources[family.resource];
 		if (family === void 0 || resource === void 0) continue;
 		const value = typography.weights[weightName];
-		if (!(resource.type === "bunny" ? bunnyFamilies.get(family.resource)?.get(family.family.toLowerCase().trim().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/^-|-$/g, ""))?.has(value) === true : resource.faces.some((face) => face.family === family.family && face.style === "normal" && face.weight.minimum <= value && face.weight.maximum >= value))) diagnostics.push({
+		if (!(resource.type === "fontsource" ? true : resource.type === "bunny" ? bunnyFamilies.get(family.resource)?.get(family.family.toLowerCase().trim().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/^-|-$/g, ""))?.has(value) === true : resource.faces.some((face) => face.family === family.family && face.style === "normal" && face.weight.minimum <= value && face.weight.maximum >= value))) diagnostics.push({
 			severity: "error",
 			code: "config.typography-weight-unavailable",
 			stage: "config",
@@ -12999,7 +13007,6 @@ var resolveThemeConfig = (input) => {
 	diagnostics.push(...validateTypography(typography));
 	const sizing = mergeObjects(BASELINE_SIZING, config.sizing);
 	diagnostics.push(...validateSizing(sizing));
-	const motion = mergeObjects(BASELINE_MOTION, config.motion);
 	const semantic = resolveSemantic(config, diagnostics);
 	const neutral = resolveFamily(familyConfig.catalogue.get("neutral"), config, familyConfig.appearanceOverrides, policies, diagnostics);
 	const accent = resolveFamily(familyConfig.catalogue.get("accent"), config, familyConfig.appearanceOverrides, policies, diagnostics);
@@ -13035,7 +13042,6 @@ var resolveThemeConfig = (input) => {
 	buildPolicyProvenance(spacing, config.spacing, "/spacing", provenance);
 	buildPolicyProvenance(typography, config.typography, "/typography", provenance);
 	buildPolicyProvenance(sizing, config.sizing, "/sizing", provenance);
-	buildPolicyProvenance(motion, config.motion, "/motion", provenance);
 	buildPolicyProvenance(semantic, config.semantic, "/semantic", provenance);
 	const authoredInteractions = config.semantic?.interactions;
 	if (authoredInteractions?.version === 1) {
@@ -13093,7 +13099,6 @@ var resolveThemeConfig = (input) => {
 			spacing,
 			typography,
 			sizing,
-			motion,
 			semantic,
 			provenance
 		}
@@ -13115,6 +13120,13 @@ var compositeLinearRgb = (foreground, opacity, background) => [
 	foreground[1] * opacity + background[1] * (1 - opacity),
 	foreground[2] * opacity + background[2] * (1 - opacity)
 ];
+/** Browser source-over compositing uses encoded sRGB channels. */
+var compositeSrgb = (foreground, background) => {
+	if (foreground.alpha === 1) return foreground;
+	const source = asColor(foreground).to("srgb").coords;
+	const destination = asColor(background).to("srgb").coords;
+	return toCanonicalOklch(new Color("srgb", source.map((channel, index) => Number(channel) * foreground.alpha + Number(destination[index]) * (1 - foreground.alpha)), 1));
+};
 //#endregion
 //#region packages/theme-engine/src/color/policies/alpha/substrate-composite.ts
 var clamp$1 = (value) => Math.min(1, Math.max(0, value));
@@ -13720,6 +13732,11 @@ var normalizeConstraintPriorityRamp = (input) => {
 	};
 };
 //#endregion
+//#region packages/theme-engine/src/color/css-color.ts
+var number$1 = (value) => Number(value.toPrecision(6)).toString();
+/** The emitted color representation is also the input to rendered contrast proof. */
+var cssColor = (color) => `oklch(${number$1(color.lightness * 100)}% ${number$1(color.chroma)} ${color.hue === null ? "none" : number$1(color.hue)} / ${number$1(color.alpha)})`;
+//#endregion
 //#region packages/theme-engine/src/color/srgb-proof.ts
 var isInSrgb = (color) => asColor(color).inGamut("srgb", { epsilon: 0 });
 var mapToSrgb = (canonicalColor) => {
@@ -13757,7 +13774,33 @@ var proveRampInSrgb = (ramp) => ({
 //#region packages/theme-engine/src/color/policies/pairing/accessible-ink.ts
 var meetsMinimum = (solution, target) => solution.measurements.wcagRatio >= target.minimumWcagRatio;
 var meetsTarget = (solution, target) => solution.measurements.wcagRatio >= target.targetWcagRatio && Math.abs(solution.measurements.apcaLc) >= target.targetApcaLc;
-var solvePolarity = (name, background, policy, target, polarity) => {
+var measureInk = (backgrounds, color) => {
+	const proof = (value) => {
+		const srgb = new Color(cssColor(value)).to("srgb");
+		const serialized = toCanonicalOklch(srgb);
+		srgb.coords = srgb.coords.map((channel) => Math.round(Math.min(1, Math.max(0, Number(channel))) * 255) / 255);
+		return {
+			serialized,
+			rendered: toCanonicalOklch(srgb)
+		};
+	};
+	const proofs = backgrounds.map((surface) => {
+		const foreground = compositeSrgb(color, surface);
+		const floating = measureContrast(surface, foreground);
+		const backgroundProof = proof(surface);
+		const foregroundProof = proof(foreground);
+		return {
+			...floating,
+			wcagRatio: Math.min(floating.wcagRatio, measureContrast(backgroundProof.serialized, foregroundProof.serialized).wcagRatio, measureContrast(backgroundProof.rendered, foregroundProof.rendered).wcagRatio)
+		};
+	});
+	return {
+		wcagRatio: Math.min(...proofs.map(({ wcagRatio }) => wcagRatio)),
+		apcaLc: proofs.reduce((a, b) => Math.abs(a.apcaLc) < Math.abs(b.apcaLc) ? a : b).apcaLc
+	};
+};
+var solvePolarity = (name, backgrounds, policy, target, polarity) => {
+	const background = backgrounds[0];
 	const desiredChroma = Math.min(target.maximumChroma, background.chroma * policy.chromaInfluence);
 	const candidate = (lightness) => {
 		const color = proveColorInSrgb({
@@ -13771,15 +13814,15 @@ var solvePolarity = (name, background, policy, target, polarity) => {
 			name,
 			color,
 			polarity,
-			measurements: measureContrast(background, color),
+			measurements: measureInk(backgrounds, color),
 			targetMet: false
 		};
 	};
 	const endpoint = candidate(polarity === "darker" ? 0 : 1);
 	if (!meetsMinimum(endpoint, target)) return void 0;
 	const solveNearest = (predicate) => {
-		let lower = polarity === "darker" ? 0 : background.lightness;
-		let upper = polarity === "darker" ? background.lightness : 1;
+		let lower = polarity === "darker" ? 0 : Math.max(...backgrounds.map(({ lightness }) => lightness));
+		let upper = polarity === "darker" ? Math.min(...backgrounds.map(({ lightness }) => lightness)) : 1;
 		for (let iteration = 0; iteration < 28; iteration += 1) {
 			const midpoint = (lower + upper) / 2;
 			const ink = candidate(midpoint);
@@ -13800,10 +13843,11 @@ var solvePolarity = (name, background, policy, target, polarity) => {
 		distance: Math.abs(background.lightness - solution.color.lightness)
 	};
 };
-var selectSolution = (name, step, background, policy, target) => {
+var selectSolution = (name, step, backgrounds, policy, target) => {
+	const background = backgrounds[0];
 	const polarities = policy.polarity === "auto" ? ["darker", "lighter"] : [policy.polarity];
 	const preferred = policy.polarity === "auto" && (step === 9 || step === 10) ? background.lightness <= policy.polarityPivot ? "lighter" : "darker" : void 0;
-	return polarities.map((polarity) => solvePolarity(name, background, policy, target, polarity)).filter((solution) => solution !== void 0).sort((first, second) => Number(second.polarity === preferred) - Number(first.polarity === preferred) || Number(second.targetMet) - Number(first.targetMet) || (first.targetMet ? first.distance - second.distance : second.measurements.wcagRatio - first.measurements.wcagRatio) || first.distance - second.distance || (first.polarity === "darker" ? -1 : 1))[0];
+	return polarities.map((polarity) => solvePolarity(name, backgrounds, policy, target, polarity)).filter((solution) => solution !== void 0).sort((first, second) => Number(second.polarity === preferred) - Number(first.polarity === preferred) || Number(second.targetMet) - Number(first.targetMet) || (first.targetMet ? first.distance - second.distance : second.measurements.wcagRatio - first.measurements.wcagRatio) || first.distance - second.distance || (first.polarity === "darker" ? -1 : 1))[0];
 };
 var fitSolidInkRamp = (input) => {
 	const diagnostics = [];
@@ -13904,20 +13948,24 @@ var fitSolidInkRamp = (input) => {
 		diagnostics
 	};
 };
-var pairAccessibleInks = (input) => {
-	const diagnostics = [];
-	const inks = {};
-	const targets = [
-		["ink", input.policy.ink],
-		["ink-subtle", input.policy.inkSubtle],
-		["ink-muted", input.policy.inkMuted],
-		...Object.entries(input.policy.additional)
-	];
-	for (const [name, target] of targets) {
-		const solution = selectSolution(name, input.step ?? 1, input.background, input.policy, target);
-		const path = `${input.path ?? "/color"}/srgb-proof/${name}`;
-		if (solution === void 0) {
-			diagnostics.push({
+var pairAccessibleInk = (input) => {
+	const { name, target, path } = input;
+	let value;
+	if (input.preferred !== void 0) {
+		const measurements = measureInk(input.backgrounds, input.preferred);
+		if (measurements.wcagRatio >= target.minimumWcagRatio) value = {
+			name,
+			color: input.preferred,
+			polarity: input.preferred.lightness < input.backgrounds[0].lightness ? "darker" : "lighter",
+			measurements,
+			targetMet: meetsTarget({ measurements }, target)
+		};
+	}
+	if (value === void 0) {
+		const solution = selectSolution(name, input.step ?? 1, input.backgrounds, input.policy, target);
+		if (solution === void 0) return {
+			ok: false,
+			diagnostics: [{
 				severity: "error",
 				code: "pairing.minimum-unreachable",
 				stage: "pairing",
@@ -13926,21 +13974,46 @@ var pairAccessibleInks = (input) => {
 					target,
 					polarity: input.policy.polarity
 				},
-				message: `${name} cannot meet its minimum WCAG ratio against the generated background.`
-			});
-			continue;
-		}
-		const { distance: _distance, ...ink } = solution;
-		inks[name] = ink;
-		if (!ink.targetMet) diagnostics.push({
+				message: `${name} cannot meet its minimum WCAG ratio against every generated background with the configured polarity.`
+			}]
+		};
+		const { distance: _distance, ...paired } = solution;
+		value = paired;
+	}
+	return {
+		ok: true,
+		value,
+		diagnostics: value.targetMet ? [] : [{
 			severity: "warning",
 			code: "pairing.target-constrained",
 			stage: "pairing",
 			path,
 			requested: target,
-			effective: ink.measurements,
+			effective: value.measurements,
 			message: `${name} meets its minimum contrast but cannot reach every preferred target.`
+		}]
+	};
+};
+var pairAccessibleInks = (input) => {
+	const diagnostics = [];
+	const inks = {};
+	const targets = [
+		["ink", input.policy.ink],
+		["ink-subtle", input.policy.inkSubtle],
+		["ink-muted", input.policy.inkMuted],
+		...Object.entries(input.policy.additional)
+	];
+	for (const [name, target] of targets) {
+		const result = pairAccessibleInk({
+			backgrounds: [input.background],
+			policy: input.policy,
+			target,
+			name,
+			path: `${input.path ?? "/color"}/srgb-proof/${name}`,
+			...input.step === void 0 ? {} : { step: input.step }
 		});
+		diagnostics.push(...result.diagnostics);
+		if (result.ok) inks[name] = result.value;
 	}
 	return diagnostics.some(({ severity }) => severity === "error") ? {
 		ok: false,
@@ -14560,13 +14633,13 @@ var calibrateSolidState = (rest, state, solidInk, minimumDeltaE, family, authore
 		minimumDeltaE: deltaEOK(rest.color, color)
 	};
 };
-var intentOutput = (appearance, profile, families, surfaces, family) => {
-	const color = (reference) => semanticColor(families, profile.family, reference, surfaces);
+var intentOutput = (appearance, profile, families, surfaces, family, path, diagnostics) => {
+	const color = (reference, strength) => semanticColor(families, profile.family, reference, surfaces, strength);
 	const textRest = color(profile.text.rest);
 	const textHover = color(profile.text.hover);
-	const softRest = color(profile.soft.rest);
-	const softHover = color(profile.soft.hover);
-	const softPressed = color(profile.soft.pressed);
+	const softRest = color(profile.soft.rest, profile.soft.strength?.rest);
+	const softHover = color(profile.soft.hover, profile.soft.strength?.hover);
+	const softPressed = color(profile.soft.pressed, profile.soft.strength?.pressed);
 	const softInk = color(profile.soft.foreground);
 	const softInkMuted = color(profile.soft.foregroundMuted);
 	const solidRest = color(profile.solid.rest);
@@ -14595,6 +14668,42 @@ var intentOutput = (appearance, profile, families, surfaces, family) => {
 		focus,
 		solidInk
 	].some((value) => value === void 0)) return;
+	const softBackgrounds = Object.values(surfaces.substrates).flatMap((substrate) => substrate.levels.flatMap((surface) => [
+		softRest,
+		softHover,
+		softPressed
+	].map(({ color }) => compositeSrgb(color, surface.color.mappedColor))));
+	const softInks = {
+		ink: softInk,
+		inkMuted: softInkMuted
+	};
+	for (const [role, field] of [["ink", "foreground"], ["inkMuted", "foregroundMuted"]]) {
+		const foreground = softInks[role];
+		const paired = pairAccessibleInk({
+			backgrounds: softBackgrounds,
+			policy: family.policies.pairing,
+			target: family.policies.pairing[role],
+			preferred: foreground.color,
+			name: "soft-ink",
+			path: `${path}/soft/${field}`
+		});
+		diagnostics.push(...paired.diagnostics);
+		if (!paired.ok) return void 0;
+		if (paired.value.color !== foreground.color) diagnostics.push({
+			severity: "information",
+			code: "semantic.soft-ink-adjusted",
+			stage: "semantic",
+			path: `${path}/soft/${field}`,
+			requested: foreground.color,
+			effective: paired.value.color,
+			message: "Adjusted soft ink to meet minimum contrast on rest, hover and pressed surfaces."
+		});
+		softInks[role] = {
+			...foreground,
+			color: paired.value.color,
+			composites: paired.value.color === foreground.color ? foreground.composites : []
+		};
+	}
 	const calibratedHover = calibrateSolidState(solidRest, solidHover, solidInk, profile.solid.separation.hover[appearance], family, families[profile.family].steps[profile.solid.hover.step - 1].requestedColor.lightness - families[profile.family].steps[profile.solid.rest.step - 1].requestedColor.lightness);
 	const calibratedPressed = calibrateSolidState(solidRest, solidPressed, solidInk, profile.solid.separation.pressed[appearance], family, families[profile.family].steps[profile.solid.pressed.step - 1].requestedColor.lightness - families[profile.family].steps[profile.solid.rest.step - 1].requestedColor.lightness);
 	if (calibratedHover === void 0 || calibratedPressed === void 0) return void 0;
@@ -14607,8 +14716,7 @@ var intentOutput = (appearance, profile, families, surfaces, family) => {
 			rest: softRest,
 			hover: softHover,
 			pressed: softPressed,
-			ink: softInk,
-			inkMuted: softInkMuted
+			...softInks
 		},
 		solid: {
 			rest: solidRest,
@@ -14629,7 +14737,7 @@ var intentOutput = (appearance, profile, families, surfaces, family) => {
 	};
 };
 var layer = (reference, families, surfaces, calibration = "surfaces") => semanticColor(families, reference.family, reference.color, surfaces, reference.strength, calibration);
-var interactionOutput = (config, families, surfaces) => {
+var interactionOutput = (config, families, surfaces, familyAppearances, diagnostics) => {
 	const hover = layer(config.actions.hover, families, surfaces, "substrates");
 	const pressed = layer(config.actions.pressed, families, surfaces, "substrates");
 	const treatments = {};
@@ -14646,11 +14754,37 @@ var interactionOutput = (config, families, surfaces) => {
 		}, families, surfaces);
 		const foreground = semanticColor(families, treatment.family, treatment.foreground, surfaces);
 		if (background === void 0 || backgroundHover === void 0 || foreground === void 0) return void 0;
+		const policy = familyAppearances[treatment.family].policies.pairing;
+		const backgrounds = ["workspace", "chrome"].flatMap((substrate) => surfaces.substrates[substrate].levels.flatMap((surface) => [background, backgroundHover].map(({ color }) => compositeSrgb(color, surface.color.mappedColor))));
+		const path = `/semantic/interactions/selection/treatments/${name}/foreground`;
+		const paired = pairAccessibleInk({
+			backgrounds,
+			policy,
+			target: policy.ink,
+			preferred: foreground.color,
+			name: "selection-ink",
+			path
+		});
+		diagnostics.push(...paired.diagnostics);
+		if (!paired.ok) return void 0;
+		if (paired.value.color !== foreground.color) diagnostics.push({
+			severity: "information",
+			code: "semantic.selection-ink-adjusted",
+			stage: "semantic",
+			path,
+			requested: foreground.color,
+			effective: paired.value.color,
+			message: "Adjusted selection ink to meet minimum contrast on selected and selected-hover surfaces."
+		});
 		treatments[name] = {
 			family: treatment.family,
 			background,
 			backgroundHover,
-			foreground
+			foreground: {
+				...foreground,
+				color: paired.value.color,
+				composites: paired.value.color === foreground.color ? foreground.composites : []
+			}
 		};
 	}
 	const defaultTreatment = treatments[config.selection.default];
@@ -14738,7 +14872,7 @@ var generateSemanticRoles = (appearance, families, config, surfaces, familyAppea
 	for (const [name, profile] of Object.entries(config.roles.intents)) {
 		if (profile === void 0) continue;
 		const family = familyAppearances[profile.family];
-		const output = family === void 0 ? void 0 : intentOutput(appearance, profile, families, surfaces, family);
+		const output = family === void 0 ? void 0 : intentOutput(appearance, profile, families, surfaces, family, `/semantic/intents/${name}`, diagnostics);
 		if (output === void 0) diagnostics.push({
 			severity: "error",
 			code: "semantic.reference-unresolved",
@@ -14751,15 +14885,16 @@ var generateSemanticRoles = (appearance, families, config, surfaces, familyAppea
 			output
 		};
 	}
-	const interactions = interactionOutput(config.interactions, families, surfaces);
-	if (interactions === void 0) diagnostics.push({
+	const interactionDiagnosticStart = diagnostics.length;
+	const interactions = interactionOutput(config.interactions, families, surfaces, familyAppearances, diagnostics);
+	if (interactions === void 0 && !diagnostics.slice(interactionDiagnosticStart).some(({ severity }) => severity === "error")) diagnostics.push({
 		severity: "error",
 		code: "semantic.reference-unresolved",
 		stage: "semantic",
 		path: "/semantic/interactions",
 		message: "Semantic interaction layers could not resolve every configured color reference."
 	});
-	return diagnostics.length > 0 ? {
+	return diagnostics.some(({ severity }) => severity === "error") ? {
 		ok: false,
 		diagnostics
 	} : {
@@ -14890,8 +15025,26 @@ var validateGeneratedColorTheme = (theme) => {
 			if (resolved === void 0) continue;
 			const intentOutput = generated.semantic.intents[intent];
 			if (intentOutput === void 0 || intentOutput.family !== resolved.family) diagnostics.push(error("validation.semantic-intent-missing", `${appearancePath}/semantic/intents/${intent}`, `Appearance ${appearance} is missing resolved semantic intent ${intent}.`, appearance));
+			if (intentOutput === void 0) continue;
+			const policy = resolvedFamily(theme, intentOutput.family, appearance)?.policies.pairing;
+			const soft = intentOutput.output.soft;
+			for (const [role, field] of [["ink", "foreground"], ["inkMuted", "foregroundMuted"]]) if (!(policy !== void 0 && Object.values(generated.surfaces.substrates).every((substrate) => substrate.levels.every((surface) => [
+				soft.rest,
+				soft.hover,
+				soft.pressed
+			].every((layer) => {
+				const background = compositeSrgb(layer.color, surface.color.mappedColor);
+				return measureContrast(background, compositeSrgb(soft[role].color, background)).wcagRatio + 1e-10 >= policy[role].minimumWcagRatio;
+			}))))) diagnostics.push(error("validation.soft-ink-contrast", `${appearancePath}/semantic/intents/${intent}/soft/${field}`, "Soft ink must meet minimum contrast on every rest, hover and pressed surface.", appearance, intentOutput.family));
 		}
 		if (!Number.isFinite(generated.semantic.structure.separatorMutedOpacity)) diagnostics.push(error("validation.semantic-output-missing", `${appearancePath}/semantic/structure`, "Semantic structure is incomplete.", appearance));
+		for (const [name, treatment] of Object.entries(generated.semantic.interactions.selection.treatments)) {
+			const policy = resolvedFamily(theme, treatment.family, appearance)?.policies.pairing;
+			if (!(policy !== void 0 && Object.values(generated.surfaces.substrates).every((substrate) => substrate.levels.every((surface) => [treatment.background, treatment.backgroundHover].every((layer) => {
+				const background = compositeSrgb(layer.color, surface.color.mappedColor);
+				return measureContrast(background, compositeSrgb(treatment.foreground.color, background)).wcagRatio + 1e-10 >= policy.ink.minimumWcagRatio;
+			}))))) diagnostics.push(error("validation.selection-ink-contrast", `${appearancePath}/semantic/interactions/selection/treatments/${name}/foreground`, "Selection ink must meet minimum contrast on every selected and selected-hover surface.", appearance, treatment.family));
+		}
 		const scrim = generated.semantic.composites.scrim;
 		if (scrim.composites.length !== 9 || scrim.composites.some(({ deltaE }) => !Number.isFinite(deltaE))) diagnostics.push(error("validation.scrim-output", `${appearancePath}/semantic/composites/scrim`, "Scrim is missing a valid sRGB proof over every surface.", appearance));
 	}
@@ -15211,7 +15364,8 @@ var generateRadiusScale = (config) => {
 				step,
 				value: byStep.get(step)
 			}];
-		}))
+		})),
+		dismiss: config.dismiss
 	};
 };
 //#endregion
@@ -15499,7 +15653,7 @@ var generateTypographyScale = (config) => {
 		strategy: "fluid-type-scale",
 		version: 1,
 		resources: Object.entries(config.resources).filter(([id]) => usedResources.has(id)).sort(([left], [right]) => left.localeCompare(right)).map(([id, resource]) => ({
-			id,
+			resourceId: id,
 			...structuredClone(resource)
 		})),
 		families: Object.fromEntries(Object.entries(config.families).sort(([left], [right]) => left.localeCompare(right)).map(([id, family]) => [id, {
@@ -15513,62 +15667,9 @@ var generateTypographyScale = (config) => {
 	};
 };
 //#endregion
-//#region packages/theme-engine/src/motion/semantic-motion.ts
-var rounded = (value) => Number(value.toFixed(3));
-var generateMotionScale = (config) => {
-	const durationScale = 1.4 - config.tempo * .8;
-	const milliseconds = (base) => Math.round(base * durationScale);
-	const bounce = (multiplier) => rounded(config.elasticity * multiplier);
-	return {
-		...config,
-		duration: {
-			fast: milliseconds(80),
-			moderate: milliseconds(160),
-			slow: milliseconds(240),
-			continuous: milliseconds(800)
-		},
-		displacementScale: rounded(.5 + config.displacement),
-		bounce: {
-			feedback: bounce(.12),
-			presence: bounce(.2),
-			presenceEmphasized: bounce(.24),
-			layout: bounce(.14),
-			layoutQuick: bounce(.08),
-			layoutSpring: bounce(.22),
-			resize: bounce(.18),
-			gestureSettle: bounce(.3)
-		}
-	};
-};
-//#endregion
 //#region packages/theme-engine/src/validate-generated-theme.ts
 var validateGeneratedTheme = (theme) => {
 	const diagnostics = validateGeneratedColorTheme(theme);
-	const durations = Object.values(theme.motion.duration);
-	if (durations.some((value) => !Number.isFinite(value) || value <= 0) || durations.some((value, index) => index > 0 && value <= durations[index - 1])) diagnostics.push({
-		severity: "error",
-		code: "validation.motion-duration",
-		stage: "validation",
-		path: "/motion/duration",
-		requested: theme.motion.duration,
-		message: "Generated motion durations must be finite, positive, and strictly increasing."
-	});
-	if (!Number.isFinite(theme.motion.displacementScale) || theme.motion.displacementScale < .5 || theme.motion.displacementScale > 1.5) diagnostics.push({
-		severity: "error",
-		code: "validation.motion-displacement",
-		stage: "validation",
-		path: "/motion/displacementScale",
-		requested: theme.motion.displacementScale,
-		message: "Generated motion displacement scale must stay within its supported range."
-	});
-	if (Object.values(theme.motion.bounce).some((value) => !Number.isFinite(value) || value < 0 || value > .3)) diagnostics.push({
-		severity: "error",
-		code: "validation.motion-bounce",
-		stage: "validation",
-		path: "/motion/bounce",
-		requested: theme.motion.bounce,
-		message: "Generated motion bounce values must stay between zero and 0.3."
-	});
 	if (theme.edge.widths.length !== EDGE_STEPS.length || theme.edge.widths.some(({ step }, index) => step !== EDGE_STEPS[index])) diagnostics.push({
 		severity: "error",
 		code: "validation.edge-steps",
@@ -15670,8 +15771,7 @@ var generateTheme = (input) => {
 		radius: generateRadiusScale(color.value.resolvedConfig.radius),
 		spacing: generateSpacingScale(color.value.resolvedConfig.spacing),
 		typography: generateTypographyScale(color.value.resolvedConfig.typography),
-		sizing: generateSizingScale(color.value.resolvedConfig.sizing),
-		motion: generateMotionScale(color.value.resolvedConfig.motion)
+		sizing: generateSizingScale(color.value.resolvedConfig.sizing)
 	};
 	const validationDiagnostics = validateGeneratedTheme(value);
 	if (validationDiagnostics.length > 0) return {
@@ -15721,16 +15821,7 @@ var compileMaterializedTheme = (request) => {
 	};
 };
 var LOCAL_THEME_COMPILER_PROVIDER = { compile: async (request) => compileMaterializedTheme(request) };
-//#endregion
-//#region packages/theme-engine/src/schema/theme-manifest.ts
-var closed = { additionalProperties: false };
-var ThemeOutputSchema = Type.Union([Type.Object({
-	format: Type.Literal("tailwind"),
-	path: Type.String({ minLength: 1 })
-}, closed), Type.Object({
-	format: Type.Literal("dtcg"),
-	path: Type.String({ minLength: 1 })
-}, closed)]);
+var ThemeOutputSchema = Type.Object({ path: Type.String({ minLength: 1 }) }, { additionalProperties: false });
 var ThemeManifestSchema = Type.Object({
 	$schema: Type.Literal("https://trellis.build/schemas/theme-manifest-v1.json"),
 	formatVersion: Type.Literal(1),
@@ -15783,7 +15874,7 @@ var dimensionTokenValue = (group, path) => {
 var scopedRoot = (lightSelector, darkSelector) => {
 	return `:where(${[...lightSelector.split(","), ...darkSelector.split(",")].map((selector) => selector.trim()).filter((selector, index, values) => selector.length > 0 && values.indexOf(selector) === index).join(", ")})`;
 };
-var gridSelector = (scope, requested) => `${scope} :where([data-ui-grid][data-columns="${requested}"], [data-ui-box][data-layout="grid"][data-columns="${requested}"])`;
+var gridSelector = (scope, requested) => `${scope} :where([data-ui-grid][data-columns="${requested}"], [data-ui-box][data-ui-layout-mode="grid"][data-columns="${requested}"])`;
 var rule$1 = (selector, declarations) => `${selector} {\n${declarations.map((declaration) => `  ${declaration}`).join("\n")}\n}`;
 var indent = (css) => css.split("\n").map((line) => line ? `  ${line}` : "").join("\n");
 var appStructureCss = (scope, breakpoint) => {
@@ -15826,7 +15917,7 @@ var appStructureCss = (scope, breakpoint) => {
 			"width: var(--ui-sidebar-width, var(--spacing-sidebar-width));",
 			"height: 100vh;",
 			"border-radius: 0;",
-			"translate: 0;",
+			"translate: none;",
 			"--ui-active-elevation-shadow-layers: var(--ui-sidebar-resting-elevation);"
 		]),
 		rule$1(`${app} ${initialSidebar}[data-placement="side"][data-desktop-state="expanded"][data-sticky="false" i]`, ["position: relative;", "height: auto;"]),
@@ -15839,7 +15930,7 @@ var appStructureCss = (scope, breakpoint) => {
 			"max-width: none;",
 			"height: var(--ui-sidebar-height, auto);",
 			"border-radius: 0;",
-			"translate: 0;",
+			"translate: none;",
 			"flex-direction: row;",
 			"overflow: visible;",
 			"--ui-active-elevation-shadow-layers: var(--ui-sidebar-resting-elevation);"
@@ -15917,6 +16008,8 @@ var serializeCompositionCss = (document, lightSelector, darkSelector) => {
 	return [
 		...base,
 		...responsive,
+		rule$1(`${scope} [data-ui-table]`, ["--ui-table-row-border: 0px;", "--ui-table-row-min-height: calc(var(--ui-table-control-height) + var(--spacing-1) * 2 + var(--ui-table-row-border));"]),
+		rule$1(`${scope} [data-ui-table]:is([data-border="row"], [data-border="grid"])`, ["--ui-table-row-border: var(--border-width-edge-separator);"]),
 		appStructureCss(scope, dimensionTokenValue(tokens, [
 			"composition",
 			"shell",
@@ -16094,7 +16187,12 @@ var cssVariable = (value) => value.replaceAll(".", "\\.");
 var fluidScalarCss = (scalar) => scalar.fluid ? `clamp(${number(scalar.minimum, 4)}px, calc(${number(scalar.preferred.constant, 4)}px + ${number(scalar.preferred.viewport, 4)}vw), ${number(scalar.maximum, 4)}px)` : `${number(scalar.minimum, 4)}px`;
 var colorCss = (color) => {
 	const [lightness, chroma, hue] = color.components;
-	return `oklch(${number(lightness * 100)}% ${number(chroma)} ${hue === "none" ? "none" : number(hue)} / ${number(color.alpha ?? 1)})`;
+	return cssColor({
+		lightness,
+		chroma,
+		hue: hue === "none" ? null : hue,
+		alpha: color.alpha ?? 1
+	});
 };
 var dimensionCss = (dimension) => {
 	return `${number(dimension.value)}${dimension.unit}`;
@@ -16140,6 +16238,7 @@ var cssValue = (token, index) => {
 	const extension = trellisTokenExtension(token);
 	if (extension?.fluid !== void 0) return fluidScalarCss(extension.fluid);
 	switch (token.$type) {
+		case "cubicBezier": return `cubic-bezier(${token.$value.join(", ")})`;
 		case "color": return colorCss(token.$value);
 		case "dimension": return dimensionCss(token.$value);
 		case "duration": return dimensionCss(token.$value);
@@ -16198,29 +16297,39 @@ var invariantRegistry = (document) => {
 	return [`@theme static {\n${declarations("static").map((line) => `  ${line}`).join("\n")}\n}`, `@theme {\n${declarations("theme").map((line) => `  ${line}`).join("\n")}\n}`].join("\n\n");
 };
 var fontFaceWeight = ({ minimum, maximum }) => minimum === maximum ? `${minimum}` : `${minimum} ${maximum}`;
-var typographyResourceCss = (document) => {
+var typographyResourceCss = (document, fontBaseUrl = "../fonts") => {
 	const resources = (invariantTokenSource(document).$extensions?.["dev.trellis"])?.fontResources ?? [];
-	return [...resources.flatMap((resource) => resource.type === "bunny" ? [`@import url("${resource.url}");`] : []), ...resources.flatMap((resource) => resource.type === "local" ? resource.faces.map((face) => [
-		"@font-face {",
-		`  font-family: "${face.family.replaceAll("\"", "\\\"")}";`,
-		`  src: url("${face.src.replaceAll("\"", "\\\"")}") format("${face.format}");`,
-		`  font-weight: ${fontFaceWeight(face.weight)};`,
-		`  font-style: ${face.style};`,
-		"  font-display: swap;",
-		"}"
-	].join("\n")) : [])];
+	return [
+		...resources.flatMap((resource) => resource.type === "fontsource" ? [`@import "${fontBaseUrl}/${resource.id}/${resource.version}/font.css";`] : []),
+		...resources.flatMap((resource) => resource.type === "bunny" ? [`@import url("${resource.url}");`] : []),
+		...resources.flatMap((resource) => resource.type === "local" ? localFontFaceCss(resource.faces) : [])
+	];
 };
+var localFontFaceCss = (faces) => faces.map((face) => [
+	"@font-face {",
+	`  font-family: ${JSON.stringify(face.family)};`,
+	`  src: url(${JSON.stringify(face.src)}) format("${face.format}");`,
+	`  font-weight: ${fontFaceWeight(face.weight)};`,
+	`  font-style: ${face.style};`,
+	"  font-display: swap;",
+	...face.unicodeRange === void 0 ? [] : [`  unicode-range: ${face.unicodeRange};`],
+	"}"
+].join("\n"));
 //#endregion
 //#region packages/theme-engine/src/serialize/css.ts
 var cssArtifact = (css) => ({
 	css,
 	fingerprint: fingerprintValue(css)
 });
-var serializeTypographyResourcesCss = (document) => cssArtifact(`${typographyResourceCss(document).join("\n\n")}\n`);
+var serializeTypographyResourcesCss = (document, fontBaseUrl = "../fonts") => cssArtifact(`${typographyResourceCss(document, fontBaseUrl).join("\n\n")}\n`);
 var selectorBlock = (selector, declarations) => `${selector} {\n${declarations.map((line) => `  ${line}`).join("\n")}\n}`;
 var combinedSelector = (...selectors) => [...new Set(selectors.flatMap((selector) => selector.split(",")).map((selector) => selector.trim()))].join(", ");
 var artifactFromBlocks = (blocks) => cssArtifact(`${blocks.join("\n\n")}\n`);
-var appearanceBlocks = (document, options, artifacts, additions = []) => [selectorBlock(options.lightSelector, [...tokenDeclarations(document, "light", artifacts), ...additions]), selectorBlock(options.darkSelector, [...tokenDeclarations(document, "dark", artifacts), ...additions])];
+var appearanceBlocks = (document, options, artifacts, additions = []) => [
+	selectorBlock(options.lightSelector, [...tokenDeclarations(document, "light", artifacts), ...additions]),
+	selectorBlock(options.darkSelector, [...tokenDeclarations(document, "dark", artifacts), ...additions]),
+	...options.systemSelector ? [`@media (prefers-color-scheme: dark) {\n${selectorBlock(options.systemSelector, [...tokenDeclarations(document, "dark", artifacts), ...additions])}\n}`] : []
+];
 var elevationAliases = () => Array.from({ length: 9 }, (_, level) => `--shadow-elevation-${level}: var(--ui-local-elevation-${level});`);
 var runtimeCompositions = (document, options) => [
 	serializeSurfaceCompositionCss(),
@@ -16239,7 +16348,7 @@ var serializeRuntimeArtifact = (document, options) => artifactFromBlocks([
 	...runtimeCompositions(document, options)
 ]);
 var serializeThemeArtifacts = (document, options) => ({
-	resources: serializeTypographyResourcesCss(document),
+	resources: serializeTypographyResourcesCss(document, options.fontBaseUrl),
 	palette: serializePaletteArtifact(document, options),
 	runtime: serializeRuntimeArtifact(document, options)
 });
@@ -16250,7 +16359,7 @@ var serializeSurfaceArtifact = (document, options) => artifactFromBlocks([
 ]);
 var serializeThemeCss = (document, options) => {
 	const scope = options.scope ?? "all";
-	if (scope === "resources") return serializeTypographyResourcesCss(document);
+	if (scope === "resources") return serializeTypographyResourcesCss(document, options.fontBaseUrl);
 	if (scope === "palette") return serializePaletteArtifact(document, options);
 	if (scope === "runtime") return serializeRuntimeArtifact(document, options);
 	if (scope === "surfaces") return serializeSurfaceArtifact(document, options);
@@ -16266,13 +16375,6 @@ var serializeThemeCss = (document, options) => {
 //#region packages/theme-engine/src/presets/trellis-default.ts
 var TRELLIS_DEFAULT_THEME_CONFIG = {
 	schemaVersion: 1,
-	motion: {
-		strategy: "semantic-motion",
-		version: 1,
-		tempo: .5,
-		elasticity: 0,
-		displacement: .5
-	},
 	color: {
 		appearances: {
 			light: {
@@ -16382,7 +16484,8 @@ var TRELLIS_DEFAULT_THEME_CONFIG = {
 			control: 3,
 			surface: 4,
 			overlay: 5
-		}
+		},
+		dismiss: "full"
 	},
 	spacing: {
 		strategy: "progressive-fluid-scale",
@@ -16452,20 +16555,6 @@ var TRELLIS_DEFAULT_THEME_CONFIG = {
 							step: 12
 						}
 					},
-					soft: {
-						rest: {
-							kind: "alpha-step",
-							step: 2
-						},
-						hover: {
-							kind: "alpha-step",
-							step: 3
-						},
-						pressed: {
-							kind: "alpha-step",
-							step: 4
-						}
-					},
 					solid: {
 						rest: {
 							kind: "step",
@@ -16574,6 +16663,138 @@ var TRELLIS_DEFAULT_THEME_CONFIG = {
 	}
 };
 //#endregion
+//#region packages/theme-engine/src/font-assets.ts
+var hash = (bytes) => createHash("sha256").update(bytes).digest("hex");
+var encode = (value) => new TextEncoder().encode(JSON.stringify(value, null, 2) + "\n");
+/** Network IO belongs to dependency preparation, never to the compiler. */
+var acquireFont = async ({ id, version }) => {
+	let packageName = `@fontsource-variable/${id}`;
+	const request = async (file) => fetch(`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${file}`, {
+		signal: AbortSignal.timeout(3e4),
+		redirect: "error"
+	});
+	let metadataResponse = await request("metadata.json");
+	if (metadataResponse.status === 404) {
+		packageName = `@fontsource/${id}`;
+		metadataResponse = await request("metadata.json");
+	}
+	if (!metadataResponse.ok) throw new Error(`Fontsource ${id}@${version}: metadata request failed (${metadataResponse.status}).`);
+	const metadata = await metadataResponse.json();
+	if (!metadata || typeof metadata !== "object" || !("family" in metadata) || typeof metadata.family !== "string" || !("weights" in metadata) || !Array.isArray(metadata.weights) || !metadata.weights.length || !metadata.weights.every((weight) => Number.isInteger(weight) && weight > 0 && weight <= 1e3)) throw new Error(`Invalid Fontsource metadata for ${id}@${version}.`);
+	const files = /* @__PURE__ */ new Map();
+	const sources = [];
+	const get = async (file) => {
+		const response = await request(file);
+		if (!response.ok) throw new Error(`Fontsource ${id}@${version}: ${file} request failed (${response.status}).`);
+		return new Uint8Array(await response.arrayBuffer());
+	};
+	const stylesheets = [];
+	if (packageName.startsWith("@fontsource-variable/")) {
+		for (const filename of [
+			"full.css",
+			"standard.css",
+			"index.css"
+		]) {
+			const response = await request(filename);
+			if (response.status === 404) continue;
+			if (!response.ok) throw new Error(`Fontsource stylesheet request failed (${response.status}).`);
+			stylesheets.push(await response.text());
+			break;
+		}
+		if (!stylesheets.length) throw new Error(`No variable stylesheet for ${id}@${version}.`);
+		if ("styles" in metadata && Array.isArray(metadata.styles) && metadata.styles.includes("italic")) for (const filename of [
+			"full-italic.css",
+			"standard-italic.css",
+			"wght-italic.css"
+		]) {
+			const response = await request(filename);
+			if (response.status === 404) continue;
+			if (!response.ok) throw new Error(`Fontsource italic request failed (${response.status}).`);
+			stylesheets.push(await response.text());
+			break;
+		}
+	} else for (const weight of metadata.weights) stylesheets.push(new TextDecoder().decode(await get(`${weight}.css`)));
+	const faces = [];
+	for (const css of stylesheets) for (const match of css.matchAll(/@font-face\s*\{([^}]+)\}/g)) {
+		const declarations = new Map(match[1].split(";").filter((entry) => entry.trim()).map((entry) => {
+			const colon = entry.indexOf(":");
+			return [entry.slice(0, colon).trim(), entry.slice(colon + 1).trim()];
+		}));
+		const weights = declarations.get("font-weight")?.match(/^(\d+)(?:\s+(\d+))?$/);
+		const source = declarations.get("src")?.match(/^url\(\.?\/?files\/([a-z0-9-]+\.woff2)\)\s+format\(['"]woff2(?:-variations)?['"]\)(?:\s*,|$)/);
+		if (!weights || !source) throw new Error(`Unsupported Fontsource font-face for ${id}.`);
+		faces.push({
+			family: metadata.family,
+			style: declarations.get("font-style"),
+			format: "woff2",
+			weight: {
+				minimum: Number(weights[1]),
+				maximum: Number(weights[2] ?? weights[1])
+			},
+			src: `./${source[1]}`,
+			...declarations.has("unicode-range") ? { unicodeRange: declarations.get("unicode-range") } : {}
+		});
+	}
+	const resource = {
+		type: "local",
+		faces
+	};
+	if (!faces.length || !Check(FontResourceSchema, resource)) throw new Error(`Invalid Fontsource font faces for ${id}.`);
+	for (const file of /* @__PURE__ */ new Set(["LICENSE", ...faces.map(({ src }) => `files/${src.slice(2)}`)])) {
+		const bytes = await get(file);
+		if (file !== "LICENSE" && new TextDecoder().decode(bytes.slice(0, 4)) !== "wOF2") throw new Error(`Invalid WOFF2 font: ${file}`);
+		const name = file.replace(/^files\//, "");
+		files.set(name, bytes);
+		sources.push({
+			file: name,
+			url: `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${file}`,
+			sha256: hash(bytes)
+		});
+	}
+	files.set("resource.json", encode(resource));
+	files.set("download.json", encode({
+		package: packageName,
+		version,
+		files: sources
+	}));
+	files.set("font.css", new TextEncoder().encode(localFontFaceCss(faces).join("\n\n") + "\n"));
+	return {
+		resource,
+		files
+	};
+};
+var readFontAssets = async (directory, font) => {
+	const provenance = JSON.parse(await readFile(join(directory, "download.json"), "utf8"));
+	if (![`@fontsource/${font.id}`, `@fontsource-variable/${font.id}`].includes(provenance.package) || provenance.version !== font.version || !Array.isArray(provenance.files)) throw new Error("Font provenance does not match declaration.");
+	const resource = JSON.parse(await readFile(join(directory, "resource.json"), "utf8"));
+	if (!Check(FontResourceSchema, resource) || resource.type !== "local") throw new Error("Invalid local font metadata.");
+	const local = resource;
+	const files = /* @__PURE__ */ new Map();
+	for (const record of provenance.files) {
+		if (!/^(?:LICENSE|[a-z0-9-]+\.woff2)$/.test(record.file)) throw new Error("Invalid font asset filename.");
+		const bytes = await readFile(join(directory, record.file));
+		if (hash(bytes) !== record.sha256) throw new Error(`Font asset hash mismatch: ${record.file}`);
+		files.set(record.file, bytes);
+	}
+	if (!files.has("LICENSE") || local.faces.some(({ src }) => !/^\.\/[a-z0-9-]+\.woff2$/.test(src) || !files.has(src.slice(2)))) throw new Error("Incomplete font assets.");
+	files.set("resource.json", await readFile(join(directory, "resource.json")));
+	files.set("download.json", await readFile(join(directory, "download.json")));
+	files.set("font.css", new TextEncoder().encode(localFontFaceCss(local.faces).join("\n\n") + "\n"));
+	return {
+		resource: local,
+		files
+	};
+};
+var prepareFont = async (font, directory, acquire) => {
+	for (const source of [fileURLToPath(new URL(`../fonts/${font.id}/${font.version}`, import.meta.url)), directory]) try {
+		return await readFontAssets(source, font);
+	} catch (error) {
+		if (!(error instanceof Error && "code" in error && error.code === "ENOENT")) throw error;
+	}
+	if (acquire) return acquire(font);
+	throw new Error(`Missing local font assets for ${font.id}@${font.version}. Run trellis theme build.`);
+};
+//#endregion
 //#region packages/theme-engine/src/theme-workspace.ts
 var ThemeWorkspaceError = class extends Error {
 	code;
@@ -16713,7 +16934,6 @@ var canonicalJsonValue = (value) => {
 	if (value === null || typeof value !== "object") return value;
 	return Object.fromEntries(Object.entries(value).filter(([, child]) => child !== void 0).sort(([first], [second]) => first < second ? -1 : first > second ? 1 : 0).map(([key, child]) => [key, canonicalJsonValue(child)]));
 };
-var serializeDtcg = (tokens) => `${JSON.stringify(canonicalJsonValue(tokens), null, 2)}\n`;
 var CANONICAL_FINGERPRINT = /^[0-9a-f]{16}$/;
 var validateProviderFingerprints = (fingerprints, tokens) => {
 	for (const name of ["theme", "tokens"]) {
@@ -16723,18 +16943,7 @@ var validateProviderFingerprints = (fingerprints, tokens) => {
 	const tokenFingerprint = fingerprintValue(tokens);
 	if (tokenFingerprint !== fingerprints.tokens) throw new ThemeWorkspaceError("workspace.token-fingerprint", `Provider token fingerprint ${fingerprints.tokens} does not match ${tokenFingerprint}.`);
 };
-var OUTPUT_ADAPTERS = {
-	dtcg: serializeDtcg,
-	tailwind: (tokens, fingerprints) => [
-		"/* Generated by Trellis Theme Authoring. */",
-		`/* Theme ${fingerprints.theme}; tokens ${fingerprints.tokens}. */`,
-		serializeThemeCss(tokens, {
-			lightSelector: ":root, .light",
-			darkSelector: ".dark"
-		}).css
-	].join("\n")
-};
-var createBuildPlanForWorkspace = async (workspace, options = {}, commits = workspace.commits) => {
+var createBuildPlanForWorkspace = async (workspace, options = {}, commits = workspace.commits, acquire) => {
 	const materialized = materializeTheme(workspace.base, commits);
 	if (!materialized.ok) throw new ThemeWorkspaceError("workspace.materialization", materialized.diagnostics.map((diagnostic) => {
 		const requested = diagnostic.requested;
@@ -16751,15 +16960,64 @@ var createBuildPlanForWorkspace = async (workspace, options = {}, commits = work
 	const tokenDiagnostics = validateDesignTokenDocument(compiled.value.tokens);
 	if (tokenDiagnostics.length > 0) throw new ThemeWorkspaceError("workspace.tokens", `Provider returned an invalid design-token document:\n${tokenDiagnostics.map(diagnosticMessage).join("\n")}`);
 	validateProviderFingerprints(compiled.value.fingerprints, compiled.value.tokens);
+	const assets = [];
+	if (workspace.outputs.length > 0) {
+		const resolved = resolveThemeConfig(materialized.value);
+		if (!resolved.ok) throw new ThemeWorkspaceError("workspace.fonts", resolved.diagnostics.map(diagnosticMessage).join("\n"));
+		const resources = structuredClone(resolved.value.typography.resources);
+		const declarations = invariantTokenSource(compiled.value.tokens).$extensions?.["dev.trellis"]?.fontResources ?? [];
+		const preparedFonts = /* @__PURE__ */ new Map();
+		const canonicalRoot = await realpath(workspace.root);
+		const protectedPaths = new Set(await Promise.all([
+			workspace.manifestPath,
+			workspace.basePath,
+			workspace.commitsPath,
+			...workspace.outputs.map(({ absolutePath }) => absolutePath)
+		].map(async (path) => portableCollisionKey(await canonicalProspectivePath(path)))));
+		for (const font of declarations) {
+			if (font.type !== "fontsource") continue;
+			const directory = join(workspace.root, "fonts", font.id, font.version);
+			await resolveSafePath(workspace.root, canonicalRoot, relative(workspace.root, join(directory, "font.css")), "output");
+			const key = `${font.id}/${font.version}`;
+			const prepared = preparedFonts.get(key) ?? await prepareFont(font, directory, acquire);
+			preparedFonts.set(key, prepared);
+			resources[font.resourceId] = prepared.resource;
+			for (const [file, content] of prepared.files) {
+				const target = await resolveSafePath(workspace.root, canonicalRoot, relative(workspace.root, join(directory, file)), "output");
+				if (protectedPaths.has(target.collisionKey)) throw new ThemeWorkspaceError("workspace.path-collision", `Font asset collides with a workspace file: ${target.absolutePath}`);
+				if (!assets.some(({ path }) => path === target.absolutePath)) assets.push({
+					path: target.absolutePath,
+					content
+				});
+			}
+		}
+		const available = resolveThemeConfig({
+			...materialized.value,
+			typography: {
+				...resolved.value.typography,
+				resources
+			}
+		});
+		if (!available.ok) throw new ThemeWorkspaceError("workspace.fonts", available.diagnostics.map(diagnosticMessage).join("\n"));
+	}
 	return {
 		workspace,
+		assets,
 		tokens: compiled.value.tokens,
 		diagnostics: compiled.value.diagnostics,
 		fingerprints: compiled.value.fingerprints,
 		outputs: workspace.outputs.map((output) => ({
-			format: output.format,
 			path: output.absolutePath,
-			content: OUTPUT_ADAPTERS[output.format](compiled.value.tokens, compiled.value.fingerprints)
+			content: [
+				"/* Generated by Trellis Theme Authoring. */",
+				`/* Theme ${compiled.value.fingerprints.theme}; tokens ${compiled.value.fingerprints.tokens}. */`,
+				serializeThemeCss(compiled.value.tokens, {
+					fontBaseUrl: relative(dirname(output.absolutePath), join(workspace.root, "fonts")).split(sep).join("/") || ".",
+					lightSelector: ":root, .light",
+					darkSelector: ".dark",
+					systemSelector: ":root[data-theme=\"system\"]"
+				}).css
+			].join("\n")
 		}))
 	};
 };
@@ -16793,8 +17051,9 @@ var promoteFiles = async (staged) => {
 	}
 };
 var buildThemeWorkspace = async (manifestPath, options = {}) => {
-	const plan = await createThemeBuildPlan(manifestPath, options);
-	await promoteFiles(await stageFiles(plan.outputs));
+	const workspace = await loadThemeWorkspace(manifestPath);
+	const plan = await createBuildPlanForWorkspace(workspace, options, workspace.commits, acquireFont);
+	await promoteFiles(await stageFiles([...plan.assets, ...plan.outputs]));
 	return {
 		outputs: plan.outputs.map(({ path }) => path),
 		diagnostics: plan.diagnostics,
@@ -16804,10 +17063,14 @@ var buildThemeWorkspace = async (manifestPath, options = {}) => {
 var checkThemeWorkspace = async (manifestPath, options = {}) => {
 	const plan = await createThemeBuildPlan(manifestPath, options);
 	const stale = [];
-	for (const output of plan.outputs) if (await readFile(output.path, "utf8").catch((error) => {
-		if (error instanceof Error && "code" in error && error.code === "ENOENT") return void 0;
-		throw error;
-	}) !== output.content) stale.push(output.path);
+	for (const output of [...plan.assets, ...plan.outputs]) {
+		const current = await readFile(output.path).catch((error) => {
+			if (error instanceof Error && "code" in error && error.code === "ENOENT") return void 0;
+			throw error;
+		});
+		const expected = Buffer.from(output.content);
+		if (current === void 0 || !current.equals(expected)) stale.push(output.path);
+	}
 	if (stale.length > 0) throw new ThemeWorkspaceError("workspace.stale-output", `Generated theme output is missing or stale:\n${stale.join("\n")}`);
 	return {
 		outputs: plan.outputs.map(({ path }) => path),
@@ -16834,7 +17097,8 @@ var initializeThemeWorkspace = async (authoredDirectory) => {
 	const sourcePaths = [
 		manifestPath,
 		basePath,
-		commitsPath
+		commitsPath,
+		join(root, "fonts")
 	];
 	const existing = (await Promise.all(sourcePaths.map(async (path) => ({
 		path,
@@ -16847,10 +17111,7 @@ var initializeThemeWorkspace = async (authoredDirectory) => {
 		engineVersion: THEME_ENGINE_VERSION,
 		base: "./base.json",
 		commits: "./commits.jsonl",
-		outputs: [{
-			format: "tailwind",
-			path: "./generated/theme.css"
-		}]
+		outputs: [{ path: "./generated/theme.css" }]
 	};
 	await mkdir(outputDirectory, { recursive: true });
 	await writeFile(manifestPath, `${JSON.stringify(canonicalJsonValue(manifest), null, 2)}\n`, { flag: "wx" });
@@ -16866,13 +17127,17 @@ var initializeThemeWorkspace = async (authoredDirectory) => {
 var applyThemeCommit = async (manifestPath, commitPath, options = {}) => {
 	const workspace = await loadThemeWorkspace(manifestPath);
 	const candidate = parseThemePatchCommit(parseJson(await readFile(resolve(commitPath), "utf8"), resolve(commitPath)), resolve(commitPath));
-	const plan = await createBuildPlanForWorkspace(workspace, { ...options }, [...workspace.commits, candidate]);
+	const plan = await createBuildPlanForWorkspace(workspace, { ...options }, [...workspace.commits, candidate], acquireFont);
 	const separator = workspace.commitLogSource.length > 0 && !workspace.commitLogSource.endsWith("\n") ? "\n" : "";
 	const commitLogContent = `${workspace.commitLogSource}${separator}${serializeThemePatchCommit(candidate)}`;
-	const staged = await stageFiles([...plan.outputs, {
-		path: workspace.commitsPath,
-		content: commitLogContent
-	}]);
+	const staged = await stageFiles([
+		...plan.assets,
+		...plan.outputs,
+		{
+			path: workspace.commitsPath,
+			content: commitLogContent
+		}
+	]);
 	const commitLogStage = staged.at(-1);
 	const outputStages = staged.slice(0, -1);
 	const assertCommitLogUnchanged = async () => {