feat: Typst ファイルを入力として受け付ける (#12)

messages/en.json

@@ -145,5 +145,15 @@
   "update_reload": "Reload",
 
   "license_label_license": "License",
-  "license_label_author": "Author"
+  "license_label_author": "Author",
+
+  "typst_status_loading_wasm": "Loading Typst engine…",
+  "typst_status_fetching_packages": "Fetching Typst package: {package}",
+  "typst_status_compiling": "Compiling Typst…",
+  "typst_error_no_main": "Could not find a Typst main file (main.typ)",
+  "typst_error_compile_failed": "Typst compile failed ({count} errors)",
+  "typst_error_runtime_init": "Failed to initialize Typst engine",
+  "typst_error_timeout": "Typst compilation timed out",
+  "typst_diag_severity_error": "error",
+  "typst_diag_severity_warning": "warning"
 }

messages/ja.json

@@ -145,5 +145,15 @@
   "update_reload": "再読み込み",
 
   "license_label_license": "ライセンス",
-  "license_label_author": "作者"
+  "license_label_author": "作者",
+
+  "typst_status_loading_wasm": "Typst エンジンを読み込み中…",
+  "typst_status_fetching_packages": "Typst パッケージを取得中: {package}",
+  "typst_status_compiling": "Typst をコンパイル中…",
+  "typst_error_no_main": "Typst の主ファイル (main.typ) が見つかりません",
+  "typst_error_compile_failed": "Typst のコンパイルに失敗しました ({count} 件のエラー)",
+  "typst_error_runtime_init": "Typst エンジンの初期化に失敗しました",
+  "typst_error_timeout": "Typst のコンパイルがタイムアウトしました",
+  "typst_diag_severity_error": "エラー",
+  "typst_diag_severity_warning": "警告"
 }

package.json

@@ -15,6 +15,8 @@
   "dependencies": {
     "@fontsource/geist-mono": "^5.2.7",
     "@fontsource/geist-sans": "^5.2.5",
+    "@myriaddreamin/typst-ts-web-compiler": "^0.6.0",
+    "@myriaddreamin/typst.ts": "^0.6.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",

src/components/TypstDiagnosticList.test.tsx

@@ -0,0 +1,31 @@
+import { render } from "vitest-browser-react";
+import { describe, expect, it } from "vitest";
+import type { TypstDiagnostic } from "#src/lib/typst";
+import { TypstDiagnosticList } from "./TypstDiagnosticList";
+
+describe("TypstDiagnosticList", () => {
+	it("renders one row per diagnostic with file:line:col and message", async () => {
+		const items: TypstDiagnostic[] = [
+			{
+				severity: "error",
+				path: "main.typ",
+				line: 12,
+				column: 5,
+				message: "unknown variable: foo",
+			},
+			{
+				severity: "warning",
+				path: "main.typ",
+				line: 20,
+				column: 1,
+				message: "deprecated",
+			},
+		];
+		const screen = await render(<TypstDiagnosticList items={items} />);
+		await expect.element(screen.getByText("main.typ:12:5")).toBeVisible();
+		await expect
+			.element(screen.getByText("unknown variable: foo"))
+			.toBeVisible();
+		await expect.element(screen.getByText("main.typ:20:1")).toBeVisible();
+	});
+});

src/components/TypstDiagnosticList.tsx

@@ -0,0 +1,47 @@
+import { AlertCircleIcon, AlertTriangleIcon } from "lucide-react";
+import type { TypstDiagnostic } from "#src/lib/typst";
+import { cn } from "#src/lib/utils";
+import * as m from "#src/paraglide/messages.js";
+
+interface Props {
+	items: TypstDiagnostic[];
+	max?: number;
+}
+
+export function TypstDiagnosticList({ items, max = 20 }: Props) {
+	const errors = items.filter((d) => d.severity === "error").length;
+	const shown = items.slice(0, max);
+	const remaining = items.length - shown.length;
+	return (
+		<div className="mt-4 flex flex-col gap-1 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-[12px]">
+			<div className="font-medium text-destructive">
+				{m.typst_error_compile_failed({ count: String(errors) })}
+			</div>
+			<ul className="flex flex-col gap-1 font-mono text-fg/80">
+				{shown.map((d, i) => (
+					<li
+						key={`${d.path}:${d.line}:${d.column}:${d.message}:${i}`}
+						className="flex items-start gap-2"
+					>
+						{d.severity === "error" ? (
+							<AlertCircleIcon className="mt-[2px] size-3.5 shrink-0 text-destructive" />
+						) : (
+							<AlertTriangleIcon className="mt-[2px] size-3.5 shrink-0 text-warning" />
+						)}
+						<span className="shrink-0 text-muted">
+							{d.path}:{d.line}:{d.column}
+						</span>
+						<span
+							className={cn(d.severity === "error" ? "text-fg" : "text-muted")}
+						>
+							{d.message}
+						</span>
+					</li>
+				))}
+			</ul>
+			{remaining > 0 && (
+				<div className="text-[11px] text-muted">+ {remaining} more</div>
+			)}
+		</div>
+	);
+}

src/lib/recent-store.ts

@@ -1,16 +1,35 @@
 import { type DBSchema, type IDBPDatabase, openDB } from "idb";
 
-export type RecentFile = {
+export interface RecentPdfFile {
+	kind?: "pdf";
 	id: string;
 	name: string;
-	lastOpened: number;
 	handle?: FileSystemFileHandle;
 	configHandle?: FileSystemFileHandle;
 	configName?: string;
 	file?: File;
 	configFile?: File;
+	lastOpened: number;
 	thumbnail?: string;
-};
+}
+
+export interface RecentTypstFile {
+	kind: "typst";
+	id: string;
+	name: string;
+	mainPath: string;
+	handle?: FileSystemFileHandle;
+	assetHandles?: FileSystemFileHandle[];
+	file?: File;
+	assetFiles?: File[];
+	configHandle?: FileSystemFileHandle;
+	configFile?: File;
+	configName?: string;
+	lastOpened: number;
+	thumbnail?: string;
+}
+
+export type RecentFile = RecentPdfFile | RecentTypstFile;
 
 export type Settings = {
 	saveHistory: boolean;
@@ -70,14 +89,22 @@ export function openDb(): Promise<RecentDb> {
 export async function getRecentFiles(
 	db: IDBPDatabase<RecentSchema>,
 ): Promise<RecentFile[]> {
-	return db.getAll(DB_STORE);
+	const all = await db.getAll(DB_STORE);
+	// Migration: entries stored before the discriminated union had no `kind`.
+	// Treat missing `kind` as "pdf".
+	return all.map((item) =>
+		item.kind === undefined ? { ...item, kind: "pdf" as const } : item,
+	);
 }
 
 export async function getRecentFileById(
 	db: IDBPDatabase<RecentSchema>,
 	id: string,
 ): Promise<RecentFile | undefined> {
-	return db.get(DB_STORE, id);
+	const item = await db.get(DB_STORE, id);
+	if (!item) return undefined;
+	// Migration: entries stored before the discriminated union had no `kind`.
+	return item.kind === undefined ? { ...item, kind: "pdf" as const } : item;
 }
 
 export async function upsertRecent(

src/lib/typst-source-detect.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from "vitest";
+import {
+	containsTypst,
+	entriesToTypstSources,
+	filesToTypstSources,
+	pickMainTypst,
+	type TypstSource,
+} from "./typst-source-detect";
+
+const src = (path: string): TypstSource => ({ path, data: new Uint8Array() });
+
+describe("containsTypst", () => {
+	it("returns true when any file ends with .typ", () => {
+		expect(containsTypst([src("main.typ")])).toBe(true);
+		expect(containsTypst([src("a.pdf"), src("b.typ")])).toBe(true);
+	});
+	it("returns false otherwise", () => {
+		expect(containsTypst([src("a.pdf")])).toBe(false);
+		expect(containsTypst([])).toBe(false);
+	});
+});
+
+describe("pickMainTypst", () => {
+	it("returns the only .typ when single", () => {
+		expect(pickMainTypst([src("hello.typ")])).toBe("hello.typ");
+	});
+	it("prefers main.typ at root when multiple", () => {
+		expect(
+			pickMainTypst([src("intro.typ"), src("main.typ"), src("appendix.typ")]),
+		).toBe("main.typ");
+	});
+	it("falls back to shallowest then alphabetical when no main.typ", () => {
+		expect(
+			pickMainTypst([
+				src("chapters/01.typ"),
+				src("chapters/02.typ"),
+				src("zoo.typ"),
+				src("alpha.typ"),
+			]),
+		).toBe("alpha.typ");
+	});
+	it("returns null when no .typ", () => {
+		expect(pickMainTypst([src("a.pdf")])).toBe(null);
+	});
+});
+
+describe("filesToTypstSources", () => {
+	it("uses webkitRelativePath when present, otherwise file name", async () => {
+		const a = new File(["hello"], "main.typ", { type: "text/plain" });
+		const b = new File([new Uint8Array([1, 2])], "logo.png");
+		Object.defineProperty(b, "webkitRelativePath", {
+			value: "assets/logo.png",
+		});
+		const result = await filesToTypstSources([a, b]);
+		expect(result.map((r) => r.path)).toEqual(["main.typ", "assets/logo.png"]);
+		expect(result[1].data).toEqual(new Uint8Array([1, 2]));
+	});
+});
+
+describe("entriesToTypstSources", () => {
+	it("recursively expands directory entries with relative paths", async () => {
+		type MockEntry = {
+			isFile: boolean;
+			isDirectory: boolean;
+			name: string;
+			file?: (cb: (f: File) => void) => void;
+			createReader?: () => {
+				readEntries: (cb: (e: MockEntry[]) => void) => void;
+			};
+		};
+		function fileEntry(name: string, content: string): MockEntry {
+			return {
+				isFile: true,
+				isDirectory: false,
+				name,
+				file: (cb: (f: File) => void) => cb(new File([content], name)),
+			};
+		}
+		function dirEntry(name: string, children: MockEntry[]): MockEntry {
+			return {
+				isFile: false,
+				isDirectory: true,
+				name,
+				createReader: () => {
+					let exhausted = false;
+					return {
+						readEntries: (cb: (e: MockEntry[]) => void) => {
+							if (exhausted) return cb([]);
+							exhausted = true;
+							cb(children);
+						},
+					};
+				},
+			};
+		}
+		const root = [
+			fileEntry("main.typ", "= Hi"),
+			dirEntry("img", [fileEntry("a.png", "x")]),
+		];
+		const result = await entriesToTypstSources(root);
+		expect(result.map((r) => r.path).sort()).toEqual(["img/a.png", "main.typ"]);
+	});
+});