git-hash-art 0.10.1 → 0.11.0

package/dist/browser.js

@@ -580,15 +580,17 @@ function $b5a262d09b87e373$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)=>$b5a262d09b87e373$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;
         }
     }
@@ -2485,16 +2487,26 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
     ctx.shadowColor = "transparent";
-    // ── Specular highlight — bright arc on the light-facing side ──
+    // ── Specular highlight — tinted arc on the light-facing side ──
     if (lightAngle !== undefined && size > 15 && 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);
-        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)");
+        // Tint highlight warm/cool based on fill color for cohesion
+        // Parse fill to detect warmth — fallback to white for non-parseable
+        let hlBase = "255,255,255";
+        if (typeof fillColor === "string" && fillColor.startsWith("#") && fillColor.length >= 7) {
+            const r = parseInt(fillColor.slice(1, 3), 16);
+            const g = parseInt(fillColor.slice(3, 5), 16);
+            const b = parseInt(fillColor.slice(5, 7), 16);
+            // Blend toward white but keep a hint of the fill's warmth
+            hlBase = `${Math.round(r * 0.15 + 216.75)},${Math.round(g * 0.15 + 216.75)},${Math.round(b * 0.15 + 216.75)}`;
+        }
+        hlGrad.addColorStop(0, `rgba(${hlBase},0.18)`);
+        hlGrad.addColorStop(0.5, `rgba(${hlBase},0.05)`);
+        hlGrad.addColorStop(1, `rgba(${hlBase},0)`);
         const savedOp = ctx.globalCompositeOperation;
         ctx.globalCompositeOperation = "soft-light";
         ctx.fillStyle = hlGrad;
@@ -3556,6 +3568,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "watercolor",
             "fill-only"
         ],
+        preferredCompositions: [
+            "clustered",
+            "flow-field",
+            "radial"
+        ],
         flowLineMultiplier: 2.5,
         heroShape: false,
         glowMultiplier: 0.5,
@@ -3577,6 +3594,10 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "stroke-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "golden-spiral",
+            "grid-subdivision"
+        ],
         flowLineMultiplier: 0.3,
         heroShape: true,
         glowMultiplier: 0,
@@ -3598,6 +3619,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "fill-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "flow-field",
+            "golden-spiral",
+            "spiral"
+        ],
         flowLineMultiplier: 4,
         heroShape: false,
         glowMultiplier: 0.3,
@@ -3620,6 +3646,10 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "double-stroke",
             "hatched"
         ],
+        preferredCompositions: [
+            "grid-subdivision",
+            "radial"
+        ],
         flowLineMultiplier: 0,
         heroShape: false,
         glowMultiplier: 0,
@@ -3641,6 +3671,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "incomplete",
             "fill-only"
         ],
+        preferredCompositions: [
+            "golden-spiral",
+            "radial",
+            "spiral"
+        ],
         flowLineMultiplier: 1.5,
         heroShape: true,
         glowMultiplier: 2,
@@ -3661,6 +3696,10 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "fill-and-stroke",
             "double-stroke"
         ],
+        preferredCompositions: [
+            "grid-subdivision",
+            "golden-spiral"
+        ],
         flowLineMultiplier: 0,
         heroShape: true,
         glowMultiplier: 0,
@@ -3682,6 +3721,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "double-stroke",
             "dashed"
         ],
+        preferredCompositions: [
+            "radial",
+            "spiral",
+            "clustered"
+        ],
         flowLineMultiplier: 2,
         heroShape: true,
         glowMultiplier: 3,
@@ -3704,6 +3748,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "stroke-only",
             "dashed"
         ],
+        preferredCompositions: [
+            "flow-field",
+            "grid-subdivision",
+            "clustered"
+        ],
         flowLineMultiplier: 1.5,
         heroShape: false,
         glowMultiplier: 0,
@@ -3725,6 +3774,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "watercolor",
             "fill-and-stroke"
         ],
+        preferredCompositions: [
+            "radial",
+            "spiral",
+            "golden-spiral"
+        ],
         flowLineMultiplier: 3,
         heroShape: true,
         glowMultiplier: 2.5,
@@ -3746,6 +3800,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "fill-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "golden-spiral",
+            "flow-field",
+            "radial"
+        ],
         flowLineMultiplier: 0.5,
         heroShape: false,
         glowMultiplier: 0.3,
@@ -3767,6 +3826,10 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "stroke-only",
             "dashed"
         ],
+        preferredCompositions: [
+            "grid-subdivision",
+            "radial"
+        ],
         flowLineMultiplier: 0,
         heroShape: false,
         glowMultiplier: 0,
@@ -3788,6 +3851,10 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "fill-only",
             "double-stroke"
         ],
+        preferredCompositions: [
+            "grid-subdivision",
+            "clustered"
+        ],
         flowLineMultiplier: 0,
         heroShape: true,
         glowMultiplier: 0,
@@ -3809,6 +3876,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "watercolor",
             "fill-only"
         ],
+        preferredCompositions: [
+            "radial",
+            "golden-spiral",
+            "flow-field"
+        ],
         flowLineMultiplier: 1,
         heroShape: true,
         glowMultiplier: 1,
@@ -3830,6 +3902,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "stroke-only",
             "fill-only"
         ],
+        preferredCompositions: [
+            "clustered",
+            "grid-subdivision",
+            "radial"
+        ],
         flowLineMultiplier: 0,
         heroShape: false,
         glowMultiplier: 0.3,
@@ -3851,6 +3928,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "fill-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "flow-field",
+            "golden-spiral",
+            "spiral"
+        ],
         flowLineMultiplier: 3,
         heroShape: true,
         glowMultiplier: 0.2,
@@ -3872,6 +3954,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "fill-only",
             "hatched"
         ],
+        preferredCompositions: [
+            "radial",
+            "clustered",
+            "flow-field"
+        ],
         flowLineMultiplier: 0,
         heroShape: false,
         glowMultiplier: 0,
@@ -3894,6 +3981,11 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             "stroke-only",
             "incomplete"
         ],
+        preferredCompositions: [
+            "spiral",
+            "radial",
+            "golden-spiral"
+        ],
         flowLineMultiplier: 2,
         heroShape: true,
         glowMultiplier: 2.5,
@@ -3917,6 +4009,12 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
             ...b.preferredStyles
         ])
     ];
+    const mergedCompositions = [
+        ...new Set([
+            ...a.preferredCompositions,
+            ...b.preferredCompositions
+        ])
+    ];
     return {
         name: `${a.name}+${b.name}`,
         gridSize: Math.round($68a238ccd77f2bcd$var$lerpNum(a.gridSize, b.gridSize, t)),
@@ -3928,6 +4026,7 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
         backgroundStyle: t < 0.5 ? a.backgroundStyle : b.backgroundStyle,
         paletteMode: t < 0.5 ? a.paletteMode : b.paletteMode,
         preferredStyles: mergedStyles,
+        preferredCompositions: mergedCompositions,
         flowLineMultiplier: $68a238ccd77f2bcd$var$lerpNum(a.flowLineMultiplier, b.flowLineMultiplier, t),
         heroShape: t < 0.5 ? a.heroShape : b.heroShape,
         glowMultiplier: $68a238ccd77f2bcd$var$lerpNum(a.glowMultiplier, b.glowMultiplier, t),
@@ -3961,7 +4060,8 @@ const $1f63dc64b5593c73$var$SACRED_SHAPES = [
     "torus",
     "eggOfLife"
 ];
-const $1f63dc64b5593c73$var$COMPOSITION_MODES = [
+// ── Composition modes ───────────────────────────────────────────────
+const $1f63dc64b5593c73$var$ALL_COMPOSITION_MODES = [
     "radial",
     "flow-field",
     "spiral",
@@ -4063,7 +4163,67 @@ function $1f63dc64b5593c73$var$isInVoidZone(x, y, voidZones) {
     }
     return false;
 }
-// ── Helper: density check ───────────────────────────────────────────
+// ── Spatial hash grid for O(1) density checks and nearest-neighbor ──
+class $1f63dc64b5593c73$var$SpatialGrid {
+    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 $1f63dc64b5593c73$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++;
@@ -4362,42 +4522,43 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const patternOpacity = 0.02 + rng() * 0.04;
         const patternColor = (0, $b5a262d09b87e373$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;
@@ -4406,18 +4567,18 @@ function $1f63dc64b5593c73$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 = $1f63dc64b5593c73$var$COMPOSITION_MODES[Math.floor(rng() * $1f63dc64b5593c73$var$COMPOSITION_MODES.length)];
+    // ── 2. Composition mode — archetype-aware selection ──────────────
+    const compositionMode = rng() < 0.7 ? archetype.preferredCompositions[Math.floor(rng() * archetype.preferredCompositions.length)] : $1f63dc64b5593c73$var$ALL_COMPOSITION_MODES[Math.floor(rng() * $1f63dc64b5593c73$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,
@@ -4450,9 +4611,23 @@ function $1f63dc64b5593c73$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)
@@ -4529,6 +4704,9 @@ function $1f63dc64b5593c73$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 $1f63dc64b5593c73$var$SpatialGrid(densityCheckRadius);
     // Hero avoidance radius — shapes near the hero orient toward it
     let heroCenter = null;
     // ── 4b. Hero shape — a dominant focal element ───────────────────
@@ -4574,9 +4752,14 @@ function $1f63dc64b5593c73$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);
     for(let layer = 0; layer < layers; layer++){
         const layerRatio = layers > 1 ? layer / (layers - 1) : 0;
@@ -4615,7 +4798,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             if ($1f63dc64b5593c73$var$isInVoidZone(x, y, voidZones)) {
                 if (rng() < 0.85) continue;
             }
-            if ($1f63dc64b5593c73$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
@@ -4675,17 +4858,11 @@ function $1f63dc64b5593c73$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) {
@@ -4758,6 +4935,12 @@ function $1f63dc64b5593c73$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);
@@ -4786,6 +4969,12 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                         size: echoSize,
                         shape: shape
                     });
+                    spatialGrid.insert({
+                        x: echoX,
+                        y: echoY,
+                        size: echoSize,
+                        shape: shape
+                    });
                 }
             }
             // ── 5d. Recursive nesting ──────────────────────────────────
@@ -4850,13 +5039,62 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                         size: member.size,
                         shape: memberShape
                     });
+                    spatialGrid.insert({
+                        x: mx,
+                        y: my,
+                        size: member.size,
+                        shape: memberShape
+                    });
+                }
+            }
+            // ── 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
+                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 ($1f63dc64b5593c73$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, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(layerHierarchy, rng), rng, 5, 0.04), fillAlpha * 0.7);
+                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, rhythmShape, rx, ry, {
+                        fillColor: rhythmFill,
+                        strokeColor: (0, $b5a262d09b87e373$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
+                    });
                 }
             }
         }
     }
     // 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) {
@@ -4937,6 +5175,12 @@ function $1f63dc64b5593c73$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 ($1f63dc64b5593c73$var$isInVoidZone(fx, fy, voidZones)) {
+                prevX = fx;
+                prevY = fy;
+                continue;
+            }
             const t = s / steps;
             // Taper + pressure
             const taper = 1 - t * 0.8;
@@ -5034,30 +5278,60 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         }
         ctx.restore();
     }
-    // ── 7. Noise texture overlay ───────────────────────────────────
+    // ── 7. Noise texture overlay — batched via ImageData ─────────────
     const noiseRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$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);
+    try {
+        const imageData = ctx.getImageData(0, 0, width, height);
+        const data = imageData.data;
+        const pixelScale = Math.max(1, Math.round(scaleFactor));
+        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 alpha = Math.floor((0.01 + noiseRng() * 0.03) * 255);
+            // Write a small block of pixels for scale
+            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)) * 4;
+                // Alpha-blend the noise dot onto existing pixel data
+                const srcA = alpha / 255;
+                const invA = 1 - srcA;
+                data[idx] = Math.round(data[idx] * invA + brightness * srcA);
+                data[idx + 1] = Math.round(data[idx + 1] * invA + brightness * srcA);
+                data[idx + 2] = Math.round(data[idx + 2] * invA + brightness * srcA);
+            // Keep existing alpha
+            }
+        }
+        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 ───────────────
     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;
         for(let i = 0; i < numCurves; i++){
             const idxA = Math.floor(rng() * shapePositions.length);
@@ -5065,11 +5339,13 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             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;
@@ -5295,13 +5571,41 @@ function $1f63dc64b5593c73$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, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$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, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.accent, 0.15);
         ctx.save();