@ntalmagor/3drize-viewer 0.1.16 → 0.1.17

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedObject.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAQvG,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,iBAAiB,CAAC;IACtC,aAAa,EAAE,qBAAqB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACtC,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACjH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;CAE3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+JvD,CAAC;AAGH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AnimatedObject.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAMvG,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,iBAAiB,CAAC;IACtC,aAAa,EAAE,qBAAqB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACtC,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACjH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;CAE3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuGvD,CAAC;AAGH,eAAe,cAAc,CAAC"}

package/dist/components/AnimatedObject.js

@@ -3,6 +3,7 @@ import { useRef, useEffect, useCallback, memo } from 'react';
 import { usePathAnimation } from '../hooks/usePathAnimation.js';
 import EffectsGroup from './EffectsGroup.js';
 import { useObjectAnimation } from '../hooks/useObjectAnimation.js';
+import { hasHoverAnimation } from '../utils/hasHoverAnimation.js';
 export const AnimatedObject = memo(({ stateKey, transitionSettings, createdObject, 
 // speed = 1,
 visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointerLeave, anchor, hovered = false, animateMaterial = true,
@@ -15,6 +16,8 @@ visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointe
     const stepDuration = useRef(1);
     const stepEase = useRef('linear');
     const animProgress = useRef(0);
+    const hasHoverFunctionalities = hasHoverAnimation(createdObject.animations);
+    const hasMouseInteraction = createdObject.interactions && createdObject.interactions.actions.length > 0;
     const baseRef = useRef({ position: [...position], scale: [...scale], rotation: [...rotation] });
     const targetRef = useRef({
         position: targetPosition ? [...targetPosition] : [...position],
@@ -43,85 +46,20 @@ visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointe
             animProgress.current = 0;
     }, [position, scale, rotation, targetPosition, targetScale, targetRotation]);
     useEffect(() => { syncTransform(); }, [position, scale, rotation, targetPosition, targetScale, targetRotation]);
-    // useAnimationEvents({
-    //   onStepStart: (event) => {
-    //     console.log('Received animation event:', event);
-    //     if (!event.step?.transitions) return;
-    //     const d = event.step.duration || 1;
-    //     for (const { state, properties, pathId } of event.step.transitions) {
-    //       console.log(`Animation event for state: ${state}, object stateKey: ${stateKey}`);
-    //       if (state !== stateKey) continue;
-    //       if (properties.to.visible === false) {
-    //         if (groupRef.current) groupRef.current.visible = false;
-    //       } else {
-    //         if (groupRef.current) groupRef.current.visible = true;
-    //         stepDuration.current = d;
-    //         stepEase.current = event.step.ease || 'linear';
-    //         animationStartTime.current = performance.now();
-    //         animProgress.current = 0;
-    //         if (pathId) {
-    //           startPathAnimation(pathId, d, { ease: stepEase.current });
-    //         } else {
-    //           const cur = targetRef.current;
-    //           baseRef.current   = {
-    //             position: (properties.from?.position ? [...properties.from.position] : cur.position) as [number, number, number],
-    //             rotation: (properties.from?.rotation ? [...properties.from.rotation] : cur.rotation) as [number, number, number],
-    //             scale:    (properties.from?.scale    ? [...properties.from.scale]    : cur.scale)    as [number, number, number],
-    //           };
-    //           targetRef.current = {
-    //             position: (properties.to?.position ? [...properties.to.position] : cur.position) as [number, number, number],
-    //             rotation: (properties.to?.rotation ? [...properties.to.rotation] : cur.rotation) as [number, number, number],
-    //             scale:    (properties.to?.scale    ? [...properties.to.scale]    : cur.scale)    as [number, number, number],
-    //           };
-    //         }
-    //       }
-    //     }
-    //   },
-    // });
-    // const applyTransformProgress = useCallback(() => {
-    //   const obj = groupRef.current;
-    //   if (!obj || animationStartTime.current === null) return;
-    //   const p = AnimationsManager.getProgressFromTime(
-    //     animationStartTime.current,
-    //     stepDuration.current,
-    //     stepEase.current,
-    //   );
-    //   animProgress.current = p;
-    //   const b = baseRef.current, t = targetRef.current;
-    //   obj.position.set(
-    //     b.position[0] + (t.position[0] - b.position[0]) * p,
-    //     b.position[1] + (t.position[1] - b.position[1]) * p,
-    //     b.position[2] + (t.position[2] - b.position[2]) * p,
-    //   );
-    //   obj.scale.set(
-    //     b.scale[0] + (t.scale[0] - b.scale[0]) * p,
-    //     b.scale[1] + (t.scale[1] - b.scale[1]) * p,
-    //     b.scale[2] + (t.scale[2] - b.scale[2]) * p,
-    //   );
-    //   obj.rotation.set(
-    //     b.rotation[0] + (t.rotation[0] - b.rotation[0]) * p,
-    //     b.rotation[1] + (t.rotation[1] - b.rotation[1]) * p,
-    //     b.rotation[2] + (t.rotation[2] - b.rotation[2]) * p,
-    //   );
-    // }, []);
-    // useFrame((_state, delta) => {
-    //   if (!visible || !groupRef.current) return;
-    //   if (animProgress.current < 1) {
-    //     if (isPathAnimating()) {
-    //       const still = updatePathAnimation(delta, groupRef.current);
-    //       if (!still) { animProgress.current = 1; animationStartTime.current = null; }
-    //     } else if (animationStartTime.current !== null) {
-    //       applyTransformProgress();
-    //     }
-    //   }
-    //   if (anchor) applyAnchorSettings(anchor, groupRef.current, rotation);
-    // });
     const onClick = (e) => {
+        e.stopPropagation();
         if (handleObjectClick && groupRef.current) {
             handleObjectClick(createdObject, groupRef.current, e);
         }
     };
-    return (_jsx(_Fragment, { children: _jsxs("group", { ref: groupRef, position: position, scale: scale, rotation: rotation, visible: visible, onClick: (e) => { e.stopPropagation(); onClick?.(e); }, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, name: createdObject.meshSettings.name, userData: { id: createdObject.id }, children: [children, _jsx(EffectsGroup, { createdObject: createdObject })] }) }));
+    // console.log("AnimatedObject render", { name: createdObject.meshSettings.name, id: createdObject.id, hovered, hasHoverFunctionalities })
+    if (createdObject.type === 'particles' || createdObject.type === 'gallery' || (!hasHoverFunctionalities && !hasMouseInteraction)) {
+        return _jsx(_Fragment, { children: _jsxs("group", { ref: groupRef, position: position, scale: scale, rotation: rotation, visible: visible, onClick: onClick, 
+                // onPointerEnter={onPointerEnter}
+                // onPointerLeave={onPointerLeave}
+                name: createdObject.meshSettings.name, userData: { id: createdObject.id }, children: [children, _jsx(EffectsGroup, { createdObject: createdObject })] }) });
+    }
+    return (_jsx(_Fragment, { children: _jsxs("group", { ref: groupRef, position: position, scale: scale, rotation: rotation, visible: visible, onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, name: createdObject.meshSettings.name, userData: { id: createdObject.id }, children: [children, _jsx(EffectsGroup, { createdObject: createdObject })] }) }));
 });
 AnimatedObject.displayName = 'AnimatedObject';
 export default AnimatedObject;

package/dist/components/CameraController.d.ts

@@ -1,9 +1,9 @@
 import type { CameraState } from '@ntalmagor/3drize-core';
 interface CameraControllerProps {
+    settings: CameraState;
     enableAutoAnimation?: boolean;
     animationDuration?: number;
     animationEase?: string;
-    settings: CameraState;
 }
 export declare const CameraController: React.FC<CameraControllerProps>;
 export default CameraController;

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

@@ -1 +1 @@
-{"version":3,"file":"CameraController.d.ts","sourceRoot":"","sources":["../../src/components/CameraController.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAiC,MAAM,wBAAwB,CAAC;AAGzF,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,WAAW,CAAA;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2I5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CameraController.d.ts","sourceRoot":"","sources":["../../src/components/CameraController.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAiD,MAAM,wBAAwB,CAAC;AAIzG,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,WAAW,CAAA;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsM5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/CameraController.js

@@ -1,14 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { useFrame, useThree } from '@react-three/fiber';
 import { useCameraAnimation } from '../hooks/useCameraAnimation.js';
 import { cameraManager } from '../utils/CameraSingleton.js';
 import { useAnimationEvents } from '../hooks/useAnimationEvents.js';
 import { usePathAnimation } from '../hooks/usePathAnimation.js';
-export const CameraController = ({ enableAutoAnimation = true, animationDuration = 1, animationEase = "power2.out", settings }) => {
+import { OrbitControls } from "@react-three/drei";
+export const CameraController = ({ enableAutoAnimation = true, animationDuration = 1, animationEase = "power2.out", settings, }) => {
     const { camera, set } = useThree();
     const cameraRef = useRef(camera);
     const transformAnimationProgress = useRef(0);
-    const { position, orientation, fov, near, far } = settings;
+    const controlsRef = useRef(null);
+    const { position, orientation, fov, near, far, controls } = settings;
+    const initialControls = useRef(controls);
     const { startPathAnimation, updatePathAnimation, isAnimating: isPathAnimating, } = usePathAnimation();
     // Use camera animation hook for animated transitions (via events)
     const { animateCamera, animateHandlers, isAnimating } = useCameraAnimation({
@@ -43,6 +47,27 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
             console.log("CameraController: Synced position/orientation", position, orientation);
         }
     }, [position, orientation]);
+    // Sync controls config changes imperatively via ref (after initial mount)
+    useEffect(() => {
+        const orbitControls = controlsRef.current;
+        if (!orbitControls)
+            return;
+        orbitControls.enabled = controls.enabled;
+        orbitControls.target.set(controls.target[0], controls.target[1], controls.target[2]);
+        orbitControls.enablePan = controls.enablePan;
+        orbitControls.enableRotate = controls.enableRotate;
+        orbitControls.autoRotate = controls.autoRotate;
+        orbitControls.autoRotateSpeed = controls.autoRotateSpeed;
+        orbitControls.zoomSpeed = controls.zoomSpeed;
+        orbitControls.panSpeed = controls.panSpeed;
+        orbitControls.rotateSpeed = controls.rotateSpeed;
+        orbitControls.minDistance = controls.minDistance;
+        orbitControls.maxDistance = controls.maxDistance;
+        orbitControls.minPolarAngle = controls.minPolarAngle ?? -Infinity;
+        orbitControls.maxPolarAngle = controls.maxPolarAngle ?? Infinity;
+        orbitControls.minAzimuthAngle = controls.minAzimuthAngle ?? -Infinity;
+        orbitControls.maxAzimuthAngle = controls.maxAzimuthAngle ?? Infinity;
+    }, [controls]);
     // Sync camera projection settings from state
     useEffect(() => {
         const cam = cameraRef.current;
@@ -74,16 +99,9 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
                 event.step.transitions.forEach((transition) => {
                     const { state, properties, pathId } = transition;
                     if (state === 'camera') {
+                        console.log('Camera transition detected. Starting animation to new camera state:', properties);
                         isInAnimatedTransition.current = true;
-                        const targetSettings = {
-                            fov: properties.to.fov,
-                            near: properties.to.near,
-                            far: properties.to.far,
-                        };
-                        if (!pathId) {
-                            targetSettings.position = properties.to.position;
-                        }
-                        else {
+                        if (pathId) {
                             const offset = camera
                                 ? [camera.position.x, camera.position.y, camera.position.z]
                                 : [0, 0, 0];
@@ -94,15 +112,31 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
                             });
                             transformAnimationProgress.current = 0;
                         }
-                        console.log("Animating camera to:", targetSettings, "over duration:", stepDuration);
+                        // console.log("Animating camera to:", targetSettings, "over duration:", stepDuration);
+                        const startSettings = properties.from ?
+                            {
+                                position: properties.from.position,
+                                // orientation: properties.from.orientation,
+                            } : {
+                            position: camera.position,
+                            // orientation: camera.rotation,
+                        };
+                        const targetSettings = properties.to;
+                        console.log("Starting camera animation from:", startSettings);
+                        // startSettings.position && camera.position.set(startSettings.position[0], startSettings.position[1], startSettings.position[2]);
+                        // camera.rotation.set(startSettings.orientation[0], startSettings.orientation[1], startSettings.orientation[2]);
                         animateCamera(targetSettings, stepDuration, event.step?.ease, properties.to.target)
                             .then(() => {
                             isInAnimatedTransition.current = false;
+                            if (properties.to.target) {
+                                controlsRef.current?.target.set(properties.to.target[0], properties.to.target[1], properties.to.target[2]);
+                            }
+                            ;
                         });
                     }
                 });
             }
-        },
+        }
     });
     // Frame loop for path animations and mouse handlers
     useFrame((state, delta) => {
@@ -116,6 +150,9 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
             animateHandlers(state.pointer);
         }
     });
-    return null;
+    const ic = initialControls.current;
+    return _jsx(OrbitControls, { ref: controlsRef, makeDefault: true, enabled: ic.enabled, 
+        // target={new Vector3(...ic.target)}
+        enablePan: ic.enablePan, enableRotate: ic.enableRotate, autoRotate: ic.autoRotate, autoRotateSpeed: ic.autoRotateSpeed, zoomSpeed: ic.zoomSpeed, panSpeed: ic.panSpeed, rotateSpeed: ic.rotateSpeed, minDistance: ic.minDistance, maxDistance: ic.maxDistance, minPolarAngle: ic.minPolarAngle ?? -Infinity, maxPolarAngle: ic.maxPolarAngle ?? Infinity, minAzimuthAngle: ic.minAzimuthAngle ?? -Infinity, maxAzimuthAngle: ic.maxAzimuthAngle ?? Infinity });
 };
 export default CameraController;

package/dist/components/Clouds.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
-import type { MaterialSettings } from '@ntalmagor/3drize-core';
-import type { TimeSettings } from '@ntalmagor/3drize-core';
+import type { CloudsSettings, TimeSettings } from '@ntalmagor/3drize-core';
 export interface CloudsProps {
-    visible?: boolean;
-    scale?: number;
-    height?: number;
-    speed?: number;
-    materialSettings?: MaterialSettings;
+    settings: CloudsSettings;
     timeSettings: TimeSettings;
 }
 declare const Clouds: React.FC<CloudsProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Clouds.d.ts","sourceRoot":"","sources":["../../src/components/Clouds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAkB3D,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Clouds.d.ts","sourceRoot":"","sources":["../../src/components/Clouds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,OAAO,KAAK,EAAE,cAAc,EAAoB,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAoB7F,MAAM,WAAW,WAAW;IAE1B,QAAQ,EAAE,cAAc,CAAA;IACxB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqKjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Clouds.js

@@ -4,6 +4,10 @@ import * as THREE from 'three';
 import { useThree, useFrame } from '@react-three/fiber';
 import { useMaterialApplication } from '../hooks/useMaterialApplication.js';
 import { useSkySystem } from '../hooks/useSkySystem.js';
+import { useAnimationEvents } from '../hooks/useAnimationEvents.js';
+import { useNumericAnimation } from '../hooks/useNumericAnimation.js';
+import { applySingleProperty } from '@ntalmagor/3drize-core';
+import { useMouseHandlers } from '../hooks/useMouseHandlers.js';
 const CLOUD_COLORS = {
     night: new THREE.Color(0.1, 0.1, 0.2),
     sunrise: new THREE.Color(0.8, 0.4, 0.4),
@@ -18,12 +22,17 @@ const DEFAULT_MATERIAL = {
     u_cameraPos: [0, 0, 0],
     u_cloudColor: [1.0, 1.0, 1.0],
 };
-const Clouds = ({ visible = true, scale = 1, height = 400, speed = 1, materialSettings, timeSettings, }) => {
+const Clouds = ({ settings, timeSettings, }) => {
+    const { visible = true, position = [0, 400, 0], scale = 15000, speed = 1, materialSettings = DEFAULT_MATERIAL, handlers } = settings;
+    const height = position?.[1] ?? 400;
     const [meshNode, setMeshNode] = useState(null);
     const cloudAnimTime = useRef(0);
     const { camera } = useThree();
+    const { interpolateProperty } = useMouseHandlers();
     const cloudColorRef = useRef(new THREE.Color(1, 1, 1));
     const targetCloudColorRef = useRef(new THREE.Color(1, 1, 1));
+    const numericOverrideRef = useRef(null);
+    const { animateNumeric } = useNumericAnimation();
     const meshRefCallback = useCallback((node) => {
         setMeshNode(node);
     }, []);
@@ -59,14 +68,65 @@ const Clouds = ({ visible = true, scale = 1, height = 400, speed = 1, materialSe
         onTimeUpdate: handleTimeUpdate,
         enabled: visible,
     });
-    useFrame(() => {
+    useAnimationEvents({
+        onStepStart: (event) => {
+            if (!event.step?.transitions)
+                return;
+            for (const transition of event.step.transitions) {
+                if (transition.state !== 'clouds' || !meshNode)
+                    continue;
+                const toProps = transition.properties.to || {};
+                const fromProps = transition.properties.from || {};
+                // visible — immediate boolean switch on the Three.js mesh
+                if (toProps.visible !== undefined) {
+                    meshNode.visible = toProps.visible;
+                }
+                // numeric: speed, scale
+                const CLOUDS_NUMERIC_KEYS = ['speed', 'scale'];
+                const from = {};
+                const to = {};
+                for (const key of CLOUDS_NUMERIC_KEYS) {
+                    const toVal = toProps[key];
+                    if (toVal === undefined)
+                        continue;
+                    to[key] = toVal;
+                    from[key] = fromProps[key] ?? settings[key] ?? toVal;
+                }
+                if (Object.keys(to).length > 0) {
+                    animateNumeric(from, to, (updated) => {
+                        numericOverrideRef.current = { ...numericOverrideRef.current, ...updated };
+                    }, () => {
+                        numericOverrideRef.current = null;
+                    }, event.step?.duration);
+                }
+            }
+        },
+    });
+    const handleMouseMove = (mouse) => {
+        // Mouse-move property handlers
+        if (handlers?.onMouseMove?.enabled && handlers.onMouseMove.properties.length && meshNode) {
+            handlers.onMouseMove.properties.forEach((props) => {
+                const { property, propertySettings } = props;
+                const { min: minValue, max: maxValue, axis, sensitivity = 1, inverted = false } = propertySettings;
+                const baseValue = settings.materialSettings[property];
+                if (!baseValue)
+                    return;
+                const interpolatedValue = interpolateProperty(baseValue, minValue, maxValue, mouse, axis, sensitivity, inverted);
+                if (meshNode) {
+                    applySingleProperty(meshNode.material, property, interpolatedValue);
+                }
+            });
+        }
+    };
+    useFrame((state) => {
         if (!visible || !meshNode?.material)
             return;
         const material = meshNode.material;
         const uniforms = material?.uniforms;
         if (!uniforms)
             return;
-        cloudAnimTime.current += 0.02 * speed;
+        cloudAnimTime.current += 0.02 * (numericOverrideRef.current?.speed ?? speed);
+        const mouse = state.pointer;
         if (uniforms.u_time)
             uniforms.u_time.value = cloudAnimTime.current;
         if (uniforms.u_cameraPos) {
@@ -89,6 +149,10 @@ const Clouds = ({ visible = true, scale = 1, height = 400, speed = 1, materialSe
                 ? uniforms.u_sunPosition.value.copy(sunDirection)
                 : (uniforms.u_sunPosition.value = sunDirection.clone());
         }
+        handleMouseMove(mouse);
+        if (numericOverrideRef.current?.scale !== undefined) {
+            meshNode.scale.setScalar(numericOverrideRef.current.scale);
+        }
     });
     if (!visible)
         return null;

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

@@ -1 +1 @@
-{"version":3,"file":"CreatedObject.d.ts","sourceRoot":"","sources":["../../src/components/CreatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAG,qBAAqB,EAAkC,MAAM,wBAAwB,CAAC;AAOrG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAWrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAElH;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiK9C,CAAC;AAIH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CreatedObject.d.ts","sourceRoot":"","sources":["../../src/components/CreatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAG,qBAAqB,EAAkC,MAAM,wBAAwB,CAAC;AAOrG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAWrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAElH;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwJ9C,CAAC;AAIH,eAAe,aAAa,CAAC"}

package/dist/components/CreatedObject.js

@@ -60,14 +60,17 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
     // Check if this should use the new MaterialLibrary system for Drei materials
     // console.log(object)
     const handleObjectEnter = (e) => {
-        // console.log(e.eventObject)
+        console.log(e);
         // Only handle if this is the actual mesh group, not a child
         if (e.eventObject !== meshRef.current)
             return;
         if (createdObject.type === 'particles' || createdObject.type === 'gallery')
             return;
-        e.stopPropagation();
+        // e.stopPropagation();
         handlePointerEnter(e);
+        if (createdObject.interactions) {
+            document.body.style.cursor = 'pointer';
+        }
     };
     const handleObjectLeave = (e) => {
         // Only handle if this is the actual mesh group, not a child
@@ -76,21 +79,9 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
         if (createdObject.type === 'particles' || createdObject.type === 'gallery')
             return;
         handlePointerLeave();
+        document.body.style.cursor = 'auto';
         e.stopPropagation();
     };
-    const onClick = (e) => {
-        console.log('[1] CreatedObject.handleObjectClick:', createdObject.id, createdObject.meshSettings?.name);
-        // if (createdObject.type === 'gallery') {
-        //   e.stopPropagation();
-        //   return
-        // }
-        // contextHandleObjectClick(
-        //   createdObject,
-        //   meshRef.current,
-        //   [0, 0, 0],
-        //   e
-        // );
-    };
     const anchorEnabled = createdObject.meshSettings.anchor && createdObject.meshSettings.anchor.enabled;
     // console.log("createdObject.meshSettings", createdObject.meshSettings)
     // console.log("Rendered CreatedObject:", createdObject.rigidBodySettings);
@@ -105,7 +96,7 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
             position: anchorEnabled ? [anchoredPosition.x, anchoredPosition.y, anchoredPosition.z] : animatedTransform.position
         }, createdObject: createdObject, 
         // animateMaterial={!useDreiMaterials}
-        parentRef: meshRef, visible: createdObject.meshSettings.visible, handleObjectClick: handleObjectClick, onPointerEnter: handleObjectEnter, onPointerLeave: e => handleObjectLeave(e), children: createdObject.rigidBodySettings?.enabled ? (_jsx(RigidBody, { type: createdObject.rigidBodySettings?.type || 'dynamic', mass: createdObject.rigidBodySettings?.mass || 1, colliders: createdObject.userData?.type === 'plane'
+        parentRef: meshRef, visible: createdObject.meshSettings.visible, handleObjectClick: handleObjectClick, onPointerEnter: handleObjectEnter, onPointerLeave: e => handleObjectLeave(e), hovered: hovered, children: createdObject.rigidBodySettings?.enabled ? (_jsx(RigidBody, { type: createdObject.rigidBodySettings?.type || 'dynamic', mass: createdObject.rigidBodySettings?.mass || 1, colliders: createdObject.userData?.type === 'plane'
                 ? 'cuboid' // Force box collider for planes
                 : undefined // Auto-detect for others
             , friction: createdObject.rigidBodySettings?.friction, restitution: createdObject.rigidBodySettings?.restitution, gravityScale: createdObject.rigidBodySettings?.gravityScale ?? 1, linearDamping: createdObject.rigidBodySettings?.linearDamping ?? 0.01, angularDamping: createdObject.rigidBodySettings?.angularDamping ?? 0.01, children: children })) : (children) }));

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

@@ -1 +1 @@
-{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAoB,KAAK,qBAAqB,EAI5B,MAAM,wBAAwB,CAAC;AAIxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrD,UAAU,oBAAoB;IAC5B,aAAa,EAAE,qBAAqB,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqHlD,CAAC;AAIH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAoB,KAAK,qBAAqB,EAI5B,MAAM,wBAAwB,CAAC;AAIxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrD,UAAU,oBAAoB;IAC5B,aAAa,EAAE,qBAAqB,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsHlD,CAAC;AAIH,eAAe,eAAe,CAAC"}

package/dist/components/CustomPrimitive.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useRef, useEffect, memo, useState } from "react";
-import { ObjectManager, createDefaultEffectState, applyTransformEffects } from "@ntalmagor/3drize-core";
+import { ObjectManager } from "@ntalmagor/3drize-core";
 // import ObjectManager from "~/utils/ObjectManager";
 import { useMaterialApplication } from "../hooks/useMaterialApplication.js";
-import { useFrame } from "@react-three/fiber";
 import MaterialLibrary from "./MaterialLibrary.js";
 // import type { AnimatedTransform } from "~/types/mesh";
 import CreatedObject from "./CreatedObject.js";
@@ -35,6 +34,7 @@ const CustomPrimitive = memo(({ createdObject, onObjectReady, handleObjectClick,
     const willApplyMaterial = apply3driseMaterials && !!createdObject.materialSettings.materialVariant;
     const [materialReady, setMaterialReady] = useState(!willApplyMaterial);
     // Get the actual Three.js object from ObjectManager
+    // console.log("CustomPrimitive - ID:", createdObject.id, createdObject.meshSettings.name);
     const obj = ObjectManager.getObject(createdObject.id);
     // console.log("CustomPrimitive - Retrieved object from ObjectManager:", obj);
     // Apply material directly to obj.object (always non-null when obj exists, available before the
@@ -51,20 +51,27 @@ const CustomPrimitive = memo(({ createdObject, onObjectReady, handleObjectClick,
     const transformEffects = createdObject.animations?.transform?.effects || []; // Array of effects from transform domain
     const enabledTransformEffects = transformEffects.filter(e => e.enabled);
     // console.log(isSelected)
-    useFrame((state, dt) => {
-        if (!meshRef.current || !applyToChildren)
-            return;
-        const time = state.clock.elapsedTime;
-        // Initialize effect state if needed
-        if (!effectStateRef.current && meshRef.current) {
-            effectStateRef.current = createDefaultEffectState(meshRef.current);
-        }
-        // Apply transform effects from new continuous structure (multiple effects)
-        if (enabledTransformEffects.length > 0 && effectStateRef.current) {
-            applyTransformEffects(meshRef.current, enabledTransformEffects, // Pass array of enabled effects
-            time, dt, effectStateRef.current, hovered, clicked, sensitivity);
-        }
-    });
+    // useFrame((state, dt) => {
+    //   if (!meshRef.current || !applyToChildren) return;
+    //   const time = state.clock.elapsedTime;
+    //   // Initialize effect state if needed
+    //   if (!effectStateRef.current && meshRef.current) {
+    //     effectStateRef.current = createDefaultEffectState(meshRef.current);
+    //   }
+    //   // Apply transform effects from new continuous structure (multiple effects)
+    //   if (enabledTransformEffects.length > 0 && effectStateRef.current) {
+    //     applyTransformEffects(
+    //       meshRef.current,
+    //       enabledTransformEffects,  // Pass array of enabled effects
+    //       time,
+    //       dt,
+    //       effectStateRef.current,
+    //       hovered,
+    //       clicked,
+    //       sensitivity
+    //     );
+    //   }
+    // });
     const geometry = obj.object.geometry;
     return (
     // <Select enabled={isSelected}>

package/dist/components/Letter.js

@@ -79,5 +79,5 @@ export default function Letter({ letterData, config, materialSettings, hoverSett
     const boxWidth = fontSize * 0.8;
     const boxHeight = fontSize * 1.2;
     const boxDepth = actualRenderMode === 'text3d' ? text3DConfig.height + text3DConfig.bevelThickness * 2 : text3DConfig.height + 1;
-    return (_jsxs("group", { position: letterData.position, rotation: [0, 0, 0], ref: groupRef, name: `letter-${letterData.char}-${letterData.index}`, userData: { char: letterData.char, index: letterData.index, position: letterData.position }, children: [_jsx("mesh", { ref: hitboxRef, visible: false, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onClick: handleClick, children: _jsx("boxGeometry", { args: [boxWidth, boxHeight, boxDepth] }) }), _jsx("group", { ref: letterRef, raycast: () => null, children: actualRenderMode === 'text3d' ? (_jsx(Center, { disableX: text2DConfig.anchorX === 'left', disableY: text2DConfig.anchorY === 'top', disableZ: false, children: _jsxs(Text3D, { font: text3dFontUrl || 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', size: text3DConfig.size, height: text3DConfig.height, curveSegments: text3DConfig.curveSegments, bevelEnabled: text3DConfig.bevelEnabled, bevelThickness: text3DConfig.bevelThickness, bevelSize: text3DConfig.bevelSize, bevelOffset: text3DConfig.bevelOffset, bevelSegments: text3DConfig.bevelSegments, children: [letterData.char, useDreiMaterials && actualRenderMode === 'text3d' ? (_jsx(MaterialLibrary, { materialSettings: materialSettings })) : (_jsx("meshStandardMaterial", { color: color, transparent: opacity < 1, opacity: opacity }))] }) })) : (_jsx(Text, { fontSize: text2DConfig.fontSize, color: color, maxWidth: text2DConfig.maxWidth, lineHeight: text2DConfig.lineHeight, letterSpacing: text2DConfig.letterSpacing, textAlign: text2DConfig.textAlign, anchorX: text2DConfig.anchorX, anchorY: text2DConfig.anchorY, font: bitmapFontUrl || undefined, fillOpacity: opacity, children: letterData.char })) })] }));
+    return (_jsx("group", { position: letterData.position, rotation: [0, 0, 0], ref: groupRef, name: `letter-${letterData.char}-${letterData.index}`, userData: { char: letterData.char, index: letterData.index, position: letterData.position }, children: _jsx("group", { ref: letterRef, raycast: () => null, children: actualRenderMode === 'text3d' ? (_jsx(Center, { disableX: text2DConfig.anchorX === 'left', disableY: text2DConfig.anchorY === 'top', disableZ: false, children: _jsxs(Text3D, { font: text3dFontUrl || 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', size: text3DConfig.size, height: text3DConfig.height, curveSegments: text3DConfig.curveSegments, bevelEnabled: text3DConfig.bevelEnabled, bevelThickness: text3DConfig.bevelThickness, bevelSize: text3DConfig.bevelSize, bevelOffset: text3DConfig.bevelOffset, bevelSegments: text3DConfig.bevelSegments, children: [letterData.char, useDreiMaterials && actualRenderMode === 'text3d' ? (_jsx(MaterialLibrary, { materialSettings: materialSettings })) : (_jsx("meshStandardMaterial", { color: color, transparent: opacity < 1, opacity: opacity }))] }) })) : (_jsx(Text, { fontSize: text2DConfig.fontSize, color: color, maxWidth: text2DConfig.maxWidth, lineHeight: text2DConfig.lineHeight, letterSpacing: text2DConfig.letterSpacing, textAlign: text2DConfig.textAlign, anchorX: text2DConfig.anchorX, anchorY: text2DConfig.anchorY, font: bitmapFontUrl || undefined, fillOpacity: opacity, children: letterData.char })) }) }));
 }

package/dist/components/LoadingIndicator.d.ts

@@ -5,6 +5,6 @@ export interface LoadingIndicatorProps {
     animate?: boolean;
     size?: number;
 }
-export declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
+declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
 export default LoadingIndicator;
 //# sourceMappingURL=LoadingIndicator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../src/components/LoadingIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA4ID,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuB5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../src/components/LoadingIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA4ID,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuBrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LoadingIndicator.js

@@ -136,7 +136,7 @@ function injectStyles() {
     style.textContent = CSS;
     document.head.appendChild(style);
 }
-export const LoadingIndicator = ({ text, fullScreen = false, animate = true, size = 80, }) => {
+const LoadingIndicator = ({ text, fullScreen = false, animate = true, size = 80, }) => {
     useEffect(() => { injectStyles(); }, []);
     return (_jsxs("div", { className: `loading-indicator${animate ? ' animate' : ''}${fullScreen ? ' loading-indicator-fullscreen' : ''}`, children: [_jsxs("div", { className: "loading-spinner", style: { width: `${size}px`, height: `${size}px` }, children: [_jsx("div", { className: "spinner-ring" }), _jsx("div", { className: "spinner-ring" }), _jsx("div", { className: "spinner-ring" })] }), text && _jsx("div", { className: "loading-text", children: text })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Ocean.d.ts","sourceRoot":"","sources":["../../src/components/Ocean.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;CACzB;AA+CD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4E/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Ocean.d.ts","sourceRoot":"","sources":["../../src/components/Ocean.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAUhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8J/B,CAAC;AAEF,eAAe,KAAK,CAAC"}