@khorsheed/dsh-reader 0.3.0 → 0.3.1

package/lib/types/client/NotesView.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The notes face of the detail view: the article's excerpts with their
+ * comments, the conversations that discussed it, and the sheet a new note is
+ * written in.
+ *
+ * One layout for every width (docs/panel-design.md): the list is a single
+ * column that only tightens under the panel's compact container, and the
+ * sheet rises from the bottom of the pane on a desk and on a phone alike.
+ *
+ * @module @khorsheed/dsh-reader/client/NotesView
+ */
+import { useState } from 'react';
+import css from './NotesView.module.css';
+import { formatClock } from "../captions.js";
+/** True when the keystroke is ⌘⏎ / Ctrl+⏎ outside an IME composition. */
+function isSubmit(event) {
+    return event.key === 'Enter' && (event.metaKey || event.ctrlKey) && !event.nativeEvent.isComposing;
+}
+/** A one-field inline editor (a reply being added or rewritten). */
+function LineEditor({ t, initial, onSave, onCancel }) {
+    const [draft, setDraft] = useState(initial);
+    const save = async () => { if (draft.trim() !== '' && await onSave(draft))
+        onCancel(); };
+    return (_jsxs("div", { className: css.editor, children: [_jsx("textarea", { autoFocus: true, className: css.area, value: draft, placeholder: t('notes.replyPlaceholder'), onChange: event => { setDraft(event.target.value); }, onKeyDown: event => {
+                    if (isSubmit(event)) {
+                        event.preventDefault();
+                        void save();
+                    }
+                    if (event.key === 'Escape' && !event.nativeEvent.isComposing)
+                        onCancel();
+                } }), _jsxs("div", { className: css.row, children: [_jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.ghost, onClick: onCancel, children: t('action.cancel') }), _jsx("button", { type: "button", className: css.primary, onClick: () => { void save(); }, children: t('notes.save') })] })] }));
+}
+/** 「已在《…》」: where an item went last, when it was synced. */
+function SyncedMark({ t, synced }) {
+    const last = synced?.[synced.length - 1];
+    return last === undefined ? null : _jsx("span", { className: css.synced, children: t('notes.syncedIn', { canvas: last.canvasTitle }) });
+}
+/** Who wrote a line under a note, as the thread labels it. */
+function replyAuthor(t, reply) {
+    if (reply.by === 'agent')
+        return t('notes.replyAgent');
+    return reply.editedFrom === 'agent' ? t('notes.replyEdited') : t('notes.replyUser');
+}
+/** One note row: excerpt, comment, the conclusions under it, and the gestures on it. */
+function NoteRow({ t, note, missing, selecting, selected, canOpenSession, onToggle, onJump, onEdit, onDelete, onAddReply, onEditReply, onOpenSession, onSync, onPlay }) {
+    const [adding, setAdding] = useState(false);
+    const [rewriting, setRewriting] = useState(null);
+    const replies = note.replies ?? [];
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(note.comment ?? '');
+    const [confirming, setConfirming] = useState(false);
+    const save = async () => {
+        if (await onEdit(draft))
+            setEditing(false);
+    };
+    return (_jsxs("div", { className: css.note, "data-selected": selected ? 'true' : undefined, children: [_jsxs("div", { className: css.noteHead, children: [selecting && (_jsx("input", { type: "checkbox", className: css.check, checked: selected, "aria-label": note.anchor.quote, onChange: onToggle })), _jsx("button", { type: "button", className: css.excerpt, onClick: selecting ? onToggle : onJump, title: missing ? t('notes.notFound') : undefined, children: note.anchor.quote })] }), note.anchor.translated !== undefined && (_jsxs("div", { className: css.translated, children: [_jsx("span", { className: css.label, children: t('notes.inTranslation') }), note.anchor.translated] })), editing
+                ? (_jsxs("div", { className: css.editor, children: [_jsx("textarea", { autoFocus: true, className: css.area, value: draft, placeholder: t('notes.commentPlaceholder'), onChange: event => { setDraft(event.target.value); }, onKeyDown: event => {
+                                if (isSubmit(event)) {
+                                    event.preventDefault();
+                                    void save();
+                                }
+                                if (event.key === 'Escape' && !event.nativeEvent.isComposing) {
+                                    setEditing(false);
+                                    setDraft(note.comment ?? '');
+                                }
+                            } }), _jsxs("div", { className: css.row, children: [_jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.ghost, onClick: () => { setEditing(false); setDraft(note.comment ?? ''); }, children: t('action.cancel') }), _jsx("button", { type: "button", className: css.primary, onClick: () => { void save(); }, children: t('notes.save') })] })] }))
+                : note.comment !== undefined && _jsx("div", { className: css.comment, children: note.comment }), !selecting && (replies.length > 0 || adding) && (_jsxs("div", { className: css.thread, children: [replies.map((reply, index) => rewriting === index
+                        ? (_jsx(LineEditor, { t: t, initial: reply.text, onSave: text => onEditReply(index, text), onCancel: () => { setRewriting(null); } }, `${reply.at}-${String(index)}`))
+                        : (_jsxs("div", { className: css.reply, children: [_jsxs("div", { className: css.replyWho, "data-agent": reply.by === 'agent' ? 'true' : undefined, children: [_jsx("span", { children: replyAuthor(t, reply) }), reply.sessionId !== undefined && canOpenSession && (_jsxs("button", { type: "button", className: css.link, onClick: () => { onOpenSession(reply.sessionId); }, children: ["\u2197 ", t('notes.backToSession')] })), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.link, onClick: () => { setRewriting(index); }, children: t('notes.replyEdit') }), _jsx("button", { type: "button", className: css.link, onClick: () => { void onEditReply(index, ''); }, children: t('notes.replyRemove') })] }), _jsx("div", { className: css.replyText, children: reply.text })] }, `${reply.at}-${String(index)}`))), adding && _jsx(LineEditor, { t: t, initial: "", onSave: onAddReply, onCancel: () => { setAdding(false); } })] })), _jsxs("div", { className: css.foot, children: [note.anchor.time !== undefined && onPlay !== undefined && (_jsxs("button", { type: "button", className: css.play, onClick: onPlay, children: ["\u25B6 ", formatClock(note.anchor.time)] })), _jsxs("span", { children: ["\u00B6", note.anchor.block + 1] }), missing && _jsx("span", { className: css.missing, children: t('notes.notFound') }), _jsx(SyncedMark, { t: t, synced: note.syncedTo }), _jsx("span", { className: css.spacer }), !selecting && !editing && (confirming
+                        ? (_jsxs(_Fragment, { children: [_jsx("span", { children: t('notes.deleteConfirm') }), _jsx("button", { type: "button", className: css.link, onClick: () => { setConfirming(false); }, children: t('action.cancel') }), _jsx("button", { type: "button", className: `${css.link} ${css.danger}`, onClick: onDelete, children: t('notes.delete') })] }))
+                        : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.link, onClick: () => { setAdding(true); }, children: t('notes.replyAdd') }), onSync !== undefined && _jsx("button", { type: "button", className: css.link, onClick: onSync, children: t('notes.sync') }), _jsx("button", { type: "button", className: css.link, onClick: () => { setDraft(note.comment ?? ''); setEditing(true); }, children: t('notes.edit') }), _jsx("button", { type: "button", className: css.link, onClick: () => { setConfirming(true); }, children: t('notes.delete') })] })))] })] }));
+}
+/** One discussion note: what a conversation (or a quiz-me round) came to. */
+function DiscussionCard({ t, discussion, canOpenSession, onOpenSession, onJumpPara, onDelete, onSync }) {
+    const [confirming, setConfirming] = useState(false);
+    const check = discussion.kind === 'check';
+    return (_jsxs("div", { className: css.discussion, children: [_jsxs("div", { className: css.discussionHead, children: [_jsx("span", { className: css.kind, "data-kind": discussion.kind, children: check ? t('notes.kindCheck') : t('notes.kindDiscussion') }), _jsx("b", { className: css.discussionTitle, children: discussion.title !== '' ? discussion.title : discussion.createdAt.slice(0, 10) }), discussion.sessionId !== undefined && canOpenSession && (_jsxs("button", { type: "button", className: css.link, onClick: () => { onOpenSession(discussion.sessionId); }, children: [t('notes.backToSession'), " \u2197"] }))] }), _jsx("div", { className: css.pointsLabel, "data-kind": discussion.kind, children: check ? t('notes.pointsCheck') : t('notes.pointsDiscussion') }), _jsx("ul", { className: css.points, children: discussion.points.map((point, index) => (_jsxs("li", { children: [point.text, point.para !== undefined && (_jsxs(_Fragment, { children: [' ', _jsxs("button", { type: "button", className: css.link, onClick: () => { onJumpPara(point.para); }, children: ["\u00B6", point.para, " \u2197"] })] }))] }, String(index)))) }), discussion.aside !== undefined && _jsx("div", { className: css.aside, children: discussion.aside }), _jsxs("div", { className: css.foot, children: [_jsx("span", { children: discussion.title !== '' ? discussion.createdAt.slice(0, 10) : '' }), _jsx(SyncedMark, { t: t, synced: discussion.syncedTo }), _jsx("span", { className: css.spacer }), !confirming && onSync !== undefined && _jsx("button", { type: "button", className: css.link, onClick: onSync, children: t('notes.sync') }), confirming
+                        ? (_jsxs(_Fragment, { children: [_jsx("span", { children: t('notes.deleteConfirm') }), _jsx("button", { type: "button", className: css.link, onClick: () => { setConfirming(false); }, children: t('action.cancel') }), _jsx("button", { type: "button", className: `${css.link} ${css.danger}`, onClick: onDelete, children: t('notes.delete') })] }))
+                        : _jsx("button", { type: "button", className: css.link, onClick: () => { setConfirming(true); }, children: t('notes.delete') })] })] }));
+}
+/** The article's notes, and the conversations that discussed it. */
+export function NotesView(props) {
+    const { t, entry } = props;
+    const [selecting, setSelecting] = useState(false);
+    const [selected, setSelected] = useState(new Set());
+    const notes = entry?.notes ?? [];
+    const sessions = entry?.sessions ?? [];
+    const discussions = entry?.discussions ?? [];
+    const toggle = (id) => {
+        setSelected(current => {
+            const next = new Set(current);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const endSelecting = () => { setSelecting(false); setSelected(new Set()); };
+    return (_jsxs("div", { className: css.view, children: [_jsxs("div", { className: css.body, children: [_jsxs("div", { className: css.section, children: [_jsx("span", { children: t('notes.excerpts') }), _jsx("span", { className: css.spacer }), notes.length > 0 && (_jsx("button", { type: "button", className: css.link, onClick: () => { if (selecting)
+                                    endSelecting();
+                                else
+                                    setSelecting(true); }, children: selecting ? t('notes.selectDone') : t('notes.select') }))] }), notes.length === 0 && _jsx("p", { className: css.empty, children: t('notes.empty') }), notes.map(note => (_jsx(NoteRow, { t: t, note: note, missing: props.missing.has(note.id), selecting: selecting, selected: selected.has(note.id), onToggle: () => { toggle(note.id); }, onJump: () => { props.onJump(note); }, onEdit: comment => props.onEdit(note, comment), onDelete: () => { props.onDelete(note); }, canOpenSession: props.canOpenSession, onAddReply: text => props.onAddReply(note, text), onEditReply: (index, text) => props.onEditReply(note, index, text), onOpenSession: props.onOpenSession, onSync: props.sync.available ? () => { props.sync.open({ kind: 'notes', ids: [note.id] }); } : undefined, onPlay: props.onPlay === undefined ? undefined : () => { props.onPlay?.(note); } }, note.id))), _jsx("div", { className: css.section, children: _jsx("span", { children: t('notes.discussionNotes') }) }), discussions.length === 0 && _jsx("p", { className: css.empty, children: t('notes.noDiscussionNotes') }), discussions.map(discussion => (_jsx(DiscussionCard, { t: t, discussion: discussion, canOpenSession: props.canOpenSession, onOpenSession: props.onOpenSession, onJumpPara: props.onJumpPara, onDelete: () => { props.onDeleteDiscussion(discussion); }, onSync: props.sync.available ? () => { props.sync.open({ kind: 'discussion', id: discussion.id }); } : undefined }, discussion.id))), _jsx("div", { className: css.section, children: _jsx("span", { children: t('notes.discussions') }) }), sessions.length === 0 && _jsx("p", { className: css.empty, children: t('notes.noDiscussions') }), sessions.map(session => (_jsxs("div", { className: css.session, children: [_jsx("span", { className: css.sessionTitle, children: props.sessionTitle(session.sessionId) ?? session.title ?? t('notes.untitledSession') }), props.canOpenSession && (_jsxs("button", { type: "button", className: css.link, onClick: () => { props.onOpenSession(session.sessionId); }, children: [t('notes.discussedIn'), " \u2197"] }))] }, session.sessionId)))] }), props.sync.done !== null && (_jsxs("div", { className: css.syncDone, children: [_jsx("span", { children: t('notes.syncDone', { canvas: props.sync.done.title }) }), _jsx("button", { type: "button", className: css.link, onClick: props.sync.openDone, children: t('notes.syncOpen') })] })), props.sync.target !== null && (_jsx(SyncSheet, { t: t, sync: props.sync, count: props.sync.target.kind === 'notes' ? props.sync.target.ids.length : 1, hasReplies: props.sync.target.kind === 'notes'
+                    && notes.some(note => props.sync.target.ids.includes(note.id) && (note.replies ?? []).length > 0) })), _jsx("div", { className: css.bar, children: selecting
+                    ? (_jsxs(_Fragment, { children: [_jsx("span", { children: t('notes.selected', { count: selected.size }) }), _jsx("span", { className: css.spacer }), props.sync.available && (_jsx("button", { type: "button", className: css.secondary, disabled: selected.size === 0, onClick: () => { props.sync.open({ kind: 'notes', ids: [...selected] }); endSelecting(); }, children: t('notes.sync') })), _jsx("button", { type: "button", className: css.primary, disabled: selected.size === 0, onClick: () => { props.onDiscuss([...selected]); endSelecting(); }, children: t('notes.discuss') })] }))
+                    : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `${css.secondary} ${css.wide}`, disabled: notes.length === 0, onClick: () => { props.onDiscuss([]); }, children: t('notes.discussAll') }), _jsx("button", { type: "button", className: `${css.primary} ${css.wide}`, onClick: props.onCheck, children: t('notes.check') })] })) })] }));
+}
+/** The 「同步到画布」 sheet: which canvas, and whether the conclusions come along. */
+function SyncSheet({ t, sync, count, hasReplies }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: css.scrim, onClick: sync.cancel }), _jsxs("div", { className: css.sheet, role: "dialog", "aria-label": t('notes.sync'), children: [_jsx("div", { className: css.grab }), _jsx("div", { className: css.sheetHead, children: _jsx("b", { children: t('notes.syncTitle', { count }) }) }), sync.canvases === null && _jsx("p", { className: css.empty, children: "\u2026" }), sync.canvases !== null && sync.canvases.length === 0 && _jsx("p", { className: css.empty, children: t('notes.syncNoCanvas') }), sync.canvases !== null && sync.canvases.length > 0 && (_jsx("div", { className: css.picker, role: "radiogroup", "aria-label": t('notes.sync'), children: sync.canvases.map(canvas => (_jsxs("button", { type: "button", role: "radio", "aria-checked": sync.pick === canvas.id, className: css.option, onClick: () => { sync.setPick(canvas.id); }, children: [_jsx("span", { className: css.optionTitle, children: canvas.title }), _jsxs("span", { className: css.optionMeta, children: [canvas.id === sync.last ? `${t('notes.syncLast')} · ` : '', t('notes.syncCards', { count: canvas.cardCount })] })] }, canvas.id))) })), sync.target?.kind === 'notes' && hasReplies && (_jsxs("label", { className: css.checkRow, children: [_jsx("input", { type: "checkbox", checked: sync.withReplies, onChange: event => { sync.setWithReplies(event.target.checked); } }), t('notes.syncReplies')] })), sync.kinds !== null && (_jsxs("div", { className: css.kinds, children: [_jsx("span", { className: css.hint, children: t('notes.syncKind') }), _jsx("select", { className: css.select, value: sync.kind ?? '', onChange: event => { sync.setKind(event.target.value); }, children: sync.kinds.map(item => _jsx("option", { value: item.id, children: item.label }, item.id)) })] })), _jsxs("div", { className: css.row, children: [sync.error !== null && _jsx("span", { className: css.failed, children: t('notes.syncFailed', { reason: sync.error }) }), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.ghost, onClick: sync.cancel, children: t('action.cancel') }), _jsx("button", { type: "button", className: css.primary, disabled: sync.busy || sync.pick === null, onClick: sync.run, children: t('notes.syncRun') })] })] })] }));
+}
+/** The sheet a new note is written in. */
+export function NoteSheet({ t, selection, saving, failed, onSave, onCancel }) {
+    const [comment, setComment] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: css.scrim, onClick: onCancel }), _jsxs("div", { className: css.sheet, role: "dialog", "aria-label": t('notes.sheetTitle'), children: [_jsx("div", { className: css.grab }), _jsxs("div", { className: css.sheetHead, children: [_jsx("b", { children: t('notes.sheetTitle') }), _jsx("span", { className: css.chip, children: t('notes.excerpt') })] }), _jsx("div", { className: css.sheetExcerpt, children: selection.translated ?? selection.quote }), _jsx("textarea", { autoFocus: true, className: css.area, value: comment, placeholder: t('notes.commentPlaceholder'), onChange: event => { setComment(event.target.value); }, onKeyDown: event => {
+                            if (isSubmit(event)) {
+                                event.preventDefault();
+                                onSave(comment);
+                            }
+                            if (event.key === 'Escape' && !event.nativeEvent.isComposing)
+                                onCancel();
+                        } }), _jsxs("div", { className: css.row, children: [_jsx("span", { className: failed ? css.failed : css.hint, children: failed ? t('notes.saveFailed') : t('notes.commentOptional') }), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.ghost, onClick: onCancel, children: t('action.cancel') }), _jsxs("button", { type: "button", className: css.primary, disabled: saving, onClick: () => { onSave(comment); }, children: [t('notes.save'), " \u2318\u23CE"] })] })] })] }));
+}

package/lib/types/client/ReaderPane.d.ts

@@ -10,8 +10,10 @@
  *   round trip.
  * - **the detail view** — clicking a card opens it. This is the whole point:
  *   the body renders as DOM text, which is what makes passage quoting work
- *   (the QUOTE plugin's own selection menu sees it), and it is why the pane
- *   never hosts a sandboxed iframe.
+ *   (the QUOTE plugin's own selection menu sees it). The one non-text island:
+ *   an article's content embeds survive as sandboxed iframes (opaque origin,
+ *   no `allow-same-origin`) or controls-only media elements — neither can see
+ *   this page, and neither carries quotable text.
  * - **the add dialog** — an overlay in the members-tab idiom, because adding is
  *   a momentary act and the wall should stay where it was behind it. The host
  *   decides whether a pasted URL is a feed or an article from what comes back
@@ -30,6 +32,17 @@
 import { type ReactNode } from 'react';
 import type { ReaderPaneProps } from './contract.ts';
 import { type ReaderReadingAnchor } from './session.ts';
+/**
+ * Whether a fetch failure is one a real browser gets past: a bot challenge,
+ * a 401/403 that refuses non-browser requests, or a cookie handshake
+ * (Springer Nature's idp bounce). These are the reasons the
+ * rendered fetch (the capture package's headless Chrome) exists to answer; a
+ * login wall is not among them — a cookie-less browser meets it too.
+ *
+ * @param reason - the host's recorded message.
+ * @returns true when escalating to the rendered fetch is worth a try.
+ */
+export declare function browserSolvable(reason: string): boolean;
 /**
  * One top-level block, measured.
  *
@@ -66,6 +79,10 @@ export interface ArticleBlockMetrics {
  * @returns pixels into the block.
  */
 export declare function offsetInBlock(block: ArticleBlockMetrics, anchor: ReaderReadingAnchor): number;
-/** The reader tab body. */
+/**
+ * The reader tab body, inside the shared panel root: the `dsh-panel` size
+ * container its compact rules query, and the compact flag the wall's and the
+ * detail's headers read (panel-responsive-spec P2).
+ */
 export declare function ReaderPane(props: ReaderPaneProps): ReactNode;
 //# sourceMappingURL=ReaderPane.d.ts.map