@sjolystinnovation/app-kit 0.20.0 → 0.21.0

package/README.md

@@ -243,6 +243,17 @@ export const getRecipe = (id: number) =>
   request(() => api.get<Recipe>(`/recipes/${id}`), "Could not load the recipe.");
 ```
 
+`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
+export const getCompanyInfo = async () => mergeCompanyInfo(await publicGetOptional<CompanyInfo>("/company"), COMPANY);
+```
+
 `requestRevalidate(target, endpoint?)` asks the app's revalidate route to purge the pages behind
 `target`, so an edit shows at once. It posts to `/api/revalidate` unless `endpoint` says otherwise.
 It never throws. On failure the pages' own revalidate window is the fallback.
@@ -321,6 +332,26 @@ export const POST = createRevalidateRoute({
 });
 ```
 
+`defineRevalidateTargets({ locales, targets })`, from `@sjolystinnovation/app-kit/api`, keeps the
+targets in one file that both sides import. `pages` are below each locale segment and `root` paths
+are not. It returns `targets` for fetch tags, `paths` for the route, and `revalidate(target)` for
+the admin services.
+
+```ts
+// src/lib/cacheTags.ts
+export const { targets: REVALIDATE_TARGETS, paths: TARGET_PATHS, revalidate: revalidateTarget } = defineRevalidateTargets({
+  locales: LOCALES,
+  targets: {
+    legal: { pages: ["/terms", "/privacy", "/cookies"], root: ["/sitemap.xml"] },
+    // Every page renders branding through the layout, so its tag reaches them all.
+    branding: {},
+  },
+});
+
+// src/app/api/revalidate/route.ts
+export const POST = createRevalidateRoute({ targets: TARGET_PATHS, role: ADMIN_ROLE });
+```
+
 ### `@sjolystinnovation/app-kit/next-config`
 
 For `next.config.ts`. It imports nothing but Next's types, so Next loads it with no build step.
@@ -431,10 +462,14 @@ The site gives:
 - `pageMetadata({ locale, path, title, description, images })` for a page: the canonical URL,
   hreflang, and Open Graph with the locale's share image unless `images` is given.
 - `localeEntries(path, { locales, lastModified })` for `sitemap.ts`: one entry per locale, each
-  listing the others. `lastModified` is left out when unknown.
+  listing the others. `lastModified` is left out when unknown. A site without locales gets one
+  entry per page.
+- `forEachLocale(load)` runs `load` for every locale at once and keys the results by locale.
+- `legalEntries({ keys, updatedAt })` gives the legal pages' entries, `/terms`, `/privacy` and
+  `/cookies` unless `keys` says otherwise, each dated by the timestamp `updatedAt` returns for it.
 - `robots({ privatePaths, privateRootPaths, indexable })` for `robots.ts`. The private paths are
   disallowed under every locale segment. A deployment that is not production disallows everything.
-- `organizationNode(company, { type, country, image, logo })`, `webSiteNode(locale)`,
+- `organizationNode(company, { type, sameAs, country, image, logo })`, `webSiteNode(locale)`,
   `breadcrumbNode(crumbs, pageUrl)`, `itemListNode(paths, pageUrl)`, `siteId(fragment)` and `ids`
   for structured data.
 
@@ -443,6 +478,15 @@ The site gives:
 export const dynamic = "force-dynamic";
 export default () => site.robots({ privatePaths: ["/admin", "/login"], privateRootPaths: ["/api/"] });
 
+// src/app/sitemap.ts
+export const revalidate = 3600;
+export default async () => [
+  ...site.localeEntries(""),
+  ...(await site.legalEntries({
+    updatedAt: async (key, locale) => (await publicGet<LegalPage>(`/content/legal/${key}?locale=${locale}`))?.updatedAt,
+  })),
+];
+
 // in a page
 <JsonLd nodes={[site.organizationNode(company), site.webSiteNode(locale)]} />
 ```
@@ -450,8 +494,8 @@ export default () => site.robots({ privatePaths: ["/admin", "/login"], privateRo
 `isIndexableEnvironment()` reads `SITE_ENV`. `prod`, `production` and unset or blank count as
 production, so a missing variable never deindexes the live site. `robots.ts` needs
 `dynamic = "force-dynamic"`, so it reads the variable per request. The package also exports
-`JsonLd`, `serializeGraph`, `ref`, `NOINDEX`, `SHARE_IMAGE_SIZE`, `normalizePath`, `latest` and
-`parseTimestamp`.
+`JsonLd`, `serializeGraph`, `ref`, `NOINDEX`, `LEGAL_PAGE_KEYS`, `SHARE_IMAGE_SIZE`,
+`normalizePath`, `latest` and `parseTimestamp`.
 
 ### `@sjolystinnovation/app-kit/seo/og`
 
@@ -579,6 +623,16 @@ if (loading) return <Spinner />;
 
 ### `@sjolystinnovation/app-kit/admin`
 
+`CompanySettingsForm` is the admin form for the business details the public pages show, saved
+through `createSettingsService`. Its children show below the form once the settings have loaded,
+such as the `BrandingManager`. `strings` holds every label, hint and message, English by default.
+
+```tsx
+<CompanySettingsForm service={SettingsService} strings={dict.companySettings}>
+  <BrandingManager save={BrandingService.update} />
+</CompanySettingsForm>
+```
+
 The admin area. `AdminShell` is the frame: a title and a tab bar above the page, behind a
 `RoleGate`. It takes `RoleGate`'s `role`, `fallback`, and `denied` or `deniedHref`. The tab whose
 `href` is the current path is active, with `aria-current="page"`.
@@ -602,6 +656,23 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 }
 ```
 
+`StatHistoryChart` draws the admin stats over time: a line per series, a scale from zero to the
+highest value shown, and legend buttons that hide and show each line. `data` is one row per day,
+oldest first, with `date` as `YYYY-MM-DD`. A missing value counts as zero. Each series names the
+field it plots and its label, and takes the next colour in `STAT_SERIES_COLORS` unless it has its
+own. `strings` holds `empty`, shown when there are no days, and `chart`, the accessible name.
+
+```tsx
+<StatHistoryChart
+  data={history}
+  series={[
+    { key: "totalUsers", label: dict.stats.users },
+    { key: "contentImages", label: dict.stats.images },
+  ]}
+  strings={{ empty: dict.admin.noHistory, chart: dict.admin.overTime }}
+/>
+```
+
 `AdminUsersPanel` is the users page. It lists every user with their roles, shows deleted users
 behind a toggle, gives and takes roles, deletes an account after a confirm, and invites a user by
 email. It calls the API through `createAdminUsersService`. `getRoles` returns the roles an admin
@@ -621,6 +692,39 @@ import { AdminUsersPanel } from "@sjolystinnovation/app-kit/admin";
 | `defaultInviteRole` | `string` | The role a new invite starts with. Defaults to `Admin`. |
 | `strings` | `TextOverrides<AdminUsersPanelStrings>` | The text, English by default. `{name}` and `{role}` are filled in where a text names them. |
 
+`LegalPagesEditor` edits the legal pages one page and one locale at a time, through
+`createLegalService`. A locale tab whose page has no content yet gets a dot. `LocaleTabs` is the
+same tab bar on its own, for other translated forms.
+
+```tsx
+<LegalPagesEditor
+  service={LegalService}
+  keys={LEGAL_PAGE_KEYS}
+  keyLabels={{ terms: dict.footer.terms, privacy: dict.footer.privacy, cookies: dict.footer.cookies }}
+  locales={LOCALES}
+  localeLabels={LOCALE_LABELS}
+  strings={dict.legalEditor}
+/>
+```
+
+### `@sjolystinnovation/app-kit/legal`
+
+`LegalPageView` renders a terms, privacy or cookies page as an admin wrote it: the title, the date
+it last changed in `dateLocale`, and the Markdown body. With no page it shows `title` and says the
+page is missing. It is a server component and needs the same peers as `markdown`. The route file
+stays in the app, since Next reads `revalidate` and the metadata from it.
+
+```tsx
+// src/app/[locale]/terms/page.tsx
+export const revalidate = 3600;
+
+export default async function TermsPage({ params }: { params: Promise<{ locale: Locale }> }) {
+  const { locale } = await params;
+  const page = await publicGet<LegalPage>(`/content/legal/terms?locale=${locale}`, { tags: [REVALIDATE_TARGETS.legal] });
+  return <LegalPageView page={page} title={dict.footer.terms} homeHref={`/${locale}`} dateLocale="nb-NO" strings={dict.legal} />;
+}
+```
+
 ### `@sjolystinnovation/app-kit/session`
 
 Decides when a user has to sign in again. Safe to import from server code, such as the next-auth
@@ -1114,6 +1218,39 @@ const parsed = contactSchema.safeParse(form);
 if (!parsed.success) setErrors(zodFieldErrors(parsed.error, { message: (issue) => issueMessage(issue, dict) }));
 ```
 
+### `@sjolystinnovation/app-kit/testing`
+
+Test doubles for the modules every app's tests mock: `next-auth/react`, `next/navigation`, `sonner`
+or `@sjolystinnovation/app-kit/toast`, and the app's axios instance. vitest hoists `vi.mock` above
+the file's imports, so the factory imports the helpers itself. The test imports the same module to
+set the state and read the spies. The state lasts for the whole file, so call `resetTestMocks`
+before each test. It needs vitest 5, as an optional peer dependency.
+
+```tsx
+import { makeSession, navigation, resetTestMocks, setSession } from "@sjolystinnovation/app-kit/testing";
+
+vi.mock("next-auth/react", async () => (await import("@sjolystinnovation/app-kit/testing")).nextAuthMock());
+vi.mock("next/navigation", async () => (await import("@sjolystinnovation/app-kit/testing")).nextNavigationMock());
+
+beforeEach(resetTestMocks);
+
+it("sends a user without the role away", () => {
+  navigation.pathname = "/no/admin";
+  setSession(makeSession({ roles: [] }));
+  render(<AdminLayout><p>admin work</p></AdminLayout>);
+  expect(navigation.router.replace).toHaveBeenCalledWith("/no");
+});
+```
+
+- `setSession(session | null | "loading")` and `makeSession({ roles, ...overrides })` set what
+  `useSession` returns. `auth.signIn`, `auth.signOut` and `auth.getSession` are the spies behind
+  next-auth's calls.
+- `navigation.pathname`, `navigation.searchParams` and `navigation.router` feed `usePathname`,
+  `useSearchParams` and `useRouter`.
+- `toastMock()` records every toast in `toastSpies`.
+- `axiosInstanceMock()` is a module whose default export is `axiosSpies`, for
+  `vi.mock("@/services/axiosInstance", ...)`.
+
 ## Theming
 
 The components draw every colour, corner radius and label size from theme variables with a light
@@ -1173,6 +1310,8 @@ selector such as `.dark` for a scoped theme:
 | `--color-admin-tab`, `-hover` | gray 500 and gray 900 |
 | `--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` |
+| `--color-chart-label` | gray 400, the chart's numbers and dates |
 | `--radius-button` | `var(--radius-lg)` |
 | `--color-button-primary-bg` | `var(--color-primary)` |
 | `--color-button-primary-text` | `var(--color-primary-foreground)` |
@@ -1209,9 +1348,13 @@ with it and has to set the ones it uses itself.
 
 ## Requirements
 
-- Next.js 16, React 19, next-auth 4.24 or later and axios 1.20 or later, as peer dependencies the
-  app installs itself.
+- Next.js 16 and React 19, as peer dependencies the app installs itself.
+- For the root entry, `auth`, `api`, `server`, `session/react`, `ui` and `admin`: next-auth 4.24
+  or later and axios 1.20 or later, as optional peer dependencies. A site without sign-in, which
+  uses only entries such as `seo`, `next-config`, `markdown`, `toast` or `validation`, leaves them
+  out.
 - For `@sjolystinnovation/app-kit/validation`: zod 4, as an optional peer dependency.
+- For `@sjolystinnovation/app-kit/testing`: vitest 5, as an optional peer dependency.
 - For `@sjolystinnovation/app-kit/toast`: sonner 2, as an optional peer dependency. Install a single
   copy, because two copies keep two separate toast stores.
 - `jsonwebtoken` comes with the package. `@sjolystinnovation/app-kit/auth` uses it on the server.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjolystinnovation/app-kit",
-  "version": "0.20.0",
+  "version": "0.21.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/CompanySettingsForm.tsx

@@ -0,0 +1,122 @@
+"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";
+
+export interface CompanySettingsFormProps {
+  /** The settings calls, such as `createSettingsService(api)`. */
+  service: { get: () => Promise<SiteSettings>; update: (settings: SiteSettings) => Promise<SiteSettings> };
+  strings?: TextOverrides<CompanySettingsFormStrings> | undefined;
+  /** 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,131 @@
+"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";
+
+export interface LegalPagesEditorProps<K extends string, L extends string> {
+  /** The legal page calls, such as `createLegalService(api, publicApi)`. */
+  service: {
+    listAll: () => Promise<LegalPage<K>[]>;
+    save: (key: K, locale: L, title: string, bodyMarkdown: string) => Promise<unknown>;
+  };
+  /** The pages, in tab order. The first opens. */
+  keys: readonly K[];
+  /** Each page's tab label, such as `Terms`. */
+  keyLabels: Record<K, string>;
+  /** The locales each page is written in. The first opens. */
+  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(activeKey, activeLocale, draft.title.trim(), 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,35 @@
+"use client";
+
+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;
+  /** Which locales have content. A locale marked false gets a dot titled `notFilled`. */
+  filled?: Partial<Record<L, boolean>> | undefined;
+  /** The dot's title, such as "Not filled in". */
+  notFilled?: string | undefined;
+}
+
+/** 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,99 @@
+"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 colour. Defaults to the next colour in `STAT_SERIES_COLORS`. */
+  color?: string | undefined;
+}
+
+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 };
+
+/**
+ * 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/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;
+  /** 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,16 @@
+// Plain values, with no "use client", so a server component can import them.
+
+export interface StatHistoryChartStrings {
+  /** 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 colours, in order: blue, green, amber, teal and purple. */
+export const STAT_SERIES_COLORS = ["#2563eb", "#16a34a", "#d97706", "#0d9488", "#9333ea"] as const;

package/src/api/company.ts

@@ -0,0 +1,46 @@
+/** The business as SjolystInnovation.AppKit.SiteSettings's public `/company` endpoint describes it. */
+export interface CompanyInfo {
+  name: string;
+  legalName: string;
+  orgNumber: string;
+  vatRegistered: boolean;
+  /** The address on one line, for display. The API derives it from the parts below. */
+  address: string;
+  streetAddress: string;
+  postalCode: string;
+  addressLocality: string;
+  addressRegion: string;
+  email: string;
+  phone: string;
+}
+
+/** What the app knows about the business without the API. Only the name is required. */
+export type CompanyFallback = Partial<CompanyInfo> & { name: string };
+
+/**
+ * The company details for public pages: the API's answer, with the app's own values for any field
+ * it left blank or could not give. The legal name falls back to the name, and VAT to not registered.
+ */
+export function mergeCompanyInfo(data: Partial<CompanyInfo> | null | undefined, fallback: CompanyFallback): CompanyInfo {
+  const name = data?.name || fallback.name;
+  const pick = (key: Exclude<keyof CompanyInfo, "name" | "legalName" | "vatRegistered">) => data?.[key] || fallback[key] || "";
+  return {
+    name,
+    legalName: data?.legalName || fallback.legalName || name,
+    orgNumber: pick("orgNumber"),
+    vatRegistered: data?.vatRegistered ?? fallback.vatRegistered ?? false,
+    address: pick("address"),
+    streetAddress: pick("streetAddress"),
+    postalCode: pick("postalCode"),
+    addressLocality: pick("addressLocality"),
+    addressRegion: pick("addressRegion"),
+    email: pick("email"),
+    phone: pick("phone"),
+  };
+}
+
+/** The org number with the Norwegian ` MVA` suffix once the business is VAT registered. Empty without a number. */
+export function formatOrgNumber({ orgNumber, vatRegistered }: { orgNumber?: string | null | undefined; vatRegistered?: boolean | null | undefined }): string {
+  if (!orgNumber) return "";
+  return vatRegistered ? `${orgNumber} MVA` : orgNumber;
+}

package/src/api/index.ts

@@ -1,7 +1,11 @@
 export { apiFieldErrors } from "./apiFieldErrors";
+export { formatOrgNumber, mergeCompanyInfo } from "./company";
+export type { CompanyFallback, CompanyInfo } from "./company";
 export { createApiClient } from "./createApiClient";
 export { request } from "./request";
 export { requestRevalidate } from "./requestRevalidate";
+export { defineRevalidateTargets } from "./revalidateTargets";
+export type { RevalidateTargetPaths, RevalidateTargetsConfig } from "./revalidateTargets";
 export {
   createPublicClient,
   createUserService,

package/src/api/revalidateTargets.ts

@@ -0,0 +1,40 @@
+import { normalizePath } from "../seo/site";
+import { requestRevalidate } from "./requestRevalidate";
+
+/** The pages one admin edit changes. */
+export interface RevalidateTargetPaths {
+  /** Paths below each locale segment, such as `/builds/[slug]`. `""` is the locale's front page. */
+  pages?: readonly string[] | undefined;
+  /** Paths outside the locale segments, such as `/sitemap.xml`. */
+  root?: readonly string[] | undefined;
+}
+
+export interface RevalidateTargetsConfig<T extends string> {
+  /** The locale segments every page is under. A site without them omits this. */
+  locales?: readonly string[] | undefined;
+  targets: Record<T, RevalidateTargetPaths>;
+}
+
+/**
+ * The cache targets an app's admin edits purge, in one place for both sides: `targets` names them
+ * for fetch tags, `paths` is what `createRevalidateRoute` purges for each, and `revalidate` asks the
+ * route to purge one after an edit. A target with no paths is purged by its tag alone.
+ */
+export function defineRevalidateTargets<T extends string>({ locales = [], targets }: RevalidateTargetsConfig<T>) {
+  const names = Object.keys(targets) as T[];
+
+  return {
+    targets: Object.fromEntries(names.map(name => [name, name])) as { readonly [K in T]: K },
+    paths: Object.fromEntries(
+      names.map(name => {
+        const { pages = [], root = [] } = targets[name];
+        const localized =
+          locales.length > 0
+            ? locales.flatMap(locale => pages.map(page => `/${locale}${normalizePath(page)}`))
+            : pages.map(page => normalizePath(page) || "/");
+        return [name, [...localized, ...root]];
+      }),
+    ) as Record<T, string[]>,
+    revalidate: (target: T): Promise<void> => requestRevalidate(target),
+  };
+}

package/src/legal/LegalPageView.tsx

@@ -0,0 +1,61 @@
+import Link from "next/link";
+import type { LegalPage } from "../api/services";
+import { Markdown } from "../markdown";
+import { parseTimestamp } from "../seo/sitemap";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+
+/** 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",
+};
+
+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. */
+  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. */
+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.
+  const updatedAt = parseTimestamp(page?.updatedAt);
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 sm:px-6 py-12 space-y-6">
+      <h1 className="text-3xl font-black text-gray-900">{page?.title ?? title}</h1>
+      {updatedAt && (
+        <p className="text-xs text-gray-500">
+          {text.updated}: {new Intl.DateTimeFormat(dateLocale, { dateStyle: "long" }).format(updatedAt)}
+        </p>
+      )}
+
+      <div className="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm space-y-4 text-sm text-gray-600">
+        {page ? <Markdown>{page.bodyMarkdown}</Markdown> : <p>{text.missing}</p>}
+      </div>
+
+      <p className="text-xs text-gray-500">
+        <Link href={homeHref} className="hover:text-gray-900 transition-colors">
+          ← {text.toFrontPage}
+        </Link>
+      </p>
+    </div>
+  );
+}

package/src/legal/index.ts

@@ -0,0 +1 @@
+export { LegalPageView, defaultLegalPageViewStrings, type LegalPageViewProps, type LegalPageViewStrings } from "./LegalPageView";

package/src/seo/index.ts

@@ -3,10 +3,12 @@ export { JsonLd } from "./JsonLd";
 export { ref, serializeGraph, type OrganizationInfo, type SchemaNode, type SchemaRef } from "./schema";
 export {
   defineSite,
+  LEGAL_PAGE_KEYS,
   normalizePath,
   NOINDEX,
   SHARE_IMAGE_SIZE,
   type Crumb,
+  type LegalEntriesInput,
   type LocaleEntryOptions,
   type OrganizationOptions,
   type PageMetadataInput,

package/src/seo/site.ts

@@ -1,6 +1,7 @@
 import type { Metadata, MetadataRoute } from "next";
 import { isIndexableEnvironment } from "./environment";
 import { ref, type OrganizationInfo, type SchemaNode } from "./schema";
+import { parseTimestamp } from "./sitemap";
 
 /** The size of the share image. */
 export const SHARE_IMAGE_SIZE = { width: 1200, height: 630 } as const;
@@ -52,12 +53,22 @@ export interface Crumb {
 }
 
 export interface LocaleEntryOptions<L extends string> {
-  /** The locales the page exists in. Defaults to all of them. */
+  /** The locales the page exists in. Defaults to all of them. A site without locales ignores it. */
   locales?: readonly L[] | undefined;
-  /** When the page last changed, per locale. Left out when unknown. */
+  /** When the page last changed, per locale. Left out when unknown. A site without locales calls it once, with no locale. */
   lastModified?: ((locale: L) => Date | undefined) | undefined;
 }
 
+/** The legal pages every site has, as `createLegalService` names them. */
+export const LEGAL_PAGE_KEYS = ["terms", "privacy", "cookies"] as const;
+
+export interface LegalEntriesInput<K extends string, L extends string> {
+  /** The legal pages, each at `/<key>` below the locale. Defaults to `LEGAL_PAGE_KEYS`. */
+  keys?: readonly K[] | undefined;
+  /** When a page last changed, as the API's timestamp. A site without locales gets no locale. */
+  updatedAt: (key: K, locale: L | undefined) => Promise<string | null | undefined>;
+}
+
 export interface RobotsInput {
   /** Paths below each locale segment that must not be crawled, such as `/admin`. */
   privatePaths?: readonly string[] | undefined;
@@ -68,8 +79,10 @@ export interface RobotsInput {
 }
 
 export interface OrganizationOptions {
-  /** The schema.org type, such as `Organization` or `ComputerStore`. Defaults to `Organization`. */
-  type?: string | undefined;
+  /** The schema.org type, such as `ComputerStore`, or several, such as `["Organization", "LocalBusiness"]`. Defaults to `Organization`. */
+  type?: string | readonly string[] | undefined;
+  /** Pages about the same business elsewhere, such as its entry in Brønnøysundregistrene. */
+  sameAs?: readonly string[] | undefined;
   /** The ISO country code for the address and the area served. Defaults to `NO`. */
   country?: string | undefined;
   /** Site-relative paths of the square image and the logo. Default to `/icon.png` and `/logo.png`. */
@@ -166,8 +179,16 @@ export function defineSite<L extends string = string>(config: SiteConfig<L>) {
     };
   };
 
-  /** One sitemap entry per locale a page is served in, each listing the others as alternates. */
+  /**
+   * One sitemap entry per locale a page is served in, each listing the others as alternates. A site
+   * without locales has one URL per page, so it gets one entry with no alternates.
+   */
   const localeEntries = (path: string, options: LocaleEntryOptions<L> = {}): MetadataRoute.Sitemap => {
+    if (locales.length === 0) {
+      // There is no locale to pass, and the callback's type cannot say so without making every caller's simpler.
+      const lastModified = options.lastModified?.(undefined as never);
+      return [{ url: absoluteUrl(path), ...(lastModified ? { lastModified } : {}) }];
+    }
     const served = options.locales ?? locales;
 
     const languages: Record<string, string> = Object.fromEntries(served.map(l => [tag(l), absoluteLocaleUrl(l, path)]));
@@ -181,6 +202,27 @@ export function defineSite<L extends string = string>(config: SiteConfig<L>) {
     });
   };
 
+  /** Runs `load` for every locale at once and keys the results by locale. A site without locales gets `{}`. */
+  const forEachLocale = async <T>(load: (locale: L) => Promise<T>): Promise<Partial<Record<L, T>>> =>
+    Object.fromEntries(await Promise.all(locales.map(async locale => [locale, await load(locale)] as const))) as Partial<Record<L, T>>;
+
+  /**
+   * The legal pages' sitemap entries, each dated by when it last changed in that locale. The
+   * timestamps are fetched at once. An error from `updatedAt` fails the sitemap, so a stale one is
+   * served rather than one without dates.
+   */
+  const legalEntries = async <K extends string = (typeof LEGAL_PAGE_KEYS)[number]>({
+    keys,
+    updatedAt,
+  }: LegalEntriesInput<K, L>): Promise<MetadataRoute.Sitemap> => {
+    const pages = keys ?? (LEGAL_PAGE_KEYS as unknown as readonly K[]);
+    const served: (L | undefined)[] = locales.length > 0 ? [...locales] : [undefined];
+    const stamps = await Promise.all(
+      pages.map(key => Promise.all(served.map(async locale => parseTimestamp(await updatedAt(key, locale))))),
+    );
+    return pages.flatMap((key, k) => localeEntries(`/${key}`, { lastModified: locale => stamps[k]?.[served.indexOf(locale)] }));
+  };
+
   /**
    * robots.txt. A deployment that is not production disallows everything. Otherwise the private
    * paths are disallowed under every locale segment, since a bare `/admin` matches nothing there.
@@ -203,16 +245,19 @@ export function defineSite<L extends string = string>(config: SiteConfig<L>) {
   /** The business, under a stable `@id` that page-scoped nodes point at. */
   const organizationNode = (company: OrganizationInfo, options: OrganizationOptions = {}): SchemaNode => {
     const country = options.country ?? "NO";
+    const type = typeof options.type === "string" ? options.type || undefined : options.type?.length ? [...options.type] : undefined;
+    const phone = company.phone?.trim();
+    const email = company.email?.trim();
     return {
-      "@type": options.type ?? "Organization",
+      "@type": type ?? "Organization",
       "@id": ids.organization,
       name: company.name,
       ...(company.legalName && company.legalName !== company.name ? { legalName: company.legalName } : {}),
       url: absoluteUrl(),
       image: absoluteUrl(options.image ?? "/icon.png"),
       logo: absoluteUrl(options.logo ?? "/logo.png"),
-      telephone: company.phone,
-      email: company.email,
+      ...(phone ? { telephone: phone } : {}),
+      ...(email ? { email } : {}),
       address: {
         "@type": "PostalAddress",
         streetAddress: company.streetAddress || company.address,
@@ -224,6 +269,7 @@ export function defineSite<L extends string = string>(config: SiteConfig<L>) {
       areaServed: country,
       ...(company.vatRegistered && company.orgNumber ? { vatID: `NO${company.orgNumber.replace(/\s/g, "")}MVA` } : {}),
       ...(company.orgNumber ? { taxID: company.orgNumber } : {}),
+      ...(options.sameAs?.length ? { sameAs: [...options.sameAs] } : {}),
     };
   };
 
@@ -268,6 +314,8 @@ export function defineSite<L extends string = string>(config: SiteConfig<L>) {
     pageMetadata,
     siteMetadata,
     localeEntries,
+    forEachLocale,
+    legalEntries,
     robots,
     siteId,
     ids,

package/src/styles.css

@@ -88,6 +88,8 @@
   --color-admin-tab-hover: var(--color-gray-900);
   --color-admin-tab-active: var(--color-gray-900);
   --color-admin-tab-indicator: var(--color-primary);
+  --color-chart-grid: var(--color-gray-200);
+  --color-chart-label: var(--color-gray-400);
 
   --radius-button: var(--radius-lg);
   --color-button-primary-bg: var(--color-primary);

package/src/testing/index.ts

@@ -0,0 +1,113 @@
+// Test doubles for the modules every app's tests mock. Import them inside the vi.mock factory, which
+// vitest hoists above the file's own imports:
+//
+//   vi.mock("next-auth/react", async () => (await import("@sjolystinnovation/app-kit/testing")).nextAuthMock());
+//
+// The test then imports the same module instance to set the state and read the spies, and calls
+// resetTestMocks before each test, since the state lives for the whole file.
+import type { ReactNode } from "react";
+import type { Session } from "next-auth";
+import { vi } from "vitest";
+
+type SessionStatus = "loading" | "authenticated" | "unauthenticated";
+
+/** What `useSession` returns, and the next-auth calls as spies. `update` is the one `useSession` returns. */
+export const auth = {
+  state: { data: null, status: "unauthenticated" } as { data: Session | null; status: SessionStatus },
+  signIn: vi.fn(),
+  signOut: vi.fn(),
+  getSession: vi.fn(),
+  update: vi.fn(),
+};
+
+/** A signed-in session with `roles`. Defaults to an admin. */
+export function makeSession({ roles = ["Admin"], ...overrides }: Partial<Session> & { roles?: string[] } = {}): Session {
+  return {
+    user: { id: "1", name: "admin", email: "a@b.no", roles },
+    accessToken: "token",
+    expires: "",
+    ...overrides,
+  };
+}
+
+/** Signs in with `session`, signs out with null, or leaves the session loading. */
+export function setSession(session: Session | null | "loading"): void {
+  auth.state =
+    session === "loading"
+      ? { data: null, status: "loading" }
+      : session === null
+        ? { data: null, status: "unauthenticated" }
+        : { data: session, status: "authenticated" };
+}
+
+/** The `next-auth/react` module, reading `auth`. */
+export function nextAuthMock() {
+  return {
+    useSession: () => ({ ...auth.state, update: (...args: unknown[]) => auth.update(...args) }),
+    signIn: (...args: unknown[]) => auth.signIn(...args),
+    signOut: (...args: unknown[]) => auth.signOut(...args),
+    getSession: (...args: unknown[]) => auth.getSession(...args),
+    SessionProvider: ({ children }: { children?: ReactNode }) => children,
+  };
+}
+
+/** The current URL and the router's calls as spies. */
+export const navigation = {
+  pathname: "/",
+  searchParams: new URLSearchParams(),
+  router: { push: vi.fn(), replace: vi.fn(), refresh: vi.fn(), back: vi.fn(), forward: vi.fn(), prefetch: vi.fn() },
+};
+
+/** The `next/navigation` hooks, reading `navigation`. */
+export function nextNavigationMock() {
+  return {
+    useRouter: () => navigation.router,
+    usePathname: () => navigation.pathname,
+    useSearchParams: () => navigation.searchParams,
+  };
+}
+
+/** The toast calls as spies. */
+export const toastSpies = {
+  success: vi.fn(),
+  error: vi.fn(),
+  info: vi.fn(),
+  warning: vi.fn(),
+  message: vi.fn(),
+  loading: vi.fn(),
+  promise: vi.fn(),
+  dismiss: vi.fn(),
+};
+
+/** The `sonner` module, or `@sjolystinnovation/app-kit/toast`. A bare `toast(text)` goes to `toastSpies.message`. */
+export function toastMock() {
+  const toast = Object.assign((...args: unknown[]) => toastSpies.message(...args), {
+    success: (...args: unknown[]) => toastSpies.success(...args),
+    error: (...args: unknown[]) => toastSpies.error(...args),
+    info: (...args: unknown[]) => toastSpies.info(...args),
+    warning: (...args: unknown[]) => toastSpies.warning(...args),
+    message: (...args: unknown[]) => toastSpies.message(...args),
+    loading: (...args: unknown[]) => toastSpies.loading(...args),
+    promise: (...args: unknown[]) => toastSpies.promise(...args),
+    dismiss: (...args: unknown[]) => toastSpies.dismiss(...args),
+  });
+  return { toast, Toaster: () => null };
+}
+
+/** The HTTP calls of an app's axios instance as spies. */
+export const axiosSpies = { get: vi.fn(), post: vi.fn(), put: vi.fn(), patch: vi.fn(), delete: vi.fn() };
+
+/** A module whose default export is an axios instance, such as the app's `services/axiosInstance`. */
+export function axiosInstanceMock() {
+  return { default: axiosSpies };
+}
+
+/** Signs out, goes back to `/`, and clears every spy's calls and answers. */
+export function resetTestMocks(): void {
+  setSession(null);
+  navigation.pathname = "/";
+  navigation.searchParams = new URLSearchParams();
+  for (const spy of [auth.signIn, auth.signOut, auth.getSession, auth.update, ...Object.values(navigation.router), ...Object.values(toastSpies), ...Object.values(axiosSpies)]) {
+    spy.mockReset();
+  }
+}