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

package/src/fetchers/top-languages.ts

@@ -1,30 +1,23 @@
-import type { CardConfig } from '../common/config.js';
-import { CardError, USER_NOT_FOUND } from '../common/error.js';
-import { wrapTextMultiline } from '../common/fmt.js';
-import { createGraphQLFetcher } from '../common/http.js';
-import { logger } from '../common/log.js';
-import { parseOwnerAffiliations } from '../common/ops.js';
-import { retryer } from '../common/retryer.js';
-import { TopLanguagesDocument } from '../graphql/generated/top-languages.js';
+import type { CardConfig } from '../common/config.ts';
+import { CardError, USER_NOT_FOUND } from '../common/error.ts';
+import { createGraphQLFetcher } from '../common/http.ts';
+import { logger } from '../common/log.ts';
+import { parseOwnerAffiliations } from '../common/ops.ts';
+import { wrapTextMultiline } from '../common/render.ts';
+import { retryer } from '../common/retryer.ts';
+import { TopLanguagesDocument } from '../graphql/generated/top-languages.ts';
 import type {
   TopLanguageFragment,
   TopLanguagesRepositoryFragment,
-} from '../graphql/generated/top-languages.js';
+} from '../graphql/generated/top-languages.ts';
 
-import type { Lang, TopLangData } from './types.js';
+import type { Lang, TopLangData } from './types.ts';
 
 const fetcher = createGraphQLFetcher(TopLanguagesDocument, 'token');
 
 /**
  * Fetch top languages for a given username.
  *
- * @param props Fetcher props.
- * @param props.username GitHub username.
- * @param props.exclude_repo List of repositories to exclude. Default: [].
- * @param props.size_weight Weightage to be given to size.
- * @param props.count_weight Weightage to be given to count.
- * @param props.ownerAffiliations The owner affiliations to filter by. Default: OWNER.
- * @param config Deployment config supplying the PAT pool.
  * @returns Top languages data.
  */
 const fetchTopLanguages = async (
@@ -59,7 +52,7 @@ const fetchTopLanguages = async (
 
   if (res.data.errors) {
     logger.error(res.data.errors);
-    const firstError = res.data.errors[0];
+    const [firstError] = res.data.errors;
     if (firstError?.type === 'NOT_FOUND') {
       throw new CardError(firstError.message || 'Could not fetch user.', {
         code: 'not_found',
@@ -82,53 +75,46 @@ const fetchTopLanguages = async (
   const allExcludedRepos = [...exclude_repo, ...config.excludeRepositories];
 
   // populate repoToHide map for quick lookup while filtering out
-  allExcludedRepos.forEach((repoName) => {
+  for (const repoName of allExcludedRepos) {
     repoToHide[repoName] = true;
-  });
+  }
 
   // filter out repositories to be hidden
   const repoNodes = (res.data.data.user?.repositories.nodes ?? []).filter(
     (node): node is TopLanguagesRepositoryFragment => !!node && !repoToHide[node.name],
   );
 
-  // flatten edges across repos. Order matters: `concat(acc)` prepends, and the
-  // shared repoCount below depends on visitation order.
-  const languageEdges = repoNodes.reduce<Array<TopLanguageFragment>>((acc, repo) => {
+  let languageEdges: Array<TopLanguageFragment> = [];
+  for (const repo of repoNodes) {
     const edges = (repo.languages?.edges ?? []).filter(
       (edge): edge is TopLanguageFragment => !!edge,
     );
-    return edges.length > 0 ? edges.concat(acc) : acc;
-  }, []);
+    if (edges.length > 0) {
+      languageEdges = [...edges, ...languageEdges];
+    }
+  }
 
-  // accumulate size and repo count per language
+  // accumulate size and repo count per language, each read back off the language's own entry
   const languageMap: Record<string, Lang> = {};
-  let repoCount = 0;
   for (const edge of languageEdges) {
     const existing = languageMap[edge.node.name];
-
-    // same language seen again: add to its size and bump count; else reset to 1
-    let langSize = edge.size;
-    if (existing && edge.node.name === existing.name) {
-      langSize = edge.size + existing.size;
-      repoCount += 1;
-    } else {
-      repoCount = 1;
-    }
     languageMap[edge.node.name] = {
       name: edge.node.name,
       color: edge.node.color,
-      size: langSize,
-      count: repoCount,
+      size: edge.size + (existing?.size ?? 0),
+      count: (existing?.count ?? 0) + 1,
     };
   }
 
   // comparison index calculation
   for (const lang of Object.values(languageMap)) {
-    lang.size = Math.pow(lang.size, size_weight) * Math.pow(lang.count, count_weight);
+    lang.size = lang.size ** size_weight * lang.count ** count_weight;
   }
 
   // return languages sorted by (weighted) size, descending
-  return Object.fromEntries(Object.entries(languageMap).sort(([, a], [, b]) => b.size - a.size));
+  return Object.fromEntries(
+    Object.entries(languageMap).toSorted(([, a], [, b]) => b.size - a.size),
+  );
 };
 
 export { fetchTopLanguages };

package/src/fetchers/types.ts

@@ -1,4 +1,4 @@
-import type { RepoInfoFragment } from '../graphql/generated/repo.js';
+import type { RepoInfoFragment } from '../graphql/generated/repo.ts';
 
 export interface GistData {
   name: string;

package/src/fetchers/wakatime.ts

@@ -1,18 +1,14 @@
-import type { CardConfig } from '../common/config.js';
-import { CardError, WAKATIME_USER_NOT_FOUND } from '../common/error.js';
-import { httpRequest } from '../common/http.js';
+import type { CardConfig } from '../common/config.ts';
+import { CardError, WAKATIME_USER_NOT_FOUND } from '../common/error.ts';
+import { httpRequest } from '../common/http.ts';
 
-import type { WakaTimeData } from './types.js';
+import type { WakaTimeData } from './types.ts';
 
 /**
  * WakaTime data fetcher.
  *
  * WakaTime needs no GitHub token; the config is here for the transport it carries.
  *
- * @param props Fetcher props.
- * @param props.username WakaTime username.
- * @param props.api_domain Optional WakaTime API domain (defaults to `wakatime.com`).
- * @param config Deployment config supplying the transport.
  * @returns WakaTime data response.
  */
 const fetchWakatimeStats = async (
@@ -29,7 +25,7 @@ const fetchWakatimeStats = async (
     throw CardError.missingParam(['username']);
   }
 
-  const domain = api_domain ? api_domain.replace(/\/$/gi, '') : 'wakatime.com';
+  const domain = api_domain ? api_domain.replaceAll(/\/$/gi, '') : 'wakatime.com';
   const res = await httpRequest<{ data: WakaTimeData }>(
     config.fetch,
     `https://${domain}/api/v1/users/${username}/stats?is_including_today=true`,

package/src/graphql/contributionsDocument.ts

@@ -1,7 +1,8 @@
-import { getGitHubYearRange, toGitHubDateTime } from '../common/date.js';
+import { getGitHubYearRange, toGitHubDateTime } from '../common/date.ts';
 
-import type { YearContributionsFragment } from './generated/stats.js';
-import { graphqlDocument } from './graphqlDocument.js';
+import type { YearContributionsFragment } from './generated/stats.ts';
+import type { GraphQLDocument } from './graphqlDocument.ts';
+import { graphqlDocument } from './graphqlDocument.ts';
 
 interface ContributionsQueryVariables {
   login: string;
@@ -15,10 +16,11 @@ interface ContributionsQuery {
  * Build the all-time contributions query, one aliased `contributionsCollection` field per year.
  * The shape is only known at runtime.
  *
- * @param years Contribution years, one `year_<year>` alias each.
  * @returns Document for `createGraphQLFetcher`.
  */
-const buildContributionsDocument = (years: Array<number>) => {
+const buildContributionsDocument = (
+  years: Array<number>,
+): GraphQLDocument<ContributionsQuery, ContributionsQueryVariables> => {
   const yearFields = years
     .map((year) => {
       const { from, to } = getGitHubYearRange(year);

package/src/graphql/generated/gist.ts

@@ -2,7 +2,7 @@
 
 /** Internal type. DO NOT USE DIRECTLY. */
 type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
-import { graphqlDocument } from '../graphqlDocument.js';
+import { graphqlDocument } from '../graphqlDocument.ts';
 export type GistFileInfoFragment = {
   name: string | null;
   size: number | null;

package/src/graphql/generated/repo.ts

@@ -2,7 +2,7 @@
 
 /** Internal type. DO NOT USE DIRECTLY. */
 type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
-import { graphqlDocument } from '../graphqlDocument.js';
+import { graphqlDocument } from '../graphqlDocument.ts';
 export type RepoInfoFragment = {
   name: string;
   nameWithOwner: string;

package/src/graphql/generated/stats.ts

@@ -2,9 +2,9 @@
 
 /** Internal type. DO NOT USE DIRECTLY. */
 type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
-import { graphqlDocument } from '../graphqlDocument.js';
+import { graphqlDocument } from '../graphqlDocument.ts';
 
-import type * as Types from './common.js';
+import type * as Types from './common.ts';
 export type RepoNodeFragment = { name: string; stargazerCount: number };
 
 export type RepoStarsFragment = {

package/src/graphql/generated/top-languages.ts

@@ -2,9 +2,9 @@
 
 /** Internal type. DO NOT USE DIRECTLY. */
 type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
-import { graphqlDocument } from '../graphqlDocument.js';
+import { graphqlDocument } from '../graphqlDocument.ts';
 
-import type * as Types from './common.js';
+import type * as Types from './common.ts';
 export type TopLanguageFragment = { size: number; node: { color: string | null; name: string } };
 
 export type TopLanguagesRepositoryFragment = {

package/src/graphql/graphqlDocument.ts

@@ -14,7 +14,6 @@ interface GraphQLDocument<TResult, TVariables> {
 /**
  * Build a typed document.
  *
- * @param text The query text, including every fragment it spreads.
  * @returns The document to pass to the function created by `createGraphQLFetcher`.
  */
 const graphqlDocument = <TResult, TVariables>(

package/src/graphql/reposContributedToDocument.ts

@@ -1,8 +1,9 @@
-import type { GitHubDateRange } from '../common/date.js';
-import { toGitHubDateTime } from '../common/date.js';
+import type { GitHubDateRange } from '../common/date.ts';
+import { toGitHubDateTime } from '../common/date.ts';
 
-import type { RangeContributionsByRepoFragment } from './generated/stats.js';
-import { graphqlDocument } from './graphqlDocument.js';
+import type { RangeContributionsByRepoFragment } from './generated/stats.ts';
+import type { GraphQLDocument } from './graphqlDocument.ts';
+import { graphqlDocument } from './graphqlDocument.ts';
 
 /** max value GitHub allows for `first/maxRepositories` */
 const MAX_REPOSITORIES_LIMIT = 100;
@@ -24,14 +25,12 @@ interface ReposContributedToQuery {
  * Mirrors the `contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]`
  * filter used by `repositoriesContributedTo` in `stats.graphql`.
  *
- * @param ranges Ranges to fetch, one `range_<index>` alias each.
- * @param includeOwnRepos Whether to select `repositoryContributions`.
  * @returns Document for `createGraphQLFetcher`.
  */
 const buildReposContributedToDocument = (
   ranges: Array<GitHubDateRange>,
   includeOwnRepos: boolean,
-) => {
+): GraphQLDocument<ReposContributedToQuery, ReposContributedToQueryVariables> => {
   const rangeFields = ranges
     .map(
       ({ from, to }, index) =>

package/src/markup/css.ts

@@ -0,0 +1,118 @@
+import type { Sink } from './serialize.ts';
+import { INDENT, indentAt } from './serialize.ts';
+
+/** Every CSS property a card declares, closed so a typo is a compile error, not a dropped rule. */
+type CssProperty =
+  | '-webkit-box-orient'
+  | '-webkit-line-clamp'
+  | 'animation'
+  | 'animation-delay'
+  | 'animation-duration'
+  | 'color'
+  | 'display'
+  | 'fill'
+  | 'font'
+  | 'font-size'
+  | 'font-variant-numeric'
+  | 'font-weight'
+  | 'line-clamp'
+  | 'line-height'
+  | 'margin'
+  | 'opacity'
+  | 'overflow'
+  | 'overflow-wrap'
+  | 'padding-bottom'
+  | 'stroke'
+  | 'stroke-dasharray'
+  | 'stroke-dashoffset'
+  | 'stroke-linecap'
+  | 'stroke-width'
+  | 'text-overflow'
+  | 'transform'
+  | 'transform-origin'
+  | 'width'
+  | 'word-break';
+
+/** A declaration whose value is `undefined` is left out, so a caller can inline a condition. */
+type Declarations = Partial<Record<CssProperty, string | number | undefined>>;
+
+type CssNode =
+  | { readonly kind: 'rule'; readonly selector: string; readonly declarations: Declarations }
+  | { readonly kind: 'at'; readonly prelude: string; readonly children: Array<CssChild> }
+  | { readonly kind: 'comment'; readonly text: string };
+
+/** Anything accepted where CSS is expected; falsy entries drop out, arrays flatten. */
+type CssChild = CssNode | false | null | undefined | Array<CssChild>;
+
+/**
+ * Selectors stay free-form: they compose (`.badge rect`), and a keyframe stop is one too (`from`).
+ */
+const rule = (selector: string, declarations: Declarations): CssNode => ({
+  kind: 'rule',
+  selector,
+  declarations,
+});
+
+const atRule = (prelude: string, ...children: Array<CssChild>): CssNode => ({
+  kind: 'at',
+  prelude,
+  children,
+});
+
+const cssComment = (text: string): CssNode => ({ kind: 'comment', text });
+
+/** Drops the rules that carry nothing and flattens the arrays. */
+const flatten = (children: Array<CssChild>, into: Array<CssNode> = []): Array<CssNode> => {
+  for (const child of children) {
+    if (!child) {
+      continue;
+    }
+    if (Array.isArray(child)) {
+      flatten(child, into);
+    } else {
+      into.push(child);
+    }
+  }
+  return into;
+};
+
+/**
+ * Serializes a stylesheet, dropping every rule that would have come out empty.
+ *
+ * A block is written optimistically and rewound if its body turns out empty,
+ * so the tree is walked once however deeply the at-rules nest.
+ */
+const writeCss = (children: Array<CssChild>, depth: number, sink: Sink): void => {
+  const indent = indentAt(depth);
+
+  for (const node of flatten(children)) {
+    if (node.kind === 'comment') {
+      sink.out += `${indent}/* ${node.text} */\n`;
+      continue;
+    }
+
+    const mark = sink.out.length;
+
+    if (node.kind === 'at') {
+      sink.out += `${indent}${node.prelude} {\n`;
+      const bodyStart = sink.out.length;
+      writeCss(node.children, depth + 1, sink);
+      sink.out =
+        sink.out.length === bodyStart ? sink.out.slice(0, mark) : `${sink.out}${indent}}\n`;
+      continue;
+    }
+
+    sink.out += `${indent}${node.selector} {\n`;
+    const bodyStart = sink.out.length;
+    for (const property of Object.keys(node.declarations) as Array<CssProperty>) {
+      const value = node.declarations[property];
+      if (value !== undefined) {
+        sink.out += `${indent}${INDENT}${property}: ${String(value)};\n`;
+      }
+    }
+    sink.out = sink.out.length === bodyStart ? sink.out.slice(0, mark) : `${sink.out}${indent}}\n`;
+  }
+};
+
+export { atRule, cssComment, rule, writeCss };
+export type { CssChild, Declarations };

package/src/markup/element.ts

@@ -0,0 +1,246 @@
+import type { CssChild } from './css.ts';
+import { writeCss } from './css.ts';
+import { encodeHTML } from './html.ts';
+import type { Sink } from './serialize.ts';
+import { indentAt } from './serialize.ts';
+
+/**
+ * Every element a card draws, closed so `el('circel', …)` is a compile error.
+ * `style` is absent on purpose: it comes from `style()`, which takes rules rather than children.
+ */
+type Tag =
+  | 'a'
+  | 'circle'
+  | 'defs'
+  | 'desc'
+  | 'div'
+  | 'foreignObject'
+  | 'g'
+  | 'linearGradient'
+  | 'mask'
+  | 'path'
+  | 'rect'
+  | 'stop'
+  | 'svg'
+  | 'text'
+  | 'title'
+  | 'tspan';
+
+/**
+ * Every attribute a card writes, closed like `Tag`:
+ * a misspelled `stroke-width` would otherwise be valid TypeScript and invisible in the output.
+ */
+type Attribute =
+  | 'alignment-baseline'
+  | 'aria-hidden'
+  | 'aria-labelledby'
+  | 'class'
+  | 'cx'
+  | 'cy'
+  | 'd'
+  | 'data-testid'
+  | 'data-view-component'
+  | 'dominant-baseline'
+  | 'dy'
+  | 'fill'
+  | 'fill-rule'
+  | 'gradientTransform'
+  | 'gradientUnits'
+  | 'height'
+  | 'href'
+  | 'id'
+  | 'mask'
+  | 'offset'
+  | 'r'
+  | 'role'
+  | 'rx'
+  | 'ry'
+  | 'size'
+  | 'stop-color'
+  | 'stroke'
+  | 'stroke-dasharray'
+  | 'stroke-dashoffset'
+  | 'stroke-linecap'
+  | 'stroke-opacity'
+  | 'stroke-width'
+  | 'style'
+  | 'text-anchor'
+  | 'transform'
+  | 'version'
+  | 'viewBox'
+  | 'width'
+  | 'x'
+  | 'xmlns'
+  | 'y';
+
+/** An attribute whose value is `undefined` is not written, so a caller can inline a condition. */
+type Attributes = Partial<Record<Attribute, string | number | undefined>>;
+
+/** Elements whose character data is part of the rendering, so they stay on one line. */
+const INLINE_ELEMENTS: ReadonlySet<Tag> = new Set(['text', 'tspan', 'title', 'desc', 'div']);
+
+interface MarkupElement {
+  readonly tag: Tag;
+  readonly attributes: Attributes;
+  readonly children: Array<Child>;
+}
+
+interface StyleElement {
+  readonly tag: 'style';
+  readonly rules: Array<CssChild>;
+}
+
+/** Anything accepted as content; falsy entries drop out, arrays flatten, strings are escaped. */
+type Child =
+  | MarkupElement
+  | StyleElement
+  | string
+  | number
+  | false
+  | null
+  | undefined
+  | Array<Child>;
+
+/** What is left of a child list once the empty entries and the nesting are gone. */
+type FlatChild = MarkupElement | StyleElement | string | number;
+
+/**
+ * Builds one element. Attribute values and text children are encoded on the way out.
+ */
+const el = (tag: Tag, attributes: Attributes = {}, ...children: Array<Child>): MarkupElement => ({
+  tag,
+  attributes,
+  children,
+});
+
+/**
+ * Builds the `<style>` element from a stylesheet rather than from text.
+ */
+const style = (...rules: Array<CssChild>): StyleElement => ({ tag: 'style', rules });
+
+const isStyle = (child: MarkupElement | StyleElement): child is StyleElement => 'rules' in child;
+
+/** Drops the children that carry nothing and flattens the arrays. */
+const flatten = (children: Array<Child>, into: Array<FlatChild> = []): Array<FlatChild> => {
+  for (const child of children) {
+    if (child === false || child === null || child === undefined || child === '') {
+      continue;
+    }
+    if (Array.isArray(child)) {
+      flatten(child, into);
+    } else {
+      into.push(child);
+    }
+  }
+  return into;
+};
+
+const openTag = (node: MarkupElement, selfClosing: boolean): string => {
+  let tag = `<${node.tag}`;
+  const { attributes } = node;
+
+  // `Object.keys` widens to `string`, so the cast restores what the type already says.
+  for (const name of Object.keys(attributes) as Array<Attribute>) {
+    const value = attributes[name];
+    if (value !== undefined) {
+      // A number can hold nothing that needs escaping, so it skips the scan.
+      tag += typeof value === 'number' ? ` ${name}="${value}"` : ` ${name}="${encodeHTML(value)}"`;
+    }
+  }
+
+  return `${tag}${selfClosing ? ' />' : '>'}`;
+};
+
+/** Serializes an element and its descendants onto one line, whitespace and all. */
+const writeInline = (node: FlatChild): string => {
+  if (typeof node === 'string') {
+    return encodeHTML(node);
+  }
+  if (typeof node === 'number') {
+    return String(node);
+  }
+  if (isStyle(node)) {
+    return '';
+  }
+
+  const children = flatten(node.children);
+  if (children.length === 0) {
+    return openTag(node, true);
+  }
+
+  let inner = '';
+  for (const child of children) {
+    inner += writeInline(child);
+  }
+  return `${openTag(node, false)}${inner}</${node.tag}>`;
+};
+
+/**
+ * A container is written optimistically and rewound if its content turns out empty,
+ * so an element that draws nothing costs one walk rather than two.
+ */
+const write = (node: FlatChild, depth: number, sink: Sink): void => {
+  const indent = indentAt(depth);
+
+  if (typeof node === 'string') {
+    sink.out += `${indent}${encodeHTML(node)}\n`;
+    return;
+  }
+  if (typeof node === 'number') {
+    sink.out += `${indent}${node}\n`;
+    return;
+  }
+
+  const mark = sink.out.length;
+
+  if (isStyle(node)) {
+    sink.out += `${indent}<style>\n`;
+    const bodyStart = sink.out.length;
+    writeCss(node.rules, depth + 1, sink);
+    sink.out =
+      sink.out.length === bodyStart ? sink.out.slice(0, mark) : `${sink.out}${indent}</style>\n`;
+    return;
+  }
+
+  const children = flatten(node.children);
+  if (children.length === 0) {
+    sink.out += `${indent}${openTag(node, true)}\n`;
+    return;
+  }
+
+  if (INLINE_ELEMENTS.has(node.tag)) {
+    let inner = '';
+    for (const child of children) {
+      inner += writeInline(child);
+    }
+    sink.out +=
+      inner === ''
+        ? `${indent}${openTag(node, true)}\n`
+        : `${indent}${openTag(node, false)}${inner}</${node.tag}>\n`;
+    return;
+  }
+
+  sink.out += `${indent}${openTag(node, false)}\n`;
+  const bodyStart = sink.out.length;
+  for (const child of children) {
+    write(child, depth + 1, sink);
+  }
+  sink.out =
+    sink.out.length === bodyStart
+      ? `${sink.out.slice(0, mark)}${indent}${openTag(node, true)}\n`
+      : `${sink.out}${indent}</${node.tag}>\n`;
+};
+
+/**
+ * Serializes a finished card: one element per line, two spaces per nesting level.
+ *
+ * @returns The rendered SVG.
+ */
+const renderMarkup = (root: MarkupElement): string => {
+  const sink: Sink = { out: '' };
+  write(root, 0, sink);
+  return sink.out;
+};
+
+export { el, renderMarkup, style };
+export type { Child, MarkupElement };

package/src/markup/html.ts

@@ -0,0 +1,34 @@
+/**
+ * What has to be encoded: the markup characters, everything above plain ASCII, and a backspace.
+ * One source for both regexes, so the check and the replacement cannot disagree.
+ */
+const ENCODED = String.raw`[<>&"'\u00A0-\u9999\u0008]`;
+
+/** Non-global, so `.test` stays stateless: a global regex would carry `lastIndex`. */
+const NEEDS_ENCODING = new RegExp(ENCODED);
+const TO_ENCODE = new RegExp(ENCODED, 'g');
+
+const BACKSPACE = '\u0008';
+
+/**
+ * Encodes a string for use as markup, one numeric character reference each.
+ *
+ * The serializer is now the only place text becomes markup, so nothing arrives pre-escaped:
+ * a literal `&#38;` is encoded like any other `&` rather than passed through as a reference.
+ *
+ * @see https://stackoverflow.com/a/48073476/10629172
+ *
+ * @returns The text, safe to place in an attribute or as character data.
+ */
+const encodeHTML = (str: string): string => {
+  // Most strings a card writes are plain ASCII, so they leave without a rewrite.
+  if (!NEEDS_ENCODING.test(str)) {
+    return str;
+  }
+
+  return str.replace(TO_ENCODE, (char) =>
+    char === BACKSPACE ? '' : `&#${char.codePointAt(0) ?? 0};`,
+  );
+};
+
+export { encodeHTML };

package/src/markup/index.ts

@@ -0,0 +1,9 @@
+/**
+ * The markup layer: a card is built as a tree of elements and rules, then serialized once.
+ * It depends on nothing else in the package, so it sits below `cards/`, not inside `common/`.
+ */
+
+export { atRule, cssComment, rule } from './css.ts';
+export type { CssChild, Declarations } from './css.ts';
+export { el, renderMarkup, style } from './element.ts';
+export type { Child, MarkupElement } from './element.ts';