@byline/admin 5.1.1 → 5.1.3

package/dist/modules/analytics/components/dashboard.jsx

@@ -0,0 +1,208 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { ANALYTICS_DASHBOARD_PERIODS, ANALYTICS_OVERFLOW_KEY, isAnalyticsDashboardPeriod, } from '@byline/analytics/config';
+import { ANALYTICS_IGNORE_STORAGE_KEY } from '@byline/analytics-agent';
+import { useTranslation } from '@byline/i18n/react';
+import { Button, Card, Container, Section, Select } from '@byline/ui/react';
+import cx from 'clsx';
+import styles from './dashboard.module.css';
+import { AnalyticsTimeseries, resolveAnalyticsChartGranularity } from './timeseries.js';
+export function AnalyticsDashboard({ data, period, onPeriodChange, }) {
+    const { locale, t } = useTranslation('byline-admin');
+    const [excluded, setExcluded] = useState(false);
+    const numbers = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    useEffect(() => {
+        try {
+            setExcluded(localStorage.getItem(ANALYTICS_IGNORE_STORAGE_KEY) != null);
+        }
+        catch {
+            setExcluded(false);
+        }
+    }, []);
+    const toggleExclusion = () => {
+        try {
+            if (excluded)
+                localStorage.removeItem(ANALYTICS_IGNORE_STORAGE_KEY);
+            else
+                localStorage.setItem(ANALYTICS_IGNORE_STORAGE_KEY, '1');
+            setExcluded(!excluded);
+        }
+        catch {
+            // A blocked storage surface leaves the current collection behavior unchanged.
+        }
+    };
+    const periodItems = ANALYTICS_DASHBOARD_PERIODS.map((value) => ({
+        value: String(value),
+        label: typeof value === 'number'
+            ? t('analytics.period.days', { count: value })
+            : t(`analytics.period.${value}`),
+    }));
+    const { views, visitors, downloads } = data.summary;
+    const days = data.summary.timeseries.length;
+    const chartGranularity = resolveAnalyticsChartGranularity(period, days);
+    return (<Section>
+      <Container>
+        <header className={cx('byline-analytics-header', styles.header)}>
+          <div>
+            <h1 className={cx('byline-analytics-title', styles.title)}>{t('analytics.title')}</h1>
+            <p className={cx('muted', 'byline-analytics-help', styles.help)}>
+              {t('analytics.dailyUniquesHelp')}
+            </p>
+          </div>
+          <div className={cx('byline-analytics-controls', styles.controls)}>
+            <Select id="analytics-period" name="analytics-period" aria-label={t('analytics.period.label')} size="sm" value={String(period)} items={periodItems} onValueChange={(value) => {
+            const next = value === 'ytd' || value === 'all' ? value : Number(value);
+            if (isAnalyticsDashboardPeriod(next))
+                onPeriodChange(next);
+        }}/>
+            <Button type="button" size="sm" aria-pressed={excluded} 
+    // Local storage is origin-scoped, so this only governs public-page
+    // collection when the admin and the public site share an origin.
+    title={t('analytics.exclusion.help')} onClick={toggleExclusion}>
+              {excluded ? t('analytics.exclusion.include') : t('analytics.exclusion.exclude')}
+            </Button>
+          </div>
+        </header>
+
+        {/* Tinted ground, saturated ink, tracked label, tabular number — the
+            same tile grammar as the collection dashboard's status counts. */}
+        <div className={cx('byline-analytics-stats', styles.stats)}>
+          <StatTile tone="views" label={t('analytics.stats.views')} value={numbers.format(views)} foot={t('analytics.stats.perDay', {
+            count: days === 0 ? 0 : Math.round(views / days),
+        })}/>
+          <StatTile tone="visitors" label={t('analytics.stats.dailyUniques')} value={numbers.format(visitors)} 
+    // The qualification rides under the figure it qualifies rather
+    // than sitting in help text several elements away.
+    foot={t('analytics.stats.sumOfDays', { count: days })}/>
+          <StatTile tone="downloads" label={t('analytics.stats.downloads')} value={numbers.format(downloads)} foot={t('analytics.stats.shareOfViews', {
+            share: formatShare(downloads, views, locale),
+        })}/>
+        </div>
+
+        <Card className={cx('byline-analytics-chart-card', styles.chartCard)}>
+          <Card.Header>
+            <Card.Title>
+              {chartGranularity === 'day'
+            ? t('analytics.chart.perDay')
+            : chartGranularity === 'seven-day'
+                ? t('analytics.chart.perSevenDays')
+                : t('analytics.chart.perMonth')}
+            </Card.Title>
+          </Card.Header>
+          <Card.Content>
+            <AnalyticsTimeseries days={data.summary.timeseries} granularity={chartGranularity} locale={locale}/>
+          </Card.Content>
+        </Card>
+
+        {/* Top pages is the list people actually read, so it gets the wide
+            column; referrers and countries stack beside it. */}
+        <div className={cx('byline-analytics-lists', styles.lists)}>
+          <RankedList title={t('analytics.sections.pages')} caption={t('analytics.columns.viewsAndUniques')} tone="views" locale={locale} rows={data.pages.rows.map(toPathRow)} total={data.pages.total} coverageFrom={partialCoverageFrom(data.range.from, data.coverage.pathsFrom)}/>
+          <div className={styles.stack}>
+            <RankedList title={t('analytics.sections.referrers')} tone="visitors" locale={locale} total={data.referrers.total} coverageFrom={partialCoverageFrom(data.range.from, data.coverage.referrersFrom)} rows={data.referrers.rows.map((row) => ({
+            key: row.referrerHost,
+            label: row.referrerHost,
+            value: row.views,
+            visitors: row.visitors,
+            overflow: row.referrerHost === ANALYTICS_OVERFLOW_KEY,
+        }))}/>
+            <RankedList title={t('analytics.sections.countries')} tone="visitors" locale={locale} rows={data.countries.map((row) => ({
+            key: row.country,
+            label: row.country,
+            value: row.views,
+            visitors: row.visitors,
+            overflow: false,
+        }))}/>
+          </div>
+        </div>
+
+        <RankedList title={t('analytics.sections.downloads')} caption={t('analytics.columns.clicksAndUniques')} tone="downloads" locale={locale} rows={data.downloads.rows.map(toPathRow)} total={data.downloads.total} coverageFrom={partialCoverageFrom(data.range.from, data.coverage.pathsFrom)}/>
+      </Container>
+    </Section>);
+}
+const TONE_TILE = {
+    views: styles.toneViews,
+    visitors: styles.toneVisitors,
+    downloads: styles.toneDownloads,
+};
+const TONE_BAR = {
+    views: styles.barViews,
+    visitors: styles.barVisitors,
+    downloads: styles.barDownloads,
+};
+function StatTile({ tone, label, value, foot, }) {
+    return (<div className={cx('byline-analytics-stat', styles.stat, TONE_TILE[tone])}>
+      <span className={cx('byline-analytics-stat-label', styles.statLabel)}>{label}</span>
+      <span className={cx('byline-analytics-stat-value', styles.statValue)}>{value}</span>
+      <span className={cx('byline-analytics-stat-foot', styles.statFoot)}>{foot}</span>
+    </div>);
+}
+function toPathRow(row) {
+    return {
+        key: row.path,
+        label: row.path,
+        value: row.views,
+        visitors: row.visitors,
+        overflow: row.path === ANALYTICS_OVERFLOW_KEY,
+    };
+}
+function RankedList({ title, caption, rows, tone, locale, total, coverageFrom, }) {
+    const { t } = useTranslation('byline-admin');
+    const numbers = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    const ceiling = Math.max(1, ...rows.map((row) => row.value));
+    // Say so when the list is a top-N slice. Without this the card presents a
+    // truncated ranking as though it were the whole set.
+    const truncated = total != null && total > rows.length;
+    const coverageDate = useMemo(() => new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+        timeZone: 'UTC',
+    }), [locale]);
+    const description = [
+        truncated ? t('analytics.topOf', { shown: rows.length, total }) : caption,
+        coverageFrom == null
+            ? undefined
+            : t('analytics.coverage.since', {
+                date: coverageDate.format(new Date(`${coverageFrom}T00:00:00.000Z`)),
+            }),
+    ]
+        .filter((value) => value != null)
+        .join(' · ');
+    return (<Card className={cx('byline-analytics-list', styles.list)}>
+      <Card.Header>
+        <Card.Title>{title}</Card.Title>
+        {description.length > 0 && <Card.Description>{description}</Card.Description>}
+      </Card.Header>
+      <Card.Content>
+        {rows.length === 0 ? (<p className="muted">{t('analytics.empty')}</p>) : (<ol className={cx('byline-analytics-ranking', styles.ranking)}>
+            {rows.map((row) => (<li key={row.key} className={cx('byline-analytics-ranking-row', styles.rankingRow, TONE_BAR[tone], row.overflow && styles.rankingOverflow)} 
+            // The share bar sits behind the row so the label and its
+            // magnitude occupy one line and are read together.
+            style={{
+                    '--byline-analytics-share': `${shareWidth(row.value, ceiling)}%`,
+                }}>
+                <span className={styles.rankingLabel} title={row.key}>
+                  {/* `__other__` is a reserved aggregate, not a page anyone
+                    visited — never render it as though it were a real path. */}
+                  {row.overflow ? t('analytics.overflow') : row.label}
+                </span>
+                <span className={styles.rankingValue}>{numbers.format(row.value)}</span>
+                <span className={styles.rankingVisitors}>{numbers.format(row.visitors)}</span>
+              </li>))}
+          </ol>)}
+      </Card.Content>
+    </Card>);
+}
+/** Never collapse the bar entirely: a visible sliver still encodes "smallest". */
+export function shareWidth(value, ceiling) {
+    if (!Number.isFinite(value) || value <= 0 || ceiling <= 0)
+        return 0;
+    return Math.max(3, Math.min(100, (value / ceiling) * 100));
+}
+export function formatShare(part, whole, locale) {
+    const percent = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 });
+    return percent.format(whole <= 0 ? 0 : part / whole);
+}
+/** Return the retained boundary only when it truncates the selected range. */
+export function partialCoverageFrom(rangeFrom, coverageFrom) {
+    return coverageFrom != null && coverageFrom > rangeFrom ? coverageFrom : undefined;
+}

package/dist/modules/analytics/components/dashboard.test.node.js

@@ -0,0 +1,162 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { describe, expect, it } from 'vitest';
+import { formatShare, partialCoverageFrom, shareWidth } from './dashboard.js';
+import { bucketAnalyticsTimeseries, buildAnalyticsColumns, resolveAnalyticsChartGranularity, } from './timeseries.js';
+function day(date, views, visitors) {
+    return { day: date, views, visitors, downloads: 0 };
+}
+describe('buildAnalyticsColumns', () => {
+    it('scales every column against the tallest day in the window', () => {
+        const columns = buildAnalyticsColumns([
+            day('2026-08-20', 0, 0),
+            day('2026-08-21', 5, 3),
+            day('2026-08-22', 10, 4),
+        ]);
+        expect(columns).toHaveLength(3);
+        expect(columns[0]?.height).toBe(0);
+        expect(columns[1]?.height).toBe(90);
+        expect(columns[2]?.height).toBe(180);
+        // The tallest column reaches the top of the plot, and every column sits on
+        // the baseline: y + height is the full viewBox height.
+        for (const column of columns) {
+            expect(column.y + column.height).toBeCloseTo(180);
+        }
+    });
+    it('keeps the unique-visitor mark inset within its own day', () => {
+        const [column] = buildAnalyticsColumns([day('2026-08-20', 10, 4)]);
+        if (column == null)
+            throw new Error('expected one column');
+        // Visitors can never exceed that day's views, so the inset mark is always
+        // shorter and narrower than the column it sits inside.
+        expect(column.insetHeight).toBeLessThan(column.height);
+        expect(column.insetWidth).toBeLessThan(column.width);
+        expect(column.insetX).toBeGreaterThan(column.x);
+        expect(column.insetX + column.insetWidth).toBeLessThan(column.x + column.width);
+    });
+    it('survives an all-zero window without dividing by zero', () => {
+        const columns = buildAnalyticsColumns([day('2026-08-20', 0, 0), day('2026-08-21', 0, 0)]);
+        expect(columns.map((column) => column.height)).toEqual([0, 0]);
+        expect(columns.every((column) => Number.isFinite(column.x))).toBe(true);
+    });
+    it('returns nothing for an empty window', () => {
+        expect(buildAnalyticsColumns([])).toEqual([]);
+    });
+    it('spans the full plot width and never overlaps neighbouring hit targets', () => {
+        const columns = buildAnalyticsColumns([
+            day('2026-08-20', 1, 1),
+            day('2026-08-21', 2, 1),
+            day('2026-08-22', 3, 2),
+        ]);
+        expect(columns[0]?.hitX).toBe(0);
+        const last = columns[columns.length - 1];
+        expect((last?.hitX ?? 0) + (last?.hitWidth ?? 0)).toBeCloseTo(900);
+        for (let index = 1; index < columns.length; index += 1) {
+            const previous = columns[index - 1];
+            expect(columns[index]?.hitX).toBeCloseTo((previous?.hitX ?? 0) + (previous?.hitWidth ?? 0));
+        }
+    });
+});
+describe('analytics chart buckets', () => {
+    it('selects granularity explicitly from the reporting period and range size', () => {
+        expect(resolveAnalyticsChartGranularity(90, 90)).toBe('day');
+        expect(resolveAnalyticsChartGranularity('ytd', 90)).toBe('seven-day');
+        expect(resolveAnalyticsChartGranularity('all', 90)).toBe('day');
+        expect(resolveAnalyticsChartGranularity('all', 91)).toBe('seven-day');
+        expect(resolveAnalyticsChartGranularity('all', 733)).toBe('month');
+    });
+    it('keeps day boundaries and width in daily buckets', () => {
+        expect(bucketAnalyticsTimeseries([day('2026-01-01', 2, 1)], 'day')).toEqual([
+            {
+                from: '2026-01-01',
+                to: '2026-01-01',
+                granularity: 'day',
+                dayCount: 1,
+                views: 2,
+                visitors: 1,
+                downloads: 0,
+            },
+        ]);
+    });
+    it('sums daily rows into explicit seven-day buckets', () => {
+        const days = Array.from({ length: 8 }, (_, index) => day(`2026-01-${String(index + 1).padStart(2, '0')}`, 2, 1));
+        expect(bucketAnalyticsTimeseries(days, 'seven-day')).toEqual([
+            {
+                from: '2026-01-01',
+                to: '2026-01-07',
+                granularity: 'seven-day',
+                dayCount: 7,
+                views: 14,
+                visitors: 7,
+                downloads: 0,
+            },
+            {
+                from: '2026-01-08',
+                to: '2026-01-08',
+                granularity: 'seven-day',
+                dayCount: 1,
+                views: 2,
+                visitors: 1,
+                downloads: 0,
+            },
+        ]);
+    });
+    it('aligns month buckets to UTC calendar boundaries', () => {
+        expect(bucketAnalyticsTimeseries([day('2026-01-31', 2, 1), day('2026-02-01', 3, 2), day('2026-02-02', 4, 2)], 'month')).toEqual([
+            {
+                from: '2026-01-31',
+                to: '2026-01-31',
+                granularity: 'month',
+                dayCount: 1,
+                views: 2,
+                visitors: 1,
+                downloads: 0,
+            },
+            {
+                from: '2026-02-01',
+                to: '2026-02-02',
+                granularity: 'month',
+                dayCount: 2,
+                views: 7,
+                visitors: 4,
+                downloads: 0,
+            },
+        ]);
+    });
+});
+describe('shareWidth', () => {
+    it('scales a row against the largest row in its list', () => {
+        expect(shareWidth(50, 100)).toBe(50);
+        expect(shareWidth(100, 100)).toBe(100);
+    });
+    it('keeps the smallest row visible rather than collapsing it', () => {
+        expect(shareWidth(1, 10_000)).toBe(3);
+    });
+    it('returns no bar for absent or impossible values', () => {
+        expect(shareWidth(0, 100)).toBe(0);
+        expect(shareWidth(5, 0)).toBe(0);
+        expect(shareWidth(Number.NaN, 100)).toBe(0);
+    });
+});
+describe('formatShare', () => {
+    it('renders a locale-aware percentage of the whole', () => {
+        expect(formatShare(96, 1_200, 'en-US')).toBe('8%');
+        expect(formatShare(1, 3, 'en-US')).toBe('33.3%');
+    });
+    it('reports zero rather than NaN when there is nothing to divide', () => {
+        expect(formatShare(0, 0, 'en-US')).toBe('0%');
+    });
+});
+describe('partialCoverageFrom', () => {
+    it('returns a retained boundary only when it truncates the report', () => {
+        expect(partialCoverageFrom('2025-01-01', '2026-05-26')).toBe('2026-05-26');
+        expect(partialCoverageFrom('2026-05-27', '2026-05-26')).toBeUndefined();
+        expect(partialCoverageFrom('2026-05-26', '2026-05-26')).toBeUndefined();
+        expect(partialCoverageFrom('2025-01-01', null)).toBeUndefined();
+    });
+});

package/dist/modules/analytics/components/timeseries.jsx

@@ -0,0 +1,193 @@
+'use client';
+import { useMemo, useRef, useState } from 'react';
+import { useTranslation } from '@byline/i18n/react';
+import cx from 'clsx';
+import styles from './timeseries.module.css';
+/** Drawn in a fixed user-space box and stretched to the container width. */
+const VIEWBOX_WIDTH = 900;
+const VIEWBOX_HEIGHT = 180;
+const COLUMN_GAP_RATIO = 0.38;
+const MAX_COLUMN_WIDTH = 26;
+/** Resolve chart density outside the renderer so the chosen width is explicit. */
+export function resolveAnalyticsChartGranularity(period, dayCount) {
+    if (typeof period === 'number' || (period === 'all' && dayCount <= 90))
+        return 'day';
+    if (period === 'ytd' || dayCount <= 732)
+        return 'seven-day';
+    return 'month';
+}
+/** Combine complete daily query rows using the caller-selected granularity. */
+export function bucketAnalyticsTimeseries(days, granularity) {
+    if (granularity === 'day') {
+        return days.map((day) => ({
+            from: day.day,
+            to: day.day,
+            granularity,
+            dayCount: 1,
+            views: day.views,
+            visitors: day.visitors,
+            downloads: day.downloads,
+        }));
+    }
+    if (granularity === 'seven-day')
+        return bucketBySevenDays(days);
+    return bucketByUtcMonth(days);
+}
+/** Project reporting buckets into column geometry. */
+export function buildAnalyticsColumns(buckets) {
+    if (buckets.length === 0)
+        return [];
+    const ceiling = Math.max(1, ...buckets.map((bucket) => bucket.views));
+    const step = VIEWBOX_WIDTH / buckets.length;
+    const width = Math.max(2, Math.min(step * (1 - COLUMN_GAP_RATIO), MAX_COLUMN_WIDTH));
+    return buckets.map((bucket, index) => {
+        const centre = index * step + step / 2;
+        const height = (bucket.views / ceiling) * VIEWBOX_HEIGHT;
+        const insetHeight = (bucket.visitors / ceiling) * VIEWBOX_HEIGHT;
+        const insetWidth = Math.max(1, width / 2);
+        return {
+            index,
+            x: centre - width / 2,
+            width,
+            y: VIEWBOX_HEIGHT - height,
+            height,
+            insetX: centre - insetWidth / 2,
+            insetWidth,
+            insetY: VIEWBOX_HEIGHT - insetHeight,
+            insetHeight,
+            hitX: index * step,
+            hitWidth: step,
+        };
+    });
+}
+export function AnalyticsTimeseries({ days, granularity, locale, }) {
+    const { t } = useTranslation('byline-admin');
+    const [hovered, setHovered] = useState(null);
+    const plot = useRef(null);
+    const buckets = useMemo(() => bucketAnalyticsTimeseries(days, granularity), [days, granularity]);
+    const columns = useMemo(() => buildAnalyticsColumns(buckets), [buckets]);
+    const numbers = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    // Stored days are UTC calendar days. Formatting in the viewer's zone would
+    // shift the labels by up to one day.
+    const dayLabel = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric', timeZone: 'UTC' }), [locale]);
+    const formatDay = (day) => dayLabel.format(new Date(`${day}T00:00:00.000Z`));
+    const formatBucket = (bucket) => bucket.dayCount === 1
+        ? formatDay(bucket.from)
+        : `${formatDay(bucket.from)} – ${formatDay(bucket.to)}`;
+    const visitorLabel = (bucket) => bucket.granularity === 'day'
+        ? t('analytics.stats.dailyUniques')
+        : t('analytics.stats.summedDailyUniques');
+    const active = hovered == null ? undefined : buckets[hovered];
+    const readBucket = (bucket) => [
+        formatBucket(bucket),
+        `${t('analytics.stats.views')} ${numbers.format(bucket.views)}`,
+        `${visitorLabel(bucket)} ${numbers.format(bucket.visitors)}`,
+        `${t('analytics.stats.downloads')} ${numbers.format(bucket.downloads)}`,
+    ].join(', ');
+    // One handler on the plot rather than one per column keeps every reporting
+    // range to a single pointer listener and one keyboard tab stop.
+    const trackPointer = (event) => {
+        if (buckets.length === 0 || plot.current == null)
+            return;
+        const bounds = plot.current.getBoundingClientRect();
+        if (bounds.width === 0)
+            return;
+        const ratio = (event.clientX - bounds.left) / bounds.width;
+        setHovered(Math.min(buckets.length - 1, Math.max(0, Math.floor(ratio * buckets.length))));
+    };
+    const trackKey = (event) => {
+        if (buckets.length === 0)
+            return;
+        const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+        if (step === 0 && event.key !== 'Home' && event.key !== 'End' && event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        if (event.key === 'Escape')
+            return setHovered(null);
+        if (event.key === 'Home')
+            return setHovered(0);
+        if (event.key === 'End')
+            return setHovered(buckets.length - 1);
+        setHovered((current) => {
+            const next = (current ?? (step > 0 ? -1 : buckets.length)) + step;
+            return Math.min(buckets.length - 1, Math.max(0, next));
+        });
+    };
+    return (<div className={cx('byline-analytics-timeseries', styles.root)} role="slider" tabIndex={0} aria-label={t('analytics.chart.views')} aria-valuemin={0} aria-valuemax={Math.max(0, buckets.length - 1)} aria-valuenow={hovered ?? 0} aria-valuetext={active == null ? t('analytics.chart.hint') : readBucket(active)} onPointerMove={trackPointer} onPointerLeave={() => setHovered(null)} onKeyDown={trackKey} onBlur={() => setHovered(null)}>
+      <svg ref={plot} className={cx('byline-analytics-chart', styles.chart)} viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`} preserveAspectRatio="none" aria-hidden="true">
+        <title>{t('analytics.chart.views')}</title>
+        {[0.5, 1].map((fraction) => (<line key={fraction} className={styles.gridline} x1={0} x2={VIEWBOX_WIDTH} y1={VIEWBOX_HEIGHT - VIEWBOX_HEIGHT * fraction} y2={VIEWBOX_HEIGHT - VIEWBOX_HEIGHT * fraction} vectorEffect="non-scaling-stroke"/>))}
+        {columns.map((column) => (<g key={buckets[column.index]?.from} className={cx(styles.column, hovered === column.index && styles.columnActive)}>
+            <rect className={styles.views} x={column.x} width={column.width} y={column.y} height={column.height}/>
+            <rect className={styles.visitors} x={column.insetX} width={column.insetWidth} y={column.insetY} height={column.insetHeight}/>
+          </g>))}
+      </svg>
+
+      {/* HTML axis labels remain undistorted while the SVG stretches. */}
+      <div className={cx('byline-analytics-axis', styles.axis)} aria-hidden="true">
+        <span>{buckets.length > 0 && buckets[0] != null ? formatDay(buckets[0].from) : ''}</span>
+        <span>
+          {buckets.length > 0 && buckets[buckets.length - 1] != null
+            ? formatDay(buckets[buckets.length - 1]?.to ?? '')
+            : ''}
+        </span>
+      </div>
+
+      <p className={cx('byline-analytics-readout', styles.readout)} aria-live="polite">
+        {active == null ? (t('analytics.chart.hint')) : (<>
+            <strong>{formatBucket(active)}</strong>
+            <span className={styles.swatchViews}/>
+            {t('analytics.stats.views')} {numbers.format(active.views)}
+            <span className={styles.swatchVisitors}/>
+            {visitorLabel(active)} {numbers.format(active.visitors)}
+            <span className={styles.swatchDownloads}/>
+            {t('analytics.stats.downloads')} {numbers.format(active.downloads)}
+          </>)}
+      </p>
+    </div>);
+}
+function bucketBySevenDays(days) {
+    const buckets = [];
+    for (let index = 0; index < days.length; index += 7) {
+        const rows = days.slice(index, index + 7);
+        const first = rows[0];
+        const last = rows[rows.length - 1];
+        if (first != null && last != null) {
+            buckets.push(combineRows(first.day, last.day, 'seven-day', rows));
+        }
+    }
+    return buckets;
+}
+function bucketByUtcMonth(days) {
+    const buckets = [];
+    let rows = [];
+    let month;
+    const flush = () => {
+        const first = rows[0];
+        const last = rows[rows.length - 1];
+        if (first != null && last != null) {
+            buckets.push(combineRows(first.day, last.day, 'month', rows));
+        }
+        rows = [];
+    };
+    for (const day of days) {
+        const nextMonth = day.day.slice(0, 7);
+        if (month != null && nextMonth !== month)
+            flush();
+        month = nextMonth;
+        rows.push(day);
+    }
+    flush();
+    return buckets;
+}
+function combineRows(from, to, granularity, rows) {
+    let views = 0;
+    let visitors = 0;
+    let downloads = 0;
+    for (const row of rows) {
+        views += row.views;
+        visitors += row.visitors;
+        downloads += row.downloads;
+    }
+    return { from, to, granularity, dayCount: rows.length, views, visitors, downloads };
+}

package/dist/modules/auth/components/sign-in-form.jsx

@@ -0,0 +1,89 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Admin sign-in form.
+ *
+ * Client component — collects email + password, calls the `adminSignIn`
+ * server fn, and on success navigates to a safe caller-supplied destination.
+ * On failure renders a generic "Invalid
+ * credentials" alert; the provider equalises timing between
+ * unknown-email and wrong-password so the UI doesn't distinguish the two.
+ *
+ * Stable override handles: `.byline-sign-in-card`, `.byline-sign-in-alert`,
+ * `.byline-sign-in-form`, `.byline-sign-in-fields`,
+ * `.byline-sign-in-actions`, `.byline-sign-in-button`,
+ * `.byline-sign-in-home-link`.
+ */
+import { useState } from 'react';
+import { getAdminConfig } from '@byline/core';
+import { useTranslation } from '@byline/i18n/react';
+import { Alert, Button, Card, Input, LoaderEllipsis } from '@byline/ui/react';
+import cx from 'clsx';
+import { useBylineAdminServices } from '../../../services/admin-services-context.js';
+import { normalizeRootRelativeRedirect, resolveSignInFormRedirect } from '../safe-redirect.js';
+import styles from './sign-in-form.module.css';
+export function SignInForm({ redirectTo, homeUrl }) {
+    const { adminSignIn } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    async function handleSubmit(event) {
+        event.preventDefault();
+        if (pending)
+            return;
+        if (email.trim().length === 0 || password.length === 0) {
+            setError(t('auth.signIn.errors.empty'));
+            return;
+        }
+        const destination = resolveSignInFormRedirect(redirectTo, getAdminConfig().routes.admin);
+        setPending(true);
+        setError(null);
+        try {
+            await adminSignIn({ data: { email: email.trim(), password } });
+        }
+        catch (err) {
+            console.warn('sign-in failed', err);
+            setError(t('auth.signIn.errors.invalidCredentials'));
+            setPending(false);
+            return;
+        }
+        // Keep navigation outside the credential error boundary. A browser-level
+        // navigation failure must not relabel a successful sign-in as bad credentials.
+        window.location.assign(normalizeRootRelativeRedirect(destination) ?? '/');
+    }
+    return (<Card className={cx('byline-sign-in-card', styles.card)}>
+      <Card.Header>
+        <Card.Title>
+          <h2>{t('auth.signIn.title')}</h2>
+        </Card.Title>
+        <Card.Description>{t('auth.signIn.description')}</Card.Description>
+        {error && (<Alert intent="danger" className={cx('byline-sign-in-alert', styles.alert)}>
+            {error}
+          </Alert>)}
+      </Card.Header>
+      <Card.Content>
+        <form method="post" onSubmit={handleSubmit} noValidate className={cx('byline-sign-in-form', styles.form)}>
+          <div className={cx('byline-sign-in-fields', styles.fields)}>
+            <Input label={t('common.fields.email')} id="email" name="email" type="email" autoComplete="email" required value={email} onChange={(event) => setEmail(event.currentTarget.value)} disabled={pending}/>
+            <Input label={t('common.fields.password')} id="password" name="password" type="password" autoComplete="current-password" required value={password} onChange={(event) => setPassword(event.currentTarget.value)} disabled={pending}/>
+          </div>
+          <div className={cx('byline-sign-in-actions', styles.actions)}>
+            {homeUrl && (<a href={homeUrl} className={cx('byline-sign-in-home-link', styles['home-link'])}>
+                {t('common.actions.home')}
+              </a>)}
+            <Button type="submit" disabled={pending} className={cx('byline-sign-in-button', styles.button)}>
+              {pending ? (<LoaderEllipsis size={30} color="#aaaaaa"/>) : (<span>{t('common.actions.signIn')}</span>)}
+            </Button>
+          </div>
+        </form>
+      </Card.Content>
+    </Card>);
+}