@zseven-w/pen-renderer 0.7.1 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zseven-w/pen-renderer",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Standalone CanvasKit/Skia renderer for OpenPencil (.op) design files",
   "homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-renderer",
   "bugs": {
@@ -30,8 +30,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@zseven-w/pen-core": "0.7.1",
-    "@zseven-w/pen-types": "0.7.1",
+    "@zseven-w/pen-core": "0.7.3",
+    "@zseven-w/pen-types": "0.7.3",
     "rbush": "^4.0.1"
   },
   "devDependencies": {

package/src/__tests__/document-flattener.test.ts

@@ -274,4 +274,35 @@ describe('flattenToRenderNodes — dimension consistency', () => {
     expect(t1.clipRect!.h).toBe(rootRN.absH);
     expect(t1.clipRect!.w).toBe(rootRN.absW);
   });
+
+  it('nested frame with clipContent clips its descendants using its own bounds/radius', () => {
+    const root = frame({
+      id: 'root',
+      width: 400,
+      height: 400,
+      children: [
+        frame({
+          id: 'card',
+          x: 40,
+          y: 50,
+          width: 200,
+          height: 120,
+          cornerRadius: 16,
+          clipContent: true,
+          children: [text('inner', 'Nested content', { width: 'fill_container' as any })],
+        }),
+      ],
+    });
+
+    const nodes = flattenToRenderNodes([root]);
+    const card = nodes.find((rn) => rn.node.id === 'card')!;
+    const inner = nodes.find((rn) => rn.node.id === 'inner')!;
+
+    expect(inner.clipRect).toBeDefined();
+    expect(inner.clipRect!.x).toBe(card.absX);
+    expect(inner.clipRect!.y).toBe(card.absY);
+    expect(inner.clipRect!.w).toBe(card.absW);
+    expect(inner.clipRect!.h).toBe(card.absH);
+    expect(inner.clipRect!.rx).toBe(16);
+  });
 });

package/src/__tests__/font-manager.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { SkiaFontManager } from '../font-manager';
 
 // Minimal mock CanvasKit shim — only the bits SkiaFontManager constructor touches.
@@ -63,3 +63,273 @@ describe('SkiaFontManager.pendingCount / flushPending', () => {
     expect(flushResolved).toBe(true);
   });
 });
+
+describe('system font detection via Local Font Access API', () => {
+  let originalFetch: typeof globalThis.fetch;
+
+  beforeEach(() => {
+    originalFetch = globalThis.fetch;
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+    vi.restoreAllMocks();
+  });
+
+  it('marks unknown local font as systemFont when Google Fonts fails', async () => {
+    // Mock fetch to simulate Google Fonts returning 400
+    globalThis.fetch = vi
+      .fn()
+      .mockResolvedValue(new Response(null, { status: 400, statusText: 'Bad Request' }));
+
+    // Mock window.queryLocalFonts to include "HeyMeow Rnd"
+    const origQuery = (globalThis as unknown as Record<string, unknown>).queryLocalFonts;
+    (globalThis as unknown as Record<string, unknown>).queryLocalFonts = async () => [
+      {
+        family: 'HeyMeow Rnd',
+        fullName: 'HeyMeow Rnd Regular',
+        postscriptName: 'HeyMeowRnd-Regular',
+        style: 'Regular',
+        blob: async () => new Blob([]),
+      },
+      {
+        family: 'Arial',
+        fullName: 'Arial Regular',
+        postscriptName: 'ArialMT',
+        style: 'Regular',
+        blob: async () => new Blob([]),
+      },
+    ];
+
+    // Mock window for the Local Font Access API check
+    const origWindow = globalThis.window;
+    vi.stubGlobal('window', {
+      queryLocalFonts: (
+        globalThis as unknown as Record<string, () => Promise<Array<{ family: string }>>>
+      ).queryLocalFonts,
+    });
+
+    const fm = new SkiaFontManager(makeMockCk() as never);
+
+    // "HeyMeow Rnd" is not bundled and not in NON_GOOGLE_FONT_PATTERNS
+    const result = await fm.ensureFont('HeyMeow Rnd');
+
+    // Should return false (not loaded into CanvasKit) but be classified as system font
+    expect(result).toBe(false);
+    expect(fm.isSystemFont('HeyMeow Rnd')).toBe(true);
+
+    // Cleanup
+    vi.unstubAllGlobals();
+    if (origWindow !== undefined) {
+      globalThis.window = origWindow as Window & typeof globalThis;
+    }
+    (globalThis as unknown as Record<string, unknown>).queryLocalFonts = origQuery;
+  });
+
+  it('marks font as failed when not found locally either', async () => {
+    // Mock fetch to simulate Google Fonts returning 400
+    globalThis.fetch = vi
+      .fn()
+      .mockResolvedValue(new Response(null, { status: 400, statusText: 'Bad Request' }));
+
+    // Mock window.queryLocalFonts WITHOUT "SomeRandomFont"
+    vi.stubGlobal('window', {
+      queryLocalFonts: async () => [
+        {
+          family: 'Arial',
+          fullName: 'Arial Regular',
+          postscriptName: 'ArialMT',
+          style: 'Regular',
+          blob: async () => new Blob([]),
+        },
+        {
+          family: 'Inter',
+          fullName: 'Inter Regular',
+          postscriptName: 'Inter-Regular',
+          style: 'Regular',
+          blob: async () => new Blob([]),
+        },
+      ],
+    });
+
+    const fm = new SkiaFontManager(makeMockCk() as never);
+    const result = await fm.ensureFont('SomeRandomFont');
+
+    expect(result).toBe(false);
+    expect(fm.isSystemFont('SomeRandomFont')).toBe(false);
+
+    // Cleanup
+    vi.unstubAllGlobals();
+  });
+});
+
+describe('requestLocalFontAccess', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('returns true and populates localFontMap when permission granted', async () => {
+    const mockFontData = new Blob([new ArrayBuffer(100)]);
+    vi.stubGlobal('window', {
+      queryLocalFonts: async () => [
+        {
+          family: 'Segoe UI',
+          fullName: 'Segoe UI Regular',
+          postscriptName: 'SegoeUI-Regular',
+          style: 'Regular',
+          blob: async () => mockFontData,
+        },
+        {
+          family: 'Segoe UI',
+          fullName: 'Segoe UI Bold',
+          postscriptName: 'SegoeUI-Bold',
+          style: 'Bold',
+          blob: async () => mockFontData,
+        },
+      ],
+    });
+
+    const fm = new SkiaFontManager(makeMockCk() as never);
+    const result = await fm.requestNativeFontAccess();
+
+    expect(result).toBe(true);
+    expect(fm.nativeFontPermission).toBe('granted');
+
+    // Check nativeFontMap has entries
+    const map = (fm as unknown as { nativeFontMap: Map<string, unknown[]> }).nativeFontMap;
+    expect(map.has('segoe ui')).toBe(true);
+    expect(map.get('segoe ui')?.length).toBe(2);
+
+    vi.unstubAllGlobals();
+  });
+
+  it('returns false and sets denied when permission denied', async () => {
+    vi.stubGlobal('window', {
+      queryLocalFonts: async () => {
+        throw new DOMException('Permission denied', 'NotAllowedError');
+      },
+    });
+
+    const fm = new SkiaFontManager(makeMockCk() as never);
+    const result = await fm.requestNativeFontAccess();
+
+    expect(result).toBe(false);
+    expect(fm.nativeFontPermission).toBe('denied');
+
+    vi.unstubAllGlobals();
+  });
+
+  it('returns false and sets unavailable when API not present', async () => {
+    vi.stubGlobal('window', {});
+
+    const fm = new SkiaFontManager(makeMockCk() as never);
+    const result = await fm.requestNativeFontAccess();
+
+    expect(result).toBe(false);
+    expect(fm.nativeFontPermission).toBe('unavailable');
+
+    vi.unstubAllGlobals();
+  });
+});
+
+describe('local font blob loading into CanvasKit', () => {
+  let originalFetch: typeof globalThis.fetch;
+
+  beforeEach(() => {
+    originalFetch = globalThis.fetch;
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+    vi.restoreAllMocks();
+  });
+
+  it('loads local font data into CanvasKit when blob provides valid data', async () => {
+    // Create mock font data (enough bytes to look like a font file)
+    const fontBuffer = new ArrayBuffer(100);
+    const mockBlob = new Blob([fontBuffer]);
+
+    // Mock fetch to fail (no bundled, no Google Fonts)
+    globalThis.fetch = vi
+      .fn()
+      .mockResolvedValue(new Response(null, { status: 400, statusText: 'Bad Request' }));
+
+    vi.stubGlobal('window', {
+      queryLocalFonts: async () => [
+        {
+          family: 'TestFont',
+          fullName: 'TestFont Regular',
+          postscriptName: 'TestFont-Regular',
+          style: 'Regular',
+          blob: async () => mockBlob,
+        },
+      ],
+    });
+
+    const fm = new SkiaFontManager(makeMockCk() as never);
+
+    // Grant access first
+    await fm.requestNativeFontAccess();
+    expect(fm.nativeFontPermission).toBe('granted');
+
+    // Now try to ensure the font — should attempt blob loading
+    await fm.ensureFont('TestFont');
+
+    // Even if registerFont fails with mock data, the font should be recognized
+    // The mock CK registerFont is a no-op, so it won't actually register
+    // But the flow should exercise the blob loading path
+    expect(fm.nativeFontPermission).toBe('granted');
+
+    vi.unstubAllGlobals();
+  });
+});
+
+describe('requestNativeFontAccess prompt-preservation', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('preserves prompt state when queryLocalFonts fails and permissions.query returns prompt', async () => {
+    vi.stubGlobal('window', {
+      queryLocalFonts: async () => {
+        throw new DOMException('Permission denied', 'NotAllowedError');
+      },
+    });
+    // Stub navigator.permissions for Node.js test environment
+    vi.stubGlobal('navigator', {
+      permissions: {
+        query: async () => ({ state: 'prompt' }),
+      },
+    });
+
+    const fm = new SkiaFontManager(makeMockCk() as never);
+    const result = await fm.requestNativeFontAccess();
+
+    expect(result).toBe(false);
+    expect(fm.nativeFontPermission).toBe('prompt');
+
+    vi.unstubAllGlobals();
+  });
+
+  it('sets denied when queryLocalFonts fails and permissions.query returns denied', async () => {
+    vi.stubGlobal('window', {
+      queryLocalFonts: async () => {
+        throw new DOMException('Permission denied', 'NotAllowedError');
+      },
+    });
+    // Stub navigator.permissions for Node.js test environment
+    vi.stubGlobal('navigator', {
+      permissions: {
+        query: async () => ({ state: 'denied' }),
+      },
+    });
+
+    const fm = new SkiaFontManager(makeMockCk() as never);
+    const result = await fm.requestNativeFontAccess();
+
+    expect(result).toBe(false);
+    expect(fm.nativeFontPermission).toBe('denied');
+
+    vi.unstubAllGlobals();
+  });
+});

package/src/document-flattener.ts

@@ -241,10 +241,12 @@ export function flattenToRenderNodes(
       const positioned =
         layout && layout !== 'none' ? computeLayoutPositions(resolved, children) : children;
 
-      // Clipping — only clip for root frames (artboard behavior).
+      // Clipping — root frames always clip like artboards. Nested containers
+      // clip only when clipContent is enabled.
       let childClip = clipCtx;
       const isRootFrame = node.type === 'frame' && depth === 0;
-      if (isRootFrame) {
+      const explicitClip = 'clipContent' in resolved && resolved.clipContent === true;
+      if (isRootFrame || explicitClip) {
         const crRaw = 'cornerRadius' in node ? cornerRadiusVal(node.cornerRadius) : 0;
         const cr = Math.min(crRaw, nodeH / 2);
         childClip = { x: absX, y: absY, w: nodeW, h: nodeH, rx: cr };

package/src/font-manager.ts

@@ -7,6 +7,18 @@ export interface FontManagerOptions {
   googleFontsCssUrl?: string;
 }
 
+/** Permission state for the native font access (Local Font Access API) */
+export type NativeFontPermission = 'prompt' | 'granted' | 'denied' | 'unavailable';
+
+/** Native font entry from the Local Font Access API with blob accessor */
+interface NativeFontEntry {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  style: string;
+  blob: () => Promise<Blob>;
+}
+
 /**
  * Bundled font files (relative paths, prepended with fontBasePath at load time).
  * Key = lowercase family name, values = relative file names.
@@ -88,6 +100,12 @@ export class SkiaFontManager {
   private systemFontFamilies = new Set<string>();
   /** In-flight font fetch promises to avoid duplicate requests */
   private pendingFetches = new Map<string, Promise<boolean>>();
+  /** Cached set of native (OS-installed) font families from Local Font Access API (lowercase) */
+  private nativeFontSet: Set<string> | null = null;
+  /** Full native font entries with blob accessors, keyed by lowercase family name */
+  private nativeFontMap = new Map<string, NativeFontEntry[]>();
+  /** Current permission state for native font access (Local Font Access API) */
+  nativeFontPermission: NativeFontPermission = 'prompt';
 
   constructor(ck: CanvasKit, options?: FontManagerOptions) {
     this.provider = ck.TypefaceFontProvider.Make();
@@ -95,6 +113,9 @@ export class SkiaFontManager {
     // Ensure trailing slash
     if (!this.fontBasePath.endsWith('/')) this.fontBasePath += '/';
     this.googleFontsCssUrl = options?.googleFontsCssUrl ?? 'https://fonts.googleapis.com/css2';
+
+    // Check initial permission state (non-blocking)
+    this._checkPermissionState();
   }
 
   getProvider(): TypefaceFontProvider {
@@ -176,7 +197,8 @@ export class SkiaFontManager {
   }
 
   /**
-   * Ensure a font family is loaded. Tries bundled fonts first, then Google Fonts.
+   * Ensure a font family is loaded. Tries bundled fonts first, then native
+   * fonts (Local Font Access API + canvas heuristic), then Google Fonts CDN.
    */
   async ensureFont(family: string, weights: number[] = [400, 500, 600, 700]): Promise<boolean> {
     const key = family.toLowerCase();
@@ -193,6 +215,7 @@ export class SkiaFontManager {
     this.pendingFetches.delete(key);
     if (!result) {
       if (isSystemFont(family)) {
+        console.warn(`[FontManager] "${family}" is now a system font fallback after failed load.`);
         this.systemFontFamilies.add(key);
       } else {
         this.failedFamilies.add(key);
@@ -214,6 +237,117 @@ export class SkiaFontManager {
     return loaded;
   }
 
+  /**
+   * Request native font access from the user via the Local Font Access API.
+   * Must be called from a user gesture context (click handler) for the
+   * browser to show the permission prompt.
+   *
+   * Returns true if access was granted and fonts were enumerated.
+   */
+  async requestNativeFontAccess(): Promise<boolean> {
+    if (typeof window === 'undefined') {
+      this.nativeFontPermission = 'unavailable';
+      return false;
+    }
+
+    if (!('queryLocalFonts' in window)) {
+      console.warn('[FontManager] Local Font Access API not available in this browser.');
+      this.nativeFontPermission = 'unavailable';
+      return false;
+    }
+
+    try {
+      const fonts = await (
+        window as unknown as {
+          queryLocalFonts(): Promise<
+            Array<{
+              family: string;
+              fullName: string;
+              postscriptName: string;
+              style: string;
+              blob(): Promise<Blob>;
+            }>
+          >;
+        }
+      ).queryLocalFonts();
+
+      const families = new Set<string>();
+      this.nativeFontMap.clear();
+
+      for (const f of fonts) {
+        const key = f.family.toLowerCase();
+        families.add(key);
+
+        const entry: NativeFontEntry = {
+          family: f.family,
+          fullName: f.fullName,
+          postscriptName: f.postscriptName,
+          style: f.style,
+          blob: f.blob.bind(f),
+        };
+
+        const existing = this.nativeFontMap.get(key) ?? [];
+        existing.push(entry);
+        this.nativeFontMap.set(key, existing);
+      }
+
+      this.nativeFontSet = families;
+      this.nativeFontPermission = 'granted';
+      console.log(`[FontManager] Native font access granted — ${families.size} families found.`);
+      return true;
+    } catch (e: unknown) {
+      const errMsg = e instanceof Error ? e.message : String(e);
+      if (e instanceof DOMException && e.name === 'NotAllowedError') {
+        // Distinguish: never prompted (no user gesture) vs. user actually denied
+        try {
+          const status = await navigator.permissions.query({
+            name: 'local-fonts' as PermissionName,
+          });
+          if (status.state === 'prompt') {
+            // Not yet prompted — likely called without user gesture. Keep prompt
+            // state so getNativeFontSet() will retry on the next ensureFont() call.
+            console.warn(
+              '[FontManager] Native font access not yet prompted — will retry on next user gesture.',
+            );
+            this.nativeFontPermission = 'prompt';
+            this.nativeFontSet = null;
+            return false;
+          }
+        } catch {
+          // permissions.query() not supported — assume denied
+        }
+        console.warn('[FontManager] Native font access denied by user.');
+        this.nativeFontPermission = 'denied';
+      } else {
+        console.warn('[FontManager] Native font access failed:', errMsg);
+        this.nativeFontPermission = 'denied';
+      }
+      this.nativeFontSet = new Set();
+      return false;
+    }
+  }
+
+  /**
+   * Check the current permission state without triggering a prompt.
+   */
+  private async _checkPermissionState(): Promise<void> {
+    if (typeof navigator === 'undefined' || !navigator.permissions) {
+      return;
+    }
+    try {
+      const result = await navigator.permissions.query({
+        name: 'local-fonts' as PermissionName,
+      });
+      this.nativeFontPermission = result.state as NativeFontPermission;
+      // If already granted, eagerly enumerate fonts
+      if (result.state === 'granted') {
+        this.requestNativeFontAccess().catch(() => {});
+      }
+    } catch {
+      // Permission name not supported — will need explicit request
+    }
+  }
+
   private async _loadFont(family: string, weights: number[]): Promise<boolean> {
     // 1. Try bundled fonts first (no network dependency)
     const bundled = BUNDLED_FONTS[family.toLowerCase()];
@@ -223,13 +357,74 @@ export class SkiaFontManager {
       if (ok) return true;
     }
 
-    // 2. Skip Google Fonts for system/proprietary fonts
-    if (isSystemFont(family)) {
+    // 2. Skip further loading for known system/proprietary fonts
+    if (isKnownNonGoogleFont(family)) {
       return false;
     }
 
-    // 3. Fall back to Google Fonts CDN
-    return this._fetchGoogleFont(family, weights);
+    // 3. Try loading from native fonts via Local Font Access API (vector rendering)
+    //    If we have the font data cached, load it into CanvasKit for vector rendering.
+    const nativeLoaded = await this._loadNativeFontData(family);
+    if (nativeLoaded) return true;
+
+    // 4. Check if font is installed natively via Local Font Access API
+    const nativeFonts = await this.getNativeFontSet();
+    if (nativeFonts.has(family.toLowerCase())) {
+      // Found natively — try blob loading for vector rendering
+      const blobLoaded = await this._loadNativeFontData(family);
+      if (blobLoaded) return true;
+      // Can't load blob data — mark as system font for bitmap fallback
+      this.systemFontFamilies.add(family.toLowerCase());
+      return false;
+    }
+
+    // 5. Canvas-based width comparison heuristic (fast, no permission needed)
+    if (isFontLocallyAvailable(family)) {
+      this.systemFontFamilies.add(family.toLowerCase());
+      return false;
+    }
+
+    // 6. Fall back to Google Fonts CDN (network request — last resort)
+    const isFontFromGoogle = await this._fetchGoogleFont(family, weights);
+    if (isFontFromGoogle) return true;
+
+    return false;
+  }
+
+  /**
+   * Attempt to load a native font from the Local Font Access API blob data
+   * into CanvasKit's TypefaceFontProvider for vector rendering.
+   */
+  private async _loadNativeFontData(family: string): Promise<boolean> {
+    const key = family.toLowerCase();
+    const entries = this.nativeFontMap.get(key);
+    if (!entries || entries.length === 0) return false;
+
+    // Try each variant (regular, bold, italic, etc.)
+    let registered = 0;
+    for (const entry of entries) {
+      try {
+        const blob = await entry.blob();
+        const buffer = await blob.arrayBuffer();
+        if (buffer.byteLength > 0 && this.registerFont(buffer, family)) {
+          registered++;
+        }
+      } catch (e) {
+        // Individual variant may fail — try the next one
+        console.warn(
+          `[FontManager] Failed to load native font blob for "${entry.fullName}":`,
+          e instanceof Error ? e.message : String(e),
+        );
+      }
+    }
+
+    if (registered > 0) {
+      console.log(
+        `[FontManager] Loaded "${family}" from native fonts (${registered}/${entries.length} variants).`,
+      );
+      return true;
+    }
+    return false;
   }
 
   private async _fetchLocalFonts(
@@ -294,8 +489,8 @@ export class SkiaFontManager {
         const fontBuffers = await Promise.all(
           urls.map(async (url) => {
             try {
-              const resp = await fetchWithTimeout(url, 8000);
-              return resp.ok ? resp.arrayBuffer() : null;
+              const resp = fetchWithTimeout(url, 8000);
+              return (await resp).ok ? (await resp).arrayBuffer() : null;
             } catch {
               return null;
             }
@@ -314,12 +509,31 @@ export class SkiaFontManager {
     return false;
   }
 
+  /**
+   * Build a set of all native (OS-installed) font families using the
+   * Local Font Access API (Chrome 103+, Edge 103+).
+   * Falls back to empty set if API is unavailable or permission denied.
+   * Results are cached after the first successful call.
+   */
+  private async getNativeFontSet(): Promise<Set<string>> {
+    if (this.nativeFontSet) return this.nativeFontSet;
+
+    // Try to enumerate native fonts if we haven't already
+    if (this.nativeFontPermission !== 'denied' && this.nativeFontPermission !== 'unavailable') {
+      await this.requestNativeFontAccess();
+    }
+
+    return this.nativeFontSet ?? new Set();
+  }
+
   dispose() {
     this.provider.delete();
     this.loadedFamilies.clear();
     this.failedFamilies.clear();
     this.systemFontFamilies.clear();
     this.pendingFetches.clear();
+    this.nativeFontSet = null;
+    this.nativeFontMap.clear();
   }
 }
 

package/src/index.ts

@@ -25,7 +25,10 @@ export type { RenderNode, ViewportState, PenRendererOptions, IconLookupFn } from
 export { SkiaNodeRenderer } from './node-renderer.js';
 export { SkiaTextRenderer } from './text-renderer.js';
 export { SkiaFontManager, BUNDLED_FONT_FAMILIES } from './font-manager.js';
-export type { FontManagerOptions } from './font-manager.js';
+export type {
+  FontManagerOptions,
+  NativeFontPermission as LocalFontPermission,
+} from './font-manager.js';
 export { SkiaImageLoader } from './image-loader.js';
 export { SpatialIndex } from './spatial-index.js';
 export {