pixelkiln 0.81.0 → 0.83.0

package/dist/client/gallery.css

@@ -525,3 +525,16 @@ body[data-size="l"] .cell { height:210px; }
 .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

@@ -150,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 ?? "" },
@@ -879,6 +887,23 @@
     setTimeout(() => id.focus(), 0);
     return form;
   }
+  function revisionModesFor(item) {
+    if (item.provider !== "pixellab") return [["image-to-image", "edit with a text instruction"]];
+    if (item.outputs.length > 1) {
+      return [
+        ["edit-animation", "one text edit across every frame"],
+        ["reduce-colors", "fewer colours, across every frame"],
+        ["correct-pixelart", "clean up the pixel grid, across every frame"]
+      ];
+    }
+    return [
+      ["image-to-image", "edit with a text instruction"],
+      ["animate", "animate it from a text description"],
+      ["animate-pixminimax", "animate it, holding the facing direction"],
+      ["reduce-colors", "fewer colours, optional dithering"],
+      ["correct-pixelart", "clean up the pixel grid"]
+    ];
+  }
   function newRevisionForm(item) {
     const pr = projectOf(item);
     const form = el("form", "edit");
@@ -889,18 +914,83 @@
     id.required = true;
     id.autocomplete = "off";
     id.pattern = "[^\\/\\\\]+";
+    const modes = revisionModesFor(item);
+    const mode = el("select");
+    for (const [value, label] of modes) mode.append(new Option(value + ": " + label, value));
     const prompt = el("textarea");
-    prompt.placeholder = 'Edit instruction, e.g. "add snow on the roof".';
-    prompt.required = true;
     const strength = el("input");
     strength.type = "number";
     strength.min = "0";
     strength.max = "1";
     strength.step = "0.05";
     strength.placeholder = "provider default";
+    const frames = el("input");
+    frames.type = "number";
+    frames.min = "4";
+    frames.max = "40";
+    frames.step = "2";
+    frames.placeholder = "provider default";
+    const fps = el("input");
+    fps.type = "number";
+    fps.min = "1";
+    fps.max = "60";
+    fps.step = "1";
+    fps.placeholder = "playback rate";
+    const enhance = el("input");
+    enhance.type = "checkbox";
+    const enhanceField = el("label", "field check");
+    enhanceField.append(enhance, el("span", null, "let PixelLab expand the motion description first"));
+    const direction = el("select");
+    for (const d of ["south", "south-east", "east", "north-east", "north", "north-west", "west", "south-west"]) direction.append(new Option(d, d));
+    const numColors = el("input");
+    numColors.type = "number";
+    numColors.min = "2";
+    numColors.max = "256";
+    numColors.step = "1";
+    numColors.placeholder = "PixelLab default";
+    const dithering = el("select");
+    for (const d of ["", "none", "2x2", "4x4", "8x8"]) dithering.append(new Option(d || "default", d));
     const row1 = el("div", "row");
-    row1.append(field("new asset id", id), field("strength", strength, "PixelLab rejects an explicit strength for image-to-image; leave this blank there."));
-    form.append(row1, field("edit instruction", prompt, "The style still adds its prefix and suffix."));
+    row1.append(field("new asset id", id), field("mode", mode));
+    const promptField = field("instruction", prompt);
+    const strengthField = field("strength", strength, "PixelLab rejects an explicit strength for image-to-image; leave this blank there. Optional for correct-pixelart.");
+    const framesField = field("frames", frames, "Even, 4 to 40; animate allows up to 16.");
+    const fpsField = field("fps", fps, "Recorded with the frames; PixelLab does not store one.");
+    const directionField = field("facing", direction, "Holds the sprite's facing while the motion is expanded.");
+    const colorsField = field("colours", numColors);
+    const ditherField = field("dithering", dithering);
+    const grids = el("div", "row");
+    grids.append(framesField, fpsField);
+    const cleanup = el("div", "row");
+    cleanup.append(colorsField, ditherField);
+    form.append(row1, promptField, strengthField, grids, directionField, enhanceField, cleanup);
+    const hints = {
+      "image-to-image": ["edit instruction", "add snow on the roof", "The style still adds its prefix and suffix."],
+      animate: ["motion", "the chest wobbling gently", "Describes the movement; the parent image is the first frame."],
+      "animate-pixminimax": ["motion", "the chest wobbling gently", "Describes the movement; the parent image is the first frame."],
+      "edit-animation": ["edit instruction", "add a red cape", "Applied across every frame in one call, so the change stays consistent."],
+      "reduce-colors": ["note", "optional", "Cleanup only: the text is kept as a label, not sent."],
+      "correct-pixelart": ["note", "optional", "Cleanup only: the text is kept as a label, not sent."]
+    };
+    const sync = () => {
+      const m = mode.value;
+      const [label, placeholder, hint] = hints[m];
+      promptField.querySelector("span").textContent = label;
+      promptField.querySelector("small")?.remove();
+      promptField.append(el("small", null, hint));
+      prompt.placeholder = placeholder;
+      prompt.required = m !== "reduce-colors" && m !== "correct-pixelart";
+      strengthField.hidden = m !== "image-to-image" && m !== "correct-pixelart";
+      grids.hidden = !(m === "animate" || m === "animate-pixminimax" || m === "edit-animation");
+      framesField.hidden = !(m === "animate" || m === "animate-pixminimax");
+      fpsField.hidden = grids.hidden;
+      directionField.hidden = !(m === "animate-pixminimax" && enhance.checked);
+      enhanceField.hidden = !(m === "animate" || m === "animate-pixminimax");
+      cleanup.hidden = m !== "reduce-colors";
+    };
+    mode.onchange = sync;
+    enhance.onchange = sync;
+    sync();
     const actions = el("div", "actions");
     const save = el("button", "primary", "Create revision");
     save.type = "submit";
@@ -918,9 +1008,19 @@
       save.disabled = true;
       msg.className = "msg";
       msg.textContent = "saving…";
-      const revision = { mode: "image-to-image", from: item.assetId };
-      if (strength.value.trim() !== "") revision.strength = Number(strength.value);
-      const asset = { prompt: prompt.value, styles: [item.styleId], revision };
+      const m = mode.value;
+      const revision = { mode: m, from: item.assetId };
+      if ((m === "image-to-image" || m === "correct-pixelart") && strength.value.trim() !== "") revision.strength = Number(strength.value);
+      if ((m === "animate" || m === "animate-pixminimax") && frames.value.trim() !== "") revision.frames = Number(frames.value);
+      if ((m === "animate" || m === "animate-pixminimax" || m === "edit-animation") && fps.value.trim() !== "") revision.fps = Number(fps.value);
+      if ((m === "animate" || m === "animate-pixminimax") && enhance.checked) revision.enhancePrompt = true;
+      if (m === "animate-pixminimax" && enhance.checked) revision.direction = direction.value;
+      if (m === "reduce-colors") {
+        if (numColors.value.trim() !== "") revision.numColors = Number(numColors.value);
+        if (dithering.value) revision.dithering = dithering.value;
+      }
+      const text = prompt.value.trim() || (m === "reduce-colors" ? "reduce colours" : m === "correct-pixelart" ? "correct pixel art" : "");
+      const asset = { prompt: text, styles: [item.styleId], revision };
       try {
         const body = { action: "add-asset", assetId: id.value.trim(), expectedSha256: pr.manifestSha256, asset };
         if (item.project) body.project = item.project;
@@ -4365,6 +4465,12 @@
         if (item.revision.maskSha256) row(dl, "mask sha256", item.revision.maskSha256.slice(0, 16) + "…", { mono: true, copy: item.revision.maskSha256 });
         if (item.revision.strength !== void 0) row(dl, "strength", item.revision.strength);
       }
+      const declared = item.asset && item.asset.revision;
+      if (declared) {
+        for (const [label, key] of [["facing", "direction"], ["looks like", "description"], ["body template", "skeletonTemplate"], ["frames", "frames"], ["fps", "fps"], ["colours", "numColors"], ["dithering", "dithering"]]) {
+          if (declared[key] !== void 0) row(dl, label, declared[key]);
+        }
+      }
       if (item.skeleton) {
         row(dl, "keypoints", item.skeleton.keypointsFile, { mono: true });
         if (item.skeleton.set) {
@@ -4645,6 +4751,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");
@@ -4657,10 +4805,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");
@@ -4734,7 +4884,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");
@@ -4805,7 +4957,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");
@@ -4835,11 +5034,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);
@@ -4847,7 +5050,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);
@@ -4985,6 +5188,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 } : {} });
@@ -5078,11 +5282,84 @@
     };
     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);
   }
@@ -5094,7 +5371,8 @@
       keys: [
         [["/"], "jump to search"],
         [["?"], "this list"],
-        [["Esc"], "close whatever is open: a sheet, the record, the View menu, or select mode"]
+        [["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)"]
       ]
     },
     {
@@ -5162,8 +5440,86 @@
     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;
@@ -5234,6 +5590,11 @@
       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();