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

package/components/markus-ir-preview.tsx

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import { CITATION_TOKEN, planPreview, selectionToSource, splitByMarks, type BlockAnnotation, type PreviewMark, type PreviewPlan } from "../lib/editorial-preview";
+import type { EditorialCheckResult, EditorialFinding, Span } from "../lib/editorial-checks";
 import {
   parseMarkusDocument,
   type MarkusBlock,
@@ -17,7 +19,20 @@ type PreviewSidecar = {
   bibliography: string[];
 };
 
+/** Editorial findings drawn on the preview (see lib/editorial-preview.ts). */
+export type PreviewEditorial = {
+  /** A check result computed for the same body the preview shows, and the findings to draw from it. */
+  result: EditorialCheckResult;
+  findings: EditorialFinding[];
+  activeFindingIds?: readonly string[];
+  /** A marked passage was clicked. */
+  onOpenMark: (findingIds: string[], anchor: HTMLElement) => void;
+  /** Text was selected inside one prose block: the source span of the sentences it touches. */
+  onSelectSource?: (source: Span, anchor: DOMRect) => void;
+};
+
 type PreviewContext = {
+  editorial?: PreviewEditorial & { plan: PreviewPlan; blocks: Map<string, BlockAnnotation> };
   sidecar: PreviewSidecar;
   citationNumbers: Map<string, number>;
   imageUrls: Record<string, string>;
@@ -91,7 +106,7 @@ function renderText(text: string, context: PreviewContext): ReactNode {
     if (!keys) continue;
     if (index > cursor) parts.push(text.slice(cursor, index));
     parts.push(
-      <sup className="text-primary" key={`${index}-${token}`}>
+      <sup className="text-primary" data-editorial-skip key={`${index}-${token}`}>
         {keys.map((key) => `[${context.citationNumbers.get(key)}]`).join("")}
       </sup>,
     );
@@ -127,7 +142,7 @@ function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactN
       }
       case "image":
         return (
-          <span className="rounded border border-dashed border-border px-1 text-xs text-muted-foreground" key={index}>
+          <span className="rounded border border-dashed border-border px-1 text-xs text-muted-foreground" data-editorial-skip key={index}>
             {`Image: ${node.src ?? ""} (${node.alt})`}
           </span>
         );
@@ -141,6 +156,92 @@ function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactN
   });
 }
 
+const MARK_CLASSES: Record<PreviewMark["severity"], string> = {
+  error: "decoration-destructive",
+  warn: "decoration-amber-500",
+  info: "decoration-sky-500",
+};
+
+function markElement(text: string, mark: PreviewMark, key: string, context: PreviewContext): ReactNode {
+  const active = mark.findingIds.some((id) => context.editorial?.activeFindingIds?.includes(id));
+  return (
+    <mark
+      className={`cursor-pointer bg-transparent text-inherit underline underline-offset-4 ${mark.status === "review" ? "decoration-dotted" : "decoration-wavy"} ${MARK_CLASSES[mark.severity]} ${active ? "rounded-sm bg-ring/25" : ""}`}
+      data-editorial-mark={mark.findingIds.join(" ")}
+      key={key}
+      onClick={(event) => {
+        event.preventDefault();
+        context.editorial?.onOpenMark(mark.findingIds, event.currentTarget);
+      }}
+    >
+      {text}
+    </mark>
+  );
+}
+
+/** Like renderInlines, but splits rendered text at editorial marks (offsets as in inlineLeaves). */
+function renderMarkedInlines(inlines: MarkusInline[], context: PreviewContext, marks: PreviewMark[], cursor: { at: number }): ReactNode[] {
+  const marked = (text: string, keyPrefix: string): ReactNode[] => {
+    const start = cursor.at;
+    cursor.at += text.length;
+    return splitByMarks(start, start + text.length, marks).map((piece, pieceIndex) => {
+      const slice = text.slice(piece.start - start, piece.end - start);
+      return piece.mark ? markElement(slice, piece.mark, `${keyPrefix}-${pieceIndex}`, context) : slice;
+    });
+  };
+  return inlines.map((node, index) => {
+    switch (node.type) {
+      case "text": {
+        const parts: ReactNode[] = [];
+        let last = 0;
+        for (const match of node.text.matchAll(CITATION_TOKEN)) {
+          const at = match.index ?? 0;
+          if (at > last) parts.push(...marked(node.text.slice(last, at), `${index}-${last}`));
+          parts.push(<span key={`${index}-t${at}`}>{renderText(match[0], context)}</span>);
+          last = at + match[0].length;
+        }
+        if (last < node.text.length) parts.push(...marked(node.text.slice(last), `${index}-${last}`));
+        return <span key={index}>{parts}</span>;
+      }
+      case "emphasis":
+        return <em key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</em>;
+      case "strong":
+        return <strong key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</strong>;
+      case "strikethrough":
+        return <s key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</s>;
+      case "code_span":
+        return <code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]" key={index}>{marked(node.code, `${index}`)}</code>;
+      case "link": {
+        const children = renderMarkedInlines(node.children, context, marks, cursor);
+        const custom = node.href ? context.renderLink?.(node.href, children) : null;
+        if (custom) return <span key={index}>{custom}</span>;
+        return node.href ? (
+          <a className="text-primary underline" href={node.href} key={index} rel="noopener noreferrer" target="_blank">{children}</a>
+        ) : (
+          <span key={index}>{children}</span>
+        );
+      }
+      case "soft_break":
+        cursor.at += 1;
+        return <span key={index}>{" "}</span>;
+      case "hard_break":
+        cursor.at += 1;
+        return <br key={index} />;
+      default:
+        return renderInlines([node], context)[0];
+    }
+  });
+}
+
+/** Render a prose block's inlines, with editorial marks when the block has an annotation. */
+function proseInlines(block: { inline: MarkusInline[] }, context: PreviewContext): { children: ReactNode[]; blockKey?: string } {
+  const annotation = context.editorial?.plan.get(block);
+  if (!context.editorial || !annotation) return { children: renderInlines(block.inline, context) };
+  const blockKey = String(context.editorial.blocks.size);
+  context.editorial.blocks.set(blockKey, annotation);
+  return { children: renderMarkedInlines(block.inline, context, annotation.marks, { at: 0 }), blockKey };
+}
+
 function soleToken(inlines: MarkusInline[]): string | null {
   if (inlines.length !== 1 || inlines[0].type !== "text") return null;
   const text = inlines[0].text.trim();
@@ -170,12 +271,14 @@ function renderBlock(block: MarkusBlock, index: number, context: PreviewContext)
           </ol>
         );
       }
-      return <p className="my-3 leading-relaxed" key={index}>{renderInlines(block.inline, context)}</p>;
+      const prose = proseInlines(block, context);
+      return <p className="my-3 leading-relaxed" data-editorial-block={prose.blockKey} key={index}>{prose.children}</p>;
     }
     case "heading": {
       const level = Math.min(Math.max(block.level, 1), 6);
       const Tag = `h${level}` as "h1";
-      return <Tag className={HEADING_CLASSES[level - 1]} key={index}>{renderInlines(block.inline, context)}</Tag>;
+      const prose = proseInlines(block, context);
+      return <Tag className={HEADING_CLASSES[level - 1]} data-editorial-block={prose.blockKey} key={index}>{prose.children}</Tag>;
     }
     case "list": {
       const items = block.items.map((item, itemIndex) => (
@@ -310,12 +413,45 @@ function renderBlocks(nodes: MarkusNode[], context: PreviewContext): ReactNode[]
   );
 }
 
+/** Characters of rendered text from the start of `block` to (node, offset), skipping citation and image furniture. */
+function renderedOffset(block: HTMLElement, node: Node, offset: number): number {
+  const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
+  let total = 0;
+  for (let current = walker.nextNode(); current; current = walker.nextNode()) {
+    const skipped = current.parentElement?.closest("[data-editorial-skip]");
+    if (current === node) return total + (skipped ? 0 : offset);
+    if (!skipped) total += current.textContent?.length ?? 0;
+  }
+  return total;
+}
+
+function previewSelectionHandler(context: PreviewContext) {
+  return (event: ReactMouseEvent<HTMLDivElement>) => {
+    const editorial = context.editorial;
+    if (!editorial?.onSelectSource) return;
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) return;
+    const range = selection.getRangeAt(0);
+    const startBlock = (range.startContainer.parentElement ?? null)?.closest<HTMLElement>("[data-editorial-block]");
+    const endBlock = (range.endContainer.parentElement ?? null)?.closest<HTMLElement>("[data-editorial-block]");
+    if (!startBlock || startBlock !== endBlock || !event.currentTarget.contains(startBlock)) return;
+    const annotation = editorial.blocks.get(startBlock.dataset.editorialBlock ?? "");
+    const source = selectionToSource(annotation, {
+      start: renderedOffset(startBlock, range.startContainer, range.startOffset),
+      end: renderedOffset(startBlock, range.endContainer, range.endOffset),
+    });
+    if (source) editorial.onSelectSource(source, range.getBoundingClientRect());
+  };
+}
+
 export function MarkusIrPreview({
   bodyIr,
   imageUrls = {},
   dynamicDirectives = {},
   renderLink,
+  editorial,
 }: {
+  editorial?: PreviewEditorial;
   bodyIr: unknown;
   imageUrls?: Record<string, string>;
   /** Live components for leaf directives whose content the host app computes, keyed by directive name. */
@@ -333,8 +469,13 @@ export function MarkusIrPreview({
       imageUrls,
       dynamicDirectives,
       renderLink,
+      editorial: editorial ? { ...editorial, plan: planPreview(document, editorial.result, editorial.findings), blocks: new Map() } : undefined,
     };
-    return <div data-markus-preview>{renderBlocks(document.children, context)}</div>;
+    return (
+      <div data-markus-preview onMouseUp={editorial?.onSelectSource ? previewSelectionHandler(context) : undefined}>
+        {renderBlocks(document.children, context)}
+      </div>
+    );
   } catch (error) {
     return (
       <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive" data-markus-preview-error role="alert">

package/components/newsroom-article-editor.tsx

@@ -48,7 +48,15 @@ import {
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
 import { SITE_BRAND } from "../lib/site-brand";
 import { cn } from "../lib/utils";
+import { applyReplacement, inlineFindings, visibleFindings } from "../lib/editorial-checks";
+import { graphqlEditorialBackend } from "../lib/editorial-checks-client";
+import { demoEditorialBackend } from "../lib/editorial-checks-demo";
+import type { FindingActions } from "./editorial-finding-card";
+import { EditorialFindingsPanel } from "./editorial-findings-panel";
+import { EditorialPreviewPopover, type PreviewPopoverTarget } from "./editorial-preview-popover";
+import { MarkusBodyEditor, type MarkusBodyEditorHandle } from "./markus-body-editor";
 import { MarkusIrPreview } from "./markus-ir-preview";
+import { useEditorialChecks } from "./use-editorial-checks";
 import { useOptionalNewsDeskClient } from "./news-desk-client-provider";
 import { NewsDeskAccessGate } from "./newsroom-access-gate";
 import { NewsroomOpsShell, NewsroomOpsStatusBanner } from "./newsroom-ops-shell";
@@ -118,6 +126,9 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
   const [notice, setNotice] = useState<Notice | null>(null);
   const [conflictOpen, setConflictOpen] = useState(false);
   const [unpublishOpen, setUnpublishOpen] = useState(false);
+  const [publishWarningOpen, setPublishWarningOpen] = useState(false);
+  const [previewPopover, setPreviewPopover] = useState<PreviewPopoverTarget | null>(null);
+  const previewRef = useRef<HTMLDivElement | null>(null);
   const [mobileTab, setMobileTab] = useState<MobileTab>("preview");
   const [focusedReferenceId, setFocusedReferenceId] = useState<string | null>(null);
   const [lineageId, setLineageId] = useState<string | null>(null);
@@ -133,7 +144,7 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
   const [imageError, setImageError] = useState<string | null>(null);
 
   const frontMatterRef = useRef<HTMLTextAreaElement | null>(null);
-  const bodyRef = useRef<HTMLTextAreaElement | null>(null);
+  const bodyRef = useRef<MarkusBodyEditorHandle | null>(null);
   const imageInputRef = useRef<HTMLInputElement | null>(null);
   const mediaBackend = useMemo(() => resolveMediaBackend(previewMode), [previewMode]);
   const validationSequence = useRef(0);
@@ -205,6 +216,21 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
 
   const frontMatterYaml = editor?.frontMatterYaml ?? null;
   const bodyMarkus = editor?.bodyMarkus ?? null;
+  const editorialBackend = useMemo(
+    () => (demo ? demoEditorialBackend : !previewMode ? graphqlEditorialBackend : null),
+    [demo, previewMode],
+  );
+  const editorial = useEditorialChecks({
+    backend: editorialBackend,
+    body: bodyMarkus,
+    section: editor?.section ?? "",
+    itemId: editor?.id ?? null,
+  });
+  const editorialOpen = useMemo(
+    () => (editorial.result ? visibleFindings(editorial.result.findings, editorial.dismissed) : []),
+    [editorial.result, editorial.dismissed],
+  );
+  const editorialMarks = useMemo(() => inlineFindings(editorialOpen), [editorialOpen]);
 
   useEffect(() => {
     if (frontMatterYaml === null || bodyMarkus === null) return;
@@ -381,7 +407,45 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
     }
   }, [aliases, backend, demo, editor]);
 
+  const requestPublish = () => {
+    if (editorial.openWarnings.length > 0) {
+      setPublishWarningOpen(true);
+      return;
+    }
+    void publish();
+  };
+
+  const applyEditorialRewrite = (
+    option: { span: { start: number; end: number }; replacement: string; expected: string },
+    finding: Parameters<typeof editorial.fixed>[0] | null,
+  ) => {
+    if (!editor) return;
+    const next = applyReplacement(editor.bodyMarkus, option.span, option.expected, option.replacement);
+    if (next === null) {
+      setNotice({ tone: "info", text: "That text changed since the check. Check again, then apply the rewrite." });
+      return;
+    }
+    patchEditor({ bodyMarkus: next });
+    if (finding) editorial.fixed(finding);
+    setPreviewPopover(null);
+  };
+
+  const editorialActions: FindingActions = {
+    onSelect: (finding) => {
+      editorial.setActiveFindingId(finding.id);
+      if (editorial.inlineResult && finding.excerpt) bodyRef.current?.reveal(finding.span.start, finding.span.end);
+    },
+    onDismiss: (finding, reason) => {
+      editorial.dismiss(finding, reason);
+      setPreviewPopover(null);
+    },
+    onAccept: editorial.accept,
+    onSuggest: editorial.suggest,
+    onApply: applyEditorialRewrite,
+  };
+
   const publish = async () => {
+    setPublishWarningOpen(false);
     if (!editor) return;
     let id = editor.id;
     if (editor.dirty || id === null) {
@@ -551,7 +615,7 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
               <Button
                 data-newsroom-article-publish
                 disabled={publishBlocked}
-                onClick={() => void publish()}
+                onClick={requestPublish}
                 size="sm"
                 type="button"
               >
@@ -714,18 +778,29 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
                     {imageError}
                   </p>
                 ) : null}
-                <Textarea
-                  className={TEXTAREA_CLASS}
-                  data-newsroom-article-body
-                  id="newsroom-article-body"
-                  onChange={(event) => patchEditor({ bodyMarkus: event.target.value })}
+                <MarkusBodyEditor
+                  activeFindingId={editorial.activeFindingId}
+                  findings={editorialMarks}
+                  onChange={(value) => patchEditor({ bodyMarkus: value })}
+                  onFindingClick={editorial.setActiveFindingId}
+                  onSelectionChange={editorial.setSelection}
                   ref={bodyRef}
-                  rows={28}
-                  spellCheck={false}
                   value={editor.bodyMarkus}
                 />
               </div>
 
+              {editorial.enabled ? (
+                <EditorialFindingsPanel
+                  {...editorialActions}
+                  activeFindingId={editorial.activeFindingId}
+                  dismissed={editorial.dismissed}
+                  onCheck={() => void editorial.check()}
+                  result={editorial.result}
+                  selection={editorial.selection}
+                  status={editorial.status}
+                />
+              ) : null}
+
               {validation.status === "unavailable" ? (
                 <NewsroomOpsStatusBanner tone="error">{validation.message}</NewsroomOpsStatusBanner>
               ) : null}
@@ -763,7 +838,7 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
               className={cn("min-w-0", mobileTab === "preview" ? "block" : "hidden")}
               data-newsroom-article-preview-column
             >
-              <div className="rounded-xl border border-border bg-card p-4" data-newsroom-article-preview>
+              <div className="relative rounded-xl border border-border bg-card p-4" data-newsroom-article-preview ref={previewRef}>
                 {(readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_SUBTITLE_KEY) || readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_BLURB_KEY)) ? (
                   <div className="newsroom-article-summary" data-newsroom-article-summary>
                     {readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_SUBTITLE_KEY) ? <p className="newsroom-article-subtitle">{readFrontMatterText(editor.frontMatterYaml, FRONT_MATTER_SUBTITLE_KEY)}</p> : null}
@@ -774,12 +849,40 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
                   <p className="mb-2 text-xs text-muted-foreground">Showing the last valid version.</p>
                 ) : null}
                 {bodyIr ? (
-                  <MarkusIrPreview bodyIr={bodyIr} imageUrls={imageUrls} />
+                  <MarkusIrPreview
+                    bodyIr={bodyIr}
+                    editorial={
+                      editorial.inlineResult
+                        ? {
+                            result: editorial.inlineResult,
+                            findings: editorialOpen,
+                            activeFindingIds: previewPopover?.kind === "findings" ? previewPopover.findingIds : editorial.activeFindingId ? [editorial.activeFindingId] : [],
+                            onOpenMark: (findingIds, anchor) => {
+                              editorial.setActiveFindingId(findingIds[0] ?? null);
+                              setPreviewPopover({ kind: "findings", findingIds, anchor: anchor.getBoundingClientRect() });
+                            },
+                            onSelectSource: (source, anchor) => setPreviewPopover({ kind: "selection", source, anchor }),
+                          }
+                        : undefined
+                    }
+                    imageUrls={imageUrls}
+                  />
                 ) : (
                   <p className="text-sm text-muted-foreground">
                     {invalid ? "Fix the errors to see a preview." : "The preview appears once the markup is valid."}
                   </p>
                 )}
+                {previewPopover && editorial.enabled ? (
+                  <EditorialPreviewPopover
+                    actions={editorialActions}
+                    body={editor.bodyMarkus}
+                    container={previewRef.current}
+                    findings={editorialOpen}
+                    key={previewPopover.kind === "findings" ? previewPopover.findingIds.join() : `${previewPopover.source.start}-${previewPopover.source.end}`}
+                    onClose={() => setPreviewPopover(null)}
+                    target={previewPopover}
+                  />
+                ) : null}
               </div>
             </div>
           </div>
@@ -801,6 +904,28 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
           </DialogContent>
         </Dialog>
 
+        <Dialog onOpenChange={setPublishWarningOpen} open={publishWarningOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Publish with open editorial findings?</DialogTitle>
+              <DialogDescription>
+                {editorial.openWarnings.length === 1
+                  ? "One editorial finding is still open."
+                  : `${editorial.openWarnings.length} editorial findings are still open.`}{" "}
+                Findings are advice: you can publish anyway.
+              </DialogDescription>
+            </DialogHeader>
+            <ul className="max-h-48 list-disc space-y-1 overflow-auto pl-5 text-sm" data-newsroom-article-publish-warnings>
+              {editorial.openWarnings.slice(0, 8).map((finding) => (
+                <li key={finding.id}>{finding.message}{finding.excerpt ? `: “${finding.excerpt}”` : ""}</li>
+              ))}
+            </ul>
+            <DialogFooter>
+              <Button onClick={() => setPublishWarningOpen(false)} type="button" variant="outline">Keep editing</Button>
+              <Button data-newsroom-article-publish-anyway onClick={() => void publish()} type="button">Publish anyway</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
         <Dialog onOpenChange={setUnpublishOpen} open={unpublishOpen}>
           <DialogContent>
             <DialogHeader>

package/components/newsroom-board-view.tsx

@@ -3,10 +3,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { IssueCollection, IssueDetailPanel, IssueTypeFilter, issueTypeFromFilter, useBoardColumnState } from "@kanbus/ui";
-import "@kanbus/ui/styles/kanban.css";
-import "@kanbus/ui/styles/newsprint.css";
-import "./newsroom-newsprint-board.css";
+import { IssueCollection, IssueDetailPanel, IssueIdFormatProvider, IssueTypeFilter, issueTypeFromFilter, useBoardColumnState } from "@kanbus/ui";
+import "./newsroom-theme";
 import { PlusIcon } from "lucide-react";
 import { newsroomHref } from "../lib/newsroom-base-path";
 import {
@@ -18,6 +16,7 @@ import {
   deskBoardConfig,
   deskContainsAssignment,
   deskContainsContentItem,
+  formatNativeIssueId,
   projectAssignmentBoard,
   projectContentItemBoard,
   type NativeBoardIssue,
@@ -35,7 +34,6 @@ import { isLocalPreviewEnabled } from "../lib/local-preview";
 import { NewsroomArticleEditor } from "./newsroom-article-editor";
 import { NewsroomAssignmentDetail } from "./newsroom-assignment-detail";
 import { NewsroomOpsShell, NewsroomOpsStatusBanner } from "./newsroom-ops-shell";
-import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
 import { readLocalReaderSettings, subscribeReaderSettingsChanges } from "./reader-settings";
 
 /** A board with a story or assignment open lives at `?open=<id>`, distinct from the standalone page for that record. */
@@ -61,7 +59,6 @@ export type NewsroomBoardSubject = "contentItem" | "assignment" | "desk";
 export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardSubject; deskId?: string }) {
   const session = useOptionalNewsDeskClient();
   const allowed = canReadNewsroomBoard(session?.shell.phase);
-  const theme = useResolvedPapyrusTheme();
   const [lowMotion, setLowMotion] = useState(false);
   const [assignmentBoardIssues, setAssignmentBoardIssues] = useState<NativeBoardIssue[]>([]);
   const [publishedVersions, setPublishedVersions] = useState<ContentItemVersionRecord[]>([]);
@@ -172,7 +169,8 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
         </Link>
       )}
     </>}>
-    <div className="organizer-native-board papyrus-newsprint-board" data-kanbus-theme="newsprint" data-color-mode={theme}>
+    <IssueIdFormatProvider formatIssueId={formatNativeIssueId}>
+    <div className="organizer-native-board">
       {error && <NewsroomOpsStatusBanner tone="error">{error}</NewsroomOpsStatusBanner>}
       {subject === "desk" && <IssueTypeFilter config={config} value={typeFilter} onChange={setTypeFilter} name="Record type" className="organizer-board-type-filter" />}
       <div className="organizer-board-body" data-detail-open={Boolean(issue)} ref={boardBodyRef} onScrollCapture={handleBoardScroll}>
@@ -196,5 +194,6 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
         </IssueDetailPanel>}
       </div>
     </div>
+    </IssueIdFormatProvider>
   </NewsroomOpsShell>;
 }

package/components/newsroom-ops-shell.tsx

@@ -19,6 +19,7 @@ import { ProspectusAccountChooser, useProspectusAccountSummary } from "./prospec
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetTrigger } from "./ui/sheet";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu";
 import "./newsroom-organizer.css";
+import { NewsroomThemeFonts, useNewsroomThemeAttributes } from "./newsroom-theme";
 
 export type NewsroomNavCount = {
   count: number | null;
@@ -85,11 +86,12 @@ function Account({ placement }: { placement: "sidebar" | "header" }) {
     media.addEventListener("change", close);
     return () => media.removeEventListener("change", close);
   }, []);
+  const themeAttributes = useNewsroomThemeAttributes();
   return <DropdownMenu open={open} onOpenChange={setOpen}>
     <DropdownMenuTrigger id={`organizer-account-trigger-${placement}`} className={`organizer-account organizer-account-${placement}`} aria-label="Account menu" title="Account menu">
       <UserRound size={18} aria-hidden="true" /><span><strong>{auth.label}</strong><small>{accountSummary ?? (auth.status === "signedIn" ? "Account & preferences" : auth.status === "signedOut" ? "Not signed in" : "Checking session")}</small></span>
     </DropdownMenuTrigger>
-    <DropdownMenuContent className="organizer-account-popup" side={placement === "sidebar" ? "top" : "bottom"} align="end">
+    <DropdownMenuContent className="organizer-account-popup" {...themeAttributes} side={placement === "sidebar" ? "top" : "bottom"} align="end">
       <DropdownMenuGroup>
         <DropdownMenuLabel>{auth.label}</DropdownMenuLabel><DropdownMenuSeparator />
         <ProspectusAccountChooser />
@@ -104,6 +106,7 @@ function Account({ placement }: { placement: "sidebar" | "header" }) {
 
 export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabel, children, demo = false, headerActions, pageTitle, showNavigation = true }: NewsroomOpsShellProps) {
   const pathname = usePathname();
+  const themeAttributes = useNewsroomThemeAttributes();
   const session = useOptionalNewsDeskClient();
   const admin = demo || session?.shell.dashboard?.canManageUsers === true;
   const [menuOpen, setMenuOpen] = useState(false);
@@ -145,7 +148,8 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
     aria-label={sidebarToggleLabel} aria-expanded={!collapsed} aria-controls="organizer-sidebar" onClick={() => setCollapsed(value => !value)}>
     {collapsed ? <PanelLeftOpen size={16} aria-hidden="true" /> : <PanelLeftClose size={16} aria-hidden="true" />}
   </button>;
-  return <div className="newsroom-organizer" data-news-desk data-newsroom-ops-shell="true" data-newsroom-chrome="organizer" data-sidebar-collapsed={collapsed || !showNavigation ? "true" : "false"}>
+  return <div className="newsroom-organizer" {...themeAttributes} data-news-desk data-newsroom-ops-shell="true" data-newsroom-chrome="organizer" data-sidebar-collapsed={collapsed || !showNavigation ? "true" : "false"}>
+    <NewsroomThemeFonts />
     {showNavigation && <aside className="organizer-sidebar" hidden={collapsed} id="organizer-sidebar">
       <div className="organizer-sidebar-head">
         <Link className="organizer-brand" href={getNewsroomNavHref("/newsroom", demo)}>{SITE_BRAND.components?.NewsroomLogo ? <SITE_BRAND.components.NewsroomLogo className="organizer-brand-logo" /> : appTitle}<small>The newsroom</small></Link>
@@ -167,7 +171,7 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
         href={getNewsroomNavHref(item.path, demo)} title={item.description} aria-label={item.label} aria-current={activeTab === item.key ? "page" : undefined}>
         <Icon size={18} aria-hidden="true" /><span>{item.label}</span></Link></li>; })}
       <li><Sheet open={menuOpen} onOpenChange={setMenuOpen}><SheetTrigger className="organizer-more" aria-label="More"><Menu size={18} aria-hidden="true" /><span>More</span></SheetTrigger>
-        <SheetContent side="bottom" className="organizer-menu"><SheetHeader><SheetTitle>Newsroom</SheetTitle><SheetDescription>Workspaces and administration</SheetDescription></SheetHeader>
+        <SheetContent side="bottom" className="organizer-menu" {...themeAttributes}><SheetHeader><SheetTitle>Newsroom</SheetTitle><SheetDescription>Workspaces and administration</SheetDescription></SheetHeader>
           <Navigation activePath={activePath} demo={demo} admin={admin} surface="menu" onNavigate={() => setMenuOpen(false)} />
         </SheetContent>
       </Sheet></li>