pixelkiln 0.80.0 → 0.81.0

package/dist/client/gallery.css

@@ -84,7 +84,7 @@ section.project { border-bottom:1px solid var(--line-strong); background:var(--p
 .card:hover { border-color:var(--line-strong); }
 .card.active { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
 .card.ghost { border-style:dashed; background:transparent; }
-.cell { height:132px; display:grid; place-items:center; background-color:var(--stage-bg);
+.cell { height:132px; flex:none; display:grid; place-items:center; background-color:var(--stage-bg);
   background-image:var(--stage-pattern); background-size:12px 12px; background-position:0 0,6px 6px;
   overflow:hidden; position:relative; padding:8px; }
 .card.ghost .cell { background-image:none; background-color:var(--panel-deep); color:var(--dim); font-size:12px; }
@@ -484,3 +484,44 @@ td.col-on { background:rgba(255,107,53,.08); }
 .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; }
+
+/* ---- View menu, card sizes, tag chips, shortcut sheet ---- */
+.bar { flex-wrap:nowrap; }
+.bar > button, .bar > .editing { white-space:nowrap; flex:none; }
+.bar .search { flex:0 1 360px; min-width:180px; }
+.menu { position:relative; }
+.menu > summary { list-style:none; cursor:pointer; padding:6px 11px; border:1px solid var(--line); white-space:nowrap; }
+.menu > summary::-webkit-details-marker { display:none; }
+.menu > summary::after { content:' ▾'; color:var(--dim); font-size:11px; }
+.menu[open] > summary { border-color:var(--accent); color:var(--accent-soft); }
+.menu-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:15; width:300px; display:grid; gap:10px;
+  padding:12px; background:var(--panel); border:1px solid var(--line-strong); box-shadow:0 10px 30px rgba(0,0,0,.45); }
+.menu-row { display:grid; grid-template-columns:78px 1fr; align-items:center; gap:10px; font-size:12.5px; }
+.menu-row > span:first-child { color:var(--dim); font:600 11.5px/1 var(--mono); }
+.menu-row.check { display:flex; gap:8px; color:var(--text); }
+.menu-row[hidden] { display:none; }
+.menu-row select { width:100%; }
+.seg { display:inline-flex; }
+.seg button { padding:4px 12px; font:600 12px/1 var(--mono); }
+.seg button + button { border-left:0; }
+.seg button.on { background:var(--panel-deep); color:var(--accent-soft); border-color:var(--accent); }
+#keys { width:32px; padding:6px 0; font:700 13px/1 var(--mono); }
+body[data-size="s"] .grid { grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:8px; }
+body[data-size="s"] .cell { height:96px; }
+/* A card not yet drawn holds this size (content-visibility), so it has to match the card size. */
+body[data-size="s"] .card { contain-intrinsic-size:auto 132px auto 160px; }
+body[data-size="l"] .card { contain-intrinsic-size:auto 260px auto 275px; }
+body[data-size="s"] .cbody { padding:6px 8px; }
+body[data-size="l"] .grid { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
+body[data-size="l"] .cell { height:210px; }
+.chip.tag { font-family:var(--mono); }
+.keys-sheet { background:var(--panel); border:1px solid var(--accent); width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 64px);
+  overflow-y:auto; padding:16px 18px; display:grid; gap:14px; }
+.keys-head { display:flex; align-items:center; justify-content:space-between; }
+.keys-sheet h3 { margin:0; font:650 14px/1.2 var(--mono); }
+.keys-sheet h4 { margin:0 0 6px; font:650 12px/1 var(--mono); color:var(--accent-soft); }
+.keys-sheet dl { display:grid; grid-template-columns:150px 1fr; gap:6px 16px; margin:0; font-size:13px; }
+.keys-sheet dt { white-space:nowrap; }
+.keys-sheet dd { margin:0; color:var(--dim); }
+.keys-sheet kbd { font:600 11.5px/1 var(--mono); border:1px solid var(--line-strong); border-bottom-width:2px; padding:2px 6px; }
+@media (max-width: 900px) { .bar { flex-wrap:wrap; } }

package/dist/client/gallery.js

@@ -47,16 +47,26 @@
     onion: false,
     selecting: false,
     selected: /* @__PURE__ */ new Set(),
-    drawerTab: "overview"
+    drawerTab: "overview",
+    tags: /* @__PURE__ */ new Set(),
+    size: "m"
   };
+  var CARD_SIZES = {
+    s: { box: [112, 80], tile: [48, 36] },
+    m: { box: [156, 116], tile: [66, 52] },
+    l: { box: [240, 190], tile: [108, 88] }
+  };
+  var declaredTags = (item) => item.asset && Array.isArray(item.asset.tags) ? item.asset.tags : [];
   var PREFS_KEY = "pixelkiln.gallery.prefs";
-  var PREF_NAMES = ["playLoops", "backdrop", "notify", "onion", "drawerTab"];
+  var PREF_NAMES = ["playLoops", "backdrop", "notify", "onion", "drawerTab", "size"];
   function loadPrefs() {
     try {
       const saved = JSON.parse(localStorage.getItem(PREFS_KEY) || "{}");
       for (const name of PREF_NAMES) if (typeof saved[name] === typeof ui[name]) ui[name] = saved[name];
     } catch {
     }
+    if (!CARD_SIZES[ui.size]) ui.size = "m";
+    document.body.dataset.size = ui.size;
     applyBackdrop();
   }
   function savePrefs() {
@@ -1197,6 +1207,7 @@
       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 (ui.tags.size && !declaredTags(item).some((t) => ui.tags.has(t))) return false;
       if (!q) return true;
       const hay = [
         item.id,
@@ -1304,7 +1315,19 @@
       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 byTag = /* @__PURE__ */ new Map();
+    for (const item of S.snap.items) for (const t2 of declaredTags(item)) byTag.set(t2, (byTag.get(t2) || 0) + 1);
+    for (const t2 of ui.tags) if (!byTag.has(t2)) byTag.set(t2, 0);
+    if (byTag.size) {
+      chips.append(el("span", "sep"));
+      for (const [k, v] of [...byTag].sort()) {
+        const c = chip("#" + k, v, ui.tags, k);
+        c.classList.add("tag");
+        c.title = "Assets tagged “" + k + "” in the manifest";
+        chips.append(c);
+      }
+    }
+    if (ui.states.size || ui.providers.size || ui.generators.size || ui.projects.size || ui.tags.size || ui.q) {
       const clear = el("button", "chip", "clear filters");
       clear.type = "button";
       clear.onclick = () => clearFilters();
@@ -1316,6 +1339,7 @@
     ui.providers.clear();
     ui.generators.clear();
     ui.projects.clear();
+    ui.tags.clear();
     ui.q = "";
     $("q").value = "";
     render();
@@ -1337,7 +1361,7 @@
         img2.src = o.url;
         img2.alt = o.role || item.assetId;
         img2.loading = "lazy";
-        const s2 = displayScale(w, h, 66, 52);
+        const s2 = displayScale(w, h, ...CARD_SIZES[ui.size].tile);
         if (s2 >= 1) {
           img2.width = w * s2;
           img2.height = h * s2;
@@ -1352,7 +1376,7 @@
     img.src = shown[0].url;
     img.alt = item.assetId;
     img.loading = "lazy";
-    const s = displayScale(w, h, 156, 116);
+    const s = displayScale(w, h, ...CARD_SIZES[ui.size].box);
     if (s >= 1) {
       img.width = w * s;
       img.height = h * s;
@@ -4489,6 +4513,7 @@
     ui.states = new Set(list("state"));
     ui.providers = new Set(list("provider"));
     ui.generators = new Set(list("generator"));
+    ui.tags = new Set(list("tag"));
     ui.projects = new Set(list("project"));
     ui.compare = list("compare").slice(0, 4);
     if (["key", "newest", "oldest", "cost", "size"].includes(params.get("sort") ?? "")) ui.sort = params.get("sort");
@@ -4500,6 +4525,7 @@
     if (ui.states.size) params.set("state", [...ui.states].join(","));
     if (ui.providers.size) params.set("provider", [...ui.providers].join(","));
     if (ui.generators.size) params.set("generator", [...ui.generators].join(","));
+    if (ui.tags.size) params.set("tag", [...ui.tags].join(","));
     if (ui.projects.size) params.set("project", [...ui.projects].join(","));
     if (ui.compare.length) params.set("compare", ui.compare.join(","));
     if (ui.sort !== "key") params.set("sort", ui.sort);
@@ -5061,10 +5087,104 @@
     setTimeout(() => baseId.focus(), 0);
   }
 
+  // src/gallery/client/src/keys.ts
+  var GROUPS = [
+    {
+      title: "Anywhere",
+      keys: [
+        [["/"], "jump to search"],
+        [["?"], "this list"],
+        [["Esc"], "close whatever is open: a sheet, the record, the View menu, or select mode"]
+      ]
+    },
+    {
+      title: "On the grid",
+      keys: [
+        [["click"], "open a record"],
+        [["shift", "click"], "add it to a side-by-side comparison (up to four)"],
+        [["ctrl/⌘", "click"], "select it; the bar at the bottom acts on the selection"],
+        [["hover"], "play a loop"]
+      ]
+    },
+    {
+      title: "With a record open",
+      keys: [
+        [["←", "→"], "step through the records in view"],
+        [[",", "."], "step a loop one frame back or on"],
+        [["space"], "play or pause a loop"],
+        [["←", "→"], "switch tabs, once a tab has focus"]
+      ]
+    },
+    {
+      title: "In the family view",
+      keys: [
+        [["drag"], "turn the sprite on the turntable"],
+        [["←", "→"], "turn it a step, once the turntable has focus"]
+      ]
+    }
+  ];
+  function openShortcuts() {
+    const host = $("dialog-host");
+    host.textContent = "";
+    const wrap = el("div", "dialog");
+    wrap.onclick = (e) => {
+      if (e.target === wrap) host.textContent = "";
+    };
+    const box = el("div", "keys-sheet");
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-label", "Keyboard shortcuts");
+    const head = el("div", "keys-head");
+    head.append(el("h3", null, "Keyboard shortcuts"));
+    const close = el("button", null, "Close");
+    close.type = "button";
+    close.onclick = () => {
+      host.textContent = "";
+    };
+    head.append(close);
+    box.append(head);
+    for (const group of GROUPS) {
+      const section2 = el("section");
+      section2.append(el("h4", null, group.title));
+      const dl = el("dl");
+      for (const [keys, what] of group.keys) {
+        const dt = el("dt");
+        keys.forEach((k, i) => {
+          if (i) dt.append(document.createTextNode(k === "click" ? "+" : " "));
+          dt.append(el("kbd", null, k));
+        });
+        dl.append(dt, el("dd", null, what));
+      }
+      section2.append(dl);
+      box.append(section2);
+    }
+    wrap.append(box);
+    host.append(wrap);
+    close.focus();
+  }
+
   // src/gallery/client/src/main.ts
   loadPrefs();
   $("refresh").onclick = refresh;
   $("select").onclick = () => setSelecting(!ui.selecting);
+  $("keys").onclick = openShortcuts;
+  var syncSize = () => {
+    for (const b of $("size").querySelectorAll("button")) b.classList.toggle("on", b.dataset.size === ui.size);
+  };
+  for (const b of $("size").querySelectorAll("button")) {
+    b.onclick = () => {
+      if (!CARD_SIZES[b.dataset.size]) return;
+      ui.size = b.dataset.size;
+      document.body.dataset.size = ui.size;
+      savePrefs();
+      syncSize();
+      render();
+    };
+  }
+  syncSize();
+  document.addEventListener("click", (e) => {
+    const menu = $("view-menu");
+    if (menu.open && !menu.contains(e.target)) menu.open = false;
+  });
   $("playloops").checked = ui.playLoops;
   $("playloops").onchange = (e) => {
     setPlayLoops(e.target.checked);
@@ -5109,7 +5229,18 @@
       $("q").focus();
       return;
     }
+    if (e.key === "?" && !typing) {
+      e.preventDefault();
+      openShortcuts();
+      return;
+    }
     if (e.key === "Escape") {
+      if ($("view-menu").open) {
+        e.preventDefault();
+        $("view-menu").open = false;
+        $("view-menu").querySelector("summary").focus();
+        return;
+      }
       if (typing && document.activeElement?.id === "q") {
         document.activeElement.blur();
         return;

package/dist/index.cjs

@@ -17063,26 +17063,35 @@ ${css}</style>
     <span class="project" id="project"></span>
     <span class="grow"></span>
     <label class="search"><input id="q" type="search" placeholder="Search assets, prompts, ids, hashes" autocomplete="off"><kbd>/</kbd></label>
-    <select id="sort" aria-label="Sort">
-      <option value="key">Sort: style / asset</option>
-      <option value="newest">Sort: newest first</option>
-      <option value="oldest">Sort: oldest first</option>
-      <option value="cost">Sort: cost</option>
-      <option value="size">Sort: size</option>
-    </select>
-    <select id="group" aria-label="Group">
-      <option value="style">Group: by style</option>
-      <option value="family">Group: by family</option>
-      <option value="none">Group: none</option>
-    </select>
+    <details class="menu" id="view-menu">
+      <summary title="Sort, group, card size, backdrop, and playback">View</summary>
+      <div class="menu-panel">
+        <label class="menu-row"><span>Sort</span><select id="sort" aria-label="Sort">
+          <option value="key">style / asset</option>
+          <option value="newest">newest first</option>
+          <option value="oldest">oldest first</option>
+          <option value="cost">cost</option>
+          <option value="size">size</option>
+        </select></label>
+        <label class="menu-row"><span>Group</span><select id="group" aria-label="Group">
+          <option value="style">by style</option>
+          <option value="family">by family</option>
+          <option value="none">none</option>
+        </select></label>
+        <div class="menu-row"><span>Cards</span><span class="seg" id="size" role="group" aria-label="Card size">
+          <button type="button" data-size="s" title="Small cards: more on screen">S</button><button type="button" data-size="m" title="Medium cards">M</button><button type="button" data-size="l" title="Large cards: sprites drawn bigger">L</button>
+        </span></div>
+        <div class="menu-row"><span>Backdrop</span><span id="backdrop-slot"></span></div>
+        <label class="menu-row check" title="Play every loop on the grid; without this, a loop plays while the pointer is over it"><input id="playloops" type="checkbox"> Play every loop</label>
+        <label class="menu-row check" title="Refresh every 5 seconds while this tab is visible"><input id="auto" type="checkbox"> Refresh every 5 seconds</label>
+        <label class="menu-row check" id="notify-chip" hidden title="A system notification when a job finishes while this tab is in the background"><input id="notify" type="checkbox"> Notify when a job finishes</label>
+      </div>
+    </details>
     <span id="editing" class="editing" hidden title="This gallery can write the manifest. It never contacts a provider.">editing</span>
     <button id="select" type="button" title="Pick several records to generate, regenerate, compare, or tag together (or ctrl/\u2318-click a card)">Select</button>
     <button id="studio" type="button" hidden title="Draft a new character: its style, base, loops, and portrait, priced as you go">+ New character</button>
     <button id="refresh" type="button" title="Re-read the manifest, lockfile, and disk">Refresh</button>
-    <label class="chip" title="Refresh every 5 seconds while this tab is visible"><input id="auto" type="checkbox"> auto</label>
-    <label class="chip" title="Play every loop on the grid; without this, a loop plays while the pointer is over it"><input id="playloops" type="checkbox"> play loops</label>
-    <span id="backdrop-slot"></span>
-    <label class="chip" id="notify-chip" hidden title="A system notification when a job finishes while this tab is in the background"><input id="notify" type="checkbox"> notify</label>
+    <button id="keys" type="button" title="Keyboard shortcuts (?)" aria-label="Keyboard shortcuts">?</button>
   </div>
   <div class="totals" id="totals"></div>
   <div class="chips" id="chips"></div>
@@ -17092,8 +17101,7 @@ ${css}</style>
 <main id="root"></main>
 <div id="selbar" class="selbar" hidden></div>
 <footer>
-  Click a sprite for its full record; <kbd>shift</kbd>-click adds it to a side-by-side comparison. <kbd>\u2190</kbd>/<kbd>\u2192</kbd> step through the visible set while a record
-  is open, <kbd>,</kbd>/<kbd>.</kbd> step a loop's frames and <kbd>space</kbd> plays it, <kbd>Esc</kbd> closes it, and <kbd>/</kbd> jumps to search. This page reads the manifest, lockfile,
+  Click a sprite for its full record; press <kbd>?</kbd> for every keyboard shortcut. This page reads the manifest, lockfile,
   and disk only. It never contacts a provider<span id="foot-edit"> and never writes anything</span><span id="foot-editing" hidden>.
   Editing is on: saving rewrites the manifest and nothing else</span><span id="foot-gen" hidden>.
   Generation is on under the session budget shown above; every run is the same submit, poll, and fetch as <code>pixelkiln gen</code></span>.