glideshow 0.1.2__py3-none-any.whl

glideshow/editor/lib/merge.js

@@ -0,0 +1,174 @@
+/* Three-way merges of slides and of whole decks, on their HTML text (no DOM): the editor merges with them when a deck
+   was saved elsewhere while it has changes of its own (storage.js mergeIn), and a library online does when a push from
+   the Mac lands under a save of its own not yet committed (lib/library.js rebaseDecks).
+
+   `base` is the version both sides started from; `mine` and `theirs` were made from it apart. A slide (by data-sid)
+   comes from whichever side changed it. One both changed is merged box by box (by id): a box added on either side is
+   kept, one removed on one side and left alone on the other goes, and one changed on both keeps mine. A slide or box
+   one side removed and the other changed is kept, changed. The order is theirs, unless I moved things, then mine;
+   what is new on one side goes after what it followed there.
+
+   A classic script and a module at once (it exports nothing): the editor loads it with a <script>, lib/library.js
+   imports it; both find it on globalThis.glideMerge. */
+(() => {
+  const normHTML = h => h.replace(/\sid="[^"]*"/g, '');   // ids the editor gives id-less boxes differ on every load
+  const sameHTML = (a, b) => a === b || normHTML(a) === normHTML(b);
+  const same = (a, b) => a !== undefined && b !== undefined && sameHTML(a, b);
+  const sidOf = h => (h.match(/^<section\b[^>]*\sdata-sid="([^"]+)"/) || [])[1] || '';
+
+  /* Keyed lists (key(item) → id), three ways. both(b, m, t) settles an item both sides changed (default: mine);
+     val(item) is the HTML compared. */
+  function mergeLists(base, mine, theirs, key, both = (b, m, t) => m, val = x => x) {
+    const map = list => new Map(list.map(h => [key(h), h]));
+    const same = (a, b) => a !== undefined && b !== undefined && sameHTML(val(a), val(b));
+    const B = map(base), M = map(mine), T = map(theirs), clash = [], out = new Map();
+    for (const id of new Set([...M.keys(), ...T.keys(), ...B.keys()])) {
+      const b = B.get(id), m = M.get(id), t = T.get(id);
+      if (m !== undefined && t !== undefined) {
+        if (same(m, b)) out.set(id, t);
+        else if (same(t, b) || same(t, m)) out.set(id, m);
+        else { out.set(id, both(b, m, t)); clash.push(id); }
+      }
+      else if (m !== undefined) { if (b === undefined || !same(m, b)) out.set(id, m); }   // new here, or changed here though removed there
+      else if (t !== undefined) { if (b === undefined || !same(t, b)) out.set(id, t); }
+    }
+    const ids = list => list.map(key);
+    const moved = ids(mine).filter(id => B.has(id)).join() !== ids(base).filter(id => M.has(id)).join();
+    const [lead, other] = moved ? [mine, theirs] : [theirs, mine];
+    const order = ids(lead).filter(id => out.has(id));
+    ids(other).forEach((id, i) => {   // what only the other side has: after what it follows there
+      if (!out.has(id) || order.includes(id)) return;
+      const prev = ids(other).slice(0, i).reverse().find(x => order.includes(x));
+      order.splice(prev ? order.indexOf(prev) + 1 : 0, 0, id);
+    });
+    for (const id of out.keys()) if (!order.includes(id)) order.push(id);
+    return { list: order.map(id => out.get(id)), clash: clash.filter(id => order.includes(id)), order };
+  }
+
+  /* An element's parts, read off its text: what opens it, its top-level children (each whole), and what closes it.
+     null when the tags don't pair up. Comments and raw-text elements (script, style, …) are taken whole. */
+  const VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+  const TOKEN = /<!--[\s\S]*?-->|<(script|style|textarea|title|xmp|noscript|template)\b(?:[^>"']|"[^"]*"|'[^']*')*>[\s\S]*?<\/\1\s*>|<(\/?)([a-zA-Z][\w:-]*)\b(?:[^>"']|"[^"]*"|'[^']*')*?(\/?)>/g;
+  function parts(html) {
+    const open = html.match(/^\s*<([a-zA-Z][\w-]*)\b(?:[^>"']|"[^"]*"|'[^']*')*>/);
+    if (!open) return null;
+    const close = html.match(/<\/\s*([a-zA-Z][\w-]*)\s*>\s*$/);
+    if (!close || close[1].toLowerCase() !== open[1].toLowerCase()) return null;
+    const body = html.slice(open[0].length, html.length - close[0].length), kids = [];
+    let depth = 0, start = -1, last = 0;
+    const text = (a, z) => { const t = body.slice(a, z).trim(); if (t) kids.push(t); };   // loose text between elements
+    for (const m of body.matchAll(TOKEN)) {
+      const at = m.index, end = at + m[0].length;
+      const whole = m[0].startsWith('<!--') || m[1] || (!m[2] && (m[4] || VOID.has(m[3].toLowerCase())));
+      if (depth === 0) text(last, at);
+      if (whole) { if (depth === 0) { kids.push(m[0]); last = end; } continue; }
+      if (m[2]) { if (--depth < 0) return null; if (depth === 0) { kids.push(body.slice(start, end)); last = end; } }
+      else { if (depth === 0) start = at; depth++; }
+    }
+    if (depth) return null;
+    text(last, body.length);
+    return { open: open[0].trim(), kids, close: close[0].trim() };
+  }
+  /* A child's key: its id, else its tag and class with how many such came before it (a slide's notes, its style). */
+  function keyer() {
+    const seen = new Map();
+    return h => {
+      const id = h.match(/^<[a-zA-Z][\w-]*\b(?:[^>"']|"[^"]*"|'[^']*')*?\sid="([^"]+)"/);
+      if (id) return 'id:' + id[1];
+      const tag = (h.match(/^<([a-zA-Z][\w-]*)\b(?:[^>"']|"[^"]*"|'[^']*')*?(?:\sclass="([^"]*)")?/) || []);
+      const k = tag[1] ? tag[1].toLowerCase() + '.' + (tag[2] || '') : '#text', n = seen.get(k) || 0;
+      seen.set(k, n + 1); return k + '#' + n;
+    };
+  }
+  const keyed = list => { const k = keyer(); return list.map(h => [k(h), h]); };
+
+  /* One slide both sides changed, box by box. Its own attributes (background, transition…) come from whichever side
+     changed them, mine if both. A box without an id that was left as it was keeps its place by its content; when most
+     of a side's boxes can't be matched (the slide was written anew), the slide is mine whole, as before. */
+  function mergeBoxes(b, m, t, note = {}) {   // note.lost: something of theirs gave way to mine (a box, the slide's attributes, the slide)
+    note.lost = true;
+    const B = b === undefined ? null : parts(b), M = parts(m), T = parts(t);
+    if (!B || !M || !T || /<section\b/i.test(B.kids.join('') + M.kids.join('') + T.kids.join(''))) return m;
+    const bk = keyed(B.kids), base = new Map(bk);
+    const match = side => {   // a side's children keyed as in base; id-less ones the editor numbered anew are found by content
+      const out = keyed(side.kids), free = bk.filter(([k]) => !out.some(([o]) => o === k));
+      let unmatched = 0;
+      const res = out.map(([k, h]) => {
+        if (base.has(k)) return [k, h];
+        const i = free.findIndex(([, bh]) => normHTML(bh) === normHTML(h));
+        if (i >= 0) { const [fk] = free.splice(i, 1); return [fk, h]; }
+        unmatched++; return [k, h];
+      });
+      return { res, stale: bk.length > 1 && bk.filter(([k]) => !res.some(([o]) => o === k)).length > bk.length / 2 && unmatched > 0 };
+    };
+    const mm = match(M), tt = match(T);
+    if (mm.stale || tt.stale) return m;
+    const { list, clash } = mergeLists(bk, mm.res, tt.res, x => x[0], undefined, x => x[1]), kids = list.map(x => x[1]);
+    const open = same(M.open, B.open) ? T.open : M.open;
+    note.lost = clash.length > 0 || (!same(M.open, B.open) && !same(T.open, B.open) && !same(M.open, T.open));
+    return `${open}\n${kids.map(k => '  ' + k).join('\n')}\n${M.close}`;
+  }
+
+  /* The editor's slides (each one <section>, as storage.js sectionHTML writes them), three ways: { html, both, bothIds },
+     both being the slides (1-based, in the result) where something both sides changed kept mine, so theirs of it is
+     only in the version history (said plainly to whoever kept theirs out: storage.js mergeNote). */
+  function mergeSlides(base, mine, theirs) {
+    const lost = new Set();
+    const { list, order } = mergeLists(base, mine, theirs, sidOf, (b, m, t) => { const n = {}, h = mergeBoxes(b, m, t, n); if (n.lost) lost.add(sidOf(m)); return h; });
+    const ids = [...lost].filter(id => order.includes(id));
+    return { html: list, both: ids.map(id => order.indexOf(id) + 1), bothIds: ids };
+  }
+
+  /* A deck file's slides: what comes before the first one, each top-level <section> (a stack, of sections, is one), and
+     what comes after. null when they don't pair up. */
+  function splitDeck(html) {
+    const re = /<!--[\s\S]*?-->|<(script|style|textarea|title|xmp|noscript|template)\b[\s\S]*?<\/\1\s*>|<section\b(?:[^>"']|"[^"]*"|'[^']*')*>|<\/section\s*>/gi;
+    const slides = []; let depth = 0, start = -1, first = -1, end = -1;
+    for (const m of html.matchAll(re)) {
+      if (m[1] || m[0].startsWith('<!--')) continue;
+      if (m[0][1] === '/') { if (--depth < 0) return null; if (!depth) { slides.push(html.slice(start, m.index + m[0].length)); end = m.index + m[0].length; } }
+      else { if (!depth) { start = m.index; if (first < 0) first = start; } depth++; }
+    }
+    if (depth || first < 0) return null;
+    return { head: html.slice(0, first), slides, tail: html.slice(end) };
+  }
+  /* Each version's top-level slides keyed: by data-sid (a stack by the first one inside it). A slide without one (an
+     agent's, not yet opened in an editor) by its exact content: it takes the id of the one slide elsewhere with that
+     same content (an editor has since given it an id), but only when that is unambiguous: one id goes with that
+     content in all the versions and it is the only one without an id in its own. Otherwise (two identical slides, a
+     candidate beside its hidden original) each keeps a key of its content and how many came before it, so nothing is
+     paired with the wrong partner; at worst both are kept. Near-identical slides (Morph steps) never match: the
+     content must be the same. A slide without an id that a side changed is that side removing it and adding another,
+     which is what a three-way merge of it should do. */
+  const hashStr = t => { let h = 2166136261; for (let i = 0; i < t.length; i++) h = Math.imul(h ^ t.charCodeAt(i), 16777619); return (h >>> 0).toString(36); };
+  const print = h => normHTML(h).replace(/\sdata-sid="[^"]*"/g, '').replace(/>\s+</g, '><').replace(/\s+/g, ' ').trim();
+  const innerSid = h => (h.match(/<section\b[^>]*\sdata-sid="([^"]+)"/) || [])[1];
+  const ownKey = h => sidOf(h) || (innerSid(h) ? 'stack:' + innerSid(h) : '');
+  function slideKeys(lists) {
+    const owners = new Map(), loose = lists.map(() => new Map());   // print → the ids with it; print → how many without one, per version
+    lists.forEach((l, i) => l.forEach(h => { const k = ownKey(h), f = print(h);
+      if (k) owners.set(f, new Set([...(owners.get(f) || []), k])); else loose[i].set(f, (loose[i].get(f) || 0) + 1); }));
+    const sure = f => owners.get(f)?.size === 1 && loose.every(m => (m.get(f) || 0) <= 1) ? [...owners.get(f)][0] : '';
+    return lists.map(l => { const seen = new Map(); return l.map(h => {
+      const k = ownKey(h); if (k) return [k, h];
+      const f = print(h), id = sure(f); if (id) return [id, h];
+      const n = seen.get(f) || 0; seen.set(f, n + 1); return ['c:' + hashStr(f) + ':' + n, h];
+    }); });
+  }
+  const third = (b, m, t) => same(m, b) ? t : m;
+  /* Whole deck files, three ways: { html, both } (both as in mergeSlides), or null when one can't be read as slides. */
+  function mergeDecks(base, mine, theirs) {
+    const [B, M, T] = [base, mine, theirs].map(splitDeck);
+    if (!M || !T || (base && !B)) return null;
+    const [kb, km, kt] = slideKeys([B ? B.slides : [], M.slides, T.slides]);
+    const lost = new Set();
+    const { list, order } = mergeLists(kb, km, kt, x => x[0], (b, m, t) => { const n = { lost: true }, h = sidOf(m[1]) ? mergeBoxes(b?.[1], m[1], t[1], n) : m[1]; if (n.lost) lost.add(m[0]); return [m[0], h]; }, x => x[1]);
+    const ids = [...lost].filter(id => order.includes(id));
+    return {
+      html: third(B?.head, M.head, T.head) + list.map(x => x[1]).join('\n\n') + third(B?.tail, M.tail, T.tail),
+      both: ids.map(id => order.indexOf(id) + 1), bothIds: ids,
+    };
+  }
+
+  /** @type {any} */ (globalThis).glideMerge = { mergeSlides, mergeDecks, mergeBoxes, splitDeck, sidOf, normHTML };
+})();

glideshow/editor/lib/move-local.js

@@ -0,0 +1,51 @@
+/* After signing in: the decks made in this browser without an account (local/sw.js), offered for moving into the
+   account's library. The browser's library is read here with the same code that keeps it (library.js over
+   store-browser.js); each deck goes over with its pictures (onefile.js bringIn) and leaves the browser once all of it is in. */
+
+import { LibraryCore, baseOf, dirOf } from './library.js';
+import { BrowserStore } from './store-browser.js';
+import { storage } from './browser-db.js';
+import { bringIn } from './onefile.js';
+
+const LATER = 'glideshow-move-later';
+
+async function browserLibrary() {
+  if (indexedDB.databases && !(await indexedDB.databases()).some(d => d.name === 'glideshow')) return null;   // never used without an account
+  const lib = new LibraryCore({ storage, blockConcurrencyWhile: fn => fn() }, {}, { store: l => new BrowserStore(l), share: {} });
+  await lib.loaded;
+  if (lib.cfg.kind !== 'browser') return null;
+  await lib.refresh(true);
+  return lib;
+}
+const call = (lib, path, body) => lib.fetch(new Request('https://browser' + path, { method: 'POST', body: JSON.stringify(body) })).then(r => r.json());
+
+/** @param {HTMLElement} where  the home screen's place for it */
+export async function offer(where) {
+  let later = 0; try { later = +(localStorage.getItem(LATER) || 0); } catch {}
+  if (Date.now() - later < 7 * 86400_000) return;   // "Not now" holds for a week
+  const lib = await browserLibrary(); if (!lib) return;
+  const v = lib.view(), decks = lib.walk(v).decks; if (!decks.length) return;
+  const bar = document.createElement('div'); bar.className = 'hm-move';
+  const say = document.createElement('span'), move = document.createElement('button'), not = document.createElement('button');
+  say.textContent = `${decks.length} ${decks.length === 1 ? 'deck' : 'decks'} you made in this browser without an account can move into your library.`;
+  move.textContent = 'Move them here'; move.className = 'hm-move-go primary'; not.textContent = 'Not now'; not.className = 'hm-move-not';
+  not.onclick = () => { try { localStorage.setItem(LATER, String(Date.now())); } catch {} bar.remove(); };
+  move.onclick = async () => {
+    move.disabled = not.disabled = true; let moved = 0; const failed = [];
+    for (const d of decks) {
+      say.textContent = `Moving ${moved + 1} of ${decks.length}…`;
+      const /** @type {Record<string, Uint8Array>} */ files = {}; let html = '';
+      for (const p of Object.keys(v)) if (p.startsWith(d + '/')) {
+        const rel = p.slice(d.length + 1), bytes = await lib.read(v[p]);
+        if (rel === 'deck.html') html = new TextDecoder().decode(bytes); else if (rel !== 'AGENTS.md') files[rel] = bytes;
+      }
+      const j = await bringIn({ name: baseOf(d), folder: dirOf(d), html, files });
+      if (j.error) { failed.push(`${baseOf(d)} (${j.error})`); continue; }
+      await call(lib, '/api/deckop', { path: d, op: 'delete' });   // in the library now: out of the browser
+      moved++;
+    }
+    if (!failed.length) return location.reload();
+    say.textContent = `Moved ${moved}. Still in this browser: ${failed.join(', ')}.`; move.disabled = not.disabled = false;
+  };
+  bar.append(say, move, not); where.prepend(bar);
+}

glideshow/editor/lib/onefile.js

@@ -0,0 +1,108 @@
+/* A deck as one .html file, and back (File → Download → Glideshow deck, File → Open a deck file…). Packing puts the
+   deck's pictures, fonts and videos in the file as data: addresses and reveal.js itself in <style> / <script>, so it
+   opens and presents in any browser, offline. Unpacking undoes both: data: addresses become files under assets/ (named by
+   content, as the editor names what it stores) and reveal.js goes back to its address.
+
+   A file can come from anyone, and slides run in the editor on glideshow.org with the reader's session, so unpacking also
+   takes out what could run there (`safe`): every script but reveal.js and the deck's own two (put back as the editor's
+   own copies), event-handler attributes, javascript: and data:text/html addresses, srcdoc, forms, objects and <base>. */
+
+const REVEAL = /https:\/\/cdn\.jsdelivr\.net\/npm\/reveal\.js@[^"']+/;
+const TYPES = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', svg: 'image/svg+xml', webp: 'image/webp', avif: 'image/avif',
+  mp4: 'video/mp4', webm: 'video/webm', mov: 'video/quicktime', mp3: 'audio/mpeg', wav: 'audio/wav', pdf: 'application/pdf',
+  woff2: 'font/woff2', woff: 'font/woff', ttf: 'font/ttf', otf: 'font/otf' };
+const EXT = Object.fromEntries(Object.entries(TYPES).map(([e, t]) => [t, e === 'jpeg' ? 'jpg' : e]));
+
+/* Bring a deck into the library the editor talks to: deck.html first, then each other file raw. Returns its path, or
+   {error}. `files` maps paths in the deck (assets/…) to their bytes. */
+/** @param {{ name: string, folder: string, html: string, files: Record<string, Uint8Array> }} deck */
+export async function bringIn({ name, folder, html, files }) {
+  const post = (url, body) => fetch(url, { method: 'POST', headers: { 'X-Glideshow': '1' }, body }).then(r => r.json()).catch(() => ({ error: 'network' }));
+  const made = await post('/api/importdeck', JSON.stringify({ name, folder, html }));
+  if (made.error) return made;
+  const queue = Object.entries(files); let failed = '';
+  const send = async () => {   // four at a time
+    while (queue.length && !failed) {
+      const [p, bytes] = /** @type {[string, Uint8Array]} */ (queue.shift());
+      const r = await post(`/api/importfile?deck=${encodeURIComponent(made.path)}&file=${encodeURIComponent(p)}`, bytes);
+      if (r.error) failed ||= `${p}: ${r.error}`;
+    }
+  };
+  await Promise.all(Array.from({ length: Math.min(4, queue.length) }, send));
+  if (failed) { await post('/api/deckop', JSON.stringify({ path: made.path, op: 'delete' })); return { error: failed }; }   // all or nothing
+  return { path: made.path };
+}
+/** @param {number} c */
+const isB64 = c => (c >= 65 && c <= 90) || (c >= 97 && c <= 122) || (c >= 47 && c <= 57) || c === 43 || c === 61;   // A-Z a-z / 0-9 + =
+/** @param {Uint8Array} b */
+export function toB64(b) { let s = ''; for (let i = 0; i < b.length; i += 0x8000) s += String.fromCharCode(...b.subarray(i, i + 0x8000)); return btoa(s); }
+/** @param {string} s */
+export const fromB64 = s => Uint8Array.from(atob(s), c => c.charCodeAt(0));
+
+/** @param {string} html @param {(path: string) => Promise<Uint8Array | null>} read  a deck file by its path in the deck */
+export async function pack(html, read) {
+  const refs = [...new Set([...html.matchAll(/(?<=["'(])assets\/[^"')\s]+/g)].map(m => m[0]))], inline = {};
+  for (const p of refs) {
+    const b = await read(p).catch(() => null);
+    if (b) inline[p] = `data:${TYPES[p.split('.').pop().toLowerCase()] || 'application/octet-stream'};base64,${toB64(b)}`;
+  }
+  html = html.replace(/(?<=["'(])assets\/[^"')\s]+/g, p => inline[p] || p);
+  const text = async u => { try { const r = await fetch(u); return r.ok ? r.text() : null; } catch { return null; } };   // offline as it can be
+  for (const m of [...html.matchAll(/<link rel="stylesheet" href="([^"]+)">/g)].filter(m => REVEAL.test(m[1]))) {
+    const css = await text(m[1]); if (css) html = html.replace(m[0], () => `<style data-glideshow-src="${m[1]}">${css}</style>`);
+  }
+  for (const m of [...html.matchAll(/<script src="([^"]+)"><\/script>/g)].filter(m => REVEAL.test(m[1]))) {
+    const js = await text(m[1]); if (js) html = html.replace(m[0], () => `<script data-glideshow-src="${m[1]}">${js.replace(/<\/script/gi, '<\\/script')}</script>`);
+  }
+  return html;
+}
+
+/** @param {string} html @returns {Promise<{html: string, files: Record<string, Uint8Array>}>} */
+export async function unpack(html) {
+  html = await safe(html.replace(/<style data-glideshow-src="([^"]+)">[\s\S]*?<\/style>/g, (_, u) => `<link rel="stylesheet" href="${u}">`)
+             .replace(/<script data-glideshow-src="([^"]+)">[\s\S]*?<\/script>/g, (_, u) => `<script src="${u}"></script>`));
+  // data: addresses out into files. A scan, not a regular expression: a pattern over one picture's megabytes of base64
+  // overflows the browser's regex engine (about 5 MB and up).
+  const /** @type {Record<string, Uint8Array>} */ files = {}, /** @type {Record<string, string>} */ named = {};
+  let out = '', at = 0, i = html.indexOf('data:');
+  while (i >= 0) {
+    const mark = html.indexOf(';base64,', i), type = mark > 0 && mark - i < 200 ? html.slice(i + 5, mark) : '';   // a stray "data:" in text: not one
+    if (!/^[\w.+-]+\/[\w.+-]+$/.test(type)) { i = html.indexOf('data:', i + 5); continue; }
+    let j = mark + 8; while (j < html.length && isB64(html.charCodeAt(j))) j++;
+    if (j - mark - 8 >= 2000) {   // small ones (icons in the deck's own CSS) stay inline
+      const uri = html.slice(i, j);
+      if (!named[uri]) {
+        const bytes = fromB64(html.slice(mark + 8, j));
+        const hash = [...new Uint8Array(await crypto.subtle.digest('SHA-1', bytes))].map(b => b.toString(16).padStart(2, '0')).join('').slice(0, 12);
+        named[uri] = `assets/${hash}.${EXT[type] || 'bin'}`; files[named[uri]] = bytes;
+      }
+      out += html.slice(at, i) + named[uri]; at = j;
+    }
+    i = html.indexOf('data:', j);
+  }
+  html = out + html.slice(at);
+  return { html, files };
+}
+
+/* A deck from elsewhere, with nothing left in it that could run as the person opening it. */
+const URLISH = new Set(['href', 'src', 'xlink:href', 'action', 'data', 'poster', 'background', 'from', 'to', 'values', 'dynsrc', 'lowsrc']);
+const GOES = new Set(['href', 'xlink:href', 'action', 'data']);   // opened as a page (an SVG there runs its scripts), not shown as a picture
+/** @param {string} html */
+export async function safe(html) {
+  const d = new DOMParser().parseFromString(html, 'text/html');
+  const own = async f => { try { const r = await fetch('/editor/deck/' + f); return r.ok ? (await r.text()).trim() : ''; } catch { return ''; } };
+  for (const el of [...d.querySelectorAll('script')]) {
+    if (el.id === 'deck-shapes' || el.id === 'deck-present') {   // the deck's own: the editor's copies, nothing else
+      const fresh = d.createElement('script'); fresh.id = el.id; fresh.textContent = '\n' + await own(el.id === 'deck-shapes' ? 'shapes.js' : 'present.js') + '\n'; el.replaceWith(fresh);
+    } else if (!(REVEAL.test(el.getAttribute('src') || '') && /^https:\/\/cdn\.jsdelivr\.net\/npm\/reveal\.js@[\w.]+\/dist\/reveal\.js$/.test(el.getAttribute('src') || '') && !el.textContent.trim())) el.remove();
+  }
+  d.querySelectorAll('object, embed, applet, form, base, frame, frameset, portal, meta[http-equiv], link[rel="import"]').forEach(e => e.remove());
+  d.querySelectorAll('iframe').forEach(f => { if (!/^https?:\/\//i.test((f.getAttribute('src') || '').trim())) f.remove(); });
+  d.querySelectorAll('animate, set, animateMotion, animateTransform').forEach(e => { if (/href/i.test(e.getAttribute('attributeName') || '')) e.remove(); });
+  for (const el of d.querySelectorAll('*')) for (const a of [...el.attributes]) {
+    const n = a.name.toLowerCase(), v = a.value.replace(/[\s\u0000-\u001f]+/g, '').toLowerCase();
+    if (n.startsWith('on') || n === 'srcdoc' || n === 'formaction' || (URLISH.has(n) && /^(javascript|vbscript|data:text\/html|data:application\/xhtml)/.test(v))
+        || (GOES.has(n) && /^data:image\/svg/.test(v))) el.removeAttribute(a.name);
+  }
+  return '<!doctype html>\n' + d.documentElement.outerHTML + '\n';
+}

glideshow/editor/lib/store-browser.js

@@ -0,0 +1,75 @@
+/* A library kept in this browser: the store behind local/sw.js, with the interface of cloud/store-github.js and
+   cloud/store-drive.js. Each commit is a whole tree of paths -> file ids, kept in IndexedDB with the files themselves
+   (browser-db.js), so version history and restore work as they do online. Nothing leaves the browser: shared links need
+   a library in Drive or GitHub. */
+
+import { get, put, del, keys } from './browser-db.js';
+import { dec } from './library.js';
+
+const id = () => crypto.randomUUID().replace(/-/g, '').slice(0, 16);
+const KEEP = 100, EVERY = 25;   // versions kept; how often (in commits) the older ones and their files are cleared out
+export const SIGN_IN_TO_SHARE = 'Sign in to share decks: shared decks live in your Google Drive or GitHub.';
+
+export class BrowserStore {
+  /** @param {any} lib */
+  constructor(lib) { this.lib = lib; }
+
+  /* The newest commit's tree (made empty the first time), or null when it is the one the library already has. */
+  async head(prev) {
+    let at = await get('commits', 'head');
+    if (!at) { at = 'root'; await put('commits', [['root', { id: 'root', parent: null, time: Date.now(), message: 'library: start', tree: {} }], ['head', 'root']]); }
+    if (prev?.id === at) return null;
+    const c = await get('commits', at);
+    return { id: at, sig: at, tree: c.tree };
+  }
+  async read(e) {
+    const b = await get('blobs', e.bv || e.v || e.ref);
+    if (!b) throw new Error('A file of this library is missing from the browser.');
+    return new Uint8Array(b);
+  }
+  async write(base, changes, message) {
+    const tree = { ...base.tree }, now = Date.now(), /** @type {[string, Uint8Array][]} */ blobs = [];
+    for (const c of changes) {
+      if (c.del) { delete tree[c.path]; continue; }
+      if (c.ref) { tree[c.path] = { ref: c.ref, v: c.bv || c.ref, t: now }; continue; }
+      const f = id(); blobs.push([f, c.bytes]); tree[c.path] = { ref: f, v: f, t: now };
+    }
+    const at = id(), n = ((await get('commits', base.id))?.n || 0) + 1;
+    if (blobs.length) await put('blobs', blobs);
+    await put('commits', [[at, { id: at, parent: base.id, n, time: now, message, tree }], ['head', at]]);
+    if (n % EVERY === 0) await this.prune(at).catch(e => console.warn('glideshow: clearing old versions', e));
+    const versions = {}; for (const c of changes) if (!c.del && tree[c.path]) versions[c.path] = tree[c.path].v;
+    return { base: { id: at, sig: at, tree }, versions };
+  }
+
+  /* The newest KEEP versions stay; older ones go, and every file none of the kept ones uses. */
+  async prune(head) {
+    const kept = [];
+    for (let c = await get('commits', head); c && kept.length < KEEP; c = c.parent && await get('commits', c.parent)) kept.push(c);
+    const keep = new Set(kept.map(c => c.id)), used = new Set(kept.flatMap(c => Object.values(c.tree).map(e => e.v)));
+    await del('commits', (await keys('commits')).filter(k => k !== 'head' && !keep.has(k)));
+    await del('blobs', (await keys('blobs')).filter(k => !used.has(k)));
+  }
+  async lastChange(path) { return (this.lib.base.tree[path]?.t || 0) / 1000; }
+  /* The commits that changed a file, newest first. */
+  async history(path, n = 100) {
+    const out = [];
+    for (let at = await get('commits', 'head'), c = at && await get('commits', at); c && out.length < n; c = c.parent && await get('commits', c.parent)) {
+      const before = c.parent ? (await get('commits', c.parent))?.tree[path]?.v : undefined;
+      if (c.tree[path] && c.tree[path].v !== before) out.push({ rev: c.id, time: c.time / 1000, author: 'You', message: c.message, name: '', url: '' });
+    }
+    return out;
+  }
+  async readAt(rev, path) {
+    const e = (await get('commits', rev))?.tree[path];
+    return e ? dec(await this.read(e)) : '';
+  }
+  async filesAt(rev) {
+    const c = await get('commits', rev);
+    return c ? Object.fromEntries(Object.entries(c.tree).map(([p, e]) => [p, { ref: e.ref, v: e.v }])) : null;
+  }
+
+  async pin() { throw new Error(SIGN_IN_TO_SHARE); }
+  async pinned() { return {}; }
+  async unpin() {}
+}

glideshow/editor/lib/store-folder.js

@@ -0,0 +1,109 @@
+/* A library kept in a folder on this computer (glideshow.org's "Use a folder on this computer", Chrome and Edge): the
+   browser library (store-browser.js) whose files are also the files of a folder the person picked, so the decks are real
+   folders they can see, back up, put in Dropbox or hand to an agent. Version history stays in the browser, as it does for
+   a library kept only there.
+
+   Both ways: every save is written into the folder, and on each look at the library (`head`, at most every few seconds)
+   files changed, added or removed in the folder from outside (an agent, a text editor) come in as one version,
+   "outside the editor". What was last written or read is remembered per file (its version and the file's modified
+   time), so a file that changed on neither side is left alone. Paths starting with a dot (drafts, the library's own
+   state) stay in the browser only. If the browser has dropped its permission for the folder (a new session), the
+   library keeps working in the browser and `needsPermission` says so; once the page has asked again, the next look
+   writes out what the folder missed. */
+
+import { get, put } from './browser-db.js';
+import { BrowserStore } from './store-browser.js';
+import { dec } from './library.js';
+
+const HANDLE = 'folder:handle', MAP = 'folder:map', EVERY = 3000;
+/** The folder this browser keeps its library in, or null. @returns {Promise<any>} */
+export const getFolder = () => get('kv', HANDLE).catch(() => null);
+/** @param {any} h */
+export const setFolder = h => put('kv', [[HANDLE, h]]);
+/** @param {any} dir @param {boolean} [ask] whether to ask (a page, with the person's click); a worker can only look */
+export async function folderAllowed(dir, ask = false) {
+  const o = { mode: 'readwrite' };
+  if (await dir.queryPermission(o) === 'granted') return true;
+  return ask ? await dir.requestPermission(o) === 'granted' : false;
+}
+const hidden = (/** @type {string} */ p) => p.split('/').some(s => s.startsWith('.'));
+
+export class FolderStore extends BrowserStore {
+  /** @param {any} lib @param {any} dir a FileSystemDirectoryHandle */
+  constructor(lib, dir) { super(lib); this.dir = dir; this.last = 0; this.needsPermission = false; /** @type {Promise<any>} */ this.queue = Promise.resolve(); }
+  /* Saves and folder syncs take turns, so neither moves the library's newest version from under the other. */
+  /** @template T @param {() => Promise<T>} fn @returns {Promise<T>} */
+  turn(fn) { const p = this.queue.then(fn); this.queue = p.then(() => {}, () => {}); return p; }
+
+  /** @param {any} prev @param {boolean} [force] */
+  async head(prev, force) {
+    if (force || Date.now() - this.last > EVERY) await this.turn(() => this.sync()).finally(() => { this.last = Date.now(); });
+    return super.head(prev);
+  }
+  /** @param {any} base @param {any[]} changes @param {string} message */
+  write(base, changes, message) { return this.turn(() => this.save(base, changes, message)); }
+  /** @param {any} base @param {any[]} changes @param {string} message */
+  async save(base, changes, message) {
+    const now = await super.head(null);
+    if (now && now.id !== base.id) base = now;   // a change from the folder came in since the library last looked: build on it, not over it
+    const out = await super.write(base, changes, message);
+    if (await this.allowed()) {
+      const map = await this.map();
+      for (const c of changes) if (!hidden(c.path)) await this.out(c.path, out.base.tree[c.path], map).catch(e => console.warn('glideshow: writing to the folder', c.path, e));
+      await put('kv', [[MAP, map]]);
+    }
+    return out;
+  }
+
+  async allowed() { this.needsPermission = !(await folderAllowed(this.dir).catch(() => false)); return !this.needsPermission; }
+  /** @returns {Promise<Record<string, { v: string, m: number }>>} */
+  async map() { return (await get('kv', MAP)) || {}; }
+
+  /* Every file of the folder, by path (dot files and folders left out). */
+  async files(dir = this.dir, at = '', /** @type {Map<string, any>} */ out = new Map()) {
+    for await (const [name, h] of dir.entries()) {
+      if (name.startsWith('.')) continue;
+      if (h.kind === 'directory') await this.files(h, at + name + '/', out); else out.set(at + name, h);
+    }
+    return out;
+  }
+  /** @param {string} path @param {boolean} [make] */
+  async parent(path, make = false) {
+    let d = this.dir; const parts = path.split('/'); parts.pop();
+    for (const p of parts) d = await d.getDirectoryHandle(p, { create: make });
+    return d;
+  }
+  /* The library's version of `path` into the folder (or its removal), remembered in `map`. */
+  async out(path, e, map) {
+    const name = path.split('/').pop();
+    if (!e) { await (await this.parent(path)).removeEntry(name).catch(() => {}); delete map[path]; return; }
+    const fh = await (await this.parent(path, true)).getFileHandle(name, { create: true }), w = await fh.createWritable();
+    await w.write(await this.read(e)); await w.close();
+    map[path] = { v: e.v, m: (await fh.getFile()).lastModified };
+  }
+
+  /* Folder and library made the same: outside changes come in as one version, then what the folder lacks goes out. */
+  async sync() {
+    if (!(await this.allowed())) return;
+    const head = await super.head(null), tree = head?.tree || {}, map = await this.map(), files = await this.files();
+    /** @type {any[]} */ const changes = [], came = new Set();
+    for (const [path, fh] of files) {
+      const f = await fh.getFile(), known = map[path];
+      if (known && known.m === f.lastModified && tree[path]?.v === known.v) continue;   // unchanged on both sides
+      if (known && known.m === f.lastModified) continue;   // only the library changed it: goes out below
+      const bytes = new Uint8Array(await f.arrayBuffer());
+      if (tree[path] && dec(await this.read(tree[path]).catch(() => new Uint8Array())) === dec(bytes)) { map[path] = { v: tree[path].v, m: f.lastModified }; continue; }
+      changes.push({ path, bytes }); came.add(path); map[path] = { v: '', m: f.lastModified };
+    }
+    for (const path of Object.keys(map)) if (!files.has(path) && tree[path]) { changes.push({ path, del: true }); came.add(path); delete map[path]; }   // removed outside
+    let now = head;
+    if (changes.length) {
+      const names = [...new Set([...came].map(p => p.split('/').slice(0, -1).join('/') || p))].slice(0, 3).join(', ');
+      now = (await super.write(head, changes, `outside the editor: ${names}`)).base;
+      for (const p of came) if (map[p]) map[p].v = now.tree[p]?.v || '';
+    }
+    for (const [path, e] of Object.entries(now?.tree || {}))   // what the folder lacks or has older: written out
+      if (!hidden(path) && !came.has(path) && map[path]?.v !== e.v) await this.out(path, e, map).catch(err => console.warn('glideshow: writing to the folder', path, err));
+    await put('kv', [[MAP, map]]);
+  }
+}

glideshow/editor/local/sw.js

@@ -0,0 +1,66 @@
+/* Glideshow without an account: the editor at glideshow.org with its library kept in this browser. glideshow.org/start
+   installs this service worker (scope /, which the Worker allows it); from then on it answers the editor's own requests here, as the local server
+   (glideshow/server.py) and a signed-in library (cloud/library.js) do: the pages, /api/…, the open deck's files under
+   /deck/ and the home screen's thumbnails under /library/. The library is lib/library.js itself, over IndexedDB
+   (lib/store-browser.js). Everything else (sign-in, shared links, the editor's own files) goes to glideshow.org as
+   usual. Signing in (/login) unregisters it; the decks stay in the browser for the next visit to /start. */
+
+import { LibraryCore, json } from '../lib/library.js';
+import { BrowserStore, SIGN_IN_TO_SHARE } from '../lib/store-browser.js';
+import { FolderStore, getFolder } from '../lib/store-folder.js';
+import { storage } from '../lib/browser-db.js';
+
+const sw = /** @type {any} */ (self);
+const PASS = /^\/(p|share|editor|auth)\/|^\/(login|logout|setup|admin|report|privacy|terms|start|robots\.txt|favicon\.svg|favicon\.ico|apple-touch-icon\.png)$/;
+const PAGES = { '/': '/editor/home.html', '/home': '/editor/home.html', '/edit': '/editor/index.html', '/index.html': '/editor/index.html' };
+
+class BrowserLibrary extends LibraryCore {
+  /* The deck this browser has open: kept in the library's storage (a service worker's responses can't set cookies). */
+  current(req) { const v = this.view(); return this.cur && v[this.cur + '/deck.html'] ? this.cur : super.current(req); }
+  open(deck, res) { this.cur = deck; this.ctx.storage.put('cur', deck); return super.open(deck, res); }
+  schedule() { clearTimeout(this.timer); this.timer = setTimeout(() => this.flush().catch(e => console.error('glideshow: commit', e)), 1500); }   // commits are local and cheap
+}
+let folder = null;   // the folder picked on glideshow.org ("Use a folder on this computer"), when there is one
+const deps = {
+  store: lib => folder ? new FolderStore(lib, folder) : new BrowserStore(lib),
+  share: {
+    publishAPI: (lib, method) => json(method === 'GET' ? { url: '', access: 'link', people: [], expires: '', inLibrary: false, online: true, error: SIGN_IN_TO_SHARE } : { error: SIGN_IN_TO_SHARE }),
+    commentsAPI: () => json({ comments: [] }),
+    shareRoutes: () => json({ error: 'not found' }, 404),
+  },
+};
+const env = { ASSETS: { fetch: req => fetch('/editor' + new URL(req.url).pathname) } };   // the deck template, as the Worker's static files
+
+const init = async () => {
+  folder = await getFolder();
+  const lib = new BrowserLibrary({ storage, blockConcurrencyWhile: fn => fn() }, env, deps);
+  await lib.loaded;
+  if (lib.cfg.kind !== 'browser') { lib.cfg = { kind: 'browser', user: { n: 'You' } }; await storage.put('cfg', lib.cfg); }
+  lib.cur = await storage.get('cur');
+  if (Object.keys(lib.pending).some(p => !p.startsWith('.drafts/'))) lib.schedule();   // saved but not committed when the browser last stopped this worker
+  return lib;
+};
+let ready = init();
+/* A page picked a folder, or gave its permission back: the library starts again over it. */
+sw.addEventListener('message', e => { if (e.data?.type === 'library-changed') { ready = init(); e.waitUntil?.(ready); } });
+let queue = Promise.resolve();   // one request at a time, as a Durable Object takes them
+const answer = req => { const p = queue.then(async () => (await ready).fetch(req)); queue = p.catch(() => {}); return p; };
+
+/* The editor's pages, told they are online in this browser (the editor hides what only the Mac or an account can do). */
+async function page(file) {
+  const html = await (await fetch(file, { cache: 'no-cache' })).text();
+  const lib = await ready.catch(() => null), store = /** @type {any} */ (lib)?.store;
+  const info = { local: true, user: '', name: '', repo: folder ? folder.name : 'This browser',
+    folder: folder ? { name: folder.name, ok: store instanceof FolderStore ? await store.allowed() : false } : null };
+  return new Response(html.replace('<head>', `<head>\n<script>window.GLIDESHOW_CLOUD = ${JSON.stringify(info)}</script>`), { headers: { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' } });
+}
+
+sw.addEventListener('install', () => sw.skipWaiting());
+sw.addEventListener('activate', e => e.waitUntil(sw.clients.claim()));
+sw.addEventListener('fetch', e => {
+  const url = new URL(e.request.url);
+  if (url.origin !== location.origin || PASS.test(url.pathname)) return;   // glideshow.org's, as usual
+  if (PAGES[url.pathname] && e.request.mode === 'navigate') return e.respondWith(page(PAGES[url.pathname]));
+  if (url.pathname === '/api/fonts') return e.respondWith(fetch('/editor/data/fonts.json'));
+  if (/^\/(api|deck|library)\//.test(url.pathname)) return e.respondWith(answer(e.request).catch(err => json({ error: String(err?.message || err) }, 500)));
+});

glideshow/editor/local/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  // Type-checks browser mode's service worker and the library modules it imports: `npx -p typescript@5.6.3 tsc -p editor/local`.
+  "compilerOptions": { "allowJs": true, "checkJs": true, "noEmit": true, "target": "es2022", "module": "es2022", "moduleResolution": "bundler", "lib": ["es2023", "webworker"], "strict": false, "skipLibCheck": true },
+  "include": ["sw.js"]
+}

glideshow/editor/looks/glider.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
+<title>Glideshow</title>
+<g transform="rotate(-10 128 128)">
+<path d="M36 100 Q128 -4 220 100" fill="none" stroke="#fff" stroke-width="24" stroke-linecap="round"/>
+<g stroke="#fff" stroke-width="10" stroke-linecap="round"><path d="M44 94 L74 142"/><path d="M212 94 L182 142"/></g>
+<rect x="60" y="136" width="136" height="94" rx="28" fill="#fff"/>
+<g fill="#14204A"><circle cx="120" cy="176" r="10.5"/><circle cx="154" cy="176" r="10.5"/></g>
+</g>
+</svg>