@mkbabb/glass-ui 4.0.1 → 4.1.0

package/dist/components/custom/dot-flow-field/composables/uniformBridgeWGPU.d.ts

@@ -1,5 +1,16 @@
 import type { OklchStop } from "../../../../composables/color";
 import { type FlowFieldConfig } from "../constants";
+/** The domain half-extent (the lattice spans [-half, half]²; mirrors flowField.ts). */
+export declare const FLOW_DOMAIN_HALF = 0.85;
+export interface FlowGridGeometry {
+    cols: number;
+    count: number;
+    /** The lattice pitch in DOMAIN units (the px pitch mapped to the domain). */
+    pitchDomain: number;
+}
+/** Compile-time lattice cap (mirrors the WGSL storage-buffer array bound). */
+export declare const FLOW_MAX_LATTICE = 16384;
+export declare function flowGridGeometry(gridPitchPx: number, canvasCssMin: number): FlowGridGeometry;
 export declare const FLOW_COMPUTE_UNIFORM_BYTES: number;
 export interface FlowUniformScratch {
     buffer: ArrayBuffer;
@@ -7,18 +18,22 @@ export interface FlowUniformScratch {
     i32: Int32Array;
 }
 export declare function createFlowComputeScratch(): FlowUniformScratch;
-/** The domain half-extent (mirrors the WGSL `uDomainHalf`). */
-export declare const FLOW_DOMAIN_HALF = 0.85;
 /** Pack the compute uniforms in place. */
-export declare function packFlowComputeUniforms(scratch: FlowUniformScratch, config: FlowFieldConfig, timeSec: number, dt: number, particleCount: number): FlowUniformScratch;
+export declare function packFlowComputeUniforms(scratch: FlowUniformScratch, config: FlowFieldConfig, timeSec: number, dt: number, geometry: FlowGridGeometry): FlowUniformScratch;
 export declare const FLOW_RENDER_UNIFORM_BYTES: number;
 export declare function createFlowRenderScratch(): FlowUniformScratch;
+/** The base resting brightness (the calm-lattice floor before the band lights a dot). */
+export declare const FLOW_BASE_BRIGHT = 0.22;
+/** The drift-driven size pulse (a subtle breathing; never a re-seed). */
+export declare const FLOW_SIZE_PULSE = 0.4;
 /** Pack the render uniforms in place. */
-export declare function packFlowRenderUniforms(scratch: FlowUniformScratch, config: FlowFieldConfig, timeSec: number, aspect: number, canvasCssMin: number, palette: OklchStop[]): FlowUniformScratch;
-/** The byte size of one particle in the storage buffer (vec4<f32>). */
+export declare function packFlowRenderUniforms(scratch: FlowUniformScratch, config: FlowFieldConfig, timeSec: number, aspect: number, canvasCssMin: number, geometry: FlowGridGeometry, palette: OklchStop[]): FlowUniformScratch;
+/** The byte size of one lattice dot in the storage buffer (vec4<f32>). */
 export declare const FLOW_PARTICLE_BYTES = 16;
 /**
- * Seed the particle storage buffer: each particle is (pos.x, pos.y, age, seed) in the
- * domain [-half, half]. The seed is deterministic per index so a re-mount is reproducible.
+ * Seed the lattice storage buffer: each dot starts AT its anchor origin (the restoring
+ * spring needs no initial offset). `(pos.x, pos.y, height=0, |disp|=0)` per index — the
+ * compute kernel re-derives the origin from `gridOrigin(index, cols, pitch)` each frame,
+ * so the seed only needs the starting position (the lattice settles on the first frames).
  */
-export declare function seedParticleBuffer(particleCount: number): Float32Array;
+export declare function seedLatticeBuffer(geometry: FlowGridGeometry): Float32Array;

package/dist/components/custom/dot-flow-field/composables/useDotFlowField.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from "vue";
 import { type GpuBackend } from "../../../../composables/glass/webgpu/useGpuSubstrate";
-import { type OklchStop } from "../../../../composables/color";
+import type { OklchStop } from "../../../../composables/color";
 import type { FlowFieldConfig } from "../constants";
 export interface UseDotFlowFieldOptions {
     config: FlowFieldConfig;
@@ -11,7 +11,7 @@ export interface UseDotFlowFieldOptions {
 }
 /** The uniform handle a consumer wires its lifecycle against (backend-agnostic). */
 export interface DotFlowFieldHandle {
-    /** The resolved backend (`"webgpu"` where supported, else the Canvas2D fallback as `"webgl2"`). */
+    /** The resolved backend (`"webgpu"` where supported, else the WebGL2 fragment fallback). */
     readonly backend: GpuBackend;
     /** Park the loop (the WCAG-2.2.2 pause seam — `DockBackgroundToggle` wires this). */
     pause: () => void;
@@ -23,12 +23,13 @@ export interface DotFlowFieldHandle {
     renderAt: (timeSec: number) => void;
     /** The live `prefers-reduced-motion: reduce` state. */
     readonly reducedMotion: boolean;
-    /** Tear down the renderer + release GPU/2D resources. */
+    /** Tear down the renderer + release GPU/GL resources. */
     dispose: () => void;
 }
 /**
  * Mount the dot-flow-field renderer on `canvasRef`. The WebGPU primary runs the
- * compute+render two-pass; the Canvas2D fallback steps the SAME `flowField.ts` evaluator
- * (the ONE math source). Returns the uniform lifecycle handle.
+ * compute+render two-pass over the anchored lattice; the WebGL2 fallback evaluates the SAME
+ * `flowField.ts` field as a fullscreen fragment pass (the ONE math source). Returns the
+ * uniform lifecycle handle.
  */
 export declare function useDotFlowField(canvasRef: Ref<HTMLCanvasElement | null>, options: UseDotFlowFieldOptions): DotFlowFieldHandle;

package/dist/components/custom/dot-flow-field/composables/useFlowParticles.d.ts

@@ -1,18 +1,31 @@
 import type { WebGPUCanvasFrame } from "../../../../composables/glass/webgpu/useWebGPUCanvas";
+import type { WebGLCanvasFrame } from "../../../../composables/glass/webgl/useWebGLCanvas";
 import type { OklchStop } from "../../../../composables/color";
 import type { FlowFieldConfig } from "../constants";
-export interface FlowWGPUSetupDeps {
+export interface FlowSetupDeps {
     canvas: HTMLCanvasElement;
     config: FlowFieldConfig;
     /** The resolved (ColorResolver) palette stops as OKLCh — re-read each frame so a live palette edit reaches the buffer. */
     getPalette: () => OklchStop[];
     /** Demand-gate (the renderer's quiescence layer — substrate-agnostic). */
     shouldContinue: () => boolean;
-    /** Reduced-motion read (the substrate owns the query; the renderer maps the clock). */
-    getReducedMotion: () => boolean;
+    /**
+     * The per-frame pointer hook — useDotFlowField advances the shared
+     * `usePointerVelocityField` here (the no-own-rAF discipline; the renderer's loop feeds
+     * the push-API tick). ZERO own rAF.
+     */
+    onFrame?: (timeSec: number) => void;
 }
 /**
  * Build the dot-flow-field `setupWGPU(device, context, format)` callback. Closes over the
- * config/palette getters + the renderer's demand gate.
+ * config/palette getters + the renderer's demand gate + the pointer `onFrame` hook.
  */
-export declare function createFlowWGPUSetup(deps: FlowWGPUSetupDeps): (device: GPUDevice, context: GPUCanvasContext, format: GPUTextureFormat) => WebGPUCanvasFrame;
+export declare function createFlowWGPUSetup(deps: FlowSetupDeps): (device: GPUDevice, context: GPUCanvasContext, format: GPUTextureFormat) => WebGPUCanvasFrame;
+/**
+ * Build the `setupGL(gl)` callback the `createGpuSubstrate` WebGL2 path invokes — a clean
+ * aurora-class fullscreen fragment pass (the retopology made the dot-lattice + brightness
+ * model fragment-friendly; the Canvas2D point-cloud is GONE, clean break). It evaluates
+ * the SAME `flowField.ts` height/displacement field the WGSL primary does, splicing the
+ * SHARED GLSL color chunk (the ONE color source → no drift between the two backends).
+ */
+export declare function createFlowGLSetup(deps: FlowSetupDeps): (gl: WebGL2RenderingContext) => WebGLCanvasFrame;

package/dist/components/custom/dot-flow-field/constants.d.ts

@@ -1,48 +1,69 @@
 import type { WaveComponent } from "./composables/flowField";
 import type { OklchStop } from "../../../composables/color";
-/** Compile-time particle cap — mirrors the WGSL storage-buffer array bound. */
+/** Compile-time lattice cap — mirrors the WGSL storage-buffer array bound. */
 export declare const MAX_PARTICLES = 16384;
 /** Compile-time wave-component cap — mirrors the WGSL `MAX_WAVE_COMPONENTS` #define. */
 export declare const MAX_WAVE_COMPONENTS = 8;
 /** Compile-time palette cap — mirrors the WGSL `MAX_FLOW_STOPS` #define. */
 export declare const MAX_FLOW_STOPS = 4;
-/** The default advected-dot count (coarse-pointer/mobile clamps lower). */
-export declare const DEFAULT_PARTICLE_COUNT = 4000;
 /**
  * The full author schema — the studio's `useConfiguratorState` model. Every field is a
  * tunable the demo configurator drives; the SFC resolves it into the uniform table.
+ *
+ * RETOPOLOGY: the lattice density is derived from `gridPitch` (a clean break from the free
+ * `particleCount` — README MIGRATION row `particleCount → gridPitch`). The brightness/scale
+ * shape rides `contrast`/`waveBandCenter`/`waveBandWidth`; the sub-cell drift rides
+ * `displaceAmp`/`springK`; `coherence` maps the octave count + persistence.
  */
 export interface FlowFieldConfig {
-    /** The advected-dot count (500..MAX_PARTICLES). */
-    particleCount: number;
-    /** The Gerstner sum-of-sines table (1..MAX_WAVE_COMPONENTS). */
+    /** The Gerstner sum-of-sines table (1..MAX_WAVE_COMPONENTS) — the LARGE-wave ladder. */
     waveComponents: WaveComponent[];
-    /** The dominant wave-travel direction in degrees (the field's overall lean). */
-    windDirection: number;
-    /** The dispersion-driven travel speed (scales ω). */
+    /** The dispersion-driven sweep speed (scales ω). LOW = slow sweep (default 0.3). */
     windSpeed: number;
-    /** The fbm curl-noise braiding term weight over the pure Gerstner field (0..1). */
+    /** The fbm curl-noise braiding-break weight (0..0.4 — keep low; default 0.12). */
     curlStrength: number;
-    /** The billboard base radius in px @ 1×. */
+    /** The lattice spacing in CSS-px (drives N = view/pitch²). ~26px ≈ the reference. */
+    gridPitch: number;
+    /** The dot billboard base radius in px @ 1×. */
     dotSize: number;
-    /** How much |v| thins the dot (denser-where-calm — the reference's varying size). */
-    dotSizeVelocity: number;
-    /** The dot-color ramp (the demo themes it teal); resolved via the ColorResolver. */
+    /** How far a dot drifts from its anchor, in pitch fractions (capped < 0.5 pitch). */
+    displaceAmp: number;
+    /** The restoring-spring rate (the pull-to-anchor stiffness; higher = stiffer). */
+    springK: number;
+    /** The sweeping-band center over the normalized height (the iso-band the wave rides). */
+    waveBandCenter: number;
+    /** The sweeping bright-stripe thickness (`waveBand` width over the normalized height). */
+    waveBandWidth: number;
+    /** The brightness modulation depth (subtle ↔ bold; 0..1). */
+    contrast: number;
+    /** The Coherence axis (0..1; high = few coarse octaves coherent, low = many fine). */
+    coherence: number;
+    /** The soft-disc globe mask (the reference's two-sphere composition); off by default. */
+    globeMask: boolean;
+    /** The dot-color ramp (the demo themes it mono-white); resolved via the ColorResolver. */
     palette: OklchStop[];
-    /** The ground color (the demo sets dark navy; default transparent). */
+    /** The ground color (the demo sets near-black; default transparent). */
     background: OklchStop | "transparent";
-    /** Pointer-warp the field (a local velocity perturbation about the cursor). */
+    /** Pointer-warp the lattice (a local displacement ripple about the cursor). */
     interactive: boolean;
     /** ONE static frame then park under `prefers-reduced-motion: reduce`. */
     respectReducedMotion: boolean;
 }
 /**
- * The warm-cream identity palette (the library default — NOT teal). A two-stop
- * warm-amber ramp over the warm-cream foreground family, resolved via the ColorResolver.
- * A consumer (the demo) themes it teal-on-navy through a PRESET, never a token edit.
+ * The warm-cream identity palette (the library default — NOT teal). A two-stop warm-amber
+ * ramp over the warm-cream foreground family, resolved via the ColorResolver. A consumer
+ * (the demo) themes it mono-white-on-near-black through a PRESET, never a token edit.
  */
 export declare const WARM_IDENTITY_PALETTE: OklchStop[];
-/** The default 6-octave Phillips wave ladder about a 35° diagonal wind. */
+/**
+ * The default LARGE-wave ladder about a 35° diagonal wind — 3 coherent octaves, λ₀ at
+ * 2.5× the domain extent (ONE dominant sweeping wave). The §1 regime inversion.
+ */
 export declare const DEFAULT_WAVE_COMPONENTS: WaveComponent[];
-/** The shipped warm-identity default config. */
+/**
+ * The shipped warm-identity default config — the SUBTLE + LARGE regime (the §1/§2
+ * topology+regime targets): a calm warm-cream lattice (~26px pitch) a slow LARGE wave
+ * sweeps through, the dots only breathing a hair off their anchors. globeMask OFF (the
+ * neutral register — the reference's soft-disc is a DEMO preset).
+ */
 export declare const DEFAULT_FLOW_CONFIG: FlowFieldConfig;

package/dist/components/custom/dot-flow-field/index.d.ts

@@ -1,5 +1,5 @@
 export { default as DotFlowField } from "./DotFlowField.vue";
 export { useDotFlowField, type DotFlowFieldHandle, type UseDotFlowFieldOptions, } from "./composables/useDotFlowField";
-export { type FlowFieldConfig, DEFAULT_FLOW_CONFIG, DEFAULT_WAVE_COMPONENTS, WARM_IDENTITY_PALETTE, MAX_PARTICLES, MAX_WAVE_COMPONENTS, MAX_FLOW_STOPS, DEFAULT_PARTICLE_COUNT, } from "./constants";
-export { type WaveComponent, type Vec2, sampleVelocity, gerstnerVelocity, curlFBM, buildWaveLadder, FLOW_GRAVITY, } from "./composables/flowField";
+export { type FlowFieldConfig, DEFAULT_FLOW_CONFIG, DEFAULT_WAVE_COMPONENTS, WARM_IDENTITY_PALETTE, MAX_PARTICLES, MAX_WAVE_COMPONENTS, MAX_FLOW_STOPS, } from "./constants";
+export { type WaveComponent, type Vec2, sampleVelocity, gerstnerVelocity, curlFBM, buildWaveLadder, gridOrigin, sampleHeight, sampleDisplacement, waveBand, FLOW_GRAVITY, FLOW_DOMAIN_HALF, } from "./composables/flowField";
 export type { OklchStop } from "../../../composables/color";

package/dist/components/custom/dot-flow-field/shaders/flow-field.compute.wgsl.d.ts

@@ -1 +1 @@
-export declare const FLOW_FIELD_COMPUTE_WGSL = "\nconst MAX_WAVE_COMPONENTS: i32 = 8;\nconst PI: f32 = 3.141592653589793;\nconst TAU: f32 = 6.283185307179586;\nconst FLOW_GRAVITY: f32 = 9.81;\nconst CURL_EPS: f32 = 0.012;\nconst FBM_ROT: mat2x2<f32> = mat2x2<f32>(0.8, 0.6, -0.6, 0.8);\n\nstruct Particle {\n  // (pos.x, pos.y, age, seed)\n  data: vec4<f32>,\n};\n\n// \u2500\u2500 Uniforms (the typed-struct source-of-truth \u2014 see uniformBridgeWGPU.ts) \u2500\u2500\nstruct FlowUniforms {\n  // p0: (uTime, uDt, uWindSpeed, uCurlStrength)\n  p0: vec4<f32>,\n  // p1: (uDomainHalf, uReseedJitter, _pad, _pad)\n  p1: vec4<f32>,\n  // ints: (uWaveCount, uParticleCount, _pad, _pad)\n  ints: vec4<i32>,\n  // each wave row: (amplitude, wavelength, directionDeg, phase)\n  waves: array<vec4<f32>, 8>,\n};\n\n@group(0) @binding(0) var<uniform> u: FlowUniforms;\n@group(0) @binding(1) var<storage, read_write> particles: array<Particle>;\n\n// \u2500\u2500 The Gerstner-sum analytic \u2207\u22A5h velocity (transcribes flowField.ts gerstnerVelocity) \u2500\u2500\nfn gerstnerVelocity(p: vec2<f32>, t: f32) -> vec2<f32> {\n  var dhdx = 0.0;\n  var dhdy = 0.0;\n  let windSpeed = u.p0.z;\n  let waveCount = u.ints.x;\n  for (var i = 0; i < MAX_WAVE_COMPONENTS; i = i + 1) {\n    if (i >= waveCount) { break; }\n    let w = u.waves[i];\n    let amplitude = w.x;\n    let wavelength = max(w.y, 1e-4);\n    let dirRad = w.z * PI / 180.0;\n    let phase = w.w;\n    let k = TAU / wavelength;\n    let d = vec2<f32>(cos(dirRad), sin(dirRad));\n    let omega = sqrt(FLOW_GRAVITY * k) * windSpeed;\n    let theta = k * (d.x * p.x + d.y * p.y) - omega * t + phase;\n    let akc = amplitude * k * cos(theta);\n    dhdx = dhdx + akc * d.x;\n    dhdy = dhdy + akc * d.y;\n  }\n  // v = \u2207\u22A5h = (\u2202h/\u2202y, \u2212\u2202h/\u2202x).\n  return vec2<f32>(dhdy, -dhdx);\n}\n\n// \u2500\u2500 Shared curl-noise basis (the WGSL twin of flow.glsl.ts curlFBM) \u2500\u2500\nfn hash21(p: vec2<f32>) -> f32 {\n  var p3 = fract(vec3<f32>(p.x, p.y, p.x) * 0.1031);\n  p3 = p3 + dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfn valueNoise(p: vec2<f32>) -> f32 {\n  let i = floor(p);\n  let f = fract(p);\n  let u2 = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  let a = hash21(i + vec2<f32>(0.0, 0.0));\n  let b = hash21(i + vec2<f32>(1.0, 0.0));\n  let c = hash21(i + vec2<f32>(0.0, 1.0));\n  let d = hash21(i + vec2<f32>(1.0, 1.0));\n  return mix(mix(a, b, u2.x), mix(c, d, u2.x), u2.y);\n}\n\nfn potentialFBM(p0: vec2<f32>) -> f32 {\n  var v = 0.0;\n  var amp = 0.5;\n  var freq = 1.0;\n  var p = p0;\n  for (var i = 0; i < 3; i = i + 1) {\n    v = v + amp * valueNoise(p * freq);\n    p = FBM_ROT * p;\n    freq = freq * 2.0;\n    amp = amp * 0.5;\n  }\n  return v;\n}\n\nfn curlFBM(p: vec2<f32>) -> vec2<f32> {\n  let dx = potentialFBM(p + vec2<f32>(CURL_EPS, 0.0)) - potentialFBM(p - vec2<f32>(CURL_EPS, 0.0));\n  let dy = potentialFBM(p + vec2<f32>(0.0, CURL_EPS)) - potentialFBM(p - vec2<f32>(0.0, CURL_EPS));\n  let g = vec2<f32>(dx, dy) / (2.0 * CURL_EPS);\n  return vec2<f32>(g.y, -g.x);\n}\n\n// The composite flow velocity (transcribes flowField.ts sampleVelocity EXACTLY).\nfn sampleVelocity(p: vec2<f32>, t: f32) -> vec2<f32> {\n  let curlStrength = u.p0.w;\n  var v = gerstnerVelocity(p, t);\n  if (curlStrength > 0.0) {\n    let c = curlFBM(vec2<f32>(p.x * 1.7 + t * 0.15, p.y * 1.7));\n    v = v + c * curlStrength;\n  }\n  return v;\n}\n\n// A particle that leaves the bounds re-spawns at a seed-derived position (so coverage\n// stays steady \u2014 the \u00A73 re-seed-at-edge rule). The seed advances each re-spawn so a\n// re-seeded particle does not pile on the previous spawn.\nfn reseed(seed: f32, age: f32) -> vec2<f32> {\n  let half = u.p1.x;\n  let r1 = hash21(vec2<f32>(seed * 71.13, age * 13.7));\n  let r2 = hash21(vec2<f32>(seed * 19.31 + 4.0, age * 7.3 + 2.0));\n  return (vec2<f32>(r1, r2) * 2.0 - 1.0) * half;\n}\n\n@compute @workgroup_size(64)\nfn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {\n  let idx = gid.x;\n  let count = u32(u.ints.y);\n  if (idx >= count) { return; } // bounds-guard the dispatch tail\n\n  let t = u.p0.x;\n  let dt = u.p0.y;\n  let half = u.p1.x;\n\n  var pr = particles[idx];\n  var pos = pr.data.xy;\n  var age = pr.data.z;\n  let seed = pr.data.w;\n\n  let v = sampleVelocity(pos, t);\n  // Forward Euler \u2014 p_{n+1} = p_n + v\u00B7dt.\n  pos = pos + v * dt;\n  age = age + dt;\n\n  // Wrap / re-seed at the domain edge (re-spawn from the seed at a fresh position).\n  if (abs(pos.x) > half || abs(pos.y) > half || age > 6.0) {\n    pos = reseed(seed, age);\n    age = 0.0;\n  }\n\n  particles[idx] = Particle(vec4<f32>(pos, age, seed));\n}\n";
+export declare const FLOW_FIELD_COMPUTE_WGSL = "\nconst MAX_WAVE_COMPONENTS: i32 = 8;\nconst PI: f32 = 3.141592653589793;\nconst TAU: f32 = 6.283185307179586;\nconst FLOW_GRAVITY: f32 = 9.81;\nconst CURL_EPS: f32 = 0.012;\nconst FBM_ROT: mat2x2<f32> = mat2x2<f32>(0.8, 0.6, -0.6, 0.8);\n\nstruct Particle {\n  // (pos.x, pos.y, height, |disp|) \u2014 the anchored-lattice live state\n  data: vec4<f32>,\n};\n\n// \u2500\u2500 Uniforms (the typed-struct source-of-truth \u2014 see uniformBridgeWGPU.ts) \u2500\u2500\nstruct FlowUniforms {\n  // p0: (uTime, uDt, uWindSpeed, uCurlStrength)\n  p0: vec4<f32>,\n  // p1: (uGridPitch, uDisplaceAmp, uSpringK, uGridCols)  \u2014 the lattice geometry\n  p1: vec4<f32>,\n  // ints: (uWaveCount, uParticleCount, uGridColsI, _pad)\n  ints: vec4<i32>,\n  // each wave row: (amplitude, wavelength, directionDeg, phase)\n  waves: array<vec4<f32>, 8>,\n};\n\n@group(0) @binding(0) var<uniform> u: FlowUniforms;\n@group(0) @binding(1) var<storage, read_write> particles: array<Particle>;\n\n// \u2500\u2500 The deterministic lattice origin (transcribes flowField.ts gridOrigin) \u2500\u2500\nfn gridOrigin(index: u32, cols: i32, pitch: f32) -> vec2<f32> {\n  let c = max(cols, 1);\n  let col = i32(index) % c;\n  let row = i32(index) / c;\n  let half = f32(c - 1) * pitch * 0.5;\n  return vec2<f32>(f32(col) * pitch - half, f32(row) * pitch - half);\n}\n\n// \u2500\u2500 The Gerstner-sum analytic \u2207\u22A5h velocity (transcribes flowField.ts gerstnerVelocity) \u2500\u2500\nfn gerstnerVelocity(p: vec2<f32>, t: f32) -> vec2<f32> {\n  var dhdx = 0.0;\n  var dhdy = 0.0;\n  let windSpeed = u.p0.z;\n  let waveCount = u.ints.x;\n  for (var i = 0; i < MAX_WAVE_COMPONENTS; i = i + 1) {\n    if (i >= waveCount) { break; }\n    let w = u.waves[i];\n    let amplitude = w.x;\n    let wavelength = max(w.y, 1e-4);\n    let dirRad = w.z * PI / 180.0;\n    let phase = w.w;\n    let k = TAU / wavelength;\n    let d = vec2<f32>(cos(dirRad), sin(dirRad));\n    let omega = sqrt(FLOW_GRAVITY * k) * windSpeed;\n    let theta = k * (d.x * p.x + d.y * p.y) - omega * t + phase;\n    let akc = amplitude * k * cos(theta);\n    dhdx = dhdx + akc * d.x;\n    dhdy = dhdy + akc * d.y;\n  }\n  // v = \u2207\u22A5h = (\u2202h/\u2202y, \u2212\u2202h/\u2202x).\n  return vec2<f32>(dhdy, -dhdx);\n}\n\n// \u2500\u2500 The scalar Gerstner HEIGHT (transcribes flowField.ts sampleHeight \u2014 the brightness\n//    driver, normalized to \u2248[-1,1] by the total amplitude so the band thresholds are\n//    wave-table-independent). \u2500\u2500\nfn sampleHeight(o: vec2<f32>, t: f32) -> f32 {\n  var h = 0.0;\n  var ampSum = 0.0;\n  let windSpeed = u.p0.z;\n  let waveCount = u.ints.x;\n  for (var i = 0; i < MAX_WAVE_COMPONENTS; i = i + 1) {\n    if (i >= waveCount) { break; }\n    let w = u.waves[i];\n    let k = TAU / max(w.y, 1e-4);\n    let dirRad = w.z * PI / 180.0;\n    let d = vec2<f32>(cos(dirRad), sin(dirRad));\n    let omega = sqrt(FLOW_GRAVITY * k) * windSpeed;\n    let theta = k * (d.x * o.x + d.y * o.y) - omega * t + w.w;\n    h = h + w.x * sin(theta);\n    ampSum = ampSum + abs(w.x);\n  }\n  return h / max(ampSum, 1e-4);\n}\n\n// \u2500\u2500 Shared curl-noise basis (the WGSL twin of flow.glsl.ts curlFBM) \u2500\u2500\nfn hash21(p: vec2<f32>) -> f32 {\n  var p3 = fract(vec3<f32>(p.x, p.y, p.x) * 0.1031);\n  p3 = p3 + dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfn valueNoise(p: vec2<f32>) -> f32 {\n  let i = floor(p);\n  let f = fract(p);\n  let u2 = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  let a = hash21(i + vec2<f32>(0.0, 0.0));\n  let b = hash21(i + vec2<f32>(1.0, 0.0));\n  let c = hash21(i + vec2<f32>(0.0, 1.0));\n  let d = hash21(i + vec2<f32>(1.0, 1.0));\n  return mix(mix(a, b, u2.x), mix(c, d, u2.x), u2.y);\n}\n\nfn potentialFBM(p0: vec2<f32>) -> f32 {\n  var v = 0.0;\n  var amp = 0.5;\n  var freq = 1.0;\n  var p = p0;\n  for (var i = 0; i < 3; i = i + 1) {\n    v = v + amp * valueNoise(p * freq);\n    p = FBM_ROT * p;\n    freq = freq * 2.0;\n    amp = amp * 0.5;\n  }\n  return v;\n}\n\nfn curlFBM(p: vec2<f32>) -> vec2<f32> {\n  let dx = potentialFBM(p + vec2<f32>(CURL_EPS, 0.0)) - potentialFBM(p - vec2<f32>(CURL_EPS, 0.0));\n  let dy = potentialFBM(p + vec2<f32>(0.0, CURL_EPS)) - potentialFBM(p - vec2<f32>(0.0, CURL_EPS));\n  let g = vec2<f32>(dx, dy) / (2.0 * CURL_EPS);\n  return vec2<f32>(g.y, -g.x);\n}\n\n// The composite flow velocity (transcribes flowField.ts sampleVelocity EXACTLY \u2014 the\n// coarse \u00D70.55 curl domain-scale, the \u00A73.2 inversion).\nfn sampleVelocity(p: vec2<f32>, t: f32) -> vec2<f32> {\n  let curlStrength = u.p0.w;\n  var v = gerstnerVelocity(p, t);\n  if (curlStrength > 0.0) {\n    let c = curlFBM(vec2<f32>(p.x * 0.55 + t * 0.15, p.y * 0.55));\n    v = v + c * curlStrength;\n  }\n  return v;\n}\n\n// The sub-cell DISPLACEMENT (transcribes flowField.ts sampleDisplacement \u2014 \u2207\u22A5h + the\n// coarse curl break, soft-clamped through tanh so the magnitude rides into [0,1)).\nfn sampleDisplacement(o: vec2<f32>, t: f32) -> vec2<f32> {\n  let v = sampleVelocity(o, t);\n  let mag = length(v);\n  if (mag < 1e-5) { return vec2<f32>(0.0, 0.0); }\n  let bounded = tanh(mag);\n  return v * (bounded / mag);\n}\n\n@compute @workgroup_size(64)\nfn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {\n  let idx = gid.x;\n  let count = u32(u.ints.y);\n  if (idx >= count) { return; } // bounds-guard the dispatch tail\n\n  let t = u.p0.x;\n  let dt = u.p0.y;\n  let pitch = u.p1.x;\n  let displaceAmp = u.p1.y;\n  let springK = u.p1.z;\n  let cols = u.ints.z;\n\n  // The PERMANENT anchor \u2014 no wrap, no re-seed (the coherence fix).\n  let o = gridOrigin(idx, cols, pitch);\n  let disp = sampleDisplacement(o, t);\n  let anchorTarget = o + disp * (displaceAmp * pitch);\n\n  var pr = particles[idx];\n  var pos = pr.data.xy;\n  // Framerate-independent critically-damped pull-to-anchor:\n  //   p \u2190 mix(p, anchorTarget, 1 - exp(-springK\u00B7dt))  (the GPGPU influence-pull pattern).\n  let k = 1.0 - exp(-springK * dt);\n  pos = mix(pos, anchorTarget, k);\n\n  let h = sampleHeight(o, t);\n  particles[idx] = Particle(vec4<f32>(pos, h, length(disp)));\n}\n";

package/dist/components/custom/dot-flow-field/shaders/flow-field.glsl.d.ts

@@ -1,20 +1,4 @@
-import type { FlowFieldConfig } from "../constants";
-import { type Vec2 } from "../composables/flowField";
-/** A CPU particle (the Canvas2D-stepped twin of the WGSL storage Particle). */
-export interface CpuParticle {
-    pos: Vec2;
-    age: number;
-    seed: number;
-}
-/**
- * The CPU particle field — alloc + seed + step + paint, over the Canvas2D substrate.
- * `step(dt, timeSec)` advects every particle through the SAME `sampleVelocity` evaluator
- * the WGSL compute kernel transcribes; `paint(ctx)` draws the soft dots. The fallback's
- * `degraded` parity is the CPU step count vs the GPU's per-particle instancing — the same
- * flow, a coarser density.
- */
-export declare function createCpuFlowField(config: FlowFieldConfig): {
-    particles: CpuParticle[];
-    step: (dt: number, timeSec: number) => void;
-    paint: (ctx: CanvasRenderingContext2D, wCss: number, hCss: number, timeSec: number, dotColor: string) => void;
-};
+/** The full-screen-triangle vertex shader (the substrate's standard fullscreen pass). */
+export declare const FLOW_FIELD_VERT_GLSL = "#version 300 es\nprecision highp float;\nin vec2 aPosition;\nout vec2 vUv;\nvoid main() {\n  vUv = aPosition;            // [-1,1]\u00B2 domain\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}";
+/** The dot-lattice + sweeping-brightness fragment source (the anchored-grid model). */
+export declare const FLOW_FIELD_FRAG_GLSL = "#version 300 es\nprecision highp float;\n\n#define PI 3.141592653589793\n#define TAU 6.283185307179586\n#define FLOW_GRAVITY 9.81\n#define CURL_EPS 0.012\n#define MAX_WAVE_COMPONENTS 8\n#define MAX_FLOW_STOPS 4\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform float uTime;\nuniform float uWindSpeed;\nuniform float uCurlStrength;\nuniform float uDomainHalf;\nuniform float uAspect;\nuniform float uGridPitchDomain;  // lattice pitch in DOMAIN units\nuniform float uDotRadiusDomain;  // dot radius in DOMAIN units\nuniform float uDisplaceAmp;      // sub-cell drift in pitch fractions\nuniform float uContrast;\nuniform float uBaseBright;\nuniform float uWaveBandCenter;\nuniform float uWaveBandWidth;\nuniform float uGlobeMask;\nuniform int   uWaveCount;\nuniform int   uStopCount;\nuniform float uHasBackground;\nuniform vec3  uBg;\nuniform vec4  uWaves[MAX_WAVE_COMPONENTS];   // (amplitude, wavelength, directionDeg, phase)\nuniform vec3  uPalette[MAX_FLOW_STOPS];      // linear-sRGB stops\n\nconst mat2 FBM_ROT = mat2(0.8, 0.6, -0.6, 0.8);\n\n\nfloat srgbToLinearCh(float c) {\n    return c <= 0.04045 ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4);\n}\nvec3 srgbToLinear(vec3 c) {\n    return vec3(srgbToLinearCh(c.r), srgbToLinearCh(c.g), srgbToLinearCh(c.b));\n}\n\nfloat linearToSrgbCh(float c) {\n    return c <= 0.0031308 ? c * 12.92 : 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\nvec3 linearToSrgb(vec3 c) {\n    return vec3(linearToSrgbCh(c.r), linearToSrgbCh(c.g), linearToSrgbCh(c.b));\n}\n\n// value.js LINEAR_SRGB_TO_LMS (constants.ts), row-major; written here as GLSL\n// columns (= the transpose) so mat3 * vec3 evaluates the row-major M\u00B7v.\nconst mat3 LINEAR_SRGB_TO_LMS = mat3(\n    0.4122214708, 0.2119034982, 0.0883024619,\n    0.5363325363, 0.6806995451, 0.2817188376,\n    0.0514459929, 0.1073969566, 0.6299787005\n);\n\n// value.js srgbToOKLab's INLINE LMS\u2192OKLab coefficients (gamut.ts lines 295-297 \u2014\n// these differ at the ~1e-9 digit from LMS_TO_OKLAB_MATRIX; use the inline ones to\n// mirror the exact value.js path), row-major \u2192 GLSL columns.\nconst mat3 LMS_TO_OKLAB = mat3(\n    0.2104542553, 1.9779984951, 0.0259040371,\n    0.7936177850, -2.4285922050, 0.7827717662,\n    -0.0040720468, 0.4505937099, -0.8086757660\n);\n\n// value.js OKLAB_TO_LMS_COEFF (constants.ts), row-major \u2192 GLSL columns. Rows:\n// l = [1, 0.3963377774, 0.2158037573], m = [1, -0.1055613458, -0.0638541728],\n// s = [1, -0.0894841775, -1.2914855480].\nconst mat3 OKLAB_TO_LMS = mat3(\n    1.0, 1.0, 1.0,\n    0.3963377774, -0.1055613458, -0.0894841775,\n    0.2158037573, -0.0638541728, -1.2914855480\n);\n\n// value.js LMS_TO_LINEAR_SRGB (constants.ts), row-major \u2192 GLSL columns.\nconst mat3 LMS_TO_LINEAR_SRGB = mat3(\n    4.0767416621, -1.2684380046, -0.0041960863,\n    -3.3077115913, 2.6097574011, -0.7034186147,\n    0.2309699292, -0.3413193965, 1.7076147010\n);\n\n// Gamma sRGB \u2192 raw OKLab (L, a, b). Mirrors value.js srgbToOKLab.\nvec3 srgbToOklab(vec3 c) {\n    vec3 lin = srgbToLinear(c);\n    vec3 lms = LINEAR_SRGB_TO_LMS * lin;\n    vec3 lmsCbrt = sign(lms) * pow(abs(lms), vec3(1.0 / 3.0));\n    return LMS_TO_OKLAB * lmsCbrt;\n}\n\n// Raw OKLab (L, a, b) \u2192 linear sRGB. Mirrors value.js oklabToLinearSRGB.\nvec3 oklabToLinearSrgb(vec3 lab) {\n    vec3 lms_ = OKLAB_TO_LMS * lab;\n    vec3 lms = lms_ * lms_ * lms_;\n    return LMS_TO_LINEAR_SRGB * lms;\n}\n\n// OKLab \u2192 OKLCh: H in RADIANS. Mirrors value.js rawOklabToOklch (which returns\n// degrees; we stay in radians and only fold to [0, 2pi)).\nvec3 oklabToOklch(vec3 lab) {\n    float C = length(lab.yz);\n    float H = atan(lab.z, lab.y);\n    if (H < 0.0) H += 2.0 * PI;\n    return vec3(lab.x, C, H);\n}\n\n// OKLCh (H radians) \u2192 OKLab. Mirrors value.js rawOklchToOklab.\nvec3 oklchToOklab(vec3 lch) {\n    return vec3(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));\n}\n\n// \u2500\u2500 The Gerstner-sum analytic \u2207\u22A5h velocity (transcribes flowField.ts gerstnerVelocity) \u2500\u2500\nvec2 gerstnerVelocity(vec2 p, float t) {\n  float dhdx = 0.0;\n  float dhdy = 0.0;\n  for (int i = 0; i < MAX_WAVE_COMPONENTS; i++) {\n    if (i >= uWaveCount) break;\n    vec4 w = uWaves[i];\n    float k = TAU / max(w.y, 1e-4);\n    float dirRad = w.z * PI / 180.0;\n    vec2 d = vec2(cos(dirRad), sin(dirRad));\n    float omega = sqrt(FLOW_GRAVITY * k) * uWindSpeed;\n    float theta = k * (d.x * p.x + d.y * p.y) - omega * t + w.w;\n    float akc = w.x * k * cos(theta);\n    dhdx += akc * d.x;\n    dhdy += akc * d.y;\n  }\n  return vec2(dhdy, -dhdx);\n}\n\n// \u2500\u2500 The scalar Gerstner HEIGHT (transcribes flowField.ts sampleHeight) \u2500\u2500\nfloat sampleHeight(vec2 o, float t) {\n  float h = 0.0;\n  float ampSum = 0.0;\n  for (int i = 0; i < MAX_WAVE_COMPONENTS; i++) {\n    if (i >= uWaveCount) break;\n    vec4 w = uWaves[i];\n    float k = TAU / max(w.y, 1e-4);\n    float dirRad = w.z * PI / 180.0;\n    vec2 d = vec2(cos(dirRad), sin(dirRad));\n    float omega = sqrt(FLOW_GRAVITY * k) * uWindSpeed;\n    float theta = k * (d.x * o.x + d.y * o.y) - omega * t + w.w;\n    h += w.x * sin(theta);\n    ampSum += abs(w.x);\n  }\n  return h / max(ampSum, 1e-4);\n}\n\n// \u2500\u2500 Shared curl-noise basis (the GLSL twin of flow.glsl.ts curlFBM) \u2500\u2500\nfloat hash21(vec2 p) {\n  vec3 p3 = fract(vec3(p.x, p.y, p.x) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\nfloat valueNoise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u2 = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  float a = hash21(i + vec2(0.0, 0.0));\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u2.x), mix(c, d, u2.x), u2.y);\n}\nfloat potentialFBM(vec2 p0) {\n  float v = 0.0;\n  float amp = 0.5;\n  float freq = 1.0;\n  vec2 p = p0;\n  for (int i = 0; i < 3; i++) {\n    v += amp * valueNoise(p * freq);\n    p = FBM_ROT * p;\n    freq *= 2.0;\n    amp *= 0.5;\n  }\n  return v;\n}\nvec2 curlFBM(vec2 p) {\n  float dx = potentialFBM(p + vec2(CURL_EPS, 0.0)) - potentialFBM(p - vec2(CURL_EPS, 0.0));\n  float dy = potentialFBM(p + vec2(0.0, CURL_EPS)) - potentialFBM(p - vec2(0.0, CURL_EPS));\n  vec2 g = vec2(dx, dy) / (2.0 * CURL_EPS);\n  return vec2(g.y, -g.x);\n}\nvec2 sampleVelocity(vec2 p, float t) {\n  vec2 v = gerstnerVelocity(p, t);\n  if (uCurlStrength > 0.0) {\n    vec2 c = curlFBM(vec2(p.x * 0.55 + t * 0.15, p.y * 0.55));\n    v += c * uCurlStrength;\n  }\n  return v;\n}\n// sub-cell displacement (transcribes flowField.ts sampleDisplacement \u2014 tanh soft-clamp).\nvec2 sampleDisplacement(vec2 o, float t) {\n  vec2 v = sampleVelocity(o, t);\n  float mag = length(v);\n  if (mag < 1e-5) return vec2(0.0);\n  return v * (tanh(mag) / mag);\n}\n\n// The sweeping bright-stripe band (transcribes flowField.ts waveBand).\nfloat waveBand(float h, float center, float width) {\n  float w = max(width, 1e-3);\n  float d = abs(h - center);\n  return 1.0 - smoothstep(0.0, w, d);\n}\n\n// The optional soft-disc globe mask (the reference's two-sphere composition).\nfloat globeMask(vec2 o, float t, float on) {\n  if (on <= 0.5) return 1.0;\n  float cx = 0.35 * sin(t * 0.13);\n  float cy = 0.28 * cos(t * 0.11);\n  float d = length(o - vec2(cx, cy));\n  return 1.0 - smoothstep(0.45, 0.75, d);\n}\n\nvec3 samplePaletteLin(float t) {\n  if (uStopCount <= 1) return uPalette[0];\n  float n = float(uStopCount);\n  float ft = clamp(t, 0.0, 1.0) * (n - 1.0);\n  int i0 = int(floor(ft));\n  int i1 = min(i0 + 1, uStopCount - 1);\n  float f = ft - float(i0);\n  vec3 lmsA = LINEAR_SRGB_TO_LMS * uPalette[i0];\n  vec3 lmsB = LINEAR_SRGB_TO_LMS * uPalette[i1];\n  vec3 labA = LMS_TO_OKLAB * (sign(lmsA) * pow(abs(lmsA), vec3(1.0 / 3.0)));\n  vec3 labB = LMS_TO_OKLAB * (sign(lmsB) * pow(abs(lmsB), vec3(1.0 / 3.0)));\n  return oklabToLinearSrgb(mix(labA, labB, f));\n}\n\nvoid main() {\n  float aspect = max(uAspect, 1e-4);\n  // Domain-space pixel (aspect-corrected x so the lattice stays square).\n  vec2 p = vec2(vUv.x * aspect, vUv.y);\n  float pitch = max(uGridPitchDomain, 1e-3);\n\n  // The nearest lattice cell ORIGIN (the anchored grid \u2014 the deterministic gridOrigin\n  // mapping, evaluated per-pixel: round p/pitch to the nearest cell center).\n  vec2 cell = floor(p / pitch + 0.5);\n  vec2 o = cell * pitch;\n\n  // The dot DRIFTS toward o + disp\u00B7displaceAmp\u00B7pitch (the same sub-cell offset the\n  // compute kernel writes \u2014 here evaluated analytically per pixel).\n  vec2 disp = sampleDisplacement(o, uTime);\n  vec2 dotCenter = o + disp * (uDisplaceAmp * pitch);\n\n  // The soft circle around the (drifted) dot center.\n  float dist = length(p - dotCenter);\n  float radius = max(uDotRadiusDomain, 1e-4);\n  float mask = 1.0 - smoothstep(radius * 0.6, radius, dist);\n  if (mask < 0.002) {\n    if (uHasBackground > 0.5) {\n      fragColor = vec4(clamp(linearToSrgb(uBg), vec3(0.0), vec3(1.0)), 1.0);\n    } else {\n      fragColor = vec4(0.0);\n    }\n    return;\n  }\n\n  // The brightness lights the dot \u2014 the SWEEPING band over the height at the anchor.\n  float h = sampleHeight(o, uTime);\n  float band = waveBand(h, uWaveBandCenter, uWaveBandWidth);\n  float bright = (uBaseBright + band * uContrast) * globeMask(o, uTime, uGlobeMask);\n  bright = clamp(bright, 0.0, 1.6);\n\n  float tone = clamp(bright, 0.0, 1.0);\n  vec3 lin = samplePaletteLin(tone) * bright;\n  vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));\n  float alpha = mask * clamp(bright * 0.8 + 0.12, 0.0, 1.0);\n\n  if (uHasBackground > 0.5) {\n    vec3 bg = clamp(linearToSrgb(uBg), vec3(0.0), vec3(1.0));\n    fragColor = vec4(mix(bg, rgb, alpha), 1.0);\n    return;\n  }\n  fragColor = vec4(rgb * alpha, alpha);\n}";

package/dist/components/custom/dot-flow-field/shaders/flow-field.render.wgsl.d.ts

@@ -1 +1 @@
-export declare const FLOW_FIELD_RENDER_WGSL = "\nconst PI: f32 = 3.141592653589793;\nconst TAU: f32 = 6.283185307179586;\nconst FLOW_GRAVITY: f32 = 9.81;\nconst MAX_WAVE_COMPONENTS: i32 = 8;\nconst MAX_FLOW_STOPS: i32 = 4;\n\nstruct Particle {\n  // (pos.x, pos.y, age, seed)\n  data: vec4<f32>,\n};\n\n// \u2500\u2500 Render uniforms (the typed-struct source-of-truth \u2014 see uniformBridgeWGPU.ts) \u2500\u2500\nstruct RenderUniforms {\n  // r0: (uTime, uWindSpeed, uCurlStrength, uDomainHalf)\n  r0: vec4<f32>,\n  // r1: (uDotSize, uDotSizeVelocity, uAspect, uVMax)\n  r1: vec4<f32>,\n  // ints: (uWaveCount, uStopCount, uParticleCount, _pad)\n  ints: vec4<i32>,\n  // bg: (background.rgb, hasBackground)\n  bg: vec4<f32>,\n  // each wave row: (amplitude, wavelength, directionDeg, phase)\n  waves: array<vec4<f32>, 8>,\n  // each palette stop: linear-sRGB rgb + _pad\n  palette: array<vec4<f32>, 4>,\n};\n\n@group(0) @binding(0) var<uniform> u: RenderUniforms;\n@group(0) @binding(1) var<storage, read> particles: array<Particle>;\n\n\nfn srgbToLinearCh(c: f32) -> f32 {\n  if (c <= 0.04045) { return c / 12.92; }\n  return pow((c + 0.055) / 1.055, 2.4);\n}\nfn srgbToLinear(c: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(srgbToLinearCh(c.r), srgbToLinearCh(c.g), srgbToLinearCh(c.b));\n}\n\nfn linearToSrgbCh(c: f32) -> f32 {\n  if (c <= 0.0031308) { return c * 12.92; }\n  return 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\nfn linearToSrgb(c: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(linearToSrgbCh(c.r), linearToSrgbCh(c.g), linearToSrgbCh(c.b));\n}\n\n// value.js LINEAR_SRGB_TO_LMS, row-major \u2192 WGSL columns (= the transpose).\nconst LINEAR_SRGB_TO_LMS: mat3x3<f32> = mat3x3<f32>(\n  0.4122214708, 0.2119034982, 0.0883024619,\n  0.5363325363, 0.6806995451, 0.2817188376,\n  0.0514459929, 0.1073969566, 0.6299787005\n);\n\n// value.js srgbToOKLab's INLINE LMS\u2192OKLab coefficients, row-major \u2192 WGSL columns.\nconst LMS_TO_OKLAB: mat3x3<f32> = mat3x3<f32>(\n  0.2104542553, 1.9779984951, 0.0259040371,\n  0.7936177850, -2.4285922050, 0.7827717662,\n  -0.0040720468, 0.4505937099, -0.8086757660\n);\n\n// value.js OKLAB_TO_LMS_COEFF, row-major \u2192 WGSL columns.\nconst OKLAB_TO_LMS: mat3x3<f32> = mat3x3<f32>(\n  1.0, 1.0, 1.0,\n  0.3963377774, -0.1055613458, -0.0894841775,\n  0.2158037573, -0.0638541728, -1.2914855480\n);\n\n// value.js LMS_TO_LINEAR_SRGB, row-major \u2192 WGSL columns.\nconst LMS_TO_LINEAR_SRGB: mat3x3<f32> = mat3x3<f32>(\n  4.0767416621, -1.2684380046, -0.0041960863,\n  -3.3077115913, 2.6097574011, -0.7034186147,\n  0.2309699292, -0.3413193965, 1.7076147010\n);\n\nfn cbrt3(v: vec3<f32>) -> vec3<f32> {\n  return sign(v) * pow(abs(v), vec3<f32>(1.0 / 3.0));\n}\n\n// Gamma sRGB \u2192 raw OKLab (L, a, b). Mirrors value.js srgbToOKLab.\nfn srgbToOklab(c: vec3<f32>) -> vec3<f32> {\n  let lin = srgbToLinear(c);\n  let lms = LINEAR_SRGB_TO_LMS * lin;\n  return LMS_TO_OKLAB * cbrt3(lms);\n}\n\n// Raw OKLab (L, a, b) \u2192 linear sRGB. Mirrors value.js oklabToLinearSRGB.\nfn oklabToLinearSrgb(lab: vec3<f32>) -> vec3<f32> {\n  let lms_ = OKLAB_TO_LMS * lab;\n  let lms = lms_ * lms_ * lms_;\n  return LMS_TO_LINEAR_SRGB * lms;\n}\n\n// OKLab \u2192 OKLCh: H in RADIANS, folded to [0, 2pi). Mirrors value.js rawOklabToOklch.\nfn oklabToOklch(lab: vec3<f32>) -> vec3<f32> {\n  let C = length(lab.yz);\n  var H = atan2(lab.z, lab.y);\n  if (H < 0.0) { H = H + 2.0 * PI; }\n  return vec3<f32>(lab.x, C, H);\n}\n\n// OKLCh (H radians) \u2192 OKLab. Mirrors value.js rawOklchToOklab.\nfn oklchToOklab(lch: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));\n}\n\n// \u2500\u2500 The Gerstner-sum velocity (the SAME transcription as the compute kernel, read here\n//    for the per-particle size + color tint \u2014 denser-where-calm). \u2500\u2500\nfn gerstnerVelocity(p: vec2<f32>, t: f32) -> vec2<f32> {\n  var dhdx = 0.0;\n  var dhdy = 0.0;\n  let windSpeed = u.r0.y;\n  let waveCount = u.ints.x;\n  for (var i = 0; i < MAX_WAVE_COMPONENTS; i = i + 1) {\n    if (i >= waveCount) { break; }\n    let w = u.waves[i];\n    let k = TAU / max(w.y, 1e-4);\n    let dirRad = w.z * PI / 180.0;\n    let d = vec2<f32>(cos(dirRad), sin(dirRad));\n    let omega = sqrt(FLOW_GRAVITY * k) * windSpeed;\n    let theta = k * (d.x * p.x + d.y * p.y) - omega * t + w.w;\n    let akc = w.x * k * cos(theta);\n    dhdx = dhdx + akc * d.x;\n    dhdy = dhdy + akc * d.y;\n  }\n  return vec2<f32>(dhdy, -dhdx);\n}\n\n// Sample the multi-stop palette (linear-sRGB stops, OKLab mix). t in [0,1].\nfn samplePaletteLin(t: f32) -> vec3<f32> {\n  let stopCount = u.ints.y;\n  if (stopCount <= 1) { return u.palette[0].rgb; }\n  let n = f32(stopCount);\n  let ft = clamp(t, 0.0, 1.0) * (n - 1.0);\n  let i0 = i32(floor(ft));\n  let i1 = min(i0 + 1, stopCount - 1);\n  let f = ft - f32(i0);\n  let labA = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * u.palette[i0].rgb);\n  let labB = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * u.palette[i1].rgb);\n  return oklabToLinearSrgb(mix(labA, labB, f));\n}\n\nstruct VSOut {\n  @builtin(position) pos: vec4<f32>,\n  @location(0) local: vec2<f32>,   // [-1,1] billboard-local coords for the soft circle\n  @location(1) tint: f32,          // velocity-derived color/alpha tint [0,1]\n  @location(2) alphaScale: f32,    // velocity-derived alpha scale (denser-where-calm)\n};\n\n@vertex\nfn vs_main(\n  @builtin(vertex_index) vi: u32,\n  @builtin(instance_index) ii: u32,\n) -> VSOut {\n  // Two-triangle quad corners in billboard-local space.\n  var corners = array<vec2<f32>, 6>(\n    vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),\n    vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),\n  );\n  let local = corners[vi];\n\n  let pr = particles[ii].data;\n  let p = pr.xy;\n  let t = u.r0.x;\n  let half = u.r0.w;\n\n  // Per-particle velocity \u2192 size + tint (denser-where-calm: |v| thins the dot).\n  let v = gerstnerVelocity(p, t);\n  let speed = length(v);\n  let vMax = max(u.r1.w, 1e-4);\n  let speedNorm = clamp(speed / vMax, 0.0, 1.0);\n  let dotSizeVel = u.r1.y;\n  // size_i = base \u00B7 (1 \u2212 speedNorm \u00B7 sizeVel) \u2014 calm = larger dot.\n  let sizeWorld = u.r1.x * (1.0 - speedNorm * dotSizeVel);\n  let alphaScale = 1.0 - speedNorm * 0.35; // calm = denser/brighter\n\n  // Position the quad at the particle in clip space. Domain [-half,half] \u2192 NDC [-1,1];\n  // the quad half-extent rides sizeWorld (in the same domain units, aspect-corrected x).\n  let aspect = u.r1.z;\n  let ndc = p / half;\n  let off = local * sizeWorld / half;\n  let offX = off.x / max(aspect, 1e-4);\n\n  var out: VSOut;\n  out.pos = vec4<f32>(ndc.x + offX, ndc.y + off.y, 0.0, 1.0);\n  out.local = local;\n  out.tint = speedNorm;\n  out.alphaScale = alphaScale;\n  return out;\n}\n\n@fragment\nfn fs_main(in: VSOut) -> @location(0) vec4<f32> {\n  // Soft circle \u2014 radial smoothstep over the billboard-local radius.\n  let r = length(in.local);\n  let feather = 0.35;\n  let mask = 1.0 - smoothstep(1.0 - feather, 1.0, r);\n  if (mask < 0.002) { return vec4<f32>(0.0); }\n\n  let lin = samplePaletteLin(in.tint);\n  let alpha = mask * in.alphaScale;\n  let rgb = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));\n  // Premultiplied-alpha output.\n  return vec4<f32>(rgb * alpha, alpha);\n}\n";
+export declare const FLOW_FIELD_RENDER_WGSL = "\nconst PI: f32 = 3.141592653589793;\nconst TAU: f32 = 6.283185307179586;\nconst MAX_FLOW_STOPS: i32 = 4;\n\nstruct Particle {\n  // (pos.x, pos.y, height, |disp|)\n  data: vec4<f32>,\n};\n\n// \u2500\u2500 Render uniforms (the typed-struct source-of-truth \u2014 see uniformBridgeWGPU.ts) \u2500\u2500\nstruct RenderUniforms {\n  // r0: (uTime, uContrast, uBaseBright, uDomainHalf)\n  r0: vec4<f32>,\n  // r1: (uDotSize, uSizePulse, uAspect, uGridPitch)\n  r1: vec4<f32>,\n  // r2: (uWaveBandCenter, uWaveBandWidth, uGlobeMask, _pad)\n  r2: vec4<f32>,\n  // ints: (uStopCount, uParticleCount, _pad, _pad)\n  ints: vec4<i32>,\n  // bg: (background.rgb, hasBackground)\n  bg: vec4<f32>,\n  // each palette stop: linear-sRGB rgb + _pad\n  palette: array<vec4<f32>, 4>,\n};\n\n@group(0) @binding(0) var<uniform> u: RenderUniforms;\n@group(0) @binding(1) var<storage, read> particles: array<Particle>;\n\n\nfn srgbToLinearCh(c: f32) -> f32 {\n  if (c <= 0.04045) { return c / 12.92; }\n  return pow((c + 0.055) / 1.055, 2.4);\n}\nfn srgbToLinear(c: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(srgbToLinearCh(c.r), srgbToLinearCh(c.g), srgbToLinearCh(c.b));\n}\n\nfn linearToSrgbCh(c: f32) -> f32 {\n  if (c <= 0.0031308) { return c * 12.92; }\n  return 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\nfn linearToSrgb(c: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(linearToSrgbCh(c.r), linearToSrgbCh(c.g), linearToSrgbCh(c.b));\n}\n\n// value.js LINEAR_SRGB_TO_LMS, row-major \u2192 WGSL columns (= the transpose).\nconst LINEAR_SRGB_TO_LMS: mat3x3<f32> = mat3x3<f32>(\n  0.4122214708, 0.2119034982, 0.0883024619,\n  0.5363325363, 0.6806995451, 0.2817188376,\n  0.0514459929, 0.1073969566, 0.6299787005\n);\n\n// value.js srgbToOKLab's INLINE LMS\u2192OKLab coefficients, row-major \u2192 WGSL columns.\nconst LMS_TO_OKLAB: mat3x3<f32> = mat3x3<f32>(\n  0.2104542553, 1.9779984951, 0.0259040371,\n  0.7936177850, -2.4285922050, 0.7827717662,\n  -0.0040720468, 0.4505937099, -0.8086757660\n);\n\n// value.js OKLAB_TO_LMS_COEFF, row-major \u2192 WGSL columns.\nconst OKLAB_TO_LMS: mat3x3<f32> = mat3x3<f32>(\n  1.0, 1.0, 1.0,\n  0.3963377774, -0.1055613458, -0.0894841775,\n  0.2158037573, -0.0638541728, -1.2914855480\n);\n\n// value.js LMS_TO_LINEAR_SRGB, row-major \u2192 WGSL columns.\nconst LMS_TO_LINEAR_SRGB: mat3x3<f32> = mat3x3<f32>(\n  4.0767416621, -1.2684380046, -0.0041960863,\n  -3.3077115913, 2.6097574011, -0.7034186147,\n  0.2309699292, -0.3413193965, 1.7076147010\n);\n\nfn cbrt3(v: vec3<f32>) -> vec3<f32> {\n  return sign(v) * pow(abs(v), vec3<f32>(1.0 / 3.0));\n}\n\n// Gamma sRGB \u2192 raw OKLab (L, a, b). Mirrors value.js srgbToOKLab.\nfn srgbToOklab(c: vec3<f32>) -> vec3<f32> {\n  let lin = srgbToLinear(c);\n  let lms = LINEAR_SRGB_TO_LMS * lin;\n  return LMS_TO_OKLAB * cbrt3(lms);\n}\n\n// Raw OKLab (L, a, b) \u2192 linear sRGB. Mirrors value.js oklabToLinearSRGB.\nfn oklabToLinearSrgb(lab: vec3<f32>) -> vec3<f32> {\n  let lms_ = OKLAB_TO_LMS * lab;\n  let lms = lms_ * lms_ * lms_;\n  return LMS_TO_LINEAR_SRGB * lms;\n}\n\n// OKLab \u2192 OKLCh: H in RADIANS, folded to [0, 2pi). Mirrors value.js rawOklabToOklch.\nfn oklabToOklch(lab: vec3<f32>) -> vec3<f32> {\n  let C = length(lab.yz);\n  var H = atan2(lab.z, lab.y);\n  if (H < 0.0) { H = H + 2.0 * PI; }\n  return vec3<f32>(lab.x, C, H);\n}\n\n// OKLCh (H radians) \u2192 OKLab. Mirrors value.js rawOklchToOklab.\nfn oklchToOklab(lch: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));\n}\n\n// The sweeping bright-stripe band (transcribes flowField.ts waveBand): a soft two-sided\n// ridge over the normalized height \u2014 1 at the band center, falling to 0 at \u00B1width.\nfn waveBand(h: f32, center: f32, width: f32) -> f32 {\n  let w = max(width, 1e-3);\n  let d = abs(h - center);\n  return 1.0 - smoothstep(0.0, w, d);\n}\n\n// The optional soft-disc globe mask \u2014 a slow Lissajous-drifting radial field (the\n// reference's two-sphere composition). OFF when uGlobeMask <= 0.5 (returns 1).\nfn globeMask(o: vec2<f32>, t: f32, on: f32) -> f32 {\n  if (on <= 0.5) { return 1.0; }\n  // a slow Lissajous center drift within the domain\n  let cx = 0.35 * sin(t * 0.13);\n  let cy = 0.28 * cos(t * 0.11);\n  let d = length(o - vec2<f32>(cx, cy));\n  // a soft disc of radius ~0.6 with a feathered edge\n  return 1.0 - smoothstep(0.45, 0.75, d);\n}\n\n// Sample the multi-stop palette (linear-sRGB stops, OKLab mix). t in [0,1].\nfn samplePaletteLin(t: f32) -> vec3<f32> {\n  let stopCount = u.ints.x;\n  if (stopCount <= 1) { return u.palette[0].rgb; }\n  let n = f32(stopCount);\n  let ft = clamp(t, 0.0, 1.0) * (n - 1.0);\n  let i0 = i32(floor(ft));\n  let i1 = min(i0 + 1, stopCount - 1);\n  let f = ft - f32(i0);\n  let labA = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * u.palette[i0].rgb);\n  let labB = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * u.palette[i1].rgb);\n  return oklabToLinearSrgb(mix(labA, labB, f));\n}\n\nstruct VSOut {\n  @builtin(position) pos: vec4<f32>,\n  @location(0) local: vec2<f32>,   // [-1,1] billboard-local coords for the soft circle\n  @location(1) bright: f32,        // band-driven brightness [0, ~1.6]\n};\n\n@vertex\nfn vs_main(\n  @builtin(vertex_index) vi: u32,\n  @builtin(instance_index) ii: u32,\n) -> VSOut {\n  // Two-triangle quad corners in billboard-local space.\n  var corners = array<vec2<f32>, 6>(\n    vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),\n    vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),\n  );\n  let local = corners[vi];\n\n  let pr = particles[ii].data;\n  let p = pr.xy;\n  let h = pr.z;\n  let dispMag = pr.w;\n  let half = u.r0.w;\n\n  // Brightness = base + band\u00B7contrast, masked by the optional globe (read at the live\n  // position \u2014 close enough to the anchor at the sub-cell cap). The band SWEEPS as h\n  // translates across the lattice.\n  let band = waveBand(h, u.r2.x, u.r2.y);\n  var bright = u.r0.z + band * u.r0.y;\n  bright = bright * globeMask(p, u.r0.x, u.r2.z);\n\n  // A subtle drift-driven size pulse (never a re-seed \u2014 the dot only breathes).\n  let sizePulse = u.r1.y;\n  let sizeWorld = u.r1.x * (1.0 + dispMag * sizePulse);\n\n  // Position the quad at the dot in clip space. Domain [-half,half] \u2192 NDC [-1,1];\n  // the quad half-extent rides sizeWorld (in domain units, aspect-corrected x).\n  let aspect = u.r1.z;\n  let ndc = p / half;\n  let off = local * sizeWorld / half;\n  let offX = off.x / max(aspect, 1e-4);\n\n  var out: VSOut;\n  out.pos = vec4<f32>(ndc.x + offX, ndc.y + off.y, 0.0, 1.0);\n  out.local = local;\n  out.bright = bright;\n  return out;\n}\n\n@fragment\nfn fs_main(in: VSOut) -> @location(0) vec4<f32> {\n  // Soft circle \u2014 radial smoothstep over the billboard-local radius.\n  let r = length(in.local);\n  let feather = 0.4;\n  let mask = 1.0 - smoothstep(1.0 - feather, 1.0, r);\n  if (mask < 0.002) { return vec4<f32>(0.0); }\n\n  // The brightness lights the dot core; the palette tints it (the warm-cream identity).\n  let bright = clamp(in.bright, 0.0, 1.6);\n  let tone = clamp(bright, 0.0, 1.0);\n  let lin = samplePaletteLin(tone) * bright;\n  // A floor alpha so even an off-band dot stays a faint lattice point (the calm grid).\n  let alpha = mask * clamp(bright * 0.8 + 0.12, 0.0, 1.0);\n  let rgb = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));\n  // Premultiplied-alpha output.\n  return vec4<f32>(rgb * alpha, alpha);\n}\n";

package/dist/components/custom/dot-matrix/DotMatrix.vue.d.ts

@@ -0,0 +1,43 @@
+import type { DotMatrixConfig } from "./constants";
+/**
+ * DotMatrix — a globe of fine warm-cream dots on a sphere SURFACE (BC.W-VIZ-DOTMATRIX —
+ * the Claude co-work "fine-dot spheres on dark" reference).
+ *
+ * The dots are laid via the Fibonacci phyllotaxis spiral (even-by-area, no pole-pinching)
+ * and depth-shaded so the globe reads as a translucent dot-SHELL — the near hemisphere
+ * brighter + larger, the rim/far side fading toward near-invisible (the shape is painted
+ * by BRIGHTNESS + DEPTH, not motion; stop the spin and it STILL reads as a sphere). It
+ * spins slowly on a gently tilted axis. WebGPU-FIRST: the render pass draws instanced
+ * billboard quads + the crisp `fwidth` SDF fragment; a WebGL2 instanced-billboard fallback
+ * draws the SAME dots where WebGPU is absent (born-GPU — no Canvas2D). It composes
+ * `useDotMatrix` → the `createGpuSubstrate` picker over the ONE canvas lifecycle leaf
+ * (offscreen-pause, live-PRM freeze, the shared pointer field) — it never bootstraps its
+ * own context.
+ *
+ * The DEFAULT palette is the warm-cream library identity over a transparent ground (the
+ * glass card shows through); the mono-warm-white-on-near-black reference + the two-globe
+ * composition are DEMO presets (presets-in-consumers — never a library token). The
+ * teal-on-navy is GONE entirely.
+ */
+type __VLS_Props = {
+    /** The full author schema (the studio's `useConfiguratorState` model). */
+    config?: DotMatrixConfig;
+    /**
+     * The declarative WCAG-2.2.2 pause seam. `v-model:paused` parks the render loop
+     * (the substrate's `manual` suspend) when `true`. Wire `<DockBackgroundToggle>`'s
+     * `@update:paused` to this `v-model`.
+     */
+    paused?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    pause: () => void;
+    resume: () => void;
+    wake: () => void;
+    renderAt: (timeSec: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:paused": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:paused"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/dot-matrix/composables/dotMatrixField.d.ts

@@ -0,0 +1,89 @@
+/** A 3-vector. */
+export interface Vec3 {
+    x: number;
+    y: number;
+    z: number;
+}
+/** A row-major 3×3 matrix (the spin matrix the WGSL transcribes column-for-column). */
+export type Mat3 = readonly [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+/** The depth-fade result — the per-dot opacity + size multipliers. */
+export interface FacingFade {
+    /** The camera-facing opacity multiplier ∈ [facingLo, facingLo+facingHi]. */
+    opacity: number;
+    /** The depth-of-field size taper ∈ [0.6, 1.0]. */
+    size: number;
+    /** The raw facing term ∈ [0,1] (1 = dead-front, 0 = dead-back). */
+    facing: number;
+}
+/** The golden ratio φ = (1+√5)/2 ≈ 1.6180339887. */
+export declare const GOLDEN_RATIO: number;
+/** The golden angle = 2π/φ = π·(3−√5) ≈ 2.39996 rad ≈ 137.508° (the irrational azimuth). */
+export declare const GOLDEN_ANGLE: number;
+/**
+ * The Fibonacci-phyllotaxis position for dot `i` of `N` on the UNIT sphere — the
+ * area-centered half-offset variant (admits ANY `N`, the cheaper no-`acos` `y = cos(polar)`
+ * form). The WGSL `instance_index → unit position` mapping transcribes this EXACTLY (the
+ * F3 round-trip anchor):
+ *
+ *   y     = 1 − 2·(i + 0.5) / N      // y ∈ (−1,1), the cos(polar) — even by AREA
+ *   r     = sqrt(1 − y²)             // ring radius at that latitude
+ *   theta = i · goldenAngle          // the golden-angle azimuth spiral
+ *   pos   = (cos(theta)·r, y, sin(theta)·r)
+ *
+ * This beats lat-long (`theta = 2πi/cols, phi = πj/rows`, which clusters at the poles →
+ * banded rings) because the irrational golden ratio gives near-equal AREA with no
+ * resonance gaps (extremelearning.com.au; arXiv 0912.4540).
+ */
+export declare function fibonacciDot(i: number, n: number): Vec3;
+/** The opacity floor (a dead-back dot stays a faint shell point, never fully gone). */
+export declare const FACING_LO = 0.15;
+/** The opacity facing-gain (dead-front lifts to facingLo + facingHi). */
+export declare const FACING_HI = 0.85;
+/** The size depth-of-field taper base (a dead-back dot is 0.6× the dead-front size). */
+export declare const SIZE_TAPER_BASE = 0.6;
+/** The size depth-of-field taper gain. */
+export declare const SIZE_TAPER_GAIN = 0.4;
+/**
+ * The §T2 depth-fade — the part that makes the dot field READ as a sphere. After the spin,
+ * modulate per-dot opacity + size by the rotated-normal's camera-facing-ness (a SOFT
+ * falloff, NOT a binary back-face cull — the soft fade is what reads as a translucent
+ * shell vs a flat disc). For a sphere centered at origin the surface normal IS the
+ * normalized dot position, so the facing term is the rotated-normal's z:
+ *
+ *   facing  = clamp(n.z · 0.5 + 0.5, 0, 1)            // 1 = dead-front, 0 = dead-back
+ *   opacity = facingLo + facingHi · facing            // 0.15 + 0.85·facing
+ *   size    = 0.6 + 0.4 · facing                      // the DOF dot-size taper
+ *
+ * `depthFade` ∈ [0,1] scales the facing GAIN (depthFade=1 → the full 0.85 shell read;
+ * depthFade=0 → flat uniform opacity, the no-shell degenerate the gate's clause-6 flat-
+ * uniform bite catches).
+ */
+export declare function facingFade(normal: Vec3, depthFade?: number): FacingFade;
+/**
+ * The spin matrix at time `t` — a slow Y-rotation about a gently TILTED axis (a tilted
+ * globe reads more alive than a dead-vertical spin). The axis is the Y-axis tilted by
+ * `axisTilt` (radians) toward +x; the rotation angle is `rate · t`. Returns a row-major
+ * mat3 the WGSL transcribes column-for-column (mat3x3 is column-major → the transpose is
+ * written as the SAME columns). A fixed `renderAt(t)` drives it deterministically for the
+ * π capture (the spin reads at the same `t` on every host).
+ */
+export declare function spinMatrix(t: number, axisTilt: number, rate: number): Mat3;
+/** Apply a row-major mat3 to a Vec3 (the rotated surface normal `n = spin · unitPos`). */
+export declare function applyMat3(m: Mat3, v: Vec3): Vec3;
+/**
+ * The breathing radius scalar at time `t` — a gentle `R·(1 + breathDepth·sin(t·breathRate))`
+ * pulse, the calmest non-dead register (`breathDepth ≈ 0.02`, far below the dot-flow sweep).
+ * Returns the multiplier on the base radius (1 at rest when `depth=0`). The WGSL transcribes
+ * the SAME `1 + depth·sin(t·rate)` form.
+ */
+export declare function breathRadius(t: number, depth: number, rate: number): number;

package/dist/components/custom/dot-matrix/composables/uniformBridgeWGPU.d.ts

@@ -0,0 +1,52 @@
+import type { OklchStop } from "../../../../composables/color";
+import { type DotMatrixConfig } from "../constants";
+/** The byte size of one dot in the instance buffer (vec4<f32> = unitPos.xyz + sphereIdx). */
+export declare const DOT_BYTES = 16;
+/** The per-sphere offset of the SECOND globe (the reference two-globe composition). */
+export declare const SPHERE2_OFFSET: {
+    readonly x: 0.62;
+    readonly y: 0.32;
+};
+/** The per-sphere scale of the SECOND globe (a smaller satellite). */
+export declare const SPHERE2_SCALE = 0.46;
+/** The transient pointer state the interactive arm writes (closed over, never the config). */
+export interface DotPointerState {
+    /** Normalized-host pointer (0..1) → NDC offset; (0.5,0.5) is screen center. */
+    x: number;
+    y: number;
+    /** 1 while the pointer is over the host, 0 at rest (decays the parallax/dimple). */
+    active: number;
+    /** The repel/attract sign × strength (the dimple direction · velocity scale). */
+    push: number;
+    /** The accel-burst brightness/scale bloom 0..1 (the flick term). */
+    bloom: number;
+}
+/** A fresh resting pointer state. */
+export declare function restingPointer(): DotPointerState;
+export declare const DOT_RENDER_UNIFORM_BYTES: number;
+export interface DotUniformScratch {
+    buffer: ArrayBuffer;
+    f32: Float32Array;
+    i32: Int32Array;
+}
+export declare function createDotRenderScratch(): DotUniformScratch;
+/**
+ * Build the STATIC Fibonacci-phyllotaxis instance buffer — `dotCount` dots per sphere,
+ * each `(unitPos.xyz, sphereIdx)`. The second sphere's dots are CONCATENATED with
+ * `sphereIdx = 1` so the shader resolves the per-sphere offset/scale. Built ONCE (the
+ * layout is time-invariant; the spin + depth-fade are per-frame). The WGSL
+ * `instance_index → unit position` mapping reads this buffer (it does NOT re-derive the
+ * phyllotaxis on the GPU — the JS+GPU agree by construction).
+ */
+export declare function buildDotsBuffer(config: DotMatrixConfig): Float32Array;
+/** The total dot instance count for a config (per-sphere × spheres). */
+export declare function dotInstanceCount(config: DotMatrixConfig): number;
+/**
+ * Pack the per-frame render uniforms in place. `timeSec` drives the spin matrix + the
+ * breathing; `pointer` carries the interactive parallax/dimple/bloom; `palette` is the
+ * live ColorResolver stops (re-read each frame so a studio edit reaches the buffer).
+ */
+export declare function packDotRenderUniforms(scratch: DotUniformScratch, config: DotMatrixConfig, timeSec: number, resolutionPx: {
+    w: number;
+    h: number;
+}, dpr: number, pointer: DotPointerState, breathRadius: number, palette: OklchStop[]): DotUniformScratch;

package/dist/components/custom/dot-matrix/composables/useDotMatrix.d.ts

@@ -0,0 +1,34 @@
+import { type Ref } from "vue";
+import { type GpuBackend } from "../../../../composables/glass/webgpu/useGpuSubstrate";
+import type { OklchStop } from "../../../../composables/color";
+import type { DotMatrixConfig } from "../constants";
+export interface UseDotMatrixOptions {
+    config: DotMatrixConfig;
+    /** Resolve the dot-color palette as OKLCh (the demo themes it; default warm-identity). */
+    getPalette: () => OklchStop[];
+    /** `"capture"` → renderAt-only (the deterministic π capture path). Default `"live"`. */
+    mode?: "live" | "capture";
+}
+/** The uniform handle a consumer wires its lifecycle against (backend-agnostic). */
+export interface DotMatrixHandle {
+    /** The resolved backend (`"webgpu"` where supported, else the WebGL2 fallback). */
+    readonly backend: GpuBackend;
+    /** Park the loop (the WCAG-2.2.2 pause seam — `DockBackgroundToggle` wires this). */
+    pause: () => void;
+    /** Re-arm the loop. */
+    resume: () => void;
+    /** Re-arm a parked loop on demand (a pointer/setter that re-introduced motion). */
+    wake: () => void;
+    /** Draw one frame out-of-loop (capture / thumbnail). */
+    renderAt: (timeSec: number) => void;
+    /** The live `prefers-reduced-motion: reduce` state. */
+    readonly reducedMotion: boolean;
+    /** Tear down the renderer + release GPU/GL resources. */
+    dispose: () => void;
+}
+/**
+ * Mount the dot-matrix renderer on `canvasRef`. The WebGPU primary runs the instanced-
+ * billboard render pass over the static phyllotaxis dots buffer; the WebGL2 fallback draws
+ * the SAME instanced billboards (the ONE math source). Returns the uniform lifecycle handle.
+ */
+export declare function useDotMatrix(canvasRef: Ref<HTMLCanvasElement | null>, options: UseDotMatrixOptions): DotMatrixHandle;

package/dist/components/custom/dot-matrix/composables/useDotSphere.d.ts

@@ -0,0 +1,27 @@
+import type { WebGPUCanvasFrame } from "../../../../composables/glass/webgpu/useWebGPUCanvas";
+import type { WebGLCanvasFrame } from "../../../../composables/glass/webgl/useWebGLCanvas";
+import type { OklchStop } from "../../../../composables/color";
+import { type DotMatrixConfig } from "../constants";
+import { restingPointer, type DotPointerState } from "./uniformBridgeWGPU";
+export interface DotSetupDeps {
+    canvas: HTMLCanvasElement;
+    config: DotMatrixConfig;
+    /** The resolved (ColorResolver) palette stops as OKLCh — re-read each frame. */
+    getPalette: () => OklchStop[];
+    /** The live transient pointer state (the interactive parallax/dimple/bloom). */
+    pointer: DotPointerState;
+    /** Demand-gate (the renderer's quiescence layer — substrate-agnostic). */
+    shouldContinue: () => boolean;
+    /** The per-frame pointer hook — advances the shared field (the no-own-rAF discipline). */
+    onFrame?: (timeSec: number) => void;
+}
+/** Build the dot-matrix `setupWGPU(device, context, format)` callback. */
+export declare function createDotWGPUSetup(deps: DotSetupDeps): (device: GPUDevice, context: GPUCanvasContext, format: GPUTextureFormat) => WebGPUCanvasFrame;
+/**
+ * Build the `setupGL(gl)` callback the `createGpuSubstrate` WebGL2 path invokes — the SAME
+ * instanced billboards via `gl.drawArraysInstanced`. It seeds the SAME JS phyllotaxis dot
+ * buffer the WGSL primary uses + splices the SHARED GLSL color chunk (the ONE color source
+ * → no drift between backends). No Canvas2D anywhere (§E).
+ */
+export declare function createDotGLSetup(deps: DotSetupDeps): (gl: WebGL2RenderingContext) => WebGLCanvasFrame;
+export { restingPointer };