@zseven-w/pen-core 0.5.2 → 0.7.0

package/src/__tests__/resolve-variables-recursive.test.ts

@@ -0,0 +1,173 @@
+import { describe, it, expect } from 'vitest';
+import type { PenNode } from '@zseven-w/pen-types';
+import { resolveNodeForCanvas } from '../variables/resolve';
+
+describe('resolveNodeForCanvas — recursive', () => {
+  const variables = {
+    spacing: { name: 'spacing', type: 'number' as const, value: 16 },
+    'bg-color': { name: 'bg-color', type: 'color' as const, value: '#ff0000' },
+  };
+
+  it('resolves $variable gap on nested child frame', () => {
+    const doc: PenNode = {
+      id: 'root',
+      type: 'frame',
+      x: 0,
+      y: 0,
+      width: 400,
+      height: 600,
+      layout: 'vertical',
+      children: [
+        {
+          id: 'child',
+          type: 'frame',
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 200,
+          layout: 'vertical',
+          gap: '$spacing' as unknown as number,
+          children: [
+            { id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello' },
+            { id: 'text2', type: 'text', x: 0, y: 0, content: 'World' },
+          ],
+        } as PenNode,
+      ],
+    } as PenNode;
+
+    const result = resolveNodeForCanvas(doc, variables);
+    const childFrame = (result as any).children[0];
+    expect(childFrame.gap).toBe(16);
+  });
+
+  it('resolves $variable fill on deeply nested text node', () => {
+    const doc: PenNode = {
+      id: 'root',
+      type: 'frame',
+      x: 0,
+      y: 0,
+      width: 400,
+      height: 600,
+      children: [
+        {
+          id: 'child',
+          type: 'frame',
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 200,
+          children: [
+            {
+              id: 'text1',
+              type: 'text',
+              x: 0,
+              y: 0,
+              content: 'Hello',
+              fill: [{ type: 'solid', color: '$bg-color' }],
+            } as PenNode,
+          ],
+        } as PenNode,
+      ],
+    } as PenNode;
+
+    const result = resolveNodeForCanvas(doc, variables);
+    const textNode = (result as any).children[0].children[0];
+    expect(textNode.fill[0].color).toBe('#ff0000');
+  });
+
+  it('resolves $variable padding on nested frame', () => {
+    const doc: PenNode = {
+      id: 'root',
+      type: 'frame',
+      x: 0,
+      y: 0,
+      width: 400,
+      height: 600,
+      children: [
+        {
+          id: 'child',
+          type: 'frame',
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 200,
+          padding: '$spacing' as unknown as number,
+          children: [],
+        } as PenNode,
+      ],
+    } as PenNode;
+
+    const result = resolveNodeForCanvas(doc, variables);
+    const childFrame = (result as any).children[0];
+    expect(childFrame.padding).toBe(16);
+  });
+
+  it('returns same reference when no variables exist', () => {
+    const doc: PenNode = {
+      id: 'root',
+      type: 'frame',
+      x: 0,
+      y: 0,
+      width: 400,
+      height: 600,
+      children: [{ id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello' }],
+    } as PenNode;
+
+    const result = resolveNodeForCanvas(doc, {});
+    expect(result).toBe(doc);
+  });
+
+  it('resolves $variable opacity on nested text node', () => {
+    const variables3 = {
+      'text-opacity': { name: 'text-opacity', type: 'number' as const, value: 0.5 },
+    };
+    const doc: PenNode = {
+      id: 'root',
+      type: 'frame',
+      x: 0,
+      y: 0,
+      width: 400,
+      height: 600,
+      children: [
+        {
+          id: 'child',
+          type: 'frame',
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 200,
+          children: [
+            {
+              id: 'text1',
+              type: 'text',
+              x: 0,
+              y: 0,
+              content: 'Hello',
+              opacity: '$text-opacity' as unknown as number,
+            } as PenNode,
+          ],
+        } as PenNode,
+      ],
+    } as PenNode;
+
+    const result = resolveNodeForCanvas(doc, variables3);
+    const textNode = (result as any).children[0].children[0];
+    expect(textNode.opacity).toBe(0.5);
+  });
+
+  it('preserves reference when children have no variables', () => {
+    const variables2 = { color1: { name: 'color1', type: 'color' as const, value: '#000' } };
+    const doc: PenNode = {
+      id: 'root',
+      type: 'frame',
+      x: 0,
+      y: 0,
+      width: 400,
+      height: 600,
+      children: [{ id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello' }],
+    } as PenNode;
+
+    const result = resolveNodeForCanvas(doc, variables2);
+    expect(result).toBe(doc);
+  });
+});

package/src/__tests__/strip-redundant-section-fills.test.ts

@@ -0,0 +1,278 @@
+import { describe, it, expect } from 'vitest';
+import type { PenNode } from '@zseven-w/pen-types';
+import { stripRedundantSectionFills } from '../layout/strip-redundant-section-fills';
+
+const frame = (props: Partial<PenNode> & { children?: PenNode[] }): PenNode =>
+  ({
+    id: 'f1',
+    type: 'frame',
+    ...props,
+  }) as PenNode;
+
+const solidFill = (color: string) => [{ type: 'solid' as const, color }];
+
+describe('stripRedundantSectionFills', () => {
+  it('strips a section fill that exactly matches the root fill', () => {
+    const section = frame({
+      id: 'sec1',
+      name: 'Section',
+      fill: solidFill('#1a1a2e'),
+      children: [frame({ id: 'child' })],
+    });
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [section],
+    });
+    const changed = stripRedundantSectionFills(root);
+    expect(changed).toBe(true);
+    expect((section as PenNode & { fill?: unknown }).fill).toBeUndefined();
+  });
+
+  it('strips a section fill that matches a common safe-dark tint', () => {
+    // Root has #1a1a2e (deep navy), section has #0A0A0A (near-black safe
+    // dark) — the classic M2.7 failure where the model picks a "safe"
+    // dark for every section root, hiding the intended root background.
+    const section = frame({
+      id: 'sec1',
+      name: 'Activity Rings Section',
+      fill: solidFill('#0A0A0A'),
+      children: [frame({ id: 'child' })],
+    });
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [section],
+    });
+    stripRedundantSectionFills(root);
+    expect((section as PenNode & { fill?: unknown }).fill).toBeUndefined();
+  });
+
+  it('does not strip fill from a card (cards own their visual fill)', () => {
+    const card = frame({
+      id: 'card1',
+      name: 'Stat Card',
+      role: 'card',
+      fill: solidFill('#0A0A0A'),
+      cornerRadius: 12,
+      children: [frame({ id: 'child' })],
+    });
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [card],
+    });
+    const changed = stripRedundantSectionFills(root);
+    expect(changed).toBe(false);
+    expect((card as PenNode & { fill?: unknown }).fill).toEqual(solidFill('#0A0A0A'));
+  });
+
+  it('does not strip fill from a button', () => {
+    const button = frame({
+      id: 'btn',
+      name: 'CTA Button',
+      role: 'button',
+      fill: solidFill('#0A0A0A'),
+      children: [frame({ id: 'label' })],
+    });
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [button],
+    });
+    stripRedundantSectionFills(root);
+    expect((button as PenNode & { fill?: unknown }).fill).toEqual(solidFill('#0A0A0A'));
+  });
+
+  it('does not strip fill from a badge or chip', () => {
+    const badge = frame({
+      id: 'bd',
+      name: 'Badge',
+      role: 'badge',
+      fill: solidFill('#0A0A0A'),
+    });
+    const chip = frame({
+      id: 'ch',
+      name: 'Chip',
+      role: 'chip',
+      fill: solidFill('#0A0A0A'),
+    });
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [badge, chip],
+    });
+    stripRedundantSectionFills(root);
+    expect((badge as PenNode & { fill?: unknown }).fill).toEqual(solidFill('#0A0A0A'));
+    expect((chip as PenNode & { fill?: unknown }).fill).toEqual(solidFill('#0A0A0A'));
+  });
+
+  it('does not strip a fill that is clearly distinct from root (intentional)', () => {
+    // #FF5733 is nothing like root's #1a1a2e and is not a safe-dark — it
+    // is probably a deliberate accent / hero section. Leave it.
+    const hero = frame({
+      id: 'hero',
+      name: 'Hero Section',
+      fill: solidFill('#FF5733'),
+      children: [frame({ id: 'headline' })],
+    });
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [hero],
+    });
+    const changed = stripRedundantSectionFills(root);
+    expect(changed).toBe(false);
+    expect((hero as PenNode & { fill?: unknown }).fill).toEqual(solidFill('#FF5733'));
+  });
+
+  it('strips fills from multiple sections in one pass', () => {
+    const section1 = frame({ id: 's1', fill: solidFill('#0A0A0A') });
+    const section2 = frame({ id: 's2', fill: solidFill('#0A0A0A') });
+    const section3 = frame({ id: 's3', fill: solidFill('#0A0A0A') });
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [section1, section2, section3],
+    });
+    stripRedundantSectionFills(root);
+    expect((section1 as PenNode & { fill?: unknown }).fill).toBeUndefined();
+    expect((section2 as PenNode & { fill?: unknown }).fill).toBeUndefined();
+    expect((section3 as PenNode & { fill?: unknown }).fill).toBeUndefined();
+  });
+
+  it('does not touch deeply nested frames inside a section', () => {
+    // Only direct children of the root are considered "section level". A
+    // card nested three levels deep with the same color should be left
+    // alone — it is not a top-level section.
+    const deepCard = frame({
+      id: 'deep-card',
+      role: 'card',
+      fill: solidFill('#0A0A0A'),
+    });
+    const middle = frame({ id: 'middle', children: [deepCard] });
+    const section = frame({
+      id: 'section',
+      fill: solidFill('#0A0A0A'),
+      children: [middle],
+    });
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [section],
+    });
+    stripRedundantSectionFills(root);
+    // Section (direct child) is stripped
+    expect((section as PenNode & { fill?: unknown }).fill).toBeUndefined();
+    // Deep card is left alone
+    expect((deepCard as PenNode & { fill?: unknown }).fill).toEqual(solidFill('#0A0A0A'));
+  });
+
+  it('returns false when there is nothing to strip', () => {
+    const root = frame({
+      id: 'root',
+      fill: solidFill('#1a1a2e'),
+      children: [
+        frame({ id: 's1' }), // no fill
+        frame({
+          id: 'card1',
+          role: 'card',
+          fill: solidFill('#0A0A0A'), // card protected
+        }),
+      ],
+    });
+    const changed = stripRedundantSectionFills(root);
+    expect(changed).toBe(false);
+  });
+
+  it('handles a root frame without a fill (treats only safe-dark sections)', () => {
+    // Root has no fill; we still strip sections that carry a safe-dark
+    // "default" fill, because those are almost certainly the sub-agent
+    // hedging against a missing background spec.
+    const section = frame({
+      id: 'sec',
+      fill: solidFill('#0A0A0A'),
+    });
+    const root = frame({
+      id: 'root',
+      children: [section],
+    });
+    stripRedundantSectionFills(root);
+    expect((section as PenNode & { fill?: unknown }).fill).toBeUndefined();
+  });
+
+  it('is strictly non-recursive: never touches grandchildren even when caller mis-targets a card', () => {
+    // Defensive: if a caller accidentally hands us a card frame instead of
+    // the page root, we must NOT recurse into it. Only the direct children
+    // of the passed node are ever considered — and a card header (no role,
+    // safe-dark fill) that is a DIRECT child of a card is still fair game,
+    // but anything deeper is untouched.
+    const deepInner = frame({
+      id: 'deep',
+      // no role, safe-dark — would normally be stripped, but is two levels
+      // down so must survive
+      fill: solidFill('#0A0A0A'),
+    });
+    const cardBody = frame({ id: 'body', children: [deepInner] });
+    const cardHeader = frame({
+      id: 'header',
+      // no role, safe-dark — direct child of the mis-targeted parent, so
+      // will still be stripped (the caller is at fault)
+      fill: solidFill('#0A0A0A'),
+    });
+    const card = frame({
+      id: 'card',
+      role: 'card',
+      fill: solidFill('#141414'),
+      children: [cardHeader, cardBody],
+    });
+    // Deliberately mis-target the card (not the page root). This must NOT
+    // crash and must NOT recurse into cardBody's grandchildren.
+    stripRedundantSectionFills(card);
+    // Card itself is untouched (we never touch the passed node)
+    expect((card as PenNode & { fill?: unknown }).fill).toEqual(solidFill('#141414'));
+    // deepInner survives because strip is strictly non-recursive
+    expect((deepInner as PenNode & { fill?: unknown }).fill).toEqual(solidFill('#0A0A0A'));
+  });
+
+  it('reproduces the M2.7 health-tracker case', () => {
+    // Direct repro of the actual failure: root #1a1a2e, six section roots
+    // all hardcoded #0A0A0A, including one real card. The six section
+    // fills get stripped, the card keeps its fill.
+    const root = frame({
+      id: 'root-frame',
+      name: 'Health Dashboard',
+      fill: solidFill('#1a1a2e'),
+      children: [
+        frame({ id: 'header-root', name: 'Greeting Header', fill: solidFill('#0A0A0A') }),
+        frame({
+          id: 'activityRings-root',
+          name: 'Activity Rings Section',
+          fill: solidFill('#0A0A0A'),
+        }),
+        frame({
+          id: 'heartRate-root',
+          name: 'Heart Rate Card Section',
+          fill: solidFill('#0A0A0A'),
+        }),
+        frame({
+          id: 'workoutChart-root',
+          name: 'Weekly Workout Chart',
+          fill: solidFill('#0A0A0A'),
+        }),
+        frame({
+          id: 'upcomingWorkouts-root',
+          name: 'Upcoming Workouts',
+          fill: solidFill('#0A0A0A'),
+        }),
+        frame({ id: 'bottomNav-root', name: 'Bottom Tab Bar', fill: solidFill('#0A0A0A') }),
+      ],
+    });
+    const changed = stripRedundantSectionFills(root);
+    expect(changed).toBe(true);
+    const kids = (root as PenNode & { children: PenNode[] }).children;
+    for (const section of kids) {
+      expect((section as PenNode & { fill?: unknown }).fill).toBeUndefined();
+    }
+  });
+});

package/src/__tests__/text-measure.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 {
   parseSizing,
   defaultLineHeight,
@@ -11,137 +11,142 @@ import {
   resolveTextContent,
   countExplicitTextLines,
   estimateTextHeight,
-} from '../layout/text-measure'
+} from '../layout/text-measure';
 
 describe('text-measure', () => {
   describe('parseSizing', () => {
     it('returns number for number input', () => {
-      expect(parseSizing(100)).toBe(100)
-    })
+      expect(parseSizing(100)).toBe(100);
+    });
 
     it('returns "fill" for fill_container', () => {
-      expect(parseSizing('fill_container')).toBe('fill')
-    })
+      expect(parseSizing('fill_container')).toBe('fill');
+    });
 
     it('returns "fit" for fit_content', () => {
-      expect(parseSizing('fit_content')).toBe('fit')
-    })
+      expect(parseSizing('fit_content')).toBe('fit');
+    });
+
+    it('uses numeric hints from fit_content(N)', () => {
+      expect(parseSizing('fit_content(600)')).toBe(600);
+    });
 
     it('parses numeric strings', () => {
-      expect(parseSizing('200')).toBe(200)
-    })
+      expect(parseSizing('200')).toBe(200);
+    });
 
     it('returns 0 for non-parseable', () => {
-      expect(parseSizing(undefined)).toBe(0)
-      expect(parseSizing('abc')).toBe(0)
-    })
-  })
+      expect(parseSizing(undefined)).toBe(0);
+      expect(parseSizing('abc')).toBe(0);
+    });
+  });
 
   describe('defaultLineHeight', () => {
     it('returns tight leading for display text', () => {
-      expect(defaultLineHeight(48)).toBe(1.0)
-    })
+      expect(defaultLineHeight(48)).toBe(1.0);
+    });
 
     it('returns comfortable leading for body text', () => {
-      expect(defaultLineHeight(14)).toBe(1.5)
-    })
-  })
+      expect(defaultLineHeight(14)).toBe(1.5);
+    });
+  });
 
   describe('CJK detection', () => {
     it('detects CJK code points', () => {
-      expect(isCjkCodePoint('中'.codePointAt(0)!)).toBe(true)
-      expect(isCjkCodePoint('あ'.codePointAt(0)!)).toBe(true)
-      expect(isCjkCodePoint('A'.codePointAt(0)!)).toBe(false)
-    })
+      expect(isCjkCodePoint('中'.codePointAt(0)!)).toBe(true);
+      expect(isCjkCodePoint('あ'.codePointAt(0)!)).toBe(true);
+      expect(isCjkCodePoint('A'.codePointAt(0)!)).toBe(false);
+    });
 
     it('hasCjkText detects CJK in strings', () => {
-      expect(hasCjkText('Hello 世界')).toBe(true)
-      expect(hasCjkText('Hello World')).toBe(false)
-    })
-  })
+      expect(hasCjkText('Hello 世界')).toBe(true);
+      expect(hasCjkText('Hello World')).toBe(false);
+    });
+  });
 
   describe('estimateGlyphWidth', () => {
     it('returns 0 for newline', () => {
-      expect(estimateGlyphWidth('\n', 16)).toBe(0)
-    })
+      expect(estimateGlyphWidth('\n', 16)).toBe(0);
+    });
 
     it('estimates CJK wider than Latin', () => {
-      const cjk = estimateGlyphWidth('中', 16)
-      const latin = estimateGlyphWidth('a', 16)
-      expect(cjk).toBeGreaterThan(latin)
-    })
+      const cjk = estimateGlyphWidth('中', 16);
+      const latin = estimateGlyphWidth('a', 16);
+      expect(cjk).toBeGreaterThan(latin);
+    });
 
     it('estimates uppercase wider than lowercase', () => {
-      const upper = estimateGlyphWidth('A', 16)
-      const lower = estimateGlyphWidth('a', 16)
-      expect(upper).toBeGreaterThan(lower)
-    })
-  })
+      const upper = estimateGlyphWidth('A', 16);
+      const lower = estimateGlyphWidth('a', 16);
+      expect(upper).toBeGreaterThan(lower);
+    });
+  });
 
   describe('estimateLineWidth', () => {
     it('estimates width of a line', () => {
-      const width = estimateLineWidth('Hello', 16)
-      expect(width).toBeGreaterThan(0)
-    })
+      const width = estimateLineWidth('Hello', 16);
+      expect(width).toBeGreaterThan(0);
+    });
 
     it('adds letter spacing', () => {
-      const base = estimateLineWidth('AB', 16, 0)
-      const spaced = estimateLineWidth('AB', 16, 5)
-      expect(spaced).toBeGreaterThan(base)
-    })
-  })
+      const base = estimateLineWidth('AB', 16, 0);
+      const spaced = estimateLineWidth('AB', 16, 5);
+      expect(spaced).toBeGreaterThan(base);
+    });
+  });
 
   describe('estimateTextWidth', () => {
     it('returns the widest line', () => {
-      const width = estimateTextWidth('short\nmuch longer line', 16)
-      const singleWidth = estimateTextWidth('much longer line', 16)
+      const width = estimateTextWidth('short\nmuch longer line', 16);
+      const singleWidth = estimateTextWidth('much longer line', 16);
       // Multi-line should return width of longest line
-      expect(width).toBeCloseTo(singleWidth, 0)
-    })
-  })
+      expect(width).toBeCloseTo(singleWidth, 0);
+    });
+  });
 
   describe('resolveTextContent', () => {
     it('resolves string content', () => {
-      const node: PenNode = { id: '1', type: 'text', content: 'Hello' }
-      expect(resolveTextContent(node)).toBe('Hello')
-    })
+      const node: PenNode = { id: '1', type: 'text', content: 'Hello' };
+      expect(resolveTextContent(node)).toBe('Hello');
+    });
 
     it('resolves styled segment content', () => {
       const node: PenNode = {
-        id: '1', type: 'text',
+        id: '1',
+        type: 'text',
         content: [{ text: 'Hello ' }, { text: 'World' }],
-      }
-      expect(resolveTextContent(node)).toBe('Hello World')
-    })
+      };
+      expect(resolveTextContent(node)).toBe('Hello World');
+    });
 
     it('returns empty for non-text nodes', () => {
-      const node: PenNode = { id: '1', type: 'rectangle' }
-      expect(resolveTextContent(node)).toBe('')
-    })
-  })
+      const node: PenNode = { id: '1', type: 'rectangle' };
+      expect(resolveTextContent(node)).toBe('');
+    });
+  });
 
   describe('countExplicitTextLines', () => {
     it('counts newlines', () => {
-      expect(countExplicitTextLines('a\nb\nc')).toBe(3)
-    })
+      expect(countExplicitTextLines('a\nb\nc')).toBe(3);
+    });
 
     it('returns 1 for empty string', () => {
-      expect(countExplicitTextLines('')).toBe(1)
-    })
-  })
+      expect(countExplicitTextLines('')).toBe(1);
+    });
+  });
 
   describe('estimateTextHeight', () => {
     it('estimates height for single-line text', () => {
-      const node: PenNode = { id: '1', type: 'text', content: 'Hello', fontSize: 16 }
-      const height = estimateTextHeight(node)
-      expect(height).toBeGreaterThan(0)
-      expect(height).toBeLessThan(50)
-    })
+      const node: PenNode = { id: '1', type: 'text', content: 'Hello', fontSize: 16 };
+      const height = estimateTextHeight(node);
+      expect(height).toBeGreaterThan(0);
+      expect(height).toBeLessThan(50);
+    });
 
     it('estimates taller for multi-line text', () => {
-      const single: PenNode = { id: '1', type: 'text', content: 'Hello', fontSize: 16 }
-      const multi: PenNode = { id: '2', type: 'text', content: 'Hello\nWorld', fontSize: 16 }
-      expect(estimateTextHeight(multi)).toBeGreaterThan(estimateTextHeight(single))
-    })
-  })
-})
+      const single: PenNode = { id: '1', type: 'text', content: 'Hello', fontSize: 16 };
+      const multi: PenNode = { id: '2', type: 'text', content: 'Hello\nWorld', fontSize: 16 };
+      expect(estimateTextHeight(multi)).toBeGreaterThan(estimateTextHeight(single));
+    });
+  });
+});