@anthusai/papyrus 1.0.0-next.50 → 1.0.0-next.52

package/amplify/plugins/signup/schema.ts

@@ -0,0 +1,41 @@
+import { a } from "@aws-amplify/backend";
+import { signupSubmit } from "./function/resource";
+
+/**
+ * SignupEntry is never guest-readable and has no create rule for anyone: only the
+ * submitSignup function (IAM) writes it. Editors and admins list it; admins delete.
+ */
+export function signupSchemaDefinitions() {
+  return {
+    SignupEntry: a
+      .model({
+        id: a.id().required(),
+        form: a.string().required(),
+        value: a.string().required(),
+        submittedAt: a.datetime().required(),
+      })
+      .disableOperations(["subscriptions"])
+      .secondaryIndexes((index) => [
+        index("form").sortKeys(["submittedAt"]).queryField("listSignupEntriesByFormAndSubmittedAt"),
+      ])
+      .authorization((allow) => [
+        allow.group("editor").to(["read"]),
+        allow.group("admin").to(["read", "delete"]),
+      ]),
+    SignupReceipt: a.customType({
+      status: a.string().required(),
+      message: a.string(),
+    }),
+    submitSignup: a
+      .mutation()
+      .arguments({
+        form: a.string().required(),
+        value: a.string().required(),
+        renderedAt: a.string().required(),
+        website: a.string(),
+      })
+      .returns(a.ref("SignupReceipt"))
+      .authorization((allow) => [allow.guest()])
+      .handler(a.handler.function(signupSubmit)),
+  };
+}

package/amplify/plugins/signup/waf.js

@@ -0,0 +1,48 @@
+import { CfnWebACL, CfnWebACLAssociation } from "aws-cdk-lib/aws-wafv2";
+export const SIGNUP_MUTATION_FIELD = "submitSignup";
+export const WAF_MINIMUM_RATE_LIMIT = 10;
+export const WAF_EVALUATION_WINDOW_SECONDS = 60;
+/**
+ * A regional web ACL on the AppSync API with one rate-based rule: more than `limit`
+ * submitSignup requests from one address in a minute are blocked with a 429 before
+ * the function runs. Only requests whose body names the mutation count, so reads,
+ * newsroom saves and CLI imports from the same address are never limited.
+ */
+export function addSignupRateLimit(scope, input) {
+    if (!Number.isInteger(input.limit) || input.limit < WAF_MINIMUM_RATE_LIMIT) {
+        throw new Error(`signup waf rate limit must be an integer of at least ${WAF_MINIMUM_RATE_LIMIT} (AWS WAF minimum)`);
+    }
+    const acl = new CfnWebACL(scope, "PapyrusSignupWebAcl", {
+        scope: "REGIONAL",
+        defaultAction: { allow: {} },
+        visibilityConfig: { cloudWatchMetricsEnabled: true, metricName: "PapyrusSignupWebAcl", sampledRequestsEnabled: true },
+        rules: [
+            {
+                name: "SignupRateLimitPerAddress",
+                priority: 0,
+                action: { block: { customResponse: { responseCode: 429 } } },
+                visibilityConfig: { cloudWatchMetricsEnabled: true, metricName: "SignupRateLimitPerAddress", sampledRequestsEnabled: true },
+                statement: {
+                    rateBasedStatement: {
+                        limit: input.limit,
+                        evaluationWindowSec: WAF_EVALUATION_WINDOW_SECONDS,
+                        aggregateKeyType: "IP",
+                        scopeDownStatement: {
+                            byteMatchStatement: {
+                                searchString: SIGNUP_MUTATION_FIELD,
+                                positionalConstraint: "CONTAINS",
+                                fieldToMatch: { body: { oversizeHandling: "NO_MATCH" } },
+                                textTransformations: [{ priority: 0, type: "NONE" }],
+                            },
+                        },
+                    },
+                },
+            },
+        ],
+    });
+    new CfnWebACLAssociation(scope, "PapyrusSignupWebAclAssociation", {
+        resourceArn: input.graphqlApiArn,
+        webAclArn: acl.attrArn,
+    });
+    return acl;
+}

package/amplify/plugins/signup/waf.ts

@@ -0,0 +1,51 @@
+import { CfnWebACL, CfnWebACLAssociation } from "aws-cdk-lib/aws-wafv2";
+import type { Construct } from "constructs";
+
+export const SIGNUP_MUTATION_FIELD = "submitSignup";
+export const WAF_MINIMUM_RATE_LIMIT = 10;
+export const WAF_EVALUATION_WINDOW_SECONDS = 60;
+
+/**
+ * A regional web ACL on the AppSync API with one rate-based rule: more than `limit`
+ * submitSignup requests from one address in a minute are blocked with a 429 before
+ * the function runs. Only requests whose body names the mutation count, so reads,
+ * newsroom saves and CLI imports from the same address are never limited.
+ */
+export function addSignupRateLimit(scope: Construct, input: { graphqlApiArn: string; limit: number }): CfnWebACL {
+  if (!Number.isInteger(input.limit) || input.limit < WAF_MINIMUM_RATE_LIMIT) {
+    throw new Error(`signup waf rate limit must be an integer of at least ${WAF_MINIMUM_RATE_LIMIT} (AWS WAF minimum)`);
+  }
+  const acl = new CfnWebACL(scope, "PapyrusSignupWebAcl", {
+    scope: "REGIONAL",
+    defaultAction: { allow: {} },
+    visibilityConfig: { cloudWatchMetricsEnabled: true, metricName: "PapyrusSignupWebAcl", sampledRequestsEnabled: true },
+    rules: [
+      {
+        name: "SignupRateLimitPerAddress",
+        priority: 0,
+        action: { block: { customResponse: { responseCode: 429 } } },
+        visibilityConfig: { cloudWatchMetricsEnabled: true, metricName: "SignupRateLimitPerAddress", sampledRequestsEnabled: true },
+        statement: {
+          rateBasedStatement: {
+            limit: input.limit,
+            evaluationWindowSec: WAF_EVALUATION_WINDOW_SECONDS,
+            aggregateKeyType: "IP",
+            scopeDownStatement: {
+              byteMatchStatement: {
+                searchString: SIGNUP_MUTATION_FIELD,
+                positionalConstraint: "CONTAINS",
+                fieldToMatch: { body: { oversizeHandling: "NO_MATCH" } },
+                textTransformations: [{ priority: 0, type: "NONE" }],
+              },
+            },
+          },
+        },
+      },
+    ],
+  });
+  new CfnWebACLAssociation(scope, "PapyrusSignupWebAclAssociation", {
+    resourceArn: input.graphqlApiArn,
+    webAclArn: acl.attrArn,
+  });
+  return acl;
+}

package/amplify/plugins/types.js

@@ -0,0 +1 @@
+export {};

package/amplify/plugins/types.ts

@@ -0,0 +1,39 @@
+import type { Construct } from "constructs";
+
+/** How a site asks for a plugin in `papyrus.config.ts`: `plugins: ["signup"]` or `plugins: [{ name: "signup", forms: ["news"] }]`. */
+export type PluginRequest = string | ({ name: string } & Record<string, unknown>);
+
+/** What a plugin declares about itself. A test pins the schema, the guest rules and the static files to this. */
+export type PluginManifest = {
+  name: string;
+  /** Public contract version. Bump it when a mutation input, a model field, an element name or an attribute changes. No compatibility shims. */
+  contract: number;
+  models: string[];
+  mutations: string[];
+  /** What an anonymous visitor may call. Everything else is closed to guests. */
+  guest: { mutations: string[] };
+  newsroomPanels: { id: string; label: string }[];
+  /** Keys the projector writes into the site bucket when the plugin is enabled. */
+  staticAssets: string[];
+};
+
+/** Where the deploy-time wiring puts its resources. Filled in by `defineSiteBackend`. */
+export type PluginWiringContext = {
+  createStack: (name: string) => Construct;
+  graphqlApiId: string;
+  graphqlEndpoint: string;
+};
+
+export type PapyrusPlugin<Config, Functions = unknown> = {
+  manifest: PluginManifest;
+  /** Validates the request and fills in defaults. Throws a readable error. */
+  resolveConfig: (request: PluginRequest) => Config;
+  /** Amplify function resources the plugin adds to `defineBackend`. */
+  functions: () => Functions;
+  /** Models and custom operations merged into the site schema. */
+  schemaDefinitions: () => Record<string, unknown>;
+  /** The settings the newsroom and the page component may read from `amplify_outputs.json` (`custom.papyrusPlugins.<name>`). Never secrets. */
+  publicSettings: (config: Config) => Record<string, unknown>;
+  /** Everything that needs the backend to exist: IAM, environment, WAF, outputs. */
+  wire: (backend: any, config: Config, context: PluginWiringContext) => void;
+};

package/amplify/plugins/wire.js

@@ -0,0 +1,24 @@
+export const PLUGINS_ENVIRONMENT_VARIABLE = "PAPYRUS_PLUGINS";
+export const PLUGINS_OUTPUT_KEY = "papyrusPlugins";
+/**
+ * Deploy-time wiring for every enabled plugin. A site without plugins reaches no line of this:
+ * nothing is added to the stacks, the environment or the outputs.
+ */
+export function wirePlugins(backend, plugins, contentActionsLambda) {
+    if (plugins.length === 0)
+        return;
+    const graphqlApi = backend.data.resources.graphqlApi;
+    const context = {
+        createStack: (name) => backend.createStack(name),
+        graphqlApiId: graphqlApi.apiId,
+        graphqlEndpoint: backend.data.resources.cfnResources.cfnGraphqlApi.attrGraphQlUrl,
+    };
+    for (const { plugin, config } of plugins)
+        plugin.wire(backend, config, context);
+    contentActionsLambda.addEnvironment(PLUGINS_ENVIRONMENT_VARIABLE, plugins.map(({ plugin }) => plugin.manifest.name).join(","));
+    backend.addOutput({
+        custom: {
+            [PLUGINS_OUTPUT_KEY]: Object.fromEntries(plugins.map(({ plugin, config }) => [plugin.manifest.name, plugin.publicSettings(config)])),
+        },
+    });
+}

package/amplify/plugins/wire.ts

@@ -0,0 +1,26 @@
+import type { Function as LambdaFunction } from "aws-cdk-lib/aws-lambda";
+import type { ResolvedPlugin } from "./registry";
+
+export const PLUGINS_ENVIRONMENT_VARIABLE = "PAPYRUS_PLUGINS";
+export const PLUGINS_OUTPUT_KEY = "papyrusPlugins";
+
+/**
+ * Deploy-time wiring for every enabled plugin. A site without plugins reaches no line of this:
+ * nothing is added to the stacks, the environment or the outputs.
+ */
+export function wirePlugins(backend: any, plugins: ResolvedPlugin[], contentActionsLambda: LambdaFunction): void {
+  if (plugins.length === 0) return;
+  const graphqlApi = backend.data.resources.graphqlApi;
+  const context = {
+    createStack: (name: string) => backend.createStack(name),
+    graphqlApiId: graphqlApi.apiId as string,
+    graphqlEndpoint: backend.data.resources.cfnResources.cfnGraphqlApi.attrGraphQlUrl as string,
+  };
+  for (const { plugin, config } of plugins) plugin.wire(backend, config, context);
+  contentActionsLambda.addEnvironment(PLUGINS_ENVIRONMENT_VARIABLE, plugins.map(({ plugin }) => plugin.manifest.name).join(","));
+  backend.addOutput({
+    custom: {
+      [PLUGINS_OUTPUT_KEY]: Object.fromEntries(plugins.map(({ plugin, config }) => [plugin.manifest.name, plugin.publicSettings(config)])),
+    },
+  });
+}

package/amplify/site-backend-config.ts

@@ -1,3 +1,5 @@
+import type { PluginRequest } from "./plugins/types";
+
 /**
  * Per-site backend configuration: the argument of `defineSiteBackend(site)`.
  * Config is passed in; the environment is only a fallback so Papyrus's own
@@ -171,6 +173,11 @@ export type PapyrusSiteBackendConfig = {
    * site out. See `resolveSitePublication`.
    */
   publication?: PapyrusPublicationConfig | false;
+  /**
+   * Deploy-time plugins (docs/plugins.md): `["signup"]`, or `[{ name: "signup", forms: ["news"] }]`.
+   * Unset: no plugin, and the synthesized backend is exactly what it was before plugins existed.
+   */
+  plugins?: PluginRequest[];
   features?: {
     consoleResponder?: boolean;
     inboundEmail?: boolean;

package/amplify/site-backend.js

@@ -18,7 +18,9 @@ import { revalidateSecretReadStatement } from "./revalidate-secret-policy.js";
 import { revalidateDistributionEnvironment, revalidateInvalidationStatement, validateRevalidateDistributionIds, } from "./revalidate-invalidation-settings.js";
 import { addInvalidationPathAlarm } from "./publication/invalidation-alarm.js";
 import { applyCognitoDomainPrefix, authConfigFromEnv, defineSiteAuth } from "./auth/resource.js";
-import { data } from "./data/resource.js";
+import { defineSiteData } from "./data/resource.js";
+import { resolvePlugins } from "./plugins/registry.js";
+import { wirePlugins } from "./plugins/wire.js";
 import { assignmentAction } from "./functions/assignment-action/resource.js";
 import { categoryAction } from "./functions/category-action/resource.js";
 import { ConsoleChatResponderStack } from "./functions/console-chat-responder/resource.js";
@@ -76,12 +78,16 @@ export function defineSiteBackend(papyrusSite) {
     const publicationPlan = planS3ProjectionBackend(publication);
     const renditionsPlan = planRenditions(publication, process.cwd());
     setSiteFilesForContentActionsBundle(publicationPlan.enabled ? publicationPlan.siteFiles : undefined);
+    const plugins = resolvePlugins(site.plugins);
+    const pluginDefinitions = Object.assign({}, ...plugins.map(({ plugin }) => plugin.schemaDefinitions()));
+    const pluginFunctions = Object.assign({}, ...plugins.map(({ plugin }) => plugin.functions()));
     const backend = defineBackend({
+        ...pluginFunctions,
         assignmentAction,
         auth: defineSiteAuth(authConfig),
         categoryAction,
         contentActions,
-        data,
+        data: defineSiteData(pluginDefinitions),
         knowledgeQuery,
         manageUserRole,
         modelAttachmentUpload,
@@ -571,5 +577,6 @@ export function defineSiteBackend(papyrusSite) {
                 : null,
         },
     });
+    wirePlugins(backend, plugins, contentActionsLambda);
     return backend;
 }

package/amplify/site-backend.ts

@@ -25,7 +25,9 @@ import {
 } from "./revalidate-invalidation-settings";
 import { addInvalidationPathAlarm } from "./publication/invalidation-alarm";
 import { applyCognitoDomainPrefix, authConfigFromEnv, defineSiteAuth } from "./auth/resource";
-import { data } from "./data/resource";
+import { defineSiteData } from "./data/resource";
+import { resolvePlugins } from "./plugins/registry";
+import { wirePlugins } from "./plugins/wire";
 import { assignmentAction } from "./functions/assignment-action/resource";
 import { categoryAction } from "./functions/category-action/resource";
 import { ConsoleChatResponderStack } from "./functions/console-chat-responder/resource";
@@ -97,12 +99,16 @@ export function defineSiteBackend(papyrusSite: PapyrusSite) {
   const publicationPlan = planS3ProjectionBackend(publication);
   const renditionsPlan = planRenditions(publication, process.cwd());
   setSiteFilesForContentActionsBundle(publicationPlan.enabled ? publicationPlan.siteFiles : undefined);
+  const plugins = resolvePlugins(site.plugins);
+  const pluginDefinitions = Object.assign({}, ...plugins.map(({ plugin }) => plugin.schemaDefinitions()));
+  const pluginFunctions: Record<never, never> = Object.assign({}, ...plugins.map(({ plugin }) => plugin.functions()));
   const backend = defineBackend({
+    ...pluginFunctions,
     assignmentAction,
     auth: defineSiteAuth(authConfig),
     categoryAction,
     contentActions,
-    data,
+    data: defineSiteData(pluginDefinitions),
     knowledgeQuery,
     manageUserRole,
     modelAttachmentUpload,
@@ -707,5 +713,7 @@ export function defineSiteBackend(papyrusSite: PapyrusSite) {
         : null,
     },
   });
+  wirePlugins(backend, plugins, contentActionsLambda);
+
   return backend;
 }

package/components/article-video.tsx

@@ -7,6 +7,8 @@ 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 { useNearViewport } from "./use-near-viewport";
+import { planVideoLoading, videoElementKey } from "../lib/video-loading";
 import { resolveVideoMode, resolveVideoModeFromEnv, type VideoMode } from "../lib/video-mode";
 
 type ArticleVideoFigureProps = {
@@ -18,6 +20,7 @@ type ArticleVideoFigureProps = {
 };
 
 const PREVIEW_STORAGE_PREFIX = "papyrus-video-preview:";
+const VIDEO_LOAD_ROOT_MARGIN = "200px 0px";
 
 export function ArticleVideoFigure({
   video,
@@ -34,6 +37,8 @@ export function ArticleVideoFigure({
   const [previewReady, setPreviewReady] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
+  const figureRef = useRef<HTMLElement>(null);
+  const isNearViewport = useNearViewport(figureRef, VIDEO_LOAD_ROOT_MARGIN);
   const isFramed = getSiteBrand().videoPlayer === "framed";
 
   useEffect(() => {
@@ -44,6 +49,12 @@ export function ArticleVideoFigure({
   // 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 loadingPlan = planVideoLoading({
+    hasHydrated,
+    isNearViewport,
+    hasPoster: Boolean(video.posterSrc),
+  });
+  const videoKey = videoElementKey(loadingPlan.attachSource, src);
   const usePreview = videoMode === "preview" && Boolean(videoScript?.dsl);
   const previewDsl = videoScript?.dsl
     ? normalizeDevPreviewDsl(videoScript.dsl, getSiteBrand().video?.sceneComponents)
@@ -191,6 +202,7 @@ export function ArticleVideoFigure({
   if (isFramed) {
     return (
       <figure
+        ref={figureRef}
         className={`${figureClassName} article-video--framed`}
         data-media-type="video"
         data-video-theme={resolvedTheme}
@@ -200,11 +212,11 @@ export function ArticleVideoFigure({
           <video
             ref={videoRef}
             playsInline
-            preload="metadata"
+            preload={loadingPlan.preload}
             poster={video.posterSrc}
             aria-label={video.alt}
             className="article-video__player"
-            key={hasHydrated ? src : "ssr"}
+            key={videoKey}
             onPlay={() => setIsPlaying(true)}
             onPause={() => setIsPlaying(false)}
             onEnded={() => setIsPlaying(false)}
@@ -214,7 +226,7 @@ export function ArticleVideoFigure({
               if (Number.isFinite(nextDuration) && nextDuration > 0) setDuration(nextDuration);
             }}
           >
-            <source src={src} type="video/mp4" />
+            {loadingPlan.attachSource ? <source src={src} type="video/mp4" /> : null}
           </video>
         </div>
         {framedControls}
@@ -226,17 +238,17 @@ export function ArticleVideoFigure({
   }
 
   return (
-    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme} data-video-mode={videoMode}>
+    <figure ref={figureRef} className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme} data-video-mode={videoMode}>
       <video
         controls
         playsInline
-        preload="metadata"
+        preload={loadingPlan.preload}
         poster={video.posterSrc}
         aria-label={video.alt}
         className="article-video__player"
-        key={hasHydrated ? src : "ssr"}
+        key={videoKey}
       >
-        <source src={src} type="video/mp4" />
+        {loadingPlan.attachSource ? <source src={src} type="video/mp4" /> : null}
       </video>
       {video.caption ? <figcaption>{video.caption}</figcaption> : null}
       {video.credit ? <p className="article-video__credit">{video.credit}</p> : null}

package/components/signup-entries-panel.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { generateClient } from "aws-amplify/data";
+import amplifyOutputs from "papyrus-amplify-outputs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { signupForms, type PluginOutputs } from "../lib/plugin-settings";
+import { signupEntriesToCsv, type SignupEntryRecord } from "../lib/signup-csv";
+
+const LIST_QUERY = `query ListSignupEntries($form: String!, $nextToken: String) {
+  listSignupEntriesByFormAndSubmittedAt(form: $form, sortDirection: DESC, limit: 200, nextToken: $nextToken) {
+    items { id form value submittedAt }
+    nextToken
+  }
+}`;
+
+type ListResult = { data?: { listSignupEntriesByFormAndSubmittedAt?: { items: SignupEntryRecord[]; nextToken?: string | null } }; errors?: { message?: string }[] };
+
+async function loadAllEntries(form: string): Promise<SignupEntryRecord[]> {
+  const client = generateClient({ authMode: "userPool" });
+  const entries: SignupEntryRecord[] = [];
+  let nextToken: string | null | undefined;
+  do {
+    const result = (await client.graphql({ query: LIST_QUERY, variables: { form, nextToken } })) as ListResult;
+    if (result.errors?.length) throw new Error(result.errors[0]?.message ?? "Could not load signups.");
+    const page = result.data?.listSignupEntriesByFormAndSubmittedAt;
+    entries.push(...(page?.items ?? []));
+    nextToken = page?.nextToken;
+  } while (nextToken);
+  return entries;
+}
+
+export function SignupEntriesPanel() {
+  const forms = useMemo(() => signupForms(amplifyOutputs as PluginOutputs), []);
+  const [form, setForm] = useState(forms[0] ?? "");
+  const [entries, setEntries] = useState<SignupEntryRecord[] | null>(null);
+  const [problem, setProblem] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    if (!form) return;
+    setEntries(null);
+    setProblem(null);
+    try {
+      setEntries(await loadAllEntries(form));
+    } catch (error) {
+      setProblem(error instanceof Error ? error.message : "Could not load signups.");
+    }
+  }, [form]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const exportCsv = () => {
+    if (!entries) return;
+    const url = URL.createObjectURL(new Blob([signupEntriesToCsv(entries)], { type: "text/csv;charset=utf-8" }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `signups-${form}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <section aria-labelledby="newsroom-signups-title" data-news-desk-admin-panel="signups">
+      <h3 id="newsroom-signups-title">Signups</h3>
+      <p>Addresses people entered in the site&apos;s signup forms. Only editors and admins can see them.</p>
+      <label>
+        Form{" "}
+        <select value={form} onChange={(event) => setForm(event.target.value)} disabled={forms.length < 2}>
+          {forms.map((name) => (
+            <option key={name} value={name}>{name}</option>
+          ))}
+        </select>
+      </label>{" "}
+      <button type="button" onClick={() => void refresh()}>Refresh</button>{" "}
+      <button type="button" onClick={exportCsv} disabled={!entries || entries.length === 0}>Export CSV</button>
+      <p role="status" aria-live="polite">
+        {problem ? `Error: ${problem}` : entries === null ? "Loading..." : `${entries.length} ${entries.length === 1 ? "entry" : "entries"}`}
+      </p>
+      {entries && entries.length > 0 ? (
+        <table>
+          <thead>
+            <tr><th scope="col">Submitted</th><th scope="col">Address</th></tr>
+          </thead>
+          <tbody>
+            {entries.map((entry) => (
+              <tr key={entry.id}><td>{entry.submittedAt}</td><td>{entry.value}</td></tr>
+            ))}
+          </tbody>
+        </table>
+      ) : null}
+    </section>
+  );
+}

package/components/topic-steering-workspace.tsx

@@ -10,6 +10,9 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import type { ReactNode, RefObject } from "react";
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
+import amplifyOutputs from "papyrus-amplify-outputs";
+import { SignupEntriesPanel } from "./signup-entries-panel";
+import { pluginSettings, type PluginOutputs } from "../lib/plugin-settings";
 import { generateClient } from "aws-amplify/data";
 import type { Schema } from "../amplify/data/resource";
 import {
@@ -235,7 +238,7 @@ type AssignmentAction = "claim" | "release" | "complete" | "cancel" | "reopen" |
 type ReportingPacketReviewDecision = "select" | "merge" | "brief" | "hold" | "kill";
 type AssignmentDeskViewMode = "queue" | "budget";
 type UserRoleAction = "grant" | "revoke";
-type AdministrationPanel = "users" | "policies" | "sections" | "procedures";
+type AdministrationPanel = "users" | "policies" | "sections" | "procedures" | "signups";
 export type NewsDeskTab = "overview" | "desks" | "topics" | "concepts" | "references" | "insights" | "messages" | "assignments" | "administration" | "search";
 type LexicalRuleScope = "publication" | "corpus" | "classifier" | "category";
 type AnalysisReindexMode = "online-update" | "classifier-retrain" | "scoped-topic-rebuild" | "entity-graph-rebuild" | "generated-analysis-rebuild";
@@ -4452,8 +4455,20 @@ function AdministrationDeskView({
                 <strong>Procedures</strong>
                 <span>Procedure registry and versioned Tactus code</span>
               </Link>
+              {signupPluginEnabled() ? (
+                <Link
+                  href={administrationPanelHref("signups", isDemo)}
+                  data-news-desk-admin-nav="signups"
+                  data-active={administrationPanel === "signups" || undefined}
+                  onClick={() => onPanelChange("signups")}
+                >
+                  <strong>Signups</strong>
+                  <span>Addresses from the site&apos;s signup forms</span>
+                </Link>
+              ) : null}
             </nav>
             <div className="news-desk-settings-panel">
+              {administrationPanel === "signups" ? <SignupEntriesPanel /> : null}
               {administrationPanel === "users" ? (
                 <AdministrationUsersPanel
                   canManageUsers={canManageUsers}
@@ -13646,8 +13661,13 @@ function semanticVersionKey(kind: string, id: string): string {
   return `${kind}#${id}`;
 }
 
+function signupPluginEnabled(): boolean {
+  return pluginSettings(amplifyOutputs as PluginOutputs, "signup") !== null;
+}
+
 function normalizeAdministrationPanel(value: string | null | undefined): AdministrationPanel {
   if (value === "policies" || value === "sections" || value === "procedures") return value;
+  if (value === "signups" && signupPluginEnabled()) return value;
   return "users";
 }
 

package/components/use-near-viewport.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect, useState, type RefObject } from "react";
+
+export function useNearViewport(targetRef: RefObject<Element | null>, rootMargin: string): boolean {
+  const [isNearViewport, setIsNearViewport] = useState(false);
+
+  useEffect(() => {
+    if (isNearViewport) return;
+    const target = targetRef.current;
+    if (!target) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIsNearViewport(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setIsNearViewport(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin },
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [isNearViewport, rootMargin, targetRef]);
+
+  return isNearViewport;
+}

package/lib/plugin-settings.ts

@@ -0,0 +1,11 @@
+export type PluginOutputs = { custom?: { papyrusPlugins?: Record<string, Record<string, unknown>> } };
+
+/** The settings a deployed plugin published in `amplify_outputs.json`, or null when the site did not enable it. */
+export function pluginSettings(outputs: PluginOutputs | null | undefined, name: string): Record<string, unknown> | null {
+  return outputs?.custom?.papyrusPlugins?.[name] ?? null;
+}
+
+export function signupForms(outputs: PluginOutputs | null | undefined): string[] {
+  const forms = pluginSettings(outputs, "signup")?.forms;
+  return Array.isArray(forms) ? forms.filter((form): form is string => typeof form === "string") : [];
+}

package/lib/signup-csv.ts

@@ -0,0 +1,24 @@
+export type SignupEntryRecord = {
+  id: string;
+  form: string;
+  value: string;
+  submittedAt: string;
+};
+
+export const SIGNUP_CSV_HEADER = ["form", "value", "submittedAt"] as const;
+const FORMULA_STARTS = new Set(["=", "+", "-", "@", "\t", "\r"]);
+
+/** A spreadsheet runs a cell that starts with one of these as a formula; a leading quote makes it text. */
+export function neutralizeFormula(cell: string): string {
+  return cell !== "" && FORMULA_STARTS.has(cell[0]) ? `'${cell}` : cell;
+}
+
+export function csvCell(cell: string): string {
+  const safe = neutralizeFormula(cell);
+  return /[",\r\n]/.test(safe) ? `"${safe.replace(/"/g, '""')}"` : safe;
+}
+
+export function signupEntriesToCsv(entries: SignupEntryRecord[]): string {
+  const rows = entries.map((entry) => SIGNUP_CSV_HEADER.map((column) => csvCell(String(entry[column] ?? ""))).join(","));
+  return `${[SIGNUP_CSV_HEADER.join(","), ...rows].join("\r\n")}\r\n`;
+}

package/lib/video-loading.ts

@@ -0,0 +1,22 @@
+export type VideoPreload = "none" | "metadata";
+
+export type VideoLoadingPlan = {
+  attachSource: boolean;
+  preload: VideoPreload;
+};
+
+export type VideoLoadingInput = {
+  hasHydrated: boolean;
+  isNearViewport: boolean;
+  hasPoster: boolean;
+};
+
+export function planVideoLoading({ hasHydrated, isNearViewport, hasPoster }: VideoLoadingInput): VideoLoadingPlan {
+  const attachSource = hasHydrated && isNearViewport;
+  const preload: VideoPreload = attachSource && !hasPoster ? "metadata" : "none";
+  return { attachSource, preload };
+}
+
+export function videoElementKey(attachSource: boolean, resolvedSource: string): string {
+  return attachSource ? resolvedSource : "unattached";
+}