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

package/src/app/Screen.tsx

@@ -0,0 +1,416 @@
+import {
+  cx,
+  Icon,
+  IconButton,
+  Menu,
+  Tooltip,
+  VesperMark,
+  type IconName,
+  type IconNode,
+} from '@vespercms/ui';
+import {
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  type UIEvent,
+} from 'react';
+import { shownTo } from '../cloud/access.ts';
+import { ChangesButton } from '../cloud/changes.tsx';
+import { useStudio, VESPER_NAME } from './context.tsx';
+import { NavigationContext } from './navigation.ts';
+import { collectionIcon } from './collection-icon.ts';
+import { hrefFor, navigate, parseRoute } from './router.ts';
+import { usePane } from './pane-context.ts';
+import { UserMenu } from './UserMenu.tsx';
+
+export type ScreenProps = {
+  /** The screen's one `h1`, and the start of the page title. */
+  title: string;
+  /** Visually hide the `h1` when the screen shows its title another way (the editor's title field). */
+  hideTitle?: boolean;
+  /** Replaces the top bar's middle and right side (the editor's bar, spec §10.3). */
+  bar?: ReactNode;
+  /** The accent's wash at the top of a welcoming screen: home and empty states, never a form. */
+  afterglow?: boolean;
+  /** Line the heading up with the editor's 720px column. */
+  column?: boolean;
+  /** An icon before the heading: a collection's. */
+  icon?: { node: IconNode } | { name: IconName };
+  children: ReactNode;
+};
+
+/**
+ * Every screen's frame: the skip link, the top bar, and `<main>` with one
+ * `h1` (spec §10.6). After an in-app navigation, focus moves to the new
+ * screen's heading, so keyboard and screen-reader users land on the content
+ * they asked for instead of at the top of the page.
+ *
+ * Inside the pane shell (app/panes.tsx) a screen is the deepest pane
+ * instead: its heading and bar head the pane, and it scrolls on its own,
+ * beneath them.
+ */
+export function Screen({
+  title,
+  hideTitle = false,
+  bar,
+  afterglow = false,
+  column = false,
+  icon,
+  children,
+}: ScreenProps) {
+  const pane = usePane();
+  const heading = useRef<HTMLHeadingElement>(null);
+  useLeadHeading(title, heading);
+  const [header, headerHeight] = useMeasure('height', 56);
+
+  if (pane) {
+    return (
+      <PaneFrame
+        title={title}
+        headingRef={heading}
+        hideTitle={hideTitle}
+        icon={icon}
+        actions={bar}
+        className={cx(afterglow && 'afterglow')}
+      >
+        <div className={pane.width === 'flex' ? 'px-6 pt-8 pb-16' : 'px-3 pt-3 pb-6'}>
+          {children}
+        </div>
+      </PaneFrame>
+    );
+  }
+
+  return (
+    <div
+      className={cx('min-h-screen', afterglow && 'afterglow')}
+      // What sticks inside the screen (the formatting toolbar) sticks below the top bar.
+      style={{ '--sticky-top': `${String(headerHeight)}px` } as CSSProperties}
+    >
+      {/* The editor's bar has its own way back, so on a narrow screen it needs the room. */}
+      <StudioHeader bar={bar ?? <DefaultBar />} headerRef={header} homeLink={bar === undefined} />
+      <main
+        id="main"
+        tabIndex={-1}
+        className={cx('mx-auto max-w-6xl px-4 pb-16 outline-none', hideTitle ? 'pt-8' : 'pt-12')}
+      >
+        <h1
+          ref={heading}
+          tabIndex={-1}
+          className={
+            hideTitle
+              ? 'sr-only'
+              : cx(
+                  'mb-8 text-heading-1 text-content outline-none',
+                  icon && 'flex items-center gap-3',
+                  column && 'mx-auto max-w-editor',
+                )
+          }
+        >
+          {icon && !hideTitle && <Icon {...icon} size={24} className="text-content-muted" />}
+          {title}
+        </h1>
+        {children}
+      </main>
+    </div>
+  );
+}
+
+/**
+ * The pane, or the screen, that leads names the browser tab, and takes focus
+ * after an in-app navigation (spec §10.6). Among panes that's the deepest.
+ */
+export function useLeadHeading(title: string, heading: RefObject<HTMLElement | null>): void {
+  const { siteName } = useStudio();
+  const navigation = useContext(NavigationContext);
+  const pane = usePane();
+  const leads = !pane || pane.focusTarget;
+
+  useEffect(() => {
+    if (leads) document.title = `${title} · ${siteName}`;
+  }, [title, siteName, leads]);
+
+  useEffect(() => {
+    if (leads && navigation.count > 0) heading.current?.focus({ preventScroll: false });
+  }, [navigation.count, leads, heading]);
+}
+
+/**
+ * An element's width or height in pixels, kept current as it wraps or the
+ * window changes: give it the returned ref. A callback ref, never a ref
+ * object, because what's measured may be replaced or come and go: the top
+ * bar among panes leaves as the window narrows and comes back new as it
+ * widens, and a ref object went on measuring the bar that left, at 0, so
+ * every pane's header sat beneath the new one. The editor's bar moves from
+ * the top bar into a pane's header the same way.
+ */
+export function useMeasure(
+  side: 'width' | 'height',
+  fallback: number,
+): [(element: HTMLElement | null) => void, number] {
+  const [element, setElement] = useState<HTMLElement | null>(null);
+  const [size, setSize] = useState(fallback);
+  useLayoutEffect(() => {
+    if (!element || typeof ResizeObserver === 'undefined') return;
+    const measure = () => {
+      // A detached element measures 0 on its way out.
+      if (!element.isConnected) return;
+      setSize(side === 'width' ? element.offsetWidth : element.offsetHeight);
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    measure();
+    return () => {
+      observer.disconnect();
+    };
+  }, [element, side]);
+  return [setElement, size];
+}
+
+/**
+ * A pane's frame: a landmark named by its heading, a header with the heading,
+ * the pane's actions and its collapse button (and the list's tools, as
+ * `toolbar`), then the pane's body. The deepest pane is the page's `main`,
+ * with its `h1`; the others are navigation, or a region, with `h2`s. The
+ * element stays the same as a pane's role changes, so what's in it isn't
+ * drawn afresh when an entry opens beside it.
+ *
+ * The frame is the pane's scroller, and it starts at the window's top: its
+ * body scrolls beneath its own header and the top bar, which are glass, so
+ * the content stays present beneath what floats (DECISIONS.md, "Panes scroll
+ * beneath glass"). Its scroll padding keeps a focused control clear of both.
+ */
+export function PaneFrame({
+  title,
+  headingRef,
+  hideTitle = false,
+  icon,
+  actions,
+  toolbar,
+  scrollRef,
+  onScroll,
+  className,
+  children,
+}: {
+  title: string;
+  headingRef: RefObject<HTMLHeadingElement | null>;
+  hideTitle?: boolean;
+  icon?: { node: IconNode } | { name: IconName } | undefined;
+  actions?: ReactNode;
+  /** Below the heading, in the header that stays put: the list's search, Sort and Show. */
+  toolbar?: ReactNode;
+  scrollRef?: RefObject<HTMLDivElement | null>;
+  onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+  className?: string | false | undefined;
+  children: ReactNode;
+}) {
+  const pane = usePane();
+  const id = useId();
+  const landmark = pane?.landmark ?? 'main';
+  const main = landmark === 'main';
+  const Heading = pane?.level === 2 ? 'h2' : 'h1';
+  const [header, headerHeight] = useMeasure('height', 56);
+  return (
+    <div
+      ref={scrollRef}
+      role={main ? 'main' : landmark === 'nav' ? 'navigation' : 'region'}
+      aria-labelledby={id}
+      {...(main ? { id: 'main', tabIndex: -1 } : {})}
+      onScroll={onScroll}
+      className={cx('min-h-0 flex-1 overflow-y-auto outline-none', className)}
+      style={
+        {
+          paddingTop: 'var(--studio-bar, 0px)',
+          scrollPaddingTop: `calc(var(--studio-bar, 0px) + ${String(headerHeight)}px)`,
+          // What sticks inside the pane (the formatting toolbar) sticks below its header.
+          '--sticky-top': `${String(headerHeight)}px`,
+        } as CSSProperties
+      }
+    >
+      {/* A sticky offset counts from inside the scroller's padding, so top-0 holds it just below the bar. */}
+      <div ref={header} className="glass-bar sticky top-0 z-10 border-b border-border">
+        <div
+          className={cx(
+            'flex min-h-14 flex-wrap items-center gap-x-3 gap-y-2 py-2',
+            pane?.width === 'flex' ? 'px-6' : 'px-4',
+          )}
+        >
+          <Heading
+            id={id}
+            ref={headingRef}
+            tabIndex={-1}
+            className={
+              hideTitle
+                ? 'sr-only'
+                : cx(
+                    'min-w-0 flex-1 truncate outline-none',
+                    pane?.width === 'flex' ? 'text-heading-3' : 'text-label',
+                    'text-content',
+                    icon && 'flex items-center gap-2',
+                  )
+            }
+          >
+            {icon && !hideTitle && <Icon {...icon} size={18} className="text-content-muted" />}
+            {title}
+          </Heading>
+          {actions}
+          {pane?.onCollapse && (
+            <Tooltip text={`Collapse ${title}`}>
+              <IconButton
+                data-collapse=""
+                icon="pane-collapse"
+                label={`Collapse ${title}`}
+                onPress={pane.onCollapse}
+                className="-mr-2"
+              />
+            </Tooltip>
+          )}
+        </div>
+        {toolbar}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The skip link and the top bar. One screen at a time, it holds the screen's
+ * bar (the menus, or the editor's own); among panes it spans the full width
+ * and holds what's the person's, since the structure pane holds the site's.
+ */
+export function StudioHeader({
+  bar,
+  headerRef,
+  homeLink = true,
+}: {
+  bar?: ReactNode;
+  headerRef?: Ref<HTMLElement>;
+  /** False drops the site's name, the link home, on a narrow screen (the editor's bar). */
+  homeLink?: boolean;
+}) {
+  const { siteName } = useStudio();
+  const pane = usePane();
+  return (
+    <>
+      <a
+        href="#main"
+        onClick={(event) => {
+          // A plain `#main` link would replace the route in the hash.
+          event.preventDefault();
+          document.getElementById('main')?.focus();
+        }}
+        className="sr-only rounded-md bg-surface-raised px-3 py-2 text-accent shadow-overlay focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50"
+      >
+        Skip to content
+      </a>
+      {/* Sticky and frosted, so the page stays present as it scrolls beneath. */}
+      <header ref={headerRef} className="glass-bar sticky top-0 z-40 shadow-glass-edge">
+        <div
+          className={cx(
+            'flex min-h-14 flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 sm:gap-x-4',
+            bar !== undefined && !pane && 'mx-auto max-w-6xl',
+          )}
+        >
+          {/*
+           * The site's name takes no room of its own in the wrap, then grows into
+           * what's left, so a long one is cut short instead of pushing the
+           * person's menu onto a line of its own. Beside the editor's bar, it's
+           * its own width.
+           */}
+          <div className={cx('min-w-0', homeLink ? 'flex flex-1 basis-0' : 'hidden sm:flex')}>
+            <a
+              href={hrefFor({ screen: 'home' })}
+              className={cx(
+                'inline-flex min-w-0 items-center gap-2 rounded-sm text-heading-3 tracking-tight text-content no-underline',
+                // Only Vesper's own name is lowercase; a site's shows as the site writes it.
+                siteName === VESPER_NAME && 'lowercase',
+                'focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-focus',
+                'focus-visible:ring-6 focus-visible:ring-(color:--glow-focus)',
+              )}
+            >
+              {/*
+               * Decorative: the link is named by the site's name beside it. Left
+               * out on a narrow screen, where the editor's bar needs the room
+               * (DECISIONS.md).
+               */}
+              <VesperMark size={20} className="hidden shrink-0 sm:block" />
+              <span className="truncate">{siteName}</span>
+            </a>
+          </div>
+          {bar ?? (
+            <div className="ml-auto flex items-center gap-2">
+              <ChangesButton />
+              <UserMenu />
+            </div>
+          )}
+        </div>
+      </header>
+    </>
+  );
+}
+
+/**
+ * The top bar on every screen but the editor, one screen at a time: the
+ * person's menu on the site's line, then the Content menu, the Site menu
+ * and the cloud's Changes on a line of their own.
+ */
+function DefaultBar() {
+  const { manifest, siteUrl, cloud } = useStudio();
+  const route = parseRoute(window.location.hash);
+  const here = 'collection' in route ? route.collection : null;
+  const items = manifest.collections
+    .filter((c) => shownTo(cloud, c.name))
+    .map((collection) => {
+      const icon = collectionIcon(collection);
+      return {
+        id: collection.name,
+        label: collection.label,
+        isCurrent: collection.name === here,
+        icon: 'node' in icon ? icon.node : icon.name,
+      };
+    });
+  // Two lines, the person's menu beside the site's name and the site's menus below, flush
+  // with it: one line wrapped as it pleased, the menus pushed right under the name.
+  return (
+    <>
+      <div className="ml-auto flex min-w-0">
+        <UserMenu />
+      </div>
+      {/* Pulled out by a trigger's padding, so "Content" lines up with the site's name. */}
+      <nav aria-label="Studio" className="-ml-3 flex basis-full items-center gap-2">
+        <Menu
+          label="Content"
+          triggerText="Content"
+          items={items}
+          onAction={(name) => {
+            navigate({ screen: 'list', collection: name });
+          }}
+        />
+        <Menu
+          label="Site"
+          triggerText="Site"
+          items={[
+            { id: 'media', label: 'Media', icon: 'media' as const },
+            // Redirects belong to the whole site (spec §7.5): a folder grant doesn't reach them.
+            ...(!cloud || cloud.wholeSite
+              ? [{ id: 'redirects', label: 'Redirects', icon: 'redirects' as const }]
+              : []),
+            ...(siteUrl ? [{ id: 'view', label: 'View site', icon: 'view-on-site' as const }] : []),
+          ]}
+          onAction={(id) => {
+            if (id === 'media') navigate({ screen: 'media' });
+            if (id === 'redirects') navigate({ screen: 'redirects' });
+            if (id === 'view' && siteUrl) window.open(siteUrl, '_blank', 'noopener');
+          }}
+        />
+        <ChangesButton />
+      </nav>
+    </>
+  );
+}

package/src/app/UserMenu.tsx

@@ -0,0 +1,95 @@
+import { Avatar, Button, Menu, type MenuItem } from '@vespercms/ui';
+import { useEffect, useState } from 'react';
+import type { StudioApi } from './api.ts';
+import { APPEARANCES, useAppearance, type Appearance } from './appearance.ts';
+import { useStudio } from './context.tsx';
+
+const localNames = new WeakMap<StudioApi, Promise<string | null>>();
+
+/** Local mode's editor, from git on this computer; asked once per visit. */
+function useLocalName(api: StudioApi | undefined): string | null {
+  const [name, setName] = useState<string | null>(null);
+  useEffect(() => {
+    if (!api?.person) return;
+    let asked = localNames.get(api);
+    if (!asked) {
+      asked = api.person().then(
+        (person) => person.name,
+        () => null,
+      );
+      localNames.set(api, asked);
+    }
+    let live = true;
+    void asked.then((found) => {
+      if (live) setName(found);
+    });
+    return () => {
+      live = false;
+    };
+  }, [api]);
+  return name;
+}
+
+/**
+ * The user menu at the end of the top bar (spec §10.3): who is signed in and
+ * the way out in GitHub mode and the cloud (spec §6.9), and Appearance in
+ * every mode, local mode included, named by git's user there (DECISIONS.md,
+ * "Appearance is in the user menu, and local mode has a user menu").
+ */
+export function UserMenu() {
+  const { account, api } = useStudio();
+  const [appearance, choose] = useAppearance();
+  const localName = useLocalName(account ? undefined : api);
+
+  if (account?.expired) {
+    return (
+      <Button variant="quiet" onPress={account.signInAgain}>
+        Sign in again
+      </Button>
+    );
+  }
+
+  const name = account?.name ?? localName ?? 'You';
+  const items: MenuItem[] = account
+    ? [
+        ...(account.dashboardUrl ? [{ id: 'dashboard', label: 'Open dashboard' }] : []),
+        { id: 'sign-out', label: account.signOutLabel },
+      ]
+    : [];
+
+  return (
+    <Menu
+      label={
+        account ? account.description : localName ? `Appearance, for ${localName}` : 'Appearance'
+      }
+      triggerText={account?.label ?? name}
+      triggerPicture={<Avatar name={name} src={account?.picture} />}
+      header={
+        <div className="flex items-center gap-3">
+          <Avatar name={name} src={account?.picture} size={32} />
+          <div className="min-w-0">
+            <p className="truncate text-label text-content">{name}</p>
+            <p className="truncate text-small text-content-muted">
+              {account ? account.description : 'Editing on this computer'}
+            </p>
+          </div>
+        </div>
+      }
+      choice={{
+        title: 'Appearance',
+        options: [...APPEARANCES],
+        selected: appearance,
+        onChange: (id) => {
+          choose(id as Appearance);
+        },
+      }}
+      items={items}
+      onAction={(id) => {
+        if (id === 'dashboard' && account?.dashboardUrl) {
+          window.open(account.dashboardUrl, '_blank', 'noopener');
+        }
+        if (id === 'sign-out') account?.signOut();
+      }}
+    />
+  );
+}

package/src/app/api.ts

@@ -0,0 +1,176 @@
+import type {
+  CollectionSummary,
+  EntryDocument,
+  EntrySummary,
+  MediaItem,
+  MoveRequest,
+  MoveResult,
+  PageLink,
+  ScheduledChange,
+  PageTree,
+  RedirectsDocument,
+  ReorderEntryRequest,
+  ReorderEntryResult,
+  ReorderRequest,
+  ReorderResult,
+  SaveRedirectsRequest,
+  SaveRedirectsResult,
+  SaveRequest,
+  SaveResponse,
+  UploadResponse,
+} from '@vespercms/core';
+
+/**
+ * Everything the studio needs from a storage back end. Local mode talks to
+ * the dev middleware; GitHub and cloud modes (Phases 3 and 4) implement the
+ * same interface, so screens never know which mode they're in.
+ */
+export interface StudioApi {
+  summary(): Promise<CollectionSummary[]>;
+  listEntries(collection: string): Promise<EntrySummary[]>;
+  readEntry(collection: string, id: string): Promise<EntryDocument>;
+  saveEntry(request: SaveRequest): Promise<SaveResponse>;
+  deleteEntry(collection: string, id: string, version: string): Promise<SaveResponse>;
+  listMedia(): Promise<MediaItem[]>;
+  /**
+   * Stores an upload. `withNextSave`: where saving publishes, the file waits
+   * and goes out with the next save, so an entry and its image are one
+   * commit (spec §6.8). Local mode writes it at once either way.
+   */
+  upload(
+    file: Blob,
+    name: string,
+    folder: string,
+    options?: { withNextSave?: boolean },
+  ): Promise<UploadResponse>;
+  deleteMedia(path: string): Promise<SaveResponse>;
+  /** Site-relative paths of the Markdoc and Markdown files a `{% partial %}` can point at. */
+  listPartials(): Promise<string[]>;
+  /**
+   * A URL the studio can show a file from, given its site-relative path.
+   * Asynchronous: GitHub mode fetches the blob and hands back an object URL.
+   */
+  fileUrl(path: string): Promise<string>;
+  /** Every page with a URL, in every collection, for the link picker (spec §6.15.6). */
+  listPages(): Promise<PageLink[]>;
+  /** Every change still to come in the site's scheduled collections, soonest first (spec §6.17). */
+  listScheduled(): Promise<ScheduledChange[]>;
+  /** A tree collection's outline (spec §6.15.2). */
+  pageTree(collection: string): Promise<PageTree>;
+  /** Moves a page and everything under it; `dryRun` only describes what would happen. */
+  movePage(request: MoveRequest, options?: { dryRun?: boolean }): Promise<MoveResult>;
+  reorderPage(request: ReorderRequest): Promise<ReorderResult>;
+  /** Puts an entry of a collection with `orderBy` in a new place, by writing its order numbers. */
+  reorderEntry(request: ReorderEntryRequest): Promise<ReorderEntryResult>;
+  /** Creates the missing section page of a folder in the tree. */
+  createSection(collection: string, path: string): Promise<SaveResponse>;
+  readRedirects(): Promise<RedirectsDocument>;
+  saveRedirects(request: SaveRedirectsRequest): Promise<SaveRedirectsResult>;
+  /**
+   * Whether Save publishes (GitHub and cloud modes) or only writes the file on
+   * this computer (local mode), where the site's publish gate can be saved past.
+   */
+  publishesOnSave(): boolean;
+  /**
+   * Local mode only: who is editing, from git's `user.name` on this computer,
+   * for the user menu (DECISIONS.md, "Appearance is in the user menu").
+   */
+  person?(): Promise<{ name: string | null }>;
+}
+
+export class ApiError extends Error {
+  readonly status: number;
+  constructor(status: number, message: string) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+  }
+}
+
+/** The header every studio request carries (spec §6.7). */
+export const STUDIO_HEADER = 'X-Vesper';
+
+function messageOf(body: unknown, fallback: string): string {
+  if (
+    typeof body === 'object' &&
+    body !== null &&
+    'message' in body &&
+    typeof body.message === 'string'
+  ) {
+    return body.message;
+  }
+  return fallback;
+}
+
+/**
+ * The local-mode client (spec §6.7). Every request carries the `X-Vesper`
+ * header: the dev middleware refuses requests without it, so another site
+ * open in the same browser can't reach it with a simple cross-origin request.
+ *
+ * Saves answer with a `SaveResponse` even when they fail (a conflict or an
+ * invalid value is an answer, not an error). Anything else that isn't 2xx
+ * throws an `ApiError`.
+ */
+export function createLocalApi(base: string, fetcher: typeof fetch = fetch): StudioApi {
+  const root = base.replace(/\/$/, '');
+
+  async function call<T>(path: string, init: RequestInit = {}): Promise<T> {
+    const headers = new Headers(init.headers);
+    headers.set(STUDIO_HEADER, '1');
+    if (typeof init.body === 'string') headers.set('Content-Type', 'application/json');
+    const response = await fetcher(`${root}${path}`, { ...init, headers });
+    const text = await response.text();
+    let body: unknown = null;
+    try {
+      body = text ? JSON.parse(text) : null;
+    } catch {
+      throw new ApiError(
+        response.status,
+        response.ok ? 'The server sent a response the studio couldn’t read.' : response.statusText,
+      );
+    }
+    const isAnswer = typeof body === 'object' && body !== null && 'ok' in body;
+    if (!response.ok && !isAnswer)
+      throw new ApiError(response.status, messageOf(body, response.statusText));
+    return body as T;
+  }
+
+  const query = (params: Record<string, string>) => `?${new URLSearchParams(params).toString()}`;
+
+  return {
+    publishesOnSave: () => false,
+    person: () => call('/person'),
+    summary: () => call('/summary'),
+    listEntries: (collection) => call(`/entries${query({ collection })}`),
+    readEntry: (collection, id) => call(`/entry${query({ collection, id })}`),
+    saveEntry: (request) => call('/entry', { method: 'PUT', body: JSON.stringify(request) }),
+    deleteEntry: (collection, id, version) =>
+      call(`/entry${query({ collection, id, version })}`, { method: 'DELETE' }),
+    listMedia: () => call('/media'),
+    upload: (file, name, folder) =>
+      call(`/media${query({ name, folder })}`, {
+        method: 'POST',
+        body: file,
+        headers: { 'Content-Type': 'application/octet-stream' },
+      }),
+    deleteMedia: (path) => call(`/media${query({ path })}`, { method: 'DELETE' }),
+    listPartials: () => call('/partials'),
+    fileUrl: (path) => Promise.resolve(`${root}/file${query({ path })}`),
+    listPages: () => call('/pages'),
+    listScheduled: () => call('/scheduled'),
+    pageTree: (collection) => call(`/tree${query({ collection })}`),
+    movePage: (request, options = {}) =>
+      call(`/move${options.dryRun ? query({ dryRun: '1' }) : ''}`, {
+        method: 'POST',
+        body: JSON.stringify(request),
+      }),
+    reorderPage: (request) => call('/reorder', { method: 'POST', body: JSON.stringify(request) }),
+    reorderEntry: (request) =>
+      call('/reorder-entry', { method: 'POST', body: JSON.stringify(request) }),
+    createSection: (collection, path) =>
+      call('/section', { method: 'POST', body: JSON.stringify({ collection, path }) }),
+    readRedirects: () => call('/redirects'),
+    saveRedirects: (request) =>
+      call('/redirects', { method: 'PUT', body: JSON.stringify(request) }),
+  };
+}