@celestia-island/hikari 0.43.6 → 0.43.7

package/package.json

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

package/src/components/HkTagInput.scss

@@ -347,19 +347,17 @@
   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). */
+/* The scale runs ALONG each list's own drag axis — chips on X (a horizontal
+ * strip), rows on Y (a vertical list). That split is TASTE, not geometry: a
+ * small scale that follows the gesture keeps the lifted item tight in a
+ * dense chip row. A drag resolves its landing slot from the items' LIVE
+ * rects (usePointerReorder's `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. The item being dragged may
+ * not decide that line (a drop onto its own slot is already a no-op), so a
+ * centre-anchored transform on it — along the axis or across it — leaves the
+ * resolution exactly where it was. */
 .hk-tag-input-tag-dragging {
   transform: scaleX(1.03);
 }

package/src/components/HkTagInput.tsx

@@ -152,10 +152,14 @@ type HkTagStop =
  *     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;
+ *     lift scales ALONG each list's drag axis by TASTE, not by necessity: a
+ *     small scale that follows the gesture keeps the lifted item's own
+ *     footprint tight in a dense chip row. The drop slot is resolved from
+ *     the items' live rects, but the dragged item never decides which line
+ *     the pointer is on (it is only ever a candidate in the slot loop, and
+ *     a drop onto its own slot is already a no-op), so a centre-preserving
+ *     transform on it — along the axis, across it, or an isotropic
+ *     `scale()` — leaves the resolution exactly where it was;
  *   - 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

package/src/composables/usePointerReorder.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { effectScope, type EffectScope } from "vue";
 
-import { usePointerReorder, type PointerReorder } from "./usePointerReorder";
+import { usePointerReorder, indexAt, type PointerReorder } from "./usePointerReorder";
 
 /** Items with PINNED rects — happy-dom ships no layout engine, so every
  *  item is placed by hand along the axis under test (size 40, the same
@@ -34,6 +34,22 @@ function strip(axis: "x" | "y", count = 3, size = 40) {
   return { container, items };
 }
 
+/** Items with hand-placed boxes on BOTH axes — the wrapping-strip pattern,
+ *  for the geometries only a transform produces (a band widened across the
+ *  strip while the item keeps its place along it). */
+function boxes(geometry: Array<{ left: number; right: number; top: number; bottom: number }>): HTMLElement[] {
+  return geometry.map((box) => {
+    const el = document.createElement("div");
+    Object.defineProperty(el, "getBoundingClientRect", {
+      configurable: true,
+      value: () =>
+        ({ ...box, width: box.right - box.left, height: box.bottom - box.top, x: box.left, y: box.top }) as DOMRect,
+    });
+    document.body.appendChild(el);
+    return el;
+  });
+}
+
 /** Waits out `frames` animation frames — the auto-scroll loop steps once
  *  per frame (the repo's useApproachEnd pattern). */
 async function frames(count: number): Promise<void> {
@@ -395,6 +411,112 @@ describe("usePointerReorder", () => {
     ]);
   });
 
+  it("resolves past a dragged chip whose own band is widened across the strip", () => {
+    // One line of three chips, the DRAGGED one (index 1) reporting a band
+    // widened ACROSS the strip — which is what any transform on it does: a
+    // host's `scale()` on a wrapper, a zoomed container, a theme animating a
+    // chip. The pointer sits 3px outside the SIBLINGS' band (43 against
+    // 0-40) and inside the widened one, so the dragged chip is the unique
+    // zero-gap match: left to define the line on its own it filters every
+    // sibling out and the slot collapses onto its own index — a silent
+    // no-op, no reorder and no drop ring.
+    const items = boxes([
+      { left: 0, right: 100, top: 0, bottom: 40 },
+      { left: 100, right: 200, top: -8, bottom: 48 },
+      { left: 200, right: 300, top: 0, bottom: 40 },
+    ]);
+    const { handle, drops } = harness("x", items);
+
+    press(handle, items, 1, { x: 150, y: 20 });
+    move(260, 43);
+    expect(handle.dragging.value).toBe(true);
+    expect(handle.dragOver.value, "260 is past item 2's midpoint of 250").toBe(2);
+    up(260, 43);
+    expect(drops).toEqual([[1, 2]]);
+  });
+
+  it("resolves the panel rows the same way when the dragged row's band is widened", () => {
+    // The same defect on the vertical strip, whose cross axis is x: the
+    // dragged row (index 1) reports its band widened from 0-40 to -8-48, so
+    // the pointer at x 44 is 4px outside the siblings' band and inside the
+    // dragged one. Both ends of the strip answer — the leading edge, then
+    // the last row.
+    const items = boxes([
+      { left: 0, right: 40, top: 0, bottom: 40 },
+      { left: -8, right: 48, top: 40, bottom: 80 },
+      { left: 0, right: 40, top: 80, bottom: 120 },
+    ]);
+    const { handle, drops } = harness("y", items);
+
+    press(handle, items, 1, { x: 20, y: 60 });
+    move(44, 5);
+    expect(handle.dragging.value).toBe(true);
+    expect(handle.dragOver.value, "5 is before every row's midpoint").toBe(0);
+    up(44, 5);
+    expect(drops).toEqual([[1, 0]]);
+
+    // …and 140 is past the last row's midpoint of 100.
+    press(handle, items, 1, { x: 20, y: 60 });
+    move(44, 140);
+    expect(handle.dragOver.value).toBe(2);
+    up(44, 140);
+    expect(drops).toEqual([
+      [1, 0],
+      [1, 2],
+    ]);
+  });
+
+  it("resolves the no-drag path (from = -1) exactly as it always did", () => {
+    // `from = -1` is the call with no drag in flight: nothing is the item
+    // being dragged, so nothing may be left out of the line — the exclusion
+    // is INERT there, not a rewrite of the resolution. The widened band
+    // therefore still owns the line on its own, which is the pre-fix value
+    // the strip resolved before the dragged item was ever excluded (the same
+    // gesture with `from = 1` answers 0 instead — see the panel-rows test).
+    const items = boxes([
+      { left: 0, right: 40, top: 0, bottom: 40 },
+      { left: -8, right: 48, top: 40, bottom: 80 },
+      { left: 0, right: 40, top: 80, bottom: 120 },
+    ]);
+    const rects = items.map((item) => item.getBoundingClientRect());
+
+    expect(indexAt(rects, "y", 5, 44, -1), "the widened row still owns the line").toBe(1);
+    // …and the geometry the fix never touched: the ends, and an empty strip.
+    expect(indexAt(rects, "y", 5000, 20, -1), "past every midpoint").toBe(3);
+    expect(indexAt(rects, "y", -5, 20, -1), "before every midpoint").toBe(0);
+    expect(indexAt([], "x", 0, 0, -1), "an empty strip has no slot").toBe(-1);
+
+    // The user-visible half of the same invariant: with no gesture at all, a
+    // pointer move resolves nothing and publishes nothing.
+    const { handle, drops } = harness("y", items);
+    move(44, 5);
+    expect(handle.dragOver.value).toBe(-1);
+    expect(handle.dragFrom.value).toBe(-1);
+    expect(drops).toEqual([]);
+  });
+
+  it("lets the dragged item speak for a line no sibling shares", () => {
+    // A chip wrapped onto a line of its own (index 2) while it is dragged:
+    // no sibling is on that line, so the dragged item's band IS the line the
+    // pointer is on and a drag within it stays the no-op it always was.
+    // Ignoring the dragged item's band outright instead would let the
+    // nearest OTHER line — a full row above — answer, and a 90px drag along
+    // its own line would jump the chip up into it.
+    const items = boxes([
+      { left: 0, right: 100, top: 0, bottom: 40 },
+      { left: 100, right: 200, top: 0, bottom: 40 },
+      { left: 0, right: 60, top: 40, bottom: 80 },
+    ]);
+    const { handle, drops } = harness("x", items);
+
+    press(handle, items, 2, { x: 5, y: 60 });
+    move(100, 60);
+    expect(handle.dragging.value).toBe(true);
+    expect(handle.dragOver.value, "the pointer is still on the chip's own line").toBe(2);
+    up(100, 60);
+    expect(drops).toEqual([]);
+  });
+
   it("retires a stale click trap when a new press starts", () => {
     const { items } = strip("x");
     const { handle } = harness("x", items);

package/src/composables/usePointerReorder.ts

@@ -77,6 +77,95 @@ export interface PointerReorder {
   start: (event: PointerEvent, index: number) => void;
 }
 
+/** The display index the dragged item lands ON for a pointer at
+ *  (`main`, `cross`) — the pointer's coordinates split into the strip's
+ *  axis and the axis across it — over `rects`, starting from index `from`
+ *  (`-1` while no drag is in flight). The composable's own resolution, kept
+ *  pure so its tests can pin the no-drag path: this module is internal to
+ *  the package, so the export is not part of the published surface.
+ *
+ *  Resolved in two steps. First the LINE: items whose cross-axis span
+ *  holds the pointer (or is nearest to it) are the candidates, which is
+ *  what makes a WRAPPING chip row behave — a chip on the second line can
+ *  never be matched by a pointer on the first. A single-file strip (the
+ *  panel's column, whose rows all span the list width) has every item in
+ *  one span, so filtering by line is a strict no-op there — it only ever
+ *  separates items that really are on different lines.
+ *
+ *  Then the INSERTION POINT: the first candidate whose midpoint still
+ *  lies beyond the pointer (past the line's end when it is beyond every
+ *  candidate midpoint), which becomes a landing index by accounting for
+ *  the dragged item's own removal — dragging past one neighbour's
+ *  midpoint swaps with that neighbour instead of skipping it. -1 for an
+ *  empty strip. */
+export function indexAt(
+  rects: readonly DOMRect[],
+  axis: PointerReorderAxis,
+  main: number,
+  cross: number,
+  from: number,
+): number {
+  if (rects.length === 0) return -1;
+  /** An item's span ACROSS the strip — the axis the line is read on. */
+  const band = (rect: DOMRect) =>
+    axis === "x" ? { lo: rect.top, hi: rect.bottom } : { lo: rect.left, hi: rect.right };
+  // Nearest line wins: items in the pointer's own band score 0, and a
+  // pointer between two bands takes the closer one. The half-pixel
+  // tolerance keeps the siblings of ONE wrapped line together, whose
+  // bands can differ by sub-pixel rounding.
+  const lineGap = rects.map((rect) => {
+    const { lo, hi } = band(rect);
+    return cross < lo ? lo - cross : cross > hi ? cross - hi : 0;
+  });
+  // The line is decided by the items OTHER than the one being dragged: a
+  // drop onto the dragged item's own slot is already a no-op, so it must
+  // never be the geometry that decides which line the pointer is on —
+  // which is what makes the resolution invariant to whatever transform the
+  // host paints on the item being moved. Its live rect reflects that
+  // transform (the drag lift, a zoomed container, a `scale()` on a wrapper),
+  // so a band widened across the strip would otherwise be the unique
+  // zero-gap match: every sibling filtered out, the slot collapsed onto the
+  // item's own index, and the whole drag a silent no-op.
+  let nearest = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < lineGap.length; i += 1) {
+    if (i !== from && lineGap[i] < nearest) nearest = lineGap[i];
+  }
+  // …unless the dragged item is ALONE on its line — no sibling whose band
+  // holds its centre. A transform about the item's own centre (this
+  // library's lift, a zoomed container, a `scale()` on a wrapper) leaves
+  // that centre on the line the item was laid out on, whatever the band
+  // grew to, so a lone item's band IS that line: the exclusion above cannot
+  // see the line at all and the item speaks for itself — a single-file
+  // strip, or a chip wrapped onto a line of its own, keeps the answer it
+  // had. A transform that moves the centre OFF that line (an edge-anchored
+  // scale of ~2x or more, a translate of a whole line — nothing this
+  // library paints) is the one case these rects cannot read: the centre
+  // then decides from the line it landed on.
+  if (from >= 0 && from < rects.length) {
+    const own = band(rects[from]);
+    const centre = (own.lo + own.hi) / 2;
+    const shared = rects.some((rect, i) => {
+      if (i === from) return false;
+      const { lo, hi } = band(rect);
+      return centre >= lo - 0.5 && centre <= hi + 0.5;
+    });
+    if (!shared && lineGap[from] < nearest) nearest = lineGap[from];
+  }
+  let slot = -1;
+  for (let i = 0; i < rects.length; i += 1) {
+    if (lineGap[i] > nearest + 0.5) continue;
+    const rect = rects[i];
+    const mid = axis === "x" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+    if (main < mid) {
+      slot = i;
+      break;
+    }
+    slot = i + 1;
+  }
+  if (slot < 0) slot = rects.length;
+  return from >= 0 && slot > from ? slot - 1 : slot;
+}
+
 /**
  * usePointerReorder — pointer drag-to-reorder for a strip of elements.
  *
@@ -146,53 +235,19 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     return options.items().filter((el): el is HTMLElement => el != null);
   }
 
-  /** The display index the dragged item lands ON for a pointer at
-   *  (`main`, `cross`) — the pointer's coordinates split into the strip's
-   *  axis and the axis across it — starting from index `from`.
-   *
-   *  Resolved in two steps. First the LINE: items whose cross-axis span
-   *  holds the pointer (or is nearest to it) are the candidates, which is
-   *  what makes a WRAPPING chip row behave — a chip on the second line can
-   *  never be matched by a pointer on the first. A single-file strip (the
-   *  panel's column, whose rows all span the list width) has every item in
-   *  one span, so filtering by line is a strict no-op there — it only ever
-   *  separates items that really are on different lines.
-   *
-   *  Then the INSERTION POINT: the first candidate whose midpoint still
-   *  lies beyond the pointer (past the line's end when it is beyond every
-   *  candidate midpoint), which becomes a landing index by accounting for
-   *  the dragged item's own removal — dragging past one neighbour's
-   *  midpoint swaps with that neighbour instead of skipping it. -1 for an
-   *  empty strip. */
-  function indexAt(main: number, cross: number, from: number): number {
+  /** The slot the live strip resolves for a pointer at (`main`, `cross`),
+   *  starting from index `from` — the elements measured, then handed to
+   *  `indexAt`, which carries the geometry's rules. */
+  function slotAt(main: number, cross: number, from: number): number {
     const items = liveItems();
     if (items.length === 0) return -1;
-    const rects = items.map((item) => item.getBoundingClientRect());
-    // Nearest line wins: items in the pointer's own band score 0, and a
-    // pointer between two bands takes the closer one. The half-pixel
-    // tolerance keeps the siblings of ONE wrapped line together, whose
-    // bands can differ by sub-pixel rounding.
-    let nearest = Number.POSITIVE_INFINITY;
-    const lineGap = rects.map((rect) => {
-      const lo = axis === "x" ? rect.top : rect.left;
-      const hi = axis === "x" ? rect.bottom : rect.right;
-      const gap = cross < lo ? lo - cross : cross > hi ? cross - hi : 0;
-      if (gap < nearest) nearest = gap;
-      return gap;
-    });
-    let slot = -1;
-    for (let i = 0; i < rects.length; i += 1) {
-      if (lineGap[i] > nearest + 0.5) continue;
-      const rect = rects[i];
-      const mid = axis === "x" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
-      if (main < mid) {
-        slot = i;
-        break;
-      }
-      slot = i + 1;
-    }
-    if (slot < 0) slot = items.length;
-    return from >= 0 && slot > from ? slot - 1 : slot;
+    return indexAt(
+      items.map((item) => item.getBoundingClientRect()),
+      axis,
+      main,
+      cross,
+      from,
+    );
   }
 
   /** The pointer's coordinates split by axis: the position along the strip
@@ -248,7 +303,7 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     } else {
       container.scrollTop = next;
     }
-    const over = indexAt(lastMain, lastCross, pressedIndex);
+    const over = slotAt(lastMain, lastCross, pressedIndex);
     if (over >= 0) dragOver.value = over;
     scrollFrameId = requestAnimationFrame(scrollTick);
   }
@@ -368,7 +423,7 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     const at = pointerAt(event);
     lastMain = at.main;
     lastCross = at.cross;
-    const over = indexAt(lastMain, lastCross, pressedIndex);
+    const over = slotAt(lastMain, lastCross, pressedIndex);
     if (over >= 0) dragOver.value = over;
     syncAutoScroll();
   }
@@ -377,7 +432,7 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     if (!pressed || event.pointerId !== pointerId) return;
     const from = pressedIndex;
     const at = pointerAt(event);
-    const to = moved ? indexAt(at.main, at.cross, from) : from;
+    const to = moved ? slotAt(at.main, at.cross, from) : from;
     const dropped = moved && to >= 0 && to !== from;
     // The drag is over either way — the trap only guards the click the
     // browser is about to deliver.