@fonsecabarreto/genesis-gl-core 0.1.0

package/dist/Editor/index.js

@@ -0,0 +1,1737 @@
+// src/Editor/sections/materials/MaterialSpec.ts
+function createDefaultSpec(name = "New Material") {
+  return {
+    id: crypto.randomUUID(),
+    name,
+    albedoColor: [1, 1, 1, 1],
+    diffuse: [1, 1, 1],
+    ambientColor: [0.1, 0.1, 0.1],
+    specular: [0.3, 0.3, 0.3],
+    shininess: 64,
+    dissolve: 1,
+    unlit: false,
+    doubleSided: false,
+    friction: 0.3
+  };
+}
+
+// src/Editor/sections/materials/MaterialStore.ts
+var STORAGE_KEY = "genesisgl__material_presets";
+var MaterialStore = class {
+  specs = /* @__PURE__ */ new Map();
+  listeners = [];
+  filePath;
+  constructor(options = {}) {
+    this.filePath = options.filePath ?? null;
+    this.loadFromStorage();
+  }
+  /**
+   * Asynchronously loads materials from the configured {@link MaterialStoreOptions.filePath}.
+   * Call this once during app / resource initialisation (e.g. inside `loadResources`).
+   *
+   * The file data is merged on top of any localStorage data; conflicting IDs are
+   * overwritten by the file version.
+   */
+  async init() {
+    if (!this.filePath) return;
+    try {
+      const res = await fetch(this.filePath);
+      if (!res.ok) {
+        console.warn(
+          `[MaterialStore] Could not load "${this.filePath}" (${res.status})`
+        );
+        return;
+      }
+      const items = await res.json();
+      for (const spec of items) this.specs.set(spec.id, spec);
+      this.persist();
+      this.emit();
+    } catch {
+      console.warn(`[MaterialStore] Failed to fetch "${this.filePath}"`);
+    }
+  }
+  // ── CRUD ────────────────────────────────────────────────────
+  getAll() {
+    return [...this.specs.values()];
+  }
+  get(id) {
+    return this.specs.get(id);
+  }
+  /** Add a brand-new spec and return it. */
+  create(name) {
+    const spec = createDefaultSpec(name);
+    this.specs.set(spec.id, spec);
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+    return spec;
+  }
+  /** Replace an existing spec (matched by id). */
+  update(spec) {
+    if (!this.specs.has(spec.id)) return;
+    this.specs.set(spec.id, { ...spec });
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+  }
+  /** Deep-clone a spec under a new id. */
+  duplicate(id) {
+    const src = this.specs.get(id);
+    if (!src) return void 0;
+    const copy = {
+      ...src,
+      id: crypto.randomUUID(),
+      name: `${src.name} (copy)`,
+      albedoColor: [...src.albedoColor],
+      diffuse: [...src.diffuse],
+      ambientColor: [...src.ambientColor],
+      specular: [...src.specular]
+    };
+    this.specs.set(copy.id, copy);
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+    return copy;
+  }
+  delete(id) {
+    this.specs.delete(id);
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+  }
+  // ── Server sync ──────────────────────────────────────────────
+  /**
+   * Write the full collection to the server's `materials.json` via the
+   * `PUT /api/materials` endpoint provided by the Vite dev plugin.
+   * Silently no-ops if no `filePath` was configured.
+   */
+  async syncToServer() {
+    if (!this.filePath) return false;
+    try {
+      const res = await fetch("/api/materials", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(this.getAll(), null, 2)
+      });
+      if (!res.ok) {
+        console.warn(`[MaterialStore] Server sync failed (${res.status})`);
+      }
+      return res.ok;
+    } catch {
+      console.warn("[MaterialStore] syncToServer: network error");
+      return false;
+    }
+  }
+  // ── Persistence ──────────────────────────────────────────────
+  persist() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(this.getAll()));
+    } catch {
+      console.warn("[MaterialStore] Failed to write to localStorage");
+    }
+  }
+  loadFromStorage() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const items = JSON.parse(raw);
+      for (const spec of items) this.specs.set(spec.id, spec);
+    } catch {
+      console.warn("[MaterialStore] Failed to read from localStorage");
+    }
+  }
+  // ── File I/O ─────────────────────────────────────────────────
+  /** Download the full collection as a `.json` file (defaults to the configured filePath name). */
+  async exportToFile(filename) {
+    const defaultName = this.filePath ? this.filePath.split("/").pop() ?? "materials.json" : "materials.json";
+    const name = filename ?? defaultName;
+    const json = JSON.stringify(this.getAll(), null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    if ("showSaveFilePicker" in window) {
+      try {
+        const handle = await window.showSaveFilePicker({
+          suggestedName: name,
+          types: [
+            { description: "JSON", accept: { "application/json": [".json"] } }
+          ]
+        });
+        const writable = await handle.createWritable();
+        await writable.write(blob);
+        await writable.close();
+        return;
+      } catch {
+      }
+    }
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  /**
+   * Open a file-picker, parse the JSON, and merge imported specs.
+   * Existing specs with the same id are overwritten.
+   */
+  importFromFile() {
+    return new Promise((resolve) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json,application/json";
+      input.onchange = async () => {
+        const file = input.files?.[0];
+        if (!file) {
+          resolve();
+          return;
+        }
+        try {
+          const text = await file.text();
+          const items = JSON.parse(text);
+          for (const spec of items) this.specs.set(spec.id, spec);
+          this.persist();
+          this.emit();
+        } catch {
+          console.error("[MaterialStore] Failed to parse imported file");
+        }
+        resolve();
+      };
+      input.click();
+    });
+  }
+  // ── Subscriptions ────────────────────────────────────────────
+  subscribe(fn) {
+    this.listeners.push(fn);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== fn);
+    };
+  }
+  emit() {
+    const all = this.getAll();
+    for (const fn of this.listeners) fn(all);
+  }
+};
+
+// src/Editor/sections/scene/SceneSpec.ts
+function createDefaultSceneItem(name = "New Item", resourceKey = "") {
+  return {
+    id: crypto.randomUUID(),
+    name,
+    resourceKey,
+    translation: [0, 0, 0],
+    rotation: [0, 0, 0],
+    scale: [1, 1, 1],
+    bounds: null,
+    collider: true,
+    materialKey: null
+  };
+}
+function createDefaultScene() {
+  return {
+    playerSpawn: [0, 0, 0],
+    items: []
+  };
+}
+
+// src/Editor/sections/scene/SceneStore.ts
+var STORAGE_KEY2 = "genesisgl__scene";
+var SceneStore = class {
+  scene = createDefaultScene();
+  listeners = [];
+  filePath;
+  constructor(options = {}) {
+    this.filePath = options.filePath ?? null;
+    this.loadFromStorage();
+  }
+  // ── Initialisation ──────────────────────────────────────────
+  async init() {
+    if (!this.filePath) return;
+    try {
+      const res = await fetch(this.filePath);
+      if (!res.ok) {
+        console.warn(
+          `[SceneStore] Could not load "${this.filePath}" (${res.status})`
+        );
+        return;
+      }
+      const data = await res.json();
+      this.scene = data;
+      this.persist();
+      this.emit();
+    } catch {
+      console.warn(`[SceneStore] Failed to fetch "${this.filePath}"`);
+    }
+  }
+  // ── Read ─────────────────────────────────────────────────────
+  get() {
+    return this.scene;
+  }
+  getItems() {
+    return this.scene.items;
+  }
+  getItem(id) {
+    return this.scene.items.find((i) => i.id === id);
+  }
+  getPlayerSpawn() {
+    return [...this.scene.playerSpawn];
+  }
+  // ── Mutations ────────────────────────────────────────────────
+  setPlayerSpawn(x, y, z) {
+    this.scene.playerSpawn = [x, y, z];
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+  }
+  addItem(item) {
+    this.scene.items.push(item);
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+  }
+  updateItem(item) {
+    const idx = this.scene.items.findIndex((i) => i.id === item.id);
+    if (idx === -1) return;
+    this.scene.items[idx] = { ...item };
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+  }
+  deleteItem(id) {
+    this.scene.items = this.scene.items.filter((i) => i.id !== id);
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+  }
+  /** Replace the entire scene definition. */
+  setScene(spec) {
+    this.scene = spec;
+    this.persist();
+    this.emit();
+    void this.syncToServer();
+  }
+  // ── Server sync ──────────────────────────────────────────────
+  async syncToServer() {
+    if (!this.filePath) return false;
+    try {
+      const res = await fetch("/api/scene", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(this.scene, null, 2)
+      });
+      if (!res.ok) {
+        console.warn(`[SceneStore] Server sync failed (${res.status})`);
+      }
+      return res.ok;
+    } catch {
+      console.warn("[SceneStore] syncToServer: network error");
+      return false;
+    }
+  }
+  // ── Persistence ──────────────────────────────────────────────
+  persist() {
+    try {
+      localStorage.setItem(STORAGE_KEY2, JSON.stringify(this.scene));
+    } catch {
+      console.warn("[SceneStore] Failed to write to localStorage");
+    }
+  }
+  loadFromStorage() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY2);
+      if (!raw) return;
+      const data = JSON.parse(raw);
+      if (data && Array.isArray(data.items)) {
+        this.scene = data;
+      }
+    } catch {
+      console.warn("[SceneStore] Failed to read from localStorage");
+    }
+  }
+  // ── File I/O ─────────────────────────────────────────────────
+  async exportToFile(filename = "scene.json") {
+    const json = JSON.stringify(this.scene, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    if ("showSaveFilePicker" in window) {
+      try {
+        const handle = await window.showSaveFilePicker({
+          suggestedName: filename,
+          types: [
+            { description: "JSON", accept: { "application/json": [".json"] } }
+          ]
+        });
+        const writable = await handle.createWritable();
+        await writable.write(blob);
+        await writable.close();
+        return;
+      } catch {
+      }
+    }
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  importFromFile() {
+    return new Promise((resolve) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json,application/json";
+      input.onchange = async () => {
+        const file = input.files?.[0];
+        if (!file) {
+          resolve();
+          return;
+        }
+        try {
+          const text = await file.text();
+          const data = JSON.parse(text);
+          if (data && Array.isArray(data.items)) {
+            this.scene = data;
+            this.persist();
+            this.emit();
+          }
+        } catch {
+          console.error("[SceneStore] Failed to parse imported file");
+        }
+        resolve();
+      };
+      input.click();
+    });
+  }
+  // ── Subscriptions ────────────────────────────────────────────
+  subscribe(fn) {
+    this.listeners.push(fn);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== fn);
+    };
+  }
+  emit() {
+    const spec = this.scene;
+    for (const fn of this.listeners) fn(spec);
+  }
+};
+
+// src/Editor/sections/scene/SceneSection.ts
+var SceneSection = class _SceneSection {
+  constructor(store, options = {}) {
+    this.store = store;
+    this.modelsFile = options.modelsFile ?? null;
+    this.getMaterialNames = options.getMaterialNames ?? (() => []);
+    this.renderer = options.renderer ?? null;
+  }
+  store;
+  root = null;
+  listEl = null;
+  selectedId = null;
+  formEl = null;
+  unsub;
+  modelRegistry = [];
+  getMaterialNames;
+  modelsFile;
+  renderer;
+  hitboxCheck = null;
+  // ── Factory ──────────────────────────────────────────────────
+  static create(store, options) {
+    return new _SceneSection(store, options);
+  }
+  // ── Tab descriptor ───────────────────────────────────────────
+  asTab() {
+    return {
+      id: "scene",
+      label: "\u{1F30D} Scene",
+      buildContent: (c) => this.buildContent(c),
+      onActivate: () => this.onActivate(),
+      onDeactivate: () => this.onDeactivate(),
+      destroy: () => this.unsub?.()
+    };
+  }
+  // ── Lifecycle ────────────────────────────────────────────────
+  onActivate() {
+    if (this.modelRegistry.length === 0 && this.modelsFile) {
+      void fetch(this.modelsFile).then((r) => r.json()).then((data) => {
+        this.modelRegistry = data;
+        this.refreshForm();
+      }).catch(
+        () => console.warn("[SceneSection] Could not load models registry")
+      );
+    }
+    this.refreshList();
+    this.refreshForm();
+  }
+  onDeactivate() {
+  }
+  // ── Build ────────────────────────────────────────────────────
+  buildContent(container) {
+    this.root = container;
+    const toolbar = mk("div", TOOLBAR_STYLE);
+    toolbar.appendChild(
+      this.mkBtn("\uFF0B Item", () => this.onAdd(), "Add scene item")
+    );
+    toolbar.appendChild(
+      this.mkBtn("\u2751", () => this.onDuplicate(), "Duplicate selected")
+    );
+    toolbar.appendChild(
+      this.mkBtn("\u{1F5D1}", () => this.onDelete(), "Delete selected")
+    );
+    const reloadBtn = mk(
+      "button",
+      BTN_STYLE + ";margin-left:auto;color:#6cf;border-color:#446;"
+    );
+    reloadBtn.textContent = "\u{1F504} Reload Game";
+    reloadBtn.title = "Sync JSON then reload game to apply changes";
+    reloadBtn.onclick = () => location.reload();
+    toolbar.appendChild(reloadBtn);
+    if (this.renderer) {
+      const hitboxLabel = document.createElement("label");
+      hitboxLabel.style.cssText = "display:flex;align-items:center;gap:4px;cursor:pointer;color:#ccc;font-size:10px;margin-left:6px;";
+      this.hitboxCheck = document.createElement("input");
+      this.hitboxCheck.type = "checkbox";
+      this.hitboxCheck.checked = this.renderer.debug;
+      this.hitboxCheck.onchange = () => {
+        if (this.renderer) {
+          this.renderer.debug = this.hitboxCheck.checked;
+        }
+      };
+      hitboxLabel.appendChild(this.hitboxCheck);
+      const hitboxText = document.createElement("span");
+      hitboxText.textContent = "Hitboxes";
+      hitboxLabel.appendChild(hitboxText);
+      toolbar.appendChild(hitboxLabel);
+    }
+    const body = mk("div", "display:flex;flex:1;overflow:hidden;");
+    this.listEl = mk("div", LIST_STYLE);
+    this.formEl = mk("div", FORM_STYLE);
+    body.appendChild(this.listEl);
+    body.appendChild(this.formEl);
+    container.appendChild(toolbar);
+    container.appendChild(body);
+    this.unsub = this.store.subscribe(() => {
+      this.refreshList();
+      this.refreshForm();
+    });
+    this.refreshList();
+  }
+  // ── List ─────────────────────────────────────────────────────
+  refreshList() {
+    if (!this.listEl) return;
+    this.listEl.innerHTML = "";
+    const spawn = this.store.getPlayerSpawn();
+    const spawnCard = mk("div", CARD_STYLE);
+    spawnCard.style.borderLeft = "3px solid #e8a";
+    const spawnLabel = mk(
+      "div",
+      "font-weight:bold;color:#e8a;margin-bottom:2px;font-size:11px;"
+    );
+    spawnLabel.textContent = "\u{1F9D1} Player Spawn";
+    spawnCard.appendChild(spawnLabel);
+    spawnCard.appendChild(
+      dataRow("pos", `${f(spawn[0])}  ${f(spawn[1])}  ${f(spawn[2])}`)
+    );
+    spawnCard.style.cursor = "pointer";
+    spawnCard.onclick = () => {
+      this.selectedId = "__player_spawn__";
+      this.refreshList();
+      this.refreshForm();
+    };
+    if (this.selectedId === "__player_spawn__") {
+      spawnCard.style.background = "#2a2d3a";
+    }
+    this.listEl.appendChild(spawnCard);
+    const sep = mk("div", "height:1px;background:#333;margin:6px 0;");
+    this.listEl.appendChild(sep);
+    const heading = mk(
+      "div",
+      "color:#666;font-size:10px;letter-spacing:1px;padding:0 0 4px;"
+    );
+    const items = this.store.getItems();
+    heading.textContent = `SCENE ITEMS  (${items.length})`;
+    this.listEl.appendChild(heading);
+    for (const item of items) {
+      const active = item.id === this.selectedId;
+      const card = mk("div", CARD_STYLE);
+      if (active) card.style.background = "#2a2d3a";
+      card.style.cursor = "pointer";
+      card.onclick = () => {
+        this.selectedId = item.id;
+        if (this.renderer) {
+          this.renderer.debug = true;
+          if (this.hitboxCheck) this.hitboxCheck.checked = true;
+        }
+        this.refreshList();
+        this.refreshForm();
+      };
+      const nameEl = mk(
+        "div",
+        "font-weight:bold;color:#9cdcfe;margin-bottom:2px;font-size:11px;"
+      );
+      nameEl.textContent = `${item.name}  [${item.resourceKey}]`;
+      card.appendChild(nameEl);
+      card.appendChild(
+        dataRow(
+          "pos",
+          `${f(item.translation[0])}  ${f(item.translation[1])}  ${f(item.translation[2])}`
+        )
+      );
+      card.appendChild(
+        dataRow(
+          "scl",
+          `${f(item.scale[0])}  ${f(item.scale[1])}  ${f(item.scale[2])}`
+        )
+      );
+      this.listEl.appendChild(card);
+    }
+  }
+  // ── Form ─────────────────────────────────────────────────────
+  refreshForm() {
+    if (!this.formEl) return;
+    this.formEl.innerHTML = "";
+    if (this.selectedId === "__player_spawn__") {
+      this.buildSpawnForm(this.formEl);
+      return;
+    }
+    const item = this.selectedId ? this.store.getItem(this.selectedId) : void 0;
+    if (!item) {
+      const hint = mk("div", "color:#666;padding:8px;font-size:11px;");
+      hint.textContent = "Select an item to edit";
+      this.formEl.appendChild(hint);
+      return;
+    }
+    this.buildItemForm(this.formEl, item);
+  }
+  buildSpawnForm(container) {
+    const spawn = this.store.getPlayerSpawn();
+    const title = mk(
+      "div",
+      "font-weight:bold;color:#e8a;padding:0 0 6px;font-size:12px;"
+    );
+    title.textContent = "\u{1F9D1} Player Spawn";
+    container.appendChild(title);
+    container.appendChild(
+      this.vec3Row("Position", spawn, (v) => {
+        this.store.setPlayerSpawn(v[0], v[1], v[2]);
+      })
+    );
+  }
+  buildItemForm(container, item) {
+    const title = mk(
+      "div",
+      "font-weight:bold;color:#9cdcfe;padding:0 0 6px;font-size:12px;"
+    );
+    title.textContent = item.name;
+    container.appendChild(title);
+    container.appendChild(
+      this.textRow("Name", item.name, (v) => {
+        this.store.updateItem({ ...item, name: v });
+      })
+    );
+    const modelOptions = this.modelRegistry.map((m) => ({
+      value: m.key,
+      label: `${m.name}  (${m.type})`
+    }));
+    container.appendChild(
+      this.selectRow("Resource", item.resourceKey, modelOptions, (v) => {
+        this.store.updateItem({ ...item, resourceKey: v });
+      })
+    );
+    const matNames = this.getMaterialNames();
+    const matOptions = [
+      { value: "", label: "(default)" },
+      ...matNames.map((n) => ({ value: n, label: n }))
+    ];
+    container.appendChild(
+      this.selectRow("Material", item.materialKey ?? "", matOptions, (v) => {
+        this.store.updateItem({ ...item, materialKey: v || null });
+      })
+    );
+    container.appendChild(
+      this.vec3Row(
+        "Position",
+        [...item.translation],
+        (v) => {
+          this.store.updateItem({ ...item, translation: v });
+        }
+      )
+    );
+    container.appendChild(
+      this.vec3Row(
+        "Rotation",
+        [...item.rotation],
+        (v) => {
+          this.store.updateItem({ ...item, rotation: v });
+        }
+      )
+    );
+    container.appendChild(
+      this.vec3Row(
+        "Scale",
+        [...item.scale],
+        (v) => {
+          this.store.updateItem({ ...item, scale: v });
+        }
+      )
+    );
+    const hasBounds = item.bounds != null;
+    container.appendChild(
+      this.checkRow("Custom Bounds", hasBounds, (on) => {
+        if (on) {
+          this.store.updateItem({
+            ...item,
+            bounds: [0, 0, 0, 1, 1, 1]
+          });
+        } else {
+          this.store.updateItem({ ...item, bounds: null });
+        }
+      })
+    );
+    if (item.bounds) {
+      const b = item.bounds;
+      container.appendChild(
+        this.vec3Row("Offset", [b[0], b[1], b[2]], (v) => {
+          this.store.updateItem({
+            ...item,
+            bounds: [v[0], v[1], v[2], b[3], b[4], b[5]]
+          });
+        })
+      );
+      container.appendChild(
+        this.vec3Row("Size", [b[3], b[4], b[5]], (v) => {
+          this.store.updateItem({
+            ...item,
+            bounds: [b[0], b[1], b[2], v[0], v[1], v[2]]
+          });
+        })
+      );
+    }
+    container.appendChild(
+      this.checkRow("Collider", item.collider !== false, (on) => {
+        this.store.updateItem({ ...item, collider: on });
+      })
+    );
+  }
+  // ── CRUD actions ─────────────────────────────────────────────
+  onAdd() {
+    const item = createDefaultSceneItem();
+    this.store.addItem(item);
+    this.selectedId = item.id;
+  }
+  onDuplicate() {
+    if (!this.selectedId || this.selectedId === "__player_spawn__") return;
+    const src = this.store.getItem(this.selectedId);
+    if (!src) return;
+    const copy = {
+      ...src,
+      id: crypto.randomUUID(),
+      name: `${src.name} (copy)`,
+      translation: [...src.translation],
+      rotation: [...src.rotation],
+      scale: [...src.scale],
+      bounds: src.bounds ? [...src.bounds] : null
+    };
+    this.store.addItem(copy);
+    this.selectedId = copy.id;
+  }
+  onDelete() {
+    if (!this.selectedId || this.selectedId === "__player_spawn__") return;
+    this.store.deleteItem(this.selectedId);
+    this.selectedId = null;
+  }
+  // ── Input helpers ────────────────────────────────────────────
+  vec3Row(label, values, onChange) {
+    const row = mk("div", ROW_STYLE);
+    const lbl = mk("div", LABEL_STYLE);
+    lbl.textContent = label;
+    row.appendChild(lbl);
+    const group = mk("div", "display:flex;gap:4px;");
+    const labels = ["X", "Y", "Z"];
+    for (let i = 0; i < 3; i++) {
+      const wrap = mk("div", "display:flex;flex-direction:column;flex:1;");
+      const axisLbl = mk("div", "color:#666;font-size:9px;text-align:center;");
+      axisLbl.textContent = labels[i];
+      const input = document.createElement("input");
+      input.type = "number";
+      input.step = "0.1";
+      input.value = String(values[i]);
+      input.style.cssText = INPUT_STYLE;
+      input.onchange = () => {
+        const v = [...values];
+        v[i] = parseFloat(input.value) || 0;
+        onChange(v);
+      };
+      wrap.appendChild(axisLbl);
+      wrap.appendChild(input);
+      group.appendChild(wrap);
+    }
+    row.appendChild(group);
+    return row;
+  }
+  textRow(label, value, onChange) {
+    const row = mk("div", ROW_STYLE);
+    const lbl = mk("div", LABEL_STYLE);
+    lbl.textContent = label;
+    row.appendChild(lbl);
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = value;
+    input.style.cssText = INPUT_STYLE + ";flex:1;";
+    input.onchange = () => onChange(input.value);
+    row.appendChild(input);
+    return row;
+  }
+  selectRow(label, value, options, onChange) {
+    const row = mk("div", ROW_STYLE);
+    const lbl = mk("div", LABEL_STYLE);
+    lbl.textContent = label;
+    row.appendChild(lbl);
+    const select = document.createElement("select");
+    select.style.cssText = INPUT_STYLE + ";flex:1;";
+    for (const opt of options) {
+      const o = document.createElement("option");
+      o.value = opt.value;
+      o.textContent = opt.label;
+      if (opt.value === value) o.selected = true;
+      select.appendChild(o);
+    }
+    select.onchange = () => onChange(select.value);
+    row.appendChild(select);
+    return row;
+  }
+  checkRow(label, checked, onChange) {
+    const row = mk("div", ROW_STYLE + ";align-items:center;");
+    const lbl = mk("div", LABEL_STYLE);
+    lbl.textContent = label;
+    row.appendChild(lbl);
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.checked = checked;
+    input.onchange = () => onChange(input.checked);
+    row.appendChild(input);
+    return row;
+  }
+  mkBtn(text, onClick, title) {
+    const btn = document.createElement("button");
+    btn.textContent = text;
+    btn.title = title;
+    btn.style.cssText = BTN_STYLE;
+    btn.onclick = onClick;
+    return btn;
+  }
+};
+function mk(tag, style = "") {
+  const el2 = document.createElement(tag);
+  if (style) el2.style.cssText = style;
+  return el2;
+}
+function f(n) {
+  return n.toFixed(2);
+}
+function dataRow(label, value) {
+  const row = document.createElement("div");
+  row.style.cssText = "display:flex;gap:4px;line-height:1.6;";
+  const lbl = document.createElement("span");
+  lbl.style.cssText = "color:#666;width:28px;flex-shrink:0;font-size:10px;";
+  lbl.textContent = label;
+  const val = document.createElement("span");
+  val.style.cssText = "color:#ccc;font-size:10px;";
+  val.textContent = value;
+  row.appendChild(lbl);
+  row.appendChild(val);
+  return row;
+}
+var TOOLBAR_STYLE = [
+  "display:flex",
+  "gap:6px",
+  "padding:6px 10px",
+  "background:#222",
+  "border-bottom:1px solid #333",
+  "flex-shrink:0"
+].join(";");
+var BTN_STYLE = [
+  "background:#2a2a2a",
+  "color:#ccc",
+  "border:1px solid #555",
+  "border-radius:4px",
+  "padding:3px 10px",
+  "cursor:pointer",
+  "font-size:11px",
+  "font-family:monospace"
+].join(";");
+var LIST_STYLE = [
+  "width:220px",
+  "overflow-y:auto",
+  "padding:8px",
+  "border-right:1px solid #333",
+  "flex-shrink:0"
+].join(";");
+var FORM_STYLE = ["flex:1", "overflow-y:auto", "padding:10px"].join(";");
+var CARD_STYLE = [
+  "background:#1e1e1e",
+  "border:1px solid #333",
+  "border-radius:4px",
+  "padding:6px 8px",
+  "margin-bottom:4px",
+  "font-family:monospace",
+  "font-size:10px"
+].join(";");
+var ROW_STYLE = ["display:flex", "gap:6px", "margin-bottom:8px"].join(";");
+var LABEL_STYLE = [
+  "color:#888",
+  "font-size:11px",
+  "width:70px",
+  "flex-shrink:0",
+  "padding-top:2px"
+].join(";");
+var INPUT_STYLE = [
+  "background:#1a1a1a",
+  "color:#ccc",
+  "border:1px solid #444",
+  "border-radius:3px",
+  "padding:3px 5px",
+  "font-size:11px",
+  "font-family:monospace",
+  "width:60px",
+  "outline:none"
+].join(";");
+
+// src/Editor/EditorSidebar.ts
+var EditorSidebar = class _EditorSidebar {
+  constructor(store) {
+    this.store = store;
+  }
+  store;
+  root;
+  tabBar;
+  contentArea;
+  tabs = [];
+  activeTabId = null;
+  // material panel state
+  listEl;
+  formEl;
+  selectedId = null;
+  unsubMaterials;
+  // drag-resize state
+  _sidebarWidth = 520;
+  _dragging = false;
+  // layout mode: 'absolute' overlays, 'shared' shrinks viewport
+  _layoutMode = "absolute";
+  _layoutBtn = null;
+  // ── Public API ──────────────────────────────────────────────
+  static mount(store) {
+    const s = new _EditorSidebar(store);
+    s.build();
+    return s;
+  }
+  show() {
+    this.root.style.display = "flex";
+    this.applyLayout();
+    if (this.activeTabId) {
+      this.tabs.find((t) => t.id === this.activeTabId)?.onActivate?.();
+    }
+  }
+  hide() {
+    if (this.activeTabId) {
+      this.tabs.find((t) => t.id === this.activeTabId)?.onDeactivate?.();
+    }
+    this.root.style.display = "none";
+    this.applyLayout();
+  }
+  toggle() {
+    if (this.root.style.display === "none") this.show();
+    else this.hide();
+  }
+  get isVisible() {
+    return this.root.style.display !== "none";
+  }
+  /** Register an extra tab. */
+  addTab(tab) {
+    this.tabs.push(tab);
+    if (this.tabBar) this.renderTabBar();
+  }
+  unmount() {
+    this.unsubMaterials?.();
+    for (const t of this.tabs) t.destroy?.();
+    this.root?.remove();
+  }
+  // ── Build ────────────────────────────────────────────────────
+  build() {
+    this.root = el("div", { id: "gl-editor-sidebar" }, SIDEBAR_STYLE);
+    this.root.style.display = "none";
+    this.root.style.width = `${this._sidebarWidth}px`;
+    const handle = el("div", {}, DRAG_HANDLE_STYLE);
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      this._dragging = true;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    });
+    document.addEventListener("mousemove", (e) => {
+      if (!this._dragging) return;
+      const newWidth = window.innerWidth - e.clientX;
+      this._sidebarWidth = Math.max(280, Math.min(newWidth, 900));
+      this.root.style.width = `${this._sidebarWidth}px`;
+      this.applyLayout();
+    });
+    document.addEventListener("mouseup", () => {
+      if (!this._dragging) return;
+      this._dragging = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    });
+    this.root.appendChild(handle);
+    const header = el("div", {}, HEADER_STYLE);
+    const title = el(
+      "span",
+      {},
+      "font-weight:bold;color:#9cdcfe;letter-spacing:1px;"
+    );
+    title.textContent = "\u{1F6E0} Editor";
+    header.appendChild(title);
+    this._layoutBtn = el(
+      "button",
+      {},
+      ICON_BTN_STYLE + ";margin-left:auto;font-size:14px;"
+    );
+    this._layoutBtn.title = "Toggle: overlay / share viewport";
+    this._layoutBtn.textContent = "\u21D4";
+    this._layoutBtn.onclick = () => this.toggleLayout();
+    header.appendChild(this._layoutBtn);
+    const closeBtn = el("button", {}, ICON_BTN_STYLE);
+    closeBtn.textContent = "\u2715";
+    closeBtn.title = "Close sidebar";
+    closeBtn.onclick = () => this.hide();
+    header.appendChild(closeBtn);
+    this.tabBar = el("div", {}, TAB_BAR_STYLE);
+    this.contentArea = el(
+      "div",
+      {},
+      "flex:1;overflow:hidden;display:flex;flex-direction:column;"
+    );
+    this.root.appendChild(header);
+    this.root.appendChild(this.tabBar);
+    this.root.appendChild(this.contentArea);
+    document.body.appendChild(this.root);
+    this.addTab({
+      id: "materials",
+      label: "\u{1F3A8} Materials",
+      buildContent: (c) => this.buildMaterialsContent(c),
+      destroy: () => this.unsubMaterials?.()
+    });
+    this.activateTab("materials");
+  }
+  // ── Layout mode ──────────────────────────────────────────────
+  toggleLayout() {
+    this._layoutMode = this._layoutMode === "absolute" ? "shared" : "absolute";
+    this.applyLayout();
+  }
+  applyLayout() {
+    const visible = this.root.style.display !== "none";
+    if (this._layoutMode === "shared" && visible) {
+      document.body.style.marginRight = `${this._sidebarWidth}px`;
+    } else {
+      document.body.style.marginRight = "0";
+    }
+    if (this._layoutBtn) {
+      this._layoutBtn.textContent = this._layoutMode === "absolute" ? "\u21D4" : "\u21E4";
+      this._layoutBtn.title = this._layoutMode === "absolute" ? "Switch to shared layout (shrink viewport)" : "Switch to overlay layout";
+    }
+  }
+  // ── Tab system ───────────────────────────────────────────────
+  renderTabBar() {
+    this.tabBar.innerHTML = "";
+    for (const tab of this.tabs) {
+      const btn = el(
+        "button",
+        {},
+        TAB_BTN_STYLE + (tab.id === this.activeTabId ? TAB_BTN_ACTIVE : "")
+      );
+      btn.textContent = tab.label;
+      btn.onclick = () => this.activateTab(tab.id);
+      this.tabBar.appendChild(btn);
+    }
+  }
+  /** Activate a tab by id. Safe to call from outside (e.g. TopBar button). */
+  activateTab(id) {
+    if (this.activeTabId && this.activeTabId !== id) {
+      this.tabs.find((t) => t.id === this.activeTabId)?.onDeactivate?.();
+    }
+    this.activeTabId = id;
+    this.renderTabBar();
+    this.contentArea.innerHTML = "";
+    const tab = this.tabs.find((t) => t.id === id);
+    if (!tab) return;
+    const c = el(
+      "div",
+      {},
+      "flex:1;overflow:hidden;display:flex;flex-direction:column;"
+    );
+    tab.buildContent(c);
+    this.contentArea.appendChild(c);
+    tab.onActivate?.();
+  }
+  // ── Materials tab content ────────────────────────────────────
+  buildMaterialsContent(container) {
+    const toolbar = el("div", {}, TOOLBAR_STYLE2);
+    toolbar.appendChild(this.mkBtn("\uFF0B", () => this.onNew(), "New material"));
+    toolbar.appendChild(this.mkBtn("\u2751", () => this.onDuplicate(), "Duplicate"));
+    toolbar.appendChild(this.mkBtn("\u{1F5D1}", () => this.onDelete(), "Delete"));
+    const reloadBtn = el(
+      "button",
+      {},
+      BTN_STYLE2 + ";margin-left:auto;color:#6cf;border-color:#446;"
+    );
+    reloadBtn.textContent = "\u{1F504} Reload Game";
+    reloadBtn.title = "Sync JSON then reload game to apply changes";
+    reloadBtn.onclick = () => location.reload();
+    toolbar.appendChild(reloadBtn);
+    const body = el("div", {}, "display:flex;flex:1;overflow:hidden;");
+    this.listEl = el("div", {}, LIST_STYLE2);
+    this.formEl = el("div", {}, FORM_STYLE2);
+    body.appendChild(this.listEl);
+    body.appendChild(this.formEl);
+    container.appendChild(toolbar);
+    container.appendChild(body);
+    this.unsubMaterials = this.store.subscribe(() => this.refreshList());
+    this.refreshList();
+  }
+  // ── List ─────────────────────────────────────────────────────
+  refreshList() {
+    this.listEl.innerHTML = "";
+    for (const spec of this.store.getAll()) {
+      const active = spec.id === this.selectedId;
+      const item = el(
+        "div",
+        {},
+        LIST_ITEM_STYLE + (active ? LIST_ITEM_ACTIVE : "")
+      );
+      const swatch = el("div", {}, swatchStyle(spec));
+      item.appendChild(swatch);
+      const nameEl = el(
+        "span",
+        {},
+        "flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+      );
+      nameEl.textContent = spec.name;
+      item.appendChild(nameEl);
+      item.onclick = () => this.select(spec.id);
+      this.listEl.appendChild(item);
+    }
+    if (this.selectedId && !this.store.get(this.selectedId)) {
+      this.selectedId = null;
+      this.formEl.innerHTML = EMPTY_FORM_HTML;
+    }
+  }
+  select(id) {
+    this.selectedId = id;
+    this.refreshList();
+    this.buildForm();
+  }
+  // ── Form ─────────────────────────────────────────────────────
+  buildForm() {
+    const spec = this.selectedId ? this.store.get(this.selectedId) : void 0;
+    this.formEl.innerHTML = "";
+    if (!spec) return;
+    const draft = {
+      ...spec,
+      albedoColor: [...spec.albedoColor],
+      diffuse: [...spec.diffuse],
+      ambientColor: [...spec.ambientColor],
+      specular: [...spec.specular]
+    };
+    const save = () => {
+      this.store.update(draft);
+      this.select(draft.id);
+    };
+    formRow(this.formEl, "Name", () => {
+      const inp = el("input", { type: "text", value: draft.name }, INPUT_STYLE2);
+      inp.oninput = () => {
+        draft.name = inp.value;
+      };
+      inp.onblur = save;
+      return inp;
+    });
+    formRow(this.formEl, "Albedo (RGBA)", () => {
+      const wrap = el("div", {}, "display:flex;gap:4px;align-items:center;");
+      const hex = rgbToHex(
+        draft.albedoColor[0],
+        draft.albedoColor[1],
+        draft.albedoColor[2]
+      );
+      const picker = el(
+        "input",
+        { type: "color", value: hex },
+        "cursor:pointer;"
+      );
+      const alphaIn = el(
+        "input",
+        {
+          type: "range",
+          min: "0",
+          max: "1",
+          step: "0.01",
+          value: String(draft.albedoColor[3])
+        },
+        "flex:1;"
+      );
+      const alphaLbl = el(
+        "span",
+        {},
+        "min-width:30px;color:#ccc;font-size:11px;"
+      );
+      alphaLbl.textContent = draft.albedoColor[3].toFixed(2);
+      const update = () => {
+        const [r, g, b] = hexToRgb(picker.value);
+        draft.albedoColor = [r, g, b, parseFloat(alphaIn.value)];
+        alphaLbl.textContent = parseFloat(alphaIn.value).toFixed(2);
+        save();
+      };
+      picker.oninput = update;
+      alphaIn.oninput = update;
+      wrap.appendChild(picker);
+      wrap.appendChild(alphaIn);
+      wrap.appendChild(alphaLbl);
+      return wrap;
+    });
+    for (const key of ["diffuse", "ambientColor", "specular"]) {
+      const label = {
+        diffuse: "Diffuse",
+        ambientColor: "Ambient",
+        specular: "Specular"
+      }[key];
+      formRow(this.formEl, label, () => {
+        const hex = rgbToHex(draft[key][0], draft[key][1], draft[key][2]);
+        const picker = el(
+          "input",
+          { type: "color", value: hex },
+          "cursor:pointer;"
+        );
+        picker.oninput = () => {
+          [draft[key][0], draft[key][1], draft[key][2]] = hexToRgb(
+            picker.value
+          );
+          save();
+        };
+        return picker;
+      });
+    }
+    numericRow(this.formEl, "Shininess", draft.shininess, 2, 256, 1, (v) => {
+      draft.shininess = v;
+      save();
+    });
+    numericRow(this.formEl, "Dissolve", draft.dissolve, 0, 1, 0.01, (v) => {
+      draft.dissolve = v;
+      save();
+    });
+    numericRow(
+      this.formEl,
+      "Friction",
+      draft.friction ?? 0.75,
+      0,
+      1,
+      0.01,
+      (v) => {
+        draft.friction = v;
+        save();
+      }
+    );
+    checkRow(this.formEl, "Unlit", draft.unlit, (v) => {
+      draft.unlit = v;
+      save();
+    });
+    checkRow(this.formEl, "Double Sided", draft.doubleSided, (v) => {
+      draft.doubleSided = v;
+      save();
+    });
+    formRow(this.formEl, "Texture Path", () => {
+      const inp = el(
+        "input",
+        {
+          type: "text",
+          value: draft.texturePath ?? "",
+          placeholder: "textures/my-tex.png"
+        },
+        INPUT_STYLE2
+      );
+      inp.oninput = () => {
+        draft.texturePath = inp.value || void 0;
+      };
+      inp.onblur = save;
+      return inp;
+    });
+  }
+  // ── Actions ──────────────────────────────────────────────────
+  onNew() {
+    const spec = this.store.create();
+    this.select(spec.id);
+  }
+  onDuplicate() {
+    if (!this.selectedId) return;
+    const copy = this.store.duplicate(this.selectedId);
+    if (copy) this.select(copy.id);
+  }
+  onDelete() {
+    if (!this.selectedId) return;
+    if (!confirm("Delete this material?")) return;
+    this.store.delete(this.selectedId);
+    this.selectedId = null;
+    this.formEl.innerHTML = EMPTY_FORM_HTML;
+  }
+  mkBtn(label, onClick, title = "") {
+    const b = el("button", {}, BTN_STYLE2);
+    b.textContent = label;
+    b.title = title;
+    b.onclick = onClick;
+    return b;
+  }
+};
+function el(tag, attrs = {}, style = "") {
+  const e = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs))
+    e[k] = v;
+  if (style) e.style.cssText = style;
+  return e;
+}
+function formRow(parent, label, buildInput) {
+  const row = el(
+    "div",
+    {},
+    "display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px;"
+  );
+  const lbl = el(
+    "label",
+    {},
+    "color:#bbb;font-size:12px;white-space:nowrap;min-width:90px;"
+  );
+  lbl.textContent = label;
+  row.appendChild(lbl);
+  const wrap = el("div", {}, "flex:1;");
+  wrap.appendChild(buildInput());
+  row.appendChild(wrap);
+  parent.appendChild(row);
+}
+function numericRow(parent, label, value, min, max, step, onChange) {
+  formRow(parent, label, () => {
+    const wrap = el("div", {}, "display:flex;gap:4px;align-items:center;");
+    const slider = el(
+      "input",
+      {
+        type: "range",
+        min: String(min),
+        max: String(max),
+        step: String(step),
+        value: String(value)
+      },
+      "flex:1;"
+    );
+    const lbl = el(
+      "span",
+      {},
+      "min-width:36px;color:#ccc;font-size:11px;text-align:right;"
+    );
+    lbl.textContent = value.toString();
+    slider.oninput = () => {
+      lbl.textContent = slider.value;
+      onChange(parseFloat(slider.value));
+    };
+    wrap.appendChild(slider);
+    wrap.appendChild(lbl);
+    return wrap;
+  });
+}
+function checkRow(parent, label, value, onChange) {
+  formRow(parent, label, () => {
+    const cb = el("input", { type: "checkbox" }, "");
+    cb.checked = value;
+    cb.onchange = () => onChange(cb.checked);
+    return cb;
+  });
+}
+function rgbToHex(r, g, b) {
+  const byte = (v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0");
+  return `#${byte(r)}${byte(g)}${byte(b)}`;
+}
+function hexToRgb(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+}
+function swatchStyle(spec) {
+  const [r, g, b, a] = spec.albedoColor;
+  return [
+    `background:rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)},${a})`,
+    "width:18px",
+    "min-width:18px",
+    "height:18px",
+    "border-radius:3px",
+    "border:1px solid #666",
+    "flex-shrink:0"
+  ].join(";");
+}
+var EMPTY_FORM_HTML = '<p style="color:#888;padding:16px 10px;font-size:12px;">Select or create a material.</p>';
+var SIDEBAR_STYLE = [
+  "position:fixed",
+  "top:32px",
+  "right:0",
+  "height:calc(100vh - 32px)",
+  "background:#1e1e1e",
+  "border-left:1px solid #444",
+  "display:flex",
+  "flex-direction:column",
+  "color:#ddd",
+  "font-family:monospace",
+  "font-size:12px",
+  "z-index:9998",
+  "box-shadow:-4px 0 20px rgba(0,0,0,.6)",
+  "overflow:hidden"
+].join(";");
+var DRAG_HANDLE_STYLE = [
+  "position:absolute",
+  "top:0",
+  "left:0",
+  "width:5px",
+  "height:100%",
+  "cursor:col-resize",
+  "z-index:1",
+  "background:transparent"
+].join(";");
+var HEADER_STYLE = [
+  "display:flex",
+  "align-items:center",
+  "gap:8px",
+  "padding:0 12px",
+  "height:36px",
+  "background:#252525",
+  "border-bottom:1px solid #444",
+  "flex-shrink:0"
+].join(";");
+var ICON_BTN_STYLE = [
+  "padding:2px 7px",
+  "background:transparent",
+  "color:#888",
+  "border:1px solid #444",
+  "border-radius:4px",
+  "cursor:pointer",
+  "font-size:12px"
+].join(";");
+var TAB_BAR_STYLE = [
+  "display:flex",
+  "background:#1a1a1a",
+  "border-bottom:1px solid #444",
+  "flex-shrink:0"
+].join(";");
+var TAB_BTN_STYLE = [
+  "padding:5px 12px",
+  "background:transparent",
+  "color:#aaa",
+  "border:none",
+  "border-right:1px solid #333",
+  "cursor:pointer",
+  "font-family:monospace",
+  "font-size:11px",
+  "white-space:nowrap"
+].join(";");
+var TAB_BTN_ACTIVE = ";background:#1e1e1e;color:#fff;border-bottom:2px solid #007acc;";
+var TOOLBAR_STYLE2 = [
+  "display:flex",
+  "align-items:center",
+  "gap:4px",
+  "padding:5px 8px",
+  "background:#252525",
+  "border-bottom:1px solid #444",
+  "flex-shrink:0"
+].join(";");
+var BTN_STYLE2 = [
+  "padding:3px 8px",
+  "background:#3a3a3a",
+  "color:#ddd",
+  "border:1px solid #555",
+  "border-radius:4px",
+  "cursor:pointer",
+  "font-family:monospace",
+  "font-size:11px"
+].join(";");
+var LIST_STYLE2 = [
+  "width:140px",
+  "min-width:140px",
+  "overflow-y:auto",
+  "border-right:1px solid #333",
+  "padding:4px",
+  "display:flex",
+  "flex-direction:column",
+  "gap:2px"
+].join(";");
+var LIST_ITEM_STYLE = [
+  "display:flex",
+  "align-items:center",
+  "gap:6px",
+  "padding:5px 6px",
+  "border-radius:4px",
+  "cursor:pointer",
+  "overflow:hidden",
+  "color:#ccc"
+].join(";");
+var LIST_ITEM_ACTIVE = ";background:#007acc22;outline:1px solid #007acc;color:#fff;";
+var FORM_STYLE2 = ["flex:1", "overflow-y:auto", "padding:10px 10px 16px"].join(
+  ";"
+);
+var INPUT_STYLE2 = [
+  "width:100%",
+  "background:#2a2a2a",
+  "border:1px solid #555",
+  "border-radius:3px",
+  "color:#ddd",
+  "padding:3px 5px",
+  "font-family:monospace",
+  "font-size:11px",
+  "box-sizing:border-box"
+].join(";");
+
+// src/Editor/TopBar.ts
+var TopBar = class _TopBar {
+  root;
+  constructor() {
+  }
+  static mount(materialPanel) {
+    const bar = new _TopBar();
+    bar.build(materialPanel);
+    return bar;
+  }
+  unmount() {
+    this.root?.remove();
+  }
+  build(materialPanel) {
+    this.root = document.createElement("div");
+    this.root.id = "gl-top-bar";
+    this.root.style.cssText = TOP_BAR_STYLE;
+    const brand = document.createElement("span");
+    brand.textContent = "GenesisGL";
+    brand.style.cssText = "font-weight:bold;color:#9cdcfe;letter-spacing:1px;margin-right:16px;";
+    this.root.appendChild(brand);
+    this.root.appendChild(this.mkToggleBtn("\u{1F3A8} Materials", materialPanel));
+    document.body.prepend(this.root);
+    document.body.style.paddingTop = `${this.root.offsetHeight || 34}px`;
+  }
+  /** Add the Models tab button after the game has started. */
+  addModelsButton(sidebar) {
+    const btn = document.createElement("button");
+    btn.textContent = "\u{1F9E0} Models";
+    btn.style.cssText = BTN_STYLE3;
+    btn.onclick = () => {
+      sidebar.show();
+      sidebar.activateTab("models");
+      btn.style.cssText = sidebar.isVisible ? BTN_ACTIVE_STYLE : BTN_STYLE3;
+    };
+    this.root.appendChild(btn);
+  }
+  /** Add the Scene tab button after the game has started. */
+  addSceneButton(sidebar) {
+    const btn = document.createElement("button");
+    btn.textContent = "\u{1F30D} Scene";
+    btn.style.cssText = BTN_STYLE3;
+    btn.onclick = () => {
+      sidebar.show();
+      sidebar.activateTab("scene");
+      btn.style.cssText = sidebar.isVisible ? BTN_ACTIVE_STYLE : BTN_STYLE3;
+    };
+    this.root.appendChild(btn);
+  }
+  mkToggleBtn(label, panel) {
+    return this.mkPanelToggleBtn(label, panel);
+  }
+  mkPanelToggleBtn(label, panel) {
+    const btn = document.createElement("button");
+    btn.textContent = label;
+    btn.style.cssText = BTN_STYLE3;
+    btn.onclick = () => {
+      panel.toggle();
+      btn.style.cssText = panel.isVisible ? BTN_ACTIVE_STYLE : BTN_STYLE3;
+    };
+    return btn;
+  }
+};
+var TOP_BAR_STYLE = [
+  "position:fixed",
+  "top:0",
+  "left:0",
+  "right:0",
+  "height:32px",
+  "z-index:9999",
+  "display:flex",
+  "align-items:center",
+  "padding:0 12px",
+  "gap:6px",
+  "background:#1a1a1a",
+  "border-bottom:1px solid #444",
+  "font-family:monospace",
+  "font-size:12px",
+  "color:#ddd",
+  "box-shadow:0 2px 8px rgba(0,0,0,.5)"
+].join(";");
+var BTN_STYLE3 = [
+  "padding:3px 10px",
+  "background:#2d2d2d",
+  "color:#ddd",
+  "border:1px solid #555",
+  "border-radius:4px",
+  "cursor:pointer",
+  "font-size:11px",
+  "font-family:monospace"
+].join(";");
+var BTN_ACTIVE_STYLE = [
+  "padding:3px 10px",
+  "background:#007acc",
+  "color:#fff",
+  "border:1px solid #007acc",
+  "border-radius:4px",
+  "cursor:pointer",
+  "font-size:11px",
+  "font-family:monospace"
+].join(";");
+
+// src/Editor/sections/models/ModelsSection.ts
+var ModelsSection = class _ModelsSection {
+  constructor(renderer, scene) {
+    this.renderer = renderer;
+    this.scene = scene;
+  }
+  renderer;
+  scene;
+  listEl = null;
+  hitboxCheck = null;
+  intervalId = null;
+  // ── Factory ──────────────────────────────────────────────────
+  static create(renderer, scene) {
+    return new _ModelsSection(renderer, scene);
+  }
+  // ── Tab descriptor ───────────────────────────────────────────
+  asTab() {
+    return {
+      id: "models",
+      label: "\u{1F9E0} Models",
+      buildContent: (c) => this.buildContent(c),
+      onActivate: () => this.start(),
+      onDeactivate: () => this.stop(),
+      destroy: () => this.stop()
+    };
+  }
+  // ── Lifecycle ────────────────────────────────────────────────
+  start() {
+    this.renderer.debug = true;
+    if (this.hitboxCheck) this.hitboxCheck.checked = true;
+    this.refresh();
+    if (this.intervalId === null) {
+      this.intervalId = setInterval(() => this.refresh(), 200);
+    }
+  }
+  stop() {
+    this.renderer.debug = false;
+    if (this.hitboxCheck) this.hitboxCheck.checked = false;
+    if (this.intervalId !== null) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+  // ── Build ────────────────────────────────────────────────────
+  buildContent(container) {
+    const controls = mk2("div", CONTROLS_STYLE);
+    const hitboxRow = document.createElement("label");
+    hitboxRow.style.cssText = "display:flex;align-items:center;gap:6px;cursor:pointer;color:#ccc;font-size:11px;";
+    this.hitboxCheck = document.createElement("input");
+    this.hitboxCheck.type = "checkbox";
+    this.hitboxCheck.checked = this.renderer.debug;
+    this.hitboxCheck.onchange = () => {
+      this.renderer.debug = this.hitboxCheck.checked;
+    };
+    hitboxRow.appendChild(this.hitboxCheck);
+    const hitboxLbl = document.createElement("span");
+    hitboxLbl.textContent = "Show Hitboxes";
+    hitboxRow.appendChild(hitboxLbl);
+    controls.appendChild(hitboxRow);
+    this.listEl = mk2("div", LIST_STYLE3);
+    container.appendChild(controls);
+    container.appendChild(this.listEl);
+  }
+  // ── Live refresh ─────────────────────────────────────────────
+  refresh() {
+    if (!this.listEl) return;
+    const entries = this.scene.getEntries();
+    this.listEl.innerHTML = "";
+    const heading = mk2(
+      "div",
+      "color:#666;font-size:10px;letter-spacing:1px;padding:0 0 4px;"
+    );
+    heading.textContent = `MODELS  (${entries.length})`;
+    this.listEl.appendChild(heading);
+    for (const [key, model] of entries) {
+      const card = mk2("div", CARD_STYLE2);
+      const nameEl = mk2(
+        "div",
+        "font-weight:bold;color:#9cdcfe;margin-bottom:4px;"
+      );
+      nameEl.textContent = key;
+      card.appendChild(nameEl);
+      const t = model.translation;
+      const r = model.rotation;
+      const s = model.scale;
+      const bb = model.boundingBox;
+      const w = bb.max[0] - bb.min[0];
+      const h = bb.max[1] - bb.min[1];
+      const d = bb.max[2] - bb.min[2];
+      card.appendChild(dataRow2("pos", `${f2(t[0])}  ${f2(t[1])}  ${f2(t[2])}`));
+      card.appendChild(dataRow2("rot", `${f2(r[0])}  ${f2(r[1])}  ${f2(r[2])}`));
+      card.appendChild(dataRow2("scl", `${f2(s[0])}  ${f2(s[1])}  ${f2(s[2])}`));
+      card.appendChild(dataRow2("bbox", `${f2(w)}w  ${f2(h)}h  ${f2(d)}d`));
+      this.listEl.appendChild(card);
+    }
+  }
+};
+function mk2(tag, style = "") {
+  const el2 = document.createElement(tag);
+  if (style) el2.style.cssText = style;
+  return el2;
+}
+function f2(n) {
+  return n.toFixed(2);
+}
+function dataRow2(label, value) {
+  const row = document.createElement("div");
+  row.style.cssText = "display:flex;gap:4px;line-height:1.6;";
+  const lbl = document.createElement("span");
+  lbl.style.cssText = "color:#666;width:28px;flex-shrink:0;font-size:10px;";
+  lbl.textContent = label;
+  const val = document.createElement("span");
+  val.style.cssText = "color:#ccc;font-size:10px;";
+  val.textContent = value;
+  row.appendChild(lbl);
+  row.appendChild(val);
+  return row;
+}
+var CONTROLS_STYLE = [
+  "padding:6px 10px",
+  "background:#222",
+  "border-bottom:1px solid #333",
+  "flex-shrink:0"
+].join(";");
+var LIST_STYLE3 = [
+  "overflow-y:auto",
+  "padding:8px",
+  "display:flex",
+  "flex-direction:column",
+  "gap:6px"
+].join(";");
+var CARD_STYLE2 = [
+  "background:#252525",
+  "border:1px solid #333",
+  "border-radius:4px",
+  "padding:6px 8px"
+].join(";");
+export {
+  EditorSidebar,
+  MaterialStore,
+  ModelsSection,
+  SceneSection,
+  SceneStore,
+  TopBar,
+  createDefaultScene,
+  createDefaultSceneItem,
+  createDefaultSpec
+};
+//# sourceMappingURL=index.js.map