@fifthbell/brokaw 0.1.39

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

@@ -0,0 +1,14 @@
+export declare const FIFTHBELL_ASSETS: {
+    readonly audio: {
+        readonly pipes: "/fifthbell/audio/pipes.ogg";
+    };
+    readonly images: {
+        readonly logo: "/fifthbell/images/fifthbell.png";
+        readonly nyc: "/fifthbell/images/nyc.jpg";
+        readonly berlin: "/fifthbell/images/berlin.jpg";
+        readonly santiago: "/fifthbell/images/santiago.jpg";
+        readonly tokyo: "/fifthbell/images/tokyo.jpg";
+        readonly nyse: "/fifthbell/images/nyse.jpg";
+        readonly seismograph: "/fifthbell/images/seismograph.jpg";
+    };
+};

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

@@ -0,0 +1,14 @@
+export const FIFTHBELL_ASSETS = {
+    audio: {
+        pipes: '/fifthbell/audio/pipes.ogg'
+    },
+    images: {
+        logo: '/fifthbell/images/fifthbell.png',
+        nyc: '/fifthbell/images/nyc.jpg',
+        berlin: '/fifthbell/images/berlin.jpg',
+        santiago: '/fifthbell/images/santiago.jpg',
+        tokyo: '/fifthbell/images/tokyo.jpg',
+        nyse: '/fifthbell/images/nyse.jpg',
+        seismograph: '/fifthbell/images/seismograph.jpg'
+    }
+};

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

@@ -0,0 +1,16 @@
+import type { Event } from '../events.js';
+interface MarqueeProps {
+    events: Event[];
+    onCycleComplete?: () => void;
+    minPostsCount?: number;
+    minAverageRelevance?: number;
+    minMedianRelevance?: number;
+    pixelsPerSecond?: number;
+    minDurationSeconds?: number;
+    heightPx?: number;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+export declare function Marquee({ events, onCycleComplete, minPostsCount, minAverageRelevance, minMedianRelevance, pixelsPerSecond, minDurationSeconds, heightPx, backgroundColor, borderColor }: MarqueeProps): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<typeof Marquee>;
+export default _default;

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BellRing } from 'lucide-react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+function calculateMedianRelevance(posts) {
+    if (posts.length === 0)
+        return 0;
+    const scores = posts.map((post) => post.relevance).sort((a, b) => a - b);
+    const mid = Math.floor(scores.length / 2);
+    return scores.length % 2 === 0 ? (scores[mid - 1] + scores[mid]) / 2 : scores[mid];
+}
+function calculateAverageRelevance(posts) {
+    if (posts.length === 0)
+        return 0;
+    const sum = posts.reduce((acc, post) => acc + post.relevance, 0);
+    return sum / posts.length;
+}
+export function Marquee({ events, onCycleComplete, minPostsCount = 4, minAverageRelevance = 5, minMedianRelevance = 7, pixelsPerSecond = 150, minDurationSeconds = 10, heightPx = 72, backgroundColor = 'rgba(0, 0, 0, 0.6)', borderColor = '#b21100' }) {
+    const contentRef = useRef(null);
+    const [animationDuration, setAnimationDuration] = useState('20s');
+    const sortedEvents = useMemo(() => {
+        return events
+            .filter((event) => {
+            const postsCount = typeof event.posts_count === 'number' ? event.posts_count : event.posts.length;
+            const average = calculateAverageRelevance(event.posts);
+            const median = calculateMedianRelevance(event.posts);
+            const postsThreshold = minPostsCount <= 0 || postsCount >= minPostsCount;
+            const averageThreshold = minAverageRelevance <= 0 || average >= minAverageRelevance;
+            const medianThreshold = minMedianRelevance <= 0 || median >= minMedianRelevance;
+            return postsThreshold && averageThreshold && medianThreshold;
+        })
+            .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+    }, [events, minPostsCount, minAverageRelevance, minMedianRelevance]);
+    useEffect(() => {
+        const updateDuration = () => {
+            if (!contentRef.current) {
+                return;
+            }
+            const contentWidth = contentRef.current.scrollWidth;
+            const totalDistance = 1920 + contentWidth;
+            const duration = Math.max(totalDistance / Math.max(1, pixelsPerSecond), minDurationSeconds);
+            setAnimationDuration(`${duration}s`);
+        };
+        const timer = window.setTimeout(updateDuration, 100);
+        window.addEventListener('resize', updateDuration);
+        return () => {
+            window.clearTimeout(timer);
+            window.removeEventListener('resize', updateDuration);
+        };
+    }, [sortedEvents, pixelsPerSecond, minDurationSeconds]);
+    if (sortedEvents.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { style: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: `${heightPx}px`,
+            backgroundColor,
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            borderTop: `2px solid ${borderColor}`,
+            overflow: 'hidden',
+            zIndex: 100
+        }, children: _jsx("div", { ref: contentRef, onAnimationIteration: onCycleComplete, style: {
+                display: 'flex',
+                alignItems: 'center',
+                height: '100%',
+                animation: `marqueeFlow ${animationDuration} linear infinite`,
+                whiteSpace: 'nowrap',
+                width: 'max-content'
+            }, children: sortedEvents.map((event) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("span", { style: {
+                            color: '#ffffff',
+                            fontSize: '2rem',
+                            fontWeight: '600',
+                            fontFamily: 'Encode Sans, sans-serif'
+                        }, children: event.title }), _jsx("div", { style: {
+                            marginLeft: '2rem',
+                            marginRight: '2rem',
+                            display: 'flex',
+                            alignItems: 'center'
+                        }, children: _jsx("div", { style: {
+                                backgroundColor: '#b21100',
+                                padding: '0.5rem',
+                                borderRadius: '0.25rem'
+                            }, children: _jsx(BellRing, { size: 24, strokeWidth: 2, color: '#ffffff' }) }) })] }, event.uuid))) }) }));
+}
+export default memo(Marquee);

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

@@ -0,0 +1,5 @@
+interface MarqueeCurtainProps {
+    onComplete: () => void;
+}
+export declare function MarqueeCurtain({ onComplete }: MarqueeCurtainProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BellRing } from 'lucide-react';
+import { useEffect } from 'react';
+export function MarqueeCurtain({ onComplete }) {
+    useEffect(() => {
+        const timer = window.setTimeout(() => {
+            onComplete();
+        }, 5000);
+        return () => window.clearTimeout(timer);
+    }, [onComplete]);
+    return (_jsxs("div", { style: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '50px',
+            backgroundColor: '#b21100',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '1rem',
+            zIndex: 100,
+            animation: 'fadeIn 0.3s ease-in-out'
+        }, children: [_jsx(BellRing, { size: 24, strokeWidth: 2, color: '#ffffff' }), _jsxs("span", { style: {
+                    color: '#ffffff',
+                    fontSize: '1.5rem',
+                    fontWeight: '600',
+                    fontFamily: 'Libre Franklin, sans-serif'
+                }, children: ["This is fifth", _jsx("span", { style: { fontWeight: '700' }, children: "bell" }), "."] }), _jsx(BellRing, { size: 24, strokeWidth: 2, color: '#ffffff' })] }));
+}

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

@@ -0,0 +1,19 @@
+import { type SupportedLanguage } from '../i18n.js';
+import type { GlobalTimeOverride } from '../utils/broadcastTime.js';
+interface CityTime {
+    city: string;
+    timezone: string;
+}
+export declare const DEFAULT_WORLD_CLOCK_CITIES: CityTime[];
+interface WorldClocksProps {
+    currentTime?: Date;
+    timeOverride?: GlobalTimeOverride | null;
+    language?: SupportedLanguage;
+    cities?: CityTime[];
+    rotateIntervalMs?: number;
+    transitionDurationMs?: number;
+    shuffleCities?: boolean;
+    widthPx?: number;
+}
+export declare function WorldClocks({ currentTime, timeOverride, language, cities, rotateIntervalMs, transitionDurationMs, shuffleCities, widthPx }: WorldClocksProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { t } from '../i18n.js';
+import { getOverrideClockParts } from '../utils/broadcastTime.js';
+export const DEFAULT_WORLD_CLOCK_CITIES = [
+    { city: 'NEW YORK', timezone: 'America/New_York' },
+    { city: 'LONDON', timezone: 'Europe/London' },
+    { city: 'TOKYO', timezone: 'Asia/Tokyo' },
+    { city: 'SYDNEY', timezone: 'Australia/Sydney' },
+    { city: 'ROME', timezone: 'Europe/Rome' },
+    { city: 'MADRID', timezone: 'Europe/Madrid' },
+    { city: 'LIMA', timezone: 'America/Lima' },
+    { city: 'BERLIN', timezone: 'Europe/Berlin' },
+    { city: 'LOS ANGELES', timezone: 'America/Los_Angeles' },
+    { city: 'MEXICO CITY', timezone: 'America/Mexico_City' },
+    { city: 'SANTIAGO', timezone: 'America/Santiago' },
+    { city: 'BUENOS AIRES', timezone: 'America/Argentina/Buenos_Aires' },
+    { city: 'SÃO PAULO', timezone: 'America/Sao_Paulo' },
+    { city: 'HONOLULU', timezone: 'Pacific/Honolulu' },
+    { city: 'BEIJING', timezone: 'Asia/Shanghai' },
+    { city: 'SINGAPORE', timezone: 'Asia/Singapore' },
+    { city: 'DELHI', timezone: 'Asia/Kolkata' },
+    { city: 'LAHORE', timezone: 'Asia/Karachi' },
+    { city: 'MOSCOW', timezone: 'Europe/Moscow' },
+    { city: 'KYIV', timezone: 'Europe/Kiev' },
+    { city: 'CAIRO', timezone: 'Africa/Cairo' },
+    { city: 'LAGOS', timezone: 'Africa/Lagos' },
+    { city: 'CAPE TOWN', timezone: 'Africa/Johannesburg' },
+    { city: 'NAIROBI', timezone: 'Africa/Nairobi' },
+    { city: 'CASABLANCA', timezone: 'Africa/Casablanca' }
+];
+const TRANSLATABLE_CITY_KEYS = new Set(DEFAULT_WORLD_CLOCK_CITIES.map((city) => city.city));
+function shuffleArray(array) {
+    const shuffled = [...array];
+    for (let i = shuffled.length - 1; i > 0; i -= 1) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+}
+export function WorldClocks({ currentTime, timeOverride = null, language = 'en', cities, rotateIntervalMs = 7000, transitionDurationMs = 300, shuffleCities = true, widthPx = 200 }) {
+    const activeCities = cities && cities.length > 0 ? cities : DEFAULT_WORLD_CLOCK_CITIES;
+    const [time, setTime] = useState(currentTime || new Date());
+    const [cityPool, setCityPool] = useState(() => (shuffleCities ? shuffleArray(activeCities) : [...activeCities]));
+    const [currentCityIndex, setCurrentCityIndex] = useState(0);
+    const [isAnimating, setIsAnimating] = useState(false);
+    useEffect(() => {
+        setCityPool(shuffleCities ? shuffleArray(activeCities) : [...activeCities]);
+        setCurrentCityIndex(0);
+    }, [activeCities, shuffleCities]);
+    useEffect(() => {
+        if (currentTime) {
+            setTime(currentTime);
+            return;
+        }
+        const interval = setInterval(() => {
+            setTime(new Date());
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [currentTime]);
+    useEffect(() => {
+        let timeoutId;
+        const interval = setInterval(() => {
+            setIsAnimating(true);
+            timeoutId = window.setTimeout(() => {
+                setCurrentCityIndex((prevIndex) => {
+                    const nextIndex = prevIndex + 1;
+                    if (nextIndex >= cityPool.length) {
+                        setCityPool(shuffleCities ? shuffleArray(activeCities) : [...activeCities]);
+                        return 0;
+                    }
+                    return nextIndex;
+                });
+                setIsAnimating(false);
+            }, Math.max(0, transitionDurationMs));
+        }, Math.max(500, rotateIntervalMs));
+        return () => {
+            clearInterval(interval);
+            if (timeoutId !== undefined) {
+                window.clearTimeout(timeoutId);
+            }
+        };
+    }, [cityPool, rotateIntervalMs, transitionDurationMs, shuffleCities, activeCities]);
+    const currentCity = cityPool[currentCityIndex] ?? activeCities[0];
+    const formatTime = (timezone) => {
+        if (timeOverride) {
+            const parts = getOverrideClockParts(timeOverride, time);
+            if (parts) {
+                return `${String(parts.hours).padStart(2, '0')}:${String(parts.minutes).padStart(2, '0')}`;
+            }
+        }
+        return time.toLocaleTimeString('en-US', {
+            timeZone: timezone,
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+        });
+    };
+    const cityLabel = TRANSLATABLE_CITY_KEYS.has(currentCity.city) ? t(`city.${currentCity.city}`, language) : currentCity.city;
+    return (_jsxs("div", { className: 'flex flex-col gap-1.5 transition-opacity duration-300', style: { opacity: isAnimating ? 0 : 1, width: `${widthPx}px` }, children: [_jsx("div", { className: 'text-white font-bold text-6xl tracking-tight leading-none text-center', style: { fontFamily: 'system-ui, -apple-system, sans-serif' }, children: formatTime(currentCity.timezone) }), _jsx("div", { className: 'text-white/50 text-2xl font-bold tracking-wider leading-none uppercase text-center', style: { fontFamily: 'system-ui, -apple-system, sans-serif' }, children: cityLabel })] }));
+}

package/dist/components/live-program/components/slides/ArticleSlide.d.ts

@@ -0,0 +1,14 @@
+export interface NewsItem {
+    id: string;
+    headline: string;
+    summary: string;
+    imageUrl: string;
+    category?: string;
+    url: string;
+}
+interface ArticleSlideProps {
+    newsItem: NewsItem;
+    progress: number;
+}
+export declare function ArticleSlide({ newsItem, progress }: ArticleSlideProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/live-program/components/slides/ArticleSlide.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { FastAverageColor } from 'fast-average-color';
+const fac = new FastAverageColor();
+function buildQrCodeUrl(value) {
+    return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(value)}`;
+}
+export function ArticleSlide({ newsItem, progress }) {
+    const [dominantColor, setDominantColor] = useState('#b21100');
+    const imageUrl = newsItem.imageUrl || 'https://picsum.photos/seed/fallback/1920/1080';
+    const qrCodeUrl = useMemo(() => buildQrCodeUrl(newsItem.url), [newsItem.url]);
+    const handleImageLoad = (event) => {
+        try {
+            const color = fac.getColor(event.currentTarget);
+            setDominantColor(color.hex);
+        }
+        catch (error) {
+            console.error('Error getting average color', error);
+        }
+    };
+    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: imageUrl, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, imageUrl) }), _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 grid grid-cols-12 h-full', children: [_jsxs("div", { className: 'col-span-5 flex flex-col justify-center px-24 relative', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-12' }), _jsxs("div", { className: 'animate-slide-up', children: [_jsx("h1", { className: "text-5xl font-bold leading-tight mb-8 tracking-tight line-clamp-6 font-['Encode_Sans']", children: newsItem.headline }), _jsx("p", { className: "text-4xl font-light leading-relaxed opacity-90 line-clamp-6 font-['Libre_Franklin']", children: newsItem.summary })] }, newsItem.id), newsItem.category && (_jsx("div", { className: 'absolute bottom-40 left-24 animate-slide-up', children: _jsx("span", { className: 'text-white px-4 py-2 text-2xl font-bold uppercase tracking-wider', style: { backgroundColor: dominantColor }, children: newsItem.category }) }, `${newsItem.id}-cat`))] }), _jsx("div", { className: 'col-span-7 relative h-full flex items-center justify-center p-16 pb-40', children: _jsxs("div", { className: 'relative w-full aspect-video shadow-2xl overflow-hidden border-4 border-white/10', children: [_jsx("div", { className: 'absolute top-0 left-0 h-1 bg-white/30 w-full z-20', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) }), _jsx("img", { src: imageUrl, alt: newsItem.headline, className: 'w-full h-full object-cover', style: { animation: 'kenburns 20s infinite alternate' } }, imageUrl)] }) })] }), _jsx("div", { className: 'absolute bottom-24 left-0 w-full flex justify-between items-end px-24 z-50', children: _jsx("div", { className: 'ml-auto p-2 bg-white/10 backdrop-blur-sm', children: _jsx("img", { src: qrCodeUrl, alt: 'Article QR code', className: 'block w-37.5 h-37.5' }) }) })] }));
+}

package/dist/components/live-program/components/slides/CallsignSlide.d.ts

@@ -0,0 +1,6 @@
+interface CallsignSlideProps {
+    currentTime: Date;
+    audioRef: React.RefObject<HTMLAudioElement | null>;
+}
+export declare function CallsignSlide({ currentTime: initialTime }: CallsignSlideProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/live-program/components/slides/CallsignSlide.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BellRing } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { FastAverageColor } from 'fast-average-color';
+import { FIFTHBELL_ASSETS } from '../../assets.js';
+const fac = new FastAverageColor();
+export function CallsignSlide({ currentTime: initialTime }) {
+    const [displayTime, setDisplayTime] = useState(initialTime);
+    const [dominantColor, setDominantColor] = useState('#b21100');
+    const [fullOpacity, setFullOpacity] = useState(1);
+    const [smallOpacity, setSmallOpacity] = useState(0);
+    const [centerOpacity, setCenterOpacity] = useState(0);
+    const [showTime, setShowTime] = useState(false);
+    const backgroundImage = FIFTHBELL_ASSETS.images.nyc;
+    useEffect(() => {
+        setDisplayTime(initialTime);
+        const timer = window.setInterval(() => {
+            setDisplayTime(new Date());
+        }, 1000);
+        return () => window.clearInterval(timer);
+    }, [initialTime]);
+    useEffect(() => {
+        const timer = window.setTimeout(() => {
+            setFullOpacity(0);
+            setSmallOpacity(1);
+            setCenterOpacity(1);
+            window.setTimeout(() => setShowTime(true), 500);
+        }, 2000);
+        return () => window.clearTimeout(timer);
+    }, []);
+    const formatNyTime = (date) => date.toLocaleTimeString('en-US', {
+        timeZone: 'America/New_York',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+    });
+    const handleImageLoad = (event) => {
+        try {
+            const color = fac.getColor(event.currentTarget);
+            setDominantColor(color.hex);
+        }
+        catch (error) {
+            console.error('Error getting average color', error);
+            setDominantColor('#b21100');
+        }
+    };
+    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 items-center justify-center', children: [_jsx("div", { className: 'bg-[#b21100] text-white p-12 shadow-2xl mb-16 animate-scale-in', style: { opacity: fullOpacity, transition: 'opacity 0.5s' }, children: _jsx(BellRing, { size: 256, strokeWidth: 2 }) }), _jsx("div", { className: 'absolute top-4 left-4', style: { opacity: smallOpacity, transition: 'opacity 0.5s' }, children: _jsx("div", { className: 'bg-[#b21100] text-white p-6 shadow-lg scale-50', children: _jsx(BellRing, { size: 128, strokeWidth: 2 }) }) }), _jsx("div", { className: 'flex flex-col items-center', style: { opacity: centerOpacity, transition: 'opacity 0.5s' } }), _jsx("div", { className: "text-white text-6xl font-bold tracking-wider animate-fade-in-delay font-['JetBrains_Mono']", style: { opacity: showTime ? 1 : 0, transition: 'opacity 0.5s' }, children: formatNyTime(displayTime) }), _jsxs("div", { className: 'text-white text-3xl opacity-75 mt-4 animate-fade-in-delay', style: { opacity: showTime ? 1 : 0, transition: 'opacity 0.5s' }, children: ["This is fifth", _jsx("span", { className: 'font-bold', children: "bell" }), "."] })] })] }));
+}

package/dist/components/live-program/components/slides/slideStyles.d.ts

@@ -0,0 +1 @@
+export declare const slideStyles = "\n  @keyframes kenburns {\n    0% { transform: scale(1); }\n    100% { transform: scale(1.1); }\n  }\n\n  @keyframes slideTransition {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  .animate-slide-transition {\n    animation: slideTransition 0.8s ease-in-out forwards;\n  }\n\n  @keyframes scaleIn {\n    from {\n      opacity: 0;\n      transform: scale(0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  .animate-scale-in {\n    animation: scaleIn 1s ease-out forwards;\n  }\n\n  .animate-fade-in {\n    animation: fadeIn 1s ease-out forwards;\n  }\n\n  .animate-fade-in-delay {\n    animation: fadeIn 1s ease-out 0.3s forwards;\n    opacity: 0;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes slideUpFade {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .animate-slide-up {\n    animation: slideUpFade 0.8s ease-out forwards;\n  }\n\n  @keyframes marqueeFlow {\n    from { transform: translateX(1920px); }\n    to { transform: translateX(-100%); }\n  }\n";

package/dist/components/live-program/components/slides/slideStyles.js

@@ -0,0 +1,64 @@
+export const slideStyles = `
+  @keyframes kenburns {
+    0% { transform: scale(1); }
+    100% { transform: scale(1.1); }
+  }
+
+  @keyframes slideTransition {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .animate-slide-transition {
+    animation: slideTransition 0.8s ease-in-out forwards;
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .animate-scale-in {
+    animation: scaleIn 1s ease-out forwards;
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 1s ease-out forwards;
+  }
+
+  .animate-fade-in-delay {
+    animation: fadeIn 1s ease-out 0.3s forwards;
+    opacity: 0;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes slideUpFade {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-slide-up {
+    animation: slideUpFade 0.8s ease-out forwards;
+  }
+
+  @keyframes marqueeFlow {
+    from { transform: translateX(1920px); }
+    to { transform: translateX(-100%); }
+  }
+`;

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

@@ -0,0 +1,34 @@
+import type { SupportedLanguage } from './i18n.js';
+export interface EventPost {
+    id: number;
+    uuid: string;
+    content: string;
+    source: string;
+    uri: string;
+    hash: string;
+    author: string;
+    createdAt: string;
+    relevance: number;
+    match_score: number;
+}
+export interface Event {
+    id: number;
+    uuid: string;
+    title: string;
+    summary: string;
+    status: 'open' | 'closed';
+    created_at: string;
+    updated_at: string;
+    posts_count: number;
+    posts: EventPost[];
+}
+interface FetchEventsOptions {
+    language?: SupportedLanguage;
+    allowedLanguages?: SupportedLanguage[];
+}
+export declare function fetchEvents(options?: FetchEventsOptions): Promise<Event[]>;
+export declare function getCachedEvents(): Event[] | null;
+export declare function getLastFetchTime(): Date | null;
+export declare function clearCachedEvents(): void;
+export declare function hasEventChanges(oldEvents: Event[], newEvents: Event[]): boolean;
+export {};