@celestia-island/hikari 0.55.184 → 0.55.185

package/package.json

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

package/src/components/HkDraggableList.scss

@@ -108,6 +108,23 @@
   }
 }
 
+/* The per-row actions lane: renders only when the host supplies the
+ * `actions` slot (render-side guard), as a SIBLING of the content lane
+ * inside the row's flex layout — never a child of it, so the content
+ * lane's `> :only-child` fill above keeps stretching single-root rows
+ * even when actions ride along. Pinning is structural: the content lane
+ * keeps flex: 1 and this lane only refuses to shrink, so the actions
+ * land on the row's far edge — no margin-left:auto patch (it would
+ * paper over a content-lane regression instead of letting the fill rule
+ * fail loudly) and no directional property, so the lane follows the
+ * row's inline direction under RTL too. */
+.hk-draggable-list-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  flex-shrink: 0;
+}
+
 .hk-draggable-list-ghost {
   position: fixed;
   top: 0;

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

@@ -81,3 +81,30 @@ describe("HkDraggableList content-lane fill sheet", () => {
     expect(fillRules[0]).toContain(":only-child");
   });
 });
+
+describe("HkDraggableList actions-lane sheet", () => {
+  const css = listCss();
+
+  it("keeps the actions lane fixed at its natural width", () => {
+    const body = ruleBody(css, ".hk-draggable-list-actions");
+    expect(body, "the actions-lane rule must exist").not.toBeNull();
+    expect(body).toContain("display: flex");
+    expect(body).toContain("align-items: center");
+    expect(body).toContain("flex-shrink: 0");
+    // Multiple host buttons in one lane need the lane's own gap so they
+    // never fuse into one cluster against the row edge.
+    expect(body).toContain("gap:");
+  });
+
+  // The right-edge pinning is STRUCTURAL, not a margin patch: the item
+  // row is a flex row and the content lane keeps flex: 1, so the lane
+  // needs nothing beyond shrink-resistance. A margin-left: auto here
+  // would paper over a future content-lane regression instead of
+  // letting the fill sheet fail loudly — pin by ownership, not by patch.
+  it("pins by the content lane's flex: 1, not a margin patch", () => {
+    const body = ruleBody(css, ".hk-draggable-list-actions");
+    expect(body).not.toContain("margin-left: auto");
+    const content = ruleBody(css, ".hk-draggable-list-content");
+    expect(content).toContain("flex: 1");
+  });
+});

package/src/components/HkDraggableList.test.tsx

@@ -390,3 +390,138 @@ describe("HkDraggableList press ergonomics (clickable rows)", () => {
     }
   });
 });
+
+describe("HkDraggableList actions lane", () => {
+  /** The standard row-actions contract: hosts inject trailing buttons
+   *  through the scoped `actions` slot instead of hand-rolling
+   *  ml-auto/flex-1 spacers inside the row content (chest's pricing
+   *  ladder shipped exactly such a hand-rolled group and its buttons
+   *  hugged the row's text mid-card). The lane renders as a SIBLING of
+   *  the content lane — never inside it — so the content sheet's
+   *  `> :only-child` fill keeps matching single-root rows even when
+   *  actions ride along (sheet twin: HkDraggableList.styles.test.ts). */
+
+  function mountWithActions(items: { key: string }[], opts?: { lockedKeys?: string[] }): HTMLElement {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(
+          HDraggableList,
+          { items, lockedKeys: opts?.lockedKeys ?? [] },
+          {
+            item: ({ item }: { item: { key: string } }) =>
+              h("span", { class: "row-body" }, item.key),
+            actions: ({
+              item,
+              index,
+              locked,
+            }: {
+              item: { key: string };
+              index: number;
+              locked: boolean;
+            }) =>
+              h("span", {
+                class: "row-actions",
+                "data-key": item.key,
+                "data-index": index,
+                "data-locked": locked,
+              }),
+          },
+        ),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    return container.querySelector(".hk-draggable-list") as HTMLElement;
+  }
+
+  it("renders a right-lane sibling per row only when the slot is provided", () => {
+    const root = mountWithActions([{ key: "a" }, { key: "b" }]);
+
+    const lanes = Array.from(root.querySelectorAll(".hk-draggable-list-actions"));
+    expect(lanes).toHaveLength(2);
+    for (const lane of lanes) {
+      // Sibling of the content lane, not a child of it — the :only-child
+      // fill contract above must keep matching the row body.
+      expect(lane.closest(".hk-draggable-list-content")).toBeNull();
+      expect(lane.previousElementSibling?.classList.contains("hk-draggable-list-content")).toBe(
+        true,
+      );
+    }
+  });
+
+  it("keeps the content lane's :only-child fill intact alongside the lane", () => {
+    const root = mountWithActions([{ key: "a" }]);
+
+    const content = root.querySelector(".hk-draggable-list-content") as HTMLElement;
+    const elementChildren = Array.from(content.children);
+    expect(elementChildren).toHaveLength(1);
+    expect(elementChildren[0]!.classList.contains("row-body")).toBe(true);
+  });
+
+  it("scopes the slot with item, index, and locked-ness", () => {
+    const root = mountWithActions([{ key: "a" }, { key: "b" }], { lockedKeys: ["b"] });
+
+    const marks = Array.from(root.querySelectorAll(".row-actions")) as HTMLElement[];
+    expect(marks).toHaveLength(2);
+    expect(marks.map((m) => `${m.dataset.key}:${m.dataset.index}:${m.dataset.locked}`).join(",")).toBe(
+      "a:0:false,b:1:true",
+    );
+  });
+
+  it("renders no lane for hosts that do not adopt the slot", () => {
+    const root = mountList(["a"], []);
+
+    expect(root.querySelectorAll(".hk-draggable-list-actions")).toHaveLength(0);
+  });
+
+  it("keeps a press on a lane button from arming a drag — the handle still drags", async () => {
+    /** The lane exists to host buttons, so the row's interactive-content
+     *  exclusion (button, a, input, textarea, select, [contenteditable])
+     *  must own every press that starts on one — and a lane FULL of
+     *  buttons must leave the handle's drag path untouched. */
+    const PointerEventCtor: typeof MouseEvent =
+      (globalThis as { PointerEvent?: typeof MouseEvent }).PointerEvent ?? MouseEvent;
+    const fire = (el: Element, type: string, x = 0, y = 0) =>
+      el.dispatchEvent(
+        new PointerEventCtor(type, { bubbles: true, cancelable: true, button: 0, clientX: x, clientY: y }),
+      );
+    const fireWin = (type: string, x = 0, y = 0) =>
+      window.dispatchEvent(new PointerEventCtor(type, { bubbles: true, cancelable: true, clientX: x, clientY: y }));
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HDraggableList, { items: [{ key: "a" }] }, {
+          item: ({ item }: { item: { key: string } }) => h("span", { class: "row-body" }, item.key),
+          actions: () => [
+            h("button", { class: "lane-button", type: "button" }, "✏"),
+            h("button", { class: "lane-button", type: "button" }, "⋯"),
+          ],
+        }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    const root = container.querySelector(".hk-draggable-list") as HTMLElement;
+    const row = root.querySelector(".hk-draggable-list-item") as HTMLElement;
+    const button = row.querySelector(".lane-button") as HTMLElement;
+    const handle = row.querySelector(".hk-draggable-list-handle") as HTMLElement;
+
+    // Press ON the button (target = button, bubbling to the row) and
+    // travel far past the arm threshold: no drag may publish.
+    fire(button, "pointerdown", 10, 10);
+    fireWin("pointermove", 30, 40);
+    await nextTick();
+    expect(row.hasAttribute("data-dragging")).toBe(false);
+
+    // The same gesture on the handle still arms — a button-filled lane
+    // never breaks the drag path.
+    fire(handle, "pointerdown", 10, 10);
+    fireWin("pointermove", 30, 40);
+    await nextTick();
+    expect(row.getAttribute("data-dragging")).not.toBeNull();
+
+    fireWin("pointerup");
+  });
+});

package/src/components/HkDraggableList.tsx

@@ -334,6 +334,19 @@ export default defineComponent({
                 <div class="hk-draggable-list-content">
                   {slots.item?.({ item, index, locked })}
                 </div>
+                {/* The standard row-actions lane: when the host provides
+                 * an `actions` slot, every row renders this right-pinned
+                 * lane (the content lane keeps flex: 1, so the buttons
+                 * land on the row's far edge structurally — hosts stop
+                 * hand-rolling ml-auto/flex-1 spacers). The lane is
+                 * host-decided content: locked rows may still carry
+                 * actions (chest's pricing ladder), so locked-ness is
+                 * only reported through the slot scope. */}
+                {slots.actions ? (
+                  <div class="hk-draggable-list-actions">
+                    {slots.actions({ item, index, locked })}
+                  </div>
+                ) : null}
               </div>
             );
           })}