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

package/src/app/panes.tsx

@@ -0,0 +1,513 @@
+import type { CollectionManifest } from '@vespercms/core';
+import { cx, focusRing, Icon } from '@vespercms/ui';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { shownTo } from '../cloud/access.ts';
+import { DraftsWaiting, useDraftsWaiting } from '../cloud/changes.tsx';
+import { EntryEditor } from '../screens/EntryEditor.tsx';
+import { EntryList } from '../screens/EntryList.tsx';
+import { Home } from '../screens/Home.tsx';
+import { ListPane } from '../screens/ListPane.tsx';
+import { MediaBrowser } from '../screens/MediaBrowser.tsx';
+import { NotFound } from '../screens/NotFound.tsx';
+import { PageTree } from '../screens/PageTree.tsx';
+import { Redirects } from '../screens/Redirects.tsx';
+import { ScheduledLine, ScheduledView } from '../schedule/ScheduledView.tsx';
+import { collectionIcon } from './collection-icon.ts';
+import type { Studio } from './context.tsx';
+import { useLoad } from './load.ts';
+import { hrefFor, type Route } from './router.ts';
+import { PaneContext, usePane, type PaneInfo } from './pane-context.ts';
+import { PaneFrame, Screen, StudioHeader, useLeadHeading, useMeasure } from './Screen.tsx';
+
+/*
+ * The studio on wide screens, full width: panes side by side, Sanity-style
+ * (DECISIONS.md, "The studio is panes, full width"). The structure pane
+ * lists the site's collections and is always there, so getting back to them
+ * is one click. A collection's list is always a pane of its own, with all of
+ * the list's tools, and an entry opens beside it. Each pane scrolls on its
+ * own. People can collapse any pane but the deepest into a strip, and the
+ * studio folds the earlier ones itself when they don't all fit; a strip
+ * opens again with a click. With nothing chosen, the structure pane is the
+ * page itself. Narrower than 48rem the studio is one screen at a time, as
+ * before.
+ */
+
+/** Wide enough for panes: below it, one screen at a time. */
+export const PANES = '(min-width: 48rem)';
+
+type Width = PaneInfo['width'];
+
+/** Least widths in rem. A folded pane is a strip. */
+const WIDTH: Record<Width, number> = { structure: 15, list: 22, flex: 30 };
+const STRIP = 2.75;
+
+const widthClass: Record<Width, string> = {
+  structure: 'w-60 shrink-0',
+  list: 'w-88 shrink-0',
+  flex: 'min-w-0 flex-1',
+};
+
+function useWindowRem(): number {
+  return useSyncExternalStore(
+    (onChange) => {
+      window.addEventListener('resize', onChange);
+      return () => {
+        window.removeEventListener('resize', onChange);
+      };
+    },
+    () => window.innerWidth / 16,
+    () => 80,
+  );
+}
+
+/** The panes people may collapse, by kind, so a choice holds from one collection to the next. */
+type Kind = 'structure' | 'list';
+
+type PaneSpec = {
+  id: string;
+  kind?: Kind;
+  title: string;
+  width: Width;
+  content: ReactNode;
+};
+
+const COLLAPSED_KEY = 'vesper:collapsed-panes';
+
+function readCollapsed(): Set<Kind> {
+  try {
+    const value = localStorage.getItem(COLLAPSED_KEY) ?? '';
+    return new Set(value.split(',').filter((k): k is Kind => k === 'structure' || k === 'list'));
+  } catch {
+    return new Set();
+  }
+}
+
+/** Panes people collapsed, kept per viewer in this browser. */
+function useCollapsed(): [Set<Kind>, (kind: Kind, collapsed: boolean) => void] {
+  const [collapsed, setCollapsed] = useState(readCollapsed);
+  const set = useCallback((kind: Kind, value: boolean) => {
+    setCollapsed((now) => {
+      const next = new Set(now);
+      if (value) next.add(kind);
+      else next.delete(kind);
+      try {
+        localStorage.setItem(COLLAPSED_KEY, [...next].join(','));
+      } catch {
+        // Kept for this visit only.
+      }
+      return next;
+    });
+  }, []);
+  return [collapsed, set];
+}
+
+/**
+ * Which panes fold: the ones people collapsed, then, while they don't fit,
+ * the earliest, keeping the deepest and the one opened by hand.
+ */
+function folded(
+  panes: PaneSpec[],
+  room: number,
+  collapsed: Set<Kind>,
+  keep: string | null,
+): Set<string> {
+  const last = panes.at(-1);
+  const out = new Set(
+    panes
+      .filter((pane) => pane !== last && pane.kind !== undefined && collapsed.has(pane.kind))
+      .map((pane) => pane.id),
+  );
+  const need = () =>
+    panes.reduce((sum, pane) => sum + (out.has(pane.id) ? STRIP : WIDTH[pane.width]), 0);
+  for (const pane of panes.slice(0, -1)) {
+    if (need() <= room) break;
+    if (pane.id !== keep) out.add(pane.id);
+  }
+  // Still too wide with the opened pane open: fold it too, rather than the deepest.
+  for (const pane of panes.slice(0, -1)) {
+    if (need() <= room) break;
+    out.add(pane.id);
+  }
+  return out;
+}
+
+/**
+ * The studio's screens. Wide, they're panes; narrow, the deepest pane alone
+ * is the screen. Both are the same tree, so crossing the width keeps the
+ * open entry as it is, unsaved changes included.
+ */
+export function PaneShell({
+  route,
+  studio,
+  wide,
+}: {
+  route: Route;
+  studio: Studio;
+  wide: boolean;
+}) {
+  const room = useWindowRem();
+  const [collapsed, setCollapsed] = useCollapsed();
+  const [opened, setOpened] = useState<{ key: string; pane: string } | null>(null);
+  const routeKey = JSON.stringify(route);
+  const all = panesFor(route, studio, wide);
+  const panes = wide ? all : all.slice(-1);
+  // A strip the studio folded, opened by hand, stays open until the next navigation.
+  const keep = opened?.key === routeKey ? opened.pane : null;
+  const fold = wide ? folded(panes, room, collapsed, keep) : new Set<string>();
+  const last = panes.at(-1);
+  const home = route.screen === 'home' || route.screen === 'changes';
+
+  // Collapsing removes the button that was pressed, so focus goes to the strip in its place,
+  // and back to the collapse button when the strip opens the pane again.
+  const row = useRef<HTMLDivElement>(null);
+  const focusNext = useRef<string | null>(null);
+  useEffect(() => {
+    const selector = focusNext.current;
+    if (selector === null) return;
+    focusNext.current = null;
+    row.current?.querySelector<HTMLElement>(selector)?.focus();
+  });
+
+  // The top bar floats over the panes, which scroll from the window's top beneath it, so its
+  // glass has something to frost. Each pane starts its content below it (PaneFrame).
+  const [bar, barHeight] = useMeasure('height', 56);
+
+  return (
+    <div
+      className={wide ? 'relative h-dvh overflow-hidden' : undefined}
+      style={wide ? ({ '--studio-bar': `${String(barHeight)}px` } as CSSProperties) : undefined}
+    >
+      {wide && (
+        <div ref={bar} className="absolute inset-x-0 top-0 z-40">
+          <StudioHeader />
+        </div>
+      )}
+      {/* Positioned and clipped: screen-reader-only text deep in a pane's scrolling content is
+          positioned absolutely, and with no positioned ancestor it lengthened the page itself. */}
+      <div ref={row} className={wide ? 'relative flex h-full overflow-hidden' : undefined}>
+        {panes.map((pane) => {
+          const deepest = pane === last;
+          const kind = pane.kind;
+          const info: PaneInfo | null = wide
+            ? {
+                landmark: deepest ? 'main' : 'nav',
+                level: deepest ? 1 : 2,
+                focusTarget: deepest,
+                width: pane.width,
+                ...(!deepest && kind
+                  ? {
+                      onCollapse: () => {
+                        focusNext.current = `[data-strip="${CSS.escape(pane.id)}"]`;
+                        setCollapsed(kind, true);
+                      },
+                    }
+                  : {}),
+              }
+            : null;
+          return fold.has(pane.id) ? (
+            <PaneStrip
+              key={pane.id}
+              id={pane.id}
+              title={pane.title}
+              onOpen={() => {
+                focusNext.current = `[data-pane="${CSS.escape(pane.id)}"] [data-collapse]`;
+                if (kind && collapsed.has(kind)) setCollapsed(kind, false);
+                else setOpened({ key: routeKey, pane: pane.id });
+              }}
+            />
+          ) : (
+            <div
+              key={pane.id}
+              data-pane={pane.id}
+              className={
+                wide ? cx('flex min-h-0 flex-col', paneEdge, widthClass[pane.width]) : undefined
+              }
+            >
+              <PaneContext.Provider value={info}>{pane.content}</PaneContext.Provider>
+            </div>
+          );
+        })}
+        {wide && last && last.width !== 'flex' && (home ? <WaitingPane /> : <Filler />)}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The hairline between panes, from the top bar's bottom edge down. The panes run up
+ * beneath the bar, and a line there showed through its glass as a smudge. In forced
+ * colours the bar is solid, and the plain border takes the system's colour.
+ */
+const paneEdge = cx(
+  'border-r border-border',
+  // Sliced only at the right, so the line's top lands exactly on the bar's height.
+  '[border-image:linear-gradient(transparent_var(--studio-bar),var(--color-border)_var(--studio-bar))_0_1_0_0]',
+  'forced-colors:[border-image:none]',
+);
+
+/** Room for the entry a list opens: empty until one is chosen. */
+function Filler() {
+  return <div aria-hidden="true" data-filler="" className="min-w-0 flex-1 bg-surface-sunken" />;
+}
+
+const WAITING: PaneInfo = { landmark: 'region', level: 2, focusTarget: false, width: 'flex' };
+
+/**
+ * Beside the collections on Home, the cloud's drafts waiting to be
+ * published, and the filler when there are none: absent, not empty (spec
+ * §6.9). A region beside the page's `main`, never the deepest pane itself:
+ * drafts arrive in the background, and a pane that took the lead would move
+ * the `h1` and focus with them.
+ */
+function WaitingPane() {
+  if (useDraftsWaiting() === 0) return <Filler />;
+  return (
+    <div data-pane="changes" className={cx('flex min-h-0 flex-col', paneEdge, widthClass.flex)}>
+      <PaneContext.Provider value={WAITING}>
+        <Screen title="Changes" afterglow>
+          <DraftsWaiting />
+        </Screen>
+      </PaneContext.Provider>
+    </div>
+  );
+}
+
+/** A folded pane: its name, sideways, and a button that opens it again. */
+function PaneStrip({ id, title, onOpen }: { id: string; title: string; onOpen: () => void }) {
+  return (
+    <button
+      type="button"
+      data-strip={id}
+      onClick={onOpen}
+      aria-label={`Show ${title}`}
+      title={`Show ${title}`}
+      className={cx(
+        'flex w-11 shrink-0 flex-col items-center gap-3 text-small text-content-muted hover:bg-surface-sunken hover:text-content',
+        paneEdge,
+        focusRing,
+      )}
+      // Below the floating top bar, as a pane's content is.
+      style={{ paddingTop: 'calc(var(--studio-bar, 0px) + var(--spacing) * 4)' }}
+    >
+      <Icon name="pane-expand" size={18} />
+      <span aria-hidden="true" className="[writing-mode:vertical-rl]">
+        {title}
+      </span>
+    </button>
+  );
+}
+
+/** The panes a route shows, from the structure pane to the deepest. */
+function panesFor(route: Route, studio: Studio, wide: boolean): PaneSpec[] {
+  const structure: PaneSpec = {
+    id: 'structure',
+    kind: 'structure',
+    title: 'Content',
+    width: 'structure',
+    content: <StructurePane route={route} studio={studio} />,
+  };
+  const flex = (id: string, title: string, content: ReactNode): PaneSpec => ({
+    id,
+    title,
+    width: 'flex',
+    content,
+  });
+  if (route.screen === 'home' || route.screen === 'changes') {
+    // Wide, Home beside the collections only repeated them, so they're the page.
+    // Narrow, Home is the one place that lists them with their counts.
+    return wide ? [structure] : [structure, flex('home', 'Content', <Home />)];
+  }
+  if (route.screen === 'media') return [structure, flex('media', 'Media', <MediaBrowser />)];
+  if (route.screen === 'redirects') {
+    return [structure, flex('redirects', 'Redirects', <Redirects />)];
+  }
+  if (route.screen === 'scheduled') {
+    return [structure, flex('scheduled', 'Scheduled', <ScheduledView />)];
+  }
+  if (
+    route.screen === 'list' ||
+    route.screen === 'edit' ||
+    route.screen === 'new' ||
+    route.screen === 'copy'
+  ) {
+    const collection = studio.collection(route.collection);
+    if (!collection) {
+      return [
+        structure,
+        flex(
+          'missing',
+          'Not found',
+          <NotFound message={`This site has no collection called “${route.collection}”.`} />,
+        ),
+      ];
+    }
+    const currentId = route.screen === 'edit' ? route.id : null;
+    const editor =
+      route.screen === 'list' ? null : (
+        <EntryEditor
+          key={JSON.stringify(route)}
+          collection={collection}
+          id={route.screen === 'copy' ? route.id : currentId}
+          copy={route.screen === 'copy'}
+          {...(route.screen === 'new' && route.parent !== undefined
+            ? { parent: route.parent }
+            : {})}
+        />
+      );
+    const tree = collection.presentation.tree === true && collection.source.loader === 'glob';
+    // A singleton's list only leads to its one entry, so it opens beside the collections.
+    if (collection.presentation.singleton) {
+      return [
+        structure,
+        flex('entry', collection.label, editor ?? <EntryList collection={collection} />),
+      ];
+    }
+    // The list is a pane of its own, with all its tools, whether or not an entry is open
+    // beside it. One screen at a time, a flat collection's list is its table.
+    const list: PaneSpec = {
+      id: `list:${collection.name}`,
+      kind: 'list',
+      title: collection.label,
+      width: 'list',
+      content: tree ? (
+        <PageTree collection={collection} currentId={currentId} />
+      ) : wide ? (
+        <ListPane collection={collection} currentId={currentId} />
+      ) : (
+        <EntryList collection={collection} />
+      ),
+    };
+    return editor ? [structure, list, flex('entry', 'Entry', editor)] : [structure, list];
+  }
+  return [structure, flex('missing', 'Not found', <NotFound />)];
+}
+
+/** Where a route is, for the structure pane's current item. */
+function hereOf(route: Route): string | null {
+  if ('collection' in route) return `c:${route.collection}`;
+  if (route.screen === 'media') return 'media';
+  if (route.screen === 'redirects') return 'redirects';
+  return null;
+}
+
+/**
+ * A row of the structure pane: square and edge to edge, with the pane's
+ * padding inside it, as the list pane's rows are. Plain links get no
+ * `data-focus-visible`, so their outline is `focus-visible`'s, drawn inside
+ * the row where the pane's scrolling can't clip it.
+ */
+const structureRow = cx(
+  'flex min-h-10 items-center gap-2 px-4 text-body text-content no-underline',
+  'outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-focus',
+);
+
+/**
+ * The structure pane: every collection, then settings, then the site's own
+ * places. Always on screen, so the site's content is one click away. With
+ * nothing chosen it's the deepest pane, so its heading is the page's `h1`.
+ */
+function StructurePane({ route, studio }: { route: Route; studio: Studio }) {
+  const { manifest, api, cloud, siteUrl } = studio;
+  const [summary] = useLoad(() => api.summary(), 'structure');
+  const heading = useRef<HTMLHeadingElement>(null);
+  useLeadHeading('Content', heading);
+  const Subheading = usePane()?.level === 1 ? 'h2' : 'h3';
+  const counts = new Map(
+    summary.state === 'ready' ? summary.value.map((s) => [s.collection, s.count]) : [],
+  );
+  const shown = manifest.collections.filter((c) => shownTo(cloud, c.name));
+  const collections = shown.filter((c) => !c.presentation.singleton);
+  const singletons = shown.filter((c) => c.presentation.singleton);
+  const here = hereOf(route);
+
+  const item = (
+    key: string,
+    href: string,
+    label: string,
+    icon: ReactNode,
+    detail?: string,
+  ): ReactNode => {
+    const current = here === key;
+    return (
+      <li key={key}>
+        <a
+          href={href}
+          aria-current={current ? 'page' : undefined}
+          className={cx(
+            structureRow,
+            current
+              ? 'bg-accent-subtle font-semibold hover:bg-accent-subtle-hover'
+              : 'hover:bg-surface-sunken',
+          )}
+        >
+          <span className="shrink-0 text-content-muted">{icon}</span>
+          <span className="min-w-0 flex-1 truncate">{label}</span>
+          {detail && <span className="shrink-0 text-caption text-content-muted">{detail}</span>}
+        </a>
+      </li>
+    );
+  };
+  const collectionItem = (collection: CollectionManifest) => {
+    const icon = collectionIcon(collection);
+    const count = counts.get(collection.name);
+    return item(
+      `c:${collection.name}`,
+      hrefFor({ screen: 'list', collection: collection.name }),
+      collection.label,
+      <Icon {...icon} size={18} />,
+      count !== undefined && !collection.presentation.singleton
+        ? new Intl.NumberFormat().format(count)
+        : undefined,
+    );
+  };
+
+  return (
+    <PaneFrame title="Content" headingRef={heading}>
+      <div className="py-3">
+        <ScheduledLine className="mb-3 px-4" />
+        <ul className="flex flex-col gap-0.5">{collections.map(collectionItem)}</ul>
+        {singletons.length > 0 && (
+          <>
+            <Subheading className="mt-6 mb-1 px-4 text-small text-content-muted">
+              Settings
+            </Subheading>
+            <ul className="flex flex-col gap-0.5">{singletons.map(collectionItem)}</ul>
+          </>
+        )}
+        <Subheading className="mt-6 mb-1 px-4 text-small text-content-muted">Site</Subheading>
+        <ul className="flex flex-col gap-0.5">
+          {item('media', hrefFor({ screen: 'media' }), 'Media', <Icon name="media" size={18} />)}
+          {/* Redirects belong to the whole site (spec §7.5): a folder grant doesn't reach them. */}
+          {(!cloud || cloud.wholeSite) &&
+            item(
+              'redirects',
+              hrefFor({ screen: 'redirects' }),
+              'Redirects',
+              <Icon name="redirects" size={18} />,
+            )}
+          {siteUrl && (
+            <li>
+              <a
+                href={siteUrl}
+                target="_blank"
+                rel="noopener"
+                className={cx(structureRow, 'hover:bg-surface-sunken')}
+              >
+                <Icon name="view-on-site" size={18} className="text-content-muted" />
+                View site
+              </a>
+            </li>
+          )}
+        </ul>
+      </div>
+    </PaneFrame>
+  );
+}

package/src/app/router.ts

@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/*
+ * Hash routing (spec §6.1): `/admin/#/c/blog/e/…`. Deep links and reloads
+ * work on any static host without rewrite rules (D16). Entry IDs can contain
+ * slashes, so they are encoded as one segment.
+ */
+
+export type Route =
+  | { screen: 'home' }
+  | { screen: 'list'; collection: string }
+  | { screen: 'edit'; collection: string; id: string }
+  | { screen: 'new'; collection: string; parent?: string }
+  /** A new entry that starts as a copy of another (Duplicate, spec §10.3). */
+  | { screen: 'copy'; collection: string; id: string }
+  | { screen: 'media' }
+  | { screen: 'redirects' }
+  /** Every change still to come across the site (spec §6.17). */
+  | { screen: 'scheduled' }
+  /** Home with the cloud's Changes open: review emails link here. Home alone elsewhere. */
+  | { screen: 'changes' }
+  | { screen: 'not-found'; path: string };
+
+export type KnownRoute = Exclude<Route, { screen: 'not-found' }>;
+
+export function parseRoute(hash: string): Route {
+  const path = hash.replace(/^#/, '') || '/';
+  const parts = path.split('/').filter(Boolean).map(decodeURIComponent);
+  if (parts.length === 0) return { screen: 'home' };
+  if (parts[0] === 'media' && parts.length === 1) return { screen: 'media' };
+  if (parts[0] === 'redirects' && parts.length === 1) return { screen: 'redirects' };
+  if (parts[0] === 'scheduled' && parts.length === 1) return { screen: 'scheduled' };
+  if (parts[0] === 'changes' && parts.length === 1) return { screen: 'changes' };
+  if (parts[0] === 'c' && parts[1]) {
+    if (parts.length === 2) return { screen: 'list', collection: parts[1] };
+    if (parts[2] === 'new' && parts.length === 3) return { screen: 'new', collection: parts[1] };
+    // A new page under a parent in a tree collection (spec §6.15.2: "Add child page").
+    if (parts[2] === 'new' && parts[3] !== undefined && parts.length === 4) {
+      return { screen: 'new', collection: parts[1], parent: parts[3] };
+    }
+    if (parts[2] === 'e' && parts[3] !== undefined && parts.length === 4) {
+      return { screen: 'edit', collection: parts[1], id: parts[3] };
+    }
+    if (parts[2] === 'e' && parts[3] !== undefined && parts[4] === 'copy' && parts.length === 5) {
+      return { screen: 'copy', collection: parts[1], id: parts[3] };
+    }
+  }
+  return { screen: 'not-found', path };
+}
+
+export function hrefFor(route: KnownRoute): string {
+  const enc = encodeURIComponent;
+  switch (route.screen) {
+    case 'home':
+      return '#/';
+    case 'media':
+      return '#/media';
+    case 'redirects':
+      return '#/redirects';
+    case 'scheduled':
+      return '#/scheduled';
+    case 'changes':
+      return '#/changes';
+    case 'list':
+      return `#/c/${enc(route.collection)}`;
+    case 'new':
+      return route.parent !== undefined
+        ? `#/c/${enc(route.collection)}/new/${enc(route.parent)}`
+        : `#/c/${enc(route.collection)}/new`;
+    case 'edit':
+      return `#/c/${enc(route.collection)}/e/${enc(route.id)}`;
+    case 'copy':
+      return `#/c/${enc(route.collection)}/e/${enc(route.id)}/copy`;
+  }
+}
+
+/** Goes to a route. `replace` swaps the current history entry (after creating an entry, say). */
+export function navigate(route: KnownRoute, options: { replace?: boolean } = {}): void {
+  if (options.replace) {
+    window.location.replace(hrefFor(route));
+  } else {
+    window.location.hash = hrefFor(route);
+  }
+}
+
+/**
+ * The open screen's unsaved-changes check. Only one screen holds one at a
+ * time. Returns a function that removes it.
+ */
+let leaveGuard: (() => boolean) | null = null;
+
+export function setLeaveGuard(hasUnsavedChanges: () => boolean): () => void {
+  leaveGuard = hasUnsavedChanges;
+  return () => {
+    if (leaveGuard === hasUnsavedChanges) leaveGuard = null;
+  };
+}
+
+/** Whether the open screen has unsaved changes. */
+export function hasUnsavedChanges(): boolean {
+  return leaveGuard?.() ?? false;
+}
+
+export type RouterState = {
+  route: Route;
+  /** A navigation held back because the open screen has unsaved changes. */
+  pending: string | null;
+  /** Leave anyway, discarding the changes. */
+  leave: () => void;
+  /** Stay on the current screen. */
+  stay: () => void;
+};
+
+/**
+ * The current route. Every in-app navigation is a hash change, so this is
+ * also where unsaved changes are protected: when the guard says so, the
+ * hash is put back and the navigation waits for `leave()` or `stay()`.
+ */
+export function useRouter(): RouterState {
+  const [route, setRoute] = useState(() => parseRoute(window.location.hash));
+  const [pending, setPending] = useState<string | null>(null);
+  const current = useRef(window.location.hash);
+  const allowNext = useRef(false);
+
+  useEffect(() => {
+    const update = () => {
+      const next = window.location.hash;
+      // Browsers can report one change twice (and tests dispatch their own); nothing moved.
+      if (next === current.current) return;
+      if (!allowNext.current && leaveGuard?.()) {
+        // replaceState doesn't fire hashchange, so this doesn't loop.
+        window.history.replaceState(null, '', current.current || '#/');
+        setPending(next);
+        return;
+      }
+      allowNext.current = false;
+      current.current = next;
+      setRoute(parseRoute(next));
+    };
+    window.addEventListener('hashchange', update);
+    return () => {
+      window.removeEventListener('hashchange', update);
+    };
+  }, []);
+
+  const leave = useCallback(() => {
+    if (pending === null) return;
+    allowNext.current = true;
+    leaveGuard = null;
+    setPending(null);
+    window.location.hash = pending;
+  }, [pending]);
+  const stay = useCallback(() => {
+    setPending(null);
+  }, []);
+
+  return { route, pending, leave, stay };
+}