@fifthbell/brokaw 0.1.39

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fifth Bell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# @fifthbell/brokaw
+
+Server-side renderer and Handlebars template bundle for Fifth Bell pages.
+
+## What it does
+
+- Renders canonical content documents into HTML
+- Supports `article-page`, `homepage`, `category-page`, `live-story`, and `404` layouts
+- Ships reusable Handlebars templates, partial dependency metadata, and compiled CSS
+
+## Installation
+
+```bash
+npm install @fifthbell/brokaw
+```
+
+## Basic usage
+
+```ts
+import { render } from '@fifthbell/brokaw';
+
+const html = render(doc);
+```
+
+`doc` must match the canonical schema used by the renderer (see [src/types/canonical-article.ts](src/types/canonical-article.ts)).
+
+## Exports
+
+- `@fifthbell/brokaw` -> renderer entrypoint
+- `@fifthbell/brokaw/partial-deps.json` -> partial-to-layout dependency map
+
+## Development
+
+```bash
+npm install
+npm run typecheck
+npm run test:unit
+npm run build
+npm run storybook
+```
+
+## Publish flow
+
+- CI validates typecheck, unit tests, and package build on pull requests and `main` pushes.
+- Package publish is triggered by pushing a `v*` tag.

package/dist/carousels.d.ts

@@ -0,0 +1 @@
+export declare function initCarousels(root?: ParentNode): void;

package/dist/carousels.js

@@ -0,0 +1,65 @@
+function setSlideState(slides, dots, index) {
+    slides.forEach((slide, slideIndex) => {
+        const active = slideIndex === index;
+        slide.classList.toggle('hidden', !active);
+        slide.classList.toggle('opacity-0', !active);
+        slide.classList.toggle('opacity-100', active);
+        slide.classList.toggle('active', active);
+    });
+    dots.forEach((dot, dotIndex) => {
+        dot.classList.toggle('active', dotIndex === index);
+    });
+}
+export function initCarousels(root = document) {
+    const scopes = root.querySelectorAll('[data-carousel]');
+    scopes.forEach((scope) => {
+        if (scope.dataset.carouselBound === 'true')
+            return;
+        const slides = Array.from(scope.querySelectorAll('.carousel-slide'));
+        if (slides.length === 0) {
+            scope.dataset.carouselBound = 'true';
+            return;
+        }
+        const dots = Array.from(scope.querySelectorAll('.carousel-dot'));
+        const nextButton = scope.querySelector('.carousel-next');
+        const activeIndex = slides.findIndex((slide) => slide.classList.contains('active'));
+        let currentIndex = activeIndex >= 0 ? activeIndex : 0;
+        const clearTimer = () => {
+            if (!scope.__brokawCarouselTimer)
+                return;
+            window.clearInterval(scope.__brokawCarouselTimer);
+            delete scope.__brokawCarouselTimer;
+        };
+        const startTimer = () => {
+            clearTimer();
+            if (slides.length < 2)
+                return;
+            scope.__brokawCarouselTimer = window.setInterval(() => {
+                if (!document.contains(scope)) {
+                    clearTimer();
+                    return;
+                }
+                currentIndex = (currentIndex + 1) % slides.length;
+                setSlideState(slides, dots, currentIndex);
+            }, 6000);
+        };
+        const goToSlide = (nextIndex) => {
+            currentIndex = nextIndex;
+            setSlideState(slides, dots, currentIndex);
+            startTimer();
+        };
+        dots.forEach((dot, dotIndex) => {
+            dot.addEventListener('click', () => goToSlide(dotIndex));
+        });
+        if (nextButton) {
+            nextButton.addEventListener('click', () => {
+                goToSlide((currentIndex + 1) % slides.length);
+            });
+        }
+        scope.addEventListener('mouseenter', clearTimer);
+        scope.addEventListener('mouseleave', startTimer);
+        setSlideState(slides, dots, currentIndex);
+        startTimer();
+        scope.dataset.carouselBound = 'true';
+    });
+}

package/dist/components/live-program/LiveProgram.d.ts

@@ -0,0 +1,8 @@
+interface LiveProgramProps {
+    programId?: string;
+    embedded?: boolean;
+    sceneMetadata?: Record<string, unknown> | null;
+    activeComponents?: string[];
+}
+export default function LiveProgram({ programId, embedded, sceneMetadata, activeComponents }: LiveProgramProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/live-program/LiveProgram.js

@@ -0,0 +1,526 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSSE } from './hooks/useSSE.js';
+// Hardcoded API Base URL for Fifthbell
+function getApiBaseUrl() {
+    if (typeof window === 'undefined')
+        return 'http://127.0.0.1:3000';
+    // Use the current host to dynamically target however they're accessing it
+    const hostname = window.location.hostname;
+    return `http://${hostname.includes(':') ? `[${hostname}]` : hostname}:3000`;
+}
+function apiUrl(path) {
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+    return `${getApiBaseUrl()}${normalizedPath}`;
+}
+import { FIFTHBELL_ASSETS } from './assets.js';
+import { MarqueeCurtain } from './components/MarqueeCurtain.js';
+import Marquee from './components/Marquee.js';
+import { DEFAULT_WORLD_CLOCK_CITIES } from './components/WorldClocks.js';
+import { CallsignSlide } from './components/slides/CallsignSlide.js';
+import { slideStyles } from './components/slides/slideStyles.js';
+import { fetchEvents, getCachedEvents, hasEventChanges } from './events.js';
+import { createArticlesSegment, createEarthquakeSegment, createMarketsSegment, createWeatherSegment, fetchArticles, fetchEarthquakes, fetchMarketData, fetchWeatherData, usePlaylistEngine } from './segments/index.js';
+const DEFAULT_LANGUAGE_ROTATION = ['en', 'es', 'en', 'it'];
+const DEFAULT_CALLSIGN_PRELAUNCH_UNTIL_NYC = '2026-01-02T21:30:00';
+const FIFTHBELL_COMPONENT_TYPE_CONTENT = 'fifthbell-content';
+const FIFTHBELL_COMPONENT_TYPE_MARQUEE = 'fifthbell-marquee';
+const FIFTHBELL_COMPONENT_TYPE_TONI_CLOCK = 'toni-clock';
+const FIFTHBELL_COMPONENT_TYPE_CORNER = 'fifthbell-corner';
+const FIFTHBELL_COMPONENT_TYPE_LEGACY = 'fifthbell';
+const DEFAULT_FIFTHBELL_CONFIG = {
+    showArticles: true,
+    showWeather: true,
+    showEarthquakes: true,
+    showMarkets: true,
+    showMarquee: false,
+    showCallsignTake: true,
+    weatherCities: [],
+    languageRotation: DEFAULT_LANGUAGE_ROTATION,
+    dataLoadTimeoutMs: 15000,
+    playlistDefaultDurationMs: 10000,
+    playlistUpdateIntervalMs: 100,
+    articlesDurationMs: 10000,
+    weatherDurationMs: 5000,
+    earthquakesDurationMs: 10000,
+    marketsDurationMs: 10000,
+    showWorldClocks: true,
+    showBellIcon: true,
+    worldClockRotateIntervalMs: 7000,
+    worldClockTransitionMs: 300,
+    worldClockShuffle: true,
+    worldClockWidthPx: 200,
+    worldClockCities: [...DEFAULT_WORLD_CLOCK_CITIES],
+    audioCueEnabled: true,
+    audioCueMinute: 59,
+    audioCueSecond: 55,
+    callsignPrelaunchUntilNyc: DEFAULT_CALLSIGN_PRELAUNCH_UNTIL_NYC,
+    callsignWindowStartSecond: 50,
+    callsignWindowEndSecond: 3,
+    marqueeMinPostsCount: 4,
+    marqueeMinAverageRelevance: 0,
+    marqueeMinMedianRelevance: 0,
+    marqueePixelsPerSecond: 150,
+    marqueeMinDurationSeconds: 10,
+    marqueeHeightPx: 72
+};
+function clampNumber(value, fallback, min, max) {
+    const numeric = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(numeric)) {
+        return fallback;
+    }
+    return Math.min(max, Math.max(min, numeric));
+}
+function normalizeBoolean(value, fallback) {
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return value !== 0;
+    }
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (['true', '1', 'yes', 'on'].includes(normalized)) {
+            return true;
+        }
+        if (['false', '0', 'no', 'off', ''].includes(normalized)) {
+            return false;
+        }
+    }
+    return fallback;
+}
+function normalizeStringArray(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    const deduped = new Set();
+    for (const item of value) {
+        if (typeof item !== 'string') {
+            continue;
+        }
+        const trimmed = item.trim();
+        if (!trimmed) {
+            continue;
+        }
+        deduped.add(trimmed);
+    }
+    return [...deduped];
+}
+function normalizeLanguageRotation(value) {
+    if (!Array.isArray(value)) {
+        return [...DEFAULT_LANGUAGE_ROTATION];
+    }
+    const allowed = new Set(['en', 'es', 'it']);
+    const filtered = value.filter((item) => typeof item === 'string' && allowed.has(item));
+    return filtered.length > 0 ? filtered : [...DEFAULT_LANGUAGE_ROTATION];
+}
+function normalizeWorldClockCities(value) {
+    if (!Array.isArray(value)) {
+        return [...DEFAULT_WORLD_CLOCK_CITIES];
+    }
+    const normalized = value
+        .map((item) => {
+        if (!item || typeof item !== 'object' || Array.isArray(item)) {
+            return null;
+        }
+        const city = typeof item.city === 'string' ? item.city.trim() : '';
+        const timezone = typeof item.timezone === 'string' ? item.timezone.trim() : '';
+        if (!city || !timezone) {
+            return null;
+        }
+        return { city, timezone };
+    })
+        .filter((item) => item !== null);
+    return normalized.length > 0 ? normalized : [...DEFAULT_WORLD_CLOCK_CITIES];
+}
+function normalizeCityKey(value) {
+    return value
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .trim()
+        .toLowerCase();
+}
+function toRecord(value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        return value;
+    }
+    return {};
+}
+function parseSceneMetadata(scene) {
+    if (!scene || !scene.metadata) {
+        return {};
+    }
+    try {
+        const parsed = JSON.parse(scene.metadata);
+        return toRecord(parsed);
+    }
+    catch {
+        return {};
+    }
+}
+function resolveFifthBellLayerAvailability(activeComponents) {
+    const defaultAvailability = {
+        content: true,
+        marquee: true
+    };
+    if (!activeComponents || activeComponents.length === 0) {
+        return defaultAvailability;
+    }
+    if (activeComponents.includes(FIFTHBELL_COMPONENT_TYPE_LEGACY)) {
+        return defaultAvailability;
+    }
+    return {
+        content: activeComponents.includes(FIFTHBELL_COMPONENT_TYPE_CONTENT),
+        marquee: activeComponents.includes(FIFTHBELL_COMPONENT_TYPE_MARQUEE)
+    };
+}
+function extractConfigFromMetadata(metadataInput) {
+    const metadata = toRecord(metadataInput);
+    const legacyProps = toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_LEGACY]);
+    const contentProps = {
+        ...legacyProps,
+        ...toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_CONTENT])
+    };
+    const marqueeProps = {
+        ...legacyProps,
+        ...toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_MARQUEE])
+    };
+    const cornerProps = {
+        ...legacyProps,
+        ...toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_TONI_CLOCK]),
+        ...toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_CORNER])
+    };
+    const parsedMarqueeMinPostsCount = clampNumber(marqueeProps.marqueeMinPostsCount, DEFAULT_FIFTHBELL_CONFIG.marqueeMinPostsCount, 0, 50);
+    let parsedMarqueeMinAverageRelevance = clampNumber(marqueeProps.marqueeMinAverageRelevance, DEFAULT_FIFTHBELL_CONFIG.marqueeMinAverageRelevance, 0, 100);
+    let parsedMarqueeMinMedianRelevance = clampNumber(marqueeProps.marqueeMinMedianRelevance, DEFAULT_FIFTHBELL_CONFIG.marqueeMinMedianRelevance, 0, 100);
+    // Compatibility: prior defaults were tuned for OR logic. Under threshold logic, treat that trio as legacy.
+    if (parsedMarqueeMinPostsCount === 4 && parsedMarqueeMinAverageRelevance === 5 && parsedMarqueeMinMedianRelevance === 7) {
+        parsedMarqueeMinAverageRelevance = 0;
+        parsedMarqueeMinMedianRelevance = 0;
+    }
+    return {
+        showArticles: normalizeBoolean(contentProps.showArticles, DEFAULT_FIFTHBELL_CONFIG.showArticles),
+        showWeather: normalizeBoolean(contentProps.showWeather, DEFAULT_FIFTHBELL_CONFIG.showWeather),
+        showEarthquakes: normalizeBoolean(contentProps.showEarthquakes, DEFAULT_FIFTHBELL_CONFIG.showEarthquakes),
+        showMarkets: normalizeBoolean(contentProps.showMarkets, DEFAULT_FIFTHBELL_CONFIG.showMarkets),
+        showMarquee: normalizeBoolean(marqueeProps.showMarquee, DEFAULT_FIFTHBELL_CONFIG.showMarquee),
+        showCallsignTake: normalizeBoolean(contentProps.showCallsignTake, DEFAULT_FIFTHBELL_CONFIG.showCallsignTake),
+        weatherCities: normalizeStringArray(contentProps.weatherCities),
+        languageRotation: normalizeLanguageRotation(contentProps.languageRotation),
+        dataLoadTimeoutMs: clampNumber(contentProps.dataLoadTimeoutMs, DEFAULT_FIFTHBELL_CONFIG.dataLoadTimeoutMs, 1000, 120000),
+        playlistDefaultDurationMs: clampNumber(contentProps.playlistDefaultDurationMs, DEFAULT_FIFTHBELL_CONFIG.playlistDefaultDurationMs, 1000, 120000),
+        playlistUpdateIntervalMs: clampNumber(contentProps.playlistUpdateIntervalMs, DEFAULT_FIFTHBELL_CONFIG.playlistUpdateIntervalMs, 16, 5000),
+        articlesDurationMs: clampNumber(contentProps.articlesDurationMs, DEFAULT_FIFTHBELL_CONFIG.articlesDurationMs, 1000, 120000),
+        weatherDurationMs: clampNumber(contentProps.weatherDurationMs, DEFAULT_FIFTHBELL_CONFIG.weatherDurationMs, 1000, 120000),
+        earthquakesDurationMs: clampNumber(contentProps.earthquakesDurationMs, DEFAULT_FIFTHBELL_CONFIG.earthquakesDurationMs, 1000, 120000),
+        marketsDurationMs: clampNumber(contentProps.marketsDurationMs, DEFAULT_FIFTHBELL_CONFIG.marketsDurationMs, 1000, 120000),
+        showWorldClocks: normalizeBoolean(cornerProps.showWorldClocks, DEFAULT_FIFTHBELL_CONFIG.showWorldClocks),
+        showBellIcon: true,
+        worldClockRotateIntervalMs: clampNumber(cornerProps.worldClockRotateIntervalMs, DEFAULT_FIFTHBELL_CONFIG.worldClockRotateIntervalMs, 500, 120000),
+        worldClockTransitionMs: clampNumber(cornerProps.worldClockTransitionMs, DEFAULT_FIFTHBELL_CONFIG.worldClockTransitionMs, 0, 10000),
+        worldClockShuffle: normalizeBoolean(cornerProps.worldClockShuffle, DEFAULT_FIFTHBELL_CONFIG.worldClockShuffle),
+        worldClockWidthPx: clampNumber(cornerProps.worldClockWidthPx, DEFAULT_FIFTHBELL_CONFIG.worldClockWidthPx, 120, 600),
+        worldClockCities: normalizeWorldClockCities(cornerProps.worldClockCities),
+        audioCueEnabled: normalizeBoolean(contentProps.audioCueEnabled, DEFAULT_FIFTHBELL_CONFIG.audioCueEnabled),
+        audioCueMinute: clampNumber(contentProps.audioCueMinute, DEFAULT_FIFTHBELL_CONFIG.audioCueMinute, 0, 59),
+        audioCueSecond: clampNumber(contentProps.audioCueSecond, DEFAULT_FIFTHBELL_CONFIG.audioCueSecond, 0, 59),
+        callsignPrelaunchUntilNyc: typeof contentProps.callsignPrelaunchUntilNyc === 'string' && contentProps.callsignPrelaunchUntilNyc.trim()
+            ? contentProps.callsignPrelaunchUntilNyc.trim()
+            : DEFAULT_FIFTHBELL_CONFIG.callsignPrelaunchUntilNyc,
+        callsignWindowStartSecond: clampNumber(contentProps.callsignWindowStartSecond, DEFAULT_FIFTHBELL_CONFIG.callsignWindowStartSecond, 0, 59),
+        callsignWindowEndSecond: clampNumber(contentProps.callsignWindowEndSecond, DEFAULT_FIFTHBELL_CONFIG.callsignWindowEndSecond, 0, 59),
+        marqueeMinPostsCount: parsedMarqueeMinPostsCount,
+        marqueeMinAverageRelevance: parsedMarqueeMinAverageRelevance,
+        marqueeMinMedianRelevance: parsedMarqueeMinMedianRelevance,
+        marqueePixelsPerSecond: clampNumber(marqueeProps.marqueePixelsPerSecond, DEFAULT_FIFTHBELL_CONFIG.marqueePixelsPerSecond, 10, 1000),
+        marqueeMinDurationSeconds: clampNumber(marqueeProps.marqueeMinDurationSeconds, DEFAULT_FIFTHBELL_CONFIG.marqueeMinDurationSeconds, 1, 120),
+        marqueeHeightPx: clampNumber(marqueeProps.marqueeHeightPx, DEFAULT_FIFTHBELL_CONFIG.marqueeHeightPx, 72, 200)
+    };
+}
+function normalizeLaunchDate(rawDate) {
+    const parsed = new Date(rawDate);
+    if (Number.isNaN(parsed.getTime())) {
+        return new Date(DEFAULT_CALLSIGN_PRELAUNCH_UNTIL_NYC);
+    }
+    return parsed;
+}
+export default function LiveProgram({ programId = 'fifthbell', embedded = false, sceneMetadata, activeComponents }) {
+    const encodedProgramId = encodeURIComponent(programId);
+    const [state, setState] = useState(null);
+    const [showLogoSlide, setShowLogoSlide] = useState(false);
+    const [callsignTime, setCallsignTime] = useState(new Date());
+    const audioRef = useRef(null);
+    const audioInitialized = useRef(false);
+    const [languageIndex, setLanguageIndex] = useState(0);
+    const [articles, setArticles] = useState([]);
+    const [weatherData, setWeatherData] = useState([]);
+    const [earthquakes, setEarthquakes] = useState([]);
+    const [markets, setMarkets] = useState([]);
+    const [stageEvents, setStageEvents] = useState([]);
+    const [programEvents, setProgramEvents] = useState([]);
+    const [showCurtain, setShowCurtain] = useState(false);
+    const [updatePending, setUpdatePending] = useState(false);
+    const updatePendingRef = useRef(false);
+    const [dataLoaded, setDataLoaded] = useState(false);
+    const lastFetchedItemRef = useRef(-1);
+    const controlledBySceneRenderer = sceneMetadata !== undefined;
+    const effectiveSceneMetadata = useMemo(() => {
+        if (sceneMetadata !== undefined) {
+            return toRecord(sceneMetadata);
+        }
+        return parseSceneMetadata(state?.activeScene ?? null);
+    }, [sceneMetadata, state?.activeScene]);
+    const config = useMemo(() => extractConfigFromMetadata(effectiveSceneMetadata), [effectiveSceneMetadata]);
+    const layerAvailability = useMemo(() => resolveFifthBellLayerAvailability(activeComponents), [activeComponents]);
+    const languageRotation = config.languageRotation;
+    const currentLanguage = languageRotation[languageIndex] ?? languageRotation[0] ?? 'en';
+    useEffect(() => {
+        if (languageIndex >= languageRotation.length) {
+            setLanguageIndex(0);
+        }
+    }, [languageIndex, languageRotation.length]);
+    useEffect(() => {
+        updatePendingRef.current = updatePending;
+    }, [updatePending]);
+    useEffect(() => {
+        if (controlledBySceneRenderer) {
+            return;
+        }
+        fetch(apiUrl(`/program/${encodedProgramId}/state`))
+            .then((res) => res.json())
+            .then((data) => setState(data))
+            .catch((err) => console.error('Failed to fetch FifthBell program state:', err));
+    }, [controlledBySceneRenderer, encodedProgramId]);
+    const refreshAllData = useCallback(async () => {
+        const [articlesData, weatherDataResult, earthquakesData, marketsData] = await Promise.all([
+            fetchArticles(currentLanguage),
+            fetchWeatherData(),
+            fetchEarthquakes(currentLanguage),
+            fetchMarketData(),
+            fetchEvents({
+                language: currentLanguage,
+                allowedLanguages: [currentLanguage]
+            })
+        ]);
+        setArticles(articlesData);
+        setWeatherData(weatherDataResult);
+        setEarthquakes(earthquakesData);
+        setMarkets(marketsData);
+        const cachedEvents = getCachedEvents();
+        if (cachedEvents) {
+            setStageEvents(cachedEvents);
+            setProgramEvents(cachedEvents);
+        }
+        setDataLoaded(true);
+    }, [currentLanguage]);
+    useEffect(() => {
+        void refreshAllData();
+    }, [refreshAllData]);
+    useSSE({
+        url: apiUrl(`/program/${encodedProgramId}/events`),
+        enabled: !controlledBySceneRenderer,
+        onMessage: (data) => {
+            if ((data.type === 'scene_change' || data.type === 'program_scenes_changed') && data.state) {
+                setState(data.state);
+            }
+            else if (data.type === 'scene_update') {
+                setState((prev) => {
+                    if (!prev)
+                        return prev;
+                    return {
+                        ...prev,
+                        activeScene: data.scene ?? prev.activeScene
+                    };
+                });
+            }
+            else if (data.type === 'scene_cleared') {
+                setState((prev) => {
+                    if (!prev)
+                        return prev;
+                    return {
+                        ...prev,
+                        activeSceneId: null,
+                        activeScene: null
+                    };
+                });
+            }
+        }
+    });
+    useEffect(() => {
+        if (dataLoaded || config.dataLoadTimeoutMs <= 0) {
+            return;
+        }
+        const timeoutId = window.setTimeout(() => {
+            window.location.reload();
+        }, config.dataLoadTimeoutMs);
+        return () => window.clearTimeout(timeoutId);
+    }, [dataLoaded, config.dataLoadTimeoutMs]);
+    const refreshEvents = useCallback(async () => {
+        await fetchEvents({
+            language: currentLanguage,
+            allowedLanguages: [currentLanguage]
+        });
+        const cachedEvents = getCachedEvents();
+        if (!cachedEvents) {
+            return;
+        }
+        setStageEvents((prevStage) => {
+            const prevJson = JSON.stringify(prevStage);
+            const nextJson = JSON.stringify(cachedEvents);
+            return prevJson === nextJson ? prevStage : cachedEvents;
+        });
+    }, [currentLanguage]);
+    useEffect(() => {
+        if (stageEvents.length > 0 && programEvents.length > 0 && hasEventChanges(programEvents, stageEvents) && !showCurtain && !updatePending) {
+            setUpdatePending(true);
+        }
+    }, [programEvents, showCurtain, stageEvents, updatePending]);
+    const handleMarqueeCycleComplete = useCallback(() => {
+        if (updatePendingRef.current) {
+            setShowCurtain(true);
+            setUpdatePending(false);
+        }
+    }, []);
+    const handleCurtainComplete = useCallback(() => {
+        setProgramEvents(stageEvents);
+        setShowCurtain(false);
+    }, [stageEvents]);
+    const handlePlaylistLoop = useCallback(() => {
+        setLanguageIndex((prev) => (prev + 1) % Math.max(1, languageRotation.length));
+    }, [languageRotation.length]);
+    const articlesSegment = useMemo(() => {
+        const segment = createArticlesSegment(articles, setArticles, currentLanguage);
+        segment.durationMsPerItem = config.articlesDurationMs;
+        const originalRender = segment.render;
+        const originalOnEnter = segment.onEnter;
+        segment.onEnter = () => {
+            originalOnEnter?.();
+            lastFetchedItemRef.current = -1;
+        };
+        segment.render = (itemIndex, progress) => {
+            if (lastFetchedItemRef.current !== itemIndex) {
+                lastFetchedItemRef.current = itemIndex;
+                void refreshEvents();
+            }
+            return originalRender(itemIndex, progress);
+        };
+        return segment;
+    }, [articles, currentLanguage, refreshEvents, config.articlesDurationMs]);
+    const filteredWeatherData = useMemo(() => {
+        if (!config.weatherCities || config.weatherCities.length === 0) {
+            return weatherData;
+        }
+        const allowed = new Set(config.weatherCities.map(normalizeCityKey));
+        return weatherData
+            .map((region) => ({
+            ...region,
+            cities: region.cities.filter((city) => allowed.has(normalizeCityKey(city.name)))
+        }))
+            .filter((region) => region.cities.length > 0);
+    }, [config.weatherCities, weatherData]);
+    const weatherSegment = useMemo(() => {
+        const segment = createWeatherSegment(filteredWeatherData, setWeatherData, currentLanguage);
+        segment.durationMsPerItem = config.weatherDurationMs;
+        return segment;
+    }, [filteredWeatherData, setWeatherData, currentLanguage, config.weatherDurationMs]);
+    const earthquakeSegment = useMemo(() => {
+        const segment = createEarthquakeSegment(earthquakes, setEarthquakes, currentLanguage);
+        segment.durationMsPerItem = config.earthquakesDurationMs;
+        return segment;
+    }, [earthquakes, setEarthquakes, currentLanguage, config.earthquakesDurationMs]);
+    const marketsSegment = useMemo(() => {
+        const segment = createMarketsSegment(markets, setMarkets, currentLanguage);
+        segment.durationMsPerItem = config.marketsDurationMs;
+        return segment;
+    }, [markets, setMarkets, currentLanguage, config.marketsDurationMs]);
+    const segments = useMemo(() => {
+        const nextSegments = [];
+        if (config.showArticles)
+            nextSegments.push(articlesSegment);
+        if (config.showWeather)
+            nextSegments.push(weatherSegment);
+        if (config.showEarthquakes)
+            nextSegments.push(earthquakeSegment);
+        if (config.showMarkets)
+            nextSegments.push(marketsSegment);
+        return nextSegments;
+    }, [articlesSegment, weatherSegment, earthquakeSegment, marketsSegment, config.showArticles, config.showWeather, config.showEarthquakes, config.showMarkets]);
+    const { state: playlistState, currentSegment, pause, resume, reset } = usePlaylistEngine({
+        segments,
+        defaultDurationMs: config.playlistDefaultDurationMs,
+        updateIntervalMs: config.playlistUpdateIntervalMs,
+        onPlaylistLoop: handlePlaylistLoop
+    });
+    useEffect(() => {
+        if (!audioRef.current || audioInitialized.current) {
+            return;
+        }
+        audioRef.current.load();
+        audioInitialized.current = true;
+    }, []);
+    useEffect(() => {
+        if (!config.audioCueEnabled) {
+            return;
+        }
+        const interval = window.setInterval(() => {
+            const now = new Date();
+            if (now.getMinutes() === config.audioCueMinute && now.getSeconds() === config.audioCueSecond && audioRef.current) {
+                audioRef.current.currentTime = 0;
+                void audioRef.current.play().catch((error) => {
+                    console.log('Audio playback prevented:', error);
+                });
+            }
+        }, 1000);
+        return () => window.clearInterval(interval);
+    }, [config.audioCueEnabled, config.audioCueMinute, config.audioCueSecond]);
+    useEffect(() => {
+        const checkTime = () => {
+            const now = new Date();
+            const minutes = now.getMinutes();
+            const seconds = now.getSeconds();
+            const nycTime = new Date(now.toLocaleString('en-US', { timeZone: 'America/New_York' }));
+            const launchDateNyc = new Date(normalizeLaunchDate(config.callsignPrelaunchUntilNyc).toLocaleString('en-US', { timeZone: 'America/New_York' }));
+            const isBeforeLaunch = nycTime < launchDateNyc;
+            const withinScheduleWindow = (minutes === 59 && seconds >= config.callsignWindowStartSecond) || (minutes === 0 && seconds <= config.callsignWindowEndSecond);
+            const shouldShow = config.showCallsignTake && (isBeforeLaunch || withinScheduleWindow);
+            if (shouldShow && !showLogoSlide) {
+                reset();
+            }
+            setShowLogoSlide(shouldShow);
+            if (shouldShow) {
+                setCallsignTime(now);
+            }
+        };
+        checkTime();
+        const timer = window.setInterval(checkTime, 1000);
+        return () => window.clearInterval(timer);
+    }, [reset, config.showCallsignTake, config.callsignPrelaunchUntilNyc, config.callsignWindowStartSecond, config.callsignWindowEndSecond, showLogoSlide]);
+    useEffect(() => {
+        if (showLogoSlide) {
+            pause();
+        }
+        else if (playlistState.isPaused) {
+            resume();
+        }
+    }, [pause, resume, showLogoSlide, playlistState.isPaused]);
+    const marqueeEnabled = layerAvailability.marquee && config.showMarquee;
+    const isMarqueeVisible = useMemo(() => {
+        if (!marqueeEnabled || showLogoSlide || segments.length === 0) {
+            return false;
+        }
+        return true;
+    }, [marqueeEnabled, showLogoSlide, segments.length]);
+    const stageContainerStyle = embedded
+        ? { width: '100%', height: '100%' }
+        : { width: '1920px', height: '1080px', transform: 'scale(min(1, min(100vw / 1920, 100vh / 1080)))', transformOrigin: 'center center' };
+    const stageContainerClass = embedded
+        ? 'relative bg-black text-white overflow-hidden w-full h-full'
+        : 'relative bg-black text-white overflow-hidden shadow-2xl';
+    const loadingStage = (_jsx("div", { className: stageContainerClass, style: stageContainerStyle, children: layerAvailability.content ? _jsx(CallsignSlide, { currentTime: callsignTime, audioRef: audioRef }) : _jsx("div", { className: 'absolute inset-0 bg-black' }) }));
+    if (!dataLoaded) {
+        return embedded ? (_jsx("div", { className: 'w-full h-full bg-black overflow-hidden', children: loadingStage })) : (_jsx("div", { className: 'min-h-screen bg-black flex items-center justify-center overflow-hidden', children: loadingStage }));
+    }
+    const liveStage = (_jsxs("div", { className: stageContainerClass, style: stageContainerStyle, children: [layerAvailability.content ? (showLogoSlide ? (_jsx(CallsignSlide, { currentTime: callsignTime, audioRef: audioRef })) : currentSegment ? (currentSegment.render(playlistState.currentItemIndex, playlistState.progress)) : (_jsx("div", { className: 'absolute inset-0 bg-black' }))) : (_jsx("div", { className: 'absolute inset-0 bg-black' })), isMarqueeVisible && (_jsx("div", { className: 'absolute bottom-0 left-0 right-0 z-100 transition-transform duration-1000 ease-in-out translate-y-0', children: !showLogoSlide &&
+                    (showCurtain ? (_jsx(MarqueeCurtain, { onComplete: handleCurtainComplete })) : (_jsx(Marquee, { events: programEvents, onCycleComplete: handleMarqueeCycleComplete, minPostsCount: config.marqueeMinPostsCount, minAverageRelevance: config.marqueeMinAverageRelevance, minMedianRelevance: config.marqueeMinMedianRelevance, pixelsPerSecond: config.marqueePixelsPerSecond, minDurationSeconds: config.marqueeMinDurationSeconds, heightPx: config.marqueeHeightPx }))) }))] }));
+    return (_jsxs("div", { className: embedded ? 'w-full h-full bg-black overflow-hidden' : 'min-h-screen bg-black flex items-center justify-center overflow-hidden', children: [liveStage, _jsx("audio", { ref: audioRef, preload: 'auto', children: _jsx("source", { src: FIFTHBELL_ASSETS.audio.pipes, type: 'audio/ogg' }) }), _jsx("style", { children: slideStyles })] }));
+}