@shiinasaku/github-card 4.1.0 → 4.2.0

package/dist/lib.js

@@ -167,12 +167,49 @@ function resolveColors(opts) {
 }
 // src/utils/format.ts
 function kFormat(num) {
+  const sign = num < 0 ? "-" : "";
+  const abs = Math.abs(num);
   const trim = (v) => v.toFixed(1).replace(/\.0$/, "");
-  if (num >= 999950)
-    return trim(num / 1e6) + "M";
-  if (num >= 999.95)
-    return trim(num / 1000) + "k";
-  return String(Math.round(num));
+  if (abs >= 999950000)
+    return sign + trim(abs / 1e9) + "B";
+  if (abs >= 999950)
+    return sign + trim(abs / 1e6) + "M";
+  if (abs >= 999.95)
+    return sign + trim(abs / 1000) + "k";
+  return sign + String(Math.round(abs));
+}
+function measureText(text, size, weight = 400) {
+  if (!text)
+    return 0;
+  const factor = size / 16;
+  const weightFactor = weight >= 700 ? 1.08 : weight >= 600 ? 1.04 : 1;
+  let width = 0;
+  for (const ch of text) {
+    const code = ch.codePointAt(0);
+    let w;
+    if (ch === " ")
+      w = 0.28;
+    else if (ch === "." || ch === "," || ch === ":" || ch === ";")
+      w = 0.3;
+    else if (ch === "i" || ch === "l" || ch === "I" || ch === "t" || ch === "j" || ch === "|")
+      w = 0.3;
+    else if (ch === "m" || ch === "w" || ch === "W" || ch === "M" || ch === "@")
+      w = 0.95;
+    else if (code >= 4352 && code <= 4607)
+      w = 1;
+    else if (code >= 19968 && code <= 40959)
+      w = 1;
+    else if (code >= 12352 && code <= 12543)
+      w = 1;
+    else if (code >= 44032 && code <= 55215)
+      w = 1;
+    else if (code > 127)
+      w = 0.72;
+    else
+      w = 0.58;
+    width += w;
+  }
+  return width * factor * weightFactor;
 }
 function escapeXml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
@@ -860,24 +897,33 @@ function getLangColor(lang) {
 }
 // src/utils/icons.ts
 var icons = {
-  star: `<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>`,
+  star: `<path d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"/>`,
   commit: `<path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"/>`,
-  pr: `<path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/>`,
-  issue: `<path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/>`,
-  repo: `<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
+  pr: `<path d="M4 18a2 2 0 1 0 4 0a2 2 0 1 0-4 0M4 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m12 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0M6 8v8"/><path d="M11 6h5a2 2 0 0 1 2 2v8"/><path d="m14 9l-3-3l3-3"/>`,
+  issue: `<path d="M15.314 2a2 2 0 0 1 1.414.586l4.686 4.686A2 2 0 0 1 22 8.686v6.628a2 2 0 0 1-.586 1.414l-4.686 4.686a2 2 0 0 1-1.414.586H8.686a2 2 0 0 1-1.414-.586l-4.686-4.686A2 2 0 0 1 2 15.314V8.686a2 2 0 0 1 .586-1.414l4.686-4.686A2 2 0 0 1 8.686 2zm0 2H8.686L4 8.686v6.628L8.686 20h6.628L20 15.314V8.686zM12 15a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-9a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1"/>`,
+  repo: `<path d="M6 19.623c-.69-.195-1.232-.491-1.682-.941C3 17.364 3 15.242 3 11s0-6.364 1.318-7.682S7.758 2 12 2s6.364 0 7.682 1.318S21 6.758 21 11s0 6.364-1.318 7.682c-.45.45-.993.746-1.682.941"/><path d="M12 20.193c-.414 0-.748.32-1.414.958c-.647.619-.97.929-1.242.831a.5.5 0 0 1-.096-.046C9 21.779 9 21.31 9 20.376v-3.125c0-1.532 0-2.299.44-2.775C9.878 14 10.585 14 12 14s2.121 0 2.56.476s.44 1.243.44 2.775v3.125c0 .935 0 1.403-.248 1.56a.5.5 0 0 1-.096.046c-.272.098-.595-.212-1.242-.831c-.666-.639-1-.958-1.414-.958M8 10h8M8 6h4"/>`,
   x: `<path d="M4 4l11.733 16h4.267l-11.733 -16l-4.267 0" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />`
 };
+var iconMeta = {
+  star: { viewBox: "0 0 24 24", kind: "fill" },
+  commit: { viewBox: "0 0 16 16", kind: "fill" },
+  pr: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "2" },
+  issue: { viewBox: "0 0 24 24", kind: "fill" },
+  repo: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "1.5" },
+  x: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "2" }
+};
 function icon(name, color, size = 16) {
   const path = icons[name];
   if (!path)
     return "";
-  const viewBox = name === "x" ? "0 0 24 24" : "0 0 16 16";
+  const meta = iconMeta[name];
+  const viewBox = meta?.viewBox ?? "0 0 16 16";
   const colorStr = color.startsWith("#") ? color : `#${color}`;
-  const fill = name === "x" ? `stroke="${colorStr}" stroke-width="2" fill="none"` : `fill="${colorStr}"`;
-  return `<svg width="${size}" height="${size}" viewBox="${viewBox}" ${fill} role="img">${path}</svg>`;
+  const attrs = meta?.kind === "stroke" ? `fill="none" stroke="${colorStr}" stroke-width="${meta.strokeWidth ?? "1.8"}" stroke-linecap="round" stroke-linejoin="round"` : `fill="${colorStr}"`;
+  return `<svg width="${size}" height="${size}" viewBox="${viewBox}" ${attrs} role="img">${path}</svg>`;
 }
 // src/utils/font.ts
-var FONT_FAMILY = 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+var FONT_FAMILY = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
 var FONT_FACE = "";
 // src/utils/colors.ts
 var twColors = {
@@ -970,6 +1016,17 @@ var STAT_DEFS = [
   { key: "repos", iconName: "repo", label: "Repos" },
   { key: "prs", iconName: "pr", label: "PRs" }
 ];
+function el(tag, attrs, children = "") {
+  let a = "";
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v === undefined || v === null || v === "")
+      continue;
+    a += ` ${k}="${escapeXml(String(v))}"`;
+  }
+  if (!children)
+    return `<${tag}${a} />`;
+  return `<${tag}${a}>${children}</${tag}>`;
+}
 function raw(token) {
   const m = resolveTw(token, "fill").match(/fill="([^"]+)"/);
   return m?.[1] ?? token;
@@ -1007,7 +1064,7 @@ function renderCard(user, stats, langs, opts = {}) {
   const textColor = raw(c.text);
   const iconColor = raw(c.icon);
   const borderColor = raw(c.border);
-  const fontFamily = FONT_FAMILY.replace(/"/g, "&apos;");
+  const fontFamily = FONT_FAMILY;
   const displayName = user.name || user.login;
   const nameEsc = escapeXml(clamp(displayName, 28));
   const loginEsc = escapeXml(clamp(user.login, 24));
@@ -1015,7 +1072,8 @@ function renderCard(user, stats, langs, opts = {}) {
   const bioRaw = !compact && user.bio ? user.bio : "";
   const bioLines = bioRaw ? wrapText(bioRaw, 44, 2) : [];
   const twitter = !compact && user.twitter ? escapeXml(clamp(user.twitter, 22)) : "";
-  const avatar = (user.avatarUrl || "").replace(/&/g, "&amp;");
+  const avatar = user.avatarUrl || "";
+  const metaStr = pronouns ? `@${loginEsc} · ${pronouns}` : `@${loginEsc}`;
   const visible = STAT_DEFS.filter((d) => !hidden.has(d.key));
   const activeLangsList = langs.filter((l) => {
     const name = l.name.toLowerCase().trim();
@@ -1025,42 +1083,45 @@ function renderCard(user, stats, langs, opts = {}) {
       return false;
     return true;
   });
-  const PX = 25;
-  const PY = 25;
-  const avatarSize = 64;
+  const PX = 24;
+  const PY = 22;
+  const avatarSize = 60;
   const avatarR = avatarSize / 2;
-  const metaLen = user.login.length + (pronouns ? pronouns.length + 3 : 0);
-  const maxBioLen = bioLines.length ? Math.max(...bioLines.map((l) => l.length)) : 0;
-  const profileTextW = Math.max(displayName.length * 11, metaLen * 7.5, maxBioLen * 6.5, twitter.length * 7 + 20);
-  const profileW = PX + avatarSize + 16 + profileTextW + PX;
-  const statsW = visible.length > 0 ? visible.length * 85 + PX * 2 : 0;
+  const textGap = 16;
+  const nameW = measureText(displayName, 17, 700);
+  const metaW = measureText(metaStr, 12.5, 500);
+  const bioW = bioLines.length ? Math.max(...bioLines.map((l) => measureText(l, 11.5, 400))) : 0;
+  const twitterW = twitter ? measureText(`@${twitter}`, 11.5, 500) : 0;
+  const profileTextW = Math.max(nameW, metaW, bioW, twitterW);
+  const profileW = PX + avatarSize + textGap + profileTextW + PX;
+  const statsW = visible.length > 0 ? visible.length * 84 + PX * 2 : 0;
   const langsW = activeLangsList.length > 0 ? 300 : 0;
   const W = Math.round(Math.min(540, Math.max(340, profileW, statsW, langsW)));
   const contentW = W - PX * 2;
-  const infoX = PX + avatarSize + 14;
-  const nameY = PY + 22;
-  const loginY = nameY + 18;
-  const bioStartY = loginY + 16;
+  const infoX = PX + avatarSize + textGap;
+  const nameY = PY + 20;
+  const loginY = nameY + 17;
+  const bioStartY = loginY + 15;
   const twitterY = bioStartY + bioLines.length * 14 + (bioLines.length ? 4 : 0);
-  let profileH = loginY + 10 - PY;
+  let profileH = loginY + 8 - PY;
   if (bioLines.length)
     profileH = bioStartY + bioLines.length * 14 - PY;
   if (twitter)
     profileH = twitterY + 10 - PY;
-  profileH = Math.max(profileH, avatarSize + 4);
-  const statsY = PY + profileH + 14;
+  profileH = Math.max(profileH, avatarSize + 6);
+  const statsY = PY + profileH + 16;
   const statW = visible.length > 0 ? contentW / visible.length : 0;
-  const statsH = visible.length > 0 ? 50 : 0;
+  const statsH = visible.length > 0 ? 58 : 0;
   const totalSize = activeLangsList.reduce((s, l) => s + l.size, 0) || 1;
   const sorted = [...activeLangsList].sort((a, b) => b.size - a.size);
   const visualLangs = buildLanguageSegments(sorted, totalSize, contentW);
-  const barY = statsY + statsH + (statsH ? 16 : 12);
+  const barY = statsY + statsH + (statsH ? 18 : 14);
   const barH = 10;
   const maxLegend = compact ? 0 : 6;
   const legendLangs = visualLangs.slice(0, maxLegend);
   const otherSize = visualLangs.slice(maxLegend).reduce((s, l) => s + l.size, 0);
-  const legendY = barY + barH + 12;
-  const legendRowH = 16;
+  const legendY = barY + barH + 14;
+  const legendRowH = 17;
   const legendCols = 3;
   const legendColW = contentW / legendCols;
   const legendItems = legendLangs.map((l) => ({
@@ -1082,128 +1143,205 @@ function renderCard(user, stats, langs, opts = {}) {
   }
   const legendRows = compact ? 0 : Math.ceil(legendItems.length / legendCols);
   const hasLangs = activeLangsList.length > 0;
-  const langSectionH = hasLangs ? barH + 12 + legendRows * legendRowH + 8 : 0;
-  const H = barY + (hasLangs ? langSectionH : 0) + 12 + (hasLangs ? 0 : 4);
+  const langSectionH = hasLangs ? barH + 14 + legendRows * legendRowH + 10 : 0;
+  const H = barY + (hasLangs ? langSectionH : 0) + 14 + (hasLangs ? 0 : 6);
   const parts = [];
-  parts.push('<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + " " + H + '" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="cardTitle cardDesc">');
-  parts.push('<title id="cardTitle">' + escapeXml(displayName + "'s GitHub Stats") + "</title>");
-  parts.push('<desc id="cardDesc">GitHub profile card for ' + escapeXml(displayName) + " with " + kFormat(stats.stars) + " stars, " + kFormat(stats.commits) + " commits, and " + activeLangsList.length + " highlighted languages.</desc>");
-  const cssLines = [];
-  cssLines.push("* { font-family: " + fontFamily + "; }");
-  cssLines.push(".header { font-size: 18px; font-weight: 700; fill: " + titleColor + "; }");
-  cssLines.push(".stat { font-size: 14px; font-weight: 600; fill: " + textColor + "; }");
-  cssLines.push(".bold { font-weight: 700; }");
-  cssLines.push(".icon { fill: " + iconColor + "; }");
-  cssLines.push(".lang-name { font-size: 11px; fill: " + textColor + "; opacity: 0.8; }");
-  cssLines.push(".lang-progress { fill: " + textColor + "; opacity: 0.08; }");
-  cssLines.push(".meta { font-size: 12px; font-weight: 500; fill: " + textColor + "; opacity: 0.7; }");
-  cssLines.push(".bio { font-size: 11px; font-weight: 400; fill: " + textColor + "; opacity: 0.68; }");
-  cssLines.push(".stat-label { font-size: 9px; font-weight: 600; fill: " + textColor + "; opacity: 0.5; letter-spacing: 0.08em; }");
-  cssLines.push(".stat-value { font-size: 15px; font-weight: 800; fill: " + textColor + "; }");
-  cssLines.push(".twitter-text { font-size: 11px; font-weight: 500; fill: " + textColor + "; opacity: 0.65; }");
+  const svgAttrs = {
+    width: W,
+    height: H,
+    viewBox: `0 0 ${W} ${H}`,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-labelledby": "cardTitle cardDesc"
+  };
+  let svgOpen = "<svg";
+  for (const [k, v] of Object.entries(svgAttrs))
+    svgOpen += ` ${k}="${escapeXml(String(v))}"`;
+  parts.push(svgOpen + ">");
+  parts.push(el("title", { id: "cardTitle" }, `${escapeXml(displayName)}'s GitHub Stats`));
+  parts.push(el("desc", { id: "cardDesc" }, `GitHub profile card for ${escapeXml(displayName)} with ${kFormat(stats.stars)} stars, ${kFormat(stats.commits)} commits, and ${activeLangsList.length} highlighted languages.`));
+  const css = [];
+  css.push(`* { font-family: ${fontFamily}; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }`);
+  css.push(`.header { font-size: 17px; font-weight: 700; fill: ${titleColor}; letter-spacing: -0.015em; }`);
+  css.push(`.stat { font-size: 14px; font-weight: 600; fill: ${textColor}; }`);
+  css.push(`.icon { fill: ${iconColor}; }`);
+  css.push(`.lang-name { font-size: 11px; fill: ${textColor}; opacity: 0.82; }`);
+  css.push(`.lang-progress { fill: ${textColor}; opacity: 0.07; }`);
+  css.push(`.meta { font-size: 12.5px; font-weight: 500; fill: ${textColor}; opacity: 0.72; }`);
+  css.push(`.bio { font-size: 11.5px; font-weight: 400; fill: ${textColor}; opacity: 0.68; }`);
+  css.push(`.stat-label { font-size: 10px; font-weight: 700; fill: ${textColor}; opacity: 0.68; letter-spacing: 0.06em; }`);
+  css.push(`.stat-value { font-size: 16px; font-weight: 700; fill: ${textColor}; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }`);
+  css.push(`.twitter-text { font-size: 11.5px; font-weight: 500; fill: ${textColor}; opacity: 0.65; }`);
   if (animate) {
-    cssLines.push("@keyframes fadeInAnimation { from { opacity: 0; } to { opacity: 1; } }");
-    cssLines.push(".stagger { opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; }");
+    css.push("@keyframes fadeInAnimation { from { opacity: 0; } to { opacity: 1; } }");
+    css.push(".stagger { opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; }");
   }
-  parts.push("<style>" + cssLines.join(" ") + "</style>");
-  parts.push("<defs>");
-  parts.push('<clipPath id="av"><circle cx="' + (PX + avatarR) + '" cy="' + (PY + avatarR) + '" r="' + avatarR + '"/></clipPath>');
-  parts.push('<radialGradient id="gl" cx="12%" cy="15%" r="65%">' + '<stop offset="0%" stop-color="' + iconColor + '" stop-opacity="0.08"/>' + '<stop offset="100%" stop-color="' + iconColor + '" stop-opacity="0"/>' + "</radialGradient>");
-  parts.push('<radialGradient id="gl2" cx="92%" cy="95%" r="55%">' + '<stop offset="0%" stop-color="' + titleColor + '" stop-opacity="0.035"/>' + '<stop offset="100%" stop-color="' + titleColor + '" stop-opacity="0"/>' + "</radialGradient>");
-  parts.push('<linearGradient id="ring" x1="0" y1="0" x2="1" y2="1">' + '<stop offset="0%" stop-color="' + titleColor + '"/>' + '<stop offset="100%" stop-color="' + iconColor + '"/>' + "</linearGradient>");
-  parts.push('<linearGradient id="card-bg" x1="0" y1="0" x2="' + W + '" y2="' + H + '" gradientUnits="userSpaceOnUse">' + '<stop offset="0%" stop-color="' + bgColor + '"/>' + '<stop offset="82%" stop-color="' + bgColor + '"/>' + '<stop offset="100%" stop-color="' + titleColor + '" stop-opacity="0.04"/>' + "</linearGradient>");
-  parts.push('<linearGradient id="rim" x1="0" y1="0" x2="' + W + '" y2="0" gradientUnits="userSpaceOnUse">' + '<stop offset="0%" stop-color="' + iconColor + '" stop-opacity="0"/>' + '<stop offset="45%" stop-color="' + iconColor + '" stop-opacity="0.28"/>' + '<stop offset="100%" stop-color="' + iconColor + '" stop-opacity="0"/>' + "</linearGradient>");
-  parts.push("</defs>");
-  parts.push('<rect x="0.5" y="0.5" width="' + (W - 1) + '" height="' + (H - 1) + '" rx="10" fill="' + "url(#card-bg)" + '" stroke-opacity="1"/>');
-  parts.push('<rect x="0.5" y="0.5" width="' + (W - 1) + '" height="' + (H - 1) + '" rx="10" fill="url(#gl)"/>');
-  parts.push('<rect x="0.5" y="0.5" width="' + (W - 1) + '" height="' + (H - 1) + '" rx="10" fill="url(#gl2)"/>');
-  parts.push('<line x1="' + PX + '" y1="1.5" x2="' + (W - PX) + '" y2="1.5" stroke="url(#rim)" stroke-width="1"/>');
+  parts.push(el("style", {}, css.join(" ")));
+  parts.push(el("defs", {}, [
+    el("clipPath", { id: "av" }, el("circle", { cx: PX + avatarR, cy: PY + avatarR, r: avatarR })),
+    el("radialGradient", { id: "gl", cx: "12%", cy: "15%", r: "65%" }, el("stop", { offset: "0%", "stop-color": iconColor, "stop-opacity": "0.08" }) + el("stop", { offset: "100%", "stop-color": iconColor, "stop-opacity": "0" })),
+    el("radialGradient", { id: "gl2", cx: "92%", cy: "95%", r: "55%" }, el("stop", { offset: "0%", "stop-color": titleColor, "stop-opacity": "0.035" }) + el("stop", { offset: "100%", "stop-color": titleColor, "stop-opacity": "0" })),
+    el("linearGradient", { id: "ring", x1: "0", y1: "0", x2: "1", y2: "1" }, el("stop", { offset: "0%", "stop-color": titleColor }) + el("stop", { offset: "100%", "stop-color": iconColor })),
+    el("linearGradient", { id: "card-bg", x1: "0", y1: "0", x2: W, y2: H, gradientUnits: "userSpaceOnUse" }, el("stop", { offset: "0%", "stop-color": bgColor }) + el("stop", { offset: "82%", "stop-color": bgColor }) + el("stop", { offset: "100%", "stop-color": titleColor, "stop-opacity": "0.04" })),
+    el("linearGradient", { id: "rim", x1: "0", y1: "0", x2: W, y2: "0", gradientUnits: "userSpaceOnUse" }, el("stop", { offset: "0%", "stop-color": iconColor, "stop-opacity": "0" }) + el("stop", { offset: "45%", "stop-color": iconColor, "stop-opacity": "0.28" }) + el("stop", { offset: "100%", "stop-color": iconColor, "stop-opacity": "0" }))
+  ].join("")));
+  parts.push(el("rect", { x: "0.5", y: "0.5", width: W - 1, height: H - 1, rx: 12, fill: "url(#card-bg)" }));
+  parts.push(el("rect", { x: "0.5", y: "0.5", width: W - 1, height: H - 1, rx: 12, fill: "url(#gl)" }));
+  parts.push(el("rect", { x: "0.5", y: "0.5", width: W - 1, height: H - 1, rx: 12, fill: "url(#gl2)" }));
+  parts.push(el("line", {
+    x1: PX,
+    y1: "1.5",
+    x2: W - PX,
+    y2: "1.5",
+    stroke: "url(#rim)",
+    "stroke-width": 1
+  }));
   if (!hideBorder) {
-    parts.push('<rect x="0.5" y="0.5" width="' + (W - 1) + '" height="' + (H - 1) + '" rx="10" fill="none" stroke="' + borderColor + '" stroke-opacity="0.5"/>');
+    parts.push(el("rect", {
+      x: "0.5",
+      y: "0.5",
+      width: W - 1,
+      height: H - 1,
+      rx: 12,
+      fill: "none",
+      stroke: borderColor,
+      "stroke-opacity": "0.5"
+    }));
   }
-  parts.push('<g transform="translate(0,0)">' + '<circle cx="' + (PX + avatarR + 1) + '" cy="' + (PY + avatarR + 1) + '" r="' + (avatarR + 3) + '" fill="' + titleColor + '" opacity="0.08"/>' + '<image href="' + avatar + '" x="' + PX + '" y="' + PY + '" width="' + avatarSize + '" height="' + avatarSize + '" clip-path="url(#av)" preserveAspectRatio="xMidYMid slice"/>' + '<circle cx="' + (PX + avatarR) + '" cy="' + (PY + avatarR) + '" r="' + (avatarR + 1.5) + '" fill="none" stroke="url(#ring)" stroke-opacity="0.55" stroke-width="1.5"/>' + "</g>");
-  parts.push('<g transform="translate(0,0)">');
-  parts.push('<text x="' + infoX + '" y="' + nameY + '" class="header">' + nameEsc + "</text>");
-  const metaStr = pronouns ? "@" + loginEsc + " · " + pronouns : "@" + loginEsc;
-  parts.push('<text x="' + infoX + '" y="' + loginY + '" class="meta">' + metaStr + "</text>");
+  parts.push(el("g", {}, el("circle", {
+    cx: PX + avatarR + 1,
+    cy: PY + avatarR + 1,
+    r: avatarR + 3,
+    fill: titleColor,
+    opacity: "0.08"
+  }) + el("image", {
+    href: avatar,
+    x: PX,
+    y: PY,
+    width: avatarSize,
+    height: avatarSize,
+    "clip-path": "url(#av)",
+    preserveAspectRatio: "xMidYMid slice"
+  }) + el("circle", {
+    cx: PX + avatarR,
+    cy: PY + avatarR,
+    r: avatarR + 1.5,
+    fill: "none",
+    stroke: "url(#ring)",
+    "stroke-opacity": "0.55",
+    "stroke-width": "1.5"
+  })));
+  const textParts = [];
+  textParts.push(el("text", { x: infoX, y: nameY, class: "header" }, nameEsc));
+  textParts.push(el("text", { x: infoX, y: loginY, class: "meta" }, metaStr));
   for (let i = 0;i < bioLines.length; i++) {
-    parts.push('<text x="' + infoX + '" y="' + (bioStartY + i * 14) + '" class="bio">' + escapeXml(bioLines[i].trim()) + "</text>");
+    textParts.push(el("text", { x: infoX, y: bioStartY + i * 14, class: "bio" }, escapeXml(bioLines[i].trim())));
   }
   if (twitter) {
-    parts.push('<g transform="translate(' + infoX + "," + (twitterY - 9) + ')">' + icon("x", textColor, 11) + '<text x="15" y="9" class="twitter-text">@' + twitter + "</text></g>");
+    textParts.push(el("g", { transform: `translate(${infoX},${twitterY - 9})` }, icon("x", textColor, 11) + el("text", { x: 15, y: 9, class: "twitter-text" }, `@${twitter}`)));
   }
-  parts.push("</g>");
+  parts.push(el("g", {}, textParts.join("")));
   if (visible.length > 0) {
-    parts.push('<rect x="' + PX + '" y="' + (statsY - 8) + '" width="' + contentW + '" height="' + (statsH + 8) + '" rx="8" fill="' + textColor + '" opacity="0.035"/>');
-    parts.push('<g transform="translate(0,0)">');
+    const statParts = [];
     for (let i = 0;i < visible.length; i++) {
       const d = visible[i];
       const val = stats[d.key];
       const cx = PX + statW * i + statW / 2;
-      const cellX = PX + statW * i + 4;
-      const iy = statsY + 2;
-      const staggerStyle = animate ? ' style="animation-delay: ' + (i + 3) * 150 + 'ms"' : "";
+      const iy = statsY + 4;
       const staggerClass = animate ? " stagger" : "";
-      parts.push('<rect x="' + cellX + '" y="' + (statsY - 4) + '" width="' + Math.max(0, statW - 8) + '" height="' + (statsH - 2) + '" rx="8" fill="' + textColor + '" opacity="0.028"/>');
-      parts.push('<g transform="translate(' + cx + "," + iy + ')" class="stat' + staggerClass + '"' + staggerStyle + ">");
-      parts.push('<text x="0" y="26" class="stat-value" text-anchor="middle">' + kFormat(val) + "</text>");
-      const labelText = d.label.toUpperCase();
-      const labelW = labelText.length * 6.8;
-      const rowW = 10 + 4 + labelW;
-      parts.push('<g transform="translate(' + -rowW / 2 + ',31.5)">' + icon(d.iconName, iconColor, 10) + "</g>");
-      parts.push('<text x="' + (-rowW / 2 + 14) + '" y="40" class="stat-label">' + labelText + "</text>");
-      parts.push("</g>");
+      const iconSize = 15;
+      const iconY = 2;
+      const valueY = 37;
+      const labelY = 52;
+      const cellParts = [];
+      cellParts.push(el("g", { transform: `translate(${-iconSize / 2},${iconY})`, class: "stat-icon" }, icon(d.iconName, iconColor, iconSize)));
+      cellParts.push(el("text", { x: 0, y: valueY, class: "stat-value", "text-anchor": "middle" }, kFormat(val)));
+      cellParts.push(el("text", { x: 0, y: labelY, class: "stat-label", "text-anchor": "middle" }, d.label.toUpperCase()));
+      statParts.push(el("g", {
+        transform: `translate(${cx},${iy})`,
+        class: `stat${staggerClass}`,
+        style: animate ? `animation-delay: ${(i + 3) * 150}ms` : undefined
+      }, cellParts.join("")));
+      if (i < visible.length - 1) {
+        const dx = PX + statW * (i + 1);
+        statParts.push(el("line", {
+          x1: dx,
+          y1: statsY + 4,
+          x2: dx,
+          y2: statsY + statsH - 6,
+          stroke: textColor,
+          "stroke-opacity": "0.12"
+        }));
+      }
     }
-    parts.push("</g>");
+    parts.push(el("g", {}, statParts.join("")));
   }
   if (hasLangs) {
-    parts.push('<line x1="' + PX + '" y1="' + (barY - 8) + '" x2="' + (W - PX) + '" y2="' + (barY - 8) + '" stroke="' + textColor + '" stroke-opacity="0.08"/>');
-    parts.push('<g transform="translate(0,0)">');
-    parts.push('<clipPath id="lang-clip"><rect x="' + PX + '" y="' + barY + '" width="' + (animate ? "0" : contentW) + '" height="' + barH + '" rx="5">' + (animate ? '<animate attributeName="width" from="0" to="' + contentW + '" dur="0.6s" fill="freeze"/>' : "") + "</rect></clipPath>");
-    parts.push('<rect x="' + PX + '" y="' + barY + '" width="' + contentW + '" height="' + barH + '" rx="5" class="lang-progress"/>');
-    parts.push('<g clip-path="url(#lang-clip)">');
-    const activeLangs = visualLangs;
+    const langParts = [];
+    langParts.push(el("line", {
+      x1: PX,
+      y1: barY - 8,
+      x2: W - PX,
+      y2: barY - 8,
+      stroke: textColor,
+      "stroke-opacity": "0.08"
+    }));
+    langParts.push(el("clipPath", { id: "lang-clip" }, el("rect", {
+      x: PX,
+      y: barY,
+      width: animate ? "0" : contentW,
+      height: barH,
+      rx: 5
+    }, animate ? el("animate", {
+      attributeName: "width",
+      from: "0",
+      to: contentW,
+      dur: "0.6s",
+      fill: "freeze"
+    }) : "")));
+    langParts.push(el("rect", { x: PX, y: barY, width: contentW, height: barH, rx: 5, class: "lang-progress" }));
+    const barParts = [];
     let off = 0;
-    for (let i = 0;i < activeLangs.length; i++) {
-      const lang = activeLangs[i];
+    for (let i = 0;i < visualLangs.length; i++) {
+      const lang = visualLangs[i];
       const pct = (lang.size / totalSize * 100).toFixed(1);
-      let w = i === activeLangs.length - 1 ? contentW - off : lang.size / totalSize * contentW;
+      let w = i === visualLangs.length - 1 ? contentW - off : lang.size / totalSize * contentW;
       if (w < 0)
         w = 0;
       const x = PX + off;
-      const tooltip = compact ? "" : "<title>" + escapeXml(lang.name) + " " + pct + "%</title>";
-      parts.push('<rect x="' + x + '" y="' + barY + '" width="' + w + '" height="' + barH + '" fill="' + lang.color + '">' + tooltip + "</rect>");
+      const tooltip = compact ? "" : el("title", {}, `${escapeXml(lang.name)} ${pct}%`);
+      barParts.push(el("rect", { x, y: barY, width: w, height: barH, fill: lang.color }, tooltip));
       off += w;
     }
-    parts.push("</g>");
+    langParts.push(el("g", { "clip-path": "url(#lang-clip)" }, barParts.join("")));
     for (let i = 0;i < legendItems.length; i++) {
       const item = legendItems[i];
       const col = i % legendCols;
       const row = Math.floor(i / legendCols);
       const lx = PX + col * legendColW;
       const ly = legendY + row * legendRowH;
-      const staggerStyle = animate ? ' style="animation-delay: ' + (i + 3) * 150 + 'ms"' : "";
-      const staggerClass = animate ? ' class="stagger"' : "";
-      parts.push("<g" + staggerClass + staggerStyle + ">");
-      parts.push('<circle cx="' + (lx + 5) + '" cy="' + ly + '" r="4" fill="' + item.color + '"/>');
-      parts.push('<text x="' + (lx + 14) + '" y="' + (ly + 4) + '" class="lang-name" font-weight="500">' + escapeXml(item.name) + " " + item.pct + "%</text>");
-      parts.push("</g>");
+      langParts.push(el("g", {
+        class: animate ? "stagger" : undefined,
+        style: animate ? `animation-delay: ${(i + 3) * 150}ms` : undefined
+      }, el("circle", { cx: lx + 5, cy: ly, r: 4, fill: item.color }) + el("text", { x: lx + 14, y: ly + 4, class: "lang-name", "font-weight": "500" }, `${escapeXml(item.name)} ${item.pct}%`)));
     }
-    parts.push("</g>");
+    parts.push(el("g", {}, langParts.join("")));
   }
   parts.push("</svg>");
   return parts.join("");
 }
 export {
-  wrapText,
-  themes,
-  resolveColors,
-  renderCard,
-  kFormat,
-  icons,
-  icon,
-  getLangColor,
-  escapeXml,
+  FONT_FACE,
   FONT_FAMILY,
-  FONT_FACE
+  escapeXml,
+  getLangColor,
+  icon,
+  icons,
+  kFormat,
+  measureText,
+  renderCard,
+  resolveColors,
+  themes,
+  wrapText
 };

package/dist/utils/font.d.ts

@@ -1,2 +1,4 @@
-export declare const FONT_FAMILY = "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"";
+/** System font stack — no shipped font, respects the user's OS. */
+export declare const FONT_FAMILY = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"";
+/** @deprecated No shipped font — kept for API backwards compatibility. */
 export declare const FONT_FACE = "";

package/dist/utils/format.d.ts

@@ -1,3 +1,10 @@
 export declare function kFormat(num: number): string;
+/**
+ * Approximate rendered width of a string in SVG user units for the default
+ * sans-serif stack. Widths are per-character averages tuned to the card's
+ * font sizes and weights, so layout can reserve enough space without relying
+ * on browser text measurement (which is unavailable server-side).
+ */
+export declare function measureText(text: string, size: number, weight?: number): number;
 export declare function escapeXml(str: string): string;
 export declare function wrapText(input: string, maxLen: number, maxLines: number): string[];

package/dist/utils/icons.d.ts

@@ -6,4 +6,6 @@ export declare const icons: {
     repo: string;
     x: string;
 };
-export declare function icon(name: keyof typeof icons, color: string, size?: number): string;
+type IconName = keyof typeof icons;
+export declare function icon(name: IconName, color: string, size?: number): string;
+export {};

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 export { resolveColors, themes, type Theme } from "./themes";
-export { kFormat, escapeXml, wrapText } from "./format";
+export { kFormat, escapeXml, wrapText, measureText } from "./format";
 export { getLangColor } from "./languages";
 export { icons, icon } from "./icons";
 export { FONT_FACE, FONT_FAMILY } from "./font";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shiinasaku/github-card",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Beautiful GitHub stats SVG cards. Embed in README, use as API, or render programmatically.",
   "keywords": [
     "badge",
@@ -23,12 +23,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ShiinaSaku/Github-Card.git"
+    "url": "git+https://github.com/ShiinaSaku/Github-Card.git"
   },
   "files": [
     "dist",
     "src",
-    "fonts",
     "README.md",
     "LICENSE"
   ],
@@ -69,15 +68,15 @@
     "@elysia/cors": "^1.4.2",
     "@elysia/openapi": "^1.4.15",
     "@elysia/server-timing": "^1.4.1",
-    "elysia": "^1.4.29"
+    "elysia": "1.4.29"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.3",
-    "@types/bun": "^1.3.14",
-    "oxfmt": "0.60.0",
-    "oxlint": "1.75.0",
+    "@types/bun": "^1.4.0",
+    "oxfmt": "0.64.0",
+    "oxlint": "1.79.0",
     "tailwindcss": "^4.3.3",
-    "typescript": "^7.0.2"
+    "typescript": "^6.0.3"
   },
-  "packageManager": "bun@1.3.14"
+  "packageManager": "bun@1.4.0"
 }