@zseven-w/pen-core 0.6.0 → 0.7.1

package/src/variables/replace-refs.ts

@@ -4,10 +4,10 @@
  * Used when renaming or deleting a variable to keep the tree consistent.
  */
 
-import type { PenNode } from '@zseven-w/pen-types'
-import type { PenFill } from '@zseven-w/pen-types'
-import type { VariableDefinition } from '@zseven-w/pen-types'
-import { resolveVariableRef } from './resolve.js'
+import type { PenNode } from '@zseven-w/pen-types';
+import type { PenFill } from '@zseven-w/pen-types';
+import type { VariableDefinition } from '@zseven-w/pen-types';
+import { resolveVariableRef } from './resolve.js';
 
 /**
  * Replace all occurrences of `$oldRef` with `$newRef` in the node tree.
@@ -20,130 +20,133 @@ export function replaceVariableRefsInTree(
   variables: Record<string, VariableDefinition>,
   activeTheme: Record<string, string>,
 ): PenNode[] {
-  const oldToken = `$${oldRef}`
-  const replacement = newRef ? `$${newRef}` : undefined
+  const oldToken = `$${oldRef}`;
+  const replacement = newRef ? `$${newRef}` : undefined;
 
   function resolveOrReplace(val: string): string {
-    if (val !== oldToken) return val
-    if (replacement) return replacement
-    const resolved = resolveVariableRef(oldToken, variables, activeTheme)
-    return typeof resolved === 'string' ? resolved : val
+    if (val !== oldToken) return val;
+    if (replacement) return replacement;
+    const resolved = resolveVariableRef(oldToken, variables, activeTheme);
+    return typeof resolved === 'string' ? resolved : val;
   }
 
   function resolveOrReplaceNumeric(val: string | number): string | number {
-    if (typeof val !== 'string' || val !== oldToken) return val
-    if (replacement) return replacement
-    const resolved = resolveVariableRef(oldToken, variables, activeTheme)
-    return typeof resolved === 'number' ? resolved : val
+    if (typeof val !== 'string' || val !== oldToken) return val;
+    if (replacement) return replacement;
+    const resolved = resolveVariableRef(oldToken, variables, activeTheme);
+    return typeof resolved === 'number' ? resolved : val;
   }
 
   function replaceFills(fills: PenFill[] | string | undefined): PenFill[] | string | undefined {
-    if (!fills || typeof fills === 'string') return fills
+    if (!fills || typeof fills === 'string') return fills;
     return fills.map((f) => {
       if (f.type === 'solid' && f.color === oldToken) {
-        return { ...f, color: resolveOrReplace(f.color) }
+        return { ...f, color: resolveOrReplace(f.color) };
       }
       if (f.type === 'linear_gradient' || f.type === 'radial_gradient') {
         const newStops = f.stops.map((s) =>
           s.color === oldToken ? { ...s, color: resolveOrReplace(s.color) } : s,
-        )
-        return { ...f, stops: newStops }
+        );
+        return { ...f, stops: newStops };
       }
-      return f
-    })
+      return f;
+    });
   }
 
   function replaceInNode(node: PenNode): PenNode {
-    const out: Record<string, unknown> = { ...node }
-    let changed = false
+    const out: Record<string, unknown> = { ...node };
+    let changed = false;
 
     // Opacity
     if (typeof node.opacity === 'string' && node.opacity === oldToken) {
-      out.opacity = resolveOrReplaceNumeric(node.opacity)
-      changed = true
+      out.opacity = resolveOrReplaceNumeric(node.opacity);
+      changed = true;
     }
 
     // Gap
     if ('gap' in node && (node as unknown as Record<string, unknown>).gap === oldToken) {
-      out.gap = resolveOrReplaceNumeric(oldToken)
-      changed = true
+      out.gap = resolveOrReplaceNumeric(oldToken);
+      changed = true;
     }
 
     // Padding
     if ('padding' in node && (node as unknown as Record<string, unknown>).padding === oldToken) {
-      out.padding = resolveOrReplaceNumeric(oldToken)
-      changed = true
+      out.padding = resolveOrReplaceNumeric(oldToken);
+      changed = true;
     }
 
     // Fill
     if ('fill' in node && (node as unknown as Record<string, unknown>).fill) {
-      const fills = (node as unknown as Record<string, unknown>).fill as PenFill[]
-      const newFills = replaceFills(fills)
+      const fills = (node as unknown as Record<string, unknown>).fill as PenFill[];
+      const newFills = replaceFills(fills);
       if (newFills !== fills) {
-        out.fill = newFills
-        changed = true
+        out.fill = newFills;
+        changed = true;
       }
     }
 
     // Stroke fill & thickness
     if ('stroke' in node && (node as unknown as Record<string, unknown>).stroke) {
-      const stroke = (node as unknown as Record<string, unknown>).stroke as Record<string, unknown>
-      const newStroke = { ...stroke }
-      let strokeChanged = false
+      const stroke = (node as unknown as Record<string, unknown>).stroke as Record<string, unknown>;
+      const newStroke = { ...stroke };
+      let strokeChanged = false;
       if (typeof stroke.thickness === 'string' && stroke.thickness === oldToken) {
-        newStroke.thickness = resolveOrReplaceNumeric(oldToken)
-        strokeChanged = true
+        newStroke.thickness = resolveOrReplaceNumeric(oldToken);
+        strokeChanged = true;
       }
       if (stroke.fill) {
-        const newFill = replaceFills(stroke.fill as PenFill[])
+        const newFill = replaceFills(stroke.fill as PenFill[]);
         if (newFill !== stroke.fill) {
-          newStroke.fill = newFill
-          strokeChanged = true
+          newStroke.fill = newFill;
+          strokeChanged = true;
         }
       }
       if (strokeChanged) {
-        out.stroke = newStroke
-        changed = true
+        out.stroke = newStroke;
+        changed = true;
       }
     }
 
     // Effects
     if ('effects' in node && Array.isArray((node as unknown as Record<string, unknown>).effects)) {
-      const effects = (node as unknown as Record<string, unknown>).effects as Record<string, unknown>[]
+      const effects = (node as unknown as Record<string, unknown>).effects as Record<
+        string,
+        unknown
+      >[];
       const newEffects = effects.map((e) => {
-        const ne = { ...e }
-        let ec = false
+        const ne = { ...e };
+        let ec = false;
         if (typeof e.color === 'string' && e.color === oldToken) {
-          ne.color = resolveOrReplace(e.color as string)
-          ec = true
+          ne.color = resolveOrReplace(e.color as string);
+          ec = true;
         }
         for (const key of ['blur', 'offsetX', 'offsetY', 'spread']) {
           if (typeof e[key] === 'string' && e[key] === oldToken) {
-            ne[key] = resolveOrReplaceNumeric(oldToken)
-            ec = true
+            ne[key] = resolveOrReplaceNumeric(oldToken);
+            ec = true;
           }
         }
-        return ec ? ne : e
-      })
-      out.effects = newEffects
-      changed = true
+        return ec ? ne : e;
+      });
+      out.effects = newEffects;
+      changed = true;
     }
 
     // Text content
     if (node.type === 'text' && typeof node.content === 'string' && node.content === oldToken) {
-      out.content = resolveOrReplace(node.content)
-      changed = true
+      out.content = resolveOrReplace(node.content);
+      changed = true;
     }
 
     // Recurse children
     if ('children' in node && (node as unknown as Record<string, unknown>).children) {
-      const children = (node as unknown as Record<string, unknown>).children as PenNode[]
-      out.children = replaceVariableRefsInTree(children, oldRef, newRef, variables, activeTheme)
-      changed = true
+      const children = (node as unknown as Record<string, unknown>).children as PenNode[];
+      out.children = replaceVariableRefsInTree(children, oldRef, newRef, variables, activeTheme);
+      changed = true;
     }
 
-    return changed ? (out as unknown as PenNode) : node
+    return changed ? (out as unknown as PenNode) : node;
   }
 
-  return nodes.map(replaceInNode)
+  return nodes.map(replaceInNode);
 }

package/src/variables/resolve.ts

@@ -5,12 +5,12 @@
  * optionally matching themed values to an active theme context.
  */
 
-import type { PenNode } from '@zseven-w/pen-types'
-import type { PenFill, PenStroke, PenEffect } from '@zseven-w/pen-types'
-import type { VariableDefinition, ThemedValue } from '@zseven-w/pen-types'
+import type { PenNode } from '@zseven-w/pen-types';
+import type { PenFill, PenStroke, PenEffect } from '@zseven-w/pen-types';
+import type { VariableDefinition, ThemedValue } from '@zseven-w/pen-types';
 
-type Vars = Record<string, VariableDefinition>
-type Theme = Record<string, string>
+type Vars = Record<string, VariableDefinition>;
+type Theme = Record<string, string>;
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -18,19 +18,17 @@ type Theme = Record<string, string>
 
 /** Check whether a value is a `$variable` reference string. */
 export function isVariableRef(value: unknown): value is string {
-  return typeof value === 'string' && value.startsWith('$')
+  return typeof value === 'string' && value.startsWith('$');
 }
 
 /** Build the default theme map (first value per axis) from PenDocument.themes. */
-export function getDefaultTheme(
-  themes: Record<string, string[]> | undefined,
-): Theme {
-  const result: Theme = {}
-  if (!themes) return result
+export function getDefaultTheme(themes: Record<string, string[]> | undefined): Theme {
+  const result: Theme = {};
+  if (!themes) return result;
   for (const [key, values] of Object.entries(themes)) {
-    if (values.length > 0) result[key] = values[0]
+    if (values.length > 0) result[key] = values[0];
   }
-  return result
+  return result;
 }
 
 // ---------------------------------------------------------------------------
@@ -44,14 +42,12 @@ function resolveThemedValue(
 ): string | number | boolean | undefined {
   if (activeTheme && Object.keys(activeTheme).length > 0) {
     const match = values.find((v) => {
-      if (!v.theme) return false
-      return Object.entries(activeTheme).every(
-        ([key, expected]) => v.theme?.[key] === expected,
-      )
-    })
-    if (match) return match.value
+      if (!v.theme) return false;
+      return Object.entries(activeTheme).every(([key, expected]) => v.theme?.[key] === expected);
+    });
+    if (match) return match.value;
   }
-  return values[0]?.value
+  return values[0]?.value;
 }
 
 /**
@@ -63,21 +59,21 @@ export function resolveVariableRef(
   variables: Vars,
   activeTheme?: Theme,
 ): string | number | boolean | undefined {
-  if (!ref.startsWith('$')) return undefined
-  const name = ref.slice(1)
-  const def = variables[name]
-  if (!def) return undefined
+  if (!ref.startsWith('$')) return undefined;
+  const name = ref.slice(1);
+  const def = variables[name];
+  if (!def) return undefined;
 
-  const val = def.value
+  const val = def.value;
   if (Array.isArray(val)) {
-    const resolved = resolveThemedValue(val, activeTheme)
+    const resolved = resolveThemedValue(val, activeTheme);
     // Circular guard: if resolved value is also a $ref, stop
-    if (typeof resolved === 'string' && resolved.startsWith('$')) return undefined
-    return resolved
+    if (typeof resolved === 'string' && resolved.startsWith('$')) return undefined;
+    return resolved;
   }
   // Circular guard
-  if (typeof val === 'string' && val.startsWith('$')) return undefined
-  return val
+  if (typeof val === 'string' && val.startsWith('$')) return undefined;
+  return val;
 }
 
 /**
@@ -89,10 +85,10 @@ export function resolveColorRef(
   variables: Vars,
   activeTheme?: Theme,
 ): string | undefined {
-  if (color === undefined) return undefined
-  if (!isVariableRef(color)) return color
-  const resolved = resolveVariableRef(color, variables, activeTheme)
-  return typeof resolved === 'string' ? resolved : undefined
+  if (color === undefined) return undefined;
+  if (!isVariableRef(color)) return color;
+  const resolved = resolveVariableRef(color, variables, activeTheme);
+  return typeof resolved === 'string' ? resolved : undefined;
 }
 
 /**
@@ -104,16 +100,16 @@ export function resolveNumericRef(
   variables: Vars,
   activeTheme?: Theme,
 ): number | undefined {
-  if (typeof value === 'number') return value
+  if (typeof value === 'number') return value;
   if (typeof value === 'string') {
     if (isVariableRef(value)) {
-      const resolved = resolveVariableRef(value, variables, activeTheme)
-      return typeof resolved === 'number' ? resolved : undefined
+      const resolved = resolveVariableRef(value, variables, activeTheme);
+      return typeof resolved === 'number' ? resolved : undefined;
     }
-    const num = parseFloat(value)
-    return isNaN(num) ? undefined : num
+    const num = parseFloat(value);
+    return isNaN(num) ? undefined : num;
   }
-  return undefined
+  return undefined;
 }
 
 // ---------------------------------------------------------------------------
@@ -125,22 +121,22 @@ function resolveFillsForCanvas(
   vars: Vars,
   theme?: Theme,
 ): PenFill[] | string | undefined {
-  if (!fills) return fills
-  if (typeof fills === 'string') return fills
+  if (!fills) return fills;
+  if (typeof fills === 'string') return fills;
   return fills.map((fill) => {
     if (fill.type === 'solid') {
-      const color = resolveColorRef(fill.color, vars, theme)
-      return color !== fill.color ? { ...fill, color: color ?? '#000000' } : fill
+      const color = resolveColorRef(fill.color, vars, theme);
+      return color !== fill.color ? { ...fill, color: color ?? '#000000' } : fill;
     }
     if (fill.type === 'linear_gradient' || fill.type === 'radial_gradient') {
       const newStops = fill.stops.map((stop) => {
-        const color = resolveColorRef(stop.color, vars, theme)
-        return color !== stop.color ? { ...stop, color: color ?? '#000000' } : stop
-      })
-      return newStops !== fill.stops ? { ...fill, stops: newStops } : fill
+        const color = resolveColorRef(stop.color, vars, theme);
+        return color !== stop.color ? { ...stop, color: color ?? '#000000' } : stop;
+      });
+      return newStops !== fill.stops ? { ...fill, stops: newStops } : fill;
     }
-    return fill
-  })
+    return fill;
+  });
 }
 
 function resolveStrokeForCanvas(
@@ -148,26 +144,26 @@ function resolveStrokeForCanvas(
   vars: Vars,
   theme?: Theme,
 ): PenStroke | undefined {
-  if (!stroke) return stroke
-  let changed = false
-  const out: Record<string, unknown> = { ...stroke }
+  if (!stroke) return stroke;
+  let changed = false;
+  const out: Record<string, unknown> = { ...stroke };
 
   // Resolve thickness
   if (typeof stroke.thickness === 'string' && isVariableRef(stroke.thickness)) {
-    out.thickness = resolveNumericRef(stroke.thickness, vars, theme) ?? 1
-    changed = true
+    out.thickness = resolveNumericRef(stroke.thickness, vars, theme) ?? 1;
+    changed = true;
   }
 
   // Resolve stroke fill colors
   if (stroke.fill) {
-    const resolved = resolveFillsForCanvas(stroke.fill, vars, theme)
+    const resolved = resolveFillsForCanvas(stroke.fill, vars, theme);
     if (resolved !== stroke.fill) {
-      out.fill = resolved
-      changed = true
+      out.fill = resolved;
+      changed = true;
     }
   }
 
-  return changed ? (out as unknown as PenStroke) : stroke
+  return changed ? (out as unknown as PenStroke) : stroke;
 }
 
 function resolveEffectsForCanvas(
@@ -175,26 +171,26 @@ function resolveEffectsForCanvas(
   vars: Vars,
   theme?: Theme,
 ): PenEffect[] | undefined {
-  if (!effects) return effects
+  if (!effects) return effects;
   return effects.map((effect) => {
-    if (effect.type !== 'shadow') return effect
-    let changed = false
-    const out: Record<string, unknown> = { ...effect }
+    if (effect.type !== 'shadow') return effect;
+    let changed = false;
+    const out: Record<string, unknown> = { ...effect };
 
     if (typeof effect.color === 'string' && isVariableRef(effect.color)) {
-      out.color = resolveColorRef(effect.color, vars, theme) ?? '#000000'
-      changed = true
+      out.color = resolveColorRef(effect.color, vars, theme) ?? '#000000';
+      changed = true;
     }
     for (const key of ['blur', 'offsetX', 'offsetY', 'spread'] as const) {
-      const val = effect[key]
+      const val = effect[key];
       if (typeof val === 'string' && isVariableRef(val)) {
-        out[key] = resolveNumericRef(val, vars, theme) ?? 0
-        changed = true
+        out[key] = resolveNumericRef(val, vars, theme) ?? 0;
+        changed = true;
       }
     }
 
-    return changed ? (out as unknown as PenEffect) : effect
-  })
+    return changed ? (out as unknown as PenEffect) : effect;
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -207,91 +203,87 @@ function resolveEffectsForCanvas(
  *
  * Returns the same object reference when no variables are present.
  */
-export function resolveNodeForCanvas(
-  node: PenNode,
-  variables: Vars,
-  activeTheme?: Theme,
-): PenNode {
-  if (!variables || Object.keys(variables).length === 0) return node
+export function resolveNodeForCanvas(node: PenNode, variables: Vars, activeTheme?: Theme): PenNode {
+  if (!variables || Object.keys(variables).length === 0) return node;
 
-  let changed = false
-  const out: Record<string, unknown> = { ...node }
+  let changed = false;
+  const out: Record<string, unknown> = { ...node };
 
   // Opacity
   if (typeof node.opacity === 'string' && isVariableRef(node.opacity)) {
-    out.opacity = resolveNumericRef(node.opacity, variables, activeTheme) ?? 1
-    changed = true
+    out.opacity = resolveNumericRef(node.opacity, variables, activeTheme) ?? 1;
+    changed = true;
   }
 
   // Gap
   if ('gap' in node && typeof (node as unknown as Record<string, unknown>).gap === 'string') {
-    const gap = (node as unknown as Record<string, unknown>).gap as string
+    const gap = (node as unknown as Record<string, unknown>).gap as string;
     if (isVariableRef(gap)) {
-      out.gap = resolveNumericRef(gap, variables, activeTheme) ?? 0
-      changed = true
+      out.gap = resolveNumericRef(gap, variables, activeTheme) ?? 0;
+      changed = true;
     }
   }
 
   // Padding
   if ('padding' in node) {
-    const padding = (node as unknown as Record<string, unknown>).padding
+    const padding = (node as unknown as Record<string, unknown>).padding;
     if (typeof padding === 'string' && isVariableRef(padding)) {
-      out.padding = resolveNumericRef(padding, variables, activeTheme) ?? 0
-      changed = true
+      out.padding = resolveNumericRef(padding, variables, activeTheme) ?? 0;
+      changed = true;
     }
   }
 
   // Fill
   if ('fill' in node && (node as unknown as Record<string, unknown>).fill) {
-    const fills = (node as unknown as Record<string, unknown>).fill as PenFill[] | string
-    const resolved = resolveFillsForCanvas(fills, variables, activeTheme)
+    const fills = (node as unknown as Record<string, unknown>).fill as PenFill[] | string;
+    const resolved = resolveFillsForCanvas(fills, variables, activeTheme);
     if (resolved !== fills) {
-      out.fill = resolved
-      changed = true
+      out.fill = resolved;
+      changed = true;
     }
   }
 
   // Stroke
   if ('stroke' in node && (node as unknown as Record<string, unknown>).stroke) {
-    const stroke = (node as unknown as Record<string, unknown>).stroke as PenStroke
-    const resolved = resolveStrokeForCanvas(stroke, variables, activeTheme)
+    const stroke = (node as unknown as Record<string, unknown>).stroke as PenStroke;
+    const resolved = resolveStrokeForCanvas(stroke, variables, activeTheme);
     if (resolved !== stroke) {
-      out.stroke = resolved
-      changed = true
+      out.stroke = resolved;
+      changed = true;
     }
   }
 
   // Effects
   if ('effects' in node && (node as unknown as Record<string, unknown>).effects) {
-    const effects = (node as unknown as Record<string, unknown>).effects as PenEffect[]
-    const resolved = resolveEffectsForCanvas(effects, variables, activeTheme)
+    const effects = (node as unknown as Record<string, unknown>).effects as PenEffect[];
+    const resolved = resolveEffectsForCanvas(effects, variables, activeTheme);
     if (resolved !== effects) {
-      out.effects = resolved
-      changed = true
+      out.effects = resolved;
+      changed = true;
     }
   }
 
   // Text content
   if (node.type === 'text' && typeof node.content === 'string' && isVariableRef(node.content)) {
-    const resolved = resolveVariableRef(node.content, variables, activeTheme)
+    const resolved = resolveVariableRef(node.content, variables, activeTheme);
     if (typeof resolved === 'string') {
-      out.content = resolved
-      changed = true
+      out.content = resolved;
+      changed = true;
     }
   }
 
   // Recurse into children
   if ('children' in node && node.children) {
-    const children = node.children
+    const children = node.children;
     const resolvedChildren = children.map((child) =>
       resolveNodeForCanvas(child, variables, activeTheme),
-    )
+    );
     // Only allocate new array if any child actually changed
     if (resolvedChildren.some((rc, i) => rc !== children[i])) {
-      out.children = resolvedChildren
-      changed = true
+      out.children = resolvedChildren;
+      changed = true;
     }
   }
 
-  return changed ? (out as unknown as PenNode) : node
+  return changed ? (out as unknown as PenNode) : node;
 }