@celestia-island/hikari 0.55.253 → 0.55.254

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.253",
+  "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/HkLocalePicker.scss

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

package/src/components/HkLocalePicker.tsx

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

package/src/components/HkLocalePickerPopup.tsx

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

package/src/components/HkMinimap.tsx

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

package/src/components/HkMinimap3D.test.tsx

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

package/src/components/HkMinimap3D.tsx

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

package/src/components/HkTimeZoneGlobe.test.tsx

@@ -140,4 +140,13 @@ describe("HkTimeZoneGlobe look contract (source-level)", () => {
     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/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");
+  });
 });