@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/liquid-grid.js

@@ -0,0 +1,1064 @@
+import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { t } from "./usePointerVelocityField-CwXyeW0Z.js";
+import { n, o as r } from "./procedural-color.wgsl-ByduxnzV.js";
+import { t as i } from "./flow.glsl-CVqPSj8_.js";
+import { a, t as o } from "./useGpuSubstrate-DcY584kE.js";
+import { c as s, t as c } from "./color-Bp5jmv4Z.js";
+import { computed as l, createElementBlock as u, createElementVNode as d, defineComponent as f, normalizeStyle as p, onMounted as m, onScopeDispose as h, openBlock as g, reactive as _, useTemplateRef as v, watch as y } from "vue";
+//#region src/composables/glass/wave/waveField.ts
+var b = Math.PI * 2;
+function x(e, t, n, r, i, a) {
+	let o = ((e.x * n.x + e.y * n.y) * r - t * i) / b;
+	o -= Math.floor(o);
+	let s = (o - .5) * 2;
+	return Math.exp(-(s * s) / Math.max(a, .001));
+}
+function S(e, t, n, r, i, a, o) {
+	return x(e, t, n, r, i, a) * o;
+}
+function C(e, t, n, r, i, a, o, s) {
+	let c = Math.max(t, .001) * .5, l = S({
+		x: e.x + c,
+		y: e.y
+	}, n, r, i, a, o, s), u = S({
+		x: e.x - c,
+		y: e.y
+	}, n, r, i, a, o, s), d = S({
+		x: e.x,
+		y: e.y + c
+	}, n, r, i, a, o, s), f = S({
+		x: e.x,
+		y: e.y - c
+	}, n, r, i, a, o, s);
+	return {
+		x: (l - u) / (2 * c),
+		y: (d - f) / (2 * c)
+	};
+}
+function w(e, t, n) {
+	let r = 1 - Math.abs((e.x - Math.floor(e.x)) * 2 - 1), i = 1 - Math.abs((e.y - Math.floor(e.y)) * 2 - 1), a = Math.min(r, i), o = Math.max(n.x, n.y) * 1.5, s = t, c = t + 2 * o, l = Math.max(c - s, 1e-6), u = Math.min(Math.max((a - s) / l, 0), 1);
+	return u * u * (3 - 2 * u);
+}
+function T(e, t, n, r) {
+	let i = e.x - t.x, a = e.y - t.y, o = i * i + a * a, s = Math.max(r, 1e-4), c = n * Math.exp(-o / (2 * s * s)), l = Math.cos(c), u = Math.sin(c);
+	return {
+		x: t.x + (l * i - u * a),
+		y: t.y + (u * i + l * a)
+	};
+}
+var E = 1.833333;
+function D(e, t, n, r, i, a, o, s, c, l = .6) {
+	let u = x(t, n, r, i, a, o) * c, d = e({
+		x: t.x * l + n * .05,
+		y: t.y * l - n * .04
+	}), f = l * E, p = e({
+		x: t.x * f - n * .03,
+		y: t.y * f + n * .035
+	}), m = s * u;
+	return {
+		x: t.x + (d.x + p.x * .5) * m,
+		y: t.y + (d.y + p.y * .5) * m
+	};
+}
+//#endregion
+//#region src/components/liquid-grid/composables/liquidGrid.ts
+Math.PI * 2;
+var O = .012, k = .03;
+function A(e, t) {
+	let n = e * .1031 % 1, r = t * .1031 % 1, i = e * .1031 % 1;
+	n < 0 && (n += 1), r < 0 && (r += 1), i < 0 && (i += 1);
+	let a = n * (r + 33.33) + r * (i + 33.33) + i * (n + 33.33);
+	n += a, r += a, i += a;
+	let o = (n + r) * i % 1;
+	return o < 0 && (o += 1), o;
+}
+function j(e, t, n) {
+	return e + (t - e) * n;
+}
+function M(e, t) {
+	let n = Math.floor(e), r = Math.floor(t), i = e - n, a = t - r, o = i * i * i * (i * (i * 6 - 15) + 10), s = a * a * a * (a * (a * 6 - 15) + 10), c = A(n, r), l = A(n + 1, r), u = A(n, r + 1), d = A(n + 1, r + 1);
+	return j(j(c, l, o), j(u, d, o), s);
+}
+function N(e) {
+	let t = 0, n = .5, r = 1, i = e.x, a = e.y;
+	for (let e = 0; e < 3; e++) {
+		t += n * M(i * r, a * r);
+		let e = .8 * i - .6 * a, o = .6 * i + .8 * a;
+		i = e, a = o, r *= 2, n *= .5;
+	}
+	return t;
+}
+function P(e) {
+	let t = N({
+		x: e.x + O,
+		y: e.y
+	}) - N({
+		x: e.x - O,
+		y: e.y
+	}), n = N({
+		x: e.x,
+		y: e.y + O
+	}) - N({
+		x: e.x,
+		y: e.y - O
+	}), r = t / (2 * O);
+	return {
+		x: n / (2 * O),
+		y: -r
+	};
+}
+function F(e, t, n) {
+	let r = t - e, i = Math.abs(r) < 1e-9 ? r < 0 ? -1e-9 : 1e-9 : r, a = Math.min(Math.max((n - e) / i, 0), 1);
+	return a * a * (3 - 2 * a);
+}
+function I(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function L(e, t, n) {
+	let r = 1 - Math.abs((e.x - Math.floor(e.x)) * 2 - 1), i = 1 - Math.abs((e.y - Math.floor(e.y)) * 2 - 1), a = I(t, n.x, .5), o = I(t, n.y, .5), s = n.x * 1.5, c = n.y * 1.5, l = F(a + s, a - s, r), u = F(o + c, o - c, i);
+	return l *= I(t / Math.max(a, 1e-6), 0, 1), u *= I(t / Math.max(o, 1e-6), 0, 1), l = j(l, t, I(n.x * 2 - 1, 0, 1)), u = j(u, t, I(n.y * 2 - 1, 0, 1)), Math.max(l, u);
+}
+function R(e, t, n) {
+	let r = D(P, {
+		x: e.x * n.gridScale,
+		y: e.y * n.gridScale
+	}, t, n.waveDir, n.waveK, n.waveOmega, n.waveSigma, n.twistMax, n.amp, k);
+	n.interactive > .5 && (r = T(r, n.cursor, n.bulgeStrength * n.bulgeMode, n.bulgeRadius));
+	let i = L(r, n.targetWidth, n.uvDeriv), a = Math.max(n.majorEvery, 1), o = {
+		x: r.x / a,
+		y: r.y / a
+	}, s = {
+		x: n.uvDeriv.x / a,
+		y: n.uvDeriv.y / a
+	}, c = L(o, n.targetWidthMajor, s), l = Math.max(i * n.minorAlpha, c * n.majorAlpha), u = n.faceAlpha ?? 0, d = n.faceReliefGain ?? 0, f = n.squashK ?? 0, p = n.baseInset ?? 0, m = n.lightDir ?? {
+		x: .6,
+		y: .8
+	}, h = {
+		x: Math.floor(r.x) + .5,
+		y: Math.floor(r.y) + .5
+	}, g = S(h, t, n.waveDir, n.waveK, n.waveOmega, n.waveSigma, n.amp), _ = C(h, 1, t, n.waveDir, n.waveK, n.waveOmega, n.waveSigma, n.amp), v = -_.x * d, y = -_.y * d, b = Math.hypot(v, y, 1), x = Math.hypot(m.x, m.y) || 1, E = I(.5 + (v * m.x + y * m.y) / (b * x) * .5, 0, 1), O = p * (1 - f * g), A = w(r, O, n.uvDeriv), j = A * u * n.fieldAlpha, M = I(E * .5 + g * .5, 0, 1);
+	return {
+		line: l,
+		alpha: l * n.fieldAlpha,
+		face: {
+			env: g,
+			h: g,
+			shade: E,
+			faceCov: A,
+			faceA: j,
+			rampT: M
+		}
+	};
+}
+function z(e, t) {
+	return e / Math.max(t, 1);
+}
+//#endregion
+//#region src/components/liquid-grid/shaders/liquid-grid.wgsl.ts
+var B = `
+const TAU: f32 = 6.283185307179586;
+
+// ── Paper-grid uniforms (the typed-struct source-of-truth — see uniformBridgeWGPU.ts) ──
+struct LiquidGridUniforms {
+  // u0: (uTime, uGridScale, uMinorPitch, uMajorEvery)
+  u0: vec4<f32>,
+  // face: (uFaceAlpha, uFaceRelief, uSquashK, uBaseInset) — the height-lit FACE (re-points the retired warp lane)
+  face: vec4<f32>,
+  // warp2: (uAmplitude, uAspect, uLightDirX, uLightDirY) — aspect + the cel key-light
+  warp2: vec4<f32>,
+  // grid: (uTargetWidth, uTargetWidthMajor, uMinorAlpha, uMajorAlpha)
+  grid: vec4<f32>,
+  // field: (uFieldAlpha, uHasBackground, _pad, _pad)
+  field: vec4<f32>,
+  // cursor: (uCursorX, uCursorY, uSwirlStrength, uSwirlRadius)
+  cursor: vec4<f32>,
+  // cursor2: (uBulgeMode, uInteractive, _pad, _pad)
+  cursor2: vec4<f32>,
+  // line: (uLineColor.rgb (linear), _pad)
+  line: vec4<f32>,
+  // bg: (uBg.rgb (linear), _pad)
+  bg: vec4<f32>,
+  // wave: (waveDirX, waveDirY, waveK, waveOmega) — the traveling-wave crest
+  wave: vec4<f32>,
+  // wave2: (waveSigma, twistMax, _pad, amp) — the affine sheet-warp envelope (amp: spring-eased)
+  wave2: vec4<f32>,
+  // faceLo: (rose-umber trough .rgb (linear), _pad) — the warm-divergent ramp (FOLD B, 3-stop)
+  faceLo: vec4<f32>,
+  // faceMid: (ember-amber mid .rgb (linear), _pad)
+  faceMid: vec4<f32>,
+  // faceHi: (warm-wheat crest .rgb (linear), _pad)
+  faceHi: vec4<f32>,
+};
+
+@group(0) @binding(0) var<uniform> u: LiquidGridUniforms;
+
+${n}
+
+// ── The host noise basis (transcribes liquidGrid.ts hash21/valueNoise/potentialFBM) ──
+// A quintic-faded 2D value-noise fbm potential — the SAME basis the dot-flow-field carries
+// (so the suite speaks ONE noise basis). DECLARED ABOVE the curl splice (WGSL has no forward
+// declaration — a function may only call one declared earlier).
+fn hash21(x: f32, y: f32) -> f32 {
+  var px = fract(x * 0.1031);
+  var py = fract(y * 0.1031);
+  var pz = fract(x * 0.1031);
+  let d = px * (py + 33.33) + py * (pz + 33.33) + pz * (px + 33.33);
+  px = px + d;
+  py = py + d;
+  pz = pz + d;
+  return fract((px + py) * pz);
+}
+
+fn valueNoise(x: f32, y: f32) -> f32 {
+  let ix = floor(x);
+  let iy = floor(y);
+  let fx = x - ix;
+  let fy = y - iy;
+  let ux = fx * fx * fx * (fx * (fx * 6.0 - 15.0) + 10.0);
+  let uy = fy * fy * fy * (fy * (fy * 6.0 - 15.0) + 10.0);
+  let a = hash21(ix, iy);
+  let b = hash21(ix + 1.0, iy);
+  let c = hash21(ix, iy + 1.0);
+  let d2 = hash21(ix + 1.0, iy + 1.0);
+  return mix(mix(a, b, ux), mix(c, d2, ux), uy);
+}
+
+// The 3-octave scalar fbm potential — the host noise basis the curl operator wraps.
+fn potentialFBM(p: vec2f) -> f32 {
+  var v = 0.0;
+  var amp = 0.5;
+  var freq = 1.0;
+  var px = p.x;
+  var py = p.y;
+  for (var i = 0; i < 3; i = i + 1) {
+    v = v + amp * valueNoise(px * freq, py * freq);
+    // FBM_ROT mat2(0.8, 0.6, -0.6, 0.8) — same rotation as the shared chunk.
+    let rx = 0.8 * px - 0.6 * py;
+    let ry = 0.6 * px + 0.8 * py;
+    px = rx;
+    py = ry;
+    freq = freq * 2.0;
+    amp = amp * 0.5;
+  }
+  return v;
+}
+
+// The shared divergence-free 2D-curl operator (flow.wgsl.ts — the FIRST WGSL curl consumer).
+
+const CURL_EPS: f32 = 0.012;
+
+// ∇×ψ in 2D — the divergence-free flow direction. Central finite differences of the
+// scalar potential give the partials; the cross-pairing (∂y, −∂x) is the 2D curl.
+fn curlFBM(p: vec2f) -> vec2f {
+  let dx = potentialFBM(p + vec2f(CURL_EPS, 0.0)) - potentialFBM(p - vec2f(CURL_EPS, 0.0));
+  let dy = potentialFBM(p + vec2f(0.0, CURL_EPS)) - potentialFBM(p - vec2f(0.0, CURL_EPS));
+  // ψ-gradient is (dx, dy)/(2·eps); the curl rotates it 90°: (∂ψ/∂y, −∂ψ/∂x).
+  let g = vec2f(dx, dy) / (2.0 * CURL_EPS);
+  return vec2f(g.y, -g.x);
+}
+
+
+// The shared traveling-wave WARP chunk (waveField.wgsl.ts — waveFlow/cursorSwirl/
+// travelingEnvelope + the FACE leaf; splices AFTER valueNoise + curlFBM are declared). liquid-grid
+// + concentric read the SAME waveFlow continuous affine sheet-warp (the DRY coupling — a leaf
+// tune moves both).
+
+const WAVE_FIELD_TAU: f32 = 6.283185307179586;
+
+// The traveling-wave envelope — a moving Gaussian crest band sweeping along waveDir.
+fn travelingEnvelope(pivot: vec2f, t: f32, waveDir: vec2f, waveK: f32, waveOmega: f32, waveSigma: f32) -> f32 {
+  let coord = dot(pivot, waveDir) * waveK - t * waveOmega;
+  let crest = fract(coord / WAVE_FIELD_TAU);
+  let z = (crest - 0.5) * 2.0;
+  return exp(-(z * z) / max(waveSigma, 1e-3));
+}
+
+// The curl-direction scalar — the smooth low-freq director the per-cell twist follows.
+fn curlScalar(cc: vec2f, t: f32) -> f32 {
+  let f = curlFBM(vec2f(cc.x * 0.5 + t * 0.08, cc.y * 0.5 - t * 0.06));
+  return clamp(f.x, -1.0, 1.0);
+}
+
+// The directed-twist FLOOR (the visibility cure): keep the curl SIGN (adjacent cells lean
+// together) but floor the magnitude so a crest-band cell ALWAYS rotates decisively.
+const WAVE_FIELD_TWIST_FLOOR: f32 = 0.62;
+fn directedTwist(s: f32, floorMag: f32) -> f32 {
+  let mag = max(floorMag, abs(s));
+  let sgn = tanh(s * 6.0);
+  return sgn * mag;
+}
+
+// ── The FACE leaf (the structurally-absent RE-INVENT — height-lit filled cell interior) ──
+// DECLARED ABOVE cellTwist (no WGSL forward declaration): cellTwist rides cellHeight via the
+// driver so twist + face read ONE envelope.
+
+// The sheet displacement at a cell center = the EXACT traveling-wave scalar the twist rides.
+fn cellHeight(cc: vec2f, t: f32, waveDir: vec2f, waveK: f32, waveOmega: f32, waveSigma: f32, amp: f32) -> f32 {
+  return travelingEnvelope(cc, t, waveDir, waveK, waveOmega, waveSigma) * amp;
+}
+
+// The pre-twist driver (FOLD A): the cell pivot cc + the crest envelope env the twist AND the
+// face both ride. The face samples height/relief at THIS pre-twist cc (the crest twist crosses
+// the cell boundary → floor(twisted_g) would light a NEIGHBOUR cell). cc in .xy, env in .z.
+fn cellDriver(g: vec2f, cellSize: f32, t: f32, waveDir: vec2f, waveK: f32, waveOmega: f32,
+              waveSigma: f32, amp: f32) -> vec3f {
+  let cs = max(cellSize, 1e-3);
+  let cc = (floor(g / cs) + 0.5) * cs;
+  let env = cellHeight(cc, t, waveDir, waveK, waveOmega, waveSigma, amp);
+  return vec3f(cc, env);
+}
+
+// The central-difference slope of cellHeight across a cell (eps = 0.5·cellSize) — derivative-
+// FREE (NO dFdx on the height) → Safari WebGL2-safe. Returns ∇H.
+fn faceRelief(cc: vec2f, cellSize: f32, t: f32, waveDir: vec2f, waveK: f32, waveOmega: f32,
+              waveSigma: f32, amp: f32) -> vec2f {
+  let eps = max(cellSize, 1e-3) * 0.5;
+  let hxp = cellHeight(cc + vec2f(eps, 0.0), t, waveDir, waveK, waveOmega, waveSigma, amp);
+  let hxm = cellHeight(cc - vec2f(eps, 0.0), t, waveDir, waveK, waveOmega, waveSigma, amp);
+  let hyp = cellHeight(cc + vec2f(0.0, eps), t, waveDir, waveK, waveOmega, waveSigma, amp);
+  let hym = cellHeight(cc - vec2f(0.0, eps), t, waveDir, waveK, waveOmega, waveSigma, amp);
+  return vec2f((hxp - hxm) / (2.0 * eps), (hyp - hym) / (2.0 * eps));
+}
+
+// Soft inset-square coverage inside a (warped) cell — the filled FACE plateau. d is the
+// distance into the cell from the nearest gutter (the Golus triangle-wave); the inset retreats
+// as it grows (the squash). aa = the shader's fwidth(g) (JS passes a fixed uvDeriv).
+fn facePlateau(g: vec2f, inset: f32, uvDeriv: vec2f) -> f32 {
+  let tri = 1.0 - abs(fract(g) * 2.0 - 1.0);
+  let d = min(tri.x, tri.y);
+  let aa = max(uvDeriv.x, uvDeriv.y) * 1.5;
+  return smoothstep(inset, inset + 2.0 * aa, d);
+}
+
+// The cell-local twist about each cell's own center, gated by the traveling wave + directed
+// by the curl flow. amp is the spring-eased envelope amplitude the JS host drives. FOLD C: the
+// TWIST_FLOOR is crest-gated by env so OFF-crest cells relax to flat calm paper (the traveling
+// read, not static foil).
+fn cellTwist(g: vec2f, cellSize: f32, t: f32, waveDir: vec2f, waveK: f32, waveOmega: f32,
+             waveSigma: f32, twistMax: f32, shearMax: f32, amp: f32) -> vec2f {
+  let drv = cellDriver(g, cellSize, t, waveDir, waveK, waveOmega, waveSigma, amp);
+  let cc = drv.xy;
+  let env = drv.z;
+  let floorMag = WAVE_FIELD_TWIST_FLOOR * env;   // FOLD C: crest-gated floor
+  let theta = twistMax * env * directedTwist(curlScalar(cc, t), floorMag);
+  let shear = shearMax * env * directedTwist(curlScalar(cc + vec2f(17.3, 9.1), t), floorMag);
+  let local = g - cc;
+  let ct = cos(theta);
+  let st = sin(theta);
+  var rot = vec2f(ct * local.x - st * local.y, st * local.x + ct * local.y);
+  rot.x = rot.x + shear * rot.y;   // a small skew so the box MORPHS, not just rotates
+  return cc + rot;
+}
+
+// The CONTINUOUS traveling-wave FLOW warp — the SMOOTH twin of cellTwist (no per-cell seam;
+// for the level-set contours that shatter into a mesh under the cell discontinuity).
+// BG.W-GRID-AFFINE — warpFreq is the HOST-supplied curl-sampling spatial frequency (the caller's
+// own coordinate units): an order of magnitude BELOW its grid frequency so the warp is locally
+// affine (major lines bow as ONE smooth curve, no sub-cell crackle). liquid-grid (cell-scale g0)
+// passes ~0.03; concentric (unit-scale p) passes 0.6. The 1.833333 second-flow ratio transcribes
+// WAVE_FLOW_SECOND_RATIO. Amplitude unchanged — curl magnitude is the intrinsic gradient at the
+// fixed CURL_EPS, independent of warpFreq; the t-drift is host-agnostic.
+fn waveFlow(g: vec2f, t: f32, waveDir: vec2f, waveK: f32, waveOmega: f32, waveSigma: f32,
+            twistMax: f32, amp: f32, warpFreq: f32) -> vec2f {
+  let env = travelingEnvelope(g, t, waveDir, waveK, waveOmega, waveSigma) * amp;
+  let f = curlFBM(vec2f(g.x * warpFreq + t * 0.05, g.y * warpFreq - t * 0.04));
+  let wf2 = warpFreq * 1.833333;
+  let f2 = curlFBM(vec2f(g.x * wf2 - t * 0.03, g.y * wf2 + t * 0.035));
+  let k = twistMax * env;
+  return g + (f + f2 * 0.5) * k;
+}
+
+// The local cursor swirl — the finger twists the cells around it (re-aimed cursorBulge).
+fn cursorSwirl(g: vec2f, cursor: vec2f, strength: f32, radius: f32) -> vec2f {
+  let to = g - cursor;
+  let d2 = dot(to, to);
+  let r = max(radius, 1e-4);
+  let theta = strength * exp(-d2 / (2.0 * r * r));
+  let ct = cos(theta);
+  let st = sin(theta);
+  return cursor + vec2f(ct * to.x - st * to.y, st * to.x + ct * to.y);
+}
+
+// The LOW-octave value-noise topography — the scalar field concentric extracts contours of.
+fn heightField(p: vec2f, octavesF: f32, seed: f32) -> f32 {
+  var v = 0.0;
+  var amp = 0.5;
+  var freq = 1.0;
+  var px = p.x + seed;
+  var py = p.y - seed;
+  let n = i32(clamp(octavesF, 1.0, 6.0));
+  for (var i = 0; i < 6; i = i + 1) {
+    if (i >= n) { break; }
+    v = v + amp * valueNoise(px * freq, py * freq);
+    let rx = 0.8 * px - 0.6 * py;
+    let ry = 0.6 * px + 0.8 * py;
+    px = rx;
+    py = ry;
+    freq = freq * 2.0;
+    amp = amp * 0.5;
+  }
+  return v;
+}
+
+// The ω=√(g·k) breathing swell — basins inflate/deflate with weight.
+fn waveSwell(t: f32, phase: f32) -> f32 {
+  return sin(t * 0.35 + phase) * 0.5 + sin(t * 0.21 + phase * 1.7) * 0.5;
+}
+
+
+// ── §1 The crisp line: Ben Golus derivative-AA grid coverage (transcribes gridCoverage) ──
+// targetWidth is the line half-width in GRID UNITS (lineWidthPx / minorPitchPx); uvDeriv is
+// the per-axis screen-space derivative of g (length(vec2(dpdx, dpdy)) per axis). Returns
+// line coverage [0..1] — exactly N device-pixels wide at ANY DPR/zoom (the blur-kill).
+fn gridCoverage(g: vec2f, targetWidth: f32, uvDeriv: vec2f) -> f32 {
+  // triangle wave per axis: 0 at a line, 1 at the cell center.
+  let gridUV = 1.0 - abs(fract(g) * 2.0 - 1.0);
+  let drawWidth = clamp(vec2f(targetWidth), uvDeriv, vec2f(0.5));
+  let lineAA = uvDeriv * 1.5;
+  // smoothstep with edge0 > edge1 (Golus) → a falling edge.
+  var grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
+  // preserve thin-line intensity where the line is sub-drawWidth.
+  grid2 = grid2 * clamp(vec2f(targetWidth) / max(drawWidth, vec2f(1e-6)), vec2f(0.0), vec2f(1.0));
+  // Moiré suppression: fade toward the average where the cell packs tighter than a pixel.
+  grid2 = mix(grid2, vec2f(targetWidth), clamp(uvDeriv * 2.0 - 1.0, vec2f(0.0), vec2f(1.0)));
+  return max(grid2.x, grid2.y);
+}
+
+// ── The 3-stop warm-divergent FACE ramp (FOLD B — height-keyed, NOT a 2-point mid-park) ──
+// trough (faceLo) → mid (faceMid) → crest (faceHi), keyed on rampT = mix(shade, h). All stops
+// are warm hue ∈ [20,90] (the teal-navy purge clear by construction). Linear-space stops; the
+// fs_main routes the result through the production OETF (FOLD E).
+fn faceRamp(rampT: f32) -> vec3f {
+  let s = clamp(rampT, 0.0, 1.0);
+  if (s < 0.5) {
+    return mix(u.faceLo.rgb, u.faceMid.rgb, s * 2.0);
+  }
+  return mix(u.faceMid.rgb, u.faceHi.rgb, (s - 0.5) * 2.0);
+}
+
+// Full-screen-triangle (the pilot idiom): NDC corners (-1,-1),(3,-1),(-1,3) cover the
+// viewport from a single 3-vertex draw — no vertex buffer.
+struct VSOut {
+  @builtin(position) pos: vec4f,
+  @location(0) uv: vec2f,  // domain [-1,1]², aspect-corrected x
+};
+
+@vertex
+fn vs_main(@builtin(vertex_index) vi: u32) -> VSOut {
+  var corners = array<vec2f, 3>(
+    vec2f(-1.0, -1.0), vec2f(3.0, -1.0), vec2f(-1.0, 3.0),
+  );
+  let c = corners[vi];
+  var out: VSOut;
+  out.pos = vec4f(c, 0.0, 1.0);
+  out.uv = vec2f(c.x, c.y);
+  return out;
+}
+
+@fragment
+fn fs_main(in: VSOut) -> @location(0) vec4f {
+  let aspect = max(u.warp2.y, 1e-4);
+  // aspect-correct the domain x so the cells read square.
+  let uv = vec2f(in.uv.x * aspect, in.uv.y);
+  let t = u.u0.x;
+  let gridScale = u.u0.y;
+
+  // §5 the per-pixel kernel: AFFINE sheet-warp + cursor-swirl the grid coordinate, then two-tier
+  // Golus. waveFlow is the SMOOTH continuous domain transform (the SAME warp concentric reads) —
+  // a low-order curl-flow displacement gated by the traveling wave, locally affine at the cell
+  // scale, so the sheet bows/shears as ONE coherent transform (major lines a single smooth curve,
+  // no per-cell seam); cursorSwirl twists the cells about the finger. The Golus dv reads the FINAL
+  // warped coord (the crisp-line fence survives).
+  let g0 = uv * gridScale;
+  // BG.W-GRID-AFFINE — g0 is CELL-scale, so pass the tiny 0.03 curl-sampling frequency (== the JS
+  // LIQUID_GRID_WARP_FREQ) so the warp is locally affine at the cell scale (major lines bow as ONE
+  // smooth curve, no sub-cell crackle). Concentric passes 0.6 (its p is unit-scale).
+  var g = waveFlow(g0, t, u.wave.xy, u.wave.z, u.wave.w, u.wave2.x, u.wave2.y, u.wave2.w, 0.03);
+  if (u.cursor2.y > 0.5) {
+    // bulgeMode (cursor2.x: +repel / −attract) signs the swirl direction.
+    g = cursorSwirl(g, u.cursor.xy, u.cursor.z * u.cursor2.x, u.cursor.w);
+  }
+
+  // The screen-space derivative of g (Golus): length(vec2(dpdx, dpdy)) per axis. fwidth-class
+  // derivative reads the ACTUAL backing-store pixel (NOT fwidthFine — Compatibility-Mode safe).
+  let dv = vec2f(
+    length(vec2f(dpdx(g.x), dpdy(g.x))),
+    length(vec2f(dpdx(g.y), dpdy(g.y))),
+  );
+
+  let minor = gridCoverage(g, u.grid.x, dv);
+  // The major tier evals at g / majorEvery with its own derivative scaling.
+  let me = max(u.u0.w, 1.0);
+  let major = gridCoverage(g / me, u.grid.y, dv / me);
+  let line = max(minor * u.grid.z, major * u.grid.w);
+
+  // ── The FACE (BD.W-PAPERGRID-FACE) — height-lit filled cell interior ──────────────────
+  // Sample height/relief at the WARPED-space cell center (floor(g)+0.5, the cell the fragment
+  // lands in under the affine warp); Lambert the ∇H slope against the fixed cel key-light; squash
+  // the inset so the crest face inflates; multi-stop warm-divergent ramp keyed on mix(shade, h)
+  // (FOLD B); the ink through the production OETF (FOLD E).
+  let cc    = floor(g) + vec2f(0.5);
+  let h     = cellHeight(cc, t, u.wave.xy, u.wave.z, u.wave.w, u.wave2.x, u.wave2.w);
+  let grad  = faceRelief(cc, 1.0, t, u.wave.xy, u.wave.z, u.wave.w, u.wave2.x, u.wave2.w);
+  let n     = normalize(vec3f(-grad * u.face.y, 1.0));
+  let shade = clamp(0.5 + dot(n, normalize(vec3f(u.warp2.zw, 1.0))) * 0.5, 0.0, 1.0);
+  let inset = u.face.w * (1.0 - u.face.z * h);            // squash & stretch
+  let face  = facePlateau(g, inset, dv);
+  let rampT = clamp(shade * 0.5 + h * 0.5, 0.0, 1.0);     // FOLD B — height-keyed crest
+  let faceInk = clamp(linearToSrgb(faceRamp(rampT)), vec3f(0.0), vec3f(1.0));
+  let faceA = face * u.face.x * u.field.x;                // FOLD D — one field-blend scalar
+
+  let col = clamp(linearToSrgb(u.line.rgb), vec3f(0.0), vec3f(1.0));
+  let hasBg = u.field.y;
+  if (hasBg > 0.5) {
+    // opaque ground: the face fills the cell, the ink over the themed bg, the line on top.
+    let bg = clamp(linearToSrgb(u.bg.rgb), vec3f(0.0), vec3f(1.0));
+    let base = mix(bg, faceInk, faceA);
+    let a = line * u.field.x;
+    let outRgb = mix(base, col, a);
+    return vec4f(outRgb, 1.0);
+  }
+  // transparent ground: the FACE composites UNDER the line, the SOURCE-OVER operator in
+  // PREMULTIPLIED space (the page reads through the gutters). faceAlpha:0 → faceA=0 → the face
+  // term vanishes → vec4f(col·line, line) = byte-identical to the HEAD line-only render.
+  let linePremult = (col * line) * u.field.x;            // line layer (the FieldAlpha global subtlety)
+  let lineA = line * u.field.x;
+  let facePremult = faceInk * faceA;                     // face layer premultiplied (faceA folds field.x)
+  let outPremult = linePremult + facePremult * (1.0 - lineA);
+  let a = lineA + faceA * (1.0 - lineA);
+  return vec4f(outPremult, a);                           // premultiplied over transparent
+}
+`, V = {
+	u0: 0,
+	face: 4,
+	warp2: 8,
+	grid: 12,
+	field: 16,
+	cursor: 20,
+	cursor2: 24,
+	line: 28,
+	bg: 32,
+	wave: 36,
+	wave2: 40,
+	faceLo: 44,
+	faceMid: 48,
+	faceHi: 52
+};
+function H() {
+	let e = /* @__PURE__ */ new ArrayBuffer(224);
+	return {
+		buffer: e,
+		f32: new Float32Array(e)
+	};
+}
+function U(e, t, n, r, i, a, o) {
+	let { f32: c } = e, l = z(i, t.cellSize);
+	c[V.u0 + 0] = n, c[V.u0 + 1] = l, c[V.u0 + 2] = t.cellSize, c[V.u0 + 3] = t.majorEvery, c[V.face + 0] = t.faceAlpha, c[V.face + 1] = t.faceRelief, c[V.face + 2] = t.squashK, c[V.face + 3] = t.baseInset, c[V.warp2 + 0] = 0, c[V.warp2 + 1] = r, c[V.warp2 + 2] = t.lightDir[0], c[V.warp2 + 3] = t.lightDir[1];
+	let u = Math.max(t.cellSize, 1), d = t.lineWidth / u, f = t.lineWidth * 1.6 / u;
+	c[V.grid + 0] = d, c[V.grid + 1] = f, c[V.grid + 2] = t.minorAlpha, c[V.grid + 3] = t.majorAlpha;
+	let p = t.background === "transparent" ? 0 : 1;
+	c[V.field + 0] = t.fieldAlpha, c[V.field + 1] = p, c[V.field + 2] = 0, c[V.field + 3] = 0, c[V.cursor + 0] = a.x, c[V.cursor + 1] = a.y, c[V.cursor + 2] = t.bulgeStrength, c[V.cursor + 3] = t.bulgeRadius, c[V.cursor2 + 0] = t.bulgeMode === "attract" ? -1 : 1, c[V.cursor2 + 1] = +!!t.interactive, c[V.cursor2 + 2] = 0, c[V.cursor2 + 3] = 0;
+	let m = s(t.lineColor);
+	if (c[V.line + 0] = m[0], c[V.line + 1] = m[1], c[V.line + 2] = m[2], c[V.line + 3] = 0, t.background === "transparent") c[V.bg + 0] = 0, c[V.bg + 1] = 0, c[V.bg + 2] = 0, c[V.bg + 3] = 0;
+	else {
+		let e = s(t.background);
+		c[V.bg + 0] = e[0], c[V.bg + 1] = e[1], c[V.bg + 2] = e[2], c[V.bg + 3] = 0;
+	}
+	c[V.wave + 0] = t.waveDir[0], c[V.wave + 1] = t.waveDir[1], c[V.wave + 2] = t.waveK, c[V.wave + 3] = t.waveOmega, c[V.wave2 + 0] = t.waveSigma, c[V.wave2 + 1] = t.twistMax, c[V.wave2 + 2] = 0, c[V.wave2 + 3] = o;
+	let h = s(t.faceWarmLo), g = s(t.faceWarmMid), _ = s(t.faceWarmHi);
+	return c[V.faceLo + 0] = h[0], c[V.faceLo + 1] = h[1], c[V.faceLo + 2] = h[2], c[V.faceLo + 3] = 0, c[V.faceMid + 0] = g[0], c[V.faceMid + 1] = g[1], c[V.faceMid + 2] = g[2], c[V.faceMid + 3] = 0, c[V.faceHi + 0] = _[0], c[V.faceHi + 1] = _[1], c[V.faceHi + 2] = _[2], c[V.faceHi + 3] = 0, e;
+}
+//#endregion
+//#region src/components/liquid-grid/composables/liquidGridWGPUSetup.ts
+var W = 64, G = 8, K = 2;
+function ee(e) {
+	let { canvas: t, config: n, getCursor: r, getAmp: i, shouldContinue: a, onFrame: o } = e;
+	return function(e, s, c) {
+		let l = e.createShaderModule({
+			label: "[LiquidGrid] liquid-grid.wgsl",
+			code: B
+		}), u = H(), d = e.createBuffer({
+			label: "[LiquidGrid] uniforms",
+			size: u.buffer.byteLength,
+			usage: W | G
+		}), f = e.createBindGroupLayout({
+			label: "[LiquidGrid] bgl",
+			entries: [{
+				binding: 0,
+				visibility: K,
+				buffer: { type: "uniform" }
+			}]
+		}), p = e.createRenderPipeline({
+			label: "[LiquidGrid] pipeline",
+			layout: e.createPipelineLayout({ bindGroupLayouts: [f] }),
+			vertex: {
+				module: l,
+				entryPoint: "vs_main"
+			},
+			fragment: {
+				module: l,
+				entryPoint: "fs_main",
+				targets: [{
+					format: c,
+					blend: {
+						color: {
+							srcFactor: "one",
+							dstFactor: "one-minus-src-alpha",
+							operation: "add"
+						},
+						alpha: {
+							srcFactor: "one",
+							dstFactor: "one-minus-src-alpha",
+							operation: "add"
+						}
+					}
+				}]
+			},
+			primitive: { topology: "triangle-list" }
+		}), m = e.createBindGroup({
+			label: "[LiquidGrid] bg",
+			layout: f,
+			entries: [{
+				binding: 0,
+				resource: { buffer: d }
+			}]
+		});
+		function h(e) {}
+		function g(a) {
+			o?.(a), U(u, n, a, t.width / Math.max(t.height, 1), t.height || 1, r(), i()), e.queue.writeBuffer(d, 0, u.buffer);
+			let c = e.createCommandEncoder({ label: "[LiquidGrid] frame" }), l = s.getCurrentTexture().createView(), f = c.beginRenderPass({ colorAttachments: [{
+				view: l,
+				clearValue: {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				},
+				loadOp: "clear",
+				storeOp: "store"
+			}] });
+			f.setPipeline(p), f.setBindGroup(0, m), f.draw(3, 1, 0, 0), f.end(), e.queue.submit([c.finish()]);
+		}
+		return {
+			frame: g,
+			shouldContinue: a,
+			resize: h,
+			teardown: () => {
+				d.destroy();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/composables/glass/wave/waveField.glsl.ts
+var te = "\n#ifndef WAVE_FIELD_TAU\n#define WAVE_FIELD_TAU 6.283185307179586\n#endif\n\n// The traveling-wave envelope — a moving Gaussian crest band sweeping along waveDir.\nfloat travelingEnvelope(vec2 pivot, float t, vec2 waveDir, float waveK, float waveOmega, float waveSigma) {\n  float coord = dot(pivot, waveDir) * waveK - t * waveOmega;\n  float crest = fract(coord / WAVE_FIELD_TAU);\n  float z = (crest - 0.5) * 2.0;\n  return exp(-(z * z) / max(waveSigma, 1e-3));\n}\n\n// The curl-direction scalar — the smooth low-freq director the per-cell twist follows.\nfloat curlScalar(vec2 cc, float t) {\n  vec2 f = curlFBM(vec2(cc.x * 0.5 + t * 0.08, cc.y * 0.5 - t * 0.06));\n  return clamp(f.x, -1.0, 1.0);\n}\n\n// The directed-twist FLOOR (the visibility cure): keep the curl SIGN (adjacent cells lean\n// together) but floor the magnitude so a crest-band cell ALWAYS rotates decisively.\n#ifndef WAVE_FIELD_TWIST_FLOOR\n#define WAVE_FIELD_TWIST_FLOOR 0.62\n#endif\nfloat directedTwist(float s, float floorMag) {\n  float mag = max(floorMag, abs(s));\n  float sgn = tanh(s * 6.0);\n  return sgn * mag;\n}\n\n// ── The FACE leaf (the structurally-absent RE-INVENT — height-lit filled cell interior) ──\n// Defined ABOVE cellTwist: cellTwist rides cellHeight via the driver so twist + face read ONE\n// envelope.\n\n// The sheet displacement at a cell center = the EXACT traveling-wave scalar the twist rides.\nfloat cellHeight(vec2 cc, float t, vec2 waveDir, float waveK, float waveOmega, float waveSigma, float amp) {\n  return travelingEnvelope(cc, t, waveDir, waveK, waveOmega, waveSigma) * amp;\n}\n\n// The pre-twist driver (FOLD A): the cell pivot cc + the crest envelope env the twist AND the\n// face both ride. The face samples height/relief at THIS pre-twist cc (floor(twisted_g) at the\n// crest lights a NEIGHBOUR cell). cc in .xy, env in .z.\nvec3 cellDriver(vec2 g, float cellSize, float t, vec2 waveDir, float waveK, float waveOmega,\n                float waveSigma, float amp) {\n  float cs = max(cellSize, 1e-3);\n  vec2 cc = (floor(g / cs) + 0.5) * cs;\n  float env = cellHeight(cc, t, waveDir, waveK, waveOmega, waveSigma, amp);\n  return vec3(cc, env);\n}\n\n// The central-difference slope of cellHeight across a cell (eps = 0.5·cellSize) — derivative-\n// FREE (NO dFdx on the height) → Safari WebGL2-safe. Returns ∇H.\nvec2 faceRelief(vec2 cc, float cellSize, float t, vec2 waveDir, float waveK, float waveOmega,\n                float waveSigma, float amp) {\n  float eps = max(cellSize, 1e-3) * 0.5;\n  float hxp = cellHeight(cc + vec2(eps, 0.0), t, waveDir, waveK, waveOmega, waveSigma, amp);\n  float hxm = cellHeight(cc - vec2(eps, 0.0), t, waveDir, waveK, waveOmega, waveSigma, amp);\n  float hyp = cellHeight(cc + vec2(0.0, eps), t, waveDir, waveK, waveOmega, waveSigma, amp);\n  float hym = cellHeight(cc - vec2(0.0, eps), t, waveDir, waveK, waveOmega, waveSigma, amp);\n  return vec2((hxp - hxm) / (2.0 * eps), (hyp - hym) / (2.0 * eps));\n}\n\n// Soft inset-square coverage inside a (warped) cell — the filled FACE plateau. d is the distance\n// into the cell from the nearest gutter (the Golus triangle-wave); the inset retreats as it grows\n// (the squash). aa = the shader's fwidth(g) (JS passes a fixed uvDeriv).\nfloat facePlateau(vec2 g, float inset, vec2 uvDeriv) {\n  vec2 tri = 1.0 - abs(fract(g) * 2.0 - 1.0);\n  float d = min(tri.x, tri.y);\n  float aa = max(uvDeriv.x, uvDeriv.y) * 1.5;\n  return smoothstep(inset, inset + 2.0 * aa, d);\n}\n\n// The cell-local twist about each cell's own center, gated by the traveling wave + directed\n// by the curl flow. amp is the spring-eased envelope amplitude the JS host drives. FOLD C: the\n// TWIST_FLOOR is crest-gated by env so OFF-crest cells relax to flat calm paper (the traveling\n// read, not static foil).\nvec2 cellTwist(vec2 g, float cellSize, float t, vec2 waveDir, float waveK, float waveOmega,\n               float waveSigma, float twistMax, float shearMax, float amp) {\n  vec3 drv = cellDriver(g, cellSize, t, waveDir, waveK, waveOmega, waveSigma, amp);\n  vec2 cc = drv.xy;\n  float env = drv.z;\n  float floorMag = WAVE_FIELD_TWIST_FLOOR * env;   // FOLD C: crest-gated floor\n  float theta = twistMax * env * directedTwist(curlScalar(cc, t), floorMag);\n  float shear = shearMax * env * directedTwist(curlScalar(cc + vec2(17.3, 9.1), t), floorMag);\n  vec2 local = g - cc;\n  float ct = cos(theta);\n  float st = sin(theta);\n  vec2 rot = vec2(ct * local.x - st * local.y, st * local.x + ct * local.y);\n  rot.x += shear * rot.y;   // a small skew so the box MORPHS, not just rotates\n  return cc + rot;\n}\n\n// The CONTINUOUS traveling-wave FLOW warp — the SMOOTH twin of cellTwist (no per-cell seam;\n// for the level-set contours that shatter into a mesh under the cell discontinuity).\n// BG.W-GRID-AFFINE — warpFreq is the HOST-supplied curl-sampling spatial frequency (the caller's\n// own coordinate units): an order of magnitude BELOW its grid frequency so the warp is locally\n// affine (major lines bow as ONE smooth curve, no sub-cell crackle). liquid-grid (cell-scale g0)\n// passes ~0.03; concentric (unit-scale p) passes 0.6. The 1.833333 second-flow ratio transcribes\n// WAVE_FLOW_SECOND_RATIO. Amplitude unchanged — curl magnitude is the intrinsic gradient at the\n// fixed CURL_EPS, independent of warpFreq; the t-drift is host-agnostic.\nvec2 waveFlow(vec2 g, float t, vec2 waveDir, float waveK, float waveOmega, float waveSigma,\n              float twistMax, float amp, float warpFreq) {\n  float env = travelingEnvelope(g, t, waveDir, waveK, waveOmega, waveSigma) * amp;\n  vec2 f = curlFBM(vec2(g.x * warpFreq + t * 0.05, g.y * warpFreq - t * 0.04));\n  float wf2 = warpFreq * 1.833333;\n  vec2 f2 = curlFBM(vec2(g.x * wf2 - t * 0.03, g.y * wf2 + t * 0.035));\n  float k = twistMax * env;\n  return g + (f + f2 * 0.5) * k;\n}\n\n// The local cursor swirl — the finger twists the cells around it (re-aimed cursorBulge).\nvec2 cursorSwirl(vec2 g, vec2 cursor, float strength, float radius) {\n  vec2 to = g - cursor;\n  float d2 = dot(to, to);\n  float r = max(radius, 1e-4);\n  float theta = strength * exp(-d2 / (2.0 * r * r));\n  float ct = cos(theta);\n  float st = sin(theta);\n  return cursor + vec2(ct * to.x - st * to.y, st * to.x + ct * to.y);\n}\n\n// The LOW-octave value-noise topography — the scalar field concentric extracts contours of.\nfloat heightField(vec2 p, float octavesF, float seed) {\n  float v = 0.0;\n  float amp = 0.5;\n  float freq = 1.0;\n  float px = p.x + seed;\n  float py = p.y - seed;\n  int n = int(clamp(octavesF, 1.0, 6.0));\n  for (int i = 0; i < 6; i++) {\n    if (i >= n) break;\n    v += amp * valueNoise(px * freq, py * freq);\n    float rx = 0.8 * px - 0.6 * py;\n    float ry = 0.6 * px + 0.8 * py;\n    px = rx;\n    py = ry;\n    freq *= 2.0;\n    amp *= 0.5;\n  }\n  return v;\n}\n\n// The ω=√(g·k) breathing swell — basins inflate/deflate with weight.\nfloat waveSwell(float t, float phase) {\n  return sin(t * 0.35 + phase) * 0.5 + sin(t * 0.21 + phase * 1.7) * 0.5;\n}\n", ne = "#version 300 es\nprecision highp float;\nin vec2 aPosition;\nout vec2 vUv;\nvoid main() {\n  vUv = aPosition;            // [-1,1]² domain\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}", re = `#version 300 es
+precision highp float;
+
+#define TAU 6.283185307179586
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform float uTime;
+uniform float uGridScale;
+uniform float uMajorEvery;
+uniform float uAspect;
+uniform vec4  uWarp;          // (warpScale, warpSpeed, warpScale2, warpSpeed2)
+uniform float uAmplitude;
+uniform vec4  uGrid;          // (targetWidth, targetWidthMajor, minorAlpha, majorAlpha)
+uniform float uFieldAlpha;
+uniform float uHasBackground;
+uniform vec4  uCursor;        // (cursorX, cursorY, swirlStrength, swirlRadius)
+uniform float uBulgeMode;     // +1 repel / −1 attract (signs the swirl)
+uniform float uInteractive;   // 1 = cursor swirl on
+uniform vec4  uWave;          // (waveDirX, waveDirY, waveK, waveOmega)
+uniform vec4  uWave2;         // (waveSigma, twistMax, _pad, amp) — affine sheet-warp envelope
+uniform vec3  uLineColor;     // linear-sRGB ink
+uniform vec3  uBg;            // linear-sRGB themed bg
+// ── The FACE (BD.W-PAPERGRID-FACE) — the height-lit filled cell interior ──
+uniform vec4  uFace;          // (faceAlpha, faceRelief, squashK, baseInset)
+uniform vec2  uLightDir;      // the cel key-light direction
+uniform vec3  uFaceLo;        // linear-sRGB rose-umber trough (FOLD B, 3-stop)
+uniform vec3  uFaceMid;       // linear-sRGB ember-amber mid
+uniform vec3  uFaceHi;        // linear-sRGB warm-wheat crest
+
+${r}
+
+// The 3-stop warm-divergent FACE ramp (FOLD B — height-keyed, NOT a 2-point mid-park). All stops
+// warm hue ∈ [20,90]; linear-space (the OETF runs in main, FOLD E).
+vec3 faceRamp(float rampT) {
+  float s = clamp(rampT, 0.0, 1.0);
+  if (s < 0.5) {
+    return mix(uFaceLo, uFaceMid, s * 2.0);
+  }
+  return mix(uFaceMid, uFaceHi, (s - 0.5) * 2.0);
+}
+
+// The shared divergence-free 2D-curl operator (flow.glsl.ts) — the prototype declares
+// potentialFBM; the host defines its BODY below the splice (GLSL forward-declaration).
+${i}
+
+// ── The host noise basis (transcribes liquidGrid.ts hash21/valueNoise/potentialFBM) ──
+float hash21(float x, float y) {
+  float px = fract(x * 0.1031);
+  float py = fract(y * 0.1031);
+  float pz = fract(x * 0.1031);
+  float d = px * (py + 33.33) + py * (pz + 33.33) + pz * (px + 33.33);
+  px += d;
+  py += d;
+  pz += d;
+  return fract((px + py) * pz);
+}
+
+float valueNoise(float x, float y) {
+  float ix = floor(x);
+  float iy = floor(y);
+  float fx = x - ix;
+  float fy = y - iy;
+  float ux = fx * fx * fx * (fx * (fx * 6.0 - 15.0) + 10.0);
+  float uy = fy * fy * fy * (fy * (fy * 6.0 - 15.0) + 10.0);
+  float a = hash21(ix, iy);
+  float b = hash21(ix + 1.0, iy);
+  float c = hash21(ix, iy + 1.0);
+  float d2 = hash21(ix + 1.0, iy + 1.0);
+  return mix(mix(a, b, ux), mix(c, d2, ux), uy);
+}
+
+// The 3-octave scalar fbm potential — the curl chunk's forward-declared potentialFBM body.
+float potentialFBM(vec2 p) {
+  float v = 0.0;
+  float amp = 0.5;
+  float freq = 1.0;
+  float px = p.x;
+  float py = p.y;
+  for (int i = 0; i < 3; i++) {
+    v += amp * valueNoise(px * freq, py * freq);
+    // FBM_ROT mat2(0.8, 0.6, -0.6, 0.8) — same rotation as the shared chunk.
+    float rx = 0.8 * px - 0.6 * py;
+    float ry = 0.6 * px + 0.8 * py;
+    px = rx;
+    py = ry;
+    freq *= 2.0;
+    amp *= 0.5;
+  }
+  return v;
+}
+
+// The shared traveling-wave WARP chunk (waveField.glsl.ts — waveFlow/cursorSwirl/
+// travelingEnvelope + the FACE leaf; spliced AFTER valueNoise + potentialFBM bodies + the curlFBM
+// chunk). liquid-grid + concentric read the SAME waveFlow continuous affine sheet-warp (the DRY
+// coupling — a leaf tune moves both, never the retired per-cell twist / LINE-warp).
+${te}
+
+// ── §1 The Ben Golus derivative-AA grid coverage (transcribes liquidGrid.ts gridCoverage) ──
+float gridCoverage(vec2 g, float targetWidth, vec2 uvDeriv) {
+  vec2 gridUV = 1.0 - abs(fract(g) * 2.0 - 1.0);
+  vec2 drawWidth = clamp(vec2(targetWidth), uvDeriv, vec2(0.5));
+  vec2 lineAA = uvDeriv * 1.5;
+  vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
+  grid2 *= clamp(vec2(targetWidth) / max(drawWidth, vec2(1e-6)), vec2(0.0), vec2(1.0));
+  grid2 = mix(grid2, vec2(targetWidth), clamp(uvDeriv * 2.0 - 1.0, vec2(0.0), vec2(1.0)));
+  return max(grid2.x, grid2.y);
+}
+
+void main() {
+  float aspect = max(uAspect, 1e-4);
+  vec2 uv = vec2(vUv.x * aspect, vUv.y);
+
+  // §5 the per-pixel kernel: AFFINE sheet-warp + cursor-swirl the grid coordinate, then two-tier
+  // Golus. waveFlow is the SMOOTH continuous domain transform (the SAME warp concentric reads) —
+  // a low-order curl-flow displacement gated by the traveling wave, locally affine at the cell
+  // scale, so the sheet bows/shears as ONE coherent transform (major lines a single smooth curve,
+  // no per-cell seam); cursorSwirl twists the cells about the finger. The Golus dv reads the FINAL
+  // warped coord (the crisp-line fence survives).
+  vec2 g0 = uv * uGridScale;
+  // BG.W-GRID-AFFINE — g0 is CELL-scale, so pass the tiny 0.03 curl-sampling frequency (== the JS
+  // LIQUID_GRID_WARP_FREQ) so the warp is locally affine at the cell scale (major lines bow as ONE
+  // smooth curve, no sub-cell crackle). Concentric passes 0.6 (its p is unit-scale).
+  vec2 g = waveFlow(g0, uTime, uWave.xy, uWave.z, uWave.w, uWave2.x, uWave2.y, uWave2.w, 0.03);
+  if (uInteractive > 0.5) {
+    g = cursorSwirl(g, uCursor.xy, uCursor.z * uBulgeMode, uCursor.w);
+  }
+
+  // The screen-space derivative of g (Golus): length(vec2(dFdx, dFdy)) per axis (the actual
+  // backing-store pixel — NOT a CSS sub-pixel, the blur-kill).
+  vec2 dv = vec2(
+    length(vec2(dFdx(g.x), dFdy(g.x))),
+    length(vec2(dFdx(g.y), dFdy(g.y)))
+  );
+
+  float minor = gridCoverage(g, uGrid.x, dv);
+  float me = max(uMajorEvery, 1.0);
+  float major = gridCoverage(g / me, uGrid.y, dv / me);
+  float line = max(minor * uGrid.z, major * uGrid.w);
+
+  // ── The FACE (BD.W-PAPERGRID-FACE) — height-lit filled cell interior ──────────────────
+  // Sample height/relief at the WARPED-space cell center (floor(g)+0.5, the cell the fragment
+  // lands in under the affine warp); Lambert the ∇H slope against the fixed cel key-light; squash
+  // the inset so the crest face inflates; multi-stop warm-divergent ramp keyed on mix(shade, h)
+  // (FOLD B); the ink through the production OETF (FOLD E).
+  vec2  cc     = floor(g) + 0.5;
+  float h      = cellHeight(cc, uTime, uWave.xy, uWave.z, uWave.w, uWave2.x, uWave2.w);
+  vec2  grad   = faceRelief(cc, 1.0, uTime, uWave.xy, uWave.z, uWave.w, uWave2.x, uWave2.w);
+  vec3  n      = normalize(vec3(-grad * uFace.y, 1.0));
+  float shade  = clamp(0.5 + dot(n, normalize(vec3(uLightDir, 1.0))) * 0.5, 0.0, 1.0);
+  float inset  = uFace.w * (1.0 - uFace.z * h);            // squash & stretch
+  float face   = facePlateau(g, inset, dv);
+  float rampT  = clamp(shade * 0.5 + h * 0.5, 0.0, 1.0);   // FOLD B — height-keyed crest
+  vec3  faceInk = clamp(linearToSrgb(faceRamp(rampT)), vec3(0.0), vec3(1.0));
+  float faceA  = face * uFace.x * uFieldAlpha;             // FOLD D — one field-blend scalar
+
+  vec3 col = clamp(linearToSrgb(uLineColor), vec3(0.0), vec3(1.0));
+  if (uHasBackground > 0.5) {
+    vec3 bg = clamp(linearToSrgb(uBg), vec3(0.0), vec3(1.0));
+    vec3 base = mix(bg, faceInk, faceA);
+    float a = line * uFieldAlpha;
+    fragColor = vec4(mix(base, col, a), 1.0);
+    return;
+  }
+  // transparent ground: the FACE composites UNDER the line, the SOURCE-OVER operator in
+  // PREMULTIPLIED space. faceAlpha:0 → faceA=0 → the face term vanishes → vec4(col·line, line) =
+  // byte-identical to the HEAD line-only render.
+  vec3 linePremult = (col * line) * uFieldAlpha;          // line layer (the FieldAlpha subtlety)
+  float lineA = line * uFieldAlpha;
+  vec3 facePremult = faceInk * faceA;                     // face layer premultiplied (faceA folds field)
+  vec3 outPremult = linePremult + facePremult * (1.0 - lineA);
+  float a = lineA + faceA * (1.0 - lineA);
+  fragColor = vec4(outPremult, a);  // premultiplied over transparent
+}`;
+//#endregion
+//#region src/components/liquid-grid/composables/liquidGridGLSetup.ts
+function q(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);
+		throw e.deleteShader(r), Error(`[LiquidGrid] shader compile failed: ${t}`);
+	}
+	return r;
+}
+function ie(e) {
+	let { canvas: t, config: n, getCursor: r, getAmp: i, shouldContinue: a, onFrame: o } = e;
+	return function(e) {
+		let c = q(e, e.VERTEX_SHADER, ne), l = q(e, e.FRAGMENT_SHADER, re), u = e.createProgram();
+		if (e.attachShader(u, c), e.attachShader(u, l), e.linkProgram(u), !e.getProgramParameter(u, e.LINK_STATUS)) throw Error(`[LiquidGrid] link failed: ${e.getProgramInfoLog(u)}`);
+		e.deleteShader(c), e.deleteShader(l);
+		let d = e.createVertexArray();
+		e.bindVertexArray(d);
+		let f = e.createBuffer();
+		e.bindBuffer(e.ARRAY_BUFFER, f), e.bufferData(e.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			3,
+			-1,
+			-1,
+			3
+		]), e.STATIC_DRAW);
+		let p = e.getAttribLocation(u, "aPosition");
+		e.enableVertexAttribArray(p), e.vertexAttribPointer(p, 2, e.FLOAT, !1, 0, 0), e.bindVertexArray(null);
+		let m = (t) => e.getUniformLocation(u, t), h = m("uTime"), g = m("uGridScale"), _ = m("uMajorEvery"), v = m("uAspect"), y = m("uGrid"), b = m("uFieldAlpha"), x = m("uHasBackground"), S = m("uCursor"), C = m("uBulgeMode"), w = m("uInteractive"), T = m("uWave"), E = m("uWave2"), D = m("uLineColor"), O = m("uBg"), k = m("uFace"), A = m("uLightDir"), j = m("uFaceLo"), M = m("uFaceMid"), N = m("uFaceHi");
+		function P(n) {
+			e.viewport(0, 0, n?.w ?? t.width, n?.h ?? t.height);
+		}
+		function F(a) {
+			o?.(a);
+			let c = t.width / Math.max(t.height, 1), l = z(t.height || 1, n.cellSize);
+			e.useProgram(u), e.bindVertexArray(d), 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), e.uniform1f(h, a), e.uniform1f(g, l), e.uniform1f(_, n.majorEvery), e.uniform1f(v, c), e.uniform4f(T, n.waveDir[0], n.waveDir[1], n.waveK, n.waveOmega), e.uniform4f(E, n.waveSigma, n.twistMax, 0, i()), e.uniform1f(w, +!!n.interactive);
+			let f = Math.max(n.cellSize, 1), p = n.lineWidth / f, m = n.lineWidth * 1.6 / f;
+			e.uniform4f(y, p, m, n.minorAlpha, n.majorAlpha), e.uniform1f(b, n.fieldAlpha);
+			let P = r();
+			e.uniform4f(S, P.x, P.y, n.bulgeStrength, n.bulgeRadius), e.uniform1f(C, n.bulgeMode === "attract" ? -1 : 1);
+			let F = s(n.lineColor);
+			e.uniform3f(D, F[0], F[1], F[2]), e.uniform4f(k, n.faceAlpha, n.faceRelief, n.squashK, n.baseInset), e.uniform2f(A, n.lightDir[0], n.lightDir[1]);
+			let I = s(n.faceWarmLo), L = s(n.faceWarmMid), R = s(n.faceWarmHi);
+			if (e.uniform3f(j, I[0], I[1], I[2]), e.uniform3f(M, L[0], L[1], L[2]), e.uniform3f(N, R[0], R[1], R[2]), n.background === "transparent") e.uniform1f(x, 0), e.uniform3f(O, 0, 0, 0);
+			else {
+				e.uniform1f(x, 1);
+				let t = s(n.background);
+				e.uniform3f(O, t[0], t[1], t[2]);
+			}
+			e.drawArrays(e.TRIANGLES, 0, 3), e.bindVertexArray(null);
+		}
+		return {
+			frame: F,
+			shouldContinue: a,
+			resize: P,
+			teardown: () => {
+				e.deleteProgram(u), e.deleteVertexArray(d), e.deleteBuffer(f);
+			}
+		};
+	};
+}
+//#endregion
+//#region src/components/liquid-grid/composables/useLiquidGrid.ts
+function J(e, n) {
+	let { config: r } = n, i = n.mode ?? "live", s = t({ respectReducedMotion: r.respectReducedMotion }), c = {
+		x: 1e6,
+		y: 1e6
+	}, l = () => c, u = 0, d = () => u, f = 0, p = null;
+	function m(t) {
+		let n = f > 0 ? (t - f) * 1e3 : 16.7;
+		if (f = t, s.tick(n), p?.reducedMotion ? u = 0 : (u += (1.06 - u) * .04, u > 1 && (u = 1 + (u - 1) * .85)), !r.interactive || !s.active.value) {
+			c = {
+				x: 1e6,
+				y: 1e6
+			};
+			return;
+		}
+		let i = e.value, a = (i?.width || 1) / Math.max(i?.height || 1, 1), o = z(i?.height || 320, r.cellSize), l = s.smoothedPosition.value, d = s.velocity.value, m = s.burst.value, h = (l.x * 2 - 1) * a, g = -(l.y * 2 - 1), _ = .12 + Math.min(.4, m);
+		c = {
+			x: (h + d.x * _) * o,
+			y: (g - d.y * _) * o
+		};
+	}
+	let g = () => {
+		s.onPointerEnter(), r.interactive && p?.wake();
+	}, _ = (e) => {
+		s.onPointerMove(e), r.interactive && p?.wake();
+	}, v = (e) => e.parentElement ?? e;
+	function y(e) {
+		let t = v(e);
+		t.addEventListener("pointermove", _), t.addEventListener("pointerenter", g), t.addEventListener("pointerleave", s.onPointerLeave);
+	}
+	function b(e) {
+		let t = v(e);
+		t.removeEventListener("pointermove", _), t.removeEventListener("pointerenter", g), t.removeEventListener("pointerleave", s.onPointerLeave);
+	}
+	let x = () => {
+		let t = e.value;
+		return t ? (p || (y(t), p = o(t, {
+			mode: i,
+			respectReducedMotion: r.respectReducedMotion,
+			dprPolicy: a,
+			revealBloom: !0,
+			setupWGPU: ee({
+				canvas: t,
+				config: r,
+				getCursor: l,
+				getAmp: d,
+				shouldContinue: () => !0,
+				onFrame: m
+			}),
+			setupGL: ie({
+				canvas: t,
+				config: r,
+				getCursor: l,
+				getAmp: d,
+				shouldContinue: () => !0,
+				onFrame: m
+			})
+		}), p.armAsync()), p) : null;
+	};
+	queueMicrotask(() => x());
+	let S = {
+		get backend() {
+			return x()?.backend ?? "webgpu";
+		},
+		pause: () => x()?.suspend("manual"),
+		resume: () => x()?.resume("manual"),
+		wake: () => x()?.wake(),
+		renderAt: (e) => x()?.renderAt(e),
+		get reducedMotion() {
+			return p?.reducedMotion ?? !1;
+		},
+		dispose: () => {
+			let t = e.value;
+			t && b(t), s.dispose(), p?.dispose();
+		}
+	};
+	return h(() => S.dispose()), S;
+}
+//#endregion
+//#region src/components/liquid-grid/constants.ts
+var ae = 16, Y = {
+	L: .62,
+	C: .05,
+	h: 62
+}, X = {
+	L: .44,
+	C: .07,
+	h: 32
+}, Z = {
+	L: .66,
+	C: .12,
+	h: 58
+}, Q = {
+	L: .9,
+	C: .1,
+	h: 84
+}, $ = {
+	cellSize: 64,
+	majorEvery: 5,
+	minorAlpha: .12,
+	majorAlpha: .22,
+	lineWidth: 1,
+	twistMax: .62,
+	waveDir: [.92, .39],
+	waveK: .62,
+	waveOmega: 1.05,
+	waveSigma: .42,
+	fieldAlpha: 1,
+	bulgeStrength: .9,
+	bulgeRadius: 2.5,
+	bulgeMode: "repel",
+	lineColor: Y,
+	faceAlpha: 0,
+	faceRelief: 2.6,
+	squashK: .42,
+	baseInset: .14,
+	faceWarmLo: X,
+	faceWarmMid: Z,
+	faceWarmHi: Q,
+	lightDir: [.6, .8],
+	background: "transparent",
+	interactive: !0,
+	respectReducedMotion: !0
+}, oe = /* @__PURE__ */ e(/* @__PURE__ */ f({
+	__name: "LiquidGrid",
+	props: {
+		config: { default: () => $ },
+		paused: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:paused"],
+	setup(e, { expose: t }) {
+		let n = v("wrapperRef"), r = v("canvasRef"), i = _({ ...e.config });
+		y(() => e.config, (e) => Object.assign(i, e), { deep: !0 }), m(() => {
+			if (e.config.lineColor === $.lineColor) {
+				let e = n.value;
+				if (e) {
+					let t = getComputedStyle(e).getPropertyValue("--foreground").trim();
+					if (t) try {
+						i.lineColor = c(t);
+					} catch {}
+				}
+			}
+		});
+		let a = J(r, { config: i });
+		y(() => e.paused, (e) => e ? a.pause() : a.resume(), { immediate: !0 });
+		let o = l(() => {
+			let t = e.config.background;
+			if (t !== "transparent") return `oklch(${t.L} ${t.C} ${t.h})`;
+		});
+		return t({
+			pause: a.pause,
+			resume: a.resume,
+			wake: a.wake,
+			renderAt: a.renderAt
+		}), (e, t) => (g(), u("div", {
+			ref_key: "wrapperRef",
+			ref: n,
+			class: "liquid-grid-wrapper",
+			style: p(o.value ? { background: o.value } : void 0)
+		}, [d("canvas", {
+			ref_key: "canvasRef",
+			ref: r,
+			class: "liquid-grid-canvas",
+			"aria-hidden": "true",
+			"data-testid": "liquid-grid-canvas"
+		}, null, 512)], 4));
+	}
+}), [["__scopeId", "data-v-fc828b9e"]]);
+//#endregion
+export { O as CURL_EPS, $ as DEFAULT_LIQUID_GRID_CONFIG, Q as FACE_WARM_HI, X as FACE_WARM_LO, Z as FACE_WARM_MID, ae as LIQUID_GRID_MAX_MAJOR_EVERY, oe as LiquidGrid, Y as WARM_IDENTITY_INK, P as curlFBM, L as gridCoverage, z as gridScaleFor, N as potentialFBM, R as sampleLiquidGrid, J as useLiquidGrid };