@celestia-island/hikari 0.55.247 → 0.55.248

package/package.json

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

package/src/components/HkWaterfall.scss

@@ -21,11 +21,19 @@
 .hk-waterfall-columns {
   display: flex;
   align-items: flex-start;
-  gap: var(--space-12);
 }
 
 /* Independent columns (not CSS columns): each keeps its own transition
-   group, so a card arriving in one column never reflows the other. */
+   group, so a card arriving in one column never reflows the other.
+   Column spacing rides SIBLING MARGINS, never a container `gap`: a gap is
+   spent between every adjacent pair of rendered flex items — including the
+   pair (live column, collapsed column) — so with a collapsed trailing
+   column the surviving card rendered one `--space-12` narrower than the
+   bucket while the bucket's other children (a full-width bucketHeader
+   caption row) kept the true right edge. Every single-card section drew a
+   ragged right edge against its own header (chest reports view, user
+   screenshot 2026-10-31). A sibling margin is only spent where two
+   width-carrying columns actually sit, and an empty column cancels it. */
 .hk-waterfall-column {
   flex: 1 1 0;
   min-width: 0;
@@ -34,10 +42,23 @@
   gap: var(--space-12);
 }
 
+.hk-waterfall-column + .hk-waterfall-column {
+  margin-inline-start: var(--space-12);
+}
+
 /* A bucket with fewer cards than columns leaves an empty column behind.
    Without this it keeps its `flex: 1 1 0` share of the row and the
    surviving card renders at half width beside a ghost; collapsed, the card
-   takes the full width until the bucket grows a card for that column. */
+   takes the full width until the bucket grows a card for that column —
+   and with the margin-based spacing above it costs no gap either, so the
+   surviving column spans the bucket edge to edge. */
 .hk-waterfall-column[data-empty] {
   flex: 0 0 0;
+  margin-inline-start: 0;
+}
+
+/* Same no-ghost-cost rule on the leading edge: an empty column ahead of a
+   live one must not indent it off the bucket's start edge either. */
+.hk-waterfall-column[data-empty] + .hk-waterfall-column {
+  margin-inline-start: 0;
 }

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

@@ -0,0 +1,66 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { compile } from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Compiled-stylesheet guard for HkWaterfall's column geometry — the axis a
+ * runtime jsdom suite cannot see (it does no layout): how the two masonry
+ * columns share the bucket row.
+ *
+ *   1. column spacing is SIBLING MARGIN, not a container `gap`;
+ *   2. a collapsed (`[data-empty]`) column costs no width AND no spacing —
+ *      a container gap would be spent on the (live, collapsed) pair, so the
+ *      surviving card rendered one `--space-12` narrower than the bucket
+ *      while full-width bucketHeader caption rows kept the true edge: a
+ *      ragged right edge on every single-card section (chest reports view,
+ *      user screenshot 2026-10-31);
+ *   3. a live column AFTER a collapsed one is not indented off the bucket's
+ *      start edge either.
+ *
+ * Vitest stubs CSS, so the runtime suite can never catch a lost rule —
+ * this compiles the sheet directly and asserts the contract.
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+const css = compile(resolve(componentDir, "HkWaterfall.scss"), {
+  style: "expanded",
+}).css;
+
+function ruleFor(selector: string): string {
+  const start = css.indexOf(selector);
+  expect(start, `${selector} present in the compiled sheet`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  const close = css.indexOf("}", open);
+  return css.slice(start, close + 1);
+}
+
+describe("HkWaterfall column spacing contract", () => {
+  it("compiles without warnings", () => {
+    expect(css).toContain(".hk-waterfall-columns");
+  });
+
+  it("the columns row carries no container gap (a gap would be spent on collapsed columns too)", () => {
+    const rule = ruleFor(".hk-waterfall-columns {");
+    expect(rule).not.toContain("gap");
+  });
+
+  it("adjacent live columns are spaced by a sibling margin", () => {
+    const rule = ruleFor(".hk-waterfall-column + .hk-waterfall-column {");
+    expect(rule).toContain("margin-inline-start: var(--space-12)");
+  });
+
+  it("a collapsed column costs no width and no spacing", () => {
+    const rule = ruleFor(".hk-waterfall-column[data-empty] {");
+    expect(rule).toContain("flex: 0 0 0");
+    expect(rule).toContain("margin-inline-start: 0");
+  });
+
+  it("a live column after a collapsed one starts flush at the bucket edge", () => {
+    const rule = ruleFor(".hk-waterfall-column[data-empty] + .hk-waterfall-column {");
+    expect(rule).toContain("margin-inline-start: 0");
+  });
+});