@anthusai/papyrus 5.41.2 → 5.41.3

package/app/globals.css

@@ -10170,3 +10170,36 @@ img {
   }
 }
 
+
+.papyrus-console-mobile-trigger { display: none; }
+@media (max-width: 900px) {
+  .edition-progress__button--console { display: none; }
+  .papyrus-console-mobile-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    right: 16px;
+    bottom: calc(76px + env(safe-area-inset-bottom));
+    z-index: 1200;
+    min-width: 64px;
+    min-height: 44px;
+    padding: 8px 16px;
+    background: rgb(var(--paper-rgb));
+    color: var(--ink);
+    border: 1px solid currentColor;
+    font: 600 14px Arial, sans-serif;
+  }
+  .papyrus-console-mobile-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
+  .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;
+  }
+}
+
+@media (max-width: 900px) {
+  .papyrus-console__header button { min-width: 44px; min-height: 44px; }
+}

package/components/papyrus-console-frame.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+export function PapyrusConsoleFrame({ available, open, reserveSpace, onOpen, onClose, page, children }: {
+  available: boolean;
+  open: boolean;
+  reserveSpace: boolean;
+  onOpen: () => void;
+  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>(".papyrus-console-mobile-trigger, .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 && !open ? <button className="papyrus-console-mobile-trigger" type="button" aria-label="Open private chat" aria-expanded={false} aria-controls="papyrus-console-panel" onClick={onOpen}>Chat</button> : null}
+    {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,7 @@ import {
   type ReaderMotionSetting,
 } from "./reader-settings";
 import { PapyrusConsoleConversation, type ConsoleConversationMessage } from "./papyrus-console-conversation";
+import { PapyrusConsoleFrame } from "./papyrus-console-frame";
 import { PapyrusPrivateChatPanel } from "./papyrus-private-chat-panel";
 import { ModelSelector } from "./ai-elements/model-selector";
 import { Suggestion, Suggestions } from "./ai-elements/suggestion";
@@ -358,20 +359,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={toggleOpen} onOpen={openConsole} page={children}>
+        {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}
+      </PapyrusConsoleFrame>
     </PapyrusConsoleContext.Provider>
   );
 }

package/package.json

@@ -118,6 +118,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",
@@ -458,7 +459,7 @@
       "optional": true
     }
   },
-  "version": "5.41.2",
+  "version": "5.41.3",
   "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.3",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",