@3driseai/3drise-viewer 0.1.26 → 0.1.28

package/dist/components/effects/Fire.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box3, Sphere, Color, Vector3, Matrix4, PlaneGeometry, InstancedBufferGeometry, InstancedBufferAttribute, } from 'three';
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { Box3, Sphere, Vector3, Matrix4, PlaneGeometry, InstancedBufferGeometry, InstancedBufferAttribute, } from 'three';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
 // Add to FireConfig in 3drize-core:
 //   mode?: 'crown' | 'wrap'   // wrap scatters tongues over the host surface
 //   coverage?: number         // 0..1 — how far down the host burns (wrap)
@@ -85,14 +88,30 @@ function sampleSurface(host, count) {
     }
     return points;
 }
-const Fire = ({ hostRef, config, animations, onObjectReady, onObjectDispose }) => {
+/** Knobs that re-fit or re-scatter the flames, or mount the light: commit only, never live. */
+const STRUCTURAL = ['mode', 'coverage', 'tongues', 'radius', 'height', 'radiusScale', 'heightScale', 'light'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.fire.map((p) => p.value));
+/** The single push point: every config knob that lives on the material reaches it here. */
+function applyConfig(m, c) {
+    m.u_intensity = c.intensity;
+    // speed is integrated into u_time on the CPU (see useFrame), so the shader's
+    // u_time * u_speed never jumps when the speed changes
+    m.u_speed = 1;
+    m.u_turbulence = c.turbulence;
+    m.u_sway = c.sway;
+    m.u_tint.set(c.tint);
+}
+const Fire = ({ hostRef, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.fire, config), [config]);
     const group = useRef(null);
     useObjectReady(group, config, onObjectReady, onObjectDispose);
     const material = useRef(null);
     const lightRef = useRef(null);
-    const { radius = 1, height = 2.5, radiusScale = 1, heightScale = 1, intensity = 1, speed = 1, turbulence = 1.5, sway = 1, tint = '#ffffff', light = true, mode = 'tongues', coverage = 0.85, tongues = 36, } = config;
-    const tintColor = useMemo(() => new Color(tint), [tint]);
-    // Shared instanced quad — per-tongue attributes are (re)filled on fit.
+    // the knobs read per frame (speed, intensity), from the last merged config
+    const cur = useRef(cfg);
+    const { radius, height, radiusScale, heightScale, light, mode, coverage, tongues } = cfg;
+    // Shared instanced quad - per-tongue attributes are (re)filled on fit.
     const geometry = useMemo(() => {
         const base = new PlaneGeometry(1, 1);
         const geo = new InstancedBufferGeometry();
@@ -192,11 +211,29 @@ const Fire = ({ hostRef, config, animations, onObjectReady, onObjectDispose }) =
         heightScale,
         geometry,
     ]);
-    useFrame(({ clock }) => {
+    // One push point for the material: the committed config when the material mounts or
+    // the config commits, the merged one while anything overrides it.
+    const cfgRef = useRef(cfg);
+    cfgRef.current = cfg;
+    const setMaterial = useCallback((m) => {
+        material.current = m;
+        if (m)
+            applyConfig(m, cfgRef.current);
+    }, []);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        if (material.current)
+            applyConfig(material.current, merged);
+    }, []);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: group, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    useFrame(({ clock }, delta) => {
         const t = clock.getElapsedTime();
-        material.current.u_time = t;
+        const { speed, intensity } = cur.current;
+        if (material.current)
+            material.current.u_time += Math.min(delta, 0.1) * speed;
         if (light && lightRef.current) {
-            // Low-frequency flicker — calm, ember-like, no strobing.
+            // Low-frequency flicker - calm, ember-like, no strobing.
             const flicker = 0.82 +
                 0.12 * Math.sin(t * 7.3) * Math.sin(t * 3.1) +
                 0.06 * Math.sin(t * 13.7 + 1.4);
@@ -205,6 +242,6 @@ const Fire = ({ hostRef, config, animations, onObjectReady, onObjectDispose }) =
                 material.current.u_height * (0.35 + 0.03 * Math.sin(t * 5.1));
         }
     });
-    return (_jsxs("group", { ref: group, children: [_jsx("mesh", { geometry: geometry, frustumCulled: false, children: _jsx("fireMaterial", { ref: material, u_intensity: intensity, u_speed: speed, u_turbulence: turbulence, u_sway: sway, u_tint: tintColor }) }), light && (_jsx("pointLight", { ref: lightRef, color: "#ff7a26", distance: 0, decay: 2 }))] }));
+    return (_jsxs("group", { ref: group, children: [_jsx("mesh", { geometry: geometry, frustumCulled: false, children: _jsx("fireMaterial", { ref: setMaterial }) }), light && (_jsx("pointLight", { ref: lightRef, color: "#ff7a26", distance: 0, decay: 2 }))] }));
 };
 export default Fire;

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

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

@@ -1 +1 @@
-{"version":3,"file":"FireflySwarmEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FireflySwarmEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGlF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC7D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAwXD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+BzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"FireflySwarmEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FireflySwarmEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAInG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC7D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,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;AA8XD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqCzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/effects/FireflySwarmEffect.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';
 /**
  * Kuramoto-coupled fireflies drifting on a divergence-free flow: random blinking slowly locks into sync, with ripples of light rolling through the swarm. Use for night, garden, forest, magical scenes.
  *
@@ -367,7 +369,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,
@@ -381,27 +383,35 @@ const DEFAULTS = {
     glowSize: 1,
     flashColor: '#d4ff5c',
 };
-const FireflySwarmEffect = ({ boundingRadius, config, animations, hasHost = false, onObjectReady, onObjectDispose }) => {
+/** Knobs that rebuild the object: they change on commit, never through the live path. */
+const STRUCTURAL = ['count'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.fireflySwarm.map((p) => p.value));
+const FireflySwarmEffect = ({ 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.count]);
+    const instance = useMemo(() => build(uniforms, cfg, b, env), [uniforms, b, env, cfg.count]);
     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/Flares.d.ts

@@ -1,5 +1,5 @@
 import { Vector3, Object3D } from "three";
-import { AnimationOptions, FlaresConfig } from "@3driseai/3drise-core";
+import type { AnimationOptions, FlaresConfig, MouseMoveDomain } from "@3driseai/3drise-core";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -15,11 +15,18 @@ export type FlaresProps = ObjectReadyProps & {
      * false -> plane mode: circular limb billboard (default).
      */
     hostRef?: Object3D | null;
+    /** Host bounding radius (1 for a standalone effect): the billboard is sized from it. */
+    boundingRadius?: number;
     /** Root the bursts at the center (shooting from source) instead of the limb. */
     config: FlaresConfig;
     /** Uniform overrides for FlareMaterial (u_frequency, u_reach, ...). */
     uniforms?: Record<string, number | Vector3 | number[]>;
-    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;
 };
-export default function Flares({ hostRef, config, uniforms, animations, onObjectReady, onObjectDispose }: FlaresProps): import("react").JSX.Element;
+export default function Flares({ hostRef, boundingRadius, config, uniforms, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: FlaresProps): import("react").JSX.Element;
 //# sourceMappingURL=Flares.d.ts.map

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"}