@fonsecabarreto/genesis-gl-core 0.1.0 → 0.1.1

package/dist/Editor/index.js

@@ -231,91 +231,172 @@ function createDefaultScene() {
     items: []
   };
 }
+function createDefaultNamedScene(name = "Scene 1", isActive = false) {
+  return { id: crypto.randomUUID(), name, isActive, ...createDefaultScene() };
+}
+function createDefaultMultiSceneFile() {
+  return { scenes: [createDefaultNamedScene("Scene 1", true)] };
+}
 
 // src/Editor/sections/scene/SceneStore.ts
-var STORAGE_KEY2 = "genesisgl__scene";
+var STORAGE_KEY2 = "genesisgl__scenes";
 var SceneStore = class {
-  scene = createDefaultScene();
+  multiScene = createDefaultMultiSceneFile();
+  activeSceneId;
   listeners = [];
-  filePath;
-  constructor(options = {}) {
-    this.filePath = options.filePath ?? null;
+  scenesListeners = [];
+  gameSceneListeners = [];
+  scenesFilePath;
+  constructor(options) {
+    this.scenesFilePath = options.scenesFilePath;
+    this.activeSceneId = this.multiScene.scenes[0].id;
     this.loadFromStorage();
   }
   // ── Initialisation ──────────────────────────────────────────
   async init() {
-    if (!this.filePath) return;
     try {
-      const res = await fetch(this.filePath);
+      const res = await fetch(this.scenesFilePath);
       if (!res.ok) {
-        console.warn(
-          `[SceneStore] Could not load "${this.filePath}" (${res.status})`
-        );
+        console.warn(`[SceneStore] Could not load "${this.scenesFilePath}" (${res.status})`);
         return;
       }
       const data = await res.json();
-      this.scene = data;
+      this.loadData(data);
       this.persist();
       this.emit();
+      this.emitScenes();
     } catch {
-      console.warn(`[SceneStore] Failed to fetch "${this.filePath}"`);
+      console.warn(`[SceneStore] Failed to fetch "${this.scenesFilePath}"`);
+    }
+  }
+  // ── Multi-scene management ───────────────────────────────────
+  /** All scenes in the project. */
+  getScenes() {
+    return this.multiScene.scenes;
+  }
+  /** Id of the currently active scene. */
+  getActiveSceneId() {
+    return this.activeSceneId;
+  }
+  /** Switch which scene is being edited. */
+  setActiveScene(id) {
+    if (!this.multiScene.scenes.find((s) => s.id === id)) return;
+    this.activeSceneId = id;
+    this.emit();
+    this.emitScenes();
+  }
+  /** Create a new scene and make it active. Returns the new scene. */
+  addScene(name = "New Scene") {
+    const scene = createDefaultNamedScene(name);
+    this.multiScene.scenes.push(scene);
+    this.activeSceneId = scene.id;
+    this.persist();
+    this.emit();
+    this.emitScenes();
+    void this.syncToServer();
+    return scene;
+  }
+  /**
+   * Delete a scene by id.
+   * The last remaining scene is never deleted.
+   */
+  removeScene(id) {
+    if (this.multiScene.scenes.length <= 1) return;
+    this.multiScene.scenes = this.multiScene.scenes.filter((s) => s.id !== id);
+    if (this.activeSceneId === id) {
+      this.activeSceneId = this.multiScene.scenes[0].id;
+    }
+    this.persist();
+    this.emit();
+    this.emitScenes();
+    void this.syncToServer();
+  }
+  /** Rename a scene. */
+  renameScene(id, name) {
+    const scene = this.multiScene.scenes.find((s) => s.id === id);
+    if (!scene) return;
+    scene.name = name;
+    this.persist();
+    this.emitScenes();
+    void this.syncToServer();
+  }
+  /**
+   * Returns the id of the scene flagged as the **game's** active scene
+   * (the one that loads at runtime), or the first scene if none is flagged.
+   */
+  getActiveGameSceneId() {
+    return this.multiScene.scenes.find((s) => s.isActive)?.id ?? this.multiScene.scenes[0].id;
+  }
+  /**
+   * Set exactly one scene as the game's active scene.
+   * All other scenes have their `isActive` flag removed.
+   */
+  setActiveGameScene(id) {
+    const target = this.multiScene.scenes.find((s) => s.id === id);
+    if (!target) return;
+    for (const s of this.multiScene.scenes) {
+      s.isActive = s.id === id;
     }
+    this.persist();
+    this.emitScenes();
+    this.emitGameScene();
+    void this.syncToServer();
   }
-  // ── Read ─────────────────────────────────────────────────────
+  // ── Read (delegated to active scene) ────────────────────────
   get() {
-    return this.scene;
+    const { id: _id, name: _name, isActive: _ia, ...spec } = this.activeScene;
+    return spec;
   }
   getItems() {
-    return this.scene.items;
+    return this.activeScene.items;
   }
   getItem(id) {
-    return this.scene.items.find((i) => i.id === id);
+    return this.activeScene.items.find((i) => i.id === id);
   }
   getPlayerSpawn() {
-    return [...this.scene.playerSpawn];
+    return [...this.activeScene.playerSpawn];
   }
-  // ── Mutations ────────────────────────────────────────────────
+  // ── Mutations (delegated to active scene) ───────────────────
   setPlayerSpawn(x, y, z) {
-    this.scene.playerSpawn = [x, y, z];
+    this.activeScene.playerSpawn = [x, y, z];
     this.persist();
     this.emit();
     void this.syncToServer();
   }
   addItem(item) {
-    this.scene.items.push(item);
+    this.activeScene.items.push(item);
     this.persist();
     this.emit();
     void this.syncToServer();
   }
   updateItem(item) {
-    const idx = this.scene.items.findIndex((i) => i.id === item.id);
+    const idx = this.activeScene.items.findIndex((i) => i.id === item.id);
     if (idx === -1) return;
-    this.scene.items[idx] = { ...item };
+    this.activeScene.items[idx] = { ...item };
     this.persist();
     this.emit();
     void this.syncToServer();
   }
   deleteItem(id) {
-    this.scene.items = this.scene.items.filter((i) => i.id !== id);
+    this.activeScene.items = this.activeScene.items.filter((i) => i.id !== id);
     this.persist();
     this.emit();
     void this.syncToServer();
   }
-  /** Replace the entire scene definition. */
+  /** Replace the entire active scene definition. */
   setScene(spec) {
-    this.scene = spec;
+    Object.assign(this.activeScene, spec);
     this.persist();
     this.emit();
     void this.syncToServer();
   }
   // ── Server sync ──────────────────────────────────────────────
   async syncToServer() {
-    if (!this.filePath) return false;
     try {
-      const res = await fetch("/api/scene", {
+      const res = await fetch("/api/scenes", {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(this.scene, null, 2)
+        body: JSON.stringify(this.multiScene, null, 2)
       });
       if (!res.ok) {
         console.warn(`[SceneStore] Server sync failed (${res.status})`);
@@ -329,7 +410,7 @@ var SceneStore = class {
   // ── Persistence ──────────────────────────────────────────────
   persist() {
     try {
-      localStorage.setItem(STORAGE_KEY2, JSON.stringify(this.scene));
+      localStorage.setItem(STORAGE_KEY2, JSON.stringify(this.multiScene));
     } catch {
       console.warn("[SceneStore] Failed to write to localStorage");
     }
@@ -338,17 +419,23 @@ var SceneStore = class {
     try {
       const raw = localStorage.getItem(STORAGE_KEY2);
       if (!raw) return;
-      const data = JSON.parse(raw);
-      if (data && Array.isArray(data.items)) {
-        this.scene = data;
-      }
+      this.loadData(JSON.parse(raw));
     } catch {
       console.warn("[SceneStore] Failed to read from localStorage");
     }
   }
+  loadData(data) {
+    if (data !== null && typeof data === "object" && Array.isArray(data.scenes) && data.scenes.length > 0) {
+      this.multiScene = data;
+      if (!this.multiScene.scenes.find((s) => s.id === this.activeSceneId)) {
+        this.activeSceneId = this.multiScene.scenes[0].id;
+      }
+    }
+  }
   // ── File I/O ─────────────────────────────────────────────────
-  async exportToFile(filename = "scene.json") {
-    const json = JSON.stringify(this.scene, null, 2);
+  /** Export the full multi-scene file. */
+  async exportToFile(filename = "scenes.json") {
+    const json = JSON.stringify(this.multiScene, null, 2);
     const blob = new Blob([json], { type: "application/json" });
     if ("showSaveFilePicker" in window) {
       try {
@@ -372,6 +459,7 @@ var SceneStore = class {
     a.click();
     URL.revokeObjectURL(url);
   }
+  /** Import a multi-scene JSON file, replacing current data. */
   importFromFile() {
     return new Promise((resolve) => {
       const input = document.createElement("input");
@@ -386,11 +474,10 @@ var SceneStore = class {
         try {
           const text = await file.text();
           const data = JSON.parse(text);
-          if (data && Array.isArray(data.items)) {
-            this.scene = data;
-            this.persist();
-            this.emit();
-          }
+          this.loadData(data);
+          this.persist();
+          this.emit();
+          this.emitScenes();
         } catch {
           console.error("[SceneStore] Failed to parse imported file");
         }
@@ -400,16 +487,54 @@ var SceneStore = class {
     });
   }
   // ── Subscriptions ────────────────────────────────────────────
+  /** Subscribe to active-scene data changes. */
   subscribe(fn) {
     this.listeners.push(fn);
     return () => {
       this.listeners = this.listeners.filter((l) => l !== fn);
     };
   }
+  /**
+   * Subscribe to scene-list or active-scene-selection changes.
+   * Fired when scenes are added/removed/renamed or the active scene switches.
+   */
+  subscribeScenes(fn) {
+    this.scenesListeners.push(fn);
+    return () => {
+      this.scenesListeners = this.scenesListeners.filter((l) => l !== fn);
+    };
+  }
+  /**
+   * Subscribe to game-scene changes.
+   * Fired only when {@link setActiveGameScene} is called — use this to reload
+   * the running game world with the newly flagged scene's data.
+   */
+  subscribeGameScene(fn) {
+    this.gameSceneListeners.push(fn);
+    return () => {
+      this.gameSceneListeners = this.gameSceneListeners.filter((l) => l !== fn);
+    };
+  }
+  // ── Private helpers ──────────────────────────────────────────
+  get activeScene() {
+    return this.multiScene.scenes.find((s) => s.id === this.activeSceneId) ?? this.multiScene.scenes[0];
+  }
   emit() {
-    const spec = this.scene;
+    const spec = this.get();
     for (const fn of this.listeners) fn(spec);
   }
+  emitScenes() {
+    const scenes = this.getScenes();
+    const activeId = this.activeSceneId;
+    for (const fn of this.scenesListeners) fn(scenes, activeId);
+  }
+  emitGameScene() {
+    const activeId = this.getActiveGameSceneId();
+    const scene = this.multiScene.scenes.find((s) => s.id === activeId);
+    if (!scene) return;
+    const { id: _id, name: _name, isActive: _ia, ...spec } = scene;
+    for (const fn of this.gameSceneListeners) fn(spec);
+  }
 };
 
 // src/Editor/sections/scene/SceneSection.ts
@@ -426,6 +551,8 @@ var SceneSection = class _SceneSection {
   selectedId = null;
   formEl = null;
   unsub;
+  unsubScenes;
+  scenesBar = null;
   modelRegistry = [];
   getMaterialNames;
   modelsFile;
@@ -443,7 +570,10 @@ var SceneSection = class _SceneSection {
       buildContent: (c) => this.buildContent(c),
       onActivate: () => this.onActivate(),
       onDeactivate: () => this.onDeactivate(),
-      destroy: () => this.unsub?.()
+      destroy: () => {
+        this.unsub?.();
+        this.unsubScenes?.();
+      }
     };
   }
   // ── Lifecycle ────────────────────────────────────────────────
@@ -464,6 +594,10 @@ var SceneSection = class _SceneSection {
   // ── Build ────────────────────────────────────────────────────
   buildContent(container) {
     this.root = container;
+    this.scenesBar = mk("div", SCENES_BAR_STYLE);
+    this.refreshScenesBar();
+    container.appendChild(this.scenesBar);
+    this.unsubScenes = this.store.subscribeScenes(() => this.refreshScenesBar());
     const toolbar = mk("div", TOOLBAR_STYLE);
     toolbar.appendChild(
       this.mkBtn("\uFF0B Item", () => this.onAdd(), "Add scene item")
@@ -512,6 +646,92 @@ var SceneSection = class _SceneSection {
     });
     this.refreshList();
   }
+  // ── Scenes bar ──────────────────────────────────────────────
+  refreshScenesBar() {
+    if (!this.scenesBar) return;
+    this.scenesBar.innerHTML = "";
+    const scenes = this.store.getScenes();
+    const activeId = this.store.getActiveSceneId();
+    for (const scene of scenes) {
+      const isEditorActive = scene.id === activeId;
+      const isGameActive = !!scene.isActive;
+      const tabWrap = mk("div", "display:flex;align-items:stretch;gap:2px;");
+      const tab = mk(
+        "button",
+        SCENE_TAB_STYLE + (isEditorActive ? SCENE_TAB_ACTIVE : "")
+      );
+      tab.textContent = scene.name;
+      tab.title = `Switch to "${scene.name}"`;
+      tab.onclick = () => {
+        this.selectedId = null;
+        this.store.setActiveScene(scene.id);
+        this.refreshList();
+        this.refreshForm();
+      };
+      tab.ondblclick = (e) => {
+        e.preventDefault();
+        const newName = prompt("Rename scene:", scene.name);
+        if (newName && newName.trim()) {
+          this.store.renameScene(scene.id, newName.trim());
+        }
+      };
+      tabWrap.appendChild(tab);
+      const playBtn = mk(
+        "button",
+        SCENE_PLAY_BTN_STYLE + (isGameActive ? SCENE_PLAY_BTN_ACTIVE : "")
+      );
+      playBtn.textContent = "\u25B6";
+      playBtn.title = isGameActive ? "This scene is loaded by the game (click another to change)" : `Set "${scene.name}" as the game\u2019s startup scene`;
+      playBtn.onclick = (e) => {
+        e.stopPropagation();
+        this.store.setActiveGameScene(scene.id);
+      };
+      tabWrap.appendChild(playBtn);
+      this.scenesBar.appendChild(tabWrap);
+    }
+    const spacer = mk("div", "flex:1;");
+    this.scenesBar.appendChild(spacer);
+    const addBtn = mk("button", SCENE_BAR_BTN_STYLE);
+    addBtn.textContent = "\uFF0B";
+    addBtn.title = "Add new scene";
+    addBtn.onclick = () => {
+      const name = prompt("New scene name:", `Scene ${scenes.length + 1}`);
+      if (name && name.trim()) {
+        this.selectedId = null;
+        this.store.addScene(name.trim());
+        this.refreshList();
+        this.refreshForm();
+      }
+    };
+    this.scenesBar.appendChild(addBtn);
+    const renameBtn = mk("button", SCENE_BAR_BTN_STYLE);
+    renameBtn.textContent = "\u270F\uFE0F";
+    renameBtn.title = "Rename active scene";
+    renameBtn.onclick = () => {
+      const current = scenes.find((s) => s.id === activeId);
+      if (!current) return;
+      const newName = prompt("Rename scene:", current.name);
+      if (newName && newName.trim()) {
+        this.store.renameScene(activeId, newName.trim());
+      }
+    };
+    this.scenesBar.appendChild(renameBtn);
+    const delBtn = mk("button", SCENE_BAR_BTN_STYLE);
+    delBtn.textContent = "\u{1F5D1}";
+    delBtn.title = scenes.length <= 1 ? "Cannot delete the last scene" : "Delete active scene";
+    delBtn.disabled = scenes.length <= 1;
+    delBtn.style.opacity = scenes.length <= 1 ? "0.35" : "1";
+    delBtn.onclick = () => {
+      const current = scenes.find((s) => s.id === activeId);
+      if (!current) return;
+      if (!confirm(`Delete scene "${current.name}"?`)) return;
+      this.selectedId = null;
+      this.store.removeScene(activeId);
+      this.refreshList();
+      this.refreshForm();
+    };
+    this.scenesBar.appendChild(delBtn);
+  }
   // ── List ─────────────────────────────────────────────────────
   refreshList() {
     if (!this.listEl) return;
@@ -561,12 +781,22 @@ var SceneSection = class _SceneSection {
         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);
+      const cardHeader = mk("div", "display:flex;align-items:center;gap:4px;margin-bottom:2px;");
+      const typeIcon = mk("span", "font-size:10px;");
+      typeIcon.textContent = item.interactive ? "\u26A1" : "\u{1F4E6}";
+      const nameEl = mk("div", "font-weight:bold;color:#9cdcfe;font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;");
+      nameEl.textContent = item.name || "(unnamed)";
+      cardHeader.appendChild(typeIcon);
+      cardHeader.appendChild(nameEl);
+      if (item.interactive) {
+        const badge = mk("span", "font-size:8px;padding:1px 4px;border-radius:2px;background:#2a3a1a;color:#8c8;border:1px solid #4a7040;flex-shrink:0;");
+        badge.textContent = "PHY";
+        cardHeader.appendChild(badge);
+      }
+      card.appendChild(cardHeader);
+      if (item.resourceKey) {
+        card.appendChild(dataRow("res", item.resourceKey));
+      }
       card.appendChild(
         dataRow(
           "pos",
@@ -614,12 +844,27 @@ var SceneSection = class _SceneSection {
     );
   }
   buildItemForm(container, item) {
-    const title = mk(
+    const titleBar = mk(
       "div",
-      "font-weight:bold;color:#9cdcfe;padding:0 0 6px;font-size:12px;"
+      "display:flex;align-items:center;gap:8px;padding:0 0 10px;border-bottom:1px solid #333;margin-bottom:4px;"
     );
-    title.textContent = item.name;
-    container.appendChild(title);
+    const typeIcon = mk("span", "font-size:16px;");
+    typeIcon.textContent = item.interactive ? "\u26A1" : "\u{1F4E6}";
+    const titleText = mk(
+      "div",
+      "font-weight:bold;color:#9cdcfe;font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+    );
+    titleText.textContent = item.name || "(unnamed)";
+    const typeBadge = mk(
+      "span",
+      "font-size:9px;padding:2px 6px;border-radius:3px;font-family:monospace;flex-shrink:0;" + (item.interactive ? "background:#2a3a1a;color:#8c8;border:1px solid #4a7040;" : "background:#1a1a2a;color:#88a;border:1px solid #445;")
+    );
+    typeBadge.textContent = item.interactive ? "PHYSICS" : "STATIC";
+    titleBar.appendChild(typeIcon);
+    titleBar.appendChild(titleText);
+    titleBar.appendChild(typeBadge);
+    container.appendChild(titleBar);
+    container.appendChild(this.sectionHeader("Identity", "\u{1F3F7}"));
     container.appendChild(
       this.textRow("Name", item.name, (v) => {
         this.store.updateItem({ ...item, name: v });
@@ -634,16 +879,7 @@ var SceneSection = class _SceneSection {
         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.sectionHeader("Transform", "\u{1F4D0}"));
     container.appendChild(
       this.vec3Row(
         "Position",
@@ -671,21 +907,39 @@ var SceneSection = class _SceneSection {
         }
       )
     );
-    const hasBounds = item.bounds != null;
+    container.appendChild(this.sectionHeader("Rendering", "\u{1F3A8}"));
+    const matNames = this.getMaterialNames();
+    const matOptions = [
+      { value: "", label: "(default)" },
+      ...matNames.map((n) => ({ value: n, label: n }))
+    ];
     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 });
-        }
+      this.selectRow("Material", item.materialKey ?? "", matOptions, (v) => {
+        this.store.updateItem({ ...item, materialKey: v || null });
+      })
+    );
+    container.appendChild(
+      this.checkRow("Collider", item.collider !== false, (on) => {
+        this.store.updateItem({ ...item, collider: on });
+      })
+    );
+    container.appendChild(this.sectionHeader("Bounds Override", "\u{1F4CF}"));
+    container.appendChild(
+      this.checkRow("Custom", item.bounds != null, (on) => {
+        this.store.updateItem({
+          ...item,
+          bounds: on ? [0, 0, 0, 1, 1, 1] : null
+        });
       })
     );
     if (item.bounds) {
       const b = item.bounds;
+      const hint = mk(
+        "div",
+        "color:#555;font-size:9px;margin:-4px 0 6px 76px;font-family:monospace;"
+      );
+      hint.textContent = "offset (x y z) + size (w h d)";
+      container.appendChild(hint);
       container.appendChild(
         this.vec3Row("Offset", [b[0], b[1], b[2]], (v) => {
           this.store.updateItem({
@@ -703,11 +957,56 @@ var SceneSection = class _SceneSection {
         })
       );
     }
+    container.appendChild(this.sectionHeader("Physics", "\u26A1"));
     container.appendChild(
-      this.checkRow("Collider", item.collider !== false, (on) => {
-        this.store.updateItem({ ...item, collider: on });
+      this.checkRow("Interactive", !!item.interactive, (on) => {
+        this.store.updateItem({
+          ...item,
+          interactive: on,
+          radius: on ? item.radius ?? 0.5 : item.radius,
+          mass: on ? item.mass ?? 1 : item.mass,
+          restitution: on ? item.restitution ?? 0.6 : item.restitution
+        });
       })
     );
+    if (item.interactive) {
+      const physHint = mk(
+        "div",
+        "color:#555;font-size:9px;margin:-4px 0 6px 76px;font-family:monospace;"
+      );
+      physHint.textContent = "leave resource empty to auto-generate a sphere mesh";
+      container.appendChild(physHint);
+      container.appendChild(
+        this.numberRow(
+          "Radius",
+          item.radius ?? 0.5,
+          { step: 0.05, min: 0.01 },
+          (v) => {
+            this.store.updateItem({ ...item, radius: v });
+          }
+        )
+      );
+      container.appendChild(
+        this.numberRow(
+          "Mass",
+          item.mass ?? 1,
+          { step: 0.1, min: 0.01 },
+          (v) => {
+            this.store.updateItem({ ...item, mass: v });
+          }
+        )
+      );
+      container.appendChild(
+        this.numberRow(
+          "Restitution",
+          item.restitution ?? 0.6,
+          { step: 0.05, min: 0, max: 1 },
+          (v) => {
+            this.store.updateItem({ ...item, restitution: v });
+          }
+        )
+      );
+    }
   }
   // ── CRUD actions ─────────────────────────────────────────────
   onAdd() {
@@ -737,6 +1036,37 @@ var SceneSection = class _SceneSection {
     this.selectedId = null;
   }
   // ── Input helpers ────────────────────────────────────────────
+  sectionHeader(label, icon = "") {
+    const wrap = mk("div", SECTION_HEADER_STYLE);
+    if (icon) {
+      const ico = mk("span", "font-size:11px;");
+      ico.textContent = icon;
+      wrap.appendChild(ico);
+    }
+    const lbl = mk(
+      "span",
+      "color:#666;font-size:9px;letter-spacing:1.5px;font-family:monospace;text-transform:uppercase;"
+    );
+    lbl.textContent = label;
+    wrap.appendChild(lbl);
+    return wrap;
+  }
+  numberRow(label, value, opts = {}, 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 = "number";
+    input.step = String(opts.step ?? 0.1);
+    if (opts.min !== void 0) input.min = String(opts.min);
+    if (opts.max !== void 0) input.max = String(opts.max);
+    input.value = String(value);
+    input.style.cssText = INPUT_STYLE + ";width:80px;";
+    input.onchange = () => onChange(parseFloat(input.value) || 0);
+    row.appendChild(input);
+    return row;
+  }
   vec3Row(label, values, onChange) {
     const row = mk("div", ROW_STYLE);
     const lbl = mk("div", LABEL_STYLE);
@@ -846,6 +1176,52 @@ var TOOLBAR_STYLE = [
   "border-bottom:1px solid #333",
   "flex-shrink:0"
 ].join(";");
+var SCENES_BAR_STYLE = [
+  "display:flex",
+  "align-items:center",
+  "gap:4px",
+  "padding:4px 8px",
+  "background:#181818",
+  "border-bottom:1px solid #333",
+  "flex-shrink:0",
+  "overflow-x:auto"
+].join(";");
+var SCENE_TAB_STYLE = [
+  "background:#252525",
+  "color:#aaa",
+  "border:1px solid #444",
+  "border-radius:4px 4px 0 0",
+  "padding:3px 10px",
+  "cursor:pointer",
+  "font-size:10px",
+  "font-family:monospace",
+  "white-space:nowrap"
+].join(";");
+var SCENE_TAB_ACTIVE = ";background:#2a2d3a;color:#9cdcfe;border-color:#5577aa;border-bottom-color:#2a2d3a;";
+var SCENE_PLAY_BTN_STYLE = [
+  "background:#252525",
+  "color:#555",
+  "border:1px solid #444",
+  "border-radius:0 4px 0 0",
+  "padding:3px 6px",
+  "cursor:pointer",
+  "font-size:9px",
+  "font-family:monospace",
+  "white-space:nowrap",
+  "line-height:1"
+].join(";");
+var SCENE_PLAY_BTN_ACTIVE = ";background:#1a3a1a;color:#4ec94e;border-color:#3a7a3a;";
+var SCENE_BAR_BTN_STYLE = [
+  "background:transparent",
+  "color:#888",
+  "border:1px solid #444",
+  "border-radius:3px",
+  "padding:2px 6px",
+  "cursor:pointer",
+  "font-size:11px",
+  "font-family:monospace",
+  "flex-shrink:0"
+].join(";");
 var BTN_STYLE = [
   "background:#2a2a2a",
   "color:#ccc",
@@ -873,6 +1249,14 @@ var CARD_STYLE = [
   "font-family:monospace",
   "font-size:10px"
 ].join(";");
+var SECTION_HEADER_STYLE = [
+  "display:flex",
+  "align-items:center",
+  "gap:6px",
+  "margin:14px 0 6px",
+  "padding-bottom:4px",
+  "border-bottom:1px solid #2a2a2a"
+].join(";");
 var ROW_STYLE = ["display:flex", "gap:6px", "margin-bottom:8px"].join(";");
 var LABEL_STYLE = [
   "color:#888",
@@ -1533,6 +1917,17 @@ var TopBar = class _TopBar {
     };
     this.root.appendChild(btn);
   }
+  /** Add the Room manager button. */
+  addRoomButton(panel) {
+    const btn = document.createElement("button");
+    btn.textContent = "\u{1F6AA} Rooms";
+    btn.style.cssText = BTN_STYLE3;
+    btn.onclick = () => {
+      panel.toggle();
+      btn.style.cssText = panel.isVisible ? BTN_ACTIVE_STYLE : BTN_STYLE3;
+    };
+    this.root.appendChild(btn);
+  }
   mkToggleBtn(label, panel) {
     return this.mkPanelToggleBtn(label, panel);
   }
@@ -1730,6 +2125,8 @@ export {
   SceneSection,
   SceneStore,
   TopBar,
+  createDefaultMultiSceneFile,
+  createDefaultNamedScene,
   createDefaultScene,
   createDefaultSceneItem,
   createDefaultSpec