@parallelworks/ui 0.43.0 → 0.45.0

package/dist/theme/derive.js

@@ -0,0 +1,475 @@
+import { JND, deltaE, mixOklab, oklch, rendered, toHex, toP3, withAlpha } from "./color.js";
+import { contrastRatio, isDarkColor, meets, meetsIn, over, shown, solve } from "./contrast.js";
+import "./model.js";
+//#region src/theme/derive.ts
+var THEME_TOKENS = [
+	"--theme-app-bg",
+	"--theme-panel-bg",
+	"--theme-panel-hover",
+	"--theme-muted-panel-bg",
+	"--theme-hover",
+	"--theme-input-bg",
+	"--theme-input-disabled-bg",
+	"--theme-app",
+	"--theme-muted-text-color",
+	"--theme-placeholder",
+	"--theme-link",
+	"--theme-border",
+	"--theme-border-strong",
+	"--theme-accent",
+	"--theme-accent-text",
+	"--theme-accent-hover",
+	"--theme-accent-subtle",
+	"--theme-focus",
+	"--theme-focus-ring",
+	"--theme-success",
+	"--theme-success-muted",
+	"--theme-error",
+	"--theme-error-muted",
+	"--theme-warning",
+	"--theme-warning-muted",
+	"--theme-info",
+	"--theme-info-muted",
+	"--theme-favorite",
+	"--theme-favorite-muted",
+	"--theme-shadow-sm",
+	"--theme-shadow",
+	"--theme-shadow-lg",
+	"--theme-shadow-xl",
+	"--theme-sidebar-bg",
+	"--theme-sidebar-text",
+	"--theme-sidebar-hover",
+	"--theme-sidebar-active-bg",
+	"--theme-sidebar-active-text",
+	"--theme-code-bg",
+	"--theme-code-text",
+	"--theme-code-comment",
+	"--theme-code-keyword",
+	"--theme-code-string",
+	"--theme-code-number",
+	"--theme-code-function",
+	"--theme-code-type",
+	"--theme-code-property",
+	"--theme-ansi-black",
+	"--theme-ansi-red",
+	"--theme-ansi-green",
+	"--theme-ansi-yellow",
+	"--theme-ansi-blue",
+	"--theme-ansi-magenta",
+	"--theme-ansi-cyan",
+	"--theme-ansi-white"
+];
+/** The tokens the sidebar owns. A host's chrome may supply its own fallbacks, so the stylesheet gives them no defaults. */
+var SIDEBAR_TOKENS = THEME_TOKENS.filter((t) => t.startsWith("--theme-sidebar-"));
+var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+/** Between the values at contrast 0, 30 (the default) and 100. */
+/**
+* The color text starts from on a surface, before its lightness is solved. Dark text on a tinted light
+* surface carries several times the surface's own chroma, as hand-made slate and gray scales do; light
+* text on a dark surface carries less than the surface, or it reads as colored. The surface's chroma is
+* added in OKLab to its tint, so the surface's hue leads and the accent only leans it, and a white
+* surface keeps neutral text whatever the accent.
+*/
+function inkFor(surface, tint, dark) {
+	const rad = Math.PI / 180;
+	if (dark) return {
+		...tint,
+		c: Math.min(tint.c, .03)
+	};
+	const extra = Math.min(.035, surface.c * 7);
+	const a = tint.c * Math.cos(tint.h * rad) + extra * Math.cos(surface.h * rad);
+	const b = tint.c * Math.sin(tint.h * rad) + extra * Math.sin(surface.h * rad);
+	return {
+		l: surface.l,
+		c: Math.hypot(a, b),
+		h: (Math.atan2(b, a) / rad + 360) % 360
+	};
+}
+function byContrast(k, [at0, at30, at100]) {
+	return k <= 30 ? at0 + (at30 - at0) * k / 30 : at30 + (at100 - at30) * (k - 30) / 70;
+}
+/** The roles' targets at a contrast. WCAG AA is the floor at every contrast. */
+function targets(k) {
+	const at = (wcag, apca) => ({
+		wcag: byContrast(k, wcag),
+		apca: byContrast(k, apca)
+	});
+	return {
+		primary: at([
+			4.5,
+			7,
+			12
+		], [
+			75,
+			90,
+			105
+		]),
+		secondary: at([
+			4.5,
+			4.5,
+			7
+		], [
+			60,
+			70,
+			85
+		]),
+		placeholder: at([
+			3,
+			3,
+			4.5
+		], [
+			45,
+			50,
+			65
+		]),
+		focus: { wcag: byContrast(k, [
+			3,
+			3,
+			4.5
+		]) },
+		control: { wcag: byContrast(k, [
+			1.6,
+			2.2,
+			3
+		]) },
+		onAccent: { wcag: 4.5 }
+	};
+}
+var STATUS = {
+	success: 150,
+	error: 27,
+	warning: 70,
+	info: 255,
+	favorite: 5
+};
+var ANSI = {
+	red: 27,
+	green: 145,
+	yellow: 90,
+	blue: 255,
+	magenta: 330,
+	cyan: 200
+};
+var SYNTAX = {
+	string: 145,
+	number: 55,
+	function: 300,
+	type: 195,
+	property: 240
+};
+var CODE_CHROMA = {
+	balanced: .13,
+	vivid: .19,
+	muted: .07,
+	mono: 0
+};
+/** The largest share, 0–1, of a fill's step from its surface that still lets the readable
+*  pole, black or white, meet a target on it. */
+function roomFor(fill, target) {
+	const fits = (share) => {
+		const bg = toHex(fill(share));
+		return meets(isDarkColor(bg) ? "#ffffff" : "#000000", [bg], target);
+	};
+	if (fits(1)) return 1;
+	let lo = 0;
+	let hi = 1;
+	while (hi - lo > .01) {
+		const mid = (lo + hi) / 2;
+		if (fits(mid)) lo = mid;
+		else hi = mid;
+	}
+	return lo;
+}
+/** A fixed hue moved off the accent's, so syntax never reads as the brand. */
+function awayFrom(hue, accentHue) {
+	const d = (hue - accentHue + 540) % 360 - 180;
+	return Math.abs(d) < 30 ? (hue + (d < 0 ? -45 : 45) + 360) % 360 : hue;
+}
+/** Every token as sRGB, plus display-p3 overrides that keep every contrast the sRGB output meets. */
+function generateTheme(scheme, options = {}) {
+	const { srgb, paints, checks } = build(scheme, options);
+	return {
+		srgb,
+		p3: p3Overrides(paints, checks)
+	};
+}
+function build(scheme, options) {
+	const base = oklch(scheme.interface.base);
+	const accent = oklch(scheme.interface.accent);
+	const k = clamp(scheme.interface.contrast ?? 30, 0, 100);
+	const s = .6 + .4 * (Math.min(k, 30) + Math.max(k - 30, 0) * .25) / 30;
+	const b = byContrast(k, [
+		.6,
+		1,
+		1.8
+	]);
+	const dark = isDarkColor(toHex(base));
+	const dir = dark ? 1 : -1;
+	const t = targets(k);
+	const paints = {};
+	const checks = [];
+	const hexOf = (d) => typeof d === "string" ? toHex(paints[d].color) : compositeHex(paints[d.fill], paints[d.over]);
+	const set = (token, color, alpha) => {
+		paints[token] = alpha === void 0 ? { color } : {
+			color,
+			alpha
+		};
+		return color;
+	};
+	/** A color that must keep a contrast on its backdrops, in both outputs. */
+	const keep = (token, color, on, target) => {
+		checks.push({
+			fg: token,
+			on,
+			target
+		});
+		return set(token, color);
+	};
+	/** A foreground solved on its backdrops. */
+	const solved = (token, start, on, target) => keep(token, solve(start, on.map(hexOf), target), on, target);
+	const tint = mixOklab(base, accent, Math.min(.5, (dark ? .05 : .04) * (1 + base.c / .03)));
+	const neutral = (l, lift = 0) => ({
+		l: clamp(l, 0, 1),
+		c: tint.c + (dark ? .004 * lift : 0),
+		h: tint.h
+	});
+	const ink = inkFor(base, tint, dark);
+	const paper = base.l > .97 && base.c < .02;
+	const raised = (towardWhite, darkStep) => dark ? neutral(base.l + darkStep * s, 1) : paper ? {
+		l: 1,
+		c: 0,
+		h: 0
+	} : {
+		...neutral(base.l + (1 - base.l) * towardWhite),
+		c: tint.c * .5
+	};
+	const step = (light, darkStep) => neutral(base.l + dir * (dark ? darkStep : light) * s, 1);
+	set("--theme-app-bg", base);
+	set("--theme-panel-hover", neutral(set("--theme-panel-bg", raised(.85, .035)).l + dir * (dark ? .04 : .025) * s, 1));
+	const mutedPanel = set("--theme-muted-panel-bg", step(.03, .065));
+	set("--theme-hover", step(.045, .08));
+	set("--theme-input-bg", raised(.7, .05));
+	set("--theme-input-disabled-bg", step(.02, .025));
+	set("--theme-accent-subtle", {
+		l: base.l + dir * (dark ? .07 : .04) * s,
+		c: Math.min(accent.c, dark ? .045 : .035),
+		h: accent.h
+	});
+	const border = set("--theme-border", neutral(base.l + dir * (dark ? .14 : .12) * b));
+	const textOn = [
+		"--theme-app-bg",
+		"--theme-panel-bg",
+		"--theme-panel-hover",
+		"--theme-muted-panel-bg",
+		"--theme-hover",
+		"--theme-input-bg",
+		"--theme-accent-subtle"
+	];
+	solved("--theme-app", ink, textOn, t.primary);
+	solved("--theme-muted-text-color", ink, textOn, t.secondary);
+	solved("--theme-placeholder", ink, [
+		"--theme-input-bg",
+		"--theme-input-disabled-bg",
+		"--theme-app-bg",
+		"--theme-panel-bg"
+	], t.placeholder);
+	solved("--theme-link", accent, [
+		"--theme-app-bg",
+		"--theme-panel-bg",
+		"--theme-muted-panel-bg",
+		"--theme-hover"
+	], t.secondary);
+	set("--theme-focus-ring", solved("--theme-focus", accent, [
+		"--theme-app-bg",
+		"--theme-panel-bg",
+		"--theme-input-bg"
+	], t.focus), dark ? .35 : .25);
+	solved("--theme-border-strong", border, [
+		"--theme-app-bg",
+		"--theme-panel-bg",
+		"--theme-input-bg"
+	], t.control);
+	set("--theme-accent", accent);
+	const white = contrastRatio("#ffffff", toHex(accent)) >= 4.5;
+	set("--theme-accent-hover", {
+		...accent,
+		l: accent.l + (white ? -.05 : .05)
+	});
+	keep("--theme-accent-text", {
+		l: white ? 1 : 0,
+		c: 0,
+		h: 0
+	}, ["--theme-accent", "--theme-accent-hover"], t.onAccent);
+	const mutedAlpha = dark ? .15 : .1;
+	for (const [name, hue] of Object.entries(STATUS)) {
+		const token = `--theme-${name}`;
+		const muted = `--theme-${name}-muted`;
+		const plain = [
+			"--theme-app-bg",
+			"--theme-panel-bg",
+			"--theme-muted-panel-bg"
+		];
+		const on = [
+			...plain,
+			{
+				fill: muted,
+				over: "--theme-app-bg"
+			},
+			{
+				fill: muted,
+				over: "--theme-panel-bg"
+			}
+		];
+		let color = solve({
+			l: dark ? .75 : .55,
+			c: .17,
+			h: hue
+		}, plain.map(hexOf), t.secondary);
+		for (let round = 0; round < 6; round++) {
+			set(muted, color, mutedAlpha);
+			const next = solve(color, on.map(hexOf), t.secondary);
+			if (next === color) break;
+			color = next;
+		}
+		keep(token, color, on, t.secondary);
+	}
+	const sidebarBase = scheme.sidebar?.base ? oklch(scheme.sidebar.base) : neutral(dark ? Math.max(.08, base.l - .035 * s) : base.l - .035 * s);
+	const sidebarAccent = scheme.sidebar?.accent ? oklch(scheme.sidebar.accent) : accent;
+	const sidebarDark = isDarkColor(toHex(sidebarBase));
+	const sidebarDir = sidebarDark ? 1 : -1;
+	set("--theme-sidebar-bg", sidebarBase);
+	set("--theme-sidebar-hover", {
+		...sidebarBase,
+		l: sidebarBase.l + sidebarDir * (sidebarDark ? .08 : .05) * s
+	});
+	const activeAt = (f) => ({
+		l: sidebarBase.l + sidebarDir * (sidebarDark ? .12 : .07) * s * f,
+		c: Math.min(sidebarAccent.c, .08),
+		h: sidebarAccent.h
+	});
+	set("--theme-sidebar-active-bg", activeAt(roomFor(activeAt, t.primary)));
+	solved("--theme-sidebar-text", inkFor(sidebarBase, sidebarBase, sidebarDark), ["--theme-sidebar-bg", "--theme-sidebar-hover"], t.primary);
+	solved("--theme-sidebar-active-text", {
+		l: sidebarBase.l,
+		c: Math.min(sidebarAccent.c, .04),
+		h: sidebarAccent.h
+	}, ["--theme-sidebar-active-bg"], t.primary);
+	const style = options.code ?? "balanced";
+	set("--theme-code-bg", mutedPanel);
+	const codeOn = [
+		"--theme-code-bg",
+		"--theme-panel-bg",
+		"--theme-app-bg"
+	];
+	const codeText = solved("--theme-code-text", ink, codeOn, t.primary);
+	const comment = solved("--theme-code-comment", ink, codeOn, t.secondary);
+	const syntaxL = dark ? .78 : .5;
+	const chroma = CODE_CHROMA[style];
+	const syntax = (token, hue) => solved(token, {
+		l: syntaxL,
+		c: chroma,
+		h: awayFrom(hue, accent.h)
+	}, codeOn, t.secondary);
+	if (style === "mono") {
+		keep("--theme-code-keyword", codeText, codeOn, t.primary);
+		keep("--theme-code-property", comment, codeOn, t.secondary);
+	} else {
+		solved("--theme-code-keyword", {
+			l: syntaxL,
+			c: Math.min(accent.c, chroma + .04),
+			h: accent.h
+		}, codeOn, t.secondary);
+		syntax("--theme-code-property", SYNTAX.property);
+	}
+	syntax("--theme-code-string", SYNTAX.string);
+	syntax("--theme-code-number", SYNTAX.number);
+	syntax("--theme-code-function", SYNTAX.function);
+	syntax("--theme-code-type", SYNTAX.type);
+	for (const [name, hue] of Object.entries(ANSI)) solved(`--theme-ansi-${name}`, {
+		l: syntaxL,
+		c: .15,
+		h: hue
+	}, codeOn, t.secondary);
+	keep("--theme-ansi-black", dark ? comment : codeText, codeOn, t.secondary);
+	keep("--theme-ansi-white", dark ? codeText : comment, codeOn, t.secondary);
+	const shade = dark ? .35 : .07;
+	const a = (v) => Number((v * b).toFixed(3));
+	const shadows = {
+		"--theme-shadow-sm": `0 1px 2px rgba(0, 0, 0, ${a(shade)})`,
+		"--theme-shadow": `0 4px 6px -1px rgba(0, 0, 0, ${a(shade)}), 0 2px 4px -2px rgba(0, 0, 0, ${a(shade)})`,
+		"--theme-shadow-lg": `0 10px 15px -3px rgba(0, 0, 0, ${a(shade)}), 0 4px 6px -4px rgba(0, 0, 0, ${a(shade)})`,
+		"--theme-shadow-xl": `0 25px 80px -20px rgba(0, 0, 0, ${a(dark ? .6 : .2)}), 0 10px 30px -10px rgba(0, 0, 0, ${a(dark ? .4 : .1)})`
+	};
+	const srgb = {};
+	for (const token of THEME_TOKENS) {
+		const paint = paints[token];
+		srgb[token] = paint ? paint.alpha === void 0 ? toHex(paint.color) : withAlpha(toHex(paint.color), paint.alpha) : shadows[token];
+	}
+	return {
+		srgb,
+		paints,
+		checks
+	};
+}
+var FILLS = [
+	["--theme-focus-ring", "--theme-focus"],
+	["--theme-success-muted", "--theme-success"],
+	["--theme-error-muted", "--theme-error"],
+	["--theme-warning-muted", "--theme-warning"],
+	["--theme-info-muted", "--theme-info"],
+	["--theme-favorite-muted", "--theme-favorite"]
+];
+/** The tokens a display-p3 screen shows noticeably more of, keeping only those
+*  whose contrast checks still hold when the screen shows them. */
+function p3Overrides(paints, checks) {
+	const wide = new Set(Object.keys(paints).filter((token) => deltaE(rendered(paints[token].color, "p3"), rendered(paints[token].color)) > JND));
+	const gamutOf = (token) => wide.has(token) ? "p3" : "srgb";
+	const show = (token) => shown(paints[token].color, gamutOf(token));
+	const backdrop = (d) => {
+		if (typeof d === "string") return show(d);
+		const fill = paints[d.fill];
+		return over(show(d.fill), fill.alpha ?? 1, rendered(paints[d.over].color, gamutOf(d.over)));
+	};
+	const passes = (check) => meetsIn(show(check.fg), check.on.map(backdrop), check.target);
+	for (let round = 0; round < 4; round++) {
+		let changed = false;
+		for (const check of checks) {
+			if (passes(check)) continue;
+			if (wide.delete(check.fg)) {
+				changed = true;
+				if (passes(check)) continue;
+			}
+			for (const d of check.on) for (const token of typeof d === "string" ? [d] : [d.fill, d.over]) changed = wide.delete(token) || changed;
+		}
+		if (!changed) break;
+	}
+	for (const [fill, color] of FILLS) if (!wide.has(color)) wide.delete(fill);
+	const out = {};
+	for (const token of THEME_TOKENS) if (wide.has(token)) out[token] = toP3(paints[token].color, paints[token].alpha);
+	return out;
+}
+function compositeHex(fill, backdrop) {
+	const f = toHex(fill.color);
+	const u = toHex(backdrop.color);
+	const a = fill.alpha ?? 1;
+	const channel = (hex, i) => Number.parseInt(hex.slice(i, i + 2), 16);
+	return `#${[
+		1,
+		3,
+		5
+	].map((i) => Math.round(channel(f, i) * a + channel(u, i) * (1 - a)).toString(16).padStart(2, "0")).join("")}`;
+}
+/** Every `--theme-*` token for a scheme, in sRGB. */
+function deriveTheme(scheme, options = {}) {
+	return build(scheme, options).srgb;
+}
+/** A stylesheet for a scheme: sRGB under `selector`, and the display-p3 overrides under
+*  `@media (color-gamut: p3)`. `omit` leaves tokens out, such as ones a host supplies. */
+function themeStylesheet(selector, scheme, options = {}) {
+	const { srgb, p3 } = generateTheme(scheme, options);
+	const block = (vars, indent) => THEME_TOKENS.filter((token) => !options.omit?.includes(token) && vars[token] !== void 0).map((token) => `${indent}${token}: ${vars[token]};`).join("\n");
+	const wide = block(p3, "    ");
+	return `${selector} {\n${block(srgb, "  ")}\n}\n${wide ? `\n@media (color-gamut: p3) {\n  ${selector} {\n${wide}\n  }\n}\n` : ""}`;
+}
+//#endregion
+export { SIDEBAR_TOKENS, THEME_TOKENS, deriveTheme, generateTheme, themeStylesheet };

package/dist/theme/fit.d.ts

@@ -0,0 +1,35 @@
+import { type ThemeToken } from './derive.js';
+import { type CodeStyle, type Mode, type Scheme } from './model.js';
+export interface FitOptions {
+    /** How much each token counts toward the fit; 1 by default. */
+    weights?: Partial<Record<ThemeToken, number>>;
+}
+export interface FitToken {
+    token: ThemeToken;
+    target: string;
+    fitted: string;
+    /** ΔEOK × 100, so 2 is about one just-noticeable difference. */
+    deltaE: number;
+    /** The target failed WCAG AA against its background, so the fitted color is meant to differ. */
+    correctedForContrast: boolean;
+}
+export interface FitReport {
+    tokens: FitToken[];
+    /** Mean and largest ΔEOK × 100 over the tokens not corrected for contrast. */
+    mean: number;
+    max: number;
+    /** Up to three tokens furthest from their target, worst first. */
+    worst: ThemeToken[];
+    /** faithful: the main surfaces and colors within 2 and nothing past 5; close: within 5 and 10; changed: past that. */
+    verdict: 'faithful' | 'close' | 'changed';
+}
+export interface FitResult {
+    scheme: Scheme;
+    mode: Mode;
+    code: CodeStyle;
+    report: FitReport;
+}
+type Target = Partial<Record<ThemeToken, string>>;
+/** The scheme whose derived tokens come closest to `target`, a partial map of tokens a host has colors for, with how close each came. */
+export declare function fitSeed(target: Target, options?: FitOptions): FitResult;
+export {};

package/dist/theme/fit.js

@@ -0,0 +1,185 @@
+import { composite, deltaE, parseColor, toHex } from "./color.js";
+import { contrastRatio, isDarkColor } from "./contrast.js";
+import { CODE_STYLES, DEFAULT_THEME, schemeFor } from "./model.js";
+import { deriveTheme } from "./derive.js";
+//#region src/theme/fit.ts
+var MAIN = [
+	"--theme-app-bg",
+	"--theme-app",
+	"--theme-panel-bg",
+	"--theme-accent",
+	"--theme-link",
+	"--theme-border",
+	"--theme-sidebar-bg"
+];
+var FLOORS = {
+	"--theme-app": ["--theme-app-bg", 4.5],
+	"--theme-muted-text-color": ["--theme-app-bg", 4.5],
+	"--theme-link": ["--theme-app-bg", 4.5],
+	"--theme-placeholder": ["--theme-input-bg", 3],
+	"--theme-focus": ["--theme-app-bg", 3],
+	"--theme-accent-text": ["--theme-accent", 4.5],
+	"--theme-success": ["--theme-app-bg", 4.5],
+	"--theme-error": ["--theme-app-bg", 4.5],
+	"--theme-warning": ["--theme-app-bg", 4.5],
+	"--theme-info": ["--theme-app-bg", 4.5],
+	"--theme-sidebar-text": ["--theme-sidebar-bg", 4.5],
+	"--theme-sidebar-active-text": ["--theme-sidebar-active-bg", 4.5],
+	"--theme-code-text": ["--theme-code-bg", 4.5],
+	"--theme-code-comment": ["--theme-code-bg", 4.5]
+};
+var isColor = (v) => /^#[\da-f]{6}$/i.test(v) || /^rgba\(/.test(v) || parseColor(v) !== null;
+/** A color as the hex it shows as over a backdrop. */
+function shown(value, backdrop) {
+	if (value.startsWith("rgba(")) return composite(value, backdrop);
+	return toHex(parseColor(value) ?? {
+		l: 0,
+		c: 0,
+		h: 0
+	});
+}
+function corrected(target, token, background) {
+	const floor = FLOORS[token];
+	const value = target[token];
+	if (!floor || !value) return false;
+	const against = target[floor[0]] ? shown(target[floor[0]], background) : null;
+	return against !== null && contrastRatio(shown(value, background), against) < floor[1];
+}
+function measure(target, fitted, background) {
+	return Object.keys(target).filter((token) => isColor(target[token]) && fitted[token] !== void 0).map((token) => {
+		const want = shown(target[token], background);
+		const got = shown(fitted[token], fitted["--theme-app-bg"]);
+		const a = parseColor(want);
+		const b = parseColor(got);
+		return {
+			token,
+			target: target[token],
+			fitted: fitted[token],
+			deltaE: a && b ? Math.round(deltaE(a, b) * 1e4) / 100 : 100,
+			correctedForContrast: corrected(target, token, background)
+		};
+	});
+}
+function score(tokens, weights) {
+	let sum = 0;
+	let total = 0;
+	for (const t of tokens) {
+		if (t.correctedForContrast) continue;
+		const w = weights?.[t.token] ?? 1;
+		sum += t.deltaE * w;
+		total += w;
+	}
+	return total ? sum / total : 0;
+}
+/** The scheme whose derived tokens come closest to `target`, a partial map of tokens a host has colors for, with how close each came. */
+function fitSeed(target, options = {}) {
+	const fallback = schemeFor(DEFAULT_THEME, "light").interface;
+	const given = parseColor(target["--theme-app-bg"] ?? "");
+	const background = given ? toHex(given) : fallback.base;
+	const mode = isDarkColor(background) ? "dark" : "light";
+	const accentSource = target["--theme-accent"] ?? target["--theme-link"];
+	const accent = accentSource ? shown(accentSource, background) : fallback.accent;
+	const sidebarBg = target["--theme-sidebar-bg"];
+	const activeBg = target["--theme-sidebar-active-bg"];
+	const evaluate = (scheme, code) => {
+		const fitted = deriveTheme(scheme, { code });
+		return {
+			tokens: measure(target, fitted, background),
+			fitted
+		};
+	};
+	const cost = (scheme, code) => score(evaluate(scheme, code).tokens, options.weights);
+	const withContrast = (scheme, contrast) => ({
+		...scheme,
+		interface: {
+			...scheme.interface,
+			contrast: Math.round(contrast * 10) / 10
+		}
+	});
+	let scheme = { interface: {
+		base: background,
+		accent
+	} };
+	let code = "balanced";
+	if (sidebarBg) {
+		const own = shown(sidebarBg, background);
+		const generated = deriveTheme(scheme)["--theme-sidebar-bg"];
+		const a = parseColor(own);
+		const b = parseColor(generated);
+		if (a && b && deltaE(a, b) > .02) scheme = {
+			...scheme,
+			sidebar: { base: own }
+		};
+	}
+	const findContrast = (s) => {
+		let best = 30;
+		let bestCost = Number.POSITIVE_INFINITY;
+		for (let k = 0; k <= 100; k += 5) {
+			const c = cost(withContrast(s, k), code);
+			if (c < bestCost) {
+				best = k;
+				bestCost = c;
+			}
+		}
+		let lo = Math.max(0, best - 5);
+		let hi = Math.min(100, best + 5);
+		const phi = (Math.sqrt(5) - 1) / 2;
+		let x1 = hi - phi * (hi - lo);
+		let x2 = lo + phi * (hi - lo);
+		let f1 = cost(withContrast(s, x1), code);
+		let f2 = cost(withContrast(s, x2), code);
+		while (hi - lo > .2) if (f1 <= f2) {
+			hi = x2;
+			x2 = x1;
+			f2 = f1;
+			x1 = hi - phi * (hi - lo);
+			f1 = cost(withContrast(s, x1), code);
+		} else {
+			lo = x1;
+			x1 = x2;
+			f1 = f2;
+			x2 = lo + phi * (hi - lo);
+			f2 = cost(withContrast(s, x2), code);
+		}
+		return [best, (lo + hi) / 2].reduce((a, c) => cost(withContrast(s, c), code) < cost(withContrast(s, a), code) ? c : a);
+	};
+	scheme = withContrast(scheme, findContrast(scheme));
+	const active = activeBg ? parseColor(shown(activeBg, background)) : null;
+	if (active && active.c > .02) {
+		const page = parseColor(accent);
+		const sidebarAccent = toHex({
+			...page,
+			h: active.h,
+			c: Math.max(page.c, active.c)
+		});
+		const candidate = {
+			...scheme,
+			sidebar: {
+				...scheme.sidebar,
+				accent: sidebarAccent
+			}
+		};
+		if (cost(candidate, code) < cost(scheme, code)) scheme = candidate;
+	}
+	if (Object.keys(target).some((t) => t.startsWith("--theme-code-"))) code = CODE_STYLES.reduce((a, c) => cost(scheme, c) < cost(scheme, a) ? c : a);
+	const tokens = evaluate(scheme, code).tokens;
+	const counted = tokens.filter((t) => !t.correctedForContrast);
+	const max = counted.reduce((m, t) => Math.max(m, t.deltaE), 0);
+	const mainMax = counted.filter((t) => MAIN.includes(t.token)).reduce((m, t) => Math.max(m, t.deltaE), 0);
+	const mean = counted.length ? counted.reduce((s, t) => s + t.deltaE, 0) / counted.length : 0;
+	const verdict = mainMax <= 2 && max <= 5 ? "faithful" : mainMax <= 5 && max <= 10 ? "close" : "changed";
+	return {
+		scheme,
+		mode,
+		code,
+		report: {
+			tokens,
+			mean: Math.round(mean * 100) / 100,
+			max,
+			worst: [...counted].sort((a, b) => b.deltaE - a.deltaE).slice(0, 3).filter((t) => t.deltaE > 0).map((t) => t.token),
+			verdict
+		}
+	};
+}
+//#endregion
+export { fitSeed };