@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/fourier-field.js

@@ -1,15 +1,17 @@
-import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { n as t } from "./useResolveTokenColor-ChOnCckA.js";
-import { t as n } from "./usePointerVelocityField-BrkqZFhj.js";
-import { n as r, o as i, r as a, s as o } from "./procedural-color.wgsl-C1Y5PkM6.js";
-import { a as s, t as c } from "./useGpuSubstrate-Ceet70xq.js";
-import { c as l, t as u } from "./color-B9jZdhJX.js";
-import { t as d } from "./useGlobalDark-B4HO9LXG.js";
-import { n as f, t as p } from "./prng-B5tIXTtj.js";
-import { a as m, i as h, n as g, r as _, t as v } from "./math-5RcIgCB4.js";
-import { computed as y, createElementBlock as b, createElementVNode as x, defineComponent as S, normalizeClass as C, onMounted as w, onScopeDispose as T, openBlock as E, shallowRef as D, useTemplateRef as O, watch as k } from "vue";
-//#region src/components/custom/fourier-field/constants.ts
-var A = 64, j = 384, M = .15, N = .12, P = .55, F = .35, I = [{
+import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { n as t } from "./useResolveTokenColor-DVT5kwv6.js";
+import { t as n } from "./usePointerVelocityField-CwXyeW0Z.js";
+import { t as r } from "./useRoutePointer-DL7I0gY4.js";
+import { d as i, u as a } from "./pointerFieldMappings-4VtmkOWv.js";
+import { t as o } from "./useGlobalDark-DjKMEQE2.js";
+import { n as s, o as c, r as l, s as u } from "./procedural-color.wgsl-ByduxnzV.js";
+import { a as d, t as f } from "./useGpuSubstrate-DcY584kE.js";
+import { c as p, t as m } from "./color-Bp5jmv4Z.js";
+import { n as h, t as g } from "./prng-B0PLRmR6.js";
+import { a as _, c as v, i as y, n as b, o as x, r as S, s as C, t as w } from "./math-CIEcwsYi.js";
+import { computed as T, createElementBlock as E, createElementVNode as D, defineComponent as O, normalizeClass as k, onMounted as A, onScopeDispose as j, openBlock as M, shallowRef as N, useTemplateRef as P, watch as F } from "vue";
+//#region src/components/fourier-field/constants.ts
+var I = 64, ee = 384, te = .15, L = .4, R = 2.5 / (L + (1 - L) * .5) + .05, ne = .55, z = .35, re = [{
 	L: .62,
 	C: .19,
 	h: 34
@@ -17,34 +19,38 @@ var A = 64, j = 384, M = .15, N = .12, P = .55, F = .35, I = [{
 	L: .86,
 	C: .06,
 	h: 70
-}], L = {
+}], ie = {
 	source: "elliptic",
 	harmonics: 6,
 	showEpicycles: !0,
 	epicycleArms: 6,
 	rainbowChain: !0,
 	trailArc: .43,
-	trailWidth: 3,
+	trailWidth: 5,
 	intensity: 1,
 	harmonicScale: .24,
 	speed: 1,
-	palette: I,
+	palette: re,
 	respectReducedMotion: !0,
 	interactive: !0,
-	squashGain: P,
-	celGain: F
-}, R = "\nconst MAX_PHASORS: i32 = 64;\nconst TAU: f32 = 6.283185307179586;\n\nstruct Phasor {\n  // (re, im, index, _pad)\n  data: vec4<f32>,\n};\n\n// ── Compute uniforms (the typed-struct source-of-truth — see uniformBridgeWGPU.ts) ──\nstruct ComputeUniforms {\n  // c0: (headT, trailArc, _pad, _pad)\n  c0: vec4<f32>,\n  // ints: (harmonicN, epicycleArmN, sampleCount, phasorCount)\n  ints: vec4<i32>,\n};\n\n@group(0) @binding(0) var<uniform> u: ComputeUniforms;\n@group(0) @binding(1) var<storage, read> phasors: array<Phasor>;\n// curveSamples[i] = (x, y, age, _pad)\n@group(0) @binding(2) var<storage, read_write> curveSamples: array<vec4<f32>>;\n// chainTips[k] = (x, y, _pad, _pad) — the running tip after stacking phasor k\n@group(0) @binding(3) var<storage, read_write> chainTips: array<vec4<f32>>;\n\n// The PARTIAL-SUM curve point at parameter t over the first n phasors — the WGSL\n// transcription of math.ts:78-95 (partialSumAt). EXACTLY:\n//   c += vec2(re·cos − im·sin, re·sin + im·cos)  with angle = TAU·index·t.\nfn partialSumAt(t: f32, n: i32) -> vec2<f32> {\n  var c = vec2<f32>(0.0, 0.0);\n  let phasorCount = u.ints.w;\n  let lim = min(n, phasorCount);\n  for (var i = 0; i < MAX_PHASORS; i = i + 1) {\n    if (i >= lim) { break; }\n    let p = phasors[i].data;\n    let re = p.x;\n    let im = p.y;\n    let index = p.z;\n    let angle = TAU * index * t;\n    let cs = cos(angle);\n    let sn = sin(angle);\n    c = c + vec2<f32>(re * cs - im * sn, re * sn + im * cs);\n  }\n  return c;\n}\n\n// The epicycle chain tip after stacking the first k phasors at head_t — the WGSL\n// transcription of math.ts:41-60 (positionsAt, read at the running tip). The running tip\n// after phasor (k−1) is exactly the partial sum over the first k terms.\nfn epicycleChainTip(t: f32, k: i32) -> vec2<f32> {\n  return partialSumAt(t, k);\n}\n\n@compute @workgroup_size(64)\nfn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {\n  let i = i32(gid.x);\n  let headT = u.c0.x;\n  let trailArc = u.c0.y;\n  let harmonicN = u.ints.x;\n  let armN = u.ints.y;\n  let sampleCount = u.ints.z;\n\n  // ── The comet body samples ──\n  if (i < sampleCount) {\n    // age: 0 at the oldest tail (i = sampleCount−1), 1 at the head (i = 0).\n    let denom = max(f32(sampleCount - 1), 1.0);\n    let frac = f32(i) / denom;                 // 0 = head, 1 = tail\n    let age = 1.0 - frac;                       // 1 = head, 0 = tail\n    // sample back along the period from the head by trailArc.\n    var t = headT - trailArc * frac;\n    t = t - floor(t);                           // fract → [0,1)\n    let pt = partialSumAt(t, harmonicN);\n    curveSamples[i] = vec4<f32>(pt.x, pt.y, age, 0.0);\n  }\n\n  // ── The epicycle chain tips (k = 0..armN, capped to harmonicN) ──\n  // chainTips[0] is the origin; chainTips[k] is the tip after phasor (k−1).\n  let armLim = min(armN, harmonicN);\n  if (i <= armLim && i <= MAX_PHASORS) {\n    let tip = epicycleChainTip(headT, i);\n    chainTips[i] = vec4<f32>(tip.x, tip.y, 0.0, 0.0);\n  }\n}\n", z = `
+	squashGain: ne,
+	celGain: z
+}, ae = "\nconst MAX_PHASORS: i32 = 64;\nconst TAU: f32 = 6.283185307179586;\n\nstruct Phasor {\n  // (re, im, index, _pad)\n  data: vec4<f32>,\n};\n\n// ── Compute uniforms (the typed-struct source-of-truth — see uniformBridgeWGPU.ts) ──\nstruct ComputeUniforms {\n  // c0: (headT, trailArc, _pad, _pad)\n  c0: vec4<f32>,\n  // ints: (harmonicN, epicycleArmN, sampleCount, phasorCount)\n  ints: vec4<i32>,\n};\n\n@group(0) @binding(0) var<uniform> u: ComputeUniforms;\n@group(0) @binding(1) var<storage, read> phasors: array<Phasor>;\n// curveSamples[i] = (x, y, age, _pad)\n@group(0) @binding(2) var<storage, read_write> curveSamples: array<vec4<f32>>;\n// chainTips[k] = (x, y, _pad, _pad) — the running tip after stacking phasor k\n@group(0) @binding(3) var<storage, read_write> chainTips: array<vec4<f32>>;\n\n// The PARTIAL-SUM curve point at parameter t over the first n phasors — the WGSL\n// transcription of math.ts:78-95 (partialSumAt). EXACTLY:\n//   c += vec2(re·cos − im·sin, re·sin + im·cos)  with angle = TAU·index·t.\nfn partialSumAt(t: f32, n: i32) -> vec2<f32> {\n  var c = vec2<f32>(0.0, 0.0);\n  let phasorCount = u.ints.w;\n  let lim = min(n, phasorCount);\n  for (var i = 0; i < MAX_PHASORS; i = i + 1) {\n    if (i >= lim) { break; }\n    let p = phasors[i].data;\n    let re = p.x;\n    let im = p.y;\n    let index = p.z;\n    let angle = TAU * index * t;\n    let cs = cos(angle);\n    let sn = sin(angle);\n    c = c + vec2<f32>(re * cs - im * sn, re * sn + im * cs);\n  }\n  return c;\n}\n\n// The epicycle chain tip after stacking the first k phasors at head_t — the WGSL\n// transcription of math.ts:41-60 (positionsAt, read at the running tip). The running tip\n// after phasor (k−1) is exactly the partial sum over the first k terms.\nfn epicycleChainTip(t: f32, k: i32) -> vec2<f32> {\n  return partialSumAt(t, k);\n}\n\n@compute @workgroup_size(64)\nfn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {\n  let i = i32(gid.x);\n  let headT = u.c0.x;\n  let trailArc = u.c0.y;\n  let harmonicN = u.ints.x;\n  let armN = u.ints.y;\n  let sampleCount = u.ints.z;\n\n  // ── The comet body samples ──\n  if (i < sampleCount) {\n    // age: 0 at the oldest tail (i = sampleCount−1), 1 at the head (i = 0).\n    let denom = max(f32(sampleCount - 1), 1.0);\n    let frac = f32(i) / denom;                 // 0 = head, 1 = tail\n    let age = 1.0 - frac;                       // 1 = head, 0 = tail\n    // sample back along the period from the head by trailArc.\n    var t = headT - trailArc * frac;\n    t = t - floor(t);                           // fract → [0,1)\n    let pt = partialSumAt(t, harmonicN);\n    curveSamples[i] = vec4<f32>(pt.x, pt.y, age, 0.0);\n  }\n\n  // ── The epicycle chain tips (k = 0..armN, capped to harmonicN) ──\n  // chainTips[0] is the origin; chainTips[k] is the tip after phasor (k−1).\n  let armLim = min(armN, harmonicN);\n  if (i <= armLim && i <= MAX_PHASORS) {\n    let tip = epicycleChainTip(headT, i);\n    chainTips[i] = vec4<f32>(tip.x, tip.y, 0.0, 0.0);\n  }\n}\n", oe = `
+// The instanced-ribbon LAYER selector (a pipeline-overridable constant — 5 pipelines share the
+// ONE module, each specializing this): 0 trail · 1 epicycle · 2 head · 3 cel-rope · 4 cel-arm.
+override LAYER: i32 = 0;
+
 const PI: f32 = 3.141592653589793;
-const TAU: f32 = 6.283185307179586;
-const MAX_CURVE_SAMPLES: i32 = 384;
-const MAX_PHASORS: i32 = 64;
-const MAX_FOURIER_STOPS: i32 = 4;
 // BD.W-FOURIER-LOOM §2b — the degenerate-tangent guard (must equal FOURIER_TANGENT_EPS in
 // constants.ts + the GL CPU bead path so a cusp resolves IDENTICALLY across both engines).
 const TANGENT_EPS: f32 = 1e-4;
-// The speed yardstick: the head speed (model units between curveSamples[0] and [1]) is
-// normalized against this many trail half-widths so ŝ ∈ [0,1] is scale-free + parity-safe.
 const SPEED_REF_HALFWIDTHS: f32 = 6.0;
+// BG.W-FOURIER-BEAUTY B1 — the THICK luminous RIBBON. RIBBON_TAIL_FRAC is MIRRORED verbatim
+// from constants.ts (the WGSL twin cannot import a TS const); proof:viz FB1 cross-checks the
+// two copies are equal so the mid-body floor (RIBBON_HEAD_FLOOR_PX) can never drift off it.
+const RIBBON_TAIL_FRAC: f32 = 0.4;
+const RIBBON_UNDERGLOW_SCALE: f32 = 2.2;
+const RIBBON_UNDERGLOW_ALPHA: f32 = 0.16;
 
 // ── Render uniforms (the typed-struct source-of-truth — see uniformBridgeWGPU.ts) ──
 struct RenderUniforms {
@@ -54,7 +60,7 @@ struct RenderUniforms {
   r1: vec4<f32>,
   // r2: (trailFloor, intensity, showEpicycles, rainbowChain)
   r2: vec4<f32>,
-  // r3: (squashGain, celGain, _pad, _pad) — FOURIER-LOOM §2b/§3b
+  // r3: (squashGain, celGain, edgeMargin, _pad) — FOURIER-LOOM §2b/§3b + the ribbon bbox slop
   r3: vec4<f32>,
   // ints: (sampleCount, armCount, stopCount, _pad)
   ints: vec4<i32>,
@@ -63,15 +69,14 @@ struct RenderUniforms {
 };
 
 @group(0) @binding(0) var<uniform> u: RenderUniforms;
-// curveSamples[i] = (x, y, age, _pad) in MODEL space
+// curveSamples[i] = (x, y, age, _pad) in MODEL space — the render VERTEX-PULLS these.
 @group(0) @binding(1) var<storage, read> curveSamples: array<vec4<f32>>;
-// chainTips[k] = (x, y, _pad, _pad) in MODEL space
+// chainTips[k] = (x, y, _pad, _pad) in MODEL space.
 @group(0) @binding(2) var<storage, read> chainTips: array<vec4<f32>>;
 
-${r}
-${a}
+${s}
+${l}
 
-// Sample the multi-stop palette (linear-sRGB stops, OKLab mix). t in [0,1].
 fn samplePaletteLin(t: f32) -> vec3<f32> {
   let stopCount = u.ints.z;
   if (stopCount <= 1) { return u.palette[0].rgb; }
@@ -85,21 +90,17 @@ fn samplePaletteLin(t: f32) -> vec3<f32> {
   return oklabToLinearSrgb(mix(labA, labB, f));
 }
 
-// A warm-anchored chain hue sweep over the palette base — the rainbow chain register.
-// Tilts the base hue by a tight warm-ward band so the chain stays colourful but warm.
 fn chainColorLin(seg: f32, rainbow: bool) -> vec3<f32> {
   let baseLin = u.palette[0].rgb;
   if (!rainbow) { return baseLin; }
   let lab = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * baseLin);
   let lch = oklabToOklch(lab);
-  // warm-anchored: a touch cool at the root climbing warm toward the tips.
-  let hueShift = mix(-0.45, 1.15, clamp(seg, 0.0, 1.0)); // radians (~ -26°..+66°)
+  let hueShift = mix(-0.45, 1.15, clamp(seg, 0.0, 1.0));
   let h = lch.z + hueShift;
   let lifted = vec3<f32>(0.66, max(lch.y, 0.14), h);
   return oklabToLinearSrgb(oklchToOklab(lifted));
 }
 
-// Distance from point p to segment ab (model space).
 fn segDist(p: vec2<f32>, a: vec2<f32>, b: vec2<f32>) -> f32 {
   let pa = p - a;
   let ba = b - a;
@@ -107,9 +108,7 @@ fn segDist(p: vec2<f32>, a: vec2<f32>, b: vec2<f32>) -> f32 {
   return length(pa - ba * h);
 }
 
-// BD.W-FOURIER-LOOM §2b — the head travel frame: the unit tangent T from curveSamples[0]
-// (head) vs [1] (one step back) + the normalized speed ŝ ∈ [0,1]. The cusp guard returns
-// the +x axis as the stable fallback when s ≤ TANGENT_EPS, identical to the GL CPU path.
+// BD.W-FOURIER-LOOM §2b — the head travel frame + the volume-preserving anisotropic distance.
 struct HeadFrame { T: vec2<f32>, sHat: f32, };
 fn headFrame(head: vec2<f32>, headBack: vec2<f32>, halfW: f32) -> HeadFrame {
   let d = head - headBack;
@@ -126,9 +125,6 @@ fn headFrame(head: vec2<f32>, headBack: vec2<f32>, halfW: f32) -> HeadFrame {
   return out;
 }
 
-// The volume-preserving anisotropic head distance: project (p − head) onto T and T⊥, stretch
-// the tangent extent by (1 + k·ŝ) and squeeze the normal extent by 1/(1 + k·ŝ), then length.
-// k = 0 (or ŝ = 0) collapses to the round disc length(p − head) — byte-frozen at rest.
 fn headAniso(p: vec2<f32>, head: vec2<f32>, fr: HeadFrame, k: f32) -> f32 {
   let g = 1.0 + k * fr.sHat;
   let n = vec2<f32>(-fr.T.y, fr.T.x);
@@ -138,165 +134,226 @@ fn headAniso(p: vec2<f32>, head: vec2<f32>, fr: HeadFrame, k: f32) -> f32 {
   return length(vec2<f32>(along, across));
 }
 
+// The cel ink lags behind the travel — the SAME −T·halfW·1.4 offset both engines apply (the
+// head frame is read straight off the compute-filled curveSamples[0]/[1], parity by construction).
+fn celOffset(halfW: f32) -> vec2<f32> {
+  let fr = headFrame(curveSamples[0].xy, curveSamples[1].xy, halfW);
+  return -fr.T * halfW * 1.4;
+}
+
+// The unit quad as two triangles (6 verts) in [0,1]² — the instanced vertex expands it.
+fn quadCorner(vi: u32) -> vec2<f32> {
+  var c = array<vec2<f32>, 6>(
+    vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0),
+    vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0),
+  );
+  return c[vi];
+}
+
 struct VSOut {
   @builtin(position) pos: vec4<f32>,
-  @location(0) model: vec2<f32>,   // model-space coordinate of this fragment
+  @location(0) p: vec2<f32>,      // model-space fragment coordinate
+  @location(1) a: vec2<f32>,
+  @location(2) b: vec2<f32>,
+  @location(3) segData: vec3<f32>,   // (age, strokeHalf, arg2)
 };
 
 @vertex
-fn vs_main(@builtin(vertex_index) vi: u32) -> VSOut {
-  // Full-screen triangle (covers the viewport with 3 verts).
-  var p = array<vec2<f32>, 3>(
-    vec2<f32>(-1.0, -3.0), vec2<f32>(-1.0, 1.0), vec2<f32>(3.0, 1.0),
-  );
-  let clip = p[vi];
-  // Inverse of the model→clip fit: clip = (model − center)·scale, aspect-corrected x.
-  // → model = center + clip·(1/scale), x un-aspect-corrected.
+fn vs_main(@builtin(vertex_index) vi: u32, @builtin(instance_index) inst: u32) -> VSOut {
+  let corner = quadCorner(vi);
   let center = u.r0.xy;
   let scale = max(u.r0.z, 1e-6);
   let aspect = max(u.r0.w, 1e-4);
-  let model = center + vec2<f32>(clip.x * aspect, clip.y) / scale;
+  let halfW = u.r1.x * 0.5;
+  let margin = u.r3.z;
+
+  var a: vec2<f32> = vec2<f32>(0.0);
+  var b: vec2<f32> = vec2<f32>(0.0);
+  var strokeHalf: f32 = halfW;
+  var age: f32 = 0.0;
+  var arg2: f32 = 0.0;
+  var isCapsule: bool = true;
+  var ext: f32 = halfW;
+
+  if (LAYER == 0) {
+    // TRAIL — the curve capsule; the covered extent is the head-width under-glow.
+    a = curveSamples[inst].xy;
+    b = curveSamples[inst + 1u].xy;
+    age = max(curveSamples[inst].z, curveSamples[inst + 1u].z);
+    ext = halfW * RIBBON_UNDERGLOW_SCALE;
+    isCapsule = true;
+  } else if (LAYER == 1) {
+    // EPICYCLE — the chain AABB around a (radius = |b−a|).
+    a = chainTips[inst].xy;
+    b = chainTips[inst + 1u].xy;
+    arg2 = f32(inst) / max(f32(u.ints.y - 1), 1.0);
+    ext = length(b - a) + halfW * 0.7;
+    isCapsule = false;
+  } else if (LAYER == 2) {
+    // HEAD — the comet head at curveSamples[0], AABB by the halo radius.
+    a = curveSamples[0].xy;
+    b = curveSamples[1].xy;
+    ext = halfW * 4.5;
+    isCapsule = false;
+  } else if (LAYER == 3) {
+    // CEL-ROPE — the curve capsule, offset opposite travel; full-width ink.
+    let off = celOffset(halfW);
+    a = curveSamples[inst].xy + off;
+    b = curveSamples[inst + 1u].xy + off;
+    arg2 = 1.0;
+    ext = halfW;
+    isCapsule = true;
+  } else {
+    // CEL-ARM (LAYER == 4) — the chain capsule, offset; the narrower arm ink (0.55·halfW).
+    let off = celOffset(halfW);
+    a = chainTips[inst].xy + off;
+    b = chainTips[inst + 1u].xy + off;
+    strokeHalf = halfW * 0.55;
+    arg2 = 0.7;
+    ext = halfW * 0.55;
+    isCapsule = true;
+  }
+  ext = ext + margin;
 
+  var pos: vec2<f32>;
+  if (isCapsule) {
+    let d = b - a;
+    let len = length(d);
+    var dir = vec2<f32>(1.0, 0.0);
+    if (len > 1e-6) { dir = d / len; }
+    let perp = vec2<f32>(-dir.y, dir.x);
+    let along = mix(a - dir * ext, b + dir * ext, corner.x);
+    pos = along + perp * (corner.y * 2.0 - 1.0) * ext;
+  } else {
+    pos = a + (corner * 2.0 - vec2<f32>(1.0)) * ext;
+  }
+
+  let clipX = (pos.x - center.x) * scale / aspect;
+  let clipY = (pos.y - center.y) * scale;
   var out: VSOut;
-  out.pos = vec4<f32>(clip, 0.0, 1.0);
-  out.model = model;
+  out.pos = vec4<f32>(clipX, clipY, 0.0, 1.0);
+  out.p = pos;
+  out.a = a;
+  out.b = b;
+  out.segData = vec3<f32>(age, strokeHalf, arg2);
   return out;
 }
 
 @fragment
 fn fs_main(in: VSOut) -> @location(0) vec4<f32> {
-  let p = in.model;
-  // AA feather: one device pixel in model units (fwidth of the model coord).
+  let p = in.p;
   let aa = max(fwidth(p.x) + fwidth(p.y), 1e-5) * 0.75;
-
-  let trailWidth = u.r1.x;                // already in model units (packed CPU-side)
-  let peak = u.r1.y * u.r2.y;             // peakAlpha · intensity
+  let peak = u.r1.y * u.r2.y;
   let headGlow = u.r1.z * u.r2.y;
   let fadeExp = u.r1.w;
   let trailFloor = u.r2.x;
-  let sampleCount = u.ints.x;
-  let armCount = u.ints.y;
-  let showEpicycles = u.r2.z > 0.5;
   let rainbow = u.r2.w > 0.5;
-  let squashGain = u.r3.x;                 // FOURIER-LOOM §2b
-  let celGain = u.r3.y;                    // FOURIER-LOOM §3b
-  let halfW = trailWidth * 0.5;
-
-  // BD.W-FOURIER-LOOM §2b — the head travel frame (the SAME curveSamples[0]/[1] both engines
-  // read → parity by construction). The cel offset (§3b) rides −T (opposite travel).
-  var headFr: HeadFrame;
-  headFr.T = vec2<f32>(1.0, 0.0);
-  headFr.sHat = 0.0;
-  if (sampleCount >= 2) {
-    headFr = headFrame(curveSamples[0].xy, curveSamples[1].xy, halfW);
-  }
-  let celOff = -headFr.T * halfW * 1.4;    // the ink lags behind the travel
+  let squashGain = u.r3.x;
+  let celGain = u.r3.y;
+  let halfW = in.segData.y;
+  let age = in.segData.x;
+  let arg2 = in.segData.z;
+  let a = in.a;
+  let b = in.b;
 
-  var accum = vec4<f32>(0.0);              // premultiplied accumulation
-
-  // ── §3b — the cartoon CEL-SHADOW: a darker offset copy of the chain + rope, opposite
-  //    travel, painted FIRST (it sits UNDER the lit chain). PRM-static (the frozen-T travel
-  //    frame is a fixed offset, no live sweep). celGain = 0 → no pass (byte-frozen). ──
-  if (celGain > 0.001) {
-    let ink = vec3<f32>(0.0);              // pure ink — the technicolor 2-tone shadow
-    let celA = clamp(celGain, 0.0, 1.0);
-    // the rope cel (one offset distance-to-curve band).
-    for (var i = 0; i < MAX_CURVE_SAMPLES; i = i + 1) {
-      if (i >= sampleCount - 1) { break; }
-      let sa = curveSamples[i].xy + celOff;
-      let sb = curveSamples[i + 1].xy + celOff;
-      let d = segDist(p, sa, sb);
-      let cover = 1.0 - smoothstep(halfW, halfW + aa, d);
-      if (cover < 0.002) { continue; }
-      let m = cover * celA * peak;
-      accum = vec4<f32>(ink * m, m) + accum * (1.0 - m);
-    }
-    // the chain cel (arms only — the bold scaffold ink).
-    if (showEpicycles && armCount >= 1) {
-      for (var k = 0; k < MAX_PHASORS; k = k + 1) {
-        if (k >= armCount) { break; }
-        let a = chainTips[k].xy + celOff;
-        let b = chainTips[k + 1].xy + celOff;
-        let dArm = segDist(p, a, b);
-        let armMask = 1.0 - smoothstep(halfW * 0.55, halfW * 0.55 + aa, dArm);
-        let m = armMask * celA * peak * 0.7;
-        accum = vec4<f32>(ink * m, m) + accum * (1.0 - m);
-      }
-    }
-  }
-
-  // ── Epicycle scaffolding (orbit rings + arms + joint dots) UNDER the curve ──
-  if (showEpicycles && armCount >= 1) {
-    for (var k = 0; k < MAX_PHASORS; k = k + 1) {
-      if (k >= armCount) { break; }
-      let a = chainTips[k].xy;
-      let b = chainTips[k + 1].xy;
-      let seg = f32(k) / max(f32(armCount - 1), 1.0);
-      let lin = chainColorLin(seg, rainbow);
-      // orbit RING around a (radius = arm length).
-      let radius = length(b - a);
-      let dRing = abs(length(p - a) - radius);
-      let ringW = max(halfW * 0.45, aa);
-      let ringMask = (1.0 - smoothstep(ringW, ringW + aa, dRing)) * 0.5;
-      // ARM segment a→b.
-      let dArm = segDist(p, a, b);
-      let armMask = 1.0 - smoothstep(halfW * 0.55, halfW * 0.55 + aa, dArm);
-      // joint DOT at a.
-      let dotR = max(halfW * 0.7, aa * 2.0);
-      let dDot = length(p - a);
-      let dotMask = 1.0 - smoothstep(dotR, dotR + aa, dDot);
-      let m = clamp(max(max(ringMask, armMask), dotMask), 0.0, 1.0) * peak * 0.7;
-      let rgb = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));
-      // over-composite (premultiplied).
-      accum = vec4<f32>(rgb * m, m) + accum * (1.0 - m);
-    }
-  }
-
-  // ── The comet TRAIL — min-distance to the curve polyline, per-segment age fade ──
-  for (var i = 0; i < MAX_CURVE_SAMPLES; i = i + 1) {
-    if (i >= sampleCount - 1) { break; }
-    let sa = curveSamples[i];
-    let sb = curveSamples[i + 1];
-    let d = segDist(p, sa.xy, sb.xy);
-    let cover = 1.0 - smoothstep(halfW, halfW + aa, d);
-    if (cover < 0.002) { continue; }
-    let age = max(sa.z, sb.z);            // 1 at head, 0 at tail
-    var a = peak * pow(age, fadeExp);
-    a = max(a, peak * trailFloor);
-    a = a * cover;
-    let lin = samplePaletteLin(1.0 - age * 0.4); // warm core, lighter tail
+  if (LAYER == 0) {
+    // ── TRAIL — the tapered luminous ribbon over its own soft under-glow ──
+    let d = segDist(p, a, b);
+    let ribbonHalf = halfW * (RIBBON_TAIL_FRAC + (1.0 - RIBBON_TAIL_FRAC) * age);
+    let lin = samplePaletteLin(1.0 - age * 0.4);
     let rgb = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));
-    accum = vec4<f32>(rgb * a, a) + accum * (1.0 - a);
-  }
-
-  // ── The comet HEAD — squash-and-stretch (§2b) halo + saturated core + white specular.
-  //    dHead is the volume-preserving anisotropic distance off the travel frame; at rest
-  //    (sHat=0) or squashGain=0 it collapses to the round disc length(p − head). ──
-  if (sampleCount >= 1) {
-    let head = curveSamples[0].xy;
-    let dHead = headAniso(p, head, headFr, squashGain);
+    let glowHalf = ribbonHalf * RIBBON_UNDERGLOW_SCALE;
+    let glowCover = 1.0 - smoothstep(glowHalf, glowHalf + aa * 3.0, d);
+    let ga = peak * RIBBON_UNDERGLOW_ALPHA * pow(age, fadeExp) * glowCover;
+    let cover = 1.0 - smoothstep(ribbonHalf, ribbonHalf + aa, d);
+    let ca = max(peak * pow(age, fadeExp), peak * trailFloor) * cover;
+    let outA = ca + ga * (1.0 - ca);
+    return vec4<f32>(rgb * outA, outA);
+  } else if (LAYER == 1) {
+    // ── EPICYCLE — orbit RING + ARM + joint DOT union (MAX-blended, no join seam) ──
+    let lin = chainColorLin(arg2, rainbow);
+    let rgb = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));
+    let radius = length(b - a);
+    let dRing = abs(length(p - a) - radius);
+    let ringW = max(halfW * 0.45, aa);
+    let ringMask = (1.0 - smoothstep(ringW, ringW + aa, dRing)) * 0.5;
+    let dArm = segDist(p, a, b);
+    let armMask = 1.0 - smoothstep(halfW * 0.55, halfW * 0.55 + aa, dArm);
+    let dotR = max(halfW * 0.7, aa * 2.0);
+    let dDot = length(p - a);
+    let dotMask = 1.0 - smoothstep(dotR, dotR + aa, dDot);
+    let m = clamp(max(max(ringMask, armMask), dotMask), 0.0, 1.0) * peak * 0.7;
+    return vec4<f32>(rgb * m, m);
+  } else if (LAYER == 2) {
+    // ── HEAD — squash-and-stretch (§2b): halo + saturated core + white specular ──
+    let head = a;
+    let headBack = b;
+    let fr = headFrame(head, headBack, halfW);
+    let dHead = headAniso(p, head, fr, squashGain);
     let coreR = halfW * 1.5;
     let haloR = coreR * 3.0;
-    let headLin = samplePaletteLin(0.0);
-    let headRgb = clamp(linearToSrgb(headLin), vec3<f32>(0.0), vec3<f32>(1.0));
-    // soft halo
+    let headRgb = clamp(linearToSrgb(samplePaletteLin(0.0)), vec3<f32>(0.0), vec3<f32>(1.0));
     let halo = (1.0 - smoothstep(0.0, haloR, dHead)) * headGlow * 0.35;
-    accum = vec4<f32>(headRgb * halo, halo) + accum * (1.0 - halo);
-    // saturated core
+    var accum = vec4<f32>(headRgb * halo, halo);
     let core = (1.0 - smoothstep(coreR, coreR + aa, dHead)) * headGlow;
     accum = vec4<f32>(headRgb * core, core) + accum * (1.0 - core);
-    // white specular
     let spec = (1.0 - smoothstep(coreR * 0.4, coreR * 0.4 + aa, dHead)) * headGlow * 0.9;
     accum = vec4<f32>(vec3<f32>(1.0) * spec, spec) + accum * (1.0 - spec);
+    return accum;
+  } else {
+    // ── CEL — the technicolor ink shadow (rope LAYER==3 / arm LAYER==4) ──
+    let celA = clamp(celGain, 0.0, 1.0);
+    let d = segDist(p, a, b);
+    let cover = 1.0 - smoothstep(halfW, halfW + aa, d);
+    let m = cover * celA * peak * arg2; // arg2 = celStrength (1.0 rope / 0.7 arm)
+    return vec4<f32>(0.0, 0.0, 0.0, m);
   }
-
-  return accum;
 }
 `, B = {
+	trail: 0,
+	epicycle: 1,
+	head: 2,
+	"cel-rope": 3,
+	"cel-arm": 4
+};
+function se(e) {
+	let t = Math.max(0, Math.floor(e.sampleCount) - 1), n = e.showEpicycles ? Math.max(0, Math.floor(e.armCount)) : 0, r = e.celGain > .001, i = [];
+	return r && t > 0 && i.push({
+		kind: "cel-rope",
+		instanceCount: t,
+		blend: "over"
+	}), r && n > 0 && i.push({
+		kind: "cel-arm",
+		instanceCount: n,
+		blend: "over"
+	}), n > 0 && i.push({
+		kind: "epicycle",
+		instanceCount: n,
+		blend: "max"
+	}), t > 0 && i.push({
+		kind: "trail",
+		instanceCount: t,
+		blend: "over"
+	}), i.push({
+		kind: "head",
+		instanceCount: 1,
+		blend: "over"
+	}), i;
+}
+var ce = new Float32Array([
+	0,
+	0,
+	1,
+	0,
+	0,
+	1,
+	1,
+	1
+]), V = {
 	c0: 0,
 	ints: 4
 };
-function V() {
+function H() {
 	let e = /* @__PURE__ */ new ArrayBuffer(32);
 	return {
 		buffer: e,
@@ -304,11 +361,11 @@ function V() {
 		i32: new Int32Array(e)
 	};
 }
-function H(e, t, n, r, i, a, o) {
+function U(e, t, n, r, i, a, o) {
 	let { f32: s, i32: c } = e;
-	return s[B.c0 + 0] = t, s[B.c0 + 1] = n, s[B.c0 + 2] = 0, s[B.c0 + 3] = 0, c[B.ints + 0] = r, c[B.ints + 1] = i, c[B.ints + 2] = a, c[B.ints + 3] = o, e;
+	return s[V.c0 + 0] = t, s[V.c0 + 1] = n, s[V.c0 + 2] = 0, s[V.c0 + 3] = 0, c[V.ints + 0] = r, c[V.ints + 1] = i, c[V.ints + 2] = a, c[V.ints + 3] = o, e;
 }
-var U = 144, W = {
+var le = 144, W = {
 	r0: 0,
 	r1: 4,
 	r2: 8,
@@ -317,7 +374,7 @@ var U = 144, W = {
 	palette: 20
 };
 function G() {
-	let e = new ArrayBuffer(U);
+	let e = new ArrayBuffer(le);
 	return {
 		buffer: e,
 		f32: new Float32Array(e),
@@ -327,7 +384,7 @@ function G() {
 function K(e) {
 	let t = Infinity, n = Infinity, r = -Infinity, i = -Infinity, a = e;
 	for (let e = 0; e < 720; e++) {
-		let o = m(a, e / 720), [s, c] = o[o.length - 1];
+		let o = v(a, e / 720), [s, c] = o[o.length - 1];
 		s < t && (t = s), c < n && (n = c), s > r && (r = s), c > i && (i = c);
 	}
 	if (!isFinite(t)) return {
@@ -342,29 +399,22 @@ function K(e) {
 		scale: c
 	};
 }
-function ee(e, t, n, r) {
-	let i = Math.max(r, 1e-4), a = (e - n.centerX) * n.scale / i, o = (t - n.centerY) * n.scale;
-	return {
-		x: a * .5 + .5,
-		y: 1 - (o * .5 + .5)
-	};
-}
-function q(e, t, n) {
-	let r = Math.max(n, 1) / 2;
-	return e / Math.max(t, 1e-6) / r;
+function ue(e, t, n) {
+	let r = Math.max(e, R), i = Math.max(n, 1) / 2;
+	return r / Math.max(t, 1e-6) / i;
 }
-function te(e, t, n, r, i, a, o, s, c, u, d, f, p, m, h, g) {
-	let { f32: _, i32: v } = e;
-	_[W.r0 + 0] = t.centerX, _[W.r0 + 1] = t.centerY, _[W.r0 + 2] = t.scale, _[W.r0 + 3] = n, _[W.r1 + 0] = r, _[W.r1 + 1] = i, _[W.r1 + 2] = a, _[W.r1 + 3] = o, _[W.r2 + 0] = s, _[W.r2 + 1] = c, _[W.r2 + 2] = +!!u, _[W.r2 + 3] = +!!d, _[W.r3 + 0] = f, _[W.r3 + 1] = p, _[W.r3 + 2] = 0, _[W.r3 + 3] = 0;
-	let y = Math.min(g.length, 4);
-	v[W.ints + 0] = m, v[W.ints + 1] = h, v[W.ints + 2] = y, v[W.ints + 3] = 0;
+function de(e, t, n, r, i, a, o, s, c, l, u, d, f, m, h, g, _) {
+	let { f32: v, i32: y } = e;
+	v[W.r0 + 0] = t.centerX, v[W.r0 + 1] = t.centerY, v[W.r0 + 2] = t.scale, v[W.r0 + 3] = n, v[W.r1 + 0] = r, v[W.r1 + 1] = i, v[W.r1 + 2] = a, v[W.r1 + 3] = o, v[W.r2 + 0] = s, v[W.r2 + 1] = c, v[W.r2 + 2] = +!!l, v[W.r2 + 3] = +!!u, v[W.r3 + 0] = d, v[W.r3 + 1] = f, v[W.r3 + 2] = m, v[W.r3 + 3] = 0;
+	let b = Math.min(_.length, 4);
+	y[W.ints + 0] = h, y[W.ints + 1] = g, y[W.ints + 2] = b, y[W.ints + 3] = 0;
 	for (let e = 0; e < 4; e++) {
-		let t = W.palette + e * 4, n = l(g[Math.min(e, y - 1)] ?? g[0]);
-		_[t + 0] = n[0], _[t + 1] = n[1], _[t + 2] = n[2], _[t + 3] = 0;
+		let t = W.palette + e * 4, n = p(_[Math.min(e, b - 1)] ?? _[0]);
+		v[t + 0] = n[0], v[t + 1] = n[1], v[t + 2] = n[2], v[t + 3] = 0;
 	}
 	return e;
 }
-function ne(e) {
+function fe(e) {
 	let t = Math.min(e.length, 64), n = new Float32Array(256);
 	for (let r = 0; r < t; r++) {
 		let t = e[r], i = r * 4;
@@ -373,37 +423,37 @@ function ne(e) {
 	return n;
 }
 //#endregion
-//#region src/components/custom/fourier-field/composables/fourierFieldWGPUSetup.ts
-var J = 64, Y = 128, X = 8, re = 1, Z = 2, Q = 4, ie = 64, ae = .92, oe = .95, se = 1.35, ce = .34;
-function le(e) {
-	let { canvas: t, config: n, getSpectrum: r, getPalette: i, getHeadT: a, shouldContinue: o, onFrame: c } = e, l = e.getPointerLean;
-	return function(e, u, d) {
+//#region src/components/fourier-field/composables/fourierFieldWGPUSetup.ts
+var q = 64, J = 128, Y = 8, X = 1, Z = 2, Q = 4, pe = 64, me = .92, he = .95, ge = 1.35, _e = .34;
+function ve(e) {
+	let { canvas: t, config: n, getSpectrum: r, getPalette: i, getHeadT: a, shouldContinue: o, onFrame: s } = e, c = e.getPointerLean;
+	return function(e, l, u) {
 		let f = e.createShaderModule({
 			label: "[FourierField] fourier-field.compute.wgsl",
-			code: R
+			code: ae
 		}), p = e.createShaderModule({
 			label: "[FourierField] fourier-field.render.wgsl",
-			code: z
+			code: oe
 		}), m = e.createBuffer({
 			label: "[FourierField] phasors",
 			size: 1024,
-			usage: Y | X
+			usage: J | Y
 		}), h = e.createBuffer({
 			label: "[FourierField] curve-samples",
 			size: 384 * 16,
-			usage: Y
+			usage: J
 		}), g = e.createBuffer({
 			label: "[FourierField] chain-tips",
 			size: 1040,
-			usage: Y
+			usage: J
 		}), _ = e.createBuffer({
 			label: "[FourierField] compute-uniforms",
-			size: V().buffer.byteLength,
-			usage: J | X
+			size: H().buffer.byteLength,
+			usage: q | Y
 		}), v = e.createBuffer({
 			label: "[FourierField] render-uniforms",
 			size: G().buffer.byteLength,
-			usage: J | X
+			usage: q | Y
 		}), y = e.createBindGroupLayout({
 			label: "[FourierField] compute-bgl",
 			entries: [
@@ -461,48 +511,67 @@ function le(e) {
 			entries: [
 				{
 					binding: 0,
-					visibility: re | Z,
+					visibility: X | Z,
 					buffer: { type: "uniform" }
 				},
 				{
 					binding: 1,
-					visibility: Z,
+					visibility: X | Z,
 					buffer: { type: "read-only-storage" }
 				},
 				{
 					binding: 2,
-					visibility: Z,
+					visibility: X | Z,
 					buffer: { type: "read-only-storage" }
 				}
 			]
-		}), C = e.createRenderPipeline({
-			label: "[FourierField] render-pipeline",
-			layout: e.createPipelineLayout({ bindGroupLayouts: [S] }),
+		}), C = e.createPipelineLayout({ bindGroupLayouts: [S] }), w = {
+			color: {
+				srcFactor: "one",
+				dstFactor: "one-minus-src-alpha",
+				operation: "add"
+			},
+			alpha: {
+				srcFactor: "one",
+				dstFactor: "one-minus-src-alpha",
+				operation: "add"
+			}
+		}, T = {
+			color: {
+				srcFactor: "one",
+				dstFactor: "one",
+				operation: "max"
+			},
+			alpha: {
+				srcFactor: "one",
+				dstFactor: "one",
+				operation: "max"
+			}
+		}, E = (t, n) => e.createRenderPipeline({
+			label: `[FourierField] ribbon-pipeline-L${t}`,
+			layout: C,
 			vertex: {
 				module: p,
-				entryPoint: "vs_main"
+				entryPoint: "vs_main",
+				constants: { LAYER: t }
 			},
 			fragment: {
 				module: p,
 				entryPoint: "fs_main",
+				constants: { LAYER: t },
 				targets: [{
-					format: d,
-					blend: {
-						color: {
-							srcFactor: "one",
-							dstFactor: "one-minus-src-alpha",
-							operation: "add"
-						},
-						alpha: {
-							srcFactor: "one",
-							dstFactor: "one-minus-src-alpha",
-							operation: "add"
-						}
-					}
+					format: u,
+					blend: n
 				}]
 			},
 			primitive: { topology: "triangle-list" }
-		}), w = e.createBindGroup({
+		}), D = {
+			trail: E(B.trail, w),
+			epicycle: E(B.epicycle, T),
+			head: E(B.head, w),
+			"cel-rope": E(B["cel-rope"], w),
+			"cel-arm": E(B["cel-arm"], w)
+		}, O = e.createBindGroup({
 			label: "[FourierField] render-bg",
 			layout: S,
 			entries: [
@@ -519,36 +588,33 @@ function le(e) {
 					resource: { buffer: g }
 				}
 			]
-		}), T = V(), E = G(), D = null, O = {
+		}), k = H(), A = G(), j = null, M = {
 			centerX: 0,
 			centerY: 0,
 			scale: 1
-		}, k = 0;
-		function A() {
+		}, N = 0;
+		function P() {
 			let t = r();
-			t !== D && (D = t, k = Math.min(t.length, 64), O = K(t), e.queue.writeBuffer(m, 0, ne(t)));
-		}
-		function j() {
-			let e = s(), n = t.clientWidth || 320, r = t.clientHeight || 320, i = Math.max(1, Math.round(n * e)), a = Math.max(1, Math.round(r * e));
-			(t.width !== i || t.height !== a) && (t.width = i, t.height = a);
+			t !== j && (j = t, N = Math.min(t.length, 64), M = K(t), e.queue.writeBuffer(m, 0, fe(t)));
 		}
-		function M(r) {
-			c?.(r), A();
-			let o = a(), s = Math.max(1, Math.min(Math.round(n.harmonics), k)), d = n.showEpicycles ? Math.max(1, Math.min(Math.round(n.epicycleArms), s)) : 0;
-			H(T, o, n.trailArc, s, d, 384, k), e.queue.writeBuffer(_, 0, T.buffer);
-			let f = Math.min(t.clientWidth || 320, t.clientHeight || 320), p = (t.clientWidth || 320) / Math.max(t.clientHeight || 320, 1), m = q(n.trailWidth, O.scale, f), h = l?.() ?? {
+		function F(e) {}
+		function I(r) {
+			s?.(r), P();
+			let o = a(), u = Math.max(1, Math.min(Math.round(n.harmonics), N)), f = n.showEpicycles ? Math.max(1, Math.min(Math.round(n.epicycleArms), u)) : 0;
+			U(k, o, n.trailArc, u, f, 384, N), e.queue.writeBuffer(_, 0, k.buffer);
+			let p = Math.min(t.width, t.height) / Math.max(d(), 1), m = t.width / Math.max(t.height, 1), h = ue(n.trailWidth, M.scale, p), g = 12 / (Math.max(M.scale, 1e-6) * Math.max(p, 1)), y = c?.() ?? {
 				x: 0,
 				y: 0
 			};
-			te(E, h.x !== 0 || h.y !== 0 ? {
-				...O,
-				centerX: O.centerX - h.x,
-				centerY: O.centerY - h.y
-			} : O, p, m, ae, oe, se, ce, n.intensity, n.showEpicycles, n.rainbowChain, n.squashGain, n.celGain, 384, d, i()), e.queue.writeBuffer(v, 0, E.buffer);
-			let g = e.createCommandEncoder({ label: "[FourierField] frame" }), y = g.beginComputePass();
-			y.setPipeline(b), y.setBindGroup(0, x), y.dispatchWorkgroups(Math.ceil(384 / ie)), y.end();
-			let S = u.getCurrentTexture().createView(), D = g.beginRenderPass({ colorAttachments: [{
-				view: S,
+			de(A, y.x !== 0 || y.y !== 0 ? {
+				...M,
+				centerX: M.centerX - y.x,
+				centerY: M.centerY - y.y
+			} : M, m, h, me, he, ge, _e, n.intensity, n.showEpicycles, n.rainbowChain, n.squashGain, n.celGain, g, 384, f, i()), e.queue.writeBuffer(v, 0, A.buffer);
+			let S = e.createCommandEncoder({ label: "[FourierField] frame" }), C = S.beginComputePass();
+			C.setPipeline(b), C.setBindGroup(0, x), C.dispatchWorkgroups(Math.ceil(384 / pe)), C.end();
+			let w = l.getCurrentTexture().createView(), T = S.beginRenderPass({ colorAttachments: [{
+				view: w,
 				clearValue: {
 					r: 0,
 					g: 0,
@@ -558,12 +624,20 @@ function le(e) {
 				loadOp: "clear",
 				storeOp: "store"
 			}] });
-			D.setPipeline(C), D.setBindGroup(0, w), D.draw(3, 1, 0, 0), D.end(), e.queue.submit([g.finish()]);
+			T.setBindGroup(0, O);
+			let E = se({
+				sampleCount: 384,
+				armCount: f,
+				showEpicycles: n.showEpicycles,
+				celGain: n.celGain
+			});
+			for (let e of E) T.setPipeline(D[e.kind]), T.draw(6, e.instanceCount, 0, 0);
+			T.end(), e.queue.submit([S.finish()]);
 		}
 		return {
-			frame: M,
+			frame: I,
 			shouldContinue: o,
-			resize: j,
+			resize: F,
 			teardown: () => {
 				m.destroy(), h.destroy(), g.destroy(), _.destroy(), v.destroy();
 			}
@@ -571,35 +645,40 @@ function le(e) {
 	};
 }
 //#endregion
-//#region src/components/custom/fourier-field/shaders/fourier-field.glsl.ts
-var ue = "#version 300 es\nin vec2 aPosition;\nout vec2 vClip;\nvoid main() {\n  vClip = aPosition;\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}\n", de = `#version 300 es
+//#region src/components/fourier-field/shaders/fourier-field.glsl.ts
+var ye = "#version 300 es\n// BI.W-FOURIER-RIBBON §2b — MUST equal the WGSL twin + FOURIER_TANGENT_EPS (constants.ts).\n#define RIBBON_UNDERGLOW_SCALE 2.2\n\nin vec2 aCorner;   // the unit quad corner ∈ [0,1]²\nin vec4 aSeg;      // (ax, ay, bx, by) — segment endpoints in MODEL space\nin vec4 aData;     // (age, strokeHalf, arg2, _pad) — strokeHalf/age/arg2 per layer\n\nuniform vec4 uFit;         // (centerX, centerY, scale, aspect) — model→clip fit\nuniform int  uLayer;       // 0 trail · 1 epicycle · 2 head · 3 cel-rope · 4 cel-arm\nuniform float uEdgeMargin; // AA-feather slop in MODEL units (a few CSS px), padding the bbox\n\nout vec2 vP;       // the MODEL-space fragment coordinate (the fs runs the SDF on it)\nout vec2 vA;\nout vec2 vB;\nout float vAge;\nout float vHalf;\nout float vArg2;\n\nvoid main() {\n  vec2 a = aSeg.xy;\n  vec2 b = aSeg.zw;\n  float strokeHalf = aData.y;\n  vA = a; vB = b; vAge = aData.x; vHalf = strokeHalf; vArg2 = aData.z;\n\n  vec2 pos;\n  if (uLayer == 1 || uLayer == 2) {\n    // AABB around a — the epicycle orbit RING (radius = |b-a|) or the head HALO.\n    float ext = (uLayer == 1) ? (length(b - a) + strokeHalf * 0.7) : (strokeHalf * 4.5);\n    ext += uEdgeMargin;\n    pos = a + (aCorner * 2.0 - 1.0) * ext;\n  } else {\n    // Capsule along a→b padded by the covered extent (trail under-glow / cel stroke).\n    float ext = (uLayer == 0) ? (strokeHalf * RIBBON_UNDERGLOW_SCALE) : strokeHalf;\n    ext += uEdgeMargin;\n    vec2 d = b - a;\n    float len = length(d);\n    vec2 dir = len > 1e-6 ? d / len : vec2(1.0, 0.0);\n    vec2 perp = vec2(-dir.y, dir.x);\n    vec2 along = mix(a - dir * ext, b + dir * ext, aCorner.x);\n    pos = along + perp * (aCorner.y * 2.0 - 1.0) * ext;\n  }\n\n  vP = pos;\n  vec2 center = uFit.xy;\n  float scale = max(uFit.z, 1e-6);\n  float aspect = max(uFit.w, 1e-4);\n  // model → clip (the inverse of the fs's p = center + vClip·aspect / scale).\n  float clipX = (pos.x - center.x) * scale / aspect;\n  float clipY = (pos.y - center.y) * scale;\n  gl_Position = vec4(clipX, clipY, 0.0, 1.0);\n}\n", be = `#version 300 es
 precision highp float;
 
-#define MAX_CURVE_SAMPLES 256
-#define MAX_PHASORS 64
+#define MAX_FOURIER_STOPS 4
 // BD.W-FOURIER-LOOM §2b — MUST equal the WGSL twin + FOURIER_TANGENT_EPS (constants.ts).
 #define TANGENT_EPS 1e-4
 #define SPEED_REF_HALFWIDTHS 6.0
+// BG.W-FOURIER-BEAUTY B1 — the THICK luminous RIBBON. RIBBON_TAIL_FRAC is MIRRORED verbatim
+// from constants.ts (the GLSL twin cannot import a TS const); proof:viz FB1 cross-checks the
+// two copies are equal so the mid-body floor (RIBBON_HEAD_FLOOR_PX) can never drift off it.
+#define RIBBON_TAIL_FRAC 0.4
+#define RIBBON_UNDERGLOW_SCALE 2.2
+#define RIBBON_UNDERGLOW_ALPHA 0.16
 
-in vec2 vClip;
+in vec2 vP;
+in vec2 vA;
+in vec2 vB;
+in float vAge;
+in float vHalf;
+in float vArg2;
 out vec4 fragColor;
 
-uniform vec4 uFit;          // (centerX, centerY, scale, aspect)
-uniform vec4 uTrail;        // (trailWidth, peakAlpha, headGlowAlpha, trailFadeExp)
-uniform vec4 uEnv;          // (trailFloor, intensity, showEpicycles, rainbowChain)
-uniform vec4 uLoom;         // (squashGain, celGain, _pad, _pad) — FOURIER-LOOM §2b/§3b
-uniform int  uSampleCount;
-uniform int  uArmCount;
+uniform vec4 uTrail;      // (trailWidth, peakAlpha, headGlowAlpha, trailFadeExp)
+uniform vec4 uEnv;        // (trailFloor, intensity, showEpicycles, rainbowChain)
+uniform vec4 uLoom;       // (squashGain, celGain, _pad, _pad) — FOURIER-LOOM §2b/§3b
+uniform int  uLayer;      // 0 trail · 1 epicycle · 2 head · 3 cel-rope · 4 cel-arm
 uniform int  uStopCount;
-uniform vec3 uPalette[4];   // linear-sRGB stops
-// curveSamples[i] = (x, y, age) in MODEL space; chainTips[k] = (x, y) in MODEL space.
-uniform vec3 uCurve[MAX_CURVE_SAMPLES];
-uniform vec2 uChain[MAX_PHASORS];
+uniform vec3 uPalette[MAX_FOURIER_STOPS]; // linear-sRGB stops
 
 const float PI = 3.141592653589793;
 
-${i}
-${o}
+${c}
+${u}
 
 // Negative-safe cube root (the WGSL chunk's cbrt3 twin; the GLSL chunk inlines it).
 vec3 cbrt3(vec3 v) { return sign(v) * pow(abs(v), vec3(1.0 / 3.0)); }
@@ -634,8 +713,6 @@ float segDist(vec2 p, vec2 a, vec2 b) {
 }
 
 // BD.W-FOURIER-LOOM §2b — the head travel frame (T, ŝ), the GLSL twin of the WGSL headFrame.
-// The cusp guard returns +x as the stable fallback when s ≤ TANGENT_EPS — identical to the
-// WGSL twin + the CPU bead path.
 struct HeadFrame { vec2 T; float sHat; };
 HeadFrame headFrame(vec2 head, vec2 headBack, float halfW) {
   vec2 d = head - headBack;
@@ -659,119 +736,78 @@ float headAniso(vec2 p, vec2 head, HeadFrame fr, float k) {
 }
 
 void main() {
-  vec2 center = uFit.xy;
-  float scale = max(uFit.z, 1e-6);
-  float aspect = max(uFit.w, 1e-4);
-  // clip → model (the inverse of model→clip fit).
-  vec2 p = center + vec2(vClip.x * aspect, vClip.y) / scale;
-
+  vec2 p = vP;
   float aa = max(fwidth(p.x) + fwidth(p.y), 1e-5) * 0.75;
-  float trailWidth = uTrail.x;            // already in model units (packed CPU-side)
   float peak = uTrail.y * uEnv.y;
   float headGlow = uTrail.z * uEnv.y;
   float fadeExp = uTrail.w;
   float trailFloor = uEnv.x;
-  bool showEpicycles = uEnv.z > 0.5;
   bool rainbow = uEnv.w > 0.5;
-  float squashGain = uLoom.x;            // FOURIER-LOOM §2b
-  float celGain = uLoom.y;               // FOURIER-LOOM §3b
-  float halfW = trailWidth * 0.5;
-
-  // §2b — the head travel frame (SAME uCurve[0]/[1] the WGSL twin reads → parity).
-  HeadFrame headFr;
-  headFr.T = vec2(1.0, 0.0);
-  headFr.sHat = 0.0;
-  if (uSampleCount >= 2) {
-    headFr = headFrame(uCurve[0].xy, uCurve[1].xy, halfW);
-  }
-  vec2 celOff = -headFr.T * halfW * 1.4;
-
-  vec4 accum = vec4(0.0);
-
-  // §3b — the cartoon CEL-SHADOW: a darker offset copy of the rope + chain, opposite travel,
-  // painted FIRST (under the lit chain). PRM-static; celGain = 0 → no pass (byte-frozen).
-  if (celGain > 0.001) {
-    vec3 ink = vec3(0.0);
-    float celA = clamp(celGain, 0.0, 1.0);
-    for (int i = 0; i < MAX_CURVE_SAMPLES; i++) {
-      if (i >= uSampleCount - 1) break;
-      vec2 sa = uCurve[i].xy + celOff;
-      vec2 sb = uCurve[i + 1].xy + celOff;
-      float d = segDist(p, sa, sb);
-      float cover = 1.0 - smoothstep(halfW, halfW + aa, d);
-      if (cover < 0.002) continue;
-      float m = cover * celA * peak;
-      accum = vec4(ink * m, m) + accum * (1.0 - m);
-    }
-    if (showEpicycles && uArmCount >= 1) {
-      for (int k = 0; k < MAX_PHASORS; k++) {
-        if (k >= uArmCount) break;
-        vec2 a = uChain[k] + celOff;
-        vec2 b = uChain[k + 1] + celOff;
-        float dArm = segDist(p, a, b);
-        float armMask = 1.0 - smoothstep(halfW * 0.55, halfW * 0.55 + aa, dArm);
-        float m = armMask * celA * peak * 0.7;
-        accum = vec4(ink * m, m) + accum * (1.0 - m);
-      }
-    }
-  }
+  float squashGain = uLoom.x;
+  float celGain = uLoom.y;
+  float halfW = vHalf;
 
-  if (showEpicycles && uArmCount >= 1) {
-    for (int k = 0; k < MAX_PHASORS; k++) {
-      if (k >= uArmCount) break;
-      vec2 a = uChain[k];
-      vec2 b = uChain[k + 1];
-      float seg = float(k) / max(float(uArmCount - 1), 1.0);
-      vec3 lin = chainColorLin(seg, rainbow);
-      float radius = length(b - a);
-      float dRing = abs(length(p - a) - radius);
-      float ringW = max(halfW * 0.45, aa);
-      float ringMask = (1.0 - smoothstep(ringW, ringW + aa, dRing)) * 0.5;
-      float dArm = segDist(p, a, b);
-      float armMask = 1.0 - smoothstep(halfW * 0.55, halfW * 0.55 + aa, dArm);
-      float dotR = max(halfW * 0.7, aa * 2.0);
-      float dDot = length(p - a);
-      float dotMask = 1.0 - smoothstep(dotR, dotR + aa, dDot);
-      float m = clamp(max(max(ringMask, armMask), dotMask), 0.0, 1.0) * peak * 0.7;
-      vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));
-      accum = vec4(rgb * m, m) + accum * (1.0 - m);
-    }
-  }
-
-  for (int i = 0; i < MAX_CURVE_SAMPLES; i++) {
-    if (i >= uSampleCount - 1) break;
-    vec3 sa = uCurve[i];
-    vec3 sb = uCurve[i + 1];
-    float d = segDist(p, sa.xy, sb.xy);
-    float cover = 1.0 - smoothstep(halfW, halfW + aa, d);
-    if (cover < 0.002) continue;
-    float age = max(sa.z, sb.z);
-    float a = peak * pow(age, fadeExp);
-    a = max(a, peak * trailFloor) * cover;
+  if (uLayer == 0) {
+    // ── TRAIL — the tapered luminous ribbon over its own soft under-glow ──
+    float age = vAge;
+    float d = segDist(p, vA, vB);
+    // B1 — the head→tail TAPER: the ribbon half-width scales with age (thick head, thin tail).
+    float ribbonHalf = halfW * (RIBBON_TAIL_FRAC + (1.0 - RIBBON_TAIL_FRAC) * age);
     vec3 lin = samplePaletteLin(1.0 - age * 0.4);
     vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));
-    accum = vec4(rgb * a, a) + accum * (1.0 - a);
-  }
-
-  if (uSampleCount >= 1) {
-    vec2 head = uCurve[0].xy;
-    // §2b — the squash-and-stretch anisotropic head (collapses to the round disc at rest).
-    float dHead = headAniso(p, head, headFr, squashGain);
+    // B1 — the soft UNDER-GLOW: a wider, low-alpha copy UNDER the crisp ribbon (ONE color event).
+    float glowHalf = ribbonHalf * RIBBON_UNDERGLOW_SCALE;
+    float glowCover = 1.0 - smoothstep(glowHalf, glowHalf + aa * 3.0, d);
+    float ga = peak * RIBBON_UNDERGLOW_ALPHA * pow(age, fadeExp) * glowCover;
+    // the crisp tapered ribbon core.
+    float cover = 1.0 - smoothstep(ribbonHalf, ribbonHalf + aa, d);
+    float ca = max(peak * pow(age, fadeExp), peak * trailFloor) * cover;
+    // core OVER glow OVER transparent (both premultiplied on the SAME rgb → out = rgb·outA).
+    float outA = ca + ga * (1.0 - ca);
+    fragColor = vec4(rgb * outA, outA);
+  } else if (uLayer == 1) {
+    // ── EPICYCLE — orbit RING + ARM + joint DOT union (MAX-blended, no join seam) ──
+    float seg = vArg2;
+    vec3 lin = chainColorLin(seg, rainbow);
+    vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));
+    float radius = length(vB - vA);
+    float dRing = abs(length(p - vA) - radius);
+    float ringW = max(halfW * 0.45, aa);
+    float ringMask = (1.0 - smoothstep(ringW, ringW + aa, dRing)) * 0.5;
+    float dArm = segDist(p, vA, vB);
+    float armMask = 1.0 - smoothstep(halfW * 0.55, halfW * 0.55 + aa, dArm);
+    float dotR = max(halfW * 0.7, aa * 2.0);
+    float dDot = length(p - vA);
+    float dotMask = 1.0 - smoothstep(dotR, dotR + aa, dDot);
+    float m = clamp(max(max(ringMask, armMask), dotMask), 0.0, 1.0) * peak * 0.7;
+    fragColor = vec4(rgb * m, m);
+  } else if (uLayer == 2) {
+    // ── HEAD — squash-and-stretch (§2b): halo + saturated core + white specular ──
+    vec2 head = vA;
+    vec2 headBack = vB;
+    HeadFrame fr = headFrame(head, headBack, halfW);
+    float dHead = headAniso(p, head, fr, squashGain);
     float coreR = halfW * 1.5;
     float haloR = coreR * 3.0;
     vec3 headRgb = clamp(linearToSrgb(samplePaletteLin(0.0)), vec3(0.0), vec3(1.0));
     float halo = (1.0 - smoothstep(0.0, haloR, dHead)) * headGlow * 0.35;
-    accum = vec4(headRgb * halo, halo) + accum * (1.0 - halo);
+    vec4 accum = vec4(headRgb * halo, halo);
     float core = (1.0 - smoothstep(coreR, coreR + aa, dHead)) * headGlow;
     accum = vec4(headRgb * core, core) + accum * (1.0 - core);
     float spec = (1.0 - smoothstep(coreR * 0.4, coreR * 0.4 + aa, dHead)) * headGlow * 0.9;
     accum = vec4(vec3(1.0) * spec, spec) + accum * (1.0 - spec);
+    fragColor = accum;
+  } else {
+    // ── CEL — the technicolor ink shadow (rope uLayer==3 / arm uLayer==4) ──
+    float celA = clamp(celGain, 0.0, 1.0);
+    float d = segDist(p, vA, vB);
+    float cover = 1.0 - smoothstep(halfW, halfW + aa, d);
+    float m = cover * celA * peak * vArg2; // vArg2 = celStrength (1.0 rope / 0.7 arm)
+    fragColor = vec4(0.0, 0.0, 0.0, m);
   }
-
-  fragColor = accum;
 }
-`, fe = 256, $ = 64, pe = .92, me = .95, he = 1.35, ge = .34;
-function _e(e, t, n) {
+`, xe = 256, $ = 64, Se = .92, Ce = .95, we = 1.35, Te = .34;
+function Ee(e, t, n) {
 	let r = e.createShader(t);
 	if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
 		let t = e.getShaderInfoLog(r);
@@ -779,212 +815,234 @@ function _e(e, t, n) {
 	}
 	return r;
 }
-function ve(e) {
-	let { canvas: t, config: n, getSpectrum: r, getPalette: i, getHeadT: a, shouldContinue: o, onFrame: c } = e, u = e.getPointerLean;
+function De(e) {
+	let { canvas: t, config: n, getSpectrum: r, getPalette: i, getHeadT: a, shouldContinue: o, onFrame: s } = e, c = e.getPointerLean;
 	return function(e) {
-		let d = _e(e, e.VERTEX_SHADER, ue), f = _e(e, e.FRAGMENT_SHADER, de), p = e.createProgram();
-		if (e.attachShader(p, d), e.attachShader(p, f), e.linkProgram(p), !e.getProgramParameter(p, e.LINK_STATUS)) throw Error(`[FourierField] link failed: ${e.getProgramInfoLog(p)}`);
-		e.deleteShader(d), e.deleteShader(f);
+		let l = Ee(e, e.VERTEX_SHADER, ye), u = Ee(e, e.FRAGMENT_SHADER, be), f = e.createProgram();
+		if (e.attachShader(f, l), e.attachShader(f, u), e.linkProgram(f), !e.getProgramParameter(f, e.LINK_STATUS)) throw Error(`[FourierField] link failed: ${e.getProgramInfoLog(f)}`);
+		e.deleteShader(l), e.deleteShader(u);
 		let m = e.createVertexArray();
 		e.bindVertexArray(m);
-		let g = e.createBuffer();
-		e.bindBuffer(e.ARRAY_BUFFER, g), e.bufferData(e.ARRAY_BUFFER, new Float32Array([
-			-1,
-			-1,
-			3,
-			-1,
-			-1,
-			3
-		]), e.STATIC_DRAW);
-		let _ = e.getAttribLocation(p, "aPosition");
-		e.enableVertexAttribArray(_), e.vertexAttribPointer(_, 2, e.FLOAT, !1, 0, 0), e.bindVertexArray(null);
-		let v = (t) => e.getUniformLocation(p, t), y = v("uFit"), b = v("uTrail"), x = v("uEnv"), S = v("uLoom"), C = v("uSampleCount"), w = v("uArmCount"), T = v("uStopCount"), E = v("uPalette[0]"), D = v("uCurve[0]"), O = v("uChain[0]"), k = new Float32Array(fe * 3), A = new Float32Array(($ + 1) * 2), j = new Float32Array(12), M = null, N = {
+		let h = e.createBuffer();
+		e.bindBuffer(e.ARRAY_BUFFER, h), e.bufferData(e.ARRAY_BUFFER, ce, e.STATIC_DRAW);
+		let g = e.getAttribLocation(f, "aCorner");
+		e.enableVertexAttribArray(g), e.vertexAttribPointer(g, 2, e.FLOAT, !1, 0, 0), e.vertexAttribDivisor(g, 0);
+		let _ = (xe - 1) * 2 + $ * 2 + 1, v = new Float32Array(_ * 8), y = e.createBuffer();
+		e.bindBuffer(e.ARRAY_BUFFER, y), e.bufferData(e.ARRAY_BUFFER, v.byteLength, e.DYNAMIC_DRAW);
+		let b = e.getAttribLocation(f, "aSeg"), x = e.getAttribLocation(f, "aData");
+		e.enableVertexAttribArray(b), e.enableVertexAttribArray(x), e.vertexAttribPointer(b, 4, e.FLOAT, !1, 32, 0), e.vertexAttribPointer(x, 4, e.FLOAT, !1, 32, 16), e.vertexAttribDivisor(b, 1), e.vertexAttribDivisor(x, 1), e.bindVertexArray(null);
+		let S = (t) => e.getUniformLocation(f, t), w = S("uFit"), T = S("uTrail"), E = S("uEnv"), D = S("uLoom"), O = S("uLayer"), k = S("uEdgeMargin"), A = S("uStopCount"), j = S("uPalette[0]"), M = new Float32Array(xe * 3), N = new Float32Array(($ + 1) * 2), P = new Float32Array(12), F = null, I = {
 			centerX: 0,
 			centerY: 0,
 			scale: 1
-		}, P = 0;
-		function F() {
+		}, ee = 0;
+		function te() {
 			let e = r();
-			e !== M && (M = e, P = Math.min(e.length, $), N = K(e));
+			e !== F && (F = e, ee = Math.min(e.length, $), I = K(e));
 		}
-		function I() {
-			let n = s(), r = t.clientWidth || 320, i = t.clientHeight || 320, a = Math.max(1, Math.round(r * n)), o = Math.max(1, Math.round(i * n));
-			(t.width !== a || t.height !== o) && (t.width = a, t.height = o), e.viewport(0, 0, t.width, t.height);
+		function L(n) {
+			e.viewport(0, 0, n?.w ?? t.width, n?.h ?? t.height);
 		}
-		function L(r) {
-			c?.(r), F();
-			let o = M;
+		function R(r) {
+			s?.(r), te();
+			let o = F;
 			if (!o) return;
-			let s = a(), d = Math.max(1, Math.min(Math.round(n.harmonics), P)), f = n.showEpicycles ? Math.max(1, Math.min(Math.round(n.epicycleArms), d)) : 0, g = fe, _ = Math.max(g - 1, 1);
+			let l = a(), u = Math.max(1, Math.min(Math.round(n.harmonics), ee)), h = n.showEpicycles ? Math.max(1, Math.min(Math.round(n.epicycleArms), u)) : 0, g = xe, _ = Math.max(g - 1, 1);
 			for (let e = 0; e < g; e++) {
-				let t = e / _, r = 1 - t, i = s - n.trailArc * t;
+				let t = e / _, r = 1 - t, i = l - n.trailArc * t;
 				i -= Math.floor(i);
-				let [a, c] = h(o, i, d), l = e * 3;
-				k[l + 0] = a, k[l + 1] = c, k[l + 2] = r;
+				let [a, s] = C(o, i, u), c = e * 3;
+				M[c + 0] = a, M[c + 1] = s, M[c + 2] = r;
 			}
-			let v = Math.min(f, d);
+			let S = Math.min(h, u);
 			for (let e = 0; e <= $; e++) {
 				let t = e * 2;
-				if (e <= v) {
-					let [n, r] = h(o, s, e);
-					A[t + 0] = n, A[t + 1] = r;
-				} else A[t + 0] = 0, A[t + 1] = 0;
+				if (e <= S) {
+					let [n, r] = C(o, l, e);
+					N[t + 0] = n, N[t + 1] = r;
+				} else N[t + 0] = 0, N[t + 1] = 0;
+			}
+			let L = t.width / Math.max(t.height, 1), R = Math.min(t.width, t.height) / Math.max(d(), 1), ne = ue(n.trailWidth, I.scale, R), z = ne * .5, re = 12 / (Math.max(I.scale, 1e-6) * Math.max(R, 1)), ie = M[0], ae = M[1], oe = M[3], ce = M[4], V = ie - oe, H = ae - ce, U = Math.hypot(V, H), le = U > 1e-4 ? V / U : 1, W = U > 1e-4 ? H / U : 0, G = -le * z * 1.4, K = -W * z * 1.4, de = se({
+				sampleCount: g,
+				armCount: h,
+				showEpicycles: n.showEpicycles,
+				celGain: n.celGain
+			}), fe = /* @__PURE__ */ new Map(), q = 0, J = (e, t, n, r, i, a, o) => {
+				v[q++] = e, v[q++] = t, v[q++] = n, v[q++] = r, v[q++] = i, v[q++] = a, v[q++] = o, v[q++] = 0;
+			};
+			for (let e of de) if (fe.set(e.kind, q), e.kind === "cel-rope") for (let e = 0; e < g - 1; e++) {
+				let t = e * 3;
+				J(M[t] + G, M[t + 1] + K, M[t + 3] + G, M[t + 4] + K, 0, z, 1);
+			}
+			else if (e.kind === "cel-arm") for (let e = 0; e < h; e++) {
+				let t = e * 2;
+				J(N[t] + G, N[t + 1] + K, N[t + 2] + G, N[t + 3] + K, 0, z * .55, .7);
 			}
-			let I = t.clientWidth || 320, L = t.clientHeight || 320, R = Math.min(I, L), z = I / Math.max(L, 1), B = q(n.trailWidth, N.scale, R), V = i(), H = Math.min(V.length, 4);
+			else if (e.kind === "epicycle") {
+				let e = Math.max(h - 1, 1);
+				for (let t = 0; t < h; t++) {
+					let n = t * 2;
+					J(N[n], N[n + 1], N[n + 2], N[n + 3], 0, z, t / e);
+				}
+			} else if (e.kind === "trail") for (let e = 0; e < g - 1; e++) {
+				let t = e * 3, n = Math.max(M[t + 2], M[t + 5]);
+				J(M[t], M[t + 1], M[t + 3], M[t + 4], n, z, 0);
+			}
+			else J(M[0], M[1], M[3], M[4], 0, z, 0);
+			let Y = q, X = i(), Z = Math.min(X.length, 4);
 			for (let e = 0; e < 4; e++) {
-				let t = l(V[Math.min(e, H - 1)] ?? V[0]);
-				j[e * 3 + 0] = t[0], j[e * 3 + 1] = t[1], j[e * 3 + 2] = t[2];
+				let t = p(X[Math.min(e, Z - 1)] ?? X[0]);
+				P[e * 3 + 0] = t[0], P[e * 3 + 1] = t[1], P[e * 3 + 2] = t[2];
 			}
-			e.useProgram(p), e.bindVertexArray(m), e.enable(e.BLEND), e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA), e.clearColor(0, 0, 0, 0), e.clear(e.COLOR_BUFFER_BIT);
-			let U = u?.() ?? {
+			e.useProgram(f), e.bindVertexArray(m), e.enable(e.BLEND), e.clearColor(0, 0, 0, 0), e.clear(e.COLOR_BUFFER_BIT), e.bindBuffer(e.ARRAY_BUFFER, y), e.bufferSubData(e.ARRAY_BUFFER, 0, v.subarray(0, Y));
+			let Q = c?.() ?? {
 				x: 0,
 				y: 0
 			};
-			e.uniform4f(y, N.centerX - U.x, N.centerY - U.y, N.scale, z), e.uniform4f(b, B, pe, me, he), e.uniform4f(x, ge, n.intensity, +!!n.showEpicycles, +!!n.rainbowChain), e.uniform4f(S, n.squashGain, n.celGain, 0, 0), e.uniform1i(C, g), e.uniform1i(w, f), e.uniform1i(T, H), e.uniform3fv(E, j), e.uniform3fv(D, k), e.uniform2fv(O, A), e.drawArrays(e.TRIANGLES, 0, 3);
+			e.uniform4f(w, I.centerX - Q.x, I.centerY - Q.y, I.scale, L), e.uniform4f(T, ne, Se, Ce, we), e.uniform4f(E, Te, n.intensity, +!!n.showEpicycles, +!!n.rainbowChain), e.uniform4f(D, n.squashGain, n.celGain, 0, 0), e.uniform1f(k, re), e.uniform1i(A, Z), e.uniform3fv(j, P);
+			for (let t of de) {
+				let n = (fe.get(t.kind) ?? 0) * 4;
+				e.vertexAttribPointer(b, 4, e.FLOAT, !1, 32, n), e.vertexAttribPointer(x, 4, e.FLOAT, !1, 32, n + 16), e.uniform1i(O, B[t.kind]), t.blend === "max" ? (e.blendEquation(e.MAX), e.blendFunc(e.ONE, e.ONE)) : (e.blendEquation(e.FUNC_ADD), e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA)), e.drawArraysInstanced(e.TRIANGLE_STRIP, 0, 4, t.instanceCount);
+			}
+			e.blendEquation(e.FUNC_ADD);
 		}
 		return {
-			frame: L,
+			frame: R,
 			shouldContinue: o,
-			resize: I,
+			resize: L,
 			teardown: () => {
-				e.deleteProgram(p), e.deleteBuffer(g), e.deleteVertexArray(m);
+				e.deleteProgram(f), e.deleteBuffer(h), e.deleteBuffer(y), e.deleteVertexArray(m);
 			}
 		};
 	};
 }
 //#endregion
-//#region src/components/custom/fourier-field/composables/useFourierField.ts
-function ye(e, t) {
-	let { config: r, getSpectrum: i, getPalette: a } = t, o = t.mode ?? "live", s = t.frozenT ?? .34, l = t.periodS ?? 16, u = 0, d = -1, f = 0, p = 0;
-	function m(e) {
-		if (f === 0 && p === 0) return;
-		let t = -64 * f - 2 * .62 * 8 * p;
-		p += t * e, f += p * e, Math.abs(f) < 1e-4 && Math.abs(p) < 1e-4 && (f = 0, p = 0);
+//#region src/components/fourier-field/composables/useFourierField.ts
+function Oe(e, t) {
+	let { config: r, getSpectrum: o, getPalette: s } = t, c = t.mode ?? "live", l = t.frozenT ?? .34, u = t.periodS ?? 16, p = 0, m = -1, h = 0, g = 0;
+	function _(e) {
+		if (h === 0 && g === 0) return;
+		let t = -64 * h - 2 * .62 * 8 * g;
+		g += t * e, h += g * e, Math.abs(h) < 1e-4 && Math.abs(g) < 1e-4 && (h = 0, g = 0);
 	}
-	let g = n({ respectReducedMotion: r.respectReducedMotion }), _ = () => (t.freeze?.() ?? !1) || (F?.reducedMotion ?? !1);
-	function v(e) {
-		y(e), t.onHeadFrame?.(E());
+	let v = n({ respectReducedMotion: r.respectReducedMotion }), y = () => (t.freeze?.() ?? !1) || (N?.reducedMotion ?? !1);
+	function b(e) {
+		x(e);
 	}
-	function y(e) {
-		let t = d >= 0 ? (e - d) * 1e3 : 16.7;
-		if (d = e, g.tick(t), _()) {
-			u = s, f = 0, p = 0;
+	function x(e) {
+		let n = m >= 0 ? (e - m) * 1e3 : 16.7;
+		m = e;
+		let i = t.routePointer?.();
+		if (i && (v.setActive(i.active), i.active && v.setPointer(i.x, i.y)), v.tick(n), y()) {
+			p = l, h = 0, g = 0;
 			return;
 		}
-		let n = Math.min(Math.max(t / 1e3, 0), .05);
-		if (r.interactive && g.active.value) {
-			let e = r.speed / l + g.velocity.value.x * M + f;
-			u = (u + e * n) % 1, u < 0 && (u += 1);
-			let t = g.burst.value * 4;
-			t !== 0 && (f = t, p = 0), m(n);
+		let a = Math.min(Math.max(n / 1e3, 0), .05);
+		if (r.interactive && v.active.value) {
+			let e = r.speed / u + v.velocity.value.x * te + h;
+			p = (p + e * a) % 1, p < 0 && (p += 1);
+			let t = v.burst.value * 4;
+			t !== 0 && (h = t, g = 0), _(a);
 			return;
 		}
-		let i = r.speed / l + f;
-		u = (u + i * n) % 1, u < 0 && (u += 1), m(n);
+		let o = r.speed / u + h;
+		p = (p + o * a) % 1, p < 0 && (p += 1), _(a);
 	}
-	let b = () => u, x = null, S = {
+	let S = () => p, C = null, w = {
 		centerX: 0,
 		centerY: 0,
 		scale: 1
-	}, C = () => {
-		let e = i();
-		return e !== x && (x = e, S = K(e)), S;
-	}, w = () => {
-		let e = i(), t = Math.max(1, Math.min(Math.round(r.harmonics), e.length, 64)), [n, a] = h(e, u, t);
-		return {
-			x: n,
-			y: a
-		};
+	}, T = () => {
+		let e = o();
+		return e !== C && (C = e, w = K(e)), w;
 	}, E = () => {
+		if (!r.interactive) return {
+			x: 0,
+			y: 0
+		};
 		let t = e.value;
-		if (!t) return null;
-		let n = t.clientWidth || 0, r = t.clientHeight || 0;
-		if (n <= 0 || r <= 0) return null;
-		let i = n / r, a = w(), o = C(), s = D(), c = s.x !== 0 || s.y !== 0 ? {
-			...o,
-			centerX: o.centerX - s.x,
-			centerY: o.centerY - s.y
-		} : o;
-		return ee(a.x, a.y, c, i);
-	}, D = () => {
-		if (!r.interactive || !g.active.value) return {
+		if (!t || !t.width || !t.height) return {
 			x: 0,
 			y: 0
 		};
-		let e = g.smoothedPosition.value;
+		let { leanX: n, leanY: o } = a(i(v), {
+			aspect: t.width / t.height,
+			scale: Math.max(T().scale, 1e-6)
+		});
 		return {
-			x: (e.x * 2 - 1) * N,
-			y: (e.y * 2 - 1) * N
+			x: n,
+			y: o
 		};
-	}, O = (e) => {
-		g.onPointerMove(e), r.interactive && F?.wake();
-	}, k = () => {
-		g.onPointerEnter(), r.interactive && F?.wake();
-	}, A = (e) => e.parentElement ?? e;
-	function j(e) {
-		let t = A(e);
-		t.addEventListener("pointermove", O), t.addEventListener("pointerenter", k), t.addEventListener("pointerleave", g.onPointerLeave);
+	}, D = (e) => {
+		v.onPointerMove(e), r.interactive && N?.wake();
+	}, O = () => {
+		v.onPointerEnter(), r.interactive && N?.wake();
+	}, k = (e) => e.parentElement ?? e;
+	function A(e) {
+		let t = k(e);
+		t.addEventListener("pointermove", D), t.addEventListener("pointerenter", O), t.addEventListener("pointerleave", v.onPointerLeave);
 	}
-	function P(e) {
-		let t = A(e);
-		t.removeEventListener("pointermove", O), t.removeEventListener("pointerenter", k), t.removeEventListener("pointerleave", g.onPointerLeave);
+	function M(e) {
+		let t = k(e);
+		t.removeEventListener("pointermove", D), t.removeEventListener("pointerenter", O), t.removeEventListener("pointerleave", v.onPointerLeave);
 	}
-	let F = null, I = () => {
+	let N = null, P = () => {
 		let t = e.value;
-		return t ? (F || (j(t), F = c(t, {
-			mode: o,
+		return t ? (N || (A(t), N = f(t, {
+			mode: c,
 			respectReducedMotion: r.respectReducedMotion,
-			setupWGPU: le({
+			dprPolicy: d,
+			revealBloom: !0,
+			setupWGPU: ve({
 				canvas: t,
 				config: r,
-				getSpectrum: i,
-				getPalette: a,
-				getHeadT: b,
+				getSpectrum: o,
+				getPalette: s,
+				getHeadT: S,
 				shouldContinue: () => !0,
-				onFrame: v,
-				getPointerLean: D
+				onFrame: b,
+				getPointerLean: E
 			}),
-			setupGL: ve({
+			setupGL: De({
 				canvas: t,
 				config: r,
-				getSpectrum: i,
-				getPalette: a,
-				getHeadT: b,
+				getSpectrum: o,
+				getPalette: s,
+				getHeadT: S,
 				shouldContinue: () => !0,
-				onFrame: v,
-				getPointerLean: D
+				onFrame: b,
+				getPointerLean: E
 			})
-		}), F.armAsync()), F) : null;
+		}), N.armAsync()), N) : null;
 	};
-	queueMicrotask(() => I());
-	let L = {
+	queueMicrotask(() => P());
+	let F = {
 		get backend() {
-			return I()?.backend ?? "webgpu";
+			return P()?.backend ?? "webgpu";
 		},
-		pause: () => I()?.suspend("manual"),
-		resume: () => I()?.resume("manual"),
-		wake: () => I()?.wake(),
-		renderAt: (e) => I()?.renderAt(e),
+		pause: () => P()?.suspend("manual"),
+		resume: () => P()?.resume("manual"),
+		wake: () => P()?.wake(),
+		renderAt: (e) => P()?.renderAt(e),
 		get reducedMotion() {
-			return F?.reducedMotion ?? !1;
+			return N?.reducedMotion ?? !1;
 		},
 		get headT() {
-			return u;
+			return p;
 		},
 		setHeadT: (e) => {
-			u = (e % 1 + 1) % 1, I()?.wake();
+			p = (e % 1 + 1) % 1, P()?.wake();
 		},
-		headUnit: E,
 		dispose: () => {
 			let t = e.value;
-			t && P(t), g.dispose(), F?.dispose();
+			t && M(t), v.dispose(), N?.dispose();
 		}
 	};
-	return T(() => L.dispose()), L;
+	return j(() => F.dispose()), F;
 }
 //#endregion
-//#region src/components/custom/fourier-field/FourierField.vue
-var be = /* @__PURE__ */ e(/* @__PURE__ */ S({
+//#region src/components/fourier-field/FourierField.vue
+var ke = /* @__PURE__ */ e(/* @__PURE__ */ O({
 	__name: "FourierField",
 	props: {
 		config: {},
@@ -1000,38 +1058,46 @@ var be = /* @__PURE__ */ e(/* @__PURE__ */ S({
 		intensity: {}
 	},
 	setup(e, { expose: n }) {
-		let r = e, i = O("hostRef"), a = O("canvasRef"), { isDark: o } = d(), s = y(() => {
-			let e = r.config ?? L, t = r.intensity == null ? e.intensity : Math.max(0, Math.min(2, r.intensity)), n = r.config ? e.interactive : !1;
+		let i = e, a = P("hostRef"), s = P("canvasRef"), { isDark: c } = o(), l = r(), u = T(() => {
+			let e = i.config ?? ie, t = i.intensity == null ? e.intensity : Math.max(0, Math.min(2, i.intensity)), n = i.config ? e.interactive : !0;
 			return {
 				...e,
 				intensity: t,
 				interactive: n
 			};
-		}), c = y(() => r.spectrum && r.spectrum.length > 0 ? r.spectrum : _(f(p((r.freeze ? "fourier-field/frozen" : r.seed || "fourier-field") + r.seed)), {
-			harmonics: Math.min(s.value.harmonics + 4, 62),
-			harmonicScale: s.value.harmonicScale
-		})), l = () => c.value;
-		function m(e) {
+		}), d = T(() => !!i.config && u.value.interactive), f = i.config ? void 0 : () => ({
+			x: l.pointer.value.x,
+			y: l.pointer.value.y,
+			active: l.active.value
+		}), p = T(() => {
+			if (i.spectrum && i.spectrum.length > 0) return i.spectrum;
+			let e = w[u.value.source];
+			return e ? x(e) : _(h(g((i.freeze ? "fourier-field/frozen" : i.seed || "fourier-field") + i.seed)), {
+				harmonics: Math.min(u.value.harmonics + 4, 62),
+				harmonicScale: u.value.harmonicScale
+			});
+		}), v = () => p.value;
+		function y(e) {
 			if (!e.includes("var(") && !e.includes("light-dark(")) return e;
-			let n = i.value;
+			let n = a.value;
 			if (typeof window > "u" || !n) return e;
 			if (e.includes("var(")) return t(e, n);
 			let r = n.style.color;
 			n.style.color = e;
-			let a = getComputedStyle(n).color;
-			return n.style.color = r, a || e;
+			let i = getComputedStyle(n).color;
+			return n.style.color = r, i || e;
 		}
-		let h = D(s.value.palette);
-		function g() {
-			if (r.getPalette) {
-				h.value = r.getPalette();
+		let b = N(u.value.palette);
+		function S() {
+			if (i.getPalette) {
+				b.value = i.getPalette();
 				return;
 			}
-			if (o.value, r.color) {
-				let e = m(r.color);
+			if (c.value, i.color) {
+				let e = y(i.color);
 				if (e.includes("var(") || e.includes("light-dark(")) return;
-				let t = u(e);
-				h.value = [{
+				let t = m(e);
+				b.value = [{
 					L: Math.max(.5, t.L),
 					C: Math.max(.12, t.C),
 					h: t.h
@@ -1042,56 +1108,44 @@ var be = /* @__PURE__ */ e(/* @__PURE__ */ S({
 				}];
 				return;
 			}
-			h.value = s.value.palette;
-		}
-		let v = () => h.value, S = new Proxy({}, {
-			get: (e, t) => Reflect.get(s.value, t),
-			has: (e, t) => Reflect.has(s.value, t),
-			ownKeys: () => Reflect.ownKeys(s.value),
-			getOwnPropertyDescriptor: (e, t) => Reflect.getOwnPropertyDescriptor(s.value, t)
-		});
-		function T(e) {
-			let t = i.value;
-			!t || !e || t.style.setProperty("--ff-head-xy", `${e.x.toFixed(4)} ${e.y.toFixed(4)}`);
+			b.value = u.value.palette;
 		}
-		let A = ye(a, {
-			config: S,
-			getSpectrum: l,
-			getPalette: v,
-			freeze: () => r.freeze,
-			onHeadFrame: T
+		let C = Oe(s, {
+			config: new Proxy({}, {
+				get: (e, t) => Reflect.get(u.value, t),
+				has: (e, t) => Reflect.has(u.value, t),
+				ownKeys: () => Reflect.ownKeys(u.value),
+				getOwnPropertyDescriptor: (e, t) => Reflect.getOwnPropertyDescriptor(u.value, t)
+			}),
+			getSpectrum: v,
+			getPalette: () => b.value,
+			freeze: () => i.freeze,
+			routePointer: f
 		});
-		function j() {
-			let e = i.value;
-			if (!e) return;
-			let t = h.value[0];
-			t && e.style.setProperty("--ff-head-hue", `${t.h.toFixed(1)}`);
-		}
-		return k(() => r.config, () => A.wake(), { deep: !0 }), k([
-			() => r.color,
-			() => r.getPalette,
-			o
-		], g, { immediate: !0 }), k(h, j), w(() => {
-			g(), j();
-		}), k(o, () => A.wake()), k(() => r.freeze, () => A.wake()), n({
-			backend: () => A.backend,
-			pause: A.pause,
-			resume: A.resume,
-			wake: A.wake,
-			renderAt: A.renderAt,
-			setHeadT: A.setHeadT,
-			headUnit: A.headUnit
-		}), (e, t) => (E(), b("div", {
+		return F(() => i.config, () => C.wake(), { deep: !0 }), F([
+			() => i.color,
+			() => i.getPalette,
+			c
+		], S, { immediate: !0 }), A(() => {
+			S();
+		}), F(c, () => C.wake()), F(() => i.freeze, () => C.wake()), n({
+			backend: () => C.backend,
+			pause: C.pause,
+			resume: C.resume,
+			wake: C.wake,
+			renderAt: C.renderAt,
+			setHeadT: C.setHeadT
+		}), (e, t) => (M(), E("div", {
 			ref_key: "hostRef",
-			ref: i,
-			class: C(["fourier-field", { "fourier-field--interactive": s.value.interactive }])
-		}, [x("canvas", {
-			ref_key: "canvasRef",
 			ref: a,
+			class: k(["fourier-field", { "fourier-field--interactive": d.value }])
+		}, [D("canvas", {
+			ref_key: "canvasRef",
+			ref: s,
 			class: "fourier-field-canvas",
 			"aria-hidden": "true"
 		}, null, 512)], 2));
 	}
-}), [["__scopeId", "data-v-4914c4f3"]]);
+}), [["__scopeId", "data-v-2b2aeb28"]]);
 //#endregion
-export { L as DEFAULT_FOURIER_CONFIG, be as FourierField, j as MAX_CURVE_SAMPLES, A as MAX_PHASORS, I as WARM_IDENTITY_PALETTE, v as comp, g as dftFromPoints, _ as makeEllipticSpectrum, h as partialSumAt, m as positionsAt, ye as useFourierField };
+export { ie as DEFAULT_FOURIER_CONFIG, w as FOURIER_FIGURES, b as FOURIER_FIGURE_KEYS, ke as FourierField, ee as MAX_CURVE_SAMPLES, I as MAX_PHASORS, re as WARM_IDENTITY_PALETTE, S as comp, y as dftFromPoints, _ as makeEllipticSpectrum, x as makeHarmonicFigure, C as partialSumAt, v as positionsAt, Oe as useFourierField };