@celestia-island/hikari 0.55.251 → 0.55.254

package/package.json

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

package/src/components/HkAffixPicker.scss

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

package/src/components/HkBoard3D.tsx

@@ -33,7 +33,9 @@
  *    anchors, pointer-events opt-in per chip so drags still orbit;
  *  - MINIMAP: HkMinimap3D pinned bottom-right — a second, stereoscopic
  *    renderer onto the SAME scene with the main camera glyph, its view
- *    plane and content markers layered in;
+ *    plane and content markers layered in; minimapCollapsible lets the
+ *    user fold it into the small map-icon button and
+ *    minimapDefaultCollapsed mounts it folded;
  *  - THEME: scene background follows --color-background, re-read on
  *    data-mode / data-theme / style mutations; `engine.onTheme` lets the
  *    page re-tone its materials on the same signal. With the
@@ -331,6 +333,12 @@ export default defineComponent({
     interactive: { type: Boolean, default: true },
     /** Pin the stereoscopic minimap bottom-right. */
     minimap: { type: Boolean, default: true },
+    /** Give the minimap the collapse affordance (minimize button in its
+     *  zoom bar; folded state = the small map-icon button). */
+    minimapCollapsible: { type: Boolean, default: false },
+    /** Mount the minimap already folded (with minimapCollapsible the
+     *  user can bring it back; the renderer then inits on first expand). */
+    minimapDefaultCollapsed: { type: Boolean, default: false },
     /** Vertical field of view in degrees. STATIC after mount (the
      *  camera is built in init; remount to change it). */
     fov: { type: Number, default: 45 },
@@ -1156,7 +1164,11 @@ export default defineComponent({
           )
         ) : null}
         {props.minimap && engineRef.value && !failed.value ? (
-          <HkMinimap3D engine={engineRef.value} />
+          <HkMinimap3D
+            engine={engineRef.value}
+            collapsible={props.minimapCollapsible}
+            defaultCollapsed={props.minimapDefaultCollapsed}
+          />
         ) : null}
         {slots.default ? <div class="hk-board3d-overlay">{slots.default()}</div> : null}
       </div>

package/src/components/HkLocalePicker.scss

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

package/src/components/HkLocalePicker.tsx

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

package/src/components/HkLocalePickerPopup.tsx

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

package/src/components/HkMinimap.tsx

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

package/src/components/HkMinimap3D.test.tsx

@@ -12,12 +12,15 @@ const H = vi.hoisted(() => {
     static instances: FakeWebGLRenderer[] = [];
     renders: Array<{ scene: unknown; camera: THREE.PerspectiveCamera }> = [];
     disposed = false;
-    constructor(_opts: { canvas: HTMLCanvasElement }) {
+    readonly domElement: HTMLCanvasElement;
+    constructor(opts: { canvas: HTMLCanvasElement }) {
+      this.domElement = opts.canvas;
       FakeWebGLRenderer.instances.push(this);
     }
     setPixelRatio(): void {}
     setSize(): void {}
     setClearColor(): void {}
+    forceContextLoss(): void { this.disposed = true; }
     render(scene: unknown, camera: THREE.PerspectiveCamera): void {
       // A real renderer maintains world matrices every pass.
       (scene as THREE.Scene).updateMatrixWorld(true);
@@ -82,13 +85,13 @@ function fakeEngine(opts: FakeEngineOpts = {}): {
   };
 }
 
-function mountMap(engine: Board3DEngine) {
+function mountMap(engine: Board3DEngine, extra: Record<string, unknown> = {}) {
   const container = document.createElement("div");
   document.body.appendChild(container);
   const app = createApp(
     defineComponent({
       setup() {
-        return () => h(HkMinimap3D, { engine });
+        return () => h(HkMinimap3D, { engine, ...extra });
       },
     }),
   );
@@ -360,3 +363,107 @@ describe("HkMinimap3D", () => {
     for (const spy of spies) expect(spy).toHaveBeenCalled();
   });
 });
+
+describe("HkMinimap3D collapse affordance (ported from the 2D minimap)", () => {
+  it("mounts folded with defaultCollapsed: map-icon button, no GL surface", async () => {
+    const { engine, firePostRender } = fakeEngine();
+    const { container } = mountMap(engine, { collapsible: true, defaultCollapsed: true });
+    await nextTick();
+    firePostRender();
+
+    expect(container.querySelector(".hk-minimap--collapsed"), "folded button renders").toBeTruthy();
+    expect(container.querySelector(".hk-minimap3d-canvas"), "no canvas while folded").toBeNull();
+    // No GL surface was ever built for a folded-at-mount map.
+    expect(H.FakeWebGLRenderer.instances).toHaveLength(0);
+  });
+
+  it("expands on the folded button and lazily inits the renderer", async () => {
+    const { engine, firePostRender } = fakeEngine();
+    const { container } = mountMap(engine, { collapsible: true, defaultCollapsed: true });
+    await nextTick();
+
+    const fold = container.querySelector<HTMLButtonElement>(".hk-minimap--collapsed");
+    expect(fold).toBeTruthy();
+    fold!.click();
+    await nextTick();
+    await nextTick();
+
+    expect(container.querySelector(".hk-minimap3d-canvas"), "canvas mounts on expand").toBeTruthy();
+    expect(container.querySelector(".hk-minimap--collapsed")).toBeNull();
+    // The lazy init built the renderer; frames flow again.
+    expect(H.FakeWebGLRenderer.instances).toHaveLength(1);
+    firePostRender();
+    expect(H.FakeWebGLRenderer.instances[0].renders.length).toBe(1);
+    // The zoom bar carries the minimize affordance once expanded.
+    expect(container.querySelector(".hk-mm-collapse-btn")).toBeTruthy();
+  });
+
+  it("collapsible adds the minimize button; clicking folds the card", async () => {
+    const { engine, firePostRender } = fakeEngine();
+    const { container } = mountMap(engine, { collapsible: true });
+    await nextTick();
+
+    expect(container.querySelector(".hk-minimap3d-canvas")).toBeTruthy();
+    const minimize = container.querySelector<HTMLButtonElement>(".hk-mm-collapse-btn");
+    expect(minimize, "minimize button rides the zoom bar").toBeTruthy();
+    minimize!.click();
+    await nextTick();
+
+    expect(container.querySelector(".hk-minimap--collapsed")).toBeTruthy();
+    expect(container.querySelector(".hk-minimap3d-canvas")).toBeNull();
+    // A folded map renders no frames even though the board keeps ticking.
+    const renderer = H.FakeWebGLRenderer.instances[0];
+    const before = renderer.renders.length;
+    firePostRender();
+    firePostRender();
+    expect(renderer.renders.length).toBe(before);
+  });
+
+  it("stays expanded by default (board pages keep the standing card)", async () => {
+    const { engine } = fakeEngine();
+    const { container } = mountMap(engine);
+    await nextTick();
+    expect(container.querySelector(".hk-minimap3d-canvas")).toBeTruthy();
+    expect(container.querySelector(".hk-mm-collapse-btn")).toBeNull();
+    expect(container.querySelector(".hk-minimap--collapsed")).toBeNull();
+  });
+});
+describe("HkMinimap3D reopen cycle (the canvas element is rebuilt by v-if)", () => {
+  it("re-binds the renderer to the LIVE canvas; helpers never duplicate", async () => {
+    const { engine, scene, firePostRender } = fakeEngine();
+    const { container } = mountMap(engine, { collapsible: true });
+    await nextTick();
+    firePostRender();
+    expect(H.FakeWebGLRenderer.instances).toHaveLength(1);
+
+    const helpersOnLayer = () =>
+      scene.children.filter((c) => (c.layers.mask & (1 << BOARD3D_HELPERS_LAYER)) !== 0).length;
+    expect(helpersOnLayer()).toBe(2); // glyph group + view-plane frame
+
+    // fold -> unfold: Vue rebuilds the canvas element; the renderer must
+    // follow it or the reopened map paints into the detached element.
+    container.querySelector<HTMLButtonElement>(".hk-mm-collapse-btn")!.click();
+    await nextTick();
+    container.querySelector<HTMLButtonElement>(".hk-minimap--collapsed")!.click();
+    await nextTick();
+    await nextTick();
+
+    const canvasNow = container.querySelector<HTMLCanvasElement>(".hk-minimap3d-canvas");
+    expect(canvasNow, "canvas is back").toBeTruthy();
+    const latest = H.FakeWebGLRenderer.instances.at(-1)!;
+    expect(latest.domElement).toBe(canvasNow);
+    expect(helpersOnLayer()).toBe(2); // rebuilt, NOT duplicated
+    firePostRender();
+    expect(latest.renders.length).toBe(1);
+
+    // a second cycle stays correct
+    container.querySelector<HTMLButtonElement>(".hk-mm-collapse-btn")!.click();
+    await nextTick();
+    container.querySelector<HTMLButtonElement>(".hk-minimap--collapsed")!.click();
+    await nextTick();
+    await nextTick();
+    const canvas2 = container.querySelector<HTMLCanvasElement>(".hk-minimap3d-canvas");
+    expect(H.FakeWebGLRenderer.instances.at(-1)!.domElement).toBe(canvas2);
+    expect(helpersOnLayer()).toBe(2);
+  });
+});

package/src/components/HkMinimap3D.tsx

@@ -15,13 +15,20 @@
  *  - ZOOM is an auto-fit radius (content ∪ view plane) with a ± ladder
  *    on top: 100% = everything fits, higher = closer;
  *  - the helper layer never leaks into the main render (helpers sit on
- *    BOARD3D_HELPERS_LAYER, which only the minimap camera enables).
+ *    BOARD3D_HELPERS_LAYER, which only the minimap camera enables);
+ *  - COLLAPSE (the 2D HkMinimap's 2026-10-27 affordance, ported): with
+ *    a "collapsible" prop the zoom bar grows a minimize button and the
+ *    card folds into the small semi-transparent map-icon button; the
+ *    render hook skips frames while collapsed and the renderer re-inits
+ *    lazily on first expand, so "defaultCollapsed" costs nothing at
+ *    mount.
  */
 
-import { Maximize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { Map as MapIcon, Minimize2, RotateCcw, ZoomIn, ZoomOut } from "lucide-vue-next";
 import {
   computed,
   defineComponent,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -62,6 +69,13 @@ export default defineComponent({
   name: "HkMinimap3D",
   props: {
     engine: { type: Object as PropType<Board3DEngine>, required: true },
+    /** Grow the minimize button in the zoom bar (2026-10-31: ported
+     *  from the 2D HkMinimap's collapse affordance). */
+    collapsible: { type: Boolean, default: false },
+    /** Mount straight into the collapsed map-icon state — the renderer
+     *  then inits lazily on first expand, so a collapsed-at-mount map
+     *  never builds a GL surface at all. */
+    defaultCollapsed: { type: Boolean, default: false },
   },
   setup(props) {
     const { t } = useI18n();
@@ -70,6 +84,7 @@ export default defineComponent({
     const dragging = ref(false);
     const sliderOpen = ref(false);
     const zoomPercent = ref(100);
+    const collapsed = ref(props.defaultCollapsed);
 
     let renderer: THREE.WebGLRenderer | null = null;
     let mapCamera: THREE.PerspectiveCamera | null = null;
@@ -287,6 +302,7 @@ export default defineComponent({
     }
 
     function onFrame(): void {
+      if (collapsed.value) return; // folded away: no map frames at all
       if (!renderer || !mapCamera || !scene.value) return;
       const now = performance.now();
       if (now - lastRefit >= REFIT_MS) {
@@ -343,6 +359,10 @@ export default defineComponent({
       zoomPercent.value = 100;
       sliderOpen.value = false;
     }
+    function toggleCollapsed(next: boolean): void {
+      collapsed.value = next;
+      if (next) sliderOpen.value = false;
+    }
 
     // Slider pop dismissal (same shield as the 2D minimap).
     function onDocPointerDown(e: PointerEvent): void {
@@ -361,7 +381,36 @@ export default defineComponent({
       }
     });
 
-    onMounted(() => {
+    /** GL-surface init, safe to call repeatedly. Called from onMounted
+     *  (expanded mounts) and from the expand transition (a
+     *  defaultCollapsed map has no canvas at mount; a fold/unfold cycle
+     *  REBUILDS the canvas element, so a surviving renderer would keep
+     *  painting into the detached element and the reopened map would
+     *  stay empty — detect the swap and rebuild against the live canvas,
+     *  helpers and post-render hook included). */
+    function initRenderer(): void {
+      if (renderer && renderer.domElement === canvasRef.value) return;
+      removePostRender?.();
+      removePostRender = null;
+      if (renderer) {
+        renderer.dispose();
+        renderer.forceContextLoss?.();
+        renderer = null;
+      }
+      const s = scene.value;
+      if (s) {
+        if (glyph) {
+          s.remove(glyph);
+          disposeNode(glyph);
+          glyph = null;
+        }
+        if (planeFrame) {
+          s.remove(planeFrame);
+          planeFrame.geometry.dispose();
+          (planeFrame.material as THREE.Material).dispose();
+          planeFrame = null;
+        }
+      }
       const canvas = canvasRef.value;
       const el = rootRef.value;
       if (!canvas || !el) return;
@@ -387,6 +436,12 @@ export default defineComponent({
       el.addEventListener("pointerup", onUp);
       el.addEventListener("pointercancel", onUp);
       el.addEventListener("wheel", onWheel, { passive: false });
+    }
+    onMounted(() => {
+      if (!collapsed.value) initRenderer();
+    });
+    watch(collapsed, (folded) => {
+      if (!folded) void nextTick(() => initRenderer());
     });
 
     onBeforeUnmount(() => {
@@ -425,7 +480,24 @@ export default defineComponent({
       renderer?.forceContextLoss?.();
     });
 
-    return () => (
+    return () => {
+      if (collapsed.value) {
+        // The folded affordance, mirroring the 2D HkMinimap: a small
+        // semi-transparent map-icon button pinned where the card sat.
+        return (
+          <button
+            ref={rootRef}
+            type="button"
+            class="hk-minimap hk-minimap3d hk-minimap--collapsed"
+            aria-label={t("hikari::zoomToolbar.expandMap", "Show minimap")}
+            title={t("hikari::zoomToolbar.expandMap", "Show minimap")}
+            onClick={() => toggleCollapsed(false)}
+          >
+            <MapIcon size={16} />
+          </button>
+        );
+      }
+      return (
       <div
         ref={rootRef}
         class="hk-minimap hk-minimap3d"
@@ -472,8 +544,19 @@ export default defineComponent({
             aria-label={t("hikari::board3d.resetView", "Reset view")}
             title={t("hikari::board3d.resetView", "Reset view")}
           >
-            <Maximize2 size={11} />
+            <RotateCcw size={11} />
           </button>
+          {props.collapsible && (
+            <button
+              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">
@@ -497,5 +580,5 @@ export default defineComponent({
         )}
       </div>
     );
-  },
+    };  },
 });

package/src/components/HkTimeZoneGlobe.test.tsx

@@ -3,6 +3,8 @@ import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { createApp, h, nextTick } from "vue";
 
 import HkTimeZoneGlobe from "./HkTimeZoneGlobe";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { setLocale } from "../i18n/context";
 
 /**
@@ -126,3 +128,25 @@ describe("HkTimeZoneGlobe fallback list", () => {
     expect(p8.textContent).toContain("上海、台北、香港、新加坡");
   });
 });
+
+describe("HkTimeZoneGlobe look contract (source-level)", () => {
+  it("renders the base sphere TRANSPARENT (the white-alpha map must read as holo, not a solid ball)", () => {
+    const src = readFileSync(join(import.meta.dirname, "HkTimeZoneGlobe.tsx"), "utf8");
+    expect(src).toMatch(/MeshBasicMaterial\(\{ color: 0x8899aa, transparent: true \}\)/);
+  });
+
+  it("mounts its minimap collapsible AND folded by default (user direction 2026-10-31)", () => {
+    const src = readFileSync(join(import.meta.dirname, "HkTimeZoneGlobe.tsx"), "utf8");
+    expect(src).toContain("minimapCollapsible");
+    expect(src).toContain("minimapDefaultCollapsed");
+  });
+});
+describe("minimap reset icon contract (user direction 2026-10-31)", () => {
+  it("reset buttons use RotateCcw, never the expand-looking Maximize2", () => {
+    for (const name of ["HkMinimap.tsx", "HkMinimap3D.tsx", "HkZoomToolbar.tsx"]) {
+      const src = readFileSync(join(import.meta.dirname, name), "utf8");
+      expect(src, name + " imports RotateCcw").toContain("RotateCcw");
+      expect(src, name + " dropped Maximize2").not.toContain("Maximize2");
+    }
+  });
+});

package/src/components/HkTimeZoneGlobe.tsx

@@ -169,7 +169,12 @@ export default defineComponent({
     function buildScene(eng: Board3DEngine): void {
       // Base sphere — the board-tinted borderless world map.
       const geometry = new THREE.SphereGeometry(GLOBE_RADIUS, 96, 64);
-      baseMaterial = new THREE.MeshBasicMaterial({ color: 0x8899aa });
+      // transparent is the WHOLE LOOK: the base map is white-alpha (the
+      // ocean carries alpha 0), so without the flag three ignores the
+      // texture alpha and renders the sphere as an opaque dark ball.
+      // With it the globe reads as a holo: continents and plate lines
+      // floating over the theme surface, nothing solid behind them.
+      baseMaterial = new THREE.MeshBasicMaterial({ color: 0x8899aa, transparent: true });
       const sphere = new THREE.Mesh(geometry, baseMaterial);
       eng.setObject("globe-base", {
         object: sphere, pickable: false, content: true, marker: "none",
@@ -346,6 +351,8 @@ export default defineComponent({
             <HkBoard3D
               interactive
               minimap
+              minimapCollapsible
+              minimapDefaultCollapsed
               hoverBox={false}
               transparentBackground
               enablePan={false}

package/src/components/HkTimeline.bondcell.contract.test.ts

@@ -0,0 +1,190 @@
+/**
+ * Source contract for the bond CELLS of the horizontal stepper (2026-10-31
+ * user rule).
+ *
+ * The row is read as one cell per step plus one cell per bond: the steps
+ * keep their content width, the leftover splits into EQUAL bond cells, and
+ * each bond paints 80 % of its own cell CENTERED, so both ends keep a 10 %
+ * air gap. Before that rule the bond filled whatever the step had left after
+ * its label, minus two fixed 4px margins — measured on a real engine at the
+ * provider wizard's 590px row that put the bond 12px off its own label but
+ * only 4px off the next node, i.e. the completed bond read as glued to the
+ * following circle instead of sitting in the gap (the user's 圈出来的地方
+ * 有点太长 report). The four bonds were already equal in length; what was
+ * not equal was the air around them.
+ *
+ * Every assertion below is anchored to the rule that must carry the
+ * declaration, and the colour assertions run against a comment-stripped copy
+ * of the source: a declaration that survives only as a comment (while a
+ * literal paint stays live) measured as an invisible bond on a real engine,
+ * and a whole-file `toContain` cannot tell the two apart.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const raw = readFileSync(join(here, "HkTimeline.scss"), "utf-8");
+
+/** The source with comments removed — declarations only. */
+const src = raw
+  .replace(/\/\*[\s\S]*?\*\//g, "")
+  .split("\n")
+  .map((line) => line.replace(/\/\/.*$/, ""))
+  .join("\n");
+
+function extractRules(source: string): { selector: string; body: string }[] {
+  const rules: { selector: string; body: string }[] = [];
+  let i = 0;
+  while (i < source.length) {
+    const open = source.indexOf("{", i);
+    if (open === -1) break;
+    const selector = source.slice(i, open).trim();
+    let depth = 1;
+    let j = open + 1;
+    while (j < source.length && depth > 0) {
+      if (source[j] === "{") depth += 1;
+      else if (source[j] === "}") depth -= 1;
+      j += 1;
+    }
+    rules.push({ selector, body: source.slice(open + 1, j - 1) });
+    i = j;
+  }
+  return rules;
+}
+
+const rules = extractRules(src);
+
+function blockFor(selector: string): string {
+  const hits = rules.filter((r) =>
+    r.selector.split(",").map((s) => s.trim()).includes(selector),
+  );
+  expect(hits, `exactly one rule carries ${selector}`).toHaveLength(1);
+  return hits[0]!.body;
+}
+
+/** The shared spacing expression: the bond's box must read the SAME token
+ *  the step's gap does, or the cell arithmetic halves itself. */
+const GAP = "var(--hk-timeline-step-gap, var(--space-8, 8px))";
+
+const BOND_CELL =
+  '.hk-timeline[data-mode="full"][data-orientation="horizontal"] .hk-timeline-step [data-el="connector"]';
+const BOND_PAINT = `${BOND_CELL}::before`;
+
+/** The declaration block of one status, comment-stripped. */
+function statusBlock(status: string): string {
+  const at = src.indexOf(`.hk-timeline-step[data-status="${status}"]`);
+  expect(at, `${status} status rule must exist`).toBeGreaterThan(-1);
+  return src.slice(at, src.indexOf("\n}", at));
+}
+
+/** Only the bond's own declarations inside a status rule (the indicator may
+ *  legitimately keep reading the border token for its ring). */
+function bondBlockOf(status: string): string {
+  const block = statusBlock(status);
+  const at = block.indexOf('[data-el="connector"]');
+  expect(at, `${status} must style the bond`).toBeGreaterThan(-1);
+  return block.slice(at, block.indexOf("}", at));
+}
+
+describe("horizontal bond cell contract", () => {
+  it("spans the whole cell by cancelling the step's trailing gap", () => {
+    const cell = blockFor(BOND_CELL);
+    // Without the negated start margin the label→bond air is gap+margin
+    // while the bond→node air is margin alone — the 12/4 asymmetry that
+    // made the bond look glued to the next circle.
+    expect(cell).toContain(`margin-inline: calc(-1 * ${GAP}) 0;`);
+    // The box must not paint itself: the visible 80 % is the ::before.
+    expect(cell).toContain("background: none;");
+    // The ::before resolves percentage insets against this box.
+    expect(cell).toContain("position: relative;");
+    expect(cell).toContain("&::before");
+    // The negated margin is only correct against the step's OWN gap
+    // declaration, so pin the partner: drifting `gap` alone silently
+    // restores the asymmetry (measured 7.84 / 3.84 on a 12px drift).
+    expect(blockFor(".hk-timeline-step")).toContain(`gap: ${GAP};`);
+  });
+
+  it("paints 80 % of the cell centred with a 10 % inset on each end", () => {
+    // The parser above only yields top-level rules; the paint lives in the
+    // nested block, so lift it out of the cell rule's body.
+    const paint = /&::before\s*\{([^}]*)\}/.exec(blockFor(BOND_CELL))?.[1] ?? "";
+    expect(paint, "the bond's ::before must exist").not.toBe("");
+    expect(paint).toContain('content: "";');
+    expect(paint).toContain("position: absolute;");
+    expect(paint).toContain("inset-block: 0;");
+    expect(paint).toContain("inset-inline: 10%;");
+    expect(paint).toContain("background: var(--_bond-color);");
+    // Percentage PADDING would resolve against the step, not the bond.
+    expect(src).not.toMatch(/padding-inline:\s*10%/);
+  });
+
+  it("keeps a visible bond floor the collapse measurement can see", () => {
+    const cell = blockFor(BOND_CELL);
+    // A clamped row must still paint a bond, and the row's max-content
+    // width must keep reserving it — otherwise collapse="auto" measures the
+    // row narrower than it renders and swaps the window away too early.
+    expect(cell).toContain(`min-width: calc(0.5rem + ${GAP});`);
+  });
+
+  it("publishes one bond colour token for every status", () => {
+    for (const status of ["completed", "active", "pending"]) {
+      const bond = bondBlockOf(status);
+      expect(bond, `${status} must publish --_bond-color`).toContain("--_bond-color:");
+      expect(bond).toContain("background: var(--_bond-color);");
+      // No status may paint a literal colour straight onto the box again:
+      // in horizontal mode the box itself stays unpainted, and a stray
+      // longhand would tint the vertical rail red instead.
+      expect(bond, `${status} must not paint the box directly`).not.toMatch(
+        /background(-color)?:\s*(?!\s*var\(--_bond-color\))/,
+      );
+    }
+    // The completed bond is the primary tone; the faint ones derive from an
+    // OPAQUE tone. `--hi-color-border` already carries the theme's alpha, so
+    // 30 % of it computed to about 4.5 % — measured as ~7/255 off a white
+    // background (a 248 grey) in full mode, while the window-mode link had
+    // already been fixed.
+    expect(bondBlockOf("completed")).toContain(
+      "--_bond-color: var(--hi-color-primary);",
+    );
+    for (const status of ["active", "pending"]) {
+      const bond = bondBlockOf(status);
+      expect(bond, `${status} must not re-multiply the border token's alpha`)
+        .toContain("--_bond-color: color-mix(in srgb, var(--hi-color-muted");
+      expect(bond).not.toContain("var(--hi-color-border)");
+    }
+  });
+
+  it("leaves the vertical rail painting its own box", () => {
+    // The cell rule is mode+orientation scoped, so the vertical rail (a rail
+    // hanging under the node, not a cell-wide bond) keeps the plain
+    // `background: var(--_bond-color)` chain and its absolute geometry.
+    const vertical = blockFor(
+      '.hk-timeline[data-orientation="vertical"][data-mode="full"] .hk-timeline-step',
+    );
+    expect(vertical).toContain("width: var(--hk-timeline-link-thickness);");
+    expect(vertical).toContain("min-width: 0;");
+    expect(vertical).not.toContain("background: none");
+    // A bare `.hk-timeline-step [data-el="connector"]` override would hit the
+    // vertical rail too and blank it.
+    const unscoped = rules.filter(
+      (r) =>
+        r.selector.trim() === '.hk-timeline-step [data-el="connector"]' &&
+        /background:\s*none/.test(r.body),
+    );
+    expect(unscoped, "no unscoped connector background reset").toHaveLength(0);
+  });
+
+  it("rides the status crossfade on the painted box, not just the frame", () => {
+    // The paint moved to the ::before, so the crossfade must cover THAT
+    // selector. Asserting the bare selector name proves nothing (the
+    // reduced-motion block lists it too), so pin the transition BODY.
+    const crossfade = blockFor(BOND_PAINT);
+    expect(crossfade).toContain("background-color var(--hk-timeline-motion)");
+    // ...and the reduced-motion switch must cover the same box.
+    const reducedAt = src.lastIndexOf("@media (prefers-reduced-motion: reduce)");
+    expect(reducedAt).toBeGreaterThan(-1);
+    expect(src.slice(reducedAt)).toContain(BOND_PAINT);
+  });
+});

package/src/components/HkTimeline.scss

@@ -312,6 +312,56 @@
   }
 }
 
+/* ── Bond cells (2026-10-31 user rule) ──────────────────────────────────
+   The horizontal row reads as one cell per step plus one cell per bond: the
+   steps keep their content width, the leftover splits into EQUAL bond cells,
+   and each bond paints 80 % of its cell CENTERED, so both ends keep a 10 %
+   air gap. Two mechanics make that exact:
+
+   1. The bond's box must span the WHOLE cell. Its cell begins where its own
+      label ends, but the step's flex gap already sits in front of it (that
+      gap is part of the cell, not extra air), so the box starts one gap
+      earlier — hence the negated start margin, which must keep reading the
+      SAME `--hk-timeline-step-gap` token the step's `gap` uses. Before this
+      the gap counted twice and the bond ran 12px off its label but only 4px
+      off the next node: the completed bond read as glued to the next circle.
+   2. The painted 80 % cannot be `padding-inline` — a percentage padding
+      resolves against the CONTAINING block (the step), not the bond's own
+      box, which would inset it by a slice of the step instead of 10 % of the
+      cell. So the colour moves to a ::before pinned `inset-inline: 10%`,
+      which does resolve against the bond. The status rules below therefore
+      publish `--_bond-color`; the vertical rail keeps painting its own box
+      (it is a rail hanging under the node, not a cell-wide bond).
+
+   The floor keeps a squeezed row honest: the cell absorbs the gap on top of
+   a half-rem of bond, so the narrowest full row still paints a visible line.
+   Its outer size is that floor MINUS the cancelled gap, i.e. half a rem per
+   bond — eight of the sixteen pixels the old two 4px margins reserved, so
+   `collapse="auto"` (HkTimeline.tsx measures this max-content width) fires
+   about 32px earlier than before across a five-step row, never later.
+   Bounded cost, accepted: in a row squeezed past the floor (reachable through
+   `collapse="never"`, or the full-mode frame that a label change and a
+   hysteresis un-collapse render before re-measuring) the box keeps its floor
+   and overhangs the next step by a QUARTER of the row's shortfall — ~6px at a
+   430px host, ~14px at 400px — so the bond paints under that step's circle
+   until the overhang outgrows the 24px circle itself (host ≲ 362px), where a
+   visible stub sits beside it. Shrinking the floor to nothing would trade
+   this for a bond that vanishes on the narrowest hosts. */
+.hk-timeline[data-mode="full"][data-orientation="horizontal"] .hk-timeline-step [data-el="connector"] {
+  position: relative;
+  margin-inline: calc(-1 * var(--hk-timeline-step-gap, var(--space-8, 8px))) 0;
+  min-width: calc(0.5rem + var(--hk-timeline-step-gap, var(--space-8, 8px)));
+  background: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 10%;
+    background: var(--_bond-color);
+  }
+}
+
 .hk-timeline-step[data-last] {
   flex: 0 0 auto;
 }
@@ -376,7 +426,11 @@
   }
 
   [data-el="connector"] {
-    background: var(--hi-color-primary);
+    // The bonds paint 80 % of their cell through a ::before (see the
+    // full-mode cell rule); the token is the single source for both that
+    // paint and the vertical rail's own box.
+    --_bond-color: var(--hi-color-primary);
+    background: var(--_bond-color);
   }
 }
 
@@ -392,7 +446,12 @@
   }
 
   [data-el="connector"] {
-    background: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+    // Opaque-tone derivation, same fix the window-mode link carries:
+    // `--hi-color-border` already carries the theme's own alpha, so 30 % of
+    // IT computed to about 4.5 % and the bond was not a line on any real
+    // surface (measured: ~7/255 off a white background — a 248 grey).
+    --_bond-color: color-mix(in srgb, var(--hi-color-muted, #6c6c6c) 30%, transparent);
+    background: var(--_bond-color);
   }
 }
 
@@ -408,7 +467,12 @@
   }
 
   [data-el="connector"] {
-    background: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+    // Opaque-tone derivation, same fix the window-mode link carries:
+    // `--hi-color-border` already carries the theme's own alpha, so 30 % of
+    // IT computed to about 4.5 % and the bond was not a line on any real
+    // surface (measured: ~7/255 off a white background — a 248 grey).
+    --_bond-color: color-mix(in srgb, var(--hi-color-muted, #6c6c6c) 30%, transparent);
+    background: var(--_bond-color);
   }
 }
 
@@ -451,10 +515,14 @@
 }
 
 // Status crossfade: the data-status driven colors (indicator fill/border,
-// label color, connector fill) transition instead of flipping.
+// label color, connector fill) transition instead of flipping. The
+// horizontal bond's paint lives on its ::before (the 80 % cell rule), so
+// that box rides the crossfade too — without it a status flip snaps there
+// while the vertical rail keeps easing.
 .hk-timeline-step [data-el="indicator"],
 .hk-timeline-step [data-el="label"],
-.hk-timeline-step [data-el="connector"] {
+.hk-timeline-step [data-el="connector"],
+.hk-timeline[data-mode="full"][data-orientation="horizontal"] .hk-timeline-step [data-el="connector"]::before {
   transition:
     background-color var(--hk-timeline-motion) var(--hk-timeline-motion-ease),
     color var(--hk-timeline-motion) var(--hk-timeline-motion-ease),
@@ -530,7 +598,8 @@ html[data-css-animations="0"] .hk-timeline[data-mode="window"][data-dir] .hk-tim
 @media (prefers-reduced-motion: reduce) {
   .hk-timeline-step [data-el="indicator"],
   .hk-timeline-step [data-el="label"],
-  .hk-timeline-step [data-el="connector"] {
+  .hk-timeline-step [data-el="connector"],
+  .hk-timeline[data-mode="full"][data-orientation="horizontal"] .hk-timeline-step [data-el="connector"]::before {
     transition: none;
   }
 

package/src/components/HkTitleBar.scss

@@ -18,7 +18,16 @@
   --hk-tb-focus: rgb(var(--color-primary, 122 162 247) / 0.6);
   --hk-tb-close-hover: #e81123;
   --hk-tb-close-active: #f1707a;
+  /* The close fill is a FIXED danger red, so its ink is fixed too. Deriving
+     it from the theme's on-solid choice (the default dark preset picks
+     polar-night ink for its pale primary fills) painted a dark X on dark
+     red at roughly 1:1 - the host-visible bug both wowsp and momoi filed.
+     Hosts may override the token as a pair with --hk-tb-close-hover. */
+  --hk-tb-close-ink: #ffffff;
   --hk-tb-radius-close: 0 8px 0 0;
+  /* Caption glyph size; hosts that want a larger brand mark set the token
+     instead of overriding the icon rule. */
+  --hk-tb-icon-size: 16px;
 
   position: fixed;
   top: 0;
@@ -47,8 +56,8 @@
 }
 
 .hk-titlebar-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--hk-tb-icon-size);
+  height: var(--hk-tb-icon-size);
   display: block;
   pointer-events: none;
 }
@@ -80,7 +89,13 @@
   height: 100%;
 }
 
-.hk-titlebar-btn {
+/* Caption buttons are scoped under the bar on purpose: a host's element
+   rules (`button:hover:not(:disabled)` scores (0,2,1)) would otherwise
+   out-rank the component's class-level hover and repaint the caption -
+   the momoi field report. Scoped selectors sit at (0,3,0), one level
+   above any plausible element rule, while the close-specific rules stay
+   later in the sheet so they keep winning among themselves. */
+.hk-titlebar .hk-titlebar-btn {
   width: 46px;
   height: var(--hk-tb-height);
   border: none;
@@ -95,24 +110,24 @@
   padding: 0;
 }
 
-.hk-titlebar-btn:hover {
+.hk-titlebar .hk-titlebar-btn:hover {
   background: var(--hk-tb-hover);
   color: var(--hk-tb-fg-strong);
 }
 
-.hk-titlebar-btn:active {
+.hk-titlebar .hk-titlebar-btn:active {
   background: var(--hk-tb-active);
 }
 
 /* Only the rightmost (close) button carries the window's top-right
    corner radius; the other captions highlight as plain rectangles. */
-.hk-titlebar-btn-close {
+.hk-titlebar .hk-titlebar-btn-close {
   border-radius: var(--hk-tb-radius-close);
 }
 
 /* RTL mirrors the caption row, so the close button lands top-left and
    the window corner radius flips with it. */
-[dir="rtl"] .hk-titlebar-btn-close {
+[dir="rtl"] .hk-titlebar .hk-titlebar-btn-close {
   border-radius: 8px 0 0 0;
 }
 
@@ -125,17 +140,17 @@
   border-radius: 0;
 }
 
-.hk-titlebar-btn-close:hover {
+.hk-titlebar .hk-titlebar-btn-close:hover {
   background: var(--hk-tb-close-hover);
-  color: var(--hi-color-text-on-danger, #ffffff);
+  color: var(--hk-tb-close-ink);
 }
 
-.hk-titlebar-btn-close:active {
+.hk-titlebar .hk-titlebar-btn-close:active {
   background: var(--hk-tb-close-active);
-  color: var(--hi-color-text-on-danger, #ffffff);
+  color: var(--hk-tb-close-ink);
 }
 
-.hk-titlebar-btn:focus-visible {
+.hk-titlebar .hk-titlebar-btn:focus-visible {
   outline: 2px solid var(--hk-tb-focus);
   outline-offset: -2px;
 }

package/src/components/HkTitleBar.test.tsx

@@ -213,7 +213,38 @@ describe("HkTitleBar stylesheet contract", () => {
   it("keeps the windowed radius var wired to the close button", () => {
     const scss = readFileSync(resolve(componentDir, "HkTitleBar.scss"), "utf8");
     expect(scss).toContain("--hk-tb-radius-close:");
-    const body = ruleBody(css, ".hk-titlebar-btn-close");
+    const body = ruleBody(css, ".hk-titlebar .hk-titlebar-btn-close");
     expect(body).toContain("border-radius: var(--hk-tb-radius-close)");
   });
+
+  it("inks the close fill from its own token, never the theme's on-solid", () => {
+    // The fill is a fixed danger red; the ink must be fixed with it. The
+    // theme-derived --hi-color-text-on-danger painted a dark X on dark red
+    // under the default dark preset (the wowsp/momoi field report).
+    const scss = readFileSync(resolve(componentDir, "HkTitleBar.scss"), "utf8");
+    expect(scss).toContain("--hk-tb-close-ink:");
+    const hover = ruleBody(css, ".hk-titlebar .hk-titlebar-btn-close:hover");
+    expect(hover).toContain("color: var(--hk-tb-close-ink)");
+    expect(hover).not.toContain("--hi-color-text-on-danger");
+    const active = ruleBody(css, ".hk-titlebar .hk-titlebar-btn-close:active");
+    expect(active).toContain("color: var(--hk-tb-close-ink)");
+  });
+
+  it("outranks host element rules with caption-scoped buttons", () => {
+    // (0,3,0) beats a host's `button:hover:not(:disabled)` at (0,2,1);
+    // the close-specific rules stay later in the sheet, so they still win.
+    const hover = ruleBody(css, ".hk-titlebar .hk-titlebar-btn:hover");
+    expect(hover).toContain("background: var(--hk-tb-hover)");
+    const closeHoverAt = css.indexOf(".hk-titlebar .hk-titlebar-btn-close:hover");
+    const hoverAt = css.indexOf(".hk-titlebar .hk-titlebar-btn:hover");
+    expect(closeHoverAt).toBeGreaterThan(hoverAt);
+  });
+
+  it("sizes the caption icon through its token", () => {
+    const scss = readFileSync(resolve(componentDir, "HkTitleBar.scss"), "utf8");
+    expect(scss).toContain("--hk-tb-icon-size:");
+    const body = ruleBody(css, ".hk-titlebar-icon");
+    expect(body).toContain("width: var(--hk-tb-icon-size)");
+    expect(body).toContain("height: var(--hk-tb-icon-size)");
+  });
 });

package/src/components/HkZoomToolbar.tsx

@@ -1,4 +1,4 @@
-import { Maximize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { RotateCcw, ZoomIn, ZoomOut } from "lucide-vue-next";
 import { defineComponent } from "vue";
 
 
@@ -62,7 +62,7 @@ export default defineComponent({
               ariaLabel={t("hikari::zoomToolbar.reset", "Reset zoom")}
               onClick={() => emit("reset")}
             >
-              <Maximize2 size={14} />
+              <RotateCcw size={14} />
             </HButton>
           )}
         </div>

package/src/components/_menu-item.contract.test.ts

@@ -35,6 +35,9 @@ const menuScss = readFileSync(join(here, "HkMenu.scss"), "utf-8");
 const affixScss = readFileSync(join(here, "HkAffixPicker.scss"), "utf-8");
 const tagInputScss = readFileSync(join(here, "HkTagInput.scss"), "utf-8");
 const tplScss = readFileSync(join(here, "HkTemplateField.scss"), "utf-8");
+const userPickerScss = readFileSync(join(here, "HkUserPicker.scss"), "utf-8");
+const tagInputTsx = readFileSync(join(here, "HkTagInput.tsx"), "utf-8");
+const userPickerTsx = readFileSync(join(here, "HkUserPicker.tsx"), "utf-8");
 const themeTsx = readFileSync(join(here, "HkThemePanelContent.tsx"), "utf8");
 const adminTokens = readFileSync(join(here, "../styles/admin-tokens.scss"), "utf-8");
 const panelScss = readFileSync(join(here, "HkMenuPanel.scss"), "utf-8");
@@ -242,6 +245,13 @@ describe("menu-item grammar contract", () => {
     expect(adminTokens).toMatch(
       /\.s-user-header \{[^}]*padding: var\(--space-10\) var\(--space-14\) var\(--space-12\)/,
     );
+    // The drawer is the third hosting surface (.hk-drawer-panel is one of
+    // the grammar's sheet contexts) — its twin carries the SHEET pad-x.
+    // Without it a drawer identity block kept the bare 14px while the
+    // drawer rows around it rode 1px + 16px (2026-10-31 audit finding 9).
+    expect(adminTokens).toMatch(
+      /\.hk-drawer-panel \.s-user-header \{[^}]*padding-inline: calc\(1px \+ var\(--hk-menu-item-pad-x, 16px\)\)/,
+    );
   });
 
   it("spends the italic overhang cushion in the label mixin only", () => {
@@ -777,4 +787,74 @@ describe("menu-item grammar contract", () => {
       ).toEqual([]);
     }
   });
+
+  it("keeps the adopted row families on the mixin's geometry (no local padding/min-height)", () => {
+    // The 2026-10-31 adoption gave four hand-rolled row families
+    // @include mi.item — the mixin OWNS their padding and min-height
+    // (6×12 desktop / 10×16 sheet via the registration lists). A local
+    // padding or min-height declaration in the family's own rule
+    // overrides the mixin at the same specificity and silently forks
+    // that family off the grammar again (the pre-adoption stock was
+    // exactly such a fork). Layout-axis restatements (flex direction,
+    // justify, text-align, color) are content decisions and stay legal.
+    const sources: Array<[string, string]> = [
+      [".hk-affix-row", affixScss],
+      [".hk-tag-input-row", tagInputScss],
+      [".hk-tpl-row", tplScss],
+      [".hk-user-picker-row", userPickerScss],
+    ];
+    for (const [selector, sheet] of sources) {
+      const block = flattenBlocks(parseScss(stripScssComments(sheet))).find(
+        (candidate) =>
+          candidate.prelude
+            .trim()
+            .split(",")
+            .map((sel) => sel.trim())
+            .includes(selector),
+      );
+      expect(block, `${selector} rule exists`).toBeTruthy();
+      const offenders = block!.statements
+        .map((stmt) => stmt.replace(/\s+/g, " ").trim())
+        .filter((stmt) => /^(padding|min-height)\s*[:]/.test(stmt));
+      expect(
+        offenders,
+        `${selector} declares NO padding/min-height of its own — @mixin item owns the row box (a local declaration forks the family off the grammar)`,
+      ).toEqual([]);
+    }
+  });
+
+  it("keeps the grammar's data-checked emission beside the legacy state attrs", () => {
+    // The sharpest honest gap of the adoption R3: TagInput/UserPicker
+    // rows carry BOTH the legacy state (data-selected / .is-selected —
+    // tests and hosts key on those) and the grammar's data-checked (the
+    // face + the hover guard). A tsx-only revert of the emission keeps
+    // every test green while the checked face silently dies to the
+    // hover rule — so the emission itself is pinned at source level.
+    expect(
+      tagInputTsx,
+      "HkTagInput must emit data-checked beside its legacy data-selected (the grammar's checked face and hover guard key on it)",
+    ).toMatch(/data-checked=\{selected \|\| undefined\}/);
+    expect(
+      userPickerTsx,
+      "HkUserPicker must emit data-checked for the multi-mode draft pick beside the legacy .is-selected class",
+    ).toMatch(/data-checked=\{props\.mode === "multi" && inDraft\(user\.uid\) \|\| undefined\}/);
+  });
+
+  it("sizes the tag-input grip to the adopted row's content box", () => {
+    // The grip is fixed-size inside a flex-auto row: taller than the
+    // content box and every selected+reorderable row grows past the
+    // grammar min-height while siblings stay on it (the 2026-10-31 R2
+    // S1 — 28px grip in a 22px box). Pinned at source level: the grip
+    // height must equal 34px − 2×6px.
+    const grip = flattenBlocks(parseScss(stripScssComments(tagInputScss))).find(
+      (block) => block.prelude.trim() === ".hk-tag-input-grip",
+    );
+    expect(grip, ".hk-tag-input-grip rule exists").toBeTruthy();
+    const height = grip!.statements.find((stmt) => stmt.includes("height:"));
+    expect(height, "the grip declares a height").toBeTruthy();
+    expect(
+      height!.replace(/\s+/g, " ").trim(),
+      "grip height = 22px (the 34px row's content box: 34 − 2×6px)",
+    ).toBe("height: 1.375rem");
+  });
 });