git-hash-art 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -4,11 +4,27 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.14.0](https://github.com/gfargo/git-hash-art/compare/0.13.0...0.14.0)
+
+- feat: Custom shapes API + remove portal/cutout feature [`#24`](https://github.com/gfargo/git-hash-art/pull/24)
+- feat: add custom shapes API, remove portal/cutout feature [`68d1d5e`](https://github.com/gfargo/git-hash-art/commit/68d1d5eb05c09e4459153b277cf07f325fe27b1a)
+
+#### [0.13.0](https://github.com/gfargo/git-hash-art/compare/0.12.0...0.13.0)
+
+> 20 March 2026
+
+- perf: 33-111× pipeline speedup via phase-level profiling [`#23`](https://github.com/gfargo/git-hash-art/pull/23)
+- perf: 33-111× speedup via phase-level profiling and targeted optimizations [`90ed5f5`](https://github.com/gfargo/git-hash-art/commit/90ed5f567bb57a507f11b836156bf8828a946013)
+- chore: release v0.13.0 [`79ae33e`](https://github.com/gfargo/git-hash-art/commit/79ae33e6645ab25c144558dd1fe601bd33b96d32)
+
 #### [0.12.0](https://github.com/gfargo/git-hash-art/compare/0.11.0...0.12.0)
 
+> 19 March 2026
+
 - perf: cross-env rendering optimizations round 2 [`#22`](https://github.com/gfargo/git-hash-art/pull/22)
 - perf: optimize rendering pipeline — batch flow lines, cap clip-heavy styles, cache color parsing [`#21`](https://github.com/gfargo/git-hash-art/pull/21)
 - docs: update ALGORITHM.md to reflect rendering pipeline changes [`2631e0c`](https://github.com/gfargo/git-hash-art/commit/2631e0c10b2b6bfb0a98c6a31d71d7ddaa8e7511)
+- chore: release v0.12.0 [`501a71c`](https://github.com/gfargo/git-hash-art/commit/501a71c9ca8251d67141fa69b9ecaa62ae5f96c1)
 
 #### [0.11.0](https://github.com/gfargo/git-hash-art/compare/0.10.1...0.11.0)
 

package/dist/browser.js

@@ -2072,14 +2072,15 @@ function $e0f99502ff383dd8$export$909ab0580e273f19(style) {
     }
 }
 function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
-    const { fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, size: size, rotation: rotation } = config;
+    const { fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, size: size, rotation: rotation, activeShapes: activeShapes } = config;
     ctx.save();
     ctx.translate(x, y);
     ctx.rotate(rotation * Math.PI / 180);
     ctx.fillStyle = fillColor;
     ctx.strokeStyle = strokeColor;
     ctx.lineWidth = strokeWidth;
-    const drawFunction = (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)[shape];
+    const registry = activeShapes ?? (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5);
+    const drawFunction = registry[shape];
     if (drawFunction) {
         drawFunction(ctx, size);
         ctx.fill();
@@ -2589,7 +2590,8 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     } else ctx.fillStyle = fillColor;
     ctx.strokeStyle = strokeColor;
     ctx.lineWidth = strokeWidth;
-    const drawFunction = (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)[shape];
+    const registry = config.activeShapes ?? (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5);
+    const drawFunction = registry[shape];
     if (drawFunction) {
         drawFunction(ctx, size, {
             rng: rng
@@ -3453,6 +3455,26 @@ const $8286059160ee2e04$export$4343b39fe47bd82c = {
         ]
     }
 };
+function $8286059160ee2e04$export$90912290d628650f(name, partial) {
+    $8286059160ee2e04$export$4343b39fe47bd82c[name] = {
+        tier: partial?.tier ?? 2,
+        minSizeFraction: partial?.minSizeFraction ?? 0.05,
+        maxSizeFraction: partial?.maxSizeFraction ?? 1.0,
+        affinities: partial?.affinities ?? [
+            "circle",
+            "square"
+        ],
+        category: "procedural",
+        heroCandidate: partial?.heroCandidate ?? false,
+        bestStyles: partial?.bestStyles ?? [
+            "fill-and-stroke",
+            "watercolor"
+        ]
+    };
+}
+function $8286059160ee2e04$export$f4ca68bd046f15ae(name) {
+    delete $8286059160ee2e04$export$4343b39fe47bd82c[name];
+}
 function $8286059160ee2e04$export$4a95df8944b5033b(rng, shapeNames, archetypeName) {
     const available = shapeNames.filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s]);
     // Pick a seed shape — tier 1 shapes that are hero candidates
@@ -3642,7 +3664,14 @@ function $8286059160ee2e04$export$ab873bb6fb56c1a8(shapeName, layerStyle, rng) {
 
 
 /**
- * Configuration options for image generation.
+ * Draw function signature for custom shapes.
+ * The function should build a canvas path (moveTo/lineTo/arc/etc.)
+ * centered at the origin. The pipeline handles translate, rotate,
+ * fill, and stroke — your function just defines the geometry.
+ *
+ * @param ctx  - Canvas 2D rendering context (already translated to shape center)
+ * @param size - Bounding size in pixels
+ * @param rng  - Deterministic RNG seeded from the git hash — use this instead of Math.random()
  */ const $81c1b644006d48ec$export$c2f8e0cc249a8d8f = {
     width: 2048,
     height: 2048,
@@ -4582,6 +4611,15 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ...(0, $81c1b644006d48ec$export$c2f8e0cc249a8d8f),
         ...config
     };
+    const _dt = finalConfig._debugTiming;
+    const _t = _dt ? ()=>performance.now() : undefined;
+    let _p = _t ? _t() : 0;
+    function _mark(name) {
+        if (!_dt || !_t) return;
+        const now = _t();
+        _dt.phases[name] = now - _p;
+        _p = now;
+    }
     const rng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash));
     // ── 0. Select archetype — fundamentally different visual personality ──
     const archetype = (0, $68a238ccd77f2bcd$export$f1142fd7da4d6590)(rng);
@@ -4602,7 +4640,39 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     // ── 0b. Color hierarchy — dominant/secondary/accent weighting ──
     const colorHierarchy = (0, $b5a262d09b87e373$export$fabac4600b87056)(colors, rng);
     // ── 0c. Shape palette — curated shapes that work well together ──
-    const shapeNames = Object.keys((0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5));
+    // Merge custom shapes into a combined registry
+    const customShapeNames = [];
+    let activeShapes;
+    if (finalConfig.customShapes && Object.keys(finalConfig.customShapes).length > 0) {
+        activeShapes = {
+            ...(0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)
+        };
+        for (const [name, def] of Object.entries(finalConfig.customShapes)){
+            // Wrap CustomDrawFunction (ctx, size, rng) into DrawFunction (ctx, size, config?)
+            const customDraw = def.draw;
+            activeShapes[name] = (ctx, size, config)=>{
+                customDraw(ctx, size, config?.rng ?? Math.random);
+            };
+            // Register profile for affinity system (inlined to avoid ESM interop issues)
+            (0, $8286059160ee2e04$export$4343b39fe47bd82c)[name] = {
+                tier: def.profile?.tier ?? 2,
+                minSizeFraction: def.profile?.minSizeFraction ?? 0.05,
+                maxSizeFraction: def.profile?.maxSizeFraction ?? 1.0,
+                affinities: def.profile?.affinities ?? [
+                    "circle",
+                    "square"
+                ],
+                category: "procedural",
+                heroCandidate: def.profile?.heroCandidate ?? false,
+                bestStyles: def.profile?.bestStyles ?? [
+                    "fill-and-stroke",
+                    "watercolor"
+                ]
+            };
+            customShapeNames.push(name);
+        }
+    }
+    const shapeNames = Object.keys(activeShapes ?? (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5));
     const shapePalette = (0, $8286059160ee2e04$export$4a95df8944b5033b)(rng, shapeNames, archetype.name);
     // ── 0d. Color grading — unified tone for the whole image ───────
     const colorGrade = (0, $b5a262d09b87e373$export$6d1620b367f86f7a)(rng);
@@ -4615,12 +4685,14 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const adjustedMaxSize = maxShapeSize * scaleFactor;
     const cx = width / 2;
     const cy = height / 2;
+    _mark("0_setup");
     // ── 1. Background ──────────────────────────────────────────────
     const bgRadius = Math.hypot(cx, cy);
     $1f63dc64b5593c73$var$drawBackground(ctx, archetype.backgroundStyle, bgStart, bgEnd, width, height, cx, cy, bgRadius, rng, colors);
     // Gradient mesh overlay — 3-4 color control points for richer backgrounds
+    // Use source-over instead of soft-light for cheaper compositing
     const meshPoints = 3 + Math.floor(rng() * 2);
-    ctx.globalCompositeOperation = "soft-light";
+    ctx.globalAlpha = 1;
     for(let i = 0; i < meshPoints; i++){
         const mx = rng() * width;
         const my = rng() * height;
@@ -4629,95 +4701,103 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const grad = ctx.createRadialGradient(mx, my, 0, mx, my, mRadius);
         grad.addColorStop(0, (0, $b5a262d09b87e373$export$f2121afcad3d553f)(mColor, 0.08 + rng() * 0.06));
         grad.addColorStop(1, "rgba(0,0,0,0)");
-        ctx.globalAlpha = 1;
         ctx.fillStyle = grad;
-        ctx.fillRect(0, 0, width, height);
+        // Clip to gradient bounding box — avoids blending transparent pixels
+        const gx = Math.max(0, mx - mRadius);
+        const gy = Math.max(0, my - mRadius);
+        const gw = Math.min(width, mx + mRadius) - gx;
+        const gh = Math.min(height, my + mRadius) - gy;
+        ctx.fillRect(gx, gy, gw, gh);
     }
-    ctx.globalCompositeOperation = "source-over";
     // Compute average background luminance for contrast enforcement
     const bgLum = ((0, $b5a262d09b87e373$export$5c6e3c2b59b7fbbe)(bgStart) + (0, $b5a262d09b87e373$export$5c6e3c2b59b7fbbe)(bgEnd)) / 2;
     // ── 1b. Layered background — archetype-coherent shapes ─────────
+    // Use source-over with pre-multiplied alpha instead of soft-light
+    // for much cheaper compositing (soft-light requires per-pixel blend)
     const bgShapeCount = 3 + Math.floor(rng() * 4);
-    ctx.globalCompositeOperation = "soft-light";
     for(let i = 0; i < bgShapeCount; i++){
         const bx = rng() * width;
         const by = rng() * height;
         const bSize = width * 0.3 + rng() * width * 0.5;
         const bColor = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng);
-        ctx.globalAlpha = 0.03 + rng() * 0.05;
+        ctx.globalAlpha = (0.03 + rng() * 0.05) * 0.5; // halved to compensate for source-over vs soft-light
         ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(bColor, 0.15);
         ctx.beginPath();
         // Use archetype-appropriate background shapes
-        if (archetype.name === "geometric-precision" || archetype.name === "op-art") // Rectangular shapes for geometric archetypes
-        ctx.rect(bx - bSize / 2, by - bSize / 2, bSize, bSize * (0.5 + rng() * 0.5));
+        if (archetype.name === "geometric-precision" || archetype.name === "op-art") ctx.rect(bx - bSize / 2, by - bSize / 2, bSize, bSize * (0.5 + rng() * 0.5));
         else ctx.arc(bx, by, bSize / 2, 0, Math.PI * 2);
         ctx.fill();
     }
-    // Subtle concentric rings from center
+    // Subtle concentric rings from center — batched into single stroke
     const ringCount = 2 + Math.floor(rng() * 3);
     ctx.globalAlpha = 0.02 + rng() * 0.03;
     ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
     ctx.lineWidth = 1 * scaleFactor;
+    ctx.beginPath();
     for(let i = 1; i <= ringCount; i++){
         const r = Math.min(width, height) * 0.15 * i;
-        ctx.beginPath();
+        ctx.moveTo(cx + r, cy);
         ctx.arc(cx, cy, r, 0, Math.PI * 2);
-        ctx.stroke();
     }
-    ctx.globalCompositeOperation = "source-over";
+    ctx.stroke();
     // ── 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 — batched into a single path
-            const dotSpacing = Math.max(8, Math.min(width, height) * (0.015 + rng() * 0.015));
-            const dotR = dotSpacing * 0.08;
+            // Dot grid — use fillRect instead of arcs (much cheaper, no path building)
+            const dotSpacing = Math.max(12, Math.min(width, height) * (0.015 + rng() * 0.015));
+            const dotDiam = Math.max(1, Math.round(dotSpacing * 0.16));
             ctx.globalAlpha = patternOpacity;
             ctx.fillStyle = patternColor;
-            ctx.beginPath();
-            for(let px = 0; px < width; px += dotSpacing)for(let py = 0; py < height; py += dotSpacing){
-                ctx.moveTo(px + dotR, py);
-                ctx.arc(px, py, dotR, 0, Math.PI * 2);
+            let dotCount = 0;
+            for(let px = 0; px < width && dotCount < 2000; px += dotSpacing)for(let py = 0; py < height && dotCount < 2000; py += dotSpacing){
+                ctx.fillRect(px, py, dotDiam, dotDiam);
+                dotCount++;
             }
-            ctx.fill();
         } else if (bgPatternRoll < 0.4) {
-            // Diagonal lines — batched into a single path
-            const lineSpacing = Math.max(6, Math.min(width, height) * (0.02 + rng() * 0.02));
+            // Diagonal lines — batched into a single path, capped at 300 lines
+            const lineSpacing = Math.max(10, 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);
             ctx.beginPath();
-            for(let d = -diag; d < diag; d += lineSpacing){
+            let lineCount = 0;
+            for(let d = -diag; d < diag && lineCount < 300; d += lineSpacing){
                 ctx.moveTo(d, 0);
                 ctx.lineTo(d + height, height);
+                lineCount++;
             }
             ctx.stroke();
         } else {
-            // Tessellation — hexagonal grid, batched into a single path
-            const tessSize = Math.max(10, Math.min(width, height) * (0.025 + rng() * 0.02));
+            // Tessellation — hexagonal grid, capped at 500 hexagons
+            const tessSize = Math.max(15, 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;
+            // Pre-compute hex vertex offsets (avoid trig per vertex)
+            const hexVx = [];
+            const hexVy = [];
+            for(let s = 0; s < 6; s++){
+                const angle = Math.PI / 3 * s - Math.PI / 6;
+                hexVx.push(Math.cos(angle) * tessSize * 0.5);
+                hexVy.push(Math.sin(angle) * tessSize * 0.5);
+            }
             ctx.beginPath();
-            for(let row = 0; row * tessH < height + tessH; row++){
+            let hexCount = 0;
+            for(let row = 0; row * tessH < height + tessH && hexCount < 500; row++){
                 const offsetX = row % 2 * tessSize * 0.75;
-                for(let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5; col++){
+                for(let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5 && hexCount < 500; col++){
                     const hx = col * tessSize * 1.5 + offsetX;
                     const hy = row * tessH;
-                    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.moveTo(hx + hexVx[0], hy + hexVy[0]);
+                    for(let s = 1; s < 6; s++)ctx.lineTo(hx + hexVx[s], hy + hexVy[s]);
                     ctx.closePath();
+                    hexCount++;
                 }
             }
             ctx.stroke();
@@ -4725,6 +4805,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.restore();
     }
     ctx.globalCompositeOperation = "source-over";
+    _mark("1_background");
     // ── 2. Composition mode — archetype-aware selection ──────────────
     const compositionMode = rng() < 0.7 ? archetype.preferredCompositions[Math.floor(rng() * archetype.preferredCompositions.length)] : $1f63dc64b5593c73$var$ALL_COMPOSITION_MODES[Math.floor(rng() * $1f63dc64b5593c73$var$ALL_COMPOSITION_MODES.length)];
     const symRoll = rng();
@@ -4835,6 +4916,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         }
     }
     ctx.globalAlpha = 1;
+    _mark("2_3_composition_focal");
     // ── 4. Flow field — simplex noise for organic variation ─────────
     // Create a seeded simplex noise field (unique per hash)
     const noiseFieldRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 333));
@@ -4891,7 +4973,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             renderStyle: heroStyle,
             rng: rng,
             lightAngle: lightAngle,
-            scaleFactor: scaleFactor
+            scaleFactor: scaleFactor,
+            activeShapes: activeShapes
         });
         heroCenter = {
             x: heroFocal.x,
@@ -4911,6 +4994,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             shape: heroShape
         });
     }
+    _mark("4_flowfield_hero");
     // ── 5. Shape layers ────────────────────────────────────────────
     const maxLocalDensity = Math.ceil(shapesPerLayer * 0.15);
     // ── Complexity budget — caps total rendering work ──────────────
@@ -5093,7 +5177,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 renderStyle: finalRenderStyle,
                 rng: rng,
                 lightAngle: lightAngle,
-                scaleFactor: scaleFactor
+                scaleFactor: scaleFactor,
+                activeShapes: activeShapes
             };
             if (shouldMirror) {
                 (0, $e0f99502ff383dd8$export$8bd8bbd1a8e53689)(ctx, shape, finalX, finalY, {
@@ -5124,7 +5209,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                             rotation: rotation,
                             proportionType: "GOLDEN_RATIO",
                             renderStyle: "fill-only",
-                            rng: rng
+                            rng: rng,
+                            activeShapes: activeShapes
                         });
                     }
                     extrasSpent += glazePasses;
@@ -5164,7 +5250,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                             rotation: rotation + (e + 1) * 15,
                             proportionType: "GOLDEN_RATIO",
                             renderStyle: finalRenderStyle,
-                            rng: rng
+                            rng: rng,
+                            activeShapes: activeShapes
                         });
                         shapePositions.push({
                             x: echoX,
@@ -5211,7 +5298,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                         rotation: innerRot,
                         proportionType: "GOLDEN_RATIO",
                         renderStyle: innerStyle,
-                        rng: rng
+                        rng: rng,
+                        activeShapes: activeShapes
                     });
                     extrasSpent += $1f63dc64b5593c73$var$RENDER_STYLE_COST[innerStyle] ?? 1;
                 }
@@ -5258,7 +5346,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                             rotation: member.rotation + groupRotation * 180 / Math.PI,
                             proportionType: "GOLDEN_RATIO",
                             renderStyle: memberStyle,
-                            rng: rng
+                            rng: rng,
+                            activeShapes: activeShapes
                         });
                         shapePositions.push({
                             x: mx,
@@ -5312,7 +5401,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                             rotation: rotation + (r + 1) * 12,
                             proportionType: "GOLDEN_RATIO",
                             renderStyle: finalRenderStyle,
-                            rng: rng
+                            rng: rng,
+                            activeShapes: activeShapes
                         });
                         shapePositions.push({
                             x: rx,
@@ -5339,64 +5429,13 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     }
     // Reset blend mode for post-processing passes
     ctx.globalCompositeOperation = "source-over";
-    // ── 5g. Layered masking / cutout portals ───────────────────────
-    // ~18% of images get 1-3 portal windows that paint over foreground
-    // with a tinted background wash, creating a "peek through" effect.
-    if (rng() < 0.18 && shapePositions.length > 3) {
-        const portalCount = 1 + Math.floor(rng() * 2);
-        for(let p = 0; p < portalCount; p++){
-            // Pick a position biased toward placed shapes
-            const sourceShape = shapePositions[Math.floor(rng() * shapePositions.length)];
-            const portalX = sourceShape.x + (rng() - 0.5) * sourceShape.size * 0.5;
-            const portalY = sourceShape.y + (rng() - 0.5) * sourceShape.size * 0.5;
-            const portalSize = adjustedMaxSize * (0.15 + rng() * 0.25);
-            // Pick a portal shape from the palette
-            const portalShape = (0, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, portalSize / adjustedMaxSize);
-            const portalRotation = rng() * 360;
-            const portalAlpha = 0.6 + rng() * 0.35;
-            ctx.save();
-            ctx.translate(portalX, portalY);
-            ctx.rotate(portalRotation * Math.PI / 180);
-            // Step 1: Clip to the portal shape and fill with background wash
-            ctx.beginPath();
-            (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)[portalShape]?.(ctx, portalSize);
-            ctx.clip();
-            // Fill the clipped region with a radial gradient from background colors
-            const portalColor = (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(bgStart, rng, 15, 0.1);
-            const portalGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, portalSize);
-            portalGrad.addColorStop(0, portalColor);
-            portalGrad.addColorStop(1, bgEnd);
-            ctx.globalAlpha = portalAlpha;
-            ctx.fillStyle = portalGrad;
-            ctx.fillRect(-portalSize, -portalSize, portalSize * 2, portalSize * 2);
-            // Optional: subtle inner texture — a few tiny dots inside the portal
-            if (rng() < 0.5) {
-                const dotCount = 3 + Math.floor(rng() * 5);
-                ctx.globalAlpha = portalAlpha * 0.3;
-                ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), 0.2);
-                for(let d = 0; d < dotCount; d++){
-                    const dx = (rng() - 0.5) * portalSize * 1.4;
-                    const dy = (rng() - 0.5) * portalSize * 1.4;
-                    const dr = (1 + rng() * 3) * scaleFactor;
-                    ctx.beginPath();
-                    ctx.arc(dx, dy, dr, 0, Math.PI * 2);
-                    ctx.fill();
-                }
-            }
-            ctx.restore();
-            // Step 2: Draw a border ring around the portal (outside the clip)
-            ctx.save();
-            ctx.translate(portalX, portalY);
-            ctx.rotate(portalRotation * Math.PI / 180);
-            ctx.globalAlpha = 0.15 + rng() * 0.2;
-            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), 0.5);
-            ctx.lineWidth = (1.5 + rng() * 2.5) * scaleFactor;
-            ctx.beginPath();
-            (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)[portalShape]?.(ctx, portalSize * 1.06);
-            ctx.stroke();
-            ctx.restore();
-        }
+    if (_dt) {
+        _dt.shapeCount = shapePositions.length;
+        _dt.extraCount = extrasSpent;
     }
+    _mark("5_shape_layers");
+    // ── 5g. (Portal/cutout feature removed — replaced by custom shapes API) ──
+    _mark("5g_portals");
     // ── 6. Flow-line pass — variable color, branching, pressure ────
     // Optimized: collect all segments into width-quantized buckets, then
     // render each bucket as a single batched path.  This reduces
@@ -5522,6 +5561,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             ctx.stroke();
         }
     }
+    _mark("6_flow_lines");
     // ── 6b. Motion/energy lines — short directional bursts ─────────
     // Optimized: collect all burst segments, then batch by quantized alpha
     const energyArchetypes = [
@@ -5584,6 +5624,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             ctx.stroke();
         }
     }
+    _mark("6b_energy_lines");
     // ── 6c. Apply symmetry mirroring ─────────────────────────────────
     if (symmetryMode !== "none") {
         const canvas = ctx.canvas;
@@ -5604,60 +5645,25 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         }
         ctx.restore();
     }
-    // ── 7. Noise texture overlay — batched via ImageData ─────────────
-    // Optimized: cap density at large sizes (diminishing returns above ~2K dots),
-    // skip inner pixelScale loop when scale=1, use Uint32Array for faster writes.
+    _mark("6c_symmetry");
+    // ── 7. Noise texture overlay ─────────────────────────────────────
+    // With density capped at 2500 dots, direct fillRect calls are far cheaper
+    // than the getImageData/putImageData round-trip which copies the entire
+    // pixel buffer (4 × width × height bytes) twice.
     const noiseRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 777));
     const rawNoiseDensity = Math.floor(width * height / 800);
-    // Cap at 2500 dots — beyond this the visual effect is indistinguishable
-    // but getImageData/putImageData cost scales with canvas size
     const noiseDensity = Math.min(rawNoiseDensity, 2500);
-    try {
-        const imageData = ctx.getImageData(0, 0, width, height);
-        const data = imageData.data;
-        const pixelScale = Math.max(1, Math.round(scaleFactor));
-        if (pixelScale === 1) // Fast path — no inner loop, direct pixel write
-        // Pre-compute alpha blend as integer math (avoid float multiply per channel)
-        for(let i = 0; i < noiseDensity; i++){
-            const nx = Math.floor(noiseRng() * width);
-            const ny = Math.floor(noiseRng() * height);
-            const brightness = noiseRng() > 0.5 ? 255 : 0;
-            // srcA in range [0.01, 0.04] — multiply by 256 for fixed-point
-            const srcA256 = Math.round((0.01 + noiseRng() * 0.03) * 256);
-            const invA256 = 256 - srcA256;
-            const bSrc = brightness * srcA256; // pre-multiply brightness × alpha
-            const idx = ny * width + nx << 2;
-            data[idx] = data[idx] * invA256 + bSrc >> 8;
-            data[idx + 1] = data[idx + 1] * invA256 + bSrc >> 8;
-            data[idx + 2] = data[idx + 2] * invA256 + bSrc >> 8;
-        }
-        else for(let i = 0; i < noiseDensity; i++){
-            const nx = Math.floor(noiseRng() * width);
-            const ny = Math.floor(noiseRng() * height);
-            const brightness = noiseRng() > 0.5 ? 255 : 0;
-            const srcA256 = Math.round((0.01 + noiseRng() * 0.03) * 256);
-            const invA256 = 256 - srcA256;
-            const bSrc = brightness * srcA256;
-            for(let dy = 0; dy < pixelScale && ny + dy < height; dy++)for(let dx = 0; dx < pixelScale && nx + dx < width; dx++){
-                const idx = (ny + dy) * width + (nx + dx) << 2;
-                data[idx] = data[idx] * invA256 + bSrc >> 8;
-                data[idx + 1] = data[idx + 1] * invA256 + bSrc >> 8;
-                data[idx + 2] = data[idx + 2] * invA256 + bSrc >> 8;
-            }
-        }
-        ctx.putImageData(imageData, 0, 0);
-    } catch  {
-        // Fallback for environments where getImageData isn't available (e.g. some OffscreenCanvas)
-        for(let i = 0; i < noiseDensity; i++){
-            const nx = noiseRng() * width;
-            const ny = noiseRng() * height;
-            const brightness = noiseRng() > 0.5 ? 255 : 0;
-            const alpha = 0.01 + noiseRng() * 0.03;
-            ctx.globalAlpha = alpha;
-            ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
-            ctx.fillRect(nx, ny, 1 * scaleFactor, 1 * scaleFactor);
-        }
+    const pixelScale = Math.max(1, Math.round(scaleFactor));
+    for(let i = 0; i < noiseDensity; i++){
+        const nx = noiseRng() * width;
+        const ny = noiseRng() * height;
+        const brightness = noiseRng() > 0.5 ? 255 : 0;
+        const alpha = 0.01 + noiseRng() * 0.03;
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = `rgb(${brightness},${brightness},${brightness})`;
+        ctx.fillRect(nx, ny, pixelScale, pixelScale);
     }
+    _mark("7_noise_texture");
     // ── 8. Vignette — darken edges to draw the eye inward ───────────
     ctx.globalAlpha = 1;
     const vignetteStrength = 0.25 + rng() * 0.2;
@@ -5671,6 +5677,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     vigGrad.addColorStop(1, vignetteColor);
     ctx.fillStyle = vigGrad;
     ctx.fillRect(0, 0, width, height);
+    _mark("8_vignette");
     // ── 9. Organic connecting curves — proximity-aware ───────────────
     // Optimized: batch all curves into alpha-quantized groups to reduce
     // beginPath/stroke calls from O(numCurves) to O(alphaBuckets).
@@ -5729,6 +5736,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             ctx.stroke();
         }
     }
+    _mark("9_connecting_curves");
     // ── 10. Post-processing ────────────────────────────────────────
     // 10a. Color grading — unified tone across the whole image
     // Apply as a semi-transparent overlay in the grade hue
@@ -5788,6 +5796,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.fillRect(0, 0, width, height);
         ctx.globalCompositeOperation = "source-over";
     }
+    _mark("10_post_processing");
     // ── 10e. Generative borders — archetype-driven decorative frames ──
     {
         ctx.save();
@@ -5954,6 +5963,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         // Other archetypes: no border (intentional — not every image needs one)
         ctx.restore();
     }
+    _mark("10e_borders");
     // ── 11. Signature mark — placed in the least-dense corner ──────
     {
         const sigRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 42));
@@ -6021,6 +6031,9 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.restore();
     }
     ctx.globalAlpha = 1;
+    _mark("11_signature");
+    // Clean up custom shape profiles to avoid leaking into subsequent renders
+    for (const name of customShapeNames)delete (0, $8286059160ee2e04$export$4343b39fe47bd82c)[name];
 }