@stats-forge/github-stats-forge-core 0.1.0 → 0.2.0

package/build/cards/stats.js

@@ -1,31 +1,50 @@
+import { CARD_ICON, CARD_WIDTH, FONT_SIZE, FONT_WEIGHT, firefoxFontSize, font, } from '../common/brand.js';
 import { Card } from '../common/Card.js';
 import { getLightDarkColors } from '../common/color.js';
+import { formatRange } from '../common/date.js';
 import { CardError } from '../common/error.js';
 import { I18n } from '../common/I18n.js';
 import { icons, rankIcon } from '../common/icons.js';
 import { buildSearchFilter, clampValue } from '../common/ops.js';
-import { createTextNode, flexLayout, measureText } from '../common/render.js';
+import { NUMBER_FORMATS, createTextNode, flexLayout, measureText } from '../common/render.js';
 import { atRule, cssComment, el, rule } from '../markup/index.js';
 import { statCardLocales, wakatimeCardLocales } from '../translations.js';
 const CARD_MIN_WIDTH = 287;
-const CARD_DEFAULT_WIDTH = 287;
-const RANK_CARD_MIN_WIDTH = 420;
-const RANK_CARD_DEFAULT_WIDTH = 450;
-const RANK_ONLY_CARD_MIN_WIDTH = 290;
-const RANK_ONLY_CARD_DEFAULT_WIDTH = 290;
-const STAT_FONT_SIZE = 14;
+const CARD_DEFAULT_WIDTH = CARD_WIDTH.compact;
+const RANK_CARD_DEFAULT_WIDTH = CARD_WIDTH.wide;
+const RANK_ONLY_CARD_DEFAULT_WIDTH = CARD_WIDTH.compact;
+const STAT_FONT_SIZE = FONT_SIZE.body;
 /** Padding the card keeps at its edges; matches `Card`'s own `paddingX`. */
 const CARD_PADDING_X = 25;
 /** How far a stat row is translated into the card; see `createTextNode`. */
 const STAT_ROW_X = 25;
 /** Room the rank ring needs at the right edge, so a value never runs into it. */
 const RANK_GUTTER = 120;
+/** The ring's own `cx`, which its group's translation has to make up for. */
+const RANK_CIRCLE_CX_OFFSET = 10;
 /** `createTextNode`'s own label offset, which it applies only when icons are shown. */
 const LABEL_X_OFFSET = 25;
 /** Smallest gap kept between the longest label and its value. */
 const LABEL_VALUE_GAP = 16;
 /** Rank indicators the card can draw; the api validates `rank_icon` against this. */
 const RANK_ICONS = ['default', 'github', 'percentile'];
+/** Stats the card draws only when `show` names them. */
+const SHOW_STATS = [
+    'contributions',
+    'prs_merged',
+    'prs_merged_percentage',
+    'reviews',
+    'discussions_started',
+    'discussions_answered',
+    'prs_authored',
+    'prs_commented',
+    'prs_reviewed',
+    'issues_authored',
+    'issues_commented',
+    'all_time_contribs',
+];
+/** Stats the card always draws, and so the ones `hide` has anything to remove. */
+const HIDE_STATS = ['stars', 'commits', 'prs', 'issues', 'contribs'];
 /** Long locales that need more space for text. Keep sorted alphabetically. */
 const LONG_LOCALES = new Set([
     'az',
@@ -80,22 +99,22 @@ const getProgressAnimation = ({ progress }) => atRule('@keyframes rankAnimation'
  */
 const getStyles = ({ textColor, iconColor, ringColor, show_icons, progress, }) => [
     rule('.stat', {
-        font: `400 ${STAT_FONT_SIZE}px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif`,
+        font: font('regular', 'body'),
         fill: textColor,
         'font-variant-numeric': 'tabular-nums',
     }),
-    atRule('@supports(-moz-appearance: auto)', cssComment('Selector detects Firefox'), rule('.stat', { 'font-size': '12px' })),
+    firefoxFontSize(['.stat'], 'small'),
     rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
     rule('.rank-text', {
-        font: "700 22px 'Segoe UI', Ubuntu, Sans-Serif",
+        font: font('bold', 'display'),
         fill: textColor,
         animation: 'scaleInAnimation 0.3s ease-in-out forwards',
     }),
-    rule('.rank-percentile-header', { 'font-size': '14px' }),
-    rule('.rank-percentile-text', { 'font-size': '16px' }),
+    rule('.rank-percentile-header', { 'font-size': `${String(FONT_SIZE.body)}px` }),
+    rule('.rank-percentile-text', { 'font-size': `${String(FONT_SIZE.lead)}px` }),
     cssComment('Labels recede so that the values read first.'),
-    rule('.not_bold', { 'font-weight': 400, opacity: 0.75 }),
-    rule('.bold', { 'font-weight': 600 }),
+    rule('.not_bold', { 'font-weight': FONT_WEIGHT.regular, opacity: 0.75 }),
+    rule('.bold', { 'font-weight': FONT_WEIGHT.semibold }),
     rule('.icon', {
         fill: iconColor,
         opacity: 0.75,
@@ -121,25 +140,25 @@ const getStyles = ({ textColor, iconColor, ringColor, show_icons, progress, }) =
     getProgressAnimation({ progress }),
 ];
 /**
- * Return the label for commits according to the selected options
- *
- * @returns The label corresponding to the options.
+ * @returns What the commit count covers, for the stat's label.
  */
-const getTotalCommitsYearLabel = (include_all_commits, commits_year, i18n) => include_all_commits
+const getTotalCommitsRangeLabel = (include_all_commits, commitsRange, i18n) => include_all_commits
     ? ''
-    : commits_year
-        ? ` (${commits_year})`
+    : commitsRange
+        ? ` (${formatRange(commitsRange)})`
         : ` (${i18n.t('wakatimecard.lastyear')})`;
 /**
  * Renders the stats card.
  *
  * @returns The stats card SVG object.
  */
-const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) => {
-    const { name, totalStars, totalCommits, totalIssues, totalPRs, totalPRsMerged, mergedPRsPercentage, totalReviews, totalDiscussionsStarted, totalDiscussionsAnswered, contributedTo, allTimeContributedTo, totalPRsAuthored, totalPRsCommented, totalPRsReviewed, totalIssuesAuthored, totalIssuesCommented, totalContributions, rank, } = stats;
-    const { hide = [], show_icons = false, hide_title = false, hide_border = false, card_width, hide_rank = false, include_all_commits = false, commits_year, line_height = 25, text_bold = true, custom_title, border_radius, number_format = 'short', number_precision, locale, disable_animations = false, rank_icon = 'default', show = [], } = options;
+const renderCard = (stats, options = {}, username, repo = [], owner = []) => {
+    const { name, totalStars, totalCommits, commitsRange, totalIssues, totalPRs, totalPRsMerged, mergedPRsPercentage, totalReviews, totalDiscussionsStarted, totalDiscussionsAnswered, contributedTo, allTimeContributedTo, totalPRsAuthored, totalPRsCommented, totalPRsReviewed, totalIssuesAuthored, totalIssuesCommented, totalContributions, rank, } = stats;
+    const { hide = [], show_icons = false, hide_title = false, hide_border = false, card_width, hide_rank = false, include_all_commits = false, line_height = 25, text_bold = true, custom_title, border_radius, number_format = 'short', number_precision, locale, disable_animations = false, rank_icon = 'default', show = [], } = options;
     const lheight = Number.parseInt(String(line_height), 10);
     const { lightColors, darkColors } = getLightDarkColors(options);
+    // Typed against the exported list, so a stat drawn here cannot be missing from it.
+    const shows = (stat) => show.includes(stat);
     const apostrophe = /s$/i.test(name.trim()) ? '' : 's';
     const i18n = new I18n({
         locale,
@@ -157,7 +176,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             id: 'stars',
         },
     };
-    if (show.includes('contributions')) {
+    if (shows('contributions')) {
         STATS['contributions'] = {
             icon: icons.contributions,
             label: i18n.t('statcard.contributions'),
@@ -167,7 +186,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
     }
     STATS['commits'] = {
         icon: icons.commits,
-        label: `${i18n.t('statcard.commits')}${getTotalCommitsYearLabel(include_all_commits, commits_year, i18n)}`,
+        label: `${i18n.t('statcard.commits')}${getTotalCommitsRangeLabel(include_all_commits, commitsRange, i18n)}`,
         value: totalCommits,
         id: 'commits',
     };
@@ -177,7 +196,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         value: totalPRs,
         id: 'prs',
     };
-    if (show.includes('prs_merged')) {
+    if (shows('prs_merged')) {
         STATS['prs_merged'] = {
             icon: icons.prs_merged,
             label: i18n.t('statcard.prs-merged'),
@@ -185,7 +204,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             id: 'prs_merged',
         };
     }
-    if (show.includes('prs_merged_percentage')) {
+    if (shows('prs_merged_percentage')) {
         STATS['prs_merged_percentage'] = {
             icon: icons.prs_merged_percentage,
             label: i18n.t('statcard.prs-merged-percentage'),
@@ -196,7 +215,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             unitSymbol: '%',
         };
     }
-    if (show.includes('reviews')) {
+    if (shows('reviews')) {
         STATS['reviews'] = {
             icon: icons.reviews,
             label: i18n.t('statcard.reviews'),
@@ -210,7 +229,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         value: totalIssues,
         id: 'issues',
     };
-    if (show.includes('discussions_started')) {
+    if (shows('discussions_started')) {
         STATS['discussions_started'] = {
             icon: icons.discussions_started,
             label: i18n.t('statcard.discussions-started'),
@@ -218,7 +237,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             id: 'discussions_started',
         };
     }
-    if (show.includes('discussions_answered')) {
+    if (shows('discussions_answered')) {
         STATS['discussions_answered'] = {
             icon: icons.discussions_answered,
             label: i18n.t('statcard.discussions-answered'),
@@ -228,7 +247,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
     }
     const repoFilter = encodeURIComponent(buildSearchFilter(repo, owner));
     const encodedUsername = encodeURIComponent(username ?? '');
-    if (show.includes('prs_authored')) {
+    if (shows('prs_authored')) {
         STATS['prs_authored'] = {
             icon: icons.prs,
             label: i18n.t('statcard.prs-authored'),
@@ -237,7 +256,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&type=pullrequests`,
         };
     }
-    if (show.includes('prs_commented')) {
+    if (shows('prs_commented')) {
         STATS['prs_commented'] = {
             icon: icons.comments,
             label: i18n.t('statcard.prs-commented'),
@@ -246,7 +265,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&type=pullrequests`,
         };
     }
-    if (show.includes('prs_reviewed')) {
+    if (shows('prs_reviewed')) {
         STATS['prs_reviewed'] = {
             icon: icons.reviews,
             label: i18n.t('statcard.prs-reviewed'),
@@ -255,7 +274,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${encodedUsername}+-author%3A${encodedUsername}&type=pullrequests`,
         };
     }
-    if (show.includes('issues_authored')) {
+    if (shows('issues_authored')) {
         STATS['issues_authored'] = {
             icon: icons.issues,
             label: i18n.t('statcard.issues-authored'),
@@ -264,7 +283,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&type=issues`,
         };
     }
-    if (show.includes('issues_commented')) {
+    if (shows('issues_commented')) {
         STATS['issues_commented'] = {
             icon: icons.discussions_started,
             label: i18n.t('statcard.issues-commented'),
@@ -274,14 +293,14 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         };
     }
     STATS['contribs'] = {
-        icon: icons.contribs,
+        icon: icons.repo,
         label: i18n.t('statcard.contribs'),
         value: contributedTo,
         id: 'contribs',
     };
-    if (show.includes('all_time_contribs')) {
+    if (shows('all_time_contribs')) {
         STATS['all_time_contribs'] = {
-            icon: icons.contribs,
+            icon: icons.repo,
             label: i18n.t('statcard.all-time-contribs'),
             value: allTimeContributedTo,
             id: 'all_time_contribs',
@@ -304,27 +323,21 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
     const progress = 100 - rank.percentile;
     const calculateTextWidth = () => measureText(custom_title ||
         (visibleStats.length > 0 ? i18n.t('statcard.title') : i18n.t('statcard.ranktitle')));
-    /*
-      When hide_rank=true, the minimum card width is 270 px + the title length and padding.
-      When hide_rank=false, the minimum card_width is 340 px + the icon width (if show_icons=true).
-      Numbers are picked by looking at existing dimensions on production.
-    */
     const iconWidth = show_icons && visibleStats.length > 0 ? 16 + /* padding */ 1 : 0;
-    const minCardWidth = (hide_rank
-        ? clampValue(50 /* padding */ + calculateTextWidth() * 2, CARD_MIN_WIDTH, Infinity)
-        : visibleStats.length > 0
-            ? RANK_CARD_MIN_WIDTH
-            : RANK_ONLY_CARD_MIN_WIDTH) + iconWidth;
-    const defaultCardWidth = (hide_rank
+    // The icons ride inside the step's own slack, so a default card lands on the width grid;
+    // only the minimum, which has no slack, still has to make room for them.
+    const defaultCardWidth = hide_rank
         ? CARD_DEFAULT_WIDTH
         : visibleStats.length > 0
             ? RANK_CARD_DEFAULT_WIDTH
-            : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth;
-    const width = card_width
-        ? Number.isNaN(card_width)
-            ? Math.max(defaultCardWidth, minCardWidth)
-            : card_width
-        : Math.max(defaultCardWidth, minCardWidth);
+            : RANK_ONLY_CARD_DEFAULT_WIDTH;
+    // Only a card sized by its own title can outgrow its step: the ranked layouts are fixed,
+    // so their step is also their floor.
+    const fittedWidth = hide_rank
+        ? Math.max(defaultCardWidth, clampValue(50 /* padding */ + calculateTextWidth() * 2, CARD_MIN_WIDTH, Infinity) +
+            iconWidth)
+        : defaultCardWidth;
+    const width = card_width ? (Number.isNaN(card_width) ? fittedWidth : card_width) : fittedWidth;
     // A value ends at the card's inner edge, clear of the rank ring — or right after
     // the longest label, on a card too narrow for that.
     const widestLabel = visibleStats.length > 0
@@ -351,6 +364,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
     const card = new Card({
         customTitle: custom_title,
         defaultTitle: visibleStats.length > 0 ? i18n.t('statcard.title') : i18n.t('statcard.ranktitle'),
+        titlePrefixIcon: CARD_ICON.stats,
         width,
         height,
         border_radius,
@@ -364,43 +378,31 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         card.disableAnimations();
     }
     /**
-     * Calculates the right rank circle translation values such that the rank circle
-     * keeps respecting the following padding:
-     *
-     * width > RANK_CARD_DEFAULT_WIDTH: The default right padding of 70 px will be used.
-     * width < RANK_CARD_DEFAULT_WIDTH: The left and right padding will be enlarged
-     *   equally from a certain minimum at RANK_CARD_MIN_WIDTH.
+     * The ring sits centred in the same gutter the values are kept clear of, so the gap
+     * between them holds at every width; a rank-only card has no values, so it centres.
      *
      * @returns Rank circle translation value.
      */
-    const calculateRankXTranslation = () => {
-        if (visibleStats.length > 0) {
-            const minXTranslation = RANK_CARD_MIN_WIDTH + iconWidth - 70;
-            if (width > RANK_CARD_DEFAULT_WIDTH) {
-                const xMaxExpansion = minXTranslation + (450 - minCardWidth) / 2;
-                return xMaxExpansion + width - RANK_CARD_DEFAULT_WIDTH;
-            }
-            return minXTranslation + (width - minCardWidth) / 2;
-        }
-        return width / 2 + 20 - 10;
-    };
+    const calculateRankXTranslation = () => visibleStats.length > 0
+        ? width - CARD_PADDING_X - RANK_GUTTER / 2 + RANK_CIRCLE_CX_OFFSET
+        : width / 2 + 20 - 10;
     // Conditionally rendered elements
     const rankCircle = !hide_rank &&
         el('g', {
             'data-testid': 'rank-circle',
             transform: `translate(${calculateRankXTranslation()}, ${height / 2 - 50})`,
-        }, el('circle', { class: 'rank-circle-rim', cx: -10, cy: 8, r: 40 }), el('circle', { class: 'rank-circle', cx: -10, cy: 8, r: 40 }), el('g', { class: 'rank-text' }, rankIcon(rank_icon, rank.level, rank.percentile)));
+        }, el('circle', { class: 'rank-circle-rim', cx: -RANK_CIRCLE_CX_OFFSET, cy: 8, r: 40 }), el('circle', { class: 'rank-circle', cx: -RANK_CIRCLE_CX_OFFSET, cy: 8, r: 40 }), el('g', { class: 'rank-text' }, rankIcon(rank_icon, rank.level, rank.percentile)));
     // Accessibility Labels
     const labels = visibleStats
         .map(([key, stat]) => {
         if (key === 'commits') {
-            return `${i18n.t('statcard.commits')} ${getTotalCommitsYearLabel(include_all_commits, commits_year, i18n)} : ${stat.value}`;
+            return `${i18n.t('statcard.commits')} ${getTotalCommitsRangeLabel(include_all_commits, commitsRange, i18n)} : ${stat.value}`;
         }
         return `${stat.label}: ${stat.value}`;
     })
         .join(', ');
     card.setAccessibilityLabel({
-        title: `${card.title}, Rank: ${rank.level}`,
+        title: `${card.title}, ${i18n.t('statcard.rank')}: ${rank.level}`,
         desc: labels,
     });
     return card.render([
@@ -408,4 +410,17 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         el('svg', { x: 0, y: 0 }, flexLayout({ items: statItems, gap: lheight, direction: 'column' })),
     ]);
 };
-export { RANK_ICONS, renderStatsCard };
+/**
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * They ride on the renderer so a list cannot be found without what draws it;
+ * the api handler forwards them onto its own export, which is what a UI reads.
+ */
+const renderStatsCard = Object.assign(renderCard, {
+    OPTIONS: {
+        rank_icon: RANK_ICONS,
+        show: SHOW_STATS,
+        hide: HIDE_STATS,
+        number_format: NUMBER_FORMATS,
+    },
+});
+export { renderStatsCard };

package/build/cards/top-languages.d.ts

@@ -122,6 +122,17 @@ declare const getDefaultLanguagesCountByLayout: ({ layout, hide_progress, }: {
  *
  * @returns Language card SVG object.
  */
-declare const renderTopLanguages: (topLangs: TopLangData, options?: CardOptions<TopLangOptions>) => string;
-export { getLongestLang, degreesToRadians, radiansToDegrees, polarToCartesian, cartesianToPolar, getCircleLength, calculateCompactLayoutHeight, calculateNormalLayoutHeight, calculateDonutLayoutHeight, calculateDonutVerticalLayoutHeight, calculatePieLayoutHeight, donutCenterTranslation, trimTopLanguages, renderTopLanguages, MIN_CARD_WIDTH, getDefaultLanguagesCountByLayout, TOP_LANG_LAYOUTS, TOP_LANG_STATS_FORMATS, };
+declare const renderCard: (topLangs: TopLangData, options?: CardOptions<TopLangOptions>) => string;
+/**
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * They ride on the renderer so a list cannot be found without what draws it;
+ * the api handler forwards them onto its own export, which is what a UI reads.
+ */
+declare const renderTopLanguages: typeof renderCard & {
+    OPTIONS: {
+        layout: readonly ["compact", "normal", "donut", "donut-vertical", "pie"];
+        stats_format: readonly ["percentages", "bytes"];
+    };
+};
+export { getLongestLang, degreesToRadians, radiansToDegrees, polarToCartesian, cartesianToPolar, getCircleLength, calculateCompactLayoutHeight, calculateNormalLayoutHeight, calculateDonutLayoutHeight, calculateDonutVerticalLayoutHeight, calculatePieLayoutHeight, donutCenterTranslation, trimTopLanguages, MIN_CARD_WIDTH, getDefaultLanguagesCountByLayout, renderTopLanguages, };
 //# sourceMappingURL=top-languages.d.ts.map

package/build/cards/top-languages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-languages.d.ts","sourceRoot":"","sources":["../../src/cards/top-languages.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"top-languages.d.ts","sourceRoot":"","sources":["../../src/cards/top-languages.ts"],"names":[],"mappings":"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"}

package/build/cards/top-languages.js

@@ -1,3 +1,4 @@
+import { CARD_ICON, CARD_WIDTH, FONT_WEIGHT, firefoxFontSize, font } from '../common/brand.js';
 import { Card } from '../common/Card.js';
 import { getLightDarkColors, isPrefixedHexColor } from '../common/color.js';
 import { formatBytes } from '../common/fmt.js';
@@ -5,9 +6,9 @@ import { I18n } from '../common/I18n.js';
 import { DEFAULT_LANG_COLOR } from '../common/languageColors.js';
 import { chunkArray, clampValue, lowercaseTrim } from '../common/ops.js';
 import { createProgressNode, flexLayout, measureText } from '../common/render.js';
-import { atRule, cssComment, el, rule } from '../markup/index.js';
+import { atRule, el, rule } from '../markup/index.js';
 import { langCardLocales } from '../translations.js';
-const DEFAULT_CARD_WIDTH = 300;
+const DEFAULT_CARD_WIDTH = CARD_WIDTH.compact;
 const MIN_CARD_WIDTH = 280;
 const CARD_PADDING = 25;
 const COMPACT_LAYOUT_BASE_HEIGHT = 90;
@@ -15,6 +16,8 @@ const MAXIMUM_LANGS_COUNT = 20;
 const NORMAL_LAYOUT_DEFAULT_LANGS_COUNT = 5;
 const COMPACT_LAYOUT_DEFAULT_LANGS_COUNT = 6;
 const DONUT_LAYOUT_DEFAULT_LANGS_COUNT = 5;
+/** Room for the chart that sits beside the language list. */
+const DONUT_EXTRA_WIDTH = 50;
 const PIE_LAYOUT_DEFAULT_LANGS_COUNT = 6;
 const DONUT_VERTICAL_LAYOUT_DEFAULT_LANGS_COUNT = 6;
 /** Layouts the card can draw; the api validates `layout` against this. */
@@ -499,7 +502,7 @@ const getDefaultLanguagesCountByLayout = ({ layout, hide_progress, }) => {
  *
  * @returns Language card SVG object.
  */
-const renderTopLanguages = (topLangs, options = {}) => {
+const renderCard = (topLangs, options = {}) => {
     const { hide_title = false, hide_border = false, card_width, hide, hide_progress, hide_values, layout, custom_title, locale, langs_count = getDefaultLanguagesCountByLayout({ layout, hide_progress }), border_radius, disable_animations, stats_format = 'percentages', } = options;
     const i18n = new I18n({
         locale,
@@ -537,7 +540,9 @@ const renderTopLanguages = (topLangs, options = {}) => {
     }
     else if (layout === 'donut') {
         height = calculateDonutLayoutHeight(langs.length);
-        width += 50; // padding
+        // A donut defaults a step wider so the chart has its room; a width asked for
+        // explicitly keeps the extra it has always been given instead of being snapped.
+        width = width === DEFAULT_CARD_WIDTH ? CARD_WIDTH.standard : width + DONUT_EXTRA_WIDTH;
         finalLayout = renderDonutLayout(langs, width, totalLanguageSize, stats_format, hide_values);
     }
     else {
@@ -546,6 +551,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     const card = new Card({
         customTitle: custom_title,
         defaultTitle: i18n.t('langcard.title'),
+        titlePrefixIcon: CARD_ICON.topLanguages,
         width,
         height,
         border_radius,
@@ -564,12 +570,12 @@ const renderTopLanguages = (topLangs, options = {}) => {
             rule('to', { width: 'calc(100%-100px)' })),
             atRule('@keyframes growWidthAnimation', rule('from', { width: 0 }), rule('to', { width: '100%' })),
             rule('.stat', {
-                font: `600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif`,
+                font: font('regular', 'body'),
                 fill: textColor,
             }),
-            atRule('@supports(-moz-appearance: auto)', cssComment('Selector detects Firefox'), rule('.stat', { 'font-size': '12px' })),
-            rule('.bold', { 'font-weight': 700 }),
-            rule('.lang-name', { font: '400 11px "Segoe UI", Ubuntu, Sans-Serif', fill: textColor }),
+            firefoxFontSize(['.stat'], 'small'),
+            rule('.bold', { 'font-weight': FONT_WEIGHT.semibold }),
+            rule('.lang-name', { font: font('regular', 'micro'), fill: textColor }),
             rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
             rule('#rect-mask rect', { animation: 'slideInAnimation 1s ease-in-out forwards' }),
             rule('.lang-progress', { animation: 'growWidthAnimation 0.6s ease-in-out forwards' }),
@@ -594,4 +600,15 @@ const renderTopLanguages = (topLangs, options = {}) => {
     }
     return card.render(el('svg', { 'data-testid': 'lang-items', x: CARD_PADDING }, finalLayout));
 };
-export { getLongestLang, degreesToRadians, radiansToDegrees, polarToCartesian, cartesianToPolar, getCircleLength, calculateCompactLayoutHeight, calculateNormalLayoutHeight, calculateDonutLayoutHeight, calculateDonutVerticalLayoutHeight, calculatePieLayoutHeight, donutCenterTranslation, trimTopLanguages, renderTopLanguages, MIN_CARD_WIDTH, getDefaultLanguagesCountByLayout, TOP_LANG_LAYOUTS, TOP_LANG_STATS_FORMATS, };
+/**
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * They ride on the renderer so a list cannot be found without what draws it;
+ * the api handler forwards them onto its own export, which is what a UI reads.
+ */
+const renderTopLanguages = Object.assign(renderCard, {
+    OPTIONS: {
+        layout: TOP_LANG_LAYOUTS,
+        stats_format: TOP_LANG_STATS_FORMATS,
+    },
+});
+export { getLongestLang, degreesToRadians, radiansToDegrees, polarToCartesian, cartesianToPolar, getCircleLength, calculateCompactLayoutHeight, calculateNormalLayoutHeight, calculateDonutLayoutHeight, calculateDonutVerticalLayoutHeight, calculatePieLayoutHeight, donutCenterTranslation, trimTopLanguages, MIN_CARD_WIDTH, getDefaultLanguagesCountByLayout, renderTopLanguages, };

package/build/cards/wakatime.d.ts

@@ -24,6 +24,17 @@ interface WakaTimeOptions extends CommonCardOptions {
  *
  * @returns WakaTime card SVG.
  */
-declare const renderWakatimeCard: (stats?: Partial<WakaTimeData>, options?: CardOptions<WakaTimeOptions>) => string;
-export { DISPLAY_FORMATS, WAKATIME_LAYOUTS, renderWakatimeCard };
+declare const renderCard: (stats?: Partial<WakaTimeData>, options?: CardOptions<WakaTimeOptions>) => string;
+/**
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * They ride on the renderer so a list cannot be found without what draws it;
+ * the api handler forwards them onto its own export, which is what a UI reads.
+ */
+declare const renderWakatimeCard: typeof renderCard & {
+    OPTIONS: {
+        layout: readonly ["compact", "normal"];
+        display_format: readonly ["time", "percent"];
+    };
+};
+export { renderWakatimeCard };
 //# sourceMappingURL=wakatime.d.ts.map

package/build/cards/wakatime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wakatime.d.ts","sourceRoot":"","sources":["../../src/cards/wakatime.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,sBAAsB,CAAC;AAKvE,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAWnE,0EAA0E;AAC1E,QAAA,MAAM,gBAAgB,YAAI,SAAS,EAAE,QAAQ,CAAU,CAAC;AACxD,KAAK,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,yFAAyF;AACzF,QAAA,MAAM,eAAe,YAAI,MAAM,EAAE,SAAS,CAAU,CAAC;AACrD,KAAK,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,UAAU,eAAgB,SAAQ,iBAAiB;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,aAAa,CAAC;IAC9B,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAoND;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,WACf,OAAO,CAAC,YAAY,CAAC,YACnB,WAAW,CAAC,eAAe,CAAC,KACpC,MAgNF,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"wakatime.d.ts","sourceRoot":"","sources":["../../src/cards/wakatime.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,sBAAsB,CAAC;AAKvE,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAWnE,0EAA0E;AAC1E,QAAA,MAAM,gBAAgB,YAAI,SAAS,EAAE,QAAQ,CAAU,CAAC;AACxD,KAAK,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,yFAAyF;AACzF,QAAA,MAAM,eAAe,YAAI,MAAM,EAAE,SAAS,CAAU,CAAC;AACrD,KAAK,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,UAAU,eAAgB,SAAQ,iBAAiB;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,aAAa,CAAC;IAC9B,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAgND;;;;GAIG;AACH,QAAA,MAAM,UAAU,WACP,OAAO,CAAC,YAAY,CAAC,YACnB,WAAW,CAAC,eAAe,CAAC,KACpC,MAiNF,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,kBAAkB;;QAEpB,MAAM;QACN,cAAc;;CAEhB,CAAC;AAEH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/build/cards/wakatime.js

@@ -1,12 +1,13 @@
+import { CARD_ICON, CARD_WIDTH, FONT_WEIGHT, firefoxFontSize, font } from '../common/brand.js';
 import { Card } from '../common/Card.js';
 import { getLightDarkColors, isPrefixedHexColor } from '../common/color.js';
 import { I18n } from '../common/I18n.js';
 import { getLanguageColor } from '../common/languageColors.js';
 import { clampValue, lowercaseTrim } from '../common/ops.js';
 import { createProgressNode, flexLayout } from '../common/render.js';
-import { atRule, cssComment, el, rule } from '../markup/index.js';
+import { atRule, el, rule } from '../markup/index.js';
 import { wakatimeCardLocales } from '../translations.js';
-const DEFAULT_CARD_WIDTH = 495;
+const DEFAULT_CARD_WIDTH = CARD_WIDTH.wide;
 const MIN_CARD_WIDTH = 250;
 const COMPACT_LAYOUT_MIN_WIDTH = 400;
 const DEFAULT_LINE_HEIGHT = 25;
@@ -118,13 +119,13 @@ const getStyles = ({ textColor }) => {
     }
     return [
         rule('.stat', {
-            font: `600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif`,
+            font: font('regular', 'body'),
             fill: textColor,
         }),
-        atRule('@supports(-moz-appearance: auto)', cssComment('Selector detects Firefox'), rule('.stat', { 'font-size': '12px' })),
+        firefoxFontSize(['.stat'], 'small'),
         rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
-        rule('.not_bold', { 'font-weight': 400 }),
-        rule('.bold', { 'font-weight': 700 }),
+        rule('.not_bold', { 'font-weight': FONT_WEIGHT.regular }),
+        rule('.bold', { 'font-weight': FONT_WEIGHT.semibold }),
     ];
 };
 /** A bar the same color as the text behind it would be invisible, so it goes transparent. */
@@ -145,7 +146,7 @@ const normalizeCardWidth = ({ value, layout, }) => {
  *
  * @returns WakaTime card SVG.
  */
-const renderWakatimeCard = (stats = {}, options = {}) => {
+const renderCard = (stats = {}, options = {}) => {
     let { languages = [] } = stats;
     const { hide_title = false, hide_border = false, card_width, hide, line_height = DEFAULT_LINE_HEIGHT, hide_progress, custom_title, locale, layout, langs_count = languages.length, border_radius, display_format = 'time', disable_animations, } = options;
     const normalizedWidth = normalizeCardWidth({ value: card_width, layout });
@@ -261,6 +262,7 @@ const renderWakatimeCard = (stats = {}, options = {}) => {
     const card = new Card({
         customTitle: custom_title,
         defaultTitle: titleText,
+        titlePrefixIcon: CARD_ICON.wakatime,
         width: normalizedWidth,
         height,
         border_radius,
@@ -279,7 +281,7 @@ const renderWakatimeCard = (stats = {}, options = {}) => {
             // declaration and animate to the rect's own width, which is the reveal the mask wants.
             rule('to', { width: 'calc(100%-100px)' })),
             atRule('@keyframes growWidthAnimation', rule('from', { width: 0 }), rule('to', { width: '100%' })),
-            rule('.lang-name', { font: "400 11px 'Segoe UI', Ubuntu, Sans-Serif", fill: textColor }),
+            rule('.lang-name', { font: font('regular', 'micro'), fill: textColor }),
             rule('#rect-mask rect', { animation: 'slideInAnimation 1s ease-in-out forwards' }),
             rule('.lang-progress', {
                 animation: 'growWidthAnimation 0.6s ease-in-out forwards',
@@ -306,4 +308,15 @@ const renderWakatimeCard = (stats = {}, options = {}) => {
     });
     return card.render(el('svg', { x: 0, y: 0, width: '100%' }, finalLayout));
 };
-export { DISPLAY_FORMATS, WAKATIME_LAYOUTS, renderWakatimeCard };
+/**
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * They ride on the renderer so a list cannot be found without what draws it;
+ * the api handler forwards them onto its own export, which is what a UI reads.
+ */
+const renderWakatimeCard = Object.assign(renderCard, {
+    OPTIONS: {
+        layout: WAKATIME_LAYOUTS,
+        display_format: DISPLAY_FORMATS,
+    },
+});
+export { renderWakatimeCard };

package/build/common/Card.d.ts

@@ -59,6 +59,15 @@ declare class Card {
     setTitle(text: string): void;
     /** @returns The rendered card title. */
     renderTitle(): MarkupElement;
+    /** Where the body starts, and so where the title band ends. */
+    private get bodyOffset();
+    /**
+     * The band behind the title. Its top corners follow the card's own and its bottom
+     * ones stay square, so it meets the body as an edge rather than a floating box.
+     *
+     * @returns The rendered title band.
+     */
+    private renderTitleBand;
     /** @returns The card's gradient definitions, or nothing when no color is a gradient. */
     renderGradient(): Child;
     /**

package/build/common/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/common/Card.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C;;GAEG;AACH,KAAK,cAAc,GAAG,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC;AA2C9D,cAAM,IAAI;IACR,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;KAAE,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,KAAK,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,YAAY,EACV,KAAW,EACX,MAAY,EACZ,aAAiB,EACjB,MAAiD,EACjD,WAAW,EACX,YAAiB,EACjB,eAAe,GAChB,EAAE;QACD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAEhB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,MAAM,CAAC,EAAE;YAAE,KAAK,EAAE,UAAU,CAAC;YAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;SAAE,CAAC;QACxD,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QACjC,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,KAAK,CAAC;KACzB,EAqBA;IAED,iBAAiB,IAAI,IAAI,CAExB;IAED,qBAAqB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAG5E;IAED;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,IAAI,CAG7E;IAED,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAElC;IAED,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAQjC;IAED,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAE3B;IAED,wCAAwC;IACxC,WAAW,IAAI,aAAa,CA4B3B;IAED,wFAAwF;IACxF,cAAc,IAAI,KAAK,CAwBtB;IAED;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkB5B,kCAAkC;IAClC,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CA2E1B;CACF;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/common/Card.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C;;GAEG;AACH,KAAK,cAAc,GAAG,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC;AA2C9D,cAAM,IAAI;IACR,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;KAAE,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,KAAK,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,YAAY,EACV,KAAW,EACX,MAAY,EACZ,aAAiB,EACjB,MAAiD,EACjD,WAAW,EACX,YAAiB,EACjB,eAAe,GAChB,EAAE;QACD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAEhB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,MAAM,CAAC,EAAE;YAAE,KAAK,EAAE,UAAU,CAAC;YAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;SAAE,CAAC;QACxD,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QACjC,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,KAAK,CAAC;KACzB,EAqBA;IAED,iBAAiB,IAAI,IAAI,CAExB;IAED,qBAAqB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAG5E;IAED;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,IAAI,CAG7E;IAED,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAElC;IAED,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAQjC;IAED,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAE3B;IAED,wCAAwC;IACxC,WAAW,IAAI,aAAa,CAqC3B;IAED,+DAA+D;IAC/D,OAAO,KAAK,UAAU,GAErB;IAED;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAYvB,wFAAwF;IACxF,cAAc,IAAI,KAAK,CAwBtB;IAED;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAqB5B,kCAAkC;IAClC,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAoF1B;CACF;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}