@celestia-island/hikari 0.55.275 → 0.55.276

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.275",
+  "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/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 }]);
+  });
+});

package/src/components/HkDraggableList.tsx

@@ -46,6 +46,16 @@ export default defineComponent({
      *  mirroring the menu/vocabulary a11y rulings (#736/#737): chrome
      *  announces structure, the host supplies the name. */
     label: { type: String, default: undefined },
+    /** The direction the list flows: "vertical" (the default) stacks
+     *  rows in one column; "horizontal" lays them in ONE never-wrapping
+     *  row (wowsp's overlay-columns editor is the first host). Only the
+     *  pointer geometry differs — the arm threshold reads |dx| instead
+     *  of the hypot, the ghost follows BOTH axes, and the placeholder
+     *  targets slots by pointer.x against their horizontal midpoints
+     *  (the same adjacent-midpoint rule, walked along the row). Roles,
+     *  slots, the reserved handle lane and the commit-once-at-pointerup
+     *  contract are identical on both axes. */
+    axis: { type: String as PropType<"vertical" | "horizontal">, default: "vertical" },
   },
   emits: {
     reorder: (_fromIndex: number, _toIndex: number) => true,
@@ -173,21 +183,27 @@ export default defineComponent({
       }
     }
 
-    function moveGhost(clientY: number) {
+    function moveGhost(clientX: number, clientY: number) {
       const s = drag.value;
       if (!s || !ghostNode) return;
       // 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.
+      // by the cumulative zoom — divide once at the write layer. A
+      // vertical drag pins the ghost to the source row's x (rows only
+      // ever move along the column); a horizontal drag follows BOTH
+      // axes — a card drifts vertically as naturally as a row drifts.
       const z = ancestorZoom(document.body);
-      const gx = (s.originX - s.grabOffsetX) / z;
+      const gx = (props.axis === "horizontal"
+        ? clientX - s.grabOffsetX
+        : s.originX - s.grabOffsetX) / z;
       const gy = (clientY - s.grabOffsetY) / z;
       ghostNode.style.transform = `translate3d(${gx}px, ${gy}px, 0)`;
     }
 
-    function recomputePlaceholder(clientY: number) {
+    function recomputePlaceholder(clientX: number, clientY: number) {
       const s = drag.value;
       if (!s) return;
+      const horizontal = props.axis === "horizontal";
       const rows = rowEls.value;
       let target = s.fromIndex;
       let fallback = s.fromIndex;
@@ -200,10 +216,15 @@ export default defineComponent({
         if (!el) continue;
 
         const rect = el.getBoundingClientRect();
-        const mid = rect.top + rect.height / 2;
+        // The adjacent-midpoint rule along the list's ONE axis — the
+        // column walks by y, the row walks by x. The horizontal form is
+        // the plain rule over every slot: this list never wraps, so the
+        // pointer's line is always the whole row (no banding).
+        const mid = horizontal ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+        const pointer = horizontal ? clientX : clientY;
         fallback = i;
 
-        if (clientY < mid) {
+        if (pointer < mid) {
           target = i;
           break;
         }
@@ -227,8 +248,14 @@ export default defineComponent({
 
       if (!p.armed) {
         // Arm past the threshold: only now does the drag publish, the
-        // ghost rise, and the gesture claim its defaults.
-        if (Math.hypot(e.clientX - p.state.originX, e.clientY - p.state.originY) <= ARM_PX) {
+        // ghost rise, and the gesture claim its defaults. Vertical arms
+        // on the hypot (travel along either axis counts); horizontal
+        // arms on |dx| alone — a y-wiggle under a pressed card is
+        // jitter, never a drag intent.
+        const travelled = props.axis === "horizontal"
+          ? Math.abs(e.clientX - p.state.originX)
+          : Math.hypot(e.clientX - p.state.originX, e.clientY - p.state.originY);
+        if (travelled <= ARM_PX) {
           return;
         }
         p.armed = true;
@@ -243,8 +270,8 @@ export default defineComponent({
       }
 
       e.preventDefault();
-      moveGhost(e.clientY);
-      recomputePlaceholder(e.clientY);
+      moveGhost(e.clientX, e.clientY);
+      recomputePlaceholder(e.clientX, e.clientY);
     }
 
     function onPointerUp() {
@@ -291,6 +318,7 @@ export default defineComponent({
           class="hk-draggable-list"
           role="list"
           aria-label={props.label || undefined}
+          data-axis={props.axis === "horizontal" ? "horizontal" : undefined}
           data-dragging={s ? "" : undefined}
           data-all-locked={allLocked || undefined}
         >

package/src/runtime/index.ts

@@ -51,6 +51,13 @@ export {
   DESKTOP_GUTTER_PX,
   GUTTER_MOBILE_MAX_WIDTH,
 } from "./viewportGutter";
+// The cumulative CSS-zoom factor between a body-teleported element and
+// the viewport root (runtime/cssZoom.ts). Hosts that measure anchors
+// with gBCR and write fixed px themselves — a horizontal HkDraggableList
+// port especially — need the same ghost-math division the components run
+// internally; until this re-export existed the factor had to be copied
+// verbatim into consumers.
+export { ancestorZoom } from "./cssZoom";
 export {
   displayWidthUnits,
   glyphWidthUnits,