pixelkiln 0.77.0 → 0.78.0

package/dist/client/gallery.css

@@ -440,3 +440,29 @@ td.col-on { background:rgba(255,107,53,.08); }
 .frames-bar .count { font:11.5px/1 var(--mono); color:var(--dim); min-width:44px; }
 .frames-bar select { font:11.5px/1 var(--mono); padding:5px 6px; background:var(--panel-deep); border:1px solid var(--line); }
 .frames-bar .chip { font-size:12px; color:var(--dim); display:inline-flex; align-items:center; gap:4px; }
+
+/* ---- families on the grid, selection ---- */
+.fam-group { margin:0 0 18px; }
+.fam-group + .fam-group { border-top:1px dashed var(--line); padding-top:14px; }
+.fam-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 10px; }
+.fam-head > b { font:650 13px/1.3 var(--mono); }
+.fam-tally { display:inline-flex; flex-wrap:wrap; gap:10px; color:var(--dim); font-size:12px; }
+.fam-tally .st { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11.5px; }
+.fam-head .tools { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
+.fam-head .tools button { font-size:12.5px; padding:5px 10px; }
+#select.on { border-color:var(--accent); color:var(--accent-soft); }
+.card .sel { position:absolute; top:6px; left:6px; width:20px; height:20px; display:grid; place-items:center;
+  font:700 12px/1 var(--mono); color:transparent; background:rgba(16,15,12,.75); border:1px solid var(--line-strong); }
+.card.selected .sel { color:var(--bg); background:var(--accent); border-color:var(--accent); }
+.card.selected { outline:2px solid var(--accent); outline-offset:-2px; }
+.selbar { position:sticky; bottom:0; z-index:12; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
+  padding:10px 22px; background:var(--panel); border-top:1px solid var(--line-strong); box-shadow:0 -6px 18px rgba(0,0,0,.35); }
+.selbar[hidden] { display:none; }
+.selbar > b { font:650 12.5px/1 var(--mono); }
+.selbar .acts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
+.selbar .acts button { font-size:12.5px; padding:5px 10px; }
+.selbar .tagbox { display:inline-flex; gap:4px; }
+.selbar .tagbox input { width:120px; padding:5px 8px; background:var(--panel-deep); border:1px solid var(--line); }
+.selbar .msg { font-size:12px; color:var(--dim); }
+.selbar .msg.bad { color:var(--bad); } .selbar .msg.ok { color:var(--ok); }
+@media (max-width: 640px) { .selbar { padding:10px 12px; } }

package/dist/client/gallery.js

@@ -44,7 +44,9 @@
     backdrop: "checker",
     notify: false,
     fps: null,
-    onion: false
+    onion: false,
+    selecting: false,
+    selected: /* @__PURE__ */ new Set()
   };
   var PREFS_KEY = "pixelkiln.gallery.prefs";
   var PREF_NAMES = ["playLoops", "backdrop", "notify", "onion"];
@@ -1012,6 +1014,180 @@
     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();
@@ -1187,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" : ""));
@@ -1216,8 +1394,10 @@
       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");
@@ -1253,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);
     }
@@ -1310,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");
@@ -1334,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) {
@@ -1352,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");
@@ -3978,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();
@@ -4051,6 +4322,7 @@
     renderMain(visibleItems());
     renderDrawer();
     renderTray();
+    renderSelectionBar();
     refreshFamily();
   }
   function renderQuietly() {
@@ -4060,6 +4332,7 @@
     if (region !== "main") renderMain(visibleItems());
     if (region !== "drawer") renderDrawer();
     renderTray();
+    renderSelectionBar();
     refreshFamily();
   }
 
@@ -4548,6 +4821,7 @@
   // 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);
@@ -4610,6 +4884,11 @@
       if (ui.open) {
         e.preventDefault();
         closeItem();
+        return;
+      }
+      if (ui.selecting) {
+        e.preventDefault();
+        setSelecting(false);
       }
       return;
     }

package/dist/index.cjs

@@ -16660,6 +16660,7 @@ async function buildGallerySnapshot(opts) {
       styleId: spec.styleId,
       assetId: spec.assetId,
       declared: true,
+      declaredAs: loopShorthandOf(spec.assetId, loaded.loopFamilies) ?? spec.assetId,
       state: planItem.state,
       reason: planItem.reason,
       status: entry?.status ?? null,
@@ -16729,6 +16730,7 @@ async function buildGallerySnapshot(opts) {
       styleId: entry.styleId,
       assetId: entry.assetId,
       declared: false,
+      declaredAs: null,
       state: "undeclared",
       reason: "not declared by the current manifest; `pixelkiln prune` removes the entry",
       status: entry.status,
@@ -17058,9 +17060,11 @@ ${css}</style>
     </select>
     <select id="group" aria-label="Group">
       <option value="style">Group: by style</option>
+      <option value="family">Group: by family</option>
       <option value="none">Group: none</option>
     </select>
     <span id="editing" class="editing" hidden title="This gallery can write the manifest. It never contacts a provider.">editing</span>
+    <button id="select" type="button" title="Pick several records to generate, regenerate, compare, or tag together (or ctrl/\u2318-click a card)">Select</button>
     <button id="studio" type="button" hidden title="Draft a new character: its style, base, loops, and portrait, priced as you go">+ New character</button>
     <button id="refresh" type="button" title="Re-read the manifest, lockfile, and disk">Refresh</button>
     <label class="chip" title="Refresh every 5 seconds while this tab is visible"><input id="auto" type="checkbox"> auto</label>
@@ -17074,6 +17078,7 @@ ${css}</style>
   <div id="tools"></div>
 </header>
 <main id="root"></main>
+<div id="selbar" class="selbar" hidden></div>
 <footer>
   Click a sprite for its full record; <kbd>shift</kbd>-click adds it to a side-by-side comparison. <kbd>\u2190</kbd>/<kbd>\u2192</kbd> step through the visible set while a record
   is open, <kbd>,</kbd>/<kbd>.</kbd> step a loop's frames and <kbd>space</kbd> plays it, <kbd>Esc</kbd> closes it, and <kbd>/</kbd> jumps to search. This page reads the manifest, lockfile,