p2r3 · Jor02 · Feb 16, 2026 · Feb 17, 2026 · Feb 18, 2026 · Feb 18, 2026
diff --git a/base.css b/base.css
@@ -0,0 +1,29 @@
+html,
+body {
+  padding: 0;
+  font-family: sans-serif;
+}
+
+*,
+*::after,
+*::before {
+  margin: 0;
+  box-sizing: border-box
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+img {
+  font-size: 12px;
+}
diff --git a/docs/Conversion flowchart.drawio b/docs/Conversion flowchart.drawio
diff --git a/docs/Conversion flowchart.png b/docs/Conversion flowchart.png
diff --git a/docs/wireframe.png b/docs/wireframe.png
diff --git a/index.html b/index.html
@@ -1,54 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script type="module" src="./src/ui/scripts/theme-detection.ts"></script>
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="base.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Convert to it!</title>
 </head>
-<body>
-
-  <input id="file-input" type="file">
-
-  <a id="commit-id" href="https://github.com/p2r3/convert"></a>
-
-  <div id="file-area">
-    <h2>Click to add your file</h2>
-    <p id="drop-hint-text">or drag and drop it here</p>
-  </div>
-  <div id="side-panel">
-    <button id="mode-button">Advanced mode</button>
-  </div>
-
-  <div id="format-containers">
-
-    <div id="from-container" class="format-container">
-      <h2>Convert from:</h2>
-      <input type="text" id="search-from" class="search" placeholder="Search">
-      <div id="from-list" class="format-list">
-
-      </div>
-    </div>
 
-    <div id="to-container" class="format-container">
-      <h2>Convert to:</h2>
-      <input type="text" id="search-to" class="search" placeholder="Search">
-      <div id="to-list" class="format-list">
-
-      </div>
-    </div>
-
-  </div>
-
-  <button id="convert-button" class="disabled">Convert</button>
-
-  <div id="popup-bg"></div>
-  <div id="popup">
-    <h2>Loading tools...</h2>
-  </div>
-
-  <script type="module" src="src/main.ts"></script>
+<body>
 
 </body>
-</html>
+<script type="module" src="src/main.new.ts"></script>
+<script type="module" src="src/ui/index.tsx"></script>
+
+</html>
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     }
   },
   "devDependencies": {
+    "@preact/preset-vite": "^2.10.3",
     "@types/jszip": "^3.4.0",
     "@types/opentype.js": "^1.3.9",
     "electron": "^40.6.0",
@@ -59,6 +60,7 @@
     "@ffmpeg/util": "^0.12.2",
     "@flo-audio/reflo": "^0.1.2",
     "@imagemagick/magick-wasm": "^0.0.37",
+    "@preact/signals": "^2.8.1",
     "@sqlite.org/sqlite-wasm": "^3.51.2-build6",
     "@stringsync/vexml": "^0.1.8",
     "@toon-format/toon": "^2.1.0",
@@ -80,11 +82,13 @@
     "papaparse": "^5.5.3",
     "pdftoimg-js": "^0.2.5",
     "pe-library": "^2.0.1",
+    "preact": "^10.28.3",
     "svg-pathdata": "^8.0.0",
     "three": "^0.182.0",
     "three-bvh-csg": "^0.0.17",
     "three-mesh-bvh": "^0.9.8",
     "ts-flp": "^1.0.3",
+    "use-debounce": "^10.1.0",
     "verovio": "^6.0.1",
     "vexflow": "^5.0.0",
     "vite-plugin-static-copy": "^3.1.6",

diff --git a/src/main.new.ts b/src/main.new.ts
@@ -0,0 +1,163 @@
+import type { FileFormat, FileData, FormatHandler, ConvertPathNode } from "./FormatHandler.js";
+import normalizeMimeType from "./normalizeMimeType.js";
+import handlers from "./handlers";
+import { TraversionGraph } from "./TraversionGraph.js";
+import { PopupData } from "./ui/index.js";
+import { closePopup, openPopup } from "./ui/PopupStore.js";
+import { signal } from "@preact/signals";
+import { Mode, ModeEnum } from "./ui/ModeStore.js";
+
+/** KV pairs of files */
+type FileRecord = Record<`${string}-${string}`, File>
+
+/** Map of available formats and its handler */
+export type ConversionOptionsMap = Map<FileFormat, FormatHandler>;
+/** A single conversion option, derived from `ConversionOptionsMap` */
+export type ConversionOption = ConversionOptionsMap extends Map<infer K, infer V> ? [K, V] : never;
+
+export const ConversionOptions: ConversionOptionsMap = new Map();
+
+/**
+ * Files currently selected for conversion
+ */
+export const SelectedFiles = signal<FileRecord>({});
+
+/**
+ * Handlers that support conversion from any formats
+ */
+export const ConversionsFromAnyInput: ConvertPathNode[] =
+	handlers
+		.filter(h => h.supportAnyInput && h.supportedFormats)
+		.flatMap(h => h.supportedFormats!
+			.filter(f => f.to)
+			.map(f => ({ handler: h, format: f })));
+
+window.supportedFormatCache = new Map();
+window.traversionGraph = new TraversionGraph();
+
+window.printSupportedFormatCache = () => {
+	const entries = [];
+	for (const entry of window.supportedFormatCache)
+		entries.push(entry);
+	return JSON.stringify(entries, null, 2);
+}
+
+async function buildOptionList() {
+	ConversionOptions.clear();
+
+	for (const handler of handlers) {
+		if (!window.supportedFormatCache.has(handler.name)) {
+			console.warn(`Cache miss for formats of handler "${handler.name}"`);
+
+			try {
+				await handler.init();
+			} catch (_) { continue }
+
+			if (handler.supportedFormats) {
+				window.supportedFormatCache.set(handler.name, handler.supportedFormats);
+				console.info(`Updated supported format cache for "${handler.name}"`);
+			}
+		}
+
+		const supportedFormats = window.supportedFormatCache.get(handler.name);
+
+		if (!supportedFormats) {
+			console.warn(`Handler "${handler.name}" doesn't support any formats`);
+			continue
+		}
+
+		for (const format of supportedFormats) {
+			if (!format.mime) continue;
+			ConversionOptions.set(format, handler);
+		}
+	}
+
+	closePopup();
+}
+
+async function attemptConvertPath(files: FileData[], path: ConvertPathNode[]) {
+	PopupData.value = {
+		title: "Finding conversion route...",
+		text: `Trying ${path.map(c => c.format.format).join(" → ")}`
+	}
+	openPopup();
+
+	for (let i = 0; i < path.length - 1; i++) {
+		const handler = path[i + 1].handler;
+
+		try {
+			let supportedFormats = window.supportedFormatCache.get(handler.name);
+
+			if (!handler.ready) {
+				try {
+					await handler.init();
+				} catch (_) { return null; }
+
+				if (handler.supportedFormats) {
+					window.supportedFormatCache.set(handler.name, handler.supportedFormats);
+					supportedFormats = handler.supportedFormats;
+				}
+			}
+
+			if (!supportedFormats) throw `Handler "${handler.name}" doesn't support any formats.`;
+
+			const inputFormat = supportedFormats.find(c => c.mime === path[i].format.mime && c.from)!;
+
+			files = (
+				await Promise.all([
+					handler.doConvert(files, inputFormat, path[i + 1].format),
+					// Ensure that we wait long enough for the UI to update
+					new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+				])
+			)[0];
+
+			if (files.some(c => !c.bytes.length)) throw "Output is empty.";
+		} catch (e) {
+			console.log(path.map(c => c.format.format));
+			console.error(handler.name, `${path[i].format.format} → ${path[i + 1].format.format}`, e);
+
+			await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+			return null;
+		}
+	}
+}
+
+window.tryConvertByTraversing = async function (
+	files: FileData[],
+	from: ConvertPathNode,
+	to: ConvertPathNode
+) {
+	for await (const path of window.traversionGraph.searchPath(from, to, Mode.value === ModeEnum.Simple)) {
+		// Use exact output format if the target handler supports it
+		if (path.at(-1)?.handler === to.handler) {
+			path[path.length - 1] = to;
+		}
+		const attempt = await attemptConvertPath(files, path);
+		if (attempt) return attempt;
+	}
+	return null;
+}
+
+function downloadFile(bytes: Uint8Array, name: string, mime: string) {
+	const blob = new Blob([bytes as BlobPart], { type: mime });
+	const link = document.createElement("a");
+	link.href = URL.createObjectURL(blob);
+	link.download = name;
+	link.click();
+}
+
+try {
+	const cacheJSON = await fetch("cache.json")
+		.then(r => r.json());
+	window.supportedFormatCache = new Map(cacheJSON);
+} catch (error) {
+	console.warn(
+		"Missing supported format precache.\n\n" +
+		"Consider saving the output of printSupportedFormatCache() to cache.json."
+	);
+} finally {
+	await buildOptionList();
+	console.log("Built initial format list.");
+}
+
+console.debug(ConversionOptions);
diff --git a/src/main.ts b/src/main.ts
@@ -4,7 +4,7 @@ import handlers from "./handlers";
 import { TraversionGraph } from "./TraversionGraph.js";
 
 /** Files currently selected for conversion */
-let selectedFiles: File[] = [];
+export let selectedFiles: File[] = [];
 /**
  * Whether to use "simple" mode.
  * - In **simple** mode, the input/output lists are grouped by file format.
@@ -316,10 +316,10 @@ ui.modeToggleButton.addEventListener("click", () => {
   simpleMode = !simpleMode;
   if (simpleMode) {
     ui.modeToggleButton.textContent = "Advanced mode";
-    document.body.style.setProperty("--highlight-color", "#1C77FF");
+    document.body.style.setProperty("--primary", "#1C77FF");
   } else {
     ui.modeToggleButton.textContent = "Simple mode";
-    document.body.style.setProperty("--highlight-color", "#FF6F1C");
+    document.body.style.setProperty("--primary", "#FF6F1C");
   }
   buildOptionList();
 });

diff --git a/src/ui/ModeStore.ts b/src/ui/ModeStore.ts
@@ -0,0 +1,40 @@
+import { signal } from "@preact/signals";
+
+const STORAGE_KEY = "mode";
+
+export enum ModeEnum {
+	Simple,
+	Advanced
+}
+
+export const enum ModeText {
+	Simple = "Simple mode",
+	Advanced = "Advanced mode"
+}
+
+function getInitialMode(): ModeEnum {
+	const stored = localStorage.getItem(STORAGE_KEY);
+	return (!!stored) ? parseInt(stored, 10) : ModeEnum.Simple;
+}
+
+export const Mode = signal<ModeEnum>(getInitialMode());
+
+function applyMode(value: ModeEnum) {
+	if (value === ModeEnum.Simple) document.documentElement.style.setProperty("--primary", "#1C77FF");
+	if (value === ModeEnum.Advanced) document.documentElement.style.setProperty("--primary", "#FF6F1C");
+}
+
+Mode.subscribe((value) => {
+	localStorage.setItem(STORAGE_KEY, value.toString());
+	applyMode(value);
+})
+
+export function toggleMode() {
+	Mode.value = Mode.value === ModeEnum.Advanced
+		? ModeEnum.Simple
+		: ModeEnum.Advanced;
+}
+
+export function initMode() {
+	applyMode(Mode.value);
+}
diff --git a/src/ui/PopupStore.ts b/src/ui/PopupStore.ts
@@ -0,0 +1,40 @@
+import { signal } from '@preact/signals'
+
+export interface PopupDataContainer {
+	/** Title of the popup */
+	title?: string
+	/** The description text of the popup */
+	text?: string
+	/**
+	 * Is the popup soft-dismissible?
+	 *
+	 * If this is false, the modal must be closed programmatically, or else it'll be stuck blocking input
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#popover_api_html_attributes
+	 */
+	dismissible?: boolean
+	/** Text for the button. If this is undefined, the popup will hide the button */
+	buttonText?: string
+	/** The event handler for the button. If this is just `true`, clicking the button will close the modal */
+	buttonOnClick?: preact.MouseEventHandler<HTMLButtonElement> | true
+	/**
+	 * Raw contents of the popup. Can be any arbitrary JSX data.
+	 *
+	 * If this is declared, properties `title` and `text` are ignored
+	 */
+	contents?: preact.JSX.Element
+}
+
+export const popupOpen = signal(false);
+
+export const openPopup = () => (popupOpen.value = true);
+export const closePopup = () => (popupOpen.value = false);
+export const togglePopup = () => (popupOpen.value = !popupOpen.value);
+
+// Manual overrides
+// @ts-expect-error
+window.openPopup = openPopup;
+// @ts-expect-error
+window.closePopup = closePopup;
+// @ts-expect-error
+window.togglePopup = togglePopup;