@holoscript/core 8.0.8 → 8.0.10

package/dist/tools/index.cjs

@@ -0,0 +1,3631 @@
+'use strict';
+
+var chunkZHPMP447_cjs = require('../chunk-ZHPMP447.cjs');
+var readline = require('readline');
+var MaterialLibrary = require('@holoscript/engine/rendering/MaterialLibrary');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var readline__namespace = /*#__PURE__*/_interopNamespace(readline);
+
+var ErrorFormatter = class {
+  /**
+   * Format error with source context and helpful visual indicators
+   *
+   * @param error - The error object containing message, location, and suggestion
+   * @param sourceCode - Optional source code to show contextual error location
+   * @returns Formatted error string with visual cues and source context
+   *
+   * @example
+   * ```typescript
+   * const formatted = ErrorFormatter.formatError({
+   *   message: "Unexpected token",
+   *   location: { line: 5, column: 12 },
+   *   suggestion: "Try adding a semicolon"
+   * }, sourceCode);
+   * ```
+   */
+  static formatError(error, sourceCode) {
+    const { message, location, suggestion, token: _token } = error;
+    let formatted = `
+\u274C Error: ${message}
+`;
+    if (location) {
+      formatted += `   at line ${location.line}, column ${location.column}
+`;
+      if (sourceCode) {
+        const lines = sourceCode.split("\n");
+        const errorLine = lines[location.line - 1];
+        if (errorLine) {
+          formatted += `
+   ${location.line} | ${errorLine}
+`;
+          formatted += `     | ${" ".repeat(location.column - 1)}^
+`;
+        }
+      }
+    }
+    if (suggestion) {
+      formatted += `
+\u{1F4A1} Suggestion: ${suggestion}
+`;
+    }
+    return formatted;
+  }
+  /**
+   * Format multiple errors with summary and limit display to first 5
+   *
+   * @param errors - Array of error objects to format
+   * @returns Formatted string with error count summary and individual error details
+   */
+  static formatErrors(errors) {
+    if (errors.length === 0) return "";
+    let formatted = `
+\u274C Found ${errors.length} error${errors.length !== 1 ? "s" : ""}:
+`;
+    for (let i = 0; i < Math.min(errors.length, 5); i++) {
+      formatted += this.formatError(errors[i]);
+    }
+    if (errors.length > 5) {
+      formatted += `
+... and ${errors.length - 5} more error${errors.length - 5 !== 1 ? "s" : ""}
+`;
+    }
+    return formatted;
+  }
+  /**
+   * Format success message
+   */
+  static formatSuccess(message, details) {
+    let formatted = `
+\u2705 ${message}
+`;
+    if (details) {
+      if (typeof details === "object") {
+        formatted += JSON.stringify(details, null, 2) + "\n";
+      } else {
+        formatted += `${details}
+`;
+      }
+    }
+    return formatted;
+  }
+  /**
+   * Format help text
+   */
+  static formatHelp() {
+    return `
+HoloScript+ REPL v1.0.0
+\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501
+
+Commands:
+  help          - Show this help message
+  clear         - Clear the screen
+  vars          - List all variables
+  types         - List all types
+  profile       - Show performance profile
+  exit          - Exit REPL
+
+Shortcuts:
+  .create orb#name    - Create orb
+  .position x y z     - Set position
+  .property key val   - Set property
+
+Examples:
+  > orb#myOrb { position: [0, 0, 0] }
+  > myOrb.position = [1, 1, 1]
+  > match state { "idle" => { ... } }
+
+For more info, visit: https://github.com/brianonbased-dev/holoscript
+`.trim();
+  }
+};
+var HoloScriptREPL = class {
+  constructor(parser, runtime) {
+    this.variables = /* @__PURE__ */ new Map();
+    this.types = /* @__PURE__ */ new Map();
+    this.history = [];
+    this.parser = parser;
+    this.runtime = runtime;
+    this.rl = readline__namespace.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+      history: this.history,
+      historySize: 100
+    });
+  }
+  /**
+   * Start REPL
+   */
+  async start() {
+    console.debug("\n\u{1F97D} HoloScript+ REPL v1.0.0");
+    console.debug('Type "help" for commands, "exit" to quit\n');
+    await this.repl();
+  }
+  /**
+   * Main REPL loop
+   */
+  async repl() {
+    const prompt = () => {
+      this.rl.question("> ", async (input) => {
+        try {
+          const trimmed = input.trim();
+          if (!trimmed) {
+            prompt();
+            return;
+          }
+          if (trimmed.startsWith(".")) {
+            this.handleCommand(trimmed);
+            prompt();
+            return;
+          }
+          switch (trimmed.toLowerCase()) {
+            case "help":
+              console.debug(ErrorFormatter.formatHelp());
+              prompt();
+              return;
+            case "clear":
+              console.clear();
+              prompt();
+              return;
+            case "vars":
+              this.showVariables();
+              prompt();
+              return;
+            case "types":
+              this.showTypes();
+              prompt();
+              return;
+            case "profile":
+              this.showProfile();
+              prompt();
+              return;
+            case "exit":
+              this.rl.close();
+              console.debug("\n\u{1F44B} Goodbye!\n");
+              return;
+          }
+          const result = await this.evaluate(trimmed);
+          if (result !== void 0 && result !== null) {
+            this.displayResult(result);
+          }
+        } catch (error) {
+          console.error(ErrorFormatter.formatError(error));
+        }
+        prompt();
+      });
+    };
+    prompt();
+  }
+  /**
+   * Handle dot commands
+   */
+  handleCommand(command) {
+    const parts = command.slice(1).split(" ");
+    const cmd = parts[0];
+    switch (cmd) {
+      case "create":
+        console.debug(`Creating: ${parts.slice(1).join(" ")}`);
+        break;
+      case "position":
+        console.debug(`Position: x=${parts[1]}, y=${parts[2]}, z=${parts[3]}`);
+        break;
+      case "property":
+        console.debug(`Property: ${parts[1]} = ${parts[2]}`);
+        break;
+      default:
+        console.debug(`Unknown command: .${cmd}`);
+    }
+  }
+  /**
+   * Evaluate HoloScript code
+   */
+  async evaluate(code) {
+    try {
+      const parseResult = this.parser.parse(code);
+      if (parseResult.errors && parseResult.errors.length > 0) {
+        throw {
+          message: "Parse error",
+          errors: parseResult.errors
+        };
+      }
+      const result = await this.runtime.execute(parseResult.ast);
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  }
+  /**
+   * Show variables
+   */
+  showVariables() {
+    if (this.variables.size === 0) {
+      console.debug("No variables defined");
+      return;
+    }
+    console.debug("\n\u{1F4E6} Variables:");
+    for (const [name, value] of this.variables) {
+      console.debug(`  ${name}: ${this.formatValue(value)}`);
+    }
+    console.debug();
+  }
+  /**
+   * Show types
+   */
+  showTypes() {
+    if (this.types.size === 0) {
+      console.debug("No custom types defined");
+      return;
+    }
+    console.debug("\n\u{1F3F7}\uFE0F  Types:");
+    for (const [name, type] of this.types) {
+      console.debug(`  ${name}: ${JSON.stringify(type)}`);
+    }
+    console.debug();
+  }
+  /**
+   * Show performance profile
+   */
+  showProfile() {
+    console.debug("\n\u23F1\uFE0F  Performance Profile:");
+    console.debug("  (Profiling data would be displayed here)");
+    console.debug();
+  }
+  /**
+   * Display result
+   */
+  displayResult(result) {
+    const formatted = this.formatValue(result);
+    console.debug(`=> ${formatted}`);
+  }
+  /**
+   * Format value for display
+   */
+  formatValue(value) {
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    if (typeof value === "string") return `"${value}"`;
+    if (typeof value === "number") return `${value}`;
+    if (typeof value === "boolean") return `${value}`;
+    if (Array.isArray(value)) {
+      return `[ ${value.map((v) => this.formatValue(v)).join(", ")} ]`;
+    }
+    if (typeof value === "object" && value !== null) {
+      const pairs = Object.entries(value).map(([k, v]) => `${k}: ${this.formatValue(v)}`).join(", ");
+      return `{ ${pairs} }`;
+    }
+    return String(value);
+  }
+};
+async function startREPL(parser, runtime) {
+  const repl = new HoloScriptREPL(parser, runtime);
+  await repl.start();
+}
+var HotReloadWatcher = class {
+  constructor() {
+    this.watchers = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Watch file for changes
+   */
+  watch(filePath, callback) {
+    const fs = chunkZHPMP447_cjs.__require("fs");
+    fs.watchFile(filePath, { interval: 1e3 }, async () => {
+      try {
+        console.debug(`
+\u{1F504} Reloading: ${filePath}`);
+        await callback();
+        console.debug("\u2705 Reload complete\n");
+      } catch (error) {
+        console.error(ErrorFormatter.formatError(error));
+      }
+    });
+    this.watchers.set(filePath, true);
+  }
+  /**
+   * Stop watching
+   */
+  unwatch(filePath) {
+    const fs = chunkZHPMP447_cjs.__require("fs");
+    fs.unwatchFile(filePath);
+    this.watchers.delete(filePath);
+  }
+  /**
+   * Stop all watchers
+   */
+  clear() {
+    const fs = chunkZHPMP447_cjs.__require("fs");
+    for (const filePath of this.watchers.keys()) {
+      fs.unwatchFile(filePath);
+    }
+    this.watchers.clear();
+  }
+};
+var SourceMapGenerator = class {
+  constructor() {
+    this.mappings = [];
+  }
+  /**
+   * Add mapping
+   */
+  addMapping(generatedLine, generatedColumn, sourceLine, sourceColumn, name) {
+    this.mappings.push({
+      generatedLine,
+      generatedColumn,
+      sourceLine,
+      sourceColumn,
+      name
+    });
+  }
+  /**
+   * Generate source map
+   */
+  generate(sourceFile, generatedFile) {
+    return {
+      version: 3,
+      file: generatedFile,
+      sourceRoot: "",
+      sources: [sourceFile],
+      sourcesContent: [],
+      mappings: this.encodeMappings(),
+      names: []
+    };
+  }
+  /**
+   * Encode mappings in VLQ format
+   */
+  encodeMappings() {
+    return this.mappings.map((m) => `${m.generatedLine}:${m.generatedColumn}->${m.sourceLine}:${m.sourceColumn}`).join(";");
+  }
+};
+var _MaterialEditor = class _MaterialEditor {
+  constructor(config = {}) {
+    this.materials = /* @__PURE__ */ new Map();
+    this.currentMaterialId = null;
+    this.container = null;
+    this.previewCanvas = null;
+    this.previewRenderer = null;
+    // THREE.WebGLRenderer
+    this.previewScene = null;
+    // THREE.Scene
+    this.previewCamera = null;
+    // THREE.Camera
+    this.previewSphere = null;
+    this.config = {
+      container: config.container,
+      livePreview: config.livePreview ?? true,
+      previewResolution: config.previewResolution ?? 512,
+      autoSave: config.autoSave ?? true,
+      debug: config.debug ?? false,
+      theme: config.theme ?? "dark"
+    };
+    if (this.config.container) {
+      this.initializeUI();
+    }
+    if (this.config.livePreview) {
+      this.initializePreview();
+    }
+    if (this.config.debug) {
+      console.debug("[MaterialEditor] Initialized", this.config);
+    }
+  }
+  /**
+   * Initialize editor UI
+   */
+  initializeUI() {
+    if (!this.config.container) return;
+    this.container = this.config.container;
+    this.container.innerHTML = this.generateEditorHTML();
+    this.previewCanvas = this.container.querySelector(
+      "#material-preview-canvas"
+    );
+    this.attachEventListeners();
+    this.updatePresetsList();
+    if (this.config.debug) {
+      console.debug("[MaterialEditor] UI initialized");
+    }
+  }
+  /**
+   * Generate editor HTML
+   */
+  generateEditorHTML() {
+    const theme = this.config.theme === "dark" ? "material-editor-dark" : "material-editor-light";
+    return `
+      <div class="material-editor ${theme}">
+        <!-- Preview Panel -->
+        <div class="preview-panel">
+          <div class="panel-header">
+            <h3>Preview</h3>
+            <div class="preview-controls">
+              <button class="preview-btn" data-action="rotate" title="Rotate">\u{1F504}</button>
+              <button class="preview-btn" data-action="reset" title="Reset View">\u21BB</button>
+            </div>
+          </div>
+          <div class="preview-content">
+            <canvas id="material-preview-canvas"></canvas>
+          </div>
+        </div>
+
+        <!-- Properties Panel -->
+        <div class="properties-panel">
+          <div class="panel-header">
+            <h3>Material Properties</h3>
+          </div>
+          <div class="properties-content">
+            <div class="property-group">
+              <label>Material Type</label>
+              <select id="material-type" class="property-select">
+                <option value="standard">Standard</option>
+                <option value="physical">Physical</option>
+                <option value="metal">Metal</option>
+                <option value="glass">Glass</option>
+                <option value="emissive">Emissive</option>
+                <option value="toon">Toon</option>
+              </select>
+            </div>
+
+            <div class="property-group">
+              <label>
+                Base Color
+                <span class="value-display" id="color-value">#888888</span>
+              </label>
+              <input type="color" id="base-color" class="color-input" value="#888888">
+            </div>
+
+            <div class="property-group">
+              <label>
+                Metalness
+                <span class="value-display" id="metalness-value">0.5</span>
+              </label>
+              <input type="range" id="metalness" min="0" max="1" step="0.01" value="0.5" class="property-slider">
+            </div>
+
+            <div class="property-group">
+              <label>
+                Roughness
+                <span class="value-display" id="roughness-value">0.5</span>
+              </label>
+              <input type="range" id="roughness" min="0" max="1" step="0.01" value="0.5" class="property-slider">
+            </div>
+
+            <div class="property-group">
+              <label>
+                Opacity
+                <span class="value-display" id="opacity-value">1.0</span>
+              </label>
+              <input type="range" id="opacity" min="0" max="1" step="0.01" value="1.0" class="property-slider">
+            </div>
+
+            <div class="property-group" id="emissive-group" style="display: none;">
+              <label>
+                Emissive Color
+                <span class="value-display" id="emissive-color-value">#00ff00</span>
+              </label>
+              <input type="color" id="emissive-color" class="color-input" value="#00ff00">
+            </div>
+
+            <div class="property-group" id="emissive-intensity-group" style="display: none;">
+              <label>
+                Emissive Intensity
+                <span class="value-display" id="emissive-intensity-value">1.0</span>
+              </label>
+              <input type="range" id="emissive-intensity" min="0" max="5" step="0.1" value="1.0" class="property-slider">
+            </div>
+
+            <div class="property-group">
+              <button id="save-material-btn" class="action-btn">Save Material</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Presets Panel -->
+        <div class="presets-panel">
+          <div class="panel-header">
+            <h3>Material Presets</h3>
+          </div>
+          <div class="presets-content" id="presets-list">
+            <!-- Populated dynamically -->
+          </div>
+        </div>
+      </div>
+
+      <style>
+        .material-editor {
+          display: grid;
+          grid-template-columns: 1fr 350px;
+          grid-template-rows: 1fr 200px;
+          gap: 1px;
+          width: 100%;
+          height: 100%;
+          background: rgba(255, 255, 255, 0.05);
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+        }
+
+        .material-editor-dark {
+          background: #1a1a1a;
+          color: #e0e0e0;
+        }
+
+        .material-editor-light {
+          background: #f5f5f5;
+          color: #333;
+        }
+
+        .preview-panel {
+          grid-column: 1;
+          grid-row: 1 / 3;
+          display: flex;
+          flex-direction: column;
+          background: rgba(30, 30, 30, 0.95);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .properties-panel {
+          grid-column: 2;
+          grid-row: 1;
+          display: flex;
+          flex-direction: column;
+          background: rgba(30, 30, 30, 0.95);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .presets-panel {
+          grid-column: 2;
+          grid-row: 2;
+          display: flex;
+          flex-direction: column;
+          background: rgba(30, 30, 30, 0.95);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .panel-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 10px 15px;
+          background: rgba(0, 0, 0, 0.2);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .panel-header h3 {
+          margin: 0;
+          font-size: 14px;
+          font-weight: 600;
+          color: #60a5fa;
+        }
+
+        .preview-controls {
+          display: flex;
+          gap: 5px;
+        }
+
+        .preview-btn {
+          padding: 4px 8px;
+          background: rgba(96, 165, 250, 0.1);
+          border: 1px solid rgba(96, 165, 250, 0.3);
+          border-radius: 4px;
+          color: #60a5fa;
+          cursor: pointer;
+          font-size: 14px;
+        }
+
+        .preview-btn:hover {
+          background: rgba(96, 165, 250, 0.2);
+        }
+
+        .preview-content {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+          padding: 20px;
+        }
+
+        #material-preview-canvas {
+          max-width: 100%;
+          max-height: 100%;
+          border-radius: 8px;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        }
+
+        .properties-content {
+          flex: 1;
+          overflow-y: auto;
+          padding: 15px;
+        }
+
+        .property-group {
+          margin-bottom: 20px;
+        }
+
+        .property-group label {
+          display: block;
+          font-size: 13px;
+          margin-bottom: 8px;
+          color: #cbd5e0;
+          font-weight: 500;
+        }
+
+        .value-display {
+          float: right;
+          color: #60a5fa;
+          font-size: 12px;
+          font-weight: 600;
+        }
+
+        .property-slider {
+          width: 100%;
+          height: 6px;
+          border-radius: 3px;
+          background: rgba(96, 165, 250, 0.2);
+          outline: none;
+          -webkit-appearance: none;
+        }
+
+        .property-slider::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background: #60a5fa;
+          cursor: pointer;
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+        }
+
+        .property-select {
+          width: 100%;
+          padding: 8px;
+          background: rgba(0, 0, 0, 0.3);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 4px;
+          color: #fff;
+          font-size: 13px;
+        }
+
+        .color-input {
+          width: 100%;
+          height: 40px;
+          padding: 0;
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 4px;
+          background: transparent;
+          cursor: pointer;
+        }
+
+        .action-btn {
+          width: 100%;
+          padding: 10px;
+          background: rgba(34, 197, 94, 0.2);
+          border: 1px solid rgba(34, 197, 94, 0.4);
+          border-radius: 6px;
+          color: #4ade80;
+          cursor: pointer;
+          font-size: 13px;
+          font-weight: 500;
+          transition: all 0.2s;
+        }
+
+        .action-btn:hover {
+          background: rgba(34, 197, 94, 0.3);
+          border-color: rgba(34, 197, 94, 0.6);
+        }
+
+        .presets-content {
+          padding: 10px;
+          overflow-y: auto;
+        }
+
+        .presets-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+          gap: 10px;
+        }
+
+        .preset-card {
+          padding: 10px;
+          background: rgba(0, 0, 0, 0.3);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 6px;
+          cursor: pointer;
+          transition: all 0.2s;
+          text-align: center;
+        }
+
+        .preset-card:hover {
+          background: rgba(96, 165, 250, 0.1);
+          border-color: rgba(96, 165, 250, 0.3);
+        }
+
+        .preset-color {
+          width: 100%;
+          height: 50px;
+          border-radius: 4px;
+          margin-bottom: 8px;
+          border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .preset-name {
+          font-size: 11px;
+          color: #94a3b8;
+        }
+      </style>
+    `;
+  }
+  /**
+   * Initialize 3D preview
+   */
+  initializePreview() {
+    const THREE = globalThis.THREE;
+    if (!this.previewCanvas || !THREE) return;
+    this.previewScene = new THREE.Scene();
+    this.previewScene.background = null;
+    this.previewCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
+    this.previewCamera.position.set(0, 0, 5);
+    this.previewRenderer = new THREE.WebGLRenderer({
+      canvas: this.previewCanvas,
+      alpha: true,
+      antialias: true
+    });
+    this.previewRenderer.setSize(this.config.previewResolution, this.config.previewResolution);
+    this.previewRenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    const geometry = new THREE.SphereGeometry(1.5, 64, 64);
+    const material = new THREE.MeshStandardMaterial({
+      color: 8947848,
+      metalness: 0.5,
+      roughness: 0.5
+    });
+    this.previewSphere = new THREE.Mesh(geometry, material);
+    this.previewScene.add(this.previewSphere);
+    const ambientLight = new THREE.AmbientLight(16777215, 0.4);
+    this.previewScene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(16777215, 1);
+    directionalLight.position.set(5, 5, 5);
+    this.previewScene.add(directionalLight);
+    const rimLight = new THREE.DirectionalLight(6333946, 0.5);
+    rimLight.position.set(-5, 0, -5);
+    this.previewScene.add(rimLight);
+    this.animatePreview();
+    if (this.config.debug) {
+      console.debug("[MaterialEditor] Preview initialized");
+    }
+  }
+  /**
+   * Animate preview sphere
+   */
+  animatePreview() {
+    if (!this.previewRenderer || !this.previewScene || !this.previewCamera) return;
+    const animate = () => {
+      requestAnimationFrame(animate);
+      if (this.previewSphere) {
+        this.previewSphere.rotation[1] += 5e-3;
+      }
+      this.previewRenderer.render(this.previewScene, this.previewCamera);
+    };
+    animate();
+  }
+  /**
+   * Attach event listeners
+   */
+  attachEventListeners() {
+    if (!this.container) return;
+    const typeSelect = this.container.querySelector("#material-type");
+    typeSelect?.addEventListener("change", (e) => {
+      const type = e.target.value;
+      this.updateMaterialType(type);
+    });
+    const colorInput = this.container.querySelector("#base-color");
+    colorInput?.addEventListener("input", (e) => {
+      const color = e.target.value;
+      document.getElementById("color-value").textContent = color;
+      this.updatePreviewMaterial({ color });
+    });
+    const metalnessInput = this.container.querySelector("#metalness");
+    metalnessInput?.addEventListener("input", (e) => {
+      const value = parseFloat(e.target.value);
+      document.getElementById("metalness-value").textContent = value.toFixed(2);
+      this.updatePreviewMaterial({ metalness: value });
+    });
+    const roughnessInput = this.container.querySelector("#roughness");
+    roughnessInput?.addEventListener("input", (e) => {
+      const value = parseFloat(e.target.value);
+      document.getElementById("roughness-value").textContent = value.toFixed(2);
+      this.updatePreviewMaterial({ roughness: value });
+    });
+    const opacityInput = this.container.querySelector("#opacity");
+    opacityInput?.addEventListener("input", (e) => {
+      const value = parseFloat(e.target.value);
+      document.getElementById("opacity-value").textContent = value.toFixed(2);
+      this.updatePreviewMaterial({ opacity: value, transparent: value < 1 });
+    });
+    const emissiveColorInput = this.container.querySelector("#emissive-color");
+    emissiveColorInput?.addEventListener("input", (e) => {
+      const color = e.target.value;
+      document.getElementById("emissive-color-value").textContent = color;
+      this.updatePreviewMaterial({ emissive: color });
+    });
+    const emissiveIntensityInput = this.container.querySelector(
+      "#emissive-intensity"
+    );
+    emissiveIntensityInput?.addEventListener("input", (e) => {
+      const value = parseFloat(e.target.value);
+      document.getElementById("emissive-intensity-value").textContent = value.toFixed(1);
+      this.updatePreviewMaterial({ emissiveIntensity: value });
+    });
+    const saveBtn = this.container.querySelector("#save-material-btn");
+    saveBtn?.addEventListener("click", () => {
+      this.saveMaterial();
+    });
+  }
+  /**
+   * Update material type
+   */
+  updateMaterialType(type) {
+    const emissiveGroup = document.getElementById("emissive-group");
+    const emissiveIntensityGroup = document.getElementById("emissive-intensity-group");
+    if (type === "emissive") {
+      if (emissiveGroup) emissiveGroup.style.display = "block";
+      if (emissiveIntensityGroup) emissiveIntensityGroup.style.display = "block";
+    } else {
+      if (emissiveGroup) emissiveGroup.style.display = "none";
+      if (emissiveIntensityGroup) emissiveIntensityGroup.style.display = "none";
+    }
+    if (this.config.debug) {
+      console.debug("[MaterialEditor] Material type changed:", type);
+    }
+  }
+  /**
+   * Update preview material (THREE.js sphere).
+   * Accepts hex color strings for THREE.js Color.set() compatibility.
+   */
+  updatePreviewMaterial(params) {
+    if (!this.previewSphere) return;
+    const material = this.previewSphere.material;
+    if (params.color !== void 0) {
+      material.color.set(params.color);
+    }
+    if (params.metalness !== void 0) {
+      material.metalness = params.metalness;
+    }
+    if (params.roughness !== void 0) {
+      material.roughness = params.roughness;
+    }
+    if (params.opacity !== void 0) {
+      material.opacity = params.opacity;
+    }
+    if (params.transparent !== void 0) {
+      material.transparent = params.transparent;
+    }
+    if (params.emissive !== void 0) {
+      material.emissive.set(params.emissive);
+    }
+    if (params.emissiveIntensity !== void 0) {
+      material.emissiveIntensity = params.emissiveIntensity;
+    }
+    material.needsUpdate = true;
+  }
+  /**
+   * Save current material.
+   * Returns a fully-formed MaterialDef (the unified PBR type).
+   */
+  saveMaterial() {
+    const id = `material_${Date.now()}`;
+    const material = this.getCurrentMaterial();
+    material.id = id;
+    this.materials.set(id, material);
+    if (this.config.debug) {
+      console.debug("[MaterialEditor] Material saved:", material);
+    }
+    return material;
+  }
+  /**
+   * Get current material configuration from the editor UI.
+   * Reads hex color values from DOM inputs and converts to RGBA objects
+   * for the unified MaterialDef type.
+   */
+  getCurrentMaterial() {
+    const typeSelect = document.getElementById("material-type");
+    const colorInput = document.getElementById("base-color");
+    const metalnessInput = document.getElementById("metalness");
+    const roughnessInput = document.getElementById("roughness");
+    const opacityInput = document.getElementById("opacity");
+    const emissiveColorInput = document.getElementById("emissive-color");
+    const emissiveIntensityInput = document.getElementById(
+      "emissive-intensity"
+    );
+    const materialType = typeSelect?.value || "standard";
+    const colorHex = colorInput?.value || "#888888";
+    const albedo = MaterialLibrary.hexToRGBA(colorHex);
+    const opacity = parseFloat(opacityInput?.value || "1.0");
+    albedo.a = opacity;
+    const material = MaterialLibrary.createDefaultMaterialDef("", "Custom Material", materialType);
+    material.albedo = albedo;
+    material.metallic = parseFloat(metalnessInput?.value || "0.5");
+    material.roughness = parseFloat(roughnessInput?.value || "0.5");
+    if (opacity < 1) {
+      material.blendMode = "transparent";
+    }
+    if (materialType === "emissive") {
+      const emissiveHex = emissiveColorInput?.value || "#00ff00";
+      const emissiveRgba = MaterialLibrary.hexToRGBA(emissiveHex);
+      material.emission = { r: emissiveRgba.r, g: emissiveRgba.g, b: emissiveRgba.b };
+      material.emissionStrength = parseFloat(emissiveIntensityInput?.value || "1.0");
+    }
+    return material;
+  }
+  /**
+   * Load a MaterialDef into the editor UI.
+   * Converts RGBA objects back to hex strings for DOM color inputs.
+   */
+  loadMaterial(material) {
+    this.currentMaterialId = material.id;
+    const colorHex = MaterialLibrary.rgbaToHex(material.albedo);
+    const emissiveHex = MaterialLibrary.rgbaToHex(material.emission);
+    const typeSelect = document.getElementById("material-type");
+    const colorInput = document.getElementById("base-color");
+    const metalnessInput = document.getElementById("metalness");
+    const roughnessInput = document.getElementById("roughness");
+    const opacityInput = document.getElementById("opacity");
+    const emissiveColorInput = document.getElementById("emissive-color");
+    const emissiveIntensityInput = document.getElementById(
+      "emissive-intensity"
+    );
+    if (typeSelect) typeSelect.value = material.materialType || "standard";
+    if (colorInput) colorInput.value = colorHex;
+    if (metalnessInput) metalnessInput.value = material.metallic.toString();
+    if (roughnessInput) roughnessInput.value = material.roughness.toString();
+    if (opacityInput) opacityInput.value = (material.albedo.a ?? 1).toString();
+    if (emissiveColorInput) {
+      emissiveColorInput.value = emissiveHex;
+    }
+    if (emissiveIntensityInput) {
+      emissiveIntensityInput.value = material.emissionStrength.toString();
+    }
+    document.getElementById("color-value").textContent = colorHex;
+    document.getElementById("metalness-value").textContent = material.metallic.toFixed(2);
+    document.getElementById("roughness-value").textContent = material.roughness.toFixed(2);
+    document.getElementById("opacity-value").textContent = (material.albedo.a ?? 1).toFixed(2);
+    if (material.emissionStrength > 0) {
+      document.getElementById("emissive-color-value").textContent = emissiveHex;
+      document.getElementById("emissive-intensity-value").textContent = material.emissionStrength.toFixed(1);
+    }
+    this.updateMaterialType(material.materialType || "standard");
+    this.updatePreviewMaterial({
+      color: colorHex,
+      metalness: material.metallic,
+      roughness: material.roughness,
+      opacity: material.albedo.a ?? 1,
+      transparent: material.blendMode === "transparent",
+      emissive: emissiveHex,
+      emissiveIntensity: material.emissionStrength
+    });
+    if (this.config.debug) {
+      console.debug("[MaterialEditor] Material loaded:", material.name);
+    }
+  }
+  /**
+   * Load a preset by name.
+   * Merges preset overrides with default MaterialDef values.
+   */
+  loadPreset(presetName) {
+    const preset = _MaterialEditor.PRESETS.find((p) => p.name === presetName);
+    if (!preset) return;
+    const material = {
+      ...MaterialLibrary.createDefaultMaterialDef(
+        `preset_${presetName.toLowerCase()}`,
+        presetName,
+        preset.material.materialType
+      ),
+      ...preset.material,
+      id: `preset_${presetName.toLowerCase()}`,
+      name: presetName
+    };
+    this.loadMaterial(material);
+    if (this.config.debug) {
+      console.debug("[MaterialEditor] Preset loaded:", presetName);
+    }
+  }
+  /**
+   * Update presets list
+   */
+  updatePresetsList() {
+    const presetsList = document.getElementById("presets-list");
+    if (!presetsList) return;
+    let html = '<div class="presets-grid">';
+    for (const preset of _MaterialEditor.PRESETS) {
+      html += `
+        <div class="preset-card" data-preset="${preset.name}">
+          <div class="preset-color" style="background: ${preset.previewColor};"></div>
+          <div class="preset-name">${preset.name}</div>
+        </div>
+      `;
+    }
+    html += "</div>";
+    presetsList.innerHTML = html;
+    presetsList.querySelectorAll(".preset-card").forEach((card) => {
+      card.addEventListener("click", (e) => {
+        const presetName = e.currentTarget.getAttribute("data-preset");
+        if (presetName) {
+          this.loadPreset(presetName);
+        }
+      });
+    });
+  }
+  /**
+   * Get all materials (returns unified MaterialDef objects)
+   */
+  getMaterials() {
+    return Array.from(this.materials.values());
+  }
+  /**
+   * Get presets
+   */
+  static getPresets() {
+    return _MaterialEditor.PRESETS;
+  }
+  /**
+   * Dispose editor
+   */
+  dispose() {
+    if (this.previewRenderer) {
+      this.previewRenderer.dispose();
+      this.previewRenderer = null;
+    }
+    this.materials.clear();
+    if (this.config.debug) {
+      console.debug("[MaterialEditor] Disposed");
+    }
+  }
+};
+// THREE.Mesh
+// Material presets (using unified MaterialDef schema)
+_MaterialEditor.PRESETS = [
+  {
+    name: "Concrete",
+    category: "Construction",
+    material: {
+      materialType: "standard",
+      albedo: { r: 0.502, g: 0.502, b: 0.502, a: 1 },
+      metallic: 0,
+      roughness: 0.9
+    },
+    previewColor: "#808080"
+  },
+  {
+    name: "Metal",
+    category: "Metal",
+    material: {
+      materialType: "metal",
+      albedo: { r: 0.533, g: 0.533, b: 0.533, a: 1 },
+      metallic: 1,
+      roughness: 0.2
+    },
+    previewColor: "#888888"
+  },
+  {
+    name: "Gold",
+    category: "Metal",
+    material: {
+      materialType: "metal",
+      albedo: { r: 1, g: 0.843, b: 0, a: 1 },
+      metallic: 1,
+      roughness: 0.15
+    },
+    previewColor: "#ffd700"
+  },
+  {
+    name: "Copper",
+    category: "Metal",
+    material: {
+      materialType: "metal",
+      albedo: { r: 0.722, g: 0.451, b: 0.2, a: 1 },
+      metallic: 1,
+      roughness: 0.25
+    },
+    previewColor: "#b87333"
+  },
+  {
+    name: "Chrome",
+    category: "Metal",
+    material: {
+      materialType: "metal",
+      albedo: { r: 0.8, g: 0.8, b: 0.8, a: 1 },
+      metallic: 1,
+      roughness: 0.05
+    },
+    previewColor: "#cccccc"
+  },
+  {
+    name: "Wood",
+    category: "Natural",
+    material: {
+      materialType: "standard",
+      albedo: { r: 0.545, g: 0.435, b: 0.278, a: 1 },
+      metallic: 0,
+      roughness: 0.7
+    },
+    previewColor: "#8b6f47"
+  },
+  {
+    name: "Plastic",
+    category: "Synthetic",
+    material: {
+      materialType: "physical",
+      albedo: { r: 1, g: 0.42, b: 0.42, a: 1 },
+      metallic: 0,
+      roughness: 0.4
+    },
+    previewColor: "#ff6b6b"
+  },
+  {
+    name: "Glass",
+    category: "Transparent",
+    material: {
+      materialType: "glass",
+      albedo: { r: 1, g: 1, b: 1, a: 0.3 },
+      metallic: 0,
+      roughness: 0,
+      blendMode: "transparent",
+      doubleSided: true
+    },
+    previewColor: "rgba(255, 255, 255, 0.3)"
+  },
+  {
+    name: "Rubber",
+    category: "Synthetic",
+    material: {
+      materialType: "standard",
+      albedo: { r: 0.2, g: 0.2, b: 0.2, a: 1 },
+      metallic: 0,
+      roughness: 0.8
+    },
+    previewColor: "#333333"
+  },
+  {
+    name: "Ceramic",
+    category: "Natural",
+    material: {
+      materialType: "physical",
+      albedo: { r: 0.941, g: 0.941, b: 0.941, a: 1 },
+      metallic: 0,
+      roughness: 0.3
+    },
+    previewColor: "#f0f0f0"
+  },
+  {
+    name: "Neon",
+    category: "Emissive",
+    material: {
+      materialType: "emissive",
+      albedo: { r: 0, g: 1, b: 0, a: 1 },
+      emission: { r: 0, g: 1, b: 0 },
+      emissionStrength: 2
+    },
+    previewColor: "#00ff00"
+  },
+  {
+    name: "Glow",
+    category: "Emissive",
+    material: {
+      materialType: "emissive",
+      albedo: { r: 0.376, g: 0.647, b: 0.98, a: 1 },
+      emission: { r: 0.376, g: 0.647, b: 0.98 },
+      emissionStrength: 1.5
+    },
+    previewColor: "#60a5fa"
+  }
+];
+var MaterialEditor = _MaterialEditor;
+
+// src/tools/materialPresetQuickPick.ts
+function getMaterialEditorBuiltinPresets() {
+  return MaterialEditor.getPresets();
+}
+function listMaterialEditorQuickPickPresetNames() {
+  return MaterialEditor.getPresets().map((p) => p.name);
+}
+function listMaterialEditorQuickPickPresetsByCategory() {
+  const m = /* @__PURE__ */ new Map();
+  for (const p of MaterialEditor.getPresets()) {
+    const list = m.get(p.category) ?? [];
+    list.push(p.name);
+    m.set(p.category, list);
+  }
+  return m;
+}
+
+// src/tools/SceneInspector.ts
+var SceneInspector = class {
+  constructor(config = {}) {
+    this.composition = null;
+    this.renderer = null;
+    this.entities = /* @__PURE__ */ new Map();
+    this.selectedEntityId = null;
+    this.performanceHistory = [];
+    this.currentFrame = 0;
+    this.lastUpdateTime = 0;
+    this.physicsVisualization = {
+      showBounds: false,
+      showVelocity: false,
+      showForces: false,
+      showContacts: false,
+      showCenterOfMass: false
+    };
+    this.config = {
+      enabled: config.enabled ?? true,
+      showPerformance: config.showPerformance ?? true,
+      showHierarchy: config.showHierarchy ?? true,
+      showProperties: config.showProperties ?? true,
+      showStatistics: config.showStatistics ?? true,
+      performanceHistorySize: config.performanceHistorySize ?? 300,
+      updateFrequency: config.updateFrequency ?? 10
+      // 10 Hz
+    };
+  }
+  /**
+   * Initialize inspector with composition
+   */
+  initialize(composition, renderer) {
+    this.composition = composition;
+    this.renderer = renderer || null;
+    this.buildEntityHierarchy();
+    console.debug("[SceneInspector] Initialized with", this.entities.size, "entities");
+  }
+  /**
+   * Build entity hierarchy from composition
+   */
+  buildEntityHierarchy() {
+    if (!this.composition) return;
+    this.entities.clear();
+    for (const obj of this.composition.objects || []) {
+      const getProp = (key) => obj.properties?.find((p) => p.key === key)?.value;
+      const pos = getProp("position");
+      const rot = getProp("rotation");
+      const scl = getProp("scale");
+      const inspectorEntity = {
+        id: obj.name,
+        name: obj.name,
+        type: obj.type || "entity",
+        parentId: null,
+        // HoloScript doesn't have hierarchy yet, all root-level
+        childrenIds: [],
+        transform: {
+          // @ts-expect-error
+          position: pos ? [pos[0], pos[1], pos[2]] : [0, 0, 0],
+          // @ts-expect-error
+          rotation: rot ? [rot[0], rot[1], rot[2]] : [0, 0, 0],
+          // @ts-expect-error
+          scale: scl ? [scl[0], scl[1], scl[2]] : [1, 1, 1]
+        },
+        properties: this.extractProperties(obj),
+        // @ts-expect-error
+        traits: obj.traits?.map((t) => t.name) || [],
+        visible: true,
+        active: true
+      };
+      this.entities.set(inspectorEntity.id, inspectorEntity);
+    }
+  }
+  /**
+   * Extract properties from entity
+   */
+  extractProperties(entity) {
+    const props = {};
+    for (const prop of entity.properties || []) {
+      if (["geometry", "material"].includes(prop.key)) {
+        props[prop.key] = prop.value;
+      }
+    }
+    for (const trait of entity.traits || []) {
+      if (trait.config) {
+        props[trait.name] = trait.config;
+      }
+    }
+    return props;
+  }
+  /**
+   * Update inspector (call per frame)
+   */
+  update(deltaTime) {
+    if (!this.config.enabled) return;
+    this.currentFrame++;
+    const now = performance.now();
+    if (now - this.lastUpdateTime >= 1e3 / this.config.updateFrequency) {
+      this.recordPerformanceFrame(deltaTime);
+      this.lastUpdateTime = now;
+    }
+  }
+  /**
+   * Record performance frame
+   */
+  recordPerformanceFrame(deltaTime) {
+    const stats = this.renderer?.getStatistics();
+    const frame = {
+      frameNumber: this.currentFrame,
+      frameTime: deltaTime * 1e3,
+      // Convert to ms
+      fps: stats?.fps || 0,
+      physicsTime: 0,
+      // Would come from physics engine
+      renderTime: deltaTime * 1e3 * 0.6,
+      // Estimate
+      syncTime: deltaTime * 1e3 * 0.1,
+      // Estimate
+      timestamp: performance.now()
+    };
+    this.performanceHistory.push(frame);
+    if (this.performanceHistory.length > this.config.performanceHistorySize) {
+      this.performanceHistory.shift();
+    }
+  }
+  /**
+   * Get entity hierarchy (for tree view)
+   */
+  getEntityHierarchy() {
+    return Array.from(this.entities.values());
+  }
+  /**
+   * Get entity by ID
+   */
+  getEntity(id) {
+    return this.entities.get(id);
+  }
+  /**
+   * Select entity
+   */
+  selectEntity(id) {
+    if (this.entities.has(id)) {
+      this.selectedEntityId = id;
+      console.debug("[SceneInspector] Selected entity:", id);
+    }
+  }
+  /**
+   * Get selected entity
+   */
+  getSelectedEntity() {
+    return this.selectedEntityId ? this.entities.get(this.selectedEntityId) || null : null;
+  }
+  /**
+   * Update entity property (live editing)
+   */
+  updateEntityProperty(id, path, value) {
+    const entity = this.entities.get(id);
+    if (!entity) return false;
+    const parts = path.split(".");
+    let target = entity;
+    for (let i = 0; i < parts.length - 1; i++) {
+      target = target[parts[i]];
+      if (!target) return false;
+    }
+    const lastKey = parts[parts.length - 1];
+    target[lastKey] = value;
+    console.debug("[SceneInspector] Updated", id, path, "=", value);
+    return true;
+  }
+  /**
+   * Get scene statistics
+   */
+  getStatistics() {
+    const rendererStats = this.renderer?.getStatistics();
+    const recentFrames = this.performanceHistory.slice(-60);
+    const fpsList = recentFrames.map((f) => f.fps).filter((fps) => fps > 0);
+    const averageFPS = fpsList.length > 0 ? fpsList.reduce((a, b) => a + b, 0) / fpsList.length : 0;
+    const minFPS = fpsList.length > 0 ? Math.min(...fpsList) : 0;
+    const maxFPS = fpsList.length > 0 ? Math.max(...fpsList) : 0;
+    return {
+      totalEntities: this.entities.size,
+      activeEntities: Array.from(this.entities.values()).filter((e) => e.active).length,
+      visibleEntities: Array.from(this.entities.values()).filter((e) => e.visible).length,
+      totalVertices: 0,
+      // Would come from renderer
+      totalTriangles: rendererStats?.triangles || 0,
+      drawCalls: rendererStats?.drawCalls || 0,
+      textureMemory: (rendererStats?.memoryUsage?.textures || 0) / (1024 * 1024),
+      geometryMemory: (rendererStats?.memoryUsage?.geometries || 0) / (1024 * 1024),
+      currentFPS: rendererStats?.fps || 0,
+      averageFPS: Math.round(averageFPS),
+      minFPS: Math.round(minFPS),
+      maxFPS: Math.round(maxFPS)
+    };
+  }
+  /**
+   * Get performance history
+   */
+  getPerformanceHistory() {
+    return this.performanceHistory;
+  }
+  /**
+   * Toggle physics visualization
+   */
+  togglePhysicsVisualization(type) {
+    this.physicsVisualization[type] = !this.physicsVisualization[type];
+    console.debug(
+      "[SceneInspector] Physics visualization:",
+      type,
+      "=",
+      this.physicsVisualization[type]
+    );
+  }
+  /**
+   * Get physics visualization settings
+   */
+  getPhysicsVisualization() {
+    return { ...this.physicsVisualization };
+  }
+  /**
+   * Generate HTML for inspector UI
+   */
+  generateInspectorHTML() {
+    const stats = this.getStatistics();
+    const selectedEntity = this.getSelectedEntity();
+    return `
+      <div class="scene-inspector" style="position: absolute; top: 0; right: 0; width: 400px; height: 100vh; background: rgba(0, 0, 0, 0.9); color: #fff; font-family: monospace; font-size: 12px; overflow-y: auto; z-index: 1000;">
+
+        <!-- Header -->
+        <div style="padding: 15px; border-bottom: 2px solid #4ecdc4; background: #1a1a2e;">
+          <h2 style="margin: 0; color: #4ecdc4;">\u{1F50D} Scene Inspector</h2>
+          <div style="color: #aaa; margin-top: 5px;">Frame: ${this.currentFrame}</div>
+        </div>
+
+        <!-- Statistics Panel -->
+        ${this.config.showStatistics ? `
+        <div style="padding: 15px; border-bottom: 1px solid #333;">
+          <h3 style="margin: 0 0 10px 0; color: #ffd93d;">\u{1F4CA} Statistics</h3>
+          <div style="line-height: 1.6;">
+            <div>Entities: ${stats.totalEntities} (${stats.activeEntities} active)</div>
+            <div>FPS: ${stats.currentFPS} (avg: ${stats.averageFPS}, min: ${stats.minFPS})</div>
+            <div>Draw Calls: ${stats.drawCalls}</div>
+            <div>Triangles: ${stats.totalTriangles.toLocaleString()}</div>
+            <div>Memory: ${(stats.textureMemory + stats.geometryMemory).toFixed(1)} MB</div>
+          </div>
+        </div>
+        ` : ""}
+
+        <!-- Hierarchy Panel -->
+        ${this.config.showHierarchy ? `
+        <div style="padding: 15px; border-bottom: 1px solid #333;">
+          <h3 style="margin: 0 0 10px 0; color: #95e1d3;">\u{1F333} Hierarchy</h3>
+          <div style="max-height: 300px; overflow-y: auto;">
+            ${this.getEntityHierarchy().map(
+      (entity) => `
+              <div
+                data-entity-id="${entity.id}"
+                style="padding: 5px; margin: 2px 0; background: ${this.selectedEntityId === entity.id ? "#4ecdc4" : "#2a2a3e"}; cursor: pointer; border-radius: 4px;"
+                onclick="window.inspectorSelectEntity('${entity.id}')"
+              >
+                <div style="font-weight: bold;">${entity.name}</div>
+                <div style="color: #aaa; font-size: 10px;">${entity.type} \xB7 ${entity.traits.join(", ")}</div>
+              </div>
+            `
+    ).join("")}
+          </div>
+        </div>
+        ` : ""}
+
+        <!-- Properties Panel -->
+        ${this.config.showProperties && selectedEntity ? `
+        <div style="padding: 15px; border-bottom: 1px solid #333;">
+          <h3 style="margin: 0 0 10px 0; color: #ff6b6b;">\u2699\uFE0F Properties</h3>
+          <div style="line-height: 1.8;">
+            <div style="color: #4ecdc4; margin-bottom: 10px; font-size: 14px; font-weight: bold;">${selectedEntity.name}</div>
+
+            <div style="margin: 10px 0;">
+              <div style="color: #ffd93d;">Transform:</div>
+              <div style="margin-left: 10px;">
+                <div>Position: ${selectedEntity.transform.position.map((v) => v.toFixed(2)).join(", ")}</div>
+                <div>Rotation: ${selectedEntity.transform.rotation.map((v) => v.toFixed(2)).join(", ")}</div>
+                <div>Scale: ${selectedEntity.transform.scale.map((v) => v.toFixed(2)).join(", ")}</div>
+              </div>
+            </div>
+
+            <div style="margin: 10px 0;">
+              <div style="color: #ffd93d;">Traits:</div>
+              <div style="margin-left: 10px;">${selectedEntity.traits.join(", ") || "None"}</div>
+            </div>
+
+            <div style="margin: 10px 0;">
+              <div style="color: #ffd93d;">Properties:</div>
+              <div style="margin-left: 10px;">
+                ${Object.entries(selectedEntity.properties).map(
+      ([key, value]) => `
+                  <div>${key}: ${typeof value === "object" ? JSON.stringify(value) : value}</div>
+                `
+    ).join("")}
+              </div>
+            </div>
+          </div>
+        </div>
+        ` : ""}
+
+        <!-- Performance Graph -->
+        ${this.config.showPerformance ? `
+        <div style="padding: 15px;">
+          <h3 style="margin: 0 0 10px 0; color: #95e1d3;">\u26A1 Performance</h3>
+          <canvas id="performance-graph" width="370" height="100" style="background: #1a1a2e; border-radius: 4px;"></canvas>
+        </div>
+        ` : ""}
+
+      </div>
+
+      <script>
+        // Entity selection handler
+        window.inspectorSelectEntity = function(entityId) {
+          console.debug('Selected entity:', entityId);
+          // Would call inspector.selectEntity(entityId) and refresh UI
+        };
+
+        // Render performance graph
+        ${this.config.showPerformance ? `
+        (function() {
+          const canvas = document.getElementById('performance-graph');
+          if (!canvas) return;
+
+          const ctx = canvas.getContext('2d');
+          const history = ${JSON.stringify(this.performanceHistory.slice(-60))};
+
+          // Clear canvas
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+          // Draw graph
+          const maxFPS = 60;
+          const width = canvas.width;
+          const height = canvas.height;
+
+          ctx.strokeStyle = '#4ecdc4';
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+
+          history.forEach((frame, i) => {
+            const x = (i / history.length) * width;
+            const y = height - (frame.fps / maxFPS) * height;
+
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          });
+
+          ctx.stroke();
+
+          // Draw 60 FPS line
+          ctx.strokeStyle = '#ffd93d';
+          ctx.lineWidth = 1;
+          ctx.setLineDash([5, 5]);
+          ctx.beginPath();
+          ctx.moveTo(0, 0);
+          ctx.lineTo(width, 0);
+          ctx.stroke();
+          ctx.setLineDash([]);
+
+          // Draw labels
+          ctx.fillStyle = '#fff';
+          ctx.font = '10px monospace';
+          ctx.fillText('60 FPS', 5, 10);
+          ctx.fillText('0 FPS', 5, height - 5);
+        })();
+        ` : ""}
+      </script>
+    `;
+  }
+  /**
+   * Enable/disable inspector
+   */
+  setEnabled(enabled) {
+    this.config.enabled = enabled;
+  }
+  /**
+   * Get configuration
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+};
+
+// src/tools/VisualEditor.ts
+var VisualEditor = class {
+  constructor(config = {}) {
+    this.entities = /* @__PURE__ */ new Map();
+    this.selectedEntityIds = /* @__PURE__ */ new Set();
+    this.composition = null;
+    this.history = [];
+    this.historyIndex = -1;
+    this.maxHistorySize = 100;
+    this.container = null;
+    this.hierarchyPanel = null;
+    this.propertiesPanel = null;
+    this.viewportPanel = null;
+    this.toolbarPanel = null;
+    this.config = {
+      container: config.container ?? null,
+      autoSave: config.autoSave ?? true,
+      autoSaveInterval: config.autoSaveInterval ?? 3e4,
+      // 30 seconds
+      debug: config.debug ?? false,
+      gridSnap: config.gridSnap ?? true,
+      gridSize: config.gridSize ?? 1,
+      enable3DPreview: config.enable3DPreview ?? true,
+      theme: config.theme ?? "dark"
+    };
+    if (this.config.container) {
+      this.initializeUI();
+    }
+    if (this.config.autoSave) {
+      this.startAutoSave();
+    }
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Initialized", this.config);
+    }
+  }
+  /**
+   * Initialize editor UI
+   */
+  initializeUI() {
+    if (!this.config.container) return;
+    this.container = this.config.container;
+    this.container.innerHTML = this.generateEditorHTML();
+    this.hierarchyPanel = this.container.querySelector(".editor-hierarchy");
+    this.propertiesPanel = this.container.querySelector(".editor-properties");
+    this.viewportPanel = this.container.querySelector(".editor-viewport");
+    this.toolbarPanel = this.container.querySelector(".editor-toolbar");
+    this.attachEventListeners();
+    if (this.config.debug) {
+      console.debug("[VisualEditor] UI initialized");
+    }
+  }
+  /**
+   * Generate editor HTML
+   */
+  generateEditorHTML() {
+    const theme = this.config.theme === "dark" ? "editor-dark" : "editor-light";
+    return `
+      <div class="holostudio-editor ${theme}">
+        <!-- Toolbar -->
+        <div class="editor-toolbar">
+          <div class="toolbar-section">
+            <button class="toolbar-btn" data-action="new" title="New Composition">
+              <span class="icon">\u{1F4C4}</span> New
+            </button>
+            <button class="toolbar-btn" data-action="open" title="Open Composition">
+              <span class="icon">\u{1F4C1}</span> Open
+            </button>
+            <button class="toolbar-btn" data-action="save" title="Save Composition">
+              <span class="icon">\u{1F4BE}</span> Save
+            </button>
+          </div>
+          <div class="toolbar-section">
+            <button class="toolbar-btn" data-action="undo" title="Undo">
+              <span class="icon">\u21B6</span>
+            </button>
+            <button class="toolbar-btn" data-action="redo" title="Redo">
+              <span class="icon">\u21B7</span>
+            </button>
+          </div>
+          <div class="toolbar-section">
+            <button class="toolbar-btn" data-action="play" title="Preview">
+              <span class="icon">\u25B6</span> Preview
+            </button>
+          </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="editor-content">
+          <!-- Left Sidebar: Hierarchy -->
+          <div class="editor-panel editor-hierarchy">
+            <div class="panel-header">
+              <h3>Hierarchy</h3>
+              <button class="panel-btn" data-action="add-entity" title="Add Entity">+</button>
+            </div>
+            <div class="panel-content" id="hierarchy-content">
+              <!-- Populated dynamically -->
+            </div>
+          </div>
+
+          <!-- Center: Viewport -->
+          <div class="editor-panel editor-viewport">
+            <div class="panel-header">
+              <h3>Viewport</h3>
+              <div class="viewport-controls">
+                <button class="panel-btn" data-action="grid-toggle" title="Toggle Grid">
+                  <span class="icon">\u229E</span>
+                </button>
+                <button class="panel-btn" data-action="gizmo-toggle" title="Toggle Gizmo">
+                  <span class="icon">\u22B9</span>
+                </button>
+              </div>
+            </div>
+            <div class="panel-content viewport-content" id="viewport-content">
+              <canvas id="editor-canvas"></canvas>
+              <div class="viewport-overlay">
+                <div class="viewport-stats">
+                  <div>Entities: <span id="entity-count">0</span></div>
+                  <div>Selected: <span id="selected-count">0</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Sidebar: Properties -->
+          <div class="editor-panel editor-properties">
+            <div class="panel-header">
+              <h3>Properties</h3>
+            </div>
+            <div class="panel-content" id="properties-content">
+              <div class="no-selection">
+                <p>No entity selected</p>
+                <p class="hint">Select an entity in the Hierarchy or Viewport</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Panel: Asset Library & Traits -->
+        <div class="editor-bottom">
+          <div class="panel-header">
+            <h3>Traits & Assets</h3>
+          </div>
+          <div class="panel-content traits-library">
+            <!-- Populated dynamically -->
+          </div>
+        </div>
+      </div>
+
+      <style>
+        .holostudio-editor {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+          overflow: hidden;
+        }
+
+        .editor-dark {
+          background: #1a1a1a;
+          color: #e0e0e0;
+        }
+
+        .editor-light {
+          background: #f5f5f5;
+          color: #333;
+        }
+
+        /* Toolbar */
+        .editor-toolbar {
+          display: flex;
+          gap: 20px;
+          padding: 10px 15px;
+          background: rgba(0, 0, 0, 0.3);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .toolbar-section {
+          display: flex;
+          gap: 5px;
+        }
+
+        .toolbar-btn {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          padding: 6px 12px;
+          background: rgba(96, 165, 250, 0.1);
+          border: 1px solid rgba(96, 165, 250, 0.3);
+          border-radius: 6px;
+          color: #60a5fa;
+          cursor: pointer;
+          font-size: 13px;
+          transition: all 0.2s;
+        }
+
+        .toolbar-btn:hover {
+          background: rgba(96, 165, 250, 0.2);
+          border-color: rgba(96, 165, 250, 0.5);
+        }
+
+        .icon {
+          font-size: 16px;
+        }
+
+        /* Main Content */
+        .editor-content {
+          display: flex;
+          flex: 1;
+          gap: 1px;
+          overflow: hidden;
+          background: rgba(255, 255, 255, 0.05);
+        }
+
+        .editor-panel {
+          display: flex;
+          flex-direction: column;
+          background: rgba(30, 30, 30, 0.95);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .editor-hierarchy {
+          width: 250px;
+          flex-shrink: 0;
+        }
+
+        .editor-viewport {
+          flex: 1;
+          min-width: 0;
+        }
+
+        .editor-properties {
+          width: 300px;
+          flex-shrink: 0;
+        }
+
+        .panel-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 10px 15px;
+          background: rgba(0, 0, 0, 0.2);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .panel-header h3 {
+          margin: 0;
+          font-size: 14px;
+          font-weight: 600;
+          color: #60a5fa;
+        }
+
+        .panel-btn {
+          padding: 4px 8px;
+          background: rgba(96, 165, 250, 0.1);
+          border: 1px solid rgba(96, 165, 250, 0.3);
+          border-radius: 4px;
+          color: #60a5fa;
+          cursor: pointer;
+          font-size: 14px;
+        }
+
+        .panel-btn:hover {
+          background: rgba(96, 165, 250, 0.2);
+        }
+
+        .panel-content {
+          flex: 1;
+          overflow-y: auto;
+          padding: 10px;
+        }
+
+        /* Viewport */
+        .viewport-content {
+          position: relative;
+          padding: 0;
+        }
+
+        #editor-canvas {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
+
+        .viewport-overlay {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          pointer-events: none;
+        }
+
+        .viewport-stats {
+          background: rgba(0, 0, 0, 0.7);
+          padding: 8px 12px;
+          border-radius: 6px;
+          font-size: 12px;
+          font-family: 'Courier New', monospace;
+        }
+
+        .viewport-stats div {
+          margin-bottom: 3px;
+        }
+
+        .viewport-controls {
+          display: flex;
+          gap: 5px;
+        }
+
+        /* Properties Panel */
+        .no-selection {
+          text-align: center;
+          padding: 40px 20px;
+          color: #888;
+        }
+
+        .no-selection .hint {
+          font-size: 12px;
+          margin-top: 10px;
+        }
+
+        /* Bottom Panel */
+        .editor-bottom {
+          height: 200px;
+          background: rgba(30, 30, 30, 0.95);
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .traits-library {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+          gap: 10px;
+        }
+      </style>
+    `;
+  }
+  /**
+   * Attach event listeners
+   */
+  attachEventListeners() {
+    if (!this.container) return;
+    this.container.querySelectorAll("[data-action]").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        const action = e.currentTarget.getAttribute("data-action");
+        this.handleAction(action);
+      });
+    });
+    document.addEventListener("keydown", (e) => {
+      this.handleKeyboardShortcut(e);
+    });
+  }
+  /**
+   * Handle toolbar action
+   */
+  handleAction(action) {
+    if (!action) return;
+    switch (action) {
+      case "new":
+        this.createNewComposition();
+        break;
+      case "save":
+        this.saveComposition();
+        break;
+      case "undo":
+        this.undo();
+        break;
+      case "redo":
+        this.redo();
+        break;
+      case "add-entity":
+        this.addEntity();
+        break;
+      case "play":
+        this.previewComposition();
+        break;
+      default:
+        if (this.config.debug) {
+          console.debug("[VisualEditor] Unhandled action:", action);
+        }
+    }
+  }
+  /**
+   * Handle keyboard shortcut
+   */
+  handleKeyboardShortcut(e) {
+    const isCtrl = e.ctrlKey || e.metaKey;
+    if (isCtrl && e.key === "s") {
+      e.preventDefault();
+      this.saveComposition();
+    } else if (isCtrl && e.key === "z") {
+      e.preventDefault();
+      if (e.shiftKey) {
+        this.redo();
+      } else {
+        this.undo();
+      }
+    } else if (e.key === "Delete") {
+      e.preventDefault();
+      this.deleteSelectedEntities();
+    }
+  }
+  /**
+   * Create new composition
+   */
+  createNewComposition() {
+    this.composition = {
+      type: "Composition",
+      name: "Untitled",
+      objects: [],
+      templates: [],
+      spatialGroups: [],
+      lights: [],
+      imports: [],
+      timelines: [],
+      audio: [],
+      zones: [],
+      transitions: [],
+      conditionals: [],
+      iterators: [],
+      npcs: [],
+      quests: [],
+      abilities: [],
+      dialogues: [],
+      stateMachines: [],
+      achievements: [],
+      talentTrees: [],
+      shapes: []
+    };
+    this.entities.clear();
+    this.selectedEntityIds.clear();
+    this.history = [];
+    this.historyIndex = -1;
+    this.updateHierarchy();
+    this.updateProperties();
+    if (this.config.debug) {
+      console.debug("[VisualEditor] New composition created");
+    }
+  }
+  /**
+   * Load composition
+   */
+  loadComposition(composition) {
+    this.composition = composition;
+    this.entities.clear();
+    this.selectedEntityIds.clear();
+    let entityIndex = 0;
+    for (const obj of composition.objects || []) {
+      const entity = this.holoObjectToEntity(obj, entityIndex++);
+      this.entities.set(entity.id, entity);
+    }
+    this.updateHierarchy();
+    this.updateProperties();
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Composition loaded:", composition.name);
+    }
+  }
+  /**
+   * Convert HoloObject to EditorEntity
+   */
+  holoObjectToEntity(obj, index) {
+    const getProp = (key) => obj.properties?.find((p) => p.key === key)?.value;
+    const pos = getProp("position");
+    const rot = getProp("rotation");
+    const scl = getProp("scale");
+    return {
+      id: `entity_${index}`,
+      name: obj.name || `Object ${index}`,
+      type: "object",
+      parentId: null,
+      children: [],
+      transform: {
+        position: pos ? [pos[0], pos[1], pos[2]] : [0, 0, 0],
+        rotation: rot ? [rot[0], rot[1], rot[2]] : [0, 0, 0],
+        scale: scl ? [scl[0], scl[1], scl[2]] : [1, 1, 1]
+      },
+      geometry: getProp("geometry"),
+      material: getProp("material"),
+      traits: (obj.traits || []).map((t) => ({
+        name: t.name,
+        properties: t.config,
+        category: this.getTraitCategory(t.name)
+      })),
+      properties: obj.properties?.filter(
+        (p) => !["position", "rotation", "scale", "geometry", "material"].includes(p.key)
+      ).reduce((acc, p) => ({ ...acc, [p.key]: p.value }), {}) || {},
+      visible: true,
+      locked: false,
+      selected: false
+    };
+  }
+  /**
+   * Get trait category
+   */
+  getTraitCategory(traitName) {
+    if (traitName.startsWith("physics")) return "Physics";
+    if (traitName.startsWith("render")) return "Rendering";
+    if (["grabbable", "climbable", "teleport"].includes(traitName)) return "VR";
+    return "General";
+  }
+  /**
+   * Save composition
+   */
+  saveComposition() {
+    if (!this.composition) return null;
+    const objects = [];
+    for (const entity of this.entities.values()) {
+      const properties = [];
+      properties.push({
+        type: "ObjectProperty",
+        key: "position",
+        value: entity.transform.position
+      });
+      properties.push({
+        type: "ObjectProperty",
+        key: "rotation",
+        value: entity.transform.rotation
+      });
+      properties.push({ type: "ObjectProperty", key: "scale", value: entity.transform.scale });
+      if (entity.geometry)
+        properties.push({ type: "ObjectProperty", key: "geometry", value: entity.geometry });
+      if (entity.material)
+        properties.push({
+          type: "ObjectProperty",
+          key: "material",
+          value: entity.material
+        });
+      for (const [k, v] of Object.entries(entity.properties)) {
+        properties.push({ type: "ObjectProperty", key: k, value: v });
+      }
+      const obj = {
+        type: "Object",
+        name: entity.name,
+        properties,
+        traits: entity.traits.map((t) => ({
+          type: "ObjectTrait",
+          name: t.name,
+          config: t.properties || {}
+        })),
+        children: []
+      };
+      objects.push(obj);
+    }
+    this.composition.objects = objects;
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Composition saved:", this.composition);
+    }
+    return this.composition;
+  }
+  /**
+   * Export composition as .holo code
+   */
+  exportToCode() {
+    if (!this.composition) return "";
+    let code = `composition "${this.composition.name}" {
+`;
+    for (const entity of this.entities.values()) {
+      code += `  object "${entity.name}" {
+`;
+      for (const trait of entity.traits) {
+        if (trait.properties && Object.keys(trait.properties).length > 0) {
+          const propsStr = Object.entries(trait.properties).map(([k, v]) => `${k}: ${JSON.stringify(v)}`).join(", ");
+          code += `    @${trait.name}(${propsStr})
+`;
+        } else {
+          code += `    @${trait.name}
+`;
+        }
+      }
+      if (entity.geometry) {
+        code += `    geometry: "${entity.geometry}"
+`;
+      }
+      code += `    position: [${entity.transform.position.join(", ")}]
+`;
+      if (entity.transform.rotation.some((r) => r !== 0)) {
+        code += `    rotation: [${entity.transform.rotation.join(", ")}]
+`;
+      }
+      if (entity.transform.scale.some((s) => s !== 1)) {
+        code += `    scale: [${entity.transform.scale.join(", ")}]
+`;
+      }
+      if (entity.material) {
+        code += `    material: ${JSON.stringify(entity.material)}
+`;
+      }
+      code += `  }
+`;
+    }
+    code += `}
+`;
+    return code;
+  }
+  /**
+   * Add new entity
+   */
+  addEntity(type = "box") {
+    const id = `entity_${Date.now()}_${Math.random().toString(36).substring(7)}`;
+    const entity = {
+      id,
+      name: `${type.charAt(0).toUpperCase() + type.slice(1)} ${this.entities.size + 1}`,
+      type: "object",
+      parentId: null,
+      children: [],
+      transform: {
+        position: [0, 0, 0],
+        rotation: [0, 0, 0],
+        scale: [1, 1, 1]
+      },
+      geometry: type,
+      material: {
+        type: "standard",
+        color: "#888888"
+      },
+      traits: [],
+      properties: {},
+      visible: true,
+      locked: false,
+      selected: false
+    };
+    this.entities.set(id, entity);
+    this.addToHistory("create", id, void 0, entity);
+    this.updateHierarchy();
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Entity added:", entity.name);
+    }
+    return entity;
+  }
+  /**
+   * Delete selected entities
+   */
+  deleteSelectedEntities() {
+    for (const id of this.selectedEntityIds) {
+      const entity = this.entities.get(id);
+      if (entity && !entity.locked) {
+        this.addToHistory("delete", id, entity, void 0);
+        this.entities.delete(id);
+      }
+    }
+    this.selectedEntityIds.clear();
+    this.updateHierarchy();
+    this.updateProperties();
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Deleted entities");
+    }
+  }
+  /**
+   * Select entity
+   */
+  selectEntity(id, multiSelect = false) {
+    if (!multiSelect) {
+      for (const entity2 of this.entities.values()) {
+        entity2.selected = false;
+      }
+      this.selectedEntityIds.clear();
+    }
+    const entity = this.entities.get(id);
+    if (entity) {
+      entity.selected = true;
+      this.selectedEntityIds.add(id);
+      this.updateProperties();
+    }
+  }
+  /**
+   * Update entity property
+   */
+  updateEntityProperty(id, path, value) {
+    const entity = this.entities.get(id);
+    if (!entity || entity.locked) return;
+    const previousState = { ...entity };
+    const keys = path.split(".");
+    let target = entity;
+    for (let i = 0; i < keys.length - 1; i++) {
+      target = target[keys[i]];
+    }
+    target[keys[keys.length - 1]] = value;
+    this.addToHistory("modify", id, previousState, entity);
+    this.updateProperties();
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Property updated:", path, "=", value);
+    }
+  }
+  /**
+   * Add history entry
+   */
+  addToHistory(action, entityId, previousState, newState) {
+    this.history = this.history.slice(0, this.historyIndex + 1);
+    this.history.push({
+      action,
+      entityId,
+      previousState,
+      newState,
+      timestamp: Date.now()
+    });
+    this.historyIndex++;
+    if (this.history.length > this.maxHistorySize) {
+      this.history.shift();
+      this.historyIndex--;
+    }
+  }
+  /**
+   * Undo last action
+   */
+  undo() {
+    if (this.historyIndex < 0) return;
+    const entry = this.history[this.historyIndex];
+    if (entry.action === "create") {
+      this.entities.delete(entry.entityId);
+    } else if (entry.action === "delete") {
+      this.entities.set(entry.entityId, entry.previousState);
+    } else if (entry.action === "modify") {
+      this.entities.set(entry.entityId, entry.previousState);
+    }
+    this.historyIndex--;
+    this.updateHierarchy();
+    this.updateProperties();
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Undo:", entry.action);
+    }
+  }
+  /**
+   * Redo last undone action
+   */
+  redo() {
+    if (this.historyIndex >= this.history.length - 1) return;
+    this.historyIndex++;
+    const entry = this.history[this.historyIndex];
+    if (entry.action === "create") {
+      this.entities.set(entry.entityId, entry.newState);
+    } else if (entry.action === "delete") {
+      this.entities.delete(entry.entityId);
+    } else if (entry.action === "modify") {
+      this.entities.set(entry.entityId, entry.newState);
+    }
+    this.updateHierarchy();
+    this.updateProperties();
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Redo:", entry.action);
+    }
+  }
+  /**
+   * Update hierarchy panel
+   */
+  updateHierarchy() {
+    if (!this.hierarchyPanel) return;
+    const content = this.hierarchyPanel.querySelector("#hierarchy-content");
+    if (!content) return;
+    let html = '<div class="hierarchy-list">';
+    for (const entity of this.entities.values()) {
+      const selectedClass = entity.selected ? "selected" : "";
+      const visibleIcon = entity.visible ? "\u{1F441}" : "\u{1F6AB}";
+      const lockedIcon = entity.locked ? "\u{1F512}" : "";
+      html += `
+        <div class="hierarchy-item ${selectedClass}" data-entity-id="${entity.id}">
+          <span class="entity-icon">${this.getEntityIcon(entity.type)}</span>
+          <span class="entity-name">${entity.name}</span>
+          <span class="entity-status">${visibleIcon} ${lockedIcon}</span>
+        </div>
+      `;
+    }
+    html += "</div>";
+    content.innerHTML = html;
+    const entityCount = document.getElementById("entity-count");
+    const selectedCount = document.getElementById("selected-count");
+    if (entityCount) entityCount.textContent = this.entities.size.toString();
+    if (selectedCount) selectedCount.textContent = this.selectedEntityIds.size.toString();
+  }
+  /**
+   * Get entity icon
+   */
+  getEntityIcon(type) {
+    const icons = {
+      object: "\u{1F4E6}",
+      light: "\u{1F4A1}",
+      camera: "\u{1F4F7}",
+      group: "\u{1F4C1}"
+    };
+    return icons[type] || "\u{1F4E6}";
+  }
+  /**
+   * Update properties panel
+   */
+  updateProperties() {
+    if (!this.propertiesPanel) return;
+    const content = this.propertiesPanel.querySelector("#properties-content");
+    if (!content) return;
+    if (this.selectedEntityIds.size === 0) {
+      content.innerHTML = `
+        <div class="no-selection">
+          <p>No entity selected</p>
+          <p class="hint">Select an entity in the Hierarchy or Viewport</p>
+        </div>
+      `;
+      return;
+    }
+    const entityId = Array.from(this.selectedEntityIds)[0];
+    const entity = this.entities.get(entityId);
+    if (!entity) return;
+    const html = `
+      <div class="properties-inspector">
+        <div class="property-group">
+          <h4>Transform</h4>
+          <div class="property-row">
+            <label>Position</label>
+            <div class="vector3-input">
+              <input type="number" value="${entity.transform.position[0]}" step="0.1" data-property="transform.position.0">
+              <input type="number" value="${entity.transform.position[1]}" step="0.1" data-property="transform.position.1">
+              <input type="number" value="${entity.transform.position[2]}" step="0.1" data-property="transform.position.2">
+            </div>
+          </div>
+          <div class="property-row">
+            <label>Rotation</label>
+            <div class="vector3-input">
+              <input type="number" value="${entity.transform.rotation[0]}" step="1" data-property="transform.rotation.0">
+              <input type="number" value="${entity.transform.rotation[1]}" step="1" data-property="transform.rotation.1">
+              <input type="number" value="${entity.transform.rotation[2]}" step="1" data-property="transform.rotation.2">
+            </div>
+          </div>
+          <div class="property-row">
+            <label>Scale</label>
+            <div class="vector3-input">
+              <input type="number" value="${entity.transform.scale[0]}" step="0.1" data-property="transform.scale.0">
+              <input type="number" value="${entity.transform.scale[1]}" step="0.1" data-property="transform.scale.1">
+              <input type="number" value="${entity.transform.scale[2]}" step="0.1" data-property="transform.scale.2">
+            </div>
+          </div>
+        </div>
+
+        <div class="property-group">
+          <h4>Traits</h4>
+          <div class="traits-list">
+            ${entity.traits.map((t) => `<div class="trait-badge">${t.name}</div>`).join("")}
+          </div>
+          <button class="add-trait-btn">+ Add Trait</button>
+        </div>
+      </div>
+
+      <style>
+        .properties-inspector {
+          padding: 10px;
+        }
+
+        .property-group {
+          margin-bottom: 20px;
+          padding: 10px;
+          background: rgba(0, 0, 0, 0.2);
+          border-radius: 6px;
+        }
+
+        .property-group h4 {
+          margin: 0 0 10px 0;
+          font-size: 13px;
+          color: #60a5fa;
+        }
+
+        .property-row {
+          margin-bottom: 10px;
+        }
+
+        .property-row label {
+          display: block;
+          font-size: 12px;
+          margin-bottom: 5px;
+          color: #94a3b8;
+        }
+
+        .vector3-input {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          gap: 5px;
+        }
+
+        .vector3-input input {
+          padding: 5px;
+          background: rgba(0, 0, 0, 0.3);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 4px;
+          color: #fff;
+          font-size: 12px;
+        }
+
+        .traits-list {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 5px;
+          margin-bottom: 10px;
+        }
+
+        .trait-badge {
+          padding: 4px 8px;
+          background: rgba(96, 165, 250, 0.2);
+          border: 1px solid rgba(96, 165, 250, 0.4);
+          border-radius: 12px;
+          font-size: 11px;
+          color: #60a5fa;
+        }
+
+        .add-trait-btn {
+          width: 100%;
+          padding: 6px;
+          background: rgba(34, 197, 94, 0.1);
+          border: 1px solid rgba(34, 197, 94, 0.3);
+          border-radius: 4px;
+          color: #4ade80;
+          cursor: pointer;
+          font-size: 12px;
+        }
+
+        .add-trait-btn:hover {
+          background: rgba(34, 197, 94, 0.2);
+        }
+
+        .hierarchy-list {
+          padding: 5px;
+        }
+
+        .hierarchy-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 6px 10px;
+          margin-bottom: 2px;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 13px;
+        }
+
+        .hierarchy-item:hover {
+          background: rgba(96, 165, 250, 0.1);
+        }
+
+        .hierarchy-item.selected {
+          background: rgba(96, 165, 250, 0.3);
+        }
+
+        .entity-icon {
+          font-size: 14px;
+        }
+
+        .entity-name {
+          flex: 1;
+        }
+
+        .entity-status {
+          font-size: 11px;
+        }
+      </style>
+    `;
+    content.innerHTML = html;
+  }
+  /**
+   * Preview composition
+   */
+  previewComposition() {
+    const composition = this.saveComposition();
+    if (!composition) return;
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Preview:", composition);
+    }
+    this.container?.dispatchEvent(
+      new CustomEvent("holostudio:preview", {
+        detail: { composition }
+      })
+    );
+  }
+  /**
+   * Start auto-save
+   */
+  startAutoSave() {
+    if (typeof window === "undefined") return;
+    this.autoSaveTimer = window.setInterval(() => {
+      this.saveComposition();
+      if (this.config.debug) {
+        console.debug("[VisualEditor] Auto-saved");
+      }
+    }, this.config.autoSaveInterval);
+  }
+  /**
+   * Stop auto-save
+   */
+  stopAutoSave() {
+    if (this.autoSaveTimer) {
+      clearInterval(this.autoSaveTimer);
+      this.autoSaveTimer = void 0;
+    }
+  }
+  /**
+   * Dispose editor
+   */
+  dispose() {
+    this.stopAutoSave();
+    this.entities.clear();
+    this.selectedEntityIds.clear();
+    this.history = [];
+    if (this.config.debug) {
+      console.debug("[VisualEditor] Disposed");
+    }
+  }
+  /**
+   * Get all entities
+   */
+  getEntities() {
+    return Array.from(this.entities.values());
+  }
+  /**
+   * Get selected entities
+   */
+  getSelectedEntities() {
+    return Array.from(this.selectedEntityIds).map((id) => this.entities.get(id)).filter(Boolean);
+  }
+  /**
+   * Get composition
+   */
+  getComposition() {
+    return this.saveComposition();
+  }
+};
+
+// src/tools/MixamoIntegration.ts
+var MIXAMO_API_BASE = "https://www.mixamo.com/api/v1";
+var MAX_RETRIES = 5;
+var INITIAL_BACKOFF_MS = 1e3;
+var MAX_BACKOFF_MS = 3e4;
+var SUPPORTED_FORMATS = ["fbx", "glb"];
+var MixamoError = class extends Error {
+  constructor(message, code) {
+    super(message);
+    this.name = "MixamoError";
+    this.code = code;
+  }
+};
+var MixamoRateLimitError = class extends MixamoError {
+  constructor(retryAfterSeconds, attemptNumber) {
+    super(
+      `Mixamo API rate limit exceeded. Retry after ${retryAfterSeconds}s (attempt ${attemptNumber}).`,
+      "RATE_LIMIT_EXCEEDED"
+    );
+    this.name = "MixamoRateLimitError";
+    this.retryAfterSeconds = retryAfterSeconds;
+    this.attemptNumber = attemptNumber;
+  }
+};
+var MixamoTopologyError = class extends MixamoError {
+  constructor(issues) {
+    const errorIssues = issues.filter((i) => i.severity === "error");
+    const summary = errorIssues.map((i) => i.message).join("; ");
+    super(`Mesh topology unsupported for auto-rigging: ${summary}`, "UNSUPPORTED_TOPOLOGY");
+    this.name = "MixamoTopologyError";
+    this.issues = issues;
+  }
+};
+var MixamoFormatError = class extends MixamoError {
+  constructor(providedFormat) {
+    super(
+      `Unsupported mesh format "${providedFormat}". Supported formats: ${SUPPORTED_FORMATS.join(", ")}.`,
+      "UNSUPPORTED_FORMAT"
+    );
+    this.name = "MixamoFormatError";
+    this.providedFormat = providedFormat;
+    this.supportedFormats = SUPPORTED_FORMATS;
+  }
+};
+var MixamoAPI = class {
+  constructor(config) {
+    this.config = {
+      credentials: config.credentials,
+      maxRetries: config.maxRetries ?? MAX_RETRIES,
+      initialBackoffMs: config.initialBackoffMs ?? INITIAL_BACKOFF_MS,
+      debug: config.debug ?? false,
+      timeoutMs: config.timeoutMs ?? 6e4
+    };
+  }
+  // -----------------------------------------------------------------------
+  // Public API
+  // -----------------------------------------------------------------------
+  /**
+   * Upload a character mesh to Mixamo for rigging.
+   *
+   * Supports FBX and GLB formats. Validates mesh topology before upload
+   * and throws `MixamoTopologyError` for unsupported geometries.
+   *
+   * @param data - Raw mesh file data as Buffer or ArrayBuffer.
+   * @param filename - Original filename (used to detect format from extension).
+   * @returns Upload result with character ID and mesh metadata.
+   *
+   * @throws {MixamoFormatError} If the file format is not FBX or GLB.
+   * @throws {MixamoTopologyError} If the mesh has unsupported topology.
+   * @throws {MixamoRateLimitError} If the API rate limit is exceeded after max retries.
+   * @throws {MixamoError} For other API errors.
+   */
+  async uploadCharacter(data, filename) {
+    const format = this.detectFormat(filename);
+    const topologyIssues = this.validateTopology(data, format);
+    const errors = topologyIssues.filter((i) => i.severity === "error");
+    if (errors.length > 0) {
+      throw new MixamoTopologyError(topologyIssues);
+    }
+    if (topologyIssues.length > 0 && this.config.debug) {
+      console.warn(
+        "[MixamoAPI] Topology warnings:",
+        topologyIssues.map((i) => i.message)
+      );
+    }
+    const formData = this.createFormData(data, filename, format);
+    const response = await this.requestWithRetry("POST", "/characters/upload", formData, {
+      isFormData: true
+    });
+    const result = {
+      characterId: response.character_id,
+      filename,
+      format,
+      vertexCount: response.vertex_count,
+      polygonCount: response.polygon_count,
+      topologyValid: response.topology_valid,
+      uploadedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    if (this.config.debug) {
+      console.debug("[MixamoAPI] Character uploaded:", result.characterId);
+    }
+    return result;
+  }
+  /**
+   * Auto-rig an uploaded character.
+   *
+   * Triggers Mixamo's server-side auto-rigging pipeline which detects
+   * joint positions and generates a humanoid skeleton.
+   *
+   * @param characterId - The character ID from a previous upload.
+   * @param rigType - Rig type to generate. Default: 'humanoid'.
+   * @returns Rig result with bone count and quality score.
+   *
+   * @throws {MixamoRateLimitError} If the API rate limit is exceeded after max retries.
+   * @throws {MixamoError} For other API errors (e.g. character not found).
+   */
+  async autoRig(characterId, rigType = "humanoid") {
+    const response = await this.requestWithRetry("POST", `/characters/${encodeURIComponent(characterId)}/rig`, {
+      rig_type: rigType
+    });
+    const result = {
+      characterId: response.character_id,
+      rigType: response.rig_type,
+      boneCount: response.bone_count,
+      qualityScore: response.quality_score,
+      success: response.success,
+      warnings: response.warnings ?? [],
+      riggedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    if (this.config.debug) {
+      console.debug(
+        `[MixamoAPI] Character rigged: ${result.characterId} (${result.boneCount} bones, quality: ${result.qualityScore})`
+      );
+    }
+    return result;
+  }
+  /**
+   * List available animations from the Mixamo library.
+   *
+   * Supports pagination, category filtering, and text search.
+   *
+   * @param options - Listing options (page, limit, category, query, motionType).
+   * @returns Paginated list of animations.
+   *
+   * @throws {MixamoRateLimitError} If the API rate limit is exceeded after max retries.
+   * @throws {MixamoError} For other API errors.
+   */
+  async listAnimations(options = {}) {
+    const params = new URLSearchParams();
+    if (options.page) params.set("page", String(options.page));
+    if (options.limit) params.set("limit", String(options.limit));
+    if (options.category) params.set("category", options.category);
+    if (options.query) params.set("query", options.query);
+    if (options.motionType) params.set("motion_type", options.motionType);
+    const queryString = params.toString();
+    const endpoint = `/animations${queryString ? `?${queryString}` : ""}`;
+    const response = await this.requestWithRetry("GET", endpoint);
+    const result = {
+      animations: response.animations.map((a) => ({
+        id: a.id,
+        name: a.name,
+        category: a.category,
+        duration: a.duration,
+        loopable: a.loopable,
+        motionType: a.motion_type,
+        thumbnailUrl: a.thumbnail_url
+      })),
+      total: response.total,
+      page: response.page,
+      limit: response.limit,
+      hasMore: response.has_more
+    };
+    if (this.config.debug) {
+      console.debug(
+        `[MixamoAPI] Listed ${result.animations.length} animations (${result.total} total)`
+      );
+    }
+    return result;
+  }
+  /**
+   * Download an animation applied to a specific character.
+   *
+   * The animation is retargeted to the character's skeleton and returned
+   * as raw file data in the requested format (FBX or GLB).
+   *
+   * @param options - Download options (characterId, animationId, format, etc.)
+   * @returns Download result with raw file data and metadata.
+   *
+   * @throws {MixamoFormatError} If the requested format is not supported.
+   * @throws {MixamoRateLimitError} If the API rate limit is exceeded after max retries.
+   * @throws {MixamoError} For other API errors.
+   */
+  async downloadAnimation(options) {
+    const format = options.format ?? "fbx";
+    if (!SUPPORTED_FORMATS.includes(format)) {
+      throw new MixamoFormatError(format);
+    }
+    const response = await this.requestWithRetry(
+      "POST",
+      `/characters/${encodeURIComponent(options.characterId)}/animations/${encodeURIComponent(options.animationId)}/download`,
+      {
+        format,
+        include_skin: options.includeSkin ?? false,
+        fps: options.fps ?? 30,
+        keyframe_reduction: options.keyframeReduction ?? 0
+      },
+      { binary: true }
+    );
+    const suggestedFilename = `${options.characterId}_${options.animationId}.${format}`;
+    const result = {
+      data: response,
+      contentType: format === "fbx" ? "application/octet-stream" : "model/gltf-binary",
+      filename: suggestedFilename,
+      sizeBytes: response.byteLength,
+      format
+    };
+    if (this.config.debug) {
+      console.debug(
+        `[MixamoAPI] Animation downloaded: ${result.filename} (${result.sizeBytes} bytes)`
+      );
+    }
+    return result;
+  }
+  // -----------------------------------------------------------------------
+  // Format Detection & Validation
+  // -----------------------------------------------------------------------
+  /**
+   * Detect mesh format from filename extension.
+   *
+   * @param filename - The mesh filename.
+   * @returns The detected format.
+   * @throws {MixamoFormatError} If the extension is not recognized.
+   */
+  detectFormat(filename) {
+    const ext = filename.split(".").pop()?.toLowerCase();
+    if (ext === "fbx") return "fbx";
+    if (ext === "glb" || ext === "gltf") return "glb";
+    throw new MixamoFormatError(ext ?? "unknown");
+  }
+  /**
+   * Validate mesh topology for auto-rigging compatibility.
+   *
+   * Performs pre-flight checks on the mesh data to detect issues that
+   * would cause the auto-rigging pipeline to fail or produce poor results.
+   *
+   * @param data - Raw mesh file data.
+   * @param format - The mesh format.
+   * @returns Array of topology issues found (may be empty if mesh is clean).
+   */
+  validateTopology(data, format) {
+    const issues = [];
+    const byteLength = data instanceof ArrayBuffer ? data.byteLength : data.length;
+    if (byteLength < 100) {
+      issues.push({
+        code: "DEGENERATE_FACES",
+        message: "File is too small to contain valid mesh data.",
+        severity: "error"
+      });
+      return issues;
+    }
+    if (format === "fbx") {
+      const header = new Uint8Array(
+        data instanceof ArrayBuffer ? data : data.buffer,
+        data instanceof ArrayBuffer ? 0 : data.byteOffset,
+        Math.min(23, byteLength)
+      );
+      const magic = String.fromCharCode(...header.slice(0, 20));
+      if (!magic.startsWith("Kaydara FBX Binary")) {
+        if (byteLength < 1e3) {
+          issues.push({
+            code: "DEGENERATE_FACES",
+            message: "FBX file does not contain a valid binary header. ASCII FBX may have limited support.",
+            severity: "warning"
+          });
+        }
+      }
+    }
+    if (format === "glb") {
+      const header = new Uint8Array(
+        data instanceof ArrayBuffer ? data : data.buffer,
+        data instanceof ArrayBuffer ? 0 : data.byteOffset,
+        Math.min(4, byteLength)
+      );
+      const glbMagic = header[0] === 103 && header[1] === 108 && header[2] === 84 && header[3] === 70;
+      if (!glbMagic) {
+        issues.push({
+          code: "DEGENERATE_FACES",
+          message: "GLB file does not contain a valid glTF binary header.",
+          severity: "error"
+        });
+      }
+    }
+    const estimatedPolygons = byteLength / 50;
+    if (estimatedPolygons > 5e5) {
+      issues.push({
+        code: "EXCESSIVE_POLYGONS",
+        message: `Estimated polygon count (~${Math.round(estimatedPolygons).toLocaleString()}) exceeds recommended limit of 500,000 for auto-rigging. Consider decimating the mesh.`,
+        severity: "warning"
+      });
+    }
+    if (estimatedPolygons > 2e6) {
+      issues.push({
+        code: "EXCESSIVE_POLYGONS",
+        message: `Estimated polygon count (~${Math.round(estimatedPolygons).toLocaleString()}) far exceeds the maximum of 2,000,000 for auto-rigging.`,
+        severity: "error"
+      });
+    }
+    return issues;
+  }
+  // -----------------------------------------------------------------------
+  // HTTP Utilities
+  // -----------------------------------------------------------------------
+  /**
+   * Create form data for file upload.
+   */
+  createFormData(data, filename, format) {
+    return {
+      file: data,
+      filename,
+      format,
+      type: "character"
+    };
+  }
+  /**
+   * Execute an HTTP request with exponential backoff retry for rate limits.
+   *
+   * @param method - HTTP method.
+   * @param endpoint - API endpoint path (appended to base URL).
+   * @param body - Request body (JSON or form data).
+   * @param options - Additional request options.
+   * @returns Parsed response data.
+   */
+  async requestWithRetry(method, endpoint, body, options) {
+    const baseUrl = this.config.credentials.apiBase ?? MIXAMO_API_BASE;
+    const url = `${baseUrl}${endpoint}`;
+    let lastError = null;
+    for (let attempt = 0; attempt < this.config.maxRetries; attempt++) {
+      try {
+        const headers = {
+          Authorization: `Bearer ${this.config.credentials.accessToken}`,
+          Accept: options?.binary ? "application/octet-stream" : "application/json"
+        };
+        const fetchOptions = {
+          method,
+          headers,
+          signal: AbortSignal.timeout(this.config.timeoutMs)
+        };
+        if (body && method !== "GET") {
+          if (options?.isFormData) {
+            headers["Content-Type"] = "multipart/form-data";
+            fetchOptions.body = JSON.stringify(body);
+          } else {
+            headers["Content-Type"] = "application/json";
+            fetchOptions.body = JSON.stringify(body);
+          }
+        }
+        const response = await fetch(url, fetchOptions);
+        if (response.status === 429) {
+          const retryAfter = parseInt(response.headers.get("Retry-After") ?? "0", 10);
+          const backoffMs = Math.min(
+            retryAfter > 0 ? retryAfter * 1e3 : this.config.initialBackoffMs * Math.pow(2, attempt),
+            MAX_BACKOFF_MS
+          );
+          if (this.config.debug) {
+            console.warn(
+              `[MixamoAPI] Rate limited (attempt ${attempt + 1}/${this.config.maxRetries}). Retrying in ${backoffMs}ms...`
+            );
+          }
+          if (attempt === this.config.maxRetries - 1) {
+            throw new MixamoRateLimitError(Math.ceil(backoffMs / 1e3), attempt + 1);
+          }
+          await this.sleep(backoffMs);
+          continue;
+        }
+        if (!response.ok) {
+          let errorMessage = `Mixamo API error: ${response.status} ${response.statusText}`;
+          try {
+            const errorBody = await response.json();
+            if (errorBody.message) {
+              errorMessage = errorBody.message;
+            }
+            if (errorBody.error) {
+              errorMessage = errorBody.error;
+            }
+          } catch {
+          }
+          throw new MixamoError(errorMessage, `HTTP_${response.status}`);
+        }
+        if (options?.binary) {
+          return await response.arrayBuffer();
+        }
+        return await response.json();
+      } catch (error) {
+        if (error instanceof MixamoRateLimitError || error instanceof MixamoTopologyError || error instanceof MixamoFormatError) {
+          throw error;
+        }
+        lastError = error instanceof Error ? error : new Error(String(error));
+        if (attempt < this.config.maxRetries - 1) {
+          const backoffMs = Math.min(
+            this.config.initialBackoffMs * Math.pow(2, attempt),
+            MAX_BACKOFF_MS
+          );
+          if (this.config.debug) {
+            console.warn(
+              `[MixamoAPI] Request failed (attempt ${attempt + 1}/${this.config.maxRetries}): ${lastError.message}. Retrying in ${backoffMs}ms...`
+            );
+          }
+          await this.sleep(backoffMs);
+          continue;
+        }
+      }
+    }
+    throw new MixamoError(
+      `Request failed after ${this.config.maxRetries} attempts: ${lastError?.message ?? "Unknown error"}`,
+      "MAX_RETRIES_EXCEEDED"
+    );
+  }
+  /**
+   * Sleep for a given number of milliseconds.
+   */
+  sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+};
+var MixamoPresetMapper = class {
+  constructor() {
+    this.mappings = /* @__PURE__ */ new Map();
+    this.reverseIndex = /* @__PURE__ */ new Map();
+    this.loadDefaultMappings();
+  }
+  /**
+   * Get the Mixamo animation mapping for a preset name.
+   *
+   * @param presetName - HoloScript animation preset name (e.g. 'walk', 'idle').
+   * @returns The mapping, or undefined if no mapping exists.
+   */
+  getMixamoId(presetName) {
+    return this.mappings.get(presetName.toLowerCase());
+  }
+  /**
+   * Get the HoloScript preset name for a Mixamo animation ID.
+   *
+   * @param mixamoId - Mixamo animation ID.
+   * @returns The preset name, or undefined if no reverse mapping exists.
+   */
+  getPresetName(mixamoId) {
+    return this.reverseIndex.get(mixamoId);
+  }
+  /**
+   * Get all preset-to-Mixamo mappings.
+   *
+   * @returns Array of all mappings.
+   */
+  getAllMappings() {
+    return Array.from(this.mappings.values());
+  }
+  /**
+   * Check if a mapping exists for a given preset name.
+   *
+   * @param presetName - HoloScript animation preset name.
+   */
+  hasMapping(presetName) {
+    return this.mappings.has(presetName.toLowerCase());
+  }
+  /**
+   * Register a custom preset-to-Mixamo mapping.
+   *
+   * @param mapping - The mapping to register.
+   */
+  registerMapping(mapping) {
+    const key = mapping.presetName.toLowerCase();
+    this.mappings.set(key, mapping);
+    this.reverseIndex.set(mapping.mixamoAnimationId, key);
+    for (const altId of mapping.alternativeIds) {
+      this.reverseIndex.set(altId, key);
+    }
+  }
+  /**
+   * Search for mappings by Mixamo clip name (partial, case-insensitive).
+   *
+   * @param query - Search query string.
+   * @returns Array of matching mappings.
+   */
+  searchByClipName(query) {
+    const q = query.toLowerCase();
+    const results = [];
+    for (const mapping of this.mappings.values()) {
+      if (mapping.mixamoClipName.toLowerCase().includes(q)) {
+        results.push(mapping);
+      }
+    }
+    return results;
+  }
+  /**
+   * Load the default preset-to-Mixamo mappings for all 15 canonical presets.
+   *
+   * Mixamo animation IDs are based on the Mixamo REST API's internal
+   * identifiers. These map to the canonical clip names defined in
+   * @holoscript/animation-presets.
+   */
+  loadDefaultMappings() {
+    const defaults = [
+      {
+        presetName: "walk",
+        mixamoAnimationId: "14667",
+        mixamoClipName: "Walking",
+        alternativeIds: ["14668", "14670", "14671", "14672"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "run",
+        mixamoAnimationId: "14524",
+        mixamoClipName: "Running",
+        alternativeIds: ["14525", "14526", "14527", "14528"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "idle",
+        mixamoAnimationId: "14330",
+        mixamoClipName: "Idle",
+        alternativeIds: ["14331", "14332", "14333"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "jump",
+        mixamoAnimationId: "14340",
+        mixamoClipName: "Jump",
+        alternativeIds: ["14341", "14342", "14343", "14344"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "attack",
+        mixamoAnimationId: "14084",
+        mixamoClipName: "Sword And Shield Attack",
+        alternativeIds: ["14085", "14086", "14088", "14090"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "dance",
+        mixamoAnimationId: "14189",
+        mixamoClipName: "Hip Hop Dancing",
+        alternativeIds: ["14190", "14191", "14192", "14193"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "wave",
+        mixamoAnimationId: "14660",
+        mixamoClipName: "Waving",
+        alternativeIds: ["14661"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "speak",
+        mixamoAnimationId: "14591",
+        mixamoClipName: "Talking",
+        alternativeIds: ["14592", "14593"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "sit",
+        mixamoAnimationId: "14564",
+        mixamoClipName: "Sitting",
+        alternativeIds: ["14565", "14566"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "sleep",
+        mixamoAnimationId: "14572",
+        mixamoClipName: "Sleeping Idle",
+        alternativeIds: ["14573"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "crouch",
+        mixamoAnimationId: "14180",
+        mixamoClipName: "Crouching Idle",
+        alternativeIds: ["14181", "14182", "14183"],
+        speedAdjustment: 1
+      },
+      {
+        presetName: "swim",
+        mixamoAnimationId: "14610",
+        mixamoClipName: "Swimming",
+        alternativeIds: ["14611", "14612", "14613"],
+        speedAdjustment: 0.9
+      },
+      {
+        presetName: "fly",
+        mixamoAnimationId: "14250",
+        mixamoClipName: "Flying",
+        alternativeIds: ["14251", "14252", "14253"],
+        speedAdjustment: 0.8
+      },
+      {
+        presetName: "climb",
+        mixamoAnimationId: "14160",
+        mixamoClipName: "Climbing",
+        alternativeIds: ["14161", "14162", "14163"],
+        speedAdjustment: 0.8
+      },
+      {
+        presetName: "emote",
+        mixamoAnimationId: "14220",
+        mixamoClipName: "Cheering",
+        alternativeIds: ["14221", "14222", "14223"],
+        speedAdjustment: 1
+      }
+    ];
+    for (const mapping of defaults) {
+      this.registerMapping(mapping);
+    }
+  }
+};
+var CharacterTemplateRegistry = class {
+  /**
+   * Creates a new CharacterTemplateRegistry pre-loaded with default templates.
+   * Pass `false` to create an empty registry.
+   */
+  constructor(loadDefaults = true) {
+    this.templates = /* @__PURE__ */ new Map();
+    if (loadDefaults) {
+      this.loadDefaultTemplates();
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Lookup
+  // -----------------------------------------------------------------------
+  /**
+   * Get a template by its unique identifier.
+   *
+   * @param id - Template ID.
+   * @returns The template, or undefined if not found.
+   */
+  get(id) {
+    return this.templates.get(id);
+  }
+  /**
+   * Check if a template exists.
+   *
+   * @param id - Template ID.
+   */
+  has(id) {
+    return this.templates.has(id);
+  }
+  // -----------------------------------------------------------------------
+  // Filtering
+  // -----------------------------------------------------------------------
+  /**
+   * Get all templates matching a specific archetype.
+   *
+   * @param archetype - The character archetype to filter by.
+   * @returns Array of matching templates.
+   */
+  getByArchetype(archetype) {
+    const results = [];
+    for (const template of this.templates.values()) {
+      if (template.archetype === archetype) {
+        results.push(template);
+      }
+    }
+    return results;
+  }
+  /**
+   * Get all templates matching a specific rig type.
+   *
+   * @param rigType - Rig type (e.g. "humanoid", "quadruped").
+   * @returns Array of matching templates.
+   */
+  getByRigType(rigType) {
+    const results = [];
+    for (const template of this.templates.values()) {
+      if (template.rigType === rigType) {
+        results.push(template);
+      }
+    }
+    return results;
+  }
+  /**
+   * Search templates by name, description, or tags.
+   *
+   * @param query - Search query (case-insensitive substring match).
+   * @returns Array of matching templates.
+   */
+  search(query) {
+    const q = query.toLowerCase();
+    const results = [];
+    for (const template of this.templates.values()) {
+      const matchesName = template.name.toLowerCase().includes(q);
+      const matchesDescription = template.description.toLowerCase().includes(q);
+      const matchesTags = template.tags.some((t) => t.toLowerCase().includes(q));
+      if (matchesName || matchesDescription || matchesTags) {
+        results.push(template);
+      }
+    }
+    return results;
+  }
+  // -----------------------------------------------------------------------
+  // Enumeration
+  // -----------------------------------------------------------------------
+  /**
+   * Get all registered templates.
+   */
+  getAll() {
+    return Array.from(this.templates.values());
+  }
+  /**
+   * Get all available archetypes that have at least one template.
+   */
+  getAvailableArchetypes() {
+    const archetypes = /* @__PURE__ */ new Set();
+    for (const template of this.templates.values()) {
+      archetypes.add(template.archetype);
+    }
+    return Array.from(archetypes);
+  }
+  /**
+   * Get the total number of registered templates.
+   */
+  get size() {
+    return this.templates.size;
+  }
+  // -----------------------------------------------------------------------
+  // Registration
+  // -----------------------------------------------------------------------
+  /**
+   * Register a custom character template.
+   *
+   * @param template - The template to register.
+   */
+  register(template) {
+    this.templates.set(template.id, template);
+  }
+  /**
+   * Remove a template from the registry.
+   *
+   * @param id - Template ID to remove.
+   * @returns `true` if the template was found and removed.
+   */
+  unregister(id) {
+    return this.templates.delete(id);
+  }
+  // -----------------------------------------------------------------------
+  // Default Templates
+  // -----------------------------------------------------------------------
+  /**
+   * Load the 12 default pre-rigged character templates.
+   *
+   * These cover common humanoid archetypes used in spatial computing,
+   * VR, game development, and animation workflows.
+   */
+  loadDefaultTemplates() {
+    const defaults = [
+      // ---- Male Adult Archetypes ----
+      {
+        id: "xbot",
+        name: "X Bot",
+        archetype: "male-adult",
+        description: "Mixamo default male humanoid. Clean topology, production-ready skeleton with 65 bones. Ideal for prototyping and general-purpose character animation.",
+        mixamoCharacterId: "mixamo-xbot-v1",
+        rigType: "humanoid",
+        boneCount: 65,
+        polygonCount: 12456,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "run", "jump"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/xbot.png",
+        tags: ["male", "humanoid", "default", "robot", "prototype"],
+        isDefault: true
+      },
+      {
+        id: "brute",
+        name: "Brute",
+        archetype: "male-adult",
+        description: "Muscular male character with heavy build. Suitable for warrior, fighter, and action archetypes. Enhanced upper body deformation.",
+        mixamoCharacterId: "mixamo-brute-v1",
+        rigType: "humanoid",
+        boneCount: 65,
+        polygonCount: 18234,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "attack"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/brute.png",
+        tags: ["male", "humanoid", "muscular", "warrior", "heavy"],
+        isDefault: true
+      },
+      // ---- Female Adult Archetypes ----
+      {
+        id: "ybot",
+        name: "Y Bot",
+        archetype: "female-adult",
+        description: "Mixamo default female humanoid. Clean topology, production-ready skeleton with 65 bones. Ideal for prototyping and general-purpose character animation.",
+        mixamoCharacterId: "mixamo-ybot-v1",
+        rigType: "humanoid",
+        boneCount: 65,
+        polygonCount: 11892,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "run", "dance"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/ybot.png",
+        tags: ["female", "humanoid", "default", "robot", "prototype"],
+        isDefault: true
+      },
+      {
+        id: "maria",
+        name: "Maria",
+        archetype: "female-adult",
+        description: "Realistic female character with detailed facial blend shapes. Suitable for cinematic sequences and social VR.",
+        mixamoCharacterId: "mixamo-maria-v1",
+        rigType: "humanoid",
+        boneCount: 67,
+        polygonCount: 22340,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "speak", "wave"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/maria.png",
+        tags: ["female", "humanoid", "realistic", "facial", "cinematic"],
+        isDefault: true
+      },
+      // ---- Child Archetypes ----
+      {
+        id: "ty",
+        name: "Ty",
+        archetype: "male-child",
+        description: "Young male character with child proportions. Adjusted bone hierarchy for accurate child movement and shorter stride length.",
+        mixamoCharacterId: "mixamo-ty-v1",
+        rigType: "humanoid",
+        boneCount: 63,
+        polygonCount: 9876,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "run", "jump"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/ty.png",
+        tags: ["child", "male", "humanoid", "young", "small"],
+        isDefault: true
+      },
+      {
+        id: "lily",
+        name: "Lily",
+        archetype: "female-child",
+        description: "Young female character with child proportions. Suitable for educational, family-friendly, and social VR applications.",
+        mixamoCharacterId: "mixamo-lily-v1",
+        rigType: "humanoid",
+        boneCount: 63,
+        polygonCount: 10234,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "dance", "wave"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/lily.png",
+        tags: ["child", "female", "humanoid", "young", "small"],
+        isDefault: true
+      },
+      // ---- Robot Archetypes ----
+      {
+        id: "android",
+        name: "Android Unit",
+        archetype: "robot-humanoid",
+        description: "Humanoid robot with mechanical joint articulation. Rigid body segments connected by revolute joints. Suitable for sci-fi and robotics simulations.",
+        mixamoCharacterId: "mixamo-android-v1",
+        rigType: "humanoid",
+        boneCount: 60,
+        polygonCount: 15678,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "run"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/android.png",
+        tags: ["robot", "humanoid", "mechanical", "sci-fi", "android"],
+        isDefault: true
+      },
+      {
+        id: "mech-worker",
+        name: "Mech Worker",
+        archetype: "robot-mechanical",
+        description: "Industrial mechanical robot with hydraulic limbs. Heavy-duty construction archetype with simplified joint hierarchy for mechanical animation.",
+        mixamoCharacterId: "mixamo-mechworker-v1",
+        rigType: "humanoid",
+        boneCount: 48,
+        polygonCount: 20456,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "attack"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/mechworker.png",
+        tags: ["robot", "mechanical", "industrial", "heavy", "hydraulic"],
+        isDefault: true
+      },
+      // ---- Creature Archetypes ----
+      {
+        id: "drake",
+        name: "Drake",
+        archetype: "creature-bipedal",
+        description: "Bipedal dragon-like creature with wing attachments. Modified humanoid rig with additional wing and tail bone chains.",
+        mixamoCharacterId: "mixamo-drake-v1",
+        rigType: "humanoid",
+        boneCount: 78,
+        polygonCount: 24890,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "attack", "fly"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/drake.png",
+        tags: ["creature", "bipedal", "dragon", "fantasy", "wings", "tail"],
+        isDefault: true
+      },
+      {
+        id: "wolf",
+        name: "Wolf",
+        archetype: "creature-quadruped",
+        description: "Quadruped wolf with full locomotion rig. Four-legged skeleton hierarchy with spine flexibility and tail chain.",
+        mixamoCharacterId: "mixamo-wolf-v1",
+        rigType: "quadruped",
+        boneCount: 52,
+        polygonCount: 14567,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "run"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/wolf.png",
+        tags: ["creature", "quadruped", "wolf", "animal", "four-legged"],
+        isDefault: true
+      },
+      // ---- Stylized Archetypes ----
+      {
+        id: "paladin",
+        name: "Paladin",
+        archetype: "armored-knight",
+        description: "Armored knight with plate armor and cape physics. Heavy character suitable for medieval and fantasy combat scenarios.",
+        mixamoCharacterId: "mixamo-paladin-v1",
+        rigType: "humanoid",
+        boneCount: 68,
+        polygonCount: 28456,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "attack", "crouch"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/paladin.png",
+        tags: ["humanoid", "armored", "knight", "medieval", "fantasy", "heavy"],
+        isDefault: true
+      },
+      {
+        id: "trooper",
+        name: "Trooper",
+        archetype: "sci-fi-soldier",
+        description: "Sci-fi soldier with tactical gear and visor. Modern military archetype suitable for FPS, action, and tactical simulations.",
+        mixamoCharacterId: "mixamo-trooper-v1",
+        rigType: "humanoid",
+        boneCount: 65,
+        polygonCount: 19234,
+        availableFormats: ["fbx", "glb"],
+        defaultAnimations: ["idle", "walk", "run", "crouch", "attack"],
+        thumbnailUrl: "https://www.mixamo.com/thumbnails/trooper.png",
+        tags: ["humanoid", "soldier", "sci-fi", "military", "tactical", "fps"],
+        isDefault: true
+      }
+    ];
+    for (const template of defaults) {
+      this.templates.set(template.id, template);
+    }
+  }
+};
+
+Object.defineProperty(exports, "createDefaultMaterialDef", {
+  enumerable: true,
+  get: function () { return MaterialLibrary.createDefaultMaterialDef; }
+});
+Object.defineProperty(exports, "hexToRGBA", {
+  enumerable: true,
+  get: function () { return MaterialLibrary.hexToRGBA; }
+});
+Object.defineProperty(exports, "rgbaToHex", {
+  enumerable: true,
+  get: function () { return MaterialLibrary.rgbaToHex; }
+});
+exports.CharacterTemplateRegistry = CharacterTemplateRegistry;
+exports.ErrorFormatter = ErrorFormatter;
+exports.HoloScriptREPL = HoloScriptREPL;
+exports.HotReloadWatcher = HotReloadWatcher;
+exports.MaterialEditor = MaterialEditor;
+exports.MixamoAPI = MixamoAPI;
+exports.MixamoError = MixamoError;
+exports.MixamoFormatError = MixamoFormatError;
+exports.MixamoPresetMapper = MixamoPresetMapper;
+exports.MixamoRateLimitError = MixamoRateLimitError;
+exports.MixamoTopologyError = MixamoTopologyError;
+exports.SceneInspector = SceneInspector;
+exports.SourceMapGenerator = SourceMapGenerator;
+exports.VisualEditor = VisualEditor;
+exports.getMaterialEditorBuiltinPresets = getMaterialEditorBuiltinPresets;
+exports.listMaterialEditorQuickPickPresetNames = listMaterialEditorQuickPickPresetNames;
+exports.listMaterialEditorQuickPickPresetsByCategory = listMaterialEditorQuickPickPresetsByCategory;
+exports.startREPL = startREPL;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map