@hed-hog/core 0.0.400 → 0.0.401

package/src/oauth/providers/microsoft-entra-id.provider.ts

@@ -77,6 +77,19 @@ export class MicrosoftEntraIdProvider extends BaseOAuthProvider {
     };
   }
 
+  /**
+   * Escopos que a Microsoft devolveu no token, ou `null` quando ela não
+   * informou — só nesse caso vale cair de volta para os escopos pedidos.
+   * Uma lista vazia é resposta legítima e não pode virar "assume o pedido".
+   */
+  private parseGrantedScopes(scope: unknown): string[] | null {
+    if (typeof scope !== 'string') return null;
+    return scope
+      .split(/[\s,]+/)
+      .map((item) => item.trim())
+      .filter(Boolean);
+  }
+
   /** Absolute redirect URI the web flow registers/exchanges against (the API). */
   private buildApiRedirectUri(apiUrl: string) {
     if (!String(apiUrl).trim()) {
@@ -155,8 +168,22 @@ export class MicrosoftEntraIdProvider extends BaseOAuthProvider {
         'https://graph.microsoft.com/v1.0/me',
       );
 
+      // `token.scope` é o que a Microsoft de fato consentiu, que pode ser MENOS
+      // do que a setting pede — consentimento antigo do usuário, ou escopo novo
+      // ainda sem aprovação do admin. Gravar a setting como se fosse o concedido
+      // faz o refresh seguinte pedir escopo que o grant não cobre, e aí a
+      // resposta é `invalid_grant`: a UI diz "reconecte a conta", e reconectar
+      // pelo login regrava a mesma setting, então nunca sai do lugar.
+      const grantedScopes = this.parseGrantedScopes(token.scope) ?? scopes;
+      // A Microsoft não repete `offline_access` em `token.scope`, mas ter
+      // devolvido um refresh token é prova de que foi concedido.
+      if (token.refresh_token && !grantedScopes.includes('offline_access')) {
+        grantedScopes.push('offline_access');
+      }
+      const missing = scopes.filter((scope) => !grantedScopes.includes(scope));
+
       this.logger.log(
-        `OAuth profile fetched: provider=MICROSOFT-ENTRA-ID type=${type} profileIdPresent=${profile?.id ? 'yes' : 'no'} emailPresent=${profile?.mail || profile?.userPrincipalName ? 'yes' : 'no'}`,
+        `OAuth profile fetched: provider=MICROSOFT-ENTRA-ID type=${type} profileIdPresent=${profile?.id ? 'yes' : 'no'} emailPresent=${profile?.mail || profile?.userPrincipalName ? 'yes' : 'no'} scopesGranted=${grantedScopes.length}/${scopes.length}${missing.length ? ` missing=${missing.join(' ')}` : ''}`,
       );
 
       const pictureUrl = 'https://graph.microsoft.com/v1.0/me/photo/$value';
@@ -165,7 +192,7 @@ export class MicrosoftEntraIdProvider extends BaseOAuthProvider {
         email: profile.mail || profile.userPrincipalName,
         name: profile.displayName,
         picture: pictureUrl,
-        oauth_scopes: scopes.join(','),
+        oauth_scopes: grantedScopes.join(','),
         oauth_tokens: {
           access_token: token.access_token,
           refresh_token: token.refresh_token,

package/src/pdf/document/charts/chart-bar.ts

@@ -0,0 +1,217 @@
+import { SafeSvg } from '../pdf-document.types';
+import {
+  CHART_DEFAULT_HEIGHT,
+  CHART_FONT,
+  CHART_FULL_WIDTH,
+  ChartBaseOptions,
+  ChartSeries,
+  chartColor,
+  emptyChart,
+  legendRows,
+  line,
+  svgRoot,
+  text,
+  xAxisLabels,
+  yAxis,
+} from './chart-primitives';
+import {
+  axisLabelPlan,
+  bandScale,
+  estimateTextWidth,
+  formatNumber,
+  linearScale,
+  niceScale,
+  truncateToWidth,
+} from './chart-scale';
+
+const hasData = (series: ChartSeries[]): boolean =>
+  series.some((s) => s.values.some((v) => typeof v === 'number' && Number.isFinite(v)));
+
+const maxOf = (series: ChartSeries[], stacked: boolean): number => {
+  if (!stacked) {
+    return series.reduce(
+      (max, s) => Math.max(max, ...s.values.map((v) => (typeof v === 'number' ? v : 0))),
+      0,
+    );
+  }
+
+  const length = series.reduce((max, s) => Math.max(max, s.values.length), 0);
+  let max = 0;
+  for (let i = 0; i < length; i += 1) {
+    max = Math.max(
+      max,
+      series.reduce((sum, s) => sum + (typeof s.values[i] === 'number' ? (s.values[i] as number) : 0), 0),
+    );
+  }
+  return max;
+};
+
+/** Barras verticais, uma faixa por categoria. */
+export function barChartSvg(
+  options: ChartBaseOptions & {
+    categories: string[];
+    series: ChartSeries[];
+    stacked?: boolean;
+    yMax?: number;
+    yTicks?: number;
+    showValues?: boolean;
+    legend?: boolean;
+  },
+): SafeSvg {
+  const {
+    theme,
+    categories,
+    series,
+    stacked = false,
+    width = CHART_FULL_WIDTH,
+    height = CHART_DEFAULT_HEIGHT,
+    valueFormat = (value: number) => formatNumber(value),
+  } = options;
+
+  if (categories.length === 0 || !hasData(series)) return emptyChart(options);
+
+  const showLegend = options.legend ?? series.length > 1;
+  const legendHeight = showLegend ? 16 : 0;
+  const plot = { left: 42, right: width - 8, top: 10, bottom: height - 26 - legendHeight };
+
+  const scale = niceScale(0, options.yMax ?? maxOf(series, stacked), options.yTicks ?? 4);
+  const y = linearScale([scale.min, scale.max], [plot.bottom, plot.top]);
+  const band = bandScale(categories.length, [plot.left, plot.right]);
+
+  const parts: string[] = [
+    yAxis(scale.ticks, y, plot, theme, valueFormat),
+    line(plot.left, plot.bottom, plot.right, plot.bottom, theme.mutedFg),
+  ];
+
+  const groupWidth = stacked ? band.bandwidth : band.bandwidth / series.length;
+
+  series.forEach((serie, serieIndex) => {
+    const color = chartColor(theme, serieIndex, serie.color);
+    const stackTops = new Array(categories.length).fill(plot.bottom);
+
+    categories.forEach((_, index) => {
+      const raw = serie.values[index];
+      if (typeof raw !== 'number' || !Number.isFinite(raw)) return;
+
+      const barX = stacked ? band.band(index) : band.band(index) + groupWidth * serieIndex;
+      const top = stacked ? stackTops[index] - (plot.bottom - y(raw)) : y(raw);
+      const barHeight = Math.max(plot.bottom - y(raw), raw > 0 ? 1 : 0);
+
+      if (stacked) stackTops[index] = top;
+
+      parts.push(
+        `<rect x="${barX.toFixed(1)}" y="${top.toFixed(1)}" width="${groupWidth.toFixed(1)}" ` +
+          `height="${barHeight.toFixed(1)}" fill="${color}" rx="1.5" />`,
+      );
+
+      // O valor só entra quando cabe dentro da largura da barra; senão vira
+      // sopa de números sobrepostos.
+      if (
+        options.showValues &&
+        !stacked &&
+        estimateTextWidth(valueFormat(raw), CHART_FONT.value) < groupWidth
+      ) {
+        parts.push(
+          text(valueFormat(raw), barX + groupWidth / 2, top - 3, {
+            size: CHART_FONT.value,
+            fill: theme.ink,
+            anchor: 'middle',
+            weight: 600,
+          }),
+        );
+      }
+    });
+  });
+
+  const plan = axisLabelPlan(categories, band.bandwidth, CHART_FONT.axis);
+  parts.push(xAxisLabels(categories, band.center, plot.bottom + 12, plan, band.bandwidth, theme));
+
+  if (showLegend) {
+    const legend = legendRows(
+      series.map((serie, index) => ({
+        label: serie.name,
+        color: chartColor(theme, index, serie.color),
+      })),
+      width,
+      height - 4,
+      theme,
+    );
+    parts.push(legend.markup);
+  }
+
+  return svgRoot(width, height, parts.join(''), options.ariaLabel);
+}
+
+/**
+ * Barras horizontais — a forma certa quando o rótulo é um nome (curso, aluno),
+ * que deitado vira texto girado e ilegível.
+ */
+export function horizontalBarChartSvg(
+  options: ChartBaseOptions & {
+    categories: string[];
+    series: ChartSeries[];
+    xMax?: number;
+    labelWidth?: number;
+    showValues?: boolean;
+  },
+): SafeSvg {
+  const {
+    theme,
+    categories,
+    series,
+    width = CHART_FULL_WIDTH,
+    valueFormat = (value: number) => formatNumber(value),
+    showValues = true,
+  } = options;
+
+  if (categories.length === 0 || !hasData(series)) return emptyChart(options);
+
+  const rowHeight = 22;
+  const height = options.height ?? Math.max(categories.length * rowHeight + 24, 90);
+  const labelWidth = options.labelWidth ?? Math.min(Math.round(width * 0.34), 180);
+  const plot = { left: labelWidth + 8, right: width - 38, top: 8, bottom: height - 16 };
+
+  const scale = niceScale(0, options.xMax ?? maxOf(series, false), 4);
+  const x = linearScale([scale.min, scale.max], [plot.left, plot.right]);
+  const band = bandScale(categories.length, [plot.top, plot.bottom], 0.25);
+
+  const parts: string[] = scale.ticks.map((tick) =>
+    line(x(tick), plot.top, x(tick), plot.bottom, theme.line),
+  );
+
+  categories.forEach((category, index) => {
+    parts.push(
+      text(truncateToWidth(category, CHART_FONT.axis + 1, labelWidth), labelWidth, band.center(index) + 3, {
+        size: CHART_FONT.axis + 1,
+        fill: theme.ink,
+        anchor: 'end',
+      }),
+    );
+
+    const barHeight = band.bandwidth / series.length;
+
+    series.forEach((serie, serieIndex) => {
+      const raw = serie.values[index];
+      if (typeof raw !== 'number' || !Number.isFinite(raw)) return;
+
+      const barY = band.band(index) + barHeight * serieIndex;
+      const barWidth = Math.max(x(raw) - plot.left, raw > 0 ? 1 : 0);
+
+      parts.push(
+        `<rect x="${plot.left}" y="${barY.toFixed(1)}" width="${barWidth.toFixed(1)}" ` +
+          `height="${barHeight.toFixed(1)}" fill="${chartColor(theme, serieIndex, serie.color)}" rx="1.5" />`,
+      );
+
+      if (showValues && series.length === 1) {
+        parts.push(
+          text(valueFormat(raw), plot.left + barWidth + 4, barY + barHeight / 2 + 3, {
+            size: CHART_FONT.value,
+            fill: theme.mutedFg,
+          }),
+        );
+      }
+    });
+  });
+
+  return svgRoot(width, height, parts.join(''), options.ariaLabel);
+}

package/src/pdf/document/charts/chart-donut.ts

@@ -0,0 +1,163 @@
+import { SafeSvg } from '../pdf-document.types';
+import {
+  CHART_DEFAULT_HEIGHT,
+  CHART_FONT,
+  CHART_FULL_WIDTH,
+  ChartBaseOptions,
+  chartColor,
+  emptyChart,
+  svgRoot,
+  text,
+} from './chart-primitives';
+import { estimateTextWidth, formatNumber, truncateToWidth } from './chart-scale';
+
+export interface DonutSlice {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+const polar = (cx: number, cy: number, radius: number, angle: number) => ({
+  x: cx + radius * Math.cos(angle),
+  y: cy + radius * Math.sin(angle),
+});
+
+/** Setor em anel, desenhado com dois arcos — o `path` é o único jeito no SVG puro. */
+function ringSegment(
+  cx: number,
+  cy: number,
+  outer: number,
+  inner: number,
+  start: number,
+  end: number,
+): string {
+  const largeArc = end - start > Math.PI ? 1 : 0;
+  const p1 = polar(cx, cy, outer, start);
+  const p2 = polar(cx, cy, outer, end);
+  const p3 = polar(cx, cy, inner, end);
+  const p4 = polar(cx, cy, inner, start);
+
+  if (inner <= 0) {
+    return (
+      `M${cx.toFixed(1)},${cy.toFixed(1)} L${p1.x.toFixed(1)},${p1.y.toFixed(1)} ` +
+      `A${outer},${outer} 0 ${largeArc} 1 ${p2.x.toFixed(1)},${p2.y.toFixed(1)} Z`
+    );
+  }
+
+  return (
+    `M${p1.x.toFixed(1)},${p1.y.toFixed(1)} A${outer},${outer} 0 ${largeArc} 1 ${p2.x.toFixed(1)},${p2.y.toFixed(1)} ` +
+    `L${p3.x.toFixed(1)},${p3.y.toFixed(1)} A${inner},${inner} 0 ${largeArc} 0 ${p4.x.toFixed(1)},${p4.y.toFixed(1)} Z`
+  );
+}
+
+/** Rosca (ou pizza, com `innerRadiusRatio: 0`) com legenda à direita. */
+export function donutChartSvg(
+  options: ChartBaseOptions & {
+    slices: DonutSlice[];
+    innerRadiusRatio?: number;
+    centerLabel?: string;
+    centerValue?: string;
+    showPercent?: boolean;
+  },
+): SafeSvg {
+  const {
+    theme,
+    slices,
+    width = CHART_FULL_WIDTH,
+    height = CHART_DEFAULT_HEIGHT,
+    innerRadiusRatio = 0.62,
+    showPercent = true,
+    valueFormat = (value: number) => formatNumber(value, 0),
+  } = options;
+
+  const usable = slices.filter((slice) => Number.isFinite(slice.value) && slice.value > 0);
+  const total = usable.reduce((sum, slice) => sum + slice.value, 0);
+
+  if (total <= 0) return emptyChart(options);
+
+  // A coluna da direita é dimensionada pelo texto que realmente vai nela: o
+  // valor ("318 · 76%") fixa a largura mínima, e o que sobra é do rótulo.
+  const valueLabels = usable.map((slice) =>
+    showPercent
+      ? `${valueFormat(slice.value)} · ${Math.round((slice.value / total) * 100)}%`
+      : valueFormat(slice.value),
+  );
+  const valueWidth = Math.max(
+    ...valueLabels.map((label) => estimateTextWidth(label, CHART_FONT.legend)),
+  );
+  // A largura do rótulo é decidida primeiro e a legenda é montada a partir dela.
+  // Derivar na ordem inversa (legenda menos valor menos folga) devolve o mesmo
+  // número com um epsilon de ponto flutuante a menos, e um rótulo que cabia
+  // certinho sai cortado — "Em risco" virava "Em ris…".
+  const maxLabelWidth = Math.min(
+    Math.max(...usable.map((s) => estimateTextWidth(s.label, CHART_FONT.legend))),
+    width * 0.45 - valueWidth - 26,
+  );
+  const legendWidth = maxLabelWidth + valueWidth + 26;
+  const chartWidth = width - legendWidth;
+  const radius = Math.min(chartWidth, height) / 2 - 8;
+  const cx = chartWidth / 2;
+  const cy = height / 2;
+  const inner = radius * innerRadiusRatio;
+
+  const parts: string[] = [];
+  // Começa às 12h: é onde o olho procura o início de uma rosca.
+  let angle = -Math.PI / 2;
+
+  usable.forEach((slice, index) => {
+    const sweep = (slice.value / total) * Math.PI * 2;
+    const color = chartColor(theme, index, slice.color);
+
+    parts.push(
+      `<path d="${ringSegment(cx, cy, radius, inner, angle, angle + sweep)}" fill="${color}" />`,
+    );
+    angle += sweep;
+  });
+
+  if (inner > 0 && (options.centerValue || options.centerLabel)) {
+    if (options.centerValue) {
+      parts.push(
+        text(options.centerValue, cx, cy + (options.centerLabel ? 0 : 4), {
+          size: 16,
+          fill: theme.ink,
+          anchor: 'middle',
+          weight: 700,
+        }),
+      );
+    }
+    if (options.centerLabel) {
+      parts.push(
+        text(options.centerLabel, cx, cy + 12, {
+          size: CHART_FONT.axis,
+          fill: theme.mutedFg,
+          anchor: 'middle',
+        }),
+      );
+    }
+  }
+
+  const legendX = chartWidth + 4;
+  const lineHeight = 15;
+  const legendTop = cy - (usable.length * lineHeight) / 2 + 8;
+
+  usable.forEach((slice, index) => {
+    const y = legendTop + index * lineHeight;
+    const label = truncateToWidth(
+      slice.label,
+      CHART_FONT.legend,
+      maxLabelWidth,
+    );
+
+    parts.push(
+      `<rect x="${legendX}" y="${y - 7}" width="8" height="8" rx="2" fill="${chartColor(theme, index, slice.color)}" />`,
+      text(label, legendX + 12, y, { size: CHART_FONT.legend, fill: theme.ink }),
+      text(valueLabels[index] ?? '', width, y, {
+        size: CHART_FONT.legend,
+        fill: theme.mutedFg,
+        anchor: 'end',
+      }),
+    );
+  });
+
+  return svgRoot(width, height, parts.join(''), options.ariaLabel);
+}

package/src/pdf/document/charts/chart-gauge.ts

@@ -0,0 +1,94 @@
+import { SafeSvg } from '../pdf-document.types';
+import {
+  CHART_DEFAULT_HEIGHT,
+  CHART_FONT,
+  CHART_FULL_WIDTH,
+  ChartBaseOptions,
+  chartColor,
+  emptyChart,
+  svgRoot,
+  text,
+} from './chart-primitives';
+import { truncateToWidth } from './chart-scale';
+
+/**
+ * Arcos concêntricos de percentual — a figura de "meu progresso por curso" da
+ * visão do aluno. Cada item é um anel; o arco completo é 100%.
+ */
+export function gaugeChartSvg(
+  options: ChartBaseOptions & {
+    items: Array<{ label: string; pct: number; color?: string }>;
+    centerLabel?: string;
+  },
+): SafeSvg {
+  const {
+    theme,
+    items,
+    width = CHART_FULL_WIDTH,
+    height = CHART_DEFAULT_HEIGHT,
+  } = options;
+
+  const usable = items.filter((item) => Number.isFinite(item.pct)).slice(0, 6);
+  if (usable.length === 0) return emptyChart(options);
+
+  const legendWidth = Math.min(width * 0.45, 240);
+  const chartWidth = width - legendWidth;
+  const cx = chartWidth / 2;
+  const cy = height / 2;
+
+  const outer = Math.min(chartWidth, height) / 2 - 8;
+  const thickness = Math.max((outer - 18) / usable.length, 6);
+  const parts: string[] = [];
+
+  usable.forEach((item, index) => {
+    const radius = outer - index * thickness - thickness / 2;
+    if (radius <= 2) return;
+
+    const color = chartColor(theme, index, item.color);
+    const circumference = 2 * Math.PI * radius;
+    const pct = Math.min(Math.max(item.pct, 0), 100);
+
+    parts.push(
+      // Trilho + arco, com o traço girado para começar às 12h.
+      `<circle cx="${cx}" cy="${cy}" r="${radius.toFixed(1)}" fill="none" stroke="${theme.mutedBg}" ` +
+        `stroke-width="${(thickness - 2).toFixed(1)}" />`,
+      `<circle cx="${cx}" cy="${cy}" r="${radius.toFixed(1)}" fill="none" stroke="${color}" ` +
+        `stroke-width="${(thickness - 2).toFixed(1)}" stroke-linecap="round" ` +
+        `stroke-dasharray="${((circumference * pct) / 100).toFixed(1)} ${circumference.toFixed(1)}" ` +
+        `transform="rotate(-90 ${cx} ${cy})" />`,
+    );
+  });
+
+  if (options.centerLabel) {
+    parts.push(
+      text(options.centerLabel, cx, cy + 3, {
+        size: CHART_FONT.axis,
+        fill: theme.mutedFg,
+        anchor: 'middle',
+      }),
+    );
+  }
+
+  const legendX = chartWidth + 4;
+  const lineHeight = 16;
+  const legendTop = cy - (usable.length * lineHeight) / 2 + 8;
+
+  usable.forEach((item, index) => {
+    const y = legendTop + index * lineHeight;
+
+    parts.push(
+      `<rect x="${legendX}" y="${y - 7}" width="8" height="8" rx="2" fill="${chartColor(theme, index, item.color)}" />`,
+      text(truncateToWidth(item.label, CHART_FONT.legend, legendWidth - 60), legendX + 12, y, {
+        size: CHART_FONT.legend,
+        fill: theme.ink,
+      }),
+      text(`${Math.round(item.pct)}%`, width, y, {
+        size: CHART_FONT.legend,
+        fill: theme.mutedFg,
+        anchor: 'end',
+      }),
+    );
+  });
+
+  return svgRoot(width, height, parts.join(''), options.ariaLabel);
+}

package/src/pdf/document/charts/chart-line.ts

@@ -0,0 +1,159 @@
+import { SafeSvg } from '../pdf-document.types';
+import {
+  CHART_DEFAULT_HEIGHT,
+  CHART_FONT,
+  CHART_FULL_WIDTH,
+  ChartBaseOptions,
+  ChartSeries,
+  chartColor,
+  emptyChart,
+  legendRows,
+  line,
+  svgRoot,
+  text,
+  xAxisLabels,
+  yAxis,
+} from './chart-primitives';
+import {
+  axisLabelPlan,
+  bandScale,
+  formatNumber,
+  linearScale,
+  niceScale,
+  withAlpha,
+} from './chart-scale';
+
+export interface LineChartOptions extends ChartBaseOptions {
+  categories: string[];
+  series: ChartSeries[];
+  /** Preenche a área sob a linha. */
+  area?: boolean;
+  yMin?: number;
+  yMax?: number;
+  yTicks?: number;
+  /** Linha tracejada de meta (ex.: frequência de 80%). */
+  referenceLine?: { value: number; label?: string };
+  showDots?: boolean;
+  legend?: boolean;
+}
+
+/**
+ * Linha (ou área) ao longo de categorias.
+ *
+ * Buraco na série vira interrupção da linha, não zero: um mês sem dado e um mês
+ * com zero matrículas são coisas diferentes, e emendar os dois inventa uma
+ * queda que não houve.
+ */
+export function lineChartSvg(options: LineChartOptions): SafeSvg {
+  const {
+    theme,
+    categories,
+    series,
+    width = CHART_FULL_WIDTH,
+    height = CHART_DEFAULT_HEIGHT,
+    valueFormat = (value: number) => formatNumber(value),
+  } = options;
+
+  const hasData = series.some((s) => s.values.some((v) => typeof v === 'number' && Number.isFinite(v)));
+  if (categories.length === 0 || !hasData) return emptyChart(options);
+
+  const showLegend = options.legend ?? series.length > 1;
+  const legendHeight = showLegend ? 16 : 0;
+  const plot = { left: 42, right: width - 8, top: 10, bottom: height - 26 - legendHeight };
+
+  const values = series
+    .flatMap((s) => s.values)
+    .filter((v): v is number => typeof v === 'number' && Number.isFinite(v));
+  const reference = options.referenceLine?.value;
+
+  const scale = niceScale(
+    options.yMin ?? Math.min(0, ...values),
+    options.yMax ?? Math.max(...values, reference ?? Number.NEGATIVE_INFINITY),
+    options.yTicks ?? 4,
+  );
+  const y = linearScale([scale.min, scale.max], [plot.bottom, plot.top]);
+  const band = bandScale(categories.length, [plot.left, plot.right], 0);
+
+  const parts: string[] = [
+    yAxis(scale.ticks, y, plot, theme, valueFormat),
+    line(plot.left, plot.bottom, plot.right, plot.bottom, theme.mutedFg),
+  ];
+
+  if (typeof reference === 'number') {
+    parts.push(
+      line(plot.left, y(reference), plot.right, y(reference), theme.mutedFg, { dash: '4 3' }),
+      text(options.referenceLine?.label ?? valueFormat(reference), plot.right, y(reference) - 4, {
+        size: CHART_FONT.axis,
+        fill: theme.mutedFg,
+        anchor: 'end',
+      }),
+    );
+  }
+
+  const showDots = options.showDots ?? categories.length <= 24;
+
+  series.forEach((serie, serieIndex) => {
+    const color = chartColor(theme, serieIndex, serie.color);
+    const segments: Array<Array<{ x: number; y: number }>> = [];
+    let current: Array<{ x: number; y: number }> = [];
+
+    categories.forEach((_, index) => {
+      const raw = serie.values[index];
+      if (typeof raw !== 'number' || !Number.isFinite(raw)) {
+        if (current.length) segments.push(current);
+        current = [];
+        return;
+      }
+      current.push({ x: band.center(index), y: y(raw) });
+    });
+    if (current.length) segments.push(current);
+
+    segments.forEach((points) => {
+      const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+
+      if (options.area && points.length > 1) {
+        const first = points[0]!;
+        const last = points[points.length - 1]!;
+        parts.push(
+          `<path d="${path} L${last.x.toFixed(1)},${plot.bottom} L${first.x.toFixed(1)},${plot.bottom} Z" ` +
+            `fill="${withAlpha(color, 0.18)}" stroke="none" />`,
+        );
+      }
+
+      parts.push(
+        `<path d="${path}" fill="none" stroke="${color}" stroke-width="1.8" ` +
+          'stroke-linejoin="round" stroke-linecap="round" />',
+      );
+
+      if (showDots) {
+        points.forEach((point) => {
+          parts.push(
+            `<circle cx="${point.x.toFixed(1)}" cy="${point.y.toFixed(1)}" r="2.2" fill="${color}" />`,
+          );
+        });
+      }
+    });
+  });
+
+  const plan = axisLabelPlan(categories, band.bandwidth, CHART_FONT.axis);
+  parts.push(xAxisLabels(categories, band.center, plot.bottom + 12, plan, band.bandwidth, theme));
+
+  if (showLegend) {
+    const legend = legendRows(
+      series.map((serie, index) => ({
+        label: serie.name,
+        color: chartColor(theme, index, serie.color),
+      })),
+      width,
+      height - 4,
+      theme,
+    );
+    parts.push(legend.markup);
+  }
+
+  return svgRoot(width, height, parts.join(''), options.ariaLabel);
+}
+
+/** Mesma figura com a área preenchida — o nome existe para o chamador ler melhor. */
+export const areaChartSvg = (options: LineChartOptions): SafeSvg =>
+  lineChartSvg({ ...options, area: true });