@morphemecms/cms 0.5.0 → 0.7.0

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

@@ -9,7 +9,7 @@ export const parts = {
     toolbarButton:
       'A tool in the text’s toolbar: a little smaller, so the bar fits on a phone. With an arrow it opens a menu (the kind of text, when the bar is too narrow).',
     fields:
-      'The theme’s fields with the name on their edge and an explanation below. A choice opens the sheet, or a page of its own with what each choice gives (the arrow points there).',
+      'The theme’s fields with the name on their edge and an explanation below. A choice opens a menu right under the field on a computer, or the sheet on a phone, or a page of its own with what each choice gives (the arrow points there).',
     formField: 'A field that says what is wrong with what was typed, and the number of characters out of the most allowed.',
     fieldGroup: 'Fields that belong together, in a frame with their name on it.',
     shownValue: 'What a field holds, shown without being edited here: with its icon, or gray when it is made elsewhere.',
@@ -27,15 +27,17 @@ export const parts = {
       'The search with the buttons beside it, always in the same order: sort, filter, date, Google, and menu or list. Sort is gray while the pages are shown as the menu.',
     choiceTile: 'One of many icons to tap, in a grid.',
     group:
-      'Rows in a frame under a small heading: the start screen and the lists. The icon looks the same everywhere: gray, and in the accent color for the open part in the sidebar. A small picture or a sample of one of the theme’s tokens can stand before the name instead. A number may stand at the right. A row can also do something, in the accent color; delete, in the middle; or only be shown, with no color under the mouse and perhaps gray.',
+      'Rows in a frame under a small heading: the start screen and the lists. The icon looks the same everywhere: gray, and in the accent color for the open part in the menu. A small picture or a sample of one of the theme’s values can stand before the name instead. A number may stand at the right. A row can also do something, in the accent color; delete, in the middle; or only be shown, with no color under the mouse and perhaps gray.',
     checkList:
       'Things that were checked: a score from 0 to 100 in a ring, a red triangle by what could be better (which folds out with how), and a green dot by what is fine.',
     scoreRing:
       'A score from 0 to 100 in a small ring at the start of a row, in the colors of the ring of checked things: green from 90, orange from 50, else red.',
+    menuRow:
+      'A setting in the same row as a switch: its name and what it does at the left, and at the right the chosen one in a small box with an arrow. It opens the choices under it (a sheet on a phone), the chosen one checked. Gray while the setting cannot be changed.',
     unfold:
       'At the right of a row: how many rows are under it, and the arrow that shows them. The rows under it are indented along a line.',
     sheet:
-      'The sheet from the bottom (a dialog on a computer) with choices or fields. An icon or a row, for example, Language, opens it with the choices, and + (NewChoice) with the kinds something new can be, for example, a pop-up. The choices can stand under small headings.',
+      'The sheet from the bottom (a dialog on a computer) with choices or fields. An icon or a row, for example, Language, opens it with the choices, and + opens it with the kinds something new can be, for example, a pop-up. The choices can stand under small headings.',
     preview:
       'The preview of a block in a dashed frame. It can be used as on the site, for example, folded out, but a link in it goes nowhere.',
     colorSwatches: 'A set of colors in small rounds side by side, for example, 4 of the website’s colors.',
@@ -50,9 +52,15 @@ export const parts = {
       'The sheet with a whole page in it (the preview), as tall as the screen. The page is in a frame, as wide as a phone or a computer, and nothing in it runs.',
     foldSection:
       'A section of a long form (a page, a blog post) that folds in and out by its heading. Only the first is open from the start.',
-    sharePreview: "A link to a page as it looks when it is shared: the picture, the site's domain, the title, and the description.",
+    sharePreview: "A link to a page as it looks when it is shared: the picture, the website's domain, the title, and the description.",
     formColumns:
       'A form on a wide screen: the text at the left, the status and the other fields on cards at the right. On a smaller screen below each other. The heading over the fields is always the same.',
+    mainDrawer:
+      'The editor’s menu: the website’s parts in sections, the open one marked. On a wide screen it stands beside the content, and the menu button at the start of the top bar shows and hides it; on a smaller screen it opens over the page and closes on a choice, a tap beside it, Escape or a swipe. Shown here opening over the page.',
+    editorFooter:
+      'The line at the bottom of every screen, under the content, with a link to the licenses of what the website and the editor are made with.',
+    sectionList:
+      'The sections of a long form as a list, with the one in view selected. On a large screen it is in a pane at the end of the form, shown and hidden by the button at the end of the top bar; on a smaller screen the button opens it in a side sheet, which closes when you choose a section.',
   },
   /** Over the parts: the search, and the groups to show one of (as Material 3 sorts its components). */
   filter: {
@@ -141,7 +149,7 @@ export const parts = {
       `The fields of the forms and settings, one of each type with the choices it can have. The fields are in ${file} and are built of the parts above. Nothing here is saved.`,
     use: {
       string:
-        'One line of text. It can have to be filled in, have at most a number of characters, have a text that is used when the field is empty, have to have a certain form, be an address, a number in pairs, a phone number, or words as chips (one or more), or have a link to where it is edited.',
+        'One line of text. It can be required, have a length limit, show a text while it is empty, need a certain form, hold an address, a number in pairs, a phone number, or words as chips, or link to where it is edited.',
       text: 'Text over several lines, with the same choices as one line.',
       markdown: 'Text with formatting, in the same editor as the pages.',
       number: 'A number.',
@@ -150,7 +158,7 @@ export const parts = {
       select:
         'One of several choices: in the sheet from the bottom, side by side, as icons, or only shown. A choice can have its own explanation, and a field can be there only with one of the choices.',
       relation:
-        'A page, a post, or a tag from the site’s lists. A page is picked with the page picker, the fixed pages too; several picked are chips.',
+        'A page, a post, or a tag from the website’s lists. A page is picked with the page picker, the fixed pages too; several picked are chips.',
       image: 'A picture from Files or a new one.',
       readonly: 'Shown, but not edited here.',
       object: 'A group of fields in a frame.',
@@ -164,7 +172,7 @@ export const parts = {
     heading: 'Heading',
     headingHint: 'At most about 60 characters.',
     underName: 'Text (under the name)',
-    underNameHint: 'If the field is empty, the site’s name is used.',
+    underNameHint: 'If the field is empty, the website’s name is used.',
     email: 'Email',
     emailForm: 'Write a whole email address',
     cvr: 'CVR number',
@@ -182,9 +190,9 @@ export const parts = {
     shown: 'Shown',
     hidden: 'Hidden',
     listText: 'Text (in the list)',
-    listTextHint: 'Only there with the placement In the list.',
-    publishedHint: 'The page is on the site.',
-    draftHint: 'The page isn’t on the site.',
+    listTextHint: 'Shown only with the placement In the list.',
+    publishedHint: 'The page is on the website.',
+    draftHint: 'The page isn’t on the website.',
     look: 'Look',
     kind: 'Kind',
     page: 'Page',
@@ -384,7 +392,7 @@ export const parts = {
     fieldSupporting: 'You only get an email when there’s news.',
     fieldError: 'Write an email address.',
     fieldPlaceholder: 'Your email',
-    fieldSearch: 'Search the site',
+    fieldSearch: 'Search the website',
     fieldClear: 'Clear',
     fieldPhone: 'Phone',
     fieldPrefix: '+45',
@@ -401,7 +409,7 @@ export const parts = {
     fieldReadOnly: 'Customer number',
     fieldReadOnlyValue: '10 482',
     checkboxLabel: 'Statistics',
-    checkboxSupporting: 'How the site is used.',
+    checkboxSupporting: 'How the website is used.',
     checkboxParent: 'All cookies',
     checkboxError: 'Check the box to continue.',
     /** The theme's chips (Chip), a group of their own under "UI components". */
@@ -427,10 +435,16 @@ export const parts = {
         'Cards or pictures in a row that are swiped sideways, with dots under them: all the same size, in several sizes, one large (from the start or in the middle) and one at a time.',
       dialogKinds: { basic: 'Basic', icon: 'With icon, list, and divider', container: 'Only the box', fullScreen: 'Full screen' },
       sheetKinds: {
-        modal: 'Modal',
+        modal: 'Modal, a dialog on a computer',
+        modalSideSheet: 'Modal, a side sheet on a computer',
+        modalSheet: 'Modal, stays a sheet on a computer',
         collapsed: 'Standard, collapsed',
         halfExpanded: 'Standard, half expanded',
         expanded: 'Standard, expanded',
+        fixed: 'Standard, fixed, no handle or headline',
+        resizeButton: 'Standard, resize button instead of the handle',
+        collapseButton: 'Standard, collapse button at full height',
+        wideSheet: 'Standard, stays a sheet on a computer, while the others become a side sheet there',
       },
       layouts: {
         uncontained: 'All the same size',
@@ -446,11 +460,28 @@ export const parts = {
       save: 'Save',
       page: 'The page behind the sheet can still be used.',
       dragHandle: 'Expand or collapse the sheet',
+      openSheet: 'Open the modal sheet',
+      openSideSheet: 'Open the modal sheet as a side sheet',
+      openWideSheet: 'Open the modal sheet with margins',
+      paragraphs: [
+        'On a phone the sheet opens at half the height of the screen.',
+        'Pull the handle, the heading or this text up to make it as high as the screen allows.',
+        'Once it is at full height, this text scrolls.',
+        'Swipe down from the top of this text, or pull the handle down, to close it.',
+        'A fast flick up or down goes straight to full height or closes it.',
+        'A short pull down and let go returns it to half height.',
+        'On a computer the sheet is a dialog, a side sheet or a sheet with margins, as its example says.',
+        'This text only makes the sheet long enough to need scrolling.',
+      ],
       picture: (n: number) => `Picture ${n}`,
       showPicture: (n: number) => `Show picture ${n}`,
       heading: 'Heading',
       text: 'A short text about what the box is about.',
       sheetText: 'A short text under the heading',
+      sheetPeek: 'A line that shows while the sheet is collapsed',
+      sheetLabel: 'Details',
+      resize: 'Expand or collapse the sheet',
+      collapse: 'Collapse the sheet',
       footer: 'A line at the bottom',
       close: 'Close',
       roleDescription: 'carousel',
@@ -462,7 +493,7 @@ export const parts = {
     navigation: {
       title: 'Navigation',
       topAppBar:
-        "The bar at the top of a page: only the surface with the site's own header, or the button at the start, the headline, and the buttons at the end, small, medium, or large, or with the search field. It gets another surface when the page scrolls under it.",
+        "The bar at the top of a page: only the surface with the website's own header, or the button at the start, the headline, and the buttons at the end, small, medium, or large, or with the search field. It gets another surface when the page scrolls under it.",
       stuck: 'When the page scrolls',
       /** The top app bar's kinds and what is in them (TopAppBar.tsx). */
       appBar: {
@@ -472,9 +503,9 @@ export const parts = {
         long: 'A long headline that may run over several lines',
         collapsed: 'collapsed',
         back: 'Back',
-        search: 'Search the site',
+        search: 'Search the website',
         clear: 'Clear',
-        empty: 'Nothing fits the search.',
+        empty: 'Nothing fits the search',
         favourite: 'Save',
         profile: 'Profile',
       },
@@ -502,7 +533,13 @@ export const parts = {
         error: 'Choose a treatment.',
         kinds: { outlined: 'Outlined', filled: 'Filled' },
       },
-      navigationDrawer: 'The menu that opens over the page on a phone: the pages, one with sub-pages unfolded, the open one marked.',
+      navigationDrawer:
+        'The menu that opens over the page on a phone: the pages, one with sub-pages unfolded, the open one marked. The standard one stands beside the page, with sections, icons and counts, and in two levels: sections with an arrow, and a list under a back row.',
+      /** The standard drawer's made-up sections and items (NavigationParts.tsx). */
+      drawerSections: ['Mail', 'Account'],
+      drawerItems: ['Inbox', 'Messages', 'Favorites', 'Trash', 'Profile'],
+      /** The back row of the drawer's second level (NavigationParts.tsx). */
+      drawerBack: ['Main menu'],
       tabs: 'Tabs in a row: only the text, as under the bar, or primary with an icon and secondary, with a line under the open one. To swipe sideways or across the whole width.',
       /** The tabs' made-up views (Tabs.tsx). */
       views: ['Overview', 'Prices', 'Reviews', 'Contact', 'Map', 'Videos'],
@@ -556,6 +593,8 @@ export const parts = {
     selection: {
       title: 'Switches, choices and side sheets',
       switch: 'Turns something on or off, with its name before it: off, on, with icons in the handle, and gray when it can’t be changed.',
+      settingRow:
+        'A setting on one line: its name and what it does at the start, and what sets it at the end (a switch, a dropdown button).',
       radioButton: 'One of a few choices in a group under its name, maybe with a line under it: chosen and gray when it can’t be chosen.',
       slider:
         'Chooses a number by dragging: freely, in steps with dots, from the middle, a range with 2 handles and with the number over the handle, in 5 sizes, with an icon and vertical.',
@@ -605,12 +644,12 @@ export const parts = {
       alone: 'Alone',
       contained: 'In a container',
       loading: 'Loading…',
-      uploading: 'Uploading',
+      uploading: 'Uploading…',
       percent: (v: number) => `${Math.round(v * 100)}%`,
       indeterminate: 'Without a value',
       shapes: { flat: 'Flat', wavy: 'Wavy' },
       thick: 'Thick',
-      sent: 'The message has been sent.',
+      sent: 'The message has been sent',
       booked: 'Your time is booked. You’ll get a confirmation by email shortly.',
       undo: 'Undo',
       seeBooking: 'See the booking',
@@ -640,10 +679,10 @@ export const parts = {
       sections: ['Start', 'You'],
       menu: 'Change width',
       compose: 'Write',
-      searchLabel: 'Search the site',
+      searchLabel: 'Search the website',
       back: 'Back',
       clear: 'Clear',
-      empty: 'Nothing fits the search.',
+      empty: 'Nothing fits the search',
       query: 'cou',
       results: [
         { headline: 'Prices', supporting: 'Searched recently' },

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

@@ -4,12 +4,11 @@ export const preview = {
   /** The button, the icon in the top bar, and the sheet. */
   button: 'Preview',
   title: 'Preview',
-  /** How wide the page is shown. */
-  device: 'Show as',
-  phone: 'Phone',
-  computer: 'Computer',
-  making: 'Making the preview…',
+  /** How wide the page is shown: Material 3's window sizes, each at its narrowest. */
+  size: 'Window size',
+  sizes: { compact: 'Compact', medium: 'Medium', expanded: 'Expanded', large: 'Large', extraLarge: 'Extra-large' },
+  making: 'Loading the preview…',
   failed: (error: string) => `Couldn’t create the preview: ${error}`,
   notHere: 'That page can’t be previewed',
-  pageNotLoaded: (status: number) => `The page answered ${status}`,
+  pageNotLoaded: (status: number) => `The page couldn’t be loaded, error ${status}`,
 };

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

@@ -26,13 +26,13 @@ export const redirects = {
   pageFilter: 'Show by page',
   /** Over the posts among its choices. */
   postsGroup: 'Blog posts',
-  loading: 'Loading the redirects',
+  loading: 'Loading the redirects…',
   /** None, or none matching the search. */
   none: (query: string) => `No redirects${query ? ` with "${query}"` : ''}`,
   from: 'From',
   fromHint: 'For example, /old-page/.',
   to: 'To',
-  toHint: 'For example, /about-us/, or / for the home page.',
+  toHint: 'For example, /about/, or / for the home page.',
   /** Where it sends to; `noPage`: an address of the site no page in the editor has. */
   sendsTo: (name: string, noPage: boolean) => `Goes to ${name}${noPage ? ', which isn’t a page in the editor' : ''}.`,
   deleteRedirect: 'Delete redirect',
@@ -42,7 +42,7 @@ export const redirects = {
     title: 'Not found',
     intro: 'Addresses visitors tried to open that don’t exist.',
     searchLabel: 'Search the addresses',
-    loading: 'Loading the addresses',
+    loading: 'Loading the addresses…',
     notLoaded: (error: string) => `Couldn’t load the addresses that don’t exist: ${error}`,
     /** The site does not keep them (yet). */
     notKept: 'The website doesn’t yet record addresses that don’t exist',

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

@@ -10,7 +10,7 @@ export const seo = {
   sorts: { low: 'Lowest first', high: 'Highest first', az: 'A–Z', za: 'Z–A' },
   /** The ring, read aloud. */
   scoreLabel: (score: number) => `SEO rating ${score} of 100`,
-  /** The filters in the funnel: by the colour of the rating, by whether a primary keyword is filled in, and by kind. */
+  /** The filters in the funnel: by the color of the rating, by whether a primary keyword is filled in, and by kind. */
   ratingFilter: 'Rating',
   allRatings: 'All ratings',
   ratings: { good: 'Good (90–100)', average: 'Average (50–89)', bad: 'Poor (0–49)' },

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

@@ -26,6 +26,9 @@ export const text = {
   color: 'Color',
   colors: { accent: 'Accent color', muted: 'Muted text' },
   noColor: 'No color',
+  /** The button for the colour of a section (an H2 and what follows it), and the choices in its menu (packages/editor/lib/section-marker.mjs). */
+  sectionColor: 'Section color',
+  sectionColors: { none: 'None', surface: 'Surface', tint: 'Tint', accent: 'Accent' },
   /** The sheet of a link (LinkSheet.tsx). */
   linkTo: 'The link goes to',
   linkPage: 'Page',

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

@@ -16,25 +16,25 @@ export const theme = {
   lightTheme: 'Light theme',
   tags: 'Tags',
   allPosts: 'All',
-  noPosts: 'There are no posts here yet.',
+  noPosts: 'No posts here yet',
   seeAllPosts: 'See all posts',
   seeAll: 'See all',
   blog: 'Blog',
   relatedPosts: 'Related posts',
   readingTime: (minutes: number) => `${minutes} min read`,
-  postsAbout: (count: number, tag: string) => `${count} ${count === 1 ? 'post' : 'posts'} about ${tag}.`,
+  postsAbout: (count: number, tag: string) => `${count} ${count === 1 ? 'post' : 'posts'} about ${tag}`,
   notFound: 'Page not found',
   didYouMean: 'Did you mean',
   newPages: 'New pages',
   newPagesDescription: 'New versions of the pages, for review.',
   newPagesIntro:
-    'New versions of the pages next to the current ones, for review. Google does not see them. When a page is approved, the new text moves to the current page’s address.',
+    'New versions of the pages next to the current ones, for review. Google doesn’t see them. When you approve a page, its new text goes live at the current page’s address.',
   newVersion: 'New version',
-  newPage: 'New page, does not exist today',
+  newPage: 'New page that doesn’t exist yet',
   currentPage: (title: string) => `Current: ${title}`,
   newPosts: 'New blog posts',
-  newPostsIntro: 'Hidden until they are approved: they are not on the blog, and Google does not see them.',
-  reviewNotice: 'New version for review. Google does not see it.',
+  newPostsIntro: 'Hidden until you approve them. They aren’t on the blog, and Google doesn’t see them.',
+  reviewNotice: 'New version for review. Google doesn’t see it.',
   seeCurrentPage: 'See the current page',
   seeChanges: 'See what has changed',
   allNewPages: 'All new pages',

package/src/icon.tsx

@@ -1,28 +1,53 @@
 // Every icon the site draws, on the site and in the editor alike, by its name: Phosphor's (regular, and a filled one as
-// `<name>-fill`), which the site's build puts the theme's own in place of (its icons/<name>.svg, else the icon pack in
-// use's, packages/editor/site/iconPacks.mjs: themePlugin in packages/editor/site/theme.mjs, which answers the imports below with them). The names are Phosphor's, as
-// the content stores them (a card's `icon: certificate`), so a theme without one still draws it.
+// `<name>-fill`), which the site's build puts the theme's own in place of (themePlugin, packages/editor/site/theme.mjs), else
+// a backup from Material Symbols (Outlined) by its Material name (`drag_indicator`, marked data-icon-fallback), else MISSING.
+// Exposes Svg, AnyIcon, Icon, Glyph, SvgFile, MISSING, iconFile, iconNames; uses lib/materialIcon.mjs (the order), materialIcons.ts (lazy set).
+//
+// The names are Phosphor's, as the content stores them (a card's `icon: certificate`), so a theme without one still draws it.
 // Phosphor's here are those the site draws: the blocks' (src/themes/<theme>/blocks/, src/apps/<app>/blocks/), the
 // theme's parts' (Icon.astro, MobileMenu.tsx …) and those to pick from (iconNames, and `icons` in collections.ts,
-// shown as icons by fields.tsx). A name that is not among them is drawn as MISSING, the question mark, marked with
+// shown as icons by fields.tsx). A name that is not among them is drawn from Material Symbols when it has one (the
+// server render has the whole set at once, virtual:material-symbols-ssr; in the browser it is one lazy chunk, loaded the
+// first time one is drawn); only a name Material Symbols lacks too is MISSING, the question mark, marked with
 // data-icon-missing (its name), which check:screens finds on the built site's pages and the editor's screens.
 import { cloneElement, isValidElement, useEffect, useState, type ReactElement } from 'react';
+import { materialName, resolveIcon } from '../lib/materialIcon.mjs';
 import { svgParts } from '../lib/svg.mjs';
+import ssrMaterial from 'virtual:material-symbols-ssr';
+
+const MATERIAL = '/node_modules/@material-symbols/svg-400/outlined/';
+/** Material Symbols' viewBox, every file's. */
+const MATERIAL_VIEWBOX = '0 -960 960 960';
+// Material Symbols' files by their path: at once on the server render, else after the lazy chunk is loaded.
+let materialSet: Record<string, string> | undefined = import.meta.env.SSR ? ssrMaterial : undefined;
+let materialLoading: Promise<void> | undefined;
+const loadMaterial = () =>
+  (materialLoading ??= import('./materialIcons').then((m) => {
+    materialSet = m.materialIcons;
+  }));
+/** A Material Symbols file by `<name>` or `<name>-fill` (a Material name); undefined until the set is loaded. */
+const materialLookup = () => (materialSet ? (key: string) => materialSet?.[`${MATERIAL}${key}.svg`] : undefined);
+/** Draws again when the lazy set has loaded, after it is asked for (`wanted`). */
+function useMaterialLoaded(wanted: boolean) {
+  const [, redraw] = useState(0);
+  useEffect(() => {
+    if (wanted && !materialSet) loadMaterial().then(() => redraw((n) => n + 1));
+  }, [wanted]);
+}
 
 const PHOSPHOR = '/node_modules/@phosphor-icons/core/assets/';
 const regular = import.meta.glob<string>(
-  '/node_modules/@phosphor-icons/core/assets/regular/{arrow-left,arrow-right,arrow-square-out,arrow-up-right,bank,bicycle,book-open,book-open-text,bus,calendar-blank,car,caret-down,caret-left,caret-right,certificate,chats,check,clock,coffee,cookie,copy,device-mobile,door-open,download-simple,envelope-simple,eye,eye-slash,flower-lotus,graduation-cap,hand-heart,handshake,heart,house,info,keyboard,leaf,lifebuoy,lightbulb,list,magnifying-glass,map-pin,map-trifold,medal,minus,moon,pencil-simple,phone,question,sun,ticket,train,trash,user,users,users-three,video-camera,warning-circle,wheelchair,x}.svg',
+  '/node_modules/@phosphor-icons/core/assets/regular/{arrow-left,arrow-right,arrow-square-out,arrow-up-right,bank,bicycle,book-open,book-open-text,bus,calendar-blank,car,caret-down,caret-left,caret-right,caret-up,certificate,chats,check,clock,coffee,cookie,copy,device-mobile,door-open,download-simple,envelope-simple,eye,eye-slash,flower-lotus,graduation-cap,hand-heart,handshake,heart,house,info,keyboard,leaf,lifebuoy,lightbulb,list,magnifying-glass,map-pin,map-trifold,medal,minus,moon,pencil-simple,phone,question,sun,ticket,train,trash,user,users,users-three,video-camera,warning-circle,wheelchair,x}.svg',
+  { query: '?raw', import: 'default', eager: true },
+);
+// The filled ones ("Video": its play button; the navigation drawer's active item).
+const fills = import.meta.glob<string>(
+  '/node_modules/@phosphor-icons/core/assets/fill/{browser-fill,buildings-fill,certificate-fill,chart-line-up-fill,chats-fill,envelope-simple-fill,file-text-fill,folder-simple-fill,heart-fill,list-checks-fill,magnifying-glass-fill,megaphone-fill,newspaper-fill,paint-brush-broad-fill,play-fill,puzzle-piece-fill,shield-check-fill,square-half-bottom-fill,squares-four-fill,storefront-fill,tag-fill,toggle-right-fill,trash-fill,user-fill,wrench-fill}.svg',
   { query: '?raw', import: 'default', eager: true },
 );
-// The filled ones ("Video": its play button).
-const fills = import.meta.glob<string>('/node_modules/@phosphor-icons/core/assets/fill/{play-fill}.svg', {
-  query: '?raw',
-  import: 'default',
-  eager: true,
-});
 
-/** The icon drawn for one that is not found (a name the site does not draw, one Phosphor does not have): a question
- * mark, the icon pack's as the others. */
+/** The icon drawn for one that is not found (a name the site does not draw, one Material Symbols does not have either): a
+ * question mark, the icon pack's as the others. */
 export const MISSING = 'question';
 
 /** An icon's SVG file by its name: the theme's, else Phosphor's; undefined for one the site does not draw. */
@@ -32,7 +57,8 @@ export function iconFile(name: string, weight?: 'fill'): string | undefined {
 
 /** An icon by name as the site and the editor draw it (the theme's View.tsx and its parts, Icon.astro, the editor's
  * fields): the bare <svg> in its file's viewBox, at the size given, in the text's colour, hidden from screen readers
- * (or named by `label`). A filled one the site does not draw is the regular one, and an icon it does not draw MISSING. */
+ * (or named by `label`). A filled one the site does not draw is the regular one; an icon it does not draw is Material
+ * Symbols' by its Material name (marked data-icon-fallback), and MISSING when it has none. */
 export function Svg({
   name,
   size = 20,
@@ -46,27 +72,56 @@ export function Svg({
   className?: string;
   label?: string;
 }) {
-  const file = iconFile(name, weight) ?? iconFile(name);
-  return <Drawn file={file} missing={file ? undefined : name} size={size} className={className} label={label} />;
+  const found = resolveIcon(name, weight, { list: iconFile, material: materialLookup() });
+  useMaterialLoaded(!!found.pending);
+  return (
+    <Drawn
+      file={found.file}
+      fallback={found.fallback}
+      pending={found.pending}
+      missing={found.file || found.pending ? undefined : name}
+      size={size}
+      className={className}
+      label={label}
+    />
+  );
 }
 
 /** An icon by its name of all Phosphor's, not only those the site draws (an app's in the app store, store.ts): one the
  * site draws at once, another from all Phosphor's (allIcons.ts, loaded the first time one is drawn), the theme's in
- * their place as Svg's. Nothing while it loads, and MISSING for a name Phosphor does not have. */
+ * their place as Svg's. Then Material Symbols' by its Material name (marked data-icon-fallback). Nothing while it loads, and
+ * MISSING for a name neither has. */
 export function AnyIcon({ name, size = 20 }: { name: string; size?: number }) {
-  // null: not found.
-  const [file, setFile] = useState<string | null | undefined>(() => iconFile(name));
+  // file null: not found; fallback: the file is Material Symbols'.
+  const [found, setFound] = useState<{ file: string | null; fallback?: boolean } | undefined>(() => {
+    const file = iconFile(name);
+    return file ? { file } : undefined;
+  });
   useEffect(() => {
-    if (iconFile(name)) return setFile(iconFile(name));
-    setFile(undefined);
+    const own = iconFile(name);
+    if (own) return setFound({ file: own });
+    setFound(undefined);
     let on = true;
-    import('./allIcons').then((m) => on && setFile(m.allIcons[`${PHOSPHOR}regular/${name}.svg`] ?? null));
+    (async () => {
+      const phosphor = (await import('./allIcons')).allIcons[`${PHOSPHOR}regular/${name}.svg`];
+      if (phosphor) return on && setFound({ file: phosphor });
+      if (materialName(name)) await loadMaterial();
+      const backup = resolveIcon(name, undefined, { list: () => undefined, material: materialLookup() });
+      if (on) setFound(backup.file ? { file: backup.file, fallback: true } : { file: null });
+    })();
     return () => {
       on = false;
     };
   }, [name]);
-  if (file === undefined) return null;
-  return <Drawn file={file ?? undefined} missing={file ? undefined : name} size={size} />;
+  if (found === undefined) return null;
+  return (
+    <Drawn
+      file={found.file ?? undefined}
+      fallback={found.fallback ? name : undefined}
+      missing={found.file ? undefined : name}
+      size={size}
+    />
+  );
 }
 
 /** An icon's SVG file drawn as it is, as Svg draws one, not the theme's in its place: an icon pack's own, to show what the
@@ -75,22 +130,28 @@ export function SvgFile({ file, size = 20 }: { file: string; size?: number }) {
   return <Drawn file={file} size={size} />;
 }
 
-/** An SVG file drawn; MISSING in its place when there is none, or it is not an SVG (`missing`: the name asked for). */
+/** An SVG file drawn; MISSING in its place when there is none, or it is not an SVG (`missing`: the name asked for).
+ * `fallback`: the name asked for, when the file is Material Symbols' (data-icon-fallback). `pending`: a Material icon
+ * not loaded yet: the empty <svg> (the server render's own content stays while the page hydrates). */
 function Drawn({
   file,
+  fallback,
+  pending,
   missing,
   size,
   className,
   label,
 }: {
   file: string | undefined;
+  fallback?: string;
+  pending?: boolean;
   missing?: string;
   size: number;
   className?: string;
   label?: string;
 }) {
   const parts = svgParts(file);
-  const shown = parts ?? svgParts(iconFile(MISSING));
+  const shown = pending ? { viewBox: MATERIAL_VIEWBOX, inner: '' } : (parts ?? svgParts(iconFile(MISSING)));
   if (!shown) return null;
   return (
     <svg
@@ -98,7 +159,9 @@ function Drawn({
       height={size}
       fill="currentColor"
       {...(label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true })}
-      {...(parts ? {} : { 'data-icon-missing': missing ?? '' })}
+      {...(parts || pending ? {} : { 'data-icon-missing': missing ?? '' })}
+      {...(parts && fallback !== undefined ? { 'data-icon-fallback': fallback } : {})}
+      suppressHydrationWarning={pending}
       className={className}
       xmlns="http://www.w3.org/2000/svg"
       viewBox={shown.viewBox}

package/src/licenseData.test.mjs

@@ -0,0 +1,28 @@
+// Tests for splitCms in src/licenseData.ts: the CMS's own licence is pulled out of the works the editor and the site bring.
+// Run: node --test packages/editor/src/licenseData.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { PACKAGE } from '../lib/cms-version.mjs';
+import { splitCms } from './licenseData.ts';
+
+const work = (id, version = '1.0.0') => ({ id, name: id, version });
+
+test('the CMS is pulled out and the rest keeps its order', () => {
+  const { cms, rest } = splitCms([work('a'), work(PACKAGE), work('b'), work('c')]);
+  assert.equal(cms.id, PACKAGE);
+  assert.deepEqual(
+    rest.map((w) => w.id),
+    ['a', 'b', 'c'],
+  );
+});
+
+test('without the CMS, cms is null and the rest is unchanged', () => {
+  const works = [work('a'), work('b')];
+  const { cms, rest } = splitCms(works);
+  assert.equal(cms, null);
+  assert.deepEqual(rest, works);
+});
+
+test('the CMS keeps its version', () => {
+  assert.equal(splitCms([work(PACKAGE, '0.1.0')]).cms.version, '0.1.0');
+});

package/src/licenseData.ts

@@ -1,7 +1,9 @@
 // The licences of the third-party work the site and the editor are made with ("Licenser" under "Indstillinger",
 // Licenses.tsx), as the build finds them (/editor/licenses.json, licensesIntegration in packages/editor/lib/licenses.mjs),
 // what an app (defineApp) and a theme (theme.json) declare (their own licence and the third-party work they bring), and
-// what the store's catalog has of them (scripts/store-release.mjs, storeLicenses).
+// what the store's catalog has of them (scripts/store-release.mjs, storeLicenses). Also splits the CMS's own licence out
+// of the works the editor and the site bring (splitCms), to be shown first. Depends on PACKAGE (lib/cms-version.mjs).
+import { PACKAGE } from '../lib/cms-version.mjs';
 
 /** What a third-party work is to the site: a font, icons, code (a library, also styles) or pictures. */
 export type LicenseKind = 'font' | 'icons' | 'library' | 'image';
@@ -77,3 +79,12 @@ export function loadLicenses(): Promise<LicensesFile | null> {
     .catch(() => null);
   return loaded;
 }
+
+/** The works the editor and the site bring, split in the CMS's own licence (the work with the CMS's package name, none
+ * when the build did not find it) and the rest, which keeps its order. */
+export function splitCms<W extends Pick<LicensedWork, 'id'>>(works: W[]): { cms: W | null; rest: W[] } {
+  return { cms: works.find((w) => w.id === PACKAGE) ?? null, rest: works.filter((w) => w.id !== PACKAGE) };
+}
+
+/** The CMS's name in its own licence row ("Morpheme CMS itself"); a product name, so it is not translated. */
+export const CMS_NAME = 'Morpheme CMS';

package/src/markdown.d.mts

@@ -8,5 +8,7 @@ export const HTML: "html";
 export const siteBlockSchema: import("@milkdown/kit/utils").$NodeSchema<"siteBlock">;
 /** @type {import('@milkdown/kit/utils').$MarkSchema<'textColor'>} */
 export const textColorSchema: import("@milkdown/kit/utils").$MarkSchema<"textColor">;
+/** @type {import('@milkdown/kit/utils').$NodeSchema<'heading'>} */
+export const headingWithSection: import("@milkdown/kit/utils").$NodeSchema<"heading">;
 /** @type {import('@milkdown/kit/utils').$Prose} */
 export const spacing: import("@milkdown/kit/utils").$Prose;