v0.2.44

v0.2.44 — 말풍선 top-anchored 동일 선상 배치 (채팅앱 패턴)

SpeechBubble.tsx

• top default: 0 → -18 (캐릭터 body 의 top edge 좌표).
• transform: translateY(-50%) scale(s) → scale(s) 만 (translateY 제거).
• transformOrigin: 'left/right center' → 'left/right top'.

꼬리 위치

• bottom: 6 → top: 6 — 풍선의 위쪽 가장자리 근처. side='right' 면 좌상단, side='left' 면 우상단. 꼬리가 캐릭터(top edge 정렬 → 첫 줄 같은 Y) 를 가리킴.

호출자 stack 간격

• AgentAvatars2D.tsx:1085: offset.top: -stackTier * 75 → -18 - stackTier * 95. tier 0 = -18 (default), tier 1 = -113, tier 2 = -208. 95px 간격으로 typical 풍선 높이 + 여유.
• WebGLGraph2D.tsx:1867: 동일 패턴.
• AgentAvatars3D.tsx:568: 코멘트만 갱신 (SpeechBubble default 사용).

변경 코드

• 수정: src/components/Avatars/SpeechBubble.tsx:
• lines ~215-238 (위치 계산 + transform).
• lines ~270-303 (꼬리 위치 bottom: 6 → top: 6, 두 side 모두).
• 수정: src/components/Avatars/AgentAvatars2D.tsx:1085 — top stack 공식 -18 - tier * 95.
• 수정: src/components/Visualizer2D/WebGLGraph2D.tsx:1867 — 동일 공식.
• 수정: src/components/Avatars/AgentAvatars3D.tsx:568 — 코멘트 갱신.
• 수정: package.json 0.2.43 → 0.2.44.

검증

• npx tsc --noEmit exit=0
• npm run build 성공 — renderer 11.71s, 번들 3,447.13 kB.

사용자 확인

• 단일 chip 풍선 (summary/normal 모드): 풍선의 한 줄이 캐릭터와 정확히 동일 Y 선상에 위치 (꼬리도 캐릭터 향함).
• multi-chip 풍선 (detailed 모드): 풍선의 첫 줄 = 캐릭터의 줄, 나머지 chip 은 캐릭터 아래로 펼쳐짐 (채팅 thread 패턴). 더 이상 풍선이 캐릭터를 둘러싸는 듯 보이지 않음.
• multi-avatar (drag 다음에 잘 안 보이는 시나리오): 좌/우 분리 + tier 별 위로 stack 으로 겹침 방지 유지.
• --

📦 GitHub 릴리스 노트: v0.2.44