mock: バリアントの既定の印・バッジ・作成先を直す(T-30 単位3)

ポップオーバーの既定の印を「既定」の札にする。バッジには名前を書かず、
表示中のバリアント名はツールチップで示す(はみ出しをなくす。T-30の着手前の決定を反映)。
バリアントグループは選択の入れ物(クラスター・バリアント)の中に作る。
そのため domain に createVariantGroupInParent を足し、variant のIDを渡すと
例外になっていた parentNodes を直した。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NznQtmVPoQAnietqwr1auL

mock/src/ui/phy/NodeSvg.vue

@@ -28,7 +28,7 @@ function bounds(n: Node) {
 }
 function badgeBox(n: Node) {
   const b = bounds(n);
-  const size = 26 / props.zoom;
+  const size = 20 / props.zoom;
   return {
     x: b.x + b.width + 4 / props.zoom,
     y: b.y - size - 4 / props.zoom,
@@ -36,6 +36,12 @@ function badgeBox(n: Node) {
     angle: -(props.angle + n.transform.rotation),
   };
 }
+/** バッジは名前を書かず、表示中のバリアント名はツールチップで示す。T-30。 */
+function badgeTitle(n: Extract<Node, { type: "variantGroup" }>) {
+  const shown = props.variants[n.id] || n.default;
+  const name = n.children.find((v) => v.id === shown)?.name ?? "";
+  return `${n.name}: ${name}${shown === n.default ? "(既定)" : ""}`;
+}
 </script>
 <template>
   <g
@@ -135,15 +141,14 @@ function badgeBox(n: Node) {
           :y="badgeBox(n).y"
           :width="badgeBox(n).size"
           :height="badgeBox(n).size"
-          rx="3"
+          :rx="3 / zoom"
           @click.stop="emit('badge', n, $event)"
         /><text
-          :x="badgeBox(n).x + 3 / zoom"
-          :y="badgeBox(n).y + 16 / zoom"
+          :x="badgeBox(n).x + badgeBox(n).size / 2"
+          :y="badgeBox(n).y + badgeBox(n).size / 2"
           :style="{ fontSize: `${12 / zoom}px` }"
-          >{{ n.children.find((v) => v.id === (variants[n.id] || n.default))?.name
-          }}{{ n.default === (variants[n.id] || n.default) ? " ✓" : "" }}</text
-        ></g
+          >⇄</text
+        ><title>{{ badgeTitle(n) }}</title></g
       ></g
     >
   </g>
@@ -213,6 +218,8 @@ function badgeBox(n: Node) {
 .badge text {
   font-size: 12px;
   fill: #302709;
+  text-anchor: middle;
+  dominant-baseline: central;
   pointer-events: none;
 }
 </style>