pixelkiln 0.26.0 → 0.27.0

package/dist/index.cjs

@@ -9393,7 +9393,7 @@ function validateWorkspace(ws, dir) {
 
 // src/gallery/edit.ts
 var import_node_path24 = __toESM(require("path"), 1);
-var import_zod8 = require("zod");
+var import_zod9 = require("zod");
 
 // src/manifest-edit.ts
 var import_promises18 = require("fs/promises");
@@ -9649,6 +9649,7 @@ var import_node_child_process3 = require("child_process");
 var import_node_fs20 = require("fs");
 var import_promises19 = require("fs/promises");
 var import_node_path23 = __toESM(require("path"), 1);
+var import_zod8 = require("zod");
 var HAND_EDIT_DIR = "edits";
 function handEditPath(loaded, spec) {
   const style = loaded.manifest.styles[spec.styleId];
@@ -9718,6 +9719,89 @@ async function detachHandEdit(loaded, spec, opts = {}) {
   });
   return { manifestSha256: result.sha256, changed: result.changed };
 }
+var HandEditCompanionSchema = import_zod8.z.object({
+  version: import_zod8.z.literal(1),
+  /** sha256 of the generated art the edit started from; null when it started from untracked art. */
+  basedOn: import_zod8.z.string().regex(/^[0-9a-f]{64}$/).nullable(),
+  /** sha256 of the edit PNG as saved, so a later change by another tool is visible. */
+  sha256: import_zod8.z.string().regex(/^[0-9a-f]{64}$/),
+  /** Editor identity the bridge reported, e.g. `pixelorama@v1.2.2-stable`. */
+  editor: import_zod8.z.string().min(1),
+  protocol: import_zod8.z.number().int().positive(),
+  savedAt: import_zod8.z.string().datetime(),
+  /** Basename of the layered project file beside the edit, when one was kept. */
+  project: import_zod8.z.string().min(1).nullable()
+}).strict();
+function handEditCompanionPath(editPath) {
+  return editPath.replace(/\.png$/i, "") + ".edit.json";
+}
+function handEditProjectPath(editPath) {
+  return editPath.replace(/\.png$/i, "") + ".pxo";
+}
+async function readHandEditCompanion(editPath) {
+  let text;
+  try {
+    text = await (0, import_promises19.readFile)(handEditCompanionPath(editPath), "utf8");
+  } catch {
+    return null;
+  }
+  try {
+    return HandEditCompanionSchema.parse(JSON.parse(text));
+  } catch {
+    return null;
+  }
+}
+var MAX_HAND_EDIT_BYTES = 16 * 1024 * 1024;
+async function saveHandEdit(loaded, lock, spec, input) {
+  if (input.png.length > MAX_HAND_EDIT_BYTES) {
+    throw new ManifestEditError(`the edit is ${input.png.length} bytes; the limit is ${MAX_HAND_EDIT_BYTES}`);
+  }
+  if (input.project && input.project.length > MAX_HAND_EDIT_BYTES) {
+    throw new ManifestEditError(`the project file is ${input.project.length} bytes; the limit is ${MAX_HAND_EDIT_BYTES}`);
+  }
+  let decoded;
+  try {
+    validateMedia(input.png, MediaType.PNG);
+    decoded = decodePng(input.png);
+  } catch (error) {
+    throw new ManifestEditError(`the edit is not a valid PNG: ${error instanceof Error ? error.message : String(error)}`);
+  }
+  const base = handEditBase(spec, lock);
+  const expected = base ? decodePng(await (0, import_promises19.readFile)(base)) : { width: spec.width, height: spec.height };
+  if (decoded.width !== expected.width || decoded.height !== expected.height) {
+    throw new ManifestEditError(
+      `the edit is ${decoded.width}\xD7${decoded.height}; ${spec.styleId}/${spec.assetId} is ${expected.width}\xD7${expected.height}`
+    );
+  }
+  const started = await startHandEdit(loaded, lock, spec, { expectedSha256: input.expectedSha256 });
+  const entry = lock.entries[lockKey(spec.styleId, spec.assetId)];
+  const basedOn = entry ? primaryOutput(entry)?.sha256 ?? null : null;
+  const digest2 = sha256(input.png);
+  const projectPath = input.project ? handEditProjectPath(started.editPath) : null;
+  const companion = {
+    version: 1,
+    basedOn,
+    sha256: digest2,
+    editor: input.editor,
+    protocol: input.protocol,
+    savedAt: (input.now ?? /* @__PURE__ */ new Date()).toISOString(),
+    project: projectPath ? import_node_path23.default.basename(projectPath) : null
+  };
+  await replaceFile(started.editPath, input.png);
+  if (projectPath && input.project) await replaceFile(projectPath, input.project);
+  const companionPath = handEditCompanionPath(started.editPath);
+  await replaceFile(companionPath, JSON.stringify(companion, null, 2) + "\n");
+  return { ...started, sha256: digest2, basedOn, companionPath, projectPath };
+}
+async function replaceFile(file, bytes) {
+  const tmp = `${file}.${process.pid}.${Math.random().toString(36).slice(2)}.tmp`;
+  try {
+    await (0, import_promises19.writeFile)(tmp, bytes);
+    await (0, import_promises19.rename)(tmp, file);
+  } finally {
+    await (0, import_promises19.rm)(tmp, { force: true });
+  }
+}
 function openInEditor(file, editor = process.env.PIXELKILN_EDITOR) {
   const command = editor?.trim() ? editor.trim().split(/\s+/) : process.platform === "darwin" ? ["open"] : process.platform === "win32" ? ["cmd", "/c", "start", ""] : ["xdg-open"];
   const [program, ...args] = command;
@@ -9729,22 +9813,37 @@ function openInEditor(file, editor = process.env.PIXELKILN_EDITOR) {
 }
 
 // src/gallery/edit.ts
-var HandEditRequestSchema = import_zod8.z.discriminatedUnion("action", [
-  import_zod8.z.object({
-    action: import_zod8.z.literal("start-edit"),
-    project: import_zod8.z.string().min(1).optional(),
-    assetId: import_zod8.z.string().min(1),
-    styleId: import_zod8.z.string().min(1),
-    expectedSha256: import_zod8.z.string().regex(/^[0-9a-f]{64}$/),
+var Base64 = import_zod9.z.string().regex(/^[A-Za-z0-9+/]*={0,2}$/).max(Math.ceil(MAX_HAND_EDIT_BYTES / 3) * 4);
+var HandEditRequestSchema = import_zod9.z.discriminatedUnion("action", [
+  import_zod9.z.object({
+    action: import_zod9.z.literal("start-edit"),
+    project: import_zod9.z.string().min(1).optional(),
+    assetId: import_zod9.z.string().min(1),
+    styleId: import_zod9.z.string().min(1),
+    expectedSha256: import_zod9.z.string().regex(/^[0-9a-f]{64}$/),
     /** Also launch the author's editor on the file. */
-    open: import_zod8.z.boolean().optional()
+    open: import_zod9.z.boolean().optional()
   }).strict(),
-  import_zod8.z.object({
-    action: import_zod8.z.literal("detach-edit"),
-    project: import_zod8.z.string().min(1).optional(),
-    assetId: import_zod8.z.string().min(1),
-    styleId: import_zod8.z.string().min(1),
-    expectedSha256: import_zod8.z.string().regex(/^[0-9a-f]{64}$/)
+  import_zod9.z.object({
+    action: import_zod9.z.literal("detach-edit"),
+    project: import_zod9.z.string().min(1).optional(),
+    assetId: import_zod9.z.string().min(1),
+    styleId: import_zod9.z.string().min(1),
+    expectedSha256: import_zod9.z.string().regex(/^[0-9a-f]{64}$/)
+  }).strict(),
+  /** From the in-browser editor: the page holds the bytes, the server validates and writes. */
+  import_zod9.z.object({
+    action: import_zod9.z.literal("save-edit"),
+    project: import_zod9.z.string().min(1).optional(),
+    assetId: import_zod9.z.string().min(1),
+    styleId: import_zod9.z.string().min(1),
+    expectedSha256: import_zod9.z.string().regex(/^[0-9a-f]{64}$/),
+    png: Base64.min(1),
+    /** The editor's layered project file, kept beside the edit. */
+    pxo: Base64.optional(),
+    /** Editor identity from the bridge's ready message. */
+    editor: import_zod9.z.string().min(1).max(200),
+    protocol: import_zod9.z.number().int().positive()
   }).strict()
 ]);
 function createGalleryEditHandler(opts) {
@@ -9765,6 +9864,15 @@ function createGalleryEditHandler(opts) {
           const command = (opts.openEditor ?? openInEditor)(started.editPath);
           log(`  opened with: ${command}`);
         }
+      } else if (request.action === "save-edit") {
+        const saved = await saveHandEdit(ctx.loaded, ctx.lock, spec, {
+          png: Buffer.from(request.png, "base64"),
+          ...request.pxo ? { project: Buffer.from(request.pxo, "base64") } : {},
+          editor: request.editor,
+          protocol: request.protocol,
+          expectedSha256: request.expectedSha256
+        });
+        log(`  hand edit saved from ${request.editor}: ${saved.source}${saved.declared ? " (declared in the manifest)" : ""}${saved.projectPath ? " + project file" : ""}`);
       } else {
         const result2 = await detachHandEdit(ctx.loaded, spec, { expectedSha256: request.expectedSha256 });
         if (result2.changed) log(`  hand edit detached: ${request.styleId}/${request.assetId} (file kept)`);
@@ -9929,6 +10037,7 @@ async function buildGallerySnapshot(opts) {
     let outputs;
     let edit = null;
     let editStatus = null;
+    let editMeta = null;
     if (entry && entry.outputs.length) {
       outputs = await Promise.all(
         entry.outputs.map(
@@ -9940,7 +10049,19 @@ async function buildGallerySnapshot(opts) {
         const editSha = (0, import_node_fs21.existsSync)(editPath) ? await sha256File(editPath) : null;
         edit = await describeOutput(media, root, editPath, { sha256: editSha });
         const generated = outputs[0];
-        editStatus = !edit.exists ? "missing" : generated && editSha === generated.sha256 ? "same" : generated?.modifiedAt && edit.modifiedAt && generated.modifiedAt > edit.modifiedAt && generated.exists ? "regenerated-since" : "edited";
+        const companion = await readHandEditCompanion(editPath);
+        if (companion) {
+          const projectPath = handEditProjectPath(editPath);
+          editMeta = {
+            editor: companion.editor,
+            savedAt: companion.savedAt,
+            basedOn: companion.basedOn,
+            changedSince: editSha !== null && editSha !== companion.sha256,
+            project: companion.project && (0, import_node_fs21.existsSync)(projectPath) ? portableOutputPath(projectPath, root) : null
+          };
+        }
+        const regenerated = companion ? generated?.sha256 !== void 0 && generated.sha256 !== null && companion.basedOn !== generated.sha256 : Boolean(generated?.modifiedAt && edit.modifiedAt && generated.modifiedAt > edit.modifiedAt && generated.exists);
+        editStatus = !edit.exists ? "missing" : generated && editSha === generated.sha256 ? "same" : regenerated ? "regenerated-since" : "edited";
       }
     } else if (spec.source) {
       outputs = [await describeOutput(media, root, import_node_path25.default.resolve(root, spec.source))];
@@ -9990,6 +10111,7 @@ async function buildGallerySnapshot(opts) {
       source: spec.source ?? null,
       edit,
       editStatus,
+      editMeta,
       upstreamUrl: entry?.provider === "pixellab" ? pixelLabObjectUrl(entry.generator, entry.objectId) : null,
       refreshable: Boolean(entry && entry.status === "downloaded" && entry.outputs.length && (entry.sourceUrls?.length || entry.sourceUrl)),
       tags: spec.tags,
@@ -10046,6 +10168,7 @@ async function buildGallerySnapshot(opts) {
       source: null,
       edit: null,
       editStatus: null,
+      editMeta: null,
       upstreamUrl: entry.provider === "pixellab" ? pixelLabObjectUrl(entry.generator, entry.objectId) : null,
       refreshable: false,
       tags: [],
@@ -10247,6 +10370,7 @@ function renderGallery(snapshot, opts = {}) {
   const session = JSON.stringify(opts.session ?? null);
   const editable = JSON.stringify(Boolean(opts.editable && opts.session));
   const generation = JSON.stringify(Boolean(opts.generation && opts.session));
+  const editor = JSON.stringify(Boolean(opts.editor && opts.session));
   const title = `pixelkiln \u2014 ${snapshot.project?.name ?? "workspace"}`;
   return `<!doctype html>
 <html lang="en">
@@ -10452,6 +10576,15 @@ function renderGallery(snapshot, opts = {}) {
   .job .acts button { padding:3px 9px; font-size:12px; }
   .job pre { grid-column:1 / -1; margin:0; padding:8px 10px; border-top:1px solid var(--line);
     font:11.5px/1.45 var(--mono); color:var(--dim); max-height:220px; overflow:auto; white-space:pre-wrap; }
+  #tools { width:min(100%,var(--content)); margin:0 auto; padding:0 22px 12px; }
+  #tools:empty { display:none; }
+  .tool { border:1px solid var(--line); background:var(--panel-deep); padding:8px 12px; display:grid;
+    grid-template-columns:auto 1fr auto; gap:6px 14px; align-items:center; font-size:12.5px; }
+  .tool .ph { display:inline-flex; align-items:center; gap:6px; font:650 12px/1 var(--mono); white-space:nowrap; }
+  .tool .last { color:var(--dim); min-width:0; }
+  .tool .acts { display:flex; gap:6px; }
+  .tool .acts button { padding:3px 9px; font-size:12px; }
+  .tool progress { grid-column:1 / -1; width:100%; height:6px; accent-color:var(--accent); }
   .budget { color:var(--dim); }
   .budget b { color:var(--text); }
   .dialog { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(0,0,0,.55); }
@@ -10472,6 +10605,16 @@ function renderGallery(snapshot, opts = {}) {
     border-left:1px solid var(--line-strong); display:grid; grid-template-rows:auto 1fr; min-width:0; }
   .sheet.review-host { width:min(1180px, 94vw); }
   .sheet.compare-host { width:min(1500px, 96vw); }
+  .sheet.editor-host { width:min(1400px, 96vw); grid-template-rows:auto 1fr; }
+  .sheet.editor-host .rbar b { font:650 12.5px/1.4 var(--mono); color:var(--text); }
+  .sheet.editor-host .rbar .acts { margin-left:auto; display:flex; gap:8px; align-items:center; }
+  .sheet.editor-host .rbar .st { display:inline-flex; align-items:center; gap:6px; font:650 11.5px/1 var(--mono); }
+  .sheet.editor-host .rbar .msg { color:var(--bad); font-size:12.5px; }
+  .sheet.editor-host .stage { position:relative; min-height:0; }
+  .sheet.editor-host .stage iframe { position:absolute; inset:0; }
+  .sheet.editor-host .loading { position:absolute; inset:0; display:grid; place-items:center; background:var(--bg);
+    color:var(--dim); text-align:center; padding:24px; }
+  .sheet.editor-host .loading b { display:block; color:var(--text); margin-bottom:6px; }
   .sheet .rbar { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line-strong);
     background:var(--panel); font-size:13px; flex-wrap:wrap; }
   .sheet .rbar span { color:var(--dim); }
@@ -10510,7 +10653,7 @@ function renderGallery(snapshot, opts = {}) {
   .tray .pick img { width:22px; height:22px; object-fit:contain; image-rendering:pixelated; }
   .tray .pick button { padding:0 5px; border-color:transparent; color:var(--dim); font-size:12px; }
   .tray > button { padding:5px 11px; font-size:12.5px; }
-  @media (max-width: 900px) { .sheet.review-host, .sheet.compare-host { width:100vw; } }
+  @media (max-width: 900px) { .sheet.review-host, .sheet.compare-host, .sheet.editor-host { width:100vw; } }
   .drawer .gen { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
   .pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 10px; }
   .pair figure { margin:0; border:1px solid var(--line); background:var(--panel-deep); background-image:var(--checker);
@@ -10558,6 +10701,7 @@ function renderGallery(snapshot, opts = {}) {
   <div class="totals" id="totals"></div>
   <div class="chips" id="chips"></div>
   <div id="jobs"></div>
+  <div id="tools"></div>
 </header>
 <main id="root"></main>
 <footer>
@@ -10576,6 +10720,7 @@ const INITIAL = ${data};
 const SESSION = ${session};
 const EDITABLE = ${editable};
 const GENERATION = ${generation};
+const EDITOR = ${editor};
 let snap = INITIAL;
 const STATE_TONE = {
   ok: 'ok', stale: 'warn', orphaned: 'warn', untracked: 'warn', blocked: 'warn',
@@ -10743,6 +10888,92 @@ function renderJobs() {
     host.append(row);
   }
 }
+// ---- the in-browser editor (only when the server serves one) -------------
+// The build is a 46 MB web export fetched once into a user-level cache and
+// verified against hashes this PixelKiln release carries; the page only
+// reports and asks, the server downloads. Nothing is fetched without a click.
+
+let ED = null;
+let edTimer = null;
+const fmtMb = (bytes) => (bytes / 1e6).toFixed(1) + ' MB';
+async function pollEditor() {
+  if (!EDITOR) return;
+  try {
+    const res = await fetch('/api/editor', { cache: 'no-store' });
+    if (!res.ok) throw new Error(await res.text());
+    ED = await res.json();
+  } catch (err) {
+    ED = { error: 'status unavailable: ' + err.message, installed: false, installing: null, missing: [], totalBytes: 0 };
+  }
+  renderTools();
+  clearTimeout(edTimer);
+  if (ED.installing) edTimer = setTimeout(pollEditor, 1000);
+  else if (ui.open) renderDrawer();
+}
+async function installEditor() {
+  try {
+    const res = await fetch('/api/editor/install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Pixelkiln-Session': SESSION },
+      body: '{}',
+    });
+    if (!res.ok) throw new Error(await res.text());
+    ED = await res.json();
+  } catch (err) {
+    ED = Object.assign({}, ED, { error: err.message });
+  }
+  renderTools();
+  clearTimeout(edTimer);
+  edTimer = setTimeout(pollEditor, 500);
+}
+function renderTools() {
+  const host = $('tools');
+  host.textContent = '';
+  if (!EDITOR || !ED) return;
+  const row = el('div', 'tool');
+  const ph = el('span', 'ph');
+  const last = el('span', 'last');
+  const acts = el('div', 'acts');
+  const name = 'Browser editor' + (ED.pixelorama ? ' (Pixelorama ' + ED.pixelorama + ')' : '');
+  if (ED.installing) {
+    const p = ED.installing;
+    ph.append(el('i', 'dot cool'), document.createTextNode('installing'));
+    last.textContent = name + ': fetching ' + (p.file || 'the build') + ' \u2014 ' + fmtMb(p.fetchedBytes) + ' of ' + fmtMb(p.totalBytes);
+    row.append(ph, last, acts);
+    const bar = el('progress');
+    if (p.totalBytes) { bar.max = p.totalBytes; bar.value = p.fetchedBytes; }
+    row.append(bar);
+  } else if (ED.installed) {
+    ph.append(el('i', 'dot ok'), document.createTextNode('ready'));
+    last.textContent = name + ' is installed and verified; a record\u2019s Hand edit section opens sprites in it.';
+    last.title = ED.dir || '';
+    const b = el('button', null, 'Open editor');
+    b.type = 'button'; b.onclick = () => window.open(ED.url, '_blank', 'noopener');
+    acts.append(b);
+    row.append(ph, last, acts);
+  } else if (ED.error) {
+    ph.append(el('i', 'dot bad'), document.createTextNode('failed'));
+    last.textContent = name + ': ' + ED.error;
+    const b = el('button', 'primary', 'Retry install');
+    b.type = 'button'; b.onclick = installEditor;
+    acts.append(b);
+    row.append(ph, last, acts);
+  } else if (!ED.release) {
+    ph.append(el('i', 'dot dim'), document.createTextNode('unavailable'));
+    last.textContent = name + ': this PixelKiln version pins no published build.';
+    row.append(ph, last, acts);
+  } else {
+    ph.append(el('i', 'dot dim'), document.createTextNode('not installed'));
+    last.textContent = name + ': ' + fmtMb(ED.totalBytes - (ED.installedBytes || 0)) + ' fetched once from the PixelKiln release ' +
+      ED.release + ', verified against the hashes this version carries, and kept outside the project.';
+    const b = el('button', 'primary', 'Install editor');
+    b.type = 'button'; b.onclick = installEditor;
+    acts.append(b);
+    row.append(ph, last, acts);
+  }
+  host.append(row);
+}
+
 function budgetLine() {
   const providers = new Set([...Object.keys(GEN.budget.byProvider), ...Object.keys(GEN.spent)]);
   const parts = [];
@@ -10849,8 +11080,169 @@ function openReview(jobId) {
   host.append(scrim, panel);
 }
 window.addEventListener('message', (e) => {
-  if (e.origin !== location.origin || !e.data || e.data.type !== 'pixelkiln:review-applied') return;
-  setTimeout(() => { $('dialog-host').textContent = ''; pollJobs(); refresh(); }, 600);
+  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 (SHEET && e.source === SHEET.frame.contentWindow) onEditorMessage(e.data);
+});
+
+// ---- the in-browser editor sheet -------------------------------------------
+// The page is the protocol host: it hands the editor the PNG and palette,
+// asks it for the image back, and does the authenticated write itself. The
+// iframe never sees the session token, and the server validates, sizes, and
+// declares the file the same way pixelkiln edit does.
+
+let SHEET = null;
+const editorSource = (item) => item.edit && item.edit.exists ? item.edit
+  : item.outputs.length === 1 && item.outputs[0].exists && item.outputs[0].mediaType === 'image/png' ? item.outputs[0] : null;
+const canEditInBrowser = (item) => EDITOR && EDITABLE && item.declared && item.asset && projectOf(item)?.manifestSha256 && editorSource(item) &&
+  !(item.outputs.length > 1);
+const toBase64 = (buf) => new Promise((resolve, reject) => {
+  const r = new FileReader();
+  r.onload = () => resolve(String(r.result).slice(String(r.result).indexOf(',') + 1));
+  r.onerror = () => reject(r.error);
+  r.readAsDataURL(new Blob([buf]));
+});
+function sheetStatus(tone, text) {
+  if (!SHEET) return;
+  SHEET.status.textContent = '';
+  SHEET.status.append(el('i', 'dot ' + tone), document.createTextNode(text));
+}
+function sheetButtons() {
+  if (!SHEET) return;
+  const busy = !SHEET.opened || SHEET.pending !== null;
+  SHEET.save.disabled = busy || !SHEET.dirty;
+  SHEET.saveClose.disabled = busy;
+}
+function openEditorSheet(item) {
+  if (SHEET) return;
+  const src = editorSource(item);
+  const host = $('dialog-host');
+  host.textContent = '';
+  const scrim = el('div', 'sheet-scrim');
+  scrim.onclick = () => closeEditorSheet();
+  const panel = el('div', 'sheet editor-host');
+  const bar = el('div', 'rbar');
+  const close = el('button', null, 'Close'); close.type = 'button';
+  close.onclick = () => closeEditorSheet();
+  const title = el('b', null, (item.project ? item.project + ':' : '') + item.styleId + '/' + item.assetId + ' \xB7 ' + item.width + '\xD7' + item.height);
+  const status = el('span', 'st');
+  const acts = el('div', 'acts');
+  const msg = el('span', 'msg');
+  const save = el('button', 'primary', 'Save to project'); save.type = 'button';
+  save.onclick = () => requestEditorSave(false);
+  const saveClose = el('button', null, 'Save & close'); saveClose.type = 'button';
+  saveClose.onclick = () => requestEditorSave(true);
+  acts.append(msg, save, saveClose);
+  bar.append(close, title, status, acts);
+  const stage = el('div', 'stage');
+  const frame = el('iframe');
+  frame.title = 'Pixelorama';
+  frame.src = ED.url;
+  const loading = el('div', 'loading');
+  const loadText = el('div');
+  loadText.append(el('b', null, 'Loading the editor'), document.createTextNode('The first open compiles a 40 MB build; later opens come from the browser cache.'));
+  loading.append(loadText);
+  stage.append(frame, loading);
+  panel.append(bar, stage);
+  host.append(scrim, panel);
+  SHEET = { item, frame, loading, status, msg, save, saveClose, dirty: false, opened: false, ready: null, pending: null, requests: 0, source: src };
+  sheetStatus('cool', 'loading');
+  sheetButtons();
+  close.focus({ preventScroll: true });
+}
+async function sendOpen() {
+  const { item, source } = SHEET;
+  const style = snap.styles.find((s) => s.id === item.styleId && s.project === item.project);
+  let png;
+  try {
+    const res = await fetch(source.url, { cache: 'no-store' });
+    if (!res.ok) throw new Error(await res.text());
+    png = await res.arrayBuffer();
+  } catch (err) {
+    if (SHEET) { SHEET.msg.textContent = 'Could not load the image: ' + err.message; sheetStatus('bad', 'failed'); }
+    return;
+  }
+  if (!SHEET) return;
+  const request = 'open-' + (++SHEET.requests);
+  SHEET.frame.contentWindow.postMessage({
+    type: 'pixelkiln:open', request,
+    asset: { key: item.styleId + '/' + item.assetId, id: item.id, name: item.assetId, width: item.width, height: item.height },
+    png, palette: style ? style.palette : [],
+  }, location.origin, [png]);
+  sheetStatus('cool', 'opening');
+}
+function requestEditorSave(close) {
+  if (!SHEET || !SHEET.opened || SHEET.pending) return;
+  const request = 'save-' + (++SHEET.requests);
+  SHEET.pending = { request, close };
+  SHEET.msg.textContent = '';
+  sheetStatus('cool', 'saving');
+  sheetButtons();
+  SHEET.frame.contentWindow.postMessage({ type: 'pixelkiln:request-save', request }, location.origin);
+}
+async function onEditorMessage(m) {
+  switch (m.type) {
+    case 'pixelkiln:ready':
+      SHEET.ready = m;
+      if (m.version !== ED.protocol) {
+        SHEET.msg.textContent = 'The editor speaks protocol ' + m.version + '; this gallery expects ' + ED.protocol + '. Reinstall it with pixelkiln tools install editor.';
+        sheetStatus('bad', 'mismatch');
+        return;
+      }
+      sendOpen();
+      break;
+    case 'pixelkiln:opened':
+      SHEET.opened = true;
+      SHEET.loading.remove();
+      sheetStatus('ok', SHEET.item.edit && SHEET.item.edit.exists ? 'editing the edit file' : 'editing a copy of the generated art');
+      sheetButtons();
+      break;
+    case 'pixelkiln:dirty':
+      SHEET.dirty = !!m.dirty;
+      if (SHEET.opened && !SHEET.pending) sheetStatus(SHEET.dirty ? 'warn' : 'ok', SHEET.dirty ? 'unsaved changes' : 'saved');
+      sheetButtons();
+      break;
+    case 'pixelkiln:save': {
+      const pending = SHEET.pending;
+      if (!pending || pending.request !== m.request) return;
+      try {
+        const body = { png: await toBase64(m.png), editor: SHEET.ready.editor, protocol: SHEET.ready.version };
+        if (m.pxo && m.pxo.byteLength) body.pxo = await toBase64(m.pxo);
+        await postHandEdit(SHEET.item, 'save-edit', body);
+        const saved = snap.items.find((i) => i.id === SHEET.item.id);
+        if (saved) SHEET.item = saved;
+        SHEET.dirty = false;
+        SHEET.pending = null;
+        ui.notice = { id: SHEET.item.id, text: 'Saved ' + (saved && saved.edit ? saved.edit.path : 'the edit') + '. mount and pack place it in place of the generated art.' };
+        render();
+        if (pending.close) { closeEditorSheet(true); return; }
+        sheetStatus('ok', 'saved');
+      } catch (err) {
+        SHEET.pending = null;
+        SHEET.msg.textContent = err.message + (err.status === 409 ? ' \u2014 press Refresh, then save again.' : '');
+        sheetStatus('bad', 'not saved');
+      }
+      sheetButtons();
+      break;
+    }
+    case 'pixelkiln:error':
+      SHEET.msg.textContent = m.message || 'The editor reported an error.';
+      if (SHEET.pending) { SHEET.pending = null; sheetStatus('bad', 'not saved'); sheetButtons(); }
+      break;
+  }
+}
+function closeEditorSheet(force) {
+  if (!SHEET) return;
+  if (SHEET.dirty && !force && !confirm('Discard unsaved changes in the editor?')) return;
+  SHEET = null;
+  $('dialog-host').textContent = '';
+  refresh();
+}
+window.addEventListener('beforeunload', (e) => {
+  if (SHEET && SHEET.dirty) { e.preventDefault(); e.returnValue = ''; }
 });
 
 function visibleItems() {
@@ -11426,6 +11818,11 @@ function handEditSection(item) {
     row(dl, 'file', item.edit.path, { mono: true, copy: item.edit.absolutePath });
     if (item.edit.sha256) row(dl, 'sha256', item.edit.sha256.slice(0, 16) + '\u2026', { mono: true, copy: item.edit.sha256 });
     row(dl, 'saved', fmtWhen(item.edit.modifiedAt));
+    if (item.editMeta) {
+      row(dl, 'editor', item.editMeta.editor + ', ' + fmtWhen(item.editMeta.savedAt) + (item.editMeta.changedSince ? ' \u2014 the file changed since' : ''));
+      if (item.editMeta.basedOn) row(dl, 'based on', item.editMeta.basedOn.slice(0, 16) + '\u2026', { mono: true, copy: item.editMeta.basedOn });
+      if (item.editMeta.project) row(dl, 'layers', item.editMeta.project, { mono: true });
+    }
     s.append(dl);
   } else {
     s.append(el('div', 'state-dim', 'Touch it up in your own editor. The generated file stays untouched; the edit is a sibling file the manifest points at, and mount and pack place that instead.'));
@@ -11434,7 +11831,7 @@ function handEditSection(item) {
     const acts = el('div', 'hand-actions');
     const msg = el('span', 'msg');
     const go = async (label, action, extra, done) => {
-      const b = el('button', label === 'Detach edit' ? null : 'primary', label); b.type = 'button';
+      const b = el('button', label === 'Detach edit' || (EDITOR && ED && ED.installed) ? null : 'primary', label); b.type = 'button';
       b.onclick = async () => {
         b.disabled = true; msg.className = 'msg'; msg.textContent = '\u2026';
         try { await postHandEdit(item, action, extra); ui.notice = { id: item.id, text: done }; render(); }
@@ -11442,8 +11839,20 @@ function handEditSection(item) {
       };
       acts.append(b);
     };
+    if (EDITOR && ED && (item.edit || canStart) && editorSource(item)) {
+      if (ED.installed) {
+        const b = el('button', 'primary', 'Edit in browser'); b.type = 'button';
+        b.title = 'Open in Pixelorama here; Save writes the edit file and declares it';
+        b.onclick = () => openEditorSheet(item);
+        acts.append(b);
+      } else if (ED.release && !ED.installing) {
+        const b = el('button', null, 'Install editor to edit in browser'); b.type = 'button';
+        b.onclick = () => { installEditor(); window.scrollTo({ top: 0 }); };
+        acts.append(b);
+      }
+    }
     if (item.edit) {
-      go('Open in editor', 'start-edit', { open: true }, 'Opened ' + item.edit.path + ' in your editor. Save there, then Refresh.');
+      go('Open in desktop editor', 'start-edit', { open: true }, 'Opened ' + item.edit.path + ' in your editor. Save there, then Refresh.');
       go('Detach edit', 'detach-edit', {}, 'Detached. The file is still at ' + item.edit.path + '; the generated art is placed again.');
     } else if (canStart) {
       go('Edit by hand', 'start-edit', { open: true }, 'Created the edit file and opened it in your editor. Save there, then Refresh to see it here.');
@@ -12170,6 +12579,7 @@ document.addEventListener('keydown', (e) => {
   if (e.key === '/' && !typing) { e.preventDefault(); $('q').focus(); return; }
   if (e.key === 'Escape') {
     if (typing && document.activeElement.id === 'q') { document.activeElement.blur(); return; }
+    if (SHEET) { e.preventDefault(); closeEditorSheet(); return; }
     if ($('dialog-host').childNodes.length) { e.preventDefault(); $('dialog-host').textContent = ''; return; }
     if (ui.open) { e.preventDefault(); closeItem(); }
     return;
@@ -12191,6 +12601,7 @@ ui.compare = ui.compare.filter((id) => snap.items.some((i) => i.id === id));
 render();
 if (ui.open) document.querySelector('.card.active')?.scrollIntoView({ block: 'center' });
 if (GENERATION) pollJobs();
+if (EDITOR) pollEditor();
 if (ui.compare.length >= 2 && !ui.open) openCompare();
 </script>
 </body>
@@ -12203,7 +12614,16 @@ var import_node_child_process4 = require("child_process");
 var import_node_crypto7 = require("crypto");
 var import_node_http2 = require("http");
 var import_promises21 = require("fs/promises");
-var MAX_EDIT_BYTES = 64 * 1024;
+var MAX_EDIT_BYTES = 48 * 1024 * 1024;
+var EDITOR_CSP = [
+  "default-src 'self'",
+  "script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'",
+  "style-src 'self' 'unsafe-inline'",
+  "img-src 'self' data: blob:",
+  "worker-src 'self' blob:",
+  "connect-src 'self'",
+  "frame-ancestors 'self'"
+].join("; ");
 async function readJsonBody(req) {
   const chunks = [];
   let bytes = 0;
@@ -12221,7 +12641,7 @@ async function readJsonBody(req) {
 async function serveGallery(opts) {
   const log = opts.onProgress ?? (() => {
   });
-  const session = opts.edit || opts.generate ? (0, import_node_crypto7.randomBytes)(16).toString("hex") : null;
+  const session = opts.edit || opts.generate || opts.editor ? (0, import_node_crypto7.randomBytes)(16).toString("hex") : null;
   let media = /* @__PURE__ */ new Map();
   let loading = null;
   const reviewAssets = /* @__PURE__ */ new Map();
@@ -12296,6 +12716,17 @@ async function serveGallery(opts) {
       }
       return;
     }
+    if (req.method === "POST" && url2.pathname === "/api/editor/install") {
+      if (!opts.editor || !session) return fail(405, "the in-browser editor is off for this gallery");
+      try {
+        const body = await guardedBody("editor installs");
+        if (body === void 0) return;
+        json(202, await opts.editor.install());
+      } catch (err) {
+        reportError("editor install", err);
+      }
+      return;
+    }
     const reviewMatch = /^\/review\/([0-9a-f]{16})(\/.*)?$/.exec(url2.pathname);
     if (reviewMatch && opts.generate) {
       const [, jobId, rest = ""] = reviewMatch;
@@ -12359,6 +12790,32 @@ async function serveGallery(opts) {
       if (!opts.generate) return fail(404, "generation is off");
       return json(200, opts.generate.status());
     }
+    if (url2.pathname === "/api/editor") {
+      if (!opts.editor) return fail(404, "the in-browser editor is off for this gallery");
+      try {
+        return json(200, await opts.editor.status());
+      } catch (err) {
+        return reportError("editor status", err);
+      }
+    }
+    const editorMatch = /^\/editor\/([A-Za-z0-9._-]+)\/([A-Za-z0-9._-]+)$/.exec(url2.pathname);
+    if (editorMatch) {
+      if (!opts.editor) return fail(404, "the in-browser editor is off for this gallery");
+      const file = await opts.editor.file(editorMatch[1], editorMatch[2]);
+      if (!file) return fail(404, "that editor file is not installed; check /api/editor");
+      res.writeHead(200, {
+        "Content-Type": file.contentType,
+        "Content-Length": file.bytes.length,
+        // The release tag is in the path, so these bytes never change under
+        // this URL; the 40 MB wasm should come from the browser cache.
+        "Cache-Control": "public, max-age=31536000, immutable",
+        "X-Content-Type-Options": "nosniff",
+        "Cross-Origin-Resource-Policy": "same-origin",
+        ...editorMatch[2] === "index.html" ? { "Content-Security-Policy": EDITOR_CSP } : {}
+      });
+      res.end(req.method === "HEAD" ? void 0 : file.bytes);
+      return;
+    }
     try {
       if (url2.pathname === "/") {
         const { snapshot } = await load();
@@ -12370,7 +12827,8 @@ async function serveGallery(opts) {
         res.end(renderGallery(snapshot, {
           ...session ? { session } : {},
           editable: Boolean(opts.edit),
-          generation: Boolean(opts.generate)
+          generation: Boolean(opts.generate),
+          editor: Boolean(opts.editor)
         }));
         return;
       }
@@ -12436,16 +12894,16 @@ async function serveGallery(opts) {
 
 // src/gallery/generate.ts
 var import_node_crypto8 = require("crypto");
-var import_zod9 = require("zod");
-var GenerateRequestSchema = import_zod9.z.object({
-  project: import_zod9.z.string().min(1).optional(),
-  keys: import_zod9.z.array(import_zod9.z.string().min(1)).min(1).max(500),
+var import_zod10 = require("zod");
+var GenerateRequestSchema = import_zod10.z.object({
+  project: import_zod10.z.string().min(1).optional(),
+  keys: import_zod10.z.array(import_zod10.z.string().min(1)).min(1).max(500),
   /** Regenerate work that is up to date, as `gen --force` does. */
-  force: import_zod9.z.boolean().optional(),
+  force: import_zod10.z.boolean().optional(),
   /** Advance in-flight, review, or selected work without submitting anything. */
-  resume: import_zod9.z.boolean().optional(),
+  resume: import_zod10.z.boolean().optional(),
   /** Re-download downloaded outputs and replace files whose object changed upstream. */
-  refresh: import_zod9.z.boolean().optional()
+  refresh: import_zod10.z.boolean().optional()
 }).strict().refine((request) => !(request.resume && request.refresh), { message: "resume and refresh are exclusive" });
 var GenerateRequestError = class extends Error {
   constructor(message6, status = 400) {