@zakkster/lite-ui-fx 1.2.0 → 1.4.0

package/UIFXRecipes.js

@@ -34,6 +34,20 @@ import { Random } from '@zakkster/lite-random';
 import { mountUIFX, UIType } from './UIFXController.js';
 
 
+// ---------------------------------------------------------
+//  SHARED COLD CONSTANTS (U3) -- built once at module load, never per frame
+// ---------------------------------------------------------
+
+// Focus-ring dash patterns: one shared array each, so a focused frame's
+// setLineDash() reuses them instead of allocating a fresh array (U-03).
+const DASH_FOCUS = [4, 3];
+const DASH_NONE = [];
+
+// Percentage readouts '0%'..'100%', precomputed so a value label is a const
+// lookup -- PCT[Math.round(st.val * 100)] -- not a per-frame template build.
+const PCT = Array.from({ length: 101 }, (_, i) => i + '%');
+
+
 // ---------------------------------------------------------
 //  SHARED HELPERS
 // ---------------------------------------------------------
@@ -57,34 +71,110 @@ function roundRect(ctx, x, y, w, h, r) {
 function drawFocusRing(ctx, w, h, r) {
     ctx.strokeStyle = 'rgba(110,231,182,.6)';
     ctx.lineWidth = 2;
-    ctx.setLineDash([4, 3]);
+    ctx.setLineDash(DASH_FOCUS);
     roundRect(ctx, -2, -2, w + 4, h + 4, r + 2);
     ctx.stroke();
-    ctx.setLineDash([]);
+    ctx.setLineDash(DASH_NONE);
 }
 
-/** Draw a state label so the user knows the current state. */
-function drawStateLabel(ctx, text, x, y, color) {
+/** Draw a state label so the user knows the current state. font defaults to the
+ *  historical literal, so an omitted font renders exactly as before. */
+function drawStateLabel(ctx, text, x, y, color, font) {
     ctx.fillStyle = color;
-    ctx.font = "500 9px 'JetBrains Mono',monospace";
+    ctx.font = font || "500 9px 'JetBrains Mono',monospace";
     ctx.textAlign = 'center';
     ctx.fillText(text, x, y);
 }
 
-function label(ctx, text, x, y, color = '#9999b8') {
-    ctx.fillStyle = color; ctx.font = "500 9px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.fillText(text, x, y);
+function label(ctx, text, x, y, color = '#9999b8', font) {
+    ctx.fillStyle = color; ctx.font = font || "500 9px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.fillText(text, x, y);
 }
 function focusRing(ctx, w, h, r) {
-    ctx.strokeStyle = 'rgba(110,231,182,.5)'; ctx.lineWidth = 2; ctx.setLineDash([4, 3]);
-    roundRect(ctx, -2, -2, w + 4, h + 4, r + 2); ctx.stroke(); ctx.setLineDash([]);
+    ctx.strokeStyle = 'rgba(110,231,182,.5)'; ctx.lineWidth = 2; ctx.setLineDash(DASH_FOCUS);
+    roundRect(ctx, -2, -2, w + 4, h + 4, r + 2); ctx.stroke(); ctx.setLineDash(DASH_NONE);
 }
 
 function rr(c,x,y,w,h,r){c.beginPath();c.moveTo(x+r,y);c.lineTo(x+w-r,y);c.arcTo(x+w,y,x+w,y+r,r);c.lineTo(x+w,y+h-r);c.arcTo(x+w,y+h,x+w-r,y+h,r);c.lineTo(x+r,y+h);c.arcTo(x,y+h,x,y+h-r,r);c.lineTo(x,y+r);c.arcTo(x,y,x+r,y,r);c.closePath()}
-function lbl(c,t,x,y,col='#9999b8'){c.fillStyle=col;c.font="500 9px 'JetBrains Mono',monospace";c.textAlign='center';c.fillText(t,x,y)}
-function fr(c,w,h,r){c.strokeStyle='rgba(110,231,182,.5)';c.lineWidth=2;c.setLineDash([4,3]);rr(c,-2,-2,w+4,h+4,r+2);c.stroke();c.setLineDash([])}
+function lbl(c,t,x,y,col='#9999b8',font){c.fillStyle=col;c.font=font||"500 9px 'JetBrains Mono',monospace";c.textAlign='center';c.fillText(t,x,y)}
+function fr(c,w,h,r){c.strokeStyle='rgba(110,231,182,.5)';c.lineWidth=2;c.setLineDash(DASH_FOCUS);rr(c,-2,-2,w+4,h+4,r+2);c.stroke();c.setLineDash(DASH_NONE)}
 const PI2=Math.PI*2;
 
 
+// ---------------------------------------------------------
+//  THEME RESOLUTION (U3b, decisions/0002) -- COLD, once per instance in the
+//  factory / init. The hot tick() reads only the const strings resolved here.
+// ---------------------------------------------------------
+
+/**
+ * Resolve a recipe palette. DEFAULT is a role map of the recipe's historical
+ * literals ({ accent, dim, surface, ...extras }), so a bare mount is
+ * byte-identical to 1.3.0. options overlay it: theme { light, mid, dark } maps to
+ * { accent, dim, surface }; colors[] overrides positionally over
+ * Object.keys(DEFAULT) (accent, dim, surface, extras...), applied AFTER theme so
+ * colors win. Returns a fresh per-instance object -- DEFAULT is never mutated.
+ */
+function resolveTheme(o, DEFAULT) {
+    const p = Object.assign({}, DEFAULT);
+    if (o) {
+        const t = o.theme;
+        if (t) {
+            // Prefix roles so a recipe with two muted variants (dim, dim2) or two
+            // accents (accent, accent2) maps them all from one theme anchor while
+            // its DEFAULT keeps the distinct literals for byte-parity.
+            for (const k in p) {
+                if (k.indexOf('accent') === 0) p[k] = t.light;
+                else if (k.indexOf('dim') === 0) p[k] = t.mid;
+                else if (k.indexOf('surface') === 0) p[k] = t.dark;
+            }
+        }
+        const c = o.colors;
+        if (c) {
+            const ks = Object.keys(DEFAULT);
+            for (let i = 0; i < c.length && i < ks.length; i++) {
+                if (c[i] != null) p[ks[i]] = c[i];
+            }
+        }
+    }
+    return p;
+}
+
+/** Hex (#rgb / #rrggbb) -> "r,g,b" for building rgba() ramps. Returns `def` for a
+ *  non-hex color (e.g. 'oklch(...)'), so a caller degrades gracefully rather than
+ *  emitting NaN channels. COLD. */
+function rgbTriplet(hex, def) {
+    if (typeof hex !== 'string' || hex[0] !== '#') return def;
+    let h = hex.slice(1);
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    if (h.length !== 6) return def;
+    const n = parseInt(h, 16);
+    if (!Number.isFinite(n)) return def;
+    return ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255);
+}
+
+/** Hex -> "rgba(r,g,b,a)". COLD and only ever called on the themed path -- a bare
+ *  mount keeps its historical rgba() literal, so this string's exact formatting is
+ *  never compared for byte-parity. Falls back to the input untouched for a non-hex
+ *  theme color, degrading a derived tint to the solid rather than emitting NaN. */
+function rgbaOf(hex, a) {
+    const t = rgbTriplet(hex, null);
+    return t === null ? hex : 'rgba(' + t + ',' + a + ')';
+}
+
+/** Resolve a recipe's visible canvas label: options.text, else the accessible
+ *  options.label, else the recipe default -- so a mount that sets only `label`
+ *  still drives the visible text (WCAG 2.5.3 label-in-name by construction). */
+function pickText(o, def) {
+    if (o) {
+        if (o.text != null) return o.text;
+        if (o.label != null && o.label !== '') return o.label;
+    }
+    return def;
+}
+
+/** Resolve a font string: options.font, else the recipe's historical literal. */
+function pickFont(o, def) { return (o && o.font) || def; }
+
+
 
 // ===========================================================
 //  TOGGLE RECIPES
@@ -95,7 +185,10 @@ const PI2=Math.PI*2;
  * On toggle, they explode outward then regroup at the new position.
  * Uses sunflower phyllotaxis for the packed formation.
  */
-export function SwarmToggle({ seed = 42, count = 150 } = {}) {
+export function SwarmToggle(o = {}) {
+    const { seed = 42, count = 150 } = o;
+    const P = resolveTheme(o, { accent: '#6ee7b6', dim: '#9999b8', dim2: '#8888aa' });
+    const onTint = (o.theme || o.colors) ? rgbaOf(P.accent, .2) : 'rgba(110,231,182,.2)';
     const rng = new Random(seed);
     const N = count;
     const px = new Float32Array(N), py = new Float32Array(N);
@@ -127,19 +220,19 @@ export function SwarmToggle({ seed = 42, count = 150 } = {}) {
 
         tick(ctx, dt, now, st) {
             // Track
-            ctx.fillStyle = st.toggled ? 'rgba(110,231,182,.2)' : 'rgba(255,255,255,.06)';
+            ctx.fillStyle = st.toggled ? onTint : 'rgba(255,255,255,.06)';
             roundRect(ctx, 0, 0, st.w, st.h, st.h / 2);
             ctx.fill();
 
             // State label
             drawStateLabel(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14,
-                st.toggled ? '#6ee7b6' : '#8888aa');
+                st.toggled ? P.accent : P.dim2);
 
             // Knob target position
             const tx = st.toggled ? st.w - 18 : 18;
 
             // Render particles (spring toward formation)
-            ctx.fillStyle = st.toggled ? '#6ee7b6' : '#9999b8';
+            ctx.fillStyle = st.toggled ? P.accent : P.dim;
             for (let i = 0; i < N; i++) {
                 vx[i] += ((tx + ox[i]) - px[i]) * 15 * dt;
                 vy[i] += ((st.h / 2 + oy[i]) - py[i]) * 15 * dt;
@@ -164,7 +257,9 @@ export function SwarmToggle({ seed = 42, count = 150 } = {}) {
  * Liquid Toggle -- Metaball-style stretching knob.
  * The knob elongates in the direction of motion, squashes perpendicular.
  */
-export function LiquidToggle() {
+export function LiquidToggle(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', dim: '#9999b8', dim2: '#8888aa' });
+    const onTint = (o.theme || o.colors) ? rgbaOf(P.accent, .2) : 'rgba(110,231,182,.2)';
     let knobX = 18;
 
     return {
@@ -174,19 +269,19 @@ export function LiquidToggle() {
             const stretch = Math.abs(knobX - tx) * 0.5;
 
             // Track
-            ctx.fillStyle = st.toggled ? 'rgba(110,231,182,.2)' : 'rgba(255,255,255,.06)';
+            ctx.fillStyle = st.toggled ? onTint : 'rgba(255,255,255,.06)';
             roundRect(ctx, 0, 0, st.w, st.h, st.h / 2);
             ctx.fill();
 
             // Knob (stretched ellipse)
-            ctx.fillStyle = st.toggled ? '#6ee7b6' : '#9999b8';
+            ctx.fillStyle = st.toggled ? P.accent : P.dim;
             ctx.beginPath();
             ctx.ellipse(knobX, st.h / 2, 14 + stretch, 14 - stretch * 0.2, 0, 0, Math.PI * 2);
             ctx.fill();
 
             // State label
             drawStateLabel(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14,
-                st.toggled ? '#6ee7b6' : '#8888aa');
+                st.toggled ? P.accent : P.dim2);
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, st.h / 2);
         },
@@ -197,44 +292,62 @@ export function LiquidToggle() {
 /**
  * Neon Pulse Toggle -- Expanding shockwave rings on toggle.
  */
-export function NeonPulseToggle() {
-    let rings = [];
+export function NeonPulseToggle(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#9999b8', dim2: '#8888aa' });
+    const onTint = (o.theme || o.colors) ? rgbaOf(P.accent, .2) : 'rgba(56,189,248,.2)';
+    // Fixed ring pool (dead when life <= 0) -- no push/splice on the hot path.
+    const RINGS = 8;
+    const ringR = new Float64Array(RINGS);
+    const ringLife = new Float64Array(RINGS);
+    const ringX = new Float64Array(RINGS);
     let knobX = 18;
+    let lastW = 64; // last track width, so onToggle (which gets no state) can
+    //                place a ring at the knob position derived from st.w (U-05).
+
+    function spawnRing(x) {
+        for (let i = 0; i < RINGS; i++) {
+            if (ringLife[i] <= 0) { ringR[i] = 14; ringLife[i] = 1; ringX[i] = x; return; }
+        }
+    }
 
     return {
         onToggle(checked) {
-            rings.push({ r: 14, life: 1, x: checked ? 46 : 18 });
+            spawnRing(checked ? lastW - 18 : 18);
         },
 
         tick(ctx, dt, now, st) {
+            lastW = st.w;
             knobX = lerp(knobX, st.toggled ? st.w - 18 : 18, dt * 15);
 
             // Track
-            ctx.fillStyle = st.toggled ? 'rgba(56,189,248,.2)' : 'rgba(255,255,255,.06)';
+            ctx.fillStyle = st.toggled ? onTint : 'rgba(255,255,255,.06)';
             roundRect(ctx, 0, 0, st.w, st.h, st.h / 2);
             ctx.fill();
 
-            // Shockwave rings
-            for (let i = rings.length - 1; i >= 0; i--) {
-                const r = rings[i];
-                r.r += 100 * dt;
-                r.life -= 2 * dt;
-                if (r.life <= 0) { rings.splice(i, 1); continue; }
-                ctx.strokeStyle = `rgba(56,189,248,${r.life})`;
-                ctx.lineWidth = 2;
+            // Shockwave rings -- const stroke color, per-ring alpha via globalAlpha
+            // (was `rgba(56,189,248,${life})` built per ring per frame).
+            ctx.strokeStyle = P.accent;
+            ctx.lineWidth = 2;
+            for (let i = 0; i < RINGS; i++) {
+                if (ringLife[i] <= 0) continue;
+                ringR[i] += 100 * dt;
+                ringLife[i] -= 2 * dt;
+                if (ringLife[i] <= 0) continue;
+                ctx.globalAlpha = ringLife[i];
                 ctx.beginPath();
-                ctx.arc(r.x, st.h / 2, r.r, 0, Math.PI * 2);
+                ctx.arc(ringX[i], st.h / 2, ringR[i], 0, Math.PI * 2);
                 ctx.stroke();
             }
+            ctx.globalAlpha = 1;
 
             // Knob
-            ctx.fillStyle = st.toggled ? '#38bdf8' : '#9999b8';
+            ctx.fillStyle = st.toggled ? P.accent : P.dim;
             ctx.beginPath();
             ctx.arc(knobX, st.h / 2, 14, 0, Math.PI * 2);
             ctx.fill();
 
             drawStateLabel(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14,
-                st.toggled ? '#38bdf8' : '#8888aa');
+                st.toggled ? P.accent : P.dim2);
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, st.h / 2);
         },
@@ -250,7 +363,11 @@ export function NeonPulseToggle() {
  * Magnetic Button -- The entire button follows the cursor with spring physics.
  * Squashes on click, springs back.
  */
-export function MagneticButton({ maxPull = 15 } = {}) {
+export function MagneticButton(o = {}) {
+    const { maxPull = 15 } = o;
+    const P = resolveTheme(o, { accent: '#a78bfa', surface: '#1e1e2f', dim: '#e2e2f0' });
+    const FONT = pickFont(o, "600 13px 'Space Grotesk',sans-serif");
+    const TXT = pickText(o, 'MAGNETIC');
     let bx = 0, by = 0, textScale = 1;
 
     return {
@@ -266,19 +383,19 @@ export function MagneticButton({ maxPull = 15 } = {}) {
             ctx.translate(bx, by);
 
             // Button body
-            ctx.fillStyle = st.hover ? '#1e1e2f' : 'rgba(255,255,255,.05)';
-            ctx.strokeStyle = st.hover ? '#a78bfa' : 'rgba(255,255,255,.1)';
+            ctx.fillStyle = st.hover ? P.surface : 'rgba(255,255,255,.05)';
+            ctx.strokeStyle = st.hover ? P.accent : 'rgba(255,255,255,.1)';
             ctx.lineWidth = 1;
             roundRect(ctx, 0, 0, st.w, st.h, 10);
             ctx.fill(); ctx.stroke();
 
             // Label
-            ctx.fillStyle = st.hover ? '#a78bfa' : '#e2e2f0';
-            ctx.font = "600 13px 'Space Grotesk',sans-serif";
+            ctx.fillStyle = st.hover ? P.accent : P.dim;
+            ctx.font = FONT;
             ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
             ctx.translate(st.w / 2, st.h / 2);
             ctx.scale(textScale, textScale);
-            ctx.fillText('MAGNETIC', 0, 0);
+            ctx.fillText(TXT, 0, 0);
 
             if (st.focused) {
                 ctx.setTransform(st.dpr, 0, 0, st.dpr, 0, 0);
@@ -293,9 +410,17 @@ export function MagneticButton({ maxPull = 15 } = {}) {
 /**
  * Shatter Button -- Click explodes into falling shards, reforms after 1.5s.
  */
-export function ShatterButton({ seed = 42 } = {}) {
+export function ShatterButton(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#ffffff', dim: '#e2e2f0' });
+    const shardColor = (o.theme || o.colors) ? rgbaOf(P.accent, .5) : 'rgba(255,255,255,.5)';
+    const FONT = pickFont(o, "600 13px 'Space Grotesk',sans-serif");
+    const TXT = pickText(o, 'SHATTER');
     const rng = new Random(seed);
-    let shards = [];
+    // Fixed shard pool (live flag) -- no push/splice on the hot path.
+    const SHARDS = 32;
+    const shard = [];
+    for (let i = 0; i < SHARDS; i++) shard[i] = { x: 0, y: 0, vx: 0, vy: 0, r: 0, vr: 0, sz: 0, live: false };
     let visible = true;
     let respawnTimer = 0;
 
@@ -304,13 +429,15 @@ export function ShatterButton({ seed = 42 } = {}) {
             if (!visible) return;
             visible = false;
             respawnTimer = 1.5;
-            for (let i = 0; i < 30; i++) {
-                shards.push({
-                    x: rng.range(0, st.w), y: rng.range(0, st.h),
-                    vx: rng.range(-150, 150), vy: rng.range(-150, 50),
-                    r: rng.range(0, 6), vr: rng.range(-5, 5),
-                    sz: rng.range(4, 12),
-                });
+            let n = 0;
+            for (let i = 0; i < SHARDS && n < 30; i++) {
+                const s = shard[i];
+                if (s.live) continue;
+                s.x = rng.range(0, st.w); s.y = rng.range(0, st.h);
+                s.vx = rng.range(-150, 150); s.vy = rng.range(-150, 50);
+                s.r = rng.range(0, 6); s.vr = rng.range(-5, 5);
+                s.sz = rng.range(4, 12); s.live = true;
+                n++;
             }
         },
 
@@ -324,18 +451,19 @@ export function ShatterButton({ seed = 42 } = {}) {
                 ctx.fillStyle = st.active ? 'rgba(255,255,255,.15)' : 'rgba(255,255,255,.08)';
                 roundRect(ctx, 0, 0, st.w, st.h, 10);
                 ctx.fill();
-                ctx.fillStyle = '#e2e2f0';
-                ctx.font = "600 13px 'Space Grotesk',sans-serif";
+                ctx.fillStyle = P.dim;
+                ctx.font = FONT;
                 ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-                ctx.fillText('SHATTER', st.w / 2, st.h / 2);
+                ctx.fillText(TXT, st.w / 2, st.h / 2);
 
                 if (st.focused) drawFocusRing(ctx, st.w, st.h, 10);
             }
 
-            // Falling shards
-            ctx.fillStyle = 'rgba(255,255,255,.5)';
-            for (let i = shards.length - 1; i >= 0; i--) {
-                const s = shards[i];
+            // Falling shards -- fixed pool
+            ctx.fillStyle = shardColor;
+            for (let i = 0; i < SHARDS; i++) {
+                const s = shard[i];
+                if (!s.live) continue;
                 s.vy += 400 * dt;
                 s.x += s.vx * dt; s.y += s.vy * dt;
                 s.r += s.vr * dt;
@@ -343,7 +471,7 @@ export function ShatterButton({ seed = 42 } = {}) {
                 ctx.translate(s.x, s.y); ctx.rotate(s.r);
                 ctx.fillRect(-s.sz / 2, -s.sz / 2, s.sz, s.sz);
                 ctx.restore();
-                if (s.y > st.h + 100) shards.splice(i, 1);
+                if (s.y > st.h + 100) s.live = false;
             }
         },
     };
@@ -353,24 +481,38 @@ export function ShatterButton({ seed = 42 } = {}) {
 /**
  * Confetti Button -- 3D tumbling confetti burst from click point.
  */
-export function ConfettiButton({ seed = 42, colors = ['#6ee7b6', '#38bdf8', '#a78bfa', '#fbbf24', '#f43f5e'] } = {}) {
+export function ConfettiButton(o = {}) {
+    const { seed = 42 } = o;
+    // `colors` is the confetti palette (legacy option, still honored); `theme`
+    // drives the crimson body and, absent colors, seeds the palette too.
+    const colors = o.colors ? o.colors
+        : (o.theme ? [o.theme.light, o.theme.mid, o.theme.dark] : ['#6ee7b6', '#38bdf8', '#a78bfa', '#fbbf24', '#f43f5e']);
+    const bodyColor = (o.theme && o.theme.light) || '#DC143C';
+    const FONT = pickFont(o, "600 13px 'Space Grotesk',sans-serif");
+    const TXT = pickText(o, 'CONFETTI');
     const rng = new Random(seed);
-    let conf = [];
+    // Fixed confetti pool (live flag) -- no push/splice on the hot path.
+    const CONF = 80;
+    const conf = [];
+    for (let i = 0; i < CONF; i++) conf[i] = { x: 0, y: 0, vx: 0, vy: 0, c: '#fff', w: 0, h: 0, rx: 0, ry: 0, vrx: 0, vry: 0, live: false };
     let pressScale = 1;
 
     return {
         onClick(x, y) {
             pressScale = 0.85;
-            for (let i = 0; i < 40; i++) {
+            let n = 0;
+            for (let i = 0; i < CONF && n < 40; i++) {
+                const c = conf[i];
+                if (c.live) continue;
                 const a = rng.range(Math.PI, Math.PI * 2);
                 const v = rng.range(100, 300);
-                conf.push({
-                    x, y, vx: Math.cos(a) * v, vy: Math.sin(a) * v,
-                    c: rng.pick(colors),
-                    w: rng.range(4, 8), h: rng.range(8, 14),
-                    rx: rng.range(0, Math.PI), ry: rng.range(0, Math.PI),
-                    vrx: rng.range(5, 15), vry: rng.range(5, 15),
-                });
+                c.x = x; c.y = y; c.vx = Math.cos(a) * v; c.vy = Math.sin(a) * v;
+                c.c = rng.pick(colors);
+                c.w = rng.range(4, 8); c.h = rng.range(8, 14);
+                c.rx = rng.range(0, Math.PI); c.ry = rng.range(0, Math.PI);
+                c.vrx = rng.range(5, 15); c.vry = rng.range(5, 15);
+                c.live = true;
+                n++;
             }
         },
 
@@ -382,17 +524,18 @@ export function ConfettiButton({ seed = 42, colors = ['#6ee7b6', '#38bdf8', '#a7
             ctx.translate(-st.w / 2, -st.h / 2);
 
             // Button body
-            ctx.fillStyle = '#DC143C';
+            ctx.fillStyle = bodyColor;
             roundRect(ctx, 0, 0, st.w, st.h, 10);
             ctx.fill();
             ctx.fillStyle = '#fff';
-            ctx.font = "600 13px 'Space Grotesk',sans-serif";
+            ctx.font = FONT;
             ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText('CONFETTI', st.w / 2, st.h / 2);
+            ctx.fillText(TXT, st.w / 2, st.h / 2);
 
-            // Tumbling confetti
-            for (let i = conf.length - 1; i >= 0; i--) {
+            // Tumbling confetti -- fixed pool
+            for (let i = 0; i < CONF; i++) {
                 const c = conf[i];
+                if (!c.live) continue;
                 c.vy += 300 * dt;
                 c.x += c.vx * dt; c.y += c.vy * dt;
                 c.rx += c.vrx * dt; c.ry += c.vry * dt;
@@ -402,7 +545,7 @@ export function ConfettiButton({ seed = 42, colors = ['#6ee7b6', '#38bdf8', '#a7
                 ctx.fillStyle = c.c;
                 ctx.fillRect(-c.w / 2, -c.h / 2, c.w, c.h);
                 ctx.restore();
-                if (c.y > st.h + 100) conf.splice(i, 1);
+                if (c.y > st.h + 100) c.live = false;
             }
 
             if (st.focused) {
@@ -418,37 +561,45 @@ export function ConfettiButton({ seed = 42, colors = ['#6ee7b6', '#38bdf8', '#a7
 /**
  * Glitch Button -- RGB channel split on hover. Random slice displacement.
  */
-export function GlitchButton({ seed = 42 } = {}) {
+export function GlitchButton(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#ff0055', accent2: '#00ffcc' });
+    const FONT = pickFont(o, "600 13px 'Space Grotesk',sans-serif");
+    const TXT = pickText(o, 'GLITCH');
     const rng = new Random(seed);
     let glitchIntensity = 0;
 
+    // Hoisted out of tick (was a per-frame arrow closure). Body alpha via
+    // globalAlpha (was two `rgba(...,${intensity})` templates); label at full.
+    function drawBase(ctx, st, ox, oy, color, alpha) {
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = color;
+        roundRect(ctx, ox, oy, st.w, st.h, 10);
+        ctx.fill();
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = '#fff';
+        ctx.font = FONT;
+        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+        ctx.fillText(TXT, st.w / 2 + ox, st.h / 2 + oy);
+    }
+
     return {
         tick(ctx, dt, now, st) {
             glitchIntensity = lerp(glitchIntensity, st.hover ? 1 : 0, dt * 10);
 
-            const drawBase = (ox, oy, color) => {
-                ctx.fillStyle = color;
-                roundRect(ctx, ox, oy, st.w, st.h, 10);
-                ctx.fill();
-                ctx.fillStyle = '#fff';
-                ctx.font = "600 13px 'Space Grotesk',sans-serif";
-                ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-                ctx.fillText('GLITCH', st.w / 2 + ox, st.h / 2 + oy);
-            };
-
             if (glitchIntensity > 0.01) {
                 ctx.globalCompositeOperation = 'screen';
                 const off = rng.range(2, 6) * glitchIntensity;
                 // Alternate between split and normal for flicker
                 if (rng.next() > 0.4) {
-                    drawBase(-off, 0, `rgba(255,0,85,${0.6 * glitchIntensity})`);
-                    drawBase(off, 0, `rgba(0,255,204,${0.6 * glitchIntensity})`);
+                    drawBase(ctx, st, -off, 0, P.accent, 0.6 * glitchIntensity);
+                    drawBase(ctx, st, off, 0, P.accent2, 0.6 * glitchIntensity);
                 } else {
-                    drawBase(0, 0, 'rgba(255,255,255,.1)');
+                    drawBase(ctx, st, 0, 0, 'rgba(255,255,255,.1)', 1);
                 }
                 ctx.globalCompositeOperation = 'source-over';
             } else {
-                drawBase(0, 0, 'rgba(255,255,255,.06)');
+                drawBase(ctx, st, 0, 0, 'rgba(255,255,255,.06)', 1);
             }
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, 10);
@@ -465,29 +616,41 @@ export function GlitchButton({ seed = 42 } = {}) {
  * Spark Slider -- Emits directional sparks based on drag velocity.
  * Sparks fly opposite to drag direction with motion-blur stretch.
  */
-export function SparkSlider({ seed = 42, color = '#fbbf24' } = {}) {
+export function SparkSlider(o = {}) {
+    const { seed = 42 } = o;
+    // `color` (legacy singular) seeds the default accent; theme/colors override it.
+    const P = resolveTheme(o, { accent: o.color || '#fbbf24', dim: '#9999b8' });
     const rng = new Random(seed);
-    let sparks = [];
+    // Fixed spark pool (life <= 0 == dead) -- no push/splice on the hot path.
+    const SPARKS = 64;
+    const spark = [];
+    for (let i = 0; i < SPARKS; i++) spark[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0 };
     let lastVal = 0.5;
+    let lastW = 200; // last track width, so onDrag (no state) spawns at the
+    //                 thumb position derived from st.w (was hardcoded val*200).
+    function spawn(val, dir) {
+        for (let i = 0; i < SPARKS; i++) {
+            const s = spark[i];
+            if (s.life <= 0) {
+                s.x = val * lastW; s.y = 14;
+                s.vx = -dir * rng.range(100, 300); s.vy = rng.range(-150, 50); s.life = 1;
+                return;
+            }
+        }
+    }
 
     return {
         onDrag(val) {
             const delta = val - lastVal;
             if (Math.abs(delta) > 0.001) {
                 const dir = Math.sign(delta);
-                for (let i = 0; i < 4; i++) {
-                    sparks.push({
-                        x: val * 200, y: 14,
-                        vx: -dir * rng.range(100, 300),
-                        vy: rng.range(-150, 50),
-                        life: 1,
-                    });
-                }
+                for (let i = 0; i < 4; i++) spawn(val, dir);
             }
             lastVal = val;
         },
 
         tick(ctx, dt, now, st) {
+            lastW = st.w;
             // Track background
             ctx.fillStyle = 'rgba(255,255,255,.08)';
             roundRect(ctx, 0, 12, st.w, 4, 2);
@@ -495,7 +658,7 @@ export function SparkSlider({ seed = 42, color = '#fbbf24' } = {}) {
 
             // Filled track
             const tx = st.val * st.w;
-            ctx.fillStyle = color;
+            ctx.fillStyle = P.accent;
             roundRect(ctx, 0, 12, tx, 4, 2);
             ctx.fill();
 
@@ -505,26 +668,28 @@ export function SparkSlider({ seed = 42, color = '#fbbf24' } = {}) {
             ctx.fill();
 
             // Value label
-            drawStateLabel(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10, '#9999b8');
+            drawStateLabel(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10, P.dim);
 
-            // Sparks
+            // Sparks -- fixed pool, themed color, alpha via globalAlpha
+            // (was `rgba(251,191,36,${life})` built per spark per frame).
             ctx.globalCompositeOperation = 'screen';
-            for (let i = sparks.length - 1; i >= 0; i--) {
-                const s = sparks[i];
+            ctx.fillStyle = P.accent;
+            for (let i = 0; i < SPARKS; i++) {
+                const s = spark[i];
+                if (s.life <= 0) continue;
                 s.vy += 400 * dt;
                 s.vx *= 0.95;
                 s.x += s.vx * dt; s.y += s.vy * dt;
                 s.life -= 2.0 * dt;
-                if (s.life <= 0) { sparks.splice(i, 1); continue; }
-
-                // Motion-blur stretch
-                ctx.fillStyle = `rgba(251,191,36,${s.life})`;
+                if (s.life <= 0) continue;
+                ctx.globalAlpha = s.life;
                 ctx.save();
                 ctx.translate(s.x, s.y);
                 ctx.rotate(Math.atan2(s.vy, s.vx));
                 ctx.fillRect(0, -1, Math.max(3, Math.abs(s.vx) * 0.05), 2);
                 ctx.restore();
             }
+            ctx.globalAlpha = 1;
             ctx.globalCompositeOperation = 'source-over';
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, 4);
@@ -537,7 +702,9 @@ export function SparkSlider({ seed = 42, color = '#fbbf24' } = {}) {
  * Cosmic Slider -- Thumb is a black hole that sucks in background dust.
  * Particles respawn when consumed.
  */
-export function CosmicSlider({ seed = 42, dustCount = 80 } = {}) {
+export function CosmicSlider(o = {}) {
+    const { seed = 42, dustCount = 80 } = o;
+    const P = resolveTheme(o, { accent: '#a78bfa', surface: '#000', dim: '#9999b8' });
     const rng = new Random(seed);
     const dust = [];
 
@@ -556,9 +723,11 @@ export function CosmicSlider({ seed = 42, dustCount = 80 } = {}) {
 
             const tx = st.val * st.w;
 
-            // Dust particles attracted to thumb
+            // Dust particles attracted to thumb (indexed loop -- for..of over an
+            // array can allocate an iterator on the hot path)
             ctx.fillStyle = '#fff';
-            for (const d of dust) {
+            for (let di = 0; di < dust.length; di++) {
+                const d = dust[di];
                 const dx = tx - d.x, dy = 14 - d.y;
                 const dist = Math.sqrt(dx * dx + dy * dy);
                 if (dist < 40) {
@@ -576,13 +745,13 @@ export function CosmicSlider({ seed = 42, dustCount = 80 } = {}) {
             }
 
             // Black hole thumb with glow
-            ctx.shadowBlur = 10; ctx.shadowColor = '#a78bfa';
-            ctx.fillStyle = '#000'; ctx.strokeStyle = '#a78bfa'; ctx.lineWidth = 2;
+            ctx.shadowBlur = 10; ctx.shadowColor = P.accent;
+            ctx.fillStyle = P.surface; ctx.strokeStyle = P.accent; ctx.lineWidth = 2;
             ctx.beginPath(); ctx.arc(tx, 14, 12, 0, Math.PI * 2);
             ctx.fill(); ctx.stroke();
             ctx.shadowBlur = 0;
 
-            drawStateLabel(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10, '#9999b8');
+            drawStateLabel(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10, P.dim);
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, 4);
         },
@@ -593,10 +762,21 @@ export function CosmicSlider({ seed = 42, dustCount = 80 } = {}) {
 /**
  * Laser Slider -- Energy beam traces the filled track. Pulsing plasma thumb.
  */
-export function LaserSlider() {
-    let pulseTime = 0;
+export function LaserSlider(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#9999b8' });
+    const REF = 100;          // gradient reference width; scaled to tx at paint
+    let pulseTime = 0, beam = null;
 
     return {
+        init(ctx) {
+            // Fixed-stop beam gradient built once (0..REF). Scaling the space to
+            // tx/REF at fill maps it to 0..tx with the white tip at the thumb --
+            // no per-frame createLinearGradient.
+            beam = ctx.createLinearGradient(0, 0, REF, 0);
+            beam.addColorStop(0, 'transparent');
+            beam.addColorStop(0.8, P.accent);
+            beam.addColorStop(1, '#fff');
+        },
         tick(ctx, dt, now, st) {
             pulseTime += dt * 10;
 
@@ -607,26 +787,26 @@ export function LaserSlider() {
 
             const tx = st.val * st.w;
 
-            // Laser beam gradient
+            // Laser beam (gradient from init, scaled to 0..tx)
             if (tx > 2) {
-                const g = ctx.createLinearGradient(0, 0, tx, 0);
-                g.addColorStop(0, 'transparent');
-                g.addColorStop(0.8, '#38bdf8');
-                g.addColorStop(1, '#fff');
-                ctx.fillStyle = g;
-                ctx.shadowBlur = 10; ctx.shadowColor = '#38bdf8';
-                roundRect(ctx, 0, 12, tx, 4, 2);
+                ctx.save();
+                ctx.scale(tx / REF, 1);
+                ctx.fillStyle = beam || P.accent;
+                ctx.shadowBlur = 10; ctx.shadowColor = P.accent;
+                roundRect(ctx, 0, 12, REF, 4, 2);
                 ctx.fill();
+                ctx.restore();
             }
 
-            // Plasma thumb (pulsing)
+            // Plasma thumb (pulsing) -- keep the glow the beam left on
+            ctx.shadowBlur = 10; ctx.shadowColor = P.accent;
             ctx.fillStyle = '#fff';
             ctx.beginPath();
             ctx.arc(tx, 14, 8 + Math.sin(pulseTime) * 2, 0, Math.PI * 2);
             ctx.fill();
             ctx.shadowBlur = 0;
 
-            drawStateLabel(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10, '#9999b8');
+            drawStateLabel(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10, P.dim);
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, 4);
         },
@@ -639,7 +819,11 @@ export function LaserSlider() {
 // ===========================================================
 
 /** 1. Pendulum Toggle -- The knob swings like a pendulum with overshoot. */
-export function PendulumToggle() {
+export function PendulumToggle(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', dim: '#9999b8', dim2: '#8888aa' });
+    const themed = !!(o.theme || o.colors);
+    const onTint = themed ? rgbaOf(P.accent, .2) : 'rgba(110,231,182,.2)';
+    const strokeOn = themed ? rgbaOf(P.accent, .3) : 'rgba(110,231,182,.3)';
     let angle = -0.4, velocity = 0;
     const STIFFNESS = 12, DAMPING = 3.5;
     return {
@@ -650,29 +834,44 @@ export function PendulumToggle() {
             velocity *= (1 - DAMPING * dt);
             angle += velocity * dt;
 
-            ctx.fillStyle = st.toggled ? 'rgba(110,231,182,.2)' : 'rgba(255,255,255,.06)';
+            ctx.fillStyle = st.toggled ? onTint : 'rgba(255,255,255,.06)';
             roundRect(ctx, 0, 0, st.w, st.h, st.h / 2); ctx.fill();
 
             const cx = st.w / 2, cy = -10, len = st.h / 2 + 14;
             const bx = cx + Math.sin(angle) * len, by = cy + Math.cos(angle) * len;
 
-            ctx.strokeStyle = st.toggled ? 'rgba(110,231,182,.3)' : 'rgba(255,255,255,.08)';
+            ctx.strokeStyle = st.toggled ? strokeOn : 'rgba(255,255,255,.08)';
             ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(bx, by); ctx.stroke();
-            ctx.fillStyle = st.toggled ? '#6ee7b6' : '#9999b8';
+            ctx.fillStyle = st.toggled ? P.accent : P.dim;
             ctx.beginPath(); ctx.arc(bx, by, 12, 0, Math.PI * 2); ctx.fill();
-            label(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14, st.toggled ? '#6ee7b6' : '#8888aa');
+            label(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14, st.toggled ? P.accent : P.dim2);
             if (st.focused) focusRing(ctx, st.w, st.h, st.h / 2);
         },
     };
 }
 
 /** 2. Circuit Toggle -- Electricity flows through a circuit path when ON. */
-export function CircuitToggle({ seed = 42 } = {}) {
+export function CircuitToggle(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#22d3ee', dim: '#9999b8', dim2: '#8888aa' });
     const rng = new Random(seed);
-    let sparks = [], knobX = 18, flowT = 0;
+    // Fixed spark pool (life <= 0 == dead) -- no push/splice on the hot path.
+    const SPARKS = 16;
+    const spark = [];
+    for (let i = 0; i < SPARKS; i++) spark[i] = { t: 0, life: 0, speed: 0 };
+    const DASH_FLOW = [4, 4]; // one shared dash array, reused every frame
+    let knobX = 18, flowT = 0;
+
+    function spawn(t) {
+        for (let i = 0; i < SPARKS; i++) {
+            const s = spark[i];
+            if (s.life <= 0) { s.t = t; s.life = 1; s.speed = rng.range(0.3, 0.8); return; }
+        }
+    }
+
     return {
         onToggle(checked) {
-            if (checked) for (let i = 0; i < 8; i++) sparks.push({ t: rng.range(0, 1), life: 1, speed: rng.range(0.3, 0.8) });
+            if (checked) for (let i = 0; i < 8; i++) spawn(rng.range(0, 1));
         },
         tick(ctx, dt, now, st) {
             knobX = lerp(knobX, st.toggled ? st.w - 18 : 18, dt * 12);
@@ -682,37 +881,45 @@ export function CircuitToggle({ seed = 42 } = {}) {
             roundRect(ctx, 0, 0, st.w, st.h, st.h / 2); ctx.fill();
 
             // Circuit path
-            ctx.strokeStyle = st.toggled ? '#22d3ee' : 'rgba(255,255,255,.06)';
-            ctx.lineWidth = 2; ctx.setLineDash([4, 4]); ctx.lineDashOffset = -flowT * 16;
+            ctx.strokeStyle = st.toggled ? P.accent : 'rgba(255,255,255,.06)';
+            ctx.lineWidth = 2; ctx.setLineDash(DASH_FLOW); ctx.lineDashOffset = -flowT * 16;
             ctx.beginPath(); ctx.moveTo(8, st.h / 2); ctx.lineTo(st.w - 8, st.h / 2); ctx.stroke();
-            ctx.setLineDash([]); ctx.lineDashOffset = 0;
+            ctx.setLineDash(DASH_NONE); ctx.lineDashOffset = 0;
 
-            // Flowing sparks
+            // Flowing sparks -- fixed pool, per-spark alpha via globalAlpha
             if (st.toggled) {
-                ctx.fillStyle = '#22d3ee';
-                for (let i = sparks.length - 1; i >= 0; i--) {
-                    const s = sparks[i];
+                ctx.fillStyle = P.accent;
+                let alive = 0;
+                for (let i = 0; i < SPARKS; i++) {
+                    const s = spark[i];
+                    if (s.life <= 0) continue;
                     s.t += s.speed * dt; s.life -= dt * 0.5;
-                    if (s.life <= 0 || s.t > 1) { sparks.splice(i, 1); continue; }
+                    if (s.life <= 0 || s.t > 1) { s.life = 0; continue; }
+                    alive++;
                     const sx = 8 + s.t * (st.w - 16);
                     ctx.globalAlpha = s.life;
                     ctx.beginPath(); ctx.arc(sx, st.h / 2, 2, 0, Math.PI * 2); ctx.fill();
                 }
                 ctx.globalAlpha = 1;
                 // Continuous spawn
-                if (sparks.length < 12) sparks.push({ t: 0, life: 1, speed: rng.range(0.3, 0.8) });
+                if (alive < 12) spawn(0);
             }
 
-            ctx.fillStyle = st.toggled ? '#22d3ee' : '#9999b8';
+            ctx.fillStyle = st.toggled ? P.accent : P.dim;
             ctx.beginPath(); ctx.arc(knobX, st.h / 2, 12, 0, Math.PI * 2); ctx.fill();
-            label(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14, st.toggled ? '#22d3ee' : '#8888aa');
+            label(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14, st.toggled ? P.accent : P.dim2);
             if (st.focused) focusRing(ctx, st.w, st.h, st.h / 2);
         },
     };
 }
 
 /** 3. Lightning Toggle -- Electric arc between endpoints. */
-export function LightningToggle({ seed = 42 } = {}) {
+export function LightningToggle(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#fbbf24', dim: '#9999b8', dim2: '#8888aa' });
+    const themed = !!(o.theme || o.colors);
+    const onTint = themed ? rgbaOf(P.accent, .15) : 'rgba(251,191,36,.15)';
+    const arcColor = themed ? rgbaOf(P.accent, .7) : 'rgba(251,191,36,.7)';
     const rng = new Random(seed);
     let knobX = 18, arcTime = 0;
     function bolt(ctx, x1, y1, x2, y2, depth) {
@@ -727,27 +934,28 @@ export function LightningToggle({ seed = 42 } = {}) {
             knobX = lerp(knobX, st.toggled ? st.w - 18 : 18, dt * 14);
             arcTime += dt;
 
-            ctx.fillStyle = st.toggled ? 'rgba(251,191,36,.15)' : 'rgba(255,255,255,.04)';
+            ctx.fillStyle = st.toggled ? onTint : 'rgba(255,255,255,.04)';
             roundRect(ctx, 0, 0, st.w, st.h, st.h / 2); ctx.fill();
 
             if (st.toggled && ((arcTime * 8) | 0) % 3 !== 0) {
                 rng.reset(((now / 80) | 0) * 7 + 1);
-                ctx.strokeStyle = 'rgba(251,191,36,.7)'; ctx.lineWidth = 1.5;
+                ctx.strokeStyle = arcColor; ctx.lineWidth = 1.5;
                 ctx.beginPath(); ctx.moveTo(8, st.h / 2); bolt(ctx, 8, st.h / 2, st.w - 8, st.h / 2, 3); ctx.stroke();
                 ctx.strokeStyle = 'rgba(255,255,255,.3)'; ctx.lineWidth = 0.5;
                 ctx.beginPath(); ctx.moveTo(8, st.h / 2); bolt(ctx, 8, st.h / 2, st.w - 8, st.h / 2, 3); ctx.stroke();
             }
 
-            ctx.fillStyle = st.toggled ? '#fbbf24' : '#9999b8';
+            ctx.fillStyle = st.toggled ? P.accent : P.dim;
             ctx.beginPath(); ctx.arc(knobX, st.h / 2, 12, 0, Math.PI * 2); ctx.fill();
-            label(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14, st.toggled ? '#fbbf24' : '#8888aa');
+            label(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14, st.toggled ? P.accent : P.dim2);
             if (st.focused) focusRing(ctx, st.w, st.h, st.h / 2);
         },
     };
 }
 
 /** 4. DNA Toggle -- Double helix wraps around the track. */
-export function DNAToggle() {
+export function DNAToggle(o = {}) {
+    const P = resolveTheme(o, { accent: '#a78bfa', accent2: '#f472b6', accent3: '#c084fc', dim: '#9999b8', dim2: '#8888aa' });
     let knobX = 18, phase = 0;
     return {
         tick(ctx, dt, now, st) {
@@ -762,19 +970,29 @@ export function DNAToggle() {
                 const t = i / 20, x = 6 + t * (st.w - 12);
                 const y1 = cy + Math.sin(phase + t * Math.PI * 3) * 8;
                 const y2 = cy - Math.sin(phase + t * Math.PI * 3) * 8;
-                ctx.fillStyle = st.toggled ? `rgba(167,139,250,${0.3 + Math.sin(phase + t * 6) * 0.2})` : 'rgba(255,255,255,.08)';
-                ctx.beginPath(); ctx.arc(x, y1, 2, 0, Math.PI * 2); ctx.fill();
-                ctx.fillStyle = st.toggled ? `rgba(244,114,182,${0.3 + Math.cos(phase + t * 6) * 0.2})` : 'rgba(255,255,255,.06)';
-                ctx.beginPath(); ctx.arc(x, y2, 2, 0, Math.PI * 2); ctx.fill();
+                // Const strand colors, per-dot alpha via globalAlpha (was two
+                // `rgba(...,${...})` templates built per dot per frame).
+                if (st.toggled) {
+                    ctx.fillStyle = P.accent; ctx.globalAlpha = 0.3 + Math.sin(phase + t * 6) * 0.2;
+                    ctx.beginPath(); ctx.arc(x, y1, 2, 0, Math.PI * 2); ctx.fill();
+                    ctx.fillStyle = P.accent2; ctx.globalAlpha = 0.3 + Math.cos(phase + t * 6) * 0.2;
+                    ctx.beginPath(); ctx.arc(x, y2, 2, 0, Math.PI * 2); ctx.fill();
+                    ctx.globalAlpha = 1;
+                } else {
+                    ctx.fillStyle = 'rgba(255,255,255,.08)';
+                    ctx.beginPath(); ctx.arc(x, y1, 2, 0, Math.PI * 2); ctx.fill();
+                    ctx.fillStyle = 'rgba(255,255,255,.06)';
+                    ctx.beginPath(); ctx.arc(x, y2, 2, 0, Math.PI * 2); ctx.fill();
+                }
                 if (i % 3 === 0) {
                     ctx.strokeStyle = 'rgba(255,255,255,.04)'; ctx.lineWidth = 0.5;
                     ctx.beginPath(); ctx.moveTo(x, y1); ctx.lineTo(x, y2); ctx.stroke();
                 }
             }
 
-            ctx.fillStyle = st.toggled ? '#c084fc' : '#9999b8';
+            ctx.fillStyle = st.toggled ? P.accent3 : P.dim;
             ctx.beginPath(); ctx.arc(knobX, cy, 12, 0, Math.PI * 2); ctx.fill();
-            label(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14, st.toggled ? '#c084fc' : '#8888aa');
+            label(ctx, st.toggled ? 'ON' : 'OFF', st.w / 2, st.h + 14, st.toggled ? P.accent3 : P.dim2);
             if (st.focused) focusRing(ctx, st.w, st.h, st.h / 2);
         },
     };
@@ -786,28 +1004,44 @@ export function DNAToggle() {
 // ===========================================================
 
 /** 5. Heartbeat Button -- Heart icon pumps with particle burst on click. */
-export function HeartbeatButton({ seed = 42 } = {}) {
+export function HeartbeatButton(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#DC143C', accent2: '#ff3c64' });
+    const themed = !!(o.theme || o.colors);
+    const tintOn = themed ? rgbaOf(P.accent, .2) : 'rgba(220,20,60,.2)';
+    const tintOff = themed ? rgbaOf(P.accent, .08) : 'rgba(220,20,60,.08)';
     const rng = new Random(seed);
-    let scale = 1, particles = [], beatPhase = 0;
+    // Fixed particle pool (life <= 0 == dead) -- no push/splice on the hot path.
+    const PARTS = 32;
+    const part = [];
+    for (let i = 0; i < PARTS; i++) part[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0 };
+    let scale = 1, beatPhase = 0;
+    function spawn(x, y) {
+        for (let i = 0; i < PARTS; i++) {
+            const p = part[i];
+            if (p.life <= 0) {
+                const a = rng.range(0, Math.PI * 2), v = rng.range(40, 120);
+                p.x = x; p.y = y; p.vx = Math.cos(a) * v; p.vy = Math.sin(a) * v; p.life = 1;
+                return;
+            }
+        }
+    }
     return {
         onClick(x, y) {
             scale = 1.3;
-            for (let i = 0; i < 12; i++) {
-                const a = rng.range(0, Math.PI * 2), v = rng.range(40, 120);
-                particles.push({ x: x || 80, y: y || 24, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life: 1 });
-            }
+            for (let i = 0; i < 12; i++) spawn(x || 80, y || 24);
         },
         tick(ctx, dt, now, st) {
             scale = lerp(scale, 1, dt * 8);
             beatPhase += dt * 5;
             const pulse = 1 + Math.sin(beatPhase) * 0.03;
 
-            ctx.fillStyle = st.active ? 'rgba(220,20,60,.2)' : 'rgba(220,20,60,.08)';
+            ctx.fillStyle = st.active ? tintOn : tintOff;
             roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
 
             // Heart shape
             ctx.save(); ctx.translate(st.w / 2, st.h / 2); ctx.scale(scale * pulse, scale * pulse);
-            ctx.fillStyle = '#DC143C';
+            ctx.fillStyle = P.accent;
             ctx.beginPath();
             ctx.moveTo(0, 4); ctx.bezierCurveTo(-10, -6, -20, -2, -20, 4);
             ctx.bezierCurveTo(-20, 14, 0, 20, 0, 20);
@@ -815,15 +1049,18 @@ export function HeartbeatButton({ seed = 42 } = {}) {
             ctx.bezierCurveTo(20, -2, 10, -6, 0, 4);
             ctx.fill(); ctx.restore();
 
-            // Particles
+            // Particles -- fixed pool, const color, alpha via globalAlpha
             ctx.globalCompositeOperation = 'screen';
-            for (let i = particles.length - 1; i >= 0; i--) {
-                const p = particles[i];
+            ctx.fillStyle = P.accent2;
+            for (let i = 0; i < PARTS; i++) {
+                const p = part[i];
+                if (p.life <= 0) continue;
                 p.x += p.vx * dt; p.y += p.vy * dt; p.life -= 2 * dt;
-                if (p.life <= 0) { particles.splice(i, 1); continue; }
-                ctx.fillStyle = `rgba(255,60,100,${p.life})`;
+                if (p.life <= 0) continue;
+                ctx.globalAlpha = p.life;
                 ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2); ctx.fill();
             }
+            ctx.globalAlpha = 1;
             ctx.globalCompositeOperation = 'source-over';
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
         },
@@ -831,7 +1068,18 @@ export function HeartbeatButton({ seed = 42 } = {}) {
 }
 
 /** 6. Breathing Button -- Inhale/exhale pulse with particle halo. */
-export function BreathingButton() {
+export function BreathingButton(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6' });
+    const RGB = (o.theme || o.colors) ? rgbTriplet(P.accent, '110,231,182') : '110,231,182';
+    const FONT = pickFont(o, "600 12px 'Space Grotesk',sans-serif");
+    const TXT = pickText(o, 'BREATHE');
+    // Alpha-graded accent LUT (quantized alpha) built once, so the pulsing glow is
+    // a const-string lookup instead of three `rgba(...,${...})` templates per
+    // frame. shadowColor's alpha is not globalAlpha, so a LUT (not globalAlpha) is
+    // the zero-alloc fit here. RGB defaults to the historical green for byte-parity.
+    const GREEN = [];
+    for (let i = 0; i <= 64; i++) GREEN[i] = 'rgba(' + RGB + ',' + (i / 64).toFixed(3) + ')';
+    function greenA(a) { const i = a <= 0 ? 0 : a >= 1 ? 64 : (a * 64) | 0; return GREEN[i]; }
     let phase = 0;
     return {
         tick(ctx, dt, now, st) {
@@ -840,59 +1088,84 @@ export function BreathingButton() {
             const radius = 4 + breath * 6;
 
             // Outer glow
-            ctx.shadowBlur = 10 + breath * 15; ctx.shadowColor = `rgba(110,231,182,${0.2 + breath * 0.3})`;
-            ctx.fillStyle = `rgba(110,231,182,${0.05 + breath * 0.08})`;
+            ctx.shadowBlur = 10 + breath * 15; ctx.shadowColor = greenA(0.2 + breath * 0.3);
+            ctx.fillStyle = greenA(0.05 + breath * 0.08);
             roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
             ctx.shadowBlur = 0;
 
             // Halo ring
-            ctx.strokeStyle = `rgba(110,231,182,${0.1 + breath * 0.2})`;
+            ctx.strokeStyle = greenA(0.1 + breath * 0.2);
             ctx.lineWidth = 1;
             ctx.beginPath(); ctx.arc(st.w / 2, st.h / 2, st.w / 2 + radius, 0, Math.PI * 2); ctx.stroke();
 
-            ctx.fillStyle = '#6ee7b6';
-            ctx.font = "600 12px 'Space Grotesk',sans-serif"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText('BREATHE', st.w / 2, st.h / 2);
+            ctx.fillStyle = P.accent;
+            ctx.font = FONT; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+            ctx.fillText(TXT, st.w / 2, st.h / 2);
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
         },
     };
 }
 
 /** 7. Ink Splash Button -- Calligraphy ink splatter on click. */
-export function InkSplashButton({ seed = 42 } = {}) {
+export function InkSplashButton(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#1e1e32', dim: '#e2e2f0' });
+    const FONT = pickFont(o, "600 13px 'Space Grotesk',sans-serif");
+    const TXT = pickText(o, 'INK');
     const rng = new Random(seed);
-    let splats = [], pressScale = 1;
+    // Fixed splat pool (life <= 0 == dead).
+    const SPLATS = 32;
+    const splat = [];
+    for (let i = 0; i < SPLATS; i++) splat[i] = { x: 0, y: 0, r: 0, life: 0 };
+    let pressScale = 1;
+    function spawn(cx, cy) {
+        for (let i = 0; i < SPLATS; i++) {
+            const s = splat[i];
+            if (s.life <= 0) {
+                const a = rng.range(0, Math.PI * 2), d = rng.range(5, 35);
+                s.x = cx + Math.cos(a) * d; s.y = cy + Math.sin(a) * d; s.r = rng.range(2, 8); s.life = 1;
+                return;
+            }
+        }
+    }
     return {
         onClick(x, y) {
             pressScale = 0.88;
             const cx = x || 80, cy = y || 24;
-            for (let i = 0; i < 20; i++) {
-                const a = rng.range(0, Math.PI * 2), d = rng.range(5, 35);
-                splats.push({ x: cx + Math.cos(a) * d, y: cy + Math.sin(a) * d, r: rng.range(2, 8), life: 1 });
-            }
+            for (let i = 0; i < 20; i++) spawn(cx, cy);
         },
         tick(ctx, dt, now, st) {
             pressScale = lerp(pressScale, 1, dt * 8);
             ctx.save(); ctx.translate(st.w / 2, st.h / 2); ctx.scale(pressScale, pressScale); ctx.translate(-st.w / 2, -st.h / 2);
 
             ctx.fillStyle = 'rgba(255,255,255,.06)'; roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
-            ctx.fillStyle = '#e2e2f0'; ctx.font = "600 13px 'Space Grotesk',sans-serif"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText('INK', st.w / 2, st.h / 2);
+            ctx.fillStyle = P.dim; ctx.font = FONT; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+            ctx.fillText(TXT, st.w / 2, st.h / 2);
             ctx.restore();
 
-            for (let i = splats.length - 1; i >= 0; i--) {
-                const s = splats[i]; s.life -= 1.5 * dt;
-                if (s.life <= 0) { splats.splice(i, 1); continue; }
-                ctx.fillStyle = `rgba(30,30,50,${s.life * 0.7})`;
+            // Splats -- fixed pool, const color, alpha via globalAlpha
+            ctx.fillStyle = P.accent;
+            for (let i = 0; i < SPLATS; i++) {
+                const s = splat[i];
+                if (s.life <= 0) continue;
+                s.life -= 1.5 * dt;
+                if (s.life <= 0) continue;
+                ctx.globalAlpha = s.life * 0.7;
                 ctx.beginPath(); ctx.arc(s.x, s.y, s.r * easeOut(1 - s.life), 0, Math.PI * 2); ctx.fill();
             }
+            ctx.globalAlpha = 1;
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
         },
     };
 }
 
 /** 8. Pixel Dissolve Button -- Hover breaks into floating pixels, reforms on leave. */
-export function PixelDissolveButton({ seed = 42, cols = 16, rows = 5 } = {}) {
+export function PixelDissolveButton(o = {}) {
+    const { seed = 42, cols = 16, rows = 5 } = o;
+    const P = resolveTheme(o, { accent: '#a78bfa', dim: '#e2e2f0' });
+    const hoverTint = (o.theme || o.colors) ? rgbaOf(P.accent, .4) : 'rgba(167,139,250,.4)';
+    const FONT = pickFont(o, "600 12px 'Space Grotesk',sans-serif");
+    const TXT = pickText(o, 'DISSOLVE');
     const rng = new Random(seed);
     const N = cols * rows;
     const ox = new Float32Array(N), oy = new Float32Array(N);
@@ -913,7 +1186,7 @@ export function PixelDissolveButton({ seed = 42, cols = 16, rows = 5 } = {}) {
         tick(ctx, dt, now, st) {
             dissolveT = lerp(dissolveT, st.hover ? 1 : 0, dt * 6);
 
-            ctx.fillStyle = st.hover ? 'rgba(167,139,250,.4)' : 'rgba(255,255,255,.12)';
+            ctx.fillStyle = st.hover ? hoverTint : 'rgba(255,255,255,.12)';
             const pw = st.w / cols, ph = st.h / rows;
 
             for (let i = 0; i < N; i++) {
@@ -927,10 +1200,10 @@ export function PixelDissolveButton({ seed = 42, cols = 16, rows = 5 } = {}) {
             ctx.globalAlpha = 1;
 
             if (dissolveT < 0.3) {
-                ctx.fillStyle = '#e2e2f0'; ctx.font = "600 12px 'Space Grotesk',sans-serif";
+                ctx.fillStyle = P.dim; ctx.font = FONT;
                 ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
                 ctx.globalAlpha = 1 - dissolveT / 0.3;
-                ctx.fillText('DISSOLVE', st.w / 2, st.h / 2);
+                ctx.fillText(TXT, st.w / 2, st.h / 2);
                 ctx.globalAlpha = 1;
             }
             if (st.focused) focusRing(ctx, st.w, st.h, 0);
@@ -939,41 +1212,73 @@ export function PixelDissolveButton({ seed = 42, cols = 16, rows = 5 } = {}) {
 }
 
 /** 9. Firework Button -- Shoots fireworks upward on click. */
-export function FireworkButton({ seed = 42 } = {}) {
+export function FireworkButton(o = {}) {
+    const { seed = 42 } = o;
+    // `colors` is the firework palette (like ConfettiButton); `theme` seeds it and
+    // recolors the label.
+    const colors = o.colors ? o.colors
+        : (o.theme ? [o.theme.light, o.theme.mid, o.theme.dark] : ['#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff', '#ff6bcb']);
+    const labelColor = (o.theme && o.theme.light) || '#fbbf24';
+    const FONT = pickFont(o, "600 13px 'Space Grotesk',sans-serif");
+    const TXT = pickText(o, '\u{1F386} FIRE');
     const rng = new Random(seed);
-    let rockets = [], sparks = [], pressScale = 1;
-    const colors = ['#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff', '#ff6bcb'];
+    // Fixed pools (life <= 0 == dead) -- no push/splice on the hot path.
+    const ROCKETS = 16, SPARKS = 256;
+    const rocket = [];
+    for (let i = 0; i < ROCKETS; i++) rocket[i] = { x: 0, y: 0, vy: 0, life: 0, color: '#fff' };
+    const spark = [];
+    for (let i = 0; i < SPARKS; i++) spark[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0, color: '#fff' };
+    let pressScale = 1;
+
+    function spawnRocket(x, y) {
+        for (let i = 0; i < ROCKETS; i++) {
+            const r = rocket[i];
+            if (r.life <= 0) { r.x = x; r.y = y; r.vy = -rng.range(150, 250); r.life = 1; r.color = rng.pick(colors); return; }
+        }
+    }
+    function spawnSpark(x, y, color) {
+        for (let i = 0; i < SPARKS; i++) {
+            const s = spark[i];
+            if (s.life <= 0) {
+                const a = rng.range(0, Math.PI * 2), v = rng.range(30, 100);
+                s.x = x; s.y = y; s.vx = Math.cos(a) * v; s.vy = Math.sin(a) * v; s.life = 1; s.color = color;
+                return;
+            }
+        }
+    }
+
     return {
         onClick(x, y, st) {
             pressScale = 0.88;
-            rockets.push({ x: x || st.w / 2, y: st.h, vy: -rng.range(150, 250), life: 1, color: rng.pick(colors) });
+            spawnRocket(x || st.w / 2, st.h);
         },
         tick(ctx, dt, now, st) {
             pressScale = lerp(pressScale, 1, dt * 10);
             ctx.save(); ctx.translate(st.w / 2, st.h / 2); ctx.scale(pressScale, pressScale); ctx.translate(-st.w / 2, -st.h / 2);
             ctx.fillStyle = 'rgba(255,255,255,.06)'; roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
-            ctx.fillStyle = '#fbbf24'; ctx.font = "600 13px 'Space Grotesk',sans-serif"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText('\u{1F386} FIRE', st.w / 2, st.h / 2);
+            ctx.fillStyle = labelColor; ctx.font = FONT; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+            ctx.fillText(TXT, st.w / 2, st.h / 2);
             ctx.restore();
 
-            // Rockets
-            for (let i = rockets.length - 1; i >= 0; i--) {
-                const r = rockets[i]; r.y += r.vy * dt; r.vy += 80 * dt; r.life -= dt;
+            // Rockets -- fixed pool; on death, burst into sparks
+            for (let i = 0; i < ROCKETS; i++) {
+                const r = rocket[i];
+                if (r.life <= 0) continue;
+                r.y += r.vy * dt; r.vy += 80 * dt; r.life -= dt;
                 ctx.fillStyle = r.color; ctx.beginPath(); ctx.arc(r.x, r.y, 3, 0, Math.PI * 2); ctx.fill();
                 if (r.life <= 0 || r.y < -20) {
-                    for (let j = 0; j < 20; j++) {
-                        const a = rng.range(0, Math.PI * 2), v = rng.range(30, 100);
-                        sparks.push({ x: r.x, y: r.y, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life: 1, color: r.color });
-                    }
-                    rockets.splice(i, 1);
+                    for (let j = 0; j < 20; j++) spawnSpark(r.x, r.y, r.color);
+                    r.life = 0;
                 }
             }
 
-            // Sparks
+            // Sparks -- fixed pool, const color per spark, alpha via globalAlpha
             ctx.globalCompositeOperation = 'screen';
-            for (let i = sparks.length - 1; i >= 0; i--) {
-                const s = sparks[i]; s.x += s.vx * dt; s.y += s.vy * dt; s.vy += 60 * dt; s.life -= 1.5 * dt;
-                if (s.life <= 0) { sparks.splice(i, 1); continue; }
+            for (let i = 0; i < SPARKS; i++) {
+                const s = spark[i];
+                if (s.life <= 0) continue;
+                s.x += s.vx * dt; s.y += s.vy * dt; s.vy += 60 * dt; s.life -= 1.5 * dt;
+                if (s.life <= 0) continue;
                 ctx.fillStyle = s.color; ctx.globalAlpha = s.life;
                 ctx.beginPath(); ctx.arc(s.x, s.y, 1.5, 0, Math.PI * 2); ctx.fill();
             }
@@ -989,32 +1294,53 @@ export function FireworkButton({ seed = 42 } = {}) {
 // ===========================================================
 
 /** 10. Aurora Slider -- Northern lights colors flow along the filled track. */
-export function AuroraSlider() {
+export function AuroraSlider(o = {}) {
+    const REF = 100, PHASES = 12;
+    // `colors` is the aurora gradient palette; `theme` seeds it.
+    const colors = o.colors ? o.colors
+        : (o.theme ? [o.theme.light, o.theme.mid, o.theme.dark, o.theme.light] : ['#6ee7b6', '#38bdf8', '#a78bfa', '#c084fc']);
+    const glowColor = (o.theme && o.theme.light) || (o.colors && o.colors[0]) || '#6ee7b6';
     let time = 0;
-    const colors = ['#6ee7b6', '#38bdf8', '#a78bfa', '#c084fc'];
+    // The shimmer animated the gradient stops per frame. Pre-build one gradient
+    // per animation phase in init (all 0..REF) and cycle them by time; scale to
+    // tx/REF at paint. Bounded, const set -> no per-frame createLinearGradient.
+    const beams = [];
     return {
+        init(ctx) {
+            for (let p = 0; p < PHASES; p++) {
+                const t = p / PHASES * PI2;
+                const g = ctx.createLinearGradient(0, 0, REF, 0);
+                for (let i = 0; i < 4; i++) {
+                    const pos = clamp(i / 3 + Math.sin(t + i) * 0.15, 0, 1);
+                    g.addColorStop(pos, colors[i % colors.length]);
+                }
+                beams[p] = g;
+            }
+        },
         tick(ctx, dt, now, st) {
             time += dt;
             ctx.fillStyle = 'rgba(255,255,255,.06)'; roundRect(ctx, 0, 12, st.w, 4, 2); ctx.fill();
             const tx = st.val * st.w;
             if (tx > 2) {
-                const g = ctx.createLinearGradient(0, 0, tx, 0);
-                for (let i = 0; i < 4; i++) {
-                    const pos = clamp((i / 3 + Math.sin(time + i) * 0.15), 0, 1);
-                    g.addColorStop(pos, colors[i]);
-                }
-                ctx.fillStyle = g; ctx.shadowBlur = 8; ctx.shadowColor = '#6ee7b6';
-                roundRect(ctx, 0, 12, tx, 4, 2); ctx.fill(); ctx.shadowBlur = 0;
+                const beam = beams[((time * 2) | 0) % PHASES] || beams[0];
+                ctx.save();
+                ctx.scale(tx / REF, 1);
+                ctx.fillStyle = beam; ctx.shadowBlur = 8; ctx.shadowColor = glowColor;
+                roundRect(ctx, 0, 12, REF, 4, 2); ctx.fill();
+                ctx.restore();
+                ctx.shadowBlur = 0;
             }
             ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(tx, 14, 8, 0, Math.PI * 2); ctx.fill();
-            label(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10);
+            label(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10);
             if (st.focused) focusRing(ctx, st.w, st.h, 4);
         },
     };
 }
 
 /** 11. Wave Slider -- Audio waveform visualization on the filled track. */
-export function WaveSlider({ seed = 42 } = {}) {
+export function WaveSlider(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#f472b6' });
     const rng = new Random(seed);
     const bars = new Float32Array(40);
     return {
@@ -1025,18 +1351,19 @@ export function WaveSlider({ seed = 42 } = {}) {
             for (let i = 0; i < 40; i++) {
                 const bx = i * bw, active = bx < tx;
                 const h = bars[i] * 16 * (0.5 + Math.sin(now / 300 + i * 0.3) * 0.3);
-                ctx.fillStyle = active ? '#f472b6' : 'rgba(255,255,255,.06)';
+                ctx.fillStyle = active ? P.accent : 'rgba(255,255,255,.06)';
                 ctx.fillRect(bx + 1, 14 - h / 2, bw - 2, h);
             }
-            ctx.fillStyle = '#f472b6'; ctx.beginPath(); ctx.arc(tx, 14, 8, 0, Math.PI * 2); ctx.fill();
-            label(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10);
+            ctx.fillStyle = P.accent; ctx.beginPath(); ctx.arc(tx, 14, 8, 0, Math.PI * 2); ctx.fill();
+            label(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10);
             if (st.focused) focusRing(ctx, st.w, st.h, 4);
         },
     };
 }
 
 /** 12. Elastic Band Slider -- Track rubber-bands ahead of thumb, snaps back. */
-export function ElasticBandSlider() {
+export function ElasticBandSlider(o = {}) {
+    const P = resolveTheme(o, { accent: '#fb923c' });
     let leadX = 0;
     return {
         tick(ctx, dt, now, st) {
@@ -1047,20 +1374,21 @@ export function ElasticBandSlider() {
             ctx.fillStyle = 'rgba(255,255,255,.06)'; roundRect(ctx, 0, 12, st.w, 4, 2); ctx.fill();
 
             // Elastic band (curves toward target)
-            ctx.strokeStyle = '#fb923c'; ctx.lineWidth = 3;
+            ctx.strokeStyle = P.accent; ctx.lineWidth = 3;
             ctx.beginPath(); ctx.moveTo(0, 14);
             ctx.quadraticCurveTo(leadX + stretch, 14 + stretch * 0.2, tx, 14);
             ctx.stroke();
 
-            ctx.fillStyle = '#fb923c'; ctx.beginPath(); ctx.arc(tx, 14, 9, 0, Math.PI * 2); ctx.fill();
-            label(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10);
+            ctx.fillStyle = P.accent; ctx.beginPath(); ctx.arc(tx, 14, 9, 0, Math.PI * 2); ctx.fill();
+            label(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10);
             if (st.focused) focusRing(ctx, st.w, st.h, 4);
         },
     };
 }
 
 /** 13. Gravity Slider -- Track sags under the weight of the thumb. */
-export function GravitySlider() {
+export function GravitySlider(o = {}) {
+    const P = resolveTheme(o, { accent: '#c084fc' });
     return {
         tick(ctx, dt, now, st) {
             const tx = st.val * st.w, sag = 8;
@@ -1072,16 +1400,16 @@ export function GravitySlider() {
             ctx.stroke();
 
             // Filled portion follows the sag
-            ctx.strokeStyle = '#c084fc'; ctx.lineWidth = 3;
+            ctx.strokeStyle = P.accent; ctx.lineWidth = 3;
             ctx.beginPath(); ctx.moveTo(0, 14);
             const midSag = sag * (tx / st.w);
             ctx.quadraticCurveTo(tx / 2, 14 + midSag, tx, 14 + sag * Math.sin(Math.PI * st.val));
             ctx.stroke();
 
-            ctx.fillStyle = '#c084fc'; ctx.beginPath();
+            ctx.fillStyle = P.accent; ctx.beginPath();
             ctx.arc(tx, 14 + sag * Math.sin(Math.PI * st.val), 10, 0, Math.PI * 2); ctx.fill();
 
-            label(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 14);
+            label(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 14);
             if (st.focused) focusRing(ctx, st.w, st.h + 8, 4);
         },
     };
@@ -1093,37 +1421,40 @@ export function GravitySlider() {
 // ===========================================================
 
 /** 14. Orbit Loader -- Planets orbit a sun. Toggle starts/stops. */
-export function OrbitLoader() {
+export function OrbitLoader(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', accent2: '#6ee7b6', accent3: '#fbbf24', dim2: '#8888aa' });
     let phase = 0;
     const planets = [
-        { r: 14, speed: 2.0, size: 3, color: '#38bdf8' },
-        { r: 22, speed: 1.2, size: 2.5, color: '#6ee7b6' },
-        { r: 30, speed: 0.7, size: 2, color: '#fbbf24' },
+        { r: 14, speed: 2.0, size: 3, color: P.accent },
+        { r: 22, speed: 1.2, size: 2.5, color: P.accent2 },
+        { r: 30, speed: 0.7, size: 2, color: P.accent3 },
     ];
     return {
         tick(ctx, dt, now, st) {
             if (st.toggled) phase += dt;
             const cx = st.w / 2, cy = st.h / 2;
 
-            // Orbits
-            planets.forEach(p => {
+            // Orbits (plain loop -- forEach's arrow was a per-frame closure alloc)
+            for (let i = 0; i < planets.length; i++) {
+                const p = planets[i];
                 ctx.strokeStyle = 'rgba(255,255,255,.04)'; ctx.lineWidth = 0.5;
                 ctx.beginPath(); ctx.arc(cx, cy, p.r, 0, Math.PI * 2); ctx.stroke();
                 const a = phase * p.speed;
                 ctx.fillStyle = p.color;
                 ctx.beginPath(); ctx.arc(cx + Math.cos(a) * p.r, cy + Math.sin(a) * p.r, p.size, 0, Math.PI * 2); ctx.fill();
-            });
+            }
 
             // Sun
-            ctx.fillStyle = '#fbbf24'; ctx.beginPath(); ctx.arc(cx, cy, 5, 0, Math.PI * 2); ctx.fill();
-            label(ctx, st.toggled ? 'LOADING...' : 'IDLE', st.w / 2, st.h + 14, st.toggled ? '#fbbf24' : '#8888aa');
+            ctx.fillStyle = P.accent3; ctx.beginPath(); ctx.arc(cx, cy, 5, 0, Math.PI * 2); ctx.fill();
+            label(ctx, st.toggled ? 'LOADING...' : 'IDLE', st.w / 2, st.h + 14, st.toggled ? P.accent3 : P.dim2);
             if (st.focused) focusRing(ctx, st.w, st.h, st.h / 2);
         },
     };
 }
 
 /** 15. Helix Loader -- DNA double helix spinning. */
-export function HelixLoader() {
+export function HelixLoader(o = {}) {
+    const P = resolveTheme(o, { accent: '#a78bfa', accent2: '#f472b6', accent3: '#c084fc', dim2: '#8888aa' });
     let phase = 0;
     return {
         tick(ctx, dt, now, st) {
@@ -1136,15 +1467,18 @@ export function HelixLoader() {
                 const x2 = cx - Math.cos(a) * 16, y2 = cy - Math.sin(a) * 6;
                 const depth = (Math.sin(a) + 1) / 2;
 
-                ctx.fillStyle = `rgba(167,139,250,${0.2 + depth * 0.6})`;
+                // Const strand colors, per-node alpha via globalAlpha (was three
+                // `rgba(...,${...})` templates per node per frame).
+                ctx.fillStyle = P.accent; ctx.globalAlpha = 0.2 + depth * 0.6;
                 ctx.beginPath(); ctx.arc(x1, y1, 2 + depth, 0, Math.PI * 2); ctx.fill();
-                ctx.fillStyle = `rgba(244,114,182,${0.2 + (1 - depth) * 0.6})`;
+                ctx.fillStyle = P.accent2; ctx.globalAlpha = 0.2 + (1 - depth) * 0.6;
                 ctx.beginPath(); ctx.arc(x2, y2, 2 + (1 - depth), 0, Math.PI * 2); ctx.fill();
 
-                ctx.strokeStyle = `rgba(255,255,255,${0.03 + depth * 0.04})`;
+                ctx.strokeStyle = '#ffffff'; ctx.globalAlpha = 0.03 + depth * 0.04;
                 ctx.lineWidth = 0.5; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
             }
-            label(ctx, st.toggled ? 'PROCESSING' : 'IDLE', st.w / 2, st.h + 14, st.toggled ? '#c084fc' : '#8888aa');
+            ctx.globalAlpha = 1;
+            label(ctx, st.toggled ? 'PROCESSING' : 'IDLE', st.w / 2, st.h + 14, st.toggled ? P.accent3 : P.dim2);
             if (st.focused) focusRing(ctx, st.w, st.h, st.h / 2);
         },
     };
@@ -1156,29 +1490,42 @@ export function HelixLoader() {
 // ===========================================================
 
 /** 16. Ripple Checkbox -- Material-style ripple ring + morphing checkmark. */
-export function RippleCheck() {
-    let ripples = [], checkT = 0;
+export function RippleCheck(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', surface: '#000', dim2: '#8888aa' });
+    // Fixed ripple pool (life <= 0 == dead) -- no push/splice on the hot path.
+    const RIPPLES = 8;
+    const ripR = new Float64Array(RIPPLES);
+    const ripLife = new Float64Array(RIPPLES);
+    let checkT = 0;
+    function spawn() {
+        for (let i = 0; i < RIPPLES; i++) {
+            if (ripLife[i] <= 0) { ripR[i] = 0; ripLife[i] = 1; return; }
+        }
+    }
     return {
-        onToggle(checked) { if (checked) ripples.push({ r: 0, life: 1 }); },
+        onToggle(checked) { if (checked) spawn(); },
         tick(ctx, dt, now, st) {
             checkT = lerp(checkT, st.toggled ? 1 : 0, dt * 10);
             const sz = Math.min(st.w, st.h), cx = sz / 2, cy = sz / 2;
 
             // Box
-            ctx.fillStyle = st.toggled ? '#6ee7b6' : 'rgba(255,255,255,.06)';
+            ctx.fillStyle = st.toggled ? P.accent : 'rgba(255,255,255,.06)';
             roundRect(ctx, 0, 0, sz, sz, 6); ctx.fill();
 
-            // Ripples
-            for (let i = ripples.length - 1; i >= 0; i--) {
-                const r = ripples[i]; r.r += 50 * dt; r.life -= 2 * dt;
-                if (r.life <= 0) { ripples.splice(i, 1); continue; }
-                ctx.strokeStyle = `rgba(110,231,182,${r.life})`; ctx.lineWidth = 2;
-                ctx.beginPath(); ctx.arc(cx, cy, r.r, 0, Math.PI * 2); ctx.stroke();
+            // Ripples -- fixed pool, const color, alpha via globalAlpha
+            ctx.strokeStyle = P.accent; ctx.lineWidth = 2;
+            for (let i = 0; i < RIPPLES; i++) {
+                if (ripLife[i] <= 0) continue;
+                ripR[i] += 50 * dt; ripLife[i] -= 2 * dt;
+                if (ripLife[i] <= 0) continue;
+                ctx.globalAlpha = ripLife[i];
+                ctx.beginPath(); ctx.arc(cx, cy, ripR[i], 0, Math.PI * 2); ctx.stroke();
             }
+            ctx.globalAlpha = 1;
 
             // Checkmark (animated draw)
             if (checkT > 0.01) {
-                ctx.strokeStyle = '#000'; ctx.lineWidth = 3; ctx.lineCap = 'round';
+                ctx.strokeStyle = P.surface; ctx.lineWidth = 3; ctx.lineCap = 'round';
                 ctx.beginPath();
                 const p1 = clamp(checkT * 2, 0, 1); // First stroke
                 const p2 = clamp(checkT * 2 - 1, 0, 1); // Second stroke
@@ -1187,24 +1534,32 @@ export function RippleCheck() {
                 if (p2 > 0) ctx.lineTo(cx + 14 * p2, cy + 7 - 14 * p2);
                 ctx.stroke(); ctx.lineCap = 'butt';
             }
-            label(ctx, st.toggled ? '\u2713' : '\u25CB', sz / 2, sz + 12, st.toggled ? '#6ee7b6' : '#8888aa');
+            label(ctx, st.toggled ? '\u2713' : '\u25CB', sz / 2, sz + 12, st.toggled ? P.accent : P.dim2);
             if (st.focused) focusRing(ctx, sz, sz, 6);
         },
     };
 }
 
 /** 17. Morph Checkbox -- X morphs into checkmark smoothly. */
-export function MorphCheck() {
+export function MorphCheck(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#9999b8', dim2: '#8888aa' });
     let t = 0;
     return {
         tick(ctx, dt, now, st) {
             t = lerp(t, st.toggled ? 1 : 0, dt * 8);
             const sz = Math.min(st.w, st.h), cx = sz / 2, cy = sz / 2;
 
-            ctx.fillStyle = lerp(0.06, 0.15, t) < 0.1 ? 'rgba(255,255,255,.06)' : `rgba(56,189,248,${lerp(0, 0.2, t)})`;
-            roundRect(ctx, 0, 0, sz, sz, 6); ctx.fill();
+            // Box bg: faint white early, blue (alpha via globalAlpha) as t rises.
+            if (lerp(0.06, 0.15, t) < 0.1) {
+                ctx.fillStyle = 'rgba(255,255,255,.06)';
+                roundRect(ctx, 0, 0, sz, sz, 6); ctx.fill();
+            } else {
+                ctx.fillStyle = P.accent; ctx.globalAlpha = lerp(0, 0.2, t);
+                roundRect(ctx, 0, 0, sz, sz, 6); ctx.fill();
+                ctx.globalAlpha = 1;
+            }
 
-            ctx.strokeStyle = t > 0.5 ? '#38bdf8' : '#9999b8'; ctx.lineWidth = 2.5; ctx.lineCap = 'round';
+            ctx.strokeStyle = t > 0.5 ? P.accent : P.dim; ctx.lineWidth = 2.5; ctx.lineCap = 'round';
 
             // Morph: X -> checkmark by interpolating endpoints
             const x1a = cx - 8, y1a = cy - 8; // X top-left
@@ -1227,7 +1582,7 @@ export function MorphCheck() {
             ctx.stroke();
             ctx.lineCap = 'butt';
 
-            label(ctx, st.toggled ? '\u2713' : '\u2715', sz / 2, sz + 12, st.toggled ? '#38bdf8' : '#8888aa');
+            label(ctx, st.toggled ? '\u2713' : '\u2715', sz / 2, sz + 12, st.toggled ? P.accent : P.dim2);
             if (st.focused) focusRing(ctx, sz, sz, 6);
         },
     };
@@ -1239,57 +1594,84 @@ export function MorphCheck() {
 // ===========================================================
 
 /** 18. Flame Counter -- Number with rising heat particles driven by slider value. */
-export function FlameCounter({ seed = 42 } = {}) {
+export function FlameCounter(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#ff6b6b', accent2: '#fbbf24', dim: '#9999b8' });
+    const FONT = pickFont(o, "700 28px 'JetBrains Mono',monospace");
+    const TXT = pickText(o, 'HEAT');
     const rng = new Random(seed);
-    let embers = [];
+    // Fixed ember pool + heat-color LUT (rgb quantized by value), so neither the
+    // pool nor the per-ember color allocates. The number string is rebuilt only
+    // when the displayed integer changes.
+    const EMBERS = 64;
+    const ember = [];
+    for (let i = 0; i < EMBERS; i++) ember[i] = { x: 0, y: 0, vy: 0, life: 0, size: 0 };
+    const HEAT = [];
+    for (let i = 0; i <= 32; i++) HEAT[i] = 'rgb(' + Math.round(200 + (i / 32) * 55) + ',' + Math.round(60 + (i / 32) * 80) + ',20)';
+    let numStr = '0', lastNum = -1;
+    function spawn(st) {
+        for (let i = 0; i < EMBERS; i++) {
+            const e = ember[i];
+            if (e.life <= 0) { e.x = rng.range(20, st.w - 20); e.y = st.h - 5; e.vy = -rng.range(20, 60); e.life = 1; e.size = rng.range(1, 3); return; }
+        }
+    }
     return {
         tick(ctx, dt, now, st) {
             const val = Math.round(st.val * 999);
+            if (val !== lastNum) { lastNum = val; numStr = String(val); }
 
-            // Spawn embers proportional to value
-            if (st.val > 0.1 && embers.length < 60) {
-                embers.push({ x: rng.range(20, st.w - 20), y: st.h - 5, vy: -rng.range(20, 60), life: 1, size: rng.range(1, 3) });
-            }
+            // Spawn embers proportional to value (pool self-caps at EMBERS)
+            if (st.val > 0.1) spawn(st);
 
             // Background
             ctx.fillStyle = 'rgba(255,255,255,.03)'; roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
 
-            // Embers
+            // Embers -- fixed pool, heat color via LUT, alpha via globalAlpha
             ctx.globalCompositeOperation = 'screen';
-            for (let i = embers.length - 1; i >= 0; i--) {
-                const e = embers[i]; e.y += e.vy * dt; e.life -= dt * 0.8;
-                if (e.life <= 0) { embers.splice(i, 1); continue; }
-                const heat = st.val;
-                ctx.fillStyle = `rgba(${200 + heat * 55},${60 + heat * 80},${20},${e.life})`;
+            ctx.fillStyle = HEAT[(st.val * 32) | 0] || HEAT[32];
+            for (let i = 0; i < EMBERS; i++) {
+                const e = ember[i];
+                if (e.life <= 0) continue;
+                e.y += e.vy * dt; e.life -= dt * 0.8;
+                if (e.life <= 0) continue;
+                ctx.globalAlpha = e.life;
                 ctx.beginPath(); ctx.arc(e.x, e.y, e.size, 0, Math.PI * 2); ctx.fill();
             }
+            ctx.globalAlpha = 1;
             ctx.globalCompositeOperation = 'source-over';
 
             // Number
-            ctx.fillStyle = st.val > 0.7 ? '#ff6b6b' : st.val > 0.3 ? '#fbbf24' : '#9999b8';
-            ctx.font = "700 28px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText(String(val), st.w / 2, st.h / 2);
+            ctx.fillStyle = st.val > 0.7 ? P.accent : st.val > 0.3 ? P.accent2 : P.dim;
+            ctx.font = FONT; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+            ctx.fillText(numStr, st.w / 2, st.h / 2);
 
-            label(ctx, 'HEAT', st.w / 2, st.h + 12);
+            label(ctx, TXT, st.w / 2, st.h + 12);
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
         },
     };
 }
 
 /** 19. Glitch Counter -- Number glitches and jitters as slider value increases. */
-export function GlitchCounter({ seed = 42 } = {}) {
+export function GlitchCounter(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#ff0055', accent2: '#00ffcc', dim: '#e2e2f0' });
+    const FONT = pickFont(o, "700 28px 'JetBrains Mono',monospace");
+    const TXT = pickText(o, 'SIGNAL');
     const rng = new Random(seed);
+    let numStr = '0', lastNum = -1;
     return {
         tick(ctx, dt, now, st) {
             const val = Math.round(st.val * 999);
+            if (val !== lastNum) { lastNum = val; numStr = String(val); }
             const intensity = st.val;
 
             ctx.fillStyle = 'rgba(255,255,255,.03)'; roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
 
-            // Scanlines
+            // Scanlines -- const white, alpha via globalAlpha
             if (intensity > 0.2) {
-                ctx.fillStyle = `rgba(255,255,255,${intensity * 0.03})`;
+                ctx.fillStyle = '#ffffff'; ctx.globalAlpha = intensity * 0.03;
                 for (let y = 0; y < st.h; y += 3) ctx.fillRect(0, y, st.w, 1);
+                ctx.globalAlpha = 1;
             }
 
             // Glitched number
@@ -1298,19 +1680,22 @@ export function GlitchCounter({ seed = 42 } = {}) {
 
             if (intensity > 0.3 && rng.next() > 0.6) {
                 ctx.globalCompositeOperation = 'screen';
-                ctx.fillStyle = `rgba(255,0,85,${intensity * 0.4})`;
-                ctx.font = "700 28px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-                ctx.fillText(String(val), st.w / 2 + jx - 2, st.h / 2 + jy);
-                ctx.fillStyle = `rgba(0,255,204,${intensity * 0.4})`;
-                ctx.fillText(String(val), st.w / 2 + jx + 2, st.h / 2 + jy);
+                ctx.font = FONT; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+                // RGB split -- const channel colors, shared alpha via globalAlpha
+                ctx.globalAlpha = intensity * 0.4;
+                ctx.fillStyle = P.accent;
+                ctx.fillText(numStr, st.w / 2 + jx - 2, st.h / 2 + jy);
+                ctx.fillStyle = P.accent2;
+                ctx.fillText(numStr, st.w / 2 + jx + 2, st.h / 2 + jy);
+                ctx.globalAlpha = 1;
                 ctx.globalCompositeOperation = 'source-over';
             }
 
-            ctx.fillStyle = '#e2e2f0';
-            ctx.font = "700 28px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText(String(val), st.w / 2 + jx, st.h / 2 + jy);
+            ctx.fillStyle = P.dim;
+            ctx.font = FONT; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+            ctx.fillText(numStr, st.w / 2 + jx, st.h / 2 + jy);
 
-            label(ctx, 'SIGNAL', st.w / 2, st.h + 12);
+            label(ctx, TXT, st.w / 2, st.h + 12);
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
         },
     };
@@ -1322,11 +1707,31 @@ export function GlitchCounter({ seed = 42 } = {}) {
 // ===========================================================
 
 /** 20. Bubble Rating -- 5 bubbles inflate based on slider position. Click pops them. */
-export function BubbleRating({ seed = 42 } = {}) {
+export function BubbleRating(o = {}) {
+    const { seed = 42 } = o;
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#9999b8' });
     const rng = new Random(seed);
-    let pops = [], sizes = new Float32Array(5);
+    const R5 = ['0 / 5', '1 / 5', '2 / 5', '3 / 5', '4 / 5', '5 / 5']; // const labels
+    const POPS = 32;
+    const pop = [];
+    for (let i = 0; i < POPS; i++) pop[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0 };
+    const sizes = new Float32Array(5);
+    let lastW = 200;
+    function spawnPops(cx) {
+        for (let j = 0; j < 5; j++) {
+            for (let i = 0; i < POPS; i++) {
+                const p = pop[i];
+                if (p.life <= 0) {
+                    const a = rng.range(0, Math.PI * 2), v = rng.range(20, 50);
+                    p.x = cx; p.y = 14; p.vx = Math.cos(a) * v; p.vy = Math.sin(a) * v; p.life = 1;
+                    break;
+                }
+            }
+        }
+    }
     return {
         tick(ctx, dt, now, st) {
+            lastW = st.w;
             const rating = Math.round(st.val * 5);
             const gap = st.w / 5;
 
@@ -1336,10 +1741,12 @@ export function BubbleRating({ seed = 42 } = {}) {
                 sizes[i] = lerp(sizes[i] || 6, targetSz, dt * 8);
                 const cx = gap * i + gap / 2, cy = st.h / 2;
 
-                // Bubble
-                ctx.fillStyle = active ? `rgba(56,189,248,${0.3 + sizes[i] / 20})` : 'rgba(255,255,255,.05)';
+                // Bubble -- const color, active alpha via globalAlpha
+                if (active) { ctx.fillStyle = P.accent; ctx.globalAlpha = 0.3 + sizes[i] / 20; }
+                else { ctx.fillStyle = 'rgba(255,255,255,.05)'; ctx.globalAlpha = 1; }
                 ctx.beginPath(); ctx.arc(cx, cy, sizes[i], 0, Math.PI * 2); ctx.fill();
-                ctx.strokeStyle = active ? '#38bdf8' : 'rgba(255,255,255,.08)';
+                ctx.globalAlpha = 1;
+                ctx.strokeStyle = active ? P.accent : 'rgba(255,255,255,.08)';
                 ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(cx, cy, sizes[i], 0, Math.PI * 2); ctx.stroke();
 
                 // Highlight
@@ -1349,25 +1756,27 @@ export function BubbleRating({ seed = 42 } = {}) {
                 }
             }
 
-            // Pop particles
-            for (let i = pops.length - 1; i >= 0; i--) {
-                const p = pops[i]; p.x += p.vx * dt; p.y += p.vy * dt; p.life -= 3 * dt;
-                if (p.life <= 0) { pops.splice(i, 1); continue; }
-                ctx.fillStyle = `rgba(56,189,248,${p.life})`; ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2); ctx.fill();
+            // Pop particles -- fixed pool, const color, alpha via globalAlpha
+            ctx.fillStyle = P.accent;
+            for (let i = 0; i < POPS; i++) {
+                const p = pop[i];
+                if (p.life <= 0) continue;
+                p.x += p.vx * dt; p.y += p.vy * dt; p.life -= 3 * dt;
+                if (p.life <= 0) continue;
+                ctx.globalAlpha = p.life;
+                ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2); ctx.fill();
             }
+            ctx.globalAlpha = 1;
 
-            label(ctx, `${rating} / 5`, st.w / 2, st.h + 12, rating >= 4 ? '#38bdf8' : '#9999b8');
+            label(ctx, R5[rating], st.w / 2, st.h + 12, rating >= 4 ? P.accent : P.dim);
             if (st.focused) focusRing(ctx, st.w, st.h, 4);
         },
         onDrag(val) {
             const rating = Math.round(val * 5);
-            // Pop the newly activated bubble
-            const gap = 200 / 5;
+            // Pop the newly activated bubble (position derived from st.w via lastW)
+            const gap = lastW / 5;
             const cx = gap * (rating - 1) + gap / 2;
-            for (let j = 0; j < 5; j++) {
-                const a = rng.range(0, Math.PI * 2), v = rng.range(20, 50);
-                pops.push({ x: cx, y: 14, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life: 1 });
-            }
+            spawnPops(cx);
         },
     };
 }
@@ -1378,9 +1787,19 @@ export function BubbleRating({ seed = 42 } = {}) {
 // ===========================================================
 
 /** 1. Volume Knob -- Rotary dial with tick marks and arc indicator. */
-export function VolumeKnob() {
-    let displayVal = 0;
+export function VolumeKnob(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#38bdf8', dim: '#e2e2f0' });
+    const tickOn = (o.theme || o.colors) ? rgbaOf(P.accent, .5) : 'rgba(110,231,182,.5)';
+    const FONT = pickFont(o, "700 14px 'JetBrains Mono',monospace");
+    const TXT = pickText(o, 'VOLUME');
+    let displayVal = 0, grad = null;
+    let numStr = '0', lastNum = -1;
     return {
+        init(c, w, h) {
+            // Value-arc gradient depends only on w/h (fixed per mount) -> build once.
+            grad = c.createLinearGradient(0, h, w, 0);
+            grad.addColorStop(0, P.accent); grad.addColorStop(1, P.accent2);
+        },
         tick(c,dt,now,st) {
             displayVal = lerp(displayVal, st.val, dt * 12);
             const cx=st.w/2, cy=st.h/2, R=Math.min(cx,cy)-4;
@@ -1390,18 +1809,16 @@ export function VolumeKnob() {
             c.strokeStyle='rgba(255,255,255,.06)'; c.lineWidth=4;
             c.beginPath(); c.arc(cx,cy,R,startA,endA); c.stroke();
 
-            // Value arc
+            // Value arc (gradient built once in init)
             const valA = startA + displayVal * range;
-            const grad = c.createLinearGradient(0,st.h,st.w,0);
-            grad.addColorStop(0,'#6ee7b6'); grad.addColorStop(1,'#38bdf8');
-            c.strokeStyle=grad; c.lineWidth=4;
+            c.strokeStyle = grad || '#38bdf8'; c.lineWidth=4;
             c.beginPath(); c.arc(cx,cy,R,startA,valA); c.stroke();
 
             // Tick marks
             for(let i=0;i<=10;i++){
                 const a=startA+i/10*range;
                 const inner=R-6, outer=R+2;
-                c.strokeStyle=i/10<=displayVal?'rgba(110,231,182,.5)':'rgba(255,255,255,.08)';
+                c.strokeStyle=i/10<=displayVal?tickOn:'rgba(255,255,255,.08)';
                 c.lineWidth=1; c.beginPath();
                 c.moveTo(cx+Math.cos(a)*inner,cy+Math.sin(a)*inner);
                 c.lineTo(cx+Math.cos(a)*outer,cy+Math.sin(a)*outer);
@@ -1416,18 +1833,24 @@ export function VolumeKnob() {
             c.fillStyle='rgba(255,255,255,.04)';
             c.beginPath(); c.arc(cx,cy,R*0.4,0,PI2); c.fill();
 
-            // Value text
-            c.fillStyle='#e2e2f0'; c.font="700 14px 'JetBrains Mono',monospace"; c.textAlign='center'; c.textBaseline='middle';
-            c.fillText(Math.round(displayVal*100),cx,cy);
-            lbl(c,'VOLUME',cx,st.h+10);
+            // Value text (rebuilt only when the integer changes)
+            const v = Math.round(displayVal * 100);
+            if (v !== lastNum) { lastNum = v; numStr = String(v); }
+            c.fillStyle=P.dim; c.font=FONT; c.textAlign='center'; c.textBaseline='middle';
+            c.fillText(numStr,cx,cy);
+            lbl(c,TXT,cx,st.h+10);
             if(st.focused)fr(c,st.w,st.h,st.h/2);
         },
     };
 }
 
 /** 2. Compass Knob -- Needle points based on slider value (0=N, 0.5=S, 1=N). */
-export function CompassKnob() {
-    let needleA=0;
+export function CompassKnob(o = {}) {
+    const P = resolveTheme(o, { accent: '#ff6b6b', dim: '#9999b8', surface: '#333' });
+    const dirs = ['N', 'E', 'S', 'W'];                          // hoisted out of tick
+    const cols = [P.accent, P.dim, P.dim, P.dim];               // (were per-frame arrays)
+    let needleA = 0;
+    let degStr = '0\u00B0', lastDeg = -1;
     return {
         tick(c,dt,now,st) {
             const targetA = st.val * PI2;
@@ -1439,7 +1862,6 @@ export function CompassKnob() {
             c.beginPath(); c.arc(cx,cy,R,0,PI2); c.stroke();
 
             // Cardinal marks
-            const dirs=['N','E','S','W'], cols=['#ff6b6b','#9999b8','#9999b8','#9999b8'];
             for(let i=0;i<4;i++){
                 const a=-Math.PI/2+i*Math.PI/2;
                 c.fillStyle=cols[i]; c.font="600 9px 'JetBrains Mono',monospace"; c.textAlign='center'; c.textBaseline='middle';
@@ -1448,17 +1870,19 @@ export function CompassKnob() {
 
             // Needle
             c.save(); c.translate(cx,cy); c.rotate(needleA-Math.PI/2);
-            c.fillStyle='#ff6b6b';
+            c.fillStyle=P.accent;
             c.beginPath(); c.moveTo(0,-R+18); c.lineTo(-4,4); c.lineTo(4,4); c.closePath(); c.fill();
             c.fillStyle='rgba(255,255,255,.15)';
             c.beginPath(); c.moveTo(0,R-18); c.lineTo(-4,-4); c.lineTo(4,-4); c.closePath(); c.fill();
             c.restore();
 
             // Center pin
-            c.fillStyle='#333'; c.beginPath(); c.arc(cx,cy,4,0,PI2); c.fill();
+            c.fillStyle=P.surface; c.beginPath(); c.arc(cx,cy,4,0,PI2); c.fill();
             c.strokeStyle='rgba(255,255,255,.1)'; c.lineWidth=1; c.beginPath(); c.arc(cx,cy,4,0,PI2); c.stroke();
 
-            lbl(c,Math.round(st.val*360)+'\u00B0',cx,st.h+10);
+            const deg = Math.round(st.val * 360);
+            if (deg !== lastDeg) { lastDeg = deg; degStr = deg + '\u00B0'; }
+            lbl(c, degStr, cx, st.h + 10);
             if(st.focused)fr(c,st.w,st.h,st.h/2);
         },
     };
@@ -1470,10 +1894,37 @@ export function CompassKnob() {
 // ===========================================================
 
 /** 3. Ring Progress -- Circular progress with animated fill and particles at the tip. */
-export function RingProgress({seed=42}={}) {
+export function RingProgress(o = {}) {
+    const {seed=42}=o;
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#a78bfa', dim: '#e2e2f0' });
+    const tail = (o.theme || o.colors) ? rgbaOf(P.accent, .2) : 'rgba(110,231,182,.2)';
+    const FONT = pickFont(o, "700 16px 'JetBrains Mono',monospace");
     const rng=new Random(seed);
-    let displayVal=0, sparks=[];
+    // Fixed spark pool + a bounded set of conic gradients (one per progress
+    // level) built in init, so the green stop still tracks the arc tip with zero
+    // per-frame gradient construction.
+    const SPARKS = 24;
+    const spark = [];
+    for (let i = 0; i < SPARKS; i++) spark[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0 };
+    const GPHASES = 16;
+    const grads = [];
+    let displayVal = 0;
+    function spawn(x, y) {
+        for (let i = 0; i < SPARKS; i++) {
+            const s = spark[i];
+            if (s.life <= 0) { s.x = x; s.y = y; s.vx = rng.range(-20, 20); s.vy = rng.range(-20, 20); s.life = 1; return; }
+        }
+    }
     return {
+        init(c, w, h) {
+            for (let p = 0; p < GPHASES; p++) {
+                const g = c.createConicGradient(-Math.PI / 2, w / 2, h / 2);
+                g.addColorStop(0, P.accent2);
+                g.addColorStop((p / (GPHASES - 1)) * 0.95, P.accent);
+                g.addColorStop(1, tail);
+                grads[p] = g;
+            }
+        },
         tick(c,dt,now,st) {
             displayVal=lerp(displayVal,st.val,dt*6);
             const cx=st.w/2,cy=st.h/2,R=Math.min(cx,cy)-6,lw=6;
@@ -1482,34 +1933,39 @@ export function RingProgress({seed=42}={}) {
             c.strokeStyle='rgba(255,255,255,.06)';c.lineWidth=lw;
             c.beginPath();c.arc(cx,cy,R,0,PI2);c.stroke();
 
-            // Fill arc
+            // Fill arc (conic gradient from init; the green stop tracks the tip)
             const a=-Math.PI/2,ea=a+displayVal*PI2;
-            const g=c.createConicGradient(a,cx,cy);
-            g.addColorStop(0,'#a78bfa');g.addColorStop(displayVal*0.95,'#6ee7b6');g.addColorStop(1,'rgba(110,231,182,.2)');
-            c.strokeStyle=g;c.lineWidth=lw;
+            c.strokeStyle = grads[(displayVal * (GPHASES - 1)) | 0] || '#6ee7b6';c.lineWidth=lw;
             c.beginPath();c.arc(cx,cy,R,a,ea);c.stroke();
 
-            // Tip sparks
+            // Tip sparks -- fixed pool, const color, alpha via globalAlpha
             if(displayVal>0.02){
                 const tx=cx+Math.cos(ea)*R,ty=cy+Math.sin(ea)*R;
-                if(sparks.length<20)sparks.push({x:tx,y:ty,vx:rng.range(-20,20),vy:rng.range(-20,20),life:1});
+                spawn(tx, ty);
             }
-            for(let i=sparks.length-1;i>=0;i--){
-                const s=sparks[i];s.x+=s.vx*dt;s.y+=s.vy*dt;s.life-=2*dt;
-                if(s.life<=0){sparks.splice(i,1);continue}
-                c.fillStyle=`rgba(110,231,182,${s.life})`;c.beginPath();c.arc(s.x,s.y,1.5,0,PI2);c.fill();
+            c.fillStyle = P.accent;
+            for(let i=0;i<SPARKS;i++){
+                const s=spark[i];
+                if(s.life<=0)continue;
+                s.x+=s.vx*dt;s.y+=s.vy*dt;s.life-=2*dt;
+                if(s.life<=0)continue;
+                c.globalAlpha=s.life;
+                c.beginPath();c.arc(s.x,s.y,1.5,0,PI2);c.fill();
             }
+            c.globalAlpha=1;
 
             // Percentage
-            c.fillStyle='#e2e2f0';c.font="700 16px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-            c.fillText(Math.round(displayVal*100)+'%',cx,cy);
+            c.fillStyle=P.dim;c.font=FONT;c.textAlign='center';c.textBaseline='middle';
+            c.fillText(PCT[Math.round(displayVal*100)],cx,cy);
             if(st.focused)fr(c,st.w,st.h,st.h/2);
         },
     };
 }
 
 /** 4. Battery Gauge -- Battery icon that fills and changes color. */
-export function BatteryGauge() {
+export function BatteryGauge(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#fbbf24', accent3: '#ff6b6b', dim: '#e2e2f0' });
+    const FONT = pickFont(o, "600 10px 'JetBrains Mono',monospace");
     let displayVal=0;
     return {
         tick(c,dt,now,st) {
@@ -1525,7 +1981,7 @@ export function BatteryGauge() {
 
             // Fill
             const fillW=Math.max(0,(bw-6)*displayVal);
-            const col=displayVal<.2?'#ff6b6b':displayVal<.5?'#fbbf24':'#6ee7b6';
+            const col=displayVal<.2?P.accent3:displayVal<.5?P.accent2:P.accent;
             c.fillStyle=col;
             rr(c,bx+3,by+3,fillW,bh-6,2);c.fill();
 
@@ -1542,15 +1998,16 @@ export function BatteryGauge() {
                 c.fillStyle='rgba(255,80,80,.15)';rr(c,bx,by,bw,bh,r);c.fill();
             }
 
-            c.fillStyle='#e2e2f0';c.font="600 10px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-            c.fillText(Math.round(displayVal*100)+'%',bx+bw/2,by+bh/2);
+            c.fillStyle=P.dim;c.font=FONT;c.textAlign='center';c.textBaseline='middle';
+            c.fillText(PCT[Math.round(displayVal*100)],bx+bw/2,by+bh/2);
             if(st.focused)fr(c,st.w+4,st.h,r);
         },
     };
 }
 
 /** 5. Signal Meter -- WiFi-style signal bars. */
-export function SignalMeter() {
+export function SignalMeter(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#fbbf24', accent3: '#ff6b6b', dim: '#9999b8' });
     let bars=[0,0,0,0,0];
     return {
         tick(c,dt,now,st) {
@@ -1566,10 +2023,10 @@ export function SignalMeter() {
                 const maxH=8+i*6, h=maxH*bars[i]+2;
                 const x=ox+i*(bw+gap), y=st.h-6-h;
                 const active=bars[i]>.5;
-                c.fillStyle=active?(st.val>.6?'#6ee7b6':st.val>.3?'#fbbf24':'#ff6b6b'):'rgba(255,255,255,.06)';
+                c.fillStyle=active?(st.val>.6?P.accent:st.val>.3?P.accent2:P.accent3):'rgba(255,255,255,.06)';
                 rr(c,x,y,bw,h,2);c.fill();
             }
-            lbl(c,level+'/5',st.w/2,st.h+10,st.val>.6?'#6ee7b6':'#9999b8');
+            lbl(c,level+'/5',st.w/2,st.h+10,st.val>.6?P.accent:P.dim);
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
@@ -1581,7 +2038,12 @@ export function SignalMeter() {
 // ===========================================================
 
 /** 6. Pill Tabs -- 3 segmented tabs with sliding indicator. */
-export function PillTabs() {
+export function PillTabs(o = {}) {
+    const P = resolveTheme(o, { accent: '#c4b5fd', accent2: '#a78bfa', dim: '#9999b8' });
+    const themed = !!(o.theme || o.colors);
+    const indFill = themed ? rgbaOf(P.accent2, .12) : 'rgba(167,139,250,.12)';
+    const indStroke = themed ? rgbaOf(P.accent2, .25) : 'rgba(167,139,250,.25)';
+    const FONT = pickFont(o, "600 11px 'Space Grotesk',sans-serif");
     let indicatorX=0, indicatorW=0, selected=0;
     const labels=['Alpha','Beta','Gamma'];
     return {
@@ -1599,13 +2061,13 @@ export function PillTabs() {
             c.fillStyle='rgba(255,255,255,.03)';rr(c,0,0,st.w,st.h,st.h/2);c.fill();
 
             // Indicator
-            c.fillStyle='rgba(167,139,250,.12)';c.strokeStyle='rgba(167,139,250,.25)';c.lineWidth=1;
+            c.fillStyle=indFill;c.strokeStyle=indStroke;c.lineWidth=1;
             rr(c,indicatorX+2,2,indicatorW-4,st.h-4,st.h/2-2);c.fill();c.stroke();
 
             // Labels
-            c.font="600 11px 'Space Grotesk',sans-serif";c.textAlign='center';c.textBaseline='middle';
+            c.font=FONT;c.textAlign='center';c.textBaseline='middle';
             for(let i=0;i<3;i++){
-                c.fillStyle=i===selected?'#c4b5fd':'#9999b8';
+                c.fillStyle=i===selected?P.accent:P.dim;
                 c.fillText(labels[i],tw*i+tw/2,st.h/2);
             }
             if(st.focused)fr(c,st.w,st.h,st.h/2);
@@ -1614,7 +2076,12 @@ export function PillTabs() {
 }
 
 /** 7. Stepper -- +/- buttons with spring counter. */
-export function Stepper() {
+export function Stepper(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#ff6b6b', dim: '#e2e2f0' });
+    const themed = !!(o.theme || o.colors);
+    const minusFlash = themed ? rgbaOf(P.accent2, .15) : 'rgba(255,100,100,.15)';
+    const plusFlash = themed ? rgbaOf(P.accent, .15) : 'rgba(110,231,182,.15)';
+    const FONT = pickFont(o, "700 18px 'JetBrains Mono',monospace");
     let count=0,displayCount=0,flashDir=0,flashTimer=0;
     return {
         onClick(x,y,st) {
@@ -1631,18 +2098,18 @@ export function Stepper() {
 
             // Minus zone
             const third=st.w/3;
-            c.fillStyle=flashDir===-1&&flashTimer>0?'rgba(255,100,100,.15)':'rgba(255,255,255,.03)';
+            c.fillStyle=flashDir===-1&&flashTimer>0?minusFlash:'rgba(255,255,255,.03)';
             rr(c,2,2,third-4,st.h-4,8);c.fill();
-            c.fillStyle='#ff6b6b';c.font="700 18px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
+            c.fillStyle=P.accent2;c.font=FONT;c.textAlign='center';c.textBaseline='middle';
             c.fillText('\u2212',third/2,st.h/2);
 
             // Plus zone
-            c.fillStyle=flashDir===1&&flashTimer>0?'rgba(110,231,182,.15)':'rgba(255,255,255,.03)';
+            c.fillStyle=flashDir===1&&flashTimer>0?plusFlash:'rgba(255,255,255,.03)';
             rr(c,third*2+2,2,third-4,st.h-4,8);c.fill();
-            c.fillStyle='#6ee7b6';c.fillText('+',third*2+third/2,st.h/2);
+            c.fillStyle=P.accent;c.fillText('+',third*2+third/2,st.h/2);
 
             // Counter
-            c.fillStyle='#e2e2f0';c.font="700 20px 'JetBrains Mono',monospace";
+            c.fillStyle=P.dim;c.font="700 20px 'JetBrains Mono',monospace";
             c.fillText(Math.round(displayCount),st.w/2,st.h/2);
 
             if(st.focused)fr(c,st.w,st.h,10);
@@ -1651,9 +2118,15 @@ export function Stepper() {
 }
 
 /** 8. Radio Orbit -- 4 options arranged in a circle. Slider picks one. */
-export function RadioOrbit() {
+export function RadioOrbit(o = {}) {
     let selectedGlow=new Float32Array(4);
-    const names=['A','B','C','D'],colors=['#ff6b6b','#fbbf24','#6ee7b6','#38bdf8'];
+    const names=['A','B','C','D'];
+    // `colors` is the 4-node palette; `theme` seeds it. Normalised to length 4 so
+    // the body's colors[i] stays valid for any override.
+    const base = o.colors ? o.colors
+        : (o.theme ? [o.theme.light, o.theme.mid, o.theme.dark, o.theme.light] : ['#ff6b6b','#fbbf24','#6ee7b6','#38bdf8']);
+    const colors = base.length >= 4 ? base : [base[0], base[1 % base.length], base[2 % base.length], base[3 % base.length]];
+    const OPTS=['OPTION A','OPTION B','OPTION C','OPTION D']; // const (was 'OPTION '+name concat)
     return {
         tick(c,dt,now,st) {
             const sel=Math.round(st.val*3);
@@ -1668,9 +2141,9 @@ export function RadioOrbit() {
                 const active=i===sel;
                 selectedGlow[i]=lerp(selectedGlow[i],active?1:0,dt*10);
 
-                // Orbit line
-                c.strokeStyle=`rgba(255,255,255,${.03+selectedGlow[i]*.05})`;c.lineWidth=1;
-                c.beginPath();c.moveTo(cx,cy);c.lineTo(ox,oy);c.stroke();
+                // Orbit line -- const white, alpha via globalAlpha
+                c.strokeStyle='#ffffff';c.globalAlpha=.03+selectedGlow[i]*.05;c.lineWidth=1;
+                c.beginPath();c.moveTo(cx,cy);c.lineTo(ox,oy);c.stroke();c.globalAlpha=1;
 
                 // Node
                 const sz=6+selectedGlow[i]*4;
@@ -1681,7 +2154,7 @@ export function RadioOrbit() {
                 c.fillStyle=active?'#fff':'#9999b8';c.font="600 9px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
                 c.fillText(names[i],ox,oy);
             }
-            lbl(c,'OPTION '+names[sel],cx,st.h+10,colors[sel]);
+            lbl(c,OPTS[sel],cx,st.h+10,colors[sel]);
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
@@ -1693,9 +2166,14 @@ export function RadioOrbit() {
 // ===========================================================
 
 /** 9. Password Strength -- Segmented bar with color progression and label. */
-export function PasswordStrength() {
+export function PasswordStrength(o = {}) {
     let segs=[0,0,0,0];
-    const labels=['WEAK','FAIR','GOOD','STRONG'],colors=['#ff6b6b','#fbbf24','#38bdf8','#6ee7b6'];
+    const labels=['WEAK','FAIR','GOOD','STRONG'];
+    // `colors` is the 4-step strength ramp; `theme` seeds it. Normalised to 4.
+    const base = o.colors ? o.colors
+        : (o.theme ? [o.theme.light, o.theme.mid, o.theme.dark, o.theme.light] : ['#ff6b6b','#fbbf24','#38bdf8','#6ee7b6']);
+    const colors = base.length >= 4 ? base : [base[0], base[1 % base.length], base[2 % base.length], base[3 % base.length]];
+    const noneColor = (o.theme && o.theme.mid) || '#666';
     return {
         tick(c,dt,now,st) {
             const level=Math.ceil(st.val*4);
@@ -1714,14 +2192,23 @@ export function PasswordStrength() {
             }
 
             const idx=clamp(level-1,0,3);
-            lbl(c,level>0?labels[idx]:'NONE',st.w/2,st.h/2+16,level>0?colors[idx]:'#666');
+            lbl(c,level>0?labels[idx]:'NONE',st.w/2,st.h/2+16,level>0?colors[idx]:noneColor);
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
 }
 
 /** 10. Water Level -- Animated wave surface inside a container. */
-export function WaterLevel() {
+export function WaterLevel(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', accent2: '#6ee7b6', accent3: '#fbbf24', dim: '#e2e2f0' });
+    const themed = !!(o.theme || o.colors);
+    const surfHi = themed ? rgbaOf(P.accent, .3) : 'rgba(56,189,248,.3)';
+    const surfMid = themed ? rgbaOf(P.accent2, .25) : 'rgba(110,231,182,.25)';
+    const surfLo = themed ? rgbaOf(P.accent3, .2) : 'rgba(251,191,36,.2)';
+    const deepHi = themed ? rgbaOf(P.accent, .15) : 'rgba(56,189,248,.15)';
+    const deepMid = themed ? rgbaOf(P.accent2, .1) : 'rgba(110,231,182,.1)';
+    const deepLo = themed ? rgbaOf(P.accent3, .08) : 'rgba(251,191,36,.08)';
+    const FONT = pickFont(o, "700 12px 'JetBrains Mono',monospace");
     let displayVal=0, wavePhase=0;
     return {
         tick(c,dt,now,st) {
@@ -1737,7 +2224,7 @@ export function WaterLevel() {
             c.save();c.beginPath();rr(c,bx+1,by+1,bw-2,bh-2,5);c.clip();
 
             // Wave surface
-            c.fillStyle=displayVal>.7?'rgba(56,189,248,.3)':displayVal>.3?'rgba(110,231,182,.25)':'rgba(251,191,36,.2)';
+            c.fillStyle=displayVal>.7?surfHi:displayVal>.3?surfMid:surfLo;
             c.beginPath();c.moveTo(bx,by+bh);
             for(let x=0;x<=bw;x++){
                 const wave=Math.sin(wavePhase+x*0.08)*3+Math.sin(wavePhase*1.5+x*0.12)*2;
@@ -1746,23 +2233,34 @@ export function WaterLevel() {
             c.lineTo(bx+bw,by+bh);c.closePath();c.fill();
 
             // Deeper water
-            c.fillStyle=displayVal>.7?'rgba(56,189,248,.15)':displayVal>.3?'rgba(110,231,182,.1)':'rgba(251,191,36,.08)';
+            c.fillStyle=displayVal>.7?deepHi:displayVal>.3?deepMid:deepLo;
             c.fillRect(bx,waterY+5,bw,bh);
 
             c.restore();
 
-            c.fillStyle='#e2e2f0';c.font="700 12px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-            c.fillText(Math.round(displayVal*100)+'%',st.w/2,st.h/2);
+            c.fillStyle=P.dim;c.font=FONT;c.textAlign='center';c.textBaseline='middle';
+            c.fillText(PCT[Math.round(displayVal*100)],st.w/2,st.h/2);
             if(st.focused)fr(c,st.w,st.h,6);
         },
     };
 }
 
 /** 11. Heat Map -- 5×3 grid of cells that heat up based on slider. */
-export function HeatMap({seed=42}={}) {
+export function HeatMap(o = {}) {
+    const {seed=42}=o;
+    const P = resolveTheme(o, { accent: '#ff5014', dim: '#9999b8' });
     const rng=new Random(seed);
     const N=15,thresholds=new Float32Array(N);
     let vals=new Float32Array(N);
+    // Heat-color LUT (rgb quantized by heat): a const lookup + globalAlpha instead
+    // of a per-cell rgb() template every frame. Default = the historical fire ramp
+    // (byte-identical); a theme/colors override interpolates cool -> accent.
+    const hotP = (o.theme || o.colors) ? rgbTriplet(P.accent, '255,80,20').split(',').map(Number) : null;
+    const HEATC=[];
+    for(let i=0;i<=32;i++){
+        if(hotP){const p=i/32;HEATC[i]='rgb('+Math.round(100+(hotP[0]-100)*p)+','+Math.round(60+(hotP[1]-60)*p)+','+Math.round(60+(hotP[2]-60)*p)+')';}
+        else HEATC[i]='rgb('+Math.round(100+i/32*155)+','+Math.round(60+i/32*20)+','+Math.round(60-i/32*40)+')';
+    }
     return {
         init(){for(let i=0;i<N;i++)thresholds[i]=rng.range(0,1)},
         tick(c,dt,now,st) {
@@ -1775,11 +2273,12 @@ export function HeatMap({seed=42}={}) {
                 const col=i%cols,row=(i/cols)|0;
                 const x=col*(cw+gap),y=row*(ch+gap);
                 const heat=vals[i];
-                const r=Math.round(100+heat*155),g=Math.round(60+heat*20),b=Math.round(60-heat*40);
-                c.fillStyle=heat>.1?`rgba(${r},${g},${b},${.15+heat*.4})`:'rgba(255,255,255,.04)';
+                if(heat>.1){c.fillStyle=HEATC[(heat*32)|0]||HEATC[32];c.globalAlpha=.15+heat*.4;}
+                else{c.fillStyle='rgba(255,255,255,.04)';c.globalAlpha=1;}
                 rr(c,x,y,cw,ch,3);c.fill();
+                c.globalAlpha=1;
             }
-            lbl(c,Math.round(st.val*100)+'%',st.w/2,st.h+10);
+            lbl(c,PCT[Math.round(st.val*100)],st.w/2,st.h+10,P.dim);
             if(st.focused)fr(c,st.w,st.h,3);
         },
     };
@@ -1791,54 +2290,73 @@ export function HeatMap({seed=42}={}) {
 // ===========================================================
 
 /** 12. Day/Night Toggle -- Sun/moon transition with star particles. */
-export function DayNightToggle({seed=42}={}) {
+export function DayNightToggle(o = {}) {
+    const {seed=42}=o;
+    const P = resolveTheme(o, { accent: '#fbbf24', dim: '#9999b8', surface: '#d4d4e8' });
     const rng=new Random(seed);
-    let t=0, stars=[];
+    // Sky-color LUT (day->night rgb quantized by t): a const lookup, not an
+    // rgb() template per frame. Stars are a fixed pool filled in init.
+    const SKY=[];
+    for(let i=0;i<=32;i++){const u=i/32;SKY[i]='rgb('+Math.round(lerp(135,10,u))+','+Math.round(lerp(206,10,u))+','+Math.round(lerp(250,30,u))+')';}
+    const STARS=30;
+    const star=[];
+    let t=0;
     return {
-        init(ctx,w,h){for(let i=0;i<30;i++)stars.push({x:rng.range(4,w-4),y:rng.range(4,h-4),twinkle:rng.range(0,PI2)})},
+        init(ctx,w,h){for(let i=0;i<STARS;i++)star[i]={x:rng.range(4,w-4),y:rng.range(4,h-4),twinkle:rng.range(0,PI2)}},
         tick(c,dt,now,st) {
             t=lerp(t,st.toggled?1:0,dt*6);
-            const skyR=Math.round(lerp(135,10,t)),skyG=Math.round(lerp(206,10,t)),skyB=Math.round(lerp(250,30,t));
 
-            // Sky background
-            c.fillStyle=`rgb(${skyR},${skyG},${skyB})`;rr(c,0,0,st.w,st.h,st.h/2);c.fill();
+            // Sky background (LUT)
+            c.fillStyle=SKY[(t*32)|0]||SKY[32];rr(c,0,0,st.w,st.h,st.h/2);c.fill();
 
-            // Stars (night only)
+            // Stars (night only) -- const white, per-star alpha via globalAlpha
             if(t>.3){
-                for(const s of stars){
+                c.fillStyle='#ffffff';
+                for(let i=0;i<STARS;i++){
+                    const s=star[i];
                     const tw=Math.sin(now/400+s.twinkle)*.5+.5;
-                    c.fillStyle=`rgba(255,255,255,${(t-.3)/.7*tw*.6})`;
+                    c.globalAlpha=(t-.3)/.7*tw*.6;
                     c.fillRect(s.x,s.y,1,1);
                 }
+                c.globalAlpha=1;
             }
 
             // Sun/Moon
             const orbX=lerp(18,st.w-18,t);
             if(t<.5){
                 // Sun
-                c.fillStyle='#fbbf24';c.beginPath();c.arc(orbX,st.h/2,10,0,PI2);c.fill();
-                // Rays
-                c.strokeStyle=`rgba(251,191,36,${.3*(1-t*2)})`;c.lineWidth=1;
+                c.fillStyle=P.accent;c.beginPath();c.arc(orbX,st.h/2,10,0,PI2);c.fill();
+                // Rays -- const color, alpha via globalAlpha
+                c.strokeStyle=P.accent;c.globalAlpha=.3*(1-t*2);c.lineWidth=1;
                 for(let i=0;i<8;i++){const a=now/800+i*Math.PI/4;c.beginPath();c.moveTo(orbX+Math.cos(a)*12,st.h/2+Math.sin(a)*12);c.lineTo(orbX+Math.cos(a)*16,st.h/2+Math.sin(a)*16);c.stroke()}
+                c.globalAlpha=1;
             } else {
                 // Moon
-                c.fillStyle='#d4d4e8';c.beginPath();c.arc(orbX,st.h/2,10,0,PI2);c.fill();
-                // Crater shadows
-                c.fillStyle=`rgba(0,0,0,${(t-.5)*2*.15})`;
+                c.fillStyle=P.surface;c.beginPath();c.arc(orbX,st.h/2,10,0,PI2);c.fill();
+                // Crater shadows -- const black, alpha via globalAlpha
+                c.fillStyle='#000000';c.globalAlpha=(t-.5)*2*.15;
                 c.beginPath();c.arc(orbX-3,st.h/2-2,3,0,PI2);c.fill();
                 c.beginPath();c.arc(orbX+4,st.h/2+3,2,0,PI2);c.fill();
+                c.globalAlpha=1;
             }
 
-            lbl(c,st.toggled?'NIGHT':'DAY',st.w/2,st.h+14,st.toggled?'#9999b8':'#fbbf24');
+            lbl(c,st.toggled?'NIGHT':'DAY',st.w/2,st.h+14,st.toggled?P.dim:P.accent);
             if(st.focused)fr(c,st.w,st.h,st.h/2);
         },
     };
 }
 
 /** 13. Reaction Picker -- 5 emoji-style circles that inflate on hover region. */
-export function ReactionPicker() {
+export function ReactionPicker(o = {}) {
     let sizes=new Float32Array(5), selected=-1;
-    const emojis=['\u{1F610}','\u{1F642}','\u{1F60A}','\u{1F604}','\u{1F929}'],colors=['#9999b8','#fbbf24','#fb923c','#f472b6','#ff6b6b'];
+    const emojis=['\u{1F610}','\u{1F642}','\u{1F60A}','\u{1F604}','\u{1F929}'];
+    // `colors` is the 5-reaction palette; `theme` seeds it. Normalised to 5.
+    const base = o.colors ? o.colors
+        : (o.theme ? [o.theme.light,o.theme.mid,o.theme.dark,o.theme.light,o.theme.mid] : ['#9999b8','#fbbf24','#fb923c','#f472b6','#ff6b6b']);
+    const colors = base.length>=5 ? base : Array.from({length:5},(_,i)=>base[i%base.length]);
+    const colors30=colors.map((col)=>col+'30');                  // active fill (was `${color}30`)
+    const REACT_LABELS=['MEH','OK','NICE','GREAT','LOVE'];        // was a per-frame array literal
+    const FONTS=[]; for(let i=0;i<=48;i++)FONTS[i]=i+'px sans-serif'; // emoji font by rounded size
     return {
         tick(c,dt,now,st,ptr) {
             const gap=st.w/5;
@@ -1850,11 +2368,11 @@ export function ReactionPicker() {
                 const cx=gap*i+gap/2,cy=st.h/2;
 
                 // Circle
-                c.fillStyle=active?`${colors[i]}30`:'rgba(255,255,255,.04)';
+                c.fillStyle=active?colors30[i]:'rgba(255,255,255,.04)';
                 c.beginPath();c.arc(cx,cy-sizes[i]+10,sizes[i],0,PI2);c.fill();
 
-                // Emoji face (simplified)
-                c.font=`${Math.round(sizes[i]*1.2)}px sans-serif`;c.textAlign='center';c.textBaseline='middle';
+                // Emoji face (simplified) -- font from a const-string LUT
+                c.font=FONTS[Math.round(sizes[i]*1.2)]||FONTS[48];c.textAlign='center';c.textBaseline='middle';
                 c.fillText(emojis[i],cx,cy-sizes[i]+10);
             }
 
@@ -1865,18 +2383,21 @@ export function ReactionPicker() {
                 c.fillRect(sx-10,st.h-4,20,2);
             }
 
-            lbl(c,hoverIdx>=0?['MEH','OK','NICE','GREAT','LOVE'][hoverIdx]:'REACT',st.w/2,st.h+10,hoverIdx>=0?colors[hoverIdx]:'#9999b8');
+            lbl(c,hoverIdx>=0?REACT_LABELS[hoverIdx]:'REACT',st.w/2,st.h+10,hoverIdx>=0?colors[hoverIdx]:'#9999b8');
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
 }
 
 /** 14. Notification Bell -- Bell icon with bounce and count badge. */
-export function NotificationBell() {
+export function NotificationBell(o = {}) {
+    const P = resolveTheme(o, { accent: '#fbbf24', accent2: '#ff6b6b' });
+    const TXT = pickText(o, 'NOTIFY');
     let count=0, bellAngle=0, bellVel=0, badgeScale=0;
+    let badgeStr='0'; // rebuilt only on click (count change), not per frame
     return {
         onClick() {
-            count++;bellVel=6;badgeScale=1.5;
+            count++;bellVel=6;badgeScale=1.5;badgeStr=count>99?'99+':String(count);
         },
         tick(c,dt,now,st) {
             bellVel+=(0-bellAngle)*20*dt;bellVel*=0.9;bellAngle+=bellVel*dt;
@@ -1885,23 +2406,23 @@ export function NotificationBell() {
 
             // Bell body
             c.save();c.translate(cx,cy-4);c.rotate(bellAngle*0.3);
-            c.fillStyle='#fbbf24';
+            c.fillStyle=P.accent;
             c.beginPath();c.moveTo(-10,0);c.quadraticCurveTo(-12,-14,0,-18);c.quadraticCurveTo(12,-14,10,0);c.lineTo(-10,0);c.fill();
             // Clapper
-            c.fillStyle='#fbbf24';c.beginPath();c.arc(0,3,3,0,PI2);c.fill();
+            c.fillStyle=P.accent;c.beginPath();c.arc(0,3,3,0,PI2);c.fill();
             c.restore();
 
             // Badge
             if(count>0){
                 const bx=cx+10,by=cy-16;
                 c.save();c.translate(bx,by);c.scale(badgeScale,badgeScale);
-                c.fillStyle='#ff6b6b';c.beginPath();c.arc(0,0,8,0,PI2);c.fill();
+                c.fillStyle=P.accent2;c.beginPath();c.arc(0,0,8,0,PI2);c.fill();
                 c.fillStyle='#fff';c.font="700 8px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-                c.fillText(count>99?'99+':String(count),0,0);
+                c.fillText(badgeStr,0,0);
                 c.restore();
             }
 
-            lbl(c,'NOTIFY',cx,st.h+10);
+            lbl(c,TXT,cx,st.h+10);
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
@@ -1913,9 +2434,12 @@ export function NotificationBell() {
 // ===========================================================
 
 /** 15. Typewriter Field -- Characters appear one by one with cursor blink. */
-export function TypewriterField() {
-    const text='Hello World';
+export function TypewriterField(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', dim2: '#8888aa' });
+    const FONT = pickFont(o, "500 13px 'JetBrains Mono',monospace");
+    const text=pickText(o, 'Hello World');
     let charIdx=0, timer=0, cursorBlink=0, typing=false;
+    let display='', dispW=0, lastIdx=-1; // substring rebuilt only when a char lands
     return {
         onToggle(checked){typing=checked;if(checked){charIdx=0;timer=0}},
         tick(c,dt,now,st) {
@@ -1925,24 +2449,26 @@ export function TypewriterField() {
             c.fillStyle='rgba(255,255,255,.04)';rr(c,0,0,st.w,st.h,6);c.fill();
             c.strokeStyle='rgba(255,255,255,.06)';c.lineWidth=1;rr(c,0,0,st.w,st.h,6);c.stroke();
 
-            const display=text.substring(0,charIdx);
-            c.fillStyle='#6ee7b6';c.font="500 13px 'JetBrains Mono',monospace";c.textAlign='left';c.textBaseline='middle';
+            c.fillStyle=P.accent;c.font=FONT;c.textAlign='left';c.textBaseline='middle';
+            // Rebuild the visible substring + its width only when a char is added.
+            if(charIdx!==lastIdx){lastIdx=charIdx;display=text.substring(0,charIdx);dispW=c.measureText(display).width;}
             c.fillText(display,8,st.h/2);
 
             // Cursor
             if(cursorBlink<1){
-                const tw=c.measureText(display).width;
-                c.fillStyle='#6ee7b6';c.fillRect(9+tw,st.h/2-8,1.5,16);
+                c.fillStyle=P.accent;c.fillRect(9+dispW,st.h/2-8,1.5,16);
             }
 
-            lbl(c,typing?'TYPING...':'TOGGLE TO TYPE',st.w/2,st.h+10,typing?'#6ee7b6':'#8888aa');
+            lbl(c,typing?'TYPING...':'TOGGLE TO TYPE',st.w/2,st.h+10,typing?P.accent:P.dim2);
             if(st.focused)fr(c,st.w,st.h,6);
         },
     };
 }
 
 /** 16. Sound Wave Button -- Oscillating waveform on press, static on idle. */
-export function SoundWaveBtn() {
+export function SoundWaveBtn(o = {}) {
+    const P = resolveTheme(o, { accent: '#f472b6', dim: '#9999b8' });
+    const FONT = pickFont(o, "600 11px 'Space Grotesk',sans-serif");
     let intensity=0, phase=0;
     return {
         onClick(){intensity=1},
@@ -1954,7 +2480,7 @@ export function SoundWaveBtn() {
 
             // Waveform
             const cy=st.h/2, amp=10*intensity;
-            c.strokeStyle=intensity>.1?'#f472b6':'rgba(255,255,255,.08)';c.lineWidth=2;
+            c.strokeStyle=intensity>.1?P.accent:'rgba(255,255,255,.08)';c.lineWidth=2;
             c.beginPath();
             for(let x=0;x<=st.w;x++){
                 const freq=x*0.1;
@@ -1969,7 +2495,7 @@ export function SoundWaveBtn() {
                 c.beginPath();c.moveTo(10,cy);c.lineTo(st.w-10,cy);c.stroke();
             }
 
-            c.fillStyle=intensity>.1?'#f472b6':'#9999b8';c.font="600 11px 'Space Grotesk',sans-serif";c.textAlign='center';c.textBaseline='middle';
+            c.fillStyle=intensity>.1?P.accent:P.dim;c.font=FONT;c.textAlign='center';c.textBaseline='middle';
             c.fillText(intensity>.1?'\u25CF  REC':'RECORD',st.w/2,st.h/2);
             if(st.focused)fr(c,st.w,st.h,10);
         },
@@ -1977,7 +2503,8 @@ export function SoundWaveBtn() {
 }
 
 /** 17. Upload Progress -- File icon fills from bottom as slider increases. */
-export function UploadProgress() {
+export function UploadProgress(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#38bdf8', dim: '#9999b8' });
     let displayVal=0;
     return {
         tick(c,dt,now,st) {
@@ -1993,8 +2520,8 @@ export function UploadProgress() {
 
             // Fill
             const fillH=fh*displayVal;
-            const col=displayVal>=1?'#6ee7b6':'#38bdf8';
-            c.fillStyle=`${col}30`;
+            const col=displayVal>=1?P.accent:P.accent2;
+            c.fillStyle=col+'30'; // was `${col}30`
             c.save();c.beginPath();c.rect(fx+1,fy+fh-fillH,fw-1,fillH);c.clip();
             c.beginPath();c.moveTo(fx,fy);c.lineTo(fx+fw-fold,fy);c.lineTo(fx+fw,fy+fold);c.lineTo(fx+fw,fy+fh);c.lineTo(fx,fy+fh);c.closePath();c.fill();
             c.restore();
@@ -2009,7 +2536,7 @@ export function UploadProgress() {
             }
             c.lineCap='butt';
 
-            lbl(c,displayVal>=.99?'DONE':Math.round(displayVal*100)+'%',cx,st.h+10,displayVal>=.99?'#6ee7b6':'#9999b8');
+            lbl(c,displayVal>=.99?'DONE':PCT[Math.round(displayVal*100)],cx,st.h+10,displayVal>=.99?P.accent:P.dim);
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
@@ -2021,31 +2548,51 @@ export function UploadProgress() {
 // ===========================================================
 
 /** 18. Scratch Reveal -- Drag to erase a mask and reveal the prize beneath. */
-export function ScratchReveal({seed=42}={}) {
+export function ScratchReveal(o = {}) {
+    const {seed=42}=o;
+    const P = resolveTheme(o, { accent: '#6ee7b6', dim: '#9999b8' });
+    const prizeBg = (o.theme || o.colors) ? rgbaOf(P.accent, .08) : 'rgba(110,231,182,.08)';
+    const FONT = pickFont(o, "700 14px 'JetBrains Mono',monospace");
     const rng=new Random(seed);
-    let revealed=0, scratches=[];
+    // Fixed scratch pool (holes persist). Once all SCR slots are used the scratch
+    // stops adding holes -- existing marks are never overwritten, so earlier
+    // scratches never "heal". Spawn position derives from st.w via lastW.
+    const SCR=64;
+    const scr=[];
+    for(let i=0;i<SCR;i++)scr[i]={x:0,y:0,r:0,live:false};
+    let revealed=0, lastW=200;
+    function spawn(val){
+        for(let i=0;i<SCR;i++){
+            const s=scr[i];
+            if(!s.live){ s.x=val*lastW; s.y=rng.range(2,26); s.r=rng.range(6,14); s.live=true; return; }
+        }
+    }
     return {
         onDrag(val,vx) {
             if(Math.abs(vx)>0.5){
-                for(let i=0;i<3;i++)scratches.push({x:val*200,y:rng.range(2,26),r:rng.range(6,14)});
+                for(let i=0;i<3;i++)spawn(val);
                 revealed=Math.min(1,revealed+0.015);
             }
         },
         tick(c,dt,now,st) {
+            lastW=st.w;
             // Prize background
-            c.fillStyle='rgba(110,231,182,.08)';rr(c,0,0,st.w,st.h,8);c.fill();
+            c.fillStyle=prizeBg;rr(c,0,0,st.w,st.h,8);c.fill();
 
-            // Prize text (always there, hidden by mask)
-            c.fillStyle=`rgba(110,231,182,${.1+revealed*.6})`;c.font="700 14px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
+            // Prize text -- const color, alpha via globalAlpha
+            c.fillStyle=P.accent;c.globalAlpha=.1+revealed*.6;c.font=FONT;c.textAlign='center';c.textBaseline='middle';
             c.fillText(revealed>.6?'\u{1F389} WINNER!':'? ? ?',st.w/2,st.h/2);
+            c.globalAlpha=1;
 
             // Scratch mask (gets holes)
             if(revealed<.95){
                 c.fillStyle='rgba(40,40,60,.85)';rr(c,0,0,st.w,st.h,8);c.fill();
 
-                // Cut holes
+                // Cut holes -- fixed ring, indexed loop
                 c.globalCompositeOperation='destination-out';
-                for(const s of scratches){
+                for(let i=0;i<SCR;i++){
+                    const s=scr[i];
+                    if(!s.live)continue;
                     c.beginPath();c.arc(s.x,s.y,s.r,0,PI2);c.fill();
                 }
                 c.globalCompositeOperation='source-over';
@@ -2056,15 +2603,18 @@ export function ScratchReveal({seed=42}={}) {
                 c.fillRect(shimX-2,0,4,st.h);
             }
 
-            lbl(c,revealed>.6?'REVEALED!':'DRAG TO SCRATCH',st.w/2,st.h+10,revealed>.6?'#6ee7b6':'#9999b8');
+            lbl(c,revealed>.6?'REVEALED!':'DRAG TO SCRATCH',st.w/2,st.h+10,revealed>.6?P.accent:P.dim);
             if(st.focused)fr(c,st.w,st.h,8);
         },
     };
 }
 
 /** 19. Timer Countdown -- Circular countdown timer. Toggle starts/stops. */
-export function TimerCountdown() {
+export function TimerCountdown(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#fbbf24', accent3: '#ff6b6b', dim: '#e2e2f0', dim2: '#8888aa' });
+    const FONT = pickFont(o, "700 16px 'JetBrains Mono',monospace");
     let timeLeft=10, running=false, flashAlpha=0;
+    let timeStr='10.0s', lastTenths=-1; // rebuilt at ~10 Hz, not per frame
     return {
         onToggle(checked) { running=checked; if(checked)timeLeft=10; },
         tick(c,dt,now,st) {
@@ -2075,29 +2625,32 @@ export function TimerCountdown() {
             const cx=st.w/2,cy=st.h/2,R=Math.min(cx,cy)-4;
 
             // Flash bg when done
-            if(flashAlpha>0){c.fillStyle=`rgba(255,100,100,${flashAlpha*.1})`;c.beginPath();c.arc(cx,cy,R+4,0,PI2);c.fill();}
+            if(flashAlpha>0){c.fillStyle='#ff6464';c.globalAlpha=flashAlpha*.1;c.beginPath();c.arc(cx,cy,R+4,0,PI2);c.fill();c.globalAlpha=1;}
 
             // Background ring
             c.strokeStyle='rgba(255,255,255,.06)';c.lineWidth=4;c.beginPath();c.arc(cx,cy,R,0,PI2);c.stroke();
 
             // Progress arc
             const progress=timeLeft/10;
-            const col=timeLeft>3?'#6ee7b6':timeLeft>1?'#fbbf24':'#ff6b6b';
+            const col=timeLeft>3?P.accent:timeLeft>1?P.accent2:P.accent3;
             c.strokeStyle=col;c.lineWidth=4;
             c.beginPath();c.arc(cx,cy,R,-Math.PI/2,-Math.PI/2+progress*PI2,false);c.stroke();
 
             // Time text
-            c.fillStyle='#e2e2f0';c.font="700 16px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-            c.fillText(timeLeft.toFixed(1)+'s',cx,cy);
+            const tenths=Math.round(timeLeft*10);
+            if(tenths!==lastTenths){lastTenths=tenths;timeStr=(tenths/10).toFixed(1)+'s';}
+            c.fillStyle=P.dim;c.font=FONT;c.textAlign='center';c.textBaseline='middle';
+            c.fillText(timeStr,cx,cy);
 
-            lbl(c,running?(timeLeft>0?'RUNNING':'TIME UP!'):'TOGGLE TO START',cx,st.h+10,running?col:'#8888aa');
+            lbl(c,running?(timeLeft>0?'RUNNING':'TIME UP!'):'TOGGLE TO START',cx,st.h+10,running?col:P.dim2);
             if(st.focused)fr(c,st.w,st.h,R);
         },
     };
 }
 
 /** 20. Pull Refresh -- Drag down to charge, release to spin. */
-export function PullRefresh() {
+export function PullRefresh(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#38bdf8', dim: '#9999b8' });
     let pullAmt=0, spinning=false, spinAngle=0, spinTimer=0;
     return {
         onDrag(val) { if(!spinning) pullAmt=val; },
@@ -2117,24 +2670,25 @@ export function PullRefresh() {
                 // Spinner arcs
                 for(let i=0;i<3;i++){
                     const a=spinAngle+i*PI2/3;
-                    c.strokeStyle=`rgba(56,189,248,${.3+i*.2})`;c.lineWidth=3;
+                    c.strokeStyle=P.accent2;c.globalAlpha=.3+i*.2;c.lineWidth=3;
                     c.beginPath();c.arc(cx,cy,16,a,a+.8);c.stroke();
                 }
-                lbl(c,'LOADING...',cx,st.h+10,'#38bdf8');
+                c.globalAlpha=1;
+                lbl(c,'LOADING...',cx,st.h+10,P.accent2);
             } else {
                 // Arrow that stretches with pull
                 const stretch=pullAmt*14;
-                c.strokeStyle=pullAmt>.6?'#6ee7b6':'rgba(255,255,255,.15)';c.lineWidth=2;c.lineCap='round';
+                c.strokeStyle=pullAmt>.6?P.accent:'rgba(255,255,255,.15)';c.lineWidth=2;c.lineCap='round';
                 c.beginPath();c.moveTo(cx,cy-8-stretch);c.lineTo(cx,cy+4);c.stroke();
                 c.beginPath();c.moveTo(cx-5,cy+0);c.lineTo(cx,cy+4);c.lineTo(cx+5,cy+0);c.stroke();
                 c.lineCap='butt';
 
                 // Fill ring
                 if(pullAmt>0){
-                    c.strokeStyle=pullAmt>.6?'#6ee7b6':'rgba(255,255,255,.1)';c.lineWidth=2;
+                    c.strokeStyle=pullAmt>.6?P.accent:'rgba(255,255,255,.1)';c.lineWidth=2;
                     c.beginPath();c.arc(cx,cy,20,-Math.PI/2,-Math.PI/2+pullAmt*PI2);c.stroke();
                 }
-                lbl(c,pullAmt>.6?'RELEASE!':'DRAG SLIDER',cx,st.h+10,pullAmt>.6?'#6ee7b6':'#9999b8');
+                lbl(c,pullAmt>.6?'RELEASE!':'DRAG SLIDER',cx,st.h+10,pullAmt>.6?P.accent:P.dim);
             }
             if(st.focused)fr(c,st.w,st.h,24);
         },
@@ -2300,60 +2854,60 @@ export const RECIPES = Object.assign(Object.create(null), {
  *
  *   type       'toggle' | 'button' | 'slider' -- the native element it mounts on
  *   family     display grouping (Toggles, Buttons, Sliders, Knobs, ...)
- *   themeable  accepts { colors, theme } (false for all until a later pass)
- *   motionSafe inherently-calm under prefers-reduced-motion (false for all)
+ *   themeable  accepts { colors, theme } (true for all as of U3b/1.4.0)
+ *   motionSafe inherently-calm under prefers-reduced-motion (false for all -- U5)
  */
 export const RECIPE_META = [
-    { id: 'swarmToggle', name: 'Swarm Toggle', type: 'toggle', family: 'Toggles', themeable: false, motionSafe: false },
-    { id: 'liquidToggle', name: 'Liquid Toggle', type: 'toggle', family: 'Toggles', themeable: false, motionSafe: false },
-    { id: 'neonPulseToggle', name: 'Neon Pulse Toggle', type: 'toggle', family: 'Toggles', themeable: false, motionSafe: false },
-    { id: 'magneticButton', name: 'Magnetic Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'shatterButton', name: 'Shatter Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'confettiButton', name: 'Confetti Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'glitchButton', name: 'Glitch Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'sparkSlider', name: 'Spark Slider', type: 'slider', family: 'Sliders', themeable: false, motionSafe: false },
-    { id: 'cosmicSlider', name: 'Cosmic Slider', type: 'slider', family: 'Sliders', themeable: false, motionSafe: false },
-    { id: 'laserSlider', name: 'Laser Slider', type: 'slider', family: 'Sliders', themeable: false, motionSafe: false },
-    { id: 'pendulumToggle', name: 'Pendulum Toggle', type: 'toggle', family: 'Toggles', themeable: false, motionSafe: false },
-    { id: 'circuitToggle', name: 'Circuit Toggle', type: 'toggle', family: 'Toggles', themeable: false, motionSafe: false },
-    { id: 'lightningToggle', name: 'Lightning Toggle', type: 'toggle', family: 'Toggles', themeable: false, motionSafe: false },
-    { id: 'dnaToggle', name: 'Dna Toggle', type: 'toggle', family: 'Toggles', themeable: false, motionSafe: false },
-    { id: 'heartbeatButton', name: 'Heartbeat Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'breathingButton', name: 'Breathing Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'inkSplashButton', name: 'Ink Splash Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'pixelDissolveButton', name: 'Pixel Dissolve Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'fireworkButton', name: 'Firework Button', type: 'button', family: 'Buttons', themeable: false, motionSafe: false },
-    { id: 'auroraSlider', name: 'Aurora Slider', type: 'slider', family: 'Sliders', themeable: false, motionSafe: false },
-    { id: 'waveSlider', name: 'Wave Slider', type: 'slider', family: 'Sliders', themeable: false, motionSafe: false },
-    { id: 'elasticBandSlider', name: 'Elastic Band Slider', type: 'slider', family: 'Sliders', themeable: false, motionSafe: false },
-    { id: 'gravitySlider', name: 'Gravity Slider', type: 'slider', family: 'Sliders', themeable: false, motionSafe: false },
-    { id: 'orbitLoader', name: 'Orbit Loader', type: 'toggle', family: 'Loaders', themeable: false, motionSafe: false },
-    { id: 'helixLoader', name: 'Helix Loader', type: 'toggle', family: 'Loaders', themeable: false, motionSafe: false },
-    { id: 'rippleCheck', name: 'Ripple Check', type: 'toggle', family: 'Checkboxes', themeable: false, motionSafe: false },
-    { id: 'morphCheck', name: 'Morph Check', type: 'toggle', family: 'Checkboxes', themeable: false, motionSafe: false },
-    { id: 'flameCounter', name: 'Flame Counter', type: 'slider', family: 'Counters', themeable: false, motionSafe: false },
-    { id: 'glitchCounter', name: 'Glitch Counter', type: 'slider', family: 'Counters', themeable: false, motionSafe: false },
-    { id: 'bubbleRating', name: 'Bubble Rating', type: 'slider', family: 'Rating', themeable: false, motionSafe: false },
-    { id: 'volumeKnob', name: 'Volume Knob', type: 'slider', family: 'Knobs', themeable: false, motionSafe: false },
-    { id: 'compassKnob', name: 'Compass Knob', type: 'slider', family: 'Knobs', themeable: false, motionSafe: false },
-    { id: 'ringProgress', name: 'Ring Progress', type: 'slider', family: 'Progress', themeable: false, motionSafe: false },
-    { id: 'batteryGauge', name: 'Battery Gauge', type: 'slider', family: 'Progress', themeable: false, motionSafe: false },
-    { id: 'signalMeter', name: 'Signal Meter', type: 'slider', family: 'Progress', themeable: false, motionSafe: false },
-    { id: 'pillTabs', name: 'Pill Tabs', type: 'button', family: 'Controls', themeable: false, motionSafe: false },
-    { id: 'stepper', name: 'Stepper', type: 'button', family: 'Controls', themeable: false, motionSafe: false },
-    { id: 'radioOrbit', name: 'Radio Orbit', type: 'slider', family: 'Controls', themeable: false, motionSafe: false },
-    { id: 'passwordStrength', name: 'Password Strength', type: 'slider', family: 'Indicators', themeable: false, motionSafe: false },
-    { id: 'waterLevel', name: 'Water Level', type: 'slider', family: 'Indicators', themeable: false, motionSafe: false },
-    { id: 'heatMap', name: 'Heat Map', type: 'slider', family: 'Indicators', themeable: false, motionSafe: false },
-    { id: 'dayNightToggle', name: 'Day Night Toggle', type: 'toggle', family: 'Mood', themeable: false, motionSafe: false },
-    { id: 'reactionPicker', name: 'Reaction Picker', type: 'button', family: 'Mood', themeable: false, motionSafe: false },
-    { id: 'notificationBell', name: 'Notification Bell', type: 'button', family: 'Mood', themeable: false, motionSafe: false },
-    { id: 'typewriterField', name: 'Typewriter Field', type: 'toggle', family: 'Feedback', themeable: false, motionSafe: false },
-    { id: 'soundWaveBtn', name: 'Sound Wave Btn', type: 'button', family: 'Feedback', themeable: false, motionSafe: false },
-    { id: 'uploadProgress', name: 'Upload Progress', type: 'slider', family: 'Feedback', themeable: false, motionSafe: false },
-    { id: 'scratchReveal', name: 'Scratch Reveal', type: 'slider', family: 'Fun', themeable: false, motionSafe: false },
-    { id: 'timerCountdown', name: 'Timer Countdown', type: 'toggle', family: 'Fun', themeable: false, motionSafe: false },
-    { id: 'pullRefresh', name: 'Pull Refresh', type: 'slider', family: 'Fun', themeable: false, motionSafe: false },
+    { id: 'swarmToggle', name: 'Swarm Toggle', type: 'toggle', family: 'Toggles', themeable: true, motionSafe: false },
+    { id: 'liquidToggle', name: 'Liquid Toggle', type: 'toggle', family: 'Toggles', themeable: true, motionSafe: false },
+    { id: 'neonPulseToggle', name: 'Neon Pulse Toggle', type: 'toggle', family: 'Toggles', themeable: true, motionSafe: false },
+    { id: 'magneticButton', name: 'Magnetic Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'shatterButton', name: 'Shatter Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'confettiButton', name: 'Confetti Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'glitchButton', name: 'Glitch Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'sparkSlider', name: 'Spark Slider', type: 'slider', family: 'Sliders', themeable: true, motionSafe: false },
+    { id: 'cosmicSlider', name: 'Cosmic Slider', type: 'slider', family: 'Sliders', themeable: true, motionSafe: false },
+    { id: 'laserSlider', name: 'Laser Slider', type: 'slider', family: 'Sliders', themeable: true, motionSafe: false },
+    { id: 'pendulumToggle', name: 'Pendulum Toggle', type: 'toggle', family: 'Toggles', themeable: true, motionSafe: false },
+    { id: 'circuitToggle', name: 'Circuit Toggle', type: 'toggle', family: 'Toggles', themeable: true, motionSafe: false },
+    { id: 'lightningToggle', name: 'Lightning Toggle', type: 'toggle', family: 'Toggles', themeable: true, motionSafe: false },
+    { id: 'dnaToggle', name: 'Dna Toggle', type: 'toggle', family: 'Toggles', themeable: true, motionSafe: false },
+    { id: 'heartbeatButton', name: 'Heartbeat Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'breathingButton', name: 'Breathing Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'inkSplashButton', name: 'Ink Splash Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'pixelDissolveButton', name: 'Pixel Dissolve Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'fireworkButton', name: 'Firework Button', type: 'button', family: 'Buttons', themeable: true, motionSafe: false },
+    { id: 'auroraSlider', name: 'Aurora Slider', type: 'slider', family: 'Sliders', themeable: true, motionSafe: false },
+    { id: 'waveSlider', name: 'Wave Slider', type: 'slider', family: 'Sliders', themeable: true, motionSafe: false },
+    { id: 'elasticBandSlider', name: 'Elastic Band Slider', type: 'slider', family: 'Sliders', themeable: true, motionSafe: false },
+    { id: 'gravitySlider', name: 'Gravity Slider', type: 'slider', family: 'Sliders', themeable: true, motionSafe: false },
+    { id: 'orbitLoader', name: 'Orbit Loader', type: 'toggle', family: 'Loaders', themeable: true, motionSafe: false },
+    { id: 'helixLoader', name: 'Helix Loader', type: 'toggle', family: 'Loaders', themeable: true, motionSafe: false },
+    { id: 'rippleCheck', name: 'Ripple Check', type: 'toggle', family: 'Checkboxes', themeable: true, motionSafe: false },
+    { id: 'morphCheck', name: 'Morph Check', type: 'toggle', family: 'Checkboxes', themeable: true, motionSafe: false },
+    { id: 'flameCounter', name: 'Flame Counter', type: 'slider', family: 'Counters', themeable: true, motionSafe: false },
+    { id: 'glitchCounter', name: 'Glitch Counter', type: 'slider', family: 'Counters', themeable: true, motionSafe: false },
+    { id: 'bubbleRating', name: 'Bubble Rating', type: 'slider', family: 'Rating', themeable: true, motionSafe: false },
+    { id: 'volumeKnob', name: 'Volume Knob', type: 'slider', family: 'Knobs', themeable: true, motionSafe: false },
+    { id: 'compassKnob', name: 'Compass Knob', type: 'slider', family: 'Knobs', themeable: true, motionSafe: false },
+    { id: 'ringProgress', name: 'Ring Progress', type: 'slider', family: 'Progress', themeable: true, motionSafe: false },
+    { id: 'batteryGauge', name: 'Battery Gauge', type: 'slider', family: 'Progress', themeable: true, motionSafe: false },
+    { id: 'signalMeter', name: 'Signal Meter', type: 'slider', family: 'Progress', themeable: true, motionSafe: false },
+    { id: 'pillTabs', name: 'Pill Tabs', type: 'button', family: 'Controls', themeable: true, motionSafe: false },
+    { id: 'stepper', name: 'Stepper', type: 'button', family: 'Controls', themeable: true, motionSafe: false },
+    { id: 'radioOrbit', name: 'Radio Orbit', type: 'slider', family: 'Controls', themeable: true, motionSafe: false },
+    { id: 'passwordStrength', name: 'Password Strength', type: 'slider', family: 'Indicators', themeable: true, motionSafe: false },
+    { id: 'waterLevel', name: 'Water Level', type: 'slider', family: 'Indicators', themeable: true, motionSafe: false },
+    { id: 'heatMap', name: 'Heat Map', type: 'slider', family: 'Indicators', themeable: true, motionSafe: false },
+    { id: 'dayNightToggle', name: 'Day Night Toggle', type: 'toggle', family: 'Mood', themeable: true, motionSafe: false },
+    { id: 'reactionPicker', name: 'Reaction Picker', type: 'button', family: 'Mood', themeable: true, motionSafe: false },
+    { id: 'notificationBell', name: 'Notification Bell', type: 'button', family: 'Mood', themeable: true, motionSafe: false },
+    { id: 'typewriterField', name: 'Typewriter Field', type: 'toggle', family: 'Feedback', themeable: true, motionSafe: false },
+    { id: 'soundWaveBtn', name: 'Sound Wave Btn', type: 'button', family: 'Feedback', themeable: true, motionSafe: false },
+    { id: 'uploadProgress', name: 'Upload Progress', type: 'slider', family: 'Feedback', themeable: true, motionSafe: false },
+    { id: 'scratchReveal', name: 'Scratch Reveal', type: 'slider', family: 'Fun', themeable: true, motionSafe: false },
+    { id: 'timerCountdown', name: 'Timer Countdown', type: 'toggle', family: 'Fun', themeable: true, motionSafe: false },
+    { id: 'pullRefresh', name: 'Pull Refresh', type: 'slider', family: 'Fun', themeable: true, motionSafe: false },
 ];
 
 /** Names of every built-in recipe (the keys of RECIPES at load time). */