@makerclay/core 1.0.0

package/ui/app.css

@@ -0,0 +1,164 @@
+/* The makerclay host UI.
+   Edit this file and every host page changes. `makerclay repair --ui` puts the
+   shipped version back; `makerclay eject` moves these pages into your own tree
+   as ordinary, versioned, malleable documents. */
+
+:root {
+  --bg: #fbfaf8;
+  --panel: #ffffff;
+  --ink: #1c1b19;
+  --muted: #6b6862;
+  --line: #e3dfd8;
+  --accent: #9a5b28;
+  --accent-ink: #fdfcfa;
+  --danger: #a3342a;
+  --ok: #2f6b46;
+  --radius: 8px;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #171614;
+    --panel: #1f1e1b;
+    --ink: #ece8e1;
+    --muted: #9b968d;
+    --line: #322f2a;
+    --accent: #d98b4a;
+    --accent-ink: #1a1815;
+    --danger: #e07a6c;
+    --ok: #7bbd93;
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--accent); }
+
+code, pre, .mono {
+  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
+  font-size: 0.92em;
+}
+
+.wrap { max-width: 68rem; margin: 0 auto; padding: 1.25rem; }
+.narrow { max-width: 26rem; margin: 8vh auto; padding: 1.25rem; }
+
+header.bar {
+  display: flex;
+  gap: .75rem;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: .75rem 1.25rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+header.bar .brand { font-weight: 650; letter-spacing: -0.01em; margin-right: .25rem; }
+header.bar .spacer { flex: 1; }
+
+nav.crumbs { display: flex; gap: .35rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
+nav.crumbs a { text-decoration: none; }
+nav.crumbs span::after { content: "/"; margin-left: .35rem; color: var(--line); }
+
+button, .btn {
+  font: inherit;
+  padding: .38rem .7rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  color: var(--ink);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+button:hover, .btn:hover { border-color: var(--muted); }
+button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 550; }
+button.danger { color: var(--danger); }
+button:disabled { opacity: .5; cursor: default; }
+
+input[type=text], input[type=password], input[type=search], select, textarea {
+  font: inherit;
+  padding: .4rem .55rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  color: var(--ink);
+  width: 100%;
+}
+input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+label { display: block; margin: .9rem 0 .3rem; font-weight: 550; font-size: .9rem; }
+.hint { color: var(--muted); font-size: .86rem; margin: .35rem 0 0; }
+
+table { width: 100%; border-collapse: collapse; }
+th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
+th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
+tr:hover td { background: color-mix(in oklab, var(--accent) 6%, transparent); }
+td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
+td.name a { text-decoration: none; font-weight: 500; }
+td.actions { text-align: right; white-space: nowrap; }
+td.actions button { padding: .2rem .45rem; font-size: .82rem; }
+
+.icon { width: 1.1em; display: inline-block; color: var(--muted); }
+
+.tag {
+  display: inline-block;
+  font-size: .72rem;
+  padding: .05rem .35rem;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  margin-left: .35rem;
+  vertical-align: 1px;
+}
+.tag.private { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, var(--line)); }
+.tag.shared { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, var(--line)); }
+
+.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
+.empty { color: var(--muted); padding: 2.5rem 1rem; text-align: center; }
+
+.toast {
+  position: fixed;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--ink);
+  color: var(--bg);
+  padding: .5rem .9rem;
+  border-radius: var(--radius);
+  font-size: .9rem;
+  opacity: 0;
+  transition: opacity .18s;
+  pointer-events: none;
+  z-index: 50;
+}
+.toast.show { opacity: 1; }
+.toast.error { background: var(--danger); color: #fff; }
+
+dialog {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  color: var(--ink);
+  padding: 1.1rem;
+  width: min(24rem, 92vw);
+}
+dialog::backdrop { background: rgb(0 0 0 / .35); }
+dialog h2 { margin: 0; font-size: 1.05rem; }
+dialog label:first-of-type { margin-top: .7rem; }
+dialog .buttons { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.2rem; }
+
+.row { display: flex; gap: .5rem; align-items: center; }
+.grow { flex: 1; }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

package/ui/attic.html

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}}</title>
+<link rel="stylesheet" href="/_/ui.css">
+</head>
+<body>
+
+<header class="bar">
+  <a class="btn" href="/_/" title="Back to your files">←</a>
+  <span class="brand">The attic</span>
+  <span class="spacer"></span>
+</header>
+
+<main class="wrap">
+  <p class="hint" style="margin:0 0 1.25rem">
+    History belongs to a file, and this host follows a file when you rename it or
+    move it. If a file goes somewhere it cannot be followed, its history is kept
+    here instead of being thrown away. Put a history back on a file and the two
+    are joined again.
+  </p>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Was</th><th class="num">Versions</th><th class="num">Last seen</th>
+        <th class="actions">Actions</th>
+      </tr>
+    </thead>
+    <tbody id="rows"></tbody>
+  </table>
+  <div class="empty" id="empty" hidden>
+    Nothing up here. Every piece of history on this host is attached to a file,
+    which is how it should be.
+  </div>
+</main>
+
+<div class="toast" id="toast"></div>
+
+<script>
+const rows = document.getElementById('rows');
+const empty = document.getElementById('empty');
+const toastEl = document.getElementById('toast');
+
+function toast(message, isError) {
+  toastEl.textContent = message;
+  toastEl.className = 'toast show' + (isError ? ' error' : '');
+  clearTimeout(toast.timer);
+  toast.timer = setTimeout(() => { toastEl.className = 'toast'; }, 2600);
+}
+
+const bytes = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
+
+async function api(path, body) {
+  const res = await fetch(path, {
+    method: body ? 'POST' : 'GET',
+    headers: body ? { 'Content-Type': 'application/json', Accept: 'application/json' } : { Accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const parsed = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(parsed.msg || res.statusText);
+  return parsed;
+}
+
+async function load() {
+  try {
+    const body = await api('/_/attic');
+    rows.replaceChildren(...body.entries.flatMap((entry) => {
+      const tr = document.createElement('tr');
+
+      const was = document.createElement('td');
+      const name = document.createElement('div');
+      name.textContent = entry.path.split('/').pop();
+      was.appendChild(name);
+      const where = document.createElement('div');
+      where.className = 'mono';
+      where.style.color = 'var(--muted)';
+      where.style.fontSize = '.82rem';
+      where.textContent = entry.path;
+      was.appendChild(where);
+      tr.appendChild(was);
+
+      const count = document.createElement('td');
+      count.className = 'num';
+      count.textContent = entry.versions;
+      tr.appendChild(count);
+
+      const seen = document.createElement('td');
+      seen.className = 'num';
+      seen.textContent = entry.lastSeen ? new Date(entry.lastSeen).toLocaleDateString() : '';
+      tr.appendChild(seen);
+
+      const actions = document.createElement('td');
+      actions.className = 'actions';
+
+      const back = document.createElement('button');
+      back.textContent = 'Put back';
+      back.addEventListener('click', () => {
+        const where = prompt('Put this history back on which file?', entry.path);
+        if (!where) return;
+        run(() => api('/_/attic/put-back', { id: entry.id, path: where }), 'Put back');
+      });
+      actions.appendChild(back);
+
+      const download = document.createElement('a');
+      download.className = 'btn';
+      download.textContent = 'Newest';
+      download.title = 'Download the newest version';
+      download.href = `/_/attic/${encodeURIComponent(entry.id)}/${encodeURIComponent(entry.newest)}`;
+      actions.appendChild(download);
+
+      const forget = document.createElement('button');
+      forget.textContent = 'Forget';
+      forget.className = 'danger';
+      forget.addEventListener('click', () => {
+        if (!confirm(`Forget the history of “${entry.path}”? All ${entry.versions} version(s) are deleted permanently and cannot be brought back.`)) return;
+        run(() => api('/_/attic/forget', { id: entry.id }), 'Forgotten');
+      });
+      actions.appendChild(forget);
+
+      tr.appendChild(actions);
+
+      const detail = document.createElement('tr');
+      detail.hidden = true;
+      const cell = document.createElement('td');
+      cell.colSpan = 4;
+      detail.appendChild(cell);
+
+      tr.style.cursor = 'pointer';
+      tr.title = 'Show every version';
+      tr.addEventListener('click', (event) => {
+        if (event.target.closest('.actions')) return;
+        expand(entry, detail, cell);
+      });
+
+      return [tr, detail];
+    }));
+    empty.hidden = body.entries.length > 0;
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+
+// The newest version is on the row because it is the one most people want, but
+// a history nobody can walk back through is not a history, so every version is
+// here. They are fetched per row rather than with the listing, which keeps the
+// listing one directory walk on a host with a lot of orphans.
+async function expand(entry, detail, cell) {
+  detail.hidden = !detail.hidden;
+  if (detail.hidden || cell.dataset.loaded) return;
+  try {
+    const body = await api(`/_/attic/${encodeURIComponent(entry.id)}`);
+    cell.replaceChildren(...body.versions.map((version) => {
+      const item = document.createElement('div');
+      item.className = 'row';
+
+      const when = document.createElement('span');
+      when.className = 'grow';
+      when.textContent = new Date(version.time).toLocaleString();
+      item.appendChild(when);
+
+      const size = document.createElement('span');
+      size.style.color = 'var(--muted)';
+      size.style.fontSize = '.82rem';
+      size.textContent = bytes(version.size);
+      item.appendChild(size);
+
+      const download = document.createElement('a');
+      download.className = 'btn';
+      download.textContent = 'Download';
+      download.href = `/_/attic/${encodeURIComponent(entry.id)}/${encodeURIComponent(version.name)}`;
+      item.appendChild(download);
+
+      return item;
+    }));
+    cell.dataset.loaded = '1';
+  } catch (problem) {
+    detail.hidden = true;
+    toast(problem.message, true);
+  }
+}
+
+async function run(work, message) {
+  try {
+    await work();
+    toast(message);
+    load();
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+
+load();
+</script>
+</body>
+</html>