@anthusai/papyrus 5.41.2 → 5.41.4

package/app/globals.css

@@ -10170,3 +10170,32 @@ img {
   }
 }
 
+
+@media (max-width: 900px) {
+  .edition-progress__button--console { display: none; }
+  .papyrus-console--open {
+    --papyrus-console-width: 100vw;
+    background: rgb(var(--paper-rgb));
+    height: 100dvh;
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: border-box;
+  }
+}
+
+.papyrus-console__access {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 24px 18px;
+  overflow-y: auto;
+  color: var(--ink);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+.papyrus-console__access strong { font-size: 1.15rem; }
+.papyrus-console__access button { min-height: 44px; padding: 10px 14px; font: inherit; text-transform: none; letter-spacing: normal; }
+
+@media (max-width: 900px) {
+  .papyrus-console__header button { min-width: 44px; min-height: 44px; }
+}

package/components/newsroom-mobile-navigation.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { BookOpen, ClipboardList, House, MessageCircle, MessagesSquare } from "lucide-react";
+
+const ICONS = { overview: House, articles: ClipboardList, references: BookOpen, messages: MessagesSquare };
+
+export function NewsroomMobileNavigation({ items, activeTab, chat, more }: {
+  items: readonly { key: string; label: string; description: string; href: string }[];
+  activeTab: string;
+  chat?: { open: boolean; onOpen: () => void };
+  more: ReactNode;
+}) {
+  return <nav className="organizer-bottom-nav" aria-label="Primary newsroom navigation"><ul>
+    {items.map(item => {
+      if (item.key === "messages" && chat) return <li key="chat"><button className="organizer-chat" type="button" aria-label="Open private chat" aria-expanded={chat.open} aria-controls="papyrus-console-panel" onClick={chat.onOpen}><MessageCircle size={18} aria-hidden="true" /><span>Chat</span></button></li>;
+      const Icon = ICONS[item.key as keyof typeof ICONS];
+      return <li key={item.key}><Link href={item.href} 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>{more}</li>
+  </ul></nav>;
+}

package/components/newsroom-ops-shell.tsx

@@ -8,7 +8,7 @@ import { cn } from "../lib/utils";
 import { useEffect, useId, useState, type ReactNode } from "react";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { BookOpen, ClipboardList, House, Menu, Search, MessagesSquare, PanelLeftClose, PanelLeftOpen, Settings, UserRound, LogIn, LogOut } from "lucide-react";
+import { Menu, Search, PanelLeftClose, PanelLeftOpen, Settings, UserRound, LogIn, LogOut } from "lucide-react";
 import { ORGANIZER_NAV_GROUPS, ORGANIZER_PRIMARY_NAV, ORGANIZER_SETTINGS_DESTINATION } from "../lib/newsroom-organizer-nav";
 import { browserPathToInternalNewsroomPath } from "../lib/newsroom-base-path";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
@@ -20,6 +20,8 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetTr
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu";
 import "./newsroom-organizer.css";
 import { NewsroomThemeFonts, useNewsroomThemeAttributes } from "./newsroom-theme";
+import { NewsroomMobileNavigation } from "./newsroom-mobile-navigation";
+import { usePapyrusConsole } from "./papyrus-console-shell";
 
 export type NewsroomNavCount = {
   count: number | null;
@@ -55,8 +57,6 @@ function OrganizerSearch({ demo }: { demo: boolean }) {
   </form>;
 }
 
-const ICONS = { overview: House, articles: ClipboardList, references: BookOpen, messages: MessagesSquare };
-
 /** Navigation is a presentation layer; existing route and server authorization still own access. */
 function Navigation({ activePath, demo, admin, surface, onNavigate }: { activePath: string; demo: boolean; admin: boolean; surface: string; onNavigate?: () => void }) {
   const id = useId();
@@ -105,6 +105,7 @@ function Account({ placement }: { placement: "sidebar" | "header" }) {
 }
 
 export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabel, children, demo = false, headerActions, pageTitle, showNavigation = true }: NewsroomOpsShellProps) {
+  const consoleState = usePapyrusConsole();
   const pathname = usePathname();
   const themeAttributes = useNewsroomThemeAttributes();
   const session = useOptionalNewsDeskClient();
@@ -166,16 +167,13 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
       </header>
       <main className="organizer-main">{demo && <p className="organizer-demo-notice">Demo workspace · synthetic examples</p>}{children}</main>
     </div>
-    {showNavigation && <nav className="organizer-bottom-nav" aria-label="Primary newsroom navigation"><ul>
-      {ORGANIZER_PRIMARY_NAV.map(item => { const Icon = ICONS[item.key as keyof typeof ICONS]; return <li key={item.key}><Link
-        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>
+    {showNavigation && <NewsroomMobileNavigation activeTab={activeTab} items={ORGANIZER_PRIMARY_NAV.map(item => ({ ...item, href: getNewsroomNavHref(item.path, demo) }))}
+      chat={consoleState?.shouldOfferConsole ? { open: consoleState.open, onOpen: consoleState.openConsole } : undefined}
+      more={<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" {...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>
-    </ul></nav>}
+      </Sheet>} />}
   </div>;
 }
 

package/components/newsroom-organizer.css

@@ -33,6 +33,7 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .organizer-account-popup{min-width:250px;max-width:calc(100vw - 32px);border:1px solid var(--org-line);padding:6px;border-radius:4px}
 .organizer-account-popup [role=menuitem]{min-height:40px;font-size:12px}.organizer-account-popup .reader-auth{display:contents}.organizer-account-popup .reader-auth__error{display:block;white-space:normal;font-size:11px;padding:8px}
 .organizer-bottom-nav{display:none}
+.organizer-bottom-nav button{appearance:none;border:0;background:transparent;color:inherit}
 .organizer-main:has(.organizer-native-board){display:flex;overflow:hidden}
 .organizer-native-board{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;gap:8px}
 .organizer-board-view-toggle{display:flex;gap:4px;flex-shrink:0}

package/components/papyrus-console-frame.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+export function PapyrusConsoleFrame({ available, open, reserveSpace, onClose, page, children }: {
+  available: boolean;
+  open: boolean;
+  reserveSpace: boolean;
+  onClose: () => void;
+  page: ReactNode;
+  children: ReactNode;
+}) {
+  const [mobile, setMobile] = useState(false);
+  const [viewport, setViewport] = useState<{ top: number; height: number } | null>(null);
+  const panel = useRef<HTMLElement>(null);
+  const modal = available && open && mobile;
+
+  useEffect(() => {
+    const media = window.matchMedia("(max-width: 900px)");
+    const update = () => setMobile(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+
+  useEffect(() => {
+    if (!modal) return;
+    const visual = window.visualViewport;
+    const update = () => setViewport({ top: visual?.offsetTop ?? 0, height: visual?.height ?? window.innerHeight });
+    update();
+    visual?.addEventListener("resize", update);
+    visual?.addEventListener("scroll", update, { passive: true });
+    return () => {
+      visual?.removeEventListener("resize", update);
+      visual?.removeEventListener("scroll", update);
+    };
+  }, [modal]);
+
+  useEffect(() => {
+    if (!modal) return;
+    const previous = document.activeElement;
+    const frame = requestAnimationFrame(() => panel.current?.querySelector<HTMLElement>("button")?.focus());
+    return () => {
+      cancelAnimationFrame(frame);
+      requestAnimationFrame(() => {
+        if (previous instanceof HTMLElement && previous !== document.body && previous.isConnected && !previous.closest("[inert]")) previous.focus();
+        else Array.from(document.querySelectorAll<HTMLElement>(".organizer-chat, .edition-progress__button--console, .papyrus-console__header button")).find(element => element.getClientRects().length > 0)?.focus();
+      });
+    };
+  }, [modal]);
+
+  return <>
+    <div className={reserveSpace ? "papyrus-console-page papyrus-console-page--open" : "papyrus-console-page"} inert={modal || undefined}>{page}</div>
+    {available ? <aside ref={panel} id="papyrus-console-panel" className={open ? "papyrus-console papyrus-console--open" : "papyrus-console"} aria-label="Papyrus console" role={modal ? "dialog" : undefined} aria-modal={modal || undefined}
+      style={modal && viewport ? { top: viewport.top, height: viewport.height, bottom: "auto" } : undefined}
+      onKeyDown={event => {
+        if (!modal) return;
+        if (event.key === "Escape") { event.preventDefault(); onClose(); return; }
+        if (event.key !== "Tab") return;
+        const focusable = Array.from(panel.current?.querySelectorAll<HTMLElement>('button:not(:disabled), a[href], input:not(:disabled), textarea:not(:disabled), select:not(:disabled), [tabindex="0"]') ?? []).filter(element => element.getClientRects().length > 0);
+        const first = focusable[0], last = focusable.at(-1);
+        if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
+        else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
+      }}>{children}</aside> : null}
+  </>;
+}

package/components/papyrus-console-shell.tsx

@@ -35,6 +35,8 @@ import {
   type ReaderMotionSetting,
 } from "./reader-settings";
 import { PapyrusConsoleConversation, type ConsoleConversationMessage } from "./papyrus-console-conversation";
+import { PapyrusConsoleFrame } from "./papyrus-console-frame";
+import { useConsoleVisibility } from "./use-console-visibility";
 import { PapyrusPrivateChatPanel } from "./papyrus-private-chat-panel";
 import { ModelSelector } from "./ai-elements/model-selector";
 import { Suggestion, Suggestions } from "./ai-elements/suggestion";
@@ -149,12 +151,12 @@ const PapyrusConsoleContext = createContext<PapyrusConsoleContextValue | null>(n
 export function PapyrusConsoleShell({ children, privateChatEnabled = false }: PapyrusConsoleShellProps) {
   const pathname = usePathname();
   const [session, setSession] = useState<ReaderSessionSnapshot | null>(null);
-  const [open, setOpen] = useState(false);
   const [openingReferenceChat, setOpeningReferenceChat] = useState(false);
   const internalPathname = browserPathToInternalNewsroomPath(pathname);
   const isNewsroomPath = internalPathname === "/newsroom" || internalPathname.startsWith("/newsroom/");
   const canUseConsole = Boolean(session?.hasSession && session.groups.some((group) => group === "editor" || group === "admin"));
   const shouldOfferConsole = isNewsroomPath && canUseConsole;
+  const { open, openConsole, closeConsole, toggleOpen } = useConsoleVisibility({ available: shouldOfferConsole });
 
   useEffect(() => {
     let active = true;
@@ -165,37 +167,11 @@ export function PapyrusConsoleShell({ children, privateChatEnabled = false }: Pa
       .catch(() => {
         if (active) setSession({ auth: { status: "signedOut", label: "Signed out" }, groups: [], hasSession: false });
       });
-    try {
-      setOpen(window.localStorage.getItem("papyrus:console-open") === "true");
-    } catch {
-      setOpen(false);
-    }
     return () => {
       active = false;
     };
   }, []);
 
-  const toggleOpen = useCallback(() => {
-    setOpen((current) => {
-      const next = !current;
-      try {
-        window.localStorage.setItem("papyrus:console-open", String(next));
-      } catch {
-        // Ignore storage failures.
-      }
-      return next;
-    });
-  }, []);
-
-  const openConsole = useCallback(() => {
-    setOpen(true);
-    try {
-      window.localStorage.setItem("papyrus:console-open", "true");
-    } catch {
-      // Ignore storage failures.
-    }
-  }, []);
-
   const startReferenceChat = useCallback(async (target: NewsroomKnowledgeQueryTarget) => {
     if (!canUseConsole) {
       throw new Error("Chat is only available to editor/admin sessions.");
@@ -358,20 +334,15 @@ export function PapyrusConsoleShell({ children, privateChatEnabled = false }: Pa
 
   return (
     <PapyrusConsoleContext.Provider value={consoleContext}>
-      <div className={canUseConsole && open ? "papyrus-console-page papyrus-console-page--open" : "papyrus-console-page"}>
-        {children}
-      </div>
-      {shouldOfferConsole ? (
-        <aside className={open ? "papyrus-console papyrus-console--open" : "papyrus-console"} aria-label="Papyrus console">
-          {open ? (
-            canUseConsole
-              ? privateChatEnabled
-                ? <PapyrusPrivateChatPanel onClose={toggleOpen} />
-                : <ConsolePanel actorEmail={session?.auth.status === "signedIn" ? (session.auth.email ?? null) : null} actorLabel={session?.auth.label ?? "Papyrus editor"} onClose={toggleOpen} />
-              : <ConsoleAccessPanel onClose={toggleOpen} session={session} />
-          ) : null}
-        </aside>
-      ) : null}
+      <PapyrusConsoleFrame available={shouldOfferConsole} open={open} reserveSpace={canUseConsole && open} onClose={closeConsole} page={children}>
+        {open ? (
+          canUseConsole
+            ? privateChatEnabled
+                ? <PapyrusPrivateChatPanel onClose={closeConsole} />
+                : <ConsolePanel actorEmail={session?.auth.status === "signedIn" ? (session.auth.email ?? null) : null} actorLabel={session?.auth.label ?? "Papyrus editor"} onClose={closeConsole} />
+            : <ConsoleAccessPanel onClose={closeConsole} session={session} />
+        ) : null}
+      </PapyrusConsoleFrame>
     </PapyrusConsoleContext.Provider>
   );
 }

package/components/papyrus-private-chat-panel.tsx

@@ -175,21 +175,26 @@ export function PapyrusPrivateChatPanel({ onClose }: { onClose: () => void }) {
       <button className="papyrus-console__close" onClick={onClose} type="button" aria-label="Close console">×</button>
     </header>
     {channel ? <p className="papyrus-console__empty" role="status">Private conversation for your selected Account.</p> : null}
-    {!channel && !loading ? <div className="papyrus-console__empty" role="alert">
+    {!channel && !loading ? <div className="papyrus-console__access" role="alert">
       {error === "chat_identity_connection_required" ? <>
         <strong>Connect your publishing account</strong>
         {connectionNotice ? <span>{connectionNotice}</span> : null}
         <span>Continue with the same Google account you use in the newsroom, then choose the Account for this private conversation.</span>
         <button className="papyrus-console__new-session" disabled={connecting} onClick={() => void connect()} type="button">{connecting ? "Connecting…" : "Connect publishing account"}</button>
       </> : accountState?.status === "signedIn" ? <>
-        <strong>Choose your publishing Account</strong>
-        {accountState.publishingAccounts.length === 0 ? <span>This identity has no publishing Account for this site. Ask the Account owner to confirm your existing access.</span> : accountState.publishingAccounts.map(account => <button className="papyrus-console__new-session" disabled={connecting} key={account.accountId} onClick={() => void chooseAccount(account.accountId)} type="button">{account.name ?? account.accountId}</button>)}
+        <strong>{accountState.publishingAccounts.length === 0 ? "Chat access is unavailable" : "Choose your publishing Account"}</strong>
+        {accountState.publishingAccounts.length === 0 ? <>
+          <span>None of your Accounts is enabled for this publication. Publication setup must be resolved before you can chat.</span>
+          <span>You can return to the newsroom while this is resolved. Check again after access has been corrected.</span>
+          <button className="papyrus-console__new-session" onClick={() => void openConversation()} type="button">Check again</button>
+        </> : accountState.publishingAccounts.map(account => <button className="papyrus-console__new-session" disabled={connecting} key={account.accountId} onClick={() => void chooseAccount(account.accountId)} type="button">{account.name ?? account.accountId}</button>)}
         {error !== "publishing_account_required" ? <span>{error}</span> : null}
       </> : <>
         <strong>Private chat could not be opened.</strong>
-        <span>{error === "sign_in_required" ? "Your newsroom session has expired. Sign in from the account menu, then retry." : error}</span>
+        <span>{error === "sign_in_required" ? "Your newsroom session has expired. Return to the newsroom and sign in from the account menu, then retry." : error === "chat_account_access_denied" ? "Your access to this conversation has changed. Retry to check your current access." : error === "publishing_account_required" ? "Publishing Account access could not be checked. Retry when your connection is available." : error}</span>
         <button className="papyrus-console__new-session" onClick={() => void openConversation()} type="button">Retry</button>
       </>}
+      <button className="papyrus-console__new-session" onClick={onClose} type="button">Back to newsroom</button>
     </div> : <PapyrusConsoleConversation
       messages={conversationMessages}
       isSending={sending || loading || !channel}

package/components/use-console-visibility.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useConsoleVisibility({ available, persist = true }: { available: boolean; persist?: boolean }) {
+  const [open, setOpen] = useState(false);
+  const visible = useRef(false);
+  const entry = useRef<string | null>(null);
+  const setVisible = useCallback((next: boolean) => {
+    visible.current = next;
+    setOpen(next);
+    if (persist) try { localStorage.setItem("papyrus:console-open", String(next)); } catch { /* Optional preference. */ }
+  }, [persist]);
+  const openConsole = useCallback(() => {
+    if (!available || visible.current) return;
+    const existing = history.state?.papyrusMobileChat;
+    if (typeof existing === "string") entry.current = existing;
+    else if (matchMedia("(max-width: 900px)").matches) {
+      entry.current = crypto.randomUUID();
+      history.pushState({ ...history.state, papyrusMobileChat: entry.current }, "", location.href);
+    }
+    setVisible(true);
+  }, [available, setVisible]);
+  const closeConsole = useCallback(() => {
+    if (entry.current && history.state?.papyrusMobileChat === entry.current) history.back();
+    else setVisible(false);
+  }, [setVisible]);
+  const toggleOpen = useCallback(() => {
+    if (visible.current) closeConsole();
+    else openConsole();
+  }, [closeConsole, openConsole]);
+  useEffect(() => {
+    if (!available) {
+      visible.current = false;
+      setOpen(false);
+      return;
+    }
+    const pop = (event: PopStateEvent) => {
+      if (entry.current) setVisible(event.state?.papyrusMobileChat === entry.current);
+    };
+    window.addEventListener("popstate", pop);
+    if (typeof history.state?.papyrusMobileChat === "string") openConsole();
+    else if (persist) try { if (localStorage.getItem("papyrus:console-open") === "true") openConsole(); } catch { /* Optional preference. */ }
+    return () => window.removeEventListener("popstate", pop);
+  }, [available, openConsole, persist, setVisible]);
+  return { open, openConsole, closeConsole, toggleOpen };
+}

package/package.json

@@ -106,6 +106,7 @@
     "./components/newsroom-client-shell": "./components/newsroom-client-shell.tsx",
     "./components/newsroom-curation-bootstrap": "./components/newsroom-curation-bootstrap.tsx",
     "./components/newsroom-curation-provider": "./components/newsroom-curation-provider.tsx",
+    "./components/newsroom-mobile-navigation": "./components/newsroom-mobile-navigation.tsx",
     "./components/newsroom-ops-overview": "./components/newsroom-ops-overview.tsx",
     "./components/newsroom-ops-shell": "./components/newsroom-ops-shell.tsx",
     "./components/newsroom-overview-skeleton": "./components/newsroom-overview-skeleton.tsx",
@@ -118,6 +119,7 @@
     "./components/newsroom-topics-view": "./components/newsroom-topics-view.tsx",
     "./components/notification-center": "./components/notification-center.tsx",
     "./components/papyrus-console-conversation": "./components/papyrus-console-conversation.tsx",
+    "./components/papyrus-console-frame": "./components/papyrus-console-frame.tsx",
     "./components/papyrus-console-shell": "./components/papyrus-console-shell.tsx",
     "./components/papyrus-private-chat-panel": "./components/papyrus-private-chat-panel.tsx",
     "./components/pictogram-figure": "./components/pictogram-figure.tsx",
@@ -167,6 +169,7 @@
     "./components/ui/tooltip": "./components/ui/tooltip.tsx",
     "./components/use-blog-header-obstacles": "./components/use-blog-header-obstacles.ts",
     "./components/use-brand-fonts-ready": "./components/use-brand-fonts-ready.ts",
+    "./components/use-console-visibility": "./components/use-console-visibility.ts",
     "./components/use-editorial-checks": "./components/use-editorial-checks.ts",
     "./components/use-near-viewport": "./components/use-near-viewport.ts",
     "./components/use-paged-content-item-versions": "./components/use-paged-content-item-versions.ts",
@@ -458,7 +461,7 @@
       "optional": true
     }
   },
-  "version": "5.41.2",
+  "version": "5.41.4",
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.7.3",
     "@aws-crypto/sha256-js": "5.2.0",

package/routes.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.41.2",
+  "version": "5.41.4",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",

package/src/with-papyrus.mjs

@@ -50,7 +50,7 @@ export function staticGenerationSettings() {
   };
 }
 
-export const DEFAULT_TRANSPILE_PACKAGES = ["@anthusai/papyrus", "cyclotron", "chatticus"];
+export const DEFAULT_TRANSPILE_PACKAGES = ["@anthusai/papyrus", "cyclotron", "chatticus", "lucide-react"];
 
 export function mergeTranspilePackages(existing = []) {
   return [...new Set([...existing, ...DEFAULT_TRANSPILE_PACKAGES])];