gofront 1.3.10 → 1.3.12

package/README.md

@@ -109,8 +109,9 @@ Walks the typed AST and emits clean, readable JavaScript. No intermediate repres
 — the codegen writes directly to an output buffer with indentation tracking.
 
 Runtime helpers (`__len`, `__append`, `__s`, `__sprintf`, `__equal`, `__cmul`, `__cdiv`,
-`__error`, `__errorIs`, `__timeFmt`, `__timeParse`, `__pathClean`) are tree-shaken: only
-emitted when actually used. Optional inline source maps are supported via VLQ-encoded mappings.
+`__error`, `__errorIs`, `__timeFmt`, `__timeParse`, `__pathClean`, `__sortSlice`,
+`__sclone`, `__ifv`, `__ifp`) are tree-shaken: only emitted when actually used. Optional
+inline source maps are supported via VLQ-encoded mappings.
 
 ---
 
@@ -191,10 +192,11 @@ The type checker enforces correctness; JavaScript doesn't need to know.
 
 ---
 
-## Examples — Todo App
+## Examples
 
-There are four example apps — all implement the same todo app to show different aspects
-of GoFront.
+There are five example apps. Four implement the same todo app to show different aspects
+of GoFront; the fifth is a WebGL2 3D showcase demonstrating typed graphics APIs and
+zero-allocation rendering.
 
 ### Simple (vanilla DOM)
 
@@ -224,6 +226,10 @@ signals-based reactive framework. Demonstrates how GoFront integrates with exter
 libraries via `.d.ts` type declarations — the entire reactive API surface is typed via a
 hand-written `browser.d.ts` shim and exercised from GoFront source.
 
+> **Note:** Microtastic is now archived. This example is kept as a reference for
+> `.d.ts` interop with third-party signal libraries. For new projects, use the native
+> `.templ` or `gom` approaches shown below.
+
 ```
 example/reactive/
   src/
@@ -368,6 +374,21 @@ attributes, `@Component()` calls inside templates, `if / else if / else` chains,
 `switch` blocks, `for range` loops, and `@templ.Raw()` for trusted HTML injection —
 all inside template bodies.
 
+### WebGL2 (3D showcase)
+
+A 3D rotating colored cube rendered with WebGL2 shaders. Demonstrates GoFront's static
+WebGL2 typings, `Float32Array` / `Uint16Array` slice mapping, zero-allocation `for range`
+loops, and continuous `requestAnimationFrame` rendering — all with zero per-frame heap
+allocations.
+
+```
+example/webgl/
+  src/
+    main.go       ← shaders, mat4 math, vertex/index buffers, render loop
+  app.js          ← generated output
+  index.html      ← canvas element
+```
+
 ### Build and run
 
 ```sh
@@ -375,6 +396,7 @@ npm run build:simple      # → example/simple/app.js
 npm run build:reactive    # → example/reactive/app.js
 npm run build:gom         # → example/gom/app.js
 npm run build:templ       # → example/templ/app.js
+npm run build:webgl       # → example/webgl/app.js
 # open the respective index.html in a browser
 ```
 
@@ -383,23 +405,33 @@ npm run build:templ       # → example/templ/app.js
 ## CLI
 
 ```
-gofront <file.go>                compile single file → stdout
-gofront <dir>                    compile all *.go in directory → stdout
-gofront <input> -o out.js        write output to file (prints elapsed compile time e.g. "15ms")
-gofront <input> --check                    type-check only
-gofront check <dir>/...                    type-check every package under <dir> (Go-style `./...`)
-gofront test <dir>/... [--dom]             run tests for every package under <dir>
-gofront <input> --watch                    watch for changes and recompile
-gofront <input> -o out.js --serve          watch + serve with live reload (default port 3000)
-gofront <input> -o out.js --serve --port 8080  use a custom port
-gofront <input> --source-map               append inline source map (single file or directory; multi-file packages emit per-file mappings)
-gofront <input> --minify                   minify output (built-in minifier)
-gofront <input> --minify --mangle          minify and rename local identifiers
-gofront <file.go> --ast                    dump AST (debug)
-gofront <file.go> --tokens                 dump tokens (debug)
-gofront init [dir]                         scaffold a new project
-gofront --version / -v                     print version
-gofront --help / -h                        print this help
+gofront dev [dir]                            watch + compile + asset sync + live reload (default port 3000)
+gofront dev [dir] --port 8080                use a custom port
+gofront build [dir]                          clean + compile + minify + vendor → production output
+gofront build [dir] --pwa                    also generate offline service worker (sw.js) + precache manifest
+gofront build [dir] --source-map             include inline source maps in the release bundle
+gofront build [dir] --no-minify              skip minification
+gofront build [dir] --no-mangle              minify but keep original identifiers
+gofront prep [dir] [--minify]                run asset copying + vendor bundling only (alias: gofront vendor)
+gofront check <dir>                          type-check a single package
+gofront check <dir>/...                      type-check every package under <dir> (Go-style `./...`)
+gofront test <dir> [--dom]                   run tests for a single package
+gofront test <dir>/... [--dom] [-v] [-run <regex>]  run tests recursively
+gofront <file.go>                            compile single file → stdout
+gofront <dir>                                compile all *.go in directory → stdout
+gofront <input> -o out.js                    write output to file (prints elapsed compile time)
+gofront <input> -o out.js --copy-assets      compile + copy static assets
+gofront <input> --check                      type-check only (single file / directory)
+gofront <input> --watch                      watch for changes and recompile
+gofront <input> -o out.js --serve            watch + serve with live reload (legacy; prefer gofront dev)
+gofront <input> --source-map                 append inline source map
+gofront <input> --minify                     minify output (built-in minifier)
+gofront <input> --minify --mangle            minify and rename local identifiers
+gofront <file.go> --ast                      dump AST (debug)
+gofront <file.go> --tokens                   dump tokens (debug)
+gofront init [dir]                           scaffold a new project
+gofront --version / -v                       print version
+gofront --help / -h                          print this help
 ```
 ### Project configuration
 
@@ -574,6 +606,7 @@ signatures into GoFront's internal type representation.
 | `os` | `Exit`, `Args`, `Getenv` |
 | `io` | `Writer`, `Reader`, `ReadWriter`, `Closer` interface types; `ReadAll`, `EOF`, `Discard`, `WriteString` |
 | `gom` | Browser-native declarative DOM component library. **Types**: `Node` (interface), `NodeFunc`, `Group`. **Core**: `El(tag, children...)`, `Text(s)`, `Mount(sel, node)`, `MountTo(sel, node)`. **Attributes**: `Attr`, `Class`, `Href`, `Type`, `Src`, `Placeholder`, `DataAttr`, `Style`, `For`, `Name`, `Value`, `Target`, `Rel`, `Alt`, `Title`, `Draggable`, `Role`, `AriaLabel`, `StyleAttr`; boolean: `Disabled`, `Checked`, `Selected`, `Readonly`. **Logic**: `If(cond, node)`, `Map(slice, fn)`. **Elements**: full HTML element set (`Div`, `Span`, `Button`, `Input`, `Ul`, `Li`, `Table`, `Form`, `Img`, `A`, `H1`–`H6`, …) |
+| `testing` | **`testing.T`**: `Error`, `Errorf`, `Fatal`, `Fatalf`, `Fail`, `Failed`, `FailNow`, `Log`, `Logf`, `Skip`, `Skipf`, `Skipped`, `Helper`, `Run`, `Name`. **Package functions**: `Short()`, `Verbose()`. Tests are `func TestXxx(t *testing.T)` in `*_test.go` files, excluded from normal compilation and run via `gofront test`. |
 
 ### Packages & imports
 
@@ -604,7 +637,7 @@ These features are intentional additions for the JavaScript platform:
 | Feature | Purpose |
 |---|---|
 | `async func` / `await` | First-class async syntax for frontend work. |
-| Browser globals (`document`, `console`, etc.) | Predeclared as `any` for practical DOM access. |
+| Browser globals (`document`, `console`, etc.) | Predeclared as `any` for practical DOM access. `WebGL2RenderingContext`, `WebGLRenderingContext`, `GPUDevice`, `GPUAdapter`, `GPUQueue`, `ArrayBuffer`, `DataView`, and TypedArrays have full static typings with method-level checking. |
 | `.d.ts` type imports (`import "js:./types.d.ts"`) | Type-safe interop with JavaScript libraries. |
 | npm package resolution | Import types from `node_modules/` and `@types/` automatically. |
 
@@ -646,28 +679,33 @@ you know exactly what to expect.
 
 See [`docs/roadmap.md`](docs/roadmap.md) for the full roadmap and release history.
 Design documents for planned features are organised by release under `docs/v*/`
-(e.g. [`docs/v0.0.8/`](docs/v0.0.8/), [`docs/v0.0.9/`](docs/v0.0.9/)).
+(e.g. [`docs/v0.0.8/`](docs/v0.0.8/), [`docs/v1.2.0/`](docs/v1.2.0/), [`docs/v1.3.0/`](docs/v1.3.0/)).
 
 ---
 
 ## Tests
 
 ```sh
-npm run test:unit   # unit tests only (~1100 tests, no browser required)
-npm run test:e2e    # E2E tests (Playwright, headless Chromium)
-npm run test:all    # both
+npm run test:unit          # unit tests only (~1400 tests, no browser required)
+npm run test:perf          # zero-allocation benchmark (100k ray-triangle intersections, 0 bytes/frame)
+npm run test:examples      # GoFront-native unit tests across all example apps
+npm run test:examples:dom  # same, with JSDOM for DOM/gom/templ component testing
+npm run test:e2e           # E2E tests (Playwright, headless Chromium)
+npm run test:all           # all of the above
 ```
 
-**Unit tests** (~1118) cover language features, type errors, edge cases, DOM (jsdom),
+**Unit tests** (~1,396) cover language features, type errors, edge cases, DOM (jsdom),
 external `.d.ts`, npm resolver, multi-file compilation, embedded structs, string
 formatting, map iteration order, integer overflow semantics, unused variable detection,
 unused import detection, semantic difference verification, stdlib shim packages, generics,
-and `.templ` file compilation (element rendering, interpolation, boolean attrs, component
-calls, `if/else/else-if` chains, `for range`, `switch/case/default`, `@templ.Raw()` raw
-HTML injection, mixed `.go`+`.templ` packages).
+the `testing` framework itself, and `.templ` file compilation (element rendering,
+interpolation, boolean attrs, component calls, `if/else/else-if` chains, `for range`,
+`switch/case/default`, `@templ.Raw()` raw HTML injection, SVG namespace handling, mixed
+`.go`+`.templ` packages).
 
-**E2E tests** (~104, Playwright) run all four example apps in a real browser and verify
+**E2E tests** (~104, Playwright) run all five example apps in a real browser and verify
 CRUD, filtering, priority mode, persistence (reload), drag-and-drop reordering, and sync
 status. Per-app suites check app-specific behaviour: scoped styles, stats bar, loading
-placeholder, `gom.If` conditional rendering, and templ-specific features (`if/else`
-priority hint, `for` loop rendering, conditional bool attributes).
+placeholder, `gom.If` conditional rendering, templ-specific features (`if/else`
+priority hint, `for` loop rendering, conditional bool attributes), and the WebGL2 cube
+rendering.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gofront",
-	"version": "1.3.10",
+	"version": "1.3.12",
 	"author": "Luuk van Venrooij",
 	"license": "MIT",
 	"repository": {

package/src/asset-manager.js

@@ -11,6 +11,7 @@ import {
 	resolve,
 	sep,
 } from "node:path";
+import { log } from "./colors.js";
 import { loadProjectConfig } from "./project-config.js";
 
 export function loadAssetConfig(projectDir) {
@@ -50,7 +51,7 @@ function copyAssetEntry(entry, projectRoot) {
 
 	const srcPath = resolve(projectRoot, source);
 	if (!existsSync(srcPath)) {
-		console.warn(`gofront: asset source '${source}' not found — skipping`);
+		log.warn(`asset source '${source}' not found — skipping`);
 		return {
 			status: "skipped",
 			item: { source, dest, status: "skipped", reason: "source not found" },
@@ -73,7 +74,7 @@ function copyAssetEntry(entry, projectRoot) {
 			item: { source, dest: targetFile, type: "file", status: "copied" },
 		};
 	} catch (err) {
-		console.warn(`gofront: failed to copy asset '${source}': ${err.message}`);
+		log.warn(`failed to copy asset '${source}': ${err.message}`);
 		return {
 			status: "failed",
 			item: { source, dest, status: "failed", reason: err.message },

package/src/cli-core.js

@@ -23,6 +23,7 @@ import {
 	sep,
 } from "node:path";
 import { copyAssets } from "./asset-manager.js";
+import { colors, log } from "./colors.js";
 import { compileDir, compileSingleFile } from "./compiler.js";
 import { createDevServer } from "./dev-server.js";
 import { minify } from "./minifier.js";
@@ -685,7 +686,7 @@ export async function handleBuild(targetDir = ".", options = {}) {
 			dest: join(outDir, "vendor.js"),
 		});
 	} catch (e) {
-		console.warn(`gofront: vendor bundle warning: ${e.message}`);
+		log.warn(`vendor bundle: ${e.message}`);
 	}
 
 	const assets = copyReleaseAssets(
@@ -755,11 +756,12 @@ function buildDevOnce(
 		writeFileSync(outputFile, `${result.js}\n`);
 		const elapsedMs = (performance.now() - startMs).toFixed(0);
 		const note = changedFile ? ` — ${changedFile} changed` : "";
-		console.error(`gofront: OK — wrote ${outputFile} (${elapsedMs}ms${note})`);
+		log.ok(
+			`— wrote ${colors.cyan(outputFile)} ${colors.dim(`(${elapsedMs}ms${note})`)}`,
+		);
 		devServer.notify();
 	} catch (e) {
-		console.error("gofront: ERROR");
-		for (const line of e.message.split("\n")) console.error(`  ${line}`);
+		log.error(e.message);
 		devServer.notifyError(e);
 	}
 }

package/src/codegen/index.js

@@ -208,8 +208,22 @@ export class CodeGen {
 		this._emitVarConstDecls(program);
 		const initNames = this._emitFuncDecls(program);
 		this._callInitAndMain(initNames, program, isTest);
-		this._prependHelpers(isTest);
-		while (this.out[0] === "") this.out.shift();
+		const prependedLines = this._prependHelpers(isTest);
+		return this._finalizeOutput(prependedLines);
+	}
+
+	_finalizeOutput(prependedLines) {
+		let shiftedLines = 0;
+		while (this.out[0] === "") {
+			this.out.shift();
+			shiftedLines++;
+		}
+		const netShift = prependedLines - shiftedLines;
+		if (netShift !== 0) {
+			for (const m of this._srcMappings) {
+				m.genLine = Math.max(0, m.genLine + netShift);
+			}
+		}
 		return this.out.join("\n");
 	}
 
@@ -385,7 +399,13 @@ export class CodeGen {
 			[needsTesting, HELPER_TESTING],
 		];
 		const helpers = HELPER_MAP.filter(([flag]) => flag).map(([, h]) => h);
-		if (helpers.length > 0) this.out.unshift(...helpers, "");
+		if (helpers.length > 0) {
+			const helperLines = helpers.flatMap((h) => h.split("\n"));
+			helperLines.push("");
+			this.out.unshift(...helperLines);
+			return helperLines.length;
+		}
+		return 0;
 	}
 
 	// Generate a single bundle from multiple programs (same-package multi-file).
@@ -400,6 +420,10 @@ export class CodeGen {
 		return this.generate(merged, options);
 	}
 
+	getMappings() {
+		return this._srcMappings;
+	}
+
 	// Returns a source map JSON string for the last generate() call.
 	// sources: string[] of source filenames (relative to the output file).
 	// sourcesContent: string[] of original file contents (embedded for DevTools breakpoints).
@@ -581,9 +605,11 @@ export class CodeGen {
 	}
 
 	genMethod(decl, recvField = null) {
+		const prevFileIdx = this._currentSrcFileIdx;
+		if (decl._srcFileIdx != null) this._currentSrcFileIdx = decl._srcFileIdx;
 		const params = decl.params.map((p) => p.name).join(", ");
 		const asyncPrefix = decl.async ? "async " : "";
-		this.line(`${asyncPrefix}${decl.name}(${params}) {`);
+		this.line(`${asyncPrefix}${decl.name}(${params}) {`, decl._line ?? null);
 		const prevBoxed = this._boxedVars;
 		this._boxedVars = new Set();
 		this._scanAddressTaken(decl.body);
@@ -605,6 +631,7 @@ export class CodeGen {
 		this._unwrappedRecv = prevUnwrapped;
 		this._boxedVars = prevBoxed;
 		this.line("}");
+		this._currentSrcFileIdx = prevFileIdx;
 	}
 
 	// Value receivers are copies in Go; only materialize the copy when the body mutates it.
@@ -648,10 +675,7 @@ export class CodeGen {
 			.join(", ");
 		const asyncPrefix = decl.async ? "async " : "";
 		const srcLine = decl._line ?? null;
-		this.line(
-			`${asyncPrefix}function ${name}(${params}) {`,
-			srcLine ? srcLine - 1 : null,
-		);
+		this.line(`${asyncPrefix}function ${name}(${params}) {`, srcLine);
 		const prevBoxed = this._boxedVars;
 		this._boxedVars = new Set();
 		this._scanAddressTaken(decl.body);

package/src/codegen/source-map.js

@@ -25,7 +25,10 @@ export function buildSourceMap(sources, mappings, sourcesContent) {
 	let prevSrcLine = 0;
 	let prevSrcFile = 0;
 	const maxGen = mappings.reduce((m, e) => Math.max(m, e.genLine), -1);
-	const byLine = new Map(mappings.map((e) => [e.genLine, e]));
+	const byLine = new Map();
+	for (const m of mappings) {
+		if (!byLine.has(m.genLine)) byLine.set(m.genLine, m);
+	}
 	for (let g = 0; g <= maxGen; g++) {
 		const entry = byLine.get(g);
 		if (entry) {
@@ -47,7 +50,7 @@ export function buildSourceMap(sources, mappings, sourcesContent) {
 	}
 	const map = {
 		version: 3,
-		sources,
+		sources: sources.map((s) => s.replace(/\\/g, "/")),
 		names: [],
 		mappings: lines.join(";"),
 	};

package/src/codegen/statements.js

@@ -96,7 +96,11 @@ export const statementGenMethods = {
 		}
 		// Record source mapping: first output line this statement produced
 		if (srcLine != null && this.out.length > _line0) {
-			this._srcMappings.push({ genLine: _line0, srcLine: srcLine - 1 });
+			this._srcMappings.push({
+				genLine: _line0,
+				srcLine: srcLine - 1,
+				srcFileIdx: this._currentSrcFileIdx,
+			});
 		}
 	},
 

package/src/codegen/stdlib/gom.js

@@ -146,9 +146,9 @@ export const gomMethods = {
 			case "Style":
 				return `((s)=>({Mount(p){const e=document.createElement("style");e.textContent=s;p.appendChild(e);}})) (${args[0]})`;
 			case "Mount":
-				return `((sel,n)=>{const e=document.querySelector(sel);e.innerHTML="";n.Mount(e)})(${args[0]},${args[1]})`;
+				return `((sel,n,r)=>{const e=document.querySelector(sel);e.innerHTML="";n.Mount(e,r)})(${args[0]},${args[1]},${args[2] ?? "undefined"})`;
 			case "MountTo":
-				return `((sel,n)=>{const e=document.querySelector(sel);n.Mount(e)})(${args[0]},${args[1]})`;
+				return `((sel,n,r)=>{const e=document.querySelector(sel);n.Mount(e,r)})(${args[0]},${args[1]},${args[2] ?? "undefined"})`;
 		}
 		return undefined;
 	},

package/src/codegen/templ.js

@@ -17,7 +17,7 @@ export const templGenMethods = {
 			.join(", ");
 		this.line(`function ${decl.name}(${params}) {`);
 		this.indented(() => {
-			this.line(`return {Mount(___p) {`);
+			this.line(`return {Mount(___p, ___refs) {`);
 			this.indented(() => {
 				this._genTemplNodes(decl.body, "___p");
 			});
@@ -85,7 +85,7 @@ export const templGenMethods = {
 			return this.line(`${p}.insertAdjacentHTML("beforeend", ${argJs});`);
 		}
 		return this.line(
-			`(${this._genTemplTokenCallExpr(node.tokens)}).Mount(${p});`,
+			`(${this._genTemplTokenCallExpr(node.tokens)}).Mount(${p}, ___refs);`,
 		);
 	},
 
@@ -119,7 +119,10 @@ export const templGenMethods = {
 			isSvg
 				? `${el}.setAttribute("class", ${js});`
 				: `${el}.className = ${js};`;
-		if (attr.kind === "static") {
+		if (attr.kind === "ref") {
+			// ref="key" — capture element into the refs map at mount time
+			this.line(`if(___refs)___refs[${JSON.stringify(attr.value)}]=${el};`);
+		} else if (attr.kind === "static") {
 			if (name === "class") {
 				this.line(setClass(JSON.stringify(attr.value)));
 			} else {

package/src/colors.js

@@ -0,0 +1,81 @@
+// ANSI color helpers for CLI output. Honours NO_COLOR / FORCE_COLOR and
+// otherwise only colors when the target stream is a TTY.
+
+export function colorEnabled(stream = process.stderr) {
+	if ("NO_COLOR" in process.env) return false;
+	const force = process.env.FORCE_COLOR;
+	if (force !== undefined) return force !== "0" && force !== "false";
+	return Boolean(stream?.isTTY);
+}
+
+const CODES = {
+	red: 31,
+	green: 32,
+	yellow: 33,
+	blue: 34,
+	magenta: 35,
+	cyan: 36,
+	gray: 90,
+	bold: 1,
+	dim: 2,
+};
+
+export function createColors(enabled) {
+	const c = {};
+	for (const [name, code] of Object.entries(CODES)) {
+		c[name] = enabled ? (s) => `\x1b[${code}m${s}\x1b[0m` : (s) => `${s}`;
+	}
+	c.enabled = enabled;
+	return c;
+}
+
+export const colors = createColors(colorEnabled(process.stderr));
+
+const DIAG_LABEL = /^(Lex error|Parse error|Type error)(\b.*?)(:\s)/;
+const GUTTER = /^(\s*\d+ \| )(.*)$/;
+const CARET = /^(\s*)(\^+)$/;
+
+// Colorizes a compiler diagnostic: red label, dimmed source gutter, red caret.
+export function formatDiagnostic(message, c = colors) {
+	if (!c.enabled) return message;
+	return message
+		.split("\n")
+		.map((line) => {
+			const label = line.match(DIAG_LABEL);
+			if (label) {
+				return `${c.bold(c.red(label[1]))}${c.dim(label[2])}${label[3]}${line.slice(label[0].length)}`;
+			}
+			const gutter = line.match(GUTTER);
+			if (gutter) return `${c.dim(gutter[1])}${gutter[2]}`;
+			const caret = line.match(CARET);
+			if (caret) return `${caret[1]}${c.bold(c.red(caret[2]))}`;
+			if (/^warning:/i.test(line.trim())) return c.yellow(line);
+			return line;
+		})
+		.join("\n");
+}
+
+// Standard CLI log helpers writing to stderr with a colored `gofront:` prefix.
+const prefix = () => colors.bold("gofront:");
+const isDiagnostic = (msg) => DIAG_LABEL.test(msg) || msg.includes("\n");
+
+export const log = {
+	info: (msg) => console.error(`${prefix()} ${msg}`),
+	ok: (msg) =>
+		console.error(`${prefix()} ${colors.green("OK")}${msg ? ` ${msg}` : ""}`),
+	warn: (msg) =>
+		console.error(`${prefix()} ${colors.yellow(`warning: ${msg}`)}`),
+	error: (msg) => {
+		console.error(`${prefix()} ${colors.bold(colors.red("ERROR"))}`);
+		for (const line of formatDiagnostic(msg).split("\n"))
+			console.error(`  ${line}`);
+	},
+	// Compiler diagnostics get the block form; anything else is one red line.
+	fail: (msg) =>
+		isDiagnostic(msg)
+			? log.error(msg)
+			: console.error(`${prefix()} ${colors.red(msg)}`),
+};
+
+export const stamp = () => colors.dim(`[${new Date().toLocaleTimeString()}]`);
+export const ms = (n) => colors.dim(`(${n}ms)`);

package/src/compiler.js

@@ -20,6 +20,8 @@
 import { readdirSync, readFileSync, statSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { CodeGen } from "./codegen/index.js";
+import { buildSourceMap } from "./codegen/source-map.js";
+import { log } from "./colors.js";
 import { parseDts } from "./dts-parser.js";
 import { Lexer } from "./lexer.js";
 import { Parser } from "./parser/index.js";
@@ -73,6 +75,87 @@ export function gwFilesIn(dir, { includeTests = false } = {}) {
 		.map((f) => join(dir, f));
 }
 
+function normalizeChunk(c) {
+	if (typeof c === "string") {
+		return { js: c, sourceFiles: [], sourcesContent: [], mappings: [] };
+	}
+	return c;
+}
+
+function appendChunkMappings(dest, mappings, localToUnifiedIdx, lineOffset) {
+	if (!mappings) return;
+	for (const m of mappings) {
+		dest.push({
+			genLine: m.genLine + lineOffset,
+			srcLine: m.srcLine,
+			srcFileIdx: localToUnifiedIdx[m.srcFileIdx ?? 0] ?? 0,
+		});
+	}
+}
+
+function mergeCompilationChunks(chunks) {
+	const activeChunks = chunks
+		.filter(Boolean)
+		.map(normalizeChunk)
+		.filter((c) => c.js.length > 0);
+
+	if (activeChunks.length === 0) {
+		return { js: "", sourceFiles: [], sourcesContent: [], mappings: [] };
+	}
+
+	const unifiedSources = [];
+	const unifiedSourcesContent = [];
+	const fileIdxMap = new Map();
+
+	function getOrAddFile(filePath, content) {
+		const key = resolve(filePath);
+		let idx = fileIdxMap.get(key);
+		if (idx === undefined) {
+			idx = unifiedSources.length;
+			fileIdxMap.set(key, idx);
+			unifiedSources.push(key);
+			unifiedSourcesContent.push(content);
+		}
+		return idx;
+	}
+
+	const combinedJsParts = [];
+	const mergedMappings = [];
+	let currentLineOffset = 0;
+
+	for (const chunk of activeChunks) {
+		combinedJsParts.push(chunk.js);
+		const localToUnifiedIdx = (chunk.sourceFiles ?? []).map((file, i) =>
+			getOrAddFile(file, chunk.sourcesContent?.[i] ?? ""),
+		);
+		appendChunkMappings(
+			mergedMappings,
+			chunk.mappings,
+			localToUnifiedIdx,
+			currentLineOffset,
+		);
+		currentLineOffset += chunk.js.split("\n").length;
+	}
+
+	return {
+		js: combinedJsParts.join("\n"),
+		sourceFiles: unifiedSources,
+		sourcesContent: unifiedSourcesContent,
+		mappings: mergedMappings,
+	};
+}
+
+function attachSourceMap(merged, outputDir) {
+	const relativeSources = merged.sourceFiles.map((f) => relative(outputDir, f));
+	const mapJson = buildSourceMap(
+		relativeSources,
+		merged.mappings,
+		merged.sourcesContent,
+	);
+	const b64 = Buffer.from(mapJson).toString("base64");
+	merged.js += `\n//# sourceMappingURL=data:application/json;base64,${b64}`;
+}
+
 // ── Import resolution ─────────────────────────────────────────
 //
 // Shared by compileFiles (multi-file) and the single-file path in index.js.
@@ -86,6 +169,7 @@ export function resolveImports(
 	bundledPackages,
 	preambles,
 	bundledDirs = new Set(),
+	options = {},
 ) {
 	const fromDir = dirname(resolve(fromFile));
 	const allImports = programs.flatMap((p) => p.imports);
@@ -126,8 +210,8 @@ export function resolveImports(
 				seenLocalPaths.add(path);
 				const depDir = resolveGwDir(path, fromFile);
 				if (!depDir) {
-					console.error(
-						`gofront: warning: cannot find local package '${path}' relative to ${fromDir}`,
+					log.warn(
+						`cannot find local package '${path}' relative to ${fromDir}`,
 					);
 					continue;
 				}
@@ -136,8 +220,12 @@ export function resolveImports(
 				const depKey = resolve(depDir);
 				const alreadyBundled = bundledDirs.has(depKey);
 				bundledDirs.add(depKey);
-				const dep = compileDir(depDir, { bundledDirs });
-				if (!alreadyBundled) preambles.push(dep.js);
+				const dep = compileDir(depDir, {
+					...options,
+					bundledDirs,
+					isDependency: true,
+				});
+				if (!alreadyBundled) preambles.push(dep);
 				if (alias === "_") continue;
 				if (alias === ".") {
 					checker.addDefinitions(dep.exportedTypes, dep.exportedSymbols);
@@ -180,6 +268,10 @@ export function compileSingleFile(inputPath, options = {}) {
 	ast._source = source;
 	if (dumpAst) return { ast };
 
+	const outputDir =
+		options.outputDir ??
+		(outputFile ? dirname(resolve(outputFile)) : resolve("."));
+
 	const checker = new TypeChecker();
 	const jsImports = new Map();
 	const bundledPackages = new Set();
@@ -192,6 +284,8 @@ export function compileSingleFile(inputPath, options = {}) {
 		jsImports,
 		bundledPackages,
 		preambles,
+		options.bundledDirs ?? new Set(),
+		{ ...options, outputDir },
 	);
 
 	const errors = checker.check(ast);
@@ -201,18 +295,22 @@ export function compileSingleFile(inputPath, options = {}) {
 	}
 
 	const cg = new CodeGen(checker, jsImports, bundledPackages);
-	let js = cg.generate(ast);
-
-	if (sourceMap) {
-		const outputDir = outputFile ? dirname(resolve(outputFile)) : resolve(".");
-		const srcPath = relative(outputDir, inputPath);
-		const map = cg.getSourceMap(srcPath, [source]);
-		const b64 = Buffer.from(map).toString("base64");
-		js += `\n//# sourceMappingURL=data:application/json;base64,${b64}`;
+	const mainJs = cg.generate(ast);
+
+	const mainChunk = {
+		js: mainJs,
+		sourceFiles: [resolve(inputPath)],
+		sourcesContent: [source],
+		mappings: cg.getMappings(),
+	};
+
+	const merged = mergeCompilationChunks([...preambles, mainChunk]);
+
+	if (sourceMap && !options.isDependency) {
+		attachSourceMap(merged, outputDir);
 	}
 
-	const output = preambles.length > 0 ? `${preambles.join("\n")}\n${js}` : js;
-	return { js: output };
+	return { js: merged.js };
 }
 
 export function compileDir(dir, options = {}) {
@@ -229,6 +327,9 @@ export function compilePackageTests(dir, options = {}) {
 
 export function compileFiles(files, options = {}) {
 	const fromDir = options.fromDir ?? dirname(resolve(files[0]));
+	const outputDir =
+		options.outputDir ??
+		(options.outputFile ? dirname(resolve(options.outputFile)) : fromDir);
 
 	// ── 1. Parse ─────────────────────────────────────────────────
 	const parseErrors = [];
@@ -256,7 +357,7 @@ export function compileFiles(files, options = {}) {
 	const checker = new TypeChecker();
 	const jsImports = new Map(); // npm imports → exported names (for ESM emit)
 	const bundledPackages = new Set(); // package names whose code is inlined
-	const preambles = []; // JS code from compiled sub-packages
+	const preambles = []; // JS code / chunks from compiled sub-packages
 
 	const dummyFromFile = join(fromDir, "_dummy.go");
 	resolveImports(
@@ -267,6 +368,7 @@ export function compileFiles(files, options = {}) {
 		bundledPackages,
 		preambles,
 		options.bundledDirs ?? new Set(),
+		{ ...options, outputDir },
 	);
 
 	// ── 3. Type-check ─────────────────────────────────────────────
@@ -283,22 +385,27 @@ export function compileFiles(files, options = {}) {
 		isTest: options.isTest ?? false,
 	});
 
-	let js = preambles.length > 0 ? `${preambles.join("\n")}\n${mainJs}` : mainJs;
+	const mainChunk = {
+		js: mainJs,
+		sourceFiles: files.map((f) => resolve(f)),
+		sourcesContent: files.map((f) => readFileSync(f, "utf8")),
+		mappings: codegen.getMappings(),
+	};
+
+	const merged = mergeCompilationChunks([...preambles, mainChunk]);
 
-	if (options.sourceMap) {
-		const outputDir = options.outputDir ?? fromDir;
-		const sourceFiles = files.map((f) => relative(outputDir, f));
-		const sourcesContent = files.map((f) => readFileSync(f, "utf8"));
-		const map = codegen.getSourceMap(sourceFiles, sourcesContent);
-		const b64 = Buffer.from(map).toString("base64");
-		js += `\n//# sourceMappingURL=data:application/json;base64,${b64}`;
+	if (options.sourceMap && !options.isDependency) {
+		attachSourceMap(merged, outputDir);
 	}
 
 	return {
 		pkgName,
-		js,
+		js: merged.js,
 		programs,
 		exportedSymbols: checker.getExportedSymbols(),
 		exportedTypes: checker.getExportedTypes(),
+		sourceFiles: merged.sourceFiles,
+		sourcesContent: merged.sourcesContent,
+		mappings: merged.mappings,
 	};
 }

package/src/dev-server.js

@@ -4,6 +4,7 @@
 import { existsSync, readFileSync, statSync } from "node:fs";
 import { createServer } from "node:http";
 import { extname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { colors, log } from "./colors.js";
 
 export const MIME = {
 	".html": "text/html; charset=utf-8",
@@ -275,9 +276,9 @@ function createNotify(clients) {
 
 function handleServerError(err, port) {
 	if (err.code === "EADDRINUSE") {
-		console.error(`gofront: port ${port} already in use — try --port <number>`);
+		log.fail(`port ${port} already in use — try --port <number>`);
 	} else {
-		console.error(`gofront: dev server error: ${err.message}`);
+		log.fail(`dev server error: ${err.message}`);
 	}
 	process.exit(1);
 }
@@ -327,7 +328,7 @@ export function createDevServer(serveDir, port = 3000, options = {}) {
 	server.listen(port, host, () => {
 		const actualPort = server.address()?.port ?? port;
 		if (port !== 0 && !options.silent) {
-			console.error(`gofront: dev server → http://localhost:${actualPort}`);
+			log.info(`dev server → ${colors.cyan(`http://localhost:${actualPort}`)}`);
 		}
 	});
 

package/src/index.js

@@ -38,6 +38,7 @@ import {
 	parseTestArgs,
 	runCompile,
 } from "./cli-core.js";
+import { colors, formatDiagnostic, log, ms, stamp } from "./colors.js";
 import { createDevServer } from "./dev-server.js";
 
 // ── Parse CLI args ───────────────────────────────────────────
@@ -85,10 +86,9 @@ if (args[0] === "prep" || args[0] === "vendor") {
 	const { targetDir, vendorConfig } = parsePrepArgs(args.slice(1));
 	try {
 		const result = await handlePrep(resolve(targetDir), { vendorConfig });
-		for (const line of formatPrepSummary(result))
-			console.error(`gofront: ${line}`);
+		for (const line of formatPrepSummary(result)) log.info(line);
 	} catch (e) {
-		console.error(`gofront: ${e.message}`);
+		log.fail(e.message);
 		process.exit(1);
 	}
 	process.exit(0);
@@ -103,12 +103,12 @@ if (args[0] === "init") {
 	try {
 		({ mainPath } = handleInit(targetDir));
 	} catch (e) {
-		console.error(`gofront: ${e.message}`);
+		log.fail(e.message);
 		process.exit(1);
 	}
-	console.error(`gofront: created ${mainPath}`);
-	console.error(
-		`gofront: run  gofront ${targetArg === "." ? "main.go" : `${targetArg}/main.go`}  to compile`,
+	log.info(`created ${colors.cyan(mainPath)}`);
+	log.info(
+		`run  ${colors.cyan(`gofront ${targetArg === "." ? "main.go" : `${targetArg}/main.go`}`)}  to compile`,
 	);
 	process.exit(0);
 }
@@ -121,7 +121,7 @@ if (args[0] === "test") {
 		const result = await handleTest(targetDir, testOptions);
 		process.exit(result.exitCode);
 	} catch (e) {
-		console.error(`gofront: ${e.message}`);
+		log.fail(e.message);
 		process.exit(1);
 	}
 }
@@ -132,21 +132,21 @@ if (args[0] === "check") {
 	const { targetDir } = parseCheckArgs(args.slice(1));
 	try {
 		const { elapsedMs, packages } = handleCheck(targetDir);
+		const okLine = (label, t) =>
+			log.info(`${colors.cyan(label)} — ${colors.green("OK")} ${ms(t)}`);
 		if (packages) {
 			for (const pkg of packages) {
-				console.error(
-					`gofront: ${relative(process.cwd(), pkg.dir) || "."} — OK (${pkg.elapsedMs}ms)`,
-				);
+				okLine(relative(process.cwd(), pkg.dir) || ".", pkg.elapsedMs);
 			}
-			console.error(
-				`gofront: ${packages.length} packages — OK (${elapsedMs}ms)`,
+			log.info(
+				`${colors.bold(`${packages.length} packages`)} — ${colors.bold(colors.green("OK"))} ${ms(elapsedMs)}`,
 			);
 		} else {
-			console.error(`gofront: ${targetDir} — OK (${elapsedMs}ms)`);
+			okLine(targetDir, elapsedMs);
 		}
 		process.exit(0);
 	} catch (e) {
-		console.error(`gofront: ${e.message}`);
+		log.fail(e.message);
 		process.exit(1);
 	}
 }
@@ -158,11 +158,15 @@ if (args[0] === "build") {
 	try {
 		const result = await handleBuild(buildOptions.targetDir, buildOptions);
 		for (const line of formatBuildSummary(result)) {
-			console.error(`gofront: ${line}`);
+			log.info(
+				line
+					.replace(/^build complete/, colors.green("build complete"))
+					.replace(/\(([\d.]+ kB)\)$/, (_, s) => colors.dim(`(${s})`)),
+			);
 		}
 		process.exit(0);
 	} catch (e) {
-		console.error(`gofront: ${e.message}`);
+		log.fail(e.message);
 		process.exit(1);
 	}
 }
@@ -174,14 +178,14 @@ if (args[0] === "dev") {
 	try {
 		const dev = await handleDev(devOptions.targetDir, devOptions);
 		if (dev.initialError) {
-			console.error("gofront: ERROR");
-			for (const line of dev.initialError.message.split("\n"))
-				console.error(`  ${line}`);
+			log.error(dev.initialError.message);
 		} else {
-			console.error(`gofront: OK — wrote ${dev.outputFile}`);
+			log.ok(`— wrote ${colors.cyan(dev.outputFile)}`);
 		}
-		console.error(`gofront: dev server running → http://localhost:${dev.port}`);
-		console.error(`gofront: watching ${dev.srcDir} for changes...`);
+		log.info(
+			`dev server running → ${colors.cyan(`http://localhost:${dev.port}`)}`,
+		);
+		log.info(`watching ${colors.cyan(dev.srcDir)} for changes...`);
 
 		const shutdown = async () => {
 			await dev.close();
@@ -191,7 +195,7 @@ if (args[0] === "dev") {
 		process.on("SIGTERM", shutdown);
 		await new Promise(() => {});
 	} catch (e) {
-		console.error(`gofront: ${e.message}`);
+		log.fail(e.message);
 		process.exit(1);
 	}
 }
@@ -218,7 +222,7 @@ let isDir = false;
 try {
 	isDir = statSync(inputPath).isDirectory();
 } catch (e) {
-	console.error(`gofront: cannot access '${inputArg}': ${e.message}`);
+	log.fail(`cannot access '${inputArg}': ${e.message}`);
 	process.exit(1);
 }
 
@@ -235,7 +239,7 @@ if (!watchMode) {
 			dumpAst,
 		});
 	} catch (e) {
-		console.error(`gofront: ${e.message}`);
+		log.fail(e.message);
 		process.exit(1);
 	}
 
@@ -250,7 +254,9 @@ if (!watchMode) {
 
 	if (checkOnly) {
 		const elapsedMs = (performance.now() - startMs).toFixed(0);
-		console.error(`gofront: ${inputArg} — OK (${elapsedMs}ms)`);
+		log.info(
+			`${colors.cyan(inputArg)} — ${colors.green("OK")} ${ms(elapsedMs)}`,
+		);
 		process.exit(0);
 	}
 
@@ -262,7 +268,7 @@ if (!watchMode) {
 			sourceMap,
 		});
 	} catch (e) {
-		console.error(`gofront: minify failed: ${e.message}`);
+		log.fail(`minify failed: ${e.message}`);
 		process.exit(1);
 	}
 
@@ -272,9 +278,9 @@ if (!watchMode) {
 		try {
 			mkdirSync(dirname(resolve(outputFile)), { recursive: true });
 			writeFileSync(outputFile, `${js}\n`);
-			console.error(`gofront: wrote ${outputFile} (${elapsedMs}ms)`);
+			log.info(`wrote ${colors.cyan(outputFile)} ${ms(elapsedMs)}`);
 		} catch (e) {
-			console.error(`gofront: cannot write '${outputFile}': ${e.message}`);
+			log.fail(`cannot write '${outputFile}': ${e.message}`);
 			process.exit(1);
 		}
 	} else {
@@ -286,10 +292,10 @@ if (!watchMode) {
 			const projectDir = resolve(".");
 			const { copied, skipped } = copyAssets(projectDir);
 			if (copied > 0 || skipped > 0) {
-				console.error(`gofront: copied ${copied} assets (${skipped} skipped)`);
+				log.info(`copied ${copied} assets (${skipped} skipped)`);
 			}
 		} catch (e) {
-			console.error(`gofront: asset copy failed: ${e.message}`);
+			log.warn(`asset copy failed: ${e.message}`);
 		}
 	}
 
@@ -298,15 +304,11 @@ if (!watchMode) {
 
 // ── Watch mode ───────────────────────────────────────────────
 
-function timestamp() {
-	return new Date().toLocaleTimeString();
-}
-
 // Start dev server before first build so the browser can connect immediately
 let devServer = null;
 if (serveMode) {
 	if (!outputFile) {
-		console.error("gofront: --serve requires -o <output file>");
+		log.fail("--serve requires -o <output file>");
 		process.exit(1);
 	}
 	const serveDir = dirname(resolve(outputFile));
@@ -324,17 +326,18 @@ function buildOnce(changedFile = null) {
 		});
 		const elapsedMs = (performance.now() - startMs).toFixed(0);
 		const changeNote = changedFile ? ` — ${changedFile} changed` : "";
+		const timing = colors.dim(`(${elapsedMs}ms${changeNote})`);
 		if (outputFile) {
 			writeFileSync(outputFile, `${js}\n`);
 			console.error(
-				`[${timestamp()}] gofront: OK — wrote ${outputFile} (${elapsedMs}ms${changeNote})`,
+				`${stamp()} ${colors.bold("gofront:")} ${colors.green("OK")} — wrote ${colors.cyan(outputFile)} ${timing}`,
 			);
 		} else {
 			// Clear screen then print
 			process.stdout.write("\x1Bc");
 			console.log(js);
 			console.error(
-				`[${timestamp()}] gofront: OK (${elapsedMs}ms${changeNote})`,
+				`${stamp()} ${colors.bold("gofront:")} ${colors.green("OK")} ${timing}`,
 			);
 		}
 
@@ -342,14 +345,17 @@ function buildOnce(changedFile = null) {
 			try {
 				copyAssets(resolve("."));
 			} catch (e) {
-				console.error(`gofront: asset copy failed: ${e.message}`);
+				log.warn(`asset copy failed: ${e.message}`);
 			}
 		}
 
 		devServer?.notify();
 	} catch (e) {
-		console.error(`[${timestamp()}] gofront: ERROR`);
-		for (const line of e.message.split("\n")) console.error(`  ${line}`);
+		console.error(
+			`${stamp()} ${colors.bold("gofront:")} ${colors.bold(colors.red("ERROR"))}`,
+		);
+		for (const line of formatDiagnostic(e.message).split("\n"))
+			console.error(`  ${line}`);
 		devServer?.notifyError?.(e);
 	}
 }
@@ -365,7 +371,7 @@ function handleCssWatch(filename) {
 		try {
 			copyAssets(resolve("."));
 		} catch (e) {
-			console.error(`gofront: asset copy failed: ${e.message}`);
+			log.warn(`asset copy failed: ${e.message}`);
 		}
 	}
 	devServer?.notifyCss?.(filename);
@@ -385,4 +391,6 @@ watch(watchTarget, { recursive: true }, (_event, filename) => {
 	debounce = setTimeout(() => buildOnce(filename), 80);
 });
 
-console.error(`[${timestamp()}] gofront: watching ${inputArg} ...`);
+console.error(
+	`${stamp()} ${colors.bold("gofront:")} watching ${colors.cyan(inputArg)} ...`,
+);

package/src/templ-lexer.js

@@ -368,9 +368,14 @@ export class TemplLexer {
 				const exprTokens = this._readGoExprInBraces();
 				attrs.push({ kind: "expr", name: attrName, tokens: exprTokens });
 			} else if (this.peek() === '"') {
-				// Static string attribute
+				// Static string attribute (or ref capture)
 				const value = this._readQuotedString();
-				attrs.push({ kind: "static", name: attrName, value });
+				if (attrName === "ref") {
+					// ref="fieldName" — element reference capture, not a DOM attribute
+					attrs.push({ kind: "ref", value });
+				} else {
+					attrs.push({ kind: "static", name: attrName, value });
+				}
 			} else {
 				// Unquoted attribute value
 				let val = "";

package/src/test-runner.js

@@ -6,6 +6,7 @@ import { statSync } from "node:fs";
 import { createRequire } from "node:module";
 import { basename, dirname, join, resolve } from "node:path";
 import { pathToFileURL } from "node:url";
+import { colorEnabled, createColors, formatDiagnostic } from "./colors.js";
 import { compilePackageTests, gwFilesIn } from "./compiler.js";
 
 export function isTestFunc(decl) {
@@ -38,6 +39,7 @@ export function generateTestHarness(bundleJs, testNames, options = {}) {
 	const runRegex = options.run ? options.run : null;
 	const verbose = Boolean(options.verbose);
 	const dom = Boolean(options.dom);
+	const color = Boolean(options.color);
 	const pkgName = options.pkgName ?? "main";
 	// The harness runs from stdin with cwd = project dir, so a bare "jsdom"
 	// import only works if the project has it locally. Use the resolved path.
@@ -86,6 +88,12 @@ async function __runGoFrontSuite() {
   const runFilter = ${runRegex ? `new RegExp(${JSON.stringify(runRegex)})` : "null"};
   const verbose = ${verbose};
   const pkgName = ${JSON.stringify(pkgName)};
+  const paint = ${color}
+    ? (code) => (s) => "\\x1b[" + code + "m" + s + "\\x1b[0m"
+    : () => (s) => s;
+  const red = paint(31), green = paint(32), yellow = paint(33), dim = paint(2), bold = paint(1);
+  const PASS = green("PASS"), FAIL = bold(red("FAIL")), SKIP = yellow("SKIP");
+  const okLine = (name, t) => console.log(green("ok  ") + "\\t" + name + "\\t" + dim(t + "s"));
 
   const testsToRun = runFilter
     ? allTests.filter((name) => runFilter.test(name))
@@ -93,10 +101,10 @@ async function __runGoFrontSuite() {
 
   if (testsToRun.length === 0) {
     if (allTests.length > 0 && runFilter) {
-      console.log("testing: warning: no tests to run matching " + ${JSON.stringify(runRegex)});
+      console.log(yellow("testing: warning: no tests to run matching " + ${JSON.stringify(runRegex)}));
     }
-    console.log("PASS");
-    console.log("ok  \\t" + pkgName + "\\t0.000s");
+    console.log(PASS);
+    okLine(pkgName, "0.000");
     process.exit(0);
   }
 
@@ -108,17 +116,17 @@ async function __runGoFrontSuite() {
   // Go-style streaming report. In non-verbose mode only failures and skips are
   // shown, so the "=== RUN" header is emitted late for failures.
   const report = (t) => {
-    const elapsed = ((now() - t._start) / 1000).toFixed(2);
+    const elapsed = dim("(" + ((now() - t._start) / 1000).toFixed(2) + "s)");
     if (t.skipped) {
-      console.log("--- SKIP: " + t._name + " (" + elapsed + "s)");
+      console.log("--- " + SKIP + ": " + t._name + " " + elapsed);
       for (const log of t._logs) console.log("    " + log);
     } else if (t.failed) {
-      if (!verbose) console.log("=== RUN   " + t._name);
-      for (const log of t._logs) console.log("    " + log);
-      console.log("--- FAIL: " + t._name + " (" + elapsed + "s)");
+      if (!verbose) console.log(dim("=== RUN   ") + t._name);
+      for (const log of t._logs) console.log("    " + red(log));
+      console.log("--- " + FAIL + ": " + t._name + " " + elapsed);
     } else if (verbose) {
       for (const log of t._logs) console.log("    " + log);
-      console.log("--- PASS: " + t._name + " (" + elapsed + "s)");
+      console.log("--- " + PASS + ": " + t._name + " " + elapsed);
     }
   };
 
@@ -130,7 +138,7 @@ async function __runGoFrontSuite() {
   };
 
   globalThis.__onSubtestStart = (name) => {
-    if (verbose) console.log("=== RUN   " + name);
+    if (verbose) console.log(dim("=== RUN   ") + name);
   };
   globalThis.__onSubtestEnd = report;
 
@@ -141,13 +149,13 @@ ${testNames.map((n) => `    ${JSON.stringify(n)}: typeof ${n} !== "undefined" ?
   for (const name of testsToRun) {
     const fn = __testRegistry[name] ?? (typeof globalThis[name] === "function" ? globalThis[name] : null);
     if (typeof fn !== "function") {
-      console.error("testing: cannot find test function " + name);
+      console.error(red("testing: cannot find test function " + name));
       totalFailures++;
       continue;
     }
 
     const t = new __GoFront_T(name);
-    if (verbose) console.log("=== RUN   " + name);
+    if (verbose) console.log(dim("=== RUN   ") + name);
 
     try {
       const res = fn(t);
@@ -164,12 +172,12 @@ ${testNames.map((n) => `    ${JSON.stringify(n)}: typeof ${n} !== "undefined" ?
   const suiteElapsed = ((now() - suiteStart) / 1000).toFixed(3);
 
   if (totalFailures > 0) {
-    console.log("FAIL");
-    console.log("FAIL\\t" + pkgName + "\\t" + suiteElapsed + "s");
+    console.log(FAIL);
+    console.log(FAIL + "\\t" + pkgName + "\\t" + dim(suiteElapsed + "s"));
     process.exit(1);
   } else {
-    console.log("PASS");
-    console.log("ok  \\t" + pkgName + "\\t" + suiteElapsed + "s");
+    console.log(PASS);
+    okLine(pkgName, suiteElapsed);
     process.exit(0);
   }
 }
@@ -215,10 +223,17 @@ function reportEmptyTests(label, reason, options) {
 		return { exitCode: 0, stdout: out, stderr: "", noTests: true };
 	}
 	const dest = options.stdout ?? process.stdout;
-	dest.write(out);
+	dest.write(colorsFor(options, dest).dim(out));
 	return { exitCode: 0, noTests: true };
 }
 
+// Color is decided here because the harness child writes to a pipe, not a TTY.
+function colorsFor(options, stream) {
+	const enabled =
+		options.color ?? (!options.captureOutput && colorEnabled(stream));
+	return createColors(enabled);
+}
+
 function spawnTestRunner(resolvedDir, harnessJs, testCount, options) {
 	return new Promise((resolvePromise, rejectPromise) => {
 		const child = spawn(process.execPath, ["--input-type=module", "-"], {
@@ -289,12 +304,16 @@ export async function runTests(targetDir, options = {}) {
 	try {
 		compiled = compilePackageTests(resolvedDir, options);
 	} catch (err) {
-		const out = `FAIL\t${basename(resolvedDir)} [build failed]\n${err?.message ?? String(err)}\n`;
+		const msg = err?.message ?? String(err);
 		if (options.captureOutput) {
+			const out = `FAIL\t${basename(resolvedDir)} [build failed]\n${msg}\n`;
 			return { exitCode: 1, stdout: "", stderr: out };
 		}
 		const dest = options.stderr ?? process.stderr;
-		dest.write(out);
+		const c = colorsFor(options, dest);
+		dest.write(
+			`${c.bold(c.red("FAIL"))}\t${basename(resolvedDir)} ${c.red("[build failed]")}\n${formatDiagnostic(msg, c)}\n`,
+		);
 		return { exitCode: 1 };
 	}
 
@@ -309,6 +328,7 @@ export async function runTests(targetDir, options = {}) {
 		...options,
 		pkgName,
 		jsdomPath,
+		color: colorsFor(options, options.stdout ?? process.stdout).enabled,
 	});
 
 	return spawnTestRunner(resolvedDir, harnessJs, testNames.length, options);

package/src/typechecker/assignability.js

@@ -227,7 +227,10 @@ export const assignabilityMethods = {
 
 	_isUntypedAssignable(target, source) {
 		if (isUntyped(target)) return true;
-		if (target.kind !== "basic") return false;
+		// Named types with a basic underlying type (`type Mode string`) accept
+		// untyped constants of that kind, as in Go.
+		if (target.kind === "named") target = this.resolveType(target.underlying);
+		if (target?.kind !== "basic") return false;
 		return (
 			(UNTYPED_COMPAT[source.base]?.has(target.name) ?? false) ||
 			(isComplex(target) &&
@@ -347,6 +350,14 @@ export const assignabilityMethods = {
 		if (srcType?.kind === "pointer") srcType = this.resolveType(srcType.base);
 		let base = srcType.kind === "named" ? srcType.underlying : srcType;
 		base = this.resolveType(base);
+		// Interface → interface: the source's method set must cover the target's.
+		if (base?.kind === "interface") {
+			for (const [name, required] of iface.methods) {
+				if (!this._implementsMethod(required, base.methods.get(name)))
+					return false;
+			}
+			return true;
+		}
 		const methodMap =
 			base?.kind === "struct"
 				? base.methods

package/src/typechecker/stdlib/extended.js

@@ -53,8 +53,18 @@ export function setupExtendedGlobals(globals, types) {
 		DataAttr: { kind: "func", params: [STRING, STRING], returns: [GOM_NODE_T] },
 		If: { kind: "func", params: [BOOL, GOM_NODE_T], returns: [GOM_NODE_T] },
 		Map: { kind: "func", params: [ANY, ANY], returns: [GOM_NODE_T] },
-		Mount: { kind: "func", params: [STRING, GOM_NODE_T], returns: [VOID] },
-		MountTo: { kind: "func", params: [STRING, GOM_NODE_T], returns: [VOID] },
+		Mount: {
+			kind: "func",
+			params: [STRING, GOM_NODE_T, ANY],
+			variadic: true,
+			returns: [VOID],
+		},
+		MountTo: {
+			kind: "func",
+			params: [STRING, GOM_NODE_T, ANY],
+			variadic: true,
+			returns: [VOID],
+		},
 	};
 	for (const name of [
 		"Div",