feat: add font size controls to view template

.gitignore

@@ -171,4 +171,6 @@ dist
 dist
 .output
 
-.DS_Store
+.DS_Store
+
+.omx

public/themes/default.css

@@ -54,12 +54,40 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	flex-wrap: wrap;
+	justify-content: flex-end;
 }
 
 .export-container {
 	position: relative;
 }
 
+.font-size-controls {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	min-inline-size: auto;
+}
+
+.font-size-btn {
+	min-width: 32px;
+	justify-content: center;
+}
+
+.font-size-icon {
+	width: 18px;
+	height: 18px;
+}
+
+.font-size-btn[disabled] {
+	cursor: default;
+	opacity: 0.35;
+	pointer-events: none;
+}
+
 .export-option span {
 	flex: 1;
 }
@@ -93,6 +121,14 @@
 	}
 }
 
+@media (max-width: 640px) {
+	.top-actions {
+		top: 12px;
+		right: 12px;
+		gap: 6px;
+	}
+}
+
 /* Source: theme/presets/article.css */
 body {
 	font-family:

public/themes/github.css

@@ -54,12 +54,40 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	flex-wrap: wrap;
+	justify-content: flex-end;
 }
 
 .export-container {
 	position: relative;
 }
 
+.font-size-controls {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	min-inline-size: auto;
+}
+
+.font-size-btn {
+	min-width: 32px;
+	justify-content: center;
+}
+
+.font-size-icon {
+	width: 18px;
+	height: 18px;
+}
+
+.font-size-btn[disabled] {
+	cursor: default;
+	opacity: 0.35;
+	pointer-events: none;
+}
+
 .export-option span {
 	flex: 1;
 }
@@ -93,6 +121,14 @@
 	}
 }
 
+@media (max-width: 640px) {
+	.top-actions {
+		top: 12px;
+		right: 12px;
+		gap: 6px;
+	}
+}
+
 /* Source: theme/presets/github.css */
 body {
 	font-family:

public/themes/matrix.css

@@ -27,12 +27,40 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	flex-wrap: wrap;
+	justify-content: flex-end;
 }
 
 .export-container {
 	position: relative;
 }
 
+.font-size-controls {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	min-inline-size: auto;
+}
+
+.font-size-btn {
+	min-width: 32px;
+	justify-content: center;
+}
+
+.font-size-icon {
+	width: 18px;
+	height: 18px;
+}
+
+.font-size-btn[disabled] {
+	cursor: default;
+	opacity: 0.35;
+	pointer-events: none;
+}
+
 .export-option span {
 	flex: 1;
 }
@@ -66,6 +94,14 @@
 	}
 }
 
+@media (max-width: 640px) {
+	.top-actions {
+		top: 12px;
+		right: 12px;
+		gap: 6px;
+	}
+}
+
 /* Source: theme/presets/matrix.css */
 body {
 	font-family: "Courier New", Courier, monospace;

public/themes/resume.css

@@ -25,12 +25,40 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	flex-wrap: wrap;
+	justify-content: flex-end;
 }
 
 .export-container {
 	position: relative;
 }
 
+.font-size-controls {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	min-inline-size: auto;
+}
+
+.font-size-btn {
+	min-width: 32px;
+	justify-content: center;
+}
+
+.font-size-icon {
+	width: 18px;
+	height: 18px;
+}
+
+.font-size-btn[disabled] {
+	cursor: default;
+	opacity: 0.35;
+	pointer-events: none;
+}
+
 .export-option span {
 	flex: 1;
 }
@@ -64,6 +92,14 @@
 	}
 }
 
+@media (max-width: 640px) {
+	.top-actions {
+		top: 12px;
+		right: 12px;
+		gap: 6px;
+	}
+}
+
 /* Source: theme/presets/resume.css */
 body {
 	font-family:

shared/templates/__tests__/view.template.spec.tsx

@@ -36,6 +36,24 @@ describe("ViewTemplate mermaid rendering", () => {
 		const githubHtml = `<!DOCTYPE html>${<ViewTemplate title="GitHub" html="<h1>Heading</h1>" theme="github" />}`;
 		const resumeHtml = `<!DOCTYPE html>${<ViewTemplate title="Resume" html="<h1>Heading</h1>" theme="resume" />}`;
 
+		expect(defaultHtml).toContain('id="font-size-decrease"');
+		expect(defaultHtml).toContain('id="font-size-increase"');
+		expect(githubHtml).toContain('id="font-size-decrease"');
+		expect(resumeHtml).toContain('id="font-size-increase"');
+		expect(defaultHtml).toContain("decreaseBtn.disabled = currentIndex === 0;");
+		expect(defaultHtml).toContain(
+			"increaseBtn.disabled = currentIndex === sizes.length - 1;",
+		);
+		expect(defaultHtml).toContain("window.getComputedStyle(content).fontSize");
+		expect(defaultHtml).toContain("let currentIndex = resolvedIndex;");
+		expect(defaultHtml).toContain("let hasUserSetFontSize = false;");
+		expect(defaultHtml).toContain("if (hasUserSetFontSize) {");
+		expect(defaultHtml).not.toContain('(e.metaKey || e.ctrlKey)');
+		expect(defaultHtml).not.toContain(
+			"content.style.fontSize = sizes[currentIndex];\n\t\t\tdecreaseBtn.disabled",
+		);
+		expect(defaultHtml).toContain('class="font-size-icon"');
+		expect(defaultHtml).toContain('d="m16 16 4 4"');
 		expect(defaultHtml).toContain('id="theme-toggle"');
 		expect(defaultHtml).toContain('id="toc-toggle"');
 		expect(githubHtml).toContain('id="theme-toggle"');

shared/templates/template-hash.generated.ts

@@ -1,6 +1,6 @@
 // This file is auto-generated by scripts/generate-template-hash.ts
 // Do not edit manually. Run "pnpm generate:hash" to regenerate.
-export const TEMPLATE_HASH = "ae1aa";
+export const TEMPLATE_HASH = "0bdd6";
 
 export function getTemplateHash(): string {
 	return TEMPLATE_HASH;