Font Management v2

frontend/package.json

@@ -32,6 +32,7 @@
 	},
 	"dependencies": {
 		"class-transformer": "^0.5.1",
+		"fontace": "^0.3.1",
 		"idb-keyval": "^6.2.2",
 		"reflect-metadata": "^0.2.2",
 		"source-code-pro": "github:adobe-fonts/source-code-pro#2.042R-u/1.062R-i/1.026R-vf",
@@ -51,18 +52,18 @@
 		"eslint-plugin-svelte": "^3.11.0",
 		"globals": "^16.3.0",
 		"postcss": "^8.5.6",
-		"prettier-plugin-svelte": "^3.4.0",
 		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
 		"process": "^0.11.10",
 		"rollup-plugin-license": "^3.6.0",
 		"sass": "^1.91.0",
-		"svelte-preprocess": "^6.0.3",
 		"svelte": "4.2.20",
+		"svelte-preprocess": "^6.0.3",
 		"ts-node": "^10.9.2",
-		"typescript-eslint": "^8.41.0",
 		"typescript": "^5.9.2",
-		"vite-multiple-assets": "2.2.5",
-		"vite": "^5.4.19"
+		"typescript-eslint": "^8.41.0",
+		"vite": "^5.4.19",
+		"vite-multiple-assets": "2.2.5"
 	},
 	"homepage": "https://graphite.rs",
 	"license": "Apache-2.0",

frontend/src/state-providers/fonts.ts

@@ -63,7 +63,7 @@ export function createFontsState(editor: Editor) {
 			fetch(fontListAPI)
 				.then((response) => response.json())
 				.then((fontListResponse) => {
-					const fontListData = fontListResponse.items as { family: string; variants: string[]; files: Record<string, string> }[];
+					con`frontend/src/state-providers/fonts.ts`st fontListData = fontListResponse.items as { family: string; variants: string[]; files: Record<string, string> }[];
 					const result = fontListData.map((font) => {
 						const { family } = font;
 						const variants = font.variants.map(formatFontStyleName);
@@ -98,6 +98,69 @@ export function createFontsState(editor: Editor) {
 }
 export type FontsState = ReturnType<typeof createFontsState>;
 
+export type FontProvider = {
+	/**
+	 * A display name for the font provider to show in the UI.
+	 */
+	displayName: string;
+
+	/**
+	 * 32px icon for the font provider to show in the font management window.
+	 */
+	iconLarge: string;
+
+	needsBrowserPermissions: boolean;
+	needsNetwork: boolean;
+	web: boolean;
+	desktop: ("windows" | "macos" | "linux")[] | boolean;
+
+	/**
+	 * Index all available typefaces. This will trigger network requests or permissions dialogs if needed.
+	 */
+	index(): Promise<void>;
+
+	/**
+	 * Get a typeface by its name.
+	 */
+	getTypeface(name: string): Promise<Typeface | undefined>;
+
+	/**
+	 * Load a font file for a given typeface and style.
+	 */
+	loadFont(typeface: string, styleName: string): Promise<Uint8Array>;
+
+	/**
+	 * Search typefaces by a tag.
+	 * TODO: Define standard tags to use across providers.
+	 * TODO2: (long-term) Implement vector search.
+	 */
+	searchByTag(tag: string): Promise<Typeface[]>;
+};
+
+export type Typeface = {
+	postScriptName: string;
+	familyName: string;
+	fonts: FontStyle[];
+	isVariable: boolean;
+	isColorful: boolean;
+	hasMultipleWeights: boolean;
+	hasItalicVariants: boolean;
+	subsets: string[];
+	/**
+	 * Tags should include the following, and also any others, such as "feeling" tags or more specific categories.
+	 * "serif" | "sans-serif" | "monospace" | "handwriting" | "dingbat"
+	 */
+	tags: string[];
+};
+
+export type FontStyle = {
+	styleName: string;
+	group?: string;
+	weights: number | [number, number];
+	isItalic: boolean;
+	axes?: Record<string, [number, number]>;
+};
+
 const fontListAPI = "https://api.graphite.rs/font-list";
 
 // From https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping