glideshow 0.1.2__py3-none-any.whl

glideshow/editor/js/geometry.js

@@ -0,0 +1,153 @@
+/* ---------- geometry ---------- */
+
+function geo(b) {
+  const s = b.style;
+  return { x: parseFloat(s.left) || 0, y: parseFloat(s.top) || 0, w: parseFloat(s.width) || 0, h: parseFloat(s.height) || 0 };
+}
+function setGeo(b, g) {
+  if (isGroup(b)) {   // a group's children keep their place relative to it, scaled with it
+    const o = geo(b), sx = o.w ? g.w / o.w : 1, sy = o.h ? g.h / o.h : 1;
+    if (sx !== 1 || sy !== 1) kids(b).forEach(c => { const q = geo(c); setGeo(c, { x: q.x * sx, y: q.y * sy, w: q.w * sx, h: q.h * sy }); });
+  }
+  b.style.left = r1(g.x) + 'px'; b.style.top = r1(g.y) + 'px';
+  b.style.width = r1(g.w) + 'px'; b.style.height = r1(g.h) + 'px';
+  if (b.dataset.shape) renderShape(b);
+  if (b.dataset.autofit === 'shrink') fitText(b);
+}
+function place(el, g) { Object.assign(el.style, { left: g.x + 'px', top: g.y + 'px', width: g.w + 'px', height: g.h + 'px' }); }
+/* Rotation lives in the box's inline transform (rotate about the centre); 0 means no transform. */
+const rot = b => parseFloat((b.style.transform.match(/rotate\((-?[\d.]+)deg\)/) || [])[1]) || 0;
+/* The resize cursor for a handle, turned with the box as in Slides (rotation, then any flip). */
+function resizeCursor(b, dir) {
+  const [fx, fy] = flipXY(b);
+  let a = { n: 0, ne: 45, e: 90, se: 135, s: 180, sw: 225, w: 270, nw: 315 }[dir] + rot(b);
+  if (fx < 0) a = -a;
+  if (fy < 0) a = 180 - a;
+  return ['ns', 'nesw', 'ew', 'nwse'][Math.round((((a % 180) + 180) % 180) / 45) % 4] + '-resize';
+}
+
+/* Mirroring from data-flip: -1 on a flipped axis (the CSS `scale` applied after the box's rotate). */
+const flipXY = b => [(b.dataset.flip || '').includes('h') ? -1 : 1, (b.dataset.flip || '').includes('v') ? -1 : 1];
+
+/* Axis-aligned bounds of a box as drawn, i.e. after rotation (used for snapping and marquee). */
+function aabb(b) {
+  const g = geo(b), t = rot(b) * Math.PI / 180;
+  if (!t) return g;
+  const c = Math.abs(Math.cos(t)), s = Math.abs(Math.sin(t));
+  const w = g.w * c + g.h * s, h = g.w * s + g.h * c;
+  return { x: g.x + g.w / 2 - w / 2, y: g.y + g.h / 2 - h / 2, w, h };
+}
+function setRot(b, deg) {
+  deg = Math.round(((deg % 360) + 360) % 360 * 10) / 10;
+  b.style.transform = deg ? `rotate(${deg}deg)` : '';
+  shadeBox(b);
+  if (!b.getAttribute('style')?.trim()) b.removeAttribute('style');
+}
+function bbox(gs) {
+  const x = Math.min(...gs.map(g => g.x)), y = Math.min(...gs.map(g => g.y));
+  return { x, y, w: Math.max(...gs.map(g => g.x + g.w)) - x, h: Math.max(...gs.map(g => g.y + g.h)) - y };
+}
+function toCanvas(e) {
+  const r = frame.getBoundingClientRect();
+  return { x: (e.clientX - r.left) / scale, y: (e.clientY - r.top) / scale };
+}
+/* Zoom as in Slides: null = fit the window; otherwise a factor where 1 (100%) shows the slide 960px
+   wide, like a 10-inch Slides page. The stage scrolls when the slide is bigger than it. */
+let zoom = null;
+const ZOOMS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+function fit() {
+  const r = stage.getBoundingClientRect();
+  const pad = PHONE ? 30 : 64;   // the phone fits the slide 15 from the sides (03-edit.png)
+  scale = zoom ? zoom * 960 / W : Math.max(0.05, Math.min((r.width - pad) / W, (r.height - pad) / H));
+  frame.style.width = W * scale + 'px'; frame.style.height = H * scale + 'px';
+  canvas.style.transform = `scale(${scale})`;
+  stage.classList.toggle('zoomed', !!zoom);
+  $('#ed-zoom .zoom-label').textContent = zoom ? Math.round(zoom * 100) + '%' : 'Fit';
+  drawOverlay(); drawGuides(); drawRulers();
+}
+/* Rulers, as Slides: inches (1 in = 192 canvas px) with 1/8 in ticks and numbers at whole inches, 0 at the slide's
+   top-left, a baseline along the slide, the selection marked by three blue ticks, and a blue mark following the pointer. Dragging out of
+   the top ruler makes a horizontal guide, out of the left one a vertical guide. View → Show ruler hides them. */
+let rulerPtr = null, rulerQueued = false;
+const rulersShown = () => stored('slides-ruler-off') !== '1';
+function setRulersShown(on) { store('slides-ruler-off', on ? undefined : '1'); document.body.classList.toggle('ruler-off', !on); drawRulers(); }
+function queueRulers() { if (!rulerQueued) { rulerQueued = true; requestAnimationFrame(() => { rulerQueued = false; drawRulers(); }); } }
+function drawRulers() {
+  if (!rulersShown() || !slides.length) return;
+  const css = getComputedStyle(document.body), tok = k => css.getPropertyValue(k).trim();   // body: dark mode overrides the tokens there
+  const fr = frame.getBoundingClientRect(), dpr = devicePixelRatio || 1, step = 192 * scale / 8;
+  const span = sel.size && !themeStash ? bbox([...sel].map(aabb)) : null;
+  for (const horiz of [true, false]) {
+    const cv = $(horiz ? '#ed-ruler-h' : '#ed-ruler-v'), r = cv.getBoundingClientRect(), w = r.width, h = r.height;
+    if (cv.width !== Math.round(w * dpr) || cv.height !== Math.round(h * dpr)) { cv.width = Math.round(w * dpr); cv.height = Math.round(h * dpr); }
+    const g = cv.getContext('2d'); g.setTransform(dpr, 0, 0, dpr, 0, 0); g.clearRect(0, 0, w, h);
+    const o = horiz ? fr.left - r.left : fr.top - r.top, len = (horiz ? W : H) * scale, along = horiz ? w : h, across = horiz ? h : w;
+    g.strokeStyle = '#9aa0a6'; g.fillStyle = '#444'; g.font = `11px ${tok('--font')}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.lineWidth = 1;
+    g.beginPath();   // the 1 px baseline along the slide's side
+    if (horiz) { g.moveTo(o, across - 0.5); g.lineTo(o + len, across - 0.5); } else { g.moveTo(across - 0.5, o); g.lineTo(across - 0.5, o + len); }
+    const last = (horiz ? W : H) / 192 * 8;
+    for (let i = Math.floor(-o / step); i <= Math.ceil((along - o) / step); i++) {
+      const p = Math.round(o + i * step) + 0.5;
+      if (i % 8 === 0) {   // a whole inch: its number, as Slides (none at 0 or at the slide's far edge)
+        if (i > 0 && i < last) { g.save(); g.translate(horiz ? p : across / 2 - 2, horiz ? across / 2 - 2 : p); if (!horiz) g.rotate(-Math.PI / 2); g.fillText(String(i / 8), 0, 0); g.restore(); }
+        continue;
+      }
+      const t = i % 4 === 0 ? 8 : i % 2 === 0 ? 5 : 3;   // ½ in 8 px, ¼ in 5 px, ⅛ in 3 px
+      if (horiz) { g.moveTo(p, across - t); g.lineTo(p, across); } else { g.moveTo(across - t, p); g.lineTo(across, p); }
+    }
+    g.stroke();
+    if (span) {   // the selection: three 2 px blue ticks at its start, centre and end
+      const a0 = o + (horiz ? span.x : span.y) * scale, l = (horiz ? span.w : span.h) * scale;
+      g.fillStyle = tok('--blue');
+      for (const p of [a0, a0 + l / 2, a0 + l]) horiz ? g.fillRect(Math.round(p) - 1, 0, 2, across) : g.fillRect(0, Math.round(p) - 1, across, 2);
+    }
+    if (rulerPtr) {
+      const p = Math.round(horiz ? rulerPtr.x - r.left : rulerPtr.y - r.top) + 0.5;
+      if (p > 0 && p < along) { g.strokeStyle = tok('--blue'); g.beginPath(); if (horiz) { g.moveTo(p, 0); g.lineTo(p, across); } else { g.moveTo(0, p); g.lineTo(across, p); } g.stroke(); }
+    }
+  }
+}
+$('#ed-stage').addEventListener('pointermove', e => { rulerPtr = { x: e.clientX, y: e.clientY }; queueRulers(); });
+$('#ed-stage').addEventListener('pointerleave', () => { rulerPtr = null; queueRulers(); });
+$('#ed-stage').addEventListener('scroll', queueRulers);
+/* Drag a guide out of a ruler, as Slides. It starts only once the pointer has left the ruler by a few pixels, so a click
+   on the ruler does nothing; while dragging the line is blue with where it is (inches, as the ruler counts), and it is
+   kept only if let go over the slide. */
+for (const [id, d] of [['#ed-ruler-h', 'h'], ['#ed-ruler-v', 'v']]) {
+  $(id).title = d === 'h' ? 'Drag down onto the slide for a guide' : 'Drag right onto the slide for a guide';
+  $(id).addEventListener('pointerdown', e => {
+    if (e.button !== 0) return;
+    const start = d === 'h' ? e.clientY : e.clientX, k = 1 / scale;
+    let r = /** @type {HTMLElement | null} */ (null), label = /** @type {HTMLElement | null} */ (null);
+    const at = ev => { const p = toCanvas(ev); return d === 'v' ? p.x : p.y; };
+    const on = v => v >= 0 && v <= (d === 'v' ? W : H);
+    const show = v => {
+      place(r, d === 'v' ? { x: v - 4 * k, y: 0, w: 8 * k, h: H } : { x: 0, y: v - 4 * k, w: W, h: 8 * k });
+      label.textContent = on(v) ? `${(v / 192).toFixed(2)} in` : 'Let go to cancel';
+      r.classList.toggle('off', !on(v));
+    };
+    drag(e, ev => {
+      if (!r) {
+        if (Math.abs((d === 'h' ? ev.clientY : ev.clientX) - start) < 6) return;   // not yet: a click, or a wobble on the ruler
+        setGuidesShown(true);
+        r = div('rule new ' + d); r.style.setProperty('--k', k + 'px'); label = div('rule-at'); r.append(label); $('#ed-rules').append(r);
+      }
+      show(at(ev));
+    }, ev => { if (!r) return; const v = at(ev); r.remove(); if (on(v)) setGuides([...userGuides(), [d, v]]); });
+  });
+}
+/* Set the zoom, keeping the slide point under (cx, cy) (or the stage centre) where it was. */
+function setZoom(z, cx, cy) {
+  const sr = stage.getBoundingClientRect();
+  cx ??= sr.left + sr.width / 2; cy ??= sr.top + sr.height / 2;
+  const p = toCanvas({ clientX: cx, clientY: cy });
+  zoom = z && Math.max(0.25, Math.min(4, z));
+  fit();
+  const fr = frame.getBoundingClientRect();
+  stage.scrollLeft += fr.left + p.x * scale - cx; stage.scrollTop += fr.top + p.y * scale - cy;
+}
+const fitZoom = () => scale * W / 960;
+const zoomStep = dir => {
+  const z = fitZoom();
+  setZoom(dir > 0 ? ZOOMS.find(v => v > z + 0.01) ?? 2 : [...ZOOMS].reverse().find(v => v < z - 0.01) ?? 0.5);
+};

glideshow/editor/js/guides.js

@@ -0,0 +1,37 @@
+/* View → Guides, as Slides: user guides across the slide, saved with the deck as data-guides="v960 h540" on
+   the .slides element (px on the 1920×1080 canvas). Drag one to move it, drag it off the slide to remove it;
+   dragged objects snap to them. Shown or hidden per viewer (remembered), never drawn in the deck itself. */
+const userGuides = () => (deckDoc?.querySelector('.slides')?.dataset.guides || '').split(/\s+/).filter(Boolean).map(t => [t[0], +t.slice(1)]).filter(([d, v]) => 'vh'.includes(d) && isFinite(v));
+const guidesShown = () => { try { return localStorage.getItem('slides-guides-off') !== '1'; } catch { return true; } };
+const snapGuides = () => { try { return localStorage.getItem('slides-snap-guides') !== '0'; } catch { return true; } };
+function setGuides(list) {
+  const el = deckDoc.querySelector('.slides');
+  if (list.length) el.dataset.guides = list.map(([d, v]) => d + Math.round(v)).join(' '); else delete el.dataset.guides;
+  drawGuides(); scheduleSave();
+}
+function setGuidesShown(on) { store('slides-guides-off', on ? undefined : '1'); drawGuides(); }
+function addGuide(d) { setGuidesShown(true); setGuides([...userGuides(), [d, d === 'v' ? W / 2 : H / 2]]); }
+function drawGuides() {
+  const host = $('#ed-rules'); host.replaceChildren();
+  if (!guidesShown()) return;
+  const k = 1 / scale;
+  userGuides().forEach(([d, v], i) => {
+    const r = div('rule ' + d); r.style.setProperty('--k', k + 'px');
+    place(r, d === 'v' ? { x: v - 4 * k, y: 0, w: 8 * k, h: H } : { x: 0, y: v - 4 * k, w: W, h: 8 * k });
+    r.addEventListener('pointerdown', e => {
+      e.stopPropagation(); e.preventDefault();
+      const list = userGuides();
+      drag(e, ev => { const p = toCanvas(ev); list[i] = [d, d === 'v' ? p.x : p.y]; place(r, d === 'v' ? { x: p.x - 4 * k, y: 0, w: 8 * k, h: H } : { x: 0, y: p.y - 4 * k, w: W, h: 8 * k }); },
+        () => { const v2 = list[i][1]; setGuides(v2 < 0 || v2 > (d === 'v' ? W : H) ? list.filter((_, j) => j !== i) : list); });
+    });
+    host.append(r);
+  });
+}
+let guideChord = 0;   // ⌃⌘E starts Slides' two-step guide shortcuts
+addEventListener('keydown', e => {
+  if (!(e.ctrlKey && e.metaKey) || inField(e.target)) return;
+  if (e.code === 'KeyE') { e.preventDefault(); guideChord = Date.now(); return; }
+  if (Date.now() - guideChord > 2000) return;
+  const run = { KeyG: () => setGuidesShown(!guidesShown()), KeyV: () => addGuide('v'), KeyH: () => addGuide('h') }[e.code];
+  if (run) { e.preventDefault(); e.stopImmediatePropagation(); guideChord = 0; run(); }
+}, true);

glideshow/editor/js/insert.js

@@ -0,0 +1,73 @@
+/* Code blocks: Insert → Code block → language makes a box with <pre><code class="language-…">, coloured by shapes.js'
+   highlightCode; right-click → Code language changes it. */
+const CODE_LANGS = [['python', 'Python'], ['javascript', 'JavaScript'], ['typescript', 'TypeScript'], ['bash', 'Bash'], ['json', 'JSON'],
+  ['cpp', 'C++'], ['rust', 'Rust'], ['go', 'Go'], ['sql', 'SQL'], ['r', 'R'], ['julia', 'Julia'], ['plaintext', 'Plain text']];
+const CODE_SAMPLE = { python: 'def loss(logits, y):\n    return ce(logits, y)  # mean over the batch', javascript: 'const sum = xs => xs.reduce((a, b) => a + b, 0);' };
+function addCode(lang) {
+  const b = makeBox({ x: 360, y: 340, w: 1200, h: 400 }); b.dataset.valign = 'top';
+  const pre = document.createElement('pre'), code = document.createElement('code');
+  code.className = 'language-' + lang; code.textContent = CODE_SAMPLE[lang] || '// code'; pre.append(code);
+  content(b).style.fontSize = '40px'; content(b).style.textAlign = 'left'; content(b).append(pre);
+  insert(b); highlightCode(b);
+}
+/* Tables, as Slides: Insert → Table → a size grid (columns × rows); a `.box.table` holds a plain <table>. Cells are edited
+   in place (Tab / ⇧Tab move between them, Tab in the last cell adds a row); right-click in a cell inserts or deletes rows
+   and columns, deletes the table or evens out the rows / columns. */
+function tableGrid() {
+  const g = div('table-grid'), cap = div('table-cap'), N = 10;
+  for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) {
+    const cell = div('tg-cell'); cell.dataset.r = String(r); cell.dataset.c = String(c);
+    cell.onpointerenter = () => { g.querySelectorAll('.tg-cell').forEach(e => e.classList.toggle('on', +e.dataset.r <= r && +e.dataset.c <= c)); cap.textContent = `${c + 1} x ${r + 1}`; };
+    cell.onclick = () => { closeMenu(); addTable(c + 1, r + 1); };
+    g.append(cell);
+  }
+  const wrap = div('table-pick'); cap.textContent = '1 x 1'; wrap.append(g, cap); return wrap;
+}
+function addTable(cols, rows) {
+  const w = Math.min(1600, cols * 320), h = rows * 96;
+  const b = makeBox({ x: (W - w) / 2, y: (H - h) / 2, w, h, cls: 'table' }); b.dataset.valign = 'top';
+  const t = document.createElement('table');
+  for (let r = 0; r < rows; r++) { const tr = t.insertRow(); for (let c = 0; c < cols; c++) tr.insertCell(); }
+  const c = content(b); c.style.padding = '0'; c.style.fontSize = `${Math.round(14 * PT * 100) / 100}px`; c.style.textAlign = 'left'; c.append(t);
+  insert(b);
+}
+const cellAt = () => getSelection().anchorNode?.parentElement?.closest?.('td, th') || (getSelection().anchorNode?.closest?.('td, th'));
+function focusCell(td) { const r = document.createRange(); r.selectNodeContents(td); r.collapse(false); const s = getSelection(); s.removeAllRanges(); s.addRange(r); lastRange = r.cloneRange(); }
+/** @param {any} td a table cell */
+function tableOp(op, td = cellAt()) {
+  if (!td || !editing) return;
+  const tr = /** @type {HTMLTableRowElement} */ (td.parentElement), t = td.closest('table'), ci = td.cellIndex, ri = tr.rowIndex, rows = [...t.rows];
+  const blankRow = () => { const n = t.insertRow(-1); n.remove(); for (let i = 0; i < tr.cells.length; i++) n.insertCell(); return n; };
+  if (op === 'row-above') tr.before(blankRow());
+  if (op === 'row-below') tr.after(blankRow());
+  if (op === 'col-left' || op === 'col-right') rows.forEach(r => r.insertCell(op === 'col-left' ? ci : ci + 1));
+  if (op === 'del-row') { if (rows.length > 1) tr.remove(); else return tableOp('del-table', td); }
+  if (op === 'del-col') { if (tr.cells.length > 1) rows.forEach(r => r.cells[ci]?.remove()); else return tableOp('del-table', td); }
+  if (op === 'del-table') { const b = editing; stopEdit(); b.remove(); sel.clear(); drawOverlay(); commit(); return; }
+  if (op === 'dist-rows') rows.forEach(r => r.style.removeProperty('height'));
+  if (op === 'dist-cols') rows.forEach(r => [...r.cells].forEach(c => c.style.removeProperty('width')));
+  const keep = t.rows[Math.min(ri, t.rows.length - 1)]?.cells[Math.min(ci, t.rows[0].cells.length - 1)];
+  if (keep) focusCell(keep);
+  fitHeight(editing);
+}
+const tableItems = () => [
+  { label: 'Insert row above', icon: 'add', run: () => tableOp('row-above') }, { label: 'Insert row below', icon: 'add', run: () => tableOp('row-below') },
+  { label: 'Insert column left', icon: 'add', run: () => tableOp('col-left') }, { label: 'Insert column right', icon: 'add', run: () => tableOp('col-right') },
+  '-',
+  { label: 'Delete row', icon: 'delete', run: () => tableOp('del-row') }, { label: 'Delete column', icon: 'delete', run: () => tableOp('del-col') },
+  { label: 'Delete table', icon: 'delete', run: () => tableOp('del-table') },
+  '-',
+  { label: 'Distribute rows', icon: 'vertical_distribute', run: () => tableOp('dist-rows') }, { label: 'Distribute columns', icon: 'horizontal_distribute', run: () => tableOp('dist-cols') },
+];
+/* Insert → Equation: a box holding display-math source; KaTeX typesets it, double-click edits the source. */
+function addEquation() {
+  const b = makeBox({ x: 460, y: 440, w: 1000, h: 200 });
+  content(b).style.fontSize = '48px'; content(b).style.textAlign = 'center'; content(b).textContent = '\\[ e^{i\\pi} + 1 = 0 \\]';
+  insert(b); renderMath(content(b));
+}
+const codeOf = b => b && content(b).querySelector('pre code');
+function setCodeLang(lang) {
+  for (const b of sel) { const c = codeOf(b); if (!c) continue; c.className = 'language-' + lang; c.textContent = c.textContent; delete c.dataset.highlighted; highlightCode(b); }
+  commit();
+}
+const codeLangItems = (run, on) => CODE_LANGS.map(([v, label]) => ({ label, run: () => run(v), on: on && (() => on(v)) }));

glideshow/editor/js/keyboard.js

@@ -0,0 +1,256 @@
+/* ---------- clipboard, drop, keyboard ---------- */
+
+const inField = t => t?.closest?.('input, select, textarea, #ed-notes');
+
+/* Slides, as Slides: ⌘C / ⌘X with the filmstrip focused copy the selected slides; ⌘V pastes them after the current one
+   (with the filmstrip or the slide focused). Their files go along by the deck they came from (/library/<id>/…): pasted
+   into another deck, each picture or video is copied into it. */
+const slideClip = () => SLIDE_CLIP + JSON.stringify({ deck: deckId, slides: (picked.size ? pickedIdx() : [cur]).map(i => sectionHTML(slides[i], true)) });
+addEventListener('copy', e => {
+  if (!editing && !inField(e.target) && filmFocused()) { e.clipboardData.setData('text/plain', slideClip()); e.preventDefault(); return; }
+  if (editing || inField(e.target) || !sel.size) return;
+  e.clipboardData.setData('text/plain', CLIP + JSON.stringify([...sel].map(b => cleanBox(b).outerHTML)));
+  e.preventDefault();
+});
+addEventListener('cut', e => {
+  if (!editing && !inField(e.target) && filmFocused()) { e.clipboardData.setData('text/plain', slideClip()); e.preventDefault(); deleteSlides(); return; }
+  if (editing || inField(e.target) || !sel.size) return;
+  e.clipboardData.setData('text/plain', CLIP + JSON.stringify([...sel].map(b => cleanBox(b).outerHTML)));
+  e.preventDefault();
+  deleteSelection();
+});
+async function pasteSlides(json) {
+  let clip; try { clip = JSON.parse(json); } catch { return; }
+  const t = document.createElement('template'), from = clip.deck && clip.deck !== deckId ? clip.deck : '';
+  const made = new Map();   // a file of the other deck → its copy here
+  const bring = async src => {   // a file of the deck the slides came from, copied into this one
+    if (!from || !src || /^(data|blob|https?):|^\//i.test(src)) return src;
+    if (!made.has(src)) made.set(src, (async () => {
+      const r = await fetch(`/library/${from}/${src.replace(/[?#].*$/, '')}`); if (!r.ok) return src;
+      const ext = (src.match(/\.(\w+)(?:[?#]|$)/) || [])[1] || 'bin';
+      return (await (await fetch('/api/upload?ext=' + ext, { method: 'POST', body: await r.blob() })).json()).src || src;
+    })());
+    return made.get(src);
+  };
+  if (from) setStatus('Copying the slides\u2019 pictures…', 'sync');
+  const copies = [];
+  for (const h of clip.slides || []) {
+    t.innerHTML = h; const s = t.content.querySelector('section'); if (!s) continue;
+    s.removeAttribute('data-sid'); s.removeAttribute('data-ed-stack');
+    boxes(s).forEach(b => { b.id = uid(); });
+    for (const el of s.querySelectorAll('[src], [poster]')) for (const a of ['src', 'poster']) { const v = el.getAttribute(a); if (v) el.setAttribute(a, await bring(v)); }
+    for (const el of s.querySelectorAll('[style*="url("]')) {
+      let st = el.getAttribute('style');
+      for (const m of [...st.matchAll(/url\((['"]?)([^'")]+)\1\)/g)]) st = st.replace(m[2], await bring(m[2]));
+      el.setAttribute('style', st);
+    }
+    copies.push(s);
+  }
+  if (!copies.length) return;
+  slideOp(() => {
+    const at = (picked.size ? Math.max(...pickedIdx()) : cur) + 1;
+    slides.splice(at, 0, ...copies); cur = slides.indexOf(copies.at(-1)); picked = new Set(copies);
+  });
+  setStatus(`Pasted ${copies.length} slide${copies.length > 1 ? 's' : ''}`, 'content_paste');
+}
+/* Pasted HTML keeps its formatting (⇧⌘V pastes plain text instead), minus anything active or structural. */
+let plainPaste = false;
+function cleanPastedHTML(html) {
+  const t = document.createElement('template'); t.innerHTML = html;
+  t.content.querySelectorAll('script, style, meta, link, title, iframe, object, embed, form, input, button').forEach(e => e.remove());
+  t.content.querySelectorAll('*').forEach(e => [...e.attributes].forEach(a => { if (!['style', 'href'].includes(a.name)) e.removeAttribute(a.name); }));
+  return t.innerHTML;
+}
+addEventListener('paste', async e => {
+  const plain = plainPaste; plainPaste = false;
+  if (inField(e.target) && !editing) return;
+  const cd = e.clipboardData;
+  // A file copied in Finder sometimes shows up only in `items`, not in `files`.
+  let files = [...cd.files];
+  if (!files.length) files = [...cd.items].filter(i => i.kind === 'file').map(i => i.getAsFile()).filter(Boolean);
+  files = files.filter(f => f.type.startsWith('image/') || isVideoFile(f));
+  if (files.length) {
+    e.preventDefault(); stopEdit();
+    for (const f of files) await (isVideoFile(f) ? addVideo(f) : addImage(f));
+    return;
+  }
+  const text = e.clipboardData.getData('text/plain'), html = e.clipboardData.getData('text/html');
+  e.preventDefault();
+  if (text.startsWith(SLIDE_CLIP)) { stopEdit(); await pasteSlides(text.slice(SLIDE_CLIP.length)); return; }   // slides, even while typing
+  if (editing) {
+    if (html && !plain) document.execCommand('insertHTML', false, cleanPastedHTML(html));
+    else document.execCommand('insertText', false, text);
+    fitHeight(editing);
+    return;
+  }
+  if (text.startsWith(CLIP)) {
+    const t = document.createElement('template');
+    const taken = boxes().map(geo);
+    const pasted = JSON.parse(text.slice(CLIP.length)).map(h => {
+      t.innerHTML = h;
+      const b = t.content.firstElementChild;
+      b.id = uid();
+      const g = geo(b);
+      while (taken.some(o => o.x === g.x && o.y === g.y)) { g.x += 30; g.y += 30; }
+      setGeo(b, g);
+      return b;
+    });
+    insert(...pasted);
+  } else if (/^https?:\/\/\S+$/.test(text.trim())) {   // a pasted web address: insert the picture it points to (fetched into assets/), as Slides
+    const url = text.trim(); setStatus('Fetching image…');
+    const r = await fetch('/api/fetch', { method: 'POST', body: JSON.stringify({ url }) }).then(r => r.json()).catch(() => ({}));
+    setStatus('');
+    if (r.src) await addImageSrc(r.src); else addText(url);
+  } else if (text.trim()) {
+    addText(text.trim());
+  }
+});
+
+stage.addEventListener('dragover', e => { e.preventDefault(); document.body.classList.add('drop-hint'); });
+stage.addEventListener('dragleave', () => document.body.classList.remove('drop-hint'));
+stage.addEventListener('drop', async e => {
+  e.preventDefault(); document.body.classList.remove('drop-hint');
+  const at = toCanvas(e);
+  for (const f of [...e.dataTransfer.files].filter(f => f.type.startsWith('image/') || isVideoFile(f))) await (isVideoFile(f) ? addVideo(f, at) : addImage(f, at));
+  for (const f of [...e.dataTransfer.files].filter(f => /\.pptx$/i.test(f.name))) await importPPTX(f);
+  for (const f of [...e.dataTransfer.files].filter(f => /\.(ttf|otf|woff2?)$/i.test(f.name))) {   // a font file: into the deck, and onto the selection
+    const fam = await useFontFile({ query: 'name=' + encodeURIComponent(f.name), body: f });
+    if (fam && sel.size) setFont(`'${fam}', sans-serif`);
+  }
+});
+
+function deleteSelection() {
+  if (!sel.size) return;
+  sel.forEach(b => b.remove()); sel.clear();
+  drawOverlay(); commit();
+}
+function duplicateSelection() {
+  if (!sel.size) return;
+  insert(...[...sel].map(b => {
+    const c = cleanBox(b); c.id = uid();
+    const g = geo(b); setGeo(c, { ...g, x: g.x + 30, y: g.y + 30 });
+    return c;
+  }));
+}
+
+addEventListener('keydown', e => {
+  const mod = e.metaKey || e.ctrlKey, k = e.key.toLowerCase();
+  if (mod && e.shiftKey && (e.key === '.' || e.key === ',' || e.key === '>' || e.key === '<') && sel.size) {
+    e.preventDefault(); stepSize(/[.>]/.test(e.key) ? 1 : -1); return;
+  }
+  if (mod && e.shiftKey && (e.code === 'Digit8' || e.code === 'Digit7') && (editing || sel.size === 1)) {
+    e.preventDefault(); listText(e.code === 'Digit8' ? 'insertUnorderedList' : 'insertOrderedList'); return;
+  }
+  if (mod && !(e.metaKey && e.ctrlKey) && !e.shiftKey && k === 'k' && (editing || sel.size === 1)) { e.preventDefault(); linkText(); return; }
+  if (mod && e.key === '\\' && sel.size) { e.preventDefault(); clearFormat(); return; }
+  if (mod && !e.shiftKey && !e.altKey && !(e.metaKey && e.ctrlKey) && (k === 'b' || k === 'i' || k === 'u') && (editing || sel.size)) {   // ⌘B ⌘I ⌘U, selection or whole boxes (⌃⌘B / ⌃⌘I resize)
+    e.preventDefault();
+    ({ b: $('#ed-bold'), i: $('#ed-italic'), u: $('#ed-underline') })[k].click();
+    return;
+  }
+  if (mod && e.shiftKey && 'lerj'.includes(k) && k && sel.size) { e.preventDefault(); setAlign({ l: 'left', e: 'center', r: 'right', j: 'justify' }[k]); return; }
+  if (mod && e.shiftKey && k === 'x' && sel.size) { e.preventDefault(); strike(); return; }
+  if (mod && !e.shiftKey && (e.key === '.' || e.key === ',') && sel.size) { e.preventDefault(); (e.key === '.' ? superscript : subscript)(); return; }
+  if (mod && e.shiftKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown') && sel.size && !editing) { e.preventDefault(); (e.key === 'ArrowUp' ? toFront : toBack)(); return; }
+  if (mod && e.shiftKey && !e.altKey && k === 'm' && !editing) { e.preventDefault(); newSlideBelow(); return; }   // ⇧⌘M
+  if (((mod && !e.ctrlKey) || (e.ctrlKey && !e.metaKey)) && !e.shiftKey && !e.altKey && k === 'm' && !editing) { e.preventDefault(); $('#ed-new-slide').click(); return; }   // Slides on Mac: ⌃M (⌘M too)
+  if (mod && e.altKey && !e.shiftKey && e.code === 'KeyC') { e.preventDefault(); copyFormat(); return; }
+  if (mod && e.altKey && !e.shiftKey && e.code === 'KeyV') { e.preventDefault(); pasteFormat(); return; }
+  if (mod && e.shiftKey && !e.altKey && k === 'v' && (editing || !inField(e.target))) {   // ⇧⌘V: Chrome on Mac has no such key (its own is ⌥⇧⌘V), so read the clipboard
+    e.preventDefault();
+    navigator.clipboard?.readText().then(t => { plainPaste = true; const ev = new Event('paste', { bubbles: true }); ev.clipboardData = { files: [], items: [], getData: f => f === 'text/plain' ? t : '' }; (editing || document.body).dispatchEvent(ev); }).catch(() => {});
+    return;
+  }
+
+  if (mod && e.altKey && e.shiftKey && e.code === 'KeyB') { e.preventDefault(); setTransPanel($('#ed-trans').hidden); return; }
+  if (mod && e.altKey && e.shiftKey && e.code === 'KeyS') { e.preventDefault(); setNotesVisible(document.body.classList.contains('notes-off')); return; }
+  if (e.ctrlKey && e.shiftKey && !e.metaKey && e.code === 'KeyF') { e.preventDefault(); toggleCompact(); return; }
+  if (mod && !e.shiftKey && !e.altKey && k === 's') { e.preventDefault(); saveNow(); return; }
+  if (mod && !e.shiftKey && !e.altKey && k === 'p') { e.preventDefault(); printDeck(); return; }
+  if (mod && e.key === 'Enter') { e.preventDefault(); present(e.shiftKey ? 0 : cur); return; }
+  if (mod && ((k === 'f' && !e.shiftKey) || (k === 'h' && e.shiftKey))) { e.preventDefault(); openFind(); return; }
+  if (mod && e.altKey && e.code === 'KeyX') { e.preventDefault(); setSpelling(!spellOn()); return; }
+  if (mod && e.altKey && e.shiftKey && e.code === 'KeyF') { e.preventDefault(); stopEdit(); thumbs.focus({ preventScroll: true }); return; }   // move to filmstrip
+  if (mod && e.key === '/') { e.preventDefault(); showShortcuts(shortcutsDlg.hidden); return; }
+  if (mod && !e.altKey && (e.key === '=' || e.key === '+' || e.key === '-' || e.key === '0')) {
+    e.preventDefault(); e.key === '0' ? setZoom(null) : zoomStep(e.key === '-' ? -1 : 1); return;
+  }
+  if (mod && !e.shiftKey && (e.key === ']' || e.key === '[') && (editing || sel.size)) { e.preventDefault(); indentText(e.key === ']' ? 1 : -1); return; }
+  if (editing && e.key === 'Tab' && !cellAt()) { e.preventDefault(); indentText(e.shiftKey ? -1 : 1); return; }
+  if (editing) {
+    if (e.key === 'Tab' && cellAt()) {   // Tab / ⇧Tab: next / previous cell; Tab in the last cell adds a row
+      e.preventDefault();
+      const cells = [...cellAt().closest('table').querySelectorAll('td, th')], i = cells.indexOf(cellAt()) + (e.shiftKey ? -1 : 1);
+      if (i >= cells.length) { tableOp('row-below', cells.at(-1)); const t = cells[0].closest('table'); focusCell(t.rows[t.rows.length - 1].cells[0]); }
+      else if (i >= 0) focusCell(cells[i]);
+      return;
+    }
+    if (e.key === 'Enter' && !e.shiftKey && getSelection().anchorNode?.parentElement?.closest('pre')) { e.preventDefault(); document.execCommand('insertText', false, '\n'); return; }   // a new line inside a code block
+    if (e.key === 'Enter' && editing.dataset.shape === 'wordart') { e.preventDefault(); const b = editing; stopEdit(); sel = new Set([b]); drawOverlay(); return; }   // word art is one line
+    if (e.key === 'Escape') { e.preventDefault(); const b = editing; stopEdit(); if (b.isConnected) { sel = new Set([b]); drawOverlay(); } }
+    if (mod && k === 'z' && !e.shiftKey && content(editing).innerHTML === editStart) { e.preventDefault(); undo(); return; }   // nothing typed yet: undo the last move, as Slides
+    return;   // everything else is normal typing (⌘B/⌘I/⌘Z work natively)
+
+  }
+  if (inField(e.target)) return;
+  if (filmFocused() && !e.altKey) {   // the filmstrip has focus: keys act on slides, as Slides
+    const step = { ArrowUp: -1, ArrowDown: 1, PageUp: -1, PageDown: 1, ArrowLeft: -1, ArrowRight: 1 }[e.key];
+    if (mod && /^Arrow/.test(e.key)) { const up = e.key === 'ArrowUp' || e.key === 'ArrowLeft'; e.preventDefault(); moveSlides(e.shiftKey ? (up ? 'start' : 'end') : (up ? 'up' : 'down')); return; }   // ⌘↑ or ⌘←, as Slides' list
+    if (!mod && (step || e.key === 'Home' || e.key === 'End')) {
+      e.preventDefault();
+      const i = e.key === 'Home' ? 0 : e.key === 'End' ? slides.length - 1 : cur + step;
+      if (e.shiftKey) extendTo(i); else go(i);
+      return;
+    }
+    if (!mod && (e.key === 'Backspace' || e.key === 'Delete')) { e.preventDefault(); deleteSlides(); return; }
+    if (mod && k === 'a') { e.preventDefault(); picked = new Set(slides); slideAnchor = 0; renderThumbs(); return; }
+    if (!mod && e.key === 'Enter') { e.preventDefault(); thumbs.blur(); return; }
+  }
+  if (mod && k === 'z') { e.preventDefault(); e.shiftKey ? redo() : undo(); return; }
+  if (mod && k === 'y') { e.preventDefault(); redo(); return; }
+  if (mod && !e.shiftKey && !e.altKey && !e.ctrlKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown') && sel.size) {   // one layer forward / back
+    e.preventDefault(); (e.key === 'ArrowUp' ? stepForward : stepBackward)(); return;
+  }
+  if (e.metaKey && e.ctrlKey && sel.size && RESIZE_KEYS[e.code]) {   // ⌃⌘B/I/K grow, ⌃⌘W/J shrink, from the centre
+    e.preventDefault();
+    const [dw, dh] = RESIZE_KEYS[e.code];
+    sel.forEach(b => { const g = geo(b), w = Math.max(20, g.w + dw), h = Math.max(isLine(b) ? 0 : 20, g.h + dh); setGeo(b, { x: g.x + (g.w - w) / 2, y: g.y + (g.h - h) / 2, w, h }); fitHeight(b); });
+    drawOverlay(); commit(); return;
+  }
+  if (mod && e.altKey && e.code === 'KeyG') { e.preventDefault(); if (e.shiftKey) ungroupSel(); else groupSel(); return; }   // ⌥⌘G / ⇧⌥⌘G
+  if (mod && k === 'd') { e.preventDefault(); if (filmFocused()) $('#ed-dup-slide').click(); else duplicateSelection(); return; }
+  if (mod && k === 'a') { e.preventDefault(); sel = new Set(pickable()); drawOverlay(); updateToolbar(); return; }
+  if (mod && !e.shiftKey && !e.altKey && 'biu'.includes(k) && k && sel.size) {   // whole selected boxes; while editing the browser does it
+    e.preventDefault(); $({ b: '#ed-bold', i: '#ed-italic', u: '#ed-underline' }[k]).click(); return;
+  }
+  if (mod) { if (claimed(e)) e.preventDefault(); return; }   // a Slides key with nothing to act on still never reaches Chrome (⌘I opened Mail)
+  if (e.key === 'Backspace' || e.key === 'Delete') { e.preventDefault(); deleteSelection(); return; }
+  if (cropping && (e.key === 'Escape' || e.key === 'Enter')) { e.preventDefault(); endCrop(); return; }
+  if (e.key === 'Escape' && scope && sel.size === 1 && scope.contains([...sel][0])) { e.preventDefault(); sel = new Set([scope]); scope = null; drawOverlay(); updateToolbar(); return; }   // out of the group
+  if (e.key === 'Escape') { e.preventDefault(); if (!sel.size) thumbs.focus({ preventScroll: true }); sel.clear(); drawOverlay(); updateToolbar(); return; }   // Esc with nothing selected: to the filmstrip
+  if (e.key === 'Enter' && sel.size === 1) { e.preventDefault(); startEdit([...sel][0]); return; }
+  if (e.key === 'Tab') {   // select next / previous object, as Slides
+    e.preventDefault();
+    const all = boxes(); if (!all.length) return;
+    const i = sel.size ? all.indexOf([...sel].at(-1)) : (e.shiftKey ? 0 : -1);
+    sel = new Set([all[(i + (e.shiftKey ? -1 : 1) + all.length) % all.length]]); drawOverlay(); updateToolbar(); return;
+  }
+  if (e.altKey && sel.size && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {   // ⌥←/→ rotate 15°, with ⇧ 1°
+    e.preventDefault();
+    const d = (e.key === 'ArrowRight' ? 1 : -1) * (e.shiftKey ? 1 : 15);
+    sel.forEach(b => { if (!isLine(b)) setRot(b, rot(b) + d); }); drawOverlay(); commit(); return;
+  }
+  const arrows = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
+  if (arrows[e.key]) {
+    e.preventDefault();
+    if (!sel.size) { go(cur + (arrows[e.key][0] || arrows[e.key][1])); return; }
+    const step = e.shiftKey ? 10 : 1, [ax, ay] = arrows[e.key];
+    sel.forEach(b => { const g = geo(b); setGeo(b, { ...g, x: g.x + ax * step, y: g.y + ay * step }); });
+    drawOverlay(); commit();
+  }
+  if (e.key === 'PageDown' || e.key === 'PageUp') { e.preventDefault(); go(cur + (e.key === 'PageDown' ? 1 : -1)); }
+});
+/* Modifier keys docs/shortcuts.md gives the editor, by e.code; ⌘C / ⌘X / ⌘V / ⌘L / ⌘R / ⌘W stay the browser's. */
+const CLAIMED = { meta: 'KeyB KeyI KeyU KeyK KeyD KeyM KeyY KeyZ KeyA KeyS KeyP KeyF Backslash Period Comma BracketLeft BracketRight Slash ArrowUp ArrowDown Enter',
+  shift: 'KeyX KeyL KeyE KeyR KeyJ KeyH KeyM Digit7 Digit8 Period Comma ArrowUp ArrowDown Enter KeyZ', alt: 'KeyC KeyV KeyG KeyX', ctrl: 'KeyB KeyI KeyK KeyW KeyJ' };
+const claimed = e => (CLAIMED[e.metaKey && e.ctrlKey ? 'ctrl' : e.altKey ? 'alt' : e.shiftKey ? 'shift' : 'meta'] || '').split(' ').includes(e.code);

glideshow/editor/js/live.js

@@ -0,0 +1,48 @@
+/* ---------- working beside an agent ---------- */
+/* An agent (or anything) editing deck.html while the editor is open: the reload shows what changed, the agent can ask
+   what you are looking at (`glideshow selection`), and your own change is on disk before you switch to its window. */
+
+/* After a reload from disk: slides that changed flash in the filmstrip, the first one is shown if the slide on show
+   didn't change, and the changed boxes on it are outlined for a moment. */
+function showOutsideChanges(before) {
+  const old = new Set(before.map(normHTML)), changed = slides.map((s, i) => old.has(normHTML(sectionHTML(s))) ? -1 : i).filter(i => i >= 0);
+  if (!changed.length) { setStatus('Reloaded from disk', 'cloud_sync'); return; }
+  if (!changed.includes(cur)) go(changed[0]);
+  const list = changed.map(i => i + 1);
+  setStatus(`${remoteBy ? remoteBy + ' changed' : 'Changed on disk:'} slide${list.length > 1 ? 's' : ''} ${list.length > 6 ? list.slice(0, 6).join(', ') + '…' : list.join(', ')}`, 'cloud_sync');
+  requestAnimationFrame(() => {
+    for (const i of changed) thumbs.children[i]?.animate([{ boxShadow: '0 0 0 3px #fbbc04' }, { boxShadow: '0 0 0 3px #fbbc04', offset: .6 }, { boxShadow: '0 0 0 0 transparent' }], { duration: 2400 });
+    const was = new Set(Array.from(before[cur] ? new DOMParser().parseFromString(before[cur], 'text/html').querySelectorAll('section > .box') : [], b => normHTML(cleanBox(b).outerHTML)));
+    const fresh = boxes().filter(b => !was.has(normHTML(cleanBox(b).outerHTML)));
+    $('#ed-flash').replaceChildren(...fresh.map(b => { const o = div('flash-box'); place(o, aabb(b)); o.style.setProperty('--k', 1 / scale + 'px'); return o; }));
+    setTimeout(() => $('#ed-flash').replaceChildren(), 2400);
+  });
+}
+
+/* What you are looking at, for an agent working beside you: the slide on show and the boxes selected (with their text),
+   sent to the server whenever it changes. `glideshow selection` prints it; docs/agents.md tells agents to read it when you
+   say "this". */
+let lastSelection = '';
+function reportSelection() {
+  if (typeof deckDoc === 'undefined' || !deckDoc || !slides.length) return;
+  const picked = [...sel].filter(b => b.isConnected), text = editing ? String(getSelection()) : '';
+  const key = JSON.stringify([cur, picked.map(b => b.id), editing?.id || '', text, slides.length]);
+  if (key === lastSelection) return;
+  lastSelection = key;
+  const all = boxes(), [h, v] = hv(cur);
+  const body = { slide: cur + 1, h, v, slides: slides.length, title: deckDoc.title,
+    boxes: picked.map(b => { const g = geo(b); return { id: b.id, index: all.indexOf(b), shape: b.dataset.shape || (b.classList.contains('image') ? 'image' : 'text'),
+      text: (content(b)?.innerText || '').replace(/\s+/g, ' ').trim().slice(0, 300), x: Math.round(g.x), y: Math.round(g.y), w: Math.round(g.w), h: Math.round(g.h) }; }),
+    editing: editing?.id || '', selectedText: text.slice(0, 1000) };
+  fetch('/api/selection', { method: 'POST', body: JSON.stringify(body) }).catch(() => {});
+}
+setInterval(reportSelection, 400);
+
+/* Leaving the window (to the terminal, say): what you changed goes to disk now, text being typed included, so an
+   agent that writes next starts from it. */
+addEventListener('blur', async () => {
+  if (themeStash || histView) return;
+  if (editing && content(editing).innerHTML !== editStart) { commit(); editStart = content(editing).innerHTML; }
+  await flushSave();
+});
+document.addEventListener('visibilitychange', () => { if (document.hidden) flushSave(); });