@mkbabb/glass-ui 4.0.1 → 4.1.0

package/dist/components/custom/dot-matrix/constants.d.ts

@@ -0,0 +1,58 @@
+import type { OklchStop } from "../../../composables/color";
+/** Compile-time dot cap — mirrors the WGSL/GLSL instance-buffer array bound. */
+export declare const MAX_DOTS = 4000;
+/** Compile-time palette cap — mirrors the WGSL `MAX_DOT_STOPS` #define. */
+export declare const MAX_DOT_STOPS = 4;
+/** Pointer interaction mode — a repel pushes dots off the surface, attract pulls them in. */
+export type DotPointerMode = "repel" | "attract";
+/**
+ * The full author schema — the studio's `useConfiguratorState` model. Every field is a
+ * tunable the demo configurator drives; the composable resolves it into the uniform table.
+ * A NEW schema (no prior `dot-matrix`, no MIGRATION row).
+ */
+export interface DotMatrixConfig {
+    /** Dot count on the sphere surface (500–MAX_DOTS; the reference's fine field). */
+    dotCount: number;
+    /** Sphere radius as a fraction of the view min-dimension (0.2–0.9). */
+    radius: number;
+    /** Base dot billboard radius in px @ 1× (DPR-aware → crisp). */
+    dotSize: number;
+    /** The subtle resting opacity (0–1). */
+    baseOpacity: number;
+    /** Depth-fade strength (0–1; high = strong translucent-shell read). */
+    depthFade: number;
+    /** The slow dignified Y-spin in rad/s (0–0.3). */
+    rotationSpeed: number;
+    /** The rotation-axis tilt in degrees (a tilted globe reads more alive; ~23°). */
+    axisTilt: number;
+    /** The globe count (1 default; the reference two-globe composition is 2). */
+    spheres: 1 | 2;
+    /** The sub-perceptual breathing radius-pulse depth (0 default; demo 0.02). */
+    breathing: number;
+    /** The dot-color ramp (the demo themes it mono-white); resolved via the ColorResolver. */
+    palette: OklchStop[];
+    /** The ground color (the demo sets near-black; default transparent). */
+    background: OklchStop | "transparent";
+    /** Pointer parallax + repel + accel-burst (the §T7 interaction). */
+    interactive: boolean;
+    /** repel ↔ attract (the dimple direction). */
+    pointerMode: DotPointerMode;
+    /** The pointer-parallax depth (0–0.3; the screen-center tracks the cursor). */
+    parallax: number;
+    /** 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, mirroring the dot-flow `WARM_IDENTITY_PALETTE`.
+ * A consumer (the demo) themes it mono-warm-white-on-near-black through a PRESET, never a
+ * token edit.
+ */
+export declare const WARM_IDENTITY_PALETTE: OklchStop[];
+/**
+ * The shipped warm-identity default config — the §T5 SUBTLE + CALM register: ONE calm
+ * warm-cream globe of fine dots on a transparent ground (the glass card shows through),
+ * slowly rotating on a tilted axis. The depth-fade carries the sphere read; the second
+ * sphere + the breathing + the near-black ground are DEMO presets (presets-in-consumers).
+ */
+export declare const DEFAULT_DOT_MATRIX_CONFIG: DotMatrixConfig;

package/dist/components/custom/dot-matrix/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DotMatrix } from "./DotMatrix.vue";
+export { useDotMatrix, type DotMatrixHandle, type UseDotMatrixOptions, } from "./composables/useDotMatrix";
+export { type DotMatrixConfig, type DotPointerMode, DEFAULT_DOT_MATRIX_CONFIG, WARM_IDENTITY_PALETTE, MAX_DOTS, MAX_DOT_STOPS, } from "./constants";
+export { type Vec3, type Mat3, type FacingFade, fibonacciDot, facingFade, spinMatrix, applyMat3, breathRadius, GOLDEN_RATIO, GOLDEN_ANGLE, FACING_LO, FACING_HI, SIZE_TAPER_BASE, SIZE_TAPER_GAIN, } from "./composables/dotMatrixField";
+export type { OklchStop } from "../../../composables/color";

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

@@ -0,0 +1,4 @@
+/** The instanced-billboard VERTEX shader (gl_VertexID quad + instanced dot attribute). */
+export declare const DOT_MATRIX_VERT_GLSL = "#version 300 es\nprecision highp float;\n\n#define MAX_DOT_STOPS 4\n#define GOLDEN_ANGLE 2.399963229728653\n\n// The static quad corner (6 verts: two triangles) + the instanced per-dot data.\nin vec2 aCorner;          // billboard-local [-1,1]\nin vec4 aDot;             // (unitPos.xyz, sphereIdx) \u2014 instanced (divisor 1)\n\nuniform vec4 uU0;         // (resX, resY, dpr, time)\nuniform vec4 uU1;         // (radius, dotSize, baseOpacity, aspect)\nuniform vec4 uU2;         // (facingLo, facingHi, sizeLo, sizeHi)\nuniform vec4 uU3;         // (parallax, pointerPush, pointerBloom, pointerActive)\nuniform vec4 uU4;         // (pointerX, pointerY, sphere2Scale, breathRadius)\nuniform vec4 uU5;         // (sphere2OffsetX, sphere2OffsetY, hasBackground, _pad)\nuniform mat3 uSpin;       // the slow tilted Y-rotation\n\nout vec2 vLocal;          // [-1,1] billboard-local for the SDF circle\nout float vBright;        // facing-driven brightness\nout float vAlpha;         // facing-driven opacity\nout float vTone;          // palette tone (0 = bright cream near-front, 1 = amber rim)\n\nfloat facingTerm(vec3 n) {\n  return clamp(n.z * 0.5 + 0.5, 0.0, 1.0);   // 1 = dead-front\n}\n\nvoid main() {\n  vec3 unitPos = aDot.xyz;\n  float sphereIdx = aDot.w;\n\n  float breath = uU4.w;\n  float sphereScale = uU1.x;\n  vec2 sphereOffset = vec2(0.0);\n  if (sphereIdx > 0.5) {\n    sphereScale = uU1.x * uU4.z;\n    sphereOffset = vec2(uU5.x, uU5.y);\n  }\n\n  // The rotated surface normal = spin \u00B7 unitPos (the \u00A7T2 facing source).\n  vec3 n = uSpin * unitPos;\n  float facing = facingTerm(n);\n\n  // Pointer-repel/attract dimple (the \u00A7T7 local perturbation).\n  float pAct = uU3.w;\n  vec2 pointerNdc = vec2(uU4.x * 2.0 - 1.0, 1.0 - uU4.y * 2.0);\n  vec2 screenN = n.xy * sphereScale + sphereOffset;\n  vec2 toPointer = screenN - pointerNdc;\n  float pd = length(toPointer);\n  float dimple = exp(-pd * pd * 18.0) * uU3.y * pAct;\n  vec2 lift = n.xy * dimple;\n\n  vec2 parallaxOff = pointerNdc * uU3.x * pAct;\n  vec2 center2d = n.xy * sphereScale * breath + sphereOffset + lift + parallaxOff;\n\n  // The depth-of-field size taper + the accel-burst bloom scale.\n  float sizeTaper = uU2.z + uU2.w * facing;\n  float burstScale = 1.0 + uU3.z * exp(-pd * pd * 12.0);\n  float dotR = uU1.y * sizeTaper * burstScale;\n\n  float offX = aCorner.x * dotR;\n  float offY = aCorner.y * dotR;\n\n  float facingOpacity = uU2.x + uU2.y * facing;\n  float burstBright = 1.0 + uU3.z * 0.8 * exp(-pd * pd * 12.0);\n\n  vLocal = aCorner;\n  vBright = facingOpacity * burstBright;\n  vAlpha = clamp(uU1.z * facingOpacity * burstBright, 0.0, 1.0);\n  // The palette tone reads the DEPTH (near-front bright cream \u2192 rim amber) so the depth-shell\n  // reads tonally on BOTH a dark AND a light ground.\n  vTone = clamp(1.0 - facing, 0.0, 1.0);\n\n  // The whole sphere + quad is built in a SQUARE space (so the globe stays circular); the\n  // final clip-space x divides by aspect so a wide canvas does not squash it into an ellipse.\n  float aspect = max(uU1.w, 1e-4);\n  gl_Position = vec4((center2d.x + offX) / aspect, center2d.y + offY, 0.0, 1.0);\n}";
+/** The crisp fwidth-SDF dot fragment (the ONE AA canon; splices the shared color chunk). */
+export declare const DOT_MATRIX_FRAG_GLSL = "#version 300 es\nprecision highp float;\n\n#define MAX_DOT_STOPS 4\n\nin vec2 vLocal;\nin float vBright;\nin float vAlpha;\nin float vTone;\nout vec4 fragColor;\n\nuniform vec4 uBg;                       // (background.rgb, hasBackground)\nuniform int  uStopCount;\nuniform vec3 uPalette[MAX_DOT_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\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  // The crisp fwidth-smoothstep SDF circle (the ONE AA canon; ~1px band at any DPR).\n  float d = length(vLocal) - 1.0;\n  float aa = max(fwidth(d), 1e-4);\n  float coverage = 1.0 - smoothstep(-aa, aa, d);\n  if (coverage < 0.002) discard;\n\n  vec3 lin = samplePaletteLin(vTone) * clamp(vBright, 0.0, 1.6);\n  float alpha = vAlpha * coverage;\n  vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));\n  fragColor = vec4(rgb * alpha, alpha);\n}";

package/dist/components/custom/dot-matrix/shaders/dot-matrix.wgsl.d.ts

@@ -0,0 +1 @@
+export declare const DOT_MATRIX_WGSL = "\nconst PI: f32 = 3.141592653589793;\nconst TAU: f32 = 6.283185307179586;\nconst MAX_DOT_STOPS: i32 = 4;\n// The golden-angle constant (transcribes dotMatrixField.ts GOLDEN_ANGLE = PI*(3-sqrt5)).\nconst GOLDEN_ANGLE: f32 = 2.399963229728653;\n\nstruct Dot {\n  // (unitPos.xyz, sphereIdx)\n  data: vec4<f32>,\n};\n\n// \u2500\u2500 Render uniforms (the typed-struct source-of-truth \u2014 see uniformBridgeWGPU.ts) \u2500\u2500\nstruct Uniforms {\n  // u0: (uResolutionX, uResolutionY, uDpr, uTime)\n  u0: vec4<f32>,\n  // u1: (uRadius, uDotSize, uBaseOpacity, uAspect)\n  u1: vec4<f32>,\n  // u2: (uFacingLo, uFacingHi, uSizeLo, uSizeHi)\n  u2: vec4<f32>,\n  // u3: (uParallax, uPointerPush, uPointerBloom, uPointerActive)\n  u3: vec4<f32>,\n  // u4: (uPointerX, uPointerY, uSphere2Scale, uBreathRadius)\n  u4: vec4<f32>,\n  // u5: (uSphere2OffsetX, uSphere2OffsetY, uHasBackground, _pad)\n  u5: vec4<f32>,\n  spin: mat3x3<f32>,\n  // ints: (uStopCount, uDotCount, uSpheres, _pad)\n  ints: vec4<i32>,\n  // bg: (background.rgb, _pad)\n  bg: vec4<f32>,\n  palette: array<vec4<f32>, 4>,\n};\n\n@group(0) @binding(0) var<uniform> u: Uniforms;\n@group(0) @binding(1) var<storage, read> dots: array<Dot>;\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 \u00A7T2 depth-fade (transcribes dotMatrixField.ts facingFade): the rotated-normal's z\n// \u2192 a SOFT facing term \u2192 opacity + size ramps. NOT a binary back-face cull.\nfn facingTerm(n: vec3<f32>) -> f32 {\n  return clamp(n.z * 0.5 + 0.5, 0.0, 1.0);   // 1 = dead-front, 0 = dead-back\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 SDF circle\n  @location(1) bright: f32,        // facing-driven brightness [0, ~1.6]\n  @location(2) alpha: f32,         // facing-driven opacity\n  @location(3) tone: f32,          // palette tone (0 = bright cream near-front, 1 = amber rim)\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 (camera-facing by construction).\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 dot = dots[ii].data;\n  var unitPos = dot.xyz;          // the STATIC phyllotaxis position (JS-computed)\n  let sphereIdx = dot.w;\n\n  // The breathing radius pulse (transcribes breathRadius \u2014 1 at rest).\n  let breath = u.u4.w;\n  // Per-sphere offset/scale (the reference two-globe composition).\n  var sphereScale = u.u1.x;       // uRadius\n  var sphereOffset = vec2<f32>(0.0, 0.0);\n  if (sphereIdx > 0.5) {\n    sphereScale = u.u1.x * u.u4.z;             // uRadius * uSphere2Scale\n    sphereOffset = vec2<f32>(u.u5.x, u.u5.y);  // uSphere2Offset\n  }\n\n  // The rotated surface NORMAL = spin \u00B7 unitPos (the \u00A7T2 facing source). The spin matrix\n  // is the slow tilted Y-rotation (dotMatrixField.ts spinMatrix).\n  let n = u.spin * unitPos;\n  let facing = facingTerm(n);\n\n  // Pointer-repel/attract \u2014 a soft Gaussian dimple lifts the dot radially off the surface\n  // near the cursor (the \u00A7T7 local perturbation). The pointer is in NDC (-1..1); a repel\n  // (push>0) pushes the dot OUT, an attract (push<0) pulls IN. Velocity scales the push.\n  let pAct = u.u3.w;\n  let pointerNdc = vec2<f32>(u.u4.x * 2.0 - 1.0, 1.0 - u.u4.y * 2.0);\n  let screenN = n.xy * sphereScale + sphereOffset;\n  let toPointer = screenN - pointerNdc;\n  let pd = length(toPointer);\n  let dimple = exp(-pd * pd * 18.0) * u.u3.y * pAct;   // soft Gaussian falloff \u00D7 push\n  // Lift along the rotated normal's screen projection (radially through the shell).\n  let lift = n.xy * dimple;\n\n  // Project the rotated normal to the screen (orthographic \u2014 the \u00A7T5 flat hero look),\n  // scaled by the sphere radius + the breathing, plus the per-sphere offset + the dimple\n  // lift + the pointer-parallax screen-center track.\n  let parallaxOff = (pointerNdc) * u.u3.x * pAct;       // uParallax \u00B7 pointer \u00B7 active\n  let center2d = n.xy * sphereScale * breath + sphereOffset + lift + parallaxOff;\n\n  // The depth-of-field dot-size taper (transcribes facingFade size): 0.6 + 0.4\u00B7facing,\n  // plus the accel-burst bloom scale near the cursor.\n  let sizeTaper = u.u2.z + u.u2.w * facing;\n  let burstScale = 1.0 + u.u3.z * exp(-pd * pd * 12.0);\n  let dotR = u.u1.y * sizeTaper * burstScale;            // uDotSize \u00B7 taper \u00B7 burst\n\n  let offX = local.x * dotR;\n  let offY = local.y * dotR;\n\n  // The opacity ramp (transcribes facingFade opacity): facingLo + facingHi\u00B7facing, scaled\n  // by the base opacity + a faint burst brightness lift near the cursor.\n  let facingOpacity = u.u2.x + u.u2.y * facing;          // facingLo + facingHi\u00B7facing\n  let burstBright = 1.0 + u.u3.z * 0.8 * exp(-pd * pd * 12.0);\n\n  // The whole sphere + quad is built in a SQUARE space (so the globe stays circular); the\n  // final clip-space x divides by aspect so a wide canvas does not squash it into an\n  // ellipse (aspect \u2265 1 \u2192 x shrinks; aspect < 1 \u2192 x grows). This keeps the dot quads round\n  // AND the sphere circular in PIXELS regardless of the canvas aspect.\n  let aspect = max(u.u1.w, 1e-4);\n  let clipX = (center2d.x + offX) / aspect;\n  let clipY = center2d.y + offY;\n\n  var out: VSOut;\n  out.pos = vec4<f32>(clipX, clipY, 0.0, 1.0);\n  out.local = local;\n  out.bright = facingOpacity * burstBright;\n  out.alpha = clamp(u.u1.z * facingOpacity * burstBright, 0.0, 1.0);\n  // The palette tone reads the DEPTH (not the opacity): the near-front samples the bright\n  // cream stop[0] (tone 0), the rim/far the darker amber stop (tone \u2192 1), so the depth-shell\n  // reads TONALLY on BOTH a dark AND a light ground (a light-ground globe can't lean on the\n  // opacity fade alone \u2014 over a light card a faded dot reads brighter, inverting the shell).\n  out.tone = clamp(1.0 - facing, 0.0, 1.0);\n  return out;\n}\n\n@fragment\nfn fs_main(in: VSOut) -> @location(0) vec4<f32> {\n  // The crisp fwidth-smoothstep SDF circle (the ONE AA canon \u2014 the band is ~1px wide at\n  // any DPR/zoom, so fine sub-2px dots stay crisp). d = |uv| - 1; aa = fwidth(d).\n  let d = length(in.local) - 1.0;\n  let aa = max(fwidth(d), 1e-4);\n  let coverage = 1.0 - smoothstep(-aa, aa, d);\n  if (coverage < 0.002) { discard; }\n\n  // The palette tints the dot by DEPTH (near-front cream \u2192 rim amber); the brightness lights\n  // the core. The near hemisphere reads as the bright warm-cream stop, the rim/far fading to\n  // the darker amber \u2014 the translucent dot-shell on both grounds.\n  let lin = samplePaletteLin(in.tone) * clamp(in.bright, 0.0, 1.6);\n  let alpha = in.alpha * coverage;\n  let rgb = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));\n  // Premultiplied-alpha output (the translucent dot-shell additive over the clear).\n  return vec4<f32>(rgb * alpha, alpha);\n}\n";

package/dist/components/custom/easing/EasingPicker.vue.d.ts

@@ -20,11 +20,11 @@ type __VLS_ModelProps = {
     modelValue?: EasingPickerValue;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_73: {
+declare var __VLS_78: {
     value: EasingPickerValue;
 };
 type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_73) => any;
+    footer?: (props: typeof __VLS_78) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: EasingPickerValue | undefined) => any;

package/dist/components/custom/easing/composables/useEasingPicker.d.ts

@@ -47,6 +47,11 @@ export interface UseEasingPickerReturn {
     easingFn: ComputedRef<EasingFn>;
     /** The complete re-parseable readout literal for the active mode. */
     readout: ComputedRef<string>;
+    /** Whether the steps-mode readout round-trips through value.js `parseSteps`
+     *  back to the live (n, term) — the boundary-law proof that the painted
+     *  staircase IS a re-parseable value.js literal, not a hand-rolled string
+     *  the catalogue cannot read back. `true` in bezier mode (no steps literal). */
+    reparseOk: ComputedRef<boolean>;
     /** The full v-model payload (mode + css + fn + raw params). */
     value: ComputedRef<EasingPickerValue>;
     /** Two SVG-space handle coords `[{x,y},{x,y}]` (bezier mode). */

package/dist/components/custom/expandable-container/ExpandableContainer.vue.d.ts

@@ -45,9 +45,20 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     expandLabel: string;
     collapseLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    'expand-trigger'?: (props: {
+        expand: () => void;
+        label: string;
+    }) => any;
+} & {
     default?: (props: {
         fullscreen: boolean;
     }) => any;
+} & {
+    'fullscreen-chrome'?: (props: {
+        collapse: () => void;
+        label: string;
+        fullscreen: boolean;
+    }) => any;
 } & {
     default?: (props: {
         fullscreen: boolean;

package/dist/components/custom/fourier-field/FourierField.vue.d.ts

@@ -1,61 +1,54 @@
-import type { ColorResolver } from "../../../composables/color";
+import type { ColorResolver, OklchStop } from "../../../composables/color";
+import { type BasisComponent } from "./math";
+import type { FourierFieldConfig } from "./constants";
 /**
- * FourierField — a Fourier epicycle field on a Canvas2D surface, a sibling
- * primitive to Aurora and GooBlob. A seeded elliptic spectrum reconstructs a
- * slow, never-ending closed curve via the inverse DFT; a fading comet trail
- * chases the curve's head, and (in the `hero` preset) the nested epicycle
- * circles and arms draw underneath in a harmonious second hue. It composes the
- * `useCanvas2D` substrate, so it inherits the offscreen / tab-hidden /
- * reduced-motion freeze for free — no hand-rolled RAF-park.
+ * FourierField — a Fourier epicycle field on the GPU substrate (BC.W-VIZ-FOURIER), a
+ * sibling primitive to Aurora, GooBlob, and DotFlowField. A chain of rotating circles
+ * stacked tip-to-tail draws the reconstructing partial-sum curve; a glowing comet head
+ * leads the fading trail. WebGPU-FIRST: the compute pass writes the partial-sum curve +
+ * the epicycle chain tips, the fullscreen-fragment render pass composites the SDF field; a
+ * WebGL2 GLSL twin is the genuinely-absent-tail fallback (the §E "WebGPU everywhere"
+ * mandate — the Canvas2D renderer is RETIRED). It composes `useFourierField` → the
+ * `createGpuSubstrate` picker over the ONE canvas lifecycle leaf (offscreen-pause, live-PRM
+ * freeze, consumer-owned DPR) and the SHARED `usePointerVelocityField` (the pointer SCRUBS
+ * the reconstruction).
  *
- * Color resolves through the same INJECTED `colorResolver` seam as GooBlob: the
- * field paints the gamma-sRGB triple it returns. The prop is REQUIRED — pass
- * `defaultBlobColorResolver` from `@mkbabb/glass-ui/color` so a `var()` /
- * `light-dark()` token, an `oklch()` / `hsl()` / hex string all resolve. A
- * `var()` token is first resolved to a concrete `rgb()` against the host's
- * inherited color-scheme, then re-resolved on a color change AND on a dark-mode
- * toggle so the field retints with the theme.
+ * The DEFAULT palette is the warm-cream library identity (`--viz-fourier` warm-amber); a
+ * demo Teal/cool preset stays demo-LOCAL (presets-in-consumers — never a library token).
  *
- * `variant` is the configuration BUNDLE, not a recolour of one curve: `hero`
- * draws a few big phasors with the epicycles ON and a warm trail feel; `final`
- * draws a denser elliptic spectrum with the epicycles OFF. One engine, two
- * presets. The hue itself always comes from the consumer's `color`.
- *
- * BB.W-CARVE3 — the ~475-line renderer lives in `composables/useFourierField.ts`
- * (the colocation symmetry Aurora/`useAurora.ts`, GooBlob/`useMetaballRenderer.ts`
- * and Constellation/`useConstellation.ts` already carry). The SFC stays thin: the
- * props, the two template refs, and the single `useFourierField(props, …)` call.
+ * The `variant: "hero"|"final"` prop is RETIRED (BC.W-VIZ-FOURIER — the bundles fold into
+ * config presets, MIGRATION row). An ambient-background consumer passes `color` (+ the
+ * `colorResolver`) for a thin warm default preserving the recessive look; the studio passes
+ * the full `config` + `spectrum` + `getPalette`.
  */
 type __VLS_Props = {
-    /** Configuration bundle. `hero` = epicycles on, fewer harmonics; `final` = epicycles off, denser. Default `hero`. */
-    variant?: "hero" | "final";
-    /** Base CSS color (any form the resolver understands; a `var()`/`light-dark()` token resolves against the host). */
-    color: string;
-    /** REQUIRED color seam — resolves a concrete color to a gamma-sRGB [r,g,b] triple in [0,1]. */
-    colorResolver: ColorResolver;
-    /** Extra seed mixed into the spectrum PRNG for a unique-but-reproducible curve. Default "". */
+    /** The full author config (the studio's `useConfiguratorState` model). Defaults to the warm identity. */
+    config?: FourierFieldConfig;
+    /** An explicit CPU-minted spectrum (a curated shape's DFT). When absent, a seeded elliptic spectrum is generated. */
+    spectrum?: readonly BasisComponent[];
+    /** Resolve the curve palette as OKLCh (the studio themes it). When absent, `color`/`config.palette` is used. */
+    getPalette?: () => OklchStop[];
+    /** Ambient-consumer color seam — a `var()`/`light-dark()` token or a literal; derives a warm 2-stop palette. */
+    color?: string;
+    /** The color resolver (the GooBlob/Aurora seam) — required when `color` is a `var()` token. */
+    colorResolver?: ColorResolver;
+    /** Extra seed mixed into the generated elliptic spectrum PRNG. Default "". */
     seed?: string;
-    /** When true, paint ONE static deterministic best-frame and never animate (the capture/export lever). Default false. */
+    /** Paint ONE static deterministic best-frame and never animate (the capture lever). Default false. */
     freeze?: boolean;
-    /** Outer loudness envelope (the Aurora `opacityCeiling` shape). Scales the
-     *  resolved `peakAlpha`/`headGlowAlpha` at the PAINT layer (a per-LAYER
-     *  multiply, not a uniform CSS opacity). Default 1 (the bundle's resting
-     *  loudness); clamped [0, 2] — the field's ~2 upper bound lets a hero push
-     *  brighter than the recessed default without runaway. */
+    /** Outer loudness envelope (scales the per-layer alpha). When set, overrides `config.intensity`; clamped [0,2]. */
     intensity?: number;
-    /** OPTIONAL injected clock — a getter returning the loop parameter `t ∈ [0,1)`.
-     *  When BOUND, the render reads `clock()` (a controllable studio clock: pause,
-     *  scrub, speed); when ABSENT (the ambient face), the autonomous
-     *  `(now / durationMs) % 1` frame-time loop is the DEFAULT. `freeze` /
-     *  `prefers-reduced-motion` still short-circuit to `frozenT` regardless — the
-     *  ambient bundle is unchanged. The SOLE additive seam (BA.W-FOURIER-STUDIO). */
-    clock?: () => number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "hero" | "final";
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    backend: () => import("../../../composables/glass/webgpu").GpuBackend;
+    pause: () => void;
+    resume: () => void;
+    wake: () => void;
+    renderAt: (timeSec: number) => void;
+    setHeadT: (t: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     seed: string;
     freeze: boolean;
-    intensity: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/custom/fourier-field/composables/fourierFieldGLSetup.d.ts

@@ -0,0 +1,15 @@
+import type { WebGLCanvasFrame } from "../../../../composables/glass/webgl/useWebGLCanvas";
+import type { OklchStop } from "../../../../composables/color";
+import { type FourierFieldConfig } from "../constants";
+import { type BasisComponent } from "../math";
+export interface FourierGLSetupDeps {
+    canvas: HTMLCanvasElement;
+    config: FourierFieldConfig;
+    getSpectrum: () => readonly BasisComponent[];
+    getPalette: () => OklchStop[];
+    getHeadT: () => number;
+    shouldContinue: () => boolean;
+    onFrame?: (timeSec: number) => void;
+}
+/** Build the `setupGL(gl)` callback the `createGpuSubstrate` WebGL2 path invokes. */
+export declare function createFourierGLSetup(deps: FourierGLSetupDeps): (gl: WebGL2RenderingContext) => WebGLCanvasFrame;

package/dist/components/custom/fourier-field/composables/fourierFieldWGPUSetup.d.ts

@@ -0,0 +1,20 @@
+import type { WebGPUCanvasFrame } from "../../../../composables/glass/webgpu/useWebGPUCanvas";
+import type { OklchStop } from "../../../../composables/color";
+import { type FourierFieldConfig } from "../constants";
+import type { BasisComponent } from "../math";
+export interface FourierWGPUSetupDeps {
+    canvas: HTMLCanvasElement;
+    config: FourierFieldConfig;
+    /** The CPU-minted spectrum (re-read each frame so a source-swap reaches the buffer). */
+    getSpectrum: () => readonly BasisComponent[];
+    /** The resolved (ColorResolver) palette stops as OKLCh — re-read each frame so a live edit reaches the buffer. */
+    getPalette: () => OklchStop[];
+    /** The single loop parameter `head_t ∈ [0,1)` (the ONE keyframes.js clock). */
+    getHeadT: () => number;
+    /** Demand-gate (the renderer's quiescence layer — substrate-agnostic). */
+    shouldContinue: () => boolean;
+    /** The per-frame pointer hook — useFourierField advances the shared pointer field here. */
+    onFrame?: (timeSec: number) => void;
+}
+/** Build the fourier-field `setupWGPU(device, context, format)` callback. */
+export declare function createFourierWGPUSetup(deps: FourierWGPUSetupDeps): (device: GPUDevice, context: GPUCanvasContext, format: GPUTextureFormat) => WebGPUCanvasFrame;

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

@@ -0,0 +1,41 @@
+import type { OklchStop } from "../../../../composables/color";
+import { type BasisComponent } from "../math";
+/** One phasor lane in the storage buffer: (re, im, index, _pad). */
+export declare const FOURIER_PHASOR_BYTES = 16;
+export declare const FOURIER_COMPUTE_UNIFORM_BYTES = 32;
+export interface FourierUniformScratch {
+    buffer: ArrayBuffer;
+    f32: Float32Array;
+    i32: Int32Array;
+}
+export declare function createFourierComputeScratch(): FourierUniformScratch;
+/** Pack the compute uniforms in place. */
+export declare function packFourierComputeUniforms(scratch: FourierUniformScratch, headT: number, trailArc: number, harmonicN: number, epicycleArmN: number, sampleCount: number, phasorCount: number): FourierUniformScratch;
+export declare const FOURIER_RENDER_UNIFORM_BYTES: number;
+export declare function createFourierRenderScratch(): FourierUniformScratch;
+/** The model→clip fit transform (center + uniform scale) — computed once per spectrum. */
+export interface FourierFit {
+    centerX: number;
+    centerY: number;
+    /** The uniform scale s such that (model − center)·s maps the curve into clip [-1,1] with margin. */
+    scale: number;
+}
+/**
+ * Stable view-fit: sample the FULL reconstruction once over the period, bound its bbox,
+ * and derive the center + a margin-padded uniform scale. The render's fullscreen pass
+ * inverts this transform per fragment so the curve never clips and the scale is fixed.
+ */
+export declare function computeFourierFit(spectrum: readonly BasisComponent[]): FourierFit;
+/**
+ * Convert a CSS-px stroke width to MODEL units (the shader's space). The fit `scale` maps
+ * model → clip; clip spans [-1,1] over the min CSS dimension → cssPx-per-clip = canvasCssMin/2.
+ * model-per-cssPx = (1/scale)·(2/canvasCssMin).
+ */
+export declare function trailWidthToModel(trailWidthPx: number, scale: number, canvasCssMin: number): number;
+/** Pack the render uniforms in place. */
+export declare function packFourierRenderUniforms(scratch: FourierUniformScratch, fit: FourierFit, aspect: number, trailWidthModel: number, peakAlpha: number, headGlowAlpha: number, trailFadeExp: number, trailFloor: number, intensity: number, showEpicycles: boolean, rainbowChain: boolean, sampleCount: number, armCount: number, palette: OklchStop[]): FourierUniformScratch;
+/**
+ * Pack the phasor storage table (re, im, index, _pad) from the CPU-minted spectrum. The
+ * WGSL SUMS this per frame — it is the ONLY spectrum upload (no WGSL-side mint).
+ */
+export declare function packPhasorTable(spectrum: readonly BasisComponent[]): Float32Array;

package/dist/components/custom/fourier-field/composables/useFourierField.d.ts

@@ -1,39 +1,42 @@
-import { type ShallowRef } from "vue";
-import { type ColorResolver } from "../../../../composables/color";
-/**
- * The renderer of `<FourierField>` — the Fourier-epicycle field on a Canvas2D
- * surface. Lifted out of the SFC into this composable (BB.W-CARVE3) so the
- * component file matches the colocation symmetry its GL/canvas siblings already
- * carry: Aurora→`useAurora.ts`, GooBlob→`useMetaballRenderer.ts`,
- * Constellation→`useConstellation.ts`. The SFC stays thin (props + the two
- * template refs + the single `useFourierField(props, …)` call).
- *
- * It composes the `useCanvas2D` substrate, inheriting the offscreen /
- * tab-hidden / reduced-motion freeze for free (no hand-rolled RAF-park). Color
- * resolves through the INJECTED `colorResolver` seam (the GooBlob model): a
- * `var()`/`light-dark()` token is first resolved to a concrete `rgb()` against
- * the host's inherited color-scheme, then re-resolved on a color change AND on a
- * dark-mode toggle so the field retints with the theme.
- */
-export interface FourierFieldRenderProps {
-    /** Configuration bundle. `hero` = epicycles on, fewer harmonics; `final` = epicycles off, denser. */
-    variant: "hero" | "final";
-    /** Base CSS color (any form the resolver understands; a `var()`/`light-dark()` token resolves against the host). */
-    color: string;
-    /** REQUIRED color seam — resolves a concrete color to a gamma-sRGB [r,g,b] triple in [0,1]. */
-    colorResolver: ColorResolver;
-    /** Extra seed mixed into the spectrum PRNG for a unique-but-reproducible curve. */
-    seed: string;
-    /** When true, paint ONE static deterministic best-frame and never animate (the capture/export lever). */
-    freeze: boolean;
-    /** Outer loudness envelope (the Aurora `opacityCeiling` shape). Scales the resolved alphas at the PAINT layer; clamped [0, 2]. */
-    intensity: number;
-    /** OPTIONAL injected clock — a getter returning the loop parameter `t ∈ [0,1)` (the studio's controllable clock). */
-    clock?: () => number;
+import { type Ref } from "vue";
+import { type GpuBackend } from "../../../../composables/glass/webgpu/useGpuSubstrate";
+import type { OklchStop } from "../../../../composables/color";
+import type { FourierFieldConfig } from "../constants";
+import type { BasisComponent } from "../math";
+export interface UseFourierFieldOptions {
+    config: FourierFieldConfig;
+    /** The active phasor spectrum (CPU-minted; re-read each frame so a source-swap reaches the buffer). */
+    getSpectrum: () => readonly BasisComponent[];
+    /** Resolve the curve-color palette as OKLCh (the demo themes it; default warm-identity). */
+    getPalette: () => OklchStop[];
+    /** When true, hold the deterministic best-frame and never advance (the capture / freeze lever). */
+    freeze?: () => boolean;
+    /** The static deterministic best-frame parameter under `freeze`/PRM. Default 0.34. */
+    frozenT?: number;
+    /** Base forward period for one full traversal at 1× speed, in seconds. Default 16. */
+    periodS?: number;
+    /** `"capture"` → renderAt-only (the deterministic π capture path). Default `"live"`. */
+    mode?: "live" | "capture";
 }
-/** The template refs the SFC owns; the composable reads them once the host is in the tree. */
-export interface FourierFieldRefs {
-    hostRef: Readonly<ShallowRef<HTMLElement | null>>;
-    canvasRef: Readonly<ShallowRef<HTMLCanvasElement | null>>;
+/** The uniform handle a consumer wires its lifecycle against (backend-agnostic). */
+export interface FourierFieldHandle {
+    /** The resolved backend (`"webgpu"` where supported, else the WebGL2 GLSL 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. */
+    wake: () => void;
+    /** Draw one frame out-of-loop (capture / thumbnail). */
+    renderAt: (timeSec: number) => void;
+    /** The live `prefers-reduced-motion: reduce` state. */
+    readonly reducedMotion: boolean;
+    /** The current loop parameter `head_t ∈ [0,1)` (the scrubber reads/writes it). */
+    readonly headT: number;
+    /** Scrub the clock directly (the transport scrubber / a pointer drag). */
+    setHeadT: (t: number) => void;
+    /** Tear down the renderer + release GPU/GL resources. */
+    dispose: () => void;
 }
-export declare function useFourierField(props: FourierFieldRenderProps, { hostRef, canvasRef }: FourierFieldRefs): void;
+export declare function useFourierField(canvasRef: Ref<HTMLCanvasElement | null>, options: UseFourierFieldOptions): FourierFieldHandle;

package/dist/components/custom/fourier-field/constants.d.ts

@@ -1,7 +1,64 @@
+import type { OklchStop } from "../../../composables/color";
 /**
- * Curve-sampling resolution for the stable view-fit bbox pass — the renderer
- * samples the epicycle curve this many times once at mount to size it to the
- * canvas with a fixed margin (so the curve never clips and the scale is constant
- * across the run). 720 = one sample per half-degree of the unit period.
+ * Curve-sampling resolution for the stable view-fit bbox pass — the renderer samples the
+ * epicycle curve this many times once at mount to size it to the canvas with a fixed
+ * margin (so the curve never clips and the scale is constant across the run). 720 = one
+ * sample per half-degree of the unit period.
  */
 export declare const FOURIER_FIT_SAMPLES = 720;
+/**
+ * The phasor-table uniform ceiling — the WGSL `MAX_PHASORS` #define. The configurator's
+ * harmonic count maxes here; a >64-term custom trace books a storage-buffer widen (cheap —
+ * the flow-field already uses a storage buffer). The curated ℱ/heart/star set + the
+ * generated elliptic spectrum all sit under it.
+ */
+export declare const MAX_PHASORS = 64;
+/**
+ * The comet-curve sample ceiling — the storage-buffer array bound. The compute pass
+ * writes the partial-sum curve point at `M` samples back along the period from the head;
+ * the render pass reads them as the comet polyline. 384 gives a smooth bold stroke.
+ */
+export declare const MAX_CURVE_SAMPLES = 384;
+/** The palette-stop ceiling — the WGSL `MAX_FOURIER_STOPS` #define. */
+export declare const MAX_FOURIER_STOPS = 4;
+/**
+ * The full author schema — the studio's `useConfiguratorState` model. Every field is a
+ * tunable the demo configurator drives; the composable resolves it into the uniform table.
+ */
+export interface FourierFieldConfig {
+    /** The active phasor spectrum source key — `"elliptic"` (generated) or a curated shape key. */
+    source: string;
+    /** TRUNCATE the partial sum — the harmonic count N (1..min(spectrum.length, MAX_PHASORS)). */
+    harmonics: number;
+    /** Draw the rotating epicycle chain (orthogonal to N). */
+    showEpicycles: boolean;
+    /** How many chain arms to draw (1..N; ≤ the harmonic count). */
+    epicycleArms: number;
+    /** Paint the chain as a warm-anchored hue sweep vs one analogous hue. */
+    rainbowChain: boolean;
+    /** Comet-body length as a fraction of the period (0.15..1.0). */
+    trailArc: number;
+    /** Comet stroke weight in CSS px (1..6). */
+    trailWidth: number;
+    /** Outer loudness envelope (per-layer alpha multiply, 0..2). */
+    intensity: number;
+    /** Character of the generated elliptic spectrum (0.05..0.4 — smooth ellipse → crinkled). */
+    harmonicScale: number;
+    /** Clock speed multiplier (0.25/0.5/1/2). */
+    speed: number;
+    /** The curve-color ramp (the library viz palette; warm default). Resolved via the ColorResolver. */
+    palette: OklchStop[];
+    /** ONE static frame then park under `prefers-reduced-motion: reduce`. */
+    respectReducedMotion: boolean;
+    /** Pointer scrubs `head_t` + a flick injects clock momentum (the W-VIZ-INTERACTION consume). */
+    interactive: 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. The chain's
+ * rainbow sweep is warm-anchored over THIS base; a consumer (the demo) themes it through a
+ * preset, never a token edit.
+ */
+export declare const WARM_IDENTITY_PALETTE: OklchStop[];
+/** The shipped warm-identity default config. */
+export declare const DEFAULT_FOURIER_CONFIG: FourierFieldConfig;

package/dist/components/custom/fourier-field/index.d.ts

@@ -1,26 +1,31 @@
-import type { ColorResolver } from "../../../composables/color";
+import type { ColorResolver, OklchStop } from "../../../composables/color";
+import type { FourierFieldConfig } from "./constants";
+import type { BasisComponent } from "./math";
 export { default as FourierField } from "./FourierField.vue";
 export { comp, positionsAt, partialSumAt, dftFromPoints, makeEllipticSpectrum, type BasisComponent, type EllipticSpectrumOptions, } from "./math";
-/** The configuration-BUNDLE axis — `hero` (epicycles on, fewer harmonics) vs
- *  `final` (epicycles off, denser). Not a recolour of one curve; one engine,
- *  two presets. */
-export type FourierFieldVariant = "hero" | "final";
-/** The props a consumer forwards when wrapping `<FourierField>` (the seeded
- *  inverse-DFT epicycle background; ships via `/fourier-field`). Mirrors the
- *  component's inline `defineProps` shape (an SFC cannot export its inline
- *  props type). */
+export { DEFAULT_FOURIER_CONFIG, WARM_IDENTITY_PALETTE, MAX_PHASORS, MAX_CURVE_SAMPLES, type FourierFieldConfig, } from "./constants";
+export { useFourierField, type FourierFieldHandle, type UseFourierFieldOptions, } from "./composables/useFourierField";
+/**
+ * The props a consumer forwards when wrapping `<FourierField>` (the GPU-substrate epicycle
+ * field; ships via `/fourier-field`). Mirrors the component's inline `defineProps` shape (an
+ * SFC cannot export its inline props type). BC.W-VIZ-FOURIER — the `variant: "hero"|"final"`
+ * enum is RETIRED (folds into config presets); the renderer is the WGSL-primary GPU substrate.
+ */
 export interface FourierFieldProps {
-    /** Configuration bundle. Default `hero`. */
-    variant?: FourierFieldVariant;
-    /** Base CSS color (a `var()`/`light-dark()` token resolves against the host). */
-    color: string;
-    /** REQUIRED color seam — resolves a concrete color to a gamma-sRGB [r,g,b] triple in [0,1]. */
-    colorResolver: ColorResolver;
-    /** Extra seed mixed into the spectrum PRNG for a unique-but-reproducible curve. Default "". */
+    /** The full author config (the studio's `useConfiguratorState` model). Defaults to the warm identity. */
+    config?: FourierFieldConfig;
+    /** An explicit CPU-minted spectrum (a curated shape's DFT). When absent, a seeded elliptic spectrum is generated. */
+    spectrum?: readonly BasisComponent[];
+    /** Resolve the curve palette as OKLCh (the studio themes it). */
+    getPalette?: () => OklchStop[];
+    /** Ambient-consumer color seam — a `var()`/`light-dark()` token or a literal; derives a warm palette. */
+    color?: string;
+    /** The color resolver (the GooBlob/Aurora seam) — required when `color` is a `var()` token. */
+    colorResolver?: ColorResolver;
+    /** Extra seed mixed into the generated elliptic spectrum PRNG. Default "". */
     seed?: string;
     /** Paint ONE static deterministic best-frame and never animate (the capture lever). Default false. */
     freeze?: boolean;
-    /** Outer loudness envelope (the Aurora `opacityCeiling` shape). Scales the
-     *  resolved `peakAlpha`/`headGlowAlpha` at the paint layer. Default 1; clamped [0, 2]. */
+    /** Outer loudness envelope (scales the per-layer alpha). Overrides `config.intensity` when set; clamped [0, 2]. */
     intensity?: number;
 }

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

@@ -0,0 +1 @@
+export declare const FOURIER_FIELD_COMPUTE_WGSL = "\nconst MAX_PHASORS: i32 = 64;\nconst TAU: f32 = 6.283185307179586;\n\nstruct Phasor {\n  // (re, im, index, _pad)\n  data: vec4<f32>,\n};\n\n// \u2500\u2500 Compute uniforms (the typed-struct source-of-truth \u2014 see uniformBridgeWGPU.ts) \u2500\u2500\nstruct ComputeUniforms {\n  // c0: (headT, trailArc, _pad, _pad)\n  c0: vec4<f32>,\n  // ints: (harmonicN, epicycleArmN, sampleCount, phasorCount)\n  ints: vec4<i32>,\n};\n\n@group(0) @binding(0) var<uniform> u: ComputeUniforms;\n@group(0) @binding(1) var<storage, read> phasors: array<Phasor>;\n// curveSamples[i] = (x, y, age, _pad)\n@group(0) @binding(2) var<storage, read_write> curveSamples: array<vec4<f32>>;\n// chainTips[k] = (x, y, _pad, _pad) \u2014 the running tip after stacking phasor k\n@group(0) @binding(3) var<storage, read_write> chainTips: array<vec4<f32>>;\n\n// The PARTIAL-SUM curve point at parameter t over the first n phasors \u2014 the WGSL\n// transcription of math.ts:78-95 (partialSumAt). EXACTLY:\n//   c += vec2(re\u00B7cos \u2212 im\u00B7sin, re\u00B7sin + im\u00B7cos)  with angle = TAU\u00B7index\u00B7t.\nfn partialSumAt(t: f32, n: i32) -> vec2<f32> {\n  var c = vec2<f32>(0.0, 0.0);\n  let phasorCount = u.ints.w;\n  let lim = min(n, phasorCount);\n  for (var i = 0; i < MAX_PHASORS; i = i + 1) {\n    if (i >= lim) { break; }\n    let p = phasors[i].data;\n    let re = p.x;\n    let im = p.y;\n    let index = p.z;\n    let angle = TAU * index * t;\n    let cs = cos(angle);\n    let sn = sin(angle);\n    c = c + vec2<f32>(re * cs - im * sn, re * sn + im * cs);\n  }\n  return c;\n}\n\n// The epicycle chain tip after stacking the first k phasors at head_t \u2014 the WGSL\n// transcription of math.ts:41-60 (positionsAt, read at the running tip). The running tip\n// after phasor (k\u22121) is exactly the partial sum over the first k terms.\nfn epicycleChainTip(t: f32, k: i32) -> vec2<f32> {\n  return partialSumAt(t, k);\n}\n\n@compute @workgroup_size(64)\nfn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {\n  let i = i32(gid.x);\n  let headT = u.c0.x;\n  let trailArc = u.c0.y;\n  let harmonicN = u.ints.x;\n  let armN = u.ints.y;\n  let sampleCount = u.ints.z;\n\n  // \u2500\u2500 The comet body samples \u2500\u2500\n  if (i < sampleCount) {\n    // age: 0 at the oldest tail (i = sampleCount\u22121), 1 at the head (i = 0).\n    let denom = max(f32(sampleCount - 1), 1.0);\n    let frac = f32(i) / denom;                 // 0 = head, 1 = tail\n    let age = 1.0 - frac;                       // 1 = head, 0 = tail\n    // sample back along the period from the head by trailArc.\n    var t = headT - trailArc * frac;\n    t = t - floor(t);                           // fract \u2192 [0,1)\n    let pt = partialSumAt(t, harmonicN);\n    curveSamples[i] = vec4<f32>(pt.x, pt.y, age, 0.0);\n  }\n\n  // \u2500\u2500 The epicycle chain tips (k = 0..armN, capped to harmonicN) \u2500\u2500\n  // chainTips[0] is the origin; chainTips[k] is the tip after phasor (k\u22121).\n  let armLim = min(armN, harmonicN);\n  if (i <= armLim && i <= MAX_PHASORS) {\n    let tip = epicycleChainTip(headT, i);\n    chainTips[i] = vec4<f32>(tip.x, tip.y, 0.0, 0.0);\n  }\n}\n";

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

@@ -0,0 +1,4 @@
+/** The full-screen-triangle vertex shader (the aurora/concentric pattern). */
+export declare const FOURIER_FIELD_VERT_GLSL = "#version 300 es\nin vec2 aPosition;\nout vec2 vClip;\nvoid main() {\n  vClip = aPosition;\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}\n";
+/** The fragment SDF — the GLSL twin of fourier-field.render.wgsl.ts's fs_main. */
+export declare const FOURIER_FIELD_FRAG_GLSL = "#version 300 es\nprecision highp float;\n\n#define MAX_CURVE_SAMPLES 256\n#define MAX_PHASORS 64\n\nin vec2 vClip;\nout vec4 fragColor;\n\nuniform vec4 uFit;          // (centerX, centerY, scale, aspect)\nuniform vec4 uTrail;        // (trailWidth, peakAlpha, headGlowAlpha, trailFadeExp)\nuniform vec4 uEnv;          // (trailFloor, intensity, showEpicycles, rainbowChain)\nuniform int  uSampleCount;\nuniform int  uArmCount;\nuniform int  uStopCount;\nuniform vec3 uPalette[4];   // linear-sRGB stops\n// curveSamples[i] = (x, y, age) in MODEL space; chainTips[k] = (x, y) in MODEL space.\nuniform vec3 uCurve[MAX_CURVE_SAMPLES];\nuniform vec2 uChain[MAX_PHASORS];\n\nconst float PI = 3.141592653589793;\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// Negative-safe cube root (the WGSL chunk's cbrt3 twin; the GLSL chunk inlines it).\nvec3 cbrt3(vec3 v) { return sign(v) * pow(abs(v), vec3(1.0 / 3.0)); }\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 labA = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * uPalette[i0]);\n  vec3 labB = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * uPalette[i1]);\n  return oklabToLinearSrgb(mix(labA, labB, f));\n}\n\nvec3 chainColorLin(float seg, bool rainbow) {\n  vec3 baseLin = uPalette[0];\n  if (!rainbow) return baseLin;\n  vec3 lab = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * baseLin);\n  vec3 lch = oklabToOklch(lab);\n  float hueShift = mix(-0.45, 1.15, clamp(seg, 0.0, 1.0));\n  vec3 lifted = vec3(0.66, max(lch.y, 0.14), lch.z + hueShift);\n  return oklabToLinearSrgb(oklchToOklab(lifted));\n}\n\nfloat segDist(vec2 p, vec2 a, vec2 b) {\n  vec2 pa = p - a;\n  vec2 ba = b - a;\n  float h = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-8), 0.0, 1.0);\n  return length(pa - ba * h);\n}\n\nvoid main() {\n  vec2 center = uFit.xy;\n  float scale = max(uFit.z, 1e-6);\n  float aspect = max(uFit.w, 1e-4);\n  // clip \u2192 model (the inverse of model\u2192clip fit).\n  vec2 p = center + vec2(vClip.x * aspect, vClip.y) / scale;\n\n  float aa = max(fwidth(p.x) + fwidth(p.y), 1e-5) * 0.75;\n  float trailWidth = uTrail.x;            // already in model units (packed CPU-side)\n  float peak = uTrail.y * uEnv.y;\n  float headGlow = uTrail.z * uEnv.y;\n  float fadeExp = uTrail.w;\n  float trailFloor = uEnv.x;\n  bool showEpicycles = uEnv.z > 0.5;\n  bool rainbow = uEnv.w > 0.5;\n  float halfW = trailWidth * 0.5;\n\n  vec4 accum = vec4(0.0);\n\n  if (showEpicycles && uArmCount >= 1) {\n    for (int k = 0; k < MAX_PHASORS; k++) {\n      if (k >= uArmCount) break;\n      vec2 a = uChain[k];\n      vec2 b = uChain[k + 1];\n      float seg = float(k) / max(float(uArmCount - 1), 1.0);\n      vec3 lin = chainColorLin(seg, rainbow);\n      float radius = length(b - a);\n      float dRing = abs(length(p - a) - radius);\n      float ringW = max(halfW * 0.45, aa);\n      float ringMask = (1.0 - smoothstep(ringW, ringW + aa, dRing)) * 0.5;\n      float dArm = segDist(p, a, b);\n      float armMask = 1.0 - smoothstep(halfW * 0.55, halfW * 0.55 + aa, dArm);\n      float dotR = max(halfW * 0.7, aa * 2.0);\n      float dDot = length(p - a);\n      float dotMask = 1.0 - smoothstep(dotR, dotR + aa, dDot);\n      float m = clamp(max(max(ringMask, armMask), dotMask), 0.0, 1.0) * peak * 0.7;\n      vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));\n      accum = vec4(rgb * m, m) + accum * (1.0 - m);\n    }\n  }\n\n  for (int i = 0; i < MAX_CURVE_SAMPLES; i++) {\n    if (i >= uSampleCount - 1) break;\n    vec3 sa = uCurve[i];\n    vec3 sb = uCurve[i + 1];\n    float d = segDist(p, sa.xy, sb.xy);\n    float cover = 1.0 - smoothstep(halfW, halfW + aa, d);\n    if (cover < 0.002) continue;\n    float age = max(sa.z, sb.z);\n    float a = peak * pow(age, fadeExp);\n    a = max(a, peak * trailFloor) * cover;\n    vec3 lin = samplePaletteLin(1.0 - age * 0.4);\n    vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));\n    accum = vec4(rgb * a, a) + accum * (1.0 - a);\n  }\n\n  if (uSampleCount >= 1) {\n    vec2 head = uCurve[0].xy;\n    float dHead = length(p - head);\n    float coreR = halfW * 1.5;\n    float haloR = coreR * 3.0;\n    vec3 headRgb = clamp(linearToSrgb(samplePaletteLin(0.0)), vec3(0.0), vec3(1.0));\n    float halo = (1.0 - smoothstep(0.0, haloR, dHead)) * headGlow * 0.35;\n    accum = vec4(headRgb * halo, halo) + accum * (1.0 - halo);\n    float core = (1.0 - smoothstep(coreR, coreR + aa, dHead)) * headGlow;\n    accum = vec4(headRgb * core, core) + accum * (1.0 - core);\n    float spec = (1.0 - smoothstep(coreR * 0.4, coreR * 0.4 + aa, dHead)) * headGlow * 0.9;\n    accum = vec4(vec3(1.0) * spec, spec) + accum * (1.0 - spec);\n  }\n\n  fragColor = accum;\n}\n";