@byline/admin 5.1.2 → 5.1.4

package/dist/modules/analytics/components/dashboard_module.css

@@ -266,3 +266,60 @@
   }
 }
 
+:is(.listHeader-nWIpzD, .byline-analytics-list-header) {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: .75rem;
+  display: flex;
+}
+
+.listHeading-ljSubR {
+  min-width: 0;
+}
+
+:is(.viewAll-jPtoC0, .byline-analytics-view-all) {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+:is(.modal-_Fpti3, .byline-analytics-modal) {
+  width: min(40rem, 100vw - 2rem);
+}
+
+:is(.modalCaption-Z7Qsck, .byline-analytics-modal-caption) {
+  font-variant-numeric: tabular-nums;
+  margin: .25rem 0 0;
+  font-size: .75rem;
+}
+
+:is(.modalContent-raK5q1, .byline-analytics-modal-content) {
+  max-height: min(60vh, 48rem);
+  overflow-y: auto;
+}
+
+.modalStatus-bXbZr9 {
+  justify-content: center;
+  padding: 2rem 0;
+  display: flex;
+}
+
+:is(.modalActions-XVBrOS, .byline-analytics-modal-actions) {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: .75rem;
+  display: flex;
+}
+
+.srOnly-szSAhX {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+

package/dist/modules/analytics/components/ranked-list-modal.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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
+ */
+/**
+ * Full ranking for one dashboard card, paged client-side.
+ *
+ * The dashboard cards show a short preview so the lists band stays even
+ * regardless of traffic. This modal shows the whole set behind a card's
+ * "View all" action. A `source` may be a ready list (countries are fully
+ * loaded with the dashboard) or a loader invoked once each time the modal
+ * opens (pages, downloads and referrers fetch a larger top-N on demand).
+ *
+ * The caption keeps the dashboard's honesty rule: when the loaded rows are
+ * a top-N slice of a larger set it says so alongside the page range.
+ */
+import type React from 'react';
+import { type AnalyticsTone, type RankedListSource } from './ranking.js';
+export type RankedListSourceInput = RankedListSource | (() => Promise<RankedListSource>);
+export interface RankedListModalProps {
+    isOpen: boolean;
+    onDismiss(): void;
+    title: string;
+    tone: AnalyticsTone;
+    locale: string;
+    source: RankedListSourceInput;
+    pageSize?: number;
+}
+export declare function RankedListModal({ isOpen, onDismiss, title, tone, locale, source, pageSize, }: RankedListModalProps): React.JSX.Element;

package/dist/modules/analytics/components/ranked-list-modal.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { Alert, Button, LoaderRing, Modal, Pagination } from "@byline/ui/react";
+import clsx from "clsx";
+import dashboard_module from "./dashboard.module.js";
+import { RankingRows, pageWindow } from "./ranking.js";
+function RankedListModal({ isOpen, onDismiss, title, tone, locale, source, pageSize = 25 }) {
+    const { t } = useTranslation('byline-admin');
+    const [state, setState] = useState({
+        status: 'idle'
+    });
+    const [page, setPage] = useState(1);
+    useEffect(()=>{
+        if (!isOpen) {
+            setState({
+                status: 'idle'
+            });
+            setPage(1);
+            return;
+        }
+        if ('function' != typeof source) return void setState({
+            status: 'ready',
+            data: source
+        });
+        let current = true;
+        setState({
+            status: 'loading'
+        });
+        source().then((data)=>{
+            if (current) setState({
+                status: 'ready',
+                data
+            });
+        }).catch(()=>{
+            if (current) setState({
+                status: 'error'
+            });
+        });
+        return ()=>{
+            current = false;
+        };
+    }, [
+        isOpen,
+        source
+    ]);
+    const data = 'ready' === state.status ? state.data : void 0;
+    const loaded = data?.rows.length ?? 0;
+    const window = pageWindow(loaded, pageSize, page);
+    const visible = data?.rows.slice(window.start, window.end) ?? [];
+    const truncated = null != data && data.total > loaded;
+    const caption = data ? [
+        0 === loaded ? void 0 : t('analytics.range', {
+            from: window.start + 1,
+            to: window.end,
+            total: loaded
+        }),
+        truncated ? t('analytics.topOf', {
+            shown: loaded,
+            total: data.total
+        }) : void 0
+    ].filter((value)=>null != value).join(' · ') : void 0;
+    return /*#__PURE__*/ jsx(Modal, {
+        isOpen: isOpen,
+        onDismiss: onDismiss,
+        closeOnOverlayClick: true,
+        children: /*#__PURE__*/ jsxs(Modal.Container, {
+            className: clsx('byline-analytics-modal', dashboard_module.modal),
+            children: [
+                /*#__PURE__*/ jsxs(Modal.Header, {
+                    children: [
+                        /*#__PURE__*/ jsx("h2", {
+                            children: title
+                        }),
+                        null != caption && caption.length > 0 && /*#__PURE__*/ jsx("p", {
+                            className: clsx('muted', 'byline-analytics-modal-caption', dashboard_module.modalCaption),
+                            children: caption
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Modal.Content, {
+                    className: clsx('byline-analytics-modal-content', dashboard_module.modalContent),
+                    children: [
+                        'loading' === state.status && /*#__PURE__*/ jsxs("div", {
+                            role: "status",
+                            "aria-live": "polite",
+                            className: dashboard_module.modalStatus,
+                            children: [
+                                /*#__PURE__*/ jsx(LoaderRing, {
+                                    size: 28,
+                                    "aria-hidden": "true"
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: dashboard_module.srOnly,
+                                    children: t('common.loading')
+                                })
+                            ]
+                        }),
+                        'error' === state.status && /*#__PURE__*/ jsx("div", {
+                            role: "alert",
+                            children: /*#__PURE__*/ jsx(Alert, {
+                                intent: "danger",
+                                close: false,
+                                children: t('analytics.loadError')
+                            })
+                        }),
+                        null != data && 0 === loaded && /*#__PURE__*/ jsx("p", {
+                            className: "muted",
+                            children: t('analytics.empty')
+                        }),
+                        null != data && loaded > 0 && /*#__PURE__*/ jsx(RankingRows, {
+                            rows: visible,
+                            tone: tone,
+                            locale: locale
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Modal.Actions, {
+                    className: clsx('byline-analytics-modal-actions', dashboard_module.modalActions),
+                    children: [
+                        window.pageCount > 1 ? /*#__PURE__*/ jsx(Pagination, {
+                            variant: "dashboard",
+                            count: window.pageCount,
+                            page: Math.min(page, window.pageCount),
+                            onChange: (_event, next)=>setPage(next),
+                            children: /*#__PURE__*/ jsx(Pagination.Root, {
+                                ariaLabel: t('analytics.pager'),
+                                children: /*#__PURE__*/ jsx(Pagination.Pager, {})
+                            })
+                        }) : /*#__PURE__*/ jsx("span", {}),
+                        /*#__PURE__*/ jsx(Button, {
+                            type: "button",
+                            size: "sm",
+                            variant: "outlined",
+                            onClick: onDismiss,
+                            children: t('common.actions.close')
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { RankedListModal };

package/dist/modules/analytics/components/ranking.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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
+ */
+/**
+ * Ranked-row rendering shared by the dashboard cards and the full-list
+ * modal, plus the small pure helpers both rely on.
+ */
+import type React from 'react';
+export type AnalyticsTone = 'views' | 'visitors' | 'downloads';
+export interface RankedRow {
+    key: string;
+    label: string;
+    value: number;
+    visitors: number;
+    overflow: boolean;
+}
+/** A complete ranking plus the size of the set it was drawn from. */
+export interface RankedListSource {
+    rows: RankedRow[];
+    total: number;
+}
+/** The ordered list with a share bar behind each row. Renders no card chrome. */
+export declare function RankingRows({ rows, tone, locale, }: {
+    rows: RankedRow[];
+    tone: AnalyticsTone;
+    locale: string;
+}): React.JSX.Element;
+/** Never collapse the bar entirely: a visible sliver still encodes "smallest". */
+export declare function shareWidth(value: number, ceiling: number): number;
+/** Row indices for one page of a list, with the page clamped into range. */
+export declare function pageWindow(total: number, pageSize: number, page: number): {
+    start: number;
+    end: number;
+    pageCount: number;
+};
+/**
+ * Localised region name for an ISO 3166-1 alpha-2 code, or the code itself
+ * when the value is not a code or the runtime has no name for it. The
+ * dashboard stores bare codes, so this is purely a display concern.
+ */
+export declare function regionName(code: string, locale: string): string;

package/dist/modules/analytics/components/ranking.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import clsx from "clsx";
+import dashboard_module from "./dashboard.module.js";
+const TONE_BAR = {
+    views: dashboard_module.barViews,
+    visitors: dashboard_module.barVisitors,
+    downloads: dashboard_module.barDownloads
+};
+function RankingRows({ rows, tone, locale }) {
+    const { t } = useTranslation('byline-admin');
+    const numbers = useMemo(()=>new Intl.NumberFormat(locale), [
+        locale
+    ]);
+    const ceiling = Math.max(1, ...rows.map((row)=>row.value));
+    return /*#__PURE__*/ jsx("ol", {
+        className: clsx('byline-analytics-ranking', dashboard_module.ranking),
+        children: rows.map((row)=>/*#__PURE__*/ jsxs("li", {
+                className: clsx('byline-analytics-ranking-row', dashboard_module.rankingRow, TONE_BAR[tone], row.overflow && dashboard_module.rankingOverflow),
+                style: {
+                    '--byline-analytics-share': `${shareWidth(row.value, ceiling)}%`
+                },
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: dashboard_module.rankingLabel,
+                        title: row.key,
+                        children: row.overflow ? t('analytics.overflow') : row.label
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: dashboard_module.rankingValue,
+                        children: numbers.format(row.value)
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: dashboard_module.rankingVisitors,
+                        children: numbers.format(row.visitors)
+                    })
+                ]
+            }, row.key))
+    });
+}
+function shareWidth(value, ceiling) {
+    if (!Number.isFinite(value) || value <= 0 || ceiling <= 0) return 0;
+    return Math.max(3, Math.min(100, value / ceiling * 100));
+}
+function pageWindow(total, pageSize, page) {
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    const current = Math.min(Math.max(1, page), pageCount);
+    const start = (current - 1) * pageSize;
+    return {
+        start,
+        end: Math.min(total, start + pageSize),
+        pageCount
+    };
+}
+function regionName(code, locale) {
+    if (!/^[A-Za-z]{2}$/.test(code)) return code;
+    try {
+        const names = new Intl.DisplayNames([
+            locale
+        ], {
+            type: 'region',
+            fallback: 'none'
+        });
+        return names.of(code.toUpperCase()) ?? code;
+    } catch  {
+        return code;
+    }
+}
+export { RankingRows, pageWindow, regionName, shareWidth };

package/dist/modules/analytics/components/ranking.test.node.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export {};

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>);
+}