@fifthbell/brokaw 0.1.39

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

@@ -0,0 +1,23 @@
+import type React from 'react';
+export interface Segment {
+    id: string;
+    label: string;
+    itemCount: number;
+    durationMsPerItem: number;
+    render(itemIndex: number, progress: number): React.ReactNode;
+    onEnter?(): void;
+    onExit?(): void;
+    prefetch?(): Promise<void>;
+}
+export interface PlaylistState {
+    currentSegmentIndex: number;
+    currentItemIndex: number;
+    progress: number;
+    isPaused: boolean;
+}
+export interface PlaylistConfig {
+    segments: Segment[];
+    defaultDurationMs?: number;
+    updateIntervalMs?: number;
+    onPlaylistLoop?: () => void;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import type { PlaylistConfig, PlaylistState, Segment } from './types.js';
+export declare function usePlaylistEngine(config: PlaylistConfig): {
+    state: PlaylistState;
+    currentSegment: Segment | null;
+    pause: () => void;
+    resume: () => void;
+    reset: () => void;
+    advanceToNext: () => void;
+};

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

@@ -0,0 +1,108 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+const DEFAULT_DURATION_MS = 10000;
+const DEFAULT_UPDATE_INTERVAL_MS = 100;
+export function usePlaylistEngine(config) {
+    const { segments, defaultDurationMs = DEFAULT_DURATION_MS, updateIntervalMs = DEFAULT_UPDATE_INTERVAL_MS, onPlaylistLoop } = config;
+    const [state, setState] = useState({
+        currentSegmentIndex: 0,
+        currentItemIndex: 0,
+        progress: 0,
+        isPaused: false
+    });
+    const prevSegmentIndexRef = useRef(0);
+    const getCurrentSegment = useCallback(() => {
+        if (segments.length === 0)
+            return null;
+        return segments[state.currentSegmentIndex] || null;
+    }, [segments, state.currentSegmentIndex]);
+    const pause = useCallback(() => {
+        setState((prev) => ({ ...prev, isPaused: true }));
+    }, []);
+    const resume = useCallback(() => {
+        setState((prev) => ({ ...prev, isPaused: false }));
+    }, []);
+    const reset = useCallback(() => {
+        setState({
+            currentSegmentIndex: 0,
+            currentItemIndex: 0,
+            progress: 0,
+            isPaused: false
+        });
+    }, []);
+    const calculateNextState = useCallback((prevState) => {
+        const currentSegment = segments[prevState.currentSegmentIndex];
+        if (!currentSegment) {
+            return prevState;
+        }
+        const nextItemIndex = prevState.currentItemIndex + 1;
+        if (nextItemIndex >= currentSegment.itemCount) {
+            const nextSegmentIndex = (prevState.currentSegmentIndex + 1) % segments.length;
+            return {
+                ...prevState,
+                currentSegmentIndex: nextSegmentIndex,
+                currentItemIndex: 0,
+                progress: 0
+            };
+        }
+        return {
+            ...prevState,
+            currentItemIndex: nextItemIndex,
+            progress: 0
+        };
+    }, [segments]);
+    const advanceToNext = useCallback(() => {
+        setState((prevState) => calculateNextState(prevState));
+    }, [calculateNextState]);
+    useEffect(() => {
+        const currentSegmentIndex = state.currentSegmentIndex;
+        const previousSegmentIndex = prevSegmentIndexRef.current;
+        if (currentSegmentIndex !== previousSegmentIndex) {
+            const previousSegment = segments[previousSegmentIndex];
+            previousSegment?.onExit?.();
+            const currentSegment = segments[currentSegmentIndex];
+            currentSegment?.onEnter?.();
+            const nextSegmentIndex = (currentSegmentIndex + 1) % segments.length;
+            const nextSegment = segments[nextSegmentIndex];
+            nextSegment?.prefetch?.().catch((error) => {
+                console.error(`[Playlist] Failed to prefetch ${nextSegment.label}:`, error);
+            });
+            if (currentSegmentIndex === 0 &&
+                previousSegmentIndex === segments.length - 1 &&
+                segments.length > 0) {
+                onPlaylistLoop?.();
+            }
+            prevSegmentIndexRef.current = currentSegmentIndex;
+        }
+    }, [state.currentSegmentIndex, segments, onPlaylistLoop]);
+    useEffect(() => {
+        if (state.isPaused || segments.length === 0) {
+            return;
+        }
+        const currentSegment = segments[state.currentSegmentIndex];
+        if (!currentSegment) {
+            return;
+        }
+        const duration = currentSegment.durationMsPerItem || defaultDurationMs;
+        const progressIncrement = (updateIntervalMs / duration) * 100;
+        const timer = setInterval(() => {
+            setState((prevState) => {
+                if (prevState.progress >= 100) {
+                    return calculateNextState(prevState);
+                }
+                return {
+                    ...prevState,
+                    progress: prevState.progress + progressIncrement
+                };
+            });
+        }, updateIntervalMs);
+        return () => clearInterval(timer);
+    }, [state.isPaused, state.currentSegmentIndex, segments, defaultDurationMs, updateIntervalMs, calculateNextState]);
+    return {
+        state,
+        currentSegment: getCurrentSegment(),
+        pause,
+        resume,
+        reset,
+        advanceToNext
+    };
+}

package/dist/components/live-program/utils/broadcastTime.d.ts

@@ -0,0 +1,12 @@
+export interface GlobalTimeOverride {
+    startTime: string;
+    startedAt: string;
+}
+interface ClockParts {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+export declare function getOverrideClockParts(override: GlobalTimeOverride, now?: Date): ClockParts | null;
+export declare function formatClockParts(parts: ClockParts): string;
+export {};

package/dist/components/live-program/utils/broadcastTime.js

@@ -0,0 +1,33 @@
+function parseStartTime(startTime) {
+    const match = /^([01]\d|2[0-3]):([0-5]\d)$/.exec(startTime.trim());
+    if (!match) {
+        return null;
+    }
+    return {
+        hours: Number(match[1]),
+        minutes: Number(match[2]),
+        seconds: 0,
+    };
+}
+export function getOverrideClockParts(override, now = new Date()) {
+    const parsed = parseStartTime(override.startTime);
+    if (!parsed) {
+        return null;
+    }
+    const startedAtMillis = new Date(override.startedAt).getTime();
+    if (!Number.isFinite(startedAtMillis)) {
+        return null;
+    }
+    const startSeconds = parsed.hours * 3600 + parsed.minutes * 60;
+    const elapsedSeconds = Math.max(0, Math.floor((now.getTime() - startedAtMillis) / 1000));
+    const totalSeconds = (startSeconds + elapsedSeconds) % 86400;
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    return { hours, minutes, seconds };
+}
+export function formatClockParts(parts) {
+    const hours = String(parts.hours).padStart(2, '0');
+    const minutes = String(parts.minutes).padStart(2, '0');
+    return `${hours}:${minutes}`;
+}

package/dist/homepage-distributor.d.ts

@@ -0,0 +1,55 @@
+import type { SelfReference } from './types/canonical-article.js';
+/**
+ * Represents the pre-distributed article slots for the homepage.
+ *
+ * Featured slots (Landing[0,6,7] and MustRead[16,17,18]) are filled by
+ * `featured:true` articles published within the last 24 hours, ordered by
+ * date descending. If no such articles exist, all slots fall back to the
+ * general queue.
+ *
+ * The general queue contains:
+ *   - Overflow featured articles (beyond the first 6, within 24h)
+ *   - All remaining non-featured / older articles
+ * Sorted by date descending.
+ *
+ * Breaking News no longer reserves queue items; all queue ordering feeds
+ * Landing / Must Read / More Stories directly.
+ */
+export interface HomepageSlots {
+    landing: {
+        /** Featured slot 1 — large hero article (Landing headline 1) */
+        headline1: SelfReference | undefined;
+        /** Sub-snacks below headline 1 (4 items from queue) */
+        sub1: SelfReference[];
+        /** Dark-card feature (Landing card 5) */
+        card5: SelfReference | undefined;
+        /** Featured slot 2 — second prominent card (Landing headline 6) */
+        headline6: SelfReference | undefined;
+        /** Top Stories sidebar — first item is featured slot 3, rest from queue (6 items total) */
+        topStories: SelfReference[];
+    };
+    mustRead: {
+        /** Must Read wide leader article (not a featured slot) */
+        lead: SelfReference | undefined;
+        /** Featured slot 4 — first two-column card (Must Read headline 16) */
+        headline16: SelfReference | undefined;
+        /** Featured slot 5 — second two-column card (Must Read headline 17) */
+        headline17: SelfReference | undefined;
+        /** Must Read sidebar — first item is featured slot 6, rest from queue (7 items total) */
+        sidebar: SelfReference[];
+    };
+    /** More Stories grid (12 items from queue) */
+    moreStories: SelfReference[];
+    /** Deprecated compatibility field after candy-bar removal. Always empty. */
+    breakingNewsSnacks: SelfReference[];
+}
+/**
+ * Distribute homepage articles into named slots.
+ *
+ * @param articles        Full list of article references from the document.
+ * @param now             The reference time (default: current time). Exposed
+ *                        as a parameter so tests can pass a fixed instant.
+ * @param showBreakingNews Deprecated after candy-bar removal. Kept for
+ *                        compatibility and has no effect.
+ */
+export declare function distributeHomepageArticles(articles: SelfReference[], now?: Date, showBreakingNews?: boolean): HomepageSlots;

package/dist/homepage-distributor.js

@@ -0,0 +1,68 @@
+/** Return the best available date timestamp for an article, as epoch ms. */
+function articleDateMs(article) {
+    const ts = article.publishedAt ?? article.updatedAt;
+    return ts ? new Date(ts).getTime() : 0;
+}
+/**
+ * Distribute homepage articles into named slots.
+ *
+ * @param articles        Full list of article references from the document.
+ * @param now             The reference time (default: current time). Exposed
+ *                        as a parameter so tests can pass a fixed instant.
+ * @param showBreakingNews Deprecated after candy-bar removal. Kept for
+ *                        compatibility and has no effect.
+ */
+export function distributeHomepageArticles(articles, now = new Date(), showBreakingNews = false) {
+    const FEATURED_SLOT_COUNT = 6;
+    const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+    const cutoffMs = now.getTime() - ONE_DAY_MS;
+    // Articles that qualify for the 6 featured slots:
+    //   featured:true AND published/updated within the last 24 hours,
+    //   ordered newest-first.
+    const recentFeatured = articles
+        .filter((a) => a.featured === true && articleDateMs(a) >= cutoffMs)
+        .sort((a, b) => articleDateMs(b) - articleDateMs(a));
+    const featuredSlots = recentFeatured.slice(0, FEATURED_SLOT_COUNT);
+    const overflow = recentFeatured.slice(FEATURED_SLOT_COUNT);
+    const usedIds = new Set(featuredSlots.map((a) => a.id));
+    // General queue: overflow featured articles (beyond the 6 slots) followed by
+    // all other articles, sorted newest-first.
+    const others = articles.filter((a) => !usedIds.has(a.id));
+    const queue = [...overflow, ...others].sort((a, b) => articleDateMs(b) - articleDateMs(a));
+    let qi = 0;
+    const nextFromQueue = () => queue[qi++];
+    const nextNFromQueue = (n) => {
+        const result = queue.slice(qi, qi + n);
+        qi += result.length;
+        return result;
+    };
+    // A featured slot falls back to the queue if not enough featured articles
+    // are available.
+    const getFeatured = (index) => featuredSlots[index] ?? nextFromQueue();
+    // Breaking News no longer reserves queue items.
+    void showBreakingNews;
+    const breakingNewsSnacks = [];
+    // ── Landing ──────────────────────────────────────────────────────────────
+    const headline1 = getFeatured(0);
+    const sub1 = nextNFromQueue(4);
+    const card5 = nextFromQueue();
+    const headline6 = getFeatured(1);
+    const topStoriesHead = getFeatured(2);
+    const topStoriesTail = nextNFromQueue(5);
+    const topStories = [topStoriesHead, ...topStoriesTail].filter((a) => a !== undefined);
+    // ── Must Read ─────────────────────────────────────────────────────────────
+    const lead = nextFromQueue();
+    const headline16 = getFeatured(3);
+    const headline17 = getFeatured(4);
+    const sidebarHead = getFeatured(5);
+    const sidebarTail = nextNFromQueue(6);
+    const sidebar = [sidebarHead, ...sidebarTail].filter((a) => a !== undefined);
+    // ── More Stories ──────────────────────────────────────────────────────────
+    const moreStories = nextNFromQueue(12);
+    return {
+        landing: { headline1, sub1, card5, headline6, topStories },
+        mustRead: { lead, headline16, headline17, sidebar },
+        moreStories,
+        breakingNewsSnacks
+    };
+}

package/dist/instagram-image-template.d.ts

@@ -0,0 +1,8 @@
+export type InstagramImageTemplateParams = {
+    imageUrl: string;
+    title: string;
+    category?: string;
+    slug?: string;
+    url?: string;
+};
+export declare function buildInstagramImageHtml(params: InstagramImageTemplateParams): string;

package/dist/instagram-image-template.js

@@ -0,0 +1,200 @@
+import qrcode from 'qrcode-generator';
+function escapeHtml(input) {
+    return input.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#039;');
+}
+export function buildInstagramImageHtml(params) {
+    const safeImageUrl = escapeHtml(params.imageUrl);
+    const safeTitle = escapeHtml(params.title);
+    const categoryName = params.category
+        ? escapeHtml(params.category.toUpperCase())
+        : params.slug
+            ? escapeHtml(params.slug.replace(/-/g, ' ').toUpperCase())
+            : 'LATEST STORY';
+    // Create inline QR code SVG if a post URL is provided
+    let qrCodeHtml = '';
+    if (params.url) {
+        const qr = qrcode(0, 'M');
+        qr.addData(params.url);
+        qr.make();
+        const qrSvg = qr.createSvgTag(5, 0);
+        qrCodeHtml = `<div class="qr-container"><div class="qr-code" aria-label="QR Code">${qrSvg}</div></div>`;
+    }
+    // SVG for the actual Brokaw logo (red box with white bell)
+    const logoSvg = `<div style="color: white; width: 140px; height: 119px; display: flex; align-items: center; justify-content: end;">
+      <svg width="61" height="61" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
+        <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
+        <path d="M4 2C2.8 3.7 2 5.7 2 8"></path>
+        <path d="M22 8a10 10 0 0 0-2-6"></path>
+      </svg>
+    </div>`;
+    return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=1080, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Encode+Sans:wght@100..900" rel="stylesheet">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 1080px;
+      height: 1350px;
+      overflow: hidden;
+      background-color: #000;
+      position: relative;
+    }
+
+    .hero-image {
+      position: absolute;
+      inset: 0;
+      height: 100%;
+      background-color: #000;
+    }
+
+    .hero-image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.9;
+    }
+
+
+    .card-container {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      z-index: 10;
+    }
+
+    .card-container header {
+      display: flex;
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.70);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      position: relative;
+      z-index: 1;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+    }
+
+    .card-container header .category-label {
+      margin-left: 32px;
+    }
+
+    .logo-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0 32px;
+      background-color: #b21100;
+    }
+
+    .brand-logo {
+      display: flex;
+      align-items: center;
+    }
+
+    .qr-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 16px;
+      background-color: #ffffff;
+    }
+
+    .qr-code {
+      width: 119px;
+      height: 119px;
+      padding: 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .qr-code svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .card-container main {
+      display: flex;
+      flex-direction: column;
+      background-color: rgba(0, 0, 0, 0.35);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      padding: 110px;
+      padding-top: 36px;
+    }
+
+    .accent-bar {
+      width: 64px;
+      height: 6px;
+      background-color: #b21100;
+      margin-bottom: 24px;
+    }
+
+    .category-label {
+      font-family: 'Encode Sans Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      font-size: 80px;
+      line-height: 119px;
+      font-weight: 600;
+      color: #ffffff;
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+    }
+
+    .title-text {
+      font-family: 'Encode Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      font-size: 68px;
+      line-height: 1.1;
+      font-weight: 700;
+      color: #ffffff;
+      text-wrap: balance;
+      display: -webkit-box;
+      -webkit-line-clamp: 5;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <div class="hero-image">
+    <img src="${safeImageUrl}" alt="Featured Image" />
+  </div>
+
+  <div class="card-container">
+    <header>
+      <div class="logo-container">
+        <div class="brand-logo">${logoSvg}</div>
+      </div>
+      ${qrCodeHtml}
+      <div class="category-label">${categoryName}</div>
+    </header>
+    <main>
+      <div class="accent-bar"></div>
+      <h1 class="title-text">${safeTitle}</h1>
+    </main>
+  </div>
+
+  <script>
+    window.onload = () => {
+      if (document.fonts) {
+        document.fonts.ready.then(() => {
+          setTimeout(() => { document.body.setAttribute('data-ready', '1'); }, 300);
+        });
+      } else {
+        setTimeout(() => { document.body.setAttribute('data-ready', '1'); }, 1000);
+      }
+    };
+  </script>
+</body>
+</html>
+    `.trim();
+}

package/dist/outlet-config.d.ts

@@ -0,0 +1,23 @@
+export declare const outletConfig: {
+    readonly siteName: "fifthbell";
+    readonly defaultLanguage: "en";
+    readonly supportedLanguages: readonly ["en", "es", "it"];
+    readonly prefixDefaultLocale: false;
+    readonly defaultAuthor: {
+        readonly name: "Fifthbell Newsroom";
+        readonly slug: "fifthbell-newsroom";
+    };
+    readonly defaultCategory: {
+        readonly name: "Top Stories";
+        readonly slug: "top-stories";
+    };
+    readonly linkInBioRoute: "/instagram";
+    readonly searchTitle: "Search";
+    readonly searchDescriptions: {
+        readonly en: "Search stories from Fifthbell.";
+        readonly es: "Busca noticias de Fifthbell.";
+        readonly it: "Cerca notizie Fifthbell.";
+    };
+    readonly socialLanguages: readonly ["en"];
+    readonly socialUserAgent: "Cronkite/1.0";
+};

package/dist/outlet-config.js

@@ -0,0 +1,23 @@
+export const outletConfig = {
+    siteName: 'fifthbell',
+    defaultLanguage: 'en',
+    supportedLanguages: ['en', 'es', 'it'],
+    prefixDefaultLocale: false,
+    defaultAuthor: {
+        name: 'Fifthbell Newsroom',
+        slug: 'fifthbell-newsroom'
+    },
+    defaultCategory: {
+        name: 'Top Stories',
+        slug: 'top-stories'
+    },
+    linkInBioRoute: '/instagram',
+    searchTitle: 'Search',
+    searchDescriptions: {
+        en: 'Search stories from Fifthbell.',
+        es: 'Busca noticias de Fifthbell.',
+        it: 'Cerca notizie Fifthbell.'
+    },
+    socialLanguages: ['en'],
+    socialUserAgent: 'Cronkite/1.0'
+};

package/dist/renderer.browser.d.ts

@@ -0,0 +1,2 @@
+import type { CanonicalArticle } from './types/canonical-article.js';
+export declare function render(doc: CanonicalArticle): string;