@celestia-island/hikari 0.43.12 → 0.43.13

package/package.json

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

package/src/components/HkPlaceholderMarquee.test.ts

@@ -84,6 +84,33 @@ afterEach(() => {
   }
 });
 
+describe("HkPlaceholderMarquee scale-aware measurement", () => {
+  it("converts the copy's drawn width into the host's own units before looping", async () => {
+    // The copy is measured where it is DRAWN while the host it is compared
+    // with (`clientWidth`) is laid out. Inside a scaled or zoomed root the two
+    // differ by the factor the space is drawn at: the raw rect would make the
+    // loop overshoot by (k-1) of a copy per cycle and report overflow for
+    // copies that fit k times over.
+    const { container } = mountMarquee({ text: "a very long placeholder that overflows".repeat(4) });
+    const host = container.querySelector(".hk-placeholder-marquee") as HTMLElement;
+    const copy = container.querySelector(".hk-placeholder-marquee__copy") as HTMLElement;
+    Object.defineProperty(host, "clientWidth", { configurable: true, get: () => 200 });
+    // The host is drawn twice the size it is laid out at: 800 drawn px are
+    // 400 of its own, while the copy really advances 500 of them.
+    Object.defineProperty(host, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({ width: 400, left: 0, top: 0, right: 400, bottom: 40, height: 40, x: 0, y: 0 }) as DOMRect,
+    });
+    Object.defineProperty(host, "offsetWidth", { configurable: true, get: () => 200 });
+    vi.spyOn(copy, "getBoundingClientRect").mockReturnValue({ width: 1000 } as DOMRect);
+    marqueeExposed(container)?.measure?.();
+    await nextTick();
+
+    const strip = container.querySelector(".hk-placeholder-marquee__strip") as HTMLElement;
+    expect(strip.style.getPropertyValue("--hk-marquee-shift"), "1000 drawn = 500 of the host's own").toBe("-500px");
+  });
+});
+
 describe("HkPlaceholderMarquee", () => {
   it("stays a hidden single-copy probe while the text fits", () => {
     const { container } = mountMarquee({ text: "用户名" });

package/src/components/HkPlaceholderMarquee.tsx

@@ -1,4 +1,5 @@
 import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, type PropType } from "vue";
+import { drawnScale } from "../composables/layoutGeometry";
 
 /**
  * Overflow strategy for a placeholder that does not fit its input.
@@ -64,12 +65,19 @@ export const HkPlaceholderMarquee = defineComponent({
       // copy spacing as trailing padding). Reading the first copy element —
       // instead of stripWidth / 3 — stays correct in the fitting case,
       // where the strip holds a single copy, and through overflow flips,
-      // where the copy count changes under the same strip. The fractional
-      // bounding-rect width keeps the CSS loop shift bit-exact with the
-      // laid-out advance — an integer-rounded width would show a ≤0.5px
-      // seam at every wrap (the copy rides the animated strip, so the
-      // width itself is never affected by the strip's transform).
-      const copyWidth = copy.getBoundingClientRect().width;
+      // where the copy count changes under the same strip. The width is read
+      // where the copy is DRAWN and converted into the host's own units,
+      // because that is the space the CSS loop shift and `clientWidth` live
+      // in: inside a scaled or zoomed root the raw rect is k times the
+      // advance, so the loop would overshoot by (k-1) per cycle and the
+      // overflow test would fire on copies that fit k times over. The
+      // conversion keeps the fractional width that makes the shift
+      // bit-exact — an integer-rounded width would show a ≤0.5px seam at
+      // every wrap (the copy rides the animated strip, so the width itself
+      // is never affected by the strip's transform).
+      const space = drawnScale(host);
+      const factor = space.x > 0 ? space.x : 1;
+      const copyWidth = copy.getBoundingClientRect().width / factor;
       loopWidth.value = copyWidth;
       overflowing.value = copyWidth - COPY_SPACING > host.clientWidth;
       emit("overflowChange", overflowing.value);

package/src/components/HkTimeline.test.tsx

@@ -182,6 +182,45 @@ describe("HkTimeline full mode", () => {
   });
 });
 
+describe("HkTimeline scale-aware collapse", () => {
+  it("measures the natural size in the units the host is sized in", async () => {
+    // The probe is measured where it is DRAWN while the host it is compared
+    // against (`clientWidth`) is laid out: inside a scaled or zoomed root the
+    // probe reports k times the space it really needs, so a timeline that
+    // fits is collapsed — and because the remembered full size is drawn too,
+    // it never comes back. The measurement converts through the space it was
+    // taken in.
+    const proto = Element.prototype as unknown as { getBoundingClientRect: () => DOMRect };
+    const original = proto.getBoundingClientRect;
+    const rect = (w: number, h: number): DOMRect =>
+      ({ left: 0, top: 0, right: w, bottom: h, width: w, height: h, x: 0, y: 0 }) as DOMRect;
+    proto.getBoundingClientRect = function (this: HTMLElement) {
+      // The natural-size probe (an absolutely positioned clone) and the root
+      // it cloned report a box drawn twice the size it is laid out at.
+      if (this.style?.position === "absolute" || this.classList?.contains("hk-timeline")) {
+        return rect(600, 40);
+      }
+      return rect(0, 0);
+    };
+    try {
+      const t = mountTimeline({ currentKey: "c" });
+      const root = t.container.querySelector<HTMLElement>(".hk-timeline")!;
+      Object.defineProperty(root, "offsetWidth", { configurable: true, get: () => 300 });
+      Object.defineProperty(root, "offsetHeight", { configurable: true, get: () => 20 });
+      Object.defineProperty(root, "clientWidth", { configurable: true, get: () => 300 });
+      await nextTick();
+      await nextTick();
+      await nextTick();
+      expect(
+        root.getAttribute("data-mode"),
+        "300 of natural width in a 300px host is not an overflow",
+      ).toBe("full");
+    } finally {
+      proto.getBoundingClientRect = original;
+    }
+  });
+});
+
 describe("HkTimeline window mode", () => {
   it("shows only the previous, current and next steps around the middle", () => {
     const t = mountTimeline({ currentKey: "c", collapse: "always" });

package/src/components/HkTimeline.tsx

@@ -11,6 +11,7 @@ import {
 } from "vue";
 
 
+import { drawnScale } from "../composables/layoutGeometry";
 import "./HkTimeline.scss";
 
 export type TimelineStepStatus = "completed" | "active" | "pending";
@@ -76,6 +77,15 @@ export function computeTimelineWindow(
  * sized to `max-content`, which lets the flex items keep their natural
  * widths (labels are `white-space: nowrap; flex-shrink: 0`).
  */
+/** A length measured where it is DRAWN, in the laid-out units the host it
+ *  will be compared against is sized in: a probe appended inside a scaled or
+ *  zoomed root reports `k` times the space it really occupies there. */
+function drawnToLaid(drawn: number, space: HTMLElement): number {
+  const scale = drawnScale(space);
+  const factor = space.offsetWidth > 0 ? scale.x : space.offsetHeight > 0 ? scale.y : 1;
+  return factor > 0 ? drawn / factor : drawn;
+}
+
 function naturalRowWidth(el: HTMLElement): number {
   const probe = el.cloneNode(true) as HTMLElement;
   probe.style.position = "absolute";
@@ -86,7 +96,11 @@ function naturalRowWidth(el: HTMLElement): number {
   const parent = el.parentElement;
   if (!parent) return el.scrollWidth;
   parent.appendChild(probe);
-  const width = probe.getBoundingClientRect().width;
+  // The probe is measured where it is DRAWN, while the host it is compared
+  // against (`clientWidth`) is laid out: convert through the space the probe
+  // lives in, or a scaled or zoomed root answers with a size that is k times
+  // the one the host can hold (see `layoutGeometry`).
+  const width = drawnToLaid(probe.getBoundingClientRect().width, el);
   probe.remove();
   return Math.ceil(width);
 }
@@ -103,7 +117,7 @@ function naturalColumnHeight(el: HTMLElement): number {
   const parent = el.parentElement;
   if (!parent) return el.scrollHeight;
   parent.appendChild(probe);
-  const height = probe.getBoundingClientRect().height;
+  const height = drawnToLaid(probe.getBoundingClientRect().height, el);
   probe.remove();
   return Math.ceil(height);
 }

package/src/composables/layoutGeometry.test.ts

@@ -0,0 +1,177 @@
+import { afterEach, describe, expect, it } from "vitest";
+
+import {
+  drawnScale,
+  frameMetrics,
+  frameScale,
+  laidSize,
+  layoutOffset,
+  layoutRect,
+  nearestLaidAncestor,
+  placePoint,
+} from "./layoutGeometry";
+
+/** A box the engine reports, on both axes. */
+interface Box {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+function asRect(box: Box): DOMRect {
+  return {
+    ...box,
+    width: box.right - box.left,
+    height: box.bottom - box.top,
+    x: box.left,
+    y: box.top,
+  } as DOMRect;
+}
+
+function drawn(el: HTMLElement, box: Box): void {
+  Object.defineProperty(el, "getBoundingClientRect", {
+    configurable: true,
+    value: () => asRect(box),
+  });
+}
+
+function laid(
+  el: HTMLElement,
+  box: { left: number; top: number; w: number; h: number },
+  parent: HTMLElement | null,
+): void {
+  Object.defineProperty(el, "offsetLeft", { configurable: true, get: () => box.left });
+  Object.defineProperty(el, "offsetTop", { configurable: true, get: () => box.top });
+  Object.defineProperty(el, "offsetWidth", { configurable: true, get: () => box.w });
+  Object.defineProperty(el, "offsetHeight", { configurable: true, get: () => box.h });
+  Object.defineProperty(el, "offsetParent", { configurable: true, get: () => parent });
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("layoutGeometry", () => {
+  it("reports the laid-out border box, not the rounded one", () => {
+    // A fractional border box: the computed width is the CONTENT box unless
+    // the element is border-box, so the padding and border come back on top of
+    // it — and the integer `offsetWidth` is only the fallback.
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    el.style.width = "100.4px";
+    el.style.height = "40.25px";
+    el.style.paddingLeft = "3px";
+    el.style.paddingRight = "3px";
+    el.style.borderLeftWidth = "1px";
+    el.style.borderRightWidth = "1px";
+    laid(el, { left: 0, top: 0, w: 108, h: 40 }, document.body);
+    expect(laidSize(el)).toEqual({ w: 108.4, h: 40.25 });
+
+    el.style.boxSizing = "border-box";
+    expect(laidSize(el).w, "a border-box element reports its border box already").toBe(100.4);
+  });
+
+  it("falls back to the integer box when nothing finer can be read", () => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    laid(el, { left: 0, top: 0, w: 108, h: 40 }, document.body);
+    expect(laidSize(el), "no computed width to read").toEqual({ w: 108, h: 40 });
+  });
+
+  it("adds a frame's border only when the walk went through it", () => {
+    // The two families a browser produces: a positioned frame IS the child's
+    // offsetParent (the offsets are measured from its PADDING edge, so its
+    // border has to come back), a static frame is skipped by the chain (they
+    // are measured from its BORDER edge, so adding it would double-count).
+    const frame = document.createElement("div");
+    const child = document.createElement("div");
+    frame.appendChild(child);
+    document.body.appendChild(frame);
+    frame.style.borderLeftWidth = "10px";
+    frame.style.borderTopWidth = "10px";
+    drawn(frame, { left: 100, right: 300, top: 200, bottom: 260 });
+    laid(frame, { left: 0, top: 0, w: 200, h: 60 }, document.body);
+    laid(child, { left: 30, top: 30, w: 100, h: 40 }, frame);
+    drawn(child, { left: 140, right: 240, top: 240, bottom: 280 });
+
+    // Through the frame: 100 + 10 (border) + (30 - 0 - 0) = 140.
+    expect(placePoint(frame, frameMetrics(frame), layoutOffset(child, frame), layoutOffset(frame, null)))
+      .toEqual({ x: 140, y: 240 });
+    expect(layoutRect(child, frame)).toEqual({ left: 140, top: 240, width: 100, height: 40 });
+
+    // Skipping the frame: the offsets already carry its border.
+    laid(child, { left: 40, top: 40, w: 100, h: 40 }, null);
+    expect(layoutOffset(child, frame).through).toBe(false);
+    expect(placePoint(frame, frameMetrics(frame), layoutOffset(child, frame), layoutOffset(frame, null)))
+      .toEqual({ x: 140, y: 240 });
+  });
+
+  it("scales what it places by the scale the frame is drawn at", () => {
+    const frame = document.createElement("div");
+    const child = document.createElement("div");
+    frame.appendChild(child);
+    document.body.appendChild(frame);
+    drawn(frame, { left: 50, right: 450, top: 20, bottom: 140 }); // drawn 2x
+    laid(frame, { left: 0, top: 0, w: 200, h: 60 }, document.body);
+    laid(child, { left: 50, top: 30, w: 40, h: 10 }, frame);
+    drawn(child, { left: 0, right: 0, top: 0, bottom: 0 });
+
+    const box = frameMetrics(frame);
+    expect(frameScale(box), "the frame is drawn twice its laid size").toEqual({ x: 2, y: 2 });
+    expect(placePoint(frame, box, layoutOffset(child, frame), layoutOffset(frame, null))).toEqual({
+      x: 150,
+      y: 80,
+    });
+    expect(layoutRect(child, frame)).toEqual({ left: 150, top: 80, width: 80, height: 20 });
+  });
+
+  it("refuses to place a box it cannot read", () => {
+    const frame = document.createElement("div");
+    const child = document.createElement("div");
+    frame.appendChild(child);
+    document.body.appendChild(frame);
+    laid(frame, { left: 0, top: 0, w: 200, h: 60 }, document.body);
+    laid(child, { left: 10, top: 10, w: 40, h: 10 }, frame);
+    drawn(frame, { left: 0, right: 200, top: 0, bottom: 0 });
+    expect(layoutRect(child, frame), "a frame drawn with no height places nothing").toBeNull();
+
+    drawn(frame, { left: 0, right: 200, top: 0, bottom: 60 });
+    laid(child, { left: 10, top: 10, w: 0, h: 0 }, frame);
+    expect(layoutRect(child, frame), "an item with no box places nothing").toBeNull();
+
+    // A chain through something without offsets of its own cannot be added up.
+    laid(child, { left: 10, top: 10, w: 40, h: 10 }, frame);
+    const inner = document.createElement("div");
+    Object.defineProperty(inner, "offsetLeft", { configurable: true, get: () => undefined });
+    Object.defineProperty(inner, "offsetTop", { configurable: true, get: () => undefined });
+    Object.defineProperty(inner, "offsetParent", { configurable: true, get: () => frame });
+    laid(child, { left: 10, top: 10, w: 40, h: 10 }, inner);
+    expect(layoutOffset(child, frame).x).toBeNaN();
+    expect(layoutRect(child, frame)).toBeNull();
+  });
+
+  it("measures how much bigger an element is drawn than laid out", () => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    el.style.width = "100px";
+    el.style.height = "50px";
+    laid(el, { left: 0, top: 0, w: 100, h: 50 }, document.body);
+    drawn(el, { left: 0, right: 150, top: 0, bottom: 75 });
+    expect(drawnScale(el)).toEqual({ x: 1.5, y: 1.5 });
+  });
+
+  it("walks up to the nearest ancestor that has a box", () => {
+    const outer = document.createElement("div");
+    const contentless = document.createElement("div");
+    const child = document.createElement("div");
+    outer.appendChild(contentless);
+    contentless.appendChild(child);
+    document.body.appendChild(outer);
+    drawn(outer, { left: 0, right: 300, top: 0, bottom: 60 });
+    laid(outer, { left: 0, top: 0, w: 300, h: 60 }, null);
+    drawn(contentless, { left: 0, right: 0, top: 0, bottom: 0 });
+    laid(contentless, { left: 0, top: 0, w: 0, h: 0 }, outer);
+    expect(nearestLaidAncestor(child), "a boxless wrapper is not a frame").toBe(outer);
+  });
+});

package/src/composables/layoutGeometry.ts

@@ -0,0 +1,231 @@
+/**
+ * layoutGeometry — where things are LAID OUT, as opposed to where they are
+ * DRAWN.
+ *
+ * A browser keeps two answers to "where is this element", and hikari's
+ * interactions keep needing the first one:
+ *
+ * - the DRAWN box (`getBoundingClientRect`, `getClientRects`, `Range`,
+ *   `elementFromPoint`): what the user sees, after every `transform`, zoom,
+ *   drag lift, FLIP animation and transition in flight. Every one of those
+ *   moves it.
+ * - the LAYOUT box (`offsetLeft`, `offsetTop`, `offsetWidth`,
+ *   `offsetHeight`, walked along the `offsetParent` chain, plus
+ *   `scrollLeft`/`scrollTop`): where the engine put the element in the flow,
+ *   in CSS pixels that no transform touches.
+ *
+ * The difference matters when a gesture has to compare an element that carries
+ * a live transform against one that does not — a dragged chip against its
+ * neighbours, a ghost against the strip it came from, an overlay against a
+ * scrolled container — because the drawn box of the transformed element
+ * answers a question about the transform rather than about the layout. These
+ * helpers read the layout side and place it back in the viewport coordinates
+ * the rest of a component measures in, so the two can be compared.
+ *
+ * Measured in Chromium (2026-09, the wave that introduced this file):
+ *
+ * - all four offset values are byte-identical under a transform on the element
+ *   itself, on a transition mid-flight, and on any ancestor;
+ * - a transform (or even `will-change: transform`) on an ancestor REBINDS
+ *   `offsetParent`, so a chain must be re-read on every use and never cached;
+ * - an offset is measured from the `offsetParent`'s PADDING edge (its border
+ *   excluded, the child's margin included): a positioned `offsetParent`
+ *   measures from that padding edge, while a `body` `offsetParent` is
+ *   special-cased by Blink (static body → document space, positioned body →
+ *   its border box). Walking BOTH the element and its frame to the same root
+ *   and subtracting cancels every one of those conventions, which is why
+ *   `layoutOffset` also reports whether the walk passed THROUGH the frame:
+ *   only then is the difference measured from the frame's padding box, and
+ *   only then does its border have to be added back;
+ * - the four values are integers (rounded half-up, ~±0.5px per hop) while the
+ *   computed `width`/`height` are fractional — `laidSize` takes the finer pair
+ *   and rebuilds the border box the integer values measure in;
+ * - `scrollLeft`/`scrollTop` are layout values too, so a scroll has to be
+ *   applied in layout units and scaled with the content the frame holds.
+ */
+
+/** What places a coordinate: the frame's drawn box, its laid-out size (which
+ *  no transform touches, so the two together are the scale it is drawn at)
+ *  and the scroll that slides its content inside the box. */
+export interface FrameMetrics {
+  /** The frame's drawn border box, in viewport coordinates. */
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  /** The frame's laid-out border box (`0` when it has no layout). */
+  laidW: number;
+  laidH: number;
+  /** The frame's own scroll offsets. */
+  scrollX: number;
+  scrollY: number;
+}
+
+/** A border box in viewport coordinates. */
+export interface LayoutRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+/** A point in the layout space an element's ancestors share. */
+export interface LayoutOffset {
+  x: number;
+  y: number;
+  /** Whether the walk passed through the frame it was asked for. */
+  through: boolean;
+}
+
+/** An element's border box in the layout space its ancestors share — the
+ *  position CSS transforms do not move. `through` reports whether the walk
+ *  passed through `frame`, which is what decides whether a caller has to add
+ *  that frame's border back (see the file comment).
+ *
+ *  A chain that runs through something without offsets of its own (an element
+ *  inside `<svg>`) sums to `NaN`: callers check `Number.isFinite` before
+ *  placing anything with it. */
+export function layoutOffset(el: HTMLElement, frame?: HTMLElement | null): LayoutOffset {
+  let x = 0;
+  let y = 0;
+  let through = false;
+  for (let node: HTMLElement | null = el; node; node = node.offsetParent as HTMLElement | null) {
+    x += node.offsetLeft;
+    y += node.offsetTop;
+    if (node === frame) through = true;
+  }
+  return { x, y, through };
+}
+
+/** An element's laid-out BORDER box, as finely as the engine will report it.
+ *  `offsetWidth`/`offsetHeight` are integers — they round, and half a pixel is
+ *  a third of the line filter's entire tolerance — while the computed
+ *  `width`/`height` are fractional. The computed pair describes the CONTENT
+ *  box unless the element is `box-sizing: border-box`, so its padding and
+ *  border are added back to reach the border box that `offsetWidth`,
+ *  `getBoundingClientRect` and every measurement here uses. Anything
+ *  unreadable (`auto` on an unrendered element, no layout at all) falls back
+ *  to the integer pair. */
+export function laidSize(el: HTMLElement): { w: number; h: number } {
+  const style = getComputedStyle(el);
+  const edge = (value: string): number => parseFloat(value) || 0;
+  const size = (along: "w" | "h"): number => {
+    const integer = along === "w" ? el.offsetWidth : el.offsetHeight;
+    const computed = parseFloat(along === "w" ? style.width : style.height);
+    if (!Number.isFinite(computed)) return integer;
+    if (style.boxSizing === "border-box") return computed;
+    const padding =
+      along === "w"
+        ? edge(style.paddingLeft) + edge(style.paddingRight)
+        : edge(style.paddingTop) + edge(style.paddingBottom);
+    const border =
+      along === "w"
+        ? edge(style.borderLeftWidth) + edge(style.borderRightWidth)
+        : edge(style.borderTopWidth) + edge(style.borderBottomWidth);
+    return computed + padding + border;
+  };
+  return { w: size("w"), h: size("h") };
+}
+
+/** How much bigger an element is DRAWN than it is laid out, per axis: the
+ *  cumulative scale of every transform above it (its own included). `1` per
+ *  axis when either side of the ratio cannot be read. */
+export function drawnScale(el: HTMLElement): { x: number; y: number } {
+  const rect = el.getBoundingClientRect();
+  const laid = laidSize(el);
+  return {
+    x: laid.w > 0 && rect.width > 0 ? rect.width / laid.w : 1,
+    y: laid.h > 0 && rect.height > 0 ? rect.height / laid.h : 1,
+  };
+}
+
+/** Read a frame as it is right now (see `FrameMetrics`). */
+export function frameMetrics(frame: HTMLElement): FrameMetrics {
+  const rect = frame.getBoundingClientRect();
+  return {
+    x: rect.left,
+    y: rect.top,
+    w: rect.width,
+    h: rect.height,
+    laidW: frame.offsetWidth,
+    laidH: frame.offsetHeight,
+    scrollX: frame.scrollLeft,
+    scrollY: frame.scrollTop,
+  };
+}
+
+/** The scale a frame draws its content at, per axis (`1` when its laid-out
+ *  size cannot be read). */
+export function frameScale(box: FrameMetrics): { x: number; y: number } {
+  return {
+    x: box.laidW > 0 ? box.w / box.laidW : 1,
+    y: box.laidH > 0 ? box.h / box.laidH : 1,
+  };
+}
+
+/** Where a frame DRAWS a point that was laid out at `at` inside it, given the
+ *  frame's metrics and the offset-chain sums of the element (`at`) and of the
+ *  frame itself (`of`). This is the placement every helper here reduces to:
+ *  the frame's drawn origin, plus its border when the element's chain ran
+ *  through it (a positioned frame measures its children from its padding
+ *  edge), plus the element's offset from that origin taken against the scroll
+ *  the frame has since moved, all at the scale the frame is drawn at. */
+export function placePoint(
+  frame: HTMLElement,
+  box: FrameMetrics,
+  at: LayoutOffset,
+  of: LayoutOffset,
+): { x: number; y: number } {
+  const scale = frameScale(box);
+  const style = getComputedStyle(frame);
+  const border = (edge: string, factor: number): number =>
+    at.through ? (parseFloat(edge) || 0) * factor : 0;
+  return {
+    x: box.x + border(style.borderLeftWidth, scale.x) + (at.x - of.x - box.scrollX) * scale.x,
+    y: box.y + border(style.borderTopWidth, scale.y) + (at.y - of.y - box.scrollY) * scale.y,
+  };
+}
+
+/** The nearest ancestor of `el` that is actually LAID OUT. A layout box can
+ *  only be measured inside a frame that has a box to measure it in: an element
+ *  with `display: contents` generates none, and its children are laid out by
+ *  the next box up — which is the frame their movement follows. A tree with no
+ *  boxes anywhere (no layout engine, a test environment) walks out of
+ *  ancestors and keeps the parent it started with. */
+export function nearestLaidAncestor(el: HTMLElement): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const rect = node.getBoundingClientRect();
+    if (rect.width > 0 || rect.height > 0 || node.offsetWidth > 0 || node.offsetHeight > 0) {
+      return node;
+    }
+  }
+  return el.parentElement;
+}
+
+/** The element's layout border box in VIEWPORT coordinates — where the layout
+ *  says it is, whatever its own transform (or any transform above it) draws.
+ *  `frame` defaults to the element's `offsetParent`; pass the box the caller
+ *  measures against when that is a different element (a strip's frame, a
+ *  scrolled container). `null` when nothing can be placed: no frame, a frame
+ *  that is detached, a chain that cannot be added up, or a frame drawn with no
+ *  size on an axis the box needs. */
+export function layoutRect(el: HTMLElement, frame?: HTMLElement | null): LayoutRect | null {
+  const target = (frame === undefined ? el.offsetParent : frame) as HTMLElement | null;
+  if (!target || !target.isConnected) return null;
+  const box = frameMetrics(target);
+  const at = layoutOffset(el, target);
+  const of = layoutOffset(target, null);
+  if (!Number.isFinite(at.x) || !Number.isFinite(at.y)) return null;
+  if (!Number.isFinite(of.x) || !Number.isFinite(of.y)) return null;
+  const size = laidSize(el);
+  if (!(size.w > 0) || !(size.h > 0)) return null;
+  if (!(box.w > 0) || !(box.h > 0)) return null;
+  const drawn = placePoint(target, box, at, of);
+  const scale = frameScale(box);
+  return {
+    left: drawn.x,
+    top: drawn.y,
+    width: size.w * scale.x,
+    height: size.h * scale.y,
+  };
+}

package/src/composables/useOverlayScrollbar.test.ts

@@ -124,6 +124,38 @@ describe("attachOverlayScrollbars", () => {
     expect(viewport.scrollTop).toBe(80);
   });
 
+  it("moves the thumb the distance the POINTER went, however the space is scaled", () => {
+    // The pointer moves in drawn pixels; the track it is divided by is laid
+    // out. Inside a scaled or zoomed root the two differ by the factor the
+    // space is drawn at, and the thumb would travel that many times further
+    // than the pointer — it would reach the end of the track and stop
+    // following after 1/k of the drag.
+    const { viewport, wrapper, handle } = mountViewport("vertical");
+    stubGeometry(viewport, {
+      scrollHeight: 400, clientHeight: 100, scrollTop: 0,
+      scrollWidth: 100, clientWidth: 100, scrollLeft: 0,
+    });
+    handle.update();
+    const track = wrapper.querySelector<HTMLElement>(".hk-scrollbar-track")!;
+    const thumb = wrapper.querySelector<HTMLElement>(".hk-scrollbar-thumb")!;
+    // The track is drawn twice the size it is laid out at (a zoom or a
+    // scale on any ancestor), so 100 drawn px are 50 of the track's own.
+    Object.defineProperty(track, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({ left: 0, top: 0, width: 200, height: 200, right: 200, bottom: 200, x: 0, y: 0 }) as DOMRect,
+    });
+    Object.defineProperty(track, "offsetWidth", { configurable: true, get: () => 100 });
+    Object.defineProperty(track, "offsetHeight", { configurable: true, get: () => 100 });
+    Object.defineProperty(track, "clientHeight", { configurable: true, get: () => 100 });
+    Object.defineProperty(track, "clientWidth", { configurable: true, get: () => 100 });
+
+    thumb.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, clientY: 0 }));
+    // 50 of the track's own px over a 75px range maps onto 300 scroll px.
+    document.dispatchEvent(new MouseEvent("mousemove", { clientY: 100 }));
+    expect(viewport.scrollTop, "half the track, half the range").toBe(200);
+    document.dispatchEvent(new MouseEvent("mouseup"));
+  });
+
   it("pages when the track (not the thumb) is clicked", () => {
     const { viewport, wrapper, handle } = mountViewport("vertical");
     stubGeometry(viewport, {

package/src/composables/useOverlayScrollbar.ts

@@ -23,6 +23,7 @@
 // Works inside teleported popups/modals: attach on mount/open and call
 // `detach()` on close/unmount so no DOM or listener leaks.
 
+import { drawnScale } from "./layoutGeometry";
 import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
 import { scheduleFrame, type AnimationHandle } from "../runtime/animationBus";
 
@@ -199,7 +200,14 @@ export function attachOverlayScrollbars(
     const onMove = (e: MouseEvent) => {
       if (!s.dragging) return;
       const { scrollSize, clientSize } = axisMetrics(viewport, horizontal);
-      const delta = (horizontal ? e.clientX : e.clientY) - s.dragStartClient;
+      // The pointer moves in DRAWN pixels while the track it is compared
+      // against is laid out, so the delta is converted into the track's own
+      // units first: a scaled or zoomed root would otherwise slide the thumb
+      // `k` times further than the pointer went (see `layoutGeometry`).
+      const drawnDelta = (horizontal ? e.clientX : e.clientY) - s.dragStartClient;
+      const space = drawnScale(s.track);
+      const factor = horizontal ? space.x : space.y;
+      const delta = factor > 0 ? drawnDelta / factor : drawnDelta;
       // Mirror updateAxis's RENDER math exactly — the thumb is sized
       // against the TRACK box, so drag travel must divide by the same
       // numbers or the thumb slides out of sync under short tracks.

package/src/composables/usePointerReorder.test.ts

@@ -1395,9 +1395,12 @@ describe("usePointerReorder", () => {
       { left: 100, right: 150, top: 0, bottom: 40 },
     ]);
     move(140, 20);
-    expect(handle.dragOver.value, "a chip with no height has no line to stand on").toBe(1);
+    // Each half comes from the freshest source that can place it: a chip
+    // collapsed to no height has no line to read, so the line stays the one
+    // the press found, while its position along the strip is read live.
+    expect(handle.dragOver.value, "the position follows the layout").toBe(2);
     up(140, 20);
-    expect(drops).toEqual([]);
+    expect(drops).toEqual([[1, 2]]);
   });
 
   it("ends the gesture the moment the strip empties", () => {

package/src/composables/usePointerReorder.ts

@@ -1,5 +1,15 @@
 import { getCurrentScope, onScopeDispose, ref, type Ref } from "vue";
 
+import {
+  frameMetrics,
+  frameScale,
+  laidSize,
+  layoutOffset,
+  nearestLaidAncestor,
+  placePoint,
+  type FrameMetrics,
+} from "./layoutGeometry";
+
 /** The axis a reorderable strip flows along: field chips run left to
  *  right, stacked panel rows top to bottom. */
 export type PointerReorderAxis = "x" | "y";
@@ -252,7 +262,7 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
   let pressedBand: { lo: number; hi: number } | null = null;
   let pressedMid = 0;
   let pressedFrame: HTMLElement | null = null;
-  let pressedFrameBox: FrameBox | null = null;
+  let pressedFrameBox: FrameMetrics | null = null;
   /** The very ELEMENT the press landed on. The drag is moved BY element:
    *  the index is re-read from it on every resolution, so a strip that
    *  reorders under the gesture keeps the drop on what the pointer grabbed
@@ -312,156 +322,60 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     );
   }
 
-  /**
-   * Everything the frame says about where it puts a coordinate: the box the
-   *  item is laid out in — where it is drawn (`x`/`y`), how big it is drawn
-   *  (`w`/`h`) and how big it is LAID OUT (`laidW`/`laidH`, which no
-   *  transform touches, so the two together are the scale it is drawn at) —
-   *  and the scroll that slides its children inside that box.
-   */
-  interface FrameBox {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    laidW: number;
-    laidH: number;
-    scrollX: number;
-    scrollY: number;
-  }
-
-  /** The nearest ancestor of `item` that is actually LAID OUT. A snapshot
-   *  can only be carried in a frame that has a box to move it: an element
-   *  with `display: contents` generates none, and its children are laid out
-   *  by the next box up — which is the frame whose movement they follow. A
-   *  tree with no boxes anywhere (no layout engine at all, a test
-   *  environment) walks out of ancestors and keeps the parent it started
-   *  with. */
-  function layoutFrameOf(item: HTMLElement): HTMLElement | null {
-    for (let el = item.parentElement; el; el = el.parentElement) {
-      const rect = el.getBoundingClientRect();
-      if (rect.width > 0 || rect.height > 0 || el.offsetWidth > 0 || el.offsetHeight > 0) return el;
-    }
-    return item.parentElement;
-  }
-
-  /** Read the frame as it is right now (see `FrameBox`). */
-  function frameBox(frame: HTMLElement): FrameBox {
-    const rect = frame.getBoundingClientRect();
-    return {
-      x: rect.left,
-      y: rect.top,
-      w: rect.width,
-      h: rect.height,
-      laidW: frame.offsetWidth,
-      laidH: frame.offsetHeight,
-      scrollX: frame.scrollLeft,
-      scrollY: frame.scrollTop,
-    };
-  }
-
-  /** Where an element's border box sits in a space its ancestors share: the
-   *  one number CSS transforms do not touch. `offsetLeft`/`offsetTop` are
-   *  LAYOUT positions — the drag's own lift, a host `scale()`, a FLIP
-   *  animation and a transition mid-flight all leave them exactly where they
-   *  were — so walking the offsetParent chain of the item and of its frame
-   *  and subtracting gives the item's current place inside the frame however
-   *  it is drawn. Both sides are walked to the same root, so a frame that is
-   *  not itself an offsetParent (a static frame) cancels exactly.
-   *
-   *  `through` reports whether the walk passed THROUGH the frame, which is
-   *  what decides how the two differ: an offset is measured from the
-   *  offsetParent's PADDING edge, so a chain that runs through the frame
-   *  leaves the difference measured from the frame's padding box (its border
-   *  has to be added back), while a chain that skips it — a frame that is
-   *  `position: static` is nobody's offsetParent — leaves the difference
-   *  measured from the frame's BORDER box, where adding the border again
-   *  would double-count it.
-   *
-   *  The chain must be walked LIVE: a transform (or even
-   *  `will-change: transform`) on an ancestor rebinds `offsetParent`. */
-  function layoutOffset(
-    el: HTMLElement,
-    frame: HTMLElement | null,
-  ): { x: number; y: number; through: boolean } {
-    let x = 0;
-    let y = 0;
-    let through = false;
-    for (let node: HTMLElement | null = el; node; node = node.offsetParent as HTMLElement | null) {
-      x += node.offsetLeft;
-      y += node.offsetTop;
-      if (node === frame) through = true;
-    }
-    return { x, y, through };
-  }
-
   /** The pressed item's layout geometry read off the LIVE strip rather than
    *  carried from the press — the answer to "where is the item I am holding
    *  NOW?", which is what changes when the list reorders, an item is added or
    *  removed around it, a font or a zoom changes, or the strip re-wraps.
-   *  `null` when there is no box to read (no layout engine at all, a detached
-   *  element, a collapsed or partially-readable one), which keeps the caller
-   *  on the carried snapshot. */
-  function derivedOrigin(): PointerReorderOrigin | null {
-    if (!pressedItem || !pressedFrame || !pressedFrame.isConnected) return null;
-    const box = frameBox(pressedFrame);
-    const itemW = pressedItem.offsetWidth;
-    const itemH = pressedItem.offsetHeight;
-    if (!(itemW > 0) || !(itemH > 0)) return null;
-    if (!(box.w > 0) || !(box.h > 0)) return null;
+   *
+   *  The two halves are read SEPARATELY: the line the item is on needs the
+   *  cross axis to be expressible, the position along it needs the main axis,
+   *  and a strip whose frame draws no size on one of them can still answer
+   *  the other (the caller keeps the carried snapshot for whichever half
+   *  cannot be placed). A chain that cannot be added up at all — it runs
+   *  through something without offsets of its own, like an element inside
+   *  `<svg>` — leaves both `null`. */
+  function derivedGeometry(): { band: { lo: number; hi: number } | null; mid: number | null } {
+    const nothing = { band: null, mid: null } as const;
+    if (!pressedItem || !pressedFrame || !pressedFrame.isConnected) return nothing;
+    const box = frameMetrics(pressedFrame);
     const at = layoutOffset(pressedItem, pressedFrame);
     const of = layoutOffset(pressedFrame, null);
-    // A chain that runs through something without layout offsets of its own
-    // (an SVG ancestor, a foreignObject boundary) sums to NaN rather than
-    // failing: nothing can be placed from it, so the snapshot keeps the call.
-    if (!Number.isFinite(at.x) || !Number.isFinite(at.y)) return null;
-    if (!Number.isFinite(of.x) || !Number.isFinite(of.y)) return null;
-    const scaleX = box.laidW > 0 ? box.w / box.laidW : 1;
-    const scaleY = box.laidH > 0 ? box.h / box.laidH : 1;
-    /** The frame's own border, in the units it is DRAWN at — and only when
-     *  the walk into the frame came through it (`through`). */
-    const style = getComputedStyle(pressedFrame);
-    const borderLeft = at.through ? (parseFloat(style.borderLeftWidth) || 0) * scaleX : 0;
-    const borderTop = at.through ? (parseFloat(style.borderTopWidth) || 0) * scaleY : 0;
-    const left = box.x + borderLeft + (at.x - of.x - box.scrollX) * scaleX;
-    const top = box.y + borderTop + (at.y - of.y - box.scrollY) * scaleY;
-    const width = itemW * scaleX;
-    const height = itemH * scaleY;
-    return axis === "x"
-      ? { band: { lo: top, hi: top + height }, mid: left + width / 2 }
-      : { band: { lo: left, hi: left + width }, mid: top + height / 2 };
+    if (!Number.isFinite(at.x) || !Number.isFinite(at.y)) return nothing;
+    if (!Number.isFinite(of.x) || !Number.isFinite(of.y)) return nothing;
+    const size = laidSize(pressedItem);
+    // Where the frame draws the item's laid-out origin, and how big it draws
+    // what the item laid out there.
+    const drawn = placePoint(pressedFrame, box, at, of);
+    const scale = frameScale(box);
+    const itemW = size.w * scale.x;
+    const itemH = size.h * scale.y;
+    // Along the strip (`axis`) versus across it.
+    const drawnAlong = axis === "x" ? box.w : box.h;
+    const drawnAcross = axis === "x" ? box.h : box.w;
+    const itemAlong = axis === "x" ? size.w : size.h;
+    const itemAcross = axis === "x" ? size.h : size.w;
+    return {
+      // The line the item is on needs a cross-axis extent on both sides; the
+      // position along the strip needs a main-axis one. A strip that draws no
+      // size on one of them still answers the other (`layoutOrigin`).
+      band:
+        drawnAcross > 0 && itemAcross > 0
+          ? axis === "x"
+            ? { lo: drawn.y, hi: drawn.y + itemH }
+            : { lo: drawn.x, hi: drawn.x + itemW }
+          : null,
+      mid:
+        drawnAlong > 0 && itemAlong > 0
+          ? axis === "x"
+            ? drawn.x + itemW / 2
+            : drawn.y + itemH / 2
+          : null,
+    };
   }
 
-  /** The pressed item's layout geometry for `indexAt`, placed where the
-   *  frame puts it NOW. The snapshot is in VIEWPORT coordinates, so anything
-   *  that moves the frame under it — the auto-scroll this composable drives,
-   *  a host scrolling the surface or any scroller above it, a page scroll, a
-   *  re-parent, a transform on the frame or on an ancestor — has to be
-   *  carried with it, or the line the item was laid out on would be compared
-   *  against siblings that have since moved away from it. `null` before any
-   *  press, and for a press whose item was not in the strip.
-   *
-   *  The carrier is the frame's own reading of a coordinate: the snapshot
-   *  travels to wherever the frame puts that same place in its layout now,
-   *  which is exact for the three things that can move it —
-   *
-   *   - a DISPLACEMENT of the frame (a page scroll, a re-parent, a
-   *     translation) moves the snapshot by the same amount;
-   *   - the frame's own SCROLL slides its children inside a box that does not
-   *     move, so it is taken off inside the frame's own units rather than in
-   *     drawn pixels (`sample`);
-   *   - a `scale()` or a zoom — on the frame or on an ancestor — keeps the
-   *     snapshot at the same place INSIDE the frame, which is what the frame
-   *     does to everything it holds, so the placement scales with it.
-   *
-   *  A frame with no box to read any of this from falls back to the plain
-   *  displacement. */
-  function layoutOrigin(): PointerReorderOrigin | null {
-    const live = derivedOrigin();
-    if (live) return live;
-    if (!pressedBand || !pressedFrameBox) return null;
-    const at = pressedFrameBox;
-    const now = pressedFrame && pressedFrame.isConnected ? frameBox(pressedFrame) : at;
+  function carriedOrigin(): PointerReorderOrigin {
+    const at = pressedFrameBox as FrameMetrics;
+    const now = pressedFrame && pressedFrame.isConnected ? frameMetrics(pressedFrame) : at;
     /** Where the frame draws a coordinate it drew at `from` when the press
      *  was read: how far it sat from the frame's content origin, taken
      *  against the scroll the frame has moved since, drawn again at the
@@ -489,11 +403,33 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
       return to + ratio * (value - from) + (scrollFrom - scrollTo);
     };
     const down = axis === "x" ? "y" : "x";
-    const lo = carry(pressedBand.lo, down);
-    const hi = carry(pressedBand.hi, down);
+    const lo = carry(pressedBandLo(), down);
+    const hi = carry(pressedBandHi(), down);
     return { band: { lo, hi }, mid: carry(pressedMid, axis) };
   }
 
+  function layoutOrigin(): PointerReorderOrigin | null {
+    const live = derivedGeometry();
+    if (!pressedBand || !pressedFrameBox) {
+      // Nothing carried to fall back on: only a complete reading places it.
+      return live.band && live.mid !== null ? { band: live.band, mid: live.mid } : null;
+    }
+    const carried = carriedOrigin();
+    return {
+      band: live.band ?? carried.band,
+      mid: live.mid ?? carried.mid,
+    };
+  }
+
+  /** The pressed item's own band, for the callers that know a press is live. */
+  function pressedBandLo(): number {
+    return pressedBand ? pressedBand.lo : 0;
+  }
+
+  function pressedBandHi(): number {
+    return pressedBand ? pressedBand.hi : 0;
+  }
+
   /** The pointer's coordinates split by axis: the position along the strip
    *  and the position across it. */
   function pointerAt(event: PointerEvent): { main: number; cross: number } {
@@ -741,8 +677,8 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
         ? rect.left + rect.width / 2
         : rect.top + rect.height / 2
       : 0;
-    pressedFrame = item ? layoutFrameOf(item) : null;
-    pressedFrameBox = pressedFrame ? frameBox(pressedFrame) : null;
+    pressedFrame = item ? nearestLaidAncestor(item) : null;
+    pressedFrameBox = pressedFrame ? frameMetrics(pressedFrame) : null;
     pressedItem = item ?? null;
     originX = event.clientX;
     originY = event.clientY;