@mkbabb/glass-ui 4.0.1 → 4.2.0

package/dist/goo-dot-matrix.js

@@ -0,0 +1,811 @@
+import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
+import { t } from "./usePointerVelocityField-BrkqZFhj.js";
+import { a as n, t as r } from "./useGpuSubstrate-Ceet70xq.js";
+import { n as i, t as a } from "./compile-INR_tPk_.js";
+import { s as o, t as s } from "./color-B9jZdhJX.js";
+import { t as c } from "./useIntersectionPause-DO8Vl4gs.js";
+import { u as l } from "./dotMatrixField-CRO0ZFk4.js";
+import { a as u, c as d, d as f, i as p, l as m, n as h, o as g, r as _, s as v, t as y, u as b } from "./uniformBridgeWGPU-BCse1SHU.js";
+import { computed as x, createElementBlock as S, createElementVNode as C, defineComponent as w, normalizeStyle as T, onScopeDispose as ee, openBlock as E, ref as D, useTemplateRef as O, watch as k } from "vue";
+//#region src/components/custom/goo-dot-matrix/constants.ts
+var A = 4, j = [
+	{
+		L: .96,
+		C: .13,
+		h: 85
+	},
+	{
+		L: .82,
+		C: .18,
+		h: 45
+	},
+	{
+		L: .72,
+		C: .15,
+		h: 62
+	}
+], M = {
+	variant: "dot-field",
+	field: {
+		...f,
+		variant: "blob"
+	},
+	dotPixelSize: 10,
+	dotMin: .18,
+	dotMax: .42,
+	fieldFloor: .06,
+	dotBrightFloor: .35,
+	presenceFloor: .2,
+	weldSwell: .5,
+	weldSpecular: .25,
+	flowAmt: .35,
+	palette: j,
+	background: "transparent",
+	fieldGround: "transparent",
+	interactive: !1,
+	pointerMode: "repel",
+	pointerRadius: .35,
+	respectReducedMotion: !0
+}, N = .1, P = .45, F = {
+	s8: 0,
+	s9: 4,
+	s10: 8,
+	s11: 12,
+	s12: 16,
+	s13: 20
+};
+function I(e) {
+	return +(e === "dot-dither");
+}
+function L(e) {
+	return e === "attract" ? -1 : 1;
+}
+function R() {
+	return {
+		x: 0,
+		y: 0,
+		active: 0,
+		bloom: 0,
+		timeSec: 0,
+		latticeSquash: 1
+	};
+}
+function z() {
+	let e = /* @__PURE__ */ new ArrayBuffer(96);
+	return {
+		buffer: e,
+		f32: new Float32Array(e)
+	};
+}
+function B(e, t, n, r, i) {
+	let { f32: a } = e;
+	return a[F.s8 + 0] = I(t.variant), a[F.s8 + 1] = Math.max(t.dotPixelSize * r, 4), a[F.s8 + 2] = t.fieldFloor, a[F.s8 + 3] = t.dotBrightFloor, a[F.s9 + 0] = t.dotMin, a[F.s9 + 1] = t.dotMax, a[F.s9 + 2] = t.pointerRadius, a[F.s9 + 3] = L(t.pointerMode), a[F.s10 + 0] = n.w, a[F.s10 + 1] = n.h, a[F.s10 + 2] = r, a[F.s10 + 3] = t.fieldGround === "transparent" ? 0 : 1, a[F.s11 + 0] = t.interactive ? i.active : 0, a[F.s11 + 1] = i.x, a[F.s11 + 2] = i.y, a[F.s11 + 3] = i.bloom, a[F.s12 + 0] = t.presenceFloor, a[F.s12 + 1] = N, a[F.s12 + 2] = P, a[F.s12 + 3] = i.timeSec, a[F.s13 + 0] = t.weldSwell, a[F.s13 + 1] = t.weldSpecular, a[F.s13 + 2] = t.flowAmt, a[F.s13 + 3] = i.latticeSquash, e;
+}
+//#endregion
+//#region src/components/custom/goo-dot-matrix/shaders/goo-dot.wgsl.ts
+var V = p.indexOf("// ── Full-screen triangle vertex stage"), H = `
+${V >= 0 ? p.slice(0, V) : p}
+
+// ── Dot-grid uniforms (the s8–s13 lanes — see uniformBridgeWGPU.ts; the SoT extend) ──
+struct DotUniforms {
+  // s8: (uDotMode, uDotPixelSize, uFieldFloor, uDotBrightFloor)
+  s8: vec4<f32>,
+  // s9: (uDotMin, uDotMax, uPointerRadius, uPointerMode)
+  s9: vec4<f32>,
+  // s10: (uResX, uResY, uDpr, uShadowGate) — res + the opaque-ground cartoon-shadow gate
+  s10: vec4<f32>,
+  // s11: (uPointerActive, uPointerX, uPointerY, uBloom) — the dot-cursor influence
+  s11: vec4<f32>,
+  // s12: (uPresenceFloor, uWeldLo, uWeldHi, uTime) — Move 1 floor + Move 2 weld band + twinkle clock
+  s12: vec4<f32>,
+  // s13: (uWeldSwell, uWeldSpecular, uFlowAmt, uLatticeSquash) — Move 2 ridge + Move 4b lattice
+  s13: vec4<f32>,
+};
+@group(0) @binding(1) var<uniform> dg: DotUniforms;
+
+// The classic ordered-dither Bayer macros (Codrops — the §T2 halftone). Bayer8 is the
+// perceptual ceiling ("beyond 8×8 the gain is minimal"). The metaball field already carries
+// the warped-FBM membrane, so the dither inherits the organic edge for free.
+fn bayer2(a0: vec2<f32>) -> f32 {
+  let a = floor(a0);
+  return fract(a.x / 2.0 + a.y * a.y * 0.75);
+}
+fn bayer4(a: vec2<f32>) -> f32 {
+  return bayer2(0.5 * a) * 0.25 + bayer2(a);
+}
+fn bayer8(a: vec2<f32>) -> f32 {
+  return bayer4(0.5 * a) * 0.25 + bayer2(a);
+}
+
+// ── Register A: the full-screen triangle vertex stage (the metaball idiom — no buffer) ──
+struct DotVSOut {
+  @builtin(position) pos: vec4<f32>,
+  @location(0) uv: vec2<f32>,   // [0,1] across the canvas (the metaball.vert convention)
+};
+
+@vertex
+fn vs_main(@builtin(vertex_index) vi: u32) -> DotVSOut {
+  var p = vec2<f32>(-1.0, -1.0);
+  if (vi == 1u) { p = vec2<f32>(3.0, -1.0); }
+  else if (vi == 2u) { p = vec2<f32>(-1.0, 3.0); }
+  var out: DotVSOut;
+  out.pos = vec4<f32>(p, 0.0, 1.0);
+  out.uv = p * 0.5 + 0.5;
+  return out;
+}
+
+// ── Register A: the dot-stamp fragment (§T1/§T2 — the dot-grid OUTPUT over sceneDistG) ──
+@fragment
+fn fs_main(in: DotVSOut) -> @location(0) vec4<f32> {
+  let uDotMode        = dg.s8.x;          // 0 = smooth field-driven dot, 1 = Bayer dither
+  let uDotPixelSize   = max(dg.s8.y, 1.0);
+  let uFieldFloor     = dg.s8.z;
+  let uDotBrightFloor = dg.s8.w;
+  let uDotMin         = dg.s9.x;
+  let uDotMax         = dg.s9.y;
+  let uPointerRadius  = max(dg.s9.z, 1e-4);
+  let uPointerMode    = dg.s9.w;          // +1 repel (push out), -1 attract (pull in)
+  let uRes            = dg.s10.xy;
+  let uShadowGate     = dg.s10.w;         // 1 when an opaque ground is present (cast shadow), else 0
+  let pAct            = dg.s11.x;
+  let cursor          = dg.s11.yz;        // NDC-ish [-0.5,0.5] (the field's uv space)
+  let uBloom          = dg.s11.w;
+  let uPresenceFloor  = dg.s12.x;         // Move 1 — the base-lattice floor
+  let uWeldLo         = dg.s12.y;         // Move 2 — the weld band lower fCell
+  let uWeldHi         = dg.s12.z;         // Move 2 — the weld band upper fCell
+  let uTime           = dg.s12.w;         // the φ-twinkle clock (s)
+  let uWeldSwell      = dg.s13.x;         // Move 2 — the neck-ridge radius swell
+  let uWeldSpecular   = dg.s13.y;         // Move 2 — the multiplicative HDR weld pop
+  let uFlowAmt        = dg.s13.z;         // Move 4b — the liquid-lattice advection
+  let uLatticeSquash  = dg.s13.w;         // Move 4b — the volume-preserving squash
+
+  let bodyR = u.s0.y + breath(u.s0.z) * u.s0.w;
+
+  // 1. Quantize fragCoord to a dot grid (cell = uDotPixelSize device px). The fragment's
+  //    pixel coordinate is in.pos.xy (device px).
+  let fragCoord = in.pos.xy;
+  let cell      = floor(fragCoord / uDotPixelSize);
+  let cellHalf  = uDotPixelSize * 0.5;
+  let cellCtr   = (cell + 0.5) * uDotPixelSize;
+
+  // 2. The field AT THE CELL CENTER (so every fragment in a cell agrees on ONE dot). The cell
+  //    center maps to the field uv = (cellCtr/res - 0.5) — the SAME uv the metaball pass uses.
+  let cellCtrUv = cellCtr / uRes - 0.5;
+
+  // 3. The dot-cursor influence (§T7 — the Metal dotted-bg idiom): dots near the cursor swell
+  //    + brighten; the cell uv shifts toward/away (attract/repel). The field-lean is carried
+  //    by the metaball pass's own uPointer deformation inside sceneDistG (KEEP); this is the
+  //    LOCAL dot influence on TOP.
+  let toCursor   = cellCtrUv - cursor;
+  let cdist      = length(toCursor);
+  let influence  = (1.0 - smoothstep(0.0, uPointerRadius, cdist)) * pAct;
+  let cursorUv   = cellCtrUv + normalize(toCursor + vec2<f32>(1e-6)) * influence * uPointerMode * 0.03;
+
+  // MOVE 4b — the LIQUID LATTICE. Probe the field once at the cursor-shifted cell to get the
+  //    local gradient, then advect the sample DOWN that gradient toward the forming core (the
+  //    dots migrate INTO the goo, not a screen-locked grid). The volume-preserving squash leans
+  //    the cell on the pulse + a fast drag (X·Y ≈ 1, a liquid lean not a balloon).
+  let probe      = sceneDistG(cursorUv);
+  let probeF     = clamp(-probe.x / max(bodyR, 1e-4), 0.0, 1.0);
+  let flowDir    = normalize(probe.yz + vec2<f32>(1e-6));
+  let sq         = max(uLatticeSquash, 1e-3);
+  let leanUv     = vec2<f32>(cursorUv.x / sq, cursorUv.y * sq);  // vol-preserving X·Y ≈ 1
+  let sampleUv   = leanUv - flowDir * uFlowAmt * probeF * 0.06;
+
+  // 4. The field value at the cell — thickness = clamp(-d/bodyR, 0, 1) (metaball.wgsl line 500,
+  //    the one-line re-use). 0 at the silhouette → 1 deep in the core — the goo↔dot bridge.
+  let scene = sceneDistG(sampleUv);
+  let fCell = clamp(-scene.x / max(bodyR, 1e-4), 0.0, 1.0);
+
+  // MOVE 1 — the phi-banded PRESENCE FLOOR. band is the meniscus rise the old step() deleted;
+  //    core is the body rise. present NEVER drops below uPresenceFloor -> a living lattice
+  //    fills the card corner-to-corner. uPresenceFloor = 0 => byte-identical to the old gate.
+  let band    = smoothstep(0.0, max(uFieldFloor, 1e-4), fCell);
+  let core    = smoothstep(uFieldFloor, 1.0, fCell);
+  let present = max(uPresenceFloor, band);
+
+  // MOVE 2 — the NECK-RIDGE. The weld is gated on the rim/iso BAND (where two membranes meet),
+  //    NOT on core (lower at the waist), AND on a shallow field gradient (a flat welding
+  //    membrane). At a weld the dots get the field's biggest+brightest swell — the climax.
+  let gradMag = length(scene.yz);
+  let inBand  = smoothstep(uWeldLo, (uWeldLo + uWeldHi) * 0.5, fCell)
+              * (1.0 - smoothstep((uWeldLo + uWeldHi) * 0.5, uWeldHi, fCell));
+  let weld    = inBand * (1.0 - smoothstep(0.0, 0.25, gradMag));
+
+  // 5. The dot radius (px). The presence floor sets the base; core ramps the body; the weld
+  //    swells the neck dots ~1+uWeldSwell (pinned sub-cell so they stay ROUND, not clipped
+  //    squares); the cursor swell + accel bloom ride on top.
+  let coreR   = (uDotMin + (uDotMax - uDotMin) * core);
+  let baseR   = mix(uDotMin, coreR, present)
+              * (1.0 + uWeldSwell * weld)
+              * (1.0 + influence * 0.5 + uBloom * influence);
+  let dotR    = clamp(baseR, 0.0, 0.98) * cellHalf;  // the √φ cell-clip ceiling — round dots
+
+  var mask = 1.0;
+  if (uDotMode > 0.5) {
+    // §T2 Register-A dither: ORDERED-dither the field thickness into ON/OFF dots — denser at
+    // the core, sparser at the rim (the classic halftone). The dot still AA-stamps below.
+    mask = step(0.5, max(uPresenceFloor, fCell) + bayer8(cell) - 0.5);
+  }
+
+  // 6. The antialiased circle at the cell center (the fwidth-feathered Book-of-Shaders dot —
+  //    the ONE AA canon, ~1px band at any DPR). fwidth lives in fs_main ONLY.
+  let pd  = length(fragCoord - cellCtr);
+  let aa  = max(fwidth(pd), 1e-4);
+  let dot = (1.0 - smoothstep(dotR - aa, dotR + aa, pd)) * mask;
+
+  // MOVE 3 — the GATED CARTOON SHADOW. A larger, darker disc UNDER the bright dot, offset by
+  //    the cursor burst (the velocity tell). GATED on uShadowGate (an opaque ground to cast
+  //    onto — no dark halos on a light/transparent host). Premultiplied UNDER the dot.
+  let twinkle = 0.85 + 0.15 * sin(uTime * 0.6 + hash21(cell) * 6.2831853);
+  let shOff   = normalize(toCursor + vec2<f32>(1e-6)) * (0.6 + uBloom * 2.2) * uShadowGate;
+  let shPd    = length(fragCoord - (cellCtr + shOff * cellHalf));
+  let shadowR = dotR * 1.45;
+  let shadow  = (1.0 - smoothstep(shadowR - aa, shadowR + aa, shPd)) * mask
+              * uShadowGate * (present * 0.55);
+
+  // 7. The TECHNICOLOR read (Move 3). The tone maps fCell over the 3-stop warm ramp: deep core
+  //    = hot butter-gold (stop 0), the weld band = molten coral (stop 1), the base lattice =
+  //    deep amber (stop 2). On a light host the FLOOR dots read coral/amber (not the L0.96 core
+  //    stop) so the resting lattice carries chroma. The weld specular is a MULTIPLICATIVE HDR
+  //    pop that can exceed the core ceiling — the waist is the brightest band.
+  let bright  = (uDotBrightFloor + (1.0 - uDotBrightFloor) * core + uBloom * influence * 0.6)
+              * (1.0 + uWeldSpecular * weld) * twinkle;
+  // tone: 0 deep core → 1 base lattice; the weld pulls toward the coral stop (~0.5).
+  let tone    = clamp(mix(1.0 - core, 0.5, weld), 0.0, 1.0);
+  var oklch   = samplePaletteOklch(tone);
+  oklch.x     = clamp(oklch.x * clamp(bright, 0.0, 1.8), 0.0, 1.0);
+  let lin     = oklabToLinearSrgb(oklchToOklab(gamutClampOklch(oklch)));
+  let rgb     = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));
+
+  let alpha = dot * present * twinkle;
+  if (alpha < 0.002 && shadow < 0.002) { discard; }
+
+  // The cartoon shadow (a warm-dark disc) composited UNDER, then the bright dot OVER. Both
+  // premultiplied. The dot wins where it stamps; the shadow shows in the offset crescent.
+  let shadowRgb = vec3<f32>(0.10, 0.05, 0.02);
+  let outRgb    = rgb * alpha + shadowRgb * shadow * (1.0 - alpha);
+  let outA      = alpha + shadow * (1.0 - alpha);
+  return vec4<f32>(outRgb, outA);
+}`, U = "\nstruct GroundUniforms {\n  // g0: (uGroundTime, uGroundAspect, _pad, _pad)\n  g0: vec4<f32>,\n};\n@group(0) @binding(0) var<uniform> gu: GroundUniforms;\n\nstruct GVSOut {\n  @builtin(position) pos: vec4<f32>,\n  @location(0) uv: vec2<f32>,\n};\n\n@vertex\nfn vs_main(@builtin(vertex_index) vi: u32) -> GVSOut {\n  var p = vec2<f32>(-1.0, -1.0);\n  if (vi == 1u) { p = vec2<f32>(3.0, -1.0); }\n  else if (vi == 2u) { p = vec2<f32>(-1.0, 3.0); }\n  var out: GVSOut;\n  out.pos = vec4<f32>(p, 0.0, 1.0);\n  out.uv = p * 0.5 + 0.5;\n  return out;\n}\n\n@fragment\nfn fs_main(in: GVSOut) -> @location(0) vec4<f32> {\n  let t   = gu.g0.x;\n  let uv  = in.uv;\n  // Two slow warm drifts — the centroid moves so the ground is LIVING (G3c).\n  let d1  = 0.5 + 0.5 * sin(t * 0.11 + uv.x * 2.1);\n  let d2  = 0.5 + 0.5 * sin(t * 0.07 - uv.y * 1.7 + 1.3);\n  let amber = vec3<f32>(0.99, 0.86, 0.62);   // warm gold high\n  let coral = vec3<f32>(0.95, 0.62, 0.42);   // molten coral mid\n  let deep  = vec3<f32>(0.86, 0.50, 0.30);   // deep amber low\n  let g     = mix(deep, coral, d1);\n  let rgb   = mix(g, amber, d2 * (1.0 - uv.y) * 0.8);\n  return vec4<f32>(rgb, 1.0);\n}", W = g.indexOf("void main()"), G = W >= 0 ? g.slice(0, W) : g, K = "#version 300 es\nprecision highp float;\nin vec2 aPosition;\nout vec2 vUv;\nvoid main() {\n  vUv = aPosition * 0.5 + 0.5;\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}", q = `${G}
+
+// ── Dot-grid uniforms (the s8–s13 lanes — see uniformBridgeWGPU.ts; the SoT extend) ──
+// The GLSL twin sets these as N named scalars (the WGSL packs vec4 lanes); a unit asserts the
+// dU.* count == the WGSL lane-field count (a dropped uniform reds parity).
+uniform float uDotMode;        // 0 = smooth field-driven dot, 1 = Bayer dither
+uniform float uDotPixelSize;   // device-px cell size
+uniform float uFieldFloor;     // the meniscus rise begins here
+uniform float uDotBrightFloor; // dim-outside brightness floor
+uniform float uDotMin;         // rim dot radius (fraction of the cell)
+uniform float uDotMax;         // core dot radius (fraction of the cell)
+uniform float uDotPointerRadius;
+uniform float uDotPointerMode; // +1 repel, -1 attract
+uniform float uDotPointerActive;
+uniform vec2  uDotCursor;      // field-uv cursor [-0.5,0.5]
+uniform float uDotBloom;       // accel-burst bloom (the velocity tell)
+uniform float uDotShadowGate;  // 1 when an opaque ground is present (cast the cartoon shadow)
+uniform float uPresenceFloor;  // Move 1 — the base-lattice floor
+uniform float uWeldLo;         // Move 2 — the weld band lower fCell
+uniform float uWeldHi;         // Move 2 — the weld band upper fCell
+uniform float uDotTime;        // the φ-twinkle clock (s)
+uniform float uWeldSwell;      // Move 2 — the neck-ridge radius swell
+uniform float uWeldSpecular;   // Move 2 — the multiplicative HDR weld pop
+uniform float uFlowAmt;        // Move 4b — the liquid-lattice advection
+uniform float uLatticeSquash;  // Move 4b — the volume-preserving squash
+
+// The Codrops Bayer8 ordered-dither macros (the §T2 halftone).
+float bayer2(vec2 a0){ vec2 a = floor(a0); return fract(a.x / 2.0 + a.y * a.y * 0.75); }
+float bayer4(vec2 a){ return bayer2(0.5 * a) * 0.25 + bayer2(a); }
+float bayer8(vec2 a){ return bayer4(0.5 * a) * 0.25 + bayer2(a); }
+
+void main() {
+  float bodyR = uBodyRadius + breath(uPulsePhase) * uPulseAmp;
+
+  // 1. Quantize gl_FragCoord (device px) to a dot grid (cell = uDotPixelSize device px).
+  vec2 fragCoord = gl_FragCoord.xy;
+  float pix = max(uDotPixelSize, 1.0);
+  vec2 cell = floor(fragCoord / pix);
+  float cellHalf = pix * 0.5;
+  vec2 cellCtr = (cell + 0.5) * pix;
+
+  // 2. The field uv at the cell center (the SAME uv the metaball pass uses).
+  vec2 cellCtrUv = cellCtr / uResolution - 0.5;
+
+  // 3. The dot-cursor influence (the §T7 local influence on TOP of the field-lean).
+  vec2 toCursor = cellCtrUv - uDotCursor;
+  float cdist = length(toCursor);
+  float influence = (1.0 - smoothstep(0.0, max(uDotPointerRadius, 1e-4), cdist)) * uDotPointerActive;
+  vec2 cursorUv = cellCtrUv + normalize(toCursor + vec2(1e-6)) * influence * uDotPointerMode * 0.03;
+
+  // MOVE 4b — the LIQUID LATTICE. Probe the field, advect down the gradient toward the forming
+  //    core, lean the cell volume-preservingly (X·Y ≈ 1).
+  vec3 probe = sceneDistG(cursorUv);
+  float probeF = clamp(-probe.x / max(bodyR, 1e-4), 0.0, 1.0);
+  vec2 flowDir = normalize(probe.yz + vec2(1e-6));
+  float sq = max(uLatticeSquash, 1e-3);
+  vec2 leanUv = vec2(cursorUv.x / sq, cursorUv.y * sq);
+  vec2 sampleUv = leanUv - flowDir * uFlowAmt * probeF * 0.06;
+
+  // 4. The field value at the cell — thickness = clamp(-d/bodyR, 0, 1) (the goo↔dot bridge).
+  vec3 scene = sceneDistG(sampleUv);
+  float fCell = clamp(-scene.x / max(bodyR, 1e-4), 0.0, 1.0);
+
+  // MOVE 1 — the φ-banded PRESENCE FLOOR (uPresenceFloor = 0 ⇒ byte-identical to the old gate).
+  float band = smoothstep(0.0, max(uFieldFloor, 1e-4), fCell);
+  float core = smoothstep(uFieldFloor, 1.0, fCell);
+  float present = max(uPresenceFloor, band);
+
+  // MOVE 2 — the NECK-RIDGE (weld gated on the rim/iso band + a shallow gradient, not on core).
+  float gradMag = length(scene.yz);
+  float inBand = smoothstep(uWeldLo, (uWeldLo + uWeldHi) * 0.5, fCell)
+               * (1.0 - smoothstep((uWeldLo + uWeldHi) * 0.5, uWeldHi, fCell));
+  float weld = inBand * (1.0 - smoothstep(0.0, 0.25, gradMag));
+
+  // 5. The field-driven dot radius (px) + the neck-ridge swell + the cursor swell + accel bloom.
+  float coreR = (uDotMin + (uDotMax - uDotMin) * core);
+  float baseR = mix(uDotMin, coreR, present)
+              * (1.0 + uWeldSwell * weld)
+              * (1.0 + influence * 0.5 + uDotBloom * influence);
+  float dotR = clamp(baseR, 0.0, 0.98) * cellHalf;
+
+  float mask = 1.0;
+  if (uDotMode > 0.5) {
+    mask = step(0.5, max(uPresenceFloor, fCell) + bayer8(cell) - 0.5);
+  }
+
+  // 6. The crisp fwidth-feathered SDF dot (the ONE AA canon, ~1px band at any DPR).
+  float pd = length(fragCoord - cellCtr);
+  float aa = max(fwidth(pd), 1e-4);
+  float dot = (1.0 - smoothstep(dotR - aa, dotR + aa, pd)) * mask;
+
+  // MOVE 3 — the GATED CARTOON SHADOW (offset by the cursor burst — the velocity tell — gated
+  //    on uDotShadowGate so no dark halos paint on a light/transparent host).
+  float twinkle = 0.85 + 0.15 * sin(uDotTime * 0.6 + hash21(cell) * 6.2831853);
+  vec2 shOff = normalize(toCursor + vec2(1e-6)) * (0.6 + uDotBloom * 2.2) * uDotShadowGate;
+  float shPd = length(fragCoord - (cellCtr + shOff * cellHalf));
+  float shadowR = dotR * 1.45;
+  float shadow = (1.0 - smoothstep(shadowR - aa, shadowR + aa, shPd)) * mask
+               * uDotShadowGate * (present * 0.55);
+
+  // 7. The TECHNICOLOR read (Move 3) — core gold, weld coral (the multiplicative HDR specular
+  //    pop), base lattice amber; the floor dots carry chroma.
+  float bright = (uDotBrightFloor + (1.0 - uDotBrightFloor) * core + uDotBloom * influence * 0.6)
+               * (1.0 + uWeldSpecular * weld) * twinkle;
+  float tone = clamp(mix(1.0 - core, 0.5, weld), 0.0, 1.0);
+  vec3 oklch = samplePaletteOklch(tone);
+  oklch.x = clamp(oklch.x * clamp(bright, 0.0, 1.8), 0.0, 1.0);
+  vec3 lin = oklabToLinearSrgb(oklchToOklab(gamutClampOklch(oklch)));
+  vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));
+
+  float alpha = dot * present * twinkle;
+  if (alpha < 0.002 && shadow < 0.002) discard;
+
+  vec3 shadowRgb = vec3(0.10, 0.05, 0.02);
+  vec3 outRgb = rgb * alpha + shadowRgb * shadow * (1.0 - alpha);
+  float outA = alpha + shadow * (1.0 - alpha);
+  fragColor = vec4(outRgb, outA);
+}`, J = "#version 300 es\nprecision highp float;\nin vec2 aPosition;\nout vec2 vUv;\nvoid main() {\n  vUv = aPosition * 0.5 + 0.5;\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}", te = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\nuniform float uGroundTime;\nvoid main() {\n  float d1 = 0.5 + 0.5 * sin(uGroundTime * 0.11 + vUv.x * 2.1);\n  float d2 = 0.5 + 0.5 * sin(uGroundTime * 0.07 - vUv.y * 1.7 + 1.3);\n  vec3 amber = vec3(0.99, 0.86, 0.62);\n  vec3 coral = vec3(0.95, 0.62, 0.42);\n  vec3 deep  = vec3(0.86, 0.50, 0.30);\n  vec3 g = mix(deep, coral, d1);\n  vec3 rgb = mix(g, amber, d2 * (1.0 - vUv.y) * 0.8);\n  fragColor = vec4(rgb, 1.0);\n}", Y = 64, X = 8, ne = 1, Z = 2, Q = "[GooDotMatrix]";
+function re(e, t) {
+	let n = e.createShaderModule({
+		label: `${Q} goo-dot.wgsl`,
+		code: H
+	}), r = e.createBuffer({
+		label: `${Q} field-uniforms`,
+		size: y,
+		usage: Y | X
+	}), i = e.createBuffer({
+		label: `${Q} dot-uniforms`,
+		size: 96,
+		usage: Y | X
+	}), a = e.createBindGroupLayout({
+		label: `${Q} bgl`,
+		entries: [{
+			binding: 0,
+			visibility: ne | Z,
+			buffer: { type: "uniform" }
+		}, {
+			binding: 1,
+			visibility: Z,
+			buffer: { type: "uniform" }
+		}]
+	}), o = e.createRenderPipeline({
+		label: `${Q} pipeline`,
+		layout: e.createPipelineLayout({ bindGroupLayouts: [a] }),
+		vertex: {
+			module: n,
+			entryPoint: "vs_main"
+		},
+		fragment: {
+			module: n,
+			entryPoint: "fs_main",
+			targets: [{
+				format: t,
+				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" }
+	}), s = e.createBindGroup({
+		label: `${Q} bg`,
+		layout: a,
+		entries: [{
+			binding: 0,
+			resource: { buffer: r }
+		}, {
+			binding: 1,
+			resource: { buffer: i }
+		}]
+	}), c = e.createShaderModule({
+		label: `${Q} goo-dot-ground.wgsl`,
+		code: U
+	}), l = e.createBuffer({
+		label: `${Q} ground-uniforms`,
+		size: 16,
+		usage: Y | X
+	}), u = e.createBindGroupLayout({
+		label: `${Q} ground-bgl`,
+		entries: [{
+			binding: 0,
+			visibility: Z,
+			buffer: { type: "uniform" }
+		}]
+	});
+	return {
+		pipeline: o,
+		bindGroup: s,
+		groundPipeline: e.createRenderPipeline({
+			label: `${Q} ground-pipeline`,
+			layout: e.createPipelineLayout({ bindGroupLayouts: [u] }),
+			vertex: {
+				module: c,
+				entryPoint: "vs_main"
+			},
+			fragment: {
+				module: c,
+				entryPoint: "fs_main",
+				targets: [{ format: t }]
+			},
+			primitive: { topology: "triangle-list" }
+		}),
+		groundBindGroup: e.createBindGroup({
+			label: `${Q} ground-bg`,
+			layout: u,
+			entries: [{
+				binding: 0,
+				resource: { buffer: l }
+			}]
+		}),
+		groundBuffer: l,
+		groundScratch: new Float32Array(16 / 4),
+		fieldBuffer: r,
+		dotBuffer: i,
+		fieldScratch: h(),
+		dotScratch: z()
+	};
+}
+function ie(e) {
+	let t = a(e, e.VERTEX_SHADER, K, Q), n = a(e, e.FRAGMENT_SHADER, q, Q), r = i(e, t, n, Q);
+	e.useProgram(r);
+	let o = e.createVertexArray();
+	e.bindVertexArray(o);
+	let s = e.createBuffer();
+	e.bindBuffer(e.ARRAY_BUFFER, s), e.bufferData(e.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		1,
+		-1,
+		-1,
+		1,
+		-1,
+		1,
+		1,
+		-1,
+		1,
+		1
+	]), e.STATIC_DRAW);
+	let c = e.getAttribLocation(r, "aPosition");
+	e.enableVertexAttribArray(c), e.vertexAttribPointer(c, 2, e.FLOAT, !1, 0, 0);
+	let l = {};
+	for (let t of b) l[t] = e.getUniformLocation(r, t);
+	let u = [], d = [], f = [];
+	for (let t = 0; t < 4; t++) u.push(e.getUniformLocation(r, `uSatPos[${t}]`)), d.push(e.getUniformLocation(r, `uSatRadius[${t}]`)), f.push(e.getUniformLocation(r, `uSatOpacity[${t}]`));
+	let p = [], m = [];
+	for (let t = 0; t < 15; t++) p.push(e.getUniformLocation(r, `uTrailPos[${t}]`)), m.push(e.getUniformLocation(r, `uTrailRadius[${t}]`));
+	let h = [];
+	for (let t = 0; t < 4; t++) h.push(e.getUniformLocation(r, `uPalette[${t}]`));
+	let g = {
+		U: l,
+		satPosLocs: u,
+		satRadLocs: d,
+		satOpLocs: f,
+		trailPosLocs: p,
+		trailRadLocs: m,
+		paletteLocs: h
+	}, _ = {
+		mode: e.getUniformLocation(r, "uDotMode"),
+		pix: e.getUniformLocation(r, "uDotPixelSize"),
+		floor: e.getUniformLocation(r, "uFieldFloor"),
+		bright: e.getUniformLocation(r, "uDotBrightFloor"),
+		min: e.getUniformLocation(r, "uDotMin"),
+		max: e.getUniformLocation(r, "uDotMax"),
+		pr: e.getUniformLocation(r, "uDotPointerRadius"),
+		pm: e.getUniformLocation(r, "uDotPointerMode"),
+		pa: e.getUniformLocation(r, "uDotPointerActive"),
+		cursor: e.getUniformLocation(r, "uDotCursor"),
+		bloom: e.getUniformLocation(r, "uDotBloom"),
+		shadowGate: e.getUniformLocation(r, "uDotShadowGate"),
+		presenceFloor: e.getUniformLocation(r, "uPresenceFloor"),
+		weldLo: e.getUniformLocation(r, "uWeldLo"),
+		weldHi: e.getUniformLocation(r, "uWeldHi"),
+		time: e.getUniformLocation(r, "uDotTime"),
+		weldSwell: e.getUniformLocation(r, "uWeldSwell"),
+		weldSpecular: e.getUniformLocation(r, "uWeldSpecular"),
+		flowAmt: e.getUniformLocation(r, "uFlowAmt"),
+		latticeSquash: e.getUniformLocation(r, "uLatticeSquash")
+	}, v = a(e, e.VERTEX_SHADER, J, Q), y = a(e, e.FRAGMENT_SHADER, te, Q), x = i(e, v, y, Q), S = e.createVertexArray();
+	e.bindVertexArray(S);
+	let C = e.createBuffer();
+	e.bindBuffer(e.ARRAY_BUFFER, C), e.bufferData(e.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		1,
+		-1,
+		-1,
+		1,
+		-1,
+		1,
+		1,
+		-1,
+		1,
+		1
+	]), e.STATIC_DRAW);
+	let w = e.getAttribLocation(x, "aPosition");
+	e.enableVertexAttribArray(w), e.vertexAttribPointer(w, 2, e.FLOAT, !1, 0, 0);
+	let T = {
+		prog: x,
+		vs: v,
+		fs: y,
+		vao: S,
+		buf: C,
+		uTime: e.getUniformLocation(x, "uGroundTime")
+	};
+	return e.bindVertexArray(null), e.enable(e.BLEND), e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA), {
+		prog: r,
+		vs: t,
+		fs: n,
+		buf: s,
+		vao: o,
+		locs: g,
+		dU: _,
+		ground: T
+	};
+}
+//#endregion
+//#region src/components/custom/goo-dot-matrix/composables/useGooDotMatrix.ts
+function ae(e) {
+	return .5 + .5 * Math.sin(e / 1e3 * .5);
+}
+var oe = 4200;
+function $(e, i) {
+	let { config: a } = i, l = i.mode ?? "live", f = () => a.field, p = a.field, h = D(null), g = m(), y = d(h), b = v(p, "goo-dot"), x = t({ respectReducedMotion: a.respectReducedMotion }), S = R(), C = /* @__PURE__ */ new Map();
+	function w(e) {
+		let t = C.get(e);
+		if (t) return t;
+		let n = o(s(e));
+		return C.size > 256 && C.clear(), C.set(e, n), n;
+	}
+	let T = a.palette.map((e) => `oklch(${e.L} ${e.C} ${e.h})`), E = T[T.length - 1] ?? "oklch(0.92 0.03 78)", O = null, k = !1, A = 0, j = 0, M = !1;
+	function F(e) {
+		let t = A ? (e - A) * 1e3 : 16;
+		A = e;
+		let n = Math.max(0, Math.min(t, 50)), r = O?.reducedMotion ?? !1, i = r || k ? 0 : f().tempo, o = i * n;
+		if (j += o, r && !M && (j = oe, M = !0), r || (M = !1), i > 0 && y.active.value) {
+			let e = y.pointer.value;
+			x.setPointer(e.x * .5 + .5, e.y * .5 + .5);
+		}
+		if (x.tick(i === 0 ? 0 : n), r || g.update({
+			pointerActive: y.active.value,
+			clicked: y.consumeClick(),
+			idleMs: y.idleMs()
+		}), g.tick(o), r ? y.rest() : y.tick(o), b.tick(j, g.params.value), a.interactive && y.active.value && i > 0) {
+			let e = y.pointer.value;
+			S.x = e.x * .5, S.y = e.y * .5, S.active += (1 - S.active) * .2, a.pointerMode, S.bloom = Math.max(S.bloom * .9, x.burst.value);
+		} else S.active += (0 - S.active) * .12, S.bloom *= .9;
+		return S.timeSec = r ? 0 : j / 1e3, S.latticeSquash = 1 + (r ? 0 : ae(j)) * .08 + S.bloom * .18, {
+			params: g.params.value,
+			rgb: w(E),
+			simTimeMs: j,
+			timeSec: e,
+			resolveColor: w,
+			rimColor: f().surface.rimColor,
+			paletteStops: T
+		};
+	}
+	function I() {
+		return k ? !1 : !g.isSettled() || !y.isAtRest() || !b.isQuiescent() || S.active > .001 || S.bloom > .001;
+	}
+	function z(e) {
+		return function(t, r, i) {
+			let o = re(t, i);
+			function s() {
+				let t = n(), r = e.clientWidth || f().geometry.canvasSize, i = e.clientHeight || f().geometry.canvasSize, a = Math.max(1, Math.round(r * t)), o = Math.max(1, Math.round(i * t));
+				(e.width !== a || e.height !== o) && (e.width = a, e.height = o);
+			}
+			function c(i) {
+				let s = F(i);
+				_(o.fieldScratch, e, f(), y, b, s), t.queue.writeBuffer(o.fieldBuffer, 0, o.fieldScratch.buffer), B(o.dotScratch, a, {
+					w: e.width || 1,
+					h: e.height || 1
+				}, n(), S), t.queue.writeBuffer(o.dotBuffer, 0, o.dotScratch.buffer);
+				let c = a.fieldGround === "warm", l = r.getCurrentTexture().createView(), u = t.createCommandEncoder({ label: `${Q} frame` });
+				if (c) {
+					o.groundScratch[0] = s.simTimeMs / 1e3, o.groundScratch[1] = (e.width || 1) / (e.height || 1), t.queue.writeBuffer(o.groundBuffer, 0, o.groundScratch.buffer);
+					let n = u.beginRenderPass({ colorAttachments: [{
+						view: l,
+						clearValue: {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						},
+						loadOp: "clear",
+						storeOp: "store"
+					}] });
+					n.setPipeline(o.groundPipeline), n.setBindGroup(0, o.groundBindGroup), n.draw(3, 1, 0, 0), n.end();
+				}
+				let d = u.beginRenderPass({ colorAttachments: [{
+					view: l,
+					clearValue: {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					},
+					loadOp: c ? "load" : "clear",
+					storeOp: "store"
+				}] });
+				d.setPipeline(o.pipeline), d.setBindGroup(0, o.bindGroup), d.draw(3, 1, 0, 0), d.end(), t.queue.submit([u.finish()]);
+			}
+			return {
+				frame: c,
+				shouldContinue: I,
+				resize: s,
+				teardown: () => {
+					o.fieldBuffer.destroy(), o.dotBuffer.destroy(), o.groundBuffer.destroy();
+				}
+			};
+		};
+	}
+	function V(e) {
+		return function(t) {
+			let r = ie(t), { prog: i, vao: o, locs: s, dU: c } = r;
+			function l() {
+				let r = n(), i = e.clientWidth || f().geometry.canvasSize, a = e.clientHeight || f().geometry.canvasSize, o = Math.max(1, Math.round(i * r)), s = Math.max(1, Math.round(a * r));
+				(e.width !== o || e.height !== s) && (e.width = o, e.height = s), t.viewport(0, 0, e.width, e.height);
+			}
+			function d(l) {
+				let d = F(l), p = a.fieldGround === "warm";
+				p && (t.disable(t.BLEND), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.useProgram(r.ground.prog), t.bindVertexArray(r.ground.vao), t.uniform1f(r.ground.uTime, d.simTimeMs / 1e3), t.drawArrays(t.TRIANGLES, 0, 6), t.bindVertexArray(null), t.enable(t.BLEND), t.blendFunc(t.ONE, t.ONE_MINUS_SRC_ALPHA)), t.useProgram(i);
+				let m = n();
+				t.uniform1f(c.mode, +(a.variant === "dot-dither")), t.uniform1f(c.pix, Math.max(a.dotPixelSize * m, 4)), t.uniform1f(c.floor, a.fieldFloor), t.uniform1f(c.bright, a.dotBrightFloor), t.uniform1f(c.min, a.dotMin), t.uniform1f(c.max, a.dotMax), t.uniform1f(c.pr, a.pointerRadius), t.uniform1f(c.pm, L(a.pointerMode)), t.uniform1f(c.pa, a.interactive ? S.active : 0), t.uniform2f(c.cursor, S.x, S.y), t.uniform1f(c.bloom, S.bloom), t.uniform1f(c.shadowGate, +!!p), t.uniform1f(c.presenceFloor, a.presenceFloor), t.uniform1f(c.weldLo, N), t.uniform1f(c.weldHi, P), t.uniform1f(c.time, S.timeSec), t.uniform1f(c.weldSwell, a.weldSwell), t.uniform1f(c.weldSpecular, a.weldSpecular), t.uniform1f(c.flowAmt, a.flowAmt), t.uniform1f(c.latticeSquash, S.latticeSquash), u(t, i, o, s, e, f(), y, b, d);
+			}
+			return {
+				frame: d,
+				shouldContinue: I,
+				resize: l,
+				teardown: () => {
+					t.deleteProgram(r.prog), t.deleteShader(r.vs), t.deleteShader(r.fs), t.deleteBuffer(r.buf), t.deleteVertexArray(r.vao), t.deleteProgram(r.ground.prog), t.deleteShader(r.ground.vs), t.deleteShader(r.ground.fs), t.deleteBuffer(r.ground.buf), t.deleteVertexArray(r.ground.vao);
+				}
+			};
+		};
+	}
+	c(e, {
+		pause: () => O?.suspend("off-screen-io"),
+		resume: () => O?.resume("off-screen-io")
+	}, {
+		rootMargin: "200px",
+		pauseWhenHidden: !1
+	});
+	let H = () => {
+		let t = e.value;
+		return t ? (O || (h.value = t.parentElement ?? t, O = r(t, {
+			mode: l,
+			contextAttrs: {
+				alpha: !0,
+				premultipliedAlpha: !0,
+				antialias: !1,
+				preserveDrawingBuffer: !1
+			},
+			respectReducedMotion: a.respectReducedMotion,
+			setupWGPU: z(t),
+			setupGL: V(t)
+		}), O.armAsync()), O) : null;
+	};
+	queueMicrotask(() => H());
+	let U = {
+		get backend() {
+			return H()?.backend ?? "webgpu";
+		},
+		pause: () => {
+			k = !0, H()?.suspend("manual");
+		},
+		resume: () => {
+			k = !1, H()?.resume("manual");
+		},
+		wake: () => H()?.wake(),
+		renderAt: (e) => H()?.renderAt(e),
+		get reducedMotion() {
+			return O?.reducedMotion ?? !1;
+		},
+		dispose: () => {
+			x.dispose(), O?.dispose(), O = null;
+		}
+	};
+	return ee(() => U.dispose()), U;
+}
+//#endregion
+//#region src/components/custom/goo-dot-matrix/GooDotMatrix.vue
+var se = /* @__PURE__ */ e(/* @__PURE__ */ w({
+	__name: "GooDotMatrix",
+	props: {
+		config: { default: () => M },
+		paused: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:paused"],
+	setup(e, { expose: t }) {
+		let n = O("canvasRef"), r = $(n, { config: new Proxy({}, {
+			get: (t, n) => Reflect.get(e.config, n),
+			has: (t, n) => Reflect.has(e.config, n),
+			ownKeys: () => Reflect.ownKeys(e.config),
+			getOwnPropertyDescriptor: (t, n) => Reflect.getOwnPropertyDescriptor(e.config, n)
+		}) });
+		k(() => e.config, () => r.wake(), { deep: !0 }), k(() => e.paused, (e) => e ? r.pause() : r.resume(), { immediate: !0 });
+		let i = x(() => {
+			let t = e.config.background;
+			if (t !== "transparent") return `oklch(${t.L} ${t.C} ${t.h})`;
+		});
+		return t({
+			pause: r.pause,
+			resume: r.resume,
+			wake: r.wake,
+			renderAt: r.renderAt
+		}), (e, t) => (E(), S("div", {
+			class: "goo-dot-matrix-wrapper",
+			style: T(i.value ? { background: i.value } : void 0)
+		}, [C("canvas", {
+			ref_key: "canvasRef",
+			ref: n,
+			class: "goo-dot-matrix-canvas",
+			"aria-hidden": "true",
+			"data-testid": "goo-dot-matrix-canvas"
+		}, null, 512)], 4));
+	}
+}), [["__scopeId", "data-v-8b833d12"]]);
+//#endregion
+//#region src/components/custom/goo-dot-matrix/composables/gooDotLattice.ts
+function ce(e, t, n) {
+	let r = Math.max(t, 1), i = e % r, a = Math.floor(e / r), o = (r - 1) / 2;
+	return {
+		x: (i - o) * n,
+		y: (a - o) * n
+	};
+}
+function le(e) {
+	let t = Math.max(e, 1);
+	return t * t;
+}
+//#endregion
+export { M as DEFAULT_GOO_DOT_CONFIG, se as GooDotMatrix, A as MIN_DOT_PIXEL_SIZE, j as WARM_IDENTITY_PALETTE, l as fibonacciDot, ce as gridOrigin, le as latticeInstanceCount, $ as useGooDotMatrix };