@zseven-w/pen-renderer 0.6.0 → 0.7.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ZSeven—W
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,64 +1,190 @@
 # @zseven-w/pen-renderer
 
-Standalone CanvasKit/Skia renderer for [OpenPencil](https://github.com/nicepkg/openpencil) design files. Render `.op` documents to a GPU-accelerated canvas — works in browsers, Node.js, and headless environments.
+Standalone CanvasKit/Skia renderer for [OpenPencil](https://github.com/ZSeven-W/openpencil) design files. Render `.op` documents to a GPU-accelerated canvas — works in browsers, Node.js, and headless environments.
 
 ## Install
 
 ```bash
 npm install @zseven-w/pen-renderer canvaskit-wasm
+# or
+bun add @zseven-w/pen-renderer canvaskit-wasm
 ```
 
 `canvaskit-wasm` is a peer dependency — you provide the WASM binary.
 
-## Usage
+## Overview
 
-```ts
-import { loadCanvasKit, PenRenderer } from '@zseven-w/pen-renderer'
+`pen-renderer` is a pure TypeScript + CanvasKit rendering pipeline with no React or framework dependency. It takes a `PenDocument` and renders it to a WebGL surface with GPU acceleration. The pipeline:
 
-// Initialize CanvasKit
-await loadCanvasKit()
+```
+PenDocument → flattenToRenderNodes() → absolute positions → SkiaNodeRenderer → GPU canvas
+                                           ↓
+                                    SpatialIndex (R-tree) → hitTest / searchRect
+```
+
+## Quick Start
+
+```typescript
+import { loadCanvasKit, PenRenderer } from '@zseven-w/pen-renderer';
+
+// 1. Initialize CanvasKit WASM (once, globally)
+await loadCanvasKit();
 
-// Create renderer on a canvas element
+// 2. Create renderer on a canvas element
 const renderer = new PenRenderer(canvas, document, {
   width: 1920,
   height: 1080,
-})
+});
 
-// Render
-renderer.render()
+// 3. Render
+renderer.render();
+
+// 4. Interact
+renderer.zoomToFit();
+renderer.zoomTo(1.5, centerX, centerY);
+renderer.pan(deltaX, deltaY);
+const node = renderer.hitTest(mouseX, mouseY);
+
+// 5. Cleanup
+renderer.dispose();
 ```
 
-## API
+## Features
 
-### High-level
+### High-Level Renderer
 
-- **`loadCanvasKit()`** — Initialize the CanvasKit WASM module
-- **`PenRenderer`** — Full-featured renderer with viewport, selection, and interaction support
+`PenRenderer` provides a complete rendering solution with viewport, selection, and interaction:
+
+```typescript
+const renderer = new PenRenderer(canvas, document, options);
+
+renderer.setDocument(newDoc); // Update document
+renderer.render(); // Trigger re-render
+renderer.zoomToFit(); // Fit content to viewport
+renderer.zoomTo(zoom, cx, cy); // Zoom to point
+renderer.pan(dx, dy); // Pan viewport
+renderer.hitTest(x, y); // Hit test at screen coords
+renderer.dispose(); // Free resources
+```
 
 ### Document Flattening
 
-Pre-process documents for rendering:
+Pre-process the document tree into flat render nodes with absolute positions:
+
+```typescript
+import {
+  flattenToRenderNodes,
+  resolveRefs,
+  premeasureTextHeights,
+  remapIds,
+} from '@zseven-w/pen-renderer';
+
+// Flatten tree → absolute positions
+const renderNodes = flattenToRenderNodes(children, viewport);
+
+// Resolve $ref nodes to their source
+const resolved = resolveRefs(renderNodes, document);
 
-```ts
-import { flattenToRenderNodes, resolveRefs, premeasureTextHeights } from '@zseven-w/pen-renderer'
+// Pre-measure text heights using Canvas 2D (for accurate layout)
+premeasureTextHeights(renderNodes, canvasContext);
 ```
 
-### Viewport Utilities
+### Viewport Math
 
-```ts
-import { viewportMatrix, screenToScene, sceneToScreen, zoomToPoint } from '@zseven-w/pen-renderer'
+Camera transforms for pan, zoom, and coordinate conversion:
+
+```typescript
+import {
+  viewportMatrix,
+  screenToScene,
+  sceneToScreen,
+  zoomToPoint,
+  getViewportBounds,
+  isRectInViewport,
+} from '@zseven-w/pen-renderer';
+
+const matrix = viewportMatrix(zoom, panX, panY); // 3x3 CanvasKit matrix
+const scene = screenToScene(mouseX, mouseY, viewport);
+const screen = sceneToScreen(nodeX, nodeY, viewport);
+const newVp = zoomToPoint(viewport, 2.0, centerX, centerY);
 ```
 
-### Low-level Renderers
+### Spatial Index
+
+R-tree backed spatial queries for click hit testing and marquee selection:
+
+```typescript
+import { SpatialIndex } from '@zseven-w/pen-renderer';
+
+const index = new SpatialIndex();
+index.rebuild(renderNodes);
+
+const clicked = index.hitTest(x, y); // topmost node at point
+const selected = index.searchRect(x, y, w, h); // all nodes in rect
+const node = index.get(nodeId); // lookup by ID
+```
+
+### Low-Level Renderers
 
 For custom rendering pipelines:
 
-- `SkiaNodeRenderer` — Renders individual nodes to a Skia canvas
-- `SkiaTextRenderer` — Text layout and rendering
-- `SkiaFontManager` — Font loading and management
-- `SkiaImageLoader` — Async image loading with caching
-- `SpatialIndex` — R-tree spatial index for hit testing
+```typescript
+import {
+  SkiaNodeRenderer,
+  SkiaTextRenderer,
+  SkiaFontManager,
+  SkiaImageLoader,
+} from '@zseven-w/pen-renderer';
+```
+
+| Class              | Handles                                                                                                                                                                                 |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `SkiaNodeRenderer` | All node types — rectangles, ellipses, paths, images, icons, lines, polygons. Fills (solid, gradient, image), strokes, effects (shadow, blur), corner radius, clip, opacity, blend mode |
+| `SkiaTextRenderer` | Text layout and rendering via Paragraph API with bitmap fallback. FIFO caches (256 MB text, 64 MB paragraph)                                                                            |
+| `SkiaFontManager`  | Font loading — bundled fonts (Inter, Poppins, Roboto, etc.) + Google Fonts CSS fetching                                                                                                 |
+| `SkiaImageLoader`  | Async image loading with caching and custom source resolvers                                                                                                                            |
+
+### Thumbnail Generation
+
+Render individual nodes to offscreen thumbnails (used for git conflict UI, exports):
+
+```typescript
+import { renderNodeThumbnail } from '@zseven-w/pen-renderer';
+
+const dataUrl = renderNodeThumbnail(node, { width: 200, height: 200 });
+```
+
+### Paint Utilities
+
+```typescript
+import {
+  parseColor,
+  resolveFillColor,
+  resolveStrokeColor,
+  wrapLine,
+  cssFontFamily,
+  sanitizeSvgPath,
+} from '@zseven-w/pen-renderer';
+
+const color = parseColor('#2563EB'); // CanvasKit Color4f
+```
+
+## API Reference
+
+| Category      | Exports                                                                                |
+| ------------- | -------------------------------------------------------------------------------------- |
+| **Init**      | `loadCanvasKit(options?)`, `getCanvasKit()`                                            |
+| **Renderer**  | `PenRenderer`                                                                          |
+| **Flatten**   | `flattenToRenderNodes`, `resolveRefs`, `premeasureTextHeights`, `remapIds`             |
+| **Viewport**  | `viewportMatrix`, `screenToScene`, `sceneToScreen`, `zoomToPoint`, `getViewportBounds` |
+| **Spatial**   | `SpatialIndex` — `rebuild`, `hitTest`, `searchRect`, `get`                             |
+| **Node**      | `SkiaNodeRenderer`                                                                     |
+| **Text**      | `SkiaTextRenderer`                                                                     |
+| **Font**      | `SkiaFontManager`, `BUNDLED_FONT_FAMILIES`                                             |
+| **Image**     | `SkiaImageLoader`                                                                      |
+| **Paint**     | `parseColor`, `sanitizeSvgPath`, `cssFontFamily`                                       |
+| **Thumbnail** | `renderNodeThumbnail`                                                                  |
 
 ## License
 
-MIT
+[MIT](./LICENSE)

package/package.json

@@ -1,7 +1,24 @@
 {
   "name": "@zseven-w/pen-renderer",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Standalone CanvasKit/Skia renderer for OpenPencil (.op) design files",
+  "homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-renderer",
+  "bugs": {
+    "url": "https://github.com/ZSeven-W/openpencil/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "ZSeven-W",
+    "email": "xkayshen@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ZSeven-W/openpencil.git",
+    "directory": "packages/pen-renderer"
+  },
+  "files": [
+    "src"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -9,23 +26,20 @@
       "import": "./src/index.ts"
     }
   },
-  "files": [
-    "src"
-  ],
   "scripts": {
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@zseven-w/pen-types": "0.6.0",
-    "@zseven-w/pen-core": "0.6.0",
+    "@zseven-w/pen-core": "0.7.1",
+    "@zseven-w/pen-types": "0.7.1",
     "rbush": "^4.0.1"
   },
-  "peerDependencies": {
-    "canvaskit-wasm": "^0.40.0"
-  },
   "devDependencies": {
     "@types/rbush": "^4.0.0",
     "canvaskit-wasm": "^0.40.0",
     "typescript": "^5.7.2"
+  },
+  "peerDependencies": {
+    "canvaskit-wasm": "^0.40.0"
   }
 }

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

@@ -1,39 +1,87 @@
-import { describe, it, expect } from 'vitest'
-import type { PenNode } from '@zseven-w/pen-types'
-import { flattenToRenderNodes } from '../document-flattener'
+import { describe, it, expect } from 'vitest';
+import type { PenNode } from '@zseven-w/pen-types';
+import { flattenToRenderNodes } from '../document-flattener';
 
-const frame = (props: Partial<PenNode> & { children?: PenNode[] }): PenNode => ({
-  id: 'f1', type: 'frame', x: 0, y: 0, ...props,
-} as PenNode)
+const frame = (props: Partial<PenNode> & { children?: PenNode[] }): PenNode =>
+  ({
+    id: 'f1',
+    type: 'frame',
+    x: 0,
+    y: 0,
+    ...props,
+  }) as PenNode;
 
-const text = (id: string, content: string, props: Partial<PenNode> = {}): PenNode => ({
-  id, type: 'text', x: 0, y: 0, content, fontSize: 16, ...props,
-} as PenNode)
+const text = (id: string, content: string, props: Partial<PenNode> = {}): PenNode =>
+  ({
+    id,
+    type: 'text',
+    x: 0,
+    y: 0,
+    content,
+    fontSize: 16,
+    ...props,
+  }) as PenNode;
 
 describe('flattenToRenderNodes — dimension consistency', () => {
+  it('skips nodes disabled via enabled=false', () => {
+    const root = frame({
+      id: 'root',
+      width: 400,
+      height: 600,
+      children: [
+        { id: 'visible', type: 'rectangle', x: 0, y: 0, width: 120, height: 80 } as PenNode,
+        {
+          id: 'disabled',
+          type: 'rectangle',
+          x: 20,
+          y: 20,
+          width: 120,
+          height: 80,
+          enabled: false,
+        } as PenNode,
+      ],
+    });
+
+    const nodes = flattenToRenderNodes([root]);
+
+    expect(nodes.some((rn) => rn.node.id === 'visible')).toBe(true);
+    expect(nodes.some((rn) => rn.node.id === 'disabled')).toBe(false);
+  });
+
   it('absH uses getNodeHeight for text without height, not sizeToNumber 100 fallback', () => {
     // Simulates text after fixTextHeights deleted height
     const root = frame({
-      id: 'root', width: 400, height: 600, layout: 'vertical' as any,
+      id: 'root',
+      width: 400,
+      height: 600,
+      layout: 'vertical' as any,
       children: [
         // Text with no height property (deleted by fixTextHeights)
-        { id: 't1', type: 'text', content: 'Hello world', fontSize: 16,
-          width: 'fill_container' as any } as PenNode,
+        {
+          id: 't1',
+          type: 'text',
+          content: 'Hello world',
+          fontSize: 16,
+          width: 'fill_container' as any,
+        } as PenNode,
       ],
-    })
+    });
 
-    const nodes = flattenToRenderNodes([root])
-    const t1 = nodes.find(rn => rn.node.id === 't1')!
+    const nodes = flattenToRenderNodes([root]);
+    const t1 = nodes.find((rn) => rn.node.id === 't1')!;
 
     // absH should reflect estimated text height (~18-24px for single line at 16px),
     // NOT the 100px sizeToNumber fallback
-    expect(t1.absH).toBeLessThan(50)
-    expect(t1.absH).toBeGreaterThan(10)
-  })
+    expect(t1.absH).toBeLessThan(50);
+    expect(t1.absH).toBeGreaterThan(10);
+  });
 
   it('absW matches child layout width for frame with no explicit width', () => {
     const root = frame({
-      id: 'root', width: 400, height: 600, layout: 'vertical' as any,
+      id: 'root',
+      width: 400,
+      height: 600,
+      layout: 'vertical' as any,
       children: [
         frame({
           id: 'inner',
@@ -44,58 +92,74 @@ describe('flattenToRenderNodes — dimension consistency', () => {
           ],
         }),
       ],
-    })
+    });
 
-    const nodes = flattenToRenderNodes([root])
-    const inner = nodes.find(rn => rn.node.id === 'inner')!
+    const nodes = flattenToRenderNodes([root]);
+    const inner = nodes.find((rn) => rn.node.id === 'inner')!;
 
     // inner absW should come from getNodeWidth (fitContentWidth → 200),
     // not the sizeToNumber fallback of 100
-    expect(inner.absW).toBeGreaterThanOrEqual(200)
-  })
+    expect(inner.absW).toBeGreaterThanOrEqual(200);
+  });
 
   it('nested text nodes get correct positions and non-zero dimensions', () => {
     const root = frame({
-      id: 'root', width: 375, height: 812, layout: 'vertical' as any,
+      id: 'root',
+      width: 375,
+      height: 812,
+      layout: 'vertical' as any,
       padding: [20, 16],
       gap: 8,
       children: [
         frame({
-          id: 'card', width: 'fill_container' as any, height: 'fit_content' as any,
-          layout: 'vertical' as any, padding: [16, 16], gap: 8,
+          id: 'card',
+          width: 'fill_container' as any,
+          height: 'fit_content' as any,
+          layout: 'vertical' as any,
+          padding: [16, 16],
+          gap: 8,
           children: [
-            text('title', 'Card Title', { width: 'fill_container' as any, fontSize: 18, fontWeight: '600' }),
-            text('desc', 'Description text that may wrap.', { width: 'fill_container' as any, fontSize: 14 }),
+            text('title', 'Card Title', {
+              width: 'fill_container' as any,
+              fontSize: 18,
+              fontWeight: '600',
+            }),
+            text('desc', 'Description text that may wrap.', {
+              width: 'fill_container' as any,
+              fontSize: 14,
+            }),
           ],
         }),
       ],
-    })
+    });
 
-    const nodes = flattenToRenderNodes([root])
+    const nodes = flattenToRenderNodes([root]);
 
     for (const rn of nodes) {
-      expect(rn.absW, `${rn.node.id} width > 0`).toBeGreaterThan(0)
-      expect(rn.absH, `${rn.node.id} height > 0`).toBeGreaterThan(0)
+      expect(rn.absW, `${rn.node.id} width > 0`).toBeGreaterThan(0);
+      expect(rn.absH, `${rn.node.id} height > 0`).toBeGreaterThan(0);
     }
 
-    const card = nodes.find(rn => rn.node.id === 'card')!
-    const title = nodes.find(rn => rn.node.id === 'title')!
-    const desc = nodes.find(rn => rn.node.id === 'desc')!
+    const card = nodes.find((rn) => rn.node.id === 'card')!;
+    const title = nodes.find((rn) => rn.node.id === 'title')!;
+    const desc = nodes.find((rn) => rn.node.id === 'desc')!;
 
     // title inside card
-    expect(title.absX).toBeGreaterThan(card.absX)
-    expect(title.absY).toBeGreaterThan(card.absY)
+    expect(title.absX).toBeGreaterThan(card.absX);
+    expect(title.absY).toBeGreaterThan(card.absY);
 
     // desc below title
-    expect(desc.absY).toBeGreaterThan(title.absY)
-  })
+    expect(desc.absY).toBeGreaterThan(title.absY);
+  });
 
   it('absW/absH match nodeW/nodeH for frame without explicit dimensions', () => {
     // Frame has children but no explicit width — not inside a layout parent,
     // so computeLayoutPositions does NOT set width. This exposes the divergence
     // between sizeToNumber (fallback 100) and getNodeWidth (fitContent → 200).
     const root = frame({
-      id: 'root', width: 400, height: 600,
+      id: 'root',
+      width: 400,
+      height: 600,
       // No layout, gap, padding, or fill_container children → inferLayout returns undefined
       children: [
         frame({
@@ -106,96 +170,108 @@ describe('flattenToRenderNodes — dimension consistency', () => {
           ],
         }),
       ],
-    })
+    });
 
-    const nodes = flattenToRenderNodes([root])
-    const inner = nodes.find(rn => rn.node.id === 'inner')!
+    const nodes = flattenToRenderNodes([root]);
+    const inner = nodes.find((rn) => rn.node.id === 'inner')!;
 
     // getNodeWidth → fitContentWidth → 200 (from child rectangle)
     // Before fix: absW = 100 (sizeToNumber fallback). After fix: absW = 200.
-    expect(inner.absW).toBeGreaterThanOrEqual(200)
+    expect(inner.absW).toBeGreaterThanOrEqual(200);
     // getNodeHeight → fitContentHeight → 50 (from child rectangle)
     // Before fix: absH = 100 (fallback). After fix: absH = 50 (or greater).
-    expect(inner.absH).toBeGreaterThanOrEqual(50)
-    expect(inner.absH).toBeLessThan(100) // not the 100 fallback
-  })
+    expect(inner.absH).toBeGreaterThanOrEqual(50);
+    expect(inner.absH).toBeLessThan(100); // not the 100 fallback
+  });
 
   it('children with stripped x/y in layout frame get correct positions', () => {
     const root = frame({
-      id: 'root', width: 400, height: 600, layout: 'vertical' as any,
+      id: 'root',
+      width: 400,
+      height: 600,
+      layout: 'vertical' as any,
       padding: [20, 16],
       gap: 12,
       children: [
         // x/y stripped by sanitizeLayoutChildPositions
-        { id: 't1', type: 'text', content: 'First', fontSize: 16,
-          width: 'fill_container' as any } as PenNode,
-        { id: 't2', type: 'text', content: 'Second', fontSize: 16,
-          width: 'fill_container' as any } as PenNode,
+        {
+          id: 't1',
+          type: 'text',
+          content: 'First',
+          fontSize: 16,
+          width: 'fill_container' as any,
+        } as PenNode,
+        {
+          id: 't2',
+          type: 'text',
+          content: 'Second',
+          fontSize: 16,
+          width: 'fill_container' as any,
+        } as PenNode,
       ],
-    })
+    });
 
-    const nodes = flattenToRenderNodes([root])
-    const t1 = nodes.find(rn => rn.node.id === 't1')!
-    const t2 = nodes.find(rn => rn.node.id === 't2')!
+    const nodes = flattenToRenderNodes([root]);
+    const t1 = nodes.find((rn) => rn.node.id === 't1')!;
+    const t2 = nodes.find((rn) => rn.node.id === 't2')!;
 
     // t1 at padding offset
-    expect(t1.absX).toBe(16) // pad.left
-    expect(t1.absY).toBe(20) // pad.top
+    expect(t1.absX).toBe(16); // pad.left
+    expect(t1.absY).toBe(20); // pad.top
 
     // t2 below t1 + gap
-    expect(t2.absY).toBeGreaterThan(t1.absY + t1.absH)
-  })
+    expect(t2.absY).toBeGreaterThan(t1.absY + t1.absH);
+  });
 
   it('root frame clipRect matches absW/absH, not a divergent nodeW/nodeH', () => {
     // Root frame (depth=0) creates a clipRect for its children.
     // clipRect must use the same dimensions as the RenderNode's absW/absH.
     const root = frame({
-      id: 'root', width: 400, height: 600,
+      id: 'root',
+      width: 400,
+      height: 600,
       cornerRadius: 12,
       layout: 'vertical' as any,
-      children: [
-        text('t1', 'Hello', { width: 'fill_container' as any }),
-      ],
-    })
+      children: [text('t1', 'Hello', { width: 'fill_container' as any })],
+    });
 
-    const nodes = flattenToRenderNodes([root])
-    const rootRN = nodes.find(rn => rn.node.id === 'root')!
-    const t1 = nodes.find(rn => rn.node.id === 't1')!
+    const nodes = flattenToRenderNodes([root]);
+    const rootRN = nodes.find((rn) => rn.node.id === 'root')!;
+    const t1 = nodes.find((rn) => rn.node.id === 't1')!;
 
     // Root frame itself has no clipRect (it IS the clip source)
-    expect(rootRN.clipRect).toBeUndefined()
+    expect(rootRN.clipRect).toBeUndefined();
 
     // Child inherits root's clip — must match root's rendered dimensions
-    expect(t1.clipRect).toBeDefined()
-    expect(t1.clipRect!.w).toBe(rootRN.absW)
-    expect(t1.clipRect!.h).toBe(rootRN.absH)
-    expect(t1.clipRect!.x).toBe(rootRN.absX)
-    expect(t1.clipRect!.y).toBe(rootRN.absY)
-  })
+    expect(t1.clipRect).toBeDefined();
+    expect(t1.clipRect!.w).toBe(rootRN.absW);
+    expect(t1.clipRect!.h).toBe(rootRN.absH);
+    expect(t1.clipRect!.x).toBe(rootRN.absX);
+    expect(t1.clipRect!.y).toBe(rootRN.absY);
+  });
 
   it('root frame clipRect matches absW/absH for frame without explicit height', () => {
     // Frame with fit_content height — getNodeHeight computes from children.
     // clipRect.h must equal the RenderNode's absH, not a stale fallback.
     const root = frame({
-      id: 'root', width: 375,
+      id: 'root',
+      width: 375,
       // No explicit height — relies on getNodeHeight → fitContentHeight
       layout: 'vertical' as any,
       padding: [20, 16],
-      children: [
-        text('t1', 'Card title', { width: 'fill_container' as any, fontSize: 18 }),
-      ],
-    })
+      children: [text('t1', 'Card title', { width: 'fill_container' as any, fontSize: 18 })],
+    });
 
-    const nodes = flattenToRenderNodes([root])
-    const rootRN = nodes.find(rn => rn.node.id === 'root')!
-    const t1 = nodes.find(rn => rn.node.id === 't1')!
+    const nodes = flattenToRenderNodes([root]);
+    const rootRN = nodes.find((rn) => rn.node.id === 'root')!;
+    const t1 = nodes.find((rn) => rn.node.id === 't1')!;
 
     // absH should be computed from content, not 100 fallback
-    expect(rootRN.absH).toBeGreaterThan(0)
+    expect(rootRN.absH).toBeGreaterThan(0);
 
     // clipRect must match absH
-    expect(t1.clipRect).toBeDefined()
-    expect(t1.clipRect!.h).toBe(rootRN.absH)
-    expect(t1.clipRect!.w).toBe(rootRN.absW)
-  })
-})
+    expect(t1.clipRect).toBeDefined();
+    expect(t1.clipRect!.h).toBe(rootRN.absH);
+    expect(t1.clipRect!.w).toBe(rootRN.absW);
+  });
+});