@mkbabb/glass-ui 4.0.1 → 4.2.0

package/dist/paper-grid.js

@@ -0,0 +1,761 @@
+import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
+import { t } from "./usePointerVelocityField-BrkqZFhj.js";
+import { n, o as r } from "./procedural-color.wgsl-C1Y5PkM6.js";
+import { t as i } from "./flow.glsl-DqEGRpl4.js";
+import { a, t as o } from "./useGpuSubstrate-Ceet70xq.js";
+import { c as s, t as c } from "./color-B9jZdhJX.js";
+import { a as l, d as u, f as d, i as f, n as p, o as m, p as h, r as g, t as _ } from "./paperGrid-CXCSMbZ1.js";
+import { computed as v, createElementBlock as y, createElementVNode as b, defineComponent as x, normalizeStyle as S, onMounted as C, onScopeDispose as w, openBlock as T, reactive as E, useTemplateRef as D, watch as O } from "vue";
+//#region src/components/custom/paper-grid/shaders/paper-grid.wgsl.ts
+var k = `
+const TAU: f32 = 6.283185307179586;
+
+// ── Paper-grid uniforms (the typed-struct source-of-truth — see uniformBridgeWGPU.ts) ──
+struct PaperGridUniforms {
+  // 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, shearMax, amp) — the cell-twist 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: PaperGridUniforms;
+
+${n}
+
+// ── The host noise basis (transcribes paperGrid.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).
+${h}
+
+// The shared traveling-wave CELL-WARP chunk (waveField.wgsl.ts — cellTwist/cursorSwirl/
+// travelingEnvelope; splices AFTER valueNoise + curlFBM are declared). paper-grid + concentric
+// share this EXACTLY — the cell-local twist replaces the retired LINE-warp (the C3 cure: the
+// boxes twist about their own center, the lines stay locally straight).
+${d}
+
+// ── §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: CELL-TWIST + cursor-swirl the grid coordinate, then two-tier Golus.
+  // cellTwist rotates each cell about its OWN center (the boxes twist, the lines stay locally
+  // straight — the C3 cure) gated by a traveling Gaussian crest; cursorSwirl twists the cells
+  // about the finger. The Golus dv reads the FINAL twisted coord (the crisp-line fence survives).
+  let g0 = uv * gridScale;
+  // FOLD A — the PRE-twist driver: the face samples height/relief at THIS cc (floor(twisted_g)
+  // at the crest lights a NEIGHBOUR cell). cellTwist rides the SAME driver, so twist + face fuse.
+  let drv = cellDriver(g0, 1.0, t, u.wave.xy, u.wave.z, u.wave.w, u.wave2.x, u.wave2.w);
+  let cc = drv.xy;
+  var g = cellTwist(g0, 1.0, t, u.wave.xy, u.wave.z, u.wave.w, u.wave2.x, u.wave2.y, u.wave2.z, u.wave2.w);
+  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 pre-twist driver cc (FOLD A); 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 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
+}
+`, A = {
+	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 j() {
+	let e = /* @__PURE__ */ new ArrayBuffer(224);
+	return {
+		buffer: e,
+		f32: new Float32Array(e)
+	};
+}
+function M(e, t, n, r, i, a, o) {
+	let { f32: c } = e, l = f(i, t.cellSize);
+	c[A.u0 + 0] = n, c[A.u0 + 1] = l, c[A.u0 + 2] = t.cellSize, c[A.u0 + 3] = t.majorEvery, c[A.face + 0] = t.faceAlpha, c[A.face + 1] = t.faceRelief, c[A.face + 2] = t.squashK, c[A.face + 3] = t.baseInset, c[A.warp2 + 0] = 0, c[A.warp2 + 1] = r, c[A.warp2 + 2] = t.lightDir[0], c[A.warp2 + 3] = t.lightDir[1];
+	let u = Math.max(t.cellSize, 1), d = t.lineWidth / u, p = t.lineWidth * 1.6 / u;
+	c[A.grid + 0] = d, c[A.grid + 1] = p, c[A.grid + 2] = t.minorAlpha, c[A.grid + 3] = t.majorAlpha;
+	let m = t.background === "transparent" ? 0 : 1;
+	c[A.field + 0] = t.fieldAlpha, c[A.field + 1] = m, c[A.field + 2] = 0, c[A.field + 3] = 0, c[A.cursor + 0] = a.x, c[A.cursor + 1] = a.y, c[A.cursor + 2] = t.bulgeStrength, c[A.cursor + 3] = t.bulgeRadius, c[A.cursor2 + 0] = t.bulgeMode === "attract" ? -1 : 1, c[A.cursor2 + 1] = +!!t.interactive, c[A.cursor2 + 2] = 0, c[A.cursor2 + 3] = 0;
+	let h = s(t.lineColor);
+	if (c[A.line + 0] = h[0], c[A.line + 1] = h[1], c[A.line + 2] = h[2], c[A.line + 3] = 0, t.background === "transparent") c[A.bg + 0] = 0, c[A.bg + 1] = 0, c[A.bg + 2] = 0, c[A.bg + 3] = 0;
+	else {
+		let e = s(t.background);
+		c[A.bg + 0] = e[0], c[A.bg + 1] = e[1], c[A.bg + 2] = e[2], c[A.bg + 3] = 0;
+	}
+	c[A.wave + 0] = t.waveDir[0], c[A.wave + 1] = t.waveDir[1], c[A.wave + 2] = t.waveK, c[A.wave + 3] = t.waveOmega, c[A.wave2 + 0] = t.waveSigma, c[A.wave2 + 1] = t.twistMax, c[A.wave2 + 2] = t.shearMax, c[A.wave2 + 3] = o;
+	let g = s(t.faceWarmLo), _ = s(t.faceWarmMid), v = s(t.faceWarmHi);
+	return c[A.faceLo + 0] = g[0], c[A.faceLo + 1] = g[1], c[A.faceLo + 2] = g[2], c[A.faceLo + 3] = 0, c[A.faceMid + 0] = _[0], c[A.faceMid + 1] = _[1], c[A.faceMid + 2] = _[2], c[A.faceMid + 3] = 0, c[A.faceHi + 0] = v[0], c[A.faceHi + 1] = v[1], c[A.faceHi + 2] = v[2], c[A.faceHi + 3] = 0, e;
+}
+//#endregion
+//#region src/components/custom/paper-grid/composables/paperGridWGPUSetup.ts
+var N = 64, P = 8, F = 2;
+function I(e) {
+	let { canvas: t, config: n, getCursor: r, getAmp: i, shouldContinue: o, onFrame: s } = e;
+	return function(e, c, l) {
+		let u = e.createShaderModule({
+			label: "[PaperGrid] paper-grid.wgsl",
+			code: k
+		}), d = j(), f = e.createBuffer({
+			label: "[PaperGrid] uniforms",
+			size: d.buffer.byteLength,
+			usage: N | P
+		}), p = e.createBindGroupLayout({
+			label: "[PaperGrid] bgl",
+			entries: [{
+				binding: 0,
+				visibility: F,
+				buffer: { type: "uniform" }
+			}]
+		}), m = e.createRenderPipeline({
+			label: "[PaperGrid] pipeline",
+			layout: e.createPipelineLayout({ bindGroupLayouts: [p] }),
+			vertex: {
+				module: u,
+				entryPoint: "vs_main"
+			},
+			fragment: {
+				module: u,
+				entryPoint: "fs_main",
+				targets: [{
+					format: l,
+					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" }
+		}), h = e.createBindGroup({
+			label: "[PaperGrid] bg",
+			layout: p,
+			entries: [{
+				binding: 0,
+				resource: { buffer: f }
+			}]
+		});
+		function g() {
+			let e = a(), n = t.clientWidth || 320, r = t.clientHeight || 320, i = Math.max(1, Math.round(n * e)), o = Math.max(1, Math.round(r * e));
+			(t.width !== i || t.height !== o) && (t.width = i, t.height = o);
+		}
+		function _(o) {
+			s?.(o);
+			let l = t.clientWidth || 320, u = t.clientHeight || 320;
+			M(d, n, o, l / Math.max(u, 1), t.height || Math.round(u * a()), r(), i()), e.queue.writeBuffer(f, 0, d.buffer);
+			let p = e.createCommandEncoder({ label: "[PaperGrid] frame" }), g = c.getCurrentTexture().createView(), _ = p.beginRenderPass({ colorAttachments: [{
+				view: g,
+				clearValue: {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				},
+				loadOp: "clear",
+				storeOp: "store"
+			}] });
+			_.setPipeline(m), _.setBindGroup(0, h), _.draw(3, 1, 0, 0), _.end(), e.queue.submit([p.finish()]);
+		}
+		return {
+			frame: _,
+			shouldContinue: o,
+			resize: g,
+			teardown: () => {
+				f.destroy();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/components/custom/paper-grid/shaders/paper-grid.glsl.ts
+var L = "#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}", R = `#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, shearMax, amp)
+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 paperGrid.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 CELL-WARP chunk (waveField.glsl.ts — cellTwist/cursorSwirl/
+// travelingEnvelope; spliced AFTER valueNoise + potentialFBM bodies + the curlFBM chunk).
+// paper-grid + concentric share this EXACTLY (the C3 cure: the boxes twist about their own
+// center, the lines stay locally straight — never the retired LINE-warp).
+${u}
+
+// ── §1 The Ben Golus derivative-AA grid coverage (transcribes paperGrid.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: CELL-TWIST + cursor-swirl the grid coordinate, then two-tier Golus.
+  // cellTwist rotates each cell about its OWN center (the boxes twist, the lines stay locally
+  // straight — the C3 cure) gated by a traveling Gaussian crest; cursorSwirl twists the cells
+  // about the finger. The Golus dv reads the FINAL twisted coord (the crisp-line fence survives).
+  vec2 g0 = uv * uGridScale;
+  // FOLD A — the PRE-twist driver: the face samples height/relief at THIS cc (floor(twisted_g)
+  // at the crest lights a NEIGHBOUR cell). cellTwist rides the SAME driver, so twist + face fuse.
+  vec3 drv = cellDriver(g0, 1.0, uTime, uWave.xy, uWave.z, uWave.w, uWave2.x, uWave2.w);
+  vec2 cc = drv.xy;
+  vec2 g = cellTwist(g0, 1.0, uTime, uWave.xy, uWave.z, uWave.w, uWave2.x, uWave2.y, uWave2.z, uWave2.w);
+  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 pre-twist driver cc (FOLD A); 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).
+  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/custom/paper-grid/composables/paperGridGLSetup.ts
+function z(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(`[PaperGrid] shader compile failed: ${t}`);
+	}
+	return r;
+}
+function B(e) {
+	let { canvas: t, config: n, getCursor: r, getAmp: i, shouldContinue: o, onFrame: c } = e;
+	return function(e) {
+		let l = z(e, e.VERTEX_SHADER, L), u = z(e, e.FRAGMENT_SHADER, R), d = e.createProgram();
+		if (e.attachShader(d, l), e.attachShader(d, u), e.linkProgram(d), !e.getProgramParameter(d, e.LINK_STATUS)) throw Error(`[PaperGrid] link failed: ${e.getProgramInfoLog(d)}`);
+		e.deleteShader(l), e.deleteShader(u);
+		let p = e.createVertexArray();
+		e.bindVertexArray(p);
+		let m = e.createBuffer();
+		e.bindBuffer(e.ARRAY_BUFFER, m), e.bufferData(e.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			3,
+			-1,
+			-1,
+			3
+		]), e.STATIC_DRAW);
+		let h = e.getAttribLocation(d, "aPosition");
+		e.enableVertexAttribArray(h), e.vertexAttribPointer(h, 2, e.FLOAT, !1, 0, 0), e.bindVertexArray(null);
+		let g = (t) => e.getUniformLocation(d, t), _ = g("uTime"), v = g("uGridScale"), y = g("uMajorEvery"), b = g("uAspect"), x = g("uGrid"), S = g("uFieldAlpha"), C = g("uHasBackground"), w = g("uCursor"), T = g("uBulgeMode"), E = g("uInteractive"), D = g("uWave"), O = g("uWave2"), k = g("uLineColor"), A = g("uBg"), j = g("uFace"), M = g("uLightDir"), N = g("uFaceLo"), P = g("uFaceMid"), F = g("uFaceHi");
+		function I() {
+			let n = a(), r = t.clientWidth || 320, i = t.clientHeight || 320, o = Math.max(1, Math.round(r * n)), s = Math.max(1, Math.round(i * n));
+			(t.width !== o || t.height !== s) && (t.width = o, t.height = s), e.viewport(0, 0, t.width, t.height);
+		}
+		function B(o) {
+			c?.(o);
+			let l = t.clientWidth || 320, u = t.clientHeight || 320, m = l / Math.max(u, 1), h = f(t.height || Math.round(u * a()), n.cellSize);
+			e.useProgram(d), e.bindVertexArray(p), 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(_, o), e.uniform1f(v, h), e.uniform1f(y, n.majorEvery), e.uniform1f(b, m), e.uniform4f(D, n.waveDir[0], n.waveDir[1], n.waveK, n.waveOmega), e.uniform4f(O, n.waveSigma, n.twistMax, n.shearMax, i()), e.uniform1f(E, +!!n.interactive);
+			let g = Math.max(n.cellSize, 1), I = n.lineWidth / g, L = n.lineWidth * 1.6 / g;
+			e.uniform4f(x, I, L, n.minorAlpha, n.majorAlpha), e.uniform1f(S, n.fieldAlpha);
+			let R = r();
+			e.uniform4f(w, R.x, R.y, n.bulgeStrength, n.bulgeRadius), e.uniform1f(T, n.bulgeMode === "attract" ? -1 : 1);
+			let z = s(n.lineColor);
+			e.uniform3f(k, z[0], z[1], z[2]), e.uniform4f(j, n.faceAlpha, n.faceRelief, n.squashK, n.baseInset), e.uniform2f(M, n.lightDir[0], n.lightDir[1]);
+			let B = s(n.faceWarmLo), V = s(n.faceWarmMid), H = s(n.faceWarmHi);
+			if (e.uniform3f(N, B[0], B[1], B[2]), e.uniform3f(P, V[0], V[1], V[2]), e.uniform3f(F, H[0], H[1], H[2]), n.background === "transparent") e.uniform1f(C, 0), e.uniform3f(A, 0, 0, 0);
+			else {
+				e.uniform1f(C, 1);
+				let t = s(n.background);
+				e.uniform3f(A, t[0], t[1], t[2]);
+			}
+			e.drawArrays(e.TRIANGLES, 0, 3), e.bindVertexArray(null);
+		}
+		return {
+			frame: B,
+			shouldContinue: o,
+			resize: I,
+			teardown: () => {
+				e.deleteProgram(d), e.deleteVertexArray(p), e.deleteBuffer(m);
+			}
+		};
+	};
+}
+//#endregion
+//#region src/components/custom/paper-grid/composables/usePaperGrid.ts
+function V(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, p = 0, m = null;
+	function h(t) {
+		let n = p > 0 ? (t - p) * 1e3 : 16.7;
+		if (p = t, s.tick(n), m?.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, o = i?.clientHeight || 320, l = (i?.clientWidth || 320) / Math.max(o, 1), d = f(i?.height || Math.round(o * a()) || 320, r.cellSize), h = s.smoothedPosition.value, g = s.velocity.value, _ = s.burst.value, v = (h.x * 2 - 1) * l, y = -(h.y * 2 - 1), b = .12 + Math.min(.4, _);
+		c = {
+			x: (v + g.x * b) * d,
+			y: (y - g.y * b) * d
+		};
+	}
+	let g = () => {
+		s.onPointerEnter(), r.interactive && m?.wake();
+	}, _ = (e) => {
+		s.onPointerMove(e), r.interactive && m?.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 ? (m || (y(t), m = o(t, {
+			mode: i,
+			respectReducedMotion: r.respectReducedMotion,
+			setupWGPU: I({
+				canvas: t,
+				config: r,
+				getCursor: l,
+				getAmp: d,
+				shouldContinue: () => !0,
+				onFrame: h
+			}),
+			setupGL: B({
+				canvas: t,
+				config: r,
+				getCursor: l,
+				getAmp: d,
+				shouldContinue: () => !0,
+				onFrame: h
+			})
+		}), m.armAsync()), m) : 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 m?.reducedMotion ?? !1;
+		},
+		dispose: () => {
+			let t = e.value;
+			t && b(t), s.dispose(), m?.dispose();
+		}
+	};
+	return w(() => S.dispose()), S;
+}
+//#endregion
+//#region src/components/custom/paper-grid/constants.ts
+var H = 16, U = {
+	L: .62,
+	C: .05,
+	h: 62
+}, W = {
+	L: .44,
+	C: .07,
+	h: 32
+}, G = {
+	L: .66,
+	C: .12,
+	h: 58
+}, K = {
+	L: .9,
+	C: .1,
+	h: 84
+}, q = {
+	cellSize: 64,
+	majorEvery: 5,
+	minorAlpha: .12,
+	majorAlpha: .22,
+	lineWidth: 1,
+	twistMax: .62,
+	shearMax: .26,
+	waveDir: [.92, .39],
+	waveK: .62,
+	waveOmega: 1.05,
+	waveSigma: .42,
+	fieldAlpha: 1,
+	bulgeStrength: .9,
+	bulgeRadius: 2.5,
+	bulgeMode: "repel",
+	lineColor: U,
+	faceAlpha: 0,
+	faceRelief: 2.6,
+	squashK: .42,
+	baseInset: .14,
+	faceWarmLo: W,
+	faceWarmMid: G,
+	faceWarmHi: K,
+	lightDir: [.6, .8],
+	background: "transparent",
+	interactive: !0,
+	respectReducedMotion: !0
+}, J = /* @__PURE__ */ e(/* @__PURE__ */ x({
+	__name: "PaperGrid",
+	props: {
+		config: { default: () => q },
+		paused: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:paused"],
+	setup(e, { expose: t }) {
+		let n = D("wrapperRef"), r = D("canvasRef"), i = E({ ...e.config });
+		O(() => e.config, (e) => Object.assign(i, e), { deep: !0 }), C(() => {
+			if (e.config.lineColor === q.lineColor) {
+				let e = n.value;
+				if (e) {
+					let t = getComputedStyle(e).getPropertyValue("--foreground").trim();
+					if (t) try {
+						i.lineColor = c(t);
+					} catch {}
+				}
+			}
+		});
+		let a = V(r, { config: i });
+		O(() => e.paused, (e) => e ? a.pause() : a.resume(), { immediate: !0 });
+		let o = v(() => {
+			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) => (T(), y("div", {
+			ref_key: "wrapperRef",
+			ref: n,
+			class: "paper-grid-wrapper",
+			style: S(o.value ? { background: o.value } : void 0)
+		}, [b("canvas", {
+			ref_key: "canvasRef",
+			ref: r,
+			class: "paper-grid-canvas",
+			"aria-hidden": "true",
+			"data-testid": "paper-grid-canvas"
+		}, null, 512)], 4));
+	}
+}), [["__scopeId", "data-v-fc108d7d"]]);
+//#endregion
+export { _ as CURL_EPS, q as DEFAULT_PAPER_GRID_CONFIG, K as FACE_WARM_HI, W as FACE_WARM_LO, G as FACE_WARM_MID, H as PAPER_GRID_MAX_MAJOR_EVERY, J as PaperGrid, U as WARM_IDENTITY_INK, p as curlFBM, g as gridCoverage, f as gridScaleFor, l as potentialFBM, m as samplePaperGrid, V as usePaperGrid };