pixelkiln 0.78.0 → 0.79.0

package/dist/client/gallery.css

@@ -466,3 +466,12 @@ 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; } }

package/dist/client/gallery.js

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

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);