@morphemecms/cms 0.14.2 → 0.14.3-next-20261107160925

package/src/ReleaseNoteLines.tsx

@@ -0,0 +1,17 @@
+// The smaller changes of a version as a list under "Also in this version", one line each.
+// Exposes ReleaseNoteLines. Depends on i18n and the release note type of lib/releaseNotes.mjs.
+import { t } from './i18n';
+import type { ReleaseNote } from '../lib/releaseNotes.mjs';
+
+export function ReleaseNoteLines({ lines }: { lines: ReleaseNote[] }) {
+  return (
+    <div className="space-y-2">
+      <h4 className="text-base font-medium">{t.cms.alsoInThisVersion}</h4>
+      <ul className="list-disc space-y-1 ps-5 text-base marker:text-accent">
+        {lines.map((note) => (
+          <li key={note.id}>{note.text}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/ReleaseNoteSection.tsx

@@ -0,0 +1,12 @@
+// One release note card as a section of the release notes: its title and its text.
+// Exposes ReleaseNoteSection. Depends on the release note type of lib/releaseNotes.mjs.
+import type { ReleaseNote } from '../lib/releaseNotes.mjs';
+
+export function ReleaseNoteSection({ note }: { note: Extract<ReleaseNote, { kind: 'card' }> }) {
+  return (
+    <div className="space-y-1">
+      <h4 className="text-lg font-medium">{note.title}</h4>
+      <p className="text-base">{note.text}</p>
+    </div>
+  );
+}

package/src/ReleaseNotes.tsx

@@ -1,50 +1,72 @@
-// The release notes on the Morpheme page (#morpheme), as an article: its title, then per version a small heading, its
-// cards in the editor's language (else English) as sections with a title and a text, and its other changes as a list
-// under "Also in this version"; for a version without notes, its text. No cards and no screenshots: the start screen's
-// update card (UpdatesNotice.tsx) shows the pictures. Exposes ReleaseNotes and VersionNotes. Depends on
-// lib/releaseNotes.mjs (notesFor) and i18n.
+// The release notes on the Morpheme page (#morpheme), as an article: its title, then per version a heading ("New in
+// Morpheme Braies 0.14.3"), the day it was released and, under a line's newest version, its edition's photo; its cards
+// in the editor's language (else English) as sections with a title and a text, and its other changes as a list under
+// "Also in this version"; for a version without notes, its text. No screenshots: the start screen's update card
+// (UpdatesNotice.tsx) shows them. Exposes ReleaseNotes and VersionNotes; it only composes ReleaseNoteSection.tsx and
+// ReleaseNoteLines.tsx. Depends on lib/releaseNotes.mjs (notesFor) and i18n.
 import { locale, t } from './i18n';
 import { notesFor } from '../lib/releaseNotes.mjs';
-import type { ReleaseNote } from '../lib/releaseNotes.mjs';
+import type { Edition, ReleaseNote } from '../lib/releaseNotes.mjs';
+import { ReleaseNoteSection } from './ReleaseNoteSection';
+import { ReleaseNoteLines } from './ReleaseNoteLines';
 
-export type VersionNotes = { version: string; text: string; notes?: Record<string, ReleaseNote[]> };
+/** A version's notes; `date` (YYYY-MM-DD) and `edition` for the versions the package carries (bundledNotes.ts). */
+export type VersionNotes = {
+  version: string;
+  text: string;
+  date?: string;
+  edition?: Edition;
+  notes?: Record<string, ReleaseNote[]>;
+};
+
+/** A day (YYYY-MM-DD) as the editor's language writes it ("November 7, 2026"). */
+const dayOf = (date: string) =>
+  new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(new Date(`${date}T12:00:00Z`));
 
 type Card = Extract<ReleaseNote, { kind: 'card' }>;
 
-function VersionEntry({ entry }: { entry: VersionNotes }) {
+function VersionEntry({ entry, photo }: { entry: VersionNotes; photo: boolean }) {
   const notes = notesFor(entry.notes, locale) ?? [];
   const cards = notes.filter((note): note is Card => note.kind === 'card');
   const lines = notes.filter((note) => note.kind === 'line');
+  // A test version (0.14.3-next-…) is named as the version it leads to.
+  const version = entry.version.split('-')[0];
+  const name = entry.edition ? t.library.cmsEdition(entry.edition.name, version) : t.library.cmsVersion(version);
   return (
     <section className="space-y-5 border-t border-line pt-5 first-of-type:border-t-0 first-of-type:pt-0">
-      <h3 className="text-sm font-medium text-muted">{t.cms.running(entry.version)}</h3>
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-xl">{t.cms.newIn(name)}</h3>
+          {entry.date && (
+            <p className="text-sm text-muted">
+              <time dateTime={entry.date}>{dayOf(entry.date)}</time>
+            </p>
+          )}
+        </div>
+        {photo && entry.edition && (
+          <img
+            src={entry.edition.image}
+            alt={entry.edition.place[locale] ?? entry.edition.place['en-US'] ?? entry.edition.name}
+            className="block aspect-[3/2] w-full rounded-xl object-cover"
+          />
+        )}
+      </div>
       {!notes.length && entry.text && <p className="text-base">{entry.text}</p>}
       {cards.map((note) => (
-        <div key={note.id} className="space-y-1">
-          <h4 className="text-lg font-medium">{note.title}</h4>
-          <p className="text-base">{note.text}</p>
-        </div>
+        <ReleaseNoteSection key={note.id} note={note} />
       ))}
-      {lines.length > 0 && (
-        <div className="space-y-2">
-          <h4 className="text-base font-medium">{t.cms.alsoInThisVersion}</h4>
-          <ul className="list-disc space-y-1 ps-5 text-base marker:text-accent">
-            {lines.map((note) => (
-              <li key={note.id}>{note.text}</li>
-            ))}
-          </ul>
-        </div>
-      )}
+      {lines.length > 0 && <ReleaseNoteLines lines={lines} />}
     </section>
   );
 }
 
-export function ReleaseNotes({ title, entries }: { title: string; entries: VersionNotes[] }) {
+export function ReleaseNotes({ title, entries }: { title?: string; entries: VersionNotes[] }) {
   return (
     <article className="mb-8 max-w-prose space-y-5 px-4 not-first:mt-8">
-      <h2 className="text-2xl">{title}</h2>
-      {entries.map((entry) => (
-        <VersionEntry key={entry.version} entry={entry} />
+      {title && <h2 className="text-2xl">{title}</h2>}
+      {entries.map((entry, i) => (
+        // One photo per line: under its newest version's heading.
+        <VersionEntry key={entry.version} entry={entry} photo={entry.edition?.line !== entries[i - 1]?.edition?.line} />
       ))}
     </article>
   );

package/src/Screen.tsx

@@ -14,7 +14,7 @@
 // Under the content of every screen is the editor's footer (EditorFooter.tsx), at the bottom of the window when the content
 // is short (the screen fills the column under the bar, TopBarLayout). Below medium, while the screen has a floating action
 // button (fabPresence.tsx), there is room for it under the footer (data-clearance): the page is that much taller than the
-// window (--editor-fab-clearance, editor.css), so a short screen still has its footer at the bottom of the window and can
+// window (--fab-room and --editor-fab-clearance, editor.css), so a short screen still has its footer at the bottom of the window and can
 // be scrolled up to show it above the FAB.
 import { useId, type MouseEvent, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
@@ -180,7 +180,7 @@ export default function Screen<T extends string>({
       <div className="flex flex-1">
         <main
           data-clearance={fabs.count > 0}
-          className={`editor-screen flex min-w-0 flex-1 flex-col px-4 pt-6 pb-[env(safe-area-inset-bottom)] data-[clearance=true]:pb-[calc(4.5rem+env(safe-area-inset-bottom))] medium:px-6 medium:pt-8 medium:pb-4 medium:data-[clearance=true]:pb-4 ${width}`}
+          className={`editor-screen flex min-w-0 flex-1 flex-col px-4 pt-6 pb-[env(safe-area-inset-bottom)] data-[clearance=true]:pb-[calc(var(--fab-room)+env(safe-area-inset-bottom))] medium:px-6 medium:pt-8 medium:pb-4 medium:data-[clearance=true]:pb-4 ${width}`}
         >
           {/* At expanded and wider: the way here, the title and the status, under the bar. */}
           <div className="mb-6 hidden min-w-0 items-center gap-x-2 expanded:flex">

package/src/UpdatesNotice.tsx

@@ -1,11 +1,13 @@
-// At the top of the start screen: what was updated since the last visit in this browser, as a card with a close button
-// that marks it seen, in the accent (the editor's blue). For the CMS: its new version large, how many new things it brings and the first of them from the
-// notes the package carries (bundledNotes.ts: the first with a screenshot large, then the titles and texts of the next),
-// and a button to the Morpheme page with all of them; for each app installed from the store: a row with its icon and new
-// version, to its Information tab. Exposes UpdatesNotice. The logic is startView.mjs's (changesSince) and
-// releaseNotes.mjs's (notesSince), the storage startStorage.ts's, the card, rows and buttons the theme's (themeUi.ts, ui.tsx).
-import { useEffect, useState } from 'react';
-import { ArrowRight, Sparkle } from '@phosphor-icons/react';
+// At the top of the start screen: what was updated since the last visit in this browser, as a card with Close, which
+// marks it seen, and Read more. For the CMS: the photo of its edition (release-notes/editions/, named after the place the
+// photo is from), 3:2 with rounded corners, above the text in the compact window class and from the medium class up to
+// the left of it, as high as the card; "Morpheme <edition> <version>" (the headline), the place in full (the subhead,
+// with an info button after it that credits the photographer, PhotoCredit), how many new things it brings (the supporting
+// text, bundledNotes.ts) and Read more to the Morpheme page with all of them; for each app installed from the store: a
+// row with its icon and new version, to its Information tab. Exposes UpdatesNotice. The logic is startView.mjs's
+// (changesSince) and releaseNotes.mjs's (notesSince, editionOf), the storage startStorage.ts's, the card, rows, buttons
+// and tooltip the theme's (themeUi.ts, ui.tsx).
+import { useEffect, useRef, useState } from 'react';
 import { version } from '../package.json';
 import { locale, t } from './i18n';
 import { installedApps } from './apps';
@@ -13,17 +15,16 @@ import { apps } from './site';
 import { changesSince, versioned, type Versions } from './startView.mjs';
 import { keepStored, SEEN, storedSeen } from './startStorage';
 import type { RepoFile } from './github';
-import { SiteCard } from './themeUi';
-import { CloseButton, LinkButton, ListItem, plainListClass } from './ui';
+import { SiteCard, SiteTooltip } from './themeUi';
+import { Svg } from './icon';
+import { Button, LinkButton, ListItem, plainListClass } from './ui';
 import { CMS_ROUTE } from './CmsPage';
+import { LICENSES_ROUTE } from './Licenses';
 import { appHref } from './AppList';
-import { runningNotes } from './bundledNotes';
-import { notesSince, type ReleaseNote } from '../lib/releaseNotes.mjs';
+import { runningEdition, runningNotes } from './bundledNotes';
+import { notesSince } from '../lib/releaseNotes.mjs';
 import { INFO_KEY } from '../lib/appRoute.mjs';
 
-/** How many of the new things the card shows; the Morpheme page has them all. */
-const SHOWN = 3;
-
 /** The CMS's version and those of the apps installed from the store, as the editor is built with them now. */
 function versionsNow(files: RepoFile[]): Versions {
   const installed = installedApps(files);
@@ -33,28 +34,61 @@ function versionsNow(files: RepoFile[]): Versions {
   };
 }
 
-/** The first new thing with a screenshot, large: the screenshot fills the top (its top part), its title under it. */
-function Lead({ note }: { note: Extract<ReleaseNote, { kind: 'card' }> }) {
+/** The info button right after the place's name (the theme's info icon, which every icon pack has), with a rich
+ * tooltip: who took the photo, on Unsplash, and a link to its licence under "Licenses". It opens while the mouse is over
+ * the button or the tooltip, while focus is in them, and on a tap (a second tap closes it); Escape closes it. Under the
+ * button, from its end, at most 15rem wide, so it stays on a phone's screen. */
+function PhotoCredit({ by, line }: { by: string; line: string }) {
+  const [open, setOpen] = useState(false);
+  const leave = useRef<ReturnType<typeof setTimeout>>(undefined);
+  // When it opened: a tap focuses the button (which opens it) just before its click, which must not close it again.
+  const openedAt = useRef(0);
+  const show = () => {
+    clearTimeout(leave.current);
+    if (!open) openedAt.current = Date.now();
+    setOpen(true);
+  };
+  const hide = () => {
+    clearTimeout(leave.current);
+    leave.current = setTimeout(() => setOpen(false), 150);
+  };
+  // Escape closes it wherever the pointer and the focus are (WCAG 1.4.13).
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false);
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open]);
+  useEffect(() => () => clearTimeout(leave.current), []);
   return (
-    <div className="overflow-hidden rounded-xl bg-accent-container text-on-accent-container">
-      <img src={note.image} alt="" className="block h-44 w-full object-cover object-top" />
-      <p className="px-4 py-3 font-medium">{note.title}</p>
+    <div
+      className="-my-3 -ms-2.5 inline-flex align-middle"
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={(e) => !e.currentTarget.contains(e.relatedTarget) && hide()}
+    >
+      <SiteTooltip
+        open={open}
+        // Only `open` shows it: not the theme's fallback on hover and focus, which Escape could not close.
+        className="[&:not([data-tooltip-open])>.tooltip]:invisible [&:not([data-tooltip-open])>.tooltip]:opacity-0 [&>.tooltip]:start-auto [&>.tooltip]:end-0 [&>.tooltip]:top-[calc(100%-0.5rem)] [&>.tooltip]:bottom-auto [&>.tooltip]:max-w-60"
+        supportingText={t.library.photoBy(by)}
+        action={{ label: t.library.photoLicense, href: `#${LICENSES_ROUTE}/${encodeURIComponent(`editions/${line}`)}` }}
+      >
+        <button
+          type="button"
+          aria-label={t.library.photoInfo}
+          aria-expanded={open}
+          onClick={() => (open && Date.now() - openedAt.current < 400 ? undefined : open ? setOpen(false) : show())}
+          className="grid size-12 place-items-center rounded-full text-muted focus-visible:outline-2 focus-visible:outline-offset-[-8px]"
+        >
+          <Svg name="info" size={20} />
+        </button>
+      </SiteTooltip>
     </div>
   );
 }
 
-/** One more new thing: a sparkle and its title (a card) or its text (a line). */
-function Highlight({ note }: { note: ReleaseNote }) {
-  return (
-    <li className="flex items-center gap-3 rounded-xl bg-accent-container p-3 text-on-accent-container">
-      <span className="grid size-10 shrink-0 place-items-center rounded-full bg-accent text-on-accent">
-        <Sparkle size={20} weight="fill" aria-hidden />
-      </span>
-      <span className={note.kind === 'card' ? 'font-medium' : 'text-sm'}>{note.kind === 'card' ? note.title : note.text}</span>
-    </li>
-  );
-}
-
 /** The first visit, and a visit with nothing new, only notes the versions. */
 export function UpdatesNotice({ files }: { files: RepoFile[] }) {
   const now = versionsNow(files);
@@ -74,48 +108,49 @@ export function UpdatesNotice({ files }: { files: RepoFile[] }) {
     return app ? [{ app, version: c.version }] : [];
   });
   const news = cms ? notesSince(runningNotes, cms.from, locale) : [];
-  const lead = news.find((note): note is Extract<ReleaseNote, { kind: 'card' }> => note.kind === 'card' && !!note.image);
-  const rest = news.filter((note) => note !== lead);
+  const edition = cms && runningEdition;
+  const place = edition && (edition.place[locale] ?? edition.place['en-US']);
+  const title = cms
+    ? edition
+      ? t.library.cmsEdition(edition.name, cms.version)
+      : t.library.cmsVersion(cms.version)
+    : t.library.appsUpdated(updatedApps.length);
   return (
-    <SiteCard
-      kind="filled"
-      as="section"
-      role="status"
-      aria-labelledby="updates-title"
-      className="relative mb-8 text-on-accent [--card-filled-surface:var(--accent)] [--card-padding:0] [--icon-button-standard-text:var(--on-accent)]"
-    >
-      <CloseButton onClick={close} />
-      <div className="flex items-center gap-4 p-4 pe-14">
-        <span className="grid size-12 shrink-0 place-items-center rounded-full bg-on-accent text-accent">
-          <Sparkle size={26} weight="fill" aria-hidden />
-        </span>
-        <div className="min-w-0">
-          <h2 id="updates-title" className="text-sm font-medium">
-            {t.library.updatesTitle}
+    <SiteCard kind="outlined" as="section" role="status" aria-labelledby="updates-title" className="mb-8 [--card-padding:0]">
+      <div className="grid medium:grid-cols-[auto_1fr]">
+        {edition && (
+          <div className="relative aspect-[3/2] w-full medium:h-full medium:w-auto">
+            <img src={edition.image} alt="" className="absolute inset-0 size-full rounded-xl object-cover" />
+          </div>
+        )}
+        <div className="flex min-w-0 flex-col p-4">
+          <h2
+            id="updates-title"
+            className="text-[length:var(--type-headline-small-size)] leading-[var(--type-headline-small-line-height)] [overflow-wrap:anywhere]"
+          >
+            {title}
           </h2>
-          <p className="text-2xl leading-tight">{cms ? t.library.cmsVersion(cms.version) : t.library.appsUpdated(updatedApps.length)}</p>
-          {news.length > 0 && <p className="text-sm opacity-85">{t.library.newThings(news.length)}</p>}
+          {place && (
+            <p className="mt-1 text-sm">
+              {place}
+              {edition.by && <PhotoCredit by={edition.by} line={edition.line} />}
+            </p>
+          )}
+          {news.length > 0 && <p className="mt-2 text-sm text-muted">{t.library.newThings(news.length)}</p>}
+          <div className="mt-auto flex flex-wrap justify-end gap-2 pt-4">
+            <Button kind="text" size="small" onClick={close}>
+              {t.common.close}
+            </Button>
+            {cms && (
+              <LinkButton kind="filled" size="small" href={`#${CMS_ROUTE}`}>
+                {t.library.readMore}
+              </LinkButton>
+            )}
+          </div>
         </div>
       </div>
-      {news.length > 0 && (
-        <div className="space-y-2 px-4">
-          {lead && <Lead note={lead} />}
-          <ul className="space-y-2">
-            {rest.slice(0, lead ? SHOWN - 1 : SHOWN).map((note) => (
-              <Highlight key={note.id} note={note} />
-            ))}
-          </ul>
-        </div>
-      )}
-      {cms && (
-        <div className="px-4 pt-4 pb-4">
-          <LinkButton kind="tonal" href={`#${CMS_ROUTE}`} icon={ArrowRight}>
-            {t.library.seeWhatsNew}
-          </LinkButton>
-        </div>
-      )}
       {updatedApps.length > 0 && (
-        <ul className={`${plainListClass} mx-4 mb-4 overflow-hidden rounded-xl bg-accent-container text-on-accent-container`}>
+        <ul className={`${plainListClass} border-t border-line`}>
           {updatedApps.map(({ app, version }) => (
             <ListItem
               key={app.id}

package/src/VersionLinePage.tsx

@@ -0,0 +1,42 @@
+// A minor line's own page (#morpheme/<line>, e.g. #morpheme/0.13), from "Earlier versions" on the Morpheme page:
+// "Morpheme 0.13" with the notes of each of its versions (ReleaseNotes), newest first. Exposes VersionLinePage and
+// EarlierVersions (the rows to these pages). Depends on bundledNotes.ts (runningNotes, runningLine) and
+// lib/releaseNotes.mjs (versionLines).
+import Screen from './Screen';
+import { CMS_ROUTE } from './CmsPage';
+import { ReleaseNotes } from './ReleaseNotes';
+import { EmptyNote, Group, ListItem } from './ui';
+import { runningLine, runningNotes } from './bundledNotes';
+import { versionLines } from '../lib/releaseNotes.mjs';
+import { t } from './i18n';
+
+/** The lines older than the running one, newest first. */
+const earlier = () => versionLines(runningNotes).filter(({ line }) => line !== runningLine);
+
+/** "Earlier versions": a row per older minor line, with how many versions it has, to its page. */
+export function EarlierVersions() {
+  const lines = earlier();
+  if (!lines.length) return null;
+  return (
+    <Group title={t.cms.earlierVersions}>
+      {lines.map(({ line, entries }) => (
+        <ListItem
+          key={line}
+          href={`#${CMS_ROUTE}/${line}`}
+          headline={t.library.cmsVersion(line)}
+          supporting={t.cms.versionCount(entries.length)}
+          arrow
+        />
+      ))}
+    </Group>
+  );
+}
+
+export function VersionLinePage({ line }: { line: string }) {
+  const found = earlier().find((x) => x.line === line);
+  return (
+    <Screen title={t.library.cmsVersion(line)} back={{ href: `#${CMS_ROUTE}`, label: t.common.parts.morpheme }}>
+      {found ? <ReleaseNotes entries={found.entries} /> : <EmptyNote>{t.cms.lineNotFound}</EmptyNote>}
+    </Screen>
+  );
+}

package/src/bundledNotes.ts

@@ -1,11 +1,46 @@
-// The release notes of the minor line this package is in (x.y.0 up to its version): read at build time from the package's own release-notes/ files.
-// Exposes runningNotes (the entries the Morpheme page shows, newest first; empty when the line has none).
+// The release notes of every version up to this package's: read at build time from its own release-notes/ files and CHANGELOG.md.
+// Exposes runningNotes (the entries the Morpheme page shows, newest first, each with its date and its edition: every
+// version with notes, then the older ones from CHANGELOG.md; on a test version first the notes merged since the last
+// release) and runningEdition
+// (the edition this version belongs to: the place its photo is from, short and in full, and the photo; undefined when there is none)
+// and editionPhotos (each edition's photo by its minor line).
 // Depends on lib/releaseNotes.mjs (bundledNotes) and package.json's version. The globs are relative, so they work here and in a site's node_modules.
-import { bundledNotes } from '../lib/releaseNotes.mjs';
+import { bundledNotes, editionOf, minorOf } from '../lib/releaseNotes.mjs';
 import { version } from '../package.json';
-import type { ReleasedNotes } from '../lib/releaseNotes.mjs';
+import changelog from '../CHANGELOG.md?raw';
+import type { ReleasedNotes, ReleaseNote } from '../lib/releaseNotes.mjs';
 
 const files = import.meta.glob<ReleasedNotes>('../release-notes/i18n/*/*.json', { eager: true, import: 'default' });
+// The notes merged since the last release: a test version (npm tag next) shows them as its own.
+const pending = import.meta.glob<ReleaseNote>('../release-notes/i18n/*/pending/*.json', { eager: true, import: 'default' });
 const images = import.meta.glob<string>('../release-notes/i18n/*/*/*.webp', { eager: true, query: '?url', import: 'default' });
 
-export const runningNotes = bundledNotes(files, images, version);
+const editions = import.meta.glob<{ name?: string; place?: Record<string, string>; photo?: { by?: string } }>(
+  '../release-notes/editions/*.json',
+  {
+    eager: true,
+    import: 'default',
+  },
+);
+const editionImages = import.meta.glob<string>('../release-notes/editions/*.webp', { eager: true, query: '?url', import: 'default' });
+
+export const runningEdition = editionOf(editions, editionImages, version);
+
+export const runningNotes = bundledNotes(files, images, version, pending, changelog).map((entry) => ({
+  ...entry,
+  edition: editionOf(editions, editionImages, entry.version),
+}));
+
+/** Each edition's photo, whole, by its version: on its page under "Licenses" (LicensePage). */
+export const editionPhotos: Record<string, string> = Object.fromEntries(
+  Object.entries(editionImages).map(([path, url]) => [
+    path
+      .split('/')
+      .pop()!
+      .replace(/\.webp$/, ''),
+    url,
+  ]),
+);
+
+/** The minor line this package is in ("0.14"): its versions show on the Morpheme page, the older lines on pages of their own. */
+export const runningLine = minorOf(version);

package/src/editor.css

@@ -8,6 +8,9 @@
   --editor-menu-surface: var(--surface-container-lowest);
   --editor-menu-shadow: var(--elevation-2);
 
+  /* The room a screen leaves for its FAB under the footer: Screen.tsx's padding and --editor-fab-clearance (below medium). */
+  --fab-room: 4.5rem;
+
   /* How a check went (CheckList: the SEO rating), as PageSpeed shows it: the mark before a check that is fine and one
      that can be done better, and the score's ring (from 90 good, from 50 average, else bad) with its number and the
      light circle in it; the same in every theme. */
@@ -424,7 +427,7 @@
    the window and can be scrolled up to show it above the FAB. */
 @media (width < theme(--breakpoint-medium)) {
   :root:has(.editor-screen[data-clearance='true']) {
-    --editor-fab-clearance: 4.5rem;
+    --editor-fab-clearance: var(--fab-room);
   }
 }
 

package/src/i18n/da-DK/cms.ts

@@ -8,6 +8,10 @@ export const cms: Messages['cms'] = {
   available: (v) => `Version ${v} er klar`,
   whatsNew: 'Nyheder',
   newInYourVersion: 'Nyt i din version',
+  newIn: (name) => `Nyt i ${name}`,
+  earlierVersions: 'Tidligere versioner',
+  versionCount: (count) => (count === 1 ? '1 version' : `${count} versioner`),
+  lineNotFound: 'Versionen findes ikke',
   alsoInThisVersion: 'Også i denne version',
   storeConnection: 'Forbindelse til Appstore',
   major: 'En ny hovedversion installeres ikke af sig selv.',

package/src/i18n/da-DK/library.ts

@@ -8,21 +8,24 @@ export const library: Messages['library'] = {
   continueTitle: 'Fortsæt, hvor du slap',
   continueEmpty: 'De sider og indlæg, du redigerer, vises her.',
   recentEdit: (kind, when) => `${kind} · Redigeret ${when}`,
-  updatesTitle: 'Opdateret siden dit sidste besøg',
+  cmsEdition: (edition, version) => `Morpheme ${edition} ${version}`,
   appsUpdated: (count) => (count === 1 ? '1 app er opdateret' : `${count} apps er opdateret`),
   newThings: (count) => (count === 1 ? '1 nyhed' : `${count} nyheder`),
-  seeWhatsNew: 'Se, hvad der er nyt',
+  readMore: 'Læs mere',
+  photoInfo: 'Om billedet',
+  photoBy: (name) => `Foto af ${name} på Unsplash`,
+  photoLicense: 'Se licens',
   appUpdatedTo: (version) => `Opdateret til ${version}`,
   githubAccount: (login) => `GitHub-konto: ${login}`,
   logOut: 'Log ud',
   notifications: 'Notifikationer',
   notificationsNew: (count) => `Notifikationer, ${count} nye`,
   noNotifications: 'Ingen notifikationer',
-  clearNotifications: 'Ryd notifikationer',
+  clearNotifications: 'Ryd',
   deleteSelected: (count) => `Slet ${count} valgte`,
   cancelSelection: 'Annuller',
   openWebsite: 'Åbn hjemmesiden',
-  notificationChoices: 'Vælg notifikationer',
+  notificationChoices: 'Indstillinger',
   onDevice: 'På telefonen',
   onDeviceHint: 'Også når editoren er lukket.',
   deviceBlocked: 'Telefonen eller browseren tillader ikke notifikationer fra editoren. Slå dem til i dens indstillinger.',

package/src/i18n/en-US/cms.ts

@@ -10,6 +10,13 @@ export const cms = {
   available: (v: string) => `Version ${v} is available`,
   whatsNew: 'What’s new',
   newInYourVersion: 'New in your version',
+  /** Over a version's notes on that page: "New in Morpheme Braies 0.14.3" (library.cmsEdition, else cmsVersion). */
+  newIn: (name: string) => `New in ${name}`,
+  /** The older minor lines under the running one's notes, each a row to its page (VersionLinePage.tsx). */
+  earlierVersions: 'Earlier versions',
+  versionCount: (count: number) => (count === 1 ? '1 version' : `${count} versions`),
+  /** A minor line's page (#morpheme/<line>) for a line the package has no notes for. */
+  lineNotFound: 'This version doesn’t exist',
   alsoInThisVersion: 'Also in this version',
   storeConnection: 'Store connection',
   major: 'A new major version isn’t installed by itself.',

package/src/i18n/en-US/library.ts

@@ -15,13 +15,19 @@ export const library = {
   /** Under each of them: its kind ("Page") and when it was saved ("today at 1:42 PM", when.ts). */
   recentEdit: (kind: string, when: string) => `${kind} · Edited ${when}`,
   /** At the top of the start screen (UpdatesNotice.tsx): the card with what was updated since the last visit in this
-   * browser. Its title, over the CMS's new version (cmsVersion) or, with only apps updated, how many. */
-  updatesTitle: 'Updated since your last visit',
+   * browser. Its headline: the CMS's name, its edition (the place the edition's photo is from: "Braies") and its new
+   * version; without an edition, cmsVersion; with only apps updated, how many (appsUpdated). */
+  cmsEdition: (edition: string, version: string) => `Morpheme ${edition} ${version}`,
   appsUpdated: (count: number) => (count === 1 ? '1 app updated' : `${count} apps updated`),
   /** Under the CMS's new version: how many new things its release notes have since the version seen last. */
   newThings: (count: number) => (count === 1 ? '1 new thing' : `${count} new things`),
   /** The button to the Morpheme page, with all the release notes. */
-  seeWhatsNew: 'See what’s new',
+  readMore: 'Read more',
+  /** The info button on the edition's photo in that card, and its tooltip: who took the photo, and a link to its
+   * licence under "Licenses". */
+  photoInfo: 'About the photo',
+  photoBy: (name: string) => `Photo by ${name} on Unsplash`,
+  photoLicense: 'See license',
   /** Under an updated app's name. */
   appUpdatedTo: (version: string) => `Updated to ${version}`,
   githubAccount: (login: string) => `GitHub account: ${login}`,
@@ -31,7 +37,8 @@ export const library = {
   /** The bell's name while some are not seen yet. */
   notificationsNew: (count: number) => `Notifications, ${count} new`,
   noNotifications: 'No notifications',
-  clearNotifications: 'Clear notifications',
+  /** The buttons at the bottom of the side sheet: one clears all, one opens "Konto" to choose the types. */
+  clearNotifications: 'Clear',
   /** While some are selected (a long press on one, Notifications.tsx): the button that deletes them, and the one that
    * unselects them. */
   deleteSelected: (count: number) => `Delete ${count} selected`,
@@ -40,7 +47,7 @@ export const library = {
   openWebsite: 'Open website',
   /** On "Konto" › "Notifikationer" (Library.tsx NotificationChoices, notificationData.ts). */
   /** The sliders on "Notifikationer": to "Konto", where they are turned on or off. */
-  notificationChoices: 'Choose notifications',
+  notificationChoices: 'Settings',
   onDevice: 'On the phone',
   onDeviceHint: 'Also when the editor is closed.',
   deviceBlocked: 'The phone or browser doesn’t allow notifications from the editor. Turn them on in its settings.',