@sjolystinnovation/app-kit 0.20.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjolystinnovation/app-kit",
-  "version": "0.20.0",
+  "version": "0.22.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",
@@ -31,11 +31,13 @@
     "./validation": "./src/validation/index.ts",
     "./next-config": "./src/next-config/index.ts",
     "./markdown": "./src/markdown/index.ts",
+    "./legal": "./src/legal/index.ts",
     "./seo": "./src/seo/index.ts",
     "./seo/og": "./src/seo/og/index.tsx",
     "./branding": "./src/branding/index.ts",
     "./branding/server": "./src/branding/server.ts",
     "./payments": "./src/payments/index.ts",
+    "./testing": "./src/testing/index.ts",
     "./styles.css": "./src/styles.css"
   },
   "files": [
@@ -60,12 +62,22 @@
     "rehype-sanitize": "^6",
     "remark-gfm": "^4",
     "sonner": "^2",
+    "vitest": "^5",
     "zod": "^4"
   },
   "peerDependenciesMeta": {
+    "axios": {
+      "optional": true
+    },
+    "next-auth": {
+      "optional": true
+    },
     "sonner": {
       "optional": true
     },
+    "vitest": {
+      "optional": true
+    },
     "zod": {
       "optional": true
     },

package/src/admin/AdminShell.tsx

@@ -13,6 +13,7 @@ export interface AdminTab {
 
 type GateProps = RoleGateProps extends infer P ? (P extends unknown ? Omit<P, "children"> : never) : never;
 
+/** Props for `AdminShell`. The gate props are `RoleGate`'s, without `children`. */
 export type AdminShellProps = GateProps & {
   title: ReactNode;
   tabs: readonly AdminTab[];
@@ -48,6 +49,6 @@ export function AdminShell({ title, tabs, children, ...gate }: AdminShellProps)
       {children}
     </div>
   );
-  // The gate props came in as one of RoleGate's two shapes, so they go back as that shape.
+  // The gate props arrive as one of RoleGate's two shapes, so they go back as that shape.
   return <RoleGate {...({ ...gate, children: page } as RoleGateProps)} />;
 }

package/src/admin/AdminUsersPanel.tsx

@@ -9,12 +9,13 @@ import { Toggle } from "../ui/Toggle";
 import { withDefaults, type TextOverrides } from "../ui/withDefaults";
 import { defaultAdminUsersPanelStrings, type AdminUsersPanelStrings } from "./adminUsersPanelStrings";
 
+/** Props for `AdminUsersPanel`. */
 export interface AdminUsersPanelProps {
   /** The user admin calls, such as `createAdminUsersService(api)`. */
   service: ReturnType<typeof createAdminUsersService>;
   /** The roles an admin may give, from the app's own endpoint. */
   getRoles: () => Promise<string[]>;
-  /** The role a new invite starts with. `Admin` by default. */
+  /** The role a new invite starts with. Defaults to `Admin`. */
   defaultInviteRole?: string | undefined;
   strings?: TextOverrides<AdminUsersPanelStrings> | undefined;
 }
@@ -39,7 +40,7 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
   const [roleLoading, setRoleLoading] = useState(false);
   const [invite, setInvite] = useState({ email: "", firstName: "", lastName: "", role: defaultInviteRole });
   const [inviting, setInviting] = useState(false);
-  // Bumped to fetch the list again after a change, through the same effect as every other load.
+  // Bumping it fetches the list again after a change, through the same effect as every other load.
   const [reloads, setReloads] = useState(0);
   // The latest service, so an inline one does not fetch the list again on every render. The roles
   // load once, so the first getRoles is enough.
@@ -134,7 +135,12 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
     }
     setInviting(true);
     try {
-      await serviceRef.current.invite(invite.email.trim(), invite.firstName.trim(), invite.lastName.trim(), invite.role);
+      await serviceRef.current.invite({
+        email: invite.email.trim(),
+        firstName: invite.firstName.trim(),
+        lastName: invite.lastName.trim(),
+        role: invite.role,
+      });
       toast.success(text.inviteSent);
       setInvite({ email: "", firstName: "", lastName: "", role: invite.role });
       reload();

package/src/admin/CompanySettingsForm.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
+import type { SiteSettings } from "../api/services";
+import { toast } from "../toast";
+import { TextInput } from "../ui/TextInput";
+import { Toggle } from "../ui/Toggle";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultCompanySettingsFormStrings, type CompanySettingsFormStrings } from "./companySettingsFormStrings";
+
+/** Props for `CompanySettingsForm`. */
+export interface CompanySettingsFormProps {
+  /** The settings calls, such as `createSettingsService(api)`. */
+  service: { get: () => Promise<SiteSettings>; update: (settings: SiteSettings) => Promise<SiteSettings> };
+  strings?: TextOverrides<CompanySettingsFormStrings> | undefined;
+  /** The content shown below the form once the settings have loaded, such as the `BrandingManager`. */
+  children?: ReactNode;
+}
+
+const EMPTY: SiteSettings = {
+  contactRecipientEmail: "",
+  companyName: "",
+  companyLegalName: "",
+  orgNumber: "",
+  vatRegistered: false,
+  streetAddress: "",
+  postalCode: "",
+  addressLocality: "",
+  addressRegion: "",
+  publicEmail: "",
+  publicPhone: "",
+};
+
+/**
+ * The admin form for the business details the public pages show: the contact recipient, names, org
+ * number and VAT, the address in parts, and the public email and phone.
+ */
+export function CompanySettingsForm({ service, strings, children }: CompanySettingsFormProps) {
+  const text = withDefaults(defaultCompanySettingsFormStrings, strings);
+  const [settings, setSettings] = useState<SiteSettings>(EMPTY);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [failed, setFailed] = useState(false);
+  // The latest service, so an inline one does not load the settings again on every render.
+  const serviceRef = useRef(service);
+  useEffect(() => {
+    serviceRef.current = service;
+  }, [service]);
+
+  useEffect(() => {
+    serviceRef.current
+      .get()
+      .then(setSettings)
+      .catch(() => {
+        // No form without the saved settings, since saving a blank one would erase them.
+        setFailed(true);
+        toast.error(text.loadFailed);
+      })
+      .finally(() => setLoading(false));
+  }, [text.loadFailed]);
+
+  const patch = (changes: Partial<SiteSettings>) => setSettings(prev => ({ ...prev, ...changes }));
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      setSettings(await serviceRef.current.update(settings));
+      toast.success(text.saved);
+    } catch (err) {
+      toast.error(err instanceof Error && err.message ? err.message : text.saveFailed);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <p className="text-gray-500">{text.loading}</p>;
+  if (failed) return <p className="text-gray-500">{text.loadFailed}</p>;
+
+  return (
+    <div className="space-y-8">
+      <form onSubmit={handleSubmit} className="max-w-md space-y-4">
+        <TextInput
+          label={text.contactRecipient}
+          name="contactRecipientEmail"
+          type="email"
+          value={settings.contactRecipientEmail}
+          onChange={e => patch({ contactRecipientEmail: e.target.value })}
+          required
+        />
+        <p className="text-xs text-gray-500">{text.contactRecipientHint}</p>
+
+        <TextInput label={text.companyName} name="companyName" value={settings.companyName} onChange={e => patch({ companyName: e.target.value })} required />
+        <TextInput label={text.legalName} name="companyLegalName" value={settings.companyLegalName} onChange={e => patch({ companyLegalName: e.target.value })} />
+        <p className="text-xs text-gray-500">{text.legalNameHint}</p>
+
+        <TextInput label={text.orgNumber} name="orgNumber" value={settings.orgNumber} onChange={e => patch({ orgNumber: e.target.value })} />
+        <Toggle label={text.vatRegistered} checked={settings.vatRegistered} onChange={v => patch({ vatRegistered: v })} />
+        <p className="text-xs text-gray-500">{text.vatHint}</p>
+
+        <TextInput label={text.streetAddress} name="streetAddress" value={settings.streetAddress} onChange={e => patch({ streetAddress: e.target.value })} required />
+        <div className="grid gap-4 sm:grid-cols-[8rem_1fr]">
+          <TextInput label={text.postalCode} name="postalCode" inputMode="numeric" value={settings.postalCode} onChange={e => patch({ postalCode: e.target.value })} />
+          <TextInput label={text.addressLocality} name="addressLocality" value={settings.addressLocality} onChange={e => patch({ addressLocality: e.target.value })} />
+        </div>
+        <TextInput label={text.addressRegion} name="addressRegion" value={settings.addressRegion} onChange={e => patch({ addressRegion: e.target.value })} />
+        <p className="text-xs text-gray-500">{text.addressHint}</p>
+        <TextInput label={text.publicEmail} name="publicEmail" type="email" value={settings.publicEmail} onChange={e => patch({ publicEmail: e.target.value })} required />
+        <TextInput label={text.publicPhone} name="publicPhone" value={settings.publicPhone} onChange={e => patch({ publicPhone: e.target.value })} required />
+
+        <button
+          type="submit"
+          disabled={saving}
+          className="rounded-button bg-button-primary-bg text-button-primary-text font-semibold px-5 py-2.5 hover:brightness-95 disabled:opacity-60 transition"
+        >
+          {saving ? text.saving : text.save}
+        </button>
+      </form>
+
+      {children}
+    </div>
+  );
+}

package/src/admin/LegalPagesEditor.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { LegalPage } from "../api/services";
+import { toast } from "../toast";
+import { TextInput } from "../ui/TextInput";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultLegalPagesEditorStrings, type LegalPagesEditorStrings } from "./legalPagesEditorStrings";
+import { LocaleTabs } from "./LocaleTabs";
+
+/** Props for `LegalPagesEditor`. */
+export interface LegalPagesEditorProps<K extends string, L extends string> {
+  /** The legal page calls, such as `createLegalService(api, publicApi)`. */
+  service: {
+    listAll: () => Promise<LegalPage<K>[]>;
+    save: (page: { key: K; locale: L; title: string; bodyMarkdown: string }) => Promise<unknown>;
+  };
+  /** The pages, in tab order. The editor opens on the first. */
+  keys: readonly K[];
+  /** Each page's tab label, such as `Terms`. */
+  keyLabels: Record<K, string>;
+  /** The locales each page is written in. The editor opens on the first. */
+  locales: readonly L[];
+  /** Each locale's tab label, such as `Norsk`. */
+  localeLabels: Record<L, string>;
+  strings?: TextOverrides<LegalPagesEditorStrings> | undefined;
+}
+
+type Draft = { title: string; bodyMarkdown: string };
+
+const emptyDraft: Draft = { title: "", bodyMarkdown: "" };
+
+/** The admin editor for the legal pages: one page and one locale at a time, with the title and the Markdown body. */
+export function LegalPagesEditor<K extends string, L extends string>({ service, keys, keyLabels, locales, localeLabels, strings }: LegalPagesEditorProps<K, L>) {
+  const text = withDefaults(defaultLegalPagesEditorStrings, strings);
+  const [drafts, setDrafts] = useState<Record<string, Draft>>({});
+  const [activeKey, setActiveKey] = useState<K | undefined>(keys[0]);
+  const [activeLocale, setActiveLocale] = useState<L | undefined>(locales[0]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [failed, setFailed] = useState(false);
+  // The latest service, so an inline one does not load the pages again on every render.
+  const serviceRef = useRef(service);
+  useEffect(() => {
+    serviceRef.current = service;
+  }, [service]);
+
+  useEffect(() => {
+    serviceRef.current
+      .listAll()
+      .then(pages => setDrafts(Object.fromEntries(pages.map(p => [`${p.key}:${p.locale}`, { title: p.title, bodyMarkdown: p.bodyMarkdown }]))))
+      .catch((err: unknown) => {
+        // No editor without the saved pages, since saving a blank one would erase it.
+        setFailed(true);
+        toast.error(err instanceof Error && err.message ? err.message : text.loadFailed);
+      })
+      .finally(() => setLoading(false));
+  }, [text.loadFailed]);
+
+  if (activeKey === undefined || activeLocale === undefined) return null;
+
+  const slot = `${activeKey}:${activeLocale}`;
+  const draft = drafts[slot] ?? emptyDraft;
+
+  const patch = (changes: Partial<Draft>) => setDrafts(prev => ({ ...prev, [slot]: { ...(prev[slot] ?? emptyDraft), ...changes } }));
+
+  const save = async () => {
+    if (draft.title.trim() === "" || draft.bodyMarkdown.trim() === "") {
+      toast.error(text.required);
+      return;
+    }
+    setSaving(true);
+    try {
+      await serviceRef.current.save({ key: activeKey, locale: activeLocale, title: draft.title.trim(), bodyMarkdown: draft.bodyMarkdown });
+      toast.success(text.saved);
+    } catch (err) {
+      toast.error(err instanceof Error && err.message ? err.message : text.saveFailed);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <p className="text-gray-500">{text.loading}</p>;
+  if (failed) return <p className="text-gray-500">{text.loadFailed}</p>;
+
+  const filled = Object.fromEntries(locales.map(l => [l, (drafts[`${activeKey}:${l}`]?.bodyMarkdown ?? "") !== ""])) as Record<L, boolean>;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="font-bold text-gray-900">{text.heading}</h2>
+        <button
+          onClick={save}
+          disabled={saving}
+          className="rounded-button bg-button-primary-bg text-button-primary-text font-semibold px-5 py-2 text-sm hover:brightness-95 disabled:opacity-60 transition"
+        >
+          {saving ? text.saving : text.save}
+        </button>
+      </div>
+
+      <div className="flex gap-1">
+        {keys.map(key => (
+          <button
+            key={key}
+            onClick={() => setActiveKey(key)}
+            aria-pressed={key === activeKey}
+            className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${key === activeKey ? "bg-gray-900 text-white" : "text-gray-600 hover:bg-gray-100"}`}
+          >
+            {keyLabels[key]}
+          </button>
+        ))}
+      </div>
+
+      <LocaleTabs locales={locales} labels={localeLabels} active={activeLocale} onChange={setActiveLocale} filled={filled} notFilled={text.notFilled} />
+
+      <TextInput label={text.title} value={draft.title} onChange={e => patch({ title: e.target.value })} />
+
+      <div>
+        <label htmlFor="legal-body" className="block text-sm font-medium text-gray-700 mb-1">
+          {text.bodyMarkdown}
+        </label>
+        <textarea
+          id="legal-body"
+          rows={24}
+          value={draft.bodyMarkdown}
+          onChange={e => patch({ bodyMarkdown: e.target.value })}
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+    </div>
+  );
+}

package/src/admin/LocaleTabs.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+/** Props for `LocaleTabs`. */
+export interface LocaleTabsProps<L extends string> {
+  locales: readonly L[];
+  /** Each locale's tab label, such as `Norsk`. */
+  labels: Record<L, string>;
+  active: L;
+  onChange: (locale: L) => void;
+  /** The locales that have content. A locale set to `false` gets a dot titled `notFilled`. */
+  filled?: Partial<Record<L, boolean>> | undefined;
+  /** The dot's title. Defaults to "Not filled in". */
+  notFilled?: string | undefined;
+}
+
+/** Renders tabs for editing one translation at a time. */
+export function LocaleTabs<L extends string>({ locales, labels, active, onChange, filled, notFilled = "Not filled in" }: LocaleTabsProps<L>) {
+  return (
+    <div className="flex items-center gap-1 border-b border-gray-200">
+      {locales.map(locale => (
+        <button
+          key={locale}
+          type="button"
+          onClick={() => onChange(locale)}
+          aria-pressed={locale === active}
+          className={`px-4 py-2 text-sm font-semibold border-b-2 -mb-px transition-colors ${
+            locale === active ? "border-gray-900 text-gray-900" : "border-transparent text-gray-500 hover:text-gray-900"
+          }`}
+        >
+          {labels[locale]}
+          {filled?.[locale] === false && <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-amber-400 align-middle" title={notFilled} />}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/admin/StatHistoryChart.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultStatHistoryChartStrings, STAT_SERIES_COLORS, type StatHistoryChartStrings } from "./statHistoryChartStrings";
+
+/** One line on the chart. */
+export interface StatSeries<T> {
+  /** The field of each day's row the line plots. A missing or non-numeric value counts as zero. */
+  key: keyof T & string;
+  label: string;
+  /** The line's color. Defaults to the next color in `STAT_SERIES_COLORS`. */
+  color?: string | undefined;
+}
+
+/** Props for `StatHistoryChart`. */
+export interface StatHistoryChartProps<T extends { date: string }> {
+  /** One row per day, oldest first, with `date` as `YYYY-MM-DD`. */
+  data: readonly T[];
+  series: readonly StatSeries<T>[];
+  strings?: TextOverrides<StatHistoryChartStrings> | undefined;
+}
+
+const W = 720;
+const H = 240;
+const PAD = { top: 16, right: 16, bottom: 28, left: 32 };
+
+/**
+ * Renders a line per series over the days, with the scale from zero to the highest shown value. The
+ * legend buttons hide and show a line, and the scale follows the lines that are shown.
+ */
+export function StatHistoryChart<T extends { date: string }>({ data, series, strings }: StatHistoryChartProps<T>) {
+  const text = withDefaults(defaultStatHistoryChartStrings, strings);
+  const [hidden, setHidden] = useState<string[]>([]);
+
+  const toggle = (key: string) => setHidden(prev => (prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]));
+
+  if (data.length === 0) {
+    return <p className="text-sm text-gray-500">{text.empty}</p>;
+  }
+
+  const lines = series.map((s, i) => ({ ...s, color: s.color ?? STAT_SERIES_COLORS[i % STAT_SERIES_COLORS.length] }));
+  const shown = lines.filter(s => !hidden.includes(s.key));
+  const innerW = W - PAD.left - PAD.right;
+  const innerH = H - PAD.top - PAD.bottom;
+  // An API without a given series sends no value. It counts as zero rather than poisoning the scale with NaN.
+  const value = (d: T, key: keyof T) => Number(d[key]) || 0;
+  const maxVal = Math.max(1, ...data.flatMap(d => shown.map(s => value(d, s.key))));
+  const n = data.length;
+
+  const x = (i: number) => PAD.left + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW);
+  const y = (v: number) => PAD.top + innerH - (v / maxVal) * innerH;
+
+  const path = (key: keyof T) => data.map((d, i) => `${i === 0 ? "M" : "L"} ${x(i).toFixed(1)} ${y(value(d, key)).toFixed(1)}`).join(" ");
+
+  const ticks = [...new Set([0, Math.round(maxVal / 2), maxVal])];
+  const labelIdx = [...new Set([0, Math.floor((n - 1) / 2), n - 1])];
+
+  return (
+    <div>
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-auto" role="img" aria-label={text.chart}>
+        {ticks.map(t => (
+          <g key={t}>
+            <line x1={PAD.left} y1={y(t)} x2={W - PAD.right} y2={y(t)} className="stroke-chart-grid" strokeWidth={1} />
+            <text x={PAD.left - 6} y={y(t) + 3} textAnchor="end" fontSize={10} className="fill-chart-label">
+              {t}
+            </text>
+          </g>
+        ))}
+        {labelIdx.map(i => (
+          <text key={i} x={x(i)} y={H - 8} textAnchor="middle" fontSize={10} className="fill-chart-label">
+            {data[i]?.date.slice(5)}
+          </text>
+        ))}
+        {shown.map(s => (
+          <path key={s.key} d={path(s.key)} fill="none" stroke={s.color} strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />
+        ))}
+      </svg>
+      <div className="mt-3 flex flex-wrap gap-2">
+        {lines.map(s => {
+          const off = hidden.includes(s.key);
+          return (
+            <button
+              key={s.key}
+              type="button"
+              onClick={() => toggle(s.key)}
+              aria-pressed={!off}
+              className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition ${
+                off ? "border-gray-200 bg-white text-gray-400" : "border-gray-300 bg-gray-50 text-gray-700"
+              }`}
+            >
+              <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ backgroundColor: off ? "#d1d5db" : s.color }} />
+              {s.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/admin/adminUsersPanelStrings.ts

@@ -1,8 +1,8 @@
 // Plain values, with no "use client", so a server component can import them.
 
 /**
- * The users panel's text. Pass the app's own language. The defaults are English. `{name}` and `{role}`
- * are filled in where a text names them.
+ * The users panel's text. Pass the app's own language. The defaults are English. The panel fills in
+ * `{name}` and `{role}` where a text names them.
  */
 export interface AdminUsersPanelStrings {
   users: string;
@@ -19,7 +19,7 @@ export interface AdminUsersPanelStrings {
   /** The tag after a deleted user's name. */
   deleted: string;
   delete: string;
-  /** Before the role name on the button that takes a role away. */
+  /** The text before the role name on the button that takes a role away. */
   remove: string;
   noRoles: string;
   addRole: string;

package/src/admin/companySettingsFormStrings.ts

@@ -0,0 +1,50 @@
+// Plain values, with no "use client", so a server component can import them.
+
+/** The company settings form's text. Pass the app's own language. The defaults are English. */
+export interface CompanySettingsFormStrings {
+  contactRecipient: string;
+  contactRecipientHint: string;
+  companyName: string;
+  legalName: string;
+  legalNameHint: string;
+  orgNumber: string;
+  vatRegistered: string;
+  vatHint: string;
+  streetAddress: string;
+  postalCode: string;
+  addressLocality: string;
+  addressRegion: string;
+  addressHint: string;
+  publicEmail: string;
+  publicPhone: string;
+  loading: string;
+  save: string;
+  saving: string;
+  loadFailed: string;
+  saved: string;
+  saveFailed: string;
+}
+
+export const defaultCompanySettingsFormStrings: CompanySettingsFormStrings = {
+  contactRecipient: "Contact enquiry recipient",
+  contactRecipientHint: "Contact form enquiries are emailed to this address.",
+  companyName: "Company name",
+  legalName: "Legal name",
+  legalNameHint: "The registered name. Leave blank to use the company name.",
+  orgNumber: "Organisation number",
+  vatRegistered: "VAT (MVA) registered",
+  vatHint: "When on, the org number is shown with the “MVA” suffix.",
+  streetAddress: "Street address",
+  postalCode: "Postal code",
+  addressLocality: "Place",
+  addressRegion: "County",
+  addressHint: "The county is optional.",
+  publicEmail: "Public email",
+  publicPhone: "Public phone",
+  loading: "Loading…",
+  save: "Save",
+  saving: "Saving…",
+  loadFailed: "Failed to load settings",
+  saved: "Settings saved",
+  saveFailed: "Failed to save",
+};

package/src/admin/index.ts

@@ -1,6 +1,20 @@
+export { CompanySettingsForm } from "./CompanySettingsForm";
+export type { CompanySettingsFormProps } from "./CompanySettingsForm";
+export { defaultCompanySettingsFormStrings } from "./companySettingsFormStrings";
+export type { CompanySettingsFormStrings } from "./companySettingsFormStrings";
 export { AdminShell } from "./AdminShell";
 export type { AdminShellProps, AdminTab } from "./AdminShell";
+export { StatHistoryChart } from "./StatHistoryChart";
+export { STAT_SERIES_COLORS, defaultStatHistoryChartStrings } from "./statHistoryChartStrings";
+export type { StatHistoryChartProps, StatSeries } from "./StatHistoryChart";
+export type { StatHistoryChartStrings } from "./statHistoryChartStrings";
 export { AdminUsersPanel } from "./AdminUsersPanel";
 export type { AdminUsersPanelProps } from "./AdminUsersPanel";
 export { defaultAdminUsersPanelStrings } from "./adminUsersPanelStrings";
 export type { AdminUsersPanelStrings } from "./adminUsersPanelStrings";
+export { LegalPagesEditor } from "./LegalPagesEditor";
+export type { LegalPagesEditorProps } from "./LegalPagesEditor";
+export { defaultLegalPagesEditorStrings } from "./legalPagesEditorStrings";
+export type { LegalPagesEditorStrings } from "./legalPagesEditorStrings";
+export { LocaleTabs } from "./LocaleTabs";
+export type { LocaleTabsProps } from "./LocaleTabs";

package/src/admin/legalPagesEditorStrings.ts

@@ -0,0 +1,32 @@
+// Plain values, with no "use client", so a server component can import them.
+
+/** The legal pages editor's text. Pass the app's own language. The defaults are English. */
+export interface LegalPagesEditorStrings {
+  heading: string;
+  title: string;
+  bodyMarkdown: string;
+  /** The title of the dot on a locale with no content yet. */
+  notFilled: string;
+  loading: string;
+  save: string;
+  saving: string;
+  loadFailed: string;
+  /** The message shown when the title or the content is blank. */
+  required: string;
+  saved: string;
+  saveFailed: string;
+}
+
+export const defaultLegalPagesEditorStrings: LegalPagesEditorStrings = {
+  heading: "Legal pages",
+  title: "Title",
+  bodyMarkdown: "Content (Markdown)",
+  notFilled: "Not filled in",
+  loading: "Loading…",
+  save: "Save",
+  saving: "Saving…",
+  loadFailed: "Failed to load the legal pages",
+  required: "Fill in the title and the content",
+  saved: "Page saved",
+  saveFailed: "Failed to save the page",
+};

package/src/admin/statHistoryChartStrings.ts

@@ -0,0 +1,17 @@
+// Plain values, with no "use client", so a server component can import them.
+
+/** The chart's text. Pass the app's own language. The defaults are English. */
+export interface StatHistoryChartStrings {
+  /** The text shown instead of the chart when there are no days yet. */
+  empty: string;
+  /** The chart's accessible name. */
+  chart: string;
+}
+
+export const defaultStatHistoryChartStrings: StatHistoryChartStrings = {
+  empty: "No history yet. Check back tomorrow.",
+  chart: "Stats over time",
+};
+
+/** The default line colors, in order: blue, green, amber, teal, and purple. */
+export const STAT_SERIES_COLORS = ["#2563eb", "#16a34a", "#d97706", "#0d9488", "#9333ea"] as const;

package/src/api/apiFieldErrors.ts

@@ -1,10 +1,10 @@
 import axios from "axios";
 
 /**
- * The per-field messages of an ASP.NET validation problem, keyed by the field's name in camelCase so
- * they match the form's own names: `{ errors: { OrgNumber: ["..."] } }` becomes
- * `{ orgNumber: ["..."] }`. Takes the failed axios call or the response body. Answers null when there
- * are no field errors, so the caller falls back to one message for the whole form.
+ * Gets the per-field messages of an ASP.NET validation problem, keyed by the field's name in
+ * camelCase so they match the form's own names: `{ errors: { OrgNumber: ["..."] } }` becomes
+ * `{ orgNumber: ["..."] }`. Takes the failed axios call or the response body. Returns null when
+ * there are no field errors, so the caller falls back to one message for the whole form.
  */
 export function apiFieldErrors(error: unknown): Record<string, string[]> | null {
   const data = axios.isAxiosError(error) ? error.response?.data : error;