@celestia-island/hikari 0.54.8 → 0.54.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.54.8",
+  "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/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);
+  });
+});

package/src/components/HkKanban.tsx

@@ -0,0 +1,264 @@
+import {
+  computed,
+  defineComponent,
+  ref,
+  shallowRef,
+  type PropType,
+} from "vue";
+
+import "./HkKanban.scss";
+import HScrollContainer from "./HkScrollContainer";
+
+/** Which way a board scrolls. */
+export type KanbanAxis = "horizontal" | "vertical" | "both";
+
+/** What the `laneHeader` slot receives — enough to draw the header AS a
+ *  card, which is what the chat node list does with its left-hand labels. */
+export interface KanbanHeaderSlotProps {
+  lane: unknown;
+  laneIndex: number;
+  laneKey: string;
+  cards: readonly unknown[];
+}
+
+/** What the `card` slot receives for one card. */
+export interface KanbanCardSlotProps {
+  card: unknown;
+  cardIndex: number;
+  lane: unknown;
+  laneIndex: number;
+  laneKey: string;
+}
+
+/** Emitted when a card is dropped on another lane (or another position). */
+export interface KanbanMove {
+  card: unknown;
+  fromLaneKey: string;
+  fromIndex: number;
+  toLaneKey: string;
+  /** Where the card lands in the target lane, in the TARGET's coordinates:
+   *  the host inserts at this index AFTER removing the card from its source
+   *  lane (so moving a card to the end is `toIndex === targetLength`). */
+  toIndex: number;
+}
+
+/**
+ * HkKanban — the base view for boards of typed, draggable cards.
+ *
+ * It is deliberately NOT a waterfall variant. A waterfall enumerates one
+ * stream into columns; a board is a set of LANES, each with a header that may
+ * itself be a card, each holding cards that can be dragged between lanes.
+ * The chat node list is this shape taken to its extreme (the left-hand
+ * label of every row is a card of its own), and so is the multidimensional
+ * table's board view — which is why both specialise this component rather
+ * than the waterfall.
+ *
+ * What it owns:
+ *
+ *   - **lanes** — ordered, with a stable key each (the header's identity and
+ *     the drop target);
+ *   - **axes** — `horizontal` (lanes side by side), `vertical` (lanes
+ *     stacked) or `both`, because a board's lane axis and its card axis are
+ *     independent;
+ *   - **headers** — rendered through a slot, so a header can be a plain
+ *     label, a card, or a control cluster;
+ *   - **drag and drop** — when `draggable`, cards carry the native drag
+ *     contract and a completed drop emits `move` with both ends; the host
+ *     applies it (and may reject it, since the board never mutates data).
+ *
+ * What it does NOT own: card content, lane sizing beyond `laneSize`, and any
+ * data mutation — a board is a view of the host's model, never its owner.
+ */
+export default defineComponent({
+  name: "HkKanban",
+  props: {
+    /** The lanes, in display order. */
+    lanes: { type: Array as PropType<readonly unknown[]>, required: true },
+    /** Stable key of a lane — the header's identity and the drop target. */
+    laneKeyOf: {
+      type: Function as PropType<(lane: unknown, index: number) => string>,
+      required: true,
+    },
+    /** The cards inside a lane, in display order. */
+    cardsOf: {
+      type: Function as PropType<(lane: unknown, index: number) => readonly unknown[]>,
+      required: true,
+    },
+    /** Stable key of a card, when the host has one (drag identity). */
+    cardKeyOf: {
+      type: Function as PropType<(card: unknown, index: number) => string>,
+      default: undefined,
+    },
+    /** Which way the board scrolls. */
+    axis: { type: String as PropType<KanbanAxis>, default: "horizontal" },
+    /** CSS width (horizontal / both) or height (vertical) of one lane. */
+    laneSize: { type: String, default: undefined },
+    /** Whether cards can be dragged between lanes. */
+    draggable: { type: Boolean, default: false },
+    ariaLabel: { type: String, default: undefined },
+  },
+  emits: ["move"],
+  setup(props, { slots, emit, expose }) {
+    const scrollHost = shallowRef<{ getScrollElement: () => HTMLElement | undefined } | null>(null);
+    /** The card being dragged, kept at module scope of the setup so a drop
+     *  can name both ends without the host tracking drag state. */
+    const dragging = ref<{ laneKey: string; index: number; card: unknown } | null>(null);
+    const dropTarget = ref<string | null>(null);
+
+    const cardsFor = (lane: unknown, index: number) => props.cardsOf(lane, index);
+
+    /** The scroll axis of the lane strip itself, straight from `axis`: a
+     *  horizontal board scrolls across, a vertical one down, and `both`
+     *  scrolls the strip BOTH ways (the lane axis and the card axis are
+     *  independent, and a board may need to travel on either). */
+    const stripAxis = computed(() => props.axis);
+
+    function onDragStart(card: unknown, laneKey: string, index: number, event: DragEvent) {
+      if (!props.draggable) return;
+      dragging.value = { laneKey, index, card };
+      event.dataTransfer?.setData("text/plain", laneKey);
+      if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+    }
+
+    function onDragOver(laneKey: string, event: DragEvent) {
+      if (!props.draggable || !dragging.value) return;
+      // Only a lane that would actually accept the card is a target.
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+      dropTarget.value = laneKey;
+    }
+
+    function onDragLeave(laneKey: string, event: DragEvent) {
+      // dragleave bubbles from every child the pointer crosses, so a move
+      // from one card to the next inside the SAME lane would otherwise blink
+      // the highlight off; only a leave that exits the lane counts.
+      const next = event.relatedTarget as Node | null;
+      const lane = event.currentTarget as Node | null;
+      if (next && lane && lane.contains(next)) return;
+      if (dropTarget.value === laneKey) dropTarget.value = null;
+    }
+
+    /** Where a drop lands inside a lane: on the card under the pointer, or
+     *  at the end when the pointer is over the lane's header, footer, the
+     *  gaps between cards, or the tail. The whole lane is a target because
+     *  the whole lane is highlighted as one. */
+    function dropIndexWithin(event: DragEvent, cardCount: number): number {
+      const target = event.target as HTMLElement | null;
+      const card = target?.closest?.("[data-card-index]");
+      const raw = card?.getAttribute("data-card-index");
+      const index = raw === null || raw === undefined ? Number.NaN : Number(raw);
+      return Number.isInteger(index) && index >= 0 && index < cardCount ? index : cardCount;
+    }
+
+    function onDrop(laneKey: string, cardCount: number, event: DragEvent) {
+      if (!props.draggable || !dragging.value) return;
+      event.preventDefault();
+      const from = dragging.value;
+      const index = dropIndexWithin(event, cardCount);
+      dragging.value = null;
+      dropTarget.value = null;
+      // A drop on the card it started from is not a move — the host should
+      // not have to filter that itself.
+      if (from.laneKey === laneKey && from.index === index) return;
+      emit("move", {
+        card: from.card,
+        fromLaneKey: from.laneKey,
+        fromIndex: from.index,
+        toLaneKey: laneKey,
+        toIndex: index,
+      } satisfies KanbanMove);
+    }
+
+    function onDragEnd() {
+      dragging.value = null;
+      dropTarget.value = null;
+    }
+
+    expose({ scrollHost, dragging });
+
+    return () => (
+      <div
+        class="hk-kanban"
+        data-axis={props.axis}
+        data-dragging={dragging.value ? "" : undefined}
+        aria-label={props.ariaLabel}
+      >
+        {props.lanes.length === 0
+          ? (slots.empty?.() ?? null)
+          : (
+            <HScrollContainer
+              ref={scrollHost}
+              class="hk-kanban-strip"
+              axis={stripAxis.value}
+              overscanScreens={1}
+            >
+              <div
+                class="hk-kanban-lanes"
+                // One variable; the stylesheet decides whether it is the
+                // lane's width (horizontal boards) or its height (vertical).
+                style={
+                  props.laneSize ? { "--hk-kanban-lane-size": props.laneSize } : undefined
+                }
+              >
+                {props.lanes.map((lane, laneIndex) => {
+                  const laneKey = props.laneKeyOf(lane, laneIndex);
+                  const cards = cardsFor(lane, laneIndex);
+                  return (
+                    <section
+                      key={laneKey}
+                      class="hk-kanban-lane"
+                      data-lane={laneKey}
+                      data-drop-target={dropTarget.value === laneKey ? "" : undefined}
+                      onDragover={(event: DragEvent) => onDragOver(laneKey, event)}
+                      onDragleave={(event: DragEvent) => onDragLeave(laneKey, event)}
+                      onDrop={(event: DragEvent) => onDrop(laneKey, cards.length, event)}
+                    >
+                      <header class="hk-kanban-lane-header">
+                        {slots.laneHeader?.({
+                          lane,
+                          laneIndex,
+                          laneKey,
+                          cards,
+                        })}
+                      </header>
+                      <div class="hk-kanban-cards">
+                        {cards.map((card, cardIndex) => {
+                          const cardKey =
+                            props.cardKeyOf?.(card, cardIndex) ?? `${laneKey}#${cardIndex}`;
+                          return (
+                            <div
+                              key={cardKey}
+                              class="hk-kanban-card"
+                              data-card={cardKey}
+                              data-card-index={cardIndex}
+                              draggable={props.draggable || undefined}
+                              onDragstart={(event: DragEvent) =>
+                                onDragStart(card, laneKey, cardIndex, event)
+                              }
+                              onDragend={onDragEnd}
+                            >
+                              {slots.card?.({
+                                card,
+                                cardIndex,
+                                lane,
+                                laneIndex,
+                                laneKey,
+                              })}
+                            </div>
+                          );
+                        })}
+                        {/* The tail keeps the lane's empty space hittable
+                            (the lane itself owns the drop). */}
+                        <div class="hk-kanban-lane-tail" />
+                      </div>
+                      {slots.laneFooter?.({ lane, laneIndex, laneKey, cards })}
+                    </section>
+                  );
+                })}
+              </div>
+            </HScrollContainer>
+          )}
+      </div>
+    );
+  },
+});