@devdogsuga/devtools 0.1.0

package/dist/gen/campus-map.js

@@ -0,0 +1,473 @@
+/**
+ * `devtools gen campus-map`
+ *
+ * Regenerates `apps/platform/src/components/EventsSection/FindUs/campusMapData.ts`
+ * (and the few bytes in `campusMapMeta.ts` beside it) from live OpenStreetMap
+ * data.
+ *
+ * The Directions dialog's campus map is real geometry, not a sketch: every
+ * building footprint and road in the frame, pulled via Overpass and projected
+ * equirectangular into an SVG viewBox. The DLW's own footprint is exported
+ * separately so the component can highlight it, along with its centroid in
+ * lat/lon, the pin the Google/Apple Maps links drop, since the building is too
+ * new for a name search to resolve reliably. Rerun this when OSM improves the
+ * area (the DLW is brand new) or to reframe.
+ *
+ * Street names come out of here already placed, on the centreline they name and
+ * turned to match it. Building labels do not: they live in CampusMap.tsx,
+ * positioned by eye, because a building's name belongs beside its footprint and
+ * which side is free depends on its neighbours. So re-check those against the
+ * rendered map after regenerating. The command prints every labelled building's
+ * centroid and every street's placement to help.
+ *
+ * Two output files because the map is loaded on demand. The path strings are the
+ * weight, so they live in campusMapData.ts behind a dynamic import; the viewBox
+ * and the DLW's coordinates, needed by the eagerly loaded dialog for the
+ * placeholder and the map links, go in campusMapMeta.ts.
+ *
+ * OSM data is ODbL, so the map must keep its visible "© OpenStreetMap"
+ * attribution (FindUs.tsx renders it in the SVG corner).
+ */
+import { writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { findRepoRoot } from "../repo/root.js";
+/** Query bbox (S, W, N, E), generous so roads at the frame's edge arrive whole
+ * instead of clipped mid-way. */
+const QUERY_BBOX = [33.9355, -83.39, 33.957, -83.363];
+const S = 33.9372, N = 33.9552, W = -83.3861, E = -83.3668;
+const VW = 480;
+const MAJOR_HIGHWAYS = new Set([
+    "primary",
+    "secondary",
+    "tertiary",
+    "residential",
+    "unclassified",
+]);
+const MINOR_HIGHWAYS = new Set(["service", "pedestrian"]);
+const HIGHLIGHTS = [
+    { key: "DLW", osm: "Dining, Learning and Well-being Center", via: "way" },
+    { key: "Driftmier", osm: "Driftmier Engineering Center", via: "relation" },
+    { key: "Plant Sciences", osm: "Miller Plant Science", via: "way" },
+    { key: "Boyd", osm: "Boyd Graduate Research Center", via: "way" },
+    { key: "MLC", osm: "Zell B. Miller Student Learning Center", via: "way" },
+    {
+        key: "Science Learning Center",
+        osm: "Science Learning Center",
+        via: "way",
+    },
+    {
+        key: "Science Library",
+        osm: "Shirley Mathis McBay Science Library",
+        via: "way",
+    },
+    { key: "Poultry Science", osm: "Poultry Science Building", via: "way" },
+    { key: "Main Library", osm: "UGA Main Library", via: "way" },
+    { key: "Tate", osm: "Tate Student Center", via: "way" },
+];
+const LANDMARKS = [
+    "Brumby Hall",
+    "Russell Hall",
+    "Creswell Hall",
+    "Bolton Dining Commons",
+    "Tate Center Parking Deck",
+    "Oglethorpe House",
+    "Physics Building",
+    "Snelling Dining Commons",
+    "Journalism Building",
+    "Sanford Stadium",
+    "Stegeman Coliseum",
+    "Aderhold Hall",
+    "Food Science Building",
+    "Paul D. Coverdell Center",
+    "Conner Hall",
+    "Memorial Hall",
+];
+const STREETS = [
+    { osm: "Baxter Street", text: "Baxter St", at: 0.35 },
+    { osm: "South Lumpkin Street", text: "S. Lumpkin St", at: 0.65 },
+    { osm: "East Campus Road", text: "East Campus Rd", at: 0.5 },
+    { osm: "East Cloverhurst Avenue", text: "E. Cloverhurst Ave", at: 0.35 },
+    { osm: "Sanford Drive", text: "Sanford Dr", at: 0.5 },
+    { osm: "D. W. Brooks Drive", text: "D.W. Brooks Dr", at: 0.35 },
+];
+function makeProjection() {
+    const latMid = (S + N) / 2;
+    const kx = Math.cos((latMid * Math.PI) / 180);
+    const wDeg = (E - W) * kx;
+    const hDeg = N - S;
+    const VH = Math.round((VW * hDeg) / wDeg);
+    const px = (lon, lat) => [
+        (((lon - W) * kx) / wDeg) * VW,
+        ((N - lat) / hDeg) * VH,
+    ];
+    const fmt = (n) => Math.round(n * 10) / 10;
+    return { VH, px, fmt };
+}
+function simplify(pts) {
+    const kept = [pts[0]];
+    for (const p of pts.slice(1)) {
+        const [lx, ly] = kept[kept.length - 1];
+        if (Math.hypot(p[0] - lx, p[1] - ly) > 2.5)
+            kept.push(p);
+    }
+    const last = pts[pts.length - 1];
+    const tail = kept[kept.length - 1];
+    if (tail[0] !== last[0] || tail[1] !== last[1])
+        kept.push(last);
+    return kept;
+}
+function makeGeomHelpers(px, fmt, VH) {
+    const proj = (geom) => geom.map((g) => px(g.lon, g.lat).map(fmt));
+    const toPath = (geom, close) => "M" +
+        simplify(proj(geom))
+            .map((p) => p.join(" "))
+            .join("L") +
+        (close ? "Z" : "");
+    const inFrame = (geom) => geom.some((g) => {
+        const [x, y] = px(g.lon, g.lat);
+        return x > -8 && x < VW + 8 && y > -8 && y < VH + 8;
+    });
+    const area = (geom) => {
+        const pts = proj(geom);
+        let a = 0;
+        for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+            a += (pts[j][0] + pts[i][0]) * (pts[j][1] - pts[i][1]);
+        }
+        return Math.abs(a / 2);
+    };
+    return { proj, toPath, inFrame, area };
+}
+const lineLength = (line) => line
+    .slice(1)
+    .reduce((a, p, i) => a + Math.hypot(p[0] - line[i][0], p[1] - line[i][1]), 0);
+function chain(lines) {
+    const key = (p) => `${p[0]},${p[1]}`;
+    const pool = lines.filter((l) => l.length > 1);
+    const runs = [];
+    while (pool.length > 0) {
+        const run = pool.pop();
+        for (let grew = true; grew;) {
+            grew = false;
+            for (let i = 0; i < pool.length; i++) {
+                const c = pool[i];
+                const head = key(run[0]);
+                const tail = key(run[run.length - 1]);
+                if (tail === key(c[0]))
+                    run.push(...c.slice(1));
+                else if (tail === key(c[c.length - 1]))
+                    run.push(...c.slice(0, -1).reverse());
+                else if (head === key(c[c.length - 1]))
+                    run.unshift(...c.slice(0, -1));
+                else if (head === key(c[0]))
+                    run.unshift(...c.slice(1).reverse());
+                else
+                    continue;
+                pool.splice(i, 1);
+                grew = true;
+                break;
+            }
+        }
+        runs.push(run);
+    }
+    return runs;
+}
+function clipToFrame(line, VH, margin = 8) {
+    const [minX, minY] = [margin, margin];
+    const [maxX, maxY] = [VW - margin, VH - margin];
+    const runs = [];
+    let run = [];
+    const flush = () => {
+        if (run.length > 1)
+            runs.push(run);
+        run = [];
+    };
+    for (let i = 1; i < line.length; i++) {
+        const a = line[i - 1];
+        const b = line[i];
+        const [dx, dy] = [b[0] - a[0], b[1] - a[1]];
+        let t0 = 0, t1 = 1, hit = true;
+        for (const [p, q] of [
+            [-dx, a[0] - minX],
+            [dx, maxX - a[0]],
+            [-dy, a[1] - minY],
+            [dy, maxY - a[1]],
+        ]) {
+            if (p === 0) {
+                if (q < 0)
+                    hit = false;
+                continue;
+            }
+            const r = q / p;
+            if (p < 0 ? r > t1 : r < t0)
+                hit = false;
+            else if (p < 0)
+                t0 = Math.max(t0, r);
+            else
+                t1 = Math.min(t1, r);
+            if (!hit)
+                break;
+        }
+        if (!hit) {
+            flush();
+            continue;
+        }
+        const at = (t) => [a[0] + dx * t, a[1] + dy * t];
+        if (t0 > 0)
+            flush();
+        if (run.length === 0)
+            run.push(at(t0));
+        run.push(at(t1));
+        if (t1 < 1)
+            flush();
+    }
+    flush();
+    return runs;
+}
+function placeAlong(run, frac, span, fmt) {
+    const seg = run
+        .slice(1)
+        .map((p, i) => Math.hypot(p[0] - run[i][0], p[1] - run[i][1]));
+    const total = seg.reduce((a, b) => a + b, 0);
+    const at = (dist) => {
+        let d = Math.max(0, Math.min(total, dist));
+        for (let i = 0; i < seg.length; i++) {
+            if (d <= seg[i]) {
+                const t = seg[i] === 0 ? 0 : d / seg[i];
+                return [
+                    run[i][0] + (run[i + 1][0] - run[i][0]) * t,
+                    run[i][1] + (run[i + 1][1] - run[i][1]) * t,
+                ];
+            }
+            d -= seg[i];
+        }
+        return run[run.length - 1];
+    };
+    const mid = total * frac;
+    const half = Math.min(span, total) / 2;
+    const [x, y] = at(mid);
+    const [ax, ay] = at(mid - half);
+    const [bx, by] = at(mid + half);
+    let angle = (Math.atan2(by - ay, bx - ax) * 180) / Math.PI;
+    if (angle > 90)
+        angle -= 180;
+    if (angle < -90)
+        angle += 180;
+    return { x: fmt(x), y: fmt(y), angle: fmt(angle) };
+}
+async function overpass(query) {
+    for (let attempt = 0; attempt < 4; attempt++) {
+        if (attempt > 0)
+            await new Promise((r) => setTimeout(r, 8000 * attempt));
+        const res = await fetch("https://overpass-api.de/api/interpreter", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+                "User-Agent": "devdogs-platform-campus-map (devdogsuga.org)",
+            },
+            body: "data=" + encodeURIComponent(query),
+        });
+        const text = await res.text();
+        if (!res.ok || text.startsWith("<")) {
+            console.warn(`  overpass attempt ${attempt + 1} failed (${res.status})${text.startsWith("<") ? " — XML error body" : ""}`);
+            continue;
+        }
+        return JSON.parse(text).elements;
+    }
+    throw new Error("Overpass did not answer after 4 attempts");
+}
+async function fetchOsm() {
+    const bbox = QUERY_BBOX.join(",");
+    const ways = await overpass(`[out:json][timeout:90];
+(
+  way["highway"~"${[...MAJOR_HIGHWAYS, ...MINOR_HIGHWAYS].join("|")}"](${bbox});
+  way["building"](${bbox});
+  way["leisure"="stadium"](${bbox});
+);
+out geom tags;`);
+    const relWays = await overpass(`[out:json][timeout:90];
+relation["building"](${bbox});
+way(r);
+out geom;`);
+    const seen = new Set(ways.map((w) => w.id));
+    for (const w of relWays) {
+        if (seen.has(w.id))
+            continue;
+        seen.add(w.id);
+        ways.push({ ...w, tags: { ...w.tags, building: "yes" } });
+    }
+    return ways;
+}
+async function fetchRelationWays(name) {
+    return overpass(`[out:json][timeout:90];
+relation["building"]["name"="${name}"](${QUERY_BBOX.join(",")});
+way(r);
+out geom;`);
+}
+function centroid(geom) {
+    let a = 0, cx = 0, cy = 0;
+    for (let i = 0, j = geom.length - 1; i < geom.length; j = i++) {
+        const p = geom[j], q = geom[i];
+        const f = p.lon * q.lat - q.lon * p.lat;
+        a += f;
+        cx += (p.lon + q.lon) * f;
+        cy += (p.lat + q.lat) * f;
+    }
+    const round = (n) => Math.round(n * 1e6) / 1e6;
+    return { lat: round(cy / (3 * a)), lon: round(cx / (3 * a)) };
+}
+export async function runGenCampusMap() {
+    const { VH, px, fmt } = makeProjection();
+    const { proj, toPath, inFrame, area } = makeGeomHelpers(px, fmt, VH);
+    console.log("fetching OSM…");
+    const elements = await fetchOsm();
+    const roadPaths = { major: [], minor: [] };
+    const namedRoads = new Map();
+    for (const e of elements) {
+        const hw = e.tags?.highway;
+        if (!hw || !inFrame(e.geometry))
+            continue;
+        if (e.tags?.area === "yes")
+            continue;
+        if (MAJOR_HIGHWAYS.has(hw))
+            roadPaths.major.push(toPath(e.geometry, false));
+        else if (MINOR_HIGHWAYS.has(hw))
+            roadPaths.minor.push(toPath(e.geometry, false));
+        const name = e.tags?.name;
+        if (name === undefined)
+            continue;
+        const parts = namedRoads.get(name) ?? [];
+        parts.push(proj(e.geometry));
+        namedRoads.set(name, parts);
+    }
+    const roadLabels = STREETS.map((street) => {
+        const parts = namedRoads.get(street.osm);
+        if (parts === undefined)
+            throw new Error(`no OSM way named "${street.osm}" reaches the frame`);
+        const runs = chain(parts).flatMap((line) => clipToFrame(line, VH));
+        if (runs.length === 0)
+            throw new Error(`"${street.osm}" has no centreline inside the frame`);
+        const longest = runs.reduce((a, r) => lineLength(r) > lineLength(a) ? r : a);
+        const width = street.text.length * 3.6;
+        if (lineLength(longest) < width)
+            console.warn(`  ! "${street.text}" is wider than its longest visible run (${fmt(lineLength(longest))}px) — it will overhang both ends`);
+        return {
+            text: street.text,
+            ...placeAlong(longest, street.at, width, fmt),
+            run: fmt(lineLength(longest)),
+        };
+    });
+    const footprints = [];
+    for (const e of elements) {
+        if (!(e.tags?.building ?? e.tags?.leisure === "stadium"))
+            continue;
+        if (!inFrame(e.geometry) || area(e.geometry) < 12)
+            continue;
+        footprints.push(toPath(e.geometry, true));
+    }
+    const highlights = {};
+    for (const b of HIGHLIGHTS) {
+        const geoms = b.via === "relation"
+            ? (await fetchRelationWays(b.osm)).map((w) => w.geometry)
+            : elements
+                .filter((e) => (e.tags?.building ?? e.tags?.leisure === "stadium") &&
+                e.tags?.name === b.osm)
+                .map((e) => e.geometry);
+        if (geoms.length === 0)
+            throw new Error(`no OSM footprint for "${b.osm}"`);
+        const biggest = geoms.reduce((a, g) => (area(g) > area(a) ? g : a));
+        const center = centroid(biggest);
+        const [pinX] = px(center.lon, center.lat).map(fmt);
+        const rings = geoms.map((g) => simplify(proj(g)));
+        const ys = rings.flat().map((pt) => pt[1]);
+        const crossings = rings.flatMap((ring) => {
+            const hits = [];
+            for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+                const [ax, ay] = ring[j];
+                const [bx, by] = ring[i];
+                if (ax === bx)
+                    continue;
+                if (pinX < Math.min(ax, bx) || pinX >= Math.max(ax, bx))
+                    continue;
+                hits.push(ay + ((pinX - ax) / (bx - ax)) * (by - ay));
+            }
+            return hits;
+        });
+        const spans = crossings.length > 0 ? crossings : ys;
+        highlights[b.key] = {
+            path: geoms.map((g) => toPath(g, true)).join(""),
+            center,
+            pin: {
+                x: pinX,
+                top: fmt(Math.min(...ys)),
+                bottom: fmt(Math.max(...ys)),
+                tipTop: fmt(Math.min(...spans)),
+                tipBottom: fmt(Math.max(...spans)),
+            },
+        };
+    }
+    const labeled = [...HIGHLIGHTS.map((b) => b.osm), ...LANDMARKS].map((name) => {
+        const b = elements.find((e) => (e.tags?.building ?? e.tags?.leisure === "stadium") &&
+            e.tags?.name === name);
+        if (!b) {
+            const h = HIGHLIGHTS.find((x) => x.osm === name);
+            const pin = h ? highlights[h.key]?.pin : undefined;
+            if (!pin)
+                throw new Error(`no OSM building found for "${name}"`);
+            return { name, cx: pin.x, cy: fmt((pin.top + pin.bottom) / 2) };
+        }
+        const c = b.geometry.reduce((a, g) => [a[0] + g.lon, a[1] + g.lat], [0, 0]);
+        const [cx, cy] = px(c[0] / b.geometry.length, c[1] / b.geometry.length).map(fmt);
+        return { name, cx, cy };
+    });
+    const header = `// GENERATED by devtools gen campus-map. Do not edit by hand.\n// Map data © OpenStreetMap contributors, ODbL: openstreetmap.org/copyright\n// Frame: lat ${S}..${N}, lon ${W}..${E}, equirectangular, ${VW}x${VH}.\n`;
+    const keys = HIGHLIGHTS.map((b) => b.key);
+    const entries = (pick) => JSON.stringify(Object.fromEntries(keys.map((k) => [k, pick(highlights[k])])), null, 2);
+    const meta = `${header}
+/** The map's viewBox, also what sizes its placeholder before it loads. */
+export const VIEW = { w: ${VW}, h: ${VH} };
+
+/** Every building a meeting can name. The map highlights exactly one of them. */
+export const BUILDING_KEYS = ${JSON.stringify(keys)} as const;
+
+export type BuildingKey = (typeof BUILDING_KEYS)[number];
+
+/**
+ * Each building's footprint centroid: where the Google/Apple Maps links drop
+ * their pin.
+ */
+export const BUILDING_CENTERS: Record<BuildingKey, { lat: number; lon: number }> = ${entries((h) => h.center)};
+`;
+    const out = `${header}
+/** Cased streets, one subpath per OSM way. */
+export const MAJOR_ROADS = ${JSON.stringify(roadPaths.major.join(""))};
+
+/** Service drives and pedestrian connectors, drawn thin. */
+export const MINOR_ROADS = ${JSON.stringify(roadPaths.minor.join(""))};
+
+/** Every building footprint in the frame, highlightable ones included. */
+export const FOOTPRINTS = ${JSON.stringify(footprints.join(""))};
+
+/** The footprint the map paints on top, one per building a meeting can name. */
+export const HIGHLIGHT_PATHS: Record<string, string> = ${entries((h) => h.path)};
+
+export const HIGHLIGHT_PINS: Record<string, { x: number; top: number; bottom: number; tipTop: number; tipBottom: number }> = ${entries((h) => h.pin)};
+
+/** Street names, on the centreline they name and turned to match it. */
+export const ROAD_LABELS: { text: string; x: number; y: number; angle: number }[] = ${JSON.stringify(roadLabels.map(({ text, x, y, angle }) => ({ text, x, y, angle })), null, 2)};
+`;
+    const dir = join(findRepoRoot(), "apps", "platform", "src", "components", "EventsSection", "FindUs");
+    writeFileSync(join(dir, "campusMapData.ts"), out);
+    writeFileSync(join(dir, "campusMapMeta.ts"), meta);
+    console.log(`wrote ${dir}/campusMapData.ts (${(out.length / 1024).toFixed(1)}KB) + campusMapMeta.ts`);
+    console.log("run prettier --write on both before committing them");
+    console.log(`viewBox 0 0 ${VW} ${VH} | ${roadPaths.major.length} major ways, ${roadPaths.minor.length} minor ways, ${footprints.length} footprints`);
+    for (const b of labeled)
+        console.log(`  LABEL ${b.name} → ${b.cx},${b.cy}`);
+    for (const k of keys) {
+        const { x, top, bottom, tipTop, tipBottom } = highlights[k].pin;
+        console.log(`  PIN ${k} → x ${x}, y ${top}..${bottom}, tip ${tipTop}..${tipBottom}`);
+    }
+    for (const r of roadLabels)
+        console.log(`  ROAD ${r.text} → ${r.x},${r.y} @ ${r.angle}° (${r.run}px visible)`);
+    return 0;
+}

package/dist/gen/commands.d.ts

@@ -0,0 +1 @@
+export declare function runGen(argv: readonly string[]): Promise<number>;

package/dist/gen/commands.js

@@ -0,0 +1,25 @@
+/**
+ * Dispatch for `devtools gen *`.
+ *
+ * `gen og-assets` and `gen email-templates` delegate to the owning package
+ * scripts via pnpm. `gen campus-map` and `gen hypno` are devtools-owned.
+ */
+import { run } from "../db/run.js";
+import { runGenCampusMap } from "./campus-map.js";
+import { runGenHypno } from "./hypno.js";
+export async function runGen(argv) {
+    const sub = argv[0];
+    if (sub === "campus-map")
+        return runGenCampusMap();
+    if (sub === "hypno")
+        return runGenHypno();
+    if (sub === "og-assets") {
+        return run(["--filter", "@devdogsuga/open-graph", "run", "generate"]);
+    }
+    if (sub === "email-templates") {
+        return run(["--filter", "@devdogsuga/email", "run", "compile"]);
+    }
+    process.stderr.write(`devtools gen: unknown subcommand "${sub ?? "(none)"}". ` +
+        "Expected: campus-map, hypno, og-assets, email-templates.\n");
+    return 1;
+}

package/dist/gen/hypno.d.ts

@@ -0,0 +1 @@
+export declare function runGenHypno(): Promise<number>;

package/dist/gen/hypno.js

@@ -0,0 +1,134 @@
+/// <reference lib="dom" />
+/**
+ * `devtools gen hypno`
+ *
+ * Bakes the hero's spiral into a pre-blurred raster at
+ * `apps/platform/src/assets/hypno.webp`.
+ *
+ * Why this exists: the spiral used to be an inline 24-path SVG, ~3,530 CSS px
+ * square, rotating forever under a `blur-sm` filter. Measured on a production
+ * build, that single element held the page to 36.8 FPS at idle; hiding it
+ * restored 60.4. The cost is the live filter, not the geometry — shrinking the
+ * surface 6x bought 3 FPS, removing the blur at full size bought 25. Rotating a
+ * texture that already has the blur painted into it is free by comparison, and
+ * it keeps both the motion and the exact hazy look.
+ *
+ * Two details make the bake match the original:
+ *
+ * 1. The source sets `vector-effect: non-scaling-stroke`, so its 2px stroke is
+ *    2 *device* px no matter how far the SVG is scaled up. A raster does not
+ *    work that way — its stroke scales with the image. So the stroke is
+ *    converted into viewBox units for the size the element actually renders at
+ *    (2 * 1926.25 / RENDER_PX), which reproduces the same apparent weight.
+ * 2. At the raster sizes worth shipping, both the stroke and the blur land
+ *    below one pixel, and Skia's box-approximated blur is inaccurate at
+ *    sub-pixel sigma. Everything is therefore drawn at SS x the target and
+ *    downsampled, which resolves both correctly.
+ */
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { createRequire } from "node:module";
+import { findRepoRoot } from "../repo/root.js";
+// Lazy — computed inside `runGenHypno`/`loadChromium`, not at module load.
+// This file used to compute these as top-level `const`s, which called
+// `findRepoRoot()` (and threw `RepoNotFoundError`) the instant anything
+// imported this module — including `devtools --help` from outside a repo,
+// since the command tree pulls every command module in transitively. See
+// `workers.ts`'s header for the general pattern.
+function srcPath() {
+    return join(findRepoRoot(), "apps", "platform", "src", "components", "HeroSection", "Hypno.tsx");
+}
+function outPath() {
+    return join(findRepoRoot(), "apps", "platform", "src", "assets", "hypno.webp");
+}
+const RENDER_PX = 3536;
+const VIEWBOX = 1926.25;
+const BLUR_CSS_PX = 8;
+const SS = 3;
+const STROKE = "rgba(216,180,254,0.75)";
+const BUDGET = 60_000;
+async function loadChromium() {
+    const require_ = createRequire(import.meta.url);
+    for (const spec of [
+        "playwright",
+        "playwright-core",
+        join(findRepoRoot(), "node_modules/.pnpm/playwright@1.62.1/node_modules/playwright"),
+    ]) {
+        try {
+            const mod = await import(require_.resolve(spec));
+            const chromium = mod.chromium ?? mod.default?.chromium;
+            if (chromium)
+                return chromium;
+        }
+        catch {
+            /* try the next one */
+        }
+    }
+    throw new Error("playwright not resolvable. Run `pnpm dlx playwright@1.62 install chromium` " +
+        "or run this command from a workspace where playwright is installed.");
+}
+export async function runGenHypno() {
+    const src = readFileSync(srcPath(), "utf8");
+    const paths = [...src.matchAll(/<path d="([^"]+)"/g)].map((m) => m[1]);
+    if (paths.length !== 24) {
+        process.stderr.write(`expected 24 paths in Hypno.tsx, found ${paths.length}\n`);
+        return 1;
+    }
+    const strokeW = (2 * VIEWBOX) / RENDER_PX;
+    const svg = (px) => `<svg xmlns="http://www.w3.org/2000/svg" width="${px}" height="${px}"
+ viewBox="0 0 ${VIEWBOX} ${VIEWBOX}">
+<g fill="none" stroke="${STROKE}" stroke-width="${strokeW}" stroke-linecap="round" stroke-linejoin="round">
+${paths.map((d) => `<path d="${d}"/>`).join("\n")}
+</g></svg>`;
+    const chromium = await loadChromium();
+    const browser = await chromium.launch();
+    const page = await browser.newPage();
+    await page.goto("data:text/html,<html><body></body></html>");
+    const bake = async (target, quality) => page.evaluate(async ({ markup, target, ss, blur, quality, }) => {
+        const big = target * ss;
+        const img = new Image();
+        img.src =
+            "data:image/svg+xml;charset=utf-8," + encodeURIComponent(markup);
+        await new Promise((r) => {
+            img.onload = r;
+            img.onerror = r;
+        });
+        const hi = document.createElement("canvas");
+        hi.width = hi.height = big;
+        const hx = hi.getContext("2d");
+        hx.filter = `blur(${blur * ss}px)`;
+        hx.drawImage(img, 0, 0, big, big);
+        const lo = document.createElement("canvas");
+        lo.width = lo.height = target;
+        const lx = lo.getContext("2d");
+        lx.imageSmoothingEnabled = true;
+        lx.imageSmoothingQuality = "high";
+        lx.drawImage(hi, 0, 0, target, target);
+        return lo.toDataURL("image/webp", quality);
+    }, {
+        markup: svg(target * SS),
+        target,
+        ss: SS,
+        blur: (BLUR_CSS_PX * target) / RENDER_PX,
+        quality,
+    });
+    const bytes = (dataUrl) => Buffer.from(dataUrl.split(",")[1], "base64").byteLength;
+    console.log("size  quality   bytes");
+    const results = [];
+    for (const target of [512, 768, 1024]) {
+        for (const q of [0.5, 0.65, 0.8]) {
+            const url = await bake(target, q);
+            const b = bytes(url);
+            results.push({ target, q, b, url });
+            console.log(`${String(target).padStart(4)}  ${q.toFixed(2)}   ${String(b).padStart(7)}`);
+        }
+    }
+    const pick = results
+        .filter((r) => r.b <= BUDGET)
+        .sort((a, b) => b.target - a.target || b.q - a.q)[0] ??
+        results.sort((a, b) => a.b - b.b)[0];
+    writeFileSync(outPath(), Buffer.from(pick.url.split(",")[1], "base64"));
+    console.log(`\nwrote ${outPath()}\n  ${pick.target}px @ q=${pick.q} -> ${pick.b} bytes (budget ${BUDGET})`);
+    await browser.close();
+    return 0;
+}