Rename the Scenes panel to Authoring and lay it out in steps

The panel reads AUTHORING and groups its controls under SCENE, SHOTS,
PREVIEW and SAVE & SHARE headings, with the EDIT DETAILS / SHARE SCENE
row moved beside EXPORT / IMPORT. Text is larger with more contrast,
shots are numbered, every action has a tooltip and the status line is a
live region. Outside playback, buttons that would do nothing are
disabled. New labels are translated in every shipped language; PLAY
uses its own catalog context apart from the radio's PLAY.

src/i18n/locales/es.json

@@ -760,14 +760,8 @@
   "The globe already flies keyless. Every key below switches on another real feed — paste one and it's saved into this app's local configuration, then the server restarts itself. Server-side keys stay on this machine; Google Maps and Cesium ion run in the browser and must be provider-restricted. Keys you configured elsewhere are shown but never touched.": "El globo ya funciona sin claves. Cada clave de abajo activa otra fuente real — pega una y queda guardada en la configuración local de esta app, y luego el servidor se reinicia solo. Las claves del servidor se quedan en esta máquina; Google Maps y Cesium ion funcionan en el navegador y sus claves deben restringirse en la consola del proveedor. Las claves que configuraste en otro lugar se muestran, pero nunca se modifican.",
   "ESC to close": "ESC para cerrar",
   "The Google Maps key buys the photorealistic planet — everything else stacks on top.": "La clave de Google Maps activa el planeta fotorrealista; todo lo demás se superpone.",
-  "SCENES": "ESCENAS",
-  "Scene recipe": "Receta de escena",
-  "NEW": "NUEVA",
   "DEL": "BORRAR",
-  "CAPTURE SHOT": "CAPTURAR PLANO",
   "UPDATE SHOT": "ACTUALIZAR PLANO",
-  "START": "INICIAR",
-  "EXPORT PRESETS": "EXPORTAR PREAJUSTES",
   "IMPORT": "IMPORTAR",
   "RUN LOG": "REGISTRO DE EJECUCIÓN",
   "Starting live contacts…": "Iniciando contactos en vivo…",
@@ -3004,5 +2998,28 @@
   "Preview is off.": "La vista previa está desactivada.",
   "Automatic stop is unavailable for this voice connection.": "La parada automática no está disponible para esta conexión de voz.",
   "routing busy — too many routes at once": "servicio de rutas ocupado: demasiadas rutas a la vez",
-  "route proxy error": "error del proxy de rutas"
+  "route proxy error": "error del proxy de rutas",
+  "AUTHORING": "CREACIÓN",
+  "Create and edit scenes": "Crea y edita escenas",
+  "SCENE": "ESCENA",
+  "Scene": "Escena",
+  "NEW SCENE": "NUEVA ESCENA",
+  "Start a new, empty scene": "Empieza una escena nueva y vacía",
+  "DELETE": "ELIMINAR",
+  "Delete this scene and all of its shots": "Elimina esta escena y todos sus planos",
+  "SHOTS": "PLANOS",
+  "+ CAPTURE SHOT": "+ CAPTURAR PLANO",
+  "Add the current view, style and layers as the next shot": "Añade la vista, el estilo y las capas actuales como el siguiente plano",
+  "Replace the selected shot with the current view": "Sustituye el plano seleccionado por la vista actual",
+  "Click a shot to select it, double-click to rename.": "Haz clic en un plano para seleccionarlo y doble clic para cambiarle el nombre.",
+  "scene|PLAY": "REPRODUCIR",
+  "Play the whole scene from its first shot": "Reproduce toda la escena desde su primer plano",
+  "Stop playback (Esc)": "Detiene la reproducción (Esc)",
+  "Play only the shot after the selected one": "Reproduce solo el plano posterior al seleccionado",
+  "SAVE & SHARE": "GUARDAR Y COMPARTIR",
+  "Download every scene as a JSON file you can import later": "Descarga todas las escenas como un archivo JSON que puedes importar más tarde",
+  "Load scenes from an exported JSON file": "Carga escenas desde un archivo JSON exportado",
+  "Download the timing log of the last play": "Descarga el registro de tiempos de la última reproducción",
+  "Edit the scene title and description": "Edita el título y la descripción de la escena",
+  "Share this scene as a link or file": "Comparte esta escena como enlace o archivo"
 }

src/i18n/locales/ru.json

@@ -802,21 +802,15 @@
   "East offset from catalog position (m) — click to type": "Смещение на восток от позиции каталога (м) — нажмите для ввода",
   "SAVE CAL": "СОХРАНИТЬ КАЛИБР.",
   "RESET CAL": "СБРОСИТЬ КАЛИБР.",
-  "NEW": "НОВАЯ",
   "DEL": "УДАЛ.",
-  "CAPTURE SHOT": "СДЕЛАТЬ КАДР",
   "UPDATE SHOT": "ОБНОВИТЬ КАДР",
-  "START": "СТАРТ",
-  "EXPORT PRESETS": "ЭКСПОРТ ПРЕСЕТОВ",
   "IMPORT": "ИМПОРТ",
   "RUN LOG": "ЖУРНАЛ ЗАПУСКОВ",
   "CALIBRATION": "КАЛИБРОВКА",
   "Camera pose — click a value to type": "Поза камеры — щёлкните по значению, чтобы ввести",
   "SCENE SUMMARY": "СВОДКА ПО СЦЕНЕ",
   "CCTV camera": "Камера CCTV",
-  "Scene recipe": "Рецепт сцены",
   "DATA LAYERS": "СЛОИ ДАННЫХ",
-  "SCENES": "СЦЕНЫ",
   "Close key setup": "Закрыть настройку ключей",
   "SAVE KEYS": "СОХРАНИТЬ КЛЮЧИ",
   "Power up the globe": "Подключите потоки данных",
@@ -3073,5 +3067,28 @@
   "Preview is off.": "Предпросмотр отключён.",
   "Automatic stop is unavailable for this voice connection.": "Автоматическая остановка недоступна для этого голосового подключения.",
   "routing busy — too many routes at once": "сервис маршрутов занят: слишком много маршрутов одновременно",
-  "route proxy error": "ошибка прокси маршрутов"
+  "route proxy error": "ошибка прокси маршрутов",
+  "AUTHORING": "РЕДАКТОР",
+  "Create and edit scenes": "Создание и редактирование сцен",
+  "SCENE": "СЦЕНА",
+  "Scene": "Сцена",
+  "NEW SCENE": "НОВАЯ СЦЕНА",
+  "Start a new, empty scene": "Создать новую пустую сцену",
+  "DELETE": "УДАЛИТЬ",
+  "Delete this scene and all of its shots": "Удалить эту сцену и все её кадры",
+  "SHOTS": "КАДРЫ",
+  "+ CAPTURE SHOT": "+ СДЕЛАТЬ КАДР",
+  "Add the current view, style and layers as the next shot": "Добавить текущий вид, стиль и слои следующим кадром",
+  "Replace the selected shot with the current view": "Заменить выбранный кадр текущим видом",
+  "Click a shot to select it, double-click to rename.": "Щёлкните кадр, чтобы выбрать его, дважды — чтобы переименовать.",
+  "scene|PLAY": "ВОСПРОИЗВЕСТИ",
+  "Play the whole scene from its first shot": "Воспроизвести всю сцену с первого кадра",
+  "Stop playback (Esc)": "Остановить воспроизведение (Esc)",
+  "Play only the shot after the selected one": "Воспроизвести только кадр после выбранного",
+  "SAVE & SHARE": "СОХРАНИТЬ И ПОДЕЛИТЬСЯ",
+  "Download every scene as a JSON file you can import later": "Скачать все сцены файлом JSON для последующего импорта",
+  "Load scenes from an exported JSON file": "Загрузить сцены из экспортированного файла JSON",
+  "Download the timing log of the last play": "Скачать журнал таймингов последнего воспроизведения",
+  "Edit the scene title and description": "Изменить название и описание сцены",
+  "Share this scene as a link or file": "Поделиться сценой ссылкой или файлом"
 }

src/i18n/locales/zh-CN.json

@@ -2722,13 +2722,7 @@
   "ALL": "全部",
   "FLAT": "平面",
   "SINCE": "起始时间",
-  "SCENES": "场景",
-  "Scene recipe": "场景方案",
-  "NEW": "新建",
-  "CAPTURE SHOT": "保存镜头",
   "UPDATE SHOT": "更新镜头",
-  "START": "启动",
-  "EXPORT PRESETS": "导出预设",
   "IMPORT": "导入",
   "RUN LOG": "运行日志",
   "POWER UP": "增强",
@@ -2866,5 +2860,28 @@
   },
   "S2 Underground publishes these KMZ products to GitHub. New uploads are detected within seconds and replace the previous edition automatically. Click a marker for its report.": "S2 Underground 在 GitHub 发布这些 KMZ 产品。新上传的内容会在数秒内被检测到，并自动替换旧版本。点击标记查看报告。",
   "routing busy — too many routes at once": "路线服务繁忙：同时请求的路线过多",
-  "route proxy error": "路线代理出错"
+  "route proxy error": "路线代理出错",
+  "AUTHORING": "创作",
+  "Create and edit scenes": "创建和编辑场景",
+  "SCENE": "场景",
+  "Scene": "场景",
+  "NEW SCENE": "新建场景",
+  "Start a new, empty scene": "新建一个空场景",
+  "DELETE": "删除",
+  "Delete this scene and all of its shots": "删除此场景及其所有镜头",
+  "SHOTS": "镜头",
+  "+ CAPTURE SHOT": "+ 保存镜头",
+  "Add the current view, style and layers as the next shot": "将当前视角、样式和图层添加为下一个镜头",
+  "Replace the selected shot with the current view": "用当前视角替换所选镜头",
+  "Click a shot to select it, double-click to rename.": "单击镜头即可选中，双击可重命名。",
+  "scene|PLAY": "播放",
+  "Play the whole scene from its first shot": "从第一个镜头开始播放整个场景",
+  "Stop playback (Esc)": "停止播放（Esc）",
+  "Play only the shot after the selected one": "仅播放所选镜头的下一个镜头",
+  "SAVE & SHARE": "保存与分享",
+  "Download every scene as a JSON file you can import later": "将所有场景下载为 JSON 文件，以便日后导入",
+  "Load scenes from an exported JSON file": "从导出的 JSON 文件加载场景",
+  "Download the timing log of the last play": "下载上次播放的计时日志",
+  "Edit the scene title and description": "编辑场景标题和描述",
+  "Share this scene as a link or file": "以链接或文件形式分享此场景"
 }

src/i18n/locales/zh-Hant.json

@@ -2710,13 +2710,7 @@
   "ALL": "全部",
   "FLAT": "平面",
   "SINCE": "起始時間",
-  "SCENES": "場景",
-  "Scene recipe": "場景方案",
-  "NEW": "新建",
-  "CAPTURE SHOT": "保存鏡頭",
   "UPDATE SHOT": "更新鏡頭",
-  "START": "啟動",
-  "EXPORT PRESETS": "導出預設",
   "IMPORT": "導入",
   "RUN LOG": "運行日誌",
   "POWER UP": "增強",
@@ -2866,5 +2860,28 @@
   },
   "S2 Underground publishes these KMZ products to GitHub. New uploads are detected within seconds and replace the previous edition automatically. Click a marker for its report.": "S2 Underground 在 GitHub 發布這些 KMZ 產品。新上傳的內容會在數秒內被檢測到，並自動替換舊版本。點擊標記查看報告。",
   "routing busy — too many routes at once": "路線服務繁忙：同時請求的路線過多",
-  "route proxy error": "路線代理出錯"
+  "route proxy error": "路線代理出錯",
+  "AUTHORING": "創作",
+  "Create and edit scenes": "建立和編輯場景",
+  "SCENE": "場景",
+  "Scene": "場景",
+  "NEW SCENE": "新建場景",
+  "Start a new, empty scene": "新建一個空場景",
+  "DELETE": "刪除",
+  "Delete this scene and all of its shots": "刪除此場景及其所有鏡頭",
+  "SHOTS": "鏡頭",
+  "+ CAPTURE SHOT": "+ 保存鏡頭",
+  "Add the current view, style and layers as the next shot": "將當前視角、樣式和圖層添加為下一個鏡頭",
+  "Replace the selected shot with the current view": "用當前視角替換所選鏡頭",
+  "Click a shot to select it, double-click to rename.": "單擊鏡頭即可選中，雙擊可重命名。",
+  "scene|PLAY": "播放",
+  "Play the whole scene from its first shot": "從第一個鏡頭開始播放整個場景",
+  "Stop playback (Esc)": "停止播放（Esc）",
+  "Play only the shot after the selected one": "僅播放所選鏡頭的下一個鏡頭",
+  "SAVE & SHARE": "保存與分享",
+  "Download every scene as a JSON file you can import later": "將所有場景下載為 JSON 文件，以便日後導入",
+  "Load scenes from an exported JSON file": "從導出的 JSON 文件加載場景",
+  "Download the timing log of the last play": "下載上次播放的計時日誌",
+  "Edit the scene title and description": "編輯場景標題和描述",
+  "Share this scene as a link or file": "以鏈接或文件形式分享此場景"
 }

src/ui/sceneControls.js

@@ -21,6 +21,9 @@ export class SceneControls {
     this.rowRemovers = [];
     this.playbackKeyRemover = null;
     if (!elements.select) return;
+    // The radio's PLAY means "listen"; this one plays the scene.
+    const playLabel = t('PLAY', { context: 'scene' });
+    if (elements.start) elements.start.textContent = playLabel;
     if (subscribe)
       this.unsubscribe = subscribe((notification) =>
         this.present(notification),
@@ -94,7 +97,21 @@ export class SceneControls {
       this.renderShotList();
     if (type === 'selection-changed')
       presentSceneSelection(this.elements.shots, state.selectedShotId);
-    if (initial || type === 'buttons-changed') this.setButtons(state.running);
+    if (
+      initial ||
+      [
+        'buttons-changed',
+        'selection-changed',
+        'scene-options-changed',
+        'scene-created',
+        'scene-deleted',
+        'shots-changed',
+        'shot-captured',
+        'shot-deleted',
+        'project-imported',
+      ].includes(type)
+    )
+      this.setButtons(state.running);
     if (initial || type === 'progress-changed')
       this.setProgress(state.progress);
     if (initial || type === 'status-changed') this.updateStatus(state.status);
@@ -183,11 +200,9 @@ export class SceneControls {
         this.listen(element, type, callback, this.rowRemovers),
       select: (id) => {
         this.run('selectShot', id);
-        if (!this.destroyed)
-          presentSceneSelection(
-            this.elements.shots,
-            this.read().selectedShotId,
-          );
+        if (this.destroyed) return;
+        presentSceneSelection(this.elements.shots, this.read().selectedShotId);
+        this.setButtons(this.read().running);
       },
       rename: (sceneId, shotId, title) =>
         this.run('renameShot', sceneId, shotId, title),
@@ -197,8 +212,18 @@ export class SceneControls {
   }
 
   setButtons(running) {
-    if (!this.destroyed)
-      presentSceneButtons(this.elements, running, this.read().hasRun);
+    if (this.destroyed) return;
+    const state = this.read();
+    const scene = state.scenes?.find(
+      (item) => item.id === state.selectedSceneId,
+    );
+    const shots = scene?.shots ?? [];
+    presentSceneButtons(this.elements, running, state.hasRun, {
+      hasScene: !!scene,
+      shotCount: shots.length,
+      hasSelectedShot: shots.some((shot) => shot.id === state.selectedShotId),
+    });
+    this.elements.panel?.classList.toggle('has-shots', shots.length > 0);
   }
 
   setProgress(progress) {

src/ui/sceneControls.test.mjs

@@ -169,6 +169,37 @@ test('Scene controls render the supplied selection and running/download states',
   }
 });
 
+test('Authoring disables idle actions that would do nothing', () => {
+  const f = fixture();
+  try {
+    assert.equal(f.elements.start.textContent, 'PLAY');
+    assert.equal(f.elements.start.disabled, false);
+    assert.equal(f.elements.update.disabled, false);
+    assert.equal(f.elements.panel.classList.contains('has-shots'), true);
+
+    f.state.selectedShotId = null;
+    f.owner.setButtons(false);
+    assert.equal(f.elements.update.disabled, true);
+    assert.equal(f.elements.start.disabled, false);
+
+    f.state.scenes[0].shots = [];
+    f.owner.setButtons(false);
+    assert.equal(f.elements.start.disabled, true);
+    assert.equal(f.elements.next.disabled, true);
+    assert.equal(f.elements.capture.disabled, false);
+    assert.equal(f.elements.panel.classList.contains('has-shots'), false);
+
+    f.state.scenes = [];
+    f.state.selectedSceneId = null;
+    f.owner.setButtons(false);
+    assert.equal(f.elements.delete.disabled, true);
+    assert.equal(f.elements.capture.disabled, true);
+    assert.equal(f.elements.new.disabled, false);
+  } finally {
+    f.restore();
+  }
+});
+
 test('Scene controls dispatch explicit actions and revoke replaced shot-row listeners', () => {
   const f = fixture();
   try {

src/ui/scenePresentation.js

@@ -172,7 +172,24 @@ export function presentSceneSelection(element, selectedShotId) {
   }
 }
 
-export function presentSceneButtons(elements, running, hasRun) {
+/**
+ * Everything but STOP is off while a scene plays. Otherwise a button is off
+ * when it would do nothing: DELETE and CAPTURE SHOT without a scene, UPDATE
+ * SHOT without a selected shot, PLAY and NEXT on a scene with no shots.
+ */
+export function presentSceneButtons(
+  elements,
+  running,
+  hasRun,
+  { hasScene = true, shotCount = 1, hasSelectedShot = true } = {},
+) {
+  const idleOff = {
+    delete: !hasScene,
+    capture: !hasScene,
+    update: !hasSelectedShot,
+    start: shotCount === 0,
+    next: shotCount === 0,
+  };
   for (const name of [
     'start',
     'next',
@@ -184,7 +201,7 @@ export function presentSceneButtons(elements, running, hasRun) {
     'export',
     'import',
   ]) {
-    if (elements[name]) elements[name].disabled = running;
+    if (elements[name]) elements[name].disabled = running || !!idleOff[name];
   }
   if (elements.stop) elements.stop.disabled = !running;
   if (elements.download) elements.download.disabled = !hasRun;

src/ui/sceneSharing.js

@@ -181,17 +181,24 @@ export function mountSceneSharing(
   bar.dataset.directorAuthoring = '';
   bar.className = 'scene-controls';
   const entries = [
-    [t('EDIT DETAILS'), edit],
-    [t('SHARE SCENE'), share],
+    [t('EDIT DETAILS'), t('Edit the scene title and description'), edit],
+    [t('SHARE SCENE'), t('Share this scene as a link or file'), share],
   ];
   const removers = [];
-  for (const [text, fn] of entries) {
-    const b = createActionButton({ label: text, className: 'scene-btn' });
+  for (const [text, title, fn] of entries) {
+    const b = createActionButton({
+      label: text,
+      title,
+      className: 'scene-btn',
+    });
     b.addEventListener('click', fn);
     removers.push(() => b.removeEventListener('click', fn));
     bar.append(b);
   }
-  (panel.querySelector?.('.scene-panel-inner') || panel).appendChild(bar);
+  // Beside EXPORT / IMPORT, under SAVE & SHARE.
+  const fileRow = panel.querySelector?.('.scene-file-controls');
+  if (fileRow) fileRow.after(bar);
+  else (panel.querySelector?.('.scene-panel-inner') || panel).appendChild(bar);
   return () => {
     for (const remove of removers) remove();
     bar.remove();

src/ui/styles/scenes.css

@@ -1,6 +1,8 @@
 /* ── Scene Director Panel ───────────────────── */
 #scene-panel {
-  --panel-expanded-width: 360px;
+  --panel-expanded-width: 372px;
+  /* Secondary text in Authoring: dimmer than labels, but legible on the globe. */
+  --scene-quiet: rgba(232, 234, 237, 0.62);
   position: fixed;
   top: calc(var(--left-stack-top) + (var(--left-stack-gap) * 2));
   left: var(--left-stack-x);
@@ -150,15 +152,15 @@
   flex-wrap: wrap;
 }
 
+/* The scene's name takes its own row; NEW SCENE / DELETE share the next. */
 #scene-select {
-  flex: 1;
+  flex: 1 1 100%;
   min-width: 0;
+  min-height: 32px;
+  font-size: 12px;
 }
 
-/* A translated scene name needs the width: the select takes its own row,
-   NEW / DEL share the next one. */
 html:not([lang='en']) #scene-select {
-  flex: 1 1 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -168,8 +170,7 @@ html:not([lang='en']) #scene-select {
 }
 
 /* A translated action longer than its button wraps inside the button instead
-   of running past it. English keeps its one-line buttons ("EXPORT PRESETS"
-   included). */
+   of running past it. English keeps its one-line buttons. */
 html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
   white-space: normal;
   overflow-wrap: break-word;
@@ -178,6 +179,61 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 .scene-btn {
   flex: 1;
   min-width: 72px;
+  font-size: 10px;
+  padding: 8px 10px;
+}
+
+/* Authoring's steps: SCENE, SHOTS, PREVIEW, SAVE & SHARE. */
+.scene-step-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0 6px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 1.6px;
+  color: var(--scene-quiet);
+}
+
+.scene-step-heading::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.panel-header + .scene-step-heading {
+  margin-top: 2px;
+}
+
+/* One primary action per step: CAPTURE SHOT and PLAY. */
+.scene-btn-primary:not(:disabled) {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+#scene-capture-btn {
+  flex: 2 1 0;
+}
+
+/* The file row is housekeeping; it stays quieter than the steps above. */
+.scene-file-controls .scene-btn {
+  flex: 1 1 0;
+  min-width: 0;
+  font-size: 9px;
+  background: transparent;
+}
+
+.scene-shot-hint {
+  margin: 0 0 8px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--scene-quiet);
+}
+
+#scene-panel:not(.has-shots) .scene-shot-hint {
+  display: none;
 }
 
 #scene-start-btn,
@@ -190,12 +246,13 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  max-height: 160px;
-  min-height: 96px;
+  max-height: 260px;
+  min-height: 72px;
   flex: 1;
   overflow-y: auto;
   padding: 4px 2px 6px;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
+  counter-reset: scene-shot;
 }
 
 .scene-shot-list::-webkit-scrollbar {
@@ -210,19 +267,21 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 .scene-shot-empty {
   border: 1px dashed rgba(255, 255, 255, 0.14);
   border-radius: 8px;
-  padding: 10px 8px;
+  padding: 16px 12px;
   text-align: center;
   font-family: var(--font-mono);
-  font-size: 9px;
-  letter-spacing: 1px;
-  color: var(--text-dim);
+  font-size: 11px;
+  letter-spacing: 0.3px;
+  line-height: 1.5;
+  color: var(--scene-quiet);
 }
 
 .scene-shot-row {
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 9px;
-  padding: 7px 8px;
+  padding: 8px 10px;
   background: rgba(255, 255, 255, 0.03);
+  counter-increment: scene-shot;
   transition:
     border-color var(--transition-fast),
     background var(--transition-fast);
@@ -243,12 +302,28 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 .scene-shot-label {
   min-width: 0;
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
   font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 1px;
+  font-size: 12px;
+  letter-spacing: 0.4px;
   color: var(--text-primary);
 }
 
+/* Shots are numbered 01, 02… in playback order. */
+.scene-shot-label::before {
+  content: counter(scene-shot, decimal-leading-zero);
+  margin-right: 8px;
+  font-size: 10px;
+  color: var(--scene-quiet);
+}
+
+.scene-shot-row.active .scene-shot-label::before {
+  color: var(--accent);
+}
+
 .scene-shot-rename {
   width: 100%;
   min-width: 0;
@@ -260,11 +335,11 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 }
 
 .scene-shot-meta {
-  margin-top: 4px;
+  margin-top: 5px;
   font-family: var(--font-mono);
-  font-size: 8px;
-  letter-spacing: 0.8px;
-  color: var(--text-dim);
+  font-size: 10px;
+  letter-spacing: 0.4px;
+  color: var(--scene-quiet);
 }
 
 .scene-shot-actions {
@@ -275,7 +350,7 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 .scene-progress {
   margin-top: 8px;
   width: 100%;
-  height: 18px;
+  height: 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -305,9 +380,10 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 #scene-status {
   margin-top: 8px;
   font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 1px;
-  color: var(--text-secondary);
+  font-size: 11px;
+  letter-spacing: 0.4px;
+  line-height: 1.4;
+  color: var(--scene-quiet);
 }
 
 #scene-runtime {
@@ -357,6 +433,8 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 #cctv-panel.collapsed .cctv-summary-label,
 #cctv-panel.collapsed #cctv-summary,
 #scene-panel.collapsed .scene-controls,
+#scene-panel.collapsed .scene-step-heading,
+#scene-panel.collapsed .scene-shot-hint,
 #scene-panel.collapsed .scene-shot-list,
 #scene-panel.collapsed .scene-progress,
 #scene-panel.collapsed #scene-status,

src/ui/templates/layer-panels.html

@@ -147,35 +147,40 @@
     <div class="panel-glow"></div>
     <div class="scene-panel-inner">
       <div class="panel-header">
-        <span class="panel-title" data-i18n>SCENES</span>
+        <span class="panel-title" title="Create and edit scenes" data-i18n data-i18n-title>AUTHORING</span>
         <span class="panel-divider"></span>
         <button class="panel-collapse-btn" data-collapse-target="scene-panel" title="Collapse panel" data-i18n-title>+</button>
       </div>
+      <p class="scene-step-heading" data-i18n>SCENE</p>
       <div class="scene-controls">
-        <select class="gev-field" id="scene-select" aria-label="Scene recipe" data-i18n-aria-label></select>
-        <button id="scene-new-btn" type="button" class="gev-action-button scene-btn" data-i18n>NEW</button>
-        <button id="scene-delete-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" data-i18n>DEL</button>
+        <select class="gev-field" id="scene-select" aria-label="Scene" data-i18n-aria-label></select>
+        <button id="scene-new-btn" type="button" class="gev-action-button scene-btn" title="Start a new, empty scene" data-i18n data-i18n-title>NEW SCENE</button>
+        <button id="scene-delete-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" title="Delete this scene and all of its shots" data-i18n data-i18n-title>DELETE</button>
       </div>
+      <p class="scene-step-heading" data-i18n>SHOTS</p>
       <div class="scene-controls">
-        <button id="scene-capture-btn" type="button" class="gev-action-button scene-btn" data-i18n>CAPTURE SHOT</button>
-        <button id="scene-update-shot-btn" type="button" class="gev-action-button scene-btn" data-i18n>UPDATE SHOT</button>
+        <button id="scene-capture-btn" type="button" class="gev-action-button scene-btn scene-btn-primary" title="Add the current view, style and layers as the next shot" data-i18n data-i18n-title>+ CAPTURE SHOT</button>
+        <button id="scene-update-shot-btn" type="button" class="gev-action-button scene-btn" title="Replace the selected shot with the current view" data-i18n data-i18n-title>UPDATE SHOT</button>
       </div>
       <div id="scene-shot-list" class="scene-shot-list"></div>
+      <p class="scene-shot-hint" data-i18n>Click a shot to select it, double-click to rename.</p>
+      <p class="scene-step-heading" data-i18n>PREVIEW</p>
       <div class="scene-controls">
-        <button id="scene-start-btn" type="button" class="gev-action-button scene-btn" data-i18n>START</button>
-        <button id="scene-stop-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" data-i18n>STOP</button>
-        <button id="scene-next-btn" type="button" class="gev-action-button scene-btn" data-i18n>NEXT</button>
+        <button id="scene-start-btn" type="button" class="gev-action-button scene-btn scene-btn-primary" title="Play the whole scene from its first shot" data-i18n-title data-i18n-runtime>PLAY</button>
+        <button id="scene-stop-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" title="Stop playback (Esc)" data-i18n data-i18n-title>STOP</button>
+        <button id="scene-next-btn" type="button" class="gev-action-button scene-btn" title="Play only the shot after the selected one" data-i18n data-i18n-title>NEXT</button>
       </div>
-      <div class="scene-controls">
-        <button id="scene-export-btn" type="button" class="gev-action-button scene-btn" data-i18n>EXPORT PRESETS</button>
-        <button id="scene-import-btn" type="button" class="gev-action-button scene-btn" data-i18n>IMPORT</button>
-        <button id="scene-download-btn" type="button" class="gev-action-button scene-btn" data-i18n>RUN LOG</button>
+      <p class="scene-step-heading" data-i18n>SAVE &amp; SHARE</p>
+      <div class="scene-controls scene-file-controls">
+        <button id="scene-export-btn" type="button" class="gev-action-button scene-btn" title="Download every scene as a JSON file you can import later" data-i18n data-i18n-title>EXPORT</button>
+        <button id="scene-import-btn" type="button" class="gev-action-button scene-btn" title="Load scenes from an exported JSON file" data-i18n data-i18n-title>IMPORT</button>
+        <button id="scene-download-btn" type="button" class="gev-action-button scene-btn" title="Download the timing log of the last play" data-i18n data-i18n-title>RUN LOG</button>
         <input type="file" id="scene-import-file" accept="application/json,.json" hidden />
       </div>
       <div class="scene-progress">
         <div id="scene-progress-fill">0%</div>
       </div>
-      <div id="scene-status" data-i18n>Ready</div>
+      <div id="scene-status" role="status" aria-live="polite" data-i18n>Ready</div>
     </div>
   </div>