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

package/components/newsroom-access-gate.tsx

@@ -6,11 +6,13 @@ import { SITE_BRAND } from "../lib/site-brand";
 import type { NewsDeskShellState } from "../lib/news-desk-session";
 import { cn } from "../lib/utils";
 import { NewsroomOpsShell } from "./newsroom-ops-shell";
+import { NewsroomOverviewSkeleton } from "./newsroom-overview-skeleton";
 import { ReaderAuthControl } from "./reader-auth-control";
 import { buttonVariants } from "./ui/button";
 
 export function NewsDeskAccessGate({ shell, showSectionTabs = false }: { shell: NewsDeskShellState | null; showSectionTabs?: boolean }) {
   const accessPhase = shell?.phase ?? "checkingAccess";
+  const pending = accessPhase === "checkingAccess" || accessPhase === "loadingDesk";
 
   return (
     <NewsroomOpsShell
@@ -21,9 +23,20 @@ export function NewsDeskAccessGate({ shell, showSectionTabs = false }: { shell:
       headerActions={(
         <Link className={cn(buttonVariants({ variant: "ghost", size: "sm" }))} href="/settings">Settings</Link>
       )}
-      pageTitle="Newsroom"
+      pageTitle={showSectionTabs ? "Notification Center" : "Newsroom"}
       showNavigation={showSectionTabs}
     >
+      {pending ? (showSectionTabs ? <NewsroomOverviewSkeleton /> : (
+        <div aria-label="Loading newsroom" className="space-y-4" data-newsroom-page-skeleton role="status">
+          <div className="h-6 w-48 rounded bg-muted" />
+          <div className="h-4 w-3/4 rounded bg-muted" />
+          <div className="grid gap-3 sm:grid-cols-2">
+            {Array.from({ length: 4 }, (_, index) => <div className="h-32 rounded-xl border bg-card p-4" key={index}>
+              <div className="h-4 w-2/3 rounded bg-muted" /><div className="mt-4 h-3 w-1/2 rounded bg-muted" />
+            </div>)}
+          </div>
+        </div>
+      )) : (
       <section aria-live="polite" data-news-desk-access={accessPhase} data-news-desk-access-phase={accessPhase}>
         <div className="space-y-3 rounded-xl border border-border bg-card p-6">
           <p className="m-0 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Access</p>
@@ -38,12 +51,13 @@ export function NewsDeskAccessGate({ shell, showSectionTabs = false }: { shell:
           ) : null}
         </div>
       </section>
+      )}
     </NewsroomOpsShell>
   );
 }
 
 function formatAccessTitle(state: NewsDeskShellState | null): string {
-  if (!state || state.phase === "checkingAccess") return "Checking Desk Credentials";
+  if (!state || state.phase === "checkingAccess") return "Checking Credentials";
   if (state.phase === "loadingDesk") return "Loading Newsroom Records";
   if (state.phase === "forbidden") return "Editor Role Required";
   if (state.phase === "error") return "Newsroom Unavailable";

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) {
@@ -449,8 +513,10 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
     }
     if (!editor) {
       return (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Spinner /> Loading article…
+        <div aria-label="Loading article" className="space-y-5" role="status">
+          <div className="h-8 w-2/3 rounded bg-muted" />
+          <div className="grid gap-4 sm:grid-cols-2"><div className="h-12 rounded bg-muted" /><div className="h-12 rounded bg-muted" /></div>
+          <div className="h-64 rounded-xl border bg-card p-4"><div className="h-4 w-5/6 rounded bg-muted" /><div className="mt-3 h-4 w-3/4 rounded bg-muted" /></div>
         </div>
       );
     }
@@ -551,7 +617,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"
               >
@@ -604,21 +670,21 @@ export function NewsroomArticleEditor({ articleId, demo, embedded = false }: { a
                   </Select>
                 </label>
                 <label className="space-y-1 text-sm font-medium">
-                  <span>Desk</span>
+                  <span>Section</span>
                   <Select
                     onValueChange={(value) => {
                       if (typeof value === "string") patchEditor({ section: value === NO_DESK_VALUE ? "" : value });
                     }}
                     value={deskOptions.some(option => option.value === editor.section) ? editor.section : NO_DESK_VALUE}
                   >
-                    <SelectTrigger aria-label="Desk" className="w-full" data-newsroom-article-section>
-                      <SelectValue>{deskOptions.find(option => option.value === editor.section)?.label ?? "No desk"}</SelectValue>
+                    <SelectTrigger aria-label="Section" className="w-full" data-newsroom-article-section>
+                      <SelectValue>{deskOptions.find(option => option.value === editor.section)?.label ?? "No section"}</SelectValue>
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value={NO_DESK_VALUE}>No desk</SelectItem>
+                      <SelectItem value={NO_DESK_VALUE}>No section</SelectItem>
                       {(["core", "rotating"] as const).map((kind) => deskOptions.some(option => option.kind === kind) ? (
                         <SelectGroup key={kind}>
-                          <SelectLabel>{kind === "core" ? "Core desks" : "Rotating desks"}</SelectLabel>
+                          <SelectLabel>{kind === "core" ? "Core sections" : "Rotating sections"}</SelectLabel>
                           {deskOptions.filter(option => option.kind === kind).map((option) => (
                             <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
                           ))}
@@ -714,18 +780,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 +840,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 +851,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 +906,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-articles-view.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { Badge } from "./ui/badge";
 import { buttonVariants } from "./ui/button";
-import { Spinner } from "./ui/spinner";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
 import { SITE_BRAND } from "../lib/site-brand";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
@@ -89,15 +88,16 @@ export function NewsroomArticlesView({ demo }: { demo: boolean }) {
           </TabsList>
         </Tabs>
         {loadError ? <NewsroomOpsStatusBanner tone="error">{loadError}</NewsroomOpsStatusBanner> : null}
-        {rows === null && !loadError ? (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Spinner /> Loading articles…
-          </div>
-        ) : null}
         {rows !== null && visibleRows.length === 0 ? (
           <p className="text-sm text-muted-foreground">Nothing here yet.</p>
         ) : null}
         <ul className="divide-y divide-border rounded-xl border border-border bg-card" data-newsroom-articles-list>
+          {rows === null && !loadError ? Array.from({ length: 5 }, (_, index) => (
+            <li aria-hidden="true" className="flex items-center justify-between px-4 py-3" key={index}>
+              <span className="w-2/3"><span className="block h-4 w-3/4 rounded bg-muted" /><span className="mt-2 block h-3 w-1/2 rounded bg-muted" /></span>
+              <span className="h-5 w-16 rounded bg-muted" />
+            </li>
+          )) : null}
           {visibleRows.map((row) => (
             <li key={row.id}>
               <Link

package/components/newsroom-assignment-detail.tsx

@@ -36,7 +36,7 @@ export function NewsroomAssignmentDetail({ assignment, deskOptions = [], onDeskC
   const changeDesk = (value: string) => {
     if (!onDeskChange) return;
     setSavingDesk(true); setDeskError(null);
-    onDeskChange(value === NO_DESK_VALUE ? null : value).catch((reason: unknown) => setDeskError(reason instanceof Error ? reason.message : "Could not save the desk.")).finally(() => setSavingDesk(false));
+    onDeskChange(value === NO_DESK_VALUE ? null : value).catch((reason: unknown) => setDeskError(reason instanceof Error ? reason.message : "Could not save the section.")).finally(() => setSavingDesk(false));
   };
   const facts: DetailField[] = [
     { label: "Status", value: assignment.status },
@@ -58,14 +58,14 @@ export function NewsroomAssignmentDetail({ assignment, deskOptions = [], onDeskC
       {facts.map(field => <div key={field.label}><dt>{field.label}</dt><dd>{field.value}</dd></div>)}
     </dl>
     {onDeskChange && <label className="newsroom-assignment-detail-desk">
-      <span>Desk</span>
+      <span>Section</span>
       <Select onValueChange={(value) => { if (typeof value === "string") changeDesk(value); }} value={deskChoices.some(option => option.value === currentDesk) ? currentDesk : NO_DESK_VALUE} disabled={savingDesk}>
-        <SelectTrigger aria-label="Desk" className="w-full" data-newsroom-assignment-desk>
-          <SelectValue>{deskChoices.find(option => option.value === currentDesk)?.label ?? "No desk"}</SelectValue>
+        <SelectTrigger aria-label="Section" className="w-full" data-newsroom-assignment-desk>
+          <SelectValue>{deskChoices.find(option => option.value === currentDesk)?.label ?? "No section"}</SelectValue>
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value={NO_DESK_VALUE}>No desk</SelectItem>
-          {(["core", "rotating"] as const).map(kind => deskChoices.some(option => option.kind === kind) ? <SelectGroup key={kind}><SelectLabel>{kind === "core" ? "Core desks" : "Rotating desks"}</SelectLabel>{deskChoices.filter(option => option.kind === kind).map(option => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectGroup> : null)}
+          <SelectItem value={NO_DESK_VALUE}>No section</SelectItem>
+          {(["core", "rotating"] as const).map(kind => deskChoices.some(option => option.kind === kind) ? <SelectGroup key={kind}><SelectLabel>{kind === "core" ? "Core sections" : "Rotating sections"}</SelectLabel>{deskChoices.filter(option => option.kind === kind).map(option => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectGroup> : null)}
         </SelectContent>
       </Select>
       {currentDesk && !deskChoices.some(option => option.value === currentDesk) ? <small className="newsroom-desk-legacy-value">Old section value: {currentDesk}</small> : null}

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[]>([]);
@@ -163,7 +160,7 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
   if (!allowed) return <NewsDeskAccessGate shell={session?.shell ?? null} />;
   return <NewsroomOpsShell activeTab={subject === "contentItem" ? "articles" : subject === "desk" ? "desks" : "assignments"} appTitle={SITE_BRAND.appTitle} backLabel={SITE_BRAND.backToHomeLabel} pageTitle={pageTitle}
     headerActions={<>
-      <span role="status" className="organizer-board-note">{loading ? "Loading records…" : `${issues.length} records loaded.`}</span>
+      {!loading ? <span role="status" className="organizer-board-note">{issues.length} records loaded.</span> : null}
       <div role="group" aria-label="Record presentation" className="organizer-board-view-toggle"><button type="button" className="organizer-header-button" aria-pressed={view === "board"} onClick={() => setView("board")}>Board</button><button type="button" className="organizer-header-button" aria-pressed={view === "list"} onClick={() => setView("list")}>List</button></div>
       {showsContentItems && (
         <Link className="organizer-header-button" data-newsroom-article-new href={getNewsroomNavHref(newsroomHref("articles", "new"))}>
@@ -172,15 +169,21 @@ 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}>
-        <IssueCollection issues={issues} config={config} query={{ type: subject === "desk" ? issueTypeFromFilter(typeFilter) : boardType }} view={view}
+        {loading && !issues.length ? <div aria-label="Loading board records" className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3" role="status">
+          {Array.from({ length: 3 }, (_, column) => <div className="min-h-64 space-y-3 rounded-xl border bg-card p-4" key={column}>
+            <div className="h-4 w-1/2 rounded bg-muted" />
+            {Array.from({ length: 2 }, (_, row) => <div className="h-24 rounded-lg border bg-background p-3" key={row}><div className="h-4 w-3/4 rounded bg-muted" /><div className="mt-3 h-3 w-1/2 rounded bg-muted" /></div>)}
+          </div>)}
+        </div> : <IssueCollection issues={issues} config={config} query={{ type: subject === "desk" ? issueTypeFromFilter(typeFilter) : boardType }} view={view}
           motion={lowMotion ? STATIC_MOTION : undefined}
           collapsedColumns={columnState.collapsedColumns} onToggleCollapse={columnState.toggleColumn} initialScroll="start"
           selectedIssueId={selected} detailOpen={Boolean(issue)} onSelectIssue={item => setSelected(item.id)} ariaLabel={pageTitle}
-          emptyMessage={loading ? "Loading records…" : error ? "Records could not be loaded." : "No records in this selection."} />
+          emptyMessage={error ? "Records could not be loaded." : "No records in this selection."} />}
         {issue && <IssueDetailPanel issue={issue} onClose={() => setSelected(null)} fields={[]}>
           {issue.kind === "contentItem"
             ? <>
@@ -196,5 +199,6 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
         </IssueDetailPanel>}
       </div>
     </div>
+    </IssueIdFormatProvider>
   </NewsroomOpsShell>;
 }

package/components/newsroom-curation-bootstrap.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import {useEffect,useState,type ReactNode} from 'react';
+import {loadProspectusAccountState} from '../lib/prospectus-account-client';
+import type {CurationBootstrap} from '../lib/curation-client';
+import {NewsroomCurationProvider} from './newsroom-curation-provider';
+
+type Fetcher=(input:string,init?:RequestInit)=>Promise<Response>;
+const CONTEXT_PATH='/api/newsroom/curation/context';
+
+function validBootstrap(value:unknown):value is CurationBootstrap{
+  const body=value as Partial<CurationBootstrap>|null;
+  const scope=body?.scope;
+  return !!scope&&[scope.accountId,scope.publicationId,scope.bindingRevision].every(item=>typeof item==='string'&&item.trim()!=='')
+    &&(body!.mode==='embedded'||body!.mode==='remote')&&Array.isArray(body!.capabilities);
+}
+
+/**
+ * Ask the server for the curation bootstrap, or null. Only a signed-in person with a selected
+ * account causes a context read; every other outcome (no Prospectus, signed out, no selection,
+ * any refusal or failure) is null, so the released CMS is unchanged.
+ */
+export async function loadCurationBootstrap(returnPath:string,fetcher:Fetcher=fetch):Promise<CurationBootstrap|null>{
+  try{
+    const account=await loadProspectusAccountState(returnPath,fetcher);
+    if(account.status!=='signedIn'||!account.selectedAccountId)return null;
+    const response=await fetcher(CONTEXT_PATH,{credentials:'same-origin',cache:'no-store'});
+    if(!response.ok)return null;
+    const body=await response.json().catch(()=>null);
+    if(!validBootstrap(body)||body.scope.accountId!==account.selectedAccountId)return null;
+    return body;
+  }catch{return null;}
+}
+
+/** Mounts the curation provider for the References tab. Fails closed to no provider content. */
+export function NewsroomCurationBootstrap({enabled=true,children}:{enabled?:boolean;children:ReactNode}){
+  const [bootstrap,setBootstrap]=useState<CurationBootstrap|null>(null);
+  useEffect(()=>{
+    if(!enabled)return;
+    let current=true;
+    void loadCurationBootstrap(window.location.pathname).then(value=>{if(current)setBootstrap(value);});
+    return()=>{current=false;setBootstrap(null);};
+  },[enabled]);
+  return <NewsroomCurationProvider bootstrap={bootstrap}>{children}</NewsroomCurationProvider>;
+}