@3driseai/3drise-viewer 0.1.26 → 0.1.28

package/dist/components/effects/DataStreamEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useMemo } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
-import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
 // Dual counter-rotating helices with cold→hot color gradient.
 // All animation is GPU-side — only u_time updates per frame.
 const vertexShader = /* glsl */ `
@@ -13,6 +15,7 @@ const vertexShader = /* glsl */ `
 
   uniform float u_time;
   uniform float u_speed;
+  uniform float uFlow;  // integrated on the CPU: speed changes never jump
   uniform float uRadius;
   uniform float uTurns;
   uniform float uHeight;
@@ -39,7 +42,7 @@ const vertexShader = /* glsl */ `
     // Second strand runs the opposite direction, phase-shifted by half turn
     float dir    = aStrand > 0.5 ? -1.0 : 1.0;
     float phase  = aStrand > 0.5 ? TAU * 0.5 : 0.0;
-    float t      = fract(aT + aOffset + u_time * u_speed * dir);
+    float t      = fract(aT + aOffset + uFlow * dir);
 
     float angle  = t * uTurns * TAU + phase;
     float y      = (t - 0.5) * uHeight;
@@ -88,15 +91,33 @@ const fragmentShader = /* glsl */ `
     gl_FragColor = vec4(vColor, vAlpha * uOpacity * (glow + star));
   }
 `;
-const DataStreamEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { particleCount, spiralTurns, streamRadius, inward, particleSize, opacity, speed, intensity, color = '#ffffff', coldColor = '#0d26e6', midColor = '#00d9ff', hotColor = '#ffeb8c', } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the object: commit only, never live. */
+const STRUCTURAL = ['particleCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.dataStream.map((p) => p.value));
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(mat, c, bound) {
+    const u = mat.uniforms;
+    u.u_speed.value = c.speed * (c.inward ? -1 : 1);
+    u.uRadius.value = bound * c.streamRadius;
+    u.uTurns.value = c.spiralTurns;
+    u.uHeight.value = bound * 2.6;
+    u.uPointSize.value = c.particleSize * 80;
+    u.uIntensity.value = c.intensity;
+    u.uOpacity.value = c.opacity;
+    u.uColdColor.value.set(c.coldColor);
+    u.uMidColor.value.set(c.midColor);
+    u.uHotColor.value.set(c.hotColor);
+    u.uTintColor.value.set(c.color);
+}
+const DataStreamEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.dataStream, config), [config]);
+    const { particleCount } = cfg;
     const rootRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const r = boundingRadius * streamRadius;
-    const h = boundingRadius * 2.6;
+    // Built once per particle count; every other knob is pushed into the uniforms.
     const { geometry, material } = useMemo(() => {
-        // Double the particles — half on each strand
+        // Double the particles - half on each strand
         const total = particleCount * 2;
         const tArr = new Float32Array(total);
         const offsetArr = new Float32Array(total);
@@ -118,29 +139,36 @@ const DataStreamEffect = ({ boundingRadius, config, animations, onObjectReady, o
             fragmentShader,
             uniforms: {
                 u_time: { value: 0 },
-                u_speed: { value: speed * (inward ? -1 : 1) },
-                uRadius: { value: r },
-                uTurns: { value: spiralTurns },
-                uHeight: { value: h },
-                uPointSize: { value: particleSize * 80 },
-                uIntensity: { value: intensity },
-                uOpacity: { value: opacity },
-                uColdColor: { value: new THREE.Color(coldColor) },
-                uMidColor: { value: new THREE.Color(midColor) },
-                uHotColor: { value: new THREE.Color(hotColor) },
-                uTintColor: { value: new THREE.Color(color) },
+                uFlow: { value: 0 },
+                u_speed: { value: 1 },
+                uRadius: { value: 1 },
+                uTurns: { value: 3 },
+                uHeight: { value: 2.6 },
+                uPointSize: { value: 3 },
+                uIntensity: { value: 1 },
+                uOpacity: { value: 1 },
+                uColdColor: { value: new THREE.Color() },
+                uMidColor: { value: new THREE.Color() },
+                uHotColor: { value: new THREE.Color() },
+                uTintColor: { value: new THREE.Color() },
             },
             transparent: true,
             depthWrite: false,
             blending: THREE.AdditiveBlending,
         });
         return { geometry: geo, material: mat };
-    }, [particleCount, spiralTurns, r, h, inward, particleSize, intensity, speed, opacity, coldColor, midColor, hotColor, color]);
-    useFrame((state) => {
-        material.uniforms.u_time.value = state.clock.getElapsedTime();
-        if (animations?.length) {
-            applyGenerativeAnimations([material], animations, startValuesCacheRef.current, Date.now(), false);
-        }
+    }, [particleCount]);
+    useEffect(() => () => { geometry.dispose(); material.dispose(); }, [geometry, material]);
+    const push = useCallback((merged) => {
+        applyConfig(material, merged, boundingRadius);
+    }, [material, boundingRadius]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    useFrame((state, delta) => {
+        const u = material.uniforms;
+        u.u_time.value = state.clock.getElapsedTime();
+        // integrated, so changing speed (or flipping direction) never makes the stream jump
+        u.uFlow.value += Math.min(delta, 0.1) * u.u_speed.value;
     });
     return _jsx("points", { ref: rootRef, geometry: geometry, material: material });
 };

package/dist/components/effects/DnaHelixEffect.d.ts

@@ -1,10 +1,15 @@
 import React from "react";
-import type { DnaHelixConfig, AnimationOptions } from "@3driseai/3drise-core";
+import type { DnaHelixConfig, AnimationOptions, MouseMoveDomain } from "@3driseai/3drise-core";
 import type { ObjectReadyProps } from '../../types/objectReady';
-interface DnaHelixEffectProps extends ObjectReadyProps {
+export interface DnaHelixEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: DnaHelixConfig;
-    animations?: AnimationOptions[];
+    /** 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 DnaHelixEffect: React.FC<DnaHelixEffectProps>;
 export default DnaHelixEffect;

package/dist/components/effects/DnaHelixEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DnaHelixEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DnaHelixEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,mBAAoB,SAAQ,gBAAgB;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA0ED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0OjD,CAAC;AACF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DnaHelixEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DnaHelixEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,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;AAyGD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqPjD,CAAC;AACF,eAAe,cAAc,CAAC"}

package/dist/components/effects/DnaHelixEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useMemo } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
-import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
 // ── Pulsing junction-dot shader ───────────────────────────────────────────────
 const dotVert = /* glsl */ `
   attribute float aPhase;
@@ -75,18 +77,40 @@ function helixAt(t, si, numStrands, r, h) {
     return new THREE.Vector3(Math.cos(angle) * r, t * h - h / 2, Math.sin(angle) * r);
 }
 // ── Component ─────────────────────────────────────────────────────────────────
-const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { particleCount, strandCount, helixRadius, helixHeight, basePairColor, runningLightEnabled, opacity, speed, intensity, } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the helix (sample count, strands, radius, height, the bolt layer mount): commit only. */
+const STRUCTURAL = ['particleCount', 'strandCount', 'helixRadius', 'helixHeight', 'runningLightEnabled'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.dnaHelix.map((p) => p.value));
+const _color = new THREE.Color();
+/** The single push point: every config knob that lives on a material reaches it here. */
+function applyConfig(scene, boltPtsMat, c) {
+    _color.set(c.basePairColor || '#00ffee');
+    const col = scene.rungGeo.attributes.color;
+    for (let v = 0; v < col.count; v++) {
+        const br = scene.rungBright[v >> 1];
+        col.setXYZ(v, _color.r * br, _color.g * br, _color.b * br);
+    }
+    col.needsUpdate = true;
+    scene.rungMat.opacity = c.opacity * 0.7;
+    scene.dotMat.uniforms.uSize.value = 14 * c.intensity;
+    scene.dotMat.uniforms.uOpacity.value = c.opacity;
+    boltPtsMat.uniforms.uSize.value = 18 * c.intensity;
+    boltPtsMat.uniforms.uOpacity.value = c.opacity;
+}
+const DnaHelixEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.dnaHelix, config), [config]);
+    const { particleCount, strandCount, helixRadius, helixHeight, runningLightEnabled } = cfg;
     const groupRef = useRef(null);
     useObjectReady(groupRef, config, onObjectReady, onObjectDispose);
+    // the knobs read per frame (speed, intensity), from the last merged config
+    const cur = useRef(cfg);
     const washProgress = useRef(0);
     const r = boundingRadius * helixRadius;
     const h = boundingRadius * helixHeight;
     const numStrands = Math.min(strandCount, 3);
-    // Bolt travel state — just headT + seed per bolt, no THREE objects
+    // Bolt travel state - just headT + seed per bolt, no THREE objects
     const boltStates = useRef([]);
-    // ── Static geometry: backbone, rungs, dots ────────────────────────────────
+    // Static geometry: backbone, rungs, dots. Colours, sizes and opacity are pushed.
     const scene = useMemo(() => {
         const N = Math.max(particleCount, 150);
         const RUNG_STEP = Math.max(3, Math.floor(N / 22));
@@ -96,7 +120,7 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
                 strandPts[si].push(helixAt(i / (N - 1), si, numStrands, r, h));
             }
         }
-        // Backbone lines — colors updated each frame
+        // Backbone lines - colors updated each frame
         const makeStrandLine = (pts) => {
             const pos = new Float32Array(pts.length * 3);
             const col = new Float32Array(pts.length * 3);
@@ -117,27 +141,27 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             });
             return {
                 line: new THREE.Line(geo, mat),
+                geo,
+                mat,
                 colorBuf: col,
                 colorAttr: geo.attributes.color,
                 N: pts.length,
             };
         };
         const strands = strandPts.map(makeStrandLine);
-        // Rungs
-        const rV = [], rC = [];
-        const rc = new THREE.Color(basePairColor || '#00ffee');
+        // Rungs (coloured by applyConfig from basePairColor x a per-rung brightness)
+        const rV = [], rB = [];
         for (let i = 0; i < N; i += RUNG_STEP) {
             const a = strandPts[0][i];
             const b = strandPts[1 % numStrands][i];
             rV.push(a.x, a.y, a.z, b.x, b.y, b.z);
-            const br = 0.55 + 0.3 * Math.sin((i / (N - 1)) * Math.PI);
-            rC.push(rc.r * br, rc.g * br, rc.b * br, rc.r * br, rc.g * br, rc.b * br);
+            rB.push(0.55 + 0.3 * Math.sin((i / (N - 1)) * Math.PI));
         }
         const rungGeo = new THREE.BufferGeometry();
         rungGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(rV), 3));
-        rungGeo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(rC), 3));
+        rungGeo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(rV.length), 3));
         const rungMat = new THREE.LineBasicMaterial({
-            vertexColors: true, transparent: true, opacity: opacity * 0.7,
+            vertexColors: true, transparent: true,
             depthWrite: false, blending: THREE.AdditiveBlending,
         });
         // Junction dots
@@ -157,17 +181,23 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
         const dotMat = new THREE.ShaderMaterial({
             vertexShader: dotVert, fragmentShader: dotFrag,
             uniforms: {
-                uSize: { value: 14 * intensity },
+                uSize: { value: 14 },
                 uColor: { value: new THREE.Vector3(0.15, 1.0, 0.93) },
-                uOpacity: { value: opacity },
+                uOpacity: { value: 1 },
                 u_time: { value: 0 },
             },
             transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
         });
-        return { strands, N, rungGeo, rungMat, dotGeo, dotMat };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [particleCount, numStrands, r, h, opacity, intensity, basePairColor]);
-    // ── Single combined geometry for ALL energy bolts ─────────────────────────
+        return { strands, N, rungGeo, rungMat, rungBright: new Float32Array(rB), dotGeo, dotMat };
+    }, [particleCount, numStrands, r, h]);
+    useEffect(() => () => {
+        scene.strands.forEach(({ geo, mat }) => { geo.dispose(); mat.dispose(); });
+        scene.rungGeo.dispose();
+        scene.rungMat.dispose();
+        scene.dotGeo.dispose();
+        scene.dotMat.dispose();
+    }, [scene]);
+    // Single combined geometry for ALL energy bolts.
     // Uses LineSegments (GL_LINES: disconnected pairs), one draw call for all bolts.
     const { boltGeo, boltMat, boltPtsGeo, boltPtsMat } = useMemo(() => {
         const totalBolts = numStrands * BOLTS_PER_STRAND;
@@ -192,7 +222,7 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
                 });
             }
         }
-        // Points layer — one sprite per BOLT_N sample, drives the glow thickness
+        // Points layer - one sprite per BOLT_N sample, drives the glow thickness
         const totalPts = numStrands * BOLTS_PER_STRAND * BOLT_N;
         const ptPos = new Float32Array(totalPts * 3);
         const ptBright = new Float32Array(totalPts);
@@ -210,12 +240,19 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
         });
         return { boltGeo: geo, boltMat: mat, boltPtsGeo: ptsGeo, boltPtsMat: ptsMat };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [numStrands]);
-    // ── Frame loop ────────────────────────────────────────────────────────────
+    useEffect(() => () => { boltGeo.dispose(); boltMat.dispose(); boltPtsGeo.dispose(); boltPtsMat.dispose(); }, [boltGeo, boltMat, boltPtsGeo, boltPtsMat]);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(scene, boltPtsMat, merged);
+    }, [scene, boltPtsMat]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: groupRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    // Frame loop
     useFrame((state, delta) => {
         if (!groupRef.current)
             return;
+        const { speed, intensity } = cur.current;
         groupRef.current.rotation.y += delta * speed * 0.18;
         scene.dotMat.uniforms.u_time.value = state.clock.getElapsedTime();
         // Backbone color wash
@@ -242,10 +279,8 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             const ptPosAttr = boltPtsGeo.attributes.position;
             const ptBrtAttr = boltPtsGeo.attributes.aBright;
             const JITTER = r * 0.20;
-            boltPtsMat.uniforms.uSize.value = 18 * intensity;
-            boltPtsMat.uniforms.uOpacity.value = opacity;
             boltStates.current.forEach((state, boltIdx) => {
-                state.headT += delta * speed * 0.18; // slow — so each bolt is clearly visible
+                state.headT += delta * speed * 0.18; // slow - so each bolt is clearly visible
                 if (state.headT >= 1) {
                     state.headT -= 1;
                     state.seed++;
@@ -304,9 +339,6 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             ptPosAttr.needsUpdate = true;
             ptBrtAttr.needsUpdate = true;
         }
-        if (animations?.length) {
-            applyGenerativeAnimations([scene.dotMat, boltPtsMat], animations, startValuesCacheRef.current, Date.now(), false);
-        }
     });
     return (_jsxs("group", { ref: groupRef, children: [scene.strands.map(({ line }, i) => _jsx("primitive", { object: line }, i)), _jsx("lineSegments", { geometry: scene.rungGeo, material: scene.rungMat }), _jsx("points", { geometry: scene.dotGeo, material: scene.dotMat }), runningLightEnabled && (_jsxs(_Fragment, { children: [_jsx("lineSegments", { geometry: boltGeo, material: boltMat }), _jsx("points", { geometry: boltPtsGeo, material: boltPtsMat })] }))] }));
 };

package/dist/components/effects/FallingLeavesEffect.d.ts

@@ -1,10 +1,15 @@
 import React from 'react';
-import type { AnimationOptions, FallingLeavesConfig } from '@3driseai/3drise-core';
+import type { AnimationOptions, FallingLeavesConfig, MouseMoveDomain } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface FallingLeavesEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: FallingLeavesConfig;
-    animations?: AnimationOptions[];
+    /** 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;
     /** True when the effect is attached to an object, so it can react to the host. */
     hasHost?: boolean;
 }

package/dist/components/effects/FallingLeavesEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FallingLeavesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FallingLeavesEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAGnF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAC9D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAwZD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA+B3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"FallingLeavesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FallingLeavesEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAC9D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,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;IAC5B,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AA8ZD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqC3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/effects/FallingLeavesEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useFrame } from '@react-three/fiber';
-import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+import { EFFECTS_ANIMATABLE } from '@3driseai/3drise-core';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
 /**
  * Leaves drifting past the object, each one integrating the Andersen-Pesavento-Wang falling-plate equations, so they flutter, glide and tumble like real leaves.
  *
@@ -405,7 +407,7 @@ function build(u, c, bound, env) {
         dispose() { geo.dispose(); mat.dispose(); },
     };
 }
-/** Defaults for every knob, so an older saved config still renders. */
+/** A value for every knob: the base the renderer draws and keyframes interpolate from. */
 const DEFAULTS = {
     intensity: 1,
     speed: 1,
@@ -419,27 +421,35 @@ const DEFAULTS = {
     wind: 0.5,
     autumnColor: '#c4631f',
 };
-const FallingLeavesEffect = ({ boundingRadius, config, animations, hasHost = false, onObjectReady, onObjectDispose }) => {
+/** Knobs that rebuild the object: they change on commit, never through the live path. */
+const STRUCTURAL = ['leafCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.fallingLeaves.map((p) => p.value));
+const FallingLeavesEffect = ({ boundingRadius, config, id, keyframes, mouseMove, hasHost = false, onObjectReady, onObjectDispose }) => {
     const rootRef = useRef(null);
-    const animCache = useRef({});
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
     // a standalone effect gets boundingRadius 1
     const b = boundingRadius > 0 ? boundingRadius : 1;
-    const cfg = useMemo(() => ({ ...DEFAULTS, ...config }), [config]);
+    const cfg = useMemo(() => withConfigDefaults(DEFAULTS, config), [config]);
     const env = useMemo(() => ({ hasHost: hasHost }), [hasHost]);
     // uniforms outlive the objects, so keyframe animations survive a rebuild
     const uniforms = useMemo(() => createUniforms(), []);
     // rebuilt only when the host size or a structural knob changes
-    const instance = useMemo(() => build(uniforms, { ...DEFAULTS, ...config }, b, env), [uniforms, b, env, cfg.leafCount]);
+    const instance = useMemo(() => build(uniforms, cfg, b, env), [uniforms, b, env, cfg.leafCount]);
     useEffect(() => () => instance.dispose(), [instance]);
     useLayoutEffect(() => {
         applyConfig(uniforms, cfg, b, env);
         instance.apply(cfg);
     }, [instance, uniforms, cfg, b, env]);
+    // Committed config + live drag + keyframes + pointer, merged into the one push point
+    // (the uniforms, then the instance's own cheap per-config step).
+    const push = useCallback((merged) => {
+        applyConfig(uniforms, merged, b, env);
+        instance.apply(merged);
+    }, [instance, uniforms, b, env]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     useFrame((state, delta) => {
         instance.update(Math.min(delta, 0.1), state.camera);
-        if (animations?.length)
-            applyGenerativeAnimations(instance.materials, animations, animCache.current, Date.now(), false);
     });
     return (_jsx("group", { ref: rootRef, children: _jsx("primitive", { object: instance.object }) }));
 };

package/dist/components/effects/FieldLinesEffect.d.ts

@@ -1,10 +1,15 @@
-import React from 'react';
-import type { AnimationOptions, FieldLinesConfig } from '@3driseai/3drise-core';
+import React from "react";
+import type { FieldLinesConfig, AnimationOptions, MouseMoveDomain } from "@3driseai/3drise-core";
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface FieldLinesEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: FieldLinesConfig;
-    animations?: AnimationOptions[];
+    /** 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 FieldLinesEffect: React.FC<FieldLinesEffectProps>;
 export default FieldLinesEffect;

package/dist/components/effects/FieldLinesEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLinesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FieldLinesEffect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqND,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2DrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"FieldLinesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FieldLinesEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,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;AAyOD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+CrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/FieldLinesEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import * as THREE from 'three';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
-import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+import * as THREE from 'three';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
 /**
  * Magnetic dipole field lines around the host, from the analytic line equation
  * r = L sin^2(theta), with trapped particles that bounce between magnetic
@@ -210,10 +212,27 @@ const particleFrag = /* glsl */ `
     gl_FragColor = vec4(col, core * core * (0.5 + 0.5 * vGlow) * uOpacity);
   }
 `;
-const FieldLinesEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { intensity, speed, color, opacity, shells = 4, linesPerShell = 12, extent = 3.2, twist = 0, tilt = 11, particleCount = 6, particleSize = 1.2, apexColor = '#6a5cff', } = config;
+/** Knobs that rebuild the line and particle geometry: commit only, never live. */
+const STRUCTURAL = ['shells', 'linesPerShell', 'particleCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.fieldLines.map((p) => p.value));
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(u, c, bound) {
+    u.uSpeed.value = c.speed;
+    u.uIntensity.value = c.intensity;
+    u.uOpacity.value = c.opacity;
+    u.uColor.value.set(c.color);
+    u.uApexColor.value.set(c.apexColor);
+    u.uBound.value = bound;
+    u.uExtent.value = c.extent;
+    u.uTwist.value = c.twist;
+    u.uTilt.value = c.tilt;
+    u.uParticleSize.value = c.particleSize;
+}
+const FieldLinesEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.fieldLines, config), [config]);
+    const { shells, linesPerShell, particleCount } = cfg;
     const rootRef = useRef(null);
-    const animCache = useRef({});
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
     // one uniform set, shared by the lines and the particles
     const uniforms = useMemo(() => ({
@@ -238,22 +257,13 @@ const FieldLinesEffect = ({ boundingRadius, config, animations, onObjectReady, o
     const particleGeometry = useMemo(() => buildFieldParticles(shells, linesPerShell, particleCount), [shells, linesPerShell, particleCount]);
     useEffect(() => () => lineGeometry.dispose(), [lineGeometry]);
     useEffect(() => () => particleGeometry.dispose(), [particleGeometry]);
-    useLayoutEffect(() => {
-        uniforms.uSpeed.value = speed;
-        uniforms.uIntensity.value = intensity;
-        uniforms.uOpacity.value = opacity;
-        uniforms.uColor.value.set(color);
-        uniforms.uApexColor.value.set(apexColor);
-        uniforms.uBound.value = boundingRadius;
-        uniforms.uExtent.value = extent;
-        uniforms.uTwist.value = twist;
-        uniforms.uTilt.value = tilt;
-        uniforms.uParticleSize.value = particleSize;
-    }, [uniforms, speed, intensity, opacity, color, apexColor, boundingRadius, extent, twist, tilt, particleSize]);
+    const push = useCallback((merged) => {
+        applyConfig(uniforms, merged, boundingRadius);
+    }, [uniforms, boundingRadius]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     useFrame((_, delta) => {
         uniforms.uTime.value += delta * uniforms.uSpeed.value;
-        if (animations?.length)
-            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
     });
     return (_jsxs("group", { ref: rootRef, children: [_jsx("lineSegments", { geometry: lineGeometry, material: materials[0], frustumCulled: false }), _jsx("points", { geometry: particleGeometry, material: materials[1], frustumCulled: false })] }));
 };

package/dist/components/effects/Fire.d.ts

@@ -1,5 +1,5 @@
 import type { Object3D } from 'three';
-import { AnimationOptions, FireConfig } from "@3driseai/3drise-core";
+import type { AnimationOptions, FireConfig, MouseMoveDomain } from "@3driseai/3drise-core";
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface FireProps extends ObjectReadyProps {
     /**
@@ -14,8 +14,13 @@ export interface FireProps extends ObjectReadyProps {
      */
     hostRef?: Object3D | null;
     config: FireConfig;
-    animations?: AnimationOptions[];
+    /** 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 Fire: ({ hostRef, config, animations, onObjectReady, onObjectDispose }: FireProps) => import("react").JSX.Element;
+declare const Fire: ({ hostRef, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: FireProps) => import("react").JSX.Element;
 export default Fire;
 //# sourceMappingURL=Fire.d.ts.map

package/dist/components/effects/Fire.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fire.d.ts","sourceRoot":"","sources":["../../../src/components/effects/Fire.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqFD,QAAA,MAAM,IAAI,GAAI,iEAAiE,SAAS,gCAyHvF,CAAC;AACF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Fire.d.ts","sourceRoot":"","sources":["../../../src/components/effects/Fire.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI3F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,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;AAsGD,QAAA,MAAM,IAAI,GAAI,+EAA+E,SAAS,gCA4IrG,CAAC;AACF,eAAe,IAAI,CAAC"}