@celestia-island/hikari 0.43.6 → 0.43.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.6",
+  "version": "0.43.8",
   "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
@@ -347,19 +349,18 @@
   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): 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,130 @@ 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("ends a row drag 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 resolves by no longer names the row it grabbed.
+    model.value = ["de", "news", "tech"];
+    await settle();
+    expect(rowLabels().slice(0, 3)).toEqual(["Germany", "News", "Technology"]);
+
+    releasePointer({ x: 10, y: 130 });
+    await settle();
+
+    // The gesture ends without a reorder — a drag may come to nothing, it
+    // must never move whichever row slid into the index it was holding.
+    expect(events.modelValue, "no reorder came out of the rewritten strip").toEqual([]);
+    expect(tagTexts(container)).toEqual(["Germany", "News", "Technology"]);
+  });
+
   it("clamps a row drag to the selected group", async () => {
     const { events, container } = mountTagInput({ modelValue: ["news", "tech"] });
     await openPanel(container);
@@ -2059,14 +2195,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

@@ -152,10 +152,15 @@ 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 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
@@ -448,12 +453,22 @@ 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 resolves its landing slot by INDEX, so a reorder under the
+      // held pointer (or under a press that is about to become one) would
+      // leave the release moving whatever now sits at that index — a
+      // different row, silently. The chord is still consumed by the caller
+      // either way (Alt+Arrow is not a plain arrow, and the browser must
+      // not act on it); it just has nothing to move while a pointer owns
+      // the list.
+      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;