glideshow 0.1.2__py3-none-any.whl

glideshow/editor/js/phone-home.js

@@ -0,0 +1,51 @@
+/* ---------- phone: the home screen ---------- */
+/* The Slides app's home on a phone: a search bar with the menu, folder and account buttons; the sort label and the
+   grid/list toggle under it; two columns of decks; a round + at the bottom right. It rearranges home.html's own
+   controls (their handlers stay), and phone.css styles them. */
+if (PHONE) (() => {
+  const el = (tag, cls, html = '') => Object.assign(document.createElement(tag), { className: cls, innerHTML: html });
+  const iconBtn = (icon, title) => { const b = el('button', 'ph-icon-btn', `<span class="icon">${icon}</span>`); b.title = title; return b; };
+  const app = $('#hm-app-more'), q = $('#hm-q');
+  // the search bar: ≡ | Search | folder | account
+  const bar = el('div', 'ph-search'), menu = iconBtn('menu', 'Menu'), folder = iconBtn('folder', 'Folders'), me = el('button', 'ph-avatar');
+  const cloud = window.GLIDESHOW_CLOUD, user = typeof cloud === 'object' ? cloud?.name || cloud?.user : '';
+  me.title = user || 'Glideshow'; me.innerHTML = user ? '' : '<img src="/editor/glideshow.svg" alt="">'; if (user) me.textContent = user[0].toUpperCase();
+  q.placeholder = 'Search in Glideshow';
+  bar.append(menu, q, folder, me);
+  $('.hm-search').replaceWith(bar);
+  menu.onclick = me.onclick = e => {   // the app menu, under the button tapped (home.html anchors it to its own ⋮, hidden here)
+    e.stopPropagation(); app.click();
+    const m = /** @type {HTMLElement} */ (document.querySelector('.menu')), r = /** @type {Element} */ (e.currentTarget).getBoundingClientRect();
+    if (m) { m.classList.add('ph-menu'); m.style.left = Math.max(8, Math.min(r.left, innerWidth - m.offsetWidth - 8)) + 'px'; m.style.top = r.bottom + 8 + 'px'; }
+  };
+  // the folder button: the library's folders (and a new one), to go into
+  folder.onclick = async e => {
+    e.stopPropagation();
+    const fs = await fetch('/api/folders').then(r => r.json()).catch(() => []);
+    const go = f => () => { location.hash = f ? '/' + f.split('/').map(encodeURIComponent).join('/') : ''; };
+    const items = [['home', 'All decks', go('')], ...(Array.isArray(fs) ? fs : []).map(f => ['folder', f.replace(/\//g, ' › '), go(f)]), '-', ['create_new_folder', 'New folder', () => $('#hm-newfolder').click()]];
+    document.querySelector('.menu')?.remove();
+    const m = el('div', 'menu ph-menu');
+    for (const it of items) {
+      if (it === '-') { m.append(el('div', 'menu-sep')); continue; }
+      const [icon, label, run] = it, b = el('button', 'menu-item', `<span class="menu-icon icon">${icon}</span><span class="menu-label"></span>`);
+      b.querySelector('.menu-label').textContent = label; b.onclick = ev => { ev.stopPropagation(); m.remove(); run(); }; m.append(b);
+    }
+    document.body.append(m);
+    const r = folder.getBoundingClientRect();
+    m.style.left = Math.max(8, Math.min(r.left, innerWidth - m.offsetWidth - 8)) + 'px'; m.style.top = r.bottom + 4 + 'px';
+    setTimeout(() => addEventListener('pointerdown', ev => { if (!m.contains(/** @type {Node} */ (ev.target))) m.remove(); }, { once: true }));
+  };
+  // under the search: "Last opened by me ↓" (or "Title"), which flips the sort, and the grid/list toggle
+  const sort = $('#hm-sort'), view = $('#hm-view'), row = el('div', 'ph-sortrow'), label = el('button', 'ph-sort');
+  const showSort = () => { label.innerHTML = `<span></span><span class="icon">arrow_downward</span>`; label.firstChild.textContent = sort.classList.contains('on') ? 'Title' : 'Last opened by me'; };
+  new MutationObserver(showSort).observe(sort, { attributes: true, attributeFilter: ['class'] }); showSort();
+  label.onclick = () => sort.click();
+  const tools = el('span', 'ph-sorttools'); tools.append(phoneThemeButton(), view);
+  row.append(label, tools);
+  $('.hm-head').after(row);
+  // + : a new presentation, as the round button at the bottom right
+  const fab = $('#hm-new'); fab.className = 'ph-fab'; fab.title = 'New presentation'; fab.innerHTML = '<span class="icon">add</span>';
+  fab.addEventListener('click', () => { try { sessionStorage.setItem('ph-open-edit', '1'); } catch {} }, true);   // a new deck opens for editing, as the app
+  document.body.append(fab);
+})();

glideshow/editor/js/phone-mode.js

@@ -0,0 +1,73 @@
+/* ---------- phone mode ---------- */
+/* Loaded first in <head>: on a phone (a coarse pointer and a short screen side of 600 CSS px or less, in portrait or
+   landscape; not an iPad) the page gets Google Slides' iPhone app instead of the desktop chrome. `phone` on <html>
+   switches editor/phone.css on, PHONE tells editor/js/phone-*.js. ?phone=1 / ?phone=0 force it for this load. */
+const PHONE = (() => {
+  const q = new URLSearchParams(location.search).get('phone');
+  return q === '1' || (q !== '0' && matchMedia('(pointer: coarse)').matches && Math.min(screen.width, screen.height) <= 600);
+})();
+if (PHONE) {
+  document.documentElement.classList.add('phone');
+  if ('phoneViewport' in document.documentElement.dataset && !document.querySelector('meta[name=viewport]')) {
+    const m = document.createElement('meta'); m.name = 'viewport';
+    m.content = 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content';
+    document.head.append(m);
+  }
+}
+/* A home-screen app on iOS (WebKit bug 297779 and others, iOS 17–26): after the keyboard, WebKit can keep laying the page
+   out for a viewport about a status bar shorter than the screen, until the app is quit: the page rides up under the
+   status bar with a band at the bottom. So there the page keeps the tallest height the app has had in this orientation
+   (never more than the screen), not a viewport unit (html.ph-app, --ph-app-h, phone.css): iOS 27 gives 100lvh more
+   than the screen, and 100% or dvh can be left short. While the keyboard is up (html.ph-kb) the page is the visible
+   area instead, its height and where it is (iOS slides the visible area down the page to show the caret: --ph-vv-top),
+   so the text toolbar sits on the keyboard. And when the height stays short once nothing is being typed,
+   hiding the page and showing it again makes WebKit measure afresh (the scroll positions inside kept); at most once a
+   second, so it can't loop. */
+if (PHONE && (matchMedia('(display-mode: standalone)').matches || navigator['standalone'])) (() => {
+  const root = document.documentElement;
+  /** @type {Record<number, number>} */ const tall = {};   // the largest height seen, per width (each orientation)
+  const typing = () => { const a = document.activeElement; return !!a && (/** @type {HTMLElement} */ (a).isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(a.tagName)); };
+  const size = () => {
+    const w = innerWidth, screenH = w > innerHeight ? Math.min(screen.width, screen.height) : Math.max(screen.width, screen.height);
+    tall[w] = Math.min(screenH, Math.max(tall[w] || 0, innerHeight));
+    const vv = visualViewport, seen = Math.min(innerHeight, vv?.height || innerHeight), kb = typing() && tall[w] - seen > 120;   // a keyboard is at least this tall
+    root.classList.toggle('ph-kb', kb);
+    root.style.setProperty('--ph-app-h', (kb ? Math.round(seen) : tall[w]) + 'px');
+    root.style.setProperty('--ph-vv-top', (kb ? Math.round(vv?.offsetTop || 0) : 0) + 'px');
+    return w;
+  };
+  root.classList.add('ph-app'); size();
+  let last = 0;
+  const heal = () => {
+    const w = size();
+    if (typing() || tall[w] - innerHeight <= 4 || Date.now() - last < 1000 || !document.body) return;
+    last = Date.now();
+    const keep = [...document.querySelectorAll('*')].filter(e => e.scrollTop || e.scrollLeft).map(e => ({ e, t: e.scrollTop, l: e.scrollLeft }));
+    const b = document.body; b.style.display = 'none'; void b.offsetHeight; b.style.display = '';
+    keep.forEach(({ e, t, l }) => { e.scrollTop = t; e.scrollLeft = l; });
+  };
+  const soon = () => setTimeout(heal, 150);
+  addEventListener('focusout', soon); addEventListener('focusin', () => setTimeout(size, 150)); addEventListener('pageshow', soon); addEventListener('resize', heal);
+  visualViewport?.addEventListener('resize', heal); visualViewport?.addEventListener('scroll', () => requestAnimationFrame(size));
+  document.addEventListener('visibilitychange', () => { if (!document.hidden) soon(); });
+})();
+/* The light / dark switch on the phone (Thermal only; the app's own look is always dark): a sun or moon button that
+   flips the same choice as the desktop's (setDark: js/notes.js in the editor, js/theme-toggle.js on Home). */
+function phoneThemeButton() {
+  const b = document.createElement('button'); b.className = 'ph-icon-btn ph-theme'; b.type = 'button';
+  const show = () => { const dark = document.body.classList.contains('dark'); b.innerHTML = `<span class="icon">${dark ? 'light_mode' : 'dark_mode'}</span>`; b.title = dark ? 'Light mode' : 'Dark mode'; };
+  b.onclick = () => window['setDark']?.(!document.body.classList.contains('dark'));
+  new MutationObserver(show).observe(document.body, { attributes: true, attributeFilter: ['class'] }); show();
+  return b;
+}
+/* Phone layouts, all three on by default: thumb: the editing actions in a pill above the
+   filmstrip, the title on top. float: the format bar floats over the selection. shelf: Home as one column, the latest
+   deck large, the rest as rows. ?layout=thumb,float,shelf picks some (remembered); ?layout= turns them all off. */
+if (PHONE) {
+  const q = new URLSearchParams(location.search), all = 'shelf thumb float';
+  let lay = all;
+  try { if (q.has('layout')) localStorage.setItem('glideshow-phone-layout', q.get('layout') || 'none'); lay = localStorage.getItem('glideshow-phone-layout') ?? all; }
+  catch { if (q.has('layout')) lay = q.get('layout') || 'none'; }
+  if (lay && lay !== 'none') document.documentElement.dataset.layout = lay.split(/[\s,+]+/).filter(Boolean).join(' ');
+}
+const phoneLayout = l => (document.documentElement.dataset.layout || '').split(' ').includes(l);

glideshow/editor/js/phone-sheets.js

@@ -0,0 +1,153 @@
+/* ---------- phone: bottom sheets, and the Insert sheet ---------- */
+/* A sheet rises over the bottom 442 pt of the screen while the editor slides up to keep the slide in view (the top bar
+   goes off the top), with no scrim and no grab handle. Its pages push in from the right, iOS style, under a header with
+   the page's title (and ‹ back on pushed pages). A tap on the canvas closes it. The Insert sheet (+ in the top bar):
+   Comment, Text, Image ›, Shape ›, Line ›, Table ›, Link. */
+/** @type {{ open: (page: any) => void, push: (page: any) => void, close: () => void, isOpen: () => boolean }} */
+let phoneSheet = { open: () => {}, push: () => {}, close: () => {}, isOpen: () => false };
+/** The Insert sheet. */
+let phoneInsert = () => {};
+/** A colour panel: 'color' (text), 'hilite', 'fill' or 'stroke' (border). @type {(what: string) => void} */
+let phoneColors = () => {};
+if (PHONE) (() => {
+  const el = (tag, cls, html = '') => Object.assign(document.createElement(tag), { className: cls, innerHTML: html });
+  const root = document.documentElement;
+  const sheet = el('div', 'ph-sheet'); sheet.id = 'ph-sheet';
+  document.body.append(sheet);
+  const moving = () => ['#ph-top', 'main', '#ph-film', '#ph-tools', '#ph-view'].map(s => /** @type {HTMLElement} */ ($(s))).filter(Boolean);
+  let stack = [];
+
+  /* a page: { title, build(body) }; rows are [icon, label, run, more?] */
+  function pageEl(page, back) {
+    const p = el('div', 'ph-page'), head = el('div', 'ph-page-head'), body = el('div', 'ph-page-body');
+    if (back) { const b = el('button', 'ph-icon-btn ph-back', '<span class="icon">arrow_back_ios_new</span>'); b.title = 'Back'; b.onclick = pop; head.append(b); }
+    head.append(Object.assign(el('div', 'ph-page-title'), { textContent: page.title }));
+    page.build(body);
+    if (page.bare) p.append(body); else p.append(head, body);   // bare: rows from the top, no header (13-present-menu.png)
+    return p;
+  }
+  function open(page) {
+    stack = [page]; sheet.replaceChildren(pageEl(page, false));
+    root.classList.add('ph-sheet-open');
+    // the editor slides up so the slide sits in the space above the sheet
+    const f = (root.classList.contains('ph-view') ? $('#ph-view .ph-vslide.cur') || frame : frame).getBoundingClientRect(), top = innerHeight - sheet.offsetHeight, safe = parseFloat(getComputedStyle(root).getPropertyValue('--ph-safe-top')) || 0;
+    const shift = Math.max(0, (f.top + f.bottom) / 2 - (safe + top) / 2);
+    moving().forEach(e => { e.style.transform = `translateY(${-shift}px)`; });
+  }
+  function push(page) {
+    const p = pageEl(page, true), was = /** @type {HTMLElement} */ (sheet.lastElementChild);
+    stack.push(page); p.classList.add('in'); sheet.append(p);
+    requestAnimationFrame(() => { p.classList.remove('in'); was?.classList.add('out'); });
+    setTimeout(() => was?.remove(), 260);
+  }
+  function pop() {
+    if (stack.length < 2) return close();
+    stack.pop(); const page = stack[stack.length - 1], cur = sheet.lastElementChild, p = pageEl(page, stack.length > 1);
+    p.classList.add('out'); sheet.prepend(p);
+    requestAnimationFrame(() => { p.classList.remove('out'); cur?.classList.add('in'); });
+    setTimeout(() => cur?.remove(), 260);
+  }
+  function close() {
+    if (!stack.length) return;
+    stack = []; root.classList.remove('ph-sheet-open');
+    moving().forEach(e => { e.style.transform = ''; });
+    setTimeout(() => { if (!stack.length) sheet.replaceChildren(); }, 260);
+  }
+  phoneSheet = { open, push, close, isOpen: () => stack.length > 0 };
+  stage.addEventListener('pointerdown', e => { if (stack.length) { e.stopImmediatePropagation(); e.preventDefault(); close(); } }, true);   // a tap on the canvas closes it
+
+  const rows = (body, list) => list.forEach(([icon, label, run, more, off]) => {
+    const r = el('button', 'ph-row', `<span class="icon">${icon}</span><span class="ph-row-label"></span>${more ? '<span class="icon ph-more">chevron_right</span>' : ''}`);
+    r.querySelector('.ph-row-label').textContent = label; r.disabled = !!off; r.onclick = run; body.append(r);
+  });
+  const done = run => () => { close(); run(); };
+
+  /* ---- Insert ---- */
+  const S = 0.4;   // a new shape: a square 0.4 of the slide's width, centred (r04)
+  const addSquare = (v, extra) => { const s = W * S; const b = addShape(v, { x: (W - s) / 2, y: (H - s) / 2, w: s, h: s }, extra); sel = new Set([b]); drawOverlay(); updateToolbar(); };
+  const shapePage = {
+    title: 'Shape',
+    build(body) {
+      const tabs = el('div', 'ph-tabs'), grid = el('div', 'ph-shape-grid');
+      const show = i => {
+        tabs.querySelectorAll('button').forEach((t, j) => t.classList.toggle('on', i === j));
+        grid.replaceChildren(...SHAPE_GROUPS[i][2].filter(it => it !== '-').map(([v, label, extra]) => {
+          const c = el('button', 'ph-shape-cell', shapePic(v, extra)); c.title = label; c.onclick = done(() => addSquare(v, extra)); return c;
+        }));
+      };
+      SHAPE_GROUPS.forEach(([label], i) => { const t = el('button', ''); t.textContent = label; t.onclick = () => show(i); tabs.append(t); });
+      body.append(tabs, grid); show(0);
+    },
+  };
+  const LINES = [['line', 'Line', 'pen_size_2'], ['arrowline', 'Arrow', 'arrow_right_alt'], ['elbow', 'Elbow connector', 'turn_right'], ['curve', 'Curved connector', 'conversion_path']];
+  const linePage = {
+    title: 'Line',
+    build(body) {
+      rows(body, LINES.map(([v, label, icon]) => [icon, label, done(() => { const b = addShape(v); sel = new Set([b]); drawOverlay(); updateToolbar(); })]));
+      rows(body, [['gesture', 'Curve', done(() => armShape('smooth'))], ['polyline', 'Polyline', done(() => armShape('polyline'))], ['draw', 'Scribble', done(() => armShape('scribble'))]]);
+    },
+  };
+  const imagePage = { title: 'Image', build(body) { rows(body, [['photo_library', 'Photos', done(() => $('#ed-file').click())], ['movie', 'Video', done(() => $('#ed-video-file').click())]]); } };
+  const tablePage = { title: 'Table', build(body) { const g = tableGrid(); g.classList.add('ph-table-pick'); g.addEventListener('click', () => close()); body.append(g); } };
+  /* ---- the colour panels (r03, r04): a hue strip; under it the greys (5 × 2) or the chosen hue's shades (4 × 2);
+     the theme's colours; the custom ones. The colour in use has a check in its corner. The panel stays open. ---- */
+  const ROWS = Array.from({ length: 8 }, (_, r) => PALETTE.slice(r * 10, r * 10 + 10).map(c => c.toLowerCase()));   // the Docs palette: greys, hues, light 3, 2, 1, dark 1, 2, 3
+  const HUES = ROWS[1], shades = i => [ROWS[7][i], ROWS[6][i], ROWS[5][i], ROWS[1][i], ROWS[4][i], ROWS[3][i], ROWS[2][i], '#ffffff'];
+  const TITLES = { color: 'Text color', hilite: 'Highlight color', fill: 'Fill color', stroke: 'Border color' };
+  const hueOf = c => { for (let i = 0; i < HUES.length; i++) if (shades(i).slice(0, 7).includes(c)) return i; return -1; };
+  phoneColors = what => {
+    const input = $('#ed-' + what);
+    const current = () => {
+      const b = [...sel][0];
+      if (what === 'fill' && b && /^(transparent|none)$/.test(b.style.getPropertyValue('--fill').trim())) return 'none';
+      if (what === 'stroke' && b && parseFloat(b.style.getPropertyValue('--sw')) === 0) return 'none';
+      if (what === 'hilite') return '';
+      return String(input.value).toLowerCase();
+    };
+    let hue = -2;   // -2: follow the colour in use; -1: the greys; else a hue
+    const pick = c => { if (c === 'none') { if (what === 'hilite') hilite('transparent'); else if (what === 'fill') { setVar('--fill', 'transparent'); commit(); } else noBorder(); } else setColor(input, c); };
+    const swatch = (c, cur) => {
+      const b = el('button', 'ph-swatch-cell' + (c === cur ? ' on' : '')); b.style.background = c; b.title = c;
+      b.onclick = () => { pick(c); paint(); }; return b;
+    };
+    let body = null;
+    function paint() {
+      const cur = current(), h = hue === -2 ? hueOf(cur) : hue;
+      body.replaceChildren();
+      if (what !== 'color') {
+        const none = el('button', 'ph-row ph-none' + (cur === 'none' ? ' on' : ''), '<span class="icon">format_color_reset</span><span class="ph-row-label">No color</span><span class="icon ph-check">check</span>');
+        none.onclick = () => { pick('none'); paint(); }; body.append(none);
+      }
+      const strip = el('div', 'ph-hues');
+      [-1, ...HUES.map((_, i) => i)].forEach(i => {
+        const seg = el('button', 'ph-hue' + (i === h ? ' on' : '')); seg.style.background = i < 0 ? '#000' : HUES[i];
+        seg.title = i < 0 ? 'Greys' : HUES[i]; seg.onclick = () => { hue = i; paint(); }; strip.append(seg);
+      });
+      const grid = el('div', 'ph-swatches ' + (h < 0 ? 'five' : 'four'));
+      (h < 0 ? ROWS[0] : shades(h)).forEach(c => grid.append(swatch(c, cur)));
+      const theme = el('div', 'ph-swatches five'); THEME_COLORS.forEach(c => theme.append(swatch(c.toLowerCase(), cur)));
+      const custom = el('div', 'ph-swatches custom'), add = el('button', 'ph-swatch-cell ph-add', '<span class="icon">add</span>');
+      add.title = 'Custom colour'; add.onclick = () => { input.addEventListener('change', () => { rememberColor(input.value); paint(); }, { once: true }); input.click(); };
+      custom.append(add, ...recentColors().map(c => swatch(c.toLowerCase(), cur)));
+      body.append(strip, grid, Object.assign(el('div', 'ph-label'), { textContent: 'Theme' }), theme, Object.assign(el('div', 'ph-label'), { textContent: 'Custom' }), custom);
+    }
+    if (editing) content(editing).blur();   // the keyboard makes way for the panel; the text selection is kept (lastRange)
+    open({ title: TITLES[what], build(b) { body = b; paint(); } });
+  };
+
+  phoneInsert = () => open({
+    title: 'Insert',
+    build(body) {
+      const typing = !!editing && !getSelection().isCollapsed;
+      rows(body, [
+        ['add_comment', 'Comment', done(() => addComment())],
+        ['insert_text', 'Text', done(() => { stopEdit(); startEdit(addText()); })],
+        ['image', 'Image', () => push(imagePage), true],
+        ['interests', 'Shape', () => push(shapePage), true],
+        ['diagonal_line', 'Line', () => push(linePage), true],
+        ['table', 'Table', () => push(tablePage), true],
+        ['link', 'Link', done(() => $('#ed-link').click()), false, !typing],
+      ]);
+    },
+  });
+})();

glideshow/editor/js/phone-touch.js

@@ -0,0 +1,145 @@
+/* ---------- phone: touching the slide ---------- */
+/* As the Slides app: a tap selects (square blue handles, a knob above for rotating) and, a moment later, shows the
+   iOS edit menu (Cut | Copy | Paste | Delete) under the box; a tap on the selected box edits its text; a tap on
+   nothing deselects. Dragging a box moves a grey outline of it, with red guides where it lines up, and the box jumps
+   there on release; dragging a handle does the same for its size. Runs before pointer.js's handler on the stage
+   and stops it; rotation, yellow adjust handles and text being edited keep the desktop's handling. */
+/** The edit menu's actions on the selection (also the landscape side rail's ⋯, phone-edit.js). @returns {[string, () => any][]} */
+const phoneClipActions = () => [['Cut', () => document.execCommand('cut')], ['Copy', () => document.execCommand('copy')],
+  ['Paste', async () => {   // iOS asks the clipboard, then the editor's own paste takes it
+    const text = await navigator.clipboard.readText().catch(() => ''); if (!text) return;
+    const dt = new DataTransfer(); dt.setData('text/plain', text); dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt }));
+  }],
+  ['Delete', () => deleteSelection()]];
+if (PHONE) (() => {
+  const TAP = 8;   // screen px a finger may wander and still tap
+  const root = document.documentElement;
+  const ghostAt = g => { const gh = div('ph-ghost'); place(gh, g); gh.style.setProperty('--k', 1 / scale + 'px'); guides.append(gh); return gh; };
+  let menuTimer = 0, menu = null;
+  function closeMenu_() { clearTimeout(menuTimer); menu?.remove(); menu = null; }
+
+  /* ---- two fingers: a pinch zooms about them (1× to 4× the fitted size) and moving them pans (r06, 17-zoom.png) ---- */
+  const fingers = new Map();   // pointerId → where it is
+  let pinch = null, pinches = 0;   // pinches: bumped when one starts, so a one-finger gesture under way gives up
+  const fitScale = () => { const r = stage.getBoundingClientRect(); return Math.max(0.05, Math.min((r.width - 30) / W, (r.height - 30) / H)); };
+  const zoomed = () => scale / fitScale();
+  function zoomTo(z, mx, my, c) {   // z × the fitted size, with canvas point c kept under the screen point (mx, my)
+    zoom = z <= 1.001 ? null : z * fitScale() * W / 960;
+    fit();
+    const f = frame.getBoundingClientRect();
+    stage.scrollLeft += f.left + c.x * scale - mx; stage.scrollTop += f.top + c.y * scale - my;
+  }
+  const two = () => { const [a, b] = [...fingers.values()]; return { d: Math.hypot(a.x - b.x, a.y - b.y), x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }; };
+  stage.addEventListener('pointerdown', e => {
+    if (e.isPrimary) fingers.clear();   // a new gesture: forget any finger whose lift we missed
+    fingers.set(e.pointerId, { x: e.clientX, y: e.clientY, type: e.pointerType });
+    if (fingers.size !== 2 || !root.classList.contains('ph-edit')) return;
+    e.stopImmediatePropagation(); e.preventDefault();
+    pinches++; closeMenu_();
+    const t = two(); pinch = { d0: t.d, z0: zoomed(), c: toCanvas({ clientX: t.x, clientY: t.y }) };
+  }, true);
+  addEventListener('pointermove', e => {
+    const f = fingers.get(e.pointerId); if (!f || f.type !== e.pointerType) return;   // (a mouse's id can match a finger's)
+    f.x = e.clientX; f.y = e.clientY;
+    if (!pinch || fingers.size < 2) return;
+    const t = two(); zoomTo(Math.max(1, Math.min(4, pinch.z0 * t.d / pinch.d0)), t.x, t.y, pinch.c);
+  }, true);
+  const lift = e => {
+    fingers.delete(e.pointerId);
+    if (pinch && fingers.size < 2) { pinch = null; if (zoomed() < 1.05) { zoom = null; fit(); } }
+  };
+  addEventListener('pointerup', lift, true); addEventListener('pointercancel', lift, true);
+
+  stage.addEventListener('pointerdown', e => {
+    if (!root.classList.contains('ph-edit') || e.button !== 0 || drawing) return;   // drawing a curve or scribble: draw.js
+    const t = /** @type {Element} */ (e.target), handle = t.closest('.handle'), b = topBox(t);
+    closeMenu_();
+    if (handle && !handle.dataset.dir) return;   // the rotation knob, a yellow diamond: pointer.js
+    if (!handle && editing && b === editing) return;   // the caret and text selection: the browser and pointer.js
+    const one = sel.size === 1 ? [...sel][0] : null;
+    if (handle && (!one || isLine(one) || rot(one) || 'crop' in handle.dataset || flipXY(one).join() !== '1,1')) return;   // turned, flipped, lines, groups of boxes: pointer.js
+    e.stopImmediatePropagation();
+    if (handle) return ghostResize(e, one, handle.dataset.dir);
+    tapOrMove(e, b);
+  }, true);
+
+  /* ---- a tap, or a drag that moves the box's outline ---- */
+  let lastTap = { b: null, t: 0 };
+  function tapOrMove(e, b) {
+    const p0 = toCanvas(e), x0 = e.clientX, y0 = e.clientY, was = !!b && sel.size === 1 && sel.has(b), gen = pinches;
+    let moved = false, ghost = null, items = [], g0 = null, others = [], d = { x: 0, y: 0 }, last = { x: x0, y: y0 };
+    drag(e, ev => {
+      if (pinches !== gen) { if (ghost) { ghost.remove(); ghost = null; showGuides(); busy = false; } return; }   // a second finger: it's a pinch now
+      if (!moved && Math.hypot(ev.clientX - x0, ev.clientY - y0) < TAP) return;
+      if (!b) {   // one finger on nothing pans a zoomed-in slide
+        moved = true; stage.scrollLeft -= ev.clientX - last.x; stage.scrollTop -= ev.clientY - last.y; last = { x: ev.clientX, y: ev.clientY };
+        return;
+      }
+      if (!moved) {
+        moved = true; busy = true;
+        if (editing && editing !== b) stopEdit();
+        if (!sel.has(b)) { sel = new Set([b]); drawOverlay(); updateToolbar(); }
+        items = [...sel]; g0 = bbox(items.map(aabb)); others = boxes().filter(o => !sel.has(o)).map(aabb);
+        ghost = ghostAt(g0);
+      }
+      const p = toCanvas(ev), at = { ...g0, x: g0.x + p.x - p0.x, y: g0.y + p.y - p0.y }, s = snap(at, others);
+      d = { x: at.x + s.dx - g0.x, y: at.y + s.dy - g0.y };
+      place(ghost, { ...g0, x: g0.x + d.x, y: g0.y + d.y });
+      showGuides(s.gx, s.gy, { ...g0, x: g0.x + d.x, y: g0.y + d.y }, s.ox, s.oy, others);
+    }, ev => {
+      if (pinches !== gen || (moved && !b)) return;
+      if (moved) {   // the box jumps to where its outline was let go
+        busy = false; ghost.remove(); showGuides();
+        for (const it of items) { const g = geo(it); setGeo(it, { ...g, x: g.x + d.x, y: g.y + d.y }); if (isLine(it)) { delete it.dataset.from; delete it.dataset.to; } }
+        followConnectors(); drawOverlay(); commit();
+        return;
+      }
+      if (!b) { stopEdit(); if (sel.size) { sel.clear(); drawOverlay(); updateToolbar(); } return; }   // a tap on nothing
+      const twice = lastTap.b === b && Date.now() - lastTap.t < 350; lastTap = { b, t: Date.now() };
+      if ((was || twice) && !isMedia(b) && !isLine(b) && content(b) && !isGroup(b)) { closeMenu_(); startEdit(b, { x: ev.clientX, y: ev.clientY }); drawOverlay(); return; }   // a second tap, or a double tap, types
+      if (editing) stopEdit();
+      sel = new Set([b]); drawOverlay(); updateToolbar();
+      menuTimer = window.setTimeout(() => showMenu(b), 450);
+    });
+  }
+
+  /* ---- a handle: the outline takes the new size, the box follows on release; the edge snaps to guides ---- */
+  function ghostResize(e, b, dir) {
+    const g0 = geo(b), p0 = toCanvas(e), others = boxes().filter(o => o !== b).map(aabb), { xs, ys } = snapLines(others), min = 20;
+    const keep = dir.length === 2 && (isMedia(b) || b.dataset.lock === 'aspect'), ratio = g0.w / (g0.h || 1);
+    const ghost = ghostAt(g0);
+    let g = g0;
+    busy = true; ui.classList.add('ph-sizing'); ui.querySelector(`.handle[data-dir="${dir}"]`)?.classList.add('on');
+    drag(e, ev => {
+      const p = toCanvas(ev), th = SNAP_PX / scale, dx = p.x - p0.x, dy = p.y - p0.y;
+      let x0 = g0.x, x1 = g0.x + g0.w, y0 = g0.y, y1 = g0.y + g0.h, gx = null, gy = null;
+      const near = (lines, v) => { const c = lines.reduce((m, l) => Math.abs(l - v) < Math.abs(m - v) ? l : m, Infinity); return Math.abs(c - v) < th ? c : null; };
+      if (dir.includes('e')) { x1 += dx; const c = near(xs, x1); if (c != null && !keep) x1 = gx = c; }
+      if (dir.includes('w')) { x0 += dx; const c = near(xs, x0); if (c != null && !keep) x0 = gx = c; }
+      if (dir.includes('s')) { y1 += dy; const c = near(ys, y1); if (c != null && !keep) y1 = gy = c; }
+      if (dir.includes('n')) { y0 += dy; const c = near(ys, y0); if (c != null && !keep) y0 = gy = c; }
+      let w = Math.max(min, x1 - x0), h = Math.max(min, y1 - y0);
+      if (keep) { if (w / g0.w > h / g0.h) h = w / ratio; else w = h * ratio; }
+      g = { ...g0, w, h, x: dir.includes('w') ? g0.x + g0.w - w : g0.x, y: dir.includes('n') ? g0.y + g0.h - h : g0.y };
+      place(ghost, g); showGuides(gx, gy);
+    }, () => {
+      busy = false; ghost.remove(); showGuides(); ui.classList.remove('ph-sizing');
+      if (g !== g0) { setGeo(b, g); if (!b.dataset.shape && !isMedia(b) && /[ns]/.test(dir)) b.dataset.minh = String(g.h); if (b.dataset.shape) renderShape(b); fitText(b); followConnectors(); commit(); }
+      drawOverlay();
+    });
+  }
+
+  /* ---- the iOS edit menu under the selected box (above it when there's no room), as 04-select-text-box.png ---- */
+  function showMenu(b) {
+    if (!sel.has(b) || editing) return;
+    const r = (ui.querySelector('.sel-box') || b).getBoundingClientRect(), s = stage.getBoundingClientRect();
+    menu = div('ph-editmenu');
+    const item = (label, run) => { const x = document.createElement('button'); x.textContent = label; x.onclick = ev => { ev.stopPropagation(); closeMenu_(); run(); }; return x; };
+    menu.append(...phoneClipActions().map(([label, run]) => item(label, run)));
+    document.body.append(menu);
+    const below = r.bottom + 31 + menu.offsetHeight < s.bottom;
+    menu.style.left = Math.max(s.left + 8, Math.min(r.left + r.width / 2 - menu.offsetWidth / 2, s.right - menu.offsetWidth - 8)) + 'px';   // over the slide's area: clear of the side rails
+    menu.style.top = (below ? r.bottom + 31 : Math.max(s.top + 8, r.top - 31 - menu.offsetHeight)) + 'px';
+  }
+  addEventListener('pointerdown', e => { if (menu && !menu.contains(/** @type {Node} */ (e.target))) closeMenu_(); }, true);
+})();

glideshow/editor/js/phone-view.js

@@ -0,0 +1,150 @@
+/* ---------- phone: states and view mode ---------- */
+/* On a phone a deck opens in view mode, as the Slides app: a top bar (back; present, search, share, comments, ⋯) over
+   the slides as a vertical list, the current one outlined. Tapping a slide offers "Add comment | Edit slide"; Edit
+   slide goes to the editing state (html.ph-edit), whose chrome phone-edit.js builds. Scrolling down hides the bar,
+   scrolling up brings it back, and a "Slide N of M" chip shows while the list moves. */
+/** @type {(state: 'view' | 'edit') => void} */
+let phoneState = () => {};
+/** Present from the current slide, phone style (✕ and the title on top). */
+let phonePresent = async () => {};
+if (PHONE) (() => {
+  const el = (tag, cls, html = '') => Object.assign(document.createElement(tag), { className: cls, innerHTML: html });
+  const iconBtn = (icon, title, run) => { const b = el('button', 'ph-icon-btn', `<span class="icon">${icon}</span>`); b.title = title; b.onclick = run; return b; };
+  const root = document.documentElement;
+  const top = el('header', 'ph-top'), list = el('div', 'ph-view'), chip = el('div', 'ph-chip');
+  list.id = 'ph-view'; top.id = 'ph-top';
+  document.body.prepend(top); document.body.append(list, chip);
+  let state = 'view';
+
+  // the top bar of each state; phone-edit.js fills `edit`
+  const bars = { view: el('div', 'ph-bar ph-bar-view'), edit: el('div', 'ph-bar ph-bar-edit') };
+  bars.view.append(iconBtn('arrow_back_ios_new', 'Back to your decks', () => { location.href = '/'; }), el('span', 'ph-gap'),
+    phoneThemeButton(), iconBtn('play_arrow', 'Present', () => phonePresent()), iconBtn('search', 'Find', () => { phoneState('edit'); openFind(); }),
+    iconBtn('person_add', 'Share', () => showShare()), iconBtn('comment', 'Comments', () => { phoneState('edit'); setCommentsPanel(true); }),
+    iconBtn('more_horiz', 'More', e => viewMenu(/** @type {Element} */ (e.currentTarget))));
+  top.append(bars.view, bars.edit);
+  /* the page itself never scrolls (each screen scrolls inside): iOS can leave it scrolled up after the keyboard, above
+     all in a home-screen app, which hides the top bar under the status bar and leaves a gap at the bottom; so whenever
+     nothing is being typed it goes back to the top */
+  const typing = () => { const a = document.activeElement; return !!a && (/** @type {HTMLElement} */ (a).isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(a.tagName)); };
+  const pin = () => { if (typing()) return; if (scrollX || scrollY) scrollTo(0, 0); if (document.body.scrollTop) document.body.scrollTop = 0; };
+  addEventListener('scroll', pin, { passive: true }); visualViewport?.addEventListener('resize', pin);
+  addEventListener('focusout', () => setTimeout(pin, 120));
+  phoneState = s => {
+    state = s; stopEdit(); closePop();
+    root.classList.toggle('ph-view', s === 'view'); root.classList.toggle('ph-edit', s === 'edit');
+    if (s === 'view') { sel.clear(); if (slides.length) drawOverlay(); top.classList.remove('away'); fill(true); } else fit();
+  };
+
+  /* ---- the list: one picture per slide, drawn when it comes near the screen (a dark placeholder until then) ---- */
+  const drawn = new WeakMap();   // item → the slide HTML it shows
+  const near = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) draw(/** @type {HTMLElement} */ (e.target)); }), { root: list, rootMargin: '100% 0px' });
+  function draw(item) {
+    const s = slides[+item.dataset.i]; if (!s || drawn.get(item) === s.outerHTML) return;
+    drawn.set(item, s.outerHTML);
+    const k = item.clientWidth / W, inner = div('ph-vslide-canvas slides'), c = s.cloneNode(true);
+    inner.style.cssText = `width:${W}px;height:${H}px;transform:scale(${k})`;
+    paintBg(inner, s);
+    c.querySelectorAll('[id]').forEach(e => e.removeAttribute('id'));
+    c.querySelectorAll('aside.notes, script, .box.note').forEach(e => e.remove());   // speaker notes and notes for AI stay out of view mode
+    c.querySelectorAll('.box[data-shape]').forEach(renderShape); c.querySelectorAll('.box[data-shadow]').forEach(shadeBox); c.querySelectorAll('.box[data-crop]').forEach(cropBox);
+    inner.append(c); item.replaceChildren(inner); item.classList.add('drawn');
+    highlightCode(c); renderMath(c);
+  }
+  let filled = false;
+  function fill(scrollToCur = false) {
+    if (state !== 'view' || !slides.length) return;
+    if (!filled) { filled = scrollToCur = true; }
+    while (list.children.length > slides.length) list.lastChild.remove();
+    while (list.children.length < slides.length) { const it = el('div', 'ph-vslide reveal'); it.dataset.i = String(list.children.length); list.append(it); near.observe(it); }
+    [...list.children].forEach((it, i) => { /** @type {HTMLElement} */ (it).style.aspectRatio = `${W} / ${H}`; it.classList.toggle('cur', i === cur); if (it.classList.contains('drawn')) draw(/** @type {HTMLElement} */ (it)); });
+    if (scrollToCur) { quietUntil = Date.now() + 200; list.children[cur]?.scrollIntoView({ block: 'nearest' }); }
+  }
+  const renderThumbs0 = renderThumbs;   // the list follows the deck as the filmstrip does (loads, reloads from disk)
+  window['renderThumbs'] = () => { renderThumbs0(); fill(); };
+  addEventListener('resize', () => { [...list.children].forEach(it => drawn.delete(it)); fill(); });
+
+  /* ---- scrolling: the bar hides going down and comes back going up; the chip says where you are ---- */
+  let lastY = 0, chipTimer = 0, quietUntil = 0;   // quiet: a scroll of our own (to the current slide) leaves the bar be
+  list.addEventListener('scroll', () => {
+    const y = list.scrollTop, d = y - lastY; lastY = y;
+    if (Date.now() < quietUntil) return;
+    if (y <= 0 || d < -4) top.classList.remove('away'); else if (d > 4 && y > 60) top.classList.add('away');
+    const mid = list.getBoundingClientRect().top + list.clientHeight / 3;
+    const i = [...list.children].findIndex(it => it.getBoundingClientRect().bottom > mid);
+    chip.textContent = `Slide ${Math.max(0, i) + 1} of ${slides.length}`;
+    chip.classList.add('on'); clearTimeout(chipTimer); chipTimer = window.setTimeout(() => chip.classList.remove('on'), 1000);
+    closePop();
+  }, { passive: true });
+
+  /* ---- tap a slide: "Add comment | Edit slide", as the iOS edit menu, over the tap ---- */
+  let pop = null;
+  function closePop() { pop?.remove(); pop = null; }
+  list.addEventListener('click', e => {
+    const it = /** @type {HTMLElement} */ (e.target).closest('.ph-vslide'); if (!it || pop) { closePop(); return; }
+    const i = +it.dataset.i;
+    pop = el('div', 'ph-editmenu');
+    const item = (label, run) => { const b = el('button', '', ''); b.textContent = label; b.onclick = ev => { ev.stopPropagation(); closePop(); run(); }; return b; };
+    pop.append(item('Add comment', () => { go(i); phoneState('edit'); addComment(); }), item('Edit slide', () => { go(i); phoneState('edit'); }));
+    document.body.append(pop);
+    const x = Math.max(8, Math.min(e.clientX - pop.offsetWidth / 2, innerWidth - pop.offsetWidth - 8));
+    pop.style.left = x + 'px'; pop.style.top = Math.max(top.getBoundingClientRect().bottom + 8, e.clientY - pop.offsetHeight - 24) + 'px';
+    if (i !== cur) go(i);
+  });
+
+  /* ---- ⋯ : the deck's menu (Google's isn't captured yet; these are Glideshow's) ---- */
+  function viewMenu(btn) {
+    closeMenu?.();
+    const m = el('div', 'menu ph-menu'), items = [['edit', 'Edit', () => phoneState('edit')], ['slideshow', 'Present', () => phonePresent()],
+      ['person_add', 'Share', () => showShare()], ['desktop_windows', 'Desktop version', () => { location.href = '/edit?phone=0'; }]];
+    for (const [icon, label, run] of items) {
+      const b = el('button', 'menu-item', `<span class="menu-icon icon">${icon}</span><span class="menu-label"></span>`);
+      b.querySelector('.menu-label').textContent = /** @type {string} */ (label); b.onclick = ev => { ev.stopPropagation(); m.remove(); /** @type {Function} */ (run)(); }; m.append(b);
+    }
+    document.body.append(m);
+    const r = btn.getBoundingClientRect(); m.style.left = innerWidth - m.offsetWidth - 8 + 'px'; m.style.top = r.bottom + 4 + 'px';
+    setTimeout(() => addEventListener('pointerdown', ev => { if (!m.contains(/** @type {Node} */ (ev.target))) m.remove(); }, { once: true }));
+  }
+
+  /* ---- ▷ : present from the current slide, with ✕ and the title on top (13-present.png; the full flow is P5) ---- */
+  /* ▷ (13-present-menu.png, r07): a sheet with no title, "Present on this device" (Google's casting and meeting rows
+     aren't Glideshow's). Presenting (13-present.png): the slide on black, centred on the whole screen; a bar with ✕
+     and the title, which slides away once the slide shows and comes back on a tap. A tap advances (instant, with the
+     slide's builds); a swipe goes forward or back. ✕ returns to the editor on the slide last shown. */
+  phonePresent = async () => phoneSheet.open({ title: '', bare: true, build(body) {
+    const r = el('button', 'ph-row', '<span class="icon">smartphone</span><span class="ph-row-label">Present on this device</span>');
+    r.onclick = () => { phoneSheet.close(); startShow(); }; body.append(r);
+  } });
+  async function startShow() {
+    await present(cur);
+    const show = $('#ed-show'), frameEl = show.querySelector('iframe'), deck = () => /** @type {any} */ (frameEl.contentWindow)?.Reveal;
+    const bar = el('div', 'ph-show-bar'), t = el('span', 'ph-show-title'), count = el('span', 'ph-show-count'), touch = el('div', 'ph-show-touch');
+    t.textContent = $('#ed-title').value || 'Untitled presentation';
+    const stop = () => { const i = deck()?.getIndices?.(); endPresent(i?.h, i?.v); };
+    bar.append(iconBtn('close', 'Stop presenting', stop), t, count);
+    // the bar shows on a tap and goes again on its own; Thermal shows "n / N" in it (the app shows the title)
+    /** @type {any} */ let hide = 0; const peek = () => { bar.classList.remove('away'); clearTimeout(hide); hide = setTimeout(() => bar.classList.add('away'), 2200); };
+    const counted = () => { const d = deck(); if (d?.getTotalSlides) count.textContent = `${d.getSlidePastCount() + 1} / ${d.getTotalSlides()}`; };
+    show.append(touch, bar);
+    frameEl.addEventListener('load', () => {
+      const st = frameEl.contentDocument?.createElement('style');   // the app's look: black around the slide, no controls of the deck's own
+      if (st) { st.textContent = '.sl-bar, .reveal .backgrounds { display: none !important; } html, body, .reveal-viewport, .reveal { background: #000 !important; }'; frameEl.contentDocument.head.append(st); }
+      deck()?.configure?.({ scrollActivationWidth: 1 }); deck()?.layout?.();
+      deck()?.getSlides?.().forEach(sl => {   // each slide wears its own background, so only the letterbox is black
+        const bg = deck().getSlideBackground(sl), cs = bg && frameEl.contentWindow.getComputedStyle(bg);
+        if (cs) Object.assign(sl.style, { backgroundColor: cs.backgroundColor, backgroundImage: cs.backgroundImage, backgroundSize: cs.backgroundSize, backgroundPosition: cs.backgroundPosition, backgroundRepeat: cs.backgroundRepeat });
+      });   // reveal.js 5 scrolls the slides on a screen under 435 px wide (and null doesn't turn that off): the app shows one, letterboxed
+      deck()?.on?.('slidechanged', counted); counted();
+      setTimeout(() => bar.classList.add('away'), 600);   // r07: the bar goes once the slide is up
+    }, { once: true });
+    let x0 = 0, y0 = 0;
+    touch.onpointerdown = e => { x0 = e.clientX; y0 = e.clientY; };
+    touch.onpointerup = e => {
+      const dx = e.clientX - x0, dy = e.clientY - y0;
+      if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) { if (dx < 0) deck()?.next(); else deck()?.prev(); return; }   // a swipe
+      if (Math.hypot(dx, dy) < 10) { peek(); deck()?.next(); }   // a tap: the bar comes back for a moment, and on to the next
+    };
+  }
+  let fresh = false; try { fresh = sessionStorage.getItem('ph-open-edit') === '1'; sessionStorage.removeItem('ph-open-edit'); } catch {}
+  phoneState(fresh ? 'edit' : 'view');   // a deck just made with + opens for editing; others open to view, as the app
+})();