web: fan spin hub-centered (fill-box origin wobbled the glyph)

src/web/ui.html

@@ -350,7 +350,7 @@
   #topo .fan .fbody { fill: color-mix(in srgb, var(--fg) 5%, var(--panel)); stroke: color-mix(in srgb, var(--fg) 55%, transparent); stroke-width: 1.4; }
   #topo .fan .blade { fill: color-mix(in srgb, var(--fg) 34%, transparent); }
   #topo .fan .hub { fill: color-mix(in srgb, var(--fg) 50%, transparent); }
-  #topo .fan .blades { transform-box: fill-box; transform-origin: center; animation: spin 1.4s linear infinite; }
+  #topo .fan .blades { transform-origin: 770px 318px; animation: spin 1.4s linear infinite; }
   #topo .fan.off .blades { animation: none; opacity: .4; }
   #topo .fan.unk .blades { animation: spin 4s linear infinite; opacity: .55; }
   @keyframes spin { to { transform: rotate(1turn); } }

src/web/ui.playwright.mjs

@@ -502,6 +502,26 @@ const band = await page.evaluate(() => {
 });
 ok("topo: window fits the drawing (no letterbox bands)", band < 8, String(band));
 
+// fan glyph: the rotation must be hub-centered (fill-box origin wobbled it)
+{
+  const fanHub = await page.evaluate(() => {
+    const h = document.querySelector("#topo .fan .hub");
+    if (!h) return null;
+    const r = h.getBoundingClientRect();
+    return [r.x + r.width / 2, r.y + r.height / 2];
+  });
+  if (fanHub) {
+    await page.waitForTimeout(260);
+    const fanHub2 = await page.evaluate(() => {
+      const h = document.querySelector("#topo .fan .hub");
+      const r = h.getBoundingClientRect();
+      return [r.x + r.width / 2, r.y + r.height / 2];
+    });
+    const drift = Math.hypot(fanHub[0] - fanHub2[0], fanHub[1] - fanHub2[1]);
+    ok("topo: fan spin is hub-centered (no wobble)", drift < 2, `${drift.toFixed(2)}px drift`);
+  }
+}
+
 // the default layout ends flush at the dock: px geometry is clamped to the
 // layer, which shrinks when the dock (a sibling) becomes visible
 const flush = await page.evaluate(() => {