From 8db3bead13441a5882d8689dfc6a9f09c82375d9 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 25 Mar 2026 16:47:22 +0100
Subject: feat: masks, properties refactor, shaders, storage migrations, and
 more

---
 apps/web/src/hooks/use-font-atlas.ts | 53 ++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 apps/web/src/hooks/use-font-atlas.ts

(limited to 'apps/web/src/hooks/use-font-atlas.ts')

diff --git a/apps/web/src/hooks/use-font-atlas.ts b/apps/web/src/hooks/use-font-atlas.ts
new file mode 100644
index 00000000..7d6b87e9
--- /dev/null
+++ b/apps/web/src/hooks/use-font-atlas.ts
@@ -0,0 +1,53 @@
+import { useState, useMemo, useCallback, useEffect } from "react";
+import {
+	getCachedFontAtlas,
+	loadFontAtlas,
+	clearFontAtlasCache,
+} from "@/lib/fonts/google-fonts";
+import type { FontAtlas } from "@/lib/fonts/types";
+import { SYSTEM_FONTS } from "@/constants/font-constants";
+
+type Status = "idle" | "loading" | "error";
+
+export function useFontAtlas({ open }: { open: boolean }) {
+	const [atlas, setAtlas] = useState<FontAtlas | null>(() =>
+		getCachedFontAtlas(),
+	);
+	const [status, setStatus] = useState<Status>(() =>
+		getCachedFontAtlas() ? "idle" : "loading",
+	);
+
+	useEffect(() => {
+		if (!open || atlas) return;
+
+		setStatus("loading");
+		loadFontAtlas().then((data) => {
+			if (data) {
+				setAtlas(data);
+				setStatus("idle");
+			} else {
+				setStatus("error");
+			}
+		});
+	}, [open, atlas]);
+
+	const retry = useCallback(() => {
+		clearFontAtlasCache();
+		setStatus("loading");
+		loadFontAtlas().then((data) => {
+			if (data) {
+				setAtlas(data);
+				setStatus("idle");
+			} else {
+				setStatus("error");
+			}
+		});
+	}, []);
+
+	const fontNames = useMemo(() => {
+		if (!atlas) return [];
+		return [...Object.keys(atlas.fonts), ...SYSTEM_FONTS].sort();
+	}, [atlas]);
+
+	return { atlas, status, fontNames, retry };
+}
-- 
cgit v1.3.1