@vespercms/admin 0.0.0-stage → 0.1.0-next.0

package/src/media/hygiene.ts

@@ -0,0 +1,220 @@
+import { UPLOAD_MAX_BYTES, UPLOAD_WARN_BYTES } from '@vespercms/core';
+import DOMPurify from 'dompurify';
+import {
+  detectType,
+  imageFacts,
+  stripJpeg,
+  stripPng,
+  stripWebp,
+  type DetectedType,
+} from './formats.ts';
+
+/*
+ * Upload hygiene (spec §6.6.6), in the browser, before anything is saved:
+ * - photos larger than `maxEdge` are scaled down;
+ * - EXIF orientation is applied to the pixels, then location and other
+ *   personal metadata are removed (losslessly when the pixels don't change);
+ * - HEIC photos become JPEG where the browser can decode them;
+ * - SVG is sanitized: no scripts, handlers, javascript: links or foreign HTML;
+ * - files over the hard limit are refused, and large ones flagged.
+ * PNG, WebP, AVIF, SVG and GIF keep their format.
+ */
+
+export type PreparedUpload = {
+  bytes: Uint8Array;
+  name: string;
+  type: DetectedType;
+  /** What hygiene did, in words, for the editor ("Removed location data"). */
+  notes: string[];
+  /** Larger than the warning size: the editor confirms before uploading. */
+  large: boolean;
+  width?: number;
+  height?: number;
+};
+
+export type PrepareResult = { ok: true; upload: PreparedUpload } | { ok: false; message: string };
+
+export type HygieneOptions = {
+  maxEdge?: number;
+  /** Only images are accepted (an image field), or anything (a file field). */
+  accept?: 'image' | 'any';
+};
+
+const IMAGE_TYPES = new Set<DetectedType>(['jpeg', 'png', 'gif', 'webp', 'avif', 'heic', 'svg']);
+
+export async function prepareUpload(
+  file: File,
+  options: HygieneOptions = {},
+): Promise<PrepareResult> {
+  const maxEdge = options.maxEdge ?? 3000;
+  const original = new Uint8Array(await file.arrayBuffer());
+  const type = detectType(original);
+  if (options.accept === 'image' && !IMAGE_TYPES.has(type)) {
+    return {
+      ok: false,
+      message: `${file.name} isn’t an image this site can use (JPEG, PNG, WebP, AVIF, GIF or SVG).`,
+    };
+  }
+
+  const notes: string[] = [];
+  let bytes: Uint8Array = original;
+  let name = file.name;
+  let width: number | undefined;
+  let height: number | undefined;
+
+  if (type === 'svg') {
+    const clean = sanitizeSvg(new TextDecoder().decode(original));
+    if (clean.removed) notes.push('Removed scripts and unsafe links from the SVG');
+    bytes = new TextEncoder().encode(clean.svg);
+  } else if (type === 'heic') {
+    const converted = await reencode(new Blob([original]), 'image/jpeg', maxEdge);
+    if (!converted) {
+      return {
+        ok: false,
+        message:
+          'This browser can’t convert iPhone (HEIC) photos. Export the photo as JPEG first, or upload it from Safari.',
+      };
+    }
+    bytes = converted.bytes;
+    ({ width, height } = converted);
+    name = name.replace(/\.(heic|heif)$/i, '') + '.jpg';
+    notes.push('Converted from HEIC to JPEG', 'Removed location and camera data');
+  } else if (type === 'jpeg' || type === 'png' || type === 'webp') {
+    const facts = imageFacts(type, original);
+    ({ width, height } = facts);
+    const sideways = (facts.orientation ?? 1) !== 1;
+    const tooBig = Math.max(facts.width ?? 0, facts.height ?? 0) > maxEdge;
+    if (sideways || tooBig) {
+      // The pixels change, so re-encode (which also drops all metadata).
+      const mime = type === 'jpeg' ? 'image/jpeg' : type === 'png' ? 'image/png' : 'image/webp';
+      const converted = await reencode(new Blob([original], { type: mime }), mime, maxEdge);
+      if (converted) {
+        bytes = converted.bytes;
+        if (tooBig)
+          notes.push(
+            `Resized from ${String(facts.width)}×${String(facts.height)} to ${String(converted.width)}×${String(converted.height)}`,
+          );
+        if (sideways) notes.push('Turned the photo upright');
+        ({ width, height } = converted);
+      } else {
+        bytes = strip(type, original);
+        notes.push('Couldn’t resize this image in this browser, so it was kept at full size');
+      }
+    } else {
+      bytes = strip(type, original);
+    }
+    if (facts.hasLocation) notes.push('Removed location data');
+    else if (facts.hasMetadata) notes.push('Removed camera and editing metadata');
+  }
+
+  if (bytes.length > UPLOAD_MAX_BYTES) {
+    return {
+      ok: false,
+      message: `${name} is ${megabytes(bytes.length)} even after processing. The limit is ${megabytes(UPLOAD_MAX_BYTES)}.`,
+    };
+  }
+  return {
+    ok: true,
+    upload: {
+      bytes,
+      name,
+      type: type === 'heic' ? 'jpeg' : type,
+      notes,
+      large: bytes.length > UPLOAD_WARN_BYTES,
+      ...(width !== undefined ? { width } : {}),
+      ...(height !== undefined ? { height } : {}),
+    },
+  };
+}
+
+function strip(type: 'jpeg' | 'png' | 'webp', bytes: Uint8Array): Uint8Array {
+  if (type === 'jpeg') return stripJpeg(bytes);
+  if (type === 'png') return stripPng(bytes);
+  return stripWebp(bytes);
+}
+
+export function megabytes(n: number): string {
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+/** "812 bytes", "48 KB", "3.2 MB". */
+export function fileSize(n: number): string {
+  if (n < 1024) return `${String(n)} bytes`;
+  if (n < 1024 * 1024) return `${String(Math.round(n / 1024))} KB`;
+  return megabytes(n);
+}
+
+/**
+ * Decodes, applies EXIF orientation, scales to fit `maxEdge` and encodes.
+ * Returns null where the browser can't decode the file (HEIC outside
+ * Safari) or has no canvas.
+ */
+async function reencode(
+  blob: Blob,
+  mime: string,
+  maxEdge: number,
+): Promise<{ bytes: Uint8Array; width: number; height: number } | null> {
+  if (typeof createImageBitmap !== 'function') return null;
+  let bitmap: ImageBitmap;
+  try {
+    bitmap = await createImageBitmap(blob, { imageOrientation: 'from-image' });
+  } catch {
+    return null;
+  }
+  const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
+  const width = Math.round(bitmap.width * scale);
+  const height = Math.round(bitmap.height * scale);
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d');
+  if (!context) return null;
+  context.imageSmoothingQuality = 'high';
+  context.drawImage(bitmap, 0, 0, width, height);
+  bitmap.close();
+  const out = await new Promise<Blob | null>((resolve) => {
+    canvas.toBlob(resolve, mime, mime === 'image/png' ? undefined : 0.9);
+  });
+  // A browser that can't write this format hands back PNG; keep the original then.
+  if (!out || out.type !== mime) return null;
+  return { bytes: new Uint8Array(await out.arrayBuffer()), width, height };
+}
+
+/**
+ * Removes anything that can run or navigate: scripts, event handlers,
+ * javascript: and data: links, embedded HTML, and animations that rewrite
+ * links or handlers. Drawing content is kept as it was.
+ */
+export function sanitizeSvg(svg: string): { svg: string; removed: boolean } {
+  const purify = DOMPurify(window);
+  let removed = false;
+  purify.addHook('uponSanitizeElement', (node, data) => {
+    if (data.tagName === 'set' || /^animate/i.test(data.tagName)) {
+      const target = (node as Element).getAttribute('attributeName') ?? '';
+      if (/^(on|href$|xlink:href$)/i.test(target)) {
+        node.parentNode?.removeChild(node);
+        removed = true;
+      }
+    }
+  });
+  purify.addHook('uponSanitizeAttribute', (_node, data) => {
+    if (
+      /^(href|xlink:href)$/i.test(data.attrName) &&
+      /^\s*(javascript|data|vbscript):/i.test(data.attrValue)
+    ) {
+      data.keepAttr = false;
+      removed = true;
+    }
+  });
+  const clean = purify.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    FORBID_TAGS: ['foreignObject', 'script', 'iframe', 'embed', 'object'],
+  });
+  // DOMPurify always reports the <body> it parsed into; anything else was really removed.
+  if (purify.removed.some((r) => !('element' in r) || r.element.nodeName !== 'BODY'))
+    removed = true;
+  return {
+    svg: clean.startsWith('<svg') ? clean : `<svg xmlns="http://www.w3.org/2000/svg"></svg>`,
+    removed,
+  };
+}

package/src/media/upload.ts

@@ -0,0 +1,47 @@
+import { gitBlobSha, type MediaItem } from '@vespercms/core';
+import type { StudioApi } from '../app/api.ts';
+import { prepareUpload, type HygieneOptions, type PreparedUpload } from './hygiene.ts';
+
+/*
+ * The upload flow shared by the image field, the file field and the media
+ * browser: hygiene, then a duplicate check against the site's files by
+ * content hash (spec §6.6.6), then the upload itself.
+ */
+
+export type UploadStep =
+  | { step: 'refused'; message: string }
+  /** The same bytes are already in the site: reuse that file, or upload a copy. */
+  | { step: 'duplicate'; upload: PreparedUpload; existing: string }
+  /** Large after processing: the editor confirms first. */
+  | { step: 'confirm-large'; upload: PreparedUpload }
+  | { step: 'ready'; upload: PreparedUpload };
+
+export async function checkUpload(
+  file: File,
+  media: readonly MediaItem[],
+  options: HygieneOptions,
+): Promise<UploadStep> {
+  const prepared = await prepareUpload(file, options);
+  if (!prepared.ok) return { step: 'refused', message: prepared.message };
+  // The site's files are keyed by git blob SHA (MediaItem.hash), so the upload is too.
+  const hash = await gitBlobSha(prepared.upload.bytes);
+  const existing = media.find((item) => item.hash === hash);
+  if (existing) return { step: 'duplicate', upload: prepared.upload, existing: existing.path };
+  if (prepared.upload.large) return { step: 'confirm-large', upload: prepared.upload };
+  return { step: 'ready', upload: prepared.upload };
+}
+
+export async function sendUpload(
+  api: StudioApi,
+  upload: PreparedUpload,
+  folder: string,
+  options: { withNextSave?: boolean } = {},
+): Promise<{ ok: true; path: string } | { ok: false; message: string }> {
+  const result = await api.upload(
+    new Blob([upload.bytes as BlobPart]),
+    upload.name,
+    folder,
+    options,
+  );
+  return result.ok ? { ok: true, path: result.path } : result;
+}

package/src/mount.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './app/App.tsx';
+import { applyAppearance, readAppearance } from './app/appearance.ts';
+import type { StudioOptions } from './types.ts';
+
+/** Renders the studio into `element`. Returns a function that unmounts it. */
+export function mountStudio(element: Element, options: StudioOptions): () => void {
+  // Again, after admin.astro's script: a site whose policy blocks inline scripts still gets the choice.
+  applyAppearance(readAppearance());
+  const root = createRoot(element);
+  root.render(
+    <StrictMode>
+      <App {...options} />
+    </StrictMode>,
+  );
+  return () => {
+    root.unmount();
+  };
+}

package/src/schedule/ScheduleDialog.tsx

@@ -0,0 +1,300 @@
+import {
+  fromWallTime,
+  isRepeatedTime,
+  scheduleDay,
+  scheduleTime,
+  wallTime,
+  zoneName,
+  type CollectionManifest,
+} from '@vespercms/core';
+import { Button, Dialog, TextField, cx } from '@vespercms/ui';
+import { useId, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { useStudio } from '../app/context.tsx';
+import { useDrafts } from '../cloud/editor.tsx';
+import { ChoosePageButton } from '../editor/PagePicker.tsx';
+import { inputClass } from '../widgets/basic.tsx';
+import { cloudKeepsTime } from './cloud.ts';
+import { useNow } from './now.ts';
+import { everyText, redirectField, siteZone, type ScheduleTimes } from './times.ts';
+
+/*
+ * Schedule… (spec §6.17; DECISIONS.md, "Where scheduling lives in the
+ * studio"): when an entry goes live and when it comes down, in the site's
+ * time zone, and where visitors go then. One line says how exact the time
+ * is, since the site changes only when it's built.
+ */
+
+export type ScheduleDialogProps = {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  collection: CollectionManifest;
+  initial: ScheduleTimes;
+  /** Already live: only when it comes down can be set (call 8). */
+  live: boolean;
+  /**
+   * `publish`: Schedule… from Publish ▾, which saves or publishes with the
+   * times. `set`: Change schedule… from Details, which only sets them.
+   */
+  purpose: 'publish' | 'set';
+  /** What going live without a time is called here: "Publish now", or "Save now" in local mode. */
+  nowLabel: string;
+  onSubmit: (times: ScheduleTimes) => void;
+  /** Goes live now instead, when the chosen time has passed. */
+  onNow?: () => void;
+};
+
+export function ScheduleDialog(props: ScheduleDialogProps) {
+  return (
+    <Dialog
+      title={props.purpose === 'publish' ? 'Schedule' : 'Change schedule'}
+      isOpen={props.isOpen}
+      onOpenChange={props.onOpenChange}
+    >
+      {(close) => <ScheduleForm {...props} onClose={close} />}
+    </Dialog>
+  );
+}
+
+type Problems = { publishAt?: string; unpublishAt?: string };
+
+function ScheduleForm({
+  collection,
+  initial,
+  live,
+  purpose,
+  nowLabel,
+  onSubmit,
+  onNow,
+  onClose,
+}: ScheduleDialogProps & { onClose: () => void }) {
+  const { manifest, account, cloud } = useStudio();
+  const cloudSchedule = useDrafts().schedule;
+  const { zone, isSite } = siteZone(manifest);
+  const schedule = collection.presentation.schedule;
+  const redirect = redirectField(collection);
+  const [goesLive, setGoesLive] = useState(() =>
+    initial.publishAt ? wallTime(initial.publishAt, zone) : '',
+  );
+  const [comesDown, setComesDown] = useState(() =>
+    initial.unpublishAt ? wallTime(initial.unpublishAt, zone) : '',
+  );
+  const [sendTo, setSendTo] = useState(initial.redirect ?? '');
+  const [problems, setProblems] = useState<Problems>({});
+  const form = useRef<HTMLFormElement>(null);
+  // The first time is what the dialog is for. Before React Aria's dialog
+  // effect, which then finds focus inside and leaves it, as the crop dialog does.
+  useLayoutEffect(() => {
+    form.current?.querySelector<HTMLInputElement>('input[type="datetime-local"]')?.focus();
+  }, []);
+  const ids = { zone: useId(), live: useId(), down: useId(), accuracy: useId() };
+  const now = useNow();
+  const publishAt = !live && goesLive ? fromWallTime(goesLive, zone) : null;
+  const unpublishAt = schedule?.unpublish && comesDown ? fromWallTime(comesDown, zone) : null;
+
+  const submit = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    const found: Problems = {};
+    if (!live && purpose === 'publish' && !publishAt) found.publishAt = 'Choose when it goes live.';
+    else if (publishAt && publishAt.getTime() <= now.getTime())
+      found.publishAt = 'That time has passed.';
+    if (unpublishAt && unpublishAt.getTime() <= now.getTime())
+      found.unpublishAt = 'That time has passed.';
+    else if (unpublishAt && publishAt && unpublishAt.getTime() <= publishAt.getTime())
+      found.unpublishAt = 'It comes down before it goes live. Choose a later time.';
+    setProblems(found);
+    if (found.publishAt || found.unpublishAt) return;
+    onSubmit({
+      ...(live
+        ? initial.publishAt
+          ? { publishAt: initial.publishAt }
+          : {}
+        : publishAt
+          ? { publishAt }
+          : {}),
+      ...(unpublishAt ? { unpublishAt } : {}),
+      ...(unpublishAt && sendTo.trim() ? { redirect: sendTo.trim() } : {}),
+    });
+    onClose();
+  };
+
+  // How exact the first time is: the site changes only when it's built,
+  // unless the cloud rebuilds at the time or publishes held drafts then.
+  const first = publishAt ?? unpublishAt;
+  const verb = publishAt ? 'Goes live' : 'Comes down';
+  const rebuild = manifest.site.rebuildEvery;
+  const accuracy = first
+    ? cloudKeepsTime(cloudSchedule, publishAt ? 'publish' : 'unpublish')
+      ? `${verb} at ${scheduleTime(first, zone, now)}.`
+      : rebuild
+        ? `${verb} at the first rebuild after ${scheduleTime(first, zone, now)}. This site rebuilds ${everyText(rebuild)}.`
+        : `${verb} the next time the site is built after ${scheduleTime(first, zone, now)}.`
+    : null;
+  const name = zoneName(zone, first ?? now);
+  // Who can read it before then: the cloud says when it holds drafts, GitHub when the repository is public.
+  const early = !publishAt
+    ? null
+    : cloudSchedule?.holdScheduledDrafts
+      ? 'Vesper keeps it as a draft until then, and publishes it at that time.'
+      : (cloudSchedule?.publicRepository ?? (!cloud && account?.publicRepository))
+        ? `This site’s repository is public, so anyone can read this there before it goes live.${cloudSchedule ? ' A site admin can have Vesper keep scheduled changes until their time.' : ''}`
+        : null;
+
+  return (
+    <form ref={form} onSubmit={submit} noValidate className="flex flex-col gap-6">
+      <p id={ids.zone} className="m-0 text-small text-content-muted">
+        {isSite
+          ? `Times are in ${name}, the site’s time zone.`
+          : `Times are in your time zone, ${name}.`}
+      </p>
+      {!live && (
+        <TimeField
+          id={ids.live}
+          label={purpose === 'publish' ? 'Goes live' : 'Goes live (optional)'}
+          value={goesLive}
+          onChange={setGoesLive}
+          zone={zone}
+          now={now}
+          describedBy={`${ids.zone} ${ids.accuracy}`}
+          problem={problems.publishAt}
+          action={
+            problems.publishAt === 'That time has passed.' && onNow ? (
+              <Button
+                variant="quiet"
+                onPress={() => {
+                  onNow();
+                  onClose();
+                }}
+              >
+                {`${nowLabel} instead`}
+              </Button>
+            ) : null
+          }
+        />
+      )}
+      {schedule?.unpublish && (
+        <TimeField
+          id={ids.down}
+          label="Comes down (optional)"
+          value={comesDown}
+          onChange={setComesDown}
+          zone={zone}
+          now={now}
+          describedBy={`${ids.zone} ${ids.accuracy}`}
+          problem={problems.unpublishAt}
+        />
+      )}
+      {redirect && schedule?.unpublish && (
+        <div className="flex flex-col gap-2">
+          <TextField
+            label="Then send visitors to (optional)"
+            description="A page on this site, or a full address. Without one, the page’s address is simply gone."
+            value={sendTo}
+            onChange={setSendTo}
+            inputClassName="font-mono"
+          />
+          <ChoosePageButton fieldLabel="Then send visitors to" onPick={setSendTo} />
+        </div>
+      )}
+      {accuracy && (
+        <p id={ids.accuracy} className="m-0 text-small">
+          {accuracy}
+        </p>
+      )}
+      {early && <p className="m-0 text-small">{early}</p>}
+      <div className="flex flex-wrap justify-end gap-3">
+        <Button onPress={onClose}>Cancel</Button>
+        <Button variant="primary" type="submit">
+          {purpose === 'publish' ? 'Schedule' : 'Change schedule'}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+/** A date and time in the site's zone, with what a DST change does to it said beside it. */
+function TimeField({
+  id,
+  label,
+  value,
+  onChange,
+  zone,
+  now,
+  describedBy,
+  problem,
+  action,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  zone: string;
+  now: Date;
+  describedBy: string;
+  problem?: string | undefined;
+  action?: ReactNode;
+}) {
+  const note = value ? dstNote(value, zone, now) : null;
+  const described = [describedBy, note ? `${id}-note` : '', problem ? `${id}-problem` : '']
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <div className="flex flex-col gap-2">
+      <label htmlFor={id} className="text-label font-semibold text-content">
+        {label}
+      </label>
+      <input
+        id={id}
+        type="datetime-local"
+        value={value}
+        onChange={(event) => {
+          onChange(event.target.value);
+        }}
+        aria-describedby={described}
+        aria-invalid={problem ? true : undefined}
+        className={cx(inputClass, 'max-w-64')}
+      />
+      {note && (
+        <p id={`${id}-note`} className="m-0 text-small text-content-muted">
+          {note}
+        </p>
+      )}
+      {problem && (
+        <p
+          id={`${id}-problem`}
+          className="m-0 flex flex-wrap items-center gap-x-3 text-small text-danger"
+        >
+          {problem}
+          {action}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/** "2:30 AM" from a wall time's own text. */
+function clockOf(wall: string): string {
+  const [hours = 0, minutes = 0] = (wall.split('T')[1] ?? '').split(':').map(Number);
+  return `${String(hours % 12 || 12)}:${String(minutes).padStart(2, '0')} ${hours < 12 ? 'AM' : 'PM'}`;
+}
+
+/**
+ * What a daylight-saving change does to a wall time: a skipped one moves
+ * forward ("2:30 AM doesn't happen on Sun, Mar 14; this is 3:30 AM."), and
+ * a repeated one is the first ("1:30 AM happens twice that night; this is
+ * the first, EDT.").
+ */
+export function dstNote(wall: string, zone: string, now: Date): string | null {
+  const instant = fromWallTime(wall, zone);
+  if (!instant) return null;
+  const actual = wallTime(instant, zone);
+  if (actual !== wall.slice(0, 16)) {
+    return `${clockOf(wall)} doesn’t happen on ${scheduleDay(instant, zone, now)}; this is ${clockOf(actual)}.`;
+  }
+  if (isRepeatedTime(instant, zone)) {
+    const short = new Intl.DateTimeFormat('en-US', { timeZone: zone, timeZoneName: 'short' })
+      .formatToParts(instant)
+      .find((part) => part.type === 'timeZoneName')?.value;
+    return `${clockOf(wall)} happens twice that night; this is the first${short ? `, ${short}` : ''}.`;
+  }
+  return null;
+}

package/src/schedule/ScheduleSummary.tsx

@@ -0,0 +1,59 @@
+import { scheduleTime, type CollectionManifest, type DataObject } from '@vespercms/core';
+import { Button } from '@vespercms/ui';
+import { useId } from 'react';
+import { useEditor } from '../editor/context.tsx';
+import { fieldId, pathKey } from '../editor/values.ts';
+import { useNow } from './now.ts';
+import { scheduleKeys, timesOf } from './times.ts';
+
+/**
+ * The schedule in Details (spec §6.17), in place of its raw fields: "Goes
+ * live Sat, Oct 31, 8:00 AM · Comes down Sun, Nov 8, 12:00 AM", in the site's
+ * zone, and Change schedule… to set the times in the Schedule dialog.
+ */
+export function ScheduleSummary({
+  collection,
+  values,
+  zone,
+  onChange,
+}: {
+  collection: CollectionManifest;
+  values: DataObject;
+  zone: string;
+  onChange: () => void;
+}) {
+  const editor = useEditor();
+  const id = useId();
+  const schedule = collection.presentation.schedule;
+  const times = timesOf(collection, values);
+  const now = useNow();
+  const later = (date: Date) => date.getTime() > now.getTime();
+  const parts = [
+    times.publishAt
+      ? `${later(times.publishAt) ? 'Goes live' : 'Went live'} ${scheduleTime(times.publishAt, zone, now)}`
+      : '',
+    times.unpublishAt
+      ? `${later(times.unpublishAt) ? 'Comes down' : 'Came down'} ${scheduleTime(times.unpublishAt, zone, now)}`
+      : '',
+    times.unpublishAt && times.redirect ? `then visitors go to ${times.redirect}` : '',
+  ].filter(Boolean);
+  // A refused save's problems with the times show here, where the times are.
+  const problems = scheduleKeys(collection).flatMap(
+    (key) => editor.issues.get(pathKey([key])) ?? [],
+  );
+  return (
+    <div role="group" aria-labelledby={id} className="flex flex-col items-start gap-2">
+      <p id={id} className="m-0 text-label font-semibold text-content">
+        Schedule
+      </p>
+      <p className="m-0">{parts.length > 0 ? parts.join(' · ') : 'Not scheduled.'}</p>
+      {problems.length > 0 && <p className="m-0 text-small text-danger">{problems.join(' ')}</p>}
+      {!editor.disabled && schedule && (
+        // Its id is the time field's, so the error summary's links land here.
+        <Button id={fieldId([schedule.publishAt])} onPress={onChange}>
+          Change schedule…
+        </Button>
+      )}
+    </div>
+  );
+}