@mkbabb/glass-ui 3.13.0 → 4.0.1

package/dist/components/custom/concentric/composables/concentricWGPUSetup.d.ts

@@ -0,0 +1,13 @@
+import type { WebGPUCanvasFrame } from "../../../../composables/glass/webgpu/useWebGPUCanvas";
+import type { OklchStop } from "../../../../composables/color";
+import type { ConcentricConfig } from "../constants";
+export interface ConcentricWGPUSetupDeps {
+    canvas: HTMLCanvasElement;
+    config: ConcentricConfig;
+    /** The resolved (ColorResolver) palette stops as OKLCh — re-read each frame so a live edit reaches the buffer. */
+    getPalette: () => OklchStop[];
+    /** Demand-gate (the renderer's quiescence layer — substrate-agnostic). */
+    shouldContinue: () => boolean;
+}
+/** Build the concentric `setupWGPU(device, context, format)` callback. */
+export declare function createConcentricWGPUSetup(deps: ConcentricWGPUSetupDeps): (device: GPUDevice, context: GPUCanvasContext, format: GPUTextureFormat) => WebGPUCanvasFrame;

package/dist/components/custom/concentric/composables/ringField.d.ts

@@ -0,0 +1,44 @@
+/** A 2-vector. */
+export interface Vec2 {
+    x: number;
+    y: number;
+}
+/**
+ * One radial ring component. `amplitude` A_i, `wavelength` λ_i (so k_i = 2π/λ_i), `phase`
+ * φ_i. `ω_i = √(g·k_i)` is derived from the dispersion relation, not stored (the SAME
+ * dispersion the flow field's Gerstner sum uses — the ONE suite dispersion law).
+ */
+export interface RingComponent {
+    amplitude: number;
+    wavelength: number;
+    phase: number;
+}
+/** A ring origin in domain space [-1,1]² (multi-center → interference). */
+export interface RingCenter {
+    x: number;
+    y: number;
+    /** Per-center weight (a far center contributes a fainter ring family). */
+    weight: number;
+}
+/** Deep-water gravity constant (normalized; scales the dispersion ω — shared with the flow field). */
+export declare const RING_GRAVITY = 9.81;
+/**
+ * The ellipsoidal radial distance ‖p − c‖_e = sqrt((dx/a)² + (dy/b)²). The axis ratio
+ * (a,b) tilts the rings into ellipses (the 3D-tilt depth implication). The single radial
+ * metric the WGSL shader transcribes.
+ */
+export declare function ellipsoidalRadius(p: Vec2, center: RingCenter, axisA: number, axisB: number): number;
+/**
+ * The radial-Fourier ring-interference value f(p,t) ∈ ℝ — the multi-center sum of radial
+ * sinusoids. The SINGLE math source the WGSL `fs_main` + the GLSL fallback transcribe.
+ * `speed` scales the dispersion ω (the ring-travel speed). Returns the un-normalized
+ * field value (the shader maps it through the palette).
+ */
+export declare function sampleRingField(p: Vec2, timeSec: number, centers: readonly RingCenter[], rings: readonly RingComponent[], axisA: number, axisB: number, speed: number): number;
+/**
+ * Build the default 5-octave Phillips-spectrum radial ring ladder. Amplitudes follow
+ * `A_i ∝ exp(−1/(k_i·L)²) / k_i²` (Tessendorf §4, the SAME falloff the flow field uses),
+ * so the rings are energy-realistic. The decreasing wavelength gives the multi-scale
+ * concentric structure (broad outer rings + fine inner interference).
+ */
+export declare function buildRingLadder(octaves?: number): RingComponent[];

package/dist/components/custom/concentric/composables/uniformBridgeWGPU.d.ts

@@ -0,0 +1,13 @@
+import type { OklchStop } from "../../../../composables/color";
+import { type ConcentricConfig } from "../constants";
+export declare const CONCENTRIC_UNIFORM_BYTES: number;
+/** The field-amplitude normalization scale (field → [0,1] for the palette ramp). */
+export declare const CONCENTRIC_FIELD_NORM = 0.55;
+export interface ConcentricUniformScratch {
+    buffer: ArrayBuffer;
+    f32: Float32Array;
+    i32: Int32Array;
+}
+export declare function createConcentricScratch(): ConcentricUniformScratch;
+/** Pack the concentric uniforms in place. */
+export declare function packConcentricUniforms(scratch: ConcentricUniformScratch, config: ConcentricConfig, timeSec: number, aspect: number, palette: OklchStop[]): ConcentricUniformScratch;

package/dist/components/custom/concentric/composables/useConcentric.d.ts

@@ -0,0 +1,35 @@
+import { type Ref } from "vue";
+import { type GpuBackend } from "../../../../composables/glass/webgpu/useGpuSubstrate";
+import type { OklchStop } from "../../../../composables/color";
+import type { ConcentricConfig } from "../constants";
+export interface UseConcentricOptions {
+    config: ConcentricConfig;
+    /** Resolve the field-value 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 ConcentricHandle {
+    /** 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;
+    /** Tear down the renderer + release GPU/GL resources. */
+    dispose: () => void;
+}
+/**
+ * Mount the concentric renderer on `canvasRef`. The WebGPU primary + the WebGL2 fallback
+ * are BOTH pure fullscreen fragment passes evaluating the SAME radial-Fourier field (the
+ * ONE math source `ringField.ts`), so the picker is the only seam. Returns the uniform
+ * lifecycle handle.
+ */
+export declare function useConcentric(canvasRef: Ref<HTMLCanvasElement | null>, options: UseConcentricOptions): ConcentricHandle;

package/dist/components/custom/concentric/constants.d.ts

@@ -0,0 +1,43 @@
+import type { RingComponent, RingCenter } from "./composables/ringField";
+import type { OklchStop } from "../../../composables/color";
+/** Compile-time ring-component cap — mirrors the WGSL `MAX_RINGS` #define. */
+export declare const MAX_RINGS = 8;
+/** Compile-time center cap — mirrors the WGSL `MAX_CENTERS` #define. */
+export declare const MAX_CENTERS = 4;
+/** Compile-time palette cap — mirrors the WGSL `MAX_RING_STOPS` #define. */
+export declare const MAX_RING_STOPS = 4;
+/**
+ * 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.
+ */
+export interface ConcentricConfig {
+    /** The ring origins (1..MAX_CENTERS) — a multi-center sum produces ring interference. */
+    centers: RingCenter[];
+    /** The radial sum-of-sines table (1..MAX_RINGS). */
+    ringComponents: RingComponent[];
+    /** The ellipsoidal-norm axis ratio (a, b) — the 3D-tilt depth implication. */
+    axisRatio: [number, number];
+    /** The ring-travel speed (scales ω). */
+    speed: number;
+    /** The field-value color ramp (the demo themes it); resolved via the ColorResolver. */
+    palette: OklchStop[];
+    /** The ground color (default transparent so it reads over the page; demo sets it). */
+    background: OklchStop | "transparent";
+    /** Pointer adds a transient ring center (a local perturbation 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 a themed hue). A three-stop
+ * warm ramp over the warm-cream foreground family, resolved via the ColorResolver: a soft
+ * cream trough, a warm amber mid, a deeper ember crest — so the ring field reads as warm
+ * light interference. A consumer (the demo) themes it through a PRESET, never a token edit.
+ */
+export declare const WARM_IDENTITY_PALETTE: OklchStop[];
+/** The default 5-octave Phillips radial ring ladder. */
+export declare const DEFAULT_RING_COMPONENTS: RingComponent[];
+/** Two ring families offset on the diagonal — the default interference (a moiré beat). */
+export declare const DEFAULT_CENTERS: RingCenter[];
+/** The shipped warm-identity default config. */
+export declare const DEFAULT_CONCENTRIC_CONFIG: ConcentricConfig;

package/dist/components/custom/concentric/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Concentric } from "./Concentric.vue";
+export { useConcentric, type ConcentricHandle, type UseConcentricOptions, } from "./composables/useConcentric";
+export { type ConcentricConfig, DEFAULT_CONCENTRIC_CONFIG, DEFAULT_RING_COMPONENTS, DEFAULT_CENTERS, WARM_IDENTITY_PALETTE, MAX_RINGS, MAX_CENTERS, MAX_RING_STOPS, } from "./constants";
+export { type RingComponent, type RingCenter, type Vec2, sampleRingField, ellipsoidalRadius, buildRingLadder, RING_GRAVITY, } from "./composables/ringField";
+export type { OklchStop } from "../../../composables/color";

package/dist/components/custom/concentric/shaders/concentric.glsl.d.ts

@@ -0,0 +1,4 @@
+/** The full-screen-triangle vertex shader (the substrate's standard fullscreen pass). */
+export declare const CONCENTRIC_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 concentric fragment source — the aurora-class radial-Fourier field. */
+export declare const CONCENTRIC_FRAG_GLSL = "#version 300 es\nprecision highp float;\n\n#define PI 3.141592653589793\n#define TAU 6.283185307179586\n#define RING_GRAVITY 9.81\n#define MAX_RINGS 8\n#define MAX_CENTERS 4\n#define MAX_RING_STOPS 4\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform float uTime;\nuniform float uSpeed;\nuniform vec2  uAxis;          // (a, b) ellipsoidal-norm axis ratio\nuniform float uFieldNorm;     // field \u2192 [0,1] amplitude scale\nuniform float uAspect;\nuniform int   uCenterCount;\nuniform int   uRingCount;\nuniform int   uStopCount;\nuniform float uHasBackground;\nuniform vec3  uRings[MAX_RINGS];     // (amplitude, wavelength, phase)\nuniform vec3  uCenters[MAX_CENTERS]; // (x, y, weight)\nuniform vec3  uPalette[MAX_RING_STOPS]; // linear-sRGB stops\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// \u2016p \u2212 c\u2016_e = sqrt((dx/a)\u00B2 + (dy/b)\u00B2) \u2014 transcribes ringField.ts ellipsoidalRadius.\nfloat ellipsoidalRadius(vec2 p, vec2 center, float axisA, float axisB) {\n  float dx = (p.x - center.x) / max(axisA, 1e-4);\n  float dy = (p.y - center.y) / max(axisB, 1e-4);\n  return sqrt(dx * dx + dy * dy);\n}\n\n// f(p,t) \u2014 the multi-center weighted radial sum (transcribes ringField.ts sampleRingField).\nfloat sampleRingField(vec2 p, float t) {\n  float acc = 0.0;\n  for (int j = 0; j < MAX_CENTERS; j++) {\n    if (j >= uCenterCount) break;\n    vec3 cj = uCenters[j];\n    float radius = ellipsoidalRadius(p, cj.xy, uAxis.x, uAxis.y);\n    float centerSum = 0.0;\n    for (int i = 0; i < MAX_RINGS; i++) {\n      if (i >= uRingCount) break;\n      vec3 r = uRings[i];\n      float k = TAU / max(r.y, 1e-4);\n      float omega = sqrt(RING_GRAVITY * k) * uSpeed;\n      float theta = k * radius - omega * t + r.z;\n      centerSum += r.x * sin(theta);\n    }\n    acc += centerSum * cj.z;\n  }\n  return acc;\n}\n\n// Sample the multi-stop palette (linear-sRGB stops, OKLab mix). t in [0,1].\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  // cube-root LMS (the GLSL chunk inlines cbrt as sign(x)\u00B7pow(|x|,1/3) \u2014 no cbrt3 fn).\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  vec2 p = vec2(vUv.x * aspect, vUv.y);\n  float raw = sampleRingField(p, uTime);\n  float v = clamp(0.5 + raw * uFieldNorm, 0.0, 1.0);\n  vec3 lin = samplePaletteLin(v);\n  vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));\n  if (uHasBackground > 0.5) {\n    fragColor = vec4(rgb, 1.0);\n    return;\n  }\n  float alpha = clamp(v * 0.92 + 0.08, 0.0, 1.0);\n  fragColor = vec4(rgb * alpha, alpha);\n}";

package/dist/components/custom/concentric/shaders/concentric.wgsl.d.ts

@@ -0,0 +1 @@
+export declare const CONCENTRIC_WGSL = "\nconst PI: f32 = 3.141592653589793;\nconst TAU: f32 = 6.283185307179586;\nconst RING_GRAVITY: f32 = 9.81;\nconst MAX_RINGS: i32 = 8;\nconst MAX_CENTERS: i32 = 4;\nconst MAX_RING_STOPS: i32 = 4;\n\n// \u2500\u2500 Concentric uniforms (the typed-struct source-of-truth \u2014 see uniformBridgeWGPU.ts) \u2500\u2500\nstruct ConcentricUniforms {\n  // u0: (uTime, uSpeed, uAxisA, uAxisB)\n  u0: vec4<f32>,\n  // ints: (uCenterCount, uRingCount, uStopCount, _pad)\n  ints: vec4<i32>,\n  // bg: (background.rgb (linear), hasBackground)\n  bg: vec4<f32>,\n  // norm: (uFieldNorm, uAspect, _pad, _pad) \u2014 field \u2192 [0,1] scale\n  norm: vec4<f32>,\n  // each ring row: (amplitude, wavelength, phase, _pad)\n  rings: array<vec4<f32>, 8>,\n  // each center row: (x, y, weight, _pad)\n  centers: array<vec4<f32>, 4>,\n  // each palette stop: linear-sRGB rgb + _pad\n  palette: array<vec4<f32>, 4>,\n};\n\n@group(0) @binding(0) var<uniform> u: ConcentricUniforms;\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// Full-screen-triangle (the pilot idiom): NDC corners (-1,-1),(3,-1),(-1,3) cover the\n// viewport from a single 3-vertex draw \u2014 no vertex buffer.\nstruct VSOut {\n  @builtin(position) pos: vec4<f32>,\n  @location(0) uv: vec2<f32>,  // domain [-1,1]\u00B2, aspect-corrected x\n};\n\n@vertex\nfn vs_main(@builtin(vertex_index) vi: u32) -> VSOut {\n  var corners = array<vec2<f32>, 3>(\n    vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0),\n  );\n  let c = corners[vi];\n  var out: VSOut;\n  out.pos = vec4<f32>(c, 0.0, 1.0);\n  // aspect-correct so the rings stay circular under the ellipsoidal norm (NOT squashed\n  // by the canvas aspect): widen the domain x by the aspect ratio.\n  out.uv = vec2<f32>(c.x, c.y);\n  return out;\n}\n\n// The ellipsoidal radial distance \u2016p \u2212 c\u2016_e = sqrt((dx/a)\u00B2 + (dy/b)\u00B2). The single radial\n// metric (transcribes ringField.ts ellipsoidalRadius).\nfn ellipsoidalRadius(p: vec2<f32>, center: vec2<f32>, axisA: f32, axisB: f32) -> f32 {\n  let dx = (p.x - center.x) / max(axisA, 1e-4);\n  let dy = (p.y - center.y) / max(axisB, 1e-4);\n  return sqrt(dx * dx + dy * dy);\n}\n\n// The radial-Fourier ring-interference value f(p,t) \u2014 the multi-center weighted sum of\n// radial sinusoids (transcribes ringField.ts sampleRingField line-for-line).\nfn sampleRingField(p: vec2<f32>, t: f32) -> f32 {\n  var acc = 0.0;\n  let speed = u.u0.y;\n  let axisA = u.u0.z;\n  let axisB = u.u0.w;\n  let centerCount = u.ints.x;\n  let ringCount = u.ints.y;\n  for (var j = 0; j < MAX_CENTERS; j = j + 1) {\n    if (j >= centerCount) { break; }\n    let cj = u.centers[j];\n    let radius = ellipsoidalRadius(p, cj.xy, axisA, axisB);\n    var centerSum = 0.0;\n    for (var i = 0; i < MAX_RINGS; i = i + 1) {\n      if (i >= ringCount) { break; }\n      let r = u.rings[i];\n      let k = TAU / max(r.y, 1e-4);\n      // \u03C9 = \u221A(g\u00B7k); speed scales the travel (the shared dispersion law).\n      let omega = sqrt(RING_GRAVITY * k) * speed;\n      let theta = k * radius - omega * t + r.z;\n      centerSum = centerSum + r.x * sin(theta);\n    }\n    acc = acc + centerSum * cj.z;\n  }\n  return acc;\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.z;\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\n@fragment\nfn fs_main(in: VSOut) -> @location(0) vec4<f32> {\n  // aspect-correct the domain x so the rings read circular under the ellipsoidal norm.\n  let aspect = max(u.norm.y, 1e-4);\n  let p = vec2<f32>(in.uv.x * aspect, in.uv.y);\n  let t = u.u0.x;\n\n  let raw = sampleRingField(p, t);\n  // Normalize the field \u2192 [0,1] for the palette ramp (uFieldNorm is the amplitude scale).\n  let v = clamp(0.5 + raw * u.norm.x, 0.0, 1.0);\n\n  let lin = samplePaletteLin(v);\n  let rgb = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));\n\n  // Premultiplied-alpha output over the (transparent / themed) ground.\n  let hasBg = u.bg.w;\n  if (hasBg > 0.5) {\n    // opaque themed ground: the field paints fully opaque.\n    return vec4<f32>(rgb, 1.0);\n  }\n  // transparent ground: the field's alpha rides its own brightness so the page reads\n  // through the troughs (the ring crests carry the ink; the calm field is faint).\n  let alpha = clamp(v * 0.92 + 0.08, 0.0, 1.0);\n  return vec4<f32>(rgb * alpha, alpha);\n}\n";

package/dist/components/custom/configurator/Configurator.vue.d.ts

@@ -3,14 +3,14 @@ import { type ConfiguratorDensity } from "./density";
 /**
  * Scroll behavior for the controls column.
  *
- * - `auto`   — overflow-y-auto with `.scroll-fade-y` mask; controls scroll
- *              when their intrinsic height exceeds the host. Default.
- * - `always` — controls always render scroll affordance (mask + thin
- *              scrollbar). Use when authors want a fixed-height studio
- *              regardless of content.
- * - `never`  — controls do not scroll; host grows to content height. Use
- *              for popover/sheet hosts that already manage their own
- *              overflow.
+ * - `auto`   — the controls column renders a <FadingScroll axis="y"> scroll-port
+ *              (sharp at rest, feathered while overflowing); controls scroll when
+ *              their intrinsic height exceeds the host. Default.
+ * - `always` — same <FadingScroll> scroll-port + thin scrollbar. Use when
+ *              authors want a fixed-height studio regardless of content.
+ * - `never`  — controls do not scroll; host grows to content height. Renders a
+ *              plain div (no FadingScroll). Use for popover/sheet hosts that
+ *              already manage their own overflow.
  */
 export type ConfiguratorScrollMode = "auto" | "always" | "never";
 /**
@@ -106,6 +106,17 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         }) => any;
     } & {
         default?: (props: {}) => any;
+    } & {
+        controls?: (props: {
+            layers: readonly {
+                id: string;
+                label: string;
+            }[] | undefined;
+            activeLayer: string | undefined;
+            selectLayer: (id: string) => void;
+        }) => any;
+    } & {
+        default?: (props: {}) => any;
     } & {
         footer?: (props: {
             reset: () => void;

package/dist/components/custom/constellation/Constellation.vue.d.ts

@@ -1,90 +1,12 @@
-import { type HTMLAttributes } from "vue";
-import { type ConstellationField } from "./constellationField";
-/**
- * Constellation — a slow, geometric proximity-graph lattice on a Canvas2D
- * surface. Nodes drift + bounce; near nodes link with distance-falloff
- * hairlines; the web leans toward the cursor and taps ripple. It composes the
- * `useCanvas2D` substrate, so it inherits the offscreen / tab-hidden /
- * reduced-motion freeze for free (no hand-rolled RAF-park).
- *
- * The lattice ships NEUTRAL. A branded skin (a focal ring, a callout label) is
- * the consumer's `drawOverlay(ctx, field, now)` pass — it runs AFTER the four
- * neutral passes and receives the live field so it can pin itself to a real
- * node. Zero deck-domain content lives in the component.
- *
- * Palette reads the FULL `--constellation-*` legibility set off the canvas (the
- * node/node-dim/line colors + the edge-alpha multipliers + the field-yields-to-
- * type `--constellation-alpha` knob; neutral fallbacks), so a consumer override
- * or a dark-mode flip re-tints AND re-weights the lattice (AX.W17).
- *
- * The focal node + click-to-warp (AX.W17) is a first-class engine concept: with
- * `warpOnClick`, a click warps the focal node to the nearest drifting node via a
- * critically-damped spring stepped INSIDE the substrate's single rAF (no
- * `useSpring`, no second rAF). The consumer paints the focal mark at
- * `field.warp.{x,y}` in its `drawOverlay`.
- */
-type __VLS_Props = {
-    /** Node count. Default 64. */
-    count?: number;
-    /** Link distance in px (the falloff reach). Default 132. */
-    link?: number;
-    /** Drift speed. Default 0.16. */
-    speed?: number;
-    /**
-     * AY.W-COHERE E3 — the per-instance outer-envelope RECESSION knob (the
-     * aurora `opacityCeiling` / fourier `intensity` sibling — the SAME prop NAME
-     * the other live substrates carry, so the four-substrate recession contract is
-     * ONE vocabulary). The painted edge/node/web/ripple alpha scales by this value
-     * OVER the mode-tuned `--constellation-alpha` base, so a constellation hero can
-     * RECEDE behind content (StoryHero sets 0.4–0.6) exactly as its aurora + fourier
-     * siblings do. Default `1` is byte-identical to HEAD (the draw-alpha trace is
-     * unchanged — the default-OFF canary). NOT a second token: `--constellation-alpha`
-     * stays the mode recession base, this is the per-instance loudness envelope.
-     */
-    opacityCeiling?: number;
-    /**
-     * Seed for a REPRODUCIBLE field. A `number` or `string` (hashed) seeds the
-     * shared `mulberry32`; omit for a fresh `Math.random` field each mount.
-     */
-    seed?: number | string;
-    /** Steer-toward-cursor + tap ripples. Default true; auto-off under reduced-motion. */
-    pointerReactive?: boolean;
-    /**
-     * Click-to-warp (AX.W17). A click warps the focal node to the nearest
-     * drifting node and SPRINGS it there (critically damped, chasing the LIVE
-     * target). INDEPENDENT of `pointerReactive`. Default false; auto-off under
-     * reduced-motion (the focal mark stays put). Sugars the exposed `warpTo(...)`.
-     */
-    warpOnClick?: boolean;
-    /**
-     * Auto-DRIFT (AY.W-CON1). A periodic auto-pick re-points the focal node to a
-     * RANDOM node on a jittered cadence — the wander source on the SAME warp
-     * spring (the 2nd half of the AX.W17 "drift + warp are ONE mechanic" thesis;
-     * no second rAF, no second mechanic). `true` uses the default cadence
-     * (8–16s, the slides rhythm); `{ minIdle?, jitter? }` tunes it (ms). Default
-     * OFF — `wander` absent leaves `field.wander` undefined, byte-identical to
-     * HEAD. PRM-gated by the WARP precedent: the cadence lives inside the
-     * `!reducedMotion` step block, so under reduced-motion it never advances and
-     * the focal mark stays at its seed (NOT fire-but-freeze).
-     */
-    wander?: boolean | {
-        minIdle?: number;
-        jitter?: number;
-    };
-    /**
-     * Pointer-held GRAVITY-WELL (AY.W-CON2). Hold the pointer over the lattice and
-     * the nodes within reach are PULLED toward it (an inverse-square force on the
-     * SAME engine, no second rAF); release and the field cools back to `speed`.
-     * INDEPENDENT of `warpOnClick` and `pointerReactive` (a consumer can
-     * hold-to-pull on a non-ripple, non-warp lattice). `true` uses the tokenised
-     * `--constellation-well-*` defaults; an object overrides the gains. Default
-     * OFF — `gravityWell` absent leaves `field.well` undefined (byte-identical to
-     * HEAD; `stepField` skips the force pass). PRM-gated by the WARP precedent: the
-     * held-timer block lives inside `!reducedMotion`, so under reduced-motion the
-     * well never arms; AND the well STATE resets to neutral on the PRM-true edge
-     * (no half-ramped force frozen on).
-     */
-    gravityWell?: boolean | {
+import { type ConstellationProps } from "./constellationField";
+declare const __VLS_export: import("vue").DefineComponent<ConstellationProps, import("./composables/useConstellation").ConstellationExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ConstellationProps> & Readonly<{}>, {
+    link: number;
+    speed: number;
+    count: number;
+    opacityCeiling: number;
+    pointerReactive: boolean;
+    warpOnClick: boolean;
+    gravityWell: boolean | {
         holdMs?: number;
         gain?: number;
         reach?: number;
@@ -92,129 +14,19 @@ type __VLS_Props = {
         maxSpeed?: number;
         soften?: number;
     };
-    /**
-     * PINNED node designation (AZ.W-CON-GEN G1). A pinned node is HELD by every step
-     * pass — it does NOT drift, bounce, steer toward the cursor, or feel the
-     * gravity-well, so it stays at its seeded position (the flagged node a
-     * consumer pins). `false`/absent → no pin (every node drifts, byte-identical to
-     * HEAD); `true` → node 0 (the canonical flagged node); a number → that index. The
-     * `accentEdges` prop tints its incident edges; the `pinnedDrift` prop gently
-     * wanders it around its anchor. The `pinNode(idx)` expose re-points it imperatively.
-     */
-    pinned?: boolean | number;
-    /**
-     * ACCENT-edge skin (AZ.W-CON-GEN G2). When `true`, edges incident on the PINNED
-     * (else the FOCAL) node stroke the `--constellation-accent` tint at the
-     * `--constellation-edge-accent-alpha` weight — the flagged-node tether — while
-     * every other edge keeps the neutral register. Default OFF (the single-color
-     * neutral pass, byte-identical to HEAD). Reads the accent off the resolved palette.
-     */
-    accentEdges?: boolean;
-    /**
-     * Autonomous PINNED-ANCHOR drift (AZ.W-CON-GEN G5). When set AND a node is pinned,
-     * the pinned node gently eases around its seeded anchor within `wanderFrac`
-     * (default ±0.14 of the canvas) on a jittered cadence (a closed-form easeInOutQuad
-     * stepped inside the substrate's single rAF — no second rAF). DISTINCT from
-     * `wander` (which re-targets the warp among random nodes): this breathes the ONE
-     * pinned node around its rest. `true` uses the default cadence; an object tunes it.
-     * Default OFF — the pinned node holds dead-still (byte-identical). PRM-gated by the
-     * WARP precedent (the drift lives inside `!isStatic`; under reduce the pin holds).
-     */
-    pinnedDrift?: boolean | {
+    wander: boolean | {
+        minIdle?: number;
+        jitter?: number;
+    };
+    pinned: boolean | number;
+    accentEdges: boolean;
+    pinnedDrift: boolean | {
         wanderFrac?: number;
         durMs?: number;
         minIdle?: number;
         jitter?: number;
     };
-    /**
-     * Warp AUTO-RELEASE (AZ.W-CON-GEN G6). When `true`, a warp that has SETTLED on its
-     * target clears its `targetIdx` — the focal node releases the spring and rides its
-     * node's RAW drift (the identity-ride), freeing the spring for the next warp.
-     * Default `false` keeps the held-target behaviour (the warp chases its node
-     * forever — byte-identical to HEAD). Read the settled signal via the
-     * `warpSettled()` expose.
-     */
-    warpAutoRelease?: boolean;
-    /**
-     * Deterministic-capture freeze (AY.W-CON3). When `true`, the lattice lays
-     * out ONE reproducible STATIC frame and does NOT advance — seeded layout
-     * (set `seed` for a stable field ACROSS runs; an unseeded freeze still
-     * freezes but lays out a one-shot `Math.random` frame), no `stepField`, no
-     * ripple / warp / wander / well advance, and a FROZEN `now` handed to
-     * `drawOverlay` so a phase-driven skin (`(now % T) / T`) resolves to a fixed
-     * value (the pulse-ring radius is identical frame-over-frame). Omit to
-     * AUTO-DERIVE from `location.search` matching `export | print | freeze` (the
-     * deploy-pipeline contract — a consumer's pptx / print / screenshot capture
-     * gets a stable frame with zero per-consumer wiring). An explicit
-     * `:freeze="false"` forces live even under a capture URL. Unifies with the
-     * reduced-motion one-static-frame path — `freeze || reducedMotion` is the
-     * single static-frame predicate; the capture takes no input (the pointer /
-     * warp / well listeners are NOT registered under freeze).
-     */
-    freeze?: boolean;
-    class?: HTMLAttributes["class"];
-    /**
-     * The skin seam. Runs after the neutral passes with the live field, so a
-     * consumer paints its own focal mark pinned to a real node — read
-     * `field.warp.{x,y}` for the spring-eased focal position when `warpOnClick`
-     * is on. The branded content (a domain accent, a callout label) lives HERE,
-     * in the consumer. Under `freeze` it receives a FROZEN `now`, so a phase-
-     * driven mark resolves to a fixed value.
-     */
-    drawOverlay?: (ctx: CanvasRenderingContext2D, field: ConstellationField, now: number) => void;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    /** The live field (the low-level imperative seam — for a custom overlay). */
-    field: ConstellationField;
-    /**
-     * The resolved deterministic-capture predicate (AY.W-CON3) — `true` when the
-     * lattice is laying out a frozen static frame (`freeze` prop OR a
-     * `?export|print|freeze` URL OR reduced-motion via the substrate). A read-only
-     * test/debug seam (the π freeze-live spec reads it to confirm the auto-derive
-     * fired without inferring from drift).
-     */
-    isFrozen: import("vue").ComputedRef<boolean>;
-    /**
-     * Imperative warp (AX.W17). Two call shapes:
-     *   `warpTo(localPoint)`              — `{x, y}` already in canvas-local px
-     *                                        (the lower primitive).
-     *   `warpTo(clientX, clientY)`        — client coords, mapped via the
-     *                                        deck-scale `toLocal` (the sugar
-     *                                        `warpOnClick` calls internally).
-     * The focal node re-points to the nearest drifting node + springs there.
-     * Returns the chosen node index, or -1 on a degenerate no-op. No-op under
-     * reduced-motion (the spring does not advance while the substrate is frozen).
-     */
-    warpTo(a: {
-        x: number;
-        y: number;
-    } | number, b?: number): number;
-    /**
-     * Imperatively ARM the gravity-well at a canvas-LOCAL point (AY.W-CON2) — the
-     * π-lane test seam that drives the well WITHOUT racing a real held-pointer
-     * gesture + the held-timer. Sets the well position + `target = 1` directly (the
-     * timer is bypassed; the ramp still eases `strength` over the next frames). No-op
-     * when `gravityWell` is off (no `field.well`). Returns true when the well armed.
-     */
-    holdWellAt(x: number, y: number): boolean;
-    /** Imperatively RELEASE the well (AY.W-CON2) — `target → 0`, the field cools. */
-    releaseWell(): void;
-    /**
-     * The warp settled signal (AZ.W-CON-GEN G6) — `true` when the warp spring has
-     * ARRIVED on its target (no active warp, OR the focal's gap to its live target is
-     * within the settle band). A consumer polls this to know if a click-warp / wander
-     * re-target is still in flight (the `isSettled` read). A read-only seam over the
-     * engine `warpSettled`.
-     */
-    warpSettled(): boolean;
-    /**
-     * Imperatively PIN a node (AZ.W-CON-GEN G1) — re-points `field.pinnedIndex` to
-     * `idx` so that node is HELD by every step pass (it stops drifting and holds its
-     * current position). `idx < 0` clears the pin (every node drifts again). The
-     * pinned node's incident edges tint accent under `accentEdges`; it wanders its
-     * anchor under `pinnedDrift` (the cadence re-anchors on its next armed leg).
-     */
-    pinNode(idx: number): void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    warpAutoRelease: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/custom/constellation/composables/useConstellation.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from "vue";
+import { type ConstellationField, type ConstellationProps } from "../constellationField";
+/** The imperative seam the SFC re-exposes via `defineExpose`. */
+export interface ConstellationExpose {
+    field: ConstellationField;
+    isFrozen: Ref<boolean>;
+    warpTo(a: {
+        x: number;
+        y: number;
+    } | number, b?: number): number;
+    holdWellAt(x: number, y: number): boolean;
+    releaseWell(): void;
+    warpSettled(): boolean;
+    pinNode(idx: number): void;
+}
+/**
+ * Drive a `<Constellation>` instance. `props` is the REACTIVE (defaulted) prop
+ * surface — the per-frame live-read props (`pointerReactive`/`opacityCeiling`/
+ * `accentEdges`/`drawOverlay`) are read off `props.x` INSIDE the render loop so a
+ * bound `:opacity-ceiling` updates without a remount (the Vue 3.5 reactive-prop
+ * read; the SFC `defineProps` destructure transform does not reach a composable
+ * argument, so the live reads stay on `props`). `hostRef`/`canvasRef` are the SFC
+ * template refs. Returns the imperative expose object the SFC spreads into
+ * `defineExpose`.
+ */
+export declare function useConstellation(props: ConstellationProps, hostRef: Ref<HTMLElement | null>, canvasRef: Ref<HTMLCanvasElement | null>): ConstellationExpose;