disaster-broadcast-studio 0.2.0 → 0.3.0

package/README.md

@@ -6,9 +6,10 @@ YAML/JSON 시나리오를 한국형 재난방송 호러 영상으로 만드는 C
 
 ## 할 수 있는 일
 
-- **방송 화면:** 최신순 재난문자·정정 이력, 독립 뉴스, 상태 박스, 장문 방송 안내. 뉴스·문자·상태 변경을 알리는 기본 전환 효과.
+- **방송 화면:** 최신순 재난문자 이력, 독립 뉴스, 상태 박스, 방송 안내. 뉴스·문자·상태 변경을 알리는 기본 전환 효과.
+- **시청자 반응:** 선택적 실시간 채팅 패널. 시나리오에 작성한 닉네임·대화가 지정 시점에 올라오고 이전 대화는 위로 이동.
 - **지도 연출:** 실제 시도·시군구 경계, 채우기·윤곽선 중첩, 범례·지점·영역·진행선, 카메라 이동·보조 지도.
-- **시간 연출:** 컷 안에서는 실시간으로, 컷 사이에서는 지정한 이야기 시각으로 전환. 임의 프레임에서도 같은 상태를 복원.
+- **시간 연출:** 컷 안에서는 실시간으로, 컷 사이에서는 지정한 이야기 시각으로 전환. 흐릿한 빠른 재생 아이콘·잔상·주사선으로 시간 도약을 표시하며 임의 프레임에서도 같은 상태를 복원.
 - **음향·효과:** 상태·방송 안내·등급별 문자 기본음, 로컬 음원, Tone.js 코드의 WAV 합성, 페이드·침묵·신호 간섭·송출 종료.
 - **텍스트 제작 흐름:** 검증, 웹 실시간 미리보기, 렌더 없는 상태 조회, PNG 확인, 구간·전체 영상 출력, 게시용 출처 생성.
 
@@ -31,6 +32,12 @@ npx dbs init
 
 창작 AI와 함께 제작한다면 [창작 스킬 설치 안내](skills/README.md)를 따르세요. 스킬에는 집필·연출 지침, 공식 문안 참고자료, 음향 코드 예제가 포함되어 있습니다. 사용자 범위에 한 번 설치하며 `dbs init`과 별도로 관리합니다.
 
+### 0.3.0 업그레이드
+
+선택적 시청자 채팅, 모바일 가로 화면에 맞춘 큰 글자와 짧은 문안의 전문 표시, 시간 도약의 빠른 재생 연출을 포함합니다. 작성 주체·시청자 관점과 공식 상태 체계에 관한 창작 지침도 개정했습니다.
+
+기존 작품의 `pageSeconds`와 `corrects` 필드는 삭제하세요. 문안은 [작품 형식](skills/scenario-writing/references/format.md)의 길이·줄 수·표시명 한도에 맞춰 간결하게 수정한 뒤 `dbs validate`로 확인하세요. 문안은 자동으로 나뉘지 않고 전문이 한 번에 표시됩니다.
+
 ## 첫 영상 만들기
 
 `scenario.yaml`의 제목·기관·컷·이벤트를 수정하고 다음 순서로 확인합니다.
@@ -51,7 +58,7 @@ npx dbs render scenario.yaml --from 300 --to 599 --out clip.mp4
 npx dbs render scenario.yaml --out film.mp4
 ```
 
-프레임은 **0부터 시작**하며 구간의 **끝 프레임도 포함**합니다. 300~599는 60fps에서 5초입니다. 컷 안의 시간은 실제 재생 시간과 같고, 컷 경계에서만 시간을 생략할 수 있습니다. 오프닝 이후에 중요한 사건을 배치하고, 읽기 시간 경고가 나오면 문자 사이 간격을 늘리세요.
+프레임은 **0부터 시작**하며 구간의 **끝 프레임도 포함**합니다. 300~599는 60fps에서 5초입니다. 컷 안의 시간은 실제 재생 시간과 같고, 컷 경계에서만 시간을 생략할 수 있습니다. 문안은 전문이 한 번에 읽힐 만큼 짧게 작성합니다. 오프닝 이후에 중요한 사건을 배치하고, 읽기 시간 경고가 나오면 문자 사이 간격을 늘리세요. 모바일 가로 전체화면을 기준으로 큰 본문과 명확한 정보 위계를 사용합니다.
 
 `preview`가 출력한 로컬 주소(기본 `http://127.0.0.1:3000`)를 브라우저에서 여세요. 화면·음향 재생, 탐색 막대, 프레임 단위 이동과 컷 선택을 제공합니다. 시나리오·사용자 지도·참조 음원을 저장하면 현재 위치에서 일시정지한 뒤 자동 반영합니다. 잘못된 입력은 마지막 정상 화면을 유지하면서 오류를 표시합니다. 포트는 `--port 3100`으로 바꾸고, 종료는 터미널에서 Ctrl+C를 누릅니다. MP4나 PNG를 생성하거나 Headless Chromium을 설치하지 않으며, 초기 웹 번들 준비 후 로컬 자산으로 재생합니다. 지도와 글꼴을 준비하는 동안은 재생을 기다리고, 실제 재생 성능은 브라우저·GPU에 따라 달라집니다.
 

package/dist/cli.js

@@ -11,7 +11,7 @@ import { z } from 'zod';
 const program = new Command()
     .name('dbs')
     .description('Text-authored disaster broadcast fiction → 1080p60 video')
-    .version('0.2.0');
+    .version('0.3.0');
 program
     .command('init [directory]')
     .description('Create a scenario workspace with YAML and audio folders; never overwrite files')
@@ -78,6 +78,7 @@ program
         camera: state.camera,
         visible: state.visible,
         alerts: state.alerts,
+        chat: state.chat,
         warnings,
     }, null, 2));
 });

package/dist/load.js

@@ -3,7 +3,7 @@ import path from 'node:path';
 import { defaultSounds, notificationSounds } from './notifications.js';
 import { readBundledJson, packageRoot } from './assets.js';
 import { parseDocument } from 'yaml';
-import { compile, scenarioSchema, alertText, pages, FPS } from './scenario.js';
+import { compile, scenarioSchema, alertText, FPS } from './scenario.js';
 export async function localFile(root, value, label) {
     if (/^[a-z]+:\/\//i.test(value))
         throw Error(`${label}: use a local file, not a URL`);
@@ -84,11 +84,10 @@ export async function loadScenario(file) {
             if (nextAlert?.type === 'alert' &&
                 nextAlert.text === a.text &&
                 nextAlert.sender === a.sender &&
-                nextAlert.level === a.level &&
-                nextAlert.corrects === a.corrects)
+                nextAlert.level === a.level)
                 continue;
             const next = nextAlert?.start ?? timeline.durationInFrames;
-            const readingSeconds = pages(alertText(scenario.agencies[a.sender], a.text)).length * a.pageSeconds;
+            const readingSeconds = Math.max(8, Math.ceil(Array.from(alertText(scenario.agencies[a.sender], a.text)).length / 8));
             if (next - Math.max(a.start, 5 * FPS) < readingSeconds * FPS)
                 warnings.push(`${a.id}: latest-message reading time is short; allow ${readingSeconds}s before the next alert/end`);
         }

package/dist/scenario.d.ts

@@ -48,10 +48,8 @@ export declare const scenarioSchema: z.ZodObject<{
             duration: z.ZodNumber;
             volume: z.ZodDefault<z.ZodNumber>;
         }, z.core.$strict>]>>;
-        corrects: z.ZodOptional<z.ZodString>;
         occurredAt: z.ZodOptional<z.ZodString>;
         publishedAt: z.ZodOptional<z.ZodString>;
-        pageSeconds: z.ZodDefault<z.ZodNumber>;
         id: z.ZodString;
         cut: z.ZodString;
         at: z.ZodNumber;
@@ -97,12 +95,28 @@ export declare const scenarioSchema: z.ZodObject<{
         heading: z.ZodString;
         text: z.ZodString;
         color: z.ZodDefault<z.ZodString>;
-        pageSeconds: z.ZodDefault<z.ZodNumber>;
         duration: z.ZodNumber;
         carry: z.ZodDefault<z.ZodBoolean>;
         id: z.ZodString;
         cut: z.ZodString;
         at: z.ZodNumber;
+    }, z.core.$strict>, z.ZodObject<{
+        type: z.ZodLiteral<"chat">;
+        title: z.ZodDefault<z.ZodString>;
+        duration: z.ZodNumber;
+        carry: z.ZodDefault<z.ZodBoolean>;
+        id: z.ZodString;
+        cut: z.ZodString;
+        at: z.ZodNumber;
+    }, z.core.$strict>, z.ZodObject<{
+        type: z.ZodLiteral<"chat-message">;
+        chat: z.ZodString;
+        author: z.ZodString;
+        text: z.ZodString;
+        color: z.ZodDefault<z.ZodString>;
+        id: z.ZodString;
+        cut: z.ZodString;
+        at: z.ZodNumber;
     }, z.core.$strict>, z.ZodObject<{
         type: z.ZodLiteral<"zone">;
         points: z.ZodArray<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>;
@@ -267,5 +281,4 @@ export type Timeline = {
 export declare const FPS = 60;
 export declare const frames: (seconds: number) => number;
 export declare const alertText: (sender: string, text: string) => string;
-export declare const pages: (text: string) => string[];
 export declare function compile(scenario: Scenario, regionIds: Set<string>): Timeline;

package/dist/scenario.js

@@ -4,6 +4,8 @@ const seconds = z.number().finite().nonnegative();
 const color = z.string().regex(/^#[0-9a-fA-F]{6}$/);
 const position = z.tuple([z.number().min(-180).max(180), z.number().min(-85).max(85)]);
 const timestamp = z.string().datetime({ offset: true });
+const fitsText = (text, columns, lines) => text.split(/\r\n|\r|\n/).reduce((count, line) => count + Math.max(1, Math.ceil(Array.from(line.replace(/\t/g, '        ')).length / columns)), 0) <= lines;
+const shortText = (characters, columns, lines) => z.string().trim().min(1).max(characters).refine((text) => fitsText(text, columns, lines), 'Shorten the text or remove line breaks so the full message fits at once');
 const camera = z
     .object({
     center: position,
@@ -36,7 +38,7 @@ const alert = z
     ...timed,
     type: z.literal('alert'),
     sender: id,
-    text: z.string().min(1).max(4000),
+    text: shortText(120, 16, 8),
     level: z.enum(['안전안내', '긴급재난', '위급재난']).default('안전안내'),
     regions: z.array(z.string()).default([]),
     mapHighlight: z
@@ -51,10 +53,8 @@ const alert = z
     ])
         .default({ duration: 2.4, color: '#d6e2ec' }),
     sound: notificationSound,
-    corrects: id.optional(),
     occurredAt: timestamp.optional(),
     publishedAt: timestamp.optional(),
-    pageSeconds: z.number().min(3).default(8),
 })
     .strict();
 const news = z
@@ -63,7 +63,7 @@ const news = z
     type: z.literal('news'),
     sound: notificationSound.default(false),
     source: id,
-    headline: z.string().min(1).max(160),
+    headline: shortText(64, 32, 2),
     publishedAt: timestamp.optional(),
 })
     .strict();
@@ -81,10 +81,26 @@ const bulletin = z
     type: z.literal('bulletin'),
     sound: notificationSound,
     source: id,
-    heading: z.string().min(1).max(80),
-    text: z.string().min(1).max(4000),
+    heading: shortText(40, 26, 2),
+    text: shortText(180, 30, 6),
     color: color.default('#b7c1c8'),
-    pageSeconds: z.number().min(3).default(12),
+})
+    .strict();
+const chat = z
+    .object({
+    ...span,
+    type: z.literal('chat'),
+    title: z.string().trim().min(1).max(30).regex(/^[^\r\n]+$/, 'Use a single line').default('실시간 채팅'),
+})
+    .strict();
+const chatMessage = z
+    .object({
+    ...timed,
+    type: z.literal('chat-message'),
+    chat: id,
+    author: z.string().trim().min(1).max(20).regex(/^[^\r\n]+$/, 'Use a single line'),
+    text: z.string().trim().min(1).max(80).regex(/^[^\r\n]+$/, 'Use a single line'),
+    color: color.default('#9fb8cb'),
 })
     .strict();
 const zone = z
@@ -235,6 +251,8 @@ export const scenarioSchema = z
         news,
         status,
         bulletin,
+        chat,
+        chatMessage,
         zone,
         line,
         highlight,
@@ -252,24 +270,6 @@ export const scenarioSchema = z
 export const FPS = 60;
 export const frames = (seconds) => Math.round(seconds * FPS);
 export const alertText = (sender, text) => text.includes(`[${sender}]`) ? text : `[${sender}] ${text}`;
-export const pages = (text) => {
-    const result = [];
-    let remaining = Array.from(new Intl.Segmenter('ko', { granularity: 'grapheme' }).segment(text), (x) => x.segment);
-    while (remaining.length > 100) {
-        const part = remaining.slice(0, 100);
-        let boundary = 99;
-        for (let i = 99; i >= 60; i--)
-            if (/[\s]/.test(part[i])) {
-                boundary = i;
-                break;
-            }
-        result.push(remaining.slice(0, boundary + 1).join(''));
-        remaining = remaining.slice(boundary + 1);
-    }
-    if (remaining.length)
-        result.push(remaining.join(''));
-    return result;
-};
 export function compile(scenario, regionIds) {
     const errors = [];
     try {
@@ -331,17 +331,18 @@ export function compile(scenario, regionIds) {
         if (e.type === 'alert') {
             if (!Object.hasOwn(scenario.agencies, e.sender))
                 errors.push(`${path}.sender: unknown agency ${e.sender}`);
-            if (e.corrects) {
-                const prev = scenario.events.find((x) => x.id === e.corrects);
-                if (!prev || prev.type !== 'alert')
-                    errors.push(`${path}.corrects: unknown alert ${e.corrects}`);
-            }
+            else if (!fitsText(alertText(scenario.agencies[e.sender], e.text), 16, 8))
+                errors.push(`${path}.text: shorten the message including its sender so the full text fits at once`);
         }
         if (e.type === 'zone' &&
             (e.points[0][0] !== e.points.at(-1)[0] || e.points[0][1] !== e.points.at(-1)[1]))
             errors.push(`${path}.points: polygon ring must be closed`);
         if ((e.type === 'news' || e.type === 'bulletin') && !Object.hasOwn(scenario.agencies, e.source))
             errors.push(`${path}.source: unknown agency ${e.source}`);
+        else if (e.type === 'news' && !fitsText(scenario.agencies[e.source], 10, 2))
+            errors.push(`${path}.source: shorten the display name so the full source fits beside the headline`);
+        else if (e.type === 'bulletin' && !fitsText(scenario.agencies[e.source], 48, 2))
+            errors.push(`${path}.source: shorten the display name so the full source fits above the notice`);
         if (e.type === 'audio') {
             if (!Object.hasOwn(scenario.assets, e.asset))
                 errors.push(`${path}.asset: unknown asset ${e.asset}`);
@@ -351,10 +352,14 @@ export function compile(scenario, regionIds) {
         return [{ ...e, start, end, order: i }];
     });
     for (const e of events) {
-        if (e.type === 'alert' && e.corrects) {
-            const prior = events.find((x) => x.id === e.corrects);
-            if (prior && prior.start >= e.start)
-                errors.push(`${e.id}.corrects: correction must follow original alert`);
+        if (e.type === 'chat-message') {
+            const panel = events.find((x) => x.id === e.chat && x.type === 'chat');
+            if (!panel)
+                errors.push(`events[${e.order}] (${e.id}).chat: unknown chat ${e.chat}`);
+            else if (e.start < panel.start || e.start >= panel.end)
+                errors.push(`events[${e.order}] (${e.id}).at: outside chat ${e.chat}`);
+            else
+                e.end = panel.end;
         }
     }
     for (const cut of cuts) {
@@ -364,7 +369,7 @@ export function compile(scenario, regionIds) {
             errors.push(`cuts (${cut.id}).clockTransition: requires a previous cut`);
     }
     // Single-owner tracks cannot have ambiguous concurrent values. Independent layers can overlap.
-    for (const type of ['camera', 'inset', 'news', 'status', 'bulletin', 'legend']) {
+    for (const type of ['camera', 'inset', 'news', 'status', 'bulletin', 'legend', 'chat']) {
         const track = events.filter((e) => e.type === type).sort((a, b) => a.start - b.start);
         for (let i = 1; i < track.length; i++)
             if (track[i].start < track[i - 1].end)

package/dist/timeline.d.ts

@@ -1,5 +1,34 @@
 import { type Timeline, type Camera, type CompiledEvent } from './scenario.js';
 export declare const active: (e: CompiledEvent, frame: number) => boolean;
+export declare function chatAt(t: Timeline, frame: number): {
+    panel: {
+        type: "chat";
+        title: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    };
+    messages: ({
+        type: "chat-message";
+        chat: string;
+        author: string;
+        text: string;
+        color: string;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    })[];
+} | null;
 export declare const mix: (a: number, b: number, t: number) => number;
 export declare function notificationPulse(frame: number, start: number, end: number): number;
 export declare function cameraAt(t: Timeline, frame: number): Camera;
@@ -22,6 +51,10 @@ export declare function stateAt(t: Timeline, frame: number): {
     displayEpoch: number;
     jumping: boolean;
     clockPhase: string | null;
+    timeJump: {
+        progress: number;
+        elapsedFrames: number;
+    } | null;
     contentFrame: number;
     camera: {
         center: [number, number];
@@ -30,6 +63,35 @@ export declare function stateAt(t: Timeline, frame: number): {
         pitch: number;
     };
     alerts: CompiledEvent[];
+    chat: {
+        panel: {
+            type: "chat";
+            title: string;
+            duration: number;
+            carry: boolean;
+            id: string;
+            cut: string;
+            at: number;
+        } & {
+            start: number;
+            end: number;
+            order: number;
+        };
+        messages: ({
+            type: "chat-message";
+            chat: string;
+            author: string;
+            text: string;
+            color: string;
+            id: string;
+            cut: string;
+            at: number;
+        } & {
+            start: number;
+            end: number;
+            order: number;
+        })[];
+    } | null;
     visible: CompiledEvent[];
     news: ({
         type: "news";

package/dist/timeline.js

@@ -1,5 +1,12 @@
 import { FPS } from './scenario.js';
 export const active = (e, frame) => e.start <= frame && frame < e.end;
+export function chatAt(t, frame) {
+    const panel = t.events.find((e) => e.type === 'chat' && active(e, frame));
+    if (!panel || panel.type !== 'chat')
+        return null;
+    const messages = t.events.filter((e) => e.type === 'chat-message' && e.chat === panel.id && e.start <= frame);
+    return { panel, messages };
+}
 export const mix = (a, b, t) => a + (b - a) * t;
 // Three smooth pulses, bounded by the authored frame interval.
 export function notificationPulse(frame, start, end) {
@@ -79,12 +86,15 @@ export function stateAt(t, frame) {
     const jumping = index > 0 && transition > 0 && frame < cut.start + transition;
     const contentFrame = jumping ? cut.start - 1 : frame;
     const previous = index > 0 ? t.cuts[index - 1] : null;
+    const previousEnd = previous
+        ? previous.epoch + ((previous.end - previous.start) * 1000) / FPS
+        : cut.epoch;
     const epoch = cut.epoch + ((frame - cut.start) * 1000) / FPS;
     const p = jumping ? (frame - cut.start) / transition : 1;
     const clockPhase = jumping ? (p < 0.15 ? 'lead' : p < 0.75 ? 'run' : 'hold') : null;
     const roll = Math.max(0, Math.min(1, (p - 0.15) / 0.6));
     const displayEpoch = jumping
-        ? mix(previous.epoch + ((previous.end - previous.start) * 1000) / FPS, cut.epoch + (transition * 1000) / FPS, roll)
+        ? mix(previousEnd, cut.epoch + (transition * 1000) / FPS, roll)
         : epoch;
     const visible = t.events.filter((e) => active(e, contentFrame));
     return {
@@ -94,9 +104,16 @@ export function stateAt(t, frame) {
         displayEpoch,
         jumping,
         clockPhase,
+        timeJump: jumping && cut.epoch > previousEnd
+            ? {
+                progress: (frame - cut.start) / Math.max(1, transition - 1),
+                elapsedFrames: frame - cut.start,
+            }
+            : null,
         contentFrame,
         camera: cameraAt(t, contentFrame),
         alerts: t.events.filter((e) => e.type === 'alert' && e.start <= contentFrame).reverse(),
+        chat: chatAt(t, contentFrame),
         visible,
         news: visible.find((e) => e.type === 'news'),
         opacity: Math.min(1, cut.fadeIn ? (frame - cut.start) / FPS / cut.fadeIn : 1, cut.fadeOut ? (cut.end - 1 - frame) / FPS / cut.fadeOut : 1),

package/dist/video/Alerts.js

@@ -1,9 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { pages, alertText } from '../scenario.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { alertText } from '../scenario.js';
 import { stateAt, clock } from '../timeline.js';
 import { numberFont } from './fonts.js';
-import { PagedText } from './Information.js';
-import { changeProgress, pageAt } from './transitions.js';
+import { changeProgress } from './transitions.js';
 const colors = {
     안전안내: '#a0adb5',
     긴급재난: '#c2746e',
@@ -12,13 +11,11 @@ const colors = {
 function AlertCard({ event, emphasis, frame, timeline, }) {
     if (event.type !== 'alert')
         return null;
-    const chunks = pages(alertText(timeline.scenario.agencies[event.sender], event.text));
-    const { page } = pageAt(frame, event.start, event.pageSeconds, chunks.length);
     const arrival = changeProgress(frame, event.start);
     const latest = emphasis > 0;
     const received = stateAt(timeline, event.start).epoch;
     return (_jsx("div", { style: { display: 'grid', gridTemplateRows: `${arrival}fr` }, children: _jsx("div", { style: { minHeight: 0, overflow: 'hidden' }, children: _jsxs("article", { style: {
-                    padding: `${17 + 3 * emphasis}px 24px ${20 + 2 * emphasis}px`,
+                    padding: '16px 24px',
                     opacity: arrival,
                     transform: `translateY(${-14 * (1 - arrival)}px)`,
                     boxShadow: `inset 4px 0 ${colors[event.level]}${Math.round((1 - changeProgress(frame, event.start, 66)) * 180)
@@ -31,42 +28,29 @@ function AlertCard({ event, emphasis, frame, timeline, }) {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 10,
-                            fontSize: 17,
+                            fontSize: 28,
                             color: colors[event.level],
-                            marginBottom: 12,
-                        }, children: [_jsxs("b", { style: {
+                            marginBottom: 10,
+                        }, children: [_jsx("b", { style: {
                                     border: `1px solid ${colors[event.level]}`,
                                     padding: '2px 7px',
                                     fontWeight: 400,
-                                }, children: [event.corrects ? '정정 · ' : '', event.level] }), _jsxs("span", { style: {
+                                }, children: event.level }), _jsxs("span", { style: {
                                     marginLeft: 'auto',
                                     fontFamily: numberFont,
                                     fontVariantNumeric: 'tabular-nums',
-                                    fontSize: 17,
+                                    fontSize: 26,
                                     color: '#aab3b9',
-                                }, children: ["\uC218\uC2E0 ", clock(received, timeline.scenario.timezone)] })] }), (event.occurredAt || event.publishedAt) && (_jsxs("div", { style: { fontSize: 16, color: '#939fa7', marginBottom: 10 }, children: [event.occurredAt &&
+                                }, children: ["\uC218\uC2E0 ", clock(received, timeline.scenario.timezone)] })] }), (event.occurredAt || event.publishedAt) && (_jsxs("div", { style: { fontSize: 26, color: '#b0bac2', marginBottom: 8 }, children: [event.occurredAt &&
                                 `발생 ${clock(Date.parse(event.occurredAt), timeline.scenario.timezone)} `, event.publishedAt &&
                                 `발표 ${clock(Date.parse(event.publishedAt), timeline.scenario.timezone)}`] })), _jsx("div", { style: {
-                            fontSize: 22 + 6 * emphasis,
-                            lineHeight: 1.65,
+                            fontSize: 32 + 8 * emphasis,
+                            lineHeight: 1.4,
                             whiteSpace: 'pre-wrap',
-                            wordBreak: 'keep-all',
+                            wordBreak: 'normal',
                             overflowWrap: 'anywhere',
-                            color: latest ? '#e0e4e7' : '#aab5bd',
-                        }, children: _jsx(PagedText, { chunks: chunks, frame: frame, start: event.start, seconds: event.pageSeconds }) }), chunks.length > 1 && (_jsxs("div", { style: {
-                            fontFamily: numberFont,
-                            fontSize: 16,
-                            color: '#839099',
-                            marginTop: 12,
-                            textAlign: 'right',
-                        }, children: [page + 1, " / ", chunks.length] })), event.corrects && (_jsxs("div", { style: {
-                            fontSize: 16,
-                            color: '#a4afb6',
-                            marginTop: 12,
-                            borderTop: '1px solid #343a3f',
-                            paddingTop: 10,
-                        }, children: ["\uC774\uC804 \uBB38\uC790 \uC815\uC815 \u00B7", ' ', clock(stateAt(timeline, timeline.events.find((e) => e.id === event.corrects).start)
-                                .epoch, timeline.scenario.timezone)] }))] }) }) }));
+                            color: latest ? '#edf0f2' : '#c0c9d0',
+                        }, children: alertText(timeline.scenario.agencies[event.sender], event.text) })] }) }) }));
 }
 export function AlertHistory({ timeline, frame }) {
     const alerts = stateAt(timeline, frame).alerts;