@graphty/visual-review 0.1.2 → 0.1.3

package/README.md

@@ -170,8 +170,10 @@ copy the `visual` job and the gate's steps into it, keep those names, and set `w
 file.
 
 **`visual-seed.yml`** is started by hand to capture an older commit with the default branch's
-tool: `gh workflow run visual-seed.yml --ref main -f ref=<sha>`. See
-[Seeding](#seeding-one-story-at-a-time).
+tool: `gh workflow run visual-seed.yml --ref main -f ref=<sha>`. It captures every project seeded
+from the default branch; add `-f projects="web charts"` to capture only those. Each project is
+built and captured on its own, so one whose Storybook does not build at that commit fails alone.
+See [Seeding](#seeding-one-story-at-a-time).
 
 Both need nothing but the default `GITHUB_TOKEN`: the capture job reads Actions artifacts
 (`actions: read`); nothing in CI writes to the repository.
@@ -462,6 +464,14 @@ the pull request.
   wider. It is never cropped to the content, so a small component sits in the full canvas and
   every capture of a project has the same size unless its story overflows. results.json records the scale as `scale`, and each review record
   copies it into its `subject`.
+- **Why captures rasterize on the CPU.** Chromium runs with `--disable-gpu-rasterization`, so the
+  page's text and shapes are drawn by the CPU; WebGL still runs on SwiftShader. Drawn through
+  SwiftShader, a glyph that sat on a sub-pixel boundary landed on either side of it from one
+  render to the next (a quarter-pixel shift of one letter, in 1 to 7 of 48 renders of the same
+  story), so stories with nothing moving read `unstable`, a different few on each run. With the
+  switch, 48 of 48 renders matched. The repository owner chose this on 2026-09-30, knowing it
+  changes how text is drawn in every story of every project: a baseline captured before it can
+  read `changed` once, and is accepted again.
 - **From GitHub Actions to the page.** Each `visual` job uploads `results.json` and the PNGs to
   review as an artifact `visual-<project>-<attempt>`, kept 30 days. The server lists open pull
   requests with `gh`, finds each one's newest run of the capturing workflow, and downloads those

package/capture/capture.mjs

@@ -54,10 +54,17 @@ const VIEWPORT = { width: 1200, height: 900 };
 /** Device pixels per CSS pixel, as Chromatic captures; recorded in results.json as `scale`. */
 const SCALE = 2;
 const RENDER_TIMEOUT = 30_000;
-const CHROMIUM_ARGS = [
+/**
+ * Chromium's switches for every capture. `--disable-gpu-rasterization` draws the page's text and
+ * shapes on the CPU: rasterized through SwiftShader, a glyph that sits on a sub-pixel boundary
+ * landed on either side of it from one render to the next, so a story with nothing moving read
+ * `unstable` (the README, "Why captures rasterize on the CPU"). WebGL still runs on SwiftShader.
+ */
+export const CHROMIUM_ARGS = [
     "--use-gl=angle",
     "--use-angle=swiftshader",
     "--enable-unsafe-swiftshader",
+    "--disable-gpu-rasterization",
     "--force-color-profile=srgb",
     "--disable-lcd-text",
     "--font-render-hinting=none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphty/visual-review",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Self-hosted visual review of Storybook stories: capture in GitHub Actions, keep the baselines in git (Git LFS), accept or reject each change in a local page, and gate pull requests",
   "author": "Adam Powers <apowers@ato.ms>",
   "type": "module",

package/templates/visual-seed.yml

@@ -5,9 +5,11 @@
 # baselines can be seeded from it: `visual-review serve --master-run <this run's id>` lists the run
 # as the default branch, and Finish opens the seed pull request. Dispatch it from __BRANCH__:
 #   gh workflow run visual-seed.yml --ref __BRANCH__ -f ref=<sha>
-# Only the projects whose "seedFromDefaultBranch" is not false are captured. The capture job
-# repeats the "visual" job of the review workflow, except that it has no reference (every story
-# without a baseline is "new") and results.json names the captured commit.
+# Only the projects whose "seedFromDefaultBranch" is not false are captured, or, with
+# `-f projects="a b"`, only those of them named there. Each project is built and captured on its
+# own: one whose Storybook fails to build at that commit fails its own jobs and no other project's.
+# The capture job repeats the "visual" job of the review workflow, except that it has no reference
+# (every story without a baseline is "new") and results.json names the captured commit.
 
 name: Visual seed capture
 
@@ -18,6 +20,11 @@ on:
                 description: "The commit (or branch or tag) whose Storybooks are captured"
                 required: true
                 type: string
+            projects:
+                description: "The projects to capture, separated by spaces or commas (default: every one seeded from the default branch)"
+                required: false
+                type: string
+                default: ""
 
 permissions:
     contents: read
@@ -34,13 +41,23 @@ jobs:
                   sparse-checkout: visual-review.config.json
                   sparse-checkout-cone-mode: false
 
+            # A name that is not a project seeded from the default branch stops the run here, rather
+            # than seeding fewer projects than were asked for.
             - name: List the projects
               id: plan
+              env:
+                  WANT: ${{ inputs.projects }}
               run: |
-                  echo "projects=$(jq -c '(.baselines // "visual-baselines") as $b
+                  projects=$(jq -c --arg want "$WANT" '(.baselines // "visual-baselines") as $b
+                      | [$want | splits("[ ,]+") | select(. != "")] as $w
                       | [.projects | to_entries[] | select(.value.seedFromDefaultBranch != false)
-                         | {project: .key, storybook: .value.storybook, build: .value.build, baselines: $b}]' \
-                      visual-review.config.json)" >> "$GITHUB_OUTPUT"
+                         | {project: .key, storybook: .value.storybook, build: .value.build, baselines: $b}] as $all
+                      | ($w - [$all[].project]) as $unknown
+                      | if ($unknown | length) > 0
+                        then error("not a project seeded from the default branch: \($unknown | join(", "))")
+                        else [$all[] | select(($w | length) == 0 or (.project | IN($w[])))] end' \
+                      visual-review.config.json)
+                  echo "projects=$projects" >> "$GITHUB_OUTPUT"
 
     storybook:
         name: Build ${{ matrix.project }} at ${{ inputs.ref }}
@@ -71,9 +88,12 @@ jobs:
                   name: storybook-${{ matrix.project }}
                   path: ${{ matrix.storybook }}/
 
+    # Runs even when another project's build failed. A project whose own build failed has no
+    # Storybook artifact, so its job stops at the download, before installing anything.
     visual:
         name: visual (${{ matrix.project }})
         needs: [plan, storybook]
+        if: ${{ !cancelled() && needs.plan.result == 'success' }}
         runs-on: ubuntu-24.04
         timeout-minutes: 45
         strategy:
@@ -84,6 +104,12 @@ jobs:
             # The default branch's checkout: the capture tool, the config and the baselines come from here.
             - uses: actions/checkout@v4
 
+            - name: Download Storybook build
+              uses: actions/download-artifact@v4
+              with:
+                  name: storybook-${{ matrix.project }}
+                  path: ${{ matrix.storybook }}/
+
             - name: Restore this project's baseline images
               uses: actions/cache@v4
               with:
@@ -99,12 +125,6 @@ jobs:
             - name: Install Chromium
               run: __CLI__ install-browser
 
-            - name: Download Storybook build
-              uses: actions/download-artifact@v4
-              with:
-                  name: storybook-${{ matrix.project }}
-                  path: ${{ matrix.storybook }}/
-
             - name: Capture
               run: __CLI__ capture --project ${{ matrix.project }} --out "$RUNNER_TEMP/visual"
 

package/trusted/page/index.html

@@ -14,6 +14,6 @@
             <span id="status" role="status"></span>
             <button type="button" id="copy-link" title="Copy a link to this screen">Copy link</button>
         </header>
-        <main id="app"><p>Loading...</p></main>
+        <main id="app" tabindex="-1"><p>Loading...</p></main>
     </body>
 </html>

package/trusted/page/review.css

@@ -507,3 +507,7 @@ td {
     word-break: break-all;
     color: var(--accent);
 }
+
+#app:focus {
+    outline: none;
+}

package/trusted/page/review.js

@@ -1759,6 +1759,18 @@ function toggleView(view) {
     showStory();
 }
 
+// Safari on an iPad sends a hardware keyboard's keys only to a focused element, and tapping an
+// image or a button focuses nothing, so the shortcuts never arrived. The page itself holds focus
+// whenever nothing else does.
+function keepKeys() {
+    if (document.activeElement === null || document.activeElement === document.body) {
+        app.focus({ preventScroll: true });
+    }
+}
+document.addEventListener("pointerup", () => setTimeout(keepKeys));
+document.addEventListener("focusout", () => setTimeout(keepKeys));
+keepKeys();
+
 document.addEventListener("keydown", (e) => {
     if (!["story", "grid"].includes(state.screen) || e.ctrlKey || e.metaKey || e.altKey) {
         return;