@heyramzi/ui 2.11.1 → 2.11.2

package/dist/agents/helpers.js

@@ -1,52 +1,52 @@
+/* Pure helpers for the avatar: numbers, theme, lights, idle scheduling. */
 import { DARK_INK, LIGHT_INK, luminance } from "./vendor/color.js";
 import { stockLights } from "./vendor/plastic.js";
-const contrast = (a, b)=>(Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+const contrast = (a, b) => (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+/** Off-black or off-white eyes, whichever reads stronger on the body: the vendor's fixed cutoff left 2:1 eyes on mid blues. */
 export function inkFor(body) {
-    const l = luminance(body);
-    return contrast(l, luminance(DARK_INK)) >= contrast(l, luminance(LIGHT_INK)) ? DARK_INK : LIGHT_INK;
+	const l = luminance(body);
+	return contrast(l, luminance(DARK_INK)) >= contrast(l, luminance(LIGHT_INK)) ? DARK_INK : LIGHT_INK;
 }
-export const clamp = (v, lo, hi)=>Math.min(hi, Math.max(lo, Number.isFinite(v) ? v : 1));
-export const q = (v, lo, hi)=>Math.round(clamp(v, lo, hi) * 20) / 20;
-export const clampOpt = (v, d, lo, hi)=>clamp(v ?? d, lo, hi);
-export const deviceDpr = ()=>Math.min(2, typeof devicePixelRatio === "number" && devicePixelRatio || 1);
+export const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, Number.isFinite(v) ? v : 1));
+export const q = (v, lo, hi) => Math.round(clamp(v, lo, hi) * 20) / 20;
+export const clampOpt = (v, d, lo, hi) => clamp(v ?? d, lo, hi);
+export const deviceDpr = () => Math.min(2, typeof devicePixelRatio === "number" && devicePixelRatio || 1);
 export function hashSeed(id) {
-    let h = 2166136261;
-    for(let i = 0; i < id.length; i++)h = Math.imul(h ^ id.charCodeAt(i), 16777619);
-    return (h >>> 0) % 1000 / 1000;
+	let h = 2166136261;
+	for (let i = 0; i < id.length; i++) h = Math.imul(h ^ id.charCodeAt(i), 16777619);
+	return (h >>> 0) % 1e3 / 1e3;
 }
-export const reducedMotion = ()=>typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+export const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 export function resolveTheme(theme, el) {
-    if (theme !== "auto") return theme;
-    const host = el?.closest("[data-theme], .dark, .light");
-    if (host) {
-        const v = host.getAttribute("data-theme");
-        if (v === "dark" || v === "light") return v;
-        if (host.classList.contains("dark")) return "dark";
-        if (host.classList.contains("light")) return "light";
-    }
-    return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+	if (theme !== "auto") return theme;
+	const host = el?.closest("[data-theme], .dark, .light");
+	if (host) {
+		const v = host.getAttribute("data-theme");
+		if (v === "dark" || v === "light") return v;
+		if (host.classList.contains("dark")) return "dark";
+		if (host.classList.contains("light")) return "light";
+	}
+	return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
 }
 export function lightsFor(lightAt, backLight, lightFront) {
-    const a = lightAt * Math.PI / 180;
-    const b = (backLight ?? 0) * Math.PI / 180;
-    const lights = stockLights(Math.sin(a), -Math.cos(a));
-    if (backLight !== undefined) [lights.bx, lights.by] = [
-        Math.sin(b),
-        -Math.cos(b)
-    ];
-    if (lightFront !== undefined) lights.front = Math.min(85, Math.max(0, lightFront)) * Math.PI / 180;
-    return lights;
+	const a = lightAt * Math.PI / 180;
+	const b = (backLight ?? 0) * Math.PI / 180;
+	const lights = stockLights(Math.sin(a), -Math.cos(a));
+	if (backLight !== undefined) [lights.bx, lights.by] = [Math.sin(b), -Math.cos(b)];
+	if (lightFront !== undefined) lights.front = Math.min(85, Math.max(0, lightFront)) * Math.PI / 180;
+	return lights;
 }
 export function warmIdle(fn) {
-    if (typeof requestIdleCallback === "function") {
-        const id = requestIdleCallback(fn);
-        return ()=>cancelIdleCallback(id);
-    }
-    const id = setTimeout(fn, 1);
-    return ()=>clearTimeout(id);
+	if (typeof requestIdleCallback === "function") {
+		const id = requestIdleCallback(fn);
+		return () => cancelIdleCallback(id);
+	}
+	const id = setTimeout(fn, 1);
+	return () => clearTimeout(id);
 }
+/* Full pull up close, fading to nothing by 3 head widths. */
 export function pointerStrength(d) {
-    if (d < 1) return 1;
-    if (d > 3) return 0;
-    return 1 - (d - 1) / 2;
+	if (d < 1) return 1;
+	if (d > 3) return 0;
+	return 1 - (d - 1) / 2;
 }

package/dist/agents/page-state.js

@@ -1,65 +1,64 @@
+/* What every avatar on the page shares: the batching shown-gate, so a row of
+them comes in together, the path caches, and one theme watcher. */
 import { bakesPending } from "./vendor/plastic.js";
-export const SHOW_WITHIN = 4000;
+export const SHOW_WITHIN = 4e3;
 export const waiters = new Map();
 export function showReady() {
-    if (bakesPending()) return;
-    for (const w of waiters.values())if (!w.ready()) return;
-    const all = [
-        ...waiters.values()
-    ];
-    waiters.clear();
-    for (const w of all)w.show();
+	if (bakesPending()) return;
+	for (const w of waiters.values()) if (!w.ready()) return;
+	const all = [...waiters.values()];
+	waiters.clear();
+	for (const w of all) w.show();
 }
 const pathCache = new Map();
 export function bodyPath(d) {
-    let p = pathCache.get(d);
-    if (!p) {
-        p = new Path2D(d);
-        pathCache.set(d, p);
-    }
-    return p;
+	let p = pathCache.get(d);
+	if (!p) {
+		p = new Path2D(d);
+		pathCache.set(d, p);
+	}
+	return p;
 }
 const partsCache = new Map();
 export function partPaths(d) {
-    let p = partsCache.get(d);
-    if (!p) {
-        p = d.split(/(?=M)/).filter((s)=>s.trim()).map((s)=>new Path2D(s));
-        partsCache.set(d, p);
-    }
-    return p;
+	let p = partsCache.get(d);
+	if (!p) {
+		p = d.split(/(?=M)/).filter((s) => s.trim()).map((s) => new Path2D(s));
+		partsCache.set(d, p);
+	}
+	return p;
 }
 let uidSeq = 0;
-export const nextUid = ()=>`ba-${++uidSeq}`;
+export const nextUid = () => `ba-${++uidSeq}`;
+/* One observer for the whole page: a `.dark` or `data-theme` flip on
+<html> or <body>, or the OS scheme changing, repaints every auto avatar. */
 const themeListeners = new Set();
 let themeWatch = null;
 export function onThemeChange(fn) {
-    themeListeners.add(fn);
-    if (!themeWatch && typeof MutationObserver === "function" && typeof document !== "undefined") {
-        const fire = ()=>{
-            for (const l of themeListeners)l();
-        };
-        const mo = new MutationObserver(fire);
-        const opts = {
-            attributes: true,
-            attributeFilter: [
-                "class",
-                "data-theme"
-            ]
-        };
-        mo.observe(document.documentElement, opts);
-        if (document.body) mo.observe(document.body, opts);
-        const mq = typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)") : null;
-        mq?.addEventListener("change", fire);
-        themeWatch = ()=>{
-            mo.disconnect();
-            mq?.removeEventListener("change", fire);
-        };
-    }
-    return ()=>{
-        themeListeners.delete(fn);
-        if (themeListeners.size === 0 && themeWatch) {
-            themeWatch();
-            themeWatch = null;
-        }
-    };
+	themeListeners.add(fn);
+	if (!themeWatch && typeof MutationObserver === "function" && typeof document !== "undefined") {
+		const fire = () => {
+			for (const l of themeListeners) l();
+		};
+		const mo = new MutationObserver(fire);
+		const opts = {
+			attributes: true,
+			attributeFilter: ["class", "data-theme"]
+		};
+		mo.observe(document.documentElement, opts);
+		if (document.body) mo.observe(document.body, opts);
+		const mq = typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)") : null;
+		mq?.addEventListener("change", fire);
+		themeWatch = () => {
+			mo.disconnect();
+			mq?.removeEventListener("change", fire);
+		};
+	}
+	return () => {
+		themeListeners.delete(fn);
+		if (themeListeners.size === 0 && themeWatch) {
+			themeWatch();
+			themeWatch = null;
+		}
+	};
 }

package/dist/agents/vendor/color.js

@@ -1,149 +1,168 @@
+// @ts-nocheck WHY: vendored engine, kept as upstream wrote it so a re-sync stays a clean diff. Strict flags in consumers (review) would flag ~870 spots.
+/** Parse #rgb / #rrggbb / rgb() / hsl() into 0–255 channels; null for anything else. */
 export function parseColor(input) {
-    const s = input.trim();
-    const hsl = s.match(/^hsla?\(\s*([\d.]+)(?:deg)?[,\s]+([\d.]+)%[,\s]+([\d.]+)%/i);
-    if (hsl) return hslToRgb([
-        Number(hsl[1]) / 360,
-        Number(hsl[2]) / 100,
-        Number(hsl[3]) / 100
-    ]);
-    const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
-    if (hex) {
-        let h = hex[1];
-        if (h.length === 3) h = h.split("").map((c)=>c + c).join("");
-        const n = parseInt(h, 16);
-        return [
-            n >> 16 & 255,
-            n >> 8 & 255,
-            n & 255
-        ];
-    }
-    const rgb = s.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i);
-    if (rgb) return [
-        Number(rgb[1]),
-        Number(rgb[2]),
-        Number(rgb[3])
-    ];
-    return null;
+	const s = input.trim();
+	const hsl = s.match(/^hsla?\(\s*([\d.]+)(?:deg)?[,\s]+([\d.]+)%[,\s]+([\d.]+)%/i);
+	if (hsl) return hslToRgb([
+		Number(hsl[1]) / 360,
+		Number(hsl[2]) / 100,
+		Number(hsl[3]) / 100
+	]);
+	const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+	if (hex) {
+		let h = hex[1];
+		if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+		const n = parseInt(h, 16);
+		return [
+			n >> 16 & 255,
+			n >> 8 & 255,
+			n & 255
+		];
+	}
+	const rgb = s.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i);
+	if (rgb) return [
+		Number(rgb[1]),
+		Number(rgb[2]),
+		Number(rgb[3])
+	];
+	return null;
 }
+/** Relative luminance (WCAG), 0–1. Unparseable colours count as mid-grey. */
 export function luminance(color) {
-    const c = parseColor(color);
-    if (!c) return 0.5;
-    const lin = (v)=>{
-        const x = v / 255;
-        return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
-    };
-    return 0.2126 * lin(c[0]) + 0.7152 * lin(c[1]) + 0.0722 * lin(c[2]);
+	const c = parseColor(color);
+	if (!c) return .5;
+	const lin = (v) => {
+		const x = v / 255;
+		return x <= .03928 ? x / 12.92 : ((x + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * lin(c[0]) + .7152 * lin(c[1]) + .0722 * lin(c[2]);
 }
 export const DARK_INK = "#1E1A33";
 export const LIGHT_INK = "#F7F5F2";
+/** Face ink for a body colour: dark ink, or light ink on a dark body. */
 export function autoInk(color) {
-    return luminance(color) < 0.13 ? LIGHT_INK : DARK_INK;
+	return luminance(color) < .13 ? LIGHT_INK : DARK_INK;
 }
+/* ── HSL, for the body's shades ─────────────────────────────────────── */
 function rgbToHsl([r, g, b]) {
-    r /= 255;
-    g /= 255;
-    b /= 255;
-    const max = Math.max(r, g, b), min = Math.min(r, g, b);
-    const l = (max + min) / 2;
-    if (max === min) return [
-        0,
-        0,
-        l
-    ];
-    const d = max - min;
-    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    let h = 0;
-    if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
-    else if (max === g) h = (b - r) / d + 2;
-    else h = (r - g) / d + 4;
-    return [
-        h / 6,
-        s,
-        l
-    ];
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b), min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	if (max === min) return [
+		0,
+		0,
+		l
+	];
+	const d = max - min;
+	const s = l > .5 ? d / (2 - max - min) : d / (max + min);
+	let h = 0;
+	if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
+	else if (max === g) h = (b - r) / d + 2;
+	else h = (r - g) / d + 4;
+	return [
+		h / 6,
+		s,
+		l
+	];
 }
 function hslToRgb([h, s, l]) {
-    if (s === 0) return [
-        l * 255,
-        l * 255,
-        l * 255
-    ];
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    const f = (t)=>{
-        t = (t % 1 + 1) % 1;
-        if (t < 1 / 6) return p + (q - p) * 6 * t;
-        if (t < 1 / 2) return q;
-        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-        return p;
-    };
-    return [
-        f(h + 1 / 3) * 255,
-        f(h) * 255,
-        f(h - 1 / 3) * 255
-    ];
+	if (s === 0) return [
+		l * 255,
+		l * 255,
+		l * 255
+	];
+	const q = l < .5 ? l * (1 + s) : l + s - l * s;
+	const p = 2 * l - q;
+	const f = (t) => {
+		t = (t % 1 + 1) % 1;
+		if (t < 1 / 6) return p + (q - p) * 6 * t;
+		if (t < 1 / 2) return q;
+		if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+		return p;
+	};
+	return [
+		f(h + 1 / 3) * 255,
+		f(h) * 255,
+		f(h - 1 / 3) * 255
+	];
 }
 function hslToCss([h, s, l]) {
-    return `hsl(${(h * 360).toFixed(1)} ${(s * 100).toFixed(1)}% ${(l * 100).toFixed(1)}%)`;
+	return `hsl(${(h * 360).toFixed(1)} ${(s * 100).toFixed(1)}% ${(l * 100).toFixed(1)}%)`;
 }
-const clamp01 = (v)=>Math.min(1, Math.max(0, v));
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/**
+* A shade of a colour: `dl` moves the lightness (−1..1), `ds` the
+* saturation. Darker shades get a touch more saturation so they stay
+* rich instead of going grey, the way a painted surface falls into shadow.
+*/
 export function shade(color, dl, ds = 0) {
-    const c = parseColor(color);
-    if (!c) return color;
-    const [h, s, l] = rgbToHsl(c);
-    return hslToCss([
-        h,
-        clamp01(s + ds + (dl < 0 ? -dl * 0.25 : 0)),
-        clamp01(l + dl)
-    ]);
+	const c = parseColor(color);
+	if (!c) return color;
+	const [h, s, l] = rgbToHsl(c);
+	return hslToCss([
+		h,
+		clamp01(s + ds + (dl < 0 ? -dl * .25 : 0)),
+		clamp01(l + dl)
+	]);
 }
-const toLinear = (u)=>u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4);
-const toSrgb = (u)=>u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(u, 1 / 2.4) - 0.055;
+/* OKLab, for moving a colour along its own hue (Björn Ottosson's) */
+const toLinear = (u) => u <= .04045 ? u / 12.92 : Math.pow((u + .055) / 1.055, 2.4);
+const toSrgb = (u) => u <= .0031308 ? 12.92 * u : 1.055 * Math.pow(u, 1 / 2.4) - .055;
 function oklab(r, g, b) {
-    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
-    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
-    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
-    return [
-        0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-        1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-        0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
-    ];
+	const l = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * b);
+	const m = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * b);
+	const s = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * b);
+	return [
+		.2104542553 * l + .793617785 * m - .0040720468 * s,
+		1.9779984951 * l - 2.428592205 * m + .4505937099 * s,
+		.0259040371 * l + .7827717662 * m - .808675766 * s
+	];
 }
 function fromOklab(L, a, b) {
-    const l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * b, 3);
-    const m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * b, 3);
-    const s = Math.pow(L - 0.0894841775 * a - 1.291485548 * b, 3);
-    return [
-        4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-        -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-        -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
-    ];
+	const l = Math.pow(L + .3963377774 * a + .2158037573 * b, 3);
+	const m = Math.pow(L - .1055613458 * a - .0638541728 * b, 3);
+	const s = Math.pow(L - .0894841775 * a - 1.291485548 * b, 3);
+	return [
+		4.0767416621 * l - 3.3077115913 * m + .2309699292 * s,
+		-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s,
+		-.0041960863 * l - .7034186147 * m + 1.707614701 * s
+	];
 }
-const inGamut = (c)=>c.every((v)=>v >= -1e-4 && v <= 1 + 1e-4);
+const inGamut = (c) => c.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
+/** A more vivid version of a colour, `t` 0–1: its chroma raised along its
+own hue (in OKLab) by up to half again. Where the screen cannot show that
+at the same lightness, the colour deepens a little — by at most 15% of
+its lightness — toward the hue's most vivid shade (a sky blue toward a
+royal one), and the chroma stops at whatever the screen can show. */
 export function richer(color, t) {
-    const c = parseColor(color);
-    if (!c || !(t > 0)) return color;
-    const [L, a, b] = oklab(toLinear(c[0] / 255), toLinear(c[1] / 255), toLinear(c[2] / 255));
-    const C = Math.hypot(a, b);
-    if (C < 1e-4) return color;
-    const ua = a / C, ub = b / C;
-    const want = C * (1 + 0.5 * t);
-    let best = null, bestC = C;
-    for(let k = 0; k <= 6; k++){
-        const Lk = L * (1 - 0.15 * t * k / 6);
-        let lo = 0, hi = want;
-        for(let it = 0; it < 18; it++){
-            const mid = (lo + hi) / 2;
-            if (inGamut(fromOklab(Lk, ua * mid, ub * mid))) lo = mid;
-            else hi = mid;
-        }
-        if (lo > bestC + 0.004 * k) {
-            bestC = lo;
-            best = fromOklab(Lk, ua * lo, ub * lo);
-        }
-        if (lo >= want - 1e-4) break;
-    }
-    if (!best) return color;
-    const out = best.map((v)=>Math.round(255 * toSrgb(Math.min(1, Math.max(0, v)))));
-    return `rgb(${out[0]} ${out[1]} ${out[2]})`;
+	const c = parseColor(color);
+	if (!c || !(t > 0)) return color;
+	const [L, a, b] = oklab(toLinear(c[0] / 255), toLinear(c[1] / 255), toLinear(c[2] / 255));
+	const C = Math.hypot(a, b);
+	if (C < 1e-4) return color;
+	const ua = a / C, ub = b / C;
+	const want = C * (1 + .5 * t);
+	let best = null, bestC = C;
+	/* the lightness from the colour's own down to 15% deeper, in steps; at
+	each, the most chroma the screen shows up to `want` */
+	for (let k = 0; k <= 6; k++) {
+		const Lk = L * (1 - .15 * t * k / 6);
+		let lo = 0, hi = want;
+		for (let it = 0; it < 18; it++) {
+			const mid = (lo + hi) / 2;
+			if (inGamut(fromOklab(Lk, ua * mid, ub * mid))) lo = mid;
+			else hi = mid;
+		}
+		/* deeper only for what it gains: each step must buy real chroma */
+		if (lo > bestC + .004 * k) {
+			bestC = lo;
+			best = fromOklab(Lk, ua * lo, ub * lo);
+		}
+		if (lo >= want - 1e-4) break;
+	}
+	if (!best) return color;
+	const out = best.map((v) => Math.round(255 * toSrgb(Math.min(1, Math.max(0, v)))));
+	return `rgb(${out[0]} ${out[1]} ${out[2]})`;
 }