@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/pagePreview.tsx

@@ -1,204 +1,204 @@
-// "Forhåndsvis" (FormFrame.tsx): a page or a blog post as it looks on the site with what is in its form
-// now, at once and without saving, in a sheet, as wide as a phone or a computer.
-//
-// The page as it is on the site gives everything around what the form changes: the header, the footer,
-// the layout and the site's CSS. The site's layouts mark what the form changes (data-editor): the
-// heading, the picture at the top (a blog post's), the text, and the place at the end of the page where the layout
-// puts a block that ends the text (data-editor="end", with its type in data-editor-block). Only what
-// was changed is put in, so the rest is exactly as on the site. The text is the site's Markdown
-// (Astro's pipeline, with the HTML written in it), and its blocks are drawn as in the editor
-// (registry.tsx preview), with the site's classes.
-//
-// The page is shown in a frame without scripts (sandbox), so nothing of the site runs on the editor's
-// address, where its login is kept, and its links lead nowhere. A new page or post is shown in the
-// page of another one. As on the site but for this: a changed text has the pictures themselves (not
-// the sizes the build makes), its words are not yet links to other pages (packages/editor/site/autolinks.mjs), and
-// a video written in it as HTML is the video.
-import { useRef, useState, type ReactNode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { flushSync } from 'react-dom';
-import { DeviceMobile, Desktop } from '@phosphor-icons/react';
-import { parseBlock, splitBlocks } from '../lib/blocks.mjs';
-import { processor } from '../lib/markdown';
-import { splitPicture } from '../lib/crop.mjs';
-import { preview as drawBlock, siteBlocks } from './registry';
-import { shownAt } from './images';
-import { pageH1 } from './sections.mjs';
-import type { BlockData } from './blocks';
-import { PageFrame, BottomSheet, SegmentedButton, SheetTitle } from './ui';
-import { t } from './i18n';
-
-/** What a form puts in the page: undefined leaves it as it is on the site. */
-export type PageDraft = {
-  /** The page on the site to show it in (its address); for a new one, others like it, the first
-   * that can be. */
-  shell: string | string[];
-  heading?: string;
-  /** The heading as HTML with its colours, when a word in it has one (pageH1 in sections.mjs). */
-  headingHtml?: string;
-  /** The picture at the top (a blog post's); null: none. */
-  image?: { src: string; alt: string } | null;
-  /** The text, in Markdown with its blocks. */
-  body?: string;
-  /** What the blocks are drawn with. */
-  data: BlockData;
-};
-
-// The text as the site makes it (Astro's Markdown, ../lib/markdown.ts), with the site's plugins (packages/editor/astro.mjs)
-// but those that read the site's files.
-const markdownHtml = async (markdown: string) => String(await processor.process(markdown));
-
-// A block drawn as in the editor, as HTML.
-function blockHtml(type: string, props: Record<string, unknown>, data: BlockData) {
-  const drawn: ReactNode = drawBlock(type, props, data);
-  if (!drawn) return '';
-  const box = document.createElement('div');
-  const root = createRoot(box);
-  flushSync(() => root.render(drawn));
-  const html = box.innerHTML;
-  root.unmount();
-  return html;
-}
-
-// A picture made ready in this visit, which the site does not have yet (images.ts shownAt), in the
-// page itself.
-async function inline(src: string) {
-  const here = shownAt(src);
-  if (here === src) return src;
-  const blob = await (await fetch(here)).blob();
-  return new Promise<string>((done) => {
-    const reader = new FileReader();
-    reader.onload = () => done(String(reader.result));
-    reader.readAsDataURL(blob);
-  });
-}
-
-// The page on the site, as a document. From the editor's own address too (EDITOR_HOST), which serves
-// it with this header (packages/editor/worker/editor-host.js).
-async function sitePage(address: string) {
-  const res = await fetch(address, { headers: { 'x-editor-preview': '1' } });
-  if (!res.ok) throw new Error(t.preview.pageNotLoaded(res.status));
-  return new DOMParser().parseFromString(await res.text(), 'text/html');
-}
-
-/** The page with the draft in it, as HTML for a frame (PageFrame). */
-export async function pageDocument(draft: PageDraft): Promise<string> {
-  let doc: Document | null = null;
-  let shell = '';
-  for (const address of [draft.shell].flat()) {
-    const page = await sitePage(address);
-    if (page.querySelector('[data-editor="text"]')) {
-      doc = page;
-      shell = address;
-      break;
-    }
-  }
-  if (!doc) throw new Error(t.preview.notHere);
-  doc.querySelectorAll('script').forEach((s) => s.remove());
-  // Its own addresses as on the site; a link opens nothing (target, and no popups in the frame).
-  const base = doc.createElement('base');
-  base.href = new URL(shell, location.href).href;
-  base.target = '_blank';
-  doc.head.prepend(base);
-
-  const heading = doc.querySelector('[data-editor="heading"]');
-  if (heading && draft.headingHtml) heading.innerHTML = draft.headingHtml;
-  else if (heading && draft.heading !== undefined) heading.textContent = draft.heading;
-
-  const top = doc.querySelector('[data-editor="image"]');
-  if (top && draft.image !== undefined) {
-    const { src } = splitPicture(draft.image?.src ?? '');
-    // The layout leaves out a picture that is also in the text (heroImage in packages/editor/site/images.mjs).
-    if (!src || (draft.body ?? '').includes(src)) top.remove();
-    else {
-      top.querySelectorAll('source').forEach((s) => s.remove());
-      const img = top.querySelector('img');
-      if (img) {
-        for (const a of ['srcset', 'sizes', 'width', 'height']) img.removeAttribute(a);
-        img.src = src;
-        img.alt = draft.image!.alt;
-      }
-    }
-  }
-
-  if (draft.body !== undefined) {
-    // A page's H1 at the top of its text is drawn in its own place above (draft.heading), as on the site.
-    let html = await markdownHtml(pageH1(draft.body).rest);
-    // A block that ends the text, where the layout puts it.
-    const end = doc.querySelector('[data-editor="end"]');
-    const type = end?.getAttribute('data-editor-block');
-    const last = type ? html.match(new RegExp(`<div data-block="${type}"(?: data-props="[^"]*")?\\s*></div>\\s*$`)) : null;
-    const block = last && parseBlock(last[0]);
-    if (end && block && !block.props.hidden) {
-      html = html.slice(0, last!.index);
-      end.innerHTML = blockHtml(block.type, block.props, draft.data);
-    } else end?.remove();
-    const text = doc.querySelector('[data-editor="text"]')!;
-    text.innerHTML = splitBlocks(
-      html,
-      siteBlocks.map((b) => b.type),
-    )
-      .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))
-      .join('');
-  }
-
-  await Promise.all(
-    [...doc.querySelectorAll('img')].map(async (img) => img.setAttribute('src', await inline(img.getAttribute('src') ?? ''))),
-  );
-  return `<!doctype html>\n${doc.documentElement.outerHTML}`;
-}
-
-type Device = 'phone' | 'computer';
-const WIDTH: Record<Device, number> = { phone: 390, computer: 1280 };
-
-/** The sheet with the preview, and how to open it with a draft (made when it opens). */
-export function usePagePreview(): [(draft: () => PageDraft | null) => void, ReactNode] {
-  const dialog = useRef<HTMLDialogElement>(null);
-  const [html, setHtml] = useState<string | null>(null);
-  const [problem, setProblem] = useState('');
-  const [device, setDevice] = useState<Device>(() => (matchMedia('(min-width: 48rem)').matches ? 'computer' : 'phone'));
-  const run = useRef(0);
-
-  function open(make: () => PageDraft | null) {
-    const draft = make();
-    if (!draft) return;
-    const n = ++run.current;
-    setHtml(null);
-    setProblem('');
-    dialog.current?.showModal();
-    pageDocument(draft).then(
-      (page) => n === run.current && setHtml(page),
-      (e) => n === run.current && setProblem(t.preview.failed((e as Error).message)),
-    );
-  }
-
-  const close = () => dialog.current?.close();
-  const sheet = (
-    <BottomSheet
-      full
-      ref={dialog}
-      aria-label={t.preview.title}
-      onClick={(e) => e.target === dialog.current && close()}
-      onClose={() => run.current++}
-    >
-      <SheetTitle title={t.preview.title} onClose={close} />
-      <div className="px-5 pb-3">
-        <SegmentedButton
-          label={t.preview.device}
-          value={device}
-          options={[
-            { value: 'phone', label: t.preview.phone, icon: DeviceMobile },
-            { value: 'computer', label: t.preview.computer, icon: Desktop },
-          ]}
-          onChange={setDevice}
-        />
-      </div>
-      {html ? (
-        <PageFrame html={html} width={WIDTH[device]} title={t.preview.title} />
-      ) : (
-        <p className="px-5 text-muted">{problem || t.preview.making}</p>
-      )}
-    </BottomSheet>
-  );
-  return [open, sheet];
-}
+// "Forhåndsvis" (FormFrame.tsx): a page or a blog post as it looks on the site with what is in its form
+// now, at once and without saving, in a sheet, as wide as a phone or a computer.
+//
+// The page as it is on the site gives everything around what the form changes: the header, the footer,
+// the layout and the site's CSS. The site's layouts mark what the form changes (data-editor): the
+// heading, the picture at the top (a blog post's), the text, and the place at the end of the page where the layout
+// puts a block that ends the text (data-editor="end", with its type in data-editor-block). Only what
+// was changed is put in, so the rest is exactly as on the site. The text is the site's Markdown
+// (Astro's pipeline, with the HTML written in it), and its blocks are drawn as in the editor
+// (registry.tsx preview), with the site's classes.
+//
+// The page is shown in a frame without scripts (sandbox), so nothing of the site runs on the editor's
+// address, where its login is kept, and its links lead nowhere. A new page or post is shown in the
+// page of another one. As on the site but for this: a changed text has the pictures themselves (not
+// the sizes the build makes), its words are not yet links to other pages (packages/editor/site/autolinks.mjs), and
+// a video written in it as HTML is the video.
+import { useRef, useState, type ReactNode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import { DeviceMobile, Desktop } from '@phosphor-icons/react';
+import { parseBlock, splitBlocks } from '../lib/blocks.mjs';
+import { processor } from '../lib/markdown';
+import { splitPicture } from '../lib/crop.mjs';
+import { preview as drawBlock, siteBlocks } from './registry';
+import { shownAt } from './images';
+import { pageH1 } from './sections.mjs';
+import type { BlockData } from './blocks';
+import { PageFrame, BottomSheet, SegmentedButton, SheetTitle } from './ui';
+import { t } from './i18n';
+
+/** What a form puts in the page: undefined leaves it as it is on the site. */
+export type PageDraft = {
+  /** The page on the site to show it in (its address); for a new one, others like it, the first
+   * that can be. */
+  shell: string | string[];
+  heading?: string;
+  /** The heading as HTML with its colours, when a word in it has one (pageH1 in sections.mjs). */
+  headingHtml?: string;
+  /** The picture at the top (a blog post's); null: none. */
+  image?: { src: string; alt: string } | null;
+  /** The text, in Markdown with its blocks. */
+  body?: string;
+  /** What the blocks are drawn with. */
+  data: BlockData;
+};
+
+// The text as the site makes it (Astro's Markdown, ../lib/markdown.ts), with the site's plugins (packages/editor/astro.mjs)
+// but those that read the site's files.
+const markdownHtml = async (markdown: string) => String(await processor.process(markdown));
+
+// A block drawn as in the editor, as HTML.
+function blockHtml(type: string, props: Record<string, unknown>, data: BlockData) {
+  const drawn: ReactNode = drawBlock(type, props, data);
+  if (!drawn) return '';
+  const box = document.createElement('div');
+  const root = createRoot(box);
+  flushSync(() => root.render(drawn));
+  const html = box.innerHTML;
+  root.unmount();
+  return html;
+}
+
+// A picture made ready in this visit, which the site does not have yet (images.ts shownAt), in the
+// page itself.
+async function inline(src: string) {
+  const here = shownAt(src);
+  if (here === src) return src;
+  const blob = await (await fetch(here)).blob();
+  return new Promise<string>((done) => {
+    const reader = new FileReader();
+    reader.onload = () => done(String(reader.result));
+    reader.readAsDataURL(blob);
+  });
+}
+
+// The page on the site, as a document. From the editor's own address too (EDITOR_HOST), which serves
+// it with this header (packages/editor/worker/editor-host.js).
+async function sitePage(address: string) {
+  const res = await fetch(address, { headers: { 'x-editor-preview': '1' } });
+  if (!res.ok) throw new Error(t.preview.pageNotLoaded(res.status));
+  return new DOMParser().parseFromString(await res.text(), 'text/html');
+}
+
+/** The page with the draft in it, as HTML for a frame (PageFrame). */
+export async function pageDocument(draft: PageDraft): Promise<string> {
+  let doc: Document | null = null;
+  let shell = '';
+  for (const address of [draft.shell].flat()) {
+    const page = await sitePage(address);
+    if (page.querySelector('[data-editor="text"]')) {
+      doc = page;
+      shell = address;
+      break;
+    }
+  }
+  if (!doc) throw new Error(t.preview.notHere);
+  doc.querySelectorAll('script').forEach((s) => s.remove());
+  // Its own addresses as on the site; a link opens nothing (target, and no popups in the frame).
+  const base = doc.createElement('base');
+  base.href = new URL(shell, location.href).href;
+  base.target = '_blank';
+  doc.head.prepend(base);
+
+  const heading = doc.querySelector('[data-editor="heading"]');
+  if (heading && draft.headingHtml) heading.innerHTML = draft.headingHtml;
+  else if (heading && draft.heading !== undefined) heading.textContent = draft.heading;
+
+  const top = doc.querySelector('[data-editor="image"]');
+  if (top && draft.image !== undefined) {
+    const { src } = splitPicture(draft.image?.src ?? '');
+    // The layout leaves out a picture that is also in the text (heroImage in packages/editor/site/images.mjs).
+    if (!src || (draft.body ?? '').includes(src)) top.remove();
+    else {
+      top.querySelectorAll('source').forEach((s) => s.remove());
+      const img = top.querySelector('img');
+      if (img) {
+        for (const a of ['srcset', 'sizes', 'width', 'height']) img.removeAttribute(a);
+        img.src = src;
+        img.alt = draft.image!.alt;
+      }
+    }
+  }
+
+  if (draft.body !== undefined) {
+    // A page's H1 at the top of its text is drawn in its own place above (draft.heading), as on the site.
+    let html = await markdownHtml(pageH1(draft.body).rest);
+    // A block that ends the text, where the layout puts it.
+    const end = doc.querySelector('[data-editor="end"]');
+    const type = end?.getAttribute('data-editor-block');
+    const last = type ? html.match(new RegExp(`<div data-block="${type}"(?: data-props="[^"]*")?\\s*></div>\\s*$`)) : null;
+    const block = last && parseBlock(last[0]);
+    if (end && block && !block.props.hidden) {
+      html = html.slice(0, last!.index);
+      end.innerHTML = blockHtml(block.type, block.props, draft.data);
+    } else end?.remove();
+    const text = doc.querySelector('[data-editor="text"]')!;
+    text.innerHTML = splitBlocks(
+      html,
+      siteBlocks.map((b) => b.type),
+    )
+      .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))
+      .join('');
+  }
+
+  await Promise.all(
+    [...doc.querySelectorAll('img')].map(async (img) => img.setAttribute('src', await inline(img.getAttribute('src') ?? ''))),
+  );
+  return `<!doctype html>\n${doc.documentElement.outerHTML}`;
+}
+
+type Device = 'phone' | 'computer';
+const WIDTH: Record<Device, number> = { phone: 390, computer: 1280 };
+
+/** The sheet with the preview, and how to open it with a draft (made when it opens). */
+export function usePagePreview(): [(draft: () => PageDraft | null) => void, ReactNode] {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [html, setHtml] = useState<string | null>(null);
+  const [problem, setProblem] = useState('');
+  const [device, setDevice] = useState<Device>(() => (matchMedia('(min-width: 48rem)').matches ? 'computer' : 'phone'));
+  const run = useRef(0);
+
+  function open(make: () => PageDraft | null) {
+    const draft = make();
+    if (!draft) return;
+    const n = ++run.current;
+    setHtml(null);
+    setProblem('');
+    dialog.current?.showModal();
+    pageDocument(draft).then(
+      (page) => n === run.current && setHtml(page),
+      (e) => n === run.current && setProblem(t.preview.failed((e as Error).message)),
+    );
+  }
+
+  const close = () => dialog.current?.close();
+  const sheet = (
+    <BottomSheet
+      full
+      ref={dialog}
+      aria-label={t.preview.title}
+      onClick={(e) => e.target === dialog.current && close()}
+      onClose={() => run.current++}
+    >
+      <SheetTitle title={t.preview.title} onClose={close} />
+      <div className="px-5 pb-3">
+        <SegmentedButton
+          label={t.preview.device}
+          value={device}
+          options={[
+            { value: 'phone', label: t.preview.phone, icon: DeviceMobile },
+            { value: 'computer', label: t.preview.computer, icon: Desktop },
+          ]}
+          onChange={setDevice}
+        />
+      </div>
+      {html ? (
+        <PageFrame html={html} width={WIDTH[device]} title={t.preview.title} />
+      ) : (
+        <p className="px-5 text-muted">{problem || t.preview.making}</p>
+      )}
+    </BottomSheet>
+  );
+  return [open, sheet];
+}

package/src/r2Caching.ts

@@ -1,55 +1,55 @@
-// R2 caching: the Worker's copy of the site's files in R2 (packages/editor/worker/files.js), turned on and off under "Indstillinger" ›
-// "Avanceret" (Advanced.tsx). It is the line of its bucket (`"r2_buckets": …`, the binding FILES) in the Worker's settings
-// (config.wrangler): there when it is on, there as a comment ("// …") when it is off, so a deploy never asks for a bucket
-// Cloudflare does not have. Changed as text, so the file's comments stay. It can only be turned on when the Worker says
-// Cloudflare has the bucket (/api/r2, packages/editor/worker/r2-status.js). Where the bucket is kept ("Placering"): placed by Cloudflare,
-// or within a jurisdiction (`"jurisdiction": "eu"` in the line), where it is asked for: Cloudflare has no bucket of that
-// name outside it. It can only be changed while R2 caching is off, since it names another bucket.
-
-const LINE = /^([ \t]*)(\/\/[ \t]*)?("r2_buckets"[ \t]*:.*)$/m;
-
-/** Whether R2 caching is on in the Worker's settings; null when they have no line for it. */
-export function r2CachingOn(text: string): boolean | null {
-  const line = LINE.exec(text);
-  return line ? !line[2] : null;
-}
-
-/** The Worker's settings with R2 caching on or off. */
-export const withR2Caching = (text: string, on: boolean): string =>
-  text.replace(LINE, (_, indent: string, _comment: string | undefined, line: string) => `${indent}${on ? '' : '// '}${line}`);
-
-/** The name of the bucket in the line, or null. */
-export const bucketOf = (text: string): string | null => /"bucket_name"\s*:\s*"([^"]+)"/.exec(LINE.exec(text)?.[3] ?? '')?.[1] ?? null;
-
-/** The jurisdiction the bucket is kept within (`eu`, `fedramp`), or null when the line names none. */
-export const jurisdictionOf = (text: string): string | null =>
-  /"jurisdiction"\s*:\s*"([^"]+)"/.exec(LINE.exec(text)?.[3] ?? '')?.[1] ?? null;
-
-/** The jurisdictions the bucket can be kept within, in the editor (Cloudflare also has `fedramp`, for the US government). */
-export const JURISDICTIONS = ['eu'] as const;
-
-/** The Worker's settings with the bucket kept within `jurisdiction`, or placed by Cloudflare (null). */
-export const withJurisdiction = (text: string, jurisdiction: string | null): string =>
-  text.replace(LINE, (_, indent: string, comment: string | undefined, line: string) => {
-    const without = line.replace(/,\s*"jurisdiction"\s*:\s*"[^"]*"/, '');
-    const changed = jurisdiction ? without.replace(/("bucket_name"\s*:\s*"[^"]+")/, `$1, "jurisdiction": "${jurisdiction}"`) : without;
-    return `${indent}${comment ?? ''}${changed}`;
-  });
-
-/** A jurisdiction's name, as Cloudflare writes it. */
-export const jurisdictionName = (jurisdiction: string): string => ({ eu: 'EU', fedramp: 'FedRAMP' })[jurisdiction] ?? jurisdiction;
-
-/** The bucket at Cloudflare, as the Worker says (packages/editor/worker/r2-status.js). */
-export type BucketState = 'ready' | 'no-bucket' | 'no-r2' | 'no-key' | 'refused' | 'failed';
-
-/** Whether the Worker has the bucket now (the site is built with R2 caching on), and the bucket at Cloudflare. */
-export async function r2Status(bucket: string, jurisdiction: string | null): Promise<{ bound: boolean; bucket: BucketState }> {
-  const query = new URLSearchParams({ bucket, ...(jurisdiction ? { jurisdiction } : {}) });
-  try {
-    const res = await fetch(`/api/r2?${query}`, { cache: 'no-store' });
-    if (!res.ok || !res.headers.get('content-type')?.includes('application/json')) return { bound: false, bucket: 'failed' };
-    return await res.json();
-  } catch {
-    return { bound: false, bucket: 'failed' };
-  }
-}
+// R2 caching: the Worker's copy of the site's files in R2 (packages/editor/worker/files.js), turned on and off under "Indstillinger" ›
+// "Avanceret" (Advanced.tsx). It is the line of its bucket (`"r2_buckets": …`, the binding FILES) in the Worker's settings
+// (config.wrangler): there when it is on, there as a comment ("// …") when it is off, so a deploy never asks for a bucket
+// Cloudflare does not have. Changed as text, so the file's comments stay. It can only be turned on when the Worker says
+// Cloudflare has the bucket (/api/r2, packages/editor/worker/r2-status.js). Where the bucket is kept ("Placering"): placed by Cloudflare,
+// or within a jurisdiction (`"jurisdiction": "eu"` in the line), where it is asked for: Cloudflare has no bucket of that
+// name outside it. It can only be changed while R2 caching is off, since it names another bucket.
+
+const LINE = /^([ \t]*)(\/\/[ \t]*)?("r2_buckets"[ \t]*:.*)$/m;
+
+/** Whether R2 caching is on in the Worker's settings; null when they have no line for it. */
+export function r2CachingOn(text: string): boolean | null {
+  const line = LINE.exec(text);
+  return line ? !line[2] : null;
+}
+
+/** The Worker's settings with R2 caching on or off. */
+export const withR2Caching = (text: string, on: boolean): string =>
+  text.replace(LINE, (_, indent: string, _comment: string | undefined, line: string) => `${indent}${on ? '' : '// '}${line}`);
+
+/** The name of the bucket in the line, or null. */
+export const bucketOf = (text: string): string | null => /"bucket_name"\s*:\s*"([^"]+)"/.exec(LINE.exec(text)?.[3] ?? '')?.[1] ?? null;
+
+/** The jurisdiction the bucket is kept within (`eu`, `fedramp`), or null when the line names none. */
+export const jurisdictionOf = (text: string): string | null =>
+  /"jurisdiction"\s*:\s*"([^"]+)"/.exec(LINE.exec(text)?.[3] ?? '')?.[1] ?? null;
+
+/** The jurisdictions the bucket can be kept within, in the editor (Cloudflare also has `fedramp`, for the US government). */
+export const JURISDICTIONS = ['eu'] as const;
+
+/** The Worker's settings with the bucket kept within `jurisdiction`, or placed by Cloudflare (null). */
+export const withJurisdiction = (text: string, jurisdiction: string | null): string =>
+  text.replace(LINE, (_, indent: string, comment: string | undefined, line: string) => {
+    const without = line.replace(/,\s*"jurisdiction"\s*:\s*"[^"]*"/, '');
+    const changed = jurisdiction ? without.replace(/("bucket_name"\s*:\s*"[^"]+")/, `$1, "jurisdiction": "${jurisdiction}"`) : without;
+    return `${indent}${comment ?? ''}${changed}`;
+  });
+
+/** A jurisdiction's name, as Cloudflare writes it. */
+export const jurisdictionName = (jurisdiction: string): string => ({ eu: 'EU', fedramp: 'FedRAMP' })[jurisdiction] ?? jurisdiction;
+
+/** The bucket at Cloudflare, as the Worker says (packages/editor/worker/r2-status.js). */
+export type BucketState = 'ready' | 'no-bucket' | 'no-r2' | 'no-key' | 'refused' | 'failed';
+
+/** Whether the Worker has the bucket now (the site is built with R2 caching on), and the bucket at Cloudflare. */
+export async function r2Status(bucket: string, jurisdiction: string | null): Promise<{ bound: boolean; bucket: BucketState }> {
+  const query = new URLSearchParams({ bucket, ...(jurisdiction ? { jurisdiction } : {}) });
+  try {
+    const res = await fetch(`/api/r2?${query}`, { cache: 'no-store' });
+    if (!res.ok || !res.headers.get('content-type')?.includes('application/json')) return { bound: false, bucket: 'failed' };
+    return await res.json();
+  } catch {
+    return { bound: false, bucket: 'failed' };
+  }
+}