pixelkiln 0.79.0 → 0.80.0

package/dist/client/gallery.css

@@ -475,3 +475,12 @@ td.col-on { background:rgba(255,107,53,.08); }
 .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) || "{}");
@@ -4052,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)",
@@ -4129,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));
@@ -4159,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 + ")"));
@@ -4191,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");
@@ -4249,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");
@@ -4297,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;
@@ -4330,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");
@@ -4363,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)) {
@@ -4398,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/docs/CLI.md

@@ -458,6 +458,19 @@ provider, and never writes anything. Stop it with Ctrl+C. See the
 [Getting started guide](GETTING_STARTED.md#start-a-new-project) for a
 screenshot.
 
+A record's drawer keeps the preview, its state, and its actions at the
+top. The rest of the record is split into tabs:
+
+- **Overview:** the generation, the character family, mirrors, lineage and
+  revisions, and the forms that add to them.
+- **Files:** outputs, hand edits, and upstream edits.
+- **History:** earlier generations, which can be brought back.
+- **Details:** the provider record (job and object ids, times), the quality
+  record, identity, and the raw manifest asset and provider metadata.
+
+The tab in view stays as you step through records, and ← and → move
+between tabs once one has focus.
+
 #### Looking at sprites
 
 - **Loops on the grid:** a loop's card plays while the pointer is over it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelkiln",
-  "version": "0.79.0",
+  "version": "0.80.0",
   "description": "Manifest-driven pixel-art generation, review, recovery, and packaging with deterministic provenance.",
   "type": "module",
   "sideEffects": false,