git-hash-art 0.8.0 → 0.9.0

package/dist/browser.js

@@ -1308,35 +1308,32 @@ const $77711f013715e6da$export$c2fc138f94dd4b2a = {
  */ const $2899cc29bfcdb86b$export$580f80cfb9de73bc = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    const numPoints = 5 + Math.floor(rng() * 5); // 5-9 lobes
+    const 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 $2899cc29bfcdb86b$export$7a6094023f0902a6 = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    const sides = 3 + Math.floor(rng() * 10); // 3-12 sides
-    const jitterAmount = 0.1 + rng() * 0.4; // 10-50% vertex displacement
+    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;
@@ -1351,10 +1348,9 @@ const $2899cc29bfcdb86b$export$7a6094023f0902a6 = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$ef56b4a8316e47d5 = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    // Frequency ratios — small integers produce recognizable patterns
-    const freqA = 1 + Math.floor(rng() * 5); // 1-5
-    const freqB = 1 + Math.floor(rng() * 5); // 1-5
-    const phase = rng() * Math.PI; // phase offset
+    const 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++){
@@ -1369,7 +1365,6 @@ const $2899cc29bfcdb86b$export$ef56b4a8316e47d5 = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$1db9219b4f34658c = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    // Exponent range: 0.3 (spiky astroid) to 5 (rounded rectangle)
     const n = 0.3 + rng() * 4.7;
     const steps = 120;
     ctx.beginPath();
@@ -1377,7 +1372,6 @@ const $2899cc29bfcdb86b$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);
@@ -1388,11 +1382,9 @@ const $2899cc29bfcdb86b$export$1db9219b4f34658c = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$b027c64d22b01985 = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const scale = size / 2;
-    // R = outer radius, r = inner radius, d = pen distance from inner center
     const R = 1;
-    const r = 0.2 + rng() * 0.6; // 0.2-0.8
-    const d = 0.3 + rng() * 0.7; // 0.3-1.0
-    // Number of full rotations needed to close the curve
+    const 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);
@@ -1400,7 +1392,7 @@ const $2899cc29bfcdb86b$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++){
@@ -1415,9 +1407,9 @@ const $2899cc29bfcdb86b$export$b027c64d22b01985 = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$7608ccd03bfb705d = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    const rings = 2 + Math.floor(rng() * 4); // 2-5 rings
-    const freq = 3 + Math.floor(rng() * 12); // 3-14 waves per ring
-    const amp = 0.05 + rng() * 0.15; // 5-20% of radius
+    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);
@@ -1435,7 +1427,7 @@ const $2899cc29bfcdb86b$export$7608ccd03bfb705d = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$11a377e7498bb523 = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    const k = 2 + Math.floor(rng() * 6); // 2-7 petal parameter
+    const k = 2 + Math.floor(rng() * 6);
     const steps = 200;
     ctx.beginPath();
     for(let i = 0; i <= steps; i++){
@@ -1448,6 +1440,308 @@ const $2899cc29bfcdb86b$export$11a377e7498bb523 = (ctx, size, config)=>{
     }
     ctx.closePath();
 };
+const $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$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 $2899cc29bfcdb86b$export$40cfb4c637f2fbb5 = {
     blob: $2899cc29bfcdb86b$export$580f80cfb9de73bc,
     ngon: $2899cc29bfcdb86b$export$7a6094023f0902a6,
@@ -1455,7 +1749,18 @@ const $2899cc29bfcdb86b$export$40cfb4c637f2fbb5 = {
     superellipse: $2899cc29bfcdb86b$export$1db9219b4f34658c,
     spirograph: $2899cc29bfcdb86b$export$b027c64d22b01985,
     waveRing: $2899cc29bfcdb86b$export$7608ccd03bfb705d,
-    rose: $2899cc29bfcdb86b$export$11a377e7498bb523
+    rose: $2899cc29bfcdb86b$export$11a377e7498bb523,
+    shardField: $2899cc29bfcdb86b$export$76b6526575ea179b,
+    voronoiCell: $2899cc29bfcdb86b$export$ed9ff98da5b05073,
+    crescent: $2899cc29bfcdb86b$export$e0452d9a794fe7e5,
+    tendril: $2899cc29bfcdb86b$export$38bfe5eb52137e01,
+    cloudForm: $2899cc29bfcdb86b$export$105caa8cfd63c422,
+    inkSplat: $2899cc29bfcdb86b$export$e181e5bd3c539569,
+    geodesicDome: $2899cc29bfcdb86b$export$155b4780b4c6bb7b,
+    penroseTile: $2899cc29bfcdb86b$export$9a7e648f11155172,
+    reuleauxTriangle: $2899cc29bfcdb86b$export$1fc0aedbabd73399,
+    dotCluster: $2899cc29bfcdb86b$export$ef7b5e0c19a21fd1,
+    crosshatchPatch: $2899cc29bfcdb86b$export$f15df8ab60dfcc9a
 };
 
 
@@ -1490,7 +1795,13 @@ const $e0f99502ff383dd8$var$RENDER_STYLES = [
     "dashed",
     "watercolor",
     "hatched",
-    "incomplete"
+    "incomplete",
+    "stipple",
+    "stencil",
+    "noise-grain",
+    "wood-grain",
+    "marble-vein",
+    "fabric-weave"
 ];
 function $e0f99502ff383dd8$export$9fd4e64b2acd410e(rng) {
     return $e0f99502ff383dd8$var$RENDER_STYLES[Math.floor(rng() * $e0f99502ff383dd8$var$RENDER_STYLES.length)];
@@ -1664,6 +1975,213 @@ function $e0f99502ff383dd8$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 "fill-and-stroke":
         default:
             ctx.fill();
@@ -1710,6 +2228,64 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     });
     ctx.restore();
 }
+function $e0f99502ff383dd8$export$8bd8bbd1a8e53689(ctx, shape, x, y, config) {
+    const { mirrorAxis: mirrorAxis = "horizontal", mirrorGap: mirrorGap = 0 } = config;
+    // Draw the primary shape
+    $e0f99502ff383dd8$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
+            $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y + mirrorGap, {
+                ...config,
+                rotation: -(config.rotation || 0),
+                size: config.size * 0.95
+            });
+            break;
+        case "vertical":
+            $e0f99502ff383dd8$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
+            $e0f99502ff383dd8$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);
+                $e0f99502ff383dd8$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 $e0f99502ff383dd8$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";
+}
 
 
 
@@ -2212,7 +2788,8 @@ const $8286059160ee2e04$export$4343b39fe47bd82c = {
         bestStyles: [
             "fill-only",
             "watercolor",
-            "fill-and-stroke"
+            "fill-and-stroke",
+            "wood-grain"
         ]
     },
     spirograph: {
@@ -2268,6 +2845,202 @@ const $8286059160ee2e04$export$4343b39fe47bd82c = {
             "fill-only",
             "watercolor"
         ]
+    },
+    // ── 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 $8286059160ee2e04$export$4a95df8944b5033b(rng, shapeNames, archetypeName) {
@@ -2342,6 +3115,81 @@ function $8286059160ee2e04$export$4a95df8944b5033b(rng, shapeNames, archetypeNam
             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,
@@ -2679,6 +3527,91 @@ const $68a238ccd77f2bcd$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
     }
 ];
 function $68a238ccd77f2bcd$export$f1142fd7da4d6590(rng) {
@@ -2858,6 +3791,135 @@ function $1f63dc64b5593c73$var$drawBackground(ctx, style, bgStart, bgEnd, width,
             }
     }
 }
+const $1f63dc64b5593c73$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 $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const finalConfig = {
         ...(0, $81c1b644006d48ec$export$c2f8e0cc249a8d8f),
@@ -2944,6 +4006,65 @@ function $1f63dc64b5593c73$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, $b5a262d09b87e373$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 = $1f63dc64b5593c73$var$COMPOSITION_MODES[Math.floor(rng() * $1f63dc64b5593c73$var$COMPOSITION_MODES.length)];
     const symRoll = rng();
@@ -3071,6 +4192,11 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const layerRenderStyle = rng() < 0.6 ? archetype.preferredStyles[Math.floor(rng() * archetype.preferredStyles.length)] : (0, $e0f99502ff383dd8$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
         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);
@@ -3113,8 +4239,10 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             // Semi-transparent fill
             const fillAlpha = 0.2 + rng() * 0.5;
             const transparentFill = (0, $b5a262d09b87e373$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 = $1f63dc64b5593c73$var$SACRED_SHAPES.includes(shape);
             const baseGlowChance = isSacred ? 0.45 : 0.2;
@@ -3133,7 +4261,48 @@ function $1f63dc64b5593c73$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, $e0f99502ff383dd8$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, $e0f99502ff383dd8$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,
@@ -3145,22 +4314,28 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 gradientFillEnd: gradientEnd,
                 renderStyle: finalRenderStyle,
                 rng: rng
+            };
+            if (shouldMirror) (0, $e0f99502ff383dd8$export$8bd8bbd1a8e53689)(ctx, shape, finalX, finalY, {
+                ...shapeConfig,
+                mirrorAxis: mirrorAxis,
+                mirrorGap: size * (0.1 + rng() * 0.3)
             });
+            else (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, shapeConfig);
             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);
@@ -3182,7 +4357,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     });
                 }
             }
-            // ── 5c. Recursive nesting ──────────────────────────────────
+            // ── 5d. Recursive nesting ──────────────────────────────────
             if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
                 const innerCount = 1 + Math.floor(rng() * 3);
                 for(let n = 0; n < innerCount; n++){
@@ -3195,7 +4370,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     const innerRot = rng() * 360;
                     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, {
+                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, innerShape, finalX + innerOffX, finalY + innerOffY, {
                         fillColor: innerFill,
                         strokeColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(strokeColor, 0.5),
                         strokeWidth: strokeWidth * 0.6,
@@ -3207,6 +4382,41 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     });
                 }
             }
+            // ── 5e. Shape constellations — pre-composed groups ─────────
+            if (size > adjustedMaxSize * 0.35 && rng() < 0.12) {
+                const constellation = $1f63dc64b5593c73$var$CONSTELLATIONS[Math.floor(rng() * $1f63dc64b5593c73$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, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 8, 0.06), fillAlpha * 0.8);
+                    const memberStroke = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$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, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, member.size / adjustedMaxSize);
+                    (0, $e0f99502ff383dd8$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, $8286059160ee2e04$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