@khorsheed/dsh-library 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * One textbook in the sidebar (a book, a course, a coach-authored outline):
+ * its place in the study order and origin, its roadmap draft waiting for
+ * 采用, its adopted path as an S-shaped trail of nodes, the chapters the path
+ * skips, and one node's page. Every path belongs to a textbook — the
+ * project carries none. 「我的记录」 exists only when the station covers
+ * its own textbook. Every station carries the same four tabs —
+ * 导读 / 我的记录 / 讲义 / 章节考: the gate tab is the station's quiz on a
+ * quiz / read node, and its acceptance sheet (the coach judges the rubric
+ * with library_assess) on an acceptance node.
+ *
+ * @module @khorsheed/dsh-library/client/views/book
+ */
+import { useState } from 'react';
+import { ListRow, PanelHeader } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { coverKind, isThickResource, parseLocator, } from "../../types.js";
+import { colorOf, Cover, coverOf } from "../look.js";
+import { CoverChips } from "../covers.js";
+import { IconRefreshOutlineMedium, IconSparkleMedium, IconTrashOutlineMedium } from "../icons.js";
+import { ConfirmDialog, OriginTag, outcome, StateLine, useLoad, value, when } from "../ui.js";
+import css from '../LibraryPane.module.css';
+import { Path } from "./path.js";
+import { splitTitle } from "../titles.js";
+/** A node's contents rows of one thick resource, as titles. */
+export function rowsOf(node, resource) {
+    const toc = resource.toc ?? [];
+    return node.covers
+        .flatMap(cover => (coverKind(cover) === 'resource' && cover.ref === resource.id && cover.locator !== undefined ? parseLocator(cover.locator) : []))
+        .flatMap(range => toc.filter(row => row.n >= range.from && row.n <= range.to).map(row => row.title));
+}
+/** The kind line of a thick resource: a book's bookKind, else its kind label. */
+export function kindLabelOf(resource, t) {
+    return resource.kind === 'book' ? t(`bookKind.${resource.meta?.bookKind ?? 'knowledge'}`) : t(`resource.kind.${resource.kind}`);
+}
+/** One resource: draft card, path, or the ask for one. */
+export function BookView({ p, projectId, resourceId }) {
+    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), resources: detail.resources, project: detail.project, shade: Math.max(0, detail.resources.filter(isThickResource).findIndex(candidate => candidate.id === resourceId)), ...roadmaps };
+    }, [projectId, resourceId, rev]);
+    // Resource-level quizzes hang on no station — this section is their entry.
+    const assessments = useLoad(() => value(p.listAssessments(projectId, resourceId)), [projectId, resourceId, rev]);
+    const [notice, setNotice] = useState();
+    const [busy, setBusy] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleteError, setDeleteError] = useState();
+    // The delete dialog names the photographed pages that go with the textbook.
+    const pages = useLoad(() => confirmingDelete ? value(p.listPages(projectId, resourceId)) : Promise.resolve(undefined), [projectId, resourceId, confirmingDelete]);
+    const resource = loaded.data?.resource;
+    const looseQuizzes = (assessments.data?.assessments ?? []).filter(quiz => quiz.type === 'quiz' && quiz.scope.nodeId === undefined).sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    const prime = (text) => {
+        void p.bindTarget({ projectId, resourceId });
+        setNotice(p.primeConversation(text) ? t('notice.primed') : t('notice.noConversation'));
+    };
+    const act = async (run) => {
+        setBusy(true);
+        try {
+            await run();
+            actions.refresh();
+        }
+        catch (failure) {
+            setNotice(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const remove = async () => {
+        setBusy(true);
+        setDeleteError(undefined);
+        try {
+            await outcome(p.removeResource(projectId, resourceId));
+            setConfirmingDelete(false);
+            actions.refresh();
+            actions.pop();
+        }
+        catch (failure) {
+            setDeleteError(failure instanceof Error ? failure.message : String(failure));
+            setBusy(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: resource === undefined ? '' : splitTitle(resource.title).main, onBack: () => { actions.pop(); }, backLabel: t('action.back'), actions: resource === undefined ? [] : [
+                    { id: 'ask', label: t('action.askCoach'), icon: _jsx(IconSparkleMedium, {}), onSelect: () => { prime(t('prime.readBook', { book: resource.title })); } },
+                    { id: 'replan', label: t('book.replan'), icon: _jsx(IconRefreshOutlineMedium, {}), onSelect: () => { prime(t('prime.replan', { book: resource.title })); } },
+                    { id: 'bind', label: t('action.bindBook'), icon: _jsx(IconSparkleMedium, {}), menuOnly: true, onSelect: () => { void p.bindTarget({ projectId, resourceId }).then(() => { setNotice(t('notice.bound')); }); } },
+                    // 知识型 / 材料型 is rarely changed: it lives in the menu, not on the page.
+                    ...(isThickResource(resource) ? [{ id: 'kind', label: t(resource.meta?.bookKind === 'material' ? 'book.kindToKnowledge' : 'book.kindToMaterial'), icon: _jsx(IconRefreshOutlineMedium, {}), menuOnly: true, onSelect: () => { void act(() => outcome(p.setBookKind(projectId, resourceId, resource.meta?.bookKind === 'material' ? 'knowledge' : 'material'))); } }] : []),
+                    { id: 'delete', label: t('book.delete'), icon: _jsx(IconTrashOutlineMedium, {}), menuOnly: true, onSelect: () => { setDeleteError(undefined); setConfirmingDelete(true); } },
+                ], moreLabel: t('action.more') }), _jsxs("div", { className: css.body, "data-color": loaded.data?.project === undefined ? undefined : colorOf(loaded.data.project), children: [_jsx(StateLine, { loaded: loaded, t: t }), notice !== undefined && _jsx("div", { className: css.notice, children: notice }), resource !== undefined && (_jsxs("section", { className: css.bookHero, children: [_jsx(Cover, { book: coverOf(resource), shade: loaded.data?.shade ?? 0, size: "hero" }), _jsxs("span", { className: css.bookHeroText, children: [_jsx("span", { className: css.bookHeroTitle, children: splitTitle(resource.title).main }), splitTitle(resource.title).sub !== undefined && _jsx("span", { className: css.muted, children: splitTitle(resource.title).sub }), _jsxs("span", { className: css.bookHeroMeta, children: [_jsx(OriginTag, { origin: resource.origin, digital: resource.kind === 'course', t: t }), resource.meta?.bookKind === 'material' && _jsx("span", { className: css.chip, "data-tone": "warn", children: t('bookKind.material') }), [resource.meta?.edition, resource.seq === undefined ? undefined : t('book.seqOf', { seq: String(resource.seq) })].filter(Boolean).map(part => _jsx("span", { children: part }, part))] })] })] })), resource?.meta?.extras !== undefined && resource.meta.extras.length > 0 && _jsx(Extras, { p: p, resource: resource }), resource !== undefined && loaded.data?.draft !== undefined && (_jsx(DraftCard, { p: p, draft: loaded.data.draft, context: { resources: loaded.data.resources }, tocBy: resource.tocSource?.by, skipped: skippedRows(loaded.data.draft, resource), replaces: loaded.data.roadmap !== undefined, busy: busy, onAdopt: () => { void act(() => outcome(p.adoptRoadmap(projectId, resourceId))); }, onDiscard: () => { void act(() => outcome(p.discardDraft(projectId, resourceId))); } })), resource !== undefined && loaded.data?.roadmap !== undefined && (_jsx(_Fragment, { children: _jsx(Path, { p: p, projectId: projectId, resource: resource, roadmap: loaded.data.roadmap, onOpen: node => { actions.push({ view: 'node', projectId, resourceId, nodeId: node.id, tab: 'guide' }); }, onLesson: node => { actions.push({ view: 'lesson', projectId, resourceId, nodeId: node.id }); }, onRetake: node => { actions.push({ view: 'node', projectId, resourceId, nodeId: node.id, tab: 'quiz' }); } }) })), resource !== undefined && loaded.data?.roadmap === undefined && loaded.data?.draft === undefined && (_jsxs("div", { className: css.empty, children: [_jsx("div", { className: css.emptyTitle, children: t('book.noRoadmap') }), _jsx("div", { className: css.muted, children: t('book.noRoadmapBody') }), _jsx("button", { type: "button", className: css.primary, onClick: () => { prime(t('prime.plan', { book: resource.title })); }, children: t('book.askPlan') })] })), resource !== undefined && looseQuizzes.length > 0 && (_jsxs("section", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t('book.quizzes', { count: String(looseQuizzes.length) }) }), _jsx(QuizRows, { p: p, projectId: projectId, quizzes: looseQuizzes })] })), resource !== undefined && isThickResource(resource) && (_jsx(Contents, { p: p, resource: resource, skipped: loaded.data?.roadmap === undefined ? [] : skippedRows(loaded.data.roadmap, resource) }))] }), confirmingDelete && resource !== undefined && (_jsx(ConfirmDialog, { title: t('book.deleteTitle', { book: resource.title, project: loaded.data?.project.name ?? '' }), lines: [
+                    loaded.data?.roadmap !== undefined
+                        ? t('book.deletePath', { done: String(loaded.data.roadmap.nodes.filter(node => node.state === 'done').length), total: String(loaded.data.roadmap.nodes.length) })
+                        : loaded.data?.draft !== undefined ? t('book.deleteDraft') : undefined,
+                    t('book.deletePages', { count: String(pages.data?.pages.length ?? 0) }),
+                    (assessments.data?.assessments.length ?? 0) > 0 ? t('book.deleteQuizzes', { count: String(assessments.data.assessments.length) }) : undefined,
+                ].filter((line) => line !== undefined), keep: t('book.deleteKeep'), note: resource.seq !== undefined ? t('book.deleteRenumber') : undefined, confirmLabel: t('book.deleteConfirmButton'), cancelLabel: t('action.cancel'), busy: busy, error: deleteError, onConfirm: () => { void remove(); }, onCancel: () => { setConfirmingDelete(false); } }))] }));
+}
+/** The textbook's contents rows no station of `roadmap` covers — what this path skips. */
+function skippedRows(roadmap, resource) {
+    const covered = new Set();
+    let whole = false;
+    for (const node of roadmap.nodes) {
+        for (const cover of node.covers) {
+            if (coverKind(cover) !== 'resource' || cover.ref !== resource.id)
+                continue;
+            if (cover.locator === undefined) {
+                whole = true;
+                continue;
+            }
+            for (const range of parseLocator(cover.locator)) {
+                for (let n = range.from; n <= range.to; n += 1)
+                    covered.add(n);
+            }
+        }
+    }
+    if (whole || covered.size === 0)
+        return [];
+    return (resource.toc ?? []).filter(row => !covered.has(row.n)).map(row => ({ n: row.n, title: row.title }));
+}
+/** 「本路线不学」 on a draft card: the skipped chapters, folded. */
+function SkippedRows({ p, rows }) {
+    const { t } = p;
+    if (rows.length === 0)
+        return null;
+    return (_jsxs("details", { className: css.skipped, children: [_jsx("summary", { children: t('book.skipped', { count: String(rows.length) }) }), _jsx("ul", { children: rows.map(row => _jsx("li", { children: row.title }, row.n)) })] }));
+}
+/** The contents, folded into one line: how many chapters, how many this path skips; open for the rows (skipped ones dimmed) and where the contents came from. */
+function Contents({ p, resource, skipped }) {
+    const { t } = p;
+    const skippedRows = new Set(skipped.map(row => row.n));
+    const rows = resource.toc ?? [];
+    return (_jsxs("details", { className: css.contentsFold, children: [_jsxs("summary", { children: [_jsxs("span", { children: [t('book.contentsLine', { rows: String(rows.length) }), skipped.length > 0 ? ` · ${t('book.skipped', { count: String(skipped.length) })}` : ''] }), _jsx("span", { className: css.muted, children: t('book.contentsOpen') })] }), _jsx("ol", { className: css.contentsList, children: rows.map(row => _jsxs("li", { "data-skipped": skippedRows.has(row.n) ? 'true' : undefined, children: [row.part === undefined ? row.title : `${row.part} · ${row.title}`, skippedRows.has(row.n) ? ` · ${t('book.skippedTag')}` : ''] }, row.n)) }), resource.tocSource?.url !== undefined && _jsx("a", { className: css.link, href: resource.tocSource.url, target: "_blank", rel: "noreferrer", children: t('book.contentsSource') })] }));
+}
+/** The draft card on a textbook's page: what the coach proposes, what it skips, and the learner's 采用 / 放弃. */
+export function DraftCard({ p, draft, context, tocBy, skipped, replaces, busy, onAdopt, onDiscard }) {
+    const { t } = p;
+    return (_jsxs("section", { className: css.draft, children: [_jsxs("div", { className: css.draftHead, children: [_jsx("span", { className: css.draftTitle, children: t('book.draftTitle') }), tocBy !== undefined && _jsx("span", { className: css.chip, "data-tone": tocBy === 'web' ? 'web' : 'know', children: t(`tocSource.${tocBy}`) })] }), _jsxs("div", { className: css.muted, children: [t('book.draftMeta', { count: String(draft.nodes.length) }), draft.note === undefined ? '' : ` · ${draft.note}`] }), _jsx("ol", { className: css.draftNodes, children: draft.nodes.map(node => (_jsxs("li", { children: [_jsx("span", { className: css.kind, "data-kind": node.gate, children: t(`nodeKind.${node.gate}`) }), _jsxs("div", { className: css.extraText, children: [_jsx("span", { children: node.title }), node.goals.length > 0 && _jsx("span", { className: css.muted, children: node.goals[0] }), node.gate === 'quiz' && node.points !== undefined && node.points.length > 0 && (_jsx("span", { className: css.muted, children: t('book.points', { points: node.points.map(point => point.title).join(' / ') }) })), node.gate === 'acceptance' && node.acceptance !== undefined && (_jsx("span", { className: css.muted, children: t('accept.meta', { count: String(node.acceptance.length) }) })), _jsx(CoverChips, { covers: node.covers, context: context, t: t })] })] }, node.id))) }), _jsx(SkippedRows, { p: p, rows: skipped }), replaces && _jsx("div", { className: css.muted, children: t('book.draftReplaces') }), _jsxs("div", { className: css.actions, children: [_jsx("button", { type: "button", className: css.primary, disabled: busy, onClick: onAdopt, children: t('book.adopt') }), _jsx("button", { type: "button", className: css.ghost, disabled: busy, onClick: onDiscard, children: t('book.discard') })] })] }));
+}
+/** The 「开始前 / 附录」 strip: what the resource holds that is not a stop on the path. */
+function Extras({ p, resource }) {
+    const { t } = p;
+    const [open, setOpen] = useState(false);
+    const extras = resource.meta?.extras ?? [];
+    const before = extras.filter(extra => extra.when === 'before');
+    return (_jsxs("section", { className: css.extras, children: [_jsxs("button", { type: "button", className: css.extrasHead, "aria-expanded": open, onClick: () => { setOpen(!open); }, children: [_jsx("span", { children: before.length > 0 ? t('book.extrasBefore', { first: before[0].title }) : t('book.extrasTitle') }), _jsxs("span", { className: css.muted, children: [t('book.extrasCount', { count: String(extras.length) }), open ? ' ▴' : ' ▾'] })] }), open && (_jsx("ul", { className: css.extrasList, children: extras.map(extra => (_jsxs("li", { children: [_jsx("span", { className: css.kind, "data-kind": extra.when === 'before' ? 'quiz' : 'read', children: t(extra.when === 'before' ? 'book.extraBefore' : 'book.extraReference') }), _jsxs("span", { className: css.extraText, children: [_jsx("b", { children: extra.title }), (extra.note !== undefined || extra.where !== undefined) && _jsx("span", { className: css.muted, children: [extra.where, extra.note].filter(Boolean).join(' · ') })] })] }, extra.title))) }))] }));
+}
+/**
+ * Rows of quizzes that gate no station (the resource page's 本书测验, the project
+ * page's 自由测验, a station's same-scope list) — each opens the paper. The
+ * route's resource comes from the quiz's own scope.
+ */
+export function QuizRows({ p, projectId, quizzes }) {
+    const { t, actions } = p;
+    return (_jsx(_Fragment, { children: quizzes.map(quiz => (_jsx(ListRow, { title: t('node.quizRow', { count: String(quiz.questions?.length ?? 0) }), meta: [t(`focus.${quiz.focus ?? 'mixed'}`), sourceMix((quiz.questions ?? []).map(question => question.evidence.kind), t), when(quiz.createdAt, t)].join(' · '), trailing: _jsx("span", { className: css.linkText, children: t('quiz.start') }), onSelect: () => { actions.push({ view: 'quiz', projectId, ...(quiz.scope.resourceId === undefined ? {} : { resourceId: quiz.scope.resourceId }), quizId: quiz.id }); } }, quiz.id))) }));
+}
+/** 「照片 3 · 领域知识 7」 for a quiz row. */
+export function sourceMix(kinds, t) {
+    const counts = new Map();
+    for (const kind of kinds)
+        counts.set(kind, (counts.get(kind) ?? 0) + 1);
+    return [...counts].map(([kind, count]) => `${t(kind === 'photo' ? 'evidence.photo' : kind === 'web' ? 'evidence.web' : 'evidence.knowledge')} ${count}`).join(' · ');
+}

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 });
+    }
+}