@anthusai/papyrus 0.0.0 → 1.0.0-next.2

package/components/ai-elements/shimmer.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { cn } from "../../lib/utils";
+import type { MotionProps } from "motion/react";
+import { motion } from "motion/react";
+import type { CSSProperties, ElementType, JSX } from "react";
+import { memo, useMemo } from "react";
+
+type MotionHTMLProps = MotionProps & Record<string, unknown>;
+
+const motionComponentCache = new Map<
+  keyof JSX.IntrinsicElements,
+  React.ComponentType<MotionHTMLProps>
+>();
+
+const getMotionComponent = (element: keyof JSX.IntrinsicElements) => {
+  let component = motionComponentCache.get(element);
+  if (!component) {
+    component = motion.create(element);
+    motionComponentCache.set(element, component);
+  }
+  return component;
+};
+
+export interface TextShimmerProps {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+}
+
+const ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2,
+}: TextShimmerProps) => {
+  const MotionComponent = getMotionComponent(
+    Component as keyof JSX.IntrinsicElements,
+  );
+
+  const dynamicSpread = useMemo(
+    () => (children?.length ?? 0) * spread,
+    [children, spread],
+  );
+
+  return (
+    <MotionComponent
+      animate={{ backgroundPosition: "0% center" }}
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className,
+      )}
+      initial={{ backgroundPosition: "100% center" }}
+      style={
+        {
+          "--spread": `${dynamicSpread}px`,
+          backgroundImage:
+            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+        } as CSSProperties
+      }
+      transition={{
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY,
+      }}
+    >
+      {children}
+    </MotionComponent>
+  );
+};
+
+export const Shimmer = memo(ShimmerComponent);

package/components/ai-elements/suggestion.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area";
+import type { ComponentProps } from "react";
+import { useCallback } from "react";
+
+export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+
+export const Suggestions = ({
+  className,
+  children,
+  ...props
+}: SuggestionsProps) => (
+  <ScrollArea className={cn("papyrus-console-suggestions", className)} {...props}>
+    <div className="papyrus-console-suggestions__list">
+      {children}
+    </div>
+    <ScrollBar />
+  </ScrollArea>
+);
+
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  suggestion: string;
+  onClick?: (suggestion: string) => void;
+};
+
+export const Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) => {
+  const handleClick = useCallback(() => {
+    onClick?.(suggestion);
+  }, [onClick, suggestion]);
+
+  return (
+    <Button
+      className={cn("papyrus-console-suggestion", className)}
+      onClick={handleClick}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {children || suggestion}
+    </Button>
+  );
+};

package/components/ai-elements/tool.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { cn } from "../../lib/utils";
+import {
+  AlertCircleIcon,
+  CheckCircle2Icon,
+  ChevronDownIcon,
+  Loader2Icon,
+  WrenchIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
+type ToolState =
+  | "input-streaming"
+  | "input-available"
+  | "approval-requested"
+  | "approval-responded"
+  | "output-available"
+  | "output-error"
+  | "output-denied";
+
+const TOOL_STATE_LABEL: Record<ToolState, string> = {
+  "input-streaming": "Pending",
+  "input-available": "Running",
+  "approval-requested": "Awaiting Approval",
+  "approval-responded": "Responded",
+  "output-available": "Completed",
+  "output-error": "Error",
+  "output-denied": "Denied",
+};
+
+export type ToolProps = ComponentProps<"details">;
+
+export function Tool({ className, ...props }: ToolProps) {
+  return (
+    <details
+      className={cn("papyrus-console-tool", className)}
+      {...props}
+    />
+  );
+}
+
+export type ToolHeaderProps = ComponentProps<"summary"> & {
+  title?: string;
+  type?: string;
+  toolName?: string;
+  state: ToolState;
+};
+
+export function ToolHeader({
+  className,
+  title,
+  type,
+  toolName,
+  state,
+  ...props
+}: ToolHeaderProps) {
+  const label = title?.trim() || toolName?.trim() || normalizeToolType(type);
+  return (
+    <summary
+      className={cn("papyrus-console-tool__header", className)}
+      {...props}
+    >
+      <span className="papyrus-console-tool__label">{label || "Tool"}</span>
+      {getStatusBadge(state)}
+      <ChevronDownIcon className="papyrus-console-tool__chevron" size={14} />
+    </summary>
+  );
+}
+
+export type ToolContentProps = ComponentProps<"div">;
+
+export function ToolContent({ className, ...props }: ToolContentProps) {
+  return (
+    <div
+      className={cn("papyrus-console-tool__content", className)}
+      {...props}
+    />
+  );
+}
+
+export type ToolInputProps = ComponentProps<"div"> & {
+  input?: unknown;
+};
+
+export function ToolInput({ className, input, ...props }: ToolInputProps) {
+  if (input === undefined || input === null) return null;
+  return (
+    <div className={cn("papyrus-console-tool__section", className)} {...props}>
+      <div className="papyrus-console-tool__section-label">Parameters</div>
+      <pre className="papyrus-console-tool__pre">{formatToolValue(input)}</pre>
+    </div>
+  );
+}
+
+export type ToolOutputProps = ComponentProps<"div"> & {
+  output?: ReactNode;
+  errorText?: string;
+};
+
+export function ToolOutput({
+  className,
+  output,
+  errorText,
+  ...props
+}: ToolOutputProps) {
+  if (!output && !errorText) return null;
+  return (
+    <div className={cn("papyrus-console-tool__section", className)} {...props}>
+      <div className="papyrus-console-tool__section-label">
+        {errorText ? "Error" : "Result"}
+      </div>
+      {errorText ? (
+        <pre className="papyrus-console-tool__pre papyrus-console-tool__pre--error">
+          {errorText}
+        </pre>
+      ) : typeof output === "string" ? (
+        <pre className="papyrus-console-tool__pre">{output}</pre>
+      ) : (
+        <div className="papyrus-console-tool__output">{output}</div>
+      )}
+    </div>
+  );
+}
+
+export function getStatusBadge(state: ToolState) {
+  const label = TOOL_STATE_LABEL[state];
+  return (
+    <span
+      className="papyrus-console-tool__badge"
+      data-state={state}
+    >
+      {renderStateIcon(state)}
+      {label}
+    </span>
+  );
+}
+
+function renderStateIcon(state: ToolState) {
+  if (state === "output-error" || state === "output-denied") {
+    return <AlertCircleIcon size={12} />;
+  }
+  if (state === "output-available" || state === "approval-responded") {
+    return <CheckCircle2Icon size={12} />;
+  }
+  if (state === "input-streaming" || state === "input-available" || state === "approval-requested") {
+    return <Loader2Icon className="papyrus-console-tool__badge-spinner" size={12} />;
+  }
+  return <WrenchIcon size={12} />;
+}
+
+function formatToolValue(value: unknown): string {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return "";
+    try {
+      const parsed = JSON.parse(trimmed);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return trimmed;
+    }
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function normalizeToolType(type: string | undefined): string {
+  if (!type) return "";
+  return type.replace(/^tool-/, "").replace(/_/g, " ");
+}

package/components/amplify-client-provider.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import "aws-amplify/auth/enable-oauth-listener";
+import { fetchAuthSession } from "aws-amplify/auth";
+import { cognitoUserPoolsTokenProvider } from "aws-amplify/auth/cognito";
+import { Amplify, type ResourcesConfig } from "aws-amplify";
+import { CookieStorage, Hub } from "aws-amplify/utils";
+import { useEffect } from "react";
+import { assertSandboxAmplifyOutputsForDev } from "../lib/amplify-outputs-guard";
+import amplifyOutputs from "papyrus-amplify-outputs";
+
+let configured = false;
+
+export function configureAmplifyClient() {
+  if (configured) return;
+  assertSandboxAmplifyOutputsForDev(amplifyOutputs as Record<string, unknown>);
+  Amplify.configure(prioritizeCurrentOrigin(amplifyOutputs as ResourcesConfig), { ssr: true });
+  applyClientTokenStorageForCurrentProtocol();
+  configured = true;
+  redirectLoopbackToLocalhost();
+}
+
+export function AmplifyClientProvider({ children }: Readonly<{ children: React.ReactNode }>) {
+  useEffect(() => {
+    configureAmplifyClient();
+    const unsubscribe = Hub.listen("auth", ({ payload }) => {
+      if (payload.event !== "signInWithRedirect_failure") return;
+      const detail = extractAuthFailureDetail(payload.data);
+      if (detail) {
+        console.error("[PapyrusAuth] Google sign-in failed:", detail);
+      }
+    });
+
+    const params = new URLSearchParams(window.location.search);
+    const hasOAuthCallback = params.has("code") && params.has("state");
+    const hasOAuthError = params.has("error");
+    if (!hasOAuthCallback && !hasOAuthError) {
+      return unsubscribe;
+    }
+
+    let cancelled = false;
+    const syncSession = async () => {
+      for (let attempt = 0; attempt < 8; attempt += 1) {
+        if (cancelled) return;
+        try {
+          const session = await fetchAuthSession({ forceRefresh: attempt > 0 });
+          if (session.tokens?.accessToken) return;
+        } catch {
+          // OAuth listener may still be completing the code exchange.
+        }
+        await new Promise((resolve) => window.setTimeout(resolve, 250));
+      }
+    };
+    void syncSession();
+
+    return () => {
+      cancelled = true;
+      unsubscribe();
+    };
+  }, []);
+
+  configureAmplifyClient();
+  return children;
+}
+
+if (typeof window !== "undefined") {
+  configureAmplifyClient();
+}
+
+function prioritizeCurrentOrigin(config: ResourcesConfig): ResourcesConfig {
+  if (typeof window === "undefined") return config;
+  const auth = (config as { auth?: { oauth?: Record<string, unknown> } }).auth;
+  const oauth = auth?.oauth;
+  if (!auth || !oauth) return config;
+  const origin = normalizeUrlOrigin(window.location.origin);
+  const reorder = (urls: unknown) => {
+    if (!Array.isArray(urls)) return urls;
+    const normalized = urls.filter((value): value is string => typeof value === "string");
+    const head = normalized.filter((value) => normalizeUrlOrigin(value) === origin);
+    if (!head.length) return normalized;
+    const tail = normalized.filter((value) => normalizeUrlOrigin(value) !== origin);
+    return [...head, ...tail];
+  };
+  return {
+    ...config,
+    auth: {
+      ...auth,
+      oauth: {
+        ...oauth,
+        redirect_sign_in_uri: reorder(oauth.redirect_sign_in_uri),
+        redirect_sign_out_uri: reorder(oauth.redirect_sign_out_uri),
+      },
+    },
+  } as ResourcesConfig;
+}
+
+function applyClientTokenStorageForCurrentProtocol(): void {
+  if (typeof window === "undefined") return;
+  if (window.location.protocol !== "http:") return;
+  // Amplify's default SSR cookie store sets secure cookies, which browsers reject on http://localhost.
+  cognitoUserPoolsTokenProvider.setKeyValueStorage(
+    new CookieStorage({ sameSite: "lax", secure: false }),
+  );
+}
+
+function redirectLoopbackToLocalhost(): void {
+  if (typeof window === "undefined") return;
+  const { protocol, hostname, port, pathname, search, hash } = window.location;
+  if (hostname !== "127.0.0.1" && hostname !== "::1") return;
+  const target = `${protocol}//localhost${port ? `:${port}` : ""}${pathname}${search}${hash}`;
+  window.location.replace(target);
+}
+
+function normalizeUrlOrigin(value: string): string {
+  const trimmed = value.replace(/\/+$/, "");
+  try {
+    const parsed = new URL(trimmed);
+    const hostname = normalizeLoopbackHostname(parsed.hostname);
+    return `${parsed.protocol}//${hostname}${parsed.port ? `:${parsed.port}` : ""}`;
+  } catch {
+    return trimmed;
+  }
+}
+
+function normalizeLoopbackHostname(hostname: string): string {
+  if (hostname === "127.0.0.1" || hostname === "::1") return "localhost";
+  return hostname;
+}
+
+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()) return message;
+  const nested = record.error;
+  if (nested && nested !== error) return extractAuthFailureDetail(nested);
+  return null;
+}

package/components/archive-grid.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ARCHIVE_BATCH_SIZE, type ArchiveEditionPreview, type ArchiveEditionsResponse } from "../lib/archive-types";
+
+type ArchiveGridProps = {
+  initialPreviews: ArchiveEditionPreview[];
+  initialNextCursor?: string | null;
+};
+
+export function ArchiveGrid({ initialPreviews, initialNextCursor = null }: ArchiveGridProps) {
+  const [previews, setPreviews] = useState(initialPreviews);
+  const [nextCursor, setNextCursor] = useState<string | null>(initialNextCursor);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+
+  const loadMore = useCallback(async () => {
+    if (!nextCursor || loading) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`/api/archive/editions?cursor=${encodeURIComponent(nextCursor)}&limit=${ARCHIVE_BATCH_SIZE}`);
+      if (!response.ok) throw new Error(`Archive request failed: ${response.status}`);
+      const payload = (await response.json()) as ArchiveEditionsResponse;
+      setPreviews((current) => {
+        const seen = new Set(current.map((preview) => preview.edition.id));
+        const additions = payload.previews.filter((preview) => !seen.has(preview.edition.id));
+        return [...current, ...additions];
+      });
+      setNextCursor(payload.nextCursor ?? null);
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : "Archive request failed");
+    } finally {
+      setLoading(false);
+    }
+  }, [loading, nextCursor]);
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !nextCursor) return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        void loadMore();
+      }
+    }, { rootMargin: "900px 0px" });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [loadMore, nextCursor]);
+
+  return (
+    <section className="archive-grid-shell" aria-label="Edition archive">
+      {previews.length === 0 ? (
+        <p className="archive-empty">No published editions are available yet.</p>
+      ) : (
+        <div className="archive-grid" data-archive-grid="true">
+          {previews.map((preview) => (
+            <article className="archive-card" data-archive-edition-id={preview.edition.id} key={preview.edition.id}>
+              <Link className="archive-card__hit-area" href={preview.href} aria-label={`Open ${preview.edition.title} from ${preview.edition.editionDate}`} />
+              <header className="archive-card__label">
+                <time dateTime={preview.edition.editionDate}>{formatArchiveDate(preview.edition.editionDate)}</time>
+                <span>Edition</span>
+              </header>
+              <div className="archive-card__summary">
+                <h2>{preview.edition.title}</h2>
+                {preview.edition.description ? <p>{preview.edition.description}</p> : null}
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+      <div className="archive-sentinel" data-archive-sentinel="true" data-has-next-cursor={nextCursor ? "true" : "false"} ref={sentinelRef}>
+        {loading ? "Loading editions" : error ?? (nextCursor ? "More editions" : "End of archive")}
+      </div>
+    </section>
+  );
+}
+
+function formatArchiveDate(editionDate: string): string {
+  const date = new Date(`${editionDate}T00:00:00Z`);
+  if (Number.isNaN(date.getTime())) return editionDate;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(date);
+}

package/components/archive-shell.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+
+type ArchiveShellProps = {
+  children: ReactNode;
+};
+
+export function ArchiveShell({ children }: ArchiveShellProps) {
+  const [showRhythmOverlay, setShowRhythmOverlay] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isEditableEventTarget(event.target)) return;
+      if ((event.key === "=" || event.code === "Equal") && event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        setShowRhythmOverlay((current) => !current);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return (
+    <main
+      className="archive-page archive-rhythm-shell"
+      data-rhythm-overlay={showRhythmOverlay ? "true" : "false"}
+    >
+      {children}
+    </main>
+  );
+}
+
+function isEditableEventTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  const tagName = target.tagName.toLowerCase();
+  if (tagName === "input" || tagName === "textarea" || tagName === "select") return true;
+  return target.isContentEditable || target.closest("[contenteditable='true']") !== null;
+}

package/components/article-video.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { ArticleVideoAsset } from "../lib/articles";
+import { resolveThemedVideoSrc } from "../lib/themed-image";
+import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
+
+type ArticleVideoFigureProps = {
+  video: ArticleVideoAsset;
+  slug: string;
+  figureClassName?: string;
+  priority?: boolean;
+};
+
+export function ArticleVideoFigure({ video, slug, figureClassName = "article-photo article-video" }: ArticleVideoFigureProps) {
+  const theme = useResolvedPapyrusTheme();
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  // Match SSR to the default dark MP4 in `video.src` until after hydration.
+  const resolvedTheme = hasHydrated ? theme : "dark";
+  const src = resolveThemedVideoSrc(video.src, video.themeVariants, resolvedTheme);
+
+  return (
+    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme}>
+      <video
+        controls
+        playsInline
+        preload="metadata"
+        poster={video.posterSrc}
+        aria-label={video.alt}
+        className="article-video__player"
+        key={hasHydrated ? src : "ssr"}
+      >
+        <source src={src} type="video/mp4" />
+      </video>
+      {video.caption ? <figcaption>{video.caption}</figcaption> : null}
+      {video.credit ? <p className="article-video__credit">{video.credit}</p> : null}
+      <span className="sr-only" data-video-slug={slug}>
+        {video.alt}
+      </span>
+    </figure>
+  );
+}

package/components/blog-page-background.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { RefObject } from "react";
+
+export type BlogPageBackgroundProps = {
+  pageRef: RefObject<HTMLElement | null>;
+};
+
+/**
+ * Default (no-op) blog page background for publications without a bespoke
+ * backdrop. Threat Intelligence supplies its own animated defense-graph
+ * background (publications/threat_intelligence/blog-defense/page-background.tsx);
+ * every other publication gets no decorative background layer. This is what
+ * `renderers/pretext` falls back to for any publication that isn't Threat
+ * Intelligence, so the blog layout loads cleanly without depending on TI's
+ * package.
+ */
+export function BlogPageBackground(_props: BlogPageBackgroundProps) {
+  return null;
+}