git-hash-art 0.9.0 → 0.10.1

package/dist/browser.js

@@ -61,6 +61,136 @@ const $616009579e3d72c5$export$bb9e4790bc99ae59 = {
     PI: Math.PI,
     PHI: (1 + Math.sqrt(5)) / 2
 };
+function $616009579e3d72c5$export$bbde7fbaaf9a8d66(rng) {
+    // Build a deterministic permutation table (256 entries, doubled)
+    const perm = new Uint8Array(512);
+    const p = new Uint8Array(256);
+    for(let i = 0; i < 256; i++)p[i] = i;
+    // Fisher-Yates shuffle with our seeded RNG
+    for(let i = 255; i > 0; i--){
+        const j = Math.floor(rng() * (i + 1));
+        const tmp = p[i];
+        p[i] = p[j];
+        p[j] = tmp;
+    }
+    for(let i = 0; i < 512; i++)perm[i] = p[i & 255];
+    // 12 gradient vectors for 2D simplex
+    const GRAD2 = [
+        [
+            1,
+            1
+        ],
+        [
+            -1,
+            1
+        ],
+        [
+            1,
+            -1
+        ],
+        [
+            -1,
+            -1
+        ],
+        [
+            1,
+            0
+        ],
+        [
+            -1,
+            0
+        ],
+        [
+            0,
+            1
+        ],
+        [
+            0,
+            -1
+        ],
+        [
+            1,
+            1
+        ],
+        [
+            -1,
+            1
+        ],
+        [
+            1,
+            -1
+        ],
+        [
+            -1,
+            -1
+        ]
+    ];
+    const F2 = 0.5 * (Math.sqrt(3) - 1);
+    const G2 = (3 - Math.sqrt(3)) / 6;
+    function dot2(g, x, y) {
+        return g[0] * x + g[1] * y;
+    }
+    return function noise2D(xin, yin) {
+        const s = (xin + yin) * F2;
+        const i = Math.floor(xin + s);
+        const j = Math.floor(yin + s);
+        const t = (i + j) * G2;
+        const X0 = i - t;
+        const Y0 = j - t;
+        const x0 = xin - X0;
+        const y0 = yin - Y0;
+        let i1, j1;
+        if (x0 > y0) {
+            i1 = 1;
+            j1 = 0;
+        } else {
+            i1 = 0;
+            j1 = 1;
+        }
+        const x1 = x0 - i1 + G2;
+        const y1 = y0 - j1 + G2;
+        const x2 = x0 - 1 + 2 * G2;
+        const y2 = y0 - 1 + 2 * G2;
+        const ii = i & 255;
+        const jj = j & 255;
+        let n0 = 0, n1 = 0, n2 = 0;
+        let t0 = 0.5 - x0 * x0 - y0 * y0;
+        if (t0 >= 0) {
+            t0 *= t0;
+            const gi0 = perm[ii + perm[jj]] % 12;
+            n0 = t0 * t0 * dot2(GRAD2[gi0], x0, y0);
+        }
+        let t1 = 0.5 - x1 * x1 - y1 * y1;
+        if (t1 >= 0) {
+            t1 *= t1;
+            const gi1 = perm[ii + i1 + perm[jj + j1]] % 12;
+            n1 = t1 * t1 * dot2(GRAD2[gi1], x1, y1);
+        }
+        let t2 = 0.5 - x2 * x2 - y2 * y2;
+        if (t2 >= 0) {
+            t2 *= t2;
+            const gi2 = perm[ii + 1 + perm[jj + 1]] % 12;
+            n2 = t2 * t2 * dot2(GRAD2[gi2], x2, y2);
+        }
+        // Scale to approximately [-1, 1]
+        return 70 * (n0 + n1 + n2);
+    };
+}
+function $616009579e3d72c5$export$c81d639e83a19b85(noise, octaves = 4, lacunarity = 2.0, gain = 0.5) {
+    return function fbm(x, y) {
+        let value = 0;
+        let amplitude = 1;
+        let frequency = 1;
+        let maxAmp = 0;
+        for(let i = 0; i < octaves; i++){
+            value += noise(x * frequency, y * frequency) * amplitude;
+            maxAmp += amplitude;
+            amplitude *= gain;
+            frequency *= lacunarity;
+        }
+        return value / maxAmp;
+    };
+}
 class $616009579e3d72c5$export$da2372f11bc66b3f {
     static getProportionalSize(baseSize, proportion) {
         return baseSize * proportion;
@@ -254,6 +384,48 @@ class $b5a262d09b87e373$export$ab958c550f521376 {
                         $b5a262d09b87e373$var$hslToHex(baseHue, 0.7, 0.35)
                     ];
                 }
+            case "split-complementary":
+                {
+                    // Base hue + two colors flanking the complement (±30°)
+                    const comp = (baseHue + 180) % 360;
+                    const split1 = (comp - 30 + 360) % 360;
+                    const split2 = (comp + 30) % 360;
+                    const sat = 0.55 + this.rng() * 0.25;
+                    return [
+                        $b5a262d09b87e373$var$hslToHex(baseHue, sat, 0.5),
+                        $b5a262d09b87e373$var$hslToHex(baseHue, sat * 0.8, 0.65),
+                        $b5a262d09b87e373$var$hslToHex(split1, sat, 0.5),
+                        $b5a262d09b87e373$var$hslToHex(split2, sat, 0.5),
+                        $b5a262d09b87e373$var$hslToHex(split1, sat * 0.7, 0.7)
+                    ];
+                }
+            case "analogous-accent":
+                {
+                    // Tight cluster of 3 analogous hues + 1 distant accent
+                    const step = 15 + this.rng() * 20; // 15-35° apart
+                    const h1 = (baseHue - step + 360) % 360;
+                    const h2 = (baseHue + step) % 360;
+                    const accentHue = (baseHue + 150 + this.rng() * 60) % 360;
+                    const sat = 0.5 + this.rng() * 0.3;
+                    return [
+                        $b5a262d09b87e373$var$hslToHex(baseHue, sat, 0.5),
+                        $b5a262d09b87e373$var$hslToHex(h1, sat, 0.55),
+                        $b5a262d09b87e373$var$hslToHex(h2, sat, 0.45),
+                        $b5a262d09b87e373$var$hslToHex(accentHue, sat + 0.15, 0.5)
+                    ];
+                }
+            case "limited-palette":
+                {
+                    // Only 3 colors — like a risograph print
+                    const h2 = (baseHue + 120 + this.rng() * 40) % 360;
+                    const h3 = (baseHue + 220 + this.rng() * 40) % 360;
+                    const sat = 0.6 + this.rng() * 0.2;
+                    return [
+                        $b5a262d09b87e373$var$hslToHex(baseHue, sat, 0.5),
+                        $b5a262d09b87e373$var$hslToHex(h2, sat, 0.5),
+                        $b5a262d09b87e373$var$hslToHex(h3, sat * 0.9, 0.55)
+                    ];
+                }
             case "harmonious":
             default:
                 return this.getColors();
@@ -274,6 +446,14 @@ class $b5a262d09b87e373$export$ab958c550f521376 {
                     "#f5f5f0",
                     "#e8e8e0"
                 ];
+            case "split-complementary":
+            case "analogous-accent":
+                return this.getBackgroundColors();
+            case "limited-palette":
+                return [
+                    $b5a262d09b87e373$var$hslToHex(this.seed % 360, 0.08, 0.94),
+                    $b5a262d09b87e373$var$hslToHex((this.seed + 20) % 360, 0.06, 0.90)
+                ];
             case "neon":
                 return [
                     "#0a0a12",
@@ -518,6 +698,19 @@ function $b5a262d09b87e373$export$6d1620b367f86f7a(rng) {
         intensity: intensity
     };
 }
+function $b5a262d09b87e373$export$1793a1bfbe4f6ff5(hex, degrees) {
+    const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
+    return $b5a262d09b87e373$var$hslToHex((h + degrees + 360) % 360, s, l);
+}
+function $b5a262d09b87e373$export$703ba40a4347f77a(base, layerRatio, hueShiftPerLayer) {
+    const shift = layerRatio * hueShiftPerLayer;
+    return {
+        dominant: $b5a262d09b87e373$export$1793a1bfbe4f6ff5(base.dominant, shift),
+        secondary: $b5a262d09b87e373$export$1793a1bfbe4f6ff5(base.secondary, shift * 0.7),
+        accent: $b5a262d09b87e373$export$1793a1bfbe4f6ff5(base.accent, shift * 0.5),
+        all: base.all.map((c)=>$b5a262d09b87e373$export$1793a1bfbe4f6ff5(c, shift * 0.6))
+    };
+}
 
 
 
@@ -1801,7 +1994,8 @@ const $e0f99502ff383dd8$var$RENDER_STYLES = [
     "noise-grain",
     "wood-grain",
     "marble-vein",
-    "fabric-weave"
+    "fabric-weave",
+    "hand-drawn"
 ];
 function $e0f99502ff383dd8$export$9fd4e64b2acd410e(rng) {
     return $e0f99502ff383dd8$var$RENDER_STYLES[Math.floor(rng() * $e0f99502ff383dd8$var$RENDER_STYLES.length)];
@@ -1897,6 +2091,23 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 ctx.fill();
                 ctx.fillStyle = origFill;
                 ctx.restore();
+                // Pass 4: Organic edge erosion — irregular bites along the boundary
+                if (rng && size > 20) {
+                    const erosionBites = 6 + Math.floor(rng() * 8);
+                    const edgeRadius = size * 0.45;
+                    ctx.save();
+                    ctx.globalCompositeOperation = "destination-out";
+                    ctx.globalAlpha = 0.6 + rng() * 0.3;
+                    for(let eb = 0; eb < erosionBites; eb++){
+                        const biteAngle = rng() * Math.PI * 2;
+                        const biteDist = edgeRadius * (0.85 + rng() * 0.25);
+                        const biteR = size * (0.02 + rng() * 0.04);
+                        ctx.beginPath();
+                        ctx.arc(Math.cos(biteAngle) * biteDist, Math.sin(biteAngle) * biteDist, biteR, 0, Math.PI * 2);
+                        ctx.fill();
+                    }
+                    ctx.restore();
+                }
                 ctx.globalAlpha = savedAlpha;
                 // Soft stroke on top — thinner than normal for delicacy
                 ctx.globalAlpha *= 0.25;
@@ -2182,6 +2393,50 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 ctx.globalAlpha /= 0.3;
                 break;
             }
+        case "hand-drawn":
+            {
+                // Wobbly hand-drawn edge treatment — fill normally, then redraw
+                // the outline with perturbed control points for a sketchy feel
+                const savedAlphaHD = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaHD * 0.85;
+                ctx.fill();
+                ctx.globalAlpha = savedAlphaHD;
+                // Draw 2-3 slightly offset wobbly strokes for a sketchy look
+                const wobblePasses = 2 + (rng ? Math.floor(rng() * 2) : 0);
+                ctx.lineWidth = strokeWidth * 0.8;
+                for(let wp = 0; wp < wobblePasses; wp++){
+                    ctx.globalAlpha = savedAlphaHD * (0.4 - wp * 0.1);
+                    ctx.save();
+                    // Slight random offset per pass
+                    const wobbleX = rng ? (rng() - 0.5) * size * 0.02 : 0;
+                    const wobbleY = rng ? (rng() - 0.5) * size * 0.02 : 0;
+                    ctx.translate(wobbleX, wobbleY);
+                    // Slightly different scale per pass for edge variation
+                    const wobbleScale = 1 + (rng ? (rng() - 0.5) * 0.03 : 0);
+                    ctx.scale(wobbleScale, wobbleScale);
+                    ctx.stroke();
+                    ctx.restore();
+                }
+                // Organic edge erosion — small irregular bites for rough paper feel
+                if (rng && size > 20) {
+                    const erosionBites = 4 + Math.floor(rng() * 6);
+                    const edgeRadius = size * 0.42;
+                    ctx.save();
+                    ctx.globalCompositeOperation = "destination-out";
+                    ctx.globalAlpha = 0.5 + rng() * 0.3;
+                    for(let eb = 0; eb < erosionBites; eb++){
+                        const biteAngle = rng() * Math.PI * 2;
+                        const biteDist = edgeRadius * (0.9 + rng() * 0.2);
+                        const biteR = size * (0.015 + rng() * 0.03);
+                        ctx.beginPath();
+                        ctx.arc(Math.cos(biteAngle) * biteDist, Math.sin(biteAngle) * biteDist, biteR, 0, Math.PI * 2);
+                        ctx.fill();
+                    }
+                    ctx.restore();
+                }
+                ctx.globalAlpha = savedAlphaHD;
+                break;
+            }
         case "fill-and-stroke":
         default:
             ctx.fill();
@@ -2190,12 +2445,20 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
     }
 }
 function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
-    const { fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, size: size, rotation: rotation, patterns: patterns = [], proportionType: proportionType = "GOLDEN_RATIO", baseOpacity: baseOpacity = 0.6, opacityReduction: opacityReduction = 0.1, glowRadius: glowRadius = 0, glowColor: glowColor, gradientFillEnd: gradientFillEnd, renderStyle: renderStyle = "fill-and-stroke", rng: rng } = config;
+    const { fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, size: size, rotation: rotation, patterns: patterns = [], proportionType: proportionType = "GOLDEN_RATIO", baseOpacity: baseOpacity = 0.6, opacityReduction: opacityReduction = 0.1, glowRadius: glowRadius = 0, glowColor: glowColor, gradientFillEnd: gradientFillEnd, renderStyle: renderStyle = "fill-and-stroke", rng: rng, lightAngle: lightAngle, scaleFactor: scaleFactor = 1 } = config;
     ctx.save();
     ctx.translate(x, y);
     ctx.rotate(rotation * Math.PI / 180);
-    // Glow / shadow effect
-    if (glowRadius > 0) {
+    // ── Drop shadow — soft colored shadow offset along light direction ──
+    if (lightAngle !== undefined && size > 10) {
+        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) {
+        // Glow / shadow effect (legacy path)
         ctx.shadowBlur = glowRadius;
         ctx.shadowColor = glowColor || fillColor;
         ctx.shadowOffsetX = 0;
@@ -2217,8 +2480,29 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
         });
         $e0f99502ff383dd8$var$applyRenderStyle(ctx, renderStyle, fillColor, strokeColor, strokeWidth, size, rng);
     }
-    // Reset shadow so patterns aren't double-glowed
-    if (glowRadius > 0) ctx.shadowBlur = 0;
+    // 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) {
+        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)");
+        const savedOp = ctx.globalCompositeOperation;
+        ctx.globalCompositeOperation = "soft-light";
+        ctx.fillStyle = hlGrad;
+        ctx.beginPath();
+        ctx.arc(hlX, hlY, hlRadius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.globalCompositeOperation = savedOp;
+    }
     // Layer additional patterns if specified
     if (patterns.length > 0) (0, $616009579e3d72c5$export$da2372f11bc66b3f).layerPatterns(ctx, patterns, {
         baseSize: size,
@@ -2317,7 +2601,8 @@ const $8286059160ee2e04$export$4343b39fe47bd82c = {
         bestStyles: [
             "fill-only",
             "watercolor",
-            "fill-and-stroke"
+            "fill-and-stroke",
+            "hand-drawn"
         ]
     },
     square: {
@@ -2354,7 +2639,8 @@ const $8286059160ee2e04$export$4343b39fe47bd82c = {
         bestStyles: [
             "fill-and-stroke",
             "fill-only",
-            "watercolor"
+            "watercolor",
+            "hand-drawn"
         ]
     },
     hexagon: {
@@ -2734,7 +3020,8 @@ const $8286059160ee2e04$export$4343b39fe47bd82c = {
         bestStyles: [
             "fill-only",
             "watercolor",
-            "fill-and-stroke"
+            "fill-and-stroke",
+            "hand-drawn"
         ]
     },
     ngon: {
@@ -3614,8 +3901,51 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
         invertForeground: false
     }
 ];
+/**
+ * Linearly interpolate between two archetype numeric parameters.
+ */ function $68a238ccd77f2bcd$var$lerpNum(a, b, t) {
+    return a + (b - a) * t;
+}
+/**
+ * Blend two archetypes by interpolating their numeric parameters
+ * and merging their style arrays.
+ */ function $68a238ccd77f2bcd$var$blendArchetypes(a, b, t) {
+    // Merge preferred styles — unique union, primary archetype first
+    const mergedStyles = [
+        ...new Set([
+            ...a.preferredStyles,
+            ...b.preferredStyles
+        ])
+    ];
+    return {
+        name: `${a.name}+${b.name}`,
+        gridSize: Math.round($68a238ccd77f2bcd$var$lerpNum(a.gridSize, b.gridSize, t)),
+        layers: Math.round($68a238ccd77f2bcd$var$lerpNum(a.layers, b.layers, t)),
+        baseOpacity: $68a238ccd77f2bcd$var$lerpNum(a.baseOpacity, b.baseOpacity, t),
+        opacityReduction: $68a238ccd77f2bcd$var$lerpNum(a.opacityReduction, b.opacityReduction, t),
+        minShapeSize: Math.round($68a238ccd77f2bcd$var$lerpNum(a.minShapeSize, b.minShapeSize, t)),
+        maxShapeSize: Math.round($68a238ccd77f2bcd$var$lerpNum(a.maxShapeSize, b.maxShapeSize, t)),
+        backgroundStyle: t < 0.5 ? a.backgroundStyle : b.backgroundStyle,
+        paletteMode: t < 0.5 ? a.paletteMode : b.paletteMode,
+        preferredStyles: mergedStyles,
+        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),
+        sizePower: $68a238ccd77f2bcd$var$lerpNum(a.sizePower, b.sizePower, t),
+        invertForeground: t < 0.5 ? a.invertForeground : b.invertForeground
+    };
+}
 function $68a238ccd77f2bcd$export$f1142fd7da4d6590(rng) {
-    return $68a238ccd77f2bcd$var$ARCHETYPES[Math.floor(rng() * $68a238ccd77f2bcd$var$ARCHETYPES.length)];
+    const primary = $68a238ccd77f2bcd$var$ARCHETYPES[Math.floor(rng() * $68a238ccd77f2bcd$var$ARCHETYPES.length)];
+    // ~15% chance of blending with a second archetype
+    if (rng() < 0.15) {
+        const secondary = $68a238ccd77f2bcd$var$ARCHETYPES[Math.floor(rng() * $68a238ccd77f2bcd$var$ARCHETYPES.length)];
+        if (secondary.name !== primary.name) {
+            const blendT = 0.25 + rng() * 0.25; // 25-50% blend toward secondary
+            return $68a238ccd77f2bcd$var$blendArchetypes(primary, secondary, blendT);
+        }
+    }
+    return primary;
 }
 
 
@@ -3636,7 +3966,8 @@ const $1f63dc64b5593c73$var$COMPOSITION_MODES = [
     "flow-field",
     "spiral",
     "grid-subdivision",
-    "clustered"
+    "clustered",
+    "golden-spiral"
 ];
 // ── Helper: get position based on composition mode ──────────────────
 function $1f63dc64b5593c73$var$getCompositionPosition(mode, rng, width, height, shapeIndex, totalShapes, cx, cy) {
@@ -3694,6 +4025,21 @@ function $1f63dc64b5593c73$var$getCompositionPosition(mode, rng, width, height,
                 x: rng() * width,
                 y: rng() * height
             };
+        case "golden-spiral":
+            {
+                // Logarithmic spiral: r = a * e^(b*theta), with golden angle spacing
+                const PHI = (1 + Math.sqrt(5)) / 2;
+                const goldenAngle = 2 * Math.PI / (PHI * PHI); // ~137.5° in radians
+                const t = shapeIndex / totalShapes;
+                const angle = shapeIndex * goldenAngle + rng() * 0.3;
+                const maxR = Math.min(width, height) * 0.44;
+                // Shapes spiral outward with sqrt distribution for even area coverage
+                const r = Math.sqrt(t) * maxR + (rng() - 0.5) * maxR * 0.08;
+                return {
+                    x: cx + Math.cos(angle) * r,
+                    y: cy + Math.sin(angle) * r
+                };
+            }
     }
 }
 // ── Helper: positional color from hierarchy ─────────────────────────
@@ -3951,6 +4297,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const colorGrade = (0, $b5a262d09b87e373$export$6d1620b367f86f7a)(rng);
     // ── 0e. Light direction — consistent shadow angle ──────────────
     const lightAngle = rng() * Math.PI * 2;
+    // ── 0f. Palette evolution — hue drift direction across layers ──
+    const paletteHueShift = (rng() - 0.5) * 40; // -20° to +20° total drift
     const scaleFactor = Math.min(width, height) / 1024;
     const adjustedMinSize = minShapeSize * scaleFactor;
     const adjustedMaxSize = maxShapeSize * scaleFactor;
@@ -4125,11 +4473,59 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             ry + (nearest.y - ry) * pull
         ];
     }
-    // ── 4. Flow field seed values ──────────────────────────────────
+    // ── 3b. Void zone decoration — intentional negative space ────
+    for (const zone of voidZones){
+        // Subtle halo ring around void zones
+        ctx.globalAlpha = 0.04 + rng() * 0.04;
+        ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.accent, 0.2);
+        ctx.lineWidth = 1.5 * scaleFactor;
+        ctx.beginPath();
+        ctx.arc(zone.x, zone.y, zone.radius, 0, Math.PI * 2);
+        ctx.stroke();
+        // ~50% chance: scatter tiny dots inside the void
+        if (rng() < 0.5) {
+            const dotCount = 3 + Math.floor(rng() * 6);
+            ctx.globalAlpha = 0.06 + rng() * 0.04;
+            ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.15);
+            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.arc(zone.x + Math.cos(angle) * dist, zone.y + Math.sin(angle) * dist, dotR, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        // ~30% chance: thin concentric ring inside
+        if (rng() < 0.3) {
+            ctx.globalAlpha = 0.03 + rng() * 0.03;
+            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
+            ctx.lineWidth = 0.5 * scaleFactor;
+            const innerR = zone.radius * (0.4 + rng() * 0.3);
+            ctx.beginPath();
+            ctx.arc(zone.x, zone.y, innerR, 0, Math.PI * 2);
+            ctx.stroke();
+        }
+    }
+    ctx.globalAlpha = 1;
+    // ── 4. Flow field — simplex noise for organic variation ─────────
+    // Create a seeded simplex noise field (unique per hash)
+    const noiseFieldRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 333));
+    const simplexNoise = (0, $616009579e3d72c5$export$bbde7fbaaf9a8d66)(noiseFieldRng);
+    const fbmNoise = (0, $616009579e3d72c5$export$c81d639e83a19b85)(simplexNoise, 3, 2.0, 0.5);
     const fieldAngleBase = rng() * Math.PI * 2;
-    const fieldFreq = 0.5 + rng() * 2;
+    const fieldFreq = 1.5 + rng() * 2.5; // noise sampling frequency
     function flowAngle(x, y) {
-        return fieldAngleBase + Math.sin(x / width * fieldFreq * Math.PI * 2) * Math.PI * 0.5 + Math.cos(y / height * fieldFreq * Math.PI * 2) * Math.PI * 0.5;
+        // Sample FBM noise at the position, scaled by frequency
+        const nx = x / width * fieldFreq;
+        const ny = y / height * fieldFreq;
+        return fieldAngleBase + fbmNoise(nx, ny) * Math.PI;
+    }
+    // Noise-based size modulation — shapes in "high noise" areas get scaled
+    function noiseSizeModulation(x, y) {
+        const n = simplexNoise(x / width * 3, y / height * 3);
+        // Map [-1,1] to [0.7, 1.3] — subtle terrain-like size variation
+        return 0.7 + (n + 1) * 0.3;
     }
     // Track all placed shapes for density checks and connecting curves
     const shapePositions = [];
@@ -4163,7 +4559,9 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             glowColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(heroStroke, 0.4),
             gradientFillEnd: (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(colorHierarchy.secondary, rng, 10, 0.1),
             renderStyle: heroStyle,
-            rng: rng
+            rng: rng,
+            lightAngle: lightAngle,
+            scaleFactor: scaleFactor
         });
         heroCenter = {
             x: heroFocal.x,
@@ -4197,6 +4595,18 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const dofFactor = 1 - layerRatio * 0.5; // 1.0 for front layer, 0.5 for back
         const dofStrokeScale = 0.4 + dofFactor * 0.6; // strokes thin out with depth
         const dofContrastReduction = layerRatio * 0.2; // colors fade toward bg
+        // Color palette evolution — hue-rotate the hierarchy per layer
+        const layerHierarchy = (0, $b5a262d09b87e373$export$703ba40a4347f77a)(colorHierarchy, layerRatio, paletteHueShift);
+        // Focal depth: shapes near focal points get more detail
+        const focalDetailBoost = (px, py)=>{
+            let minFocalDist = Infinity;
+            for (const fp of focalPoints){
+                const d = Math.hypot(px - fp.x, py - fp.y);
+                if (d < minFocalDist) minFocalDist = d;
+            }
+            const maxDist = Math.hypot(width, height) * 0.5;
+            return Math.max(0, 1 - minFocalDist / maxDist); // 1.0 at focal, 0.0 at edges
+        };
         for(let i = 0; i < numShapes; i++){
             // Position from composition mode, then focal bias
             const rawPos = $1f63dc64b5593c73$var$getCompositionPosition(compositionMode, rng, width, height, i, numShapes, cx, cy);
@@ -4210,7 +4620,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             }
             // Power distribution for size — archetype controls the curve
             const sizeT = Math.pow(rng(), archetype.sizePower);
-            const size = (adjustedMinSize + sizeT * (adjustedMaxSize - adjustedMinSize)) * layerSizeScale;
+            const size = (adjustedMinSize + sizeT * (adjustedMaxSize - adjustedMinSize)) * layerSizeScale * noiseSizeModulation(x, y);
             // Size fraction for affinity-aware shape selection
             const sizeFraction = size / adjustedMaxSize;
             // Palette-driven shape selection (replaces naive pickShape)
@@ -4227,9 +4637,9 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     rotation = rotation + (angleToHero - rotation) * blendFactor * 0.4;
                 }
             }
-            // Positional color from hierarchy + jitter
-            let fillBase = $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, colorHierarchy, rng);
-            const strokeBase = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng);
+            // Positional color from hierarchy + jitter (using evolved layer palette)
+            let fillBase = $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, layerHierarchy, rng);
+            const strokeBase = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(layerHierarchy, rng);
             // Desaturate colors on later layers for depth
             if (atmosphericDesat > 0) fillBase = (0, $b5a262d09b87e373$export$fb75607d98509d9)(fillBase, atmosphericDesat);
             // Temperature contrast: shift foreground shapes opposite to background
@@ -4313,7 +4723,9 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 glowColor: hasGlow ? (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, 0.6) : shadowDist > 0 ? "rgba(0,0,0,0.08)" : undefined,
                 gradientFillEnd: gradientEnd,
                 renderStyle: finalRenderStyle,
-                rng: rng
+                rng: rng,
+                lightAngle: lightAngle,
+                scaleFactor: scaleFactor
             };
             if (shouldMirror) (0, $e0f99502ff383dd8$export$8bd8bbd1a8e53689)(ctx, shape, finalX, finalY, {
                 ...shapeConfig,
@@ -4321,6 +4733,25 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 mirrorGap: size * (0.1 + rng() * 0.3)
             });
             else (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, shapeConfig);
+            // ── 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, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, {
+                        fillColor: (0, $b5a262d09b87e373$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
+                    });
+                }
+            }
             shapePositions.push({
                 x: finalX,
                 y: finalY,
@@ -4358,7 +4789,10 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 }
             }
             // ── 5d. Recursive nesting ──────────────────────────────────
-            if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
+            // Focal depth: shapes near focal points get more detail
+            const focalProximity = focalDetailBoost(finalX, finalY);
+            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++){
                     // Pick inner shape from palette affinities
@@ -4383,7 +4817,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 }
             }
             // ── 5e. Shape constellations — pre-composed groups ─────────
-            if (size > adjustedMaxSize * 0.35 && rng() < 0.12) {
+            const constellationChance = 0.12 + focalProximity * 0.1; // 12-22% near focal
+            if (size > adjustedMaxSize * 0.35 && rng() < constellationChance) {
                 const constellation = $1f63dc64b5593c73$var$CONSTELLATIONS[Math.floor(rng() * $1f63dc64b5593c73$var$CONSTELLATIONS.length)];
                 const members = constellation.build(rng, size);
                 const groupRotation = rng() * Math.PI * 2;
@@ -4421,6 +4856,64 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     }
     // Reset blend mode for post-processing passes
     ctx.globalCompositeOperation = "source-over";
+    // ── 5f. 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) {
+        const portalCount = 1 + Math.floor(rng() * 2);
+        for(let p = 0; p < portalCount; p++){
+            // Pick a position biased toward placed shapes
+            const sourceShape = shapePositions[Math.floor(rng() * shapePositions.length)];
+            const portalX = sourceShape.x + (rng() - 0.5) * sourceShape.size * 0.5;
+            const portalY = sourceShape.y + (rng() - 0.5) * sourceShape.size * 0.5;
+            const portalSize = adjustedMaxSize * (0.15 + rng() * 0.25);
+            // Pick a portal shape from the palette
+            const portalShape = (0, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, portalSize / adjustedMaxSize);
+            const portalRotation = rng() * 360;
+            const portalAlpha = 0.6 + rng() * 0.35;
+            ctx.save();
+            ctx.translate(portalX, portalY);
+            ctx.rotate(portalRotation * Math.PI / 180);
+            // Step 1: Clip to the portal shape and fill with background wash
+            ctx.beginPath();
+            (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)[portalShape]?.(ctx, portalSize);
+            ctx.clip();
+            // Fill the clipped region with a radial gradient from background colors
+            const portalColor = (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(bgStart, rng, 15, 0.1);
+            const portalGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, portalSize);
+            portalGrad.addColorStop(0, portalColor);
+            portalGrad.addColorStop(1, bgEnd);
+            ctx.globalAlpha = portalAlpha;
+            ctx.fillStyle = portalGrad;
+            ctx.fillRect(-portalSize, -portalSize, portalSize * 2, portalSize * 2);
+            // Optional: subtle inner texture — a few tiny dots inside the portal
+            if (rng() < 0.5) {
+                const dotCount = 3 + Math.floor(rng() * 5);
+                ctx.globalAlpha = portalAlpha * 0.3;
+                ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), 0.2);
+                for(let d = 0; d < dotCount; d++){
+                    const dx = (rng() - 0.5) * portalSize * 1.4;
+                    const dy = (rng() - 0.5) * portalSize * 1.4;
+                    const dr = (1 + rng() * 3) * scaleFactor;
+                    ctx.beginPath();
+                    ctx.arc(dx, dy, dr, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+            ctx.restore();
+            // Step 2: Draw a border ring around the portal (outside the clip)
+            ctx.save();
+            ctx.translate(portalX, portalY);
+            ctx.rotate(portalRotation * Math.PI / 180);
+            ctx.globalAlpha = 0.15 + rng() * 0.2;
+            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), 0.5);
+            ctx.lineWidth = (1.5 + rng() * 2.5) * scaleFactor;
+            ctx.beginPath();
+            (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)[portalShape]?.(ctx, portalSize * 1.06);
+            ctx.stroke();
+            ctx.restore();
+        }
+    }
     // ── 6. Flow-line pass — variable color, branching, pressure ────
     const baseFlowLines = 6 + Math.floor(rng() * 10);
     const numFlowLines = Math.round(baseFlowLines * archetype.flowLineMultiplier);
@@ -4487,7 +4980,41 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             prevY = fy;
         }
     }
-    // ── 6b. Apply symmetry mirroring ─────────────────────────────────
+    // ── 6b. Motion/energy lines — short directional bursts ─────────
+    const energyArchetypes = [
+        "dense-chaotic",
+        "cosmic",
+        "neon-glow",
+        "bold-graphic"
+    ];
+    const hasEnergyLines = energyArchetypes.some((a)=>archetype.name.includes(a)) || rng() < 0.25;
+    if (hasEnergyLines && shapePositions.length > 0) {
+        const energyCount = 5 + Math.floor(rng() * 10);
+        ctx.lineCap = "round";
+        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);
+            for(let b = 0; b < burstCount; b++){
+                const angle = baseAngle + (rng() - 0.5) * 1.2;
+                const lineLen = (source.size * 0.3 + rng() * source.size * 0.5) * scaleFactor * 0.3;
+                const startDist = source.size * 0.5;
+                const sx = source.x + Math.cos(angle) * startDist;
+                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, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$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();
+            }
+        }
+    }
+    // ── 6c. Apply symmetry mirroring ─────────────────────────────────
     if (symmetryMode !== "none") {
         const canvas = ctx.canvas;
         ctx.save();
@@ -4598,6 +5125,214 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.restore();
         ctx.globalCompositeOperation = "source-over";
     }
+    // 10d. Gradient map — map luminance through a two-color gradient
+    // Uses dominant→accent as the dark→light ramp for a cohesive tonal look
+    if (rng() < 0.35) {
+        const gmDark = colorHierarchy.dominant;
+        const gmLight = colorHierarchy.accent;
+        ctx.globalAlpha = 0.06 + rng() * 0.06; // very subtle: 6-12%
+        ctx.globalCompositeOperation = "color";
+        // Paint a linear gradient from dark color (top) to light color (bottom)
+        const gmGrad = ctx.createLinearGradient(0, 0, 0, height);
+        gmGrad.addColorStop(0, gmDark);
+        gmGrad.addColorStop(1, gmLight);
+        ctx.fillStyle = gmGrad;
+        ctx.fillRect(0, 0, width, height);
+        ctx.globalCompositeOperation = "source-over";
+    }
+    // ── 10e. Generative borders — archetype-driven decorative frames ──
+    {
+        ctx.save();
+        ctx.globalAlpha = 1;
+        ctx.globalCompositeOperation = "source-over";
+        const borderRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 314));
+        const borderPad = Math.min(width, height) * 0.025;
+        const borderColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.accent, 0.2);
+        const borderColorSolid = colorHierarchy.accent;
+        const archName = archetype.name;
+        if (archName.includes("geometric") || archName.includes("op-art") || archName.includes("shattered")) {
+            // Clean ruled lines with corner ornaments
+            ctx.strokeStyle = borderColor;
+            ctx.lineWidth = Math.max(1, 1.5 * scaleFactor);
+            ctx.globalAlpha = 0.18 + borderRng() * 0.1;
+            // Outer rule
+            ctx.strokeRect(borderPad, borderPad, width - borderPad * 2, height - borderPad * 2);
+            // Inner rule (thinner, offset)
+            const innerPad = borderPad * 1.8;
+            ctx.lineWidth = Math.max(0.5, 0.8 * scaleFactor);
+            ctx.globalAlpha *= 0.7;
+            ctx.strokeRect(innerPad, innerPad, width - innerPad * 2, height - innerPad * 2);
+            // Corner ornaments — small squares at each corner
+            const ornSize = borderPad * 0.6;
+            ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(borderColorSolid, 0.12);
+            const corners = [
+                [
+                    borderPad,
+                    borderPad
+                ],
+                [
+                    width - borderPad - ornSize,
+                    borderPad
+                ],
+                [
+                    borderPad,
+                    height - borderPad - ornSize
+                ],
+                [
+                    width - borderPad - ornSize,
+                    height - borderPad - ornSize
+                ]
+            ];
+            for (const [cx2, cy2] of corners){
+                ctx.fillRect(cx2, cy2, ornSize, ornSize);
+                // Diagonal cross inside ornament
+                ctx.beginPath();
+                ctx.moveTo(cx2, cy2);
+                ctx.lineTo(cx2 + ornSize, cy2 + ornSize);
+                ctx.moveTo(cx2 + ornSize, cy2);
+                ctx.lineTo(cx2, cy2 + ornSize);
+                ctx.stroke();
+            }
+        } else if (archName.includes("botanical") || archName.includes("organic") || archName.includes("watercolor")) {
+            // Vine tendrils — organic curving lines along edges
+            ctx.strokeStyle = (0, $b5a262d09b87e373$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);
+            for(let t = 0; t < tendrilCount; t++){
+                // Start from a random edge point
+                const edge = Math.floor(borderRng() * 4);
+                let tx, ty;
+                if (edge === 0) {
+                    tx = borderRng() * width;
+                    ty = borderPad;
+                } else if (edge === 1) {
+                    tx = borderRng() * width;
+                    ty = height - borderPad;
+                } else if (edge === 2) {
+                    tx = borderPad;
+                    ty = borderRng() * height;
+                } else {
+                    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++){
+                    const inward = borderPad * (1 + borderRng() * 2);
+                    // Curl inward from edge
+                    const cpx2 = tx + (borderRng() - 0.5) * borderPad * 4;
+                    const cpy2 = ty + (edge < 2 ? edge === 0 ? inward : -inward : 0);
+                    const cpx3 = tx + (edge >= 2 ? edge === 2 ? inward : -inward : (borderRng() - 0.5) * borderPad * 3);
+                    const cpy3 = ty + (borderRng() - 0.5) * borderPad * 3;
+                    tx = cpx3;
+                    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, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.08);
+                    ctx.fill();
+                }
+            }
+        } else if (archName.includes("celestial") || archName.includes("cosmic") || archName.includes("neon")) {
+            // Star-studded arcs along edges
+            ctx.globalAlpha = 0.1 + borderRng() * 0.08;
+            ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.accent, 0.2);
+            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.accent, 0.12);
+            ctx.lineWidth = Math.max(0.5, 0.7 * scaleFactor);
+            // Subtle arc along top and bottom
+            ctx.beginPath();
+            ctx.arc(cx, -height * 0.3, height * 0.6, 0.3, Math.PI - 0.3);
+            ctx.stroke();
+            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
+            const starCount = 15 + Math.floor(borderRng() * 15);
+            for(let s = 0; s < starCount; s++){
+                const edge = Math.floor(borderRng() * 4);
+                let sx, sy;
+                if (edge === 0) {
+                    sx = borderRng() * width;
+                    sy = borderPad * (0.5 + borderRng());
+                } else if (edge === 1) {
+                    sx = borderRng() * width;
+                    sy = height - borderPad * (0.5 + borderRng());
+                } else if (edge === 2) {
+                    sx = borderPad * (0.5 + borderRng());
+                    sy = borderRng() * height;
+                } else {
+                    sx = width - borderPad * (0.5 + borderRng());
+                    sy = borderRng() * height;
+                }
+                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;
+                    const px2 = sx + Math.cos(a) * r;
+                    const py2 = sy + Math.sin(a) * r;
+                    if (p === 0) ctx.moveTo(px2, py2);
+                    else ctx.lineTo(px2, py2);
+                }
+                ctx.closePath();
+                ctx.fill();
+            }
+        } else if (archName.includes("minimal") || archName.includes("monochrome") || archName.includes("stipple")) {
+            // Thin single rule — understated elegance
+            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
+            ctx.lineWidth = Math.max(0.5, 0.6 * scaleFactor);
+            ctx.globalAlpha = 0.1 + borderRng() * 0.06;
+            ctx.strokeRect(borderPad * 1.5, borderPad * 1.5, width - borderPad * 3, height - borderPad * 3);
+        }
+        // Other archetypes: no border (intentional — not every image needs one)
+        ctx.restore();
+    }
+    // ── 11. Signature mark — unique geometric chop from hash prefix ──
+    {
+        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 sigSegments = 4 + Math.floor(sigRng() * 4); // 4-7 segments
+        const sigColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.accent, 0.15);
+        ctx.save();
+        ctx.globalAlpha = 0.12 + sigRng() * 0.08;
+        ctx.translate(sigX, sigY);
+        ctx.strokeStyle = sigColor;
+        ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.06);
+        ctx.lineWidth = Math.max(0.5, 0.8 * scaleFactor);
+        // Outer ring
+        ctx.beginPath();
+        ctx.arc(0, 0, sigSize, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.fill();
+        // Inner geometric pattern — unique per hash
+        ctx.beginPath();
+        for(let s = 0; s < sigSegments; s++){
+            const angle1 = sigRng() * Math.PI * 2;
+            const angle2 = sigRng() * Math.PI * 2;
+            const r1 = sigSize * (0.2 + sigRng() * 0.6);
+            const r2 = sigSize * (0.2 + sigRng() * 0.6);
+            ctx.moveTo(Math.cos(angle1) * r1, Math.sin(angle1) * r1);
+            ctx.lineTo(Math.cos(angle2) * r2, Math.sin(angle2) * r2);
+        }
+        ctx.stroke();
+        // Center dot
+        ctx.beginPath();
+        ctx.arc(0, 0, sigSize * 0.12, 0, Math.PI * 2);
+        ctx.fillStyle = sigColor;
+        ctx.fill();
+        ctx.restore();
+    }
     ctx.globalAlpha = 1;
 }