editor-sdk 0.1.0 → 0.1.2

package/README.md

@@ -1,68 +1,71 @@
 # 3D Editor SDK
 
-The secure runtime SDK for determining, fetching, and rendering components from the 3D Component Registry.
+The official SDK and CLI for the 3D Component Registry.
 
-## Installation
+## 📦 Features
 
-```bash
-npm install editor-sdk-secure-demo
-# or
-pnpm add editor-sdk-secure-demo
-```
+- **Runtime Library**: Securely load and render 3D components with `SecureScene`.
+- **CLI Tool**: Install components directly into your project with `npx editor-sdk`.
+- **Security**: Built-in domain locking, signed URL fetching, and local caching.
+
+---
 
-*> Note: Ensure you are using the version that matches your registry configuration.*
+## 🛠️ CLI Usage (For Developers)
 
-## Features
+Use the CLI to install components from the registry into your Next.js project.
 
-- **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.
+### 1. Login
+Authenticate with your registry API key.
+```bash
+npx editor-sdk login
+```
 
-## Usage
+### 2. Add Component
+Fetch a component by its ID.
+```bash
+npx editor-sdk add <component-id> --host <registry-url>
+```
+*Example:*
+```bash
+npx editor-sdk add my-scene-123 --host http://localhost:3000
+```
 
-This SDK is primarily used by the code generated via the CLI (`npx 3d-editor add`).
+---
 
-### Manual Usage
+## 📚 Library Usage (For Components)
 
-If you want to manually secure-load a scene:
+The CLI generates components that use this library under the hood. You typically won't write this code manually, but here is how it works:
 
 ```tsx
-import { SecureScene } from 'editor-sdk-secure-demo';
+import { SecureScene } from 'editor-sdk';
 
-function MyComponent() {
+export default function My3DComponent() {
   return (
-    <div style={{ width: '100vw', height: '100vh' }}>
-      <Canvas>
-        <SecureScene 
-          id="your-component-id" 
-          registryUrl="https://your-registry-api.com"
-        />
-      </Canvas>
-    </div>
+    <SecureScene 
+      id="my-scene-123"
+      registryUrl="http://localhost:3000"
+    />
   );
 }
 ```
 
-## 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.
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `id` | `string` | The unique ID of the component in the registry. |
+| `registryUrl` | `string` | Base URL of the registry (e.g. `https://api.myregistry.com`). |
+| `token` | `string` | (Optional) Auth token for private components. |
+| `onLoad` | `() => void` | Callback when the model finishes loading. |
+| `onError` | `(err) => void` | Callback if loading fails. |
 
-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
 
-### Troubleshooting
+### "403 Forbidden"
+*   **Cause**: You might be trying to publish a version that already exists.
+*   **Fix**: Update the `version` in `package.json`.
 
-- **401 Unauthorized**: Run `npx 3d-editor login` again.
-- **403 Forbidden**: Your domain might not be whitelisted. Check the Project settings in the Editor.
+### "Unauthorized"
+*   **Cause**: CLI session expired or invalid key.
+*   **Fix**: Run `npx editor-sdk login` again.

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,172 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import fetch from 'node-fetch';
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import prompts from 'prompts';
+import { execSync } from 'child_process';
+import os from 'os';
+const program = new Command();
+const CONFIG_DIR = path.join(os.homedir(), '.3d-editor');
+const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
+// Helper to save config
+function saveConfig(data) {
+    if (!fs.existsSync(CONFIG_DIR)) {
+        fs.mkdirSync(CONFIG_DIR, { recursive: true });
+    }
+    fs.writeFileSync(CONFIG_FILE, JSON.stringify(data, null, 2));
+}
+// Helper to load config
+function loadConfig() {
+    if (!fs.existsSync(CONFIG_FILE))
+        return {};
+    try {
+        return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8'));
+    }
+    catch {
+        return {};
+    }
+}
+program
+    .name('3d-editor')
+    .description('CLI to install 3D components from the registry')
+    .version('1.0.0');
+// Login Command
+program
+    .command('login')
+    .description('Authenticate with the 3D Editor Registry')
+    .action(async () => {
+    console.log(chalk.blue('🔐 Authenticating with 3D Editor...'));
+    const response = await prompts({
+        type: 'password',
+        name: 'apiKey',
+        message: 'Enter your API Key:',
+        validate: value => value.length < 5 ? 'API Key seems too short' : true
+    });
+    if (response.apiKey) {
+        saveConfig({ apiKey: response.apiKey });
+        console.log(chalk.green('✓ Logged in successfully!'));
+    }
+    else {
+        console.log(chalk.yellow('Login cancelled.'));
+    }
+});
+// Add Command
+program
+    .command('add <componentId>')
+    .description('Add a component by ID')
+    .option('-p, --package', 'Install as a node_module package', false)
+    .option('--host <url>', 'Registry Host URL', 'http://localhost:3000') // Default to local for dev
+    .action(async (componentId, options) => {
+    try {
+        const config = loadConfig();
+        const apiKey = config.apiKey;
+        if (!apiKey) {
+            console.warn(chalk.yellow('⚠ You are not logged in. Public components only.'));
+            console.warn(chalk.yellow('Run `npx 3d-editor login` to access private components.'));
+        }
+        let registryUrl = '';
+        let idFromArg = componentId;
+        if (componentId.startsWith('http://') || componentId.startsWith('https://')) {
+            registryUrl = componentId;
+            // Extract ID from URL for fallback naming (last segment)
+            const parts = componentId.split('/');
+            idFromArg = parts[parts.length - 1] || 'component';
+        }
+        else {
+            registryUrl = `${options.host}/api/registry/${componentId}`;
+        }
+        console.log(chalk.blue(`📦 Fetching component from ${registryUrl}...`));
+        const res = await fetch(registryUrl, {
+            headers: apiKey ? { 'Authorization': `Bearer ${apiKey}` } : {}
+        });
+        if (!res.ok) {
+            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}`);
+        }
+        const data = await res.json();
+        const { name, id } = data; // We don't need assets/code/etc anymore for the shell
+        console.log(chalk.green(`✓ Found component: ${name || id}`));
+        // 1. Check for Core SDK
+        console.log(chalk.blue('Checking for editor-sdk...'));
+        const packageJsonPath = path.join(process.cwd(), 'package.json');
+        let needsSdk = true;
+        if (fs.existsSync(packageJsonPath)) {
+            const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+            const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+            if (allDeps['editor-sdk']) {
+                needsSdk = false;
+            }
+        }
+        if (needsSdk) {
+            const { install } = await prompts({
+                type: 'confirm',
+                name: 'install',
+                message: componentId === 'editor-sdk' ? 'Install SDK?' : `This component requires editor-sdk. Install it now?`,
+                initial: true
+            });
+            if (install) {
+                // Use 'editor-sdk' as that is the package name
+                console.log(chalk.blue('Installing editor-sdk...'));
+                execSync('npm install editor-sdk', { stdio: 'inherit' });
+            }
+            else {
+                console.warn(chalk.yellow('⚠ Component may not work without editor-sdk'));
+            }
+        }
+        // 2. Generate Shell Component
+        let targetDir = '';
+        let targetFile = '';
+        const componentName = name || `Component${id}`;
+        if (options.package) {
+            // Install to node_modules (Legacy support or library mode)
+            // ... omitted for brevity/focus on src implementation for now
+            // Re-using logic roughly
+            const nodeModulesDir = path.join(process.cwd(), 'node_modules');
+            targetDir = path.join(nodeModulesDir, componentName);
+            targetFile = path.join(targetDir, 'index.tsx');
+        }
+        else {
+            // Install to src/components
+            const srcDir = path.join(process.cwd(), 'src');
+            const hasSrc = fs.existsSync(srcDir);
+            const componentsDir = hasSrc
+                ? path.join(srcDir, 'components')
+                : path.join(process.cwd(), 'components');
+            targetDir = componentsDir;
+            targetFile = path.join(targetDir, `${componentName}.tsx`);
+        }
+        if (!fs.existsSync(targetDir) && !targetFile.endsWith('.tsx')) {
+            fs.mkdirSync(targetDir, { recursive: true });
+        }
+        else if (!fs.existsSync(path.dirname(targetFile))) {
+            fs.mkdirSync(path.dirname(targetFile), { recursive: true });
+        }
+        // The Shell Code
+        const shellCode = `import React from 'react';
+import { SecureScene } from 'editor-sdk';
+
+export default function ${componentName}(props: any) {
+  return (
+    <SecureScene 
+      id="${id}"
+      registryUrl="${options.host}"
+      {...props} 
+    />
+  );
+}
+`;
+        fs.writeFileSync(targetFile, shellCode);
+        console.log(chalk.green(`✓ Created ${targetFile}`));
+        console.log(`\nUsage:\nimport ${componentName} from '@/components/${componentName}';\n\n<${componentName} />`);
+    }
+    catch (error) {
+        console.error(chalk.red('Error:'), error.message);
+        process.exit(1);
+    }
+});
+program.parse();

package/package.json

@@ -1,9 +1,12 @@
 {
     "name": "editor-sdk",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
+    "bin": {
+        "editor-sdk": "./dist/cli.js"
+    },
     "scripts": {
         "build": "tsc",
         "dev": "tsc --watch"
@@ -15,12 +18,20 @@
         "react-dom": ">=18.0.0",
         "three": ">=0.160.0"
     },
+    "dependencies": {
+        "commander": "^11.1.0",
+        "node-fetch": "^3.3.2",
+        "chalk": "^4.1.2",
+        "prompts": "^2.4.2"
+    },
     "files": [
         "dist"
     ],
     "devDependencies": {
         "@types/react": "^18.3.27",
         "@types/three": "^0.160.0",
+        "@types/node": "^20.0.0",
+        "@types/prompts": "^2.4.9",
         "typescript": "^5.9.3"
     }
 }