Act on the site and repo review in discussion #28

[Yoosseph]

Works through the review in #28, in the order it was written. Thanks to @Drimdave for it.

three.js out of the entry chunk. stage-tools.tsx, use-explorer.ts and explorer-state.ts imported airflow helpers from lib/airflow.ts, which imports three at the top, so the whole engine shipped in the first download. airflowLevels, hasAirflow, AirflowMode and airflowShown now live in a three-free lib/airflow-policy.ts, and airflow.ts re-exports them so the builders don't change. Entry chunk: 1,208 KB / 340 KB gzipped → 623 KB / 192 KB gzipped, and three now loads with stage-runtime. A new npm run size step in CI fails if three.js shows up in the entry chunk again or the chunk grows past 220 KB. I checked that it fails when the old import is put back.

Phone header. Below 900px the header's outer columns now size to their contents, so the "Created by Yoseph" pill can't cover "Toggle systems" any more. Under 400px it shortens to "Yoseph". I measured it at 320, 375, 414, 600, 620, 680, 768 and 900px, and there's no overlap at any of them.

Touch. A mouse still opens on left-click and inspects on right-click. A tap now selects the part and shows its card, and the card's Take apart button opens it. Where the card doesn't cover the part (a tablet's side panel), tapping the selected part again also opens it. The rule lives in lib/pointer-intent.ts.

Deep links. The address now records the place being shown:

• ?scale= for the scale
• &part= for the part being described, plus &n= when it's one of several identical parts
• &open= for how far apart the hardware is

Opening a link lands on that place. A scale change is a history step, so the back button climbs back out. Selecting a part or moving the slider replaces the current history entry instead, and the slider is only written once it stops moving. The page title and the canonical link follow the place. Links that make no sense fall back to the nearest place that does: an unknown scale opens the home page, and a part on the wrong scale opens that scale without it. public/sitemap.xml now lists every scale and part (446 addresses), built from the catalogue by scripts/generate-sitemap.mjs, and a test fails if the committed sitemap falls behind.

First visit. A one-time line under the heading says what clicking does: "Click a part to open it, right-click to inspect it, or press Auto." On touch screens it says "Tap a part to see what it is and take it apart, or press Auto." It goes away as soon as the visitor picks a part, moves the slider, changes scale or closes it, and it only appears once per browser.

Inventory labels. At 100%, the laid-out parts carry their names. Bigger parts are named first, each part is named once, and names never overlap or run off the stage. Clicking or tapping a name describes that part. Rendered and checked on the tower at desktop size.

Also fixed: "Loading components for you…" no longer draws on top of the WebGL error card.

Checks

• npm run check, npm run lint
• npm test: 94 passing (84 before, plus 10 in tests/discovery.test.ts)
• npm run build, npm run size
• the same steps from a clean clone with npm ci
• headless Chromium, with WebGL and without:
  • deep links, back and forward
  • a desktop click still dives, and back returns
  • a tap on the phone layout opens the card instead of diving
  • inventory names on the tower
  • header layout across the widths above

Not verified

• I couldn't test on a real iPhone. The touch change no longer relies on contextmenu, but someone should try it on a device.
• The address now changes as people move around. I haven't checked whether Vercel Analytics counts these as page views, or how it treats query strings.

Closes the actionable points in #28.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
pc-anatomy	Ready	Preview	Oct 13, 2026 2:21pm UTC

[Yoosseph]

Test on live phone has been done.

[Drimdave]

Awesome!