@sjolystinnovation/app-kit 0.21.0 → 1.0.0

package/src/forms/useFormDraft.ts

@@ -32,6 +32,7 @@ function read<T>(storageKey: string): T | null {
   }
 }
 
+/** Options for `useFormDraft`. */
 export interface FormDraftOptions<T> {
   /**
    * The signed-in user's id. A browser profile can be shared, so drafts are stored per user. That
@@ -40,27 +41,28 @@ export interface FormDraftOptions<T> {
    * known.
    */
   owner: string | undefined;
-  /** Identifies the form and the entity it edits, for example `recipe:new` or `recipe:42`. */
+  /** The key for the form and the entity it edits, for example `recipe:new` or `recipe:42`. */
   scope: string;
   /** The form's current values. They must survive `JSON.stringify`. */
   value: T;
 }
 
+/** What `useFormDraft` returns. */
 export interface FormDraft<T> {
   /**
-   * The stored draft, while it is still waiting to be restored or dismissed. Read once the owner is
-   * known and again whenever the owner or scope changes, so it can appear after mount.
+   * The stored draft, while it is still waiting to be restored or dismissed. The hook reads it once
+   * the owner is known and again whenever the owner or scope changes, so it can appear after mount.
    */
   pending: T | null;
-  /** Stop offering the draft. The caller applies the values it wants. */
+  /** Stops offering the draft. The caller applies the values it wants. */
   dismiss: () => void;
-  /** Drop the stored draft after a successful save. */
+  /** Drops the stored draft. Call it after a successful save. */
   clear: () => void;
 }
 
 /**
- * Keeps a form's values in localStorage so a sign-out, reload or closed tab does not lose them.
- * Values are written half a second after the last change, so only that last half second is at risk.
+ * Keeps a form's values in localStorage so a sign-out, reload, or closed tab does not lose them. The
+ * hook writes them half a second after the last change, so only that last half second is at risk.
  *
  * A draft found at mount is offered for restore, not applied. So an edit form never silently
  * overwrites what the API returned. Saving starts at once, whether or not the offer is answered.

package/src/index.ts

@@ -1,4 +1,2 @@
-export { defineSessionConfig, requireEnv, resolveJwtSecret } from "./config";
+export { defineSessionConfig, requireEnv } from "./config";
 export type { SessionConfig } from "./config";
-export { formatApiError } from "./errors";
-export type { StatusMessages } from "./errors";

package/src/legal/LegalPageView.tsx

@@ -1,38 +1,24 @@
 import Link from "next/link";
-import type { LegalPage } from "../api/services";
+import type { LegalPage } from "../api/legalPage";
 import { Markdown } from "../markdown";
 import { parseTimestamp } from "../seo/sitemap";
 import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultLegalPageViewStrings, type LegalPageViewStrings } from "./legalPageViewStrings";
 
-/** The legal page's text around the content. Pass the app's own language. The defaults are English. */
-export interface LegalPageViewStrings {
-  /** Before the date the page last changed. */
-  updated: string;
-  /** Shown in place of the content when nobody has written the page yet. */
-  missing: string;
-  /** The link back to the front page. */
-  toFrontPage: string;
-}
-
-export const defaultLegalPageViewStrings: LegalPageViewStrings = {
-  updated: "Last updated",
-  missing: "This content has not been written yet.",
-  toFrontPage: "Back to the front page",
-};
-
+/** Props for `LegalPageView`. */
 export interface LegalPageViewProps {
   /** The page from the API, or null when nobody has written it yet. */
   page: LegalPage | null;
   /** The heading while there is no page. */
   title: string;
-  /** The front page, for the link at the bottom. */
+  /** The front page's path, for the link at the bottom. */
   homeHref: string;
   /** The BCP 47 tag the date is written in, such as `nb-NO`. */
   dateLocale: string;
   strings?: TextOverrides<LegalPageViewStrings> | undefined;
 }
 
-/** A terms, privacy or cookies page as an admin wrote it: the title, when it last changed and the Markdown body. */
+/** Renders a terms, privacy, or cookies page as an admin wrote it: the title, when it last changed, and the Markdown body. */
 export function LegalPageView({ page, title, homeHref, dateLocale, strings }: LegalPageViewProps) {
   const text = withDefaults(defaultLegalPageViewStrings, strings);
   // A malformed timestamp leaves the date out rather than failing the page.

package/src/legal/index.ts

@@ -1 +1,4 @@
-export { LegalPageView, defaultLegalPageViewStrings, type LegalPageViewProps, type LegalPageViewStrings } from "./LegalPageView";
+export type { LegalPage } from "../api/legalPage";
+export { LEGAL_PAGE_KEYS, type DefaultLegalPageKey } from "./keys";
+export { LegalPageView, type LegalPageViewProps } from "./LegalPageView";
+export { defaultLegalPageViewStrings, type LegalPageViewStrings } from "./legalPageViewStrings";

package/src/legal/keys.ts

@@ -0,0 +1,10 @@
+// Plain values with no imports, so the api, seo, admin, and legal entry points can share them.
+
+/**
+ * The legal pages a site has when it picks none, the same default as the `Keys` option of
+ * SjolystInnovation.AppKit.SiteSettings's `MapAppKitLegalPages`.
+ */
+export const LEGAL_PAGE_KEYS = ["terms", "privacy", "cookies"] as const;
+
+/** A key of `LEGAL_PAGE_KEYS`. The legal page types and calls default to it. */
+export type DefaultLegalPageKey = (typeof LEGAL_PAGE_KEYS)[number];

package/src/legal/legalPageViewStrings.ts

@@ -0,0 +1,17 @@
+// Plain values, with no "use client", so a server component can import them.
+
+/** The legal page's text around the content. Pass the app's own language. The defaults are English. */
+export interface LegalPageViewStrings {
+  /** The text before the date the page last changed. */
+  updated: string;
+  /** The text shown in place of the content when nobody has written the page yet. */
+  missing: string;
+  /** The text of the link back to the front page. */
+  toFrontPage: string;
+}
+
+export const defaultLegalPageViewStrings: LegalPageViewStrings = {
+  updated: "Last updated",
+  missing: "This content has not been written yet.",
+  toFrontPage: "Back to the front page",
+};

package/src/locales/nb.ts

@@ -0,0 +1,330 @@
+// Norwegian (bokmål) text for every app-kit component that takes `strings`. Plain values with type
+// only imports, so this entry point needs no peer dependency and a server component can import it.
+//
+// The wording follows Norwegian public services. A field error names the field or the problem first,
+// says what is wrong and how to fix it, as Skatteetaten does, and uses Altinn's phrasing such as
+// "Du må fylle ut" and "Bruk {max} eller færre tegn".
+
+import type { AdminUsersPanelStrings } from "../admin/adminUsersPanelStrings";
+import type { CompanySettingsFormStrings } from "../admin/companySettingsFormStrings";
+import type { EmailStatsPanelStrings } from "../admin/emailStatsPanelStrings";
+import type { LegalPagesEditorStrings } from "../admin/legalPagesEditorStrings";
+import type { StatHistoryChartStrings } from "../admin/statHistoryChartStrings";
+import type { BrandingManagerStrings } from "../branding/brandingManagerStrings";
+import type { DefaultLegalPageKey } from "../legal/keys";
+import type { LegalPageViewStrings } from "../legal/legalPageViewStrings";
+import type { SectionsEditorStrings } from "../sections/sectionsEditorStrings";
+import type { SharedSectionType } from "../sections/types";
+import type { CredentialsFormStrings } from "../session/react/credentialsFormStrings";
+import type { LoginPageStrings } from "../session/react/loginPageStrings";
+import type { SessionExpiryGuardStrings } from "../session/react/sessionExpiryGuardStrings";
+import type { ErrorStateStrings } from "../ui/errorStateStrings";
+import type { NotFoundStateStrings } from "../ui/notFoundStateStrings";
+import type { ResetPasswordFlowStrings } from "../ui/resetPasswordFlowStrings";
+import { PASSWORD_MIN_LENGTH, type PasswordStrings } from "../validation/passwordRules";
+
+const required = "Du må fylle ut dette feltet.";
+const tooLong = "Bruk {max} eller færre tegn.";
+const passwordRules = `Bruk minst ${PASSWORD_MIN_LENGTH} tegn, med minst én liten og én stor bokstav fra A til Z og ett siffer fra 0 til 9.`;
+
+/** For `passwordSchema` and the `passwordStrings` of `ResetPasswordFlow`. */
+export const nbPasswordStrings: PasswordStrings = {
+  tooShort: `Passordet er for kort. Bruk minst ${PASSWORD_MIN_LENGTH} tegn.`,
+  lowercase: "Passordet mangler en liten bokstav. Ta med en bokstav fra a til z.",
+  uppercase: "Passordet mangler en stor bokstav. Ta med en bokstav fra A til Z.",
+  digit: "Passordet mangler et siffer. Ta med et siffer fra 0 til 9.",
+};
+
+/** For `CredentialsForm`, and the `formStrings` of `LoginPage` and `SessionExpiryGuard`. */
+export const nbCredentialsFormStrings: CredentialsFormStrings = {
+  email: "E-post",
+  password: "Passord",
+  signIn: "Logg inn",
+  signingIn: "Logger inn…",
+  invalidCredentials: "Feil e-post eller passord.",
+  lockedOut: "Du har prøvd å logge inn for mange ganger, så innloggingen er låst en stund. Prøv igjen senere.",
+  signInUnavailable: "Innlogging er ikke tilgjengelig akkurat nå. Prøv igjen om litt.",
+  somethingWentWrong: "Noe gikk galt. Prøv igjen.",
+  showPassword: "Vis passord",
+  hidePassword: "Skjul passord",
+};
+
+/** For `LoginPage`. */
+export const nbLoginPageStrings: LoginPageStrings = {
+  title: "Logg inn",
+  forgotPassword: "Glemt passord?",
+  registerPrompt: "Har du ikke konto?",
+  register: "Opprett konto",
+};
+
+/** For `SessionExpiryGuard`. */
+export const nbSessionExpiryGuardStrings: SessionExpiryGuardStrings = {
+  expiredTitle: "Økten er utløpt",
+  expiredBody: "Økten din er utløpt. Logg inn på nytt for å lagre.",
+  expiringSoon: "Økten utløper om {minutes} min. Logg inn på nytt for å fortsette uten avbrudd.",
+  reSignIn: "Logg inn på nytt",
+  notRestored: "Vi fikk ikke fornyet økten. Prøv igjen.",
+  wrongUser: "Denne siden tilhører en annen bruker. Logg inn med samme konto.",
+  close: "Lukk",
+};
+
+/** For `ResetPasswordFlow`. Pass `nbPasswordStrings` as its `passwordStrings` too. */
+export const nbResetPasswordFlowStrings: ResetPasswordFlowStrings = {
+  title: "Sett nytt passord",
+  signInPrompt: "Husker du passordet?",
+  signIn: "Logg inn",
+  backToSignIn: "Logg inn →",
+  intro: "Skriv inn e-postadressen din, så sender vi en kode.",
+  codeSent: "Sjekk e-posten din. Vi har sendt deg en kode.",
+  email: "E-post",
+  code: "Kode fra e-post",
+  newPassword: "Nytt passord",
+  passwordHint: passwordRules,
+  requestCode: "Send kode",
+  requestingCode: "Sender…",
+  setPassword: "Lagre passord",
+  settingPassword: "Lagrer…",
+  done: "Passordet er endret. Du kan logge inn nå.",
+  passwordInvalid: `Passordet oppfyller ikke kravene. ${passwordRules}`,
+  somethingWentWrong: "Noe gikk galt. Prøv igjen.",
+  validation: {
+    required,
+    invalidEmail: "E-postadressen er ugyldig. Skriv den slik: navn@domene.no.",
+    passwordTooShort: "Passordet er for kort. Bruk minst {max} tegn.",
+    passwordRequiresDigit: "Passordet mangler et siffer. Ta med et siffer fra 0 til 9.",
+    passwordRequiresLower: "Passordet mangler en liten bokstav. Ta med en bokstav fra a til z.",
+    passwordRequiresUpper: "Passordet mangler en stor bokstav. Ta med en bokstav fra A til Z.",
+    passwordRequiresNonAlphanumeric: "Passordet mangler et spesialtegn. Ta med et tegn som ikke er en bokstav eller et siffer, for eksempel ! eller #.",
+  },
+  errors: {
+    invalidResetCode: "Koden er feil eller har gått ut. Sjekk koden i e-posten, eller be om en ny kode.",
+    tooManyResetAttempts: "Du har skrevet feil kode for mange ganger. Be om en ny kode.",
+  },
+};
+
+/** For `ErrorState`. */
+export const nbErrorStateStrings: ErrorStateStrings = {
+  title: "Midlertidig utilgjengelig",
+  body: "Vi får ikke kontakt med tjenesten akkurat nå. Prøv igjen om litt.",
+  tryAgain: "Prøv igjen",
+  home: "Til forsiden",
+};
+
+/** For `NotFoundState`. */
+export const nbNotFoundStateStrings: NotFoundStateStrings = {
+  code: "404",
+  body: "Siden finnes ikke, eller den er flyttet.",
+  home: "Til forsiden",
+};
+
+/** For `CompanySettingsForm`. */
+export const nbCompanySettingsFormStrings: CompanySettingsFormStrings = {
+  contactRecipient: "Mottaker for henvendelser",
+  contactRecipientHint: "Meldinger fra kontaktskjemaet sendes til denne adressen.",
+  companyName: "Firmanavn",
+  legalName: "Registrert navn",
+  legalNameHint: "Navnet i Enhetsregisteret. La feltet stå tomt for å bruke firmanavnet.",
+  orgNumber: "Organisasjonsnummer",
+  vatRegistered: "Registrert i Merverdiavgiftsregisteret",
+  vatHint: "Krever organisasjonsnummer. Når dette er slått på, vises nummeret med «MVA».",
+  streetAddress: "Gateadresse",
+  postalCode: "Postnummer",
+  addressLocality: "Poststed",
+  addressRegion: "Fylke",
+  addressHint: "Postnummer og poststed holdes atskilt slik at søkemotorer kan lese adressen. Fylke er valgfritt.",
+  publicEmail: "E-post som vises på nettsiden",
+  publicPhone: "Telefon som vises på nettsiden",
+  loading: "Laster…",
+  save: "Lagre",
+  saving: "Lagrer…",
+  loadFailed: "Kunne ikke laste innstillingene",
+  saved: "Innstillingene er lagret",
+  saveFailed: "Kunne ikke lagre innstillingene",
+  validation: {
+    required,
+    tooLong,
+    invalidEmail: "E-postadressen er ugyldig. Skriv den slik: navn@domene.no.",
+    orgNumberRequiredForVat: "Du må fylle ut organisasjonsnummer når virksomheten er registrert i Merverdiavgiftsregisteret.",
+    invalidOrgNumber: "Organisasjonsnummeret er ugyldig. Et organisasjonsnummer består av 9 siffer.",
+    invalidPostalCode: "Postnummeret er ugyldig. Et postnummer består av 4 siffer.",
+    placeRequired: "Du må fylle ut poststed når du har fylt ut postnummer.",
+  },
+};
+
+/** For `AdminUsersPanel`. */
+export const nbAdminUsersPanelStrings: AdminUsersPanelStrings = {
+  users: "Brukere",
+  showDeleted: "Vis slettede",
+  inviteUser: "Inviter bruker",
+  firstName: "Fornavn",
+  lastName: "Etternavn",
+  email: "E-post",
+  role: "Rolle",
+  sendInvite: "Send invitasjon",
+  sending: "Sender…",
+  inviteHint: "Brukeren får en e-post med en kode og setter passordet selv på siden for glemt passord.",
+  loading: "Laster…",
+  deleted: "slettet",
+  delete: "Slett",
+  remove: "Fjern",
+  noRoles: "Ingen roller",
+  addRole: "Legg til rolle",
+  add: "Legg til",
+  cancel: "Avbryt",
+  usersLoadFailed: "Kunne ikke laste brukerne",
+  rolesLoadFailed: "Kunne ikke laste rollene",
+  roleAssigned: "{name} har fått rollen {role}",
+  roleAssignFailed: "Kunne ikke tildele rollen",
+  roleRemoved: "{role} er fjernet fra {name}",
+  roleRemoveFailed: "Kunne ikke fjerne rollen",
+  confirmDelete: "Slette {name}? Navn, e-post og passord blir fjernet, og brukeren kan ikke logge inn igjen.",
+  userDeleted: "Brukeren er slettet",
+  userDeleteFailed: "Kunne ikke slette brukeren",
+  inviteIncomplete: "Du må fylle ut navn og e-post.",
+  inviteSent: "Invitasjonen er sendt. Brukeren får en kode for å sette passord.",
+  inviteFailed: "Kunne ikke sende invitasjonen",
+  validation: {
+    required,
+    tooLong,
+    invalidEmail: "E-postadressen er ugyldig. Skriv den slik: navn@domene.no.",
+    unknownRole: "Rollen finnes ikke. Velg en rolle fra listen.",
+    emailTaken: "E-postadressen har allerede en konto. Bruk en annen e-postadresse.",
+  },
+  errors: {
+    unknownRole: "Rollen finnes ikke. Velg en rolle fra listen.",
+    ownAdminRole: "Du kan ikke fjerne din egen administratorrolle. Be en annen administrator om å gjøre det.",
+    lastAdmin: "Den siste administratoren må beholde administratorrollen. Gi rollen til noen andre først.",
+    roleAssignFailed: "Rollen ble ikke tildelt. Prøv igjen.",
+    roleRemoveFailed: "Rollen ble ikke fjernet. Prøv igjen.",
+    emailTaken: "E-postadressen har allerede en konto. Bruk en annen e-postadresse.",
+  },
+  deleteErrors: {
+    lastAdmin: "Den siste administratoren kan ikke slettes. Gi administratorrollen til noen andre først.",
+    accountChangeConflict: "Noen andre endret brukerkontoene samtidig. Prøv igjen.",
+  },
+};
+
+/** For `LegalPagesEditor`. */
+export const nbLegalPagesEditorStrings: LegalPagesEditorStrings = {
+  heading: "Juridiske sider",
+  title: "Tittel",
+  bodyMarkdown: "Innhold (Markdown)",
+  notFilled: "Ikke fylt ut",
+  loading: "Laster…",
+  save: "Lagre",
+  saving: "Lagrer…",
+  loadFailed: "Kunne ikke laste sidene",
+  required: "Du må fylle ut tittel og innhold.",
+  saved: "Siden er lagret",
+  saveFailed: "Kunne ikke lagre siden",
+  validation: { required, tooLong },
+};
+
+/** The tab labels of the default legal pages, for the `keyLabels` of `LegalPagesEditor`. */
+export const nbLegalPageKeyLabels: Record<DefaultLegalPageKey, string> = {
+  terms: "Vilkår",
+  privacy: "Personvern",
+  cookies: "Informasjonskapsler",
+};
+
+/** For `StatHistoryChart`. */
+export const nbStatHistoryChartStrings: StatHistoryChartStrings = {
+  empty: "Ingen historikk ennå. Se innom i morgen.",
+  chart: "Statistikk over tid",
+};
+
+/** For `EmailStatsPanel`. */
+export const nbEmailStatsPanelStrings: EmailStatsPanelStrings = {
+  title: "E-post (siste {days} dager)",
+  sent: "Sendt",
+  delivered: "Levert",
+  bounces: "Returnert",
+  blocked: "Blokkert eller spam",
+  loading: "Laster…",
+  unavailable: "E-poststatistikken er ikke tilgjengelig akkurat nå. Prøv igjen senere.",
+};
+
+/** For `BrandingManager`. */
+export const nbBrandingManagerStrings: BrandingManagerStrings = {
+  title: "Logo og ikon",
+  logo: "Logo",
+  logoHint: "Vises i menylinjen og bunnteksten. PNG, JPEG, WebP eller GIF, maks 2 MB.",
+  icon: "Ikon (favicon)",
+  iconHint: "Ikonet i nettleserfanen. Kvadratisk PNG eller ICO, maks 2 MB.",
+  none: "ingen",
+  choose: "Velg fil",
+  remove: "Fjern",
+  save: "Lagre logo og ikon",
+  saving: "Lagrer…",
+  saved: "Logo og ikon er lagret",
+  saveFailed: "Kunne ikke lagre logo og ikon",
+  validation: {
+    invalidImage: "Ugyldig filformat. Last opp en bildefil.",
+    imageTooLarge: "Filen er for stor. Last opp en fil på 2 MB eller mindre.",
+  },
+};
+
+/** For `LegalPageView`. */
+export const nbLegalPageViewStrings: LegalPageViewStrings = {
+  updated: "Sist oppdatert",
+  missing: "Dette innholdet er ikke lagt inn ennå.",
+  toFrontPage: "Til forsiden",
+};
+
+/** For `SectionsEditor` and the section editors. */
+export const nbSectionsEditorStrings: SectionsEditorStrings = {
+  hide: "Skjul",
+  show: "Vis",
+  moveUp: "Flytt opp",
+  moveDown: "Flytt ned",
+  duplicate: "Dupliser",
+  remove: "Slett",
+  addSection: "Legg til seksjon",
+  heading: "Overskrift",
+  headingOptional: "Overskrift (valgfri)",
+  subheading: "Undertekst",
+  text: "Tekst",
+  body: "Brødtekst (Markdown)",
+  primaryButtonLabel: "Tekst på knapp 1",
+  primaryButtonHref: "Lenke på knapp 1",
+  secondaryButtonLabel: "Tekst på knapp 2",
+  secondaryButtonHref: "Lenke på knapp 2",
+  buttonLabel: "Tekst på knappen",
+  buttonHref: "Lenke på knappen",
+  bullets: "Punkter",
+  addBullet: "Legg til punkt",
+  count: "Antall som vises",
+  stats: "Tall",
+  source: "Kilde",
+  sourceStatic: "Fast tall",
+  value: "Verdi",
+  label: "Tekst",
+  addStat: "Legg til tall",
+  layout: "Oppsett",
+  layoutStandard: "Standard (midtstilt)",
+  layoutFull: "Full bredde",
+  layoutLeft: "Bilde til venstre, tekst til høyre",
+  layoutRight: "Bilde til høyre, tekst til venstre",
+  layoutOverlay: "Tekst over bildet",
+  layoutOverlayFull: "Tekst over bildet (full bredde)",
+  altText: "Alternativ tekst",
+  caption: "Bildetekst (valgfri)",
+  image: "Bilde",
+  uploadImage: "Last opp bilde",
+  replaceImage: "Bytt bilde",
+  uploading: "Laster opp…",
+  removeImage: "Fjern",
+  uploadFailed: "Kunne ikke laste opp bildet",
+};
+
+/** For the `typeLabels` of `SectionsEditor`. */
+export const nbSectionTypeLabels: Record<SharedSectionType, string> = {
+  hero: "Toppfelt",
+  feature: "Punktliste",
+  text: "Tekst",
+  feed: "Siste oppføringer",
+  contact: "Kontaktskjema",
+  cta: "Handlingsfelt",
+  stats: "Tallrad",
+  image: "Bilde",
+};

package/src/markdown/Markdown.tsx

@@ -5,20 +5,20 @@ import remarkGfm from "remark-gfm";
 
 type Tag = keyof React.JSX.IntrinsicElements;
 
-/** The props without the `node` react-markdown passes, which is no DOM attribute. */
+/** Copies the props without the `node` that react-markdown passes, since `node` is no DOM attribute. */
 function domProps<P extends ExtraProps>(props: P): Omit<P, "node"> {
   const rest = { ...props };
   delete rest.node;
   return rest;
 }
 
-/** An app's element, given the props without `node`, so it can spread them onto a DOM element. */
+/** Wraps an app's element so it gets the props without `node` and can spread them onto a DOM element. */
 function withoutNode(Element: ElementType) {
   const Wrapped = (props: ExtraProps) => <Element {...domProps(props)} />;
   return Wrapped;
 }
 
-/** An element with fixed classes. */
+/** Creates an element with fixed classes. */
 function styled<T extends Tag>(Element: T, className: string) {
   const Styled = (props: ComponentPropsWithoutRef<T> & ExtraProps) => {
     const Component = Element as ElementType;
@@ -27,7 +27,7 @@ function styled<T extends Tag>(Element: T, className: string) {
   return Styled;
 }
 
-/** The default look. A heading level one becomes a level two, since the page has its own `h1`. */
+/** The default elements. A level one heading becomes a level two heading, since the page has its own `h1`. */
 export const markdownComponents: Components = {
   h1: styled("h2", "text-lg font-semibold text-markdown-heading"),
   h2: styled("h2", "text-base font-semibold text-markdown-heading pt-2"),
@@ -54,20 +54,22 @@ export const markdownComponents: Components = {
 
 const isExternal = (href: string | undefined) => href != null && /^https?:\/\//i.test(href);
 
+/** Props for `Markdown`. */
 export interface MarkdownProps {
-  /** Markdown text. Empty, null or undefined renders nothing. */
+  /** The Markdown text. An empty string, null, or undefined renders nothing. */
   children: string | null | undefined;
-  /** Replaces the default element for a tag, such as `{ p: MyParagraph }`. It gets the props without `node`. */
+  /** The elements that replace the default element for a tag, such as `{ p: MyParagraph }`. Each gets the props without `node`. */
   components?: Components | undefined;
-  /** Opens links to other sites in a new tab, without passing the opener or referrer. */
+  /** Whether links to other sites open in a new tab, without passing the opener or referrer. Defaults to `false`. */
   externalLinks?: boolean | undefined;
-  /** Wraps the output in a `div` with these classes. Without it the elements render bare, so a parent's `space-y-*` spaces them. */
+  /** The classes for a `div` around the output. Without it, the elements render bare, so a parent's `space-y-*` spaces them. */
   className?: string | undefined;
 }
 
 /**
- * Markdown from an editor or the API, with GitHub tables, lists and links. Raw HTML is never
- * rendered, and the output is sanitized, so the text cannot inject scripts, styles or event handlers.
+ * Renders Markdown from an editor or the API, with GitHub tables, lists, and links. Raw HTML is
+ * never rendered, and the output is sanitized, so the text cannot inject scripts, styles, or event
+ * handlers.
  */
 export function Markdown({ children, components, externalLinks = false, className }: MarkdownProps) {
   if (!children) return null;

package/src/markdown/index.ts

@@ -1 +1 @@
-export { Markdown, markdownComponents, type MarkdownProps } from "./Markdown";
+export { Markdown, type MarkdownProps } from "./Markdown";

package/src/next-auth.d.ts

@@ -2,23 +2,25 @@
 // them with `import "@sjolystinnovation/app-kit/next-auth";` in one of its own .d.ts files.
 import "next-auth";
 import "next-auth/jwt";
+import type { SessionUser } from "./auth/createAuthOptions";
+import type { SessionError } from "./session/expiry";
 
 declare module "next-auth" {
   interface Session {
-    user: { id: string; name: string; email: string; roles: string[] };
+    user: SessionUser;
     accessToken: string;
-    error?: string | undefined;
-    absoluteExpiresAt?: number;
+    error?: SessionError | undefined;
+    absoluteExpiresAt?: number | undefined;
   }
 }
 
 declare module "next-auth/jwt" {
   interface JWT {
-    accessToken?: string;
-    refreshToken?: string;
-    refreshAt?: number;
-    loginAt?: number;
-    user?: { id: string; name: string; email: string; roles: string[] };
-    error?: string | undefined;
+    accessToken?: string | undefined;
+    refreshToken?: string | undefined;
+    refreshAt?: number | undefined;
+    loginAt?: number | undefined;
+    user?: SessionUser | undefined;
+    error?: SessionError | undefined;
   }
 }

package/src/next-config/headers.ts

@@ -0,0 +1,96 @@
+/** A response header, as `next.config.ts` lists them. */
+export interface Header {
+  key: string;
+  value: string;
+}
+
+/** Gets the API's origin, such as `https://api.example.com`. Returns `""` when the URL is missing or invalid. */
+export function apiOrigin(apiUrl: string | undefined): string {
+  if (!apiUrl) return "";
+  try {
+    return new URL(apiUrl).origin;
+  } catch {
+    return "";
+  }
+}
+
+/** Gets the API's base URL with its path, such as `https://api.example.com/api`, without a trailing slash. Returns `""` when the URL is missing or invalid. */
+export function apiBaseUrl(apiUrl: string | undefined): string {
+  if (!apiUrl) return "";
+  try {
+    return new URL(apiUrl).toString().replace(/\/$/, "");
+  } catch {
+    return "";
+  }
+}
+
+/** The Content-Security-Policy options for `defineAppConfig`. */
+export interface CspOptions {
+  /** The app's API URL, usually `process.env.NEXT_PUBLIC_API_URL`. The policy allows fetches to its origin. */
+  apiUrl: string | undefined;
+  /** Whether this is a development build. A development build also allows `'unsafe-eval'`, which hot reload needs. */
+  dev: boolean;
+  /** Whether to also allow `ws:` and `wss:` to the API, for a WebSocket such as SignalR. */
+  websocket?: boolean | undefined;
+  /** Whether to also allow images from the API origin. You do not need it when images go through the content images rewrite. */
+  imgFromApi?: boolean | undefined;
+  /** The extra sources for `connect-src`. */
+  connectSrc?: readonly string[] | undefined;
+  /** The extra sources for `img-src`. */
+  imgSrc?: readonly string[] | undefined;
+  /** The sources for `frame-src`. Defaults to `'none'`, since no page embeds a frame. */
+  frameSrc?: readonly string[] | undefined;
+  /** The sources for `object-src`. Defaults to `'none'`, since no page embeds an object. */
+  objectSrc?: readonly string[] | undefined;
+}
+
+const sources = (list: readonly (string | false | undefined)[]) => list.filter(Boolean).join(" ");
+
+/**
+ * Builds the Content-Security-Policy for an app's pages. Scripts allow `'unsafe-inline'`, because a
+ * nonce would make every statically rendered page dynamic.
+ */
+export function contentSecurityPolicy(o: CspOptions): string {
+  const origin = apiOrigin(o.apiUrl);
+  const wsOrigin = o.websocket ? origin.replace(/^https:/, "wss:").replace(/^http:/, "ws:") : "";
+  return [
+    "default-src 'self'",
+    o.dev ? "script-src 'self' 'unsafe-eval' 'unsafe-inline'" : "script-src 'self' 'unsafe-inline'",
+    "style-src 'self' 'unsafe-inline'",
+    `img-src ${sources(["'self'", o.imgFromApi && origin, "data:", "blob:", ...(o.imgSrc ?? [])])}`,
+    `connect-src ${sources(["'self'", origin, wsOrigin, ...(o.connectSrc ?? [])])}`,
+    `frame-src ${sources(o.frameSrc ?? ["'none'"])}`,
+    `object-src ${sources(o.objectSrc ?? ["'none'"])}`,
+    "font-src 'self'",
+    "base-uri 'self'",
+    "form-action 'self'",
+    "frame-ancestors 'none'",
+    "upgrade-insecure-requests",
+  ].join("; ");
+}
+
+/** Builds the security headers for an app's pages, including the Content-Security-Policy. */
+export function securityHeaders(o: CspOptions & { permissionsPolicy?: string | undefined }): Header[] {
+  return [
+    { key: "X-Content-Type-Options", value: "nosniff" },
+    { key: "X-Frame-Options", value: "DENY" },
+    { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+    { key: "X-DNS-Prefetch-Control", value: "on" },
+    { key: "Permissions-Policy", value: o.permissionsPolicy ?? "camera=(), microphone=(), geolocation=()" },
+    { key: "Strict-Transport-Security", value: "max-age=31536000; includeSubDomains" },
+    { key: "Content-Security-Policy", value: contentSecurityPolicy(o) },
+  ];
+}
+
+/**
+ * Builds the rewrite that proxies content images, so the browser never contacts the API host. It is
+ * a rewrite rather than a route handler, so the query string and the Accept header, which webp
+ * needs, pass through. Returns no rewrite when the API URL is missing or invalid.
+ */
+export function contentImagesRewrite(apiUrl: string | undefined, o: { source?: string | undefined; upstreamPath?: string | undefined } = {}) {
+  const base = apiBaseUrl(apiUrl);
+  if (!base) return [];
+  const source = o.source ?? "/content-images";
+  const upstream = o.upstreamPath ?? "/content-images";
+  return [{ source: `${source}/:path*`, destination: `${base}${upstream}/:path*` }];
+}