@zseven-w/pen-core 0.5.2 → 0.7.0

package/src/__tests__/variables.test.ts

@@ -1,6 +1,6 @@
-import { describe, it, expect } from 'vitest'
-import type { PenNode } from '@zseven-w/pen-types'
-import type { VariableDefinition } from '@zseven-w/pen-types'
+import { describe, it, expect } from 'vitest';
+import type { PenNode } from '@zseven-w/pen-types';
+import type { VariableDefinition } from '@zseven-w/pen-types';
 import {
   isVariableRef,
   getDefaultTheme,
@@ -8,11 +8,11 @@ import {
   resolveColorRef,
   resolveNumericRef,
   resolveNodeForCanvas,
-} from '../variables/resolve'
+} from '../variables/resolve';
 
 const vars: Record<string, VariableDefinition> = {
-  'primary': { type: 'color', value: '#3b82f6' },
-  'spacing': { type: 'number', value: 16 },
+  primary: { type: 'color', value: '#3b82f6' },
+  spacing: { type: 'number', value: 16 },
   'themed-color': {
     type: 'color',
     value: [
@@ -20,113 +20,116 @@ const vars: Record<string, VariableDefinition> = {
       { value: '#1a1a1a', theme: { 'Theme-1': 'Dark' } },
     ],
   },
-}
+};
 
 describe('variables/resolve', () => {
   describe('isVariableRef', () => {
     it('returns true for $ prefixed strings', () => {
-      expect(isVariableRef('$primary')).toBe(true)
-    })
+      expect(isVariableRef('$primary')).toBe(true);
+    });
 
     it('returns false for regular strings', () => {
-      expect(isVariableRef('#ff0000')).toBe(false)
-    })
+      expect(isVariableRef('#ff0000')).toBe(false);
+    });
 
     it('returns false for non-strings', () => {
-      expect(isVariableRef(42)).toBe(false)
-      expect(isVariableRef(undefined)).toBe(false)
-    })
-  })
+      expect(isVariableRef(42)).toBe(false);
+      expect(isVariableRef(undefined)).toBe(false);
+    });
+  });
 
   describe('getDefaultTheme', () => {
     it('returns first value of each theme axis', () => {
-      const themes = { 'Theme-1': ['Light', 'Dark'], 'Size': ['Compact', 'Regular'] }
+      const themes = { 'Theme-1': ['Light', 'Dark'], Size: ['Compact', 'Regular'] };
       expect(getDefaultTheme(themes)).toEqual({
         'Theme-1': 'Light',
-        'Size': 'Compact',
-      })
-    })
+        Size: 'Compact',
+      });
+    });
 
     it('returns empty for undefined themes', () => {
-      expect(getDefaultTheme(undefined)).toEqual({})
-    })
-  })
+      expect(getDefaultTheme(undefined)).toEqual({});
+    });
+  });
 
   describe('resolveVariableRef', () => {
     it('resolves a simple color variable', () => {
-      expect(resolveVariableRef('$primary', vars)).toBe('#3b82f6')
-    })
+      expect(resolveVariableRef('$primary', vars)).toBe('#3b82f6');
+    });
 
     it('resolves a number variable', () => {
-      expect(resolveVariableRef('$spacing', vars)).toBe(16)
-    })
+      expect(resolveVariableRef('$spacing', vars)).toBe(16);
+    });
 
     it('returns undefined for missing variable', () => {
-      expect(resolveVariableRef('$missing', vars)).toBeUndefined()
-    })
+      expect(resolveVariableRef('$missing', vars)).toBeUndefined();
+    });
 
     it('resolves themed values with matching theme', () => {
-      expect(resolveVariableRef('$themed-color', vars, { 'Theme-1': 'Dark' })).toBe('#1a1a1a')
-    })
+      expect(resolveVariableRef('$themed-color', vars, { 'Theme-1': 'Dark' })).toBe('#1a1a1a');
+    });
 
     it('falls back to first value when no theme match', () => {
-      expect(resolveVariableRef('$themed-color', vars)).toBe('#ffffff')
-    })
+      expect(resolveVariableRef('$themed-color', vars)).toBe('#ffffff');
+    });
 
     it('returns undefined for non-ref strings', () => {
-      expect(resolveVariableRef('#ff0000', vars)).toBeUndefined()
-    })
-  })
+      expect(resolveVariableRef('#ff0000', vars)).toBeUndefined();
+    });
+  });
 
   describe('resolveColorRef', () => {
     it('returns the color when not a ref', () => {
-      expect(resolveColorRef('#ff0000', vars)).toBe('#ff0000')
-    })
+      expect(resolveColorRef('#ff0000', vars)).toBe('#ff0000');
+    });
 
     it('resolves a color ref', () => {
-      expect(resolveColorRef('$primary', vars)).toBe('#3b82f6')
-    })
+      expect(resolveColorRef('$primary', vars)).toBe('#3b82f6');
+    });
 
     it('returns undefined for undefined input', () => {
-      expect(resolveColorRef(undefined, vars)).toBeUndefined()
-    })
-  })
+      expect(resolveColorRef(undefined, vars)).toBeUndefined();
+    });
+  });
 
   describe('resolveNumericRef', () => {
     it('returns the number when not a ref', () => {
-      expect(resolveNumericRef(42, vars)).toBe(42)
-    })
+      expect(resolveNumericRef(42, vars)).toBe(42);
+    });
 
     it('resolves a numeric ref', () => {
-      expect(resolveNumericRef('$spacing', vars)).toBe(16)
-    })
+      expect(resolveNumericRef('$spacing', vars)).toBe(16);
+    });
 
     it('returns undefined for non-numeric results', () => {
-      expect(resolveNumericRef('$primary', vars)).toBeUndefined()
-    })
-  })
+      expect(resolveNumericRef('$primary', vars)).toBeUndefined();
+    });
+  });
 
   describe('resolveNodeForCanvas', () => {
     it('returns same node when no variables', () => {
-      const node: PenNode = { id: '1', type: 'rectangle', x: 0, y: 0 }
-      expect(resolveNodeForCanvas(node, {})).toBe(node)
-    })
+      const node: PenNode = { id: '1', type: 'rectangle', x: 0, y: 0 };
+      expect(resolveNodeForCanvas(node, {})).toBe(node);
+    });
 
     it('resolves $variable opacity', () => {
-      const node: PenNode = { id: '1', type: 'rectangle', x: 0, y: 0, opacity: '$spacing' }
-      const resolved = resolveNodeForCanvas(node, vars)
-      expect(resolved.opacity).toBe(16)
-      expect(resolved).not.toBe(node)
-    })
+      const node: PenNode = { id: '1', type: 'rectangle', x: 0, y: 0, opacity: '$spacing' };
+      const resolved = resolveNodeForCanvas(node, vars);
+      expect(resolved.opacity).toBe(16);
+      expect(resolved).not.toBe(node);
+    });
 
     it('resolves fill colors', () => {
       const node: PenNode = {
-        id: '1', type: 'rectangle', x: 0, y: 0,
+        id: '1',
+        type: 'rectangle',
+        x: 0,
+        y: 0,
         fill: [{ type: 'solid', color: '$primary' }],
-      }
-      const resolved = resolveNodeForCanvas(node, vars)
-      const fill = (resolved as { fill: Array<{ color: string }> }).fill
-      expect(fill[0].color).toBe('#3b82f6')
-    })
-  })
-})
+      };
+      const resolved = resolveNodeForCanvas(node, vars);
+      const fill = (resolved as { fill: Array<{ color: string }> }).fill;
+      expect(fill[0].color).toBe('#3b82f6');
+    });
+  });
+});

package/src/arc-path.ts

@@ -14,28 +14,28 @@ export function buildEllipseArcPath(
   sweepDeg: number,
   inner: number,
 ): string {
-  const startRad = (startDeg * Math.PI) / 180
-  const sweepRad = (sweepDeg * Math.PI) / 180
-  const endRad = startRad + sweepRad
+  const startRad = (startDeg * Math.PI) / 180;
+  const sweepRad = (sweepDeg * Math.PI) / 180;
+  const endRad = startRad + sweepRad;
 
-  const rx = w / 2
-  const ry = h / 2
-  const cx = rx
-  const cy = ry
+  const rx = w / 2;
+  const ry = h / 2;
+  const cx = rx;
+  const cy = ry;
 
   // Outer arc endpoints
-  const ox1 = cx + rx * Math.cos(startRad)
-  const oy1 = cy + ry * Math.sin(startRad)
-  const ox2 = cx + rx * Math.cos(endRad)
-  const oy2 = cy + ry * Math.sin(endRad)
+  const ox1 = cx + rx * Math.cos(startRad);
+  const oy1 = cy + ry * Math.sin(startRad);
+  const ox2 = cx + rx * Math.cos(endRad);
+  const oy2 = cy + ry * Math.sin(endRad);
 
-  const large = sweepRad > Math.PI ? 1 : 0
+  const large = sweepRad > Math.PI ? 1 : 0;
 
   // Near-full circle (>=~359.9°): split into two semicircular arcs
   if (sweepRad > Math.PI * 2 - 0.02) {
-    const midRad = startRad + Math.PI
-    const omx = cx + rx * Math.cos(midRad)
-    const omy = cy + ry * Math.sin(midRad)
+    const midRad = startRad + Math.PI;
+    const omx = cx + rx * Math.cos(midRad);
+    const omy = cy + ry * Math.sin(midRad);
 
     if (inner <= 0.001) {
       return [
@@ -43,15 +43,15 @@ export function buildEllipseArcPath(
         `A${f(rx)} ${f(ry)} 0 1 1 ${f(omx)} ${f(omy)}`,
         `A${f(rx)} ${f(ry)} 0 1 1 ${f(ox1)} ${f(oy1)}`,
         'Z',
-      ].join(' ')
+      ].join(' ');
     }
 
-    const irx = rx * inner
-    const iry = ry * inner
-    const ix1 = cx + irx * Math.cos(startRad)
-    const iy1 = cy + iry * Math.sin(startRad)
-    const imx = cx + irx * Math.cos(midRad)
-    const imy = cy + iry * Math.sin(midRad)
+    const irx = rx * inner;
+    const iry = ry * inner;
+    const ix1 = cx + irx * Math.cos(startRad);
+    const iy1 = cy + iry * Math.sin(startRad);
+    const imx = cx + irx * Math.cos(midRad);
+    const imy = cy + iry * Math.sin(midRad);
     return [
       `M${f(ox1)} ${f(oy1)}`,
       `A${f(rx)} ${f(ry)} 0 1 1 ${f(omx)} ${f(omy)}`,
@@ -60,28 +60,28 @@ export function buildEllipseArcPath(
       `A${f(irx)} ${f(iry)} 0 1 0 ${f(imx)} ${f(imy)}`,
       `A${f(irx)} ${f(iry)} 0 1 0 ${f(ix1)} ${f(iy1)}`,
       'Z',
-    ].join(' ')
+    ].join(' ');
   }
 
   if (inner <= 0.001) {
     // Pie slice: center → outer start → arc → close
-    return `M${f(cx)} ${f(cy)} L${f(ox1)} ${f(oy1)} A${f(rx)} ${f(ry)} 0 ${large} 1 ${f(ox2)} ${f(oy2)} Z`
+    return `M${f(cx)} ${f(cy)} L${f(ox1)} ${f(oy1)} A${f(rx)} ${f(ry)} 0 ${large} 1 ${f(ox2)} ${f(oy2)} Z`;
   }
 
   // Donut slice: outer arc → line to inner → inner arc (reversed) → close
-  const irx = rx * inner
-  const iry = ry * inner
-  const ix1 = cx + irx * Math.cos(startRad)
-  const iy1 = cy + iry * Math.sin(startRad)
-  const ix2 = cx + irx * Math.cos(endRad)
-  const iy2 = cy + iry * Math.sin(endRad)
+  const irx = rx * inner;
+  const iry = ry * inner;
+  const ix1 = cx + irx * Math.cos(startRad);
+  const iy1 = cy + iry * Math.sin(startRad);
+  const ix2 = cx + irx * Math.cos(endRad);
+  const iy2 = cy + iry * Math.sin(endRad);
   return [
     `M${f(ox1)} ${f(oy1)}`,
     `A${f(rx)} ${f(ry)} 0 ${large} 1 ${f(ox2)} ${f(oy2)}`,
     `L${f(ix2)} ${f(iy2)}`,
     `A${f(irx)} ${f(iry)} 0 ${large} 0 ${f(ix1)} ${f(iy1)}`,
     'Z',
-  ].join(' ')
+  ].join(' ');
 }
 
 /** True when the arc parameters describe something other than a plain full ellipse. */
@@ -90,11 +90,11 @@ export function isArcEllipse(
   sweepAngle?: number,
   innerRadius?: number,
 ): boolean {
-  const sweep = sweepAngle ?? 360
-  const inner = innerRadius ?? 0
-  return sweep < 359.9 || inner > 0.001
+  const sweep = sweepAngle ?? 360;
+  const inner = innerRadius ?? 0;
+  return sweep < 359.9 || inner > 0.001;
 }
 
 function f(n: number): string {
-  return Math.abs(n) < 0.005 ? '0' : parseFloat(n.toFixed(2)).toString()
+  return Math.abs(n) < 0.005 ? '0' : parseFloat(n.toFixed(2)).toString();
 }