@funpixel/tools 0.0.0-stage → 0.1.1

package/dist/look/theme.js

@@ -0,0 +1,278 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { ratio } from "./hud.js";
+import { lightProblems, lightValue } from "./light.js";
+export const LOOK_FILE = join('src', 'look.json');
+export const LOOK_REPORT = join('.funtools', 'look', 'report.json');
+export const FALLBACK_PREFIX = '[frame] look fallback:';
+export const TOKENS = {
+    bg: 'colour', ink: 'colour', primary: 'colour', accent: 'colour', harm: 'colour',
+    'button-ink': 'colour',
+    plate: 'paint', 'plate-edge': 'colour', 'plate-ink': 'colour', 'plate-radius': 'length', 'plate-shadow': 'shadow',
+    'ui-stroke': 'length', 'icon-line': 'colour', 'icon-fill': 'colour', 'icon-stroke': 'number',
+    'font-display': 'font', 'font-body': 'font',
+    'sky-top': 'colour', 'sky-horizon': 'colour', ground: 'colour', 'ground-2': 'colour', stone: 'colour',
+    hero: 'colour', 'hero-accent': 'colour', 'key-light': 'colour',
+};
+const OWN = /^x-[a-z0-9-]+$/;
+export const BLOCKS = new Set(['light']);
+const clamp = (n, lo = 0, hi = 255) => Math.min(hi, Math.max(lo, n));
+const NAMED = { transparent: [0, 0, 0, 0], black: [0, 0, 0, 1], white: [255, 255, 255, 1] };
+function hsl(h, s, l) {
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => { const k = (n + h / 30) % 12; return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)))); };
+    return [f(0), f(8), f(4)];
+}
+export function parseColour(v) {
+    const s = v.trim().toLowerCase();
+    if (NAMED[s])
+        return NAMED[s];
+    const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(s);
+    if (hex) {
+        let h = hex[1];
+        if (h.length <= 4)
+            h = [...h].map((c) => c + c).join('');
+        const n = (i) => parseInt(h.slice(i, i + 2), 16);
+        return [n(0), n(2), n(4), h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1];
+    }
+    const fn = /^(rgba?|hsla?)\(([^)]*)\)$/.exec(s);
+    if (!fn)
+        return null;
+    const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3 || parts.length > 4)
+        return null;
+    const num = (p, scale) => (p.endsWith('%') ? (parseFloat(p) / 100) * scale : parseFloat(p));
+    const alpha = parts[3] === undefined ? 1 : num(parts[3], 1);
+    if (fn[1].startsWith('rgb')) {
+        const c = parts.slice(0, 3).map((p) => num(p, 255));
+        if ([...c, alpha].some((x) => !Number.isFinite(x)))
+            return null;
+        return [clamp(Math.round(c[0])), clamp(Math.round(c[1])), clamp(Math.round(c[2])), clamp(alpha, 0, 1)];
+    }
+    const h = parseFloat(parts[0]), sat = num(parts[1], 1), l = num(parts[2], 1);
+    if (![h, sat, l, alpha].every(Number.isFinite))
+        return null;
+    return [...hsl(((h % 360) + 360) % 360, clamp(sat, 0, 1), clamp(l, 0, 1)), clamp(alpha, 0, 1)];
+}
+export function coloursIn(v) {
+    const single = parseColour(v);
+    if (single)
+        return [single];
+    return [...v.matchAll(/#[0-9a-f]{3,8}\b|(?:rgba?|hsla?)\([^)]*\)/gi)].map((m) => parseColour(m[0])).filter((c) => !!c);
+}
+export const hex = (c) => `#${c.slice(0, 3).map((x) => Math.round(x).toString(16).padStart(2, '0')).join('')}`;
+export const over = (c, ground) => [0, 1, 2].map((i) => c[i] * c[3] + ground[i] * (1 - c[3]));
+const isLength = (v) => /^(0|-?\d*\.?\d+(px|rem|em|vh|vw|vmin|vmax|%))$/.test(v.trim());
+const isVar = (v) => /^var\(--([a-z0-9-]+)\)$/.exec(v.trim());
+export function valueProblem(kind, value, known = (n) => Object.hasOwn(TOKENS, n)) {
+    if (kind === 'number')
+        return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? null : 'a number of 0 or more';
+    if (typeof value !== 'string' || !value.trim())
+        return `a non-empty ${kind}`;
+    const v = value.trim();
+    const ref = isVar(v);
+    if (ref)
+        return known(ref[1]) ? null : `var(--${ref[1]}) names no token`;
+    switch (kind) {
+        case 'colour': return v.toLowerCase() === 'currentcolor' || parseColour(v) ? null : 'a colour (#hex, rgb(), hsl(), transparent, currentColor or var(--token))';
+        case 'paint': return parseColour(v) || (/gradient\(/.test(v) && coloursIn(v).length >= 2) ? null : 'a colour or a gradient with two colours or more';
+        case 'length': return isLength(v) ? null : 'a length (12px, 0.75rem, 2vmin)';
+        case 'shadow': return v === 'none' || /\d/.test(v) ? null : 'a box-shadow ("none" or "0 4px 12px rgba(…)")';
+        case 'font': return /[a-z]/i.test(v) && !/[;{}]/.test(v) ? null : 'a font stack ("\'Cinzel\', Georgia, serif")';
+    }
+}
+function distance(a, b) {
+    const d = Array.from({ length: a.length + 1 }, (_, i) => [i, ...Array(b.length).fill(0)]);
+    for (let j = 1; j <= b.length; j++)
+        d[0][j] = j;
+    for (let i = 1; i <= a.length; i++)
+        for (let j = 1; j <= b.length; j++)
+            d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+    return d[a.length][b.length];
+}
+export function closest(name, names = Object.keys(TOKENS)) {
+    const n = name.replace(/^--/, '').replace(/([a-z])([A-Z])/g, '$1-$2').replace(/_/g, '-').toLowerCase();
+    if (names.includes(n) && n !== name)
+        return [n];
+    return names.map((t) => ({ t, d: distance(n, t) - (t.includes(n) || n.includes(t) ? 2 : 0) }))
+        .filter((x) => x.d <= Math.max(2, Math.floor(n.length / 3)))
+        .sort((a, b) => a.d - b.d).slice(0, 3).map((x) => x.t);
+}
+export function validate(look) {
+    if (!look || typeof look !== 'object' || Array.isArray(look))
+        return [{ token: '(file)', what: 'the look is not a JSON object of tokens', suggest: [] }];
+    const l = look;
+    const out = [];
+    const known = (n) => n in TOKENS || (OWN.test(n) && n in l);
+    for (const [k, v] of Object.entries(l)) {
+        if (k.startsWith('$'))
+            continue;
+        if (k === 'light') {
+            out.push(...lightProblems(v));
+            continue;
+        }
+        if (OWN.test(k)) {
+            if (v === '' || v === null || v === undefined)
+                out.push({ token: k, what: 'an empty value', suggest: [] });
+            continue;
+        }
+        const kind = TOKENS[k];
+        if (!kind) {
+            out.push({ token: k, what: 'not a token the stylesheet reads', suggest: closest(k) });
+            continue;
+        }
+        const p = valueProblem(kind, v, known);
+        if (p)
+            out.push({ token: k, what: `${JSON.stringify(v)} is not ${p}`, suggest: [] });
+    }
+    return out;
+}
+export function mergePatch(look, patch) {
+    const out = { ...look };
+    for (const [k, v] of Object.entries(patch)) {
+        if (v === null)
+            delete out[k];
+        else if (BLOCKS.has(k) && v && typeof v === 'object' && !Array.isArray(v)) {
+            const block = { ...(typeof out[k] === 'object' ? out[k] : {}) };
+            for (const [bk, bv] of Object.entries(v)) {
+                if (bv === null)
+                    delete block[bk];
+                else
+                    block[bk] = bv;
+            }
+            out[k] = block;
+        }
+        else
+            out[k] = v;
+    }
+    return out;
+}
+export function parseAssignments(pairs) {
+    const patch = {}, bad = [];
+    for (const p of pairs) {
+        const i = p.indexOf('=');
+        if (i <= 0) {
+            bad.push(p);
+            continue;
+        }
+        const k = p.slice(0, i).trim().replace(/^--/, ''), raw = p.slice(i + 1).trim();
+        const dot = /^light\.([A-Za-z]+)$/.exec(k);
+        if (dot) {
+            const block = (patch.light ?? {});
+            block[dot[1]] = raw === 'null' ? null : lightValue(dot[1], raw);
+            patch.light = block;
+            continue;
+        }
+        patch[k] = raw === 'null' ? null : TOKENS[k] === 'number' && raw !== '' && Number.isFinite(Number(raw)) ? Number(raw) : raw;
+    }
+    return { patch, bad };
+}
+export const PAIRS = [
+    { fg: 'ink', bg: 'bg', need: 4.5, what: 'text on the page and the screens' },
+    { fg: 'plate-ink', bg: 'plate', on: 'bg', need: 4.5, what: 'HUD and card text on its plate' },
+    { fg: 'accent', bg: 'plate', on: 'bg', need: 4.5, what: 'accent numbers on a plate (the timer)' },
+    { fg: 'button-ink', bg: 'primary', on: 'bg', need: 4.5, what: 'the primary button\'s label' },
+    { fg: 'icon-fill', alt: 'icon-line', bg: 'plate', on: 'bg', need: 3, what: 'icons on a plate (the better of fill and line)' },
+];
+export function resolve(look, name, seen = new Set()) {
+    const v = look[name];
+    if (typeof v !== 'string' || seen.has(name))
+        return null;
+    seen.add(name);
+    const ref = isVar(v);
+    if (ref)
+        return resolve(look, ref[1], seen);
+    if (v.trim().toLowerCase() === 'currentcolor')
+        return resolve(look, name.startsWith('icon') ? 'plate-ink' : 'ink', seen);
+    return v;
+}
+function lightness(c) {
+    const [r, g, b] = c.map((x) => x / 255);
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), l = (max + min) / 2;
+    if (max === min)
+        return { h: 0, s: 0, l };
+    const d = max - min, s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    const h = max === r ? ((g - b) / d + (g < b ? 6 : 0)) * 60 : max === g ? ((b - r) / d + 2) * 60 : ((r - g) / d + 4) * 60;
+    return { h, s, l };
+}
+export function workedInk(fg, grounds, need) {
+    const { h, s, l } = lightness(fg);
+    const worst = (c) => Math.min(...grounds.map((g) => ratio(c, g)));
+    const meanLum = grounds.reduce((a, g) => a + lightness(g).l, 0) / grounds.length;
+    for (const dir of meanLum > 0.5 ? [-1, 1] : [1, -1]) {
+        for (let n = 0; n <= 100; n++) {
+            const x = clamp(l + dir * n * 0.01, 0, 1);
+            const c = hsl(h, s, x);
+            const r = worst(c);
+            if (r >= need)
+                return { ink: hex(c), ratio: Math.round(r * 100) / 100 };
+            if (x === 0 || x === 1)
+                break;
+        }
+    }
+    return null;
+}
+export function contrastReport(look) {
+    const page = parseColour(resolve(look, 'bg') ?? '');
+    const ground = page ? over(page, [0, 0, 0]) : [0, 0, 0];
+    const out = [];
+    for (const p of PAIRS) {
+        const fgv = resolve(look, p.fg), bgv = resolve(look, p.bg);
+        if (!fgv || !bgv)
+            continue;
+        const fgc = parseColour(fgv), bgs = coloursIn(bgv);
+        const base = { pair: `${p.fg} on ${p.bg}`, what: p.what, fg: fgv, bg: bgv, ratio: null, need: p.need, pass: null, ink: null, ink_ratio: null };
+        if (!fgc || !bgs.length) {
+            out.push({ ...base, note: 'not a colour this can read (an image or an unknown function)' });
+            continue;
+        }
+        const grounds = bgs.map((b) => over(b, p.on ? ground : [0, 0, 0]));
+        const ink = over(fgc, grounds[0]);
+        const worstOf = (c) => Math.min(...grounds.map((g) => ratio(c, g)));
+        const altv = p.alt ? resolve(look, p.alt) : null, altc = altv ? parseColour(altv) : null;
+        const r = Math.round(Math.max(worstOf(ink), altc ? worstOf(over(altc, grounds[0])) : 0) * 100) / 100;
+        const pass = r >= p.need;
+        const worked = pass ? null : workedInk(ink, grounds, p.need);
+        out.push({ ...base, ratio: r, pass, ink: worked?.ink ?? null, ink_ratio: worked?.ratio ?? null, ...(pass || worked ? {} : { note: 'LOW, and no ink of this hue clears it: change the ground (yours to fix)' }) });
+    }
+    return out;
+}
+export function readLook(dir) {
+    const path = join(dir, LOOK_FILE);
+    if (!existsSync(path))
+        return { path, exists: false, look: {}, parseError: null };
+    try {
+        const v = JSON.parse(readFileSync(path, 'utf8'));
+        return { path, exists: true, look: v && typeof v === 'object' && !Array.isArray(v) ? v : {}, parseError: v && typeof v === 'object' && !Array.isArray(v) ? null : 'not a JSON object' };
+    }
+    catch (e) {
+        return { path, exists: true, look: {}, parseError: e.message };
+    }
+}
+export function lenient(look) {
+    const problems = validate(look);
+    const bad = new Set(problems.map((p) => p.token));
+    const applied = {};
+    for (const [k, v] of Object.entries(look))
+        if (!bad.has(k) && !k.startsWith('$'))
+            applied[k] = v;
+    const fallbacks = problems.map((p) => `${FALLBACK_PREFIX} ${p.token}: ${p.what}${p.suggest.length ? ` (did you mean ${p.suggest.join(', ')}?)` : ''}; the stylesheet's value renders`);
+    return { applied, fallbacks };
+}
+export function styleDrift(dir, look) {
+    let roles = {};
+    try {
+        roles = JSON.parse(readFileSync(join(dir, 'assets', 'style.json'), 'utf8'))?.ui?.roles ?? {};
+    }
+    catch {
+        return [];
+    }
+    const out = [];
+    for (const [k, v] of Object.entries(roles)) {
+        if (!(k in TOKENS) || typeof v !== 'string')
+            continue;
+        if (typeof look[k] === 'string' && String(look[k]).toLowerCase() !== v.toLowerCase())
+            out.push(`${k}: style.json ui.roles says ${v}, look.json ${look[k]}`);
+    }
+    return out;
+}

package/dist/look/touch.js

@@ -0,0 +1,129 @@
+import { touchSession } from "../verify/browser.js";
+export function directionOf(code) {
+    if (/^(ArrowLeft|KeyA)$/.test(code))
+        return [-1, 0];
+    if (/^(ArrowRight|KeyD)$/.test(code))
+        return [1, 0];
+    if (/^(ArrowUp|KeyW)$/.test(code))
+        return [0, -1];
+    if (/^(ArrowDown|KeyS)$/.test(code))
+        return [0, 1];
+    return [0, 0];
+}
+export function touchPath(box, code) {
+    const cx = box.x + box.w / 2, cy = box.y + box.h / 2;
+    const [dx, dy] = directionOf(code);
+    const reach = Math.max(24, 0.35 * Math.min(box.w, box.h));
+    return { from: [cx, cy], to: [cx + dx * reach, cy + dy * reach] };
+}
+export async function controlFor(page, code) {
+    return page.evaluate((code) => {
+        const shown = (el) => {
+            const s = getComputedStyle(el);
+            const r = el.getBoundingClientRect();
+            return s.display !== 'none' && s.visibility !== 'hidden' && Number(s.opacity) > 0.05 && r.width >= 16 && r.height >= 16
+                && r.right > 0 && r.bottom > 0 && r.left < innerWidth && r.top < innerHeight;
+        };
+        for (const tag of document.querySelectorAll(`[data-fpx-touch="${CSS.escape(code)}"]`)) {
+            for (let el = tag; el && el !== document.body; el = el.parentElement) {
+                if (getComputedStyle(el).display === 'none')
+                    break;
+                if (shown(el)) {
+                    const r = el.getBoundingClientRect();
+                    return { x: r.left, y: r.top, w: r.width, h: r.height };
+                }
+            }
+        }
+        return null;
+    }, code).catch(() => null);
+}
+export async function gestureFor(page, code) {
+    return page.evaluate((code) => {
+        for (const el of document.querySelectorAll('[data-fpx-gesture]')) {
+            if (!(el.getAttribute('data-fpx-gesture') || '').split(/[\s,]+/).includes(code))
+                continue;
+            const r = el.getBoundingClientRect();
+            if (r.width >= 44 && r.height >= 44 && r.right > 0 && r.bottom > 0 && r.left < innerWidth && r.top < innerHeight)
+                return { x: r.left, y: r.top, w: r.width, h: r.height };
+        }
+        return null;
+    }, code).catch(() => null);
+}
+export function swipePath(box, code) {
+    const [dx, dy] = directionOf(code);
+    if (!dx && !dy)
+        return null;
+    const cx = box.x + box.w / 2, cy = box.y + box.h / 2, reach = Math.max(48, 0.25 * Math.min(box.w, box.h));
+    return { from: [cx, cy], to: [cx + dx * reach, cy + dy * reach] };
+}
+const sleep = (ms) => new Promise((r) => setTimeout(r, Math.max(0, ms)));
+export class Touch {
+    points = new Map();
+    nextId = 1;
+    page;
+    cdp;
+    constructor(page, cdp) {
+        this.page = page;
+        this.cdp = cdp;
+    }
+    static async open(page) {
+        return new Touch(page, await touchSession(page));
+    }
+    send(type, points) {
+        const touchPoints = points.map((p) => ({ x: p.x, y: p.y, id: p.id, radiusX: 8, radiusY: 8, force: 1 }));
+        return this.cdp.send('Input.dispatchTouchEvent', { type, touchPoints }).catch(() => { });
+    }
+    async swipe(code) {
+        const box = await gestureFor(this.page, code);
+        const path = box && swipePath(box, code);
+        if (!path)
+            return false;
+        const id = this.nextId++;
+        const steps = 6;
+        await this.send('touchStart', [{ x: path.from[0], y: path.from[1], id }]);
+        for (let i = 1; i <= steps; i++) {
+            await sleep(25);
+            const k = i / steps;
+            await this.send('touchMove', [{ x: path.from[0] + (path.to[0] - path.from[0]) * k, y: path.from[1] + (path.to[1] - path.from[1]) * k, id }]);
+        }
+        await this.send('touchEnd', [{ x: path.to[0], y: path.to[1], id }]);
+        return true;
+    }
+    async down(code) {
+        if (this.points.has(code))
+            return true;
+        const box = await controlFor(this.page, code);
+        if (!box)
+            return this.swipe(code);
+        const { from, to } = touchPath(box, code);
+        const id = this.nextId++;
+        this.points.set(code, { x: from[0], y: from[1], id });
+        await this.send('touchStart', [this.points.get(code)]);
+        if (to[0] !== from[0] || to[1] !== from[1]) {
+            await sleep(30);
+            this.points.set(code, { x: to[0], y: to[1], id });
+            await this.send('touchMove', [this.points.get(code)]);
+        }
+        return true;
+    }
+    async up(code) {
+        const p = this.points.get(code);
+        if (!p)
+            return;
+        this.points.delete(code);
+        await this.send('touchEnd', [p]);
+    }
+    async tap(code, holdMs = 90) {
+        if (!(await this.down(code)))
+            return false;
+        await sleep(holdMs);
+        await this.up(code);
+        return true;
+    }
+    async release() {
+        const all = [...this.points.values()];
+        this.points.clear();
+        if (all.length)
+            await this.send('touchEnd', all);
+    }
+}

package/dist/look/ui-style.js

@@ -0,0 +1,102 @@
+import { readFileSync } from 'node:fs';
+const SYSTEM = /^(system-ui|ui-(rounded|sans-serif|serif|monospace)|-apple-system|blinkmacsystemfont|sans-serif|serif|monospace|sf pro( rounded| display| text)?|segoe ui|helvetica( neue)?|arial|roboto)$/i;
+export const UI_BARS = {
+    systemShare: 0.6,
+    alpha: 0.5,
+    darkMax: 64,
+    spread: 48,
+    plates: 2,
+    glyphs: 2,
+    textGlyphs: 1,
+    wordmarkPx: 32,
+};
+const TEXT_GLYPH = /\p{Extended_Pictographic}|[\u2190-\u21FF\u2300-\u23FF\u25A0-\u27BF\u2B00-\u2BFF]/gu;
+const MARKS = new Set(['\u00A9', '\u00AE', '\u2122']);
+export const textGlyphsOf = (text) => [...new Set(text.match(TEXT_GLYPH) ?? [])].filter((g) => !MARKS.has(g));
+const FILLED_SET = {
+    pause: 'M7 5h4v14H7zM13 5h4v14h-4z',
+    soundOn: 'M4 9h4l5-4v14l-5-4H4zM16 8.5a5 5 0 0 1 0 7l-1.4-1.4a3 3 0 0 0 0-4.2z',
+    soundOff: 'M4 9h4l5-4v14l-5-4H4zM16 9.4l1.4-1.4 2 2 2-2 1.4 1.4-2 2 2 2-1.4 1.4-2-2-2 2-1.4-1.4 2-2z',
+    help: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 14h-2v-2h2zm1.6-6.2-.9.9A2 2 0 0 0 13 13h-2v-.5a3 3 0 0 1 .9-2.1l1.2-1.3A1.5 1.5 0 1 0 10.5 8H8.5a3.5 3.5 0 1 1 6.1 2.8z',
+    settings: 'M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM10.5 2h3l.5 2.6 1.9.8 2.2-1.5 2.1 2.1-1.5 2.2.8 1.9 2.6.5v3l-2.6.5-.8 1.9 1.5 2.2-2.1 2.1-2.2-1.5-1.9.8-.5 2.6h-3l-.5-2.6-1.9-.8-2.2 1.5-2.1-2.1 1.5-2.2-.8-1.9L2 13.5v-3l2.6-.5.8-1.9-1.5-2.2 2.1-2.1 2.2 1.5 1.9-.8z',
+    heart: 'M12 21s-7.5-4.6-9.5-9A5.4 5.4 0 0 1 12 6.3 5.4 5.4 0 0 1 21.5 12c-2 4.4-9.5 9-9.5 9z',
+    clock: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 4h-2v6l5 3 1-1.7-4-2.3z',
+};
+export function scaffoldGlyphs(source = readTemplateIcons()) {
+    const now = [...source.matchAll(/^\s*(\w+):\s*(?:\{\s*line:\s*)?'(M[^']{20,})'/gm)].map((m) => [m[2], m[1]]);
+    return new Map([...Object.entries(FILLED_SET).map(([n, d]) => [d, n]), ...now]);
+}
+function readTemplateIcons() {
+    try {
+        return readFileSync(new URL('../../templates/common/src/icons.tsx', import.meta.url), 'utf8');
+    }
+    catch {
+        return '';
+    }
+}
+export const firstFamily = (stack) => (stack.split(',')[0] ?? '').trim().replace(/^['"]+|['"]+$/g, '').trim();
+export const isSystemStack = (stack) => SYSTEM.test(firstFamily(stack));
+export function isDefaultPlate(p) {
+    const pl = p.plate;
+    if (!pl || pl.image || !pl.rgb || pl.alpha < UI_BARS.alpha)
+        return false;
+    const [r, , b] = pl.rgb;
+    return Math.max(...pl.rgb) <= UI_BARS.darkMax && Math.max(...pl.rgb) - Math.min(...pl.rgb) <= UI_BARS.spread && b >= r;
+}
+const tag = (p) => p.name.split(' "')[0];
+const key = (p) => `${p.name}|${Math.round((p.x + p.w / 2) / 24)}|${Math.round((p.y + p.h / 2) / 24)}`;
+const css = (p) => (p.plate?.rgb ? `rgba(${p.plate.rgb.join(', ')}, ${p.plate.alpha})` : '');
+export function uiStyle(samples, where, title = false, glyphs = scaffoldGlyphs()) {
+    const texts = new Map(), plates = new Map(), stock = new Set(), typed = new Map();
+    let biggest = null;
+    for (const s of samples)
+        for (const p of s.pieces) {
+            if (p.layer !== 'dom')
+                continue;
+            if (p.text && typeof p.font === 'string' && p.font)
+                texts.set(key(p), p.font);
+            if (p.plate)
+                plates.set(key(p), p);
+            for (const [d, name] of glyphs)
+                if (p.glyph?.includes(d))
+                    stock.add(name);
+            if (p.text)
+                for (const g of textGlyphsOf(p.text))
+                    if (!typed.has(g))
+                        typed.set(g, p.text.slice(0, 24));
+            if (p.text && p.px > (biggest?.px ?? 0))
+                biggest = p;
+        }
+    const mark = title && biggest && biggest.px >= UI_BARS.wordmarkPx
+        ? { text: biggest.text.slice(0, 40), px: biggest.px, system: isSystemStack(biggest.font ?? ''), art: !!(biggest.plate?.drawn ?? false) } : null;
+    const system = [...texts.values()].filter(isSystemStack);
+    const dark = [...plates.values()].filter(isDefaultPlate);
+    const share = texts.size ? Math.round((system.length / texts.size) * 100) / 100 : null;
+    const findings = [];
+    if (share !== null && share >= UI_BARS.systemShare)
+        findings.push({
+            kind: 'system_type', severity: 'warn', where, number: share, sample: 0,
+            what: `${system.length} of ${texts.size} HUD texts are set in the system stack (${firstFamily(system[0])}): a display face and a body face from the look make it this game's (skill funpixel-art, references/ui.md); if the system face is the choice, name it`,
+        });
+    if (dark.length >= UI_BARS.plates)
+        findings.push({
+            kind: 'default_plates', severity: 'warn', where, number: dark.length, sample: 0,
+            what: `${dark.length} of ${plates.size} HUD plates are flat dark translucent fills (${css(dark[0])} on ${tag(dark[0])}), the scaffold's default look: plates from the world's material (restyle-ui.md in skill funpixel-mobile-ui); if chosen, name it`,
+        });
+    if (stock.size >= UI_BARS.glyphs)
+        findings.push({
+            kind: 'stock_glyphs', severity: 'warn', where, number: stock.size, sample: 0,
+            what: `${stock.size} icons are the scaffold's own glyphs (${[...stock].join(', ')}): one family drawn like the game's art, its stroke, corners and a motif of its world (restyle-ui.md in skill funpixel-mobile-ui)`,
+        });
+    if (typed.size >= UI_BARS.textGlyphs)
+        findings.push({
+            kind: 'text_glyphs', severity: 'warn', where, number: typed.size, sample: 0,
+            what: `${typed.size} icon${typed.size > 1 ? 's are' : ' is'} typed as text characters (${[...typed].slice(0, 5).map(([g, t]) => `${g} in "${t}"`).join(', ')}): they render as the phone's emoji or font glyphs, not the game's art; draw them in the icon family (restyle-ui.md in skill funpixel-mobile-ui)`,
+        });
+    if (mark?.system && !mark.art)
+        findings.push({
+            kind: 'plain_wordmark', severity: 'warn', where, number: mark.px, sample: 0,
+            what: `the wordmark "${mark.text}" is ${Math.round(mark.px)} px of system text over the scene: carve it, letter it in the display face or make it as art from the style frame (skill funpixel-art, references/ui.md)`,
+        });
+    return { texts: texts.size, system_type_share: share, plates: plates.size, default_plates: dark.length, example: dark[0] ? css(dark[0]) : null, stock_glyphs: [...stock], text_glyphs: [...typed.keys()], wordmark: mark, findings };
+}

package/dist/machine/procs.js

@@ -0,0 +1,117 @@
+import { execFile } from 'node:child_process';
+import { homedir } from 'node:os';
+import { basename, join, resolve } from 'node:path';
+export function parseCpuTime(s) {
+    const m = /^(?:(\d+)-)?(?:(\d+):)?(\d+):(\d+(?:\.\d+)?)$/.exec(s.trim());
+    if (!m)
+        return 0;
+    return Number(m[1] ?? 0) * 86400 + Number(m[2] ?? 0) * 3600 + Number(m[3]) * 60 + Number(m[4]);
+}
+export function parsePs(text) {
+    const out = [];
+    for (const line of text.split('\n')) {
+        const m = /^\s*(\d+)\s+(\d+)\s+(\S+)\s+(.*)$/.exec(line);
+        if (m)
+            out.push({ pid: Number(m[1]), ppid: Number(m[2]), cpu: parseCpuTime(m[3]), args: m[4].trim() });
+    }
+    return out;
+}
+export function parseLsofCwd(text) {
+    const out = new Map();
+    let pid = 0;
+    for (const l of text.split('\n')) {
+        if (l.startsWith('p'))
+            pid = Number(l.slice(1));
+        else if (l.startsWith('n') && pid)
+            out.set(pid, l.slice(1));
+    }
+    return out;
+}
+export const listProcs = () => new Promise((ok) => {
+    execFile('ps', ['-axww', '-o', 'pid=', '-o', 'ppid=', '-o', 'time=', '-o', 'command='], { timeout: 15_000, maxBuffer: 32 * 1024 * 1024 }, (err, stdout) => {
+        const procs = err ? [] : parsePs(String(stdout));
+        const relative = procs.filter((p) => isUnityEditor(p.args) && !(projectOf(p.args) ?? '/').startsWith('/'));
+        if (!relative.length)
+            return ok(procs);
+        execFile('lsof', ['-a', '-d', 'cwd', '-p', relative.map((p) => p.pid).join(','), '-Fpn'], { timeout: 15_000 }, (_e, out) => {
+            const cwd = parseLsofCwd(String(out ?? ''));
+            for (const p of relative)
+                p.cwd = cwd.get(p.pid);
+            ok(procs);
+        });
+    });
+});
+export function subtree(procs, roots) {
+    const kids = new Map();
+    for (const p of procs)
+        kids.set(p.ppid, [...(kids.get(p.ppid) ?? []), p.pid]);
+    const live = new Set(procs.map((p) => p.pid));
+    const seen = new Set();
+    const walk = (pid) => { if (seen.has(pid) || !live.has(pid))
+        return; seen.add(pid); for (const k of kids.get(pid) ?? [])
+        walk(k); };
+    for (const r of roots)
+        walk(r);
+    return seen;
+}
+export function subtreeCpu(procs, roots) {
+    const s = subtree(procs, roots);
+    return procs.reduce((t, p) => t + (s.has(p.pid) ? p.cpu : 0), 0);
+}
+export const alive = (procs, pid) => pid !== undefined && pid > 0 && procs.some((p) => p.pid === pid);
+export const isUnityEditor = (args) => /^\/(?:(?! -)[^\n])*?\/Unity\.app\/Contents\/MacOS\/Unity(?:\s|$)/.test(args);
+export const isBatch = (args) => /(?:^|\s)-batchmode(?:\s|$)/i.test(args);
+export function projectOf(args) {
+    const m = /(?:^|\s)-projectpath\s+(.+?)(?=\s+-[A-Za-z]|$)/i.exec(args);
+    return m ? m[1].replace(/^["']|["']$/g, '').replace(/\/+$/, '') : null;
+}
+export function projectOfProc(p) {
+    const named = projectOf(p.args);
+    if (!named)
+        return null;
+    if (named.startsWith('/'))
+        return named;
+    return p.cwd ? resolve(p.cwd, named).replace(/\/+$/, '') : null;
+}
+export function unityRuns(procs) {
+    const editors = new Set(procs.filter((p) => isUnityEditor(p.args)).map((p) => p.pid));
+    return procs.filter((p) => editors.has(p.pid) && !editors.has(p.ppid) && !/(?:^|\s)-name\s+AssetImportWorker/i.test(p.args));
+}
+export function unityOn(procs, project) {
+    const names = new Set((Array.isArray(project) ? project : [project]).map((p) => p.replace(/\/+$/, '').toLowerCase()));
+    return unityRuns(procs).filter((p) => names.has((projectOfProc(p) ?? '\0').toLowerCase()));
+}
+export function machineDir(env = process.env, platform = process.platform) {
+    if (env.FUNTOOLS_MACHINE_DIR)
+        return env.FUNTOOLS_MACHINE_DIR;
+    if (platform === 'darwin')
+        return join(homedir(), 'Library', 'Caches', 'funtools');
+    return join(env.XDG_CACHE_HOME || join(homedir(), '.cache'), 'funtools');
+}
+export function sessionOf(env = process.env, owner = ownerFromEnv(env) ?? process.ppid, cwd = process.cwd()) {
+    return env.FUNTOOLS_SESSION || env.CLAUDE_CODE_SESSION_ID || env.CODEX_SESSION_ID || env.CURSOR_SESSION_ID || `${basename(cwd)}#${owner}`;
+}
+export function ownerFromEnv(env = process.env) {
+    for (const v of [env.FUNTOOLS_OWNER_PID, env.CLAUDE_PID])
+        if (v && /^\d+$/.test(v) && Number(v) > 1)
+            return Number(v);
+    return null;
+}
+const PASS_THROUGH = /^-?(?:sh|bash|zsh|fish|dash|ksh|env|sudo|script|timeout|gtimeout|caffeinate|nice|npm|npx|pnpm|yarn)$/;
+export function ownerPid(procs, env = process.env, self = process.pid) {
+    const fromEnv = ownerFromEnv(env);
+    if (fromEnv)
+        return fromEnv;
+    const by = new Map(procs.map((p) => [p.pid, p]));
+    let p = by.get(self);
+    for (let hops = 0; p && hops < 32; hops++) {
+        const parent = by.get(p.ppid);
+        if (!parent || parent.pid <= 1)
+            break;
+        const exe = basename(parent.args.split(/\s+/)[0] ?? '');
+        if (!PASS_THROUGH.test(exe) && !/funtools|npm-cli|npx-cli/.test(parent.args))
+            return parent.pid;
+        p = parent;
+    }
+    return process.ppid;
+}

package/dist/managed.js

@@ -0,0 +1,15 @@
+import { createHash } from 'node:crypto';
+import { existsSync } from 'node:fs';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+export const MANIFEST = '.funtools/managed.json';
+export const sha = (text) => createHash('sha256').update(text).digest('hex');
+export async function readManaged(dir) {
+    const p = join(dir, MANIFEST);
+    return existsSync(p) ? JSON.parse(await readFile(p, 'utf8')) : { files: {} };
+}
+export async function writeManaged(dir, managed) {
+    const p = join(dir, MANIFEST);
+    await mkdir(dirname(p), { recursive: true });
+    await writeFile(p, JSON.stringify(managed, null, 2) + '\n');
+}