glideshow 0.1.2__py3-none-any.whl

glideshow/docs/agents.md

@@ -0,0 +1,223 @@
+# Writing slides as an agent
+
+A deck is one folder: `deck.html` (reveal.js) plus `assets/`. Every slide is a `<section>` inside `<div class="slides">`;
+everything on it is an absolutely positioned `<div class="box">` whose inline `left / top / width / height` are px on a
+1920 × 1080 canvas (192 px = 1 in, 1 pt = 2.667 px). The full attribute reference is `glideshow docs reference` (the
+**Deck format** section of AGENTS.md).
+
+`deck.html` also carries about 180 KB of inlined CSS and JS: don't read it. Read a deck with `glideshow slides <deck>
+--outline` (one line per slide: its layout, title, and each box's id and first words), then `glideshow slides <deck> N`
+for the slides you change. Write slides with `glideshow put` (below): it sends only the `<section>`, checks it, and
+writes `deck.html` in one go; the editor reloads it live and keeps what you write.
+
+**Slide numbers.** N is a slide's number in the file (1, 2, 3 …, a stack's sub-slides counted in order). The editor
+numbers a stack's sub-slides 8.1, 8.2; every command takes that form too (`glideshow slides <deck> 8.1`), and the
+outline and `check` show both where they differ (`9 = 8.1`).
+
+## The commands you need
+
+| command | what it does |
+|---|---|
+| `glideshow new "Title" --no-open` | makes `~/decks/<slug>-<date>/` from the template and prints the folder; the user's editor is left alone |
+| `glideshow find <words>` | prints the folder of the deck that best matches; nothing is opened |
+| `glideshow slides <deck> --outline` | one line per slide: its number, layout, title, each box's id and first words, notes for you in full |
+| `glideshow slides <deck> [N …]` | those slides' HTML (numbered, with their line in `deck.html`) |
+| `glideshow put <deck> N` | replaces slide N with the `<section>`s on stdin; `--after N` inserts (0: first), `--delete N …` removes, `--all` replaces every slide |
+| `glideshow layout [NAME]` | the layouts' exact placeholder boxes; with a name, a slide in that layout to fill in |
+| `glideshow check <deck> [N …]` | only the problems, in about two seconds; exit status 1 when there are any |
+| `glideshow render <deck> [N …]` | each slide as a 960 × 540 PNG (one path per line; `--full`: 1920 × 1080), then the problems |
+| `glideshow render <deck> --sheet` | nine slides to a picture, each labelled with its number: a whole deck in a few pictures |
+| `glideshow figure add <deck> <png> --slide N` | places a picture (or `--replace <id>` swaps one in place), recording `--source "<command>"` |
+| `glideshow figure size <deck> --slide N` | the figure size that fits that space exactly, a script to start from, and the deck's `deck.mplstyle` |
+| `glideshow figure refresh <deck> [id …]` | re-runs each figure's recorded command and puts the new picture in place |
+| `glideshow selection` | what the user is looking at and has selected in the editor (exit 1 if no editor window reports) |
+| `glideshow comments <deck>` | the open comments, each on the slide it's on now |
+| `glideshow stop` | stops the background server |
+
+`render` and `check` show each slide as it looks after its last build step (transitions and Morph off), and report: text
+spilling out of its box, code cut off, boxes reaching off the slide, text overlapping other text (a label inside a shape
+with words of its own too), text partly over a picture or crossed by a line, text under 24 px or hard to see against its
+background, pictures that didn't load, lack alt text or are squeezed into a box of another shape, boxes without ids or
+with duplicate ids, lines attached to boxes that aren't there (or to a side that isn't t/r/b/l), Morph pairings with no
+partner, notes for the AI still on a slide, and broken structure (a `<div>` or `<section>` left open or closed twice).
+Inside a figure saved with `glideshow.figure.save` they also report labels that overlap or are cut off at its edge, text
+under 24 px on the slide and characters its font lacks. Fix what they report, then look: `render <deck> --sheet` for the
+whole deck (balance, alignment), single slides only for the ones you changed.
+
+**Versions.** `glideshow new --no-open`, `slides`, `put` and `figure add / refresh` start the background server if it isn't
+running (nothing opens). It commits every change you make to a deck as its own version, a few seconds after you stop
+writing, so nothing you do is lost and the user can step back through it.
+
+## Working beside the open editor
+
+- **"This", "here", "the selected box":** run `glideshow selection` (`--json` for the raw form). It prints the deck the
+  editor has open, the slide on show (1-based, stacks counted as slides), how long ago the editor reported it, and each
+  selected box: its `id`, its place among the slide's boxes, geometry and text, plus any text selected while editing.
+  Change that box (find it by `id`), not a guess. Nothing selected means the whole slide. If it exits 1, no editor window
+  is open: ask the user which slide they mean.
+- **Your edit shows up at once:** the editor reloads, goes to the first changed slide (if the one on show didn't change),
+  flashes the changed slides in the filmstrip and outlines the changed boxes. `put` writes the whole file in one go; if you
+  write `deck.html` yourself, do the same (a temporary file renamed over it), not piece by piece.
+- **The user can take it back:** your edit is one undo step in the editor (⌘Z), and the server commits it as its own
+  version (`outside the editor: slide 3: …`) a few seconds after you stop writing, apart from the user's own changes.
+- **The user's unsaved change:** the editor saves when its window loses focus, so what the user just did is on disk
+  before you start. If you both change the deck at once, the editor keeps both when they touched different slides.
+- **Comments:** people the deck was shared with (glideshow.org), and the user, leave comments in `comments.json` beside
+  `deck.html`: `{"comments": [{"id", "slide", "sid", "box", "quote", "text", "by", "resolved", "replies": [...]}]}`.
+  `sid` is the slide's `data-sid` (it finds the slide however slides have moved since), `slide` its number when the
+  comment was left, `box` the id it was left on. `glideshow comments <deck>` lists the open ones on the slides they're on
+  now. To answer one, make the change, then add a reply and, when it's done, set `"resolved": true` (leave its `slide` and
+  `sid` as they are):
+  ```json
+  {"id": "r7k2m9qa", "text": "Added the citation as a footnote on slide 4.", "by": {"n": "Claude"}, "at": "2026-10-15T14:30:00Z"}
+  ```
+  (`id`: 8 random lowercase letters and digits; `at`: ISO 8601 UTC.)
+- **Notes for the AI:** the user can leave a yellow sticky on a slide for you. It is a box with the class `note`:
+  ```html
+  <div class="box note" id="note-1" data-time="2026-10-15T14:02" style="left: 1400px; top: 60px; width: 420px; height: 200px;"><div class="content">Make this plot bigger and drop the legend</div></div>
+  ```
+  Do what each note says, then delete it. `check` lists any left over; the slideshow never shows them.
+
+## Layouts
+
+Every slide has a layout (`data-layout` on its `<section>`), and the layout's text lives in **placeholder boxes**
+(`data-placeholder` + `data-role` title / sub / body) at exactly these places. Use them for titles and body text, so the
+deck stays consistent and the editor's Layout menu works; put figures, diagrams and other free boxes anywhere else.
+Text sizes come from the theme (`--th-title-size`, `--th-body-size`); don't override them unless you mean to.
+
+{{LAYOUTS}}
+
+`glideshow layout title-body --prefix results` prints a whole slide in that layout, ready to fill in and `put`, its ids starting
+`results-` (ids must be unique in the whole deck; with `--deck <deck>` it also avoids ids the deck already uses, and
+follows a theme that edits its layouts). Replace each placeholder's text, keep its box, and give every box you add its
+own unique id.
+
+**A deck imported from Google Slides** (or any deck whose slides set their own fonts, sizes and colours) doesn't follow
+the theme: its boxes carry their styles inline. To add a slide that matches it, take a layout's places and the deck's
+look from a slide you name: `glideshow layout title-body --prefix summary --deck <deck> --like 4` copies slide 4's title
+and body text styles (font, size, colour, line spacing) into the new placeholders.
+
+**Colours.** The default theme (Simple Light) uses titles `#000000`, text `#595959` and a white background; text you add
+inherits them. Accents that sit well with it: blue `#1a73e8` (fill `#e8f0fe`), red `#d93025` (fill `#fce8e6`), green
+`#188038` (fill `#e6f4ea`), yellow `#f9ab00` (fill `#fef7e0`), grey rules `#dadce0`. Shapes take `--fill`, `--stroke`,
+`--sw` (outline width, px).
+
+**Sizes.** Keep body text at 24 px (9 pt) or more, at most about six lines of it per slide, one idea per slide.
+
+## Recipes
+
+**Title and bullets** (from `glideshow layout title-body --prefix results`), added after slide 3:
+```sh
+glideshow put <deck> --after 3 <<'EOF'
+<section data-background-color="#ffffff" data-layout="title-body">
+  <div class="box" id="results-title" data-placeholder="Click to add title" data-role="title" data-valign="top" style="left: 65px; top: 93px; width: 1790px; height: 122px;"><div class="content" style="font-size: calc(var(--th-title-size, 74.67px) * 1); text-align: left; padding: 9.6px 19.2px;">Results</div></div>
+  <div class="box" id="results-body" data-placeholder="Click to add text" data-role="body" data-valign="top" style="left: 65px; top: 242px; width: 1790px; height: 721px;"><div class="content" style="font-size: calc(var(--th-body-size, 48px) * 1); text-align: left; padding: 9.6px 19.2px;">
+    <ul><li>Agents learn the task in 2 k steps</li><li>Transfer holds across seeds</li></ul></div></div>
+</section>
+EOF
+```
+`put` prints the new slide's outline line and the `check` to run. To change a slide, `glideshow slides <deck> N`, edit
+that, and `glideshow put <deck> N` it back (its `data-sid` is kept). It refuses, writing nothing, when a `<div>` isn't
+closed, an id is already used elsewhere in the deck, or a slide carries another slide's `data-sid`. A script that builds
+the whole deck prints its `<section>`s and pipes them into `glideshow put <deck> --all`; don't let it rewrite `deck.html`
+(a pattern that cuts the file at the wrong `</div>` leaves slides outside the deck).
+
+**Boxes in a row, a column or a grid** (no pixels to work out): give the boxes the same `data-flow` and leave out their
+`left / top / width / height`; `put` lays them out in the slide's body area, equal sizes 40 px apart, and writes their
+pixels. `data-flow="row"`, `"column"` or `"grid 3"` (3 to a row), then optionally an area (`body`, or `x,y,w,h`) and a
+gap: `data-flow="row 65,400,1790,240 gap 120"`. Boxes with another `data-flow` value form another group. Lines attached
+with `data-from` / `data-to` need no place either.
+```html
+<div class="box" id="p-collect" data-shape="roundrect" data-flow="row 65,400,1790,240 gap 120" style="--fill: #e8f0fe;"><div class="content" style="font-size: 40px;">Collect</div></div>
+<div class="box" id="p-train" data-shape="roundrect" data-flow="row 65,400,1790,240 gap 120" style="--fill: #e8f0fe;"><div class="content" style="font-size: 40px;">Train</div></div>
+<div class="box" id="p-arrow" data-shape="line" data-end="fill-arrow" data-from="p-collect:r" data-to="p-train:l" style="--stroke: #5f6368; --sw: 5px;"><div class="content"></div></div>
+```
+
+**Two columns:** `glideshow layout two-columns --prefix compare` (two body placeholders, `compare-body` and `compare-body-2`).
+
+**A diagram: nodes and arrows.** Give nodes ids and attach each arrow with `data-from` / `data-to` = `"id:t|r|b|l"` (the
+middle of that side). Attached lines are fitted to their nodes whenever the deck loads, in the editor and the slideshow,
+so move a node and its arrows follow; the geometry you write for the line only matters if an end isn't attached.
+```html
+<div class="box" id="env" data-shape="roundrect" style="left: 160px; top: 440px; width: 400px; height: 200px; --fill: #e8f0fe; --stroke: #1a73e8; --sw: 3px;"><div class="content" style="font-size: 44px;">Environment</div></div>
+<div class="box" id="agent" data-shape="roundrect" style="left: 1360px; top: 440px; width: 400px; height: 200px; --fill: #fce8e6; --stroke: #d93025; --sw: 3px;"><div class="content" style="font-size: 44px;">Agent</div></div>
+<div class="box" id="env-to-agent" data-shape="line" data-end="fill-arrow" data-from="env:r" data-to="agent:l" style="left: 560px; top: 540px; width: 800px; height: 0px; --stroke: #5f6368; --sw: 4px;"><div class="content"></div></div>
+```
+A step-shaped connector is `data-shape="elbow"` (`data-bend` 0..1 slides its middle segment). **A feedback edge** under a
+pipeline (from the bottom of the last node back to the bottom of the first) is an elbow with both ends on the same side:
+it draws a U that runs `data-out` px (default 60) below the lower of them. Write it in the direction it means, from →
+to with the head on `data-end`; Glideshow keeps the left end as `data-from` when it loads the deck, swapping the ends and
+their heads for you:
+```html
+<div class="box" id="sync" data-shape="elbow" data-end="fill-arrow" data-from="learner:b" data-to="actors:b" data-out="80" style="left: 0px; top: 0px; width: 0px; height: 0px; --stroke: #5f6368; --sw: 4px;"><div class="content"></div></div>
+```
+
+**A plot from a script.** Size the figure for its space, save it into the deck's `assets/`, and place it with the command
+that made it, so it can be remade when the data changes:
+```sh
+glideshow figure size <deck> --slide 4            # the figsize that fits the body area exactly, and a script to start from
+uv run src/plot.py --out assets/curves.png        # your script (in the deck's folder), from that start
+glideshow figure add <deck> assets/curves.png --slide 4 --id curves --alt "Return over training, 10 seeds" \
+  --source "uv run src/plot.py --out {out}"
+glideshow figure refresh <deck> curves            # later: new data → re-run, new picture in the same place
+glideshow figure add <deck> other.png --replace curves   # or swap in a different picture, keeping the box's place
+```
+The script it starts you on declares its own dependencies (`matplotlib` and `glideshow`, so `uv run` needs no setup),
+uses the deck's `deck.mplstyle` (`figure size` writes it: the theme's font and colours, accents that suit it, sizes that
+read on a slide, and KaTeX's maths font) and saves with `glideshow.figure.save(fig, out)`. That writes the picture at 2×
+the slide's pixels and, beside it, where each piece of its text is (`curves.png.json`), so `check` can see inside it.
+`figure add` keeps the file's name, gives the box an id and alt text, fits the picture into the slide's body area (or
+`--at x,y,w,h`), and records `data-source` (`{out}` stands for the picture's path) and `data-made`. `figure refresh` says
+when a picture came out the same (and leaves the deck alone) and when its font lacks a character. In matplotlib, a
+figure 1 in wide fills 192 px of slide, so a point in the figure is a point on the slide: labels at 12–16 pt read well.
+
+**An equation.** Any box: `<div class="content" style="font-size: 48px; text-align: center;">$$\mathcal{L} = -\sum_t \log \pi_\theta(a_t \mid h_{<t})$$</div>`.
+The deck keeps the LaTeX; KaTeX typesets it.
+
+**Code.** `<pre><code class="language-python">…</code></pre>` in a box. Code doesn't wrap: make the box wide enough, or the
+lines short or the font smaller (`check` reports code that is cut off).
+
+**A callout on an image.** A picture box, then a shape after it (later boxes sit on top), e.g. a `roundcallout` whose tail
+(`data-adj` / `data-adj2`, 0..1 of the box, may be negative) points at the feature, or an `ellipse` with
+`--fill: transparent; --stroke: #d93025; --sw: 6px` around it.
+
+**Building a diagram up step by step (Morph).** One slide per step. Each step's boxes have ids unique in the whole deck,
+and each step after the first has `data-auto-animate` and pairs every box that carries over with `data-morph="<its id on
+the slide before>"`; a box with no partner fades in. The first step has no `data-auto-animate`.
+```html
+<section data-layout="title-only">
+  <div class="box" id="s1-title" data-placeholder="Click to add title" data-role="title" data-valign="top" style="left: 65px; top: 93px; width: 1790px; height: 122px;"><div class="content" style="font-size: calc(var(--th-title-size, 74.67px) * 1); text-align: left; padding: 9.6px 19.2px;">The pipeline</div></div>
+  <div class="box" id="s1-actors" data-shape="roundrect" style="left: 160px; top: 500px; width: 400px; height: 200px;"><div class="content">Actors</div></div>
+</section>
+<section data-layout="title-only" data-auto-animate>
+  <div class="box" id="s2-title" data-morph="s1-title" data-placeholder="Click to add title" data-role="title" data-valign="top" style="left: 65px; top: 93px; width: 1790px; height: 122px;"><div class="content" style="font-size: calc(var(--th-title-size, 74.67px) * 1); text-align: left; padding: 9.6px 19.2px;">The pipeline</div></div>
+  <div class="box" id="s2-actors" data-morph="s1-actors" data-shape="roundrect" style="left: 160px; top: 500px; width: 400px; height: 200px;"><div class="content">Actors</div></div>
+  <div class="box" id="s2-learner" data-shape="roundrect" style="left: 1360px; top: 500px; width: 400px; height: 200px;"><div class="content">Learner</div></div>
+</section>
+```
+A third step pairs with the second's ids (`data-morph="s2-actors"`), and so on. `check` reports pairings with no partner;
+`glideshow render <deck> --morph` lists each step's pairs (what moves, resizes, recolours, fades in or out) and saves a
+picture halfway through each animation.
+
+**A table that doesn't fit.** A `.box.table` grows with its rows. Imported tables carry Google's cell padding
+(`padding: 19.2px` on each `<td>`) and font sizes: to make one fit, lower the padding on its cells (a rule in the slide's
+own `<style class="slide-css" media="not all">`, such as `.box.table td { padding: 6px 12px; }`, does every cell at once)
+and its font size, then set the box's height to what `check` says it needs. A table that runs off the bottom of the
+slide (`check`: "runs … off the bottom of the slide") must lose rows or size; a taller box won't help.
+
+**A footnote or citation.** A small text box at the foot of the slide, not a superscript in the body (one makes its line
+taller): `<div class="box" id="s4-cite" style="left: 65px; top: 1000px; width: 1790px; height: 50px;"><div class="content" style="font-size: 24px; color: #5f6368;">Tenenbaum et al., 2011</div></div>`.
+Mark the claim with a short `[1]` in the text if there are several.
+
+**Speaker notes:** `<aside class="notes">…</aside>` inside the section, after its boxes.
+
+## Conventions
+
+- Name the deck in `<title>` without a date, and put the date in `<meta name="date" content="YYYY-MM-DD">` (new decks
+  get today's).
+- Every box has a unique `id` (`check` reports any without one); ids starting with `ed-` are reserved for the editor.
+- Don't write SVG or `--tx-*` / `--sh*` style variables: they are derived when the deck loads.
+- The editor commits every save to git when the deck is in a repo, so `git log` / `git diff` show what the person
+  changed. Don't commit yourself.
+- Your own test library, apart from the user's: `GLIDESHOW_HOME=/tmp/x/decks GLIDESHOW_CACHE=/tmp/x/cache
+  GLIDESHOW_PORT=48900 glideshow …` (a server on its own port never finds or replaces the user's).

glideshow/docs/deck-format.md

@@ -0,0 +1,125 @@
+## Deck format
+
+The deck's name is its `<title>` and its date (the talk's or meeting's) is `<meta name="date" content="YYYY-MM-DD">` in
+the `<head>`; keep the date out of the title (the home screen shows and sorts by the date).
+
+`deck.html` is a normal reveal.js file. Every slide is a 1920×1080 `<section>` whose children are absolutely positioned
+boxes:
+
+```html
+<section data-background-color="#ffffff">
+  <div class="box" id="fits-title" style="left: 65px; top: 93px; width: 1790px; height: 122px;">
+    <div class="content" style="font-size: 74.67px;">Model fits</div>
+  </div>
+  <div class="box image" id="fits-fig" style="left: 120px; top: 260px; width: 900px; height: 700px;">
+    <div class="content"><img src="assets/fits.png" alt="Model fits per condition"></div>
+  </div>
+  <div class="box" id="callout" data-shape="roundrect" style="left: 1100px; top: 300px; width: 700px; height: 300px; --fill: #fce8e6; --stroke: #d93025; --sw: 2px;">
+    <div class="content" style="font-size: 36px;">Fit is worse for <i>β</i> &gt; 0.5</div>
+  </div>
+  <aside class="notes">Speaker notes go here.</aside>
+</section>
+```
+
+Rules:
+- Geometry lives only in a box's inline `left/top/width/height` (in px on the 1920×1080 canvas). Rotation is an inline `transform: rotate(Ndeg)` about the box centre (absent when 0).
+- Inside `.content`, anything goes: HTML, lists, `<pre><code>` blocks, tables, iframes.
+- Guides: `data-guides="v960 h540"` on the `.slides` element (vertical/horizontal, px); editor only, never drawn when presenting.
+- Cropped pictures: `data-crop="top right bottom left"` on a `.box.image`, each the share (0–1) of the picture cut off that side; the box is the visible part.
+- Videos: `<div class="box video" style="…"><div class="content"><video src="assets/clip.mp4" poster="assets/clip.jpg" controls playsinline></video></div></div>`;
+  add `data-autoplay` (reveal.js plays it when the slide appears), `muted` and/or `loop` on the `<video>`. Trim with a media fragment: `src="assets/clip.mp4#t=5,12"`.
+- Groups: `<div class="box group" style="left/top/width/height">` holding member `.box`es whose geometry is relative to the group's top-left; the group can be rotated/flipped like any box and has no `.content`. Groups can nest. The editor keeps a group's box hugging its members.
+- Theme: a block in `<style id="deck-theme">` between `/* slides-theme {…} */` and `/* end slides-theme */` (written by the Themes panel) sets the deck font, text and title colours, and `--th-title-size` / `--th-body-size`; text without its own font or colour inherits it, layout placeholders size from it, and the rest of that style is left as you wrote it.
+- Edited layouts live in the theme JSON (`"layouts": {"title-body": [[role, x, y, w, h, pt, valign, align], …]}`, sizes relative to 28 / 18 pt titles / bodies).
+- Layouts and placeholders: `data-layout` on a `<section>` names its layout (title, section, title-body, two-columns, title-only, one-column,
+  main-point, section-description, caption, big-number, blank); a box with `data-placeholder="Click to add title"` (and `data-role` title / sub / body)
+  shows that prompt in the editor while empty, survives being left empty, and is hidden in the deck until it has text.
+- Slide ids: the editor gives each `<section>` a `data-sid` (how edits made in two places merge, slide by slide). Keep it when you change a slide; a slide you add may leave it out (it gets one), but never copy one slide's `data-sid` onto another.
+- Vertical stacks (reveal.js sub-slides): wrap slides in an outer `<section>`: `<section><section>main</section><section>below</section></section>`.
+  The first is the main slide, the rest sit below it (presenting: ↓ / ↑). Numbering follows reveal: main slide 3, its sub-slides 3.1, 3.2
+  (filmstrip, the slideshow pill and its slide picker). The filmstrip draws a stack as a tree (sub-slides smaller, under a rail; ▾ / ▸ on the
+  main slide folds them, showing "+2", remembered per deck); grid view keeps one cell per main slide, with a stack's sub-slides in that cell under it.
+
+- Slide background (Slide → Change background): `data-background-color` on the `<section>`, plus optional `data-background-image="assets/….png"` (any URL or data URI), drawn to cover the slide.
+- Shapes: `data-shape` = `rect | roundrect | ellipse | triangle | diamond | parallelogram | trapezoid | pentagon | hexagon | octagon | star | plus | minus | multiply | divide | equal | notequal | brackets | braces | leftbracket | rightbracket | leftbrace | rightbrace | cloud | arrow | leftarrow | uparrow | downarrow | leftrightarrow | updownarrow | quadarrow | bentarrow | uturnarrow | notchedarrow | curvedarrow | curvedleftarrow | curveduparrow | curveddownarrow | leftrightuparrow | leftuparrow | bentuparrow | stripedarrow | homeplate | rightarrowcallout | leftarrowcallout | uparrowcallout | downarrowcallout | leftrightarrowcallout | quadarrowcallout | circulararrow | chevron | callout | roundcallout | ovalcallout | cloudcallout | explosion1 | explosion2 | star4 | star6 | star7 | star8 | star10 | star12 | star16 | star24 | star32 | ribbonup | ribbon | curvedribbonup | curvedribbon | vscroll | hscroll | wave | doublewave | snip1rect | snip2samerect | snip2diagrect | sniproundrect | round1rect | round2samerect | round2diagrect | rttriangle | heptagon | decagon | dodecagon | pie | arc | teardrop | chord | frame | halfframe | corner | diagstripe | cross | plaque | can | cube | bevel | donut | nosmoking | blockarc | foldedcorner | smileyface | heart | lightningbolt | sun | moon | flow-process … flow-display (Slides' 28 flowchart shapes: flow- + the OOXML name after flowChart, lowercased) | wordart | line | arrowline | elbow | curve`,
+  styled with `--fill`, `--stroke`, `--sw`; `data-dash="dot|dash|dashdot|longdash|longdashdot"` dashes the outline (text boxes too). Lines take
+  `data-start` / `data-end` = `none | arrow | fill-arrow | circle | square | diamond | open-arrow | open-circle | open-square | open-diamond`
+  (`arrowline` is a line whose end defaults to `fill-arrow`). Ends grow with the line weight as in Slides (an arrow is ~9.4× the weight long).
+  `elbow` and `curve` are connectors drawn corner to corner like lines,
+  leaving and arriving horizontally (a right-angle step, or an S-curve).
+  `wordart` draws the box's text as one line of letters stretched to the box (fill `--fill`, outline `--stroke` / `--sw`; font from `.content`).
+  A line, arrow or connector can be attached to shapes with `data-from` / `data-to` = `"boxId:t|r|b|l"` (the middle of a side; `from` is
+  the left end): whenever the deck loads (editor and slideshow), an attached line is fitted to those points, so it follows the shapes
+  however they moved; with one end attached the whole line moves with that shape. The editor writes the fitted geometry back.
+  An elbow connector (`data-shape="elbow"`) routes from its ends' sides: two horizontal (l/r, or unattached) or two vertical (t/b) ends give
+  three segments with the middle one at `data-bend` (0..1 of the span, default 0.5; the yellow handle; right-click → Reroute connector resets it),
+  one of each gives a single bend, and two ends on the same side (`b` and `b`, or `r` and `r`, …) give a U that runs `data-out` px
+  (default 60; the yellow handle) past the further end: a feedback edge. A curved connector (`curve`) routes the same way, its S bending at `data-bend` (handle on the curve); with one bend it is OOXML's curvedConnector2, a gentle arc whose controls sit at the midpoints of the two legs.
+  `data-shape="path"` with `data-path="M0,0 C… L…"` is a freehand stroke (Curve, Polyline, Scribble): SVG path commands in 0..1 units of the box, so it scales with it.
+  Shapes are drawn from the OOXML preset geometry Google Slides uses (ECMA-376 `presetShapeDefinitions`), including where text sits.
+  `data-adj`, `data-adj2`, … are the preset's adj1, adj2, … scaled 0–1 (e.g. `arrow` = rightArrow: adj1 shaft thickness of the height,
+  adj2 head length of the shorter side, both 0.5 by default; `roundrect`: corner radius of the shorter side, 0.1667); the editor's yellow handles set them.
+  Outlines are centred on the shape's edge, as in Slides. Lines run corner to corner (`data-dir="up"` flips them);
+  height 0 gives a horizontal line. Don't write SVG; it's drawn at load time.
+- Line spacing: the editor's Single / 1.15 / 1.5 / Double mean what they mean in Slides (multiples of the font's natural line height, about 1.15), written as CSS `line-height` 1.15 / 1.323 / 1.725 / 2.3; a `.content` without one keeps 1.3.
+- Page size: `<div class="slides" data-size="1920x1440">` makes every slide 1920 × 1440 (4:3; 192 px = 1 in); absent means 1920 × 1080. shapes.js sizes the sections and tells reveal.js. File → Page setup sets it (16:9, 16:10, 4:3 or W x H inches); objects keep their positions.
+- Fonts: `font-family` on `.content` (or a `<span>`), e.g. `style="font-family: 'Roboto Slab', serif"`. A Google Fonts family also needs
+  `<link id="deck-fonts" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap">` in the head
+  (one link, `family=` repeated per font); the font menu writes it. Web-safe fonts (Arial, Georgia, …) need nothing.
+  A font file of your own goes in `assets/fonts/` with an `@font-face` in `#deck-theme`, e.g.
+  `@font-face { font-family: 'My Font'; src: url('assets/fonts/My-Font.ttf'); font-display: swap; }`; the font menu's Your fonts tab
+  (fonts in `~/Library/Fonts` and `/Library/Fonts`) and dropping a .ttf / .otf / .woff / .woff2 on the slide write both.
+- Equations: LaTeX between `$…$` / `\(…\)` (inline) or `$$…$$` / `\[…\]` (display) in any box is typeset by KaTeX (shapes.js loads it
+  from jsDelivr; `--build` vendors it). The deck keeps the source; Insert → Equation adds one, double-click shows the source to edit.
+- Tables: `<div class="box table" data-valign="top" …><div class="content" style="padding: 0px"><table><tr><td>…</td></tr></table></div></div>`;
+  the table fills the box with 1pt black rules (base.css). Insert → Table picks the size; while editing, Tab / ⇧Tab move between
+  cells (Tab in the last cell adds a row) and right-click inserts or deletes rows and columns.
+- Web embeds: `<div class="box embed" …><div class="content"><iframe src="https://…" allowfullscreen></iframe></div></div>` shows a live page
+  (or a YouTube / Vimeo player: Insert → Video → By URL converts the page address). The editor shows it but doesn't pass clicks
+  to it; the slideshow does.
+- Live boxes (Insert → Live box): a box running a page of its own, for a demo, a simulation or a plot you can hover:
+  `<div class="box live" …><div class="content"><iframe src="assets/demo.html" sandbox="allow-scripts allow-pointer-lock"></iframe></div></div>`.
+  Write the page as an ordinary HTML file in `assets/` (its own `<script>`, sized to the window: the box's size). It runs in a
+  sandbox: it can draw, animate and take the mouse and keys, and load things from the web, but can't reach the deck, other
+  files or anyone's accounts. Keep the `sandbox` attribute exactly so. The editor shows it running; double-clicking it edits the page.
+- Code: `<pre><code class="language-python">…</code></pre>` inside a box's `.content` is coloured by highlight.js (reveal.js' highlight
+  plugin, loaded by shapes.js beside reveal.js); any highlight.js language name works. Insert → Code block picks the language,
+  right-click → Code language changes it; Enter inside a code block adds a line.
+- Icons: `<div class="box" data-shape="icon" data-icon="lightbulb" style="…; --fill: #202124">` draws that Material Symbols glyph
+  (any name from fonts.google.com/icons) filling the box, coloured by `--fill`. The deck needs
+  `<link id="deck-icons" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=lightbulb&display=block">`
+  (every icon used, comma-separated and sorted); Insert → Icon writes both.
+- Letter spacing: CSS `letter-spacing` on `.content` (whole box) or on a `<span>` (selected text); Format → Text → Letter spacing writes -0.05em / -0.025em / normal / 0.05em / 0.1em. Capitalization (lowercase / UPPERCASE / Title Case) rewrites the characters themselves, so it needs no attribute.
+- Paragraph spacing: `--space-before` / `--space-after` on `.content` (e.g. `style="--space-after: 26.67px"`, 10pt) become top / bottom margins on each paragraph (every block child and list item). The line-spacing menu's Add / Remove space before / after paragraph toggles 10pt.
+- Text insets: the editor writes Slides' defaults on new boxes (`padding: 9.6px 19.2px` on `.content`, i.e. 0.05 in / 0.1 in); a `.content` without its own padding gets 8 px / 16 px.
+- Text boxes can also take `--fill`, `--stroke`, `--sw`. A translucent fill is just a colour with alpha (`--fill: #4a86e880`); an image's opacity is an inline `opacity` on its `<img>`. `data-valign="top|bottom"` changes vertical alignment.
+- Optional box attributes (Format → Format options): `data-flip="h|v|hv"` mirrors the box (text stays readable),
+  `data-shadow` adds a drop shadow (tuned by `data-shadow-color` `#rrggbb`, `-opacity` 0–1, `-angle` deg with 90 = down, `-distance` and `-blur` px; defaults #000000, 0.3, 90, 6, 8), `data-lock="aspect"` keeps proportions when resizing,
+  `data-autofit="none|shrink|resize"`: no fitting, shrink the text to fit the box (done at load by `#deck-shapes`), or grow the box to fit the text (the default for text boxes).
+- Text boxes grow to fit their text while editing. `data-minh` is the height the user dragged; the editor never shrinks a box below it (optional; defaults to the current height).
+- Slide transitions: `data-transition` on the `<section>` = `fade` (Dissolve) | `fade-in fade-out` (Fade) | `slide` | `sl-left` | `convex` (Flip) | `concave` (Cube) | `zoom` (Gallery), optional `data-transition-speed="slow|fast"`.
+- Morph (Keynote's Magic Move, reveal's Auto-Animate): `data-auto-animate` on a `<section>` (instead of `data-transition`)
+  animates from the slide before: each box that has a partner there moves, resizes and recolours into place, and the rest fade.
+  A box's partner is the box on the slide before whose `id` equals this box's `data-morph` (or, without one, its own `id`);
+  ids stay unique in the deck, so a copied box gets a new id and `data-morph` names the one it continues. In the editor:
+  duplicate the slide (Duplicate slide sets `data-morph` on each copy), change the copy, and give it `data-auto-animate`. By
+  hand, see "Building a diagram up step by step" above. Optional `data-auto-animate-duration` in seconds (0.5 fast, 1.4 slow).
+- Object animations are reveal fragments on the box: `class="box fragment fade-in"` (or `appear`, `fade-right` = fly in from left, `fade-left`, `fade-up`, `fade-down`, `zoom-in`), ordered by `data-fragment-index` (`data-with-previous` marks one that plays with the one before it, sharing its index). Alt text: the image's `alt`, or `aria-label` on the box.
+  More effects: `fade-out`, `semi-fade-out` (dim), `fade-in-then-out`, `fade-in-then-semi-out` (fade in, then dim when the
+  next step comes: walking through bullets), `highlight-current-blue` (coloured while it is the current step), `grow`, `shrink`,
+  `strike`. `data-build="paragraph"` on an animated text box makes each paragraph or bullet its own step with the box's effect.
+  Pictures that replace each other in one place (a plot that updates): stack them at the same position, the first
+  `fade-out` with the second's step, each middle one `fade-in-then-out`, the last `fade-in` (Arrange → Stack as a sequence).
+- Backgrounds beyond colour and image (reveal's own): `data-background-video="assets/clip.mp4"` (with `data-background-video-loop`
+  and `data-background-video-muted`) or `data-background-iframe="https://…"` (a live web page) on the `<section>`.
+- A slide's own style: `<style class="slide-css" media="not all">` inside the `<section>`, holding ordinary CSS rules
+  (`.box > .content { … }`) that apply to that slide only. `media="not all"` keeps it from applying to anything else; the
+  editor and the slideshow scope it to its slide (Slide → Slide style).
+- Any deck reads as a scrolling page with `?view=scroll` (reveal's scroll view; narrow phone screens get it by themselves).
+- Figures: a `.box.image` may carry `data-source` (the command that makes its picture; `{out}` is the picture's path, run in the
+  deck's folder by `glideshow figure refresh`) and `data-made` (when it was last made, ISO time). Both are optional.
+- Give every box a unique `id`. Ids starting with `ed-` are reserved for the editor's own interface. Put deck-specific CSS in `<style id="deck-theme">`.
+- Don't edit `#deck-base`, `#deck-shapes` or `#deck-present`. The editor overwrites them from `editor/` on every save.
+
+The editor watches `deck.html`: edits made on disk appear within a second. Saves are tied to the
+file's mtime, so if the file changed underneath the editor, it reloads instead of overwriting it.

glideshow/editor/.assetsignore

@@ -0,0 +1,5 @@
+# not served: type-checking files (tsc -p editor)
+tsconfig.json
+globals.d.ts
+.DS_Store
+**/.DS_Store

glideshow/editor/data/font-metrics.json

@@ -0,0 +1 @@
+{"ABeeZee":0.329,"Abel":0.3423,"Abhaya Libre":0.25,"Abril Fatface":0.3835,"Acme":0.326,"Actor":0.3395,"Advent Pro":0.366,"Alata":0.41,"Albert Sans":0.35,"Alegreya":0.3355,"Alegreya Sans":0.3,"Aleo":0.305,"Alex Brush":0.2,"Alexandria":0.3585,"Alfa Slab One":0.3515,"Allura":0.175,"Almarai":0.347,"Amaranth":0.37,"Amatic SC":0.3855,"Amiri":0.245,"Andada Pro":0.3535,"Andika":0.415,"Anek Telugu":0.15,"Antic Slab":0.345,"Anton":0.4236,"Antonio":0.5078,"Architects Daughter":0.2915,"Archivo":0.334,"Archivo Black":0.334,"Archivo Narrow":0.3615,"Arial":0.3467,"Arimo":0.3467,"Arsenal":0.373,"Arvo":0.3569,"Asap":0.361,"Asap Condensed":0.361,"Assistant":0.367,"Atkinson Hyperlegible":0.33,"Atkinson Hyperlegible Next":0.334,"Audiowide":0.3523,"BIZ UDPGothic":0.3799,"Bai Jamjuree":0.375,"Baloo 2":0.277,"Balsamiq Sans":0.3,"Bangers":0.351,"Barlow":0.4,"Barlow Condensed":0.4,"Barlow Semi Condensed":0.4,"Baskervville":0.3515,"Be Vietnam Pro":0.3675,"Bebas Neue":0.3,"Belleza":0.352,"Berkshire Swash":0.3589,"Besley":0.4125,"Biryani":0.2265,"Bitter":0.335,"Black Han Sans":0.29,"Black Ops One":0.2886,"Blinker":0.36,"Bodoni Moda":0.3625,"Bree Serif":0.398,"Bricolage Grotesque":0.33,"Bungee":0.36,"Cabin":0.3575,"Cairo":0.366,"Cantarell":0.3857,"Cardo":0.3132,"Carlito":0.3418,"Catamaran":0.28,"Caveat":0.33,"Chakra Petch":0.342,"Changa":0.307,"Changa One":0.351,"Chelsea Market":0.3687,"Chivo":0.345,"Cinzel":0.302,"Cinzel Decorative":0.302,"Comfortaa":0.3235,"Comic Neue":0.325,"Comic Sans MS":0.4053,"Commissioner":0.4055,"Concert One":0.3894,"Cookie":0.2345,"Cormorant":0.3185,"Cormorant Garamond":0.3185,"Cormorant Infant":0.3185,"Courgette":0.3516,"Courier New":0.2661,"Courier Prime":0.2197,"Creepster":0.3667,"Crete Round":0.352,"Crimson Pro":0.3408,"Crimson Text":0.2993,"Cuprum":0.3175,"Cutive Mono":0.2781,"DM Mono":0.341,"DM Sans":0.341,"DM Serif Display":0.3505,"DM Serif Text":0.3505,"Damion":0.3228,"Dancing Script":0.32,"Dela Gothic One":0.436,"Delius":0.358,"Didact Gothic":0.3905,"Domine":0.33,"Doppio One":0.3809,"Dosis":0.395,"EB Garamond":0.3545,"Eczar":0.2545,"El Messiri":0.2375,"Encode Sans":0.405,"Encode Sans Condensed":0.405,"Epilogue":0.2775,"Exo":0.3375,"Exo 2":0.399,"Faustina":0.413,"Figtree":0.35,"Fira Code":0.334,"Fira Mono":0.335,"Fira Sans":0.335,"Fira Sans Condensed":0.335,"Fjalla One":0.3804,"Forum":0.304,"Francois One":0.38,"Frank Ruhl Libre":0.3115,"Fraunces":0.3615,"Fredoka":0.369,"Fugaz One":0.312,"Fustat":0.29,"GFS Didot":0.335,"Gabarito":0.34,"Geist":0.355,"Geist Mono":0.355,"Gelasio":0.293,"Geologica":0.35,"Georgia":0.3489,"Gilda Display":0.3035,"Gloria Hallelujah":0.4141,"Goldman":0.3,"Golos Text":0.38,"Google Sans":0.34,"Google Sans Code":0.34,"Google Sans Flex":0.34,"Gothic A1":0.2979,"Gravitas One":0.3098,"Great Vibes":0.225,"Gruppo":0.3171,"Hammersmith One":0.2754,"Handlee":0.2665,"Hanken Grotesk":0.3485,"Heebo":0.3135,"Hind":0.2545,"Hind Guntur":0.171,"Hind Madurai":0.292,"Hind Siliguri":0.3075,"Homemade Apple":0.2251,"Host Grotesk":0.35,"IBM Plex Mono":0.375,"IBM Plex Sans":0.375,"IBM Plex Sans Arabic":0.335,"IBM Plex Sans Condensed":0.375,"IBM Plex Sans Thai":0.291,"IBM Plex Serif":0.375,"Impact":0.3989,"Inconsolata":0.3345,"Indie Flower":0.2412,"Instrument Sans":0.36,"Instrument Serif":0.34,"Inter":0.3638,"Inter Tight":0.3638,"Istok Web":0.2866,"Italianno":0.175,"JetBrains Mono":0.36,"Josefin Sans":0.25,"Josefin Slab":0.25,"Jost":0.3475,"Jua":0.3,"Kalam":0.266,"Kanit":0.3525,"Karla":0.3325,"Kaushan Script":0.3585,"Khand":0.2855,"Kosugi Maru":0.3799,"Krub":0.357,"Kumbh Sans":0.3662,"LINE Seed JP":0.382,"Lalezar":0.1955,"Lato":0.387,"League Gothic":0.3675,"League Spartan":0.24,"Leckerli One":0.3595,"Lexend":0.375,"Lexend Deca":0.375,"Lexend Giga":0.375,"Libre Barcode 39":0.1,"Libre Baskerville":0.35,"Libre Bodoni":0.299,"Libre Caslon Text":0.355,"Libre Franklin":0.36,"Lilita One":0.3515,"Literata":0.4345,"Lobster":0.375,"Lobster Two":0.375,"Lora":0.366,"Luckiest Guy":0.2031,"Lusitana":0.3075,"Lustria":0.314,"M PLUS 1":0.436,"M PLUS 1p":0.3775,"M PLUS Rounded 1c":0.3775,"Manrope":0.383,"Marcellus":0.3472,"Martel":0.2815,"Maven Pro":0.3775,"Merienda":0.38,"Merriweather":0.3555,"Merriweather Sans":0.3555,"Michroma":0.4453,"Mitr":0.365,"Monda":0.3872,"Monoton":0.377,"Montagu Slab":0.341,"Montserrat":0.3585,"Montserrat Alternates":0.3585,"Mrs Saint Delafield":0.1435,"Mukta":0.299,"Mulish":0.3775,"Nanum Gothic":0.344,"Nanum Gothic Coding":0.3,"Nanum Myeongjo":0.2998,"Nanum Pen Script":0.3,"Neuton":0.3958,"News Cycle":0.4346,"Newsreader":0.235,"Nothing You Could Do":0.2695,"Noticia Text":0.3928,"Noto Color Emoji":0.3418,"Noto Kufi Arabic":0.3335,"Noto Naskh Arabic":0.2175,"Noto Nastaliq Urdu":0.654,"Noto Sans":0.388,"Noto Sans Arabic":0.318,"Noto Sans Bengali":0.2545,"Noto Sans Devanagari":0.244,"Noto Sans Display":0.388,"Noto Sans HK":0.436,"Noto Sans Hebrew":0.388,"Noto Sans JP":0.436,"Noto Sans KR":0.436,"Noto Sans Khmer":0.388,"Noto Sans Malayalam":0.2405,"Noto Sans Mono":0.388,"Noto Sans SC":0.436,"Noto Sans TC":0.436,"Noto Sans Tamil":0.25,"Noto Sans Telugu":0.193,"Noto Sans Thai":0.3055,"Noto Serif":0.388,"Noto Serif Display":0.388,"Noto Serif JP":0.4325,"Noto Serif KR":0.4325,"Noto Serif SC":0.4325,"Noto Serif TC":0.4325,"Nunito":0.329,"Nunito Sans":0.329,"Old Standard TT":0.262,"Oleo Script":0.3125,"Onest":0.3325,"Open Sans":0.3879,"Orbitron":0.384,"Oswald":0.452,"Outfit":0.37,"Overpass":0.25,"Oxanium":0.29,"Oxygen":0.3955,"PT Mono":0.325,"PT Sans":0.371,"PT Sans Caption":0.371,"PT Sans Narrow":0.371,"PT Serif":0.3765,"Pacifico":0.425,"Palanquin Dark":0.4145,"Pangolin":0.3125,"Parisienne":0.2344,"Passion One":0.2845,"Pathway Gothic One":0.378,"Patrick Hand":0.365,"Patua One":0.3625,"Paytone One":0.415,"Permanent Marker":0.396,"Petrona":0.294,"Philosopher":0.34,"Pinyon Script":0.2395,"Pirata One":0.3635,"Play":0.3585,"Playball":0.325,"Playfair":0.2855,"Playfair Display":0.4155,"Playfair Display SC":0.4155,"Plus Jakarta Sans":0.408,"Poiret One":0.377,"Poppins":0.35,"Prata":0.3155,"Press Start 2P":0.5,"Prompt":0.334,"Public Sans":0.3625,"Quantico":0.348,"Quattrocento":0.294,"Quattrocento Sans":0.294,"Questrial":0.305,"Quicksand":0.375,"Racing Sans One":0.346,"Radio Canada":0.345,"Radio Canada Big":0.345,"Rajdhani":0.292,"Raleway":0.353,"Ramabhadra":0.3777,"Rammetto One":0.3455,"Readex Pro":0.375,"Red Hat Display":0.3565,"Red Hat Text":0.3565,"Reddit Sans":0.3604,"Reenie Beanie":0.25,"Rethink Sans":0.341,"Righteous":0.364,"Roboto":0.3418,"Roboto Condensed":0.3418,"Roboto Flex":0.3418,"Roboto Mono":0.3884,"Roboto Serif":0.3415,"Roboto Slab":0.3884,"Rock Salt":0.4077,"Rokkitt":0.2485,"Rowdies":0.376,"Rubik":0.3425,"Rubik Mono One":0.313,"Russo One":0.3235,"STIX Two Text":0.262,"Sacramento":0.2004,"Saira":0.348,"Saira Condensed":0.348,"Saira Extra Condensed":0.348,"Saira Semi Condensed":0.348,"Sanchez":0.365,"Sarabun":0.418,"Satisfy":0.2227,"Sawarabi Gothic":0.419,"Sawarabi Mincho":0.3755,"Schibsted Grotesk":0.3594,"Sen":0.3379,"Shadows Into Light":0.3716,"Share Tech":0.3215,"Share Tech Mono":0.3215,"Shippori Mincho":0.436,"Signika":0.324,"Signika Negative":0.324,"Slabo 13px":0.3077,"Slabo 27px":0.3148,"Smooch Sans":0.3,"Sofia Sans":0.3,"Sofia Sans Condensed":0.3,"Sofia Sans Extra Condensed":0.3,"Sora":0.34,"Sorts Mill Goudy":0.241,"Source Code Pro":0.3555,"Source Sans 3":0.312,"Source Serif 4":0.3505,"Space Grotesk":0.346,"Space Mono":0.3795,"Special Elite":0.2031,"Spectral":0.298,"Staatliches":0.325,"Syncopate":0.2759,"Syne":0.325,"Tahoma":0.397,"Tajawal":0.143,"Tangerine":0.25,"Teko":0.2415,"Tenor Sans":0.335,"Times New Roman":0.3374,"Tinos":0.3374,"Titan One":0.3975,"Titillium Web":0.3725,"Trebuchet MS":0.3584,"Ubuntu":0.3715,"Ubuntu Condensed":0.3715,"Ubuntu Mono":0.33,"Unbounded":0.375,"Unica One":0.326,"Unna":0.307,"Urbanist":0.35,"VT323":0.3,"Varela Round":0.316,"Vazirmatn":0.2441,"Verdana":0.3977,"Vidaloka":0.3337,"Viga":0.343,"Volkhov":0.326,"Vollkorn":0.2555,"Work Sans":0.3435,"Yanone Kaffeesatz":0.2675,"Yantramanav":0.2905,"Yellowtail":0.3352,"Yeseva One":0.3375,"Zen Kaku Gothic New":0.436,"Zen Maru Gothic":0.436,"Zen Old Mincho":0.436,"Zeyada":0.124,"Zilla Slab":0.344}