@heyramzi/ui 3.7.0 → 3.7.1

package/dist/canvas/pen/node-name.svelte.js

@@ -1,6 +1,6 @@
 // A pen node's accessible name. Svelte Flow puts `ariaLabel` on the focusable node wrapper,
 // so the name has to live on the node object and follow its words as they're edited.
-import { useSvelteFlow } from "@xyflow/svelte";
+import { useStore } from "@xyflow/svelte";
 import { untrack } from "svelte";
 const cap = (word) => word.charAt(0).toUpperCase() + word.slice(1);
 /** "Idea" for a text, "Rectangle: Idea" for a labelled shape, "Pen stroke" for a drawing. */
@@ -11,15 +11,38 @@ export function penNodeName(kind, data) {
 	const label = data.label?.trim();
 	return label ? `${shape}: ${label}` : shape;
 }
+// One write per canvas per tick: a write per node redrew the board 473 times opening 1,000 cards.
+const pending = new WeakMap();
+function queueName(store, nodeId, label) {
+	let names = pending.get(store);
+	if (!names) {
+		const queued = new Map();
+		names = queued;
+		pending.set(store, queued);
+		queueMicrotask(() => {
+			pending.delete(store);
+			let changed = false;
+			const nodes = store.nodes.map((node) => {
+				const name = queued.get(node.id);
+				if (name === undefined || node.ariaLabel === name) return node;
+				changed = true;
+				return {
+					...node,
+					ariaLabel: name
+				};
+			});
+			if (changed) store.nodes = nodes;
+		});
+	}
+	names.set(nodeId, label);
+}
 /** Keeps node `id`'s ariaLabel equal to `name()`. Call it from a node component. */
 export function useNodeName(id, name) {
-	const { getNode, updateNode } = useSvelteFlow();
+	const store = useStore();
 	$effect(() => {
 		const nodeId = id();
 		const label = name();
-		// untrack: updateNode reads the node list, and tracking it would rerun this on every write.
-		untrack(() => {
-			if (getNode(nodeId)?.ariaLabel !== label) updateNode(nodeId, { ariaLabel: label });
-		});
+		// untrack: the write reads the node list, and tracking it would rerun this on every write.
+		untrack(() => queueName(store, nodeId, label));
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -143,6 +143,12 @@
     "./animations/*": {
       "default": "./src/animations/*"
     },
+    "./shadcn/hooks/*.svelte": {
+      "svelte": "./src/shadcn/hooks/*.svelte.js",
+      "types": "./src/shadcn/hooks/*.svelte.ts",
+      "node": "./dist/shadcn/hooks/*.svelte.js",
+      "default": "./src/shadcn/hooks/*.svelte.js"
+    },
     "./shadcn/hooks/*": {
       "svelte": "./src/shadcn/hooks/*.ts",
       "types": "./src/shadcn/hooks/*.ts",
@@ -308,6 +314,12 @@
       "default": "./src/canvas/*.svelte"
     },
     "./canvas/*.css": "./src/canvas/*.css",
+    "./canvas/*.svelte.js": {
+      "types": "./src/canvas/*.svelte.ts",
+      "svelte": "./src/canvas/*.svelte.js",
+      "node": "./dist/canvas/*.svelte.js",
+      "default": "./src/canvas/*.svelte.js"
+    },
     "./canvas/*.js": {
       "types": "./src/canvas/*.ts",
       "svelte": "./src/canvas/*.ts",

package/scripts/lib/svelte-modules.d.mts

@@ -0,0 +1,4 @@
+/** Deletes every `x.svelte.js` that sits beside an `x.svelte.ts` under `src`. */
+export function cleanSvelteModules(src: any): void;
+/** Writes a type-free `x.svelte.js` beside each `x.svelte.ts` under `src`, and returns how many. */
+export function writeSvelteModules(src: any): Promise<number>;

package/scripts/lib/svelte-modules.mjs

@@ -0,0 +1,38 @@
+// vite-plugin-svelte prebundles a dependency's `.svelte.ts` with its types still in, so a consumer's
+// dev server dies on the first `import type` (3.6.0, the chat windows' reveal.svelte.ts).
+
+// The tarball carries a type-free `x.svelte.js` twin. Importers already write `.svelte.js`, so Vite
+// takes the twin and TypeScript keeps the `.ts`; the repo, with no twin, falls back to it.
+import { readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { transformWithOxc } from "vite-plus";
+
+const MODULE = /\.svelte\.ts$/;
+const TEST = /\.(test|spec)\.svelte\.ts$/;
+
+function walk(dir, out = []) {
+  for (const e of readdirSync(dir, { withFileTypes: true })) {
+    const p = join(dir, e.name);
+    if (e.isDirectory()) walk(p, out);
+    else if (MODULE.test(e.name) && !TEST.test(e.name)) out.push(p);
+  }
+  return out;
+}
+
+/** Deletes every `x.svelte.js` that sits beside an `x.svelte.ts` under `src`. */
+export function cleanSvelteModules(src) {
+  for (const file of walk(src)) rmSync(file.replace(MODULE, ".svelte.js"), { force: true });
+}
+
+/** Writes a type-free `x.svelte.js` beside each `x.svelte.ts` under `src`, and returns how many. */
+export async function writeSvelteModules(src) {
+  cleanSvelteModules(src);
+  const files = walk(src);
+  await Promise.all(
+    files.map(async (file) => {
+      const { code } = await transformWithOxc(readFileSync(file, "utf8"), file, { lang: "ts" });
+      writeFileSync(file.replace(MODULE, ".svelte.js"), code);
+    }),
+  );
+  return files.length;
+}

package/scripts/svelte-modules.mjs

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+// Writes `x.svelte.js` beside each `x.svelte.ts` for the tarball; lib/svelte-modules.mjs says why.
+// prepack writes them, postpack deletes them (`--clean`): left in src, they'd shadow the source.
+import { dirname, join } from "node:path";
+import { argv } from "node:process";
+import { fileURLToPath } from "node:url";
+import { cleanSvelteModules, writeSvelteModules } from "./lib/svelte-modules.mjs";
+
+const src = join(dirname(fileURLToPath(import.meta.url)), "..", "src");
+if (argv.includes("--clean")) cleanSvelteModules(src);
+else
+  console.log(
+    `svelte-modules: ${await writeSvelteModules(src)} module(s) beside src/**/*.svelte.ts`,
+  );

package/src/ai/chat-window/reveal.svelte.js

@@ -0,0 +1,106 @@
+import { untrack } from "svelte";
+/** Milliseconds each beat holds, read as one conversation's pacing, not a transition. */
+export const REVEAL_BEATS = {
+	lead: 400,
+	user: 900,
+	thinking: 900,
+	stream: 1500,
+	running: 1300,
+	after: 350
+};
+/** The timeline for a conversation: when each message enters and settles, and when it ends. */
+export function revealSchedule(roles, beats = REVEAL_BEATS) {
+	const out = [];
+	let t = beats.lead;
+	roles.forEach((role, index) => {
+		if (role === "user") {
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.user;
+		} else if (role === "assistant") {
+			out.push({
+				at: t,
+				index,
+				phase: "thinking"
+			});
+			t += beats.thinking;
+			out.push({
+				at: t,
+				index,
+				phase: "streaming"
+			});
+			t += beats.stream;
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.after;
+		} else {
+			out.push({
+				at: t,
+				index,
+				phase: "running"
+			});
+			t += beats.running;
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.after;
+		}
+	});
+	return {
+		beats: out,
+		end: t
+	};
+}
+/**
+* Plays a conversation once the window is on screen and `active`, again each time `active` turns on.
+* Renders finished for SSR, no JavaScript and reduced motion.
+*/
+export function createReveal(options) {
+	let phases = $state([]);
+	let node = $state(null);
+	let seen = $state(false);
+	$effect(() => {
+		const { enabled } = options();
+		if (!node || !enabled || seen) return;
+		const io = new IntersectionObserver((entries) => {
+			if (entries.some((e) => e.isIntersecting)) {
+				seen = true;
+				io.disconnect();
+			}
+		}, { threshold: .35 });
+		io.observe(node);
+		return () => io.disconnect();
+	});
+	$effect(() => {
+		const { enabled, active } = options();
+		if (!enabled || !active || !seen) return;
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		const { roles, hold, ondone } = untrack(options);
+		const { beats, end } = revealSchedule(roles);
+		phases = roles.map(() => "hidden");
+		const timers = beats.map((b) => setTimeout(() => phases[b.index] = b.phase, b.at));
+		timers.push(setTimeout(() => ondone?.(), end + hold));
+		return () => {
+			timers.forEach(clearTimeout);
+			phases = [];
+		};
+	});
+	return {
+		/** A message's phase; `done` when nothing is playing. */
+		phase: (index) => phases[index] ?? "done",
+		/** Attach to the window's root, so the reveal waits until it scrolls into view. */
+		attach: (el) => {
+			node = el;
+			return () => node = null;
+		},
+		streamMs: REVEAL_BEATS.stream
+	};
+}

package/src/ai/confirmation/confirmation-context.svelte.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
+export function setConfirmationContext(value) {
+	setContext(CONFIRMATION_CONTEXT_KEY, value);
+}
+export function getConfirmationContext() {
+	const context = getContext(CONFIRMATION_CONTEXT_KEY);
+	if (!context) {
+		throw new Error("Confirmation parts must be used inside a <Confirmation>.");
+	}
+	return context;
+}

package/src/ai/reasoning/reasoning-context.svelte.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+const REASONING_CONTEXT_KEY = Symbol("reasoning-context");
+export function setReasoningContext(value) {
+	setContext(REASONING_CONTEXT_KEY, value);
+}
+export function getReasoningContext() {
+	const context = getContext(REASONING_CONTEXT_KEY);
+	if (!context) {
+		throw new Error("Reasoning parts must be used inside a <Reasoning>.");
+	}
+	return context;
+}

package/src/canvas/editor/dispatch.svelte.js

@@ -0,0 +1,160 @@
+import { applyOps } from "../ops/ops.js";
+import { tryCatch } from "../../lib/result.js";
+import { applyHistoryEntry, diffFlowState, mergeHistoryEntries } from "./history-core.js";
+const MAX_ENTRIES = 200;
+/** Keystrokes under this far apart share one undo step. */
+const COALESCE_WINDOW_MS = 1e3;
+// A drag whose stop never fires (pointer lost, node unmounted) leaves its transaction open,
+// and drag frames never reach the dispatcher, so this counts from the last begin or commit.
+const STUCK_TRANSACTION_MS = 1e4;
+/** `Op` is the union of op shapes the caller dispatches: the canvas's own plus its plugins'. */
+export function createCanvasDispatcher(io) {
+	const now = io.now ?? Date.now;
+	let undoStack = $state.raw([]);
+	let redoStack = $state.raw([]);
+	let depth = 0;
+	let baseline = null;
+	let lastActivityAt = 0;
+	// The text session the top undo entry belongs to, while keystrokes keep merging into it.
+	let session = null;
+	// Cards are replaced, never edited in place, so holding the objects equals a deep copy for a pointer each.
+	function snapshot() {
+		const state = io.getState();
+		return {
+			nodes: [...state.nodes],
+			edges: [...state.edges]
+		};
+	}
+	function isStale() {
+		return depth > 0 && now() - lastActivityAt > STUCK_TRANSACTION_MS;
+	}
+	/** Record the open transaction's diff as one history entry, merged into the text session it continues. */
+	function finish(coalesceKey) {
+		depth = 0;
+		const before = baseline;
+		baseline = null;
+		const entry = before && diffFlowState(before, io.getState());
+		if (!entry) return;
+		const at = now();
+		const top = undoStack.at(-1);
+		if (coalesceKey && top && session?.key === coalesceKey && at - session.at < COALESCE_WINDOW_MS) {
+			undoStack = [...undoStack.slice(0, -1), mergeHistoryEntries(top, entry)];
+			session = {
+				key: coalesceKey,
+				at
+			};
+		} else {
+			undoStack = [...undoStack.slice(-(MAX_ENTRIES - 1)), entry];
+			session = coalesceKey ? {
+				key: coalesceKey,
+				at
+			} : null;
+		}
+		redoStack = [];
+		io.onMutated();
+	}
+	/** Force-close a transaction nobody closed, so undo and the next gesture work again. */
+	function recoverStuck() {
+		if (isStale()) finish();
+	}
+	/** Open a transaction. Nested calls join the outermost one. */
+	function begin() {
+		recoverStuck();
+		lastActivityAt = now();
+		if (depth === 0) baseline = snapshot();
+		depth += 1;
+	}
+	/** Close a transaction. The outermost close diffs and records the entry. */
+	function commit(coalesceKey) {
+		lastActivityAt = now();
+		if (depth > 1) {
+			depth -= 1;
+			return;
+		}
+		// A commit with no begin has nothing to record.
+		if (depth === 1) finish(coalesceKey);
+	}
+	function run(fn, coalesceKey) {
+		begin();
+		const res = tryCatch(fn);
+		commit(coalesceKey);
+		if (!res.ok) throw res.error;
+		return res.value;
+	}
+	/**
+	* Apply granular ops to the flow state inside a transaction. A `coalesceKey` folds the
+	* step into the top undo entry while that key keeps committing under a second apart.
+	*/
+	function dispatch(ops, options) {
+		const asked = Array.isArray(ops) ? ops : [ops];
+		const list = io.guard ? io.guard(io.getState().nodes, asked) : asked;
+		if (list.length === 0) return true;
+		return run(() => {
+			const state = io.getState();
+			const res = tryCatch(() => applyOps({
+				// `applyOps` patches plain records so one op log replays over xyflow
+				// and persisted shapes. Widening in and narrowing out is that seam.
+				nodes: state.nodes,
+				edges: state.edges
+			}, list, io.opDefinitions));
+			if (!res.ok) return false;
+			io.setState({
+				nodes: res.value.nodes,
+				edges: res.value.edges
+			});
+			return true;
+		}, options?.coalesceKey);
+	}
+	// An open gesture owns the baseline, so a replay under it would fold into its entry.
+	function undo() {
+		recoverStuck();
+		session = null;
+		const entry = undoStack.at(-1);
+		if (!entry || depth > 0) return;
+		undoStack = undoStack.slice(0, -1);
+		redoStack = [...redoStack, entry];
+		io.setState(applyHistoryEntry(io.getState(), entry, "undo"));
+		io.onMutated();
+	}
+	function redo() {
+		recoverStuck();
+		session = null;
+		const entry = redoStack.at(-1);
+		if (!entry || depth > 0) return;
+		redoStack = redoStack.slice(0, -1);
+		undoStack = [...undoStack, entry];
+		io.setState(applyHistoryEntry(io.getState(), entry, "redo"));
+		io.onMutated();
+	}
+	return {
+		get canUndo() {
+			return undoStack.length > 0;
+		},
+		get canRedo() {
+			return redoStack.length > 0;
+		},
+		/** True while a gesture holds a transaction open. A stuck one reads false. */
+		get isOpen() {
+			return depth > 0 && !isStale();
+		},
+		begin,
+		/** A long gesture calls this on every frame, so a slow drag isn't mistaken for a stuck one. */
+		touch() {
+			if (depth > 0) lastActivityAt = now();
+		},
+		commit: () => commit(),
+		run: (fn) => run(fn),
+		dispatch,
+		/** End the text session, so the next keystroke starts a new undo step. Call it on blur. */
+		endCoalesce() {
+			session = null;
+		},
+		undo,
+		redo,
+		clear() {
+			undoStack = [];
+			redoStack = [];
+			session = null;
+		}
+	};
+}

package/src/canvas/lod/lod-mode.svelte.js

@@ -0,0 +1,24 @@
+import { untrack } from "svelte";
+// One flag per canvas: a card reading it re-renders when it flips, not on every zoom frame.
+/** Below this zoom a card is a box. */
+export const LOW_BELOW = .4;
+/** Back to the full card above this. The gap stops a zoom held at the line from swapping every card each frame. */
+export const FULL_ABOVE = .46;
+const modes = new WeakMap();
+/** The shared flag for one canvas's store. The first card to ask starts the one effect that keeps it. */
+export function lodMode(store) {
+	const known = modes.get(store);
+	if (known) return known;
+	const mode = $state({ low: store.viewport.zoom < LOW_BELOW });
+	modes.set(store, mode);
+	$effect.root(() => {
+		$effect(() => {
+			const zoom = store.viewport.zoom;
+			untrack(() => {
+				if (mode.low && zoom > FULL_ABOVE) mode.low = false;
+				else if (!mode.low && zoom < LOW_BELOW) mode.low = true;
+			});
+		});
+	});
+	return mode;
+}

package/src/canvas/lod/render-all.svelte.js

@@ -0,0 +1,42 @@
+import { tick } from "svelte";
+// An export reads the page's markup, so it holds this open: every card is drawn in full until it lets go.
+const hold = $state({ count: 0 });
+/** True while something needs every card drawn in full. */
+export const renderAll = { get on() {
+	return hold.count > 0;
+} };
+const frame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+// Arrows draw a beat after their cards, once the cards are measured, so they are counted too.
+const DRAWN = ".svelte-flow__node, .svelte-flow__edge";
+const SETTLE_FRAMES = 8;
+const GIVE_UP_MS = 4e3;
+/** The page's card fade-in is switched off under this attribute, so a card that remounts is captured solid. */
+export const EVERY_CARD_ATTR = "data-cv-every-card";
+/** Runs `use` with every card drawn in full. Waits until the number of cards and arrows on the page holds still. */
+export async function withEveryCard(root, use) {
+	hold.count += 1;
+	const marked = root instanceof Element ? root : null;
+	marked?.setAttribute(EVERY_CARD_ATTR, "");
+	try {
+		await tick();
+		const start = performance.now();
+		let last = -1;
+		let still = 0;
+		while (still < SETTLE_FRAMES && performance.now() - start < GIVE_UP_MS) {
+			await frame();
+			const now = root.querySelectorAll(DRAWN).length;
+			still = now === last ? still + 1 : 0;
+			last = now;
+		}
+		// A fade that began before the switch-off still has to land.
+		if ("getAnimations" in root) {
+			const running = root.getAnimations({ subtree: true });
+			await Promise.race([Promise.allSettled(running.map((animation) => animation.finished)), new Promise((resolve) => setTimeout(resolve, 1e3))]);
+		}
+		await frame();
+		return await use();
+	} finally {
+		hold.count -= 1;
+		if (hold.count === 0) marked?.removeAttribute(EVERY_CARD_ATTR);
+	}
+}

package/src/canvas/pen/node-name.svelte.js

@@ -0,0 +1,48 @@
+// A pen node's accessible name. Svelte Flow puts `ariaLabel` on the focusable node wrapper,
+// so the name has to live on the node object and follow its words as they're edited.
+import { useStore } from "@xyflow/svelte";
+import { untrack } from "svelte";
+const cap = (word) => word.charAt(0).toUpperCase() + word.slice(1);
+/** "Idea" for a text, "Rectangle: Idea" for a labelled shape, "Pen stroke" for a drawing. */
+export function penNodeName(kind, data) {
+	if (kind === "text") return data.text?.trim() || "Empty text";
+	if (kind === "stroke") return `${cap(data.tool ?? "pen")} stroke`;
+	const shape = cap(data.shape ?? "shape");
+	const label = data.label?.trim();
+	return label ? `${shape}: ${label}` : shape;
+}
+// One write per canvas per tick: a write per node redrew the board 473 times opening 1,000 cards.
+const pending = new WeakMap();
+function queueName(store, nodeId, label) {
+	let names = pending.get(store);
+	if (!names) {
+		const queued = new Map();
+		names = queued;
+		pending.set(store, queued);
+		queueMicrotask(() => {
+			pending.delete(store);
+			let changed = false;
+			const nodes = store.nodes.map((node) => {
+				const name = queued.get(node.id);
+				if (name === undefined || node.ariaLabel === name) return node;
+				changed = true;
+				return {
+					...node,
+					ariaLabel: name
+				};
+			});
+			if (changed) store.nodes = nodes;
+		});
+	}
+	names.set(nodeId, label);
+}
+/** Keeps node `id`'s ariaLabel equal to `name()`. Call it from a node component. */
+export function useNodeName(id, name) {
+	const store = useStore();
+	$effect(() => {
+		const nodeId = id();
+		const label = name();
+		// untrack: the write reads the node list, and tracking it would rerun this on every write.
+		untrack(() => queueName(store, nodeId, label));
+	});
+}

package/src/canvas/pen/node-name.svelte.ts

@@ -1,9 +1,11 @@
 // A pen node's accessible name. Svelte Flow puts `ariaLabel` on the focusable node wrapper,
 // so the name has to live on the node object and follow its words as they're edited.
 
-import { useSvelteFlow } from "@xyflow/svelte";
+import { useStore } from "@xyflow/svelte";
 import { untrack } from "svelte";
 
+type FlowStore = ReturnType<typeof useStore>;
+
 const cap = (word: string) => word.charAt(0).toUpperCase() + word.slice(1);
 
 /** "Idea" for a text, "Rectangle: Idea" for a labelled shape, "Pen stroke" for a drawing. */
@@ -18,15 +20,37 @@ export function penNodeName(
   return label ? `${shape}: ${label}` : shape;
 }
 
+// One write per canvas per tick: a write per node redrew the board 473 times opening 1,000 cards.
+const pending = new WeakMap<FlowStore, Map<string, string>>();
+
+function queueName(store: FlowStore, nodeId: string, label: string): void {
+  let names = pending.get(store);
+  if (!names) {
+    const queued = new Map<string, string>();
+    names = queued;
+    pending.set(store, queued);
+    queueMicrotask(() => {
+      pending.delete(store);
+      let changed = false;
+      const nodes = store.nodes.map((node) => {
+        const name = queued.get(node.id);
+        if (name === undefined || node.ariaLabel === name) return node;
+        changed = true;
+        return { ...node, ariaLabel: name };
+      });
+      if (changed) store.nodes = nodes;
+    });
+  }
+  names.set(nodeId, label);
+}
+
 /** Keeps node `id`'s ariaLabel equal to `name()`. Call it from a node component. */
 export function useNodeName(id: () => string, name: () => string): void {
-  const { getNode, updateNode } = useSvelteFlow();
+  const store = useStore();
   $effect(() => {
     const nodeId = id();
     const label = name();
-    // untrack: updateNode reads the node list, and tracking it would rerun this on every write.
-    untrack(() => {
-      if (getNode(nodeId)?.ariaLabel !== label) updateNode(nodeId, { ariaLabel: label });
-    });
+    // untrack: the write reads the node list, and tracking it would rerun this on every write.
+    untrack(() => queueName(store, nodeId, label));
   });
 }

package/src/components/copy/copied.svelte.js

@@ -0,0 +1,34 @@
+import { copyText } from "./clipboard.js";
+/**
+* The copied flag for a surface whose affordance is a whole row or card rather
+* than a `CopyButton`. Keyed, so one instance serves a list of rows.
+*/
+export class Copied {
+	/** The key that last copied, or null. Empty string when a surface has one. */
+	key = $state(null);
+	#timer = null;
+	/** True when anything copied; with a key, true only for that one. */
+	is(key = "") {
+		return this.key === key;
+	}
+	/** Writes, then holds the check for `hold` ms. False when the write failed. */
+	async copy(value, key = "", hold = 1400) {
+		if (!await copyText(value)) return false;
+		this.mark(key, hold);
+		return true;
+	}
+	/** The confirmation without the write, for a copy this class did not make. */
+	mark(key = "", hold = 1400) {
+		this.key = key;
+		if (this.#timer) clearTimeout(this.#timer);
+		this.#timer = setTimeout(() => {
+			this.key = null;
+			this.#timer = null;
+		}, hold);
+	}
+	reset() {
+		if (this.#timer) clearTimeout(this.#timer);
+		this.#timer = null;
+		this.key = null;
+	}
+}