(null);
+
+ useEffect(() => {
+ if (!open || !pending) {
+ setRuntime(null);
+ return;
+ }
+ let cancelled = false;
+ (async () => {
+ try {
+ const beatName = `lura-${pending}` as
+ | 'lura-arrival'
+ | 'lura-mid'
+ | 'lura-farewell';
+ const story = await loadInkStory(beatName);
+ if (cancelled) return;
+ bindGardenStateToInk(story, appStore.getState());
+ // The Ink files use `== arrival ==`, `== mid ==`, `== farewell ==`
+ // as their entry knots. ChoosePathString navigates to the named
+ // knot before the first Continue() call.
+ story.ChoosePathString(pending);
+ setRuntime(createInkRuntime(story));
+ } catch (err) {
+ // Fail-soft: log + close. The gate's pending flag stays set so
+ // the player can re-try (rather than losing the beat to a
+ // silent failure).
+ console.error('[LuraDialogue] failed to load beat', pending, err);
+ setDialogueOverlayOpen(false);
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, [open, pending, setDialogueOverlayOpen]);
+
+ if (!open) return null;
+
+ const onClose = (): void => {
+ setDialogueOverlayOpen(false);
+ // Resolve in the store so the visited flag updates and `pending`
+ // clears. Read fresh state (not the memoized hook value) so we
+ // don't carry a stale pending identifier.
+ setLuraBeatProgress(
+ resolvePendingLuraBeat(appStore.getState().luraBeatProgress),
+ );
+ };
+
+ return (
+ e.stopPropagation()}
+ style={{
+ position: 'fixed',
+ inset: 0,
+ zIndex: 85,
+ background: '#1a1a1aee',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: '#e8e0d0',
+ fontFamily: 'serif',
+ }}
+ >
+
+ {runtime ? (
+
{}} />
+ ) : (
+ ...
+ )}
+
+ Close
+
+
+
+ body — supports
+ * MEMR-05-style copy-paste from day one. Same posture as Plan 02-03's
+ * Memory Journal.
+ */
+export function InkRenderer({
+ runtime,
+ onComplete,
+}: {
+ runtime: InkRuntime;
+ onComplete?: () => void;
+}): React.ReactElement {
+ const [lines, setLines] = useState([]);
+ const [choices, setChoices] = useState<{ index: number; text: string }[]>([]);
+ const cancelled = useRef(false);
+ const runRef = useRef(0);
+
+ useEffect(() => {
+ cancelled.current = false;
+ runRef.current += 1;
+ const myRun = runRef.current;
+ setLines([]);
+ setChoices([]);
+ (async () => {
+ while (!cancelled.current && runRef.current === myRun) {
+ const line = await runtime.nextLine();
+ if (cancelled.current || runRef.current !== myRun) return;
+ if (line === null) break;
+ if (line.trim().length > 0) {
+ setLines((prev) => [...prev, line.trim()]);
+ }
+ }
+ const cs = runtime.currentChoices();
+ if (cs.length > 0) {
+ setChoices(cs);
+ return;
+ }
+ onComplete?.();
+ })();
+ return () => {
+ cancelled.current = true;
+ };
+ }, [runtime, onComplete]);
+
+ const onChoice = (index: number): void => {
+ runtime.chooseChoice(index);
+ setChoices([]);
+ // Re-run the loop to drain post-choice lines.
+ runRef.current += 1;
+ };
+
+ return (
+ runtime.skipDelay()}
+ style={{ cursor: 'pointer', userSelect: 'text' }}
+ >
+ {lines.map((line, i) => (
+
+ {line}
+
+ ))}
+ {choices.length > 0 && (
+
+ {choices.map((c) => (
+ {
+ e.stopPropagation();
+ onChoice(c.index);
+ }}
+ style={{
+ display: 'block',
+ margin: '0.4rem 0',
+ background: 'transparent',
+ color: '#e8e0d0',
+ border: '1px solid #4d4d52',
+ padding: '0.4rem 0.8rem',
+ cursor: 'pointer',
+ fontFamily: 'serif',
+ textAlign: 'left',
+ }}
+ >
+ {c.text}
+
+ ))}
+
+ )}
+
;
+ /** Are there more lines or choices available? */
+ canContinue(): boolean;
+ /** Current choices, if the story has paused on a choice point. */
+ currentChoices(): { index: number; text: string }[];
+ /** Pick a choice and resume. */
+ chooseChoice(index: number): void;
+ /** Skip the cadence delay on the next line (e.g., player tap-to-advance). */
+ skipDelay(): void;
+}
+
+/**
+ * Cadence baseline. Phase 2 values; tunable in playtest. The actual
+ * delay for a line is `min(MAX_DELAY_MS, DEFAULT_DELAY_MS + line.length * PER_CHAR_MS)`.
+ *
+ * For a typical 80-char line: 1500 + 80*20 = 3100ms (capped at 4000ms).
+ * For a short 10-char line: 1500 + 10*20 = 1700ms.
+ * For a one-word "Oh.": 1500 + 3*20 = 1560ms.
+ *
+ * Documented here so playtesters can adjust without spelunking through
+ * the renderer.
+ */
+export const DEFAULT_DELAY_MS = 1500;
+export const PER_CHAR_MS = 20;
+export const MAX_DELAY_MS = 4000;
+
+export function createInkRuntime(story: Story): InkRuntime {
+ let skipNext = false;
+ return {
+ async nextLine(): Promise {
+ if (!story.canContinue) return null;
+ const line = story.Continue();
+ if (line === null) return null;
+ const delay = skipNext
+ ? 0
+ : Math.min(MAX_DELAY_MS, DEFAULT_DELAY_MS + line.length * PER_CHAR_MS);
+ skipNext = false;
+ if (delay > 0) {
+ await new Promise((resolve) => setTimeout(resolve, delay));
+ }
+ return line;
+ },
+ canContinue(): boolean {
+ return story.canContinue;
+ },
+ currentChoices(): { index: number; text: string }[] {
+ return story.currentChoices.map((c, i) => ({ index: i, text: c.text }));
+ },
+ chooseChoice(index: number): void {
+ story.ChooseChoiceIndex(index);
+ },
+ skipDelay(): void {
+ skipNext = true;
+ },
+ };
+}
diff --git a/src/ui/index.ts b/src/ui/index.ts
index ccb50c2..e27c0b0 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -8,3 +8,4 @@
export * from './begin';
export * from './garden';
export * from './journal';
+export * from './dialogue';