Add a spoken countdown between frames

A 🔊 toggle on the home screen counts you into each frame - "five, four,
three, two, one" - plus start and finish announcements. Useful when you're in
front of the camera rather than at the laptop. Uses the Web Speech API, so
it's local and needs no configuration.

The narrator runs off the intervalometer's state updates rather than a timer
of its own, so it can't drift away from what the sequence is doing; each
second is spoken at most once even though state arrives ~5x/sec.

The count is capped at one second under the interval, so a 3s interval says
"two, one" instead of talking over the previous frame, and a 1s interval stays
silent. A start delay isn't clamped, since that gap is whatever you set.

Countdown length, voice choice and frame-number announcements live in the
settings drawer; only the toggle is on the home screen.

Also:
- The toggle sits in the status card rather than the button row: three buttons
  don't fit a 400px column, and it wrapped onto its own flex line where it
  stretched to the wrong height.
- tsconfig excludes dist/, which build-dist.sh fills with copies of these same
  files and which otherwise gets type-checked twice.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QK7PKpRVoy69Fpa32R8abb

examples/preact/home.js

@@ -89,9 +89,14 @@ function sequenceWarnings(prefs, config, hasFolder) {
 }
 
 /**
- * @param {{ state: SequenceState, prefs: Prefs }} props
+ * @param {{
+ *   state: SequenceState,
+ *   prefs: Prefs,
+ *   voiceSupported: boolean,
+ *   onToggleVoice: () => void
+ * }} props
  */
-function SequenceStatus({ state, prefs }) {
+function SequenceStatus({ state, prefs, voiceSupported, onToggleVoice }) {
   let { phase, taken, total } = state;
   let headline;
   let detail;
@@ -135,8 +140,31 @@ function SequenceStatus({ state, prefs }) {
   return h(
     'div',
     { class: `sequence-status phase-${phase}` },
-    h('div', { class: 'headline' }, headline),
-    h('div', { class: 'detail' }, detail),
+    h(
+      'div',
+      { class: 'status-head' },
+      h(
+        'div',
+        { class: 'status-text' },
+        h('div', { class: 'headline' }, headline),
+        h('div', { class: 'detail' }, detail)
+      ),
+      // Sits with the countdown it speaks, rather than crowding the button row.
+      voiceSupported
+        ? h(
+            'button',
+            {
+              type: 'button',
+              class: `voice-toggle ${prefs.voice ? 'on' : ''}`,
+              onclick: onToggleVoice,
+              title: prefs.voice
+                ? 'Voice countdown on — click to mute'
+                : 'Voice countdown off — click to speak the countdown before each frame'
+            },
+            prefs.voice ? '🔊' : '🔇'
+          )
+        : undefined
+    ),
     total
       ? h(
           'div',
@@ -166,7 +194,9 @@ function SequenceStatus({ state, prefs }) {
  *   config: import('web-gphoto2').Config | undefined,
  *   hasFolder: boolean,
  *   canCapture: boolean,
- *   log: { id: number, message: string, kind: string, at: number }[]
+ *   log: { id: number, message: string, kind: string, at: number }[],
+ *   voiceSupported: boolean,
+ *   onToggleVoice: () => void
  * }} props
  */
 export function Home({
@@ -181,7 +211,9 @@ export function Home({
   config,
   hasFolder,
   canCapture,
-  log
+  log,
+  voiceSupported,
+  onToggleVoice
 }) {
   let warnings = running ? [] : sequenceWarnings(prefs, config, hasFolder);
   let plannedSeconds = prefs.unlimited
@@ -198,7 +230,7 @@ export function Home({
   return h(
     'div',
     { id: 'home' },
-    h(SequenceStatus, { state, prefs }),
+    h(SequenceStatus, { state, prefs, voiceSupported, onToggleVoice }),
 
     h(
       'div',