@celestia-island/hikari 0.55.211 → 0.55.213

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.211",
+  "version": "0.55.213",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",
@@ -37,6 +37,10 @@
     "./plugins": {
       "import": "./src/plugins/index.ts",
       "types": "./src/plugins/index.ts"
+    },
+    "./plugins/boot-chrome": {
+      "import": "./src/plugins/boot-chrome.mjs",
+      "types": "./src/plugins/boot-chrome.d.mts"
     }
   },
   "files": [

package/src/components/HkMinimap.collapse.test.tsx

@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import HkMinimap from "./HkMinimap";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(props: Record<string, unknown>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => h(HkMinimap, props) });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+const BOXES = [
+  { id: "a", bounds: { x: 0, y: 0, w: 10, h: 10 }, color: "#f00" },
+  { id: "b", bounds: { x: 10, y: 0, w: 10, h: 10 }, color: "#0f0" },
+];
+
+describe("HkMinimap collapse (user direction 2026-10-27)", () => {
+  it("a non-collapsible minimap renders the card and NO minimize button", () => {
+    const c = mount({ boxes: BOXES });
+    expect(c.querySelector(".hk-minimap--collapsed")).toBeNull();
+    expect(c.querySelector(".hk-mm-collapse-btn")).toBeNull();
+    expect(c.querySelector("svg.hk-minimap-svg")).toBeTruthy();
+  });
+
+  it("collapsible renders the minimize button in the zoom bar", () => {
+    const c = mount({ boxes: BOXES, collapsible: true });
+    expect(c.querySelector(".hk-mm-collapse-btn")).toBeTruthy();
+  });
+
+  it("collapsing swaps the card for the semi-transparent map-icon button", async () => {
+    const c = mount({ boxes: BOXES, collapsible: true });
+    (c.querySelector(".hk-mm-collapse-btn") as HTMLElement).click();
+    await nextTick();
+    expect(c.querySelector("svg.hk-minimap-svg")).toBeNull();
+    const glyph = c.querySelector<HTMLButtonElement>(".hk-minimap--collapsed");
+    expect(glyph).toBeTruthy();
+    // The collapsed glyph announces itself and is translucent at rest.
+    expect(glyph!.getAttribute("aria-label")).toBe("Show minimap");
+    expect(glyph!.className).toContain("hk-minimap--collapsed");
+  });
+
+  it("clicking the collapsed glyph expands the card again (uncontrolled)", async () => {
+    const c = mount({ boxes: BOXES, collapsible: true });
+    (c.querySelector(".hk-mm-collapse-btn") as HTMLElement).click();
+    await nextTick();
+    (c.querySelector(".hk-minimap--collapsed") as HTMLElement).click();
+    await nextTick();
+    expect(c.querySelector("svg.hk-minimap-svg")).toBeTruthy();
+    expect(c.querySelector(".hk-minimap--collapsed")).toBeNull();
+  });
+
+  it("the controlled mode honours the collapsed prop and emits updates", async () => {
+    const seen: boolean[] = [];
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      data: () => ({ collapsed: false }),
+      render() {
+        return h(HkMinimap, {
+          boxes: BOXES,
+          collapsible: true,
+          collapsed: (this as { collapsed: boolean }).collapsed,
+          "onUpdate:collapsed": (v: boolean) => {
+            seen.push(v);
+            (this as { collapsed: boolean }).collapsed = v;
+          },
+        });
+      },
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+
+    (container.querySelector(".hk-mm-collapse-btn") as HTMLElement).click();
+    await nextTick();
+    expect(seen).toEqual([true]);
+    // The controlled prop drove the swap.
+    expect(container.querySelector(".hk-minimap--collapsed")).toBeTruthy();
+
+    (container.querySelector(".hk-minimap--collapsed") as HTMLElement).click();
+    await nextTick();
+    expect(seen).toEqual([true, false]);
+    expect(container.querySelector("svg.hk-minimap-svg")).toBeTruthy();
+  });
+
+  it("drag-to-pan SURVIVES a collapse→expand cycle (the R2/R3 S1)", async () => {
+    // The old imperative listeners bound once at mount to the mount-time
+    // element; the collapsed swap replaced the node and the re-expanded
+    // card never got them back. The handlers now ride the vnodes, so the
+    // gesture works on whatever element renders.
+    const c = mount({ boxes: BOXES, collapsible: true });
+    const card = c.querySelector(".hk-minimap") as HTMLElement;
+    const before = c.querySelector("svg.hk-minimap-svg")!;
+    card.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, clientX: 10, clientY: 10 }));
+    card.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, clientX: 20, clientY: 14 }));
+    card.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+    expect(c.querySelector(".hk-minimap")).toBeTruthy(); // gesture ran
+    void before;
+    // Round-trip: collapse then expand.
+    (c.querySelector(".hk-mm-collapse-btn") as HTMLElement).click();
+    await nextTick();
+    (c.querySelector(".hk-minimap--collapsed") as HTMLElement).click();
+    await nextTick();
+    // The re-expanded card is a NEW element — the drag handlers must be
+    // on IT. A pointer sequence must reach the pan machinery: assert via
+    // the dragging data flag, which only onDown sets.
+    const card2 = c.querySelector(".hk-minimap") as HTMLElement;
+    expect(card2).not.toBe(card); // the node really was replaced
+    card2.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, clientX: 5, clientY: 5 }));
+    await nextTick(); // the data flag renders on the next patch
+    expect(card2.getAttribute("data-dragging")).toBe("");
+    card2.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+    await nextTick();
+    expect(card2.getAttribute("data-dragging")).toBeNull();
+  });
+
+  it("the collapsed glyph is a button, never a drag surface (delta F2)", async () => {
+    const c = mount({ boxes: BOXES, collapsible: true, collapsed: true });
+    const glyph = c.querySelector(".hk-minimap--collapsed") as HTMLElement;
+    glyph.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, clientX: 5, clientY: 5 }));
+    glyph.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, clientX: 25, clientY: 20 }));
+    await nextTick();
+    // The drag machinery never engaged: the swap element carries no
+    // data-dragging and a later expand starts clean.
+    expect(glyph.getAttribute("data-dragging")).toBeNull();
+    glyph.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+    glyph.click();
+    await nextTick();
+    const card = c.querySelector(".hk-minimap") as HTMLElement;
+    expect(card.getAttribute("data-dragging")).toBeNull();
+  });
+
+  it("a controlled `collapsed: true` starts collapsed even without a click", () => {
+    const c = mount({ boxes: BOXES, collapsible: true, collapsed: true });
+    expect(c.querySelector(".hk-minimap--collapsed")).toBeTruthy();
+    expect(c.querySelector("svg.hk-minimap-svg")).toBeNull();
+  });
+});

package/src/components/HkMinimap.scss

@@ -149,3 +149,37 @@
   font-variant-numeric: tabular-nums;
   color: rgb(var(--color-muted));
 }
+
+/* ── The collapsed affordance (user direction 2026-10-27) ─────────────
+ * The card folds down to a small map-icon button pinned where the card
+ * sat. It is deliberately SEMI-TRANSPARENT at rest — collapsed means
+ * "out of the way" and it must not compete with the content underneath —
+ * and only reaches full opacity on hover. */
+.hk-minimap--collapsed {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  cursor: pointer;
+  color: rgb(var(--color-text) / 70%);
+  background: rgb(var(--color-surface) / 0.55);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--radius-sm);
+  opacity: 0.55;
+  transition: opacity var(--duration-short, 0.15s), background var(--duration-short, 0.15s);
+
+  &:hover,
+  &:focus-visible {
+    opacity: 1;
+    background: rgb(var(--color-surface) / 0.9);
+    color: rgb(var(--color-text));
+  }
+}
+
+/* The minimize button rides the zoom bar's far end — visually set
+ * apart from the zoom pair it does not belong to. */
+.hk-mm-collapse-btn {
+  margin-inline-start: auto;
+}

package/src/components/HkMinimap.tsx

@@ -1,5 +1,5 @@
-import { Maximize2, ZoomIn, ZoomOut } from "lucide-vue-next";
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch, type PropType } from "vue";
+import { Map as MapIcon, Maximize2, Minimize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { computed, defineComponent, onBeforeUnmount, ref, watch, type PropType } from "vue";
 
 import HSlider from "./HkSlider";
 
@@ -88,6 +88,14 @@ export default defineComponent({
      *  visible; the map is expected to reappear once it has something to
      *  say (the viewer switches this off when zoomed past fit). */
     toolbarOnly: { type: Boolean, default: false },
+    /** Enable the collapse affordance (user direction 2026-10-27): the
+     *  card grows a minimize button in its zoom bar, and the collapsed
+     *  state renders as the small semi-transparent map-icon button
+     *  (fully opaque on hover). */
+    collapsible: { type: Boolean, default: false },
+    /** The collapsed state (v-model:collapsed). `undefined` = uncontrolled
+     *  (the component starts expanded and owns the flag). */
+    collapsed: { type: Boolean, default: undefined },
     /** Optional prop-callback surface (alternative to the emits). */
     onZoomTo: {
       type: Function as PropType<(percent: number, source?: "slider" | "step") => void>,
@@ -97,6 +105,8 @@ export default defineComponent({
     onPanDelta: { type: Function as PropType<(dx: number, dy: number) => void>, default: undefined },
   },
   emits: {
+    /** Collapse toggle (only emitted when `collapsible`). */
+    "update:collapsed": (_collapsed: boolean) => true,
     /** Zoom request carrying the clamped target percent plus the gesture
      *  source — `"step"` (± buttons, relative one-rung request) vs
      *  `"slider"` (dropdown slider, ABSOLUTE target rung). */
@@ -109,9 +119,23 @@ export default defineComponent({
     const svgW = 160;
     const svgH = 110;
     const rootRef = ref<HTMLElement | null>(null);
+    const internalCollapsed = ref(false);
+    const sliderOpen = ref(false);
+    const isCollapsed = computed(() =>
+      props.collapsed !== undefined ? props.collapsed : internalCollapsed.value);
+    function toggleCollapsed(next: boolean): void {
+      internalCollapsed.value = next;
+      if (next) {
+        sliderOpen.value = false;
+        // A mid-drag collapse swaps the element: no pointerup can reach
+        // the new root, so end the drag HERE or unpressed hovers would
+        // keep panning (delta S3 F4).
+        dragging.value = false;
+      }
+      emit("update:collapsed", next);
+    }
     const dragging = ref(false);
     const dragStart = ref({ x: 0, y: 0 });
-    const sliderOpen = ref(false);
 
     const cb = computed(() => props.contentBounds);
     const overpanW = computed(() => Math.max(props.contentBounds.w * 0.5, props.viewportWidth * 0.3));
@@ -166,6 +190,11 @@ export default defineComponent({
     }
 
     function onDown(e: PointerEvent) {
+      // The collapsed glyph is a plain button, never a drag surface: its
+      // only svg is the 16px lucide icon, which onMove's unit conversion
+      // would measure as a ~10x-amplified map (delta S2 F2 — a sloppy
+      // press-move on the default-state control jolted the camera).
+      if (isCollapsed.value) return;
       const target = e.target as HTMLElement;
       // Zoom chrome (bar + slider pop) must never start a map drag — the
       // root's setPointerCapture would swallow the slider's gestures.
@@ -229,22 +258,7 @@ export default defineComponent({
       }
     });
 
-    onMounted(() => {
-      const el = rootRef.value;
-      if (!el) return;
-      el.addEventListener("pointerdown", onDown);
-      el.addEventListener("pointermove", onMove);
-      el.addEventListener("pointerup", onUp);
-      el.addEventListener("pointercancel", onUp);
-    });
     onBeforeUnmount(() => {
-      const el = rootRef.value;
-      if (el) {
-        el.removeEventListener("pointerdown", onDown);
-        el.removeEventListener("pointermove", onMove);
-        el.removeEventListener("pointerup", onUp);
-        el.removeEventListener("pointercancel", onUp);
-      }
       document.removeEventListener("pointerdown", onDocPointerDown, true);
       document.removeEventListener("keydown", onDocKeydown, true);
     });
@@ -279,12 +293,39 @@ export default defineComponent({
 
       const hubP = props.hubPos ? toMap(props.hubPos.x, props.hubPos.y) : null;
 
+      if (isCollapsed.value) {
+        // The collapsed affordance: a small map-icon button pinned where
+        // the card sits — semi-transparent until hovered (it must not
+        // compete with the content underneath), fully opaque on hover.
+        return (
+          <button
+            ref={rootRef}
+            type="button"
+            class="hk-minimap hk-minimap--collapsed"
+            aria-label={t("hikari::zoomToolbar.expandMap", "Show minimap")}
+            title={t("hikari::zoomToolbar.expandMap", "Show minimap")}
+            onClick={() => toggleCollapsed(false)}
+            onPointerdown={onDown}
+            onPointermove={onMove}
+            onPointerup={onUp}
+            onPointercancel={onUp}
+          >
+            <MapIcon size={16} />
+          </button>
+        );
+      }
+
       return (
         <div
           ref={rootRef}
           class="hk-minimap"
           data-dragging={dragging.value ? "" : undefined}
           data-toolbar-only={props.toolbarOnly ? "" : undefined}
+          data-collapsible={props.collapsible ? "" : undefined}
+          onPointerdown={onDown}
+          onPointermove={onMove}
+          onPointerup={onUp}
+          onPointercancel={onUp}
         >
           {!props.toolbarOnly && (
             <svg viewBox={`0 0 ${svgW} ${svgH}`} width={svgW} height={svgH} class="hk-minimap-svg">
@@ -369,6 +410,17 @@ export default defineComponent({
                 <Maximize2 size={11} />
               </button>
             )}
+            {props.collapsible && (
+              <button
+                class="hk-mm-zoom-btn hk-mm-collapse-btn"
+                type="button"
+                onClick={() => toggleCollapsed(true)}
+                aria-label={t("hikari::zoomToolbar.collapseMap", "Hide minimap")}
+                title={t("hikari::zoomToolbar.collapseMap", "Hide minimap")}
+              >
+                <Minimize2 size={11} />
+              </button>
+            )}
           </div>
           {sliderOpen.value && (
             <div class="hk-mm-zoom-pop">

package/src/components/HkTitleBar.test.tsx

@@ -109,6 +109,74 @@ describe("HkTitleBar", () => {
   });
 });
 
+describe("HkTitleBar window-chrome claim", () => {
+  // The bar IS the app's title bar, so mounting it must stand hikari's boot bar
+  // (boot-chrome.js) down — otherwise two caption bars overlap for the rest of
+  // the session. Tests use a raw window listener: that is the whole contract.
+  function collect(): { claims: Array<{ by?: string }>; stop: () => void } {
+    const claims: Array<{ by?: string }> = [];
+    const listener = (event: Event) => {
+      claims.push((event as CustomEvent<{ by?: string }>).detail ?? {});
+    };
+    window.addEventListener("hk:chrome-claim", listener);
+    return {
+      claims,
+      stop: () => window.removeEventListener("hk:chrome-claim", listener),
+    };
+  }
+
+  function cleanup(): void {
+    document.documentElement.removeAttribute("data-hk-chrome");
+  }
+
+  it("claims the window on mount and marks the app as the chrome owner", () => {
+    const { claims, stop } = collect();
+    try {
+      mount(h(HkTitleBar, { title: "App" }));
+
+      expect(claims).toHaveLength(1);
+      expect(claims[0]?.by).toBe("HkTitleBar");
+      expect(document.documentElement.getAttribute("data-hk-chrome")).toBe("app");
+    } finally {
+      stop();
+      cleanup();
+    }
+  });
+
+  it("never claims twice for one mount (a re-render is not a new takeover)", async () => {
+    const { claims, stop } = collect();
+    try {
+      const maximized = ref(false);
+      mount(h(() => h(HkTitleBar, { title: "App", maximized: maximized.value })));
+      expect(claims).toHaveLength(1);
+
+      maximized.value = true;
+      await nextTick();
+      maximized.value = false;
+      await nextTick();
+
+      expect(claims).toHaveLength(1);
+    } finally {
+      stop();
+      cleanup();
+    }
+  });
+
+  it("leaves the existing props/emits contract untouched", () => {
+    const emitted: string[] = [];
+    const host = mount(
+      h(HkTitleBar, {
+        title: "App",
+        onMinimize: () => emitted.push("minimize"),
+        onClose: () => emitted.push("close"),
+      }),
+    );
+    host.querySelector<HTMLButtonElement>('[title="Minimize"]')!.click();
+    host.querySelector<HTMLButtonElement>('[title="Close"]')!.click();
+    expect(emitted).toEqual(["minimize", "close"]);
+  });
+});
+
 describe("HkTitleBar stylesheet contract", () => {
   const css = compile(resolve(componentDir, "HkTitleBar.scss"), {
     style: "expanded",

package/src/components/HkTitleBar.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
 import { useI18n } from "../i18n/context";
+import { claimWindowChrome } from "../runtime/windowChrome";
 
 import "./HkTitleBar.scss";
 
@@ -60,6 +61,16 @@ export default defineComponent({
   },
   setup(props, { emit, slots }) {
     const { t } = useI18n();
+    // The bar IS the app's window chrome, so mounting it means the boot chrome
+    // (boot-chrome.js, drawn before the bundle exists) must hand the window
+    // over: dispatch `hk:chrome-claim` once per mount, never revoked. See
+    // runtime/windowChrome for the contract; hydration/SSR never reaches here.
+    let claimed = false;
+    onMounted(() => {
+      if (claimed) return;
+      claimed = true;
+      claimWindowChrome("HkTitleBar");
+    });
     return () => (
       <div
         class="hk-titlebar"

package/src/components/HkTreemapStage.scss

@@ -0,0 +1,114 @@
+/* HkTreemapStage — the interactive treemap surface: a header with the
+ * back button + drill path, the pan/zoom cell canvas (the cells reuse
+ * HkTreemap's chrome classes verbatim — theme mortar, ellipsis labels),
+ * and the collapsible HkMinimap pinned bottom-right. */
+
+.hk-treemap-stage {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.hk-treemap-stage__head {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--space-6, 6px);
+  padding: var(--space-4, 4px) var(--space-8, 8px);
+  min-height: 32px;
+  border-bottom: 1px solid var(--border-faint);
+}
+
+/* Keeps the path centred when the back button is absent (root level). */
+.hk-treemap-stage__head-pad {
+  width: 24px;
+  flex: 0 0 auto;
+}
+
+.hk-treemap-stage__path {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: var(--space-4, 4px);
+  font-size: var(--text-xs, 0.75rem);
+  overflow: hidden;
+}
+
+.hk-treemap-stage__crumb {
+  appearance: none;
+  border: 0;
+  padding: 2px 4px;
+  background: transparent;
+  color: rgb(var(--color-muted));
+  cursor: pointer;
+  border-radius: var(--radius-xs, 3px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 12rem;
+
+  &:hover {
+    color: rgb(var(--color-text));
+    background: rgb(var(--color-primary) / 6%);
+  }
+
+  &[data-last] {
+    color: rgb(var(--color-text));
+    font-weight: 600;
+    cursor: default;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+}
+
+.hk-treemap-stage__crumb-seg {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.hk-treemap-stage__crumb-sep {
+  color: rgb(var(--color-text) / 35%);
+  flex: 0 0 auto;
+}
+
+.hk-treemap-stage__body {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.hk-treemap-stage__canvas {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: rgb(var(--color-muted, 108 108 108) / 12%);
+  border-radius: var(--radius-sm, 4px);
+}
+
+.hk-treemap-stage__surface {
+  position: absolute;
+  inset: 0;
+}
+
+/* Cells reuse .hk-treemap__cell chrome from HkTreemap.scss; the stage
+ * adds the drill affordance on group cells. */
+.hk-treemap-stage__cell--drillable {
+  cursor: zoom-in;
+
+  &:hover {
+    outline: 2px solid rgb(var(--color-primary) / 70%);
+    outline-offset: -2px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: -2px;
+  }
+}