@khorsheed/dsh-library 0.0.0-stage → 0.1.0

package/lib/types/client/views/cards.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 知识卡片: the project's cards — what the learner marked, asked about and
+ * missed — filtered by where they came from, searchable with the same
+ * matcher the coach uses, each card showing its sentence, its sources, how
+ * weak it is and where its review stands.
+ *
+ * @module @khorsheed/dsh-library/client/views/cards
+ */
+import { type ReactNode } from 'react';
+import type { LibraryCardFilter } from '../store.ts';
+import { type ViewProps } from '../ui.tsx';
+/** The project's knowledge cards. */
+export declare function CardsView({ p, projectId, filter }: ViewProps & {
+    projectId: string;
+    filter: LibraryCardFilter;
+}): ReactNode;
+//# sourceMappingURL=cards.d.ts.map

package/lib/types/client/views/cards.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 知识卡片: the project's cards — what the learner marked, asked about and
+ * missed — filtered by where they came from, searchable with the same
+ * matcher the coach uses, each card showing its sentence, its sources, how
+ * weak it is and where its review stands.
+ *
+ * @module @khorsheed/dsh-library/client/views/cards
+ */
+import { useState } from 'react';
+import { ChipRow, PanelHeader } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { IconSearchOutlineMedium, IconSparkleMedium } from "../icons.js";
+import { BoxDots, daysUntil, Highlight, outcome, shortGloss, StateLine, useLoad, value, WeaknessBars } from "../ui.js";
+import { MathText } from "../math.js";
+import css from '../LibraryPane.module.css';
+const FILTERS = ['all', 'photo', 'chat', 'quiz', 'due'];
+/** The project's knowledge cards. */
+export function CardsView({ p, projectId, filter }) {
+    const { t, actions, useStore } = p;
+    const rev = useStore(s => s.rev);
+    const [searching, setSearching] = useState(false);
+    const [query, setQuery] = useState('');
+    const [open, setOpen] = useState();
+    const project = useLoad(() => outcome(p.getProject(projectId)), [projectId, rev]);
+    const cards = useLoad(() => value(p.listCards({
+        projectId,
+        ...(filter === 'due' ? { due: true, sort: 'due' } : {}),
+        ...(filter === 'photo' || filter === 'chat' || filter === 'quiz' ? { source: filter } : {}),
+        ...(filter === 'all' ? { sort: 'recent' } : {}),
+        ...(query.trim() === '' ? {} : { query }),
+    })), [projectId, filter, query, rev]);
+    const resources = new Map((project.data?.resources ?? []).map(resource => [resource.id, resource.title]));
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: t('cards.title'), meta: cards.data === undefined ? undefined : String(cards.data.total), onBack: () => { actions.pop(); }, backLabel: t('action.back'), actions: [
+                    { id: 'search', label: t('cards.search'), icon: _jsx(IconSearchOutlineMedium, {}), pressed: searching, onSelect: () => { setSearching(!searching); setQuery(''); } },
+                    { id: 'review', label: t('review.start'), icon: _jsx(IconSparkleMedium, {}), onSelect: () => { actions.push({ view: 'review', projectId }); } },
+                ], moreLabel: t('action.more') }), searching
+                ? (_jsx("div", { className: css.searchRow, children: _jsx("input", { className: css.input, autoFocus: true, value: query, placeholder: t('cards.searchPlaceholder'), onChange: event => { setQuery(event.target.value); } }) }))
+                : (_jsx(ChipRow, { label: t('cards.filters'), chips: FILTERS.map(id => ({ id, label: t(`cards.filter.${id}`) })), value: filter, onSelect: next => { actions.replace({ view: 'cards', projectId, filter: next }); } })), _jsxs("div", { className: css.body, children: [_jsx(StateLine, { loaded: cards, t: t }), cards.data !== undefined && cards.data.cards.length === 0 && _jsx("div", { className: css.muted, children: t('cards.empty') }), _jsx("div", { className: css.cardList, children: (cards.data?.cards ?? []).map(card => (_jsx(CardRow, { p: p, projectId: projectId, card: card, bookTitle: card.resourceId === undefined ? undefined : resources.get(card.resourceId), open: open === card.id, onToggle: () => { setOpen(open === card.id ? undefined : card.id); } }, card.id))) })] })] }));
+}
+/** One card; tapping opens its sentences, sources and actions. */
+function CardRow({ p, projectId, card, bookTitle, open, onToggle }) {
+    const { t, actions } = p;
+    const [notice, setNotice] = useState();
+    const due = daysUntil(card.mastery.dueAt);
+    const [busy, setBusy] = useState(false);
+    const setStatus = (status) => {
+        if (busy)
+            return;
+        setBusy(true);
+        void outcome(p.editCard(projectId, card.id, { status })).then(() => { actions.refresh(); }, (failure) => { setNotice(String(failure)); setBusy(false); });
+    };
+    return (_jsxs("article", { className: css.cardRow, "data-open": open ? 'true' : 'false', children: [_jsxs("button", { type: "button", className: css.cardMain, onClick: onToggle, "aria-expanded": open, children: [_jsxs("span", { className: css.cardTop, children: [_jsx("span", { className: card.kind === 'word' ? css.term : css.concept, children: _jsx(MathText, { text: card.term }) }), _jsx("span", { className: css.cardGloss, children: _jsx(MathText, { text: shortGloss(card.gloss, 24) }) }), _jsx(WeaknessBars, { weakness: card.weakness, label: t('cards.weakness', { level: String(card.weakness) }) })] }), card.contexts[0] !== undefined && (_jsx("span", { className: css.sentence, children: _jsx(Highlight, { sentence: card.contexts[0].sentence, term: card.term }) })), _jsxs("span", { className: css.chips, children: [_jsx("span", { className: css.chip, children: bookTitle ?? t('cards.projectLevel') }), [...new Set(card.sources.map(source => source.type))].map(type => (_jsx("span", { className: css.chip, "data-tone": type === 'photo' ? 'photo' : type === 'chat' || type === 'quiz' ? 'weak' : undefined, children: t(`source.${type}`) }, type))), _jsx("span", { className: css.chipPlain, children: due === 0 ? t('cards.dueNow') : t('cards.dueIn', { days: String(due) }) })] })] }), open && (_jsxs("div", { className: css.cardMore, children: [_jsx("div", { children: _jsx(MathText, { text: card.gloss }) }), card.userGloss !== undefined && _jsx("div", { children: t('cards.userGloss', { gloss: card.userGloss }) }), card.aliases.length > 0 && _jsx("div", { className: css.muted, children: t('cards.aliases', { aliases: card.aliases.join('、') }) }), card.contexts.slice(1).map(context => (_jsx("div", { className: css.sentence, children: _jsx(Highlight, { sentence: context.sentence, term: card.term }) }, context.sentence))), _jsx("ul", { className: css.sources, children: card.sources.slice(-5).map(source => (_jsxs("li", { children: [t(`source.${source.type}`), source.note === undefined ? '' : `：${source.note}`] }, `${source.type}-${source.at}`))) }), _jsx("div", { className: css.row, children: _jsx(BoxDots, { box: card.mastery.box, label: t('cards.box', { box: String(card.mastery.box) }) }) }), _jsxs("div", { className: css.actions, children: [_jsx("button", { type: "button", className: css.secondary, onClick: () => { setNotice(p.primeConversation(t('prime.card', { term: card.term })) ? t('notice.primed') : t('notice.noConversation')); }, children: t('action.askCoach') }), _jsx("button", { type: "button", className: css.ghost, disabled: busy, onClick: () => { setStatus('mastered'); }, children: t('cards.mastered') }), _jsx("button", { type: "button", className: css.danger, disabled: busy, onClick: () => { setStatus('deleted'); }, children: t('cards.delete') })] }), notice !== undefined && _jsx("div", { className: css.notice, children: notice })] }))] }));
+}

package/lib/types/client/views/home.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The sidebar's top screens: 今日 (what to do now — continue learning,
+ * reviews due, the projects, what the coach just noted), the new-project
+ * form, and one project's page: its goal, its textbooks in study order (each
+ * with its own path — the project carries none), the drafts waiting for
+ * 采用, its links. Deleting a project sits in the page's menu and asks
+ * through a dialog that spells out what goes.
+ *
+ * @module @khorsheed/dsh-library/client/views/home
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from '../ui.tsx';
+/**
+ * 今日: the projects first — each card carries its goal, its progress and
+ * where to continue (the newest project's 继续 is the screen's one solid
+ * button) — then the reviews due as one quiet row, then what the coach just
+ * noted (math typeset, one line each).
+ */
+export declare function TodayView({ p }: ViewProps): ReactNode;
+/** 新建项目. */
+export declare function NewProjectView({ p }: ViewProps): ReactNode;
+/** One project: its goal band, continue learning, drafts waiting, its textbooks in study order, its links. */
+export declare function ProjectView({ p, projectId }: ViewProps & {
+    projectId: string;
+}): ReactNode;
+//# sourceMappingURL=home.d.ts.map

package/lib/types/client/views/home.js

@@ -0,0 +1,263 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The sidebar's top screens: 今日 (what to do now — continue learning,
+ * reviews due, the projects, what the coach just noted), the new-project
+ * form, and one project's page: its goal, its textbooks in study order (each
+ * with its own path — the project carries none), the drafts waiting for
+ * 采用, its links. Deleting a project sits in the page's menu and asks
+ * through a dialog that spells out what goes.
+ *
+ * @module @khorsheed/dsh-library/client/views/home
+ */
+import { useState } from 'react';
+import { ChipRow, PanelHeader } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { isThickResource, LIBRARY_COLORS, LIBRARY_ICONS } from "../../types.js";
+import { colorOf, Cover, coverOf, GlyphStrokes, iconOf, ProjectGlyph, Ring } from "../look.js";
+import { QuizRows } from "./book.js";
+import { IconLinkOutlineMedium, IconPlayOutlineMedium, IconPlusOutlineMedium, IconRefreshOutlineMedium, IconSparkleMedium, IconTrashOutlineMedium } from "../icons.js";
+import { IconArticleOutlineMedium, IconCardsOutlineMedium, IconCourseOutlineMedium, IconHardwareOutlineMedium, IconPenOutlineMedium, IconRepoOutlineMedium, IconToolOutlineMedium } from "../icons-local.js";
+import { ConfirmDialog, OriginTag, outcome, Segments, StateLine, useLoad, value, when } from "../ui.js";
+import { splitTitle, stationTitle } from "../titles.js";
+import { MathText } from "../math.js";
+import css from '../LibraryPane.module.css';
+/** A project's textbooks (thick rows), in study order. */
+function textbooksOf(project) {
+    return project.resources.filter(row => row.seq !== undefined || row.roadmap !== undefined || row.hasDraft || row.kind === 'book' || row.kind === 'course');
+}
+/** Where to continue in a project: the first textbook (study order) with a current station. */
+function continueOf(project) {
+    for (const textbook of textbooksOf(project)) {
+        if (textbook.current !== undefined)
+            return { textbook, station: textbook.current };
+    }
+    return undefined;
+}
+/** 「继续学习」: one card that jumps straight into the current station. */
+function ContinueCard({ p, projectId, label, target }) {
+    const { t, actions } = p;
+    return (_jsxs("section", { className: `${css.continue} ${css.projectNext}`, children: [_jsxs("span", { className: css.projectNextText, children: [_jsx("span", { className: css.continueLabel, children: label }), _jsx("span", { className: css.continueTitle, children: stationTitle(target.station.title) }), _jsx("span", { className: css.muted, children: t('continue.where', { seq: String(target.textbook.seq ?? ''), book: splitTitle(target.textbook.title).main }) })] }), _jsx("button", { type: "button", className: css.primary, onClick: () => { actions.push({ view: 'node', projectId, resourceId: target.textbook.id, nodeId: target.station.id, tab: 'guide' }); }, children: t('continue.go') })] }));
+}
+/**
+ * 今日: the projects first — each card carries its goal, its progress and
+ * where to continue (the newest project's 继续 is the screen's one solid
+ * button) — then the reviews due as one quiet row, then what the coach just
+ * noted (math typeset, one line each).
+ */
+export function TodayView({ p }) {
+    const { t, actions, useStore } = p;
+    const rev = useStore(s => s.rev);
+    const projects = useLoad(() => value(p.listProjects()), [rev]);
+    const due = useLoad(() => value(p.dueCards()), [rev]);
+    const records = useLoad(() => value(p.recentRecords()), [rev]);
+    const changes = useLoad(() => value(p.recentChanges()), [rev]);
+    // 「最近的变化」: knowledge points that moved, and (language projects) the words the coach noted — newest first.
+    const feed = [
+        ...(changes.data?.changes ?? []).map(change => ({ kind: 'point', at: change.at, change })),
+        ...(records.data?.records ?? []).filter(record => record.source === 'chat').map(record => ({ kind: 'card', at: record.at, record })),
+    ].sort((a, b) => b.at.localeCompare(a.at)).slice(0, 5);
+    const list = projects.data?.projects ?? [];
+    const dueCards = due.data?.cards ?? [];
+    // 今日复习: every project's open misses (one retake paper across its stations), then the due cards.
+    const retakeRows = list.filter(project => (project.openMisses ?? 0) > 0);
+    const [retaking, setRetaking] = useState();
+    const [retakeError, setRetakeError] = useState();
+    const startRetake = (projectId) => {
+        setRetaking(projectId);
+        setRetakeError(undefined);
+        void outcome(p.createRetake(projectId)).then(created => {
+            actions.push({ view: 'quiz', projectId, quizId: created.assessment.id });
+        }, (failure) => { setRetakeError(failure instanceof Error ? failure.message : String(failure)); }).finally(() => { setRetaking(undefined); });
+    };
+    // Projects come most-recent first: the first one with a current station owns the solid 继续.
+    const leadId = list.find(project => continueOf(project) !== undefined)?.id;
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: t('today.title'), actions: [
+                    { id: 'new', label: t('project.new'), icon: _jsx(IconPlusOutlineMedium, {}), onSelect: () => { actions.push({ view: 'newProject' }); } },
+                    { id: 'refresh', label: t('action.refresh'), icon: _jsx(IconRefreshOutlineMedium, {}), onSelect: () => { actions.refresh(); } },
+                ], moreLabel: t('action.more') }), _jsxs("div", { className: css.body, children: [_jsx(StateLine, { loaded: projects, t: t }), projects.data !== undefined && list.length === 0 && (_jsxs("div", { className: css.empty, children: [_jsx("div", { className: css.emptyTitle, children: t('today.emptyTitle') }), _jsx("div", { className: css.muted, children: t('today.emptyBody') }), _jsx("button", { type: "button", className: css.primary, onClick: () => { actions.push({ view: 'newProject' }); }, children: t('project.new') })] })), list.length > 0 && (_jsxs("section", { className: css.section, children: [_jsxs("div", { className: css.sectionHead, children: [_jsx("h3", { className: css.sectionTitle, children: t('today.projects') }), _jsxs("button", { type: "button", className: css.textButton, onClick: () => { actions.push({ view: 'newProject' }); }, children: ["\uFF0B ", t('project.new')] })] }), _jsx("div", { className: css.projectList, children: list.map(project => _jsx(ProjectCard, { p: p, project: project, lead: project.id === leadId }, project.id)) })] })), (retakeRows.length > 0 || dueCards.length > 0) && (_jsxs("section", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t('today.dueTitle') }), retakeRows.map(project => (_jsxs("div", { className: css.reviewRow, children: [_jsx("span", { className: css.big, children: project.openMisses }), _jsxs("span", { className: css.reviewText, children: [_jsx("span", { children: t('today.retakeLine', { project: project.name }) }), _jsx("span", { className: css.muted, children: t('today.retakeHint') })] }), _jsx("button", { type: "button", className: leadId === undefined && project === retakeRows[0] ? css.primary : css.secondary, disabled: retaking !== undefined, onClick: () => { startRetake(project.id); }, children: t('node.retakeStart') })] }, project.id))), dueCards.length > 0 && (_jsxs("div", { className: css.reviewRow, children: [_jsx("span", { className: css.big, children: dueCards.length }), _jsxs("span", { className: css.reviewText, children: [_jsx("span", { children: t('today.cardsDue') }), _jsx("span", { className: css.muted, children: t('today.dueMinutes', { minutes: String(Math.max(1, Math.round(dueCards.length / 4))) }) })] }), _jsx("button", { type: "button", className: leadId === undefined && retakeRows.length === 0 ? css.primary : css.secondary, onClick: () => { actions.push({ view: 'review' }); }, children: t('today.startReview') })] })), retakeError !== undefined && _jsx("div", { className: css.error, children: retakeError })] })), feed.length > 0 && (_jsxs("section", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t('today.changes') }), _jsx("div", { className: css.recordList, children: feed.map(entry => entry.kind === 'point' ? (_jsxs("button", { type: "button", className: css.record, onClick: () => {
+                                        const { change } = entry;
+                                        if (change.nodeId !== undefined && change.resourceId !== undefined)
+                                            actions.push({ view: 'node', projectId: change.projectId, resourceId: change.resourceId, nodeId: change.nodeId, tab: 'quiz' });
+                                        else
+                                            actions.push({ view: 'project', projectId: change.projectId });
+                                    }, children: [_jsx("span", { className: css.changeDot, "data-state": entry.change.to, "aria-hidden": "true" }), _jsxs("span", { className: css.recordText, children: [_jsx("span", { className: css.recordTitle, children: t(entry.change.to === 'mastered' ? 'today.changeMastered' : entry.change.to === 'weak' ? 'today.changeWeak' : entry.change.to === 'practicing' ? 'today.changePracticing' : 'today.changeUntested', { title: entry.change.title ?? '' }) }), _jsx("span", { className: css.muted, children: [
+                                                        ...((entry.change.count ?? 0) > 0 ? [t('today.changeOpen', { count: String(entry.change.count) })] : []),
+                                                        ...(entry.change.detail === undefined ? [] : [entry.change.detail]),
+                                                        entry.change.projectName,
+                                                        when(entry.change.at, t),
+                                                    ].join(' · ') })] })] }, `${entry.change.projectId}-${entry.change.at}-${entry.change.id ?? ''}`)) : (_jsxs("button", { type: "button", className: css.record, onClick: () => { actions.push({ view: 'cards', projectId: entry.record.projectId, filter: 'chat' }); }, children: [_jsx("span", { className: css.recordIcon, "aria-hidden": "true", children: _jsx(IconSparkleMedium, { size: 14 }) }), _jsxs("span", { className: css.recordText, children: [_jsx("span", { className: css.recordTitle, children: _jsx(MathText, { text: entry.record.title ?? '' }) }), _jsxs("span", { className: css.muted, children: [entry.record.projectName, " \u00B7 ", t('source.chat'), " \u00B7 ", when(entry.record.at, t)] })] })] }, `${entry.record.projectId}-${entry.record.at}`))) })] }))] })] }));
+}
+const TEMPLATES = ['language', 'subject', 'custom'];
+/** 新建项目. */
+export function NewProjectView({ p }) {
+    const { t, actions } = p;
+    const [name, setName] = useState('');
+    const [template, setTemplate] = useState('subject');
+    const [goal, setGoal] = useState('');
+    const [error, setError] = useState();
+    const [busy, setBusy] = useState(false);
+    const submit = async () => {
+        setBusy(true);
+        setError(undefined);
+        try {
+            const created = await outcome(p.createProject({ name, template, ...(goal.trim() === '' ? {} : { goal }) }));
+            actions.replace({ view: 'project', projectId: created.project.id });
+        }
+        catch (failure) {
+            setError(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: t('project.new'), onBack: () => { actions.pop(); }, backLabel: t('action.back'), moreLabel: t('action.more') }), _jsxs("form", { className: css.body, onSubmit: event => { event.preventDefault(); void submit(); }, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: t('project.name') }), _jsx("input", { className: css.input, value: name, placeholder: t('project.namePlaceholder'), onChange: event => { setName(event.target.value); } })] }), _jsxs("div", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: t('project.template') }), _jsx(ChipRow, { label: t('project.template'), chips: TEMPLATES.map(id => ({ id, label: t(`template.${id}`) })), value: template, onSelect: setTemplate }), _jsx("span", { className: css.muted, children: t(`template.${template}.hint`) })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: t('project.goal') }), _jsx("input", { className: css.input, value: goal, placeholder: t('project.goalPlaceholder'), onChange: event => { setGoal(event.target.value); } })] }), error !== undefined && _jsx("div", { className: css.error, children: error }), _jsx("div", { className: css.actions, children: _jsx("button", { type: "submit", className: css.primary, disabled: busy || name.trim() === '', children: t('project.create') }) })] })] }));
+}
+/** Overall progress of a project: done nodes over all nodes of its adopted paths. */
+/** A project's stations, passed and in all, across its textbooks' paths. */
+function stationsOf(project) {
+    return {
+        done: project.resources.reduce((sum, resource) => sum + (resource.roadmap?.done ?? 0), 0),
+        total: project.resources.reduce((sum, resource) => sum + (resource.roadmap?.total ?? 0), 0),
+    };
+}
+function progressOf(project) {
+    const total = project.resources.reduce((sum, resource) => sum + (resource.roadmap?.total ?? 0), 0);
+    const done = project.resources.reduce((sum, resource) => sum + (resource.roadmap?.done ?? 0), 0);
+    return total === 0 ? 0 : Math.round((done / total) * 100);
+}
+/** A project card on 今日: glyph, name, goal, progress — and where to continue, with its own button. */
+function ProjectCard({ p, project, lead }) {
+    const { t, actions } = p;
+    const target = continueOf(project);
+    const textbooks = textbooksOf(project);
+    const drafts = textbooks.filter(row => row.hasDraft).length;
+    const open = () => { actions.push({ view: 'project', projectId: project.id }); };
+    return (_jsxs("article", { className: css.projectCard, "data-color": colorOf(project), children: [_jsxs("button", { type: "button", className: css.projectOpen, onClick: open, children: [_jsxs("span", { className: css.projectTop, children: [_jsx(ProjectGlyph, { icon: iconOf(project) }), _jsxs("span", { className: css.projectText, children: [_jsx("span", { className: css.projectName, children: project.name }), _jsxs("span", { className: css.muted, children: [t(`template.${project.template}`), " \u00B7 ", when(project.lastActiveAt, t)] })] }), _jsx(Ring, { percent: progressOf(project) })] }), project.goal !== undefined && _jsx("span", { className: css.projectGoal, children: project.goal }), _jsxs("span", { className: css.muted, children: [t('project.cardMeta', { books: String(textbooks.length), cards: String(project.cardCount), due: String(project.dueCount) }), drafts > 0 ? ` · ${t('project.draftsWaiting', { count: String(drafts) })}` : ''] })] }), target !== undefined && (_jsxs("div", { className: css.projectNext, children: [_jsxs("span", { className: css.projectNextText, children: [_jsx("span", { className: css.continueLabel, children: t('continue.label') }), _jsx("span", { className: css.continueTitle, children: target.station.title }), _jsx("span", { className: css.muted, children: t('continue.where', { seq: String(target.textbook.seq ?? ''), book: target.textbook.title }) })] }), _jsx("button", { type: "button", className: lead ? css.primary : css.secondary, onClick: () => { actions.push({ view: 'node', projectId: project.id, resourceId: target.textbook.id, nodeId: target.station.id, tab: 'guide' }); }, children: t('continue.go') })] }))] }));
+}
+/** Editing a project in place: name, goal, template, color, icon — saved together (deleting lives in the page menu). */
+function ProjectEditor({ p, project, onDone }) {
+    const { t, actions } = p;
+    const [name, setName] = useState(project.name);
+    const [goal, setGoal] = useState(project.goal ?? '');
+    const [template, setTemplate] = useState(project.template);
+    const [color, setColor] = useState(colorOf(project));
+    const [icon, setIcon] = useState(iconOf(project));
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState();
+    const save = async () => {
+        setBusy(true);
+        setError(undefined);
+        try {
+            await outcome(p.updateProject(project.id, { name: name.trim(), goal: goal.trim(), template, color, icon }));
+            actions.refresh();
+            onDone();
+        }
+        catch (failure) {
+            setError(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("form", { className: css.editor, "data-color": color, onSubmit: event => { event.preventDefault(); void save(); }, children: [_jsxs("span", { className: css.projectTop, children: [_jsx(ProjectGlyph, { icon: icon }), _jsx("span", { className: css.projectText, children: _jsx("span", { className: css.projectName, children: t('project.edit') }) })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: t('project.name') }), _jsx("input", { className: css.input, value: name, onChange: event => { setName(event.target.value); } })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: t('project.goal') }), _jsx("textarea", { className: css.input, rows: 2, value: goal, onChange: event => { setGoal(event.target.value); } })] }), _jsxs("div", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: t('project.template') }), _jsx(ChipRow, { label: t('project.template'), chips: TEMPLATES.map(id => ({ id, label: t(`template.${id}`) })), value: template, onSelect: setTemplate }), template !== project.template && _jsx("span", { className: css.muted, children: t('project.templateChange') })] }), _jsxs("div", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: t('project.style') }), _jsx("span", { className: css.swatches, children: LIBRARY_COLORS.map(entry => (_jsx("button", { type: "button", className: css.swatch, "data-color": entry, "aria-label": entry, "aria-pressed": color === entry, onClick: () => { setColor(entry); } }, entry))) }), _jsx("span", { className: css.swatches, children: LIBRARY_ICONS.map(entry => (_jsx("button", { type: "button", className: css.iconPick, "aria-label": entry, "aria-pressed": icon === entry, onClick: () => { setIcon(entry); }, children: _jsx(GlyphStrokes, { icon: entry }) }, entry))) })] }), error !== undefined && _jsx("div", { className: css.error, children: error }), _jsxs("div", { className: css.actions, children: [_jsx("button", { type: "button", className: css.secondary, onClick: onDone, children: t('action.cancel') }), _jsx("button", { type: "submit", className: css.primary, disabled: busy || name.trim() === '', children: t('action.save') })] })] }));
+}
+/** One project: its goal band, continue learning, drafts waiting, its textbooks in study order, its links. */
+export function ProjectView({ p, projectId }) {
+    const { t, actions, useStore } = p;
+    const rev = useStore(s => s.rev);
+    const loaded = useLoad(() => outcome(p.getProject(projectId)), [projectId, rev]);
+    // Free quizzes hang on no resource and no station — this section is their only entry.
+    const assessments = useLoad(() => value(p.listAssessments(projectId, undefined, undefined, 'quiz')), [projectId, rev]);
+    // The 错题 entry's count and target ride the shared collection (mistakes.ts) — the same rows the station's 章节考 tab lists.
+    const attempts = useLoad(() => value(p.listAttempts(projectId)), [projectId, rev]);
+    const openMisses = loaded.data?.project.openMisses ?? 0;
+    const [notice, setNotice] = useState();
+    const [editing, setEditing] = useState(false);
+    const [goalOpen, setGoalOpen] = useState(false);
+    const [ordering, setOrdering] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState();
+    const project = loaded.data?.project;
+    const resources = loaded.data?.resources ?? [];
+    const thick = resources.filter(isThickResource);
+    const thin = resources.filter(resource => !isThickResource(resource));
+    const rows = thick.map(resource => ({ resource, row: project?.resources.find(candidate => candidate.id === resource.id) }));
+    const drafts = rows.filter(entry => entry.row?.hasDraft === true);
+    const resume = project === undefined ? undefined : continueOf(project);
+    const freeQuizzes = (assessments.data?.assessments ?? []).filter(quiz => quiz.scope.resourceId === undefined && quiz.scope.nodeId === undefined).sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    // The 错题 entry jumps to wherever the newest miss lives: its station's 章节考 tab, else its textbook page.
+    // The 错题 stat: every station's open misses, retaken in one paper (订正不计分).
+    const openMissed = () => {
+        if (busy)
+            return;
+        setBusy(true);
+        void outcome(p.createRetake(projectId)).then(created => {
+            actions.push({ view: 'quiz', projectId, quizId: created.assessment.id });
+        }, (failure) => { setNotice(failure instanceof Error ? failure.message : String(failure)); }).finally(() => { setBusy(false); });
+    };
+    const prime = (key) => {
+        if (project === undefined)
+            return;
+        void p.bindTarget({ projectId });
+        setNotice(p.primeConversation(t(key, { project: project.name })) ? t('notice.primed') : t('notice.noConversation'));
+    };
+    const move = async (resourceId, seq) => {
+        setBusy(true);
+        try {
+            await outcome(p.moveResource(projectId, resourceId, seq));
+            actions.refresh();
+        }
+        catch (failure) {
+            setNotice(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const remove = async () => {
+        setBusy(true);
+        setError(undefined);
+        try {
+            await outcome(p.deleteProject(projectId));
+            setDeleting(false);
+            actions.refresh();
+            actions.pop();
+        }
+        catch (failure) {
+            setError(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: project?.name ?? '', onBack: () => { actions.pop(); }, backLabel: t('action.back'), actions: ordering ? [] : [
+                    { id: 'add', label: t('book.add'), icon: _jsx(IconPlusOutlineMedium, {}), onSelect: () => { prime('prime.addBook'); } },
+                    { id: 'addLink', label: t('resource.add'), icon: _jsx(IconLinkOutlineMedium, {}), onSelect: () => { prime('prime.addResource'); } },
+                    { id: 'cards', label: t('cards.title'), icon: _jsx(IconCardsOutlineMedium, {}), onSelect: () => { actions.push({ view: 'cards', projectId, filter: 'all' }); } },
+                    { id: 'edit', label: t('project.edit'), icon: _jsx(IconPenOutlineMedium, {}), menuOnly: true, onSelect: () => { setEditing(true); } },
+                    ...(thick.length > 1 ? [{ id: 'order', label: t('project.reorder'), icon: _jsx("span", { "aria-hidden": "true", children: "\u21C5" }), menuOnly: true, onSelect: () => { setOrdering(true); } }] : []),
+                    { id: 'bind', label: t('action.bindProject'), icon: _jsx(IconSparkleMedium, {}), menuOnly: true, onSelect: () => { void p.bindTarget({ projectId }).then(() => { setNotice(t('notice.bound')); }); } },
+                    { id: 'delete', label: t('project.delete'), icon: _jsx(IconTrashOutlineMedium, {}), menuOnly: true, onSelect: () => { setError(undefined); setDeleting(true); } },
+                ], moreLabel: t('action.more') }), project !== undefined && editing && (_jsx(ProjectEditor, { p: p, project: project, onDone: () => { setEditing(false); } })), project !== undefined && !editing && !ordering && (_jsxs("section", { className: css.band, "data-color": colorOf(project), children: [_jsxs("span", { className: css.projectTop, children: [_jsx(ProjectGlyph, { icon: iconOf(project) }), _jsxs("span", { className: css.projectText, children: [project.goal !== undefined && _jsx("span", { className: css.bandGoal, "data-open": goalOpen ? 'true' : undefined, children: project.goal }), _jsxs("span", { className: css.bandMeta, children: [_jsxs("span", { children: [t(`template.${project.template}`), " \u00B7 ", when(project.lastActiveAt, t)] }), project.goal !== undefined && project.goal.length > 60 && _jsx("button", { type: "button", className: css.textButton, "aria-expanded": goalOpen, onClick: () => { setGoalOpen(open => !open); }, children: t(goalOpen ? 'project.goalLess' : 'project.goalMore') })] })] }), _jsx(Ring, { percent: progressOf(project), label: t('project.ringLabel'), title: t('project.ringTitle', { done: String(stationsOf(project).done), total: String(stationsOf(project).total) }) })] }), _jsxs("span", { className: css.statTiles, children: [_jsxs("button", { type: "button", className: css.statTile, onClick: () => { actions.push({ view: 'cards', projectId, filter: 'all' }); }, children: [_jsx("b", { children: project.cardCount }), _jsx("span", { children: t('cards.title') })] }), _jsxs("button", { type: "button", className: css.statTile, disabled: project.dueCount === 0, onClick: () => { actions.push({ view: 'review', projectId }); }, children: [_jsx("b", { children: project.dueCount }), _jsx("span", { children: t('review.due') })] }), _jsxs("button", { type: "button", className: css.statTile, "data-tone": openMisses > 0 ? 'bad' : undefined, disabled: openMisses === 0 || busy, onClick: openMissed, children: [_jsx("b", { children: openMisses }), _jsx("span", { children: t('mistakes.statOpen') })] })] })] })), _jsxs("div", { className: css.body, children: [_jsx(StateLine, { loaded: loaded, t: t }), notice !== undefined && _jsx("div", { className: css.notice, children: notice }), ordering && (_jsxs(_Fragment, { children: [_jsx("div", { className: css.notice, children: t('project.reorderHint') }), _jsx("ol", { className: css.textbooks, children: rows.map(({ resource }, index) => (_jsxs("li", { className: css.textbook, children: [_jsx("span", { className: css.seq, children: index + 1 }), _jsx("span", { className: css.textbookMain, children: _jsx("span", { className: css.textbookTitle, children: resource.title }) }), _jsxs("span", { className: css.order, children: [_jsx("button", { type: "button", "aria-label": t('project.moveUp', { book: resource.title }), disabled: busy || index === 0, onClick: () => { void move(resource.id, index); }, children: "\u25B2" }), _jsx("button", { type: "button", "aria-label": t('project.moveDown', { book: resource.title }), disabled: busy || index === rows.length - 1, onClick: () => { void move(resource.id, index + 2); }, children: "\u25BC" })] })] }, resource.id))) }), _jsx("div", { className: css.actions, children: _jsx("button", { type: "button", className: css.primary, onClick: () => { setOrdering(false); }, children: t('action.done') }) })] })), project !== undefined && !ordering && (_jsxs(_Fragment, { children: [resume !== undefined && _jsx(ContinueCard, { p: p, projectId: projectId, label: t('continue.label'), target: resume }), drafts.length > 0 && (_jsxs("div", { className: css.banner, children: [_jsx("span", { children: t('project.draftsBanner', { count: String(drafts.length) }) }), _jsx("button", { type: "button", className: css.ghost, onClick: () => { actions.push({ view: 'resource', projectId, resourceId: drafts[0].resource.id }); }, children: t('project.draftsOpen', { seq: String(drafts[0].resource.seq ?? 1) }) })] })), loaded.data !== undefined && thick.length === 0 && (_jsxs("div", { className: css.empty, children: [_jsx("div", { className: css.emptyTitle, children: t('project.noTextbooks') }), _jsx("div", { className: css.muted, children: t('project.noTextbooksBody') }), _jsxs("div", { className: css.starts, children: [_jsxs("button", { type: "button", className: css.start, onClick: () => { prime('prime.addBook'); }, children: [_jsx("b", { children: t('project.startOwn') }), _jsx("span", { children: t('project.startOwnHint') })] }), _jsxs("button", { type: "button", className: css.start, onClick: () => { prime('prime.pickTextbooks'); }, children: [_jsx("b", { children: t('project.startPick') }), _jsx("span", { children: t('project.startPickHint') })] })] })] })), thick.length > 0 && (_jsxs("section", { className: css.section, children: [_jsxs("div", { className: css.sectionHead, children: [_jsx("h3", { className: css.sectionTitle, children: t('project.textbooks', { count: String(thick.length) }) }), thick.length > 1 && _jsx("button", { type: "button", className: css.textButton, onClick: () => { setOrdering(true); }, children: t('project.reorder') })] }), _jsx("div", { className: css.bookCards, "data-color": colorOf(project), children: rows.map(({ resource, row }, index) => {
+                                            const title = splitTitle(resource.title);
+                                            const path = row?.roadmap;
+                                            return (_jsxs("button", { type: "button", className: css.bookCard, "data-pending": path === undefined ? 'true' : undefined, onClick: () => { actions.push({ view: 'resource', projectId, resourceId: resource.id }); }, children: [_jsx(Cover, { book: coverOf(resource), shade: index, size: "card" }), _jsxs("span", { className: css.bookCardText, children: [_jsxs("span", { className: css.bookCardTitle, children: [title.main, _jsx(OriginTag, { origin: resource.origin, digital: resource.kind === 'course', t: t })] }), path !== undefined ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: css.muted, children: [path.done === path.total && path.total > 0 ? t('book.finished') : t('project.bookProgress', { done: String(path.done), total: String(path.total) }), row?.hasDraft === true ? ` · ${t('book.draftWaiting')}` : ''] }), _jsx(Segments, { done: path.done, total: path.total })] })) : (_jsxs(_Fragment, { children: [title.sub !== undefined && _jsx("span", { className: css.muted, children: title.sub }), _jsx("span", { className: css.muted, children: row?.hasDraft === true ? t('project.draftRow', { count: String(row.draftTotal ?? 0) }) : t('project.noPathYet') })] }))] })] }, resource.id));
+                                        }) })] })), freeQuizzes.length > 0 && (_jsxs("section", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t('project.quizzes', { count: String(freeQuizzes.length) }) }), _jsx(QuizRows, { p: p, projectId: projectId, quizzes: freeQuizzes })] })), thin.length === 0 && loaded.data !== undefined && (_jsxs("div", { className: css.resEmpty, children: [_jsx("span", { children: t('resource.emptyLine') }), _jsxs("button", { type: "button", className: css.textButton, onClick: () => { prime('prime.addResource'); }, children: ["\uFF0B ", t('resource.add')] })] })), thin.length > 0 && (_jsxs("section", { className: css.section, children: [_jsxs("div", { className: css.sectionHead, children: [_jsx("h3", { className: css.sectionTitle, children: t('resource.title', { count: String(thin.length) }) }), _jsxs("button", { type: "button", className: css.textButton, onClick: () => { prime('prime.addResource'); }, children: ["\uFF0B ", t('resource.add')] })] }), thin.length > 0 && (_jsx("div", { className: css.resList, children: thin.map(resource => (_jsxs("div", { className: css.res, children: [_jsx("span", { className: css.resKind, title: t(`resource.kind.${resource.kind}`), children: resourceKindIcon(resource.kind) }), _jsxs("div", { className: css.resMain, children: [_jsx("button", { type: "button", className: css.resTitle, title: resource.url, onClick: () => { if (resource.url !== undefined)
+                                                                window.open(resource.url, '_blank', 'noopener,noreferrer'); }, children: resource.title }), resource.note !== undefined && _jsx("span", { className: css.resNote, children: resource.note })] })] }, resource.id))) }))] }))] }))] }), deleting && project !== undefined && (_jsx(ConfirmDialog, { title: t('project.deleteTitle', { project: project.name }), lines: [
+                    t('project.deleteTextbooks', { count: String(thick.length) }),
+                    t('project.deleteCards', { count: String(project.cardCount), due: String(project.dueCount) }),
+                    t('project.deleteAttempts', { count: String(attempts.data?.attempts.length ?? 0) }),
+                    ...(thin.length > 0 ? [t('project.deleteLinks', { count: String(thin.length) })] : []),
+                ], note: t('project.deleteNote'), confirmLabel: t('project.deleteConfirmButton'), cancelLabel: t('action.cancel'), busy: busy, error: error, onConfirm: () => { void remove(); }, onCancel: () => { setDeleting(false); } }))] }));
+}
+/** A resource row's kind tile glyph (article is the default). */
+function resourceKindIcon(kind) {
+    switch (kind) {
+        case 'video': return _jsx(IconPlayOutlineMedium, { size: 13 });
+        case 'repo': return _jsx(IconRepoOutlineMedium, { size: 13 });
+        case 'tool': return _jsx(IconToolOutlineMedium, { size: 13 });
+        case 'course': return _jsx(IconCourseOutlineMedium, { size: 13 });
+        case 'hardware': return _jsx(IconHardwareOutlineMedium, { size: 13 });
+        default: return _jsx(IconArticleOutlineMedium, { size: 13 });
+    }
+}

package/lib/types/client/views/lesson.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A station's 讲义 as its own page (proposal library-lesson-page): pushed from
+ * the station's guide (打开讲义) or opened by itself once the coach has written
+ * them after 开始学这一站. The markdown splits at its `##` headings — one
+ * section per knowledge point — so the contents can jump between them and
+ * show each point's mastery; wide panes keep the contents beside the text.
+ * Also the station guide's lesson card (LessonCard).
+ *
+ * @module @khorsheed/dsh-library/client/views/lesson
+ */
+import { type ReactNode } from 'react';
+import type { LibraryResource, RoadmapNode } from '../../types.ts';
+import { type ViewProps } from '../ui.tsx';
+/** One `##` section of the 讲义; the text before the first heading is the opening. */
+interface LessonSection {
+    readonly id: string;
+    readonly title: string | undefined;
+    readonly body: string;
+}
+/** Split the markdown at its `##` headings (deeper headings stay inside their section). */
+export declare function lessonSections(text: string): LessonSection[];
+/** The 讲义 page. */
+export declare function LessonView({ p, projectId, resourceId, nodeId }: ViewProps & {
+    projectId: string;
+    resourceId: string;
+    nodeId: string;
+}): ReactNode;
+/**
+ * The station guide's lesson card: no 讲义 yet → 开始学这一站 (a draft in the
+ * conversation input; the coach writes the 讲义 when it is sent); asked and
+ * waiting → 正在备课 (the 讲义 page opens by itself when they land); written →
+ * the points with their mastery and 打开讲义.
+ */
+export declare function LessonCard({ p, projectId, resourceId, node, resource }: {
+    p: ViewProps['p'];
+    projectId: string;
+    resourceId: string;
+    node: RoadmapNode;
+    resource: LibraryResource | undefined;
+}): ReactNode;
+export {};
+//# sourceMappingURL=lesson.d.ts.map

package/lib/types/client/views/lesson.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A station's 讲义 as its own page (proposal library-lesson-page): pushed from
+ * the station's guide (打开讲义) or opened by itself once the coach has written
+ * them after 开始学这一站. The markdown splits at its `##` headings — one
+ * section per knowledge point — so the contents can jump between them and
+ * show each point's mastery; wide panes keep the contents beside the text.
+ * Also the station guide's lesson card (LessonCard).
+ *
+ * @module @khorsheed/dsh-library/client/views/lesson
+ */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives';
+import { PanelHeader } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { stationMastery } from "../../mastery.js";
+import { outcome, StateLine, useLoad, value, when } from "../ui.js";
+import css from '../LibraryPane.module.css';
+/** How long 正在备课 waits for the 讲义 before offering to ask again. */
+const PREPARE_PATIENCE_MS = 10 * 60_000;
+/** Split the markdown at its `##` headings (deeper headings stay inside their section). */
+export function lessonSections(text) {
+    const sections = [];
+    let title;
+    let lines = [];
+    const flush = () => {
+        const body = lines.join('\n').trim();
+        if (title !== undefined || body !== '')
+            sections.push({ id: `s${sections.length}`, title, body });
+    };
+    for (const line of text.replace(/^#\s+.*\n/, '').split('\n')) {
+        const heading = /^##\s+(.+?)\s*$/.exec(line);
+        if (heading === null) {
+            lines.push(line);
+            continue;
+        }
+        flush();
+        title = heading[1].replace(/[*_`]/g, '');
+        lines = [];
+    }
+    flush();
+    return sections;
+}
+/** The point a section heading names, by its title. */
+function pointOf(title, points) {
+    if (title === undefined)
+        return undefined;
+    const squash = (value) => value.replace(/\s/g, '').toLowerCase();
+    return points.find(point => squash(title).includes(squash(point.title)));
+}
+/** The station's points with their mastery, for the dots (empty while loading). */
+function useStationPoints(p, projectId, node) {
+    const rev = p.useStore(s => s.rev);
+    const assessments = useLoad(() => value(p.listAssessments(projectId)), [projectId, rev]);
+    const attempts = useLoad(() => value(p.listAttempts(projectId)), [projectId, rev]);
+    if (node === undefined)
+        return [];
+    return stationMastery(node, assessments.data?.assessments ?? [], attempts.data?.attempts ?? []).points;
+}
+/** The 讲义 page. */
+export function LessonView({ p, projectId, resourceId, nodeId }) {
+    const { t, actions, useStore } = p;
+    const rev = useStore(s => s.rev);
+    const loaded = useLoad(async () => {
+        const [detail, roadmaps] = await Promise.all([outcome(p.getProject(projectId)), value(p.getRoadmap(projectId, resourceId))]);
+        return { resource: detail.resources.find(candidate => candidate.id === resourceId), node: roadmaps.roadmap?.nodes.find(candidate => candidate.id === nodeId) };
+    }, [projectId, resourceId, nodeId, rev]);
+    const node = loaded.data?.node;
+    const points = useStationPoints(p, projectId, node);
+    const sections = useMemo(() => lessonSections(node?.notes?.text ?? ''), [node?.notes?.text]);
+    const [active, setActive] = useState();
+    const [notice, setNotice] = useState();
+    const refs = useRef(new Map());
+    const markdownLabels = useMemo(() => ({
+        code: { copyLabel: t('markdown.copy'), copiedLabel: t('markdown.copied') },
+        footnotes: t('markdown.footnotes'),
+    }), [t]);
+    const jump = (id) => {
+        setActive(id);
+        refs.current.get(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    };
+    const ask = () => {
+        if (node === undefined)
+            return;
+        void p.bindTarget({ projectId, resourceId });
+        setNotice(p.primeConversation(t('prime.lessonAsk', { node: node.title })) ? t('lesson.asked') : t('notice.noConversation'));
+    };
+    const titled = sections.filter(section => section.title !== undefined);
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: node === undefined ? t('lesson.title') : t('lesson.titleOf', { node: node.title }), meta: loaded.data?.resource?.title, onBack: () => { actions.pop(); }, backLabel: t('action.back'), moreLabel: t('action.more') }), _jsxs("div", { className: css.body, children: [_jsx(StateLine, { loaded: loaded, t: t }), node !== undefined && node.notes === undefined && _jsx("div", { className: css.muted, children: t('lesson.none') }), node?.notes !== undefined && (_jsxs("div", { className: css.lesson, children: [_jsxs("nav", { className: css.lessonToc, "aria-label": t('lesson.contents'), children: [_jsx("span", { className: css.lessonTocHead, children: t('lesson.contentsMeta', { count: String(points.length) }) }), sections.map((section, index) => {
+                                        const point = pointOf(section.title, points);
+                                        return (_jsxs("button", { type: "button", className: css.lessonTocItem, "aria-current": active === section.id ? 'true' : undefined, onClick: () => { jump(section.id); }, children: [_jsx("i", { className: css.lessonDot, "data-state": point?.state ?? 'none', "aria-hidden": "true" }), _jsx("span", { children: section.title ?? (index === 0 ? t('lesson.opening') : '') })] }, section.id));
+                                    }), _jsxs("div", { className: css.lessonTocActions, children: [_jsx("button", { type: "button", className: css.primary, onClick: () => { actions.replace({ view: 'node', projectId, resourceId, nodeId, tab: 'quiz' }); }, children: t('lesson.toQuiz') }), _jsx("button", { type: "button", className: css.ghost, onClick: ask, children: t('lesson.ask') })] })] }), _jsxs("article", { className: css.lessonBody, children: [_jsxs("div", { className: css.muted, children: [t('lesson.meta', { at: when(node.notes.updatedAt, t), count: String(titled.length) }), node.notes.revisions > 1 ? ` · ${t('lesson.revised', { n: String(node.notes.revisions - 1) })}` : ''] }), sections.map(section => (_jsxs("section", { ref: element => { if (element === null)
+                                            refs.current.delete(section.id);
+                                        else
+                                            refs.current.set(section.id, element); }, className: css.lessonSection, children: [section.title !== undefined && _jsx("h2", { className: css.lessonHeading, children: section.title }), _jsx(MarkdownText, { text: section.body, labels: markdownLabels })] }, section.id))), _jsxs("section", { className: css.stepBox, children: [_jsxs("span", { className: css.stepText, children: [_jsx("strong", { children: t('lesson.doneTitle') }), _jsx("span", { className: css.muted, children: t('lesson.doneHint', { count: String(points.length) }) })] }), _jsxs("div", { className: css.askActions, children: [_jsx("button", { type: "button", className: css.ghost, onClick: ask, children: t('lesson.ask') }), _jsx("button", { type: "button", className: css.primary, onClick: () => { actions.replace({ view: 'node', projectId, resourceId, nodeId, tab: 'quiz' }); }, children: t('lesson.toQuiz') })] })] }), notice !== undefined && _jsx("div", { className: css.notice, children: notice })] })] }))] })] }));
+}
+/**
+ * The station guide's lesson card: no 讲义 yet → 开始学这一站 (a draft in the
+ * conversation input; the coach writes the 讲义 when it is sent); asked and
+ * waiting → 正在备课 (the 讲义 page opens by itself when they land); written →
+ * the points with their mastery and 打开讲义.
+ */
+export function LessonCard({ p, projectId, resourceId, node, resource }) {
+    const { t, actions, useStore } = p;
+    const key = `${projectId}:${resourceId}:${node.id}`;
+    const since = useStore(s => s.preparing[key]);
+    const points = useStationPoints(p, projectId, node);
+    const [failed, setFailed] = useState(false);
+    const [now, setNow] = useState(Date.now());
+    const notes = node.notes;
+    // Waiting: re-read now and then; the page opens itself once the 讲义 land.
+    useEffect(() => {
+        if (since === undefined)
+            return;
+        if (notes !== undefined && Date.parse(notes.updatedAt) >= since) {
+            actions.setPreparing(key, undefined);
+            actions.push({ view: 'lesson', projectId, resourceId, nodeId: node.id });
+            return;
+        }
+        const timer = setInterval(() => { setNow(Date.now()); actions.refresh(); }, 4000);
+        return () => { clearInterval(timer); };
+    }, [since, notes?.updatedAt]);
+    const start = () => {
+        void p.bindTarget({ projectId, resourceId });
+        const text = t(resource?.origin === 'authored' ? 'prime.lessonStart' : 'prime.lessonStartBook', {
+            book: resource?.title ?? '',
+            node: node.title,
+            points: (node.points ?? []).map(point => point.title).join('、'),
+        });
+        if (!p.primeConversation(text)) {
+            setFailed(true);
+            return;
+        }
+        setFailed(false);
+        actions.setPreparing(key, Date.now());
+    };
+    const ask = () => {
+        void p.bindTarget({ projectId, resourceId });
+        if (!p.primeConversation(t('prime.lessonAsk', { node: node.title })))
+            setFailed(true);
+    };
+    const waiting = since !== undefined && notes === undefined;
+    const stale = waiting && now - since > PREPARE_PATIENCE_MS;
+    return (_jsxs("section", { className: css.stepBox, "data-lesson": "true", children: [notes === undefined ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: css.stepText, children: [_jsx("strong", { children: waiting ? (stale ? t('lesson.prepareStale') : t('lesson.preparing')) : t('lesson.notReady') }), _jsx("span", { className: css.muted, children: waiting ? t('lesson.preparingHint') : t('lesson.notReadyHint') })] }), _jsxs("div", { className: css.askActions, children: [waiting && !stale
+                                ? _jsx("button", { type: "button", className: css.textButton, onClick: () => { actions.setPreparing(key, undefined); }, children: t('lesson.cancelWait') })
+                                : _jsx("button", { type: "button", className: css.ghost, onClick: ask, children: t('lesson.ask') }), _jsx("button", { type: "button", className: css.primary, disabled: waiting && !stale, onClick: start, children: t('lesson.start') })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: css.stepText, children: [_jsx("strong", { children: t('lesson.ready', { count: String((node.points ?? []).length) }) }), _jsx("span", { className: css.muted, children: t('lesson.meta', { at: when(notes.updatedAt, t), count: String(lessonSections(notes.text).filter(section => section.title !== undefined).length) }) }), points.length > 0 && (_jsx("span", { className: css.lessonPoints, children: points.map(point => _jsxs("span", { children: [_jsx("i", { className: css.lessonDot, "data-state": point.state, "aria-hidden": "true" }), point.title] }, point.id)) }))] }), _jsxs("div", { className: css.askActions, children: [_jsx("button", { type: "button", className: css.ghost, onClick: ask, children: t('lesson.ask') }), _jsx("button", { type: "button", className: css.primary, onClick: () => { actions.push({ view: 'lesson', projectId, resourceId, nodeId: node.id }); }, children: t('lesson.open') })] })] })), failed && _jsx("span", { className: css.muted, children: t('notice.noConversation') })] }));
+}