@celestia-island/hikari 0.55.210 → 0.55.212

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.210",
+  "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/HkTabs.test.ts

@@ -255,6 +255,44 @@ describe("HkTabs segmented variant", () => {
     expect(container.querySelector(".hk-tabs-panel")).toBeNull();
   });
 
+  it("names the track for assistive tech (ariaLabel rides the group)", () => {
+    // The former HkSegmentedRadio carried its hosts' dimension names on
+    // the radiogroup; the converged control must not lose that.
+    const { container } = mountLive({ variant: "segmented", ariaLabel: "Node status" });
+    const list = container.querySelector(".hk-tabs-list")!;
+    expect(list.getAttribute("aria-label")).toBe("Node status");
+    // Pill mode names its tablist the same way.
+    const pill = mountLive({ ariaLabel: "Views" });
+    expect(pill.container.querySelector(".hk-tabs-list")!.getAttribute("aria-label")).toBe("Views");
+    // Negative pin: no ariaLabel → the attribute is absent everywhere; an
+    // EMPTY string must not sneak in as a fake name either (R3 M4).
+    const bare = mountLive({ variant: "segmented" });
+    expect(bare.container.querySelector(".hk-tabs-list")!.getAttribute("aria-label")).toBeNull();
+    expect(bare.container.querySelector("[aria-label]")).toBeNull();
+    const empty = mountLive({ variant: "segmented", ariaLabel: "" });
+    expect(empty.container.querySelector(".hk-tabs-list")!.getAttribute("aria-label")).toBeNull();
+  });
+
+  it("collapses duplicate tab keys to the first occurrence (one control per value)", () => {
+    // Ported from the deleted HkSegmentedRadio's guard (R2 2026-10-28):
+    // identical ORDERED keys never trip Vue's own duplicate-key warning,
+    // so without the collapse a duplicated key renders two aria-checked
+    // radios with roving tabindex broken — silently, even in DEV.
+    const { container } = mountLive({
+      variant: "segmented",
+      tabs: [
+        { key: "a", label: "Alpha" },
+        { key: "a", label: "Alpha again (dup)" },
+        { key: "b", label: "Beta" },
+      ],
+    });
+    const triggers = [...container.querySelectorAll<HTMLButtonElement>(".hk-tabs-trigger")];
+    expect(triggers.map((t) => t.textContent?.trim())).toEqual(["Alpha", "Beta"]);
+    expect(container.querySelectorAll('[role="radio"][aria-checked="true"]')).toHaveLength(1);
+    // Roving tabindex stays single.
+    expect(triggers.filter((t) => t.getAttribute("tabindex") !== "-1")).toHaveLength(1);
+  });
+
   it("keeps tab semantics for pill (the default)", () => {
     const { container } = mountLive({});
     const list = container.querySelector(".hk-tabs-list")!;

package/src/components/HkTabs.tsx

@@ -111,6 +111,12 @@ export default defineComponent({
     block: { type: Boolean, default: false },
     /** Disable the whole strip (every trigger). */
     disabled: { type: Boolean, default: false },
+    /** Accessible name of the track (the tablist's / radiogroup's
+     *  aria-label). A segmented strip is a form control — its filter
+     *  hosts label the DIMENSION ("Running state", "Node status"), and
+     *  an unnamed radiogroup inside a named popover is what the former
+     *  HkSegmentedRadio's `label` prop existed to prevent. */
+    ariaLabel: { type: String, default: undefined },
     /** Render tab panel slots below the strip. Segmented mode pickers
      *  have no panels — panels are skipped for that variant. */
     renderPanels: { type: Boolean, default: true },
@@ -172,15 +178,41 @@ export default defineComponent({
     const isSegmented = computed(() => props.variant === "segmented");
     const isBlock = computed(() => isSegmented.value && props.block);
     const mergeSet = computed(() => new Set(props.mergeKeys ?? []));
+    /** First-wins collapse of duplicate keys plus a DEV alarm. The
+     *  contract says keys are unique; a duplicate renders TWO
+     *  aria-checked controls for one value with roving tabindex broken,
+     *  and Vue's own keyed-patch warning never fires for identical
+     *  ORDERED keys (they sync 1:1), so the alarm lives here. Ported
+     *  from the deleted HkSegmentedRadio with its pin tests when the
+     *  duplicate component was removed (R2, 2026-10-28). Every index —
+     *  merged runs, slot units, refs map, keyboard nav, the indicator —
+     *  derives from THIS list, so the collapse keeps them all
+     *  consistent. */
+    const tabs = computed(() => {
+      const seen = new Set<string>();
+      const list = props.tabs.filter((tb) => {
+        if (seen.has(tb.key)) return false;
+        seen.add(tb.key);
+        return true;
+      });
+      if (import.meta.env.DEV && list.length !== props.tabs.length) {
+        // eslint-disable-next-line no-console -- dev-only drift alarm
+        console.warn(
+          "[HkTabs] duplicate tab keys dropped:",
+          props.tabs.map((tb) => tb.key).join(", "),
+        );
+      }
+      return list;
+    });
     /** Merged keys actually present in `tabs`, in tab order. */
     const mergedRun = computed(() =>
-      props.tabs.filter((tb) => mergeSet.value.has(tb.key)).map((tb) => tb.key),
+      tabs.value.filter((tb) => mergeSet.value.has(tb.key)).map((tb) => tb.key),
     );
     /** The contract is ONE contiguous run; a scattered selection would
      *  silently swallow the middle options, so degrade to plain
      *  triggers instead. */
     const mergedContiguous = computed(() => {
-      const idxs = props.tabs
+      const idxs = tabs.value
         .map((tb, i) => (mergeSet.value.has(tb.key) ? i : -1))
         .filter((i) => i >= 0);
       return idxs.length <= 1 || idxs[idxs.length - 1] - idxs[0] === idxs.length - 1;
@@ -213,7 +245,7 @@ export default defineComponent({
     const slotMode = computed(
       () =>
         hasMergedCell.value ||
-        props.tabs.some((tb) => slotSpan(tb) !== 1),
+        tabs.value.some((tb) => slotSpan(tb) !== 1),
     );
     /** Total slot units the strip is divided into while in slot mode:
      *  every rendered option contributes its clamped span, and the
@@ -221,7 +253,7 @@ export default defineComponent({
      *  those triggers). Matches the grid track count in HkTabs.scss. */
     const slotUnits = computed(() => {
       let units = 0;
-      for (const tb of props.tabs) {
+      for (const tb of tabs.value) {
         if (isMergedTab(tb)) continue;
         units += slotSpan(tb);
       }
@@ -236,11 +268,11 @@ export default defineComponent({
     // merged): keep the first enabled trigger tabbable so the group
     // stays reachable — otherwise every trigger would be tabindex=-1.
     const fallbackTabbableIdx = computed(() => {
-      const hasActive = props.tabs.some(
+      const hasActive = tabs.value.some(
         (tb) => tb.key === props.modelValue && isNavigable(tb),
       );
       if (hasActive) return -1;
-      return props.tabs.findIndex((tb) => isNavigable(tb));
+      return tabs.value.findIndex((tb) => isNavigable(tb));
     });
 
     function resolvedActionLabel(action: TabsEndAction): string {
@@ -264,9 +296,9 @@ export default defineComponent({
      *  (falling back to the first option's render — trigger OR cell —
      *  while no geometry exists). */
     function activeFrameEl(): HTMLElement | undefined {
-      const idx = props.tabs.findIndex((tb) => tb.key === props.modelValue);
+      const idx = tabs.value.findIndex((tb) => tb.key === props.modelValue);
       const i = idx >= 0 ? idx : 0;
-      const tab = props.tabs[i];
+      const tab = tabs.value[i];
       if (tab && isMergedTab(tab)) {
         return mergedCellRef.value ?? undefined;
       }
@@ -387,18 +419,18 @@ export default defineComponent({
       void nextTick(() => triggerRefs.value.get(idx)?.focus());
     }
     function selectIndex(idx: number) {
-      const tb = props.tabs[idx];
+      const tb = tabs.value[idx];
       if (!tb || !isNavigable(tb) || props.disabled || tb.key === props.modelValue) return;
       emit("update:modelValue", tb.key);
       focusTrigger(idx);
     }
     function moveSelection(from: number, delta: number) {
-      const n = props.tabs.length;
+      const n = tabs.value.length;
       if (n === 0) return;
       let idx = from;
       for (let step = 0; step < n; step += 1) {
         idx = (idx + delta + n) % n;
-        if (isNavigable(props.tabs[idx])) {
+        if (isNavigable(tabs.value[idx])) {
           selectIndex(idx);
           return;
         }
@@ -410,7 +442,7 @@ export default defineComponent({
       // its keys.
       const target = e.target as HTMLElement | null;
       if (!target || !target.closest(".hk-tabs-trigger")) return;
-      const current = Math.max(0, props.tabs.findIndex((tb) => tb.key === props.modelValue));
+      const current = Math.max(0, tabs.value.findIndex((tb) => tb.key === props.modelValue));
       switch (e.key) {
         case "ArrowRight":
         case "ArrowDown":
@@ -421,13 +453,13 @@ export default defineComponent({
           moveSelection(current, -1);
           break;
         case "Home": {
-          const first = props.tabs.findIndex((tb) => isNavigable(tb));
+          const first = tabs.value.findIndex((tb) => isNavigable(tb));
           if (first >= 0) selectIndex(first);
           break;
         }
         case "End": {
-          for (let i = props.tabs.length - 1; i >= 0; i -= 1) {
-            if (isNavigable(props.tabs[i])) {
+          for (let i = tabs.value.length - 1; i >= 0; i -= 1) {
+            if (isNavigable(tabs.value[i])) {
               selectIndex(i);
               break;
             }
@@ -447,7 +479,7 @@ export default defineComponent({
        *  cell — merged options' panels are not rendered while merged
        *  (unchanged contract; the whole container drops out instead). */
       const panelTab = props.renderPanels && !isSegmented.value
-        ? props.tabs.find((tb) => tb.key === props.modelValue && !isMergedTab(tb))
+        ? tabs.value.find((tb) => tb.key === props.modelValue && !isMergedTab(tb))
         : undefined;
       const listChildren = [
         <div
@@ -457,7 +489,7 @@ export default defineComponent({
           data-ready={indicatorReady.value || undefined}
         />,
       ];
-      props.tabs.forEach((tab, idx) => {
+      tabs.value.forEach((tab, idx) => {
         if (isMergedTab(tab)) {
           // The merged run renders as ONE combined cell at its first
           // option's position — a real in-flow child of the track (joins
@@ -530,6 +562,7 @@ export default defineComponent({
               : undefined
           }
           role={isSegmented.value ? "radiogroup" : "tablist"}
+          aria-label={props.ariaLabel || undefined}
           onKeydown={onKeydown}
         >
           {/* Tagless group: the track stays a plain element (ref/CSS/

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