git-hash-art 0.8.0 → 0.10.0

package/dist/main.js

@@ -541,6 +541,18 @@ function $d016ad53434219a1$export$6d1620b367f86f7a(rng) {
         intensity: intensity
     };
 }
+function $d016ad53434219a1$export$1793a1bfbe4f6ff5(hex, degrees) {
+    const [h, s, l] = $d016ad53434219a1$var$hexToHsl(hex);
+    return $d016ad53434219a1$var$hslToHex((h + degrees + 360) % 360, s, l);
+}
+function $d016ad53434219a1$export$703ba40a4347f77a(base, layerRatio, hueShiftPerLayer) {
+    const shift = layerRatio * hueShiftPerLayer;
+    return {
+        dominant: $d016ad53434219a1$export$1793a1bfbe4f6ff5(base.dominant, shift),
+        secondary: $d016ad53434219a1$export$1793a1bfbe4f6ff5(base.secondary, shift * 0.7),
+        accent: $d016ad53434219a1$export$1793a1bfbe4f6ff5(base.accent, shift * 0.5)
+    };
+}
 
 
 
@@ -1331,35 +1343,32 @@ const $dd5df256f00f6199$export$c2fc138f94dd4b2a = {
  */ const $6222456bc073291c$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 numPoints = 5 + Math.floor(rng() * 5);
     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%
+        const jitter = 0.5 + rng() * 0.5;
         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.quadraticCurveTo(curr.x, curr.y, (curr.x + next.x) / 2, (curr.y + next.y) / 2);
     }
     ctx.closePath();
 };
 const $6222456bc073291c$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
+    const sides = 3 + Math.floor(rng() * 10);
+    const jitterAmount = 0.1 + rng() * 0.4;
     ctx.beginPath();
     for(let i = 0; i < sides; i++){
         const angle = i / sides * Math.PI * 2 - Math.PI / 2;
@@ -1374,10 +1383,9 @@ const $6222456bc073291c$export$7a6094023f0902a6 = (ctx, size, config)=>{
 const $6222456bc073291c$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 freqA = 1 + Math.floor(rng() * 5);
+    const freqB = 1 + Math.floor(rng() * 5);
+    const phase = rng() * Math.PI;
     const steps = 120;
     ctx.beginPath();
     for(let i = 0; i <= steps; i++){
@@ -1392,7 +1400,6 @@ const $6222456bc073291c$export$ef56b4a8316e47d5 = (ctx, size, config)=>{
 const $6222456bc073291c$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();
@@ -1400,7 +1407,6 @@ const $6222456bc073291c$export$1db9219b4f34658c = (ctx, size, config)=>{
         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);
@@ -1411,11 +1417,9 @@ const $6222456bc073291c$export$1db9219b4f34658c = (ctx, size, config)=>{
 const $6222456bc073291c$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 r = 0.2 + rng() * 0.6;
+    const d = 0.3 + rng() * 0.7;
     const gcd = (a, b)=>{
         const ai = Math.round(a * 1000);
         const bi = Math.round(b * 1000);
@@ -1423,7 +1427,7 @@ const $6222456bc073291c$export$b027c64d22b01985 = (ctx, size, config)=>{
         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 maxT = Math.min(period, 10) * Math.PI * 2;
     const steps = Math.min(600, Math.floor(maxT * 20));
     ctx.beginPath();
     for(let i = 0; i <= steps; i++){
@@ -1438,9 +1442,9 @@ const $6222456bc073291c$export$b027c64d22b01985 = (ctx, size, config)=>{
 const $6222456bc073291c$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
+    const rings = 2 + Math.floor(rng() * 4);
+    const freq = 3 + Math.floor(rng() * 12);
+    const amp = 0.05 + rng() * 0.15;
     ctx.beginPath();
     for(let ring = 0; ring < rings; ring++){
         const baseR = r * (0.3 + ring / rings * 0.7);
@@ -1458,7 +1462,7 @@ const $6222456bc073291c$export$7608ccd03bfb705d = (ctx, size, config)=>{
 const $6222456bc073291c$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 k = 2 + Math.floor(rng() * 6);
     const steps = 200;
     ctx.beginPath();
     for(let i = 0; i <= steps; i++){
@@ -1471,6 +1475,308 @@ const $6222456bc073291c$export$11a377e7498bb523 = (ctx, size, config)=>{
     }
     ctx.closePath();
 };
+const $6222456bc073291c$export$76b6526575ea179b = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const shardCount = 4 + Math.floor(rng() * 5); // 4-8 shards
+    ctx.beginPath();
+    for(let s = 0; s < shardCount; s++){
+        const baseAngle = s / shardCount * Math.PI * 2 + (rng() - 0.5) * 0.3;
+        const dist = r * (0.15 + rng() * 0.35);
+        const cx = Math.cos(baseAngle) * dist;
+        const cy = Math.sin(baseAngle) * dist;
+        const shardSize = r * (0.2 + rng() * 0.4);
+        const verts = 3 + Math.floor(rng() * 3); // 3-5 vertices per shard
+        const shardAngleOffset = rng() * Math.PI * 2;
+        for(let v = 0; v < verts; v++){
+            const angle = shardAngleOffset + v / verts * Math.PI * 2;
+            // Elongate shards along their radial direction
+            const stretch = v % 2 === 0 ? 1.0 : 0.3 + rng() * 0.4;
+            const px = cx + Math.cos(angle) * shardSize * stretch;
+            const py = cy + Math.sin(angle) * shardSize * stretch;
+            if (v === 0) ctx.moveTo(px, py);
+            else ctx.lineTo(px, py);
+        }
+        ctx.closePath();
+    }
+};
+const $6222456bc073291c$export$ed9ff98da5b05073 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const edgeCount = 5 + Math.floor(rng() * 4); // 5-8 edges
+    const points = [];
+    // Generate edge midpoints at varying distances
+    for(let i = 0; i < edgeCount; i++){
+        const angle = i / edgeCount * Math.PI * 2 + (rng() - 0.5) * 0.4;
+        const dist = r * (0.6 + rng() * 0.4);
+        points.push({
+            angle: angle,
+            x: Math.cos(angle) * dist,
+            y: Math.sin(angle) * dist
+        });
+    }
+    // Sort by angle for proper winding
+    points.sort((a, b)=>a.angle - b.angle);
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for(let i = 1; i < points.length; i++)ctx.lineTo(points[i].x, points[i].y);
+    ctx.closePath();
+};
+const $6222456bc073291c$export$e0452d9a794fe7e5 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const biteSize = 0.6 + rng() * 0.3; // 60-90% of radius
+    const biteOffset = r * (0.3 + rng() * 0.4);
+    const biteAngle = rng() * Math.PI * 2;
+    // Outer circle
+    ctx.beginPath();
+    ctx.arc(0, 0, r, 0, Math.PI * 2);
+    // Subtract inner circle using even-odd rule
+    const bx = Math.cos(biteAngle) * biteOffset;
+    const by = Math.sin(biteAngle) * biteOffset;
+    // Draw inner circle counter-clockwise for subtraction
+    ctx.moveTo(bx + r * biteSize, by);
+    ctx.arc(bx, by, r * biteSize, 0, Math.PI * 2, true);
+};
+const $6222456bc073291c$export$38bfe5eb52137e01 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const segments = 12 + Math.floor(rng() * 8);
+    const startAngle = rng() * Math.PI * 2;
+    const curvature = (rng() - 0.5) * 0.4;
+    // Build spine points
+    const spine = [];
+    let angle = startAngle;
+    let px = 0, py = 0;
+    for(let i = 0; i <= segments; i++){
+        spine.push({
+            x: px,
+            y: py
+        });
+        const stepLen = r / segments * (1.5 + rng() * 0.5);
+        angle += curvature + (rng() - 0.5) * 0.6;
+        px += Math.cos(angle) * stepLen;
+        py += Math.sin(angle) * stepLen;
+    }
+    // Build tapered outline by offsetting perpendicular to spine
+    ctx.beginPath();
+    const leftSide = [];
+    const rightSide = [];
+    for(let i = 0; i < spine.length; i++){
+        const t = i / (spine.length - 1);
+        const width = r * 0.12 * (1 - t * 0.9); // taper from thick to thin
+        const next = spine[Math.min(i + 1, spine.length - 1)];
+        const dx = next.x - spine[i].x;
+        const dy = next.y - spine[i].y;
+        const len = Math.hypot(dx, dy) || 1;
+        const nx = -dy / len;
+        const ny = dx / len;
+        leftSide.push({
+            x: spine[i].x + nx * width,
+            y: spine[i].y + ny * width
+        });
+        rightSide.push({
+            x: spine[i].x - nx * width,
+            y: spine[i].y - ny * width
+        });
+    }
+    ctx.moveTo(leftSide[0].x, leftSide[0].y);
+    for(let i = 1; i < leftSide.length; i++)ctx.lineTo(leftSide[i].x, leftSide[i].y);
+    for(let i = rightSide.length - 1; i >= 0; i--)ctx.lineTo(rightSide[i].x, rightSide[i].y);
+    ctx.closePath();
+};
+const $6222456bc073291c$export$105caa8cfd63c422 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const lobeCount = 4 + Math.floor(rng() * 4); // 4-7 lobes
+    const spineAngle = rng() * Math.PI * 2;
+    const spineLen = r * 0.6;
+    ctx.beginPath();
+    for(let i = 0; i < lobeCount; i++){
+        const t = i / (lobeCount - 1) - 0.5; // -0.5 to 0.5
+        const sx = Math.cos(spineAngle) * spineLen * t;
+        const sy = Math.sin(spineAngle) * spineLen * t;
+        // Offset perpendicular for cloud shape
+        const perpAngle = spineAngle + Math.PI / 2;
+        const perpOff = (rng() - 0.3) * r * 0.3;
+        const cx = sx + Math.cos(perpAngle) * perpOff;
+        const cy = sy + Math.sin(perpAngle) * perpOff;
+        const lobeR = r * (0.25 + rng() * 0.2);
+        ctx.moveTo(cx + lobeR, cy);
+        ctx.arc(cx, cy, lobeR, 0, Math.PI * 2);
+    }
+};
+const $6222456bc073291c$export$e181e5bd3c539569 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const spikeCount = 8 + Math.floor(rng() * 8); // 8-15 spikes
+    const points = [];
+    for(let i = 0; i < spikeCount; i++){
+        const angle = i / spikeCount * Math.PI * 2;
+        const isSpike = i % 2 === 0;
+        const dist = isSpike ? r * (0.5 + rng() * 0.5 // spikes reach 50-100% of radius
+        ) : r * (0.15 + rng() * 0.2); // valleys at 15-35%
+        points.push({
+            x: Math.cos(angle) * dist,
+            y: Math.sin(angle) * dist
+        });
+    }
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for(let i = 0; i < points.length; i++){
+        const curr = points[i];
+        const next = points[(i + 1) % points.length];
+        const cpx = (curr.x + next.x) / 2 + (rng() - 0.5) * r * 0.15;
+        const cpy = (curr.y + next.y) / 2 + (rng() - 0.5) * r * 0.15;
+        ctx.quadraticCurveTo(cpx, cpy, next.x, next.y);
+    }
+    ctx.closePath();
+};
+const $6222456bc073291c$export$155b4780b4c6bb7b = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const subdivisions = 1 + Math.floor(rng() * 3); // 1-3
+    // Start with icosahedron vertices projected to 2D
+    const baseVerts = 6 + subdivisions * 4;
+    const points = [];
+    for(let i = 0; i < baseVerts; i++){
+        const angle = i / baseVerts * Math.PI * 2;
+        const ring = i % 2 === 0 ? 1.0 : 0.5 + rng() * 0.3;
+        points.push({
+            x: Math.cos(angle) * r * ring,
+            y: Math.sin(angle) * r * ring
+        });
+    }
+    ctx.beginPath();
+    // Draw triangulated mesh — connect each point to neighbors and center
+    for(let i = 0; i < points.length; i++){
+        const next = points[(i + 1) % points.length];
+        ctx.moveTo(points[i].x, points[i].y);
+        ctx.lineTo(next.x, next.y);
+        // Connect to center
+        ctx.moveTo(points[i].x, points[i].y);
+        ctx.lineTo(0, 0);
+        // Cross-connect to create triangulation
+        if (i % 2 === 0 && i + 2 < points.length) {
+            ctx.moveTo(points[i].x, points[i].y);
+            ctx.lineTo(points[i + 2].x, points[i + 2].y);
+        }
+    }
+    // Outer ring
+    ctx.moveTo(points[0].x, points[0].y);
+    for(let i = 1; i < points.length; i++)ctx.lineTo(points[i].x, points[i].y);
+    ctx.closePath();
+};
+const $6222456bc073291c$export$9a7e648f11155172 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const phi = (1 + Math.sqrt(5)) / 2; // golden ratio
+    const isKite = rng() < 0.5;
+    ctx.beginPath();
+    if (isKite) {
+        // Kite: two golden triangles joined at base
+        const topY = -r;
+        const bottomY = r * (1 / phi);
+        const midY = r * (1 / phi - 1) * 0.3;
+        const wingX = r * 0.6;
+        ctx.moveTo(0, topY);
+        ctx.lineTo(wingX, midY);
+        ctx.lineTo(0, bottomY);
+        ctx.lineTo(-wingX, midY);
+    } else {
+        // Dart: concave quadrilateral
+        const topY = -r;
+        const bottomY = r * 0.3;
+        const midY = -r * 0.1;
+        const wingX = r * 0.5;
+        ctx.moveTo(0, topY);
+        ctx.lineTo(wingX, midY);
+        ctx.lineTo(0, bottomY);
+        ctx.lineTo(-wingX, midY);
+    }
+    ctx.closePath();
+};
+const $6222456bc073291c$export$1fc0aedbabd73399 = (ctx, size, config)=>{
+    const r = size / 2;
+    // Vertices of equilateral triangle
+    const verts = [];
+    for(let i = 0; i < 3; i++){
+        const angle = i / 3 * Math.PI * 2 - Math.PI / 2;
+        verts.push({
+            x: Math.cos(angle) * r * 0.7,
+            y: Math.sin(angle) * r * 0.7
+        });
+    }
+    // Side length = distance between vertices
+    const sideLen = Math.hypot(verts[1].x - verts[0].x, verts[1].y - verts[0].y);
+    ctx.beginPath();
+    for(let i = 0; i < 3; i++){
+        const from = verts[(i + 1) % 3];
+        const to = verts[(i + 2) % 3];
+        const center = verts[i];
+        const startAngle = Math.atan2(from.y - center.y, from.x - center.x);
+        const endAngle = Math.atan2(to.y - center.y, to.x - center.x);
+        if (i === 0) ctx.moveTo(from.x, from.y);
+        ctx.arc(center.x, center.y, sideLen, startAngle, endAngle);
+    }
+    ctx.closePath();
+};
+const $6222456bc073291c$export$ef7b5e0c19a21fd1 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const dotCount = 15 + Math.floor(rng() * 25); // 15-39 dots
+    const clusterTightness = 0.3 + rng() * 0.5;
+    ctx.beginPath();
+    for(let i = 0; i < dotCount; i++){
+        // Gaussian-ish distribution via Box-Muller approximation
+        const u1 = Math.max(0.001, rng());
+        const u2 = rng();
+        const mag = Math.sqrt(-2 * Math.log(u1)) * clusterTightness;
+        const angle = u2 * Math.PI * 2;
+        const dx = Math.cos(angle) * mag * r;
+        const dy = Math.sin(angle) * mag * r;
+        const dotR = r * (0.02 + rng() * 0.04);
+        ctx.moveTo(dx + dotR, dy);
+        ctx.arc(dx, dy, dotR, 0, Math.PI * 2);
+    }
+};
+const $6222456bc073291c$export$f15df8ab60dfcc9a = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const angle1 = rng() * Math.PI;
+    const angle2 = angle1 + Math.PI / 2 + (rng() - 0.5) * 0.3;
+    const spacing = r * (0.08 + rng() * 0.08);
+    const hasCross = rng() < 0.6;
+    // Draw bounding shape (ellipse)
+    const rx = r * (0.7 + rng() * 0.3);
+    const ry = r * (0.5 + rng() * 0.3);
+    // Outer boundary
+    ctx.beginPath();
+    ctx.ellipse(0, 0, rx, ry, 0, 0, Math.PI * 2);
+    // Hatch lines clipped to the ellipse
+    const cos1 = Math.cos(angle1);
+    const sin1 = Math.sin(angle1);
+    for(let d = -r; d <= r; d += spacing){
+        const lx1 = d * cos1 - r * sin1;
+        const ly1 = d * sin1 + r * cos1;
+        const lx2 = d * cos1 + r * sin1;
+        const ly2 = d * sin1 - r * cos1;
+        ctx.moveTo(lx1, ly1);
+        ctx.lineTo(lx2, ly2);
+    }
+    if (hasCross) {
+        const cos2 = Math.cos(angle2);
+        const sin2 = Math.sin(angle2);
+        for(let d = -r; d <= r; d += spacing * 1.3){
+            const lx1 = d * cos2 - r * sin2;
+            const ly1 = d * sin2 + r * cos2;
+            const lx2 = d * cos2 + r * sin2;
+            const ly2 = d * sin2 - r * cos2;
+            ctx.moveTo(lx1, ly1);
+            ctx.lineTo(lx2, ly2);
+        }
+    }
+};
 const $6222456bc073291c$export$40cfb4c637f2fbb5 = {
     blob: $6222456bc073291c$export$580f80cfb9de73bc,
     ngon: $6222456bc073291c$export$7a6094023f0902a6,
@@ -1478,7 +1784,18 @@ const $6222456bc073291c$export$40cfb4c637f2fbb5 = {
     superellipse: $6222456bc073291c$export$1db9219b4f34658c,
     spirograph: $6222456bc073291c$export$b027c64d22b01985,
     waveRing: $6222456bc073291c$export$7608ccd03bfb705d,
-    rose: $6222456bc073291c$export$11a377e7498bb523
+    rose: $6222456bc073291c$export$11a377e7498bb523,
+    shardField: $6222456bc073291c$export$76b6526575ea179b,
+    voronoiCell: $6222456bc073291c$export$ed9ff98da5b05073,
+    crescent: $6222456bc073291c$export$e0452d9a794fe7e5,
+    tendril: $6222456bc073291c$export$38bfe5eb52137e01,
+    cloudForm: $6222456bc073291c$export$105caa8cfd63c422,
+    inkSplat: $6222456bc073291c$export$e181e5bd3c539569,
+    geodesicDome: $6222456bc073291c$export$155b4780b4c6bb7b,
+    penroseTile: $6222456bc073291c$export$9a7e648f11155172,
+    reuleauxTriangle: $6222456bc073291c$export$1fc0aedbabd73399,
+    dotCluster: $6222456bc073291c$export$ef7b5e0c19a21fd1,
+    crosshatchPatch: $6222456bc073291c$export$f15df8ab60dfcc9a
 };
 
 
@@ -1513,7 +1830,14 @@ const $c3de8257a8baa3b0$var$RENDER_STYLES = [
     "dashed",
     "watercolor",
     "hatched",
-    "incomplete"
+    "incomplete",
+    "stipple",
+    "stencil",
+    "noise-grain",
+    "wood-grain",
+    "marble-vein",
+    "fabric-weave",
+    "hand-drawn"
 ];
 function $c3de8257a8baa3b0$export$9fd4e64b2acd410e(rng) {
     return $c3de8257a8baa3b0$var$RENDER_STYLES[Math.floor(rng() * $c3de8257a8baa3b0$var$RENDER_STYLES.length)];
@@ -1687,6 +2011,240 @@ function $c3de8257a8baa3b0$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 ctx.lineDashOffset = 0;
                 break;
             }
+        case "stipple":
+            {
+                // Dot-fill texture — clip to shape, then scatter dots
+                const savedAlphaS = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaS * 0.15;
+                ctx.fill(); // ghost fill
+                ctx.globalAlpha = savedAlphaS;
+                ctx.save();
+                ctx.clip();
+                const dotSpacing = Math.max(2, size * 0.03);
+                const extent = size * 0.55;
+                ctx.globalAlpha = savedAlphaS * 0.7;
+                for(let dx = -extent; dx <= extent; dx += dotSpacing)for(let dy = -extent; dy <= extent; dy += dotSpacing){
+                    // Jitter each dot position for organic feel
+                    const jx = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
+                    const jy = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
+                    const dotR = rng ? dotSpacing * (0.15 + rng() * 0.2) : dotSpacing * 0.2;
+                    ctx.beginPath();
+                    ctx.arc(dx + jx, dy + jy, dotR, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaS;
+                // Outline
+                ctx.globalAlpha *= 0.4;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.4;
+                break;
+            }
+        case "stencil":
+            {
+                // Negative-space cutout — fill a rectangle, then erase the shape
+                const savedAlphaSt = ctx.globalAlpha;
+                // Fill a bounding area with the stroke color
+                ctx.globalAlpha = savedAlphaSt * 0.5;
+                ctx.fillStyle = strokeColor;
+                ctx.fillRect(-size * 0.6, -size * 0.6, size * 1.2, size * 1.2);
+                // Cut out the shape using destination-out
+                ctx.globalCompositeOperation = "destination-out";
+                ctx.globalAlpha = 1;
+                ctx.fill();
+                ctx.globalCompositeOperation = "source-over";
+                ctx.globalAlpha = savedAlphaSt;
+                // Subtle outline of the cutout
+                ctx.globalAlpha *= 0.3;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.3;
+                break;
+            }
+        case "noise-grain":
+            {
+                // Procedural noise grain texture clipped to shape boundary
+                const savedAlphaN = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaN * 0.25;
+                ctx.fill(); // base tint
+                ctx.globalAlpha = savedAlphaN;
+                ctx.save();
+                ctx.clip();
+                const grainSpacing = Math.max(1.5, size * 0.015);
+                const extentN = size * 0.55;
+                ctx.globalAlpha = savedAlphaN * 0.6;
+                for(let gx = -extentN; gx <= extentN; gx += grainSpacing)for(let gy = -extentN; gy <= extentN; gy += grainSpacing){
+                    if (!rng) break;
+                    const jx = (rng() - 0.5) * grainSpacing * 1.2;
+                    const jy = (rng() - 0.5) * grainSpacing * 1.2;
+                    const brightness = rng() > 0.5 ? 255 : 0;
+                    const dotAlpha = 0.15 + rng() * 0.35;
+                    ctx.globalAlpha = savedAlphaN * dotAlpha;
+                    ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
+                    const dotSize = grainSpacing * (0.3 + rng() * 0.5);
+                    ctx.fillRect(gx + jx, gy + jy, dotSize, dotSize);
+                }
+                ctx.restore();
+                ctx.fillStyle = fillColor;
+                ctx.globalAlpha = savedAlphaN;
+                ctx.globalAlpha *= 0.4;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.4;
+                break;
+            }
+        case "wood-grain":
+            {
+                // Parallel wavy lines simulating wood grain, clipped to shape
+                const savedAlphaW = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaW * 0.2;
+                ctx.fill(); // base tint
+                ctx.globalAlpha = savedAlphaW;
+                ctx.save();
+                ctx.clip();
+                const grainLineSpacing = Math.max(2, size * 0.035);
+                const extentW = size * 0.55;
+                const waveFreq = rng ? 3 + rng() * 5 : 5;
+                const waveAmp = rng ? size * (0.01 + rng() * 0.03) : size * 0.02;
+                const grainAngle = rng ? rng() * Math.PI : Math.PI * 0.25;
+                ctx.lineWidth = Math.max(0.5, strokeWidth * 0.3);
+                ctx.globalAlpha = savedAlphaW * 0.5;
+                const cosG = Math.cos(grainAngle);
+                const sinG = Math.sin(grainAngle);
+                for(let d = -extentW; d <= extentW; d += grainLineSpacing){
+                    ctx.beginPath();
+                    for(let t = -extentW; t <= extentW; t += 2){
+                        const wave = Math.sin(t / extentW * waveFreq * Math.PI) * waveAmp;
+                        const px = t * cosG - (d + wave) * sinG;
+                        const py = t * sinG + (d + wave) * cosG;
+                        if (t === -extentW) ctx.moveTo(px, py);
+                        else ctx.lineTo(px, py);
+                    }
+                    ctx.stroke();
+                }
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaW;
+                ctx.globalAlpha *= 0.35;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.35;
+                break;
+            }
+        case "marble-vein":
+            {
+                // Branching vein lines on a soft fill, clipped to shape
+                const savedAlphaM = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaM * 0.35;
+                ctx.fill(); // soft base
+                ctx.globalAlpha = savedAlphaM;
+                ctx.save();
+                ctx.clip();
+                const veinCount = rng ? 2 + Math.floor(rng() * 3) : 3;
+                const extentM = size * 0.45;
+                ctx.lineWidth = Math.max(0.5, strokeWidth * 0.5);
+                ctx.globalAlpha = savedAlphaM * 0.4;
+                for(let v = 0; v < veinCount; v++){
+                    const startX = rng ? (rng() - 0.5) * extentM * 2 : 0;
+                    const startY = rng ? -extentM + rng() * extentM * 0.5 : -extentM;
+                    let vx = startX;
+                    let vy = startY;
+                    const steps = 15 + (rng ? Math.floor(rng() * 15) : 10);
+                    const stepLen = size * 0.04;
+                    ctx.beginPath();
+                    ctx.moveTo(vx, vy);
+                    for(let s = 0; s < steps; s++){
+                        const drift = rng ? (rng() - 0.5) * stepLen * 1.5 : 0;
+                        vx += drift;
+                        vy += stepLen;
+                        ctx.lineTo(vx, vy);
+                        // Branch ~20% of the time
+                        if (rng && rng() < 0.2 && s > 2 && s < steps - 3) {
+                            const branchDir = rng() < 0.5 ? -1 : 1;
+                            let bx = vx;
+                            let by = vy;
+                            const bSteps = 3 + Math.floor(rng() * 5);
+                            ctx.moveTo(bx, by);
+                            for(let bs = 0; bs < bSteps; bs++){
+                                bx += branchDir * stepLen * (0.5 + rng() * 0.5);
+                                by += stepLen * 0.6;
+                                ctx.lineTo(bx, by);
+                            }
+                            ctx.moveTo(vx, vy); // return to main vein
+                        }
+                    }
+                    ctx.stroke();
+                }
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaM;
+                ctx.globalAlpha *= 0.3;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.3;
+                break;
+            }
+        case "fabric-weave":
+            {
+                // Interlocking horizontal/vertical threads clipped to shape
+                const savedAlphaF = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaF * 0.15;
+                ctx.fill(); // ghost base
+                ctx.globalAlpha = savedAlphaF;
+                ctx.save();
+                ctx.clip();
+                const threadSpacing = Math.max(2, size * 0.04);
+                const extentF = size * 0.55;
+                ctx.lineWidth = Math.max(0.8, threadSpacing * 0.5);
+                ctx.globalAlpha = savedAlphaF * 0.55;
+                // Horizontal threads
+                for(let y = -extentF; y <= extentF; y += threadSpacing * 2){
+                    ctx.beginPath();
+                    ctx.moveTo(-extentF, y);
+                    ctx.lineTo(extentF, y);
+                    ctx.stroke();
+                }
+                // Vertical threads (offset by half spacing for weave effect)
+                ctx.globalAlpha = savedAlphaF * 0.45;
+                ctx.strokeStyle = fillColor;
+                for(let x = -extentF; x <= extentF; x += threadSpacing * 2){
+                    ctx.beginPath();
+                    for(let y = -extentF; y <= extentF; y += threadSpacing * 2){
+                        // Over-under: draw segment, skip segment
+                        ctx.moveTo(x, y);
+                        ctx.lineTo(x, y + threadSpacing);
+                    }
+                    ctx.stroke();
+                }
+                ctx.strokeStyle = strokeColor;
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaF;
+                ctx.globalAlpha *= 0.3;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.3;
+                break;
+            }
+        case "hand-drawn":
+            {
+                // Wobbly hand-drawn edge treatment — fill normally, then redraw
+                // the outline with perturbed control points for a sketchy feel
+                const savedAlphaHD = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaHD * 0.85;
+                ctx.fill();
+                ctx.globalAlpha = savedAlphaHD;
+                // Draw 2-3 slightly offset wobbly strokes for a sketchy look
+                const wobblePasses = 2 + (rng ? Math.floor(rng() * 2) : 0);
+                ctx.lineWidth = strokeWidth * 0.8;
+                for(let wp = 0; wp < wobblePasses; wp++){
+                    ctx.globalAlpha = savedAlphaHD * (0.4 - wp * 0.1);
+                    ctx.save();
+                    // Slight random offset per pass
+                    const wobbleX = rng ? (rng() - 0.5) * size * 0.02 : 0;
+                    const wobbleY = rng ? (rng() - 0.5) * size * 0.02 : 0;
+                    ctx.translate(wobbleX, wobbleY);
+                    // Slightly different scale per pass for edge variation
+                    const wobbleScale = 1 + (rng ? (rng() - 0.5) * 0.03 : 0);
+                    ctx.scale(wobbleScale, wobbleScale);
+                    ctx.stroke();
+                    ctx.restore();
+                }
+                ctx.globalAlpha = savedAlphaHD;
+                break;
+            }
         case "fill-and-stroke":
         default:
             ctx.fill();
@@ -1733,6 +2291,64 @@ function $c3de8257a8baa3b0$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     });
     ctx.restore();
 }
+function $c3de8257a8baa3b0$export$8bd8bbd1a8e53689(ctx, shape, x, y, config) {
+    const { mirrorAxis: mirrorAxis = "horizontal", mirrorGap: mirrorGap = 0 } = config;
+    // Draw the primary shape
+    $c3de8257a8baa3b0$export$bb35a6995ddbf32d(ctx, shape, x, y, config);
+    // Draw the mirrored copy
+    ctx.save();
+    const savedAlpha = ctx.globalAlpha;
+    ctx.globalAlpha = savedAlpha * 0.7; // mirror is slightly softer
+    switch(mirrorAxis){
+        case "horizontal":
+            // Reflect across vertical axis at shape position
+            $c3de8257a8baa3b0$export$bb35a6995ddbf32d(ctx, shape, x, y + mirrorGap, {
+                ...config,
+                rotation: -(config.rotation || 0),
+                size: config.size * 0.95
+            });
+            break;
+        case "vertical":
+            $c3de8257a8baa3b0$export$bb35a6995ddbf32d(ctx, shape, x + mirrorGap, y, {
+                ...config,
+                rotation: 180 - (config.rotation || 0),
+                size: config.size * 0.95
+            });
+            break;
+        case "diagonal":
+            // Reflect across 45° axis
+            $c3de8257a8baa3b0$export$bb35a6995ddbf32d(ctx, shape, x + mirrorGap * 0.7, y + mirrorGap * 0.7, {
+                ...config,
+                rotation: 90 - (config.rotation || 0),
+                size: config.size * 0.9
+            });
+            break;
+        case "radial-4":
+            // Four-way radial mirror
+            for(let i = 1; i < 4; i++){
+                const angle = i / 4 * Math.PI * 2;
+                const mx = x + Math.cos(angle) * mirrorGap;
+                const my = y + Math.sin(angle) * mirrorGap;
+                ctx.globalAlpha = savedAlpha * (0.7 - i * 0.1);
+                $c3de8257a8baa3b0$export$bb35a6995ddbf32d(ctx, shape, mx, my, {
+                    ...config,
+                    rotation: (config.rotation || 0) + i * 90,
+                    size: config.size * (0.95 - i * 0.05)
+                });
+            }
+            break;
+    }
+    ctx.globalAlpha = savedAlpha;
+    ctx.restore();
+}
+function $c3de8257a8baa3b0$export$879206e23912d1a9(rng) {
+    const roll = rng();
+    if (roll < 0.60) return null;
+    if (roll < 0.75) return "horizontal";
+    if (roll < 0.87) return "vertical";
+    if (roll < 0.95) return "diagonal";
+    return "radial-4";
+}
 
 
 
@@ -1764,7 +2380,8 @@ const $e73976f898150d4d$export$4343b39fe47bd82c = {
         bestStyles: [
             "fill-only",
             "watercolor",
-            "fill-and-stroke"
+            "fill-and-stroke",
+            "hand-drawn"
         ]
     },
     square: {
@@ -1801,7 +2418,8 @@ const $e73976f898150d4d$export$4343b39fe47bd82c = {
         bestStyles: [
             "fill-and-stroke",
             "fill-only",
-            "watercolor"
+            "watercolor",
+            "hand-drawn"
         ]
     },
     hexagon: {
@@ -2181,7 +2799,8 @@ const $e73976f898150d4d$export$4343b39fe47bd82c = {
         bestStyles: [
             "fill-only",
             "watercolor",
-            "fill-and-stroke"
+            "fill-and-stroke",
+            "hand-drawn"
         ]
     },
     ngon: {
@@ -2235,7 +2854,8 @@ const $e73976f898150d4d$export$4343b39fe47bd82c = {
         bestStyles: [
             "fill-only",
             "watercolor",
-            "fill-and-stroke"
+            "fill-and-stroke",
+            "wood-grain"
         ]
     },
     spirograph: {
@@ -2291,84 +2911,355 @@ const $e73976f898150d4d$export$4343b39fe47bd82c = {
             "fill-only",
             "watercolor"
         ]
-    }
-};
-function $e73976f898150d4d$export$4a95df8944b5033b(rng, shapeNames, archetypeName) {
-    const available = shapeNames.filter((s)=>$e73976f898150d4d$export$4343b39fe47bd82c[s]);
-    // Pick a seed shape — tier 1 shapes that are hero candidates
-    const heroPool = available.filter((s)=>$e73976f898150d4d$export$4343b39fe47bd82c[s].tier === 1 && $e73976f898150d4d$export$4343b39fe47bd82c[s].heroCandidate);
-    const seedShape = heroPool.length > 0 ? heroPool[Math.floor(rng() * heroPool.length)] : available[Math.floor(rng() * available.length)];
-    const seedProfile = $e73976f898150d4d$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)=>$e73976f898150d4d$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 = $e73976f898150d4d$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 = $e73976f898150d4d$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)=>$e73976f898150d4d$export$4343b39fe47bd82c[s]?.category));
-    const accentCandidates = available.filter((s)=>!primary.includes(s) && !supporting.includes(s) && $e73976f898150d4d$export$4343b39fe47bd82c[s].tier <= 2 && !usedCategories.has($e73976f898150d4d$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)=>$e73976f898150d4d$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
+    },
+    // ── New procedural shapes ─────────────────────────────────────
+    shardField: {
+        tier: 2,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.7,
+        affinities: [
+            "voronoiCell",
+            "diamond",
+            "triangle",
+            "penroseTile"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "fill-only"
+        ]
+    },
+    voronoiCell: {
+        tier: 1,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "shardField",
+            "ngon",
+            "superellipse",
+            "blob"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "watercolor",
+            "marble-vein"
+        ]
+    },
+    crescent: {
+        tier: 1,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "blob",
+            "cloudForm",
+            "vesicaPiscis"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    tendril: {
+        tier: 2,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "blob",
+            "inkSplat",
+            "lissajous",
+            "fibonacciSpiral"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    cloudForm: {
+        tier: 1,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "blob",
+            "circle",
+            "crescent",
+            "superellipse"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor"
+        ]
+    },
+    inkSplat: {
+        tier: 2,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "blob",
+            "tendril",
+            "shardField",
+            "star"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    geodesicDome: {
+        tier: 2,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "metatronsCube",
+            "platonicSolid",
+            "hexagon",
+            "triangle"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "double-stroke"
+        ]
+    },
+    penroseTile: {
+        tier: 2,
+        minSizeFraction: 0.06,
+        maxSizeFraction: 0.6,
+        affinities: [
+            "diamond",
+            "triangle",
+            "shardField",
+            "voronoiCell"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "double-stroke"
+        ]
+    },
+    reuleauxTriangle: {
+        tier: 1,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "triangle",
+            "circle",
+            "superellipse",
+            "vesicaPiscis"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "watercolor"
+        ]
+    },
+    dotCluster: {
+        tier: 3,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 0.5,
+        affinities: [
+            "cloudForm",
+            "inkSplat",
+            "blob"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "stipple"
+        ]
+    },
+    crosshatchPatch: {
+        tier: 3,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.6,
+        affinities: [
+            "voronoiCell",
+            "ngon",
+            "superellipse"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "hatched",
+            "fabric-weave"
+        ]
+    }
+};
+function $e73976f898150d4d$export$4a95df8944b5033b(rng, shapeNames, archetypeName) {
+    const available = shapeNames.filter((s)=>$e73976f898150d4d$export$4343b39fe47bd82c[s]);
+    // Pick a seed shape — tier 1 shapes that are hero candidates
+    const heroPool = available.filter((s)=>$e73976f898150d4d$export$4343b39fe47bd82c[s].tier === 1 && $e73976f898150d4d$export$4343b39fe47bd82c[s].heroCandidate);
+    const seedShape = heroPool.length > 0 ? heroPool[Math.floor(rng() * heroPool.length)] : available[Math.floor(rng() * available.length)];
+    const seedProfile = $e73976f898150d4d$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)=>$e73976f898150d4d$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 = $e73976f898150d4d$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 = $e73976f898150d4d$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)=>$e73976f898150d4d$export$4343b39fe47bd82c[s]?.category));
+    const accentCandidates = available.filter((s)=>!primary.includes(s) && !supporting.includes(s) && $e73976f898150d4d$export$4343b39fe47bd82c[s].tier <= 2 && !usedCategories.has($e73976f898150d4d$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)=>$e73976f898150d4d$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
+        };
+    }
+    if (archetypeName === "shattered-glass") {
+        // Favor angular, fragmented shapes
+        const shardBoost = available.filter((s)=>[
+                "shardField",
+                "voronoiCell",
+                "penroseTile",
+                "diamond",
+                "triangle",
+                "ngon"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary.filter((s)=>s !== "blob" && s !== "cloudForm"),
+                ...shardBoost.slice(0, 3)
+            ],
+            supporting: supporting.filter((s)=>s !== "blob" && s !== "cloudForm"),
+            accents: accents
+        };
+    }
+    if (archetypeName === "botanical") {
+        // Favor organic, flowing shapes
+        const botanicalBoost = available.filter((s)=>[
+                "tendril",
+                "cloudForm",
+                "blob",
+                "crescent",
+                "rose",
+                "inkSplat"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary,
+                ...botanicalBoost.slice(0, 3)
+            ],
+            supporting: supporting,
+            accents: accents
+        };
+    }
+    if (archetypeName === "stipple-portrait") {
+        // Favor small, dot-friendly shapes
+        const stippleBoost = available.filter((s)=>[
+                "dotCluster",
+                "circle",
+                "crosshatchPatch",
+                "voronoiCell",
+                "blob"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary,
+                ...stippleBoost.slice(0, 3)
+            ],
+            supporting: supporting,
+            accents: accents
+        };
+    }
+    if (archetypeName === "celestial") {
+        // Favor sacred geometry and cosmic shapes
+        const celestialBoost = available.filter((s)=>[
+                "crescent",
+                "geodesicDome",
+                "mandala",
+                "flowerOfLife",
+                "spirograph",
+                "fibonacciSpiral"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary,
+                ...celestialBoost.slice(0, 3)
+            ],
+            supporting: supporting,
+            accents: accents
+        };
+    }
+    return {
+        primary: primary,
+        supporting: supporting,
+        accents: accents
     };
 }
 function $e73976f898150d4d$export$3c37d9a045754d0e(palette, rng, sizeFraction) {
@@ -2702,10 +3593,138 @@ const $f89bc858f7202849$var$ARCHETYPES = [
         glowMultiplier: 1,
         sizePower: 1.8,
         invertForeground: false
+    },
+    {
+        name: "shattered-glass",
+        gridSize: 8,
+        layers: 3,
+        baseOpacity: 0.85,
+        opacityReduction: 0.1,
+        minShapeSize: 15,
+        maxShapeSize: 250,
+        backgroundStyle: "solid-dark",
+        paletteMode: "high-contrast",
+        preferredStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "fill-only"
+        ],
+        flowLineMultiplier: 0,
+        heroShape: false,
+        glowMultiplier: 0.3,
+        sizePower: 1.0,
+        invertForeground: false
+    },
+    {
+        name: "botanical",
+        gridSize: 4,
+        layers: 4,
+        baseOpacity: 0.5,
+        opacityReduction: 0.06,
+        minShapeSize: 30,
+        maxShapeSize: 400,
+        backgroundStyle: "radial-light",
+        paletteMode: "earth",
+        preferredStyles: [
+            "watercolor",
+            "fill-only",
+            "incomplete"
+        ],
+        flowLineMultiplier: 3,
+        heroShape: true,
+        glowMultiplier: 0.2,
+        sizePower: 1.6,
+        invertForeground: false
+    },
+    {
+        name: "stipple-portrait",
+        gridSize: 9,
+        layers: 2,
+        baseOpacity: 0.8,
+        opacityReduction: 0.05,
+        minShapeSize: 5,
+        maxShapeSize: 120,
+        backgroundStyle: "solid-light",
+        paletteMode: "monochrome",
+        preferredStyles: [
+            "stipple",
+            "fill-only",
+            "hatched"
+        ],
+        flowLineMultiplier: 0,
+        heroShape: false,
+        glowMultiplier: 0,
+        sizePower: 2.8,
+        invertForeground: false
+    },
+    {
+        name: "celestial",
+        gridSize: 7,
+        layers: 5,
+        baseOpacity: 0.45,
+        opacityReduction: 0.04,
+        minShapeSize: 8,
+        maxShapeSize: 450,
+        backgroundStyle: "radial-dark",
+        paletteMode: "neon",
+        preferredStyles: [
+            "fill-only",
+            "watercolor",
+            "stroke-only",
+            "incomplete"
+        ],
+        flowLineMultiplier: 2,
+        heroShape: true,
+        glowMultiplier: 2.5,
+        sizePower: 2.2,
+        invertForeground: false
     }
 ];
+/**
+ * Linearly interpolate between two archetype numeric parameters.
+ */ function $f89bc858f7202849$var$lerpNum(a, b, t) {
+    return a + (b - a) * t;
+}
+/**
+ * Blend two archetypes by interpolating their numeric parameters
+ * and merging their style arrays.
+ */ function $f89bc858f7202849$var$blendArchetypes(a, b, t) {
+    // Merge preferred styles — unique union, primary archetype first
+    const mergedStyles = [
+        ...new Set([
+            ...a.preferredStyles,
+            ...b.preferredStyles
+        ])
+    ];
+    return {
+        name: `${a.name}+${b.name}`,
+        gridSize: Math.round($f89bc858f7202849$var$lerpNum(a.gridSize, b.gridSize, t)),
+        layers: Math.round($f89bc858f7202849$var$lerpNum(a.layers, b.layers, t)),
+        baseOpacity: $f89bc858f7202849$var$lerpNum(a.baseOpacity, b.baseOpacity, t),
+        opacityReduction: $f89bc858f7202849$var$lerpNum(a.opacityReduction, b.opacityReduction, t),
+        minShapeSize: Math.round($f89bc858f7202849$var$lerpNum(a.minShapeSize, b.minShapeSize, t)),
+        maxShapeSize: Math.round($f89bc858f7202849$var$lerpNum(a.maxShapeSize, b.maxShapeSize, t)),
+        backgroundStyle: t < 0.5 ? a.backgroundStyle : b.backgroundStyle,
+        paletteMode: t < 0.5 ? a.paletteMode : b.paletteMode,
+        preferredStyles: mergedStyles,
+        flowLineMultiplier: $f89bc858f7202849$var$lerpNum(a.flowLineMultiplier, b.flowLineMultiplier, t),
+        heroShape: t < 0.5 ? a.heroShape : b.heroShape,
+        glowMultiplier: $f89bc858f7202849$var$lerpNum(a.glowMultiplier, b.glowMultiplier, t),
+        sizePower: $f89bc858f7202849$var$lerpNum(a.sizePower, b.sizePower, t),
+        invertForeground: t < 0.5 ? a.invertForeground : b.invertForeground
+    };
+}
 function $f89bc858f7202849$export$f1142fd7da4d6590(rng) {
-    return $f89bc858f7202849$var$ARCHETYPES[Math.floor(rng() * $f89bc858f7202849$var$ARCHETYPES.length)];
+    const primary = $f89bc858f7202849$var$ARCHETYPES[Math.floor(rng() * $f89bc858f7202849$var$ARCHETYPES.length)];
+    // ~15% chance of blending with a second archetype
+    if (rng() < 0.15) {
+        const secondary = $f89bc858f7202849$var$ARCHETYPES[Math.floor(rng() * $f89bc858f7202849$var$ARCHETYPES.length)];
+        if (secondary.name !== primary.name) {
+            const blendT = 0.25 + rng() * 0.25; // 25-50% blend toward secondary
+            return $f89bc858f7202849$var$blendArchetypes(primary, secondary, blendT);
+        }
+    }
+    return primary;
 }
 
 
@@ -2881,6 +3900,135 @@ function $4f72c5a314eddf25$var$drawBackground(ctx, style, bgStart, bgEnd, width,
             }
     }
 }
+const $4f72c5a314eddf25$var$CONSTELLATIONS = [
+    {
+        name: "flanked-triangle",
+        build: (rng, baseSize)=>{
+            const gap = baseSize * (0.6 + rng() * 0.3);
+            return [
+                {
+                    dx: 0,
+                    dy: 0,
+                    shape: "triangle",
+                    size: baseSize,
+                    rotation: rng() * 360
+                },
+                {
+                    dx: -gap,
+                    dy: gap * 0.3,
+                    shape: "circle",
+                    size: baseSize * 0.35,
+                    rotation: 0
+                },
+                {
+                    dx: gap,
+                    dy: gap * 0.3,
+                    shape: "circle",
+                    size: baseSize * 0.35,
+                    rotation: 0
+                }
+            ];
+        }
+    },
+    {
+        name: "hexagon-ring",
+        build: (rng, baseSize)=>{
+            const members = [];
+            const count = 5 + Math.floor(rng() * 2);
+            const ringR = baseSize * 0.6;
+            for(let i = 0; i < count; i++){
+                const angle = i / count * Math.PI * 2;
+                members.push({
+                    dx: Math.cos(angle) * ringR,
+                    dy: Math.sin(angle) * ringR,
+                    shape: "hexagon",
+                    size: baseSize * (0.25 + rng() * 0.1),
+                    rotation: angle * 180 / Math.PI
+                });
+            }
+            return members;
+        }
+    },
+    {
+        name: "spiral-dots",
+        build: (rng, baseSize)=>{
+            const members = [];
+            const count = 7 + Math.floor(rng() * 5);
+            const turns = 1.5 + rng();
+            for(let i = 0; i < count; i++){
+                const t = i / count;
+                const angle = t * Math.PI * 2 * turns;
+                const r = t * baseSize * 0.7;
+                members.push({
+                    dx: Math.cos(angle) * r,
+                    dy: Math.sin(angle) * r,
+                    shape: "circle",
+                    size: baseSize * (0.08 + (1 - t) * 0.12),
+                    rotation: 0
+                });
+            }
+            return members;
+        }
+    },
+    {
+        name: "diamond-cluster",
+        build: (rng, baseSize)=>{
+            const gap = baseSize * 0.45;
+            return [
+                {
+                    dx: 0,
+                    dy: -gap,
+                    shape: "diamond",
+                    size: baseSize * 0.4,
+                    rotation: 0
+                },
+                {
+                    dx: gap,
+                    dy: 0,
+                    shape: "diamond",
+                    size: baseSize * 0.35,
+                    rotation: 15
+                },
+                {
+                    dx: 0,
+                    dy: gap,
+                    shape: "diamond",
+                    size: baseSize * 0.3,
+                    rotation: 30
+                },
+                {
+                    dx: -gap,
+                    dy: 0,
+                    shape: "diamond",
+                    size: baseSize * 0.35,
+                    rotation: -15
+                }
+            ];
+        }
+    },
+    {
+        name: "crescent-pair",
+        build: (rng, baseSize)=>{
+            const gap = baseSize * 0.5;
+            return [
+                {
+                    dx: -gap * 0.4,
+                    dy: 0,
+                    shape: "crescent",
+                    size: baseSize * 0.5,
+                    rotation: rng() * 30
+                },
+                {
+                    dx: gap * 0.4,
+                    dy: 0,
+                    shape: "crescent",
+                    size: baseSize * 0.45,
+                    rotation: 180 + rng() * 30
+                }
+            ];
+        }
+    }
+];
 function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
     const finalConfig = {
         ...(0, $93cf69256c93baa9$export$c2f8e0cc249a8d8f),
@@ -2912,6 +4060,8 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
     const colorGrade = (0, $d016ad53434219a1$export$6d1620b367f86f7a)(rng);
     // ── 0e. Light direction — consistent shadow angle ──────────────
     const lightAngle = rng() * Math.PI * 2;
+    // ── 0f. Palette evolution — hue drift direction across layers ──
+    const paletteHueShift = (rng() - 0.5) * 40; // -20° to +20° total drift
     const scaleFactor = Math.min(width, height) / 1024;
     const adjustedMinSize = minShapeSize * scaleFactor;
     const adjustedMaxSize = maxShapeSize * scaleFactor;
@@ -2967,6 +4117,65 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.stroke();
     }
     ctx.globalCompositeOperation = "source-over";
+    // ── 1c. Background pattern layer — subtle textured paper ───────
+    const bgPatternRoll = rng();
+    if (bgPatternRoll < 0.6) {
+        ctx.save();
+        ctx.globalCompositeOperation = "soft-light";
+        const patternOpacity = 0.02 + rng() * 0.04;
+        const patternColor = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.15);
+        if (bgPatternRoll < 0.2) {
+            // Dot grid
+            const dotSpacing = Math.max(8, Math.min(width, height) * (0.015 + rng() * 0.015));
+            const dotR = dotSpacing * 0.08;
+            ctx.globalAlpha = patternOpacity;
+            ctx.fillStyle = patternColor;
+            for(let px = 0; px < width; px += dotSpacing)for(let py = 0; py < height; py += dotSpacing){
+                ctx.beginPath();
+                ctx.arc(px, py, dotR, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        } else if (bgPatternRoll < 0.4) {
+            // Diagonal lines
+            const lineSpacing = Math.max(6, Math.min(width, height) * (0.02 + rng() * 0.02));
+            ctx.globalAlpha = patternOpacity;
+            ctx.strokeStyle = patternColor;
+            ctx.lineWidth = 0.5 * scaleFactor;
+            const diag = Math.hypot(width, height);
+            for(let d = -diag; d < diag; d += lineSpacing){
+                ctx.beginPath();
+                ctx.moveTo(d, 0);
+                ctx.lineTo(d + height, height);
+                ctx.stroke();
+            }
+        } else {
+            // Tessellation — hexagonal grid of tiny shapes
+            const tessSize = Math.max(10, Math.min(width, height) * (0.025 + rng() * 0.02));
+            const tessH = tessSize * Math.sqrt(3);
+            ctx.globalAlpha = patternOpacity * 0.7;
+            ctx.strokeStyle = patternColor;
+            ctx.lineWidth = 0.4 * scaleFactor;
+            for(let row = 0; row * tessH < height + tessH; row++){
+                const offsetX = row % 2 * tessSize * 0.75;
+                for(let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5; col++){
+                    const hx = col * tessSize * 1.5 + offsetX;
+                    const hy = row * tessH;
+                    ctx.beginPath();
+                    for(let s = 0; s < 6; s++){
+                        const angle = Math.PI / 3 * s - Math.PI / 6;
+                        const vx = hx + Math.cos(angle) * tessSize * 0.5;
+                        const vy = hy + Math.sin(angle) * tessSize * 0.5;
+                        if (s === 0) ctx.moveTo(vx, vy);
+                        else ctx.lineTo(vx, vy);
+                    }
+                    ctx.closePath();
+                    ctx.stroke();
+                }
+            }
+        }
+        ctx.restore();
+    }
+    ctx.globalCompositeOperation = "source-over";
     // ── 2. Composition mode ────────────────────────────────────────
     const compositionMode = $4f72c5a314eddf25$var$COMPOSITION_MODES[Math.floor(rng() * $4f72c5a314eddf25$var$COMPOSITION_MODES.length)];
     const symRoll = rng();
@@ -3027,6 +4236,41 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             ry + (nearest.y - ry) * pull
         ];
     }
+    // ── 3b. Void zone decoration — intentional negative space ────
+    for (const zone of voidZones){
+        // Subtle halo ring around void zones
+        ctx.globalAlpha = 0.04 + rng() * 0.04;
+        ctx.strokeStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.accent, 0.2);
+        ctx.lineWidth = 1.5 * scaleFactor;
+        ctx.beginPath();
+        ctx.arc(zone.x, zone.y, zone.radius, 0, Math.PI * 2);
+        ctx.stroke();
+        // ~50% chance: scatter tiny dots inside the void
+        if (rng() < 0.5) {
+            const dotCount = 3 + Math.floor(rng() * 6);
+            ctx.globalAlpha = 0.06 + rng() * 0.04;
+            ctx.fillStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.15);
+            for(let d = 0; d < dotCount; d++){
+                const angle = rng() * Math.PI * 2;
+                const dist = rng() * zone.radius * 0.7;
+                const dotR = (1 + rng() * 3) * scaleFactor;
+                ctx.beginPath();
+                ctx.arc(zone.x + Math.cos(angle) * dist, zone.y + Math.sin(angle) * dist, dotR, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        // ~30% chance: thin concentric ring inside
+        if (rng() < 0.3) {
+            ctx.globalAlpha = 0.03 + rng() * 0.03;
+            ctx.strokeStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
+            ctx.lineWidth = 0.5 * scaleFactor;
+            const innerR = zone.radius * (0.4 + rng() * 0.3);
+            ctx.beginPath();
+            ctx.arc(zone.x, zone.y, innerR, 0, Math.PI * 2);
+            ctx.stroke();
+        }
+    }
+    ctx.globalAlpha = 1;
     // ── 4. Flow field seed values ──────────────────────────────────
     const fieldAngleBase = rng() * Math.PI * 2;
     const fieldFreq = 0.5 + rng() * 2;
@@ -3094,6 +4338,23 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         const layerRenderStyle = rng() < 0.6 ? archetype.preferredStyles[Math.floor(rng() * archetype.preferredStyles.length)] : (0, $c3de8257a8baa3b0$export$9fd4e64b2acd410e)(rng);
         // Atmospheric desaturation for later layers
         const atmosphericDesat = layerRatio * 0.3;
+        // Depth-of-field simulation — later layers are "further away"
+        // Reduce stroke widths and shift colors toward the background
+        const dofFactor = 1 - layerRatio * 0.5; // 1.0 for front layer, 0.5 for back
+        const dofStrokeScale = 0.4 + dofFactor * 0.6; // strokes thin out with depth
+        const dofContrastReduction = layerRatio * 0.2; // colors fade toward bg
+        // Color palette evolution — hue-rotate the hierarchy per layer
+        const layerHierarchy = (0, $d016ad53434219a1$export$703ba40a4347f77a)(colorHierarchy, layerRatio, paletteHueShift);
+        // Focal depth: shapes near focal points get more detail
+        const focalDetailBoost = (px, py)=>{
+            let minFocalDist = Infinity;
+            for (const fp of focalPoints){
+                const d = Math.hypot(px - fp.x, py - fp.y);
+                if (d < minFocalDist) minFocalDist = d;
+            }
+            const maxDist = Math.hypot(width, height) * 0.5;
+            return Math.max(0, 1 - minFocalDist / maxDist); // 1.0 at focal, 0.0 at edges
+        };
         for(let i = 0; i < numShapes; i++){
             // Position from composition mode, then focal bias
             const rawPos = $4f72c5a314eddf25$var$getCompositionPosition(compositionMode, rng, width, height, i, numShapes, cx, cy);
@@ -3124,9 +4385,9 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     rotation = rotation + (angleToHero - rotation) * blendFactor * 0.4;
                 }
             }
-            // Positional color from hierarchy + jitter
-            let fillBase = $4f72c5a314eddf25$var$getPositionalColor(x, y, width, height, colorHierarchy, rng);
-            const strokeBase = (0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng);
+            // Positional color from hierarchy + jitter (using evolved layer palette)
+            let fillBase = $4f72c5a314eddf25$var$getPositionalColor(x, y, width, height, layerHierarchy, rng);
+            const strokeBase = (0, $d016ad53434219a1$export$b49f62f0a99da0e8)(layerHierarchy, rng);
             // Desaturate colors on later layers for depth
             if (atmosphericDesat > 0) fillBase = (0, $d016ad53434219a1$export$fb75607d98509d9)(fillBase, atmosphericDesat);
             // Temperature contrast: shift foreground shapes opposite to background
@@ -3136,8 +4397,10 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             // Semi-transparent fill
             const fillAlpha = 0.2 + rng() * 0.5;
             const transparentFill = (0, $d016ad53434219a1$export$f2121afcad3d553f)(fillColor, fillAlpha);
-            const strokeWidth = (0.5 + rng() * 2.0) * scaleFactor;
-            ctx.globalAlpha = layerOpacity * (0.5 + rng() * 0.5);
+            const strokeWidth = (0.5 + rng() * 2.0) * scaleFactor * dofStrokeScale;
+            // Depth-of-field: reduce opacity slightly for distant layers
+            const dofOpacityScale = 1 - dofContrastReduction;
+            ctx.globalAlpha = layerOpacity * (0.5 + rng() * 0.5) * dofOpacityScale;
             // Glow on sacred shapes more often — scaled by archetype
             const isSacred = $4f72c5a314eddf25$var$SACRED_SHAPES.includes(shape);
             const baseGlowChance = isSacred ? 0.45 : 0.2;
@@ -3156,7 +4419,48 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             const shadowDist = hasGlow ? 0 : size * 0.02;
             const shadowOffX = shadowDist * Math.cos(lightAngle);
             const shadowOffY = shadowDist * Math.sin(lightAngle);
-            (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, x, y, {
+            // ── 5a. Tangent placement — nudge toward nearest shape edge ──
+            let finalX = x;
+            let finalY = y;
+            if (shapePositions.length > 0 && rng() < 0.25) {
+                // Find nearest placed shape
+                let nearestDist = Infinity;
+                let nearestPos = null;
+                for (const sp of shapePositions){
+                    const d = Math.hypot(x - sp.x, y - sp.y);
+                    if (d < nearestDist && d > 0) {
+                        nearestDist = d;
+                        nearestPos = sp;
+                    }
+                }
+                if (nearestPos) {
+                    // Target distance: edges kissing (sum of half-sizes)
+                    const targetDist = (size + nearestPos.size) * 0.5;
+                    if (nearestDist > targetDist * 0.5 && nearestDist < targetDist * 3) {
+                        const angle = Math.atan2(y - nearestPos.y, x - nearestPos.x);
+                        finalX = nearestPos.x + Math.cos(angle) * targetDist;
+                        finalY = nearestPos.y + Math.sin(angle) * targetDist;
+                        // Keep in bounds
+                        finalX = Math.max(0, Math.min(width, finalX));
+                        finalY = Math.max(0, Math.min(height, finalY));
+                    }
+                }
+            }
+            // ── 5b. Shape mirroring — basic shapes get reflected copies ──
+            const mirrorAxis = (0, $c3de8257a8baa3b0$export$879206e23912d1a9)(rng);
+            const isBasicShape = [
+                "circle",
+                "triangle",
+                "square",
+                "hexagon",
+                "star",
+                "diamond",
+                "crescent",
+                "penroseTile",
+                "reuleauxTriangle"
+            ].includes(shape);
+            const shouldMirror = mirrorAxis !== null && isBasicShape && size > adjustedMaxSize * 0.2;
+            const shapeConfig = {
                 fillColor: transparentFill,
                 strokeColor: strokeColor,
                 strokeWidth: strokeWidth,
@@ -3168,22 +4472,47 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                 gradientFillEnd: gradientEnd,
                 renderStyle: finalRenderStyle,
                 rng: rng
+            };
+            if (shouldMirror) (0, $c3de8257a8baa3b0$export$8bd8bbd1a8e53689)(ctx, shape, finalX, finalY, {
+                ...shapeConfig,
+                mirrorAxis: mirrorAxis,
+                mirrorGap: size * (0.1 + rng() * 0.3)
             });
+            else (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, shapeConfig);
+            // ── Glazing — luminous multi-pass transparency on ~20% of shapes ──
+            if (rng() < 0.2 && size > adjustedMinSize * 2) {
+                const glazePasses = 2 + Math.floor(rng() * 2);
+                for(let g = 0; g < glazePasses; g++){
+                    const glazeScale = 1 - (g + 1) * 0.12; // progressively smaller
+                    const glazeAlpha = 0.08 + g * 0.04; // progressively more opaque toward center
+                    ctx.globalAlpha = glazeAlpha;
+                    (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, {
+                        fillColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(fillColor, 0.15 + g * 0.1),
+                        strokeColor: "rgba(0,0,0,0)",
+                        strokeWidth: 0,
+                        size: size * glazeScale,
+                        rotation: rotation,
+                        proportionType: "GOLDEN_RATIO",
+                        renderStyle: "fill-only",
+                        rng: rng
+                    });
+                }
+            }
             shapePositions.push({
-                x: x,
-                y: y,
+                x: finalX,
+                y: finalY,
                 size: size,
                 shape: shape
             });
-            // ── 5b. Size echo — large shapes spawn trailing smaller copies ──
+            // ── 5c. Size echo — large shapes spawn trailing smaller copies ──
             if (size > adjustedMaxSize * 0.5 && rng() < 0.2) {
                 const echoCount = 2 + Math.floor(rng() * 2);
                 const echoAngle = rng() * Math.PI * 2;
                 for(let e = 0; e < echoCount; e++){
                     const echoScale = 0.3 - e * 0.08;
                     const echoDist = size * (0.6 + e * 0.4);
-                    const echoX = x + Math.cos(echoAngle) * echoDist;
-                    const echoY = y + Math.sin(echoAngle) * echoDist;
+                    const echoX = finalX + Math.cos(echoAngle) * echoDist;
+                    const echoY = finalY + Math.sin(echoAngle) * echoDist;
                     const echoSize = size * Math.max(0.1, echoScale);
                     if (echoX < 0 || echoX > width || echoY < 0 || echoY > height) continue;
                     ctx.globalAlpha = layerOpacity * (0.4 - e * 0.1);
@@ -3205,8 +4534,11 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     });
                 }
             }
-            // ── 5c. Recursive nesting ──────────────────────────────────
-            if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
+            // ── 5d. Recursive nesting ──────────────────────────────────
+            // Focal depth: shapes near focal points get more detail
+            const focalProximity = focalDetailBoost(finalX, finalY);
+            const nestingChance = 0.15 + focalProximity * 0.15; // 15-30% near focal
+            if (size > adjustedMaxSize * 0.4 && rng() < nestingChance) {
                 const innerCount = 1 + Math.floor(rng() * 3);
                 for(let n = 0; n < innerCount; n++){
                     // Pick inner shape from palette affinities
@@ -3218,7 +4550,7 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     const innerRot = rng() * 360;
                     const innerFill = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$18a34c25ea7e724b)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 10, 0.1), 0.3 + rng() * 0.4);
                     ctx.globalAlpha = layerOpacity * 0.7;
-                    (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, innerShape, x + innerOffX, y + innerOffY, {
+                    (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, innerShape, finalX + innerOffX, finalY + innerOffY, {
                         fillColor: innerFill,
                         strokeColor: (0, $d016ad53434219a1$export$f2121afcad3d553f)(strokeColor, 0.5),
                         strokeWidth: strokeWidth * 0.6,
@@ -3230,6 +4562,42 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
                     });
                 }
             }
+            // ── 5e. Shape constellations — pre-composed groups ─────────
+            const constellationChance = 0.12 + focalProximity * 0.1; // 12-22% near focal
+            if (size > adjustedMaxSize * 0.35 && rng() < constellationChance) {
+                const constellation = $4f72c5a314eddf25$var$CONSTELLATIONS[Math.floor(rng() * $4f72c5a314eddf25$var$CONSTELLATIONS.length)];
+                const members = constellation.build(rng, size);
+                const groupRotation = rng() * Math.PI * 2;
+                const cosR = Math.cos(groupRotation);
+                const sinR = Math.sin(groupRotation);
+                for (const member of members){
+                    // Rotate the group offset by the group rotation
+                    const mx = finalX + member.dx * cosR - member.dy * sinR;
+                    const my = finalY + member.dx * sinR + member.dy * cosR;
+                    if (mx < 0 || mx > width || my < 0 || my > height) continue;
+                    const memberFill = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$18a34c25ea7e724b)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 8, 0.06), fillAlpha * 0.8);
+                    const memberStroke = (0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$18a34c25ea7e724b)(strokeBase, rng, 5, 0.04), bgLum);
+                    ctx.globalAlpha = layerOpacity * 0.6;
+                    // Use the member's shape if available, otherwise fall back to palette
+                    const memberShape = shapeNames.includes(member.shape) ? member.shape : (0, $e73976f898150d4d$export$3c37d9a045754d0e)(shapePalette, rng, member.size / adjustedMaxSize);
+                    (0, $c3de8257a8baa3b0$export$bb35a6995ddbf32d)(ctx, memberShape, mx, my, {
+                        fillColor: memberFill,
+                        strokeColor: memberStroke,
+                        strokeWidth: strokeWidth * 0.7,
+                        size: member.size,
+                        rotation: member.rotation + groupRotation * 180 / Math.PI,
+                        proportionType: "GOLDEN_RATIO",
+                        renderStyle: (0, $e73976f898150d4d$export$ab873bb6fb56c1a8)(memberShape, layerRenderStyle, rng),
+                        rng: rng
+                    });
+                    shapePositions.push({
+                        x: mx,
+                        y: my,
+                        size: member.size,
+                        shape: memberShape
+                    });
+                }
+            }
         }
     }
     // Reset blend mode for post-processing passes
@@ -3300,7 +4668,41 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
             prevY = fy;
         }
     }
-    // ── 6b. Apply symmetry mirroring ─────────────────────────────────
+    // ── 6b. Motion/energy lines — short directional bursts ─────────
+    const energyArchetypes = [
+        "dense-chaotic",
+        "cosmic",
+        "neon-glow",
+        "bold-graphic"
+    ];
+    const hasEnergyLines = energyArchetypes.some((a)=>archetype.name.includes(a)) || rng() < 0.25;
+    if (hasEnergyLines && shapePositions.length > 0) {
+        const energyCount = 5 + Math.floor(rng() * 10);
+        ctx.lineCap = "round";
+        for(let e = 0; e < energyCount; e++){
+            // Pick a random shape to radiate from
+            const source = shapePositions[Math.floor(rng() * shapePositions.length)];
+            const burstCount = 2 + Math.floor(rng() * 4);
+            const baseAngle = flowAngle(source.x, source.y);
+            for(let b = 0; b < burstCount; b++){
+                const angle = baseAngle + (rng() - 0.5) * 1.2;
+                const lineLen = (source.size * 0.3 + rng() * source.size * 0.5) * scaleFactor * 0.3;
+                const startDist = source.size * 0.5;
+                const sx = source.x + Math.cos(angle) * startDist;
+                const sy = source.y + Math.sin(angle) * startDist;
+                const ex = sx + Math.cos(angle) * lineLen;
+                const ey = sy + Math.sin(angle) * lineLen;
+                ctx.globalAlpha = 0.04 + rng() * 0.06;
+                ctx.strokeStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)((0, $d016ad53434219a1$export$90ad0e6170cf6af5)((0, $d016ad53434219a1$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
+                ctx.lineWidth = (0.5 + rng() * 1.5) * scaleFactor;
+                ctx.beginPath();
+                ctx.moveTo(sx, sy);
+                ctx.lineTo(ex, ey);
+                ctx.stroke();
+            }
+        }
+    }
+    // ── 6c. Apply symmetry mirroring ─────────────────────────────────
     if (symmetryMode !== "none") {
         const canvas = ctx.canvas;
         ctx.save();
@@ -3411,6 +4813,44 @@ function $4f72c5a314eddf25$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.restore();
         ctx.globalCompositeOperation = "source-over";
     }
+    // ── 11. Signature mark — unique geometric chop from hash prefix ──
+    {
+        const sigRng = (0, $e4b03e131ed2a289$export$eaf9227667332084)((0, $e4b03e131ed2a289$export$e9cc707de01b7042)(gitHash, 42));
+        const sigSize = Math.min(width, height) * 0.025;
+        // Bottom-right corner with padding
+        const sigX = width - sigSize * 2.5;
+        const sigY = height - sigSize * 2.5;
+        const sigSegments = 4 + Math.floor(sigRng() * 4); // 4-7 segments
+        const sigColor = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.accent, 0.15);
+        ctx.save();
+        ctx.globalAlpha = 0.12 + sigRng() * 0.08;
+        ctx.translate(sigX, sigY);
+        ctx.strokeStyle = sigColor;
+        ctx.fillStyle = (0, $d016ad53434219a1$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.06);
+        ctx.lineWidth = Math.max(0.5, 0.8 * scaleFactor);
+        // Outer ring
+        ctx.beginPath();
+        ctx.arc(0, 0, sigSize, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.fill();
+        // Inner geometric pattern — unique per hash
+        ctx.beginPath();
+        for(let s = 0; s < sigSegments; s++){
+            const angle1 = sigRng() * Math.PI * 2;
+            const angle2 = sigRng() * Math.PI * 2;
+            const r1 = sigSize * (0.2 + sigRng() * 0.6);
+            const r2 = sigSize * (0.2 + sigRng() * 0.6);
+            ctx.moveTo(Math.cos(angle1) * r1, Math.sin(angle1) * r1);
+            ctx.lineTo(Math.cos(angle2) * r2, Math.sin(angle2) * r2);
+        }
+        ctx.stroke();
+        // Center dot
+        ctx.beginPath();
+        ctx.arc(0, 0, sigSize * 0.12, 0, Math.PI * 2);
+        ctx.fillStyle = sigColor;
+        ctx.fill();
+        ctx.restore();
+    }
     ctx.globalAlpha = 1;
 }