pixelkiln 0.74.0 → 0.75.0

package/dist/client/gallery.js

@@ -856,6 +856,555 @@
     return form;
   }
 
+  // src/gallery/client/src/grid.ts
+  function visibleItems() {
+    const q = ui.q.trim().toLowerCase();
+    let items = S.snap.items.filter((item) => {
+      if (ui.states.size && !ui.states.has(item.state)) return false;
+      if (ui.providers.size && !ui.providers.has(item.provider)) return false;
+      if (ui.generators.size && !ui.generators.has(item.generator)) return false;
+      if (ui.projects.size && !ui.projects.has(item.project ?? "")) return false;
+      if (!q) return true;
+      const hay = [
+        item.id,
+        item.prompt,
+        item.currentPrompt,
+        item.jobId,
+        item.objectId,
+        item.recordedSpecHash,
+        item.currentSpecHash,
+        item.category,
+        ...item.tags || [],
+        ...item.outputs.flatMap((o) => [o.path, o.sha256])
+      ].filter(Boolean).join("\n").toLowerCase();
+      return hay.includes(q);
+    });
+    const when = (item) => item.downloadedAt || item.submittedAt || "";
+    const sorters = {
+      key: (a, b) => a.id.localeCompare(b.id),
+      newest: (a, b) => when(b).localeCompare(when(a)) || a.id.localeCompare(b.id),
+      oldest: (a, b) => when(a).localeCompare(when(b)) || a.id.localeCompare(b.id),
+      cost: (a, b) => b.cost - a.cost || a.id.localeCompare(b.id),
+      size: (a, b) => b.width * b.height - a.width * a.height || a.id.localeCompare(b.id)
+    };
+    items.sort(sorters[ui.sort] || sorters.key);
+    return items;
+  }
+  function renderHeader() {
+    $("editing").hidden = !EDITABLE;
+    $("foot-edit").hidden = EDITABLE;
+    $("foot-editing").hidden = !EDITABLE;
+    $("foot-gen").hidden = !GENERATION;
+    const p = $("project");
+    p.textContent = "";
+    if (S.snap.workspace) {
+      p.append(el("b", null, "workspace"), " ", document.createTextNode(shortPath(S.snap.workspace.path)));
+      p.title = S.snap.workspace.path;
+    } else {
+      p.append(el("b", null, S.snap.project.name), " ", document.createTextNode(shortPath(S.snap.project.manifest)));
+      p.title = S.snap.project.manifest + "\nlockfile: " + S.snap.project.lock;
+    }
+    const t = $("totals");
+    t.textContent = "";
+    if (S.snap.workspace) {
+      const broken = S.snap.workspace.projects.filter((pr) => pr.error).length;
+      const w = el("span", null, "");
+      w.append(el("b", null, S.snap.workspace.projects.length), document.createTextNode(" project" + (S.snap.workspace.projects.length === 1 ? "" : "s") + (broken ? " (" + broken + " unreadable)" : "")));
+      t.append(w);
+    }
+    const n = S.snap.totals.entries;
+    t.append(el("span", null, ""));
+    t.lastChild.append(el("b", null, n), document.createTextNode(" lock " + (n === 1 ? "entry" : "entries")));
+    const declared = S.snap.items.filter((i) => i.declared).length;
+    t.append(el("span", null, declared + " declared by " + (S.snap.workspace ? "a manifest" : "the manifest")));
+    const recorded = fmtSpend(S.snap.totals.spendByUnit);
+    t.append(el("span", null, recorded === "no spend recorded" ? recorded : recorded + " recorded"));
+    if (S.snap.filter.styles.length || S.snap.filter.assets.length) {
+      t.append(el("span", "state-warn", "filtered: " + [
+        S.snap.filter.styles.length ? "--style " + S.snap.filter.styles.join(",") : "",
+        S.snap.filter.assets.length ? "--only " + S.snap.filter.assets.join(",") : ""
+      ].filter(Boolean).join(" ")));
+    }
+    t.append(el("span", null, "snapshot " + fmtWhen(S.snap.generatedAt)));
+    if (GENERATION) {
+      const line = budgetLine();
+      if (line) t.append(el("span", "budget", line));
+    }
+    const chips = $("chips");
+    chips.textContent = "";
+    const counts = (pick) => {
+      const m = /* @__PURE__ */ new Map();
+      for (const item of S.snap.items) {
+        const k = pick(item);
+        m.set(k, (m.get(k) || 0) + 1);
+      }
+      return m;
+    };
+    const chip = (label, count, set, key, tone) => {
+      const b = el("button", "chip" + (set.has(key) ? " on" : ""));
+      b.type = "button";
+      b.setAttribute("aria-pressed", String(set.has(key)));
+      if (tone) b.append(el("i", "dot " + tone));
+      b.append(document.createTextNode(label), el("span", "n", count));
+      b.onclick = () => {
+        set.has(key) ? set.delete(key) : set.add(key);
+        render();
+      };
+      return b;
+    };
+    if (S.snap.workspace) {
+      const byProject = counts((i) => i.project);
+      for (const pr of S.snap.workspace.projects) {
+        if (byProject.has(pr.id) || ui.projects.has(pr.id)) chips.append(chip(pr.id, byProject.get(pr.id) || 0, ui.projects, pr.id));
+      }
+      chips.append(el("span", "sep"));
+    }
+    const byState = counts((i) => i.state);
+    for (const s of STATE_ORDER) if (byState.has(s)) chips.append(chip(s, byState.get(s), ui.states, s, STATE_TONE[s]));
+    const byProvider = counts((i) => i.provider);
+    if (byProvider.size > 1 || ui.providers.size) {
+      chips.append(el("span", "sep"));
+      for (const [k, v] of [...byProvider].sort()) chips.append(chip(k, v, ui.providers, k));
+    }
+    const byGen = counts((i) => i.generator);
+    if (byGen.size > 1 || ui.generators.size) {
+      chips.append(el("span", "sep"));
+      for (const [k, v] of [...byGen].sort()) chips.append(chip(k, v, ui.generators, k));
+    }
+    if (ui.states.size || ui.providers.size || ui.generators.size || ui.projects.size || ui.q) {
+      const clear = el("button", "chip", "clear filters");
+      clear.type = "button";
+      clear.onclick = () => clearFilters();
+      chips.append(el("span", "sep"), clear);
+    }
+  }
+  function clearFilters() {
+    ui.states.clear();
+    ui.providers.clear();
+    ui.generators.clear();
+    ui.projects.clear();
+    ui.q = "";
+    $("q").value = "";
+    render();
+  }
+  function thumb(item) {
+    const cell = el("div", "cell");
+    const shown = item.edit && item.editStatus === "edited" && item.edits.every((e) => e.url) ? item.edits : item.outputs.filter((o) => o.url);
+    if (!shown.length) {
+      cell.classList.add("none");
+      cell.append(el("span", null, item.state === "missing" ? "not generated yet" : item.state === "in-flight" ? item.status === "review" ? "awaiting review" : "awaiting provider" : item.state === "recoverable" ? "ready to fetch" : item.state === "failed" ? "generation failed" : item.state === "blocked" ? "waiting on its parent" : item.outputs.length ? "file missing on disk" : "no output recorded"));
+      return cell;
+    }
+    const w = item.width, h = item.height;
+    if (shown.length > 1 && !isFrameSet(item)) {
+      const multi = el("div", "multi");
+      for (const o of shown.slice(0, 4)) {
+        const box = el("div");
+        const img2 = el("img");
+        img2.src = o.url;
+        img2.alt = o.role || item.assetId;
+        img2.loading = "lazy";
+        const s2 = displayScale(w, h, 66, 52);
+        if (s2 >= 1) {
+          img2.width = w * s2;
+          img2.height = h * s2;
+        } else img2.className = "fit";
+        box.append(img2);
+        multi.append(box);
+      }
+      cell.append(multi, el("span", "badge", shown.length + " outputs"));
+      return cell;
+    }
+    const img = el("img");
+    img.src = shown[0].url;
+    img.alt = item.assetId;
+    img.loading = "lazy";
+    const s = displayScale(w, h, 156, 116);
+    if (s >= 1) {
+      img.width = w * s;
+      img.height = h * s;
+    } else img.className = "fit";
+    cell.append(img);
+    if (isFrameSet(item)) cell.append(el("span", "badge", "▸ " + shown.length + " frames"));
+    else if (s >= 1 && s !== 1) cell.append(el("span", "badge", s + "×"));
+    return cell;
+  }
+  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" : ""));
+    c.type = "button";
+    c.dataset.key = item.id;
+    c.setAttribute("aria-label", item.id + ", " + item.state + (slot >= 0 ? ", in comparison" : ""));
+    const body = el("div", "cbody");
+    body.append(el("div", "aid", item.assetId));
+    const meta = el("div", "cmeta");
+    const st = el("span", "st");
+    st.append(el("i", "dot " + STATE_TONE[item.state]), document.createTextNode(item.state));
+    meta.append(st, el("span", null, item.width + "×" + item.height));
+    if (item.cost) meta.append(el("span", null, fmtCost(item.costUnit, item.cost)));
+    body.append(meta);
+    const family = familyLabel(item);
+    if (family) body.append(el("div", "family", family));
+    const cell = thumb(item);
+    if (slot >= 0) cell.append(el("span", "slot", String(slot + 1)));
+    if (item.editStatus === "edited" || item.editStatus === "regenerated-since") {
+      const pen = el("span", "pen", "✎");
+      pen.title = "hand-edited";
+      cell.append(pen);
+    }
+    const job = activeJobFor(item);
+    if (job) {
+      const badge = el("span", "busy-badge");
+      badge.append(el("i", "dot busy"), document.createTextNode(job.phase === "review" ? "review" : job.mode === "generate" ? "generating" : job.mode));
+      badge.title = (JOB_VERB[job.mode] || job.mode) + " this asset: " + (PHASE_TEXT[job.phase] || job.phase);
+      cell.append(badge);
+    }
+    c.append(cell, body);
+    c.onclick = (e) => {
+      if (e.shiftKey) toggleCompare(item.id);
+      else openItem(item.id);
+    };
+    return c;
+  }
+  function renderMain(items) {
+    const root = $("root");
+    root.textContent = "";
+    if (!S.snap.items.length) {
+      const e = el("div", "empty");
+      e.append(el("p", null, "Nothing has been generated for this project yet."));
+      e.append(el("p", null, "pixelkiln plan shows what the manifest would make; pixelkiln gen makes it."));
+      root.append(e);
+      return;
+    }
+    if (!items.length) {
+      const e = el("div", "empty");
+      e.append(el("p", null, "No generations match these filters."));
+      const b = el("button", null, "Clear filters");
+      b.type = "button";
+      b.onclick = clearFilters;
+      e.append(b);
+      root.append(e);
+      return;
+    }
+    const hidden = Math.max(0, items.length - ui.limit);
+    const shown = hidden ? items.slice(0, ui.limit) : items;
+    const unfiltered = !ui.projects.size && !ui.q && !ui.states.size && !ui.providers.size && !ui.generators.size;
+    const projects = S.snap.workspace ? S.snap.workspace.projects.filter((pr) => ui.projects.size ? ui.projects.has(pr.id) : unfiltered || shown.some((i) => i.project === pr.id)) : [null];
+    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 }] : [];
+      if (pr) sections.push({ project: pr, style: null, items: null, count: inProject.length });
+      sections.push(...styleSections);
+    }
+    for (const sec of sections) {
+      if (sec.project) {
+        root.append(projectHeader(sec.project, sec.count));
+        continue;
+      }
+      const wrap = el("section", "style");
+      if (sec.style) {
+        const s = sec.style;
+        const head = el("div", "shead");
+        head.append(el("h2", null, s.id));
+        const meta = el("div", "meta");
+        meta.append(el("span", null, s.provider), el("span", null, s.generator));
+        if (s.outDir) meta.append(el("span", "mono", s.outDir));
+        if (s.palette.length) {
+          const sw = el("span", "swatches");
+          for (const c of s.palette) {
+            const i = el("i");
+            i.style.background = c;
+            i.title = c;
+            sw.append(i);
+          }
+          meta.append(sw);
+        }
+        if (s.quality) meta.append(el("span", null, "quality profile"));
+        if (s.characters) {
+          const parts = [];
+          parts.push(s.characters.bases + (s.characters.bases === 1 ? " character" : " characters"));
+          if (s.characters.states) parts.push(s.characters.states + (s.characters.states === 1 ? " state" : " states"));
+          if (s.characters.animations) parts.push(s.characters.animations + (s.characters.animations === 1 ? " loop" : " loops"));
+          if (s.characters.portraits) parts.push(s.characters.portraits + (s.characters.portraits === 1 ? " portrait" : " portraits"));
+          if (s.characters.outfits) parts.push(s.characters.outfits + (s.characters.outfits === 1 ? " outfit" : " outfits"));
+          meta.append(el("span", null, parts.join(", ")));
+        }
+        meta.append(el("span", null, sec.items.length + " of " + s.items + (s.items === 1 ? " asset" : " assets")));
+        if (Object.keys(s.spendByUnit).length) meta.append(el("span", null, fmtSpend(s.spendByUnit)));
+        head.append(meta);
+        const addKey = "new:" + (s.project || "") + ":" + s.id;
+        const tools = el("div", "tools");
+        if (s.outDir && s.candidates !== null) tools.append(candidatesControl(s));
+        if (GENERATION && s.actionable.keys.length) {
+          const g = el("button", "primary", "Generate " + s.actionable.keys.length + " · " + fmtCost(s.actionable.costUnit, Math.round(s.actionable.cost * 100) / 100));
+          g.type = "button";
+          g.onclick = () => generateDialog(S.snap.items.filter((i) => i.project === s.project && s.actionable.keys.includes(i.key)), { project: s.project });
+          tools.append(g);
+        }
+        const refreshable = S.snap.items.filter((i) => i.project === s.project && i.styleId === s.id && i.refreshable && i.upstreamUrl);
+        if (GENERATION && refreshable.length) {
+          const r = el("button", null, "Pull upstream " + refreshable.length);
+          r.type = "button";
+          r.title = "Re-download objects edited in the provider’s own editor; no cost";
+          r.onclick = () => generateDialog(refreshable, { project: s.project, refresh: true });
+          tools.append(r);
+        }
+        const styleKey = "style:" + (s.project || "") + ":" + s.id;
+        if (EDITABLE && s.outDir) {
+          const es = el("button", null, ui.editing === styleKey ? "Cancel" : "Edit style");
+          es.type = "button";
+          es.onclick = () => {
+            ui.editing = ui.editing === styleKey ? null : styleKey;
+            ui.notice = null;
+            render();
+          };
+          tools.append(es);
+          const add = el("button", "add", ui.editing === addKey ? "Cancel" : "+ Add asset");
+          add.type = "button";
+          add.onclick = () => {
+            ui.editing = ui.editing === addKey ? null : addKey;
+            render();
+          };
+          tools.append(add);
+        }
+        if (tools.childNodes.length) head.append(tools);
+        wrap.append(head);
+        if (ui.notice && ui.notice.id === styleKey) wrap.append(el("div", "notice", ui.notice.text));
+        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);
+      root.append(wrap);
+    }
+    if (hidden) {
+      const more = el("div", "empty");
+      more.append(el("p", null, hidden + " more " + (hidden === 1 ? "generation is" : "generations are") + " not shown."));
+      const b = el("button", null, "Show all " + items.length);
+      b.type = "button";
+      b.onclick = () => {
+        ui.limit = Infinity;
+        render();
+      };
+      more.append(b);
+      root.append(more);
+    }
+  }
+  function projectHeader(pr, count) {
+    const head = el("section", "project");
+    const line = el("div", "phead");
+    line.append(el("h2", null, pr.id));
+    const meta = el("div", "meta");
+    if (pr.name !== pr.id) meta.append(el("span", null, pr.name));
+    meta.append(el("span", "mono", shortPath(pr.manifest)));
+    if (pr.account) meta.append(el("span", null, pr.account));
+    if (pr.error) {
+      meta.append(el("span", "state-bad", "unreadable: " + pr.error));
+    } else {
+      meta.append(el("span", null, count + " of " + pr.items + " shown · " + pr.entries + " lock " + (pr.entries === 1 ? "entry" : "entries")));
+      if (Object.keys(pr.spendByUnit).length) meta.append(el("span", null, fmtSpend(pr.spendByUnit)));
+    }
+    line.append(meta);
+    head.append(line);
+    return head;
+  }
+  function candidatesControl(style) {
+    const wrap = el("span", "cand");
+    const editKey = "cand:" + (style.project || "") + ":" + style.id;
+    const declared = S.snap.items.filter((i) => i.project === style.project && i.styleId === style.id && i.declared).length;
+    if (!(EDITABLE && style.candidatesEditable) || ui.editing !== editKey) {
+      wrap.append(el("span", null, style.candidates + (style.candidates === 1 ? " candidate" : " candidates") + " per generation"));
+      if (EDITABLE && style.candidatesEditable) {
+        const b = el("button", null, "change");
+        b.type = "button";
+        b.onclick = () => {
+          ui.editing = editKey;
+          render();
+        };
+        wrap.append(b);
+      } else if (style.provider === "pixellab") {
+        wrap.title = "PixelLab: map and pixflux return one image per generation; a 1dir style returns 4–64 for its size.";
+      }
+      return wrap;
+    }
+    const input = el("input");
+    input.type = "number";
+    input.min = "1";
+    input.max = "64";
+    input.value = String(style.candidates);
+    const save = el("button", "primary", "Save");
+    save.type = "button";
+    const cancel = el("button", null, "Cancel");
+    cancel.type = "button";
+    cancel.onclick = () => {
+      ui.editing = null;
+      render();
+    };
+    const note = el("span", null, "affects " + declared + (declared === 1 ? " asset, which becomes stale" : " assets, which become stale"));
+    save.onclick = async () => {
+      save.disabled = true;
+      try {
+        const pr = S.snap.workspace ? S.snap.workspace.projects.find((x) => x.id === style.project) : S.snap.project;
+        const body = { action: "patch-style", styleId: style.id, expectedSha256: pr.manifestSha256, patch: { candidates: Number(input.value) } };
+        if (style.project) body.project = style.project;
+        S.snap = await postEdit(body);
+        ui.editing = null;
+        render();
+      } catch (err) {
+        save.disabled = false;
+        note.textContent = err.message;
+        note.className = "state-bad";
+      }
+    };
+    wrap.append(input, save, cancel, note);
+    setTimeout(() => input.focus(), 0);
+    return wrap;
+  }
+  function historySection(item) {
+    const limit = projectOf(item)?.historyLimit;
+    if (!item.history.length && !((limit ?? 0) > 0 && item.status === "downloaded")) return null;
+    const s = el("section", "meta");
+    s.append(el("h3", null, item.history.length ? "Previous generations (" + item.history.length + ")" : "Previous generations"));
+    if (!item.history.length) {
+      s.append(el("div", "state-dim", "None yet. A regeneration keeps the generation it replaces, up to " + limit + " per asset (PIXELKILN_HISTORY, or the manifest’s history), so it can be brought back from here."));
+      return s;
+    }
+    const list = el("div", "versions");
+    const job = GENERATION ? activeJobFor(item) : null;
+    for (const g of item.history) {
+      const v = el("div", "version");
+      const thumb2 = el("div", "thumb");
+      const first = g.outputs[0];
+      if (first && first.url) {
+        const img = el("img");
+        img.src = first.url;
+        img.alt = "generation #" + g.index;
+        thumb2.append(img);
+      } else thumb2.append(el("span", null, g.cached ? "" : "not cached"));
+      const facts = el("div", "facts");
+      const head = el("div");
+      const billedNote = g.billed && (g.billed.unit !== g.costUnit || g.billed.amount !== g.cost) ? " (billed " + fmtCost(g.billed.unit, g.billed.amount) + ")" : "";
+      head.append(el("b", null, "#" + g.index), document.createTextNode(" · " + fmtWhen(g.downloadedAt || g.submittedAt) + " · " + fmtCost(g.costUnit, g.cost) + billedNote + (g.outputs.length > 1 ? " · " + g.outputs.length + " files" : "")));
+      facts.append(head);
+      const prompt = el("div", "prompt" + (g.promptDiffers ? " differs" : ""), (g.promptDiffers ? "prompt: " : "same prompt: ") + g.prompt);
+      prompt.title = g.prompt;
+      facts.append(prompt);
+      const meta = el("div", "meta");
+      meta.append(document.createTextNode((first ? first.sha256.slice(0, 12) + "…" : "") + (g.cached ? " · bytes cached locally" : " · not in the local cache; a restore re-downloads it")));
+      if (g.upstreamUrl) {
+        const a = el("a", null, "open in " + item.provider + " ↗");
+        a.href = g.upstreamUrl;
+        a.target = "_blank";
+        a.rel = "noopener";
+        meta.append(document.createTextNode(" · "), a);
+      }
+      facts.append(meta);
+      const acts = el("div", "acts");
+      if (GENERATION) {
+        const b = el("button", null, "Restore this one · no cost");
+        b.type = "button";
+        b.disabled = !!job;
+        b.title = job ? "Wait for the running job to finish" : "The current generation moves into history; this one becomes current and its bytes are written back";
+        b.onclick = () => generateDialog([item], { project: item.project, revert: String(g.index), generation: g });
+        acts.append(b);
+      }
+      v.append(thumb2, facts, acts);
+      list.append(v);
+    }
+    s.append(list);
+    s.append(el("div", "state-dim", "Keeping up to " + limit + " per asset; a restore moves the current generation into this list, so it can be undone the same way." + (GENERATION ? "" : " Restoring needs the gallery started with --budget (any amount; nothing is spent).")));
+    return s;
+  }
+  function upstreamSection(item) {
+    if (!item.upstreamUrl && !(GENERATION && item.refreshable)) return null;
+    const s = el("section", "meta");
+    s.append(el("h3", null, "Upstream"));
+    const dl = el("dl");
+    if (item.upstreamUrl) {
+      const a = el("a", null, "Open in " + item.provider + " ↗");
+      a.href = item.upstreamUrl;
+      a.target = "_blank";
+      a.rel = "noopener";
+      const tiles = item.generator === "tiles";
+      row(dl, tiles ? "tile set" : "object", a);
+      row(dl, "note", item.provider === "pixellab" ? tiles ? "The tile set this generation was chosen from. Edit it there with PixelLab’s editor, then pull the changes back here; the lockfile records the new bytes as this generation." : "The account object this generation came from. Edit it there with PixelLab’s editor, then pull the changes back here; the lockfile records the new bytes as this generation." : "The provider’s page for this object.");
+    }
+    s.append(dl);
+    if (GENERATION && item.refreshable) {
+      const acts = el("div", "hand-actions");
+      const b = el("button", null, "Pull upstream changes · no cost");
+      b.type = "button";
+      b.onclick = () => generateDialog([item], { project: item.project, refresh: true });
+      acts.append(b);
+      s.append(acts);
+    }
+    return s;
+  }
+  function jobStrip(item, job) {
+    const strip = el("div", "job-strip");
+    const ph = el("span", "ph");
+    ph.append(el("i", "dot busy"), document.createTextNode(job.phase));
+    const last = el("span", "last", job.messages.length ? job.messages[job.messages.length - 1].trim() : "");
+    last.title = job.messages.join("\n");
+    const what = el("span", "what", (JOB_VERB[job.mode] || job.mode) + " this asset: " + (PHASE_TEXT[job.phase] || job.phase) + (job.mode === "generate" && job.phase !== "review" ? ". The current file stays until the new result is downloaded." : "."));
+    strip.append(ph, last, what);
+    const acts = el("div", "acts");
+    if (job.phase === "review" && job.review.includes(item.key)) {
+      const b = el("button", "primary", "Review candidates");
+      b.type = "button";
+      b.onclick = () => openReview(job.id);
+      acts.append(b);
+    }
+    const logBtn = el("button", null, ui.logs.has(job.id) ? "Hide log" : "Log");
+    logBtn.type = "button";
+    logBtn.onclick = () => {
+      ui.logs.has(job.id) ? ui.logs.delete(job.id) : ui.logs.add(job.id);
+      renderDrawer();
+    };
+    acts.append(logBtn);
+    strip.append(acts);
+    if (ui.logs.has(job.id)) {
+      const pre = el("pre", null, job.messages.join("\n"));
+      pre.style.gridColumn = "1 / -1";
+      strip.append(pre);
+    }
+    return strip;
+  }
+  function generateActions(item) {
+    const row2 = el("div", "gen");
+    if (!GENERATION || !item.declared || item.currentSpecHash === null) return row2;
+    const cost = item.estimatedCost === null ? "" : " · " + fmtCost(item.costUnit, item.estimatedCost);
+    const add = (label, cls, opts) => {
+      const b = el("button", cls, label);
+      b.type = "button";
+      b.onclick = () => generateDialog([item], { project: item.project, ...opts });
+      row2.append(b);
+    };
+    if (item.state === "missing" || item.state === "stale" || item.state === "failed") add("Generate" + cost, "primary", {});
+    else if (item.state === "ok") add("Regenerate" + cost, null, { force: true });
+    else if (item.state === "orphaned" && item.outputs.every((o) => o.exists)) {
+      add("Restore recorded bytes · no cost", null, { restore: true, force: true });
+      add("Regenerate" + cost, null, { force: true });
+    } else if (item.state === "orphaned") add("Restore · no cost", "primary", { restore: true });
+    else if (item.state === "untracked") add("Generate" + cost + " · replaces the file", null, { force: true });
+    if (item.state === "recoverable" && item.status === "downloaded") {
+      add(paletteRuleOf(item) ? "Snap to the palette · no cost" : "Put the provider’s bytes back · no cost", "primary", { resume: true });
+    } else if (item.state === "in-flight" || item.state === "recoverable") {
+      const holder = S.GEN.jobs.find((job) => job.phase === "review" && job.project === item.project && job.review.includes(item.key));
+      if (holder) {
+        const b = el("button", "primary", "Review candidates");
+        b.type = "button";
+        b.onclick = () => openReview(holder.id);
+        row2.append(b);
+      } else {
+        add(item.status === "review" ? "Resume review" : "Resume · no cost", "primary", { resume: true });
+      }
+    }
+    return row2;
+  }
+
   // src/gallery/client/src/jobs.ts
   var ACTIVE_PHASES = /* @__PURE__ */ new Set(["queued", "submitting", "polling", "fetching", "review"]);
   var PHASE_TONE = { queued: "cool", submitting: "cool", polling: "cool", fetching: "cool", review: "warn", done: "ok", failed: "bad" };
@@ -1547,577 +2096,490 @@
     close.type = "button";
     close.onclick = () => {
       host.textContent = "";
-      pollJobs();
-      refresh();
-    };
-    bar.append(close, el("span", null, "Choose from the candidates below. Apply selections writes the lockfile and downloads what you chose; unchosen rows stay in review."));
-    const frame = el("iframe");
-    frame.src = "/review/" + encodeURIComponent(jobId);
-    frame.title = "Candidate review";
-    panel.append(bar, frame);
-    host.append(scrim, panel);
-  }
-  window.addEventListener("message", (e) => {
-    if (e.origin !== location.origin || !e.data || typeof e.data.type !== "string") return;
-    if (e.data.type === "pixelkiln:review-applied") {
-      setTimeout(() => {
-        $("dialog-host").textContent = "";
-        pollJobs();
-        refresh();
-      }, 600);
-      return;
-    }
-    if (S.SHEET && e.source === S.SHEET.frame.contentWindow) onEditorMessage(e.data);
-  });
-
-  // src/gallery/client/src/grid.ts
-  function visibleItems() {
-    const q = ui.q.trim().toLowerCase();
-    let items = S.snap.items.filter((item) => {
-      if (ui.states.size && !ui.states.has(item.state)) return false;
-      if (ui.providers.size && !ui.providers.has(item.provider)) return false;
-      if (ui.generators.size && !ui.generators.has(item.generator)) return false;
-      if (ui.projects.size && !ui.projects.has(item.project ?? "")) return false;
-      if (!q) return true;
-      const hay = [
-        item.id,
-        item.prompt,
-        item.currentPrompt,
-        item.jobId,
-        item.objectId,
-        item.recordedSpecHash,
-        item.currentSpecHash,
-        item.category,
-        ...item.tags || [],
-        ...item.outputs.flatMap((o) => [o.path, o.sha256])
-      ].filter(Boolean).join("\n").toLowerCase();
-      return hay.includes(q);
-    });
-    const when = (item) => item.downloadedAt || item.submittedAt || "";
-    const sorters = {
-      key: (a, b) => a.id.localeCompare(b.id),
-      newest: (a, b) => when(b).localeCompare(when(a)) || a.id.localeCompare(b.id),
-      oldest: (a, b) => when(a).localeCompare(when(b)) || a.id.localeCompare(b.id),
-      cost: (a, b) => b.cost - a.cost || a.id.localeCompare(b.id),
-      size: (a, b) => b.width * b.height - a.width * a.height || a.id.localeCompare(b.id)
-    };
-    items.sort(sorters[ui.sort] || sorters.key);
-    return items;
-  }
-  function renderHeader() {
-    $("editing").hidden = !EDITABLE;
-    $("foot-edit").hidden = EDITABLE;
-    $("foot-editing").hidden = !EDITABLE;
-    $("foot-gen").hidden = !GENERATION;
-    const p = $("project");
-    p.textContent = "";
-    if (S.snap.workspace) {
-      p.append(el("b", null, "workspace"), " ", document.createTextNode(shortPath(S.snap.workspace.path)));
-      p.title = S.snap.workspace.path;
-    } else {
-      p.append(el("b", null, S.snap.project.name), " ", document.createTextNode(shortPath(S.snap.project.manifest)));
-      p.title = S.snap.project.manifest + "\nlockfile: " + S.snap.project.lock;
-    }
-    const t = $("totals");
-    t.textContent = "";
-    if (S.snap.workspace) {
-      const broken = S.snap.workspace.projects.filter((pr) => pr.error).length;
-      const w = el("span", null, "");
-      w.append(el("b", null, S.snap.workspace.projects.length), document.createTextNode(" project" + (S.snap.workspace.projects.length === 1 ? "" : "s") + (broken ? " (" + broken + " unreadable)" : "")));
-      t.append(w);
-    }
-    const n = S.snap.totals.entries;
-    t.append(el("span", null, ""));
-    t.lastChild.append(el("b", null, n), document.createTextNode(" lock " + (n === 1 ? "entry" : "entries")));
-    const declared = S.snap.items.filter((i) => i.declared).length;
-    t.append(el("span", null, declared + " declared by " + (S.snap.workspace ? "a manifest" : "the manifest")));
-    const recorded = fmtSpend(S.snap.totals.spendByUnit);
-    t.append(el("span", null, recorded === "no spend recorded" ? recorded : recorded + " recorded"));
-    if (S.snap.filter.styles.length || S.snap.filter.assets.length) {
-      t.append(el("span", "state-warn", "filtered: " + [
-        S.snap.filter.styles.length ? "--style " + S.snap.filter.styles.join(",") : "",
-        S.snap.filter.assets.length ? "--only " + S.snap.filter.assets.join(",") : ""
-      ].filter(Boolean).join(" ")));
-    }
-    t.append(el("span", null, "snapshot " + fmtWhen(S.snap.generatedAt)));
-    if (GENERATION) {
-      const line = budgetLine();
-      if (line) t.append(el("span", "budget", line));
-    }
-    const chips = $("chips");
-    chips.textContent = "";
-    const counts = (pick) => {
-      const m = /* @__PURE__ */ new Map();
-      for (const item of S.snap.items) {
-        const k = pick(item);
-        m.set(k, (m.get(k) || 0) + 1);
-      }
-      return m;
-    };
-    const chip = (label, count, set, key, tone) => {
-      const b = el("button", "chip" + (set.has(key) ? " on" : ""));
-      b.type = "button";
-      b.setAttribute("aria-pressed", String(set.has(key)));
-      if (tone) b.append(el("i", "dot " + tone));
-      b.append(document.createTextNode(label), el("span", "n", count));
-      b.onclick = () => {
-        set.has(key) ? set.delete(key) : set.add(key);
-        render();
-      };
-      return b;
+      pollJobs();
+      refresh();
     };
-    if (S.snap.workspace) {
-      const byProject = counts((i) => i.project);
-      for (const pr of S.snap.workspace.projects) {
-        if (byProject.has(pr.id) || ui.projects.has(pr.id)) chips.append(chip(pr.id, byProject.get(pr.id) || 0, ui.projects, pr.id));
-      }
-      chips.append(el("span", "sep"));
-    }
-    const byState = counts((i) => i.state);
-    for (const s of STATE_ORDER) if (byState.has(s)) chips.append(chip(s, byState.get(s), ui.states, s, STATE_TONE[s]));
-    const byProvider = counts((i) => i.provider);
-    if (byProvider.size > 1 || ui.providers.size) {
-      chips.append(el("span", "sep"));
-      for (const [k, v] of [...byProvider].sort()) chips.append(chip(k, v, ui.providers, k));
-    }
-    const byGen = counts((i) => i.generator);
-    if (byGen.size > 1 || ui.generators.size) {
-      chips.append(el("span", "sep"));
-      for (const [k, v] of [...byGen].sort()) chips.append(chip(k, v, ui.generators, k));
+    bar.append(close, el("span", null, "Choose from the candidates below. Apply selections writes the lockfile and downloads what you chose; unchosen rows stay in review."));
+    const frame = el("iframe");
+    frame.src = "/review/" + encodeURIComponent(jobId);
+    frame.title = "Candidate review";
+    panel.append(bar, frame);
+    host.append(scrim, panel);
+  }
+  window.addEventListener("message", (e) => {
+    if (e.origin !== location.origin || !e.data || typeof e.data.type !== "string") return;
+    if (e.data.type === "pixelkiln:review-applied") {
+      setTimeout(() => {
+        $("dialog-host").textContent = "";
+        pollJobs();
+        refresh();
+      }, 600);
+      return;
     }
-    if (ui.states.size || ui.providers.size || ui.generators.size || ui.projects.size || ui.q) {
-      const clear = el("button", "chip", "clear filters");
-      clear.type = "button";
-      clear.onclick = () => clearFilters();
-      chips.append(el("span", "sep"), clear);
+    if (S.SHEET && e.source === S.SHEET.frame.contentWindow) onEditorMessage(e.data);
+  });
+
+  // src/gallery/client/src/family.ts
+  var COMPASS = ["south", "south-east", "east", "north-east", "north", "north-west", "west", "south-west"];
+  var SHORT = {
+    south: "S",
+    "south-east": "SE",
+    east: "E",
+    "north-east": "NE",
+    north: "N",
+    "north-west": "NW",
+    west: "W",
+    "south-west": "SW"
+  };
+  var ROSE = ["north-west", "north", "north-east", "west", null, "east", "south-west", "south", "south-east"];
+  var SPEEDS = [0.5, 1, 2];
+  var SPIN_MS = 420;
+  var DRAG_STEP_PX = 28;
+  var F = null;
+  var reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  var byKey = (project, key) => S.snap.items.find((i) => i.key === key && i.project === project);
+  function familyRoot(item) {
+    let at = item;
+    for (let guard = 0; at && at.character && at.character.parentKey && guard < 16; guard++) {
+      at = byKey(at.project, at.character.parentKey);
     }
+    return at && at.character && !at.character.parentKey ? at : null;
   }
-  function clearFilters() {
-    ui.states.clear();
-    ui.providers.clear();
-    ui.generators.clear();
-    ui.projects.clear();
-    ui.q = "";
-    $("q").value = "";
-    render();
+  function familyMembers(root) {
+    return S.snap.items.filter((i) => i.project === root.project && i.character && familyRoot(i) === root);
   }
-  function thumb(item) {
-    const cell = el("div", "cell");
-    const shown = item.edit && item.editStatus === "edited" && item.edits.every((e) => e.url) ? item.edits : item.outputs.filter((o) => o.url);
-    if (!shown.length) {
-      cell.classList.add("none");
-      cell.append(el("span", null, item.state === "missing" ? "not generated yet" : item.state === "in-flight" ? item.status === "review" ? "awaiting review" : "awaiting provider" : item.state === "recoverable" ? "ready to fetch" : item.state === "failed" ? "generation failed" : item.state === "blocked" ? "waiting on its parent" : item.outputs.length ? "file missing on disk" : "no output recorded"));
-      return cell;
-    }
-    const w = item.width, h = item.height;
-    if (shown.length > 1 && !isFrameSet(item)) {
-      const multi = el("div", "multi");
-      for (const o of shown.slice(0, 4)) {
-        const box = el("div");
-        const img2 = el("img");
-        img2.src = o.url;
-        img2.alt = o.role || item.assetId;
-        img2.loading = "lazy";
-        const s2 = displayScale(w, h, 66, 52);
-        if (s2 >= 1) {
-          img2.width = w * s2;
-          img2.height = h * s2;
-        } else img2.className = "fit";
-        box.append(img2);
-        multi.append(box);
-      }
-      cell.append(multi, el("span", "badge", shown.length + " outputs"));
-      return cell;
-    }
-    const img = el("img");
-    img.src = shown[0].url;
-    img.alt = item.assetId;
-    img.loading = "lazy";
-    const s = displayScale(w, h, 156, 116);
-    if (s >= 1) {
-      img.width = w * s;
-      img.height = h * s;
-    } else img.className = "fit";
-    cell.append(img);
-    if (isFrameSet(item)) cell.append(el("span", "badge", "▸ " + shown.length + " frames"));
-    else if (s >= 1 && s !== 1) cell.append(el("span", "badge", s + "×"));
-    return cell;
+  function loopName(item) {
+    const d = item.character && item.character.direction;
+    return d && item.assetId.endsWith("." + d) ? item.assetId.slice(0, -(d.length + 1)) : item.assetId;
   }
-  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" : ""));
-    c.type = "button";
-    c.dataset.key = item.id;
-    c.setAttribute("aria-label", item.id + ", " + item.state + (slot >= 0 ? ", in comparison" : ""));
-    const body = el("div", "cbody");
-    body.append(el("div", "aid", item.assetId));
-    const meta = el("div", "cmeta");
-    const st = el("span", "st");
-    st.append(el("i", "dot " + STATE_TONE[item.state]), document.createTextNode(item.state));
-    meta.append(st, el("span", null, item.width + "×" + item.height));
-    if (item.cost) meta.append(el("span", null, fmtCost(item.costUnit, item.cost)));
-    body.append(meta);
-    const family = familyLabel(item);
-    if (family) body.append(el("div", "family", family));
-    const cell = thumb(item);
-    if (slot >= 0) cell.append(el("span", "slot", String(slot + 1)));
-    if (item.editStatus === "edited" || item.editStatus === "regenerated-since") {
-      const pen = el("span", "pen", "✎");
-      pen.title = "hand-edited";
-      cell.append(pen);
-    }
-    const job = activeJobFor(item);
-    if (job) {
-      const badge = el("span", "busy-badge");
-      badge.append(el("i", "dot busy"), document.createTextNode(job.phase === "review" ? "review" : job.mode === "generate" ? "generating" : job.mode));
-      badge.title = (JOB_VERB[job.mode] || job.mode) + " this asset: " + (PHASE_TEXT[job.phase] || job.phase);
-      cell.append(badge);
-    }
-    c.append(cell, body);
-    c.onclick = (e) => {
-      if (e.shiftKey) toggleCompare(item.id);
-      else openItem(item.id);
+  function turnOrder(item) {
+    const roles = new Set(item.outputs.map((o) => o.role));
+    const shown = COMPASS.filter((d) => roles.has(d));
+    if (shown.length) return shown;
+    const n = item.character ? item.character.directions : 1;
+    return n >= 8 ? COMPASS : n === 4 ? ["south", "east", "north", "west"] : ["south"];
+  }
+  var rotationUrl = (item, direction) => {
+    const out = item && item.outputs.find((o) => o.role === direction && o.url);
+    return out ? out.url : item && direction === "south" && item.outputs[0] && item.outputs[0].url && !item.outputs[0].role ? item.outputs[0].url : null;
+  };
+  var frameUrls = (item) => item.outputs.filter((o) => o.url).map((o) => o.url);
+  function openFamily(item) {
+    const root = familyRoot(item);
+    if (!root) return;
+    stopFamily();
+    const turnable = item.character && (item.character.kind === "base" || item.character.kind === "state") ? item : root;
+    F = {
+      rootId: root.id,
+      drawn: null,
+      source: turnable.id,
+      direction: item.character && item.character.direction && turnOrder(turnable).includes(item.character.direction) ? item.character.direction : "south",
+      spinning: false,
+      playing: !reducedMotion(),
+      speed: 1,
+      t0: performance.now(),
+      lastSpin: 0,
+      raf: null,
+      panel: null,
+      anims: [],
+      columns: /* @__PURE__ */ new Map(),
+      turn: null
     };
-    return c;
+    renderFamily();
   }
-  function renderMain(items) {
-    const root = $("root");
-    root.textContent = "";
-    if (!S.snap.items.length) {
-      const e = el("div", "empty");
-      e.append(el("p", null, "Nothing has been generated for this project yet."));
-      e.append(el("p", null, "pixelkiln plan shows what the manifest would make; pixelkiln gen makes it."));
-      root.append(e);
+  function closeFamily() {
+    stopFamily();
+    $("dialog-host").textContent = "";
+  }
+  function stopFamily() {
+    if (F && F.raf !== null) cancelAnimationFrame(F.raf);
+    F = null;
+  }
+  function refreshFamily() {
+    if (!F) return;
+    if (!F.panel || !F.panel.isConnected) {
+      stopFamily();
       return;
     }
-    if (!items.length) {
-      const e = el("div", "empty");
-      e.append(el("p", null, "No generations match these filters."));
-      const b = el("button", null, "Clear filters");
-      b.type = "button";
-      b.onclick = clearFilters;
-      e.append(b);
-      root.append(e);
+    if (F.drawn !== S.snap) renderFamily();
+  }
+  function renderFamily() {
+    if (!F) return;
+    const root = S.snap.items.find((i) => i.id === F.rootId);
+    if (!root) {
+      closeFamily();
       return;
     }
-    const hidden = Math.max(0, items.length - ui.limit);
-    const shown = hidden ? items.slice(0, ui.limit) : items;
-    const unfiltered = !ui.projects.size && !ui.q && !ui.states.size && !ui.providers.size && !ui.generators.size;
-    const projects = S.snap.workspace ? S.snap.workspace.projects.filter((pr) => ui.projects.size ? ui.projects.has(pr.id) : unfiltered || shown.some((i) => i.project === pr.id)) : [null];
-    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 }] : [];
-      if (pr) sections.push({ project: pr, style: null, items: null, count: inProject.length });
-      sections.push(...styleSections);
-    }
-    for (const sec of sections) {
-      if (sec.project) {
-        root.append(projectHeader(sec.project, sec.count));
-        continue;
-      }
-      const wrap = el("section", "style");
-      if (sec.style) {
-        const s = sec.style;
-        const head = el("div", "shead");
-        head.append(el("h2", null, s.id));
-        const meta = el("div", "meta");
-        meta.append(el("span", null, s.provider), el("span", null, s.generator));
-        if (s.outDir) meta.append(el("span", "mono", s.outDir));
-        if (s.palette.length) {
-          const sw = el("span", "swatches");
-          for (const c of s.palette) {
-            const i = el("i");
-            i.style.background = c;
-            i.title = c;
-            sw.append(i);
-          }
-          meta.append(sw);
-        }
-        if (s.quality) meta.append(el("span", null, "quality profile"));
-        if (s.characters) {
-          const parts = [];
-          parts.push(s.characters.bases + (s.characters.bases === 1 ? " character" : " characters"));
-          if (s.characters.states) parts.push(s.characters.states + (s.characters.states === 1 ? " state" : " states"));
-          if (s.characters.animations) parts.push(s.characters.animations + (s.characters.animations === 1 ? " loop" : " loops"));
-          if (s.characters.portraits) parts.push(s.characters.portraits + (s.characters.portraits === 1 ? " portrait" : " portraits"));
-          if (s.characters.outfits) parts.push(s.characters.outfits + (s.characters.outfits === 1 ? " outfit" : " outfits"));
-          meta.append(el("span", null, parts.join(", ")));
-        }
-        meta.append(el("span", null, sec.items.length + " of " + s.items + (s.items === 1 ? " asset" : " assets")));
-        if (Object.keys(s.spendByUnit).length) meta.append(el("span", null, fmtSpend(s.spendByUnit)));
-        head.append(meta);
-        const addKey = "new:" + (s.project || "") + ":" + s.id;
-        const tools = el("div", "tools");
-        if (s.outDir && s.candidates !== null) tools.append(candidatesControl(s));
-        if (GENERATION && s.actionable.keys.length) {
-          const g = el("button", "primary", "Generate " + s.actionable.keys.length + " · " + fmtCost(s.actionable.costUnit, Math.round(s.actionable.cost * 100) / 100));
-          g.type = "button";
-          g.onclick = () => generateDialog(S.snap.items.filter((i) => i.project === s.project && s.actionable.keys.includes(i.key)), { project: s.project });
-          tools.append(g);
-        }
-        const refreshable = S.snap.items.filter((i) => i.project === s.project && i.styleId === s.id && i.refreshable && i.upstreamUrl);
-        if (GENERATION && refreshable.length) {
-          const r = el("button", null, "Pull upstream " + refreshable.length);
-          r.type = "button";
-          r.title = "Re-download objects edited in the provider’s own editor; no cost";
-          r.onclick = () => generateDialog(refreshable, { project: s.project, refresh: true });
-          tools.append(r);
-        }
-        const styleKey = "style:" + (s.project || "") + ":" + s.id;
-        if (EDITABLE && s.outDir) {
-          const es = el("button", null, ui.editing === styleKey ? "Cancel" : "Edit style");
-          es.type = "button";
-          es.onclick = () => {
-            ui.editing = ui.editing === styleKey ? null : styleKey;
-            ui.notice = null;
-            render();
-          };
-          tools.append(es);
-          const add = el("button", "add", ui.editing === addKey ? "Cancel" : "+ Add asset");
-          add.type = "button";
-          add.onclick = () => {
-            ui.editing = ui.editing === addKey ? null : addKey;
-            render();
-          };
-          tools.append(add);
-        }
-        if (tools.childNodes.length) head.append(tools);
-        wrap.append(head);
-        if (ui.notice && ui.notice.id === styleKey) wrap.append(el("div", "notice", ui.notice.text));
-        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);
-      root.append(wrap);
-    }
-    if (hidden) {
-      const more = el("div", "empty");
-      more.append(el("p", null, hidden + " more " + (hidden === 1 ? "generation is" : "generations are") + " not shown."));
-      const b = el("button", null, "Show all " + items.length);
-      b.type = "button";
-      b.onclick = () => {
-        ui.limit = Infinity;
-        render();
-      };
-      more.append(b);
-      root.append(more);
+    F.drawn = S.snap;
+    const members = familyMembers(root);
+    const turnables = members.filter((m) => m.character.kind === "base" || m.character.kind === "state");
+    if (!turnables.some((m) => m.id === F.source)) F.source = root.id;
+    const source = turnables.find((m) => m.id === F.source) || root;
+    const order = turnOrder(source);
+    if (!order.includes(F.direction)) F.direction = order[0];
+    const host = $("dialog-host");
+    const scroll = F.panel ? F.panel.scrollTop : 0;
+    host.textContent = "";
+    F.anims = [];
+    F.columns = /* @__PURE__ */ new Map();
+    const scrim = el("div", "sheet-scrim");
+    scrim.onclick = closeFamily;
+    const panel = el("div", "sheet family-sheet");
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", "Family of " + root.key);
+    F.panel = panel;
+    const bar = el("div", "rbar");
+    const back = el("button", null, "Back to gallery");
+    back.type = "button";
+    back.onclick = closeFamily;
+    const title = el("b", "mono", root.key);
+    const c = root.character;
+    bar.append(back, title, el("span", null, (c.generator === "objectPro" ? "object" : "character") + " · " + c.mode + " · " + root.width + "×" + root.height));
+    const tally = el("span", "family-tally");
+    const counts = {};
+    for (const m of members) counts[m.state] = (counts[m.state] || 0) + 1;
+    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);
     }
-  }
-  function projectHeader(pr, count) {
-    const head = el("section", "project");
-    const line = el("div", "phead");
-    line.append(el("h2", null, pr.id));
-    const meta = el("div", "meta");
-    if (pr.name !== pr.id) meta.append(el("span", null, pr.name));
-    meta.append(el("span", "mono", shortPath(pr.manifest)));
-    if (pr.account) meta.append(el("span", null, pr.account));
-    if (pr.error) {
-      meta.append(el("span", "state-bad", "unreadable: " + pr.error));
-    } else {
-      meta.append(el("span", null, count + " of " + pr.items + " shown · " + pr.entries + " lock " + (pr.entries === 1 ? "entry" : "entries")));
-      if (Object.keys(pr.spendByUnit).length) meta.append(el("span", null, fmtSpend(pr.spendByUnit)));
+    bar.append(tally);
+    if (GENERATION) {
+      const todo = members.filter((m) => m.declared && m.currentSpecHash !== null && ["missing", "stale", "failed"].includes(m.state));
+      if (todo.length) {
+        const totals = {};
+        for (const m of todo) if (m.estimatedCost !== null) totals[m.costUnit] = (totals[m.costUnit] || 0) + m.estimatedCost;
+        const price = Object.entries(totals).map(([unit, n]) => fmtCost(unit, Math.round(n * 100) / 100)).join(" + ");
+        const g = el("button", "primary", "Generate " + todo.length + (price ? " · " + price : ""));
+        g.type = "button";
+        g.title = "One job for the whole family: parents first, then everything drawn from them";
+        g.onclick = () => {
+          stopFamily();
+          generateDialog(todo, { project: root.project });
+        };
+        bar.append(g);
+      }
     }
-    line.append(meta);
-    head.append(line);
-    return head;
+    panel.append(bar);
+    const body = el("div", "family-body");
+    body.append(turntable(root, turnables, source, order));
+    body.append(loopGrid(root, members, order));
+    const extras = members.filter((m) => m.character.kind === "portrait" || m.character.kind === "outfit");
+    if (extras.length) body.append(extrasStrip(extras));
+    panel.append(body);
+    host.append(scrim, panel);
+    panel.scrollTop = scroll;
+    highlight(F.direction);
+    if (F.raf === null) F.raf = requestAnimationFrame(tick);
   }
-  function candidatesControl(style) {
-    const wrap = el("span", "cand");
-    const editKey = "cand:" + (style.project || "") + ":" + style.id;
-    const declared = S.snap.items.filter((i) => i.project === style.project && i.styleId === style.id && i.declared).length;
-    if (!(EDITABLE && style.candidatesEditable) || ui.editing !== editKey) {
-      wrap.append(el("span", null, style.candidates + (style.candidates === 1 ? " candidate" : " candidates") + " per generation"));
-      if (EDITABLE && style.candidatesEditable) {
-        const b = el("button", null, "change");
+  function turntable(root, turnables, source, order) {
+    const wrap = el("section", "turntable");
+    if (turnables.length > 1) {
+      const tabs = el("div", "family-tabs");
+      for (const t of turnables) {
+        const b = el("button", t.id === source.id ? "on" : null, t.id === root.id ? "base" : t.assetId.replace(root.assetId + ".", ""));
         b.type = "button";
+        b.title = t.key + " · " + t.state;
         b.onclick = () => {
-          ui.editing = editKey;
-          render();
+          F.source = t.id;
+          renderFamily();
         };
-        wrap.append(b);
-      } else if (style.provider === "pixellab") {
-        wrap.title = "PixelLab: map and pixflux return one image per generation; a 1dir style returns 4–64 for its size.";
+        tabs.append(b);
       }
-      return wrap;
+      wrap.append(tabs);
     }
-    const input = el("input");
-    input.type = "number";
-    input.min = "1";
-    input.max = "64";
-    input.value = String(style.candidates);
-    const save = el("button", "primary", "Save");
-    save.type = "button";
-    const cancel = el("button", null, "Cancel");
-    cancel.type = "button";
-    cancel.onclick = () => {
-      ui.editing = null;
-      render();
+    const stage = el("div", "tt-stage");
+    stage.tabIndex = 0;
+    stage.setAttribute("role", "img");
+    const img = el("img");
+    const empty = el("div", "tt-empty");
+    const scale = displayScale(source.width, source.height, 256, 256);
+    img.width = Math.round(source.width * scale);
+    img.height = Math.round(source.height * scale);
+    img.alt = source.assetId;
+    stage.append(img, empty);
+    for (const d of order) {
+      const u = rotationUrl(source, d);
+      if (u) {
+        const p = new Image();
+        p.src = u;
+      }
+    }
+    const label = el("div", "tt-label");
+    const rose = el("div", "tt-rose");
+    const roseButtons = /* @__PURE__ */ new Map();
+    for (const d of ROSE) {
+      if (!d) {
+        rose.append(el("i", "tt-hub"));
+        continue;
+      }
+      const b = el("button", null, SHORT[d]);
+      b.type = "button";
+      b.title = d;
+      b.disabled = !order.includes(d);
+      b.onclick = () => turn(d);
+      roseButtons.set(d, b);
+      rose.append(b);
+    }
+    const show = (direction) => {
+      const url = rotationUrl(source, direction);
+      img.hidden = !url;
+      empty.hidden = !!url;
+      if (url) img.src = url;
+      else empty.textContent = source.state === "ok" ? "no " + direction + " rotation" : source.state + ": " + (source.reason || "not generated yet");
+      stage.setAttribute("aria-label", source.assetId + " facing " + direction);
+      label.textContent = direction + " · " + (order.indexOf(direction) + 1) + " of " + order.length;
+      for (const [d, b] of roseButtons) b.classList.toggle("on", d === direction);
     };
-    const note = el("span", null, "affects " + declared + (declared === 1 ? " asset, which becomes stale" : " assets, which become stale"));
-    save.onclick = async () => {
-      save.disabled = true;
-      try {
-        const pr = S.snap.workspace ? S.snap.workspace.projects.find((x) => x.id === style.project) : S.snap.project;
-        const body = { action: "patch-style", styleId: style.id, expectedSha256: pr.manifestSha256, patch: { candidates: Number(input.value) } };
-        if (style.project) body.project = style.project;
-        S.snap = await postEdit(body);
-        ui.editing = null;
-        render();
-      } catch (err) {
-        save.disabled = false;
-        note.textContent = err.message;
-        note.className = "state-bad";
+    const turn = (direction) => {
+      if (!F) return;
+      F.direction = direction;
+      show(direction);
+      highlight(direction);
+    };
+    const stepBy = (n) => {
+      const i = order.indexOf(F.direction);
+      turn(order[(i + n + order.length * 4) % order.length]);
+    };
+    F.turn = turn;
+    show(F.direction);
+    let dragX = null;
+    stage.onpointerdown = (e) => {
+      dragX = e.clientX;
+      stage.setPointerCapture(e.pointerId);
+      F.spinning = false;
+      spin.classList.remove("on");
+    };
+    stage.onpointermove = (e) => {
+      if (dragX === null) return;
+      const steps = Math.trunc((e.clientX - dragX) / DRAG_STEP_PX);
+      if (steps) {
+        dragX += steps * DRAG_STEP_PX;
+        stepBy(steps);
       }
     };
-    wrap.append(input, save, cancel, note);
-    setTimeout(() => input.focus(), 0);
+    stage.onpointerup = stage.onpointercancel = () => {
+      dragX = null;
+    };
+    stage.onkeydown = (e) => {
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        e.stopPropagation();
+        stepBy(1);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        e.stopPropagation();
+        stepBy(-1);
+      }
+    };
+    const controls = el("div", "tt-controls");
+    const prev = el("button", null, "◀");
+    prev.type = "button";
+    prev.title = "Turn back";
+    prev.onclick = () => stepBy(-1);
+    const next = el("button", null, "▶");
+    next.type = "button";
+    next.title = "Turn on";
+    next.onclick = () => stepBy(1);
+    const spin = el("button", F.spinning ? "on" : null, "Spin");
+    spin.type = "button";
+    spin.title = "Turn through every rotation on a loop";
+    spin.onclick = () => {
+      F.spinning = !F.spinning;
+      F.lastSpin = performance.now();
+      spin.classList.toggle("on", F.spinning);
+    };
+    prev.disabled = next.disabled = spin.disabled = order.length < 2;
+    controls.append(prev, next, spin);
+    const side = el("div", "tt-side");
+    side.append(rose, controls, label);
+    const open = el("button", "linkish", "Open " + source.assetId);
+    open.type = "button";
+    open.onclick = () => {
+      closeFamily();
+      openItem(source.id);
+    };
+    side.append(open);
+    const row2 = el("div", "tt-row");
+    row2.append(stage, side);
+    wrap.append(row2);
+    wrap.append(el("small", "state-dim", order.length > 1 ? "Drag the sprite sideways, use ← and →, or pick a direction to turn it. The loops below follow." : "One direction: this " + (root.character.generator === "objectPro" ? "object" : "character") + " does not turn."));
     return wrap;
   }
-  function historySection(item) {
-    const limit = projectOf(item)?.historyLimit;
-    if (!item.history.length && !((limit ?? 0) > 0 && item.status === "downloaded")) return null;
-    const s = el("section", "meta");
-    s.append(el("h3", null, item.history.length ? "Previous generations (" + item.history.length + ")" : "Previous generations"));
-    if (!item.history.length) {
-      s.append(el("div", "state-dim", "None yet. A regeneration keeps the generation it replaces, up to " + limit + " per asset (PIXELKILN_HISTORY, or the manifest’s history), so it can be brought back from here."));
-      return s;
+  function loopGrid(root, members, order) {
+    const loops = members.filter((m) => m.character.kind === "animation");
+    const wrap = el("section", "loop-grid");
+    const head = el("div", "lg-head");
+    head.append(el("h3", null, loops.length ? "Loops" : "No loops yet"));
+    if (loops.length) {
+      const play = el("button", null, F.playing ? "Pause" : "Play");
+      play.type = "button";
+      play.onclick = () => {
+        F.playing = !F.playing;
+        play.textContent = F.playing ? "Pause" : "Play";
+        if (F.playing) F.t0 = performance.now();
+      };
+      head.append(play);
+      const speed = el("select");
+      speed.setAttribute("aria-label", "Playback speed");
+      for (const s of SPEEDS) speed.append(new Option(s + "×", String(s)));
+      speed.value = String(F.speed);
+      speed.onchange = () => {
+        F.speed = Number(speed.value);
+        F.t0 = performance.now();
+      };
+      head.append(speed);
     }
-    const list = el("div", "versions");
-    const job = GENERATION ? activeJobFor(item) : null;
-    for (const g of item.history) {
-      const v = el("div", "version");
-      const thumb2 = el("div", "thumb");
-      const first = g.outputs[0];
-      if (first && first.url) {
-        const img = el("img");
-        img.src = first.url;
-        img.alt = "generation #" + g.index;
-        thumb2.append(img);
-      } else thumb2.append(el("span", null, g.cached ? "" : "not cached"));
-      const facts = el("div", "facts");
-      const head = el("div");
-      const billedNote = g.billed && (g.billed.unit !== g.costUnit || g.billed.amount !== g.cost) ? " (billed " + fmtCost(g.billed.unit, g.billed.amount) + ")" : "";
-      head.append(el("b", null, "#" + g.index), document.createTextNode(" · " + fmtWhen(g.downloadedAt || g.submittedAt) + " · " + fmtCost(g.costUnit, g.cost) + billedNote + (g.outputs.length > 1 ? " · " + g.outputs.length + " files" : "")));
-      facts.append(head);
-      const prompt = el("div", "prompt" + (g.promptDiffers ? " differs" : ""), (g.promptDiffers ? "prompt: " : "same prompt: ") + g.prompt);
-      prompt.title = g.prompt;
-      facts.append(prompt);
-      const meta = el("div", "meta");
-      meta.append(document.createTextNode((first ? first.sha256.slice(0, 12) + "…" : "") + (g.cached ? " · bytes cached locally" : " · not in the local cache; a restore re-downloads it")));
-      if (g.upstreamUrl) {
-        const a = el("a", null, "open in " + item.provider + " ↗");
-        a.href = g.upstreamUrl;
-        a.target = "_blank";
-        a.rel = "noopener";
-        meta.append(document.createTextNode(" · "), a);
-      }
-      facts.append(meta);
-      const acts = el("div", "acts");
-      if (GENERATION) {
-        const b = el("button", null, "Restore this one · no cost");
-        b.type = "button";
-        b.disabled = !!job;
-        b.title = job ? "Wait for the running job to finish" : "The current generation moves into history; this one becomes current and its bytes are written back";
-        b.onclick = () => generateDialog([item], { project: item.project, revert: String(g.index), generation: g });
-        acts.append(b);
-      }
-      v.append(thumb2, facts, acts);
-      list.append(v);
+    wrap.append(head);
+    if (!loops.length) {
+      wrap.append(el("p", "state-dim", EDITABLE ? "Add one from the base's drawer (+ New animation), or draft a whole character in the studio." : "None declared."));
+      return wrap;
     }
-    s.append(list);
-    s.append(el("div", "state-dim", "Keeping up to " + limit + " per asset; a restore moves the current generation into this list, so it can be undone the same way." + (GENERATION ? "" : " Restoring needs the gallery started with --budget (any amount; nothing is spent).")));
-    return s;
-  }
-  function upstreamSection(item) {
-    if (!item.upstreamUrl && !(GENERATION && item.refreshable)) return null;
-    const s = el("section", "meta");
-    s.append(el("h3", null, "Upstream"));
-    const dl = el("dl");
-    if (item.upstreamUrl) {
-      const a = el("a", null, "Open in " + item.provider + " ↗");
-      a.href = item.upstreamUrl;
-      a.target = "_blank";
-      a.rel = "noopener";
-      const tiles = item.generator === "tiles";
-      row(dl, tiles ? "tile set" : "object", a);
-      row(dl, "note", item.provider === "pixellab" ? tiles ? "The tile set this generation was chosen from. Edit it there with PixelLab’s editor, then pull the changes back here; the lockfile records the new bytes as this generation." : "The account object this generation came from. Edit it there with PixelLab’s editor, then pull the changes back here; the lockfile records the new bytes as this generation." : "The provider’s page for this object.");
+    const used = /* @__PURE__ */ new Set([...order, ...loops.map((l) => l.character.direction).filter(Boolean)]);
+    const columns = COMPASS.filter((d) => used.has(d));
+    const rows = /* @__PURE__ */ new Map();
+    for (const l of loops) {
+      const k = (l.character.parentKey || "") + "|" + loopName(l);
+      if (!rows.has(k)) rows.set(k, []);
+      rows.get(k).push(l);
     }
-    s.append(dl);
-    if (GENERATION && item.refreshable) {
-      const acts = el("div", "hand-actions");
-      const b = el("button", null, "Pull upstream changes · no cost");
+    const table = el("table", "lg");
+    const thead = el("thead");
+    const hr = el("tr");
+    hr.append(el("th", "lg-name", ""));
+    for (const d of columns) {
+      const th = el("th", null);
+      const b = el("button", "lg-dir", SHORT[d]);
       b.type = "button";
-      b.onclick = () => generateDialog([item], { project: item.project, refresh: true });
-      acts.append(b);
-      s.append(acts);
+      b.title = "Turn to " + d;
+      b.disabled = !order.includes(d);
+      b.onclick = () => F && F.turn && F.turn(d);
+      th.append(b);
+      hr.append(th);
+      column(d, th);
     }
-    return s;
-  }
-  function jobStrip(item, job) {
-    const strip = el("div", "job-strip");
-    const ph = el("span", "ph");
-    ph.append(el("i", "dot busy"), document.createTextNode(job.phase));
-    const last = el("span", "last", job.messages.length ? job.messages[job.messages.length - 1].trim() : "");
-    last.title = job.messages.join("\n");
-    const what = el("span", "what", (JOB_VERB[job.mode] || job.mode) + " this asset: " + (PHASE_TEXT[job.phase] || job.phase) + (job.mode === "generate" && job.phase !== "review" ? ". The current file stays until the new result is downloaded." : "."));
-    strip.append(ph, last, what);
-    const acts = el("div", "acts");
-    if (job.phase === "review" && job.review.includes(item.key)) {
-      const b = el("button", "primary", "Review candidates");
-      b.type = "button";
-      b.onclick = () => openReview(job.id);
-      acts.append(b);
+    thead.append(hr);
+    table.append(thead);
+    const tbody = el("tbody");
+    for (const [k, cells] of rows) {
+      const parentKey = k.split("|")[0];
+      const parent = byKey(root.project, parentKey) || root;
+      const tr = el("tr");
+      const th = el("th", "lg-name");
+      const name = loopName(cells[0]);
+      th.append(el("b", "mono", name.startsWith(root.assetId + ".") ? name.slice(root.assetId.length + 1) : name));
+      const sample = cells.find((l) => !l.mirrorOfKey) || cells[0];
+      const meta = [sample.character.mode, frameUrls(sample).length ? frameUrls(sample).length + " frames" : null, parent !== root ? "from " + parent.assetId.replace(root.assetId + ".", "") : null].filter(Boolean).join(" · ");
+      th.append(el("small", null, meta));
+      tr.append(th);
+      for (const d of columns) {
+        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", "·"));
+        tr.append(td);
+      }
+      tbody.append(tr);
     }
-    const logBtn = el("button", null, ui.logs.has(job.id) ? "Hide log" : "Log");
-    logBtn.type = "button";
-    logBtn.onclick = () => {
-      ui.logs.has(job.id) ? ui.logs.delete(job.id) : ui.logs.add(job.id);
-      renderDrawer();
+    table.append(tbody);
+    const scroller = el("div", "lg-scroll");
+    scroller.append(table);
+    wrap.append(scroller);
+    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;
+  }
+  function column(direction, node) {
+    if (!F.columns.has(direction)) F.columns.set(direction, []);
+    F.columns.get(direction).push(node);
+  }
+  function loopCell(item, parent, direction) {
+    const tone = STATE_TONE[item.state] || "dim";
+    const b = el("button", "lg-cell tone-" + tone);
+    b.type = "button";
+    b.title = item.key + " · " + item.state + (item.reason ? ": " + item.reason : "") + (item.mirrorOfKey ? " · mirror of " + item.mirrorOfKey : "");
+    b.onclick = () => {
+      closeFamily();
+      openItem(item.id);
     };
-    acts.append(logBtn);
-    strip.append(acts);
-    if (ui.logs.has(job.id)) {
-      const pre = el("pre", null, job.messages.join("\n"));
-      pre.style.gridColumn = "1 / -1";
-      strip.append(pre);
+    const img = el("img");
+    img.alt = item.assetId;
+    const urls = frameUrls(item);
+    if (urls.length) {
+      img.src = urls[0];
+      for (const u of urls) {
+        const p = new Image();
+        p.src = u;
+      }
+      if (urls.length > 1) F.anims.push({ img, urls, fps: item.fps || 12, index: 0 });
+    } else {
+      const ghost = rotationUrl(parent, direction);
+      if (ghost) {
+        img.src = ghost;
+        b.classList.add("ghost");
+      } else img.hidden = true;
     }
-    return strip;
+    b.append(img);
+    if (item.mirrorOfKey) b.append(el("span", "lg-mirror", "⇋"));
+    if (item.state !== "ok") b.append(el("span", "lg-state", item.state));
+    return b;
   }
-  function generateActions(item) {
-    const row2 = el("div", "gen");
-    if (!GENERATION || !item.declared || item.currentSpecHash === null) return row2;
-    const cost = item.estimatedCost === null ? "" : " · " + fmtCost(item.costUnit, item.estimatedCost);
-    const add = (label, cls, opts) => {
-      const b = el("button", cls, label);
+  function extrasStrip(extras) {
+    const wrap = el("section", "family-extras");
+    wrap.append(el("h3", null, extras.some((e) => e.character.kind === "outfit") ? "Portraits and outfits" : extras.length === 1 ? "Portrait" : "Portraits"));
+    const strip = el("div", "fx-strip");
+    for (const item of extras) {
+      const b = el("button", "lg-cell tone-" + (STATE_TONE[item.state] || "dim"));
       b.type = "button";
-      b.onclick = () => generateDialog([item], { project: item.project, ...opts });
-      row2.append(b);
-    };
-    if (item.state === "missing" || item.state === "stale" || item.state === "failed") add("Generate" + cost, "primary", {});
-    else if (item.state === "ok") add("Regenerate" + cost, null, { force: true });
-    else if (item.state === "orphaned" && item.outputs.every((o) => o.exists)) {
-      add("Restore recorded bytes · no cost", null, { restore: true, force: true });
-      add("Regenerate" + cost, null, { force: true });
-    } else if (item.state === "orphaned") add("Restore · no cost", "primary", { restore: true });
-    else if (item.state === "untracked") add("Generate" + cost + " · replaces the file", null, { force: true });
-    if (item.state === "recoverable" && item.status === "downloaded") {
-      add(paletteRuleOf(item) ? "Snap to the palette · no cost" : "Put the provider’s bytes back · no cost", "primary", { resume: true });
-    } else if (item.state === "in-flight" || item.state === "recoverable") {
-      const holder = S.GEN.jobs.find((job) => job.phase === "review" && job.project === item.project && job.review.includes(item.key));
-      if (holder) {
-        const b = el("button", "primary", "Review candidates");
-        b.type = "button";
-        b.onclick = () => openReview(holder.id);
-        row2.append(b);
-      } else {
-        add(item.status === "review" ? "Resume review" : "Resume · no cost", "primary", { resume: true });
+      b.title = item.key + " · " + item.state;
+      b.onclick = () => {
+        closeFamily();
+        openItem(item.id);
+      };
+      const img = el("img");
+      img.alt = item.assetId;
+      const urls = frameUrls(item);
+      if (urls.length) {
+        img.src = urls[0];
+        if (urls.length > 1) F.anims.push({ img, urls, fps: item.fps || 12, index: 0 });
+      } else img.hidden = true;
+      b.append(img);
+      if (item.state !== "ok") b.append(el("span", "lg-state", item.state));
+      const fig = el("figure");
+      fig.append(b, el("figcaption", "mono", item.assetId));
+      strip.append(fig);
+    }
+    wrap.append(strip);
+    return wrap;
+  }
+  function highlight(direction) {
+    if (!F) return;
+    for (const [d, nodes] of F.columns) for (const n of nodes) n.classList.toggle("col-on", d === direction);
+  }
+  function tick(now) {
+    if (!F) return;
+    if (!F.panel || !F.panel.isConnected) {
+      stopFamily();
+      return;
+    }
+    if (F.playing) {
+      const seconds = Math.max(0, (now - F.t0) / 1e3 * F.speed);
+      for (const a of F.anims) {
+        const i = Math.floor(seconds * a.fps) % a.urls.length;
+        if (i !== a.index) {
+          a.index = i;
+          a.img.src = a.urls[i];
+        }
       }
     }
-    return row2;
+    if (F.spinning && F.turn && now - F.lastSpin >= SPIN_MS / F.speed) {
+      F.lastSpin = now;
+      const source = S.snap.items.find((i) => i.id === F.source);
+      const order = source ? turnOrder(source) : COMPASS;
+      F.turn(order[(order.indexOf(F.direction) + 1) % order.length]);
+    }
+    F.raf = requestAnimationFrame(tick);
   }
+  var familyState = () => F && { rootId: F.rootId, source: F.source, direction: F.direction, playing: F.playing, anims: F.anims.length };
 
   // src/gallery/client/src/pose-editor.ts
   var MIN_FRAMES = 3;
@@ -3023,6 +3485,15 @@
       if (c.kind === "animation") row(dl, "direction", c.direction || "—");
       else row(dl, "directions", String(c.directions));
       if (c.characterId) row(dl, "character id", c.characterId, { mono: true, copy: c.characterId });
+      const root = familyRoot(item);
+      const size = root ? familyMembers(root).length : 0;
+      if (root && size > 1) {
+        const fam = el("button", "add", "Family view · " + size);
+        fam.type = "button";
+        fam.title = "Turn " + root.assetId + " through its rotations and play every loop by direction";
+        fam.onclick = () => openFamily(item);
+        row(dl, "family", fam);
+      }
       const family = S.snap.items.filter((i) => i.character && i.character.parentKey === item.key && i.project === item.project);
       if (family.length) {
         const list = el("div");
@@ -3300,6 +3771,7 @@
     renderMain(visibleItems());
     renderDrawer();
     renderTray();
+    refreshFamily();
   }
   function renderQuietly() {
     const region = formRegion();
@@ -3308,6 +3780,7 @@
     if (region !== "main") renderMain(visibleItems());
     if (region !== "drawer") renderDrawer();
     renderTray();
+    refreshFamily();
   }
 
   // src/gallery/client/src/refresh.ts
@@ -3340,7 +3813,7 @@
   ];
   var BODIES = ["mannequin", "bear", "cat", "dog", "horse", "lion"];
   var VIEWS = ["low top-down", "high top-down", "side"];
-  var COMPASS = ["south", "south-east", "east", "north-east", "north", "north-west", "west", "south-west"];
+  var COMPASS2 = ["south", "south-east", "east", "north-east", "north", "north-west", "west", "south-west"];
   var FOUR = ["south", "east", "north", "west"];
   var PORTRAIT_SIZES = [16, 32, 48, 64, 128, 160];
   var LOOP_MODES = [
@@ -3469,8 +3942,8 @@
     const chosenEngine = () => ENGINES.find((e) => e.id === engine.value);
     const isNewStyle = () => style.value === "";
     const styleDirections = () => {
-      if (isNewStyle()) return Number(directions.value) === 4 ? FOUR : COMPASS;
-      return COMPASS;
+      if (isNewStyle()) return Number(directions.value) === 4 ? FOUR : COMPASS2;
+      return COMPASS2;
     };
     function fillStyles() {
       const keep = style.value;
@@ -3529,7 +4002,7 @@
       what.value = defaults.what ?? "";
       const dirs = el("div", "studio-dirs");
       const boxes = /* @__PURE__ */ new Map();
-      for (const d of COMPASS) {
+      for (const d of COMPASS2) {
         const box = el("input");
         box.type = "checkbox";
         box.checked = (defaults.directions ?? ["south", "west", "north"]).includes(d);
@@ -3859,5 +4332,5 @@
   if (GENERATION) pollJobs();
   if (EDITOR) pollEditor();
   if (ui.compare.length >= 2 && !ui.open) openCompare();
-  window.__pixelkiln = { S, ui };
+  window.__pixelkiln = { S, ui, family: familyState };
 })();