topotopo 0.2.0 → 0.3.0

package/dist/viewer/app/outputs.js

@@ -0,0 +1,240 @@
+// The Outputs tab: each graph's published outputs as cards (click one to see it alone, its textures below it), one
+// Export button each, Export all for every output with a target, and the files saved in exports/. A first Export
+// asks for a format and file (export-popover.js) and stores that target in the graph; later clicks just write it.
+import { createImageView } from './image-view.js';
+import { fmtBytes } from './units.js';
+import { exportPopover, defaultPath } from './export-popover.js';
+import { inputImageURL } from './layers.js';
+
+const url = (route, item, more = {}) => `/api/output/${route}?` + new URLSearchParams({ id: item.id, rev: item.revision, ...more });
+const text = (tag, value, cls) => { const e = document.createElement(tag); e.textContent = value; if (cls) e.className = cls; return e; };
+const post = async (route, body) => {
+  const r = await fetch('/api/output/' + route, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
+  const j = await r.json().catch(() => ({ error: `${route} failed (${r.status})` }));
+  if (!r.ok || !j.ok) throw new Error(j.error ?? `${route} failed (${r.status})`);
+  return j;
+};
+/** "just now", "5 min ago", "3 h ago", else the date */
+export function ago(ms, now = Date.now()) {
+  const s = Math.max(0, (now - ms) / 1000);
+  if (s < 10) return 'just now';
+  if (s < 60) return `${Math.round(s)} s ago`;
+  if (s < 3600) return `${Math.round(s / 60)} min ago`;
+  if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+  return new Date(ms).toLocaleDateString();
+}
+/** A target as the graph stores it: the format alone when the path is the default, else {format, path}. */
+export function targetSpec(item, choice, formats) {
+  const stem = item.output ?? item.graph ?? 'output';
+  const keep = item.target && item.target.format === choice.format ? item.target.options ?? {} : {};
+  const custom = choice.path !== defaultPath(stem, choice.format, formats);
+  return !custom && !Object.keys(keep).length ? choice.format : { format: choice.format, ...(custom ? { path: choice.path } : {}), ...keep };
+}
+
+export function createOutputPanel(ctx) {
+  const host = document.getElementById('outputs'), details = document.getElementById('output-details');
+  const image = createImageView(document.getElementById('viewport'), ctx.message);
+  let list = [], formats = [], selected = null, directory = '', sequence = 0, lastList = '', initial = true, refreshing = null, refreshAgain = false, busy = false;
+  const P = { active: null };
+  const bar = document.createElement('div'), all = text('button', 'Export all', 'primary'), barNote = text('span', '', 'dim');
+  bar.className = 'outputs-bar'; bar.append(all, barNote);
+  const live = document.createElement('div'), saved = document.createElement('details'), savedRows = document.createElement('div');
+  saved.className = 'saved-outputs'; saved.open = ctx.store.get('outputs.savedOpen', false);
+  saved.append(text('summary', 'Saved files'), savedRows); saved.ontoggle = () => ctx.store.set('outputs.savedOpen', saved.open);
+  const empty = text('div', 'Nothing published yet: a graph\'s output shows here once it cooks.', 'empty');
+  const cards = new Map(), groups = new Map(); let input = null;
+  host.append(bar, empty, live, saved);
+  Object.defineProperty(P, 'count', { get: () => list.filter((v) => v.exportable).length });
+
+  function showDetails(item) {
+    details.replaceChildren(); details.hidden = !item;
+    if (!item) return;
+    details.append(text('strong', item.label), text('p', item.error ?? item.summary ?? `${item.kind}${item.width ? ` · ${item.width} × ${item.height}` : ''}`, item.error ? 'err' : 'dim'));
+    if (item.exportable) details.append(text('p', item.target ? `exports to exports/${item.target.path} (${item.target.format})` : 'no export target yet: its Export button sets one', 'dim'));
+    if (item.files) for (const f of item.files) {
+      const a = text('a', `${f.name} · ${fmtBytes(f.size)}`); a.href = url('file', item, { file: f.id, download: '1' }); a.download = f.name; details.append(a);
+    }
+    if (item.files?.length > 1) { const a = text('a', 'Download ZIP'); a.href = url('zip', item); a.download = item.label + '.zip'; details.append(a); }
+  }
+  const targetLine = (item) => !item.target ? 'no export target'
+    : `${item.target.path}${item.saved ? ` · saved ${ago(item.saved.at)} · ${fmtBytes(item.saved.size)}` : ' · not exported yet'}`;
+
+  async function exportItem(item, button, change = false) {
+    if (busy) return;
+    let choice = null;
+    if (change || !item.target) {
+      choice = await exportPopover({ anchor: button, item, formats, directory });
+      if (!choice) return;
+    }
+    busy = true; render();
+    ctx.message(`exporting ${item.label}…`, 'busy');
+    try {
+      const j = await post('export', { id: item.id, ...(choice ? { export: targetSpec(item, choice, formats) } : {}) });
+      ctx.message(`exported ${item.label} → exports/${j.path}${j.files > 1 ? ` (${j.files} files)` : ''}${j.warnings?.length ? ' · ' + j.warnings.join('; ') : ''}`, j.warnings?.length ? 'err' : 'ok', 7000);
+    } catch (e) { ctx.message(e.message, 'err', 10000); }
+    finally { busy = false; await P.refresh(); render(); }
+  }
+  async function clearTarget(item) {
+    try { await post('export', { id: item.id, export: null }); ctx.message(`${item.label} has no export target now`); }
+    catch (e) { ctx.message(e.message, 'err', 10000); }
+    await P.refresh();
+  }
+  all.onclick = async () => {
+    if (busy) return;
+    busy = true; render(); ctx.message('exporting all outputs with a target…', 'busy');
+    try {
+      const j = await post('export-all', {});
+      const warnings = j.written.flatMap((w) => w.warnings ?? []);
+      ctx.message(`exported ${j.written.length} output${j.written.length === 1 ? '' : 's'}${j.skipped.length ? ` · ${j.skipped.length} without a target (their Export button sets one)` : ''}${warnings.length ? ' · ' + warnings.join('; ') : ''}`, warnings.length ? 'err' : 'ok', 8000);
+    } catch (e) { ctx.message(e.message, 'err', 10000); }
+    finally { busy = false; await P.refresh(); render(); }
+  };
+
+  function render() {
+    const used = new Set(), usedGroups = new Set(), grouped = new Map();
+    for (const item of list) {
+      const name = item.origin === 'published' ? item.graph ?? 'Outputs' : '__saved';
+      if (!grouped.has(name)) grouped.set(name, []); grouped.get(name).push(item);
+    }
+    const published = list.filter((v) => v.exportable), withTarget = published.filter((v) => v.target);
+    all.disabled = busy || !withTarget.length;
+    all.textContent = busy ? 'Exporting…' : 'Export all';
+    all.title = withTarget.length ? `write every output that has an export target (${withTarget.length}) into exports/` : 'export an output with its button first: that sets its target';
+    barNote.textContent = published.length ? `${withTarget.length} of ${published.length} with a target` : '';
+    bar.hidden = !published.length; empty.hidden = !!list.length;
+    for (const [name, entries] of grouped) {
+      let group = groups.get(name);
+      if (!group) {
+        const box = document.createElement('div'), rows = document.createElement('div');
+        if (name !== '__saved') box.append(text('div', name, 'output-group'));
+        box.append(rows); group = { box, rows }; groups.set(name, group);
+      }
+      usedGroups.add(name);
+      const parent = name === '__saved' ? savedRows : live;
+      if (group.box.parentElement !== parent) parent.append(group.box);
+      const ordered = [], seen = new Set(), ids = new Set(entries.map((item) => item.id));
+      const visit = (item) => { if (seen.has(item.id)) return; seen.add(item.id); ordered.push(item); for (const child of entries) if (child.parent === item.id) visit(child); };
+      for (const item of entries) if (!ids.has(item.parent)) visit(item);
+      for (const item of entries) visit(item);
+      let previous = null;
+      for (const item of ordered) {
+        used.add(item.id); let card = cards.get(item.id);
+        if (!card) {
+          const row = document.createElement('div'); row.className = 'output-card'; row.tabIndex = 0; row.setAttribute('role', 'button'); row.dataset.output = item.id;
+          const thumb = document.createElement('img'); thumb.loading = 'lazy'; thumb.alt = '';
+          const icon = text('span', 'FILE', 'file-icon'), body = text('span', '', 'output-body'), label = text('span', '', 'output-label'), info = text('small', '', 'dim');
+          const target = text('button', '', 'output-target'), go = text('button', 'Export', 'output-export');
+          target.title = 'change where this output exports'; go.type = target.type = 'button';
+          body.append(label, info, target); row.append(thumb, icon, body, go);
+          card = { row, thumb, icon, label, info, target, go, item }; cards.set(item.id, card);
+          go.onclick = () => exportItem(card.item, go);
+          target.onclick = () => exportItem(card.item, go, true);
+          row.onclick = (e) => { if (!e.target.closest('input,button')) P.select(card.item.id); };
+          row.onkeydown = (e) => { if (e.target === row && ['Enter', ' '].includes(e.key)) { e.preventDefault(); P.select(card.item.id); } if (e.key === 'ContextMenu' || e.shiftKey && e.key === 'F10') { e.preventDefault(); contextMenu(card.item, row.getBoundingClientRect().left, row.getBoundingClientRect().bottom); } };
+          row.oncontextmenu = (e) => { e.preventDefault(); contextMenu(card.item, e.clientX, e.clientY); };
+          thumb.onerror = () => { thumb.hidden = true; icon.hidden = false; };
+        }
+        card.item = item;
+        const { row, thumb, icon, label, info, target, go } = card;
+        row.classList.toggle('selected', item.id === selected); row.classList.toggle('child', !!item.parent);
+        row.setAttribute('aria-label', `${item.label} — ${item.kind}`); row.setAttribute('aria-pressed', String(item.id === selected));
+        go.hidden = target.hidden = !item.exportable; go.disabled = busy || item.status === 'loading';
+        go.title = item.target ? `write exports/${item.target.path} again (overwrites it)` : 'choose a format and file, then export';
+        go.setAttribute('aria-label', `Export ${item.label}`);
+        target.textContent = item.exportable ? targetLine(item) : ''; target.classList.toggle('unset', !item.target);
+        const src = ['geometry', 'image'].includes(item.kind) && item.status !== 'loading' ? item.kind === 'image' && !item.generated ? url('file', item) : url('thumb', item) : '';
+        if (thumb.dataset.source !== src) { thumb.dataset.source = src; thumb.hidden = !src; icon.hidden = !!src; if (src) thumb.src = src; }
+        icon.textContent = item.kind === 'geometry' ? '3D' : item.kind === 'image' ? 'IMG' : item.kind.toUpperCase();
+        label.textContent = item.label; info.textContent = item.error ?? (item.status === 'loading' ? 'Cooking…' : `${item.kind}${item.width ? ` · ${item.width}×${item.height}` : ''}`); info.className = item.error ? 'err' : 'dim';
+        const next = previous ? previous.nextSibling : group.rows.firstChild; if (row !== next) group.rows.insertBefore(row, next); previous = row;
+      }
+    }
+    for (const [id, card] of cards) if (!used.has(id)) { card.row.remove(); cards.delete(id); }
+    for (const [name, group] of groups) if (!usedGroups.has(name)) { group.box.remove(); groups.delete(name); }
+    const savedCount = list.filter((v) => v.origin === 'saved' && !v.parent).length;
+    saved.hidden = !savedCount;
+    saved.querySelector('summary').textContent = `Saved files (${savedCount})`;
+  }
+  // "saved 2 min ago" keeps up without a refresh
+  setInterval(() => { for (const card of cards.values()) if (card.item.exportable) card.target.textContent = targetLine(card.item); }, 30000);
+
+  let menu = null, dismissMenu = () => {};
+  function contextMenu(item, x, y) {
+    dismissMenu(); const previous = document.activeElement;
+    menu = document.createElement('div'); menu.className = 'output-menu'; menu.setAttribute('role', 'menu');
+    const close = () => { menu?.remove(); menu = null; removeEventListener('pointerdown', outside, true); removeEventListener('blur', close); previous?.focus(); };
+    const outside = (e) => { if (!menu?.contains(e.target)) close(); }; dismissMenu = close;
+    const add = (label, action) => { const button = text('button', label); button.setAttribute('role', 'menuitem'); button.onclick = () => { close(); action(); }; menu.append(button); };
+    const download = (href, name) => { const a = document.createElement('a'); a.href = href; a.download = name; a.click(); };
+    add(item.origin === 'saved' ? 'Open' : 'Preview', () => P.select(item.id));
+    if (item.kind === 'geometry') add('Frame', async () => { await P.select(item.id); ctx.frameOutput(); });
+    if (item.exportable) {
+      const go = cards.get(item.id)?.go;
+      add(item.target ? `Export to ${item.target.path}` : 'Export…', () => exportItem(item, go));
+      add('Change export target…', () => exportItem(item, go, true));
+      if (item.target) add('Remove export target', () => clearTarget(item));
+    } else if (item.generated && item.kind === 'image') add('Download PNG', () => download(url('image', item, { mode: 'RGBA', download: '1' }), item.label + '.png'));
+    else if (item.files?.length) add(item.files.length > 1 ? 'Download ZIP' : 'Download', () => download(item.files.length > 1 ? url('zip', item) : url('file', item, { download: '1' }), item.label));
+    document.body.append(menu); menu.style.left = Math.max(4, Math.min(x, innerWidth - menu.offsetWidth - 4)) + 'px'; menu.style.top = Math.max(4, Math.min(y, innerHeight - menu.offsetHeight - 4)) + 'px';
+    menu.onkeydown = (e) => { const buttons = [...menu.children], i = buttons.indexOf(document.activeElement); if (e.key === 'Escape' || e.key === 'Tab') { e.preventDefault(); close(); } else if (['ArrowDown', 'ArrowUp'].includes(e.key)) { e.preventDefault(); buttons[(i + (e.key === 'ArrowDown' ? 1 : buttons.length - 1)) % buttons.length].focus(); } };
+    menu.firstChild.focus(); addEventListener('pointerdown', outside, true); addEventListener('blur', close);
+  }
+  P.select = async (id, update = false) => {
+    const item = input?.id === id ? input : list.find((v) => v.id === id); if (!item) return;
+    const changedSelection = selected !== id;
+    if (!update) ctx.rememberOutputView?.(selected);
+    const seq = ++sequence;
+    if (changedSelection) { image.hide(); ctx.hideModelPreview(); }
+    selected = id; P.active = item; ctx.isolated = true; ctx.guides.setMode(null);
+    render(); showDetails(item);
+    if (item.status === 'loading') { ctx.message('Preparing ' + item.label, 'busy'); return; }
+    if (item.status === 'error') { ctx.message(item.error, 'err'); return; }
+    await ctx.outputGraph?.(item);
+    if (seq !== sequence) return;
+    if (item.kind === 'image') { ctx.hideModelPreview(); image.show(item); ctx.message(item.label); ctx.emit('output'); return; }
+    image.hide();
+    if (item.kind !== 'geometry') { ctx.hideModelPreview(); return; }
+    try {
+      const r = await fetch(url('geo', item));
+      if (!r.ok) throw new Error((await r.json()).error);
+      const bytes = await r.arrayBuffer(); if (seq !== sequence) return;
+      await ctx.previewOutput(item, bytes, update);
+      ctx.message(item.label);
+    } catch (e) { if (seq === sequence) ctx.message(e.message, 'err'); }
+  };
+  P.scene = () => {
+    sequence++; initial = false; ctx.rememberOutputView?.(selected); selected = null; P.active = null;
+    image.hide(); ctx.isolated = false; showDetails(null); render(); ctx.restoreScene();
+  };
+  P.refresh = async () => {
+    if (refreshing) { refreshAgain = true; return refreshing; }
+    refreshing = (async () => {
+      try {
+        const response = await fetch('/api/outputs'), j = await response.json(); if (!response.ok) throw new Error(j.error);
+        directory = j.directory; formats = j.formats ?? [];
+        const signature = JSON.stringify(j.items);
+        if (signature === lastList) return;
+        lastList = signature; const before = P.active; list = j.items;
+        const after = input?.id === selected ? input : list.find((v) => v.id === selected); render(); ctx.emit('outputs');
+        if (after && (after.revision !== before?.revision || after.status !== before?.status)) await P.select(after.id, true);
+        else if (after) { P.active = after; showDetails(after); }
+        else if (selected && !after) P.scene();
+        else if (initial && list.length) { initial = false; const main = list.find((v) => v.generated && !v.parent); if (main) await P.select(main.id); }
+      } catch (e) { ctx.message(e.message, 'err'); }
+      finally { refreshing = null; if (refreshAgain) { refreshAgain = false; void P.refresh(); } }
+    })();
+    return refreshing;
+  };
+  document.getElementById('scene-view').onclick = P.scene;
+  P.openInput = async (path, update = false) => {
+    const f = ctx.layers.list.find((v) => v.path === path); if (!f) return;
+    input = { id: 'input:' + path, inputPath: path, label: path, kind: 'image', status: 'ready', revision: `${f.mtime}:${f.size}`, sourceURL: inputImageURL(f), summary: ctx.layers.info.get(path)?.summary ?? ctx.layers.fileText(f) };
+    await P.select(input.id, update);
+  };
+  ctx.on('layers', () => {
+    if (!P.active?.inputPath) return;
+    const f = ctx.layers.list.find((v) => v.path === P.active.inputPath);
+    if (!f) P.scene(); else if (`${f.mtime}:${f.size}` !== P.active.revision) P.openInput(f.path, true);
+  });
+  return P;
+}

package/dist/viewer/app/select.js

@@ -10,11 +10,11 @@ const DRAG_PX = 4;
 
 export function createSelect(ctx) {
   const S = { press: null, boxEl: document.getElementById('boxsel'), hoverAt: null, hoverQueued: false };
-  const meshEntries = () => [...ctx.objects.values()].filter((e) => e.mesh && e.visible && e.mesh.root.visible);
+  const meshEntries = () => [...ctx.objects.values()].filter((e) => e.mesh && (ctx.isolated ? e.id === 'out' && !ctx.previewEmpty : e.visible) && e.mesh.root.visible);
 
   /** What is under a viewport point in a slot: {id, point?} or null. Guides first (they draw on top). */
   S.pick = (slot, x, y) => {
-    const g = ctx.guides.pick(slot, x, y);
+    const g = ctx.isolated ? null : ctx.guides.pick(slot, x, y);
     if (g) return { id: g.id };
     const rc = ctx.views.ray(slot, x, y);
     const linePx = ctx.views.worldPerPixel(slot) * 5;
@@ -50,6 +50,17 @@ export function createSelect(ctx) {
     const p = rc.ray.intersectPlane(planeOf(slot), new THREE.Vector3());
     return p ? { point: p, surface: false } : null;
   };
+  /** Navigation hits actual visible surfaces, never the infinite construction plane or selection bounds. */
+  S.navigationPoint = (slot, x, y) => {
+    const rc = ctx.views.ray(slot, x, y);
+    let best = null;
+    for (const e of meshEntries()) {
+      if (e.surface === false || e.mesh.picture || e.mesh.bboxMode) continue;
+      const h = e.mesh.pick(rc, 0);
+      if (h && h.dist < (best?.dist ?? Infinity)) best = h;
+    }
+    return best?.point?.clone() ?? null;
+  };
   /** A viewport point on the horizontal plane at height `level`, through slot's camera. */
   S.planePoint = (slot, x, y, level) => ctx.views.ray(slot, x, y).ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0, 1, 0), -level), new THREE.Vector3());
 

package/dist/viewer/app/status.js

@@ -0,0 +1,20 @@
+// The status bar's own lines (docs/design/viewer.md section 4): what the page says when nothing else is reported.
+// Plain functions, tested in Node (test/viewer-logic.ts).
+
+/** While the event stream is connected. */
+export const LIVE_LINE = 'live — updates on every build, edit and file save';
+/** While the workspace has no graph. */
+export const NO_GRAPHS_LINE = 'no graphs yet — build one via MCP';
+
+/** The line when the event stream (re)connects: the hint while there is no graph, else the live line. */
+export const connectedLine = (graphCount) => (graphCount ? LIVE_LINE : NO_GRAPHS_LINE);
+
+/**
+ * The line after the graph list was read, or null to keep the one shown: the hint while there is no graph, and the
+ * live line in its place once the first graph arrives. Any other line (an undo, a keymap note, an error) stays.
+ * Whichever of the two runs last at startup, the page ends on the line that fits the workspace.
+ */
+export function graphsLine(shown, graphCount) {
+  if (!graphCount) return NO_GRAPHS_LINE;
+  return shown === NO_GRAPHS_LINE ? LIVE_LINE : null;
+}

package/dist/viewer/app/style.css

@@ -9,6 +9,7 @@
   --mono: 11px/1.35 ui-monospace, Consolas, "SF Mono", monospace;
 }
 * { box-sizing: border-box; }
+[hidden] { display: none !important; }
 html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: var(--font); overflow: hidden; }
 #app {
   display: grid; height: 100%;

package/dist/viewer/index.html

@@ -7,6 +7,7 @@
 <link rel="icon" href="data:,">
 <!-- the viewer page (docs/design/viewer.md): ES modules from /app/, three.js from /vendor/three/, no build step -->
 <link rel="stylesheet" href="/app/style.css">
+<link rel="stylesheet" href="/app/outputs.css">
 <script type="importmap">{ "imports": { "three": "/vendor/three/build/three.module.js", "three/addons/": "/vendor/three/examples/jsm/" } }</script>
 <script type="module" src="/app/main.js"></script>
 </head>
@@ -14,18 +15,30 @@
 <div id="app">
   <header id="top">
     <label class="tb" title="the graph shown">graph <select id="graph"></select></label>
-    <label class="tb" title="the current view's camera (Alt+1..4 in the Maya keymap)">view <select id="view-cam"></select></label>
-    <label class="tb" title="the current view's shading (4 / 5 / 6 in the Maya keymap)">shading <select id="view-shading"></select></label>
+    <label class="tb" title="the current view's camera; see ? for active key bindings">view <select id="view-cam"></select></label>
+    <label class="tb" title="the current view's shading; see ? for active key bindings">shading <select id="view-shading"></select></label>
     <span class="tb readout" id="step" title="the current view's grid step"></span>
     <button class="tb" id="quad" title="single / quad view">quad</button>
     <span class="grow"></span>
+    <button class="tb" id="scene-view" title="back to the whole scene after looking at one output">Scene</button>
     <span class="tb mode" id="mode"></span>
     <label class="tb" title="keyboard and mouse bindings, remembered in this browser">keymap <select id="preset"></select></label>
     <button class="tb" id="help" title="the keymap (?)">?</button>
   </header>
   <aside id="outliner" class="panel">
-    <div class="phead">Outliner</div>
-    <div class="pscroll" id="tree"></div>
+    <div class="phead tabs" role="tablist" aria-label="Scene, outputs and inputs">
+      <button role="tab" id="tab-scene" data-tab="scene" aria-controls="tree">Scene</button>
+      <button role="tab" id="tab-outputs" data-tab="outputs" aria-controls="outputs-pane">Outputs <span class="count"></span></button>
+      <button role="tab" id="tab-inputs" data-tab="inputs" aria-controls="inputs-pane">Inputs <span class="count"></span></button>
+      <button id="thumb-size" title="Cycle thumbnail size" aria-label="Cycle thumbnail size">56 px</button>
+    </div>
+    <div class="pscroll tabpane" id="tree" data-pane="scene" role="tabpanel" aria-labelledby="tab-scene"></div>
+    <div class="pscroll tabpane" id="outputs-pane" data-pane="outputs" role="tabpanel" aria-labelledby="tab-outputs"><div id="outputs"></div></div>
+    <div class="pscroll tabpane" id="inputs-pane" data-pane="inputs" role="tabpanel" aria-labelledby="tab-inputs">
+      <div class="inputs-bar"><button class="primary" id="add-input">Add input…</button><span class="dim" id="inputs-where"></span></div>
+      <input id="input-file" type="file" multiple hidden accept=".glb,.gltf,.obj,.stl,.ply,.geo,.bgeo,.blend,.csv,.json,.png,.jpg,.jpeg,.webp">
+      <div id="inputs-list"></div>
+    </div>
     <div class="grip v" data-grip="left" title="drag to resize"></div>
   </aside>
   <main id="viewport">
@@ -36,6 +49,7 @@
   <aside id="props" class="panel">
     <div class="grip v" data-grip="right" title="drag to resize"></div>
     <div class="phead">Properties</div>
+    <div id="output-details" hidden></div>
     <div class="pscroll" id="props-body"></div>
     <div class="grip h" data-grip="split" title="drag to resize"></div>
     <div class="phead">Controls <span class="count" id="controls-count"></span></div>
@@ -48,6 +62,6 @@
     <span id="cook"></span>
   </footer>
 </div>
-<div id="drop">drop files to add them to <span id="drop-where">inputs/</span><br><small>they show as reference layers in the outliner</small></div>
+<div id="drop">drop files to add them to <span id="drop-where">inputs/</span><br><small>they show in the Inputs tab and as reference layers in the view</small></div>
 </body>
 </html>

package/dist/viewer/outputs.d.ts

@@ -0,0 +1,54 @@
+import type http from 'node:http';
+import type { Workspace } from '../workspace.ts';
+export interface OutputEntry {
+    origin?: 'published' | 'saved';
+    id: string;
+    label: string;
+    graph?: string;
+    node?: string;
+    parent?: string;
+    kind: 'geometry' | 'image' | 'file' | 'bundle';
+    status: 'loading' | 'ready' | 'error';
+    revision: string;
+    error?: string;
+    summary?: string;
+    width?: number;
+    height?: number;
+    layers?: string[];
+    layer?: string;
+    image?: string;
+    generated?: boolean;
+    /** a published output's card has an Export button: `output` is its id (null = the graph's default output) */
+    exportable?: boolean;
+    output?: string | null;
+    /** where it exports (posix path inside exports/, the export tool's options), or null before a first export sets it */
+    target?: {
+        format: string;
+        path: string;
+        options: Record<string, unknown>;
+    } | null;
+    /** its last export to that target: newest file time (ms), total bytes, file count */
+    saved?: {
+        at: number;
+        size: number;
+        files: number;
+    };
+    files?: {
+        id: string;
+        name: string;
+        size: number;
+    }[];
+}
+/** Predictable ZIP bytes, retaining the bundle directory structure. */
+export declare function outputZip(files: {
+    name: string;
+    bytes: Uint8Array;
+}[]): Uint8Array;
+export interface OutputsOptions {
+    /** after a target is set in a graph (topotopo view writes it back into the graph file) */
+    persistGraph?: (graph: string) => void;
+}
+export declare function createOutputs(ws: Workspace, changed: () => void, opts?: OutputsOptions): {
+    close(): void;
+    handle(req: http.IncomingMessage, res: http.ServerResponse, u: URL, readJSON: (r: http.IncomingMessage) => Promise<any>): Promise<boolean>;
+};