@jjlmoya/utils-streaming 1.21.0 → 1.22.0

package/src/tool/streamSceneCountdownClock/design-state.ts

@@ -0,0 +1,81 @@
+import type { SavedClockSettings } from './storage';
+import type { DesignKey } from './ui';
+
+export const designPalettes: Record<DesignKey, Pick<SavedClockSettings, 'accentColor' | 'glowColor'>> = {
+  aurora: { accentColor: '#a78bfa', glowColor: '#8ff5d7' },
+  type: { accentColor: '#ffb84d', glowColor: '#ff5f91' },
+  pulse: { accentColor: '#ff6b9d', glowColor: '#9d7bff' },
+  glitch: { accentColor: '#d8ff3e', glowColor: '#5ee7ff' },
+  sunset: { accentColor: '#ff6b4a', glowColor: '#ffc36b' },
+};
+
+export function renderDesignChoices(root: HTMLElement, design: DesignKey): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-preview-design]').forEach((button) => {
+    const active = button.dataset.previewDesign === design;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-selected', String(active));
+  });
+}
+
+export function renderDesignSelect(root: HTMLElement, design: DesignKey): void {
+  const trigger = root.querySelector<HTMLButtonElement>('[data-design-trigger]');
+  const selected = root.querySelector<HTMLButtonElement>(`[data-design-option="${design}"]`);
+  if (trigger && selected) trigger.textContent = selected.textContent?.trim() ?? '';
+  root.querySelectorAll<HTMLButtonElement>('[data-design-option]').forEach((option) => {
+    const active = option.dataset.designOption === design;
+    option.classList.toggle('is-active', active);
+    option.setAttribute('aria-selected', String(active));
+  });
+}
+
+export function bindDesignSelect(root: HTMLElement, onSelect: (design: DesignKey) => void): void {
+  const trigger = root.querySelector<HTMLButtonElement>('[data-design-trigger]');
+  const options = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-design-option]'));
+  const menu = root.querySelector<HTMLElement>('[data-design-options]');
+  if (!trigger || !menu) return;
+  const close = () => {
+    menu.hidden = true;
+    trigger.setAttribute('aria-expanded', 'false');
+  };
+  const open = () => {
+    menu.hidden = false;
+    trigger.setAttribute('aria-expanded', 'true');
+  };
+  trigger.addEventListener('click', () => {
+    if (menu.hidden) open();
+    else close();
+  });
+  options.forEach((option) => option.addEventListener('click', () => {
+    onSelect(option.dataset.designOption as DesignKey);
+    close();
+  }));
+  trigger.addEventListener('keydown', (event) => handleSelectKey(event, options, open, close));
+  document.addEventListener('click', (event) => {
+    if (!root.contains(event.target as Node)) close();
+  });
+}
+
+function handleSelectKey(event: KeyboardEvent, options: HTMLButtonElement[], open: () => void, close: () => void): void {
+  if (event.key === 'Escape') {
+    close();
+    return;
+  }
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    open();
+    return;
+  }
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+  event.preventDefault();
+  open();
+  const selectedIndex = options.findIndex((option) => option.getAttribute('aria-selected') === 'true');
+  const direction = event.key === 'ArrowDown' ? 1 : -1;
+  const nextIndex = (selectedIndex + direction + options.length) % options.length;
+  options[nextIndex]?.focus();
+}
+
+export function bindPreviewDesignButtons(root: HTMLElement, onSelect: (design: DesignKey) => void): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-preview-design]').forEach((button) => {
+    button.addEventListener('click', () => onSelect(button.dataset.previewDesign as DesignKey));
+  });
+}

package/src/tool/streamSceneCountdownClock/dom-views.ts

@@ -0,0 +1,53 @@
+import { formatCountdown, formatLocalTime, type CountdownSnapshot } from './logic';
+import { evaluateStatus } from './evaluator';
+import type { SceneKey, StreamSceneCountdownClockUI } from './ui';
+
+interface RenderInput {
+  root: HTMLElement;
+  snapshot: CountdownSnapshot;
+  scene: SceneKey;
+  sceneTitle: string;
+  message: string;
+  ui: StreamSceneCountdownClockUI;
+}
+
+function setText(root: HTMLElement, selector: string, value: string): void {
+  const element = root.querySelector<HTMLElement>(selector);
+  if (element) element.textContent = value;
+}
+
+export function renderClock(input: RenderInput): void {
+  const { root, snapshot, scene, ui } = input;
+  const reading = evaluateStatus(snapshot.status, ui);
+  const stageMessage = input.message.trim() || ui.stageCaption;
+  root.dataset.status = reading.tone;
+  root.style.setProperty('--n-progress', String(snapshot.elapsedFraction));
+  const clock = root.querySelector<HTMLElement>('[data-clock]');
+  if (clock) {
+    const parts = formatCountdown(snapshot.displaySeconds).split(':');
+    clock.innerHTML = parts.map((part, index) => `${index > 0 ? '<span class="ssc-clock-separator">:</span>' : ''}<span class="ssc-clock-part">${part}</span>`).join('');
+  }
+  setText(root, '[data-stage-message]', stageMessage);
+  setText(root, '[data-status-badge]', reading.badge);
+  setText(root, '[data-status-copy]', reading.text);
+  setText(root, '[data-scene-name]', input.sceneTitle.trim() || getSceneLabel(scene, ui));
+  setText(root, '[data-start-time]', formatLocalTime(snapshot.startAtMs));
+  setText(root, '[data-end-time]', formatLocalTime(snapshot.endAtMs));
+  setText(root, '[data-progress-copy]', `${Math.round(snapshot.elapsedFraction * 100)}%`);
+  const progress = root.querySelector<SVGCircleElement>('[data-progress-ring]');
+  if (progress) progress.style.strokeDashoffset = String(314.16 * (1 - snapshot.elapsedFraction));
+  const altProgress = root.querySelector<HTMLElement>('[data-alt-progress]');
+  if (altProgress) altProgress.style.transform = `scaleX(${snapshot.elapsedFraction})`;
+  const badge = root.querySelector<HTMLElement>('[data-status-badge]');
+  if (badge) badge.setAttribute('aria-label', `${ui.statusAria}: ${reading.badge}`);
+}
+
+export function getSceneLabel(scene: SceneKey, ui: StreamSceneCountdownClockUI): string {
+  const labels: Record<SceneKey, string> = {
+    brb: ui.sceneBrb,
+    starting: ui.sceneStarting,
+    raid: ui.sceneRaid,
+    intermission: ui.sceneIntermission,
+  };
+  return labels[scene];
+}

package/src/tool/streamSceneCountdownClock/entry.ts

@@ -0,0 +1,29 @@
+import type { StreamingToolEntry, ToolLocaleContent } from '../../types';
+import type { StreamSceneCountdownClockUI } from './ui';
+
+export type StreamSceneCountdownClockLocaleContent = ToolLocaleContent<StreamSceneCountdownClockUI>;
+
+export const streamSceneCountdownClock: StreamingToolEntry<StreamSceneCountdownClockUI> = {
+  id: 'streamSceneCountdownClock',
+  icons: {
+    bg: 'mdi:television-ambient-light',
+    fg: 'mdi:timer-outline',
+  },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/streamSceneCountdownClock/evaluator.ts

@@ -0,0 +1,28 @@
+import type { ClockStatus } from './logic';
+
+export interface StatusLabels {
+  readyBadge: string;
+  waitingBadge: string;
+  liveBadge: string;
+  endedBadge: string;
+  readyText: string;
+  waitingText: string;
+  liveText: string;
+  endedText: string;
+}
+
+export interface StatusReading {
+  badge: string;
+  text: string;
+  tone: ClockStatus;
+}
+
+export function evaluateStatus(status: ClockStatus, labels: StatusLabels): StatusReading {
+  const readings: Record<ClockStatus, StatusReading> = {
+    ready: { badge: labels.readyBadge, text: labels.readyText, tone: 'ready' },
+    waiting: { badge: labels.waitingBadge, text: labels.waitingText, tone: 'waiting' },
+    live: { badge: labels.liveBadge, text: labels.liveText, tone: 'live' },
+    ended: { badge: labels.endedBadge, text: labels.endedText, tone: 'ended' },
+  };
+  return readings[status];
+}

package/src/tool/streamSceneCountdownClock/i18n/de.ts

@@ -0,0 +1,47 @@
+import { makeContent } from './locale-factory';
+
+export const content = makeContent({
+  language: 'de',
+  slug: 'stream-countdown-uhr-fuer-obs',
+  title: 'Countdown Uhr fuer Stream Szenen',
+  description: 'Erstelle eine klare Countdown Szene fuer Starting soon, BRB, Raids und Unterbrechungen in deinem Stream.',
+  ui: {
+    sceneLabel: 'Welche Szene richtest du ein?', sceneBrb: 'BRB', sceneStarting: 'Gleich geht es los', sceneRaid: 'Raid', sceneIntermission: 'Pause',
+    sceneTitleLabel: 'Was soll über dem Timer stehen?', sceneTitlePlaceholder: 'Gleich geht es los', designLabel: 'Wie soll sich deine Szene anfühlen?', designAurora: 'Polarlicht Schleier', designType: 'Kinetische Schrift', designPulse: 'Pulsschimmer', designGlitch: 'Glitch Signal', designSunset: 'Sonnenflare',
+    accentColorLabel: 'Akzentfarbe', glowColorLabel: 'Leuchtfarbe', messageLabel: 'Was sollen deine Zuschauer wissen?', messagePlaceholder: 'Bin in 5 Minuten zurück', durationLabel: 'Wie viel Zeit brauchst du?', duration60: '1 Min.', duration300: '5 Min.', duration600: '10 Min.', durationCustom: 'Benutzerdefiniert', secondsLabel: 'Sekunden', startLabel: 'Wann soll dieser Hinweis starten?', startNow: 'Jetzt starten', scheduleTime: 'Zeit planen', timeLabel: 'Zu welcher Ortszeit soll er starten?',
+    startAction: 'Hinweis auf Sendung setzen', focusAction: 'Meine Szene zeigen', exitFocusAction: 'Szenenansicht verlassen', resetAction: 'Hinweis zurücksetzen', flowText: 'Du bist der Streamer: Waehle den Moment, stelle deine Zeit ein und schalte den Hinweis auf Sendung.', obsTitle: 'Diese Szene in OBS verwenden', obsText: 'Kopiere den Link, fuege eine OBS Browserquelle hinzu, setze den Link ein und nutze deine Ausgabeaufloesung. STREAMING oeffnet die saubere Vollbildszene automatisch.', obsStepCopy: 'Diesen Link kopieren', obsStepAdd: 'Eine Browserquelle in OBS hinzufuegen', obsStepPaste: 'Link einfuegen und Leinwandgroesse angleichen', copyUrlAction: 'OBS Link kopieren', copiedUrlText: 'OBS Link kopiert', streamUrlAria: 'Erzeugte OBS Streaming URL', previewTitle: 'Szenenlook waehlen', previewHint: 'Klicke auf eine Vorschau, um sie zu verwenden', previewAria: 'Vorschauen der Szenenlooks', stageEyebrow: 'Sendungsbild', stageCaption: 'Deine naechste Szene ist bereit', readyBadge: 'Bereit', waitingBadge: 'Wartet', liveBadge: 'Live Hinweis', endedBadge: 'Beendet', readyText: 'Pruefe die Szene und starte den Hinweis, sobald deine Szene bereit ist.', waitingText: 'Der Live Countdown beginnt zur geplanten Ortszeit.', liveText: 'Lass diese Szene sichtbar, bis der Wechsel bereit ist.', endedText: 'Der Hinweis ist vorbei. Setze ihn zurück oder richte eine neue Szene ein.', remainingLabel: 'Zeit in der Szene', startTimeLabel: 'Start', endTimeLabel: 'Ende', progressLabel: 'Szenenfortschritt', assumptionTitle: 'Hinweis zur Zeitmessung', assumptionText: 'Geplante Zeiten verwenden die Uhr deines Geraets. Der Timer ist ein visueller Hinweis und synchronisiert OBS, Twitch, Chat oder Encoder nicht.', warningTitle: 'Als Szenenhinweis verwenden', warningText: 'Ein schlafender Tab, eine geaenderte Systemzeit oder eine verzoegerte Sendung kann die sichtbare Zeit von deinem Stream abweichen lassen. Pruefe die Live Szene vor dem Wechsel.', invalidTime: 'Gib eine Ortszeit im Format HH:MM ein.', clockAria: 'Verbleibende Countdown Zeit', statusAria: 'Countdown Status',
+  },
+  faq: [
+    { question: 'Verbindet sich diese Uhr mit OBS oder Twitch?', answer: 'Nein. Sie ist ein eigenstaendiger Timer und steuert weder OBS, Twitch, Chat noch einen Streamingserver. Nutze Meine Szene zeigen fuer eine bildschirmfuellende Ansicht und erfasse sie als Browserquelle.' },
+    { question: 'Wie verwende ich den Countdown direkt in OBS?', answer: 'Fuege die Tool URL als OBS Browserquelle mit dem Streaming Schalter und den Einstellungen hinzu, zum Beispiel ?STREAMING&scene=starting&duration=300&design=aurora&title=Gleich%20geht%20es%20los. Steuerelemente verschwinden und der Countdown fuellt den Browserquellenbereich.' },
+    { question: 'Was passiert bei einer geplanten Startzeit?', answer: 'Die Uhr wartet bis zur gewaehlten Ortszeit und zaehlt dann die Dauer der Szene herunter. Eine bereits vergangene Zeit gilt als naechster Termin am folgenden Tag.' },
+    { question: 'Kann ich eine eigene Nachricht verwenden?', answer: 'Ja. Schreibe als Streamer den kurzen Hinweis fuer deine Zuschauer, etwa eine Rueckkehrzeit, den naechsten Schritt oder eine Raid Nachricht.' },
+    { question: 'Was aendern die Szenenpresets?', answer: 'Sie benennen den Moment der Sendung, damit die Szene auf einen Blick erkennbar ist. Timerrechnung, Dauer und Verbindung zu einer Plattform bleiben unveraendert.' },
+    { question: 'Ist die Endzeit exakt?', answer: 'Sie wird aus der lokalen Geraeteuhr und deiner Dauer berechnet. Ruhezustand des Browsers, pausierte Tabs oder eine geaenderte Uhr koennen die sichtbare Aktualisierung beeinflussen. Sie ist daher ein Planungshinweis, keine Sendesynchronisation.' },
+  ],
+  howTo: [
+    { name: 'Szenenmoment waehlen', text: 'Waehle Starting soon, BRB, Raid oder Pause, damit die Szene den Moment fuer deine Zuschauer benennt.' },
+    { name: 'Streamer Hinweis schreiben', text: 'Gib die kurze Nachricht ein, die deine Zuschauer beim Vorbereiten der naechsten Szene lesen sollen.' },
+    { name: 'Dauer oder Startzeit einstellen', text: 'Waehle eine haeufige Dauer oder gib deine eigene ein. Starte sofort fuer einen Live Hinweis oder plane eine lokale Uhrzeit.' },
+    { name: 'Status lesen', text: 'Nutze die grosse Uhr und das Statuslabel, um zu entscheiden, wann du die Sendeszene wechselst.' },
+  ],
+  seo: [
+    { type: 'title', text: 'Eine Stream Szene auf einen Blick vorbereiten', level: 2 },
+    { type: 'paragraph', html: 'Eine Countdown Uhr gibt deiner Starting soon, BRB, Raid oder Pausenszene einen klaren Rueckkehrpunkt. Schreibe, was du tust, stelle deine Zeit ein und nutze die grosse Uhr waehrend der Vorbereitung.' },
+    { type: 'title', text: 'Was die Szenenuhr berechnet', level: 3 },
+    { type: 'list', items: ['<strong>Sofortiger Hinweis:</strong> startet beim Auf Sendung Schalten und zaehlt die gewaehlte Dauer herunter.', '<strong>Geplanter Hinweis:</strong> wartet auf deine Ortszeit und beginnt danach mit der Szenendauer.', '<strong>Szenenstatus:</strong> trennt bereit, wartend, live und beendet, damit die naechste Aktion sichtbar bleibt.'] },
+    { type: 'title', text: 'Die passende Szenendauer waehlen', level: 3 },
+    { type: 'paragraph', html: 'Nimm eine kurze Dauer fuer Quellenwechsel oder eine schnelle Unterbrechung. Eine längere Dauer hilft bei Gaesten, einem Spielstart oder einem technischen Neustart. Deine Nachricht sollte Informationen liefern, die die Uhr allein nicht zeigt.' },
+    { type: 'tip', title: 'Die Rueckkehr konkret machen', html: 'Schreibe statt eines allgemeinen Versprechens die naechste Aktion: "Um 20:30 mit dem Finale zurück" oder "Raid wird vorbereitet". So sehen Zuschauer Wartezeit und Grund.' },
+    { type: 'title', text: 'Warum die Uhr offline bleibt', level: 3 },
+    { type: 'paragraph', html: 'Die Uhr braucht keinen Zugriff auf deinen Kanal oder deine Sendesoftware. Text und Zeit bleiben lokal und eignen sich als Planungsszene. Pruefe vor dem Livegang trotzdem die Sichtbarkeit der Browserquelle und den Szenenwechsel in deiner Sendesoftware.' },
+    { type: 'title', text: 'Die fertige Szene an OBS senden', level: 3 },
+    { type: 'paragraph', html: 'Klicke auf <strong>OBS Link kopieren</strong>, fuege in deiner Streamszene eine Browserquelle hinzu, setze den Link ein und gleiche die Leinwandaufloesung an. <code>?STREAMING</code> oeffnet eine saubere, selbststartende Vollbildszene ohne Bedienelemente.' },
+    { type: 'title', text: 'Den Look an deinen Stream anpassen', level: 3 },
+    { type: 'paragraph', html: 'Waehle zwischen fuenf unterschiedlichen Richtungen: Polarlicht Schleier fuer den atmosphaerischen Ring, Kinetische Schrift fuer grosse Zahlen, Pulsschimmer fuer expandierende Wellen, Glitch Signal fuer scharfe Broadcast Energie und Sonnenflare fuer einen warmen Horizont. Waehle eine Vorschau und passe Akzent und Leuchtfarbe an.' },
+    { type: 'list', items: ['<strong>Szene:</strong> benennt Starting soon, BRB, Raid oder Pause.', '<strong>Titel:</strong> ersetzt die Standardszeile durch deine eigene Ueberschrift.', '<strong>Nachricht:</strong> gibt den zusaetzlichen Hinweis fuer Zuschauer aus.', '<strong>Dauer und Startzeit:</strong> bestimmen Beginn und sichtbare Laufzeit.'] },
+    { type: 'paragraph', html: 'Wenn du den Link selbst baust, reicht <code>?STREAMING&amp;scene=raid&amp;title=Raid%20startet&amp;design=pulse</code>. Der Generator fuegt Dauer, Nachricht und Farben automatisch hinzu.' },
+    { type: 'title', text: 'Die Endzeit als Planungshinweis lesen', level: 3 },
+    { type: 'paragraph', html: 'Die Endzeit kommt aus deiner Geraeteuhr und der gewaehlten Dauer. Sie garantiert nicht, dass der Stream im selben Moment bei allen Zuschauern ankommt. Plane einen kleinen Puffer fuer Szenenwechsel mit Gaesten, Verbindungen oder Uebergaengen ein.' },
+  ],
+});

package/src/tool/streamSceneCountdownClock/i18n/en.ts

@@ -0,0 +1,253 @@
+import { bibliography } from '../bibliography';
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { StreamSceneCountdownClockUI } from '../ui';
+
+const slug = 'stream-scene-countdown-clock';
+const title = 'Stream Scene Countdown Clock';
+const description = 'Build a streamer-first countdown slate for starting soon, BRB, raid, and intermission scenes.';
+
+const faq = [
+  {
+    question: 'Does this countdown connect to OBS or Twitch?',
+    answer: 'No. It is a standalone timer and does not control OBS, Twitch, chat, or a stream server. Use Focus slate to make the countdown fill the screen, then capture that view as a browser source.',
+  },
+  {
+    question: 'How do I use the countdown directly in OBS?',
+    answer: 'Add the tool URL as an OBS Browser Source with the streaming flag and inputs, for example ?STREAMING&scene=starting&duration=300&design=aurora&title=Starting%20soon&accent=%23a78bfa&glow=%238ff5d7&message=Back%20soon. The controls and page chrome disappear, and the countdown fills the browser source viewport.',
+  },
+  {
+    question: 'What happens when I schedule a start time?',
+    answer: 'The clock enters a waiting state until the selected local time, then counts down the scene duration. A time that has already passed is treated as the next occurrence on the following day.',
+  },
+  {
+    question: 'Can I use a custom message?',
+    answer: 'Yes. As the streamer, write the short cue you want viewers to see, such as a return time, a next step, or a raid message.',
+  },
+  {
+    question: 'What do the scene presets change?',
+    answer: 'They label the broadcast moment so the slate is easier to recognize at a glance. The preset does not change the timer math, duration, or connection to a streaming platform.',
+  },
+  {
+    question: 'Is the end time exact?',
+    answer: 'It is calculated from the local browser clock and the duration you enter. Browser sleep, a paused tab, or a clock change can affect when the display visibly refreshes, so it is a planning cue rather than a broadcast synchronization guarantee.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Choose the scene moment',
+    text: 'Select Starting soon, BRB, Raid, or Intermission so the slate names the moment your viewers are seeing.',
+  },
+  {
+    name: 'Write your streamer cue',
+    text: 'Enter the short message you want viewers to read while you prepare the next scene, such as when you will return or what happens next.',
+  },
+  {
+    name: 'Set the duration or start time',
+    text: 'Pick a common duration or enter your own. Start immediately for a live cue, or schedule a local clock time for a planned scene.',
+  },
+  {
+    name: 'Read the status',
+    text: 'Use the large clock and status badge to decide when to switch your broadcast scene.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step, index) => ({
+    '@type': 'HowToStep',
+    position: index + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: 'en',
+};
+
+const ui: StreamSceneCountdownClockUI = {
+  sceneLabel: 'Which scene are you setting up?',
+  sceneBrb: 'BRB',
+  sceneStarting: 'Starting soon',
+  sceneRaid: 'Raid',
+  sceneIntermission: 'Intermission',
+  sceneTitleLabel: 'What should appear above the timer?',
+  sceneTitlePlaceholder: 'Starting soon',
+  designLabel: 'What should your scene feel like?',
+  designAurora: 'Aurora haze',
+  designType: 'Kinetic type',
+  designPulse: 'Pulse bloom',
+  designGlitch: 'Glitch signal',
+  designSunset: 'Solar flare',
+  accentColorLabel: 'Accent color',
+  glowColorLabel: 'Glow color',
+  messageLabel: 'What should your viewers know?',
+  messagePlaceholder: 'Back in 5 minutes',
+  durationLabel: 'How long do you need?',
+  duration60: '1 min',
+  duration300: '5 min',
+  duration600: '10 min',
+  durationCustom: 'Custom',
+  secondsLabel: 'seconds',
+  startLabel: 'When should this cue start?',
+  startNow: 'Start now',
+  scheduleTime: 'Schedule a time',
+  timeLabel: 'What local time should it start?',
+  startAction: 'Put my cue on air',
+  focusAction: 'Show my slate',
+  exitFocusAction: 'Exit slate view',
+  resetAction: 'Reset my cue',
+  flowText: 'You are the streamer: choose what is happening, set the time you need, then put your cue on air.',
+  obsTitle: 'Put this scene in OBS',
+  obsText: 'Copy the link, add an OBS Browser Source, paste it into the URL field, and use your scene resolution. STREAMING opens the clean full-screen slate automatically.',
+  obsStepCopy: 'Copy this link',
+  obsStepAdd: 'Add a Browser Source in OBS',
+  obsStepPaste: 'Paste it and match your canvas size',
+  copyUrlAction: 'Copy OBS link',
+  copiedUrlText: 'OBS link copied',
+  streamUrlAria: 'Generated OBS streaming URL',
+  previewTitle: 'Choose your scene look',
+  previewHint: 'Click a preview to use it',
+  previewAria: 'Scene design previews',
+  stageEyebrow: 'Broadcast slate',
+  stageCaption: 'Your next scene is ready',
+  readyBadge: 'Ready',
+  waitingBadge: 'Waiting',
+  liveBadge: 'Live cue',
+  endedBadge: 'Ended',
+  readyText: 'Preview the slate, then start the cue when your scene is ready.',
+  waitingText: 'The slate will switch to its live countdown at the scheduled local time.',
+  liveText: 'Keep this slate visible until the scene change is ready.',
+  endedText: 'The planned cue is over. Reset it or set a new scene.',
+  remainingLabel: 'Time on slate',
+  startTimeLabel: 'Starts',
+  endTimeLabel: 'Ends',
+  progressLabel: 'Scene progress',
+  assumptionTitle: 'Timing note',
+  assumptionText: 'Scheduled times use your device clock. The timer is a visual cue and does not synchronize OBS, Twitch, chat, or an encoder.',
+  warningTitle: 'Use it as a scene cue',
+  warningText: 'A sleeping browser tab, a changed system clock, or a delayed broadcast can make the visible time differ from the actual stream. Check the live scene before switching.',
+  invalidTime: 'Enter a local time in the format HH:MM.',
+  clockAria: 'Countdown time remaining',
+  statusAria: 'Countdown status',
+};
+
+export const content: ToolLocaleContent<StreamSceneCountdownClockUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faq,
+  bibliography,
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema as any],
+  seo: [
+    {
+      type: 'title',
+      text: 'Keep a stream scene cue readable at a glance',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'A stream countdown clock gives your starting soon, BRB, raid, or intermission scene a clear return point. Tell viewers what you are doing, set the time you need, and use the large timer while you prepare the broadcast.',
+    },
+    {
+      type: 'title',
+      text: 'What the scene clock calculates',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Immediate cue:</strong> starts from the moment you put the clock on air and counts down the selected duration.',
+        '<strong>Scheduled cue:</strong> waits for the local time you enter, then begins the scene duration.',
+        '<strong>Scene status:</strong> separates ready, waiting, live, and ended so the display communicates what action is next.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'How to choose a useful scene duration',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Use a short duration when you are changing sources or returning from a quick interruption. Choose a longer duration when you need time to prepare a guest, a game, or a technical reset. Your cue should add information that the timer alone cannot provide.',
+    },
+    {
+      type: 'tip',
+      title: 'Make the return cue specific',
+      html: 'Instead of a generic promise, write the next action: "Back at 8:30 with the final match" or "Raid setup in progress". Your cue then gives viewers the wait and the reason for it.',
+    },
+    {
+      type: 'title',
+      text: 'Why the clock is intentionally offline',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'The clock does not need access to your channel or broadcast software. Keeping the scene text and timing local makes it useful as a planning slate and avoids sending private production notes to a third party. If you use a browser source, verify the source visibility and scene transition in your broadcast software before going live.',
+    },
+    {
+      type: 'title',
+      text: 'Send a finished scene to OBS',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Your scene is ready when the preview looks right. Click <strong>Copy OBS link</strong>, add a Browser Source to the scene you use for your stream, paste the link, and match your canvas resolution. The <code>?STREAMING</code> flag opens a clean, self-starting slate with the controls removed.',
+    },
+    {
+      type: 'title',
+      text: 'Make the slate look like your stream',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Choose a visual direction from five genuinely different layouts: Aurora haze keeps the atmospheric ring, Kinetic type builds the countdown from oversized numbers, Pulse bloom uses expanding waves, Glitch signal brings sharp broadcast energy, and Solar flare creates a warm horizon. Pick a preview before you open the output, then tune the accent and glow colors to your channel.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Scene:</strong> labels the moment - starting soon, BRB, raid, or intermission.',
+        '<strong>Title:</strong> replaces the default scene line with your own headline, such as "FINAL BOSS FIGHT".',
+        '<strong>Message:</strong> adds the supporting cue your viewers need to read.',
+        '<strong>Duration and start time:</strong> control when the scene begins and how long it stays live.',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: 'If you build the URL yourself, keep it short with <code>?STREAMING&amp;scene=raid&amp;title=Raid%20starts%20soon&amp;design=pulse</code>. The generator includes your duration, message, and custom colors automatically, so you can paste one complete link into OBS.',
+    },
+    {
+      type: 'title',
+      text: 'Read the end time as a planning cue',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'The end time is derived from your device clock and the duration you chose. It is not a guarantee that the stream reaches viewers at the same instant. Keep a small buffer when the scene change depends on another person, a guest connection, or a broadcast transition.',
+    },
+  ],
+};

package/src/tool/streamSceneCountdownClock/i18n/es.ts

@@ -0,0 +1,47 @@
+import { makeContent } from './locale-factory';
+
+export const content = makeContent({
+  language: 'es',
+  slug: 'cuenta-atras-escena-streaming-obs',
+  title: 'Cuenta atrás de escenas para streaming',
+  description: 'Crea una escena de cuenta atrás pensada para streamers: empezamos pronto, BRB, raid e intermedio.',
+  ui: {
+    sceneLabel: '¿Qué escena estás preparando?', sceneBrb: 'BRB', sceneStarting: 'Empezamos pronto', sceneRaid: 'Raid', sceneIntermission: 'Intermedio',
+    sceneTitleLabel: '¿Qué debe aparecer sobre el contador?', sceneTitlePlaceholder: 'Empezamos pronto', designLabel: '¿Qué ambiente debe tener tu escena?', designAurora: 'Bruma aurora', designType: 'Tipografía cinética', designPulse: 'Pulso expansivo', designGlitch: 'Señal glitch', designSunset: 'Destello solar',
+    accentColorLabel: 'Color de acento', glowColorLabel: 'Color del brillo', messageLabel: '¿Qué deben saber tus espectadores?', messagePlaceholder: 'Vuelvo en 5 minutos', durationLabel: '¿Cuánto tiempo necesitas?', duration60: '1 min', duration300: '5 min', duration600: '10 min', durationCustom: 'Personalizado', secondsLabel: 'segundos', startLabel: '¿Cuándo debe empezar este aviso?', startNow: 'Empezar ahora', scheduleTime: 'Programar una hora', timeLabel: '¿A qué hora local debe empezar?',
+    startAction: 'Poner mi aviso en directo', focusAction: 'Mostrar mi escena', exitFocusAction: 'Salir de la escena', resetAction: 'Restablecer mi aviso', flowText: 'Tú eres el streamer: elige qué ocurre, define el tiempo que necesitas y pon tu aviso en directo.', obsTitle: 'Pon esta escena en OBS', obsText: 'Copia el enlace, añade una fuente de navegador en OBS, pégalo y usa la resolución de tu lienzo. STREAMING abre automáticamente la escena limpia a pantalla completa.', obsStepCopy: 'Copiar este enlace', obsStepAdd: 'Añadir una fuente de navegador en OBS', obsStepPaste: 'Pegar y ajustar al tamaño del lienzo', copyUrlAction: 'Copiar enlace de OBS', copiedUrlText: 'Enlace de OBS copiado', streamUrlAria: 'URL de streaming generada para OBS', previewTitle: 'Elige el look de tu escena', previewHint: 'Pulsa una preview para usarla', previewAria: 'Previews de diseños de escena', stageEyebrow: 'Escena de emisión', stageCaption: 'Tu próxima escena está lista', readyBadge: 'Listo', waitingBadge: 'Esperando', liveBadge: 'Aviso en directo', endedBadge: 'Terminado', readyText: 'Revisa la escena y empieza el aviso cuando todo esté listo.', waitingText: 'La cuenta atrás empezará a la hora local programada.', liveText: 'Mantén esta escena visible hasta que el cambio esté preparado.', endedText: 'El aviso ha terminado. Restablécelo o prepara una escena nueva.', remainingLabel: 'Tiempo en escena', startTimeLabel: 'Empieza', endTimeLabel: 'Termina', progressLabel: 'Progreso de la escena', assumptionTitle: 'Nota sobre el tiempo', assumptionText: 'Las horas programadas usan el reloj de tu dispositivo. El contador es una señal visual y no sincroniza OBS, Twitch, el chat ni el codificador.', warningTitle: 'Úsalo como señal de escena', warningText: 'Una pestaña suspendida, un cambio en el reloj del sistema o un retraso de la emisión pueden hacer que el tiempo visible no coincida con el directo. Comprueba la escena antes de cambiar.', invalidTime: 'Escribe una hora local con el formato HH:MM.', clockAria: 'Tiempo restante de la cuenta atrás', statusAria: 'Estado de la cuenta atrás',
+  },
+  faq: [
+    { question: '¿Este contador se conecta a OBS o Twitch?', answer: 'No. Es un temporizador independiente y no controla OBS, Twitch, el chat ni un servidor de streaming. Usa Mostrar mi escena para llenar la pantalla y captura esa vista como fuente de navegador.' },
+    { question: '¿Cómo uso el contador directamente en OBS?', answer: 'Añade la URL de la herramienta como fuente de navegador de OBS con el indicador de streaming y sus ajustes, por ejemplo ?STREAMING&scene=starting&duration=300&design=aurora&title=Empezamos%20pronto. Los controles desaparecen y el contador llena el espacio de la fuente.' },
+    { question: '¿Qué ocurre cuando programo una hora de inicio?', answer: 'El reloj espera hasta la hora local elegida y después cuenta la duración de la escena. Si la hora ya ha pasado, se interpreta como la siguiente ocasión del día siguiente.' },
+    { question: '¿Puedo usar un mensaje personalizado?', answer: 'Sí. Como streamer, escribe el aviso breve que quieras enseñar, como la hora de vuelta, el siguiente paso o un mensaje para el raid.' },
+    { question: '¿Qué cambian los presets de escena?', answer: 'Nombran el momento de la emisión para que la escena se entienda de un vistazo. No cambian las matemáticas del contador, la duración ni la conexión con ninguna plataforma.' },
+    { question: '¿La hora de finalización es exacta?', answer: 'Se calcula con el reloj local del navegador y la duración introducida. El reposo del navegador, una pestaña pausada o un cambio de hora pueden afectar a la actualización visible. Es una señal de planificación, no una garantía de sincronización.' },
+  ],
+  howTo: [
+    { name: 'Elige el momento de la escena', text: 'Selecciona Empezamos pronto, BRB, Raid o Intermedio para nombrar el momento que verán tus espectadores.' },
+    { name: 'Escribe tu aviso de streamer', text: 'Introduce el mensaje breve que quieres que lean mientras preparas la siguiente escena.' },
+    { name: 'Define la duración o la hora', text: 'Elige una duración habitual o escribe la tuya. Empieza al instante para un aviso en directo o programa una hora local.' },
+    { name: 'Lee el estado', text: 'Usa el contador grande y la etiqueta de estado para decidir cuándo cambiar de escena en tu emisión.' },
+  ],
+  seo: [
+    { type: 'title', text: 'Prepara una señal de escena que se entienda al instante', level: 2 },
+    { type: 'paragraph', html: 'Una cuenta atrás da a tu escena de empezamos pronto, BRB, raid o intermedio un punto claro de vuelta. Cuenta qué estás haciendo, define el tiempo que necesitas y deja el contador visible mientras preparas la emisión.' },
+    { type: 'title', text: 'Qué calcula el contador de escenas', level: 3 },
+    { type: 'list', items: ['<strong>Aviso inmediato:</strong> empieza cuando lo pones en directo y descuenta la duración elegida.', '<strong>Aviso programado:</strong> espera a la hora local y después inicia la duración de la escena.', '<strong>Estado de escena:</strong> separa listo, esperando, en directo y terminado para que la siguiente acción quede clara.'] },
+    { type: 'title', text: 'Cómo elegir una duración útil', level: 3 },
+    { type: 'paragraph', html: 'Usa una duración corta al cambiar fuentes o resolver una interrupción rápida. Elige más tiempo si tienes que preparar a un invitado, un juego o un reinicio técnico. El mensaje debe aportar algo que el contador por sí solo no pueda explicar.' },
+    { type: 'tip', title: 'Haz concreta la vuelta', html: 'En vez de prometer algo genérico, escribe la próxima acción: "Vuelvo a las 20:30 con la final" o "Preparando el raid". Así tus espectadores ven cuánto esperan y por qué.' },
+    { type: 'title', text: 'Por qué el contador funciona sin conexión', level: 3 },
+    { type: 'paragraph', html: 'El contador no necesita acceder a tu canal ni a tu software de emisión. El texto y el tiempo se quedan en el navegador, por lo que sirve como escena de planificación. Antes de emitir, comprueba la visibilidad de la fuente y la transición en OBS.' },
+    { type: 'title', text: 'Envía la escena terminada a OBS', level: 3 },
+    { type: 'paragraph', html: 'Pulsa <strong>Copiar enlace de OBS</strong>, añade una fuente de navegador a la escena que usas en tu stream, pega el enlace y ajusta la resolución del lienzo. El indicador <code>&#63;STREAMING</code> abre una escena limpia, automática y sin controles.' },
+    { type: 'title', text: 'Haz que el diseño encaje con tu canal', level: 3 },
+    { type: 'paragraph', html: 'Elige entre cinco composiciones distintas: Bruma aurora conserva el anillo atmosférico, Tipografía cinética construye el contador con números enormes, Pulso expansivo usa ondas que crecen, Señal glitch aporta energía de emisión y Destello solar crea un horizonte cálido. Escoge una preview y ajusta los colores de acento y brillo.' },
+    { type: 'list', items: ['<strong>Escena:</strong> etiqueta empezamos pronto, BRB, raid o intermedio.', '<strong>Título:</strong> sustituye la línea predeterminada por tu propio titular.', '<strong>Mensaje:</strong> añade el aviso que tus espectadores necesitan leer.', '<strong>Duración y hora:</strong> controlan el inicio y el tiempo visible de la escena.'] },
+    { type: 'paragraph', html: 'Si construyes la URL a mano, puedes empezar con <code>&#63;STREAMING&amp;scene=raid&amp;title=Raid%20en%20marcha&amp;design=pulse</code>. El generador añade automáticamente la duración, el mensaje y tus colores personalizados.' },
+    { type: 'title', text: 'Lee la hora final como una referencia', level: 3 },
+    { type: 'paragraph', html: 'La hora final sale del reloj de tu dispositivo y de la duración elegida. No garantiza que el directo llegue a todos al mismo instante. Deja un pequeño margen si el cambio depende de otra persona, una conexión invitada o una transición de emisión.' },
+  ],
+});

package/src/tool/streamSceneCountdownClock/i18n/fr.ts

@@ -0,0 +1,47 @@
+import { makeContent } from './locale-factory';
+
+export const content = makeContent({
+  language: 'fr',
+  slug: 'compte-a-rebours-scene-stream-obs',
+  title: 'Compte à rebours pour scène de stream',
+  description: 'Créez une scène de compte à rebours pensée pour les streamers, pour le démarrage, le BRB, le raid et la pause.',
+  ui: {
+    sceneLabel: 'Quelle scène préparez-vous ?', sceneBrb: 'BRB', sceneStarting: 'Bientôt en direct', sceneRaid: 'Raid', sceneIntermission: 'Pause',
+    sceneTitleLabel: 'Que faut-il afficher au-dessus du compteur ?', sceneTitlePlaceholder: 'Bientôt en direct', designLabel: 'Quelle ambiance doit avoir votre scène ?', designAurora: 'Brume aurora', designType: 'Typographie cinétique', designPulse: 'Pulsation florale', designGlitch: 'Signal glitch', designSunset: 'Éclat solaire',
+    accentColorLabel: "Couleur d\'accent", glowColorLabel: 'Couleur de halo', messageLabel: 'Que doivent savoir vos spectateurs ?', messagePlaceholder: 'Je reviens dans 5 minutes', durationLabel: 'De combien de temps avez-vous besoin ?', duration60: '1 min', duration300: '5 min', duration600: '10 min', durationCustom: 'Personnalisé', secondsLabel: 'secondes', startLabel: 'Quand ce signal doit-il commencer ?', startNow: 'Commencer maintenant', scheduleTime: 'Planifier une heure', timeLabel: 'À quelle heure locale doit-il commencer ?',
+    startAction: 'Mettre mon signal à l\'antenne', focusAction: 'Afficher ma scène', exitFocusAction: 'Quitter la scène', resetAction: 'Réinitialiser mon signal', flowText: 'Vous êtes le streamer: choisissez le moment, définissez le temps nécessaire, puis mettez votre signal à l\'antenne.', obsTitle: 'Mettre cette scène dans OBS', obsText: 'Copiez le lien, ajoutez une source navigateur dans OBS, collez-le et utilisez la résolution de votre canevas. STREAMING ouvre automatiquement la scène propre en plein écran.', obsStepCopy: 'Copier ce lien', obsStepAdd: 'Ajouter une source navigateur dans OBS', obsStepPaste: 'Coller et adapter à la taille du canevas', copyUrlAction: 'Copier le lien OBS', copiedUrlText: 'Lien OBS copié', streamUrlAria: 'URL de streaming OBS générée', previewTitle: 'Choisir le style de votre scène', previewHint: 'Cliquez sur un aperçu pour le choisir', previewAria: 'Aperçus des styles de scène', stageEyebrow: 'Scène de diffusion', stageCaption: 'Votre prochaine scène est prête', readyBadge: 'Prêt', waitingBadge: 'En attente', liveBadge: 'Signal en direct', endedBadge: 'Terminé', readyText: 'Vérifiez la scène, puis lancez le signal quand elle est prête.', waitingText: 'Le compte à rebours en direct commencera à l\'heure locale prévue.', liveText: 'Gardez cette scène visible jusqu\'à ce que le changement soit prêt.', endedText: 'Le signal est terminé. Réinitialisez-le ou préparez une nouvelle scène.', remainingLabel: 'Temps dans la scène', startTimeLabel: 'Début', endTimeLabel: 'Fin', progressLabel: 'Progression de la scène', assumptionTitle: 'Note sur le temps', assumptionText: 'Les heures planifiées utilisent l\'horloge de votre appareil. Le compteur est un repère visuel et ne synchronise pas OBS, Twitch, le chat ni l\'encodeur.', warningTitle: 'Utilisez-le comme repère de scène', warningText: 'Un onglet en veille, une horloge modifiée ou un retard de diffusion peuvent rendre le temps affiché différent du direct. Vérifiez la scène avant le changement.', invalidTime: 'Saisissez une heure locale au format HH:MM.', clockAria: 'Temps restant du compte à rebours', statusAria: 'État du compte à rebours',
+  },
+  faq: [
+    { question: 'Ce compte à rebours se connecte-t-il à OBS ou Twitch ?', answer: 'Non. Il s\'agit d\'un minuteur autonome qui ne contrôle ni OBS, ni Twitch, ni le chat, ni un serveur de stream. Utilisez Afficher ma scène pour remplir l\'écran, puis capturez cette vue comme source navigateur.' },
+    { question: 'Comment utiliser le compte à rebours directement dans OBS ?', answer: 'Ajoutez l\'URL de l\'outil comme source navigateur OBS avec le mode streaming et ses paramètres, par exemple ?STREAMING&scene=starting&duration=300&design=aurora&title=Bientôt%20en%20direct. Les commandes disparaissent et le compte à rebours remplit la zone de la source.' },
+    { question: 'Que se passe-t-il quand je planifie une heure de début ?', answer: 'L\'horloge attend l\'heure locale choisie, puis décompte la durée de la scène. Une heure déjà passée est reportée à la prochaine occurrence, le jour suivant.' },
+    { question: 'Puis-je utiliser un message personnalisé ?', answer: 'Oui. En tant que streamer, écrivez le signal court que vous voulez montrer, comme une heure de retour, une prochaine étape ou un message de raid.' },
+    { question: 'Que changent les préréglages de scène ?', answer: 'Ils nomment le moment de la diffusion afin que la scène soit comprise d\'un coup d\'œil. Le calcul du temps, la durée et la connexion à une plateforme ne changent pas.' },
+    { question: 'L\'heure de fin est-elle exacte ?', answer: 'Elle est calculée avec l\'horloge locale du navigateur et la durée saisie. La mise en veille du navigateur, un onglet suspendu ou un changement d\'horloge peuvent modifier l\'actualisation visible. C\'est un repère de préparation, pas une synchronisation de diffusion.' },
+  ],
+  howTo: [
+    { name: 'Choisir le moment de la scène', text: 'Sélectionnez Bientôt en direct, BRB, Raid ou Pause pour nommer ce que vos spectateurs voient.' },
+    { name: 'Écrire votre signal de streamer', text: 'Saisissez le court message à lire pendant que vous préparez la scène suivante.' },
+    { name: 'Définir la durée ou l\'heure', text: 'Choisissez une durée courante ou saisissez la vôtre. Démarrez immédiatement pour un signal en direct ou planifiez une heure locale.' },
+    { name: 'Lire l\'état', text: 'Utilisez la grande horloge et le badge d\'état pour savoir quand changer de scène dans votre diffusion.' },
+  ],
+  seo: [
+    { type: 'title', text: 'Préparer un signal de scène lisible en un instant', level: 2 },
+    { type: 'paragraph', html: 'Un compte à rebours donne à votre scène Bientôt en direct, BRB, raid ou pause un point de retour clair. Indiquez ce que vous faites, définissez le temps nécessaire et laissez le grand compteur visible pendant la préparation.' },
+    { type: 'title', text: 'Ce que calcule le compteur de scène', level: 3 },
+    { type: 'list', items: ['<strong>Signal immédiat :</strong> commence quand vous le mettez à l\'antenne et décompte la durée choisie.', '<strong>Signal planifié :</strong> attend l\'heure locale saisie avant de lancer la durée de la scène.', '<strong>État de la scène :</strong> distingue prêt, attente, direct et terminé pour rendre la prochaine action évidente.'] },
+    { type: 'title', text: 'Choisir une durée utile', level: 3 },
+    { type: 'paragraph', html: 'Utilisez une durée courte pour changer de source ou revenir d\'une interruption rapide. Prévoyez plus de temps pour préparer un invité, un jeu ou une remise en route technique. Votre message doit apporter une information que l\'horloge seule ne peut pas donner.' },
+    { type: 'tip', title: 'Rendre le retour concret', html: 'Au lieu d\'une promesse vague, écrivez l\'action suivante: "De retour à 20 h 30 pour la finale" ou "Raid en préparation". Vos spectateurs comprennent ainsi l\'attente et sa raison.' },
+    { type: 'title', text: 'Pourquoi le compteur reste hors ligne', level: 3 },
+    { type: 'paragraph', html: 'L\'horloge n\'a pas besoin d\'accéder à votre chaîne ni à votre logiciel de diffusion. Le texte et le temps restent dans le navigateur, ce qui en fait une scène de préparation pratique. Vérifiez tout de même la visibilité de la source et la transition dans OBS avant le direct.' },
+    { type: 'title', text: 'Envoyer la scène terminée vers OBS', level: 3 },
+    { type: 'paragraph', html: 'Cliquez sur <strong>Copier le lien OBS</strong>, ajoutez une source navigateur à votre scène de stream, collez le lien et adaptez la résolution du canevas. Le mode <code>?STREAMING</code> ouvre une scène propre, autonome et sans commandes.' },
+    { type: 'title', text: 'Adapter le style à votre chaîne', level: 3 },
+    { type: 'paragraph', html: 'Choisissez entre cinq compositions distinctes: Brume aurora garde un anneau atmosphérique, Typographie cinétique agrandit les chiffres, Pulsation florale déploie des ondes, Signal glitch apporte une énergie de diffusion et Éclat solaire crée un horizon chaud. Choisissez un aperçu et ajustez les couleurs d\'accent et de halo.' },
+    { type: 'list', items: ['<strong>Scène :</strong> indique Bientôt en direct, BRB, raid ou pause.', '<strong>Titre :</strong> remplace la ligne par défaut par votre propre accroche.', '<strong>Message :</strong> ajoute le repère que vos spectateurs doivent lire.', '<strong>Durée et heure :</strong> contrôlent le début et le temps d\'affichage.'] },
+    { type: 'paragraph', html: 'Si vous construisez l\'URL vous-même, utilisez <code>?STREAMING&amp;scene=raid&amp;title=Raid%20en%20preparation&amp;design=pulse</code>. Le générateur ajoute automatiquement la durée, le message et vos couleurs.' },
+    { type: 'title', text: 'Lire l\'heure de fin comme un repère', level: 3 },
+    { type: 'paragraph', html: 'L\'heure de fin vient de l\'horloge de votre appareil et de la durée choisie. Elle ne garantit pas que le direct arrive au même instant chez tous les spectateurs. Gardez une marge si le changement dépend d\'un invité, d\'une connexion ou d\'une transition de diffusion.' },
+  ],
+});