@celestia-island/hikari 0.55.181 → 0.55.183

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.181",
+  "version": "0.55.183",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",
@@ -58,7 +58,7 @@
     "vue": "^*"
   },
   "dependencies": {
-    "@celestia-island/tairitsu-transport": "^0.1",
+    "@celestia-island/tairitsu-transport": "^0.2.0",
     "@xterm/addon-fit": "^0.*",
     "@xterm/addon-image": "^0.10.0-beta.301",
     "@xterm/xterm": "^6.1.0-beta.304",
@@ -69,18 +69,18 @@
     "marked": "^*"
   },
   "devDependencies": {
+    "@types/node": "^*",
     "@types/three": "^*",
-    "three": "^0.185",
     "@vitejs/plugin-vue": "^*",
     "@vitejs/plugin-vue-jsx": "^*",
     "@vue/server-renderer": "^*",
     "happy-dom": "^*",
     "sass": "^*",
+    "three": "^0.185",
     "typescript": "^*",
     "vite": "^*",
-    "vue-tsc": "^*",
     "vitest": "^*",
-    "@types/node": "^*"
+    "vue-tsc": "^*"
   },
   "sideEffects": [
     "**/*.scss",

package/src/components/HkDraggableList.scss

@@ -89,6 +89,23 @@
   display: flex;
   align-items: center;
   gap: var(--space-8, 0.5rem);
+
+  /* A vertical list's row content owns the lane's width: when the host
+     renders ONE root element per row (the card shapes — wowsp's install
+     and account cards), stretch it across the lane so every row fills
+     the list instead of hugging its own text (wowsp report 2026-10-18:
+     the settings card lists shrank to content width after adopting this
+     component — the retired SortableList rows were plain blocks that
+     filled). min-width: 0 keeps ellipsis chains inside the card working.
+     Fragment rows — several sibling elements sharing the lane (chest's
+     tab/subview manager rows) — keep host-owned layout: the selector
+     deliberately does not match them. The drag ghost reuses the row
+     markup, so a single-root ghost fills its frame exactly like its
+     live row. */
+  > :only-child {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
 .hk-draggable-list-ghost {

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

@@ -62,3 +62,22 @@ describe("HkDraggableList handle-lane sheet", () => {
     expect(body).toContain("display: none");
   });
 });
+
+describe("HkDraggableList content-lane fill sheet", () => {
+  const css = listCss();
+
+  it("stretches a single-root row across the lane", () => {
+    const body = ruleBody(css, ".hk-draggable-list-content > :only-child");
+    expect(body, "the :only-child fill rule must exist").not.toBeNull();
+    expect(body).toContain("flex: 1");
+    expect(body).toContain("min-width: 0");
+  });
+
+  // The fill must stay keyed on :only-child: fragment rows (several
+  // siblings sharing the lane) are host-owned layout and must not match.
+  it("never stretches fragment rows — the rule keys on :only-child alone", () => {
+    const fillRules = css.match(/\.hk-draggable-list-content\s*>\s*[^{]+\{/g) ?? [];
+    expect(fillRules.length).toBe(1);
+    expect(fillRules[0]).toContain(":only-child");
+  });
+});

package/src/components/HkDraggableList.test.tsx

@@ -223,6 +223,54 @@ describe("HkDraggableList list semantics", () => {
   });
 });
 
+describe("HkDraggableList content-lane shape", () => {
+  /** The lane hands the slot content through verbatim, and the sheet
+   *  stretches a lane's ONLY element child across the row (the
+   *  `:only-child` fill — sheet twin:
+   *  HkDraggableList.styles.test.ts). That selector's semantics hinge on
+   *  this shape: a single-root slot must land as exactly one element
+   *  child, and a fragment slot as several siblings (which the fill
+   *  deliberately does not match). */
+
+  function mountWithSlot(slot: () => unknown): HTMLElement {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(
+          HDraggableList,
+          { items: [{ key: "a" }] },
+          { item: () => slot() },
+        ),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    return container.querySelector(".hk-draggable-list") as HTMLElement;
+  }
+
+  function laneOf(root: HTMLElement): HTMLElement {
+    return root.querySelector(".hk-draggable-list-content") as HTMLElement;
+  }
+
+  it("lands a single-root slot as the lane's only element child", () => {
+    const root = mountWithSlot(() => h("div", { class: "row-card" }, "body"));
+    const children = Array.from(laneOf(root).children);
+    expect(children).toHaveLength(1);
+    expect(children[0]!.classList.contains("row-card")).toBe(true);
+  });
+
+  it("lands a fragment slot as several lane siblings the fill ignores", () => {
+    const root = mountWithSlot(() => [
+      h("span", { class: "row-lead" }, "lead"),
+      h("span", { class: "row-tail" }, "tail"),
+    ]);
+    const children = Array.from(laneOf(root).children);
+    expect(children).toHaveLength(2);
+    expect(children[0]!.classList.contains("row-lead")).toBe(true);
+    expect(children[1]!.classList.contains("row-tail")).toBe(true);
+  });
+});
+
 describe("HkDraggableList press ergonomics (clickable rows)", () => {
   /** Two guards make a clickable row safe inside the list (ported from
    *  wowsp's SortableList twin, which ran them in production):