@ntalmagor/3drize-viewer 0.1.2

package/dist/components/CustomPrimitive.js

@@ -0,0 +1,80 @@
+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 "~/utils/ObjectManager";
+import { useMaterialApplication } from "../hooks/useMaterialApplication";
+import { useFrame } from "@react-three/fiber";
+import MaterialLibrary from "./MaterialLibrary";
+// import type { AnimatedTransform } from "~/types/mesh";
+import CreatedObject from "./CreatedObject";
+import { useFrameEffects } from "../hooks/useFrameEffects";
+const CustomPrimitive = memo(({ createdObject, cameraSettings, updateObjectSettings, onObjectReady, }) => {
+    // const { handleObjectClick } = useSceneClick();
+    // console.log("Rendering CustomPrimitive with settings:", createdObject.name, createdObject);
+    const meshRef = useRef(null);
+    const effectStateRef = useRef(null);
+    const [animatedTransform, setAnimatedTransform] = React.useState({
+        position: createdObject.meshSettings.position,
+        rotation: createdObject.meshSettings.rotation,
+        scale: createdObject.meshSettings.scale,
+    });
+    // Initialize transform controls
+    const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(true);
+    useEffect(() => {
+        setAnimatedTransform({
+            position: createdObject.meshSettings.position,
+            rotation: createdObject.meshSettings.rotation,
+            scale: createdObject.meshSettings.scale,
+        });
+    }, [createdObject.meshSettings.position, createdObject.meshSettings.rotation, createdObject.meshSettings.scale]);
+    // Derive material flags before any early return so hooks are always called in the same order
+    const useDreiMaterials = createdObject.materialSettings.materialType === "advanced";
+    const apply3driseMaterials = !useDreiMaterials;
+    // Hide the model until the 3drise material is applied to prevent a flash of original GLTF materials.
+    // If no 3drise material variant is set, or Drei materials are used, show immediately.
+    const willApplyMaterial = apply3driseMaterials && !!createdObject.materialSettings.materialVariant;
+    const [materialReady, setMaterialReady] = useState(!willApplyMaterial);
+    // Get the actual Three.js object from ObjectManager
+    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
+    // outer group ref is committed) so the material is ready on the first visible frame.
+    useMaterialApplication(obj?.object ?? null, createdObject.materialSettings, apply3driseMaterials, () => setMaterialReady(true));
+    if (!obj) {
+        // console.warn(`CustomPrimitive - Object with ID ${createdObject.id} not found.`);
+        return null;
+    }
+    // const { sensitivity = 0.5, applyToChildren = false } = createdObject.interactions. || {};
+    const sensitivity = 0.5;
+    const applyToChildren = false;
+    const clicked = false;
+    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);
+        }
+    });
+    const geometry = obj.object.geometry;
+    return (
+    // <Select enabled={isSelected}>
+    _jsx(CreatedObject, { createdObject: createdObject, shouldApply3driseMaterial: false, 
+        // Outer group must be registered so transform animations and edges share the same root
+        onObjectReady: (object, ref) => {
+            onObjectReady && onObjectReady(object, ref);
+        }, children: _jsx("primitive", { ref: meshRef, name: obj.name, object: obj.object, visible: materialReady && createdObject.meshSettings.visible, position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1], children: useDreiMaterials && createdObject.type === 'mesh' && createdObject.meshSettings.visible && (_jsx(MaterialLibrary, { materialSettings: createdObject.materialSettings })) }, obj.id) })
+    // {/* </Select> */}
+    );
+});
+CustomPrimitive.displayName = 'CustomPrimitive';
+export default CustomPrimitive;

package/dist/components/EffectsGenerator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Object3D } from 'three';
+import type { GenerativeEffectSettings } from '@ntalmagor/3drize-core';
+export interface EffectsGeneratorProps {
+    settings: GenerativeEffectSettings;
+    object?: Object3D;
+}
+declare const EffectsGenerator: React.FC<EffectsGeneratorProps>;
+export default EffectsGenerator;
+//# sourceMappingURL=EffectsGenerator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EffectsGenerator.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGenerator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAgB,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAsBvE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,wBAAwB,CAAC;IACnC,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/EffectsGenerator.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box3, Sphere } from 'three';
+import MoleculesEffect from './effects/MoleculesEffect';
+import ShockwaveEffect from './effects/ShockwaveEffect';
+import AuraEffect from './effects/AuraEffect';
+import DataStreamEffect from './effects/DataStreamEffect';
+import ConstellationEffect from './effects/ConstellationEffect';
+import HologramEffect from './effects/HologramEffect';
+import PortalEffect from './effects/PortalEffect';
+import DnaHelixEffect from './effects/DnaHelixEffect';
+import OrbEffect from './effects/OrbEffect';
+import LightningEffect from './effects/LightningEffect';
+import AuroraEffect from './effects/AuroraEffect';
+import FireEffect from './effects/FireEffect';
+import ForcefieldEffect from './effects/ForcefieldEffect';
+import NeuralNetworkEffect from './effects/NeuralNetworkEffect';
+import BlackHoleEffect from './effects/BlackHoleEffect';
+import IceCrystalsEffect from './effects/IceCrystalsEffect';
+import SmokePlumeEffect from './effects/SmokePlumeEffect';
+import VolumetricFogEffect from './effects/VolumetricFogEffect';
+import SmokeRingEffect from './effects/SmokeRingEffect';
+const EffectsGenerator = ({ settings, object }) => {
+    if (!settings.enabled)
+        return null;
+    const boundingRadius = useMemo(() => {
+        if (!object)
+            return 1;
+        const box = new Box3().setFromObject(object);
+        const sphere = new Sphere();
+        box.getBoundingSphere(sphere);
+        return sphere.radius || 1;
+    }, [object]);
+    const { config } = settings;
+    const animations = settings.animations;
+    switch (config.type) {
+        case 'molecules': return _jsx(MoleculesEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'shockwave': return _jsx(ShockwaveEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'aura': return _jsx(AuraEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'dataStream': return _jsx(DataStreamEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'constellation': return _jsx(ConstellationEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'hologram': return _jsx(HologramEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'portal': return _jsx(PortalEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'dnaHelix': return _jsx(DnaHelixEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'orb': return _jsx(OrbEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'lightning': return _jsx(LightningEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'aurora': return _jsx(AuroraEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'fire': return _jsx(FireEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'forcefield': return _jsx(ForcefieldEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'neuralNetwork': return _jsx(NeuralNetworkEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'blackHole': return _jsx(BlackHoleEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'iceCrystals': return _jsx(IceCrystalsEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'smokePlume': return _jsx(SmokePlumeEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'volumetricFog': return _jsx(VolumetricFogEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'smokeRing': return _jsx(SmokeRingEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        default: return null;
+    }
+};
+export default EffectsGenerator;

package/dist/components/EffectsGroup.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CreatedObjectSettings } from '@ntalmagor/3drize-core';
+interface EffectsGroupProps {
+    createdObject: CreatedObjectSettings;
+}
+declare const EffectsGroup: React.FC<EffectsGroupProps>;
+export default EffectsGroup;
+//# sourceMappingURL=EffectsGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EffectsGroup.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAGpE,UAAU,iBAAiB;IACzB,aAAa,EAAE,qBAAqB,CAAC;CACtC;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAS7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EffectsGroup.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import EffectsGenerator from './EffectsGenerator';
+const EffectsGroup = ({ createdObject }) => {
+    if (!createdObject.effects || createdObject.effects.length === 0)
+        return null;
+    return (_jsx("group", { name: `${createdObject.id}-effects`, children: createdObject.effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) }));
+};
+export default EffectsGroup;

package/dist/components/EnvironmentManager.d.ts

@@ -0,0 +1,9 @@
+import { type SkySystemRef, type SkySystemProps } from './SkySystem';
+import type { HdrSettings } from '../../../core/src/types/environment';
+export interface EnvironmentManagerProps extends SkySystemProps {
+    hdrSettings?: HdrSettings;
+    cubeCameraResolution?: number;
+}
+declare const EnvironmentManager: import("react").ForwardRefExoticComponent<EnvironmentManagerProps & import("react").RefAttributes<SkySystemRef>>;
+export default EnvironmentManager;
+//# sourceMappingURL=EnvironmentManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentManager.d.ts","sourceRoot":"","sources":["../../src/components/EnvironmentManager.tsx"],"names":[],"mappings":"AAGA,OAAkB,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAGvE,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,QAAA,MAAM,kBAAkB,kHAoGtB,CAAC;AAIH,eAAe,kBAAkB,CAAC"}

package/dist/components/EnvironmentManager.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, forwardRef } from 'react';
+import { Environment } from '@react-three/drei';
+import { useThree } from '@react-three/fiber';
+import SkySystem from './SkySystem';
+import { useCubeCamera } from '../hooks/useCubeCamera';
+const EnvironmentManager = forwardRef(({ hdrSettings, cubeCameraResolution = 512, 
+// SkySystemProps — all forwarded to SkySystem
+timeSettings, visible = true, sunSystemVisible = false, sunSize, moonSize, skyboxScale, sunIntensity, castShadow, shadowMapSize, playerPosition, starsSettings, cloudsSettings, cloudsMaterialSettings, skyControllerSettings, rainSettings, fogSettings, onTimeOfDayChange, onTimeUpdate, }, ref) => {
+    const { scene } = useThree();
+    const defaultHdr = {
+        visible: false,
+        name: null,
+        settings: {
+            groundRadius: 200,
+            groundHeight: 10,
+            groundScale: 100,
+            blur: 0,
+            backgroundBlurriness: 0,
+            backgroundIntensity: 1,
+            backgroundRotation: 0,
+            environmentIntensity: 1,
+            environmentRotation: 0,
+        },
+    };
+    const hdr = hdrSettings ?? defaultHdr;
+    const backgroundName = hdr.visible ? hdr.name : null;
+    useCubeCamera({
+        hdrSettings: hdr,
+        skyVisible: visible ?? true,
+        sunSystemVisible: sunSystemVisible ?? false,
+        timeSettings,
+        resolution: cubeCameraResolution,
+    });
+    const environmentComponent = useMemo(() => {
+        if (!backgroundName)
+            return null;
+        return (_jsx(Environment, { preset: backgroundName, background: true, scene: scene, backgroundBlurriness: hdr.settings.backgroundBlurriness ?? 0, backgroundIntensity: hdr.settings.backgroundIntensity ?? 1, backgroundRotation: [0, hdr.settings.backgroundRotation ?? Math.PI / 2, 0], environmentIntensity: hdr.settings.environmentIntensity ?? 1, environmentRotation: [0, hdr.settings.environmentRotation ?? Math.PI / 2, 0], blur: hdr.settings.blur ?? 0, ground: {
+                radius: hdr.settings.groundRadius,
+                height: hdr.settings.groundHeight,
+                scale: hdr.settings.groundScale,
+            } }));
+    }, [backgroundName, hdr.settings, scene]);
+    return (_jsxs(_Fragment, { children: [environmentComponent, _jsx(SkySystem, { ref: ref, timeSettings: timeSettings, visible: visible, sunSystemVisible: sunSystemVisible, sunSize: sunSize, moonSize: moonSize, skyboxScale: skyboxScale, sunIntensity: sunIntensity, castShadow: castShadow, shadowMapSize: shadowMapSize, playerPosition: playerPosition, starsSettings: starsSettings, cloudsSettings: cloudsSettings, cloudsMaterialSettings: cloudsMaterialSettings, skyControllerSettings: skyControllerSettings, rainSettings: rainSettings, fogSettings: fogSettings, onTimeOfDayChange: onTimeOfDayChange, onTimeUpdate: onTimeUpdate })] }));
+});
+EnvironmentManager.displayName = 'EnvironmentManager';
+export default EnvironmentManager;

package/dist/components/Frame.d.ts

@@ -0,0 +1,26 @@
+import { type ThreeEvent } from '@react-three/fiber';
+import { Mesh } from "three";
+import type { CreatedObjectSettings, HoverSettings } from '@ntalmagor/3drize-core';
+import type { GalleryLayoutSettings } from '@ntalmagor/3drize-core';
+import type { TransformEffect, ColorEffect } from '@ntalmagor/3drize-core';
+import type { MaterialSettings } from '@ntalmagor/3drize-core';
+import { type FrameShapeType } from "./FrameGeometry";
+export type { FrameShapeType };
+export interface FrameProps {
+    url: string;
+    isActive: boolean;
+    createdObject: CreatedObjectSettings;
+    position?: [number, number, number];
+    rotation?: [number, number, number];
+    shapeType?: FrameShapeType;
+    hoverSettings: HoverSettings;
+    transformEffects?: TransformEffect[];
+    colorEffects?: ColorEffect[];
+    layoutSettings: GalleryLayoutSettings;
+    side: number;
+    materialSettings: MaterialSettings;
+    children?: React.ReactNode;
+    onFrameClick?: (createdObject: CreatedObjectSettings, mesh: Mesh, e: ThreeEvent<MouseEvent>) => void;
+}
+export default function Frame({ url, isActive, createdObject, position, rotation, shapeType, hoverSettings, transformEffects, colorEffects, layoutSettings, side, materialSettings, children, onFrameClick, }: FrameProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Frame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../src/components/Frame.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAA0C,IAAI,EAAgB,MAAM,OAAO,CAAC;AACnF,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAgB,MAAM,wBAAwB,CAAC;AACjG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMrE,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,cAAc,EAAE,qBAAqB,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACtG;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,GAAG,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAoB,EACpB,aAAa,EACb,gBAAqB,EACrB,YAAiB,EACjB,cAAc,EACd,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,YAAY,GACb,EAAE,UAAU,kDAkFZ"}

package/dist/components/Frame.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { useCursor } from "@react-three/drei";
+import { BackSide, DoubleSide, FrontSide, Mesh } from "three";
+import texturesManager from "../../../core/src/services/TexturesManager";
+import { FrameGeometry } from "./FrameGeometry";
+import { FrameImage } from "./FrameImage";
+import MaterialLibrary from "./MaterialLibrary";
+import { useFrameEffects } from "../hooks/useFrameEffects";
+import { useObjectAnimation } from "../hooks/useObjectAnimation";
+export default function Frame({ url, isActive, createdObject, position, rotation, shapeType = 'circle', hoverSettings, transformEffects = [], colorEffects = [], layoutSettings, side, materialSettings, children, onFrameClick, }) {
+    const frameRef = useRef(new Mesh());
+    const imageRef = useRef(null);
+    const [texture, setTexture] = useState(null);
+    useEffect(() => {
+        let mounted = true;
+        const existing = texturesManager.getTextureByUrl(url);
+        if (existing) {
+            setTexture(existing);
+        }
+        else {
+            const name = url.split('/').pop()?.split('.')[0] || `texture-${Date.now()}`;
+            texturesManager.loadTexture(name, url, 'images')
+                .then((loaded) => { if (mounted)
+                setTexture(loaded); })
+                .catch((err) => console.error('Failed to load texture:', err));
+        }
+        return () => { mounted = false; };
+    }, [url]);
+    const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(isActive);
+    useCursor(hovered);
+    const enabledEffects = transformEffects.filter(e => e.enabled !== false);
+    const animateMaterial = enabledEffects.length > 0 || colorEffects.some(e => e.enabled !== false);
+    useObjectAnimation(createdObject, animateMaterial, { enabled: true, hovered }, frameRef.current);
+    const scale = [
+        0.9 * (layoutSettings.width || 1),
+        0.9 * (layoutSettings.height || 1),
+        0.9,
+    ];
+    const showFront = side === FrontSide || side === DoubleSide;
+    const showBack = side === BackSide || side === DoubleSide;
+    const handleObjectClick = (e) => {
+        if (!frameRef.current)
+            return;
+        onFrameClick?.(createdObject, frameRef.current, e);
+    };
+    if (!texture)
+        return null;
+    return (_jsx("mesh", { name: url, ref: frameRef, position: position, rotation: rotation, scale: scale, raycast: () => null, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onClick: handleObjectClick, children: children ? children : (_jsxs(_Fragment, { children: [_jsx(FrameGeometry, { shapeType: 'rectangle', layoutSettings: layoutSettings, scale: layoutSettings.outerFrameScale }), _jsx(MaterialLibrary, { materialSettings: materialSettings }), showFront && (_jsx(FrameImage, { ref: imageRef, texture: texture, shapeType: 'rectangle', position: [0, 0, 0.02] })), showBack && (_jsx(FrameImage, { texture: texture, shapeType: 'rectangle', position: [0, 0, -0.02], rotation: [0, Math.PI, 0], isBack: true }))] })) }));
+}

package/dist/components/FrameGeometry.d.ts

@@ -0,0 +1,10 @@
+import type { GalleryLayoutSettings } from '@ntalmagor/3drize-core';
+export type FrameShapeType = 'rectangle' | 'ellipse' | 'circle' | 'roundedRectangle';
+interface FrameGeometryProps {
+    shapeType: FrameShapeType;
+    scale?: number;
+    layoutSettings?: GalleryLayoutSettings;
+}
+export declare function FrameGeometry({ shapeType, scale, layoutSettings }: FrameGeometryProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FrameGeometry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FrameGeometry.d.ts","sourceRoot":"","sources":["../../src/components/FrameGeometry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,kBAAkB,CAAC;AAErF,UAAU,kBAAkB;IAC1B,SAAS,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,qBAAqB,CAAC;CACxC;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,KAAS,EAAE,cAAc,EAAE,EAAE,kBAAkB,2CAgBzF"}

package/dist/components/FrameGeometry.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FrameGeometry({ shapeType, scale = 1, layoutSettings }) {
+    const width = (layoutSettings?.width || 1) * scale;
+    const height = (layoutSettings?.height || 1) * scale;
+    const depth = 0.05;
+    switch (shapeType) {
+        case 'ellipse':
+            return _jsx("circleGeometry", { args: [scale * 0.5, 32] });
+        case 'circle':
+            return _jsx("cylinderGeometry", { args: [scale * 0.5, depth, scale * 0.5, 32] });
+        case 'roundedRectangle':
+            return _jsx("cylinderGeometry", { args: [scale * 0.1, scale * 0.1, 1, 8] });
+        case 'rectangle':
+        default:
+            return _jsx("boxGeometry", { args: [width, height, depth] });
+    }
+}

package/dist/components/FrameImage.d.ts

@@ -0,0 +1,14 @@
+import { Mesh, Texture } from "three";
+import type { GalleryLayoutSettings } from '@ntalmagor/3drize-core';
+import { type FrameShapeType } from "./FrameGeometry";
+interface FrameImageProps {
+    texture: Texture;
+    shapeType: FrameShapeType;
+    position: [number, number, number];
+    rotation?: [number, number, number];
+    isBack?: boolean;
+    layoutSettings?: GalleryLayoutSettings;
+}
+export declare const FrameImage: import("react").ForwardRefExoticComponent<FrameImageProps & import("react").RefAttributes<Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>>>;
+export {};
+//# sourceMappingURL=FrameImage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FrameImage.d.ts","sourceRoot":"","sources":["../../src/components/FrameImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,qBAAqB,CAAC;CACxC;AAED,eAAO,MAAM,UAAU,2SAuBrB,CAAC"}

package/dist/components/FrameImage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { FrameGeometry } from "./FrameGeometry";
+export const FrameImage = forwardRef(({ texture, shapeType, position, rotation, isBack = false, layoutSettings, }, ref) => {
+    const width = layoutSettings?.width || 1;
+    const height = layoutSettings?.height || 1;
+    const imageScale = 0.9;
+    const scaledSettings = {
+        ...layoutSettings,
+        width: width * imageScale,
+        height: height * imageScale,
+    };
+    return (_jsxs("mesh", { ref: ref, raycast: () => null, position: position, rotation: rotation, children: [_jsx(FrameGeometry, { shapeType: shapeType, layoutSettings: scaledSettings }), _jsx("meshBasicMaterial", { map: texture, toneMapped: false, transparent: true })] }));
+});
+FrameImage.displayName = 'FrameImage';

package/dist/components/Galaxy.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { StarsSettings } from '@ntalmagor/3drize-core';
+export interface GalaxyProps {
+    settings: StarsSettings;
+}
+declare const Galaxy: React.FC<GalaxyProps>;
+export default Galaxy;
+//# sourceMappingURL=Galaxy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Galaxy.d.ts","sourceRoot":"","sources":["../../src/components/Galaxy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI5D,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CASjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Galaxy.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Stars from './Stars';
+import ShootingStars from './ShootingStars';
+const Galaxy = ({ settings }) => {
+    if (!settings.visible)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Stars, { settings: settings }), _jsx(ShootingStars, { settings: settings.shootingStars })] }));
+};
+export default Galaxy;

package/dist/components/GalleryLayout.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { CreatedObjectSettings } from '@ntalmagor/3drize-core';
+export interface GalleryLayoutProps {
+    createdObject: CreatedObjectSettings;
+    selectedFrameUrl?: string;
+    onFrameSelect?: (url: string) => void;
+}
+declare const GalleryLayout: React.FC<GalleryLayoutProps>;
+export default GalleryLayout;
+//# sourceMappingURL=GalleryLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryLayout.d.ts","sourceRoot":"","sources":["../../src/components/GalleryLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,wBAAwB,CAAC;AAM3F,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,qBAAqB,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/GalleryLayout.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { updateCurrentLayoutSettings } from '@ntalmagor/3drize-core';
+import Frame from './Frame';
+import EffectsGenerator from './EffectsGenerator';
+import { ImageGeometry } from './ImageGeometry';
+const GalleryLayout = ({ createdObject, selectedFrameUrl, onFrameSelect, }) => {
+    const groupRef = useRef(null);
+    const { config, materialSettings, animations } = createdObject;
+    const galleryLayout = config || {
+        frames: [],
+        geometryType: 'none',
+        outerFrameScale: 1,
+    };
+    const { frames, layoutSettings } = useMemo(() => updateCurrentLayoutSettings(galleryLayout), [galleryLayout]);
+    return (_jsx("group", { ref: groupRef, scale: [1, 1, 1], position: [0, 0, 0], rotation: [0, 0, 0], children: frames.map((frame, index) => (_jsxs(Frame, { url: frame.url, isActive: selectedFrameUrl === frame.url, createdObject: createdObject, position: frame.position, rotation: frame.rotation, hoverSettings: { sensitivity: 0.5, applyToChildren: false }, transformEffects: animations?.transform?.effects || [], layoutSettings: layoutSettings, side: galleryLayout?.side || 2, materialSettings: materialSettings, onFrameClick: onFrameSelect ? (obj, mesh, e) => onFrameSelect(frame.url) : undefined, children: [layoutSettings.geometryType !== 'none' && (_jsx(ImageGeometry, { url: frame.url, geometryType: layoutSettings.geometryType, outerFrameScale: layoutSettings.outerFrameScale })), createdObject.effects?.map((effect, effectIndex) => (_jsx(EffectsGenerator, { settings: effect }, effectIndex)))] }, index))) }));
+};
+export default GalleryLayout;

package/dist/components/GridHelper.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import * as THREE from 'three';
+export interface GridHelperProps {
+    cellSize?: number;
+    cellThickness?: number;
+    cellColor?: THREE.ColorRepresentation;
+    sectionSize?: number;
+    sectionThickness?: number;
+    sectionColor?: THREE.ColorRepresentation;
+    followCamera?: boolean;
+    infiniteGrid?: boolean;
+    fadeDistance?: number;
+    fadeStrength?: number;
+    fadeFrom?: number;
+    side?: THREE.Side;
+    position?: [number, number, number];
+    rotation?: [number, number, number];
+    visible?: boolean;
+    device?: 'desktop' | 'tablet' | 'mobile';
+}
+declare const GridHelper: React.FC<GridHelperProps>;
+export default GridHelper;
+//# sourceMappingURL=GridHelper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridHelper.d.ts","sourceRoot":"","sources":["../../src/components/GridHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC1C;AAYD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2DzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/GridHelper.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Grid } from '@react-three/drei';
+import * as THREE from 'three';
+const cleanColor = (color) => {
+    if (typeof color !== 'string')
+        return color;
+    if (color.length === 9 && color.startsWith('#'))
+        return color.slice(0, 7);
+    const rgba = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (rgba) {
+        return new THREE.Color(+rgba[1] / 255, +rgba[2] / 255, +rgba[3] / 255).convertSRGBToLinear();
+    }
+    return color;
+};
+const GridHelper = ({ cellSize = 1, cellThickness = 1, cellColor = '#000000', sectionSize = 10, sectionThickness = 1.5, sectionColor = '#000000', followCamera = false, infiniteGrid = true, fadeDistance = 30, fadeStrength = 1, fadeFrom = 0, side = THREE.BackSide, position = [0, 0, 0], rotation = [0, 0, 0], visible = true, device = 'desktop', }) => {
+    const gridRef = useRef(null);
+    const targetY = useRef(position[1]);
+    const responsiveScale = useMemo(() => {
+        if (device === 'mobile')
+            return [0.7, 0.7, 0.7];
+        if (device === 'tablet')
+            return [0.85, 0.85, 0.85];
+        return [1, 1, 1];
+    }, [device]);
+    // Animate Y position toward target (replaces GSAP fade-in/out)
+    useFrame((_s, delta) => {
+        if (!gridRef.current)
+            return;
+        targetY.current = visible ? position[1] : position[1] - 2;
+        gridRef.current.position.y += (targetY.current - gridRef.current.position.y) * Math.min(delta * 4, 1);
+    });
+    if (!visible)
+        return null;
+    return (_jsx(Grid, { ref: gridRef, cellSize: cellSize, cellThickness: cellThickness, cellColor: cleanColor(cellColor), sectionSize: sectionSize, sectionThickness: sectionThickness, sectionColor: cleanColor(sectionColor), followCamera: followCamera, infiniteGrid: infiniteGrid, fadeDistance: fadeDistance, fadeStrength: fadeStrength, fadeFrom: fadeFrom, side: side, position: position, rotation: rotation, scale: responsiveScale, castShadow: false, receiveShadow: false, userData: { id: '3drise-grid' } }));
+};
+export default GridHelper;

package/dist/components/ImageGeometry.d.ts

@@ -0,0 +1,14 @@
+import { Mesh } from 'three';
+import type { GeometryType, ObjectEdges, MaterialSettings } from '@ntalmagor/3drize-core';
+export interface ImageGeometryProps {
+    geometryType: GeometryType;
+    url: string;
+    position?: [number, number, number];
+    rotation?: [number, number, number];
+    scale?: [number, number, number];
+    outerFrameScale?: number;
+    materialSettings?: MaterialSettings;
+    edgesSettings?: ObjectEdges;
+}
+export declare const ImageGeometry: import("react").ForwardRefExoticComponent<ImageGeometryProps & import("react").RefAttributes<Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>>>;
+//# sourceMappingURL=ImageGeometry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGeometry.d.ts","sourceRoot":"","sources":["../../src/components/ImageGeometry.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,IAAI,EAA8B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAEiB,YAAY,EAAE,WAAW,EAAE,gBAAgB,EACvE,MAAM,wBAAwB,CAAC;AAGhC,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,YAAY,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,WAAW,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,8SAqExB,CAAC"}

package/dist/components/ImageGeometry.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { DoubleSide, Mesh, MeshBasicMaterial } from 'three';
+import { createMeshByType } from '@ntalmagor/3drize-core';
+import texturesManager from '../../../core/src/services/TexturesManager';
+export const ImageGeometry = forwardRef(({ geometryType, url, position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1], }, ref) => {
+    const [texture, setTexture] = useState(null);
+    useEffect(() => {
+        const textureName = url.split('/').pop()?.split('.')[0] || `texture-${Date.now()}`;
+        texturesManager.loadTexture(textureName, url, 'images')
+            .then(setTexture)
+            .catch((err) => console.error('Failed to load texture:', err));
+    }, [url]);
+    const meshConfig = useMemo(() => {
+        const base = {
+            type: geometryType,
+            position,
+            rotation,
+            scale,
+            visible: true,
+            id: `image-${geometryType}-${Date.now()}`,
+            name: `image-${geometryType}`,
+            castShadow: true,
+            receiveShadow: true,
+        };
+        switch (geometryType) {
+            case 'plane':
+                return { ...base, scale: [1, 1, 1], widthSegments: 1, heightSegments: 1 };
+            case 'ring':
+                return { ...base, scale: [1, 1, 1], innerRadius: 0.5, outerRadius: 1, thetaSegments: 32, phiSegments: 8 };
+            case 'arc':
+                return { ...base, scale: [1, 1, 1], radius: 1, startAngle: 0, endAngle: Math.PI, width: 0.3, segments: 32 };
+            case 'bentPlane':
+                return { ...base, scale: [1, 1, 1], width: 2, height: 1, radius: 2, arc: Math.PI / 2, widthSegments: 32, heightSegments: 1 };
+            case 'bentPlaneInverse':
+                return { ...base, scale: [1, 1, 1], width: 2, height: 1, radius: 2, arc: Math.PI / 2, widthSegments: 32, heightSegments: 1 };
+            default:
+                return base;
+        }
+    }, [geometryType, position, rotation, scale]);
+    const createdMesh = useMemo(() => {
+        const mesh = createMeshByType(meshConfig);
+        if (!(mesh instanceof Mesh))
+            return null;
+        if (texture) {
+            mesh.material = new MeshBasicMaterial({
+                map: texture,
+                side: DoubleSide,
+                toneMapped: false,
+                transparent: true,
+                polygonOffset: true,
+                polygonOffsetFactor: 1,
+                polygonOffsetUnits: 1,
+            });
+        }
+        return mesh;
+    }, [meshConfig, texture]);
+    if (!createdMesh)
+        return null;
+    return (_jsx("group", { position: position, rotation: rotation, children: _jsx("primitive", { name: url, ref: ref, object: createdMesh }) }));
+});
+ImageGeometry.displayName = 'ImageGeometry';

package/dist/components/Lensflare.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import * as THREE from 'three';
+import type { TimeSettings } from '../../../core/src/types/scene3d';
+export declare function createFlareTexture(type: number): THREE.CanvasTexture;
+export interface LensflareProps {
+    visible?: boolean;
+    intensity?: number;
+    timeSettings: TimeSettings;
+}
+declare const Lensflare: React.FC<LensflareProps>;
+export default Lensflare;
+//# sourceMappingURL=Lensflare.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lensflare.d.ts","sourceRoot":"","sources":["../../src/components/Lensflare.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CA6BpE;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4CvC,CAAC;AAEF,eAAe,SAAS,CAAC"}