feat(dev-tools): add crisp canvas zoom setting

Nearest-neighbour scaling on the world canvases keeps zoom sharp instead of blurry.

Author: IrishBruse

docs/dev-tools/README.md

@@ -31,8 +31,9 @@ Settings live on this mod. Open **Options → Mods → dev-tools**.
 | **Disable autosave**      | `disableAutosave` | off         | Sets `session.settings.autosaveInterval` to `0`. Manual saves still work                                                                                                |
 | **Watch local mods**      | `watchLocalMods`  | off         | Poll other mods' `main.js` and re-eval the renderer bundle. Does not reload this companion, workers, or patches                                                         |
 | **Fast dev boot**         | `fastBoot`        | off         | Skip `foliage.generate` on boot. Raster, shadows, and shader compile stay vanilla. Writes `localStorage`. Needs `debugPatches` (dev). Restart once after you turn it on |
+| **Crisp canvas zoom**     | `crispCanvas`     | off         | Nearest-neighbour scaling on `#canvas` and `#overlay-canvas` so zoom stays sharp instead of blurry                                                                      |
 
-Turn on **Watch local mods**, **Fast dev boot**, **Auto-load save**, **F3 debug overlay**, **Disable autosave**, **F12**, or **Open DevTools on load** when you want those helpers.
+Turn on **Watch local mods**, **Fast dev boot**, **Auto-load save**, **F3 debug overlay**, **Crisp canvas zoom**, **Disable autosave**, **F12**, or **Open DevTools on load** when you want those helpers.
 
 ## Features
 
@@ -45,6 +46,7 @@ Turn on **Watch local mods**, **Fast dev boot**, **Auto-load save**, **F3 debug
 - **Dev Tools** (`mod-inspector/`) — pause **Dev Tools** opens a 1100×720 panel. **Mods** tab: compact loaded-mod cards; **Open** fills the tab with details (description first, then contributes, then load meta); save issues stay collapsed. **Elements**: family sand table. **Chains**: pick an element. **Does** shows where it goes (`Gold → Smelter → Liquid Gold`). **Comes from** shows how it is made. Depth 1 is one recipe hop. The index includes engine builtins (Wet Sand shaker, Residue burn, Burnt Residue press, Water contacts) because those rows are not in `mods.recipes`.
 - **Watch local mods** (`reload/`) — poll and re-eval other mods' renderer `main.js`.
 - **Fast dev boot** (`patches.ts`, `boot/fast-boot.ts`) — when on, skips `foliage.generate` only. Raster fill, shadow rebuild, and outline compile stay vanilla. Needs `debugPatches` (dev). Restart once after you turn it on.
+- **Crisp canvas zoom** (`boot/crisp-canvas.ts`) — injects `image-rendering: pixelated` on the world canvases. Toggle in **Options → Mods → dev-tools**.
 
 ## DevTools globals
 

src/dev-tools/boot/crisp-canvas.ts

@@ -0,0 +1,16 @@
+const STYLE_ID = "dev-tools-crisp-canvas";
+
+/** Nearest-neighbour scaling for the world canvases (sharp when zoomed). */
+export function syncCrispCanvas(enabled: boolean): void {
+  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+  if (enabled) {
+    if (!style) {
+      style = document.createElement("style");
+      style.id = STYLE_ID;
+      style.textContent = "#canvas,#overlay-canvas{image-rendering:pixelated}";
+      document.head.appendChild(style);
+    }
+    return;
+  }
+  style?.remove();
+}

src/dev-tools/boot/setting-defaults.ts

@@ -1,6 +1,6 @@
 /**
  * Defaults when `api.settings.get` has no boolean yet.
- * Keep in sync with `configSchema` in `../modinfo.ts`.
+ * Keep in sync with `configSchema` in `../modinfo.json`.
  */
 export const SETTING_DEFAULTS: Record<string, boolean> = {
   openDevTools: false,
@@ -10,4 +10,5 @@ export const SETTING_DEFAULTS: Record<string, boolean> = {
   disableAutosave: false,
   watchLocalMods: false,
   fastBoot: false,
+  crispCanvas: false,
 };

src/dev-tools/boot/settings.test.ts

@@ -5,19 +5,15 @@ import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 import { SETTING_DEFAULTS } from "./setting-defaults.ts";
 
-const BOOT_DIR = dirname(fileURLToPath(import.meta.url));
+const DEV_TOOLS_DIR = dirname(dirname(fileURLToPath(import.meta.url)));
 
-function booleanSchemaDefault(source: string, key: string): boolean {
-  const match = source.match(
-    new RegExp(`${key}:\\s*\\{[\\s\\S]*?type:\\s*"boolean",[\\s\\S]*?default:\\s*(true|false)`),
-  );
-  assert.ok(match, `boolean schema default for ${key}`);
-  return match[1] === "true";
-}
-
-test("SETTING_DEFAULTS matches boolean configSchema defaults in modinfo.ts", () => {
-  const source = readFileSync(join(BOOT_DIR, "..", "modinfo.ts"), "utf8");
+test("SETTING_DEFAULTS matches boolean configSchema defaults in modinfo.json", () => {
+  const manifest = JSON.parse(readFileSync(join(DEV_TOOLS_DIR, "modinfo.json"), "utf8")) as {
+    configSchema?: Record<string, { type?: string; default?: unknown }>;
+  };
   for (const [key, value] of Object.entries(SETTING_DEFAULTS)) {
-    assert.equal(booleanSchemaDefault(source, key), value, key);
+    const field = manifest.configSchema?.[key];
+    assert.equal(field?.type, "boolean", `${key} must be a boolean schema field`);
+    assert.equal(field?.default, value, `${key} default`);
   }
 });

src/dev-tools/main.ts

@@ -1,10 +1,11 @@
 import { disableSessionAutosave } from "./boot/autosave";
 import { registerDevToolsShortcut, scheduleMainMenuBoot } from "./boot/boot-menu";
+import { syncCrispCanvas } from "./boot/crisp-canvas";
 import { syncFastBootPrefs } from "./boot/fast-boot";
 import { settingOn } from "./boot/settings";
 import { installDebugCompanion } from "./f3/install";
 import { installModInspector } from "./mod-inspector/install";
-import { modinfo } from "./modinfo";
+import modinfo from "./modinfo.json";
 import { installFirstLoadApiWrap } from "./reload/first-load-wrap.ts";
 import { installLocalModReload } from "./reload/install.ts";
 import { isEnabled } from "modkit/utils";
@@ -29,6 +30,10 @@ function syncBootPatches(): void {
   syncFastBootPrefs(api);
 }
 
+function syncCrispCanvasSetting(): void {
+  syncCrispCanvas(settingOn(api, "crispCanvas"));
+}
+
 function main() {
   if (!isEnabled(api)) return;
 
@@ -39,6 +44,7 @@ function main() {
   Object.assign(globalThis, { sandkit, api, enums, react });
 
   syncBootPatches();
+  syncCrispCanvasSetting();
   if (settingOn(api, "f12DevTools")) registerDevToolsShortcut();
   scheduleMainMenuBoot(api);
   if (settingOn(api, "disableAutosave")) disableSessionAutosave();
@@ -47,6 +53,7 @@ function main() {
   syncLocalModReload();
   api.settings.onChange(() => {
     syncBootPatches();
+    syncCrispCanvasSetting();
     syncLocalModReload();
   });