@ogygia/devtools 0.12.0 → 0.13.0

package/dist/profiler/storage/sqlite.js

@@ -10,8 +10,8 @@ import { createRequire } from "node:module";
 *
 *   // src/hooks.server.ts
 *   import { setProfilerStore } from '@ogygia/devtools/profiler/storage';
-*   import { sqliteStore } from '@ogygia/devtools/profiler/storage/sqlite';
-*   setProfilerStore(sqliteStore('.ogygia/profiles.db'));
+*   import { SqliteStore } from '@ogygia/devtools/profiler/storage/sqlite';
+*   setProfilerStore(new SqliteStore('.ogygia/profiles.db'));
 */
 const require = createRequire(import.meta.url);
 /** Open a synchronous sqlite database from whichever driver is installed. */
@@ -21,21 +21,59 @@ function open(filename) {
 		const dir = require("node:path").dirname(filename);
 		if (dir && dir !== ".") fs.mkdirSync(dir, { recursive: true });
 	} catch {}
+	const built_in = load_driver("node:sqlite");
+	if (built_in) return new built_in.DatabaseSync(filename);
+	const Database = load_driver("better-sqlite3");
+	if (Database) return new Database(filename);
+	throw new Error("ogygia/profiler: SqliteStore needs Node 22.5+ (built-in node:sqlite) or the 'better-sqlite3' package.");
+}
+/** A driver module, or null when it is not installed (this runtime has no such module). */
+function load_driver(id) {
 	try {
-		const { DatabaseSync } = require("node:sqlite");
-		return new DatabaseSync(filename);
-	} catch {}
-	try {
-		return new (require("better-sqlite3"))(filename);
+		return require(id);
 	} catch {
-		throw new Error("ogygia/profiler: sqliteStore needs Node 22.5+ (built-in node:sqlite) or the 'better-sqlite3' package.");
+		return null;
 	}
 }
-function sqliteStore(filename = ".ogygia/profiles.db") {
-	let db = null;
-	const need = () => {
-		if (db) return db;
-		db = open(filename);
+var SqliteStore = class {
+	kind = "sqlite";
+	#filename;
+	#db = null;
+	constructor(filename = ".ogygia/profiles.db") {
+		this.#filename = filename;
+	}
+	init() {
+		this.#need();
+	}
+	putReport(rec) {
+		this.#need().prepare("INSERT INTO reports (id,created,page,trigger,label,median,dump) VALUES (?,?,?,?,?,?,?) ON CONFLICT(id) DO UPDATE SET created=excluded.created,page=excluded.page,trigger=excluded.trigger,label=excluded.label,median=excluded.median,dump=excluded.dump").run(rec.id, rec.created, rec.page, rec.trigger, rec.label, rec.median, rec.dump);
+	}
+	getReport(id) {
+		return this.#need().prepare("SELECT dump FROM reports WHERE id = ?").get(id)?.dump ?? null;
+	}
+	listReports(limit = 30) {
+		return this.#need().prepare("SELECT id,created,page,trigger,label,median FROM reports ORDER BY created DESC LIMIT ?").all(limit);
+	}
+	deleteReport(id) {
+		this.#need().prepare("DELETE FROM reports WHERE id = ?").run(id);
+	}
+	prune(keep) {
+		this.#need().prepare("DELETE FROM reports WHERE id NOT IN (SELECT id FROM reports ORDER BY created DESC LIMIT ?)").run(keep);
+	}
+	putVisit(rec) {
+		this.#need().prepare("INSERT INTO visits (key,page,at,visit) VALUES (?,?,?,?) ON CONFLICT(key) DO UPDATE SET at=excluded.at,visit=excluded.visit").run(rec.key, rec.page, rec.at, rec.visit);
+		this.#need().prepare("DELETE FROM visits WHERE key IN (SELECT key FROM visits WHERE page = ? ORDER BY at DESC LIMIT -1 OFFSET ?)").run(rec.page, MAX_VISITS_PER_KEY);
+	}
+	listVisits(page, limit = 10) {
+		return this.#need().prepare("SELECT key,page,at,visit FROM visits WHERE page = ? ORDER BY at DESC LIMIT ?").all(page, limit);
+	}
+	close() {
+		this.#db?.close();
+		this.#db = null;
+	}
+	#need() {
+		if (this.#db) return this.#db;
+		const db = this.#db = open(this.#filename);
 		db.exec(`
 			CREATE TABLE IF NOT EXISTS reports (
 				id TEXT PRIMARY KEY, created INTEGER NOT NULL, page TEXT, trigger TEXT,
@@ -48,38 +86,6 @@ function sqliteStore(filename = ".ogygia/profiles.db") {
 			CREATE INDEX IF NOT EXISTS visits_page ON visits (page, at);
 		`);
 		return db;
-	};
-	return {
-		kind: "sqlite",
-		init() {
-			need();
-		},
-		putReport(rec) {
-			need().prepare("INSERT INTO reports (id,created,page,trigger,label,median,dump) VALUES (?,?,?,?,?,?,?) ON CONFLICT(id) DO UPDATE SET created=excluded.created,page=excluded.page,trigger=excluded.trigger,label=excluded.label,median=excluded.median,dump=excluded.dump").run(rec.id, rec.created, rec.page, rec.trigger, rec.label, rec.median, rec.dump);
-		},
-		getReport(id) {
-			return need().prepare("SELECT dump FROM reports WHERE id = ?").get(id)?.dump ?? null;
-		},
-		listReports(limit = 30) {
-			return need().prepare("SELECT id,created,page,trigger,label,median FROM reports ORDER BY created DESC LIMIT ?").all(limit);
-		},
-		deleteReport(id) {
-			need().prepare("DELETE FROM reports WHERE id = ?").run(id);
-		},
-		prune(keep) {
-			need().prepare("DELETE FROM reports WHERE id NOT IN (SELECT id FROM reports ORDER BY created DESC LIMIT ?)").run(keep);
-		},
-		putVisit(rec) {
-			need().prepare("INSERT INTO visits (key,page,at,visit) VALUES (?,?,?,?) ON CONFLICT(key) DO UPDATE SET at=excluded.at,visit=excluded.visit").run(rec.key, rec.page, rec.at, rec.visit);
-			need().prepare("DELETE FROM visits WHERE page = ? AND key NOT IN (SELECT key FROM visits WHERE page = ? ORDER BY at DESC LIMIT ?)").run(rec.page, rec.page, MAX_VISITS_PER_KEY);
-		},
-		listVisits(page, limit = 10) {
-			return need().prepare("SELECT key,page,at,visit FROM visits WHERE page = ? ORDER BY at DESC LIMIT ?").all(page, limit);
-		},
-		close() {
-			db?.close();
-			db = null;
-		}
-	};
-}
-export { sqliteStore };
+	}
+};
+export { SqliteStore };

package/dist/profiler/ui/ComponentsTable.svelte

@@ -1,5 +1,5 @@
 <script>import { fmt_ms, fmt_dur, fmt_pct, fmt_bytes, CATEGORY_COLOR } from "./format.js";
-import { sortable } from "./sort.svelte.js";
+import { Sortable } from "./sort.svelte.js";
 import { pressable } from "./press.js";
 import FrameDetails from "./FrameDetails.svelte";
 import { row_id, follow_hash } from "./row-anchor.svelte.js";
@@ -10,7 +10,7 @@ const filtered = $derived.by(() => {
 	if (!q) return rows;
 	return rows.filter((r) => r.name.toLowerCase().includes(q) || r.url.toLowerCase().includes(q) || (r.path ?? "").toLowerCase().includes(q));
 });
-const s = sortable(() => filtered, "self_ms");
+const s = new Sortable(() => filtered, "self_ms");
 let open = $state(null);
 const hasSplit = $derived(rows.some((r) => (r.markup_ms ?? 0) + (r.logic_ms ?? 0) > 0));
 const hasParent = $derived(rows.some((r) => !!r.parent));

package/dist/profiler/ui/Dashboard.svelte

@@ -126,9 +126,8 @@ const delta_pct = (pts) => {
 		{#if trap}
 			<p class="hint">
 				<b>Catch the slow one:</b>
-				{trap.armed ? 'armed' : 'done'} — a coarse sampler runs in {Math.round(
-					trap.window_ms / 1000
-				)} s windows and keeps the window when a request crosses <b>{trap.over} ms</b>. Caught {trap.caught}
+				{trap.state} — a coarse sampler runs in {Math.round(trap.window_ms / 1000)} s windows and keeps
+				the window when a request crosses <b>{trap.over} ms</b>. Caught {trap.caught}
 				of {trap.keep}.{#if trap.caught}
 					The reports are in the list below, labelled "caught".{/if}
 			</p>

package/dist/profiler/ui/DownloadHtml.svelte

@@ -17,6 +17,7 @@ function save(blob) {
 	document.body.appendChild(a);
 	a.click();
 	a.remove();
+	// oxlint-disable-next-line ogygia/owned-effects -- the download's, not the button's: it lets go of the file even if the button goes
 	setTimeout(() => URL.revokeObjectURL(a.href), 1500);
 }
 async function download(e) {

package/dist/profiler/ui/ExportButton.svelte

@@ -16,6 +16,7 @@ function save(blob) {
 	document.body.appendChild(a);
 	a.click();
 	a.remove();
+	// oxlint-disable-next-line ogygia/owned-effects -- the download's, not the button's: it lets go of the file even if the button goes
 	setTimeout(() => URL.revokeObjectURL(a.href), 1500);
 }
 async function download() {

package/dist/profiler/ui/Flame.svelte

@@ -1,4 +1,10 @@
-<script>import { CATEGORY_COLOR } from "./format.js";
+<script>/**
+* Flame graph — a `wake:'load'` canvas island (was FLAME_JS). Width = time; click a bar to zoom,
+* click the top bar to zoom back out; hover for detail. Zoom + tooltip are `$state`; the canvas
+* redraws in an `$effect` on zoom/resize. `rects` (hit regions) is plain, rebuilt each draw.
+*/
+import { scope } from "@ogygia/machine";
+import { CATEGORY_COLOR } from "./format.js";
 let { flame } = $props();
 const ROW = 20;
 let canvas;
@@ -106,9 +112,9 @@ $effect(() => {
 	layout();
 });
 $effect(() => {
-	const on = () => resizeTick++;
-	window.addEventListener("resize", on);
-	return () => window.removeEventListener("resize", on);
+	const s = scope();
+	s.on(window, "resize", () => resizeTick++);
+	return () => s.close();
 });
 function hit(ev) {
 	const r = canvas.getBoundingClientRect();

package/dist/profiler/ui/Flame.svelte.d.ts

@@ -1,8 +1,3 @@
-/**
-     * Flame graph — a `wake:'load'` canvas island (was FLAME_JS). Width = time; click a bar to zoom,
-     * click the top bar to zoom back out; hover for detail. Zoom + tooltip are `$state`; the canvas
-     * redraws in an `$effect` on zoom/resize. `rects` (hit regions) is plain, rebuilt each draw.
-     */
 import type { FlameNode } from '../analyze.js';
 type $$ComponentProps = {
     flame: FlameNode;

package/dist/profiler/ui/FrameDetails.svelte

@@ -1,4 +1,12 @@
-<script>import { fmt_ms, CATEGORY_LABEL } from "./format.js";
+<script>/**
+* The expanded row under a function / component: WHERE it is (the full path, with line and
+* column, openable in the editor when the path is absolute; on a dev server the source lines
+* themselves) and HOW it was reached (its heaviest call stacks, nearest caller first).
+* Rendered inside the table islands; plain markup.
+*/
+import { onDestroy } from "svelte";
+import { scope } from "@ogygia/machine";
+import { fmt_ms, CATEGORY_LABEL } from "./format.js";
 let { f, colspan, base = "", dev = false } = $props();
 const is_abs = (p) => p.startsWith("/") || /^[A-Za-z]:[\\/]/.test(p);
 const location = $derived(f.path ? f.path + (f.line > 0 ? ":" + f.line + (f.col > 0 ? ":" + f.col : "") : "") : "");
@@ -12,11 +20,14 @@ const heat = $derived(new Map(lines.map((l) => [l.line, l.ms / lines_max])));
 const last_hot = $derived(lines.length ? Math.max(...lines.map((l) => l.line)) : 0);
 const ms_at = (n) => lines.find((l) => l.line === n)?.ms ?? 0;
 let copied = $state(false);
+/** The panel's own timer: let go when it unmounts. */
+const owner = scope();
+onDestroy(() => owner.close());
 async function copy() {
 	try {
 		await navigator.clipboard.writeText(location);
 		copied = true;
-		setTimeout(() => copied = false, 1200);
+		owner.timeout(() => copied = false, 1200);
 	} catch {}
 }
 // SOURCE PEEK: the code around the hot lines. The report carries it (`f.src`, captured at report

package/dist/profiler/ui/FrameDetails.svelte.d.ts

@@ -1,9 +1,3 @@
-/**
-     * The expanded row under a function / component: WHERE it is (the full path, with line and
-     * column, openable in the editor when the path is absolute; on a dev server the source lines
-     * themselves) and HOW it was reached (its heaviest call stacks, nearest caller first).
-     * Rendered inside the table islands; plain markup.
-     */
 import type { FrameStat } from '../analyze.js';
 type $$ComponentProps = {
     f: FrameStat;

package/dist/profiler/ui/FunctionsTable.svelte

@@ -1,5 +1,5 @@
 <script>import { fmt_ms, fmt_dur, fmt_bytes, CATEGORY_COLOR, CATEGORY_LABEL, ink_on } from "./format.js";
-import { sortable } from "./sort.svelte.js";
+import { Sortable } from "./sort.svelte.js";
 import { pressable } from "./press.js";
 import FrameDetails from "./FrameDetails.svelte";
 import { row_id, follow_hash } from "./row-anchor.svelte.js";
@@ -10,7 +10,7 @@ const filtered = $derived.by(() => {
 	if (!q) return rows;
 	return rows.filter((r) => r.name.toLowerCase().includes(q) || r.url.toLowerCase().includes(q) || (r.path ?? "").toLowerCase().includes(q) || (r.pkg ?? "").toLowerCase().includes(q));
 });
-const s = sortable(() => filtered, "self_ms");
+const s = new Sortable(() => filtered, "self_ms");
 const row_key = (f) => f.key ?? f.name + " " + f.url;
 let open = $state(null);
 const cols = $derived(hasAlloc ? 7 : 6);

package/dist/profiler/ui/IslandsTable.svelte

@@ -1,5 +1,5 @@
 <script>import { fmt_ms, fmt_bytes, ink_on } from "./format.js";
-import { sortable } from "./sort.svelte.js";
+import { Sortable } from "./sort.svelte.js";
 import { pressable } from "./press.js";
 import { row_id, follow_hash } from "./row-anchor.svelte.js";
 let { rows, hasJs, hasClient } = $props();
@@ -9,7 +9,7 @@ const filtered = $derived.by(() => {
 	if (!q) return rows;
 	return rows.filter((r) => r.name.toLowerCase().includes(q) || r.entry.toLowerCase().includes(q) || r.wake.includes(q));
 });
-const s = sortable(() => filtered, "props_bytes");
+const s = new Sortable(() => filtered, "props_bytes");
 let open = $state(null);
 const max_props = $derived(Math.max(...rows.map((r) => r.props_bytes), 1));
 const max_js = $derived(Math.max(...rows.map((r) => r.js_bytes ?? 0), 1));

package/dist/profiler/ui/OnThisPage.svelte

@@ -1,4 +1,11 @@
-<script>let entries = $state([]);
+<script>/**
+* ON THIS PAGE — a fixed rail on the right listing the report's parts, the one in view lit, click
+* to jump. A `wake:'load'` island: it reads the rendered `.part` bands from the DOM (no ids
+* needed — it holds the element refs) and tracks the active one with an IntersectionObserver.
+* Hidden on narrow screens.
+*/
+import { scope } from "@ogygia/machine";
+let entries = $state([]);
 let active = $state(0);
 $effect(() => {
 	const els = [...document.querySelectorAll(".part, .app-main h2")];
@@ -19,7 +26,8 @@ $effect(() => {
 		};
 	});
 	if (!els.length) return;
-	const io = new IntersectionObserver((ents) => {
+	const s = scope();
+	const io = s.watch(new IntersectionObserver((ents) => {
 		for (const e of ents) {
 			if (e.isIntersecting) {
 				const i = els.indexOf(e.target);
@@ -29,10 +37,10 @@ $effect(() => {
 	}, {
 		rootMargin: "-6% 0px -85% 0px",
 		threshold: 0
-	});
+	}));
 	for (const el of els) io.observe(el);
 	// the report reserves the rail's space server-side (Shell `toc`); nothing to toggle here
-	return () => io.disconnect();
+	return () => s.close();
 });
 const jump = (e) => e.el.scrollIntoView({
 	behavior: "smooth",

package/dist/profiler/ui/RunView.svelte

@@ -6,42 +6,38 @@
 * parent frame, so the devtools tab can offer "open in new tab".
 */
 import { onMount } from "svelte";
-import { fake_progress } from "./fake-progress.svelte.js";
+import { scope, STALE } from "@ogygia/machine";
+import { FakeProgress } from "./fake-progress.svelte.js";
+import { fetch_when_free } from "../busy.js";
 import { put_report } from "./store.js";
 // ── regexes
 const NON_WORD_G = /\W+/g;
 let { base, path, runs, format, against = "" } = $props();
-// A busy worker answers /page with 409 (one recording per worker — the V8 profiler is process-wide).
-// There's no server-side queue to rely on (a serverless worker is recycled within ~30s), so the QUEUE
-// LIVES HERE: poll until a worker accepts. On serverless the retry lands on a free worker; on a single
-// server it comes back once the run ahead finishes. Give up after QUEUE_MAX_MS and point at Reset.
-const QUEUE_POLL_MS = 2e3;
-const QUEUE_MAX_MS = 12e4;
-const p = fake_progress();
+const p = new FakeProgress();
+/** The view's own work (its request, the queue's waits): let go when it unmounts. */
+const owner = scope();
 let phase = $state("Starting the profiler…");
 let error = $state("");
 let done_ogp = $state(false);
 let queued = $state(false);
 let waited_s = $state(0);
-/** Fetch /page, polling while any worker we reach is busy. Returns the first non-409 response, or the
-*  last 409 if we waited past QUEUE_MAX_MS (the caller surfaces that as an error). */
+/** Fetch /page, waiting while any worker we reach is busy (`fetch_when_free`). Returns the first
+*  non-409 response, or the last 409 once the wait ran out (the caller surfaces that as an error,
+*  pointing at Reset); null once the view is gone (the request and the queue end with it). */
 async function fetch_page(url) {
-	const started = Date.now();
-	for (;;) {
-		queued = false;
-		p.start();
-		phase = `Rendering ${path} ${runs}× and sampling the server…`;
-		const res = await fetch(url);
-		if (res.status !== 409) return res;
-		// busy — enter/stay in the queue
-		if (Date.now() - started > QUEUE_MAX_MS) return res;
-		queued = true;
-		const retry_after = Number(res.headers.get("retry-after")) * 1e3;
-		const delay = Number.isFinite(retry_after) && retry_after > 0 ? retry_after : QUEUE_POLL_MS;
-		waited_s = Math.round((Date.now() - started) / 1e3);
-		phase = "In queue — a profile is already running. Waiting for a free worker…";
-		await new Promise((r) => setTimeout(r, delay));
-	}
+	const res = await fetch_when_free(owner, url, {}, {
+		asking: () => {
+			queued = false;
+			p.start();
+			phase = `Rendering ${path} ${runs}× and sampling the server…`;
+		},
+		busy: (waited) => {
+			queued = true;
+			waited_s = Math.round(waited / 1e3);
+			phase = "In queue — a profile is already running. Waiting for a free worker…";
+		}
+	});
+	return res === STALE ? null : res;
 }
 async function run() {
 	try {
@@ -49,6 +45,7 @@ async function run() {
 		// navigating — on an ephemeral host the instance that rendered it may be gone by then
 		const suffix = format === "ogp" ? "&format=ogp" : "&format=keep";
 		const res = await fetch_page(`${base}/page?p=${encodeURIComponent(path)}&runs=${runs}${suffix}`);
+		if (!res) return;
 		if (!res.ok) throw new Error(String(res.status));
 		if (format === "ogp") {
 			const blob = await res.blob();
@@ -91,7 +88,14 @@ async function run() {
 		error = `Profiling failed (${code}). If the page is slow, the host's request timeout may have cut it ` + `off — try fewer renders, or tick the .ogp download and open it via Import. If a run got ` + `stuck, hit Reset on the dashboard.`;
 	}
 }
-onMount(run);
+onMount(() => {
+	void run();
+	// unmounted (mid-run or in the queue): its request, its queue's waits and its bar's timers go
+	return () => {
+		owner.close();
+		p[Symbol.dispose]();
+	};
+});
 </script>
 
 <div class="run">

package/dist/profiler/ui/ShareLink.svelte

@@ -6,6 +6,8 @@
 * URLs too low, so links are disabled there; Chromium/Firefox go up to ~1.5 MB, with a Safari-
 * recipient disclaimer past the universal-safe size. No `$effect`; all state moves on click/submit.
 */
+import { onDestroy } from "svelte";
+import { scope } from "@ogygia/machine";
 import { encode_permalink, is_webkit_capped, MAX_PERMALINK_CHARS } from "./permalink.js";
 import { get_report } from "./store.js";
 import { report_request } from "./report-request.js";
@@ -21,6 +23,9 @@ let url = $state("");
 let note = $state("");
 let err = $state("");
 let copied = $state(false);
+/** The panel's own timer: let go when it unmounts. */
+const owner = scope();
+onDestroy(() => owner.close());
 async function generate(e) {
 	e.preventDefault();
 	if (busy || !password) return;
@@ -55,7 +60,7 @@ async function copy() {
 	try {
 		await navigator.clipboard.writeText(url);
 		copied = true;
-		setTimeout(() => copied = false, 1500);
+		owner.timeout(() => copied = false, 1500);
 	} catch {}
 }
 </script>

package/dist/profiler/ui/Sidebar.svelte

@@ -8,6 +8,7 @@
 * browser kept ("the browser is the database"); when the backend lands, the router fills `server`
 * and the two lists merge — nothing else here changes. `live` is the same seam for a status feed.
 */
+import { scope, STALE } from "@ogygia/machine";
 import { list_reports } from "./store.js";
 import ThemeSwitch from "./ThemeSwitch.svelte";
 let { base, current = null } = $props();
@@ -21,19 +22,23 @@ $effect(() => {
 // requests are in flight, memory, how many reports it holds. The rail's pulse.
 let live = $state(null);
 $effect(() => {
-	let alive = true;
+	// the poll and its request in flight: the next run of the effect, or the unmount, ends them
+	const s = scope();
 	const poll = async () => {
 		try {
-			const r = await fetch(`${base}/status.json`, { headers: { accept: "application/json" } });
-			if (r.ok && alive) live = await r.json();
+			const next = await s.task(async (signal) => {
+				const r = await fetch(`${base}/status.json`, {
+					headers: { accept: "application/json" },
+					signal
+				});
+				return r.ok ? await r.json() : null;
+			});
+			if (next !== STALE && next !== null) live = next;
 		} catch {}
 	};
-	poll();
-	const t = setInterval(poll, 4e3);
-	return () => {
-		alive = false;
-		clearInterval(t);
-	};
+	void poll();
+	s.every(() => void poll(), 4e3);
+	return () => s.close();
 });
 let local = $state([]);
 $effect(() => {

package/dist/profiler/ui/Treemap.svelte

@@ -1,4 +1,11 @@
-<script>let { hierarchy } = $props();
+<script>/**
+* CPU treemap — a `wake:'load'` canvas island (was TREE_JS). Squarified layout of self-time,
+* root → category → leaf; click a box to drill in, the breadcrumb zooms back out; hover for detail.
+* The zoom stack and tooltip are `$state`; the canvas redraws in an `$effect` when either the stack
+* or a resize changes. `rects` (hit regions) is plain (non-reactive) — it's rebuilt each draw.
+*/
+import { scope } from "@ogygia/machine";
+let { hierarchy } = $props();
 const H = 440;
 let canvas;
 // the zoom stack starts at the root it was given; clicks own it after
@@ -187,9 +194,9 @@ $effect(() => {
 	draw();
 });
 $effect(() => {
-	const on = () => resizeTick++;
-	window.addEventListener("resize", on);
-	return () => window.removeEventListener("resize", on);
+	const s = scope();
+	s.on(window, "resize", () => resizeTick++);
+	return () => s.close();
 });
 function at(ev) {
 	const r = canvas.getBoundingClientRect();

package/dist/profiler/ui/Treemap.svelte.d.ts

@@ -1,9 +1,3 @@
-/**
- * CPU treemap — a `wake:'load'` canvas island (was TREE_JS). Squarified layout of self-time,
- * root → category → leaf; click a box to drill in, the breadcrumb zooms back out; hover for detail.
- * The zoom stack and tooltip are `$state`; the canvas redraws in an `$effect` when either the stack
- * or a resize changes. `rects` (hit regions) is plain (non-reactive) — it's rebuilt each draw.
- */
 interface Leaf {
     label: string;
     value: number;

package/dist/profiler/ui/WaitingTable.svelte

@@ -1,10 +1,10 @@
 <script>/** Waiting-by-function table — a `wake:'load'` island with reactive sort (count / wait ms). Where
 *  the server WAITED (not computed), attributed to the function that started the I/O. */
 import { fmt_ms, kind_color } from "./format.js";
-import { sortable } from "./sort.svelte.js";
+import { Sortable } from "./sort.svelte.js";
 import { pressable } from "./press.js";
 let { rows, maxMs } = $props();
-const s = sortable(() => rows, "ms");
+const s = new Sortable(() => rows, "ms");
 </script>
 
 <table>

package/dist/profiler/ui/fake-progress.svelte.d.ts

@@ -1,15 +1,10 @@
-/**
- * A Windows-style "determinate-ish" progress: crawls forward fast at first, eases toward 95% with the
- * occasional burst, then snaps to 100% when the real work finishes. There is no true percentage to
- * report — the profile endpoint just works until it's done — so this is a timed illusion, the standard
- * "something is happening" reassurance bar. Call `start()` when the request goes out, `finish()` when
- * it resolves (it awaits one paint at 100% before returning), `fail()` on error.
- */
-export interface FakeProgress {
-  readonly value: number;
-  readonly running: boolean;
+export declare class FakeProgress {
+  #private;
+  get value(): number;
+  get running(): boolean;
   start(): void;
   finish(): Promise<void>;
   fail(): void;
-}
-export declare function fake_progress(): FakeProgress;
+  /** Lets go of every timer, for good (the view unmounted). */
+  [Symbol.dispose](): void;
+}

package/dist/profiler/ui/fake-progress.svelte.js

@@ -1,38 +1,59 @@
+import { STALE, scope } from "@ogygia/machine";
 // src/profiler/ui/fake-progress.svelte.ts
-function fake_progress() {
-	let value = $state(0);
-	let running = $state(false);
-	let timer;
-	function tick() {
-		if (value >= 95) return;
-		const gap = 95 - value;
+/**
+* A Windows-style "determinate-ish" progress: crawls forward fast at first, eases toward 95% with the
+* occasional burst, then snaps to 100% when the real work finishes. There is no true percentage to
+* report — the profile endpoint just works until it's done — so this is a timed illusion, the standard
+* "something is happening" reassurance bar. Call `start()` when the request goes out, `finish()` when
+* it resolves (it awaits one paint at 100% before returning), `fail()` on error.
+*
+* Its timers belong to it (a scope): the view that shows it disposes it when it unmounts, and every
+* timer goes with it, mid-run or not.
+*/
+var FakeProgress = class {
+	#value = $state(0);
+	#running = $state(false);
+	#owner = scope();
+	/** The run's ticking, while one runs. */
+	#run = null;
+	get value() {
+		return this.#value;
+	}
+	get running() {
+		return this.#running;
+	}
+	start() {
+		this.#stop();
+		if (this.#owner.closed) return;
+		this.#value = 0;
+		this.#running = true;
+		this.#run = this.#owner.child();
+		this.#run.every(() => this.#tick(), 170);
+	}
+	async finish() {
+		this.#stop();
+		this.#value = 100;
+		const owner = this.#owner;
+		if (await owner.task(() => new Promise((r) => owner.timeout(r, 420))) !== STALE) this.#running = false;
+	}
+	fail() {
+		this.#stop();
+		this.#running = false;
+		this.#value = 0;
+	}
+	/** Lets go of every timer, for good (the view unmounted). */
+	[Symbol.dispose]() {
+		this.#owner.close();
+	}
+	#stop() {
+		this.#run?.close();
+		this.#run = null;
+	}
+	#tick() {
+		if (this.#value >= 95) return;
+		const gap = 95 - this.#value;
 		const burst = Math.random() < .18 ? gap * .14 : 0;
-		value = Math.min(95, value + gap * .045 + burst + .5);
-	}
-	return {
-		get value() {
-			return value;
-		},
-		get running() {
-			return running;
-		},
-		start() {
-			clearInterval(timer);
-			value = 0;
-			running = true;
-			timer = setInterval(tick, 170);
-		},
-		async finish() {
-			clearInterval(timer);
-			value = 100;
-			await new Promise((r) => setTimeout(r, 420));
-			running = false;
-		},
-		fail() {
-			clearInterval(timer);
-			running = false;
-			value = 0;
-		}
-	};
-}
-export { fake_progress };
+		this.#value = Math.min(95, this.#value + gap * .045 + burst + .5);
+	}
+};
+export { FakeProgress };