@fifthbell/brokaw 0.1.39

package/dist/components/live-program/segments/ArticlesSegment.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ArticleSlide } from '../components/slides/ArticleSlide.js';
+import { t } from '../i18n.js';
+const MOCK_ARTICLES = [
+    {
+        id: '1',
+        headline: 'Global Climate Summit Reaches Historic Agreement',
+        summary: 'World leaders have agreed to ambitious new targets for reducing carbon emissions, marking a significant step forward in the fight against climate change.',
+        imageUrl: 'https://picsum.photos/seed/news1/1920/1080',
+        category: 'Environment',
+        url: 'https://fifthbell.com/climate-summit-agreement'
+    },
+    {
+        id: '2',
+        headline: 'Breakthrough in Quantum Computing Announced',
+        summary: 'Researchers have achieved a major milestone in quantum computing, potentially revolutionizing data processing and encryption technologies.',
+        imageUrl: 'https://picsum.photos/seed/news2/1920/1080',
+        category: 'Technology',
+        url: 'https://fifthbell.com/quantum-computing-breakthrough'
+    },
+    {
+        id: '3',
+        headline: 'New Archaeological Discovery Rewrites Ancient History',
+        summary: 'Archaeologists have unearthed artifacts that challenge our understanding of ancient civilizations and their technological capabilities.',
+        imageUrl: 'https://picsum.photos/seed/news3/1920/1080',
+        category: 'Science',
+        url: 'https://fifthbell.com/archaeological-discovery'
+    },
+    {
+        id: '4',
+        headline: 'International Space Station Mission Extended',
+        summary: 'NASA and international partners announce extension of ISS operations, paving the way for continued scientific research in orbit.',
+        imageUrl: 'https://picsum.photos/seed/news4/1920/1080',
+        category: 'Space',
+        url: 'https://fifthbell.com/iss-mission-extended'
+    },
+    {
+        id: '5',
+        headline: 'Renewable Energy Surpasses Fossil Fuels',
+        summary: 'For the first time in history, renewable energy sources have generated more electricity than traditional fossil fuels globally.',
+        imageUrl: 'https://picsum.photos/seed/news5/1920/1080',
+        category: 'Energy',
+        url: 'https://fifthbell.com/renewable-energy-milestone'
+    }
+];
+function normalizePath(input) {
+    if (!input)
+        return '/';
+    const stripped = input.split('?')[0] || '/';
+    const normalized = `/${stripped.replace(/^\/+/, '')}`.replace(/\/{2,}/g, '/');
+    return normalized !== '/' && normalized.endsWith('/') ? normalized.slice(0, -1) : normalized;
+}
+function asPathString(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    return normalizePath(trimmed);
+}
+function buildArticlePath(article, language) {
+    const explicitUrl = asPathString(article.url);
+    const bareSlug = typeof article.slug === 'string' ? article.slug.trim() : '';
+    const primaryCategorySlug = article.categories?.[0]?.slug?.trim();
+    return (explicitUrl ||
+        (primaryCategorySlug
+            ? language === 'en'
+                ? `/${primaryCategorySlug}/${bareSlug.replace(/^\//, '')}`
+                : `/${language}/${primaryCategorySlug}/${bareSlug.replace(/^\//, '')}`
+            : normalizePath(bareSlug || article.canonicalUrl || '/')));
+}
+export async function fetchArticles(language = 'en') {
+    try {
+        const response = await fetch(`https://cdn.fifthbell.com/content/homepage-current-${language}.json?_=${Date.now()}`, {
+            cache: 'no-store'
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to fetch homepage feed: ${response.status} ${response.statusText}`);
+        }
+        const data = await response.json();
+        const now = new Date();
+        const recentThreshold = new Date(now.getTime() - 12 * 60 * 60 * 1000);
+        const feedArticles = Array.isArray(data.articles) ? data.articles : [];
+        const articlesWithImages = feedArticles.filter((article) => article.featuredImage?.url);
+        const sortByPublishedDesc = (a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime();
+        const featuredRecentArticles = articlesWithImages
+            .filter((article) => article.featured === true && new Date(article.publishedAt) >= recentThreshold)
+            .sort(sortByPublishedDesc);
+        const everythingElseArticles = articlesWithImages
+            .filter((article) => !(article.featured === true && new Date(article.publishedAt) >= recentThreshold))
+            .sort(sortByPublishedDesc);
+        const selectedArticles = [...featuredRecentArticles, ...everythingElseArticles].slice(0, 10);
+        const items = selectedArticles.map((article) => ({
+            id: article.id.toString(),
+            headline: article.title,
+            summary: article.excerpt,
+            imageUrl: article.featuredImage.url,
+            category: article.categories?.[0]?.name,
+            url: `https://fifthbell.com${buildArticlePath(article, language)}`
+        }));
+        const finalItems = items.length > 0 ? items : MOCK_ARTICLES;
+        finalItems.forEach((item) => {
+            const image = new Image();
+            image.crossOrigin = 'anonymous';
+            image.src = item.imageUrl;
+        });
+        return finalItems;
+    }
+    catch (error) {
+        console.error('Error fetching news items:', error);
+        return MOCK_ARTICLES;
+    }
+}
+function ArticlesSegmentRenderer({ items, itemIndex, progress, language }) {
+    const [displayedIndex, setDisplayedIndex] = useState(itemIndex);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const previousIndexRef = useRef(itemIndex);
+    useEffect(() => {
+        if (itemIndex !== previousIndexRef.current && items.length > 0) {
+            setIsTransitioning(true);
+            const timer = window.setTimeout(() => {
+                setDisplayedIndex(itemIndex);
+                setIsTransitioning(false);
+                previousIndexRef.current = itemIndex;
+            }, 800);
+            return () => window.clearTimeout(timer);
+        }
+        return undefined;
+    }, [itemIndex, items.length]);
+    if (items.length === 0) {
+        return _jsx("div", { className: 'text-white', children: t('articles.noArticles', language) });
+    }
+    const currentItem = items[itemIndex % items.length];
+    const previousItem = items[displayedIndex % items.length];
+    return (_jsxs("div", { className: 'relative w-full h-full', children: [isTransitioning && previousItem && (_jsx("div", { className: 'absolute inset-0', children: _jsx(ArticleSlide, { newsItem: previousItem, progress: 100 }) })), _jsx("div", { className: `absolute inset-0 ${isTransitioning ? 'animate-slide-transition' : ''}`, children: _jsx(ArticleSlide, { newsItem: currentItem, progress: progress }) })] }));
+}
+export function createArticlesSegment(articles, onDataUpdate, language = 'en') {
+    return {
+        id: 'articles',
+        label: t('segment.articles', language),
+        get itemCount() {
+            return articles.length > 0 ? articles.length : MOCK_ARTICLES.length;
+        },
+        durationMsPerItem: 10000,
+        render: (itemIndex, progress) => {
+            const items = articles.length > 0 ? articles : MOCK_ARTICLES;
+            return _jsx(ArticlesSegmentRenderer, { items: items, itemIndex: itemIndex, progress: progress, language: language }, `article-${itemIndex}`);
+        },
+        prefetch: async () => {
+            if (!onDataUpdate) {
+                return;
+            }
+            const freshArticles = await fetchArticles(language);
+            onDataUpdate(freshArticles);
+        }
+    };
+}

package/dist/components/live-program/segments/EarthquakeSegment.d.ts

@@ -0,0 +1,16 @@
+import type { Segment } from './types.js';
+import { type SupportedLanguage } from '../i18n.js';
+export interface EarthquakeData {
+    id: number;
+    magnitude: number;
+    location: string;
+    depth: number;
+    time: string;
+    timestamp: number;
+    lat: number;
+    lng: number;
+    sources: string[];
+    detailedPlace?: string;
+}
+export declare function fetchEarthquakes(language?: SupportedLanguage): Promise<EarthquakeData[]>;
+export declare function createEarthquakeSegment(earthquakes: EarthquakeData[], onDataUpdate?: (data: EarthquakeData[]) => void, language?: SupportedLanguage): Segment;

package/dist/components/live-program/segments/EarthquakeSegment.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AlertTriangle, Clock, Layers, Link, MapPin } from 'lucide-react';
+import { FastAverageColor } from 'fast-average-color';
+import { FIFTHBELL_ASSETS } from '../assets.js';
+import { t } from '../i18n.js';
+function formatTimeAgo(timestamp, language = 'en') {
+    const now = Date.now();
+    const diffMs = now - timestamp;
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays > 0) {
+        return diffDays === 1 ? t('earthquakes.timeAgo.dayAgo', language) : t('earthquakes.timeAgo.daysAgo', language, { count: diffDays });
+    }
+    if (diffHours > 0) {
+        return diffHours === 1 ? t('earthquakes.timeAgo.hourAgo', language) : t('earthquakes.timeAgo.hoursAgo', language, { count: diffHours });
+    }
+    const diffMinutes = Math.floor(diffMs / (1000 * 60));
+    if (diffMinutes > 0) {
+        return diffMinutes === 1 ? t('earthquakes.timeAgo.minuteAgo', language) : t('earthquakes.timeAgo.minutesAgo', language, { count: diffMinutes });
+    }
+    return t('earthquakes.timeAgo.justNow', language);
+}
+export async function fetchEarthquakes(language = 'en') {
+    try {
+        const response = await fetch(`https://api.monitor.gaulatti.com/earthquakes?_=${Date.now()}`);
+        if (!response.ok) {
+            return [];
+        }
+        const data = await response.json();
+        const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000;
+        const recentQuakes = data
+            .filter((quake) => quake.magnitude >= 4.5 && new Date(quake.timestamp).getTime() >= oneDayAgo)
+            .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+            .slice(0, 6);
+        return recentQuakes.map((quake) => {
+            const timestamp = new Date(quake.timestamp).getTime();
+            let detailedPlace = '';
+            const sources = [];
+            quake.datapoints.forEach((datapoint) => {
+                sources.push(datapoint.source);
+                if (datapoint.additionalData?.place && !detailedPlace) {
+                    detailedPlace = datapoint.additionalData.place;
+                }
+                else if (datapoint.additionalData?.localPlace && !detailedPlace) {
+                    detailedPlace = datapoint.additionalData.localPlace;
+                }
+            });
+            return {
+                id: quake.id,
+                magnitude: Math.round(quake.magnitude * 10) / 10,
+                location: detailedPlace || `${quake.latitude.toFixed(2)}°, ${quake.longitude.toFixed(2)}°`,
+                depth: Math.round(quake.depth),
+                time: formatTimeAgo(timestamp, language),
+                timestamp,
+                lat: quake.latitude,
+                lng: quake.longitude,
+                sources: [...new Set(sources)],
+                detailedPlace
+            };
+        });
+    }
+    catch (error) {
+        console.error('Failed to fetch earthquake data:', error);
+        return [];
+    }
+}
+function getMagnitudeColor(magnitude) {
+    if (magnitude >= 7.0)
+        return '#dc2626';
+    if (magnitude >= 5.0)
+        return '#eab308';
+    return '#22c55e';
+}
+const fac = new FastAverageColor();
+function EarthquakeSlide({ earthquakes, progress, language }) {
+    const [dominantColor, setDominantColor] = useState('#7c2d12');
+    const backgroundImage = FIFTHBELL_ASSETS.images.seismograph;
+    const handleImageLoad = (event) => {
+        try {
+            const color = fac.getColor(event.currentTarget);
+            setDominantColor(color.hex);
+        }
+        catch (error) {
+            console.error('Error getting average color', error);
+            setDominantColor('#7c2d12');
+        }
+    };
+    if (earthquakes.length === 0) {
+        return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0 opacity-75', style: { background: 'linear-gradient(to bottom right, #7c2d12, #000000)' } }), _jsx("div", { className: 'relative z-10 h-full flex items-center justify-center', children: _jsx("div", { className: 'text-4xl font-light', children: t('earthquakes.noData', language) }) })] }));
+    }
+    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24 py-24', children: [_jsxs("div", { className: 'mb-8 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-8' }), _jsxs("div", { className: 'flex items-center space-x-4 mb-4', children: [_jsx(AlertTriangle, { size: 56, className: 'text-orange-500', strokeWidth: 2 }), _jsx("h1", { className: "text-5xl font-bold tracking-tight leading-tight font-['Encode_Sans']", children: t('earthquakes.header', language) })] }), _jsx("h2", { className: 'text-2xl font-light opacity-90 leading-relaxed', children: t('earthquakes.subtitle', language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-6 animate-slide-up', children: earthquakes.map((quake, index) => {
+                            const baseColor = getMagnitudeColor(quake.magnitude);
+                            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(baseColor);
+                            const rgb = result
+                                ? { r: Number.parseInt(result[1], 16), g: Number.parseInt(result[2], 16), b: Number.parseInt(result[3], 16) }
+                                : { r: 239, g: 68, b: 68 };
+                            let magnitudeIntensity;
+                            if (quake.magnitude < 5.0) {
+                                magnitudeIntensity = (quake.magnitude - 4.5) / 0.5;
+                            }
+                            else if (quake.magnitude < 7.0) {
+                                magnitudeIntensity = (quake.magnitude - 5.0) / 2.0;
+                            }
+                            else {
+                                magnitudeIntensity = Math.min((quake.magnitude - 7.0) / 1.0, 1);
+                            }
+                            const opacity = 0.15 + magnitudeIntensity * 0.35;
+                            const backgroundColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+                            return (_jsxs("div", { className: 'grid grid-cols-[auto_1fr] gap-x-12 items-center p-6 backdrop-blur-sm rounded-lg border border-white/5', style: { animationDelay: `${index * 0.05}s`, backgroundColor }, children: [_jsx("div", { className: 'flex flex-col items-center', style: { width: '100px' }, children: _jsxs("div", { className: 'text-5xl font-bold leading-none', children: ["M", quake.magnitude.toFixed(1)] }) }), _jsxs("div", { className: 'flex flex-col justify-center min-w-0', children: [_jsx("h3", { className: "text-3xl font-bold mb-2 line-clamp-2 leading-tight font-['Encode_Sans']", title: quake.location, children: quake.location }), _jsxs("div", { className: 'grid grid-cols-2 gap-x-4 gap-y-1.5 text-xl', children: [_jsxs("div", { className: 'flex items-center space-x-2', children: [_jsx(Clock, { size: 16, className: 'opacity-70 shrink-0' }), _jsx("span", { className: 'truncate', children: quake.time })] }), _jsxs("div", { className: 'flex items-center space-x-2', children: [_jsx(Layers, { size: 16, className: 'opacity-70 shrink-0' }), _jsxs("span", { className: 'truncate', children: [quake.depth, " ", t('earthquakes.depth', language)] })] }), _jsxs("div", { className: 'flex items-center space-x-2 opacity-80', children: [_jsx(MapPin, { size: 16, className: 'opacity-70 shrink-0' }), _jsxs("span", { className: 'truncate', children: [quake.lat.toFixed(2), "\u00B0, ", quake.lng.toFixed(2), "\u00B0"] })] }), quake.sources.length > 0 && (_jsxs("div", { className: 'flex items-center space-x-2 opacity-80', children: [_jsx(Link, { size: 16, className: 'opacity-70 shrink-0' }), _jsx("span", { className: 'truncate', children: quake.sources.join(', ') })] }))] })] })] }, quake.id));
+                        }) }), _jsx("div", { className: 'absolute bottom-24 left-24 right-24 h-1 bg-white/30', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) })] })] }));
+}
+function EarthquakeLoadingSlide({ language }) {
+    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0 opacity-75', style: { background: 'linear-gradient(to bottom right, #7c2d12, #000000)' } }), _jsx("div", { className: 'relative z-10 h-full flex items-center justify-center', children: _jsx("div", { className: 'text-4xl font-light animate-pulse', children: t('earthquakes.loading', language) }) })] }));
+}
+export function createEarthquakeSegment(earthquakes, onDataUpdate, language = 'en') {
+    return {
+        id: 'earthquakes',
+        label: t('segment.earthquakes', language),
+        itemCount: 1,
+        durationMsPerItem: 10000,
+        render: (itemIndex, progress) => earthquakes.length === 0 ? (_jsx(EarthquakeLoadingSlide, { language: language }, 'earthquake-loading')) : (_jsx(EarthquakeSlide, { earthquakes: earthquakes, progress: progress, language: language }, `earthquake-${itemIndex}`)),
+        prefetch: async () => {
+            if (!onDataUpdate) {
+                return;
+            }
+            onDataUpdate(await fetchEarthquakes(language));
+        }
+    };
+}

package/dist/components/live-program/segments/MarketsSegment.d.ts

@@ -0,0 +1,12 @@
+import type { Segment } from './types.js';
+import { type SupportedLanguage } from '../i18n.js';
+export interface MarketData {
+    symbol: string;
+    name: string;
+    price: number;
+    change: number;
+    changePercent: number;
+}
+export declare function fetchMarketData(): Promise<MarketData[]>;
+export declare function getLastUpdateTime(): string;
+export declare function createMarketsSegment(marketData: MarketData[], onDataUpdate?: (data: MarketData[]) => void, language?: SupportedLanguage): Segment;

package/dist/components/live-program/segments/MarketsSegment.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import { FastAverageColor } from 'fast-average-color';
+import { FIFTHBELL_ASSETS } from '../assets.js';
+import { t } from '../i18n.js';
+let marketCache = null;
+const CACHE_DURATION_MS = 15 * 60 * 1000;
+export async function fetchMarketData() {
+    const now = Date.now();
+    if (marketCache && now - marketCache.timestamp < CACHE_DURATION_MS) {
+        return marketCache.data;
+    }
+    try {
+        const response = await fetch(`https://financialmodelingprep.com/stable/most-actives?apikey=a8mpam9ffQSf9ROfBBKovbPHRw25qtNH&_=${Date.now()}`);
+        if (!response.ok) {
+            return marketCache?.data || [];
+        }
+        const data = await response.json();
+        const marketData = data
+            .filter((stock) => stock.price > 1 && Math.abs(stock.changesPercentage) < 200)
+            .sort((a, b) => Math.abs(b.changesPercentage) - Math.abs(a.changesPercentage))
+            .slice(0, 6)
+            .map((stock) => ({
+            symbol: stock.symbol,
+            name: stock.name,
+            price: stock.price,
+            change: stock.change,
+            changePercent: stock.changesPercentage
+        }));
+        marketCache = {
+            data: marketData,
+            timestamp: now,
+            updateTime: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
+        };
+        return marketData;
+    }
+    catch (error) {
+        console.error('[MarketsSegment] Failed to fetch market data:', error);
+        return marketCache?.data || [];
+    }
+}
+export function getLastUpdateTime() {
+    return marketCache?.updateTime || '--:--';
+}
+const fac = new FastAverageColor();
+function MarketSlide({ progress, marketData, language }) {
+    const [dominantColor, setDominantColor] = useState('#065f46');
+    const backgroundImage = FIFTHBELL_ASSETS.images.nyse;
+    const handleImageLoad = (event) => {
+        try {
+            const color = fac.getColor(event.currentTarget);
+            setDominantColor(color.hex);
+        }
+        catch (error) {
+            console.error('Error getting average color', error);
+            setDominantColor('#065f46');
+        }
+    };
+    if (marketData.length === 0) {
+        return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0 opacity-75', style: { background: 'linear-gradient(to bottom right, #065f46, #000000)' } }), _jsx("div", { className: 'relative z-10 h-full flex items-center justify-center', children: _jsx("div", { className: 'text-4xl font-light animate-pulse', children: t('markets.loading', language) }) })] }));
+    }
+    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24', children: [_jsxs("div", { className: 'mb-12 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-12' }), _jsx("h1", { className: "text-5xl font-bold tracking-tight mb-8 leading-tight font-['Encode_Sans']", children: t('markets.header', language) }), _jsx("h2", { className: 'text-3xl font-light opacity-90 leading-relaxed', children: t('markets.subtitle', language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-4 animate-slide-up', children: marketData.map((stock, index) => {
+                            const isPositive = stock.change >= 0;
+                            const changeColor = isPositive ? 'text-green-400' : 'text-red-400';
+                            const Icon = isPositive ? TrendingUp : TrendingDown;
+                            const logIntensity = Math.log10(1 + Math.abs(stock.changePercent)) / Math.log10(1 + 100);
+                            const opacity = 0.15 + Math.min(logIntensity, 1) * 0.35;
+                            const backgroundColor = isPositive ? `rgba(34, 197, 94, ${opacity})` : `rgba(239, 68, 68, ${opacity})`;
+                            return (_jsxs("div", { className: 'grid grid-cols-2 gap-x-12 items-center p-6 backdrop-blur-sm rounded-lg border border-white/5', style: { animationDelay: `${index * 0.05}s`, backgroundColor }, children: [_jsxs("div", { className: 'flex flex-col', children: [_jsx("span", { className: "text-4xl font-bold mb-1 font-['Encode_Sans']", children: stock.symbol }), _jsx("span", { className: 'text-2xl opacity-70', children: stock.name })] }), _jsxs("div", { className: 'flex flex-col items-end', children: [_jsxs("div", { className: "text-5xl font-bold mb-1 font-['Encode_Sans']", children: ["$", stock.price.toFixed(2)] }), _jsxs("div", { className: `flex items-center space-x-2 ${changeColor}`, children: [_jsx(Icon, { size: 24, strokeWidth: 2 }), _jsxs("span", { className: 'text-3xl font-bold', children: [isPositive ? '+' : '', stock.change.toFixed(2)] }), _jsxs("span", { className: 'text-2xl opacity-80', children: ["(", isPositive ? '+' : '', stock.changePercent.toFixed(2), "%)"] })] })] })] }, stock.symbol));
+                        }) }), _jsx("div", { className: 'mt-6 mb-24 text-xl opacity-60 animate-fade-in-delay', children: _jsx("p", { children: t('markets.lastUpdate', language, { time: getLastUpdateTime() }) }) }), _jsx("div", { className: 'absolute bottom-24 left-24 right-24 h-1 bg-white/30', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) })] })] }));
+}
+export function createMarketsSegment(marketData, onDataUpdate, language = 'en') {
+    return {
+        id: 'markets',
+        label: t('segment.markets', language),
+        itemCount: 1,
+        durationMsPerItem: 10000,
+        render: (itemIndex, progress) => (_jsx(MarketSlide, { progress: progress, marketData: marketData, language: language }, `market-${itemIndex}`)),
+        prefetch: async () => {
+            if (!onDataUpdate) {
+                return;
+            }
+            onDataUpdate(await fetchMarketData());
+        }
+    };
+}

package/dist/components/live-program/segments/WeatherSegment.d.ts

@@ -0,0 +1,15 @@
+import type { Segment } from './types.js';
+import { type SupportedLanguage } from '../i18n.js';
+export interface WeatherCityData {
+    name: string;
+    temp: number;
+    condition: 'sunny' | 'cloudy' | 'rainy' | 'windy';
+    high: number;
+    low: number;
+}
+export interface WeatherRegionData {
+    region: string;
+    cities: WeatherCityData[];
+}
+export declare function fetchWeatherData(): Promise<WeatherRegionData[]>;
+export declare function createWeatherSegment(weatherData: WeatherRegionData[], onDataUpdate?: (data: WeatherRegionData[]) => void, language?: SupportedLanguage): Segment;

package/dist/components/live-program/segments/WeatherSegment.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Cloud, CloudRain, Sun, Wind } from 'lucide-react';
+import { FastAverageColor } from 'fast-average-color';
+import { FIFTHBELL_ASSETS } from '../assets.js';
+import { t } from '../i18n.js';
+const CITY_LOCATIONS = {
+    'New York': { lat: 40.7128, lon: -74.006 },
+    'San Juan': { lat: 18.4655, lon: -66.1057 },
+    'Los Angeles': { lat: 34.0522, lon: -118.2437 },
+    Honolulu: { lat: 21.3099, lon: -157.8581 },
+    'Mexico City': { lat: 19.4326, lon: -99.1332 },
+    Havana: { lat: 23.1136, lon: -82.3666 },
+    London: { lat: 51.5074, lon: -0.1278 },
+    Paris: { lat: 48.8566, lon: 2.3522 },
+    Berlin: { lat: 52.52, lon: 13.405 },
+    Rome: { lat: 41.9028, lon: 12.4964 },
+    Madrid: { lat: 40.4168, lon: -3.7038 },
+    Athens: { lat: 37.9838, lon: 23.7275 },
+    Santiago: { lat: -33.4489, lon: -70.6693 },
+    'Buenos Aires': { lat: -34.6037, lon: -58.3816 },
+    Rio: { lat: -22.9068, lon: -43.1729 },
+    Lima: { lat: -12.0464, lon: -77.0428 },
+    Caracas: { lat: 10.4806, lon: -66.9036 },
+    Bogotá: { lat: 4.711, lon: -74.0721 },
+    Tokyo: { lat: 35.6762, lon: 139.6503 },
+    Seoul: { lat: 37.5665, lon: 126.978 },
+    Shanghai: { lat: 31.2304, lon: 121.4737 },
+    'Hong Kong': { lat: 22.3193, lon: 114.1694 },
+    Bangkok: { lat: 13.7563, lon: 100.5018 },
+    Jakarta: { lat: -6.2088, lon: 106.8456 }
+};
+const REGIONS = [
+    { region: 'North America', cities: ['New York', 'San Juan', 'Los Angeles', 'Honolulu', 'Mexico City', 'Havana'] },
+    { region: 'Europe', cities: ['Rome', 'Berlin', 'Paris', 'Madrid', 'London', 'Athens'] },
+    { region: 'South America', cities: ['Santiago', 'Buenos Aires', 'Rio', 'Lima', 'Caracas', 'Bogotá'] },
+    { region: 'Asia', cities: ['Tokyo', 'Seoul', 'Shanghai', 'Hong Kong', 'Bangkok', 'Jakarta'] }
+];
+function getWeatherCondition(weatherCode) {
+    if (weatherCode === 0 || weatherCode === 1)
+        return 'sunny';
+    if (weatherCode === 2 || weatherCode === 3)
+        return 'cloudy';
+    if (weatherCode >= 51 && weatherCode <= 67)
+        return 'rainy';
+    if (weatherCode >= 71 && weatherCode <= 86)
+        return 'rainy';
+    if (weatherCode >= 95)
+        return 'rainy';
+    return 'cloudy';
+}
+async function fetchCityWeather(cityName) {
+    const location = CITY_LOCATIONS[cityName];
+    if (!location)
+        return null;
+    try {
+        const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${location.lat}&longitude=${location.lon}&current=temperature_2m,weather_code&daily=temperature_2m_max,temperature_2m_min&temperature_unit=fahrenheit&timezone=auto`);
+        if (!response.ok) {
+            return null;
+        }
+        const data = await response.json();
+        return {
+            name: cityName,
+            temp: Math.round(data.current.temperature_2m),
+            condition: getWeatherCondition(data.current.weather_code),
+            high: Math.round(data.daily.temperature_2m_max[0]),
+            low: Math.round(data.daily.temperature_2m_min[0])
+        };
+    }
+    catch (error) {
+        console.error(`Failed to fetch weather for ${cityName}:`, error);
+        return null;
+    }
+}
+let weatherCache = null;
+const CACHE_DURATION_MS = 60 * 60 * 1000;
+export async function fetchWeatherData() {
+    const now = Date.now();
+    if (weatherCache && now - weatherCache.timestamp < CACHE_DURATION_MS) {
+        return weatherCache.data;
+    }
+    const results = [];
+    for (const regionDef of REGIONS) {
+        const cityResults = await Promise.all(regionDef.cities.map((city) => fetchCityWeather(city)));
+        const cities = cityResults.filter((city) => city !== null);
+        if (cities.length > 0) {
+            results.push({ region: regionDef.region, cities });
+        }
+    }
+    weatherCache = { data: results, timestamp: now };
+    return results;
+}
+function getWeatherIcon(condition, size = 48) {
+    const iconProps = { size, strokeWidth: 2 };
+    switch (condition) {
+        case 'sunny':
+            return _jsx(Sun, { ...iconProps, className: 'text-yellow-400' });
+        case 'rainy':
+            return _jsx(CloudRain, { ...iconProps, className: 'text-blue-400' });
+        case 'windy':
+            return _jsx(Wind, { ...iconProps, className: 'text-gray-400' });
+        default:
+            return _jsx(Cloud, { ...iconProps, className: 'text-gray-300' });
+    }
+}
+function fahrenheitToCelsius(value) {
+    return Math.round(((value - 32) * 5) / 9);
+}
+function getRegionBackground(region) {
+    switch (region) {
+        case 'North America':
+            return FIFTHBELL_ASSETS.images.nyc;
+        case 'Europe':
+            return FIFTHBELL_ASSETS.images.berlin;
+        case 'South America':
+            return FIFTHBELL_ASSETS.images.santiago;
+        case 'Asia':
+            return FIFTHBELL_ASSETS.images.tokyo;
+        default:
+            return '';
+    }
+}
+const fac = new FastAverageColor();
+function WeatherSlide({ weatherData, progress, unit, language }) {
+    const [dominantColor, setDominantColor] = useState('#1e40af');
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [displayUnit, setDisplayUnit] = useState(unit);
+    const backgroundImage = getRegionBackground(weatherData.region);
+    const unitLabel = displayUnit === 'fahrenheit' ? '°F' : '°C';
+    useEffect(() => {
+        if (unit !== displayUnit) {
+            setIsTransitioning(true);
+            const timer = window.setTimeout(() => {
+                setDisplayUnit(unit);
+                setIsTransitioning(false);
+            }, 300);
+            return () => window.clearTimeout(timer);
+        }
+        return undefined;
+    }, [unit, displayUnit]);
+    const handleImageLoad = (event) => {
+        try {
+            const color = fac.getColor(event.currentTarget);
+            setDominantColor(color.hex);
+        }
+        catch (error) {
+            console.error('Error getting average color', error);
+            setDominantColor('#1e40af');
+        }
+    };
+    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [backgroundImage && (_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) })), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24', children: [_jsxs("div", { className: 'mb-12 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-12' }), _jsx("h1", { className: "text-5xl font-bold tracking-tight mb-8 leading-tight font-['Encode_Sans']", children: t('weather.header', language) }), _jsx("h2", { className: 'text-3xl font-light opacity-90 leading-relaxed', children: t(`region.${weatherData.region}`, language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-8 animate-slide-up', children: weatherData.cities.map((city, index) => {
+                            const temp = displayUnit === 'celsius' ? fahrenheitToCelsius(city.temp) : city.temp;
+                            const high = displayUnit === 'celsius' ? fahrenheitToCelsius(city.high) : city.high;
+                            const low = displayUnit === 'celsius' ? fahrenheitToCelsius(city.low) : city.low;
+                            return (_jsxs("div", { className: 'flex items-center space-x-6 p-6 bg-white/10 backdrop-blur-sm rounded-lg', style: { animationDelay: `${index * 0.1}s` }, children: [_jsx("div", { className: 'shrink-0', children: getWeatherIcon(city.condition, 48) }), _jsxs("div", { className: 'flex-1', children: [_jsx("h3", { className: "text-3xl font-bold mb-2 font-['Encode_Sans']", children: city.name }), _jsxs("span", { className: "text-5xl font-bold transition-opacity duration-300 font-['Encode_Sans']", style: { opacity: isTransitioning ? 0 : 1 }, children: [temp, unitLabel] })] }), _jsxs("div", { className: 'flex flex-col items-end space-y-1', children: [_jsxs("span", { className: 'text-2xl opacity-70 transition-opacity duration-300', style: { opacity: isTransitioning ? 0 : 0.7 }, children: [t('weather.high', language), " ", high, unitLabel] }), _jsxs("span", { className: 'text-2xl opacity-70 transition-opacity duration-300', style: { opacity: isTransitioning ? 0 : 0.7 }, children: [t('weather.low', language), " ", low, unitLabel] })] })] }, city.name));
+                        }) }), _jsx("div", { className: 'absolute bottom-24 left-24 right-24 h-1 bg-white/30', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) })] })] }));
+}
+function WeatherLoadingSlide({ language }) {
+    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0 opacity-75', style: { background: 'linear-gradient(to bottom right, #1e40af, #000000)' } }), _jsx("div", { className: 'relative z-10 h-full flex items-center justify-center', children: _jsx("div", { className: 'text-4xl font-light animate-pulse', children: t('weather.loading', language) }) })] }));
+}
+export function createWeatherSegment(weatherData, onDataUpdate, language = 'en') {
+    return {
+        id: 'weather',
+        label: t('segment.weather', language),
+        get itemCount() {
+            return weatherData.length > 0 ? weatherData.length * 2 : 8;
+        },
+        durationMsPerItem: 5000,
+        render: (itemIndex, progress) => {
+            if (weatherData.length === 0) {
+                return _jsx(WeatherLoadingSlide, { language: language }, 'weather-loading');
+            }
+            const regionIndex = Math.floor(itemIndex / 2) % weatherData.length;
+            const unit = itemIndex % 2 === 0 ? 'fahrenheit' : 'celsius';
+            return _jsx(WeatherSlide, { weatherData: weatherData[regionIndex], progress: progress, unit: unit, language: language }, `weather-${regionIndex}`);
+        },
+        prefetch: async () => {
+            if (!onDataUpdate) {
+                return;
+            }
+            onDataUpdate(await fetchWeatherData());
+        }
+    };
+}

package/dist/components/live-program/segments/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types.js';
+export * from './usePlaylistEngine.js';
+export { createArticlesSegment, fetchArticles, type NewsItem } from './ArticlesSegment.js';
+export { createWeatherSegment, fetchWeatherData, type WeatherRegionData, type WeatherCityData } from './WeatherSegment.js';
+export { createEarthquakeSegment, fetchEarthquakes, type EarthquakeData } from './EarthquakeSegment.js';
+export * from './MarketsSegment.js';

package/dist/components/live-program/segments/index.js

@@ -0,0 +1,6 @@
+export * from './types.js';
+export * from './usePlaylistEngine.js';
+export { createArticlesSegment, fetchArticles } from './ArticlesSegment.js';
+export { createWeatherSegment, fetchWeatherData } from './WeatherSegment.js';
+export { createEarthquakeSegment, fetchEarthquakes } from './EarthquakeSegment.js';
+export * from './MarketsSegment.js';