pixelkiln 0.70.1 → 0.71.0

package/dist/client/gallery.css

@@ -326,3 +326,18 @@ form.edit .pal { margin-top:4px; }
 .poses svg.pose { width:112px; height:112px; background:var(--panel-deep); border:1px solid var(--line); image-rendering:pixelated; }
 .poses figcaption { font:10.5px/1 var(--mono); color:var(--dim); }
 textarea.mono { font-family:var(--mono); font-size:11.5px; }
+.pose-editor { display:grid; grid-template-columns:minmax(200px, 320px) 1fr; gap:12px; align-items:start; margin-top:10px; }
+.pose-stage svg.stage { width:100%; aspect-ratio:1; background:var(--panel-deep); border:1px solid var(--line); image-rendering:pixelated; touch-action:none; display:block; }
+.pose-stage svg.stage:focus { outline:1px solid var(--accent); }
+.pose-stage .joint { cursor:grab; }
+.pose-stage .joint:active { cursor:grabbing; }
+.pose-side { display:grid; gap:8px; align-content:start; }
+.pose-tools { display:flex; flex-wrap:wrap; gap:6px; }
+.pose-tools button { font:11.5px/1 var(--mono); padding:6px 8px; }
+.pose-status { font:11.5px/1.45 var(--mono); color:var(--dim); }
+.pose-strip { grid-column:1 / -1; }
+.pose-strip button { flex:none; padding:3px; display:grid; gap:3px; justify-items:center; }
+.pose-strip button.on { border-color:var(--accent); }
+.pose-strip svg.pose { width:64px; height:64px; }
+.pose-strip span { font:10.5px/1 var(--mono); color:var(--dim); }
+@media (max-width: 640px) { .pose-editor { grid-template-columns:1fr; } }

package/dist/client/gallery.js

@@ -2107,6 +2107,291 @@
     return row2;
   }
 
+  // src/gallery/client/src/pose-editor.ts
+  var MIN_FRAMES = 3;
+  var MAX_FRAMES = 15;
+  var HISTORY = 100;
+  var NUDGE = 1 / 128;
+  var PLAY_MS = 125;
+  var clone = (set) => JSON.parse(JSON.stringify(set));
+  var clamp = (v) => Math.min(1, Math.max(0, Math.round(v * 1e3) / 1e3));
+  var mirrorLabel = (label) => label.startsWith("RIGHT ") ? "LEFT " + label.slice(6) : label.startsWith("LEFT ") ? "RIGHT " + label.slice(5) : label;
+  function poseEditor(initial, imageUrl, onChange) {
+    let set = clone(initial);
+    let index = set.frames.length ? 1 : 0;
+    let selected = null;
+    let playing = null;
+    const past = [];
+    const future = [];
+    const root = el("div", "pose-editor");
+    const stageWrap = el("div", "pose-stage");
+    const side = el("div", "pose-side");
+    const status = el("div", "pose-status");
+    const strip = el("div", "poses pose-strip");
+    const tools = el("div", "pose-tools");
+    side.append(tools, status);
+    root.append(stageWrap, side, strip);
+    const poseAt = (i) => i === 0 ? set.firstFrameKeypoints : set.frames[i - 1];
+    const count = () => set.frames.length + 1;
+    const name = (i) => i === 0 ? "start" : "frame " + i;
+    const remember = (before) => {
+      past.push(before);
+      if (past.length > HISTORY) past.shift();
+      future.length = 0;
+    };
+    const commit = (before) => {
+      if (JSON.stringify(set) === before) return;
+      remember(before);
+      onChange(clone(set));
+      drawStrip();
+      drawTools();
+    };
+    const edit = (change) => {
+      const before = JSON.stringify(set);
+      change();
+      commit(before);
+      drawStage();
+    };
+    let svg;
+    let joints = /* @__PURE__ */ new Map();
+    let bones = [];
+    function drawStage() {
+      stageWrap.textContent = "";
+      svg = svgEl("svg", { viewBox: "0 0 1 1", class: "pose stage", tabindex: 0 });
+      svg.setAttribute("aria-label", "Pose " + name(index) + ": drag joints, arrow keys nudge the selected one");
+      if (imageUrl) svg.append(svgEl("image", { href: imageUrl, x: 0, y: 0, width: 1, height: 1, preserveAspectRatio: "none" }));
+      if (index > 0) {
+        const prev = new Map(poseAt(index - 1).map((j) => [j.label, j]));
+        for (const [a, b] of SKELETON_BONES) {
+          const p = prev.get(a), q = prev.get(b);
+          if (p && q) svg.append(svgEl("line", { x1: p.x, y1: p.y, x2: q.x, y2: q.y, stroke: boneColor(b), "stroke-width": 0.012, opacity: 0.3, "stroke-linecap": "round" }));
+        }
+      }
+      const at = new Map(poseAt(index).map((j) => [j.label, j]));
+      joints = /* @__PURE__ */ new Map();
+      bones = [];
+      for (const [a, b] of SKELETON_BONES) {
+        const p = at.get(a), q = at.get(b);
+        if (!p || !q) continue;
+        const lines = [
+          svgEl("line", { x1: p.x, y1: p.y, x2: q.x, y2: q.y, stroke: "#000", "stroke-width": 0.03, "stroke-linecap": "round" }),
+          svgEl("line", { x1: p.x, y1: p.y, x2: q.x, y2: q.y, stroke: boneColor(b), "stroke-width": 0.015, "stroke-linecap": "round" })
+        ];
+        svg.append(...lines);
+        bones.push({ a, b, lines });
+      }
+      for (const j of poseAt(index)) {
+        const on = j.label === selected;
+        const ring = svgEl("circle", { cx: j.x, cy: j.y, r: on ? 0.034 : 0.026, fill: "#000" });
+        const dot = svgEl("circle", { cx: j.x, cy: j.y, r: on ? 0.022 : 0.016, fill: on ? "#fff" : boneColor(j.label) });
+        const hit = svgEl("circle", { cx: j.x, cy: j.y, r: 0.045, fill: "transparent", class: "joint" });
+        const title = svgEl("title", {});
+        title.textContent = j.label;
+        hit.append(title);
+        hit.addEventListener("pointerdown", (e) => startDrag(e, j.label));
+        svg.append(ring, dot, hit);
+        joints.set(j.label, [ring, dot, hit]);
+      }
+      svg.addEventListener("keydown", onKey);
+      stageWrap.append(svg);
+      drawStatus();
+    }
+    function place(label, x, y) {
+      for (const c of joints.get(label) || []) {
+        c.setAttribute("cx", String(x));
+        c.setAttribute("cy", String(y));
+      }
+      for (const bone of bones) {
+        for (const line of bone.lines) {
+          if (bone.a === label) {
+            line.setAttribute("x1", String(x));
+            line.setAttribute("y1", String(y));
+          }
+          if (bone.b === label) {
+            line.setAttribute("x2", String(x));
+            line.setAttribute("y2", String(y));
+          }
+        }
+      }
+    }
+    function toUnit(e) {
+      const m = svg.getScreenCTM();
+      if (!m) return { x: 0, y: 0 };
+      const p = new DOMPoint(e.clientX, e.clientY).matrixTransform(m.inverse());
+      return { x: clamp(p.x), y: clamp(p.y) };
+    }
+    function startDrag(e, label) {
+      if (playing) return;
+      e.preventDefault();
+      const before = JSON.stringify(set);
+      const joint = poseAt(index).find((j) => j.label === label);
+      const target = e.target;
+      target.setPointerCapture(e.pointerId);
+      const wasSelected = selected;
+      selected = label;
+      if (wasSelected !== label) {
+        for (const [l, [ring, dot]] of joints) {
+          const on = l === label;
+          ring.setAttribute("r", String(on ? 0.034 : 0.026));
+          dot.setAttribute("r", String(on ? 0.022 : 0.016));
+          dot.setAttribute("fill", on ? "#fff" : boneColor(l));
+        }
+      }
+      const move = (ev) => {
+        const { x, y } = toUnit(ev);
+        joint.x = x;
+        joint.y = y;
+        place(label, x, y);
+        drawStatus();
+      };
+      const end = () => {
+        target.removeEventListener("pointermove", move);
+        target.removeEventListener("pointerup", end);
+        target.removeEventListener("pointercancel", end);
+        commit(before);
+        svg.focus({ preventScroll: true });
+      };
+      target.addEventListener("pointermove", move);
+      target.addEventListener("pointerup", end);
+      target.addEventListener("pointercancel", end);
+      drawStatus();
+    }
+    function onKey(e) {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
+        e.preventDefault();
+        if (e.shiftKey) redo();
+        else undo();
+        return;
+      }
+      if (e.key === ",") {
+        e.preventDefault();
+        go(index - 1);
+        return;
+      }
+      if (e.key === ".") {
+        e.preventDefault();
+        go(index + 1);
+        return;
+      }
+      const step2 = (e.shiftKey ? 4 : 1) * NUDGE;
+      const d = { ArrowLeft: [-step2, 0], ArrowRight: [step2, 0], ArrowUp: [0, -step2], ArrowDown: [0, step2] }[e.key];
+      if (!d || !selected || playing) return;
+      e.preventDefault();
+      const label = selected;
+      edit(() => {
+        const joint = poseAt(index).find((j) => j.label === label);
+        joint.x = clamp(joint.x + d[0]);
+        joint.y = clamp(joint.y + d[1]);
+      });
+      svg.focus({ preventScroll: true });
+    }
+    function undo() {
+      const before = past.pop();
+      if (!before) return;
+      future.push(JSON.stringify(set));
+      set = JSON.parse(before);
+      index = Math.min(index, count() - 1);
+      onChange(clone(set));
+      redraw();
+    }
+    function redo() {
+      const next = future.pop();
+      if (!next) return;
+      past.push(JSON.stringify(set));
+      set = JSON.parse(next);
+      index = Math.min(index, count() - 1);
+      onChange(clone(set));
+      redraw();
+    }
+    function go(i) {
+      if (i < 0 || i >= count()) return;
+      index = i;
+      redraw();
+      svg.focus({ preventScroll: true });
+    }
+    const button = (label, title, onClick, disabled = false) => {
+      const b = el("button", null, label);
+      b.type = "button";
+      b.title = title;
+      b.disabled = disabled || !!playing && label !== "Stop";
+      b.onclick = onClick;
+      return b;
+    };
+    function drawTools() {
+      tools.textContent = "";
+      const frameOnly = index === 0;
+      tools.append(
+        button("◀", "Previous pose (,)", () => go(index - 1), index === 0),
+        button("▶", "Next pose (.)", () => go(index + 1), index >= count() - 1),
+        button(playing ? "Stop" : "Play", "Play the frames in a loop", () => togglePlay(), set.frames.length < 2 && !playing),
+        button("Copy previous", "Replace this pose with the one before it", () => edit(() => {
+          set.frames[index - 1] = poseAt(index - 1).map((j) => ({ ...j }));
+        }), frameOnly),
+        button("Mirror", "Flip this pose left to right, swapping left and right joints", () => edit(() => {
+          const flipped = poseAt(index).map((j) => ({ ...j, label: mirrorLabel(j.label), x: clamp(1 - j.x) }));
+          if (index === 0) set.firstFrameKeypoints = flipped;
+          else set.frames[index - 1] = flipped;
+        })),
+        button("+ Frame", "Add a copy of this pose after it", () => edit(() => {
+          set.frames.splice(index, 0, poseAt(index).map((j) => ({ ...j })));
+          index += 1;
+        }), set.frames.length >= MAX_FRAMES),
+        button("− Frame", "Remove this frame", () => edit(() => {
+          set.frames.splice(index - 1, 1);
+          index = Math.min(index, count() - 1);
+        }), frameOnly || set.frames.length <= MIN_FRAMES),
+        button("Undo", "Undo (Ctrl+Z)", undo, !past.length),
+        button("Redo", "Redo (Ctrl+Shift+Z)", redo, !future.length)
+      );
+    }
+    function togglePlay() {
+      if (playing) {
+        clearInterval(playing);
+        playing = null;
+        redraw();
+        return;
+      }
+      let i = index > 0 ? index : 1;
+      playing = setInterval(() => {
+        if (!root.isConnected) {
+          clearInterval(playing);
+          playing = null;
+          return;
+        }
+        i = i >= count() - 1 ? 1 : i + 1;
+        index = i;
+        drawStage();
+        drawStrip();
+      }, PLAY_MS);
+      drawTools();
+    }
+    function drawStatus() {
+      const j = selected && poseAt(index).find((x) => x.label === selected);
+      status.textContent = name(index) + " of " + set.frames.length + " frames" + (j ? " · " + j.label + " (" + j.x.toFixed(3) + ", " + j.y.toFixed(3) + ")" : " · drag a joint to move it") + (index === 0 ? " · the starting pose must match the sprite as drawn" : "");
+    }
+    function drawStrip() {
+      strip.textContent = "";
+      for (let i = 0; i < count(); i++) {
+        const cell = el("button", i === index ? "on" : null);
+        cell.type = "button";
+        cell.title = name(i);
+        cell.append(poseSvg(poseAt(i), imageUrl, i > 0), el("span", null, i === 0 ? "start" : String(i)));
+        const target = i;
+        cell.onclick = () => {
+          if (!playing) go(target);
+        };
+        strip.append(cell);
+      }
+    }
+    function redraw() {
+      drawStage();
+      drawStrip();
+      drawTools();
+    }
+    redraw();
+    return root;
+  }
+
   // src/gallery/client/src/skeleton.ts
   var SKELETON_BONES = [
     ["NOSE", "NECK"],
@@ -2260,7 +2545,7 @@
     const preview = el("div");
     const row2 = el("div", "row");
     row2.append(field("poses from", source), field("keypoints file", file, "Inside the project. The manifest records this path."));
-    form.append(row2, estimateRow, field("poses (JSON)", json, "Move joints frame by frame; x and y are fractions of the sprite."), overwriteField, status, preview);
+    form.append(row2, estimateRow, field("poses (JSON)", json, "Drag joints in the editor below, or edit the JSON; x and y are fractions of the sprite."), overwriteField, status, preview);
     const imageUrl = displayUrl(item);
     let set = null;
     const showPoses = () => {
@@ -2286,7 +2571,10 @@
         set = null;
         return;
       }
-      preview.append(poseStrip(set, imageUrl));
+      preview.append(poseEditor(set, imageUrl, (next) => {
+        set = next;
+        json.value = JSON.stringify(next, null, 2);
+      }));
     };
     const sync = () => {
       const pasting = source.value !== "file";
@@ -2373,6 +2661,51 @@
     setTimeout(() => id.focus(), 0);
     return form;
   }
+  function skeletonPoseForm(item, parentUrl) {
+    const form = el("form", "edit");
+    form.append(el("h3", null, "Edit poses of " + item.assetId));
+    let draft = item.skeleton.set;
+    let dirty = false;
+    const msg = el("span", "msg");
+    const save = el("button", "primary", "Save poses");
+    save.type = "submit";
+    save.disabled = true;
+    form.append(poseEditor(draft, parentUrl, (next) => {
+      draft = next;
+      dirty = true;
+      save.disabled = false;
+      msg.className = "msg";
+      msg.textContent = "unsaved";
+    }));
+    form.append(el("small", "state-dim", "Saving rewrites " + item.skeleton.keypointsFile + "; the animation is then stale until it is generated again."));
+    const cancel = el("button", null, "Cancel");
+    cancel.type = "button";
+    cancel.onclick = () => {
+      if (dirty && !confirm("Discard the pose changes?")) return;
+      ui.editing = null;
+      renderDrawer();
+    };
+    const actions = el("div", "actions");
+    actions.append(save, cancel, msg);
+    form.append(actions);
+    form.onsubmit = async (e) => {
+      e.preventDefault();
+      save.disabled = true;
+      msg.className = "msg";
+      msg.textContent = "saving…";
+      const body = { action: "update-skeleton-keypoints", styleId: item.styleId, assetId: item.assetId, expectedSha256: item.skeleton.sha256, set: draft };
+      if (item.project) body.project = item.project;
+      try {
+        S.snap = await postEdit(body);
+        ui.editing = null;
+        ui.notice = { id: item.id, text: "Poses saved to " + item.skeleton.keypointsFile + ". " + nextStep().replace("it", "the animation") };
+        render();
+      } catch (err) {
+        showSaveError(msg, save, err);
+      }
+    };
+    return form;
+  }
 
   // src/gallery/client/src/drawer.ts
   function row(dl, label, value, opts = {}) {
@@ -2737,8 +3070,23 @@
         row(dl, "keypoints", item.skeleton.keypointsFile, { mono: true });
         if (item.skeleton.set) {
           const parent = S.snap.items.find((i) => i.key === item.revisionParentKey && i.project === item.project);
-          s.append(poseStrip(item.skeleton.set, displayUrl(parent)));
-          s.append(el("small", "state-dim", "The starting pose must match the sprite; each frame is drawn over a dimmed copy. `pixelkiln skeleton-preview " + item.assetId + "` writes the same sheet as a PNG."));
+          const posesKey = "poses:" + item.id;
+          if (ui.editing === posesKey) {
+            s.append(skeletonPoseForm(item, displayUrl(parent)));
+          } else {
+            s.append(poseStrip(item.skeleton.set, displayUrl(parent)));
+            s.append(el("small", "state-dim", "The starting pose must match the sprite; each frame is drawn over a dimmed copy. `pixelkiln skeleton-preview " + item.assetId + "` writes the same sheet as a PNG."));
+            if (canEdit && item.skeleton.sha256) {
+              const b = el("button", "add", "Edit poses");
+              b.type = "button";
+              b.onclick = () => {
+                ui.editing = posesKey;
+                ui.notice = null;
+                renderDrawer();
+              };
+              s.append(b);
+            }
+          }
         } else {
           row(dl, "poses", el("span", "state-warn", "the keypoints file does not exist yet"));
         }

package/dist/index.cjs

@@ -15947,6 +15947,15 @@ var SkeletonAnimationRequestSchema = import_zod10.z.object({
   /** Replace an existing `keypointsFile` with `set`. */
   overwrite: import_zod10.z.boolean().optional()
 }).strict();
+var SkeletonKeypointsUpdateSchema = import_zod10.z.object({
+  action: import_zod10.z.literal("update-skeleton-keypoints"),
+  project: import_zod10.z.string().min(1).optional(),
+  styleId: import_zod10.z.string().min(1),
+  assetId: import_zod10.z.string().min(1),
+  /** The file's SHA-256 when the page loaded it; anything else on disk is a concurrent edit. */
+  expectedSha256: import_zod10.z.string().regex(/^[0-9a-f]{64}$/),
+  set: SkeletonSetSchema
+}).strict();
 async function createSkeletonAnimation(manifestPath, request) {
   const root = import_node_path29.default.dirname(import_node_path29.default.resolve(manifestPath));
   const file = import_node_path29.default.resolve(root, request.keypointsFile);
@@ -15992,6 +16001,26 @@ async function createSkeletonAnimation(manifestPath, request) {
     throw error;
   }
 }
+async function updateSkeletonKeypoints(ctx, request) {
+  const key = lockKey(request.styleId, request.assetId);
+  const spec = ctx.specs.find((candidate) => lockKey(candidate.styleId, candidate.assetId) === key);
+  if (!spec) throw new ManifestEditError(`"${key}" is not declared by the manifest`);
+  const file = spec.revision?.mode === "animate-skeleton" ? spec.revision.keypointsFile : void 0;
+  if (!file) throw new ManifestEditError(`${key} is not an animate-skeleton revision`);
+  const relative = import_node_path29.default.relative(ctx.loaded.root, file);
+  if (relative.startsWith("..") || import_node_path29.default.isAbsolute(relative)) {
+    throw new ManifestEditError(`${key}'s keypoints file is outside the project; edit it by hand`);
+  }
+  const current = (0, import_node_fs25.existsSync)(file) ? sha256(await (0, import_promises22.readFile)(file)) : null;
+  if (current !== request.expectedSha256) {
+    throw Object.assign(
+      new Error(`${relative.split(import_node_path29.default.sep).join("/")} changed on disk since this page loaded it; press Refresh and edit again`),
+      { status: 409 }
+    );
+  }
+  await (0, import_promises22.writeFile)(file, JSON.stringify(request.set, null, 2) + "\n");
+  return relative.split(import_node_path29.default.sep).join("/");
+}
 
 // src/gallery/edit.ts
 var Base64 = import_zod11.z.string().regex(/^[A-Za-z0-9+/]*={0,2}$/).max(Math.ceil(MAX_HAND_EDIT_BYTES / 3) * 4);
@@ -16068,6 +16097,18 @@ function createGalleryEditHandler(opts) {
       }
       return opts.reload();
     }
+    const poses = SkeletonKeypointsUpdateSchema.safeParse(body);
+    if (poses.success) {
+      if (!opts.loadProject) throw new ManifestEditError("pose edits are not available in this gallery");
+      const written = await updateSkeletonKeypoints(await opts.loadProject(poses.data.project), poses.data);
+      log(`  poses saved: ${written} (${poses.data.styleId}/${poses.data.assetId} is stale until generated again)`);
+      return opts.reload();
+    }
+    if (body?.action === "update-skeleton-keypoints") {
+      throw new ManifestEditError(
+        "invalid pose edit: " + poses.error.issues.slice(0, 3).map((issue) => `${issue.path.join(".")}: ${issue.message}`).join("; ")
+      );
+    }
     const skeleton = SkeletonAnimationRequestSchema.safeParse(body);
     if (skeleton.success) {
       let manifestPath2;
@@ -16441,7 +16482,8 @@ async function buildGallerySnapshot(opts) {
       mirrorOfKey: spec.mirror ? lockKey(spec.styleId, spec.mirror.sourceAssetId) : entry?.mirror ? lockKey(spec.styleId, entry.mirror.sourceAssetId) : null,
       skeleton: spec.revision?.mode === "animate-skeleton" && spec.revision.keypointsFile ? {
         keypointsFile: portableOutputPath(spec.revision.keypointsFile, root),
-        set: spec.revision.skeleton ?? null
+        set: spec.revision.skeleton ?? null,
+        sha256: spec.revision.keypointsSha256 ?? null
       } : null,
       character: describeCharacter(spec, entry),
       outputs,