@morphemecms/cms 0.13.0 → 0.14.0-next-20261107093528

package/src/ReleaseNotes.tsx

@@ -0,0 +1,52 @@
+// 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';
+import { locale, t } from './i18n';
+import { notesFor } from '../lib/releaseNotes.mjs';
+import type { ReleaseNote } from '../lib/releaseNotes.mjs';
+
+export type VersionNotes = { version: string; text: string; notes?: Record<string, ReleaseNote[]> };
+
+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 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>
+      {cards.map((note) => (
+        <ReleaseNoteCard key={note.id} note={note} />
+      ))}
+      {lines.length > 0 && (
+        <Group title={t.cms.alsoInThisVersion}>
+          {lines.map((note) => (
+            <ListItem key={note.id} headline={note.text} />
+          ))}
+        </Group>
+      )}
+    </div>
+  );
+}
+
+export function ReleaseNotes({ title, entries }: { title: string; entries: VersionNotes[] }) {
+  return (
+    <section className="mb-8">
+      <GroupTitle>{title}</GroupTitle>
+      {entries.map((entry) => (
+        <VersionEntry key={entry.version} entry={entry} />
+      ))}
+    </section>
+  );
+}

package/src/Screen.tsx

@@ -12,14 +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).
-import { useId, type MouseEvent, type ReactNode } from 'react';
+// 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';
 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';
 import { openNotifications, useNotificationsOpen } from './notificationsOpen';
@@ -117,6 +120,9 @@ 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 = (
@@ -174,7 +180,8 @@ export default function Screen<T extends string>({
       {/* 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
-          className={`editor-screen flex min-w-0 flex-1 flex-col px-4 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] medium:px-6 medium:pt-8 ${width}`}
+          ref={main}
+          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. */}
           <div className="mb-6 hidden min-w-0 items-center gap-x-2 expanded:flex">
@@ -196,15 +203,17 @@ export default function Screen<T extends string>({
             {pageActions && <div className="-my-3 ml-auto flex shrink-0 items-center gap-1">{pageActions}</div>}
           </div>
           {/* The content flows as blocks; the footer goes to the bottom of a short screen. */}
-          <div className="min-w-0">
-            {tabs ? (
-              <TabPanel id={id} value={tabs.value}>
-                {children}
-              </TabPanel>
-            ) : (
-              children
-            )}
-          </div>
+          <FabPresenceContext.Provider value={fabs.report}>
+            <div className="min-w-0">
+              {tabs ? (
+                <TabPanel id={id} value={tabs.value}>
+                  {children}
+                </TabPanel>
+              ) : (
+                children
+              )}
+            </div>
+          </FabPresenceContext.Provider>
           <EditorFooter />
         </main>
       </div>

package/src/SearchPreview.tsx

@@ -1,8 +1,8 @@
 // How a page looks as a Google result, on a phone or a computer (tabs): the site's name and address, the title and the description.
-// Exposes SearchPreview. Depends on googleResult.mjs (the address line), TabRow and TabPanel in ui.tsx, shortDate (when.ts) and i18n.
+// Exposes SearchPreview. Depends on googleResult.mjs (the address line, the bold keyword), TabRow and TabPanel in ui.tsx, shortDate (when.ts) and i18n.
 import { useId, useState } from 'react';
-import { DeviceMobile, Desktop } from '@phosphor-icons/react';
-import { searchCrumbs } from './googleResult.mjs';
+import { DeviceMobile, Desktop, DotsThreeVertical } from '@phosphor-icons/react';
+import { boldParts, searchCrumbs } from './googleResult.mjs';
 import { TabPanel, TabRow } from './ui';
 import { shortDate } from './when';
 import { t } from './i18n';
@@ -10,10 +10,12 @@ import { t } from './i18n';
 type Device = 'mobile' | 'desktop';
 
 /** How a page looks in Google's results, drawn as Google draws one, in Google's own colours (--google-* in editor.css,
- * light and dark with the editor): a circle with the site's first letter, the site's name over the address line, the title
- * in blue and the description, with a post's `date` before it. Tabs switch between a phone (opens first: the title cut off
- * after two lines, the description after three, on a card at most 360 px wide) and a computer (one line of title, two of
- * description, at most 600 px wide, Google's results column). `path`: the page's address on the site. */
+ * light and dark with the editor): a ringed circle with the site's first letter, the site's name over the address line
+ * (https:// first) and a menu icon, the title in blue and the description, with a post's `date` before it and the
+ * `keyword` in bold in the description. Tabs switch between a phone (opens first: the title cut off after two lines, the
+ * description after three, at most 360 px wide between two 8 px bands, the menu icon at the right edge) and a computer
+ * (one line of title, two of description, at most 600 px wide, Google's results column, the menu icon after the
+ * address). `path`: the page's address on the site. `keyword`: the page's primary keyword, if it has one. */
 export function SearchPreview({
   domain,
   path,
@@ -21,6 +23,7 @@ export function SearchPreview({
   title,
   description,
   date,
+  keyword,
 }: {
   domain: string;
   path: string;
@@ -28,10 +31,12 @@ export function SearchPreview({
   title: string;
   description: string;
   date?: string;
+  keyword?: string;
 }) {
   const id = useId();
   const [device, setDevice] = useState<Device>('mobile');
   const phone = device === 'mobile';
+  const menu = <DotsThreeVertical aria-hidden="true" className="shrink-0 text-(--google-text)" />;
   return (
     <div className="space-y-3">
       <TabRow
@@ -47,26 +52,44 @@ export function SearchPreview({
       <TabPanel id={id} value={device}>
         <figure
           aria-label={t.forms.searchPreview.result}
-          className={`space-y-1 border border-line bg-(--google-background) p-4 font-[arial,sans-serif] ${
-            phone ? 'max-w-[360px] rounded-3xl' : 'max-w-[600px] rounded-lg'
+          className={`bg-(--google-background) p-4 font-[arial,sans-serif] ${
+            phone ? 'max-w-[360px] border-y-8 border-(--google-separator)' : 'max-w-[600px]'
           }`}
         >
           <div className="flex items-center gap-3">
             <span
               aria-hidden="true"
-              className="flex size-[26px] shrink-0 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--google-text)_15%,transparent)] text-xs text-(--google-site)"
+              className="flex size-[28px] shrink-0 items-center justify-center rounded-full border border-(--google-icon-ring) bg-(--google-icon-fill) text-xs text-(--google-icon-letter)"
             >
               {[...siteName][0]?.toLocaleUpperCase()}
             </span>
             <span className="min-w-0">
               <span className="block truncate text-sm text-(--google-site)">{siteName}</span>
-              <span className="block truncate text-xs text-(--google-text)">{searchCrumbs(domain, path)}</span>
+              <span className="flex items-center gap-1">
+                <span className="truncate text-xs text-(--google-text)">{searchCrumbs(domain, path)}</span>
+                {!phone && menu}
+              </span>
             </span>
+            {phone && <span className="ml-auto">{menu}</span>}
           </div>
-          <span className={`block text-(--google-title) ${phone ? 'line-clamp-2 text-lg' : 'truncate text-xl'}`}>{title}</span>
-          <p className={`text-sm leading-[22px] text-(--google-text) ${phone ? 'line-clamp-3' : 'line-clamp-2'}`}>
+          <span
+            className={`block text-[20px] leading-[26px] ${
+              phone ? 'mt-3 line-clamp-2 text-(--google-title-phone)' : 'mt-1.5 truncate text-(--google-title)'
+            }`}
+          >
+            {title}
+          </span>
+          <p className={`mt-1 text-sm leading-[22px] text-(--google-text) ${phone ? 'line-clamp-3' : 'line-clamp-2'}`}>
             {date && <span className="text-(--google-date)">{shortDate(date)} — </span>}
-            {description}
+            {boldParts(description, keyword).map((part, i) =>
+              part.bold ? (
+                <b key={i} className="font-bold">
+                  {part.text}
+                </b>
+              ) : (
+                part.text
+              ),
+            )}
           </p>
         </figure>
       </TabPanel>

package/src/SelectionParts.tsx

@@ -1,4 +1,4 @@
-// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Kontakter, valg og sideark": the theme's switches, setting rows, radio buttons,
+// "Parts" › "UI-komponenter" (BlockParts.tsx), the group "Kontakter, valg og sideark": the theme's switches, setting rows, radio buttons,
 // sliders, dividers and side sheets (packages/editor/theme/ui/, through @site/editor) as the site draws them, in every
 // kind and state (the sliders also centered, in each size, with an icon and vertical), with made-up texts. The
 // switches, radio buttons and sliders can be tried (a slider's tracks and labels follow it here as on the site);

package/src/ServiceStatus.tsx

@@ -0,0 +1,59 @@
+// "System status" (#status), opened from the editor's footer: the services a site needs (GitHub, Cloudflare), a group
+// each with its components and their status, and a link to the provider's own status page (/api/status, statusReport.ts).
+// Exposes STATUS_ROUTE and the screen. Uses Screen, Group, ListItem and EmptyNote from ui.tsx and the theme's Badge.
+import { useEffect, useState } from 'react';
+import { ArrowSquareOut } from '@phosphor-icons/react';
+import Screen from './Screen';
+import { EmptyNote, Group, ListItem } from './ui';
+import { SiteBadge } from './themeUi';
+import { backFrom } from './site';
+import { t } from './i18n';
+import { serviceStatus } from './statusReport';
+import type { StatusReport } from '../lib/serviceStatus.mjs';
+
+export const STATUS_ROUTE = 'status';
+
+export default function ServiceStatus() {
+  // undefined while it loads, null when it can't be fetched.
+  const [report, setReport] = useState<StatusReport | null>();
+  useEffect(() => {
+    let on = true;
+    serviceStatus({ fresh: true }).then((x) => on && setReport(x));
+    return () => {
+      on = false;
+    };
+  }, []);
+
+  return (
+    <Screen title={t.footer.status} wide back={backFrom(STATUS_ROUTE)}>
+      {report === undefined ? (
+        <EmptyNote busy>{t.footer.loading}</EmptyNote>
+      ) : report === null ? (
+        <EmptyNote>{t.footer.state.unknown}</EmptyNote>
+      ) : (
+        report.providers.map((provider) => (
+          <Group key={provider.id} title={provider.name}>
+            {provider.components.map((component) => {
+              const status = t.footer.component[component.status];
+              return (
+                <ListItem
+                  key={component.id}
+                  headline={component.name}
+                  supporting={status}
+                  trailing={<SiteBadge tone={component.state} label={status} />}
+                />
+              );
+            })}
+            <ListItem
+              headline={t.footer.openStatusPage}
+              href={provider.page}
+              target="_blank"
+              rel="noopener noreferrer"
+              arrow={ArrowSquareOut}
+            />
+          </Group>
+        ))
+      )}
+    </Screen>
+  );
+}

package/src/SideColumn.tsx

@@ -10,7 +10,7 @@ import { ChoiceRow, EmptyNote, Group } from './ui';
 import type { Env } from './App';
 import { kindAndName } from './deploy';
 import { ask } from './ask';
-import { installedApps } from './apps';
+import { activeApps } from './apps';
 import { siteBlocks } from './registry';
 import { locale, siteT, t } from './i18n';
 import { sideChoices } from '../lib/side-block.mjs';
@@ -38,7 +38,7 @@ export function sideSettingOf(files: { path: string; text: string }[]): string |
 
 /** The installed blocks that can be drawn beside a page's text, with their names in the editor's language. */
 export const sideChoicesOf = (files: { path: string; text: string }[]) =>
-  sideChoices(siteBlocks, sources, installedApps(files)) as { type: string; label: string }[];
+  sideChoices(siteBlocks, sources, activeApps(files)) as { type: string; label: string }[];
 
 /** "Sidekolonne": "Ingen" and each block that can be drawn beside the text, the one chosen ticked. A tap on another asks
  * first and then saves it (`{ "block": "<type>" }`, or `{ "block": null }`) at once, in its own commit, as an icon pack is. */

package/src/StoreConnectNotice.tsx

@@ -1,4 +1,4 @@
-// The box in "Appstore" for a site without a key to the store: the button "Connect to Morpheme", or a note for editors who may only read.
+// The box on the Morpheme page (#morpheme) and above the store lists for a site without a key to the store: the button "Connect to Morpheme", or a note for editors who may only read.
 // Exposes StoreConnectNotice({ mayChange, onConnected }); uses Notice, Button, EmptyNote (ui.tsx), snackbar (lib/snackbar.ts) and connect (storeConnection.ts).
 import { useState } from 'react';
 import { snackbar } from '../lib/snackbar';

package/src/StoreConnectedRow.tsx

@@ -1,10 +1,11 @@
-// The row at the bottom of "Appstore" that says the site is connected to Morpheme, with the button "Disconnect from Morpheme" (asks first).
-// Exposes StoreConnectedRow({ site, onDisconnected }); uses Group, ListItem, Button (ui.tsx), ask (ask.tsx), snackbar (lib/snackbar.ts) and disconnect (storeConnection.ts).
+// The row on the Morpheme page (#morpheme) that says the site is connected to Morpheme, with the Morpheme logo, and under it the button "Disconnect from Morpheme" (asks first).
+// Exposes StoreConnectedRow({ site, onDisconnected }); uses ListItem, LeadingIcon, Button, plainListClass (ui.tsx), MorphemeLogo, ask (ask.tsx), snackbar (lib/snackbar.ts) and disconnect (storeConnection.ts).
 import { useState } from 'react';
 import { snackbar } from '../lib/snackbar';
 import { ask } from './ask';
 import { disconnect } from './storeConnection';
-import { Button, Group, ListItem } from './ui';
+import { Button, LeadingIcon, ListItem, plainListClass } from './ui';
+import { MorphemeLogo } from './MorphemeLogo';
 import { t } from './i18n';
 
 export function StoreConnectedRow({ site, onDisconnected }: { site: string; onDisconnected: () => void }) {
@@ -21,16 +22,21 @@ export function StoreConnectedRow({ site, onDisconnected }: { site: string; onDi
     }
   }
   return (
-    <Group>
-      <ListItem
-        headline={t.apps.connected}
-        supporting={site}
-        actions={
-          <Button disabled={busy} onClick={disconnectNow}>
-            {t.apps.disconnect}
-          </Button>
-        }
-      />
-    </Group>
+    <>
+      <ul className={plainListClass}>
+        <ListItem
+          leading={
+            <LeadingIcon>
+              <MorphemeLogo />
+            </LeadingIcon>
+          }
+          headline={t.apps.connected}
+          supporting={site}
+        />
+      </ul>
+      <Button kind="text" size="small" disabled={busy} onClick={disconnectNow}>
+        {t.apps.disconnect}
+      </Button>
+    </>
   );
 }

package/src/StoreStatus.tsx

@@ -1,10 +1,9 @@
-// What a store screen (apps or themes) shows around its list: StoreRound (draws it again after connecting), StoreNotice (connect, loading or failed note) and StoreFooter (the connected row).
-// Exposes StoreRound, useStoreKey, useStoreConnected, StoreNotice, StoreFooter; uses StoreConnectNotice, StoreConnectedRow, storeConnection.ts and env.store.connected.
+// What a store screen (apps or themes) shows around its list: StoreRound (draws it again after connecting), StoreNotice (connect, loading or failed note).
+// Exposes StoreRound, useStoreKey, useStoreConnected, StoreNotice; uses StoreConnectNotice, storeConnection.ts and env.store.connected.
 import { Fragment, useEffect, useState, type ReactNode } from 'react';
 import { EmptyNote } from './ui';
 import type { Env } from './App';
 import { StoreConnectNotice } from './StoreConnectNotice';
-import { StoreConnectedRow } from './StoreConnectedRow';
 import { connection, type StoreConnection } from './storeConnection';
 import { t } from './i18n';
 
@@ -58,10 +57,3 @@ export function StoreNotice({
   if (read === 'failed') return <EmptyNote>{t.apps.storeFailed}</EmptyNote>;
   return null;
 }
-
-/** The row at the end of a store list that says the site is connected, with its button to disconnect. */
-export function StoreFooter({ keyInfo, again }: { keyInfo: StoreConnection | null; again: () => void }) {
-  return keyInfo?.connected && keyInfo.by === 'button' && keyInfo.mayChange ? (
-    <StoreConnectedRow site={keyInfo.site} onDisconnected={again} />
-  ) : null;
-}

package/src/ThemeStoreScreen.tsx

@@ -3,7 +3,7 @@
 import Screen from './Screen';
 import { Group, useKept } from './ui';
 import type { Env } from './App';
-import { StoreFooter, StoreNotice, StoreRound, useStoreConnected, useStoreKey } from './StoreStatus';
+import { StoreNotice, StoreRound, useStoreConnected, useStoreKey } from './StoreStatus';
 import { StoreSearchRow, useStateFilter } from './StoreSearchRow';
 import { useSort } from './storeSort';
 import { byText } from './schema';
@@ -56,7 +56,6 @@ function ThemeStoreList({ env, again }: { env: Env; again: () => void }) {
           </Group>
         ))
       )}
-      <StoreFooter keyInfo={key} again={again} />
     </Screen>
   );
 }

package/src/Tokens.tsx

@@ -1,4 +1,4 @@
-// "Dele" › "Værdier" (#appearance/parts/values): the theme's design tokens, as the theme in use sets them, to see them in one
+// "Parts" › "Værdier" (#developer/parts/values): the theme's design tokens, as the theme in use sets them, to see them in one
 // place: the corners, one row for each size the theme uses (the theme's base, base.css and components.css, which every
 // theme has, and its UI parts', ui.css: each part's own variable, else the one ui.css gives it instead), named by
 // Material 3's corner radius scale where the size is one of its steps, with what has it under; the shadows, one row for
@@ -15,7 +15,7 @@ import { Group, LeadingToken, ListItem, type TokenKind } from './ui';
 import { locale, t } from './i18n';
 
 const say = t.parts.tokens;
-const back = { href: '#appearance/parts', label: t.common.parts.editorParts };
+const back = { href: '#developer/parts', label: t.common.parts.editorParts };
 
 /** A token: its CSS variable, its name here, and for a part's own the token or the value ui.css gives it when the theme
  * does not set it (its `var(--chip-radius, var(--block-control-radius))`). */

package/src/apps.ts

@@ -32,7 +32,7 @@
 //   worker.js, build.mjs  its part of the site's Worker (/api/<app>/…, each hour) and a step after the site is built
 //                 (packages/editor/lib/apps.mjs);
 //   csp.json      what it loads from elsewhere on the site (packages/editor/lib/csp.mjs).
-// An app that is not installed is not offered in the editor: its blocks are not under "Indsæt" nor
+// An app that is not installed, or turned off ("off" in the file of apps), is not offered in the editor: its blocks are not under "Indsæt" nor
 // "Blokindstillinger", its kinds not under "+", its lists not under "Lister", its settings not on its page. What was made with it stays,
 // on the pages and on the site, and can still be edited. Installed, its blocks are under its name in "Blokindstillinger". The
 // apps installed are in the site's file of apps (config.apps.installed), each app's settings in a file of
@@ -46,13 +46,14 @@ import type { ConsentCategory } from '../lib/cookieCategories.mjs';
 import type { AppCategory, AppCookie, AppNeeds, AppShot, StoreRecord } from './store';
 import type { ThirdParty } from './licenseData';
 import { config } from '@site/config';
+import { activeOf, readAppsFile } from '../lib/appsFile.mjs';
 
 /** An app's settings, on its page once it is installed (#apps/<app>, AppList.tsx). */
 export type AppSettings = {
   fields: Field[];
   /** The settings before any are saved, in the site's language. */
   values: Record<string, unknown>;
-  /** Made-up settings over `values`, which its blocks and kinds are drawn with under "Dele" (exampleData in
+  /** Made-up settings over `values`, which its blocks and kinds are drawn with under "Parts" (exampleData in
    * examples.ts), where the site's own are never shown (MobilePay's number). */
   example?: Record<string, unknown>;
   /** The value a save of these settings sets, said in the notice after it ("CMS-version set to 0.10.0"), asked with the
@@ -82,7 +83,7 @@ export type AppKind = {
   opens?: Opens;
 };
 
-/** How an entry of an app's kind looks on the site, beside its form and under "Dele": its own drawing, or its part in the
+/** How an entry of an app's kind looks on the site, beside its form and under "Parts": its own drawing, or its part in the
  * list's own drawing (`collection`: the list it is a kind of). */
 export function kindDraw(kind: AppKind, collection?: { drawPart?: FolderCollection['drawPart'] }): AppKind['draw'] {
   if (kind.draw) return kind.draw;
@@ -147,8 +148,9 @@ export type AppDefinition = {
   kinds?: Record<string, AppKind>;
   /** The lists it brings ("Priser"), under "Lister" while it is installed. */
   lists?: AppList[];
-  /** In the app store (store.ts): its version, X.Y.Z ("1.2.1"): X for a major release, Y for new features, Z for fixes
-   * or fitting a theme, the numbers after the one raised back to 0; without it, it is the site's own. X is raised only
+  /** Its version, shown on its page: in the app store (store.ts) the one released, and a site-local app can set one too.
+   * X.Y.Z ("1.2.1"): X for a major release, Y for new features, Z for fixes
+   * or fitting a theme, the numbers after the one raised back to 0; without one, the page shows none. X is raised only
    * when the app itself changes something a site that has it can break on (a block, field or setting gone or changed),
    * never for a new contract on its own: which editor it runs in is its `api` (APP_API), and fitting it to a new one is
    * Z (Y with new features), since a major release is not updated to on its own. */
@@ -257,15 +259,15 @@ export { appIdOf } from '../lib/appId.mjs';
 /** The file of an app's settings (config.apps.settings/<id>.json). */
 export const settingsFile = (id: string) => `${config.apps.settings}/${id}.json`;
 
-/** The apps installed, by their ids, from the site's file of apps. */
-export function installedApps(files: { path: string; text: string }[]): string[] {
-  try {
-    const installed = JSON.parse(files.find((f) => f.path === config.apps.installed)?.text ?? '{}').installed;
-    return Array.isArray(installed) ? installed.map(String) : [];
-  } catch {
-    return [];
-  }
-}
+/** The site's file of apps as the files have it now: the apps installed and those turned off. */
+export const appsState = (files: { path: string; text: string }[]) =>
+  readAppsFile(files.find((f) => f.path === config.apps.installed)?.text);
+
+/** The apps installed, by their ids, from the site's file of apps, also those turned off. */
+export const installedApps = (files: { path: string; text: string }[]): string[] => appsState(files).installed;
+
+/** The apps installed and not turned off, by their ids: those that run, offer their blocks and show their screens. */
+export const activeApps = (files: { path: string; text: string }[]): string[] => activeOf(appsState(files));
 
 /** Each app's settings as the files have them now, by its id, over those it starts with (`values`). */
 export function appSettings(

package/src/buildSettings.ts

@@ -1,4 +1,4 @@
-// The build settings the editor writes under "Indstillinger" › "Avanceret" (Advanced.tsx): src/data/build.json, read by
+// The build settings the editor writes under Settings › Developer › Caching and builds (Advanced.tsx): src/data/build.json, read by
 // the build (fast content lane) and by the editor's wait for a build. Exposes buildSettingsOf and withBuildSetting; the
 // defaults come from packages/editor/lib/build-settings.mjs.
 import { readBuildSettings } from '../lib/build-settings.mjs';

package/src/cmsView.d.mts

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

package/src/cmsView.test.mjs

@@ -150,3 +150,9 @@ 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

@@ -21,13 +21,20 @@
   --editor-status-bad-text: #cc0000;
   --editor-status-bad-surface: color-mix(in srgb, #ff4e42 10%, var(--surface));
 
-  /* A Google result (SearchPreview.tsx) in Google's own colours, light: its background, the title, the site's name, the
-     address and the text, and the date before the text. */
+  /* A Google result (SearchPreview.tsx) in Google's own colours, light: its background, the title (on a computer, and on a
+     phone), the site's name, the address and the text, the date before the text, and the 8 px band above and below a
+     phone's result. */
   --google-background: #fff;
   --google-title: #1a0dab;
+  --google-title-phone: #1558d6;
   --google-site: #202124;
   --google-text: #4d5156;
   --google-date: #70757a;
+  --google-separator: #ecedef;
+  /* The site's circle: its fill and ring and the letter in it, the same in light and dark. */
+  --google-icon-fill: #fff;
+  --google-icon-ring: #dadce0;
+  --google-icon-letter: #202124;
 
   /* The dotted frame round an H2 section of a page or blog post (sectionFrame.ts): its line, the space between the line and
      the text, the space above a section, and the space between two parts inside it (em: it scales with the part's text). */
@@ -52,9 +59,11 @@
   :where(:root:not([data-theme='light'])) {
     --google-background: #1f1f1f;
     --google-title: #99c3ff;
+    --google-title-phone: #99c3ff;
     --google-site: #dadce0;
     --google-text: #bfbfbf;
     --google-date: #9aa0a6;
+    --google-separator: #303134;
     --editor-status-good-text: var(--editor-status-good);
     --editor-status-average-text: var(--editor-status-average);
     --editor-status-bad-text: var(--editor-status-bad);
@@ -63,9 +72,11 @@
 :where(:root[data-theme='dark']) {
   --google-background: #1f1f1f;
   --google-title: #99c3ff;
+  --google-title-phone: #99c3ff;
   --google-site: #dadce0;
   --google-text: #bfbfbf;
   --google-date: #9aa0a6;
+  --google-separator: #303134;
   --editor-status-good-text: var(--editor-status-good);
   --editor-status-average-text: var(--editor-status-average);
   --editor-status-bad-text: var(--editor-status-bad);

package/src/examples.ts

@@ -1,4 +1,4 @@
-// What "Dele" (#appearance/parts: Parts.tsx, BlockParts.tsx) shows the parts and blocks with: made-up pages, posts, tags,
+// What "Parts" (#developer/parts: Parts.tsx, BlockParts.tsx) shows the parts and blocks with: made-up pages, posts, tags,
 // testimonials, the lists' made-up rows (`examples` of a list), cookies and contact details in the editor's language,
 // the apps' made-up settings (AppSettings.example), and a plain picture, never what the site has, so the parts look the
 // same on every site.
@@ -76,7 +76,7 @@ export function exampleData(): BlockData {
 }
 
 /** An entry of a kind of a list of kinds (a pop-up, Mailchimp's) as an example: a new one of the kind, with the
- * defaults of the fields it has, the made-up name, heading and text, and the plain picture. "Dele" draws each kind
+ * defaults of the fields it has, the made-up name, heading and text, and the plain picture. "Parts" draws each kind
  * with it, and "Blokindstillinger" an app's kind no entry is made with. */
 export function kindExample(list: FolderCollection, kind: string): Record<string, unknown> {
   const name = list.kinds!;

package/src/fabPresence.tsx

@@ -0,0 +1,24 @@
+// 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).
+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. */
+export const FabPresenceContext = createContext<((change: 1 | -1) => void) | null>(null);
+
+/** For a Screen: how many FABs its content shows, and the value for FabPresenceContext. */
+export function useCountFabs() {
+  const [count, setCount] = useState(0);
+  const report = useCallback((change: 1 | -1) => setCount((n) => n + change), []);
+  return { count, report };
+}
+
+/** For a FAB: tells its Screen it is there while `active`. */
+export function useRegisterFab(active: boolean) {
+  const report = useContext(FabPresenceContext);
+  useEffect(() => {
+    if (!active || !report) return;
+    report(1);
+    return () => report(-1);
+  }, [active, report]);
+}