Initial commit: STL Storage Application

- Complete web-based STL file storage and 3D viewer
- Express.js backend with SQLite database
- Interactive Three.js 3D viewer with orbit controls
- File upload with drag-and-drop support
- Security features: rate limiting, input validation, helmet
- Container deployment with Docker/Podman
- Production-ready configuration management
- Comprehensive logging and monitoring

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,50 @@
+# Node modules
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Database files (will be created in container)
+*.db
+*.db-journal
+
+# Upload files (will be persistent volume)
+uploads
+
+# Logs
+*.log
+server.log
+
+# Environment files
+.env*
+
+# Git
+.git
+.gitignore
+
+# Documentation
+README.md
+*.md
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# IDE files
+.vscode
+.idea
+*.swp
+*.swo
+
+# Test files
+test-*
+*test.html
+
+# Temporary files
+tmp
+temp

.env.example

@@ -0,0 +1,27 @@
+# STL Storage Application Configuration
+
+# Server Configuration
+PORT=3000
+NODE_ENV=production
+HOST=0.0.0.0
+
+# Database Configuration
+DB_PATH=./stl_storage.db
+UPLOAD_DIR=./uploads
+
+# File Upload Limits
+MAX_FILE_SIZE=104857600
+MAX_FILES_PER_REQUEST=5
+ALLOWED_EXTENSIONS=.stl,.STL
+
+# Rate Limiting
+RATE_LIMIT_WINDOW_MS=900000
+RATE_LIMIT_MAX_REQUESTS=100
+
+# Security
+SESSION_SECRET=your-secret-key-change-this
+BCRYPT_ROUNDS=12
+
+# Logging
+LOG_LEVEL=info
+LOG_FILE=./logs/app.log

.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+uploads/
+*.db
+*.db-journal
+.env
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Dockerfile

@@ -0,0 +1,35 @@
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Create app user for security
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S stlapp -u 1001
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production && npm cache clean --force
+
+# Copy application code
+COPY . .
+
+# Create necessary directories and set permissions
+RUN mkdir -p uploads/stl uploads/thumbnails logs data config && \
+    chown -R stlapp:nodejs /app && \
+    chmod -R 755 /app
+
+# Switch to non-root user
+USER stlapp
+
+# Expose port
+EXPOSE 3000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:3000/api/files', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) }).on('error', () => process.exit(1))"
+
+# Start the application
+CMD ["sh", "-c", "test -f stl_storage.db || node init-db.js; node server.js"]

README-Docker.md

@@ -0,0 +1,122 @@
+# STL Storage - Docker Deployment
+
+A web-based STL file storage and 3D viewer application packaged for container deployment.
+
+## Quick Start
+
+### Using Podman/Docker Compose (Recommended)
+
+1. **Build and start the application:**
+   ```bash
+   podman-compose up -d --build
+   # or with Docker
+   docker-compose up -d --build
+   ```
+
+2. **Access the application:**
+   - Web interface: http://localhost:3000
+   - Upload STL files and view them in 3D
+
+### Using Podman/Docker directly
+
+1. **Build the container:**
+   ```bash
+   podman build -t stl-storage .
+   # or with Docker
+   docker build -t stl-storage .
+   ```
+
+2. **Run the container:**
+   ```bash
+   podman run -d \
+     --name stl-storage-app \
+     -p 3000:3000 \
+     -v ./uploads:/app/uploads \
+     -v ./stl_storage.db:/app/stl_storage.db \
+     stl-storage
+   ```
+
+## Features
+
+### 🎯 **Core Functionality**
+- **Web-based STL upload** with drag-and-drop support
+- **3D viewer** with interactive controls (rotate, zoom, pan)
+- **File management** (search, download, delete)
+- **Viewer controls** (wireframe mode, color changes, screenshots)
+- **SQLite database** for metadata storage
+- **Local file storage** for STL files
+
+### 🔒 **Security Features**
+- **Rate limiting** and DDoS protection
+- **Input validation** and sanitization
+- **File format validation** beyond extension checking
+- **Security headers** via Helmet.js
+- **Non-root container** execution
+- **Structured logging** with Winston
+
+### 📊 **Monitoring & Reliability**
+- **Health checks** for container monitoring
+- **Graceful shutdown** handling
+- **Error tracking** and logging
+- **Configurable file size** and rate limits
+
+## Container Details
+
+- **Base Image:** Node.js 18 Alpine
+- **Port:** 3000
+- **User:** Non-root user (stlapp:1001)
+- **Health Check:** Built-in endpoint monitoring
+- **Persistent Data:** Uploads and database via volumes
+
+## Volume Mounts
+
+- `./uploads:/app/uploads` - STL file storage
+- `./stl_storage.db:/app/stl_storage.db` - SQLite database
+
+## Environment Variables
+
+- `NODE_ENV=production` (default)
+- `PORT=3000` (default)
+
+## Management Commands
+
+```bash
+# View logs
+podman logs stl-storage-app
+
+# Stop application
+podman-compose down
+
+# Restart application
+podman-compose restart
+
+# Update application
+podman-compose up -d --build
+```
+
+## Security Features
+
+- Non-root user execution
+- File type validation (STL only)
+- File size limits (100MB)
+- CORS protection
+- Health monitoring
+
+## Troubleshooting
+
+1. **Port conflicts:** Change the port mapping in docker-compose.yml
+2. **Permission issues:** Ensure upload directory is writable
+3. **Database issues:** Delete stl_storage.db to reinitialize
+4. **Memory issues:** Increase container memory limits for large STL files
+
+## Development
+
+To run in development mode:
+```bash
+podman run -it --rm \
+  -p 3000:3000 \
+  -v $(pwd):/app \
+  -w /app \
+  node:18-alpine \
+  npm run dev
+```

SECURITY.md

@@ -0,0 +1,99 @@
+# Security Guidelines
+
+## Security Features Implemented
+
+### 🛡️ **Application Security**
+- **Helmet.js**: Security headers (CSP, XSS protection, etc.)
+- **Rate Limiting**: API endpoints protected against abuse
+- **Input Validation**: Express-validator for all user inputs
+- **File Validation**: STL format validation and content checks
+- **Filename Sanitization**: Prevents path traversal attacks
+- **Error Handling**: No sensitive information in error messages
+
+### 🔐 **Container Security**
+- **Non-root User**: Application runs as `stlapp:1001`
+- **Minimal Base Image**: Alpine Linux for reduced attack surface
+- **Dependency Scanning**: Production-only dependencies
+- **Volume Permissions**: Proper file system permissions
+
+### 📊 **Monitoring & Logging**
+- **Winston Logging**: Structured logging with rotation
+- **Health Checks**: Container health monitoring
+- **Audit Trail**: File upload/delete operations logged
+
+## Security Configuration
+
+### Environment Variables
+```bash
+# Rate limiting
+RATE_LIMIT_WINDOW_MS=900000    # 15 minutes
+RATE_LIMIT_MAX_REQUESTS=100    # Max requests per window
+
+# File upload security
+MAX_FILE_SIZE=104857600        # 100MB max file size
+MAX_FILES_PER_REQUEST=5        # Max files per upload
+ALLOWED_EXTENSIONS=.stl,.STL   # Allowed file extensions
+
+# Logging
+LOG_LEVEL=info                 # Log level
+```
+
+### Recommended Production Settings
+```bash
+NODE_ENV=production
+SESSION_SECRET=your-strong-secret-key-here
+LOG_LEVEL=warn
+RATE_LIMIT_MAX_REQUESTS=50
+```
+
+## Security Best Practices
+
+### 🌐 **Network Security**
+- Use reverse proxy (nginx/traefik) in production
+- Enable HTTPS with valid certificates
+- Configure firewall rules
+- Use VPN or private networks when possible
+
+### 📁 **File Storage Security**
+- Regularly scan uploaded files for malware
+- Implement file retention policies
+- Monitor storage usage and quotas
+- Backup data with encryption
+
+### 🔄 **Container Security**
+- Regularly update base images
+- Scan images for vulnerabilities
+- Use secrets management for sensitive data
+- Enable container runtime security
+
+### 📈 **Monitoring**
+- Monitor failed authentication attempts
+- Track unusual upload patterns
+- Set up alerts for security events
+- Regular security audits
+
+## Vulnerability Reporting
+
+If you discover a security vulnerability, please:
+1. **Do not** create a public issue
+2. Email security details privately
+3. Include steps to reproduce
+4. Allow time for patching before disclosure
+
+## Security Checklist
+
+### Pre-deployment
+- [ ] Change default passwords/secrets
+- [ ] Configure rate limiting
+- [ ] Set up HTTPS
+- [ ] Configure logging
+- [ ] Test file upload validation
+- [ ] Verify container permissions
+
+### Post-deployment
+- [ ] Monitor logs for anomalies
+- [ ] Set up security alerts
+- [ ] Regular vulnerability scans
+- [ ] Update dependencies regularly
+- [ ] Backup verification
+- [ ] Security audit schedule

config/config.js

@@ -0,0 +1,46 @@
+require('dotenv').config();
+
+const config = {
+    // Server configuration
+    port: parseInt(process.env.PORT) || 3000,
+    host: process.env.HOST || '0.0.0.0',
+    nodeEnv: process.env.NODE_ENV || 'development',
+    
+    // Database configuration
+    database: {
+        path: process.env.DB_PATH || './stl_storage.db',
+        uploadDir: process.env.UPLOAD_DIR || './uploads'
+    },
+    
+    // File upload configuration
+    upload: {
+        maxFileSize: parseInt(process.env.MAX_FILE_SIZE) || 100 * 1024 * 1024, // 100MB
+        maxFiles: parseInt(process.env.MAX_FILES_PER_REQUEST) || 5,
+        allowedExtensions: (process.env.ALLOWED_EXTENSIONS || '.stl,.STL').split(','),
+        destination: './uploads/stl'
+    },
+    
+    // Security configuration
+    security: {
+        sessionSecret: process.env.SESSION_SECRET || 'change-this-secret-key',
+        bcryptRounds: parseInt(process.env.BCRYPT_ROUNDS) || 12,
+        rateLimitWindow: parseInt(process.env.RATE_LIMIT_WINDOW_MS) || 15 * 60 * 1000,
+        rateLimitMax: parseInt(process.env.RATE_LIMIT_MAX_REQUESTS) || 100
+    },
+    
+    // Logging configuration
+    logging: {
+        level: process.env.LOG_LEVEL || 'info',
+        file: process.env.LOG_FILE || './logs/app.log'
+    }
+};
+
+// Validate required configuration
+const requiredEnvVars = [];
+const missingVars = requiredEnvVars.filter(varName => !process.env[varName]);
+
+if (missingVars.length > 0) {
+    throw new Error(`Missing required environment variables: ${missingVars.join(', ')}`);
+}
+
+module.exports = config;

config/logger.js

@@ -0,0 +1,47 @@
+const winston = require('winston');
+const path = require('path');
+const fs = require('fs');
+
+// Ensure logs directory exists
+const logDir = path.join(__dirname, '..', 'logs');
+if (!fs.existsSync(logDir)) {
+    fs.mkdirSync(logDir, { recursive: true });
+}
+
+const logLevel = process.env.LOG_LEVEL || 'info';
+const logFile = process.env.LOG_FILE || path.join(logDir, 'app.log');
+
+const logger = winston.createLogger({
+    level: logLevel,
+    format: winston.format.combine(
+        winston.format.timestamp(),
+        winston.format.errors({ stack: true }),
+        winston.format.json()
+    ),
+    defaultMeta: { service: 'stl-storage' },
+    transports: [
+        new winston.transports.File({ 
+            filename: path.join(logDir, 'error.log'), 
+            level: 'error',
+            maxsize: 5242880, // 5MB
+            maxFiles: 5
+        }),
+        new winston.transports.File({ 
+            filename: logFile,
+            maxsize: 5242880, // 5MB
+            maxFiles: 5
+        })
+    ]
+});
+
+// Add console transport for development
+if (process.env.NODE_ENV !== 'production') {
+    logger.add(new winston.transports.Console({
+        format: winston.format.combine(
+            winston.format.colorize(),
+            winston.format.simple()
+        )
+    }));
+}
+
+module.exports = logger;

config/security.js

@@ -0,0 +1,69 @@
+const rateLimit = require('express-rate-limit');
+const helmet = require('helmet');
+const { body, param, query } = require('express-validator');
+
+// Rate limiting configuration
+const createRateLimit = (windowMs = 15 * 60 * 1000, max = 100) => rateLimit({
+    windowMs,
+    max,
+    message: 'Too many requests from this IP, please try again later.',
+    standardHeaders: true,
+    legacyHeaders: false,
+});
+
+// API rate limits
+const apiLimiter = createRateLimit(
+    parseInt(process.env.RATE_LIMIT_WINDOW_MS) || 15 * 60 * 1000, // 15 minutes
+    parseInt(process.env.RATE_LIMIT_MAX_REQUESTS) || 100
+);
+
+// Stricter rate limit for uploads
+const uploadLimiter = createRateLimit(
+    15 * 60 * 1000, // 15 minutes
+    10 // 10 uploads per window
+);
+
+// Security headers configuration
+const securityHeaders = helmet({
+    contentSecurityPolicy: {
+        directives: {
+            defaultSrc: ["'self'"],
+            styleSrc: ["'self'", "'unsafe-inline'"],
+            scriptSrc: ["'self'", "https://cdn.jsdelivr.net", "https://unpkg.com"],
+            imgSrc: ["'self'", "data:", "blob:"],
+            connectSrc: ["'self'"],
+            fontSrc: ["'self'"],
+            objectSrc: ["'none'"],
+            mediaSrc: ["'self'"],
+            frameSrc: ["'none'"],
+        },
+    },
+    crossOriginEmbedderPolicy: false, // Required for Three.js
+});
+
+// Input validation schemas
+const fileValidation = [
+    body('description').optional().isLength({ max: 500 }).trim().escape(),
+    body('tags').optional().isLength({ max: 200 }).trim(),
+    body('printSettings').optional().isJSON(),
+    body('dimensions').optional().isJSON(),
+];
+
+const fileIdValidation = [
+    param('id').isInt({ min: 1 }).withMessage('Valid file ID required')
+];
+
+const searchValidation = [
+    query('search').optional().isLength({ max: 100 }).trim().escape(),
+    query('limit').optional().isInt({ min: 1, max: 100 }).withMessage('Limit must be between 1 and 100'),
+    query('offset').optional().isInt({ min: 0 }).withMessage('Offset must be non-negative')
+];
+
+module.exports = {
+    apiLimiter,
+    uploadLimiter,
+    securityHeaders,
+    fileValidation,
+    fileIdValidation,
+    searchValidation
+};

database.js

@@ -0,0 +1,244 @@
+const sqlite3 = require('sqlite3').verbose();
+const path = require('path');
+const fs = require('fs').promises;
+
+class STLDatabase {
+    constructor(dbPath = './stl_storage.db', uploadDir = './uploads') {
+        // Use data directory if available (for containers)
+        if (process.env.NODE_ENV === 'production' && require('fs').existsSync('./data')) {
+            this.dbPath = './data/stl_storage.db';
+        } else {
+            this.dbPath = dbPath;
+        }
+        this.uploadDir = uploadDir;
+        this.db = null;
+    }
+
+    async initialize() {
+        await this.ensureDirectories();
+        await this.connectDatabase();
+        await this.initializeSchema();
+    }
+
+    async ensureDirectories() {
+        try {
+            await fs.access(this.uploadDir);
+        } catch {
+            await fs.mkdir(this.uploadDir, { recursive: true });
+        }
+    }
+
+    async connectDatabase() {
+        return new Promise((resolve, reject) => {
+            this.db = new sqlite3.Database(this.dbPath, (err) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve();
+                }
+            });
+        });
+    }
+
+    async initializeSchema() {
+        const schema = await fs.readFile('./schema.sql', 'utf8');
+        return new Promise((resolve, reject) => {
+            this.db.exec(schema, (err) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve();
+                }
+            });
+        });
+    }
+
+    async addSTLFile(fileData) {
+        const {
+            filename,
+            originalName,
+            filePath,
+            fileSize,
+            description = null,
+            tags = null,
+            printSettings = null,
+            dimensions = null
+        } = fileData;
+
+        return new Promise((resolve, reject) => {
+            const stmt = this.db.prepare(`
+                INSERT INTO stl_files 
+                (filename, original_name, file_path, file_size, description, tags, print_settings, dimensions)
+                VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+            `);
+
+            stmt.run([
+                filename,
+                originalName,
+                filePath,
+                fileSize,
+                description,
+                tags,
+                printSettings ? JSON.stringify(printSettings) : null,
+                dimensions ? JSON.stringify(dimensions) : null
+            ], function(err) {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve(this.lastID);
+                }
+            });
+
+            stmt.finalize();
+        });
+    }
+
+    async getSTLFile(id) {
+        return new Promise((resolve, reject) => {
+            this.db.get(
+                'SELECT * FROM stl_files WHERE id = ?',
+                [id],
+                (err, row) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(row ? this.parseRow(row) : null);
+                    }
+                }
+            );
+        });
+    }
+
+    async getAllSTLFiles(limit = 50, offset = 0) {
+        return new Promise((resolve, reject) => {
+            this.db.all(
+                'SELECT * FROM stl_files ORDER BY upload_date DESC LIMIT ? OFFSET ?',
+                [limit, offset],
+                (err, rows) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(rows.map(row => this.parseRow(row)));
+                    }
+                }
+            );
+        });
+    }
+
+    async searchSTLFiles(query) {
+        return new Promise((resolve, reject) => {
+            this.db.all(
+                `SELECT * FROM stl_files 
+                 WHERE filename LIKE ? OR original_name LIKE ? OR description LIKE ? OR tags LIKE ?
+                 ORDER BY upload_date DESC`,
+                [`%${query}%`, `%${query}%`, `%${query}%`, `%${query}%`],
+                (err, rows) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(rows.map(row => this.parseRow(row)));
+                    }
+                }
+            );
+        });
+    }
+
+    async updateSTLFile(id, updates) {
+        const allowedFields = ['description', 'tags', 'print_settings', 'dimensions'];
+        const updateFields = [];
+        const values = [];
+
+        for (const [key, value] of Object.entries(updates)) {
+            if (allowedFields.includes(key)) {
+                updateFields.push(`${key} = ?`);
+                if (key === 'print_settings' || key === 'dimensions') {
+                    values.push(value ? JSON.stringify(value) : null);
+                } else {
+                    values.push(value);
+                }
+            }
+        }
+
+        if (updateFields.length === 0) {
+            throw new Error('No valid fields to update');
+        }
+
+        values.push(id);
+
+        return new Promise((resolve, reject) => {
+            this.db.run(
+                `UPDATE stl_files SET ${updateFields.join(', ')} WHERE id = ?`,
+                values,
+                function(err) {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(this.changes > 0);
+                    }
+                }
+            );
+        });
+    }
+
+    async deleteSTLFile(id) {
+        const file = await this.getSTLFile(id);
+        if (!file) {
+            return false;
+        }
+
+        try {
+            await fs.unlink(file.file_path);
+        } catch (err) {
+            console.warn(`Could not delete file ${file.file_path}:`, err.message);
+        }
+
+        return new Promise((resolve, reject) => {
+            this.db.run(
+                'DELETE FROM stl_files WHERE id = ?',
+                [id],
+                function(err) {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(this.changes > 0);
+                    }
+                }
+            );
+        });
+    }
+
+    parseRow(row) {
+        const parsed = { ...row };
+        
+        if (parsed.print_settings) {
+            try {
+                parsed.print_settings = JSON.parse(parsed.print_settings);
+            } catch {
+                parsed.print_settings = null;
+            }
+        }
+        
+        if (parsed.dimensions) {
+            try {
+                parsed.dimensions = JSON.parse(parsed.dimensions);
+            } catch {
+                parsed.dimensions = null;
+            }
+        }
+        
+        return parsed;
+    }
+
+    async close() {
+        return new Promise((resolve) => {
+            this.db.close((err) => {
+                if (err) {
+                    console.error('Error closing database:', err);
+                }
+                resolve();
+            });
+        });
+    }
+}
+
+module.exports = STLDatabase;

docker-compose.yml

@@ -0,0 +1,31 @@
+version: '3.8'
+
+services:
+  stl-storage:
+    build: .
+    container_name: stl-storage-app
+    ports:
+      - "3000:3000"
+    volumes:
+      # Persistent storage for uploads
+      - ./uploads:/app/uploads
+      # Persistent storage for database and logs
+      - stl_data:/app/data
+      - stl_logs:/app/logs
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - LOG_LEVEL=info
+      - MAX_FILE_SIZE=104857600
+      - RATE_LIMIT_MAX_REQUESTS=100
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "node", "-e", "require('http').get('http://localhost:3000/api/files', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) }).on('error', () => process.exit(1))"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+volumes:
+  stl_data:
+  stl_logs:

init-db.js

@@ -0,0 +1,26 @@
+const STLDatabase = require('./database');
+
+async function initializeDatabase() {
+    console.log('Initializing STL database...');
+    
+    const db = new STLDatabase('./stl_storage.db', './uploads');
+    
+    try {
+        await db.initialize();
+        console.log('✅ Database initialized successfully');
+        console.log('✅ Upload directory created');
+        console.log('✅ Database schema created');
+        
+        await db.close();
+        console.log('Database setup complete!');
+    } catch (error) {
+        console.error('❌ Error initializing database:', error);
+        process.exit(1);
+    }
+}
+
+if (require.main === module) {
+    initializeDatabase();
+}
+
+module.exports = initializeDatabase;

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "stl-storage-app",
+  "version": "1.0.0",
+  "description": "Web-based STL file storage and viewer",
+  "main": "database.js",
+  "scripts": {
+    "init-db": "node init-db.js",
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "sqlite3": "^5.1.6",
+    "express": "^4.18.2",
+    "multer": "^1.4.5-lts.1",
+    "cors": "^2.8.5",
+    "uuid": "^9.0.1",
+    "helmet": "^7.1.0",
+    "express-rate-limit": "^7.1.5",
+    "express-validator": "^7.0.1",
+    "dotenv": "^16.3.1",
+    "winston": "^3.11.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  },
+  "keywords": ["stl", "3d-printing", "file-storage", "sqlite"],
+  "author": "",
+  "license": "MIT"
+}

public/index.html

@@ -0,0 +1,689 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>STL Storage - 3D File Manager</title>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
+    <script src="js/three-setup.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f5f5f7;
+            color: #1d1d1f;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        
+        header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 600;
+            margin-bottom: 10px;
+        }
+        
+        .upload-section {
+            background: white;
+            border-radius: 12px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        
+        .upload-area {
+            border: 2px dashed #007aff;
+            border-radius: 8px;
+            padding: 40px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .upload-area:hover {
+            border-color: #0056cc;
+            background: #f0f8ff;
+        }
+        
+        .upload-area.dragover {
+            border-color: #0056cc;
+            background: #f0f8ff;
+        }
+        
+        .files-section {
+            background: white;
+            border-radius: 12px;
+            padding: 30px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        
+        .search-bar {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 8px;
+            font-size: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .file-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+        }
+        
+        .file-card {
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            padding: 20px;
+            background: #fafafa;
+        }
+        
+        .file-info {
+            margin-bottom: 10px;
+        }
+        
+        .file-name {
+            font-weight: 600;
+            margin-bottom: 5px;
+            word-break: break-word;
+        }
+        
+        .file-meta {
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+        
+        .file-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+        
+        button {
+            background: #007aff;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        
+        button:hover {
+            background: #0056cc;
+        }
+        
+        .btn-danger {
+            background: #ff3b30;
+        }
+        
+        .btn-danger:hover {
+            background: #d70015;
+        }
+        
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #6b7280;
+        }
+        
+        .error {
+            background: #fee;
+            border: 1px solid #fcc;
+            color: #c00;
+            padding: 10px;
+            border-radius: 6px;
+            margin: 10px 0;
+        }
+        
+        .success {
+            background: #efe;
+            border: 1px solid #cfc;
+            color: #060;
+            padding: 10px;
+            border-radius: 6px;
+            margin: 10px 0;
+        }
+        
+        #fileInput {
+            display: none;
+        }
+        
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.8);
+        }
+        
+        .modal-content {
+            position: relative;
+            background-color: white;
+            margin: 2% auto;
+            width: 90%;
+            height: 90%;
+            border-radius: 12px;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .modal-header {
+            padding: 20px;
+            border-bottom: 1px solid #e5e7eb;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .modal-body {
+            flex: 1;
+            display: flex;
+            overflow: hidden;
+        }
+        
+        .viewer-container {
+            flex: 1;
+            position: relative;
+            background: #f5f5f7;
+        }
+        
+        .viewer-controls {
+            width: 250px;
+            padding: 20px;
+            background: #fafafa;
+            border-left: 1px solid #e5e7eb;
+            overflow-y: auto;
+        }
+        
+        .control-group {
+            margin-bottom: 20px;
+        }
+        
+        .control-group h4 {
+            margin-bottom: 10px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #374151;
+        }
+        
+        .control-item {
+            margin-bottom: 10px;
+        }
+        
+        .control-item label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 12px;
+            color: #6b7280;
+        }
+        
+        .control-item input,
+        .control-item select {
+            width: 100%;
+            padding: 6px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+        
+        .close {
+            color: #aaa;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        
+        .close:hover,
+        .close:focus {
+            color: #000;
+        }
+        
+        .btn-view {
+            background: #10b981;
+        }
+        
+        .btn-view:hover {
+            background: #059669;
+        }
+        
+        .loading-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(245, 245, 247, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            color: #6b7280;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>STL Storage</h1>
+            <p>Upload and manage your 3D printing files</p>
+        </header>
+        
+        <div class="upload-section">
+            <div class="upload-area" onclick="document.getElementById('fileInput').click()">
+                <h3>Drop STL files here or click to upload</h3>
+                <p>Maximum file size: 100MB</p>
+                <input type="file" id="fileInput" accept=".stl" multiple>
+            </div>
+            <div id="uploadStatus"></div>
+        </div>
+        
+        <div class="files-section">
+            <input type="text" class="search-bar" id="searchInput" placeholder="Search files...">
+            <div id="filesList">
+                <div class="loading">Loading files...</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 3D Viewer Modal -->
+    <div id="viewerModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="modalTitle">3D Viewer</h2>
+                <span class="close" onclick="closeViewer()">&times;</span>
+            </div>
+            <div class="modal-body">
+                <div class="viewer-container">
+                    <div id="stlViewer"></div>
+                    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
+                        Loading 3D model...
+                    </div>
+                </div>
+                <div class="viewer-controls">
+                    <div class="control-group">
+                        <h4>View Controls</h4>
+                        <div class="control-item">
+                            <button onclick="resetView()" style="width: 100%;">Reset View</button>
+                        </div>
+                        <div class="control-item">
+                            <button onclick="takeScreenshot()" style="width: 100%;">Screenshot</button>
+                        </div>
+                    </div>
+                    
+                    <div class="control-group">
+                        <h4>Display Options</h4>
+                        <div class="control-item">
+                            <label>
+                                <input type="checkbox" id="wireframeToggle" onchange="toggleWireframe()">
+                                Wireframe Mode
+                            </label>
+                        </div>
+                    </div>
+                    
+                    <div class="control-group">
+                        <h4>Model Color</h4>
+                        <div class="control-item">
+                            <select id="colorSelect" onchange="changeColor()">
+                                <option value="0x00aa88">Teal (Default)</option>
+                                <option value="0xff6b6b">Red</option>
+                                <option value="0x4ecdc4">Cyan</option>
+                                <option value="0x45b7d1">Blue</option>
+                                <option value="0xf9ca24">Yellow</option>
+                                <option value="0x6c5ce7">Purple</option>
+                                <option value="0xa0a0a0">Gray</option>
+                                <option value="0xffffff">White</option>
+                            </select>
+                        </div>
+                        <div class="control-item">
+                            <label>Custom Color:</label>
+                            <input type="color" id="customColor" onchange="changeCustomColor()" value="#00aa88">
+                        </div>
+                    </div>
+                    
+                    <div class="control-group">
+                        <h4>Model Info</h4>
+                        <div id="modelInfo" style="font-size: 12px; color: #6b7280;">
+                            No model loaded
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let files = [];
+        
+        async function uploadFile(file) {
+            const formData = new FormData();
+            formData.append('stlFile', file);
+            
+            try {
+                const response = await fetch('/api/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    showMessage('File uploaded successfully!', 'success');
+                    loadFiles();
+                } else {
+                    showMessage(result.error || 'Upload failed', 'error');
+                }
+            } catch (error) {
+                showMessage('Upload failed: ' + error.message, 'error');
+            }
+        }
+        
+        async function loadFiles(search = '') {
+            try {
+                const url = search ? `/api/files?search=${encodeURIComponent(search)}` : '/api/files';
+                const response = await fetch(url);
+                const result = await response.json();
+                
+                if (result.success) {
+                    files = result.files;
+                    renderFiles();
+                } else {
+                    showMessage('Failed to load files', 'error');
+                }
+            } catch (error) {
+                showMessage('Failed to load files: ' + error.message, 'error');
+            }
+        }
+        
+        async function deleteFile(id) {
+            if (!confirm('Are you sure you want to delete this file?')) return;
+            
+            try {
+                const response = await fetch(`/api/files/${id}`, {
+                    method: 'DELETE'
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    showMessage('File deleted successfully!', 'success');
+                    loadFiles();
+                } else {
+                    showMessage(result.error || 'Delete failed', 'error');
+                }
+            } catch (error) {
+                showMessage('Delete failed: ' + error.message, 'error');
+            }
+        }
+        
+        function downloadFile(id, filename) {
+            window.open(`/api/files/${id}/download`, '_blank');
+        }
+        
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        
+        function renderFiles() {
+            const filesList = document.getElementById('filesList');
+            
+            if (files.length === 0) {
+                filesList.innerHTML = '<div class="loading">No files found</div>';
+                return;
+            }
+            
+            const fileGrid = files.map(file => `
+                <div class="file-card">
+                    <div class="file-info">
+                        <div class="file-name">${file.original_name}</div>
+                        <div class="file-meta">
+                            Size: ${formatFileSize(file.file_size)}<br>
+                            Uploaded: ${new Date(file.upload_date).toLocaleDateString()}
+                            ${file.description ? `<br>Description: ${file.description}` : ''}
+                            ${file.tags ? `<br>Tags: ${file.tags}` : ''}
+                        </div>
+                    </div>
+                    <div class="file-actions">
+                        <button class="btn-view" onclick="viewSTL(${file.id}, '${file.original_name}', '${file.filename}')">View 3D</button>
+                        <button onclick="downloadFile(${file.id}, '${file.original_name}')">Download</button>
+                        <button class="btn-danger" onclick="deleteFile(${file.id})">Delete</button>
+                    </div>
+                </div>
+            `).join('');
+            
+            filesList.innerHTML = `<div class="file-grid">${fileGrid}</div>`;
+        }
+        
+        function showMessage(message, type) {
+            const status = document.getElementById('uploadStatus');
+            status.innerHTML = `<div class="${type}">${message}</div>`;
+            setTimeout(() => {
+                status.innerHTML = '';
+            }, 5000);
+        }
+        
+        // Event listeners
+        document.getElementById('fileInput').addEventListener('change', (e) => {
+            Array.from(e.target.files).forEach(uploadFile);
+        });
+        
+        document.getElementById('searchInput').addEventListener('input', (e) => {
+            const search = e.target.value.trim();
+            if (search.length >= 2 || search.length === 0) {
+                loadFiles(search);
+            }
+        });
+        
+        // Drag and drop
+        const uploadArea = document.querySelector('.upload-area');
+        
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+        
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+        
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            Array.from(e.dataTransfer.files).forEach(uploadFile);
+        });
+        
+        // 3D Viewer functionality
+        let stlViewer = null;
+        let currentFile = null;
+        
+        function viewSTL(fileId, originalName, filename) {
+            console.log('viewSTL called with:', { fileId, originalName, filename });
+            console.log('THREE available:', typeof THREE !== 'undefined');
+            console.log('THREE.STLLoader available:', typeof THREE.STLLoader !== 'undefined');
+            console.log('THREE.OrbitControls available:', typeof THREE.OrbitControls !== 'undefined');
+            
+            currentFile = { id: fileId, originalName, filename };
+            
+            const modal = document.getElementById('viewerModal');
+            const modalTitle = document.getElementById('modalTitle');
+            const loadingOverlay = document.getElementById('loadingOverlay');
+            
+            modalTitle.textContent = `3D Viewer - ${originalName}`;
+            modal.style.display = 'block';
+            loadingOverlay.style.display = 'flex';
+            loadingOverlay.innerHTML = 'Initializing 3D viewer...';
+            
+            // Check if Three.js is loaded
+            if (typeof THREE === 'undefined') {
+                loadingOverlay.innerHTML = 'Error: Three.js not loaded';
+                console.error('Three.js not loaded');
+                return;
+            }
+            
+            if (typeof THREE.STLLoader === 'undefined') {
+                loadingOverlay.innerHTML = 'Error: STLLoader not available';
+                console.error('STLLoader not available');
+                return;
+            }
+            
+            // Initialize viewer if not already done
+            try {
+                if (!stlViewer) {
+                    console.log('Creating new STLViewer...');
+                    stlViewer = new STLViewer('stlViewer');
+                    console.log('STLViewer created successfully');
+                }
+                
+                // Load the STL file
+                const stlUrl = `/uploads/stl/${filename}`;
+                console.log('Loading STL from URL:', stlUrl);
+                loadingOverlay.innerHTML = 'Loading 3D model...';
+                
+                stlViewer.loadSTL(stlUrl)
+                    .then(() => {
+                        console.log('STL loaded successfully');
+                        loadingOverlay.style.display = 'none';
+                        updateModelInfo();
+                    })
+                    .catch((error) => {
+                        console.error('Failed to load STL:', error);
+                        loadingOverlay.innerHTML = `Error loading model: ${error.message}`;
+                    });
+            } catch (error) {
+                console.error('Error initializing viewer:', error);
+                loadingOverlay.innerHTML = `Error initializing viewer: ${error.message}`;
+            }
+        }
+        
+        function closeViewer() {
+            const modal = document.getElementById('viewerModal');
+            modal.style.display = 'none';
+            
+            if (stlViewer) {
+                stlViewer.dispose();
+                stlViewer = null;
+            }
+        }
+        
+        function resetView() {
+            if (stlViewer) {
+                stlViewer.resetView();
+            }
+        }
+        
+        function toggleWireframe() {
+            const wireframeToggle = document.getElementById('wireframeToggle');
+            if (stlViewer) {
+                stlViewer.setWireframe(wireframeToggle.checked);
+            }
+        }
+        
+        function changeColor() {
+            const colorSelect = document.getElementById('colorSelect');
+            const customColor = document.getElementById('customColor');
+            
+            if (stlViewer) {
+                const colorValue = parseInt(colorSelect.value);
+                stlViewer.setColor(colorValue);
+                
+                // Update custom color picker to match
+                const hexColor = '#' + colorValue.toString(16).padStart(6, '0');
+                customColor.value = hexColor;
+            }
+        }
+        
+        function changeCustomColor() {
+            const customColor = document.getElementById('customColor');
+            const colorSelect = document.getElementById('colorSelect');
+            
+            if (stlViewer) {
+                const hexColor = customColor.value.replace('#', '');
+                const colorValue = parseInt(hexColor, 16);
+                stlViewer.setColor(colorValue);
+                
+                // Reset select to show it's using custom color
+                colorSelect.selectedIndex = -1;
+            }
+        }
+        
+        function takeScreenshot() {
+            if (stlViewer && currentFile) {
+                const dataUrl = stlViewer.screenshot();
+                if (dataUrl) {
+                    // Create download link
+                    const link = document.createElement('a');
+                    link.download = `${currentFile.originalName}_screenshot.png`;
+                    link.href = dataUrl;
+                    link.click();
+                }
+            }
+        }
+        
+        function updateModelInfo() {
+            const modelInfo = document.getElementById('modelInfo');
+            if (stlViewer && stlViewer.mesh && currentFile) {
+                const geometry = stlViewer.mesh.geometry;
+                const box = new THREE.Box3().setFromObject(stlViewer.mesh);
+                const size = box.getSize(new THREE.Vector3());
+                
+                const vertices = geometry.attributes.position.count;
+                const faces = vertices / 3;
+                
+                modelInfo.innerHTML = `
+                    <strong>Geometry:</strong><br>
+                    Vertices: ${vertices.toLocaleString()}<br>
+                    Faces: ${Math.floor(faces).toLocaleString()}<br>
+                    <br>
+                    <strong>Dimensions:</strong><br>
+                    Width: ${size.x.toFixed(2)}<br>
+                    Height: ${size.y.toFixed(2)}<br>
+                    Depth: ${size.z.toFixed(2)}<br>
+                `;
+            }
+        }
+        
+        // Close modal when clicking outside
+        window.onclick = function(event) {
+            const modal = document.getElementById('viewerModal');
+            if (event.target === modal) {
+                closeViewer();
+            }
+        }
+        
+        // Handle escape key
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape') {
+                const modal = document.getElementById('viewerModal');
+                if (modal.style.display === 'block') {
+                    closeViewer();
+                }
+            }
+        });
+        
+        // Load files on page load
+        loadFiles();
+    </script>
+    <script src="js/stl-viewer.js"></script>
+</body>
+</html>

public/js/stl-viewer.js

@@ -0,0 +1,217 @@
+class STLViewer {
+    constructor(containerId) {
+        console.log('STLViewer constructor called with containerId:', containerId);
+        this.container = document.getElementById(containerId);
+        console.log('Container element:', this.container);
+        
+        if (!this.container) {
+            throw new Error(`Container element with id "${containerId}" not found`);
+        }
+        
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        this.mesh = null;
+        this.animationId = null;
+        
+        console.log('Initializing STLViewer...');
+        this.init();
+        console.log('STLViewer initialization complete');
+    }
+    
+    init() {
+        const width = this.container.clientWidth || 800;
+        const height = this.container.clientHeight || 600;
+        console.log('Container dimensions:', { width, height });
+        
+        // Scene
+        console.log('Creating scene...');
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0xf0f0f0);
+        
+        // Camera
+        console.log('Creating camera...');
+        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+        this.camera.position.set(0, 0, 50);
+        
+        // Renderer
+        console.log('Creating renderer...');
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(width, height);
+        this.renderer.shadowMap.enabled = true;
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        
+        console.log('Appending renderer to container...');
+        this.container.appendChild(this.renderer.domElement);
+        
+        // Controls
+        console.log('Creating controls...');
+        if (typeof THREE.OrbitControls === 'undefined') {
+            throw new Error('OrbitControls not available');
+        }
+        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.enableDamping = true;
+        this.controls.dampingFactor = 0.05;
+        
+        // Lighting
+        console.log('Setting up lighting...');
+        this.setupLighting();
+        
+        // Handle window resize
+        window.addEventListener('resize', () => this.onWindowResize());
+        
+        console.log('Starting animation loop...');
+        this.animate();
+    }
+    
+    setupLighting() {
+        // Ambient light
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+        this.scene.add(ambientLight);
+        
+        // Directional light
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(50, 50, 50);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        this.scene.add(directionalLight);
+        
+        // Point lights for better illumination
+        const pointLight1 = new THREE.PointLight(0xffffff, 0.4, 100);
+        pointLight1.position.set(-50, 25, 25);
+        this.scene.add(pointLight1);
+        
+        const pointLight2 = new THREE.PointLight(0xffffff, 0.4, 100);
+        pointLight2.position.set(50, -25, -25);
+        this.scene.add(pointLight2);
+    }
+    
+    async loadSTL(url) {
+        return new Promise((resolve, reject) => {
+            console.log('Loading STL from:', url);
+            const loader = new THREE.STLLoader();
+            
+            loader.load(
+                url,
+                (geometry) => {
+                    console.log('STL loaded successfully, vertices:', geometry.attributes.position.count);
+                    this.displayGeometry(geometry);
+                    resolve();
+                },
+                (progress) => {
+                    console.log('Loading progress:', (progress.loaded / progress.total * 100) + '%');
+                },
+                (error) => {
+                    console.error('Error loading STL:', error);
+                    reject(error);
+                }
+            );
+        });
+    }
+    
+    displayGeometry(geometry) {
+        // Remove existing mesh
+        if (this.mesh) {
+            this.scene.remove(this.mesh);
+        }
+        
+        // Center geometry
+        geometry.center();
+        geometry.computeVertexNormals();
+        
+        // Material
+        const material = new THREE.MeshPhongMaterial({
+            color: 0x00aa88,
+            shininess: 100,
+            side: THREE.DoubleSide
+        });
+        
+        // Create mesh
+        this.mesh = new THREE.Mesh(geometry, material);
+        this.mesh.castShadow = true;
+        this.mesh.receiveShadow = true;
+        this.scene.add(this.mesh);
+        
+        // Auto-fit camera to object
+        this.fitCameraToObject();
+    }
+    
+    fitCameraToObject() {
+        if (!this.mesh) return;
+        
+        const box = new THREE.Box3().setFromObject(this.mesh);
+        const center = box.getCenter(new THREE.Vector3());
+        const size = box.getSize(new THREE.Vector3());
+        
+        const maxDim = Math.max(size.x, size.y, size.z);
+        const fov = this.camera.fov * (Math.PI / 180);
+        let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
+        
+        cameraZ *= 1.5; // Add some padding
+        
+        this.camera.position.set(center.x, center.y, center.z + cameraZ);
+        this.controls.target.copy(center);
+        this.controls.update();
+    }
+    
+    setWireframe(enabled) {
+        if (this.mesh) {
+            this.mesh.material.wireframe = enabled;
+        }
+    }
+    
+    setColor(color) {
+        if (this.mesh) {
+            this.mesh.material.color.setHex(color);
+        }
+    }
+    
+    resetView() {
+        if (this.mesh) {
+            this.fitCameraToObject();
+        }
+    }
+    
+    onWindowResize() {
+        const width = this.container.clientWidth;
+        const height = this.container.clientHeight;
+        
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(width, height);
+    }
+    
+    animate() {
+        this.animationId = requestAnimationFrame(() => this.animate());
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    }
+    
+    dispose() {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+        }
+        
+        if (this.mesh) {
+            this.scene.remove(this.mesh);
+            this.mesh.geometry.dispose();
+            this.mesh.material.dispose();
+        }
+        
+        if (this.renderer) {
+            this.container.removeChild(this.renderer.domElement);
+            this.renderer.dispose();
+        }
+        
+        this.controls?.dispose();
+    }
+    
+    screenshot() {
+        if (this.renderer) {
+            return this.renderer.domElement.toDataURL('image/png');
+        }
+        return null;
+    }
+}

public/js/three-setup.js

@@ -0,0 +1,638 @@
+// Convert Three.js ES6 modules to work with global THREE object
+
+// OrbitControls adapted for global THREE
+class OrbitControls extends THREE.EventDispatcher {
+    constructor(object, domElement) {
+        super();
+        
+        this.object = object;
+        this.domElement = domElement !== undefined ? domElement : document;
+        
+        this.enabled = true;
+        this.target = new THREE.Vector3();
+        this.minDistance = 0;
+        this.maxDistance = Infinity;
+        this.minZoom = 0;
+        this.maxZoom = Infinity;
+        this.minPolarAngle = 0;
+        this.maxPolarAngle = Math.PI;
+        this.minAzimuthAngle = -Infinity;
+        this.maxAzimuthAngle = Infinity;
+        this.enableDamping = false;
+        this.dampingFactor = 0.05;
+        this.enableZoom = true;
+        this.zoomSpeed = 1.0;
+        this.enableRotate = true;
+        this.rotateSpeed = 1.0;
+        this.enablePan = true;
+        this.panSpeed = 1.0;
+        this.screenSpacePanning = true;
+        this.keyPanSpeed = 7.0;
+        this.autoRotate = false;
+        this.autoRotateSpeed = 2.0;
+        this.enableKeys = true;
+        
+        this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+        this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN };
+        this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
+        
+        this.target0 = this.target.clone();
+        this.position0 = this.object.position.clone();
+        this.zoom0 = this.object.zoom;
+        
+        this.changeEvent = { type: 'change' };
+        this.startEvent = { type: 'start' };
+        this.endEvent = { type: 'end' };
+        
+        this.state = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_PAN: 4, TOUCH_DOLLY_PAN: 5, TOUCH_DOLLY_ROTATE: 6 };
+        this.stateKey = this.state.NONE;
+        
+        this.EPS = 0.000001;
+        
+        this.spherical = new THREE.Spherical();
+        this.sphericalDelta = new THREE.Spherical();
+        this.scale = 1;
+        this.panOffset = new THREE.Vector3();
+        this.zoomChanged = false;
+        this.rotateStart = new THREE.Vector2();
+        this.rotateEnd = new THREE.Vector2();
+        this.rotateDelta = new THREE.Vector2();
+        this.panStart = new THREE.Vector2();
+        this.panEnd = new THREE.Vector2();
+        this.panDelta = new THREE.Vector2();
+        this.dollyStart = new THREE.Vector2();
+        this.dollyEnd = new THREE.Vector2();
+        this.dollyDelta = new THREE.Vector2();
+        
+        this.init();
+    }
+    
+    init() {
+        this.domElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
+        this.domElement.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+        this.domElement.addEventListener('wheel', this.onMouseWheel.bind(this), false);
+        this.domElement.addEventListener('touchstart', this.onTouchStart.bind(this), false);
+        this.domElement.addEventListener('touchend', this.onTouchEnd.bind(this), false);
+        this.domElement.addEventListener('touchmove', this.onTouchMove.bind(this), false);
+        this.domElement.addEventListener('keydown', this.onKeyDown.bind(this), false);
+        this.update();
+    }
+    
+    update() {
+        const offset = new THREE.Vector3();
+        const quat = new THREE.Quaternion().setFromUnitVectors(this.object.up, new THREE.Vector3(0, 1, 0));
+        const quatInverse = quat.clone().invert();
+        const lastPosition = new THREE.Vector3();
+        const lastQuaternion = new THREE.Quaternion();
+        
+        const position = this.object.position;
+        offset.copy(position).sub(this.target);
+        offset.applyQuaternion(quat);
+        this.spherical.setFromVector3(offset);
+        
+        if (this.autoRotate && this.stateKey === this.state.NONE) {
+            this.rotateLeft(this.getAutoRotationAngle());
+        }
+        
+        if (this.enableDamping) {
+            this.spherical.theta += this.sphericalDelta.theta * this.dampingFactor;
+            this.spherical.phi += this.sphericalDelta.phi * this.dampingFactor;
+        } else {
+            this.spherical.theta += this.sphericalDelta.theta;
+            this.spherical.phi += this.sphericalDelta.phi;
+        }
+        
+        this.spherical.theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, this.spherical.theta));
+        this.spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.spherical.phi));
+        this.spherical.makeSafe();
+        this.spherical.radius *= this.scale;
+        this.spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, this.spherical.radius));
+        
+        if (this.enableDamping === true) {
+            this.target.addScaledVector(this.panOffset, this.dampingFactor);
+        } else {
+            this.target.add(this.panOffset);
+        }
+        
+        offset.setFromSpherical(this.spherical);
+        offset.applyQuaternion(quatInverse);
+        position.copy(this.target).add(offset);
+        this.object.lookAt(this.target);
+        
+        if (this.enableDamping === true) {
+            this.sphericalDelta.theta *= (1 - this.dampingFactor);
+            this.sphericalDelta.phi *= (1 - this.dampingFactor);
+            this.panOffset.multiplyScalar(1 - this.dampingFactor);
+        } else {
+            this.sphericalDelta.set(0, 0, 0);
+            this.panOffset.set(0, 0, 0);
+        }
+        
+        this.scale = 1;
+        
+        if (this.zoomChanged ||
+            lastPosition.distanceToSquared(this.object.position) > this.EPS ||
+            8 * (1 - lastQuaternion.dot(this.object.quaternion)) > this.EPS) {
+            
+            this.dispatchEvent(this.changeEvent);
+            lastPosition.copy(this.object.position);
+            lastQuaternion.copy(this.object.quaternion);
+            this.zoomChanged = false;
+            return true;
+        }
+        
+        return false;
+    }
+    
+    dispose() {
+        this.domElement.removeEventListener('contextmenu', this.onContextMenu.bind(this), false);
+        this.domElement.removeEventListener('mousedown', this.onMouseDown.bind(this), false);
+        this.domElement.removeEventListener('wheel', this.onMouseWheel.bind(this), false);
+        this.domElement.removeEventListener('touchstart', this.onTouchStart.bind(this), false);
+        this.domElement.removeEventListener('touchend', this.onTouchEnd.bind(this), false);
+        this.domElement.removeEventListener('touchmove', this.onTouchMove.bind(this), false);
+        this.domElement.removeEventListener('keydown', this.onKeyDown.bind(this), false);
+    }
+    
+    getAutoRotationAngle() {
+        return 2 * Math.PI / 60 / 60 * this.autoRotateSpeed;
+    }
+    
+    getZoomScale() {
+        return Math.pow(0.95, this.zoomSpeed);
+    }
+    
+    rotateLeft(angle) {
+        this.sphericalDelta.theta -= angle;
+    }
+    
+    rotateUp(angle) {
+        this.sphericalDelta.phi -= angle;
+    }
+    
+    panLeft(distance, objectMatrix) {
+        const v = new THREE.Vector3();
+        v.setFromMatrixColumn(objectMatrix, 0);
+        v.multiplyScalar(-distance);
+        this.panOffset.add(v);
+    }
+    
+    panUp(distance, objectMatrix) {
+        const v = new THREE.Vector3();
+        if (this.screenSpacePanning === true) {
+            v.setFromMatrixColumn(objectMatrix, 1);
+        } else {
+            v.setFromMatrixColumn(objectMatrix, 0);
+            v.crossVectors(this.object.up, v);
+        }
+        v.multiplyScalar(distance);
+        this.panOffset.add(v);
+    }
+    
+    pan(deltaX, deltaY) {
+        const element = this.domElement;
+        if (this.object.isPerspectiveCamera) {
+            const position = this.object.position;
+            const offset = position.clone().sub(this.target);
+            let targetDistance = offset.length();
+            targetDistance *= Math.tan((this.object.fov / 2) * Math.PI / 180.0);
+            this.panLeft(2 * deltaX * targetDistance / element.clientHeight, this.object.matrix);
+            this.panUp(2 * deltaY * targetDistance / element.clientHeight, this.object.matrix);
+        } else if (this.object.isOrthographicCamera) {
+            this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / element.clientWidth, this.object.matrix);
+            this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / element.clientHeight, this.object.matrix);
+        }
+    }
+    
+    dollyOut(dollyScale) {
+        if (this.object.isPerspectiveCamera) {
+            this.scale /= dollyScale;
+        } else if (this.object.isOrthographicCamera) {
+            this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
+            this.object.updateProjectionMatrix();
+            this.zoomChanged = true;
+        }
+    }
+    
+    dollyIn(dollyScale) {
+        if (this.object.isPerspectiveCamera) {
+            this.scale *= dollyScale;
+        } else if (this.object.isOrthographicCamera) {
+            this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
+            this.object.updateProjectionMatrix();
+            this.zoomChanged = true;
+        }
+    }
+    
+    onMouseDown(event) {
+        if (this.enabled === false) return;
+        event.preventDefault();
+        
+        switch (event.button) {
+            case 0:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    if (this.enablePan === false) return;
+                    this.panStart.set(event.clientX, event.clientY);
+                    this.stateKey = this.state.PAN;
+                } else {
+                    if (this.enableRotate === false) return;
+                    this.rotateStart.set(event.clientX, event.clientY);
+                    this.stateKey = this.state.ROTATE;
+                }
+                break;
+            case 1:
+                if (this.enableZoom === false) return;
+                this.dollyStart.set(event.clientX, event.clientY);
+                this.stateKey = this.state.DOLLY;
+                break;
+            case 2:
+                if (this.enablePan === false) return;
+                this.panStart.set(event.clientX, event.clientY);
+                this.stateKey = this.state.PAN;
+                break;
+        }
+        
+        if (this.stateKey !== this.state.NONE) {
+            document.addEventListener('mousemove', this.onMouseMove.bind(this), false);
+            document.addEventListener('mouseup', this.onMouseUp.bind(this), false);
+            this.dispatchEvent(this.startEvent);
+        }
+    }
+    
+    onMouseMove(event) {
+        if (this.enabled === false) return;
+        event.preventDefault();
+        
+        switch (this.stateKey) {
+            case this.state.ROTATE:
+                if (this.enableRotate === false) return;
+                this.rotateEnd.set(event.clientX, event.clientY);
+                this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart).multiplyScalar(this.rotateSpeed);
+                const element = this.domElement;
+                this.rotateLeft(2 * Math.PI * this.rotateDelta.x / element.clientHeight);
+                this.rotateUp(2 * Math.PI * this.rotateDelta.y / element.clientHeight);
+                this.rotateStart.copy(this.rotateEnd);
+                this.update();
+                break;
+                
+            case this.state.DOLLY:
+                if (this.enableZoom === false) return;
+                this.dollyEnd.set(event.clientX, event.clientY);
+                this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart);
+                if (this.dollyDelta.y > 0) {
+                    this.dollyOut(this.getZoomScale());
+                } else if (this.dollyDelta.y < 0) {
+                    this.dollyIn(this.getZoomScale());
+                }
+                this.dollyStart.copy(this.dollyEnd);
+                this.update();
+                break;
+                
+            case this.state.PAN:
+                if (this.enablePan === false) return;
+                this.panEnd.set(event.clientX, event.clientY);
+                this.panDelta.subVectors(this.panEnd, this.panStart).multiplyScalar(this.panSpeed);
+                this.pan(this.panDelta.x, this.panDelta.y);
+                this.panStart.copy(this.panEnd);
+                this.update();
+                break;
+        }
+    }
+    
+    onMouseUp(event) {
+        if (this.enabled === false) return;
+        document.removeEventListener('mousemove', this.onMouseMove.bind(this), false);
+        document.removeEventListener('mouseup', this.onMouseUp.bind(this), false);
+        this.dispatchEvent(this.endEvent);
+        this.stateKey = this.state.NONE;
+    }
+    
+    onMouseWheel(event) {
+        if (this.enabled === false || this.enableZoom === false || (this.stateKey !== this.state.NONE && this.stateKey !== this.state.ROTATE)) return;
+        event.preventDefault();
+        this.dispatchEvent(this.startEvent);
+        
+        if (event.deltaY < 0) {
+            this.dollyIn(this.getZoomScale());
+        } else if (event.deltaY > 0) {
+            this.dollyOut(this.getZoomScale());
+        }
+        
+        this.update();
+        this.dispatchEvent(this.endEvent);
+    }
+    
+    onTouchStart(event) {
+        if (this.enabled === false) return;
+        event.preventDefault();
+        
+        switch (event.touches.length) {
+            case 1:
+                if (this.enableRotate === false) return;
+                this.rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
+                this.stateKey = this.state.TOUCH_ROTATE;
+                break;
+                
+            case 2:
+                if (this.enableZoom === false && this.enablePan === false) return;
+                const dx = event.touches[0].pageX - event.touches[1].pageX;
+                const dy = event.touches[0].pageY - event.touches[1].pageY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                this.dollyStart.set(0, distance);
+                const x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
+                const y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
+                this.panStart.set(x, y);
+                this.stateKey = this.state.TOUCH_DOLLY_PAN;
+                break;
+        }
+        
+        if (this.stateKey !== this.state.NONE) {
+            this.dispatchEvent(this.startEvent);
+        }
+    }
+    
+    onTouchMove(event) {
+        if (this.enabled === false) return;
+        event.preventDefault();
+        
+        switch (this.stateKey) {
+            case this.state.TOUCH_ROTATE:
+                if (this.enableRotate === false) return;
+                this.rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
+                this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart).multiplyScalar(this.rotateSpeed);
+                const element = this.domElement;
+                this.rotateLeft(2 * Math.PI * this.rotateDelta.x / element.clientHeight);
+                this.rotateUp(2 * Math.PI * this.rotateDelta.y / element.clientHeight);
+                this.rotateStart.copy(this.rotateEnd);
+                break;
+                
+            case this.state.TOUCH_DOLLY_PAN:
+                if (this.enableZoom === false && this.enablePan === false) return;
+                const dx = event.touches[0].pageX - event.touches[1].pageX;
+                const dy = event.touches[0].pageY - event.touches[1].pageY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                this.dollyEnd.set(0, distance);
+                this.dollyDelta.set(0, Math.pow(this.dollyEnd.y / this.dollyStart.y, this.zoomSpeed));
+                this.dollyOut(this.dollyDelta.y);
+                this.dollyStart.copy(this.dollyEnd);
+                const x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
+                const y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
+                this.panEnd.set(x, y);
+                this.panDelta.subVectors(this.panEnd, this.panStart).multiplyScalar(this.panSpeed);
+                this.pan(this.panDelta.x, this.panDelta.y);
+                this.panStart.copy(this.panEnd);
+                break;
+        }
+        
+        this.update();
+    }
+    
+    onTouchEnd(event) {
+        if (this.enabled === false) return;
+        this.dispatchEvent(this.endEvent);
+        this.stateKey = this.state.NONE;
+    }
+    
+    onKeyDown(event) {
+        if (this.enabled === false || this.enableKeys === false) return;
+        
+        switch (event.keyCode) {
+            case this.keys.UP:
+                this.pan(0, this.keyPanSpeed);
+                this.update();
+                break;
+            case this.keys.BOTTOM:
+                this.pan(0, -this.keyPanSpeed);
+                this.update();
+                break;
+            case this.keys.LEFT:
+                this.pan(this.keyPanSpeed, 0);
+                this.update();
+                break;
+            case this.keys.RIGHT:
+                this.pan(-this.keyPanSpeed, 0);
+                this.update();
+                break;
+        }
+    }
+    
+    onContextMenu(event) {
+        if (this.enabled === false) return;
+        event.preventDefault();
+    }
+    
+    reset() {
+        this.target.copy(this.target0);
+        this.object.position.copy(this.position0);
+        this.object.zoom = this.zoom0;
+        this.object.updateProjectionMatrix();
+        this.dispatchEvent(this.changeEvent);
+        this.update();
+        this.stateKey = this.state.NONE;
+    }
+}
+
+// STLLoader adapted for global THREE
+class STLLoader extends THREE.Loader {
+    constructor(manager) {
+        super(manager);
+    }
+    
+    load(url, onLoad, onProgress, onError) {
+        const scope = this;
+        const loader = new THREE.FileLoader(this.manager);
+        loader.setPath(this.path);
+        loader.setResponseType('arraybuffer');
+        loader.setRequestHeader(this.requestHeader);
+        loader.setWithCredentials(this.withCredentials);
+        
+        loader.load(url, function (text) {
+            try {
+                onLoad(scope.parse(text));
+            } catch (e) {
+                if (onError) {
+                    onError(e);
+                } else {
+                    console.error(e);
+                }
+                scope.manager.itemError(url);
+            }
+        }, onProgress, onError);
+    }
+    
+    parse(data) {
+        const binData = this.ensureBinary(data);
+        return this.isBinary(binData) ? this.parseBinary(binData) : this.parseASCII(this.ensureString(data));
+    }
+    
+    isBinary(data) {
+        const reader = new DataView(data);
+        const face_size = (32 / 8 * 3) + ((32 / 8 * 3) * 3) + (16 / 8);
+        const n_faces = reader.getUint32(80, true);
+        const expect = 80 + (32 / 8) + (n_faces * face_size);
+        
+        if (expect === reader.byteLength) {
+            return true;
+        }
+        
+        const fileLength = reader.byteLength;
+        if (80 + (32 / 8) + (n_faces * face_size) === fileLength) {
+            return true;
+        }
+        if (fileLength % 50 === 0) {
+            return false;
+        }
+        return true;
+    }
+    
+    parseBinary(data) {
+        const reader = new DataView(data);
+        const faces = reader.getUint32(80, true);
+        let r, g, b, hasColors = false, colors;
+        let defaultR, defaultG, defaultB, alpha;
+        
+        for (let index = 0; index < 80 - 10; index++) {
+            if ((reader.getUint32(index, false) == 0x434F4C4F /*COLO*/) &&
+                (reader.getUint8(index + 4) == 0x52 /*'R'*/) &&
+                (reader.getUint8(index + 5) == 0x3D /*'='*/)) {
+                hasColors = true;
+                colors = new Float32Array(faces * 3 * 3);
+                defaultR = reader.getUint8(index + 6) / 255;
+                defaultG = reader.getUint8(index + 7) / 255;
+                defaultB = reader.getUint8(index + 8) / 255;
+                alpha = reader.getUint8(index + 9) / 255;
+            }
+        }
+        
+        const dataOffset = 84;
+        const faceLength = 12 * 4 + 2;
+        
+        const geometry = new THREE.BufferGeometry();
+        const vertices = new Float32Array(faces * 3 * 3);
+        const normals = new Float32Array(faces * 3 * 3);
+        
+        for (let face = 0; face < faces; face++) {
+            const start = dataOffset + face * faceLength;
+            const normalX = reader.getFloat32(start, true);
+            const normalY = reader.getFloat32(start + 4, true);
+            const normalZ = reader.getFloat32(start + 8, true);
+            
+            if (hasColors) {
+                const packedColor = reader.getUint16(start + 48, true);
+                
+                if ((packedColor & 0x8000) === 0) {
+                    r = (packedColor & 0x1F) / 31;
+                    g = ((packedColor >> 5) & 0x1F) / 31;
+                    b = ((packedColor >> 10) & 0x1F) / 31;
+                } else {
+                    r = defaultR;
+                    g = defaultG;
+                    b = defaultB;
+                }
+            }
+            
+            for (let i = 1; i <= 3; i++) {
+                const vertexstart = start + i * 12;
+                const componentIdx = (face * 3 * 3) + ((i - 1) * 3);
+                
+                vertices[componentIdx] = reader.getFloat32(vertexstart, true);
+                vertices[componentIdx + 1] = reader.getFloat32(vertexstart + 4, true);
+                vertices[componentIdx + 2] = reader.getFloat32(vertexstart + 8, true);
+                
+                normals[componentIdx] = normalX;
+                normals[componentIdx + 1] = normalY;
+                normals[componentIdx + 2] = normalZ;
+                
+                if (hasColors) {
+                    colors[componentIdx] = r;
+                    colors[componentIdx + 1] = g;
+                    colors[componentIdx + 2] = b;
+                }
+            }
+        }
+        
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+        geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));
+        
+        if (hasColors) {
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            geometry.hasColors = true;
+            geometry.alpha = alpha;
+        }
+        
+        return geometry;
+    }
+    
+    parseASCII(data) {
+        const geometry = new THREE.BufferGeometry();
+        const patternSolid = /solid([\s\S]*?)endsolid/g;
+        const patternFace = /facet([\s\S]*?)endfacet/g;
+        const patternFloat = /[\s]+([+-]?(?:\d*)(?:\.\d*)?(?:[eE][+-]?\d+)?)(?=[\s]+|$)/g;
+        
+        const vertices = [];
+        const normals = [];
+        
+        const normal = new THREE.Vector3();
+        
+        let result;
+        let groupCount = 0;
+        let startVertex = 0;
+        let endVertex = 0;
+        
+        while ((result = patternSolid.exec(data)) !== null) {
+            startVertex = endVertex;
+            const solid = result[0];
+            
+            while ((result = patternFace.exec(solid)) !== null) {
+                let vertexCountPerFace = 0;
+                let normalCountPerFace = 0;
+                const text = result[0];
+                
+                while ((result = patternFloat.exec(text)) !== null) {
+                    if (normalCountPerFace < 3) {
+                        normal.setComponent(normalCountPerFace, parseFloat(result[1]));
+                        normalCountPerFace++;
+                    } else {
+                        vertices.push(parseFloat(result[1]));
+                        if (vertexCountPerFace % 3 === 0) {
+                            normals.push(normal.x, normal.y, normal.z);
+                        }
+                        vertexCountPerFace++;
+                    }
+                }
+            }
+            
+            endVertex = startVertex + (vertices.length - startVertex) / 3;
+            groupCount++;
+        }
+        
+        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+        geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+        
+        return geometry;
+    }
+    
+    ensureBinary(buf) {
+        if (typeof buf === 'string') {
+            const array_buffer = new Uint8Array(buf.length);
+            for (let i = 0; i < buf.length; i++) {
+                array_buffer[i] = buf.charCodeAt(i) & 0xff;
+            }
+            return array_buffer.buffer || array_buffer;
+        } else {
+            return buf;
+        }
+    }
+    
+    ensureString(buf) {
+        if (typeof buf !== 'string') {
+            return new TextDecoder().decode(buf);
+        } else {
+            return buf;
+        }
+    }
+}
+
+// Attach to THREE global object
+THREE.OrbitControls = OrbitControls;
+THREE.STLLoader = STLLoader;

public/js/three.min.js

@@ -0,0 +1 @@
+// Three.js will be loaded from CDN in HTML

public/js/three/STLLoader.js

@@ -0,0 +1,398 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	FileLoader,
+	Float32BufferAttribute,
+	Loader,
+	Vector3
+} from 'three';
+
+/**
+ * Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs.
+ *
+ * Supports both binary and ASCII encoded files, with automatic detection of type.
+ *
+ * The loader returns a non-indexed buffer geometry.
+ *
+ * Limitations:
+ *  Binary decoding supports "Magics" color format (http://en.wikipedia.org/wiki/STL_(file_format)#Color_in_binary_STL).
+ *  There is perhaps some question as to how valid it is to always assume little-endian-ness.
+ *  ASCII decoding assumes file is UTF-8.
+ *
+ * Usage:
+ *  const loader = new STLLoader();
+ *  loader.load( './models/stl/slotted_disk.stl', function ( geometry ) {
+ *    scene.add( new THREE.Mesh( geometry ) );
+ *  });
+ *
+ * For binary STLs geometry might contain colors for vertices. To use it:
+ *  // use the same code to load STL as above
+ *  if (geometry.hasColors) {
+ *    material = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: true });
+ *  } else { .... }
+ *  const mesh = new THREE.Mesh( geometry, material );
+ *
+ * For ASCII STLs containing multiple solids, each solid is assigned to a different group.
+ * Groups can be used to assign a different color by defining an array of materials with the same length of
+ * geometry.groups and passing it to the Mesh constructor:
+ *
+ * const mesh = new THREE.Mesh( geometry, material );
+ *
+ * For example:
+ *
+ *  const materials = [];
+ *  const nGeometryGroups = geometry.groups.length;
+ *
+ *  const colorMap = ...; // Some logic to index colors.
+ *
+ *  for (let i = 0; i < nGeometryGroups; i++) {
+ *
+ *		const material = new THREE.MeshPhongMaterial({
+ *			color: colorMap[i],
+ *			wireframe: false
+ *		});
+ *
+ *  }
+ *
+ *  materials.push(material);
+ *  const mesh = new THREE.Mesh(geometry, materials);
+ */
+
+
+class STLLoader extends Loader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		const scope = this;
+
+		const loader = new FileLoader( this.manager );
+		loader.setPath( this.path );
+		loader.setResponseType( 'arraybuffer' );
+		loader.setRequestHeader( this.requestHeader );
+		loader.setWithCredentials( this.withCredentials );
+
+		loader.load( url, function ( text ) {
+
+			try {
+
+				onLoad( scope.parse( text ) );
+
+			} catch ( e ) {
+
+				if ( onError ) {
+
+					onError( e );
+
+				} else {
+
+					console.error( e );
+
+				}
+
+				scope.manager.itemError( url );
+
+			}
+
+		}, onProgress, onError );
+
+	}
+
+	parse( data ) {
+
+		function isBinary( data ) {
+
+			const reader = new DataView( data );
+			const face_size = ( 32 / 8 * 3 ) + ( ( 32 / 8 * 3 ) * 3 ) + ( 16 / 8 );
+			const n_faces = reader.getUint32( 80, true );
+			const expect = 80 + ( 32 / 8 ) + ( n_faces * face_size );
+
+			if ( expect === reader.byteLength ) {
+
+				return true;
+
+			}
+
+			// An ASCII STL data must begin with 'solid ' as the first six bytes.
+			// However, ASCII STLs lacking the SPACE after the 'd' are known to be
+			// plentiful.  So, check the first 5 bytes for 'solid'.
+
+			// Several encodings, such as UTF-8, precede the text with up to 5 bytes:
+			// https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding
+			// Search for "solid" to start anywhere after those prefixes.
+
+			// US-ASCII ordinal values for 's', 'o', 'l', 'i', 'd'
+
+			const solid = [ 115, 111, 108, 105, 100 ];
+
+			for ( let off = 0; off < 5; off ++ ) {
+
+				// If "solid" text is matched to the current offset, declare it to be an ASCII STL.
+
+				if ( matchDataViewAt( solid, reader, off ) ) return false;
+
+			}
+
+			// Couldn't find "solid" text at the beginning; it is binary STL.
+
+			return true;
+
+		}
+
+		function matchDataViewAt( query, reader, offset ) {
+
+			// Check if each byte in query matches the corresponding byte from the current offset
+
+			for ( let i = 0, il = query.length; i < il; i ++ ) {
+
+				if ( query[ i ] !== reader.getUint8( offset + i ) ) return false;
+
+			}
+
+			return true;
+
+		}
+
+		function parseBinary( data ) {
+
+			const reader = new DataView( data );
+			const faces = reader.getUint32( 80, true );
+
+			let r, g, b, hasColors = false, colors;
+			let defaultR, defaultG, defaultB, alpha;
+
+			// process STL header
+			// check for default color in header ("COLOR=rgba" sequence).
+
+			for ( let index = 0; index < 80 - 10; index ++ ) {
+
+				if ( ( reader.getUint32( index, false ) == 0x434F4C4F /*COLO*/ ) &&
+					( reader.getUint8( index + 4 ) == 0x52 /*'R'*/ ) &&
+					( reader.getUint8( index + 5 ) == 0x3D /*'='*/ ) ) {
+
+					hasColors = true;
+					colors = new Float32Array( faces * 3 * 3 );
+
+					defaultR = reader.getUint8( index + 6 ) / 255;
+					defaultG = reader.getUint8( index + 7 ) / 255;
+					defaultB = reader.getUint8( index + 8 ) / 255;
+					alpha = reader.getUint8( index + 9 ) / 255;
+
+				}
+
+			}
+
+			const dataOffset = 84;
+			const faceLength = 12 * 4 + 2;
+
+			const geometry = new BufferGeometry();
+
+			const vertices = new Float32Array( faces * 3 * 3 );
+			const normals = new Float32Array( faces * 3 * 3 );
+
+			for ( let face = 0; face < faces; face ++ ) {
+
+				const start = dataOffset + face * faceLength;
+				const normalX = reader.getFloat32( start, true );
+				const normalY = reader.getFloat32( start + 4, true );
+				const normalZ = reader.getFloat32( start + 8, true );
+
+				if ( hasColors ) {
+
+					const packedColor = reader.getUint16( start + 48, true );
+
+					if ( ( packedColor & 0x8000 ) === 0 ) {
+
+						// facet has its own unique color
+
+						r = ( packedColor & 0x1F ) / 31;
+						g = ( ( packedColor >> 5 ) & 0x1F ) / 31;
+						b = ( ( packedColor >> 10 ) & 0x1F ) / 31;
+
+					} else {
+
+						r = defaultR;
+						g = defaultG;
+						b = defaultB;
+
+					}
+
+				}
+
+				for ( let i = 1; i <= 3; i ++ ) {
+
+					const vertexstart = start + i * 12;
+					const componentIdx = ( face * 3 * 3 ) + ( ( i - 1 ) * 3 );
+
+					vertices[ componentIdx ] = reader.getFloat32( vertexstart, true );
+					vertices[ componentIdx + 1 ] = reader.getFloat32( vertexstart + 4, true );
+					vertices[ componentIdx + 2 ] = reader.getFloat32( vertexstart + 8, true );
+
+					normals[ componentIdx ] = normalX;
+					normals[ componentIdx + 1 ] = normalY;
+					normals[ componentIdx + 2 ] = normalZ;
+
+					if ( hasColors ) {
+
+						colors[ componentIdx ] = r;
+						colors[ componentIdx + 1 ] = g;
+						colors[ componentIdx + 2 ] = b;
+
+					}
+
+				}
+
+			}
+
+			geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
+			geometry.setAttribute( 'normal', new BufferAttribute( normals, 3 ) );
+
+			if ( hasColors ) {
+
+				geometry.setAttribute( 'color', new BufferAttribute( colors, 3 ) );
+				geometry.hasColors = true;
+				geometry.alpha = alpha;
+
+			}
+
+			return geometry;
+
+		}
+
+		function parseASCII( data ) {
+
+			const geometry = new BufferGeometry();
+			const patternSolid = /solid([\s\S]*?)endsolid/g;
+			const patternFace = /facet([\s\S]*?)endfacet/g;
+			let faceCounter = 0;
+
+			const patternFloat = /[\s]+([+-]?(?:\d*)(?:\.\d*)?(?:[eE][+-]?\d+)?)/.source;
+			const patternVertex = new RegExp( 'vertex' + patternFloat + patternFloat + patternFloat, 'g' );
+			const patternNormal = new RegExp( 'normal' + patternFloat + patternFloat + patternFloat, 'g' );
+
+			const vertices = [];
+			const normals = [];
+
+			const normal = new Vector3();
+
+			let result;
+
+			let groupCount = 0;
+			let startVertex = 0;
+			let endVertex = 0;
+
+			while ( ( result = patternSolid.exec( data ) ) !== null ) {
+
+				startVertex = endVertex;
+
+				const solid = result[ 0 ];
+
+				while ( ( result = patternFace.exec( solid ) ) !== null ) {
+
+					let vertexCountPerFace = 0;
+					let normalCountPerFace = 0;
+
+					const text = result[ 0 ];
+
+					while ( ( result = patternNormal.exec( text ) ) !== null ) {
+
+						normal.x = parseFloat( result[ 1 ] );
+						normal.y = parseFloat( result[ 2 ] );
+						normal.z = parseFloat( result[ 3 ] );
+						normalCountPerFace ++;
+
+					}
+
+					while ( ( result = patternVertex.exec( text ) ) !== null ) {
+
+						vertices.push( parseFloat( result[ 1 ] ), parseFloat( result[ 2 ] ), parseFloat( result[ 3 ] ) );
+						normals.push( normal.x, normal.y, normal.z );
+						vertexCountPerFace ++;
+						endVertex ++;
+
+					}
+
+					// every face have to own ONE valid normal
+
+					if ( normalCountPerFace !== 1 ) {
+
+						console.error( 'THREE.STLLoader: Something isn\'t right with the normal of face number ' + faceCounter );
+
+					}
+
+					// each face have to own THREE valid vertices
+
+					if ( vertexCountPerFace !== 3 ) {
+
+						console.error( 'THREE.STLLoader: Something isn\'t right with the vertices of face number ' + faceCounter );
+
+					}
+
+					faceCounter ++;
+
+				}
+
+				const start = startVertex;
+				const count = endVertex - startVertex;
+
+				geometry.addGroup( start, count, groupCount );
+				groupCount ++;
+
+			}
+
+			geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+			geometry.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
+
+			return geometry;
+
+		}
+
+		function ensureString( buffer ) {
+
+			if ( typeof buffer !== 'string' ) {
+
+				return new TextDecoder().decode( buffer );
+
+			}
+
+			return buffer;
+
+		}
+
+		function ensureBinary( buffer ) {
+
+			if ( typeof buffer === 'string' ) {
+
+				const array_buffer = new Uint8Array( buffer.length );
+				for ( let i = 0; i < buffer.length; i ++ ) {
+
+					array_buffer[ i ] = buffer.charCodeAt( i ) & 0xff; // implicitly assumes little-endian
+
+				}
+
+				return array_buffer.buffer || array_buffer;
+
+			} else {
+
+				return buffer;
+
+			}
+
+		}
+
+		// start
+
+		const binData = ensureBinary( data );
+
+		return isBinary( binData ) ? parseBinary( binData ) : parseASCII( ensureString( data ) );
+
+	}
+
+}
+
+export { STLLoader };

public/test-three.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Three.js Test</title>
+    <style>
+        body { margin: 0; background: #000; }
+        #test { width: 100vw; height: 100vh; }
+        #debug { position: absolute; top: 10px; left: 10px; color: white; font-family: monospace; z-index: 100; }
+    </style>
+</head>
+<body>
+    <div id="debug">Loading...</div>
+    <div id="test"></div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
+    <script src="js/three-setup.js"></script>
+    <script>
+        const debug = document.getElementById('debug');
+        
+        function log(msg) {
+            debug.innerHTML += msg + '<br>';
+            console.log(msg);
+        }
+        
+        log('Three.js loaded: ' + (typeof THREE !== 'undefined'));
+        log('STLLoader available: ' + (typeof THREE.STLLoader !== 'undefined'));
+        log('OrbitControls available: ' + (typeof THREE.OrbitControls !== 'undefined'));
+        
+        if (typeof THREE !== 'undefined') {
+            try {
+                // Create a simple scene with a cube
+                const scene = new THREE.Scene();
+                const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+                const renderer = new THREE.WebGLRenderer();
+                
+                renderer.setSize(window.innerWidth, window.innerHeight);
+                document.getElementById('test').appendChild(renderer.domElement);
+                
+                const geometry = new THREE.BoxGeometry();
+                const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+                const cube = new THREE.Mesh(geometry, material);
+                scene.add(cube);
+                
+                camera.position.z = 5;
+                
+                function animate() {
+                    requestAnimationFrame(animate);
+                    cube.rotation.x += 0.01;
+                    cube.rotation.y += 0.01;
+                    renderer.render(scene, camera);
+                }
+                
+                animate();
+                log('Three.js scene created successfully!');
+                
+                // Test STL Loader
+                if (typeof THREE.STLLoader !== 'undefined') {
+                    log('Testing STLLoader...');
+                    const loader = new THREE.STLLoader();
+                    log('STLLoader instance created successfully!');
+                } else {
+                    log('ERROR: STLLoader not available');
+                }
+                
+            } catch (error) {
+                log('ERROR: ' + error.message);
+            }
+        } else {
+            log('ERROR: Three.js not loaded');
+        }
+    </script>
+</body>
+</html>

sample-cube.stl

@@ -0,0 +1,86 @@
+solid OpenSCAD_Model
+  facet normal -1 0 0
+    outer loop
+      vertex 0 0 0
+      vertex 0 10 10
+      vertex 0 10 0
+    endloop
+  endfacet
+  facet normal -1 -0 0
+    outer loop
+      vertex 0 0 0
+      vertex 0 0 10
+      vertex 0 10 10
+    endloop
+  endfacet
+  facet normal 0 0 1
+    outer loop
+      vertex 0 0 10
+      vertex 10 10 10
+      vertex 0 10 10
+    endloop
+  endfacet
+  facet normal 0 0 1
+    outer loop
+      vertex 0 0 10
+      vertex 10 0 10
+      vertex 10 10 10
+    endloop
+  endfacet
+  facet normal 1 -0 0
+    outer loop
+      vertex 10 0 0
+      vertex 10 10 0
+      vertex 10 10 10
+    endloop
+  endfacet
+  facet normal 1 0 0
+    outer loop
+      vertex 10 0 0
+      vertex 10 10 10
+      vertex 10 0 10
+    endloop
+  endfacet
+  facet normal 0 0 -1
+    outer loop
+      vertex 0 0 0
+      vertex 10 10 0
+      vertex 10 0 0
+    endloop
+  endfacet
+  facet normal 0 0 -1
+    outer loop
+      vertex 0 0 0
+      vertex 0 10 0
+      vertex 10 10 0
+    endloop
+  endfacet
+  facet normal 0 1 0
+    outer loop
+      vertex 0 10 0
+      vertex 0 10 10
+      vertex 10 10 10
+    endloop
+  endfacet
+  facet normal 0 1 0
+    outer loop
+      vertex 0 10 0
+      vertex 10 10 10
+      vertex 10 10 0
+    endloop
+  endfacet
+  facet normal 0 -1 0
+    outer loop
+      vertex 0 0 0
+      vertex 10 0 0
+      vertex 10 0 10
+    endloop
+  endfacet
+  facet normal 0 -1 0
+    outer loop
+      vertex 0 0 0
+      vertex 10 0 10
+      vertex 0 0 10
+    endloop
+  endfacet
+endsolid OpenSCAD_Model

schema.sql

@@ -0,0 +1,25 @@
+CREATE TABLE IF NOT EXISTS stl_files (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    filename VARCHAR(255) NOT NULL,
+    original_name VARCHAR(255) NOT NULL,
+    file_path VARCHAR(500) NOT NULL UNIQUE,
+    file_size INTEGER NOT NULL,
+    upload_date DATETIME DEFAULT CURRENT_TIMESTAMP,
+    last_modified DATETIME DEFAULT CURRENT_TIMESTAMP,
+    description TEXT,
+    tags VARCHAR(500),
+    print_settings JSON,
+    dimensions JSON,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_filename ON stl_files(filename);
+CREATE INDEX IF NOT EXISTS idx_upload_date ON stl_files(upload_date);
+CREATE INDEX IF NOT EXISTS idx_tags ON stl_files(tags);
+
+CREATE TRIGGER IF NOT EXISTS update_stl_files_timestamp 
+    AFTER UPDATE ON stl_files
+BEGIN
+    UPDATE stl_files SET updated_at = CURRENT_TIMESTAMP WHERE id = NEW.id;
+END;

server.js

@@ -0,0 +1,365 @@
+const express = require('express');
+const multer = require('multer');
+const cors = require('cors');
+const path = require('path');
+const fs = require('fs').promises;
+const { v4: uuidv4 } = require('uuid');
+const { validationResult } = require('express-validator');
+
+// Import custom modules
+const config = require('./config/config');
+const logger = require('./config/logger');
+const { 
+    apiLimiter, 
+    uploadLimiter, 
+    securityHeaders, 
+    fileValidation, 
+    fileIdValidation, 
+    searchValidation 
+} = require('./config/security');
+const STLDatabase = require('./database');
+
+const app = express();
+
+// Security middleware
+app.use(securityHeaders);
+app.use(cors({
+    origin: config.nodeEnv === 'production' ? false : true,
+    credentials: true
+}));
+
+// Rate limiting
+app.use('/api/', apiLimiter);
+app.use('/api/upload', uploadLimiter);
+
+// Body parsing
+app.use(express.json({ limit: '10mb' }));
+app.use(express.urlencoded({ extended: true, limit: '10mb' }));
+
+// Static files
+app.use(express.static('public'));
+
+const db = new STLDatabase(config.database.path, config.database.uploadDir);
+
+// Enhanced file validation
+const validateSTLFile = async (buffer) => {
+    // Check if it's a valid STL file by looking for STL signatures
+    const text = buffer.toString('utf8', 0, 80);
+    const isBinarySTL = buffer.length > 80 && buffer.readUInt32LE(80) > 0;
+    const isAsciiSTL = text.toLowerCase().includes('solid');
+    
+    return isBinarySTL || isAsciiSTL;
+};
+
+const storage = multer.diskStorage({
+    destination: async (req, file, cb) => {
+        const uploadPath = path.join(__dirname, config.upload.destination);
+        try {
+            await fs.access(uploadPath);
+        } catch {
+            await fs.mkdir(uploadPath, { recursive: true });
+        }
+        cb(null, uploadPath);
+    },
+    filename: (req, file, cb) => {
+        // Sanitize filename
+        const sanitizedName = file.originalname.replace(/[^a-zA-Z0-9.-]/g, '_');
+        const uniqueName = `${uuidv4()}-${sanitizedName}`;
+        cb(null, uniqueName);
+    }
+});
+
+const fileFilter = async (req, file, cb) => {
+    const fileExt = path.extname(file.originalname).toLowerCase();
+    
+    if (!config.upload.allowedExtensions.includes(fileExt)) {
+        return cb(new Error('Only STL files are allowed'), false);
+    }
+    
+    // Additional MIME type check
+    const allowedMimeTypes = ['application/octet-stream', 'application/sla', 'text/plain'];
+    if (file.mimetype && !allowedMimeTypes.includes(file.mimetype)) {
+        return cb(new Error('Invalid file type'), false);
+    }
+    
+    cb(null, true);
+};
+
+const upload = multer({
+    storage: storage,
+    fileFilter: fileFilter,
+    limits: {
+        fileSize: config.upload.maxFileSize,
+        files: config.upload.maxFiles
+    }
+});
+
+// Validation helper
+const handleValidationErrors = (req, res, next) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+        return res.status(400).json({
+            success: false,
+            error: 'Validation failed',
+            details: errors.array()
+        });
+    }
+    next();
+};
+
+app.post('/api/upload', fileValidation, handleValidationErrors, upload.single('stlFile'), async (req, res) => {
+    try {
+        if (!req.file) {
+            return res.status(400).json({ 
+                success: false,
+                error: 'No file uploaded' 
+            });
+        }
+
+        // Additional file content validation
+        const fileBuffer = await fs.readFile(req.file.path);
+        if (!await validateSTLFile(fileBuffer)) {
+            await fs.unlink(req.file.path);
+            return res.status(400).json({
+                success: false,
+                error: 'Invalid STL file format'
+            });
+        }
+
+        const fileData = {
+            filename: req.file.filename,
+            originalName: req.file.originalname,
+            filePath: req.file.path,
+            fileSize: req.file.size,
+            description: req.body.description || null,
+            tags: req.body.tags || null,
+            printSettings: req.body.printSettings ? JSON.parse(req.body.printSettings) : null,
+            dimensions: req.body.dimensions ? JSON.parse(req.body.dimensions) : null
+        };
+
+        const fileId = await db.addSTLFile(fileData);
+        const savedFile = await db.getSTLFile(fileId);
+
+        logger.info('File uploaded successfully', { 
+            fileId, 
+            filename: req.file.originalname,
+            size: req.file.size,
+            ip: req.ip 
+        });
+
+        res.json({
+            success: true,
+            message: 'File uploaded successfully',
+            file: savedFile
+        });
+    } catch (error) {
+        logger.error('Upload error', { error: error.message, stack: error.stack });
+        
+        if (req.file) {
+            try {
+                await fs.unlink(req.file.path);
+            } catch (unlinkError) {
+                logger.error('Error cleaning up file', { error: unlinkError.message });
+            }
+        }
+        
+        res.status(500).json({ 
+            success: false,
+            error: 'Upload failed',
+            message: config.nodeEnv === 'development' ? error.message : 'Internal server error'
+        });
+    }
+});
+
+app.get('/api/files', searchValidation, handleValidationErrors, async (req, res) => {
+    try {
+        const limit = Math.min(parseInt(req.query.limit) || 50, 100);
+        const offset = Math.max(parseInt(req.query.offset) || 0, 0);
+        const search = req.query.search;
+
+        let files;
+        if (search) {
+            files = await db.searchSTLFiles(search);
+        } else {
+            files = await db.getAllSTLFiles(limit, offset);
+        }
+
+        res.json({
+            success: true,
+            files: files,
+            pagination: {
+                limit: limit,
+                offset: offset,
+                hasMore: files.length === limit
+            }
+        });
+    } catch (error) {
+        logger.error('Get files error', { error: error.message, stack: error.stack });
+        res.status(500).json({ 
+            success: false,
+            error: 'Failed to retrieve files',
+            message: config.nodeEnv === 'development' ? error.message : 'Internal server error'
+        });
+    }
+});
+
+app.get('/api/files/:id', fileIdValidation, handleValidationErrors, async (req, res) => {
+    try {
+        const fileId = parseInt(req.params.id);
+        const file = await db.getSTLFile(fileId);
+
+        if (!file) {
+            return res.status(404).json({ 
+                success: false,
+                error: 'File not found' 
+            });
+        }
+
+        res.json({
+            success: true,
+            file: file
+        });
+    } catch (error) {
+        logger.error('Get file error', { error: error.message, fileId: req.params.id });
+        res.status(500).json({ 
+            success: false,
+            error: 'Failed to retrieve file',
+            message: config.nodeEnv === 'development' ? error.message : 'Internal server error'
+        });
+    }
+});
+
+app.put('/api/files/:id', async (req, res) => {
+    try {
+        const fileId = parseInt(req.params.id);
+        const updates = {};
+
+        if (req.body.description !== undefined) updates.description = req.body.description;
+        if (req.body.tags !== undefined) updates.tags = req.body.tags;
+        if (req.body.printSettings !== undefined) updates.print_settings = req.body.printSettings;
+        if (req.body.dimensions !== undefined) updates.dimensions = req.body.dimensions;
+
+        const updated = await db.updateSTLFile(fileId, updates);
+
+        if (!updated) {
+            return res.status(404).json({ error: 'File not found' });
+        }
+
+        const updatedFile = await db.getSTLFile(fileId);
+        res.json({
+            success: true,
+            message: 'File updated successfully',
+            file: updatedFile
+        });
+    } catch (error) {
+        console.error('Update file error:', error);
+        res.status(500).json({ 
+            error: 'Failed to update file',
+            message: error.message 
+        });
+    }
+});
+
+app.delete('/api/files/:id', async (req, res) => {
+    try {
+        const fileId = parseInt(req.params.id);
+        const deleted = await db.deleteSTLFile(fileId);
+
+        if (!deleted) {
+            return res.status(404).json({ error: 'File not found' });
+        }
+
+        res.json({
+            success: true,
+            message: 'File deleted successfully'
+        });
+    } catch (error) {
+        console.error('Delete file error:', error);
+        res.status(500).json({ 
+            error: 'Failed to delete file',
+            message: error.message 
+        });
+    }
+});
+
+app.get('/api/files/:id/download', async (req, res) => {
+    try {
+        const fileId = parseInt(req.params.id);
+        const file = await db.getSTLFile(fileId);
+
+        if (!file) {
+            return res.status(404).json({ error: 'File not found' });
+        }
+
+        try {
+            await fs.access(file.file_path);
+        } catch {
+            return res.status(404).json({ error: 'Physical file not found' });
+        }
+
+        res.download(file.file_path, file.original_name);
+    } catch (error) {
+        console.error('Download error:', error);
+        res.status(500).json({ 
+            error: 'Failed to download file',
+            message: error.message 
+        });
+    }
+});
+
+app.use('/uploads', express.static(path.join(__dirname, 'uploads'), {
+    setHeaders: (res, filePath) => {
+        if (path.extname(filePath).toLowerCase() === '.stl') {
+            res.setHeader('Content-Type', 'application/octet-stream');
+            res.setHeader('Access-Control-Allow-Origin', '*');
+        }
+    }
+}));
+
+app.use((error, req, res, next) => {
+    if (error instanceof multer.MulterError) {
+        if (error.code === 'LIMIT_FILE_SIZE') {
+            return res.status(400).json({ error: 'File too large (max 100MB)' });
+        }
+    }
+    
+    console.error('Unhandled error:', error);
+    res.status(500).json({ 
+        error: 'Internal server error',
+        message: error.message 
+    });
+});
+
+async function startServer() {
+    try {
+        await db.initialize();
+        logger.info('Database initialized successfully');
+        
+        app.listen(config.port, config.host, () => {
+            logger.info('STL Storage server started', {
+                host: config.host,
+                port: config.port,
+                nodeEnv: config.nodeEnv
+            });
+            console.log(`🚀 STL Storage server running on ${config.host}:${config.port}`);
+            console.log(`📁 Upload endpoint: http://${config.host}:${config.port}/api/upload`);
+            console.log(`🔍 Browse files: http://${config.host}:${config.port}/api/files`);
+        });
+    } catch (error) {
+        logger.error('Failed to start server', { error: error.message, stack: error.stack });
+        console.error('❌ Failed to start server:', error);
+        process.exit(1);
+    }
+}
+
+process.on('SIGINT', async () => {
+    console.log('\n🛑 Shutting down server...');
+    await db.close();
+    process.exit(0);
+});
+
+if (require.main === module) {
+    startServer();
+}
+
+module.exports = app;

server.log

@@ -0,0 +1,30 @@
+✅ Database initialized
+🚀 STL Storage server running on 0.0.0.0:3000
+📁 Upload endpoint: http://0.0.0.0:3000/api/upload
+🔍 Browse files: http://0.0.0.0:3000/api/files
+Unhandled error: Error: Only STL files are allowed
+    at fileFilter (/home/kris/testing/server.js:41:12)
+    at wrappedFileFilter (/home/kris/testing/node_modules/multer/index.js:44:7)
+    at Multipart.<anonymous> (/home/kris/testing/node_modules/multer/lib/make-middleware.js:109:7)
+    at Multipart.emit (node:events:518:28)
+    at HeaderParser.cb (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:358:14)
+    at HeaderParser.push (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:162:20)
+    at SBMH.ssCb [as _cb] (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:394:37)
+    at feed (/home/kris/testing/node_modules/streamsearch/lib/sbmh.js:248:10)
+    at SBMH.push (/home/kris/testing/node_modules/streamsearch/lib/sbmh.js:104:16)
+    at Multipart._write (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:567:19) {
+  storageErrors: []
+}
+Unhandled error: Error: Only STL files are allowed
+    at fileFilter (/home/kris/testing/server.js:41:12)
+    at wrappedFileFilter (/home/kris/testing/node_modules/multer/index.js:44:7)
+    at Multipart.<anonymous> (/home/kris/testing/node_modules/multer/lib/make-middleware.js:109:7)
+    at Multipart.emit (node:events:518:28)
+    at HeaderParser.cb (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:358:14)
+    at HeaderParser.push (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:162:20)
+    at SBMH.ssCb [as _cb] (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:394:37)
+    at feed (/home/kris/testing/node_modules/streamsearch/lib/sbmh.js:248:10)
+    at SBMH.push (/home/kris/testing/node_modules/streamsearch/lib/sbmh.js:104:16)
+    at Multipart._write (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:567:19) {
+  storageErrors: []
+}

start.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# STL Storage Application Startup Script
+set -e
+
+echo "🚀 Starting STL Storage Application..."
+
+# Initialize database if it doesn't exist
+if [ ! -f "stl_storage.db" ]; then
+    echo "📦 Initializing database..."
+    node init-db.js
+else
+    echo "✅ Database already exists"
+fi
+
+# Create uploads directory if it doesn't exist
+mkdir -p uploads/stl uploads/thumbnails
+
+# Start the application
+echo "🌐 Starting web server..."
+exec node server.js