editor-sdk 0.1.0

package/README.md

@@ -0,0 +1,68 @@
+# 3D Editor SDK
+
+The secure runtime SDK for determining, fetching, and rendering components from the 3D Component Registry.
+
+## Installation
+
+```bash
+npm install editor-sdk-secure-demo
+# or
+pnpm add editor-sdk-secure-demo
+```
+
+*> Note: Ensure you are using the version that matches your registry configuration.*
+
+## Features
+
+- **Secure Loading**: Fetches signed URLs for assets, ensuring they are not publicly exposable.
+- **Domain Locking**: Validates the request origin against the allowed domains list.
+- **Caching**: Smart caching of model URLs in `localStorage` to minimize API costs and latency.
+- **Dev Mode**: Shows a "DEV MODE: SECURE" badge when running on localhost.
+
+## Usage
+
+This SDK is primarily used by the code generated via the CLI (`npx 3d-editor add`).
+
+### Manual Usage
+
+If you want to manually secure-load a scene:
+
+```tsx
+import { SecureScene } from 'editor-sdk-secure-demo';
+
+function MyComponent() {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <Canvas>
+        <SecureScene 
+          id="your-component-id" 
+          registryUrl="https://your-registry-api.com"
+        />
+      </Canvas>
+    </div>
+  );
+}
+```
+
+## CLI Authentication
+
+To install **Private Components** from the registry, you must be authenticated in your terminal.
+
+### How to Login
+
+1.  **Obtain an API Key**:
+    *   *Self-Hosted*: Check your database `ApiKey` table or ask your administrator.
+    *   *Development*: If you are running the registry locally, you can currently use any non-empty string (e.g., `dev-token`) as the system accepts preshared keys for testing.
+
+2.  **Run Login Command**:
+    ```bash
+    npx 3d-editor login
+    ```
+
+3.  **Enter Key**:
+    Paste your API key when prompted. It will be saved securely to `~/.3d-editor/config.json`.
+
+### Troubleshooting
+
+- **401 Unauthorized**: Run `npx 3d-editor login` again.
+- **403 Forbidden**: Your domain might not be whitelisted. Check the Project settings in the Editor.

package/dist/SecureScene.d.ts

@@ -0,0 +1,9 @@
+export interface SecureSceneProps {
+    id: string;
+    registryUrl?: string;
+    token?: string;
+    onLoad?: () => void;
+    onError?: (err: any) => void;
+    [key: string]: any;
+}
+export declare function SecureScene({ id, registryUrl, token, onLoad, onError, ...props }: SecureSceneProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/SecureScene.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, Suspense } from 'react';
+import { useGLTF, Html } from '@react-three/drei';
+// import { PrimitiveProps } 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)
+function SceneLoader({ url, ...props }) {
+    // useGLTF will suspend automatically
+    const { scene } = useGLTF(url);
+    return _jsx("primitive", { object: scene, ...props });
+}
+export function SecureScene({ id, registryUrl = DEFAULT_REGISTRY_URL, token, onLoad, onError, ...props }) {
+    const [modelUrl, setModelUrl] = 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() {
+            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?.();
+                        }
+                        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) {
+                    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
+                try {
+                    const cachePayload = { ...data, timestamp: Date.now() };
+                    localStorage.setItem(cacheKey, JSON.stringify(cachePayload));
+                }
+                catch (e) {
+                    // Ignore quota errors
+                }
+                if (mounted) {
+                    setModelUrl(data.modelUrl);
+                    onLoad?.();
+                }
+            }
+            catch (err) {
+                if (mounted) {
+                    console.error("SecureScene Error:", err);
+                    setError(err.message);
+                    onError?.(err);
+                }
+            }
+        }
+        fetchMetadata();
+        return () => { mounted = false; };
+    }, [id, registryUrl, token, 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] }) })] }));
+    }
+    if (!modelUrl) {
+        // Loading State
+        return null;
+    }
+    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" }) }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { SecureScene } from './SecureScene';

package/dist/index.js

@@ -0,0 +1 @@
+export { SecureScene } from './SecureScene';

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "editor-sdk",
+    "version": "0.1.0",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc --watch"
+    },
+    "peerDependencies": {
+        "@react-three/drei": ">=9.0.0",
+        "@react-three/fiber": ">=8.0.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "three": ">=0.160.0"
+    },
+    "files": [
+        "dist"
+    ],
+    "devDependencies": {
+        "@types/react": "^18.3.27",
+        "@types/three": "^0.160.0",
+        "typescript": "^5.9.3"
+    }
+}