@caelo-cms/shared 0.11.0 → 0.11.1

package/src/escaped-line-breaks.ts

@@ -0,0 +1,221 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * Source text whose line breaks arrived string-escaped as a whole.
+ *
+ * e2e-livedit run 40532297620 (release gate v0.11.1): `add_module`'s html,
+ * css and js came in with every line break as the two characters `\` `n`
+ * (`(function () {\n  document…`). Stored as sent, the footer showed `\n`
+ * text, its CSS broke, and the page's shared module `<script>` threw
+ * `SyntaxError: Invalid or unexpected token` — a backslash outside a string
+ * is not JavaScript. Like the other whole-value transport encodings
+ * (`source-text-transport.ts`) the AI tool boundary decodes it, once.
+ *
+ * The same two characters are legitimate inside a string literal (`"a\nb"`
+ * in JS or a CSS `content`), a regex, an HTML attribute value, or the body
+ * of a raw-text element. A value is only decoded when EVERY escaped line
+ * break sits where a real line break could have stood — between tokens of
+ * code, or in markup text between tags. One escape inside a literal makes
+ * the value ambiguous and it is left exactly as sent: decoding it would
+ * turn valid source into broken source (a raw newline inside a JS string
+ * is a syntax error). The op validators still refuse what is left broken
+ * (module js is parsed in admin-core `module-js-syntax.ts`).
+ */
+
+/** Which grammar a source value is written in; decides what counts as a literal. */
+export type SourceLanguage = "html" | "css" | "js";
+
+/** `\n` or `\r\n` escape starting at `i` (a single backslash, not an escaped one). */
+function escapedLineBreakLength(value: string, i: number): number {
+  if (value[i] !== "\\") return 0;
+  if (value[i + 1] === "n") return 2;
+  if (value[i + 1] === "r" && value[i + 2] === "\\" && value[i + 3] === "n") return 4;
+  return 0;
+}
+
+/** Characters after which a `/` in JS starts a regex literal rather than a division. */
+const REGEX_PRECEDERS = new Set([..."(,=:[!&|?{};+-*%<>~^"]);
+
+/**
+ * Index just past a quoted literal starting at `start` (its quote char), or
+ * -1 when an escaped line break sits inside it.
+ */
+function skipQuoted(value: string, start: number): number {
+  const quote = value[start];
+  let j = start + 1;
+  while (j < value.length) {
+    const ch = value[j];
+    if (ch === "\\") {
+      if (value[j + 1] === "n" || value[j + 1] === "r") return -1;
+      j += 2;
+      continue;
+    }
+    if (ch === quote) return j + 1;
+    j += 1;
+  }
+  return j;
+}
+
+/** True when an escaped line break sits inside a JS string, template, or regex literal. */
+function jsLiteralHoldsEscape(value: string): boolean {
+  let prev = "";
+  let i = 0;
+  while (i < value.length) {
+    const ch = value[i] as string;
+    const lineBreak = escapedLineBreakLength(value, i);
+    if (lineBreak > 0) {
+      prev = "";
+      i += lineBreak;
+      continue;
+    }
+    if (ch === "\\") {
+      i += 2;
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === "`") {
+      const end = skipQuoted(value, i);
+      if (end < 0) return true;
+      prev = ch;
+      i = end;
+      continue;
+    }
+    if (ch === "/" && value[i + 1] === "/") {
+      // A line comment runs to the next (escaped) line break.
+      i += 2;
+      while (i < value.length && escapedLineBreakLength(value, i) === 0) i += 1;
+      continue;
+    }
+    if (ch === "/" && value[i + 1] === "*") {
+      const close = value.indexOf("*/", i + 2);
+      i = close < 0 ? value.length : close + 2;
+      continue;
+    }
+    if (ch === "/" && (prev === "" || REGEX_PRECEDERS.has(prev))) {
+      let j = i + 1;
+      let inClass = false;
+      while (j < value.length) {
+        const r = value[j];
+        if (r === "\\") {
+          if (value[j + 1] === "n" || value[j + 1] === "r") return true;
+          j += 2;
+          continue;
+        }
+        if (r === "[") inClass = true;
+        else if (r === "]") inClass = false;
+        else if (r === "/" && !inClass) break;
+        j += 1;
+      }
+      prev = "/";
+      i = j + 1;
+      continue;
+    }
+    if (ch !== " " && ch !== "\t") prev = ch;
+    i += 1;
+  }
+  return false;
+}
+
+/** True when an escaped line break sits inside a CSS string. */
+function cssLiteralHoldsEscape(value: string): boolean {
+  let i = 0;
+  while (i < value.length) {
+    const ch = value[i];
+    if (ch === "/" && value[i + 1] === "*") {
+      const close = value.indexOf("*/", i + 2);
+      i = close < 0 ? value.length : close + 2;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      const end = skipQuoted(value, i);
+      if (end < 0) return true;
+      i = end;
+      continue;
+    }
+    i += ch === "\\" ? 2 : 1;
+  }
+  return false;
+}
+
+/** Elements whose body is not markup text: an escape there belongs to that body. */
+const RAW_TEXT_ELEMENTS = new Set(["script", "style", "pre", "textarea"]);
+
+/** True when an escaped line break sits inside an attribute value, a comment, or a raw-text element body. */
+function htmlLiteralHoldsEscape(value: string): boolean {
+  const lower = value.toLowerCase();
+  let i = 0;
+  while (i < value.length) {
+    if (value[i] !== "<") {
+      i += 1;
+      continue;
+    }
+    if (value.startsWith("<!--", i)) {
+      const close = value.indexOf("-->", i + 4);
+      const end = close < 0 ? value.length : close + 3;
+      if (/(?<!\\)\\[nr]/.test(value.slice(i, end))) return true;
+      i = end;
+      continue;
+    }
+    const name = /^<([a-zA-Z][a-zA-Z0-9-]*)/.exec(value.slice(i, i + 64))?.[1]?.toLowerCase();
+    let j = i + 1;
+    while (j < value.length && value[j] !== ">") {
+      if (value[j] === '"' || value[j] === "'") {
+        const end = skipQuoted(value, j);
+        if (end < 0) return true;
+        j = end;
+        continue;
+      }
+      j += 1;
+    }
+    i = j + 1;
+    if (name && RAW_TEXT_ELEMENTS.has(name)) {
+      const close = lower.indexOf(`</${name}`, i);
+      const end = close < 0 ? value.length : close;
+      if (/(?<!\\)\\[nr]/.test(value.slice(i, end))) return true;
+      i = end;
+    }
+  }
+  return false;
+}
+
+const LITERAL_HOLDS_ESCAPE: Readonly<Record<SourceLanguage, (value: string) => boolean>> = {
+  html: htmlLiteralHoldsEscape,
+  css: cssLiteralHoldsEscape,
+  js: jsLiteralHoldsEscape,
+};
+
+/** An escaped line break (`\n`, `\r\n`) not preceded by another backslash. */
+const ESCAPED_LINE_BREAK = /(?<!\\)(?:\\r)?\\n/g;
+
+/**
+ * True when a source value's line breaks were string-escaped as a whole:
+ * no real line break at all, at least two escaped ones, one of them
+ * followed by indentation (the signature of pretty-printed source), and
+ * none inside a literal of `language` (see the file comment).
+ *
+ * @param value - the source text as sent.
+ * @param language - the grammar the value is written in.
+ */
+export function hasEscapedLineBreaks(value: string, language: SourceLanguage): boolean {
+  if (/[\r\n]/.test(value)) return false;
+  const hits = value.match(ESCAPED_LINE_BREAK)?.length ?? 0;
+  if (hits < 2) return false;
+  if (!/(?<!\\)\\n(?:[ \t]|\\t)/.test(value)) return false;
+  return !LITERAL_HOLDS_ESCAPE[language](value);
+}
+
+/**
+ * The value with every escaped line break turned back into a real one (and
+ * the escaped tabs indenting the next line into real tabs) when
+ * `hasEscapedLineBreaks` holds; the input unchanged otherwise. Nothing else
+ * is unescaped: quotes and backslashes arrived as they were meant.
+ *
+ * @param value - the tool argument (non-strings pass through).
+ * @param language - the grammar the value is written in.
+ */
+export function decodeEscapedLineBreaks(value: unknown, language: SourceLanguage): unknown {
+  if (typeof value !== "string" || !hasEscapedLineBreaks(value, language)) return value;
+  return value.replace(
+    /(?<!\\)(?:\\r)?\\n((?:\\t)*)/g,
+    (_m, tabs: string) => `\n${"\t".repeat(tabs.length / 2)}`,
+  );
+}

package/src/index.ts

@@ -20,6 +20,7 @@ export * from "./database-url.js";
 export * from "./design-draft-shell.js";
 export * from "./document-language.js";
 export * from "./edit-markers.js";
+export * from "./escaped-line-breaks.js";
 export * from "./font-assets.js";
 export * from "./font-axis-policy.js";
 export * from "./font-usage.js";

package/src/interactions.ts

@@ -195,9 +195,9 @@ export function interactionAssets(used: ReadonlySet<InteractionId>): {
  * guidance cannot drift from the snippets above.
  */
 export const INTERACTION_MARKUP_CONTRACT =
-  '**Vetted interactions - use these instead of writing JS for them.** Add `data-caelo-ui="<id>"` to the markup and Caelo ships accessible, dependency-free behaviour once per page; style it freely in the module CSS. ' +
-  '`accordion` (FAQ, collapsible sections): `<div data-caelo-ui="accordion" data-single>` containing `<details id="..."><summary>Question</summary><div>Answer</div></details>` items - `data-single` keeps one open; a link to `#<details id>` opens it. ' +
-  '`tabs`: `<div data-caelo-ui="tabs"><div role="tablist" aria-label="..."><button type="button" role="tab" id="t1" aria-controls="p1" aria-selected="true">...</button><button type="button" role="tab" id="t2" aria-controls="p2" aria-selected="false" tabindex="-1">...</button></div><div role="tabpanel" id="p1" aria-labelledby="t1">...</div><div role="tabpanel" id="p2" aria-labelledby="t2" hidden>...</div></div>` - ids must be unique on the page. ' +
-  '`carousel` (slider, testimonials): `<section data-caelo-ui="carousel" aria-roledescription="carousel" aria-label="..."><div data-caelo-carousel-track tabindex="0"><div role="group" aria-roledescription="slide" aria-label="1 of 3">...</div>...</div><button type="button" data-caelo-carousel-prev aria-label="Previous slide"><span aria-hidden="true">&lsaquo;</span></button><button type="button" data-caelo-carousel-next aria-label="Next slide"><span aria-hidden="true">&rsaquo;</span></button></section>` (an icon button keeps its visible content aria-hidden; a text button needs no aria-label) - one slide per view by default; set the slides\' `flex-basis` in module CSS to show more. ' +
-  '`mobile-nav` (menu collapsing behind a toggle on small screens): `<nav class="caelo-nav-menu" data-caelo-ui="mobile-nav" data-nav-open="false"><button type="button" class="caelo-nav-toggle" aria-expanded="false" aria-label="Menu"><span class="caelo-nav-bar"></span><span class="caelo-nav-bar"></span><span class="caelo-nav-bar"></span></button><ul>{{#menu}}<li>…</li>{{/menu}}</ul></nav>` around the module\'s menu `list` field. ' +
+  "`data-caelo-ui` kit — use it instead of JS for these (accessible, shipped once per page, style freely in module CSS):\n" +
+  '- `accordion` (FAQ, collapsible): `<div data-caelo-ui="accordion" data-single>` with `<details id="..."><summary>Question</summary><div>Answer</div></details>` items; `data-single` keeps one open; a link to `#<details id>` opens it.\n' +
+  '- `tabs`: `<div data-caelo-ui="tabs"><div role="tablist" aria-label="..."><button type="button" role="tab" id="t1" aria-controls="p1" aria-selected="true">...</button><button type="button" role="tab" id="t2" aria-controls="p2" aria-selected="false" tabindex="-1">...</button></div><div role="tabpanel" id="p1" aria-labelledby="t1">...</div><div role="tabpanel" id="p2" aria-labelledby="t2" hidden>...</div></div>`; ids unique on the page.\n' +
+  '- `carousel` (slider, testimonials): `<section data-caelo-ui="carousel" aria-roledescription="carousel" aria-label="..."><div data-caelo-carousel-track tabindex="0"><div role="group" aria-roledescription="slide" aria-label="1 of 3">...</div>...</div><button type="button" data-caelo-carousel-prev aria-label="Previous slide"><span aria-hidden="true">&lsaquo;</span></button><button type="button" data-caelo-carousel-next aria-label="Next slide"><span aria-hidden="true">&rsaquo;</span></button></section>`; icon buttons keep visible content aria-hidden, text buttons need no aria-label. One slide per view; set the slides\' `flex-basis` in module CSS to show more.\n' +
+  '- `mobile-nav` (menu collapsing behind a toggle on small screens): `<nav class="caelo-nav-menu" data-caelo-ui="mobile-nav" data-nav-open="false"><button type="button" class="caelo-nav-toggle" aria-expanded="false" aria-label="Menu"><span class="caelo-nav-bar"></span><span class="caelo-nav-bar"></span><span class="caelo-nav-bar"></span></button><ul>{{#menu}}<li>…</li>{{/menu}}</ul></nav>` around the module\'s menu `list` field.\n' +
   "Write module JS only for behaviour the kit does not cover.";

package/src/link-refs.test.ts

@@ -39,6 +39,7 @@ const lists = createListRenderContext({
   pages: new Map(),
   media: new Map(),
   siteLanguage: "en",
+  homePageId: null,
 }).forPage(null);
 const uid = (n: number) => `00000000-0000-4000-9000-${String(n).padStart(12, "0")}`;
 const links = (...ls: [string, string][]) =>

package/src/lists/default-types.ts

@@ -100,3 +100,42 @@ export const DEFAULT_LIST_TYPES: readonly ListTypeDef[] = [
     },
   },
 ];
+
+/** Slug of the list type whose entries are the site texts (`{{site_text.<key>}}`, #1142). */
+export const SITE_TEXTS_LIST_TYPE = "site-texts";
+
+/**
+ * The site texts type: fixed interface strings of the website that are no
+ * page content ("Start" in a trail, the breadcrumb `aria-label`, "Read
+ * more"). Module HTML reads one by key with `{{site_text.<key>}}`, so the
+ * string is translatable (shared-list overlays) instead of frozen into
+ * the module. Seeded by migration 0358 together with the "Site texts"
+ * list; installs that ran 0352 never had it, so it is not part of
+ * {@link DEFAULT_LIST_TYPES} (whose seed is pinned to 0352).
+ */
+export const SITE_TEXTS_TYPE: ListTypeDef = {
+  slug: SITE_TEXTS_LIST_TYPE,
+  name: "Site texts",
+  purpose:
+    "Fixed interface texts of the website, read by key in module HTML with {{site_text.<key>}}: the breadcrumb aria-label, button and link texts that repeat across modules. Not page content.",
+  role: "content",
+  root: { allow: ["text"] },
+  nodes: {
+    text: {
+      label: "Site text",
+      fields: [
+        // The lookup key is code, not copy: a translated key would stop
+        // `{{site_text.<key>}}` from finding the entry in that language.
+        {
+          name: "key",
+          label: "Key",
+          type: "text",
+          required: true,
+          maxLength: 64,
+          ext: { "international-site": { translate: false } },
+        },
+        { name: "text", label: "Text", type: "text", required: true },
+      ],
+    },
+  },
+};

package/src/lists/fields.ts

@@ -50,6 +50,7 @@ export const LIST_RESERVED_NAMES: ReadonlySet<string> = new Set([
   "last",
   "items",
   "page",
+  "site_text",
   "recurse",
 ]);
 const RESERVED_PREFIXES = ["is_", "has_", "count_"] as const;

package/src/lists/list-fixtures.test.ts

@@ -12,7 +12,7 @@
  */
 
 import { createSiteLinkIndex, type LinkPageVariant } from "../link-refs.js";
-import { DEFAULT_LIST_TYPES } from "./default-types.js";
+import { DEFAULT_LIST_TYPES, SITE_TEXTS_TYPE } from "./default-types.js";
 import type { ListItem } from "./items.js";
 import type { ListTypeDef } from "./list-type.js";
 import type {
@@ -116,6 +116,7 @@ const page = (
 ): ListPageRecord => ({
   id: pageId,
   title,
+  shortTitle: title,
   parentId: null,
   pageTypeSlug: "page",
   properties: {},
@@ -242,12 +243,16 @@ export function fixtureData(
     overlays?: ReadonlyMap<string, ListVariantOverlay>;
     pageVariants?: ReadonlyMap<string, LinkPageVariant>;
     pages?: readonly ListPageRecord[];
+    /** Default: the fixture home page. */
+    homePageId?: string | null;
+    /** Shared lists added to the fixture ones (e.g. a site texts list). */
+    lists?: readonly LoadedList[];
   } = {},
 ): ListRenderData {
-  const types = [...DEFAULT_LIST_TYPES, MEGA_MENU_TYPE];
+  const types = [...DEFAULT_LIST_TYPES, MEGA_MENU_TYPE, SITE_TEXTS_TYPE];
   return {
     listTypes: new Map(types.map((t, i) => [t.slug, { id: id(600 + i), def: t }])),
-    lists: new Map(LISTS.map((l) => [l.id, l])),
+    lists: new Map([...LISTS, ...(extra.lists ?? [])].map((l) => [l.id, l])),
     pageTypes: new Map([
       [
         "news",
@@ -273,6 +278,7 @@ export function fixtureData(
     ...(extra.pageVariants ? { pageVariants: extra.pageVariants } : {}),
     ...(extra.overlays ? { overlays: extra.overlays } : {}),
     siteLanguage: "en",
+    homePageId: extra.homePageId === undefined ? PAGE.home : extra.homePageId,
   };
 }
 

package/src/lists/render-data.ts

@@ -44,6 +44,8 @@ export interface LoadedPageType {
 export interface ListPageRecord {
   readonly id: string;
   readonly title: string;
+  /** `pages.short_title`: the page's label in breadcrumbs and navigation (#1142). */
+  readonly shortTitle: string;
   readonly parentId: string | null;
   readonly pageTypeSlug: string;
   readonly properties: Readonly<Record<string, unknown>>;
@@ -101,6 +103,13 @@ export interface ListRenderData {
   readonly overlays?: ReadonlyMap<string, ListVariantOverlay>;
   /** `site_settings.site_language`, for `{{date.formatted}}`. */
   readonly siteLanguage: string;
+  /**
+   * `site_defaults.home_page_id`: where every breadcrumb trail starts
+   * (#1142). A variant page's trail starts at the home page's version in
+   * that variant (same `link-resolve` group). Null while no home page is
+   * designated.
+   */
+  readonly homePageId: string | null;
 }
 
 /** Render dependencies one page collected (build manifest `render-deps.json`). */

package/src/lists/render-deps.ts

@@ -20,7 +20,7 @@
 import type { ListPageRecord, ListRenderDeps } from "./render-data.js";
 
 export const RENDER_DEPS_FILE = "render-deps.json";
-export const RENDER_DEPS_VERSION = 2;
+export const RENDER_DEPS_VERSION = 3;
 
 /** A page's filter-relevant attributes as of a build. */
 export interface RenderDepsPageAttrs {
@@ -28,6 +28,7 @@ export interface RenderDepsPageAttrs {
   readonly terms: readonly string[];
   readonly parent: string | null;
   readonly title: string;
+  readonly shortTitle: string;
   readonly inBuild: boolean;
 }
 
@@ -47,6 +48,7 @@ export function renderDepsAttrs(p: ListPageRecord): RenderDepsPageAttrs {
     terms: [...p.terms].sort(),
     parent: p.parentId,
     title: p.title,
+    shortTitle: p.shortTitle,
     inBuild: p.inBuild,
   };
 }
@@ -92,8 +94,8 @@ export interface RenderChange {
  *   page's attributes before OR after the change (entered, left or
  *   changed inside the filter);
  * - every page with page-tree deps (breadcrumbs, children, siblings,
- *   term pages) when a changed page's title, parent or build membership
- *   changed;
+ *   term pages) when a changed page's title, short title, parent or
+ *   build membership changed;
  * - every page whose system source rendered a changed page as an entry
  *   (its `props`, `terms`, `updated_at` show there).
  *
@@ -119,6 +121,7 @@ export function selectDependentPages(
       !before ||
       !after ||
       before.title !== after.title ||
+      before.shortTitle !== after.shortTitle ||
       before.parent !== after.parent ||
       before.inBuild !== after.inBuild
     ) {

package/src/lists/resolve.test.ts

@@ -8,9 +8,17 @@
 
 import { describe, expect, it } from "bun:test";
 import type { LinkPageVariant } from "../link-refs.js";
-import { fixtureData, fixtureLinkIndex, ITEM, LIST, PAGE, TERM } from "./list-fixtures.test.js";
+import {
+  fixtureData,
+  fixtureLinkIndex,
+  ITEM,
+  LIST,
+  PAGE,
+  PAGES,
+  TERM,
+} from "./list-fixtures.test.js";
 import type { QueryKnob } from "./list-type.js";
-import type { ListVariantOverlay } from "./render-data.js";
+import type { ListPageRecord, ListVariantOverlay, LoadedList } from "./render-data.js";
 import {
   createListRenderContext,
   type ListFieldSpec,
@@ -126,8 +134,9 @@ describe("system sources", () => {
     source: { kind: "system", name },
   });
 
-  it("breadcrumbs run root → current", () => {
+  it("breadcrumbs run home → root → current", () => {
     expect(entries(page(PAGE.team), sys("breadcrumbs")).map((e) => textOf(e, "title"))).toEqual([
+      "Home",
       "About",
       "Team",
     ]);
@@ -263,8 +272,8 @@ describe("render dependencies", () => {
       listTypes: ["menu"],
       queries: [{ pageType: "news", terms: [TERM.event], parent: null }],
       pageTree: true,
-      // The breadcrumb trail's pages: their values render as entries.
-      pages: [PAGE.about, PAGE.team].sort(),
+      // The breadcrumb trail's pages (home included): their values render as entries.
+      pages: [PAGE.home, PAGE.about, PAGE.team].sort(),
     });
   });
 
@@ -293,3 +302,171 @@ describe("render dependencies", () => {
     expect(ctx.deps().lists).toEqual([LIST.tags]);
   });
 });
+
+describe("breadcrumbs (#1142)", () => {
+  const CRUMBS: ListFieldSpec = {
+    name: "crumbs",
+    listType: "links",
+    bind: "source",
+    source: { kind: "system", name: "breadcrumbs" },
+  };
+  const at = (id: string): ListPageRecord => PAGES.find((p) => p.id === id) as ListPageRecord;
+  const withShort = (id: string, shortTitle: string): ListPageRecord => ({ ...at(id), shortTitle });
+
+  it("labels crumbs with the short title and marks every crumb but the last as ancestor", () => {
+    const data = fixtureData({
+      pages: PAGES.map((p) =>
+        p.id === PAGE.home
+          ? withShort(PAGE.home, "Start")
+          : p.id === PAGE.about
+            ? withShort(PAGE.about, "Us")
+            : p,
+      ),
+    });
+    const ctx = page(PAGE.team, data);
+    const got = entries(ctx, CRUMBS);
+    expect(got.map((e) => textOf(e, "short_title"))).toEqual(["Start", "Us", "Team"]);
+    expect(got.map((e) => e.get("is_ancestor"))).toEqual([
+      { kind: "bool", value: true },
+      { kind: "bool", value: true },
+      { kind: "bool", value: false },
+    ]);
+    expect(got.map((e) => e.get("is_current"))).toEqual([
+      { kind: "bool", value: false },
+      { kind: "bool", value: false },
+      { kind: "bool", value: true },
+    ]);
+    expect(ctx.breadcrumbTrail()).toEqual([PAGE.home, PAGE.about, PAGE.team]);
+    expect(ctx.deps().pageTree).toBe(true);
+    expect(ctx.deps().pages).toEqual([PAGE.home, PAGE.about, PAGE.team].sort());
+  });
+
+  it("the home page's own trail is the home page alone", () => {
+    const ctx = page(PAGE.home);
+    expect(entries(ctx, CRUMBS).map((e) => textOf(e, "title"))).toEqual(["Home"]);
+    expect(ctx.breadcrumbTrail()).toEqual([PAGE.home]);
+  });
+
+  it("without a designated home the trail is the page tree alone", () => {
+    const ctx = page(PAGE.team, fixtureData({ homePageId: null }));
+    expect(entries(ctx, CRUMBS).map((e) => textOf(e, "title"))).toEqual(["About", "Team"]);
+  });
+
+  it("a page that renders no breadcrumbs records no trail", () => {
+    expect(page(PAGE.team).breadcrumbTrail()).toBeNull();
+  });
+
+  it("follows the page tree as it is: a moved page's trail needs no edit", () => {
+    // Team moved from About to News.
+    const moved = PAGES.map((p) => (p.id === PAGE.team ? { ...p, parentId: PAGE.news } : p));
+    const ctx = page(PAGE.team, fixtureData({ pages: moved }));
+    expect(entries(ctx, CRUMBS).map((e) => textOf(e, "title"))).toEqual(["Home", "News", "Team"]);
+  });
+
+  describe("variants", () => {
+    const HOME_DE = "00000000-0000-4000-8000-0000000000d1";
+    const ABOUT_DE = "00000000-0000-4000-8000-0000000000d2";
+    const pages = [
+      ...PAGES,
+      { ...withShort(PAGE.home, "Startseite"), id: HOME_DE },
+      { ...withShort(PAGE.about, "Über uns"), id: ABOUT_DE },
+    ];
+    const pageVariants = new Map<string, LinkPageVariant>([
+      [PAGE.home, { variant: "en", group: "g-home" }],
+      [PAGE.about, { variant: "en", group: "g-about" }],
+      [HOME_DE, { variant: "de", group: "g-home" }],
+      [ABOUT_DE, { variant: "de", group: "g-about" }],
+    ]);
+
+    it("a variant page's trail starts at the home page's version in that variant", () => {
+      const ctx = page(ABOUT_DE, fixtureData({ pages, pageVariants }));
+      expect(entries(ctx, CRUMBS).map((e) => textOf(e, "short_title"))).toEqual([
+        "Startseite",
+        "Über uns",
+      ]);
+    });
+
+    it("a variant without a version of the home page shows no home crumb", () => {
+      const fr = new Map(pageVariants).set(ABOUT_DE, { variant: "fr", group: "g-about" });
+      const ctx = page(ABOUT_DE, fixtureData({ pages, pageVariants: fr }));
+      expect(entries(ctx, CRUMBS).map((e) => textOf(e, "short_title"))).toEqual(["Über uns"]);
+    });
+  });
+});
+
+describe("site texts (#1142)", () => {
+  const SITE_TEXTS = "00000000-0000-4000-8000-0000000000e1";
+  const LABEL = "00000000-0000-4000-9000-0000000000e1";
+  const MORE = "00000000-0000-4000-9000-0000000000e2";
+  const list = (items: LoadedList["items"], id = SITE_TEXTS): LoadedList => ({
+    id,
+    slug: id === SITE_TEXTS ? "site-texts" : "more-texts",
+    name: "Site texts",
+    typeSlug: "site-texts",
+    items,
+  });
+  const text = (itemId: string, key: string, value: string) => ({
+    id: itemId,
+    node: "text",
+    values: { key, text: value },
+  });
+  const read = (ctx: ListPageContext, key: string) => ctx.siteTextScope().get(key);
+
+  it("reads a text by key and records the list as a dependency", () => {
+    const ctx = page(
+      PAGE.about,
+      fixtureData({ lists: [list([text(LABEL, "breadcrumb_label", "Breadcrumb")])] }),
+    );
+    expect(read(ctx, "breadcrumb_label")).toEqual({ kind: "text", text: "Breadcrumb" });
+    expect(ctx.deps().lists).toContain(SITE_TEXTS);
+    expect(ctx.deps().listTypes).toContain("site-texts");
+  });
+
+  it("an unknown key is loud, never empty", () => {
+    const ctx = page(PAGE.about, fixtureData({ lists: [list([])] }));
+    expect(read(ctx, "breadcrumb_label")).toEqual({
+      kind: "failed",
+      marker: "site-text-missing:breadcrumb_label",
+    });
+  });
+
+  it("a key defined twice is loud", () => {
+    const ctx = page(
+      PAGE.about,
+      fixtureData({
+        lists: [
+          list([text(LABEL, "read_more", "Read more")]),
+          list([text(MORE, "read_more", "More")], "00000000-0000-4000-8000-0000000000e2"),
+        ],
+      }),
+    );
+    expect(read(ctx, "read_more")).toEqual({
+      kind: "failed",
+      marker: "site-text-duplicate:read_more",
+    });
+  });
+
+  it("a variant's overlay translates the text", () => {
+    const data = fixtureData({
+      lists: [list([text(LABEL, "breadcrumb_label", "Breadcrumb")])],
+      pageVariants: new Map([[PAGE.about, { variant: "de", group: null }]]),
+      overlays: new Map([
+        [
+          "de",
+          {
+            values: new Map([[`list/${SITE_TEXTS}/item/${LABEL}/text`, "Brotkrumen"]]),
+            hidden: new Set<string>(),
+          },
+        ],
+      ]),
+    });
+    expect(read(page(PAGE.about, data), "breadcrumb_label")).toEqual({
+      kind: "text",
+      text: "Brotkrumen",
+    });
+    expect(read(page(PAGE.home, data), "breadcrumb_label")).toEqual({
+      kind: "text",
+      text: "Breadcrumb",
+    });
+  });
+});