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

package/build/cards/wakatime.d.ts

@@ -1,10 +1,10 @@
-import type { WakaTimeData } from '../fetchers/types.js';
-import type { CardOptions, CommonCardOptions } from './options.js';
+import type { WakaTimeData } from '../fetchers/types.ts';
+import type { CardOptions, CommonCardOptions } from './options.ts';
 /** Layouts the card can draw; the api validates `layout` against this. */
-declare const WAKATIME_LAYOUTS: readonly ["compact", "normal"];
+declare const WAKATIME_LAYOUTS: readonly ['compact', 'normal'];
 type WakaTimeLayout = (typeof WAKATIME_LAYOUTS)[number];
 /** How a language's time is written; the api validates `display_format` against this. */
-declare const DISPLAY_FORMATS: readonly ["time", "percent"];
+declare const DISPLAY_FORMATS: readonly ['time', 'percent'];
 type DisplayFormat = (typeof DISPLAY_FORMATS)[number];
 interface WakaTimeOptions extends CommonCardOptions {
     locale: string;
@@ -22,10 +22,19 @@ interface WakaTimeOptions extends CommonCardOptions {
 /**
  * Renders WakaTime card.
  *
- * @param stats WakaTime stats.
- * @param options Card options.
  * @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":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,sBAAsB,CAAC;AAGvE,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAWnE,0EAA0E;AAC1E,QAAA,MAAM,gBAAgB,gCAAiC,CAAC;AACxD,KAAK,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,yFAAyF;AACzF,QAAA,MAAM,eAAe,8BAA+B,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;AA4OD;;;;;;GAMG;AACH,QAAA,MAAM,kBAAkB,GACtB,QAAO,OAAO,CAAC,YAAY,CAAM,EACjC,UAAS,WAAW,CAAC,eAAe,CAAgB,KACnD,MAmNF,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 { encodeHTML } from '../common/html.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, 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;
@@ -21,62 +22,34 @@ const DISPLAY_FORMATS = ['time', 'percent'];
 /**
  * Creates the no coding activity SVG node.
  *
- * @param props The function properties.
- * @param props.text No coding activity translated text.
  * @returns No coding activity SVG node string.
  */
-const noCodingActivityNode = ({ text }) => {
-    return `
-    <text x="25" y="11" class="stat bold">${encodeHTML(text)}</text>
-  `;
-};
+const noCodingActivityNode = ({ text }) => el('text', { x: 25, y: 11, class: 'stat bold' }, text);
 /**
  * Format language value.
  *
- * @param args The function arguments.
- * @param args.lang The language object.
- * @param args.display_format The display format of the language node.
  * @returns The formatted language value.
  */
-const formatLanguageValue = ({ display_format, lang, }) => {
-    return display_format === 'percent' ? `${lang.percent.toFixed(2)} %` : lang.text;
-};
+const formatLanguageValue = ({ display_format, lang, }) => (display_format === 'percent' ? `${lang.percent.toFixed(2)} %` : lang.text);
 /**
  * Create compact WakaTime layout.
  *
- * @param args The function arguments.
- * @param args.lang The languages array.
- * @param args.x The x position of the language node.
- * @param args.y The y position of the language node.
- * @param args.display_format The display format of the language node.
  * @returns The compact layout language SVG node.
  */
 const createCompactLangNode = ({ lang, x, y, display_format, }) => {
     if (!Number.isFinite(x)) {
-        throw new Error(`Invalid x: "${x}"`);
+        throw new TypeError(`Invalid x: "${x}"`);
     }
     if (!Number.isFinite(y)) {
-        throw new Error(`Invalid y: "${y}"`);
+        throw new TypeError(`Invalid y: "${y}"`);
     }
     const color = getLanguageColor(lang.name);
     const value = formatLanguageValue({ display_format, lang });
-    return `
-    <g transform="translate(${x}, ${y})">
-      <circle cx="5" cy="6" r="5" fill="${color}" />
-      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${encodeHTML(lang.name)} - ${encodeHTML(value)}
-      </text>
-    </g>
-  `;
+    return el('g', { transform: `translate(${x}, ${y})` }, el('circle', { cx: 5, cy: 6, r: 5, fill: color }), el('text', { 'data-testid': 'lang-name', x: 15, y: 10, class: 'lang-name' }, `${lang.name} - ${value}`));
 };
 /**
  * Create WakaTime language text node item.
  *
- * @param args The function arguments.
- * @param args.langs The language objects.
- * @param args.y The y position of the language node.
- * @param args.display_format The display format of the language node.
- * @param args.card_width Width in px of the card.
  * @returns The language text node items.
  */
 const createLanguageTextNode = ({ langs, y, display_format, card_width, }) => {
@@ -97,95 +70,73 @@ const createLanguageTextNode = ({ langs, y, display_format, card_width, }) => {
 /**
  * Create WakaTime text item.
  *
- * @param args The function arguments.
- * @param args.id The id of the text node item.
- * @param args.label The label of the text node item.
- * @param args.value The value of the text node item.
- * @param args.index The index of the text node item.
- * @param args.percent Percentage of the text node item.
- * @param args.hideProgress Whether to hide the progress bar.
- * @param args.progressBarWidth The width of the progress bar.
  * @returns The text SVG node.
  */
 const createTextNode = ({ id, label, value, index, percent, hideProgress, progressBarWidth, }) => {
     if (!Number.isFinite(index)) {
-        throw new Error(`Invalid index: "${index}"`);
+        throw new TypeError(`Invalid index: "${index}"`);
     }
     if (!Number.isFinite(progressBarWidth)) {
-        throw new Error(`Invalid progressBarWidth: "${progressBarWidth}"`);
+        throw new TypeError(`Invalid progressBarWidth: "${progressBarWidth}"`);
     }
     const staggerDelay = (index + 3) * 150;
-    const cardProgress = hideProgress
-        ? null
-        : createProgressNode({
+    return el('g', {
+        class: 'stagger',
+        style: `animation-delay: ${staggerDelay}ms`,
+        transform: 'translate(25, 0)',
+    }, el('text', { class: 'stat bold', y: 12.5, 'data-testid': id }, `${label}:`), el('text', {
+        class: 'stat',
+        x: hideProgress ? HIDDEN_PROGRESSBAR_PADDING : PROGRESSBAR_PADDING + progressBarWidth,
+        y: 12.5,
+    }, value), !hideProgress &&
+        createProgressNode({
             x: 110,
             y: 4,
             progress: percent,
             width: progressBarWidth,
             delay: staggerDelay + 300,
-        });
-    return `
-    <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
-      <text class="stat bold" y="12.5" data-testid="${encodeHTML(id)}">${encodeHTML(label)}:</text>
-      <text
-        class="stat"
-        x="${hideProgress ? HIDDEN_PROGRESSBAR_PADDING : PROGRESSBAR_PADDING + progressBarWidth}"
-        y="12.5"
-      >${encodeHTML(value)}</text>
-      ${String(cardProgress)}
-    </g>
-  `;
+        }));
 };
 /**
  * Recalculating percentages so that, compact layout's progress bar does not break when
  * hiding languages.
- *
- * @param languages The languages array.
  */
 const recalculatePercentages = (languages) => {
-    const totalSum = languages.reduce((totalSum, language) => totalSum + language.percent, 0);
-    const weight = +(100 / totalSum).toFixed(2);
-    languages.forEach((language) => {
-        language.percent = +(language.percent * weight).toFixed(2);
-    });
+    const totalSum = languages.reduce((sum, language) => sum + language.percent, 0);
+    const weight = Number((100 / totalSum).toFixed(2));
+    for (const language of languages) {
+        language.percent = Number((language.percent * weight).toFixed(2));
+    }
 };
 /**
  * Retrieves CSS styles for a card.
  *
- * @param colors The colors to use for the card.
- * @param colors.textColor The text color.
  * @returns Card CSS styles.
  */
 const getStyles = ({ textColor }) => {
     if (!isPrefixedHexColor(textColor)) {
         throw new Error(`Invalid text color: "${textColor}"`);
     }
-    return `
-    .stat {
-      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
-    }
-    @supports(-moz-appearance: auto) {
-      /* Selector detects Firefox */
-      .stat { font-size:12px; }
-    }
-    .stagger {
-      opacity: 0;
-      animation: fadeInAnimation 0.3s ease-in-out forwards;
-    }
-    .not_bold { font-weight: 400 }
-    .bold { font-weight: 700 }
-  `;
+    return [
+        rule('.stat', {
+            font: font('regular', 'body'),
+            fill: textColor,
+        }),
+        firefoxFontSize(['.stat'], 'small'),
+        rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
+        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. */
+const progressBackground = (titleColor, textColor) => textColor === titleColor ? '#fff0' : textColor;
 /**
  * Normalize incoming width (string or number) and clamp to minimum.
  *
- * @param args The function arguments.
- * @param args.layout The incoming layout value.
- * @param args.value The incoming width value.
  * @returns The normalized width value.
  */
 const normalizeCardWidth = ({ value, layout, }) => {
-    if (value === undefined || isNaN(value)) {
+    if (value === undefined || Number.isNaN(value)) {
         return DEFAULT_CARD_WIDTH;
     }
     return Math.max(layout === 'compact' ? COMPACT_LAYOUT_MIN_WIDTH : MIN_CARD_WIDTH, value);
@@ -193,11 +144,9 @@ const normalizeCardWidth = ({ value, layout, }) => {
 /**
  * Renders WakaTime card.
  *
- * @param stats WakaTime stats.
- * @param options Card options.
  * @returns WakaTime card SVG.
  */
-const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
+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 });
@@ -214,14 +163,13 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
         locale,
         translations: wakatimeCardLocales,
     });
-    const lheight = parseInt(String(line_height), 10);
+    const lheight = Number.parseInt(String(line_height), 10);
     const langsCount = clampValue(langs_count, 1, langs_count);
     const { lightColors, darkColors } = getLightDarkColors(options);
     const filteredLanguages = languages
         .filter((language) => language.hours || language.minutes)
         .slice(0, langsCount);
-    // Calculate the card height depending on how many items there are
-    // but if rank circle is visible clamp the minimum height to `150`
+    // A short language list would otherwise draw a stub card, so 150 is the floor.
     let height = Math.max(45 + (filteredLanguages.length + 1) * lheight, 150);
     let finalLayout;
     // RENDER COMPACT LAYOUT
@@ -231,60 +179,58 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
         // progressOffset holds the previous language's width and used to offset the next language
         // so that we can stack them one after another, like this: [--][----][---]
         let progressOffset = 0;
-        const compactProgressBar = filteredLanguages
-            .map((language) => {
+        const compactProgressBar = filteredLanguages.map((language) => {
             const progress = ((width - COMPACT_LAYOUT_PROGRESSBAR_PADDING) * language.percent) / 100;
-            const languageColor = getLanguageColor(language.name);
-            const output = `
-          <rect
-            mask="url(#rect-mask)"
-            data-testid="lang-progress"
-            x="${progressOffset}"
-            y="0"
-            width="${progress}"
-            height="8"
-            fill="${languageColor}"
-          />
-        `;
+            const x = progressOffset;
             progressOffset += progress;
-            return output;
-        })
-            .join('');
-        finalLayout = `
-      <mask id="rect-mask">
-      <rect x="${COMPACT_LAYOUT_PROGRESSBAR_PADDING}" y="0" width="${width - 2 * COMPACT_LAYOUT_PROGRESSBAR_PADDING}" height="8" fill="white" rx="5" />
-      </mask>
-      ${compactProgressBar}
-      ${filteredLanguages.length
-            ? createLanguageTextNode({
-                y: 25,
-                langs: filteredLanguages,
-                display_format,
-                card_width: normalizedWidth,
-            }).join('')
-            : noCodingActivityNode({
-                text: stats.is_coding_activity_visible
-                    ? stats.is_other_usage_visible
-                        ? i18n.t('wakatimecard.nocodingactivity')
-                        : i18n.t('wakatimecard.nocodedetails')
-                    : i18n.t('wakatimecard.notpublic'),
-            })}
-    `;
+            return el('rect', {
+                mask: 'url(#rect-mask)',
+                'data-testid': 'lang-progress',
+                x,
+                y: 0,
+                width: progress,
+                height: 8,
+                fill: getLanguageColor(language.name),
+            });
+        });
+        finalLayout = [
+            el('mask', { id: 'rect-mask' }, el('rect', {
+                x: COMPACT_LAYOUT_PROGRESSBAR_PADDING,
+                y: 0,
+                width: width - 2 * COMPACT_LAYOUT_PROGRESSBAR_PADDING,
+                height: 8,
+                fill: 'white',
+                rx: 5,
+            })),
+            compactProgressBar,
+            filteredLanguages.length > 0
+                ? createLanguageTextNode({
+                    y: 25,
+                    langs: filteredLanguages,
+                    display_format,
+                    card_width: normalizedWidth,
+                })
+                : noCodingActivityNode({
+                    text: stats.is_coding_activity_visible
+                        ? stats.is_other_usage_visible
+                            ? i18n.t('wakatimecard.nocodingactivity')
+                            : i18n.t('wakatimecard.nocodedetails')
+                        : i18n.t('wakatimecard.notpublic'),
+                }),
+        ];
     }
     else {
         finalLayout = flexLayout({
-            items: filteredLanguages.length
-                ? filteredLanguages.map((language, index) => {
-                    return createTextNode({
-                        id: language.name,
-                        label: language.name,
-                        value: formatLanguageValue({ display_format, lang: language }),
-                        index,
-                        percent: language.percent,
-                        hideProgress: hide_progress,
-                        progressBarWidth: normalizedWidth - TOTAL_TEXT_WIDTH,
-                    });
-                })
+            items: filteredLanguages.length > 0
+                ? filteredLanguages.map((language, index) => createTextNode({
+                    id: language.name,
+                    label: language.name,
+                    value: formatLanguageValue({ display_format, lang: language }),
+                    index,
+                    percent: language.percent,
+                    hideProgress: hide_progress,
+                    progressBarWidth: normalizedWidth - TOTAL_TEXT_WIDTH,
+                }))
                 : [
                     noCodingActivityNode({
                         text: stats.is_coding_activity_visible
@@ -296,21 +242,27 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
                 ],
             gap: lheight,
             direction: 'column',
-        }).join('');
+        });
     }
     // Get title range text
     let titleText = i18n.t('wakatimecard.title');
     switch (stats.range) {
-        case 'last_7_days':
+        case 'last_7_days': {
             titleText += ` (${i18n.t('wakatimecard.last7days')})`;
             break;
-        case 'last_year':
+        }
+        case 'last_year': {
             titleText += ` (${i18n.t('wakatimecard.lastyear')})`;
             break;
+        }
+        default: {
+            break;
+        }
     }
     const card = new Card({
         customTitle: custom_title,
         defaultTitle: titleText,
+        titlePrefixIcon: CARD_ICON.wakatime,
         width: normalizedWidth,
         height,
         border_radius,
@@ -322,55 +274,49 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     card.setHideBorder(hide_border);
     card.setHideTitle(hide_title);
     card.setCSS({
-        light: ({ titleColor, textColor }) => `
-    ${getStyles({ textColor })}
-    @keyframes slideInAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: calc(100%-100px);
-      }
-    }
-    @keyframes growWidthAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: 100%;
-      }
-    }
-    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-    #rect-mask rect{
-      animation: slideInAnimation 1s ease-in-out forwards;
-    }
-    .lang-progress{
-      animation: growWidthAnimation 0.6s ease-in-out forwards;
-      fill: ${titleColor};
-    }
-    .progress-background { fill: ${textColor === titleColor ? '#fff0' /* transparent */ : textColor}; }
-    `,
-        dark: ({ titleColor, textColor }) => `
-      ${getStyles({ textColor })}
-      .lang-name { fill: ${textColor} }
-      .lang-progress { fill: ${titleColor}; }
-      .progress-background { fill: ${textColor === titleColor ? '#fff0' /* transparent */ : textColor}; }
-    `,
+        light: ({ titleColor, textColor }) => [
+            getStyles({ textColor }),
+            atRule('@keyframes slideInAnimation', rule('from', { width: 0 }), 
+            // Invalid on purpose — `calc` needs spaces around its `-`. Browsers drop the
+            // 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: 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',
+                fill: titleColor,
+            }),
+            rule('.progress-background', { fill: progressBackground(titleColor, textColor) }),
+        ],
+        dark: ({ titleColor, textColor }) => [
+            getStyles({ textColor }),
+            rule('.lang-name', { fill: textColor }),
+            rule('.lang-progress', { fill: titleColor }),
+            rule('.progress-background', { fill: progressBackground(titleColor, textColor) }),
+        ],
     });
     // `role="img"` hides the inner text from assistive tech, so everything the card
     // shows has to be repeated here.
     card.setAccessibilityLabel({
         title: card.title,
-        desc: filteredLanguages.length
+        desc: filteredLanguages.length > 0
             ? filteredLanguages
                 .map((lang) => `${lang.name}: ${formatLanguageValue({ display_format, lang })}`)
                 .join(', ')
             : i18n.t('wakatimecard.nocodingactivity'),
     });
-    return card.render(`
-    <svg x="0" y="0" width="100%">
-      ${finalLayout}
-    </svg>
-  `);
+    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

@@ -1,8 +1,9 @@
-import type { CardColors } from './color.js';
+import type { Child, CssChild, MarkupElement } from '../markup/index.ts';
+import type { CardColors } from './color.ts';
 /**
  * Builds the card CSS for one color scheme from that scheme's resolved colors.
  */
-type CardCSSBuilder = (colors: CardColors) => string;
+type CardCSSBuilder = (colors: CardColors) => Array<CssChild>;
 declare class Card {
     width: number;
     height: number;
@@ -14,29 +15,16 @@ declare class Card {
         dark: CardColors | null;
     };
     title: string;
-    css: string;
-    darkCss: string;
+    css: Array<CssChild>;
+    darkCss: Array<CssChild>;
     paddingX: number;
     paddingY: number;
-    titlePrefixIcon: string | undefined;
+    titlePrefixIcon: Child;
     animations: boolean;
     a11yTitle: string;
     a11yDesc: string;
     /**
      * Creates a new card instance.
-     *
-     * The caller must ensure that the passed `titlePrefixIcon` is properly sanitized!
-     *
-     * @param props Card arguments.
-     * @param props.width Card width.
-     * @param props.height Card height.
-     * @param props.border_radius Card border radius.
-     * @param props.colors Card colors for light and dark mode.
-     * @param props.colors.light Card colors for light mode.
-     * @param props.colors.dark Card colors for dark mode, or `null` when no dark-mode override is needed.
-     * @param props.customTitle Card custom title.
-     * @param props.defaultTitle Card default title.
-     * @param props.titlePrefixIcon Sanitized card title prefix icon.
      */
     constructor({ width, height, border_radius, colors, customTitle, defaultTitle, titlePrefixIcon, }: {
         width?: number;
@@ -48,14 +36,9 @@ declare class Card {
         };
         customTitle?: string | undefined;
         defaultTitle?: string;
-        titlePrefixIcon?: string;
+        titlePrefixIcon?: Child;
     });
     disableAnimations(): void;
-    /**
-     * @param props The props object.
-     * @param props.title Accessibility title.
-     * @param props.desc Accessibility description.
-     */
     setAccessibilityLabel({ title, desc }: {
         title: string;
         desc: string;
@@ -66,56 +49,34 @@ declare class Card {
      * Each builder receives the colors of its own color scheme,
      * so a card never handles a missing dark palette itself:
      * `dark` runs only when the card has dark colors, and always with non-null ones.
-     *
-     * @warning The caller must ensure that the returned CSS strings are properly sanitized!
-     *
-     * @param props The props object.
-     * @param props.light Builds the CSS applied unconditionally (light/default mode).
-     * @param props.dark Builds the CSS placed inside a `@media (prefers-color-scheme: dark)` block.
      */
     setCSS({ light, dark }: {
         light: CardCSSBuilder;
         dark: CardCSSBuilder;
     }): void;
-    /**
-     * @param value Whether to hide the border or not.
-     */
     setHideBorder(value: boolean): void;
-    /**
-     * @param value Whether to hide the title or not.
-     */
     setHideTitle(value: boolean): void;
-    /**
-     * @param text The title to set.
-     */
     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();
     /**
-     * @returns The rendered card title.
-     */
-    renderTitle(): string;
-    /**
-     * @returns The rendered card gradient.
-     */
-    renderGradient(): string;
-    /**
-     * Retrieves css animations for a card.
+     * 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 Animation css.
+     * @returns The rendered title band.
      */
-    getAnimations: () => string;
+    private renderTitleBand;
+    /** @returns The card's gradient definitions, or nothing when no color is a gradient. */
+    renderGradient(): Child;
     /**
      * Builds the @media (prefers-color-scheme: dark) CSS block for the card.
-     * Returns an empty string when no dark colors are set.
+     * Returns nothing when no dark colors are set.
      */
     private renderDarkMediaBlock;
-    /**
-     * The caller must ensure that the passed `body` string is properly sanitized!
-     *
-     * @param body The sanitized inner body of the card.
-     * @returns The rendered card.
-     */
-    render(body: string): string;
+    /** @returns The rendered card. */
+    render(body: Child): string;
 }
 export { Card };
-export default Card;
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/common/Card.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C;;GAEG;AACH,KAAK,cAAc,GAAG,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAC;AAErD,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,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;OAeG;gBACS,EACV,KAAW,EACX,MAAY,EACZ,aAAmB,EACnB,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,MAAM,CAAC;KAC1B;IAuBD,iBAAiB,IAAI,IAAI;IAIzB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAK7E;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,IAAI;IAK9E;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAInC;;OAEG;IACH,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAUlC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI5B;;OAEG;IACH,WAAW,IAAI,MAAM;IAoCrB;;OAEG;IACH,cAAc,IAAI,MAAM;IAwCxB;;;;OAIG;IACH,aAAa,QAAO,MAAM,CAoBxB;IAEF;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkB5B;;;;;OAKG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;CAiF7B;AAED,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,eAAe,IAAI,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"}