pixelkiln 0.78.0 → 0.80.0

package/dist/client/gallery.css

@@ -466,3 +466,21 @@ td.col-on { background:rgba(255,107,53,.08); }
 .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; } }
+
+/* ---- drawer tabs ---- */
+.dtabs { margin-top:14px; }
+.dtabs .tablist { display:flex; gap:0; border-bottom:1px solid var(--line-strong); position:sticky; top:0; z-index:2; background:var(--panel); }
+.dtabs .tablist button { border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:8px 12px; font:600 12.5px/1 var(--mono); color:var(--dim); }
+.dtabs .tablist button:hover { color:var(--text); }
+.dtabs .tablist button.on { color:var(--accent-soft); border-bottom-color:var(--accent); }
+.dtabs .tabpanel[hidden] { display:none; }
+.dtabs .tabpanel > section.meta:first-child { border-top:0; }

package/dist/client/gallery.js

@@ -46,10 +46,11 @@
     fps: null,
     onion: false,
     selecting: false,
-    selected: /* @__PURE__ */ new Set()
+    selected: /* @__PURE__ */ new Set(),
+    drawerTab: "overview"
   };
   var PREFS_KEY = "pixelkiln.gallery.prefs";
-  var PREF_NAMES = ["playLoops", "backdrop", "notify", "onion"];
+  var PREF_NAMES = ["playLoops", "backdrop", "notify", "onion", "drawerTab"];
   function loadPrefs() {
     try {
       const saved = JSON.parse(localStorage.getItem(PREFS_KEY) || "{}");
@@ -2645,7 +2646,8 @@
       panel: null,
       anims: [],
       columns: /* @__PURE__ */ new Map(),
-      turn: null
+      turn: null,
+      gap: null
     };
     renderFamily();
   }
@@ -2938,7 +2940,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);
@@ -2947,9 +2962,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);
@@ -3880,6 +4053,66 @@
     const host = document.querySelector(".drawer .dbody > div");
     return host ? host.__frames ?? null : null;
   }
+  var TAB_LABEL = { overview: "Overview", files: "Files", history: "History", details: "Details" };
+  var OVERVIEW_FORMS = /^(state|anim|poses|revise|skeleton):/;
+  function drawerTabs(item, panels) {
+    const wrap = el("div", "dtabs");
+    const available = Object.keys(panels).filter((name) => panels[name].childNodes.length);
+    if (ui.editing && OVERVIEW_FORMS.test(ui.editing)) ui.drawerTab = "overview";
+    const current = available.includes(ui.drawerTab) ? ui.drawerTab : "overview";
+    const list = el("div", "tablist");
+    list.setAttribute("role", "tablist");
+    const count = {
+      files: item.outputs.length,
+      history: item.history.length
+    };
+    const buttons = [];
+    for (const name of available) {
+      const b = el("button", name === current ? "on" : null, TAB_LABEL[name] + (count[name] ? " " + count[name] : ""));
+      b.type = "button";
+      b.id = "dtab-" + name;
+      b.setAttribute("role", "tab");
+      b.setAttribute("aria-selected", String(name === current));
+      b.setAttribute("aria-controls", "dpanel-" + name);
+      b.tabIndex = name === current ? 0 : -1;
+      b.onclick = () => {
+        ui.drawerTab = name;
+        show(name);
+      };
+      b.onkeydown = (e) => {
+        const at = available.indexOf(name);
+        const next = e.key === "ArrowRight" ? available[(at + 1) % available.length] : e.key === "ArrowLeft" ? available[(at - 1 + available.length) % available.length] : null;
+        if (!next) return;
+        e.preventDefault();
+        e.stopPropagation();
+        ui.drawerTab = next;
+        show(next);
+        buttons[available.indexOf(next)].focus();
+      };
+      buttons.push(b);
+      list.append(b);
+    }
+    const show = (name) => {
+      for (const [i, b] of buttons.entries()) {
+        const on = available[i] === name;
+        b.classList.toggle("on", on);
+        b.setAttribute("aria-selected", String(on));
+        b.tabIndex = on ? 0 : -1;
+      }
+      for (const n of available) panels[n].hidden = n !== name;
+    };
+    wrap.append(list);
+    for (const name of available) {
+      const panel = panels[name];
+      panel.className = "tabpanel";
+      panel.id = "dpanel-" + name;
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", "dtab-" + name);
+      wrap.append(panel);
+    }
+    show(current);
+    return wrap;
+  }
   var CHARACTER_KIND = {
     base: "base",
     state: "state (a pose or outfit of its parent)",
@@ -3957,11 +4190,12 @@
     }
     if (canEdit && ui.editing === item.id) body.append(editForm(item));
     if (item.error && !item.reason.includes(item.error)) body.append(stateNode("failed", item.error));
+    const tab = { overview: el("div"), files: el("div"), history: el("div"), details: el("div") };
+    let pane = tab.overview;
     {
       const { s, dl } = section("Generation");
       row(dl, "provider", item.provider);
       row(dl, "generator", item.generator + (item.tileFeature ? " · " + item.tileFeature : ""));
-      row(dl, "lock status", item.status || "none (nothing submitted)");
       const pr = el("div", "prompt", item.prompt);
       row(dl, item.status ? "prompt sent" : "prompt", pr);
       if (item.currentPrompt) row(dl, "prompt now", el("div", "prompt state-warn", item.currentPrompt));
@@ -3987,13 +4221,19 @@
         row(dl, "estimate now", fmtCost(item.costUnit, item.estimatedCost) + (item.candidates && item.candidates > 1 ? " for " + item.candidates + " candidates" : ""));
       }
       if (item.candidateIndex !== null) row(dl, "candidate", "#" + (item.candidateIndex + 1) + " chosen in review");
+      pane.append(s);
+    }
+    {
+      const { s, dl } = section("Provider record");
+      row(dl, "lock status", item.status || "none (nothing submitted)");
       row(dl, "submitted", fmtWhen(item.submittedAt));
       row(dl, "downloaded", fmtWhen(item.downloadedAt));
       row(dl, "job id", item.jobId, { mono: true, copy: item.jobId });
       row(dl, "object id", item.objectId, { mono: true, copy: item.objectId });
       row(dl, "review object", item.reviewObjectId, { mono: true, copy: item.reviewObjectId });
-      body.append(s);
+      tab.details.append(s);
     }
+    pane = tab.files;
     {
       const s = el("section", "meta");
       s.append(el("h3", null, item.outputs.length === 1 ? "Output" : "Outputs (" + item.outputs.length + ")"));
@@ -4019,14 +4259,15 @@
         box.append(dl);
         s.append(box);
       }
-      body.append(s);
+      pane.append(s);
     }
     const hand = handEditSection(item);
-    if (hand) body.append(hand);
+    if (hand) pane.append(hand);
     const upstream = upstreamSection(item);
-    if (upstream) body.append(upstream);
+    if (upstream) pane.append(upstream);
     const versions = historySection(item);
-    if (versions) body.append(versions);
+    if (versions) tab.history.append(versions);
+    pane = tab.overview;
     if (item.character) {
       const c = item.character;
       const { s, dl } = section("Character");
@@ -4077,19 +4318,19 @@
         if (ui.editing === stateKey) s.append(newStateForm(item));
         if (ui.editing === animKey) s.append(newAnimationForm(item));
       }
-      body.append(s);
+      pane.append(s);
     }
     if (item.mirrorOfKey) {
       const { s, dl } = section("Mirror");
       row(dl, "flipped from", keyLink(item, item.mirrorOfKey));
       row(dl, "cost", "none; made locally from that asset's files");
-      body.append(s);
+      pane.append(s);
     }
     const mirrors = S.snap.items.filter((i) => i.mirrorOfKey === item.key && i.project === item.project);
     if (mirrors.length) {
       const { s, dl } = section(mirrors.length === 1 ? "Mirror of this asset" : "Mirrors of this asset");
       for (const m of mirrors) row(dl, m.character && m.character.direction ? m.character.direction : "flipped", keyLink(item, m.key));
-      body.append(s);
+      pane.append(s);
     }
     if (item.revision || item.revisionParentKey) {
       const { s, dl } = section("Lineage");
@@ -4125,7 +4366,7 @@
           row(dl, "poses", el("span", "state-warn", "the keypoints file does not exist yet"));
         }
       }
-      body.append(s);
+      pane.append(s);
     }
     const children = S.snap.items.filter((i) => i.revisionParentKey === item.key && i.project === item.project);
     const reviseKey = "revise:" + item.id;
@@ -4158,8 +4399,9 @@
         if (ui.editing === reviseKey) s.append(newRevisionForm(item));
         if (ui.editing === skeletonKey) s.append(skeletonAnimationForm(item));
       }
-      body.append(s);
+      pane.append(s);
     }
+    pane = tab.details;
     if (item.quality) {
       const q = item.quality;
       const { s, dl } = section("Quality");
@@ -4191,7 +4433,7 @@
       row(dl, "output", q.output, { mono: true });
       row(dl, "record", q.record + (q.recordExists ? "" : " (not written yet)"), { mono: true });
       if (q.check && !q.check.safe) row(dl, "check", el("div", "state-warn", q.check.reasons.join("\n")));
-      body.append(s);
+      pane.append(s);
       if (q.outputs.some((o) => o.url)) {
         const strip = el("div", "members");
         for (const o of q.outputs.filter((o2) => o2.url)) {
@@ -4226,15 +4468,16 @@
       row(dl, "category", item.category);
       row(dl, "tags", item.tags && item.tags.length ? item.tags.join(", ") : null);
       row(dl, "source art", item.source, { mono: true });
-      body.append(s);
+      pane.append(s);
     }
     if (item.asset) {
       const declared = Object.fromEntries(Object.entries(item.asset).filter(([, v]) => !(Array.isArray(v) && !v.length) && !(v && typeof v === "object" && !Array.isArray(v) && !Object.keys(v).length)));
-      body.append(jsonDetails("Manifest asset", declared));
+      pane.append(jsonDetails("Manifest asset", declared));
     }
     if (item.providerMetadata && Object.keys(item.providerMetadata).length) {
-      body.append(jsonDetails("Provider metadata", item.providerMetadata));
+      pane.append(jsonDetails("Provider metadata", item.providerMetadata));
     }
+    body.append(drawerTabs(item, tab));
     drawer.append(head, body);
     host.append(scrim, drawer);
     close.focus({ preventScroll: true });

package/dist/index.cjs

@@ -15409,7 +15409,12 @@ var AssetPatchSchema = import_zod8.z.object({
   width: import_zod8.z.number().int().nullable().optional(),
   height: import_zod8.z.number().int().nullable().optional(),
   size: import_zod8.z.number().int().nullable().optional(),
-  tags: import_zod8.z.array(import_zod8.z.string()).optional()
+  tags: import_zod8.z.array(import_zod8.z.string()).optional(),
+  /**
+   * A loop shorthand's `animation.directions`, replaced whole: each named
+   * direction is drawn, and each one's flip comes free as a mirror.
+   */
+  loopDirections: import_zod8.z.array(CharacterDirectionSchema).min(1).optional()
 }).strict();
 var NewStateSchema = import_zod8.z.object({
   /** Asset id of the parent this states; must already exist. */
@@ -15758,6 +15763,13 @@ function applyEdit(raw, edit) {
     if (patch.tags.length) asset.tags = patch.tags;
     else delete asset.tags;
   }
+  if (patch.loopDirections) {
+    const animation = asset.animation;
+    if (!animation || !Array.isArray(animation.directions)) {
+      throw new ManifestEditError(`asset "${edit.assetId}" is not a loop declared with animation.directions`);
+    }
+    asset.animation = { ...animation, directions: patch.loopDirections };
+  }
 }
 async function withCandidate(manifestPath, edit, use, unchanged) {
   const absolute = import_node_path27.default.resolve(manifestPath);