@morphemecms/cms 0.11.0 → 0.13.0-next-20261106203613

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. */
@@ -324,7 +329,7 @@
 /* The main drawer's header row (MainDrawerMenuButton in ui.tsx): the account row is a pill, shaped and shaded as a drawer
    item is when pointed at. Its inline padding puts the avatar's centre over the items' icons (the avatar is wider than the
    24px icon: half the difference less than the items' padding). The avatar has a 1px border inside its size.
-   The row is as high as a drawer item (56px). */
+   The pill is as high as a drawer item (56px); the row around it is the top bar's height. */
 .editor-main-drawer-header {
   --list-item-padding-block: 0.375rem;
   --list-item-two-line-min-height: var(--navigation-drawer-item-height, 3.5rem);
@@ -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],
@@ -845,9 +878,7 @@ html {
 
 /* A text with blocks (a page, a fixed page's sections): the cards close together, with the free line
    between two of them to write in: thin, until the cursor is in it (editor-gap-here, MarkdownEditor.tsx)
-   or the pointer over it, when it opens up and says so. An open line is a one-cell grid: the hint (::before) and the
-   line break share the cell, so the line is as tall as the hint, however many lines it wraps to, and the cursor sits
-   at the start of the hint. */
+   or the pointer over it, when it opens up and says so. */
 .editor-spaced .site-block {
   margin-block: 0.25rem;
 }
@@ -868,37 +899,27 @@ html {
 }
 
 .editor-spaced .ProseMirror:focus > p.editor-gap-here:has(> br:only-child) {
-  display: grid;
   line-height: 1.5rem;
 }
 
 .editor-spaced .ProseMirror:focus > p.editor-gap-here:has(> br:only-child)::before {
   content: var(--editor-gap-text);
-  grid-area: 1 / 1;
+  position: absolute;
   color: var(--muted);
   pointer-events: none;
 }
 
-.editor-spaced .ProseMirror:focus > p.editor-gap-here > br:only-child {
-  grid-area: 1 / 1;
-}
-
 @media (hover: hover) {
   .editor-spaced .ProseMirror > p:has(> br:only-child):hover {
-    display: grid;
     line-height: 1.5rem;
   }
 
   .editor-spaced .ProseMirror > p:has(> br:only-child):hover::before {
     content: var(--editor-gap-text);
-    grid-area: 1 / 1;
+    position: absolute;
     color: var(--muted);
     pointer-events: none;
   }
-
-  .editor-spaced .ProseMirror > p:hover > br:only-child {
-    grid-area: 1 / 1;
-  }
 }
 
 /* While a sheet or a dialog is open (shown modally, showModal), the page under it does not scroll (only the sheet does).

package/src/examples.ts

@@ -1,4 +1,4 @@
-// What "Dele" (#udseende/dele: Parts.tsx, BlockParts.tsx) shows the parts and blocks with: made-up pages, posts, tags,
+// What "Dele" (#appearance/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.

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: '#new/pages' }]);
+  assert.deepEqual(listFab({ id: 'popups', create: 'New promotion' }, [standard]), [{ label: 'New promotion', href: '#new/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: '#new/popups/standard' },
+    { label: 'Mailchimp', href: '#new/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 (`#new/<id>/<kind>`), else one
+ * named `create` (`#new/<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: `#new/${collection.id}/${k.value}` }));
+  return [{ label: collection.create, href: `#new/${collection.id}` }];
+}

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

@@ -106,8 +106,8 @@ export const library: Messages['library'] = {
   statusShown: { all: 'Alle', published: 'Udgivet', draft: 'Kladde', unlisted: 'Skjult', scheduled: 'Planlagt' },
   sort: 'Sortér',
   sorts: {
-    nyeste: 'Nyeste først',
-    aeldste: 'Ældste først',
+    newest: 'Nyeste først',
+    oldest: 'Ældste først',
     az: 'A–Å',
     za: 'Å–A',
     savedNewest: 'Senest ændret først',

package/src/i18n/da-DK/text.ts

@@ -35,5 +35,5 @@ export const text: Messages['text'] = {
   hiddenOnPage: 'Skjult på siden',
   showOnPage: 'Vis på siden',
   hideOnPage: 'Skjul på siden',
-  typeHere: 'Begynd at skrive… Gør din første overskrift god, for den bliver den H1, som læsere og søgemaskiner ser først.',
+  typeHere: 'Skriv tekst her …',
 };

package/src/i18n/en-US/apps.ts

@@ -33,7 +33,7 @@ export const apps = {
   cookiesAsk: 'Set only once the visitor has said yes in the cookie banner',
   noCookies: 'Sets no cookies',
   developer: 'Developer',
-  /** On a developer's page (#apps/udvikler/<navn>): over their apps, and the number of them by their row on an app's page. */
+  /** On a developer's page (#apps/developer/<name>): over their apps, and the number of them by their row on an app's page. */
   developerApps: 'Apps',
   appCount: (n: number) => (n === 1 ? '1 app' : `${n} apps`),
   /** At the address of a developer no app has. */

package/src/i18n/en-US/common.ts

@@ -107,23 +107,23 @@ export const common = {
     lists: 'Lists',
     blocks: 'Block templates',
     media: 'Files',
-    /** How the site looks (#udseende, Library.tsx Theme): the theme, the colours, the logo and icon, and the site's own
+    /** How the site looks (#appearance, Library.tsx Theme): the theme, the colours, the logo and icon, and the site's own
      * parts there (appearance in packages/editor/defaults/editor.ts: "Standardsider"). */
     appearance: 'Appearance',
-    /** The themes installed (#udseende/temaer, Library.tsx Themes), the first row under "Udseende". */
+    /** The themes installed (#appearance/themes, Library.tsx Themes), the first row under "Udseende". */
     themes: 'Themes',
-    /** The icon packs installed, to choose the one the site draws its icons with (#udseende/ikonpakker, IconPacks). */
+    /** The icon packs installed, to choose the one the site draws its icons with (#appearance/icon-packs, IconPacks). */
     iconPacks: 'Icon packs',
-    /** How the site moves, Material 3's motion schemes (#udseende/bevaegelse, MotionSchemes in Library.tsx). */
+    /** How the site moves, Material 3's motion schemes (#appearance/motion, MotionSchemes in Library.tsx). */
     motion: 'Motion',
-    /** The block drawn in a column beside the text of the pages (#udseende/sidekolonne, SideColumn.tsx). */
+    /** The block drawn in a column beside the text of the pages (#appearance/side-column, SideColumn.tsx). */
     sideColumn: 'Side column',
     colors: 'Colors',
     brand: 'Logo and icon',
     blockSettings: 'Block settings',
     /** The apps that come with the site (AppList.tsx, #apps). */
     apps: 'Apps',
-    /** The parts the editor and the site are built of (#udseende/dele: Parts.tsx, BlockParts.tsx). */
+    /** The parts the editor and the site are built of (#appearance/parts: Parts.tsx, BlockParts.tsx). */
     editorParts: 'Parts',
     /** Under Indstillinger: the redirects and the site's own parts (#seo, Library.tsx Seo). */
     seo: 'Search engine optimization',
@@ -131,9 +131,9 @@ export const common = {
     account: 'Account',
     /** The last section of the main drawer, and the first part of the path to a setting (placeOf in site.ts). */
     settings: 'Settings',
-    /** Under Indstillinger: the faster editor (#avanceret, Advanced.tsx). */
+    /** Under Indstillinger: the faster editor (#advanced, Advanced.tsx). */
     advanced: 'Advanced',
-    /** Under Indstillinger: the licences of what the site and the editor are made with (#licenser, Licenses.tsx). */
+    /** Under Indstillinger: the licences of what the site and the editor are made with (#licenses, Licenses.tsx). */
     licenses: 'Licenses',
     /** Under Indstillinger: the CMS's version and its updates (#morpheme). */
     morpheme: 'Morpheme',

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

@@ -10,7 +10,7 @@ export const library = {
   createNew: 'Create',
   githubAccount: (login: string) => `GitHub account: ${login}`,
   logOut: 'Log out',
-  /** The bell in the top bar and its screen (#notifikationer, Notifications.tsx): the messages shown at the bottom. */
+  /** The bell in the top bar and its screen (#notifications, Notifications.tsx): the messages shown at the bottom. */
   notifications: 'Notifications',
   /** The bell's name while some are not seen yet. */
   notificationsNew: (count: number) => `Notifications, ${count} new`,
@@ -144,8 +144,8 @@ export const library = {
   statusShown: { all: 'All', published: 'Published', draft: 'Draft', unlisted: 'Hidden', scheduled: 'Scheduled' },
   sort: 'Sort',
   sorts: {
-    nyeste: 'Newest first',
-    aeldste: 'Oldest first',
+    newest: 'Newest first',
+    oldest: 'Oldest first',
     az: 'A–Z',
     za: 'Z–A',
     /** The pages, by when they were last saved. */
@@ -153,7 +153,7 @@ export const library = {
     savedOldest: 'Least recently changed first',
     /** A list of kinds (Promovering), under a heading for each kind. */
     type: 'By type',
-    /** "Standardblokke" (#blokke), in the groups by where the blocks come from. */
+    /** "Standardblokke" (#blocks), in the groups by where the blocks come from. */
     group: 'By group',
   },
   /** The funnel over a list of what is shown on pages (Promovering), with its filters in one sheet. */
@@ -172,7 +172,7 @@ export const library = {
   /** The filter by whether an entry is turned on, and its first choice. */
   onOffFilter: 'Status',
   allOnOff: 'All',
-  /** The filters over "Standardblokke" (#blokke): by the group (where the block comes from) and by whether
+  /** The filters over "Standardblokke" (#blocks): by the group (where the block comes from) and by whether
    * the block is on a page, each with its first choice. */
   groupFilter: 'Group',
   allGroups: 'All groups',

package/src/i18n/en-US/parts.ts

@@ -1,4 +1,4 @@
-// "Dele" (#udseende/dele): the editor's parts (Parts.tsx), what each is for and the texts in the examples, and the standard
+// "Dele" (#appearance/parts): the editor's parts (Parts.tsx), what each is for and the texts in the examples, and the standard
 // blocks and the apps' (BlockParts.tsx), all with the made-up site of examples.ts.
 export const parts = {
   intro: (file: string) =>
@@ -253,7 +253,7 @@ export const parts = {
     /** What a kind of entry an app adds (a pop-up) is drawn with. */
     entry: { name: 'An example', heading: 'A heading', text: 'A short text that tells a little more.' },
   },
-  /** "Dele" › "Værdier" (#udseende/dele/vaerdier, Tokens.tsx): the theme's design tokens, each with what it is used for. */
+  /** "Dele" › "Værdier" (#appearance/parts/values, Tokens.tsx): the theme's design tokens, each with what it is used for. */
   tokens: {
     intro: 'The theme’s values for corners, shadows, typography, and colors, as the theme sets them.',
     groups: { shape: 'Corners', elevation: 'Shadows', type: 'Typography', color: 'Colors' },
@@ -355,7 +355,7 @@ export const parts = {
     /** A token the theme does not set, with the one it gets instead. */
     from: (token: string, value: string, from: string) => `${token}: ${value} (as ${from})`,
   },
-  /** "Dele" (#udseende/dele) and its screens: the editor's parts, the theme's UI components, the blocks (the standard
+  /** "Dele" (#appearance/parts) and its screens: the editor's parts, the theme's UI components, the blocks (the standard
    * ones and the apps') and the lists of kinds ("Promotion"). */
   screens: {
     editor: 'Editor',

package/src/i18n/en-US/text.ts

@@ -43,5 +43,5 @@ export const text = {
   showOnPage: 'Show on the page',
   hideOnPage: 'Hide on the page',
   /** Shown in an empty line of the text, under the pointer or the cursor. */
-  typeHere: 'Start typing… Make your first heading count, because it becomes the H1 that readers and search engines see first.',
+  typeHere: 'Write text here…',
 };

package/src/i18n/index.ts

@@ -9,6 +9,7 @@
 // (siteText, @site/texts). The blocks' drawings and the commits (siteT) stay in the site's
 // language, so the site looks as it is, and the history is in one language, whoever saved.
 // A value the editor writes into content (a default text) is in the site's language too (inSiteLanguage).
+// The standard parts are written in English; their Danish is in defaults/i18n/da-DK/, the default of @site/texts.
 // A language is a folder with the texts by the part of the editor they are in (en-US/index.ts). English is the
 // reference: its texts are written first (Messages is its type), and every other language translates them; a new
 // one is a copy of da-DK with its texts translated from en-US, added to `messages`. TypeScript says when a
@@ -82,7 +83,7 @@ export const t: Messages = messages[locale];
 export const siteT: Messages = messages[siteLocale];
 
 /** The language the package's standard parts (defaults/) are written in, whatever the site's language is. */
-export const DEFAULTS_LOCALE: Locale = 'da-DK';
+export const DEFAULTS_LOCALE: Locale = 'en-US';
 
 /** Whether the site's own texts (written in the site's language) or the package's standard parts (written in
  * DEFAULTS_LOCALE) may be shown in another language than they are written in. */
@@ -100,9 +101,7 @@ export const appTexts: Record<string, Texts> = Object.fromEntries(
   }),
 );
 
-const own: Record<string, string> = translatingSite
-  ? Object.assign({}, ...Object.values(appTexts).map((a) => a[locale]), (texts as Texts)[locale])
-  : {};
+const own = Object.assign({}, ...Object.values(appTexts).map((a) => a[locale]), (texts as Texts)[locale]);
 
 /** One of the site's own texts (src/site/, src/themes/<theme>/blocks/, src/apps/), written in the site's language, in the editor's:
  * its translation in @site/texts or in a block's texts.ts, else as it is written. `values` fill in
@@ -111,10 +110,7 @@ export function siteText(text: string, values?: Record<string, string | number>)
   return translate(own, text, values);
 }
 
-const inSite: Record<string, string> =
-  siteLocale === DEFAULTS_LOCALE
-    ? {}
-    : Object.assign({}, ...Object.values(appTexts).map((a) => a[siteLocale]), (texts as Texts)[siteLocale]);
+const inSite = Object.assign({}, ...Object.values(appTexts).map((a) => a[siteLocale]), (texts as Texts)[siteLocale]);
 
 /** A text of the package's standard parts (written in DEFAULTS_LOCALE) in the site's language, for a value that the
  * editor writes into content (a default button text): its translation in @site/texts or in a block's texts.ts, else

package/src/images.ts

@@ -98,7 +98,7 @@ export async function prepareImage(file: File): Promise<Upload> {
   const now = new Date();
   const folder = `${config.folders.media}/${now.getFullYear()}/${String(now.getMonth() + 1).padStart(2, '0')}`;
   // A short random ending, so two pictures called IMG_1234 do not get the same name.
-  const name = `${slugify(file.name.replace(/\.[^.]*$/, '')) || 'billede'}-${Math.random().toString(36).slice(2, 6)}`;
+  const name = `${slugify(file.name.replace(/\.[^.]*$/, '')) || 'picture'}-${Math.random().toString(36).slice(2, 6)}`;
   const ext = blob.type === 'image/webp' ? 'webp' : 'jpg';
   const upload = {
     url: URL.createObjectURL(blob),
@@ -119,7 +119,7 @@ export const FILE_MAX_MB = 10;
 export async function prepareFile(file: File, taken: string[]): Promise<Upload> {
   if (file.size > FILE_MAX_MB * 1024 * 1024) throw new Error(t.media.tooBig(FILE_MAX_MB));
   const folder = config.folders.files;
-  const stem = slugify(file.name.replace(/\.[^.]*$/, '')) || 'fil';
+  const stem = slugify(file.name.replace(/\.[^.]*$/, '')) || 'file';
   const ending = pickedEnding(file);
   let path = `${folder}/${stem}.${ending}`;
   for (let n = 2; taken.includes(path); n++) path = `${folder}/${stem}-${n}.${ending}`;

package/src/legacyMove.test.mjs

@@ -0,0 +1,137 @@
+// Tests for src/legacyMove.ts: when a legacy store copy counts as installed, and the one list of changes that moves it
+// to its permanent folder. Run: node --test src/legacyMove.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { appliedTo, installedHere, legacyOf, mergeChanges, moveChanges } from './legacyMove.ts';
+
+const PATHS = {
+  appsFolder: 'src/apps',
+  themesFolder: 'src/themes',
+  installed: 'src/data/apps.json',
+  settings: 'src/data/apps',
+  theme: 'src/data/theme.json',
+  icons: 'src/data/icons.json',
+  blockSettings: 'src/data/block-settings.json',
+  popups: 'src/data/popups',
+  cookieList: 'src/data/cookie-list',
+};
+const VENUS = { id: 'theme_fa395ad84690acbd', legacy: 'venus' };
+const MOBILEPAY = { id: 'app_ae0b5e17636668bc', legacy: 'mobilepay' };
+const file = (path, text, oid = `oid-${path}`) => ({ path, oid, text });
+const json = (x) => `${JSON.stringify(x, null, 2)}\n`;
+const next = { files: [{ path: 'theme.json', content: '{}' }], record: { version: '2.0.0', ref: '2.0.0', files: [] } };
+const find = (changes, path) => changes.find((c) => c.path === path);
+
+test('a legacy folder with a store.json is installed', () => {
+  assert.equal(legacyOf(VENUS, [{ id: 'venus', store: { version: '1.2.0' } }]), 'venus');
+});
+
+test('a legacy folder without a store.json is the site own', () => {
+  assert.equal(legacyOf(VENUS, [{ id: 'venus' }]), null);
+  assert.equal(legacyOf(VENUS, []), null);
+  assert.equal(legacyOf({ id: VENUS.id }, [{ id: 'venus', store: { version: '1.2.0' } }]), null);
+});
+
+test('moving a theme writes the new folder, deletes the old files and rewrites theme.json and icons.json', () => {
+  const old = [file('src/themes/venus/theme.json', '{"a":1}'), file('src/themes/venus/store.json', '{}')];
+  const site = [file(PATHS.theme, json({ theme: 'venus' })), file(PATHS.icons, json({ pack: 'venus/x' }))];
+  const changes = moveChanges(VENUS, 'venus', next, old, site, PATHS);
+  assert.equal(find(changes, `src/themes/${VENUS.id}/theme.json`).content, '{}');
+  assert.ok(find(changes, `src/themes/${VENUS.id}/store.json`));
+  for (const f of old) assert.deepEqual(find(changes, f.path), { path: f.path, content: null, oid: f.oid });
+  assert.deepEqual(JSON.parse(find(changes, PATHS.theme).content), { theme: VENUS.id });
+  assert.deepEqual(JSON.parse(find(changes, PATHS.icons).content), { pack: `${VENUS.id}/x` });
+});
+
+test('a system icon pack and another theme stay as they are', () => {
+  const site = [file(PATHS.theme, json({ theme: 'saturn' })), file(PATHS.icons, json({ pack: 'phosphor' }))];
+  const changes = moveChanges(VENUS, 'venus', next, [], site, PATHS);
+  assert.equal(find(changes, PATHS.theme), undefined);
+  assert.equal(find(changes, PATHS.icons), undefined);
+});
+
+test('moving an app renames its settings file and keeps the sorted list', () => {
+  const settings = '{ "key":  "kept as it is" }\n';
+  const site = [
+    file(PATHS.installed, json({ installed: ['calendly', 'mobilepay', 'zeta'] })),
+    file('src/data/apps/mobilepay.json', settings),
+  ];
+  const changes = moveChanges(MOBILEPAY, 'mobilepay', { files: [], record: next.record }, [], site, PATHS);
+  assert.deepEqual(find(changes, 'src/data/apps/mobilepay.json'), {
+    path: 'src/data/apps/mobilepay.json',
+    content: null,
+    oid: 'oid-src/data/apps/mobilepay.json',
+  });
+  assert.deepEqual(find(changes, `src/data/apps/${MOBILEPAY.id}.json`), {
+    path: `src/data/apps/${MOBILEPAY.id}.json`,
+    content: settings,
+    oid: null,
+  });
+  assert.deepEqual(JSON.parse(find(changes, PATHS.installed).content).installed, ['calendly', MOBILEPAY.id, 'zeta'].sort());
+});
+
+test('moving an app rewrites block-settings, popups and the cookie list, and only the legacy values', () => {
+  const site = [
+    file(PATHS.blockSettings, json({ off: ['popups/mobilepay', 'popups/other', 'text', 'x/mobilepay-2'] })),
+    file('src/data/popups/a.json', json({ type: 'mobilepay', title: 'A' })),
+    file('src/data/popups/b.json', json({ type: 'other' })),
+    file('src/data/cookie-list/c.json', json({ name: 'mobilepay', app: 'mobilepay' })),
+    file('src/data/cookie-list/d.json', json({ app: 'other' })),
+  ];
+  const changes = moveChanges(MOBILEPAY, 'mobilepay', { files: [], record: next.record }, [], site, PATHS);
+  assert.deepEqual(JSON.parse(find(changes, PATHS.blockSettings).content).off, [
+    `popups/${MOBILEPAY.id}`,
+    'popups/other',
+    'text',
+    'x/mobilepay-2',
+  ]);
+  assert.equal(JSON.parse(find(changes, 'src/data/popups/a.json').content).type, MOBILEPAY.id);
+  assert.equal(JSON.parse(find(changes, 'src/data/popups/a.json').content).title, 'A');
+  assert.equal(find(changes, 'src/data/popups/b.json'), undefined);
+  const cookie = JSON.parse(find(changes, 'src/data/cookie-list/c.json').content);
+  assert.deepEqual(cookie, { name: 'mobilepay', app: MOBILEPAY.id });
+  assert.equal(find(changes, 'src/data/cookie-list/d.json'), undefined);
+  assert.equal(find(changes, PATHS.theme), undefined);
+});
+
+test('an item without a legacy gets the normal update and no delete', () => {
+  const old = [file(`src/themes/${VENUS.id}/old.json`, '{}'), file(`src/themes/${VENUS.id}/theme.json`, '{}')];
+  const changes = moveChanges({ id: VENUS.id }, null, next, old, [file(PATHS.theme, json({ theme: 'venus' }))], PATHS);
+  assert.deepEqual(find(changes, `src/themes/${VENUS.id}/old.json`), {
+    path: `src/themes/${VENUS.id}/old.json`,
+    content: null,
+    oid: 'oid-src/themes/theme_fa395ad84690acbd/old.json',
+  });
+  assert.equal(find(changes, PATHS.theme), undefined);
+  assert.equal(changes.filter((c) => c.content === null).length, 1);
+});
+
+test('a move with a release that adds a cookie changes each cookie-list file once', () => {
+  const old = file('src/data/cookie-list/a.json', json({ name: 'a', app: 'mobilepay' }), 'oid-a');
+  const site = [old];
+  const moved = moveChanges(MOBILEPAY, 'mobilepay', { files: [], record: next.record }, [], site, PATHS);
+  // What the editor's cookieChanges does for the new release on the site after the move: the new cookie is a new file.
+  const after = appliedTo(site, moved);
+  assert.equal(JSON.parse(after[0].text).app, MOBILEPAY.id);
+  const cookies = [
+    { path: 'src/data/cookie-list/b.json', content: json({ name: 'b', app: MOBILEPAY.id }), oid: null },
+    { path: 'src/data/cookie-list/a.json', content: null, oid: after[0].oid },
+  ];
+  const all = mergeChanges(moved, cookies);
+  assert.equal(new Set(all.map((c) => c.path)).size, all.length);
+  assert.deepEqual(find(all, 'src/data/cookie-list/a.json'), { path: 'src/data/cookie-list/a.json', content: null, oid: 'oid-a' });
+  assert.equal(JSON.parse(find(all, 'src/data/cookie-list/b.json').content).app, MOBILEPAY.id);
+  // A cookie that stays: only the rewrite, once, under the new id.
+  const kept = mergeChanges(moved, []);
+  assert.equal(kept.filter((c) => c.path === old.path).length, 1);
+  assert.equal(JSON.parse(find(kept, old.path).content).app, MOBILEPAY.id);
+});
+
+test('installedHere: counts a new id, or a legacy copy from the store, as installed', () => {
+  const entry = { id: 'app_ae0b5e17636668bc', legacy: 'mobilepay' };
+  assert.equal(installedHere(entry, ['app_ae0b5e17636668bc'], []), true);
+  assert.equal(installedHere(entry, ['mobilepay'], [{ id: 'mobilepay', store: {} }]), true);
+  assert.equal(installedHere(entry, ['mobilepay'], [{ id: 'mobilepay' }]), false);
+  assert.equal(installedHere(entry, [], [{ id: 'mobilepay', store: {} }]), false);
+  assert.equal(installedHere({ id: 'app_1' }, ['other'], [{ id: 'other', store: {} }]), false);
+});