@anthusai/papyrus 1.0.0-next.4 → 1.0.0-next.41

package/components/amplify-client-provider.tsx

@@ -8,6 +8,8 @@ import { CookieStorage, Hub } from "aws-amplify/utils";
 import { useEffect } from "react";
 import { assertSandboxAmplifyOutputsForDev } from "../lib/amplify-outputs-guard";
 import amplifyOutputs from "papyrus-amplify-outputs";
+import { getPublicNewsroomBasePath } from "../lib/newsroom-base-path";
+import { prioritizeRedirectUrlsForOrigin } from "../lib/oauth-redirect-priority";
 
 let configured = false;
 
@@ -72,14 +74,10 @@ function prioritizeCurrentOrigin(config: ResourcesConfig): ResourcesConfig {
   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];
+    const strings = urls.filter((value): value is string => typeof value === "string");
+    return prioritizeRedirectUrlsForOrigin(strings, window.location.origin, getPublicNewsroomBasePath());
   };
   return {
     ...config,
@@ -111,22 +109,6 @@ function redirectLoopbackToLocalhost(): void {
   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;

package/components/archive-shell.tsx

@@ -1,27 +1,14 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useEffect, useState } from "react";
+import { useRhythmOverlay } from "./use-rhythm-overlay";
 
 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);
-  }, []);
+  const showRhythmOverlay = useRhythmOverlay();
 
   return (
     <main
@@ -32,10 +19,3 @@ export function ArchiveShell({ children }: ArchiveShellProps) {
     </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

@@ -1,31 +1,232 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { Pause, Play } from "lucide-react";
 import type { ArticleVideoAsset } from "../lib/articles";
 import { resolveThemedVideoSrc } from "../lib/themed-image";
 import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
+import { getSiteBrand } from "../lib/site-brand";
+import { normalizeDevPreviewDsl, type VideoScriptRef } from "../lib/video-script";
+import { resolveVideoMode, resolveVideoModeFromEnv, type VideoMode } from "../lib/video-mode";
 
 type ArticleVideoFigureProps = {
   video: ArticleVideoAsset;
   slug: string;
   figureClassName?: string;
   priority?: boolean;
+  videoScript?: VideoScriptRef | null;
 };
 
-export function ArticleVideoFigure({ video, slug, figureClassName = "article-photo article-video" }: ArticleVideoFigureProps) {
+const PREVIEW_STORAGE_PREFIX = "papyrus-video-preview:";
+
+export function ArticleVideoFigure({
+  video,
+  slug,
+  figureClassName = "article-photo article-video",
+  videoScript = null,
+}: ArticleVideoFigureProps) {
   const theme = useResolvedPapyrusTheme();
   const [hasHydrated, setHasHydrated] = useState(false);
+  const [videoMode, setVideoMode] = useState<VideoMode>(() => resolveVideoModeFromEnv());
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [previewReady, setPreviewReady] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const isFramed = getSiteBrand().videoPlayer === "framed";
 
   useEffect(() => {
     setHasHydrated(true);
+    setVideoMode(resolveVideoMode());
   }, []);
 
   // 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);
+  const usePreview = videoMode === "preview" && Boolean(videoScript?.dsl);
+  const previewDsl = videoScript?.dsl
+    ? normalizeDevPreviewDsl(videoScript.dsl, getSiteBrand().video?.sceneComponents)
+    : null;
+  const previewSrc = `/videoml/preview.html?target=${encodeURIComponent(slug)}&theme=${resolvedTheme}${
+    src ? `&audio=${encodeURIComponent(src)}` : ""
+  }`;
+
+  if (usePreview && previewDsl && typeof window !== "undefined") {
+    sessionStorage.setItem(`${PREVIEW_STORAGE_PREFIX}${slug}`, previewDsl);
+  }
+
+  useEffect(() => {
+    setPreviewReady(false);
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setDuration(0);
+  }, [previewSrc, usePreview]);
+
+  useEffect(() => {
+    if (!usePreview || !previewReady) return;
+    iframeRef.current?.contentWindow?.postMessage(
+      { kind: "papyrus-video-refresh", target: slug, theme: resolvedTheme, audio: src || undefined },
+      "*",
+    );
+  }, [previewReady, resolvedTheme, slug, src, usePreview]);
+
+  useEffect(() => {
+    if (!usePreview) return;
+    const onMessage = (event: MessageEvent) => {
+      const payload = event.data;
+      if (!payload || typeof payload !== "object" || payload.kind !== "papyrus-video-time") return;
+      if (typeof payload.currentTime === "number") setCurrentTime(payload.currentTime);
+      if (typeof payload.duration === "number") setDuration(payload.duration);
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [usePreview]);
+
+  const togglePreviewPlayback = useCallback(() => {
+    iframeRef.current?.contentWindow?.postMessage({ kind: isPlaying ? "papyrus-video-pause" : "papyrus-video-play" }, "*");
+    setIsPlaying(!isPlaying);
+  }, [isPlaying]);
+
+  const seekPreview = useCallback((nextTime: number) => {
+    const clamped = Math.max(0, Number.isFinite(nextTime) ? nextTime : 0);
+    iframeRef.current?.contentWindow?.postMessage({ kind: "papyrus-video-seek", time: clamped }, "*");
+    setCurrentTime(clamped);
+  }, []);
+
+  const toggleNativePlayback = useCallback(() => {
+    const element = videoRef.current;
+    if (!element) return;
+    if (element.paused) void element.play().catch(() => setIsPlaying(false));
+    else element.pause();
+  }, []);
+
+  const seekNative = useCallback((nextTime: number) => {
+    const element = videoRef.current;
+    if (!element) return;
+    element.currentTime = Math.max(0, Number.isFinite(nextTime) ? nextTime : 0);
+    setCurrentTime(element.currentTime);
+  }, []);
+
+  const framedControls = (
+    <FramedVideoControls
+      currentTime={currentTime}
+      duration={duration}
+      isPlaying={isPlaying}
+      onSeek={usePreview ? seekPreview : seekNative}
+      onToggle={usePreview ? togglePreviewPlayback : toggleNativePlayback}
+    />
+  );
+
+  if (isFramed && usePreview) {
+    return (
+      <figure
+        className={`${figureClassName} article-video--framed article-video--preview`}
+        data-media-type="videoml-preview"
+        data-video-theme={resolvedTheme}
+        data-video-mode={videoMode}
+      >
+        <div className="article-video__media">
+          {hasHydrated ? (
+            <iframe
+              key={`${slug}-${resolvedTheme}-${src}`}
+              ref={iframeRef}
+              className="article-video__preview-frame"
+              src={previewSrc}
+              title={video.alt}
+              onLoad={() => setPreviewReady(true)}
+            />
+          ) : null}
+        </div>
+        {framedControls}
+        <span className="sr-only" data-video-slug={slug}>
+          {video.alt}
+        </span>
+      </figure>
+    );
+  }
+
+  if (usePreview) {
+    return (
+      <figure
+        className={`${figureClassName} article-video--preview`}
+        data-media-type="videoml-preview"
+        data-video-theme={resolvedTheme}
+        data-video-mode={videoMode}
+      >
+        {hasHydrated ? (
+          <iframe
+            key={`${slug}-${resolvedTheme}-${src}`}
+            ref={iframeRef}
+            className="article-video__preview-frame"
+            src={previewSrc}
+            title={video.alt}
+            onLoad={() => setPreviewReady(true)}
+          />
+        ) : null}
+        <div className="article-video__preview-controls">
+          <button type="button" onClick={togglePreviewPlayback} aria-pressed={isPlaying}>
+            {isPlaying ? "Pause video" : "Play video"}
+          </button>
+          <input
+            type="range"
+            min={0}
+            max={duration || 0}
+            step={0.1}
+            value={Math.min(currentTime, duration || 0)}
+            onChange={(event) => seekPreview(Number(event.target.value))}
+            aria-label="Seek video"
+            disabled={!duration}
+          />
+        </div>
+        {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>
+    );
+  }
+
+  if (isFramed) {
+    return (
+      <figure
+        className={`${figureClassName} article-video--framed`}
+        data-media-type="video"
+        data-video-theme={resolvedTheme}
+        data-video-mode={videoMode}
+      >
+        <div className="article-video__media">
+          <video
+            ref={videoRef}
+            playsInline
+            preload="metadata"
+            poster={video.posterSrc}
+            aria-label={video.alt}
+            className="article-video__player"
+            key={hasHydrated ? src : "ssr"}
+            onPlay={() => setIsPlaying(true)}
+            onPause={() => setIsPlaying(false)}
+            onEnded={() => setIsPlaying(false)}
+            onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
+            onDurationChange={(event) => {
+              const nextDuration = event.currentTarget.duration;
+              if (Number.isFinite(nextDuration) && nextDuration > 0) setDuration(nextDuration);
+            }}
+          >
+            <source src={src} type="video/mp4" />
+          </video>
+        </div>
+        {framedControls}
+        <span className="sr-only" data-video-slug={slug}>
+          {video.alt}
+        </span>
+      </figure>
+    );
+  }
 
   return (
-    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme}>
+    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme} data-video-mode={videoMode}>
       <video
         controls
         playsInline
@@ -45,3 +246,46 @@ export function ArticleVideoFigure({ video, slug, figureClassName = "article-pho
     </figure>
   );
 }
+
+function FramedVideoControls({
+  currentTime,
+  duration,
+  isPlaying,
+  onSeek,
+  onToggle,
+}: {
+  currentTime: number;
+  duration: number;
+  isPlaying: boolean;
+  onSeek: (nextTime: number) => void;
+  onToggle: () => void;
+}) {
+  const seekProgress = duration > 0 ? (currentTime / duration) * 100 : 0;
+  return (
+    <div className="article-video__cta" data-playing={isPlaying ? "true" : "false"}>
+      <button type="button" className="article-video__cta-toggle" onClick={onToggle} aria-pressed={isPlaying}>
+        <span className="article-video__cta-label">
+          <span className="article-video__cta-label-sizer" aria-hidden="true">
+            Pause Video
+          </span>
+          <span className="article-video__cta-label-text">{isPlaying ? "Pause Video" : "Play Video"}</span>
+        </span>
+        <span className="article-video__cta-icon" aria-hidden="true">
+          {isPlaying ? <Pause /> : <Play />}
+        </span>
+      </button>
+      <input
+        className="article-video__cta-seek"
+        type="range"
+        min={0}
+        max={duration || 0}
+        step={0.1}
+        value={Math.min(currentTime, duration || 0)}
+        onChange={(event) => onSeek(Number(event.target.value))}
+        aria-label="Seek video"
+        disabled={!duration}
+        style={{ "--seek-progress": `${seekProgress}%` } as CSSProperties}
+      />
+    </div>
+  );
+}

package/components/blog-page-background.tsx

@@ -2,18 +2,35 @@
 
 import type { RefObject } from "react";
 
+/** A rectangle, in the background layer's own coordinates, that header text occupies. */
+export type BlogHeaderObstacle = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+/** Vertical rhythm grid the rhythm blog layout is built on. */
+export type BlogBackgroundRhythm = {
+  rowHeight: number;
+  paintBuffer: number;
+  paintHeight: number;
+};
+
 export type BlogPageBackgroundProps = {
   pageRef: RefObject<HTMLElement | null>;
+  /** Rhythm blog layout only: header text boxes the artwork should keep clear of. */
+  headerObstacles?: BlogHeaderObstacle[];
+  /** Rhythm blog layout only: the rhythm grid, so artwork can align to it. */
+  rhythm?: BlogBackgroundRhythm;
 };
 
 /**
  * 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.
+ * backdrop. A publication supplies header artwork through the
+ * `components.BlogPageBackground` brand slot; with the rhythm blog layout the
+ * slot also receives `headerObstacles` and `rhythm`. This is what
+ * `renderers/pretext` falls back to when no slot component is registered.
  */
 export function BlogPageBackground(_props: BlogPageBackgroundProps) {
   return null;