pageship 0.1.0 → 0.2.0

package/dist/skills/pageship-slide-deck/references/engine.md

@@ -0,0 +1,362 @@
+# Slide engine
+
+Copy the three parts below into the deck unchanged: the markup around the slides, the stylesheet after the look's stylesheet, and the script at the end of `body`.
+
+While presenting, the deck owns the arrow keys, Page Up, Page Down, Space, Home and End for the whole page. A widget inside a slide that handles one of those keys itself calls `event.preventDefault()`, and the deck then leaves that key alone.
+
+## Markup
+
+The slides go inside `main class="deck"`.
+
+```html
+<body>
+  <nav class="deck-outline" id="deck-outline" aria-label="Outline" hidden><ol></ol></nav>
+  <main class="deck">
+    <section class="slide" id="slide-1">
+      <h1>Deck title</h1>
+      <p>The main point, in the source's words.</p>
+    </section>
+    <section class="slide" id="slide-2">
+      <h2>The one idea of this slide</h2>
+      <ul>
+        <li>An item from the source</li>
+      </ul>
+    </section>
+  </main>
+  <nav class="deck-bar" aria-label="Slide controls" hidden>
+    <div class="deck-progress" aria-hidden="true"><span></span></div>
+    <span class="deck-position" aria-live="polite"></span>
+    <button type="button" data-deck="previous">Previous slide</button>
+    <button type="button" data-deck="next">Next slide</button>
+    <button type="button" data-deck="outline" aria-expanded="false" aria-controls="deck-outline">
+      Outline
+    </button>
+  </nav>
+  <script>
+    /* the engine script */
+  </script>
+</body>
+```
+
+## Stylesheet
+
+```css
+/* Slide deck engine: copy unchanged. Without script, or narrower than 900px or shorter
+   than 500px, the slides read as one scrolling page. */
+.slide {
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 2rem 1.25rem;
+  border-bottom: 1px solid var(--line);
+  font-size: 1rem;
+}
+.slide:focus {
+  outline: none;
+}
+.slide :is(h1, h2) {
+  margin: 0 0 0.6em;
+  padding: 0;
+  border: 0;
+  line-height: 1.2;
+}
+.slide h1 {
+  font-size: 2.25em;
+}
+.slide h1::after {
+  content: "";
+  display: block;
+  width: 2em;
+  height: 0.15em;
+  margin-top: 0.5em;
+  background: var(--accent-2);
+}
+.slide h2 {
+  font-size: 1.5em;
+}
+.slide h3 {
+  margin: 1em 0 0.4em;
+  font-size: 1.125em;
+}
+.slide :is(p, li) {
+  max-width: 70ch;
+}
+.slide :is(small, figcaption, .meta, table, pre) {
+  font-size: 0.875em;
+}
+.slide code {
+  font-size: inherit;
+}
+.deck-bar,
+.deck-outline[hidden] {
+  display: none;
+}
+.deck-outline {
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 1rem 1.25rem;
+}
+@media screen and (min-width: 900px) and (min-height: 500px) {
+  .deck-on body {
+    overflow: hidden;
+    background: var(--surface);
+  }
+  .deck-on .deck {
+    position: fixed;
+    inset: 0 0 3.5rem;
+    max-width: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  .deck-on .slide {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    flex-direction: column;
+    width: 1280px;
+    max-width: none;
+    height: 720px;
+    padding: 64px 80px;
+    overflow: hidden;
+    border: 0;
+    background: var(--bg);
+    font-size: 28px;
+    line-height: 1.4;
+    transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
+    visibility: hidden;
+  }
+  .deck-on .slide > * {
+    flex-shrink: 0;
+  }
+  .deck-on .slide.current {
+    visibility: visible;
+  }
+  .deck-on .deck-bar {
+    position: fixed;
+    inset: auto 0 0;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    height: 3.5rem;
+    padding: 0 1rem;
+    border-top: 1px solid var(--line);
+    background: var(--bg);
+  }
+  .deck-on .deck-bar button {
+    min-height: 2.25rem;
+    padding: 0 0.875rem;
+    border: 1px solid var(--muted);
+    border-radius: 6px;
+    background: var(--bg);
+    color: var(--fg);
+    font: inherit;
+  }
+  .deck-on .deck-bar button:hover:not(:disabled) {
+    background: var(--surface);
+  }
+  .deck-on .deck-bar button:disabled {
+    opacity: 0.5;
+  }
+  .deck-on .deck-bar [aria-expanded="true"] {
+    border-width: 2px;
+    font-weight: 600;
+  }
+  .deck-on .deck-position {
+    margin-right: auto;
+  }
+  .deck-on .deck-progress {
+    position: absolute;
+    inset: -1px 0 auto;
+    height: 4px;
+  }
+  .deck-on .deck-progress span {
+    display: block;
+    height: 100%;
+    background: var(--accent);
+  }
+  .deck-on .deck-outline {
+    position: fixed;
+    z-index: 1;
+    right: 1rem;
+    bottom: 4rem;
+    width: min(28rem, 90vw);
+    max-height: calc(100vh - 6rem);
+    overflow-y: auto;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: var(--bg);
+  }
+  .deck-on .deck-outline [aria-current="page"] {
+    font-weight: 700;
+  }
+}
+@page {
+  size: 1280px 720px;
+  margin: 0;
+}
+@media print {
+  .deck-bar,
+  .deck-outline {
+    display: none !important;
+  }
+  .deck {
+    max-width: none;
+    padding: 0;
+  }
+  .slide {
+    display: flex;
+    flex-direction: column;
+    width: 1280px;
+    max-width: none;
+    min-height: 720px;
+    margin: 0;
+    padding: 64px 80px;
+    border: 0;
+    font-size: 28px;
+    line-height: 1.4;
+    break-inside: avoid;
+  }
+  .slide + .slide {
+    break-before: page;
+  }
+}
+```
+
+## Script
+
+```js
+// Slide deck engine: copy unchanged. It needs the markup above and keeps its state in the
+// URL fragment (#slide-3), never in storage.
+(() => {
+  const root = document.documentElement;
+  const slides = [...document.querySelectorAll(".deck > .slide")];
+  const bar = document.querySelector(".deck-bar");
+  const position = bar.querySelector(".deck-position");
+  const progress = bar.querySelector(".deck-progress span");
+  const previous = bar.querySelector('[data-deck="previous"]');
+  const next = bar.querySelector('[data-deck="next"]');
+  const toggle = bar.querySelector('[data-deck="outline"]');
+  const outline = document.getElementById("deck-outline");
+  const presenting = matchMedia("screen and (min-width: 900px) and (min-height: 500px)");
+  const title = (slide) => slide.querySelector("h1, h2")?.textContent.trim() ?? slide.id;
+  let current = 0;
+
+  // The outline lists every slide with a link, built from each slide's heading.
+  const list = outline.querySelector("ol");
+  for (const slide of slides) {
+    const link = document.createElement("a");
+    link.href = `#${slide.id}`;
+    link.textContent = title(slide);
+    list.append(document.createElement("li"));
+    list.lastElementChild.append(link);
+  }
+  const links = [...list.querySelectorAll("a")];
+
+  const fromHash = () => {
+    const index = slides.findIndex((slide) => `#${slide.id}` === location.hash);
+    return index < 0 ? 0 : index;
+  };
+
+  function show(index, moveFocus) {
+    current = Math.max(0, Math.min(slides.length - 1, index));
+    const leaving = slides.find((slide) => slide.contains(document.activeElement));
+    slides.forEach((slide, i) => slide.classList.toggle("current", i === current));
+    links.forEach((link, i) =>
+      i === current
+        ? link.setAttribute("aria-current", "page")
+        : link.removeAttribute("aria-current"),
+    );
+    position.textContent = `Slide ${current + 1} of ${slides.length}: ${title(slides[current])}`;
+    progress.style.width = `${((current + 1) / slides.length) * 100}%`;
+    previous.disabled = current === 0;
+    next.disabled = current === slides.length - 1;
+    if (location.hash !== `#${slides[current].id}`) {
+      history.replaceState(null, "", `#${slides[current].id}`);
+    }
+    if (presenting.matches && (moveFocus || leaving)) slides[current].focus();
+  }
+
+  function fit() {
+    const scale = Math.min(innerWidth / 1280, (innerHeight - bar.offsetHeight) / 720);
+    root.style.setProperty("--deck-scale", String(scale));
+  }
+
+  // Reports every slide whose content outgrows its 16:9 frame, or scrolls inside a box on the
+  // slide. Split such a slide or cut its words; never shrink its text.
+  const excess = (box) =>
+    Math.max(box.scrollHeight - box.clientHeight, box.scrollWidth - box.clientWidth);
+  function checkOverflow() {
+    if (!presenting.matches) return;
+    slides.forEach((slide, i) => {
+      const boxes = [...slide.querySelectorAll("*")].filter(
+        (box) => getComputedStyle(box).overflow !== "visible",
+      );
+      const over = Math.max(excess(slide), ...boxes.map(excess));
+      if (over > 1) {
+        console.error(
+          `Slide ${i + 1} (${title(slide)}) overflows its 16:9 frame by ${over}px. Split it.`,
+        );
+      }
+    });
+  }
+
+  function setOutline(open) {
+    outline.hidden = presenting.matches && !open;
+    toggle.setAttribute("aria-expanded", String(open));
+    if (open) (links[current] ?? links[0]).focus();
+  }
+
+  function layout() {
+    fit();
+    setOutline(false);
+    show(current, false);
+  }
+
+  root.classList.add("deck-on");
+  bar.hidden = false;
+  slides.forEach((slide) => (slide.tabIndex = -1));
+  current = fromHash();
+  layout();
+  addEventListener("resize", fit);
+  presenting.addEventListener("change", () => (layout(), checkOverflow()));
+  document.fonts.ready.then(() => (fit(), checkOverflow()));
+  addEventListener("hashchange", () => {
+    show(fromHash(), true);
+    setOutline(false);
+  });
+  previous.addEventListener("click", () => show(current - 1, false));
+  next.addEventListener("click", () => show(current + 1, false));
+  toggle.addEventListener("click", () =>
+    setOutline(toggle.getAttribute("aria-expanded") !== "true"),
+  );
+
+  // The deck owns the arrow keys for the whole page while it presents. A widget inside a
+  // slide that handles a key itself calls preventDefault, and the deck leaves that key alone.
+  document.addEventListener("keydown", (event) => {
+    if (!presenting.matches || event.defaultPrevented) return;
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    if (event.key === "Escape" && toggle.getAttribute("aria-expanded") === "true") {
+      setOutline(false);
+      toggle.focus();
+      return;
+    }
+    if (event.target.closest?.("input, select, textarea, [contenteditable]")) return;
+    const onControl = event.target.closest?.("a, button, summary");
+    const step = {
+      ArrowRight: 1,
+      ArrowDown: 1,
+      PageDown: 1,
+      ArrowLeft: -1,
+      ArrowUp: -1,
+      PageUp: -1,
+      " ": onControl ? 0 : event.shiftKey ? -1 : 1,
+    }[event.key];
+    if (event.key === "Home") show(0, true);
+    else if (event.key === "End") show(slides.length - 1, true);
+    else if (step) show(current + step, true);
+    else return;
+    event.preventDefault();
+  });
+})();
+```

package/dist/skills/pageship-spec/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: pageship-spec
+description: HTML specs, as the second step of pageship-docs. For any request to write, regenerate, edit or move a spec, load pageship-docs first; load this skill first only when the user names it.
+license: MIT
+metadata:
+  version: "0.2.0"
+---
+
+# Spec
+
+A spec is a contract between the people who ask for a change and the people who build and test it. Readers hold the builders to every line, so every line is a decision the source made. Everything else is an open question. It describes behaviour, never how it is built, and names no file path or line number anywhere, its sources included.
+
+Write it by [step 4 of pageship-docs](../pageship-docs/SKILL.md#4-write-the-file). Unless `pageship-docs` loaded this skill, start as [it says](../pageship-docs/SKILL.md#starting-at-a-kind-or-pattern-skill).
+
+## Parts
+
+- **Problem.** What is wrong today and for whom, with the evidence the source gives.
+- **Solution.** What changes for the people the problem affects, as the source describes it.
+- **User stories.** One for each need the source states, as "As a _actor_, I want _behaviour_, so that _reason_." All three come from the source. When it gives no reason, end the story after the behaviour.
+- **Implementation decisions.** What the source states as agreed or decided about how the change behaves: rules, limits, timings people notice, who sees what, and the contracts between parts. Leave out storage, scheduled jobs and how often they run, and tasks such as "add a column". When such a detail serves an outcome the source states, such as "each invoice is sent once", keep that outcome.
+- **Testing decisions.** How the source says the change will be tested: what, against which data, by whom, and before which step of the rollout. Say which criteria a test covers only when the source says so.
+- **Out of scope.** What the source says the change will not do.
+- **Assumptions.** Only what the source says it takes as given.
+- **Open questions.** Every proposal, wish, disagreement or "we'll see" nobody agreed to, everything the source calls undecided, and every gap a builder would hit before they could finish. Keep who holds which view when the source says.
+
+## Acceptance criteria
+
+Write a criterion for each outcome of each decision. Open questions, out-of-scope items and testing or rollout steps, such as a replay or a staging week, get none. Use the source's numbers and words and the glossary's terms, not their definitions. Each criterion has:
+
+1. **One outcome.** One situation, one event and one result. Two outcomes are two criteria, even when the source puts them in one sentence, such as a list of things a screen shows.
+2. **A visible trigger.** The event is something a user or tester sees happen, such as a customer replying or an invoice's due date passing. A job or check running, or an alert or message being sent, happens inside the system: name where a person sees it, such as "the customer receives the email". Mark the trigger as not given, under rule 3, only when the source names no such event.
+3. **No value the source doesn't give.** It adds no window, threshold, count, place, trigger, display or state. When it can't be tested without one, mark the missing value inside the criterion, such as "within [time not given in the source]" or "shown in [place not given in the source]". In a criterion in which something does not happen, the event is the tester checking, at a moment marked the same way when the source gives none; a time from the situation, such as the target or the end of a snooze, counts only when the source says to check then. List each marked gap under open questions; a criterion refers to an open question in no other way.
+4. **A result, not the event again.** The result is what the tester observes, and the criterion would fail if the change were missing. "The invoice is cancelled" after "a user cancels an invoice" tests nothing. Name what the tester sees when the source states or directly implies it, and otherwise mark it under rule 3.
+5. **Its own words.** It spells out the situation, the event and the result, so it reads without the others. "The same way as" another criterion is not a result.
+
+Done when every decided outcome has a criterion.
+
+## Order
+
+1. **Title and summary.** An `h1` naming the change, then two or three sentences in the source's words: what will change, for whom, and the problem it solves. Add the date, author and status when the source gives them. When there are open questions, give their number as a link to them, such as "4 open questions".
+2. **Problem.**
+3. **Solution.**
+4. **User stories.** Numbered.
+5. **Acceptance criteria.** A numbered list, one criterion per item, each with an `id` such as `ac-1`.
+6. **Implementation decisions.**
+7. **Testing decisions.**
+8. **Out of scope.**
+9. **Assumptions.** Only when the source states some.
+10. **Open questions.**
+11. **Sources.** Each source by its own title, with a date only when it carries one. Call the user's request "the request".
+
+## Check
+
+- Take the criteria one at a time and test each against the five rules. Fix every criterion that breaks one.
+
+## Hand over
+
+The structure you introduced includes the user stories you phrased from the source's needs and the criteria you split. Also list the build details you left out, such as file paths and build tasks.

package/dist/skills/pageship-table/SKILL.md

@@ -0,0 +1,243 @@
+---
+name: pageship-table
+description: Later step of pageship-docs: for a request to write or edit a document, load pageship-docs first; load this skill first only when the user names it. Pattern for tables in a Pageship HTML document, loaded by a pageship- kind skill before it writes a table.
+license: MIT
+metadata:
+  version: "0.2.0"
+---
+
+# Table
+
+A table lets the reader look up and compare exact values, on a phone and on paper.
+
+Unless another pageship- skill loaded this one, start as [pageship-docs says](../pageship-docs/SKILL.md#starting-at-a-kind-or-pattern-skill).
+
+## 1. Shape the table
+
+- **Across and down.** Put the dimension with fewer values across, so the table stays narrow. Five measures for two quarters is one row per measure and one column per quarter.
+- **Width.** A table has at most four columns, the row label and text columns included. For more, put fewer across, turn a column into groups, or split it into one table per question. Only when the reader must compare more than three values in one row, give it more. Up to four columns show in full at phone width too, stacked as the markup below says when they don't fit. A wider table may scroll sideways inside its box, with its row labels and header row in view.
+- **Groups.** When rows fall into a few groups, such as regions or teams, give each group its own run of rows under a heading row, not a column that repeats the group's name.
+- **Order.** Keep the source's order. Sort the rows only when the question is a ranking, and say in the caption what they are sorted by.
+- **Values.** Copy each value as the source writes it, with the same digits, precision and unit; round and convert nothing. A unit every value in a column shares goes in the column header; otherwise it stays on each value.
+- **Kinds of number.** Give the kind as the source does: in the caption when one kind covers the table, otherwise in the row or column label.
+- **Worked-out values.** A change, total or share comes only from plain arithmetic on the source's figures, and the caption or a note under the table says which columns it was worked out from. Totals go in `<tfoot>`.
+- **Gaps.** A cell the source doesn't fill says "Not given", never a blank, a zero or a dash, and the gap joins the open questions.
+- **Rankings.** Every sentence that ranks rows, anywhere in the document (the summary, a caption, a control's hint), names the column in its header's words: a sort on breach rate puts the highest rate first, not the most breaches. When the column has a gap, the sentence says which rows it covers, such as "the slowest of the queues with a median", not "slowest in every region".
+
+## 2. Write the markup
+
+Every table takes this shape, scroll box included:
+
+```html
+<figure class="table-figure">
+  <figcaption id="q3-measures">
+    Measured figures, Q2 and Q3 2026, from the help desk export.
+  </figcaption>
+  <div class="table-scroll" role="region" tabindex="0" aria-labelledby="q3-measures">
+    <table aria-labelledby="q3-measures">
+      <thead>
+        <tr>
+          <th scope="col">Measure</th>
+          <th scope="col" class="num"><span>Q2</span></th>
+          <th scope="col" class="num"><span>Q3</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">Tickets opened</th>
+          <td class="num">4,350</td>
+          <td class="num">4,812</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</figure>
+```
+
+- The caption comes first and says what the table shows, for which period, from which source, and the kind of number.
+- Each group is its own `<tbody data-group="…">` that opens with a heading row holding one `<th scope="rowgroup" colspan="…">` with the group's name.
+- A number column's header holds its words in one element, a `<span>` or the sort button, so a long header wraps two or more words to a line.
+- Give the table and its columns no width beyond the stylesheet's, which keeps words whole and more than one to a line in text cells and number headers, while `.num` cells take their natural width: no other `min-width`, fixed width or `width: 100%`, and no `overflow-wrap` or `word-break` of your own.
+- A table of three or more columns with words in a column besides the row label stacks at phone width, unless it has sort buttons: give the `table` `class="stack"` and each `td` a `data-label` with its column header's words. Each row then shows its row label over one line per cell, the label before the value.
+- Mark at most one column or row as the one the summary talks about, with weight or a label, never with colour alone.
+
+Add this unchanged to the file's stylesheet, after the rules that set the look. Its `max-height` keeps a long table's header row in view at every width, except a stacked table on a phone, which shows in full; the file's own rules keep it too:
+
+```css
+.table-figure {
+  margin: 1.5rem 0;
+}
+.table-scroll {
+  overflow: auto;
+  max-width: 100%;
+  max-height: 70vh;
+}
+.table-scroll table {
+  width: auto;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.9375rem;
+}
+.table-scroll :is(th, td) {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+.table-scroll :is(th, td):not(.num) {
+  min-width: 8rem;
+}
+.table-scroll th.num > * {
+  display: inline-block;
+  width: max-content;
+  min-width: min-content;
+  max-width: 7rem;
+}
+.table-scroll :is(th, td) code {
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+.table-scroll thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--bg);
+  vertical-align: bottom;
+  border-bottom-width: 2px;
+}
+.table-scroll tbody th {
+  font-weight: 500;
+}
+.table-scroll th[scope="rowgroup"] {
+  font-weight: 600;
+  background: var(--surface);
+}
+.table-scroll .num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.table-scroll td.num {
+  white-space: nowrap;
+}
+.table-scroll tfoot :is(th, td) {
+  font-weight: 600;
+  border-bottom: 0;
+}
+.table-scroll :is(th, td):first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--bg);
+}
+.table-scroll thead th:first-child {
+  z-index: 3;
+}
+@media (max-width: 40rem) {
+  .table-scroll table {
+    font-size: 0.875rem;
+  }
+  .table-scroll :is(th, td) {
+    padding: 0.5rem;
+  }
+  .table-scroll:has(> table.stack) {
+    max-height: none;
+  }
+  .table-scroll table.stack,
+  .table-scroll table.stack :is(tbody, tfoot, tr, th, td) {
+    display: block;
+  }
+  .table-scroll table.stack thead {
+    display: none;
+  }
+  .table-scroll table.stack tr {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .table-scroll table.stack :is(th, td) {
+    position: static;
+    min-width: 0;
+    padding: 0.125rem 0;
+    border: 0;
+    text-align: left;
+  }
+  .table-scroll table.stack tbody th {
+    font-weight: 600;
+  }
+  .table-scroll table.stack td[data-label]::before {
+    content: attr(data-label) ": ";
+    color: var(--muted);
+  }
+}
+@media print {
+  .table-scroll {
+    overflow: visible;
+    max-height: none;
+  }
+  .table-scroll :is(th, td) {
+    position: static !important;
+  }
+  .table-scroll table {
+    font-size: 0.8125rem;
+  }
+  .table-scroll td.num {
+    white-space: normal;
+  }
+  .table-scroll tr[hidden] {
+    display: table-row !important;
+  }
+  .table-controls,
+  .table-empty {
+    display: none !important;
+  }
+}
+```
+
+### Colours
+
+The table takes [the look's colour variables](../pageship-docs/references/design.md#the-looks-colour-variables) and no other colour: `--line` for rules, `--surface` for group heading rows and `--fg` for text. A cell with a status the source gives holds it by [the design rules' statuses](../pageship-docs/references/design.md#the-looks-colour-variables), as `<span data-status="warn">At risk</span>`, and gets a dot in the status colour:
+
+```css
+.table-scroll [data-status]::before {
+  content: "";
+  display: inline-block;
+  width: 0.625rem;
+  height: 0.625rem;
+  margin-right: 0.375rem;
+  border-radius: 50%;
+  background: var(--status);
+}
+.table-scroll [data-status="good"] {
+  --status: var(--good);
+}
+.table-scroll [data-status="warn"] {
+  --status: var(--warn);
+}
+.table-scroll [data-status="bad"] {
+  --status: var(--bad);
+}
+```
+
+## 3. Add sorting and filtering only for a real question
+
+Controls answer a question the static table can't answer at a glance:
+
+- **Sorting**, when a table has more than 15 rows and the reader would rank it by more than one column. When only one ranking matters, sort the rows that way in the markup instead.
+- **Filter buttons**, when a table has more than 15 rows and a reader narrows it to one group or one value of a column, such as their region, a status or an owner: one button per value, up to six.
+- **A search box**, when a table has more than 30 rows and the reader looks up one row by name.
+
+When you add any, follow [sort and filter](references/sort-and-filter.md) exactly.
+
+## Check
+
+- At 390px wide, every table shows its row labels and its first value column without scrolling the table, no cell breaks a word, and no cell of four words or more holds one word per line.
+- In a table taller than the screen, scroll its last row into view and confirm the header row is still visible.
+- Emulate print media (in Playwright, `page.emulateMedia({ media: "print" })`) after applying a filter, and confirm every row of every table shows, with its column labels and without the filter controls.
+- Reread every sentence in the document that names a highest, lowest, slowest or most against the rankings rule.
+- Reset brings back every row in the source's order.
+
+## Hand over
+
+The structure you introduced includes row order, worked-out values, groups and controls.