@zseven-w/pen-core 0.6.0 → 0.7.1

package/src/__tests__/layout-engine.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest'
-import type { PenNode } from '@zseven-w/pen-types'
+import { describe, it, expect } from 'vitest';
+import type { PenNode } from '@zseven-w/pen-types';
 import {
   resolvePadding,
   isNodeVisible,
@@ -7,147 +7,233 @@ import {
   getNodeWidth,
   getNodeHeight,
   computeLayoutPositions,
-} from '../layout/engine'
+} from '../layout/engine';
 
-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 rect = (id: string, w = 50, h = 30): PenNode => ({
-  id, type: 'rectangle', x: 0, y: 0, width: w, height: h,
-})
+  id,
+  type: 'rectangle',
+  x: 0,
+  y: 0,
+  width: w,
+  height: h,
+});
 
 describe('layout-engine', () => {
   describe('resolvePadding', () => {
     it('returns zero for undefined', () => {
-      expect(resolvePadding(undefined)).toEqual({ top: 0, right: 0, bottom: 0, left: 0 })
-    })
+      expect(resolvePadding(undefined)).toEqual({ top: 0, right: 0, bottom: 0, left: 0 });
+    });
 
     it('resolves uniform padding', () => {
-      expect(resolvePadding(10)).toEqual({ top: 10, right: 10, bottom: 10, left: 10 })
-    })
+      expect(resolvePadding(10)).toEqual({ top: 10, right: 10, bottom: 10, left: 10 });
+    });
 
     it('resolves [vertical, horizontal]', () => {
-      expect(resolvePadding([10, 20])).toEqual({ top: 10, right: 20, bottom: 10, left: 20 })
-    })
+      expect(resolvePadding([10, 20])).toEqual({ top: 10, right: 20, bottom: 10, left: 20 });
+    });
 
     it('resolves [top, right, bottom, left]', () => {
-      expect(resolvePadding([1, 2, 3, 4])).toEqual({ top: 1, right: 2, bottom: 3, left: 4 })
-    })
+      expect(resolvePadding([1, 2, 3, 4])).toEqual({ top: 1, right: 2, bottom: 3, left: 4 });
+    });
 
     it('returns zero for string (variable ref)', () => {
-      expect(resolvePadding('$spacing')).toEqual({ top: 0, right: 0, bottom: 0, left: 0 })
-    })
-  })
+      expect(resolvePadding('$spacing')).toEqual({ top: 0, right: 0, bottom: 0, left: 0 });
+    });
+  });
 
   describe('isNodeVisible', () => {
     it('returns true by default', () => {
-      expect(isNodeVisible(rect('a'))).toBe(true)
-    })
+      expect(isNodeVisible(rect('a'))).toBe(true);
+    });
 
     it('returns false when visible is false', () => {
-      expect(isNodeVisible({ ...rect('a'), visible: false })).toBe(false)
-    })
-  })
+      expect(isNodeVisible({ ...rect('a'), visible: false })).toBe(false);
+    });
+
+    it('returns false when enabled is false', () => {
+      expect(isNodeVisible({ ...rect('a'), enabled: false } as PenNode)).toBe(false);
+    });
+  });
 
   describe('inferLayout', () => {
     it('returns undefined for non-frame nodes', () => {
-      expect(inferLayout(rect('a'))).toBeUndefined()
-    })
+      expect(inferLayout(rect('a'))).toBeUndefined();
+    });
 
     it('infers horizontal when gap is set', () => {
-      expect(inferLayout(frame({ gap: 10, children: [] }))).toBe('horizontal')
-    })
+      expect(inferLayout(frame({ gap: 10, children: [] }))).toBe('horizontal');
+    });
 
     it('infers horizontal when padding is set', () => {
-      expect(inferLayout(frame({ padding: 10, children: [] }))).toBe('horizontal')
-    })
+      expect(inferLayout(frame({ padding: 10, children: [] }))).toBe('horizontal');
+    });
 
     it('returns undefined when no layout hints', () => {
-      expect(inferLayout(frame({ children: [rect('a')] }))).toBeUndefined()
-    })
-  })
+      expect(inferLayout(frame({ children: [rect('a')] }))).toBeUndefined();
+    });
+  });
 
   describe('getNodeWidth / getNodeHeight', () => {
     it('returns explicit width', () => {
-      expect(getNodeWidth(rect('a', 200))).toBe(200)
-    })
+      expect(getNodeWidth(rect('a', 200))).toBe(200);
+    });
 
     it('returns explicit height', () => {
-      expect(getNodeHeight(rect('a', 50, 100))).toBe(100)
-    })
+      expect(getNodeHeight(rect('a', 50, 100))).toBe(100);
+    });
 
     it('estimates text width', () => {
-      const text: PenNode = { id: 't', type: 'text', content: 'Hello World', fontSize: 16 }
-      expect(getNodeWidth(text)).toBeGreaterThan(0)
-    })
-  })
+      const text: PenNode = { id: 't', type: 'text', content: 'Hello World', fontSize: 16 };
+      expect(getNodeWidth(text)).toBeGreaterThan(0);
+    });
+  });
 
   describe('computeLayoutPositions', () => {
     it('positions children horizontally', () => {
       const parent = frame({
-        width: 300, height: 100,
-        layout: 'horizontal', gap: 10,
+        width: 300,
+        height: 100,
+        layout: 'horizontal',
+        gap: 10,
         children: [rect('a', 50, 30), rect('b', 50, 30)],
-      })
-      const result = computeLayoutPositions(parent, (parent as PenNode & { children: PenNode[] }).children)
-      expect(result[0].x).toBe(0)
-      expect(result[0].y).toBe(0)
-      expect(result[1].x).toBe(60) // 50 + 10 gap
-    })
+      });
+      const result = computeLayoutPositions(
+        parent,
+        (parent as PenNode & { children: PenNode[] }).children,
+      );
+      expect(result[0].x).toBe(0);
+      expect(result[0].y).toBe(0);
+      expect(result[1].x).toBe(60); // 50 + 10 gap
+    });
 
     it('positions children vertically', () => {
       const parent = frame({
-        width: 100, height: 300,
-        layout: 'vertical', gap: 10,
+        width: 100,
+        height: 300,
+        layout: 'vertical',
+        gap: 10,
         children: [rect('a', 50, 30), rect('b', 50, 30)],
-      })
-      const result = computeLayoutPositions(parent, (parent as PenNode & { children: PenNode[] }).children)
-      expect(result[0].x).toBe(0)
-      expect(result[0].y).toBe(0)
-      expect(result[1].y).toBe(40) // 30 + 10 gap
-    })
+      });
+      const result = computeLayoutPositions(
+        parent,
+        (parent as PenNode & { children: PenNode[] }).children,
+      );
+      expect(result[0].x).toBe(0);
+      expect(result[0].y).toBe(0);
+      expect(result[1].y).toBe(40); // 30 + 10 gap
+    });
 
     it('applies padding', () => {
       const parent = frame({
-        width: 300, height: 100,
-        layout: 'horizontal', padding: 20,
+        width: 300,
+        height: 100,
+        layout: 'horizontal',
+        padding: 20,
         children: [rect('a', 50, 30)],
-      })
-      const result = computeLayoutPositions(parent, (parent as PenNode & { children: PenNode[] }).children)
-      expect(result[0].x).toBe(20)
-      expect(result[0].y).toBe(20)
-    })
+      });
+      const result = computeLayoutPositions(
+        parent,
+        (parent as PenNode & { children: PenNode[] }).children,
+      );
+      expect(result[0].x).toBe(20);
+      expect(result[0].y).toBe(20);
+    });
 
     it('centers children on cross axis', () => {
       const parent = frame({
-        width: 300, height: 100,
-        layout: 'horizontal', alignItems: 'center',
+        width: 300,
+        height: 100,
+        layout: 'horizontal',
+        alignItems: 'center',
+        children: [rect('a', 50, 30)],
+      });
+      const result = computeLayoutPositions(
+        parent,
+        (parent as PenNode & { children: PenNode[] }).children,
+      );
+      expect(result[0].y).toBe(35); // (100 - 30) / 2
+    });
+
+    it('maps alignItems="baseline" to end-alignment (engine has no baseline metric)', () => {
+      // LLMs routinely emit alignItems: 'baseline' from web CSS reflex
+      // for "big number + small unit" patterns like "72 BPM". The
+      // layout engine doesn't compute text baselines; the closest
+      // visually correct fallback is end-alignment (both children
+      // bottom-pinned). Locks in that `baseline` no longer falls
+      // through to the `start` default.
+      //
+      // `baseline` is not part of the TS `alignItems` union, so we
+      // cast through unknown — the normalizer accepts any string and
+      // that's exactly the behavior we want to exercise here.
+      const parent = frame({
+        width: 300,
+        height: 100,
+        layout: 'horizontal',
+        alignItems: 'baseline' as unknown as 'start' | 'center' | 'end',
+        children: [rect('big', 120, 80), rect('unit', 60, 20)],
+      });
+      const result = computeLayoutPositions(
+        parent,
+        (parent as PenNode & { children: PenNode[] }).children,
+      );
+      expect(result[0].y).toBe(20); // 100 - 80 (big pinned to bottom)
+      expect(result[1].y).toBe(80); // 100 - 20 (unit pinned to bottom)
+    });
+
+    it('maps alignItems="flex-end" and "bottom" to end (CSS/alias passthrough)', () => {
+      // `flex-end` is a CSS alias that the normalizer accepts but the
+      // TS union doesn't — cast through unknown same as the baseline
+      // test above.
+      const parent = frame({
+        width: 300,
+        height: 100,
+        layout: 'horizontal',
+        alignItems: 'flex-end' as unknown as 'start' | 'center' | 'end',
         children: [rect('a', 50, 30)],
-      })
-      const result = computeLayoutPositions(parent, (parent as PenNode & { children: PenNode[] }).children)
-      expect(result[0].y).toBe(35) // (100 - 30) / 2
-    })
+      });
+      const result = computeLayoutPositions(
+        parent,
+        (parent as PenNode & { children: PenNode[] }).children,
+      );
+      expect(result[0].y).toBe(70); // 100 - 30
+    });
 
     it('filters invisible children', () => {
       const parent = frame({
-        width: 300, height: 100,
+        width: 300,
+        height: 100,
         layout: 'horizontal',
         children: [rect('a', 50, 30), { ...rect('b', 50, 30), visible: false }],
-      })
-      const result = computeLayoutPositions(parent, (parent as PenNode & { children: PenNode[] }).children)
-      expect(result).toHaveLength(1)
-    })
+      });
+      const result = computeLayoutPositions(
+        parent,
+        (parent as PenNode & { children: PenNode[] }).children,
+      );
+      expect(result).toHaveLength(1);
+    });
 
     it('returns visible children as-is when layout is none', () => {
       const parent = frame({
-        width: 300, height: 100,
+        width: 300,
+        height: 100,
         layout: 'none',
         children: [rect('a', 50, 30)],
-      })
-      const result = computeLayoutPositions(parent, (parent as PenNode & { children: PenNode[] }).children)
-      expect(result).toHaveLength(1)
-      expect(result[0].id).toBe('a')
-    })
-  })
-})
+      });
+      const result = computeLayoutPositions(
+        parent,
+        (parent as PenNode & { children: PenNode[] }).children,
+      );
+      expect(result).toHaveLength(1);
+      expect(result[0].id).toBe('a');
+    });
+  });
+});

package/src/__tests__/merge-helpers.test.ts

@@ -0,0 +1,143 @@
+// packages/pen-core/src/__tests__/merge-helpers.test.ts
+import { describe, it, expect } from 'vitest';
+import type { PenDocument, PenNode } from '@zseven-w/pen-types';
+import {
+  indexNodesById,
+  getAllPages,
+  nodeFieldsEqual,
+  jsonEqual,
+  stripChildren,
+} from '../merge/merge-helpers';
+
+const rect = (id: string, props: Partial<PenNode> = {}): PenNode =>
+  ({ id, type: 'rectangle', x: 0, y: 0, width: 10, height: 10, ...props }) as PenNode;
+
+const frame = (id: string, children: PenNode[] = [], props: Partial<PenNode> = {}): PenNode =>
+  ({
+    id,
+    type: 'frame',
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    children,
+    ...props,
+  }) as PenNode;
+
+const docWithPages = (pages: Array<{ id: string; children: PenNode[] }>): PenDocument => ({
+  version: '1.0.0',
+  pages: pages.map((p) => ({ id: p.id, name: p.id, children: p.children })),
+  children: [],
+});
+
+const docLegacy = (children: PenNode[]): PenDocument => ({
+  version: '1.0.0',
+  children,
+});
+
+describe('merge-helpers', () => {
+  describe('indexNodesById', () => {
+    it('indexes a flat top-level node with pageId and null parentId', () => {
+      const doc = docWithPages([{ id: 'page-1', children: [rect('r1')] }]);
+      const idx = indexNodesById(doc);
+      expect(idx.size).toBe(1);
+      const r1 = idx.get('r1');
+      expect(r1).toBeDefined();
+      expect(r1!.pageId).toBe('page-1');
+      expect(r1!.parentId).toBeNull();
+      expect(r1!.index).toBe(0);
+    });
+
+    it('indexes nested nodes with the correct parent id', () => {
+      const inner = rect('inner');
+      const outer = frame('outer', [inner]);
+      const doc = docWithPages([{ id: 'page-1', children: [outer] }]);
+      const idx = indexNodesById(doc);
+      expect(idx.size).toBe(2);
+      expect(idx.get('outer')!.parentId).toBeNull();
+      expect(idx.get('inner')!.parentId).toBe('outer');
+      expect(idx.get('inner')!.pageId).toBe('page-1');
+    });
+
+    it('uses pageId === null for legacy single-page documents', () => {
+      const doc = docLegacy([rect('r1')]);
+      const idx = indexNodesById(doc);
+      const r1 = idx.get('r1');
+      expect(r1!.pageId).toBeNull();
+      expect(r1!.parentId).toBeNull();
+    });
+
+    it('records correct index within parent.children', () => {
+      const doc = docWithPages([{ id: 'page-1', children: [rect('a'), rect('b'), rect('c')] }]);
+      const idx = indexNodesById(doc);
+      expect(idx.get('a')!.index).toBe(0);
+      expect(idx.get('b')!.index).toBe(1);
+      expect(idx.get('c')!.index).toBe(2);
+    });
+  });
+
+  describe('getAllPages', () => {
+    it('returns explicit pages when the document has them', () => {
+      const doc = docWithPages([
+        { id: 'p1', children: [rect('a')] },
+        { id: 'p2', children: [rect('b')] },
+      ]);
+      const pages = getAllPages(doc);
+      expect(pages).toHaveLength(2);
+      expect(pages[0].id).toBe('p1');
+      expect(pages[1].id).toBe('p2');
+    });
+
+    it('returns one synthetic page with id null for legacy documents', () => {
+      const doc = docLegacy([rect('r1'), rect('r2')]);
+      const pages = getAllPages(doc);
+      expect(pages).toHaveLength(1);
+      expect(pages[0].id).toBeNull();
+      expect(pages[0].children).toHaveLength(2);
+    });
+  });
+
+  describe('nodeFieldsEqual / stripChildren', () => {
+    it('returns true for two nodes that differ only in children', () => {
+      const a = frame('f', [rect('a')]);
+      const b = frame('f', [rect('b'), rect('c')]);
+      expect(nodeFieldsEqual(a, b)).toBe(true);
+    });
+
+    it('returns false when an atomic field differs', () => {
+      const a = rect('r', { width: 10 });
+      const b = rect('r', { width: 20 });
+      expect(nodeFieldsEqual(a, b)).toBe(false);
+    });
+
+    it('stripChildren removes the children field without mutating the input', () => {
+      const original = frame('f', [rect('child')]);
+      const stripped = stripChildren(original);
+      expect((stripped as { children?: unknown }).children).toBeUndefined();
+      // Original is untouched
+      expect((original as { children?: unknown }).children).toBeDefined();
+    });
+  });
+
+  describe('jsonEqual', () => {
+    it('returns true for primitives that are ===', () => {
+      expect(jsonEqual(1, 1)).toBe(true);
+      expect(jsonEqual('a', 'a')).toBe(true);
+      expect(jsonEqual(null, null)).toBe(true);
+    });
+
+    it('returns true for deeply equal objects regardless of key order', () => {
+      const a = { x: 1, y: 2 };
+      const b = { y: 2, x: 1 };
+      expect(jsonEqual(a, b)).toBe(true);
+    });
+
+    it('returns false for objects with different values', () => {
+      expect(jsonEqual({ x: 1 }, { x: 2 })).toBe(false);
+    });
+
+    it('returns true for nested objects with same content', () => {
+      expect(jsonEqual({ a: { b: [1, 2] } }, { a: { b: [1, 2] } })).toBe(true);
+    });
+  });
+});

package/src/__tests__/node-diff.test.ts

@@ -0,0 +1,139 @@
+// packages/pen-core/src/__tests__/node-diff.test.ts
+import { describe, it, expect } from 'vitest';
+import type { PenDocument, PenNode } from '@zseven-w/pen-types';
+import { diffDocuments } from '../merge/node-diff';
+
+const rect = (id: string, props: Partial<PenNode> = {}): PenNode =>
+  ({ id, type: 'rectangle', x: 0, y: 0, width: 10, height: 10, ...props }) as PenNode;
+
+const frame = (id: string, children: PenNode[] = [], props: Partial<PenNode> = {}): PenNode =>
+  ({
+    id,
+    type: 'frame',
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    children,
+    ...props,
+  }) as PenNode;
+
+const doc = (children: PenNode[]): PenDocument => ({
+  version: '1.0.0',
+  pages: [{ id: 'page-1', name: 'page-1', children }],
+  children: [],
+});
+
+describe('diffDocuments', () => {
+  it('returns empty for two empty documents', () => {
+    const empty = doc([]);
+    expect(diffDocuments(empty, empty)).toEqual([]);
+  });
+
+  it('emits one add for a new top-level node', () => {
+    const before = doc([]);
+    const after = doc([rect('r1')]);
+    const patches = diffDocuments(before, after);
+    expect(patches).toHaveLength(1);
+    expect(patches[0].op).toBe('add');
+    expect(patches[0].nodeId).toBe('r1');
+    expect(patches[0].pageId).toBe('page-1');
+    expect(patches[0].parentId).toBeNull();
+    expect(patches[0].index).toBe(0);
+  });
+
+  it('emits one remove for a deleted top-level node', () => {
+    const before = doc([rect('r1')]);
+    const after = doc([]);
+    const patches = diffDocuments(before, after);
+    expect(patches).toHaveLength(1);
+    expect(patches[0].op).toBe('remove');
+    expect(patches[0].nodeId).toBe('r1');
+  });
+
+  it('returns empty for an unchanged single node', () => {
+    const a = doc([rect('r1')]);
+    const b = doc([rect('r1')]);
+    expect(diffDocuments(a, b)).toEqual([]);
+  });
+
+  it('emits a modify with changed and before fields when an atomic field changes', () => {
+    const before = doc([rect('r1', { width: 10 })]);
+    const after = doc([rect('r1', { width: 20 })]);
+    const patches = diffDocuments(before, after);
+    expect(patches).toHaveLength(1);
+    expect(patches[0].op).toBe('modify');
+    expect(patches[0].nodeId).toBe('r1');
+    expect(patches[0].fields).toEqual({ width: 20 });
+    expect(patches[0].beforeFields).toEqual({ width: 10 });
+  });
+
+  it('emits one move when a node is reparented within the same page', () => {
+    const inner = rect('inner');
+    const f1 = frame('f1', [inner]);
+    const f2 = frame('f2', []);
+    const before = doc([f1, f2]);
+    // After: inner moved into f2
+    const after = doc([frame('f1', []), frame('f2', [rect('inner')])]);
+    const patches = diffDocuments(before, after);
+    // Expect at least one move op for inner (and no modify since fields unchanged)
+    const moves = patches.filter((p) => p.op === 'move');
+    expect(moves).toHaveLength(1);
+    expect(moves[0].nodeId).toBe('inner');
+    expect(moves[0].parentId).toBe('f2');
+  });
+
+  it('emits move when a node moves to a different page', () => {
+    const inner = rect('inner');
+    const before: PenDocument = {
+      version: '1.0.0',
+      pages: [
+        { id: 'p1', name: 'p1', children: [inner] },
+        { id: 'p2', name: 'p2', children: [] },
+      ],
+      children: [],
+    };
+    const after: PenDocument = {
+      version: '1.0.0',
+      pages: [
+        { id: 'p1', name: 'p1', children: [] },
+        { id: 'p2', name: 'p2', children: [rect('inner')] },
+      ],
+      children: [],
+    };
+    const patches = diffDocuments(before, after);
+    const moves = patches.filter((p) => p.op === 'move');
+    expect(moves).toHaveLength(1);
+    expect(moves[0].nodeId).toBe('inner');
+    expect(moves[0].pageId).toBe('p2');
+  });
+
+  it('emits add for a nested child added inside an existing frame', () => {
+    const before = doc([frame('f1', [])]);
+    const after = doc([frame('f1', [rect('r1')])]);
+    const patches = diffDocuments(before, after);
+    const adds = patches.filter((p) => p.op === 'add');
+    expect(adds).toHaveLength(1);
+    expect(adds[0].nodeId).toBe('r1');
+    expect(adds[0].parentId).toBe('f1');
+  });
+
+  it('emits a move when a node is reordered within the same parent', () => {
+    const before = doc([rect('a'), rect('b'), rect('c')]);
+    const after = doc([rect('b'), rect('a'), rect('c')]);
+    const patches = diffDocuments(before, after);
+    const moves = patches.filter((p) => p.op === 'move');
+    // a moves from index 0 to 1, b moves from index 1 to 0, c stays
+    expect(moves.map((m) => m.nodeId).sort()).toEqual(['a', 'b']);
+  });
+
+  it('produces add + modify + remove in a single mixed diff', () => {
+    const before = doc([rect('a', { width: 10 }), rect('b')]);
+    const after = doc([rect('a', { width: 20 }), rect('c')]);
+    const patches = diffDocuments(before, after);
+    expect(patches.find((p) => p.op === 'modify' && p.nodeId === 'a')).toBeDefined();
+    expect(patches.find((p) => p.op === 'remove' && p.nodeId === 'b')).toBeDefined();
+    expect(patches.find((p) => p.op === 'add' && p.nodeId === 'c')).toBeDefined();
+    expect(patches).toHaveLength(3);
+  });
+});

package/src/__tests__/node-helpers.test.ts

@@ -1,30 +1,30 @@
-import { describe, it, expect } from 'vitest'
-import type { PenNode } from '@zseven-w/pen-types'
-import { isBadgeOverlayNode } from '../node-helpers'
+import { describe, it, expect } from 'vitest';
+import type { PenNode } from '@zseven-w/pen-types';
+import { isBadgeOverlayNode } from '../node-helpers';
 
 describe('isBadgeOverlayNode', () => {
   it('returns true for badge role', () => {
-    const node: PenNode = { id: '1', type: 'rectangle', role: 'badge' }
-    expect(isBadgeOverlayNode(node)).toBe(true)
-  })
+    const node: PenNode = { id: '1', type: 'rectangle', role: 'badge' };
+    expect(isBadgeOverlayNode(node)).toBe(true);
+  });
 
   it('returns true for pill role', () => {
-    const node: PenNode = { id: '1', type: 'rectangle', role: 'pill' }
-    expect(isBadgeOverlayNode(node)).toBe(true)
-  })
+    const node: PenNode = { id: '1', type: 'rectangle', role: 'pill' };
+    expect(isBadgeOverlayNode(node)).toBe(true);
+  });
 
   it('returns true for name containing "badge"', () => {
-    const node: PenNode = { id: '1', type: 'rectangle', name: 'Notification Badge' }
-    expect(isBadgeOverlayNode(node)).toBe(true)
-  })
+    const node: PenNode = { id: '1', type: 'rectangle', name: 'Notification Badge' };
+    expect(isBadgeOverlayNode(node)).toBe(true);
+  });
 
   it('returns true for name containing "overlay"', () => {
-    const node: PenNode = { id: '1', type: 'rectangle', name: 'Image Overlay' }
-    expect(isBadgeOverlayNode(node)).toBe(true)
-  })
+    const node: PenNode = { id: '1', type: 'rectangle', name: 'Image Overlay' };
+    expect(isBadgeOverlayNode(node)).toBe(true);
+  });
 
   it('returns false for regular nodes', () => {
-    const node: PenNode = { id: '1', type: 'rectangle', name: 'Button' }
-    expect(isBadgeOverlayNode(node)).toBe(false)
-  })
-})
+    const node: PenNode = { id: '1', type: 'rectangle', name: 'Button' };
+    expect(isBadgeOverlayNode(node)).toBe(false);
+  });
+});