@tapthrough/expo 0.0.0-stage → 0.1.0

package/dist/Popover.js

@@ -0,0 +1,531 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Animated, Linking, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { resetMessage } from './core/feedback.js';
+import { stepTime } from './core/ideas.js';
+import { nextOpenScenario, otherStates, scenarioProgress, setupLineStates, stepId, } from './core/review.js';
+import { useBackPress } from './Overlay.js';
+import { useReduceMotion } from './ui/native.js';
+import { Capsule, CircleButton, Icon, Surface } from './ui/parts.js';
+import { SPRING, text, useColors } from './ui/theme.js';
+/** Scenario reasons are written for the PR comment; drop its code marks here. */
+function plain(text) {
+    return text?.replace(/`([^`]*)`/g, '$1');
+}
+function entryFor(checklist, key) {
+    const scenario = checklist.scenarios.find((s) => s.key === key);
+    if (scenario) {
+        return {
+            key,
+            title: scenario.title,
+            why: plain(scenario.why),
+            setup: scenario.setup,
+            scenario,
+            other: false,
+        };
+    }
+    const state = checklist.library?.find((s) => s.key === key);
+    if (state)
+        return { key, title: state.title, why: plain(state.why), setup: state.setup, other: true };
+    return undefined;
+}
+const navKey = (nav) => nav.view === 'list' || nav.view === 'prs'
+    ? nav.view
+    : nav.view === 'recheck' || nav.view === 'idea'
+        ? `${nav.view}:${nav.id}`
+        : nav.view === 'step'
+            ? `step:${nav.key}:${nav.index}`
+            : `${nav.view}:${nav.key}`;
+/**
+ * The review popover: grows out of the Review button, lists what to test,
+ * sets the app up for a scenario and walks through its steps. The middle
+ * scrolls when it's long; the expand button turns it into a full-height sheet.
+ */
+export function ReviewPopover(props) {
+    const { nav, full, placement, bounds, onNav, onClose } = props;
+    const colors = useColors();
+    const reduceMotion = useReduceMotion();
+    const shown = useRef(new Animated.Value(0)).current;
+    const slide = useRef(new Animated.Value(0)).current;
+    const fade = useRef(new Animated.Value(1)).current;
+    const key = navKey(nav);
+    const firstKey = useRef(key);
+    useEffect(() => {
+        if (reduceMotion) {
+            shown.setValue(1);
+            return;
+        }
+        Animated.spring(shown, { toValue: 1, ...SPRING, useNativeDriver: true }).start();
+    }, [shown, reduceMotion]);
+    // Deeper slides in from the right, back from the left.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: runs when the view changes
+    useEffect(() => {
+        if (key === firstKey.current || reduceMotion)
+            return;
+        firstKey.current = '';
+        slide.setValue(props.direction === 'back' ? -18 : 18);
+        fade.setValue(0);
+        Animated.parallel([
+            Animated.timing(slide, { toValue: 0, duration: 220, useNativeDriver: true }),
+            Animated.timing(fade, { toValue: 1, duration: 180, useNativeDriver: true }),
+        ]).start();
+    }, [key]);
+    useBackPress(() => {
+        if (full)
+            props.onToggleFull();
+        else if (nav.view === 'list' || nav.view === 'setup')
+            onClose();
+        else
+            onNav({ view: 'list' }, 'back');
+    });
+    const view = renderView(props, colors);
+    const frame = full
+        ? { left: 8, right: 8, top: Math.max(bounds.insetTop - 8, 8), bottom: 8 }
+        : {
+            width: placement.width,
+            maxHeight: placement.maxHeight,
+            [placement.side]: placement.inset,
+            ...(placement.vertical === 'above'
+                ? { bottom: placement.offset }
+                : { top: placement.offset }),
+        };
+    return (_jsx(Animated.View, { style: [
+            styles.frame,
+            frame,
+            {
+                // No opacity here: fading a view that holds glass stops the glass rendering.
+                transform: [{ scale: shown.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) }],
+                transformOrigin: `${placement.side} ${placement.vertical === 'above' ? 'bottom' : 'top'}`,
+            },
+        ], accessibilityViewIsModal: full, children: _jsx(Surface, { radius: full ? 38 : 30, style: [styles.surface, full && styles.grow], children: _jsxs(Animated.View, { style: [
+                    styles.column,
+                    full && styles.grow,
+                    { opacity: Animated.multiply(fade, shown), transform: [{ translateX: slide }] },
+                ], children: [_jsxs(View, { style: styles.header, children: [view.back ? (_jsx(CircleButton, { icon: "chevron.left", label: "Back", onPress: () => onNav({ view: 'list' }, 'back') })) : null, _jsxs(View, { style: [styles.headerText, !view.back && styles.headerTextAlone], children: [_jsx(Text, { style: [text.headline, { color: colors.label }], numberOfLines: 2, children: view.title }), view.subtitle ? (_jsx(Text, { style: [text.footnote, { color: colors.secondary }], numberOfLines: 1, children: view.subtitle })) : null] }), _jsx(CircleButton, { icon: full ? 'arrow.down.right.and.arrow.up.left' : 'arrow.up.left.and.arrow.down.right', label: full ? 'Shrink' : 'Expand to full screen', onPress: props.onToggleFull }), full ? _jsx(CircleButton, { icon: "xmark", label: "Close", onPress: onClose }) : null] }), _jsxs(ScrollView, { style: full ? styles.grow : styles.scroll, contentContainerStyle: styles.body, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: true, children: [view.body, props.error ? (_jsx(Text, { style: [text.footnote, { color: colors.fail }], accessibilityRole: "alert", children: props.error })) : null] }), view.footer ? (_jsx(View, { style: [styles.footer, full && styles.footerFull], children: view.footer })) : null] }) }) }));
+}
+function renderView(p, colors) {
+    const { nav, checklist } = p;
+    if (nav.view === 'list')
+        return listView(p, colors);
+    if (nav.view === 'prs')
+        return prsView(p, colors);
+    if (nav.view === 'idea') {
+        const idea = p.ideas.find((i) => i.id === nav.id);
+        return idea ? ideaView(p, idea, colors) : listView(p, colors);
+    }
+    if (nav.view === 'recheck') {
+        const item = checklist.recheck?.find((r) => r.id === nav.id);
+        return item ? recheckView(p, item, colors) : listView(p, colors);
+    }
+    const entry = entryFor(checklist, nav.key);
+    if (!entry)
+        return listView(p, colors);
+    switch (nav.view) {
+        case 'brief':
+            return briefView(p, entry, colors);
+        case 'setup':
+            return setupView(p, entry, colors);
+        case 'step':
+            return entry.scenario
+                ? stepView(p, entry, entry.scenario, nav.index, colors)
+                : listView(p, colors);
+        case 'done':
+            return doneView(p, entry, colors);
+        case 'explore':
+            return exploreView(p, entry, colors);
+    }
+}
+/* ---------------------------------- views --------------------------------- */
+function listView(p, colors) {
+    const { checklist, results } = p;
+    const scenarios = checklist.scenarios.filter((s) => s.steps.length > 0);
+    const recheck = checklist.recheck ?? [];
+    const others = otherStates(checklist);
+    const counts = [
+        scenarios.length ? `${scenarios.length} to test` : null,
+        recheck.length ? `${recheck.length} to re-check` : null,
+    ].filter(Boolean);
+    return {
+        title: p.staff ? 'Feedback' : `PR #${checklist.pr}`,
+        subtitle: p.staff ?? (counts.join(' · ') || 'Nothing planned for this PR'),
+        body: (_jsxs(_Fragment, { children: [checklist.newerBuild ? _jsx(NewerRow, { build: checklist.newerBuild, colors: colors }) : null, checklist.reset ? _jsx(ResetRow, { reset: checklist.reset, colors: colors }) : null, recheck.map((item) => {
+                    const done = p.rechecked[item.id] ?? (item.stillBrokenHere ? 'still_broken' : undefined);
+                    return (_jsx(Row, { colors: colors, lead: done ? (_jsx(Mark, { kind: done === 'fixed' ? 'pass' : 'fail', colors: colors })) : (_jsx(Badge, { icon: "arrow.clockwise", colors: colors })), title: `Re-check: ${item.excerpt}`, subtitle: done === 'fixed' ? 'Fixed here' : done ? 'Still broken here' : reportedBy(item), onPress: () => p.onNav({ view: 'recheck', id: item.id }, 'forward') }, item.id));
+                }), scenarios.map((scenario) => {
+                    const progress = scenarioProgress(scenario, results);
+                    return (_jsx(Row, { colors: colors, lead: _jsx(ProgressMark, { progress: progress, colors: colors }), title: scenario.title, subtitle: scenarioSubtitle(scenario, progress, p.canSetUp), onPress: () => p.onNav(openScenario(scenario, results), 'forward') }, scenario.key));
+                }), others.length ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: [text.footnote, styles.section, { color: colors.secondary }], children: "Other states" }), others.map((state) => (_jsx(Row, { colors: colors, lead: _jsx(Badge, { icon: "arrow.right.circle", colors: colors }), title: state.title, subtitle: plain(state.why) ??
+                                (p.canSetUp && state.setup?.length ? 'Sets itself up' : 'Look around'), onPress: () => p.onNav({ view: 'brief', key: state.key }, 'forward') }, state.key)))] })) : null, p.ideas.length ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: [text.footnote, styles.section, { color: colors.secondary }], children: "Ideas" }), p.ideas.slice(0, 5).map((idea) => (_jsx(Row, { colors: colors, lead: _jsx(Badge, { icon: "lightbulb", colors: colors, attention: idea.status === 'needs_answers' ||
+                                    idea.status === 'ready_to_test' ||
+                                    Boolean(idea.warning) }), title: ideaTitle(idea), subtitle: idea.warning
+                                ? `${idea.statusLine} · taking longer than usual`
+                                : idea.status === 'failed' || idea.status === 'not_set_up'
+                                    ? `${idea.statusLine} · tap to see why`
+                                    : idea.statusLine, onPress: () => p.onNav({ view: 'idea', id: idea.id }, 'forward') }, idea.id)))] })) : null, p.staff ? (p.ideas.length ? null : (_jsx(Text, { style: [text.subhead, { color: colors.secondary }], children: "Something wrong? Report it, and it becomes a GitHub issue with a screenshot. Got an idea? Claude writes it up, and can build it." }))) : (_jsx(Row, { colors: colors, lead: _jsx(Badge, { icon: "arrow.triangle.branch", colors: colors }), title: "Switch PR", subtitle: "Open another pull request\u2019s build", onPress: () => {
+                        p.onShowPulls();
+                        p.onNav({ view: 'prs' }, 'forward');
+                    } })), _jsx(ReviewerName, { name: p.name, onChange: p.onNameChange, colors: colors })] })),
+        footer: (_jsxs(View, { style: styles.pair, children: [_jsx(Capsule, { title: "Report Issue", kind: "plain", onPress: p.onReportOther, style: styles.half }), _jsx(Capsule, { title: "Share Idea", kind: "plain", onPress: p.onShareIdea, style: styles.half })] })),
+    };
+}
+function ideaTitle(idea) {
+    if (idea.title)
+        return idea.title;
+    const flat = idea.body.replace(/\s+/g, ' ');
+    return flat.length > 60 ? `${flat.slice(0, 59)}…` : flat;
+}
+function ideaView(p, idea, colors) {
+    const busy = p.ideaBusy === idea.id;
+    const here = idea.prNumber !== null && idea.prNumber === p.checklist.pr;
+    const links = [
+        idea.prUrl ? { title: `PR #${idea.prNumber}`, url: idea.prUrl } : null,
+        idea.issueUrl ? { title: `Issue #${idea.issueNumber}`, url: idea.issueUrl } : null,
+    ].filter((l) => l !== null);
+    let footer = null;
+    if (idea.actions.includes('build')) {
+        footer = (_jsx(Capsule, { title: "Build It", busy: busy, onPress: () => p.onIdeaAction(idea.id, 'build') }));
+    }
+    else if (idea.actions.includes('approve')) {
+        footer = here ? (_jsx(Capsule, { title: "Approve", busy: busy, onPress: () => p.onIdeaAction(idea.id, 'approve') })) : (_jsx(Capsule, { title: "Open Build to Test", onPress: () => {
+                const pr = p.pulls?.find((pull) => pull.number === idea.prNumber);
+                if (pr?.openUrl)
+                    p.onSwitchPr(pr);
+                else if (idea.previewUrl)
+                    Linking.openURL(idea.previewUrl);
+            } }));
+    }
+    else if (idea.actions.includes('retry')) {
+        footer = (_jsx(Capsule, { title: "Try Again", kind: "plain", busy: busy, onPress: () => p.onIdeaAction(idea.id, 'retry') }));
+    }
+    return {
+        title: ideaTitle(idea),
+        subtitle: idea.statusLine,
+        back: true,
+        body: (_jsxs(_Fragment, { children: [idea.summary ? (_jsx(Text, { style: [text.subhead, { color: colors.label }], children: idea.summary })) : (_jsxs(Text, { style: [text.subhead, { color: colors.label }], children: ["\u201C", idea.body, "\u201D"] })), idea.warning ? (_jsxs(View, { style: [styles.newer, { backgroundColor: colors.fill }], children: [_jsx(Icon, { name: "flag.fill", size: 16, color: colors.fail }), _jsxs(View, { style: styles.rowText, children: [_jsx(Text, { style: [text.footnote, { color: colors.label }], children: idea.warning }), _jsx(LinkRow, { links: [
+                                        idea.runUrl ? { title: 'View Run', url: idea.runUrl } : null,
+                                        idea.actionsUrl ? { title: 'Open Actions', url: idea.actionsUrl } : null,
+                                    ], colors: colors })] })] })) : null, idea.stages?.length ? (_jsx(Timeline, { stages: idea.stages, colors: colors })) : idea.note ? (_jsx(Text, { style: [text.footnote, { color: colors.secondary }], children: idea.note })) : null, !idea.stages?.length && (idea.status === 'grooming' || idea.status === 'building') ? (_jsxs(View, { style: styles.pair, children: [_jsx(ActivityIndicator, { color: colors.secondary }), _jsx(Text, { style: [text.footnote, styles.rowText, { color: colors.secondary }], children: idea.status === 'grooming'
+                                ? 'Claude is reading the code and writing it up. This takes a minute or two.'
+                                : 'Claude is building it. You’ll get a build to test when the PR’s preview is ready.' })] })) : null, idea.actions.includes('answer') ? (_jsx(IdeaAnswers, { questions: idea.questions, busy: busy, onSend: (answers) => p.onAnswerIdea(idea.id, answers), colors: colors }, idea.id)) : null, idea.steps.length && idea.status !== 'needs_answers' ? (_jsx(Section, { title: "How to test it", colors: colors, children: _jsx(Numbered, { items: idea.steps.map((s) => ({ title: s.action, detail: s.expect })), colors: colors }) })) : null, idea.actions.includes('approve') ? (_jsx(Text, { style: [text.footnote, { color: colors.secondary }], children: here
+                        ? 'You’re on this idea’s build. Try the steps; if it’s right, approve it.'
+                        : 'Open its build, try the steps, then approve it from there.' })) : null, _jsx(LinkRow, { links: [
+                        ...links,
+                        idea.runUrl && !idea.warning ? { title: 'Workflow Run', url: idea.runUrl } : null,
+                    ], colors: colors })] })),
+        footer,
+    };
+}
+/** Small text links in a row, e.g. the issue, the PR and the workflow run. */
+function LinkRow({ links, colors, }) {
+    const shown = links.filter((l) => l !== null);
+    if (!shown.length)
+        return null;
+    return (_jsx(View, { style: styles.links, children: shown.map((link) => (_jsx(Pressable, { onPress: () => Linking.openURL(link.url), accessibilityRole: "link", hitSlop: 8, children: _jsx(Text, { style: [text.footnote, styles.rowTitle, { color: colors.tint }], children: link.title }) }, link.url))) }));
+}
+/**
+ * Every step from sent to merged with its state, so it's always clear whether
+ * the idea reached GitHub, what's running now, and where it stopped.
+ */
+function Timeline({ stages, colors }) {
+    return (_jsx(View, { style: styles.timeline, accessibilityRole: "list", children: stages.map((stage, i) => {
+            const time = stage.state === 'done' ? stepTime(stage.at) : null;
+            const last = i === stages.length - 1;
+            return (_jsxs(View, { style: styles.stage, accessible: true, accessibilityLabel: `${stage.title}: ${STATE_LABEL[stage.state]}${stage.detail ? `. ${stage.detail}` : ''}`, children: [_jsxs(View, { style: styles.stageRail, children: [_jsx(StageMark, { state: stage.state, colors: colors }), last ? null : (_jsx(View, { style: [
+                                    styles.stageLine,
+                                    { backgroundColor: stage.state === 'done' ? colors.pass : colors.separator },
+                                ] }))] }), _jsxs(View, { style: [styles.rowText, !last && styles.stageGap], children: [_jsxs(View, { style: styles.stageHead, children: [_jsx(Text, { style: [
+                                            text.subhead,
+                                            stage.state === 'waiting' ? null : styles.rowTitle,
+                                            { color: stage.state === 'waiting' ? colors.secondary : colors.label },
+                                        ], children: stage.title }), time ? (_jsx(Text, { style: [text.footnote, { color: colors.secondary }], children: time })) : null] }), stage.detail ? (_jsx(Text, { style: [
+                                    text.footnote,
+                                    { color: stage.state === 'failed' ? colors.fail : colors.secondary },
+                                ], children: stage.detail })) : null] })] }, stage.key));
+        }) }));
+}
+const STATE_LABEL = {
+    done: 'done',
+    active: 'in progress',
+    waiting: 'not started',
+    failed: 'stopped',
+};
+function StageMark({ state, colors }) {
+    if (state === 'done')
+        return _jsx(Mark, { kind: "pass", colors: colors, size: 20 });
+    if (state === 'failed')
+        return _jsx(Mark, { kind: "fail", colors: colors, size: 20 });
+    if (state === 'active') {
+        return (_jsx(View, { style: styles.stageDot, children: _jsx(ActivityIndicator, { size: "small", color: colors.tint }) }));
+    }
+    return _jsx(View, { style: [styles.stageDot, styles.stageHollow, { borderColor: colors.separator }] });
+}
+/** One field per question; sending is enabled once every question has an answer. */
+function IdeaAnswers({ questions, busy, onSend, colors, }) {
+    const [answers, setAnswers] = useState(() => questions.map(() => ''));
+    const ready = answers.every((a) => a.trim() !== '');
+    return (_jsxs(View, { style: styles.sectionBlock, children: [questions.map((question, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: questions are fixed for the round
+            _jsxs(View, { style: styles.question, children: [_jsx(Text, { style: [text.subhead, styles.rowTitle, { color: colors.label }], children: question }), _jsx(TextInput, { value: answers[i], onChangeText: (value) => setAnswers((current) => current.map((a, j) => (j === i ? value : a))), placeholder: "Your answer", placeholderTextColor: colors.secondary, multiline: true, style: [
+                            text.subhead,
+                            styles.nameInput,
+                            { color: colors.label, backgroundColor: colors.fill },
+                        ], accessibilityLabel: question })] }, i))), _jsx(Capsule, { title: "Send Answers", busy: busy, disabled: !ready, onPress: () => onSend(answers.map((a) => a.trim())) })] }));
+}
+function prsView(p, colors) {
+    const { pulls } = p;
+    return {
+        title: 'Switch PR',
+        subtitle: pulls ? `${pulls.length} open with a preview` : 'Loading…',
+        back: true,
+        body: !pulls ? (_jsx(ActivityIndicator, { color: colors.secondary })) : pulls.length === 0 ? (_jsx(Text, { style: [text.subhead, { color: colors.secondary }], children: "No other pull requests have a preview yet." })) : (pulls.map((pr) => (_jsx(Row, { colors: colors, lead: pr.current ? (_jsx(Mark, { kind: "pass", colors: colors })) : (_jsx(Badge, { icon: pr.fromIdea ? 'lightbulb' : 'arrow.triangle.branch', colors: colors })), title: `#${pr.number} ${pr.title}`, subtitle: pr.current
+                ? 'Open now'
+                : pr.needsNewBuild
+                    ? 'Changes native code: needs a new build of this app'
+                    : [pr.fromIdea ? 'From an idea' : null, pr.author, pr.draft ? 'Draft' : null]
+                        .filter(Boolean)
+                        .join(' · ') || 'Open its build', onPress: () => {
+                if (pr.current)
+                    p.onNav({ view: 'list' }, 'back');
+                else if (pr.openUrl)
+                    p.onSwitchPr(pr);
+            } }, pr.number)))),
+    };
+}
+/** A scenario not started opens its brief; one in progress opens its next step. */
+function openScenario(scenario, results) {
+    const progress = scenarioProgress(scenario, results);
+    if (progress.checked === 0)
+        return { view: 'brief', key: scenario.key };
+    const open = scenario.steps.findIndex((step) => !results[stepId(scenario.key, step.index)]);
+    return open >= 0
+        ? { view: 'step', key: scenario.key, index: open }
+        : { view: 'done', key: scenario.key };
+}
+function scenarioSubtitle(scenario, progress, canSetUp) {
+    const steps = `${progress.total} step${progress.total === 1 ? '' : 's'}`;
+    if (progress.state === 'new') {
+        if (!scenario.setup?.length)
+            return steps;
+        return `${steps} · ${canSetUp ? 'sets itself up' : 'set up by hand'}`;
+    }
+    if (progress.state === 'partial')
+        return `${progress.checked} of ${progress.total} checked`;
+    if (progress.state === 'failed')
+        return `${progress.failed} failed`;
+    return 'All passed';
+}
+function briefView(p, entry, colors) {
+    const steps = entry.scenario?.steps ?? [];
+    const lines = entry.setup ?? [];
+    const auto = p.canSetUp && lines.length > 0;
+    const manual = !auto && lines.length > 0;
+    return {
+        title: entry.title,
+        subtitle: entry.other
+            ? 'Another state of the app'
+            : `${steps.length} step${steps.length === 1 ? '' : 's'}`,
+        back: true,
+        body: (_jsxs(_Fragment, { children: [entry.why ? (_jsx(Text, { style: [text.subhead, { color: colors.label }], children: entry.why })) : null, auto ? (_jsx(Section, { title: "Tapthrough will", colors: colors, children: lines.map((line) => (_jsx(SetupRow, { line: line, state: "waiting", colors: colors, plain: true }, line.auto))) })) : null, manual ? (_jsx(Section, { title: "Set up by hand", colors: colors, children: _jsx(Numbered, { items: lines.map((line) => ({ title: line.manual })), colors: colors }) })) : null, steps.length ? (_jsx(Section, { title: "You\u2019ll check", colors: colors, children: _jsx(Numbered, { items: steps.map((s) => ({ title: s.action, detail: s.expect })), colors: colors }) })) : null, auto ? (_jsx(Text, { style: [text.caption, { color: colors.secondary }], children: "This replaces the app\u2019s local data and signs out whoever is signed in." })) : null] })),
+        footer: auto ? (_jsxs(_Fragment, { children: [_jsx(Capsule, { title: entry.other ? 'Set Up' : 'Set Up and Start', onPress: () => p.onSetUp(entry.key) }), _jsx(Capsule, { title: "Skip Setup", kind: "plain", onPress: () => p.onStart(entry.key) })] })) : (_jsx(Capsule, { title: manual ? 'I’m Ready' : entry.other ? 'Look Around' : 'Start', onPress: () => p.onStart(entry.key) })),
+    };
+}
+function setupView(p, entry, colors) {
+    const lines = entry.setup ?? [];
+    const setup = p.setup?.key === entry.key ? p.setup : null;
+    const error = setup?.error;
+    const states = setupLineStates(lines, setup?.progress ?? 'requesting');
+    return {
+        title: error ? 'Couldn’t set up' : 'Setting up',
+        subtitle: entry.title,
+        back: Boolean(error),
+        body: (_jsxs(_Fragment, { children: [lines.map((line, i) => (_jsx(SetupRow, { line: line, state: error ? 'waiting' : (states[i] ?? 'waiting'), colors: colors }, line.auto))), error ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: [text.subhead, { color: colors.fail }], accessibilityRole: "alert", children: error }), _jsx(Section, { title: "Or set it up by hand", colors: colors, children: _jsx(Numbered, { items: lines.map((line) => ({ title: line.manual })), colors: colors }) })] })) : null] })),
+        footer: error ? (_jsxs(_Fragment, { children: [_jsx(Capsule, { title: "Try Again", onPress: () => p.onSetUp(entry.key) }), _jsx(Capsule, { title: "Continue Without Setup", kind: "plain", onPress: () => p.onStart(entry.key) })] })) : undefined,
+    };
+}
+function stepView(p, entry, scenario, index, colors) {
+    const step = scenario.steps[index];
+    if (!step)
+        return listView(p, colors);
+    const result = p.results[stepId(scenario.key, step.index)];
+    return {
+        title: entry.title,
+        subtitle: `Step ${index + 1} of ${scenario.steps.length}`,
+        back: true,
+        body: (_jsxs(_Fragment, { children: [_jsx(Text, { style: [text.headline, { color: colors.label }], children: step.action }), _jsxs(Text, { style: [text.subhead, { color: colors.secondary }], children: ["Expect: ", step.expect] }), step.result?.carriedFrom && result === step.result.result ? (_jsx(Text, { style: [text.footnote, { color: colors.secondary }], children: `${step.result.result === 'pass' ? 'Passed' : step.result.result === 'fail' ? 'Failed' : 'Skipped'} on ${step.result.carriedFrom.slice(0, 7)}. Kept because later pushes didn’t change this screen.` })) : null] })),
+        footer: (_jsxs(View, { style: styles.pair, children: [_jsx(Capsule, { title: "Fail", kind: "gray", icon: "xmark", iconColor: colors.fail, fillColor: result === 'fail' ? colors.fail : undefined, accessibilityLabel: `Fail: ${step.action}`, onPress: () => p.onFail(scenario.key, index), style: styles.half }), _jsx(Capsule, { title: "Pass", kind: "gray", icon: "checkmark", iconColor: colors.pass, fillColor: result === 'pass' ? colors.pass : undefined, accessibilityLabel: `Pass: ${step.action}`, onPress: () => p.onPass(scenario.key, index), style: styles.half })] })),
+    };
+}
+function recheckView(p, item, colors) {
+    const done = p.rechecked[item.id] ?? (item.stillBrokenHere ? 'still_broken' : undefined);
+    return {
+        title: 'Re-check',
+        subtitle: reportedBy(item),
+        back: true,
+        body: (_jsxs(_Fragment, { children: [_jsx(Text, { style: [text.headline, { color: colors.label }], children: item.excerpt }), _jsx(Text, { style: [text.subhead, { color: colors.secondary }], children: "Try it again on this build. Is it fixed?" })] })),
+        footer: (_jsxs(View, { style: styles.pair, children: [_jsx(Capsule, { title: "Still Broken", kind: "gray", icon: "xmark", iconColor: colors.fail, fillColor: done === 'still_broken' ? colors.fail : undefined, onPress: () => p.onRecheck(item, 'still_broken'), style: styles.half }), _jsx(Capsule, { title: "Fixed", kind: "gray", icon: "checkmark", iconColor: colors.pass, fillColor: done === 'fixed' ? colors.pass : undefined, onPress: () => p.onRecheck(item, 'fixed'), style: styles.half })] })),
+    };
+}
+function doneView(p, entry, colors) {
+    const progress = entry.scenario ? scenarioProgress(entry.scenario, p.results) : null;
+    const next = nextOpenScenario(p.checklist, p.results, entry.key);
+    return {
+        title: entry.title,
+        subtitle: 'Checked',
+        back: true,
+        body: (_jsxs(View, { style: styles.done, children: [_jsx(Mark, { kind: progress?.failed ? 'fail' : 'pass', colors: colors, size: 52 }), _jsx(Text, { style: [text.title2, { color: colors.label }], children: progress?.failed ? `${progress.failed} failed` : 'All passed' }), progress ? (_jsx(Text, { style: [text.subhead, { color: colors.secondary }], children: `${progress.passed} of ${progress.total} passed` })) : null] })),
+        footer: (_jsxs(_Fragment, { children: [next ? (_jsx(Capsule, { title: `Next: ${next.title}`, onPress: () => p.onNav(openScenario(next, p.results), 'forward') })) : (_jsx(Capsule, { title: "All Done", onPress: p.onClose })), _jsx(Capsule, { title: "Back to List", kind: "plain", onPress: () => p.onNav({ view: 'list' }, 'back') })] })),
+    };
+}
+function exploreView(p, entry, colors) {
+    return {
+        title: entry.title,
+        subtitle: 'Ready to look around',
+        back: true,
+        body: (_jsx(Text, { style: [text.subhead, { color: colors.label }], children: "The app is in this state now. Look around, and report anything that seems off." })),
+        footer: (_jsxs(_Fragment, { children: [_jsx(Capsule, { title: "Report Something", onPress: p.onReportOther }), _jsx(Capsule, { title: "Back to List", kind: "plain", onPress: () => p.onNav({ view: 'list' }, 'back') })] })),
+    };
+}
+/* --------------------------------- pieces --------------------------------- */
+function reportedBy(item) {
+    return [item.reporter, `reported on ${item.sha.slice(0, 7)}`].filter(Boolean).join(' · ');
+}
+function Row({ lead, title, subtitle, onPress, colors, }) {
+    return (_jsxs(Pressable, { onPress: onPress, accessibilityRole: "button", accessibilityLabel: `${title}. ${subtitle}`, style: ({ pressed }) => [styles.row, pressed && { backgroundColor: colors.fill }], children: [lead, _jsxs(View, { style: styles.rowText, children: [_jsx(Text, { style: [text.subhead, styles.rowTitle, { color: colors.label }], numberOfLines: 2, children: title }), _jsx(Text, { style: [text.footnote, { color: colors.secondary }], numberOfLines: 1, children: subtitle })] }), _jsx(Icon, { name: "chevron.right", size: 13, color: colors.tertiary })] }));
+}
+function ResetRow({ reset, colors }) {
+    return (_jsxs(View, { style: [styles.newer, { backgroundColor: colors.fill }], children: [_jsx(Icon, { name: "arrow.clockwise", size: 20, color: colors.secondary }), _jsxs(View, { style: styles.rowText, children: [_jsx(Text, { style: [text.subhead, styles.rowTitle, { color: colors.label }], children: "Checklist reset for this build" }), _jsx(Text, { style: [text.footnote, { color: colors.secondary }], children: resetMessage(reset) })] })] }));
+}
+function NewerRow({ build, colors }) {
+    return (_jsxs(View, { style: [styles.newer, { backgroundColor: colors.fill }], children: [_jsx(Icon, { name: "arrow.down.circle.fill", size: 26, color: colors.tint }), _jsxs(View, { style: styles.rowText, children: [_jsx(Text, { style: [text.subhead, styles.rowTitle, { color: colors.label }], children: build.hasFix ? 'Claude pushed a fix' : 'A newer build is ready' }), _jsx(Text, { style: [text.footnote, { color: colors.secondary }], children: `${build.sha.slice(0, 7)} · you’re on an older build` })] }), build.openUrl ? (_jsx(Pressable, { onPress: () => Linking.openURL(build.openUrl), accessibilityRole: "link", accessibilityLabel: "Open the newer build", style: ({ pressed }) => [
+                    styles.pill,
+                    { backgroundColor: colors.tintFill },
+                    pressed && styles.pressed,
+                ], children: _jsx(Text, { style: [text.subhead, styles.rowTitle, { color: colors.tint }], children: "Open" }) })) : null] }));
+}
+function Mark({ kind, colors, size = 26, }) {
+    return (_jsx(View, { style: [
+            styles.mark,
+            { width: size, height: size, borderRadius: size / 2 },
+            { backgroundColor: kind === 'pass' ? colors.pass : colors.fail },
+        ], children: _jsx(Icon, { name: kind === 'pass' ? 'checkmark' : 'xmark', size: size * 0.45, color: "#FFFFFF", weight: "bold" }) }));
+}
+function Badge({ icon, colors, attention = false, }) {
+    return (_jsxs(View, { style: [styles.mark, { backgroundColor: colors.tintFill }], children: [_jsx(Icon, { name: icon, size: 13, color: colors.tint }), attention ? _jsx(View, { style: styles.attention }) : null] }));
+}
+function ProgressMark({ progress, colors }) {
+    if (progress.state === 'passed')
+        return _jsx(Mark, { kind: "pass", colors: colors });
+    if (progress.state === 'failed')
+        return _jsx(Mark, { kind: "fail", colors: colors });
+    const started = progress.state === 'partial';
+    return (_jsx(View, { style: [styles.mark, styles.ring, { borderColor: started ? colors.tint : colors.tertiary }], children: started ? (_jsx(Text, { style: [styles.ringText, { color: colors.tint }], allowFontScaling: false, children: progress.checked })) : null }));
+}
+const LINE_ICON = {
+    account: 'person.fill',
+    data: 'tray.full.fill',
+    flag: 'flag.fill',
+    screen: 'arrow.right',
+};
+function SetupRow({ line, state, colors, plain = false, }) {
+    return (_jsxs(View, { style: [styles.setupRow, !plain && state === 'waiting' && styles.waiting], children: [_jsx(View, { style: [
+                    styles.mark,
+                    {
+                        backgroundColor: !plain && state === 'done' ? colors.pass : plain ? colors.tintFill : colors.fill,
+                    },
+                ], children: !plain && state === 'active' ? (_jsx(ActivityIndicator, { size: "small" })) : !plain && state === 'done' ? (_jsx(Icon, { name: "checkmark", size: 12, color: "#FFFFFF", weight: "bold" })) : (_jsx(Icon, { name: LINE_ICON[line.kind], size: 12, color: plain ? colors.tint : colors.secondary })) }), _jsx(Text, { style: [text.subhead, styles.rowText, { color: colors.label }], children: line.auto })] }));
+}
+function Section({ title, colors, children, }) {
+    return (_jsxs(View, { style: styles.sectionBlock, children: [_jsx(Text, { style: [text.footnote, styles.sectionTitle, { color: colors.secondary }], children: title }), children] }));
+}
+function Numbered({ items, colors, }) {
+    return (_jsx(View, { style: styles.numbered, children: items.map((item, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: a fixed list; the number is part of the content
+        _jsxs(View, { style: styles.numberedRow, children: [_jsx(Text, { style: [text.subhead, styles.number, { color: colors.secondary }], children: `${i + 1}.` }), _jsxs(View, { style: styles.rowText, children: [_jsx(Text, { style: [text.subhead, { color: colors.label }], children: item.title }), item.detail ? (_jsx(Text, { style: [text.footnote, { color: colors.secondary }], children: item.detail })) : null] })] }, `${i}:${item.title}`))) }));
+}
+/** Who's reviewing: a slim line once known, a field until then. Shown on the PR. */
+export function ReviewerName({ name, onChange, colors, }) {
+    const [editing, setEditing] = useState(name.trim() === '');
+    if (!editing) {
+        return (_jsxs(View, { style: styles.nameRow, children: [_jsxs(Text, { style: [text.footnote, { color: colors.secondary }], children: ["Reviewing as ", _jsx(Text, { style: { color: colors.label, fontWeight: '600' }, children: name.trim() })] }), _jsx(Pressable, { onPress: () => setEditing(true), accessibilityRole: "button", hitSlop: 12, children: _jsx(Text, { style: [text.footnote, styles.rowTitle, { color: colors.tint }], children: "Change" }) })] }));
+    }
+    return (_jsx(TextInput, { value: name, onChangeText: onChange, onBlur: () => setEditing(name.trim() === ''), placeholder: "Your name (shown on the PR)", placeholderTextColor: colors.secondary, autoCapitalize: "words", returnKeyType: "done", style: [
+            text.subhead,
+            styles.nameInput,
+            { color: colors.label, backgroundColor: colors.fill },
+        ], accessibilityLabel: "Your name" }));
+}
+const styles = StyleSheet.create({
+    frame: { position: 'absolute' },
+    surface: { padding: 8, flexShrink: 1 },
+    grow: { flex: 1 },
+    column: { flexShrink: 1 },
+    header: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingBottom: 6 },
+    headerText: { flex: 1, minWidth: 0 },
+    headerTextAlone: { paddingLeft: 10 },
+    scroll: { flexGrow: 0, flexShrink: 1 },
+    body: { paddingHorizontal: 10, paddingTop: 4, paddingBottom: 10, gap: 10 },
+    footer: { gap: 2, paddingTop: 4 },
+    footerFull: { paddingBottom: 18 },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        paddingVertical: 9,
+        paddingHorizontal: 10,
+        marginHorizontal: -10,
+        borderRadius: 22,
+    },
+    rowText: { flex: 1, minWidth: 0 },
+    rowTitle: { fontWeight: '600' },
+    section: { fontWeight: '600', marginTop: 8 },
+    sectionBlock: { gap: 8, marginTop: 4 },
+    sectionTitle: { fontWeight: '600' },
+    newer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        padding: 10,
+        borderRadius: 22,
+        marginHorizontal: -4,
+    },
+    pill: { paddingVertical: 6, paddingHorizontal: 16, borderRadius: 999 },
+    pressed: { opacity: 0.7 },
+    mark: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },
+    ring: { borderWidth: 2, backgroundColor: 'transparent' },
+    ringText: { fontSize: 11, fontWeight: '700' },
+    setupRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+    waiting: { opacity: 0.45 },
+    numbered: { gap: 8 },
+    numberedRow: { flexDirection: 'row', gap: 8 },
+    number: { width: 20, fontWeight: '600', fontVariant: ['tabular-nums'] },
+    pair: { flexDirection: 'row', gap: 8 },
+    half: { flex: 1 },
+    done: { alignItems: 'center', gap: 4, paddingVertical: 10 },
+    nameRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginTop: 6,
+    },
+    nameInput: { borderRadius: 14, paddingHorizontal: 12, paddingVertical: 10, marginTop: 6 },
+    question: { gap: 2 },
+    links: { flexDirection: 'row', flexWrap: 'wrap', gap: 14, marginTop: 4 },
+    timeline: { marginTop: 2 },
+    stage: { flexDirection: 'row', gap: 10 },
+    stageRail: { width: 20, alignItems: 'center' },
+    stageLine: { width: 2, flex: 1, marginVertical: 2, borderRadius: 1 },
+    stageGap: { paddingBottom: 12 },
+    stageHead: { flexDirection: 'row', justifyContent: 'space-between', gap: 8 },
+    stageDot: { width: 20, height: 20, alignItems: 'center', justifyContent: 'center' },
+    stageHollow: { borderWidth: 2, borderRadius: 10, width: 16, height: 16, margin: 2 },
+    attention: {
+        position: 'absolute',
+        top: -1,
+        right: -1,
+        width: 9,
+        height: 9,
+        borderRadius: 5,
+        backgroundColor: '#ecd88e',
+    },
+});
+//# sourceMappingURL=Popover.js.map