git-hash-art 0.6.0 → 0.8.0

package/dist/browser.js

@@ -12,17 +12,22 @@ import $4wRzV$colorscheme from "color-scheme";
  * identically in Node (@napi-rs/canvas) and browsers.
  *
  * Generation pipeline:
- *   1.  Background — radial gradient from hash-derived dark palette
- *   1b. Layered background — large faint shapes / subtle pattern for depth
- *   2.  Composition mode — hash selects: radial, flow-field, spiral, grid-subdivision, or clustered
- *   3.  Focal points + void zones (negative space)
- *   4.  Flow field seed values
- *   5.  Shape layers — blend modes, render styles, weighted selection,
- *       focal-point placement, atmospheric depth, organic edges
+ *   0.  Archetype selection + shape palette + color hierarchy
+ *   1.  Background — style from archetype, gradient mesh for depth
+ *   1b. Layered background — archetype-coherent shapes
+ *   2.  Composition mode + symmetry
+ *   3.  Focal points + void zones + hero avoidance field
+ *   4.  Flow field
+ *   4b. Hero shape
+ *   5.  Shape layers — palette-driven selection, affinity-aware styles,
+ *       size echo, tangent placement, atmospheric depth
  *   5b. Recursive nesting
- *   6.  Flow-line pass — tapered brush-stroke curves
- *   7.  Noise texture overlay
- *   8.  Organic connecting curves
+ *   6.  Flow lines — variable color, branching, pressure simulation
+ *   6b. Symmetry mirroring
+ *   7.  Noise texture
+ *   8.  Vignette
+ *   9.  Organic connecting curves
+ *   10. Post-processing — color grading, chromatic aberration, bloom
  */ 
  // declare module 'color-scheme';
 
@@ -388,6 +393,67 @@ function $b5a262d09b87e373$export$f2121afcad3d553f(hex, alpha) {
     const [r, g, b] = $b5a262d09b87e373$var$hexToRgb(hex);
     return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
 }
+function $b5a262d09b87e373$export$fabac4600b87056(colors, rng) {
+    if (colors.length < 3) return {
+        dominant: colors[0] || "#888888",
+        secondary: colors[1] || colors[0] || "#888888",
+        accent: colors[colors.length - 1] || "#888888",
+        all: colors
+    };
+    // Pick dominant as the color closest to the palette's average hue
+    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;
+    for(let i = 0; i < hsls.length; i++){
+        const d = Math.min(Math.abs(hsls[i][0] - avgHue), 360 - Math.abs(hsls[i][0] - avgHue));
+        if (d < minDist) {
+            minDist = d;
+            dominantIdx = i;
+        }
+    }
+    // Accent is the color most distant from dominant in hue
+    let accentIdx = 0;
+    let maxDist = 0;
+    for(let i = 0; i < hsls.length; i++){
+        if (i === dominantIdx) continue;
+        const d = Math.min(Math.abs(hsls[i][0] - hsls[dominantIdx][0]), 360 - Math.abs(hsls[i][0] - hsls[dominantIdx][0]));
+        if (d > maxDist) {
+            maxDist = d;
+            accentIdx = i;
+        }
+    }
+    // Secondary is the remaining color with highest saturation
+    let secondaryIdx = 0;
+    let maxSat = -1;
+    for(let i = 0; i < hsls.length; i++){
+        if (i === dominantIdx || i === accentIdx) continue;
+        if (hsls[i][1] > maxSat) {
+            maxSat = hsls[i][1];
+            secondaryIdx = i;
+        }
+    }
+    if (secondaryIdx === dominantIdx) secondaryIdx = accentIdx === 0 ? 1 : 0;
+    return {
+        dominant: colors[dominantIdx],
+        secondary: colors[secondaryIdx],
+        accent: colors[accentIdx],
+        all: colors
+    };
+}
+function $b5a262d09b87e373$export$b49f62f0a99da0e8(hierarchy, rng) {
+    const roll = rng();
+    if (roll < 0.60) return hierarchy.dominant;
+    if (roll < 0.85) return hierarchy.secondary;
+    return hierarchy.accent;
+}
+function $b5a262d09b87e373$export$18a34c25ea7e724b(hex, rng, hueAmount = 8, slAmount = 0.06) {
+    const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
+    const newH = (h + (rng() - 0.5) * hueAmount * 2 + 360) % 360;
+    const newS = Math.max(0, Math.min(1, s + (rng() - 0.5) * slAmount * 2));
+    const newL = Math.max(0, Math.min(1, l + (rng() - 0.5) * slAmount * 2));
+    return $b5a262d09b87e373$var$hslToHex(newH, newS, newL);
+}
 function $b5a262d09b87e373$export$59539d800dbe6858(hex, rng, amount = 0.1) {
     const [r, g, b] = $b5a262d09b87e373$var$hexToRgb(hex);
     const jit = ()=>(rng() - 0.5) * 2 * amount * 255;
@@ -403,6 +469,55 @@ function $b5a262d09b87e373$export$51ea55f869b7e0d3(hex, target, amount) {
     const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
     return $b5a262d09b87e373$var$hslToHex($b5a262d09b87e373$var$shiftHueToward(h, target, amount), s, l);
 }
+function $b5a262d09b87e373$export$5c6e3c2b59b7fbbe(hex) {
+    const [r, g, b] = $b5a262d09b87e373$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;
+}
+function $b5a262d09b87e373$export$90ad0e6170cf6af5(fgHex, bgLuminance, minContrast = 0.15) {
+    const fgLum = $b5a262d09b87e373$export$5c6e3c2b59b7fbbe(fgHex);
+    const diff = Math.abs(fgLum - bgLuminance);
+    if (diff >= minContrast) return fgHex;
+    const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(fgHex);
+    if (bgLuminance > 0.5) {
+        // Light background — darken and boost saturation
+        const targetL = Math.max(0.08, l - (minContrast - diff) * 1.5);
+        const targetS = Math.min(1, s + 0.2);
+        return $b5a262d09b87e373$var$hslToHex(h, targetS, targetL);
+    } else {
+        // Dark background — lighten and boost saturation
+        const targetL = Math.min(0.92, l + (minContrast - diff) * 1.5);
+        const targetS = Math.min(1, s + 0.15);
+        return $b5a262d09b87e373$var$hslToHex(h, targetS, targetL);
+    }
+}
+function $b5a262d09b87e373$export$4a3734b8c4b5c0e(hex, gradeHue, intensity) {
+    const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
+    // Blend hue toward the grade hue
+    const hueDiff = (gradeHue - h + 540) % 360 - 180;
+    const newH = (h + hueDiff * intensity * 0.3 + 360) % 360;
+    // Slightly unify saturation
+    const newS = Math.max(0, Math.min(1, s + (0.5 - s) * intensity * 0.15));
+    return $b5a262d09b87e373$var$hslToHex(newH, newS, l);
+}
+function $b5a262d09b87e373$export$6d1620b367f86f7a(rng) {
+    // Warm golden, cool blue, rosy, teal, amber
+    const GRADE_HUES = [
+        40,
+        220,
+        340,
+        175,
+        30
+    ];
+    const hue = GRADE_HUES[Math.floor(rng() * GRADE_HUES.length)] + (rng() - 0.5) * 20;
+    const intensity = 0.15 + rng() * 0.25;
+    return {
+        hue: (hue + 360) % 360,
+        intensity: intensity
+    };
+}
 
 
 
@@ -1183,10 +1298,172 @@ const $77711f013715e6da$export$c2fc138f94dd4b2a = {
 };
 
 
+/**
+ * Procedural shape generators — hash-derived shapes that are unique
+ * per generation. Unlike the fixed shape library, these produce geometry
+ * that doesn't repeat across hashes.
+ *
+ * All draw functions accept an RNG via the config parameter so the
+ * shapes are deterministic from the hash.
+ */ const $2899cc29bfcdb86b$export$580f80cfb9de73bc = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const numPoints = 5 + Math.floor(rng() * 5); // 5-9 lobes
+    const points = [];
+    for(let i = 0; i < numPoints; i++){
+        const angle = i / numPoints * Math.PI * 2;
+        const jitter = 0.5 + rng() * 0.5; // radius varies 50-100%
+        points.push({
+            x: Math.cos(angle) * r * jitter,
+            y: Math.sin(angle) * r * jitter
+        });
+    }
+    ctx.beginPath();
+    // Start at midpoint between last and first point
+    const last = points[points.length - 1];
+    const first = points[0];
+    ctx.moveTo((last.x + first.x) / 2, (last.y + first.y) / 2);
+    for(let i = 0; i < numPoints; i++){
+        const curr = points[i];
+        const next = points[(i + 1) % numPoints];
+        const midX = (curr.x + next.x) / 2;
+        const midY = (curr.y + next.y) / 2;
+        ctx.quadraticCurveTo(curr.x, curr.y, midX, midY);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$7a6094023f0902a6 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const sides = 3 + Math.floor(rng() * 10); // 3-12 sides
+    const jitterAmount = 0.1 + rng() * 0.4; // 10-50% vertex displacement
+    ctx.beginPath();
+    for(let i = 0; i < sides; i++){
+        const angle = i / sides * Math.PI * 2 - Math.PI / 2;
+        const radiusJitter = 1 - jitterAmount + rng() * jitterAmount * 2;
+        const x = Math.cos(angle) * r * radiusJitter;
+        const y = Math.sin(angle) * r * radiusJitter;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$ef56b4a8316e47d5 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    // Frequency ratios — small integers produce recognizable patterns
+    const freqA = 1 + Math.floor(rng() * 5); // 1-5
+    const freqB = 1 + Math.floor(rng() * 5); // 1-5
+    const phase = rng() * Math.PI; // phase offset
+    const steps = 120;
+    ctx.beginPath();
+    for(let i = 0; i <= steps; i++){
+        const t = i / steps * Math.PI * 2;
+        const x = Math.sin(freqA * t + phase) * r;
+        const y = Math.sin(freqB * t) * r;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$1db9219b4f34658c = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    // Exponent range: 0.3 (spiky astroid) to 5 (rounded rectangle)
+    const n = 0.3 + rng() * 4.7;
+    const steps = 120;
+    ctx.beginPath();
+    for(let i = 0; i <= steps; i++){
+        const t = i / steps * Math.PI * 2;
+        const cosT = Math.cos(t);
+        const sinT = Math.sin(t);
+        // Superellipse parametric form
+        const x = Math.sign(cosT) * Math.pow(Math.abs(cosT), 2 / n) * r;
+        const y = Math.sign(sinT) * Math.pow(Math.abs(sinT), 2 / n) * r;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$b027c64d22b01985 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const scale = size / 2;
+    // R = outer radius, r = inner radius, d = pen distance from inner center
+    const R = 1;
+    const r = 0.2 + rng() * 0.6; // 0.2-0.8
+    const d = 0.3 + rng() * 0.7; // 0.3-1.0
+    // Number of full rotations needed to close the curve
+    const gcd = (a, b)=>{
+        const ai = Math.round(a * 1000);
+        const bi = Math.round(b * 1000);
+        const g = (x, y)=>y === 0 ? x : g(y, x % y);
+        return g(ai, bi) / 1000;
+    };
+    const period = r / gcd(R, r);
+    const maxT = Math.min(period, 10) * Math.PI * 2; // cap at 10 rotations
+    const steps = Math.min(600, Math.floor(maxT * 20));
+    ctx.beginPath();
+    for(let i = 0; i <= steps; i++){
+        const t = i / steps * maxT;
+        const x = ((R - r) * Math.cos(t) + d * Math.cos((R - r) / r * t)) * scale / (1 + d);
+        const y = ((R - r) * Math.sin(t) - d * Math.sin((R - r) / r * t)) * scale / (1 + d);
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$7608ccd03bfb705d = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const rings = 2 + Math.floor(rng() * 4); // 2-5 rings
+    const freq = 3 + Math.floor(rng() * 12); // 3-14 waves per ring
+    const amp = 0.05 + rng() * 0.15; // 5-20% of radius
+    ctx.beginPath();
+    for(let ring = 0; ring < rings; ring++){
+        const baseR = r * (0.3 + ring / rings * 0.7);
+        const steps = 80;
+        for(let i = 0; i <= steps; i++){
+            const t = i / steps * Math.PI * 2;
+            const wave = Math.sin(t * freq + ring * 1.5) * baseR * amp;
+            const x = Math.cos(t) * (baseR + wave);
+            const y = Math.sin(t) * (baseR + wave);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        }
+    }
+};
+const $2899cc29bfcdb86b$export$11a377e7498bb523 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const k = 2 + Math.floor(rng() * 6); // 2-7 petal parameter
+    const steps = 200;
+    ctx.beginPath();
+    for(let i = 0; i <= steps; i++){
+        const theta = i / steps * Math.PI * 2 * (k % 2 === 0 ? 1 : 2);
+        const rr = Math.cos(k * theta) * r;
+        const x = rr * Math.cos(theta);
+        const y = rr * Math.sin(theta);
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$40cfb4c637f2fbb5 = {
+    blob: $2899cc29bfcdb86b$export$580f80cfb9de73bc,
+    ngon: $2899cc29bfcdb86b$export$7a6094023f0902a6,
+    lissajous: $2899cc29bfcdb86b$export$ef56b4a8316e47d5,
+    superellipse: $2899cc29bfcdb86b$export$1db9219b4f34658c,
+    spirograph: $2899cc29bfcdb86b$export$b027c64d22b01985,
+    waveRing: $2899cc29bfcdb86b$export$7608ccd03bfb705d,
+    rose: $2899cc29bfcdb86b$export$11a377e7498bb523
+};
+
+
 const $e41b41d8dcf837ad$export$4ff7fc6f1af248b5 = {
     ...(0, $44f5b87a40c9680b$export$492753207a5258e1),
     ...(0, $f0f1a7293548e501$export$dbe318a13ce51887),
-    ...(0, $77711f013715e6da$export$c2fc138f94dd4b2a)
+    ...(0, $77711f013715e6da$export$c2fc138f94dd4b2a),
+    ...(0, $2899cc29bfcdb86b$export$40cfb4c637f2fbb5)
 };
 
 
@@ -1271,23 +1548,50 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
             break;
         case "watercolor":
             {
-                // Draw 3-4 slightly offset passes at low opacity for a bleed effect
-                const passes = 3 + (rng ? Math.floor(rng() * 2) : 0);
+                // Improved watercolor: edge darkening + radial bleed + layered washes
+                const passes = 4 + (rng ? Math.floor(rng() * 2) : 0);
                 const savedAlpha = ctx.globalAlpha;
-                ctx.globalAlpha = savedAlpha * (0.3 / passes * 2);
+                // Pass 1: Base wash — large, soft fill at low opacity
+                ctx.globalAlpha = savedAlpha * 0.15;
+                ctx.save();
+                const baseScale = 1.08 + (rng ? rng() * 0.04 : 0);
+                ctx.scale(baseScale, baseScale);
+                ctx.fill();
+                ctx.restore();
+                // Pass 2: Multiple offset washes with radial displacement
+                ctx.globalAlpha = savedAlpha * (0.25 / passes * 2);
                 for(let p = 0; p < passes; p++){
-                    const jx = rng ? (rng() - 0.5) * size * 0.06 : 0;
-                    const jy = rng ? (rng() - 0.5) * size * 0.06 : 0;
+                    // Radial outward displacement (not uniform) for organic bleed
+                    const angle = rng ? rng() * Math.PI * 2 : p * Math.PI / 2;
+                    const dist = rng ? rng() * size * 0.05 : size * 0.02;
+                    const jx = Math.cos(angle) * dist;
+                    const jy = Math.sin(angle) * dist;
                     ctx.save();
                     ctx.translate(jx, jy);
                     ctx.fill();
                     ctx.restore();
                 }
+                // Pass 3: Edge darkening — draw a slightly smaller shape with lighter fill
+                // to simulate pigment pooling at boundaries
+                ctx.globalAlpha = savedAlpha * 0.35;
+                ctx.save();
+                const innerScale = 0.85 + (rng ? rng() * 0.08 : 0);
+                ctx.scale(innerScale, innerScale);
+                // Lighten the fill for the inner area
+                const origFill = ctx.fillStyle;
+                if (typeof fillColor === "string") ctx.fillStyle = fillColor.replace(/[\d.]+\)$/, (m)=>{
+                    const v = parseFloat(m);
+                    return Math.min(1, v * 1.4).toFixed(2) + ")";
+                });
+                ctx.fill();
+                ctx.fillStyle = origFill;
+                ctx.restore();
                 ctx.globalAlpha = savedAlpha;
-                // Light stroke on top
-                ctx.globalAlpha *= 0.4;
+                // Soft stroke on top — thinner than normal for delicacy
+                ctx.globalAlpha *= 0.25;
+                ctx.lineWidth = strokeWidth * 0.6;
                 ctx.stroke();
-                ctx.globalAlpha /= 0.4;
+                ctx.globalAlpha /= 0.25;
                 break;
             }
         case "hatched":
@@ -1390,7 +1694,9 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     ctx.lineWidth = strokeWidth;
     const drawFunction = (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)[shape];
     if (drawFunction) {
-        drawFunction(ctx, size);
+        drawFunction(ctx, size, {
+            rng: rng
+        });
         $e0f99502ff383dd8$var$applyRenderStyle(ctx, renderStyle, fillColor, strokeColor, strokeWidth, size, rng);
     }
     // Reset shadow so patterns aren't double-glowed
@@ -1407,6 +1713,675 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
 
 
 
+/**
+ * Shape affinity system — controls which shapes look good together,
+ * quality tiers for different rendering contexts, and size preferences.
+ *
+ * This replaces the naive "pick any shape" approach with intentional
+ * curation that produces more cohesive compositions.
+ */ // ── Quality tiers ───────────────────────────────────────────────────
+// Not all shapes render equally well at all sizes or in all contexts.
+// Tier 1 shapes are visually strong at any size; Tier 3 shapes need
+// specific conditions to look good.
+const $8286059160ee2e04$export$4343b39fe47bd82c = {
+    // ── Basic shapes ──────────────────────────────────────────────
+    circle: {
+        tier: 1,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "blob",
+            "hexagon",
+            "flowerOfLife",
+            "seedOfLife"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    square: {
+        tier: 2,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 0.7,
+        affinities: [
+            "square",
+            "diamond",
+            "superellipse",
+            "islamicPattern"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "hatched"
+        ]
+    },
+    triangle: {
+        tier: 1,
+        minSizeFraction: 0.06,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "triangle",
+            "diamond",
+            "hexagon",
+            "merkaba",
+            "sriYantra"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "watercolor"
+        ]
+    },
+    hexagon: {
+        tier: 1,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "hexagon",
+            "circle",
+            "flowerOfLife",
+            "metatronsCube",
+            "triangle"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "fill-and-stroke",
+            "watercolor"
+        ]
+    },
+    star: {
+        tier: 2,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 0.6,
+        affinities: [
+            "star",
+            "circle",
+            "mandala",
+            "spirograph"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "dashed"
+        ]
+    },
+    "jacked-star": {
+        tier: 3,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.4,
+        affinities: [
+            "star",
+            "circle"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "dashed"
+        ]
+    },
+    heart: {
+        tier: 3,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.5,
+        affinities: [
+            "circle",
+            "blob"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor"
+        ]
+    },
+    diamond: {
+        tier: 2,
+        minSizeFraction: 0.06,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "diamond",
+            "triangle",
+            "square",
+            "merkaba"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "double-stroke"
+        ]
+    },
+    cube: {
+        tier: 3,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 0.5,
+        affinities: [
+            "square",
+            "diamond"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "fill-and-stroke"
+        ]
+    },
+    // ── Complex shapes ────────────────────────────────────────────
+    platonicSolid: {
+        tier: 2,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "metatronsCube",
+            "merkaba",
+            "hexagon",
+            "triangle"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "double-stroke",
+            "dashed"
+        ]
+    },
+    fibonacciSpiral: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "rose",
+            "spirograph",
+            "flowerOfLife"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "incomplete",
+            "watercolor"
+        ]
+    },
+    islamicPattern: {
+        tier: 2,
+        minSizeFraction: 0.25,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "square",
+            "hexagon",
+            "star",
+            "mandala"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "hatched"
+        ]
+    },
+    celticKnot: {
+        tier: 2,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 0.7,
+        affinities: [
+            "circle",
+            "lissajous",
+            "spirograph"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "double-stroke"
+        ]
+    },
+    merkaba: {
+        tier: 1,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "triangle",
+            "diamond",
+            "sriYantra",
+            "metatronsCube"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "fill-and-stroke",
+            "double-stroke"
+        ]
+    },
+    mandala: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "flowerOfLife",
+            "spirograph",
+            "rose"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "incomplete"
+        ]
+    },
+    fractal: {
+        tier: 2,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "blob",
+            "lissajous",
+            "circle"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "incomplete"
+        ]
+    },
+    // ── Sacred shapes ─────────────────────────────────────────────
+    flowerOfLife: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "hexagon",
+            "seedOfLife",
+            "eggOfLife",
+            "metatronsCube"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "watercolor",
+            "incomplete"
+        ]
+    },
+    treeOfLife: {
+        tier: 2,
+        minSizeFraction: 0.25,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "circle",
+            "flowerOfLife",
+            "metatronsCube"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "double-stroke"
+        ]
+    },
+    metatronsCube: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "hexagon",
+            "flowerOfLife",
+            "platonicSolid",
+            "merkaba"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "incomplete"
+        ]
+    },
+    sriYantra: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "triangle",
+            "merkaba",
+            "mandala",
+            "diamond"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "fill-and-stroke",
+            "double-stroke"
+        ]
+    },
+    seedOfLife: {
+        tier: 1,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "circle",
+            "flowerOfLife",
+            "eggOfLife",
+            "hexagon"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "watercolor",
+            "fill-only"
+        ]
+    },
+    vesicaPiscis: {
+        tier: 2,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.7,
+        affinities: [
+            "circle",
+            "seedOfLife",
+            "flowerOfLife"
+        ],
+        category: "sacred",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "watercolor"
+        ]
+    },
+    torus: {
+        tier: 3,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 0.6,
+        affinities: [
+            "circle",
+            "spirograph",
+            "waveRing"
+        ],
+        category: "sacred",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "dashed"
+        ]
+    },
+    eggOfLife: {
+        tier: 2,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "circle",
+            "seedOfLife",
+            "flowerOfLife"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "watercolor"
+        ]
+    },
+    // ── Procedural shapes ─────────────────────────────────────────
+    blob: {
+        tier: 1,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "blob",
+            "circle",
+            "superellipse",
+            "waveRing"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    ngon: {
+        tier: 2,
+        minSizeFraction: 0.06,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "hexagon",
+            "triangle",
+            "diamond",
+            "superellipse"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "hatched"
+        ]
+    },
+    lissajous: {
+        tier: 2,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "spirograph",
+            "rose",
+            "celticKnot",
+            "fibonacciSpiral"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "incomplete",
+            "dashed"
+        ]
+    },
+    superellipse: {
+        tier: 1,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "square",
+            "blob",
+            "hexagon"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    spirograph: {
+        tier: 1,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "rose",
+            "lissajous",
+            "mandala",
+            "flowerOfLife"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "incomplete",
+            "dashed"
+        ]
+    },
+    waveRing: {
+        tier: 2,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "circle",
+            "blob",
+            "torus",
+            "spirograph"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "incomplete"
+        ]
+    },
+    rose: {
+        tier: 1,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "spirograph",
+            "mandala",
+            "flowerOfLife",
+            "circle"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "fill-only",
+            "watercolor"
+        ]
+    }
+};
+function $8286059160ee2e04$export$4a95df8944b5033b(rng, shapeNames, archetypeName) {
+    const available = shapeNames.filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s]);
+    // Pick a seed shape — tier 1 shapes that are hero candidates
+    const heroPool = available.filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s].tier === 1 && $8286059160ee2e04$export$4343b39fe47bd82c[s].heroCandidate);
+    const seedShape = heroPool.length > 0 ? heroPool[Math.floor(rng() * heroPool.length)] : available[Math.floor(rng() * available.length)];
+    const seedProfile = $8286059160ee2e04$export$4343b39fe47bd82c[seedShape];
+    // Primary: seed shape + its direct affinities (tier 1-2 only)
+    const primaryCandidates = [
+        seedShape,
+        ...seedProfile.affinities
+    ].filter((s)=>available.includes(s)).filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s].tier <= 2);
+    const primary = [
+        ...new Set(primaryCandidates)
+    ].slice(0, 5);
+    // Supporting: affinities of affinities, plus same-category shapes
+    const supportingSet = new Set();
+    for (const p of primary){
+        const profile = $8286059160ee2e04$export$4343b39fe47bd82c[p];
+        if (!profile) continue;
+        for (const aff of profile.affinities)if (available.includes(aff) && !primary.includes(aff)) supportingSet.add(aff);
+    }
+    // Add same-category tier 1-2 shapes
+    for (const s of available){
+        const p = $8286059160ee2e04$export$4343b39fe47bd82c[s];
+        if (p.category === seedProfile.category && p.tier <= 2 && !primary.includes(s)) supportingSet.add(s);
+    }
+    const supporting = [
+        ...supportingSet
+    ].slice(0, 6);
+    // Accents: tier 1 shapes from other categories for contrast
+    const usedCategories = new Set([
+        ...primary,
+        ...supporting
+    ].map((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s]?.category));
+    const accentCandidates = available.filter((s)=>!primary.includes(s) && !supporting.includes(s) && $8286059160ee2e04$export$4343b39fe47bd82c[s].tier <= 2 && !usedCategories.has($8286059160ee2e04$export$4343b39fe47bd82c[s].category));
+    // Shuffle and take a few
+    const accents = [];
+    const shuffled = [
+        ...accentCandidates
+    ];
+    for(let i = shuffled.length - 1; i > 0; i--){
+        const j = Math.floor(rng() * (i + 1));
+        [shuffled[i], shuffled[j]] = [
+            shuffled[j],
+            shuffled[i]
+        ];
+    }
+    accents.push(...shuffled.slice(0, 3));
+    // For certain archetypes, bias the palette
+    if (archetypeName === "geometric-precision") // Remove blobs and organic shapes from primary
+    return {
+        primary: primary.filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s]?.category !== "procedural" || s === "ngon"),
+        supporting: supporting.filter((s)=>s !== "blob"),
+        accents: accents
+    };
+    if (archetypeName === "organic-flow") {
+        // Boost procedural/organic shapes
+        const organicBoost = available.filter((s)=>[
+                "blob",
+                "superellipse",
+                "waveRing",
+                "rose"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary,
+                ...organicBoost.slice(0, 2)
+            ],
+            supporting: supporting,
+            accents: accents
+        };
+    }
+    return {
+        primary: primary,
+        supporting: supporting,
+        accents: accents
+    };
+}
+function $8286059160ee2e04$export$3c37d9a045754d0e(palette, rng, sizeFraction) {
+    // Filter each tier by size constraints
+    const validPrimary = palette.primary.filter((s)=>{
+        const p = $8286059160ee2e04$export$4343b39fe47bd82c[s];
+        return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+    });
+    const validSupporting = palette.supporting.filter((s)=>{
+        const p = $8286059160ee2e04$export$4343b39fe47bd82c[s];
+        return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+    });
+    const validAccents = palette.accents.filter((s)=>{
+        const p = $8286059160ee2e04$export$4343b39fe47bd82c[s];
+        return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+    });
+    const roll = rng();
+    if (roll < 0.60 && validPrimary.length > 0) return validPrimary[Math.floor(rng() * validPrimary.length)];
+    if (roll < 0.90 && validSupporting.length > 0) return validSupporting[Math.floor(rng() * validSupporting.length)];
+    if (validAccents.length > 0) return validAccents[Math.floor(rng() * validAccents.length)];
+    // Fallback: any valid primary or supporting
+    const fallback = [
+        ...validPrimary,
+        ...validSupporting
+    ];
+    if (fallback.length > 0) return fallback[Math.floor(rng() * fallback.length)];
+    // Ultimate fallback
+    return palette.primary[0] || "circle";
+}
+function $8286059160ee2e04$export$ab873bb6fb56c1a8(shapeName, layerStyle, rng) {
+    const profile = $8286059160ee2e04$export$4343b39fe47bd82c[shapeName];
+    if (!profile || rng() > 0.7) return layerStyle;
+    return profile.bestStyles[Math.floor(rng() * profile.bestStyles.length)];
+}
+
+
 
 /**
  * Configuration options for image generation.
@@ -1621,6 +2596,69 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
         sizePower: 2.5,
         invertForeground: false
     },
+    {
+        name: "watercolor-wash",
+        gridSize: 3,
+        layers: 3,
+        baseOpacity: 0.25,
+        opacityReduction: 0.03,
+        minShapeSize: 200,
+        maxShapeSize: 700,
+        backgroundStyle: "radial-light",
+        paletteMode: "harmonious",
+        preferredStyles: [
+            "watercolor",
+            "fill-only",
+            "incomplete"
+        ],
+        flowLineMultiplier: 0.5,
+        heroShape: false,
+        glowMultiplier: 0.3,
+        sizePower: 0.6,
+        invertForeground: false
+    },
+    {
+        name: "op-art",
+        gridSize: 8,
+        layers: 2,
+        baseOpacity: 0.95,
+        opacityReduction: 0.05,
+        minShapeSize: 20,
+        maxShapeSize: 200,
+        backgroundStyle: "solid-light",
+        paletteMode: "high-contrast",
+        preferredStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "dashed"
+        ],
+        flowLineMultiplier: 0,
+        heroShape: false,
+        glowMultiplier: 0,
+        sizePower: 0.4,
+        invertForeground: false
+    },
+    {
+        name: "collage",
+        gridSize: 4,
+        layers: 3,
+        baseOpacity: 0.9,
+        opacityReduction: 0.08,
+        minShapeSize: 80,
+        maxShapeSize: 500,
+        backgroundStyle: "solid-light",
+        paletteMode: "duotone",
+        preferredStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "double-stroke"
+        ],
+        flowLineMultiplier: 0,
+        heroShape: true,
+        glowMultiplier: 0,
+        sizePower: 0.7,
+        invertForeground: false
+    },
     {
         name: "classic",
         gridSize: 5,
@@ -1648,26 +2686,7 @@ function $68a238ccd77f2bcd$export$f1142fd7da4d6590(rng) {
 }
 
 
-// ── Shape categories for weighted selection ─────────────────────────
-const $1f63dc64b5593c73$var$BASIC_SHAPES = [
-    "circle",
-    "square",
-    "triangle",
-    "hexagon",
-    "diamond",
-    "cube"
-];
-const $1f63dc64b5593c73$var$COMPLEX_SHAPES = [
-    "star",
-    "jacked-star",
-    "heart",
-    "platonicSolid",
-    "fibonacciSpiral",
-    "islamicPattern",
-    "celticKnot",
-    "merkaba",
-    "fractal"
-];
+// ── Shape categories for weighted selection (legacy fallback) ───────
 const $1f63dc64b5593c73$var$SACRED_SHAPES = [
     "mandala",
     "flowerOfLife",
@@ -1686,21 +2705,6 @@ const $1f63dc64b5593c73$var$COMPOSITION_MODES = [
     "grid-subdivision",
     "clustered"
 ];
-// ── Helper: pick shape with layer-aware weighting ───────────────────
-function $1f63dc64b5593c73$var$pickShape(rng, layerRatio, shapeNames) {
-    const basicW = 1 - layerRatio * 0.6;
-    const complexW = 0.3 + layerRatio * 0.3;
-    const sacredW = 0.1 + layerRatio * 0.4;
-    const total = basicW + complexW + sacredW;
-    const roll = rng() * total;
-    let pool;
-    if (roll < basicW) pool = $1f63dc64b5593c73$var$BASIC_SHAPES;
-    else if (roll < basicW + complexW) pool = $1f63dc64b5593c73$var$COMPLEX_SHAPES;
-    else pool = $1f63dc64b5593c73$var$SACRED_SHAPES;
-    const available = pool.filter((s)=>shapeNames.includes(s));
-    if (available.length === 0) return shapeNames[Math.floor(rng() * shapeNames.length)];
-    return available[Math.floor(rng() * available.length)];
-}
 // ── Helper: get position based on composition mode ──────────────────
 function $1f63dc64b5593c73$var$getCompositionPosition(mode, rng, width, height, shapeIndex, totalShapes, cx, cy) {
     switch(mode){
@@ -1759,22 +2763,28 @@ function $1f63dc64b5593c73$var$getCompositionPosition(mode, rng, width, height,
             };
     }
 }
-// ── Helper: positional color blending ───────────────────────────────
-function $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, colors, rng) {
-    const nx = x / width;
-    const ny = y / height;
-    const posIndex = (nx * 0.6 + ny * 0.4) * (colors.length - 1);
-    const baseIdx = Math.floor(posIndex) % colors.length;
-    return (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[baseIdx], rng, 0.08);
+// ── Helper: positional color from hierarchy ─────────────────────────
+function $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, hierarchy, rng) {
+    // Blend position into color selection — shapes near center lean dominant
+    const distFromCenter = Math.hypot(x - width / 2, y - height / 2) / Math.hypot(width / 2, height / 2);
+    // Center = more dominant, edges = more accent
+    if (distFromCenter < 0.35) return (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(hierarchy.dominant, rng, 10, 0.08);
+    else if (distFromCenter < 0.7) return (0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(hierarchy, rng), rng, 8, 0.06);
+    else {
+        // Edges: bias toward secondary/accent
+        const roll = rng();
+        const color = roll < 0.4 ? hierarchy.secondary : roll < 0.75 ? hierarchy.accent : hierarchy.dominant;
+        return (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(color, rng, 12, 0.08);
+    }
 }
-// ── Helper: check if a position is inside a void zone (Feature E) ───
+// ── Helper: check if a position is inside a void zone ───────────────
 function $1f63dc64b5593c73$var$isInVoidZone(x, y, voidZones) {
     for (const zone of voidZones){
         if (Math.hypot(x - zone.x, y - zone.y) < zone.radius) return true;
     }
     return false;
 }
-// ── Helper: density check for negative space (Feature E) ────────────
+// ── Helper: density check ───────────────────────────────────────────
 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++;
@@ -1870,7 +2880,15 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const [bgStart, bgEnd] = colorScheme.getBackgroundColorsByMode(archetype.paletteMode);
     const tempMode = colorScheme.getTemperatureMode();
     const fgTempTarget = tempMode === "warm-bg" ? "cool" : tempMode === "cool-bg" ? "warm" : null;
+    // ── 0b. Color hierarchy — dominant/secondary/accent weighting ──
+    const colorHierarchy = (0, $b5a262d09b87e373$export$fabac4600b87056)(colors, rng);
+    // ── 0c. Shape palette — curated shapes that work well together ──
     const shapeNames = Object.keys((0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5));
+    const shapePalette = (0, $8286059160ee2e04$export$4a95df8944b5033b)(rng, shapeNames, archetype.name);
+    // ── 0d. Color grading — unified tone for the whole image ───────
+    const colorGrade = (0, $b5a262d09b87e373$export$6d1620b367f86f7a)(rng);
+    // ── 0e. Light direction — consistent shadow angle ──────────────
+    const lightAngle = rng() * Math.PI * 2;
     const scaleFactor = Math.min(width, height) / 1024;
     const adjustedMinSize = minShapeSize * scaleFactor;
     const adjustedMaxSize = maxShapeSize * scaleFactor;
@@ -1879,25 +2897,45 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     // ── 1. Background ──────────────────────────────────────────────
     const bgRadius = Math.hypot(cx, cy);
     $1f63dc64b5593c73$var$drawBackground(ctx, archetype.backgroundStyle, bgStart, bgEnd, width, height, cx, cy, bgRadius, rng, colors);
-    // ── 1b. Layered background (Feature G) ─────────────────────────
-    // Draw large, very faint shapes to give the background texture
+    // Gradient mesh overlay — 3-4 color control points for richer backgrounds
+    const meshPoints = 3 + Math.floor(rng() * 2);
+    ctx.globalCompositeOperation = "soft-light";
+    for(let i = 0; i < meshPoints; i++){
+        const mx = rng() * width;
+        const my = rng() * height;
+        const mRadius = Math.min(width, height) * (0.3 + rng() * 0.4);
+        const mColor = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng);
+        const grad = ctx.createRadialGradient(mx, my, 0, mx, my, mRadius);
+        grad.addColorStop(0, (0, $b5a262d09b87e373$export$f2121afcad3d553f)(mColor, 0.08 + rng() * 0.06));
+        grad.addColorStop(1, "rgba(0,0,0,0)");
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, width, height);
+    }
+    ctx.globalCompositeOperation = "source-over";
+    // Compute average background luminance for contrast enforcement
+    const bgLum = ((0, $b5a262d09b87e373$export$5c6e3c2b59b7fbbe)(bgStart) + (0, $b5a262d09b87e373$export$5c6e3c2b59b7fbbe)(bgEnd)) / 2;
+    // ── 1b. Layered background — archetype-coherent shapes ─────────
     const bgShapeCount = 3 + Math.floor(rng() * 4);
     ctx.globalCompositeOperation = "soft-light";
     for(let i = 0; i < bgShapeCount; i++){
         const bx = rng() * width;
         const by = rng() * height;
         const bSize = width * 0.3 + rng() * width * 0.5;
-        const bColor = colors[Math.floor(rng() * colors.length)];
+        const bColor = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng);
         ctx.globalAlpha = 0.03 + rng() * 0.05;
         ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(bColor, 0.15);
         ctx.beginPath();
-        ctx.arc(bx, by, bSize / 2, 0, Math.PI * 2);
+        // Use archetype-appropriate background shapes
+        if (archetype.name === "geometric-precision" || archetype.name === "op-art") // Rectangular shapes for geometric archetypes
+        ctx.rect(bx - bSize / 2, by - bSize / 2, bSize, bSize * (0.5 + rng() * 0.5));
+        else ctx.arc(bx, by, bSize / 2, 0, Math.PI * 2);
         ctx.fill();
     }
     // Subtle concentric rings from center
     const ringCount = 2 + Math.floor(rng() * 3);
     ctx.globalAlpha = 0.02 + rng() * 0.03;
-    ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colors[0], 0.1);
+    ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
     ctx.lineWidth = 1 * scaleFactor;
     for(let i = 1; i <= ringCount; i++){
         const r = Math.min(width, height) * 0.15 * i;
@@ -1911,7 +2949,6 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     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 ───────────────────────────────
-    // Rule-of-thirds intersection points for intentional composition
     const THIRDS_POINTS = [
         {
             x: 1 / 3,
@@ -1932,10 +2969,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     ];
     const numFocal = 1 + Math.floor(rng() * 2);
     const focalPoints = [];
-    for(let f = 0; f < numFocal; f++)// 70% chance to snap to a rule-of-thirds point, 30% free placement
-    if (rng() < 0.7) {
+    for(let f = 0; f < numFocal; f++)if (rng() < 0.7) {
         const tp = THIRDS_POINTS[Math.floor(rng() * THIRDS_POINTS.length)];
-        // Small jitter around the thirds point so it's not robotic
         focalPoints.push({
             x: width * (tp.x + (rng() - 0.5) * 0.08),
             y: height * (tp.y + (rng() - 0.5) * 0.08),
@@ -1946,7 +2981,6 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         y: height * (0.2 + rng() * 0.6),
         strength: 0.3 + rng() * 0.4
     });
-    // Feature E: 1-2 void zones where shapes are sparse (negative space)
     const numVoids = Math.floor(rng() * 2) + 1;
     const voidZones = [];
     for(let v = 0; v < numVoids; v++)voidZones.push({
@@ -1978,20 +3012,24 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     }
     // Track all placed shapes for density checks and connecting curves
     const shapePositions = [];
+    // Hero avoidance radius — shapes near the hero orient toward it
+    let heroCenter = null;
     // ── 4b. Hero shape — a dominant focal element ───────────────────
     if (archetype.heroShape && rng() < 0.6) {
         const heroFocal = focalPoints[0];
+        // Use shape palette hero candidates
         const heroPool = [
-            ...$1f63dc64b5593c73$var$SACRED_SHAPES,
-            "fibonacciSpiral",
-            "merkaba",
-            "fractal"
-        ];
-        const heroShape = heroPool.filter((s)=>shapeNames.includes(s))[Math.floor(rng() * heroPool.filter((s)=>shapeNames.includes(s)).length)] || shapeNames[Math.floor(rng() * shapeNames.length)];
+            ...shapePalette.primary,
+            ...shapePalette.supporting
+        ].filter((s)=>(0, $8286059160ee2e04$export$4343b39fe47bd82c)[s]?.heroCandidate && shapeNames.includes(s));
+        const heroShape = heroPool.length > 0 ? heroPool[Math.floor(rng() * heroPool.length)] : shapeNames[Math.floor(rng() * shapeNames.length)];
         const heroSize = adjustedMaxSize * (0.8 + rng() * 0.5);
         const heroRotation = rng() * 360;
-        const heroFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), 0.15 + rng() * 0.2);
-        const heroStroke = (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05);
+        const heroFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(colorHierarchy.dominant, rng, 6, 0.05), bgLum), 0.15 + rng() * 0.2);
+        const heroStroke = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(colorHierarchy.accent, rng, 6, 0.05), bgLum);
+        // Get best style for this hero shape
+        const heroProfile = (0, $8286059160ee2e04$export$4343b39fe47bd82c)[heroShape];
+        const heroStyle = heroProfile ? heroProfile.bestStyles[Math.floor(rng() * heroProfile.bestStyles.length)] : rng() < 0.4 ? "watercolor" : "fill-and-stroke";
         ctx.globalAlpha = 0.5 + rng() * 0.2;
         (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, heroShape, heroFocal.x, heroFocal.y, {
             fillColor: heroFill,
@@ -2002,14 +3040,20 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             proportionType: "GOLDEN_RATIO",
             glowRadius: (12 + rng() * 20) * scaleFactor,
             glowColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(heroStroke, 0.4),
-            gradientFillEnd: (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1),
-            renderStyle: rng() < 0.4 ? "watercolor" : "fill-and-stroke",
+            gradientFillEnd: (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(colorHierarchy.secondary, rng, 10, 0.1),
+            renderStyle: heroStyle,
             rng: rng
         });
-        shapePositions.push({
+        heroCenter = {
             x: heroFocal.x,
             y: heroFocal.y,
             size: heroSize
+        };
+        shapePositions.push({
+            x: heroFocal.x,
+            y: heroFocal.y,
+            size: heroSize,
+            shape: heroShape
         });
     }
     // ── 5. Shape layers ────────────────────────────────────────────
@@ -2020,41 +3064,52 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const numShapes = shapesPerLayer + Math.floor(rng() * shapesPerLayer * 0.3);
         const layerOpacity = Math.max(0.15, baseOpacity - layer * opacityReduction);
         const layerSizeScale = 1 - layer * 0.15;
-        // Feature B: per-layer blend mode
+        // Per-layer blend mode
         const layerBlend = (0, $e0f99502ff383dd8$export$7bb7bff4e26fa06b)(rng);
         ctx.globalCompositeOperation = layerBlend;
-        // Feature C: per-layer render style bias — prefer archetype styles
+        // Per-layer render style bias — prefer archetype styles
         const layerRenderStyle = rng() < 0.6 ? archetype.preferredStyles[Math.floor(rng() * archetype.preferredStyles.length)] : (0, $e0f99502ff383dd8$export$9fd4e64b2acd410e)(rng);
-        // Feature D: atmospheric desaturation for later layers
-        const atmosphericDesat = layerRatio * 0.3; // 0 for first layer, up to 0.3 for last
+        // Atmospheric desaturation for later layers
+        const atmosphericDesat = layerRatio * 0.3;
         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);
             const [x, y] = applyFocalBias(rawPos.x, rawPos.y);
-            // Feature E: skip shapes in void zones, reduce in dense areas
+            // Skip shapes in void zones, reduce in dense areas
             if ($1f63dc64b5593c73$var$isInVoidZone(x, y, voidZones)) {
-                // 85% chance to skip — allows a few shapes to bleed in
                 if (rng() < 0.85) continue;
             }
             if ($1f63dc64b5593c73$var$localDensity(x, y, shapePositions, densityCheckRadius) > maxLocalDensity) {
-                if (rng() < 0.6) continue; // thin out dense areas
+                if (rng() < 0.6) continue;
             }
-            // Weighted shape selection
-            const shape = $1f63dc64b5593c73$var$pickShape(rng, layerRatio, shapeNames);
             // Power distribution for size — archetype controls the curve
             const sizeT = Math.pow(rng(), archetype.sizePower);
             const size = (adjustedMinSize + sizeT * (adjustedMaxSize - adjustedMinSize)) * layerSizeScale;
+            // Size fraction for affinity-aware shape selection
+            const sizeFraction = size / adjustedMaxSize;
+            // Palette-driven shape selection (replaces naive pickShape)
+            const shape = (0, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, sizeFraction);
             // Flow-field rotation in flow-field mode, random otherwise
-            const rotation = compositionMode === "flow-field" ? flowAngle(x, y) * 180 / Math.PI + (rng() - 0.5) * 30 : rng() * 360;
-            // Positional color blending + jitter
-            let fillBase = $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, colors, rng);
-            const strokeBase = colors[Math.floor(rng() * colors.length)];
-            // Feature D: desaturate colors on later layers for depth
+            let rotation = compositionMode === "flow-field" ? flowAngle(x, y) * 180 / Math.PI + (rng() - 0.5) * 30 : rng() * 360;
+            // Hero avoidance: shapes near the hero orient toward it
+            if (heroCenter) {
+                const distToHero = Math.hypot(x - heroCenter.x, y - heroCenter.y);
+                const heroInfluence = heroCenter.size * 1.5;
+                if (distToHero < heroInfluence && distToHero > 0) {
+                    const angleToHero = Math.atan2(heroCenter.y - y, heroCenter.x - x) * 180 / Math.PI;
+                    const blendFactor = 1 - distToHero / heroInfluence;
+                    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);
+            // 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
             if (fgTempTarget) fillBase = (0, $b5a262d09b87e373$export$51ea55f869b7e0d3)(fillBase, fgTempTarget, 0.15 + layerRatio * 0.1);
-            const fillColor = (0, $b5a262d09b87e373$export$59539d800dbe6858)(fillBase, rng, 0.06);
-            const strokeColor = (0, $b5a262d09b87e373$export$59539d800dbe6858)(strokeBase, rng, 0.05);
+            const fillColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(fillBase, rng, 6, 0.05), bgLum);
+            const strokeColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(strokeBase, rng, 5, 0.04), bgLum);
             // Semi-transparent fill
             const fillAlpha = 0.2 + rng() * 0.5;
             const transparentFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, fillAlpha);
@@ -2068,12 +3123,16 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const glowRadius = hasGlow ? (8 + rng() * 20) * scaleFactor : 0;
             // Gradient fill on ~30%
             const hasGradient = rng() < 0.3;
-            const gradientEnd = hasGradient ? (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1) : undefined;
-            // Feature C: per-shape render style (70% use layer style, 30% pick their own)
-            const shapeRenderStyle = rng() < 0.7 ? layerRenderStyle : (0, $e0f99502ff383dd8$export$9fd4e64b2acd410e)(rng);
-            // Feature F: organic edge jitter — applied via watercolor style on ~15% of shapes
+            const gradientEnd = hasGradient ? (0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 10, 0.1) : undefined;
+            // Affinity-aware render style selection
+            const shapeRenderStyle = (0, $8286059160ee2e04$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;
+            // Consistent light direction — subtle shadow offset
+            const shadowDist = hasGlow ? 0 : size * 0.02;
+            const shadowOffX = shadowDist * Math.cos(lightAngle);
+            const shadowOffY = shadowDist * Math.sin(lightAngle);
             (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, x, y, {
                 fillColor: transparentFill,
                 strokeColor: strokeColor,
@@ -2081,8 +3140,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 size: size,
                 rotation: rotation,
                 proportionType: "GOLDEN_RATIO",
-                glowRadius: glowRadius,
-                glowColor: hasGlow ? (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, 0.6) : undefined,
+                glowRadius: glowRadius || (shadowDist > 0 ? shadowDist * 2 : 0),
+                glowColor: hasGlow ? (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, 0.6) : shadowDist > 0 ? "rgba(0,0,0,0.08)" : undefined,
                 gradientFillEnd: gradientEnd,
                 renderStyle: finalRenderStyle,
                 rng: rng
@@ -2090,18 +3149,51 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             shapePositions.push({
                 x: x,
                 y: y,
-                size: size
+                size: size,
+                shape: shape
             });
-            // ── 5b. Recursive nesting ──────────────────────────────────
+            // ── 5b. 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 = x + Math.cos(echoAngle) * echoDist;
+                    const echoY = y + 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, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, echoX, echoY, {
+                        fillColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, fillAlpha * 0.6),
+                        strokeColor: (0, $b5a262d09b87e373$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
+                    });
+                }
+            }
+            // ── 5c. Recursive nesting ──────────────────────────────────
             if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
                 const innerCount = 1 + Math.floor(rng() * 3);
                 for(let n = 0; n < innerCount; n++){
-                    const innerShape = $1f63dc64b5593c73$var$pickShape(rng, Math.min(1, layerRatio + 0.3), shapeNames);
+                    // Pick inner shape from palette affinities
+                    const innerSizeFraction = size * 0.25 / adjustedMaxSize;
+                    const innerShape = (0, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, innerSizeFraction);
                     const innerSize = size * (0.15 + rng() * 0.25);
                     const innerOffX = (rng() - 0.5) * size * 0.4;
                     const innerOffY = (rng() - 0.5) * size * 0.4;
                     const innerRot = rng() * 360;
-                    const innerFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1), 0.3 + rng() * 0.4);
+                    const innerFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 10, 0.1), 0.3 + rng() * 0.4);
                     ctx.globalAlpha = layerOpacity * 0.7;
                     (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, innerShape, x + innerOffX, y + innerOffY, {
                         fillColor: innerFill,
@@ -2110,7 +3202,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                         size: innerSize,
                         rotation: innerRot,
                         proportionType: "GOLDEN_RATIO",
-                        renderStyle: shapeRenderStyle,
+                        renderStyle: (0, $8286059160ee2e04$export$ab873bb6fb56c1a8)(innerShape, layerRenderStyle, rng),
                         rng: rng
                     });
                 }
@@ -2119,7 +3211,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     }
     // Reset blend mode for post-processing passes
     ctx.globalCompositeOperation = "source-over";
-    // ── 6. Flow-line pass (Feature H: tapered brush strokes) ───────
+    // ── 6. Flow-line pass — variable color, branching, pressure ────
     const baseFlowLines = 6 + Math.floor(rng() * 10);
     const numFlowLines = Math.round(baseFlowLines * archetype.flowLineMultiplier);
     for(let i = 0; i < numFlowLines; i++){
@@ -2128,9 +3220,13 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const steps = 30 + Math.floor(rng() * 40);
         const stepLen = (3 + rng() * 5) * scaleFactor;
         const startWidth = (1 + rng() * 3) * scaleFactor;
-        const lineColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colors[Math.floor(rng() * colors.length)], 0.4);
+        // Variable color: interpolate between two hierarchy colors along the stroke
+        const lineColorStart = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum);
+        const lineColorEnd = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum);
         const lineAlpha = 0.06 + rng() * 0.1;
-        // Draw as individual segments with tapering width
+        // Pressure simulation: sinusoidal width variation
+        const pressureFreq = 2 + rng() * 4;
+        const pressurePhase = rng() * Math.PI * 2;
         let prevX = fx;
         let prevY = fy;
         for(let s = 0; s < steps; s++){
@@ -2138,37 +3234,61 @@ 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;
-            // Taper: thick at start, thin at end
-            const taper = 1 - s / steps * 0.8;
+            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 lineColor = t < 0.5 ? (0, $b5a262d09b87e373$export$f2121afcad3d553f)(lineColorStart, 0.4 + t * 0.2) : (0, $b5a262d09b87e373$export$f2121afcad3d553f)(lineColorEnd, 0.4 + (1 - t) * 0.2);
             ctx.strokeStyle = lineColor;
-            ctx.lineWidth = startWidth * taper;
+            ctx.lineWidth = startWidth * taper * pressure;
             ctx.lineCap = "round";
             ctx.beginPath();
             ctx.moveTo(prevX, prevY);
             ctx.lineTo(fx, fy);
             ctx.stroke();
+            // 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);
+                let bx = fx;
+                let by = fy;
+                let bPrevX = fx;
+                let bPrevY = fy;
+                const branchSteps = 5 + Math.floor(rng() * 10);
+                const branchWidth = startWidth * taper * 0.4;
+                for(let bs = 0; bs < branchSteps; bs++){
+                    const bAngle = branchAngle + (rng() - 0.5) * 0.2;
+                    bx += Math.cos(bAngle) * stepLen * 0.8;
+                    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();
+                    bPrevX = bx;
+                    bPrevY = by;
+                }
+            }
             prevX = fx;
             prevY = fy;
         }
     }
     // ── 6b. Apply symmetry mirroring ─────────────────────────────────
-    // Mirror the rendered content (shapes + flow lines) before post-processing.
-    // Uses ctx.canvas which is available in both Node (@napi-rs/canvas) and browsers.
     if (symmetryMode !== "none") {
         const canvas = ctx.canvas;
         ctx.save();
         if (symmetryMode === "bilateral-x" || symmetryMode === "quad") {
-            // Mirror left half onto right half
             ctx.save();
             ctx.translate(width, 0);
             ctx.scale(-1, 1);
-            // Draw the left half (0 to cx) onto the mirrored right side
             ctx.drawImage(canvas, 0, 0, Math.ceil(cx), height, 0, 0, Math.ceil(cx), height);
             ctx.restore();
         }
         if (symmetryMode === "bilateral-y" || symmetryMode === "quad") {
-            // Mirror top half onto bottom half
             ctx.save();
             ctx.translate(0, height);
             ctx.scale(1, -1);
@@ -2191,7 +3311,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     }
     // ── 8. Vignette — darken edges to draw the eye inward ───────────
     ctx.globalAlpha = 1;
-    const vignetteStrength = 0.25 + rng() * 0.2; // 25-45% edge darkening
+    const vignetteStrength = 0.25 + rng() * 0.2;
     const vigGrad = ctx.createRadialGradient(cx, cy, Math.min(width, height) * 0.3, cx, cy, bgRadius);
     vigGrad.addColorStop(0, "rgba(0,0,0,0)");
     vigGrad.addColorStop(0.6, "rgba(0,0,0,0)");
@@ -2217,13 +3337,57 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const cpx = mx + -dy / (dist || 1) * bulge;
             const cpy = my + dx / (dist || 1) * bulge;
             ctx.globalAlpha = 0.06 + rng() * 0.1;
-            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colors[Math.floor(rng() * colors.length)], 0.3);
+            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
             ctx.beginPath();
             ctx.moveTo(a.x, a.y);
             ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);
             ctx.stroke();
         }
     }
+    // ── 10. Post-processing ────────────────────────────────────────
+    // 10a. Color grading — unified tone across the whole image
+    // Apply as a semi-transparent overlay in the grade hue
+    ctx.globalAlpha = colorGrade.intensity * 0.25;
+    ctx.globalCompositeOperation = "soft-light";
+    const gradeHsl = `hsl(${Math.round(colorGrade.hue)}, 40%, 50%)`;
+    ctx.fillStyle = gradeHsl;
+    ctx.fillRect(0, 0, width, height);
+    ctx.globalCompositeOperation = "source-over";
+    // 10b. Chromatic aberration — subtle RGB channel offset at edges
+    // Only apply for neon/cosmic/ethereal archetypes where it fits
+    const chromaArchetypes = [
+        "neon-glow",
+        "cosmic",
+        "ethereal"
+    ];
+    if (chromaArchetypes.includes(archetype.name)) {
+        const chromaOffset = Math.ceil(2 * scaleFactor);
+        const canvas = ctx.canvas;
+        // Shift red channel slightly
+        ctx.globalAlpha = 0.03;
+        ctx.globalCompositeOperation = "screen";
+        ctx.drawImage(canvas, chromaOffset, 0, width, height, 0, 0, width, height);
+        // Shift blue channel opposite
+        ctx.drawImage(canvas, -chromaOffset, 0, width, height, 0, 0, width, height);
+        ctx.globalCompositeOperation = "source-over";
+    }
+    // 10c. Bloom — soft glow on bright areas for neon/cosmic archetypes
+    const bloomArchetypes = [
+        "neon-glow",
+        "cosmic"
+    ];
+    if (bloomArchetypes.includes(archetype.name)) {
+        const canvas = ctx.canvas;
+        ctx.globalAlpha = 0.08;
+        ctx.globalCompositeOperation = "screen";
+        // Draw the image slightly scaled up and blurred via shadow
+        ctx.save();
+        ctx.shadowBlur = 30 * scaleFactor;
+        ctx.shadowColor = "rgba(255,255,255,0.3)";
+        ctx.drawImage(canvas, 0, 0, width, height);
+        ctx.restore();
+        ctx.globalCompositeOperation = "source-over";
+    }
     ctx.globalAlpha = 1;
 }