@sjolystinnovation/app-kit 1.0.1 → 1.1.0

package/README.md

@@ -20,6 +20,7 @@ security headers. Each part is a separate entry point, so an app imports only wh
 - [`auth`](#sjolystinnovationapp-kitauth) and [`next-auth`](#sjolystinnovationapp-kitnext-auth)
 - [`session`](#sjolystinnovationapp-kitsession) and [`session/react`](#sjolystinnovationapp-kitsessionreact)
 - [`api`](#sjolystinnovationapp-kitapi) and [`server`](#sjolystinnovationapp-kitserver)
+- [`company`](#sjolystinnovationapp-kitcompany)
 - [`forms`](#sjolystinnovationapp-kitforms), [`toast`](#sjolystinnovationapp-kittoast), and [`validation`](#sjolystinnovationapp-kitvalidation)
 - [`ui`](#sjolystinnovationapp-kitui)
 - [`admin`](#sjolystinnovationapp-kitadmin)
@@ -51,12 +52,12 @@ ones the entry points you import need:
 | `react-markdown` 10, `remark-gfm` 4, and `rehype-sanitize` 6 | `markdown`, `legal`, and `sections` |
 | `vitest` 5 | `testing` |
 
-Every other entry point, such as the root entry, `next-config`, `seo`, `forms`, `legal`, or
-`locales/nb`, works without `@heroicons/react`. Install a single copy of `sonner`, because two
+Every other entry point, such as the root entry, `next-config`, `seo`, `forms`, `legal`, `company`,
+or `locales/nb`, works without `@heroicons/react`. Install a single copy of `sonner`, because two
 copies keep two separate toast stores. `jsonwebtoken` comes with the package.
 
-For a site without sign-in, which uses only entries such as the root entry, `ui`, `seo`, or
-`next-config`:
+For a site without sign-in, which uses only entries such as the root entry, `ui`, `seo`, `company`,
+or `next-config`:
 
 ```sh
 npm install @sjolystinnovation/app-kit next react react-dom @heroicons/react
@@ -101,6 +102,7 @@ The components use Tailwind CSS 4. Import the package's stylesheet after Tailwin
 | [`@sjolystinnovation/app-kit/session`](#sjolystinnovationapp-kitsession) | Session error codes and the re-sign-in prompt flag. Safe on the server. |
 | [`@sjolystinnovation/app-kit/session/react`](#sjolystinnovationapp-kitsessionreact) | The session provider, gates, expiry guard, sign-in form, and login page. |
 | [`@sjolystinnovation/app-kit/api`](#sjolystinnovationapp-kitapi) | The axios clients, error messages, field errors, and services for the API's endpoints. |
+| [`@sjolystinnovation/app-kit/company`](#sjolystinnovationapp-kitcompany) | `mergeCompanyInfo`, `formatOrgNumber`, and the `CompanyInfo` type. Imports no peer dependency. |
 | [`@sjolystinnovation/app-kit/server`](#sjolystinnovationapp-kitserver) | Cached public GETs and the revalidate route. Server only. |
 | [`@sjolystinnovation/app-kit/forms`](#sjolystinnovationapp-kitforms) | `useFormDraft`, which keeps form values in `localStorage`. |
 | [`@sjolystinnovation/app-kit/toast`](#sjolystinnovationapp-kittoast) | sonner's `toast`, quiet on errors while the re-sign-in prompt is open. |
@@ -163,7 +165,7 @@ The config every app shares, for `next.config.ts`. It imports nothing but Next's
 loads it with no build step.
 
 `defineAppConfig(options, extra?)` gives the standalone build, app-kit in `transpilePackages`, no
-`X-Powered-By`, an `expireTime` of five minutes, image qualities 75 and 100, the incremental cache
+`X-Powered-By`, an `expireTime` of a year, image qualities 75 and 100, the incremental cache
 in memory, and the security headers on every page. It merges `extra` over that config. It combines
 `transpilePackages`, `images`, `experimental`, `headers`, and `rewrites` instead of replacing them.
 
@@ -189,9 +191,18 @@ export default defineAppConfig({
 | `frameSrc`, `objectSrc` | `string[]` | Sources for those directives. Both default to `'none'`. |
 | `pathHeaders` | `{ source, headers }[]` | Headers for particular paths, such as a file download. They come after the page headers and replace a page header of the same name. Every path keeps the rest. |
 | `permissionsPolicy` | `string` | Replaces `camera=(), microphone=(), geolocation=()`. |
-| `expireTime` | `number` | The seconds a cache may serve a stale page. Defaults to 300. Next's default is a year. |
+| `expireTime` | `number` | The seconds a cached page may be served after it was last generated. Defaults to a year, Next's default. |
 | `isrFlushToDisk` | `boolean` | Whether to write revalidated pages to disk. Defaults to `false`, for a read-only root filesystem. |
 
+Until a page reaches its `expireTime`, Next serves the cached copy at once and regenerates it in the
+background when it is stale. If the regeneration fails, for example because the API is down, Next
+keeps the last good copy and tries again on a later request. Once the page is past its
+`expireTime`, Next regenerates it while the visitor waits, and a page whose `publicGet` throws then
+answers 500. The long default keeps legal pages, the sitemap, and other pages with few visitors up
+through an API outage. A page that was never generated still answers 500 while the API is down,
+rather than being cached empty. Set a shorter `expireTime` only if a page must never be served more
+than that old, and accept the 500.
+
 Scripts allow `'unsafe-inline'`, since a nonce would make every statically rendered page dynamic.
 The package also exports the `AppConfigOptions` and `CspOptions` types.
 
@@ -615,24 +626,8 @@ The package also exports the response types `UserProfile`, `AdminUser`, `SiteSet
 
 ### `mergeCompanyInfo` and `formatOrgNumber`
 
-`mergeCompanyInfo(data, fallback)` gives the company details for public pages: the API's `/company`
-answer, with the app's own value for each field it left blank or could not give. Only the
-fallback's name is required. The legal name falls back to the name, and VAT to not registered.
-
-`formatOrgNumber({ orgNumber, vatRegistered })` adds ` MVA` once the business is VAT registered, and
-gives an empty string without a number.
-
-```ts
-// src/lib/companyInfo.ts
-import { formatOrgNumber, mergeCompanyInfo, type CompanyInfo } from "@sjolystinnovation/app-kit/api";
-
-export const getCompanyInfo = async () =>
-  mergeCompanyInfo(await publicGetOptional<CompanyInfo>("/company"), { name: "Example AS" });
-
-export const orgLine = (company: CompanyInfo) => formatOrgNumber(company);
-```
-
-The `CompanyInfo` and `CompanyFallback` types describe the two shapes.
+`./api` also exports the [`company`](#sjolystinnovationapp-kitcompany) helpers and types, so
+existing imports keep working.
 
 ### `defineRevalidateTargets`
 
@@ -661,7 +656,8 @@ The package also exports the `RevalidateTargetsConfig` and `RevalidateTargetPath
 
 ## `@sjolystinnovation/app-kit/server`
 
-For server components and route handlers only. It imports `next/cache` and `next/server`.
+For server components and route handlers only. It imports `next/cache`, `next/constants`, and
+`next/server`.
 
 ### `createPublicApi`
 
@@ -688,6 +684,19 @@ export const { publicGet, publicGetOptional, publicGetWithMeta } = createPublicA
 );
 ```
 
+`next build` prerenders the pages that call these, so by default a build fails when the API is down.
+Set `nullOnFailureDuringBuild: true` to build those pages empty instead. During the build, an
+unreachable API or an error answer gives `null` and logs a warning with the path and status, so the
+empty page shows in the build log. ISR fills the page on its first revalidate once the API answers.
+At runtime a failure still throws, so a working page is never replaced by an empty one.
+
+```ts
+export const { publicGet, publicGetOptional, publicGetWithMeta } = createPublicApi(
+  requireEnv("NEXT_PUBLIC_API_URL", process.env.NEXT_PUBLIC_API_URL),
+  { nullOnFailureDuringBuild: true },
+);
+```
+
 The package also exports the `PublicApiOptions`, `PublicGetOptions`, and `PublicResponse` types.
 
 ### `createRevalidateRoute`
@@ -714,6 +723,30 @@ export const POST = createRevalidateRoute({ targets: TARGET_PATHS, role: "Admin"
 `{ builds: ["/builds", "/builds/[slug]", "/sitemap.xml"] }`. The package also exports the
 `RevalidateRouteOptions` type.
 
+## `@sjolystinnovation/app-kit/company`
+
+The company details for public pages, such as a footer or a contact page. The entry imports no
+peer dependency, so a static site without axios or next-auth can use it.
+
+`mergeCompanyInfo(data, fallback)` gives the company details: the API's `/company` answer, with the
+app's own value for each field it left blank or could not give. Only the fallback's name is
+required. The legal name falls back to the name, and VAT to not registered.
+
+`formatOrgNumber({ orgNumber, vatRegistered })` adds ` MVA` once the business is VAT registered, and
+gives an empty string without a number.
+
+```ts
+// src/lib/companyInfo.ts
+import { formatOrgNumber, mergeCompanyInfo, type CompanyInfo } from "@sjolystinnovation/app-kit/company";
+
+export const getCompanyInfo = async () =>
+  mergeCompanyInfo(await publicGetOptional<CompanyInfo>("/company"), { name: "Example AS" });
+
+export const orgLine = (company: CompanyInfo) => formatOrgNumber(company);
+```
+
+The `CompanyInfo` and `CompanyFallback` types describe the two shapes.
+
 ## `@sjolystinnovation/app-kit/forms`
 
 `useFormDraft(config, options)` keeps a form's values in `localStorage`, so a sign-out, reload, or
@@ -981,7 +1014,7 @@ const params = useSearchParams();
 | `loginHref` | `string` | Where the sign-in links go. |
 | `initialEmail`, `initialCode` | `string` | The values from the emailed link. A code opens the second step. |
 | `className` | `string` | Replaces the outer `max-w-md mx-auto px-4 py-16`, such as to sit in the app's own card. |
-| `strings` | `TextOverrides<ResetPasswordFlowStrings>` | The page's text. The English defaults include an intro, the password rules as `passwordHint`, and a `done` text. Set `signInPrompt`, `intro`, `codeSent`, or `passwordHint` to `null` to leave it out. `done` set to `null` shows the API's message, or only the sign-in link when it sends none. `passwordInvalid` set to `null` lists every broken rule. `validation` and `errors` may name only some codes. |
+| `strings` | `TextOverrides<ResetPasswordFlowStrings>` | The page's text. The English defaults include an intro, the password rules as `passwordHint`, and a `done` text. Set `signInPrompt`, `intro`, `codeSent`, or `passwordHint` to `null` to leave it out. The hint gives way to the new password's error while one shows, since the default `passwordInvalid` repeats the rules. `done` set to `null` shows the API's message, or only the sign-in link when it sends none. `passwordInvalid` set to `null` lists every broken rule. `validation` and `errors` may name only some codes. |
 | `passwordStrings` | `TextOverrides<PasswordStrings>` | The rule messages, in the app's language. |
 
 A password that breaks the rules is marked under the new password field, without a call to the API.
@@ -1165,19 +1198,31 @@ it plots and its label. It takes the next color of a built-in palette of five un
 The stats page card for the transactional email, from the `MapAppKitEmailStats` endpoint of
 SjolystInnovation.AppKit.Email through `createEmailStatsService`. It shows the emails sent,
 delivered, bounced, and blocked or reported as spam, for the last `days` days. Hard and soft bounces
-count together. The title names the days the API answered for. While the stats load, the panel shows
-`loading`. When they cannot load, such as when Brevo does not answer, it shows `unavailable` without
-a toast. The panel loads again when `days` changes, not when an inline `service` does.
+count together, and so do blocked emails and spam reports. With `separateCounts`, each count the API
+returns gets its own row: hard bounces, soft bounces, blocked, spam reports, and invalid addresses.
+The title names the days the API answered for. While the stats load, the panel shows `loading`.
+When they cannot load, such as when Brevo does not answer, it shows `unavailable` without a toast.
+The panel loads again when the days change, not when an inline `service` does, and shows `loading`
+until the new days answer.
+
+Give `periods` to let an admin pick the days with a row of buttons next to the title. The panel then
+keeps the picked days itself, starting on `days`. Give `onDaysChange` as well to keep the days in the
+app, which then passes the picked days back as `days`.
 
 ```tsx
 <EmailStatsPanel service={createEmailStatsService(api)} strings={{ title: "E-post (siste {days} dager)" }} />
+
+<EmailStatsPanel service={createEmailStatsService(api)} periods={[7, 30, 90]} separateCounts />
 ```
 
 | Prop | Type | Description |
 | --- | --- | --- |
 | `service` | `{ get(days?) }` | The email stats call, such as `createEmailStatsService(api)`. |
-| `days` | `number` | How many days back the stats go. Defaults to 30. |
-| `strings` | `TextOverrides<EmailStatsPanelStrings>` | `title`, where `{days}` becomes the days, and `sent`, `delivered`, `bounces`, `blocked`, `loading`, and `unavailable`. |
+| `days` | `number` | How many days back the stats go. Defaults to 30. With `periods` and no `onDaysChange`, the days the picker starts on. |
+| `periods` | `readonly number[]` | The days an admin can pick between, such as `[7, 30, 90]`. Without it, there is no picker. |
+| `onDaysChange` | `(days: number) => void` | Called with the picked days. Give it to control `days` from the app. |
+| `separateCounts` | `boolean` | Shows each count on its own row. Defaults to `false`. |
+| `strings` | `TextOverrides<EmailStatsPanelStrings>` | `title` and `periodOption`, where `{days}` becomes the days, `sent`, `delivered`, `bounces`, `blocked`, `loading`, and `unavailable`, the rows of `separateCounts` in `hardBounces`, `softBounces`, `blockedOnly`, `spamReports`, and `invalid`, and `period`, the picker's name for screen readers. |
 | `className` | `string` | Replaces the card's border and spacing, `rounded-2xl border border-admin-border p-5`, such as to sit in the app's own card. |
 
 ## `@sjolystinnovation/app-kit/branding`
@@ -1744,7 +1789,7 @@ The components draw every color, corner radius, and label size from theme variab
 | `--font-weight-auth-link` | semibold |
 | `--color-admin-title` | gray 900, the title of `AdminShell` |
 | `--color-admin-border` | gray 200, the line under the tabs |
-| `--color-admin-tab`, `-hover` | gray 500 and gray 900 |
+| `--color-admin-tab`, `-hover` | gray 500 and gray 900, also the periods `EmailStatsPanel` has not picked |
 | `--color-admin-tab-active` | gray 900 |
 | `--color-admin-tab-indicator` | `var(--color-primary)`, the line under the active tab |
 | `--color-chart-grid` | gray 200, the scale lines of `StatHistoryChart` |
@@ -1752,7 +1797,7 @@ The components draw every color, corner radius, and label size from theme variab
 | `--color-admin-stat-label` | gray 500, the labels and the waiting text of `EmailStatsPanel` |
 | `--color-admin-stat-value` | gray 700, the numbers of `EmailStatsPanel` |
 | `--radius-button` | `var(--radius-lg)` |
-| `--color-button-primary-bg` | `var(--color-primary)` |
+| `--color-button-primary-bg` | `var(--color-primary)`, also the period `EmailStatsPanel` has picked |
 | `--color-button-primary-text` | `var(--color-primary-foreground)` |
 | `--color-button-secondary-border` | gray 300 |
 | `--color-button-secondary-text` | gray 700 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjolystinnovation/app-kit",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Building blocks for Next.js apps that sign in against a JWT API through next-auth",
   "license": "Apache-2.0",
   "author": "Sjølyst Innovation AS",
@@ -27,6 +27,7 @@
       "types": "./src/next-auth.d.ts"
     },
     "./api": "./src/api/index.ts",
+    "./company": "./src/company/index.ts",
     "./server": "./src/server/index.ts",
     "./ui": "./src/ui/index.ts",
     "./admin": "./src/admin/index.ts",
@@ -111,7 +112,7 @@
     "@vitejs/plugin-react": "^6.1.2",
     "axios": "^1.20.0",
     "jsdom": "^30.1.1",
-    "next": "^16.3.6",
+    "next": "^16.4.0",
     "next-auth": "^4.24.15",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/admin/EmailStatsPanel.tsx

@@ -9,59 +9,123 @@ import { defaultEmailStatsPanelStrings, type EmailStatsPanelStrings } from "./em
 export interface EmailStatsPanelProps {
   /** The email stats call, such as `createEmailStatsService(api)`. */
   service: { get: (days?: number) => Promise<EmailStats> };
-  /** How many days back the stats go. Defaults to 30. */
+  /**
+   * How many days back the stats go. Defaults to 30. With `onDaysChange` the panel shows these days
+   * and leaves the choice to the app. Without it, this is where the picker starts.
+   */
   days?: number | undefined;
+  /** The days an admin can pick between, such as `[7, 30, 90]`. Without it, the panel has no picker. */
+  periods?: readonly number[] | undefined;
+  /** Called with the days an admin picks. Give it to control `days` from the app. */
+  onDaysChange?: ((days: number) => void) | undefined;
+  /** Shows hard and soft bounces, blocked, spam reports, and invalid addresses on their own rows. */
+  separateCounts?: boolean | undefined;
   strings?: TextOverrides<EmailStatsPanelStrings> | undefined;
   /** The classes that replace the card's border and spacing, such as when the panel sits in the app's own card. */
   className?: string | undefined;
 }
 
-type State = { status: "loading" } | { status: "failed" } | { status: "loaded"; stats: EmailStats };
+type State = { days: number } & ({ status: "failed" } | { status: "loaded"; stats: EmailStats });
 
 /**
  * The admin card for the transactional email of the last days, from SjolystInnovation.AppKit.Email's
- * stats endpoint: sent, delivered, bounces, and blocked or reported as spam. It says the stats are
- * unavailable when they cannot load, without a toast, so the rest of the stats page stays calm.
+ * stats endpoint: sent, delivered, bounces, and blocked or reported as spam, or each count on its own.
+ * It says the stats are unavailable when they cannot load, without a toast, so the rest of the stats
+ * page stays calm.
  */
-export function EmailStatsPanel({ service, days = 30, strings, className = "rounded-2xl border border-admin-border p-5" }: EmailStatsPanelProps) {
+export function EmailStatsPanel({
+  service,
+  days = 30,
+  periods,
+  onDaysChange,
+  separateCounts = false,
+  strings,
+  className = "rounded-2xl border border-admin-border p-5",
+}: EmailStatsPanelProps) {
   const text = withDefaults(defaultEmailStatsPanelStrings, strings);
-  const [state, setState] = useState<State>({ status: "loading" });
+  // The days picked in the panel itself, until the app gives other days. A panel with
+  // `onDaysChange` never picks on its own.
+  const [picked, setPicked] = useState<{ from: number; days: number } | null>(null);
+  const selected = picked?.from === days ? picked.days : days;
+  const hasPicker = periods !== undefined && periods.length > 0;
+  const [state, setState] = useState<State | null>(null);
   // The latest service, so an inline one does not load the stats again on every render.
   const serviceRef = useRef(service);
   useEffect(() => {
     serviceRef.current = service;
   }, [service]);
 
-  // An answer for an earlier `days` is ignored, so a slow one cannot replace the newer stats.
+  // An answer for earlier days is ignored, so a slow one cannot replace the newer stats.
   useEffect(() => {
     let replaced = false;
     serviceRef.current
-      .get(days)
+      .get(selected)
       .then((stats) => {
-        if (!replaced) setState({ status: "loaded", stats });
+        if (!replaced) setState({ days: selected, status: "loaded", stats });
       })
       .catch(() => {
-        if (!replaced) setState({ status: "failed" });
+        if (!replaced) setState({ days: selected, status: "failed" });
       });
     return () => {
       replaced = true;
     };
-  }, [days]);
+  }, [selected]);
 
-  const shownDays = state.status === "loaded" ? state.stats.days : days;
-  const rows = (stats: EmailStats) => [
-    { label: text.sent, value: stats.requests },
-    { label: text.delivered, value: stats.delivered },
-    { label: text.bounces, value: stats.hardBounces + stats.softBounces },
-    { label: text.blocked, value: stats.blocked + stats.spamReports },
-  ];
+  // Stats for other days than the selected ones count as loading.
+  const current = state?.days === selected ? state : null;
+  const shownDays = current?.status === "loaded" ? current.stats.days : selected;
+  const rows = (stats: EmailStats) =>
+    separateCounts
+      ? [
+          { label: text.sent, value: stats.requests },
+          { label: text.delivered, value: stats.delivered },
+          { label: text.hardBounces, value: stats.hardBounces },
+          { label: text.softBounces, value: stats.softBounces },
+          { label: text.blockedOnly, value: stats.blocked },
+          { label: text.spamReports, value: stats.spamReports },
+          { label: text.invalid, value: stats.invalid },
+        ]
+      : [
+          { label: text.sent, value: stats.requests },
+          { label: text.delivered, value: stats.delivered },
+          { label: text.bounces, value: stats.hardBounces + stats.softBounces },
+          { label: text.blocked, value: stats.blocked + stats.spamReports },
+        ];
+
+  const pick = (next: number) => {
+    if (onDaysChange) onDaysChange(next);
+    else setPicked({ from: days, days: next });
+  };
+
+  const title = <h2 className={`font-bold text-admin-title${hasPicker ? "" : " mb-3"}`}>{text.title.replaceAll("{days}", String(shownDays))}</h2>;
 
   return (
     <section className={className}>
-      <h2 className="font-bold text-admin-title mb-3">{text.title.replaceAll("{days}", String(shownDays))}</h2>
-      {state.status === "loaded" ? (
+      {hasPicker ? (
+        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+          {title}
+          <div role="group" aria-label={text.period} className="flex gap-1">
+            {periods.map((option) => (
+              <button
+                key={option}
+                type="button"
+                onClick={() => pick(option)}
+                aria-pressed={option === selected}
+                className={`rounded-button px-2.5 py-1 text-xs transition-colors ${
+                  option === selected ? "bg-button-primary-bg text-button-primary-text" : "text-admin-tab hover:text-admin-tab-hover"
+                }`}
+              >
+                {text.periodOption.replaceAll("{days}", String(option))}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : (
+        title
+      )}
+      {current?.status === "loaded" ? (
         <dl className="space-y-1.5 text-sm">
-          {rows(state.stats).map((row) => (
+          {rows(current.stats).map((row) => (
             <div key={row.label} className="flex justify-between">
               <dt className="text-admin-stat-label">{row.label}</dt>
               <dd className="tabular-nums text-admin-stat-value">{row.value}</dd>
@@ -69,7 +133,7 @@ export function EmailStatsPanel({ service, days = 30, strings, className = "roun
           ))}
         </dl>
       ) : (
-        <p className="text-sm text-admin-stat-label">{state.status === "failed" ? text.unavailable : text.loading}</p>
+        <p className="text-sm text-admin-stat-label">{current?.status === "failed" ? text.unavailable : text.loading}</p>
       )}
     </section>
   );

package/src/admin/emailStatsPanelStrings.ts

@@ -2,7 +2,7 @@
 
 /**
  * The email stats panel's text. Pass the app's own language. The defaults are English. The panel
- * fills in `{days}` in `title`.
+ * fills in `{days}` in `title` and `periodOption`.
  */
 export interface EmailStatsPanelStrings {
   title: string;
@@ -13,6 +13,18 @@ export interface EmailStatsPanelStrings {
   bounces: string;
   /** Blocked emails and spam reports together. */
   blocked: string;
+  /** The rows of `separateCounts`, each count on its own. */
+  hardBounces: string;
+  softBounces: string;
+  /** Blocked emails without spam reports. */
+  blockedOnly: string;
+  spamReports: string;
+  /** Emails to an address that does not exist or cannot be used. */
+  invalid: string;
+  /** The name of the period picker, for screen readers. */
+  period: string;
+  /** Each choice in the period picker, such as `7 days`. */
+  periodOption: string;
   loading: string;
   /** The text shown when the stats could not load, such as when Brevo does not answer. */
   unavailable: string;
@@ -24,6 +36,13 @@ export const defaultEmailStatsPanelStrings: EmailStatsPanelStrings = {
   delivered: "Delivered",
   bounces: "Bounces",
   blocked: "Blocked / spam",
+  hardBounces: "Hard bounces",
+  softBounces: "Soft bounces",
+  blockedOnly: "Blocked",
+  spamReports: "Spam reports",
+  invalid: "Invalid",
+  period: "Period",
+  periodOption: "{days} days",
   loading: "Loading…",
   unavailable: "Unavailable.",
 };

package/src/api/index.ts

@@ -1,7 +1,7 @@
 export { apiErrorCode } from "./apiErrorCode";
 export { apiFieldErrors } from "./apiFieldErrors";
-export { formatOrgNumber, mergeCompanyInfo } from "./company";
-export type { CompanyFallback, CompanyInfo } from "./company";
+export { formatOrgNumber, mergeCompanyInfo } from "../company";
+export type { CompanyFallback, CompanyInfo } from "../company";
 export { createApiClient } from "./createApiClient";
 export { formatApiError } from "./formatApiError";
 export type { StatusMessages } from "./formatApiError";

package/src/{api → company}/company.ts

@@ -1,3 +1,5 @@
+// Imports nothing, so the company entry works without axios or next-auth.
+
 /** The business as SjolystInnovation.AppKit.SiteSettings's public `/company` endpoint describes it. */
 export interface CompanyInfo {
   name: string;

package/src/company/index.ts

@@ -0,0 +1,2 @@
+export { formatOrgNumber, mergeCompanyInfo } from "./company";
+export type { CompanyFallback, CompanyInfo } from "./company";

package/src/locales/nb.ts

@@ -240,6 +240,13 @@ export const nbEmailStatsPanelStrings: EmailStatsPanelStrings = {
   delivered: "Levert",
   bounces: "Returnert",
   blocked: "Blokkert eller spam",
+  hardBounces: "Returnert, permanent feil",
+  softBounces: "Returnert, midlertidig feil",
+  blockedOnly: "Blokkert",
+  spamReports: "Meldt som spam",
+  invalid: "Ugyldig adresse",
+  period: "Periode",
+  periodOption: "{days} dager",
   loading: "Laster…",
   unavailable: "E-poststatistikken er ikke tilgjengelig akkurat nå. Prøv igjen senere.",
 };

package/src/next-config/index.ts

@@ -3,6 +3,8 @@ import { contentImagesRewrite, securityHeaders, type CspOptions, type Header } f
 
 export type { CspOptions } from "./headers";
 
+const ONE_YEAR_SECONDS = 31_536_000;
+
 /** Options for `defineAppConfig`. */
 export interface AppConfigOptions extends CspOptions {
   /**
@@ -18,9 +20,10 @@ export interface AppConfigOptions extends CspOptions {
   /** A Permissions-Policy that replaces the default one. */
   permissionsPolicy?: string | undefined;
   /**
-   * The number of seconds a cache may go on serving a page after it goes stale. Next's default is a
-   * year, long enough for a browser to hand back an old page and fetch the current one behind it.
-   * Defaults to `300`, matching the client router cache's stale time.
+   * The number of seconds a cached page may go on being served after it was last generated. Defaults
+   * to a year, Next's own default. Until then a stale page is served at once and regenerated in the
+   * background, and a failed regeneration keeps the last good page. Past it, the page is regenerated
+   * while the visitor waits, so a page that reads a down API answers 500 instead.
    */
   expireTime?: number | undefined;
   /**
@@ -43,7 +46,7 @@ export function defineAppConfig(o: AppConfigOptions, extra: NextConfig = {}): Ne
   return {
     output: "standalone",
     poweredByHeader: false,
-    expireTime: o.expireTime ?? 300,
+    expireTime: o.expireTime ?? ONE_YEAR_SECONDS,
     ...rest,
     transpilePackages: [...new Set(["@sjolystinnovation/app-kit", ...(transpilePackages ?? [])])],
     images: { qualities: [75, 100], ...images },

package/src/server/publicApi.ts

@@ -1,3 +1,5 @@
+import { PHASE_PRODUCTION_BUILD } from "next/constants";
+
 /** A response from `publicGetWithMeta`, with its `Last-Modified` date. */
 export interface PublicResponse<T> {
   data: T;
@@ -15,6 +17,12 @@ export interface PublicGetOptions {
 export interface PublicApiOptions {
   /** The seconds a cached response stays fresh. Defaults to `60`. */
   revalidate?: number | undefined;
+  /**
+   * Whether a failed fetch gives `null` with a warning, in place of `PublicApiError`, while
+   * `next build` prerenders. The page then builds empty and ISR fills it on its first revalidate.
+   * Outside the build a failure still throws. Defaults to `false`.
+   */
+  nullOnFailureDuringBuild?: boolean | undefined;
 }
 
 /** Thrown when the API could not be reached, or answered with no usable content. */
@@ -43,7 +51,8 @@ function lastModifiedOf(response: Response): Date | null {
  * handlers.
  *
  * A 404 returns null. An unreachable or failing API throws `PublicApiError`, so a failed fetch is
- * never cached as an empty page in place of a working one.
+ * never cached as an empty page in place of a working one. With `nullOnFailureDuringBuild`, a
+ * failure during `next build` gives null instead, so the build does not depend on the API.
  */
 export function createPublicApi(baseUrl: string, options: PublicApiOptions = {}) {
   if (!baseUrl) {
@@ -68,6 +77,19 @@ export function createPublicApi(baseUrl: string, options: PublicApiOptions = {})
   }
 
   async function publicGetWithMeta<T>(path: string, opts: PublicGetOptions = {}): Promise<PublicResponse<T> | null> {
+    try {
+      return await fetchWithMeta<T>(path, opts);
+    } catch (error) {
+      // Read at call time, since next build sets the phase for the process that prerenders.
+      if (!options.nullOnFailureDuringBuild || !(error instanceof PublicApiError) || process.env.NEXT_PHASE !== PHASE_PRODUCTION_BUILD) {
+        throw error;
+      }
+      console.warn(`${error.message} during next build. The page builds without it until it revalidates.`);
+      return null;
+    }
+  }
+
+  async function fetchWithMeta<T>(path: string, opts: PublicGetOptions): Promise<PublicResponse<T> | null> {
     const url = urlFor(path);
     if (url == null) return null;
     let response: Response;

package/src/ui/ResetPasswordFlow.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useState, type FormEvent } from "react";
+import { useId, useState, type FormEvent } from "react";
 import { errorText, fieldErrorTexts } from "../api/fieldErrorText";
 import { passwordProblems, type PasswordStrings } from "../validation/passwordRules";
 import { Alert } from "./Alert";
@@ -76,6 +76,7 @@ export function ResetPasswordFlow({
   const [fieldErrors, setFieldErrors] = useState<Record<string, string[]>>({});
   const [done, setDone] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const hintId = `${useId()}-hint`;
 
   // Field errors go under the fields this step shows, and the message holds the rest.
   const fail = (err: unknown, shown: readonly string[]) => {
@@ -91,6 +92,10 @@ export function ResetPasswordFlow({
   };
 
   const fieldError = (field: string) => fieldErrors[field]?.join(" ");
+  // The error under the new password says what to fix, and by default it holds the rules, so the
+  // hint steps aside while it shows.
+  const passwordError = fieldError("newPassword");
+  const showHint = Boolean(text.passwordHint) && !passwordError;
 
   const sendCode = async (event: FormEvent) => {
     event.preventDefault();
@@ -159,12 +164,13 @@ export function ResetPasswordFlow({
           <PasswordInput
             label={text.newPassword}
             name="newPassword"
-            error={fieldError("newPassword")}
+            error={passwordError}
+            aria-describedby={showHint ? hintId : undefined}
             value={newPassword}
             onChange={(e) => setNewPassword(e.target.value)}
             required
           />
-          {text.passwordHint && <p className="text-xs text-auth-hint">{text.passwordHint}</p>}
+          {showHint && <p id={hintId} className="text-xs text-auth-hint">{text.passwordHint}</p>}
           <button type="submit" disabled={loading} className={button}>
             {loading ? text.settingPassword : text.setPassword}
           </button>

package/src/ui/resetPasswordFlowStrings.ts

@@ -50,7 +50,7 @@ export interface ResetPasswordFlowStrings {
   email: string;
   code: string;
   newPassword: string;
-  /** The text shown under the new password field. */
+  /** The text shown under the new password field. It gives way to the field's error while one shows. */
   passwordHint: string | null;
   requestCode: string;
   requestingCode: string;