@eventcatalog/core 5.0.0-beta.8 → 5.0.0

package/eventcatalog/src/features/studio/pages/index.astro

@@ -1,10 +1,13 @@
 ---
 import path from 'node:path';
-import { ChevronDown, ChevronLeft, ChevronRight, Pencil, Plus, Search } from 'lucide-react';
+import { ChevronDown, ChevronLeft, ChevronRight, Copy, EllipsisVertical, Pencil, Plus, Search, Trash2 } from 'lucide-react';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import StudioNotice from '../components/StudioNotice.astro';
 import { buildUrl } from '@utils/url-builder';
-import { CANVAS_STATUSES, type CanvasStatus } from '../canvas-doc';
-import { CANVAS_STATUS_LOOK } from '../components/status';
+import { CANVAS_STATUSES, CANVAS_STATUS_LOOK, STATUS, type CanvasStatus } from '@eventcatalog/visualiser/studio';
+import { MAX_TITLE_LENGTH } from '../limits';
+import { MAX_NAME_LENGTH } from '../identity';
+import { CANVASES_API_PATH } from '../api/canvases-api';
 import { startStudio, type CanvasSummary } from '../server/runtime';
 import { getSignedInUser, isSignedIn } from '../server/sign-in';
 
@@ -12,7 +15,12 @@ export const prerender = false;
 
 // The canvases on this EventCatalog, listed like the catalog's other tables (filters are in the address, so they can
 // be shared and work without JavaScript)
-const runtime = await startStudio({ isSignedIn });
+// Studio can't start when its storage can't be used (e.g. the database was updated by a newer EventCatalog): this
+// page says why instead of listing anything
+const started = await startStudio({ isSignedIn }).catch((error: Error) => error);
+const unavailable = started instanceof Error ? started.message : undefined;
+if (unavailable) Astro.response.status = 503;
+const runtime = started instanceof Error ? undefined : started;
 // Signed in (SSO): you're shown by who you signed in as, and asked for nothing
 const signedInAs = getSignedInUser(Astro.locals);
 const storage = runtime?.storage ?? { type: 'memory' as const };
@@ -22,13 +30,8 @@ const statusParam = Astro.url.searchParams.get('status');
 const status = CANVAS_STATUSES.includes(statusParam as CanvasStatus) ? (statusParam as CanvasStatus) : undefined;
 const search = Astro.url.searchParams.get('q')?.trim() ?? '';
 
-// Canvases started and left empty (opening a new one to look around) aren't listed
-const isBlank = (canvas: CanvasSummary) =>
-  canvas.nodeCount === 0 && canvas.openComments === 0 && !canvas.title && canvas.people.length === 0;
-const canvases = (runtime?.listCanvases({ withPreview: true }) ?? [])
-  .filter((canvas) => !isBlank(canvas))
-  // The ones changed most recently first
-  .sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0));
+// The ones changed most recently first (canvases started and left empty aren't listed)
+const canvases = runtime?.listCanvases({ withPreview: true }) ?? [];
 const counts = Object.fromEntries(
   CANVAS_STATUSES.map((value) => [value, canvases.filter((canvas) => canvas.status === value).length])
 ) as Record<CanvasStatus, number>;
@@ -67,6 +70,9 @@ const ago = (time: number) => {
   if (Math.abs(days) < 30) return relativeTime.format(days, 'day');
   return new Date(time).toLocaleDateString('en', { day: 'numeric', month: 'short', year: 'numeric' });
 };
+const canvasesApiUrl = buildUrl(CANVASES_API_PATH, true);
+// Opens the New canvas dialog (also from a canvas's New canvas, or a link)
+const newCanvasUrl = `${buildUrl('/studio')}?new=1`;
 const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? '' : 's'}`;
 
 // Node colours in previews, like the visualiser's (by kind of node), from the theme's badge colours
@@ -95,384 +101,474 @@ const strokeOf = (preview: NonNullable<CanvasSummary['preview']>, ratio: number)
   Math.max(preview.width, preview.height) / ratio;
 ---
 
-<VerticalSideBarLayout title="Studio - EventCatalog" showNestedSideBar={false}>
-  {/* The page's height, like Discover: the list scrolls between its header and its pages */}
-  <main
-    class="ml-0 flex flex-col bg-[rgb(var(--ec-page-bg))]"
-    style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);"
-  >
-    <div class="flex flex-shrink-0 flex-col gap-4 px-6 py-5 md:flex-row md:items-end md:justify-between">
-      <div class="min-w-0">
-        <h1 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] md:text-4xl">Studio ({canvases.length})</h1>
-        <p class="max-w-3xl pt-2 text-base font-light text-[rgb(var(--ec-page-text-muted))]">
-          Design changes to your architecture on live canvases, with your team and AI agents.
-        </p>
-      </div>
-      <div class="flex shrink-0 flex-col items-start gap-3 md:items-end">
-        {
-          /* You, by the name others see on canvases: who you signed in as, or the name kept in this browser (shown by
-          the script; its space is kept so nothing moves) */
-        }
-        {
-          signedInAs ? (
-            // Signed in: you're shown in the app's header already (still read by the script, for New canvas)
-            <div data-you data-signed-in-as={signedInAs.name} hidden />
-          ) : (
-            <div data-you class="invisible flex items-center gap-2">
+<VerticalSideBarLayout title="Studio" showNestedSideBar={false}>
+  {
+    unavailable ? (
+      <main
+        class="bg-[rgb(var(--ec-page-bg))]"
+        style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);"
+      >
+        <StudioNotice title="Studio isn't available" message={unavailable} />
+      </main>
+    ) : (
+      <Fragment>
+        {/* The page's height, like Discover: the list scrolls between its header and its pages */}
+        <main
+          class="ml-0 flex flex-col bg-[rgb(var(--ec-page-bg))]"
+          style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);"
+        >
+          <div class="flex flex-shrink-0 flex-col gap-4 px-6 py-5 md:flex-row md:items-end md:justify-between">
+            <div class="min-w-0">
+              <h1 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] md:text-4xl">Studio ({canvases.length})</h1>
+              <p class="max-w-3xl pt-2 text-base font-light text-[rgb(var(--ec-page-text-muted))]">
+                Design changes to your architecture on live canvases, with your team and AI agents.
+              </p>
+            </div>
+            <div class="flex shrink-0 flex-col items-start gap-3 md:items-end">
+              {/* You, by the name others see on canvases: who you signed in as, or the name kept in this browser (shown by
+          the script; its space is kept so nothing moves) */}
+              {signedInAs ? (
+                // Signed in: you're shown in the app's header already (still read by the script, for New canvas)
+                <div data-you data-signed-in-as={signedInAs.name} hidden />
+              ) : (
+                <div data-you class="invisible flex items-center gap-2">
+                  <button
+                    type="button"
+                    title="Change your name"
+                    class="group inline-flex max-w-48 items-center gap-2 rounded-lg border py-1 pl-1 pr-2.5 text-sm border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]"
+                  >
+                    <span
+                      data-you-avatar
+                      class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white"
+                    />
+                    <span data-you-name class="truncate font-medium" />
+                    <Pencil
+                      size={12}
+                      className="shrink-0 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-page-text))]"
+                    />
+                  </button>
+                </div>
+              )}
+              <div class="flex items-center gap-2">
+                <form method="get" action={buildUrl('/studio')} class="flex items-center gap-2" role="search">
+                  {pageSize !== PAGE_SIZES[0] && <input type="hidden" name="size" value={pageSize} />}
+                  <label class="relative">
+                    <span class="sr-only">Filter canvases</span>
+                    <Search
+                      size={14}
+                      className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]"
+                    />
+                    <input
+                      type="search"
+                      name="q"
+                      value={search}
+                      placeholder="Filter..."
+                      class="w-56 rounded-lg border py-1.5 pl-8 pr-3 text-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))]"
+                    />
+                  </label>
+                  <label class="relative">
+                    <span class="sr-only">Status</span>
+                    {/* Our own arrow: the browser's sits against the edge, whatever the padding */}
+                    <select
+                      name="status"
+                      onchange="this.form.requestSubmit()"
+                      class="cursor-pointer appearance-none rounded-lg border py-1.5 pl-3 pr-9 text-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] focus:outline-none focus:border-[rgb(var(--ec-accent))]"
+                    >
+                      <option value="" selected={!status}>
+                        All statuses
+                      </option>
+                      {CANVAS_STATUSES.map((value) => (
+                        <option value={value} selected={status === value}>
+                          {CANVAS_STATUS_LOOK[value].label} ({counts[value]})
+                        </option>
+                      ))}
+                    </select>
+                    <ChevronDown
+                      size={14}
+                      className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]"
+                    />
+                  </label>
+                </form>
+                <a
+                  href={newCanvasUrl}
+                  data-new-canvas
+                  class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))]"
+                >
+                  <Plus size={14} />
+                  New canvas
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div data-canvas-list class="min-h-0 flex-1 overflow-auto px-6 pb-5">
+            <div class="overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border)/0.72)] bg-[rgb(var(--ec-dropdown-bg)/0.66)]">
+              <table class="min-w-full divide-y divide-[rgb(var(--ec-page-border)/0.62)]">
+                <thead class="sticky top-0 z-10 bg-[rgb(var(--ec-content-hover)/0.45)]">
+                  <tr>
+                    {['Canvas', 'Status', 'Contents', 'Comments', 'Created', 'Updated'].map((label) => (
+                      <th
+                        scope="col"
+                        class="px-4 py-2.5 text-left text-[11px] font-medium uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]"
+                      >
+                        {label}
+                      </th>
+                    ))}
+                    <th scope="col" class="w-px px-4 py-2.5">
+                      <span class="sr-only">Actions</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-[rgb(var(--ec-page-border)/0.5)]">
+                  {onPage.map((canvas) => {
+                    const look = CANVAS_STATUS_LOOK[canvas.status];
+                    const preview = canvas.preview;
+                    return (
+                      <tr class="group relative transition-colors hover:bg-[rgb(var(--ec-content-hover)/0.38)]">
+                        <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text))]">
+                          <a href={buildUrl(`/studio/${canvas.canvasId}`)} class="flex items-center gap-3 font-semibold">
+                            {/* The whole row opens it */}
+                            <span class="absolute inset-0" aria-hidden="true" />
+                            <span class="flex h-9 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))]">
+                              {preview && (
+                                <svg
+                                  viewBox={framed(preview)}
+                                  preserveAspectRatio="xMidYMid meet"
+                                  class="h-full w-full"
+                                  aria-hidden="true"
+                                >
+                                  {preview.lines.map((line) => (
+                                    <line
+                                      {...line}
+                                      stroke="rgb(var(--ec-page-text-muted))"
+                                      stroke-opacity="0.5"
+                                      stroke-width={strokeOf(preview, 120)}
+                                    />
+                                  ))}
+                                  {preview.shapes.map((shape) => (
+                                    <rect
+                                      x={shape.x}
+                                      y={shape.y}
+                                      width={shape.width}
+                                      height={shape.height}
+                                      rx={strokeOf(preview, 40)}
+                                      fill={shape.container ? 'none' : colourOf(shape.type)}
+                                      fill-opacity="0.35"
+                                      stroke={shape.container ? 'rgb(var(--ec-page-text-muted))' : colourOf(shape.type)}
+                                      stroke-opacity={shape.container ? 0.5 : 1}
+                                      stroke-width={strokeOf(preview, shape.container ? 160 : 100)}
+                                    />
+                                  ))}
+                                </svg>
+                              )}
+                            </span>
+                            <span class="truncate group-hover:text-[rgb(var(--ec-accent))]">
+                              {canvas.title ?? 'Untitled canvas'}
+                            </span>
+                          </a>
+                        </td>
+                        <td class="px-4 py-3 text-sm">
+                          <span class:list={['inline-flex rounded-full border px-2 py-px text-[11px] font-medium', look.pill]}>
+                            {look.label}
+                          </span>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                          {plural(canvas.nodeCount, 'node')}, {plural(canvas.edgeCount, 'connection')}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                          {canvas.openComments > 0 ? `${canvas.openComments} open` : '-'}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                          {[canvas.createdAt && ago(canvas.createdAt), canvas.createdBy && `by ${canvas.createdBy}`]
+                            .filter(Boolean)
+                            .join(' ') || '-'}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                          {canvas.updatedAt ? ago(canvas.updatedAt) : '-'}
+                        </td>
+                        <td class="px-4 py-3 text-right">
+                          {/* Above the link that covers the row */}
+                          <button
+                            type="button"
+                            data-canvas-menu={canvas.canvasId}
+                            data-canvas-title={canvas.title ?? ''}
+                            title="More"
+                            aria-label={`More for ${canvas.title ?? 'Untitled canvas'}`}
+                            aria-haspopup="menu"
+                            aria-expanded="false"
+                            class="relative z-[1] rounded-md p-1.5 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)] hover:text-[rgb(var(--ec-page-text))] aria-expanded:bg-[rgb(var(--ec-page-border)/0.5)]"
+                          >
+                            <EllipsisVertical size={16} />
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                  {shown.length === 0 && (
+                    <tr>
+                      <td colspan="7" class="px-4 py-12 text-center">
+                        <p class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))]">
+                          {canvases.length === 0 ? 'No canvases yet' : 'No canvases match'}
+                        </p>
+                        <p class="mt-1 text-xs text-[rgb(var(--ec-icon-color))]">
+                          {canvases.length === 0 ? (
+                            <a href={newCanvasUrl} data-new-canvas class="text-[rgb(var(--ec-accent))] hover:underline">
+                              Start a canvas
+                            </a>
+                          ) : (
+                            <a href={buildUrl('/studio')} class="text-[rgb(var(--ec-accent))] hover:underline">
+                              Show all canvases
+                            </a>
+                          )}
+                        </p>
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div class="flex flex-shrink-0 items-center justify-between gap-4 border-t border-[rgb(var(--ec-page-border))] px-6 py-3">
+            <div class="flex min-w-0 items-center gap-3 text-xs text-[rgb(var(--ec-page-text-muted))]">
+              {shown.length > 0 && (
+                <span class="shrink-0">
+                  <span class="font-medium text-[rgb(var(--ec-page-text))]">{onPage.length}</span> of{' '}
+                  <span class="font-medium text-[rgb(var(--ec-page-text))]">{shown.length}</span> results
+                </span>
+              )}
+              {shown.length > 0 && <span aria-hidden="true" class="h-3 w-px shrink-0 bg-[rgb(var(--ec-page-border))]" />}
+              <form method="get" action={buildUrl('/studio')} class="flex shrink-0 items-center gap-1.5">
+                {search && <input type="hidden" name="q" value={search} />}
+                {status && <input type="hidden" name="status" value={status} />}
+                <label for="studio-page-size">Per page</label>
+                <select
+                  id="studio-page-size"
+                  name="size"
+                  onchange="this.form.requestSubmit()"
+                  class="cursor-pointer rounded bg-transparent px-1 py-0.5 font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] focus:bg-[rgb(var(--ec-content-hover))] focus:outline-none"
+                >
+                  {PAGE_SIZES.map((size) => (
+                    <option value={size} selected={size === pageSize}>
+                      {size}
+                    </option>
+                  ))}
+                </select>
+              </form>
+              <span aria-hidden="true" class="h-3 w-px shrink-0 bg-[rgb(var(--ec-page-border))]" />
+              <span class="truncate">
+                {storage.type === 'memory'
+                  ? 'Kept in memory until EventCatalog restarts (set storage in eventcatalog.config.js to keep them)'
+                  : `Saved in ${savedIn}`}
+              </span>
+            </div>
+            <nav class="flex shrink-0 items-center gap-1.5" aria-label="Pages">
+              {pageNumber > 1 ? (
+                <a
+                  href={pageUrl(pageNumber - 1)}
+                  title="Previous page"
+                  class="p-1.5 text-[rgb(var(--ec-icon-color))] transition-colors hover:text-[rgb(var(--ec-page-text))]"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </a>
+              ) : (
+                <span aria-disabled="true" class="p-1.5 text-[rgb(var(--ec-icon-color))] opacity-30">
+                  <ChevronLeft className="h-4 w-4" />
+                </span>
+              )}
+              <span class="min-w-[60px] text-center text-xs tabular-nums text-[rgb(var(--ec-page-text-muted))]">
+                <span class="font-medium text-[rgb(var(--ec-page-text))]">{pageNumber}</span> / {pageCount}
+              </span>
+              {pageNumber < pageCount ? (
+                <a
+                  href={pageUrl(pageNumber + 1)}
+                  title="Next page"
+                  class="p-1.5 text-[rgb(var(--ec-icon-color))] transition-colors hover:text-[rgb(var(--ec-page-text))]"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </a>
+              ) : (
+                <span aria-disabled="true" class="p-1.5 text-[rgb(var(--ec-icon-color))] opacity-30">
+                  <ChevronRight className="h-4 w-4" />
+                </span>
+              )}
+            </nav>
+          </div>
+        </main>
+
+        {/* Naming a new canvas before it opens (created through the Studio API) */}
+        <dialog
+          id="new-canvas-dialog"
+          aria-labelledby="new-canvas-title"
+          class="m-auto w-full max-w-md rounded-xl border p-0 shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] backdrop:bg-black/40"
+        >
+          <form data-api={canvasesApiUrl}>
+            <div class="border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
+              <h2 id="new-canvas-title" class="text-base font-semibold">
+                New canvas
+              </h2>
+              <p class="mt-0.5 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                Name it for what you're designing, so your team can find it.
+              </p>
+            </div>
+            <div class="px-5 py-4">
+              <label for="new-canvas-name" class="block text-sm font-semibold">
+                Name
+              </label>
+              <input
+                id="new-canvas-name"
+                name="title"
+                maxlength={MAX_TITLE_LENGTH}
+                autocomplete="off"
+                placeholder="e.g. Payments redesign"
+                class="mt-2 w-full rounded-lg border px-3 py-2 text-sm shadow-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))] focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)]"
+              />
+              {/* Who's starting it: the name they use on canvases, if they've joined one in this browser */}
+              <input type="hidden" name="by" />
+              <p data-error hidden class:list={['mt-2 text-sm', STATUS.danger.text]} />
+            </div>
+            <div class="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
               <button
                 type="button"
-                title="Change your name"
-                class="group inline-flex max-w-48 items-center gap-2 rounded-lg border py-1 pl-1 pr-2.5 text-sm border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]"
+                data-close-dialog
+                class="rounded-lg border px-4 py-2 text-sm font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]"
               >
-                <span
-                  data-you-avatar
-                  class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white"
-                />
-                <span data-you-name class="truncate font-medium" />
-                <Pencil
-                  size={12}
-                  className="shrink-0 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-page-text))]"
-                />
+                Cancel
               </button>
-            </div>
-          )
-        }
-        <div class="flex items-center gap-2">
-          <form method="get" action={buildUrl('/studio')} class="flex items-center gap-2" role="search">
-            {pageSize !== PAGE_SIZES[0] && <input type="hidden" name="size" value={pageSize} />}
-            <label class="relative">
-              <span class="sr-only">Filter canvases</span>
-              <Search
-                size={14}
-                className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]"
-              />
-              <input
-                type="search"
-                name="q"
-                value={search}
-                placeholder="Filter..."
-                class="w-56 rounded-lg border py-1.5 pl-8 pr-3 text-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))]"
-              />
-            </label>
-            <label class="relative">
-              <span class="sr-only">Status</span>
-              {/* Our own arrow: the browser's sits against the edge, whatever the padding */}
-              <select
-                name="status"
-                onchange="this.form.requestSubmit()"
-                class="cursor-pointer appearance-none rounded-lg border py-1.5 pl-3 pr-9 text-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] focus:outline-none focus:border-[rgb(var(--ec-accent))]"
+              <button
+                type="submit"
+                class="rounded-lg px-4 py-2 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] disabled:opacity-60"
               >
-                <option value="" selected={!status}>All statuses</option>
-                {
-                  CANVAS_STATUSES.map((value) => (
-                    <option value={value} selected={status === value}>
-                      {CANVAS_STATUS_LOOK[value].label} ({counts[value]})
-                    </option>
-                  ))
-                }
-              </select>
-              <ChevronDown
-                size={14}
-                className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]"
-              />
-            </label>
+                Create canvas
+              </button>
+            </div>
           </form>
-          <a
-            href={buildUrl('/studio/new')}
-            data-new-canvas
-            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))]"
+        </dialog>
+
+        {/* A canvas's menu, opened from its row (one for the page, moved to the row it's opened from) */}
+        <div
+          id="canvas-row-menu"
+          role="menu"
+          hidden
+          data-api={canvasesApiUrl}
+          class="fixed z-50 min-w-44 rounded-xl border p-1 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
+        >
+          <button
+            type="button"
+            role="menuitem"
+            data-menu-copy
+            class="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-xs hover:bg-[rgb(var(--ec-page-border)/0.5)] disabled:opacity-60"
+          >
+            <Copy size={14} />
+            <span data-label>Make a copy</span>
+          </button>
+          <div class="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+          <button
+            type="button"
+            role="menuitem"
+            data-menu-delete
+            class:list={[
+              'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-xs',
+              STATUS.danger.text,
+              STATUS.danger.hover,
+            ]}
           >
-            <Plus size={14} />
-            New canvas
-          </a>
+            <Trash2 size={14} />
+            Delete
+          </button>
+          <p data-error hidden class:list={['max-w-56 px-2.5 py-1.5 text-xs', STATUS.danger.text]} />
         </div>
-      </div>
-    </div>
-
-    <div class="min-h-0 flex-1 overflow-auto px-6 pb-5">
-      <div
-        class="overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border)/0.72)] bg-[rgb(var(--ec-dropdown-bg)/0.66)]"
-      >
-        <table class="min-w-full divide-y divide-[rgb(var(--ec-page-border)/0.62)]">
-          <thead class="sticky top-0 z-10 bg-[rgb(var(--ec-content-hover)/0.45)]">
-            <tr>
-              {
-                ['Canvas', 'Status', 'Contents', 'Comments', 'Created', 'Updated'].map((label) => (
-                  <th
-                    scope="col"
-                    class="px-4 py-2.5 text-left text-[11px] font-medium uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]"
-                  >
-                    {label}
-                  </th>
-                ))
-              }
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-[rgb(var(--ec-page-border)/0.5)]">
-            {
-              onPage.map((canvas) => {
-                const look = CANVAS_STATUS_LOOK[canvas.status];
-                const preview = canvas.preview;
-                return (
-                  <tr class="group relative transition-colors hover:bg-[rgb(var(--ec-content-hover)/0.38)]">
-                    <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text))]">
-                      <a href={buildUrl(`/studio/${canvas.canvasId}`)} class="flex items-center gap-3 font-semibold">
-                        {/* The whole row opens it */}
-                        <span class="absolute inset-0" aria-hidden="true" />
-                        <span class="flex h-9 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))]">
-                          {preview && (
-                            <svg
-                              viewBox={framed(preview)}
-                              preserveAspectRatio="xMidYMid meet"
-                              class="h-full w-full"
-                              aria-hidden="true"
-                            >
-                              {preview.lines.map((line) => (
-                                <line
-                                  {...line}
-                                  stroke="rgb(var(--ec-page-text-muted))"
-                                  stroke-opacity="0.5"
-                                  stroke-width={strokeOf(preview, 120)}
-                                />
-                              ))}
-                              {preview.shapes.map((shape) => (
-                                <rect
-                                  x={shape.x}
-                                  y={shape.y}
-                                  width={shape.width}
-                                  height={shape.height}
-                                  rx={strokeOf(preview, 40)}
-                                  fill={shape.container ? 'none' : colourOf(shape.type)}
-                                  fill-opacity="0.35"
-                                  stroke={shape.container ? 'rgb(var(--ec-page-text-muted))' : colourOf(shape.type)}
-                                  stroke-opacity={shape.container ? 0.5 : 1}
-                                  stroke-width={strokeOf(preview, shape.container ? 160 : 100)}
-                                />
-                              ))}
-                            </svg>
-                          )}
-                        </span>
-                        <span class="truncate group-hover:text-[rgb(var(--ec-accent))]">{canvas.title ?? 'Untitled canvas'}</span>
-                      </a>
-                    </td>
-                    <td class="px-4 py-3 text-sm">
-                      <span class:list={['inline-flex rounded-full border px-2 py-px text-[11px] font-medium', look.pill]}>
-                        {look.label}
-                      </span>
-                    </td>
-                    <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
-                      {plural(canvas.nodeCount, 'node')}, {plural(canvas.edgeCount, 'connection')}
-                    </td>
-                    <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
-                      {canvas.openComments > 0 ? `${canvas.openComments} open` : '-'}
-                    </td>
-                    <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
-                      {[canvas.createdAt && ago(canvas.createdAt), canvas.createdBy && `by ${canvas.createdBy}`]
-                        .filter(Boolean)
-                        .join(' ') || '-'}
-                    </td>
-                    <td class="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
-                      {canvas.updatedAt ? ago(canvas.updatedAt) : '-'}
-                    </td>
-                  </tr>
-                );
-              })
-            }
-            {
-              shown.length === 0 && (
-                <tr>
-                  <td colspan="6" class="px-4 py-12 text-center">
-                    <p class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))]">
-                      {canvases.length === 0 ? 'No canvases yet' : 'No canvases match'}
-                    </p>
-                    <p class="mt-1 text-xs text-[rgb(var(--ec-icon-color))]">
-                      {canvases.length === 0 ? (
-                        <a href={buildUrl('/studio/new')} data-new-canvas class="text-[rgb(var(--ec-accent))] hover:underline">
-                          Start a canvas
-                        </a>
-                      ) : (
-                        <a href={buildUrl('/studio')} class="text-[rgb(var(--ec-accent))] hover:underline">
-                          Show all canvases
-                        </a>
-                      )}
-                    </p>
-                  </td>
-                </tr>
-              )
-            }
-          </tbody>
-        </table>
-      </div>
-    </div>
 
-    <div class="flex flex-shrink-0 items-center justify-between gap-4 border-t border-[rgb(var(--ec-page-border))] px-6 py-3">
-      <div class="flex min-w-0 items-center gap-3 text-xs text-[rgb(var(--ec-page-text-muted))]">
-        {
-          shown.length > 0 && (
-            <span class="shrink-0">
-              <span class="font-medium text-[rgb(var(--ec-page-text))]">{onPage.length}</span> of{' '}
-              <span class="font-medium text-[rgb(var(--ec-page-text))]">{shown.length}</span> results
-            </span>
-          )
-        }
-        {shown.length > 0 && <span aria-hidden="true" class="h-3 w-px shrink-0 bg-[rgb(var(--ec-page-border))]" />}
-        <form method="get" action={buildUrl('/studio')} class="flex shrink-0 items-center gap-1.5">
-          {search && <input type="hidden" name="q" value={search} />}
-          {status && <input type="hidden" name="status" value={status} />}
-          <label for="studio-page-size">Per page</label>
-          <select
-            id="studio-page-size"
-            name="size"
-            onchange="this.form.requestSubmit()"
-            class="cursor-pointer rounded bg-transparent px-1 py-0.5 font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] focus:bg-[rgb(var(--ec-content-hover))] focus:outline-none"
-          >
-            {
-              PAGE_SIZES.map((size) => (
-                <option value={size} selected={size === pageSize}>
-                  {size}
-                </option>
-              ))
-            }
-          </select>
-        </form>
-        <span aria-hidden="true" class="h-3 w-px shrink-0 bg-[rgb(var(--ec-page-border))]"></span>
-        <span class="truncate">
-          {
-            storage.type === 'memory'
-              ? 'Kept in memory until EventCatalog restarts (set studio.storage in eventcatalog.config.js to keep them)'
-              : `Saved in ${savedIn}`
-          }
-        </span>
-      </div>
-      <nav class="flex shrink-0 items-center gap-1.5" aria-label="Pages">
-        {
-          pageNumber > 1 ? (
-            <a
-              href={pageUrl(pageNumber - 1)}
-              title="Previous page"
-              class="p-1.5 text-[rgb(var(--ec-icon-color))] transition-colors hover:text-[rgb(var(--ec-page-text))]"
+        {/* Deleting a canvas, after asking (it's deleted for everyone, for good) */}
+        <dialog
+          id="delete-canvas-dialog"
+          role="alertdialog"
+          aria-labelledby="delete-canvas-title"
+          data-api={canvasesApiUrl}
+          class="m-auto w-full max-w-md rounded-xl border p-0 shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] backdrop:bg-black/40"
+        >
+          <div class="space-y-2 px-5 py-4">
+            <h2 id="delete-canvas-title" class="text-base font-semibold">
+              Delete this canvas?
+            </h2>
+            <p class="text-sm text-[rgb(var(--ec-page-text-muted))]">
+              It's deleted for everyone, with its comments, and can't be brought back. Anyone who has it open is told.
+            </p>
+            <p data-error hidden class:list={['text-sm', STATUS.danger.text]} />
+          </div>
+          <div class="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
+            <button
+              type="button"
+              data-close-dialog
+              class="rounded-lg border px-4 py-2 text-sm font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]"
             >
-              <ChevronLeft className="h-4 w-4" />
-            </a>
-          ) : (
-            <span aria-disabled="true" class="p-1.5 text-[rgb(var(--ec-icon-color))] opacity-30">
-              <ChevronLeft className="h-4 w-4" />
-            </span>
-          )
-        }
-        <span class="min-w-[60px] text-center text-xs tabular-nums text-[rgb(var(--ec-page-text-muted))]">
-          <span class="font-medium text-[rgb(var(--ec-page-text))]">{pageNumber}</span> / {pageCount}
-        </span>
-        {
-          pageNumber < pageCount ? (
-            <a
-              href={pageUrl(pageNumber + 1)}
-              title="Next page"
-              class="p-1.5 text-[rgb(var(--ec-icon-color))] transition-colors hover:text-[rgb(var(--ec-page-text))]"
+              Cancel
+            </button>
+            <button
+              type="button"
+              data-confirm-delete
+              class:list={['rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-60', STATUS.danger.button]}
             >
-              <ChevronRight className="h-4 w-4" />
-            </a>
-          ) : (
-            <span aria-disabled="true" class="p-1.5 text-[rgb(var(--ec-icon-color))] opacity-30">
-              <ChevronRight className="h-4 w-4" />
-            </span>
-          )
-        }
-      </nav>
-    </div>
-  </main>
+              Delete canvas
+            </button>
+          </div>
+        </dialog>
 
-  {/* Naming a new canvas before it opens (New canvas links work without it: they start an untitled one) */}
-  <dialog
-    id="new-canvas-dialog"
-    aria-labelledby="new-canvas-title"
-    class="m-auto w-full max-w-md rounded-xl border p-0 shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] backdrop:bg-black/40"
-  >
-    <form method="post" action={buildUrl('/studio/new')}>
-      <div class="border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
-        <h2 id="new-canvas-title" class="text-base font-semibold">New canvas</h2>
-        <p class="mt-0.5 text-sm text-[rgb(var(--ec-page-text-muted))]">
-          Name it for what you're designing, so your team can find it.
-        </p>
-      </div>
-      <div class="px-5 py-4">
-        <label for="new-canvas-name" class="block text-sm font-semibold">Name</label>
-        <input
-          id="new-canvas-name"
-          name="title"
-          maxlength="200"
-          autocomplete="off"
-          placeholder="e.g. Payments redesign"
-          class="mt-2 w-full rounded-lg border px-3 py-2 text-sm shadow-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))] focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)]"
-        />
-        {/* Who's starting it: the name they use on canvases, if they've joined one in this browser */}
-        <input type="hidden" name="by" />
-      </div>
-      <div class="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
-        <button
-          type="button"
-          data-close-dialog
-          class="rounded-lg border px-4 py-2 text-sm font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]"
+        {/* Your name: asked for on your first visit, changed from the button by New canvas */}
+        <dialog
+          id="name-dialog"
+          aria-labelledby="name-dialog-title"
+          class="m-auto w-full max-w-md rounded-xl border p-0 shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] backdrop:bg-black/40"
         >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          class="rounded-lg px-4 py-2 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))]"
-        >
-          Create canvas
-        </button>
-      </div>
-    </form>
-  </dialog>
-
-  {/* Your name: asked for on your first visit, changed from the button by New canvas */}
-  <dialog
-    id="name-dialog"
-    aria-labelledby="name-dialog-title"
-    class="m-auto w-full max-w-md rounded-xl border p-0 shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] backdrop:bg-black/40"
-  >
-    <form>
-      <div class="border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
-        <h2 id="name-dialog-title" class="text-base font-semibold" data-first-visit-text="Welcome to Studio">Your name</h2>
-        <p class="mt-0.5 text-sm text-[rgb(var(--ec-page-text-muted))]">
-          What should others call you? It's shown by your pointer and your comments on every canvas.
-        </p>
-      </div>
-      <div class="px-5 py-4">
-        <label for="your-name" class="block text-sm font-semibold">Name</label>
-        <input
-          id="your-name"
-          name="name"
-          required
-          maxlength="60"
-          autocomplete="name"
-          placeholder="e.g. Sam"
-          class="mt-2 w-full rounded-lg border px-3 py-2 text-sm shadow-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))] focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)]"
-        />
-        <p class="mt-2 text-xs text-[rgb(var(--ec-page-text-muted))]">Kept in this browser. Change it here any time.</p>
-      </div>
-      <div class="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
-        <button
-          type="button"
-          data-close-dialog
-          class="rounded-lg border px-4 py-2 text-sm font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]"
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          class="rounded-lg px-4 py-2 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))]"
-        >
-          Save
-        </button>
-      </div>
-    </form>
-  </dialog>
+          <form>
+            <div class="border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
+              <h2 id="name-dialog-title" class="text-base font-semibold" data-first-visit-text="Welcome to Studio">
+                Your name
+              </h2>
+              <p class="mt-0.5 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                What should others call you? It's shown by your pointer and your comments on every canvas.
+              </p>
+            </div>
+            <div class="px-5 py-4">
+              <label for="your-name" class="block text-sm font-semibold">
+                Name
+              </label>
+              <input
+                id="your-name"
+                name="name"
+                required
+                maxlength={MAX_NAME_LENGTH}
+                autocomplete="name"
+                placeholder="e.g. Sam"
+                class="mt-2 w-full rounded-lg border px-3 py-2 text-sm shadow-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))] focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)]"
+              />
+              <p class="mt-2 text-xs text-[rgb(var(--ec-page-text-muted))]">Kept in this browser. Change it here any time.</p>
+            </div>
+            <div class="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
+              <button
+                type="button"
+                data-close-dialog
+                class="rounded-lg border px-4 py-2 text-sm font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                class="rounded-lg px-4 py-2 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))]"
+              >
+                Save
+              </button>
+            </div>
+          </form>
+        </dialog>
+      </Fragment>
+    )
+  }
 </VerticalSideBarLayout>
 
 <script>
   import { colorForName, getStoredName, onStoredNameChange, storeName } from '../identity';
+  import { copyCanvasThroughApi, createCanvasThroughApi, deleteCanvasThroughApi } from '../api/client';
 
   // On every visit to the page, including ones the app's client-side navigation swaps in (its scripts run only once)
   const setUp = () => {
@@ -533,9 +629,136 @@ const strokeOf = (preview: NonNullable<CanvasSummary['preview']>, ratio: number)
     const open = () => {
       const by = dialog.querySelector<HTMLInputElement>('input[name="by"]');
       if (by) by.value = yourName ?? '';
+      dialog.querySelector<HTMLElement>('[data-error]')!.hidden = true;
       dialog.showModal();
       dialog.querySelector<HTMLInputElement>('#new-canvas-name')?.focus();
     };
+    // Created through the Studio API, then opened
+    const newCanvasForm = dialog.querySelector<HTMLFormElement>('form')!;
+    newCanvasForm.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const form = new FormData(newCanvasForm);
+      const submit = newCanvasForm.querySelector<HTMLButtonElement>('[type="submit"]')!;
+      const error = newCanvasForm.querySelector<HTMLElement>('[data-error]')!;
+      submit.disabled = true;
+      error.hidden = true;
+      try {
+        const canvas = await createCanvasThroughApi(newCanvasForm.dataset.api!, {
+          title: String(form.get('title') ?? '').trim() || undefined,
+          createdBy: String(form.get('by') ?? '').trim() || undefined,
+        });
+        window.location.assign(canvas.url);
+      } catch (failure) {
+        error.textContent = (failure as Error).message;
+        error.hidden = false;
+        submit.disabled = false;
+      }
+    });
+
+    // A canvas's menu (from the ⋮ on its row): make a copy, or delete it
+    const rowMenu = document.querySelector<HTMLElement>('#canvas-row-menu')!;
+    const copyItem = rowMenu.querySelector<HTMLButtonElement>('[data-menu-copy]')!;
+    const copyLabel = copyItem.querySelector<HTMLElement>('[data-label]')!;
+    const menuError = rowMenu.querySelector<HTMLElement>('[data-error]')!;
+    let menuFor: HTMLButtonElement | undefined;
+    const closeMenu = () => {
+      rowMenu.hidden = true;
+      menuFor?.setAttribute('aria-expanded', 'false');
+      menuFor = undefined;
+    };
+    const openMenu = (button: HTMLButtonElement, fromKeyboard: boolean) => {
+      closeMenu();
+      menuFor = button;
+      button.setAttribute('aria-expanded', 'true');
+      copyItem.disabled = false;
+      copyLabel.textContent = 'Make a copy';
+      menuError.hidden = true;
+      rowMenu.hidden = false;
+      // Under the button, lined up with its right edge (above it if there's no room below)
+      const at = button.getBoundingClientRect();
+      const { width, height } = rowMenu.getBoundingClientRect();
+      const below = at.bottom + 4 + height <= window.innerHeight;
+      rowMenu.style.top = `${below ? at.bottom + 4 : at.top - 4 - height}px`;
+      rowMenu.style.left = `${Math.max(8, at.right - width)}px`;
+      // Opened with the keyboard: its first item, ready to choose
+      if (fromKeyboard) copyItem.focus();
+    };
+    document.querySelectorAll<HTMLButtonElement>('[data-canvas-menu]').forEach((button) =>
+      // A click with no pointer (detail 0) is the keyboard (Enter or Space)
+      button.addEventListener('click', (event) => (menuFor === button ? closeMenu() : openMenu(button, event.detail === 0)))
+    );
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (!rowMenu.hidden && !rowMenu.contains(target) && !menuFor?.contains(target)) closeMenu();
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || rowMenu.hidden) return;
+      const button = menuFor;
+      closeMenu();
+      button?.focus();
+    };
+    window.addEventListener('pointerdown', onPointerDown);
+    window.addEventListener('keydown', onKeyDown);
+    // It's placed for where the row was
+    window.addEventListener('resize', closeMenu);
+    document.querySelector('[data-canvas-list]')?.addEventListener('scroll', closeMenu, { passive: true });
+    document.addEventListener(
+      'astro:before-swap',
+      () => {
+        window.removeEventListener('pointerdown', onPointerDown);
+        window.removeEventListener('keydown', onKeyDown);
+        window.removeEventListener('resize', closeMenu);
+      },
+      { once: true }
+    );
+
+    // Making a copy: it's listed at the top (the canvas changed most recently)
+    copyItem.addEventListener('click', async () => {
+      const canvasId = menuFor?.dataset.canvasMenu;
+      if (!canvasId) return;
+      copyItem.disabled = true;
+      copyLabel.textContent = 'Copying…';
+      menuError.hidden = true;
+      try {
+        await copyCanvasThroughApi(rowMenu.dataset.api!, canvasId, { createdBy: yourName ?? undefined });
+        window.location.reload();
+      } catch (failure) {
+        menuError.textContent = (failure as Error).message;
+        menuError.hidden = false;
+        copyItem.disabled = false;
+        copyLabel.textContent = 'Make a copy';
+      }
+    });
+
+    // Deleting a canvas from the list, after asking
+    const deleteDialog = document.querySelector<HTMLDialogElement>('#delete-canvas-dialog')!;
+    const deleteTitle = deleteDialog.querySelector<HTMLElement>('#delete-canvas-title')!;
+    const deleteError = deleteDialog.querySelector<HTMLElement>('[data-error]')!;
+    const confirmDelete = deleteDialog.querySelector<HTMLButtonElement>('[data-confirm-delete]')!;
+    let deleting: string | undefined;
+    rowMenu.querySelector('[data-menu-delete]')!.addEventListener('click', () => {
+      deleting = menuFor?.dataset.canvasMenu;
+      const title = menuFor?.dataset.canvasTitle;
+      closeMenu();
+      deleteTitle.textContent = `Delete ${title ? `"${title}"` : 'this canvas'}?`;
+      deleteError.hidden = true;
+      confirmDelete.disabled = false;
+      deleteDialog.showModal();
+    });
+    deleteDialog.querySelector('[data-close-dialog]')!.addEventListener('click', () => deleteDialog.close());
+    confirmDelete.addEventListener('click', async () => {
+      if (!deleting) return;
+      confirmDelete.disabled = true;
+      deleteError.hidden = true;
+      try {
+        await deleteCanvasThroughApi(deleteDialog.dataset.api!, deleting);
+        window.location.reload();
+      } catch (failure) {
+        deleteError.textContent = (failure as Error).message;
+        deleteError.hidden = false;
+        confirmDelete.disabled = false;
+      }
+    });
     // Starting a canvas says who started it: ask for a name first if there isn't one yet
     const startCanvas = () => (yourName ? open() : askName(open));
     // A plain button, so Enter in the name creates the canvas
@@ -546,7 +769,7 @@ const strokeOf = (preview: NonNullable<CanvasSummary['preview']>, ratio: number)
         startCanvas();
       })
     );
-    // Opened from a canvas's New canvas (/studio?new=1)
+    // Opened from a link (/studio?new=1), e.g. a canvas's New canvas
     const url = new URL(window.location.href);
     if (url.searchParams.has('new')) {
       url.searchParams.delete('new');