@3driseai/3drise-viewer 0.1.26 → 0.1.28

package/dist/components/RadarGrid.d.ts

@@ -1,24 +1,19 @@
 import type { ThreeElements } from '@react-three/fiber';
 import type { ObjectReadyProps } from '../types/objectReady';
 import type { RadarGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
 export interface RadarGridProps extends ObjectReadyProps {
     config?: RadarGridConfig;
     groupProps?: ThreeElements['group'];
+    /** Scene object id: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this grid's config knobs (animations.grid.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this grid's config knobs (mouseMove.grid). */
+    mouseMove?: MouseMoveDomain;
 }
 /** RadarGridConfig — the single source of truth for a radar grid instance. */
 export declare const defaultRadarGridConfig: RadarGridConfig;
-/**
- * A polar HUD — concentric rings and radial spokes instead of an X/Y lattice,
- * masked to a disc of `fadeDistance` rather than filling its square plane.
- *
- * A sweep arm rotates with a decaying trail, contacts light as it crosses them
- * and fade until it comes back around, and `lineMode` 1 sends ping rings out
- * from the focus point. Set `sweepWidth` to 0 for a static instrument face,
- * `spokes` to 0 for rings only.
- *
- * Note that `fadeDistance` is the disc radius here, so keep `size` at least
- * twice it or the disc gets clipped by its own plane.
- */
-export declare function RadarGrid({ config, groupProps, onObjectReady, onObjectDispose }: RadarGridProps): import("react").JSX.Element;
+export declare function RadarGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: RadarGridProps): import("react").JSX.Element;
 export default RadarGrid;
 //# sourceMappingURL=RadarGrid.d.ts.map

package/dist/components/RadarGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadarGrid.d.ts","sourceRoot":"","sources":["../../src/components/RadarGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,EAAE,eA4BpC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BAiExH;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"RadarGrid.d.ts","sourceRoot":"","sources":["../../src/components/RadarGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAKD,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,EAAE,eA4BpC,CAAC;AAuBF,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BA6ClJ;AAED,eAAe,SAAS,CAAC"}

package/dist/components/RadarGrid.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 import { useGridSurface } from '../hooks/useGridSurface.js';
-import { RadarGridMaterial } from '@3driseai/3drise-core';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { RadarGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
 // Side-effect import registers <radarGridMaterial> via extend().
 void RadarGridMaterial;
 /** RadarGridConfig — the single source of truth for a radar grid instance. */
@@ -48,24 +51,39 @@ export const defaultRadarGridConfig = {
  * Note that `fadeDistance` is the disc radius here, so keep `size` at least
  * twice it or the disc gets clipped by its own plane.
  */
-export function RadarGrid({ config = defaultRadarGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['spokes', 'sweepWidth', 'blipDensity'];
+/** No computed uniforms: every knob maps straight to its u_<key>. */
+const DERIVE = {};
+/** Knobs that rebuild the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL, 'spokes'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.radarGrid ?? []).map((p) => p.value));
+export function RadarGrid({ config = defaultRadarGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
     const matRef = useRef(null);
     const rootRef = useRef(null);
     const meshRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const { cellSize, size, segments, flat, lineMode, cellMode, lineWidth, sectionSize, sectionWidth, animSpeed, animScale, animIntensity, fadeDistance, fadeStrength, displace, spokes, sweepWidth, blipDensity, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // The committed config over this grid's defaults: every knob has a value to render
+    // and for a keyframe or pointer binding to start from.
+    const base = useMemo(() => withConfigDefaults(defaultRadarGridConfig, config), [config]);
+    const { cellSize, size, segments, flat, displace, followMouse, reveal, revealDuration } = base;
     const segs = segments ?? (displace > 0
         ? Math.min(256, Math.max(64, Math.ceil(size / Math.max(cellSize, 1e-4)) * 4))
         : 1);
-    const fade = fadeDistance ?? size * 0.5;
-    const colors = useMemo(() => ({
-        line: new THREE.Color(lineColor),
-        section: new THREE.Color(sectionColor),
-        cell: new THREE.Color(cellColor),
-        glow: new THREE.Color(glowColor),
-        bg: new THREE.Color(bgColor),
-    }), [lineColor, sectionColor, cellColor, glowColor, bgColor]);
     useGridSurface(matRef, meshRef, { followMouse, reveal, revealDuration });
-    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("radarGridMaterial", { ref: matRef, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, u_cellSize: cellSize, u_lineWidth: lineWidth, u_sectionSize: sectionSize, u_sectionWidth: sectionWidth, u_lineMode: lineMode, u_cellMode: cellMode, u_animSpeed: animSpeed, u_animScale: animScale, u_animIntensity: animIntensity, u_fadeDistance: fade, u_fadeStrength: fadeStrength, u_displace: displace, u_spokes: spokes, u_sweepWidth: sweepWidth, u_blipDensity: blipDensity, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, RadarGridMaterial.key)] }) }));
+    // One push point for every uniform the config owns: the committed config when the
+    // material mounts or the config commits, the merged one while anything overrides it.
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyGridConfig(m, baseRef.current, VARIANT, DERIVE);
+    }, []);
+    useLayoutEffect(() => { applyGridConfig(matRef.current, base, VARIANT, DERIVE); }, [base]);
+    const push = useCallback((merged) => applyGridConfig(matRef.current, merged, VARIANT, DERIVE), []);
+    useConfigDriver({ rootRef, id, family: 'grids', base, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("radarGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, RadarGridMaterial.key)] }) }));
 }
 export default RadarGrid;

package/dist/components/ReactionDiffusionGrid.d.ts

@@ -1,15 +1,22 @@
 import type { ThreeElements } from '@react-three/fiber';
 import type { ObjectReadyProps } from '../types/objectReady';
 import type { ReactionDiffusionGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
 export interface ReactionDiffusionGridProps extends ObjectReadyProps {
     config?: ReactionDiffusionGridConfig;
     groupProps?: ThreeElements['group'];
+    /** Scene object id: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this grid's config knobs (animations.grid.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this grid's config knobs (mouseMove.grid). */
+    mouseMove?: MouseMoveDomain;
 }
 /** ReactionDiffusionGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
 export declare const defaultReactionDiffusionGridConfig: ReactionDiffusionGridConfig;
 /**
  * A Gray-Scott reaction-diffusion field simulated on the GPU and sampled by the plane: coral, labyrinths and dividing spots grow, merge and keep evolving, wrapped seamlessly as a torus.
  */
-export declare function ReactionDiffusionGrid({ config, groupProps, onObjectReady, onObjectDispose }: ReactionDiffusionGridProps): import("react").JSX.Element;
+export declare function ReactionDiffusionGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: ReactionDiffusionGridProps): import("react").JSX.Element;
 export default ReactionDiffusionGrid;
 //# sourceMappingURL=ReactionDiffusionGrid.d.ts.map

package/dist/components/ReactionDiffusionGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionDiffusionGrid.d.ts","sourceRoot":"","sources":["../../src/components/ReactionDiffusionGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB;IAChE,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,wGAAwG;AACxG,eAAO,MAAM,kCAAkC,EAAE,2BA6BhD,CAAC;AAuTF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,MAA2C,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,0BAA0B,+BAgF5J;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ReactionDiffusionGrid.d.ts","sourceRoot":"","sources":["../../src/components/ReactionDiffusionGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB;IAChE,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAKD,wGAAwG;AACxG,eAAO,MAAM,kCAAkC,EAAE,2BA6BhD,CAAC;AA+LF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,MAA2C,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,0BAA0B,+BA0DtL;AAED,eAAe,qBAAqB,CAAC"}

package/dist/components/ReactionDiffusionGrid.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
 import * as THREE from 'three';
 import { useFrame } from '@react-three/fiber';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 import { useGridSurface } from '../hooks/useGridSurface.js';
-import { ReactionDiffusionGridMaterial } from '@3driseai/3drise-core';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { ReactionDiffusionGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
 // Side-effect import registers <reactionDiffusionGridMaterial> via extend().
 void ReactionDiffusionGridMaterial;
 /** ReactionDiffusionGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
@@ -38,124 +41,6 @@ export const defaultReactionDiffusionGridConfig = {
     reveal: 1,
     revealDuration: 0,
 };
-const gridFragHeader = /* glsl */ `
-  precision highp float;
-
-  uniform float u_time;
-  uniform float u_cellSize;
-  uniform float u_lineWidth;
-  uniform float u_sectionSize;
-  uniform float u_sectionWidth;
-  uniform vec3  u_lineColor;
-  uniform vec3  u_sectionColor;
-  uniform vec3  u_cellColor;
-  uniform vec3  u_glowColor;
-  uniform vec3  u_bgColor;
-  uniform float u_bgOpacity;
-  uniform float u_lineMode;
-  uniform float u_cellMode;
-  uniform float u_animSpeed;
-  uniform float u_animScale;
-  uniform float u_animIntensity;
-  uniform float u_fadeDistance;
-  uniform float u_fadeStrength;
-  uniform vec2  u_focus;
-  uniform float u_reveal;
-
-  varying vec2 vGridPos;
-
-  float lineAt(float c, float width, float fp){
-    float d = abs(fract(c - 0.5) - 0.5);
-    return 1.0 - clamp(d / max(fp * max(width, 0.05), 1e-6), 0.0, 1.0);
-  }
-`;
-const gridCommon = /* glsl */ `
-  const float PI  = 3.14159265359;
-  const float TAU = 6.28318530718;
-
-  float hash21(vec2 p){
-    p = fract(p * vec2(123.34, 456.21));
-    p += dot(p, p + 45.32);
-    return fract(p.x * p.y);
-  }
-`;
-const gridTail = /* glsl */ `
-    // ---- line animation --------------------------------------------------
-    float lineAnim = 1.0;
-    if (u_lineMode > 0.5){
-      if (u_lineMode < 1.5){
-        lineAnim = 0.5 + 0.5 * sin(cellDist * u_animScale - t);
-      } else if (u_lineMode < 2.5){
-        lineAnim = 0.5 + 0.5 * sin(flowCoord * u_animScale - t);
-      } else if (u_lineMode < 3.5){
-        float s = fract(scanCoord * 0.05 * u_animScale - t * 0.15);
-        lineAnim = 0.25 + smoothstep(0.0, 0.15, s) * (1.0 - smoothstep(0.15, 0.35, s));
-      } else {
-        lineAnim = 0.5 + 0.5 * sin(t);
-      }
-    }
-    lineAnim = mix(1.0, lineAnim, u_animIntensity);
-
-    // ---- cell fill -------------------------------------------------------
-    float cell = 0.0;
-    if (u_cellMode > 0.5){
-      if (u_cellMode < 1.5){
-        cell = 0.5 + 0.5 * sin(flowCoord * 0.5 * u_animScale - t);
-      } else if (u_cellMode < 2.5){
-        cell = 0.5 + 0.5 * sin(t * (0.6 + cellH) + cellH * TAU);
-      } else if (u_cellMode < 3.5){
-        cell = smoothstep(0.6, 1.0, sin(cellDist * u_animScale - t));
-      } else {
-        cell = step(0.5, cellH) * (0.5 + 0.5 * sin(t));
-      }
-    }
-    cell *= u_animIntensity * edgeKeep;
-
-    float tone = step(0.55, cellH);
-
-    vec3 col = u_bgColor * u_bgOpacity;
-    float a  = u_bgOpacity;
-
-    col += mix(u_cellColor, u_cellColor * 2.2, tone) * cell;
-    a = max(a, cell * 0.9);
-    float linesI = lines * lineAnim;
-    col += u_lineColor * linesI;            a = max(a, linesI);
-    float accentI = accent * lineAnim;
-    col += u_sectionColor * accentI;        a = max(a, accentI);
-    col += u_glowColor * (linesI * 0.2 + cell * 0.35) * u_animIntensity;
-
-    col = col * regionMask + extraCol;
-    a   = max(a * regionMask, extraA);
-
-    float fade = 1.0 - smoothstep(1.0 - u_fadeStrength, 1.0, fadeR);
-    col *= fade;
-    a   *= fade;
-
-    // ---- reveal ----------------------------------------------------------
-    // The build boundary sweeps outward from the focus point with a bright
-    // leading edge, so the grid reads as assembling itself.
-    if (u_reveal < 0.999){
-      float rd = length(vGridPos - u_focus) / max(u_fadeDistance, 1e-4);
-      float edge = u_reveal * 1.1;
-      float mask = 1.0 - smoothstep(edge - 0.05, edge, rd);
-      float front = mask * smoothstep(edge - 0.22, edge - 0.05, rd);
-      col = col * mask + u_glowColor * front * (a * 1.8 + 0.08);
-      a   = max(a * mask, front * 0.10);
-    }
-
-    if (a < 0.002) discard;
-    gl_FragColor = vec4(col, a);
-  }
-`;
-const gridVertexHead = /* glsl */ `
-  uniform float u_time;
-  uniform float u_cellSize;
-  uniform float u_displace;
-  uniform float u_animSpeed;
-  uniform float u_animScale;
-
-  varying vec2 vGridPos;
-`;
 // ---------------------------------------------------------------------------
 // Gray-Scott reaction-diffusion. Two chemicals diffuse at different rates and
 // react as u + 2v -> 3v: the autocatalyst v eats u, u is fed in at rate F and
@@ -237,12 +122,6 @@ const seedFrag = /* glsl */ `
     gl_FragColor = vec4(1.0 - 0.5 * blob, 0.25 * blob, 0.0, 1.0);
   }
 `;
-function createExtraUniforms() {
-    return {
-        u_field: { value: null },
-        u_tileCells: { value: 7 },
-    };
-}
 /** The simulation: two half-float targets ping-ponged through the Gray-Scott step. */
 function createRuntime(u, renderer, c) {
     const targetOptions = {
@@ -335,26 +214,41 @@ function disposeRuntime(rt) {
     rt.simMaterial.dispose();
     rt.seedMaterial.dispose();
 }
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['feed', 'kill', 'variation', 'tileCells'];
+/** No computed uniforms: every knob maps straight to its u_<key>. */
+const DERIVE = {};
+/** Knobs that rebuild the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL, 'tileCells'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.reactionDiffusionGrid ?? []).map((p) => p.value));
 /**
  * A Gray-Scott reaction-diffusion field simulated on the GPU and sampled by the plane: coral, labyrinths and dividing spots grow, merge and keep evolving, wrapped seamlessly as a torus.
  */
-export function ReactionDiffusionGrid({ config = defaultReactionDiffusionGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+export function ReactionDiffusionGrid({ config = defaultReactionDiffusionGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
     const matRef = useRef(null);
     const rootRef = useRef(null);
     const meshRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const { cellSize, size, segments, flat, lineMode, cellMode, lineWidth, sectionSize, sectionWidth, animSpeed, animScale, animIntensity, fadeDistance, fadeStrength, displace, feed, kill, variation, tileCells, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // The committed config over this grid's defaults: every knob has a value to render
+    // and for a keyframe or pointer binding to start from.
+    const base = useMemo(() => withConfigDefaults(defaultReactionDiffusionGridConfig, config), [config]);
+    const { cellSize, size, segments, flat, displace, followMouse, reveal, revealDuration } = base;
     // the relief follows the pattern itself, which is a few texels wide
     const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(128, Math.ceil(size / Math.max(cellSize, 1e-4)) * 12)) : 1);
-    const fade = fadeDistance ?? size * 0.5;
-    const colors = useMemo(() => ({
-        line: new THREE.Color(lineColor),
-        section: new THREE.Color(sectionColor),
-        cell: new THREE.Color(cellColor),
-        glow: new THREE.Color(glowColor),
-        bg: new THREE.Color(bgColor),
-    }), [lineColor, sectionColor, cellColor, glowColor, bgColor]);
     useGridSurface(matRef, meshRef, { followMouse, reveal, revealDuration });
+    // One push point for every uniform the config owns: the committed config when the
+    // material mounts or the config commits, the merged one while anything overrides it.
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyGridConfig(m, baseRef.current, VARIANT, DERIVE);
+    }, []);
+    useLayoutEffect(() => { applyGridConfig(matRef.current, base, VARIANT, DERIVE); }, [base]);
+    const push = useCallback((merged) => applyGridConfig(matRef.current, merged, VARIANT, DERIVE), []);
+    useConfigDriver({ rootRef, id, family: 'grids', base, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     // the simulation behind this grid: created on mount, stepped every frame
     const runtimeRef = useRef(null);
     useFrame((state, delta) => {
@@ -362,8 +256,8 @@ export function ReactionDiffusionGrid({ config = defaultReactionDiffusionGridCon
         if (!mat)
             return;
         if (!runtimeRef.current)
-            runtimeRef.current = createRuntime(mat.uniforms, state.gl, config);
-        updateRuntime(runtimeRef.current, mat.uniforms, config, Math.min(delta, 0.1), state.gl);
+            runtimeRef.current = createRuntime(mat.uniforms, state.gl, base);
+        updateRuntime(runtimeRef.current, mat.uniforms, base, Math.min(delta, 0.1), state.gl);
     });
     useEffect(() => () => {
         if (runtimeRef.current) {
@@ -371,6 +265,6 @@ export function ReactionDiffusionGrid({ config = defaultReactionDiffusionGridCon
             runtimeRef.current = null;
         }
     }, []);
-    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("reactionDiffusionGridMaterial", { ref: matRef, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, u_cellSize: cellSize, u_lineWidth: lineWidth, u_sectionSize: sectionSize, u_sectionWidth: sectionWidth, u_lineMode: lineMode, u_cellMode: cellMode, u_animSpeed: animSpeed, u_animScale: animScale, u_animIntensity: animIntensity, u_fadeDistance: fade, u_fadeStrength: fadeStrength, u_displace: displace, u_feed: feed, u_kill: kill, u_variation: variation, u_tileCells: tileCells, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, ReactionDiffusionGridMaterial.key)] }) }));
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("reactionDiffusionGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, ReactionDiffusionGridMaterial.key)] }) }));
 }
 export default ReactionDiffusionGrid;

package/dist/components/SceneBuilder.js

@@ -148,7 +148,7 @@ const SceneBuilder = forwardRef(({ project, width = "100%", height = "100vh", st
                     onSceneInitialized();
                 }
                 onSceneReady?.(sceneHandle);
-            }, children: _jsxs(Physics, { gravity: physicsSettings.gravity, paused: !physicsSettings.enabled, debug: physicsSettings.debug, children: [_jsx(LightsManager, { config: lighting[0], onObjectReady: onObjectReady, onObjectDispose: onObjectDispose }), environment && _jsx(EnvironmentManager, { environment: environment, timeSettings: timeSettings, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose }), _jsx(CameraController, { settings: camera, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose }), _jsx(ObjectsRenderer, { cameraSettings: camera, generalObjectSettings: generalObjectSettings, createdObjects: sceneObjects, onObjectsReady: undefined, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose, sequences: animationSequences, clips: animationClips, actionSequences: actionSequences, handleObjectClick: onObjectClick ? (object, ref, event) => onObjectClick(object, ref, event) : undefined }), _jsx(ClipPlayer, { autoplay: clipAutoplay, getSettings: (state) => resolveElementSettings(state, {
+            }, children: _jsxs(Physics, { gravity: physicsSettings.gravity, paused: !physicsSettings.enabled, debug: physicsSettings.debug, children: [_jsx(LightsManager, { config: lighting[0], onObjectReady: onObjectReady, onObjectDispose: onObjectDispose }), environment && _jsx(EnvironmentManager, { environment: environment, timeSettings: timeSettings, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose }), _jsx(CameraController, { settings: camera, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose }), _jsx(ObjectsRenderer, { cameraSettings: camera, generalObjectSettings: generalObjectSettings, createdObjects: sceneObjects, onObjectsReady: undefined, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose, sequences: animationSequences, clips: animationClips, actionSequences: actionSequences, handleObjectClick: onObjectClick ? (object, ref, event) => onObjectClick(object, ref, event) : undefined }), _jsx(ClipPlayer, { autoplay: clipAutoplay, getAction: (id) => actionSequences?.find((a) => a.id === id), getSettings: (state) => resolveElementSettings(state, {
                             objects: sceneObjects,
                             camera,
                             sky: environment?.sky,

package/dist/components/SkySystem.d.ts

@@ -1,7 +1,7 @@
 import type { ObjectReadyProps } from '../types/objectReady';
 import * as THREE from 'three';
 import type { TimeSettings, SkySettings, FogSettings } from '@3driseai/3drise-core';
-import type { VolumetricCloudsSettings } from '../types/cloudConfigs';
+import type { VolumetricCloudsSettings } from '@3driseai/3drise-core';
 import React from 'react';
 /**
  * Sky, sun and everything lit by them.

package/dist/components/SparklesBurst.d.ts

@@ -1,9 +1,15 @@
 import type { ObjectReadyProps } from '../types/objectReady';
-import type { SparklesBurstConfig } from '@3driseai/3drise-core';
+import type { AnimationOptions, MouseMoveDomain, SparklesBurstConfig } from '@3driseai/3drise-core';
 import React from "react";
 export interface SparklesBurstProps extends ObjectReadyProps {
     config: SparklesBurstConfig;
     boundingRadius?: number;
+    /** Scene object id of a standalone effect: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this effect's config knobs (animations.effect.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this effect's config knobs (mouseMove.effect). */
+    mouseMove?: MouseMoveDomain;
 }
 declare const SparklesBurst: React.FC<SparklesBurstProps>;
 export default SparklesBurst;

package/dist/components/SparklesBurst.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklesBurst.d.ts","sourceRoot":"","sources":["../../src/components/SparklesBurst.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IACxD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAGD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwD/C,CAAC;AACF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SparklesBurst.d.ts","sourceRoot":"","sources":["../../src/components/SparklesBurst.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACpG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IACxD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,yEAAyE;IACzE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAsBD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2C/C,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/components/SparklesBurst.js

@@ -1,11 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useObjectReady } from '../hooks/useObjectReady.js';
-import { useEffect, useMemo, useRef } from 'react';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
-import { SparklesBurstMaterial } from '@3driseai/3drise-core';
-const SparklesBurst = ({ config, boundingRadius, onObjectReady, onObjectDispose }) => {
-    const planeSize = useMemo(() => Math.max(0.05, config.scale ?? 2.5), [config.scale]);
+import { SparklesBurstMaterial, DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from '@3driseai/3drise-core';
+/** Knobs that rebuild the plane or retime the burst cycle: commit only, never live. */
+const STRUCTURAL = ['scale', 'loop', 'durationMs'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.sparklesBurst.map((p) => p.value));
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(material, c) {
+    const u = material.uniforms;
+    u.uCoreColor.value.set(c.coreColor);
+    u.uBurstColor.value.set(c.burstColor);
+    u.uRayCount.value = Math.max(3, c.rayCount);
+    u.uIntensity.value = c.intensity;
+    u.uOpacity.value = c.opacity;
+    u.uHoverColor.value.set(c.hoverColor);
+    u.uHoverRadius.value = c.hoverRadius;
+    u.uHoverIntensity.value = c.hoverIntensity;
+}
+const SparklesBurst = ({ config, boundingRadius, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.sparklesBurst, config), [config]);
+    const planeSize = useMemo(() => Math.max(0.05, cfg.scale), [cfg.scale]);
     const geometry = useMemo(() => new THREE.PlaneGeometry(planeSize, planeSize, 1, 1), [planeSize]);
     const material = useMemo(() => {
         const m = new SparklesBurstMaterial();
@@ -15,42 +34,26 @@ const SparklesBurst = ({ config, boundingRadius, onObjectReady, onObjectDispose
         m.blending = THREE.AdditiveBlending;
         return m;
     }, []);
-    useEffect(() => {
-        const u = material.uniforms;
-        u.uCoreColor.value.set(config.coreColor ?? '#ffffff');
-        u.uBurstColor.value.set(config.burstColor ?? '#ffaa00');
-        u.uRayCount.value = Math.max(3, config.rayCount ?? 8);
-        u.uIntensity.value = config.intensity ?? 1.0;
-        u.uOpacity.value = config.opacity ?? 1.0;
-        u.uHoverColor.value.set(config.hoverColor ?? '#ffffff');
-        u.uHoverRadius.value = config.hoverRadius ?? 0.3;
-        u.uHoverIntensity.value = config.hoverIntensity ?? 0.0;
-    }, [
-        config.coreColor,
-        config.burstColor,
-        config.rayCount,
-        config.intensity,
-        config.opacity,
-        config.hoverColor,
-        config.hoverRadius,
-        config.hoverIntensity,
-        material,
-    ]);
     useEffect(() => () => { geometry.dispose(); material.dispose(); }, [geometry, material]);
     // Track elapsed time JS-side so loop on/off toggles cleanly without
     // depending on the global clock for the progress phase.
     const startRef = useRef(null);
     const rootRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
+    const push = useCallback((merged) => {
+        applyConfig(material, merged);
+    }, [material]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     // Reset start when loop toggles so behaviour is predictable.
-    useEffect(() => { startRef.current = null; }, [config.loop, config.durationMs]);
+    useEffect(() => { startRef.current = null; }, [cfg.loop, cfg.durationMs]);
     useFrame((state) => {
         const now = state.clock.getElapsedTime();
         if (startRef.current === null)
             startRef.current = now;
         const elapsedMs = (now - startRef.current) * 1000;
-        const duration = Math.max(1, config.durationMs ?? 1500);
-        const loop = config.loop ?? true;
+        const duration = Math.max(1, cfg.durationMs);
+        const loop = cfg.loop;
         const progress = loop
             ? (elapsedMs % duration) / duration
             : Math.min(elapsedMs / duration, 1);

package/dist/components/TerrainBuilder.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SkySettings, TimeSettings } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../types/objectReady';
-import type { ProceduralTerrainSettings } from '../types/terrainConfigs';
+import type { ProceduralTerrainSettings } from '@3driseai/3drise-core';
 export interface TerrainBuilderProps extends ObjectReadyProps {
     /** Accepts a partial or older-shaped blob — including core's retired flat
      *  `TerrainSettings`, which has no `config` and normalises to nothing rather

package/dist/components/TerrainBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TerrainBuilder.d.ts","sourceRoot":"","sources":["../../src/components/TerrainBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAOzE,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IACzD;;mEAE+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+BjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"TerrainBuilder.d.ts","sourceRoot":"","sources":["../../src/components/TerrainBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAOvE,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IACzD;;mEAE+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+BjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/TerrainBuilder.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { normalizeTerrain, normalizeTerrainQuality } from '../types/terrainConfigs.js';
+import { normalizeTerrain, normalizeTerrainQuality } from '@3driseai/3drise-core';
 import Mountains from './terrain/Mountains.js';
 import Dunes from './terrain/Dunes.js';
 import Hills from './terrain/Hills.js';

package/dist/components/TruchetGrid.d.ts

@@ -0,0 +1,25 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { TruchetGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
+export interface TruchetGridProps extends ObjectReadyProps {
+    config?: TruchetGridConfig;
+    groupProps?: ThreeElements['group'];
+    /** Scene object id: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this grid's config knobs (animations.grid.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this grid's config knobs (mouseMove.grid). */
+    mouseMove?: MouseMoveDomain;
+}
+/** TruchetGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultTruchetGridConfig: TruchetGridConfig;
+/**
+ * Smith quarter-circle Truchet tiles: arcs always meet arcs, so the plane fills with endless two-coloured loops. Tiles re-deal by turning a quarter turn, and comets travel the loops in one direction.
+ *
+ * The grid always lies flat: any other orientation, and any movement of the
+ * whole, is the parent object's transform. Only what happens inside it animates.
+ */
+export declare function TruchetGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: TruchetGridProps): import("react").JSX.Element;
+export default TruchetGrid;
+//# sourceMappingURL=TruchetGrid.d.ts.map

package/dist/components/TruchetGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruchetGrid.d.ts","sourceRoot":"","sources":["../../src/components/TruchetGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAKD,8FAA8F;AAC9F,eAAO,MAAM,wBAAwB,EAAE,iBA2BtC,CAAC;AAWF;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAiC,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,gBAAgB,+BA4CxJ;AAED,eAAe,WAAW,CAAC"}

package/dist/components/TruchetGrid.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useObjectReady } from '../hooks/useObjectReady.js';
+import { useGridSurface } from '../hooks/useGridSurface.js';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { TruchetGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
+// Side-effect import registers <truchetGridMaterial> via extend().
+void TruchetGridMaterial;
+/** TruchetGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultTruchetGridConfig = {
+    cellSize: 3,
+    size: 50,
+    segments: undefined,
+    lineMode: 0,
+    cellMode: 0,
+    lineWidth: 1.3,
+    sectionSize: 4,
+    sectionWidth: 1.2,
+    animSpeed: 1,
+    animScale: 0.5,
+    animIntensity: 0.6,
+    fadeDistance: undefined,
+    fadeStrength: 0.7,
+    displace: 0,
+    flip: 0.25,
+    bias: 0.5,
+    pulse: 0.8,
+    regionFill: 0.8,
+    lineColor: '#a052e0',
+    sectionColor: '#4a2a66',
+    cellColor: '#2a0f45',
+    glowColor: '#ff7ad9',
+    bgColor: '#07030d',
+    bgOpacity: 0,
+    reveal: 1,
+    revealDuration: 0,
+};
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['flip', 'bias', 'pulse', 'regionFill'];
+/** No computed uniforms: every knob maps straight to its u_<key>. */
+const DERIVE = {};
+/** Knobs that reshape the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.truchetGrid ?? []).map((p) => p.value));
+/**
+ * Smith quarter-circle Truchet tiles: arcs always meet arcs, so the plane fills with endless two-coloured loops. Tiles re-deal by turning a quarter turn, and comets travel the loops in one direction.
+ *
+ * The grid always lies flat: any other orientation, and any movement of the
+ * whole, is the parent object's transform. Only what happens inside it animates.
+ */
+export function TruchetGrid({ config = defaultTruchetGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
+    const matRef = useRef(null);
+    const rootRef = useRef(null);
+    const meshRef = useRef(null);
+    useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
+    // The committed config over this grid's defaults: every knob has a value to render
+    // and for a keyframe or pointer binding to start from.
+    const base = useMemo(() => withConfigDefaults(defaultTruchetGridConfig, config), [config]);
+    const { cellSize, size, segments, displace, reveal, revealDuration } = base;
+    const segs = segments ?? (displace > 0
+        ? Math.min(256, Math.max(64, Math.ceil(size / Math.max(cellSize, 1e-4)) * 2))
+        : 1);
+    useGridSurface(matRef, meshRef, { reveal, revealDuration });
+    // One push point for every uniform the config owns: the committed config when the
+    // material mounts or the config commits, the merged one while anything overrides it.
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyGridConfig(m, baseRef.current, VARIANT, DERIVE);
+    }, []);
+    useLayoutEffect(() => { applyGridConfig(matRef.current, base, VARIANT, DERIVE); }, [base]);
+    const push = useCallback((merged) => applyGridConfig(matRef.current, merged, VARIANT, DERIVE), []);
+    useConfigDriver({ rootRef, id, family: 'grids', base, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: [-Math.PI / 2, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("truchetGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, TruchetGridMaterial.key)] }) }));
+}
+export default TruchetGrid;