glideshow 0.1.2__py3-none-any.whl

glideshow/editor/js/boxes.js

@@ -0,0 +1,25 @@
+/* ---------- creating boxes ---------- */
+
+/** @param {{ x: any, y: any, w: any, h: any, shape?: string, html?: string, cls?: string }} o */
+function makeBox({ x, y, w, h, shape, html = '', cls = '' }) {
+  const b = div(('box ' + cls).trim());
+  b.id = uid();
+  if (shape) b.dataset.shape = shape;
+  const c = div('content'); c.innerHTML = html; b.append(c);
+  // Slides' default text insets: 0.1 in left / right, 0.05 in top / bottom (base.css keeps 16 / 8 px, so older decks don't move)
+  if (!/\b(image|video)\b/.test(cls) && !/^(line|arrowline|elbow|curve|path)$/.test(shape || '')) c.style.padding = INSET;
+  setGeo(b, { x, y, w, h });
+  return b;
+}
+const INSET = "9.6px 19.2px";   // 0.05 in, 0.1 in at 192 px per inch
+function insert(...bs) {
+  slides[cur].append(...bs);
+  sel = new Set(bs);
+  drawOverlay(); commit();
+}
+function blankSlide(layout) {
+  const s = document.createElement('section');
+  s.dataset.backgroundColor = theme().bg;
+  if (layout) applyLayout(s, layout);
+  return s;
+}

glideshow/editor/js/comments.js

@@ -0,0 +1,85 @@
+/* ---------- comments ---------- */
+/* Comments people left on a shared deck (glideshow.org/p/…), or added here: comments.json beside deck.html, through
+   /api/comments. The panel lists them (this slide's first); a pin marks each one on its slide; clicking one goes to its
+   slide and selects the box it was left on. ⌘⌥M (Slides' Insert comment) comments on the selection or the slide. */
+const cmPanel = $('#ed-comments'), pins = $('#ed-pins');
+let cmList = [], cmDraft = null;
+const cmAgo = t => { const s = (Date.now() - Date.parse(t)) / 1000; return s < 60 ? 'just now' : s < 3600 ? `${Math.floor(s / 60)} min ago` : s < 86400 ? `${Math.floor(s / 3600)} h ago` : new Date(t).toLocaleDateString([], { month: 'short', day: 'numeric' }); };
+const cmEl = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
+
+async function cmFetch(body) {
+  const r = await fetch('/api/comments', body ? { method: 'POST', body: JSON.stringify(body) } : { cache: 'no-store' }).then(r => r.json()).catch(() => null);
+  if (Array.isArray(r?.comments)) cmList = r.comments;
+  if (r?.error && body) setStatus(r.error, 'error');
+  cmRender();
+}
+function setCommentsPanel(open) {
+  cmPanel.hidden = !open; $('#ed-comments-btn').classList.toggle('on', open);
+  if (open) { fmt.hidden = true; $('#ed-trans').hidden = true; $('#ed-theme').hidden = true; $('#ed-history').hidden = true; cmFetch(); }
+  fit(); drawPins();
+}
+function cmRender() {
+  const open = cmList.filter(c => !c.resolved), showDone = $('#ed-cm-resolved').checked;
+  $('#ed-comments-n').textContent = open.length || '';
+  drawPins();
+  if (cmPanel.hidden) return;
+  const here = cur + 1, list = cmList.filter(c => showDone || !c.resolved).sort((a, b) => +(b.slide === here) - +(a.slide === here) || a.slide - b.slide || a.at.localeCompare(b.at));
+  const out = [];
+  if (cmDraft) out.push(cmComposer());
+  for (const c of list) {
+    const card = cmEl('div', 'cm-card' + (cmN(c) === here ? ' here' : '') + (c.resolved ? ' done' : ''));
+    const top = cmEl('div', 'cm-top'); top.append(cmEl('span', '', `Slide ${cmN(c)}`), cmEl('span', '', cmAgo(c.at))); card.append(top);
+    if (c.quote) card.append(cmEl('div', 'cm-quote', c.quote));
+    card.append(cmEl('div', 'cm-by', c.by?.n || c.by?.e || ''), cmEl('div', 'cm-text', c.text));
+    for (const r of c.replies || []) { const d = cmEl('div', 'cm-reply' + (r.event ? ' event' : '')); d.append(cmEl('b', '', (r.by?.n || r.by?.e || '') + ' '), r.text); card.append(d); }
+    const acts = cmEl('div', 'cm-acts'), reply = cmEl('input'); reply.placeholder = 'Reply';
+    reply.onkeydown = e => { e.stopPropagation(); if (e.key === 'Enter' && reply.value.trim()) cmFetch({ op: 'reply', id: c.id, text: reply.value }); };
+    const res = cmEl('button', '', c.resolved ? 'Reopen' : 'Resolve'); res.onclick = e => { e.stopPropagation(); cmFetch({ op: 'resolve', id: c.id, resolved: !c.resolved }); };
+    const del = cmEl('button', '', 'Delete'); del.onclick = e => { e.stopPropagation(); if (confirm('Delete this comment and its replies?')) cmFetch({ op: 'delete', id: c.id }); };
+    acts.append(reply, res, del); card.append(acts);
+    card.onclick = e => { if (!e.target.closest('input, button, textarea')) cmShow(c); };
+    out.push(card);
+  }
+  if (!out.length) out.push(cmEl('div', 'cm-empty', cmList.length ? 'All comments are resolved.' : 'No comments yet. People you share the deck with can comment on it; you can add your own with Comment (⌘⌥M).'));
+  $('#ed-cm-list').replaceChildren(...out);
+}
+/* A comment's slide (1-based): the one with its data-sid, wherever slides have moved since; else the number it was left on. */
+function cmN(c) { const i = c.sid ? slides.findIndex(s => s.dataset.sid === c.sid) : -1; return i >= 0 ? i + 1 : c.slide; }
+function cmShow(c) {   // its slide, with the box it was left on selected
+  if (cmN(c) - 1 !== cur) go(Math.min(slides.length - 1, cmN(c) - 1));
+  const b = c.box && boxes().find(x => x.id === c.box);
+  if (b) { sel = new Set([b]); render(); }
+}
+function cmComposer() {
+  const card = cmEl('div', 'cm-card here'), ta = cmEl('textarea'); ta.rows = 3; ta.placeholder = `Comment on slide ${cmDraft.slide}`;
+  const acts = cmEl('div', 'cm-acts'), ok = cmEl('button', '', 'Comment'), no = cmEl('button', '', 'Cancel');
+  ok.onclick = () => { if (ta.value.trim()) { const d = cmDraft; cmDraft = null; cmFetch({ op: 'add', ...d, text: ta.value }); } };
+  no.onclick = () => { cmDraft = null; cmRender(); };
+  ta.onkeydown = e => { e.stopPropagation(); if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) ok.click(); if (e.key === 'Escape') no.click(); };
+  if (cmDraft.quote) card.append(cmEl('div', 'cm-quote', cmDraft.quote));
+  acts.append(ok, no); card.append(ta, acts); setTimeout(() => ta.focus());
+  return card;
+}
+function addComment() {   // on the selected box (its top-right corner), else the slide's top-left
+  const b = [...sel][0], g = b && geo(b);
+  cmDraft = { slide: cur + 1, sid: slides[cur]?.dataset.sid || '', box: b?.id || '', x: g ? g.x + g.w : 80, y: g ? g.y + 8 : 80, quote: (b ? content(b)?.innerText || '' : '').replace(/\s+/g, ' ').trim().slice(0, 120) };
+  if (cmPanel.hidden) setCommentsPanel(true); else cmRender();
+}
+function drawPins() {
+  const showDone = $('#ed-cm-resolved').checked, k = 1 / scale;
+  pins.replaceChildren(...cmList.filter(c => cmN(c) === cur + 1 && (showDone || !c.resolved)).map((c, i) => {
+    const p = cmEl('div', 'cm-pin', String(i + 1)); p.title = `${c.by?.n || ''}: ${c.text}`;
+    p.style.left = c.x + 'px'; p.style.top = c.y + 'px'; p.style.scale = k; p.style.transformOrigin = '0 100%';
+    p.onpointerdown = e => { e.stopPropagation(); if (cmPanel.hidden) setCommentsPanel(true); cmShow(c); };
+    return p;
+  }));
+}
+new MutationObserver(drawPins).observe(canvas, { childList: true });   // the slide on show changed
+$('#ed-comments-btn').onclick = () => setCommentsPanel(cmPanel.hidden);
+$('#ed-cm-close').onclick = () => setCommentsPanel(false);
+$('#ed-cm-add').onclick = addComment;
+$('#ed-cm-resolved').onchange = cmRender;
+addEventListener('keydown', e => { if ((e.metaKey || e.ctrlKey) && e.altKey && e.code === 'KeyM') { e.preventDefault(); e.stopPropagation(); addComment(); } }, true);
+const cmTyping = () => [...cmPanel.querySelectorAll('input:not([type=checkbox]), textarea')].some(i => i.value.trim() || i === document.activeElement);
+setInterval(() => { if (!cmPanel.hidden && !cmDraft && !cmTyping()) cmFetch(); }, 20000);   // new comments while it is open, never under someone's fingers
+cmFetch();

glideshow/editor/js/context-menus.js

@@ -0,0 +1,93 @@
+/* Right-click menus, as Slides: on an object, on the empty slide, and on a filmstrip thumbnail. Items are
+   shared with the menu bar where they exist (Arrange submenus, Edit commands). */
+const arrangeItem = label => MENUS.Arrange.find(it => typeof it === 'object' && it.label === label);
+const editItem = label => MENUS.Edit.find(it => typeof it === 'object' && it.label === label);
+function objectMenu() {
+  const one = sel.size === 1 ? [...sel][0] : null, text = one && !isLine(one) && !isGroup(one) && !isMedia(one);
+  return [
+    editItem('Cut'), editItem('Copy'), editItem('Paste'), editItem('Paste without formatting'), editItem('Delete'),
+    '-',
+    ...(text ? [{ label: 'Edit text', icon: 'format_shapes', run: () => startEdit(one) }] : []),
+    { label: 'Alt text', icon: 'accessibility_new', run: openAltText, off: () => sel.size !== 1 },
+    ...(codeOf(one) ? [{ label: 'Code language', icon: 'code', items: () => codeLangItems(setCodeLang, v => codeOf(one).classList.contains('language-' + v)) }] : []),
+    ...(/^(elbow|curve)$/.test(one?.dataset.shape) && one.dataset.bend ? [{ label: 'Reroute connector', icon: 'route', run: () => { delete one.dataset.bend; renderShape(one); drawOverlay(); commit(); } }] : []),
+    '-',
+    arrangeItem('Order'), arrangeItem('Rotate'), arrangeItem('Center on page'),
+    ...(sel.size > 1 ? [arrangeItem('Align'), arrangeItem('Distribute')] : []),
+    ...(sel.size > 1 ? [{ label: 'Group', icon: 'group_work', key: '⌥⌘G', run: groupSel }] : []),
+    ...([...sel].some(isGroup) ? [{ label: 'Ungroup', key: '⇧⌥⌘G', run: ungroupSel }] : []),
+    ...(one?.classList.contains('image') ? [] : ['-', { label: 'Link', icon: 'link', key: '⌘K', run: linkText, off: () => sel.size !== 1 }]),   // Slides offers no Link on pictures
+    '-',
+    { label: 'Animate', icon: 'animation', run: () => $('#ed-animate').click() },
+    '-',
+    { label: 'Format options', icon: 'format_paint', run: () => setPanel(true) },
+    ...(one?.classList.contains('image') ? ['-', ...IMAGE_ITEMS(), { label: 'Set image as background', icon: 'wallpaper', run: () => imageToBackground(one) }] : []),
+  ];
+}
+const slideMenu = () => [
+  editItem('Cut'), editItem('Copy'), editItem('Paste'), editItem('Paste without formatting'), editItem('Delete'),
+  '-',
+  { label: 'Change background', icon: 'opacity', run: () => showBgDialog(true) },
+  { label: 'Apply layout', icon: 'view_quilt', items: layoutItems },
+  '-',
+  { label: 'Transition', icon: 'animation', run: () => setTransPanel(true) },
+];
+const thumbMenu = () => [
+  { label: 'New slide', icon: 'add', key: '⌃M', run: () => $('#ed-new-slide').click() },
+  { label: 'Duplicate slide', icon: 'control_point_duplicate', run: () => $('#ed-dup-slide').click() },
+  { label: 'Delete', icon: 'delete', run: () => $('#ed-del-slide').click() },
+  { label: 'Skip slide', icon: 'visibility_off', on: () => slides[cur]?.dataset.visibility === 'hidden', run: skipSlides },
+  { label: 'Move slide', icon: 'swap_vert', items: () => [
+    { label: 'Move slide to beginning', icon: 'vertical_align_top', key: '⇧⌘↑', run: () => moveSlides('start') },
+    { label: 'Move slide to end', icon: 'vertical_align_bottom', key: '⇧⌘↓', run: () => moveSlides('end') },
+  ] },
+  '-',
+  { label: 'Change background', icon: 'opacity', run: () => showBgDialog(true) },
+  { label: 'Apply layout', icon: 'view_quilt', items: layoutItems },
+  '-',
+  { label: 'Transition', icon: 'animation', run: () => setTransPanel(true) },
+];
+/* The picture commands, as Slides' Format → Image and the image right-click menu. Reset image drops crop, opacity
+   and size changes. Set image as background moves the picture onto the slide background. */
+const theImage = () => sel.size === 1 && [...sel][0].classList.contains('image') ? [...sel][0] : null;
+const IMAGE_ITEMS = () => [
+  { label: 'Crop image', icon: 'crop', run: () => enterCrop(theImage()), off: () => !theImage() },
+  { label: 'Replace image', icon: 'image', run: () => $('#ed-replace-file').click(), off: () => !theImage() },
+  { label: 'Reset image', icon: 'reset_image', run: () => resetImage(theImage()), off: () => !theImage() },
+];
+function resetImage(b) {
+  if (!b) return;
+  delete b.dataset.crop; cropBox(b); const img = b.querySelector('.content > img'); if (img) { img.style.opacity = ''; if (!img.getAttribute('style')) img.removeAttribute('style'); }
+  resetImageSize(b);
+}
+function imageToBackground(b) {
+  const src = b.querySelector('.content > img')?.getAttribute('src'); if (!src) return;
+  slides[cur].dataset.backgroundImage = plainSrc(src); b.remove(); sel.clear(); render(); commit();
+}
+function openAltText() {
+  setPanel(true);
+  const d = [...fmt.querySelectorAll('details')].find(d => d.querySelector('summary').textContent.trim() === 'Alt Text');
+  if (d) { d.open = true; F('alt').focus(); }
+}
+function openContextMenu(e, items) {
+  e.preventDefault(); closeMenu();
+  const m = buildMenu(items); placeMenu(m, e.clientX, e.clientY); openMenuEl = m;
+}
+stage.addEventListener('contextmenu', e => {
+  if (editing && topBox(e.target) === editing && e.target.closest('td, th')) {   // in a table cell: Slides' table menu
+    const td = e.target.closest('td, th'); if (!td.contains(getSelection().anchorNode)) focusCell(td);
+    openContextMenu(e, [editItem('Cut'), editItem('Copy'), editItem('Paste'), '-', ...tableItems()]); return;
+  }
+  if (editing && topBox(e.target) === editing) return;   // the browser's own menu while editing text (spelling suggestions)
+  const b = topBox(e.target);
+  if (b && !sel.has(b)) { stopEdit(); sel = new Set([b]); drawOverlay(); updateToolbar(); }
+  if (!b && !e.target.closest('#ed-ui .handle, #ed-ui .sel-wrap')) { stopEdit(); sel.clear(); drawOverlay(); updateToolbar(); }
+  openContextMenu(e, sel.size ? objectMenu() : slideMenu());
+});
+thumbs.addEventListener('contextmenu', e => {
+  const t = e.target.closest('.thumb'); if (!t) return;
+  const i = [...thumbs.children].indexOf(t);
+  if (!picked.has(slides[i])) go(i);
+  thumbs.focus({ preventScroll: true });
+  openContextMenu(e, thumbMenu());
+});

glideshow/editor/js/dialogs.js

@@ -0,0 +1,168 @@
+/* Slide → Change background: Slides' dialog with a colour, an image (reveal's data-background-image, cover), and ours:
+   a video (data-background-video, muted and looping) or a web page (data-background-iframe), then Reset. */
+function paintBg(el, s) {
+  el.style.background = s.dataset.backgroundColor || '#fff';
+  if (s.dataset.backgroundImage) Object.assign(el.style, { backgroundImage: `url("${s.dataset.backgroundImage}")`, backgroundSize: 'cover', backgroundPosition: 'center' });
+  // a video or web page behind the slide: playing on the canvas, a still frame or a placeholder in thumbnails
+  const media = fresh(s.dataset.backgroundVideo || '') || s.dataset.backgroundIframe || '', live = el === frame, old = el.querySelector(':scope > .bg-media');
+  if (!media) return old?.remove();
+  if (old?.dataset.src === media + live) return;
+  const m = div('bg-media'); m.dataset.src = media + live;
+  if (s.dataset.backgroundVideo && !live) {   // a thumbnail: the video's first frame, as a picture (render.js)
+    const still = videoStill(media); if (still) m.style.background = `center / cover no-repeat url("${still}")`;
+  } else if (s.dataset.backgroundVideo) {
+    const v = document.createElement('video'); v.src = media; v.muted = true; v.loop = true; v.playsInline = true; v.preload = 'metadata'; v.autoplay = true; m.append(v);
+  } else if (live) { const f = document.createElement('iframe'); f.src = media; f.setAttribute('sandbox', 'allow-scripts allow-same-origin'); f.loading = 'lazy'; m.append(f); }
+  else m.innerHTML = '<span class="icon">public</span>';
+  old ? old.replaceWith(m) : el.prepend(m);
+}
+const bgDlg = $('#ed-bgdlg');
+function syncBgDialog() {
+  const s = slides[cur]; if (!s) return;
+  $('#ed-bg-color .chip').style.background = s.dataset.backgroundColor || '#fff';
+  $('#ed-bg-reset').disabled = !s.dataset.backgroundImage && !s.dataset.backgroundVideo && !s.dataset.backgroundIframe && /^(#fff(fff)?)?$/i.test(s.dataset.backgroundColor || '');
+}
+function showBgDialog(on) { closeMenu(); bgDlg.hidden = !on; if (on) syncBgDialog(); }
+$('#ed-bg-color').onclick = () => {
+  if (openAnchor === $('#ed-bg-color')) return closeMenu();
+  openPalette($('#ed-bg-color')); const m = document.querySelector('.menu.palette'); if (m) m.style.zIndex = '60';
+};
+$('#ed-bg-image').onclick = () => $('#ed-bg-file').click();
+$('#ed-bg-file').onchange = async e => {
+  let file = e.target.files[0]; e.target.value = ''; if (!file) return;
+  file = await shrinkPicture(file);
+  const ext = (file.type.split('/')[1] || 'png').replace('jpeg', 'jpg').replace('svg+xml', 'svg');
+  const { src } = await (await fetch('/api/upload?ext=' + ext, { method: 'POST', body: file })).json();
+  slides[cur].dataset.backgroundImage = src; render(); syncBgDialog(); commit();
+};
+const clearBgMedia = s => { for (const k of ['backgroundImage', 'backgroundVideo', 'backgroundVideoLoop', 'backgroundVideoMuted', 'backgroundIframe', 'backgroundInteractive']) delete s.dataset[k]; };
+$('#ed-bg-video').onclick = () => $('#ed-bg-vfile').click();
+$('#ed-bg-vfile').onchange = async e => {
+  const file = e.target.files[0]; e.target.value = ''; if (!file) return;
+  const ext = (file.name.split('.').pop() || 'mp4').toLowerCase();
+  const { src } = await (await fetch('/api/upload?ext=' + ext, { method: 'POST', body: file })).json();
+  const s = slides[cur]; clearBgMedia(s); Object.assign(s.dataset, { backgroundVideo: src, backgroundVideoLoop: '', backgroundVideoMuted: '' });
+  render(); syncBgDialog(); commit();
+};
+$('#ed-bg-page').onclick = () => { showBgDialog(false); askURL('A web page as the background', url => {
+  if (!/^https:\/\//.test(url)) return setStatus('A background page needs an https:// address', 'error');
+  const s = slides[cur]; clearBgMedia(s); s.dataset.backgroundIframe = url; render(); commit();
+}, slides[cur]?.dataset.backgroundIframe || ''); };
+$('#ed-bg-reset').onclick = () => {
+  const s = slides[cur]; clearBgMedia(s); s.dataset.backgroundColor = '#ffffff';
+  render(); syncBgDialog(); commit();
+};
+$('#ed-bg-done').onclick = bgDlg.querySelector('.sc-close').onclick = () => showBgDialog(false);
+$('#ed-bg-theme').onclick = () => { setTheme({ ...theme(), name: 'Custom', bg: slides[cur].dataset.backgroundColor || '#ffffff' }); showBgDialog(false); };   // Add to theme: every slide on the theme background follows
+bgDlg.addEventListener('pointerdown', e => { if (e.target === bgDlg) showBgDialog(false); });
+addEventListener('keydown', e => {
+  if (bgDlg.hidden || e.key !== 'Escape') return;
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (document.querySelector('.menu')) closeMenu(); else showBgDialog(false);
+}, true);
+
+/* Custom spacing, as Slides: paragraph spacing before / after in pt and line spacing as Slides' multiple. */
+const spaceDlg = $('#ed-spacedlg'), spTargets = [];
+function showSpaceDialog(on) {
+  closeMenu(); spaceDlg.hidden = !on; if (!on) return;
+  spTargets.splice(0, spTargets.length, ...sel);
+  const c = content(spTargets[0]), pt = side => Math.round((parseFloat(c.style.getPropertyValue(`--space-${side}`)) || 0) / PT * 10) / 10;
+  F_sp('before').value = pt('before'); F_sp('after').value = pt('after');
+  F_sp('line').value = Math.round(parseFloat(curLh()) / NATURAL_LH * 100) / 100;
+  F_sp('line').focus(); F_sp('line').select();
+}
+const F_sp = k => $('#ed-sp-' + k);
+function applySpacing() {
+  const line = parseFloat(F_sp('line').value);
+  spTargets.forEach(b => {
+    const c = content(b); blockify(c);
+    for (const side of ['before', 'after']) {
+      const v = Math.max(0, parseFloat(F_sp(side).value) || 0);
+      if (v) c.style.setProperty(`--space-${side}`, `${Math.round(v * PT * 100) / 100}px`); else c.style.removeProperty(`--space-${side}`);
+    }
+    if (line > 0) c.style.lineHeight = String(Math.round(line * NATURAL_LH * 1000) / 1000);
+    fitHeight(b);
+  });
+  showSpaceDialog(false); commit();
+}
+$('#ed-sp-apply').onclick = applySpacing;
+$('#ed-sp-cancel').onclick = spaceDlg.querySelector('.sc-close').onclick = () => showSpaceDialog(false);
+spaceDlg.addEventListener('pointerdown', e => { if (e.target === spaceDlg) showSpaceDialog(false); });
+addEventListener('keydown', e => {
+  if (spaceDlg.hidden || !['Escape', 'Enter'].includes(e.key)) return;
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (e.key === 'Enter') applySpacing(); else showSpaceDialog(false);
+}, true);
+
+/* Insert → Special characters, as Slides: a category grid, search (keyword, LaTeX command or codepoint) and the
+   recently used ones; a click inserts at the caret when editing, else into a new text box. */
+const charsDlg = $('#ed-chars'), recentChars = () => { try { return JSON.parse(stored('slides-recent-chars')) || []; } catch { return []; } };
+function showChars(on) {
+  closeMenu(); charsDlg.hidden = !on; if (!on) return;
+  const cat = $('#ed-chars-cat');
+  if (!cat.options.length) cat.append(...CHAR_CATEGORIES.map(([n], i) => Object.assign(document.createElement('option'), { value: i, textContent: n })));
+  $('#ed-chars-q').value = ''; fillChars(); $('#ed-chars-q').focus();
+}
+function charMatches(q) {
+  q = q.trim(); if (!q) return null;
+  const hex = q.match(/^(?:u\+|0x)?([0-9a-f]{4,5})$/i);
+  if (hex) return [String.fromCodePoint(parseInt(hex[1], 16))];
+  const cmd = q.replace(/^\\/, '');
+  const tex = Object.entries(LATEX_SYMBOLS).filter(([k]) => k.toLowerCase().startsWith(cmd.toLowerCase())).map(([, v]) => v);
+  const cats = CHAR_CATEGORIES.filter(([n]) => n.toLowerCase().includes(q.toLowerCase()) || n.toLowerCase().includes(q.toLowerCase().replace(/s$/, ''))).flatMap(([, c]) => c);
+  return [...new Set([...tex, ...cats, ...[...q].filter(ch => ch.codePointAt(0) > 127)])];
+}
+function fillChars() {
+  const grid = $('#ed-chars-grid'), found = charMatches($('#ed-chars-q').value);
+  const cell = ch => { const b = document.createElement('button'); b.textContent = ch; b.title = 'U+' + ch.codePointAt(0).toString(16).toUpperCase().padStart(4, '0');
+    b.onmouseenter = () => { $('#ed-chars-pick').innerHTML = ''; $('#ed-chars-pick').append(Object.assign(div(''), { textContent: ch }), Object.assign(document.createElement('small'), { textContent: b.title })); };
+    b.onmousedown = e => e.preventDefault(); b.onclick = () => insertChar(ch); return b; };
+  const sep = t => Object.assign(div('chars-sep'), { textContent: t });
+  const recent = recentChars();
+  grid.replaceChildren(...(found ? found.map(cell)
+    : [...(recent.length ? [sep('Recently used'), ...recent.map(cell), sep(CHAR_CATEGORIES[$('#ed-chars-cat').value][0])] : []), ...CHAR_CATEGORIES[$('#ed-chars-cat').value][1].map(cell)]));
+  $('#ed-chars-pick').textContent = '';
+}
+function insertChar(ch) {
+  store('slides-recent-chars', JSON.stringify([ch, ...recentChars().filter(c => c !== ch)].slice(0, 22)));
+  if (editing) { content(editing).focus(); editSelection(); document.execCommand('insertText', false, ch); fitHeight(editing); }
+  else { const b = addText(ch); sel = new Set([b]); drawOverlay(); commit(); }
+  fillChars();
+}
+$('#ed-chars-cat').onchange = fillChars;
+$('#ed-chars-q').oninput = fillChars;
+charsDlg.querySelector('.sc-close').onclick = () => showChars(false);
+charsDlg.addEventListener('pointerdown', e => { if (e.target === charsDlg) showChars(false); });
+addEventListener('keydown', e => { if (!charsDlg.hidden && e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); showChars(false); } }, true);
+
+/* Insert → Icon: the Material Symbols names (editor/data/icons.json) in a searchable grid. An icon is a box with
+   data-shape="icon" data-icon="<name>"; the deck loads just the glyphs it uses through <link id="deck-icons">. */
+const iconsDlg = $('#ed-icons');
+let iconNames = null;
+async function showIcons(on) {
+  closeMenu(); iconsDlg.hidden = !on; if (!on) return;
+  iconNames ??= await fetch('/editor/data/icons.json').then(r => r.json()).catch(() => []);
+  $('#ed-icons-q').value = ''; fillIcons(); $('#ed-icons-q').focus();
+}
+function fillIcons() {
+  const q = $('#ed-icons-q').value.trim().toLowerCase().replace(/\s+/g, '_');
+  const hits = (q ? iconNames.filter(n => n.includes(q)).sort((a, b) => (a.startsWith(q) ? 0 : 1) - (b.startsWith(q) ? 0 : 1)) : iconNames).slice(0, 600);
+  $('#ed-icons-grid').replaceChildren(...hits.map(n => { const b = document.createElement('button'); b.className = 'icon'; b.textContent = n; b.dataset.tip = n.replace(/_/g, ' '); b.onclick = () => addIcon(n); return b; }));
+}
+function syncDeckIcons() {   // one link with every icon the deck uses (Google wants icon_names sorted)
+  const names = [...new Set(slides.flatMap(s => [...s.querySelectorAll('.box[data-shape="icon"]')].map(b => b.dataset.icon)).filter(Boolean))].sort();
+  let l = deckDoc.querySelector('link#deck-icons');
+  if (!names.length) { l?.remove(); return; }
+  if (!l) { l = deckDoc.createElement('link'); l.id = 'deck-icons'; l.rel = 'stylesheet'; (deckDoc.querySelector('#deck-base') || deckDoc.head.lastChild).before(l); }
+  l.setAttribute('href', `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=${names.join(',')}&display=block`);
+}
+function addIcon(name) {
+  showIcons(false);
+  const b = makeBox({ x: W / 2 - 96, y: H / 2 - 96, w: 192, h: 192, shape: 'icon' });
+  b.dataset.icon = name; b.style.setProperty('--fill', '#202124'); renderShape(b);
+  insert(b); syncDeckIcons(); scheduleSave();
+}
+$('#ed-icons-q').oninput = fillIcons;
+iconsDlg.querySelector('.sc-close').onclick = () => showIcons(false);
+iconsDlg.addEventListener('pointerdown', e => { if (e.target === iconsDlg) showIcons(false); });
+addEventListener('keydown', e => { if (!iconsDlg.hidden && e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); showIcons(false); } }, true);

glideshow/editor/js/dock.js

@@ -0,0 +1,22 @@
+/* The insert bar (View → Show insert bar): a floating pill at the bottom of the slide with the tools that create things,
+   as Figma Slides has, each calling the same action as the toolbar or Insert menu. Formatting stays at the top; the bar
+   never changes with the selection. Remembered in localStorage (on by default). */
+const dock = $('#ed-dock');
+const dockShown = () => stored('slides-dock') !== '0';
+function setDock(on) { store('slides-dock', on ? undefined : '0'); dock.hidden = !on; }
+dock.hidden = !dockShown();
+const DOCK_DO = {
+  select: () => stopEdit(),
+  text: () => $('#ed-add-text').click(),
+  image: () => $('#ed-file').click(),
+  equation: addEquation,
+  note: () => { const b = addNote(cur, W - 620, 60, ''); sel = new Set([b]); startEdit(b); },
+};
+const DOCK_MENUS = { shape: () => shapeItems(), line: () => lineItems(), table: () => [{ el: tableGrid }], code: () => codeLangItems(addCode) };
+dock.addEventListener('mousedown', e => { if (e.target.closest('button')) e.preventDefault(); });   // keep the focus where it is (as the toolbar)
+dock.addEventListener('click', e => {
+  const b = e.target.closest('button'); if (!b) return;
+  const k = b.dataset.do;
+  if (DOCK_MENUS[k]) return openAnchor === b ? closeMenu() : openMenu(b, DOCK_MENUS[k](), { up: true });
+  closeMenu(); DOCK_DO[k]?.();
+});

glideshow/editor/js/draw.js

@@ -0,0 +1,107 @@
+/* Shape picker, as Slides: Shapes / Arrows / Callouts / Equation, each a grid of outline pictures. Picking one
+   arms drawing: drag on the slide to size it (⇧ keeps it square), or click to drop a 1-inch one there. */
+/** @type {any[]} */
+const SHAPE_GROUPS = [
+  ['Shapes', 'crop_square', [['rect', 'Rectangle'], ['roundrect', 'Rounded rectangle'], ['snip1rect', 'Snip single corner rectangle'], ['snip2samerect', 'Snip same side corner rectangle'], ['snip2diagrect', 'Snip diagonal corner rectangle'], ['sniproundrect', 'Snip and round single corner rectangle'], ['round1rect', 'Round single corner rectangle'], ['round2samerect', 'Round same side corner rectangle'], ['round2diagrect', 'Round diagonal corner rectangle'], '-',
+    ['ellipse', 'Oval'], ['triangle', 'Triangle'], ['rttriangle', 'Right triangle'], ['parallelogram', 'Parallelogram'], ['trapezoid', 'Trapezoid'], ['diamond', 'Diamond'], ['pentagon', 'Regular pentagon'], ['hexagon', 'Hexagon'], ['heptagon', 'Heptagon'], ['octagon', 'Octagon'], ['decagon', 'Decagon'], ['dodecagon', 'Dodecagon'], ['pie', 'Pie'], ['arc', 'Arc'], ['teardrop', 'Teardrop'], ['chord', 'Chord'], ['frame', 'Frame'], ['halfframe', 'Half frame'], ['corner', 'L-shape'], ['diagstripe', 'Diagonal stripe'], ['cross', 'Cross'], ['plaque', 'Plaque'], ['can', 'Can'], ['cube', 'Cube'], ['bevel', 'Bevel'], ['donut', 'Donut'], ['nosmoking', '"No" symbol'], ['blockarc', 'Block arc'], ['foldedcorner', 'Folded corner'], ['smileyface', 'Smiley face'], ['heart', 'Heart'], ['lightningbolt', 'Lightning bolt'], ['sun', 'Sun'], ['moon', 'Moon'], ['cloud', 'Cloud'], '-',
+    ['flow-process', 'Flowchart: process'], ['flow-alternateprocess', 'Flowchart: alternate process'], ['flow-decision', 'Flowchart: decision'], ['flow-inputoutput', 'Flowchart: data'], ['flow-predefinedprocess', 'Flowchart: predefined process'], ['flow-internalstorage', 'Flowchart: internal storage'], ['flow-document', 'Flowchart: document'], ['flow-multidocument', 'Flowchart: multidocument'], ['flow-terminator', 'Flowchart: terminator'], ['flow-preparation', 'Flowchart: preparation'], ['flow-manualinput', 'Flowchart: manual input'], ['flow-manualoperation', 'Flowchart: manual operation'], ['flow-connector', 'Flowchart: connector'], ['flow-offpageconnector', 'Flowchart: off-page connector'], ['flow-punchedcard', 'Flowchart: card'], ['flow-punchedtape', 'Flowchart: punched tape'], ['flow-summingjunction', 'Flowchart: summing junction'], ['flow-or', 'Flowchart: or'], ['flow-collate', 'Flowchart: collate'], ['flow-sort', 'Flowchart: sort'], ['flow-extract', 'Flowchart: extract'], ['flow-merge', 'Flowchart: merge'], ['flow-onlinestorage', 'Flowchart: stored data'], ['flow-delay', 'Flowchart: delay'], ['flow-magnetictape', 'Flowchart: sequential access storage'], ['flow-magneticdisk', 'Flowchart: magnetic disk'], ['flow-magneticdrum', 'Flowchart: direct access storage'], ['flow-display', 'Flowchart: display']]],
+  ['Arrows', 'arrow_right_alt', [['arrow', 'Right arrow'], ['leftarrow', 'Left arrow'], ['uparrow', 'Up arrow'], ['downarrow', 'Down arrow'], ['leftrightarrow', 'Left-right arrow'],
+    ['updownarrow', 'Up-down arrow'], ['quadarrow', 'Quad arrow'], ['leftrightuparrow', 'Left-right-up arrow'], ['bentarrow', 'Bent arrow'], ['uturnarrow', 'U-turn arrow'],
+    ['leftuparrow', 'Left-up arrow'], ['bentuparrow', 'Bent-up arrow'], ['curvedarrow', 'Curved right arrow'], ['curvedleftarrow', 'Curved left arrow'], ['curveduparrow', 'Curved up arrow'],
+    ['curveddownarrow', 'Curved down arrow'], ['stripedarrow', 'Striped right arrow'], ['notchedarrow', 'Notched right arrow'], ['homeplate', 'Pentagon'], ['chevron', 'Chevron'],
+    ['rightarrowcallout', 'Right arrow callout'], ['downarrowcallout', 'Down arrow callout'], ['leftarrowcallout', 'Left arrow callout'], ['uparrowcallout', 'Up arrow callout'],
+    ['leftrightarrowcallout', 'Left-right arrow callout'], ['quadarrowcallout', 'Quad arrow callout'], ['circulararrow', 'Circular arrow']]],
+  ['Callouts', 'chat_bubble', [['explosion1', 'Explosion 1'], ['explosion2', 'Explosion 2'], ['star4', '4-point star'], ['star', '5-point star'], ['star6', '6-point star'], ['star7', '7-point star'],
+    ['star8', '8-point star'], ['star10', '10-point star'], ['star12', '12-point star'], ['star16', '16-point star'], ['star24', '24-point star'], ['star32', '32-point star'],
+    ['ribbonup', 'Up ribbon'], ['ribbon', 'Down ribbon'], ['curvedribbonup', 'Curved up ribbon'], ['curvedribbon', 'Curved down ribbon'], ['vscroll', 'Vertical scroll'], ['hscroll', 'Horizontal scroll'],
+    ['wave', 'Wave'], ['doublewave', 'Double wave'], '-',
+    ['callout', 'Rectangular callout'], ['roundcallout', 'Rounded rectangular callout'], ['ovalcallout', 'Oval callout'], ['cloudcallout', 'Cloud callout']]],
+  ['Equation', 'add', [['plus', 'Plus'], ['minus', 'Minus'], ['multiply', 'Multiply'], ['divide', 'Division'], ['equal', 'Equal'], ['notequal', 'Not equal'], ['brackets', 'Double bracket'], ['braces', 'Double brace'], ['leftbracket', 'Left bracket'], ['rightbracket', 'Right bracket'], ['leftbrace', 'Left brace'], ['rightbrace', 'Right brace']]],
+];
+const shapePic = (shape, extra = {}) => {
+  const b = div('box'); b.dataset.shape = shape; Object.assign(b.dataset, extra.data || {});
+  const [pw, ph] = /^(arrow|leftarrow|leftrightarrow|stripedarrow|notchedarrow|homeplate|chevron)$/.test(shape) ? [20, 14] : /^(uparrow|downarrow|updownarrow)$/.test(shape) ? [14, 20] : /^(left|right)(bracket|brace)$/.test(shape) ? [7, 20] : [20, 18];
+  b.style.cssText = `width:${pw}px;height:${ph}px;--fill:transparent;--stroke:#1f1f1f;--sw:1.3px`;
+  renderShape(b); const svg = b.querySelector('svg');
+  const t = [extra.rot ? `rotate(${extra.rot} 10 10)` : '', extra.data?.flip ? 'translate(20 0) scale(-1 1)' : ''].join(' ');
+  svg.setAttribute('viewBox', `${pw / 2 - 12} ${ph / 2 - 13} 24 26`); svg.setAttribute('width', '22'); svg.setAttribute('height', '22');
+  if (t.trim()) svg.innerHTML = `<g transform="${t}">${svg.innerHTML}</g>`;
+  return svg.outerHTML.replace('class="shape"', 'class="shape-pic"');
+};
+const shapeItems = () => SHAPE_GROUPS.map(([label, icon, list]) => ({ label, icon, items: () => list.map(it => it === '-' ? it : (([v, l, extra]) => ({ label: l, cell: true, svg: shapePic(v, extra), run: () => armShape(v, extra) }))(it)) }));
+let drawing = null;   // the shape waiting to be drawn
+function armShape(shape, extra) { stopEdit(); drawing = { shape, extra, pts: POINT_TOOLS.includes(shape) ? [] : null }; document.body.classList.add('drawing'); setStatus('Click or drag on the slide to draw'); }
+function disarmShape() { drawing = null; document.body.classList.remove('drawing'); setStatus(''); }
+stage.addEventListener('pointerdown', e => {
+  if (!drawing || e.button !== 0) return;
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (drawing.pts) {   // Curve / Polyline: each click adds a point, a double-click ends
+    const p = toCanvas(e), q = drawing.pts.at(-1);
+    if (!q || Math.hypot(p.x - q.x, p.y - q.y) * scale >= 6) drawing.pts.push(p);   // the second click of a double-click adds nothing
+    drawPreview(drawing.pts); return;
+  }
+  const { shape, extra } = drawing, p0 = toCanvas(e); disarmShape();
+  if (shape === 'scribble') {   // freehand: every pointer move, thinned to 3 screen px
+    const pts = [p0]; busy = true;
+    drag(e, ev => { const p = toCanvas(ev), q = pts.at(-1); if (Math.hypot(p.x - q.x, p.y - q.y) * scale >= 3) { pts.push(p); drawPreview(pts); } },
+      () => { busy = false; guides.querySelector('.draw-preview')?.remove(); finishPath(pts, true); });
+    return;
+  }
+  if (isLine({ dataset: { shape } })) {   // a line or connector, from where the drag starts to where it ends; ends snap to connection points
+    const s0 = snapAnchor(p0), P = { ...(s0 ? s0.q : p0), mark: 'none', at: s0?.ref || '' }, mark = shape === 'arrowline' ? 'fill-arrow' : 'none';
+    const b = addShape(shape, { x: P.x, y: P.y, w: PX_IN, h: 0 });
+    busy = true;
+    drag(e, ev => {
+      let p = toCanvas(ev);
+      if (ev.shiftKey) { const a = Math.round(Math.atan2(p.y - P.y, p.x - P.x) / (Math.PI / 4)) * Math.PI / 4, r = Math.hypot(p.x - P.x, p.y - P.y); p = { x: P.x + Math.cos(a) * r, y: P.y + Math.sin(a) * r }; }
+      const sn = ev.metaKey ? null : snapAnchor(p, b);
+      setLineEnds(b, P, { ...(sn ? sn.q : p), mark, at: sn?.ref || '' }); drawOverlay();
+    }, () => { busy = false; guides.querySelectorAll('.conn').forEach(e => e.remove()); drawOverlay(); commit(); });
+    return;
+  }
+  const b = addShape(shape, { x: p0.x, y: p0.y, w: 1, h: 1 }, extra), k = 1 / scale;
+  let moved = false;
+  busy = true;
+  drag(e, ev => {
+    const p = toCanvas(ev); let w = p.x - p0.x, h = p.y - p0.y;
+    if (!moved && Math.hypot(w, h) < 4 * k) return;
+    moved = true;
+    if (ev.shiftKey) { const m = Math.max(Math.abs(w), Math.abs(h)); w = Math.sign(w || 1) * m; h = Math.sign(h || 1) * m; }
+    setGeo(b, { x: Math.min(p0.x, p0.x + w), y: Math.min(p0.y, p0.y + h), w: Math.abs(w), h: Math.abs(h) }); drawOverlay();
+  }, () => { busy = false; if (!moved) setGeo(b, { x: p0.x, y: p0.y, w: PX_IN, h: PX_IN }); drawOverlay(); commit(); });
+}, true);
+addEventListener('keydown', e => {
+  if (!drawing || (e.key !== 'Escape' && e.key !== 'Enter')) return;
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (drawing.pts?.length >= 2) finishPoints(); else { guides.querySelector('.draw-preview')?.remove(); disarmShape(); }
+}, true);
+stage.addEventListener('pointermove', e => { if (drawing?.pts?.length) drawPreview([...drawing.pts, toCanvas(e)]); });
+stage.addEventListener('dblclick', e => { if (drawing?.pts) { e.stopImmediatePropagation(); finishPoints(); } }, true);   // a double-click ends a Curve / Polyline
+/* Line tool, as Slides: every kind is drawn on the slide. Line / Arrow / connectors: drag from one end to the other
+   (a click makes a 1-inch line). Curve and Polyline: click each point, double-click or Enter to finish. Scribble: drag. */
+const lineItems = () => [['line', 'Line', 'pen_size_2'], ['arrowline', 'Arrow', 'arrow_right_alt'], ['elbow', 'Elbow Connector', 'turn_right'], ['curve', 'Curved Connector', 'conversion_path'],
+  ['smooth', 'Curve', 'gesture'], ['polyline', 'Polyline', 'polyline'], ['scribble', 'Scribble', 'draw']].map(([v, label, icon]) => ({ label, icon, run: () => armShape(v) }));
+const POINT_TOOLS = ['smooth', 'polyline'];
+/* Points (canvas px) → a box with data-path in its own 0..1 units; smooth turns the points into a Catmull-Rom curve. */
+function finishPath(pts, smooth) {
+  if (pts.length < 2) return;
+  const g = bbox(pts.map(p => ({ x: p.x, y: p.y, w: 0, h: 0 }))); g.w = Math.max(g.w, 1); g.h = Math.max(g.h, 1);
+  const u = p => `${Math.round((p.x - g.x) / g.w * 1000) / 1000},${Math.round((p.y - g.y) / g.h * 1000) / 1000}`;
+  let d = 'M' + u(pts[0]);
+  for (let i = 1; i < pts.length; i++) {
+    if (!smooth) { d += ' L' + u(pts[i]); continue; }
+    const p0 = pts[i - 2] || pts[i - 1], p1 = pts[i - 1], p2 = pts[i], p3 = pts[i + 1] || p2;
+    d += ` C${u({ x: p1.x + (p2.x - p0.x) / 6, y: p1.y + (p2.y - p0.y) / 6 })} ${u({ x: p2.x - (p3.x - p1.x) / 6, y: p2.y - (p3.y - p1.y) / 6 })} ${u(p2)}`;
+  }
+  const b = addShape('path', g); b.dataset.path = d; renderShape(b); drawOverlay(); commit();
+}
+function drawPreview(pts, smooth) {   // the path being drawn, in canvas units
+  let svg = guides.querySelector('.draw-preview');
+  if (!svg) { svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('class', 'draw-preview'); svg.setAttribute('viewBox', `0 0 ${W} ${H}`); guides.append(svg); }
+  svg.innerHTML = pts.length ? `<polyline points="${pts.map(p => p.x + ',' + p.y).join(' ')}" />` : '';
+}
+function finishPoints() {
+  const d = drawing; if (!d?.pts) return;
+  guides.querySelector('.draw-preview')?.remove(); disarmShape();
+  finishPath(d.pts, d.shape === 'smooth');
+}