@morphemecms/cms 0.11.0 → 0.12.0

package/src/Redirects.tsx

@@ -2,7 +2,7 @@
 // each has, each opening a screen of its own.
 // "Alle videresendelser" (#seo/videresendelser/alle): every address of a page the site sends on elsewhere
 // (redirectData.ts), by address, with where it sends to, and search. Tapping one opens a sheet where
-// where it sends to can be changed, or the redirect deleted; "+" adds a new one (in the editor's own,
+// where it sends to can be changed, or the redirect deleted; the FAB adds a new one (in the editor's own,
 // src/data/redirects.json). Each save is one commit, and none sends on through another afterwards
 // (flatten): a redirect to an address that is sent on goes straight to where that ends, and those
 // that went on through a deleted one go on to where it sent them.
@@ -13,16 +13,16 @@
 // letter) and, over the redirects, the funnel that shows only those to one page or post, picked as a
 // chip. The Save and Delete buttons show the loading indicator while their save runs (Forget does not).
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowRight, ArrowsDownUp, Funnel, LinkBreak, Plus, Signpost, Trash, X } from '@phosphor-icons/react';
+import { ArrowRight, ArrowsDownUp, Funnel, LinkBreak, Signpost, Trash, X } from '@phosphor-icons/react';
 import { addressOf, escape, REDIRECTS } from './addresses';
 import { ask } from './ask';
+import { CreateFab } from './CreateFab';
 import Screen from './Screen';
 import {
   Button,
   InputChip,
   Choice,
   Group,
-  IconButton,
   listClass,
   SupportingText,
   SearchRow,
@@ -279,17 +279,6 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
             ? t.redirects.count(entries.length)
             : undefined
       }
-      actions={
-        tab === 'redirects' && (
-          <IconButton
-            icon={Plus}
-            label={t.redirects.new}
-
-            disabled={!files}
-            onClick={() => open({ from: '', to: '', isNew: true })}
-          />
-        )
-      }
     >
       <p className="mb-4 text-muted">{tab === 'redirects' ? t.redirects.intro : t.redirects.missing.intro}</p>
       <SearchRow
@@ -449,6 +438,9 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
           </SheetBody>
         )}
       </BottomSheet>
+      {tab === 'redirects' && (
+        <CreateFab label={t.redirects.new} disabled={!files} onClick={() => open({ from: '', to: '', isNew: true })} />
+      )}
     </Screen>
   );
 }

package/src/Screen.tsx

@@ -2,9 +2,10 @@
 // topBarSlot.tsx's place, at the top of the content), above the content. Below medium, where there is no rail, the panel
 // button at its start opens and closes the main drawer (MainMenu.tsx, menuOpen.ts; from medium it is the rail's; not on a screen with a back arrow); at expanded and wider the logo and the site's name after it (one link to the start screen,
 // through `back.guard`), below expanded the back arrow, the title and the status as in an app (the logo only on the start
-// screen); at the end the actions and the notifications, on every screen, and on the start screen (`home`) the link to the
+// screen); at the end the page actions (below expanded), the actions and the notifications, on every screen, and on the start screen (`home`) the link to the
 // website. At expanded and wider the way here as breadcrumbs (the screen above, when that is not the start
-// screen), the title and the status stand in a row under the bar, at the top of the content. The bar stays at the top while
+// screen), the title and the status stand in a row under the bar, at the top of the content, and the page actions
+// (`pageActions`) at the end of that row. The bar stays at the top while
 // scrolling and keeps clear of a phone's notch. A screen's tabs (`tabs`) are the bottom of the bar, under the title, as wide
 // as the content, and stay with it. The back arrow goes to the screen above, back in the history when that is the screen
 // before (nav.ts up). The content is as wide as a form reads well, or wider for lists and the grid of files (`wide`) and for
@@ -38,6 +39,9 @@ type Props<T extends string> = {
   back?: Back;
   status?: ReactNode;
   actions?: ReactNode;
+  /** The screen's own actions (a form's Preview and View on site): from expanded at the end of the row under the bar,
+   * below expanded in the top bar, before `actions`. */
+  pageActions?: ReactNode;
   drawer?: ReactNode;
   tabs?: TabChoice<T>;
   home?: boolean;
@@ -74,6 +78,7 @@ export default function Screen<T extends string>({
   back,
   status,
   actions,
+  pageActions,
   drawer,
   tabs,
   home = false,
@@ -135,7 +140,10 @@ export default function Screen<T extends string>({
           )}
         </div>
         <div className="hidden min-w-0 flex-1 expanded:block" />
-        <div className="flex shrink-0 items-center justify-end gap-1">{actions}</div>
+        <div className="flex shrink-0 items-center justify-end gap-1">
+          {pageActions && <div className="flex items-center gap-1 expanded:hidden">{pageActions}</div>}
+          {actions}
+        </div>
         <NotificationsLink />
         {home && <WebsiteLink />}
         {drawer}
@@ -169,6 +177,8 @@ export default function Screen<T extends string>({
           )}
           <h1 className="truncate font-medium">{title}</h1>
           {status && <p className="shrink-0 text-sm text-muted">{status}</p>}
+          {/* The icons are taller than the text: the negative margin keeps the row's height. */}
+          {pageActions && <div className="-my-3 ml-auto flex shrink-0 items-center gap-1">{pageActions}</div>}
         </div>
         {tabs ? (
           <TabPanel id={id} value={tabs.value}>

package/src/StartFab.tsx

@@ -1,17 +1,15 @@
 // The start screen's FAB menu (Start in Library.tsx): a new page and a new blog post, each opening its empty form
-// (#ny/<list>), as the + on its list does. Exposes newOnStart (the actions) and StartFab. Uses FabMenu (ui.tsx) and the
-// collections and icons of site.ts.
+// (#ny/<list>), as the FAB on its list does. Exposes newOnStart (the actions) and StartFab. Uses FabMenu (ui.tsx),
+// START_FAB (fabScreens.ts) and the collections and icons of site.ts.
 import { Plus } from '@phosphor-icons/react';
 import { t } from './i18n';
+import { START_FAB } from './fabScreens';
 import { collections, icons } from './site';
 import { FabMenu, type FabAction } from './ui';
 
-/** The lists a new entry can be made in from the start screen, in this order. */
-const ON_START = ['pages', 'blog'];
-
-/** The start screen's actions: the lists of ON_START the site has and can make a new entry in (`create`). */
+/** The start screen's actions: the lists of START_FAB the site has and can make a new entry in (`create`). */
 export function newOnStart(): FabAction[] {
-  return ON_START.flatMap((id) => {
+  return START_FAB.flatMap((id) => {
     const c = collections.find((x) => x.id === id);
     return c?.create ? [{ icon: icons[id] ?? Plus, label: c.create, href: `#ny/${id}` }] : [];
   });

package/src/ThemeStore.tsx

@@ -21,6 +21,8 @@ import { iconPacks, packOfTheme } from './iconPacks';
 import { theme, themes, type ThemeInfo } from './themes';
 import {
   changedFiles,
+  legacyOf,
+  moveChanges,
   newer,
   notesSince,
   STANDARD_THEME,
@@ -63,8 +65,12 @@ export function useThemeCatalog(env: Env): ShownTheme[] | null | 'failed' {
 // version updated to, until the site's build has it (and the editor reloads with it, deploy.ts keepCurrent).
 const changed = new Map<string, string>();
 
-/** Whether a theme is in the site now: installed and not uninstalled since, or installed since. */
-export const themeInstalled = (id: string) => (changed.has(id) ? changed.get(id) !== 'uninstalled' : themes.some((x) => x.id === id));
+const themeHere = (id: string) => (changed.has(id) ? changed.get(id) !== 'uninstalled' : themes.some((x) => x.id === id));
+
+/** Whether a theme is in the site now: installed and not uninstalled since, or installed since; or, with its `legacy` id,
+ * a copy under that old id from the store (legacyOf). */
+export const themeInstalled = (id: string, legacy?: string) =>
+  themeHere(id) || (!!legacy && legacyOf({ legacy }, themes) !== null && themeHere(legacy));
 
 /** A theme installed from the store that the site's build does not have yet. */
 export const themePending = (id: string) => changed.get(id) === 'installed' && !themes.some((x) => x.id === id);
@@ -74,7 +80,7 @@ const versionOf = (x: ThemeInfo) => (changed.has(x.id) && changed.get(x.id) !==
 
 /** The newer version of a theme from the store, when the store has one. */
 export const themeUpdateOf = (x: ThemeInfo, catalog: ShownTheme[] | null | 'failed') => {
-  const found = x.store && Array.isArray(catalog) ? catalog.find((c) => c.id === x.id) : undefined;
+  const found = x.store && Array.isArray(catalog) ? catalog.find((c) => c.id === x.id || c.legacy === x.id) : undefined;
   return found && newer(found.version, versionOf(x)) ? found : undefined;
 };
 
@@ -124,11 +130,13 @@ function useThemeActions(env: Env) {
     text: { busy: string; done: string; commit: string; change: string },
     next: () => Promise<Parameters<typeof themeChanges>[2]>,
     go: (current: RepoFile[]) => Promise<boolean> = async () => true,
+    // The id the theme is installed under, when it is a legacy copy that moves to `id` (moveChanges).
+    legacy: string | null = null,
   ): Promise<boolean> {
     setRunning({ id, action, asking: false });
     env.notify({ text: text.busy });
     try {
-      const [current, wanted] = await Promise.all([env.folder(themeFolder(id)), next()]);
+      const [current, wanted] = await Promise.all([env.folder(themeFolder(legacy ?? id)), next()]);
       if (!(await go(current))) {
         env.notify(null);
         return false;
@@ -136,7 +144,11 @@ function useThemeActions(env: Env) {
       // `go` cleared the message (and its dialog stopped the button being busy): saving goes on.
       setRunning({ id, action, asking: false });
       env.notify({ text: text.busy });
-      await env.commit(text.commit, themeChanges(id, current, wanted), text.change);
+      await env.commit(
+        text.commit,
+        legacy && wanted ? moveChanges({ id }, legacy, wanted, current, env.files) : themeChanges(id, current, wanted),
+        text.change,
+      );
       env.notify({ text: text.done, kind: 'saved' });
       return true;
     } catch (e) {
@@ -165,7 +177,7 @@ function useThemeActions(env: Env) {
       if (done) changed.set(x.id, 'installed');
       return done;
     },
-    async update(x: ShownTheme, record: StoreRecord) {
+    async update(x: ShownTheme, record: StoreRecord, legacy: string | null = null) {
       const done = await change(
         x.id,
         'update',
@@ -190,11 +202,15 @@ function useThemeActions(env: Env) {
             record.version,
             x.version,
             notesSince(x.releaseNotes, record.version, x.version),
-            changedFiles(x.id, record, current, themeFolder(x.id)),
+            changedFiles(x.id, record, current, themeFolder(legacy ?? x.id)),
           );
         },
+        legacy,
       );
-      if (done) changed.set(x.id, x.version);
+      if (done && legacy) {
+        changed.set(x.id, 'installed');
+        changed.set(legacy, 'uninstalled');
+      } else if (done) changed.set(x.id, x.version);
       return done;
     },
     async uninstall(id: string, name: string) {
@@ -221,11 +237,12 @@ function useThemeActions(env: Env) {
 export function allThemes(catalog: ShownTheme[] | null | 'failed') {
   const store = Array.isArray(catalog) ? catalog : [];
   return [
-    ...store.map((x) => ({ id: x.id, name: x.name, author: x.author, version: x.version, icon: x.icon, words: x.words })),
+    ...store.map((x) => ({ id: x.id, legacy: x.legacy, name: x.name, author: x.author, version: x.version, icon: x.icon, words: x.words })),
     ...themes
-      .filter((x) => !store.some((s) => s.id === x.id))
+      .filter((x) => !store.some((s) => s.id === x.id || s.legacy === x.id))
       .map((x) => ({
         id: x.id,
+        legacy: undefined as string | undefined,
         name: x.name,
         author: x.author,
         version: x.version,
@@ -247,7 +264,7 @@ export function ThemeRow({ of }: { of: ReturnType<typeof allThemes>[number] }) {
       headline={of.name}
       supporting={t.library.themeByline(of.version, of.author)}
       truncate
-      count={themeInstalled(of.id) && (themePending(of.id) ? t.apps.pending : t.apps.installed)}
+      count={themeInstalled(of.id, of.legacy) && (themePending(of.id) ? t.apps.pending : t.apps.installed)}
       arrow
     />
   );
@@ -363,7 +380,11 @@ export function ThemeStoreButtons({ of, env, files, top }: { of: ThemeInfo; env:
   if (top)
     return update ? (
       <div className="mb-8">
-        <Button disabled={actions.saving} busy={actions.busy(of.id, 'update')} onClick={() => actions.update(update, of.store!)}>
+        <Button
+          disabled={actions.saving}
+          busy={actions.busy(update.id, 'update')}
+          onClick={() => actions.update(update, of.store!, legacyOf(update, themes))}
+        >
           {t.apps.update(update.version)}
         </Button>
       </div>

package/src/apps.ts

@@ -251,9 +251,8 @@ export function kindsOffered(
 export const tabsOf = (list: string, apps: SiteApp[], installed: string[]) =>
   apps.flatMap((app) => (installed.includes(app.id) && app.tabs?.[list] ? [{ app, tab: app.tabs[list] }] : []));
 
-/** The id of an app from the path of a file in its folder ("/src/apps/mailchimp/index.ts": "mailchimp",
- * also ".../apps/mailchimp/popups/View.tsx"). */
-export const appIdOf = (path: string) => path.split('/apps/')[1].split('/')[0];
+// The id of an app from the path of a file in its folder (lib/appId.mjs, also read by the @app/self plugin).
+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`;

package/src/drawerYield.d.mts

@@ -0,0 +1,3 @@
+/** Whether the standard drawer shows open: remembered (sidebar.ts), panelOpen (the standard side panel is open), large (window
+ * at least `large`), reopened (the menu button opened it while the panel is open). */
+export function drawerShown(remembered: any, panelOpen: any, large: any, reopened: any): boolean;

package/src/drawerYield.mjs

@@ -0,0 +1,10 @@
+// Whether the standard navigation drawer shows open while the standard side panel may be open beside the text (840-1199px:
+// both do not fit). Exposes drawerShown(remembered, panelOpen, large, reopened); used by menuOpen.ts; no dependencies.
+
+/** Whether the standard drawer shows open: remembered (sidebar.ts), panelOpen (the standard side panel is open), large (window
+ * at least `large`), reopened (the menu button opened it while the panel is open). */
+export function drawerShown(remembered, panelOpen, large, reopened) {
+  if (!remembered && !reopened) return false;
+  if (panelOpen && !large && !reopened) return false;
+  return true;
+}

package/src/drawerYield.test.mjs

@@ -0,0 +1,22 @@
+// Tests for drawerYield.mjs: the standard drawer yields to the side panel below large, unless the menu button reopened it.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { drawerShown } from './drawerYield.mjs';
+
+test('the drawer shows as remembered while no panel is open', () => {
+  assert.equal(drawerShown(true, false, false, false), true);
+  assert.equal(drawerShown(false, false, true, false), false);
+});
+
+test('the drawer yields while the panel is open below large', () => {
+  assert.equal(drawerShown(true, true, false, false), false);
+  assert.equal(drawerShown(false, true, false, false), false);
+});
+
+test('the drawer shows again when the menu button reopened it', () => {
+  assert.equal(drawerShown(true, true, false, true), true);
+});
+
+test('the drawer never yields from large', () => {
+  assert.equal(drawerShown(true, true, true, false), true);
+});

package/src/editor.css

@@ -4,6 +4,10 @@
 @reference '../theme/styles/base.css';
 
 :where(:root) {
+  /* The menus and the toolbar of the text: Material 3's menu surface and shadow (elevation level 2). */
+  --editor-menu-surface: var(--surface-container-lowest);
+  --editor-menu-shadow: var(--elevation-2);
+
   /* How a check went (CheckList: the SEO rating), as PageSpeed shows it: the mark before a check that is fine and one
      that can be done better, and the score's ring (from 90 good, from 50 average, else bad) with its number and the
      light circle in it; the same in every theme. */
@@ -33,13 +37,14 @@
   --editor-section-rhythm: 0.625em;
 
   /* A form's "on this page" area (SectionPane in ui.tsx) against the window's end edge: its width (the card is as wide as the navigation drawer), the card in it
-     stands --section-pane-gap in from the end edge and from under the top bar. */
+     stands --section-pane-gap in from the end edge and from the window's top edge. */
   --section-pane-width: calc(var(--navigation-drawer-width, 22.5rem) + var(--section-pane-gap));
   --section-pane-gap: 2rem;
 
-  /* The side panel of a block's fields and the section settings (BottomSheet `panel` in ui.tsx) on large and wider: half the
-     space beside the start panel, the content column taking the other half (see below). */
-  --side-panel-width: calc((100vw - var(--column-start)) / 2);
+  /* The side panel of a block's fields and the section settings (BlockDialog's standard side sheet from expanded, BottomSheet
+     `panel` in ui.tsx from large): M3's side sheet is 400dp (25rem) wide at most; where the window is narrower it is half
+     the space beside the start panel, the content column taking the other half (see below). */
+  --side-panel-width: min(25rem, calc((100vw - var(--column-start)) / 2));
 }
 
 /* In dark mode the score's number in the light colours, which are read on the dark, and Google's dark colours. */
@@ -403,10 +408,25 @@
   z-index: 30;
 }
 
+/* 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;
+  pointer-events: none;
+}
+
 :root:has(.editor-fab) .snackbar-stack {
   bottom: calc(6rem + env(safe-area-inset-bottom));
 }
 
+/* While a form's save bar is up (FormFrame.tsx) the FAB stands above it, so it does not cover Save; the messages above both. */
+:root:has(.editor-save-bar) .editor-fab {
+  bottom: calc(6.5rem + env(safe-area-inset-bottom));
+}
+
+:root:has(.editor-save-bar):has(.editor-fab) .snackbar-stack {
+  bottom: calc(11.5rem + env(safe-area-inset-bottom));
+}
+
 /* From medium the navigation rail stands at the start edge of the window (MainMenu.tsx), so the messages are in the middle of
    the content next to it and the save bar starts where it ends; at expanded and wider, while the standard drawer is open
    in the rail's place, they keep clear of the drawer instead. The widths are the theme's. The top bar and its tabs (Screen.tsx)
@@ -461,8 +481,8 @@
    not less than nothing and not more than the space left between the panels less the column. Only when that space is
    smaller than the column does it get narrower. (Measured against the window's width, 100vw, scrollbar and all.) Below
    medium nothing stands beside the content and the column is centred by auto margins. While the side panel is open (see
-   the end of this block) the panel takes the end half of the space beside the start panel and the column the other half:
-   --column-width stays the column's most, so on a very wide window it is narrower than its half. */
+   the end of this block) the column is centred in the space between the start panel and the side panel by auto margins
+   (the content's end padding keeps it clear of the panel), still no wider than --column-width. */
 :root {
   --column-start: 0px;
   --column-end: 0px;
@@ -504,25 +524,26 @@
     right: var(--section-pane-width);
   }
 
-  /* BottomSheet's `panel` (.editor-side-panel): the theme's modal side sheet at the window's end edge under the top bar,
-     the full remaining height; its backdrop is clear. */
+  /* BottomSheet's `panel` (.editor-side-panel): the theme's modal side sheet at the window's end edge, the full window
+     height like the standard one; its backdrop is clear. */
   .editor-side-panel {
-    inset: var(--top-bar-height) 0 0 auto;
+    inset: 0 0 0 auto;
     width: var(--side-panel-width);
-    height: calc(100dvh - var(--top-bar-height));
+    height: 100dvh;
   }
   .editor-side-panel:dir(rtl) {
-    inset: var(--top-bar-height) auto 0 0;
+    inset: 0 auto 0 0;
   }
   .editor-side-panel::backdrop {
     background: transparent;
   }
 }
 
-/* The block dialog's standard side sheet (.editor-side-sheet: BlockDialog.tsx, not modal, from medium) stands at the window's
-   end edge under the top bar, the full remaining height. BlockDialog.tsx sets [data-side-panel] on the root while it is
-   open: it takes the "on this page" area's place (that is hidden), and the content, which stays in use, keeps clear of it. */
-@media (width >= theme(--breakpoint-medium)) {
+/* The block dialog's standard side sheet (.editor-side-sheet: BlockDialog.tsx, not modal, from expanded) stands at the window's
+   end edge from the top of the window to its bottom (M3), with its divider the whole height. BlockDialog.tsx sets
+   [data-side-panel] on the root while it is open: the top bar (.editor-top-bar-slot, topBarSlot.tsx) ends at the sheet's
+   start edge, it takes the "on this page" area's place (that is hidden), and the content, which stays in use, keeps clear of it. */
+@media (width >= theme(--breakpoint-expanded)) {
   :root[data-side-panel] {
     --column-end: var(--side-panel-width);
   }
@@ -532,19 +553,25 @@
   :root[data-side-panel] .editor-content {
     padding-inline-end: var(--side-panel-width);
   }
+  :root[data-side-panel] .editor-column {
+    margin-inline: auto;
+  }
   :root[data-side-panel] .editor-save-bar {
     right: var(--side-panel-width);
   }
   .editor-side-sheet {
     position: fixed;
-    inset: var(--top-bar-height) 0 0 auto;
+    inset: 0 0 0 auto;
     z-index: 20;
     width: var(--side-panel-width);
     max-width: none;
-    height: calc(100dvh - var(--top-bar-height));
+    height: 100dvh;
   }
   .editor-side-sheet:dir(rtl) {
-    inset: var(--top-bar-height) auto 0 0;
+    inset: 0 auto 0 0;
+  }
+  :root[data-side-panel] .editor-top-bar-slot {
+    padding-inline-end: var(--side-panel-width);
   }
 }
 
@@ -632,9 +659,9 @@ html {
   gap: 0.125rem;
   border: 1px solid var(--line);
   border-radius: 9999px;
-  background: var(--surface);
+  background: var(--editor-menu-surface);
   padding: 0.25rem;
-  box-shadow: var(--shadow);
+  box-shadow: var(--editor-menu-shadow);
 }
 
 .editor-text .site-block-menu button {
@@ -656,6 +683,12 @@ html {
   color: var(--accent);
 }
 
+/* The text's toolbar (MarkdownEditor.tsx, Toolbar in ui.tsx): the menu surface and shadow. */
+.editor-tools {
+  --toolbar-standard-surface: var(--editor-menu-surface);
+  box-shadow: var(--editor-menu-shadow);
+}
+
 /* The icons over the selected text, on a phone at the bottom over the keyboard (selectionMenu in
    MarkdownEditor.tsx). */
 .editor-selection-menu {
@@ -665,9 +698,9 @@ html {
   gap: 0.125rem;
   border: 1px solid var(--line);
   border-radius: 9999px;
-  background: var(--surface);
+  background: var(--editor-menu-surface);
   padding: 0.25rem;
-  box-shadow: var(--shadow);
+  box-shadow: var(--editor-menu-shadow);
 }
 
 .editor-selection-menu[hidden],

package/src/fabScreens.test.mjs

@@ -0,0 +1,28 @@
+// Tests for src/fabScreens.ts: the start screen's FAB menu and the create actions of a list. Run: node --test src/fabScreens.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { START_FAB, listFab } from './fabScreens.ts';
+
+const standard = { value: 'standard', label: 'Standard' };
+const mailchimp = { value: 'mailchimp', label: 'Mailchimp' };
+
+test('the start screen makes a page or a blog post', () => {
+  assert.deepEqual(START_FAB, ['pages', 'blog']);
+});
+
+test('a list without kinds, or with one, has one action named after its create label', () => {
+  assert.deepEqual(listFab({ id: 'pages', create: 'New page' }, []), [{ label: 'New page', href: '#ny/pages' }]);
+  assert.deepEqual(listFab({ id: 'popups', create: 'New promotion' }, [standard]), [{ label: 'New promotion', href: '#ny/popups' }]);
+});
+
+test('a list of several kinds has one action per kind', () => {
+  assert.deepEqual(listFab({ id: 'popups', create: 'New promotion' }, [standard, mailchimp]), [
+    { label: 'Standard', href: '#ny/popups/standard' },
+    { label: 'Mailchimp', href: '#ny/popups/mailchimp' },
+  ]);
+});
+
+test('a list that cannot make entries has no action', () => {
+  assert.deepEqual(listFab({ id: 'orders' }, []), []);
+  assert.deepEqual(listFab({ id: 'orders' }, [standard, mailchimp]), []);
+});

package/src/fabScreens.ts

@@ -0,0 +1,16 @@
+// What the create FAB offers: the start screen's menu (START_FAB, the collection ids) and a list's own (listFab: one
+// action, or one per kind). Pure; the icons and the FAB itself are added by StartFab.tsx and ListFab.tsx.
+
+/** The collections a new entry can be made in from the start screen, in this order: pages and blog posts. */
+export const START_FAB = ['pages', 'blog'];
+
+/** A list's create actions, as a label and where it goes: with several kinds one per kind (`#ny/<id>/<kind>`), else one
+ * named `create` (`#ny/<id>`); none for a list that cannot make entries (no `create`). */
+export function listFab(
+  collection: { id: string; create?: string },
+  kinds: { value: string; label: string }[],
+): { label: string; href: string }[] {
+  if (!collection.create) return [];
+  if (kinds.length > 1) return kinds.map((k) => ({ label: k.label, href: `#ny/${collection.id}/${k.value}` }));
+  return [{ label: collection.create, href: `#ny/${collection.id}` }];
+}