@celestia-island/hikari 0.55.269 → 0.55.270

package/package.json

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

package/src/components/HkAboutModal.scss

@@ -262,16 +262,19 @@
 // across both palettes and modes) rather than shipping an unreadable tone
 // colour. The border and background keep the raw channel: only the glyphs owe
 // contrast, the tint is decorative.
+// NOTE (grass constraint, see scripts/sync-vue-mirror.py): the relative-colour
+// form oklch(from ... min/max(l,...) c h) was replaced by an oklab mix toward
+// black/white - an APPROXIMATION of the lightness cap/floor, not channel math.
 .s-about-modal-row-meta[data-tone="positive"] {
   border-color: rgb(var(--color-success) / 32%);
   background: rgb(var(--color-success) / 10%);
-  color: oklch(from rgb(var(--color-success)) min(l, 0.5) c h);
+  color: color-mix(in oklab, rgb(var(--color-success)) 60%, black);
 }
 
 .s-about-modal-row-meta[data-tone="caution"] {
   border-color: rgb(var(--color-warning) / 32%);
   background: rgb(var(--color-warning) / 10%);
-  color: oklch(from rgb(var(--color-warning)) min(l, 0.5) c h);
+  color: color-mix(in oklab, rgb(var(--color-warning)) 60%, black);
 }
 
 // Red state: the component is not wired up / unreachable. The row then
@@ -279,21 +282,21 @@
 .s-about-modal-row-meta[data-tone="danger"] {
   border-color: rgb(var(--color-error) / 32%);
   background: rgb(var(--color-error) / 10%);
-  color: oklch(from rgb(var(--color-error)) min(l, 0.5) c h);
+  color: color-mix(in oklab, rgb(var(--color-error)) 60%, black);
 }
 
 // Dark arm: floor the lightness instead of capping it (rationale above). Only
 // the glyphs re-ink — the border and tint already ride the live channel.
 [data-mode="dark"] .s-about-modal-row-meta[data-tone="positive"] {
-  color: oklch(from rgb(var(--color-success)) max(l, 0.72) c h);
+  color: color-mix(in oklab, rgb(var(--color-success)) 30%, white);
 }
 
 [data-mode="dark"] .s-about-modal-row-meta[data-tone="caution"] {
-  color: oklch(from rgb(var(--color-warning)) max(l, 0.72) c h);
+  color: color-mix(in oklab, rgb(var(--color-warning)) 30%, white);
 }
 
 [data-mode="dark"] .s-about-modal-row-meta[data-tone="danger"] {
-  color: oklch(from rgb(var(--color-error)) max(l, 0.72) c h);
+  color: color-mix(in oklab, rgb(var(--color-error)) 30%, white);
 }
 
 /* ── Links: licenses, external links, credits names and filings ───────── */

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

@@ -251,6 +251,14 @@ describe("HkAboutModal stylesheet contract", () => {
     const TONE = (tone: string) => `.s-about-modal-row-meta[data-tone=${tone}]`;
     const DARK_TONE = (tone: string) => `[data-mode=dark] ${TONE(tone)}`;
 
+    // GRASS CONSTRAINT (2026-11): the Rust mirror compiles these sheets
+    // through `grass`, which cannot parse relative colour syntax — so the
+    // seed-relative `oklch(from … min/max(l, …) c h)` arms this contract used
+    // to pin are now an oklab MIX toward black/white (an approximation of the
+    // lightness cap/floor, not channel math). See HkAboutModal.scss's NOTE and
+    // scripts/sync-vue-mirror.py; the approximation is tuned to the same
+    // contrast bound.
+    //
     // Channel behind each coloured tone, and the WCAG-AA ink derived from it.
     // The pill text is `--text-2xs` (10px) — small text, 4.5:1 — and the raw
     // channel misses that on both shipped palettes (stock light warning sits
@@ -268,9 +276,9 @@ describe("HkAboutModal stylesheet contract", () => {
     // (shipped once — chest #2027). Reverting an arm to the raw channel, or
     // dropping either mode arm, must turn this red.
     const AA_INK_LIGHT = (channel: string) =>
-      `oklch(from rgb(var(--color-${channel})) min(l, 0.5) c h)`;
+      `color-mix(in oklab, rgb(var(--color-${channel})) 60%, black)`;
     const AA_INK_DARK = (channel: string) =>
-      `oklch(from rgb(var(--color-${channel})) max(l, 0.72) c h)`;
+      `color-mix(in oklab, rgb(var(--color-${channel})) 30%, white)`;
     const TONES: Record<string, string> = {
       positive: "success",
       caution: "warning",

package/src/components/HkAltSignIn.tsx

@@ -17,7 +17,7 @@ export interface HkAltSignInEntry {
  *
  * A small muted trigger row (styled in the `.s-auth-footer` grammar) that
  * opens a popover listing third-party/alternative credential entries —
- * platform passkey on shittim-chest, feishu OAuth on easy-hydro-erp — so
+ * platform passkey on shittim-chest, feishu OAuth on the ERP adopter — so
  * both apps share one implementation and only differ in content.
  *
  * Entries render as [`HkMenuActionItem`] rows inside an [`HkPopover`]

package/src/components/HkBoard.tsx

@@ -2,7 +2,7 @@
  * HkBoard — the shared node-and-edge board surface.
  *
  * ONE world-camera canvas that every graph-like page builds on (history
- * topic maps, SCADA scenes, PLC panels, and whatever comes next). The
+ * topic maps, operations scenes, PLC panels, and whatever comes next). The
  * board owns the motion feel and the chrome; the page owns the layout:
  *
  *  - CAMERA: 5% geometric zoom ladder with an ANIMATED settle (no snapping),
@@ -221,7 +221,7 @@ export default defineComponent({
     let pinchBase: { cam: BoardCamera; dist: number; mid: BoardPoint } | null = null;
     let dragState: { node: BoardNodeInput; sx: number; sy: number; ox: number; oy: number; moved: boolean } | null = null;
     // Every node press is tracked (draggable or not) so read-only boards
-    // — SCADA scenes, mind maps — still get `nodeClick` on a short tap.
+    // — operations scenes, mind maps — still get `nodeClick` on a short tap.
     let pressed: { id: string; pointerId: number; x: number; y: number } | null = null;
 
     /** How many of the board's own pixels one DRAWN pixel is worth: the

package/src/components/HkDraggableGrid.scss

@@ -16,7 +16,7 @@
   min-height: 44px;
   border: 1px dashed var(--hi-color-primary, #7aa2f7);
   border-radius: var(--radius-sm, 4px);
-  background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
+  background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 4%, transparent);
 }
 
 .hk-draggable-grid-cell {
@@ -47,7 +47,7 @@
     transform: scale(0.96);
     border-style: dashed;
     border-color: var(--hi-color-primary, #7aa2f7);
-    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
+    background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 4%, transparent);
     cursor: grabbing;
   }
 

package/src/components/HkDraggableList.scss

@@ -31,7 +31,7 @@
     transform: scale(0.96);
     border-style: dashed;
     border-color: var(--hi-color-primary, #7aa2f7);
-    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
+    background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 4%, transparent);
     cursor: grabbing;
   }
 

package/src/components/HkInput.scss

@@ -256,9 +256,11 @@
 }
 
 /* Autofill overrides */
+/* The finite duration (instead of `calc(infinity * 1s)`) keeps this sheet
+   compilable by the grass compiler the Rust form shares it with. */
 .hk-input-box input,
 .hk-input-box textarea {
-  transition: color calc(infinity * 1s) step-end, background-color calc(infinity * 1s) step-end;
+  transition: color 100000000s step-end, background-color 100000000s step-end;
 }
 
 .hk-input-box input:-webkit-autofill,

package/src/components/HkListTransition.scss

@@ -140,7 +140,11 @@
 .hk-list-reveal-enter-from,
 .hk-list-reveal-leave-to {
   opacity: 0;
-  height: calc-size(auto, size * 0.8);
+  /* grass-compatible fallback: the Rust form compiles this same sheet, and
+   * grass cannot parse `calc-size(auto, size * 0.8)` (see the sync script's
+   * compile constraints). 80% of the container is the closest equivalent the
+   * parser accepts; the enter/leave reveal keeps its opacity fade either way. */
+  height: 80%;
 }
 
 .hk-list-reveal-move {

package/src/components/HkMasonry.scss

@@ -0,0 +1,53 @@
+// AI-generated: developed with a DeepSeek Harness agent (model GLM-5.3-flash); human-directed.
+
+/* HkMasonry — the column geometry (see the component docblock for the
+ * contract). Independent flex columns, NOT CSS columns: a card is placed
+ * whole into one column, so nothing can fragment it and no balancer can
+ * go stale under it.
+ *
+ * Column spacing rides SIBLING MARGINS, never a container `gap` — the
+ * same lesson HkWaterfall's sheet records: a gap is spent between every
+ * adjacent pair of rendered flex items, including a (live, collapsed)
+ * pair, so a trailing empty column would shave the survivor narrower than
+ * the host's other full-width children. A sibling margin is only spent
+ * where two width-carrying columns actually sit, and an empty column
+ * cancels it on both edges.
+ *
+ * Hosts tune the density with --hk-masonry-gap (vertical card gap inside a
+ * column AND the horizontal sibling margin); it defaults to --space-12. */
+
+.hk-masonry {
+  display: flex;
+  align-items: flex-start;
+}
+
+.hk-masonry-col {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--hk-masonry-gap, var(--space-12));
+}
+
+.hk-masonry-col + .hk-masonry-col {
+  margin-inline-start: var(--hk-masonry-gap, var(--space-12));
+}
+
+/* Fewer cards than columns: the empty column must not keep its flex share
+   (the survivor would render half width beside a ghost), and with the
+   sibling-margin spacing above its collapse costs no gap on either edge. */
+.hk-masonry-col[data-empty] {
+  flex: 0 0 0;
+  margin-inline-start: 0;
+}
+
+.hk-masonry-col[data-empty] + .hk-masonry-col {
+  margin-inline-start: 0;
+}
+
+/* The card wrapper is layout-transparent: the slot content owns its own
+   chrome, and the wrapper exists so the observer measures ONE stable box
+   per key regardless of what the card renders. */
+.hk-masonry-card {
+  min-width: 0;
+}

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

@@ -0,0 +1,109 @@
+// AI-generated: developed with a DeepSeek Harness agent (model GLM-5.3-flash); human-directed.
+
+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 HkMasonry's column geometry — the axis a
+ * runtime suite cannot see (happy-dom applies no stylesheets).
+ *
+ * The invariant this pins: columns are independent flex stacks whose
+ * spacing is SIBLING MARGIN, cancelled on a collapsed ([data-empty])
+ * column on both edges — never a container `gap` (a gap is spent on the
+ * (live, collapsed) pair too and shaves the survivor narrower than the
+ * host's other full-width children), and NEVER a CSS-multicol property
+ * (`columns` / `break-inside`), the fragmentation layout this component
+ * exists to replace. Same ownership discipline as the HkWaterfall sheet
+ * guard: the compiled sheet must contain EXACTLY the rules below, each
+ * with EXACTLY its pinned declaration list, and nothing else in the sheet
+ * may mention the columns.
+ *
+ * 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 compiled = compile(resolve(componentDir, "HkMasonry.scss"), {
+  style: "expanded",
+}).css;
+
+// Expanded sass keeps comments inline and may emit an @charset preamble;
+// both must go before rule parsing or they glue onto captured selectors.
+const css = compiled
+  .replace(/\/\*[\s\S]*?\*\//g, "")
+  .replace(/^@charset[^;]*;/m, "");
+
+function rules(source: string): { selector: string; decls: string[] }[] {
+  expect(source, "no at-rule may appear in the compiled sheet").not.toContain(
+    "@",
+  );
+  expect(source, "no nested braces in the compiled sheet").not.toMatch(
+    /\{[^{}]*\{/,
+  );
+  return [...source.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map((m) => ({
+    selector: m[1].replace(/\s+/g, " ").trim(),
+    decls: m[2]
+      .split(";")
+      .map((d) => d.replace(/\s+/g, " ").trim())
+      .filter(Boolean),
+  }));
+}
+
+const allRules = (): { selector: string; decls: string[] }[] => rules(css);
+
+function expectRule(selector: string, decls: string[]): void {
+  const hits = allRules().filter((r) => r.selector === selector);
+  expect(hits, `exactly one "${selector}" rule`).toHaveLength(1);
+  expect(hits[0].decls, `declarations of "${selector}"`).toEqual(decls);
+}
+
+function columnRules(): { selector: string; decls: string[] }[] {
+  return allRules().filter((r) => r.selector.includes("hk-masonry-col"));
+}
+
+describe("HkMasonry column spacing contract", () => {
+  it("compiles into the expected flat sheet", () => {
+    expect(css).toContain(".hk-masonry");
+  });
+
+  it("the column machinery is exactly five rules with exactly these declarations", () => {
+    expect(columnRules().map((r) => r.selector).sort()).toEqual(
+      [
+        ".hk-masonry-col",
+        ".hk-masonry-col + .hk-masonry-col",
+        ".hk-masonry-col[data-empty]",
+        ".hk-masonry-col[data-empty] + .hk-masonry-col",
+      ].sort(),
+    );
+    expectRule(".hk-masonry-col", [
+      "flex: 1 1 0",
+      "min-width: 0",
+      "display: flex",
+      "flex-direction: column",
+      "gap: var(--hk-masonry-gap, var(--space-12))",
+    ]);
+    expectRule(".hk-masonry-col + .hk-masonry-col", [
+      "margin-inline-start: var(--hk-masonry-gap, var(--space-12))",
+    ]);
+    expectRule(".hk-masonry-col[data-empty]", [
+      "flex: 0 0 0",
+      "margin-inline-start: 0",
+    ]);
+    expectRule(".hk-masonry-col[data-empty] + .hk-masonry-col", [
+      "margin-inline-start: 0",
+    ]);
+  });
+
+  it("the sheet never speaks fragmentation layout", () => {
+    // The whole point of the component: no multicol anywhere, in any rule,
+    // under any alias the shorthand family offers.
+    expect(css).not.toMatch(/\bcolumns\s*:/);
+    expect(css).not.toMatch(/break-inside/);
+    expect(css).not.toMatch(/column-(gap|count|fill|width)/);
+  });
+});

package/src/components/HkMasonry.test.tsx

@@ -0,0 +1,211 @@
+// AI-generated: developed with a DeepSeek Harness agent (model GLM-5.3-flash); human-directed.
+
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+
+import HkMasonry from "./HkMasonry";
+
+/**
+ * HkMasonry tests — the packing MECHANISM: reading-order greedy fill while
+ * heights are unknown, the measured-height re-pack (including the wowsp
+ * spec-panel regression: a card GROWS in place and the cards below it must
+ * re-pack, not stay clipped under a stale column height), the width-derived
+ * column count, and the empty-column collapse.
+ */
+
+interface ROEntry {
+  target: HTMLElement;
+  contentRect: { width: number; height: number };
+}
+
+/** Minimal ResizeObserver fake the suite drives by hand. */
+class FakeResizeObserver {
+  static instances: FakeResizeObserver[] = [];
+  callback: (entries: ROEntry[]) => void;
+  observed = new Set<HTMLElement>();
+
+  constructor(callback: (entries: ROEntry[]) => void) {
+    this.callback = callback;
+    FakeResizeObserver.instances.push(this);
+  }
+  observe(el: HTMLElement): void {
+    this.observed.add(el);
+  }
+  unobserve(el: HTMLElement): void {
+    this.observed.delete(el);
+  }
+  disconnect(): void {
+    this.observed.clear();
+  }
+  fire(entries: ROEntry[]): void {
+    this.callback(entries);
+  }
+  /** The spec's initial observation: observe() reports the current size. */
+  fireInitial(width: number, heightOf: (el: HTMLElement) => number): void {
+    this.fire([...this.observed].map((el) => ({ target: el, contentRect: { width, height: heightOf(el) } })));
+  }
+}
+
+const apps: App[] = [];
+const containers: HTMLElement[] = [];
+
+beforeEach(() => {
+  FakeResizeObserver.instances = [];
+  (globalThis as { ResizeObserver?: unknown }).ResizeObserver = FakeResizeObserver;
+});
+
+afterEach(() => {
+  for (const app of apps.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+  delete (globalThis as { ResizeObserver?: unknown }).ResizeObserver;
+});
+
+interface Mounted {
+  app: App;
+  root: HTMLElement;
+  /** Every ResizeObserver the component created: [cards, root]. */
+  observers: FakeResizeObserver[];
+}
+
+function mount(props: Record<string, unknown>): Mounted {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+  const cardSlot = ({ item }: { item: unknown }) => h("div", { class: "card" }, String(item));
+  // Item-name keys by default: the RO height tables below are keyed "a".."e",
+  // so the wrappers' data-masonry-key must match (the positional fallback
+  // would key them "0".."n" and every fired report would miss).
+  const keyed = { itemKeyOf: (item: unknown) => String(item), ...props };
+  const Root = defineComponent({
+    setup() {
+      return () => h(HkMasonry, { items: (props.items ?? []) as never, ...keyed }, { card: cardSlot });
+    },
+  });
+  const app = createApp(Root);
+  app.mount(container);
+  apps.push(app);
+  return {
+    app,
+    root: container,
+    observers: FakeResizeObserver.instances.filter((ro) => ro.observed.size > 0 || FakeResizeObserver.instances.length > 0),
+  };
+}
+
+/** The card observer: the one watching card wrappers (it has the most). */
+function cardObserver(mounted: Mounted): FakeResizeObserver {
+  return mounted.observers.reduce((a, b) => (b.observed.size > a.observed.size ? b : a));
+}
+
+/** Per-column card TEXT (the slot renders String(item)) — the packing
+ *  assertion reads placement, not identity; dataset keys are positional
+ *  unless itemKeyOf is set, and one test pins those separately. */
+function columnKeys(root: HTMLElement): string[][] {
+  return [...root.querySelectorAll<HTMLElement>(".hk-masonry-col")].map((col) =>
+    [...col.querySelectorAll<HTMLElement>(".card")].map((el) => el.textContent ?? ""),
+  );
+}
+
+function cardEls(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(".hk-masonry-card")];
+}
+
+describe("HkMasonry", () => {
+  it("packs count-greedy in reading order while heights are unknown", () => {
+    const mounted = mount({ items: ["a", "b", "c", "d", "e"], columns: 3 });
+    // forward greedy: a->0, b->1, c->2, d->0, e->1
+    expect(columnKeys(mounted.root)).toEqual([["a", "d"], ["b", "e"], ["c"]]);
+  });
+
+  it("re-packs by measured heights once the observers report", async () => {
+    const mounted = mount({ items: ["a", "b", "c", "d", "e"], columns: 3 });
+    const ro = cardObserver(mounted);
+    await fireHeights(mounted, ro, { a: 300, b: 10, c: 10, d: 10, e: 10 });
+    // totals after each drop: a->0(300), b->1(10), c->2(10), d->1(20), e->2(20)
+    expect(columnKeys(mounted.root)).toEqual([["a"], ["b", "d"], ["c", "e"]]);
+  });
+
+  it("re-packs when a card grows in place — the stale-balancer regression", async () => {
+    const mounted = mount({ items: ["a", "b", "c", "d", "e"], columns: 3 });
+    const ro = cardObserver(mounted);
+    await fireHeights(mounted, ro, { a: 300, b: 10, c: 10, d: 10, e: 10 });
+    expect(columnKeys(mounted.root)).toEqual([["a"], ["b", "d"], ["c", "e"]]);
+    // b grows past a: the walk now strands later cards in the tail column
+    // instead of freezing the old geometry (multicol kept the pre-change
+    // column height and clipped — flex columns re-pack whole cards).
+    await fireHeights(mounted, ro, { a: 300, b: 400, c: 10, d: 10, e: 10 });
+    expect(columnKeys(mounted.root)).toEqual([["a"], ["b"], ["c", "d", "e"]]);
+  });
+
+  it("derives the column count from the measured width under columns=auto", async () => {
+    const mounted = mount({ items: ["a", "b", "c"], columns: "auto", columnMinWidth: 220 });
+    const rootRo = mounted.observers[mounted.observers.length - 1];
+    rootRo.fire([{ target: mounted.root.querySelector(".hk-masonry")!, contentRect: { width: 900, height: 0 } }]);
+    await nextTick();
+    expect(mounted.root.querySelector(".hk-masonry")?.getAttribute("data-columns")).toBe("4");
+    rootRo.fire([{ target: mounted.root.querySelector(".hk-masonry")!, contentRect: { width: 500, height: 0 } }]);
+    await nextTick();
+    expect(mounted.root.querySelector(".hk-masonry")?.getAttribute("data-columns")).toBe("2");
+  });
+
+  it("collapses columns that received no card", () => {
+    const mounted = mount({ items: ["a"], columns: 3 });
+    const empties = [...mounted.root.querySelectorAll<HTMLElement>(".hk-masonry-col[data-empty]")];
+    expect(empties).toHaveLength(2);
+    expect(columnKeys(mounted.root)).toEqual([["a"], [], []]);
+  });
+
+  it("keys cards through itemKeyOf and falls back to position", () => {
+    const keyed = mount({ items: ["a", "b"], columns: 2, itemKeyOf: (item: unknown) => `k-${String(item)}` });
+    expect(cardEls(keyed.root).map((el) => el.dataset.masonryKey)).toEqual(["k-a", "k-b"]);
+    // explicit undefined overrides the harness default — this IS the
+    // positional-fallback case
+    const positional = mount({ items: ["a", "b"], columns: 2, itemKeyOf: undefined });
+    expect(cardEls(positional.root).map((el) => el.dataset.masonryKey)).toEqual(["0", "1"]);
+  });
+
+  it("ignores zero-height reports instead of poisoning the height table", async () => {
+    const mounted = mount({ items: ["a", "b", "c", "d"], columns: 2 });
+    const ro = cardObserver(mounted);
+    await fireHeights(mounted, ro, { a: 100, b: 50, c: 50, d: 50 });
+    expect(columnKeys(mounted.root)).toEqual([["a", "d"], ["b", "c"]]);
+    // a collapses (display:none) — the stale height must survive the 0.
+    await fireHeights(mounted, ro, { a: 0, b: 50, c: 50, d: 50 });
+    expect(columnKeys(mounted.root)).toEqual([["a", "d"], ["b", "c"]]);
+  });
+
+  it("renders without ResizeObserver (SSR-ish hosts) and still lays out", () => {
+    delete (globalThis as { ResizeObserver?: unknown }).ResizeObserver;
+    const mounted = mount({ items: ["a", "b", "c"], columns: 2 });
+    expect(columnKeys(mounted.root)).toEqual([["a", "c"], ["b"]]);
+  });
+
+  it("renders the empty slot for an empty stream", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Root = defineComponent({
+      setup() {
+        return () =>
+          h(HkMasonry, { items: [] as never, columns: 2 }, { empty: () => h("p", { class: "none" }, "nothing") });
+      },
+    });
+    const app = createApp(Root);
+    app.mount(container);
+    apps.push(app);
+    expect(container.querySelector(".none")?.textContent).toBe("nothing");
+    expect(container.querySelectorAll(".hk-masonry-col")).toHaveLength(0);
+  });
+});
+
+async function fireHeights(
+  mounted: Mounted,
+  ro: FakeResizeObserver,
+  heights: Record<string, number>,
+): Promise<void> {
+  ro.fire(cardEls(mounted.root).map((el) => ({
+    target: el,
+    contentRect: { width: 200, height: heights[el.dataset.masonryKey ?? ""] ?? 0 },
+  })));
+  // the height table lands through Vue's async render effect
+  await nextTick();
+}