@anthusai/papyrus 0.0.0 → 1.0.0-next.10

package/components/pictogram-figure.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import Image from "next/image";
+import type { ArticleImageLayout, ArticleImageThemeVariants } from "../lib/articles";
+import { shouldBypassImageOptimization } from "../lib/image-url";
+import { resolveThemedImageSrc } from "../lib/themed-image";
+import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
+
+export type PictogramFigureProps = {
+  alt: string;
+  caption?: string;
+  credit: string;
+  figureClassName: string;
+  height: number;
+  layout?: ArticleImageLayout;
+  priority?: boolean;
+  sizes: string;
+  slug: string;
+  src?: string;
+  themeVariants?: ArticleImageThemeVariants;
+  width: number;
+};
+
+/**
+ * Generic media figure for publications without a bespoke pictogram system.
+ * This is the default `renderers/pretext` falls back to for any publication
+ * that isn't Threat Intelligence -- it mirrors the plain-image branch of
+ * `publications/threat_intelligence/pictograms/figure.tsx` (the branch that
+ * component itself already uses whenever a slug isn't a registered TI
+ * pictogram), so behavior for a plain themed image is identical either way.
+ */
+export function PictogramFigure({
+  alt,
+  caption,
+  credit,
+  figureClassName,
+  height,
+  priority = false,
+  sizes,
+  src = "",
+  themeVariants,
+  width,
+}: PictogramFigureProps) {
+  const resolvedTheme = useResolvedPapyrusTheme();
+  const themedImageSrc = resolveThemedImageSrc(src, themeVariants, resolvedTheme);
+
+  if (!themedImageSrc) {
+    return null;
+  }
+
+  return (
+    <figure className={figureClassName}>
+      <Image
+        src={themedImageSrc}
+        alt={alt}
+        width={width}
+        height={height}
+        sizes={sizes}
+        priority={priority}
+        unoptimized={shouldBypassImageOptimization(themedImageSrc)}
+      />
+      <figcaption>{caption ?? credit}</figcaption>
+    </figure>
+  );
+}

package/components/presentation-footer.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import Link from "next/link";
+import type { CSSProperties, MouseEvent as ReactMouseEvent } from "react";
+import {
+  PRESENTATION_FOOTER_UTILITIES,
+  type PresentationFooterEntry,
+  type PresentationFooterGeometry,
+  type PresentationFooterUtilityEntry,
+} from "../lib/presentation-footer";
+import { ReaderAuthControl } from "./reader-auth-control";
+import { ReaderThemeControl } from "./reader-theme-control";
+
+type PresentationFooterProps = {
+  disableLinks?: boolean;
+  editionBasePath?: string;
+  entries: PresentationFooterEntry[];
+  geometry?: PresentationFooterGeometry;
+  onSectionClick?: (event: ReactMouseEvent<HTMLAnchorElement>, entry: PresentationFooterEntry, href: string) => void;
+  resolveSectionHref: (entry: PresentationFooterEntry) => string;
+  subtitle: string;
+  title?: string;
+  utilityEntries?: PresentationFooterUtilityEntry[];
+  variant?: "newspaper" | "presentation";
+};
+
+export function PresentationFooter({
+  disableLinks = false,
+  editionBasePath,
+  entries,
+  geometry,
+  onSectionClick,
+  resolveSectionHref,
+  subtitle,
+  title,
+  utilityEntries = PRESENTATION_FOOTER_UTILITIES,
+  variant = "presentation",
+}: PresentationFooterProps) {
+  const className = variant === "newspaper" ? "front-footer" : "front-footer front-footer--presentation";
+
+  return (
+    <footer
+      aria-label="Publication footer"
+      className={className}
+      data-front-footer="true"
+      data-presentation-footer={variant === "presentation" ? "true" : undefined}
+      style={geometry ? getFooterGeometryStyle(geometry) : getPresentationFooterStyle(entries, utilityEntries)}
+    >
+      <div className="front-footer__heading">
+        {title ? (
+          <span className="front-footer__brand">
+            <span className="front-footer__brand-title">{title}</span>
+            {subtitle ? <span className="front-footer__brand-subtitle">{subtitle}</span> : null}
+          </span>
+        ) : (
+          <span>{subtitle}</span>
+        )}
+        <span className="front-footer__meta">{entries.length} sections</span>
+      </div>
+      {entries.length > 0 ? (
+        <nav className="front-footer__sections" aria-label="Edition sections">
+          {entries.map((entry) => {
+            const href = resolveSectionHref(entry);
+            if (disableLinks) {
+              return (
+                <span className="front-footer__section-link" data-footer-section={entry.section} key={`${entry.section}-${entry.articleSlug}`}>
+                  <span className="front-footer__section-name">{entry.section}</span>
+                  <span className="front-footer__section-title">{entry.articleTitle}</span>
+                </span>
+              );
+            }
+            return (
+              <a
+                className="front-footer__section-link"
+                data-footer-section={entry.section}
+                href={href}
+                key={`${entry.section}-${entry.articleSlug}`}
+                onClick={onSectionClick ? (event) => onSectionClick(event, entry, href) : undefined}
+              >
+                <span className="front-footer__section-name">{entry.section}</span>
+                <span className="front-footer__section-title">{entry.articleTitle}</span>
+              </a>
+            );
+          })}
+        </nav>
+      ) : null}
+      <div className="front-footer__utilities" aria-label="Publication utilities">
+        {!disableLinks ? <ReaderThemeControl className="front-footer__theme-control" /> : null}
+        {utilityEntries.map((entry) => {
+          if (entry.id === "newsDesk" && disableLinks) return null;
+
+          if (entry.id === "login" && !disableLinks) {
+            return (
+              <ReaderAuthControl className="front-footer__utility-link" dataFooterUtility={entry.id} key={entry.id} postAuthPath={editionBasePath} />
+            );
+          }
+
+          return entry.disabled || disableLinks ? (
+            <span
+              aria-disabled="true"
+              className="front-footer__utility-link"
+              data-footer-utility={entry.id}
+              key={entry.id}
+              role="link"
+            >
+              {entry.label}
+            </span>
+          ) : (
+            <Link className="front-footer__utility-link" data-footer-utility={entry.id} href={entry.href} key={entry.id}>
+              {entry.label}
+            </Link>
+          );
+        })}
+      </div>
+    </footer>
+  );
+}
+
+function getFooterGeometryStyle(geometry: PresentationFooterGeometry): CSSProperties {
+  return {
+    "--front-footer-height": `${geometry.height}px`,
+    "--front-footer-margin-top": `${geometry.marginTop}px`,
+    "--front-footer-row-height": `${geometry.rowHeight}px`,
+    "--front-footer-section-columns": geometry.sectionColumns,
+    "--front-footer-section-rows": geometry.sectionRows,
+  } as CSSProperties;
+}
+
+function getPresentationFooterStyle(
+  entries: PresentationFooterEntry[],
+  utilityEntries: PresentationFooterUtilityEntry[],
+): CSSProperties {
+  const { sectionColumns, sectionRows } = getPresentationFooterGrid(entries.length, utilityEntries.length);
+  return {
+    "--front-footer-section-columns": sectionColumns,
+    "--front-footer-section-rows": sectionRows,
+    "--front-footer-utility-rows": utilityEntries.length,
+  } as CSSProperties;
+}
+
+function getPresentationFooterGrid(entryCount: number, utilityCount: number) {
+  const maxColumns = Math.max(1, Math.min(4, Math.max(entryCount, utilityCount)));
+  const sectionColumns = entryCount === 0 ? 1 : Math.min(entryCount, maxColumns);
+  const sectionRows = entryCount === 0 ? 0 : Math.ceil(entryCount / sectionColumns);
+  return { sectionColumns, sectionRows };
+}

package/components/reader-auth-control.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { signInWithRedirect, signOut } from "aws-amplify/auth";
+import { Hub } from "aws-amplify/utils";
+import { useCallback, useEffect, useState } from "react";
+import { configureAmplifyClient } from "./amplify-client-provider";
+import { loadReaderSessionSnapshot, type ReaderAuthSnapshot } from "./reader-auth-state";
+
+type ReaderAuthControlProps = {
+  className?: string;
+  dataFooterUtility?: string;
+  postAuthPath?: string;
+  showIdentity?: boolean;
+  authState?: ReaderAuthSnapshot;
+};
+
+const POST_AUTH_PATH_KEY = "papyrus:reader-auth:post-auth-path";
+
+export function ReaderAuthControl({
+  className,
+  dataFooterUtility,
+  postAuthPath,
+  showIdentity = false,
+  authState: externalAuthState,
+}: ReaderAuthControlProps) {
+  const [authState, setAuthState] = useState<ReaderAuthSnapshot>(externalAuthState ?? { status: "loading", label: "Checking sign-in" });
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const isExternallyManaged = Boolean(externalAuthState);
+
+  const replaceWithPostAuthPath = useCallback(() => {
+    const storedPath = typeof window === "undefined" ? null : window.sessionStorage.getItem(POST_AUTH_PATH_KEY);
+    const nextPath = postAuthPath ?? storedPath;
+    if (!nextPath) return;
+    if (window.location.pathname !== "/" || window.location.search || window.location.hash) return;
+    if (storedPath) window.sessionStorage.removeItem(POST_AUTH_PATH_KEY);
+    window.history.replaceState(window.history.state, "", nextPath);
+  }, [postAuthPath]);
+
+  const refreshAuthState = useCallback(async () => {
+    const snapshot = await loadReaderSessionSnapshot();
+    setAuthState(snapshot.auth);
+    setError(null);
+    if (snapshot.auth.status === "signedIn") replaceWithPostAuthPath();
+  }, [replaceWithPostAuthPath]);
+
+  useEffect(() => {
+    if (externalAuthState) {
+      setAuthState(externalAuthState);
+      setBusy(false);
+      return;
+    }
+
+    let active = true;
+
+    const refreshIfActive = async () => {
+      await refreshAuthState();
+      if (!active) return;
+      setBusy(false);
+    };
+
+    void refreshIfActive();
+    const unsubscribe = Hub.listen("auth", ({ payload }) => {
+      if (
+        payload.event === "signedIn" ||
+        payload.event === "signedOut" ||
+        payload.event === "signInWithRedirect" ||
+        payload.event === "signInWithRedirect_failure"
+      ) {
+        void refreshIfActive();
+      }
+      if (payload.event === "signInWithRedirect_failure") {
+        setError(formatAuthFailure(payload.data));
+      }
+    });
+
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, [externalAuthState, refreshAuthState]);
+
+  const signIn = async () => {
+    configureAmplifyClient();
+    setBusy(true);
+    setError(null);
+    try {
+      if (typeof window !== "undefined") {
+        const intendedPath = postAuthPath ?? `${window.location.pathname}${window.location.search}${window.location.hash}`;
+        if (intendedPath && intendedPath !== "/") {
+          window.sessionStorage.setItem(POST_AUTH_PATH_KEY, intendedPath);
+        } else {
+          window.sessionStorage.removeItem(POST_AUTH_PATH_KEY);
+        }
+        if (window.location.pathname !== "/" || window.location.search || window.location.hash) {
+          window.history.replaceState(window.history.state, "", "/");
+        }
+      }
+      await signInWithRedirect({ provider: "Google" });
+    } catch (error) {
+      setBusy(false);
+      setError(formatAuthFailure(error));
+    }
+  };
+
+  const signOutCurrentUser = async () => {
+    configureAmplifyClient();
+    setBusy(true);
+    setError(null);
+    try {
+      await signOut();
+      await refreshAuthState();
+    } catch {
+      setError("Sign-out failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!externalAuthState) return;
+    setAuthState(externalAuthState);
+  }, [externalAuthState]);
+
+  const signedIn = authState.status === "signedIn";
+  const actionLabel = signedIn ? "LOGOUT" : "LOGIN";
+  return (
+    <span className={className ? `reader-auth ${className}` : "reader-auth"} aria-live="polite" data-footer-utility={dataFooterUtility}>
+      {signedIn && showIdentity ? <span className="reader-auth__identity">{authState.label}</span> : null}
+      {error ? <span className="reader-auth__error">{error}</span> : null}
+      <button
+        className="reader-auth__button"
+        disabled={authState.status === "loading" || busy}
+        onClick={signedIn ? signOutCurrentUser : signIn}
+        type="button"
+      >
+        {actionLabel}
+      </button>
+    </span>
+  );
+}
+
+function formatAuthFailure(error: unknown): string {
+  const detail = extractAuthFailureDetail(error);
+  return detail ? `Sign-in failed: ${detail}` : "Sign-in failed";
+}
+
+function extractAuthFailureDetail(error: unknown): string | null {
+  if (!error) return null;
+  if (typeof error === "string") return error;
+  if (typeof error !== "object") return null;
+
+  const record = error as Record<string, unknown>;
+  const message = record.message;
+  if (typeof message === "string" && message.trim().length > 0) return message;
+  const name = record.name;
+  if (typeof name === "string" && name.trim().length > 0) return name;
+
+  const nested = record.error;
+  if (nested && nested !== error) return extractAuthFailureDetail(nested);
+  return null;
+}

package/components/reader-auth-state.ts

@@ -0,0 +1,122 @@
+"use client";
+
+import { fetchAuthSession } from "aws-amplify/auth";
+import { configureAmplifyClient } from "./amplify-client-provider";
+
+export type ReaderAuthSnapshot =
+  | { status: "loading"; label: string; email?: null }
+  | { status: "signedOut"; label: string; email?: null }
+  | { status: "signedIn"; label: string; email?: string | null };
+
+export type ReaderSessionSnapshot = {
+  auth: ReaderAuthSnapshot;
+  groups: string[];
+  hasSession: boolean;
+};
+
+export async function loadReaderSessionSnapshot(options?: { forceRefresh?: boolean }): Promise<ReaderSessionSnapshot> {
+  configureAmplifyClient();
+  try {
+    const session = await fetchAuthSession({ forceRefresh: options?.forceRefresh === true });
+    const accessPayload = session.tokens?.accessToken?.payload ?? {};
+    const idPayload = session.tokens?.idToken?.payload ?? {};
+    const email = readTextClaim(idPayload.email ?? accessPayload.email);
+    const groups = dedupeGroups([
+      ...readGroups(accessPayload["cognito:groups"]),
+      ...readGroups(accessPayload.groups),
+      ...readGroups(idPayload["cognito:groups"]),
+      ...readGroups(idPayload.groups),
+    ]);
+    const label = readIdentityLabel({
+      email,
+      name: idPayload.name ?? accessPayload.name,
+      username: idPayload["cognito:username"] ?? accessPayload["cognito:username"] ?? accessPayload.username,
+      sub: idPayload.sub ?? accessPayload.sub,
+    });
+
+    if (!session.tokens?.accessToken) {
+      return {
+        auth: { status: "signedOut", label: "Signed out" },
+        groups,
+        hasSession: false,
+      };
+    }
+
+    return {
+      auth: { status: "signedIn", label, email },
+      groups,
+      hasSession: true,
+    };
+  } catch (error) {
+    if (isUnauthenticatedError(error)) {
+      return {
+        auth: { status: "signedOut", label: "Signed out" },
+        groups: [],
+        hasSession: false,
+      };
+    }
+    throw error;
+  }
+}
+
+export function isUnauthenticatedError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error);
+  return /unauth|not authenticated|no current user|not signed in/i.test(message);
+}
+
+function readIdentityLabel(claims: {
+  email: unknown;
+  name: unknown;
+  username: unknown;
+  sub: unknown;
+}): string {
+  return readTextClaim(claims.email)
+    ?? readTextClaim(claims.name)
+    ?? readTextClaim(claims.username)
+    ?? readTextClaim(claims.sub)
+    ?? "Signed in";
+}
+
+function readTextClaim(value: unknown): string | null {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+
+function readGroups(value: unknown): string[] {
+  if (Array.isArray(value)) return value.map((entry) => normalizeGroupName(String(entry))).filter(Boolean) as string[];
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return [];
+    if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        if (Array.isArray(parsed)) {
+          return parsed
+            .map((entry) => normalizeGroupName(String(entry)))
+            .filter(Boolean) as string[];
+        }
+      } catch {
+      }
+    }
+    return trimmed
+      .split(/[,\s]+/)
+      .map((entry) => normalizeGroupName(entry))
+      .filter(Boolean) as string[];
+  }
+  return [];
+}
+
+function dedupeGroups(groups: string[]): string[] {
+  const seen = new Set<string>();
+  const values: string[] = [];
+  for (const group of groups) {
+    const normalized = normalizeGroupName(group);
+    if (!normalized || seen.has(normalized)) continue;
+    seen.add(normalized);
+    values.push(normalized);
+  }
+  return values;
+}
+
+function normalizeGroupName(value: string): string {
+  return value.trim().replace(/^["'[\](){}]+|["'[\](){}]+$/g, "").toLowerCase();
+}