fix(orbit): ensure SVG width accommodates long text

Add character width calculation to dynamically expand SVG width when
text exceeds the orbit-based dimensions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: wontory

packages/orbit/src/constants.ts

@@ -28,4 +28,60 @@ const COLORS = {
 
 const FONT_FAMILY = `"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif`
 
-export { SVG_CONFIG, COLORS, FONT_FAMILY }
+const DEFAULT_CHAR_WIDTH = 6.7
+const CJK_CHAR_WIDTH = 10
+
+const CHAR_WIDTHS: Record<string, number> = {
+  ' ': 2.8,
+  f: 3.4,
+  i: 2.8,
+  j: 2.8,
+  l: 2.8,
+  r: 3.8,
+  t: 3.8,
+  '!': 2.8,
+  '.': 2.8,
+  ',': 2.8,
+  ':': 2.8,
+  ';': 2.8,
+  '|': 2.8,
+  "'": 2.8,
+  '-': 3.8,
+  m: 10,
+  w: 8.5,
+  M: 8.5,
+  W: 10,
+  A: 7.2,
+  B: 7.2,
+  C: 7.2,
+  D: 7.6,
+  E: 6.3,
+  F: 5.8,
+  G: 7.6,
+  H: 7.6,
+  I: 2.8,
+  J: 4.5,
+  K: 7.2,
+  L: 5.8,
+  N: 7.6,
+  O: 8,
+  P: 6.7,
+  Q: 8,
+  R: 7.2,
+  S: 6.7,
+  T: 6.3,
+  U: 7.6,
+  V: 7.2,
+  X: 6.7,
+  Y: 6.3,
+  Z: 6.7,
+}
+
+export {
+  SVG_CONFIG,
+  COLORS,
+  FONT_FAMILY,
+  DEFAULT_CHAR_WIDTH,
+  CJK_CHAR_WIDTH,
+  CHAR_WIDTHS,
+}

packages/orbit/src/index.ts

@@ -11,6 +11,7 @@ import {
   calculateOrbitRadius,
   calculateOuterOrbitIconSize,
   calculateSvgDimensions,
+  calculateTextWidth,
   escapeXml,
 } from '#utils'
 
@@ -208,6 +209,12 @@ export const generateOrbitSvg = (text: string, icons: SimpleIcon[]): string => {
   )
   const padding = calculateDynamicPadding(outerOrbitIconSize)
   const svgDimensions = calculateSvgDimensions(largestOrbitRadius, padding)
+  const textWidth = calculateTextWidth(text, SVG_CONFIG.fontSize)
+  const textPadding = 40
+  const minWidth = textWidth + textPadding * 2
+  if (svgDimensions.width < minWidth) {
+    svgDimensions.width = minWidth
+  }
   const center = calculateCenter(svgDimensions.width, svgDimensions.height)
 
   const orbitConfig: OrbitConfig = {

packages/orbit/src/utils.ts

@@ -1,3 +1,4 @@
+import { CHAR_WIDTHS, CJK_CHAR_WIDTH, DEFAULT_CHAR_WIDTH } from '#constants'
 import type { Point, SvgDimensions } from '#types'
 
 const calculateLargestOrbitRadius = (
@@ -61,6 +62,29 @@ const calculateIconSizeMultiplier = (
   orbitIndex: number,
 ): number => baseMultiplier + incrementFactor * (orbitIndex + 1) ** 1.1
 
+const isCjk = (char: string): boolean => {
+  const code = char.charCodeAt(0)
+  return (
+    (code >= 0x4e00 && code <= 0x9fff) ||
+    (code >= 0x3400 && code <= 0x4dbf) ||
+    (code >= 0xac00 && code <= 0xd7af) ||
+    (code >= 0x3040 && code <= 0x30ff)
+  )
+}
+
+const calculateTextWidth = (text: string, fontSize: number): number => {
+  const scale = fontSize / 12
+  let width = 0
+  for (const char of text) {
+    if (isCjk(char)) {
+      width += CJK_CHAR_WIDTH
+    } else {
+      width += CHAR_WIDTHS[char] ?? DEFAULT_CHAR_WIDTH
+    }
+  }
+  return Math.ceil(width * scale)
+}
+
 const escapeXml = (text: string): string => {
   return text
     .replace(/&/g, '&amp;')
@@ -79,5 +103,6 @@ export {
   calculateOrbitRadius,
   calculateAnimationDuration,
   calculateIconSizeMultiplier,
+  calculateTextWidth,
   escapeXml,
 }