@3driseai/3drise-viewer 0.1.26 → 0.1.27

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

@@ -1 +1 @@
-{"version":3,"file":"Flares.d.ts","sourceRoot":"","sources":["../../../src/components/effects/Flares.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwE,OAAO,EAA8B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5I,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,GAAG,CAAC;QACV,UAAU,iBAAiB;YACvB,aAAa,EAAE,GAAG,CAAC;SACtB;KACJ;CACJ;AAGD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG;IACzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,gFAAgF;IAChF,MAAM,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,CAAC,CAAC;IACvD,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC,CAAC;AAUF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,WAAW,+BA2HpH"}
+{"version":3,"file":"Flares.d.ts","sourceRoot":"","sources":["../../../src/components/effects/Flares.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0D,OAAO,EAA8B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9H,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7F,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,GAAG,CAAC;QACV,UAAU,iBAAiB;YACvB,aAAa,EAAE,GAAG,CAAC;SACtB;KACJ;CACJ;AAGD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG;IACzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,wFAAwF;IACxF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gFAAgF;IAChF,MAAM,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,CAAC,CAAC;IACvD,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,CAAC;AAoCF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,OAAO,EAAE,cAAkB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,WAAW,+BA+FtJ"}

package/dist/components/effects/Flares.js

@@ -1,22 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import { WebGLRenderTarget, MeshBasicMaterial, AdditiveBlending, Box3, Sphere, Vector3, Vector2, Quaternion, Color, Object3D } from "three";
+import { WebGLRenderTarget, MeshBasicMaterial, AdditiveBlending, Vector3, Vector2, Quaternion, Color, Object3D } from "three";
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
-const tmpBox = new Box3();
-const tmpSphere = new Sphere();
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
 const tmpVec = new Vector3();
 const tmpVec2 = new Vector2();
 const tmpQuat = new Quaternion();
 const tmpRight = new Vector3();
 const tmpColor = new Color();
-export default function Flares({ hostRef, config, uniforms, animations, onObjectReady, onObjectDispose }) {
+/** Knobs that re-tag the host or rebuild the mask pass: commit only, never live. */
+const STRUCTURAL = ['shooting', 'maskResolution', 'maskLayer'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.flares.map((p) => p.value));
+const _tip = new Color();
+/**
+ * The single push point. The billboard is sized like every other effect: the host's
+ * bounding radius (1 standalone) x radius x padding. `speed` is read per frame (the flare
+ * clock's rate).
+ */
+function applyConfig(mesh, mat, c, bound) {
+    if (mesh)
+        mesh.scale.setScalar(bound * c.radius * c.padding);
+    if (!mat)
+        return;
+    // additive blending: opacity is a brightness scale, so it folds into the intensity
+    mat.u_intensity = c.intensity * c.opacity;
+    _tip.set(c.color);
+    mat.u_tipColor.set(_tip.r, _tip.g, _tip.b);
+    // speed is integrated into u_time (see useFrame), so the shader's u_time * u_speed
+    // never jumps when the speed changes
+    mat.u_speed = 1;
+}
+export default function Flares({ hostRef, boundingRadius = 1, config, uniforms, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
     const { gl, scene } = useThree();
     const anchorRef = useRef(null);
     useObjectReady(anchorRef, config, onObjectReady, onObjectDispose);
     const meshRef = useRef(null);
     const matRef = useRef(null);
-    const { radius, padding = 1.2, fitKey, shooting, maskResolution = 512, maskLayer = 31 } = config;
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.flares, config), [config]);
+    // the knobs read per frame (speed), from the last merged config
+    const cur = useRef(cfg);
+    const { shooting, maskResolution, maskLayer } = cfg;
+    const b = boundingRadius > 0 ? boundingRadius : 1;
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(meshRef.current, matRef.current, merged, b);
+    }, [b]);
+    // push the current config into the material the moment it mounts
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyConfig(meshRef.current, m, cur.current, b);
+    }, [b]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: anchorRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     const maskTarget = useMemo(() => hostRef
         ? new WebGLRenderTarget(maskResolution, maskResolution, {
             depthBuffer: true,
@@ -26,62 +66,19 @@ export default function Flares({ hostRef, config, uniforms, animations, onObject
         : null, [hostRef, maskResolution]);
     const maskMaterial = useMemo(() => new MeshBasicMaterial({ color: 0xffffff }), []);
     useEffect(() => () => maskTarget?.dispose(), [maskTarget]);
-    // Fit the billboard to the host object + tag the host for the mask pass.
+    // Silhouette mode: tag every host node (except us) with the mask layer.
     useEffect(() => {
         const anchor = anchorRef.current;
-        const mesh = meshRef.current;
-        if (!anchor || !mesh)
-            return;
-        const host = hostRef && hostRef instanceof Object3D ? hostRef : anchor;
-        // Silhouette mode: tag every host node (except us) with the mask layer.
-        if (hostRef && host) {
-            host.traverse((o) => o.layers.enable(maskLayer));
-            anchor.traverse((o) => o.layers.disable(maskLayer));
-        }
-        if (radius !== undefined) {
-            anchor.position.set(0, 0, 0);
-            mesh.scale.setScalar(radius * padding);
-            return;
-        }
-        if (!host)
-            return;
-        // Bounding box of every sibling except ourselves (world space).
-        tmpBox.makeEmpty();
-        let hasGeometry = false;
-        for (const child of host.children) {
-            if (child === anchor)
-                continue;
-            const childBox = new Box3().setFromObject(child);
-            if (!childBox.isEmpty()) {
-                tmpBox.union(childBox);
-                hasGeometry = true;
-            }
-        }
-        // Host itself may be a mesh (Flares nested directly inside it).
-        if (host.geometry) {
-            const g = host.geometry;
-            if (!g.boundingBox)
-                g.computeBoundingBox();
-            if (g.boundingBox) {
-                tmpBox.union(g.boundingBox.clone().applyMatrix4(host.matrixWorld));
-                hasGeometry = true;
-            }
-        }
-        if (!hasGeometry)
+        if (!anchor || !hostRef || !(hostRef instanceof Object3D))
             return;
-        tmpBox.getBoundingSphere(tmpSphere);
-        host.updateWorldMatrix(true, false);
-        const localCenter = host.worldToLocal(tmpSphere.center.clone());
-        host.getWorldScale(tmpVec);
-        const worldScale = Math.max(tmpVec.x, tmpVec.y, tmpVec.z) || 1;
-        anchor.position.copy(localCenter);
-        mesh.scale.setScalar((tmpSphere.radius / worldScale) * padding);
-    }, [radius, padding, fitKey, hostRef, maskLayer]);
+        hostRef.traverse((o) => o.layers.enable(maskLayer));
+        anchor.traverse((o) => o.layers.disable(maskLayer));
+    }, [hostRef, maskLayer]);
     useFrame(({ camera: cam }, delta) => {
         const mat = matRef.current;
         const mesh = meshRef.current;
         if (mat)
-            mat.u_time += delta;
+            mat.u_time += delta * cur.current.speed;
         // World-space billboard: compensate for inherited rotation.
         if (mesh && hostRef) {
             hostRef.getWorldQuaternion(tmpQuat).invert();
@@ -132,5 +129,5 @@ export default function Flares({ hostRef, config, uniforms, animations, onObject
             mat.u_maskEnabled = 0;
         }
     });
-    return (_jsx("group", { ref: anchorRef, children: _jsxs("mesh", { ref: meshRef, renderOrder: 2, children: [_jsx("planeGeometry", { args: [4.4, 4.4] }), _jsx("flareMaterial", { ref: matRef, transparent: true, depthWrite: false, depthTest: !hostRef && !shooting, blending: AdditiveBlending, u_shootEnabled: shooting ? 1 : 0, ...uniforms })] }) }));
+    return (_jsx("group", { ref: anchorRef, children: _jsxs("mesh", { ref: meshRef, renderOrder: 2, children: [_jsx("planeGeometry", { args: [4.4, 4.4] }), _jsx("flareMaterial", { ref: setMaterial, transparent: true, depthWrite: false, depthTest: !hostRef && !shooting, blending: AdditiveBlending, u_shootEnabled: shooting ? 1 : 0, ...uniforms })] }) }));
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ForcefieldEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/ForcefieldEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,qBAAsB,SAAQ,gBAAgB;IACpD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA6ED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoDrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ForcefieldEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/ForcefieldEffect.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;AAiGD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwDrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/ForcefieldEffect.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';
 const shieldVert = /* glsl */ `
   varying vec3 vNormal;
   varying vec3 vWorldPos;
@@ -78,43 +80,63 @@ const shieldFrag = /* glsl */ `
     gl_FragColor = vec4(col + uRimColor * ripple * 0.3, alpha);
   }
 `;
-const ForcefieldEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { hexSize, rippleEnabled, shieldColor, rimColor, opacity, speed, intensity } = config;
-    const startValuesCacheRef = useRef({});
+/** No knob rebuilds the shield: the sphere is sized by the host only. */
+const STRUCTURAL = [];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.forcefield.map((p) => p.value));
+const _color = new THREE.Color();
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(mat, c) {
+    const u = mat.uniforms;
+    u.uHexSize.value = c.hexSize;
+    _color.set(c.shieldColor);
+    u.uShieldColor.value.set(_color.r, _color.g, _color.b);
+    _color.set(c.rimColor);
+    u.uRimColor.value.set(_color.r, _color.g, _color.b);
+    u.uOpacity.value = c.opacity;
+    u.uIntensity.value = c.intensity;
+}
+const ForcefieldEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.forcefield, config), [config]);
     const meshRef = useRef(null);
     useObjectReady(meshRef, config, onObjectReady, onObjectDispose);
     const hitSlot = useRef(0);
     const nextHit = useRef(0);
-    const mat = useMemo(() => {
-        const sc = new THREE.Color(shieldColor);
-        const rc = new THREE.Color(rimColor);
-        return new THREE.ShaderMaterial({
-            vertexShader: shieldVert,
-            fragmentShader: shieldFrag,
-            uniforms: {
-                u_time: { value: 0 },
-                uHexSize: { value: hexSize },
-                uShieldColor: { value: new THREE.Vector3(sc.r, sc.g, sc.b) },
-                uRimColor: { value: new THREE.Vector3(rc.r, rc.g, rc.b) },
-                uOpacity: { value: opacity },
-                uIntensity: { value: intensity },
-                uHitPos: { value: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()] },
-                uHitTime: { value: [-99, -99, -99] },
-            },
-            transparent: true,
-            depthWrite: false,
-            side: THREE.FrontSide,
-            blending: THREE.AdditiveBlending,
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hexSize, shieldColor, rimColor, opacity, intensity]);
+    // the knobs read per frame (speed, rippleEnabled), from the last merged config
+    const cur = useRef(cfg);
+    // One material for the life of the effect; the config is pushed into it.
+    const mat = useMemo(() => new THREE.ShaderMaterial({
+        vertexShader: shieldVert,
+        fragmentShader: shieldFrag,
+        uniforms: {
+            u_time: { value: 0 },
+            uHexSize: { value: 0.06 },
+            uShieldColor: { value: new THREE.Vector3() },
+            uRimColor: { value: new THREE.Vector3() },
+            uOpacity: { value: 1 },
+            uIntensity: { value: 1 },
+            uHitPos: { value: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()] },
+            uHitTime: { value: [-99, -99, -99] },
+        },
+        transparent: true,
+        depthWrite: false,
+        side: THREE.FrontSide,
+        blending: THREE.AdditiveBlending,
+    }), []);
+    useEffect(() => () => mat.dispose(), [mat]);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(mat, merged);
+    }, [mat]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: meshRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     useFrame((state, delta) => {
         const t = state.clock.getElapsedTime();
         mat.uniforms.u_time.value = t;
-        if (rippleEnabled) {
+        if (cur.current.rippleEnabled) {
             nextHit.current -= delta;
             if (nextHit.current <= 0) {
-                nextHit.current = 1.4 / speed + Math.random() * 0.8;
+                nextHit.current = 1.4 / Math.max(cur.current.speed, 0.05) + Math.random() * 0.8;
                 // Random point on sphere surface
                 const phi = Math.random() * Math.PI * 2;
                 const theta = Math.acos(2 * Math.random() - 1);
@@ -125,9 +147,6 @@ const ForcefieldEffect = ({ boundingRadius, config, animations, onObjectReady, o
                 hitSlot.current++;
             }
         }
-        if (animations?.length) {
-            applyGenerativeAnimations([mat], animations, startValuesCacheRef.current, Date.now(), false);
-        }
     });
     return (_jsx("mesh", { ref: meshRef, material: mat, children: _jsx("sphereGeometry", { args: [boundingRadius * 1.15, 64, 64] }) }));
 };

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

@@ -1,10 +1,15 @@
 import React from 'react';
-import type { AnimationOptions, GalaxyConfig } from '@3driseai/3drise-core';
+import type { AnimationOptions, GalaxyConfig, MouseMoveDomain } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface GalaxyEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: GalaxyConfig;
-    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/GalaxyEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalaxyEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/GalaxyEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACvD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AA8VD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+B7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"GalaxyEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/GalaxyEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI7F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACvD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,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;AAoWD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqC7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/effects/GalaxyEffect.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';
 /**
  * A spiral galaxy from density-wave theory: nested elliptical orbits twist into arms, lit by young blue stars, dust lanes and a warm bulge. Use for space, cosmic, sci-fi scenes.
  *
@@ -332,7 +334,7 @@ function build(u, c, bound, env) {
         },
     };
 }
-/** 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,
@@ -347,27 +349,35 @@ const DEFAULTS = {
     tilt: 22,
     coreColor: '#ffd9a8',
 };
-const GalaxyEffect = ({ boundingRadius, config, animations, hasHost = false, onObjectReady, onObjectDispose }) => {
+/** Knobs that rebuild the object: they change on commit, never through the live path. */
+const STRUCTURAL = ['starCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.galaxy.map((p) => p.value));
+const GalaxyEffect = ({ 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.starCount]);
+    const instance = useMemo(() => build(uniforms, cfg, b, env), [uniforms, b, env, cfg.starCount]);
     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/HarmonicShellEffect.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"HarmonicShellEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/HarmonicShellEffect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,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;CACnC;AA0KD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA2D3D,CAAC;AACF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"HarmonicShellEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/HarmonicShellEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,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;CAC/B;AA+LD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4C3D,CAAC;AACF,eAAe,mBAAmB,CAAC"}

package/dist/components/effects/HarmonicShellEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } 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';
 /**
  * An iridescent shell around the host, displaced by real spherical harmonics
  * up to l = 4 whose weights drift slowly. The colour is thin-film
@@ -158,10 +160,27 @@ const frag = /* glsl */ `
     gl_FragColor = vec4(col * uIntensity, a);
   }
 `;
-const HarmonicShellEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { intensity, speed, color, opacity, degree = 3, amplitude = 0.22, sizeMultiplier = 1.35, filmThickness = 380, nodalLines = 0.6, rimColor = '#bfe8ff', } = config;
+/** Nothing rebuilds the shell: the vertex shader displaces a unit sphere. */
+const STRUCTURAL = [];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.harmonicShell.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.uRimColor.value.set(c.rimColor);
+    u.uAmplitude.value = c.amplitude;
+    u.uBound.value = bound;
+    u.uSizeMultiplier.value = c.sizeMultiplier;
+    u.uFilmThickness.value = c.filmThickness;
+    u.uNodalLines.value = c.nodalLines;
+    u.uDegree.value = c.degree;
+}
+const HarmonicShellEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.harmonicShell, config), [config]);
     const rootRef = useRef(null);
-    const animCache = useRef({});
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
     const state = useMemo(createHarmonicState, []);
     const uniforms = useMemo(() => ({
@@ -181,28 +200,17 @@ const HarmonicShellEffect = ({ boundingRadius, config, animations, onObjectReady
     }), []);
     const material = useMemo(() => new THREE.ShaderMaterial({ vertexShader: vert, fragmentShader: frag, uniforms, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending }), [uniforms]);
     useEffect(() => () => material.dispose(), [material]);
-    const materials = useMemo(() => [material], [material]);
     // the vertex shader displaces a unit sphere, so the mesh never needs rebuilding
     const geometry = useMemo(() => new THREE.SphereGeometry(1, 192, 128), []);
     useEffect(() => () => geometry.dispose(), [geometry]);
-    useLayoutEffect(() => {
-        uniforms.uSpeed.value = speed;
-        uniforms.uIntensity.value = intensity;
-        uniforms.uOpacity.value = opacity;
-        uniforms.uColor.value.set(color);
-        uniforms.uRimColor.value.set(rimColor);
-        uniforms.uAmplitude.value = amplitude;
-        uniforms.uBound.value = boundingRadius;
-        uniforms.uSizeMultiplier.value = sizeMultiplier;
-        uniforms.uFilmThickness.value = filmThickness;
-        uniforms.uNodalLines.value = nodalLines;
-        uniforms.uDegree.value = degree;
-    }, [uniforms, speed, intensity, opacity, color, rimColor, amplitude, boundingRadius, sizeMultiplier, filmThickness, nodalLines, degree]);
+    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;
         updateHarmonicWeights(state, uniforms.uW.value, uniforms.uTime.value, uniforms.uDegree.value, delta);
-        if (animations?.length)
-            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
     });
     return (_jsx("group", { ref: rootRef, children: _jsx("mesh", { geometry: geometry, material: material }) }));
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"HologramEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/HologramEffect.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;AAqFD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwDjD,CAAC;AACF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"HologramEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/HologramEffect.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;AA4GD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmEjD,CAAC;AACF,eAAe,cAAc,CAAC"}