glideshow 0.1.2__py3-none-any.whl

glideshow/editor/js/menubar.js

@@ -0,0 +1,290 @@
+const FORMAT_MENU = [
+    { label: 'Text', icon: 'format_bold', items: [
+      { label: 'Bold', icon: 'format_bold', key: '⌘B', run: () => $('#ed-bold').click(), off: noSel },
+      { label: 'Italic', icon: 'format_italic', key: '⌘I', run: () => $('#ed-italic').click(), off: noSel },
+      { label: 'Underline', icon: 'format_underlined', key: '⌘U', run: () => $('#ed-underline').click(), off: noSel },
+      { label: 'Strikethrough', icon: 'strikethrough_s', key: '⇧⌘X', run: strike, off: noSel },
+      { label: 'Superscript', icon: 'superscript', key: '⌘.', run: superscript, off: noSel },
+      { label: 'Subscript', icon: 'subscript', key: '⌘,', run: subscript, off: noSel },
+      '-',
+      { label: 'Letter spacing', icon: 'format_letter_spacing', items: () => LETTER_SPACING.map(([label, v]) => ({ label, on: () => sel.size && curLs() === v, run: () => spanStyle('letter-spacing', v), off: noSel })) },
+      { label: 'Size', items: [
+        { label: 'Increase font size', key: '⇧⌘.', run: () => stepSize(1), off: noSel },
+        { label: 'Decrease font size', key: '⇧⌘,', run: () => stepSize(-1), off: noSel },
+      ] },
+      { label: 'Color', run: () => openPalette(document.querySelector('.swatch[data-for=color]')), off: noSel },
+      { label: 'Highlight color', run: () => openPalette(document.querySelector('.swatch[data-for=hilite]')), off: noSel },
+      { label: 'Capitalization', items: [['lowercase', 'lower'], ['UPPERCASE', 'upper'], ['Title Case', 'title']].map(([label, m]) => ({ label, run: () => recase(m), off: noSel })) },
+      { label: 'Columns', icon: 'view_column', items: () => [1, 2, 3].map(n => ({ label: ['One', 'Two', 'Three'][n - 1] + (n > 1 ? ' columns' : ' column'), on: () => sel.size && curCols() === n, run: () => setColumns(n), off: noSel })) },
+    ] },
+    { label: 'Align & indent', icon: 'format_align_left', items: () => [
+      ...ALIGNS.map(([v, icon, label, key]) => ({ label: label.replace(' align', ''), icon, key, on: () => sel.size && curAlign() === v, run: () => setAlign(v), off: noSel })),
+      '-',
+      ...VALIGNS.map(([v, icon, label]) => ({ label, icon, on: () => sel.size && curValign() === v, run: () => setValign(v), off: noSel })),
+      '-',
+      { label: 'Increase indent', icon: 'format_indent_increase', key: '⌘]', run: () => indentText(1), off: noSel },
+      { label: 'Decrease indent', icon: 'format_indent_decrease', key: '⌘[', run: () => indentText(-1), off: noSel },
+    ] },
+    { label: 'Line & paragraph spacing', icon: 'format_line_spacing', items: lhItems },
+    { label: 'Bullets & numbering', icon: 'format_list_bulleted', items: () => [
+      { label: 'Numbered list menu', icon: 'format_list_numbered', off: noSel,   // as Slides: numbered first; indent lives in Align & indent
+        items: NUMBERS.map(([t, label]) => ({ label, run: () => setListStyle('ol', t) })) },
+      { label: 'Bulleted list menu', icon: 'format_list_bulleted', off: noSel,
+        items: BULLETS.map(([t, label]) => ({ label, style: 'letter-spacing: .1em', run: () => setListStyle('ul', t) })) },
+    ] },
+    '-',
+    { label: 'Image', icon: 'image', items: () => IMAGE_ITEMS(), off: () => !theImage() },
+    { label: 'Borders & lines', icon: 'border_style', items: () => [
+      { label: 'Border color', icon: 'border_color', run: () => openPalette(document.querySelector('.swatch[data-for=stroke]')), off: noSel },
+      { label: 'Border weight', icon: 'line_weight', items: () => [1, 2, 3, 4, 8, 12, 16, 24].map(v => ({ label: v + 'px', on: () => curSw() === v, run: () => { setVar('--sw', v + 'px'); commit(); } })), off: noSel },
+    ] },
+    '-',
+    { label: 'Format options', icon: 'format_paint', on: () => !fmt.hidden, run: () => setPanel(fmt.hidden) },
+    { label: 'Clear formatting', icon: 'format_clear', key: '⌘\\', run: clearFormat, off: noSel },
+  ];
+// Online (glideshow.org, cloud/worker.js) there is no Mac behind the editor: what needs it is left out (mac: true).
+const CLOUD = !!window.GLIDESHOW_CLOUD, onThisSide = list => list.filter(it => !(CLOUD && it.mac) && !(!CLOUD && it.online));
+const MENUS = {
+  File: onThisSide([   // New / Open / Make a copy switch the server to another deck folder (siblings of this one unless a path is given)
+    { label: 'New', icon: 'add_box', run: () => askURL('New deck: folder name', name => switchDeck({ path: name, create: true }), 'untitled-' + new Date().toISOString().slice(0, 10)) },
+    { label: 'Open', icon: 'folder_open', items: async () => [...(await fetch('/api/recent').then(r => r.json()).catch(() => [])).map(d => ({ label: d.title, on: () => d.current, run: () => d.current || switchDeck({ path: d.path }), tip: d.path })),
+      '-', { label: 'Open a folder…', icon: 'folder', run: () => askURL('Open deck: folder path', p => switchDeck({ path: p })) }] },
+    { label: 'Open a deck file…', icon: 'upload_file', run: openDeckFile, online: true },
+    { label: 'Import slides', icon: 'upload_file', run: () => $('#ed-pptx-file').click(), mac: true },
+    { label: 'Import from Google Slides', icon: 'cloud_download', run: () => askURL('Import from Google Slides: link to the deck', importGoogle), mac: true },
+    { label: 'Make a copy', icon: 'file_copy', run: () => askURL('Make a copy: folder name', name => switchDeck({ copy: name }), deckName() + '-copy') },
+    '-',
+    { label: 'Download', icon: 'download', items: onThisSide([{ label: 'Glideshow deck, one file (.html)', run: downloadOneFile }, { label: 'PDF document (.pdf)', run: printDeck }, { label: 'PNG image (.png, current slide)', run: downloadSlidePNG }, { label: 'Microsoft PowerPoint (.pptx)', run: async () => { await flushSave(); setStatus('Making the PowerPoint file…'); location.href = '/api/pptx'; }, mac: true }, { label: 'Web page folder (.zip)', run: () => { location.href = '/api/zip'; }, mac: true }]) },   // the print dialog's Save as PDF
+    '-',
+    { label: 'Rename', icon: 'edit', run: () => { $('#ed-title').focus(); $('#ed-title').select(); } },
+    { label: 'Move to trash', icon: 'delete', run: trashDeck },
+    { label: 'Share… (publish to the web)', icon: 'public', run: () => showShare(true) },
+    { label: 'Version history', icon: 'history', run: () => showHistory(true) },
+
+    '-',
+    { label: 'Page setup', icon: 'aspect_ratio', run: pageSetup },
+    { label: 'Print preview', icon: 'plagiarism', run: async () => { await flushSave(); window.open('deck.html?print-pdf', '_blank'); } },
+    { label: 'Print', icon: 'print', key: '⌘P', run: printDeck },
+  ]),
+  Edit: [
+    { label: 'Undo', icon: 'undo', key: '⌘Z', run: undo, off: () => hptr <= 0 },
+    { label: 'Redo', icon: 'redo', key: '⌘Y', run: redo, off: () => hptr >= hist.length - 1 },
+    '-',
+    { label: 'Cut', icon: 'content_cut', key: '⌘X', run: () => document.execCommand('cut'), off: noText },
+    { label: 'Copy', icon: 'content_copy', key: '⌘C', run: () => document.execCommand('copy'), off: noText },
+    { label: 'Paste', icon: 'content_paste', key: '⌘V', run: () => setStatus('Press ⌘V to paste') },
+    { label: 'Paste without formatting', icon: 'content_paste_off', key: '⇧⌘V', run: () => setStatus('Press ⇧⌘V to paste without formatting') },
+    '-',
+    { label: 'Select all', icon: 'select_all', key: '⌘A', run: () => { stopEdit(); sel = new Set(pickable()); drawOverlay(); updateToolbar(); } },
+    { label: 'Delete', icon: 'delete', run: deleteSelection, off: noSel },
+    { label: 'Duplicate', icon: 'control_point_duplicate', key: '⌘D', run: duplicateSelection, off: noSel },
+    '-',
+    { label: 'Find and replace', icon: 'find_replace', key: '⇧⌘H', run: openFind },
+  ],
+  View: [   // Slides' order: Slideshow, Motion, Theme builder | Grid view, Show ruler | Guides, Snap to | notes, filmstrip | zoom
+    { label: 'Slideshow', icon: 'slideshow', key: '⌘↵', run: () => present() },
+    { label: 'Motion', icon: 'animation', key: '⌥⇧⌘B', on: () => !$('#ed-trans').hidden, run: () => setTransPanel($('#ed-trans').hidden) },
+    { label: 'Theme builder', icon: 'palette', run: () => enterThemeEdit() },
+    '-',
+    { label: 'Grid view', key: '⌥⌘1', on: () => gridOn, run: () => setGrid(!gridOn) },
+    { label: 'Show ruler', on: rulersShown, run: () => setRulersShown(!rulersShown()) },
+    '-',
+    { label: 'Guides', icon: 'grid_4x4', items: () => [
+      { label: 'Show guides', key: '⌃⌘E ⌃⌘G', on: guidesShown, run: () => setGuidesShown(!guidesShown()) },
+      '-',
+      { label: 'Add vertical guide', key: '⌃⌘E ⌃⌘V', run: () => addGuide('v') },
+      { label: 'Add horizontal guide', key: '⌃⌘E ⌃⌘H', run: () => addGuide('h') },
+      '-',
+      { label: 'Clear guides', run: () => setGuides([]), off: () => !userGuides().length },
+    ] },
+    { label: 'Snap to', icon: 'keyboard_tab', items: () => [{ label: 'Grid', on: snapGrid, run: () => store('slides-snap-grid', snapGrid() ? undefined : '1') },
+      { label: 'Guides', on: snapGuides, run: () => { store('slides-snap-guides', snapGuides() ? '0' : undefined); } }] },
+    '-',
+    { label: 'Show speaker notes', on: () => !document.body.classList.contains('notes-off'), run: () => setNotesVisible(document.body.classList.contains('notes-off')) },
+    { label: 'Show sticky notes', on: stickiesShown, run: () => setStickies(!stickiesShown()) },
+    { label: 'Show filmstrip', on: () => !document.body.classList.contains('film-off'), run: () => $('#ed-film-toggle').click() },
+    { label: 'Show insert bar', on: () => dockShown(), run: () => setDock(!dockShown()) },   // dock.js loads after this file
+    '-',
+    { label: 'Zoom menu', icon: 'zoom_in', items: () => zoomItems() },
+    { label: 'Full screen', icon: 'fullscreen', key: '⌃⇧F', on: () => document.body.classList.contains('compact'), run: toggleCompact },
+    { label: 'Dark mode', icon: 'dark_mode', on: darkOn, run: () => setDark(!darkOn()) },   // ours: Slides has none
+  ],
+  Insert: [
+    { label: 'Image', icon: 'image', items: [{ label: 'Upload from computer', icon: 'upload', run: () => $('#ed-file').click() }] },
+    { label: 'Text box', icon: 'text_fields', run: () => $('#ed-add-text').click() },   // Slides' order
+    { label: 'Shape', icon: 'shapes', items: shapeItems },
+    { label: 'Line', icon: 'pen_size_2', items: lineItems },
+    { label: 'Word art', icon: 'format_shapes', run: addWordArt },
+    { label: 'Icon', icon: 'emoji_symbols', run: () => showIcons(true) },
+    { label: 'Table', icon: 'table_chart', items: () => [{ el: tableGrid }] },
+    { label: 'Code block', icon: 'code', items: () => codeLangItems(addCode) },
+    { label: 'Equation', icon: 'function', run: addEquation },
+    { label: 'Note for AI', icon: 'sticky_note_2', run: () => { const b = addNote(cur, W - 620, 60, ''); sel = new Set([b]); startEdit(b); } },
+    '-',
+    { label: 'Video', icon: 'movie', items: [{ label: 'Upload from computer', icon: 'upload', run: () => $('#ed-video-file').click() }, { label: 'By URL (YouTube, Vimeo)', icon: 'link', run: () => askURL('Insert video by URL', addEmbed) }] },
+    { label: 'Embed', icon: 'web', run: () => askURL('Embed a web page', addEmbed) },
+    { label: 'Live box', icon: 'play_circle', run: () => addLive() },   // ours: a page with its own script, on the slide
+    '-',
+    { label: 'Special characters', icon: 'special_character', run: () => showChars(true) },
+    { label: 'Animation', icon: 'animation', run: () => { setTransPanel(true); addAnim(); }, off: noSel },
+    '-',
+    { label: 'Link', icon: 'link', key: '⌘K', run: linkText, off: () => !editing && sel.size !== 1 },
+    '-',
+    { label: 'New slide', icon: 'add', key: '⌃M', run: () => $('#ed-new-slide').click() },
+  ],
+  Format: FORMAT_MENU,
+  Slide: [
+    { label: 'New slide', icon: 'add', key: '⌃M', run: () => $('#ed-new-slide').click() },
+    { label: 'New slide with layout', icon: 'add_box', items: newSlideItems },
+
+    { label: 'New slide below', icon: 'vertical_align_bottom', key: '⇧⌘M', run: newSlideBelow },
+    '-',
+    { label: 'Duplicate slide', icon: 'control_point_duplicate', run: () => $('#ed-dup-slide').click() },
+    { label: 'Slide style (CSS)', icon: 'css', run: () => editSlideCSS() },   // ours: styles for this slide only
+    { label: 'Delete slide', 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 up', icon: 'arrow_upward', key: '⌘↑', run: () => $('#ed-up-slide').click() },
+      { label: 'Move slide down', icon: 'arrow_downward', key: '⌘↓', run: () => $('#ed-down-slide').click() },
+      { 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: 'Edit theme', icon: 'palette', run: enterThemeEdit },
+    { label: 'Change theme', icon: 'palette', on: () => !$('#ed-theme').hidden, run: () => setThemePanel($('#ed-theme').hidden) },
+    { label: 'Transition', icon: 'animation', on: () => !$('#ed-trans').hidden, run: () => setTransPanel($('#ed-trans').hidden) },
+  ],
+  Arrange: [
+    { label: 'Order', icon: 'flip_to_front', items: [
+      { label: 'Bring to front', icon: 'flip_to_front', key: '⇧⌘↑', run: toFront, off: noSel },
+      { label: 'Bring forward', key: '⌘↑', run: stepForward, off: noSel },
+      { label: 'Send backward', key: '⌘↓', run: stepBackward, off: noSel },
+      { label: 'Send to back', icon: 'flip_to_back', key: '⇧⌘↓', run: toBack, off: noSel },
+    ] },
+    { label: 'Align', icon: 'align_horizontal_left', items: [
+      { label: 'Left', icon: 'align_horizontal_left', run: () => alignSel('h', 0), off: noSel },
+      { label: 'Center', icon: 'align_horizontal_center', run: () => alignSel('h', .5), off: noSel },
+      { label: 'Right', icon: 'align_horizontal_right', run: () => alignSel('h', 1), off: noSel },
+      '-',
+      { label: 'Top', icon: 'align_vertical_top', run: () => alignSel('v', 0), off: noSel },
+      { label: 'Middle', icon: 'align_vertical_center', run: () => alignSel('v', .5), off: noSel },
+      { label: 'Bottom', icon: 'align_vertical_bottom', run: () => alignSel('v', 1), off: noSel },
+    ] },
+    { label: 'Distribute', icon: 'horizontal_distribute', items: [
+      { label: 'Horizontally', icon: 'horizontal_distribute', run: () => distributeSel('h'), off: () => sel.size < 3 },
+      { label: 'Vertically', icon: 'vertical_distribute', run: () => distributeSel('v'), off: () => sel.size < 3 },
+    ] },
+    { label: 'Center on page', icon: 'center_focus_strong', items: [
+      { label: 'Horizontally', run: () => centerOnPage('h'), off: noSel },
+      { label: 'Vertically', run: () => centerOnPage('v'), off: noSel },
+    ] },
+    { label: 'Rotate', icon: 'rotate_right', items: [
+      { label: 'Rotate clockwise 90°', icon: 'rotate_right', run: () => rotateSel(90), off: noSel },
+      { label: 'Rotate counter-clockwise 90°', icon: 'rotate_left', run: () => rotateSel(-90), off: noSel },
+      '-',
+      { label: 'Flip horizontally', icon: 'flip', run: () => flipSel('h'), off: noSel },
+      { label: 'Flip vertically', run: () => flipSel('v'), off: noSel },
+    ] },
+    '-',
+    { label: 'Group', icon: 'group_work', key: '⌥⌘G', run: groupSel, off: () => sel.size < 2 },
+    { label: 'Ungroup', key: '⇧⌥⌘G', run: ungroupSel, off: () => ![...sel].some(b => b.classList.contains('group')) },
+    '-',
+    { label: 'Flip line direction', icon: 'swap_horiz', run: flipLines, off: () => ![...sel].some(isLine) },
+    '-',
+    { label: 'Stack as a sequence', icon: 'stacks', run: () => stackSequence(), off: () => [...sel].filter(b => isMedia(b)).length < 2 },   // pictures shown one after another in one place
+  ],
+  Tools: [{ label: 'Spelling', icon: 'spellcheck', items: () => [{ label: 'Show spelling suggestions', key: '⌥⌘X', on: spellOn, run: () => setSpelling(!spellOn()) }] },
+    { label: 'Convert LaTeX shortcuts', icon: 'function', on: latexOn, run: () => store('slides-latex', latexOn() ? '0' : undefined) }],
+  Help: [
+    { label: 'Search the menus', icon: 'search', key: '⌥/', run: () => menuInput.focus() },
+    '-',
+    { label: 'Keyboard shortcuts', icon: 'keyboard', key: '⌘/', run: () => showShortcuts(true) },
+  ],
+};
+/* A collaborator's editor (glideshow.org/e/…): one deck of someone else's, so nothing about decks or
+   the library (new, open, copy, rename, trash, Share, history), and not its theme or page size, which stay the owner's. */
+const COLLAB = !!(/** @type {any} */ (window.GLIDESHOW_CLOUD))?.collab;
+if (COLLAB) {
+  const keep = (list, out) => list.filter(it => typeof it !== 'object' || !out.includes(it.label));
+  MENUS.File = MENUS.File.filter(it => typeof it === 'object' && ['Download', 'Print preview', 'Print'].includes(it.label));
+  for (const k of Object.keys(MENUS)) if (Array.isArray(MENUS[k])) MENUS[k] = keep(MENUS[k], ['Theme builder', 'Edit theme', 'Change theme', 'Page setup']);
+}
+const zoomItems = () => [
+  { label: 'Fit', key: '⌘0', on: () => !zoom, run: () => setZoom(null) },
+  ...ZOOMS.map(z => ({ label: z * 100 + '%', on: () => zoom === z, run: () => setZoom(z) })),
+  '-',
+  { label: 'Zoom in', icon: 'zoom_in', key: '⌘+', run: () => zoomStep(1) },
+  { label: 'Zoom out', icon: 'zoom_out', key: '⌘−', run: () => zoomStep(-1) },
+];
+menuButton($('#ed-zoom'), () => zoomItems());
+// Trackpad pinch (and ⌘/ctrl + wheel) zooms around the pointer.
+stage.addEventListener('wheel', e => {
+  if (!e.ctrlKey && !e.metaKey) return;
+  e.preventDefault();
+  setZoom(fitZoom() * Math.exp(-e.deltaY / 100), e.clientX, e.clientY);
+}, { passive: false });
+const SLIDESHOW = [
+  { label: 'Present from this slide', icon: 'slideshow', key: '⌘↵', run: () => present() },
+  { label: 'Present from beginning', icon: 'first_page', key: '⇧⌘↵', run: () => present(0) },
+  { label: 'Present fullscreen', icon: 'fullscreen', run: () => present(cur, { fullscreen: true }) },
+  '-',
+  { label: 'Presenter view', icon: 'co_present', run: () => openDeckTab(cur, true) },
+  { label: 'Open in new tab', icon: 'open_in_new', run: () => openDeckTab(cur) },
+  { label: 'Open as a scrolling page', icon: 'view_day', run: () => window.open('deck.html?view=scroll', '_blank') },   // reveal's scroll view: reads like a page, good on a phone
+];
+document.querySelectorAll('#ed-menubar [data-menu]').forEach(btn => {
+  btn.onclick = () => openAnchor === btn ? closeMenu() : openMenu(btn, MENUS[btn.dataset.menu]);
+  btn.onpointerenter = () => { if (openAnchor?.parentElement === btn.parentElement && openAnchor !== btn) openMenu(btn, MENUS[btn.dataset.menu]); };
+});
+$('#ed-present-menu').onclick = () => openAnchor === $('#ed-present-menu') ? closeMenu() : openMenu($('#ed-present-menu'), SLIDESHOW);
+
+/* Toolbar groups that don't fit move, from the right, into the ⋯ popover (as Slides does). */
+function layoutToolbar() {
+  const bar = $('#ed-toolbar'), pop = $('#ed-more-pop'), more = $('#ed-more-wrap');
+  [...pop.children].forEach(g => bar.insertBefore(g, more));
+  [...bar.querySelectorAll(':scope > .grp')].sort((a, b) => a.dataset.i - b.dataset.i).forEach(g => bar.insertBefore(g, more));
+  more.hidden = true;
+  const groups = [...bar.querySelectorAll(':scope > .grp')].filter(g => g.offsetWidth);
+  while (bar.scrollWidth > bar.clientWidth && groups.length > 1) { more.hidden = false; pop.prepend(groups.pop()); }
+  if (!pop.children.length) pop.classList.remove('open');
+}
+$('#ed-more').onclick = () => { const pop = $('#ed-more-pop'); pop.style.top = $('#ed-toolbar').getBoundingClientRect().bottom + 4 + 'px'; pop.classList.toggle('open'); };
+addEventListener('resize', layoutToolbar);
+document.fonts?.addEventListener('loadingdone', layoutToolbar);   // icon and text widths change when web fonts arrive
+
+/* Tooltips in Slides' style: a small dark pill under the control, label then shortcut. */
+const tip = div('tip');
+document.querySelectorAll('#ed-bar [title]').forEach(e => { e.dataset.tip = e.title; e.removeAttribute('title'); });
+addEventListener('pointerover', e => {
+  const t = e.target.closest?.('[data-tip]');
+  if (!t || openAnchor === t) { tip.remove(); return; }
+  tip.textContent = t.dataset.tip; document.body.append(tip);
+  const r = t.getBoundingClientRect();
+  tip.style.left = Math.max(4, Math.min(r.left + r.width / 2 - tip.offsetWidth / 2, innerWidth - tip.offsetWidth - 4)) + 'px';
+  tip.style.top = r.bottom + 6 + 'px';
+});
+addEventListener('pointerdown', () => tip.remove(), true);
+
+/* Search the menus (⌥/), as Slides: matches every menu item, including submenus, by label. */
+const menuInput = $('#ed-menus input');
+function allMenuItems() {
+  const out = [], walk = (items, path) => { const list = val(items); if (Array.isArray(list)) list.forEach(it => { if (it === '-' || !it.label) return; if (it.items) walk(it.items, path.concat(it.label)); else out.push({ ...it, path }); }); };   // a fetched submenu (File → Open's recent decks), headings and custom bodies aren't searched
+  Object.entries(MENUS).forEach(([name, items]) => walk(items, [name]));
+  return out;
+}
+menuInput.oninput = () => {
+  const q = menuInput.value.trim().toLowerCase();
+  if (!q) { closeMenu(); return; }
+  const hits = allMenuItems().filter(it => it.label.toLowerCase().includes(q) && !val(it.off)).slice(0, 12)
+    .map(it => ({ ...it, label: it.label, key: it.key || it.path.join(' › '), run: () => { menuInput.value = ''; menuInput.blur(); it.run(); } }));
+  openMenu($('#ed-menus'), hits.length ? hits : [{ label: 'No results', off: true, run() {} }]);
+  menuInput.focus();
+};
+menuInput.onkeydown = e => {
+  if (e.key === 'Enter') { e.preventDefault(); openMenuEl?.querySelector('.menu-item:not(:disabled)')?.click(); }
+  if (e.key === 'ArrowDown') { e.preventDefault(); openMenuEl?.querySelector('.menu-item:not(:disabled)')?.focus(); }
+  if (e.key === 'Escape') { menuInput.value = ''; closeMenu(); menuInput.blur(); }
+};
+addEventListener('keydown', e => { if (e.altKey && !e.metaKey && !e.ctrlKey && e.code === 'Slash') { e.preventDefault(); menuInput.focus(); } }, true);

glideshow/editor/js/menus.js

@@ -0,0 +1,93 @@
+/* ---------- menus ---------- */
+
+/* A menu is a list of { label, key, run, off } items and '-' dividers, shown under its anchor. */
+/* One Material-style menu for the menu bar, toolbar dropdowns and (later) context menus. Items are
+   { label, icon, key, run, off, on, items, style } or '-' for a divider; `items` (an array or a function
+   returning one) makes a submenu, shown with ▸. `on` puts a check in the icon column. Arrow keys, Enter
+   and Esc work while a menu is open. */
+/* Shortcut labels as Google writes them: ⌘Z, ⌘+Shift+V, ⌘+Option+Shift+B, Ctrl+M, Option+/. */
+function gkey(k) {
+  if (!k) return '';
+  if (/^⌃⌘\w ⌃⌘\w$/.test(k)) return k.replace(/⌃⌘/g, 'Ctrl+⌘');   // two-step chords, written as Slides does: Ctrl+⌘E Ctrl+⌘G
+  const mods = { '⌘': '⌘', '⌃': 'Ctrl', '⌥': 'Option', '⇧': 'Shift' }, has = c => k.includes(c);
+  const key = k.replace(/[⌘⌃⌥⇧]/g, '').replace('↵', 'Enter');
+  const list = ['⌘', '⌃', '⌥', '⇧'].filter(has).map(c => mods[c]);
+  if (!list.length) return key;
+  return list.length === 1 && list[0] === '⌘' ? '⌘' + key : list.join('+') + '+' + key;
+}
+let openMenuEl = null, openAnchor = null, subMenus = [];   // open submenus, outermost first
+const val = v => typeof v === 'function' ? v() : v;
+const levelOf = m => m === openMenuEl ? 0 : subMenus.indexOf(m) + 1;
+function closeSub(level = 0) { subMenus.splice(level).forEach(m => m.remove()); }   // close submenus deeper than `level`
+function closeMenu() { closeSub(); openMenuEl?.remove(); openAnchor?.classList.remove('open'); openMenuEl = openAnchor = null; }
+function buildMenu(items) {
+  const m = div('menu');
+  m.addEventListener('mousedown', e => e.preventDefault());   // keep the text selection being formatted
+  for (const it of val(items)) {
+    if (it === '-') { m.append(div('menu-sep')); continue; }
+    if (it.head) { const h = div('menu-head'); h.textContent = it.head; m.append(h); continue; }
+    if (it.el) { m.append(it.el()); continue; }   // a custom body, e.g. the table size grid
+    const row = document.createElement('button');
+    row.className = 'menu-item'; row.disabled = !!val(it.off);
+    row.innerHTML = '<span class="menu-icon icon"></span><span class="menu-label"></span><span class="menu-key"></span>';
+    row.children[0].textContent = val(it.on) ? 'check' : it.icon || '';
+    row.children[1].textContent = it.label;
+    if (it.cell) row.classList.add('cell-item');
+    if (it.tile) row.classList.add('tile-item');
+    if (it.svg) { row.children[1].innerHTML = it.svg; row.setAttribute('aria-label', it.label); row.dataset.label = it.label; }   // a picture instead of words, as Slides' dash / line-end menus
+    if (it.style) row.children[1].style.cssText = it.style;
+    if (it.tip) row.dataset.tip = it.tip;
+    if (it.items) {
+      row.classList.add('has-sub'); row.children[2].className = 'menu-key icon'; row.children[2].textContent = 'arrow_right';
+      row.onpointerenter = row.onclick = () => openSub(row, it.items);
+    } else {
+      row.children[2].textContent = gkey(it.key);
+      row.onpointerenter = () => closeSub(levelOf(m));
+      row.onclick = () => { closeMenu(); it.run(); };
+    }
+    m.append(row);
+  }
+  if (val(items).every(it => it === '-' || it.svg || it.narrow || it.el)) m.classList.add('pics');
+  if (val(items).every(it => it.cell || it === '-')) m.classList.add('cell-grid');   // Slides' shape grids
+  if (val(items).every(it => it.tile)) { m.classList.add('tile-grid'); m.querySelectorAll('.tile-item').forEach((r, i) => r.children[1].insertAdjacentHTML('beforeend', `<span class="cap">${val(items)[i].label}</span>`)); }   // layout pictures with names   // picture-only menus are narrow, as Slides
+  return m;
+}
+function placeMenu(m, x, y, flipX) {
+  document.body.append(m);
+  if (x + m.offsetWidth > innerWidth - 8) x = flipX ?? innerWidth - m.offsetWidth - 8;
+  m.style.left = Math.max(8, x) + 'px'; m.style.top = Math.max(8, Math.min(y, innerHeight - m.offsetHeight - 8)) + 'px';
+}
+function openMenu(anchor, items, { up = false } = {}) {
+  closeMenu();
+  const m = buildMenu(items), r = anchor.getBoundingClientRect();
+  if (up) { document.body.append(m); placeMenu(m, r.left, r.top - m.offsetHeight - 6); }   // the insert bar: menus open above it
+  else placeMenu(m, r.left, r.bottom + 2);
+  anchor.classList.add('open'); openMenuEl = m; openAnchor = anchor;
+}
+
+function openSub(row, items) {
+  const list = val(items);
+  if (list?.then) return list.then(l => row.isConnected && openSub(row, l));   // a fetched submenu (File → Open's recent decks)
+  const level = levelOf(row.parentElement);
+  if (subMenus[level]?.dataset.from === row.textContent) return;
+  closeSub(level);
+  const m = buildMenu(list), r = row.getBoundingClientRect();
+  m.dataset.from = row.textContent;
+  placeMenu(m, r.right - 2, r.top - 6, r.left - m.offsetWidth + 2);
+  subMenus.push(m);
+}
+addEventListener('pointerdown', e => {
+  if (openMenuEl && ![openMenuEl, ...subMenus, openAnchor].some(el => el?.contains(e.target))) closeMenu();
+}, true);
+addEventListener('keydown', e => {
+  if (!openMenuEl) return;
+  const menu = [...subMenus].reverse().find(m => m.contains(document.activeElement)) || openMenuEl, level = levelOf(menu);
+  const rows = [...menu.querySelectorAll('.menu-item:not(:disabled)')], i = rows.indexOf(document.activeElement);
+  const take = () => { e.preventDefault(); e.stopImmediatePropagation(); };
+  const back = () => { const from = menu.dataset.from, parent = level > 1 ? subMenus[level - 2] : openMenuEl; closeSub(level - 1); [...parent.children].find(r => r.textContent === from)?.focus(); };
+  if (e.key === 'Escape') { take(); if (level) back(); else closeMenu(); }
+  else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { take(); rows[(i + (e.key === 'ArrowDown' ? 1 : -1) + rows.length) % rows.length]?.focus(); }
+  else if (e.key === 'ArrowRight' && document.activeElement?.classList.contains('has-sub')) { take(); document.activeElement.click(); subMenus.at(-1)?.querySelector('.menu-item:not(:disabled)')?.focus(); }
+  else if (e.key === 'ArrowLeft' && level) { take(); back(); }
+  else if (e.key === 'Enter' && i >= 0) { take(); rows[i].click(); }
+}, true);

glideshow/editor/js/motion.js

@@ -0,0 +1,148 @@
+/* ---------- transitions (Slide → Transition) ---------- */
+
+/* Slides' transitions mapped onto reveal.js, stored per slide as data-transition / data-transition-speed.
+   Dissolve and Fade both fade (written differently so the choice round-trips); Slide from left is ours. */
+const TRANSITIONS = [['none', 'None'], ['fade', 'Dissolve'], ['fade-in fade-out', 'Fade'], ['slide', 'Slide from right'],
+  ['sl-left', 'Slide from left'], ['convex', 'Flip'], ['concave', 'Cube'], ['zoom', 'Gallery'], ['morph', 'Morph']];
+const SPEEDS = ['slow', '', 'fast'];
+/* Morph is reveal's Auto-Animate (Keynote's Magic Move): data-auto-animate on the slide, its speed as
+   data-auto-animate-duration. Boxes pair with the previous slide's by data-morph (Duplicate slide sets it), else by id. */
+const MORPH_S = { slow: '1.4', fast: '0.5' };
+const kindOf = s => s.hasAttribute('data-auto-animate') ? 'morph' : s.dataset.transition || 'none';
+const speedOf = s => s.hasAttribute('data-auto-animate') ? Object.keys(MORPH_S).find(k => MORPH_S[k] === s.dataset.autoAnimateDuration) || '' : s.dataset.transitionSpeed || '';
+const trans = $('#ed-trans');
+$('#ed-t-kind').innerHTML = TRANSITIONS.map(([v, l]) => `<option value="${v}">${l}</option>`).join('');
+function setTransPanel(open) { trans.hidden = !open; if (open) { fmt.hidden = true; $('#ed-theme').hidden = true; $('#ed-comments').hidden = true; updateTransPanel(); } fit(); }
+function updateTransPanel() {
+  if (trans.hidden || !slides[cur]) return;
+  renderAnims();
+  const s = slides[cur];
+  $('#ed-t-kind').value = kindOf(s);
+  $('#ed-t-speed').value = Math.max(0, SPEEDS.indexOf(speedOf(s)));
+}
+function writeTransition(s) {
+  const k = $('#ed-t-kind').value, sp = SPEEDS[+$('#ed-t-speed').value];
+  s.removeAttribute('data-auto-animate'); delete s.dataset.autoAnimateDuration;
+  if (k === 'none') { delete s.dataset.transition; delete s.dataset.transitionSpeed; return; }
+  if (k === 'morph') { delete s.dataset.transition; delete s.dataset.transitionSpeed; s.setAttribute('data-auto-animate', ''); if (sp) s.dataset.autoAnimateDuration = MORPH_S[sp]; return; }
+  s.dataset.transition = k;
+  if (sp) s.dataset.transitionSpeed = sp; else delete s.dataset.transitionSpeed;
+}
+$('#ed-t-kind').onchange = $('#ed-t-speed').onchange = () => { writeTransition(slides[cur]); commit(); playTransition(); renderAnims(); };
+$('#ed-t-all').onclick = () => { slides.forEach(writeTransition); commit(); setStatus('Transition applied to all slides'); };
+$('#ed-trans-close').onclick = () => setTransPanel(false);
+$('#ed-transition').onclick = () => setTransPanel(trans.hidden);
+/* Object animations, as reveal fragments in the order of data-fragment-index (Motion panel). */
+const EFFECTS = [['appear', 'Appear'], ['fade-in', 'Fade in'], ['fade-right', 'Fly in from left'], ['fade-left', 'Fly in from right'],
+  ['fade-up', 'Fly in from bottom'], ['fade-down', 'Fly in from top'], ['zoom-in', 'Zoom in'],
+  // reveal's other fragment styles: out, dimmed, shown for one step only, and emphasis on something already there
+  ['fade-out', 'Fade out'], ['semi-fade-out', 'Dim'], ['fade-in-then-out', 'Fade in, then out'], ['fade-in-then-semi-out', 'Fade in, then dim'],
+  ['highlight-current-blue', 'Highlight while current'], ['grow', 'Grow'], ['shrink', 'Shrink'], ['strike', 'Strike through']];
+const effectOf = b => EFFECTS.find(([c]) => b.classList.contains(c))?.[0] || 'fade-in';
+const animBoxes = () => boxes().filter(b => b.classList.contains('fragment'))
+  .map((b, i) => [b, +(b.dataset.fragmentIndex ?? i), 'withPrevious' in b.dataset ? 1 : 0])
+  .sort((a, z) => a[1] - z[1] || a[2] - z[2]).map(x => x[0]);   // within a step, the "with previous" ones follow
+/* "With previous" shares the previous animation's step (same data-fragment-index); data-with-previous keeps the choice. */
+const renumber = list => { let n = -1; list.forEach((b, i) => { if (!(i && 'withPrevious' in b.dataset)) n++; b.dataset.fragmentIndex = n; }); };
+const openAnims = new Set();
+function setEffect(b, eff) { b.classList.remove(...EFFECTS.map(e => e[0])); b.classList.add('fragment', eff); }
+function addAnim() {   // boxes animated together (several selected) share one click: the first on click, the rest with previous
+  const list = animBoxes();
+  [...sel].filter(b => !b.classList.contains('fragment')).forEach((b, i) => { setEffect(b, 'fade-in'); if (i) b.dataset.withPrevious = ''; list.push(b); });
+  renumber(list); commit(); renderAnims();
+}
+function removeAnim(b) {
+  b.classList.remove('fragment', ...EFFECTS.map(e => e[0])); delete b.dataset.fragmentIndex; delete b.dataset.withPrevious; delete b.dataset.build;
+  renumber(animBoxes()); commit(); renderAnims();
+}
+function moveAnim(from, to) { const list = animBoxes(); list.splice(to, 0, ...list.splice(from, 1)); renumber(list); commit(); renderAnims(); }
+const animLabel = b => (content(b)?.textContent.trim().slice(0, 40)) || (isMedia(b) ? (b.classList.contains('video') ? 'Video' : 'Image') : b.dataset.shape ? b.dataset.shape[0].toUpperCase() + b.dataset.shape.slice(1) : 'Text box');
+function renderAnims() {
+  const host = $('#ed-anim-list'); if (!host || trans.hidden) return;
+  const canAdd = [...sel].some(b => !b.classList.contains('fragment')), kind = slides[cur] ? kindOf(slides[cur]) : 'none';
+  $('#ed-anim-add').disabled = !canAdd;
+  $('#ed-anim-add').lastChild.textContent = canAdd || sel.size ? 'Add animation' : 'Select an object to animate';   // Slides' empty-state label
+  $('#ed-anim-play').disabled = kind === 'none' && !animBoxes().length;
+  trans.classList.toggle('no-trans', kind === 'none');
+  const t = TRANSITIONS.find(x => x[0] === kind); $('#ed-t-name').textContent = t ? t[1] : 'None';
+  host.replaceChildren(...animBoxes().map((b, i) => {
+    const open = sel.has(b) || openAnims.has(b), withPrev = 'withPrevious' in b.dataset;
+    const r = div('anim-row' + (sel.has(b) ? ' on' : '') + (open ? ' open' : '')); r.draggable = true; r.dataset.i = String(i);
+    r.innerHTML = `<div class="anim-head"><span class="n icon" title="Drag to reorder">drag_indicator</span><span class="icon chev">chevron_right</span>
+      <span class="eff"></span><span class="what"></span><button title="Delete animation"><span class="icon">delete</span></button></div>
+      <div class="anim-body"><select class="e">${EFFECTS.map(([v, l]) => `<option value="${v}">${l}</option>`).join('')}</select>
+      <select class="t"><option value="click">On click</option><option value="with">With previous</option></select>
+      <label class="para"><input type="checkbox"> By paragraph</label></div>`;
+    r.querySelector('.eff').textContent = `${EFFECTS.find(e => e[0] === effectOf(b))[1]}${b.dataset.build === 'paragraph' ? ' by paragraph' : ''}  (${withPrev ? 'With previous' : 'On click'})`;
+    r.querySelector('.what').textContent = animLabel(b);
+    const se = r.querySelector('select.e'), tr = r.querySelector('select.t'); se.value = effectOf(b); tr.value = withPrev ? 'with' : 'click';
+    se.onchange = () => { setEffect(b, se.value); commit(); renderAnims(); };
+    tr.onchange = () => { if (tr.value === 'with') b.dataset.withPrevious = ''; else delete b.dataset.withPrevious; renumber(animBoxes()); commit(); renderAnims(); };
+    const para = /** @type {HTMLInputElement} */ (r.querySelector('.para input')), textual = !isMedia(b) && !isStroke(b) && !!content(b)?.textContent.trim();
+    /** @type {HTMLElement} */ (r.querySelector('.para')).hidden = !textual; para.checked = b.dataset.build === 'paragraph';   // Slides' "By paragraph": one step per paragraph or bullet
+    para.onchange = () => { if (para.checked) b.dataset.build = 'paragraph'; else delete b.dataset.build; commit(); renderAnims(); };
+    r.querySelector('.anim-head button').onclick = () => removeAnim(b);
+    r.querySelector('.anim-head').onclick = e => {
+      if (e.target.closest('button')) return;
+      if (open && !sel.has(b)) openAnims.delete(b); else openAnims.add(b);
+      sel = new Set([b]); drawOverlay(); updateToolbar(); renderAnims();
+    };
+    r.ondragstart = e => e.dataTransfer.setData('text/x-anim', String(i));
+    r.ondragover = e => { e.preventDefault(); r.classList.add('drop'); };
+    r.ondragleave = () => r.classList.remove('drop');
+    r.ondrop = e => { e.preventDefault(); r.classList.remove('drop'); const from = +e.dataTransfer.getData('text/x-anim'); if (from !== i) moveAnim(from, i); };
+    return r;
+  }));
+}
+/* Preview: the slide's animations one after another on the canvas. */
+async function playAnims() {
+  const kf = { appear: [{ opacity: 0 }, { opacity: 0, offset: .99 }, { opacity: 1 }], 'fade-in': [{ opacity: 0 }, { opacity: 1 }],
+    'fade-right': [{ opacity: 0, translate: '-20% 0' }, { opacity: 1, translate: '0 0' }], 'fade-left': [{ opacity: 0, translate: '20% 0' }, { opacity: 1, translate: '0 0' }],
+    'fade-up': [{ opacity: 0, translate: '0 20%' }, { opacity: 1, translate: '0 0' }], 'fade-down': [{ opacity: 0, translate: '0 -20%' }, { opacity: 1, translate: '0 0' }],
+    'zoom-in': [{ opacity: 0, scale: .1 }, { opacity: 1, scale: 1 }], 'fade-out': [{ opacity: 1 }, { opacity: 0 }], 'semi-fade-out': [{ opacity: 1 }, { opacity: .5 }],
+    'fade-in-then-out': [{ opacity: 0 }, { opacity: 1, offset: .3 }, { opacity: 1, offset: .7 }, { opacity: 0 }], 'fade-in-then-semi-out': [{ opacity: 0 }, { opacity: 1, offset: .4 }, { opacity: .5 }],
+    'highlight-current-blue': [{ color: 'inherit' }, { color: '#1b6ac9' }, { color: 'inherit' }], grow: [{ scale: 1 }, { scale: 1.3 }, { scale: 1 }],
+    shrink: [{ scale: 1 }, { scale: .7 }, { scale: 1 }], strike: [{ textDecoration: 'none' }, { textDecoration: 'line-through' }] };
+  const list = animBoxes();
+  list.forEach(b => { b.style.visibility = 'hidden'; });
+  for (const b of list) { b.style.visibility = ''; await b.animate(kf[effectOf(b)], { duration: 500, easing: 'ease' }).finished; await new Promise(r => setTimeout(r, 250)); }
+}
+$('#ed-anim-add').onclick = addAnim;
+$('#ed-anim-play').onclick = async () => { playTransition(); await new Promise(r => setTimeout(r, 300)); playAnims(); };
+
+/* Preview the current slide's transition on the canvas (an approximation of reveal's). */
+function playTransition() {
+  const s = slides[cur], k = kindOf(s), ms = { slow: 1200, fast: 400 }[speedOf(s)] || 800;
+  if (k === 'morph') return playMorph(s, (+s.dataset.autoAnimateDuration || 1) * 1000);
+  const frames = { fade: [{ opacity: 0 }, { opacity: 1 }], 'fade-in fade-out': [{ opacity: 0 }, { opacity: 1 }],
+    slide: [{ transform: 'translateX(100%)' }, { transform: 'none' }], 'sl-left': [{ transform: 'translateX(-100%)' }, { transform: 'none' }],
+    convex: [{ transform: 'perspective(2000px) rotateY(90deg)' }, { transform: 'none' }], concave: [{ transform: 'perspective(2000px) rotateY(-90deg)' }, { transform: 'none' }],
+    zoom: [{ transform: 'scale(.2)', opacity: 0 }, { transform: 'none', opacity: 1 }] }[k];
+  if (frames) s.animate(frames, { duration: ms, easing: 'cubic-bezier(.26,.86,.44,.985)' });
+}
+
+/* Morph's preview: each box that has a partner on the slide before moves from the partner's place and size; the rest fade in. */
+function playMorph(s, ms) {
+  const prev = slides[slides.indexOf(s) - 1]; if (!prev) return;
+  const key = b => b.dataset.morph || b.id, before = new Map(boxes(prev).map(b => [key(b), b]));
+  boxes(s).filter(b => !parentBox(b)).forEach(b => {
+    const p = before.get(key(b)), at = ['left', 'top', 'width', 'height'];
+    if (!p) return b.animate([{ opacity: 0 }, { opacity: 1 }], { duration: ms, easing: 'ease' });
+    b.animate([Object.fromEntries(at.map(k => [k, p.style[k]])), Object.fromEntries(at.map(k => [k, b.style[k]]))], { duration: ms, easing: 'ease' });
+  });
+}
+
+/* Arrange → Stack as a sequence: the selected pictures in one place, shown one after another (a plot that updates in
+   place, as reveal's r-stack): the first fades out as the second appears, each middle one shows for its step only, the
+   last stays. */
+function stackSequence() {
+  const pics = [...sel].filter(b => isMedia(b) && !parentBox(b)).sort((a, z) => boxes().indexOf(a) - boxes().indexOf(z));
+  if (pics.length < 2) return setStatus('Select two or more pictures to stack', 'error');
+  const g = geo(pics[0]), list = animBoxes().filter(b => !pics.includes(b));
+  pics.forEach(b => { place(b, { ...geo(b), x: g.x, y: g.y, w: g.w, h: g.w * geo(b).h / geo(b).w }); b.classList.remove('fragment', ...EFFECTS.map(e => e[0])); delete b.dataset.withPrevious; delete b.dataset.build; });
+  pics.slice(1).forEach((b, i) => {
+    setEffect(b, i === pics.length - 2 ? 'fade-in' : 'fade-in-then-out'); list.push(b);
+    if (i === 0) { setEffect(pics[0], 'fade-out'); pics[0].dataset.withPrevious = ''; list.push(pics[0]); }
+  });
+  renumber(list); commit(); render(); renderAnims(); setStatus(`${pics.length} pictures stacked: they show one after another`);
+}

glideshow/editor/js/notes.js

@@ -0,0 +1,63 @@
+/* ---------- speaker notes ---------- */
+
+/* The pane under the slide edits the slide's <aside class="notes"> (what reveal's speaker view shows).
+   Its height and whether it's shown are remembered per browser. */
+const notesPane = $('#ed-notes'), store = (k, v) => { try { v === undefined ? localStorage.removeItem(k) : localStorage.setItem(k, v); } catch {} };
+const stored = k => { try { return localStorage.getItem(k); } catch { return null; } };
+document.body.classList.toggle('ruler-off', !rulersShown());
+/* Dark chrome: the stored choice, else the system's. */
+const darkOn = () => { const v = stored('slides-dark'); return v ? v === '1' : matchMedia('(prefers-color-scheme: dark)').matches; };
+function setDark(on) { store('slides-dark', on ? '1' : '0'); document.body.classList.toggle('dark', on); drawRulers(); }
+document.body.classList.toggle('dark', darkOn());
+matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { if (!stored('slides-dark')) { document.body.classList.toggle('dark', darkOn()); drawRulers(); } });
+/* Sticky notes (Notes for AI, .box.note) on the slide and in the filmstrip: View → Show sticky notes, remembered per
+   browser. Hidden, they can't be picked by Select all or a drag either (so nothing moves or deletes them unseen); the list
+   above the speaker notes still names them, and choosing one there, or adding a note, shows them again. */
+const stickiesShown = () => stored('slides-stickies') !== '0';
+function setStickies(/** @type {boolean} */ on) {
+  store('slides-stickies', on ? undefined : '0'); document.body.classList.toggle('stickies-off', !on);
+  if (!on && [...sel].some(b => b.classList.contains('note'))) { stopEdit(); sel = new Set([...sel].filter(b => !b.classList.contains('note'))); drawOverlay(); updateToolbar(); }
+  renderThumbs?.();
+}
+document.body.classList.toggle('stickies-off', !stickiesShown());
+/** The boxes one can pick on this slide: all of them, but sticky notes only while they're shown. */
+const pickable = () => boxes().filter(b => stickiesShown() || !b.classList.contains('note'));
+/* This slide's notes for the AI, listed above the speaker notes (click one to select it). */
+function showAINotes() {
+  const list = [...(slides[cur]?.querySelectorAll('.box.note') || [])], host = $('#ed-ai-notes');
+  host.hidden = !list.length;
+  host.replaceChildren(...list.map(b => { const c = div('ai-note'); c.innerHTML = '<span class="icon">sticky_note_2</span><span></span><small></small>';
+    c.children[1].textContent = b.textContent.trim() || '(empty)'; c.children[2].textContent = (b.dataset.time || '').replace('T', ' ');
+    c.onclick = () => { stopEdit(); if (!stickiesShown()) setStickies(true); sel = new Set([b]); drawOverlay(); updateToolbar(); }; return c; }));
+}
+function showNotes() {
+  showAINotes();
+  if (document.activeElement === notesPane && notesPane.dataset.slide === String(cur)) return;   // don't move the caret
+  notesPane.innerHTML = slides[cur]?.querySelector(':scope > aside.notes')?.innerHTML.trim() || '';
+  notesPane.dataset.slide = cur;
+}
+notesPane.oninput = () => {
+  const s = slides[cur];
+  let a = s.querySelector(':scope > aside.notes');
+  const html = notesPane.textContent.trim() ? notesPane.innerHTML.trim() : '';
+  if (!html) { a?.remove(); } else { if (!a) { a = document.createElement('aside'); a.className = 'notes'; s.append(a); } a.innerHTML = html; }
+  scheduleSave();
+};
+notesPane.onblur = () => { pushHistory(); };
+function setNotesVisible(on) {   // collapsed to a thin bar by default, as Slides; the choice is remembered
+  document.body.classList.toggle('notes-off', !on);
+  store('slides-notes-off', on ? '0' : '1');
+  fit();
+}
+function setNotesHeight(h) {
+  notesPane.style.height = Math.max(48, Math.min(h, innerHeight * 0.6)) + 'px';
+  store('slides-notes-h', parseInt(notesPane.style.height));
+  fit();
+}
+$('#ed-splitter').addEventListener('pointerdown', e => {
+  const y0 = e.clientY, h0 = notesPane.offsetHeight;
+  if (document.body.classList.contains('notes-off')) setNotesVisible(true);
+  drag(e, ev => setNotesHeight(h0 - (ev.clientY - y0)), () => {});
+});
+if (stored('slides-notes-h')) notesPane.style.height = stored('slides-notes-h') + 'px';
+if (stored('slides-notes-off') !== '0') document.body.classList.add('notes-off');