pixelkiln 0.80.0 → 0.82.0

package/dist/client/gallery.css

@@ -84,7 +84,7 @@ section.project { border-bottom:1px solid var(--line-strong); background:var(--p
 .card:hover { border-color:var(--line-strong); }
 .card.active { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
 .card.ghost { border-style:dashed; background:transparent; }
-.cell { height:132px; display:grid; place-items:center; background-color:var(--stage-bg);
+.cell { height:132px; flex:none; display:grid; place-items:center; background-color:var(--stage-bg);
   background-image:var(--stage-pattern); background-size:12px 12px; background-position:0 0,6px 6px;
   overflow:hidden; position:relative; padding:8px; }
 .card.ghost .cell { background-image:none; background-color:var(--panel-deep); color:var(--dim); font-size:12px; }
@@ -484,3 +484,57 @@ td.col-on { background:rgba(255,107,53,.08); }
 .dtabs .tablist button.on { color:var(--accent-soft); border-bottom-color:var(--accent); }
 .dtabs .tabpanel[hidden] { display:none; }
 .dtabs .tabpanel > section.meta:first-child { border-top:0; }
+
+/* ---- View menu, card sizes, tag chips, shortcut sheet ---- */
+.bar { flex-wrap:nowrap; }
+.bar > button, .bar > .editing { white-space:nowrap; flex:none; }
+.bar .search { flex:0 1 360px; min-width:180px; }
+.menu { position:relative; }
+.menu > summary { list-style:none; cursor:pointer; padding:6px 11px; border:1px solid var(--line); white-space:nowrap; }
+.menu > summary::-webkit-details-marker { display:none; }
+.menu > summary::after { content:' ▾'; color:var(--dim); font-size:11px; }
+.menu[open] > summary { border-color:var(--accent); color:var(--accent-soft); }
+.menu-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:15; width:300px; display:grid; gap:10px;
+  padding:12px; background:var(--panel); border:1px solid var(--line-strong); box-shadow:0 10px 30px rgba(0,0,0,.45); }
+.menu-row { display:grid; grid-template-columns:78px 1fr; align-items:center; gap:10px; font-size:12.5px; }
+.menu-row > span:first-child { color:var(--dim); font:600 11.5px/1 var(--mono); }
+.menu-row.check { display:flex; gap:8px; color:var(--text); }
+.menu-row[hidden] { display:none; }
+.menu-row select { width:100%; }
+.seg { display:inline-flex; }
+.seg button { padding:4px 12px; font:600 12px/1 var(--mono); }
+.seg button + button { border-left:0; }
+.seg button.on { background:var(--panel-deep); color:var(--accent-soft); border-color:var(--accent); }
+#keys { width:32px; padding:6px 0; font:700 13px/1 var(--mono); }
+body[data-size="s"] .grid { grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:8px; }
+body[data-size="s"] .cell { height:96px; }
+/* A card not yet drawn holds this size (content-visibility), so it has to match the card size. */
+body[data-size="s"] .card { contain-intrinsic-size:auto 132px auto 160px; }
+body[data-size="l"] .card { contain-intrinsic-size:auto 260px auto 275px; }
+body[data-size="s"] .cbody { padding:6px 8px; }
+body[data-size="l"] .grid { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
+body[data-size="l"] .cell { height:210px; }
+.chip.tag { font-family:var(--mono); }
+.keys-sheet { background:var(--panel); border:1px solid var(--accent); width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 64px);
+  overflow-y:auto; padding:16px 18px; display:grid; gap:14px; }
+.keys-head { display:flex; align-items:center; justify-content:space-between; }
+.keys-sheet h3 { margin:0; font:650 14px/1.2 var(--mono); }
+.keys-sheet h4 { margin:0 0 6px; font:650 12px/1 var(--mono); color:var(--accent-soft); }
+.keys-sheet dl { display:grid; grid-template-columns:150px 1fr; gap:6px 16px; margin:0; font-size:13px; }
+.keys-sheet dt { white-space:nowrap; }
+.keys-sheet dd { margin:0; color:var(--dim); }
+.keys-sheet kbd { font:600 11.5px/1 var(--mono); border:1px solid var(--line-strong); border-bottom-width:2px; padding:2px 6px; }
+@media (max-width: 900px) { .bar { flex-wrap:wrap; } }
+
+/* ---- toast, studio template preview ---- */
+.toast { position:fixed; left:22px; bottom:22px; z-index:40; display:flex; align-items:center; gap:10px; max-width:min(560px, calc(100vw - 44px));
+  padding:9px 10px 9px 14px; background:var(--panel); border:1px solid var(--line-strong); border-left:3px solid var(--ok);
+  box-shadow:0 10px 30px rgba(0,0,0,.45); font-size:13px; }
+.toast[hidden] { display:none; }
+.toast.bad { border-left-color:var(--bad); }
+.toast button { padding:4px 10px; font-size:12.5px; }
+.toast button.x { border:0; color:var(--dim); padding:4px 6px; }
+.studio-tpl-preview { display:flex; align-items:center; gap:10px; }
+.studio-tpl-preview[hidden] { display:none; }
+.studio-tpl-preview img { width:48px; height:48px; image-rendering:pixelated; object-fit:contain; background-color:var(--stage-bg); background-image:var(--stage-pattern); background-size:8px 8px; border:1px solid var(--line); }
+.studio-draft { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

package/dist/client/gallery.js

@@ -47,16 +47,26 @@
     onion: false,
     selecting: false,
     selected: /* @__PURE__ */ new Set(),
-    drawerTab: "overview"
+    drawerTab: "overview",
+    tags: /* @__PURE__ */ new Set(),
+    size: "m"
   };
+  var CARD_SIZES = {
+    s: { box: [112, 80], tile: [48, 36] },
+    m: { box: [156, 116], tile: [66, 52] },
+    l: { box: [240, 190], tile: [108, 88] }
+  };
+  var declaredTags = (item) => item.asset && Array.isArray(item.asset.tags) ? item.asset.tags : [];
   var PREFS_KEY = "pixelkiln.gallery.prefs";
-  var PREF_NAMES = ["playLoops", "backdrop", "notify", "onion", "drawerTab"];
+  var PREF_NAMES = ["playLoops", "backdrop", "notify", "onion", "drawerTab", "size"];
   function loadPrefs() {
     try {
       const saved = JSON.parse(localStorage.getItem(PREFS_KEY) || "{}");
       for (const name of PREF_NAMES) if (typeof saved[name] === typeof ui[name]) ui[name] = saved[name];
     } catch {
     }
+    if (!CARD_SIZES[ui.size]) ui.size = "m";
+    document.body.dataset.size = ui.size;
     applyBackdrop();
   }
   function savePrefs() {
@@ -140,7 +150,15 @@
     return s >= 1 ? Math.floor(s) : s;
   };
   var projectOf = (item) => S.snap.workspace ? S.snap.workspace.projects.find((pr) => pr.id === item.project) : S.snap.project;
+  var editHooks = { saved: null };
+  var manifestShaOf = (snap, project) => snap.workspace ? snap.workspace.projects.find((pr) => pr.id === project)?.manifestSha256 ?? null : snap.project?.manifestSha256 ?? null;
   async function postEdit(body) {
+    const before = manifestShaOf(S.snap, body && body.project);
+    const snap = await sendEdit(body);
+    editHooks.saved?.(body, manifestShaOf(snap, body && body.project) !== before);
+    return snap;
+  }
+  async function sendEdit(body) {
     const res = await fetch("/api/edit", {
       method: "POST",
       headers: { "Content-Type": "application/json", "X-Pixelkiln-Session": SESSION ?? "" },
@@ -1197,6 +1215,7 @@
       if (ui.providers.size && !ui.providers.has(item.provider)) return false;
       if (ui.generators.size && !ui.generators.has(item.generator)) return false;
       if (ui.projects.size && !ui.projects.has(item.project ?? "")) return false;
+      if (ui.tags.size && !declaredTags(item).some((t) => ui.tags.has(t))) return false;
       if (!q) return true;
       const hay = [
         item.id,
@@ -1304,7 +1323,19 @@
       chips.append(el("span", "sep"));
       for (const [k, v] of [...byGen].sort()) chips.append(chip(k, v, ui.generators, k));
     }
-    if (ui.states.size || ui.providers.size || ui.generators.size || ui.projects.size || ui.q) {
+    const byTag = /* @__PURE__ */ new Map();
+    for (const item of S.snap.items) for (const t2 of declaredTags(item)) byTag.set(t2, (byTag.get(t2) || 0) + 1);
+    for (const t2 of ui.tags) if (!byTag.has(t2)) byTag.set(t2, 0);
+    if (byTag.size) {
+      chips.append(el("span", "sep"));
+      for (const [k, v] of [...byTag].sort()) {
+        const c = chip("#" + k, v, ui.tags, k);
+        c.classList.add("tag");
+        c.title = "Assets tagged “" + k + "” in the manifest";
+        chips.append(c);
+      }
+    }
+    if (ui.states.size || ui.providers.size || ui.generators.size || ui.projects.size || ui.tags.size || ui.q) {
       const clear = el("button", "chip", "clear filters");
       clear.type = "button";
       clear.onclick = () => clearFilters();
@@ -1316,6 +1347,7 @@
     ui.providers.clear();
     ui.generators.clear();
     ui.projects.clear();
+    ui.tags.clear();
     ui.q = "";
     $("q").value = "";
     render();
@@ -1337,7 +1369,7 @@
         img2.src = o.url;
         img2.alt = o.role || item.assetId;
         img2.loading = "lazy";
-        const s2 = displayScale(w, h, 66, 52);
+        const s2 = displayScale(w, h, ...CARD_SIZES[ui.size].tile);
         if (s2 >= 1) {
           img2.width = w * s2;
           img2.height = h * s2;
@@ -1352,7 +1384,7 @@
     img.src = shown[0].url;
     img.alt = item.assetId;
     img.loading = "lazy";
-    const s = displayScale(w, h, 156, 116);
+    const s = displayScale(w, h, ...CARD_SIZES[ui.size].box);
     if (s >= 1) {
       img.width = w * s;
       img.height = h * s;
@@ -4489,6 +4521,7 @@
     ui.states = new Set(list("state"));
     ui.providers = new Set(list("provider"));
     ui.generators = new Set(list("generator"));
+    ui.tags = new Set(list("tag"));
     ui.projects = new Set(list("project"));
     ui.compare = list("compare").slice(0, 4);
     if (["key", "newest", "oldest", "cost", "size"].includes(params.get("sort") ?? "")) ui.sort = params.get("sort");
@@ -4500,6 +4533,7 @@
     if (ui.states.size) params.set("state", [...ui.states].join(","));
     if (ui.providers.size) params.set("provider", [...ui.providers].join(","));
     if (ui.generators.size) params.set("generator", [...ui.generators].join(","));
+    if (ui.tags.size) params.set("tag", [...ui.tags].join(","));
     if (ui.projects.size) params.set("project", [...ui.projects].join(","));
     if (ui.compare.length) params.set("compare", ui.compare.join(","));
     if (ui.sort !== "key") params.set("sort", ui.sort);
@@ -4619,6 +4653,48 @@
     { id: "pro", label: "pro: described in words, sequential (20-40 per direction)" }
   ];
   var templated = (mode) => mode === "skeleton-v3" || mode === "template";
+  var KNOWN_TEMPLATES = [
+    "walk",
+    "walking-8-frames",
+    "running-8-frames",
+    "breathing-idle",
+    "crouched-walking",
+    "attack",
+    "attack-back",
+    "attack-left",
+    "attack-right",
+    "cross-punch",
+    "backflip",
+    "angry",
+    "bark"
+  ];
+  var draftKey = () => "pixelkiln.studio.draft:" + (S.snap.workspace ? S.snap.workspace.path : S.snap.project ? S.snap.project.manifest : "");
+  function readDraft() {
+    try {
+      const d = JSON.parse(localStorage.getItem(draftKey()) || "null");
+      return d && typeof d === "object" ? d : null;
+    } catch {
+      return null;
+    }
+  }
+  function writeDraft(draft) {
+    try {
+      if (draft) localStorage.setItem(draftKey(), JSON.stringify(draft));
+      else localStorage.removeItem(draftKey());
+    } catch {
+    }
+  }
+  function usedTemplates(projectId) {
+    const out = /* @__PURE__ */ new Map();
+    for (const i of S.snap.items) {
+      const t = i.asset && i.asset.animation && i.asset.animation.template;
+      if (!t || i.project !== projectId) continue;
+      const frames = i.outputs.filter((o) => o.url);
+      if (frames.length > 1 && !out.get(t)) out.set(t, i);
+      else if (!out.has(t)) out.set(t, null);
+    }
+    return out;
+  }
   var idPattern = "[^\\/\\\\:]+";
   function openStudio() {
     const host = $("dialog-host");
@@ -4631,10 +4707,12 @@
     const scrim = el("div", "sheet-scrim");
     const panel = el("div", "sheet studio");
     let closed = false;
+    const previewTimers = /* @__PURE__ */ new Set();
     const close = () => {
       closed = true;
       if (priceTimer) clearTimeout(priceTimer);
       priceSeq++;
+      for (const t of previewTimers) clearInterval(t);
       host.textContent = "";
     };
     const bar = el("div", "rbar");
@@ -4708,7 +4786,9 @@
     const loopList = el("div", "studio-loops");
     const addLoop = el("button", "add", "+ Add a loop");
     addLoop.type = "button";
-    loopsSection.append(el("h3", null, "Loops"), el("small", "state-dim", "Each loop is drawn once per ticked direction; a direction whose mirror is ticked is flipped from it for free."), loopList, addLoop);
+    const templateList = el("datalist");
+    templateList.id = "studio-templates";
+    loopsSection.append(el("h3", null, "Loops"), el("small", "state-dim", "Each loop is drawn once per ticked direction; a direction whose mirror is ticked is flipped from it for free."), loopList, addLoop, templateList);
     const portrait = el("input");
     portrait.type = "checkbox";
     const portraitSize = el("select");
@@ -4779,7 +4859,54 @@
     function syncLoopMode(row2) {
       const t = templated(row2.mode.value);
       row2.what.placeholder = t ? "template, e.g. walk, breathing-idle, running-8-frames" : 'the motion, e.g. "swings a sword overhead"';
-      row2.what.title = t ? "A PixelLab template id" : "What the loop does";
+      row2.what.title = t ? "A PixelLab template id: pick one, or type any id PixelLab has" : "What the loop does";
+      if (t) row2.what.setAttribute("list", templateList.id);
+      else row2.what.removeAttribute("list");
+      syncPreview(row2);
+    }
+    function syncPreview(row2) {
+      const old = row2.preview.__timer;
+      if (old) {
+        clearInterval(old);
+        previewTimers.delete(old);
+      }
+      row2.preview.textContent = "";
+      const name = row2.what.value.trim();
+      const sample = templated(row2.mode.value) && name ? usedTemplates(projectId()).get(name) : null;
+      if (!sample) {
+        row2.preview.hidden = true;
+        return;
+      }
+      const urls = sample.outputs.filter((o) => o.url).map((o) => o.url);
+      const img = el("img");
+      img.src = urls[0];
+      img.alt = name;
+      let i = 0;
+      const timer = setInterval(() => {
+        if (!img.isConnected) {
+          clearInterval(timer);
+          previewTimers.delete(timer);
+          return;
+        }
+        if (!document.hidden) {
+          i = (i + 1) % urls.length;
+          img.src = urls[i];
+        }
+      }, Math.round(1e3 / (sample.fps || 12)));
+      row2.preview.__timer = timer;
+      previewTimers.add(timer);
+      row2.preview.append(img, el("small", "state-dim", name + ", as drawn for " + sample.assetId));
+      row2.preview.hidden = false;
+    }
+    function fillTemplateList() {
+      templateList.textContent = "";
+      const used = usedTemplates(projectId());
+      for (const t of [.../* @__PURE__ */ new Set([...used.keys(), ...KNOWN_TEMPLATES])]) {
+        const o = el("option");
+        o.value = t;
+        if (used.has(t)) o.label = "used in this project";
+        templateList.append(o);
+      }
     }
     function addLoopRow(defaults = {}) {
       const wrap = el("div", "studio-loop");
@@ -4809,11 +4936,15 @@
       }
       const remove = el("button", null, "Remove");
       remove.type = "button";
-      const row2 = { id, mode, what, directions: boxes, wrap };
+      const preview = el("div", "studio-tpl-preview");
+      preview.hidden = true;
+      const row2 = { id, mode, what, directions: boxes, wrap, preview };
+      what.addEventListener("input", () => syncPreview(row2));
       remove.onclick = () => {
         loops2.splice(loops2.indexOf(row2), 1);
         wrap.remove();
         schedulePrice();
+        keepDraft();
       };
       mode.onchange = () => {
         syncLoopMode(row2);
@@ -4821,7 +4952,7 @@
       };
       const line = el("div", "row");
       line.append(field("loop id", id), field("mode", mode), field("template or motion", what));
-      wrap.append(line, dirs, remove);
+      wrap.append(line, preview, dirs, remove);
       loopList.append(wrap);
       loops2.push(row2);
       syncLoopMode(row2);
@@ -4959,6 +5090,7 @@
       const keys = price ? price.items.filter((i) => ours(i.key)).map((i) => i.key) : [];
       try {
         S.snap = await postEdit(request());
+        writeDraft(null);
         const newId = (pid ? pid + ":" : "") + sid + "/" + base;
         if (generate && keys.length) {
           await postGenerate({ keys, ...pid ? { project: pid } : {} });
@@ -5052,19 +5184,265 @@
     };
     form.addEventListener("input", schedulePrice);
     form.addEventListener("change", schedulePrice);
+    const capture = () => ({
+      savedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      project: project.value,
+      style: style.value,
+      styleId: styleId.value,
+      engine: engine.value,
+      size: size.value,
+      directions: directions.value,
+      body: body.value,
+      view: view.value,
+      outDir: outDir.value,
+      outDirTouched,
+      baseId: baseId.value,
+      prompt: prompt.value,
+      reference,
+      loops: loops2.map((r) => ({ id: r.id.value, mode: r.mode.value, what: r.what.value, directions: [...r.directions].filter(([, b]) => b.checked).map(([d]) => d) })),
+      portrait: portrait.checked,
+      portraitSize: portraitSize.value
+    });
+    let draftTimer = null;
+    const keepDraft = () => {
+      if (closed) return;
+      if (draftTimer) clearTimeout(draftTimer);
+      draftTimer = setTimeout(() => {
+        if (!closed) writeDraft(baseId.value.trim() || prompt.value.trim() ? capture() : null);
+      }, 300);
+    };
+    form.addEventListener("input", keepDraft);
+    form.addEventListener("change", keepDraft);
+    addLoop.addEventListener("click", keepDraft);
     fillStyles();
+    fillTemplateList();
     syncEngine();
     syncStyle();
-    addLoopRow({ id: "walk", mode: "skeleton-v3", what: "walk", directions: ["south", "west", "north"] });
-    addLoopRow({ id: "idle", mode: "skeleton-v3", what: "breathing-idle", directions: ["south"] });
+    const draft = readDraft();
+    if (draft && (draft.baseId || draft.prompt)) {
+      const set = (input, value) => {
+        if (typeof value !== "string") return;
+        if (input instanceof HTMLSelectElement && ![...input.options].some((o) => o.value === value)) return;
+        input.value = value;
+      };
+      set(project, draft.project);
+      fillStyles();
+      set(style, draft.style);
+      set(engine, draft.engine);
+      syncEngine();
+      set(styleId, draft.styleId);
+      set(size, draft.size);
+      set(directions, draft.directions);
+      set(body, draft.body);
+      set(view, draft.view);
+      outDirTouched = Boolean(draft.outDirTouched);
+      set(outDir, draft.outDir);
+      set(baseId, draft.baseId);
+      set(prompt, draft.prompt);
+      if (typeof draft.reference === "string") {
+        reference = draft.reference;
+        refField.append(el("small", "state-dim studio-ref-kept", "Using " + draft.reference + ", uploaded with this draft. Choose a file to replace it."));
+      }
+      portrait.checked = Boolean(draft.portrait);
+      set(portraitSize, draft.portraitSize);
+      syncStyle();
+      for (const l of Array.isArray(draft.loops) ? draft.loops : []) addLoopRow({ id: l.id, mode: l.mode, what: l.what, directions: l.directions });
+      const note = el("div", "notice studio-draft");
+      note.append(document.createTextNode("Picked up the draft you left " + (fmtWhen(draft.savedAt) || "earlier") + ". "));
+      const discard = el("button", "linkish", "Start over");
+      discard.type = "button";
+      discard.onclick = () => {
+        writeDraft(null);
+        close();
+        openStudio();
+      };
+      note.append(discard);
+      form.prepend(note);
+    } else {
+      addLoopRow({ id: "walk", mode: "skeleton-v3", what: "walk", directions: ["south", "west", "north"] });
+      addLoopRow({ id: "idle", mode: "skeleton-v3", what: "breathing-idle", directions: ["south"] });
+    }
     updatePrice();
     setTimeout(() => baseId.focus(), 0);
   }
 
+  // src/gallery/client/src/keys.ts
+  var GROUPS = [
+    {
+      title: "Anywhere",
+      keys: [
+        [["/"], "jump to search"],
+        [["?"], "this list"],
+        [["Esc"], "close whatever is open: a sheet, the record, the View menu, or select mode"],
+        [["⌘/ctrl", "Z"], "undo the gallery's last manifest edit (with --edit)"]
+      ]
+    },
+    {
+      title: "On the grid",
+      keys: [
+        [["click"], "open a record"],
+        [["shift", "click"], "add it to a side-by-side comparison (up to four)"],
+        [["ctrl/⌘", "click"], "select it; the bar at the bottom acts on the selection"],
+        [["hover"], "play a loop"]
+      ]
+    },
+    {
+      title: "With a record open",
+      keys: [
+        [["←", "→"], "step through the records in view"],
+        [[",", "."], "step a loop one frame back or on"],
+        [["space"], "play or pause a loop"],
+        [["←", "→"], "switch tabs, once a tab has focus"]
+      ]
+    },
+    {
+      title: "In the family view",
+      keys: [
+        [["drag"], "turn the sprite on the turntable"],
+        [["←", "→"], "turn it a step, once the turntable has focus"]
+      ]
+    }
+  ];
+  function openShortcuts() {
+    const host = $("dialog-host");
+    host.textContent = "";
+    const wrap = el("div", "dialog");
+    wrap.onclick = (e) => {
+      if (e.target === wrap) host.textContent = "";
+    };
+    const box = el("div", "keys-sheet");
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-label", "Keyboard shortcuts");
+    const head = el("div", "keys-head");
+    head.append(el("h3", null, "Keyboard shortcuts"));
+    const close = el("button", null, "Close");
+    close.type = "button";
+    close.onclick = () => {
+      host.textContent = "";
+    };
+    head.append(close);
+    box.append(head);
+    for (const group of GROUPS) {
+      const section2 = el("section");
+      section2.append(el("h4", null, group.title));
+      const dl = el("dl");
+      for (const [keys, what] of group.keys) {
+        const dt = el("dt");
+        keys.forEach((k, i) => {
+          if (i) dt.append(document.createTextNode(k === "click" ? "+" : " "));
+          dt.append(el("kbd", null, k));
+        });
+        dl.append(dt, el("dd", null, what));
+      }
+      section2.append(dl);
+      box.append(section2);
+    }
+    wrap.append(box);
+    host.append(wrap);
+    close.focus();
+  }
+
+  // src/gallery/client/src/undo.ts
+  var lastProject = null;
+  var hideTimer = null;
+  function describe(body) {
+    switch (body.action) {
+      case "batch":
+        return body.edits.length + " changes to the manifest";
+      case "add-style":
+        return "added style " + body.styleId;
+      case "patch-style":
+        return "changed style " + body.styleId;
+      case "add-asset":
+        return "added " + body.assetId;
+      case "patch-asset":
+        return "changed " + body.assetId;
+      case "set-source":
+      case "clear-source":
+        return "changed the source of " + body.assetId;
+      case "create-skeleton-animation":
+        return "added " + body.assetId;
+      case "start-edit":
+        return "started a hand edit of " + body.assetId;
+      case "save-edit":
+        return "saved a hand edit of " + body.assetId;
+      case "detach-edit":
+        return "detached the hand edit of " + body.assetId;
+      default:
+        return "the manifest changed";
+    }
+  }
+  function toast(text, canUndo, tone = "") {
+    const host = $("toast");
+    host.textContent = "";
+    host.className = "toast" + (tone ? " " + tone : "");
+    host.append(el("span", null, text));
+    if (canUndo) {
+      const b = el("button", null, "Undo");
+      b.type = "button";
+      b.title = "Put the manifest back as it was (⌘Z / ctrl+Z)";
+      b.onclick = () => void undoLast();
+      host.append(b);
+    }
+    const x = el("button", "x", "×");
+    x.type = "button";
+    x.setAttribute("aria-label", "Dismiss");
+    x.onclick = () => {
+      host.hidden = true;
+    };
+    host.append(x);
+    host.hidden = false;
+    if (hideTimer) clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      host.hidden = true;
+    }, 12e3);
+  }
+  function installUndo() {
+    editHooks.saved = (body, changed) => {
+      if (!body || body.action === "undo-edit" || !changed) return;
+      lastProject = body.project ?? null;
+      toast("Saved: " + describe(body) + ".", true);
+    };
+  }
+  async function undoLast() {
+    if (!EDITABLE) return;
+    const expected = manifestShaOf(S.snap, lastProject);
+    if (!expected) return;
+    const body = { action: "undo-edit", expectedSha256: expected };
+    if (lastProject) body.project = lastProject;
+    try {
+      S.snap = await postEdit(body);
+      render();
+      toast("Undone. The manifest is back as it was before that edit.", true);
+    } catch (err) {
+      toast(/nothing to undo/.test(err.message) ? "Nothing left to undo." : "Could not undo: " + err.message, false, "bad");
+    }
+  }
+
   // src/gallery/client/src/main.ts
   loadPrefs();
+  installUndo();
   $("refresh").onclick = refresh;
   $("select").onclick = () => setSelecting(!ui.selecting);
+  $("keys").onclick = openShortcuts;
+  var syncSize = () => {
+    for (const b of $("size").querySelectorAll("button")) b.classList.toggle("on", b.dataset.size === ui.size);
+  };
+  for (const b of $("size").querySelectorAll("button")) {
+    b.onclick = () => {
+      if (!CARD_SIZES[b.dataset.size]) return;
+      ui.size = b.dataset.size;
+      document.body.dataset.size = ui.size;
+      savePrefs();
+      syncSize();
+      render();
+    };
+  }
+  syncSize();
+  document.addEventListener("click", (e) => {
+    const menu = $("view-menu");
+    if (menu.open && !menu.contains(e.target)) menu.open = false;
+  });
   $("playloops").checked = ui.playLoops;
   $("playloops").onchange = (e) => {
     setPlayLoops(e.target.checked);
@@ -5109,7 +5487,23 @@
       $("q").focus();
       return;
     }
+    if (e.key === "?" && !typing) {
+      e.preventDefault();
+      openShortcuts();
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z" && !typing && EDITABLE && !$("dialog-host").childNodes.length) {
+      e.preventDefault();
+      void undoLast();
+      return;
+    }
     if (e.key === "Escape") {
+      if ($("view-menu").open) {
+        e.preventDefault();
+        $("view-menu").open = false;
+        $("view-menu").querySelector("summary").focus();
+        return;
+      }
       if (typing && document.activeElement?.id === "q") {
         document.activeElement.blur();
         return;