@celestia-island/hikari 0.43.4 → 0.43.6

package/package.json

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

package/src/components/HkDraggableGrid.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, onBeforeUnmount, ref, shallowRef, watch, type PropType } from "vue";
 import { onceFrame } from "../runtime/animationBus";
 import { useReportedTransition } from "../composables/useReportedTransition";
+import { ancestorZoom } from "../runtime/cssZoom";
 import "./HkDraggableGrid.scss";
 
 const MAX_COLS = 3;
@@ -114,8 +115,14 @@ export default defineComponent({
       const node = document.createElement("div");
       node.className = "hk-draggable-grid-ghost";
       node.innerHTML = html;
-      node.style.width = `${sourceRect.width}px`;
-      node.style.transform = `translate3d(${sourceRect.left}px, ${sourceRect.top}px, 0)`;
+      // The ghost is appended to <body> — inside any root CSS zoom
+      // subtree — so its px are LOCAL while sourceRect (gBCR) reports the
+      // root VISUAL space (standardized zoom applies ancestor zoom).
+      // Divide at the write layer or the ghost paints zoom× too large and
+      // zoom× off the pointer (chest's root-level manual DPI scale).
+      const z = ancestorZoom(document.body);
+      node.style.width = `${sourceRect.width / z}px`;
+      node.style.transform = `translate3d(${sourceRect.left / z}px, ${sourceRect.top / z}px, 0)`;
       node.style.pointerEvents = "none";
       document.body.appendChild(node);
       ghostNode = node;
@@ -131,8 +138,12 @@ export default defineComponent({
     function moveGhost(clientX: number, clientY: number) {
       const s = drag.value;
       if (!s || !ghostNode) return;
-      const gx = clientX - s.grabOffsetX;
-      const gy = clientY - s.grabOffsetY;
+      // gx/gy are the ghost's visual top-left (client coords minus the
+      // visual grab offset); the teleported ghost paints local px scaled
+      // by the cumulative zoom — divide once at the write layer.
+      const z = ancestorZoom(document.body);
+      const gx = (clientX - s.grabOffsetX) / z;
+      const gy = (clientY - s.grabOffsetY) / z;
       ghostNode.style.transform = `translate3d(${gx}px, ${gy}px, 0)`;
     }
 

package/src/components/HkDraggableList.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, onBeforeUnmount, ref, shallowRef, type PropType } from "vue";
 import { onceFrame } from "../runtime/animationBus";
 import { useReportedTransition } from "../composables/useReportedTransition";
+import { ancestorZoom } from "../runtime/cssZoom";
 import "./HkDraggableList.scss";
 
 export interface DragListItem {
@@ -96,8 +97,14 @@ export default defineComponent({
       const node = document.createElement("div");
       node.className = "hk-draggable-list-ghost";
       node.innerHTML = html;
-      node.style.width = `${sourceRect.width}px`;
-      node.style.transform = `translate3d(${sourceRect.left}px, ${sourceRect.top}px, 0)`;
+      // The ghost is appended to <body> — inside any root CSS zoom
+      // subtree — so its px are LOCAL while sourceRect (gBCR) reports the
+      // root VISUAL space (standardized zoom applies ancestor zoom).
+      // Divide at the write layer or the ghost paints zoom× too large and
+      // zoom× off the pointer (chest's root-level manual DPI scale).
+      const z = ancestorZoom(document.body);
+      node.style.width = `${sourceRect.width / z}px`;
+      node.style.transform = `translate3d(${sourceRect.left / z}px, ${sourceRect.top / z}px, 0)`;
       node.style.pointerEvents = "none";
       document.body.appendChild(node);
       ghostNode = node;
@@ -113,8 +120,12 @@ export default defineComponent({
     function moveGhost(clientY: number) {
       const s = drag.value;
       if (!s || !ghostNode) return;
-      const gx = s.originX - s.grabOffsetX;
-      const gy = clientY - s.grabOffsetY;
+      // gx/gy are the ghost's visual top-left (client coords minus the
+      // visual grab offset); the teleported ghost paints local px scaled
+      // by the cumulative zoom — divide once at the write layer.
+      const z = ancestorZoom(document.body);
+      const gx = (s.originX - s.grabOffsetX) / z;
+      const gy = (clientY - s.grabOffsetY) / z;
       ghostNode.style.transform = `translate3d(${gx}px, ${gy}px, 0)`;
     }
 

package/src/components/HkMenu.tsx

@@ -13,6 +13,7 @@ import {
 import { Check, ChevronRight } from "lucide-vue-next";
 
 import { useBreakpoint } from "../runtime/useBreakpoint";
+import { ancestorZoom } from "../runtime/cssZoom";
 import HkSelectPanel, { type SelectPanelPlacement } from "./HkSelectPanel";
 import "./HkMenu.scss";
 
@@ -398,7 +399,11 @@ export default defineComponent({
     /** Synthetic anchor placing a sub-panel beside its parent row:
      *  popout to the right, flipping to the left when the viewport runs
      *  out (classic menubar cascade). The rect stays LIVE — HkSelectPanel
-     *  re-reads it on every reposition (open, resize). */
+     *  re-reads it on every reposition (open, resize). The fixed panel
+     *  width is a LOCAL constant while the row rect and the viewport are
+     *  in the root VISUAL space (standardized zoom applies ancestor zoom
+     *  to gBCR and innerWidth alike), so the width is scaled by the
+     *  cumulative zoom before the flip comparison. */
     function rowAnchor(level: number, key: string): PanelAnchor {
       const id = `${level}:${key}`;
       let anchor = anchorCache.get(id);
@@ -409,8 +414,9 @@ export default defineComponent({
             if (!row) return pointRect(0, 0);
             const r = row.getBoundingClientRect();
             if (!r.width && !r.height) return pointRect(0, 0); // detached
-            const openRight = r.right + CASCADE_PANEL_W <= window.innerWidth - VIEWPORT_PAD;
-            const left = openRight ? r.right : Math.max(VIEWPORT_PAD, r.left - CASCADE_PANEL_W);
+            const cascadeW = CASCADE_PANEL_W * ancestorZoom(document.body);
+            const openRight = r.right + cascadeW <= window.innerWidth - VIEWPORT_PAD;
+            const left = openRight ? r.right : Math.max(VIEWPORT_PAD, r.left - cascadeW);
             return pointRect(left, r.top);
           },
           contains: (node) => !!rowRefs.value[id]?.contains(node),
@@ -430,12 +436,13 @@ export default defineComponent({
           if (!real) return pointRect(0, 0);
           const r = real.getBoundingClientRect();
           if (!r.width && !r.height) return pointRect(0, 0);
-          const gap = props.offset;
-          const openRight = r.right + gap + CASCADE_PANEL_W <= window.innerWidth - VIEWPORT_PAD;
+          const gap = props.offset; // visual-space gap, same as the native placements
+          const cascadeW = CASCADE_PANEL_W * ancestorZoom(document.body);
+          const openRight = r.right + gap + cascadeW <= window.innerWidth - VIEWPORT_PAD;
           const left =
             side === "right" && openRight
               ? r.right + gap
-              : Math.max(VIEWPORT_PAD, r.left - CASCADE_PANEL_W - gap);
+              : Math.max(VIEWPORT_PAD, r.left - cascadeW - gap);
           return pointRect(left, r.top);
         },
         contains: (node) => !!props.anchorRef?.contains(node),

package/src/components/HkModalBreadcrumb.tsx

@@ -3,6 +3,7 @@ import { usePopupManager, type PopupEntry } from "../runtime/usePopupManager";
 import { useI18n } from "../i18n/context";
 import { useReportedTransition } from "../composables/useReportedTransition";
 import { scheduleEvery } from "../runtime/animationBus";
+import { ancestorZoom } from "../runtime/cssZoom";
 import "./HkModalBreadcrumb.scss";
 
 /** Window kinds always participate in the stack: modals and drawers block
@@ -59,9 +60,24 @@ export default defineComponent({
     function resyncTop() {
       const app = document.getElementById(props.appRootId);
       if (!app) return;
+      // The strip teleports to <body> — inside any root CSS zoom subtree
+      // — so its inline top is LOCAL px. Keep every term in that local
+      // space: the app root's computed top is already local, while the
+      // header's gBCR height reports the root VISUAL space (standardized
+      // zoom applies ancestor zoom), so it comes back divided by the
+      // cumulative zoom. Without the conversion the strip drifts
+      // (zoom-1)·headerHeight/2 down its window (chest's root-level
+      // manual DPI scale). The fallback height is a layout constant and
+      // stays local.
       const appTop = parseFloat(getComputedStyle(app).top) || 0;
       const header = app.querySelector(props.headerSelector) as HTMLElement | null;
-      const headerH = header ? header.getBoundingClientRect().height : props.headerFallbackHeight;
+      // Measure the zoom AT the header (not just the root): the header's
+      // gBCR carries the zoom of every ancestor between it and the root,
+      // so the conversion factor is read from the same chain.
+      const z = ancestorZoom(header ?? document.body);
+      const headerH = header
+        ? header.getBoundingClientRect().height / z
+        : props.headerFallbackHeight;
       topPx.value = appTop + headerH / 2;
     }
 

package/src/components/HkPopover.rootzoom.test.tsx

@@ -0,0 +1,154 @@
+/**
+ * Regression rig for popover anchoring under standardized CSS zoom
+ * (chest's root-level manual DPI scale): the anchor rect comes back in
+ * the root VISUAL space (zoom already applied) while the teleported
+ * fixed host lives inside the zoomed subtree and paints its px scaled
+ * back up. The host style must carry the VISUAL coords DIVIDED by the
+ * cumulative zoom — at a 300% root zoom the theme menu used to open
+ * three viewport-widths off screen and a top-anchored sheet floated a
+ * zoom× gap above its footer bar.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkPopover from "./HkPopover";
+
+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();
+  document.body
+    .querySelectorAll(".hk-popover-panel, .hk-popover-scrim")
+    .forEach((el) => el.remove());
+  vi.restoreAllMocks();
+});
+
+function rect(x: number, y: number, w: number, h: number): DOMRect {
+  return { x, y, width: w, height: h, top: y, left: x, right: x + w, bottom: y + h, toJSON: () => ({}) } as DOMRect;
+}
+
+/** Report `zoom` on the document element, nothing elsewhere. */
+function patchRootZoom(zoom: string) {
+  const original = window.getComputedStyle.bind(window);
+  vi.spyOn(window, "getComputedStyle").mockImplementation(
+    (el: Element, pseudo?: string | null): CSSStyleDeclaration => {
+      const decl = original(el, pseudo ?? undefined);
+      return new Proxy(decl, {
+        get(target, prop, recv) {
+          if (prop === "zoom") return el === document.documentElement ? zoom : undefined;
+          const v = Reflect.get(target, prop, recv);
+          return typeof v === "function" ? (v as (...a: unknown[]) => unknown).bind(target) : v;
+        },
+      });
+    },
+  );
+}
+
+/** gBCR rig: the anchor answers with a fixed visual rect, the teleported
+ *  popover panel with its own, everything else with an empty rect. */
+function patchRects(anchor: HTMLElement, anchorRect: DOMRect, panelRect: DOMRect) {
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (this: HTMLElement) {
+    if (this === anchor) return anchorRect;
+    if (this.classList.contains("hk-popover-panel")) return panelRect;
+    return rect(0, 0, 0, 0);
+  });
+}
+
+async function flushFrames() {
+  await nextTick();
+  for (let i = 0; i < 3; i++) {
+    await new Promise((r) => setTimeout(r, 0));
+    await new Promise((r) => requestAnimationFrame(() => r(null)));
+  }
+}
+
+function mountPopover(anchor: HTMLElement, placement: "bottom" | "top-start" = "bottom") {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+  anchor.textContent = "anchor";
+  container.appendChild(anchor);
+
+  const open = ref(false);
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkPopover, {
+          modelValue: open.value,
+          "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+          anchorRef: anchor,
+          placement,
+        }, { default: () => h("div", { class: "pop-content" }, "content") });
+    },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+  return open;
+}
+
+const ANCHOR = { x: 100, y: 20, w: 80, h: 32 };
+const PANEL = { x: 0, y: 0, w: 200, h: 100 };
+
+describe("HkPopover anchoring under root CSS zoom", () => {
+  it("writes visual px verbatim at zoom 1 (identity)", async () => {
+    window.innerWidth = 1200;
+    window.innerHeight = 800;
+    patchRootZoom("1");
+    const anchor = document.createElement("button");
+    patchRects(anchor, rect(ANCHOR.x, ANCHOR.y, ANCHOR.w, ANCHOR.h), rect(PANEL.x, PANEL.y, PANEL.w, PANEL.h));
+    const open = mountPopover(anchor);
+
+    open.value = true;
+    await flushFrames();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-popover-panel")!.parentElement!;
+    // crossPos = 100 + (80-200)/2 = 40 (clamped ≥8), top = 32+4 = 56 —
+    // zoom 1 divides by 1, so the legacy values survive unchanged.
+    expect(host.style.top).toBe("56px");
+    expect(host.style.left).toBe("40px");
+  });
+
+  it("divides the fixed coords by the cumulative root zoom", async () => {
+    window.innerWidth = 1200;
+    window.innerHeight = 800;
+    patchRootZoom("2");
+    const anchor = document.createElement("button");
+    patchRects(anchor, rect(ANCHOR.x, ANCHOR.y, ANCHOR.w, ANCHOR.h), rect(PANEL.x, PANEL.y, PANEL.w, PANEL.h));
+    const open = mountPopover(anchor);
+
+    open.value = true;
+    await flushFrames();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-popover-panel")!.parentElement!;
+    // Same visual target as above, written in the host's local space so
+    // the paint-time zoom multiplication lands the panel back at the
+    // anchor: 56/2 = 28, 40/2 = 20.
+    expect(host.style.top).toBe("28px");
+    expect(host.style.left).toBe("20px");
+  });
+
+  it("divides a top-anchored placement's bottom offset by the zoom", async () => {
+    window.innerWidth = 1200;
+    window.innerHeight = 800;
+    patchRootZoom("3");
+    const anchor = document.createElement("button");
+    // Footer bar: 60px tall at the viewport bottom edge in VISUAL px.
+    patchRects(anchor, rect(20, 740, 120, 60), rect(0, 400, 240, 90));
+    const open = mountPopover(anchor, "top-start");
+
+    open.value = true;
+    await flushFrames();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-popover-panel")!.parentElement!;
+    // bottom = vh - anchor.top + off = 800 - 740 + 4 = 64 (clamped ≤ 702)
+    // → the panel's bottom edge sits 64 visual px above the viewport
+    // bottom (4px gap over the bar); start align → left = anchor.left
+    // = 20 (inside the pad clamp). Written divided by 3 to survive the
+    // ×3 paint scale.
+    expect(parseFloat(host.style.bottom)).toBeCloseTo(64 / 3, 2);
+    expect(parseFloat(host.style.left)).toBeCloseTo(20 / 3, 2);
+  });
+});

package/src/components/HkPopover.tsx

@@ -14,6 +14,7 @@ import {
 
 import { usePopupManager, type PopupHandle } from "../runtime/usePopupManager";
 import { useBreakpoint } from "../runtime/useBreakpoint";
+import { ancestorZoom } from "../runtime/cssZoom";
 import { useI18n } from "../i18n/context";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
@@ -557,12 +558,27 @@ export default defineComponent({
           zIndex: panelZ.value,
         };
       }
+      // Anchored coords are measured in the ROOT VISUAL space (gBCR under
+      // standardized CSS zoom reports ancestor zoom already applied), but
+      // this fixed host lives inside the zoomed subtree, so the browser
+      // scales its px back up at paint. Writing visual px verbatim landed
+      // every popup zoom× away from its anchor (chest's root-level DPI
+      // scale: a 300% menu opened three viewport-widths off screen; a
+      // top-anchored popover floated a zoom× gap above its footer bar).
+      // Divide once at the write layer — the measurement, flip and clamp
+      // math above stays in the visual space it was computed in. The
+      // anchored branch is edge-anchored (0 / custom property) and needs
+      // none. Known limit: nothing observes a root-zoom change while the
+      // popover is open (resize/RO/reopen all recompute) — transient
+      // surfaces reopen correct, so no zoom watcher is wired.
+      const z = ancestorZoom(panelHostRef.value ?? document.body);
       const c = coords.value;
+      const localPx = (v: number) => `${v / z}px`;
       return {
-        ...(c.top != null ? { top: `${c.top}px` } : {}),
-        ...(c.left != null ? { left: `${c.left}px` } : {}),
-        ...(c.bottom != null ? { bottom: `${c.bottom}px` } : {}),
-        ...(c.right != null ? { right: `${c.right}px` } : {}),
+        ...(c.top != null ? { top: localPx(c.top) } : {}),
+        ...(c.left != null ? { left: localPx(c.left) } : {}),
+        ...(c.bottom != null ? { bottom: localPx(c.bottom) } : {}),
+        ...(c.right != null ? { right: localPx(c.right) } : {}),
         position: "fixed" as const,
         pointerEvents: "auto" as const,
         zIndex: panelZ.value,

package/src/components/HkSelectPanel.rootzoom.test.tsx

@@ -0,0 +1,125 @@
+/**
+ * Regression rig for the select-panel popout under standardized CSS zoom
+ * (chest's root-level manual DPI scale): the anchor gBCR and the clamp
+ * viewport live in the root VISUAL space, the teleported fixed host
+ * paints its local px scaled by the cumulative zoom, and the panel's
+ * offsetWidth stays local — positionPanel must multiply the panel size
+ * into visual space for the flip/clamp math and divide the written px
+ * back to local, or every dropdown lands zoom× away from its trigger.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import type { ComponentPublicInstance } from "vue";
+
+import HkSelectPanel from "./HkSelectPanel";
+
+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();
+  document.body
+    .querySelectorAll(".hk-select-popout, .hk-select-popout-host, .hk-select-sheet-panel, .hk-select-sheet-scrim")
+    .forEach((el) => el.remove());
+  vi.restoreAllMocks();
+  window.innerWidth = 1200;
+});
+
+function rect(x: number, y: number, w: number, h: number): DOMRect {
+  return { x, y, width: w, height: h, top: y, left: x, right: x + w, bottom: y + h, toJSON: () => ({}) } as DOMRect;
+}
+
+function patchRootZoom(zoom: string) {
+  const original = window.getComputedStyle.bind(window);
+  vi.spyOn(window, "getComputedStyle").mockImplementation(
+    (el: Element, pseudo?: string | null): CSSStyleDeclaration => {
+      const decl = original(el, pseudo ?? undefined);
+      return new Proxy(decl, {
+        get(target, prop, recv) {
+          if (prop === "zoom") return el === document.documentElement ? zoom : undefined;
+          const v = Reflect.get(target, prop, recv);
+          return typeof v === "function" ? (v as (...a: unknown[]) => unknown).bind(target) : v;
+        },
+      });
+    },
+  );
+}
+
+function mountPanel() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const open = ref(false);
+  const anchorEl = ref<HTMLElement | null>(null);
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h("div", [
+          h("button", {
+            ref: (el: Element | ComponentPublicInstance | null) => {
+              anchorEl.value = el as HTMLElement | null;
+            },
+            type: "button",
+            onClick: () => { open.value = !open.value; },
+          }, "filter"),
+          h(HkSelectPanel, {
+            open: open.value,
+            "onUpdate:open": (v: boolean) => { open.value = v; },
+            anchorRef: anchorEl.value,
+            title: "Filters",
+            placement: "top-start",
+          }, {
+            default: () => [h("label", { class: "row" }, "a"), h("label", { class: "row" }, "b")],
+          }),
+        ]);
+    },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+  return { open, button: container.querySelector<HTMLButtonElement>("button")! };
+}
+
+async function flush() {
+  await nextTick();
+  await nextTick();
+  await new Promise((r) => setTimeout(r, 0));
+}
+
+describe("HkSelectPanel popout under root CSS zoom", () => {
+  // Anchor mid-viewport, panel size unmeasurable in happy-dom (offsetWidth
+  // 0) → pw falls back to max(anchorWidth,180)=180, ph to 200.
+  const ANCHOR = { x: 200, y: 300, w: 100, h: 40 };
+
+  it("writes visual px verbatim at zoom 1 (identity)", async () => {
+    window.innerWidth = 1200;
+    patchRootZoom("1");
+    const { button } = mountPanel();
+    vi.spyOn(button, "getBoundingClientRect").mockReturnValue(rect(ANCHOR.x, ANCHOR.y, ANCHOR.w, ANCHOR.h));
+
+    button.click();
+    await flush();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    // top = 300 - 4 - 200 = 96, left = 200 (start).
+    expect(host.style.top).toBe("96px");
+    expect(host.style.left).toBe("200px");
+  });
+
+  it("divides the written px by the cumulative root zoom", async () => {
+    window.innerWidth = 1200;
+    patchRootZoom("2");
+    const { button } = mountPanel();
+    vi.spyOn(button, "getBoundingClientRect").mockReturnValue(rect(ANCHOR.x, ANCHOR.y, ANCHOR.w, ANCHOR.h));
+
+    button.click();
+    await flush();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    // Same visual target, written in the host's local space: 96/2, 200/2.
+    expect(host.style.top).toBe("48px");
+    expect(host.style.left).toBe("100px");
+  });
+});

package/src/components/HkSelectPanel.tsx

@@ -13,6 +13,7 @@ import { usePopupManager, type PopupHandle } from "../runtime/usePopupManager";
 import { useOverlay } from "../runtime/useOverlay";
 import { useBreakpoint } from "../runtime/useBreakpoint";
 import { createBackGuard } from "../runtime/backStack";
+import { ancestorZoom } from "../runtime/cssZoom";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
@@ -525,9 +526,22 @@ export default defineComponent({
       const anchor = props.anchorRef;
       if (!anchor) return;
       const r = anchor.getBoundingClientRect();
-      // 0 (unstyled/test environments) counts as unmeasured — fall back.
-      const pw = panelRef.value?.offsetWidth || Math.max(r.width, 180);
-      const ph = panelRef.value?.offsetHeight || 200;
+      // The popout host is teleported INSIDE the root zoom subtree: its
+      // inline fixed px are interpreted locally and scaled by the
+      // cumulative CSS zoom at paint, while gBCR rects (anchor r, and the
+      // clamp viewport below) report the ROOT VISUAL space where that
+      // zoom is already applied. Convert both ways at the boundaries —
+      // offsetWidth stays local (and transform-agnostic, unlike gBCR
+      // which would swallow the enter transition's scale) so panel sizes
+      // are multiplied into visual space for the flip/clamp math, and the
+      // final px are divided back to local for the write. Without the
+      // conversion every dropdown lands zoom× away from its trigger
+      // (chest's root-level manual DPI scale).
+      const z = ancestorZoom(popoutHostRef.value ?? document.body);
+      const pwRaw = panelRef.value?.offsetWidth || 0;
+      const phRaw = panelRef.value?.offsetHeight || 0;
+      const pw = pwRaw > 0 ? pwRaw * z : Math.max(r.width, 180);
+      const ph = phRaw > 0 ? phRaw * z : 200;
       let side: "top" | "bottom" = props.placement.startsWith("top-") ? "top" : "bottom";
       let top =
         side === "top"
@@ -566,9 +580,9 @@ export default defineComponent({
       const maxLeft = Math.max(VIEWPORT_PAD, window.innerWidth - VIEWPORT_PAD - pw);
       left = Math.min(Math.max(left, VIEWPORT_PAD), maxLeft);
       coords.value = {
-        top: `${Math.round(top)}px`,
-        left: `${Math.round(left)}px`,
-        ...(props.matchAnchorWidth ? { minWidth: `${Math.round(r.width)}px` } : {}),
+        top: `${Math.round(top / z)}px`,
+        left: `${Math.round(left / z)}px`,
+        ...(props.matchAnchorWidth ? { minWidth: `${Math.round(r.width / z)}px` } : {}),
       };
     }
 

package/src/components/HkThemeToggle.contract.test.ts

@@ -40,4 +40,24 @@ describe("HkThemeToggle row lead-cell contract", () => {
     // target the lead slot class.
     expect(css).not.toMatch(/\.s-theme-item-btn \.hk-menu-item-icon\s*\{/);
   });
+
+  it("aligns the customize row to the lead column without rescaling its glyph", () => {
+    const css = read("HkThemeToggle.scss");
+    // The customize affordance joins the 28px lead column (2026-09-11
+    // field report: its palette sat a full cell left of the rows' bitmap
+    // marks), but the glyph must keep the standard menu icon size —
+    // mi.icon normalizes svg to the cell, so the box is pinned back.
+    const block = css.match(
+      /\.s-theme-item-customize \.hk-menu-item-icon\s*\{[^}]*\}/,
+    );
+    expect(block).not.toBeNull();
+    expect(block![0]).toContain("width: 28px");
+    expect(block![0]).toContain("height: 28px");
+
+    const svgBlock = css.match(
+      /\.s-theme-item-customize \.hk-menu-item-icon > svg\s*\{[^}]*\}/,
+    );
+    expect(svgBlock).not.toBeNull();
+    expect(svgBlock![0]).toContain("var(--hk-menu-item-icon-box)");
+  });
 });

package/src/components/HkThemeToggle.scss

@@ -210,6 +210,26 @@
   height: 28px;
 }
 
+/* The customize affordance joins the theme rows' 28px lead column so the
+ * palette glyph and the row marks sit on one line and every name starts
+ * at the same x (2026-09-11 field report: with the lead cell at 28px and
+ * this row at the generic box, the selected theme's bitmap mark read a
+ * full cell to the right of the customize palette). The cell widens but
+ * the GLYPH keeps the standard menu icon size — mi.icon normalizes svg
+ * to the cell, so the box is pinned back explicitly; widening a cell
+ * must never re-scale its glyph (the 0.42.2 regression class). */
+.s-theme-item-customize .hk-menu-item-icon {
+  @include mi.icon;
+
+  width: 28px;
+  height: 28px;
+}
+
+.s-theme-item-customize .hk-menu-item-icon > svg {
+  width: var(--hk-menu-item-icon-box);
+  height: var(--hk-menu-item-icon-box);
+}
+
 /* Custom rows keep the name clear of the overlaid delete button. */
 .s-theme-item-row[data-custom] .s-theme-item-name {
   margin-right: 2rem;

package/src/components/HkThemeToggle.tsx

@@ -332,7 +332,7 @@ export const HkThemeToggle = defineComponent({
 
             <button
               type="button"
-              class="s-theme-item-btn"
+              class="s-theme-item-btn s-theme-item-customize"
               onClick={() => {
                 menuOpen.value = false;
                 if (props.externalCustomize) {

package/src/components/HkTooltip.tsx

@@ -1,5 +1,6 @@
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, Teleport, type CSSProperties, type PropType } from "vue";
 import { usePopupManager, type PopupHandle } from "../runtime/usePopupManager";
+import { ancestorZoom } from "../runtime/cssZoom";
 import "./HkTooltip.scss";
 
 export default defineComponent({
@@ -33,6 +34,15 @@ export default defineComponent({
       if (!wrapperRef.value) return;
       const rect = wrapperRef.value.getBoundingClientRect();
       const gap = 8;
+      // The tooltip teleports to <body> — inside any root CSS zoom
+      // subtree — while `rect` is already in the root visual space
+      // (standardized zoom reports ancestor zoom applied). The browser
+      // scales the tooltip's local px back up at paint, so the visual
+      // rect values must be written divided by the cumulative zoom or
+      // the tooltip drifts zoom× off its trigger (chest's root-level
+      // manual DPI scale).
+      const z = ancestorZoom(document.body);
+      const local = (v: number) => `${v / z}px`;
       const style: CSSProperties = {};
 
       if (props.maxWidth) {
@@ -41,23 +51,23 @@ export default defineComponent({
 
       switch (props.placement) {
         case "top":
-          style.top = `${rect.top - gap}px`;
-          style.left = `${rect.left + rect.width / 2}px`;
+          style.top = local(rect.top - gap);
+          style.left = local(rect.left + rect.width / 2);
           style.transform = "translate(-50%, -100%)";
           break;
         case "bottom":
-          style.top = `${rect.bottom + gap}px`;
-          style.left = `${rect.left + rect.width / 2}px`;
+          style.top = local(rect.bottom + gap);
+          style.left = local(rect.left + rect.width / 2);
           style.transform = "translate(-50%, 0)";
           break;
         case "left":
-          style.top = `${rect.top + rect.height / 2}px`;
-          style.left = `${rect.left - gap}px`;
+          style.top = local(rect.top + rect.height / 2);
+          style.left = local(rect.left - gap);
           style.transform = "translate(-100%, -50%)";
           break;
         case "right":
-          style.top = `${rect.top + rect.height / 2}px`;
-          style.left = `${rect.right + gap}px`;
+          style.top = local(rect.top + rect.height / 2);
+          style.left = local(rect.right + gap);
           style.transform = "translate(0, -50%)";
           break;
       }

package/src/runtime/cssZoom.test.ts

@@ -0,0 +1,96 @@
+/**
+ * Contract for the cumulative-zoom helper that keeps teleported overlays
+ * anchored under standardized CSS zoom (chest's root-level manual DPI
+ * scale): gBCR reports root VISUAL space while fixed px written inside
+ * the zoomed subtree are local — the helper is the one conversion factor
+ * between the two. It must multiply every explicit zoom along the
+ * element → documentElement chain, ignore links without DOM zoom support
+ * (old engines, happy-dom) or with `normal`/garbage values, and default
+ * to the identity 1 everywhere else.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ancestorZoom } from "./cssZoom";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+/** Patch getComputedStyle so the given elements report a `zoom` value. */
+function patchZoom(map: Map<Element, string>) {
+  const original = window.getComputedStyle.bind(window);
+  vi.spyOn(window, "getComputedStyle").mockImplementation(
+    (el: Element, pseudo?: string | null): CSSStyleDeclaration => {
+      const decl = original(el, pseudo ?? undefined);
+      const zoom = map.get(el);
+      return new Proxy(decl, {
+        get(target, prop, recv) {
+          if (prop === "zoom") return zoom;
+          const v = Reflect.get(target, prop, recv);
+          return typeof v === "function" ? (v as (...a: unknown[]) => unknown).bind(target) : v;
+        },
+      });
+    },
+  );
+}
+
+describe("ancestorZoom", () => {
+  it("returns 1 when no element reports a zoom", () => {
+    patchZoom(new Map());
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    expect(ancestorZoom(el)).toBe(1);
+  });
+
+  it("multiplies the explicit zoom values along the ancestor chain", () => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    patchZoom(
+      new Map([
+        [document.documentElement, "2"],
+        [document.body, "1.5"],
+      ]),
+    );
+    expect(ancestorZoom(el)).toBeCloseTo(3);
+  });
+
+  it("counts only the links between the element and the root", () => {
+    const outer = document.createElement("div");
+    const inner = document.createElement("div");
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+    patchZoom(new Map([[outer, "2"]]));
+    // inner's chain: outer(2) → body → html — the unrelated sibling-zoom
+    // absence below outer stays out.
+    expect(ancestorZoom(inner)).toBe(2);
+    expect(ancestorZoom(outer)).toBe(2);
+  });
+
+  it("ignores normal and unparseable values", () => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    patchZoom(
+      new Map([
+        [document.documentElement, "normal"],
+        [document.body, "zoomed"],
+      ]),
+    );
+    expect(ancestorZoom(el)).toBe(1);
+  });
+
+  it("guards non-positive zoom values", () => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    patchZoom(
+      new Map([
+        [document.documentElement, "0"],
+        [document.body, "-2"],
+      ]),
+    );
+    expect(ancestorZoom(el)).toBe(1);
+  });
+
+  it("returns 1 for a null element", () => {
+    expect(ancestorZoom(null)).toBe(1);
+  });
+});

package/src/runtime/cssZoom.ts

@@ -0,0 +1,36 @@
+/**
+ * Effective CSS `zoom` between a teleported overlay element and the
+ * viewport root.
+ *
+ * Standardized CSS zoom (Chrome 128+, Firefox 126+, Safari 18.2+) made
+ * `getBoundingClientRect()` report the ROOT VISUAL space — ancestor zoom
+ * is already multiplied into every rect — while `position: fixed` px
+ * assigned on an element that LIVES inside the zoomed subtree are
+ * interpreted in that element's own local space and scaled back up at
+ * paint. Overlay components that measure anchors with gBCR and position
+ * themselves with fixed px therefore land zoom× away from their anchor
+ * unless the written px are divided by the cumulative zoom (chest's
+ * root-level manual DPI scale is the producer of such subtrees; at a
+ * 300% scale an anchored menu flew three viewport-widths off screen).
+ *
+ * `zoom` is not inherited, so the factor is the product of the explicit
+ * zoom values along the element → documentElement chain. Links without
+ * DOM zoom support (old engines, happy-dom/jsdom), `normal`, garbage or
+ * non-positive numbers contribute nothing; the default stays 1 — the
+ * identity the fixed-positioning math has always assumed. No DOM at all
+ * (SSR guards) also collapses to 1.
+ */
+export function ancestorZoom(el: Element | null | undefined): number {
+  if (typeof window === "undefined" || !el) return 1;
+  let zoom = 1;
+  let cur: Element | null = el;
+  while (cur) {
+    // `zoom` is missing from older DOM style declarations — read it off a
+    // widened record instead of assuming the lib carries the property.
+    const raw = (window.getComputedStyle(cur) as CSSStyleDeclaration & { zoom?: string | number }).zoom;
+    const v = typeof raw === "number" ? raw : typeof raw === "string" ? Number.parseFloat(raw) : Number.NaN;
+    if (Number.isFinite(v) && v > 0) zoom *= v;
+    cur = cur.parentElement;
+  }
+  return zoom > 0 ? zoom : 1;
+}