pixelkiln 0.77.0 → 0.79.0

package/dist/client/gallery.css

@@ -440,3 +440,38 @@ 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; } }
+.lg-add { width:76px; height:76px; padding:0; font:400 22px/1 var(--mono); color:var(--dim); border:1px dashed var(--line-strong); background:transparent; }
+.lg-add:hover, .lg-add.on { color:var(--accent-soft); border-color:var(--accent); }
+.gap-panel { margin-top:10px; border:1px solid var(--accent); padding:12px; display:grid; gap:8px; max-width:720px; }
+.gap-panel h4 { margin:0; font:650 12.5px/1.2 var(--mono); color:var(--accent-soft); }
+.gap-options { display:grid; gap:4px; }
+.gap-options .field.check { display:flex; align-items:baseline; gap:6px; font-size:12.5px; }
+.gap-price { font:11.5px/1.45 var(--mono); }
+.gap-panel .actions { display:flex; gap:6px; flex-wrap:wrap; }
+@media (max-width: 640px) { .lg-add { width:56px; height:56px; } }

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");
@@ -2374,7 +2645,8 @@
       panel: null,
       anims: [],
       columns: /* @__PURE__ */ new Map(),
-      turn: null
+      turn: null,
+      gap: null
     };
     renderFamily();
   }
@@ -2667,7 +2939,20 @@
         const td = el("td");
         column(d, td);
         const item = cells.find((l) => l.character.direction === d);
-        td.append(item ? loopCell(item, parent, d) : el("span", "lg-none", "·"));
+        if (item) td.append(loopCell(item, parent, d));
+        else if (fillable(root, parent, cells, d)) {
+          const open = F.gap && F.gap.row === k && F.gap.direction === d;
+          const add = el("button", "lg-add" + (open ? " on" : ""), "+");
+          add.type = "button";
+          add.title = "Add " + name + " facing " + d;
+          add.setAttribute("aria-label", add.title);
+          add.onclick = () => {
+            F.gap = open ? null : { row: k, direction: d };
+            F.drawn = null;
+            renderFamily();
+          };
+          td.append(add);
+        } else td.append(el("span", "lg-none", "·"));
         tr.append(td);
       }
       tbody.append(tr);
@@ -2676,9 +2961,167 @@
     const scroller = el("div", "lg-scroll");
     scroller.append(table);
     wrap.append(scroller);
+    const gap = F.gap && rows.get(F.gap.row);
+    if (gap) {
+      wrap.append(gapPanel(root, gap, F.gap.direction));
+    } else F.gap = null;
     wrap.append(el("small", "state-dim", "Every loop plays on one clock. ⇋ marks a mirror, flipped locally at no cost. A dimmed cell is the parent's rotation, standing in until that loop is generated."));
     return wrap;
   }
+  var MIRRORED = {
+    south: "south",
+    north: "north",
+    east: "west",
+    west: "east",
+    "south-east": "south-west",
+    "south-west": "south-east",
+    "north-east": "north-west",
+    "north-west": "north-east"
+  };
+  var ANIMATION_FIELDS = ["of", "template", "frames", "fps", "mode", "subject", "enhancePrompt"];
+  function fillable(root, parent, cells, direction) {
+    if (!EDITABLE || !projectOf(root)?.manifestSha256) return false;
+    if (!turnOrder(parent).includes(direction)) return false;
+    return cells.some((l) => !l.mirrorOfKey && l.declaredAs && l.asset);
+  }
+  function gapOptions(cells, direction) {
+    const drawn = cells.filter((l) => !l.mirrorOfKey);
+    const sample = drawn[0];
+    const name = loopName(sample);
+    const shorthand = sample.declaredAs !== sample.assetId ? sample.declaredAs : null;
+    const flip = MIRRORED[direction];
+    const options = [];
+    if (shorthand) {
+      const now = drawn.map((l) => l.character.direction);
+      const next = COMPASS.filter((d) => d === direction || now.includes(d));
+      const freeFlip = flip !== direction && !cells.some((l) => l.character.direction === flip);
+      options.push({
+        id: "draw",
+        label: "Draw it",
+        note: "adds " + direction + " to " + shorthand + "'s directions" + (freeFlip ? "; " + flip + " comes with it as a free mirror" : ""),
+        edit: { action: "patch-asset", assetId: shorthand, patch: { loopDirections: next } }
+      });
+      return options;
+    }
+    const newId = name + "." + direction;
+    const flipped = drawn.find((l) => l.character.direction === flip && flip !== direction);
+    if (flipped) {
+      const mirror = { mirror: flipped.declaredAs };
+      if (flipped.asset?.styles) mirror.styles = flipped.asset.styles;
+      options.push({ id: "mirror", label: "Mirror " + flip, note: "flips " + flipped.assetId + " locally; free", edit: { action: "add-asset", assetId: newId, asset: mirror } });
+    }
+    const base = sample.asset || {};
+    const animation = { direction };
+    for (const key of ANIMATION_FIELDS) if (base.animation && base.animation[key] !== void 0) animation[key] = base.animation[key];
+    const asset = { animation };
+    for (const key of ["prompt", "styles", "tags", "category"]) if (base[key] !== void 0) asset[key] = base[key];
+    options.push({ id: "draw", label: "Draw it", note: "a copy of " + sample.assetId + " facing " + direction, edit: { action: "add-asset", assetId: newId, asset } });
+    return options;
+  }
+  function gapPanel(root, cells, direction) {
+    const panel = el("div", "gap-panel");
+    const name = loopName(cells[0]);
+    panel.append(el("h4", null, "Add " + (name.startsWith(root.assetId + ".") ? name.slice(root.assetId.length + 1) : name) + " facing " + direction));
+    const options = gapOptions(cells, direction);
+    let chosen = options[0];
+    const list = el("div", "gap-options");
+    const priceLine = el("div", "gap-price state-dim", "pricing…");
+    const msg = el("div", "msg");
+    for (const option of options) {
+      const label = el("label", "field check");
+      const radio = el("input");
+      radio.type = "radio";
+      radio.name = "gap-option";
+      radio.checked = option === chosen;
+      radio.onchange = () => {
+        chosen = option;
+        price();
+      };
+      label.append(radio, el("b", null, " " + option.label), el("span", "state-dim", " — " + option.note));
+      list.append(label);
+    }
+    const actions = el("div", "actions");
+    const add = el("button", null, "Add");
+    add.type = "button";
+    const addGen = el("button", "primary", "Add & generate");
+    addGen.type = "button";
+    const cancel = el("button", null, "Cancel");
+    cancel.type = "button";
+    cancel.onclick = () => {
+      F.gap = null;
+      F.drawn = null;
+      renderFamily();
+    };
+    actions.append(add);
+    if (GENERATION) actions.append(addGen);
+    actions.append(cancel);
+    panel.append(list, priceLine, actions, msg);
+    const pr = projectOf(root);
+    const request = () => {
+      const body = { ...chosen.edit, expectedSha256: pr.manifestSha256 };
+      if (root.project) body.project = root.project;
+      return body;
+    };
+    let quote = null;
+    let seq = 0;
+    async function price() {
+      const mine = ++seq;
+      quote = null;
+      priceLine.textContent = "pricing…";
+      add.disabled = addGen.disabled = true;
+      try {
+        const res = await fetch("/api/price", {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "X-Pixelkiln-Session": SESSION ?? "" },
+          body: JSON.stringify(request())
+        });
+        if (mine !== seq) return;
+        if (!res.ok) throw new Error(await res.text());
+        quote = await res.json();
+        const rows = quote.items.map((i) => i.key.split("/").slice(1).join("/") + " " + (i.cost ? fmtCost(i.costUnit, i.cost) : "free"));
+        const totals = Object.entries(quote.totals).filter(([, n]) => n);
+        priceLine.textContent = (rows.length ? rows.join(" · ") : "nothing new") + " — total " + (totals.map(([u, n]) => fmtCost(u, Math.round(n * 100) / 100)).join(" + ") || "free");
+        const over = totals.some(([unit, n]) => {
+          const provider = quote.items.find((i) => i.costUnit === unit)?.provider;
+          const left = provider ? remainingBudget(provider) : null;
+          return left !== null && n > left;
+        });
+        add.disabled = !quote.items.length;
+        addGen.disabled = !quote.items.length || over;
+        addGen.textContent = "Add & generate" + (totals.length ? " · " + totals.map(([u, n]) => fmtCost(u, Math.round(n * 100) / 100)).join(" + ") : "");
+        if (over) addGen.title = "More than the session budget has left";
+      } catch (err) {
+        if (mine !== seq) return;
+        priceLine.className = "gap-price msg bad";
+        priceLine.textContent = err.message;
+      }
+    }
+    const save = async (generate) => {
+      if (!quote) return;
+      const keys = quote.items.map((i) => i.key);
+      add.disabled = addGen.disabled = true;
+      msg.className = "msg";
+      msg.textContent = "saving…";
+      try {
+        S.snap = await postEdit(request());
+        if (generate) {
+          await postGenerate({ keys, ...root.project ? { project: root.project } : {} });
+          pollJobs();
+        }
+        F.gap = null;
+        F.drawn = null;
+        render();
+      } catch (err) {
+        msg.className = "msg bad";
+        msg.textContent = err.status === 409 ? "The manifest changed on disk; refresh and try again." : err.message;
+        add.disabled = addGen.disabled = false;
+      }
+    };
+    add.onclick = () => save(false);
+    addGen.onclick = () => save(true);
+    price();
+    return panel;
+  }
   function column(direction, node) {
     if (!F.columns.has(direction)) F.columns.set(direction, []);
     F.columns.get(direction).push(node);
@@ -3978,7 +4421,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 +4494,7 @@
     renderMain(visibleItems());
     renderDrawer();
     renderTray();
+    renderSelectionBar();
     refreshFamily();
   }
   function renderQuietly() {
@@ -4060,6 +4504,7 @@
     if (region !== "main") renderMain(visibleItems());
     if (region !== "drawer") renderDrawer();
     renderTray();
+    renderSelectionBar();
     refreshFamily();
   }
 
@@ -4548,6 +4993,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 +5056,11 @@
       if (ui.open) {
         e.preventDefault();
         closeItem();
+        return;
+      }
+      if (ui.selecting) {
+        e.preventDefault();
+        setSelecting(false);
       }
       return;
     }