pageship 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/cli.mjs +15 -5
  2. package/dist/skills/pageship/SKILL.md +1 -1
  3. package/dist/skills/pageship-chart/SKILL.md +18 -2
  4. package/dist/skills/pageship-code-block/SKILL.md +1 -1
  5. package/dist/skills/pageship-decision-record/SKILL.md +5 -1
  6. package/dist/skills/pageship-diagram/SKILL.md +16 -14
  7. package/dist/skills/pageship-diagram/references/check-diagram.js +3 -2
  8. package/dist/skills/pageship-docs/SKILL.md +32 -8
  9. package/dist/skills/pageship-docs/references/axe.js +34 -0
  10. package/dist/skills/pageship-docs/references/check.md +35 -8
  11. package/dist/skills/pageship-docs/references/design.md +38 -18
  12. package/dist/skills/pageship-docs/references/html-validate-rules.mjs +326 -0
  13. package/dist/skills/pageship-docs/references/html-validate.json +13 -0
  14. package/dist/skills/pageship-docs/references/palette.mjs +791 -0
  15. package/dist/skills/pageship-docs/references/plain-default.md +1 -1
  16. package/dist/skills/pageship-explainer/SKILL.md +13 -5
  17. package/dist/skills/pageship-interaction/SKILL.md +7 -5
  18. package/dist/skills/pageship-interaction/references/pointer.md +3 -0
  19. package/dist/skills/pageship-interaction/references/step-through.md +10 -25
  20. package/dist/skills/pageship-key-figures/SKILL.md +1 -1
  21. package/dist/skills/pageship-media/SKILL.md +2 -2
  22. package/dist/skills/pageship-motion/SKILL.md +31 -28
  23. package/dist/skills/pageship-motion/references/figure-motion.js +252 -0
  24. package/dist/skills/pageship-motion/references/figure-motion.md +294 -0
  25. package/dist/skills/pageship-plan/SKILL.md +3 -3
  26. package/dist/skills/pageship-report/SKILL.md +5 -1
  27. package/dist/skills/pageship-review-report/SKILL.md +5 -1
  28. package/dist/skills/pageship-slide-deck/SKILL.md +5 -3
  29. package/dist/skills/pageship-slide-deck/references/engine.md +1 -1
  30. package/dist/skills/pageship-spec/SKILL.md +5 -1
  31. package/dist/skills/pageship-table/SKILL.md +5 -3
  32. package/package.json +1 -1
@@ -0,0 +1,294 @@
1
+ # Playing a figure
2
+
3
+ [figure-motion.js](figure-motion.js) plays a figure once when it scrolls into view and gives the reader the controls, by [the playback rules](../SKILL.md#2-build-it-so-the-still-page-tells-the-whole-story). Use it as it is, adapt it, or write your own script that keeps the rules. It is one timeline, the playback controls, the start in view, reduced motion, and two helpers for SVG paths.
4
+
5
+ ## How it works
6
+
7
+ - Copy the whole file into a `<script>` at the end of `<body>`, once. After it, call `animateFigure(figure, { kind, steps, frame })` for each figure, where `figure` is its `<figure>` element.
8
+ - **The markup holds the end state.** The script shows it until the figure scrolls into view, then calls `frame` for its initial state and plays. A figure already in view plays at once. Under reduced motion it stays on the end state until the reader presses a control.
9
+ - **`steps`** is a list of `{ duration, hold }` in milliseconds: the motion of each step, then a pause on its end state. A chart has one step. A sequence has one per step of its list.
10
+ - **`frame(step, t)`** draws the figure at a step index and an eased time `t` from 0 to 1 within it. `frame(0, 0)` is the initial state; `frame(last, 1)` is the end state and must draw exactly what the markup holds. Set only `transform`, `opacity` and SVG attributes.
11
+ - **`kind`** is `"chart"`, the default, which adds Replay and Loop, or `"sequence"`, which adds Play/Pause, Back, Next, Replay and Loop, a position line with `aria-live="polite"`, and marks the current step: every element in the figure with `data-step` takes `is-current` on its step and `is-later` after it, and a list item also `aria-current="step"`. The buttons and the position line go before the `<figcaption>`, so a reader without script never sees them.
12
+ - **Loop** is a toggle with `aria-pressed`. On, playback starts again at the end; off, it stops on the end state.
13
+ - **`alongPath(path, t)`** returns the point a fraction `t` along an SVG path, and **`drawPath(path, t)`** draws a path up to `t`, leaving it as the markup draws it at 1. A path with its own dash pattern, such as a target line, takes `drawPath` only through an undashed copy.
14
+ - The call returns a controller, also stored on `figure.motion`: `play`, `pause`, `replay`, `back`, `next`, `finish` and `seek(step, t)`, which shows any state for a check.
15
+
16
+ ## Style
17
+
18
+ Add this to the document's `<style>`.
19
+
20
+ ```css
21
+ .motion-controls {
22
+ display: flex;
23
+ flex-wrap: wrap;
24
+ gap: 0.5rem;
25
+ margin: 0.75rem 0;
26
+ }
27
+ .motion-controls button {
28
+ font: inherit;
29
+ min-height: 44px;
30
+ padding: 0.25rem 0.875rem;
31
+ color: var(--fg);
32
+ background: var(--surface);
33
+ border: 1px solid var(--muted);
34
+ border-radius: 6px;
35
+ }
36
+ .motion-controls button:hover {
37
+ border-color: var(--fg);
38
+ }
39
+ .motion-controls button[aria-pressed="true"] {
40
+ font-weight: 600;
41
+ border-color: var(--accent);
42
+ box-shadow: inset 0 0 0 1px var(--accent);
43
+ }
44
+ .motion-status {
45
+ margin: 0.25rem 0 0.75rem;
46
+ }
47
+ .sequence .is-later {
48
+ opacity: 0.25;
49
+ }
50
+ .sequence .is-current rect,
51
+ .sequence .edge.is-current {
52
+ stroke: var(--accent);
53
+ stroke-width: 3;
54
+ }
55
+ .sequence li.is-current {
56
+ font-weight: 600;
57
+ border-left: 3px solid var(--accent);
58
+ padding-left: 0.5rem;
59
+ }
60
+ .sequence .marker {
61
+ fill: var(--accent);
62
+ }
63
+ @media (prefers-reduced-motion: no-preference) {
64
+ .sequence [data-step] {
65
+ transition: opacity 0.2s;
66
+ }
67
+ }
68
+ @media print {
69
+ .motion-controls,
70
+ .motion-status {
71
+ display: none;
72
+ }
73
+ .sequence .is-later {
74
+ opacity: 1;
75
+ }
76
+ }
77
+ ```
78
+
79
+ ## A chart whose bars grow
80
+
81
+ The markup is the finished chart, as `pageship-chart` draws it, with every bar at its value.
82
+
83
+ ```html
84
+ <figure class="chart" id="deploys">
85
+ <div class="scroll">
86
+ <svg
87
+ width="400"
88
+ height="240"
89
+ viewBox="0 0 400 240"
90
+ role="img"
91
+ aria-labelledby="deploys-t deploys-d"
92
+ >
93
+ <title id="deploys-t">Deploys in March by team</title>
94
+ <desc id="deploys-d">Payments 48, search 31, mobile 22, other 9.</desc>
95
+ <!-- gridlines, axes and tick labels -->
96
+ <line class="axis" x1="60" y1="200" x2="380" y2="200" />
97
+ <g class="series" data-series="Deploys">
98
+ <rect x="80" y="40" width="48" height="160">
99
+ <title>Payments, March: 48 deploys</title>
100
+ </rect>
101
+ <text class="value" x="104" y="32" text-anchor="middle">48</text>
102
+ <rect x="160" y="97" width="48" height="103"><title>Search, March: 31 deploys</title></rect>
103
+ <text class="value" x="184" y="89" text-anchor="middle">31</text>
104
+ <rect x="240" y="127" width="48" height="73"><title>Mobile, March: 22 deploys</title></rect>
105
+ <text class="value" x="264" y="119" text-anchor="middle">22</text>
106
+ <rect x="320" y="170" width="48" height="30"><title>Other, March: 9 deploys</title></rect>
107
+ <text class="value" x="344" y="162" text-anchor="middle">9</text>
108
+ </g>
109
+ </svg>
110
+ </div>
111
+ <figcaption>
112
+ Deploys to production in March 2025, a count per team. Source: release log.
113
+ </figcaption>
114
+ </figure>
115
+ ```
116
+
117
+ The script reads each bar's final size from the markup, then draws it at a fraction `t` of that size from the baseline, and fades the printed values in with it.
118
+
119
+ ```html
120
+ <script>
121
+ const deploys = document.querySelector("#deploys");
122
+ const bars = [...deploys.querySelectorAll("rect")].map((rect) => ({
123
+ rect,
124
+ y: Number(rect.getAttribute("y")),
125
+ height: Number(rect.getAttribute("height")),
126
+ }));
127
+ const values = deploys.querySelectorAll(".value");
128
+ animateFigure(deploys, {
129
+ steps: [{ duration: 800 }],
130
+ frame(step, t) {
131
+ for (const { rect, y, height } of bars) {
132
+ rect.setAttribute("height", height * t);
133
+ rect.setAttribute("y", y + height * (1 - t));
134
+ }
135
+ for (const value of values) value.setAttribute("opacity", t);
136
+ },
137
+ });
138
+ </script>
139
+ ```
140
+
141
+ Horizontal bars grow from the left axis the same way, with `width` in place of `height` and `y`. A share bar's parts, a histogram's bins and a dot plot's marks take the same frame, with each mark's final size or opacity scaled by `t`.
142
+
143
+ ## A chart whose line draws
144
+
145
+ ```html
146
+ <figure class="chart" id="trend">
147
+ <div class="scroll">
148
+ <svg
149
+ width="400"
150
+ height="240"
151
+ viewBox="0 0 400 240"
152
+ role="img"
153
+ aria-labelledby="trend-t trend-d"
154
+ >
155
+ <title id="trend-t">Open tickets by week</title>
156
+ <desc id="trend-d">Week 1 120, week 2 160, week 3 144, week 4 208, week 5 224.</desc>
157
+ <!-- gridlines, axes, tick labels and printed values -->
158
+ <g class="series" data-series="Open tickets">
159
+ <path class="line" d="M 60 160 L 140 120 L 220 136 L 300 72 L 380 56" />
160
+ <circle cx="60" cy="160" r="4"><title>Open tickets, week 1: 120</title></circle>
161
+ <circle cx="140" cy="120" r="4"><title>Open tickets, week 2: 160</title></circle>
162
+ <circle cx="220" cy="136" r="4"><title>Open tickets, week 3: 144</title></circle>
163
+ <circle cx="300" cy="72" r="4"><title>Open tickets, week 4: 208</title></circle>
164
+ <circle cx="380" cy="56" r="4"><title>Open tickets, week 5: 224</title></circle>
165
+ <text class="label" x="376" y="44" text-anchor="end">Open tickets</text>
166
+ </g>
167
+ </svg>
168
+ </div>
169
+ <figcaption>
170
+ Open tickets at the end of each week, weeks 1 to 5. Source: help desk export.
171
+ </figcaption>
172
+ </figure>
173
+ ```
174
+
175
+ The line draws from left to right, each point appears as the line reaches it, and the direct label appears at the end.
176
+
177
+ ```html
178
+ <script>
179
+ const trend = document.querySelector("#trend");
180
+ const line = trend.querySelector(".line");
181
+ const points = trend.querySelectorAll("circle");
182
+ const label = trend.querySelector(".label");
183
+ animateFigure(trend, {
184
+ steps: [{ duration: 1200 }],
185
+ frame(step, t) {
186
+ drawPath(line, t);
187
+ const reached = alongPath(line, t).x;
188
+ for (const point of points) {
189
+ point.setAttribute("opacity", Number(point.getAttribute("cx")) <= reached + 1 ? 1 : 0);
190
+ }
191
+ label.setAttribute("opacity", t < 1 ? 0 : 1);
192
+ },
193
+ });
194
+ </script>
195
+ ```
196
+
197
+ A scatter plot's dots appear in order of their `cx` the same way, by comparing each with `t` times the axis length instead of the line's point. A diagram with no step order builds in with the same two moves: each node's `opacity` rises over the first half of the step, then `drawPath` draws each connector over the second half.
198
+
199
+ ## A sequence with a marker along a path
200
+
201
+ The figure is a diagram by `pageship-diagram`, with the class `sequence`, where each node and connector carries the `data-step` that brings it in, and an ordered list of the steps with their values. The marker sits at its last position in the markup.
202
+
203
+ ```html
204
+ <figure class="diagram sequence" id="path">
205
+ <div class="scroll" tabindex="0" role="region" aria-label="Ticket path diagram">
206
+ <svg
207
+ role="img"
208
+ aria-labelledby="path-title path-desc"
209
+ width="304"
210
+ height="272"
211
+ viewBox="0 0 304 272"
212
+ >
213
+ <title id="path-title">Path of a refund ticket</title>
214
+ <desc id="path-desc">
215
+ A ticket arrives in triage, is tagged billing, and the billing team refunds the order.
216
+ </desc>
217
+ <defs>
218
+ <marker
219
+ id="path-arrow"
220
+ viewBox="0 0 10 10"
221
+ refX="10"
222
+ refY="5"
223
+ markerUnits="userSpaceOnUse"
224
+ markerWidth="12"
225
+ markerHeight="12"
226
+ orient="auto-start-reverse"
227
+ >
228
+ <path d="M0 0 L10 5 L0 10 Z" />
229
+ </marker>
230
+ </defs>
231
+ <path
232
+ class="edge"
233
+ data-step="2"
234
+ data-from="path-triage"
235
+ data-to="path-billing"
236
+ d="M 152 64 V 112"
237
+ marker-end="url(#path-arrow)"
238
+ />
239
+ <path
240
+ class="edge"
241
+ data-step="3"
242
+ data-from="path-billing"
243
+ data-to="path-refund"
244
+ d="M 152 160 V 208"
245
+ marker-end="url(#path-arrow)"
246
+ />
247
+ <g class="node" data-step="1" id="path-triage">
248
+ <rect x="80" y="16" width="144" height="48" rx="6" />
249
+ <text x="152" y="40">Triage queue</text>
250
+ </g>
251
+ <g class="node" data-step="2" id="path-billing">
252
+ <rect x="80" y="112" width="144" height="48" rx="6" />
253
+ <text x="152" y="136">Billing queue</text>
254
+ </g>
255
+ <g class="node" data-step="3" id="path-refund">
256
+ <rect x="80" y="208" width="144" height="48" rx="6" />
257
+ <text x="152" y="232">Refund</text>
258
+ </g>
259
+ <circle class="marker" r="7" transform="translate(152 208)" />
260
+ </svg>
261
+ </div>
262
+ <ol class="steps">
263
+ <li data-step="1"><strong>Triage</strong>: the ticket arrives in the triage queue.</li>
264
+ <li data-step="2"><strong>Billing queue</strong>: triage tags it billing and hands it on.</li>
265
+ <li data-step="3">
266
+ <strong>Refund</strong>: the billing team refunds the order, 2 days later.
267
+ </li>
268
+ </ol>
269
+ <figcaption>
270
+ Every refund ticket passes through triage before the billing team sees it.
271
+ </figcaption>
272
+ </figure>
273
+ ```
274
+
275
+ Each step after the first moves the marker along its connector. The first step holds the marker at the start, so the reader sees where the path begins.
276
+
277
+ ```html
278
+ <script>
279
+ const path = document.querySelector("#path");
280
+ const marker = path.querySelector(".marker");
281
+ const edges = [null, ...path.querySelectorAll(".edge")];
282
+ const start = alongPath(edges[1], 0);
283
+ animateFigure(path, {
284
+ kind: "sequence",
285
+ steps: [{ hold: 800 }, { duration: 900, hold: 600 }, { duration: 900, hold: 600 }],
286
+ frame(step, t) {
287
+ const { x, y } = step === 0 ? start : alongPath(edges[step], t);
288
+ marker.setAttribute("transform", `translate(${x} ${y})`);
289
+ },
290
+ });
291
+ </script>
292
+ ```
293
+
294
+ A sequence without a marker, such as stages lighting up in order, needs no frame of its own: pass `frame() {}` and let the `is-current` and `is-later` marks carry it.
@@ -3,7 +3,7 @@ name: pageship-plan
3
3
  description: HTML plans, as the second step of pageship-docs. For any request to write, regenerate, edit or move a plan, load pageship-docs first; load this skill first only when the user names it.
4
4
  license: MIT
5
5
  metadata:
6
- version: "0.3.0"
6
+ version: "0.4.0"
7
7
  ---
8
8
 
9
9
  # Plan
@@ -43,12 +43,12 @@ Each item keeps its strength:
43
43
 
44
44
  1. **Title and goal.** An `h1` naming the plan, then the goal and the main decisions in the source's words, with the date and author when the source gives them.
45
45
  2. **Decisions.**
46
- 3. **Steps.** An ordered list, or a table when most steps share fields such as owner, date and dependency. Each step shows its owner, date and dependency as visible text, only where the source gives them. When the dependencies branch or join, you may add a diagram of them beside the list, never instead of it.
46
+ 3. **Steps.** An ordered list, or a table when most steps share fields such as owner, date and dependency. Each step shows its owner, date and dependency as visible text, only where the source gives them. When the dependencies branch or join, add a diagram of them beside the list.
47
47
  4. **Assumptions.**
48
48
  5. **Open questions.**
49
49
  6. **Out of scope.**
50
50
 
51
- Every visual element shows a fact the source gives. A timeline or Gantt chart needs a source date for every item it places, a progress bar or percentage the source's figure, and a status badge, colour or icon the source's status for that item. The same holds for priorities, effort estimates, risk ratings and summary dashboards. Without those facts, the plan is plain lists and tables.
51
+ Every visual element shows a fact the source gives. A timeline or Gantt chart needs a source date for every item it places, a progress bar or percentage the source's figure, and a status badge, colour or icon the source's status for that item. The same holds for priorities, effort estimates, risk ratings and summary dashboards. When the source gives every step a calendar date, a timeline beside the steps is a candidate figure, and so are key figures for a number the source gives for the goal. Where a fact is missing, the item shows in the list or table without it.
52
52
 
53
53
  ## Check
54
54
 
@@ -3,7 +3,7 @@ name: pageship-report
3
3
  description: HTML reports, as the second step of pageship-docs. For any request to write, regenerate, edit or move a report, load pageship-docs first; load this skill first only when the user names it.
4
4
  license: MIT
5
5
  metadata:
6
- version: "0.3.0"
6
+ version: "0.4.0"
7
7
  ---
8
8
 
9
9
  # Report
@@ -19,6 +19,10 @@ Write it by [step 4 of pageship-docs](../pageship-docs/SKILL.md#4-write-the-file
19
19
  - **Recommendation.** What the source says to do, with any owner and date it gives.
20
20
  - **Uncertainty.** What limits confidence: missing data, small samples, unverified claims, disagreements between sources. Every gap becomes an open question here.
21
21
 
22
+ ## Figures
23
+
24
+ In a report, the observations carry most figures, and key figures hold the few numbers the summary rests on. An interpretation of a trend or comparison points to the figure that shows it.
25
+
22
26
  ## Order
23
27
 
24
28
  1. **Title and summary.** An `h1` naming the subject, then the main finding and the main recommendation in the source's words, with the date and author when the source gives them.
@@ -3,7 +3,7 @@ name: pageship-review-report
3
3
  description: HTML review reports, as the second step of pageship-docs. For any request to review a change or a plan and write up the findings, or to write, regenerate, edit or move a review report, load pageship-docs first; load this skill first only when the user names it.
4
4
  license: MIT
5
5
  metadata:
6
- version: "0.3.0"
6
+ version: "0.4.0"
7
7
  ---
8
8
 
9
9
  # Review report
@@ -71,6 +71,10 @@ When the project defines its own severity scale or verdict words, use them: map
71
71
 
72
72
  Then list what would change the verdict: the fixes that would raise it, and the findings not verified and parts not reviewed that could lower or raise it once checked.
73
73
 
74
+ ## Figures
75
+
76
+ In a review report, a finding whose evidence is a path, such as a call that skips a check, is a candidate for a diagram of that path beside its quoted lines. The scope lists are a table of each part and how it was checked, or why not.
77
+
74
78
  ## Order
75
79
 
76
80
  1. **Title and summary.** An `h1` naming what was reviewed, with its version, commit or date when the source gives one. Then the verdict in one sentence, the number of findings at each severity, the most severe finding, and who reviewed it: you, or the reviewer the source names.
@@ -3,7 +3,7 @@ name: pageship-slide-deck
3
3
  description: HTML slide decks, as the second step of pageship-docs. For any request to make slides or a presentation, or to regenerate, edit or move a deck, load pageship-docs first; load this skill first only when the user names it.
4
4
  license: MIT
5
5
  metadata:
6
- version: "0.3.0"
6
+ version: "0.4.0"
7
7
  ---
8
8
 
9
9
  # Slide deck
@@ -42,10 +42,12 @@ Load `pageship-interaction` before writing: its rules cover the engine's control
42
42
 
43
43
  ## Check
44
44
 
45
- - At 1280 by 800 and at 1920 by 1080, step through every slide with the arrow keys and read the console: the engine logs an error for each slide whose content overflows its frame. Split that slide, or cut words that are yours, not the source's. Keep the engine's type sizes.
45
+ Run the browser steps with [the check's browser tool](../pageship-docs/references/check.md#checks-in-a-browser).
46
+
47
+ - At 1280 by 800 and at 1920 by 1080, step through every slide with the arrow keys and read the console: the engine logs an error for each slide whose content overflows its frame. Split that slide, or cut words that are yours, not the source's. Keep the engine's type sizes. `html_preview` opens 1280 by 800 only: pass `width: 1280`.
46
48
  - Open the link to one slide, such as `#slide-3`, and confirm the deck opens on it.
47
49
  - At 390px wide, every slide shows on one scrolling page.
48
- - Print to PDF with the page size the stylesheet sets (in Playwright, `page.pdf({ preferCSSPageSize: true })`) and confirm one 16:9 page per slide.
50
+ - In print, each slide takes one page. In agent-browser, open the file itself, not the print copy, save a PDF with `pdf <path>` and confirm it has one page per slide. In `html_preview`, confirm the print copy's screenshot shows every slide whole, one under another.
49
51
  - Without a browser, read every slide against its budget.
50
52
 
51
53
  ## Hand over
@@ -181,7 +181,7 @@ The slides go inside `main class="deck"`.
181
181
  right: 1rem;
182
182
  bottom: 4rem;
183
183
  width: min(28rem, 90vw);
184
- max-height: calc(100vh - 6rem);
184
+ max-height: calc(100% - 6rem);
185
185
  overflow-y: auto;
186
186
  border: 1px solid var(--line);
187
187
  border-radius: 6px;
@@ -3,7 +3,7 @@ name: pageship-spec
3
3
  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.
4
4
  license: MIT
5
5
  metadata:
6
- version: "0.3.0"
6
+ version: "0.4.0"
7
7
  ---
8
8
 
9
9
  # Spec
@@ -23,6 +23,10 @@ Write it by [step 4 of pageship-docs](../pageship-docs/SKILL.md#4-write-the-file
23
23
  - **Assumptions.** Only what the source says it takes as given.
24
24
  - **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.
25
25
 
26
+ ## Figures
27
+
28
+ In a spec, the problem's evidence and the implementation decisions carry most figures, such as a table for a rule that depends on several conditions or for who sees what, and a diagram for states and the moves between them.
29
+
26
30
  ## Acceptance criteria
27
31
 
28
32
  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:
@@ -3,7 +3,7 @@ name: pageship-table
3
3
  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.
4
4
  license: MIT
5
5
  metadata:
6
- version: "0.3.0"
6
+ version: "0.4.0"
7
7
  ---
8
8
 
9
9
  # Table
@@ -70,7 +70,7 @@ Add this unchanged to the file's stylesheet, after the rules that set the look.
70
70
  .table-scroll {
71
71
  overflow: auto;
72
72
  max-width: 100%;
73
- max-height: 70vh;
73
+ max-height: 36rem;
74
74
  }
75
75
  .table-scroll table {
76
76
  width: auto;
@@ -232,9 +232,11 @@ When you add any, follow [sort and filter](references/sort-and-filter.md) exactl
232
232
 
233
233
  ## Check
234
234
 
235
+ Run the browser steps with [the check's browser tool](../pageship-docs/references/check.md#checks-in-a-browser).
236
+
235
237
  - 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.
236
238
  - In a table taller than the screen, scroll its last row into view and confirm the header row is still visible.
237
- - 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.
239
+ - In print, after applying a filter, confirm every row of every table shows, with its column labels and without the filter controls.
238
240
  - Reread every sentence in the document that names a highest, lowest, slowest or most against the rankings rule.
239
241
  - Reset brings back every row in the source's order.
240
242
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pageship",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Pageship CLI for checking server API compatibility.",
5
5
  "license": "UNLICENSED",
6
6
  "repository": {