editor-sdk 0.1.4 → 0.1.7

package/dist/SecureScene.js

@@ -1,102 +1,140 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, Suspense } from 'react';
+import { useEffect, useState, Suspense, useRef } from 'react';
 import { useGLTF, Html } from '@react-three/drei';
-// import { PrimitiveProps } from '@react-three/fiber';
+import { useFrame } from '@react-three/fiber';
 // Default Registry URL (can be overridden)
 const DEFAULT_REGISTRY_URL = 'http://localhost:3000';
-const CACHE_duration_MS = 50 * 60 * 1000; // 50 minutes (S3 URLs last 60m)
+const CACHE_DURATION_MS = 50 * 60 * 1000; // 50 minutes
+// --- Internal Animator (Copied from Editor) ---
+function SecureAnimator({ children, animation, ...props }) {
+    const ref = useRef(null);
+    useFrame((state, delta) => {
+        if (!ref.current || !animation || animation.type === 'none')
+            return;
+        const speed = animation.speed || 1;
+        const intensity = animation.intensity || 1;
+        const axis = animation.axis || 'y';
+        // Time based animations
+        const t = state.clock.getElapsedTime();
+        switch (animation.type) {
+            case 'rotate':
+                ref.current.rotation[axis] += delta * speed;
+                break;
+            case 'float':
+                const startY = 0; // Relative to parent
+                ref.current.position.y = startY + Math.sin(t * speed) * (0.5 * intensity);
+                break;
+            case 'pulse':
+                const scaleBase = 1;
+                const scale = scaleBase + Math.sin(t * speed * 2) * (0.1 * intensity);
+                ref.current.scale.set(scale, scale, scale);
+                break;
+            case 'bounce':
+                ref.current.position.y = Math.abs(Math.sin(t * speed * 2)) * intensity;
+                break;
+            case 'shake':
+                ref.current.position.x = Math.sin(t * speed * 10) * (0.05 * intensity);
+                break;
+        }
+    });
+    return _jsx("group", { ref: ref, ...props, children: children });
+}
+// Loader wrapper
 function SceneLoader({ url, ...props }) {
-    // useGLTF will suspend automatically
     const { scene } = useGLTF(url);
-    return _jsx("primitive", { object: scene, ...props });
+    // Clone scene to avoid shared state issues if reused
+    const cloned = scene.clone();
+    return _jsx("primitive", { object: cloned, ...props });
 }
 export function SecureScene({ id, registryUrl = DEFAULT_REGISTRY_URL, token, onLoad, onError, ...props }) {
-    const [modelUrl, setModelUrl] = useState(null);
+    const [metadata, setMetadata] = useState(null);
     const [error, setError] = useState(null);
     const [isDev, setIsDev] = useState(false);
     useEffect(() => {
         let mounted = true;
-        // Check Dev Environment
         if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
             setIsDev(true);
         }
-        async function fetchMetadata() {
+        async function fetchMetadata(force = false) {
             try {
-                // 0. Check Cache (LocalStorage)
                 const cacheKey = `3d-editor:cache:${id}`;
-                const cached = localStorage.getItem(cacheKey);
-                if (cached) {
-                    const data = JSON.parse(cached);
-                    const age = Date.now() - (data.timestamp || 0);
-                    if (age < CACHE_duration_MS) {
-                        if (mounted) {
-                            console.log(`[SecureScene] Using cached URL for ${id}`);
-                            setModelUrl(data.modelUrl);
-                            onLoad?.();
+                // 0. Check Cache (if not forced)
+                if (!force) {
+                    const cached = localStorage.getItem(cacheKey);
+                    if (cached) {
+                        const data = JSON.parse(cached);
+                        const age = Date.now() - (data.timestamp || 0);
+                        if (age < CACHE_DURATION_MS) {
+                            if (mounted) {
+                                setMetadata(data);
+                                onLoad?.();
+                            }
+                            return;
+                        }
+                        else {
+                            localStorage.removeItem(cacheKey);
                         }
-                        return; // Exit early
-                    }
-                    else {
-                        console.log(`[SecureScene] Cache expired for ${id}`);
-                        localStorage.removeItem(cacheKey);
                     }
                 }
-                // 1. Call the Registry API
-                const res = await fetch(`${registryUrl}/api/registry/${id}`, {
-                    headers: {
-                        // Future: 'Authorization': `Bearer ${token}`
-                        'Content-Type': 'application/json',
-                        // Referer is sent automatically by browser
-                    }
-                });
-                if (!res.ok) {
+                // 1. Call Registry
+                const res = await fetch(`${registryUrl}/api/registry/${id}`);
+                if (!res.ok)
                     throw new Error(`Registry Error: ${res.statusText}`);
-                }
                 const data = await res.json();
-                if (!data.modelUrl || data.modelUrl === 'none') {
-                    throw new Error("No model URL found for this component");
-                }
-                // 2. Cache it
+                // Cache it
                 try {
-                    const cachePayload = { ...data, timestamp: Date.now() };
-                    localStorage.setItem(cacheKey, JSON.stringify(cachePayload));
-                }
-                catch (e) {
-                    // Ignore quota errors
+                    localStorage.setItem(cacheKey, JSON.stringify({ ...data, timestamp: Date.now() }));
                 }
+                catch (e) { }
                 if (mounted) {
-                    setModelUrl(data.modelUrl);
+                    // Only update if changed? React handles basic diff, but for animations it's fine.
+                    setMetadata(data);
                     onLoad?.();
                 }
             }
             catch (err) {
                 if (mounted) {
+                    // Only log error if not polling (to avoid spam) or if critical?
+                    // For now, log.
                     console.error("SecureScene Error:", err);
-                    setError(err.message);
-                    onError?.(err);
+                    if (!force) {
+                        setError(err.message);
+                        onError?.(err);
+                    }
                 }
             }
         }
         fetchMetadata();
-        return () => { mounted = false; };
-    }, [id, registryUrl, token, onLoad, onError]);
+        let interval;
+        // Poll every 2 seconds if on localhost
+        if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
+            interval = setInterval(() => {
+                fetchMetadata(true); // Force refresh
+            }, 2000);
+        }
+        return () => {
+            mounted = false;
+            if (interval)
+                clearInterval(interval);
+        };
+    }, [id, registryUrl, onLoad, onError]);
     if (error) {
-        return (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: "red", wireframe: true })] }), _jsx(Html, { position: [0, 1, 0], center: true, children: _jsxs("div", { style: { color: 'red', background: 'white', padding: 4 }, children: ["Error: ", error] }) })] }));
+        return (_jsx("group", { children: _jsx(Html, { position: [0, 1, 0], center: true, children: _jsxs("div", { style: { color: 'red', background: 'white', padding: 4, border: '1px solid red' }, children: ["Error: ", error] }) }) }));
     }
-    if (!modelUrl) {
-        // Loading State
+    if (!metadata)
         return null;
+    // Render Logic
+    // Extract animation from props if it exists, to apply to the top-level container
+    const { animation, ...restProps } = props;
+    // 1. Multi-Model Support (sceneData)
+    if (metadata.sceneData && metadata.sceneData.objects) {
+        return (_jsx(SecureAnimator, { animation: animation, ...restProps, children: metadata.sceneData.objects.map((obj, index) => (_jsx("group", { position: obj.position || [0, 0, 0], rotation: obj.rotation || [0, 0, 0], scale: obj.scale || [1, 1, 1], children: _jsx(SecureAnimator, { animation: obj.animation, children: obj.type === 'imported' ? (_jsx(Suspense, { fallback: null, children: _jsx(SceneLoader, { url: obj.modelUrl || obj.modelPath }) })) : (
+                    // Basic Primitive Support
+                    _jsxs("mesh", { children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: obj.material?.color || "gray" })] })) }) }, `${obj.id}-${index}`))) }));
+    }
+    // 2. Legacy / Single Model Fallback
+    if (metadata.modelUrl && metadata.modelUrl !== 'none') {
+        return (_jsx(SecureAnimator, { animation: animation, ...restProps, children: _jsx(Suspense, { fallback: null, children: _jsx(SceneLoader, { url: metadata.modelUrl }) }) }));
     }
-    return (_jsxs("group", { children: [_jsx(Suspense, { fallback: null, children: _jsx(SceneLoader, { url: modelUrl, ...props }) }), isDev && (_jsx(Html, { position: [0, 0, 0], fullscreen: true, style: { pointerEvents: 'none' }, children: _jsx("div", { style: {
-                        position: 'absolute',
-                        bottom: 10,
-                        right: 10,
-                        background: 'rgba(0,0,0,0.7)',
-                        color: '#0f0',
-                        padding: '4px 8px',
-                        borderRadius: 4,
-                        fontSize: '10px',
-                        fontFamily: 'monospace',
-                        border: '1px solid #0f0'
-                    }, children: "DEV MODE: SECURE" }) }))] }));
+    return null;
 }

package/dist/cli.js

@@ -36,17 +36,37 @@ program
 program
     .command('login')
     .description('Authenticate with the 3D Editor Registry')
-    .action(async () => {
-    console.log(chalk.blue('🔐 Authenticating with 3D Editor...'));
+    .option('--host <url>', 'Registry Host URL', 'http://localhost:3000')
+    .action(async (options) => {
+    console.log(chalk.blue('🔐 Authenticating with 3D Editor... (v0.1.6)'));
     const response = await prompts({
         type: 'password',
         name: 'apiKey',
         message: 'Enter your API Key:',
-        validate: value => value.length < 5 ? 'API Key seems too short' : true
+        validate: value => value.length < 1 ? 'API Key cannot be empty' : true
     });
     if (response.apiKey) {
-        saveConfig({ apiKey: response.apiKey });
-        console.log(chalk.green('✓ Logged in successfully!'));
+        const host = options.host;
+        console.log(chalk.gray(`Connecting to ${host}...`));
+        try {
+            const res = await fetch(`${host}/api/registry/verify`, {
+                headers: { 'Authorization': `Bearer ${response.apiKey}` }
+            });
+            if (!res.ok) {
+                console.error(chalk.red('\n❌ Login Failed: Invalid API Key.'));
+                console.error(chalk.yellow('Please check your key and try again.'));
+                return;
+            }
+            const data = await res.json();
+            console.log(chalk.green(`\n✓ Verified as ${data.user.email}`));
+            saveConfig({ apiKey: response.apiKey });
+            console.log(chalk.green('✓ Logged in successfully!'));
+            console.log(chalk.gray(`Credentials saved to ${CONFIG_FILE}`));
+        }
+        catch (err) {
+            console.error(chalk.red('\n❌ Connection Failed:'), err.message);
+            console.error(chalk.yellow(`Could not reach ${host}`));
+        }
     }
     else {
         console.log(chalk.yellow('Login cancelled.'));
@@ -57,6 +77,7 @@ program
     .command('add <componentId>')
     .description('Add a component by ID')
     .option('-p, --package', 'Install as a node_module package', false)
+    .option('-f, --force', 'Force overwrite of existing files', false)
     .option('--host <url>', 'Registry Host URL', 'http://localhost:3000') // Default to local for dev
     .action(async (componentId, options) => {
     try {
@@ -82,11 +103,25 @@ program
             headers: apiKey ? { 'Authorization': `Bearer ${apiKey}` } : {}
         });
         if (!res.ok) {
+            const errorBody = await res.text();
+            try {
+                const json = JSON.parse(errorBody);
+                if (json.details) {
+                    console.error(chalk.red(`Registry Error: ${json.error}`));
+                    console.error(chalk.red(`Details: ${json.details}`));
+                    if (json.stack)
+                        console.error(chalk.gray(json.stack));
+                    throw new Error("Remote operation failed");
+                }
+            }
+            catch (e) {
+                // Not JSON or parse error, ignore
+            }
             if (res.status === 404)
                 throw new Error(`Component '${componentId}' not found.`);
             if (res.status === 401)
                 throw new Error(`Unauthorized. Please login.`);
-            throw new Error(`Registry Error: ${res.statusText}`);
+            throw new Error(`Registry Error: ${res.statusText} - ${errorBody.slice(0, 100)}`);
         }
         const data = await res.json();
         const { name, id } = data; // We don't need assets/code/etc anymore for the shell
@@ -146,7 +181,21 @@ program
         else if (!fs.existsSync(path.dirname(targetFile))) {
             fs.mkdirSync(path.dirname(targetFile), { recursive: true });
         }
+        // Check if file exists and ask for permission if not forced
+        if (fs.existsSync(targetFile) && !options.force) {
+            const { overwrite } = await prompts({
+                type: 'confirm',
+                name: 'overwrite',
+                message: `File ${componentName}.tsx already exists. Overwrite?`,
+                initial: false
+            });
+            if (!overwrite) {
+                console.log(chalk.yellow('ℹ Action cancelled. File was not modified.'));
+                process.exit(0);
+            }
+        }
         // The Shell Code
+        // REMOVED registryUrl explicit prop to allow default or parent override
         const shellCode = `import React from 'react';
 import { SecureScene } from 'editor-sdk';
 
@@ -154,7 +203,6 @@ export default function ${componentName}(props: any) {
   return (
     <SecureScene 
       id="${id}"
-      registryUrl="${options.host}"
       {...props} 
     />
   );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "editor-sdk",
-    "version": "0.1.4",
+    "version": "0.1.7",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
@@ -28,6 +28,8 @@
         "dist"
     ],
     "devDependencies": {
+        "@react-three/drei": ">=9.0.0",
+        "@react-three/fiber": ">=8.0.0",
         "@types/react": "^18.3.27",
         "@types/three": "^0.160.0",
         "@types/node": "^20.0.0",