@celestia-island/hikari 0.55.253 → 0.55.255

package/package.json

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

package/src/board3dSurface.test.ts

@@ -24,6 +24,8 @@ type ModelOpts = barrel.Board3DModelOptions;
 type CameraCfg = barrel.Board3DCameraConfig;
 type FocusOpts = barrel.Board3DFocusOptions;
 type ViewModeT = barrel.Board3DViewMode;
+type StarBody = barrel.HkStarSystemBodyInput;
+type StarSpec = barrel.HkStarSystemBodySpec;
 
 // Type-only probes: these lines exist so the checker resolves the three
 // exported types through the barrel itself.
@@ -34,6 +36,12 @@ const modelProbe: ModelOpts | null = null;
 const cameraProbe: CameraCfg = { fov: 45 };
 const focusProbe: FocusOpts = { padding: 1.6, lateralBias: 0 };
 const viewModeProbe: ViewModeT = "orbit";
+const starBodyProbe: StarBody = {
+  id: "node-1", label: "Node One", role: "planet", status: "Online", online: true,
+};
+const starSpecProbe: StarSpec | null = null;
+void starBodyProbe;
+void starSpecProbe;
 void engineProbe;
 void defProbe;
 void vecProbe;
@@ -43,9 +51,11 @@ void focusProbe;
 void viewModeProbe;
 
 describe("hikari barrel — 3D board surface", () => {
-  it("exports both 3D components", () => {
+  it("exports the board, minimap and star-system business component", () => {
     expect(barrel.HkBoard3D).toBeTruthy();
     expect(barrel.HkMinimap3D).toBeTruthy();
+    expect(barrel.HkStarSystem).toBeTruthy();
+    expect(barrel.HStarSystem).toBe(barrel.HkStarSystem);
   });
 
   it("exports the helper-layer constant consumers need for own decoration", () => {

package/src/components/HkAffixPicker.scss

@@ -251,9 +251,10 @@
    * comes from the registration list, not from here. */
   @include mi.item;
 
-  &[data-disabled] {
-    cursor: default;
-  }
+  /* data-disabled rides the mixin's face whole (dim + not-allowed +
+     guarded hover/focus): the sibling tag-input catalog rows already
+     did, and a family-local cursor:default split the two choosers'
+     disabled language. */
 
   /* The "Use <query>" free-text row reads as an add affordance. Truncation
    * comes from the base .hk-affix-row-label — only the emphasis is new. */

package/src/components/HkLocalePicker.scss

@@ -1,37 +1,34 @@
-/* HkLocalePicker — the inline hand-rolled dropdown joins the pop motion
- * family (--hk-pop-* tokens in theme/theme.scss): it grows out of its
- * trigger (below-right) and retracts into it, matching the popover /
- * select-panel surfaces instead of appearing bare. */
-.hk-locale-picker-dropdown {
-  transform-origin: top right;
-}
-
-.hk-locale-picker-enter-active {
-  transition:
-    opacity var(--hk-pop-in-duration, 0.2s)
-      var(--hk-pop-in-opacity-ease, cubic-bezier(0.16, 1, 0.3, 1)),
-    transform var(--hk-pop-in-duration, 0.2s)
-      var(--hk-pop-in-transform-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
-}
+/* HkLocalePicker — only the TRIGGER is component-owned now; the dropdown
+ * is HkLocalePickerPopup (HkMenu) and inherits the menu grammar + pop
+ * motion from there. The hand-rolled dropdown sheet (and its pop-motion
+ * classes) was removed with the 2026-10-31 sweep rewrite. */
+.hk-locale-picker-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: rgb(var(--color-muted));
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s;
 
-.hk-locale-picker-leave-active {
-  transition:
-    opacity var(--hk-pop-out-duration, 0.15s)
-      var(--hk-pop-out-ease, cubic-bezier(0.4, 0, 1, 1)),
-    transform var(--hk-pop-out-duration, 0.15s)
-      var(--hk-pop-out-ease, cubic-bezier(0.4, 0, 1, 1));
-}
+  &:hover {
+    background: rgb(var(--color-primary) / 8%);
+  }
 
-.hk-locale-picker-enter-from,
-.hk-locale-picker-leave-to {
-  opacity: 0;
-  transform: translateY(calc(-1 * var(--hk-pop-offset, 4px)))
-    scale(var(--hk-pop-scale, 0.97));
-}
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary) / 70%);
+    outline-offset: 1px;
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .hk-locale-picker-enter-active,
-  .hk-locale-picker-leave-active {
-    transition: none;
+  /* The caret is furniture, not copy — half-strength ink, as the
+     pre-rewrite trigger drew it. */
+  svg {
+    opacity: 0.5;
   }
 }

package/src/components/HkLocalePicker.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, ref, Transition, type PropType } from "vue";
+import { defineComponent, ref, type PropType } from "vue";
 
-import { useSurfaceTransition } from "../composables/useSurfaceTransition";
+import HkLocalePickerPopup from "./HkLocalePickerPopup";
 import "./HkLocalePicker.scss";
 
 export interface LocaleOption {
@@ -8,6 +8,15 @@ export interface LocaleOption {
   label: string;
 }
 
+/**
+ * HkLocalePicker — the compact trigger + dropdown locale picker. The
+ * dropdown hand-rolled its own absolutely-positioned stock (inline
+ * styles, JS-painted hover, no sheet, no roles — the 2026-10-31 sweep's
+ * finding #8); it now rides HkLocalePickerPopup (HkMenu), so the rows
+ * speak the menu-item grammar, the panel anchors/cascades/flips like
+ * every menu, and phones get the sheet family. The public surface is
+ * unchanged: locales / currentLocale props, `select` event.
+ */
 export const HkLocalePicker = defineComponent({
   name: "HkLocalePicker",
   props: {
@@ -23,110 +32,42 @@ export const HkLocalePicker = defineComponent({
   emits: ["select"],
   setup(props, { emit }) {
     const open = ref(false);
-    // Open/close motion reported into the unified animation context —
-    // this little dropdown moves like the rest of the pop family
-    // instead of appearing bare.
-    const anim = useSurfaceTransition(250).hooks();
+    const trigger = ref<HTMLElement | null>(null);
 
-    function handleSelect(code: string) {
-      emit("select", code);
+    function handleSelect(code: string | string[]) {
+      const code0 = Array.isArray(code) ? code[0] : code;
+      if (code0) emit("select", code0);
       open.value = false;
     }
 
     return () => (
-      <div style={{ position: "relative" }}>
+      <div style={{ position: "relative" }} ref={trigger}>
         <button
           type="button"
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.25rem",
-            padding: "0.25rem 0.5rem",
-            border: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
-            borderRadius: "var(--radius-sm, 4px)",
-            background: "transparent",
-            color: "rgb(var(--color-muted))",
-            fontSize: "0.75rem",
-            fontWeight: 500,
-            cursor: "pointer",
-            transition: "background 0.15s",
-          }}
+          class="hk-locale-picker-trigger"
+          aria-haspopup="menu"
+          aria-expanded={open.value}
           onClick={() => (open.value = !open.value)}
-          onBlur={() => setTimeout(() => (open.value = false), 150)}
         >
           {props.currentLocale.toUpperCase()}
-          <svg width="10" height="10" viewBox="0 0 10 10" style={{ opacity: 0.5 }}>
-            <path d="M2 3.5l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.2" />
+          <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+            <path
+              d="M2 3.5l3 3 3-3"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.2"
+            />
           </svg>
         </button>
-        <Transition
-          name="hk-locale-picker"
-          appear
-          onBeforeEnter={anim.onBeforeEnter}
-          onAfterEnter={anim.onAfterEnter}
-          onBeforeLeave={anim.onBeforeLeave}
-          onAfterLeave={anim.onAfterLeave}
-        >
-          {open.value && (
-            <div
-              class="hk-locale-picker-dropdown"
-              style={{
-              position: "absolute",
-              top: "calc(100% + 4px)",
-              right: 0,
-              minWidth: "120px",
-              background: "rgb(var(--color-surface))",
-              border: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
-              borderRadius: "var(--radius-md, 6px)",
-              boxShadow: "0 4px 16px rgb(0 0 0 / 12%)",
-              // Local stacking inside the header's own context — the
-              // app-chrome header-popup band documents the intent (this
-              // value is scoped, it never races the popup stack).
-              zIndex: "var(--hk-z-float)",
-              overflow: "hidden",
-              padding: "4px",
-            }}
-          >
-            {props.locales.map((loc) => (
-              <button
-                key={loc.code}
-                type="button"
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  width: "100%",
-                  padding: "6px 10px",
-                  border: "none",
-                  borderRadius: "4px",
-                  background: loc.code === props.currentLocale
-                    ? "var(--c-primary-subtle, rgb(var(--color-primary) / 8%))"
-                    : "transparent",
-                  color: loc.code === props.currentLocale
-                    ? "var(--c-primary, rgb(var(--color-primary)))"
-                    : "rgb(var(--color-text))",
-                  fontSize: "0.75rem",
-                  cursor: "pointer",
-                  textAlign: "left",
-                  transition: "background 0.1s",
-                }}
-                onMouseenter={(e: MouseEvent) => {
-                  if (loc.code !== props.currentLocale) {
-                    (e.currentTarget as HTMLElement).style.background = "var(--c-primary-overlay, rgb(var(--color-primary) / 15%))";
-                  }
-                }}
-                onMouseleave={(e: MouseEvent) => {
-                  if (loc.code !== props.currentLocale) {
-                    (e.currentTarget as HTMLElement).style.background = "transparent";
-                  }
-                }}
-                onMousedown={() => handleSelect(loc.code)}
-              >
-                {loc.label}
-              </button>
-            ))}
-          </div>
-          )}
-        </Transition>
+        <HkLocalePickerPopup
+          open={open.value}
+          triggerRef={trigger.value}
+          placement="bottom-end"
+          locales={props.locales.map((loc) => ({ code: loc.code, label: loc.label }))}
+          currentLocale={props.currentLocale}
+          onUpdate:open={(v: boolean) => (open.value = v)}
+          onSelect={handleSelect}
+        />
       </div>
     );
   },

package/src/components/HkLocalePickerPopup.tsx

@@ -38,7 +38,9 @@ const HkLocalePickerPopup = defineComponent({
         open={props.open}
         anchorRef={anchor}
         placement={
-          props.placement === "left-start" || props.placement === "right-start"
+          props.placement === "left-start" ||
+          props.placement === "right-start" ||
+          props.placement === "bottom-end"
             ? props.placement
             : "right-start"
         }

package/src/components/HkMinimap.tsx

@@ -1,4 +1,4 @@
-import { Map as MapIcon, Maximize2, Minimize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { Map as MapIcon, Minimize2, RotateCcw, ZoomIn, ZoomOut } from "lucide-vue-next";
 import { computed, defineComponent, onBeforeUnmount, ref, watch, type PropType } from "vue";
 
 import HSlider from "./HkSlider";
@@ -407,7 +407,7 @@ export default defineComponent({
                 aria-label={t("hikari::zoomToolbar.reset", "Reset zoom")}
                 title={t("hikari::zoomToolbar.reset", "Reset zoom")}
               >
-                <Maximize2 size={11} />
+                <RotateCcw size={11} />
               </button>
             )}
             {props.collapsible && (

package/src/components/HkMinimap3D.test.tsx

@@ -12,12 +12,15 @@ const H = vi.hoisted(() => {
     static instances: FakeWebGLRenderer[] = [];
     renders: Array<{ scene: unknown; camera: THREE.PerspectiveCamera }> = [];
     disposed = false;
-    constructor(_opts: { canvas: HTMLCanvasElement }) {
+    readonly domElement: HTMLCanvasElement;
+    constructor(opts: { canvas: HTMLCanvasElement }) {
+      this.domElement = opts.canvas;
       FakeWebGLRenderer.instances.push(this);
     }
     setPixelRatio(): void {}
     setSize(): void {}
     setClearColor(): void {}
+    forceContextLoss(): void { this.disposed = true; }
     render(scene: unknown, camera: THREE.PerspectiveCamera): void {
       // A real renderer maintains world matrices every pass.
       (scene as THREE.Scene).updateMatrixWorld(true);
@@ -424,4 +427,43 @@ describe("HkMinimap3D collapse affordance (ported from the 2D minimap)", () => {
     expect(container.querySelector(".hk-mm-collapse-btn")).toBeNull();
     expect(container.querySelector(".hk-minimap--collapsed")).toBeNull();
   });
+});
+describe("HkMinimap3D reopen cycle (the canvas element is rebuilt by v-if)", () => {
+  it("re-binds the renderer to the LIVE canvas; helpers never duplicate", async () => {
+    const { engine, scene, firePostRender } = fakeEngine();
+    const { container } = mountMap(engine, { collapsible: true });
+    await nextTick();
+    firePostRender();
+    expect(H.FakeWebGLRenderer.instances).toHaveLength(1);
+
+    const helpersOnLayer = () =>
+      scene.children.filter((c) => (c.layers.mask & (1 << BOARD3D_HELPERS_LAYER)) !== 0).length;
+    expect(helpersOnLayer()).toBe(2); // glyph group + view-plane frame
+
+    // fold -> unfold: Vue rebuilds the canvas element; the renderer must
+    // follow it or the reopened map paints into the detached element.
+    container.querySelector<HTMLButtonElement>(".hk-mm-collapse-btn")!.click();
+    await nextTick();
+    container.querySelector<HTMLButtonElement>(".hk-minimap--collapsed")!.click();
+    await nextTick();
+    await nextTick();
+
+    const canvasNow = container.querySelector<HTMLCanvasElement>(".hk-minimap3d-canvas");
+    expect(canvasNow, "canvas is back").toBeTruthy();
+    const latest = H.FakeWebGLRenderer.instances.at(-1)!;
+    expect(latest.domElement).toBe(canvasNow);
+    expect(helpersOnLayer()).toBe(2); // rebuilt, NOT duplicated
+    firePostRender();
+    expect(latest.renders.length).toBe(1);
+
+    // a second cycle stays correct
+    container.querySelector<HTMLButtonElement>(".hk-mm-collapse-btn")!.click();
+    await nextTick();
+    container.querySelector<HTMLButtonElement>(".hk-minimap--collapsed")!.click();
+    await nextTick();
+    await nextTick();
+    const canvas2 = container.querySelector<HTMLCanvasElement>(".hk-minimap3d-canvas");
+    expect(H.FakeWebGLRenderer.instances.at(-1)!.domElement).toBe(canvas2);
+    expect(helpersOnLayer()).toBe(2);
+  });
 });

package/src/components/HkMinimap3D.tsx

@@ -24,7 +24,7 @@
  *    mount.
  */
 
-import { Map as MapIcon, Maximize2, Minimize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { Map as MapIcon, Minimize2, RotateCcw, ZoomIn, ZoomOut } from "lucide-vue-next";
 import {
   computed,
   defineComponent,
@@ -381,11 +381,36 @@ export default defineComponent({
       }
     });
 
-    /** Idempotent GL-surface init. Called from onMounted (expanded
-     *  mounts) and from the expand transition (a defaultCollapsed map
-     *  has no canvas at mount — the renderer builds on first expand). */
+    /** GL-surface init, safe to call repeatedly. Called from onMounted
+     *  (expanded mounts) and from the expand transition (a
+     *  defaultCollapsed map has no canvas at mount; a fold/unfold cycle
+     *  REBUILDS the canvas element, so a surviving renderer would keep
+     *  painting into the detached element and the reopened map would
+     *  stay empty — detect the swap and rebuild against the live canvas,
+     *  helpers and post-render hook included). */
     function initRenderer(): void {
-      if (renderer) return;
+      if (renderer && renderer.domElement === canvasRef.value) return;
+      removePostRender?.();
+      removePostRender = null;
+      if (renderer) {
+        renderer.dispose();
+        renderer.forceContextLoss?.();
+        renderer = null;
+      }
+      const s = scene.value;
+      if (s) {
+        if (glyph) {
+          s.remove(glyph);
+          disposeNode(glyph);
+          glyph = null;
+        }
+        if (planeFrame) {
+          s.remove(planeFrame);
+          planeFrame.geometry.dispose();
+          (planeFrame.material as THREE.Material).dispose();
+          planeFrame = null;
+        }
+      }
       const canvas = canvasRef.value;
       const el = rootRef.value;
       if (!canvas || !el) return;
@@ -519,7 +544,7 @@ export default defineComponent({
             aria-label={t("hikari::board3d.resetView", "Reset view")}
             title={t("hikari::board3d.resetView", "Reset view")}
           >
-            <Maximize2 size={11} />
+            <RotateCcw size={11} />
           </button>
           {props.collapsible && (
             <button

package/src/components/HkStarSystem.scss

@@ -0,0 +1,29 @@
+@use "../styles/polyfill" as *;
+
+/* HkStarSystem's optional built-in CSS2D chip. Host products can replace
+ * it through makeLabel without inheriting any product-specific styling. */
+.hk-star-system-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 240px;
+  padding: 3px 8px;
+  overflow: hidden;
+  border: 1px solid rgb(var(--color-border, 100 116 139) / 0.38);
+  border-radius: 9999px;
+  background: rgb(var(--color-background, 11 16 32) / 0.8);
+  color: rgb(var(--color-text, 226 232 240));
+  font-size: 11px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  @include user-select(none);
+  pointer-events: auto;
+  @include backdrop-filter(blur(6px));
+}
+
+.hk-star-system-chip.is-core {
+  border-style: dashed;
+  cursor: default;
+  pointer-events: none;
+}

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

@@ -0,0 +1,14 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const sheet = readFileSync(join(import.meta.dirname, "HkStarSystem.scss"), "utf8");
+
+describe("HkStarSystem chip theme channels", () => {
+  it("uses RGB channel tokens through rgb(), never as complete CSS colors", () => {
+    expect(sheet).toContain("color: rgb(var(--color-text,");
+    expect(sheet).toContain("background: rgb(var(--color-background,");
+    expect(sheet).toContain("border: 1px solid rgb(var(--color-border,");
+    expect(sheet).not.toContain("color-mix");
+  });
+});

package/src/components/HkStarSystem.test.tsx

@@ -0,0 +1,163 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick, reactive, type App } from "vue";
+
+import type { StarSystemBodyInput } from "../scene3d/holographicFleetSpec";
+import HkStarSystem from "./HkStarSystem";
+
+const mocks = vi.hoisted(() => ({
+  engine: {},
+  ready: undefined as undefined | (() => void),
+  build: vi.fn(),
+  handle: {
+    update: vi.fn(),
+    setSelected: vi.fn(),
+    focusBody: vi.fn(),
+    frameFleet: vi.fn(() => true),
+    dispose: vi.fn(),
+  },
+}));
+
+vi.mock("../scene3d/holographicFleetScene", () => ({
+  buildFleetScene: mocks.build.mockImplementation(() => mocks.handle),
+}));
+
+vi.mock("./HkBoard3D", async () => {
+  const { defineComponent, h: vueH, onMounted } = await import("vue");
+  return {
+    default: defineComponent({
+      name: "HkBoard3D",
+      emits: ["ready", "objectClick"],
+      setup(_props, { emit, slots }) {
+        mocks.ready = () => emit("ready", mocks.engine);
+        onMounted(() => mocks.ready?.());
+        return () => vueH("div", { class: "board-stub" }, slots.default?.());
+      },
+    }),
+  };
+});
+
+const BODIES: readonly StarSystemBodyInput[] = [
+  {
+    id: "hub-a", label: "Hub A", role: "star", status: "Online",
+    online: true, endpointCount: 2, detail: "2 endpoints",
+  },
+  {
+    id: "node-1", label: "Node One", role: "planet", status: "Offline",
+    online: false, endpointCount: 0,
+  },
+];
+
+const mounts: Array<{ app: App; container: HTMLElement }> = [];
+
+async function settle(): Promise<void> {
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await nextTick();
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.engine = {};
+  mocks.ready = undefined;
+});
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+function mountSystem(initialSelection: string | null = "node-1") {
+  const state = reactive({
+    selectedId: initialSelection as string | null,
+    bodies: [...BODIES],
+  });
+  const emitted: Array<string | null> = [];
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () => h(HkStarSystem, {
+      bodies: state.bodies,
+      selectedId: state.selectedId,
+      "onUpdate:selectedId": (id: string | null) => emitted.push(id),
+    }),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { state, emitted };
+}
+
+describe("HkStarSystem controlled scene lifecycle", () => {
+  it("passes real body data and restores selection without flying", async () => {
+    mountSystem("node-1");
+    await settle();
+
+    expect(mocks.handle.update).toHaveBeenCalled();
+    const [spec, offline] = mocks.handle.update.mock.calls[0]!;
+    expect(spec.stars[0]).toMatchObject({
+      id: "hub-a", label: "Hub A", status: "Online", detail: "2 endpoints",
+    });
+    expect(spec.planets[0]).toMatchObject({
+      id: "node-1", label: "Node One", status: "Offline", online: false,
+    });
+    expect(offline).toEqual({ "hub-a": false, "node-1": true });
+    expect(mocks.handle.setSelected).toHaveBeenCalledWith("node-1");
+    expect(mocks.handle.focusBody).not.toHaveBeenCalled();
+  });
+
+  it("focuses an explicit controlled selection change", async () => {
+    const { state } = mountSystem("node-1");
+    await settle();
+    state.selectedId = "hub-a";
+    await settle();
+    expect(mocks.handle.focusBody).toHaveBeenCalledWith("hub-a");
+
+    state.selectedId = null;
+    await settle();
+    expect(mocks.handle.setSelected).toHaveBeenCalledWith(null);
+    expect(mocks.handle.frameFleet).toHaveBeenCalledWith(600);
+  });
+
+  it("updates before clearing a selection whose body disappeared", async () => {
+    const { state, emitted } = mountSystem("hub-a");
+    await settle();
+    mocks.handle.update.mockClear();
+    mocks.handle.setSelected.mockClear();
+
+    state.bodies = state.bodies.filter((body) => body.id !== "hub-a");
+    await settle();
+    expect(mocks.handle.update).toHaveBeenCalledTimes(1);
+    expect(mocks.handle.setSelected).toHaveBeenCalledWith(null);
+    expect(emitted).toContain(null);
+    expect(mocks.handle.update.mock.invocationCallOrder[0])
+      .toBeLessThan(mocks.handle.setSelected.mock.invocationCallOrder[0]!);
+  });
+
+  it("disposes engine A before restoring the selection on engine B", async () => {
+    mountSystem("node-1");
+    await settle();
+    mocks.build.mockClear();
+    mocks.handle.dispose.mockClear();
+    mocks.handle.focusBody.mockClear();
+
+    mocks.engine = {};
+    mocks.ready?.();
+    await settle();
+    expect(mocks.handle.dispose).toHaveBeenCalledTimes(1);
+    expect(mocks.build).toHaveBeenCalledTimes(1);
+    expect(mocks.handle.dispose.mock.invocationCallOrder[0])
+      .toBeLessThan(mocks.build.mock.invocationCallOrder[0]!);
+    expect(mocks.handle.setSelected).toHaveBeenCalledWith("node-1");
+    expect(mocks.handle.focusBody).not.toHaveBeenCalled();
+  });
+
+  it("disposes the builder on unmount", async () => {
+    mountSystem();
+    await settle();
+    const [{ app }] = mounts;
+    app.unmount();
+    mounts.splice(0, 1);
+    expect(mocks.handle.dispose).toHaveBeenCalledTimes(1);
+  });
+});