@morphemecms/cms 0.14.2-next-20261107121812 → 0.14.2

package/CHANGELOG.md

@@ -1,10 +1,12 @@
 # @morphemecms/cms
 
-## 0.14.2-next-20261107121812
+## 0.14.2
 
 ### Patch Changes
 
+- fc6864a: On a phone, the editor's footer starts at the bottom of a short screen, and you can scroll it up above the add button.
 - 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.
+- 5c21889: The editor of a test version (npm tag `next`, e.g. 0.14.2-next.0) loads again: the release notes it carries no longer compare a test version, which threw and left the page blank.
 - 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

package/lib/releaseNotes.d.mts

@@ -54,6 +54,8 @@ export function notesSince(entries: {
  * 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
  * (<locale>/<version>/<id>.webp) when that file exists. Versions of another minor, newer versions and versions without notes are left out.
+ * A test version (0.14.2-next.0, the npm tag next) has not had the notes of its own version yet: the line up to the one before.
+ * It runs as the editor loads (bundledNotes.ts), so it never throws: nothing when `version` is not a version.
  * @param {Record<string, ReleasedNotes>} files path -> parsed notes file, e.g. '../release-notes/i18n/en-US/0.14.0.json'
  * @param {Record<string, string>} images path -> address, e.g. '../release-notes/i18n/en-US/0.14.0/<id>.webp'
  * @param {string} version the running version

package/lib/releaseNotes.mjs

@@ -180,18 +180,22 @@ const sameMinor = (a, b) => a.split('.').slice(0, 2).join('.') === b.split('.').
  * 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
  * (<locale>/<version>/<id>.webp) when that file exists. Versions of another minor, newer versions and versions without notes are left out.
+ * A test version (0.14.2-next.0, the npm tag next) has not had the notes of its own version yet: the line up to the one before.
+ * It runs as the editor loads (bundledNotes.ts), so it never throws: nothing when `version` is not a version.
  * @param {Record<string, ReleasedNotes>} files path -> parsed notes file, e.g. '../release-notes/i18n/en-US/0.14.0.json'
  * @param {Record<string, string>} images path -> address, e.g. '../release-notes/i18n/en-US/0.14.0/<id>.webp'
  * @param {string} version the running version
  * @returns {{ version: string, text: string, notes: Record<string, ReleaseNote[]> }[]}
  */
 export function bundledNotes(files, images, version) {
+  const [base, pre] = String(version ?? '').split('-');
+  if (!PLAIN.test(base)) return [];
   const byVersion = {};
   for (const [path, file] of Object.entries(files)) {
     const match = /\/i18n\/([^/]+)\/([^/]+)\.json$/.exec(path);
     if (!match || !Array.isArray(file?.notes)) continue;
     const [, locale, v] = match;
-    if (!PLAIN.test(v) || !sameMinor(v, version) || compareVersions(v, version) === 1) continue;
+    if (!PLAIN.test(v) || !sameMinor(v, base) || compareVersions(v, base) >= (pre === undefined ? 1 : 0)) continue;
     byVersion[v] ??= {};
     byVersion[v][locale] = file.notes.map((note) => {
       if (note?.kind !== 'card') return note;

package/lib/releaseNotes.test.mjs

@@ -224,6 +224,17 @@ test('bundledNotes ignores a newer version', () => {
     ['0.14.0'],
   );
 });
+test('bundledNotes takes a test version (npm tag next) without throwing: the line before its own version', () => {
+  const files = { ...en('0.14.0', [line('a')]), ...en('0.14.1', [line('b')]), ...en('0.14.2', [line('c')]) };
+  assert.deepEqual(
+    bundledNotes(files, {}, '0.14.2-next.0').map((e) => e.version),
+    ['0.14.1', '0.14.0'],
+  );
+  assert.deepEqual(bundledNotes(files, {}, '0.15.0-next.3'), []);
+});
+test('bundledNotes gives nothing for something that is not a version', () => {
+  assert.deepEqual(bundledNotes(en('0.14.0', [line('a')]), {}, 'latest'), []);
+});
 test('bundledNotes gives an empty list without a file for the line', () => {
   assert.deepEqual(bundledNotes(en('0.13.0', [line('a')]), {}, '0.14.0'), []);
   assert.deepEqual(bundledNotes({}, {}, '0.14.0'), []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.14.2-next-20261107121812",
+  "version": "0.14.2",
   "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/release-notes/i18n/da-DK/0.14.2.json

@@ -0,0 +1,21 @@
+{
+  "version": "0.14.2",
+  "notes": [
+    {
+      "id": "footer-scrolls-above-fab",
+      "kind": "line",
+      "text": "På en telefon kan du nu rulle editorens bundlinje fri af plusknappen, også på korte skærme."
+    },
+    {
+      "id": "lists-follow-md3",
+      "kind": "line",
+      "text": "Lister i editoren viser nu lyse rækker på en tonet side, som i Material 3."
+    },
+    {
+      "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/en-US/0.14.2.json

@@ -0,0 +1,21 @@
+{
+  "version": "0.14.2",
+  "notes": [
+    {
+      "id": "footer-scrolls-above-fab",
+      "kind": "line",
+      "text": "On a phone, you can now scroll the editor's footer clear of the add button, also on short screens."
+    },
+    {
+      "id": "lists-follow-md3",
+      "kind": "line",
+      "text": "Lists in the editor now show light rows on a tinted page, as in Material 3."
+    },
+    {
+      "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/src/Screen.tsx

@@ -12,16 +12,17 @@
 // a form with its fields beside the text (`panel`). The column (editor.css .editor-column) stands centred on the window,
 // off-centre only as far as the panels beside it require.
 // 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); under the footer is room for the floating action button
-// only while the screen has one (fabPresence.tsx) and the content pushes the footer below the window (useFooterClearance.ts).
-import { useId, useRef, type MouseEvent, type ReactNode } from 'react';
+// 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
+// be scrolled up to show it above the FAB.
+import { useId, type MouseEvent, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { ArrowLeft, Bell, CaretRight, ArrowSquareOut } from '@phosphor-icons/react';
 import { t } from './i18n';
 import { IconButton, IconLink, MenuButton, TabPanel, TabRow, TopAppBar, useMenuLayout, type TabChoice } from './ui';
 import { up } from './nav';
 import EditorFooter from './EditorFooter';
-import useFooterClearance from './useFooterClearance';
 import { FabPresenceContext, useCountFabs } from './fabPresence';
 import { useMenuOpen } from './menuOpen';
 import { unseen, useNotifications } from './notificationData';
@@ -120,9 +121,7 @@ export default function Screen<T extends string>({
     else way();
   };
   const slot = useTopBarSlot();
-  const main = useRef<HTMLElement>(null);
   const fabs = useCountFabs();
-  useFooterClearance(main, fabs.count > 0);
   // The way here, without the start screen: the logo in the bar is the way there.
   const crumbs = back && back.href !== '#' ? [back] : [];
   const bar = (
@@ -175,12 +174,12 @@ export default function Screen<T extends string>({
     </TopAppBar>
   );
   return (
-    <div className={`flex flex-col ${slot ? 'flex-1' : 'min-h-dvh'}`}>
+    <div className={`flex flex-col ${slot ? 'flex-1' : 'min-h-[calc(100dvh+var(--editor-fab-clearance,0px))]'}`}>
       {slot ? createPortal(bar, slot) : bar}
       {/* A row, so the column keeps its margins (editor.css .editor-column) and is as high as the rest of the window. */}
       <div className="flex flex-1">
         <main
-          ref={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}`}
         >
           {/* At expanded and wider: the way here, the title and the status, under the bar. */}

package/src/editor.css

@@ -419,6 +419,15 @@
   z-index: 30;
 }
 
+/* Below medium, while a screen leaves room for its FAB under the footer (Screen.tsx, data-clearance), the page is that room
+   taller than the window (the screen's padding less the bare one), 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. */
+@media (width < theme(--breakpoint-medium)) {
+  :root:has(.editor-screen[data-clearance='true']) {
+    --editor-fab-clearance: 4.5rem;
+  }
+}
+
 /* A FAB whose action runs or cannot be used now (FabAction.busy, .disabled): dimmed, and nothing to press. */
 .editor-fab :is(.extended-fab, .fab):disabled {
   opacity: 0.38;

package/src/fabPresence.tsx

@@ -1,6 +1,6 @@
 // Lets a screen know it shows a FAB: Screen (Screen.tsx) provides the context, FabMenu (ui.tsx) calls useRegisterFab while
 // it is drawn. Exposes FabPresenceContext, useCountFabs and useRegisterFab. Used to leave room under the footer for the FAB
-// only (useFooterClearance.ts).
+// only (Screen.tsx).
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 
 /** Called with +1 when a FAB appears on the screen and -1 when it goes. Absent outside a Screen. */

package/src/topBarSlot.tsx

@@ -19,8 +19,9 @@ export function TopBarLayout({ above, aside, children }: { above?: ReactNode; as
       {above}
       <div className="flex">
         {aside}
-        {/* At least as high as the window, so a short screen's footer is at its bottom (Screen.tsx). */}
-        <div className="flex min-h-dvh min-w-0 flex-1 flex-col">
+        {/* At least as high as the window, so a short screen's footer is at its bottom (Screen.tsx), and the room for a FAB
+            under the footer higher (--editor-fab-clearance, editor.css). */}
+        <div className="flex min-h-[calc(100dvh+var(--editor-fab-clearance,0px))] min-w-0 flex-1 flex-col">
           <div ref={setSlot} className="editor-top-bar-slot" />
           <Slot.Provider value={slot}>{slot && children}</Slot.Provider>
         </div>

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.1",
+    "@morphemecms/cms": "0.14.2",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",

package/lib/footerClearance.d.mts

@@ -1 +0,0 @@
-export function needsClearance(pageHeight: number, windowHeight: number, hasFab: boolean): boolean;

package/lib/footerClearance.mjs

@@ -1,9 +0,0 @@
-// Whether a screen needs clearance under its footer for the floating action button: only when it has one and its content
-// pushes the footer below the window, so a short screen has its footer at the very bottom. Exposes needsClearance. No imports.
-
-/**
- * @param {number} pageHeight The page's height with no clearance added.
- * @param {number} windowHeight The window's height.
- * @param {boolean} hasFab Whether the screen shows a FAB.
- */
-export const needsClearance = (pageHeight, windowHeight, hasFab) => hasFab && pageHeight > windowHeight;

package/lib/footerClearance.test.mjs

@@ -1,24 +0,0 @@
-// Tests for lib/footerClearance.mjs: clearance under the footer only for a FAB, and only when the page is taller than the window.
-import test from 'node:test';
-import assert from 'node:assert/strict';
-import { needsClearance } from './footerClearance.mjs';
-
-test('a page that fits the window needs no clearance', () => {
-  assert.equal(needsClearance(600, 800, true), false);
-});
-
-test('a page exactly as tall as the window needs none', () => {
-  assert.equal(needsClearance(800, 800, true), false);
-});
-
-test('a tall page with a FAB needs clearance', () => {
-  assert.equal(needsClearance(801, 800, true), true);
-});
-
-test('a tall page without a FAB needs none', () => {
-  assert.equal(needsClearance(2000, 800, false), false);
-});
-
-test('a short page without a FAB needs none', () => {
-  assert.equal(needsClearance(600, 800, false), false);
-});

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

@@ -1,5 +0,0 @@
-{
-  "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

@@ -1,6 +0,0 @@
-{
-  "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/en-US/pending/lists-follow-md3.json

@@ -1,5 +0,0 @@
-{
-  "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

@@ -1,6 +0,0 @@
-{
-  "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/src/useFooterClearance.ts

@@ -1,30 +0,0 @@
-// Gives a screen's <main> data-clearance="true" while its content pushes the footer below the window (so the floating action
-// button, if the screen has one, has room under it) and "false" while the footer sits at the bottom of the window. Exposes useFooterClearance. It
-// measures the page with the clearance off, so the answer cannot flip back and forth; the decision is needsClearance in
-// lib/footerClearance.mjs. The attribute is set on the element, with no re-render.
-import { useLayoutEffect, type RefObject } from 'react';
-import { needsClearance } from '../lib/footerClearance.mjs';
-
-export default function useFooterClearance(ref: RefObject<HTMLElement | null>, hasFab: boolean) {
-  useLayoutEffect(() => {
-    const main = ref.current;
-    if (!main) return;
-    // The page's layout height (offsetHeight), not scrollHeight: that counts a screen's entrance animation, which moves it a few px.
-    const measure = () => {
-      main.dataset.clearance = 'false';
-      const root = document.documentElement;
-      main.dataset.clearance = String(needsClearance(document.body.offsetHeight, root.clientHeight, hasFab));
-    };
-    measure();
-    const observer = new ResizeObserver(measure);
-    // Watch the parts inside <main> and what lies beside it and its ancestors (the top bar), not <main> itself: their
-    // size does not depend on the clearance, so a change in them is a real change of the page.
-    for (let el: Element | null = main; el && el !== document.documentElement; el = el.parentElement)
-      for (const part of el === main ? el.children : (el.parentElement?.children ?? [])) observer.observe(part);
-    window.addEventListener('resize', measure);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener('resize', measure);
-    };
-  }, [ref, hasFab]);
-}