@celestia-island/hikari 0.55.211 → 0.55.212

package/package.json

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

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/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;
+  }
+}

package/src/components/HkTreemapStage.test.tsx

@@ -0,0 +1,283 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, reactive } from "vue";
+
+// Same stub pattern as HkTreemap.test.tsx: assert the tooltip wiring
+// without the popup manager.
+vi.mock("./HkTooltip", () => ({
+  default: {
+    name: "HkTooltipStub",
+    props: { text: { type: String, required: true } },
+    setup(props: { text: string }, { slots }: { slots: { default?: (p: unknown) => unknown } }) {
+      return () => h("span", { "data-hk-tooltip-text": props.text }, slots.default?.({}) as never);
+    },
+  },
+}));
+
+import HkTreemapStage from "./HkTreemapStage";
+import type { HkTreemapNode } from "./HkTreemap";
+
+class FakeResizeObserver {
+  static instances: FakeResizeObserver[] = [];
+  readonly observed: Element[] = [];
+  disconnected = false;
+  constructor(readonly callback: () => void) {
+    FakeResizeObserver.instances.push(this);
+  }
+  observe(element: Element): void {
+    this.observed.push(element);
+  }
+  disconnect(): void {
+    this.disconnected = true;
+  }
+}
+
+const originalResizeObserver = globalThis.ResizeObserver;
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+const NODES: HkTreemapNode[] = [
+  {
+    id: "group",
+    label: "Group",
+    value: 0,
+    children: [
+      { id: "a", label: "Alpha", value: 2 },
+      { id: "b", label: "Beta", value: 4 },
+    ],
+  },
+  { id: "other", label: "Other", value: 4 },
+];
+
+function fakeRect(width: number, height: number): DOMRect {
+  return {
+    x: 0, y: 0, top: 0, left: 0, right: width, bottom: height,
+    width, height, toJSON: () => ({}),
+  } as DOMRect;
+}
+
+function mountStage(initialProps: Record<string, unknown> = { nodes: NODES }) {
+  const props = reactive<Record<string, unknown>>({ ...initialProps });
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp(
+    defineComponent({
+      setup() {
+        return () => h(HkTreemapStage, { ...props });
+      },
+    }),
+  );
+  app.mount(container);
+  const mounted = { app, container };
+  mounts.push(mounted);
+  return {
+    ...mounted,
+    update(next: Record<string, unknown>) {
+      Object.assign(props, next);
+    },
+  };
+}
+
+async function setSize(mounted: { container: HTMLElement }, width = 400, height = 240) {
+  const el = mounted.container.querySelector<HTMLElement>(".hk-treemap-stage__canvas")!;
+  el.getBoundingClientRect = () => fakeRect(width, height);
+  Object.defineProperty(el, "clientWidth", { value: width, configurable: true });
+  Object.defineProperty(el, "clientHeight", { value: height, configurable: true });
+  FakeResizeObserver.instances[0]?.callback();
+  await nextTick();
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  FakeResizeObserver.instances = [];
+  globalThis.ResizeObserver = FakeResizeObserver as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => {
+  for (const mounted of mounts.splice(0)) {
+    mounted.app.unmount();
+    mounted.container.remove();
+  }
+  globalThis.ResizeObserver = originalResizeObserver;
+});
+
+describe("HkTreemapStage — the drill path", () => {
+  it("renders the root level cells with tooltips and no back button at root", async () => {
+    const mounted = mountStage({ nodes: NODES, ariaLabel: "Usage" });
+    await setSize(mounted);
+    const cells = mounted.container.querySelectorAll(".hk-treemap-stage__cell");
+    // Root level renders TOP-LEVEL cells only — a group is ONE drillable
+    // cell by design (click to enter): group + other = 2.
+    expect(cells.length).toBe(2);
+    expect(mounted.container.querySelector('[aria-label="Back"]')).toBeNull();
+    const tooltips = [...mounted.container.querySelectorAll("[data-hk-tooltip-text]")].map(
+      (n) => n.getAttribute("data-hk-tooltip-text"),
+    );
+    expect(tooltips.some((t) => t!.startsWith("Group:"))).toBe(true);
+    expect(mounted.container.textContent).toContain("Usage"); // the root crumb
+  });
+
+  it("clicking a GROUP cell drills in: children fill the canvas, back button appears", async () => {
+    const mounted = mountStage({ nodes: NODES });
+    await setSize(mounted);
+    const group = [...mounted.container.querySelectorAll(".hk-treemap-stage__cell--drillable")]
+      .find((c) => (c.getAttribute("aria-label") ?? "").startsWith("Group:")) as HTMLElement;
+    expect(group).toBeTruthy();
+    group.click();
+    await nextTick();
+    // Back button + the drilled crumb appear.
+    expect(mounted.container.querySelector('[aria-label="Back"]')).toBeTruthy();
+    expect(mounted.container.textContent).toContain("Group");
+    // The children now lay out at the full canvas: both leaves present.
+    const labels = [...mounted.container.querySelectorAll(".hk-treemap__label")].map(
+      (n) => n.textContent,
+    );
+    expect(labels).toContain("Alpha");
+    expect(labels).toContain("Beta");
+    // "Other" is gone at this level.
+    expect(labels).not.toContain("Other");
+  });
+
+  it("the back button pops one level; the root crumb pops all the way", async () => {
+    const mounted = mountStage({ nodes: NODES });
+    await setSize(mounted);
+    const group = [...mounted.container.querySelectorAll(".hk-treemap-stage__cell--drillable")]
+      .find((c) => (c.getAttribute("aria-label") ?? "").startsWith("Group:")) as HTMLElement;
+    group.click();
+    await nextTick();
+    (mounted.container.querySelector('[aria-label="Back"]') as HTMLElement).click();
+    await nextTick();
+    expect(mounted.container.querySelector('[aria-label="Back"]')).toBeNull();
+    // Back at root: "Other" is back.
+    expect(mounted.container.textContent).toContain("Other");
+  });
+
+  it("clicking a LEAF emits select, never drills", async () => {
+    const mounted = mountStage({ nodes: [{ id: "leaf", label: "Leaf", value: 1 }] });
+    await setSize(mounted);
+    const seen: string[] = [];
+    // Re-mount with the listener (simpler than reactive fn props here).
+    mounted.app.unmount();
+    mounts.splice(mounts.indexOf(mounted), 1);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HkTreemapStage, {
+          nodes: [{ id: "leaf", label: "Leaf", value: 1 }],
+          onSelect: (id: string) => seen.push(id),
+        }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    const el = container.querySelector<HTMLElement>(".hk-treemap-stage__canvas")!;
+    el.getBoundingClientRect = () => fakeRect(400, 240);
+    Object.defineProperty(el, "clientWidth", { value: 400, configurable: true });
+    Object.defineProperty(el, "clientHeight", { value: 240, configurable: true });
+    // The re-mount's observer is the LAST instance (the first app's still
+    // sits in the array, disconnected).
+    FakeResizeObserver.instances[FakeResizeObserver.instances.length - 1]?.callback();
+    await nextTick();
+    const leaf = container.querySelector(".hk-treemap-stage__cell") as HTMLElement;
+    leaf.click();
+    await nextTick();
+    expect(seen).toEqual(["leaf"]);
+    expect(container.querySelector('[aria-label="Back"]')).toBeNull();
+  });
+
+  it("changing the data resets the drill stack and the camera", async () => {
+    const mounted = mountStage({ nodes: NODES });
+    await setSize(mounted);
+    const group = [...mounted.container.querySelectorAll(".hk-treemap-stage__cell--drillable")]
+      .find((c) => (c.getAttribute("aria-label") ?? "").startsWith("Group:")) as HTMLElement;
+    group.click();
+    await nextTick();
+    expect(mounted.container.querySelector('[aria-label="Back"]')).toBeTruthy();
+
+    mounted.update({ nodes: [{ id: "fresh", label: "Fresh", value: 3 }] });
+    await nextTick();
+    expect(mounted.container.querySelector('[aria-label="Back"]')).toBeNull();
+    expect(mounted.container.textContent).toContain("Fresh");
+  });
+});
+
+describe("HkTreemapStage — the camera + minimap", () => {
+  it("the minimap defaults COLLAPSED to the semi-transparent map-icon button", async () => {
+    const mounted = mountStage({ nodes: NODES });
+    await setSize(mounted);
+    expect(mounted.container.querySelector(".hk-minimap--collapsed")).toBeTruthy();
+    expect(mounted.container.querySelector(".hk-mm-zoom-bar")).toBeNull();
+  });
+
+  it("expanding reveals the zoom bar; a step zoom emits and scales the surface", async () => {
+    const mounted = mountStage({ nodes: NODES });
+    await setSize(mounted);
+    (mounted.container.querySelector(".hk-minimap--collapsed") as HTMLElement).click();
+    await nextTick();
+    const zoomIn = [...mounted.container.querySelectorAll(".hk-mm-zoom-btn")]
+      .filter((b) => b.getAttribute("aria-label") === "Zoom in")[0] as HTMLElement;
+    expect(zoomIn).toBeTruthy();
+    zoomIn.click();
+    await nextTick();
+    const surface = mounted.container.querySelector<HTMLElement>(".hk-treemap-stage__surface")!;
+    expect(surface.style.transform).toContain("scale(1.1)");
+    // The zoom label reads the new rung.
+    expect(mounted.container.querySelector(".hk-mm-zoom-label")!.textContent).toContain("110");
+  });
+
+  it("zoom reveals detail: a small cell's label appears at a higher rung", async () => {
+    // One dominant leaf + crumbs: at 100% the crumbs sit under the label
+    // floor; zoom in and the effective size crosses it.
+    // Shares tuned for the ladder: each crumb ≈ 15×15px at 100% (under
+    // the 18px label floor) → ≈ 30×30 at 200% (over it).
+    const crumbs: HkTreemapNode[] = Array.from({ length: 30 }, (_, i) => ({
+      id: `c${i}`,
+      label: `Crumble-${i}`,
+      value: 5,
+    }));
+    const mounted = mountStage({ nodes: [{ id: "big", label: "Big", value: 2000 }, ...crumbs] });
+    await setSize(mounted, 400, 240);
+    const labelsAt = () =>
+      [...mounted.container.querySelectorAll(".hk-treemap__label")].map((n) => n.textContent);
+    const before = labelsAt().filter((t) => t?.startsWith("Crumble-")).length;
+    (mounted.container.querySelector(".hk-minimap--collapsed") as HTMLElement).click();
+    await nextTick();
+    // Step to 200%: each crumb's ZOOMED size doubles.
+    for (let i = 0; i < 10; i += 1) {
+      const zoomIn = [...mounted.container.querySelectorAll(".hk-mm-zoom-btn")]
+        .filter((b) => b.getAttribute("aria-label") === "Zoom in")[0] as HTMLElement;
+      zoomIn.click();
+      await nextTick();
+    }
+    const after = labelsAt().filter((t) => t?.startsWith("Crumble-")).length;
+    expect(after).toBeGreaterThan(before);
+  });
+
+  it("minimap drag-to-pan works in the DEFAULT collapsed→expanded flow (the R2/R3 S1)", async () => {
+    const mounted = mountStage({ nodes: NODES });
+    await setSize(mounted);
+    // Expand from the default-collapsed glyph.
+    (mounted.container.querySelector(".hk-minimap--collapsed") as HTMLElement).click();
+    await nextTick();
+    const card = mounted.container.querySelector(".hk-minimap") as HTMLElement;
+    expect(card).toBeTruthy();
+    // The old imperative binding missed the FIRST-render-null minimap
+    // entirely; with vnode-bound handlers the gesture must reach the
+    // camera: a drag on the map moves the surface transform.
+    card.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, clientX: 80, clientY: 55 }));
+    await nextTick();
+    expect(card.getAttribute("data-dragging")).toBe("");
+    card.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, clientX: 100, clientY: 65 }));
+    card.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+    await nextTick();
+    const surface = mounted.container.querySelector<HTMLElement>(".hk-treemap-stage__surface")!;
+    expect(surface.style.transform).not.toBe("translate(0px, 0px) scale(1)");
+    expect(surface.style.transform).toMatch(/translate\(-?\d+/);
+  });
+
+  it("an empty tree shows the empty state and no minimap", async () => {
+    const mounted = mountStage({ nodes: [], emptyText: "Nothing" });
+    await setSize(mounted);
+    expect(mounted.container.querySelector(".hk-treemap__empty")!.textContent).toBe("Nothing");
+    expect(mounted.container.querySelector(".hk-minimap")).toBeNull();
+    expect(mounted.container.querySelectorAll(".hk-treemap-stage__cell")).toHaveLength(0);
+  });
+});

package/src/components/HkTreemapStage.tsx

@@ -0,0 +1,382 @@
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch,
+  type PropType } from "vue";
+import { ChevronLeft } from "lucide-vue-next";
+
+import HkIconButton from "./HkIconButton";
+import HkMinimap, { type MinimapBox } from "./HkMinimap";
+import HkTooltip from "./HkTooltip";
+import {
+  buildHkTreemapLayout,
+  contrastTextColor,
+  formatHkTreemapPercent,
+  layoutHkTreemapCells,
+  type HkTreemapCell,
+  type HkTreemapLayoutNode,
+  type HkTreemapNode,
+  type HkTreemapValueFormatter,
+} from "./HkTreemap";
+
+import "./HkTreemapStage.scss";
+
+const defaultValueFormatter: HkTreemapValueFormatter = (value) => String(value);
+
+/** One step of the drill path: the node plus its layout at that level. */
+interface DrillStep {
+  /** The node id at this level ("root" for the top). */
+  id: string;
+  label: string;
+  /** The layout nodes visible at this step (root's children, or the drilled
+   *  group's children). */
+  siblings: HkTreemapLayoutNode[];
+}
+
+/**
+ * HkTreemapStage — the interactive treemap surface (user direction
+ * 2026-10-27): the block renderer you can CLICK to zoom into.
+ *
+ *  - DRILL: clicking a GROUP cell zooms into it — its children re-lay out
+ *    at the full canvas, so cells that were slivers reveal their labels,
+ *    meta and nested structure ("部分方块在放大的时候才会显示更多的细
+ *    节"). The header carries a BACK button (ChevronLeft, the family icon
+ *    chrome) plus the drill path; clicking an earlier hop pops back to it.
+ *  - PAN/ZOOM: the camera scales/translates the cell layer; the ±/slider
+ *    zoom bar (via the collapsible HkMinimap pinned bottom-right) steps
+ *    50–200%, and dragging the minimap pans. Larger zoom rungs enlarge
+ *    cells, pushing more of them over the label/meta ladder floors.
+ *  - COLLAPSE: the minimap defaults collapsed to its semi-transparent
+ *    map-icon button (hover = opaque); the minimize button in its zoom
+ *    bar folds it back.
+ *
+ * The cell rendering reuses HkTreemap's pure layout (squarified, theme
+ * mortar) and its HkTooltip-per-cell contract verbatim — same family, no
+ * second renderer.
+ */
+export default defineComponent({
+  name: "HkTreemapStage",
+  props: {
+    nodes: { type: Array as PropType<HkTreemapNode[]>, default: () => [] },
+    valueFormatter: { type: Function as PropType<HkTreemapValueFormatter>, default: undefined },
+    emptyText: { type: String, default: "No data" },
+    ariaLabel: { type: String, default: "Treemap" },
+    /** The camera's zoom percent; uncontrolled when omitted (50–200). */
+    zoomPercent: { type: Number, default: undefined },
+    /** The minimap's collapsed flag; uncontrolled when omitted (defaults
+     *  collapsed — the user direction's "at a glance it stays out of the
+     *  way"; expand on demand). */
+    minimapCollapsed: { type: Boolean, default: undefined },
+  },
+  emits: {
+    "update:zoomPercent": (_percent: number) => true,
+    "update:minimapCollapsed": (_collapsed: boolean) => true,
+    /** A leaf cell was activated (click). */
+    select: (_id: string) => true,
+  },
+  setup(props, { emit }) {
+    const hostRef = ref<HTMLElement | null>(null);
+    const size = ref<{ w: number; h: number } | null>(null);
+    let observer: ResizeObserver | undefined;
+    let resizeCleanup: (() => void) | undefined;
+
+    // ── the camera ────────────────────────────────────────────────────
+    const MIN_ZOOM = 50;
+    const MAX_ZOOM = 200;
+    const STEP_ZOOM = 10;
+    const internalZoom = ref(100);
+    const zoomPct = computed(() => props.zoomPercent ?? internalZoom.value);
+    const panX = ref(0);
+    const panY = ref(0);
+
+    function applyZoom(target: number): void {
+      const next = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Math.round(target)));
+      // Capture the PREVIOUS rung before writing the new one — reading
+      // zoomPct after the write always yields `next` and turns the pan
+      // rescale below into a silent no-op (R2 finding).
+      const prev = zoomPct.value;
+      internalZoom.value = next;
+      emit("update:zoomPercent", next);
+      // The camera anchors the ORIGIN (transform-origin: 0 0), so a rung
+      // change rescales any accumulated pan by the same ratio to keep the
+      // content under the cursor tracking — an origin-anchored re-scale,
+      // not a centre-anchored one.
+      if (prev > 0 && next !== prev) {
+        const ratio = next / prev;
+        panX.value *= ratio;
+        panY.value *= ratio;
+      }
+    }
+
+    function applyPanDelta(dx: number, dy: number): void {
+      panX.value += dx;
+      panY.value += dy;
+    }
+
+    function resetCamera(): void {
+      internalZoom.value = 100;
+      emit("update:zoomPercent", 100);
+      panX.value = 0;
+      panY.value = 0;
+    }
+
+    // ── the drill stack ───────────────────────────────────────────────
+    const layout = computed(() => buildHkTreemapLayout(props.nodes));
+    const drill = ref<DrillStep[]>([]);
+    const current = computed<DrillStep>(() => {
+      const step = drill.value[drill.value.length - 1];
+      if (step) return step;
+      return { id: "root", label: "", siblings: layout.value.nodes };
+    });
+
+    function pushDrill(node: HkTreemapLayoutNode): void {
+      if (!node.children || node.children.length === 0) {
+        emit("select", node.id);
+        return;
+      }
+      drill.value = [
+        ...drill.value,
+        { id: node.id, label: node.label, siblings: node.children },
+    ];
+      // Drilling is itself a zoom: reset the pan so the new level starts
+      // framed; the zoom rung stays (the user picked it).
+      panX.value = 0;
+      panY.value = 0;
+    }
+
+    function popTo(index: number): void {
+      drill.value = drill.value.slice(0, index);
+      panX.value = 0;
+      panY.value = 0;
+    }
+
+    // A changed LAYOUT invalidates the drill stack. Watching the layout
+    // (not the array identity) catches the in-place mutation a consumer
+    // can make (the computed recomputes off contents). Inline
+    // `:nodes="[...]"` literals still reset on every parent re-render —
+    // the layout allocates a fresh tree per recompute — so pass a stable
+    // reference from hot parents (known limitation, delta review F3).
+    watch(layout, () => {
+      drill.value = [];
+      resetCamera();
+    });
+
+    // ── measurement (LOCAL px — the dpiPrefs root-zoom lesson) ────────
+    function measure() {
+      const el = hostRef.value;
+      if (!el) return;
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      if (w > 0 && h > 0) size.value = { w, h };
+    }
+    onMounted(() => {
+      const el = hostRef.value;
+      if (!el) return;
+      measure();
+      if (typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver(measure);
+        observer.observe(el);
+      } else {
+        window.addEventListener("resize", measure);
+        resizeCleanup = () => window.removeEventListener("resize", measure);
+      }
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      observer = undefined;
+      resizeCleanup?.();
+      resizeCleanup = undefined;
+    });
+    watch([layout, current], measure);
+
+    // ── cells at the current level ────────────────────────────────────
+    const cells = computed<HkTreemapCell[]>(() => {
+      const dims = size.value;
+      if (!dims || layout.value.nodes.length === 0) return [];
+      return layoutHkTreemapCells(current.value.siblings, 0, 0, dims.w, dims.h);
+    });
+
+    const formatValue = (value: number) =>
+      (props.valueFormatter ?? defaultValueFormatter)(value);
+
+    // ── the minimap's model: boxes = the level's top cells, viewport =
+    //    the camera window over the (virtual) content plane. ──────────
+    const ZOOM_FOR_BOUNDS = 1; // content plane == canvas plane at 100%
+    const mmBoxes = computed<MinimapBox[]>(() =>
+      cells.value.map((cell) => ({
+        id: cell.node.id,
+        bounds: { x: cell.x, y: cell.y, w: cell.w, h: cell.h },
+        color: cell.node.color,
+      })),
+    );
+    const mmContentBounds = computed(() => {
+      const dims = size.value;
+      return { x: 0, y: 0, w: dims?.w ?? 800, h: dims?.h ?? 600 };
+    });
+    const mmZoom = computed(() => (zoomPct.value / 100) * ZOOM_FOR_BOUNDS);
+
+    const internalMinimapCollapsed = ref(true);
+    const minimapIsCollapsed = computed(() =>
+      props.minimapCollapsed !== undefined
+        ? props.minimapCollapsed
+        : internalMinimapCollapsed.value,
+    );
+    function onMinimapCollapsed(v: boolean): void {
+      internalMinimapCollapsed.value = v;
+      emit("update:minimapCollapsed", v);
+    }
+
+    // ── render ────────────────────────────────────────────────────────
+    function cellText(node: HkTreemapLayoutNode): string {
+      return `${node.label}: ${formatValue(node.value)} · ${formatHkTreemapPercent(node.percent)}`;
+    }
+
+    const hasData = computed(() => layout.value.nodes.length > 0);
+    const surfaceStyle = computed(() => ({
+      transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoomPct.value / 100})`,
+      transformOrigin: "0 0",
+    }));
+
+    return () => (
+      <div class="hk-treemap-stage">
+        {hasData.value && (
+          <header class="hk-treemap-stage__head">
+            {drill.value.length > 0 ? (
+              <HkIconButton
+                size={24}
+                variant="ghost"
+                aria-label="Back"
+                onClick={() => popTo(drill.value.length - 1)}
+              >
+                {{ icon: () => <ChevronLeft size={15} /> }}
+              </HkIconButton>
+            ) : (
+              <span class="hk-treemap-stage__head-pad" aria-hidden="true" />
+            )}
+            <nav class="hk-treemap-stage__path" aria-label="Drill path">
+              <button
+                type="button"
+                class="hk-treemap-stage__crumb"
+                data-root=""
+                onClick={() => popTo(0)}
+              >
+                {props.ariaLabel}
+              </button>
+              {drill.value.map((step, i) => (
+                <span key={step.id} class="hk-treemap-stage__crumb-seg">
+                  <span class="hk-treemap-stage__crumb-sep" aria-hidden="true">/</span>
+                  <button
+                    type="button"
+                    class="hk-treemap-stage__crumb"
+                    data-last={i === drill.value.length - 1 || undefined}
+                    onClick={() => popTo(i + 1)}
+                  >
+                    {step.label}
+                  </button>
+                </span>
+              ))}
+            </nav>
+          </header>
+        )}
+        <div class="hk-treemap-stage__body">
+          <div ref={hostRef} class="hk-treemap-stage__canvas" role="application" aria-label={props.ariaLabel}>
+            {hasData.value && (
+              <div class="hk-treemap-stage__surface" style={surfaceStyle.value}>
+                {cells.value.map((cell) => {
+                  const { node, x, y, w, h } = cell;
+                  const isGroup = cell.children.length > 0;
+                  // The ladder reads the ZOOMED size: a zoomed-in rung
+                  // pushes small cells over the label floors — the
+                  // "detail appears when you zoom" contract.
+                  const zw = w * (zoomPct.value / 100);
+                  const zh = h * (zoomPct.value / 100);
+                  const showValue = zh >= 40 && zw >= 56;
+                  const showLabel = zh >= 18 && zw >= 24;
+                  return (
+                    <HkTooltip key={node.id} text={cellText(node)} placement="top">
+                      {() => (
+                        <div
+                          class={{
+                            "hk-treemap__cell": true,
+                            "hk-treemap__cell--group": isGroup,
+                            "hk-treemap-stage__cell": true,
+                            "hk-treemap-stage__cell--drillable": isGroup,
+                          }}
+                          style={{
+                            left: `${x}px`,
+                            top: `${y}px`,
+                            width: `${w}px`,
+                            height: `${h}px`,
+                            background: node.color,
+                            "--hk-treemap-fg": contrastTextColor(node.color),
+                          }}
+                          // Every cell is an activatable button (groups
+                          // drill, leaves select) — keyboard parity with
+                          // the mouse path (R2).
+                          role="button"
+                          tabindex={0}
+                          aria-label={cellText(node)}
+                          onClick={() => pushDrill(node)}
+                          onKeydown={(e: KeyboardEvent) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              pushDrill(node);
+                            }
+                          }}
+                        >
+                          {isGroup ? (
+                            <span class="hk-treemap__group-head">
+                              <span class="hk-treemap__label hk-treemap__label--group">
+                                {node.label}
+                              </span>
+                              {showValue && (
+                                <span class="hk-treemap__meta">
+                                  {formatValue(node.value)} · {formatHkTreemapPercent(node.percent)}
+                                </span>
+                              )}
+                            </span>
+                          ) : (
+                            showLabel && (
+                              <span class="hk-treemap__leaf-body">
+                                <span class="hk-treemap__label">{node.label}</span>
+                                {showValue && (
+                                  <span class="hk-treemap__meta">
+                                    {formatValue(node.value)} · {formatHkTreemapPercent(node.percent)}
+                                  </span>
+                                )}
+                              </span>
+                            )
+                          )}
+                        </div>
+                      )}
+                    </HkTooltip>
+                  );
+                })}
+              </div>
+            )}
+            {!hasData.value && (
+              <div class="hk-treemap__empty">{props.emptyText}</div>
+            )}
+          </div>
+          {hasData.value && (
+            <HkMinimap
+              collapsible
+              collapsed={minimapIsCollapsed.value}
+              onUpdate:collapsed={onMinimapCollapsed}
+              boxes={mmBoxes.value}
+              zoom={mmZoom.value}
+              panX={panX.value}
+              panY={panY.value}
+              viewportWidth={size.value?.w ?? 800}
+              viewportHeight={size.value?.h ?? 600}
+              contentBounds={mmContentBounds.value}
+              zoomPercent={zoomPct.value}
+              minZoomPercent={MIN_ZOOM}
+              maxZoomPercent={MAX_ZOOM}
+              zoomStepPercent={STEP_ZOOM}
+              onZoomTo={(pct: number) => applyZoom(pct)}
+              onPanDelta={(dx: number, dy: number) => applyPanDelta(dx, dy)}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+});

package/src/i18n/locales/ar/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "تكبير",
     "hikari::zoomToolbar.zoomOut": "تصغير",
     "hikari::zoomToolbar.zoomSlider": "مستوى التكبير",
+    "hikari::zoomToolbar.expandMap": "إظهار الخريطة المصغّرة",
+    "hikari::zoomToolbar.collapseMap": "إخفاء الخريطة المصغّرة",
     "hikari::filterBar.trigger": "عوامل التصفية",
     "hikari::filterBar.apply": "تطبيق",
     "hikari::filterPanel.all": "الكل",

package/src/i18n/locales/de/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "Vergrößern",
     "hikari::zoomToolbar.zoomOut": "Verkleinern",
     "hikari::zoomToolbar.zoomSlider": "Zoom-Stufe",
+    "hikari::zoomToolbar.expandMap": "Minikarte anzeigen",
+    "hikari::zoomToolbar.collapseMap": "Minikarte ausblenden",
     "hikari::filterBar.trigger": "Filter",
     "hikari::filterBar.apply": "Anwenden",
     "hikari::filterPanel.all": "Alle",

package/src/i18n/locales/en/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "Zoom in",
     "hikari::zoomToolbar.zoomOut": "Zoom out",
     "hikari::zoomToolbar.zoomSlider": "Zoom level",
+    "hikari::zoomToolbar.expandMap": "Show minimap",
+    "hikari::zoomToolbar.collapseMap": "Hide minimap",
     "hikari::filterBar.trigger": "Filters",
     "hikari::filterBar.apply": "Apply",
     "hikari::filterPanel.all": "All",

package/src/i18n/locales/es/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "Acercar",
     "hikari::zoomToolbar.zoomOut": "Alejar",
     "hikari::zoomToolbar.zoomSlider": "Nivel de zoom",
+    "hikari::zoomToolbar.expandMap": "Mostrar minimapa",
+    "hikari::zoomToolbar.collapseMap": "Ocultar minimapa",
     "hikari::filterBar.trigger": "Filtros",
     "hikari::filterBar.apply": "Aplicar",
     "hikari::filterPanel.all": "Todos",

package/src/i18n/locales/fr/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "Agrandir",
     "hikari::zoomToolbar.zoomOut": "Réduire",
     "hikari::zoomToolbar.zoomSlider": "Niveau de zoom",
+    "hikari::zoomToolbar.expandMap": "Afficher la mini-carte",
+    "hikari::zoomToolbar.collapseMap": "Masquer la mini-carte",
     "hikari::filterBar.trigger": "Filtres",
     "hikari::filterBar.apply": "Appliquer",
     "hikari::filterPanel.all": "Tous",

package/src/i18n/locales/ja/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "拡大",
     "hikari::zoomToolbar.zoomOut": "縮小",
     "hikari::zoomToolbar.zoomSlider": "ズーム倍率",
+    "hikari::zoomToolbar.expandMap": "ミニマップを表示",
+    "hikari::zoomToolbar.collapseMap": "ミニマップを隠す",
     "hikari::filterBar.trigger": "絞り込み",
     "hikari::filterBar.apply": "適用",
     "hikari::filterPanel.all": "すべて",

package/src/i18n/locales/ko/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "확대",
     "hikari::zoomToolbar.zoomOut": "축소",
     "hikari::zoomToolbar.zoomSlider": "확대 수준",
+    "hikari::zoomToolbar.expandMap": "미니맵 표시",
+    "hikari::zoomToolbar.collapseMap": "미니맵 숨기기",
     "hikari::filterBar.trigger": "필터",
     "hikari::filterBar.apply": "적용",
     "hikari::filterPanel.all": "전체",

package/src/i18n/locales/pt/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "Ampliar",
     "hikari::zoomToolbar.zoomOut": "Reduzir",
     "hikari::zoomToolbar.zoomSlider": "Nível de zoom",
+    "hikari::zoomToolbar.expandMap": "Mostrar minimapa",
+    "hikari::zoomToolbar.collapseMap": "Ocultar minimapa",
     "hikari::filterBar.trigger": "Filtros",
     "hikari::filterBar.apply": "Aplicar",
     "hikari::filterPanel.all": "Todos",

package/src/i18n/locales/ru/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "Увеличить",
     "hikari::zoomToolbar.zoomOut": "Уменьшить",
     "hikari::zoomToolbar.zoomSlider": "Уровень масштаба",
+    "hikari::zoomToolbar.expandMap": "Показать мини-карту",
+    "hikari::zoomToolbar.collapseMap": "Скрыть мини-карту",
     "hikari::filterBar.trigger": "Фильтры",
     "hikari::filterBar.apply": "Применить",
     "hikari::filterPanel.all": "Все",

package/src/i18n/locales/zh-Hans/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "放大",
     "hikari::zoomToolbar.zoomOut": "缩小",
     "hikari::zoomToolbar.zoomSlider": "缩放级别",
+    "hikari::zoomToolbar.expandMap": "显示小地图",
+    "hikari::zoomToolbar.collapseMap": "隐藏小地图",
     "hikari::statusBar.region.CN": "中国大陆",
     "hikari::statusBar.region.HK": "中国香港",
     "hikari::statusBar.region.MO": "中国澳门",

package/src/i18n/locales/zh-Hant/components.json

@@ -197,6 +197,8 @@
     "hikari::zoomToolbar.zoomIn": "放大",
     "hikari::zoomToolbar.zoomOut": "縮小",
     "hikari::zoomToolbar.zoomSlider": "縮放級別",
+    "hikari::zoomToolbar.expandMap": "顯示小地圖",
+    "hikari::zoomToolbar.collapseMap": "隱藏小地圖",
     "hikari::statusBar.region.CN": "中國大陸",
     "hikari::statusBar.region.HK": "中國香港",
     "hikari::statusBar.region.MO": "中國澳門",

package/src/index.ts

@@ -151,6 +151,7 @@ export { default as HMinimap } from "./components/HkMinimap";
 // Charts
 export { default as HTrendChart } from "./components/HkTrendChart";
 export { default as HTreemap } from "./components/HkTreemap";
+export { default as HTreemapStage } from "./components/HkTreemapStage";
 
 export { default as HErrorBoundary } from "./components/HkErrorBoundary";
 export {