@celestia-island/hikari 0.43.14 → 0.43.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.14",
+  "version": "0.43.16",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAuthMethodList.test.tsx

@@ -89,6 +89,35 @@ describe("HkAuthMethodList", () => {
     expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("63px");
   });
 
+  it("publishes a width in the column's own units inside a scaled root", async () => {
+    // The labels are measured where they are DRAWN while the custom property
+    // is a CSS length the column is laid out with: in a scaled or zoomed root
+    // the published column would come out that many times too wide.
+    const c = mount(h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })));
+    await nextTick();
+    const wrapper = c.querySelector<HTMLElement>(".s-auth-methods-list")!;
+    const spans = [...wrapper.querySelectorAll<HTMLElement>(".s-auth-methods-label")];
+    // The scale has to come from a LABEL: the list is `display: contents` and
+    // generates no box at all (Blink reports offsetWidth 0 and a 0x0 rect), so
+    // stubbing a box on the list would only ever be green by accident.
+    for (const [i, drawn] of [58, 61.4].entries()) {
+      Object.defineProperty(spans[i]!, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({ left: 0, top: 0, right: drawn * 2, bottom: 40, width: drawn * 2, height: 40, x: 0, y: 0 }) as DOMRect,
+      });
+      // Laid out at half: the label is drawn twice the size it is laid out at.
+      Object.defineProperty(spans[i]!, "offsetWidth", { configurable: true, get: () => drawn });
+      Object.defineProperty(spans[i]!, "offsetHeight", { configurable: true, get: () => 20 });
+    }
+    const instance = (wrapper as unknown as { __vueParentComponent?: { exposed?: Record<string, unknown> } })
+      .__vueParentComponent?.exposed;
+    (instance!.measure as () => void)();
+    // 122.8 drawn are 61.4 of the column's own: ceil 62, plus the 1px headroom.
+    // Reading the scale off the LIST instead — the shape this shipped with —
+    // yields 1 for a `display: contents` element and publishes the drawn 124px.
+    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("63px");
+  });
+
   it("leaves the column fallback intact when no text metrics are available", async () => {
     const c = mount(h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })));
     await nextTick();

package/src/components/HkAuthMethodList.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import HkButton from "./HkButton";
+import { drawnScale } from "../composables/layoutGeometry";
 import "./HkAuthMethodList.scss";
 
 /**
@@ -81,10 +82,25 @@ export default defineComponent({
       const root = listRef.value;
       if (!root) return;
       let widest = 0;
+      // The labels are measured where they are DRAWN, and the width is
+      // published as a CSS length the column is laid out with: in a scaled or
+      // zoomed root the two differ by the scale of the space, so the column
+      // would come out that many times too wide (see `layoutGeometry`).
+      //
+      // The scale is read from the LABEL — the element the box was measured
+      // on. Reading it from the list itself cannot work: the list is
+      // `display: contents`, so it generates no box at all (measured in Blink:
+      // `offsetWidth` 0, a 0x0 rect, computed width `auto`), and every reader
+      // of a box reports nothing to divide by.
       for (const label of root.querySelectorAll<HTMLElement>(".s-auth-methods-label")) {
         const previous = label.style.width;
         label.style.width = "max-content";
-        widest = Math.max(widest, label.getBoundingClientRect().width);
+        const drawn = label.getBoundingClientRect().width;
+        const scale = drawnScale(label);
+        const factor = Number.isFinite(scale.x) && scale.x > 0 ? scale.x : 1;
+        // `offsetWidth` is the laid-out fallback — already in the units the
+        // published length is used in, so it needs no division.
+        widest = Math.max(widest, factor > 0 ? drawn / factor : label.offsetWidth);
         label.style.width = previous;
       }
       // Guard: only publish when real text metrics were observed, so a

package/src/components/HkBoard.scale.test.ts

@@ -0,0 +1,136 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+
+import HkBoard from "./HkBoard";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+const restores: Array<() => void> = [];
+
+afterEach(() => {
+  for (const restore of restores.splice(0)) restore();
+  for (const m of mounts.splice(0)) {
+    m.app.unmount();
+    m.container.remove();
+  }
+});
+
+/** The board's camera lives in the board's OWN pixels: the world transform is
+ *  written in them. */
+function worldTransform(container: HTMLElement): { x: number; y: number; k: number } {
+  const world = container.querySelector<HTMLElement>(".hk-board-world")!;
+  const m = /translate\((-?[\d.]+)px,\s*(-?[\d.]+)px\)\s*scale\(([\d.]+)\)/.exec(
+    world.style.transform,
+  );
+  if (!m) throw new Error(`unexpected world transform: ${world.style.transform}`);
+  return { x: parseFloat(m[1]), y: parseFloat(m[2]), k: parseFloat(m[3]) };
+}
+
+function pointer(type: string, id: number, x: number, y: number): PointerEvent {
+  return new PointerEvent(type, { bubbles: true, pointerId: id, pointerType: "touch", clientX: x, clientY: y });
+}
+
+async function mountBoard() {
+  // The board reads its viewport size at mount (clientWidth/Height, i.e. the
+  // layout box): pin it on the prototype for the duration so the camera's
+  // clamp has a real viewport to work with, the way a laid-out page would.
+  const proto = HTMLElement.prototype as unknown as {
+    clientWidth: number;
+    clientHeight: number;
+  };
+  const beforeW = Object.getOwnPropertyDescriptor(proto, "clientWidth");
+  const beforeH = Object.getOwnPropertyDescriptor(proto, "clientHeight");
+  Object.defineProperty(proto, "clientWidth", {
+    configurable: true,
+    get(this: HTMLElement) {
+      return this.classList?.contains("hk-board") ? 800 : 0;
+    },
+  });
+  Object.defineProperty(proto, "clientHeight", {
+    configurable: true,
+    get(this: HTMLElement) {
+      return this.classList?.contains("hk-board") ? 600 : 0;
+    },
+  });
+  restores.push(() => {
+    if (beforeW) Object.defineProperty(proto, "clientWidth", beforeW);
+    else delete (proto as { clientWidth?: number }).clientWidth;
+    if (beforeH) Object.defineProperty(proto, "clientHeight", beforeH);
+    else delete (proto as { clientHeight?: number }).clientHeight;
+  });
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp(
+    defineComponent({
+      setup: () => () =>
+        h(HkBoard, {
+          // Content far larger than the viewport, so the camera's clamp lets
+          // it pan instead of re-centring a board that already fits.
+          nodes: [
+            { id: "a", x: 0, y: 0, w: 200, h: 120, label: "A" },
+            { id: "b", x: 3000, y: 3000, w: 200, h: 120, label: "B" },
+          ],
+          fitOnMount: false,
+          // No tween: the assertions read the camera right after the event.
+          animated: false,
+          grid: false,
+          minimap: false,
+        }),
+    }),
+  );
+  app.mount(container);
+  mounts.push({ app, container });
+  await nextTick();
+  const viewport = container.querySelector<HTMLElement>(".hk-board")!;
+  // The board is drawn twice the size it is laid out at, and its own box
+  // reports the layout size — the shape a scaled or zoomed root produces.
+  Object.defineProperty(viewport, "getBoundingClientRect", {
+    configurable: true,
+    value: () => ({ left: 0, top: 0, right: 1600, bottom: 1200, width: 1600, height: 1200, x: 0, y: 0 }) as DOMRect,
+  });
+  Object.defineProperty(viewport, "offsetWidth", { configurable: true, get: () => 800 });
+  Object.defineProperty(viewport, "offsetHeight", { configurable: true, get: () => 600 });
+  Object.defineProperty(viewport, "clientWidth", { configurable: true, get: () => 800 });
+  Object.defineProperty(viewport, "clientHeight", { configurable: true, get: () => 600 });
+  // happy-dom has no pointer capture: the board captures every finger, and a
+  // throw there would end the gesture before it starts.
+  Object.defineProperty(viewport, "setPointerCapture", { configurable: true, value: () => {} });
+  Object.defineProperty(viewport, "releasePointerCapture", { configurable: true, value: () => {} });
+  Object.defineProperty(viewport, "hasPointerCapture", { configurable: true, value: () => true });
+  return { container, viewport };
+}
+
+describe("HkBoard scaled-space gestures", () => {
+  it("pans by the finger's own distance inside a scaled root", async () => {
+    const { container, viewport } = await mountBoard();
+    const before = worldTransform(container);
+
+    viewport.dispatchEvent(pointer("pointerdown", 1, 1600, 1600));
+    viewport.dispatchEvent(pointer("pointermove", 1, 1520, 1540));
+    await nextTick();
+
+    const after = worldTransform(container);
+    expect(after.x, "-80 drawn px are -40 of the board's own").toBeCloseTo(before.x - 40, 4);
+    expect(after.y, "-60 drawn px are -30 of the board's own").toBeCloseTo(before.y - 30, 4);
+    viewport.dispatchEvent(pointer("pointerup", 1, 1520, 1540));
+  });
+
+  it("keeps a zoom anchored under the pointer inside a scaled root", async () => {
+    const { container, viewport } = await mountBoard();
+    const wheel = new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: -1 });
+    Object.defineProperty(wheel, "clientX", { value: 800 });
+    Object.defineProperty(wheel, "clientY", { value: 600 });
+    // The pointer sits at the board's own (400, 300) — half the layout box.
+    const anchor = { x: 400, y: 300 };
+    const before = worldTransform(container);
+    const world = {
+      x: (anchor.x - before.x) / before.k,
+      y: (anchor.y - before.y) / before.k,
+    };
+    viewport.dispatchEvent(wheel);
+    await nextTick();
+    const after = worldTransform(container);
+    expect(after.k).toBeGreaterThan(before.k);
+    expect(after.x + world.x * after.k, "the world point stays under the pointer").toBeCloseTo(anchor.x, 3);
+    expect(after.y + world.y * after.k).toBeCloseTo(anchor.y, 3);
+  });
+});

package/src/components/HkBoard.tsx

@@ -59,6 +59,7 @@ import {
   type BoardEdgeStyle,
 } from "../utils/boardEdges";
 import "./HkBoard.scss";
+import { drawnScale } from "../composables/layoutGeometry";
 
 /**
  * A node on the board. `hidden` nodes are junction-only (invisible).
@@ -211,9 +212,23 @@ export default defineComponent({
     // — SCADA scenes, mind maps — still get `nodeClick` on a short tap.
     let pressed: { id: string; pointerId: number; x: number; y: number } | null = null;
 
+    /** How many of the board's own pixels one DRAWN pixel is worth: the
+     *  camera and every anchor live in the board's local CSS pixels while the
+     *  pointer arrives in drawn ones, and a scaled or zoomed root separates
+     *  the two (see `layoutGeometry`). */
+    const pxScale = (): number => {
+      const el = viewportRef.value;
+      if (!el) return 1;
+      const scale = drawnScale(el);
+      const factor = el.offsetWidth > 0 ? scale.x : el.offsetHeight > 0 ? scale.y : 1;
+      return factor > 0 ? factor : 1;
+    };
+
     const localPoint = (e: PointerEvent | WheelEvent): BoardPoint => {
-      const rect = viewportRef.value?.getBoundingClientRect();
-      return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };
+      const el = viewportRef.value;
+      const rect = el?.getBoundingClientRect();
+      const k = pxScale();
+      return { x: (e.clientX - (rect?.left ?? 0)) / k, y: (e.clientY - (rect?.top ?? 0)) / k };
     };
 
     function onWheel(e: WheelEvent): void {
@@ -237,14 +252,10 @@ export default defineComponent({
     function rearmPinch(): void {
       const [a, b] = [...pointers.values()];
       if (!a || !b) return;
-      const rect = viewportRef.value?.getBoundingClientRect();
       pinchBase = {
         cam: { ...camera.value },
         dist: Math.hypot(a.x - b.x, a.y - b.y) || 1,
-        mid: {
-          x: (a.x + b.x) / 2 - (rect?.left ?? 0),
-          y: (a.y + b.y) / 2 - (rect?.top ?? 0),
-        },
+        mid: localPoint({ clientX: (a.x + b.x) / 2, clientY: (a.y + b.y) / 2 } as PointerEvent),
       };
     }
 
@@ -273,17 +284,18 @@ export default defineComponent({
       if (pinchBase && pointers.size >= 2) {
         const [a, b] = [...pointers.values()];
         const dist = Math.hypot(a.x - b.x, a.y - b.y) || 1;
-        const rect = viewportRef.value?.getBoundingClientRect();
-        const mid = {
-          x: (a.x + b.x) / 2 - (rect?.left ?? 0),
-          y: (a.y + b.y) / 2 - (rect?.top ?? 0),
-        };
+        const mid = localPoint({
+          clientX: (a.x + b.x) / 2,
+          clientY: (a.y + b.y) / 2,
+        } as PointerEvent);
         pinchBase.mid = mid;
         cam.pinchZoom(pinchBase.cam, dist / pinchBase.dist, mid);
         return;
       }
       if (dragState) {
-        const k = camera.value.k || 1;
+        // The node lives in WORLD units: the drawn delta comes down through
+        // the ancestor scale and then through the camera's own zoom.
+        const k = (camera.value.k || 1) * pxScale();
         const dx = (e.clientX - dragState.sx) / k;
         const dy = (e.clientY - dragState.sy) / k;
         if (Math.abs(e.clientX - dragState.sx) + Math.abs(e.clientY - dragState.sy) > 3) dragState.moved = true;
@@ -293,7 +305,8 @@ export default defineComponent({
         return;
       }
       if (panState) {
-        cam.panBy(e.clientX - panState.px, e.clientY - panState.py);
+        const k = pxScale();
+        cam.panBy((e.clientX - panState.px) / k, (e.clientY - panState.py) / k);
         panState = { px: e.clientX, py: e.clientY };
       }
     }

package/src/components/HkImageViewer.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } fro
 
 import HSpinner from "./HkSpinner";
 import HMinimap from "./HkMinimap";
+import { drawnScale } from "../composables/layoutGeometry";
 import "./HkImageViewer.scss";
 
 /**
@@ -57,6 +58,29 @@ export default defineComponent({
       return c ? { cw: c.clientWidth, ch: c.clientHeight } : { cw: 0, ch: 0 };
     }
 
+    /** How many of the container's own pixels one DRAWN pixel is worth.
+     *  The camera (`panX`/`panY`/`zoom`) lives in the container's local CSS
+     *  pixels while the pointer arrives in drawn ones, and a scaled or zoomed
+     *  root makes the two differ — feeding a drawn delta straight into the
+     *  camera moves the image `k` times as far as the finger went. */
+    function pxScale() {
+      const el = containerRef.value;
+      if (!el) return 1;
+      const scale = drawnScale(el);
+      const factor = el.offsetWidth > 0 ? scale.x : el.offsetHeight > 0 ? scale.y : 1;
+      return factor > 0 ? factor : 1;
+    }
+
+    /** A pointer position inside the container, in the container's own
+     *  pixels (the space every anchor and the camera are written in). */
+    function localPoint(e: { clientX: number; clientY: number }) {
+      const el = containerRef.value;
+      if (!el) return { x: 0, y: 0 };
+      const rect = el.getBoundingClientRect();
+      const factor = pxScale();
+      return { x: (e.clientX - rect.left) / factor, y: (e.clientY - rect.top) / factor };
+    }
+
     function recomputeFit() {
       const { cw, ch } = dims();
       if (!imgW.value || !imgH.value || !cw || !ch) return;
@@ -115,11 +139,9 @@ export default defineComponent({
       e.preventDefault();
       const el = containerRef.value;
       if (!el) return;
-      const rect = el.getBoundingClientRect();
-      const cx = e.clientX - rect.left;
-      const cy = e.clientY - rect.top;
+      const at = localPoint(e);
       const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-      setZoom(zoom.value * factor, cx, cy);
+      setZoom(zoom.value * factor, at.x, at.y);
     }
 
     /** Euclidean distance between two pointer positions. */
@@ -172,19 +194,19 @@ export default defineComponent({
         if (!pair || !el) return;
         // Anchor the zoom at the fingers' midpoint (container-local
         // coordinates, same space as the wheel/dblclick anchors).
-        const rect = el.getBoundingClientRect();
         const dist = Math.max(pointerDist(pair[0], pair[1]), 1);
-        setZoom(
-          pinchStartZoom * (dist / pinchStartDist),
-          (pair[0].x + pair[1].x) / 2 - rect.left,
-          (pair[0].y + pair[1].y) / 2 - rect.top,
-        );
+        const mid = localPoint({
+          clientX: (pair[0].x + pair[1].x) / 2,
+          clientY: (pair[0].y + pair[1].y) / 2,
+        });
+        setZoom(pinchStartZoom * (dist / pinchStartDist), mid.x, mid.y);
         return;
       }
 
       if (!dragging.value) return;
-      const dx = e.clientX - lastPt.value.x;
-      const dy = e.clientY - lastPt.value.y;
+      const factor = pxScale();
+      const dx = (e.clientX - lastPt.value.x) / factor;
+      const dy = (e.clientY - lastPt.value.y) / factor;
       lastPt.value = { x: e.clientX, y: e.clientY };
       panX.value += dx;
       panY.value += dy;
@@ -235,12 +257,11 @@ export default defineComponent({
       if (!loaded.value) return;
       const el = containerRef.value;
       if (!el) return;
-      const rect = el.getBoundingClientRect();
-      const cx = e.clientX - rect.left;
-      const cy = e.clientY - rect.top;
-      setZoom(isZoomed.value ? fit.value : Math.min(MAX_ZOOM, fit.value * 3), cx, cy);
+      const at = localPoint(e);
+      setZoom(isZoomed.value ? fit.value : Math.min(MAX_ZOOM, fit.value * 3), at.x, at.y);
     }
 
+    /** Panned by another surface (the minimap), in this camera's own units. */
     function onPanDelta(dx: number, dy: number) {
       panX.value += dx;
       panY.value += dy;

package/src/components/HkImageViewerTouch.test.tsx

@@ -100,6 +100,63 @@ describe("HkImageViewer touch gestures", () => {
     expect(after.scale).toBe(before.scale);
   });
 
+  it("pans by the finger's own distance inside a scaled root", async () => {
+    // The camera lives in the container's local pixels while the pointer
+    // arrives in drawn ones. Inside a scaled or zoomed root (chest's display
+    // scale reaches 300%) the image would otherwise travel k times as far as
+    // the finger — it slips out from under the pointer.
+    const s = await mountViewer();
+    const c = s.container();
+    // The container is drawn twice the size it is laid out at.
+    Object.defineProperty(c, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({ left: 0, top: 0, right: 800, bottom: 600, width: 800, height: 600, x: 0, y: 0 }) as DOMRect,
+    });
+    Object.defineProperty(c, "offsetWidth", { configurable: true, get: () => 400 });
+    Object.defineProperty(c, "offsetHeight", { configurable: true, get: () => 300 });
+
+    const before = s.transform();
+    c.dispatchEvent(pointer("pointerdown", 1, 100, 100));
+    c.dispatchEvent(pointer("pointermove", 1, 140, 160));
+    await nextTick();
+
+    const after = s.transform();
+    expect(after.tx, "40 drawn px are 20 of the container's own").toBeCloseTo(before.tx + 20, 5);
+    expect(after.ty, "60 drawn px are 30 of the container's own").toBeCloseTo(before.ty + 30, 5);
+  });
+
+  it("anchors a wheel zoom where the pointer is, inside a scaled root", async () => {
+    const s = await mountViewer();
+    const c = s.container();
+    Object.defineProperty(c, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({ left: 0, top: 0, right: 800, bottom: 600, width: 800, height: 600, x: 0, y: 0 }) as DOMRect,
+    });
+    Object.defineProperty(c, "offsetWidth", { configurable: true, get: () => 400 });
+    Object.defineProperty(c, "offsetHeight", { configurable: true, get: () => 300 });
+
+    // The point under the pointer must stay under it: the container-local
+    // coordinate of the pointer is (200, 150) — half of the layout box — and
+    // the anchor has to be that, not the drawn (400, 300).
+    const anchor = { x: 200, y: 150 };
+    const before = s.transform();
+    const worldBefore = {
+      x: (anchor.x - before.tx) / before.scale,
+      y: (anchor.y - before.ty) / before.scale,
+    };
+    // happy-dom's WheelEvent carries no pointer coordinates: pin them by hand
+    // so the anchor has a position to work from.
+    const wheel = new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: -1 });
+    Object.defineProperty(wheel, "clientX", { value: 400 });
+    Object.defineProperty(wheel, "clientY", { value: 300 });
+    c.dispatchEvent(wheel);
+    await nextTick();
+    const after = s.transform();
+    expect(after.scale).toBeGreaterThan(before.scale);
+    expect(after.tx + worldBefore.x * after.scale, "the world point stays under the pointer").toBeCloseTo(anchor.x, 4);
+    expect(after.ty + worldBefore.y * after.scale).toBeCloseTo(anchor.y, 4);
+  });
+
   it("a stray move without an active pointer never pans", async () => {
     const s = await mountViewer();
     const c = s.container();

package/src/components/HkMinimap.scale.test.ts

@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h } from "vue";
+
+import HkMinimap from "./HkMinimap";
+
+const mounts: ReturnType<typeof createApp>[] = [];
+const containers: HTMLElement[] = [];
+
+afterEach(() => {
+  for (const app of mounts.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+});
+
+/** Mount the overview map and drag it: the emitted pan says how far the scene
+ *  should move for a pointer that travelled `drawn` pixels. */
+function drag(drawnWidth: number): { dx: number; dy: number } {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+  const deltas: Array<[number, number]> = [];
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(HkMinimap, {
+          zoom: 1,
+          zoomPercent: 100,
+          panX: 0,
+          panY: 0,
+          viewportWidth: 400,
+          viewportHeight: 300,
+          boxes: [{ id: "a", bounds: { x: 0, y: 0, w: 100, h: 100 }, color: "red" }],
+          onPanDelta: (dx: number, dy: number) => deltas.push([dx, dy]),
+        });
+    },
+  });
+  const app = createApp(Host);
+  mounts.push(app);
+  app.mount(container);
+
+  const root = container.querySelector<HTMLElement>(".hk-minimap")!;
+  const svg = root.querySelector<SVGSVGElement>("svg.hk-minimap-svg")!;
+  // The map's viewBox is 160 units wide; the card draws it at `drawnWidth`.
+  Object.defineProperty(svg, "getBoundingClientRect", {
+    configurable: true,
+    value: () =>
+      ({ left: 0, top: 0, right: drawnWidth, bottom: drawnWidth * (110 / 160), width: drawnWidth, height: drawnWidth * (110 / 160), x: 0, y: 0 }) as DOMRect,
+  });
+  Object.defineProperty(root, "setPointerCapture", { configurable: true, value: () => {} });
+  Object.defineProperty(root, "releasePointerCapture", { configurable: true, value: () => {} });
+
+  const at = (type: string, x: number, y: number) =>
+    root.dispatchEvent(
+      new PointerEvent(type, { bubbles: true, pointerId: 1, pointerType: "mouse", clientX: x, clientY: y }),
+    );
+  at("pointerdown", 100, 100);
+  at("pointermove", 140, 120);
+  at("pointerup", 140, 120);
+  expect(deltas, "the drag emitted a pan").toHaveLength(1);
+  return { dx: deltas[0][0], dy: deltas[0][1] };
+}
+
+describe("HkMinimap scaled-space pan", () => {
+  it("scales the pan by the map's own drawn size", () => {
+    // The map is drawn into a card that is not necessarily as wide as the
+    // SVG's viewBox — and, in a scaled or zoomed root, is drawn wider still.
+    // The pointer's drawn pixels have to come down through that factor, or a
+    // drag moves the scene further than the pointer went (and at k = 3 the
+    // scene runs away from the cursor entirely).
+    const normal = drag(160); // 1 drawn px = 1 user unit
+    const wide = drag(320); // 1 drawn px = half a unit
+    expect(Math.abs(wide.dx), "half the travel for the same pointer").toBeCloseTo(
+      Math.abs(normal.dx) / 2,
+      6,
+    );
+    expect(Math.abs(wide.dy)).toBeCloseTo(Math.abs(normal.dy) / 2, 6);
+    expect(normal.dx, "the scene follows the pointer the other way").toBeLessThan(0);
+  });
+});

package/src/components/HkMinimap.tsx

@@ -5,6 +5,7 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref, type PropTy
 
 
 import { useI18n } from "../i18n/context";
+import { layoutOffset } from "../composables/layoutGeometry";
 import "./HkMinimap.scss";
 
 export interface MinimapBox {
@@ -158,7 +159,21 @@ export default defineComponent({
       const dy = e.clientY - dragStart.value.y;
       dragStart.value = { x: e.clientX, y: e.clientY };
       if (scale.value > 0) {
-        emit("panDelta", (-dx / scale.value) * props.zoom, (-dy / scale.value) * props.zoom);
+        // The pointer moves in DRAWN pixels while the map is drawn into a
+        // card that is not necessarily as wide as the SVG's viewBox (and, in
+        // a scaled or zoomed root, is drawn wider still). One drawn pixel is
+        // `viewBox / rect.width` user units, so the delta is converted before
+        // it is turned into a pan.
+        const host = rootRef.value;
+        const svg =
+          host instanceof SVGElement ? host : host?.querySelector("svg") ?? host ?? null;
+        const rect = svg?.getBoundingClientRect();
+        const units = rect && rect.width > 0 ? svgW / rect.width : 1;
+        emit(
+          "panDelta",
+          (-dx * units / scale.value) * props.zoom,
+          (-dy * units / scale.value) * props.zoom,
+        );
       }
     }
     function onUp(e: PointerEvent) {

package/src/components/HkPasswordInput.test.ts

@@ -278,4 +278,52 @@ describe("HkPasswordInput placeholder layers on Tab focus", () => {
     expect(staticText).toBeTruthy();
     expect(marqueeText).toBe(staticText);
   });
+
+/** happy-dom's own ResizeObserver never fires (no layout engine): this one
+ *  keeps the callbacks so a test can run the measurement deterministically. */
+class FakeResizeObserver {
+  static instances: FakeResizeObserver[] = [];
+  callback: () => void;
+  constructor(callback: () => void) {
+    this.callback = callback;
+    FakeResizeObserver.instances.push(this);
+  }
+  observe(): void {}
+  disconnect(): void {}
+}
+
+describe("HkPasswordInput strength dots in a scaled root", () => {
+  it("sizes the dot canvas in the box's own units", () => {
+    const original = globalThis.ResizeObserver;
+    FakeResizeObserver.instances = [];
+    globalThis.ResizeObserver = FakeResizeObserver as unknown as typeof ResizeObserver;
+    try {
+    // The canvas is CSS-sized to its box (`inset: 0`) while its backing store
+    // is drawn from the box's DRAWN size: in a scaled or zoomed root the grid
+    // came out k times denser and every dot k times smaller.
+    const m = mountPasswordInput("hunter2", { showStrengthDots: true });
+    const box = m.container.querySelector<HTMLElement>(".hk-pwd-box")!;
+    const canvas = m.container.querySelector<HTMLCanvasElement>(".hk-pwd-dots")!;
+    expect(box && canvas).toBeTruthy();
+    // The box is drawn twice the size it is laid out at.
+    Object.defineProperty(box, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({ left: 0, top: 0, right: 800, bottom: 200, width: 800, height: 200, x: 0, y: 0 }) as DOMRect,
+    });
+    Object.defineProperty(box, "offsetWidth", { configurable: true, get: () => 400 });
+    Object.defineProperty(box, "offsetHeight", { configurable: true, get: () => 100 });
+    const dpr = window.devicePixelRatio || 1;
+    // Re-run the measurement the box's observer would run.
+    const observers = FakeResizeObserver.instances.filter((o) => o.callback);
+    expect(observers.length, "the box is observed").toBeGreaterThan(0);
+    observers.forEach((o) => o.callback());
+    expect(canvas.width, "400 of the box's own pixels, not the drawn 800").toBe(
+      Math.round(400 * dpr),
+    );
+    } finally {
+      globalThis.ResizeObserver = original;
+    }
+  });
+});
+
 });

package/src/components/HkPasswordInput.tsx

@@ -17,6 +17,7 @@ import { scheduleInterval, type IntervalHandle } from "../runtime/intervalBus";
 import HListTransition from "./HkListTransition";
 import { HkPlaceholderMarquee, type PlaceholderVariant } from "./HkPlaceholderMarquee";
 import "./HkPasswordInput.scss";
+import { drawnScale } from "../composables/layoutGeometry";
 
 interface Ripple {
   radius: number;
@@ -232,7 +233,14 @@ export default defineComponent({
       const cv = dotCanvasRef.value;
       const bx = boxRef.value;
       if (!cv || !bx) return;
-      const { width, height } = bx.getBoundingClientRect();
+      // The canvas box is sized in the element's own units (`inset: 0`), so
+      // its backing store has to be too: taking the DRAWN box would make the
+      // dot grid k times denser inside a scaled or zoomed root (see
+      // `layoutGeometry`).
+      const drawn = bx.getBoundingClientRect();
+      const scale = drawnScale(bx);
+      const width = bx.offsetWidth > 0 ? drawn.width / (scale.x > 0 ? scale.x : 1) : drawn.width;
+      const height = bx.offsetHeight > 0 ? drawn.height / (scale.y > 0 ? scale.y : 1) : drawn.height;
       cv.width = width * dpr;
       cv.height = height * dpr;
       const usable = width * 0.8;