@jjlmoya/utils-streaming 1.21.0 → 1.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-streaming",
-    "version": "1.21.0",
+    "version": "1.22.1",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,10 +1,12 @@
+import type { StreamingCategoryEntry } from '../types';
 import { sorteo } from '../tool/sorteo/entry';
 import { tebasCheck } from '../tool/tebasCheck/entry';
 import { videoBitratePlanner } from '../tool/videoBitratePlanner/entry';
+import { streamSceneCountdownClock } from '../tool/streamSceneCountdownClock/entry';
 
 export const streamingCategory: StreamingCategoryEntry = {
   icon: 'mdi:broadcast',
-  tools: [sorteo, tebasCheck, videoBitratePlanner],
+  tools: [sorteo, tebasCheck, videoBitratePlanner, streamSceneCountdownClock],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -4,8 +4,11 @@ export { tebasCheck } from './tool/tebasCheck/entry';
 export type { TebasCheckLocaleContent } from './tool/tebasCheck/entry';
 export { videoBitratePlanner } from './tool/videoBitratePlanner/entry';
 export type { VideoBitratePlannerLocaleContent } from './tool/videoBitratePlanner/entry';
+export { streamSceneCountdownClock } from './tool/streamSceneCountdownClock/entry';
+export type { StreamSceneCountdownClockLocaleContent } from './tool/streamSceneCountdownClock/entry';
 export { streamingCategory } from './category';
 import { sorteo } from './tool/sorteo/entry';
 import { tebasCheck } from './tool/tebasCheck/entry';
 import { videoBitratePlanner } from './tool/videoBitratePlanner/entry';
-export const ALL_ENTRIES = [sorteo, tebasCheck, videoBitratePlanner];
+import { streamSceneCountdownClock } from './tool/streamSceneCountdownClock/entry';
+export const ALL_ENTRIES = [sorteo, tebasCheck, videoBitratePlanner, streamSceneCountdownClock];

package/src/tests/locale_completeness.test.ts

@@ -20,6 +20,6 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all 3 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(3);
+    expect(ALL_TOOLS.length).toBe(4);
   });
 });

package/src/tests/seo_translation_completeness.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+
+const ASIAN_LOCALES = ['ja', 'ko', 'zh'];
+
+function getSimpleSectionLength(section: any): number {
+  if (section.type === 'title') return section.text ? section.text.length : 0;
+  if (section.type === 'paragraph') return section.html ? section.html.replace(/<[^>]*>/g, '').length : 0;
+  if (section.type === 'list') return section.items ? section.items.join('').length : 0;
+  return 0;
+}
+
+function getComplexSectionLength(section: any): number {
+  if (section.type === 'diagnostic' || section.type === 'tip') {
+    return (section.title ? section.title.length : 0) + (section.html ? section.html.replace(/<[^>]*>/g, '').length : 0);
+  }
+  if (section.type === 'table') {
+    return ((section.headers || []).join('').length) + ((section.rows || []).flat().join('').length);
+  }
+  return 0;
+}
+
+function getSectionLength(section: any): number {
+  return getSimpleSectionLength(section) || getComplexSectionLength(section);
+}
+
+function calculateSeoTextLength(seoSections: any[]): number {
+  return seoSections.reduce((acc, section) => acc + getSectionLength(section), 0);
+}
+
+function checkLocaleSeoLength(toolId: string, locale: string, localeLen: number, enLen: number): void {
+  const isAsian = ASIAN_LOCALES.includes(locale);
+  const minLength = Math.floor(enLen * (isAsian ? 0.25 : 0.70));
+  const msgType = isAsian ? 'suspiciously short' : 'truncated/lazy';
+
+  expect(
+    localeLen,
+    `[LAZY SEO TRANSLATION] Tool "${toolId}" locale "${locale}" SEO text is ${msgType} (${localeLen} chars vs EN ${enLen} chars, expected min ${minLength})`,
+  ).toBeGreaterThanOrEqual(minLength);
+}
+
+async function auditSingleLocale(toolId: string, locale: string, loader: any, enSeoLength: number): Promise<void> {
+  if (locale === 'en' || !loader) return;
+  const content = await loader();
+  if (!content.seo || !Array.isArray(content.seo)) return;
+
+  checkLocaleSeoLength(toolId, locale, calculateSeoTextLength(content.seo), enSeoLength);
+}
+
+describe('SEO Translation Completeness & Laziness Audit', () => {
+  ALL_TOOLS.forEach(({ entry }) => {
+    describe(`Tool: ${entry.id}`, () => {
+      it('should not have lazy or truncated SEO content compared to English reference', async () => {
+        const enLoader = entry.i18n['en' as keyof typeof entry.i18n];
+        if (!enLoader) return;
+
+        const enContent = await enLoader();
+        if (!enContent.seo || !Array.isArray(enContent.seo)) return;
+
+        const enSeoLength = calculateSeoTextLength(enContent.seo);
+
+        for (const [locale, loader] of Object.entries(entry.i18n)) {
+          await auditSingleLocale(entry.id, locale, loader, enSeoLength);
+        }
+      });
+    });
+  });
+});
+

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { streamingCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have at least 2 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(3);
+      expect(ALL_TOOLS.length).toBe(4);
     });
 
     it('streamingCategory should be defined', () => {

package/src/tool/streamSceneCountdownClock/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/streamSceneCountdownClock/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Twitch Channel Page Setup',
+    url: 'https://help.twitch.tv/s/article/channel-page-setup?language=en_US',
+  },
+  {
+    name: 'OBS Studio Overview Guide',
+    url: 'https://obsproject.com/kb/obs-studio-overview',
+  },
+];

package/src/tool/streamSceneCountdownClock/component.astro

@@ -0,0 +1,180 @@
+---
+import type { StreamSceneCountdownClockUI } from './ui';
+
+interface Props {
+  ui: StreamSceneCountdownClockUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="ssc-root" data-status="ready" data-stream-scene-clock>
+  <section class="ssc-panel" aria-label={ui.stageEyebrow}>
+    <div class="ssc-controls">
+      <p class="ssc-route">{ui.flowText}</p>
+      <div class="ssc-control-block">
+        <span class="ssc-label">{ui.sceneLabel}</span>
+        <div class="ssc-scene-list" role="group" aria-label={ui.sceneLabel}>
+          <button type="button" class="ssc-choice" data-scene="starting" aria-pressed="true">{ui.sceneStarting}</button>
+          <button type="button" class="ssc-choice" data-scene="brb" aria-pressed="false">{ui.sceneBrb}</button>
+          <button type="button" class="ssc-choice" data-scene="raid" aria-pressed="false">{ui.sceneRaid}</button>
+          <button type="button" class="ssc-choice" data-scene="intermission" aria-pressed="false">{ui.sceneIntermission}</button>
+        </div>
+      </div>
+      <label class="ssc-field">
+        <span class="ssc-label">{ui.sceneTitleLabel}</span>
+        <input data-scene-title type="text" maxlength="40" placeholder={ui.sceneTitlePlaceholder} value={ui.sceneTitlePlaceholder} />
+      </label>
+      <label class="ssc-field">
+        <span class="ssc-label">{ui.designLabel}</span>
+        <div class="ssc-custom-select" data-design-select>
+          <input type="hidden" data-design value="aurora" />
+          <button type="button" class="ssc-select-trigger" data-design-trigger aria-haspopup="listbox" aria-expanded="false" aria-label={ui.designLabel}>{ui.designAurora}</button>
+          <div class="ssc-select-options" data-design-options role="listbox" aria-label={ui.designLabel} hidden>
+            <button type="button" class="ssc-select-option is-active" data-design-option="aurora" role="option" aria-selected="true">{ui.designAurora}</button>
+            <button type="button" class="ssc-select-option" data-design-option="type" role="option" aria-selected="false">{ui.designType}</button>
+            <button type="button" class="ssc-select-option" data-design-option="pulse" role="option" aria-selected="false">{ui.designPulse}</button>
+            <button type="button" class="ssc-select-option" data-design-option="glitch" role="option" aria-selected="false">{ui.designGlitch}</button>
+            <button type="button" class="ssc-select-option" data-design-option="sunset" role="option" aria-selected="false">{ui.designSunset}</button>
+          </div>
+        </div>
+      </label>
+      <div class="ssc-color-row">
+        <label class="ssc-color-field">
+          <span class="ssc-label">{ui.accentColorLabel}</span>
+          <input data-accent-color type="color" value="#a78bfa" aria-label={ui.accentColorLabel} />
+        </label>
+        <label class="ssc-color-field">
+          <span class="ssc-label">{ui.glowColorLabel}</span>
+          <input data-glow-color type="color" value="#8ff5d7" aria-label={ui.glowColorLabel} />
+        </label>
+      </div>
+      <label class="ssc-field">
+        <span class="ssc-label">{ui.messageLabel}</span>
+        <input data-message type="text" maxlength="90" placeholder={ui.messagePlaceholder} value={ui.messagePlaceholder} />
+      </label>
+      <div class="ssc-control-block">
+        <span class="ssc-label">{ui.durationLabel}</span>
+        <div class="ssc-duration-row" role="group" aria-label={ui.durationLabel}>
+          <button type="button" class="ssc-choice" data-duration="60">{ui.duration60}</button>
+          <button type="button" class="ssc-choice is-active" data-duration="300">{ui.duration300}</button>
+          <button type="button" class="ssc-choice" data-duration="600">{ui.duration600}</button>
+          <label class="ssc-number-wrap">
+            <span class="sr-only">{ui.durationCustom}</span>
+            <input data-duration-input type="number" min="10" max="86400" step="1" value="300" aria-label={ui.durationCustom} />
+            <span>{ui.secondsLabel}</span>
+          </label>
+        </div>
+      </div>
+      <div class="ssc-control-block">
+        <span class="ssc-label">{ui.startLabel}</span>
+        <div class="ssc-start-row" role="group" aria-label={ui.startLabel}>
+          <button type="button" class="ssc-choice is-active" data-start-mode="now" aria-pressed="true">{ui.startNow}</button>
+          <button type="button" class="ssc-choice" data-start-mode="scheduled" aria-pressed="false">{ui.scheduleTime}</button>
+          <label class="ssc-time-wrap" hidden>
+            <span class="sr-only">{ui.timeLabel}</span>
+            <input data-start-time-input type="time" value="20:00" aria-label={ui.timeLabel} />
+          </label>
+        </div>
+        <p class="ssc-error" data-time-error aria-live="polite"></p>
+      </div>
+      <div class="ssc-actions">
+        <button type="button" class="ssc-primary" data-action="start">{ui.startAction}</button>
+        <button type="button" class="ssc-secondary" data-action="focus">{ui.focusAction}</button>
+        <button type="button" class="ssc-secondary" data-action="reset">{ui.resetAction}</button>
+      </div>
+      <aside class="ssc-obs-card" aria-labelledby="ssc-obs-title">
+        <div class="ssc-obs-heading">
+          <span class="ssc-label" id="ssc-obs-title">{ui.obsTitle}</span>
+          <span class="ssc-obs-mark" aria-hidden="true">OBS</span>
+        </div>
+        <p>{ui.obsText}</p>
+        <ol class="ssc-obs-steps">
+          <li>{ui.obsStepCopy}</li>
+          <li>{ui.obsStepAdd}</li>
+          <li>{ui.obsStepPaste}</li>
+        </ol>
+        <a class="ssc-stream-url" data-stream-url aria-label={ui.streamUrlAria} target="_blank" rel="noreferrer"></a>
+        <div class="ssc-obs-actions">
+          <button type="button" class="ssc-secondary" data-copy-url>{ui.copyUrlAction}</button>
+          <span class="ssc-copy-state" data-copy-state aria-live="polite"></span>
+        </div>
+      </aside>
+    </div>
+    <div class="ssc-stage" data-stage>
+      <div class="ssc-stage-heading">
+        <span class="ssc-eyebrow">{ui.stageEyebrow}</span>
+        <span class="ssc-status-badge" data-status-badge aria-live="polite">{ui.readyBadge}</span>
+      </div>
+      <div class="ssc-stage-main">
+        <div class="ssc-dial-wrap">
+          <svg class="ssc-dial" viewBox="0 0 120 120" aria-hidden="true">
+            <circle class="ssc-dial-track" cx="60" cy="60" r="50"></circle>
+            <circle class="ssc-dial-progress" data-progress-ring cx="60" cy="60" r="50"></circle>
+            <circle class="ssc-dial-pin" cx="60" cy="10" r="3"></circle>
+          </svg>
+          <div class="ssc-dial-content">
+            <span class="ssc-scene-name" data-scene-name>{ui.sceneStarting}</span>
+            <time class="ssc-clock" data-clock aria-label={ui.clockAria}>00:05:00</time>
+            <span class="ssc-clock-label">{ui.remainingLabel}</span>
+          </div>
+        </div>
+        <div class="ssc-stage-copy">
+          <p class="ssc-stage-caption">{ui.stageCaption}</p>
+          <p class="ssc-stage-message" data-stage-message>{ui.messagePlaceholder}</p>
+          <p class="ssc-status-copy" data-status-copy aria-live="polite">{ui.readyText}</p>
+        </div>
+      </div>
+      <div class="ssc-alt-progress" aria-hidden="true"><span data-alt-progress></span></div>
+      <div class="ssc-preview-strip">
+        <div class="ssc-preview-heading">
+          <span class="ssc-label">{ui.previewTitle}</span>
+          <span>{ui.previewHint}</span>
+        </div>
+        <div class="ssc-design-gallery" role="listbox" aria-label={ui.previewAria}>
+          <button type="button" role="option" class="ssc-design-thumb" data-preview-design="aurora" aria-selected="true">
+            <span class="ssc-mini-art ssc-mini-art-aurora"><span>05:00</span></span>
+            <span>{ui.designAurora}</span>
+          </button>
+          <button type="button" role="option" class="ssc-design-thumb" data-preview-design="type" aria-selected="false">
+            <span class="ssc-mini-art ssc-mini-art-type"><span>05 00</span></span>
+            <span>{ui.designType}</span>
+          </button>
+          <button type="button" role="option" class="ssc-design-thumb" data-preview-design="pulse" aria-selected="false">
+            <span class="ssc-mini-art ssc-mini-art-pulse"><span>05:00</span></span>
+            <span>{ui.designPulse}</span>
+          </button>
+          <button type="button" role="option" class="ssc-design-thumb" data-preview-design="glitch" aria-selected="false">
+            <span class="ssc-mini-art ssc-mini-art-glitch"><span>05:00</span></span>
+            <span>{ui.designGlitch}</span>
+          </button>
+          <button type="button" role="option" class="ssc-design-thumb" data-preview-design="sunset" aria-selected="false">
+            <span class="ssc-mini-art ssc-mini-art-sunset"><span>05:00</span></span>
+            <span>{ui.designSunset}</span>
+          </button>
+        </div>
+      </div>
+      <div class="ssc-stage-footer">
+        <div><span>{ui.startTimeLabel}</span><strong data-start-time>--:--</strong></div>
+        <div><span>{ui.endTimeLabel}</span><strong data-end-time>--:--</strong></div>
+        <div><span>{ui.progressLabel}</span><strong data-progress-copy>0%</strong></div>
+      </div>
+      <div class="ssc-notes">
+        <details>
+          <summary>{ui.assumptionTitle}</summary>
+          <p>{ui.assumptionText}</p>
+        </details>
+        <p class="ssc-warning"><strong>{ui.warningTitle}</strong> {ui.warningText}</p>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script is:inline type="application/json" id="stream-scene-countdown-clock-ui" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { mountCountdown } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-stream-scene-clock]');
+  const data = document.getElementById('stream-scene-countdown-clock-ui');
+  if (root && data?.textContent) mountCountdown(root, JSON.parse(data.textContent));
+</script>

package/src/tool/streamSceneCountdownClock/controller.ts

@@ -0,0 +1,271 @@
+import { getSceneLabel, renderClock } from './dom-views';
+import { getCountdown, parseStartTime } from './logic';
+import { loadSettings, saveSettings, type SavedClockSettings } from './storage';
+import type { SceneKey, StreamSceneCountdownClockUI } from './ui';
+import { readUrlState } from './url-state';
+import { collectSettings } from './settings-state';
+import { bindCopyUrlButton, renderStreamingUrl } from './stream-url-view';
+import { bindDesignSelect as bindDesignSelectControl, bindPreviewDesignButtons, designPalettes, renderDesignChoices, renderDesignSelect } from './design-state';
+import { bindTextInputs as bindInputFields } from './text-input-state';
+
+const defaults: SavedClockSettings = {
+  scene: 'starting',
+  sceneTitle: '',
+  design: 'aurora',
+  accentColor: '#a78bfa',
+  glowColor: '#8ff5d7',
+  message: 'Back in 5 minutes',
+  durationSeconds: 300,
+  startMode: 'now',
+  startTime: '20:00',
+};
+
+interface ControllerState {
+  settings: SavedClockSettings;
+  startAtMs: number | null;
+}
+
+function getElement<T extends HTMLElement>(root: HTMLElement, selector: string): T | null {
+  return root.querySelector<T>(selector);
+}
+
+function getAccentInk(hex: string): string {
+  const match = hex.match(/^#([\da-f]{6})$/i);
+  if (!match) return '#fffaf2';
+  const value = match[1] ?? '';
+  const channels = [0, 2, 4].map((offset) => Number.parseInt(value.slice(offset, offset + 2), 16) / 255);
+  const weights = [0.2126, 0.7152, 0.0722];
+  const luminance = channels.reduce((sum, channel, index) => {
+    const linear = channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+    return sum + linear * (weights[index] ?? 0);
+  }, 0);
+  const darkContrast = (luminance + .05) / .06;
+  const lightContrast = 1.05 / (luminance + .05);
+  return darkContrast >= lightContrast ? '#171615' : '#fffaf2';
+}
+
+function renderInputValues(root: HTMLElement, settings: SavedClockSettings): void {
+  const values = [
+    ['[data-message]', settings.message],
+    ['[data-scene-title]', settings.sceneTitle],
+    ['[data-duration-input]', String(settings.durationSeconds)],
+    ['[data-start-time-input]', settings.startTime],
+    ['[data-design]', settings.design],
+    ['[data-accent-color]', settings.accentColor],
+    ['[data-glow-color]', settings.glowColor],
+  ] as const;
+  values.forEach(([selector, value]) => {
+    const element = getElement<HTMLInputElement | HTMLSelectElement>(root, selector);
+    if (element) element.value = value;
+  });
+}
+
+function renderSettings(root: HTMLElement, settings: SavedClockSettings): void {
+  const timeWrap = getElement<HTMLElement>(root, '.ssc-time-wrap');
+  renderInputValues(root, settings);
+  renderDesignSelect(root, settings.design);
+  root.querySelectorAll<HTMLButtonElement>('[data-scene]').forEach((button) => {
+    const active = button.dataset.scene === settings.scene;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+  root.querySelectorAll<HTMLButtonElement>('[data-duration]').forEach((button) => {
+    button.classList.toggle('is-active', Number(button.dataset.duration) === settings.durationSeconds);
+  });
+  root.querySelectorAll<HTMLButtonElement>('[data-start-mode]').forEach((button) => {
+    const active = button.dataset.startMode === settings.startMode;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+  renderDesignChoices(root, settings.design);
+  if (timeWrap) timeWrap.hidden = settings.startMode !== 'scheduled';
+}
+
+function renderState(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  renderSettings(root, state.settings);
+  root.dataset.design = state.settings.design;
+  root.style.setProperty('--n-user-accent', state.settings.accentColor);
+  root.style.setProperty('--n-user-glow', state.settings.glowColor);
+  root.style.setProperty('--n-accent-ink', getAccentInk(state.settings.accentColor));
+  renderStreamingUrl(root, state.settings);
+  renderClock({
+    root,
+    snapshot: getCountdown({ durationSeconds: state.settings.durationSeconds, startAtMs: state.startAtMs, nowMs: Date.now() }),
+    scene: state.settings.scene,
+    sceneTitle: state.settings.sceneTitle,
+    message: state.settings.message,
+    ui,
+  });
+}
+
+function persistAndRender(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  saveSettings(state.settings);
+  renderState(root, state, ui);
+}
+
+function applyDefaultSceneTitle(settings: SavedClockSettings, ui: StreamSceneCountdownClockUI): SavedClockSettings {
+  return settings.sceneTitle.trim() ? settings : { ...settings, sceneTitle: getSceneLabel(settings.scene, ui) };
+}
+
+function getStartTimestamp(state: ControllerState, nowMs: number, ui: StreamSceneCountdownClockUI, root: HTMLElement): number | null {
+  if (state.settings.startMode === 'now') return nowMs;
+  const value = state.settings.startTime;
+  const timestamp = parseStartTime(value, nowMs);
+  if (timestamp === null) {
+    const error = getElement<HTMLElement>(root, '[data-time-error]');
+    if (error) error.textContent = ui.invalidTime;
+  }
+  return timestamp;
+}
+
+export function mountCountdown(root: HTMLElement, ui: StreamSceneCountdownClockUI): void {
+  const stored = loadSettings();
+  const urlState = readUrlState(window.location.search);
+  let settings: SavedClockSettings = { ...defaults, ...stored, ...urlState.settings };
+  settings = applyDefaultSceneTitle(settings, ui);
+  if (!designPalettes[settings.design]) settings.design = defaults.design;
+  const state: ControllerState = { settings, startAtMs: null };
+  if (urlState.streaming) {
+    root.dataset.streaming = 'true';
+    hideStreamingShell(root);
+  }
+  if (urlState.autoStart) state.startAtMs = getStartTimestamp(state, Date.now(), ui, root);
+  bindChoiceButtons(root, state, ui);
+  bindInputFields({ root, state, ui, render: renderState });
+  bindActionButtons(root, state, ui);
+  renderState(root, state, ui);
+  const timer = window.setInterval(() => renderState(root, state, ui), 250);
+  root.addEventListener('astro:unmount', () => window.clearInterval(timer), { once: true });
+}
+
+function bindChoiceButtons(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  bindSceneButtons(root, state, ui);
+  bindDurationButtons(root, state, ui);
+  bindStartModeButtons(root, state, ui);
+  bindDesignSelectControl(root, (design) => {
+    state.settings = { ...collectSettings(root, state.settings), design, ...designPalettes[design] };
+    persistAndRender(root, state, ui);
+  });
+  bindPreviewDesignButtons(root, (design) => {
+    state.settings = { ...collectSettings(root, state.settings), design, ...designPalettes[design] };
+    persistAndRender(root, state, ui);
+  });
+  bindColorInputs(root, state, ui);
+}
+
+function bindColorInputs(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  root.querySelectorAll<HTMLInputElement>('[data-accent-color], [data-glow-color]').forEach((input) => {
+    input.addEventListener('input', () => {
+      state.settings = collectSettings(root, state.settings);
+      persistAndRender(root, state, ui);
+    });
+  });
+}
+
+function bindSceneButtons(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-scene]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const scene = button.dataset.scene as SceneKey;
+      state.settings = { ...collectSettings(root, state.settings), scene, sceneTitle: getSceneLabel(scene, ui) };
+      persistAndRender(root, state, ui);
+    });
+  });
+}
+
+function bindDurationButtons(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-duration]').forEach((button) => {
+    button.addEventListener('click', () => {
+      state.settings = { ...collectSettings(root, state.settings), durationSeconds: Number(button.dataset.duration) };
+      persistAndRender(root, state, ui);
+    });
+  });
+}
+
+function bindStartModeButtons(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-start-mode]').forEach((button) => {
+    button.addEventListener('click', () => {
+      state.settings = { ...collectSettings(root, state.settings), startMode: button.dataset.startMode as SavedClockSettings['startMode'] };
+      persistAndRender(root, state, ui);
+    });
+  });
+}
+
+function bindActionButtons(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  bindStartButton(root, state, ui);
+  bindFocusButton(root, ui);
+  bindResetButton(root, state, ui);
+  bindCopyUrlButton(root, () => state.settings, ui);
+}
+
+function bindFocusButton(root: HTMLElement, ui: StreamSceneCountdownClockUI): void {
+  const button = getElement<HTMLButtonElement>(root, '[data-action="focus"]');
+  if (!button) return;
+  button.addEventListener('click', async () => {
+    if (document.fullscreenElement === root || root.dataset.focus === 'true') {
+      if (document.fullscreenElement === root) await document.exitFullscreen();
+      delete root.dataset.focus;
+    } else {
+      await enterFocus(root);
+    }
+    updateFocusButton(button, ui);
+  });
+  document.addEventListener('fullscreenchange', () => {
+    if (document.fullscreenElement !== root && root.dataset.focus === 'true') {
+      delete root.dataset.focus;
+    }
+    updateFocusButton(button, ui);
+  });
+}
+
+async function enterFocus(root: HTMLElement): Promise<void> {
+  if (document.fullscreenElement === root) return;
+  root.dataset.focus = 'true';
+  try {
+    await root.requestFullscreen();
+  } catch {}
+}
+
+function updateFocusButton(button: HTMLButtonElement, ui: StreamSceneCountdownClockUI): void {
+  const root = button.closest<HTMLElement>('[data-stream-scene-clock]');
+  const focused = document.fullscreenElement === root || root?.dataset.focus === 'true';
+  button.textContent = focused ? ui.exitFocusAction : ui.focusAction;
+  button.setAttribute('aria-pressed', String(focused));
+}
+
+function hideStreamingShell(root: HTMLElement): void {
+  let child: HTMLElement = root;
+  let parent = root.parentElement;
+  document.documentElement.dataset.sscStreaming = 'true';
+  while (parent && parent !== document.body) {
+    Array.from(parent.children).forEach((sibling) => {
+      if (sibling !== child) (sibling as HTMLElement).dataset.sscHidden = 'true';
+    });
+    parent.dataset.sscContainer = 'true';
+    child = parent;
+    parent = parent.parentElement;
+  }
+  Array.from(document.body.children).forEach((sibling) => {
+    if (sibling !== child) (sibling as HTMLElement).dataset.sscHidden = 'true';
+  });
+}
+
+function bindStartButton(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  getElement<HTMLButtonElement>(root, '[data-action="start"]')?.addEventListener('click', async () => {
+    state.settings = collectSettings(root, state.settings);
+    const timestamp = getStartTimestamp(state, Date.now(), ui, root);
+    if (timestamp === null) return;
+    state.startAtMs = timestamp;
+    const error = getElement<HTMLElement>(root, '[data-time-error]');
+    if (error) error.textContent = '';
+    persistAndRender(root, state, ui);
+    await enterFocus(root);
+  });
+}
+
+function bindResetButton(root: HTMLElement, state: ControllerState, ui: StreamSceneCountdownClockUI): void {
+  getElement<HTMLButtonElement>(root, '[data-action="reset"]')?.addEventListener('click', () => {
+    state.settings = { ...defaults };
+    state.startAtMs = null;
+    persistAndRender(root, state, ui);
+  });
+}