@celestia-island/hikari 0.55.274 → 0.55.276

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.274",
+  "version": "0.55.276",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkBarChart.scss

@@ -40,15 +40,41 @@
     font-variant-numeric: tabular-nums;
   }
 
+  // Above-bar value label (showValues) — the same 10-unit voice as the
+  // axis, a step stronger so the count reads first.
+  &__value {
+    fill: rgb(var(--color-text) / 0.75);
+    font-size: 10px;
+    text-anchor: middle;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Slot mark (a bar's icon — the supership Star): a nested <svg> whose
+  // ink follows currentColor, so lucide's stroke picks up the axis voice
+  // without per-icon wiring.
+  &__xmark {
+    color: rgb(var(--color-text) / 0.55);
+  }
+
   &__bar {
     fill: rgb(var(--color-primary));
     outline: none;
     cursor: pointer;
-    transition: filter 0.16s ease;
+    transition: filter 0.16s ease, opacity 0.16s ease;
 
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    // Dim-pair head (activeIndex): keeps the hover lift while the
+    // pointer may sit anywhere — the host pairs bars by wiring
+    // activeIndex from the hover events.
+    &[data-hot] {
       filter: brightness(1.08) saturate(1.15);
     }
+
+    // Dim-pair follower: every other bar recedes, same ease family as
+    // the lift so the pair breathes together.
+    &[data-dim] {
+      opacity: 0.45;
+    }
   }
 }

package/src/components/HkBarChart.test.tsx

@@ -27,6 +27,10 @@ const BARS = [
   { label: "Wed", value: 0 },
 ];
 
+/** A tiny stand-in for a lucide glyph: any icon FUNCTION draws the
+ * 24-unit box the slot-mark wrapper maps onto its 12-unit mark. */
+const StarGlyph = () => <rect x="0" y="0" width="24" height="24" />;
+
 describe("HkBarChart", () => {
   it("renders one labeled bar per bucket and skips zero buckets' paths", () => {
     const el = mount(<HkBarChart bars={BARS} />);
@@ -59,4 +63,126 @@ describe("HkBarChart", () => {
       "weekly playtime",
     );
   });
+
+  // ── showValues ───────────────────────────────────────────────────
+
+  it("showValues renders formatValue above each bar and skips zero buckets", () => {
+    const el = mount(
+      <HkBarChart bars={BARS} showValues formatValue={(v) => `${Math.round(v / 3600)}h`} />,
+    );
+    const values = [...el.querySelectorAll(".hk-bar-chart__value")];
+    // The zero bucket (Wed) carries no label — the wowsp tier histogram's
+    // old labelY-null behavior: an empty slot never shows a stray "0".
+    expect(values.map((t) => t.textContent)).toEqual(["1h", "2h"]);
+    // Each label's baseline sits exactly 5 units above its bar's top —
+    // the path's y coordinates sit at odd indices ("M x0 y L x0 y… Q x y
+    // x y …"), and their minimum IS the top.
+    const topOf = (d: string) => {
+      const nums = d.split(/[\sMLQAZ]+/).filter(Boolean).map(Number);
+      return Math.min(...nums.filter((_, i) => i % 2 === 1));
+    };
+    const tops = [...el.querySelectorAll(".hk-bar-chart__bar")].map((p) =>
+      topOf(p.getAttribute("d") ?? ""),
+    );
+    expect(Number(values[0].getAttribute("y"))).toBeCloseTo(tops[0] - 5, 6);
+    expect(Number(values[1].getAttribute("y"))).toBeCloseTo(tops[1] - 5, 6);
+  });
+
+  it("showValues off by default — old usage renders no value labels", () => {
+    const el = mount(<HkBarChart bars={BARS} />);
+    expect(el.querySelectorAll(".hk-bar-chart__value")).toHaveLength(0);
+  });
+
+  // ── hover event + activeIndex dim-pair ───────────────────────────
+
+  it("emits hover on bar mouseenter / mouseleave with focus / blur parity", () => {
+    const hovers: (number | null)[] = [];
+    const el = mount(<HkBarChart bars={BARS} onHover={(i) => hovers.push(i)} />);
+    const bars = [...el.querySelectorAll(".hk-bar-chart__bar")];
+    bars[0].dispatchEvent(new Event("mouseenter"));
+    bars[1].dispatchEvent(new Event("focus"));
+    bars[1].dispatchEvent(new Event("blur"));
+    bars[0].dispatchEvent(new Event("mouseleave"));
+    expect(hovers).toEqual([0, 1, null, null]);
+  });
+
+  it("activeIndex carries data-hot on the paired bar and data-dim on the others", () => {
+    const el = mount(<HkBarChart bars={BARS} activeIndex={0} />);
+    const bars = [...el.querySelectorAll(".hk-bar-chart__bar")];
+    expect(bars[0].getAttribute("data-hot")).toBe("true");
+    expect(bars[0].hasAttribute("data-dim")).toBe(false);
+    expect(bars[1].getAttribute("data-dim")).toBe("true");
+    expect(bars[1].hasAttribute("data-hot")).toBe(false);
+  });
+
+  it("defaults to no pair — no data-hot / data-dim anywhere", () => {
+    const el = mount(<HkBarChart bars={BARS} />);
+    expect(el.querySelector("[data-hot], [data-dim]")).toBeNull();
+  });
+
+  // ── icon slot mark (the supership Star) ──────────────────────────
+
+  it("renders a resolvable icon in place of the x-label text, sized and centered", () => {
+    const el = mount(
+      <HkBarChart
+        bars={[
+          { label: "10", value: 5, icon: StarGlyph },
+          { label: "11", value: 7 },
+        ]}
+      />,
+    );
+    const marks = [...el.querySelectorAll(".hk-bar-chart__xmark")];
+    expect(marks).toHaveLength(1);
+    // The nested-svg wrapper maps the 24-unit lucide box onto a 12-unit
+    // mark centered on slot 0 (centerX 182) at the x-label's optical
+    // center (baselineY 196 + 4).
+    expect(marks[0].getAttribute("viewBox")).toBe("0 0 24 24");
+    expect(marks[0].getAttribute("width")).toBe("12");
+    expect(marks[0].getAttribute("height")).toBe("12");
+    expect(marks[0].getAttribute("x")).toBe("176");
+    expect(marks[0].getAttribute("y")).toBe("200");
+    // The icon swapped out that slot's text; the other slot keeps its text.
+    expect([...el.querySelectorAll(".hk-bar-chart__x")].map((t) => t.textContent)).toEqual([
+      "11",
+    ]);
+    // The bar's aria string keeps the TEXT label, icon or not.
+    expect(el.querySelector(".hk-bar-chart__bar")?.getAttribute("aria-label")).toContain("10");
+  });
+
+  it("normalizes icons like HkPillToggleGroup — vnode passes through, junk falls back to text", () => {
+    const el = mount(
+      <HkBarChart
+        bars={[
+          { label: "a", value: 3, icon: <rect x="4" y="4" width="16" height="16" /> },
+          { label: "b", value: 4, icon: "not-an-icon" },
+        ]}
+      />,
+    );
+    // The prebuilt vnode rides the mark wrapper; the junk string does not
+    // blank the slot — it falls back to the text label.
+    expect(el.querySelectorAll(".hk-bar-chart__xmark")).toHaveLength(1);
+    expect(el.querySelectorAll(".hk-bar-chart__xmark rect")).toHaveLength(1);
+    expect([...el.querySelectorAll(".hk-bar-chart__x")].map((t) => t.textContent)).toEqual(["b"]);
+  });
+
+  // ── back-compat: the wowsp PlaytimeView usage surface ────────────
+
+  it("old-props usage renders exactly the old surface", () => {
+    const el = mount(
+      <HkBarChart
+        bars={BARS.map((b) => ({ label: b.label, value: b.value, hint: b.hint }))}
+        width={480}
+        formatValue={(v) => `${Math.round(v / 3600)}h`}
+      />,
+    );
+    expect(el.querySelectorAll(".hk-bar-chart__bar")).toHaveLength(2);
+    expect(el.querySelectorAll(".hk-bar-chart__value")).toHaveLength(0);
+    expect(el.querySelectorAll(".hk-bar-chart__xmark")).toHaveLength(0);
+    expect(el.querySelector("[data-hot], [data-dim]")).toBeNull();
+    expect([...el.querySelectorAll(".hk-bar-chart__x")].map((t) => t.textContent)).toEqual([
+      "Mon",
+      "Tue",
+      "Wed",
+    ]);
+  });
 });

package/src/components/HkBarChart.tsx

@@ -1,8 +1,43 @@
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, h, type PropType, type VNode } from "vue";
 
 import { barLayout, type BarSlot } from "./barChart";
 import "./HkBarChart.scss";
 
+/** One bar entry. */
+export interface HkBarChartBar {
+  /** Text label under the slot — also the bar's aria string, even when
+   * an `icon` replaces the visible text. */
+  label: string;
+  value: number;
+  /** Hover/focus hint; defaults to `label: formatValue(value)`. */
+  hint?: string;
+  /** Optional slot mark rendered IN PLACE of the x-label text (the tier
+   * histogram's supership Star). Accepts EITHER a component (a lucide
+   * icon function, a defineComponent options object) or a prebuilt
+   * vnode — normalized exactly like HkPillToggleGroup's icon handling;
+   * anything else falls back to the text label (never a blank slot). */
+  icon?: unknown;
+}
+
+/** Normalize a bar icon to a renderable vnode — the HkPillToggleGroup
+ * convention verbatim: a component (function or options object) is
+ * instantiated with `h`; a prebuilt vnode passes through; anything
+ * else (string, number, null) renders nothing, and the caller falls
+ * back to the text label. */
+function resolveIcon(icon: unknown): VNode | null {
+  if (icon == null) return null;
+  if (typeof icon === "object") return icon as VNode;
+  if (typeof icon === "function") return h(icon as Parameters<typeof h>[0]);
+  return null;
+}
+
+/** The slot-mark box (wowsp's tier-star convention): lucide glyphs draw
+ * in a 24×24 box, so the wrapper nested <svg> maps that box onto a
+ * 12-unit mark centered on the x-label's optical center — the 10-unit
+ * text's baseline is baselineY + 14 and its glyph box spans
+ * ≈ baselineY + 6 … + 14, so a mark from +4 to +16 shares its center. */
+const BAR_MARK = { glyphBox: 24, size: 12, top: 4 } as const;
+
 /**
  * HkBarChart — one bar per bucket over a hand-drawn declarative SVG (no
  * chart library; the HkTreemap/HkCalendarHeatmap dependency-free line).
@@ -16,6 +51,15 @@ import "./HkBarChart.scss";
  * wowsp delegated-tooltip hook reads — hikari itself renders no native
  * title bubble).
  *
+ * The tier histogram's needs ride along as OPTIONAL props (wowsp
+ * ShipDistCharts): `showValues` paints formatValue(value) above each
+ * bar (empty slots carry no label), `hover` + `activeIndex` implement a
+ * dim-pair — the HOST wires activeIndex from the hover events, the bar
+ * at activeIndex carries `data-hot` and every other bar `data-dim` —
+ * and a bar's `icon` replaces its x-label text (the supership slot's
+ * nested-svg Star, positioned/sized here from the 24-unit lucide box).
+ * Defaults reproduce the old output exactly.
+ *
  * Dumb by design: the caller owns aggregation and passes the settled
  * buckets in. All geometry lives in ./barChart (pure, pinned by its own
  * tests).
@@ -27,7 +71,7 @@ export default defineComponent({
   props: {
     /** The bars, in axis order (oldest → newest for trend charts). */
     bars: {
-      type: Array as PropType<{ label: string; value: number; hint?: string }[]>,
+      type: Array as PropType<HkBarChartBar[]>,
       required: true,
     },
     /** Frame size (the SVG viewBox; CSS scales it). */
@@ -42,10 +86,25 @@ export default defineComponent({
     ariaLabel: { type: String, default: null },
     /** Rendered when every bucket is zero / the array is empty. */
     emptyText: { type: String, default: "No data" },
+    /** Paint formatValue(value) as a small label ABOVE each bar. Skip
+     * rule: bars with value <= 0 carry NO label (their slot stays an
+     * empty slot) — the wowsp tier histogram's old labelY-null behavior,
+     * so an unplayed bucket never shows a stray "0". */
+    showValues: { type: Boolean, default: false },
+    /** The dim-pair head: when set, the bar at this index carries
+     * `data-hot` (kept hover lift) and every other bar carries
+     * `data-dim` (≈0.45 opacity). The HOST implements the pair by
+     * wiring this from the `hover` events; null (the default) draws no
+     * pair at all. */
+    activeIndex: { type: Number as PropType<number | null>, default: null },
   },
   emits: {
     /** A bar was clicked (its bucket index). */
     select: (index: number) => typeof index === "number",
+    /** The pointer entered a bar (its bucket index) or left it / the
+     * keyboard focus moved onto or off one (focus/blur parity — null
+     * when the hover ended). */
+    hover: (index: number | null) => typeof index === "number" || index === null,
   },
   setup(props, { emit }) {
     const layout = computed(() =>
@@ -60,7 +119,12 @@ export default defineComponent({
         props.ariaLabel ??
         props.bars.map((b) => `${b.label} ${props.formatValue(b.value)}`).join(", "),
     );
-    const hintOf = (b: { label: string; value: number; hint?: string }, i: number): string =>
+    /** The dim-pair head, normalized: anything but a number (undefined,
+     * null, garbage) means "no pair". */
+    const active = computed(() =>
+      typeof props.activeIndex === "number" ? props.activeIndex : null,
+    );
+    const hintOf = (b: HkBarChartBar, i: number): string =>
       b.hint ?? `${b.label}: ${props.formatValue(b.value)}`;
 
     return () => {
@@ -90,23 +154,58 @@ export default defineComponent({
               </text>
             </g>
           ))}
-          {l.bars.map((s: BarSlot, i: number) => (
-            <g key={i}>
-              {s.path ? (
-                <path
-                  class="hk-bar-chart__bar"
-                  d={s.path}
-                  data-hint={hintOf(props.bars[i], i)}
-                  aria-label={hintOf(props.bars[i], i)}
-                  tabindex={0}
-                  onClick={() => emit("select", i)}
-                />
-              ) : null}
-              <text class="hk-bar-chart__x" x={s.centerX} y={l.baselineY + 14}>
-                {props.bars[i].label}
-              </text>
-            </g>
-          ))}
+          {l.bars.map((s: BarSlot, i: number) => {
+            const bar = props.bars[i];
+            const mark = resolveIcon(bar.icon);
+            return (
+              <g key={i}>
+                {s.path ? (
+                  <path
+                    class="hk-bar-chart__bar"
+                    d={s.path}
+                    data-hint={hintOf(bar, i)}
+                    aria-label={hintOf(bar, i)}
+                    tabindex={0}
+                    data-hot={active.value === i || undefined}
+                    data-dim={(active.value !== null && active.value !== i) || undefined}
+                    onClick={() => emit("select", i)}
+                    onMouseenter={() => emit("hover", i)}
+                    onMouseleave={() => emit("hover", null)}
+                    onFocus={() => emit("hover", i)}
+                    onBlur={() => emit("hover", null)}
+                  />
+                ) : null}
+                {props.showValues && s.labelY != null ? (
+                  <text class="hk-bar-chart__value" x={s.centerX} y={s.labelY}>
+                    {props.formatValue(bar.value)}
+                  </text>
+                ) : null}
+                {mark != null ? (
+                  // The slot mark (the supership's Star): a nested <svg>
+                  // wrapper maps the icon's 24-unit glyph box onto a
+                  // 12-unit mark centered on the x-label's optical
+                  // center — positioned HERE so the consumer passes a
+                  // bare lucide component and knows no geometry. Ink
+                  // (currentColor) lives in SCSS.
+                  <svg
+                    class="hk-bar-chart__xmark"
+                    x={s.centerX - BAR_MARK.size / 2}
+                    y={l.baselineY + BAR_MARK.top}
+                    width={BAR_MARK.size}
+                    height={BAR_MARK.size}
+                    viewBox={`0 0 ${BAR_MARK.glyphBox} ${BAR_MARK.glyphBox}`}
+                    aria-hidden="true"
+                  >
+                    {mark}
+                  </svg>
+                ) : (
+                  <text class="hk-bar-chart__x" x={s.centerX} y={l.baselineY + 14}>
+                    {bar.label}
+                  </text>
+                )}
+              </g>
+            );
+          })}
         </svg>
       );
     };

package/src/components/HkDraggableList.scss

@@ -53,6 +53,32 @@
   }
 }
 
+/* The horizontal axis: the SAME list laid out as ONE never-wrapping row
+ * (wowsp's overlay-columns editor is the first host). Only geometry
+ * changes — the drop line moves to the leading/trailing edge (the
+ * horizontal twin of the top/bottom inset above; the descendant rules
+ * below out-specify the vertical box-shadow, so they REPLACE it rather
+ * than stack onto it), and min-width: 0 lets an over-full row shrink
+ * its items so the single line always holds (the content lane keeps its
+ * own min-width, so ellipsis chains keep working inside them). The
+ * reserved handle lane stays the row's leading column exactly as it is
+ * vertically, and the actions lane stays the row's trailing edge. */
+.hk-draggable-list[data-axis="horizontal"] {
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  .hk-draggable-list-item {
+    min-width: 0;
+  }
+
+  .hk-draggable-list-item[data-placeholder="before"] {
+    box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #7aa2f7);
+  }
+  .hk-draggable-list-item[data-placeholder="after"] {
+    box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #7aa2f7);
+  }
+}
+
 .hk-draggable-list-handle {
   display: flex;
   align-items: center;

package/src/components/HkDraggableList.styles.test.ts

@@ -108,3 +108,66 @@ describe("HkDraggableList actions-lane sheet", () => {
     expect(content).toContain("flex: 1");
   });
 });
+
+describe("HkDraggableList horizontal-axis sheet", () => {
+  /** axis="horizontal" (DOM twin: the horizontal-axis cases in
+   *  HkDraggableList.test.tsx) lays the SAME list as one never-wrapping
+   *  row. Only geometry changes: the drop line moves to the item's
+   *  leading/trailing edge — the horizontal twin of the top/bottom inset
+   *  — and the items become shrinkable so the single line always holds. */
+  const css = listCss();
+
+  // ruleBody selectors are written in the COMPILED form: sass expanded
+  // output drops attribute-value quotes ([data-axis=horizontal]).
+
+  it("lays the horizontal list out as one never-wrapping row", () => {
+    const body = ruleBody(css, ".hk-draggable-list[data-axis=horizontal]");
+    expect(body, "the horizontal-axis layout rule must exist").not.toBeNull();
+    expect(body).toContain("flex-direction: row");
+    expect(body).toContain("flex-wrap: nowrap");
+  });
+
+  it("lets an over-full row shrink its items so the one line holds", () => {
+    const body = ruleBody(
+      css,
+      ".hk-draggable-list[data-axis=horizontal] .hk-draggable-list-item",
+    );
+    expect(body, "the horizontal item rule must exist").not.toBeNull();
+    expect(body).toContain("min-width: 0");
+  });
+
+  it("marks the drop edge on the leading/trailing side, not top/bottom", () => {
+    const before = ruleBody(
+      css,
+      ".hk-draggable-list[data-axis=horizontal] .hk-draggable-list-item[data-placeholder=before]",
+    );
+    expect(before, "the horizontal before rule must exist").not.toBeNull();
+    expect(before).toContain("inset 2px 0 0 0");
+    expect(before).not.toContain("inset 0 2px");
+    expect(before).not.toContain("inset 0 -2px");
+
+    const after = ruleBody(
+      css,
+      ".hk-draggable-list[data-axis=horizontal] .hk-draggable-list-item[data-placeholder=after]",
+    );
+    expect(after, "the horizontal after rule must exist").not.toBeNull();
+    expect(after).toContain("inset -2px 0 0 0");
+    expect(after).not.toContain("inset 0 2px");
+    expect(after).not.toContain("inset 0 -2px");
+  });
+
+  it("keeps the vertical drop edges on top/bottom for the default axis", () => {
+    // First source match = the plain vertical rule (the horizontal twin
+    // comes later and under a descendant selector); its body must carry
+    // the top/bottom inset and never the horizontal one.
+    const before = ruleBody(css, ".hk-draggable-list-item[data-placeholder=before]");
+    expect(before, "the vertical before rule must exist").not.toBeNull();
+    expect(before).toContain("inset 0 2px 0 0");
+    expect(before).not.toContain("inset 2px 0 0 0");
+
+    const after = ruleBody(css, ".hk-draggable-list-item[data-placeholder=after]");
+    expect(after, "the vertical after rule must exist").not.toBeNull();
+    expect(after).toContain("inset 0 -2px 0 0");
+    expect(after).not.toContain("inset -2px 0 0 0");
+  });
+});

package/src/components/HkDraggableList.test.tsx

@@ -525,3 +525,193 @@ describe("HkDraggableList actions lane", () => {
     fireWin("pointerup");
   });
 });
+
+describe("HkDraggableList horizontal axis", () => {
+  /** axis="horizontal" lays the SAME list as one never-wrapping row
+   *  (wowsp's overlay-columns editor). Only the pointer geometry
+   *  changes: the arm reads |dx| alone, the ghost follows BOTH axes,
+   *  and the placeholder targets slots by pointer.x against their
+   *  horizontal midpoints (the plain single-line rule — the list never
+   *  wraps). Roles, slots, the reserved handle lane and the
+   *  commit-once-at-pointerup contract stay exactly as vertical. */
+
+  const PointerEventCtor: typeof MouseEvent =
+    (globalThis as { PointerEvent?: typeof MouseEvent }).PointerEvent ?? MouseEvent;
+
+  const pointerInit: MouseEventInit = { bubbles: true, cancelable: true };
+
+  function fire(el: Element, type: string, x = 0, y = 0) {
+    el.dispatchEvent(new PointerEventCtor(type, {
+      ...pointerInit,
+      button: 0,
+      clientX: x,
+      clientY: y,
+    }));
+  }
+
+  function fireWin(type: string, x = 0, y = 0) {
+    window.dispatchEvent(new PointerEventCtor(type, {
+      ...pointerInit,
+      clientX: x,
+      clientY: y,
+    }));
+  }
+
+  const emitLog: Array<{ from: number; to: number }> = [];
+
+  function mountHorizontal(items: string[], opts?: { lockedKeys?: string[] }): HTMLElement {
+    emitLog.length = 0;
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(
+          HDraggableList,
+          {
+            items: items.map((key) => ({ key })),
+            axis: "horizontal",
+            lockedKeys: opts?.lockedKeys ?? [],
+            onReorder: (from: number, to: number) => emitLog.push({ from, to }),
+          },
+          {
+            item: ({ item }: { item: { key: string } }) =>
+              h("span", { class: "row-body" }, item.key),
+          },
+        ),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    return container.querySelector(".hk-draggable-list") as HTMLElement;
+  }
+
+  function rowsOf(root: HTMLElement): HTMLElement[] {
+    return Array.from(root.querySelectorAll(".hk-draggable-list-item")) as HTMLElement[];
+  }
+
+  /** happy-dom reports zero rects; pin the slots to a 100px-each single
+   *  line [0..100][100..200][200..300] (40px tall) so the midpoint rule
+   *  walks real geometry. */
+  function layLine(root: HTMLElement, width = 100, height = 40): HTMLElement[] {
+    const rows = rowsOf(root);
+    rows.forEach((row, i) => {
+      const left = i * width;
+      row.getBoundingClientRect = () =>
+        ({
+          left,
+          top: 0,
+          right: left + width,
+          bottom: height,
+          width,
+          height,
+          x: left,
+          y: 0,
+          toJSON: () => ({}),
+        }) as DOMRect;
+    });
+    return rows;
+  }
+
+  it("keeps list semantics and marks no axis on the vertical default", () => {
+    const verticalRoot = mountList(["a"], []);
+    expect(verticalRoot.hasAttribute("data-axis")).toBe(false);
+
+    const root = mountHorizontal(["a", "b"]);
+    expect(root.getAttribute("data-axis")).toBe("horizontal");
+    expect(root.getAttribute("role")).toBe("list");
+    const rows = rowsOf(root);
+    expect(rows).toHaveLength(2);
+    expect(rows.every((row) => row.getAttribute("role") === "listitem")).toBe(true);
+  });
+
+  it("arms on |dx| alone — vertical travel never arms a horizontal drag", async () => {
+    const root = mountHorizontal(["a", "b"]);
+    layLine(root);
+    const row = rowsOf(root)[0]!;
+
+    fire(row, "pointerdown", 50, 20);
+    // 30px of pure-Y travel: under the |dx| arm, still a plain press.
+    fireWin("pointermove", 50, 50);
+    await nextTick();
+    expect(row.hasAttribute("data-dragging")).toBe(false);
+
+    // 6px of pure-X travel crosses ARM_PX: the drag publishes.
+    fireWin("pointermove", 56, 50);
+    await nextTick();
+    expect(row.getAttribute("data-dragging")).not.toBeNull();
+
+    fireWin("pointerup");
+  });
+
+  it("moves the ghost on BOTH axes", async () => {
+    const root = mountHorizontal(["a"]);
+    layLine(root); // slot [0..100]
+    // A stale ghost from an earlier failed run would shadow this assert.
+    document.querySelectorAll(".hk-draggable-list-ghost").forEach((n) => n.remove());
+    const row = rowsOf(root)[0]!;
+
+    fire(row, "pointerdown", 50, 20); // grabOffset (50, 20)
+    fireWin("pointermove", 106, 20); // arm past ARM_PX on |dx|
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    let ghost = document.querySelector(".hk-draggable-list-ghost") as HTMLElement | null;
+    expect(ghost, "the ghost must rise next frame").not.toBeNull();
+
+    fireWin("pointermove", 260, 130); // both axes travel: (260-50, 130-20)
+    ghost = document.querySelector(".hk-draggable-list-ghost");
+    expect(ghost!.style.transform).toBe("translate3d(210px, 110px, 0)");
+
+    fireWin("pointerup");
+  });
+
+  it("targets the placeholder by pointer.x against slot midpoints", async () => {
+    const root = mountHorizontal(["a", "b", "c"]);
+    const rows = layLine(root);
+    const row = rows[0]!;
+
+    fire(row, "pointerdown", 50, 20);
+    fireWin("pointermove", 60, 20); // arm; still left of b's midpoint (150) → before b
+    await nextTick();
+    expect(rows[1]!.getAttribute("data-placeholder")).toBe("after");
+
+    fireWin("pointermove", 180, 20); // past b's midpoint, under c's (250) → before c
+    await nextTick();
+    expect(rows[1]!.hasAttribute("data-placeholder")).toBe(false);
+    expect(rows[2]!.getAttribute("data-placeholder")).toBe("after");
+
+    fireWin("pointerup");
+    // Commit-once-at-pointerup: ONE reorder, at the placeholder slot.
+    expect(emitLog).toEqual([{ from: 0, to: 2 }]);
+  });
+
+  it("marks the leading edge when the pointer retreats before earlier slots", async () => {
+    const root = mountHorizontal(["a", "b", "c"]);
+    const rows = layLine(root);
+    const row = rows[2]!;
+
+    fire(row, "pointerdown", 250, 20);
+    fireWin("pointermove", 240, 20); // arm
+    await nextTick();
+
+    fireWin("pointermove", 20, 20); // before a's midpoint (50) → lands before a
+    await nextTick();
+    expect(rows[0]!.getAttribute("data-placeholder")).toBe("before");
+    expect(rows[1]!.hasAttribute("data-placeholder")).toBe(false);
+
+    fireWin("pointerup");
+    expect(emitLog).toEqual([{ from: 2, to: 0 }]);
+  });
+
+  it("skips locked slots when walking the row", async () => {
+    const root = mountHorizontal(["a", "b", "c"], { lockedKeys: ["b"] });
+    const rows = layLine(root);
+    const row = rows[0]!;
+
+    fire(row, "pointerdown", 50, 20);
+    fireWin("pointermove", 160, 20); // past b's midpoint — b is locked, c takes the drop
+    await nextTick();
+    expect(rows[1]!.hasAttribute("data-placeholder")).toBe(false);
+    expect(rows[2]!.getAttribute("data-placeholder")).toBe("after");
+
+    fireWin("pointerup");
+    expect(emitLog).toEqual([{ from: 0, to: 2 }]);
+  });
+});