feat: font resolution pipeline — compositions capture and embed their own fonts (#1255)

Compositions are now self-contained: the compiler captures font files
and embeds them as woff2 data URIs, eliminating silent render-time
fallback when the render environment lacks the author's fonts.

Resolution order (each tier falls through to the next):
1. Existing @font-face → use as-is
2. Bundled alias (38 cross-platform mappings) → embed data URI
3. Google Fonts → fetch, cache, embed
4. Local system font → locate on OS, compress to woff2, embed
5. Local @font-face paths → read file, compress, inline as data URI
6. External CDN stylesheets → fetch CSS, extract @font-face, inline
7. Alias map fallback → closest bundled equivalent
8. Actionable error with guidance

Key changes:
- System font locator (macOS/Windows/Linux) with path-bounding and
  symlink defense (realpathSync + O_NOFOLLOW)
- woff2 compression via wawoff2 (WASM, cross-platform)
- Multi-weight/style variant capture with length-sorted token matching
- External stylesheet inlining with SSRF defense (assertPublicHttpsUrl,
  HTTPS-only, private-host blocking, 2MB cap, 4-concurrent limit)
- Studio auto-import via GET /fonts/file API + renderAliasFor() derived
  from shared FONT_ALIAS_MAP (no more hand-curated drift)
- failClosedFontFetch throws on unresolved fonts in distributed renders
- Single source of truth: @hyperframes/core/fonts/aliases
- system_font_will_alias lint rule (escalates to warning for distributed)
- Default to Inter + JetBrains Mono in templates and CSS reset

packages/studio/src/components/editor/fontCatalog.ts

@@ -111,15 +111,22 @@ export const COMMON_LOCAL_FONT_FAMILIES = [
   "SF Pro Text",
   "Avenir",
   "Avenir Next",
-  "Helvetica Neue",
-  "Arial",
-  "Georgia",
-  "Times New Roman",
   "Menlo",
   "Monaco",
-  "Courier New",
 ] as const;
 
+import { resolveAliasDisplayName } from "@hyperframes/core/fonts/aliases";
+
+/**
+ * Resolves the render-time canonical font for a local font family name.
+ * Derived from the shared FONT_ALIAS_MAP — no hand-curation needed.
+ */
+export function renderAliasFor(family: string): string | undefined {
+  const display = resolveAliasDisplayName(family);
+  if (!display || display.toLowerCase() === family.toLowerCase()) return undefined;
+  return display;
+}
+
 export function googleFontStylesheetUrl(family: string): string {
   const encodedFamily = encodeURIComponent(family.trim()).replace(/%20/g, "+");
   return `https://fonts.googleapis.com/css2?family=${encodedFamily}:wght@300;400;500;600;700;800;900&display=swap`;

packages/studio/src/components/editor/propertyPanelFont.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { googleFontStylesheetUrl, POPULAR_GOOGLE_FONT_FAMILIES } from "./fontCatalog";
+import {
+  googleFontStylesheetUrl,
+  POPULAR_GOOGLE_FONT_FAMILIES,
+  renderAliasFor,
+} from "./fontCatalog";
 import { fontFamilyFromAssetPath, importedFontFaceCss, type ImportedFontAsset } from "./fontAssets";
 import {
   DEFAULT_FONT_FAMILIES,
@@ -315,12 +319,32 @@ export function FontFamilyField({
     );
   };
 
+  const importSystemFont = async (family: string): Promise<ImportedFontAsset | null> => {
+    if (!onImportFonts) return null;
+    const response = await fetch(`/api/fonts/file?family=${encodeURIComponent(family)}`);
+    if (!response.ok) return null;
+    const blob = await response.blob();
+    const ext = response.headers.get("Content-Disposition")?.match(/\.(\w+)"?$/)?.[1] ?? "ttf";
+    const file = new File([blob], `${family}.${ext}`, { type: blob.type || "font/ttf" });
+    const imported = await onImportFonts([file]);
+    return (
+      imported.find((a) => a.family.toLowerCase() === family.toLowerCase()) ?? imported[0] ?? null
+    );
+  };
+
   const commitFamily = async (option: FontOption) => {
-    if (option.source === "Local") {
+    const needsImport =
+      option.source === "Local" ||
+      (option.source === "System" && !GENERIC_FONT_FAMILIES.has(option.family.toLowerCase()));
+
+    if (needsImport) {
       setImportingFonts(true);
       setFontNotice(null);
       try {
-        const imported = await importLocalFont(option.family);
+        const imported =
+          option.source === "Local"
+            ? await importLocalFont(option.family)
+            : await importSystemFont(option.family);
         if (imported) {
           loadImportedFontStylesheet(imported);
           onCommit(buildFontFamilyValue(imported.family));
@@ -328,13 +352,9 @@ export function FontFamilyField({
           setOpen(false);
           return;
         }
-        onCommit(buildFontFamilyValue(option.family));
-        setQuery("");
-        setOpen(false);
       } finally {
         setImportingFonts(false);
       }
-      return;
     }
     if (option.source === "Google") loadGoogleFontStylesheet(option.family);
     const imported = importedFonts.find(
@@ -440,7 +460,14 @@ export function FontFamilyField({
                       : "text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"
                   }`}
                 >
-                  <span className="min-w-0 truncate font-medium">{option.family}</span>
+                  <span className="flex min-w-0 items-center gap-1.5">
+                    <span className="truncate font-medium">{option.family}</span>
+                    {renderAliasFor(option.family) && (
+                      <span className="flex-shrink-0 text-[9px] text-neutral-500">
+                        → {renderAliasFor(option.family)}
+                      </span>
+                    )}
+                  </span>
                   <span className="flex-shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600">
                     {option.source}
                   </span>