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/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>