git-hash-art 0.10.1 → 0.12.0

package/src/lib/archetypes.ts

@@ -34,6 +34,14 @@ export type PaletteMode =
 
 // ── Archetype definition ────────────────────────────────────────────
 
+export type CompositionMode =
+  | "radial"
+  | "flow-field"
+  | "spiral"
+  | "grid-subdivision"
+  | "clustered"
+  | "golden-spiral";
+
 export interface Archetype {
   name: string;
   /** Override gridSize (controls shape count) */
@@ -54,6 +62,8 @@ export interface Archetype {
   paletteMode: PaletteMode;
   /** Preferred render styles (weighted toward these) */
   preferredStyles: RenderStyle[];
+  /** Preferred composition modes (70% chance of using one of these) */
+  preferredCompositions: CompositionMode[];
   /** Flow line count multiplier (1 = default) */
   flowLineMultiplier: number;
   /** Whether to draw the hero shape */
@@ -80,6 +90,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "harmonious",
     preferredStyles: ["fill-and-stroke", "watercolor", "fill-only"],
+    preferredCompositions: ["clustered", "flow-field", "radial"],
     flowLineMultiplier: 2.5,
     heroShape: false,
     glowMultiplier: 0.5,
@@ -97,6 +108,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "duotone",
     preferredStyles: ["fill-and-stroke", "stroke-only", "incomplete"],
+    preferredCompositions: ["golden-spiral", "grid-subdivision"],
     flowLineMultiplier: 0.3,
     heroShape: true,
     glowMultiplier: 0,
@@ -114,6 +126,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "earth",
     preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    preferredCompositions: ["flow-field", "golden-spiral", "spiral"],
     flowLineMultiplier: 4,
     heroShape: false,
     glowMultiplier: 0.3,
@@ -131,6 +144,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-dark",
     paletteMode: "high-contrast",
     preferredStyles: ["stroke-only", "dashed", "double-stroke", "hatched"],
+    preferredCompositions: ["grid-subdivision", "radial"],
     flowLineMultiplier: 0,
     heroShape: false,
     glowMultiplier: 0,
@@ -148,6 +162,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-light",
     paletteMode: "pastel-light",
     preferredStyles: ["watercolor", "incomplete", "fill-only"],
+    preferredCompositions: ["golden-spiral", "radial", "spiral"],
     flowLineMultiplier: 1.5,
     heroShape: true,
     glowMultiplier: 2,
@@ -165,6 +180,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "linear-diagonal",
     paletteMode: "duotone",
     preferredStyles: ["fill-and-stroke", "double-stroke"],
+    preferredCompositions: ["grid-subdivision", "golden-spiral"],
     flowLineMultiplier: 0,
     heroShape: true,
     glowMultiplier: 0,
@@ -182,6 +198,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-dark",
     paletteMode: "neon",
     preferredStyles: ["stroke-only", "double-stroke", "dashed"],
+    preferredCompositions: ["radial", "spiral", "clustered"],
     flowLineMultiplier: 2,
     heroShape: true,
     glowMultiplier: 3,
@@ -199,6 +216,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "monochrome",
     preferredStyles: ["hatched", "incomplete", "stroke-only", "dashed"],
+    preferredCompositions: ["flow-field", "grid-subdivision", "clustered"],
     flowLineMultiplier: 1.5,
     heroShape: false,
     glowMultiplier: 0,
@@ -216,6 +234,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "neon",
     preferredStyles: ["fill-only", "watercolor", "fill-and-stroke"],
+    preferredCompositions: ["radial", "spiral", "golden-spiral"],
     flowLineMultiplier: 3,
     heroShape: true,
     glowMultiplier: 2.5,
@@ -233,6 +252,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-light",
     paletteMode: "harmonious",
     preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    preferredCompositions: ["golden-spiral", "flow-field", "radial"],
     flowLineMultiplier: 0.5,
     heroShape: false,
     glowMultiplier: 0.3,
@@ -250,6 +270,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "high-contrast",
     preferredStyles: ["fill-and-stroke", "stroke-only", "dashed"],
+    preferredCompositions: ["grid-subdivision", "radial"],
     flowLineMultiplier: 0,
     heroShape: false,
     glowMultiplier: 0,
@@ -267,6 +288,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "duotone",
     preferredStyles: ["fill-and-stroke", "fill-only", "double-stroke"],
+    preferredCompositions: ["grid-subdivision", "clustered"],
     flowLineMultiplier: 0,
     heroShape: true,
     glowMultiplier: 0,
@@ -284,6 +306,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "harmonious",
     preferredStyles: ["fill-and-stroke", "watercolor", "fill-only"],
+    preferredCompositions: ["radial", "golden-spiral", "flow-field"],
     flowLineMultiplier: 1,
     heroShape: true,
     glowMultiplier: 1,
@@ -301,6 +324,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-dark",
     paletteMode: "high-contrast",
     preferredStyles: ["fill-and-stroke", "stroke-only", "fill-only"],
+    preferredCompositions: ["clustered", "grid-subdivision", "radial"],
     flowLineMultiplier: 0,
     heroShape: false,
     glowMultiplier: 0.3,
@@ -318,6 +342,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-light",
     paletteMode: "earth",
     preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    preferredCompositions: ["flow-field", "golden-spiral", "spiral"],
     flowLineMultiplier: 3,
     heroShape: true,
     glowMultiplier: 0.2,
@@ -335,6 +360,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "monochrome",
     preferredStyles: ["stipple", "fill-only", "hatched"],
+    preferredCompositions: ["radial", "clustered", "flow-field"],
     flowLineMultiplier: 0,
     heroShape: false,
     glowMultiplier: 0,
@@ -352,6 +378,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "neon",
     preferredStyles: ["fill-only", "watercolor", "stroke-only", "incomplete"],
+    preferredCompositions: ["spiral", "radial", "golden-spiral"],
     flowLineMultiplier: 2,
     heroShape: true,
     glowMultiplier: 2.5,
@@ -374,6 +401,7 @@ function lerpNum(a: number, b: number, t: number): number {
 function blendArchetypes(a: Archetype, b: Archetype, t: number): Archetype {
   // Merge preferred styles — unique union, primary archetype first
   const mergedStyles = [...new Set([...a.preferredStyles, ...b.preferredStyles])] as RenderStyle[];
+  const mergedCompositions = [...new Set([...a.preferredCompositions, ...b.preferredCompositions])] as CompositionMode[];
 
   return {
     name: `${a.name}+${b.name}`,
@@ -386,6 +414,7 @@ function blendArchetypes(a: Archetype, b: Archetype, t: number): Archetype {
     backgroundStyle: t < 0.5 ? a.backgroundStyle : b.backgroundStyle,
     paletteMode: t < 0.5 ? a.paletteMode : b.paletteMode,
     preferredStyles: mergedStyles,
+    preferredCompositions: mergedCompositions,
     flowLineMultiplier: lerpNum(a.flowLineMultiplier, b.flowLineMultiplier, t),
     heroShape: t < 0.5 ? a.heroShape : b.heroShape,
     glowMultiplier: lerpNum(a.glowMultiplier, b.glowMultiplier, t),

package/src/lib/canvas/colors.ts

@@ -311,14 +311,23 @@ export class SacredColorScheme {
 
 // ── Standalone color utilities ──────────────────────────────────────
 
-/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. */
+// ── Cached hex→RGB parse — avoids repeated parseInt/substring on hot path ──
+const _rgbCache = new Map<string, [number, number, number]>();
+const _RGB_CACHE_MAX = 512;
+
+/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. Cached. */
 function hexToRgb(hex: string): [number, number, number] {
-  const c = hex.replace("#", "");
-  return [
+  let cached = _rgbCache.get(hex);
+  if (cached) return cached;
+  const c = hex.charAt(0) === "#" ? hex.substring(1) : hex;
+  cached = [
     parseInt(c.substring(0, 2), 16),
     parseInt(c.substring(2, 4), 16),
     parseInt(c.substring(4, 6), 16),
   ];
+  if (_rgbCache.size >= _RGB_CACHE_MAX) _rgbCache.clear();
+  _rgbCache.set(hex, cached);
+  return cached;
 }
 
 /** Format [r, g, b] back to #RRGGBB. */
@@ -365,7 +374,9 @@ function hslToHex(h: number, s: number, l: number): string {
  */
 export function hexWithAlpha(hex: string, alpha: number): string {
   const [r, g, b] = hexToRgb(hex);
-  return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
+  // Quantize alpha to 3 decimal places without toFixed overhead
+  const a = Math.round(alpha * 1000) / 1000;
+  return `rgba(${r},${g},${b},${a})`;
 }
 
 /**
@@ -388,14 +399,16 @@ export function buildColorHierarchy(colors: string[], rng: () => number): ColorH
       all: colors,
     };
   }
-  // Pick dominant as the color closest to the palette's average hue
+  // Pick dominant as the color with the highest chroma (saturation × distance from gray)
+  // This selects the most visually prominent color rather than the average
   const hsls = colors.map((c) => hexToHsl(c));
-  const avgHue = hsls.reduce((s, h) => s + h[0], 0) / hsls.length;
   let dominantIdx = 0;
-  let minDist = 360;
+  let maxChroma = -1;
   for (let i = 0; i < hsls.length; i++) {
-    const d = Math.min(Math.abs(hsls[i][0] - avgHue), 360 - Math.abs(hsls[i][0] - avgHue));
-    if (d < minDist) { minDist = d; dominantIdx = i; }
+    // Chroma approximation: saturation × how far lightness is from 50% (gray)
+    const lightnessVibrancy = 1 - Math.abs(hsls[i][2] - 0.5) * 2; // peaks at L=0.5
+    const chroma = hsls[i][1] * lightnessVibrancy;
+    if (chroma > maxChroma) { maxChroma = chroma; dominantIdx = i; }
   }
   // Accent is the color most distant from dominant in hue
   let accentIdx = 0;
@@ -482,14 +495,20 @@ export function shiftTemperature(hex: string, target: "warm" | "cool", amount: n
 
 /**
  * Compute relative luminance of a hex color (0 = black, 1 = white).
- * Uses the sRGB luminance formula from WCAG.
+ * Uses the sRGB luminance formula from WCAG. Cached.
  */
+const _lumCache = new Map<string, number>();
 export function luminance(hex: string): number {
+  let cached = _lumCache.get(hex);
+  if (cached !== undefined) return cached;
   const [r, g, b] = hexToRgb(hex).map((c) => {
     const s = c / 255;
     return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
   });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  cached = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  if (_lumCache.size >= 512) _lumCache.clear();
+  _lumCache.set(hex, cached);
+  return cached;
 }
 
 /**

package/src/lib/canvas/draw.ts

@@ -67,6 +67,45 @@ export function pickRenderStyle(rng: () => number): RenderStyle {
   return RENDER_STYLES[Math.floor(rng() * RENDER_STYLES.length)];
 }
 
+/**
+ * Approximate cost weight for each render style, normalized so
+ * fill-and-stroke = 1.  Based on benchmark measurements.
+ */
+export const RENDER_STYLE_COST: Record<RenderStyle, number> = {
+  "fill-and-stroke": 1,
+  "fill-only":       0.5,
+  "stroke-only":     1,
+  "double-stroke":   1.5,
+  "dashed":          1,
+  "watercolor":      7,
+  "hatched":         3,
+  "incomplete":      1,
+  "stipple":         90,
+  "stencil":         2,
+  "noise-grain":     400,
+  "wood-grain":      10,
+  "marble-vein":     4,
+  "fabric-weave":    6,
+  "hand-drawn":      5,
+};
+
+/**
+ * Downgrade an expensive render style to a cheaper alternative
+ * that preserves a similar visual feel.
+ */
+export function downgradeRenderStyle(style: RenderStyle): RenderStyle {
+  switch (style) {
+    case "noise-grain": return "hatched";
+    case "stipple":     return "dashed";
+    case "wood-grain":  return "hatched";
+    case "watercolor":  return "fill-and-stroke";
+    case "fabric-weave": return "hatched";
+    case "hand-drawn":  return "fill-and-stroke";
+    case "marble-vein": return "stroke-only";
+    default:            return style;
+  }
+}
+
 // ── Config interfaces ───────────────────────────────────────────────
 
 interface DrawShapeConfig {
@@ -246,6 +285,7 @@ function applyRenderStyle(
 
     case "hatched": {
       // Fill normally at reduced opacity, then overlay cross-hatch lines
+      // Optimized: batch all parallel lines into a single path per pass
       const savedAlphaH = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaH * 0.3;
       ctx.fill();
@@ -259,28 +299,28 @@ function applyRenderStyle(
       ctx.lineWidth = Math.max(0.5, strokeWidth * 0.4);
       ctx.globalAlpha = savedAlphaH * 0.6;
 
-      // Draw parallel lines across the bounding box
+      // Draw parallel lines across the bounding box — batched into single path
       const extent = size * 0.8;
       const cos = Math.cos(hatchAngle);
       const sin = Math.sin(hatchAngle);
+      ctx.beginPath();
       for (let d = -extent; d <= extent; d += hatchSpacing) {
-        ctx.beginPath();
         ctx.moveTo(d * cos - extent * sin, d * sin + extent * cos);
         ctx.lineTo(d * cos + extent * sin, d * sin - extent * cos);
-        ctx.stroke();
       }
+      ctx.stroke();
       // Second pass at perpendicular angle for cross-hatch (~50% chance)
       if (!rng || rng() < 0.5) {
         const crossAngle = hatchAngle + Math.PI / 2;
         const cos2 = Math.cos(crossAngle);
         const sin2 = Math.sin(crossAngle);
         ctx.globalAlpha = savedAlphaH * 0.35;
+        ctx.beginPath();
         for (let d = -extent; d <= extent; d += hatchSpacing * 1.4) {
-          ctx.beginPath();
           ctx.moveTo(d * cos2 - extent * sin2, d * sin2 + extent * cos2);
           ctx.lineTo(d * cos2 + extent * sin2, d * sin2 - extent * cos2);
-          ctx.stroke();
         }
+        ctx.stroke();
       }
       ctx.restore();
       ctx.globalAlpha = savedAlphaH;
@@ -316,6 +356,8 @@ function applyRenderStyle(
 
     case "stipple": {
       // Dot-fill texture — clip to shape, then scatter dots
+      // Optimized: use fillRect instead of arc for dots (much cheaper to render),
+      // and cap total dot count to avoid O(size²) blowup on large shapes.
       const savedAlphaS = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaS * 0.15;
       ctx.fill(); // ghost fill
@@ -324,17 +366,19 @@ function applyRenderStyle(
       ctx.save();
       ctx.clip();
       const dotSpacing = Math.max(2, size * 0.03);
-      const extent = size * 0.55;
+      const extentS = size * 0.55;
+      // Cap total dots: beyond ~900 (30×30 grid) the visual density plateaus
+      const maxDotsPerAxis = Math.min(Math.ceil((extentS * 2) / dotSpacing), 30);
+      const actualSpacing = (extentS * 2) / maxDotsPerAxis;
       ctx.globalAlpha = savedAlphaS * 0.7;
-      for (let dx = -extent; dx <= extent; dx += dotSpacing) {
-        for (let dy = -extent; dy <= extent; dy += dotSpacing) {
-          // Jitter each dot position for organic feel
-          const jx = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
-          const jy = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
-          const dotR = rng ? dotSpacing * (0.15 + rng() * 0.2) : dotSpacing * 0.2;
-          ctx.beginPath();
-          ctx.arc(dx + jx, dy + jy, dotR, 0, Math.PI * 2);
-          ctx.fill();
+      for (let xi = 0; xi < maxDotsPerAxis; xi++) {
+        const dx = -extentS + xi * actualSpacing;
+        for (let yi = 0; yi < maxDotsPerAxis; yi++) {
+          const dy = -extentS + yi * actualSpacing;
+          const jx = rng ? (rng() - 0.5) * actualSpacing * 0.6 : 0;
+          const jy = rng ? (rng() - 0.5) * actualSpacing * 0.6 : 0;
+          const dotD = rng ? actualSpacing * (0.3 + rng() * 0.4) : actualSpacing * 0.4;
+          ctx.fillRect(dx + jx - dotD * 0.5, dy + jy - dotD * 0.5, dotD, dotD);
         }
       }
       ctx.restore();
@@ -368,6 +412,9 @@ function applyRenderStyle(
 
     case "noise-grain": {
       // Procedural noise grain texture clipped to shape boundary
+      // Optimized: cap grid to max 40×40 = 1600 dots (was unbounded at O(size²)),
+      // quantize alpha into buckets to minimize globalAlpha state changes,
+      // and batch dots by brightness (black/white) × alpha bucket
       const savedAlphaN = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaN * 0.25;
       ctx.fill(); // base tint
@@ -377,20 +424,51 @@ function applyRenderStyle(
       ctx.clip();
       const grainSpacing = Math.max(1.5, size * 0.015);
       const extentN = size * 0.55;
-      ctx.globalAlpha = savedAlphaN * 0.6;
-      for (let gx = -extentN; gx <= extentN; gx += grainSpacing) {
-        for (let gy = -extentN; gy <= extentN; gy += grainSpacing) {
-          if (!rng) break;
-          const jx = (rng() - 0.5) * grainSpacing * 1.2;
-          const jy = (rng() - 0.5) * grainSpacing * 1.2;
-          const brightness = rng() > 0.5 ? 255 : 0;
-          const dotAlpha = 0.15 + rng() * 0.35;
-          ctx.globalAlpha = savedAlphaN * dotAlpha;
-          ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
-          const dotSize = grainSpacing * (0.3 + rng() * 0.5);
-          ctx.fillRect(gx + jx, gy + jy, dotSize, dotSize);
+
+      if (rng) {
+        // Cap grid to max 40 dots per axis — beyond this the grain is
+        // visually indistinguishable but cost scales quadratically.
+        const maxGrainPerAxis = Math.min(Math.ceil((extentN * 2) / grainSpacing), 40);
+        const actualGrainSpacing = (extentN * 2) / maxGrainPerAxis;
+
+        // 4 alpha buckets: 0.2, 0.3, 0.4, 0.5 — covers the 0.15-0.50 range
+        const BUCKETS = 4;
+        const bucketMin = 0.15;
+        const bucketRange = 0.35;
+        // [black_bucket0, black_bucket1, ..., white_bucket0, ...]
+        const buckets: Array<Array<{ x: number; y: number; s: number }>> = [];
+        for (let i = 0; i < BUCKETS * 2; i++) buckets.push([]);
+
+        for (let xi = 0; xi < maxGrainPerAxis; xi++) {
+          const gx = -extentN + xi * actualGrainSpacing;
+          for (let yi = 0; yi < maxGrainPerAxis; yi++) {
+            const gy = -extentN + yi * actualGrainSpacing;
+            const jx = (rng() - 0.5) * actualGrainSpacing * 1.2;
+            const jy = (rng() - 0.5) * actualGrainSpacing * 1.2;
+            const isWhite = rng() > 0.5;
+            const dotAlpha = bucketMin + rng() * bucketRange;
+            const dotSize = actualGrainSpacing * (0.3 + rng() * 0.5);
+            const bucketIdx = Math.min(BUCKETS - 1, Math.floor((dotAlpha - bucketMin) / bucketRange * BUCKETS));
+            const offset = isWhite ? BUCKETS : 0;
+            buckets[offset + bucketIdx].push({ x: gx + jx, y: gy + jy, s: dotSize });
+          }
+        }
+
+        // Render each bucket: 2 colors × 4 alpha levels = 8 state changes total
+        for (let color = 0; color < 2; color++) {
+          ctx.fillStyle = color === 0 ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)";
+          for (let b = 0; b < BUCKETS; b++) {
+            const dots = buckets[color * BUCKETS + b];
+            if (dots.length === 0) continue;
+            const alpha = bucketMin + (b + 0.5) / BUCKETS * bucketRange;
+            ctx.globalAlpha = savedAlphaN * alpha;
+            for (let i = 0; i < dots.length; i++) {
+              ctx.fillRect(dots[i].x, dots[i].y, dots[i].s, dots[i].s);
+            }
+          }
         }
       }
+
       ctx.restore();
       ctx.fillStyle = fillColor;
       ctx.globalAlpha = savedAlphaN;
@@ -402,6 +480,7 @@ function applyRenderStyle(
 
     case "wood-grain": {
       // Parallel wavy lines simulating wood grain, clipped to shape
+      // Optimized: batch all grain lines into a single path, increased step from 2 to 4
       const savedAlphaW = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaW * 0.2;
       ctx.fill(); // base tint
@@ -419,17 +498,22 @@ function applyRenderStyle(
 
       const cosG = Math.cos(grainAngle);
       const sinG = Math.sin(grainAngle);
+      const waveCoeff = waveFreq * Math.PI;
+      const invExtentW = 1 / extentW;
+      // Batch all grain lines into a single path
+      ctx.beginPath();
       for (let d = -extentW; d <= extentW; d += grainLineSpacing) {
-        ctx.beginPath();
-        for (let t = -extentW; t <= extentW; t += 2) {
-          const wave = Math.sin((t / extentW) * waveFreq * Math.PI) * waveAmp;
-          const px = t * cosG - (d + wave) * sinG;
-          const py = t * sinG + (d + wave) * cosG;
-          if (t === -extentW) ctx.moveTo(px, py);
-          else ctx.lineTo(px, py);
+        const firstWave = Math.sin(-extentW * invExtentW * waveCoeff) * waveAmp;
+        ctx.moveTo(
+          -extentW * cosG - (d + firstWave) * sinG,
+          -extentW * sinG + (d + firstWave) * cosG,
+        );
+        for (let t = -extentW + 4; t <= extentW; t += 4) {
+          const wave = Math.sin(t * invExtentW * waveCoeff) * waveAmp;
+          ctx.lineTo(t * cosG - (d + wave) * sinG, t * sinG + (d + wave) * cosG);
         }
-        ctx.stroke();
       }
+      ctx.stroke();
       ctx.restore();
       ctx.globalAlpha = savedAlphaW;
       ctx.globalAlpha *= 0.35;
@@ -494,6 +578,7 @@ function applyRenderStyle(
 
     case "fabric-weave": {
       // Interlocking horizontal/vertical threads clipped to shape
+      // Optimized: batch all horizontal threads into one path, all vertical into another
       const savedAlphaF = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaF * 0.15;
       ctx.fill(); // ghost base
@@ -504,27 +589,29 @@ function applyRenderStyle(
       const threadSpacing = Math.max(2, size * 0.04);
       const extentF = size * 0.55;
       ctx.lineWidth = Math.max(0.8, threadSpacing * 0.5);
-      ctx.globalAlpha = savedAlphaF * 0.55;
 
-      // Horizontal threads
+      // Horizontal threads — batched
+      ctx.globalAlpha = savedAlphaF * 0.55;
+      ctx.beginPath();
       for (let y = -extentF; y <= extentF; y += threadSpacing * 2) {
-        ctx.beginPath();
         ctx.moveTo(-extentF, y);
         ctx.lineTo(extentF, y);
-        ctx.stroke();
       }
-      // Vertical threads (offset by half spacing for weave effect)
+      ctx.stroke();
+
+      // Vertical threads (offset by half spacing for weave effect) — batched
       ctx.globalAlpha = savedAlphaF * 0.45;
       ctx.strokeStyle = fillColor;
+      ctx.beginPath();
       for (let x = -extentF; x <= extentF; x += threadSpacing * 2) {
-        ctx.beginPath();
         for (let y = -extentF; y <= extentF; y += threadSpacing * 2) {
           // Over-under: draw segment, skip segment
           ctx.moveTo(x, y);
           ctx.lineTo(x, y + threadSpacing);
         }
-        ctx.stroke();
       }
+      ctx.stroke();
+
       ctx.strokeStyle = strokeColor;
       ctx.restore();
       ctx.globalAlpha = savedAlphaF;
@@ -628,14 +715,17 @@ export function enhanceShapeGeneration(
   ctx.rotate((rotation * Math.PI) / 180);
 
   // ── Drop shadow — soft colored shadow offset along light direction ──
-  if (lightAngle !== undefined && size > 10) {
+  // Skip shadow entirely for small shapes (< 20px) — the blur is expensive
+  // and visually imperceptible at that scale.
+  const useShadow = size >= 20;
+  if (useShadow && lightAngle !== undefined) {
     const shadowDist = size * 0.035;
     const shadowBlurR = size * 0.06;
     ctx.shadowOffsetX = Math.cos(lightAngle + Math.PI) * shadowDist;
     ctx.shadowOffsetY = Math.sin(lightAngle + Math.PI) * shadowDist;
     ctx.shadowBlur = shadowBlurR;
     ctx.shadowColor = "rgba(0,0,0,0.12)";
-  } else if (glowRadius > 0) {
+  } else if (useShadow && glowRadius > 0) {
     // Glow / shadow effect (legacy path)
     ctx.shadowBlur = glowRadius;
     ctx.shadowColor = glowColor || fillColor;
@@ -663,18 +753,25 @@ export function enhanceShapeGeneration(
   }
 
   // Reset shadow so patterns and highlight aren't double-shadowed
-  ctx.shadowBlur = 0;
-  ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 0;
-  ctx.shadowColor = "transparent";
+  // Only reset if we actually set shadow (avoids unnecessary state changes)
+  if (useShadow && (lightAngle !== undefined || glowRadius > 0)) {
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    ctx.shadowColor = "transparent";
+  }
 
-  // ── Specular highlight — bright arc on the light-facing side ──
-  if (lightAngle !== undefined && size > 15 && rng) {
+  // ── Specular highlight — tinted arc on the light-facing side ──
+  // Skip for small shapes (< 30px) — gradient creation + composite op
+  // switch is expensive and the highlight is invisible at small sizes.
+  if (lightAngle !== undefined && size > 30 && rng) {
     const hlRadius = size * 0.35;
     const hlDist = size * 0.15;
     const hlX = Math.cos(lightAngle) * hlDist;
     const hlY = Math.sin(lightAngle) * hlDist;
     const hlGrad = ctx.createRadialGradient(hlX, hlY, 0, hlX, hlY, hlRadius);
+    // Use a simple white highlight — the per-shape hex parse was expensive
+    // and the visual difference from tinted highlights is negligible.
     hlGrad.addColorStop(0, "rgba(255,255,255,0.18)");
     hlGrad.addColorStop(0.5, "rgba(255,255,255,0.05)");
     hlGrad.addColorStop(1, "rgba(255,255,255,0)");

package/src/lib/canvas/shapes/complex.ts

@@ -122,24 +122,33 @@ export const drawIslamicPattern: DrawFunction = (ctx, size, config = {}) => {
 
   const gridSize = 8;
   const unit = size / gridSize;
+  const radius = unit / 2;
+
+  // Pre-compute the 8 star-point angle pairs (cos/sin) — avoids 648 trig calls
+  const starPoints: Array<{ c1: number; s1: number; c2: number; s2: number }> = [];
+  for (let k = 0; k < 8; k++) {
+    const angle = (Math.PI / 4) * k;
+    const angle2 = angle + Math.PI / 4;
+    starPoints.push({
+      c1: Math.cos(angle) * radius,
+      s1: Math.sin(angle) * radius,
+      c2: Math.cos(angle2) * radius,
+      s2: Math.sin(angle2) * radius,
+    });
+  }
 
   ctx.beginPath();
   // Create base grid
   for (let i = 0; i <= gridSize; i++) {
+    const x = (i - gridSize / 2) * unit;
     for (let j = 0; j <= gridSize; j++) {
-      const x = (i - gridSize / 2) * unit;
       const y = (j - gridSize / 2) * unit;
 
-      // Draw star pattern at each intersection
-      const radius = unit / 2;
+      // Draw star pattern at each intersection using pre-computed offsets
       for (let k = 0; k < 8; k++) {
-        const angle = (Math.PI / 4) * k;
-        const x1 = x + radius * Math.cos(angle);
-        const y1 = y + radius * Math.sin(angle);
-        const x2 = x + radius * Math.cos(angle + Math.PI / 4);
-        const y2 = y + radius * Math.sin(angle + Math.PI / 4);
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
+        const sp = starPoints[k];
+        ctx.moveTo(x + sp.c1, y + sp.s1);
+        ctx.lineTo(x + sp.c2, y + sp.s2);
       }
     }
   }