npm - @makerclay/core - Versions diffs - 1.0.0 - Mend

@makerclay/core 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/LICENSE +221 -0
package/README.md +82 -0
package/package.json +52 -0
package/src/admin/listing.js +149 -0
package/src/admin/routes.js +362 -0
package/src/attic.js +168 -0
package/src/auth/can.js +79 -0
package/src/auth/csrf.js +74 -0
package/src/auth/none.js +24 -0
package/src/auth/password.js +281 -0
package/src/auth/passwords.js +79 -0
package/src/auth/rate-limit.js +66 -0
package/src/auth/sessions.js +86 -0
package/src/auth/token-lanes.js +72 -0
package/src/boot.js +120 -0
package/src/client.js +99 -0
package/src/collections/index.js +397 -0
package/src/collections/routes.js +166 -0
package/src/create-host.js +351 -0
package/src/derived/data-extractor.js +22 -0
package/src/derived/index.js +121 -0
package/src/documents/format-html.js +313 -0
package/src/documents/replace.js +257 -0
package/src/documents/root-attrs.js +171 -0
package/src/documents/serve.js +137 -0
package/src/documents/stale.js +20 -0
package/src/index.js +12 -0
package/src/inspect.js +136 -0
package/src/json-errors.js +59 -0
package/src/livesync.js +75 -0
package/src/nodes/identity.js +14 -0
package/src/nodes/names.js +57 -0
package/src/nodes/ops.js +613 -0
package/src/nodes/scanner.js +321 -0
package/src/nodes/store.js +111 -0
package/src/pages.js +166 -0
package/src/paths.js +302 -0
package/src/recovery/overlay.js +327 -0
package/src/recovery/replay.js +236 -0
package/src/recovery-ui.js +185 -0
package/src/recovery.js +30 -0
package/src/requests.js +73 -0
package/src/routes/meta.js +62 -0
package/src/routes/read.js +105 -0
package/src/routes/save.js +102 -0
package/src/routes/sync.js +118 -0
package/src/routes/upload.js +128 -0
package/src/share/index.js +207 -0
package/src/share/save-tokens.js +65 -0
package/src/spec/codes.js +42 -0
package/src/spec/meta.js +52 -0
package/src/spec/wire.js +115 -0
package/src/store/index.js +29 -0
package/src/store/migrations/001-init.sql +114 -0
package/src/store/sqlite.js +540 -0
package/src/templates.js +50 -0
package/src/tenants/index.js +355 -0
package/src/tenants/isolation.js +91 -0
package/src/tenants/routes.js +131 -0
package/src/ui.js +95 -0
package/src/util/cookies.js +26 -0
package/src/util/express.js +8 -0
package/src/util/fsx.js +205 -0
package/src/util/id.js +37 -0
package/src/util/lockfile.js +52 -0
package/src/util/locks.js +35 -0
package/src/util/multipart.js +33 -0
package/src/versions/files.js +307 -0
package/src/versions/index.js +16 -0
package/src/versions/naming.js +172 -0
package/src/versions/routes.js +91 -0
package/src/wire-compat.js +61 -0
package/ui/app.css +164 -0
package/ui/attic.html +198 -0
package/ui/dashboard.html +456 -0
package/ui/editor.html +156 -0
package/ui/error.html +18 -0
package/ui/login.html +58 -0
package/ui/records.html +173 -0
package/ui/recovery.html +152 -0
package/ui/setup.html +61 -0
package/ui/share-qr.html +44 -0
package/ui/templates/blank.html +16 -0
package/ui/templates/devlog.html +71 -0
package/ui/templates/hackable-dashboard.html +145 -0
package/ui/templates/kanban.html +85 -0
package/ui/templates/landing.html +108 -0
package/ui/templates/writer.html +50 -0
package/ui/tenants.html +172 -0
package/ui/trash.html +134 -0
package/ui/versions.html +114 -0

package/ui/dashboard.html ADDED Viewed

@@ -0,0 +1,456 @@
+<!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">
+<style>
+  #drop.over { outline: 2px dashed var(--accent); outline-offset: -6px; }
+  th.sortable { cursor: pointer; user-select: none; }
+  th.sortable[aria-sort="ascending"]::after { content: " ↑"; }
+  th.sortable[aria-sort="descending"]::after { content: " ↓"; }
+  td.name { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+</style>
+</head>
+<body data-tenants="{{tenants}}" data-uploads="{{uploads}}" data-shares="{{shares}}" data-collections="{{collections}}">
+<header class="bar">
+  <span class="brand">makerclay</span>
+  <nav class="crumbs" id="crumbs"></nav>
+  <span class="spacer"></span>
+  <input type="search" id="q" placeholder="Search this folder" style="width:12rem" aria-label="Search">
+  <button id="new-doc" class="primary">New document</button>
+  <button id="new-folder">New folder</button>
+  <button id="upload-btn">Upload</button>
+  <a class="btn" href="/_/trash.html">Trash</a>
+  <a class="btn" href="/_/tenants.html" id="people" hidden>People</a>
+  <button id="signout">Sign out</button>
+</header>
+<main class="wrap" id="drop">
+  <table>
+    <thead>
+      <tr>
+        <th class="sortable" data-sort="name">Name</th>
+        <th class="num sortable" data-sort="size">Size</th>
+        <th class="num sortable" data-sort="modified">Modified</th>
+        <th class="actions">Actions</th>
+      </tr>
+    </thead>
+    <tbody id="rows"></tbody>
+  </table>
+  <div class="empty" id="empty" hidden>This folder is empty.</div>
+</main>
+<input type="file" id="file-input" multiple class="sr">
+<dialog id="new-dialog">
+  <form method="dialog" id="new-form">
+    <h2>New document</h2>
+    <label for="new-name">Name</label>
+    <input type="text" id="new-name" value="untitled.html" required spellcheck="false">
+    <label for="new-template">Start from</label>
+    <select id="new-template"></select>
+    <p class="hint" id="new-note"></p>
+    <div class="buttons">
+      <button value="cancel" formnovalidate>Cancel</button>
+      <button value="create" class="primary">Create</button>
+    </div>
+  </form>
+</dialog>
+<dialog id="collect-dialog">
+  <form method="dialog">
+    <h2>Submissions for <span id="collect-name"></span></h2>
+    <p class="hint">This document can now take form posts from anywhere. Put these two
+       attributes on your <code>&lt;form&gt;</code>:</p>
+    <pre class="mono" id="collect-snippet" style="white-space:pre-wrap;word-break:break-all;
+         background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.6rem;margin:.5rem 0"></pre>
+    <p class="hint">The token only permits posting a record. It reads nothing back, so it is
+       safe to ship inside a page you hand out.</p>
+    <p class="hint">Address: <code id="collect-slug"></code> · token: <code id="collect-token"></code></p>
+    <div class="buttons">
+      <button id="collect-copy">Copy the snippet</button>
+      <a class="btn" id="collect-records" href="#">See submissions</a>
+      <button value="done" class="primary">Done</button>
+    </div>
+  </form>
+</dialog>
+<div class="toast" id="toast"></div>
+<script>
+const rows = document.getElementById('rows');
+const crumbs = document.getElementById('crumbs');
+const empty = document.getElementById('empty');
+const toastEl = document.getElementById('toast');
+const canShare = document.body.dataset.shares === 'true';
+const canTenant = document.body.dataset.tenants === 'true';
+document.getElementById('people').hidden = !canTenant;
+const canUpload = document.body.dataset.uploads === 'true';
+const canCollect = document.body.dataset.collections === 'true';
+let dir = new URLSearchParams(location.search).get('dir') || '';
+let sort = 'name';
+let direction = 'asc';
+let q = '';
+function toast(message, isError) {
+  toastEl.textContent = message;
+  toastEl.className = 'toast show' + (isError ? ' error' : '');
+  clearTimeout(toast.timer);
+  toast.timer = setTimeout(() => { toastEl.className = 'toast'; }, 2600);
+}
+async function api(path, body, method) {
+  const res = await fetch(path, {
+    method: 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;
+}
+const when = (ms) => {
+  const days = (Date.now() - ms) / 86400000;
+  if (days < 1) return new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+  if (days < 350) return new Date(ms).toLocaleDateString([], { month: 'short', day: 'numeric' });
+  return new Date(ms).toLocaleDateString([], { year: 'numeric', month: 'short' });
+};
+function drawCrumbs(list) {
+  crumbs.replaceChildren(...list.flatMap((crumb, index) => {
+    const link = Object.assign(document.createElement('a'), {
+      textContent: crumb.name,
+      href: crumb.path ? `/_/?dir=${encodeURIComponent(crumb.path)}` : '/_/',
+    });
+    link.addEventListener('click', (event) => { event.preventDefault(); go(crumb.path); });
+    if (index === list.length - 1) return [link];
+    const sep = document.createElement('span');
+    sep.appendChild(link);
+    return [sep];
+  }));
+}
+function actionButton(text, title, handler, className) {
+  const button = document.createElement('button');
+  button.textContent = text;
+  button.title = title;
+  if (className) button.className = className;
+  button.addEventListener('click', handler);
+  return button;
+}
+function drawRow(entry) {
+  const tr = document.createElement('tr');
+  const name = document.createElement('td');
+  name.className = 'name';
+  const link = document.createElement('a');
+  link.textContent = (entry.kind === 'dir' ? '📁 ' : entry.kind === 'doc' ? '📄 ' : '🖇 ') + entry.name;
+  link.href = entry.kind === 'dir' ? `/_/?dir=${encodeURIComponent(entry.path)}` : entry.url;
+  if (entry.kind === 'dir') {
+    link.addEventListener('click', (event) => { event.preventDefault(); go(entry.path); });
+  } else {
+    link.target = '_blank';
+  }
+  name.appendChild(link);
+  if (entry.private) name.insertAdjacentHTML('beforeend', '<span class="tag private">private</span>');
+  if (entry.shared) name.insertAdjacentHTML('beforeend', `<span class="tag shared">${entry.shared} link${entry.shared > 1 ? 's' : ''}</span>`);
+  if (entry.isolated) name.insertAdjacentHTML('beforeend', '<span class="tag">sandboxed</span>');
+  if (entry.collection) name.insertAdjacentHTML('beforeend', '<span class="tag shared">collecting</span>');
+  tr.appendChild(name);
+  const size = document.createElement('td');
+  size.className = 'num';
+  size.textContent = entry.sizeLabel || '';
+  tr.appendChild(size);
+  const modified = document.createElement('td');
+  modified.className = 'num';
+  modified.textContent = when(entry.modified);
+  tr.appendChild(modified);
+  const actions = document.createElement('td');
+  actions.className = 'actions';
+  if (entry.kind === 'doc') {
+    actions.append(
+      Object.assign(document.createElement('a'), {
+        className: 'btn', textContent: 'Edit', href: `/_/edit/${entry.path.split('/').map(encodeURIComponent).join('/')}`,
+        style: 'padding:.2rem .45rem;font-size:.82rem',
+      }),
+      actionButton('History', 'Version history', () => {
+        location.href = `/_/versions.html?path=${encodeURIComponent(entry.path)}`;
+      }),
+    );
+    if (canShare) actions.appendChild(actionButton('Share', 'Create a share link', () => share(entry)));
+    actions.appendChild(actionButton(entry.private ? 'Publish' : 'Make private', 'Toggle who can read it',
+      () => flag('private', entry, !entry.private)));
+    actions.appendChild(actionButton(
+      entry.isolated ? 'Leave sandbox' : 'Sandbox',
+      entry.isolated
+        ? 'Run this file normally again'
+        : "Run this file in a sandbox: safer, but it can't use browser storage",
+      () => sandbox(entry),
+    ));
+    if (canCollect) {
+      actions.appendChild(actionButton(
+        entry.collection ? 'Submissions' : 'Collect',
+        entry.collection
+          ? 'See what people have sent this document'
+          : 'Let this document accept form submissions',
+        () => collect(entry),
+      ));
+    }
+    if (canTenant) {
+      actions.appendChild(actionButton(
+        entry.signups ? 'Close signups' : 'Open signups',
+        'Let other people take their own copy of this document',
+        () => flag('signups', entry, !entry.signups),
+      ));
+    }
+  }
+  actions.append(
+    actionButton('Rename', 'Rename', () => rename(entry)),
+    actionButton('Copy', 'Duplicate', () => run(() => api('/_/copy', { path: entry.path }), 'Copied')),
+    actionButton('Delete', 'Move to trash', () => run(() => api('/_/delete', { paths: [entry.path] }), 'Moved to trash'), 'danger'),
+  );
+  tr.appendChild(actions);
+  return tr;
+}
+async function load() {
+  const params = new URLSearchParams({ dir, sort, direction });
+  if (q) params.set('q', q);
+  try {
+    const body = await api(`/_/nodes?${params}`);
+    drawCrumbs(body.breadcrumbs);
+    rows.replaceChildren(...body.entries.map(drawRow));
+    empty.hidden = body.entries.length > 0;
+    document.querySelectorAll('th.sortable').forEach((th) => {
+      th.setAttribute('aria-sort', th.dataset.sort === sort
+        ? (direction === 'asc' ? 'ascending' : 'descending') : 'none');
+    });
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+function go(next) {
+  dir = next || '';
+  const url = dir ? `/_/?dir=${encodeURIComponent(dir)}` : '/_/';
+  history.pushState({ dir }, '', url);
+  load();
+}
+addEventListener('popstate', (event) => { dir = event.state?.dir || ''; load(); });
+async function run(work, message) {
+  try {
+    await work();
+    if (message) toast(message);
+    load();
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+function rename(entry) {
+  const name = prompt(`Rename “${entry.name}” to:`, entry.name);
+  if (!name || name === entry.name) return;
+  run(() => api('/_/rename', { path: entry.path, name }), 'Renamed');
+}
+const FLAG_MESSAGES = {
+  private: ['Now private', 'Now public'],
+  signups: ['Anyone with the link can take their own copy', 'Signups closed'],
+};
+function flag(kind, entry, value) {
+  const [on, off] = FLAG_MESSAGES[kind] || ['Done', 'Done'];
+  run(() => api(`/_/${kind}`, { path: entry.path, value }), value ? on : off);
+}
+// The sandbox costs the document browser storage, so the server greps for it and
+// says so rather than letting the owner find out from a broken app.
+async function sandbox(entry) {
+  const value = !entry.isolated;
+  try {
+    const body = await api('/_/isolate', { path: entry.path, value });
+    if (body.warning) toast(body.warning, true);
+    else toast(value ? 'Now running in a sandbox' : 'No longer sandboxed');
+    load();
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+async function share(entry) {
+  const grant = confirm(`Let people EDIT “${entry.name}” with this link?\n\nOK = edit, Cancel = view only`)
+    ? 'edit' : 'view';
+  try {
+    const body = await api('/_/share', { path: entry.path, grant });
+    await navigator.clipboard.writeText(body.url).catch(() => {});
+    toast('Link copied. Opening the QR page.');
+    window.open(body.qrUrl, '_blank');
+    load();
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+// Marking is idempotent: the server hands back the existing collection if this
+// document already is one, so the same click opens the panel either way.
+async function collect(entry) {
+  try {
+    const body = await api('/_/collection', { path: entry.path });
+    const dialog = document.getElementById('collect-dialog');
+    document.getElementById('collect-name').textContent = entry.name;
+    document.getElementById('collect-slug').textContent = body.slug;
+    document.getElementById('collect-token').textContent = body.submitToken;
+    document.getElementById('collect-records').href = `/_/records.html?slug=${encodeURIComponent(body.slug)}`;
+    document.getElementById('collect-snippet').textContent =
+      `<form collection="${body.slug}" collection-token="${body.submitToken}">`;
+    dialog.returnValue = '';
+    dialog.showModal();
+    if (!entry.collection) load();
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+document.getElementById('collect-copy').addEventListener('click', async (event) => {
+  event.preventDefault();
+  await navigator.clipboard.writeText(document.getElementById('collect-snippet').textContent).catch(() => {});
+  toast('Copied');
+});
+const newDialog = document.getElementById('new-dialog');
+const newName = document.getElementById('new-name');
+const newTemplate = document.getElementById('new-template');
+const newNote = document.getElementById('new-note');
+// Notes for the templates that ship. A starter you dropped into ui/templates
+// yourself still shows up in this list, just without a description.
+const TEMPLATE_NOTES = {
+  blank: 'A heading, a paragraph, and nothing else.',
+  writer: 'One long editable article with a live word count.',
+  kanban: 'Draggable cards in three columns.',
+  devlog: 'Dated entries, newest first.',
+  landing: 'A pitch, three features, and a sign-up form you can point at a collection.',
+  'hackable-dashboard': 'This file manager, as a document you own and can rewrite.',
+};
+async function fillTemplates() {
+  if (newTemplate.options.length) return;
+  let names = ['blank'];
+  try {
+    names = (await api('/_/templates')).templates;
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+  newTemplate.replaceChildren(...names.map((name) => Object.assign(
+    document.createElement('option'), { value: name, textContent: name },
+  )));
+}
+const describeTemplate = () => {
+  newNote.textContent = TEMPLATE_NOTES[newTemplate.value] || '';
+};
+newTemplate.addEventListener('change', describeTemplate);
+document.getElementById('new-doc').addEventListener('click', async () => {
+  await fillTemplates();
+  describeTemplate();
+  newName.value = 'untitled.html';
+  newDialog.showModal();
+  newName.setSelectionRange(0, newName.value.lastIndexOf('.'));
+});
+newDialog.addEventListener('close', () => {
+  const name = newName.value.trim();
+  if (newDialog.returnValue !== 'create' || !name) return;
+  run(async () => {
+    const body = await api('/_/new', {
+      dir, name: name.endsWith('.html') ? name : `${name}.html`, template: newTemplate.value,
+    });
+    location.href = `/_/edit/${body.path.split('/').map(encodeURIComponent).join('/')}`;
+  });
+});
+document.getElementById('new-folder').addEventListener('click', () => {
+  const name = prompt('Name your folder:');
+  if (name) run(() => api('/_/mkdir', { dir, name }), 'Folder created');
+});
+const fileInput = document.getElementById('file-input');
+document.getElementById('upload-btn').addEventListener('click', () => fileInput.click());
+document.getElementById('upload-btn').hidden = !canUpload;
+fileInput.addEventListener('change', () => upload([...fileInput.files]));
+async function upload(files) {
+  if (!files.length) return;
+  const form = new FormData();
+  form.append('dir', dir);
+  for (const file of files) form.append('file', file, file.name);
+  try {
+    const res = await fetch('/_/add-files', { method: 'POST', body: form, headers: { Accept: 'application/json' } });
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(body.msg || 'Upload failed');
+    toast(`Uploaded ${body.files.length} file${body.files.length > 1 ? 's' : ''}`);
+    load();
+  } catch (problem) {
+    toast(problem.message, true);
+  } finally {
+    fileInput.value = '';
+  }
+}
+const drop = document.getElementById('drop');
+['dragenter', 'dragover'].forEach((name) => drop.addEventListener(name, (event) => {
+  event.preventDefault();
+  if (canUpload) drop.classList.add('over');
+}));
+['dragleave', 'drop'].forEach((name) => drop.addEventListener(name, () => drop.classList.remove('over')));
+drop.addEventListener('drop', (event) => {
+  event.preventDefault();
+  if (canUpload) upload([...event.dataTransfer.files]);
+});
+document.getElementById('q').addEventListener('input', (event) => {
+  q = event.target.value;
+  clearTimeout(load.timer);
+  load.timer = setTimeout(load, 160);
+});
+document.querySelectorAll('th.sortable').forEach((th) => th.addEventListener('click', () => {
+  if (sort === th.dataset.sort) direction = direction === 'asc' ? 'desc' : 'asc';
+  else { sort = th.dataset.sort; direction = 'asc'; }
+  load();
+}));
+document.getElementById('signout').addEventListener('click', async () => {
+  await fetch('/_/logout', { method: 'POST', headers: { Accept: 'application/json' } });
+  location.href = '/_/login';
+});
+// Only the table body is redrawn, so a rename in a terminal shows up here
+// without stealing focus from the search box or a half-typed prompt.
+const events = new EventSource('/_/events');
+let pending = null;
+for (const name of ['node-saved', 'node-created', 'node-moved', 'node-trashed',
+                    'node-restored', 'node-purged', 'node-updated', 'node-changed',
+                    'node-renamed', 'node-appeared']) {
+  events.addEventListener(name, () => {
+    clearTimeout(pending);
+    pending = setTimeout(load, 120);
+  });
+}
+load();
+</script>
+</body>
+</html>

package/ui/editor.html ADDED Viewed

@@ -0,0 +1,156 @@
+<!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">
+<link rel="stylesheet" href="/_/editor/lib/codemirror.css">
+<link rel="stylesheet" href="/_/editor/addon/dialog/dialog.css">
+<style>
+  html, body { height: 100%; }
+  body { display: flex; flex-direction: column; }
+  .CodeMirror { flex: 1; height: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; }
+  @media (prefers-color-scheme: dark) {
+    .CodeMirror { background: var(--panel); color: var(--ink); }
+    .CodeMirror-gutters { background: var(--panel); border-color: var(--line); }
+    .CodeMirror-cursor { border-left-color: var(--ink); }
+    /* CodeMirror 5 ships one light theme, so the two highlights it paints in
+       pale blue have to be restated or they glare on a dark page. */
+    .CodeMirror-activeline-background { background: color-mix(in oklab, var(--accent) 10%, transparent); }
+    .CodeMirror-selected { background: color-mix(in oklab, var(--accent) 22%, transparent) !important; }
+    .CodeMirror-matchingbracket { color: var(--accent) !important; outline: 1px solid var(--line); }
+    .cm-s-default .cm-tag { color: #d98b4a; }
+    .cm-s-default .cm-attribute { color: #9bbd7b; }
+    .cm-s-default .cm-string { color: #d3b58d; }
+    .cm-s-default .cm-comment { color: var(--muted); }
+    .cm-s-default .cm-keyword { color: #c58fd0; }
+  }
+  #status { color: var(--muted); font-size: .86rem; }
+  #status.dirty { color: var(--accent); }
+  #status.error { color: var(--danger); }
+</style>
+</head>
+<body data-path="{{path}}" data-etag="{{etag}}" data-mode="{{mode}}" data-save-url="{{saveUrl}}">
+<header class="bar">
+  <a class="btn" href="/_/" title="Back to your files">←</a>
+  <span class="brand">{{name}}</span>
+  <span id="status">Saved</span>
+  <span class="spacer"></span>
+  <a class="btn" href="/{{path}}" target="_blank">View</a>
+  <a class="btn" href="/_/versions.html?path={{path}}">History</a>
+  <button id="save" class="primary">Save</button>
+</header>
+<textarea id="source" class="sr">{{source}}</textarea>
+<div class="toast" id="toast"></div>
+<script src="/_/editor/lib/codemirror.js"></script>
+<script src="/_/editor/mode/xml/xml.js"></script>
+<script src="/_/editor/mode/javascript/javascript.js"></script>
+<script src="/_/editor/mode/css/css.js"></script>
+<script src="/_/editor/mode/htmlmixed/htmlmixed.js"></script>
+<script src="/_/editor/addon/edit/closetag.js"></script>
+<script src="/_/editor/addon/edit/matchbrackets.js"></script>
+<script src="/_/editor/addon/selection/active-line.js"></script>
+<script src="/_/editor/addon/dialog/dialog.js"></script>
+<script src="/_/editor/addon/search/searchcursor.js"></script>
+<script src="/_/editor/addon/search/search.js"></script>
+<script src="/_/editor/addon/search/jump-to-line.js"></script>
+<script>
+const docPath = document.body.dataset.path;
+const statusEl = document.getElementById('status');
+const toastEl = document.getElementById('toast');
+// The etag the page loaded with. It travels back as If-Match, which makes this
+// the first conditional-save client in the ecosystem: a second tab cannot
+// silently overwrite what this one is looking at.
+let etag = document.body.dataset.etag;
+let dirty = false;
+const editor = CodeMirror.fromTextArea(document.getElementById('source'), {
+  mode: document.body.dataset.mode,
+  lineNumbers: true,
+  lineWrapping: true,
+  autoCloseTags: true,
+  matchBrackets: true,
+  styleActiveLine: true,
+  indentUnit: 2,
+  tabSize: 2,
+  viewportMargin: 40,
+});
+editor.focus();
+function toast(message, isError) {
+  toastEl.textContent = message;
+  toastEl.className = 'toast show' + (isError ? ' error' : '');
+  clearTimeout(toast.timer);
+  toast.timer = setTimeout(() => { toastEl.className = 'toast'; }, 3200);
+}
+function setStatus(text, kind) {
+  statusEl.textContent = text;
+  statusEl.className = kind || '';
+}
+editor.on('change', () => {
+  if (dirty) return;
+  dirty = true;
+  setStatus('Unsaved changes', 'dirty');
+});
+async function save() {
+  const button = document.getElementById('save');
+  button.disabled = true;
+  setStatus('Saving…');
+  try {
+    // A sandboxed document saves through its token, so the server decides which
+    // lane this page uses rather than the page assuming the cookie one.
+    const res = await fetch(document.body.dataset.saveUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+        'Document-URL': '/' + docPath,
+        'If-Match': '"' + etag + '"',
+        'Save-Trigger': 'user',
+        Accept: 'application/json',
+      },
+      body: editor.getValue(),
+    });
+    const body = await res.json().catch(() => ({}));
+    if (res.status === 412) {
+      setStatus('Someone else changed this file', 'error');
+      toast('This file changed since you opened it. Open History to compare before you overwrite.', true);
+      return;
+    }
+    if (!res.ok) throw new Error(body.msg || 'Save failed');
+    etag = body.etag || etag;
+    dirty = false;
+    setStatus('Saved');
+    if (body.msgType === 'warning') toast(body.msg, true);
+  } catch (problem) {
+    setStatus('Not saved', 'error');
+    toast(problem.message, true);
+  } finally {
+    button.disabled = false;
+  }
+}
+document.getElementById('save').addEventListener('click', save);
+editor.setOption('extraKeys', {
+  'Cmd-S': save,
+  'Ctrl-S': save,
+});
+addEventListener('keydown', (event) => {
+  if ((event.metaKey || event.ctrlKey) && event.key === 's') { event.preventDefault(); save(); }
+});
+addEventListener('beforeunload', (event) => {
+  if (dirty) { event.preventDefault(); event.returnValue = ''; }
+});
+</script>
+</body>
+</html>

package/ui/error.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}} · makerclay</title>
+<link rel="stylesheet" href="/_/ui.css">
+</head>
+<body>
+<main class="narrow">
+  <div class="card">
+    <h1 style="margin:0 0 .5rem;font-size:1.3rem">{{title}}</h1>
+    <p style="margin:0">{{message}}</p>
+    <p class="hint" style="margin-top:1.2rem"><a href="/_/">Back to your files</a></p>
+  </div>
+</main>
+</body>
+</html>