pixelkiln 0.76.0 → 0.78.0

package/dist/client/gallery.js

@@ -39,8 +39,74 @@
     compare: [],
     compareZoom: "auto",
     logs: /* @__PURE__ */ new Set(),
-    settled: /* @__PURE__ */ new Set()
+    settled: /* @__PURE__ */ new Set(),
+    playLoops: false,
+    backdrop: "checker",
+    notify: false,
+    fps: null,
+    onion: false,
+    selecting: false,
+    selected: /* @__PURE__ */ new Set()
   };
+  var PREFS_KEY = "pixelkiln.gallery.prefs";
+  var PREF_NAMES = ["playLoops", "backdrop", "notify", "onion"];
+  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 {
+    }
+    applyBackdrop();
+  }
+  function savePrefs() {
+    try {
+      localStorage.setItem(PREFS_KEY, JSON.stringify(Object.fromEntries(PREF_NAMES.map((n) => [n, ui[n]]))));
+    } catch {
+    }
+  }
+  var HEX = /^#[0-9a-f]{6}$/i;
+  function applyBackdrop() {
+    const custom = HEX.test(ui.backdrop);
+    document.body.dataset.backdrop = custom ? "custom" : ui.backdrop;
+    document.body.style.setProperty("--stage-bg", custom ? ui.backdrop : "");
+    if (!custom) document.body.style.removeProperty("--stage-bg");
+  }
+  function backdropControl(onChange) {
+    const wrap = el("span", "backdrop");
+    wrap.title = "What sprites sit on: judge them against dark, light, or your game's own background";
+    const options = [["checker", "Transparency grid"], ["dark", "Dark"], ["light", "Light"]];
+    const buttons = [];
+    const picker = el("input");
+    picker.type = "color";
+    picker.setAttribute("aria-label", "Custom backdrop colour");
+    const sync = () => {
+      for (const b of buttons) b.classList.toggle("on", b.dataset.value === ui.backdrop);
+      picker.classList.toggle("on", HEX.test(ui.backdrop));
+      if (HEX.test(ui.backdrop)) picker.value = ui.backdrop;
+    };
+    const set = (value) => {
+      ui.backdrop = value;
+      applyBackdrop();
+      savePrefs();
+      for (const other of document.querySelectorAll(".backdrop")) other.__sync?.();
+      onChange?.();
+    };
+    for (const [value, label] of options) {
+      const b = el("button", "bd-" + value);
+      b.type = "button";
+      b.dataset.value = value;
+      b.title = label;
+      b.setAttribute("aria-label", "Backdrop: " + label);
+      b.onclick = () => set(value);
+      buttons.push(b);
+      wrap.append(b);
+    }
+    picker.oninput = () => set(picker.value.toLowerCase());
+    wrap.append(picker);
+    wrap.__sync = sync;
+    sync();
+    return wrap;
+  }
   var formRegion = () => !ui.editing ? null : /^(new|style|cand):/.test(ui.editing) ? "main" : "drawer";
   var $ = (id) => document.getElementById(id);
   var el = (tag, cls, text) => {
@@ -190,7 +256,7 @@
       };
       zoomBar.append(b);
     }
-    bar.append(zoomBar);
+    bar.append(zoomBar, backdropControl());
     const zoom = ui.compareZoom === "auto" ? auto : ui.compareZoom === "fit" ? Math.min(auto, 1) : Number(ui.compareZoom);
     const body = el("div", "compare-body");
     const table = el("table");
@@ -856,6 +922,272 @@
     return form;
   }
 
+  // src/gallery/client/src/motion.ts
+  var loops = /* @__PURE__ */ new Map();
+  var raf = null;
+  var t0 = 0;
+  var seen = typeof IntersectionObserver === "function" ? new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      const loop = loops.get(e.target);
+      if (loop) loop.visible = e.isIntersecting;
+    }
+    wake();
+  }) : null;
+  function registerLoop(img, urls, fps, hoverTarget) {
+    if (urls.length < 2) return;
+    const loop = { img, urls, fps: fps || 12, index: 0, visible: !seen, hovered: false, first: img.src };
+    loops.set(img, loop);
+    seen?.observe(img);
+    let warmed = false;
+    const warm = () => {
+      if (warmed) return;
+      warmed = true;
+      for (const u of urls) {
+        const p = new Image();
+        p.src = u;
+      }
+    };
+    hoverTarget.addEventListener("pointerenter", () => {
+      warm();
+      loop.hovered = true;
+      wake();
+    });
+    hoverTarget.addEventListener("pointerleave", () => {
+      loop.hovered = false;
+      rest(loop);
+    });
+    hoverTarget.addEventListener("focus", () => {
+      warm();
+      loop.hovered = true;
+      wake();
+    });
+    hoverTarget.addEventListener("blur", () => {
+      loop.hovered = false;
+      rest(loop);
+    });
+    if (ui.playLoops) warm();
+  }
+  function pruneLoops() {
+    for (const [img, loop] of loops) if (!img.isConnected) {
+      seen?.unobserve(img);
+      loops.delete(img);
+      void loop;
+    }
+  }
+  function setPlayLoops(on) {
+    ui.playLoops = on;
+    if (on) for (const loop of loops.values()) for (const u of loop.urls) {
+      const p = new Image();
+      p.src = u;
+    }
+    else for (const loop of loops.values()) if (!loop.hovered) rest(loop);
+    wake();
+  }
+  function rest(loop) {
+    if (ui.playLoops) return;
+    loop.index = 0;
+    if (loop.img.src !== loop.first) loop.img.src = loop.first;
+  }
+  function wake() {
+    if (raf === null && typeof requestAnimationFrame === "function") {
+      t0 = performance.now();
+      raf = requestAnimationFrame(tick);
+    }
+  }
+  function tick(now) {
+    raf = null;
+    let active = false;
+    const seconds = Math.max(0, (now - t0) / 1e3);
+    for (const [img, loop] of loops) {
+      if (!img.isConnected) continue;
+      if (!loop.hovered && !(ui.playLoops && loop.visible)) continue;
+      active = true;
+      const i = Math.floor(seconds * loop.fps) % loop.urls.length;
+      if (i !== loop.index) {
+        loop.index = i;
+        img.src = loop.urls[i];
+      }
+    }
+    if (active && !document.hidden) raf = requestAnimationFrame(tick);
+  }
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) wake();
+  });
+
+  // src/gallery/client/src/selection.ts
+  var selectedItems = () => S.snap.items.filter((i) => ui.selected.has(i.id));
+  var regenerable = (i) => i.declared && i.currentSpecHash !== null && i.state === "ok";
+  function setSelecting(on) {
+    ui.selecting = on;
+    if (!on) ui.selected.clear();
+    $("select").textContent = on ? "Done selecting" : "Select";
+    $("select").classList.toggle("on", on);
+    render();
+  }
+  function toggleSelected(id) {
+    if (!ui.selecting) {
+      ui.selecting = true;
+      $("select").textContent = "Done selecting";
+      $("select").classList.add("on");
+    }
+    if (ui.selected.has(id)) ui.selected.delete(id);
+    else ui.selected.add(id);
+    const c = document.querySelector('.card[data-key="' + CSS.escape(id) + '"]');
+    if (c) {
+      c.classList.toggle("selected", ui.selected.has(id));
+      c.setAttribute("aria-pressed", String(ui.selected.has(id)));
+    }
+    if (!document.querySelector(".card .sel")) render();
+    else {
+      refreshSelectAll();
+      renderSelectionBar();
+    }
+  }
+  function selectAllButton(items) {
+    const b = el("button", "select-all");
+    b.type = "button";
+    const ids = items.map((i) => i.id);
+    b.__ids = ids;
+    const label = () => {
+      b.textContent = ids.every((id) => ui.selected.has(id)) ? "Clear " + ids.length : "Select all " + ids.length;
+    };
+    b.__label = label;
+    label();
+    b.onclick = () => {
+      const all = ids.every((id) => ui.selected.has(id));
+      for (const id of ids) {
+        if (all) ui.selected.delete(id);
+        else ui.selected.add(id);
+      }
+      for (const id of ids) {
+        const c = document.querySelector('.card[data-key="' + CSS.escape(id) + '"]');
+        if (c) {
+          c.classList.toggle("selected", ui.selected.has(id));
+          c.setAttribute("aria-pressed", String(ui.selected.has(id)));
+        }
+      }
+      refreshSelectAll();
+      renderSelectionBar();
+    };
+    return b;
+  }
+  function refreshSelectAll() {
+    for (const b of document.querySelectorAll(".select-all")) b.__label?.();
+  }
+  function renderSelectionBar() {
+    const bar = $("selbar");
+    bar.textContent = "";
+    for (const id of [...ui.selected]) if (!S.snap.items.some((i) => i.id === id)) ui.selected.delete(id);
+    bar.hidden = !ui.selecting;
+    if (!ui.selecting) return;
+    const items = selectedItems();
+    const projects = new Set(items.map((i) => i.project));
+    const oneProject = projects.size <= 1;
+    const project = items.length ? items[0].project : null;
+    bar.append(el("b", null, items.length ? items.length + " selected" : "Click cards to select them"));
+    const acts = el("div", "acts");
+    const add = (label, run, opts = {}) => {
+      const b = el("button", opts.primary ? "primary" : null, label);
+      b.type = "button";
+      b.disabled = Boolean(opts.disabled);
+      if (opts.title) b.title = opts.title;
+      b.onclick = run;
+      acts.append(b);
+      return b;
+    };
+    const crossProject = "Select within one project: a job and an edit each belong to one";
+    if (GENERATION) {
+      const todo = items.filter(actionable);
+      if (todo.length) add("Generate " + todo.length + " · " + priceOf(todo), () => generateDialog(todo, { project }), { primary: true, disabled: !oneProject, title: oneProject ? "One job: parents first, then everything drawn from them" : crossProject });
+      const redo = items.filter(regenerable);
+      if (redo.length) add("Regenerate " + redo.length + " · " + priceOf(redo), () => generateDialog(redo, { project, force: true }), { disabled: !oneProject, title: oneProject ? "Replace these with new generations; each old one stays in its history" : crossProject });
+    }
+    const shown = items.filter((i) => i.outputs.some((o) => o.url));
+    if (shown.length >= 2) {
+      add("Compare" + (shown.length > 4 ? " first 4" : ""), () => {
+        ui.compare = shown.slice(0, 4).map((i) => i.id);
+        openCompare();
+      });
+    }
+    if (EDITABLE && items.length) {
+      const taggable = items.filter((i) => i.declaredAs && projectOf(i)?.manifestSha256);
+      const tag = el("input");
+      tag.type = "text";
+      tag.placeholder = "tag";
+      tag.setAttribute("aria-label", "Tag to add or remove");
+      tag.pattern = "[^,]+";
+      const addTag = el("button", null, "Add tag");
+      addTag.type = "button";
+      const dropTag = el("button", null, "Remove tag");
+      dropTag.type = "button";
+      addTag.disabled = dropTag.disabled = !taggable.length || !oneProject;
+      addTag.title = dropTag.title = !oneProject ? crossProject : taggable.length < items.length ? "Undeclared records have no manifest entry to tag" : "One manifest write for every selected asset";
+      const run = (adding) => retag(taggable, tag.value.trim(), adding, tag);
+      addTag.onclick = () => run(true);
+      dropTag.onclick = () => run(false);
+      tag.onkeydown = (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          run(true);
+        }
+      };
+      const box = el("span", "tagbox");
+      box.append(tag, addTag, dropTag);
+      acts.append(box);
+    }
+    add("Clear", () => {
+      ui.selected.clear();
+      render();
+    }, { disabled: !items.length });
+    add("Done", () => setSelecting(false));
+    bar.append(acts);
+    const msg = el("span", "msg");
+    msg.id = "selmsg";
+    bar.append(msg);
+  }
+  async function retag(items, tag, adding, input) {
+    const msg = $("selmsg");
+    if (!tag || tag.includes(",")) {
+      msg.className = "msg bad";
+      msg.textContent = "Type one tag (no commas).";
+      input.focus();
+      return;
+    }
+    const byId = /* @__PURE__ */ new Map();
+    for (const i of items) {
+      if (byId.has(i.declaredAs)) continue;
+      const now = i.asset && i.asset.tags || [];
+      const next = adding ? now.includes(tag) ? now : [...now, tag] : now.filter((t) => t !== tag);
+      if (next.length !== now.length) byId.set(i.declaredAs, next);
+    }
+    if (!byId.size) {
+      msg.className = "msg";
+      msg.textContent = adding ? "They all have it already." : "None of them has it.";
+      return;
+    }
+    const pr = projectOf(items[0]);
+    const body = {
+      action: "batch",
+      expectedSha256: pr.manifestSha256,
+      edits: [...byId].map(([assetId, tags]) => ({ action: "patch-asset", assetId, patch: { tags } }))
+    };
+    if (items[0].project) body.project = items[0].project;
+    msg.className = "msg";
+    msg.textContent = "saving…";
+    try {
+      S.snap = await postEdit(body);
+      render();
+      const after = $("selmsg");
+      if (after) {
+        after.className = "msg ok";
+        after.textContent = (adding ? "Tagged " : "Untagged ") + byId.size + (byId.size === 1 ? " asset" : " assets") + " “" + tag + "”.";
+      }
+    } catch (err) {
+      msg.className = "msg bad";
+      msg.textContent = err.status === 409 ? "The manifest changed on disk; refresh and try again." : err.message;
+    }
+  }
+
   // src/gallery/client/src/grid.ts
   function visibleItems() {
     const q = ui.q.trim().toLowerCase();
@@ -1031,7 +1363,9 @@
   }
   function card(item) {
     const slot = ui.compare.indexOf(item.id);
-    const c = el("button", "card" + (item.outputs.some((o) => o.url) ? "" : " ghost") + (ui.open === item.id ? " active" : "") + (slot >= 0 ? " compared" : ""));
+    const picked = ui.selected.has(item.id);
+    const c = el("button", "card" + (item.outputs.some((o) => o.url) ? "" : " ghost") + (ui.open === item.id ? " active" : "") + (slot >= 0 ? " compared" : "") + (picked ? " selected" : ""));
+    if (ui.selecting) c.setAttribute("aria-pressed", String(picked));
     c.type = "button";
     c.dataset.key = item.id;
     c.setAttribute("aria-label", item.id + ", " + item.state + (slot >= 0 ? ", in comparison" : ""));
@@ -1060,15 +1394,21 @@
       cell.append(badge);
     }
     c.append(cell, body);
+    if (ui.selecting) cell.append(el("span", "sel", "✓"));
     c.onclick = (e) => {
       if (e.shiftKey) toggleCompare(item.id);
+      else if (ui.selecting || e.metaKey || e.ctrlKey) toggleSelected(item.id);
       else openItem(item.id);
     };
+    const still = cell.querySelector(":scope > img");
+    const shown = item.edit && item.editStatus === "edited" && item.edits.every((e) => e.url) ? item.edits : item.outputs.filter((o) => o.url);
+    if (still && isFrameSet(item) && shown.length > 1) registerLoop(still, shown.map((o) => o.url), item.fps || 12, c);
     return c;
   }
   function renderMain(items) {
     const root = $("root");
     root.textContent = "";
+    pruneLoops();
     if (!S.snap.items.length) {
       const e = el("div", "empty");
       e.append(el("p", null, "Nothing has been generated for this project yet."));
@@ -1093,7 +1433,7 @@
     const sections = [];
     for (const pr of projects) {
       const inProject = pr ? shown.filter((i) => i.project === pr.id) : shown;
-      const styleSections = ui.group === "style" ? S.snap.styles.filter((s) => !pr || s.project === pr.id).map((s) => ({ style: s, items: inProject.filter((i) => i.styleId === s.id) })).filter((s) => s.items.length) : inProject.length ? [{ style: null, items: inProject }] : [];
+      const styleSections = ui.group === "style" || ui.group === "family" ? S.snap.styles.filter((s) => !pr || s.project === pr.id).map((s) => ({ style: s, items: inProject.filter((i) => i.styleId === s.id) })).filter((s) => s.items.length) : inProject.length ? [{ style: null, items: inProject }] : [];
       if (pr) sections.push({ project: pr, style: null, items: null, count: inProject.length });
       sections.push(...styleSections);
     }
@@ -1150,6 +1490,7 @@
           r.onclick = () => generateDialog(refreshable, { project: s.project, refresh: true });
           tools.append(r);
         }
+        if (ui.selecting && ui.group !== "family") tools.append(selectAllButton(sec.items));
         const styleKey = "style:" + (s.project || "") + ":" + s.id;
         if (EDITABLE && s.outDir) {
           const es = el("button", null, ui.editing === styleKey ? "Cancel" : "Edit style");
@@ -1174,9 +1515,12 @@
         if (ui.editing === styleKey) wrap.append(styleForm(s));
         if (ui.editing === addKey) wrap.append(addAssetForm(s));
       }
-      const grid = el("div", "grid");
-      for (const item of sec.items) grid.append(card(item));
-      wrap.append(grid);
+      if (ui.group === "family") wrap.append(...familyGroups(sec.items));
+      else {
+        const grid = el("div", "grid");
+        for (const item of sec.items) grid.append(card(item));
+        wrap.append(grid);
+      }
       root.append(wrap);
     }
     if (hidden) {
@@ -1192,6 +1536,93 @@
       root.append(more);
     }
   }
+  var KIND_ORDER = { base: 0, state: 1, animation: 2, portrait: 3, outfit: 4 };
+  var TURN = ["south", "south-east", "east", "north-east", "north", "north-west", "west", "south-west"];
+  function familyOrder(a, b) {
+    const ka = KIND_ORDER[a.character.kind] ?? 9, kb = KIND_ORDER[b.character.kind] ?? 9;
+    if (ka !== kb) return ka - kb;
+    if (a.character.kind === "animation") {
+      const la = loopName(a), lb = loopName(b);
+      if (la !== lb) return la < lb ? -1 : 1;
+      return TURN.indexOf(a.character.direction) - TURN.indexOf(b.character.direction);
+    }
+    return a.assetId < b.assetId ? -1 : a.assetId > b.assetId ? 1 : 0;
+  }
+  function familyGroups(items) {
+    const families = /* @__PURE__ */ new Map();
+    const loose = [];
+    for (const item of items) {
+      const root = item.character ? familyRoot(item) : null;
+      if (!root) {
+        loose.push(item);
+        continue;
+      }
+      if (!families.has(root.id)) families.set(root.id, { root, members: [] });
+      families.get(root.id).members.push(item);
+    }
+    const out = [];
+    for (const { root, members } of families.values()) {
+      members.sort(familyOrder);
+      const group = el("div", "fam-group");
+      const head = el("div", "fam-head");
+      head.append(el("b", "mono", root.assetId));
+      const counts = {};
+      for (const m of members) counts[m.state] = (counts[m.state] || 0) + 1;
+      const tally = el("span", "fam-tally");
+      const loops2 = new Set(members.filter((m) => m.character.kind === "animation").map(loopName)).size;
+      tally.append(document.createTextNode(members.length + (members.length === 1 ? " asset" : " assets") + (loops2 ? " · " + loops2 + (loops2 === 1 ? " loop" : " loops") : "")));
+      for (const [state, n] of Object.entries(counts)) {
+        const t = el("span", "st");
+        t.append(el("i", "dot " + STATE_TONE[state]), document.createTextNode(n + " " + state));
+        tally.append(t);
+      }
+      head.append(tally);
+      const tools = el("div", "tools");
+      if (ui.selecting) tools.append(selectAllButton(members));
+      const view = el("button", null, "Family view");
+      view.type = "button";
+      view.onclick = () => openFamily(root);
+      tools.append(view);
+      const everything = familyMembers(root);
+      const todo = everything.filter(actionable);
+      if (GENERATION && todo.length) {
+        const g = el("button", "primary", "Generate " + todo.length + " · " + priceOf(todo));
+        g.type = "button";
+        g.title = "One job for the family: parents first, then everything drawn from them";
+        g.onclick = () => generateDialog(todo, { project: root.project });
+        tools.append(g);
+      }
+      head.append(tools);
+      const grid = el("div", "grid");
+      for (const m of members) grid.append(card(m));
+      group.append(head, grid);
+      out.push(group);
+    }
+    if (loose.length) {
+      const group = el("div", "fam-group loose");
+      if (families.size) {
+        const head = el("div", "fam-head");
+        head.append(el("b", null, "Not in a family"), el("span", "fam-tally", loose.length + (loose.length === 1 ? " asset" : " assets")));
+        if (ui.selecting) {
+          const tools = el("div", "tools");
+          tools.append(selectAllButton(loose));
+          head.append(tools);
+        }
+        group.append(head);
+      }
+      const grid = el("div", "grid");
+      for (const item of loose) grid.append(card(item));
+      group.append(grid);
+      out.push(group);
+    }
+    return out;
+  }
+  var actionable = (item) => item.declared && item.currentSpecHash !== null && ["missing", "stale", "failed"].includes(item.state);
+  function priceOf(items) {
+    const totals = {};
+    for (const i of items) if (i.estimatedCost !== null) totals[i.costUnit] = (totals[i.costUnit] || 0) + i.estimatedCost;
+    return Object.entries(totals).map(([unit, n]) => fmtCost(unit, Math.round(n * 100) / 100)).join(" + ") || "free";
+  }
   function projectHeader(pr, count) {
     const head = el("section", "project");
     const line = el("div", "phead");
@@ -1464,6 +1895,7 @@
       if (!ACTIVE_PHASES.has(job.phase) && !ui.settled.has(job.id)) {
         ui.settled.add(job.id);
         changed = true;
+        notifyJob(job);
         const open = ui.open && S.snap.items.find((i) => i.id === ui.open);
         if (open && job.project === open.project && job.keys.includes(open.key)) {
           ui.notice = { id: open.id, text: job.phase === "failed" ? (JOB_VERB[job.mode] || job.mode).replace(/ing$/, "ing") + " this asset failed: " + (job.error || "see the log above") : job.mode === "generate" ? "Regenerated. The new result is on disk and recorded as this generation." : job.mode === "restore" ? "Restored. The recorded bytes are back on disk." : job.mode === "revert" ? "Brought back generation #" + job.revert + ". The one it replaced is now #1 in the list below." : job.mode === "refresh" ? job.counts.downloaded ? "Pulled the upstream change; the lockfile records the new bytes." : "Nothing changed upstream; the file was left alone." : job.mode === "resume" && job.counts.downloaded ? "Done. The file on disk and the record now match the manifest." : "Done." };
@@ -1472,6 +1904,7 @@
       if (job.phase === "review" && !ui.settled.has(job.id + ":review")) {
         ui.settled.add(job.id + ":review");
         changed = true;
+        notifyJob(job);
       }
     }
     if (changed) refresh();
@@ -1489,6 +1922,34 @@
     clearTimeout(jobsTimer ?? void 0);
     if (active) jobsTimer = setTimeout(pollJobs, 2e3);
   }
+  var DONE_VERB = { generate: "Generated", resume: "Resumed", refresh: "Pulled upstream changes for", restore: "Restored", revert: "Brought back a generation of" };
+  async function enableNotifications() {
+    if (typeof Notification === "undefined") return false;
+    if (Notification.permission === "granted") return true;
+    if (Notification.permission === "denied") {
+      $("note").textContent = " Notifications are blocked for this page in the browser's site settings.";
+      return false;
+    }
+    try {
+      return await Notification.requestPermission() === "granted";
+    } catch {
+      return false;
+    }
+  }
+  function notifyJob(job) {
+    if (!ui.notify || !document.hidden || typeof Notification === "undefined" || Notification.permission !== "granted") return;
+    const n = job.keys.length;
+    const what = n === 1 ? job.keys[0] : n + " assets";
+    const body = job.phase === "review" ? job.review.length + " waiting for you to pick a candidate" : job.phase === "failed" ? "failed: " + (job.error || "see the log") : (DONE_VERB[job.mode] || "Finished") + " " + what;
+    try {
+      const note = new Notification("pixelkiln" + (job.project ? " · " + job.project : ""), { body, tag: "pixelkiln-job-" + job.id });
+      note.onclick = () => {
+        window.focus();
+        note.close();
+      };
+    } catch {
+    }
+  }
   function renderJobs() {
     const host = $("jobs");
     host.textContent = "";
@@ -2135,6 +2596,7 @@
   var SPEEDS = [0.5, 1, 2];
   var SPIN_MS = 420;
   var DRAG_STEP_PX = 28;
+  var CELL_PX = 68;
   var F = null;
   var reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
   var byKey = (project, key) => S.snap.items.find((i) => i.key === key && i.project === project);
@@ -2243,7 +2705,7 @@
       t.append(el("i", "dot " + STATE_TONE[state]), document.createTextNode(n + " " + state));
       tally.append(t);
     }
-    bar.append(tally);
+    bar.append(tally, backdropControl());
     if (GENERATION) {
       const todo = members.filter((m) => m.declared && m.currentSpecHash !== null && ["missing", "stale", "failed"].includes(m.state));
       if (todo.length) {
@@ -2270,7 +2732,7 @@
     host.append(scrim, panel);
     panel.scrollTop = scroll;
     highlight(F.direction);
-    if (F.raf === null) F.raf = requestAnimationFrame(tick);
+    if (F.raf === null) F.raf = requestAnimationFrame(tick2);
   }
   function turntable(root, turnables, source, order) {
     const wrap = el("section", "turntable");
@@ -2407,11 +2869,11 @@
     return wrap;
   }
   function loopGrid(root, members, order) {
-    const loops = members.filter((m) => m.character.kind === "animation");
+    const loops2 = members.filter((m) => m.character.kind === "animation");
     const wrap = el("section", "loop-grid");
     const head = el("div", "lg-head");
-    head.append(el("h3", null, loops.length ? "Loops" : "No loops yet"));
-    if (loops.length) {
+    head.append(el("h3", null, loops2.length ? "Loops" : "No loops yet"));
+    if (loops2.length) {
       const play = el("button", null, F.playing ? "Pause" : "Play");
       play.type = "button";
       play.onclick = () => {
@@ -2431,14 +2893,14 @@
       head.append(speed);
     }
     wrap.append(head);
-    if (!loops.length) {
+    if (!loops2.length) {
       wrap.append(el("p", "state-dim", EDITABLE ? "Add one from the base's drawer (+ New animation), or draft a whole character in the studio." : "None declared."));
       return wrap;
     }
-    const used = /* @__PURE__ */ new Set([...order, ...loops.map((l) => l.character.direction).filter(Boolean)]);
+    const used = /* @__PURE__ */ new Set([...order, ...loops2.map((l) => l.character.direction).filter(Boolean)]);
     const columns = COMPASS.filter((d) => used.has(d));
     const rows = /* @__PURE__ */ new Map();
-    for (const l of loops) {
+    for (const l of loops2) {
       const k = (l.character.parentKey || "") + "|" + loopName(l);
       if (!rows.has(k)) rows.set(k, []);
       rows.get(k).push(l);
@@ -2505,6 +2967,7 @@
     img.alt = item.assetId;
     const urls = frameUrls(item);
     if (urls.length) {
+      fitCell(img, item.width, item.height);
       img.src = urls[0];
       for (const u of urls) {
         const p = new Image();
@@ -2514,6 +2977,7 @@
     } else {
       const ghost = rotationUrl(parent, direction);
       if (ghost) {
+        fitCell(img, parent.width, parent.height);
         img.src = ghost;
         b.classList.add("ghost");
       } else img.hidden = true;
@@ -2539,6 +3003,7 @@
       img.alt = item.assetId;
       const urls = frameUrls(item);
       if (urls.length) {
+        fitCell(img, item.width, item.height);
         img.src = urls[0];
         if (urls.length > 1) F.anims.push({ img, urls, fps: item.fps || 12, index: 0 });
       } else img.hidden = true;
@@ -2551,11 +3016,16 @@
     wrap.append(strip);
     return wrap;
   }
+  function fitCell(img, width, height) {
+    const s = displayScale(width, height, CELL_PX, CELL_PX);
+    img.width = Math.max(1, Math.round(width * s));
+    img.height = Math.max(1, Math.round(height * s));
+  }
   function highlight(direction) {
     if (!F) return;
     for (const [d, nodes] of F.columns) for (const n of nodes) n.classList.toggle("col-on", d === direction);
   }
-  function tick(now) {
+  function tick2(now) {
     if (!F) return;
     if (!F.panel || !F.panel.isConnected) {
       stopFamily();
@@ -2577,7 +3047,7 @@
       const order = source ? turnOrder(source) : COMPASS;
       F.turn(order[(order.indexOf(F.direction) + 1) % order.length]);
     }
-    F.raf = requestAnimationFrame(tick);
+    F.raf = requestAnimationFrame(tick2);
   }
   var familyState = () => F && { rootId: F.rootId, source: F.source, direction: F.direction, playing: F.playing, anims: F.anims.length };
 
@@ -2932,11 +3402,11 @@
     for (const [i, pose] of [set.firstFrameKeypoints, ...set.frames].entries()) {
       const where = i === 0 ? "the starting pose" : "frame " + i;
       if (!Array.isArray(pose) || pose.length !== 18) return where + " needs all 18 joints";
-      const seen = /* @__PURE__ */ new Set();
+      const seen2 = /* @__PURE__ */ new Set();
       for (const j of pose) {
         if (!SKELETON_LABELS.includes(j && j.label)) return where + ': "' + (j && j.label) + `" is not one of PixelLab's 18 joints`;
-        if (seen.has(j.label)) return where + ': "' + j.label + '" appears twice';
-        seen.add(j.label);
+        if (seen2.has(j.label)) return where + ': "' + j.label + '" appears twice';
+        seen2.add(j.label);
         if (!(j.x >= 0 && j.x <= 1 && j.y >= 0 && j.y <= 1)) return where + ": " + j.label + " must sit inside the image (x and y 0 to 1)";
       }
     }
@@ -3255,25 +3725,34 @@
       host.append(preview);
       return;
     }
-    const member = shown[Math.min(ui.member, shown.length - 1)] || shown[0];
-    const frameSet = isFrameSet(item);
+    let idx = Math.min(ui.member, shown.length - 1);
+    const frameSet = isFrameSet(item) && shown.length > 1;
     const w = item.width, h = item.height;
     const box = Math.min(window.innerWidth, 540) - 62;
     const auto = displayScale(w, h, box, Math.min(window.innerHeight * 0.55, 560));
     const zoom = ui.zoom === "auto" ? auto : ui.zoom === "fit" ? Math.min(auto, 1) : Number(ui.zoom);
-    const img = el("img");
-    img.src = member.url;
-    img.alt = member.role || item.assetId;
-    if (zoom >= 1) {
-      img.width = Math.round(w * zoom);
-      img.height = Math.round(h * zoom);
-    } else {
-      img.style.maxWidth = "100%";
-      img.style.maxHeight = "55vh";
-      img.style.width = "auto";
-      img.style.height = "auto";
-    }
-    preview.append(img);
+    const sized = (img2) => {
+      if (zoom >= 1) {
+        img2.width = Math.round(w * zoom);
+        img2.height = Math.round(h * zoom);
+      } else {
+        img2.style.maxWidth = "100%";
+        img2.style.maxHeight = "55vh";
+        img2.style.width = "auto";
+        img2.style.height = "auto";
+      }
+      return img2;
+    };
+    const stack = el("div", "stack");
+    const img = sized(el("img"));
+    img.src = shown[idx].url;
+    img.alt = shown[idx].role || item.assetId;
+    const onion = sized(el("img", "onion"));
+    onion.alt = "";
+    onion.setAttribute("aria-hidden", "true");
+    onion.hidden = !(frameSet && ui.onion);
+    stack.append(onion, img);
+    preview.append(stack);
     const zoomBar = el("div", "zoom");
     zoomBar.append(el("span", null, "zoom"));
     for (const z of ["fit", 1, 2, 4, 8]) {
@@ -3286,34 +3765,98 @@
       zoomBar.append(b);
     }
     const label = el("span", "grow", w + "×" + h + (zoom >= 1 ? " at " + zoom + "×" : " fitted"));
-    zoomBar.append(label);
-    if (frameSet && shown.length > 1) {
-      const fps = item.fps || 12;
-      const play = el("button", null, "Play " + fps + " fps");
+    zoomBar.append(label, backdropControl());
+    host.append(preview, zoomBar);
+    let strip = null;
+    const show = (i) => {
+      idx = (i + shown.length) % shown.length;
+      ui.member = idx;
+      img.src = shown[idx].url;
+      img.alt = shown[idx].role || item.assetId;
+      if (frameSet) {
+        onion.src = shown[(idx - 1 + shown.length) % shown.length].url;
+        scrub.value = String(idx);
+        count.textContent = idx + 1 + " / " + shown.length;
+      }
+      if (strip) for (const [j, b] of [...strip.querySelectorAll("button")].entries()) b.classList.toggle("on", j === idx);
+    };
+    const scrub = el("input");
+    const count = el("span", "count");
+    if (frameSet) {
+      const bar = el("div", "frames-bar");
+      const own = item.fps || 12;
+      const fps = () => ui.fps || own;
+      const prev = el("button", null, "◀");
+      prev.type = "button";
+      prev.title = "Previous frame (,)";
+      const next = el("button", null, "▶");
+      next.type = "button";
+      next.title = "Next frame (.)";
+      const play = el("button", "play", "Play");
       play.type = "button";
-      let idx = shown.indexOf(member);
-      play.onclick = () => {
-        if (ui.playing) {
-          stopPlayback();
-          play.textContent = "Play " + fps + " fps";
-          return;
-        }
+      play.title = "Play or pause (space)";
+      const pause = () => {
+        stopPlayback();
+        play.textContent = "Play";
+      };
+      const start = () => {
+        stopPlayback();
         play.textContent = "Pause";
         ui.playing = setInterval(() => {
-          if (document.hidden) return;
-          idx = (idx + 1) % shown.length;
-          img.src = shown[idx].url;
-          label.textContent = (shown[idx].role || "frame " + (idx + 1)) + " · " + w + "×" + h + (zoom >= 1 ? " at " + zoom + "×" : "");
-          for (const [i, b] of [...host.querySelectorAll(".members button")].entries()) b.classList.toggle("on", i === idx);
-        }, Math.max(16, Math.round(1e3 / fps)));
+          if (!document.hidden) show(idx + 1);
+        }, Math.max(16, Math.round(1e3 / fps())));
+      };
+      play.onclick = () => ui.playing ? pause() : start();
+      prev.onclick = () => {
+        pause();
+        show(idx - 1);
       };
-      zoomBar.append(play);
+      next.onclick = () => {
+        pause();
+        show(idx + 1);
+      };
+      scrub.type = "range";
+      scrub.min = "0";
+      scrub.max = String(shown.length - 1);
+      scrub.step = "1";
+      scrub.setAttribute("aria-label", "Frame");
+      scrub.oninput = () => {
+        pause();
+        show(Number(scrub.value));
+      };
+      const speed = el("select");
+      speed.setAttribute("aria-label", "Frames per second");
+      const rates = [.../* @__PURE__ */ new Set([own, 4, 6, 8, 10, 12, 15, 24])].sort((a, b) => a - b);
+      for (const r of rates) speed.append(new Option(r + " fps" + (r === own ? " (its own)" : ""), String(r)));
+      speed.value = String(fps());
+      speed.onchange = () => {
+        ui.fps = Number(speed.value) === own ? null : Number(speed.value);
+        if (ui.playing) start();
+      };
+      const onionBox = el("label", "chip");
+      const onionToggle = el("input");
+      onionToggle.type = "checkbox";
+      onionToggle.checked = ui.onion;
+      onionToggle.onchange = () => {
+        ui.onion = onionToggle.checked;
+        onion.hidden = !ui.onion;
+        savePrefs();
+      };
+      onionBox.title = "Show the previous frame faintly under this one";
+      onionBox.append(onionToggle, document.createTextNode(" onion skin"));
+      bar.append(prev, play, next, scrub, count, speed, onionBox);
+      host.append(bar);
+      host.__frames = { step: (n) => {
+        pause();
+        show(idx + n);
+      }, toggle: () => play.click() };
+    } else {
+      host.__frames = null;
     }
-    host.append(preview, zoomBar);
     if (shown.length > 1) {
-      const strip = el("div", "members");
+      strip = el("div", "members");
       shown.forEach((o, i) => {
-        const b = el("button", o === member ? "on" : null);
+        const b = el("button", i === idx ? "on" : null);
         b.type = "button";
         const t = el("img");
         t.src = o.url;
@@ -3321,13 +3864,21 @@
         t.loading = "lazy";
         b.append(t, el("span", null, o.role || String(i + 1)));
         b.onclick = () => {
-          ui.member = i;
-          renderPreview(item, host);
+          if (frameSet) {
+            stopPlayback();
+          }
+          show(i);
+          if (!frameSet) renderPreview(item, host);
         };
         strip.append(b);
       });
       host.append(strip);
     }
+    show(idx);
+  }
+  function drawerFrames() {
+    const host = document.querySelector(".drawer .dbody > div");
+    return host ? host.__frames ?? null : null;
   }
   var CHARACTER_KIND = {
     base: "base",
@@ -3698,7 +4249,7 @@
     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");
-    if (["style", "none"].includes(params.get("group") ?? "")) ui.group = params.get("group");
+    if (["style", "family", "none"].includes(params.get("group") ?? "")) ui.group = params.get("group");
   }
   function writeUrlState() {
     const params = new URLSearchParams();
@@ -3771,6 +4322,7 @@
     renderMain(visibleItems());
     renderDrawer();
     renderTray();
+    renderSelectionBar();
     refreshFamily();
   }
   function renderQuietly() {
@@ -3780,6 +4332,7 @@
     if (region !== "main") renderMain(visibleItems());
     if (region !== "drawer") renderDrawer();
     renderTray();
+    renderSelectionBar();
     refreshFamily();
   }
 
@@ -3907,7 +4460,7 @@
     const refField = field("own sprite (optional)", refInput, "A south-facing sprite at the style's size: PixelLab rotates it instead of drawing one, and only the rotations are billed.");
     refField.append(refPreview);
     baseSection.append(baseRow, field("description", prompt), refField);
-    const loops = [];
+    const loops2 = [];
     const loopsSection = el("section", "studio-part");
     const loopList = el("div", "studio-loops");
     const addLoop = el("button", "add", "+ Add a loop");
@@ -3970,7 +4523,7 @@
       newStyle.hidden = !isNewStyle();
       styleId.required = isNewStyle();
       if (!outDirTouched) outDir.value = "art/" + (styleId.value.trim() || "characters");
-      for (const row2 of loops) syncLoopDirections(row2);
+      for (const row2 of loops2) syncLoopDirections(row2);
     }
     function syncLoopDirections(row2) {
       const allowed = styleDirections();
@@ -4015,7 +4568,7 @@
       remove.type = "button";
       const row2 = { id, mode, what, directions: boxes, wrap };
       remove.onclick = () => {
-        loops.splice(loops.indexOf(row2), 1);
+        loops2.splice(loops2.indexOf(row2), 1);
         wrap.remove();
         schedulePrice();
       };
@@ -4027,7 +4580,7 @@
       line.append(field("loop id", id), field("mode", mode), field("template or motion", what));
       wrap.append(line, dirs, remove);
       loopList.append(wrap);
-      loops.push(row2);
+      loops2.push(row2);
       syncLoopMode(row2);
       syncLoopDirections(row2);
     }
@@ -4044,7 +4597,7 @@
       }
       const base = baseId.value.trim();
       out.push({ action: "add-asset", assetId: base, asset: { prompt: prompt.value.trim(), styles: [sid], ...reference ? { reference } : {} } });
-      for (const row2 of loops) {
+      for (const row2 of loops2) {
         const chosen = [...row2.directions].filter(([, box]) => box.checked).map(([d]) => d);
         if (!row2.id.value.trim() || !chosen.length) continue;
         const animation = { of: base, directions: chosen };
@@ -4266,7 +4819,23 @@
   }
 
   // src/gallery/client/src/main.ts
+  loadPrefs();
   $("refresh").onclick = refresh;
+  $("select").onclick = () => setSelecting(!ui.selecting);
+  $("playloops").checked = ui.playLoops;
+  $("playloops").onchange = (e) => {
+    setPlayLoops(e.target.checked);
+    savePrefs();
+  };
+  $("backdrop-slot").replaceWith(backdropControl());
+  $("notify-chip").hidden = !GENERATION || typeof Notification === "undefined";
+  $("notify").checked = ui.notify && typeof Notification !== "undefined" && Notification.permission === "granted";
+  $("notify").onchange = async (e) => {
+    const on = e.target.checked && await enableNotifications();
+    e.target.checked = on;
+    ui.notify = on;
+    savePrefs();
+  };
   $("studio").hidden = !EDITABLE;
   $("studio").onclick = openStudio;
   var autoTimer = null;
@@ -4315,10 +4884,15 @@
       if (ui.open) {
         e.preventDefault();
         closeItem();
+        return;
+      }
+      if (ui.selecting) {
+        e.preventDefault();
+        setSelecting(false);
       }
       return;
     }
-    if (ui.open && !typing) {
+    if (ui.open && !typing && !$("dialog-host").childNodes.length) {
       if (e.key === "ArrowLeft") {
         e.preventDefault();
         step(-1);
@@ -4326,6 +4900,14 @@
         e.preventDefault();
         step(1);
       }
+      const frames = drawerFrames();
+      if (frames && (e.key === "," || e.key === ".")) {
+        e.preventDefault();
+        frames.step(e.key === "," ? -1 : 1);
+      } else if (frames && e.key === " " && !/^(BUTTON|A)$/.test(document.activeElement?.tagName || "")) {
+        e.preventDefault();
+        frames.toggle();
+      }
     }
   });
   document.addEventListener("visibilitychange", () => {