rshow 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rshow",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Publish static artifacts to rshow",
   "license": "MIT",
   "homepage": "https://rslib.github.io/rshow",
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@types/node": "^26.6.6",
     "esbuild": "0.28.2",
+    "katex": "0.19.1",
     "rshow-shared": "*",
     "typescript": "^5.9.3"
   }

package/skills/rshow/SKILL.md

@@ -20,7 +20,7 @@ Copy this checklist into the reply and tick it as you go.
 
 ```text
 - [ ] shape picked and outline or headings agreed
-- [ ] page written, theme linked at a pinned version
+- [ ] page written, theme linked at `@latest`
 - [ ] rshow check <dir> exits 0
 - [ ] rshow preview <dir> looked at 360px wide and at desktop width
 - [ ] audience confirmed with the person
@@ -30,7 +30,7 @@ Copy this checklist into the reply and tick it as you go.
 ```
 
 1. Pick the shape and say it back in one sentence, such as a page, a report, a poster, a project page, a dashboard, a mockup, a sketch, a terminal page or a prerendered Astro or Vite site.
-2. Write `index.html` in its own folder, link the theme at a pinned version and keep every other path relative.
+2. Write `index.html` in its own folder, link the theme at `@latest` and keep every other path relative.
 3. Run `rshow check <dir>`.
 4. Fix every error, then run `rshow check` again until it exits 0.
 5. Run `rshow preview <dir>` and open the printed `http://127.0.0.1:4321` link.
@@ -46,7 +46,10 @@ Copy this checklist into the reply and tick it as you go.
 - Every path inside the artifact is relative, with no leading slash.
   The only exceptions are `/_themes/...` and `/_data/...`.
 - Link the theme, never copy it.
-  The stylesheet links and `mode.js` in the head all carry the same `<name>@<n>` version.
+  The stylesheet links and `mode.js` in the head all carry the same `<name>@latest`.
+- Link `@latest`, so a theme fix reaches the page with no republish.
+  Write a number only when the person asks to freeze a page, such as a talk on the day it is given.
+  A page frozen on a number needs 8 or newer for math.
 - The theme is the base, not a cage.
   A page may carry one inline `<style>` block with its own classes and its own layouts when the content needs them.
   Own CSS takes colour, type and space from the theme tokens with `var(--...)`, so light, dark, print and a theme swap keep working.
@@ -62,6 +65,10 @@ Copy this checklist into the reply and tick it as you go.
   Never write `latest`.
 - A report links `report.css` and `report.js` in place of `page.css`, and `mode.js` still goes in the head.
   Read [reports](reference/reports.md) before you write one.
+- Math is LaTeX in the text of an element with the class `math`, and the page links `math.css` and `math.js` for it.
+  A `div.math` is display math and any other element is inline.
+  A `$` in the prose is a price and is never read as math, so `$5` stays text.
+  Read [reports](reference/reports.md) for the markup an equation takes.
 - The page reads at 360px wide.
   Tables go inside `<div class="table">`.
 - Nothing secret in a page, because anyone who holds the link can read the HTML source.
@@ -145,6 +152,8 @@ The short list above is a hard rule.
 - Never publish a folder that holds `.env`, a key, a credential or customer data.
 - Never publish a source tree, `node_modules` or a `dist` folder that still holds a draft.
 - Never write the token into a page, a script, a log line, a commit or a chat message.
+- Never fake math with Unicode subscripts, Greek letters in mono or an HTML `<sub>`.
+  Write the LaTeX in an element with the class `math` and link `math.css` and `math.js`.
 - Never create a second artifact with a `-v2` slug.
   Publish the same slug again.
-- Never delete an artifact or drop a share without a yes from the person.
+- Never delete a version, a theme or an artifact, and never drop a share, unless the person asks for it.

package/skills/rshow/reference/cli.md

@@ -25,7 +25,7 @@ This file is the whole surface, both config files and the exit codes.
 | `rshow check <file-or-dir>` | apply the page contract to the files a publish would upload |
 | `rshow preview <dir>` | serve a folder on `127.0.0.1` for a look, offline |
 | `rshow publish <file-or-dir>` | upload a folder, or one file as `index.html`, as a new version |
-| `rshow config [dir] [--offline]` | print the merged config as JSON, with `theme` resolved to its current version, such as `default@3` |
+| `rshow config [dir] [--offline]` | print the merged config as JSON, with `theme` as `<name>@latest` and, with the network, `theme_resolved` as the version it resolves to |
 | `rshow init --url <admin-url> --art <viewer-url>` | write the global config file, with `--theme` and `--force` |
 | `rshow doctor [dir]` | check node, config, token, api, art, theme and skills, one `ok\|warn\|fail` line each |
 | `rshow list` | list artifacts you own or that are shared with you, with `--project`, `--tag` and `--q` filters |
@@ -36,7 +36,7 @@ This file is the whole surface, both config files and the exit codes.
 | `rshow tag <slug>` | add or remove tags on an artifact |
 | `rshow handoff <slug>@v<n>` | write a design handoff folder from a published design |
 | `rshow compare --against <dir>` | compare an implementation with that handoff folder |
-| `rshow delete <slug> --yes` | delete an artifact |
+| `rshow delete <slug> [--version n] [--force] --yes` | delete an artifact, or one version of it |
 | `rshow theme new <name>` | write a preset folder that extends a built-in theme |
 | `rshow theme check <dir>` | check a theme or preset folder against the token contract |
 | `rshow theme preview <dir>` | build the theme, then serve its preview page on `127.0.0.1` |
@@ -77,7 +77,7 @@ They are never errors, because a person may have a reason.
 `--no-style` skips all of them, and `--json` prints the findings as data.
 
 `--offline` skips every request the check would make, so it works on a plane and it never waits on the host.
-A published page that links `/_themes/<name>@<n>/` needs the network to confirm that version exists, so a `--offline` run reports those links as unchecked rather than as a pass.
+A published page that links `/_themes/<name>@<n>/` or `/_themes/<name>@latest/` needs the network to confirm the theme exists, so a `--offline` run reports those links as unchecked rather than as a pass.
 
 `rshow publish` runs the check first and stops while there is an error, so a page that fails the contract does not go live.
 `--no-check` skips that step.
@@ -90,7 +90,7 @@ rshow preview <dir> [--theme <dir>] [--offline] [--no-reload] [--port 4321]
 ```
 
 It serves `<dir>` on `127.0.0.1`, prints `http://127.0.0.1:<port>` and keeps running until you stop it.
-It works offline: `/_themes/<name>@<n>/` comes from `--theme` when that folder is the theme, then from the built-in theme on disk, and only then from the art URL in the config, which `--offline` turns off.
+It works offline: `/_themes/<name>@<n>/` and `/_themes/<name>@latest/` come from `--theme` when that folder is the theme, then from the built-in theme on disk, and only then from the art URL in the config, which `--offline` turns off.
 A page that uses `<artifact>/_data/<key>` gets a local store for the session, and the page reloads by itself when a file changes, which `--no-reload` turns off.
 
 ## publish
@@ -174,8 +174,10 @@ Set the tags and the project in `rshow.json` when they are a fact about the fold
 `rshow theme publish <dir> [--label l] [--build cmd]` needs a `theme.json` with a `name`, publishes the folder as `theme-<name>`, sets it public and prints `/_themes/<name>@<n>/`.
 `rshow theme list` prints the theme artifacts and the version each one serves.
 `rshow show <slug>` prints the artifact, its versions, its shares, its pin and its URLs.
-`rshow delete <slug> --yes` deletes the artifact and every version.
+`rshow delete <slug> --yes` deletes the artifact and every version, and `--version <n>` deletes only that version.
 It needs `--yes`, and it needs a yes from the person.
+A theme or a theme version also needs `--force`, because pages link to it.
+A public version can stay visible for up to 5 minutes after the delete, and a theme file for longer, so tell the person this when they delete to take something down.
 
 A preset is a small folder whose `theme.json` carries `"extends": "default"` and only token and font overrides.
 `rshow theme new <name> [--dir <parent>] [--from default]` writes it with both modes pre-filled with the base values of `--bg`, `--fg`, `--muted`, `--accent` and `--layer-01`, and prints the path plus `next: rshow theme check <dir>`.
@@ -238,7 +240,7 @@ Later files win, and the environment beats both.
 | `art` | the art base the preview proxies `/_themes/` to, set by `rshow init` or `RSHOW_ART`; without it a theme lookup is skipped with a warning |
 | `slug` | the artifact to publish to, overridden by `--slug` |
 | `title` | the human title, overridden by `--title` |
-| `theme` | the theme a page should link: `<name>`, `<name>@latest` or a fixed `<name>@<n>`. `rshow config` prints it as `<name>@<n>` and you apply it by hand |
+| `theme` | the theme a page should link: `<name>`, `<name>@latest` or a fixed `<name>@<n>`. Agents link `<name>@latest` and `rshow config` keeps it that way, with `theme_resolved` beside it when the lookup works |
 | `tokens` | token overrides recorded and printed by `rshow config`. No command writes them into a page, so apply them by hand |
 | `build` | the command `publish` runs in the folder first |
 | `out` | the folder under `<dir>` to publish, default `dist` |

package/skills/rshow/reference/dashboard.md

@@ -30,11 +30,11 @@ A dashboard that nobody filters is a report with extra steps.
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Write-ahead log, results per run</title>
-<link rel="stylesheet" href="/_themes/default@3/fonts.css">
-<link rel="stylesheet" href="/_themes/default@3/tokens.css">
-<link rel="stylesheet" href="/_themes/default@3/dashboard.css">
-<script src="/_themes/default@3/mode.js"></script>
-<script defer src="/_themes/default@3/dashboard.js"></script>
+<link rel="stylesheet" href="/_themes/default@latest/fonts.css">
+<link rel="stylesheet" href="/_themes/default@latest/tokens.css">
+<link rel="stylesheet" href="/_themes/default@latest/dashboard.css">
+<script src="/_themes/default@latest/mode.js"></script>
+<script defer src="/_themes/default@latest/dashboard.js"></script>
 </head>
 <body>
 <div class="dashboard" data-src="results.csv" data-facet="workload"

package/skills/rshow/reference/page-contract.md

@@ -8,7 +8,7 @@ It reads the files a publish would upload, so for a prerendered site it reads th
 
 - One `index.html` at the root of the folder you publish.
 - Every other path inside the artifact is relative and has no leading slash, such as `chart.svg`.
-- The two root-relative prefixes are `/_themes/<name>@<n>/` and `/_data/`, and both point at the host on purpose.
+- The root-relative prefixes are `/_themes/<name>@latest/`, `/_themes/<name>@<n>/` and `/_data/`, and all point at the host on purpose.
 - At most 2000 files and 100 MiB per version, and at most 25 MiB per file.
 - No theme file in the artifact.
   No `deck.css`, no `page.css`, no font file, no `assets/` copy of a theme.
@@ -34,6 +34,7 @@ The theme files under `/_themes/` count as `'self'`, so a linked theme needs no
 ## CDN builds, pinned
 
 Pin the exact version in the URL and never write `@latest` or a moving tag, which `rshow check` counts as an error.
+A theme link is the one moving link that is allowed, so `/_themes/<name>@latest/` is right and a number is for a frozen page.
 
 | Library | Pinned URL |
 |---|---|

package/skills/rshow/reference/pages.md

@@ -27,8 +27,8 @@ A single file published on its own becomes `index.html` and nothing else is uplo
 
 ## The skeleton
 
-Replace `<name>@<n>` with the `theme` value that `rshow config <dir>` prints, which the server resolves to the current version. Use `default@3` only when `rshow config` warns that it cannot resolve the theme.
-Every link carries the same version on purpose, because a mixed version renders somewhere between two designs.
+Link the theme at `@latest`, so a theme fix reaches the page with no republish. Write a number only when the person asks to freeze a page, such as a talk on the day it is given. A page frozen on a number needs 8 or newer for math.
+Every link names the same theme on purpose, and all of them use `@latest` or all use the same number, because a mix of two versions renders somewhere between two designs.
 
 ```html
 <!doctype html>
@@ -37,10 +37,10 @@ Every link carries the same version on purpose, because a mixed version renders
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Q3 latency report</title>
-<link rel="stylesheet" href="/_themes/default@3/fonts.css">
-<link rel="stylesheet" href="/_themes/default@3/tokens.css">
-<link rel="stylesheet" href="/_themes/default@3/page.css">
-<script src="/_themes/default@3/mode.js"></script>
+<link rel="stylesheet" href="/_themes/default@latest/fonts.css">
+<link rel="stylesheet" href="/_themes/default@latest/tokens.css">
+<link rel="stylesheet" href="/_themes/default@latest/page.css">
+<script src="/_themes/default@latest/mode.js"></script>
 <style>:root{--accent: #0f62fe;}</style>
 </head>
 <body>
@@ -164,7 +164,7 @@ Put the same thing in `rshow.json` when it should not be retyped:
 {
   "slug": "status",
   "title": "Cluster status",
-  "theme": "default@3",
+  "theme": "default@latest",
   "build": "npm run build",
   "out": "dist"
 }

package/skills/rshow/reference/poster.md

@@ -37,12 +37,12 @@ The status line beside the buttons always names the width and the height, so the
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Immutable artifacts for reproducible figures</title>
-<link rel="stylesheet" href="/_themes/default@3/fonts.css">
-<link rel="stylesheet" href="/_themes/default@3/tokens.css">
-<link rel="stylesheet" href="/_themes/default@3/poster.css">
-<script src="/_themes/default@3/mode.js"></script>
+<link rel="stylesheet" href="/_themes/default@latest/fonts.css">
+<link rel="stylesheet" href="/_themes/default@latest/tokens.css">
+<link rel="stylesheet" href="/_themes/default@latest/poster.css">
+<script src="/_themes/default@latest/mode.js"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.js"></script>
-<script defer src="/_themes/default@3/poster.js"></script>
+<script defer src="/_themes/default@latest/poster.js"></script>
 </head>
 <body>
 

package/skills/rshow/reference/project-page.md

@@ -38,11 +38,11 @@ Link `fonts.css`, `tokens.css` and `project.css`, then `mode.js` in the head and
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Immutable artifacts for reproducible figures</title>
-<link rel="stylesheet" href="/_themes/default@3/fonts.css">
-<link rel="stylesheet" href="/_themes/default@3/tokens.css">
-<link rel="stylesheet" href="/_themes/default@3/project.css">
-<script src="/_themes/default@3/mode.js"></script>
-<script defer src="/_themes/default@3/project.js"></script>
+<link rel="stylesheet" href="/_themes/default@latest/fonts.css">
+<link rel="stylesheet" href="/_themes/default@latest/tokens.css">
+<link rel="stylesheet" href="/_themes/default@latest/project.css">
+<script src="/_themes/default@latest/mode.js"></script>
+<script defer src="/_themes/default@latest/project.js"></script>
 </head>
 <body>
 <div class="project">

package/skills/rshow/reference/reports.md

@@ -35,11 +35,11 @@ Link `fonts.css`, `tokens.css` and `report.css`, then `mode.js` in the head and
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Publishing a folder as an immutable artifact</title>
-<link rel="stylesheet" href="/_themes/default@3/fonts.css">
-<link rel="stylesheet" href="/_themes/default@3/tokens.css">
-<link rel="stylesheet" href="/_themes/default@3/report.css">
-<script src="/_themes/default@3/mode.js"></script>
-<script defer src="/_themes/default@3/report.js"></script>
+<link rel="stylesheet" href="/_themes/default@latest/fonts.css">
+<link rel="stylesheet" href="/_themes/default@latest/tokens.css">
+<link rel="stylesheet" href="/_themes/default@latest/report.css">
+<script src="/_themes/default@latest/mode.js"></script>
+<script defer src="/_themes/default@latest/report.js"></script>
 </head>
 <body>
 <div class="report">
@@ -109,7 +109,11 @@ Numbering is generated, so never type a number into a heading.
 
 `report.js` puts `Figure 1.` or `Table 1.` in front of the caption and counts in document order, so give every one an `id`.
 Draw the figure as inline `<svg>` with the colours from tokens, and give it a `viewBox` so it scales.
-An equation is `<div class="equation" id="eq-bytes">` with the formula inside, and `report.js` adds `(1)` at the end of the line.
+An equation is `<div class="equation" id="eq-bytes">` with a `<div class="math">` of LaTeX inside it, and `report.js` adds `(1)` at the end of the line.
+The report links `math.css` in the head and `math.js` before `report.js`, and `rshow check` reports bad LaTeX as an error.
+Inline math is a `<span class="math">` inside the sentence, and a wide equation scrolls inside its own box on a phone.
+Write `<` as `&lt;` and `&` as `&amp;` inside the LaTeX, and `&amp;` where lines align in a LaTeX alignment.
+A `$...$` in the prose is not math: it is text, so a price such as `$5` stays a price.
 Mark example data as example data in the caption, and never present a number you did not measure.
 
 ## Cross-references

package/skills/rshow/reference/sketch.md

@@ -23,11 +23,11 @@ A sketch is also the honest shape for a workshop, where a tidy drawing would end
 ## Markup
 
 ```html
-<link rel="stylesheet" href="/_themes/default@3/fonts.css">
-<link rel="stylesheet" href="/_themes/default@3/tokens.css">
-<link rel="stylesheet" href="/_themes/default@3/sketch.css">
-<script src="/_themes/default@3/mode.js"></script>
-<script defer src="/_themes/default@3/sketch.js"></script>
+<link rel="stylesheet" href="/_themes/default@latest/fonts.css">
+<link rel="stylesheet" href="/_themes/default@latest/tokens.css">
+<link rel="stylesheet" href="/_themes/default@latest/sketch.css">
+<script src="/_themes/default@latest/mode.js"></script>
+<script defer src="/_themes/default@latest/sketch.js"></script>
 ...
 <div class="sketch" data-src="drawing.excalidraw" data-store="sketch-main"></div>
 ```

package/skills/rshow/reference/terminal.md

@@ -26,11 +26,11 @@ The viewer and the TUI kit are the theme's, and both are guided kits: the frame
 ## The viewer
 
 ```html
-<link rel="stylesheet" href="/_themes/default@3/fonts.css">
-<link rel="stylesheet" href="/_themes/default@3/tokens.css">
-<link rel="stylesheet" href="/_themes/default@3/terminal.css">
-<script src="/_themes/default@3/mode.js"></script>
-<script defer src="/_themes/default@3/terminal.js"></script>
+<link rel="stylesheet" href="/_themes/default@latest/fonts.css">
+<link rel="stylesheet" href="/_themes/default@latest/tokens.css">
+<link rel="stylesheet" href="/_themes/default@latest/terminal.css">
+<script src="/_themes/default@latest/mode.js"></script>
+<script defer src="/_themes/default@latest/terminal.js"></script>
 ...
 <figure class="terminal" data-mode="ansi" data-src="capture.ans"
         data-cols="100" data-rows="30" data-title="procview" data-palette="default"></figure>

package/skills/rshow-slides/SKILL.md

@@ -32,7 +32,7 @@ A topic on its own is not a slide.
 
 ## 2. Skeleton
 
-Replace `<name>@<n>` with the `theme` value that `rshow config <dir>` prints, which the server resolves to the current version. Use `default@3` only when `rshow config` warns that it cannot resolve the theme.
+Link the theme at `@latest`, so a theme fix reaches the deck with no republish. Write a number only when the person asks to freeze a deck, such as a talk on the day it is given. A deck frozen on a number needs 8 or newer for math.
 
 ```html
 <!doctype html>
@@ -41,9 +41,12 @@ Replace `<name>@<n>` with the `theme` value that `rshow config <dir>` prints, wh
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Talk title</title>
-<link rel="stylesheet" href="/_themes/default@3/fonts.css">
-<link rel="stylesheet" href="/_themes/default@3/tokens.css">
-<link rel="stylesheet" href="/_themes/default@3/deck.css">
+<link rel="stylesheet" href="/_themes/default@latest/fonts.css">
+<link rel="stylesheet" href="/_themes/default@latest/tokens.css">
+<link rel="stylesheet" href="/_themes/default@latest/deck.css">
+<!-- a deck that writes math links these two, and math.js goes before deck.js -->
+<link rel="stylesheet" href="/_themes/default@latest/math.css">
+<script defer src="/_themes/default@latest/math.js"></script>
 </head>
 <body>
 <main class="deck">
@@ -65,12 +68,12 @@ Replace `<name>@<n>` with the `theme` value that `rshow config <dir>` prints, wh
   </section>
 
 </main>
-<script src="/_themes/default@3/deck.js"></script>
+<script src="/_themes/default@latest/deck.js"></script>
 </body>
 </html>
 ```
 
-The three stylesheet links and the script carry the same `<n>` on purpose, because a mixed version renders somewhere between two designs.
+The three stylesheet links and the script carry `@latest` on purpose, so a theme fix reaches every deck on the next open.
 The deck needs no `mode.js`, because `deck.js` reads the same key and `t` does the same work.
 Override a token in one `:root` block after the theme links when the deck needs its own accent, with no limit on the declarations.
 An inline `<style>` block after the theme links may also carry a layout of the deck's own, as section 3 says.
@@ -85,6 +88,7 @@ Every slide is a `<section class="slide ...">`, and the second class is one of t
   One series is drawn in the accent blue and two or more take `--chart-1`, `--chart-2` and so on in order.
 - `table` for a clean data table and `code` for one command.
 - `two-col` for two blocks of text, `quote` for one sentence and `big-number` for one number.
+- A slide with an equation is a `bullets` slide with one `<div class="math">` of LaTeX under the title, and the deck links `math.css` and `math.js` for it.
 
 A sparse slide is centred a little above the middle of the canvas, so the air sits under the block.
 A bullets slide puts its points under the title at 28px with a 1.4 line, five at most.
@@ -102,6 +106,7 @@ Vary the rhythm: do not run more than three text slides (`two-col` or `bullets`)
 - Every slide gets one `<aside class="notes">`, including the title slide, because a slide without one shows nothing in the notes window.
 - Keep a note under 60 words.
   It is what you say, not what the room reads.
+- A note holds no math: an equation inside an `aside.notes` stays as its LaTeX, because the notes window loads no math stylesheet.
 - Press `n` for the notes window, which also names the next slide.
 - Press `p` for the presenter view: the current slide, the next slide, the notes and an elapsed timer, kept in step with the deck.
 - Put `class="step"` on any element inside a slide to reveal it one press later, because `deck.js` selects every `.step` in the slide.

package/skills/rshow-slides/reference/layouts.md

@@ -14,6 +14,7 @@
 - two-col
 - quote
 - big-number
+- math (an equation on a bullets slide)
 - your own layout
 
 One markup example per layout, all inside `<main class="deck">`.
@@ -252,6 +253,20 @@ The unit belongs in the statement and the source goes under it.
 
 A number you cannot measure is `[PLACEHOLDER]` until it is real, and a number that stands for an example says so in the source line.
 
+## math
+
+An equation takes a `bullets` slide: a takeaway title and one `div.math`.
+The LaTeX is the text of the element, and the deck links `math.css` and `math.js` for it.
+A note holds words, not math.
+
+```html
+<section class="slide bullets">
+  <h2>A republish sends only the bytes that changed</h2>
+  <div class="math">\mathrm{sent}(n) = \sum_{f \in \mathrm{new}(n)} |f|</div>
+  <aside class="notes"><p>The sum drops every file the host already holds.</p></aside>
+</section>
+```
+
 ## your own layout
 
 A layout of your own takes a short class name and sits second on the slide, in the same slot as the twelve.

package/themes/default/deck.js

@@ -4,7 +4,8 @@
  * Markup: <main class="deck"><section class="slide">...</section>...</main>
  * Keys: arrows, space, PageUp/PageDown, Home/End, f = fullscreen, n = notes,
  * p = presenter view, t = mode (system, light, dark).
- * Mouse: click advances, shift-click goes back, swipe left/right navigates.
+ * Mouse: a click on empty space advances, shift-click goes back, a click or a
+ * drag on text selects it, swipe left/right navigates.
  * URL hash #N keeps the slide. Steps reveal one per advance.
  *
  * Mode. The deck and a page share one storage key, "rshow-mode", holding
@@ -177,7 +178,7 @@
     deck.style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')';
   }
 
-  function writeHash() {
+  function writeHashNow() {
     var want = '#' + (current + 1);
     if (window.location.hash === want) {
       return;
@@ -185,10 +186,27 @@
     try {
       window.history.replaceState(null, '', want);
     } catch (err) {
-      window.location.hash = want;
+      // Assigning the hash here fires hashchange, and that listener would send
+      // the deck back to an old slide, so the address is left as it is.
     }
   }
 
+  // A browser counts the replaceState calls it honours and drops the rest: in
+  // Chrome a burst of keys leaves the address on an old slide, and in Safari the
+  // call throws. One write, 300 ms after the deck comes to rest, keeps the
+  // address current without touching that limit.
+  var hashTimer = null;
+
+  function writeHash() {
+    if (hashTimer) {
+      window.clearTimeout(hashTimer);
+    }
+    hashTimer = window.setTimeout(function () {
+      hashTimer = null;
+      writeHashNow();
+    }, 300);
+  }
+
   function slideTitle(n) {
     var h = slides[n].querySelector('h1, h2, h3');
     var text = h ? h.textContent : '';
@@ -635,14 +653,78 @@
     }
   });
 
+  // Text under a point, so a click on it can select instead of navigating. The
+  // deck canvas is scaled by a transform, but client rects are already in screen
+  // space, so the point needs no maths.
+  function onText(x, y) {
+    try {
+      var node = null;
+      if (document.caretRangeFromPoint) {
+        var caret = document.caretRangeFromPoint(x, y);
+        node = caret ? caret.startContainer : null;
+      } else if (document.caretPositionFromPoint) {
+        var position = document.caretPositionFromPoint(x, y);
+        node = position ? position.offsetNode : null;
+      }
+      if (!node || node.nodeType !== 3) {
+        return false;
+      }
+      var range = document.createRange();
+      range.selectNodeContents(node);
+      var rects = range.getClientRects();
+      for (var k = 0; k < rects.length; k += 1) {
+        if (x >= rects[k].left && x <= rects[k].right &&
+            y >= rects[k].top && y <= rects[k].bottom) {
+          return true;
+        }
+      }
+      return false;
+    } catch (err) {
+      return false;
+    }
+  }
+
+  var pressX = 0;
+  var pressY = 0;
+  var pressTracked = false;
+
+  deck.addEventListener('mousedown', function (event) {
+    if (event.button !== 0) {
+      return;
+    }
+    pressTracked = true;
+    pressX = event.clientX;
+    pressY = event.clientY;
+  });
+
+  // A drag that selects text ends in a click too, so a click counts as a key
+  // press only when the pointer stayed put, it was a single click, the selection
+  // is empty and there is no text under it.
   deck.addEventListener('click', function (event) {
+    var moved = pressTracked &&
+      (Math.abs(event.clientX - pressX) > 4 || Math.abs(event.clientY - pressY) > 4);
+    pressTracked = false;
     var node = event.target;
+    var tag;
     while (node && node !== deck) {
-      if (node.tagName === 'A' || node.tagName === 'BUTTON' || node.tagName === 'INPUT') {
+      tag = node.tagName;
+      if (tag === 'A' || tag === 'BUTTON' || tag === 'INPUT' || tag === 'SELECT' ||
+          tag === 'TEXTAREA' || tag === 'LABEL' || tag === 'SUMMARY' ||
+          node.isContentEditable) {
         return;
       }
       node = node.parentNode;
     }
+    if (event.detail > 1 || moved) {
+      return;
+    }
+    var sel = window.getSelection ? window.getSelection() : null;
+    if (sel && !sel.isCollapsed && String(sel) !== '') {
+      return;
+    }
+    if (onText(event.clientX, event.clientY)) {
+      return;
+    }
     if (event.shiftKey) {
       prev();
     } else {

package/themes/default/example/index.html

@@ -11,14 +11,20 @@
     <link rel="stylesheet" href="/_themes/<name>@<n>/fonts.css">
     <link rel="stylesheet" href="/_themes/<name>@<n>/tokens.css">
     <link rel="stylesheet" href="/_themes/<name>@<n>/deck.css">
+    <link rel="stylesheet" href="/_themes/<name>@<n>/math.css">
+    <script defer src="/_themes/<name>@<n>/math.js"></script>
     <script src="/_themes/<name>@<n>/deck.js"></script>
 
   This copy links the theme folder itself, so it previews from a local checkout
-  with `rshow preview .` from this folder, and no network.
+  with `rshow preview .` from this folder, and no network. math.css and math.js
+  are the math addon of the theme and are optional: a deck with an equation
+  links them, and math.js goes before deck.js. A $ in the prose of a slide is a
+  price, not a formula.
 
   Twelve slides, one per layout in deck.css, so every class the theme ships is
   shown here: title, statement, bullets, section, figure, chart, table,
-  two-col, code, figure-two, quote, big-number.
+  two-col, code, figure-two, quote, big-number. A thirteenth slide carries one
+  equation and shows the math addon.
 
   The numbers on the chart and the table are example data. They are round on
   purpose and the caption says so, because an example must never read as a
@@ -31,6 +37,8 @@
 <link rel="stylesheet" href="../fonts.css">
 <link rel="stylesheet" href="../tokens.css">
 <link rel="stylesheet" href="../deck.css">
+<link rel="stylesheet" href="../math.css">
+<script defer src="../math.js"></script>
 </head>
 <body>
 
@@ -294,6 +302,15 @@
     </aside>
   </section>
 
+  <section class="slide bullets">
+    <h2>A republish sends only the bytes that changed</h2>
+    <div class="math">\mathrm{sent}(n) = \sum_{f \in \mathrm{new}(n)} |f|</div>
+    <aside class="notes">
+      <p>Same folder, second publish: the sum drops every file the host already
+      holds, so what leaves the laptop is the edit and nothing else.</p>
+    </aside>
+  </section>
+
   <section class="slide big-number">
     <p class="value">5 versions, 1 link</p>
     <p class="caption">Five publishes of one folder, each at its own path, all reachable from the link the first publish printed.</p>

package/themes/default/example/report.html

@@ -12,25 +12,32 @@
     <link rel="stylesheet" href="/_themes/<name>@<n>/fonts.css">
     <link rel="stylesheet" href="/_themes/<name>@<n>/tokens.css">
     <link rel="stylesheet" href="/_themes/<name>@<n>/report.css">
+    <link rel="stylesheet" href="/_themes/<name>@<n>/math.css">
     <script src="/_themes/<name>@<n>/mode.js"></script>
+    <script defer src="/_themes/<name>@<n>/math.js"></script>
     <script defer src="/_themes/<name>@<n>/report.js"></script>
 
   This copy links the theme folder itself, so it previews from a local checkout
   and makes no remote request. mode.js runs in the head, before the body paints,
-  so a reader who chose dark never sees a white flash. report.js is deferred: it
-  numbers the sections, figures and tables, resolves the cross-references,
-  builds the contents and moves the notes into the margin. With JavaScript off
-  the document is still a readable paper, it just loses the generated labels.
+  so a reader who chose dark never sees a white flash. math.css and math.js are
+  the math addon of the theme and are optional: a report that writes LaTeX links
+  them, and the equation below is the one line that does. math.js is deferred and
+  goes before report.js. report.js is deferred: it numbers the sections, figures
+  and tables, resolves the cross-references, builds the contents and moves the
+  notes into the margin. With JavaScript off the document is still a readable
+  paper, it just loses the generated labels and the equation shows its LaTeX.
 
-  Six sections, two figures, one table, three notes, six references. The
-  authors, the affiliations, the date and the version line are placeholders:
-  fill them in when the report is real. Every number in figure 2 and in the
-  prose around it is example data and says so.
+  Six sections, two figures, one table, one equation, three notes and six
+  references. The authors, the affiliations, the date and the version line are
+  placeholders: fill them in when the report is real. Every number in figure 2
+  and in the prose around it is example data and says so.
 -->
 <link rel="stylesheet" href="../fonts.css">
 <link rel="stylesheet" href="../tokens.css">
 <link rel="stylesheet" href="../report.css">
+<link rel="stylesheet" href="../math.css">
 <script src="../mode.js"></script>
+<script defer src="../math.js"></script>
 <script defer src="../report.js"></script>
 </head>
 <body>
@@ -193,10 +200,10 @@
       <p>The cost of a publish follows the same rule. Let the files of a version
       be <code>files(n)</code> and let the host's store be the set of hashes it
       already holds. The bytes a publish must send are the size of every file
-      whose hash is missing from the store.</p>
+      <span class="math">f</span> whose hash is missing from the store.</p>
 
       <div class="equation" id="eq-bytes">
-        <span>bytes(n) = sum of |f| for f whose hash is new</span>
+        <div class="math">\mathrm{bytes}(n) = \sum_{f \in \mathrm{new}(n)} |f|</div>
       </div>
 
       <p>The equation is the whole reason a republish of a mostly unchanged deck