@celestia-island/hikari 0.54.4 → 0.54.10

package/package.json

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

package/src/components/HkBlankCanvas.scss

@@ -0,0 +1,29 @@
+.hk-blank-canvas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* The mount is absolute so the host's renderer can size itself from the
+   element's box without this component ever contributing layout of its own
+   (a padded or scrolling parent would make the renderer's own measurements
+   disagree with the surface it draws on). */
+.hk-blank-canvas-mount {
+  position: absolute;
+  inset: 0;
+}
+
+/* Overlay chrome (device cards, leader lines, HUD) sits above the surface.
+   Pointer events pass through the layer and are re-enabled per child, so the
+   canvas keeps receiving gestures between the cards. */
+.hk-blank-canvas-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.hk-blank-canvas-overlay > * {
+  pointer-events: auto;
+}

package/src/components/HkBlankCanvas.test.tsx

@@ -0,0 +1,147 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+
+import HkBlankCanvas from "./HkBlankCanvas";
+
+/**
+ * HkBlankCanvas tests — the size-ready gate, the resize/teardown signals and
+ * the overlay layer. The gate is the part worth pinning: initialising a
+ * renderer against a 0 × 0 element is what makes a 3D view flash a wrong
+ * first frame.
+ */
+
+const apps: App[] = [];
+let originalRect: typeof HTMLElement.prototype.getBoundingClientRect;
+let nextSize = { width: 0, height: 0 };
+/** Captured by the ResizeObserver stub so a test can drive a resize. */
+let observed: (() => void) | null = null;
+
+beforeEach(() => {
+  observed = null;
+  originalRect = HTMLElement.prototype.getBoundingClientRect;
+  HTMLElement.prototype.getBoundingClientRect = function (this: HTMLElement) {
+    if (this.classList?.contains("hk-blank-canvas-mount")) {
+      return {
+        width: nextSize.width,
+        height: nextSize.height,
+        top: 0,
+        left: 0,
+        right: nextSize.width,
+        bottom: nextSize.height,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      } as DOMRect;
+    }
+    return originalRect.call(this);
+  };
+  (globalThis as { ResizeObserver?: unknown }).ResizeObserver = class {
+    constructor(callback: () => void) {
+      observed = callback;
+    }
+    observe(): void {}
+    disconnect(): void {}
+    unobserve(): void {}
+  };
+});
+
+afterEach(() => {
+  for (const app of apps.splice(0)) app.unmount();
+  HTMLElement.prototype.getBoundingClientRect = originalRect;
+});
+
+/** The component measures inside a rAF, so tests wait one. */
+const oneFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+
+function mount(props: Record<string, unknown>, slots: Record<string, unknown> = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const Root = defineComponent({
+    setup() {
+      return () => h(HkBlankCanvas, props as never, slots);
+    },
+  });
+  const app = createApp(Root);
+  app.mount(container);
+  apps.push(app);
+  return container;
+}
+
+describe("HkBlankCanvas", () => {
+  it("does not mount while the element measures 0x0", async () => {
+    const onMount = vi.fn();
+    nextSize = { width: 0, height: 0 };
+    const root = mount({ onMount });
+    await nextTick();
+    await oneFrame();
+    expect(onMount).not.toHaveBeenCalled();
+    expect(root.querySelector(".hk-blank-canvas")?.hasAttribute("data-ready")).toBe(false);
+  });
+
+  it("mounts once the element has a size, and reports it", async () => {
+    const onMount = vi.fn();
+    nextSize = { width: 800, height: 600 };
+    const root = mount({ onMount });
+    await nextTick();
+    await oneFrame();
+    expect(onMount).toHaveBeenCalledTimes(1);
+    const [el, size] = onMount.mock.calls[0];
+    expect((el as HTMLElement).classList.contains("hk-blank-canvas-mount")).toBe(true);
+    expect(size).toEqual({ width: 800, height: 600 });
+    await nextTick();
+    expect(root.querySelector(".hk-blank-canvas")?.hasAttribute("data-ready")).toBe(true);
+  });
+
+  it("reports a later size change as a resize, never as a second mount", async () => {
+    const onMount = vi.fn();
+    const onResize = vi.fn();
+    nextSize = { width: 800, height: 600 };
+    mount({ onMount, onResize });
+    await nextTick();
+    await oneFrame();
+    expect(onMount).toHaveBeenCalledTimes(1);
+
+    nextSize = { width: 1024, height: 768 };
+    observed?.();
+    await nextTick();
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(onResize).toHaveBeenCalledWith({ width: 1024, height: 768 });
+  });
+
+  it("does not report a resize when the box did not change", async () => {
+    const onResize = vi.fn();
+    nextSize = { width: 800, height: 600 };
+    mount({ onResize });
+    await nextTick();
+    await oneFrame();
+    observed?.();
+    await nextTick();
+    expect(onResize).not.toHaveBeenCalled();
+  });
+
+  it("signals teardown only after a successful mount", async () => {
+    const onUnmount = vi.fn();
+    nextSize = { width: 0, height: 0 };
+    mount({ onUnmount });
+    await nextTick();
+    await oneFrame();
+    for (const app of apps.splice(0)) app.unmount();
+    expect(onUnmount).not.toHaveBeenCalled();
+
+    // The same teardown after a real mount does fire.
+    nextSize = { width: 640, height: 480 };
+    mount({ onUnmount });
+    await nextTick();
+    await oneFrame();
+    for (const app of apps.splice(0)) app.unmount();
+    expect(onUnmount).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the overlay above the mount", async () => {
+    nextSize = { width: 10, height: 10 };
+    const root = mount({}, { overlay: () => h("div", { class: "hud" }, "hud") });
+    await nextTick();
+    const overlay = root.querySelector(".hk-blank-canvas-overlay");
+    expect(overlay?.querySelector(".hud")?.textContent).toBe("hud");
+  });
+});

package/src/components/HkBlankCanvas.tsx

@@ -0,0 +1,125 @@
+import {
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  type PropType,
+} from "vue";
+
+import "./HkBlankCanvas.scss";
+
+/** The size the host's renderer gets told about, in CSS pixels. */
+export interface BlankCanvasSize {
+  width: number;
+  height: number;
+}
+
+/**
+ * HkBlankCanvas — the base view for a full-bleed mount.
+ *
+ * Some views are a canvas and nothing else: the 3D twin hands the whole
+ * surface to a three.js renderer, an embedded editor hands it to whatever
+ * the host embeds. Their shape is not a layout this library should model, so
+ * this component owns only the parts every one of them needs:
+ *
+ *   - **a 100% × 100% host** — the mount element fills its parent, and the
+ *     component imposes no padding, scroll container or chrome of its own;
+ *   - **a size-ready gate** — `onMount` is not called until the host has a
+ *     non-zero size. Initialising a WebGL context (or an editor) against a
+ *     0 × 0 element is the cause of the "first frame is wrong, then it
+ *     settles" flicker; waiting one frame for layout is cheaper than
+ *     rebuilding the surface;
+ *   - **resize and teardown signals** — `onResize` on every observed size
+ *     change, `onUnmount` before the element goes away, so a renderer can
+ *     dispose its GPU resources;
+ *   - **an overlay slot** — DOM drawn ABOVE the mount (device cards, leader
+ *     lines, HUD), which is what the 3D views put over their canvas.
+ *
+ * The component draws nothing itself: no background, no placeholder, no
+ * error state. A host that needs those renders them in the default slot or
+ * the overlay.
+ */
+export default defineComponent({
+  name: "HkBlankCanvas",
+  props: {
+    /** Called once, when the mount element first has a non-zero size. */
+    onMount: {
+      type: Function as PropType<((el: HTMLElement, size: BlankCanvasSize) => void) | undefined>,
+      default: undefined,
+    },
+    /** Called on every later size change (rounded to whole pixels). */
+    onResize: {
+      type: Function as PropType<((size: BlankCanvasSize) => void) | undefined>,
+      default: undefined,
+    },
+    /** Called before the mount element is removed. */
+    onUnmount: {
+      type: Function as PropType<(() => void) | undefined>,
+      default: undefined,
+    },
+    /** Accessible label for the mount region. */
+    ariaLabel: { type: String, default: undefined },
+  },
+  setup(props, { slots, expose }) {
+    const mountEl = shallowRef<HTMLElement | null>(null);
+    const size = ref<BlankCanvasSize>({ width: 0, height: 0 });
+    /** Whether `onMount` has fired — the gate that keeps a renderer from
+     *  initialising against a 0 × 0 element. */
+    const ready = ref(false);
+    let ro: ResizeObserver | null = null;
+
+    function measure(): BlankCanvasSize {
+      const el = mountEl.value;
+      if (!el) return { width: 0, height: 0 };
+      const rect = el.getBoundingClientRect();
+      return { width: Math.round(rect.width), height: Math.round(rect.height) };
+    }
+
+    function publish() {
+      const next = measure();
+      const changed = next.width !== size.value.width || next.height !== size.value.height;
+      if (changed) size.value = next;
+      if (!ready.value) {
+        if (next.width === 0 || next.height === 0) return;
+        ready.value = true;
+        props.onMount?.(mountEl.value as HTMLElement, next);
+        return;
+      }
+      if (changed) props.onResize?.(next);
+    }
+
+    onMounted(() => {
+      // One frame first: the element exists but its parent may not have been
+      // laid out yet, and the whole point of the gate is not to initialise
+      // against the pre-layout box.
+      requestAnimationFrame(publish);
+      if (typeof ResizeObserver !== "undefined" && mountEl.value) {
+        ro = new ResizeObserver(publish);
+        ro.observe(mountEl.value);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      ro?.disconnect();
+      ro = null;
+      if (ready.value) props.onUnmount?.();
+      ready.value = false;
+    });
+
+    expose({ size, ready, measure });
+
+    return () => (
+      <div
+        class="hk-blank-canvas"
+        aria-label={props.ariaLabel}
+        data-ready={ready.value ? "" : undefined}
+      >
+        <div ref={mountEl} class="hk-blank-canvas-mount">
+          {slots.default?.()}
+        </div>
+        <div class="hk-blank-canvas-overlay">{slots.overlay?.()}</div>
+      </div>
+    );
+  },
+});

package/src/components/HkDrawer.test.tsx

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkDrawer from "./HkDrawer";
+import { usePopupManager } from "../runtime/usePopupManager";
 
 const mounts: ReturnType<typeof createApp>[] = [];
 const containers: HTMLElement[] = [];
@@ -89,3 +90,59 @@ describe("HkDrawer back-guard (window-first back priority)", () => {
     app.unmount();
   });
 });
+
+describe("HkDrawer window-stack close channel", () => {
+  function mount(open: { value: boolean }, closable: boolean, title: string) {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkDrawer, {
+            modelValue: open.value,
+            closable,
+            title,
+            "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+          }, { default: () => h("div", "content") });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    return app;
+  }
+
+  it("closes through the popup manager when the stack navigates back", async () => {
+    const manager = usePopupManager();
+    const below = manager.register("modal", true, "Below");
+    try {
+      const open = ref(true);
+      mount(open, true, "Details");
+      await nextTick();
+
+      expect(manager.closeAbove(below.id)).toBe(1);
+      await nextTick();
+      expect(open.value).toBe(false);
+    } finally {
+      manager.unregister(below.id);
+    }
+  });
+
+  it("cannot close a non-closable drawer", async () => {
+    const manager = usePopupManager();
+    const below = manager.register("modal", true, "Below");
+    try {
+      const open = ref(true);
+      mount(open, false, "Locked");
+      await nextTick();
+
+      // Asked, but the drawer refuses — exactly as it does for Escape.
+      expect(manager.closeAbove(below.id)).toBe(1);
+      await nextTick();
+      expect(open.value).toBe(true);
+    } finally {
+      manager.unregister(below.id);
+    }
+  });
+});

package/src/components/HkDrawer.tsx

@@ -126,7 +126,12 @@ export default defineComponent({
           // Register with the drawer title so the modal-stack breadcrumb
           // labels this layer by name — a drawer is a window on every
           // form factor and must never fall back to a generic label.
-          handle.value = manager.register("drawer", true, props.title);
+          // Close channel for the modal-stack breadcrumb (see
+          // usePopupManager): the drawer owns its dismissal, and a
+          // non-closable drawer refuses like it does for Escape.
+          handle.value = manager.register("drawer", true, props.title, false, () => {
+            if (props.closable) close();
+          });
           overlayHook.open();
           previouslyFocused = document.activeElement as HTMLElement | null;
           if (backGuardEnabled() && backGuard.entries === 0) {

package/src/components/HkKanban.scss

@@ -0,0 +1,81 @@
+.hk-kanban {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+.hk-kanban-strip {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Lanes are flex items, not CSS columns: each keeps its own header and its
+   own card scroller, so a card moving between lanes never reflows the strip. */
+.hk-kanban-lanes {
+  display: flex;
+  align-items: stretch;
+  gap: var(--space-12);
+  min-height: 100%;
+}
+
+.hk-kanban[data-axis="vertical"] .hk-kanban-lanes {
+  flex-direction: column;
+}
+
+.hk-kanban-lane {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: var(--hk-kanban-lane-size, 18rem);
+  border-radius: var(--radius-lg, 0.75rem);
+}
+
+.hk-kanban[data-axis="vertical"] .hk-kanban-lane {
+  width: auto;
+  height: var(--hk-kanban-lane-size, 12rem);
+}
+
+/* The one drop affordance the board owns: the host styles the cards. */
+.hk-kanban-lane[data-drop-target] {
+  outline: 2px dashed currentColor;
+  outline-offset: -2px;
+}
+
+.hk-kanban-lane-header {
+  flex: 0 0 auto;
+  padding: var(--space-8);
+}
+
+/* The card scroller is per lane, so a long lane scrolls without moving the
+   strip — and the lane axis stays free for the board's own scrolling. */
+.hk-kanban-cards {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  padding: 0 var(--space-8) var(--space-8);
+  overflow-y: auto;
+}
+
+.hk-kanban-card {
+  flex: 0 0 auto;
+}
+
+.hk-kanban-card[draggable="true"] {
+  cursor: grab;
+}
+
+.hk-kanban[data-dragging] .hk-kanban-card {
+  cursor: grabbing;
+}
+
+/* The tail is a drop target so a card can be appended to any lane,
+   including an empty one. */
+.hk-kanban-lane-tail {
+  flex: 1 1 auto;
+  min-height: var(--space-24);
+}

package/src/components/HkKanban.test.tsx

@@ -0,0 +1,219 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+
+import HkKanban from "./HkKanban";
+
+/**
+ * HkKanban tests — lanes, headers, cards, the scroll axis, and the drag
+ * contract (a drop emits both ends; a drop on the origin emits nothing).
+ */
+
+interface Lane {
+  key: string;
+  cards: string[];
+}
+
+const apps: App[] = [];
+
+afterEach(() => {
+  for (const app of apps.splice(0)) app.unmount();
+});
+
+function mount(props: Record<string, unknown>, slots: Record<string, unknown> = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const Root = defineComponent({
+    setup() {
+      return () =>
+        h(
+          HkKanban,
+          { ref: undefined, ...props } as never,
+          {
+            laneHeader: ({ lane }: { lane: unknown }) =>
+              h("span", { class: "lane-name" }, (lane as Lane).key),
+            card: ({ card }: { card: unknown }) => h("div", { class: "card" }, String(card)),
+            ...slots,
+          },
+        );
+    },
+  });
+  const app = createApp(Root);
+  app.mount(container);
+  apps.push(app);
+  return container;
+}
+
+const LANES: Lane[] = [
+  { key: "todo", cards: ["a", "b"] },
+  { key: "doing", cards: ["c"] },
+];
+
+const base = {
+  lanes: LANES,
+  laneKeyOf: (lane: unknown) => (lane as Lane).key,
+  cardsOf: (lane: unknown) => (lane as Lane).cards,
+};
+
+/** A drag event the board understands in a DOM without dataTransfer. */
+function dragEvent(type: string): DragEvent {
+  const event = new Event(type, { bubbles: true, cancelable: true }) as DragEvent;
+  Object.defineProperty(event, "dataTransfer", {
+    value: { setData: () => {}, effectAllowed: "", dropEffect: "" },
+    configurable: true,
+  });
+  return event;
+}
+
+describe("HkKanban", () => {
+  it("renders every lane with its header and its cards", async () => {
+    const root = mount(base);
+    await nextTick();
+    const lanes = [...root.querySelectorAll<HTMLElement>(".hk-kanban-lane")];
+    expect(lanes.map((lane) => lane.dataset.lane)).toEqual(["todo", "doing"]);
+    expect(lanes[0].querySelector(".lane-name")?.textContent).toBe("todo");
+    expect(
+      [...lanes[0].querySelectorAll<HTMLElement>(".card")].map((card) => card.textContent),
+    ).toEqual(["a", "b"]);
+  });
+
+  it("carries the scroll axis it was given", async () => {
+    const root = mount({ ...base, axis: "vertical" });
+    await nextTick();
+    expect(root.querySelector(".hk-kanban")?.getAttribute("data-axis")).toBe("vertical");
+  });
+
+  it("renders the empty slot when there are no lanes", async () => {
+    const root = mount(
+      { ...base, lanes: [] },
+      { empty: () => h("p", { class: "none" }, "none") },
+    );
+    await nextTick();
+    expect(root.querySelector(".none")?.textContent).toBe("none");
+    expect(root.querySelectorAll(".hk-kanban-lane")).toHaveLength(0);
+  });
+
+  it("emits a move with both ends when a card lands on another lane", async () => {
+    const moves: unknown[] = [];
+    const root = mount({ ...base, draggable: true, onMove: (m: unknown) => moves.push(m) });
+    await nextTick();
+    const cards = root.querySelectorAll<HTMLElement>(".hk-kanban-card");
+    const target = root.querySelector<HTMLElement>(".hk-kanban-lane[data-lane='doing'] .hk-kanban-lane-tail");
+    expect(cards[0] && target).toBeTruthy();
+
+    cards[0].dispatchEvent(dragEvent("dragstart"));
+    target?.dispatchEvent(dragEvent("dragover"));
+    target?.dispatchEvent(dragEvent("drop"));
+
+    expect(moves).toHaveLength(1);
+    expect(moves[0]).toMatchObject({
+      card: "a",
+      fromLaneKey: "todo",
+      fromIndex: 0,
+      toLaneKey: "doing",
+      toIndex: 1,
+    });
+  });
+
+  it("marks the lane under a dragged card as the drop target", async () => {
+    const root = mount({ ...base, draggable: true });
+    await nextTick();
+    const card = root.querySelector<HTMLElement>(".hk-kanban-card");
+    const lane = root.querySelector<HTMLElement>(".hk-kanban-lane[data-lane='doing']");
+    card?.dispatchEvent(dragEvent("dragstart"));
+    lane?.dispatchEvent(dragEvent("dragover"));
+    await nextTick();
+    expect(lane?.hasAttribute("data-drop-target")).toBe(true);
+  });
+
+  it("stays quiet when a card is dropped where it started", async () => {
+    // The host should not have to filter "nothing moved" itself.
+    const moves: unknown[] = [];
+    const root = mount({ ...base, draggable: true, onMove: (m: unknown) => moves.push(m) });
+    await nextTick();
+    const card = root.querySelector<HTMLElement>(".hk-kanban-card");
+    card?.dispatchEvent(dragEvent("dragstart"));
+    card?.dispatchEvent(dragEvent("dragover"));
+    card?.dispatchEvent(dragEvent("drop"));
+    expect(moves).toHaveLength(0);
+  });
+
+  it("does not make cards draggable unless asked", async () => {
+    const root = mount(base);
+    await nextTick();
+    const card = root.querySelector<HTMLElement>(".hk-kanban-card");
+    expect(card?.hasAttribute("draggable")).toBe(false);
+  });
+
+  it("scrolls the strip on BOTH axes when the axis is both", async () => {
+    // `both` used to be a value nothing consumed: the strip was horizontal
+    // whatever it said. A board whose lanes and cards both overflow has to
+    // travel on either axis.
+    const root = mount({ ...base, axis: "both" });
+    await nextTick();
+    expect(root.querySelector(".hk-kanban")?.getAttribute("data-axis")).toBe("both");
+    expect(root.querySelector(".hk-scroll-container")?.getAttribute("data-axis")).toBe("both");
+  });
+
+  it("scrolls the strip down when the axis is vertical", async () => {
+    const root = mount({ ...base, axis: "vertical" });
+    await nextTick();
+    expect(root.querySelector(".hk-scroll-container")?.getAttribute("data-axis")).toBe("vertical");
+  });
+
+  it("passes the lane size through as the shared variable", async () => {
+    const root = mount({ ...base, laneSize: "22rem" });
+    await nextTick();
+    const lanes = root.querySelector<HTMLElement>(".hk-kanban-lanes");
+    expect(lanes?.style.getPropertyValue("--hk-kanban-lane-size")).toBe("22rem");
+  });
+
+  it("accepts a drop anywhere on the lane, not only on a card", async () => {
+    // The whole lane is highlighted as a target, so the whole lane has to be
+    // one: hovering the header used to show the outline and then swallow the
+    // drop silently.
+    const moves: Array<Record<string, unknown>> = [];
+    const root = mount({
+      ...base,
+      draggable: true,
+      onMove: (m: Record<string, unknown>) => moves.push(m),
+    });
+    await nextTick();
+    root.querySelector<HTMLElement>(".hk-kanban-card")?.dispatchEvent(dragEvent("dragstart"));
+    const header = root.querySelector<HTMLElement>(
+      ".hk-kanban-lane[data-lane='doing'] .hk-kanban-lane-header",
+    );
+    header?.dispatchEvent(dragEvent("dragover"));
+    header?.dispatchEvent(dragEvent("drop"));
+
+    expect(moves).toHaveLength(1);
+    expect(moves[0]).toMatchObject({ card: "a", toLaneKey: "doing", toIndex: 1 });
+  });
+
+  it("marks the drop as handled, so the browser cannot fall back", async () => {
+    const root = mount({ ...base, draggable: true });
+    await nextTick();
+    root.querySelector<HTMLElement>(".hk-kanban-card")?.dispatchEvent(dragEvent("dragstart"));
+    const event = dragEvent("drop");
+    root.querySelector<HTMLElement>(".hk-kanban-lane[data-lane='doing']")?.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("keeps the highlight while the pointer crosses cards inside one lane", async () => {
+    // dragleave bubbles from every child, so an unguarded handler blinks the
+    // outline off when the pointer moves from one card to the next.
+    const root = mount({ ...base, draggable: true });
+    await nextTick();
+    const cards = root.querySelectorAll<HTMLElement>(".hk-kanban-card");
+    const lane = root.querySelector<HTMLElement>(".hk-kanban-lane[data-lane='todo']");
+    cards[0]?.dispatchEvent(dragEvent("dragstart"));
+    lane?.dispatchEvent(dragEvent("dragover"));
+    await nextTick();
+    expect(lane?.hasAttribute("data-drop-target")).toBe(true);
+
+    const leave = dragEvent("dragleave");
+    Object.defineProperty(leave, "relatedTarget", { value: cards[1], configurable: true });
+    cards[0]?.dispatchEvent(leave);
+    await nextTick();
+    expect(lane?.hasAttribute("data-drop-target")).toBe(true);
+  });
+});