@celestia-island/hikari 0.33.0 → 0.35.0

package/package.json

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

package/src/components/HkAffixPicker.scss

@@ -68,8 +68,8 @@
 }
 
 /* One selected entry: [flag] label (meta) •active-dot   ×]
- * The × arms on the first activation (danger tint) and erases on the
- * second; desktop hover previews the × so the row reads as deletable. */
+ * The × opens the shared confirm message box — the dialog's Confirm is
+ * what actually erases; the × alone never does. */
 .hk-affix-tag {
   display: flex;
   align-items: center;
@@ -94,10 +94,6 @@
     }
   }
 
-  &[data-armed] {
-    border-color: rgb(var(--color-danger, 240 70 80) / 55%);
-    background: rgb(var(--color-danger, 240 70 80) / 12%);
-  }
 }
 
 .hk-affix-tag-body {
@@ -168,11 +164,6 @@
     color: rgb(var(--color-danger, 240 70 80));
     background: rgb(var(--color-danger, 240 70 80) / 12%);
   }
-
-  [data-armed] & {
-    color: rgb(var(--color-danger, 240 70 80));
-    background: rgb(var(--color-danger, 240 70 80) / 18%);
-  }
 }
 
 /* ── option rows ────────────────────────────────────────────────────── */

package/src/components/HkAffixPicker.test.tsx

@@ -18,6 +18,7 @@ interface MountOptions {
   allowCustom?: boolean;
   searchable?: boolean;
   closeOnSelect?: boolean;
+  confirmRemove?: boolean;
   disabled?: boolean;
 }
 
@@ -40,6 +41,7 @@ function mountPicker(opts: MountOptions = {}) {
         allowCustom: opts.allowCustom ?? false,
         searchable: opts.searchable ?? true,
         closeOnSelect: opts.closeOnSelect,
+        confirmRemove: opts.confirmRemove,
         disabled: opts.disabled ?? false,
         onSelect: (key: string) => events.select.push(key),
         onRemove: (key: string) => events.remove.push(key),
@@ -100,7 +102,42 @@ async function untilSettled(check: () => number): Promise<void> {
   }
 }
 
-afterEach(() => {
+/** Let the message box mount (own app) and its promise chain settle. */
+async function flush() {
+  await nextTick();
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function confirmButton(): HTMLButtonElement {
+  const btn = document.body.querySelector<HTMLButtonElement>(".hk-message-box-confirm");
+  expect(btn, "message box confirm button renders").toBeTruthy();
+  return btn!;
+}
+
+/** Dismiss every open message box and wait out its host's self-unmount
+ *  (leave transition + timer) so no zombie app re-renders into the next
+ *  test's DOM. No-op when a test never opened one. */
+async function teardownMessageBoxes() {
+  if (!document.body.querySelector(".hk-message-box-confirm")) return;
+  for (const btn of [...document.body.querySelectorAll<HTMLButtonElement>(".hk-message-box-confirm")]) {
+    btn.click();
+  }
+  const deadline = Date.now() + 2500;
+  // The modal root (not just the confirm button) must be gone: the
+  // leave transition + cleanup timer fully unmount the host app, so no
+  // zombie registration lingers in the shared popup stack.
+  while (
+    (document.body.querySelector(".hk-message-box-confirm") ||
+      document.body.querySelector(".hk-modal-root")) &&
+    Date.now() < deadline
+  ) {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  }
+}
+
+afterEach(async () => {
+  await teardownMessageBoxes();
   for (const { app, container } of mounts.splice(0)) {
     app.unmount();
     container.remove();
@@ -162,29 +199,72 @@ describe("HkAffixPicker", () => {
     expect(rows().length).toBeGreaterThan(0);
   });
 
-  it("two-step tag delete: × arms, × again confirms; body click disarms", async () => {
+  it("tag × opens a confirm dialog: Cancel keeps the tag, Confirm fires remove", async () => {
     const { events, container } = mountPicker({ mode: "multi", selected: ["cn", "jp"] });
     await openPopup(container);
-    const x = tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!;
-    x.click();
-    await nextTick();
-    expect(tags()[0].hasAttribute("data-armed")).toBe(true);
+    // One tap never erases: the dialog names the entry instead.
+    tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
+    // The dialog mounts over several transition frames; wait for the
+    // settled state (box open, tag untouched) before asserting.
+    await untilBoxOpen('Remove "China"');
     expect(events.remove).toHaveLength(0);
-    // Second activation confirms — the tag leaves the list.
-    x.click();
-    await nextTick();
+    expect(tag("China")).toBeTruthy();
+    // Cancel keeps everything as it was.
+    [...document.body.querySelectorAll<HTMLButtonElement>(".hk-message-box-actions button")]
+      .find((b) => !b.classList.contains("hk-message-box-confirm"))!
+      .click();
+    await flush();
+    console.log("DBG-cancel openEvents", JSON.stringify(events.open), "tags", tags().length, "box", !!document.body.querySelector(".hk-message-box-text"));
+    expect(events.remove).toHaveLength(0);
+    expect(tag("China")).toBeTruthy();
+    // Second pass: the dialog's Confirm is what erases.
+    tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
+    await untilBoxOpen('Remove "China"');
+    confirmButton().click();
+    const deadline = Date.now() + 1500;
+    while (events.remove.length === 0 && Date.now() < deadline) {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      await nextTick();
+    }
     expect(events.remove).toEqual(["cn"]);
-    // Body click on an ARMED tag disarms it instead of picking.
-    const jpBody = tag("Japan")!.querySelector<HTMLButtonElement>(".hk-affix-tag-body")!;
-    tag("Japan")!.querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
-    await nextTick();
-    expect(tag("Japan")?.hasAttribute("data-armed")).toBe(true);
-    jpBody.click();
-    await nextTick();
-    expect(tag("Japan")?.hasAttribute("data-armed")).toBe(false);
     expect(events.select).toHaveLength(0);
   });
 
+  it("confirmRemove=false lets the × fire remove immediately, no dialog", async () => {
+    const { events, container } = mountPicker({
+      mode: "multi",
+      selected: ["cn"],
+      confirmRemove: false,
+    });
+    await openPopup(container);
+    tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
+    await flush();
+    expect(events.remove).toEqual(["cn"]);
+    expect(document.body.querySelector(".hk-message-box-text")).toBeNull();
+  });
+
+  /** Poll until the confirm dialog is mounted AND shows the given body
+   *  text — the box rides HkModal's multi-frame open transition. */
+  async function untilBoxOpen(fragment: string): Promise<void> {
+    const deadline = Date.now() + 1500;
+    while (Date.now() < deadline) {
+      const text = document.body.querySelector(".hk-message-box-text")?.textContent ?? "";
+      if (text.includes(fragment)) {
+        // One extra frame so sibling re-renders (scrollbar lock, panel
+        // reposition) triggered by the modal settle too.
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        await nextTick();
+        return;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      await nextTick();
+    }
+    expect(
+      document.body.querySelector(".hk-message-box-text")?.textContent ?? "",
+      `confirm dialog showing "${fragment}"`,
+    ).toContain(fragment);
+  }
+
   it("tag body click emits select; close-on-select default keeps multi open", async () => {
     const { events, container } = mountPicker({ mode: "multi", selected: ["cn", "jp"] });
     await openPopup(container);

package/src/components/HkAffixPicker.tsx

@@ -7,6 +7,7 @@ import { useI18n } from "../i18n/context";
 import HkInput from "./HkInput";
 import HkListTransition from "./HkListTransition";
 import HkMenu from "./HkMenu";
+import HkMessageBox from "./HkMessageBox";
 import "./HkAffixPicker.scss";
 
 /** One pickable entry of the affix picker's searchable list. */
@@ -31,11 +32,12 @@ export interface HkAffixOption {
  * opens one canonical popup:
  *
  *   - a SEARCH FIELD on top (live filter over label / meta / keywords);
- *   - in `multi` mode, a TAG LIST of the currently selected keys with
- *     the shared arm-delete guard: the row's × arms on the first tap
- *     (danger tint) and erases on the second — desktop hover IS the
- *     preview, so a single click erases there; the popup stays open so
- *     several tags can be managed in one pass;
+ *   - in `multi` mode, a TAG LIST of the currently selected keys.
+ *     Deleting a tag is a TWO-STEP interaction: the × opens the shared
+ *     HkMessageBox confirm dialog (danger tone, naming the entry), and
+ *     only its Confirm fires `remove`. `confirmRemove={false}` opts
+ *     out for hosts that confirm themselves. The popup stays open
+ *     behind the dialog so several tags can be managed in one pass;
  *   - the option rows themselves: single mode shows every option and
  *     closes on pick; multi mode lists the NOT-yet-selected options and
  *     stays open for batch adds;
@@ -73,6 +75,9 @@ export const HkAffixPicker = defineComponent({
     searchable: { type: Boolean, default: true },
     /** Offer a "Use <query>" row for free-text entries. */
     allowCustom: { type: Boolean, default: false },
+    /** Gate tag deletion behind a confirm message box (multi mode).
+     *  Default true; pass false when the host runs its own guard. */
+    confirmRemove: { type: Boolean, default: true },
     /** Override the default close-on-pick (single: true, multi: false).
      *  E.g. a multi picker that should close after each add passes
      *  true; a single picker that should stay open passes false. */
@@ -90,7 +95,8 @@ export const HkAffixPicker = defineComponent({
   emits: {
     /** A row or tag body was picked (multi add / single choose). */
     select: (_key: string) => true,
-    /** A tag's armed × confirmed — the host drops that key. */
+    /** A tag's × (after the confirm dialog accepted) — the host drops
+     *  that key. */
     remove: (_key: string) => true,
     /** The "Use <query>" row fired with the typed text. */
     custom: (_query: string) => true,
@@ -106,14 +112,15 @@ export const HkAffixPicker = defineComponent({
     const open = ref(false);
     const chipRef = ref<HTMLElement | null>(null);
     const query = ref("");
-    /** Key of the tag whose delete is ARMED (× tapped once). */
-    const armedKey = ref<string | null>(null);
+    /** True while our confirm dialog is up: clicks inside the dialog
+     *  are outside THIS popup, and the panel's outside-close must not
+     *  tear the tag list down mid-decision. */
+    const confirmHeld = ref(false);
 
-    // A fresh open starts calm: empty filter, no armed tag.
+    // A fresh open starts calm: empty filter.
     watch(open, (v) => {
       if (!v) {
         query.value = "";
-        armedKey.value = null;
       }
       emit("update:open", v);
     });
@@ -179,13 +186,32 @@ export const HkAffixPicker = defineComponent({
       if (resolvedCloseOnSelect.value) open.value = false;
     }
 
-    function confirmRemove(key: string) {
-      armedKey.value = null;
-      emit("remove", key);
-    }
-
-    function toggleArm(key: string) {
-      armedKey.value = armedKey.value === key ? null : key;
+    /** Tag × pressed: unless the host opts out, the shared message box
+     *  names the entry and asks for confirmation — the × alone never
+     *  erases anything. Only an accepted dialog fires `remove`. The
+     *  popup deliberately STAYS OPEN behind the dialog (both while it
+     *  is up and after Confirm/Cancel) so several tags can be managed
+     *  in one pass. */
+    async function requestRemove(tag: HkAffixOption) {
+      if (!props.confirmRemove) {
+        emit("remove", tag.key);
+        return;
+      }
+      const removeLabel = t("hikari::affixPicker.remove", "Remove");
+      confirmHeld.value = true;
+      try {
+        const confirmed = await HkMessageBox.confirm({
+          title: t("hikari::affixPicker.removeConfirmTitle", "Remove entry"),
+          message: interpolate(t("hikari::affixPicker.removeConfirm", 'Remove "{label}"? This cannot be undone.'), {
+            label: tag.label,
+          }),
+          tone: "danger",
+          confirmText: removeLabel,
+        });
+        if (confirmed) emit("remove", tag.key);
+      } finally {
+        confirmHeld.value = false;
+      }
     }
 
     function useCustom() {
@@ -220,7 +246,6 @@ export const HkAffixPicker = defineComponent({
         props.searchPlaceholder ?? t("hikari::affixPicker.search", "Search");
       const emptyText = props.emptyText ?? t("hikari::affixPicker.empty", "No matches");
       const removeLabel = t("hikari::affixPicker.remove", "Remove");
-      const confirmLabel = t("hikari::affixPicker.confirmDelete", "Confirm remove");
       const placement = props.side === "suffix" ? "bottom-end" : "bottom-start";
       return (
         <>
@@ -263,6 +288,9 @@ export const HkAffixPicker = defineComponent({
             items={[]}
             open={open.value}
             onUpdate:open={(v: boolean) => {
+              // Close requests that arrive while the confirm dialog is
+              // up are the dialog's own clicks — ignore them.
+              if (!v && confirmHeld.value) return;
               open.value = v;
             }}
             anchorRef={chipRef.value}
@@ -287,13 +315,11 @@ export const HkAffixPicker = defineComponent({
                         class="hk-affix-tag-list"
                       >
                         {tags.map((tag) => {
-                          const armed = armedKey.value === tag.key;
                           return (
                             <div
                               key={tag.key}
                               class="hk-affix-tag"
                               data-active={activeSet.value.includes(tag.key) || undefined}
-                              data-armed={armed || undefined}
                             >
                               <button
                                 type="button"
@@ -302,10 +328,6 @@ export const HkAffixPicker = defineComponent({
                                 aria-label={`${t("hikari::affixPicker.switchTo", "Switch to")} ${tag.label}`}
                                 onClick={(e: MouseEvent) => {
                                   e.stopPropagation();
-                                  if (armed) {
-                                    armedKey.value = null;
-                                    return;
-                                  }
                                   pick(tag);
                                 }}
                               >
@@ -325,16 +347,14 @@ export const HkAffixPicker = defineComponent({
                               <button
                                 type="button"
                                 class="hk-affix-tag-x"
-                                aria-label={armed ? confirmLabel : `${removeLabel} — ${tag.label}`}
-                                title={armed ? confirmLabel : `${removeLabel} — ${tag.label}`}
-                                // The × arms on the first activation and
-                                // confirms on the second (touch guard); on
-                                // desktop the hover already previewed the
-                                // intent, so the first click erases.
+                                aria-label={`${removeLabel} — ${tag.label}`}
+                                title={`${removeLabel} — ${tag.label}`}
+                                // One tap opens the confirm dialog; the
+                                // dialog's Confirm is what actually
+                                // erases (fires `remove`).
                                 onClick={(e: MouseEvent) => {
                                   e.stopPropagation();
-                                  if (armed) confirmRemove(tag.key);
-                                  else toggleArm(tag.key);
+                                  void requestRemove(tag);
                                 }}
                                 onMousedown={(e: MouseEvent) => e.preventDefault()}
                               >

package/src/components/HkBoard.scss

@@ -0,0 +1,83 @@
+// HkBoard — the shared node-and-edge board surface.
+// Geometry semantics live in utils/boardCamera.ts + utils/boardEdges.ts;
+// this file only styles the layers (grid, world, edges, node shells,
+// minimap dock).
+
+.hk-board {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: rgb(var(--color-surface));
+  // gestures own the surface: no native scroll/selection interference
+  touch-action: none;
+  user-select: none;
+}
+
+.hk-board-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.hk-board-world {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+
+.hk-board-edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.hk-board-edge {
+  fill: none;
+  stroke-linecap: round;
+}
+
+.hk-board-node {
+  position: absolute;
+  box-sizing: border-box;
+
+  &--draggable {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+.hk-board-node-shell {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-6);
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-2xs);
+  color: rgb(var(--color-text));
+  background: rgb(var(--color-surface));
+  border: 1px solid rgb(var(--color-primary) / 45%);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-elevated);
+}
+
+.hk-board-minimap {
+  position: absolute;
+  right: var(--space-10);
+  bottom: var(--space-10);
+  z-index: 6;
+  pointer-events: auto;
+}