@zseven-w/pen-core 0.6.0 → 0.7.1

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

@@ -1,118 +1,173 @@
-import { describe, it, expect } from 'vitest'
-import type { PenNode } from '@zseven-w/pen-types'
-import { resolveNodeForCanvas } from '../variables/resolve'
+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,
+      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,
+          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
+    } as PenNode;
 
-    const result = resolveNodeForCanvas(doc, variables)
-    const childFrame = (result as any).children[0]
-    expect(childFrame.gap).toBe(16)
-  })
+    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,
+      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,
+          id: 'child',
+          type: 'frame',
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 200,
           children: [
             {
-              id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello',
+              id: 'text1',
+              type: 'text',
+              x: 0,
+              y: 0,
+              content: 'Hello',
               fill: [{ type: 'solid', color: '$bg-color' }],
             } as PenNode,
           ],
         } 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')
-  })
+    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,
+      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,
+          id: 'child',
+          type: 'frame',
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 200,
           padding: '$spacing' as unknown as number,
           children: [],
         } as PenNode,
       ],
-    } as PenNode
+    } as PenNode;
 
-    const result = resolveNodeForCanvas(doc, variables)
-    const childFrame = (result as any).children[0]
-    expect(childFrame.padding).toBe(16)
-  })
+    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
+      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)
-  })
+    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,
+      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,
+          id: 'child',
+          type: 'frame',
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 200,
           children: [
             {
-              id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello',
+              id: 'text1',
+              type: 'text',
+              x: 0,
+              y: 0,
+              content: 'Hello',
               opacity: '$text-opacity' as unknown as number,
             } as PenNode,
           ],
         } 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)
-  })
+    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 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
+      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)
-  })
-})
+    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();
+    }
+  });
+});