npm - @morphemecms/cms - Versions diffs - 0.14.1 → 0.14.2-next-20261107121812 - Mend

@morphemecms/cms 0.14.1 → 0.14.2-next-20261107121812

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/CHANGELOG.md +7 -0
package/lib/colors.ts +4 -0
package/lib/releaseNotes.d.mts +13 -0
package/lib/releaseNotes.mjs +21 -2
package/lib/releaseNotes.test.mjs +18 -0
package/package.json +1 -1
package/pages/editor/index.astro +8 -5
package/release-notes/i18n/da-DK/0.14.0.json +2 -2
package/release-notes/i18n/da-DK/pending/lists-follow-md3.json +5 -0
package/release-notes/i18n/da-DK/pending/update-card-whats-new.json +6 -0
package/release-notes/i18n/da-DK/pending/update-card-whats-new.webp +0 -0
package/release-notes/i18n/en-US/0.14.0.json +2 -2
package/release-notes/i18n/en-US/pending/lists-follow-md3.json +5 -0
package/release-notes/i18n/en-US/pending/update-card-whats-new.json +6 -0
package/release-notes/i18n/en-US/pending/update-card-whats-new.webp +0 -0
package/src/CmsPage.tsx +1 -1
package/src/ReleaseNotes.tsx +25 -26
package/src/UpdatesNotice.tsx +99 -15
package/src/editor.css +11 -0
package/src/i18n/da-DK/library.ts +4 -2
package/src/i18n/en-US/library.ts +9 -5
package/src/startView.d.mts +3 -2
package/src/startView.mjs +4 -4
package/src/startView.test.mjs +4 -4
package/src/theme.ts +2 -2
package/theme/styles/global.css +10 -8
package/theme/styles/ui.css +5 -1
package/src/ReleaseNoteCard.tsx +0 -17
package/src/UpdateLink.tsx +0 -21

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,12 @@
 # @morphemecms/cms
+## 0.14.2-next-20261107121812
+### Patch Changes
+- 13dbbca: Lists follow Material 3's list spec: the label text in body large (16/24, weight 400), also beside a switch, and the editor's rows on Surface over a page in Surface Container.
+- 3fbb65f: The start screen's update card shows the new version and its first news, and the Morpheme page shows the release notes as an article.
 ## 0.14.1
 ### Patch Changes

package/lib/colors.ts CHANGED Viewed

@@ -43,6 +43,10 @@ function declarations(set: ColorSet): string {
     .join('');
 }
+/** The colour of the editor's page in a mode: Surface Container, which Material 3's segmented lists stand on (editor.css),
+ * or the background when the colours have no such role. */
+export const pageColor = (set: ColorSet): string => set['surface-container'] ?? set.bg;
 /** The colours as CSS for a <style> in the <head>: light mode on :root; dark mode when the phone or
  * computer is set to it (unless light is picked, data-theme="light" on <html>) and when dark is picked.
  * Throws on anything that is not a colour, so a broken file never reaches a page. */

package/lib/releaseNotes.d.mts CHANGED Viewed

@@ -37,6 +37,19 @@ export function imagePath(version: string, locale: string, id: string): string;
  * @returns {ReleaseNote[] | undefined}
  */
 export function notesFor(notes: Record<string, ReleaseNote[]> | undefined, locale: string): ReleaseNote[] | undefined;
+/**
+ * The notes that are new since `from` (the version seen last), in `locale` (else English): those of the entries newer than
+ * it, the newest version first, its cards before its lines. A test version (0.14.1-next.2) has not had the notes of its
+ * own version yet. Nothing when `from` is not a version.
+ * @param {{ version: string, notes?: Record<string, ReleaseNote[]> }[]} entries
+ * @param {string | undefined} from
+ * @param {string} locale
+ * @returns {ReleaseNote[]}
+ */
+export function notesSince(entries: {
+    version: string;
+    notes?: Record<string, ReleaseNote[]>;
+}[], from: string | undefined, locale: string): ReleaseNote[];
 /**
  * The notes of every released version in the running minor line (x.y.0 up to `version`), from the files the package carries
  * (release-notes/i18n/<locale>/<version>.json), newest first. A card gets the address of its screenshot

package/lib/releaseNotes.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 // Pure helpers for release notes: checks pending notes (cards with a screenshot of the right type and size, lines), groups them per version and locale,
-// picks a locale's notes, builds the notes of the running minor line from the package files and reads a version's notes and screenshots from its tar.
+// picks a locale's notes and those new since a version, builds the notes of the running minor line from the package files and reads a version's notes and screenshots from its tar.
 // Also builds the Worker's screenshot address and KV key, parses the address and adds the address to a version's cards.
-// Exposes MAX_IMAGE_BYTES, IMAGE_WIDTH, MAX_IMAGE_HEIGHT, webpSize, problemsOf, released, imagePath, notesFor, bundledNotes, staleImageDirs, notesFromTar, imageUrl, imageKey,
+// Exposes MAX_IMAGE_BYTES, IMAGE_WIDTH, MAX_IMAGE_HEIGHT, webpSize, problemsOf, released, imagePath, notesFor, notesSince, bundledNotes, staleImageDirs, notesFromTar, imageUrl, imageKey,
 // parseImagePath and withImageUrls. Depends on ./cms-version.mjs and ./changelog.mjs; no node: imports.
 import { compareVersions } from './cms-version.mjs';
 import { bytesFromTar, fileFromTar } from './changelog.mjs';
@@ -155,6 +155,25 @@ export function notesFor(notes, locale) {
 }
 const PLAIN = /^\d+\.\d+\.\d+$/;
+/**
+ * The notes that are new since `from` (the version seen last), in `locale` (else English): those of the entries newer than
+ * it, the newest version first, its cards before its lines. A test version (0.14.1-next.2) has not had the notes of its
+ * own version yet. Nothing when `from` is not a version.
+ * @param {{ version: string, notes?: Record<string, ReleaseNote[]> }[]} entries
+ * @param {string | undefined} from
+ * @param {string} locale
+ * @returns {ReleaseNote[]}
+ */
+export function notesSince(entries, from, locale) {
+  const [base, pre] = String(from ?? '').split('-');
+  if (!PLAIN.test(base)) return [];
+  const notes = entries
+    .filter((entry) => PLAIN.test(entry.version) && compareVersions(entry.version, base) >= (pre === undefined ? 1 : 0))
+    .sort((a, b) => compareVersions(b.version, a.version))
+    .flatMap((entry) => notesFor(entry.notes, locale) ?? []);
+  return [...notes.filter((note) => note.kind === 'card'), ...notes.filter((note) => note.kind === 'line')];
+}
 const sameMinor = (a, b) => a.split('.').slice(0, 2).join('.') === b.split('.').slice(0, 2).join('.');
 /**

package/lib/releaseNotes.test.mjs CHANGED Viewed

@@ -11,6 +11,7 @@ import {
   released,
   imagePath,
   notesFor,
+  notesSince,
   bundledNotes,
   staleImageDirs,
   notesFromTar,
@@ -164,6 +165,23 @@ test('notesFor falls back to the en-US notes', () => {
 });
 test('notesFor gives undefined without notes', () => assert.equal(notesFor(undefined, 'da-DK'), undefined));
+const shipped = (version, notes) => ({ version, text: '', notes: { 'en-US': notes } });
+const ids = (notes) => notes.map((note) => note.id);
+test('notesSince gives the notes of the newer versions, newest first, cards before lines', () => {
+  const entries = [shipped('0.14.0', [card('a'), line('b')]), shipped('0.14.2', [line('c'), card('d')]), shipped('0.14.1', [line('e')])];
+  assert.deepEqual(ids(notesSince(entries, '0.14.0', 'da-DK')), ['d', 'c', 'e']);
+  assert.deepEqual(ids(notesSince(entries, '0.13.4', 'en-US')), ['d', 'a', 'c', 'e', 'b']);
+  assert.deepEqual(notesSince(entries, '0.14.2', 'en-US'), []);
+});
+test('notesSince counts the version of a test version as new', () => {
+  assert.deepEqual(ids(notesSince([shipped('0.14.1', [line('a')])], '0.14.1-next.2', 'en-US')), ['a']);
+});
+test('notesSince gives nothing without a version seen', () => {
+  assert.deepEqual(notesSince([shipped('0.14.1', [line('a')])], undefined, 'en-US'), []);
+  assert.deepEqual(notesSince([shipped('0.14.1', [line('a')])], 'latest', 'en-US'), []);
+});
 const file = (version, notes) => ({ version, notes });
 const dir = '../release-notes/i18n';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.14.1",
+  "version": "0.14.2-next-20261107121812",
   "description": "Morpheme CMS: the editor for a site built with Astro, its screens, its blocks and the rules a site gives it. See README.md.",
   "license": "MIT",
   "author": "Lars Adolfsen",

package/pages/editor/index.astro CHANGED Viewed

@@ -29,6 +29,9 @@ import { colorRoles } from '@site/colors';
 // "Bevægelse" in its place at once (packages/editor/src/theme.ts).
 import { motionCss } from '@morphemecms/cms/lib/motion';
 import { motionScheme } from '@morphemecms/cms/site/motion';
+import { pageColor } from '@morphemecms/cms/lib/colors';
+const shown = completeColors(colors, colorRoles);
 ---
 <!doctype html>
@@ -48,11 +51,11 @@ import { motionScheme } from '@morphemecms/cms/site/motion';
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content={config.name} />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <!-- The top bar in the background's colour, the screens' own and the app bar's at the top; data-color: that of its
-         own mode, for a picked one. -->
-    <meta name="theme-color" content={colors.light.bg} data-color={colors.light.bg} media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content={colors.dark.bg} data-color={colors.dark.bg} media="(prefers-color-scheme: dark)" />
-    <style id="site-colors" is:inline set:html={colorsCss(completeColors(colors, colorRoles))}></style>
+    <!-- The top bar in the editor's page colour (pageColor), the screens' own and the app bar's at the top; data-color: that
+         of its own mode, for a picked one. -->
+    <meta name="theme-color" content={pageColor(shown.light)} data-color={pageColor(shown.light)} media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content={pageColor(shown.dark)} data-color={pageColor(shown.dark)} media="(prefers-color-scheme: dark)" />
+    <style id="site-colors" is:inline set:html={colorsCss(shown)}></style>
     <style id="site-motion" is:inline set:html={motionCss(motionScheme)}></style>
     <!-- Light or dark as picked on "Konto" (packages/editor/src/theme.ts), before the page is drawn. The
          language (lang) is the site's until the editor has picked its own (packages/editor/src/i18n/). -->

package/release-notes/i18n/da-DK/0.14.0.json CHANGED Viewed

@@ -42,8 +42,8 @@
     {
       "id": "quiet-lamps-wander",
       "kind": "card",
-      "title": "Se, hvad der er nyt, med billeder",
-      "text": "Opdateringer skal føles som en venlig hilsen, ikke som en udviklerlog. Åbn siden Morpheme, så ser du hver nyhed med et billede og et par almindelige ord. Alt, der er ændret i din version, står lige der."
+      "title": "Se, hvad der er nyt",
+      "text": "Det kan være svært at følge med i, hvad der er nyt i Morpheme. Derfor får du nu et kort overblik over de nye funktioner efter hver opdatering. Du finder det hele samlet på siden Morpheme."
     }
   ]
 }

package/release-notes/i18n/da-DK/pending/lists-follow-md3.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "id": "lists-follow-md3",
+  "kind": "line",
+  "text": "Lister i editoren viser nu lyse rækker på en tonet side, som i Material 3."
+}

package/release-notes/i18n/da-DK/pending/update-card-whats-new.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "id": "update-card-whats-new",
+  "kind": "card",
+  "title": "Nyhederne møder dig på startskærmen",
+  "text": "Efter en opdatering skal du ikke selv lede efter, hvad der er nyt. Øverst på startskærmen ser du nu den nye version og de vigtigste nyheder, med et billede af den største. Tryk på Se, hvad der er nyt for at se det hele."
+}

package/release-notes/i18n/da-DK/pending/update-card-whats-new.webp ADDED Viewed

Binary file

package/release-notes/i18n/en-US/0.14.0.json CHANGED Viewed

@@ -42,8 +42,8 @@
     {
       "id": "quiet-lamps-wander",
       "kind": "card",
-      "title": "See what's new, with pictures",
-      "text": "Updates should feel like a friendly hello, not a developer log. Open the Morpheme page and you see each new thing with a picture and a few plain words. Everything that changed in your version is right there."
+      "title": "See what's new",
+      "text": "It can be hard to keep up with what's new in Morpheme. So after each update, you now get a short overview of the new features. You'll find it all in one place on the Morpheme page."
     }
   ]
 }

package/release-notes/i18n/en-US/pending/lists-follow-md3.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "id": "lists-follow-md3",
+  "kind": "line",
+  "text": "Lists in the editor now show light rows on a tinted page, as in Material 3."
+}

package/release-notes/i18n/en-US/pending/update-card-whats-new.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "id": "update-card-whats-new",
+  "kind": "card",
+  "title": "What's new meets you on the start screen",
+  "text": "After an update, you shouldn't have to look for what's new yourself. The top of the start screen now shows the new version and the main news, with a picture of the biggest one. Tap See what's new to see it all."
+}

package/release-notes/i18n/en-US/pending/update-card-whats-new.webp ADDED Viewed

Binary file

package/src/CmsPage.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 // "Morpheme" (#morpheme), under "Indstillinger": the CMS version the site runs, the notes of its minor line (from the
 // package itself, bundledNotes.ts), a newer one with its notes, why it is not taken by itself, and an update's progress, and the site's connection to the
 // Morpheme store (MorphemeConnection) as its last group. Exposes CMS_ROUTE and the page. Depends on cmsView.mjs, bundledNotes.ts,
-// ReleaseNotes (the notes as cards), MorphemeConnection and the Worker's /api/cms.
+// ReleaseNotes (the notes as an article), MorphemeConnection and the Worker's /api/cms.
 import { useCallback, useEffect, useState } from 'react';
 import { CheckCircle, Clock, Info, Sparkle, WarningCircle } from '@phosphor-icons/react';
 import Screen from './Screen';

package/src/ReleaseNotes.tsx CHANGED Viewed

@@ -1,9 +1,8 @@
-// A titled list of versions with their release notes on the Morpheme page (#morpheme): per version a small heading, its
-// cards (screenshot, title, text) in the editor's language (else English), then its other changes as a short list under
-// "Also in this version"; for a version without notes, one row with its text. Exposes ReleaseNotes and VersionNotes.
-// Depends on ReleaseNoteCard, ui.tsx, lib/releaseNotes.mjs (notesFor) and i18n.
-import { ReleaseNoteCard } from './ReleaseNoteCard';
-import { GroupTitle, Group, ListItem } from './ui';
+// 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.
 import { locale, t } from './i18n';
 import { notesFor } from '../lib/releaseNotes.mjs';
 import type { ReleaseNote } from '../lib/releaseNotes.mjs';
@@ -13,40 +12,40 @@ export type VersionNotes = { version: string; text: string; notes?: Record<strin
 type Card = Extract<ReleaseNote, { kind: 'card' }>;
 function VersionEntry({ entry }: { entry: VersionNotes }) {
-  const notes = notesFor(entry.notes, locale);
-  if (!notes?.length) {
-    return (
-      <Group>
-        <ListItem headline={t.cms.running(entry.version)} supporting={entry.text} />
-      </Group>
-    );
-  }
+  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');
   return (
-    <div className="mb-6 space-y-3">
-      <h3 className="px-4 text-sm font-medium text-muted">{t.cms.running(entry.version)}</h3>
+    <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>
+      {!notes.length && entry.text && <p className="text-base">{entry.text}</p>}
       {cards.map((note) => (
-        <ReleaseNoteCard key={note.id} note={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>
       ))}
       {lines.length > 0 && (
-        <Group title={t.cms.alsoInThisVersion}>
-          {lines.map((note) => (
-            <ListItem key={note.id} headline={note.text} />
-          ))}
-        </Group>
+        <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>
       )}
-    </div>
+    </section>
   );
 }
 export function ReleaseNotes({ title, entries }: { title: string; entries: VersionNotes[] }) {
   return (
-    <section className="mb-8">
-      <GroupTitle>{title}</GroupTitle>
+    <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} />
       ))}
-    </section>
+    </article>
   );
 }

package/src/UpdatesNotice.tsx CHANGED Viewed

@@ -1,16 +1,28 @@
-// At the top of the start screen: what was updated since the last visit in this browser (the CMS and the apps installed
-// from the store), with a close button that marks it seen. Exposes UpdatesNotice. The logic is startView.mjs's
-// (changesSince), the storage startStorage.ts's, the card the theme's (Notice in ui.tsx).
+// 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';
 import { version } from '../package.json';
-import { t } from './i18n';
+import { locale, t } from './i18n';
 import { installedApps } from './apps';
 import { apps } from './site';
 import { changesSince, versioned, type Versions } from './startView.mjs';
 import { keepStored, SEEN, storedSeen } from './startStorage';
 import type { RepoFile } from './github';
-import { Notice } from './ui';
-import { UpdateLink } from './UpdateLink';
+import { SiteCard } from './themeUi';
+import { CloseButton, LinkButton, ListItem, plainListClass } from './ui';
+import { CMS_ROUTE } from './CmsPage';
+import { appHref } from './AppList';
+import { runningNotes } from './bundledNotes';
+import { notesSince, type ReleaseNote } 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 {
@@ -21,8 +33,29 @@ function versionsNow(files: RepoFile[]): Versions {
   };
 }
-/** Each change is a link to what is new in it (the CMS's page, an app's Information tab). The first visit, and a visit
- * with nothing new, only notes the 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' }> }) {
+  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>
+  );
+}
+/** 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);
   const [changes, setChanges] = useState(() => changesSince(storedSeen(), now));
@@ -35,15 +68,66 @@ export function UpdatesNotice({ files }: { files: RepoFile[] }) {
     keepStored(SEEN, versioned(now));
     setChanges([]);
   };
+  const cms = changes.find((c) => c.id === 'cms');
+  const updatedApps = changes.flatMap((c) => {
+    const app = c.id === 'cms' ? null : apps.find((a) => a.id === c.id);
+    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);
   return (
-    <div className="mb-8">
-      <Notice title={t.library.updatesTitle} onClose={close}>
-        <ul className="space-y-1">
-          {changes.map((c) => (
-            <UpdateLink key={c.id} change={c} />
+    <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}
+          </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>}
+        </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`}>
+          {updatedApps.map(({ app, version }) => (
+            <ListItem
+              key={app.id}
+              href={`${appHref(app)}/${INFO_KEY}`}
+              icon={app.icon}
+              headline={app.label}
+              supporting={t.library.appUpdatedTo(version)}
+              arrow
+            />
           ))}
         </ul>
-      </Notice>
-    </div>
+      )}
+    </SiteCard>
   );
 }

package/src/editor.css CHANGED Viewed

@@ -483,6 +483,17 @@
   font-weight: var(--type-label-medium-weight);
 }
+/* Material 3 Expressive's segmented lists (m3.material.io/components/lists/specs, colour role 1): each item on Surface (the
+   theme's page colour, --bg) over a Surface Container, as Material's own examples and Android's settings show them. So
+   the editor's page, its top app bar and the label of an outlined field (--md-background) are that container, the top
+   app bar a step higher once the page scrolls under it, and the items on Surface. html:root, so it wins over the theme's
+   :root. */
+html:root {
+  --md-background: var(--surface-container, var(--bg));
+  --top-app-bar-stuck-surface: var(--surface-container-high, var(--elevation-3-surface));
+  --list-segmented-surface: var(--bg);
+}
 /* The content column (.editor-column: Screen.tsx's tabs row and its main) stands centred on the window, not in the space
    beside the panels. --column-start and --column-end are the widths of the panels beside the content: the navigation
    rail from medium, the standard drawer instead of it from expanded while it is open (:root[data-sidebar='open']; the

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

@@ -9,8 +9,10 @@ export const library: Messages['library'] = {
   continueEmpty: 'De sider og indlæg, du redigerer, vises her.',
   recentEdit: (kind, when) => `${kind} · Redigeret ${when}`,
   updatesTitle: 'Opdateret siden dit sidste besøg',
-  cmsName: 'Morpheme',
-  updatedTo: (name, version) => `${name} er opdateret til ${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',
+  appUpdatedTo: (version) => `Opdateret til ${version}`,
   githubAccount: (login) => `GitHub-konto: ${login}`,
   logOut: 'Log ud',
   notifications: 'Notifikationer',

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

@@ -14,12 +14,16 @@ export const library = {
   continueEmpty: 'The pages and posts you edit show up here.',
   /** 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: what was updated since the last visit in this browser, each a link to what's new. */
+  /** 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',
-  /** The CMS's name in that notice. */
-  cmsName: 'Morpheme',
-  /** The CMS or an app with its new version. */
-  updatedTo: (name: string, version: string) => `${name} is updated to ${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',
+  /** Under an updated app's name. */
+  appUpdatedTo: (version: string) => `Updated to ${version}`,
   githubAccount: (login: string) => `GitHub account: ${login}`,
   logOut: 'Log out',
   /** The bell in the top bar and its side sheet (Notifications.tsx): the messages shown at the bottom. */

package/src/startView.d.mts CHANGED Viewed

@@ -42,15 +42,16 @@ export function continueShown(closedAt: unknown, latestAt: number | undefined):
  */
 /**
  * What has a version other than at the last visit: the CMS (`id` "cms") and each app installed then and now, with its
- * version now. Nothing at the first visit (`seen` null): there is nothing to compare with. An app installed since is
+ * version now and the one seen (`from`). Nothing at the first visit (`seen` null): there is nothing to compare with. An app installed since is
  * not an update.
  * @param {Versions | null} seen
  * @param {Versions} now
- * @returns {{ id: string, version: string }[]}
+ * @returns {{ id: string, version: string, from: string }[]}
  */
 export function changesSince(seen: Versions | null, now: Versions): {
     id: string;
     version: string;
+    from: string;
 }[];
 /**
  * What the editor's start screen (Library.tsx Start, ContinueCard.tsx, UpdatesNotice.tsx) shows besides its FAB: the pages and blog posts

package/src/startView.mjs CHANGED Viewed

@@ -90,19 +90,19 @@ export function continueShown(closedAt, latestAt) {
 /**
  * What has a version other than at the last visit: the CMS (`id` "cms") and each app installed then and now, with its
- * version now. Nothing at the first visit (`seen` null): there is nothing to compare with. An app installed since is
+ * version now and the one seen (`from`). Nothing at the first visit (`seen` null): there is nothing to compare with. An app installed since is
  * not an update.
  * @param {Versions | null} seen
  * @param {Versions} now
- * @returns {{ id: string, version: string }[]}
+ * @returns {{ id: string, version: string, from: string }[]}
  */
 export function changesSince(seen, now) {
   if (!seen) return [];
   const changed = [];
-  if (seen.cms && now.cms && seen.cms !== now.cms) changed.push({ id: 'cms', version: now.cms });
+  if (seen.cms && now.cms && seen.cms !== now.cms) changed.push({ id: 'cms', version: now.cms, from: seen.cms });
   for (const [id, version] of Object.entries(now.apps)) {
     const before = seen.apps?.[id];
-    if (before && version && before !== version) changed.push({ id, version });
+    if (before && version && before !== version) changed.push({ id, version, from: before });
   }
   return changed;
 }

package/src/startView.test.mjs CHANGED Viewed

@@ -38,8 +38,8 @@ test('finds the CMS and the apps with another version', () => {
   const seen = { cms: '1.0.0', apps: { a: '1.0.0', b: '2.0.0' } };
   const now = { cms: '1.1.0', apps: { a: '1.0.0', b: '2.1.0' } };
   assert.deepEqual(changesSince(seen, now), [
-    { id: 'cms', version: '1.1.0' },
-    { id: 'b', version: '2.1.0' },
+    { id: 'cms', version: '1.1.0', from: '1.0.0' },
+    { id: 'b', version: '2.1.0', from: '2.0.0' },
   ]);
 });
@@ -107,8 +107,8 @@ test('stored data is read only with the current version', () => {
 test('a version that went down counts as a change (current behaviour)', () => {
   assert.deepEqual(changesSince({ cms: '1.1.0', apps: { a: '2.0.0' } }, { cms: '1.0.0', apps: { a: '1.0.0' } }), [
-    { id: 'cms', version: '1.0.0' },
-    { id: 'a', version: '1.0.0' },
+    { id: 'cms', version: '1.0.0', from: '1.1.0' },
+    { id: 'a', version: '1.0.0', from: '2.0.0' },
   ]);
 });

package/src/theme.ts CHANGED Viewed

@@ -3,7 +3,7 @@
 // (the theme's styles/global.css); the script in the head of packages/editor/pages/editor/index.astro does the same
 // before the page is drawn, so it does not flash in the other colours. Its own key, so the site's
 // choice (`theme`) is not changed by the editor's.
-import { colorsCss, isColor, type Colors } from '../lib/colors';
+import { colorsCss, isColor, pageColor, type Colors } from '../lib/colors';
 import { motionCss, type MotionScheme } from '../lib/motion';
 export type Theme = 'light' | 'auto' | 'dark';
@@ -73,7 +73,7 @@ export function applyColors(colors: Colors) {
   const style = document.getElementById('site-colors');
   if (style && style.textContent !== css) style.textContent = css;
   for (const m of bars()) {
-    const bg = colors[isDark(m) ? 'dark' : 'light'].bg;
+    const bg = pageColor(colors[isDark(m) ? 'dark' : 'light']);
     if (isColor(bg)) m.dataset.color = bg;
   }
   applyTheme(savedTheme());

package/theme/styles/global.css CHANGED Viewed

@@ -199,14 +199,15 @@
   --card-filled-surface: var(--md-surface-container-highest);
   --card-outlined-surface: var(--surface);
   --card-outlined-line: var(--line);
-  /* Lists (M3 Expressive's list tokens): items 56, 72 and 88px high by their lines, 16px in from their sides, 10px over
-     and under their text and 12px between their elements, without lines between them; 20px icons; the headline in body
-     large, the supporting text in body medium, the overline and the trailing text in label small; a state layer in the
-     text's colour when pointed at (8%) and pressed (10%), nothing moving aside; disabled at 38%, a segmented item on a
-     10% layer of the text's colour. Their corners extra-small, medium pointed at, large pressed and focused, large
-     increased selected; a selected one in the secondary container. Segmented: each item on a surface container (a step
-     up from the page, as Material's items on the surface over a container), 2px between them and the list's corners
-     large. */
+  /* Lists (M3 Expressive's list tokens, m3.material.io/components/lists/specs): items 56, 72 and 88px high by their lines,
+     16px in from their sides, 10px over and under their text and 12px between their elements, without lines between
+     them; 20px icons; the label text in body large (16/24, 400, 0.5; a setting row's name too), the supporting text in
+     body medium, the overline and the trailing text in label small; a state layer in the text's colour when pointed at
+     (8%) and pressed (10%), nothing moving aside; disabled at 38%, a segmented item on a 10% layer of the text's colour.
+     Their corners extra-small (4px), medium (12px) pointed at, pressed and selected; a selected one in the secondary
+     container. Segmented: 2px between the items, the list's outer corners medium (12px), each item on a surface
+     container (a step up from the page; the editor puts the items on the surface over a container page, as Material's
+     spec does, editor.css). */
   --list-divider: transparent;
   --list-item-min-height: 3.5rem;
   --list-item-two-line-min-height: 4.5rem;
@@ -229,6 +230,7 @@
   --list-item-selected-surface: var(--secondary-container);
   --list-item-selected-text: var(--on-secondary-container);
   --list-item-selected-weight: 400;
+  --setting-row-label-weight: var(--type-body-large-weight);
   --list-item-leading-icon-selected-color: var(--accent);
   --list-item-disabled-opacity: 0.38;
   --list-segmented-gap: 0.125rem;

package/theme/styles/ui.css CHANGED Viewed

@@ -4418,7 +4418,8 @@
 */
 @layer components {
   /* A setting's row (SettingRow.tsx): the name and the line under it, then what sets it, on one line; the switch's
-     and the editor's dropdown row both. */
+     and the editor's dropdown row both. The name in a list item's label type (--list-item-headline-*), so a row with a
+     switch reads as the list rows around it. */
   .setting-row {
     display: flex;
     align-items: center;
@@ -4430,7 +4431,10 @@
   }
   .setting-row-label {
     display: block;
+    font-size: var(--list-item-headline-size, var(--type-body-large-size));
+    line-height: var(--list-item-headline-line-height, var(--type-body-large-line-height));
     font-weight: var(--setting-row-label-weight, var(--switch-label-weight, 500));
+    letter-spacing: var(--list-item-headline-letter-spacing, var(--type-body-large-tracking));
   }
   .setting-row-supporting {
     display: block;

package/src/ReleaseNoteCard.tsx DELETED Viewed

@@ -1,17 +0,0 @@
-// One release note card on the Morpheme page (#morpheme): the theme's outlined card with the note's screenshot on top (when it
-// has one, whole at the card's width and its own height), its title and its text. Exposes ReleaseNoteCard. Depends on the theme's card (themeUi.ts) and the ReleaseNote
-// type of lib/releaseNotes.mjs.
-import { SiteCard } from './themeUi';
-import type { ReleaseNote } from '../lib/releaseNotes.mjs';
-export function ReleaseNoteCard({ note }: { note: Extract<ReleaseNote, { kind: 'card' }> }) {
-  return (
-    <SiteCard kind="outlined" as="article" className="space-y-3 overflow-hidden [--card-padding:0_0_1rem]">
-      {note.image && <img src={note.image} alt={note.title} loading="lazy" className="block h-auto w-full" />}
-      <div className="space-y-2 px-4">
-        <h3 className="text-lg font-medium">{note.title}</h3>
-        <p className="text-base">{note.text}</p>
-      </div>
-    </SiteCard>
-  );
-}

package/src/UpdateLink.tsx DELETED Viewed

@@ -1,21 +0,0 @@
-// One line of the start screen's updates notice: a link to what is new in the CMS or in an app (its Information tab).
-// Exposes UpdateLink. Depends on appHref (AppList.tsx), CMS_ROUTE and INFO_KEY.
-import { t } from './i18n';
-import { CMS_ROUTE } from './CmsPage';
-import { appHref } from './AppList';
-import { apps } from './site';
-import { INFO_KEY } from '../lib/appRoute.mjs';
-/** `change.id` is "cms" or an app's id; `change.version` the version it is updated to. */
-export function UpdateLink({ change }: { change: { id: string; version: string } }) {
-  const app = change.id === 'cms' ? null : apps.find((a) => a.id === change.id);
-  const name = app ? app.label : t.library.cmsName;
-  const href = app ? `${appHref(app)}/${INFO_KEY}` : `#${CMS_ROUTE}`;
-  return (
-    <li>
-      <a href={href} className="underline underline-offset-2 hover:text-accent">
-        {t.library.updatedTo(name, change.version)}
-      </a>
-    </li>
-  );
-}