git-hash-art 0.10.1 → 0.12.0

package/dist/main.js

@@ -531,13 +531,21 @@ class $d016ad53434219a1$export$ab958c550f521376 {
     }
 }
 // ── Standalone color utilities ──────────────────────────────────────
-/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. */ function $d016ad53434219a1$var$hexToRgb(hex) {
-    const c = hex.replace("#", "");
-    return [
+// ── Cached hex→RGB parse — avoids repeated parseInt/substring on hot path ──
+const $d016ad53434219a1$var$_rgbCache = new Map();
+const $d016ad53434219a1$var$_RGB_CACHE_MAX = 512;
+/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. Cached. */ function $d016ad53434219a1$var$hexToRgb(hex) {
+    let cached = $d016ad53434219a1$var$_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 ($d016ad53434219a1$var$_rgbCache.size >= $d016ad53434219a1$var$_RGB_CACHE_MAX) $d016ad53434219a1$var$_rgbCache.clear();
+    $d016ad53434219a1$var$_rgbCache.set(hex, cached);
+    return cached;
 }
 /** Format [r, g, b] back to #RRGGBB. */ function $d016ad53434219a1$var$rgbToHex(r, g, b) {
     const clamp = (v)=>Math.max(0, Math.min(255, Math.round(v)));
@@ -594,7 +602,9 @@ class $d016ad53434219a1$export$ab958c550f521376 {
 }
 function $d016ad53434219a1$export$f2121afcad3d553f(hex, alpha) {
     const [r, g, b] = $d016ad53434219a1$var$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})`;
 }
 function $d016ad53434219a1$export$fabac4600b87056(colors, rng) {
     if (colors.length < 3) return {
@@ -603,15 +613,17 @@ function $d016ad53434219a1$export$fabac4600b87056(colors, rng) {
         accent: colors[colors.length - 1] || "#888888",
         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)=>$d016ad53434219a1$var$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;
+        // 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;
         }
     }
@@ -672,12 +684,21 @@ function $d016ad53434219a1$export$51ea55f869b7e0d3(hex, target, amount) {
     const [h, s, l] = $d016ad53434219a1$var$hexToHsl(hex);
     return $d016ad53434219a1$var$hslToHex($d016ad53434219a1$var$shiftHueToward(h, target, amount), s, l);
 }
+/**
+ * Compute relative luminance of a hex color (0 = black, 1 = white).
+ * Uses the sRGB luminance formula from WCAG. Cached.
+ */ const $d016ad53434219a1$var$_lumCache = new Map();
 function $d016ad53434219a1$export$5c6e3c2b59b7fbbe(hex) {
+    let cached = $d016ad53434219a1$var$_lumCache.get(hex);
+    if (cached !== undefined) return cached;
     const [r, g, b] = $d016ad53434219a1$var$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 ($d016ad53434219a1$var$_lumCache.size >= 512) $d016ad53434219a1$var$_lumCache.clear();
+    $d016ad53434219a1$var$_lumCache.set(hex, cached);
+    return cached;
 }
 function $d016ad53434219a1$export$90ad0e6170cf6af5(fgHex, bgLuminance, minContrast = 0.15) {
     const fgLum = $d016ad53434219a1$export$5c6e3c2b59b7fbbe(fgHex);
@@ -1113,21 +1134,31 @@ const $4bf3d69be49ad55c$export$c9043b89bcb14ed9 = (ctx, size, config = {})=>{
     (0, $efc5b85ac9840d51$export$e46c5570db033611)(ctx, size, finalConfig);
     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 = [];
+    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++)for(let j = 0; j <= gridSize; j++){
+    for(let i = 0; i <= gridSize; i++){
         const x = (i - gridSize / 2) * unit;
-        const y = (j - gridSize / 2) * unit;
-        // Draw star pattern at each intersection
-        const radius = unit / 2;
-        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);
+        for(let j = 0; j <= gridSize; j++){
+            const y = (j - gridSize / 2) * unit;
+            // Draw star pattern at each intersection using pre-computed offsets
+            for(let k = 0; k < 8; k++){
+                const sp = starPoints[k];
+                ctx.moveTo(x + sp.c1, y + sp.s1);
+                ctx.lineTo(x + sp.c2, y + sp.s2);
+            }
         }
     }
     ctx.stroke();
@@ -1447,20 +1478,23 @@ const $dd5df256f00f6199$export$eeae7765f05012e2 = (ctx, size)=>{
 const $dd5df256f00f6199$export$3355220a8108efc3 = (ctx, size)=>{
     const outerRadius = size / 2;
     const innerRadius = size / 4;
-    const steps = 36;
+    // Adaptive step count: fewer segments for small shapes where detail isn't visible.
+    // 36×36 = 1296 segments at full size; at size < 60 we drop to 16×16 = 256.
+    const steps = size < 60 ? 16 : size < 150 ? 24 : 36;
+    const TWO_PI = Math.PI * 2;
+    const angleStep = TWO_PI / steps;
     ctx.beginPath();
     for(let i = 0; i < steps; i++){
-        const angle1 = i / steps * Math.PI * 2;
-        // const angle2 = ((i + 1) / steps) * Math.PI * 2;
+        const angle1 = i * angleStep;
+        const cosA = Math.cos(angle1);
+        const sinA = Math.sin(angle1);
         for(let j = 0; j < steps; j++){
-            const phi1 = j / steps * Math.PI * 2;
-            const phi2 = (j + 1) / steps * Math.PI * 2;
-            const x1 = (outerRadius + innerRadius * Math.cos(phi1)) * Math.cos(angle1);
-            const y1 = (outerRadius + innerRadius * Math.cos(phi1)) * Math.sin(angle1);
-            const x2 = (outerRadius + innerRadius * Math.cos(phi2)) * Math.cos(angle1);
-            const y2 = (outerRadius + innerRadius * Math.cos(phi2)) * Math.sin(angle1);
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
+            const phi1 = j * angleStep;
+            const phi2 = phi1 + angleStep;
+            const r1 = outerRadius + innerRadius * Math.cos(phi1);
+            const r2 = outerRadius + innerRadius * Math.cos(phi2);
+            ctx.moveTo(r1 * cosA, r1 * sinA);
+            ctx.lineTo(r2 * cosA, r2 * sinA);
         }
     }
 };
@@ -2023,6 +2057,43 @@ const $c3de8257a8baa3b0$var$RENDER_STYLES = [
 function $c3de8257a8baa3b0$export$9fd4e64b2acd410e(rng) {
     return $c3de8257a8baa3b0$var$RENDER_STYLES[Math.floor(rng() * $c3de8257a8baa3b0$var$RENDER_STYLES.length)];
 }
+const $c3de8257a8baa3b0$export$2f738f61a8c15e07 = {
+    "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
+};
+function $c3de8257a8baa3b0$export$909ab0580e273f19(style) {
+    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;
+    }
+}
 function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
     const { fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, size: size, rotation: rotation } = config;
     ctx.save();
@@ -2142,6 +2213,7 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
         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();
@@ -2153,28 +2225,28 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 const hatchAngle = rng ? rng() * Math.PI : Math.PI / 4;
                 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;
@@ -2212,6 +2284,8 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
         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
@@ -2219,16 +2293,20 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 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();
                 ctx.globalAlpha = savedAlphaS;
@@ -2261,6 +2339,9 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
         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
@@ -2269,17 +2350,47 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 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 = [];
+                    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;
@@ -2292,6 +2403,7 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
         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
@@ -2307,17 +2419,19 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 ctx.globalAlpha = savedAlphaW * 0.5;
                 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;
@@ -2379,6 +2493,7 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
         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
@@ -2388,26 +2503,24 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 const threadSpacing = Math.max(2, size * 0.04);
                 const extentF = size * 0.55;
                 ctx.lineWidth = Math.max(0.8, threadSpacing * 0.5);
+                // Horizontal threads — batched
                 ctx.globalAlpha = savedAlphaF * 0.55;
-                // Horizontal threads
+                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;
-                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.beginPath();
+                for(let x = -extentF; x <= extentF; x += threadSpacing * 2)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.strokeStyle = strokeColor;
                 ctx.restore();
                 ctx.globalAlpha = savedAlphaF;
@@ -2473,14 +2586,17 @@ function $c3de8257a8baa3b0$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     ctx.translate(x, y);
     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;
@@ -2504,17 +2620,24 @@ function $c3de8257a8baa3b0$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
         $c3de8257a8baa3b0$var$applyRenderStyle(ctx, renderStyle, fillColor, strokeColor, strokeWidth, size, rng);
     }
     // Reset shadow so patterns and highlight aren't double-shadowed
-    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) {
+    // 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 — 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)");
@@ -3579,6 +3702,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "watercolor",
             "fill-only"
         ],
+        preferredCompositions: [
+            "clustered",
+            "flow-field",
+            "radial"
+        ],
         flowLineMultiplier: 2.5,
         heroShape: false,
         glowMultiplier: 0.5,
@@ -3600,6 +3728,10 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "stroke-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "golden-spiral",
+            "grid-subdivision"
+        ],
         flowLineMultiplier: 0.3,
         heroShape: true,
         glowMultiplier: 0,
@@ -3621,6 +3753,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "fill-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "flow-field",
+            "golden-spiral",
+            "spiral"
+        ],
         flowLineMultiplier: 4,
         heroShape: false,
         glowMultiplier: 0.3,
@@ -3643,6 +3780,10 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "double-stroke",
             "hatched"
         ],
+        preferredCompositions: [
+            "grid-subdivision",
+            "radial"
+        ],
         flowLineMultiplier: 0,
         heroShape: false,
         glowMultiplier: 0,
@@ -3664,6 +3805,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "incomplete",
             "fill-only"
         ],
+        preferredCompositions: [
+            "golden-spiral",
+            "radial",
+            "spiral"
+        ],
         flowLineMultiplier: 1.5,
         heroShape: true,
         glowMultiplier: 2,
@@ -3684,6 +3830,10 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "fill-and-stroke",
             "double-stroke"
         ],
+        preferredCompositions: [
+            "grid-subdivision",
+            "golden-spiral"
+        ],
         flowLineMultiplier: 0,
         heroShape: true,
         glowMultiplier: 0,
@@ -3705,6 +3855,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "double-stroke",
             "dashed"
         ],
+        preferredCompositions: [
+            "radial",
+            "spiral",
+            "clustered"
+        ],
         flowLineMultiplier: 2,
         heroShape: true,
         glowMultiplier: 3,
@@ -3727,6 +3882,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "stroke-only",
             "dashed"
         ],
+        preferredCompositions: [
+            "flow-field",
+            "grid-subdivision",
+            "clustered"
+        ],
         flowLineMultiplier: 1.5,
         heroShape: false,
         glowMultiplier: 0,
@@ -3748,6 +3908,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "watercolor",
             "fill-and-stroke"
         ],
+        preferredCompositions: [
+            "radial",
+            "spiral",
+            "golden-spiral"
+        ],
         flowLineMultiplier: 3,
         heroShape: true,
         glowMultiplier: 2.5,
@@ -3769,6 +3934,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "fill-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "golden-spiral",
+            "flow-field",
+            "radial"
+        ],
         flowLineMultiplier: 0.5,
         heroShape: false,
         glowMultiplier: 0.3,
@@ -3790,6 +3960,10 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "stroke-only",
             "dashed"
         ],
+        preferredCompositions: [
+            "grid-subdivision",
+            "radial"
+        ],
         flowLineMultiplier: 0,
         heroShape: false,
         glowMultiplier: 0,
@@ -3811,6 +3985,10 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "fill-only",
             "double-stroke"
         ],
+        preferredCompositions: [
+            "grid-subdivision",
+            "clustered"
+        ],
         flowLineMultiplier: 0,
         heroShape: true,
         glowMultiplier: 0,
@@ -3832,6 +4010,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "watercolor",
             "fill-only"
         ],
+        preferredCompositions: [
+            "radial",
+            "golden-spiral",
+            "flow-field"
+        ],
         flowLineMultiplier: 1,
         heroShape: true,
         glowMultiplier: 1,
@@ -3853,6 +4036,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "stroke-only",
             "fill-only"
         ],
+        preferredCompositions: [
+            "clustered",
+            "grid-subdivision",
+            "radial"
+        ],
         flowLineMultiplier: 0,
         heroShape: false,
         glowMultiplier: 0.3,
@@ -3874,6 +4062,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "fill-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "flow-field",
+            "golden-spiral",
+            "spiral"
+        ],
         flowLineMultiplier: 3,
         heroShape: true,
         glowMultiplier: 0.2,
@@ -3895,6 +4088,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "fill-only",
             "hatched"
         ],
+        preferredCompositions: [
+            "radial",
+            "clustered",
+            "flow-field"
+        ],
         flowLineMultiplier: 0,
         heroShape: false,
         glowMultiplier: 0,
@@ -3917,6 +4115,11 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             "stroke-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "spiral",
+            "radial",
+            "golden-spiral"
+        ],
         flowLineMultiplier: 2,
         heroShape: true,
         glowMultiplier: 2.5,
@@ -3940,6 +4143,12 @@ const $f89bc858f7202849$var$ARCHETYPES = [
             ...b.preferredStyles
         ])
     ];
+    const mergedCompositions = [
+        ...new Set([
+            ...a.preferredCompositions,
+            ...b.preferredCompositions
+        ])
+    ];
     return {
         name: `${a.name}+${b.name}`,
         gridSize: Math.round($f89bc858f7202849$var$lerpNum(a.gridSize, b.gridSize, t)),
@@ -3951,6 +4160,7 @@ const $f89bc858f7202849$var$ARCHETYPES = [
         backgroundStyle: t < 0.5 ? a.backgroundStyle : b.backgroundStyle,
         paletteMode: t < 0.5 ? a.paletteMode : b.paletteMode,
         preferredStyles: mergedStyles,
+        preferredCompositions: mergedCompositions,
         flowLineMultiplier: $f89bc858f7202849$var$lerpNum(a.flowLineMultiplier, b.flowLineMultiplier, t),
         heroShape: t < 0.5 ? a.heroShape : b.heroShape,
         glowMultiplier: $f89bc858f7202849$var$lerpNum(a.glowMultiplier, b.glowMultiplier, t),
@@ -3972,6 +4182,46 @@ function $f89bc858f7202849$export$f1142fd7da4d6590(rng) {
 }
 
 
+// ── Render style cost weights (normalized: fill-and-stroke = 1) ─────
+// Based on benchmark measurements. Used by the complexity budget to
+// cap total rendering work and downgrade expensive styles when needed.
+const $4f72c5a314eddf25$var$RENDER_STYLE_COST = {
+    "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
+};
+function $4f72c5a314eddf25$var$downgradeRenderStyle(style) {
+    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;
+    }
+}
 // ── Shape categories for weighted selection (legacy fallback) ───────
 const $4f72c5a314eddf25$var$SACRED_SHAPES = [
     "mandala",
@@ -3984,7 +4234,8 @@ const $4f72c5a314eddf25$var$SACRED_SHAPES = [
     "torus",
     "eggOfLife"
 ];
-const $4f72c5a314eddf25$var$COMPOSITION_MODES = [
+// ── Composition modes ───────────────────────────────────────────────
+const $4f72c5a314eddf25$var$ALL_COMPOSITION_MODES = [
     "radial",
     "flow-field",
     "spiral",
@@ -4086,7 +4337,69 @@ function $4f72c5a314eddf25$var$isInVoidZone(x, y, voidZones) {
     }
     return false;
 }
-// ── Helper: density check ───────────────────────────────────────────
+// ── Spatial hash grid for O(1) density checks and nearest-neighbor ──
+class $4f72c5a314eddf25$var$SpatialGrid {
+    cells;
+    cellSize;
+    constructor(cellSize){
+        this.cells = new Map();
+        this.cellSize = cellSize;
+    }
+    key(cx, cy) {
+        return `${cx},${cy}`;
+    }
+    insert(item) {
+        const cx = Math.floor(item.x / this.cellSize);
+        const cy = Math.floor(item.y / this.cellSize);
+        const k = this.key(cx, cy);
+        const cell = this.cells.get(k);
+        if (cell) cell.push(item);
+        else this.cells.set(k, [
+            item
+        ]);
+    }
+    /** Count items within radius of (x, y) */ countNear(x, y, radius) {
+        const r2 = radius * radius;
+        const minCx = Math.floor((x - radius) / this.cellSize);
+        const maxCx = Math.floor((x + radius) / this.cellSize);
+        const minCy = Math.floor((y - radius) / this.cellSize);
+        const maxCy = Math.floor((y + radius) / this.cellSize);
+        let count = 0;
+        for(let cx = minCx; cx <= maxCx; cx++)for(let cy = minCy; cy <= maxCy; cy++){
+            const cell = this.cells.get(this.key(cx, cy));
+            if (!cell) continue;
+            for (const p of cell){
+                const dx = x - p.x;
+                const dy = y - p.y;
+                if (dx * dx + dy * dy < r2) count++;
+            }
+        }
+        return count;
+    }
+    /** Find nearest item to (x, y) */ findNearest(x, y, searchRadius) {
+        const minCx = Math.floor((x - searchRadius) / this.cellSize);
+        const maxCx = Math.floor((x + searchRadius) / this.cellSize);
+        const minCy = Math.floor((y - searchRadius) / this.cellSize);
+        const maxCy = Math.floor((y + searchRadius) / this.cellSize);
+        let nearest = null;
+        let bestDist2 = Infinity;
+        for(let cx = minCx; cx <= maxCx; cx++)for(let cy = minCy; cy <= maxCy; cy++){
+            const cell = this.cells.get(this.key(cx, cy));
+            if (!cell) continue;
+            for (const p of cell){
+                const dx = x - p.x;
+                const dy = y - p.y;
+                const d2 = dx * dx + dy * dy;
+                if (d2 > 0 && d2 < bestDist2) {
+                    bestDist2 = d2;
+                    nearest = p;
+                }
+            }
+        }
+        return nearest;
+    }
+}
+// ── Helper: density check (legacy wrapper) ──────────────────────────
 function $4f72c5a314eddf25$var$localDensity(x, y, positions, radius) {
     let count = 0;
     for (const p of positions)if (Math.hypot(x - p.x, y - p.y) < radius) count++;
@@ -4385,42 +4698,43 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         const patternOpacity = 0.02 + rng() * 0.04;
         const patternColor = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.15);
         if (bgPatternRoll < 0.2) {
-            // Dot grid
+            // Dot grid — batched into a single path
             const dotSpacing = Math.max(8, Math.min(width, height) * (0.015 + rng() * 0.015));
             const dotR = dotSpacing * 0.08;
             ctx.globalAlpha = patternOpacity;
             ctx.fillStyle = patternColor;
+            ctx.beginPath();
             for(let px = 0; px < width; px += dotSpacing)for(let py = 0; py < height; py += dotSpacing){
-                ctx.beginPath();
+                ctx.moveTo(px + dotR, py);
                 ctx.arc(px, py, dotR, 0, Math.PI * 2);
-                ctx.fill();
             }
+            ctx.fill();
         } else if (bgPatternRoll < 0.4) {
-            // Diagonal lines
+            // Diagonal lines — batched into a single path
             const lineSpacing = Math.max(6, Math.min(width, height) * (0.02 + rng() * 0.02));
             ctx.globalAlpha = patternOpacity;
             ctx.strokeStyle = patternColor;
             ctx.lineWidth = 0.5 * scaleFactor;
             const diag = Math.hypot(width, height);
+            ctx.beginPath();
             for(let d = -diag; d < diag; d += lineSpacing){
-                ctx.beginPath();
                 ctx.moveTo(d, 0);
                 ctx.lineTo(d + height, height);
-                ctx.stroke();
             }
+            ctx.stroke();
         } else {
-            // Tessellation — hexagonal grid of tiny shapes
+            // Tessellation — hexagonal grid, batched into a single path
             const tessSize = Math.max(10, Math.min(width, height) * (0.025 + rng() * 0.02));
             const tessH = tessSize * Math.sqrt(3);
             ctx.globalAlpha = patternOpacity * 0.7;
             ctx.strokeStyle = patternColor;
             ctx.lineWidth = 0.4 * scaleFactor;
+            ctx.beginPath();
             for(let row = 0; row * tessH < height + tessH; row++){
                 const offsetX = row % 2 * tessSize * 0.75;
                 for(let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5; col++){
                     const hx = col * tessSize * 1.5 + offsetX;
                     const hy = row * tessH;
-                    ctx.beginPath();
                     for(let s = 0; s < 6; s++){
                         const angle = Math.PI / 3 * s - Math.PI / 6;
                         const vx = hx + Math.cos(angle) * tessSize * 0.5;
@@ -4429,18 +4743,18 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                         else ctx.lineTo(vx, vy);
                     }
                     ctx.closePath();
-                    ctx.stroke();
                 }
             }
+            ctx.stroke();
         }
         ctx.restore();
     }
     ctx.globalCompositeOperation = "source-over";
-    // ── 2. Composition mode ────────────────────────────────────────
-    const compositionMode = $4f72c5a314eddf25$var$COMPOSITION_MODES[Math.floor(rng() * $4f72c5a314eddf25$var$COMPOSITION_MODES.length)];
+    // ── 2. Composition mode — archetype-aware selection ──────────────
+    const compositionMode = rng() < 0.7 ? archetype.preferredCompositions[Math.floor(rng() * archetype.preferredCompositions.length)] : $4f72c5a314eddf25$var$ALL_COMPOSITION_MODES[Math.floor(rng() * $4f72c5a314eddf25$var$ALL_COMPOSITION_MODES.length)];
     const symRoll = rng();
     const symmetryMode = symRoll < 0.10 ? "bilateral-x" : symRoll < 0.20 ? "bilateral-y" : symRoll < 0.25 ? "quad" : "none";
-    // ── 3. Focal points + void zones ───────────────────────────────
+    // ── 3. Focal points + void zones (archetype-aware) ───────────────
     const THIRDS_POINTS = [
         {
             x: 1 / 3,
@@ -4473,9 +4787,23 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         y: height * (0.2 + rng() * 0.6),
         strength: 0.3 + rng() * 0.4
     });
-    const numVoids = Math.floor(rng() * 2) + 1;
+    // Archetype-aware void zones: dense archetypes get fewer/no voids,
+    // minimal archetypes get golden-ratio positioned voids
+    const PHI = (1 + Math.sqrt(5)) / 2;
+    const isMinimalArchetype = archetype.gridSize <= 3;
+    const isDenseArchetype = archetype.gridSize >= 8;
+    const numVoids = isDenseArchetype ? 0 : Math.floor(rng() * 2) + 1;
     const voidZones = [];
-    for(let v = 0; v < numVoids; v++)voidZones.push({
+    for(let v = 0; v < numVoids; v++)if (isMinimalArchetype) {
+        // Place voids at golden-ratio positions for intentional negative space
+        const gx = v === 0 ? 1 / PHI : 1 - 1 / PHI;
+        const gy = v === 0 ? 1 - 1 / PHI : 1 / PHI;
+        voidZones.push({
+            x: width * (gx + (rng() - 0.5) * 0.05),
+            y: height * (gy + (rng() - 0.5) * 0.05),
+            radius: Math.min(width, height) * (0.08 + rng() * 0.08)
+        });
+    } else voidZones.push({
         x: width * (0.15 + rng() * 0.7),
         y: height * (0.15 + rng() * 0.7),
         radius: Math.min(width, height) * (0.06 + rng() * 0.1)
@@ -4505,19 +4833,20 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.beginPath();
         ctx.arc(zone.x, zone.y, zone.radius, 0, Math.PI * 2);
         ctx.stroke();
-        // ~50% chance: scatter tiny dots inside the void
+        // ~50% chance: scatter tiny dots inside the void — batched into single path
         if (rng() < 0.5) {
             const dotCount = 3 + Math.floor(rng() * 6);
             ctx.globalAlpha = 0.06 + rng() * 0.04;
             ctx.fillStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.15);
+            ctx.beginPath();
             for(let d = 0; d < dotCount; d++){
                 const angle = rng() * Math.PI * 2;
                 const dist = rng() * zone.radius * 0.7;
                 const dotR = (1 + rng() * 3) * scaleFactor;
-                ctx.beginPath();
+                ctx.moveTo(zone.x + Math.cos(angle) * dist + dotR, zone.y + Math.sin(angle) * dist);
                 ctx.arc(zone.x + Math.cos(angle) * dist, zone.y + Math.sin(angle) * dist, dotR, 0, Math.PI * 2);
-                ctx.fill();
             }
+            ctx.fill();
         }
         // ~30% chance: thin concentric ring inside
         if (rng() < 0.3) {
@@ -4552,6 +4881,9 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
     }
     // Track all placed shapes for density checks and connecting curves
     const shapePositions = [];
+    // Spatial grid for O(1) density and nearest-neighbor lookups
+    const densityCheckRadius = Math.min(width, height) * 0.08;
+    const spatialGrid = new $4f72c5a314eddf25$var$SpatialGrid(densityCheckRadius);
     // Hero avoidance radius — shapes near the hero orient toward it
     let heroCenter = null;
     // ── 4b. Hero shape — a dominant focal element ───────────────────
@@ -4597,10 +4929,35 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             size: heroSize,
             shape: heroShape
         });
+        spatialGrid.insert({
+            x: heroFocal.x,
+            y: heroFocal.y,
+            size: heroSize,
+            shape: heroShape
+        });
     }
     // ── 5. Shape layers ────────────────────────────────────────────
-    const densityCheckRadius = Math.min(width, height) * 0.08;
     const maxLocalDensity = Math.ceil(shapesPerLayer * 0.15);
+    // ── Complexity budget — caps total rendering work ──────────────
+    // Budget scales with pixel area so larger canvases get proportionally
+    // more headroom.  The multiplier extras (glazing, echoes, nesting,
+    // constellations, rhythm) are gated behind the budget; when it runs
+    // low they are skipped.  When it's exhausted, expensive render styles
+    // are downgraded to cheaper alternatives.
+    //
+    // RNG values are always consumed even when skipping, so the
+    // deterministic sequence for shapes that *do* render is preserved.
+    const pixelArea = width * height;
+    const BUDGET_PER_MEGAPIXEL = 6000; // cost units per 1M pixels
+    let complexityBudget = pixelArea / 1000000 * BUDGET_PER_MEGAPIXEL;
+    const totalBudget = complexityBudget;
+    const budgetForExtras = complexityBudget * 0.25; // reserve 25% for multiplier extras
+    let extrasSpent = 0;
+    // Hard cap on clip-heavy render styles (stipple, noise-grain).
+    // These generate O(size²) fillRect calls per shape and dominate
+    // worst-case render time.  Cap scales with pixel area.
+    const MAX_CLIP_HEAVY_SHAPES = Math.max(4, Math.floor(8 * (pixelArea / 1000000)));
+    let clipHeavyCount = 0;
     for(let layer = 0; layer < layers; layer++){
         const layerRatio = layers > 1 ? layer / (layers - 1) : 0;
         const numShapes = shapesPerLayer + Math.floor(rng() * shapesPerLayer * 0.3);
@@ -4638,7 +4995,7 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             if ($4f72c5a314eddf25$var$isInVoidZone(x, y, voidZones)) {
                 if (rng() < 0.85) continue;
             }
-            if ($4f72c5a314eddf25$var$localDensity(x, y, shapePositions, densityCheckRadius) > maxLocalDensity) {
+            if (spatialGrid.countNear(x, y, densityCheckRadius) > maxLocalDensity) {
                 if (rng() < 0.6) continue;
             }
             // Power distribution for size — archetype controls the curve
@@ -4689,7 +5046,26 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             const shapeRenderStyle = (0, $e73976f898150d4d$export$ab873bb6fb56c1a8)(shape, layerRenderStyle, rng);
             // Organic edge jitter — applied via watercolor style on ~15% of shapes
             const useOrganicEdges = rng() < 0.15 && shapeRenderStyle === "fill-and-stroke";
-            const finalRenderStyle = useOrganicEdges ? "watercolor" : shapeRenderStyle;
+            let finalRenderStyle = useOrganicEdges ? "watercolor" : shapeRenderStyle;
+            // Budget check: downgrade expensive styles proportionally —
+            // the more expensive the style, the earlier it gets downgraded.
+            // noise-grain (400) downgrades when budget < 20% remaining,
+            // stipple (90) when < 82%, wood-grain (10) when < 98%.
+            let styleCost = $4f72c5a314eddf25$var$RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+            if (styleCost > 3) {
+                const downgradeThreshold = Math.min(0.85, styleCost / 500);
+                if (complexityBudget < totalBudget * (1 - downgradeThreshold)) {
+                    finalRenderStyle = $4f72c5a314eddf25$var$downgradeRenderStyle(finalRenderStyle);
+                    styleCost = $4f72c5a314eddf25$var$RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+                }
+            }
+            // Hard cap: clip-heavy styles (stipple, noise-grain) are limited
+            // to MAX_CLIP_HEAVY_SHAPES total across the entire render.
+            if ((finalRenderStyle === "stipple" || finalRenderStyle === "noise-grain") && clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) {
+                finalRenderStyle = $4f72c5a314eddf25$var$downgradeRenderStyle(finalRenderStyle);
+                styleCost = $4f72c5a314eddf25$var$RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+            }
+            if (finalRenderStyle === "stipple" || finalRenderStyle === "noise-grain") clipHeavyCount++;
             // Consistent light direction — subtle shadow offset
             const shadowDist = hasGlow ? 0 : size * 0.02;
             const shadowOffX = shadowDist * Math.cos(lightAngle);
@@ -4698,17 +5074,11 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             let finalX = x;
             let finalY = y;
             if (shapePositions.length > 0 && rng() < 0.25) {
-                // Find nearest placed shape
-                let nearestDist = Infinity;
-                let nearestPos = null;
-                for (const sp of shapePositions){
-                    const d = Math.hypot(x - sp.x, y - sp.y);
-                    if (d < nearestDist && d > 0) {
-                        nearestDist = d;
-                        nearestPos = sp;
-                    }
-                }
+                // Use spatial grid for O(1) nearest-neighbor lookup
+                const searchRadius = adjustedMaxSize * 3;
+                const nearestPos = spatialGrid.findNearest(x, y, searchRadius);
                 if (nearestPos) {
+                    const nearestDist = Math.hypot(x - nearestPos.x, y - nearestPos.y);
                     // Target distance: edges kissing (sum of half-sizes)
                     const targetDist = (size + nearestPos.size) * 0.5;
                     if (nearestDist > targetDist * 0.5 && nearestDist < targetDist * 3) {
@@ -4750,30 +5120,41 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                 lightAngle: lightAngle,
                 scaleFactor: scaleFactor
             };
-            if (shouldMirror) (0, $c3de8257a8baa3b0$export$8bd8bbd1a8e53689)(ctx, shape, finalX, finalY, {
-                ...shapeConfig,
-                mirrorAxis: mirrorAxis,
-                mirrorGap: size * (0.1 + rng() * 0.3)
-            });
-            else (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, shapeConfig);
+            if (shouldMirror) {
+                (0, $c3de8257a8baa3b0$export$8bd8bbd1a8e53689)(ctx, shape, finalX, finalY, {
+                    ...shapeConfig,
+                    mirrorAxis: mirrorAxis,
+                    mirrorGap: size * (0.1 + rng() * 0.3)
+                });
+                complexityBudget -= styleCost * 2; // mirrored = 2 shapes
+            } else {
+                (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, shapeConfig);
+                complexityBudget -= styleCost;
+            }
+            // ── Extras budget gate — skip multiplier sections when over budget ──
+            const extrasAllowed = extrasSpent < budgetForExtras;
             // ── Glazing — luminous multi-pass transparency on ~20% of shapes ──
             if (rng() < 0.2 && size > adjustedMinSize * 2) {
                 const glazePasses = 2 + Math.floor(rng() * 2);
-                for(let g = 0; g < glazePasses; g++){
-                    const glazeScale = 1 - (g + 1) * 0.12; // progressively smaller
-                    const glazeAlpha = 0.08 + g * 0.04; // progressively more opaque toward center
-                    ctx.globalAlpha = glazeAlpha;
-                    (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, {
-                        fillColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(fillColor, 0.15 + g * 0.1),
-                        strokeColor: "rgba(0,0,0,0)",
-                        strokeWidth: 0,
-                        size: size * glazeScale,
-                        rotation: rotation,
-                        proportionType: "GOLDEN_RATIO",
-                        renderStyle: "fill-only",
-                        rng: rng
-                    });
+                if (extrasAllowed) {
+                    for(let g = 0; g < glazePasses; g++){
+                        const glazeScale = 1 - (g + 1) * 0.12;
+                        const glazeAlpha = 0.08 + g * 0.04;
+                        ctx.globalAlpha = glazeAlpha;
+                        (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, {
+                            fillColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(fillColor, 0.15 + g * 0.1),
+                            strokeColor: "rgba(0,0,0,0)",
+                            strokeWidth: 0,
+                            size: size * glazeScale,
+                            rotation: rotation,
+                            proportionType: "GOLDEN_RATIO",
+                            renderStyle: "fill-only",
+                            rng: rng
+                        });
+                    }
+                    extrasSpent += glazePasses;
                 }
+            // RNG consumed by glazePasses calculation above regardless
             }
             shapePositions.push({
                 x: finalX,
@@ -4781,35 +5162,51 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                 size: size,
                 shape: shape
             });
+            spatialGrid.insert({
+                x: finalX,
+                y: finalY,
+                size: size,
+                shape: shape
+            });
             // ── 5c. Size echo — large shapes spawn trailing smaller copies ──
             if (size > adjustedMaxSize * 0.5 && rng() < 0.2) {
                 const echoCount = 2 + Math.floor(rng() * 2);
                 const echoAngle = rng() * Math.PI * 2;
-                for(let e = 0; e < echoCount; e++){
-                    const echoScale = 0.3 - e * 0.08;
-                    const echoDist = size * (0.6 + e * 0.4);
-                    const echoX = finalX + Math.cos(echoAngle) * echoDist;
-                    const echoY = finalY + Math.sin(echoAngle) * echoDist;
-                    const echoSize = size * Math.max(0.1, echoScale);
-                    if (echoX < 0 || echoX > width || echoY < 0 || echoY > height) continue;
-                    ctx.globalAlpha = layerOpacity * (0.4 - e * 0.1);
-                    (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, echoX, echoY, {
-                        fillColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(fillColor, fillAlpha * 0.6),
-                        strokeColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(strokeColor, 0.4),
-                        strokeWidth: strokeWidth * 0.6,
-                        size: echoSize,
-                        rotation: rotation + (e + 1) * 15,
-                        proportionType: "GOLDEN_RATIO",
-                        renderStyle: finalRenderStyle,
-                        rng: rng
-                    });
-                    shapePositions.push({
-                        x: echoX,
-                        y: echoY,
-                        size: echoSize,
-                        shape: shape
-                    });
+                if (extrasAllowed) {
+                    for(let e = 0; e < echoCount; e++){
+                        const echoScale = 0.3 - e * 0.08;
+                        const echoDist = size * (0.6 + e * 0.4);
+                        const echoX = finalX + Math.cos(echoAngle) * echoDist;
+                        const echoY = finalY + Math.sin(echoAngle) * echoDist;
+                        const echoSize = size * Math.max(0.1, echoScale);
+                        if (echoX < 0 || echoX > width || echoY < 0 || echoY > height) continue;
+                        ctx.globalAlpha = layerOpacity * (0.4 - e * 0.1);
+                        (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, echoX, echoY, {
+                            fillColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(fillColor, fillAlpha * 0.6),
+                            strokeColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(strokeColor, 0.4),
+                            strokeWidth: strokeWidth * 0.6,
+                            size: echoSize,
+                            rotation: rotation + (e + 1) * 15,
+                            proportionType: "GOLDEN_RATIO",
+                            renderStyle: finalRenderStyle,
+                            rng: rng
+                        });
+                        shapePositions.push({
+                            x: echoX,
+                            y: echoY,
+                            size: echoSize,
+                            shape: shape
+                        });
+                        spatialGrid.insert({
+                            x: echoX,
+                            y: echoY,
+                            size: echoSize,
+                            shape: shape
+                        });
+                    }
+                    extrasSpent += echoCount * styleCost;
                 }
+            // RNG for echoCount + echoAngle consumed above regardless
             }
             // ── 5d. Recursive nesting ──────────────────────────────────
             // Focal depth: shapes near focal points get more detail
@@ -4817,7 +5214,7 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             const nestingChance = 0.15 + focalProximity * 0.15; // 15-30% near focal
             if (size > adjustedMaxSize * 0.4 && rng() < nestingChance) {
                 const innerCount = 1 + Math.floor(rng() * 3);
-                for(let n = 0; n < innerCount; n++){
+                if (extrasAllowed) for(let n = 0; n < innerCount; n++){
                     // Pick inner shape from palette affinities
                     const innerSizeFraction = size * 0.25 / adjustedMaxSize;
                     const innerShape = (0, $e73976f898150d4d$export$3c37d9a045754d0e)(shapePalette, rng, innerSizeFraction);
@@ -4826,6 +5223,10 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     const innerOffY = (rng() - 0.5) * size * 0.4;
                     const innerRot = rng() * 360;
                     const innerFill = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$18a34c25ea7e724b)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 10, 0.1), 0.3 + rng() * 0.4);
+                    let innerStyle = (0, $e73976f898150d4d$export$ab873bb6fb56c1a8)(innerShape, layerRenderStyle, rng);
+                    // Apply clip-heavy cap to nested shapes too
+                    if ((innerStyle === "stipple" || innerStyle === "noise-grain") && clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) innerStyle = $4f72c5a314eddf25$var$downgradeRenderStyle(innerStyle);
+                    if (innerStyle === "stipple" || innerStyle === "noise-grain") clipHeavyCount++;
                     ctx.globalAlpha = layerOpacity * 0.7;
                     (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, innerShape, finalX + innerOffX, finalY + innerOffY, {
                         fillColor: innerFill,
@@ -4834,9 +5235,21 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                         size: innerSize,
                         rotation: innerRot,
                         proportionType: "GOLDEN_RATIO",
-                        renderStyle: (0, $e73976f898150d4d$export$ab873bb6fb56c1a8)(innerShape, layerRenderStyle, rng),
+                        renderStyle: innerStyle,
                         rng: rng
                     });
+                    extrasSpent += $4f72c5a314eddf25$var$RENDER_STYLE_COST[innerStyle] ?? 1;
+                }
+                else // Drain RNG to keep determinism — each nested shape consumes ~8 rng calls
+                for(let n = 0; n < innerCount; n++){
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
                 }
             }
             // ── 5e. Shape constellations — pre-composed groups ─────────
@@ -4845,41 +5258,113 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                 const constellation = $4f72c5a314eddf25$var$CONSTELLATIONS[Math.floor(rng() * $4f72c5a314eddf25$var$CONSTELLATIONS.length)];
                 const members = constellation.build(rng, size);
                 const groupRotation = rng() * Math.PI * 2;
-                const cosR = Math.cos(groupRotation);
-                const sinR = Math.sin(groupRotation);
-                for (const member of members){
-                    // Rotate the group offset by the group rotation
-                    const mx = finalX + member.dx * cosR - member.dy * sinR;
-                    const my = finalY + member.dx * sinR + member.dy * cosR;
-                    if (mx < 0 || mx > width || my < 0 || my > height) continue;
-                    const memberFill = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$18a34c25ea7e724b)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 8, 0.06), fillAlpha * 0.8);
-                    const memberStroke = (0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$18a34c25ea7e724b)(strokeBase, rng, 5, 0.04), bgLum);
-                    ctx.globalAlpha = layerOpacity * 0.6;
-                    // Use the member's shape if available, otherwise fall back to palette
-                    const memberShape = shapeNames.includes(member.shape) ? member.shape : (0, $e73976f898150d4d$export$3c37d9a045754d0e)(shapePalette, rng, member.size / adjustedMaxSize);
-                    (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, memberShape, mx, my, {
-                        fillColor: memberFill,
-                        strokeColor: memberStroke,
-                        strokeWidth: strokeWidth * 0.7,
-                        size: member.size,
-                        rotation: member.rotation + groupRotation * 180 / Math.PI,
-                        proportionType: "GOLDEN_RATIO",
-                        renderStyle: (0, $e73976f898150d4d$export$ab873bb6fb56c1a8)(memberShape, layerRenderStyle, rng),
-                        rng: rng
-                    });
-                    shapePositions.push({
-                        x: mx,
-                        y: my,
-                        size: member.size,
-                        shape: memberShape
-                    });
+                if (extrasAllowed) {
+                    const cosR = Math.cos(groupRotation);
+                    const sinR = Math.sin(groupRotation);
+                    for (const member of members){
+                        // Rotate the group offset by the group rotation
+                        const mx = finalX + member.dx * cosR - member.dy * sinR;
+                        const my = finalY + member.dx * sinR + member.dy * cosR;
+                        if (mx < 0 || mx > width || my < 0 || my > height) continue;
+                        const memberFill = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$18a34c25ea7e724b)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 8, 0.06), fillAlpha * 0.8);
+                        const memberStroke = (0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$18a34c25ea7e724b)(strokeBase, rng, 5, 0.04), bgLum);
+                        ctx.globalAlpha = layerOpacity * 0.6;
+                        // Use the member's shape if available, otherwise fall back to palette
+                        const memberShape = shapeNames.includes(member.shape) ? member.shape : (0, $e73976f898150d4d$export$3c37d9a045754d0e)(shapePalette, rng, member.size / adjustedMaxSize);
+                        let memberStyle = (0, $e73976f898150d4d$export$ab873bb6fb56c1a8)(memberShape, layerRenderStyle, rng);
+                        // Apply clip-heavy cap to constellation members too
+                        if ((memberStyle === "stipple" || memberStyle === "noise-grain") && clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) memberStyle = $4f72c5a314eddf25$var$downgradeRenderStyle(memberStyle);
+                        if (memberStyle === "stipple" || memberStyle === "noise-grain") clipHeavyCount++;
+                        (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, memberShape, mx, my, {
+                            fillColor: memberFill,
+                            strokeColor: memberStroke,
+                            strokeWidth: strokeWidth * 0.7,
+                            size: member.size,
+                            rotation: member.rotation + groupRotation * 180 / Math.PI,
+                            proportionType: "GOLDEN_RATIO",
+                            renderStyle: memberStyle,
+                            rng: rng
+                        });
+                        shapePositions.push({
+                            x: mx,
+                            y: my,
+                            size: member.size,
+                            shape: memberShape
+                        });
+                        spatialGrid.insert({
+                            x: mx,
+                            y: my,
+                            size: member.size,
+                            shape: memberShape
+                        });
+                        extrasSpent += $4f72c5a314eddf25$var$RENDER_STYLE_COST[memberStyle] ?? 1;
+                    }
+                } else // Drain RNG — each member consumes ~6 rng calls for colors/style
+                for(let m = 0; m < members.length; m++){
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                }
+            }
+            // ── 5f. Rhythm placement — deliberate geometric progressions ──
+            // ~12% of medium-large shapes spawn a rhythmic sequence
+            if (size > adjustedMaxSize * 0.25 && rng() < 0.12) {
+                const rhythmCount = 3 + Math.floor(rng() * 4); // 3-6 shapes
+                const rhythmAngle = rng() * Math.PI * 2;
+                const rhythmSpacing = size * (0.8 + rng() * 0.6);
+                const rhythmDecay = 0.7 + rng() * 0.15; // size multiplier per step
+                const rhythmShape = shape; // same shape for visual rhythm
+                if (extrasAllowed) {
+                    let rhythmSize = size * 0.6;
+                    for(let r = 0; r < rhythmCount; r++){
+                        const rx = finalX + Math.cos(rhythmAngle) * rhythmSpacing * (r + 1);
+                        const ry = finalY + Math.sin(rhythmAngle) * rhythmSpacing * (r + 1);
+                        if (rx < 0 || rx > width || ry < 0 || ry > height) break;
+                        if ($4f72c5a314eddf25$var$isInVoidZone(rx, ry, voidZones)) break;
+                        rhythmSize *= rhythmDecay;
+                        if (rhythmSize < adjustedMinSize) break;
+                        const rhythmAlpha = layerOpacity * (0.6 - r * 0.08);
+                        ctx.globalAlpha = Math.max(0.1, rhythmAlpha);
+                        const rhythmFill = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$18a34c25ea7e724b)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(layerHierarchy, rng), rng, 5, 0.04), fillAlpha * 0.7);
+                        (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, rhythmShape, rx, ry, {
+                            fillColor: rhythmFill,
+                            strokeColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(strokeColor, 0.5),
+                            strokeWidth: strokeWidth * 0.7,
+                            size: rhythmSize,
+                            rotation: rotation + (r + 1) * 12,
+                            proportionType: "GOLDEN_RATIO",
+                            renderStyle: finalRenderStyle,
+                            rng: rng
+                        });
+                        shapePositions.push({
+                            x: rx,
+                            y: ry,
+                            size: rhythmSize,
+                            shape: rhythmShape
+                        });
+                        spatialGrid.insert({
+                            x: rx,
+                            y: ry,
+                            size: rhythmSize,
+                            shape: rhythmShape
+                        });
+                    }
+                    extrasSpent += rhythmCount * styleCost;
+                } else // Drain RNG — each rhythm step consumes ~3 rng calls for colors
+                for(let r = 0; r < rhythmCount; r++){
+                    rng();
+                    rng();
+                    rng();
                 }
             }
         }
     }
     // Reset blend mode for post-processing passes
     ctx.globalCompositeOperation = "source-over";
-    // ── 5f. Layered masking / cutout portals ───────────────────────
+    // ── 5g. Layered masking / cutout portals ───────────────────────
     // ~18% of images get 1-3 portal windows that paint over foreground
     // with a tinted background wash, creating a "peek through" effect.
     if (rng() < 0.18 && shapePositions.length > 3) {
@@ -4938,14 +5423,26 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         }
     }
     // ── 6. Flow-line pass — variable color, branching, pressure ────
+    // Optimized: collect all segments into width-quantized buckets, then
+    // render each bucket as a single batched path.  This reduces
+    // beginPath/stroke calls from O(segments) to O(buckets).
     const baseFlowLines = 6 + Math.floor(rng() * 10);
     const numFlowLines = Math.round(baseFlowLines * archetype.flowLineMultiplier);
+    // Width buckets — 6 buckets cover the taper×pressure range
+    const FLOW_WIDTH_BUCKETS = 6;
+    const flowBuckets = [];
+    for(let b = 0; b < FLOW_WIDTH_BUCKETS; b++)flowBuckets.push([]);
+    // Track the representative width for each bucket
+    const flowBucketWidths = new Array(FLOW_WIDTH_BUCKETS);
+    // Pre-compute max possible width for bucket assignment
+    let globalMaxFlowWidth = 0;
     for(let i = 0; i < numFlowLines; i++){
         let fx = rng() * width;
         let fy = rng() * height;
         const steps = 30 + Math.floor(rng() * 40);
         const stepLen = (3 + rng() * 5) * scaleFactor;
         const startWidth = (1 + rng() * 3) * scaleFactor;
+        if (startWidth > globalMaxFlowWidth) globalMaxFlowWidth = startWidth;
         // Variable color: interpolate between two hierarchy colors along the stroke
         const lineColorStart = (0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum);
         const lineColorEnd = (0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum);
@@ -4960,20 +5457,29 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             fx += Math.cos(angle) * stepLen;
             fy += Math.sin(angle) * stepLen;
             if (fx < 0 || fx > width || fy < 0 || fy > height) break;
+            // Skip segments that pass through void zones
+            if ($4f72c5a314eddf25$var$isInVoidZone(fx, fy, voidZones)) {
+                prevX = fx;
+                prevY = fy;
+                continue;
+            }
             const t = s / steps;
-            // Taper + pressure
             const taper = 1 - t * 0.8;
             const pressure = 0.6 + 0.4 * Math.sin(t * pressureFreq * Math.PI + pressurePhase);
-            ctx.globalAlpha = lineAlpha * taper;
-            // Interpolate color along stroke
+            const segWidth = startWidth * taper * pressure;
+            const segAlpha = lineAlpha * taper;
             const lineColor = t < 0.5 ? (0, $d016ad53434219a1$export$f2121afcad3d553f)(lineColorStart, 0.4 + t * 0.2) : (0, $d016ad53434219a1$export$f2121afcad3d553f)(lineColorEnd, 0.4 + (1 - t) * 0.2);
-            ctx.strokeStyle = lineColor;
-            ctx.lineWidth = startWidth * taper * pressure;
-            ctx.lineCap = "round";
-            ctx.beginPath();
-            ctx.moveTo(prevX, prevY);
-            ctx.lineTo(fx, fy);
-            ctx.stroke();
+            // Quantize width into bucket
+            const bucketIdx = Math.min(FLOW_WIDTH_BUCKETS - 1, Math.floor(segWidth / (globalMaxFlowWidth || 1) * FLOW_WIDTH_BUCKETS));
+            flowBuckets[bucketIdx].push({
+                x1: prevX,
+                y1: prevY,
+                x2: fx,
+                y2: fy,
+                color: lineColor,
+                alpha: segAlpha
+            });
+            flowBucketWidths[bucketIdx] = segWidth;
             // Branching: ~12% chance per step to spawn a thinner child stroke
             if (rng() < 0.12 && s > 5 && s < steps - 10) {
                 const branchAngle = angle + (rng() < 0.5 ? 1 : -1) * (0.3 + rng() * 0.5);
@@ -4989,12 +5495,18 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     by += Math.sin(bAngle) * stepLen * 0.8;
                     if (bx < 0 || bx > width || by < 0 || by > height) break;
                     const bTaper = 1 - bs / branchSteps * 0.9;
-                    ctx.globalAlpha = lineAlpha * taper * bTaper * 0.6;
-                    ctx.lineWidth = branchWidth * bTaper;
-                    ctx.beginPath();
-                    ctx.moveTo(bPrevX, bPrevY);
-                    ctx.lineTo(bx, by);
-                    ctx.stroke();
+                    const bSegWidth = branchWidth * bTaper;
+                    const bAlpha = lineAlpha * taper * bTaper * 0.6;
+                    const bBucket = Math.min(FLOW_WIDTH_BUCKETS - 1, Math.floor(bSegWidth / (globalMaxFlowWidth || 1) * FLOW_WIDTH_BUCKETS));
+                    flowBuckets[bBucket].push({
+                        x1: bPrevX,
+                        y1: bPrevY,
+                        x2: bx,
+                        y2: by,
+                        color: lineColor,
+                        alpha: bAlpha
+                    });
+                    flowBucketWidths[bBucket] = bSegWidth;
                     bPrevX = bx;
                     bPrevY = by;
                 }
@@ -5003,7 +5515,40 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             prevY = fy;
         }
     }
+    // Render flow line buckets — one batched path per width bucket
+    // Within each bucket, further sub-batch by quantized alpha (4 levels)
+    ctx.lineCap = "round";
+    const FLOW_ALPHA_BUCKETS = 4;
+    for(let wb = 0; wb < FLOW_WIDTH_BUCKETS; wb++){
+        const segs = flowBuckets[wb];
+        if (segs.length === 0) continue;
+        ctx.lineWidth = flowBucketWidths[wb];
+        // Sub-bucket by alpha
+        const alphaSubs = [];
+        for(let a = 0; a < FLOW_ALPHA_BUCKETS; a++)alphaSubs.push([]);
+        let maxAlpha = 0;
+        for(let j = 0; j < segs.length; j++)if (segs[j].alpha > maxAlpha) maxAlpha = segs[j].alpha;
+        for(let j = 0; j < segs.length; j++){
+            const ai = Math.min(FLOW_ALPHA_BUCKETS - 1, Math.floor(segs[j].alpha / (maxAlpha || 1) * FLOW_ALPHA_BUCKETS));
+            alphaSubs[ai].push(segs[j]);
+        }
+        for(let ai = 0; ai < FLOW_ALPHA_BUCKETS; ai++){
+            const sub = alphaSubs[ai];
+            if (sub.length === 0) continue;
+            // Use the median segment's alpha and color as representative
+            const rep = sub[Math.floor(sub.length / 2)];
+            ctx.globalAlpha = rep.alpha;
+            ctx.strokeStyle = rep.color;
+            ctx.beginPath();
+            for(let j = 0; j < sub.length; j++){
+                ctx.moveTo(sub[j].x1, sub[j].y1);
+                ctx.lineTo(sub[j].x2, sub[j].y2);
+            }
+            ctx.stroke();
+        }
+    }
     // ── 6b. Motion/energy lines — short directional bursts ─────────
+    // Optimized: collect all burst segments, then batch by quantized alpha
     const energyArchetypes = [
         "dense-chaotic",
         "cosmic",
@@ -5014,8 +5559,12 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
     if (hasEnergyLines && shapePositions.length > 0) {
         const energyCount = 5 + Math.floor(rng() * 10);
         ctx.lineCap = "round";
+        // Collect all energy segments with their computed state
+        const ENERGY_ALPHA_BUCKETS = 3;
+        const energyBuckets = [];
+        for(let b = 0; b < ENERGY_ALPHA_BUCKETS; b++)energyBuckets.push([]);
+        const energyAlphas = new Array(ENERGY_ALPHA_BUCKETS).fill(0);
         for(let e = 0; e < energyCount; e++){
-            // Pick a random shape to radiate from
             const source = shapePositions[Math.floor(rng() * shapePositions.length)];
             const burstCount = 2 + Math.floor(rng() * 4);
             const baseAngle = flowAngle(source.x, source.y);
@@ -5027,14 +5576,37 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                 const sy = source.y + Math.sin(angle) * startDist;
                 const ex = sx + Math.cos(angle) * lineLen;
                 const ey = sy + Math.sin(angle) * lineLen;
-                ctx.globalAlpha = 0.04 + rng() * 0.06;
-                ctx.strokeStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
-                ctx.lineWidth = (0.5 + rng() * 1.5) * scaleFactor;
-                ctx.beginPath();
-                ctx.moveTo(sx, sy);
-                ctx.lineTo(ex, ey);
-                ctx.stroke();
+                const eAlpha = 0.04 + rng() * 0.06;
+                const eColor = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
+                const eLw = (0.5 + rng() * 1.5) * scaleFactor;
+                // Quantize alpha into bucket
+                const bi = Math.min(ENERGY_ALPHA_BUCKETS - 1, Math.floor((eAlpha - 0.04) / 0.06 * ENERGY_ALPHA_BUCKETS));
+                energyBuckets[bi].push({
+                    x1: sx,
+                    y1: sy,
+                    x2: ex,
+                    y2: ey,
+                    color: eColor,
+                    lw: eLw
+                });
+                energyAlphas[bi] = eAlpha;
+            }
+        }
+        // Render batched energy lines
+        for(let bi = 0; bi < ENERGY_ALPHA_BUCKETS; bi++){
+            const segs = energyBuckets[bi];
+            if (segs.length === 0) continue;
+            ctx.globalAlpha = energyAlphas[bi];
+            // Use median segment's color and width as representative
+            const rep = segs[Math.floor(segs.length / 2)];
+            ctx.strokeStyle = rep.color;
+            ctx.lineWidth = rep.lw;
+            ctx.beginPath();
+            for(let j = 0; j < segs.length; j++){
+                ctx.moveTo(segs[j].x1, segs[j].y1);
+                ctx.lineTo(segs[j].x2, segs[j].y2);
             }
+            ctx.stroke();
         }
     }
     // ── 6c. Apply symmetry mirroring ─────────────────────────────────
@@ -5057,50 +5629,128 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         }
         ctx.restore();
     }
-    // ── 7. Noise texture overlay ───────────────────────────────────
+    // ── 7. Noise texture overlay — batched via ImageData ─────────────
+    // Optimized: cap density at large sizes (diminishing returns above ~2K dots),
+    // skip inner pixelScale loop when scale=1, use Uint32Array for faster writes.
     const noiseRng = (0, $e4b03e131ed2a289$export$eaf9227667332084)((0, $e4b03e131ed2a289$export$e9cc707de01b7042)(gitHash, 777));
-    const noiseDensity = Math.floor(width * height / 800);
-    for(let i = 0; i < noiseDensity; i++){
-        const nx = noiseRng() * width;
-        const ny = noiseRng() * height;
-        const brightness = noiseRng() > 0.5 ? 255 : 0;
-        const alpha = 0.01 + noiseRng() * 0.03;
-        ctx.globalAlpha = alpha;
-        ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
-        ctx.fillRect(nx, ny, 1 * scaleFactor, 1 * scaleFactor);
+    const rawNoiseDensity = Math.floor(width * height / 800);
+    // Cap at 2500 dots — beyond this the visual effect is indistinguishable
+    // but getImageData/putImageData cost scales with canvas size
+    const noiseDensity = Math.min(rawNoiseDensity, 2500);
+    try {
+        const imageData = ctx.getImageData(0, 0, width, height);
+        const data = imageData.data;
+        const pixelScale = Math.max(1, Math.round(scaleFactor));
+        if (pixelScale === 1) // Fast path — no inner loop, direct pixel write
+        // Pre-compute alpha blend as integer math (avoid float multiply per channel)
+        for(let i = 0; i < noiseDensity; i++){
+            const nx = Math.floor(noiseRng() * width);
+            const ny = Math.floor(noiseRng() * height);
+            const brightness = noiseRng() > 0.5 ? 255 : 0;
+            // srcA in range [0.01, 0.04] — multiply by 256 for fixed-point
+            const srcA256 = Math.round((0.01 + noiseRng() * 0.03) * 256);
+            const invA256 = 256 - srcA256;
+            const bSrc = brightness * srcA256; // pre-multiply brightness × alpha
+            const idx = ny * width + nx << 2;
+            data[idx] = data[idx] * invA256 + bSrc >> 8;
+            data[idx + 1] = data[idx + 1] * invA256 + bSrc >> 8;
+            data[idx + 2] = data[idx + 2] * invA256 + bSrc >> 8;
+        }
+        else for(let i = 0; i < noiseDensity; i++){
+            const nx = Math.floor(noiseRng() * width);
+            const ny = Math.floor(noiseRng() * height);
+            const brightness = noiseRng() > 0.5 ? 255 : 0;
+            const srcA256 = Math.round((0.01 + noiseRng() * 0.03) * 256);
+            const invA256 = 256 - srcA256;
+            const bSrc = brightness * srcA256;
+            for(let dy = 0; dy < pixelScale && ny + dy < height; dy++)for(let dx = 0; dx < pixelScale && nx + dx < width; dx++){
+                const idx = (ny + dy) * width + (nx + dx) << 2;
+                data[idx] = data[idx] * invA256 + bSrc >> 8;
+                data[idx + 1] = data[idx + 1] * invA256 + bSrc >> 8;
+                data[idx + 2] = data[idx + 2] * invA256 + bSrc >> 8;
+            }
+        }
+        ctx.putImageData(imageData, 0, 0);
+    } catch  {
+        // Fallback for environments where getImageData isn't available (e.g. some OffscreenCanvas)
+        for(let i = 0; i < noiseDensity; i++){
+            const nx = noiseRng() * width;
+            const ny = noiseRng() * height;
+            const brightness = noiseRng() > 0.5 ? 255 : 0;
+            const alpha = 0.01 + noiseRng() * 0.03;
+            ctx.globalAlpha = alpha;
+            ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
+            ctx.fillRect(nx, ny, 1 * scaleFactor, 1 * scaleFactor);
+        }
     }
     // ── 8. Vignette — darken edges to draw the eye inward ───────────
     ctx.globalAlpha = 1;
     const vignetteStrength = 0.25 + rng() * 0.2;
     const vigGrad = ctx.createRadialGradient(cx, cy, Math.min(width, height) * 0.3, cx, cy, bgRadius);
+    // Tint vignette based on background: warm sepia for light, cool blue for dark
+    const isLightBg = bgLum > 0.5;
+    const vignetteColor = isLightBg ? `rgba(80,60,30,${vignetteStrength.toFixed(3)})` // warm sepia
+     : `rgba(0,0,0,${vignetteStrength.toFixed(3)})`; // classic dark
     vigGrad.addColorStop(0, "rgba(0,0,0,0)");
     vigGrad.addColorStop(0.6, "rgba(0,0,0,0)");
-    vigGrad.addColorStop(1, `rgba(0,0,0,${vignetteStrength.toFixed(3)})`);
+    vigGrad.addColorStop(1, vignetteColor);
     ctx.fillStyle = vigGrad;
     ctx.fillRect(0, 0, width, height);
-    // ── 9. Organic connecting curves ───────────────────────────────
+    // ── 9. Organic connecting curves — proximity-aware ───────────────
+    // Optimized: batch all curves into alpha-quantized groups to reduce
+    // beginPath/stroke calls from O(numCurves) to O(alphaBuckets).
     if (shapePositions.length > 1) {
         const numCurves = Math.floor(8 * (width * height) / 1048576);
+        const maxCurveDist = Math.hypot(width, height) * 0.2; // only connect nearby shapes
         ctx.lineWidth = 0.8 * scaleFactor;
+        // Collect curves into 3 alpha buckets
+        const CURVE_ALPHA_BUCKETS = 3;
+        const curveBuckets = [];
+        const curveColors = [];
+        const curveAlphas = new Array(CURVE_ALPHA_BUCKETS).fill(0);
+        for(let b = 0; b < CURVE_ALPHA_BUCKETS; b++)curveBuckets.push([]);
         for(let i = 0; i < numCurves; i++){
             const idxA = Math.floor(rng() * shapePositions.length);
             const offset = 1 + Math.floor(rng() * Math.min(5, shapePositions.length - 1));
             const idxB = (idxA + offset) % shapePositions.length;
             const a = shapePositions[idxA];
             const b = shapePositions[idxB];
-            const mx = (a.x + b.x) / 2;
-            const my = (a.y + b.y) / 2;
             const dx = b.x - a.x;
             const dy = b.y - a.y;
             const dist = Math.hypot(dx, dy);
+            // Skip connections between distant shapes
+            if (dist > maxCurveDist) continue;
+            const mx = (a.x + b.x) / 2;
+            const my = (a.y + b.y) / 2;
             const bulge = (rng() - 0.5) * dist * 0.4;
             const cpx = mx + -dy / (dist || 1) * bulge;
             const cpy = my + dx / (dist || 1) * bulge;
-            ctx.globalAlpha = 0.06 + rng() * 0.1;
-            ctx.strokeStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
+            const curveAlpha = 0.06 + rng() * 0.1;
+            const curveColor = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
+            const bi = Math.min(CURVE_ALPHA_BUCKETS - 1, Math.floor((curveAlpha - 0.06) / 0.1 * CURVE_ALPHA_BUCKETS));
+            curveBuckets[bi].push({
+                ax: a.x,
+                ay: a.y,
+                cpx: cpx,
+                cpy: cpy,
+                bx: b.x,
+                by: b.y
+            });
+            curveAlphas[bi] = curveAlpha;
+            if (!curveColors[bi]) curveColors[bi] = curveColor;
+        }
+        // Render batched curves
+        for(let bi = 0; bi < CURVE_ALPHA_BUCKETS; bi++){
+            const curves = curveBuckets[bi];
+            if (curves.length === 0) continue;
+            ctx.globalAlpha = curveAlphas[bi];
+            ctx.strokeStyle = curveColors[bi];
             ctx.beginPath();
-            ctx.moveTo(a.x, a.y);
-            ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);
+            for(let j = 0; j < curves.length; j++){
+                const c = curves[j];
+                ctx.moveTo(c.ax, c.ay);
+                ctx.quadraticCurveTo(c.cpx, c.cpy, c.bx, c.by);
+            }
             ctx.stroke();
         }
     }
@@ -5218,11 +5868,14 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             }
         } else if (archName.includes("botanical") || archName.includes("organic") || archName.includes("watercolor")) {
             // Vine tendrils — organic curving lines along edges
+            // Optimized: batch all tendrils into a single path
             ctx.strokeStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.15);
             ctx.lineWidth = Math.max(0.8, 1.2 * scaleFactor);
             ctx.globalAlpha = 0.12 + borderRng() * 0.08;
             ctx.lineCap = "round";
             const tendrilCount = 8 + Math.floor(borderRng() * 8);
+            ctx.beginPath();
+            const leafPositions = [];
             for(let t = 0; t < tendrilCount; t++){
                 // Start from a random edge point
                 const edge = Math.floor(borderRng() * 4);
@@ -5240,7 +5893,6 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     tx = width - borderPad;
                     ty = borderRng() * height;
                 }
-                ctx.beginPath();
                 ctx.moveTo(tx, ty);
                 const segs = 3 + Math.floor(borderRng() * 4);
                 for(let s = 0; s < segs; s++){
@@ -5254,14 +5906,23 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     ty = cpy3;
                     ctx.quadraticCurveTo(cpx2, cpy2, tx, ty);
                 }
-                ctx.stroke();
-                // Small leaf/dot at tendril end
-                if (borderRng() < 0.6) {
-                    ctx.beginPath();
-                    ctx.arc(tx, ty, borderPad * (0.15 + borderRng() * 0.2), 0, Math.PI * 2);
-                    ctx.fillStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.08);
-                    ctx.fill();
+                // Collect leaf positions for batch fill
+                if (borderRng() < 0.6) leafPositions.push({
+                    x: tx,
+                    y: ty,
+                    r: borderPad * (0.15 + borderRng() * 0.2)
+                });
+            }
+            ctx.stroke();
+            // Batch all leaf dots into a single fill
+            if (leafPositions.length > 0) {
+                ctx.fillStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.08);
+                ctx.beginPath();
+                for (const leaf of leafPositions){
+                    ctx.moveTo(leaf.x + leaf.r, leaf.y);
+                    ctx.arc(leaf.x, leaf.y, leaf.r, 0, Math.PI * 2);
                 }
+                ctx.fill();
             }
         } else if (archName.includes("celestial") || archName.includes("cosmic") || archName.includes("neon")) {
             // Star-studded arcs along edges
@@ -5276,8 +5937,9 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             ctx.beginPath();
             ctx.arc(cx, height * 1.3, height * 0.6, Math.PI + 0.3, -0.3);
             ctx.stroke();
-            // Scatter small stars along the border region
+            // Scatter small stars along the border region — batched into single path
             const starCount = 15 + Math.floor(borderRng() * 15);
+            ctx.beginPath();
             for(let s = 0; s < starCount; s++){
                 const edge = Math.floor(borderRng() * 4);
                 let sx, sy;
@@ -5296,7 +5958,6 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                 }
                 const starR = (1 + borderRng() * 2.5) * scaleFactor;
                 // 4-point star
-                ctx.beginPath();
                 for(let p = 0; p < 8; p++){
                     const a = p / 8 * Math.PI * 2;
                     const r = p % 2 === 0 ? starR : starR * 0.4;
@@ -5306,8 +5967,8 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     else ctx.lineTo(px2, py2);
                 }
                 ctx.closePath();
-                ctx.fill();
             }
+            ctx.fill();
         } else if (archName.includes("minimal") || archName.includes("monochrome") || archName.includes("stipple")) {
             // Thin single rule — understated elegance
             ctx.strokeStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
@@ -5318,13 +5979,41 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         // Other archetypes: no border (intentional — not every image needs one)
         ctx.restore();
     }
-    // ── 11. Signature mark — unique geometric chop from hash prefix ──
+    // ── 11. Signature mark — placed in the least-dense corner ──────
     {
         const sigRng = (0, $e4b03e131ed2a289$export$eaf9227667332084)((0, $e4b03e131ed2a289$export$e9cc707de01b7042)(gitHash, 42));
         const sigSize = Math.min(width, height) * 0.025;
-        // Bottom-right corner with padding
-        const sigX = width - sigSize * 2.5;
-        const sigY = height - sigSize * 2.5;
+        const sigMargin = sigSize * 2.5;
+        // Find the corner with the lowest local density
+        const cornerCandidates = [
+            {
+                x: sigMargin,
+                y: sigMargin
+            },
+            {
+                x: width - sigMargin,
+                y: sigMargin
+            },
+            {
+                x: sigMargin,
+                y: height - sigMargin
+            },
+            {
+                x: width - sigMargin,
+                y: height - sigMargin
+            }
+        ];
+        let bestCorner = cornerCandidates[3]; // default: bottom-right
+        let minDensity = Infinity;
+        for (const corner of cornerCandidates){
+            const density = spatialGrid.countNear(corner.x, corner.y, sigSize * 5);
+            if (density < minDensity) {
+                minDensity = density;
+                bestCorner = corner;
+            }
+        }
+        const sigX = bestCorner.x;
+        const sigY = bestCorner.y;
         const sigSegments = 4 + Math.floor(sigRng() * 4); // 4-7 segments
         const sigColor = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.accent, 0.15);
         ctx.save();