git-hash-art 0.7.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;
@@ -427,6 +493,31 @@ function $b5a262d09b87e373$export$90ad0e6170cf6af5(fgHex, bgLuminance, minContra
         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
+    };
+}
 
 
 
@@ -1457,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":
@@ -1595,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.
@@ -1809,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,
@@ -1836,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",
@@ -1867,15 +2698,6 @@ const $1f63dc64b5593c73$var$SACRED_SHAPES = [
     "torus",
     "eggOfLife"
 ];
-const $1f63dc64b5593c73$var$PROCEDURAL_SHAPES = [
-    "blob",
-    "ngon",
-    "lissajous",
-    "superellipse",
-    "spirograph",
-    "waveRing",
-    "rose"
-];
 const $1f63dc64b5593c73$var$COMPOSITION_MODES = [
     "radial",
     "flow-field",
@@ -1883,23 +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 proceduralW = 0.25 + layerRatio * 0.2; // always present, grows with depth
-    const total = basicW + complexW + sacredW + proceduralW;
-    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 if (roll < basicW + complexW + sacredW) pool = $1f63dc64b5593c73$var$SACRED_SHAPES;
-    else pool = $1f63dc64b5593c73$var$PROCEDURAL_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){
@@ -1958,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++;
@@ -2069,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;
@@ -2078,27 +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);
+    // 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 (Feature G) ─────────────────────────
-    // Draw large, very faint shapes to give the background texture
+    // ── 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;
@@ -2112,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,
@@ -2133,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),
@@ -2147,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({
@@ -2179,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$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), bgLum), 0.15 + rng() * 0.2);
-        const heroStroke = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), bgLum);
+        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,
@@ -2203,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 ────────────────────────────────────────────
@@ -2221,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$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(fillBase, rng, 0.06), bgLum);
-            const strokeColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(strokeBase, rng, 0.05), bgLum);
+            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);
@@ -2269,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,
@@ -2282,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
@@ -2291,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,
@@ -2311,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
                     });
                 }
@@ -2320,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++){
@@ -2329,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)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)(colors[Math.floor(rng() * colors.length)], bgLum), 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++){
@@ -2339,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);
@@ -2392,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)");
@@ -2418,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)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)(colors[Math.floor(rng() * colors.length)], bgLum), 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;
 }