@parallelworks/ui 0.44.0 → 0.45.0

package/dist/theme/index.d.ts

@@ -1,29 +1,14 @@
-export declare const THEME_TOKENS: readonly ['--theme-app-bg', '--theme-app', '--theme-panel-bg', '--theme-panel', '--theme-muted-panel-bg', '--theme-muted-panel-color', '--theme-muted-text-color', '--theme-border', '--theme-element', '--theme-element-text', '--theme-element-hover', '--theme-hover', '--theme-hover-text', '--theme-link', '--theme-input-bg', '--theme-input', '--theme-input-disabled-bg', '--theme-input-disabled-text', '--theme-card-bg', '--theme-card-border', '--theme-card-hover', '--theme-accent', '--theme-accent-text', '--theme-focus-ring', '--theme-hover-overlay', '--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-auth-shadow', '--theme-bg', '--theme-sidebar-text', '--theme-sidebar-hover', '--theme-sidebar-hover-text', '--theme-sidebar-active-bg', '--theme-sidebar-active-text'];
-export type ThemeToken = (typeof THEME_TOKENS)[number];
-export type ThemeVariables = Record<ThemeToken, string>;
-export interface ThemeSeed {
-    /** Accent color as a hex string, e.g. '#06354f'. */
-    accent: string;
-    /** Base background color as a hex string. */
-    background: string;
-    /** How far foregrounds and borders sit from the background. 1 is normal; sensible range is roughly 0.5–1.5. */
-    contrast?: number;
-    /** Text color on accent fills; white or black, whichever reads better, when unset. */
-    accentText?: string;
-}
-export interface SurfaceSeeds {
-    interface: ThemeSeed;
-    sidebar?: ThemeSeed;
-}
-export declare function contrastRatio(a: string, b: string): number;
-/** Uses the WCAG luminance threshold 0.179, matching how org themes classify backgrounds. */
-export declare function isDarkColor(hex: string): boolean;
-export declare function deriveTheme(seed: ThemeSeed | SurfaceSeeds): ThemeVariables;
-export interface ThemePreset {
-    name: string;
-    label: string;
-    seed: SurfaceSeeds;
-}
-export declare const THEME_PRESETS: readonly ThemePreset[];
-export declare const DEFAULT_PRESET: ThemePreset;
-export declare function applyTheme(el: HTMLElement, vars: Partial<ThemeVariables>): void;
+import type { GeneratedTheme, ThemeVariables } from './derive.js';
+export { composite, deltaE, type Gamut, JND, type Oklch, parseColor, toHex, toP3, } from './color.js';
+export { apcaContrast, type ContrastTarget, contrastRatio, isDarkColor } from './contrast.js';
+export { type DeriveOptions, deriveTheme, type GeneratedTheme, generateTheme, SIDEBAR_TOKENS, THEME_TOKENS, type ThemeToken, type ThemeVariables, themeStylesheet, } from './derive.js';
+export { type FitOptions, type FitReport, type FitResult, type FitToken, fitSeed } from './fit.js';
+export { CODE_STYLES, type CodeStyle, type ColorPreference, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, type Mode, modeOf, parseTheme, resolveMode, type Scheme, type Seed, schemeFor, serializeTheme, THEME_PRESETS, type Theme, type ThemeParseError, type ThemeParseResult, type ThemePreset, } from './model.js';
+/** Whether the screen shows display-p3, so wide-gamut values are worth setting. */
+export declare function prefersWideGamut(): boolean;
+/**
+ * Sets tokens on an element, such as the document root or a preview pane.
+ * Given a generated theme, it sets the sRGB values and, on a wide-gamut screen,
+ * the display-p3 ones over them; inline values can't carry a media query.
+ */
+export declare function applyTheme(el: HTMLElement, theme: Partial<ThemeVariables> | GeneratedTheme, wide?: boolean): void;

package/dist/theme/index.js

@@ -1,283 +1,24 @@
+import { JND, composite, deltaE, parseColor, toHex, toP3 } from "./color.js";
+import { apcaContrast, contrastRatio, isDarkColor } from "./contrast.js";
+import { CODE_STYLES, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, resolveMode, schemeFor, serializeTheme } from "./model.js";
+import { SIDEBAR_TOKENS, THEME_TOKENS, deriveTheme, generateTheme, themeStylesheet } from "./derive.js";
+import { fitSeed } from "./fit.js";
 //#region src/theme/index.ts
-var THEME_TOKENS = [
-	"--theme-app-bg",
-	"--theme-app",
-	"--theme-panel-bg",
-	"--theme-panel",
-	"--theme-muted-panel-bg",
-	"--theme-muted-panel-color",
-	"--theme-muted-text-color",
-	"--theme-border",
-	"--theme-element",
-	"--theme-element-text",
-	"--theme-element-hover",
-	"--theme-hover",
-	"--theme-hover-text",
-	"--theme-link",
-	"--theme-input-bg",
-	"--theme-input",
-	"--theme-input-disabled-bg",
-	"--theme-input-disabled-text",
-	"--theme-card-bg",
-	"--theme-card-border",
-	"--theme-card-hover",
-	"--theme-accent",
-	"--theme-accent-text",
-	"--theme-focus-ring",
-	"--theme-hover-overlay",
-	"--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-auth-shadow",
-	"--theme-bg",
-	"--theme-sidebar-text",
-	"--theme-sidebar-hover",
-	"--theme-sidebar-hover-text",
-	"--theme-sidebar-active-bg",
-	"--theme-sidebar-active-text"
-];
-function parseHex(hex) {
-	const [, r, g, b] = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) ?? [];
-	if (r === void 0 || g === void 0 || b === void 0) throw new Error(`Invalid hex color: ${hex}`);
-	return [
-		Number.parseInt(r, 16),
-		Number.parseInt(g, 16),
-		Number.parseInt(b, 16)
-	];
-}
-function toHex([r, g, b]) {
-	const c = (v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0");
-	return `#${c(r)}${c(g)}${c(b)}`;
-}
-/** Linear interpolation from `a` toward `b` by `t` in sRGB. */
-function mix(a, b, t) {
-	const ca = parseHex(a);
-	const cb = parseHex(b);
-	return toHex([
-		ca[0] + (cb[0] - ca[0]) * t,
-		ca[1] + (cb[1] - ca[1]) * t,
-		ca[2] + (cb[2] - ca[2]) * t
-	]);
-}
-function alpha(hex, a) {
-	const [r, g, b] = parseHex(hex);
-	return `rgba(${r}, ${g}, ${b}, ${a})`;
-}
-function relativeLuminance(hex) {
-	const toLinear = (v) => {
-		const s = v / 255;
-		return s <= .03928 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
-	};
-	const [r, g, b] = parseHex(hex);
-	return .2126 * toLinear(r) + .7152 * toLinear(g) + .0722 * toLinear(b);
-}
-function contrastRatio(a, b) {
-	const la = relativeLuminance(a);
-	const lb = relativeLuminance(b);
-	const [hi, lo] = la > lb ? [la, lb] : [lb, la];
-	return (hi + .05) / (lo + .05);
-}
-/** Uses the WCAG luminance threshold 0.179, matching how org themes classify backgrounds. */
-function isDarkColor(hex) {
-	return relativeLuminance(hex) < .179;
-}
-/** White or black, whichever reads better on the given color. */
-function readableOn(hex) {
-	return contrastRatio(hex, "#ffffff") >= contrastRatio(hex, "#000000") ? "#ffffff" : "#000000";
-}
-/** Nudges `color` toward the readable pole of `bg` until it clears `ratio`. */
-function ensureReadable(color, bg, ratio) {
-	const pole = isDarkColor(bg) ? "#ffffff" : "#000000";
-	let out = color;
-	for (let t = 0; t <= 1 && contrastRatio(out, bg) < ratio; t += .05) out = mix(color, pole, t);
-	return out;
-}
-function clampContrast(contrast) {
-	return Math.max(.25, Math.min(2, contrast ?? 1));
-}
-var STATUS_HUES = {
-	success: {
-		onLight: "#16a34a",
-		onDark: "#22c55e"
-	},
-	error: {
-		onLight: "#dc2626",
-		onDark: "#ef4444"
-	},
-	warning: {
-		onLight: "#d97706",
-		onDark: "#f59e0b"
-	},
-	info: {
-		onLight: "#2563eb",
-		onDark: "#3b82f6"
-	},
-	favorite: {
-		onLight: "#e11d48",
-		onDark: "#f43f5e"
-	}
-};
-function deriveSidebar(seed) {
-	const bg = seed.background;
-	const c = clampContrast(seed.contrast);
-	const dark = isDarkColor(bg);
-	const pole = dark ? "#ffffff" : "#000000";
-	const text = mix(pole, bg, Math.max(0, 1 - c) * .5);
-	const hover = mix(bg, pole, .12 * c);
-	const activeBg = dark ? mix(seed.accent, "#ffffff", .85) : seed.accent;
-	return {
-		bg,
-		text,
-		hover,
-		hoverText: text,
-		activeBg,
-		activeText: readableOn(activeBg)
-	};
-}
-function authShadow(dark) {
-	const [far, near] = dark ? [.6, .4] : [.2, .1];
-	return `0 25px 80px -20px rgba(0, 0, 0, ${far}), 0 10px 30px -10px rgba(0, 0, 0, ${near})`;
-}
-function deriveTheme(seed) {
-	const surfaces = "interface" in seed ? seed : { interface: seed };
-	const { accent, background: bg } = surfaces.interface;
-	const c = clampContrast(surfaces.interface.contrast);
-	const dark = isDarkColor(bg);
-	const pole = dark ? "#ffffff" : "#000000";
-	const fg = mix(pole, bg, Math.max(0, 1 - c) * .5);
-	const panelBg = dark ? mix(bg, "#ffffff", .045) : mix(bg, "#ffffff", .8);
-	const mutedPanelBg = dark ? mix(bg, "#ffffff", .09) : mix(bg, "#ffffff", .5);
-	const border = mix(bg, pole, (dark ? .16 : .16) * c);
-	const mutedText = mix(fg, bg, .42);
-	const hover = dark ? mix(bg, "#ffffff", .08) : mix(bg, "#000000", .04);
-	const inputBg = dark ? mix(bg, "#ffffff", .08) : mix(bg, "#ffffff", .65);
-	const link = ensureReadable(accent, bg, 4.5);
-	const accentText = surfaces.interface.accentText ?? readableOn(accent);
-	const accentHover = mix(accent, pole, .1);
-	const cardBg = panelBg;
-	let sidebarBg = panelBg;
-	if (!dark) sidebarBg = isDarkColor(accent) ? accent : mix(accent, "#000000", .4);
-	const sidebar = deriveSidebar(surfaces.sidebar ?? {
-		accent,
-		background: sidebarBg,
-		contrast: c
-	});
-	const status = (name) => ensureReadable(dark ? STATUS_HUES[name].onDark : STATUS_HUES[name].onLight, bg, 3);
-	const shadowInk = dark ? .35 : .07;
-	return {
-		"--theme-app-bg": bg,
-		"--theme-app": fg,
-		"--theme-panel-bg": panelBg,
-		"--theme-panel": fg,
-		"--theme-muted-panel-bg": mutedPanelBg,
-		"--theme-muted-panel-color": mutedText,
-		"--theme-muted-text-color": mutedText,
-		"--theme-border": border,
-		"--theme-element": accent,
-		"--theme-element-text": accentText,
-		"--theme-element-hover": accentHover,
-		"--theme-hover": hover,
-		"--theme-hover-text": fg,
-		"--theme-link": link,
-		"--theme-input-bg": inputBg,
-		"--theme-input": link,
-		"--theme-input-disabled-bg": mix(inputBg, bg, .5),
-		"--theme-input-disabled-text": mix(fg, bg, .6),
-		"--theme-card-bg": cardBg,
-		"--theme-card-border": alpha(pole, dark ? .06 : .04),
-		"--theme-card-hover": dark ? mix(cardBg, "#ffffff", .05) : mix(cardBg, "#000000", .02),
-		"--theme-accent": accent,
-		"--theme-accent-text": accentText,
-		"--theme-focus-ring": alpha(link, dark ? .25 : .2),
-		"--theme-hover-overlay": alpha(pole, dark ? .03 : .02),
-		"--theme-success": status("success"),
-		"--theme-success-muted": alpha(status("success"), dark ? .15 : .1),
-		"--theme-error": status("error"),
-		"--theme-error-muted": alpha(status("error"), dark ? .15 : .1),
-		"--theme-warning": status("warning"),
-		"--theme-warning-muted": alpha(status("warning"), dark ? .15 : .1),
-		"--theme-info": status("info"),
-		"--theme-info-muted": alpha(status("info"), dark ? .15 : .1),
-		"--theme-favorite": status("favorite"),
-		"--theme-favorite-muted": alpha(status("favorite"), dark ? .15 : .1),
-		"--theme-shadow-sm": `0 1px 2px rgba(0, 0, 0, ${shadowInk})`,
-		"--theme-shadow": `0 4px 6px -1px rgba(0, 0, 0, ${shadowInk}), 0 2px 4px -2px rgba(0, 0, 0, ${shadowInk})`,
-		"--theme-shadow-lg": `0 10px 15px -3px rgba(0, 0, 0, ${shadowInk}), 0 4px 6px -4px rgba(0, 0, 0, ${shadowInk})`,
-		"--theme-auth-shadow": authShadow(dark),
-		"--theme-bg": sidebar.bg,
-		"--theme-sidebar-text": sidebar.text,
-		"--theme-sidebar-hover": sidebar.hover,
-		"--theme-sidebar-hover-text": sidebar.hoverText,
-		"--theme-sidebar-active-bg": sidebar.activeBg,
-		"--theme-sidebar-active-text": sidebar.activeText
-	};
-}
-var THEME_PRESETS = [
-	{
-		name: "navy",
-		label: "Navy",
-		seed: {
-			interface: {
-				accent: "#06354f",
-				background: "#f3f4f6"
-			},
-			sidebar: {
-				accent: "#06354f",
-				background: "#06354f"
-			}
-		}
-	},
-	{
-		name: "light",
-		label: "Light",
-		seed: { interface: {
-			accent: "#0d6efd",
-			background: "#ffffff",
-			accentText: "#ffffff"
-		} }
-	},
-	{
-		name: "dark",
-		label: "Dark",
-		seed: {
-			interface: {
-				accent: "#2f81f7",
-				background: "#0d1117"
-			},
-			sidebar: {
-				accent: "#2f81f7",
-				background: "#161b22"
-			}
-		}
-	},
-	{
-		name: "rose-pine",
-		label: "Rosé Pine",
-		seed: {
-			interface: {
-				accent: "#c4a7e7",
-				background: "#191724"
-			},
-			sidebar: {
-				accent: "#c4a7e7",
-				background: "#1f1d2e"
-			}
-		}
-	}
-];
-var DEFAULT_PRESET = THEME_PRESETS[0];
-function applyTheme(el, vars) {
+/** Whether the screen shows display-p3, so wide-gamut values are worth setting. */
+function prefersWideGamut() {
+	return typeof matchMedia === "function" && matchMedia("(color-gamut: p3)").matches;
+}
+/**
+* Sets tokens on an element, such as the document root or a preview pane.
+* Given a generated theme, it sets the sRGB values and, on a wide-gamut screen,
+* the display-p3 ones over them; inline values can't carry a media query.
+*/
+function applyTheme(el, theme, wide = prefersWideGamut()) {
+	const vars = "srgb" in theme && typeof theme.srgb === "object" ? {
+		...theme.srgb,
+		...wide ? theme.p3 : {}
+	} : theme;
 	for (const [token, value] of Object.entries(vars)) if (value !== void 0) el.style.setProperty(token, value);
 }
 //#endregion
-export { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor };
+export { CODE_STYLES, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, JND, SIDEBAR_TOKENS, THEME_PRESETS, THEME_TOKENS, apcaContrast, applyTheme, composite, contrastRatio, deltaE, deriveTheme, fitSeed, generateTheme, isDarkColor, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, schemeFor, serializeTheme, themeStylesheet, toHex, toP3 };

package/dist/theme/model.d.ts

@@ -0,0 +1,64 @@
+export type Mode = 'light' | 'dark';
+/** What a person prefers: one mode, or whichever the device asks for. */
+export type ColorPreference = Mode | 'system';
+/** How strongly the code theme colors syntax. */
+export type CodeStyle = 'balanced' | 'vivid' | 'muted' | 'mono';
+export declare const CODE_STYLES: readonly CodeStyle[];
+/** The three choices a surface is generated from. */
+export interface Seed {
+    /** The background, as a hex or `oklch()`. Its lightness sets light or dark; its hue tints every neutral. */
+    base: string;
+    /** The brand color, as a hex or `oklch()`. Filled buttons show it exactly. */
+    accent: string;
+    /** 0–100, 30 by default. Raises the separation of surfaces and borders and the contrast of text; text never drops below WCAG AA. */
+    contrast?: number;
+}
+/** A theme in one mode: the page's seed, and the sidebar's own base or accent when it has them. */
+export interface Scheme {
+    interface: Seed;
+    sidebar?: {
+        base?: string;
+        accent?: string;
+    };
+}
+/** A theme for both modes, as a host stores it and a person copies it. A missing mode is derived from the other. */
+export interface Theme {
+    version: 1;
+    light?: Scheme;
+    dark?: Scheme;
+    /** How the code theme colors syntax; balanced by default. */
+    code?: CodeStyle;
+}
+export declare const DEFAULT_CONTRAST = 30;
+export interface ThemePreset {
+    name: string;
+    label: string;
+    theme: Theme;
+}
+export declare const THEME_PRESETS: readonly ThemePreset[];
+export declare const DEFAULT_PRESET: ThemePreset;
+export declare const DEFAULT_THEME: Theme;
+/** The mode a scheme renders in, read from its base. */
+export declare function modeOf(scheme: Scheme): Mode;
+/** The mode a preference resolves to. */
+export declare function resolveMode(preference: ColorPreference, prefersDark: boolean): Mode;
+/** The scheme a theme has for a mode, derived from its other mode when it has none,
+ *  and from the default theme when it has neither. */
+export declare function schemeFor(theme: Theme | undefined, mode: Mode): Scheme;
+/** Why a pasted theme was refused, and where. */
+export interface ThemeParseError {
+    code: 'json' | 'version' | 'shape' | 'color' | 'range';
+    /** The field at fault, such as `light.interface.accent`. */
+    path: string;
+}
+export type ThemeParseResult = {
+    ok: true;
+    theme: Theme;
+} | {
+    ok: false;
+    error: ThemeParseError;
+};
+/** Reads a theme from JSON text or a parsed value, such as a paste or a stored row. Never throws. */
+export declare function parseTheme(input: unknown): ThemeParseResult;
+/** A theme as small, stable JSON: what a host stores and a person copies. */
+export declare function serializeTheme(theme: Theme): string;

package/dist/theme/model.js

@@ -0,0 +1,219 @@
+import { oklch, parseColor, toHex } from "./color.js";
+import { isDarkColor } from "./contrast.js";
+//#region src/theme/model.ts
+var CODE_STYLES = [
+	"balanced",
+	"vivid",
+	"muted",
+	"mono"
+];
+var DEFAULT_CONTRAST = 30;
+var THEME_PRESETS = [
+	{
+		name: "navy",
+		label: "Navy",
+		theme: {
+			version: 1,
+			light: {
+				interface: {
+					base: "#f3f4f6",
+					accent: "#06354f"
+				},
+				sidebar: { base: "#06354f" }
+			},
+			dark: { interface: {
+				base: "#111418",
+				accent: "#5b9ccf"
+			} }
+		}
+	},
+	{
+		name: "light",
+		label: "Light",
+		theme: {
+			version: 1,
+			light: { interface: {
+				base: "#ffffff",
+				accent: "#0d6efd"
+			} }
+		}
+	},
+	{
+		name: "dark",
+		label: "Dark",
+		theme: {
+			version: 1,
+			dark: {
+				interface: {
+					base: "#0d1117",
+					accent: "#2f81f7"
+				},
+				sidebar: { base: "#161b22" }
+			}
+		}
+	},
+	{
+		name: "rose-pine",
+		label: "Rosé Pine",
+		theme: {
+			version: 1,
+			dark: {
+				interface: {
+					base: "#191724",
+					accent: "#c4a7e7"
+				},
+				sidebar: { base: "#1f1d2e" }
+			}
+		}
+	}
+];
+var DEFAULT_PRESET = THEME_PRESETS[0];
+var DEFAULT_THEME = DEFAULT_PRESET.theme;
+/** The mode a scheme renders in, read from its base. */
+function modeOf(scheme) {
+	return isDarkColor(toHex(oklch(scheme.interface.base))) ? "dark" : "light";
+}
+/** The mode a preference resolves to. */
+function resolveMode(preference, prefersDark) {
+	if (preference === "system") return prefersDark ? "dark" : "light";
+	return preference;
+}
+var ANCHOR = {
+	light: .985,
+	dark: .19
+};
+/** One scheme carried into the other mode: the base keeps its hue and tint at the
+*  other mode's lightness, the accent and contrast carry over, and the sidebar
+*  falls back to its derived default since its relation to the page doesn't flip. */
+function carry(scheme, mode) {
+	const base = oklch(scheme.interface.base);
+	const sidebarAccent = scheme.sidebar?.accent;
+	return {
+		interface: {
+			...scheme.interface,
+			base: toHex({
+				...base,
+				l: ANCHOR[mode],
+				c: Math.min(base.c, mode === "dark" ? .03 : .02)
+			})
+		},
+		...sidebarAccent ? { sidebar: { accent: sidebarAccent } } : {}
+	};
+}
+/** The scheme a theme has for a mode, derived from its other mode when it has none,
+*  and from the default theme when it has neither. */
+function schemeFor(theme, mode) {
+	const own = theme?.[mode];
+	if (own) return own;
+	const other = theme?.[mode === "light" ? "dark" : "light"];
+	if (other) return carry(other, mode);
+	return schemeFor(DEFAULT_THEME, mode);
+}
+var isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+/** Reads a theme from JSON text or a parsed value, such as a paste or a stored row. Never throws. */
+function parseTheme(input) {
+	let value = input;
+	if (typeof input === "string") try {
+		value = JSON.parse(input);
+	} catch {
+		return {
+			ok: false,
+			error: {
+				code: "json",
+				path: ""
+			}
+		};
+	}
+	if (!isRecord(value)) return {
+		ok: false,
+		error: {
+			code: "shape",
+			path: ""
+		}
+	};
+	if (value.version !== 1) return {
+		ok: false,
+		error: {
+			code: "version",
+			path: "version"
+		}
+	};
+	const theme = { version: 1 };
+	const fail = (code, path) => ({
+		ok: false,
+		error: {
+			code,
+			path
+		}
+	});
+	const color = (v, path) => {
+		if (typeof v !== "string") return fail("shape", path);
+		return parseColor(v) ? v.trim() : fail("color", path);
+	};
+	for (const mode of ["light", "dark"]) {
+		const scheme = value[mode];
+		if (scheme === void 0) continue;
+		if (!isRecord(scheme) || !isRecord(scheme.interface)) return fail("shape", `${mode}.interface`);
+		const at = `${mode}.interface`;
+		const base = color(scheme.interface.base, `${at}.base`);
+		if (typeof base !== "string") return base;
+		const accent = color(scheme.interface.accent, `${at}.accent`);
+		if (typeof accent !== "string") return accent;
+		const seed = {
+			base,
+			accent
+		};
+		const contrast = scheme.interface.contrast;
+		if (contrast !== void 0) {
+			if (typeof contrast !== "number" || !Number.isFinite(contrast)) return fail("shape", `${at}.contrast`);
+			if (contrast < 0 || contrast > 100) return fail("range", `${at}.contrast`);
+			seed.contrast = contrast;
+		}
+		const parsed = { interface: seed };
+		if (scheme.sidebar !== void 0) {
+			if (!isRecord(scheme.sidebar)) return fail("shape", `${mode}.sidebar`);
+			parsed.sidebar = {};
+			if (scheme.sidebar.base !== void 0) {
+				const sidebarBase = color(scheme.sidebar.base, `${mode}.sidebar.base`);
+				if (typeof sidebarBase !== "string") return sidebarBase;
+				parsed.sidebar.base = sidebarBase;
+			}
+			if (scheme.sidebar.accent !== void 0) {
+				const sidebarAccent = color(scheme.sidebar.accent, `${mode}.sidebar.accent`);
+				if (typeof sidebarAccent !== "string") return sidebarAccent;
+				parsed.sidebar.accent = sidebarAccent;
+			}
+		}
+		theme[mode] = parsed;
+	}
+	if (value.code !== void 0) {
+		if (!CODE_STYLES.includes(value.code)) return fail("range", "code");
+		theme.code = value.code;
+	}
+	return {
+		ok: true,
+		theme
+	};
+}
+/** A theme as small, stable JSON: what a host stores and a person copies. */
+function serializeTheme(theme) {
+	const scheme = (s) => s && {
+		interface: {
+			base: s.interface.base,
+			accent: s.interface.accent,
+			...s.interface.contrast === void 0 ? {} : { contrast: s.interface.contrast }
+		},
+		...s.sidebar ? { sidebar: {
+			...s.sidebar.base ? { base: s.sidebar.base } : {},
+			...s.sidebar.accent ? { accent: s.sidebar.accent } : {}
+		} } : {}
+	};
+	return JSON.stringify({
+		version: 1,
+		...theme.light ? { light: scheme(theme.light) } : {},
+		...theme.dark ? { dark: scheme(theme.dark) } : {},
+		...theme.code ? { code: theme.code } : {}
+	});
+}
+//#endregion
+export { CODE_STYLES, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, resolveMode, schemeFor, serializeTheme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.44.0",
-  "description": "React UI components: a theme contract, icons, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
+  "version": "0.45.0",
+  "description": "React UI components: a theme contract, icons, brand logos, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -21,6 +21,10 @@
       "types": "./dist/icons.d.ts",
       "import": "./dist/icons.js"
     },
+    "./brand-icons": {
+      "types": "./dist/brandIcons.d.ts",
+      "import": "./dist/brandIcons.js"
+    },
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.js"
@@ -82,6 +86,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
+    "@daypicker/react": "^10.0.2",
     "@streamdown/code": "^2.0.0",
     "@streamdown/math": "^1.0.3",
     "@streamdown/mermaid": "^1.0.3",
@@ -91,14 +96,13 @@
     "clsx": "^2.1.1",
     "css-tree": "^3.2.1",
     "dequal": "^2.0.3",
+    "lucide-react": "1.48.0",
     "luxon": "^3.7.2",
-    "re-resizable": "^6.11.2",
-    "react-icons": "5.7.0",
     "react-zoom-pan-pinch": "^4.2.0",
     "shiki": "^4.5.0",
     "streamdown": "^2.7.0",
     "swr": "^2.5.1",
-    "usehooks-ts": "^3.1.1"
+    "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",

package/dist/ai/ui/Avatar.d.ts

@@ -1,7 +0,0 @@
-interface AvatarProps {
-    src?: string | undefined;
-    name?: string;
-    className?: string;
-}
-export declare function Avatar({ src, name, className }: AvatarProps): import("react").JSX.Element;
-export {};