@morphemecms/cms 0.14.0 → 0.14.2-next-20261107122546

package/src/ReleaseNotes.tsx

@@ -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

@@ -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/bundledNotes.ts

@@ -0,0 +1,11 @@
+// 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).
+// 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 { version } from '../package.json';
+import type { ReleasedNotes } from '../lib/releaseNotes.mjs';
+
+const files = import.meta.glob<ReleasedNotes>('../release-notes/i18n/*/*.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);

package/src/cmsView.d.mts

@@ -3,7 +3,6 @@ export function cmsView(status: any, now?: number): {
     checkedAt: any;
     latest: any;
     notes: any[];
-    installed: any;
     action: string | null;
     npmCommand: string | null;
     update: {

package/src/cmsView.mjs

@@ -1,5 +1,5 @@
 // Transforms CMS status into a view for the update page.
-// Exposes cmsView and DONE_SHOWN. `installed` passes the notes of the update just installed on as the Worker gives them.
+// Exposes cmsView and DONE_SHOWN.
 // Depends on cms-version for version comparison.
 
 import { compareVersions } from '../lib/cms-version.mjs';
@@ -77,7 +77,5 @@ export function cmsView(status, now = Date.now()) {
     problems.push('slow-undo');
   }
 
-  const installed = Array.isArray(status.installed) ? status.installed : [];
-
-  return { running, checkedAt, latest, notes, installed, action, npmCommand, update, problems };
+  return { running, checkedAt, latest, notes, action, npmCommand, update, problems };
 }

package/src/cmsView.test.mjs

@@ -150,9 +150,3 @@ test('pre-release running', () => {
   const view = cmsView(status, now);
   assert.equal(view.latest, null);
 });
-
-test('passes the installed notes on, or an empty list', () => {
-  const installed = [{ version: '0.1.1', text: 'Fixes', notes: { 'en-US': [] } }];
-  assert.deepEqual(cmsView(makeStatus({ installed }), now).installed, installed);
-  assert.deepEqual(cmsView(makeStatus({}), now).installed, []);
-});

package/src/editor.css

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/starter/package.json

@@ -32,7 +32,7 @@
     "@material-symbols/svg-400": "0.48.2",
     "@material/material-color-utilities": "^0.3.0",
     "@milkdown/kit": "^7.22.3",
-    "@morphemecms/cms": "0.14.0",
+    "@morphemecms/cms": "0.14.1",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",

package/theme/styles/global.css

@@ -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

@@ -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/worker/cms-update.js

@@ -3,7 +3,7 @@
 // Exposes RUNNING, checkForUpdate, startUpdate, watchUpdate, cmsStatus and handleCms (/api/cms, and GET /api/cms/note-image/<version>/<locale>/<id>,
 // behind the same login check). Needs GITHUB_PUBLISH_TOKEN and the KV binding PUSH. Keeps each new version's changelog text and release
 // notes (en-US, da-DK) as cms:notes:<version> and each card screenshot as cms:note-image:<version>:<locale>:<id>; cmsStatus returns
-// the notes to come and the installed ones, with the screenshot address on each card. Depends on github.js, session.js, push.js and lib/{lockfile,cms-version,changelog,releaseNotes}.mjs;
+// the notes to come, with the screenshot address on each card. Depends on github.js, session.js, push.js and lib/{lockfile,cms-version,changelog,releaseNotes}.mjs;
 // I/O is injected (`deps`).
 import { config } from '@site/config';
 import { cms as cmsEn } from '../src/i18n/en-US/cms';
@@ -11,7 +11,7 @@ import { cms as cmsDa } from '../src/i18n/da-DK/cms';
 import { addToLock, NeedsNpm } from '../lib/lockfile.mjs';
 import { compareVersions, managedVersion, nextVersion, PACKAGE, watchStep } from '../lib/cms-version.mjs';
 import { fileFromTar, gunzip, sectionsBetween } from '../lib/changelog.mjs';
-import { imageKey, installedVersions, notesFromTar, parseImagePath, withImageUrls } from '../lib/releaseNotes.mjs';
+import { imageKey, notesFromTar, parseImagePath, withImageUrls } from '../lib/releaseNotes.mjs';
 import pkg from '../package.json';
 import { GitHubError } from './files.js';
 import { commitFiles, readFiles } from './github.js';
@@ -211,8 +211,8 @@ export async function watchUpdate(env, deps = defaultDeps, now = Date.now()) {
 
 /**
  * What the page shows: the running version, the token, what npm said, the update, the skipped versions, the notes of the
- * versions still to come (`notes`) and those of the versions installed (`installed`, see installedVersions). Each entry is
- * `{ version, text, notes? }`; `notes` maps a locale to its release notes. Both lists stay empty when the running version is a pre-release.
+ * versions still to come (`notes`). Each entry is `{ version, text, notes? }`; `notes` maps a locale to its release notes. The list stays
+ * empty when the running version is a pre-release. The running version's own notes are not here: the editor reads them from the package (src/bundledNotes.ts).
  */
 export async function cmsStatus(env, running = RUNNING) {
   const kv = env.PUSH;
@@ -224,7 +224,6 @@ export async function cmsStatus(env, running = RUNNING) {
     update: null,
     skipped: [],
     notes: [],
-    installed: [],
   };
   const plain = /^\d+\.\d+\.\d+$/;
   if (!kv) return status;
@@ -241,8 +240,6 @@ export async function cmsStatus(env, running = RUNNING) {
   );
   wanted.sort((a, b) => compareVersions(b, a));
   status.notes = entries(await Promise.all(wanted.map((v) => kv.get(`cms:notes:${v}`, 'json'))));
-  const installed = installedVersions(status.update, running, kept);
-  status.installed = entries(await Promise.all(installed.map((v) => kv.get(`cms:notes:${v}`, 'json'))));
   return status;
 }
 

package/src/ReleaseNoteCard.tsx

@@ -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

@@ -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>
-  );
-}

package/src/levelStep.d.mts

@@ -1,10 +0,0 @@
-/**
- * Watches the window's history for the level's step. `set(active, toFirst)`: whether the level is shown (a step is added
- * while it is), and what the back gesture does on it (shows the first level). `stop()` takes the step out and stops.
- * @param {Pick<Window, 'history' | 'location' | 'addEventListener' | 'removeEventListener' | 'document'>} win
- */
-export function levelStep(win: Pick<Window, "history" | "location" | "addEventListener" | "removeEventListener" | "document">): {
-    /** @param {boolean} active @param {() => void} back */
-    set(active: boolean, back: () => void): void;
-    stop(): void;
-};