glideshow 0.1.2__py3-none-any.whl

glideshow/editor/js/text.js

@@ -0,0 +1,366 @@
+/* ---------- text editing ---------- */
+
+/* Enter edit mode. With a point (a double-click), the caret goes there, as Slides; otherwise (Enter, a new
+   box) all the text is selected. */
+function startEdit(b, pt) {
+  if (isMedia(b) || isStroke(b) || isGroup(b)) return;
+  const who = typingIn(b);   // someone else is typing in it (people.js): theirs until they stop
+  if (who) { setStatus(`${who.n} is typing in this box`, 'edit_off'); return; }
+  editing = b; sel = new Set([b]);
+  const c = content(b);
+  unrenderMath(c);   // edit the source
+  editStart = c.innerHTML;
+  c.contentEditable = 'true'; c.spellcheck = spellOn();
+  editFloor = parseFloat(b.dataset.minh) || geo(b).h;
+  c.oninput = e => { if (e.inputType === 'insertText' && /^[ \u00a0]$/.test(e.data || '') && latexOn()) latexShortcut(); if (b.dataset.placeholder) markPlaceholder(c); fitHeight(b); };
+  c.focus();
+  let r = pt && caretAt(pt.x, pt.y);
+  if (!r || !c.contains(r.startContainer)) { r = document.createRange(); r.selectNodeContents(c); }
+  const s = getSelection(); s.removeAllRanges(); s.addRange(r);
+  drawOverlay(); updateToolbar();
+}
+/* LaTeX shortcuts while typing (Tools → Convert LaTeX shortcuts, on unless turned off): after a space, `\alpha` becomes α
+   (symbols.js' table), `^2` / `^{10}` a superscript and `_i` / `_{ij}` a subscript; the space stays. */
+const latexOn = () => stored('slides-latex') !== '0';
+function latexShortcut() {
+  const s = getSelection(); if (!s.rangeCount || !s.isCollapsed) return;
+  const n = s.anchorNode, o = s.anchorOffset; if (n?.nodeType !== 3) return;
+  const t = /** @type {Text} */ (n), before = t.data.slice(0, o - 1), sp = t.data[o - 1];
+  let m = before.match(/\\([A-Za-z]+)$/);
+  if (m && LATEX_SYMBOLS[m[1]]) {
+    t.replaceData(o - 1 - m[0].length, m[0].length, LATEX_SYMBOLS[m[1]]);
+    s.collapse(n, o - m[0].length + LATEX_SYMBOLS[m[1]].length); return;
+  }
+  m = before.match(/([\^_])(?:\{([^{}]+)\}|([A-Za-z0-9+\-=]+))$/);
+  if (!m) return;
+  const el = document.createElement(m[1] === '^' ? 'sup' : 'sub'); el.textContent = m[2] ?? m[3];
+  const tail = t.splitText(o - 1 - m[0].length);   // tail starts at ^ / _
+  tail.deleteData(0, m[0].length);                 // tail is now the space and what followed
+  tail.before(el);
+  s.collapse(tail, 1);
+}
+function stopEdit() {
+  if (!editing) return;
+  const b = editing, c = content(b);
+  c.removeAttribute('contenteditable'); c.removeAttribute('spellcheck'); c.oninput = null;
+  editing = null; lastRange = null;
+  getSelection().removeAllRanges();
+  if (!b.dataset.shape && !b.dataset.placeholder && !isMedia(b) && !c.textContent.trim() && !c.querySelector('img')) {
+    b.remove(); sel.delete(b);   // empty text boxes disappear, as in Google Slides
+  }
+  if (b.dataset.shape === 'wordart') renderShape(b);   // redraw the outlined text
+  c.querySelectorAll('pre code[data-highlighted]').forEach(code => { code.textContent = code.textContent; delete code.dataset.highlighted; code.classList.remove('hljs'); });   // recolour edited code
+  highlightCode(c); renderMath(c);
+  drawOverlay();
+  if (c.innerHTML !== editStart || !b.isConnected) commit(); else { updateToolbar(); maybeReload(); }
+}
+/* Text boxes grow to fit their text while typing and shrink back, never below the height the
+   user dragged (data-minh; for boxes without it, the height at the start of editing). */
+/* Text boxes resize to fit their text unless data-autofit="none"; shapes only with data-autofit="resize". */
+function fitHeight(b) {
+  if (isMedia(b) || isLine(b) || isGroup(b)) return;
+  if (b.dataset.autofit === 'shrink') { fitText(b); return; }
+  if (b.dataset.shape ? b.dataset.autofit !== 'resize' : b.dataset.autofit === 'none') return;
+  const c = content(b), g = geo(b);
+  const floor = editing === b ? editFloor : (parseFloat(b.dataset.minh) || g.h);
+  c.style.height = 'auto';
+  const h = Math.max(floor, c.offsetHeight);
+  c.style.height = '';
+  if (h !== g.h) { setGeo(b, { ...g, h }); drawOverlay(); }
+}
+document.addEventListener('selectionchange', () => {
+  if (!editing) return;
+  const s = getSelection();
+  if (s.rangeCount && content(editing).contains(s.anchorNode)) lastRange = s.getRangeAt(0).cloneRange();
+});
+
+/* Apply a text style: to the selected characters while editing, otherwise to whole boxes. */
+function styleText(cmd, val, whole) {
+  const s = editing && editSelection();
+  if (s && s.rangeCount && !s.isCollapsed) {
+    document.execCommand('styleWithCSS', false, 'true');
+    document.execCommand(cmd, false, val);
+    lastRange = s.rangeCount ? s.getRangeAt(0).cloneRange() : lastRange;   // don't wait for selectionchange
+    fitHeight(editing);
+    return;
+  }
+  for (const b of sel) { whole(content(b)); fitHeight(b); }
+  commit();
+}
+
+/* A CSS property on the selected text while editing, else on whole boxes' .content. Each selected run of text takes it
+   (its own span, reused when it already has one), so a selection across paragraphs leaves them paragraphs and sizing
+   twice doesn't nest spans. A paragraph the selection covers takes it too: an imported paragraph's own font-size
+   would otherwise keep its lines as tall as before. */
+function spanStyle(prop, value) {
+  const s = editing && editSelection();
+  if (s && s.rangeCount && !s.isCollapsed) {
+    const r = s.getRangeAt(0), c = content(editing);
+    const covers = (/** @type {Element} */ el) => {   // no selected-out text before or after it inside el
+      const a = document.createRange(), z = document.createRange();
+      a.setStart(el, 0); a.setEnd(r.startContainer, r.startOffset); z.setStart(r.endContainer, r.endOffset); z.setEnd(el, el.childNodes.length);
+      return !a.toString() && !z.toString();
+    };
+    const blocks = [...c.querySelectorAll('div, p, li, h1, h2, h3, h4, h5, h6, blockquote')].filter(e => r.intersectsNode(e) && e.textContent && covers(e));
+    const parts = /** @type {[Text, number, number][]} */ ([]), it = document.createTreeWalker(c, NodeFilter.SHOW_TEXT);
+    for (let n; (n = /** @type {Text} */ (it.nextNode()));) {
+      if (!n.data || !r.intersectsNode(n)) continue;
+      const a = n === r.startContainer ? r.startOffset : 0, z = n === r.endContainer ? r.endOffset : n.data.length;
+      if (z > a) parts.push([n, a, z]);
+    }
+    const runs = parts.map(([n, a, z]) => {   // measured first, then split
+      if (z < n.data.length) n.splitText(z);
+      const t = a ? n.splitText(a) : n, p = /** @type {HTMLElement} */ (t.parentElement);
+      if (p !== c && p.tagName === 'SPAN' && p.childNodes.length === 1) { p.style.setProperty(prop, value); return t; }
+      const span = document.createElement('span'); span.style.setProperty(prop, value); t.replaceWith(span); span.append(t); return t;
+    });
+    for (const b of blocks) { b.querySelectorAll('[style]').forEach(e => /** @type {HTMLElement} */ (e).style.removeProperty(prop)); /** @type {HTMLElement} */ (b).style.setProperty(prop, value); }
+    c.querySelectorAll('span[style=""]').forEach(e => e.replaceWith(...e.childNodes));
+    c.querySelectorAll('[style=""]').forEach(e => e.removeAttribute('style'));
+    if (runs.length) { r.setStart(runs[0], 0); r.setEnd(runs.at(-1), runs.at(-1).data.length); }
+    s.removeAllRanges(); s.addRange(r); lastRange = r.cloneRange();
+    fitHeight(editing); return;
+  }
+  for (const b of sel) { const c = content(b); if (value) c.style.setProperty(prop, value); else c.style.removeProperty(prop); fitHeight(b); }
+  commit();
+}
+/* Capitalization, as Slides: rewrites the characters (not CSS), on the selection while editing or on whole boxes. */
+function recase(mode) {
+  const fix = (t, prev) => mode === 'lower' ? t.toLowerCase() : mode === 'upper' ? t.toUpperCase()
+    : t.toLowerCase().replace(/(^|[^\p{L}\p{N}'’])(\p{L})/gu, (m, sp, ch, i) => sp + (i === 0 && !sp && /[\p{L}\p{N}'’]$/u.test(prev) ? ch : ch.toUpperCase()));
+  const walk = (root, range) => {
+    let prev = '';
+    const it = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    for (let n; (n = /** @type {Text} */ (it.nextNode()));) {
+      if (range && !range.intersectsNode(n)) continue;
+      const a = range && n === range.startContainer ? range.startOffset : 0, z = range && n === range.endContainer ? range.endOffset : n.data.length;
+      n.data = n.data.slice(0, a) + fix(n.data.slice(a, z), prev || n.data.slice(0, a)) + n.data.slice(z); prev = n.data.slice(0, z);
+    }
+  };
+  const s = editing && editSelection();
+  if (s && s.rangeCount && !s.isCollapsed) { walk(content(editing), s.getRangeAt(0)); return; }
+  for (const b of sel) { walk(content(b)); fitHeight(b); }
+  commit();
+}
+const LETTER_SPACING = [['Very tight', '-0.05em'], ['Tight', '-0.025em'], ['Normal', ''], ['Loose', '0.05em'], ['Very loose', '0.1em']];
+const curLs = () => [...sel][0] ? content([...sel][0]).style.letterSpacing : '';
+/* Run an execCommand over a whole box's text without entering edit mode. */
+function onWholeText(b, fn) {
+  const c = content(b), s = getSelection(), r = document.createRange();
+  c.contentEditable = 'true'; r.selectNodeContents(c); s.removeAllRanges(); s.addRange(r);
+  document.execCommand('styleWithCSS', false, 'true'); fn();
+  c.removeAttribute('contenteditable'); s.removeAllRanges();
+}
+/* Highlight (background on text spans), on the selection while editing or on whole boxes. 'transparent' = none. */
+function hilite(color) {
+  const tidy = c => c.querySelectorAll('[style]').forEach(e => {
+    if (e.style.backgroundColor === 'transparent' || e.style.backgroundColor === 'rgba(0, 0, 0, 0)') e.style.backgroundColor = '';
+    if (!e.getAttribute('style')) { e.removeAttribute('style'); if (e.tagName === 'SPAN') e.replaceWith(...e.childNodes); }
+  });
+  // Chrome ignores hiliteColor('transparent'), so "None" clears backgrounds directly.
+  const clear = (c, r) => { c.querySelectorAll('[style]').forEach(e => { if (!r || r.intersectsNode(e)) e.style.backgroundColor = ''; }); tidy(c); };
+  if (editing && lastRange && !lastRange.collapsed) {
+    if (color === 'transparent') { clear(content(editing), lastRange); scheduleSave(); } else { styleText('hiliteColor', color); tidy(content(editing)); }
+    return;
+  }
+  for (const b of sel) {
+    if (isMedia(b) || isLine(b)) continue;
+    if (color === 'transparent') clear(content(b)); else onWholeText(b, () => document.execCommand('hiliteColor', false, color));
+    tidy(content(b));
+  }
+  commit();
+}
+
+/* Paint format: copy the selected box's (or selected text's) style, then click a box or select text to apply
+   it. Double-clicking the button keeps it on until Esc or another click on the button. */
+let paint = null;
+const TEXT_KEYS = ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'color', 'textAlign', 'lineHeight', 'padding'];
+function captureStyle() {
+  const b = editing || [...sel][0];
+  if (!b) return null;
+  const fromText = editing && lastRange && !lastRange.collapsed;
+  const node = fromText ? lastRange.startContainer : content(b).querySelector('span, b, i, u, a') || content(b);
+  const el = node.nodeType === 1 ? node : node.parentElement, cs = getComputedStyle(el);
+  return {
+    text: { bold: +cs.fontWeight >= 600, italic: cs.fontStyle === 'italic', underline: cs.textDecorationLine.includes('underline'),
+            strike: cs.textDecorationLine.includes('line-through'), color: toHex(cs.color, '#222222'), font: cs.fontFamily,
+            hilite: el.closest('[style*="background"]')?.style.backgroundColor || 'transparent' },
+    box: fromText ? null : {
+      vars: Object.fromEntries(['--fill', '--stroke', '--sw'].map(k => [k, b.style.getPropertyValue(k)])),
+      shadow: 'shadow' in b.dataset, valign: b.dataset.valign,
+      content: Object.fromEntries(TEXT_KEYS.map(k => [k, content(b).style[k]])),
+    },
+  };
+}
+function startPaint(locked) {
+  const style = captureStyle();
+  if (!style) return;
+  paint = { ...style, locked };
+  document.body.classList.add('painting'); $('#ed-paint-format').classList.add('on');
+}
+/* ⌥⌘C / ⌥⌘V: copy the selection's formatting, apply it to another selection (paint format without clicking). */
+let copiedFormat = null;
+function copyFormat() { copiedFormat = captureStyle(); if (copiedFormat) setStatus('Formatting copied'); }
+function pasteFormat() {
+  if (!copiedFormat) return;
+  const was = paint; paint = copiedFormat;
+  const s = editing && editSelection();
+  if (s && !s.isCollapsed) { paintSelection(); scheduleSave(); }
+  else { sel.forEach(paintBox); drawOverlay(); commit(); }
+  paint = was;
+}
+function endPaint() { paint = null; document.body.classList.remove('painting'); $('#ed-paint-format').classList.remove('on'); }
+function paintBox(b) {
+  const { box, text } = paint;
+  if (box) {
+    for (const [k, v] of Object.entries(box.vars)) if (v) b.style.setProperty(k, v); else b.style.removeProperty(k);
+    if (box.shadow) b.dataset.shadow = ''; else delete b.dataset.shadow;
+    if (box.valign) b.dataset.valign = box.valign; else delete b.dataset.valign;
+    if (!isMedia(b) && !isLine(b)) Object.assign(content(b).style, box.content);
+    if (b.dataset.shape) renderShape(b);
+    shadeBox(b);
+  } else if (!isMedia(b) && !isLine(b)) {
+    const c = content(b).style;
+    c.fontWeight = text.bold ? 'bold' : ''; c.fontStyle = text.italic ? 'italic' : ''; c.color = text.color; c.fontFamily = text.font;
+    c.textDecoration = [text.underline && 'underline', text.strike && 'line-through'].filter(Boolean).join(' ');
+  }
+  fitHeight(b);
+}
+function paintSelection() {
+  const t = paint.text, set = (cmd, want) => { if (document.queryCommandState(cmd) !== want) document.execCommand(cmd); };
+  document.execCommand('styleWithCSS', false, 'true');
+  set('bold', t.bold); set('italic', t.italic); set('underline', t.underline); set('strikeThrough', t.strike);
+  document.execCommand('foreColor', false, t.color); document.execCommand('fontName', false, t.font);
+  document.execCommand('hiliteColor', false, t.hilite);
+  const s = getSelection(); if (s.rangeCount) lastRange = s.getRangeAt(0).cloneRange();
+  fitHeight(editing);
+}
+$('#ed-paint-format').onclick = () => { if (paint && !paint.locked) endPaint(); else if (!paint) startPaint(false); };
+$('#ed-paint-format').ondblclick = () => { endPaint(); startPaint(true); };
+addEventListener('keydown', e => { if (paint && e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); endPaint(); } }, true);
+addEventListener('pointerup', () => {   // painting onto text selected inside the box being edited
+  if (!paint || !editing) return;
+  const s = getSelection();
+  if (s.rangeCount && !s.isCollapsed && content(editing).contains(s.anchorNode)) { paintSelection(); if (!paint.locked) endPaint(); }
+});
+
+/* Toggle a list: on the selection while editing, otherwise on the whole box (edit, select all, apply). */
+function listText(cmd) {
+  const b = editing || (sel.size === 1 ? [...sel][0] : null);
+  if (!b || isMedia(b) || isLine(b)) return;
+  const was = !!editing;
+  if (!was) startEdit(b);
+  else if (lastRange) { const s = getSelection(); s.removeAllRanges(); s.addRange(lastRange); }
+  document.execCommand(cmd);
+  // Chrome copies computed font-family / transparent backgrounds inline when unlisting; drop the no-ops.
+  content(b).querySelectorAll('[style]').forEach(e => {
+    if (e.style.backgroundColor === 'rgba(0, 0, 0, 0)') e.style.backgroundColor = '';
+    const f = e.style.fontFamily;
+    if (f) { const was = getComputedStyle(e).fontFamily; e.style.fontFamily = ''; if (getComputedStyle(e).fontFamily !== was) e.style.fontFamily = f; }
+    if (!e.getAttribute('style')) e.removeAttribute('style');
+  });
+  // Chrome puts the list inside an <a> that wrapped the whole text; move the link onto each item instead.
+  content(b).querySelectorAll('a > ul, a > ol').forEach(list => {
+    const a = list.parentElement;
+    list.querySelectorAll(':scope > li').forEach(li => { const l = a.cloneNode(false); l.append(...li.childNodes); li.append(l); });
+    a.replaceWith(...a.childNodes);
+  });
+  const s = getSelection(); if (s.rangeCount) lastRange = s.getRangeAt(0).cloneRange();
+  fitHeight(b);
+  if (!was) stopEdit();
+}
+
+/* The selection to act on while editing: the live one if it's in the box, else the last one seen there
+   (a toolbar or menu click can move it). */
+function editSelection() {
+  const s = getSelection();
+  if (!(s.rangeCount && content(editing).contains(s.anchorNode)) && lastRange) { s.removeAllRanges(); s.addRange(lastRange); }
+  return s;
+}
+
+/* Indent / outdent, as Slides: inside a list it nests or un-nests the items (Tab / ⇧Tab, ⌘] / ⌘[);
+   for plain text it steps the box's left padding. Without a text selection it acts on whole boxes. */
+const INDENT = 48;
+function indentText(dir) {
+  const cmd = dir > 0 ? 'indent' : 'outdent';
+  const pad = b => { const c = content(b), p = parseFloat(getComputedStyle(c).paddingLeft); c.style.paddingLeft = Math.max(16, p + dir * INDENT) + 'px'; };
+  if (editing) {
+    const s = editSelection();
+    const at = s.anchorNode?.nodeType === 1 ? s.anchorNode : s.anchorNode?.parentElement;
+    if (at?.closest('li')) { document.execCommand('styleWithCSS', false, 'false'); document.execCommand(cmd); if (s.rangeCount) lastRange = s.getRangeAt(0).cloneRange(); }
+    else pad(editing);
+    fitHeight(editing); scheduleSave(); return;
+  }
+  for (const b of sel) {
+    if (isMedia(b) || isLine(b)) continue;
+    if (content(b).querySelector('li')) onWholeText(b, () => { document.execCommand('styleWithCSS', false, 'false'); document.execCommand(cmd); });
+    else pad(b);
+    fitHeight(b);
+  }
+  commit();
+}
+
+/* List styles from Format → Bullets & numbering: set list-style-type on the list(s) — the one holding the
+   caret while editing, otherwise every list of that kind in the selected boxes (making one if needed). */
+const BULLETS = [['disc', '●  ○  ■'], ['circle', '○'], ['square', '■'], ['"➤  "', '➤'], ['"✓  "', '✓'], ['"–  "', '–']];
+const NUMBERS = [['decimal', '1.  2.  3.'], ['lower-alpha', 'a.  b.  c.'], ['lower-roman', 'i.  ii.  iii.'], ['upper-alpha', 'A.  B.  C.'], ['upper-roman', 'I.  II.  III.']];
+function setListStyle(tag, type) {
+  const cmd = tag === 'ul' ? 'insertUnorderedList' : 'insertOrderedList';
+  const style = l => { if (['disc', 'decimal'].includes(type)) l.style.listStyleType = ''; else l.style.listStyleType = type; if (!l.getAttribute('style')) l.removeAttribute('style'); };
+  if (editing) {
+    const s = editSelection();
+    const at = () => (s.anchorNode?.nodeType === 1 ? s.anchorNode : s.anchorNode?.parentElement)?.closest('ul, ol');
+    if (at()?.tagName.toLowerCase() !== tag) listText(cmd);
+    const l = at(); if (l) style(l);
+    scheduleSave(); return;
+  }
+  for (const b of sel) {
+    if (isMedia(b) || isLine(b)) continue;
+    if (!content(b).querySelector(tag)) { sel = new Set([b]); listText(cmd); }
+    content(b).querySelectorAll(tag).forEach(l => { if (!l.parentElement.closest(tag)) style(l); });
+  }
+  commit();
+}
+
+/* ⌘K: link the selected text (whole box if not editing). An empty URL removes the link. */
+function linkText() {
+  const b = editing || (sel.size === 1 ? [...sel][0] : null);
+  if (!b || isMedia(b) || isLine(b)) return;
+  const was = !!editing;
+  if (!was) startEdit(b);
+  else if (lastRange) { const s = getSelection(); s.removeAllRanges(); s.addRange(lastRange); }
+  const s = getSelection();
+  if (!s.rangeCount || s.isCollapsed) { if (!was) stopEdit(); return; }
+  const range = s.getRangeAt(0).cloneRange();
+  const cur = s.anchorNode?.parentElement?.closest('a')?.getAttribute('href') || '';
+  const url = prompt('Link URL', cur || 'https://');
+  if (url === null) { if (!was) stopEdit(); return; }
+  s.removeAllRanges(); s.addRange(range);   // the prompt may have cleared the selection
+  if (url.trim() && url.trim() !== 'https://') document.execCommand('createLink', false, url.trim());
+  else document.execCommand('unlink');
+  if (s.rangeCount) lastRange = s.getRangeAt(0).cloneRange();
+  if (!was) stopEdit();
+}
+
+/* ⌘\: clear formatting. On a selection: the browser's removeFormat + unlink. On whole boxes: drop the
+   text styles set on .content and unwrap every inline styling element, keeping lists and line breaks. */
+function clearFormat() {
+  if (editing && lastRange && !lastRange.collapsed) {
+    const s = getSelection(); s.removeAllRanges(); s.addRange(lastRange);
+    document.execCommand('removeFormat'); document.execCommand('unlink');
+    if (s.rangeCount) lastRange = s.getRangeAt(0).cloneRange();
+    fitHeight(editing);
+    return;
+  }
+  for (const b of sel) {
+    if (isMedia(b) || isLine(b)) continue;
+    const c = content(b);
+    ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'verticalAlign', 'color', 'lineHeight', 'textAlign'].forEach(k => { c.style[k] = ''; });
+    if (!c.getAttribute('style')) c.removeAttribute('style');
+    c.querySelectorAll('span, b, strong, i, em, u, s, strike, sup, sub, a, font').forEach(e => e.replaceWith(...e.childNodes));
+    c.querySelectorAll('[style]').forEach(e => e.removeAttribute('style'));
+    c.normalize();
+    fitHeight(b);
+  }
+  commit();
+}

glideshow/editor/js/theme-toggle.js

@@ -0,0 +1,41 @@
+/* The light / dark switch (a sun or moon button in the top bar, and View → Dark mode): the new theme spreads from the
+   button in a circle (the View Transitions API), the icon turning as it goes. Instant where the browser lacks it or the
+   system asks for reduced motion. The editor already has darkOn / setDark (js/notes.js); the home screen gets them here.
+   The choice is the same one in both, remembered in this browser (slides-dark), else the system's. */
+if (typeof setDark !== 'function') {   // the home screen
+  const key = 'slides-dark', saved = () => { try { return localStorage.getItem(key); } catch { return null; } };
+  const sys = matchMedia('(prefers-color-scheme: dark)');
+  window['darkOn'] = () => { const v = saved(); return v ? v === '1' : sys.matches; };
+  window['setDark'] = on => { try { localStorage.setItem(key, on ? '1' : '0'); } catch {} document.body.classList.toggle('dark', on); };
+  document.body.classList.toggle('dark', darkOn());
+  sys.addEventListener('change', () => { if (!saved()) document.body.classList.toggle('dark', darkOn()); });
+}
+{
+  const btn = document.createElement('button');
+  btn.id = 'theme-toggle'; btn.type = 'button';
+  const label = () => {
+    const dark = document.body.classList.contains('dark'), tip = dark ? 'Light mode' : 'Dark mode';
+    btn.innerHTML = `<span class="icon">${dark ? 'light_mode' : 'dark_mode'}</span>`;
+    btn.setAttribute('aria-label', tip); btn.dataset.tip = tip; if (!document.querySelector('#ed-bar')) btn.title = tip;   // the editor's tooltips read data-tip
+  };
+  const setDark0 = setDark;
+  window['setDark'] = on => {
+    const apply = () => { setDark0(on); label(); };
+    if (on === document.body.classList.contains('dark')) return apply();
+    if (!document.startViewTransition || !navigator.userActivation?.isActive || matchMedia('(prefers-reduced-motion: reduce)').matches || !btn.getClientRects().length) return apply();   // animated only for a click (button or menu); a script's call is immediate
+    const r = btn.getBoundingClientRect(), x = r.left + r.width / 2, y = r.top + r.height / 2;
+    const end = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+    document.documentElement.classList.add('theme-turning');
+    const t = document.startViewTransition(apply);
+    t.ready.then(() => document.documentElement.animate(
+      { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${end}px at ${x}px ${y}px)`] },
+      { duration: 700, easing: 'cubic-bezier(.65, 0, .35, 1)', pseudoElement: '::view-transition-new(root)' })).catch(() => {});
+    t.finished.finally(() => document.documentElement.classList.remove('theme-turning'));
+  };
+  btn.onclick = () => setDark(!document.body.classList.contains('dark'));
+  label();
+  if (document.querySelector('#ed-comments-btn')) { btn.className = 'icon-btn'; document.querySelector('#ed-comments-btn').after(btn); }
+  else {   // the home screen: in the top bar's last item (.hm-end), between GitHub and More
+    btn.className = 'hm-tool'; document.querySelector('#hm-app-more').before(btn);
+  }
+}

glideshow/editor/js/theme.js

@@ -0,0 +1,173 @@
+/* Themes, as Slides' Themes panel: a deck font, title / body sizes and colours, and a background, kept as CSS variables in a
+   marked block of <style id="deck-theme"> (the rest of that style stays the author's). Text without its own font / colour /
+   size inherits them; layout placeholders size from them; slides still on the old theme background get the new one. */
+const THEMES = window.THEMES;   // editor/themes.js, shared with the home screen's template gallery
+const THEME_RE = /\/\* slides-theme (\{.*?\}) \*\/[\s\S]*?\/\* end slides-theme \*\/\n?/;
+function theme() {
+  const m = (deckDoc?.querySelector('#deck-theme')?.textContent || '').match(THEME_RE);
+  let t;
+  try { t = m ? { ...THEMES[0], ...JSON.parse(m[1]) } : { ...THEMES[0], implicit: true }; } catch { t = { ...THEMES[0], implicit: true }; }
+  // a size that didn't measure (saved as null by an older Edit theme) falls back to Simple Light's, so placeholders never collapse
+  for (const k of ['titleSize', 'bodySize']) if (!(t[k] > 0)) t[k] = THEMES[0][k];
+  if (t.layouts) t.layouts = Object.fromEntries(Object.entries(t.layouts).filter(([, bs]) => bs.every(b => b[5] > 0)));
+  return t;
+}
+const themeCSS = t => `/* slides-theme ${JSON.stringify({ name: t.name, font: t.font, titleSize: t.titleSize, bodySize: t.bodySize, title: t.title, text: t.text, bg: t.bg, ...(t.layouts ? { layouts: t.layouts } : {}) })} */
+.slides { --th-title-size: ${Math.round(t.titleSize * PT * 100) / 100}px; --th-body-size: ${Math.round(t.bodySize * PT * 100) / 100}px; }
+.box > .content { font-family: ${t.font}; color: ${t.text}; }
+.box[data-role="title"] > .content { color: ${t.title}; }
+/* end slides-theme */
+`;
+function setTheme(t) {
+  const old = theme(), el = deckDoc.querySelector('#deck-theme') || deckDoc.head.appendChild(Object.assign(deckDoc.createElement('style'), { id: 'deck-theme' }));
+  const css = el.textContent.replace(THEME_RE, '');
+  el.textContent = themeCSS(t) + css.replace(/^\n+/, '\n');
+  $('#ed-deck-theme-live').textContent = el.textContent;
+  for (const sl of slides) if (!sl.dataset.backgroundColor || sl.dataset.backgroundColor.toLowerCase() === old.bg.toLowerCase()) sl.dataset.backgroundColor = t.bg;
+  render(); commit(); scheduleSave(); updateThemePanel();
+}
+function setThemePanel(open) { $('#ed-theme').hidden = !open; if (open) { fmt.hidden = true; $('#ed-trans').hidden = true; $('#ed-comments').hidden = true; updateThemePanel(); } fit(); }
+function updateThemePanel() {
+  if ($('#ed-theme').hidden) return;
+  const t = theme();
+  $('#ed-theme-list').replaceChildren(...THEMES.map(p => {
+    const c = div('theme-card' + (p.name === t.name && !t.implicit || (t.implicit && p === THEMES[0]) ? ' on' : ''));
+    c.innerHTML = `<div class="theme-pic" style="background:${p.bg};font-family:${p.font.replace(/"/g, "'")}"><b style="color:${p.title}">Click to add title</b><small style="color:${p.text}">Click to add subtitle</small></div><span></span>`;
+    c.lastChild.textContent = p.name; c.onclick = () => setTheme({ ...p }); return c;
+  }));
+  F2('font').replaceChildren(...FONTS.filter(f => f[0]).map(([v, l]) => Object.assign(document.createElement('option'), { value: v, textContent: l })));
+  F2('font').value = t.font; F2('title-size').value = t.titleSize; F2('body-size').value = t.bodySize; F2('title').value = t.title; F2('text').value = t.text; F2('bg').value = t.bg;
+}
+const F2 = id => $('#ed-th-' + id);
+for (const [id, key, num] of [['font', 'font'], ['title-size', 'titleSize', 1], ['body-size', 'bodySize', 1], ['title', 'title'], ['text', 'text'], ['bg', 'bg']])
+  F2(id).onchange = () => setTheme({ ...theme(), name: 'Custom', [key]: num ? Math.max(4, +F2(id).value || 0) : F2(id).value });
+$('#ed-theme-btn').onclick = () => setThemePanel($('#ed-theme').hidden);
+$('#ed-layout-btn').onclick = () => openAnchor === $('#ed-layout-btn') ? closeMenu() : openMenu($('#ed-layout-btn'), layoutItems);   // the layout grid, as Slides' toolbar
+$('#ed-theme-close').onclick = () => setThemePanel(false);
+
+/* Slide → Edit theme, as Slides' theme builder: the filmstrip becomes the theme (master) and its layouts, each an editable
+   slide of placeholders. Move, resize and style them with the usual tools; on leaving, the layouts' geometry and sizes and the
+   master's title / body size and colour are written to the theme. Reapply to all re-lays the deck's slides of that layout. */
+let themeStash = null, reapply = new Set();
+const SAMPLE = { title: 'Click to edit theme title style', sub: 'Click to edit theme subtitle style', body: 'Click to edit theme text style' };
+function enterThemeEdit() {
+  if (themeStash) return;
+  stopEdit(); closeMenu(); setGrid(false);
+  const t = theme(), keep = slides[cur]?.dataset.layout;
+  themeStash = { slides, cur }; reapply = new Set();
+  const master = blankSlide(); master.dataset.edTheme = 'master'; master.dataset.backgroundColor = t.bg;
+  for (const [role, y, h] of [['title', 93, 122], ['body', 242, 721]]) {
+    const b = makeBox({ x: 65, y, w: 1790, h, html: role === 'title' ? SAMPLE.title : '<ul><li>First level</li><li>Second level</li></ul>' });
+    b.dataset.role = String(role); b.dataset.valign = 'top'; content(b).style.fontSize = Math.round((role === 'title' ? t.titleSize : t.bodySize) * PT * 100) / 100 + 'px';
+    if (role === 'title') content(b).style.color = t.title; master.append(b);
+  }
+  const lays = LAYOUTS.filter(l => l[0] !== 'blank').map(l => {
+    const s = blankSlide(l[0]); s.dataset.edTheme = String(l[0]);
+    boxes(s).forEach(b => { content(b).textContent = SAMPLE[b.dataset.role] || SAMPLE.body; delete b.dataset.placeholder; });
+    return s;
+  });
+  slides = [master, ...lays]; cur = Math.max(0, slides.findIndex(s => s.dataset.edTheme === keep));
+  document.body.classList.add('theme-mode'); $('#ed-theme-bar').hidden = false; sel.clear(); render(); fit();
+}
+function exitThemeEdit() {
+  if (!themeStash) return;
+  stopEdit();
+  // font sizes are measured, and only the shown slide is in the page: measure the others from a hidden copy on the canvas
+  const shown = s => { if (s.isConnected) return s; const c = s.cloneNode(true); c.classList.add('measure'); c.style.visibility = 'hidden'; canvas.append(c); return c; };
+  const t = theme(), px = b => parseFloat(getComputedStyle(content(b)).fontSize), r1 = v => Math.round(v * 10) / 10, layouts = { ...(t.layouts || {}) };
+  const master = shown(slides.find(s => s.dataset.edTheme === 'master')), mt = boxes(master).find(b => b.dataset.role === 'title'), mb = boxes(master).find(b => b.dataset.role === 'body');
+  const next = { ...t, titleSize: mt ? r1(px(mt) / PT) : t.titleSize, bodySize: mb ? r1(px(mb) / PT) : t.bodySize, title: mt ? toHex(getComputedStyle(content(mt)).color, t.title) : t.title };
+  for (const s of slides.filter(s => s.dataset.edTheme && s.dataset.edTheme !== 'master').map(shown)) {
+    layouts[s.dataset.edTheme] = boxes(s).filter(b => b.dataset.role).map(b => { const g = geo(b), c = content(b), [ts, bs] = [next.titleSize, next.bodySize];
+
+      // sizes are kept relative to the master's title / body sizes, so a later theme size change still scales them
+      const pt = px(b) / PT, rel = b.dataset.role === 'title' ? pt / ts * 28 : pt / bs * 18;
+      return [b.dataset.role, Math.round(g.x), Math.round(g.y), Math.round(g.w), Math.round(g.h), r1(rel), b.dataset.valign || 'middle', c.style.textAlign || 'left']; });
+  }
+  canvas.querySelectorAll(':scope > section.measure').forEach(c => c.remove());
+  slides = themeStash.slides; cur = themeStash.cur; themeStash = null;
+
+  document.body.classList.remove('theme-mode'); $('#ed-theme-bar').hidden = true;
+  next.layouts = layouts; next.name = t.name === 'Custom' || t.implicit ? 'Custom' : t.name;
+  setTheme(next);
+  for (const name of reapply) slides.filter(s => s.dataset.layout === name).forEach(s => applyLayout(s, name));
+  if (reapply.size) { render(); commit(); }
+  fit();
+}
+function updateThemeBar() {
+  if (!themeStash) return;
+  const s = slides[cur], name = s?.dataset.edTheme, lay = LAYOUTS.find(l => l[0] === name), used = themeStash.slides.filter(x => x.dataset.layout === name).length;
+  $('#ed-theme-what').innerHTML = `Editing: <b></b> <span class="muted"></span>`;
+  $('#ed-theme-what b').textContent = `${theme().name} - ${name === 'master' ? 'Theme' : lay?.[1] || ''}`;
+  $('#ed-theme-what span').textContent = name === 'master' ? '' : `(Used by ${used} slide${used === 1 ? '' : 's'})`;
+  $('#ed-theme-reapply').hidden = name === 'master';
+}
+$('#ed-theme-done').onclick = exitThemeEdit;
+$('#ed-theme-reapply').onclick = () => { const n = slides[cur]?.dataset.edTheme; if (n) { reapply.add(n); setStatus('Will reapply this layout to its slides on closing'); } };
+
+/* Layouts, as Slides' Simple Light theme: placeholder text boxes (data-placeholder, grey "Click to add title" while empty,
+   kept when left empty, hidden in decks until filled) at the theme's positions on the 1920×1080 canvas. */
+const PH = { title: 'Click to add title', sub: 'Click to add subtitle', body: 'Click to add text' };
+const LAYOUTS = [
+  ['title', 'Title slide', [['title', 65, 152, 1790, 431, 52, 'bottom', 'center'], ['sub', 65, 590, 1790, 166, 28, 'top', 'center']]],
+  ['section', 'Section header', [['title', 65, 452, 1790, 172, 36, 'middle', 'center']]],
+  ['title-body', 'Title and body', [['title', 65, 93, 1790, 122, 28, 'top', 'left'], ['body', 65, 242, 1790, 721, 18, 'top', 'left']]],
+  ['two-columns', 'Title and two columns', [['title', 65, 93, 1790, 122, 28, 'top', 'left'], ['body', 65, 242, 841, 721, 18, 'top', 'left'], ['body', 1013, 242, 841, 721, 18, 'top', 'left']]],
+  ['title-only', 'Title only', [['title', 65, 93, 1790, 122, 28, 'top', 'left']]],
+  ['one-column', 'One column text', [['title', 65, 117, 600, 160, 24, 'bottom', 'left'], ['body', 65, 292, 600, 590, 18, 'top', 'left']]],
+  ['main-point', 'Main point', [['title', 65, 169, 1545, 742, 48, 'middle', 'left']]],
+  ['section-description', 'Section title and description', [['title', 108, 259, 812, 311, 42, 'bottom', 'left'], ['sub', 108, 589, 812, 259, 21, 'top', 'left'], ['body', 1037, 152, 815, 776, 18, 'middle', 'left']]],
+  ['caption', 'Caption', [['body', 65, 888, 1260, 127, 14, 'middle', 'left']]],
+  ['big-number', 'Big number', [['title', 65, 232, 1790, 413, 120, 'bottom', 'center'], ['body', 65, 662, 1790, 273, 18, 'top', 'center']]],
+  ['blank', 'Blank', []],
+];
+function applyLayout(s, name) {
+  const lay = LAYOUTS.find(l => l[0] === name); if (!lay) return;
+  const boxesOf = theme().layouts?.[name] || lay[2];   // edited in Slide → Edit theme, else Simple Light's
+  const old = boxes(s).filter(b => b.dataset.placeholder), kept = { title: [], sub: [], body: [] };
+  old.forEach(b => { const r = b.dataset.role || 'body'; if (content(b).textContent.trim()) kept[r].push(content(b).innerHTML); b.remove(); });
+  for (const [role, x, y, w, h, pt, va, ta] of boxesOf) {
+    const b = makeBox({ x, y, w, h, html: kept[role].shift() || '' });
+    b.dataset.placeholder = PH[role]; b.dataset.role = String(role); if (va !== 'middle') b.dataset.valign = va;
+    // sizes follow the theme: Title and body's title / body sizes are 28 / 18 pt, other layouts scale from them
+    const [v, base] = role === 'title' ? ['--th-title-size', 28] : ['--th-body-size', 18];
+    Object.assign(content(b).style, { fontSize: `calc(var(${v}, ${Math.round(base * PT * 100) / 100}px) * ${Math.round(pt / base * 1000) / 1000})`, textAlign: ta });
+    s.insertBefore(b, s.querySelector(':scope > .box:not([data-placeholder])'));
+  }
+  s.dataset.layout = name;
+}
+/* In Thermal a layout's picture is a wireframe rather than Slides' outlines and prompts: its title a canopy-blue bar
+   (a large one for a big number), a subtitle a shorter grey bar, body text a few soft lines, aligned as the layout
+   aligns them; coloured by thermal.css (.lp-*). */
+function layoutWire(lay) {
+  const bar = (x, y, w, h, cls) => `<rect class="${cls}" x="${Math.round(x)}" y="${Math.round(y)}" width="${Math.round(w)}" height="${Math.round(h)}" rx="${Math.round(h / 2)}"/>`;
+  const at = (x, w, bw, align) => align === 'center' ? x + (w - bw) / 2 : x + 40;
+  const parts = lay[2].map(([role, x, y, w, h, pt, valign, align]) => {
+    if (role === 'title') {
+      const big = lay[0] === 'big-number', bh = big ? Math.min(h - 40, 260) : Math.min(h - 30, pt >= 40 ? 120 : 84), bw = big ? Math.min(w * .32, 560) : Math.min(w - 80, w * (lay[0] === 'main-point' ? .7 : .55));
+      const by = valign === 'bottom' ? y + h - bh - 20 : valign === 'middle' ? y + (h - bh) / 2 : y + 18;
+      return bar(at(x, w, bw, align), by, bw, bh, 'lp-title');
+    }
+    if (role === 'sub') { const bw = Math.min(w - 80, w * .4), bh = Math.min(h - 30, 56); return bar(at(x, w, bw, align), valign === 'top' ? y + 22 : y + (h - bh) / 2, bw, bh, 'lp-sub'); }
+    const n = Math.max(1, Math.min(4, Math.floor((h - 40) / 110))), lh = 40, step = Math.min(110, (h - 40) / n), widths = [.86, .72, .8, .6];
+    const top = valign === 'middle' ? y + (h - n * step) / 2 + (step - lh) / 2 : y + 30;
+    return `<rect class="lp-box" x="${x}" y="${y}" width="${w}" height="${h}" rx="28"/>` + widths.slice(0, n).map((f, i) => bar(at(x, w, (w - 80) * f, align), top + i * step, (w - 80) * f, lh, 'lp-line')).join('');
+  });
+  return `<svg class="lp" viewBox="0 0 1920 1080" width="140" height="79"><rect class="lp-bg" width="1920" height="1080"/>` +
+    (lay[0] === 'section-description' ? '<rect class="lp-pane" x="960" width="960" height="1080"/>' : '') + parts.join('') + '</svg>';
+}
+const layoutPic = lay => document.documentElement.dataset.look === 'thermal' ? layoutWire(lay) : `<svg viewBox="0 0 1920 1080" width="120" height="68"><rect width="1920" height="1080" fill="#fff" stroke="#c7c7c7" stroke-width="12"/>` +
+  (lay[0] === 'section-description' ? '<rect x="960" width="960" height="1080" fill="#eee"/>' : '') +
+  lay[2].map(([role, x, y, w, h]) => `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="none" stroke="#9aa0a6" stroke-width="8"/>`
+    + `<text x="${x + 30}" y="${y + Math.min(h / 2 + 30, 110)}" font-size="${role === 'title' ? 90 : 60}" fill="#5f6368" font-family="Arial">${role === 'title' ? 'Click to add title' : ''}</text>`).join('') + '</svg>';
+const layoutItems = () => LAYOUTS.map(lay => ({ label: lay[1], tile: true, svg: layoutPic(lay), on: () => slides[cur]?.dataset.layout === lay[0],
+  run: () => slideOp(() => applyLayout(slides[cur], lay[0])) }));
+
+function addText(text = 'Text', at) {
+  const w = 800, h = 160;
+  const b = makeBox({ x: (at?.x ?? W / 2) - w / 2, y: (at?.y ?? H / 2) - h / 2, w, h });
+  b.dataset.minh = String(h);
+  content(b).textContent = text;
+  insert(b);
+  return b;
+}