@anthusai/papyrus 2.0.0-next.1 → 2.0.0-next.10

package/components/editorial-finding-card.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { CheckIcon, SparklesIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Spinner } from "./ui/spinner";
+import { describeProbability, type EditorialFinding, type RewriteResult, type Span } from "../lib/editorial-checks";
+
+export type RewriteTarget = { finding: EditorialFinding } | { selection: Span };
+export type ApplyRewrite = (option: { span: Span; replacement: string; expected: string }, finding: EditorialFinding | null) => void;
+
+export type FindingActions = {
+  onSelect?: (finding: EditorialFinding) => void;
+  onDismiss: (finding: EditorialFinding, reason: string) => void;
+  onAccept: (finding: EditorialFinding) => void;
+  onSuggest: (target: RewriteTarget, note: string | null) => Promise<RewriteResult>;
+  onApply: ApplyRewrite;
+};
+
+type SuggestionState =
+  | { state: "loading" }
+  | { state: "ready"; result: RewriteResult }
+  | { state: "error"; message: string };
+
+/** Ask for rewrite options for a target and let the editor pick one. Shared by findings and selections. */
+export function useRewriteOptions(actions: Pick<FindingActions, "onSuggest">) {
+  const [suggestion, setSuggestion] = useState<SuggestionState | null>(null);
+  const request = async (target: RewriteTarget, note: string | null) => {
+    setSuggestion({ state: "loading" });
+    try {
+      setSuggestion({ state: "ready", result: await actions.onSuggest(target, note) });
+    } catch (error) {
+      setSuggestion({ state: "error", message: error instanceof Error ? error.message : "Could not get rewrite options." });
+    }
+  };
+  return { suggestion, request, clear: () => setSuggestion(null) };
+}
+
+export function RewriteOptions({
+  suggestion,
+  finding,
+  onApply,
+}: {
+  suggestion: SuggestionState | null;
+  finding: EditorialFinding | null;
+  onApply: ApplyRewrite;
+}) {
+  if (!suggestion) return null;
+  if (suggestion.state === "loading") {
+    return <p className="flex items-center gap-2 text-muted-foreground" data-editorial-rewrite-loading><Spinner /> Asking for rewrite options…</p>;
+  }
+  if (suggestion.state === "error") return <p className="text-destructive" role="alert">{suggestion.message}</p>;
+  const { result } = suggestion;
+  if (result.options.length === 0) return <p className="text-muted-foreground">No usable options this time. Try again or add a note.</p>;
+  return (
+    <div className="space-y-2" data-editorial-rewrite-options>
+      <p className="text-xs text-muted-foreground" data-editorial-rewrite-target>Rewriting: “{result.target.excerpt}”</p>
+      <ol className="space-y-2">
+        {result.options.map((option, index) => (
+          <li className="space-y-1 rounded-md bg-muted/40 p-2" data-editorial-rewrite-option={index} key={option.id}>
+            <p>{option.replacement}</p>
+            <p className="text-xs text-muted-foreground">{option.rationale}</p>
+            {option.factVerificationRequired ? <p className="text-xs text-destructive">Changes a factual claim: verify before using.</p> : null}
+            {option.unresolvedQuestions.length ? (
+              <ul className="list-disc pl-4 text-xs text-muted-foreground">
+                {option.unresolvedQuestions.map((question) => <li key={question}>{question}</li>)}
+              </ul>
+            ) : null}
+            <Button
+              data-editorial-use-option
+              onClick={() => onApply({ span: option.span, replacement: option.replacement, expected: result.target.excerpt }, finding)}
+              size="xs"
+              type="button"
+            >
+              Use this
+            </Button>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+/** One finding: what is wrong, how sure, and what the editor can do about it. */
+export function EditorialFindingCard({
+  finding,
+  active = false,
+  note,
+  actions,
+}: {
+  finding: EditorialFinding;
+  active?: boolean;
+  note: string;
+  actions: FindingActions;
+}) {
+  const [dismissing, setDismissing] = useState<string | null>(null);
+  const rewrites = useRewriteOptions(actions);
+  return (
+    <div
+      className="space-y-1 rounded-lg border border-border p-2 data-[active=true]:border-ring"
+      data-active={active}
+      data-editorial-finding-item={finding.id}
+    >
+      <button className="block w-full text-left" onClick={() => actions.onSelect?.(finding)} type="button">
+        <span className="block">{finding.message}</span>
+        {finding.excerpt ? <q className="block truncate text-muted-foreground">{finding.excerptText ?? finding.excerpt}</q> : null}
+        <span className="text-xs text-muted-foreground">
+          {finding.status === "review" ? "Needs your judgment · " : ""}
+          {describeProbability(finding) ?? (finding.lane === "rules" ? "Rule" : "")}
+        </span>
+      </button>
+      <div className="flex flex-wrap gap-1">
+        {finding.replacement !== undefined ? (
+          <Button
+            data-editorial-use-replacement={finding.replacement}
+            onClick={() => actions.onApply({ span: finding.span, replacement: finding.replacement ?? "", expected: finding.excerpt }, finding)}
+            size="xs"
+            type="button"
+            variant="outline"
+          >
+            <CheckIcon aria-hidden="true" /> {finding.replacement ? `Use “${finding.replacement}”` : "Remove"}
+          </Button>
+        ) : null}
+        {finding.excerpt ? (
+          <Button data-editorial-suggest onClick={() => void rewrites.request({ finding }, note.trim() || null)} size="xs" type="button" variant="outline">
+            <SparklesIcon aria-hidden="true" /> Suggest rewrites
+          </Button>
+        ) : null}
+        {finding.status === "review" ? (
+          <Button onClick={() => actions.onAccept(finding)} size="xs" type="button" variant="ghost">
+            It&apos;s a problem
+          </Button>
+        ) : null}
+        <Button data-editorial-dismiss onClick={() => setDismissing("")} size="xs" type="button" variant="ghost">
+          <XIcon aria-hidden="true" /> Dismiss
+        </Button>
+      </div>
+      {dismissing !== null ? (
+        <form
+          className="flex gap-1"
+          onSubmit={(event) => {
+            event.preventDefault();
+            actions.onDismiss(finding, dismissing);
+            setDismissing(null);
+          }}
+        >
+          <Input
+            aria-label="Why dismiss?"
+            autoFocus
+            className="h-8"
+            onChange={(event) => setDismissing(event.target.value)}
+            placeholder="Why? (optional, helps tune this policy)"
+            value={dismissing}
+          />
+          <Button data-editorial-confirm-dismiss size="xs" type="submit">Dismiss</Button>
+        </form>
+      ) : null}
+      <RewriteOptions finding={finding} onApply={actions.onApply} suggestion={rewrites.suggestion} />
+    </div>
+  );
+}

package/components/editorial-findings-panel.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { SparklesIcon } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Spinner } from "./ui/spinner";
+import { groupByPolicy, laneNotice, visibleFindings, type EditorialCheckResult, type Span } from "../lib/editorial-checks";
+import { EditorialFindingCard, RewriteOptions, useRewriteOptions, type FindingActions } from "./editorial-finding-card";
+
+export type CheckStatus = { state: "idle" } | { state: "checking" } | { state: "error"; message: string };
+
+type Props = FindingActions & {
+  result: EditorialCheckResult | null;
+  status: CheckStatus;
+  dismissed: ReadonlySet<string>;
+  activeFindingId: string | null;
+  selection: Span;
+  onCheck: () => void;
+};
+
+export const SEVERITY_LABEL = { error: "Must fix", warn: "Should fix", info: "Consider" } as const;
+const SEVERITY_VARIANT = { error: "default", warn: "secondary", info: "muted" } as const;
+
+export function EditorialFindingsPanel(props: Props) {
+  const { result, status, dismissed, activeFindingId, selection } = props;
+  const [note, setNote] = useState("");
+  const selectionRewrites = useRewriteOptions(props);
+  const findings = result ? visibleFindings(result.findings, dismissed) : [];
+  const groups = groupByPolicy(findings);
+  const notice = result ? laneNotice(result) : null;
+  const hasSelection = selection.end > selection.start;
+
+  return (
+    <section aria-label="Editorial checks" className="space-y-3 rounded-xl border border-border bg-card p-3 text-sm" data-editorial-findings>
+      <div className="flex flex-wrap items-center gap-2">
+        <h3 className="font-medium">Editorial checks</h3>
+        {status.state === "checking" ? <Spinner aria-label="Checking" /> : null}
+        <span className="text-muted-foreground" data-editorial-findings-count>
+          {result ? `${findings.length} open` : "Not checked yet"}
+        </span>
+        <Button className="ml-auto" data-editorial-check-now disabled={status.state === "checking"} onClick={props.onCheck} size="xs" type="button" variant="outline">
+          Check now
+        </Button>
+      </div>
+
+      {status.state === "error" ? <p className="text-destructive" role="alert">{status.message}</p> : null}
+      {notice ? <p className="text-muted-foreground" data-editorial-lane-notice>{notice}</p> : null}
+
+      <div className="flex flex-wrap items-center gap-2" data-editorial-rewrite-tools>
+        <Input
+          aria-label="Note for rewrites"
+          className="h-8 max-w-xs flex-1"
+          onChange={(event) => setNote(event.target.value)}
+          placeholder="Note for rewrites, e.g. shorter"
+          value={note}
+        />
+        <Button
+          disabled={!hasSelection}
+          onClick={() => void selectionRewrites.request({ selection }, note.trim() || null)}
+          size="xs"
+          title={hasSelection ? "Get rewrite options for the selected text" : "Select text in the body first"}
+          type="button"
+          variant="outline"
+        >
+          <SparklesIcon aria-hidden="true" /> Rewrite selection
+        </Button>
+      </div>
+      <RewriteOptions finding={null} onApply={props.onApply} suggestion={selectionRewrites.suggestion} />
+
+      {result && findings.length === 0 ? <p className="text-muted-foreground">No open findings.</p> : null}
+      {groups.map((group) => (
+        <div className="space-y-2" data-editorial-policy={group.policyId} key={group.policyId}>
+          <div className="flex items-center gap-2">
+            <Badge variant={SEVERITY_VARIANT[group.severity]}>{SEVERITY_LABEL[group.severity]}</Badge>
+            <strong>{group.policyId}</strong>
+            <span className="text-muted-foreground">{group.findings.length}</span>
+          </div>
+          <ul className="space-y-2">
+            {group.findings.map((finding) => (
+              <li key={finding.id}>
+                <EditorialFindingCard actions={props} active={finding.id === activeFindingId} finding={finding} note={note} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </section>
+  );
+}

package/components/editorial-preview-popover.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { SparklesIcon, XIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import type { EditorialFinding, Span } from "../lib/editorial-checks";
+import { EditorialFindingCard, RewriteOptions, useRewriteOptions, type FindingActions } from "./editorial-finding-card";
+
+/** What the popover is about: findings at a marked passage, or a passage the editor selected. */
+export type PreviewPopoverTarget =
+  | { kind: "findings"; findingIds: string[]; anchor: DOMRect }
+  | { kind: "selection"; source: Span; anchor: DOMRect };
+
+const WIDTH = 352;
+
+/**
+ * Floats next to the passage on the preview, inside `container` (which must be
+ * positioned). Escape or the close button dismisses it.
+ */
+export function EditorialPreviewPopover({
+  target,
+  findings,
+  body,
+  container,
+  actions,
+  onClose,
+}: {
+  target: PreviewPopoverTarget;
+  findings: EditorialFinding[];
+  body: string;
+  container: HTMLElement | null;
+  actions: FindingActions;
+  onClose: () => void;
+}) {
+  const [note, setNote] = useState("");
+  const panel = useRef<HTMLDivElement | null>(null);
+  const selectionRewrites = useRewriteOptions(actions);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  useEffect(() => {
+    panel.current?.focus();
+  }, [target]);
+
+  const box = container?.getBoundingClientRect();
+  const top = box ? target.anchor.bottom - box.top + container!.scrollTop + 6 : 0;
+  const left = box ? Math.max(0, Math.min(target.anchor.left - box.left, box.width - WIDTH)) : 0;
+  const shown = target.kind === "findings" ? findings.filter((finding) => target.findingIds.includes(finding.id)) : [];
+
+  return (
+    <div
+      aria-label={target.kind === "findings" ? "Editorial findings for this passage" : "Rewrite the selected passage"}
+      className="absolute z-20 max-h-[28rem] space-y-2 overflow-auto rounded-xl border border-border bg-popover p-3 text-sm text-popover-foreground shadow-lg outline-none"
+      data-editorial-preview-popover={target.kind}
+      ref={panel}
+      role="dialog"
+      style={{ top, left, width: WIDTH }}
+      tabIndex={-1}
+    >
+      <div className="flex items-center gap-2">
+        <Input
+          aria-label="Note for rewrites"
+          className="h-8 flex-1"
+          onChange={(event) => setNote(event.target.value)}
+          placeholder="Note for rewrites, e.g. shorter"
+          value={note}
+        />
+        <Button aria-label="Close" onClick={onClose} size="icon-xs" type="button" variant="ghost">
+          <XIcon aria-hidden="true" />
+        </Button>
+      </div>
+      {target.kind === "findings" ? (
+        shown.length ? (
+          shown.map((finding) => <EditorialFindingCard actions={actions} active finding={finding} key={finding.id} note={note} />)
+        ) : (
+          <p className="text-muted-foreground">This finding was resolved.</p>
+        )
+      ) : (
+        <div className="space-y-2" data-editorial-selection-rewrite>
+          <q className="block text-muted-foreground">{body.slice(target.source.start, target.source.end)}</q>
+          <Button
+            data-editorial-rewrite-selection
+            onClick={() => {
+              void selectionRewrites.request({ selection: target.source }, note.trim() || null);
+            }}
+            size="xs"
+            type="button"
+          >
+            <SparklesIcon aria-hidden="true" /> Suggest rewrites
+          </Button>
+          <RewriteOptions finding={null} onApply={actions.onApply} suggestion={selectionRewrites.suggestion} />
+        </div>
+      )}
+    </div>
+  );
+}

package/components/markus-body-editor.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { markdown } from "@codemirror/lang-markdown";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorState, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView, keymap, placeholder as placeholderExtension } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import type { EditorialFinding } from "../lib/editorial-checks";
+
+/** The textarea-shaped surface the article editor already drives (focus, selection, value). */
+export type MarkusBodyEditorHandle = {
+  readonly value: string;
+  readonly selectionStart: number;
+  readonly selectionEnd: number;
+  focus: () => void;
+  setSelectionRange: (start: number, end: number) => void;
+  /** Scroll to and select a span, e.g. a finding the editor clicked in the findings panel. */
+  reveal: (start: number, end: number) => void;
+};
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  findings?: EditorialFinding[];
+  activeFindingId?: string | null;
+  onFindingClick?: (findingId: string) => void;
+  onSelectionChange?: (selection: { start: number; end: number }) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+};
+
+type MarkedFinding = Pick<EditorialFinding, "id" | "span" | "severity" | "status" | "message">;
+
+/** Markup is told apart by weight, emphasis and opacity, never by a fixed colour, so it reads in light and dark themes. */
+const markusHighlight = HighlightStyle.define([
+  { tag: tags.heading, fontWeight: "700" },
+  { tag: tags.strong, fontWeight: "700" },
+  { tag: tags.emphasis, fontStyle: "italic" },
+  { tag: tags.strikethrough, textDecoration: "line-through" },
+  { tag: tags.link, textDecoration: "underline" },
+  { tag: [tags.url, tags.processingInstruction, tags.meta, tags.contentSeparator, tags.labelName], opacity: "0.6" },
+  { tag: tags.monospace, opacity: "0.85" },
+  { tag: tags.quote, fontStyle: "italic", opacity: "0.85" },
+]);
+
+const setFindings = StateEffect.define<{ findings: MarkedFinding[]; activeId: string | null }>();
+
+function decorationsFor(findings: MarkedFinding[], activeId: string | null, length: number): DecorationSet {
+  const builder = new RangeSetBuilder<Decoration>();
+  const sorted = [...findings]
+    .filter((finding) => finding.span.start < finding.span.end && finding.span.end <= length)
+    .sort((a, b) => a.span.start - b.span.start || a.span.end - b.span.end);
+  for (const finding of sorted) {
+    builder.add(
+      finding.span.start,
+      finding.span.end,
+      Decoration.mark({
+        class: [
+          "cm-editorial-finding",
+          `cm-editorial-${finding.severity}`,
+          `cm-editorial-${finding.status}`,
+          finding.id === activeId ? "cm-editorial-active" : "",
+        ].join(" "),
+        attributes: { "data-editorial-finding": finding.id, title: finding.message },
+      }),
+    );
+  }
+  return builder.finish();
+}
+
+/** Findings are drawn as marks; edits move them with the text until the next check replaces them. */
+const findingField = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update(marks, transaction) {
+    let next = marks.map(transaction.changes);
+    for (const effect of transaction.effects) {
+      if (effect.is(setFindings)) next = decorationsFor(effect.value.findings, effect.value.activeId, transaction.state.doc.length);
+    }
+    return next;
+  },
+  provide: (field) => EditorView.decorations.from(field),
+});
+
+const theme = EditorView.theme({
+  "&": { fontSize: "0.875rem", border: "1px solid var(--border)", borderRadius: "0.5rem", backgroundColor: "var(--background)", color: "var(--foreground)" },
+  ".cm-cursor": { borderLeftColor: "var(--foreground)" },
+  "&.cm-focused": { outline: "2px solid var(--ring)", outlineOffset: "1px" },
+  ".cm-content": { fontFamily: "var(--font-mono, ui-monospace, monospace)", minHeight: "28rem", padding: "0.75rem 0" },
+  ".cm-line": { padding: "0 0.75rem" },
+  ".cm-editorial-finding": { textDecorationLine: "underline", textDecorationStyle: "wavy", textUnderlineOffset: "3px", cursor: "pointer" },
+  ".cm-editorial-error": { textDecorationColor: "var(--destructive)" },
+  ".cm-editorial-warn": { textDecorationColor: "oklch(0.75 0.16 70)" },
+  ".cm-editorial-info": { textDecorationColor: "oklch(0.65 0.12 250)" },
+  ".cm-editorial-review": { textDecorationStyle: "dotted" },
+  ".cm-editorial-active": { backgroundColor: "color-mix(in oklch, var(--ring) 22%, transparent)" },
+});
+
+/** Replace only the stretch that differs, so finding marks elsewhere keep their place. */
+export function minimalChange(before: string, after: string): { from: number; to: number; insert: string } {
+  let prefix = 0;
+  const limit = Math.min(before.length, after.length);
+  while (prefix < limit && before.charCodeAt(prefix) === after.charCodeAt(prefix)) prefix += 1;
+  let suffix = 0;
+  while (
+    suffix < limit - prefix &&
+    before.charCodeAt(before.length - 1 - suffix) === after.charCodeAt(after.length - 1 - suffix)
+  ) suffix += 1;
+  return { from: prefix, to: before.length - suffix, insert: after.slice(prefix, after.length - suffix) };
+}
+
+export const MarkusBodyEditor = forwardRef<MarkusBodyEditorHandle, Props>(function MarkusBodyEditor(
+  { value, onChange, findings = [], activeFindingId = null, onFindingClick, onSelectionChange, placeholder, ariaLabel = "Body" },
+  ref,
+) {
+  const host = useRef<HTMLDivElement | null>(null);
+  const view = useRef<EditorView | null>(null);
+  const callbacks = useRef({ onChange, onFindingClick, onSelectionChange });
+  callbacks.current = { onChange, onFindingClick, onSelectionChange };
+
+  useEffect(() => {
+    if (!host.current) return;
+    const editor = new EditorView({
+      parent: host.current,
+      state: EditorState.create({
+        doc: value,
+        extensions: [
+          history(),
+          keymap.of([...defaultKeymap, ...historyKeymap]),
+          markdown(),
+          syntaxHighlighting(markusHighlight),
+          EditorView.lineWrapping,
+          findingField,
+          theme,
+          placeholder ? placeholderExtension(placeholder) : [],
+          EditorView.contentAttributes.of({
+            "aria-label": ariaLabel,
+            "aria-multiline": "true",
+            "data-newsroom-article-body": "",
+            id: "newsroom-article-body",
+            spellcheck: "false",
+          }),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) callbacks.current.onChange(update.state.doc.toString());
+            if (update.selectionSet || update.docChanged) {
+              const main = update.state.selection.main;
+              callbacks.current.onSelectionChange?.({ start: main.from, end: main.to });
+            }
+          }),
+          EditorView.domEventHandlers({
+            click(event) {
+              const mark = (event.target as HTMLElement | null)?.closest("[data-editorial-finding]");
+              const id = mark?.getAttribute("data-editorial-finding");
+              if (id) callbacks.current.onFindingClick?.(id);
+              return false;
+            },
+          }),
+        ],
+      }),
+    });
+    view.current = editor;
+    // Browser specs read the document through the host element (CodeMirror only renders visible lines).
+    (host.current as HTMLDivElement & { papyrusEditorValue?: () => string }).papyrusEditorValue = () => editor.state.doc.toString();
+    return () => {
+      editor.destroy();
+      view.current = null;
+    };
+    // The editor is created once; `value` changes are synced below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const editor = view.current;
+    if (!editor) return;
+    const current = editor.state.doc.toString();
+    if (current !== value) editor.dispatch({ changes: minimalChange(current, value) });
+  }, [value]);
+
+  useEffect(() => {
+    view.current?.dispatch({ effects: setFindings.of({ findings, activeId: activeFindingId }) });
+  }, [findings, activeFindingId]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      get value() {
+        return view.current?.state.doc.toString() ?? value;
+      },
+      get selectionStart() {
+        return view.current?.state.selection.main.from ?? 0;
+      },
+      get selectionEnd() {
+        return view.current?.state.selection.main.to ?? 0;
+      },
+      focus() {
+        view.current?.focus();
+      },
+      setSelectionRange(start: number, end: number) {
+        view.current?.dispatch({ selection: { anchor: start, head: end }, scrollIntoView: true });
+      },
+      reveal(start: number, end: number) {
+        const editor = view.current;
+        if (!editor) return;
+        editor.dispatch({ selection: { anchor: start, head: end }, effects: EditorView.scrollIntoView(start, { y: "center" }) });
+        editor.focus();
+      },
+    }),
+    [value],
+  );
+
+  return <div data-newsroom-article-body-editor ref={host} />;
+});