@celestia-island/hikari 0.43.7 → 0.43.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.7",
+  "version": "0.43.9",
   "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

@@ -329,10 +329,12 @@
  * 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).
+ * neighbour ever moves for it — and it cannot move the drag's own geometry
+ * either: the resolution reads the pressed item's line and midpoint from
+ * the layout captured when the press landed, before this lift is painted.
+ * 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
@@ -348,16 +350,17 @@
 }
 
 /* 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. */
+ * strip), rows on Y (a vertical list): a small scale that follows the
+ * gesture keeps the lifted item tight in a dense chip row. WHICH axis it
+ * runs on is TASTE, not necessity — a drag resolves its landing slot from
+ * the items' live rects (usePointerReorder's `indexAt`), where every item's
+ * span on the axis ACROSS the drag decides which line the pointer is on and
+ * the item's MIDPOINT on the drag axis picks the slot, except that the item
+ * being dragged is measured by the geometry captured when the press landed,
+ * before this lift is painted: no transform on it, along the axis, across it
+ * or an isotropic `scale()`, can move the line it is dragged along. The line
+ * filter started out a no-op precisely because every row spans the list's
+ * full width. */
 .hk-tag-input-tag-dragging {
   transform: scaleX(1.03);
 }

package/src/components/HkTagInput.test.tsx

@@ -53,13 +53,16 @@ function mountTagInput(opts: MountOptions = {}) {
   };
   const container = document.createElement("div");
   document.body.appendChild(container);
+  /** The host's own array — the component's `modelValue` comes straight
+   *  from it, so a test can rewrite the order out of band (a host edit
+   *  landing mid-gesture) instead of only through the component's emits. */
+  const model = ref<readonly string[]>(opts.modelValue ?? []);
   const Host = defineComponent({
     name: "HkTagInputHost",
     setup() {
-      const value = ref<readonly string[]>(opts.modelValue ?? []);
       return () =>
         h(HkTagInput, {
-          modelValue: value.value,
+          modelValue: model.value,
           options: opts.options ?? OPTIONS,
           allowCustom: opts.allowCustom ?? false,
           label: opts.label,
@@ -72,7 +75,7 @@ function mountTagInput(opts: MountOptions = {}) {
           emptyText: opts.emptyText,
           "onUpdate:modelValue": (keys: string[]) => {
             events.modelValue.push(keys);
-            value.value = keys;
+            model.value = keys;
           },
           onAdd: (key: string) => events.add.push(key),
           onRemove: (key: string) => events.remove.push(key),
@@ -83,7 +86,7 @@ function mountTagInput(opts: MountOptions = {}) {
   const app = createApp(Host);
   app.mount(container);
   mounts.push({ app, container });
-  return { events, container };
+  return { events, container, model };
 }
 
 async function settle(): Promise<void> {
@@ -1192,6 +1195,15 @@ function holdPointer(
       clientY: from.y,
     }),
   );
+  movePointer(to, pointerType);
+}
+
+/** Move an already-held pointer — a second step of a gesture whose press
+ *  (and its exact travel) the test wants to control. */
+function movePointer(
+  to: { x: number; y: number },
+  pointerType: "mouse" | "touch" = "mouse",
+): void {
   window.dispatchEvent(
     new PointerEvent("pointermove", {
       bubbles: true,
@@ -1434,6 +1446,156 @@ describe("HkTagInput panel geometry and drag reordering", () => {
     expect(rowLabels().slice(0, 3)).toEqual(["Technology", "Germany", "News"]);
   });
 
+  it("leaves the order alone when a keyboard nudge lands under a held row drag", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    await openPanel(container);
+    const selected = reorderableRows();
+    pinStrip(selected, 40, "y");
+    const search = searchInput();
+    search.focus();
+    pressKey(search, "ArrowDown");
+    await settle();
+    pressKey(search, "ArrowDown");
+    await settle();
+    expect(activeRow()).toBe(rowByLabel("Technology"));
+
+    // A drag on the FIRST row is held while the cursor's row is nudged with
+    // Alt+ArrowUp. The drag's landing slot is an index into the strip it
+    // grabbed, so a reorder under the held pointer would leave the release
+    // moving whatever now sits at that index — a different row, silently.
+    // The chord is still consumed (Alt+Arrow is not a plain arrow), it just
+    // has nothing to move while a pointer owns the order.
+    holdPointer({ x: 10, y: 10 }, { x: 10, y: 130 }, grip(selected[0]));
+    await settle();
+    pressKey(search, "ArrowUp", { altKey: true });
+    await settle();
+    expect(events.modelValue, "the chord emits nothing mid-drag").toEqual([]);
+    expect(rowLabels().slice(0, 3), "the rows stayed where they were").toEqual([
+      "News",
+      "Technology",
+      "Germany",
+    ]);
+    releasePointer({ x: 10, y: 130 });
+    await settle();
+
+    // …and the drop moves the row the pointer actually grabbed.
+    expect(events.modelValue.at(-1)).toEqual(["tech", "de", "news"]);
+  });
+
+  it("keeps the chord out of a press that has not become a drag yet", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    await openPanel(container);
+    const selected = reorderableRows();
+    pinStrip(selected, 40, "y");
+    const search = searchInput();
+    search.focus();
+    pressKey(search, "ArrowDown");
+    await settle();
+    pressKey(search, "ArrowDown");
+    await settle();
+    expect(activeRow()).toBe(rowByLabel("Technology"));
+
+    // The same chord, one step EARLIER: the pointer is down on the first
+    // row's grip but has not travelled the few pixels that turn a press into
+    // a drag, so nothing has been published yet. The press already owns the
+    // strip, though — crossing the threshold after the chord had moved a row
+    // would leave the drop resolving against a strip it never grabbed.
+    holdPointer({ x: 10, y: 10 }, { x: 12, y: 11 }, grip(selected[0]));
+    await settle();
+    pressKey(search, "ArrowUp", { altKey: true });
+    await settle();
+    expect(events.modelValue, "the chord emits nothing under a live press").toEqual([]);
+
+    // Crossing the threshold now still moves the row the pointer grabbed.
+    movePointer({ x: 10, y: 130 });
+    releasePointer({ x: 10, y: 130 });
+    await settle();
+    expect(events.modelValue.at(-1)).toEqual(["tech", "de", "news"]);
+  });
+
+  it("keeps the chord out of a live CHIP drag too", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    await openPanel(container);
+    const strip = tags(container);
+    pinStrip(strip, 60, "x");
+    const search = searchInput();
+    search.focus();
+    pressKey(search, "ArrowDown");
+    await settle();
+    pressKey(search, "ArrowDown");
+    await settle();
+    expect(activeRow()).toBe(rowByLabel("Technology"));
+
+    // The panel rows and the field's chips are two views of ONE array, so a
+    // chord that reorders the rows edits the strip a chip drag is resolving
+    // against — the drag has to hold the order whichever list it grabbed.
+    holdPointer({ x: 10, y: 10 }, { x: 200, y: 10 }, strip[0]);
+    await settle();
+    pressKey(search, "ArrowUp", { altKey: true });
+    await settle();
+    expect(events.modelValue, "the chord emits nothing mid-drag").toEqual([]);
+    expect(tagTexts(container), "the chips stayed where they were").toEqual([
+      "News",
+      "Technology",
+      "Germany",
+    ]);
+    releasePointer({ x: 200, y: 10 });
+    await settle();
+
+    // The chip the pointer grabbed is the one that moved.
+    expect(events.modelValue.at(-1)).toEqual(["tech", "de", "news"]);
+    expect(tagTexts(container)).toEqual(["Technology", "Germany", "News"]);
+  });
+
+  it("follows the row it grabbed when the host reorders the list under it", async () => {
+    const { events, container, model } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    await openPanel(container);
+    const selected = reorderableRows();
+    pinStrip(selected, 40, "y");
+
+    holdPointer({ x: 10, y: 10 }, { x: 10, y: 130 }, grip(selected[0]));
+    await settle();
+    // The host rewrites its own order out of band while the drag is held: the
+    // index the drag landed at names a different row now, but the row the
+    // pointer is holding is still the one being moved.
+    model.value = ["de", "news", "tech"];
+    await settle();
+    expect(rowLabels().slice(0, 3)).toEqual(["Germany", "News", "Technology"]);
+
+    releasePointer({ x: 10, y: 130 });
+    await settle();
+
+    // "News" — the row the pointer grabbed — moved to the slot it was dragged
+    // to, in the strip's own new order: the released gesture is never
+    // silently replaced by a move of whichever row slid into that index.
+    expect(events.modelValue.at(-1)).toEqual(["de", "tech", "news"]);
+    expect(tagTexts(container)).toEqual(["Germany", "Technology", "News"]);
+  });
+
+  it("keeps a dragged chip on the chip it grabbed when a × removes another one mid-drag", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    const strip = tags(container);
+    pinStrip(strip, 60, "x");
+
+    // A second pair of eyes on the same list: the × of the FIRST chip is
+    // clicked while the SECOND is being dragged. The field re-lays out under
+    // the held pointer and the dragged chip slides one index left — so the
+    // index the press landed at names the wrong chip by the time the pointer
+    // comes up, and the drop has to stay on the chip the pointer is holding.
+    holdPointer({ x: 70, y: 10 }, { x: 200, y: 10 }, strip[1]);
+    await settle();
+    closeButtons(container)[0].click();
+    await settle();
+    expect(tagTexts(container), "the × landed").toEqual(["Technology", "Germany"]);
+
+    releasePointer({ x: 200, y: 10 });
+    await settle();
+
+    // "Technology" — the grabbed chip — lands last, in the field's own order.
+    expect(events.modelValue.at(-1)).toEqual(["de", "tech"]);
+    expect(tagTexts(container)).toEqual(["Germany", "Technology"]);
+  });
+
   it("clamps a row drag to the selected group", async () => {
     const { events, container } = mountTagInput({ modelValue: ["news", "tech"] });
     await openPanel(container);
@@ -2059,14 +2221,16 @@ describe("HkTagInput drag feedback and text selection", () => {
 
   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.
+    // (usePointerReorder.indexAt) except for the item being dragged, whose
+    // line across the list and midpoint along it come from the geometry
+    // captured when the press landed: the item's midpoint on the drag axis
+    // picks the slot, and each item's span on the axis ACROSS it decides
+    // which line the pointer is on. A transform ON the pressed item is
+    // measured from that pre-paint geometry either way, so the lift stays on
+    // the drag axis by TASTE — a small scale following the gesture keeps a
+    // dense chip row tight — rather than because the resolution needs it.
+    // CSS is the only place the lift 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*([^;]+);`),

package/src/components/HkTagInput.tsx

@@ -155,11 +155,12 @@ type HkTagStop =
  *     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;
+ *     the items' live rects except for the item being dragged: its line
+ *     across the list and its midpoint along it come from the geometry
+ *     captured when the press landed, before the lift is painted, so no
+ *     transform on it — along the axis, across it, isotropic, or anchored
+ *     on an edge rather than its centre — can move the slot the pointer
+ *     resolves;
  *   - 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
@@ -452,12 +453,23 @@ export const HkTagInput = defineComponent({
     /** The panel's keyboard reorder: move the ACTIVE row one slot inside
      *  the selected group (the same edit a row drag makes, without a
      *  pointer). Only a selected row has a place in that order, the ends of
-     *  the group are hard stops, and `false` means the key was not ours to
-     *  consume. The cursor stays on the key it was on — the stops rebuild
-     *  in the new order, so it follows the row the user moved. */
+     *  the group are hard stops, and `false` means there was nothing this
+     *  key could move. The cursor stays on the key it was on — the stops
+     *  rebuild in the new order, so it follows the row the user moved. */
     function nudgeActiveRow(delta: 1 | -1): boolean {
       const stop = activeStop.value;
       if (props.disabled || !stop || stop.kind !== "option") return false;
+      // A live press OWNS the order — either list's, and from the moment
+      // the press lands rather than from the moment it turns into a drag.
+      // The drag would survive a reorder (it moves the ELEMENT the press
+      // grabbed, re-reading its index as it goes), but the item's geometry
+      // is the one the press read: reordering the strip under a held pointer
+      // leaves the drag resolving against a place its item no longer
+      // occupies, which is how a gesture ends up quietly doing nothing. So
+      // the chord is inert while a pointer owns the list. It is still
+      // consumed by the caller either way (Alt+Arrow is not a plain arrow,
+      // and the browser must not act on it).
+      if (chipDrag.pressed.value || rowDrag.pressed.value) return false;
       const group = selectedRows.value;
       const from = group.findIndex((option) => option.key === stop.option.key);
       if (from < 0) return false;