@celestia-island/hikari 0.43.3 → 0.43.5

package/package.json

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

package/src/components/HkAffixPicker.test.tsx

@@ -444,4 +444,33 @@ describe("HkAffixPicker", () => {
     // CSS/text half of the contract is pinned by the contract test.
     expect(document.querySelector(".hk-affix-list .hk-scrollbar-track")).toBeNull();
   });
+
+  it("caps its popup surface with the tag editor's own measure", async () => {
+    const { container } = mountPicker({ mode: "multi", selected: ["cn"] });
+    await openPopup(container);
+
+    // The picker renders through HkMenu, which forwards a cap to the shared
+    // panel surface: the popup scrolls inside min(18rem, 45dvh) instead of
+    // stretching to the panel's 36rem ceiling — the same measure HkTagInput
+    // uses, so the two sibling chip pickers read consistently.
+    const popout = document.querySelector<HTMLElement>(".hk-select-popout");
+    expect(popout, "the popup renders as the shared popout").toBeTruthy();
+    expect(popout!.style.getPropertyValue("--hk-select-panel-max-height")).toBe(
+      "min(18rem, 45dvh)",
+    );
+    // The cap is the SURFACE's: the popout carries the hook and no inline
+    // max-height of its own…
+    expect(popout!.style.maxHeight).toBe("");
+    // …and the picker still opts out of matching the chip's width.
+    expect(document.querySelector<HTMLElement>(".hk-select-popout-host")!.style.minWidth).toBe(
+      "",
+    );
+
+    // The popup's designed measure is untouched: the content wrapper stays a
+    // plain width container with no cap or scroll region of its own.
+    const content = document.querySelector<HTMLElement>(".hk-affix-scroll");
+    expect(content, "the content wrapper renders").toBeTruthy();
+    expect(content!.hasAttribute("style"), "no inline style on the content").toBe(false);
+    expect(document.querySelector(".hk-affix-list .hk-scrollbar-track")).toBeNull();
+  });
 });

package/src/components/HkAffixPicker.tsx

@@ -72,6 +72,11 @@ function isSubsequence(query: string, text: string): boolean {
  * as one. The row list deliberately carries no max-height/overflow; a
  * nested second scrollbar inside the same window is a contract
  * violation (2026-09-08 user report: the language sheet scrolled twice).
+ * The surface itself is capped at `min(18rem, 45dvh)` through HkMenu's
+ * `maxHeight` forwarding (the HkTagInput measure, so the family reads
+ * consistently), which bounds the one scroll region instead of letting it
+ * stretch to the shared panel's 36rem ceiling. The popup's own designed
+ * measure (13–19rem wide) is unchanged: the cap bounds HEIGHT only.
  *
  * With `tagValues`, the multi picker's TAG LIST switches to
  * value-driven primary text: a selected key renders its mapped value
@@ -368,6 +373,10 @@ export const HkAffixPicker = defineComponent({
             anchorRef={chipRef.value}
             placement={placement}
             matchAnchorWidth={false}
+            // The same cap the tag editor's catalog uses: the popup hugs its
+            // own designed measure instead of stretching to the shared
+            // panel's 36rem ceiling, and a long catalog scrolls inside it.
+            maxHeight="min(18rem, 45dvh)"
             title={title}
           >
             {{

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.test.ts

@@ -345,6 +345,75 @@ describe("HkMenu on the HkSelectPanel surface", () => {
   });
 });
 
+describe("HkMenu surface cap (maxHeight)", () => {
+  const CAP = "min(18rem, 45dvh)";
+
+  it("renders no cap at all when the prop is absent (the additive no-op)", async () => {
+    // Pinned at the DOM level rather than in source text: with no
+    // `maxHeight` the shared panel forwards nothing, so the popout
+    // publishes no hook and carries no inline max-height — every existing
+    // consumer (theme switchers, cascades, the menubar) is untouched.
+    mountMenu(ref(true));
+    await settle();
+    const popout = popouts()[0];
+    expect(popout.style.getPropertyValue("--hk-select-panel-max-height")).toBe("");
+    expect(popout.style.maxHeight).toBe("");
+    expect(popout.hasAttribute("style"), "no inline style at all").toBe(false);
+  });
+
+  it("publishes the cap on the root popout and on every cascade level", async () => {
+    mountMenu(ref(true), siblingItems, {}, { props: { maxHeight: CAP } });
+    await settle();
+    expect(popouts()[0].style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+
+    // A cascade level is its own scroll surface, so it is capped too.
+    rowByLabel("Branch One")!.click();
+    await settle();
+    expect(popouts().length).toBe(2);
+    expect(popouts()[1].style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+
+    // …and the cap follows the cascade to whichever level is open.
+    rowByLabel("Branch Two")!.click();
+    await settle();
+    expect(popouts().length).toBe(2);
+    expect(popouts()[1].textContent).toContain("Two A");
+    expect(popouts()[1].style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+
+    // Height only: the cap never touches the popout's width contract.
+    expect(popoutHosts()[0].style.minWidth).toBe("");
+  });
+
+  it("caps the mobile sheet path — on the band that actually scrolls", async () => {
+    window.innerWidth = 390;
+    mountMenu(ref(true), siblingItems, {}, { props: { maxHeight: CAP } });
+    await settle();
+    expect(sheets().length).toBe(1);
+
+    // In sheet mode the element the panel caps (and the one that scrolls) is
+    // the list band inside the sheet, not the sheet panel itself.
+    const band = sheets()[0].querySelector<HTMLElement>(".hk-select-sheet-list");
+    expect(band, "the sheet list band renders").toBeTruthy();
+    expect(band!.style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+
+    rowByLabel("Branch One")!.click();
+    await settle();
+    expect(sheets().length).toBe(2);
+    const subBand = sheets()[1].querySelector<HTMLElement>(".hk-select-sheet-list");
+    expect(subBand, "the pushed sheet's band renders").toBeTruthy();
+    expect(subBand!.style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+  });
+
+  it("leaves the mobile sheet band uncapped when the prop is absent", async () => {
+    window.innerWidth = 390;
+    mountMenu(ref(true), siblingItems);
+    await settle();
+    const band = sheets()[0].querySelector<HTMLElement>(".hk-select-sheet-list");
+    expect(band, "the sheet list band renders").toBeTruthy();
+    expect(band!.style.getPropertyValue("--hk-select-panel-max-height")).toBe("");
+    expect(band!.hasAttribute("style"), "no inline style at all").toBe(false);
+  });
+});
+
 describe("HkMenu check column (selectMode)", () => {
   const checkedItems: HkMenuItem[] = [
     { key: "a", label: "Alpha", checked: true },

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";
 
@@ -142,6 +143,20 @@ export default defineComponent({
      * shrink to fit.
      */
     matchAnchorWidth: { type: Boolean, default: false },
+    /**
+     * Cap for the panel surface of EVERY level, as any CSS length
+     * (`min(18rem, 45dvh)`, `24rem`, …): it is forwarded to each
+     * HkSelectPanel this menu renders — the root desktop popout, every
+     * cascade level and each mobile sheet layer (every level is its own
+     * scroll surface, so each one is capped).
+     *
+     * Undefined (the default) forwards nothing at all, so the shared panel
+     * keeps its own ceilings and every existing consumer — theme switchers,
+     * cascades, the menubar, popups — renders exactly as before. See
+     * HkSelectPanel's own `maxHeight` for the value contract: any CSS
+     * length, applied on the `dvh`-capable branch, never sanitized.
+     */
+    maxHeight: { type: String, default: undefined },
   },
   emits: ["update:open", "select"],
   setup(props, { emit, slots }) {
@@ -384,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);
@@ -395,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),
@@ -416,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),
@@ -549,6 +570,7 @@ export default defineComponent({
           placement={cfg.placement}
           offset={cfg.offset}
           matchAnchorWidth={cfg.match}
+          maxHeight={props.maxHeight}
           onUpdate:open={(v: boolean) => {
             if (!v) onRootCloseRequest();
           }}
@@ -576,6 +598,7 @@ export default defineComponent({
               title={branch?.label ?? props.title}
               placement="bottom-start"
               offset={0}
+              maxHeight={props.maxHeight}
               onUpdate:open={(v: boolean) => {
                 if (!v) onSubCloseRequest(level);
               }}
@@ -598,6 +621,7 @@ export default defineComponent({
           open={props.open}
           anchorRef={props.anchorRef}
           title={props.title}
+          maxHeight={props.maxHeight}
           onUpdate:open={(v: boolean) => {
             if (!v) onRootCloseRequest();
           }}
@@ -616,6 +640,7 @@ export default defineComponent({
             // Sub-levels carry no title of their own — the parent item's
             // label names the sheet.
             title={entry.item.label}
+            maxHeight={props.maxHeight}
             onUpdate:open={(v: boolean) => {
               if (!v) onStackCloseRequest(i);
             }}

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/HkTagInput.scss

@@ -101,10 +101,14 @@
 
 /* A disabled field reorders nothing: the chips drop the grab affordance
  * (and the gesture reservation with it) — the box's own not-allowed
- * cursor takes over. */
+ * cursor takes over — and they become plain TEXT: with no drag left to
+ * lose, the press is free to select, so the chips are selectable here
+ * (the one state where selection and reordering cannot compete). */
 .hk-tag-input-box[data-disabled] .hk-tag-input-tag {
   cursor: default;
   touch-action: auto;
+  user-select: text;
+  -webkit-user-select: text;
 }
 
 /* ── inline typing input / placeholder ────────────────────────────── */
@@ -318,14 +322,50 @@
 }
 
 /* ── reordering ───────────────────────────────────────────────────── */
-/* Live drag (both lists): the item being moved dims, the slot it would
- * land in is ringed. Chips carry the state as classes (HkTag takes no
- * arbitrary attributes), panel rows as data attributes — both are
- * assertable hooks that never collide with the pointer/hover faces. */
+/* Live drag (both lists): the item being moved LIFTS — a touch larger and
+ * raised off the surface — while the slot it would land in is ringed. The
+ * lift is what makes the drag read on touch, where the finger covers the
+ * chip, the cursor is invisible and dimming alone looks like nothing
+ * happened. The dimming stays LIGHT on purpose (0.85, the value of the
+ * HkDraggableList/HkDraggableGrid drag ghost): the item must still read as
+ * the one being moved, not fade out. `transform` reflows nothing — no
+ * neighbour ever moves for it — and the axis rules below keep it out of the
+ * drag's own geometry too. The raised shadow replaces the row's own
+ * box-shadow faces for as long as the drag lasts (the keyboard cursor's
+ * inset ring included: the lift is the live state).
+ *
+ * Chips carry the state as classes (HkTag takes no arbitrary attributes),
+ * panel rows as data attributes — both are assertable hooks that never
+ * collide with the pointer/hover faces. */
 .hk-tag-input-tag-dragging,
 .hk-tag-input-row[data-dragging] {
-  opacity: 0.55;
+  opacity: 0.85;
   cursor: grabbing;
+  box-shadow:
+    0 6px 18px rgb(0 0 0 / 24%),
+    0 2px 6px rgb(0 0 0 / 16%);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+/* The scale runs ALONG each list's own drag axis, never across it. A drag
+ * resolves its landing slot from the items' LIVE rects (usePointerReorder
+ * .indexAt): the item's MIDPOINT on the drag axis picks the slot, and on
+ * the axis ACROSS it every item's span decides which line the pointer is
+ * on — a filter that started out a no-op precisely because every row spans
+ * the list's full width. A scale is symmetric about the item's centre, so
+ * scaling along the drag axis leaves both readings exactly as they were;
+ * growing ACROSS it widens one item's band, and a pointer a few pixels
+ * outside the strip (the row list's own padding is 6px) would then match
+ * that item ALONE — every sibling falls out of the line filter, the slot
+ * collapses back onto the item's own index, and the drag ends as a silent
+ * no-op with no drop ring anywhere. Chips therefore scale on X (a
+ * horizontal strip), rows on Y (a vertical list). */
+.hk-tag-input-tag-dragging {
+  transform: scaleX(1.03);
+}
+
+.hk-tag-input-row[data-dragging] {
+  transform: scaleY(1.03);
 }
 
 .hk-tag-input-tag-drop {
@@ -384,7 +424,13 @@
   .hk-tag-input-box,
   .hk-tag-input-chevron,
   .hk-tag-input-grip,
-  .hk-tag-input-row {
+  .hk-tag-input-row,
+  /* The lift itself is KEPT without its ramp: the scale and the raised
+   * shadow are a static state marker, not motion, and dropping them would
+   * take the drag feedback away from exactly the users who cannot rely on
+   * the cursor following the pointer — only the 0.12s transition goes. */
+  .hk-tag-input-tag-dragging,
+  .hk-tag-input-row[data-dragging] {
     transition: none;
   }
 }

package/src/components/HkTagInput.test.tsx

@@ -1,4 +1,7 @@
 import { afterEach, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkModal from "./HkModal";
@@ -1494,6 +1497,92 @@ describe("HkTagInput panel geometry and drag reordering", () => {
     expect(tagTexts(container)).toEqual(["gitee.com", "Technology", "News"]);
   });
 
+  it("lifts the dragged chip and drops the lift on release", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    const strip = tags(container);
+    pinStrip(strip, 60, "x");
+
+    // Mid-gesture (still held): exactly the item being moved carries the
+    // drag state — the hook the stylesheet lifts — and the slot it would
+    // land in keeps its own ring. Nothing else is marked.
+    holdPointer({ x: 10, y: 10 }, { x: 200, y: 10 }, strip[0]);
+    await nextTick();
+    const dragging = tags(container).filter((t) =>
+      t.classList.contains("hk-tag-input-tag-dragging"),
+    );
+    expect(dragging).toHaveLength(1);
+    expect(dragging[0]).toBe(strip[0]);
+    expect(tags(container).filter((t) => t.classList.contains("hk-tag-input-tag-drop"))).toHaveLength(
+      1,
+    );
+
+    releasePointer({ x: 200, y: 10 });
+    await settle();
+    // The lift is a LIVE-drag state: the release clears it in both lists.
+    expect(container.querySelectorAll(".hk-tag-input-tag-dragging")).toHaveLength(0);
+    expect(container.querySelectorAll(".hk-tag-input-tag-drop")).toHaveLength(0);
+    expect(events.modelValue.at(-1)).toEqual(["tech", "de", "news"]);
+  });
+
+  it("drops the chip's lift when the gesture is cancelled without a drop", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech"] });
+    pinStrip(tags(container), 60, "x");
+
+    holdPointer({ x: 10, y: 10 }, { x: 200, y: 10 }, tags(container)[0]);
+    await nextTick();
+    expect(container.querySelectorAll(".hk-tag-input-tag-dragging")).toHaveLength(1);
+
+    // The browser takes the gesture back (a vertical scroll on touch): the
+    // drag is abandoned — no reorder, and no lift left behind.
+    window.dispatchEvent(
+      new PointerEvent("pointercancel", { bubbles: true, pointerId: 1, pointerType: "touch" }),
+    );
+    await settle();
+    expect(container.querySelectorAll(".hk-tag-input-tag-dragging")).toHaveLength(0);
+    expect(container.querySelectorAll(".hk-tag-input-tag-drop")).toHaveLength(0);
+    expect(events.modelValue).toEqual([]);
+  });
+
+  it("lifts the dragged panel row too, and drops the lift on release", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    await openPanel(container);
+    const selected = reorderableRows();
+    pinStrip(selected, 40, "y");
+
+    // The row face of the same lift is the data attribute the stylesheet
+    // keys off (rows carry no classes of their own).
+    holdPointer({ x: 10, y: 10 }, { x: 10, y: 130 }, grip(selected[0]));
+    await nextTick();
+    const draggingRows = rows().filter((row) => row.hasAttribute("data-dragging"));
+    expect(draggingRows).toHaveLength(1);
+    expect(draggingRows[0]).toBe(selected[0]);
+    expect(rows().filter((row) => row.hasAttribute("data-drop"))).toHaveLength(1);
+
+    releasePointer({ x: 10, y: 130 });
+    await settle();
+    expect(rows().filter((row) => row.hasAttribute("data-dragging"))).toHaveLength(0);
+    expect(rows().filter((row) => row.hasAttribute("data-drop"))).toHaveLength(0);
+    expect(events.modelValue.at(-1)).toEqual(["tech", "de", "news"]);
+  });
+
+  it("hands a disabled field's chips to text selection instead of a drag", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech"], disabled: true });
+
+    // The stylesheet restores selection (and drops the grab cursor) through
+    // the box's OWN disabled hook — happy-dom has no layout, so the pin is
+    // on that attribute, which is exactly what the rule keys off.
+    expect(field(container).hasAttribute("data-disabled")).toBe(true);
+    expect(tags(container)).toHaveLength(2);
+
+    // Nothing can be reordered here, so a press that travels the whole strip
+    // must not be spent on a drag: no state, no emission, no lifted chip.
+    pinStrip(tags(container), 60, "x");
+    dragPointer({ x: 10, y: 10 }, { x: 200, y: 10 }, tags(container)[0]);
+    await settle();
+    expect(events.modelValue).toEqual([]);
+    expect(container.querySelectorAll(".hk-tag-input-tag-dragging")).toHaveLength(0);
+  });
+
   it("keeps a sub-threshold press a click — and never drags from the ×", async () => {
     const { events, container } = mountTagInput({ modelValue: ["news", "tech"] });
     pinStrip(tags(container), 60, "x");
@@ -1924,3 +2013,97 @@ describe("HkTagInput panel geometry and drag reordering", () => {
     expect(tagTexts(container)).toEqual(["Technology"]);
   });
 });
+
+/* The stylesheet half of the states asserted above: happy-dom has no layout
+ * engine, so the DOM tests can only pin the HOOKS — these assertions pin
+ * what those hooks actually buy (the lift, the selection restore, and the
+ * reduced-motion handling), the way the sibling contract tests in this
+ * directory pin the scroll and panel-geometry contracts. */
+const scss = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "HkTagInput.scss"), "utf-8");
+
+/** The declaration block of the rule whose selector list starts at the
+ *  FIRST `selector` occurrence — braces balanced, so a nested block cannot
+ *  let properties appended after it evade the pin. */
+function styleBlock(selector: string): string {
+  const at = scss.indexOf(selector);
+  expect(at, `${selector} is styled`).toBeGreaterThanOrEqual(0);
+  const open = scss.indexOf("{", at);
+  let depth = 0;
+  for (let i = open; i < scss.length; i += 1) {
+    if (scss[i] === "{") depth += 1;
+    else if (scss[i] === "}") {
+      depth -= 1;
+      if (depth === 0) return scss.slice(open, i + 1);
+    }
+  }
+  return "";
+}
+
+describe("HkTagInput drag feedback and text selection", () => {
+  it("lifts the dragged item in both lists instead of only dimming it", () => {
+    const lift = styleBlock(".hk-tag-input-tag-dragging,");
+    // ONE rule body serves both lists: the chip's class and the row's data
+    // attribute — the very hooks the DOM tests above assert.
+    expect(scss).toMatch(
+      /\.hk-tag-input-tag-dragging,\s*\n\.hk-tag-input-row\[data-dragging\]\s*\{/,
+    );
+    expect(lift).toMatch(/box-shadow:/);
+    // Subtle dimming on purpose: the lifted item must stay readable as the
+    // one being moved, not fade away (the pre-wave 0.55 did).
+    expect(lift).toMatch(/opacity:\s*0\.85/);
+    // The lift is a state, never layout: no width/height/margin edits, and
+    // no isotropic scale smuggled into the shared body.
+    expect(lift).not.toMatch(/(^|[^-])(width|height|margin|padding)\s*:/);
+    expect(lift).not.toMatch(/transform\s*:/);
+  });
+
+  it("scales each list ALONG its drag axis and never across it", () => {
+    // The drop slot is resolved from the items' live rects
+    // (usePointerReorder.indexAt): the item's midpoint on the drag axis
+    // picks the slot, and every item's span on the axis ACROSS it decides
+    // which line the pointer is on. A scale is symmetric about the centre,
+    // so scaling along the drag axis changes neither — while growing across
+    // it widens the dragged item's band, and a pointer a few pixels outside
+    // the strip would then match that item alone: every sibling falls out of
+    // the line filter and the drag silently collapses to a no-op. CSS is the
+    // only place this can regress, so each hook's own transform is pinned.
+    const axisTransform = (hook: string): string | undefined =>
+      scss.match(
+        new RegExp(`${hook.replace(/[[\]]/g, "\\$&")}\\s*\\{\\s*transform:\\s*([^;]+);`),
+      )?.[1];
+    expect(axisTransform(".hk-tag-input-tag-dragging"), "the chip strip is horizontal").toBe(
+      "scaleX(1.03)",
+    );
+    expect(axisTransform(".hk-tag-input-row[data-dragging]"), "the row list is vertical").toBe(
+      "scaleY(1.03)",
+    );
+  });
+
+  it("keeps the lift's state marker under reduced motion and drops only its ramp", () => {
+    const reduce = scss.slice(scss.indexOf("@media (prefers-reduced-motion: reduce)"));
+    expect(reduce, "the reduced-motion block exists").toContain(".hk-tag-input-tag-dragging");
+    expect(reduce).toContain(".hk-tag-input-row[data-dragging]");
+    expect(reduce).toMatch(/transition:\s*none/);
+    // The scale and the shadow survive — a reduced-motion user gets the
+    // same affordance, just without the 0.12s motion.
+    expect(reduce).not.toMatch(/transform:\s*none/);
+    expect(reduce).not.toMatch(/box-shadow:\s*none/);
+  });
+
+  it("restores text selection on a disabled field's chips only", () => {
+    const disabled = styleBlock(".hk-tag-input-box[data-disabled] .hk-tag-input-tag");
+    expect(disabled).toContain("user-select: text");
+    expect(disabled).toContain("-webkit-user-select: text");
+    expect(disabled).toContain("cursor: default");
+    // The editable chip keeps the gesture reservation: its press is the
+    // reorder gesture, so it stays non-selectable (the documented trade-off).
+    const chip = styleBlock(".hk-tag-input-tag {");
+    expect(chip).toContain("user-select: none");
+    expect(chip).toContain("cursor: grab");
+    // The panel rows' LABELS are never selection-blocked — only the grip,
+    // which is the drag handle, reserves the gesture.
+    expect(styleBlock(".hk-tag-input-grip {")).toContain("user-select: none");
+    const row = styleBlock(".hk-tag-input-row {");
+    expect(row).not.toMatch(/user-select/);
+  });
+});

package/src/components/HkTagInput.tsx

@@ -130,8 +130,11 @@ type HkTagStop =
  *     a plain click/tap still clicks:
  *       * a CHIP is dragged by its BODY (its × never starts a drag, and
  *         pressing any control inside a chip is not a drag at all); the
- *         chip follows no ghost — the drop slot is highlighted and the
- *         release emits the reordered array;
+ *         chip follows no ghost — it LIFTS in place (a touch larger,
+ *         raised off the surface, only lightly dimmed so it stays legible
+ *         as the item being moved) while the drop slot is ringed and the
+ *         release emits the reordered array. The lift is what makes the
+ *         gesture readable under a finger, where the cursor is invisible;
  *       * in the PANEL only the SELECTED rows move, and only through the
  *         explicit GRIP HANDLE at the row's trailing edge (the handle is
  *         the one element that claims touch, so the sheet keeps scrolling
@@ -142,10 +145,17 @@ type HkTagStop =
  *         of the (capped) surface in one gesture; nothing is scrolled
  *         without a live drag. A row drag is CLAMPED to the selected
  *         group: unselected rows are not drop targets and never move, and
- *         a release past the group's end lands on its last position;
+ *         a release past the group's end lands on its last position. A
+ *         dragged row lifts exactly like a dragged chip;
  *     both lists are keyed HkListTransition groups (FLIP `move`), so the
  *     moved chip/row and its neighbours animate into their new places,
- *     with the library's usual reduced-motion opt-outs;
+ *     with the library's usual reduced-motion opt-outs (the lift's scale
+ *     and shadow stay — only their 0.12s ramp is dropped, so a
+ *     reduced-motion user keeps the state marker without the motion). The
+ *     lift scales ALONG each list's drag axis and never across it: the drop
+ *     slot is resolved from the items' live rects, so a span grown across
+ *     that axis would hide every sibling from the pointer and silently
+ *     collapse the gesture into a no-op;
  *   - a key in `modelValue` that the catalog does not carry (a custom
  *     tag, or an option deleted since) degrades to its raw key as the
  *     tag label — the same rule as HkAffixPicker.tagEntries. Such a key
@@ -188,6 +198,21 @@ type HkTagStop =
  * row). The grip handle is a pointer affordance; the field and the panel
  * are otherwise pointer-only for reordering.
  *
+ * CHIP TEXT IS NOT SELECTABLE WHILE THE FIELD IS EDITABLE — the chip is an
+ * interactive control, and its press is the reorder gesture, exactly as a
+ * `<button>`'s label is not selectable because its press is the activation.
+ * The two cannot be had at once: a press allowed to start a text selection
+ * is a press the browser has already claimed, so it can no longer become a
+ * ~6px drag (on touch the long press raises the selection callout and the
+ * drag dies on `pointercancel`; on a mouse the two gestures run together
+ * and neither reads). The threshold therefore wins by design, and the
+ * trade-off is paid where it costs nothing instead: a DISABLED field
+ * reorders nothing, so its chips ARE selectable text — the stylesheet
+ * flips their `user-select` back to `text` (and drops the grab cursor)
+ * under the box's own disabled hook. The panel rows keep their LABELS
+ * selectable even while editable: only the grip handle reserves the
+ * gesture there, and it — not the label — is the drag target.
+ *
  * `maxTags` freezes ADDS only. Reordering stays available at the cap:
  * the order is host state, and a reorder adds nothing (nor removes
  * anything).

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;
+}