pixelkiln 0.75.0 → 0.77.0

package/dist/client/gallery.js

@@ -39,8 +39,72 @@
     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
   };
+  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 +254,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 +920,98 @@
     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/grid.ts
   function visibleItems() {
     const q = ui.q.trim().toLowerCase();
@@ -1064,11 +1220,15 @@
       if (e.shiftKey) toggleCompare(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."));
@@ -1464,6 +1624,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 +1633,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 +1651,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 +2325,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 +2434,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 +2461,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 +2598,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 +2622,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 +2696,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 +2706,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 +2732,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 +2745,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 +2776,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 +3131,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 +3454,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 +3494,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);
+      };
+      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));
       };
-      zoomBar.append(play);
+      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 +3593,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",
@@ -3907,7 +4187,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 +4250,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 +4295,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 +4307,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 +4324,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 };
@@ -4114,10 +4394,21 @@
       const table = el("div", "studio-price-rows");
       for (const i of mine) {
         const row2 = el("div");
-        row2.append(el("span", "mono", i.key), el("span", null, i.cost ? fmtCost(i.costUnit, i.cost) : "free (mirrored)"));
+        const cost = el("span", null, i.cost ? fmtCost(i.costUnit, i.cost) : i.quote === "live" ? "free" : "free (mirrored)");
+        if (i.quote === "live") {
+          const tag = el("span", "quote-live", "live");
+          tag.title = "PixelLab's own Pro Flash quote; the offline estimate was " + fmtCost(i.costUnit, i.estimate);
+          cost.append(" ", tag);
+        }
+        row2.append(el("span", "mono", i.key), cost);
         table.append(row2);
       }
       priceBox.append(table);
+      if (mine.some((i) => i.quote === "live")) {
+        priceBox.append(el("small", "state-dim", "Rows marked live are PixelLab's current Pro Flash quote, which it calls provisional; the lock records what the finished job billed."));
+      } else if (price.quoteError) {
+        priceBox.append(el("small", "state-dim", "Pro Flash is priced offline: PixelLab's quote could not be had (" + price.quoteError + ")."));
+      }
       const totals = {};
       for (const i of mine) totals[i.costUnit] = (totals[i.costUnit] || 0) + i.cost;
       priceBox.append(el("div", "studio-total", "Total: " + (Object.entries(totals).map(([u, n]) => fmtCost(u, n)).join(" + ") || "free")));
@@ -4255,7 +4546,22 @@
   }
 
   // src/gallery/client/src/main.ts
+  loadPrefs();
   $("refresh").onclick = refresh;
+  $("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;
@@ -4307,7 +4613,7 @@
       }
       return;
     }
-    if (ui.open && !typing) {
+    if (ui.open && !typing && !$("dialog-host").childNodes.length) {
       if (e.key === "ArrowLeft") {
         e.preventDefault();
         step(-1);
@@ -4315,6 +4621,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", () => {