@morphemecms/cms 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @morphemecms/cms
 
+## 0.8.0
+
+### Minor Changes
+
+- b201ffd: Material is now every theme's fallback: a theme imports `@morphemecms/cms/theme/styles/global.css`, anything it does not style is Material's, and its own rules always win.
+- 3c68cc9: Richer blog post page: author role, tags and share buttons in the header, a lead paragraph, and related-post cards; new Company › Social media settings.
+
+### Patch Changes
+
+- 0358c3e: Show a page or post form's sections as an "on this page" list on a card at the end of the form, on large screens, and keep the editor's content column centred on the window.
+- 1323fa8: Wide buttons fill the width only on phones; the save bar's buttons sit at the end on larger screens.
+
+## 0.7.1
+
+### Patch Changes
+
+- 36e2e3b: Fix the Cloudflare build stopping with "Too many open files" by serving all Material Symbols icons as one module.
+
 ## 0.7.0
 
 ### Minor Changes

package/defaults/collections.ts

@@ -174,6 +174,62 @@ export const contactFields: Field[] = [
   },
 ];
 
+// The social media (src/data/social.json, a part of its own under "Virksomheden", company.ts): the site's profiles, and
+// which share buttons a post shows. A switch that is not in the file is on (company.ts gives the form that default).
+// A profile address: empty, or one that begins with https://.
+const httpsAddress: [string, string] = ['^$|^https://\\S+$', 'Skriv en adresse, der begynder med https://'];
+
+export const socialFields: Field[] = [
+  {
+    name: 'facebook',
+    label: 'Facebook',
+    type: 'string',
+    hint: 'Adressen på sitets profil. Vises i Googles data om virksomheden.',
+    pattern: httpsAddress,
+  },
+  {
+    name: 'instagram',
+    label: 'Instagram',
+    type: 'string',
+    pattern: httpsAddress,
+  },
+  {
+    name: 'linkedin',
+    label: 'LinkedIn',
+    type: 'string',
+    pattern: httpsAddress,
+  },
+  {
+    name: 'x',
+    label: 'X',
+    type: 'string',
+    pattern: httpsAddress,
+  },
+  {
+    name: 'youtube',
+    label: 'YouTube',
+    type: 'string',
+    pattern: httpsAddress,
+  },
+  {
+    name: 'tiktok',
+    label: 'TikTok',
+    type: 'string',
+    pattern: httpsAddress,
+  },
+  {
+    name: 'pinterest',
+    label: 'Pinterest',
+    type: 'string',
+    pattern: httpsAddress,
+  },
+  { name: 'shareFacebook', label: 'Del på Facebook', type: 'boolean' },
+  { name: 'shareX', label: 'Del på X', type: 'boolean' },
+  { name: 'shareLinkedin', label: 'Del på LinkedIn', type: 'boolean' },
+  { name: 'sharePinterest', label: 'Del på Pinterest', type: 'boolean', hint: 'Vises kun, når indlægget har et billede.' },
+  { name: 'shareCopyLink', label: 'Kopiér link', type: 'boolean' },
+];
+
 // The bank details, a part of its own under "Betaling" (company.ts, src/data/payment.json).
 export const bankFields: Field[] = [
   { name: 'bank', label: 'Bank', type: 'string', required: true },

package/defaults/company.ts

@@ -1,15 +1,24 @@
 // "Virksomheden": the business, in parts, each a screen of its own (CompanyForm.tsx): its phone, e-mail and address
 // (src/data/contact.json) and its bank details (src/data/payment.json, under "Betaling", where a site may add its
 // other ways to pay, and where the settings of the apps installed that are a way to pay come after, as MobilePay's),
-// used all over the site. The logo and the icon are under "Udseende" (BrandForm.tsx); the link to
-// the calendar in Calendly is the app Calendly's (src/apps/calendly/).
-import { AddressBook, Bank, CreditCard } from '@phosphor-icons/react';
+// used all over the site; and its social media (src/data/social.json): the profiles and the post's share buttons.
+// The logo and the icon are under "Udseende" (BrandForm.tsx); the link to the calendar in Calendly is the app Calendly's (src/apps/calendly/).
+import { AddressBook, Bank, CreditCard, ShareNetwork } from '@phosphor-icons/react';
 import type { Part } from '../src/schema';
-import { bankFields, contactFields } from '@site/collections';
+import { bankFields, contactFields, socialFields } from '@site/collections';
 
 /** The parts of "Virksomheden", in their order, at #virksomheden/<id> ("Betaling"'s at #virksomheden/betaling/<id>). */
 export const companyParts: Part[] = [
   { id: 'kontakt', label: 'Kontakt', icon: AddressBook, file: 'src/data/contact.json', fields: contactFields },
+  {
+    id: 'sociale-medier',
+    label: 'Sociale medier',
+    icon: ShareNetwork,
+    file: 'src/data/social.json',
+    fields: socialFields,
+    // A switch missing from the file (or a file not there yet) is on; the form would show it off without this.
+    defaults: { shareFacebook: true, shareX: true, shareLinkedin: true, sharePinterest: true, shareCopyLink: true },
+  },
   {
     id: 'betaling',
     label: 'Betaling',

package/defaults/texts.ts

@@ -290,6 +290,23 @@ export const texts: Record<string, Record<string, string>> = {
     'Knaptekst (book)': 'Button text (book)',
     'Knaptekst (ring)': 'Button text (call)',
     'Telefonnummeret vises efter teksten.': 'The phone number is shown after the text.',
+    'Sociale medier': 'Social media',
+    'Adressen på sitets profil. Vises i Googles data om virksomheden.':
+      "The address of the site's profile. Shown in Google's data about the business.",
+    'Skriv en adresse, der begynder med https://': 'Write an address that starts with https://',
+    Facebook: 'Facebook',
+    Instagram: 'Instagram',
+    LinkedIn: 'LinkedIn',
+    X: 'X',
+    YouTube: 'YouTube',
+    TikTok: 'TikTok',
+    Pinterest: 'Pinterest',
+    'Del på Facebook': 'Share on Facebook',
+    'Del på X': 'Share on X',
+    'Del på LinkedIn': 'Share on LinkedIn',
+    'Del på Pinterest': 'Share on Pinterest',
+    'Vises kun, når indlægget har et billede.': 'Shown only when the post has a picture.',
+    'Kopiér link': 'Copy link',
     Blokke: 'Blocks',
     Blokskabeloner: 'Block templates',
     Knapper: 'Buttons',

package/icons/lucide/LICENSE-phosphor

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/icons/lucide/facebook-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" /></svg>

package/icons/lucide/linkedin-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" /></svg>

package/icons/lucide/pack.json

@@ -15,8 +15,23 @@
       "source": "@mdi/svg@7.4.47",
       "licenseFile": "LICENSE-material-design-icons",
       "icons": [
+        "facebook-logo",
         "github-logo",
-        "google-logo"
+        "google-logo",
+        "linkedin-logo",
+        "pinterest-logo"
+      ]
+    },
+    {
+      "name": "Phosphor",
+      "author": "Phosphor Icons",
+      "license": "MIT",
+      "url": "https://phosphoricons.com",
+      "version": "2.1.1",
+      "source": "@phosphor-icons/core@2.1.1",
+      "licenseFile": "LICENSE-phosphor",
+      "icons": [
+        "x-logo"
       ]
     }
   ]

package/icons/lucide/pinterest-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z" /></svg>

package/icons/lucide/x-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M215,219.85a8,8,0,0,1-7,4.15H160a8,8,0,0,1-6.75-3.71l-40.49-63.63L53.92,221.38a8,8,0,0,1-11.84-10.76l61.77-68L41.25,44.3A8,8,0,0,1,48,32H96a8,8,0,0,1,6.75,3.71l40.49,63.63,58.84-64.72a8,8,0,0,1,11.84,10.76l-61.77,67.95,62.6,98.38A8,8,0,0,1,215,219.85Z"/></svg>

package/icons/material-symbols/LICENSE-phosphor

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/icons/material-symbols/facebook-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" /></svg>

package/icons/material-symbols/linkedin-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" /></svg>

package/icons/material-symbols/pack.json

@@ -18,12 +18,27 @@
         "arrows-in-line-horizontal",
         "arrows-out-line-horizontal",
         "binoculars",
+        "facebook-logo",
         "github-logo",
         "google-logo",
         "hard-drives",
+        "linkedin-logo",
+        "pinterest-logo",
         "scan",
         "swatches"
       ]
+    },
+    {
+      "name": "Phosphor",
+      "author": "Phosphor Icons",
+      "license": "MIT",
+      "url": "https://phosphoricons.com",
+      "version": "2.1.1",
+      "source": "@phosphor-icons/core@2.1.1",
+      "licenseFile": "LICENSE-phosphor",
+      "icons": [
+        "x-logo"
+      ]
     }
   ]
 }

package/icons/material-symbols/pinterest-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z" /></svg>

package/icons/material-symbols/x-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M215,219.85a8,8,0,0,1-7,4.15H160a8,8,0,0,1-6.75-3.71l-40.49-63.63L53.92,221.38a8,8,0,0,1-11.84-10.76l61.77-68L41.25,44.3A8,8,0,0,1,48,32H96a8,8,0,0,1,6.75,3.71l40.49,63.63,58.84-64.72a8,8,0,0,1,11.84,10.76l-61.77,67.95,62.6,98.38A8,8,0,0,1,215,219.85Z"/></svg>

package/icons/phosphor/facebook-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"/></svg>

package/icons/phosphor/linkedin-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z"/></svg>

package/icons/phosphor/pinterest-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,112c0,22.57-7.9,43.2-22.23,58.11C188.39,184,170.25,192,152,192c-17.88,0-29.82-5.86-37.43-12l-10.78,45.82A8,8,0,0,1,96,232a8.24,8.24,0,0,1-1.84-.21,8,8,0,0,1-6-9.62l32-136a8,8,0,0,1,15.58,3.66l-16.9,71.8C122,166,131.3,176,152,176c27.53,0,56-23.94,56-64A72,72,0,1,0,73.63,148a8,8,0,0,1-13.85,8A88,88,0,1,1,224,112Z"/></svg>

package/icons/phosphor/x-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"/></svg>

package/lib/lead.d.mts

@@ -0,0 +1,5 @@
+/** @param {string} html @returns {{ lead: string, rest: string }} */
+export function splitLead(html: string): {
+    lead: string;
+    rest: string;
+};

package/lib/lead.mjs

@@ -0,0 +1,10 @@
+// A blog post's lead: its first paragraph, when its text starts with one (theme/layouts/PostLayout.astro draws it larger,
+// with the featured picture after it; src/pagePreview.tsx does the same in the editor). Exposes splitLead.
+/** @param {string} html @returns {{ lead: string, rest: string }} */
+export function splitLead(html) {
+  const m = /^(?:\s|<!--[\s\S]*?-->)*(<p(?:\s[^>]*)?>([\s\S]*?)<\/p>)/i.exec(html);
+  if (m && m[2].replace(/<[^>]*>/g, '').trim() !== '') {
+    return { lead: m[1], rest: html.slice(m[0].length).trimStart() };
+  }
+  return { lead: '', rest: html };
+}

package/lib/lead.test.mjs

@@ -0,0 +1,65 @@
+// Tests for splitLead: the first text-bearing <p> is the lead; everything else stays in rest.
+// Run with: node --test lib/lead.test.mjs
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { splitLead } from './lead.mjs';
+
+test('a text paragraph first is the lead', () => {
+  assert.deepEqual(splitLead('<p>Hello <a href="/x">you</a>.</p>\n<h2>Next</h2>'), {
+    lead: '<p>Hello <a href="/x">you</a>.</p>',
+    rest: '<h2>Next</h2>',
+  });
+});
+
+test('a heading first gives no lead', () => {
+  assert.deepEqual(splitLead('<h2>Title</h2><p>Text</p>'), { lead: '', rest: '<h2>Title</h2><p>Text</p>' });
+});
+
+test('a picture-only paragraph is no lead', () => {
+  assert.deepEqual(splitLead('<p><img src="/a.webp" alt=""></p><p>Text</p>'), {
+    lead: '',
+    rest: '<p><img src="/a.webp" alt=""></p><p>Text</p>',
+  });
+});
+
+test('a picture element alone is no lead', () => {
+  assert.deepEqual(splitLead('<p> <picture><img src="/a.webp" alt=""></picture> </p><p>T</p>'), {
+    lead: '',
+    rest: '<p> <picture><img src="/a.webp" alt=""></picture> </p><p>T</p>',
+  });
+});
+
+test('a block first gives no lead', () => {
+  assert.deepEqual(splitLead('<div data-block="points" data-props="{}"></div><p>Text</p>'), {
+    lead: '',
+    rest: '<div data-block="points" data-props="{}"></div><p>Text</p>',
+  });
+});
+
+test('leading whitespace is ignored', () => {
+  assert.deepEqual(splitLead('\n  <p>Hi</p><p>More</p>'), { lead: '<p>Hi</p>', rest: '<p>More</p>' });
+});
+
+test('a comment first is ignored', () => {
+  assert.deepEqual(splitLead('<!-- x --><p>Hi</p>'), { lead: '<p>Hi</p>', rest: '' });
+});
+
+test('empty text', () => {
+  assert.deepEqual(splitLead(''), { lead: '', rest: '' });
+});
+
+test('one paragraph only', () => {
+  assert.deepEqual(splitLead('<p>Only</p>'), { lead: '<p>Only</p>', rest: '' });
+});
+
+test('a paragraph with attributes', () => {
+  assert.deepEqual(splitLead('<p class="x">Hi</p><p>B</p>'), { lead: '<p class="x">Hi</p>', rest: '<p>B</p>' });
+});
+
+test('a list first gives no lead', () => {
+  assert.deepEqual(splitLead('<ul><li>A</li></ul>'), { lead: '', rest: '<ul><li>A</li></ul>' });
+});
+
+test('a pre first gives no lead', () => {
+  assert.deepEqual(splitLead('<pre>x</pre><p>A</p>'), { lead: '', rest: '<pre>x</pre><p>A</p>' });
+});

package/lib/licenses.mjs

@@ -428,7 +428,7 @@ const HELPERS = [
   [/^\0vite\//, 'vite'],
   [/^\0rolldown\//, 'rolldown'],
 ];
-const OWN_VIRTUAL = [/^\0virtual:(app-folders|all-icons)$/, /^\0site-theme-icons?(:|$)/];
+const OWN_VIRTUAL = [/^\0virtual:(app-folders|all-icons|material-symbols)$/, /^\0site-theme-icons?(:|$)/];
 
 /** An app or a theme as licensesIntegration takes it: its kind and id, its name, version and who made it, its manifest
  * (its defineApp or its theme.json, with `license` and `thirdParty`), its folder, and whether the site is built with it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Morpheme CMS: the editor for a site built with Astro, its screens, its blocks and the rules a site gives it. See README.md.",
   "license": "MIT",
   "author": "Lars Adolfsen",
@@ -122,6 +122,7 @@
     "jsdom": "^29.1.1",
     "motion": "^14.0.0",
     "playwright": "^1.64.1",
+    "postcss": "^8.5.32",
     "prettier": "^3.9.10",
     "prettier-plugin-astro": "^1.1.2",
     "prettier-plugin-tailwindcss": "^0.8.1",

package/scripts/icon-packs.mjs

@@ -3,7 +3,8 @@
 // site and the editor draw, by its Phosphor name (usedIcons: the site's in packages/editor/src/icon.tsx, which the
 // content stores; the editor's as it imports them from @phosphor-icons/react and @phosphor-icons/core, found in the
 // code; the app store's), the set's icon its map names (MATERIAL_SYMBOLS, LUCIDE; one the set has none of from
-// Pictogrammers' Material Design Icons, MATERIAL_DESIGN_ICONS), as one <svg> with its viewBox, without a size or a colour
+// Pictogrammers' Material Design Icons, MATERIAL_DESIGN_ICONS; one neither has, X's logo, from Phosphor's filled icon,
+// PHOSPHOR_FILL_ICONS), as one <svg> with its viewBox, without a size or a colour
 // of its own: Svg and the theme's Vite plugin (themePlugin in packages/editor/site/theme.mjs) give it those. Phosphor's are its files
 // as they are (so a site with Phosphor's pack draws Phosphor's own icons, unchanged); Lucide's lines in a <g> with
 // Lucide's stroke (`-fill`: filled in). Beside them the pack's manifest (pack.json: name, author, licence, and the icons
@@ -19,7 +20,15 @@ import { execFileSync } from 'node:child_process';
 import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
 import { ICON_PACK_FILE, ICON_PACK_LICENSE, SYSTEM_PACKS } from '@morphemecms/cms/site/iconPacks.mjs';
 import { packFolder } from '@morphemecms/cms/site/icons.mjs';
-import { MATERIAL_DESIGN_ICONS, PACK_MAPS, PACK_SOURCES, phosphorFile, phosphorNames, usedIcons } from '@morphemecms/cms/site/icons.mjs';
+import {
+  MATERIAL_DESIGN_ICONS,
+  PACK_MAPS,
+  PHOSPHOR_FILL_ICONS,
+  PACK_SOURCES,
+  phosphorFile,
+  phosphorNames,
+  usedIcons,
+} from '@morphemecms/cms/site/icons.mjs';
 
 const MDI = 'material-design-icons';
 const version = (spec) => spec.replace(/^.*@/, '');
@@ -90,6 +99,10 @@ function sourcesOf(id) {
       const file = sourceFile[MDI](icon);
       return { name, icon, file, text: () => bare(file) };
     }),
+    ...(PHOSPHOR_FILL_ICONS[id] ?? []).map((name) => {
+      const file = `${phosphorPkg}assets/fill/${name}-fill.svg`;
+      return { name, icon: `${name}-fill`, file, text: () => bare(file) };
+    }),
   ];
 }
 
@@ -118,6 +131,7 @@ for (const id of SYSTEM_PACKS) {
   for (const { name, text } of sourcesOf(id)) writeFileSync(`${dir}${name}.svg`, text());
   const { name, author, license, url, package: spec } = PACK_SOURCES[id];
   const mdi = Object.keys(MATERIAL_DESIGN_ICONS[id] ?? {}).sort();
+  const fills = [...(PHOSPHOR_FILL_ICONS[id] ?? [])].sort();
   const manifest = {
     name,
     author,
@@ -125,19 +139,37 @@ for (const id of SYSTEM_PACKS) {
     url,
     version: version(spec),
     source: spec,
-    ...(mdi.length
+    ...(mdi.length || fills.length
       ? {
           includes: [
-            {
-              name: PACK_SOURCES[MDI].name,
-              author: PACK_SOURCES[MDI].author,
-              license: PACK_SOURCES[MDI].license,
-              url: PACK_SOURCES[MDI].url,
-              version: version(PACK_SOURCES[MDI].package),
-              source: PACK_SOURCES[MDI].package,
-              licenseFile: `${ICON_PACK_LICENSE}-${MDI}`,
-              icons: mdi,
-            },
+            ...(mdi.length
+              ? [
+                  {
+                    name: PACK_SOURCES[MDI].name,
+                    author: PACK_SOURCES[MDI].author,
+                    license: PACK_SOURCES[MDI].license,
+                    url: PACK_SOURCES[MDI].url,
+                    version: version(PACK_SOURCES[MDI].package),
+                    source: PACK_SOURCES[MDI].package,
+                    licenseFile: `${ICON_PACK_LICENSE}-${MDI}`,
+                    icons: mdi,
+                  },
+                ]
+              : []),
+            ...(fills.length
+              ? [
+                  {
+                    name: PACK_SOURCES.phosphor.name,
+                    author: PACK_SOURCES.phosphor.author,
+                    license: PACK_SOURCES.phosphor.license,
+                    url: PACK_SOURCES.phosphor.url,
+                    version: version(PACK_SOURCES.phosphor.package),
+                    source: PACK_SOURCES.phosphor.package,
+                    licenseFile: `${ICON_PACK_LICENSE}-phosphor`,
+                    icons: fills,
+                  },
+                ]
+              : []),
           ],
         }
       : {}),
@@ -145,6 +177,12 @@ for (const id of SYSTEM_PACKS) {
   writeFileSync(`${dir}${ICON_PACK_FILE}`, `${JSON.stringify(manifest, null, 2)}\n`);
   writeFileSync(`${dir}${ICON_PACK_LICENSE}`, `${readFileSync(`${pkgs[id]}LICENSE`, 'utf8').trim()}\n`);
   if (mdi.length) writeFileSync(`${dir}${ICON_PACK_LICENSE}-${MDI}`, `${readFileSync(`${pkgs[MDI]}LICENSE`, 'utf8').trim()}\n`);
+  if (fills.length)
+    writeFileSync(
+      `${dir}${ICON_PACK_LICENSE}-phosphor`,
+      `${readFileSync(`${phosphorPkg}LICENSE`, 'utf8').trim()}
+`,
+    );
   console.log(
     `${readdirSync(dir).filter((f) => f.endsWith('.svg')).length} ikoner fra ${spec}${mdi.length ? ` og ${PACK_SOURCES[MDI].package}` : ''} i ${dir}.`,
   );

package/scripts/material-fallback.test.mjs

@@ -0,0 +1,49 @@
+// Checks that Material's CSS chain (theme/styles/: base, ui, blocks, components, global) sits in the fallback layer, so a theme wins.
+// Reads the five files with postcss; no browser, no build. Exposes nothing; run by node --test.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import postcss from 'postcss';
+
+const names = ['base', 'ui', 'blocks', 'components', 'global'];
+const roots = Object.fromEntries(
+  names.map((name) => [name, postcss.parse(readFileSync(new URL(`../theme/styles/${name}.css`, import.meta.url), 'utf8'))]),
+);
+
+const customOnly = (rule) => rule.nodes.every((node) => node.type === 'comment' || (node.type === 'decl' && node.prop.startsWith('--')));
+
+// Top-level rules, also inside top-level @media and @supports, outside every layer.
+function unlayeredRules(root) {
+  const found = [];
+  root.each((node) => {
+    if (node.type === 'rule') found.push(node);
+    else if (node.type === 'atrule' && ['media', 'supports'].includes(node.name)) {
+      node.each((child) => child.type === 'rule' && found.push(child));
+    }
+  });
+  return found;
+}
+
+test('no unlayered rule sets more than custom properties', () => {
+  for (const name of names) {
+    for (const rule of unlayeredRules(roots[name]).filter((rule) => !customOnly(rule))) {
+      assert.fail(`${name}.css line ${rule.source.start.line}: "${rule.selector}" sets more than custom properties outside a layer`);
+    }
+  }
+});
+
+test('base.css orders the layers with fallback last', () => {
+  const orders = [];
+  roots.base.walkAtRules('layer', (atRule) => atRule.nodes === undefined && orders.push(atRule.params));
+  assert.ok(orders.length > 0, 'base.css has no layer order statement');
+  const names = orders[0].split(',').map((name) => name.trim());
+  assert.equal(names.at(-1), 'fallback');
+});
+
+test('the CSS chain has no !important', () => {
+  for (const name of names) {
+    roots[name].walkDecls((decl) => {
+      assert.ok(!decl.important, `${name}.css line ${decl.source.start.line}: "${decl.prop}" is !important`);
+    });
+  }
+});

package/site/icons.d.mts

@@ -68,17 +68,30 @@ export const MATERIAL_DESIGN_ICONS: {
         'arrows-in-line-horizontal': string;
         'arrows-out-line-horizontal': string;
         binoculars: string;
+        'facebook-logo': string;
         'github-logo': string;
         'google-logo': string;
+        'linkedin-logo': string;
+        'pinterest-logo': string;
         'hard-drives': string;
         scan: string;
         swatches: string;
     };
     lucide: {
+        'facebook-logo': string;
         'github-logo': string;
         'google-logo': string;
+        'linkedin-logo': string;
+        'pinterest-logo': string;
     };
 };
+/** For each system pack but Phosphor's: Phosphor's names of the icons that neither the pack's set nor Material Design Icons has
+ * (X's logo: Material Design Icons has only the old Twitter bird, which X's brand rules forbid), drawn from Phosphor's filled
+ * icon (`fill/<name>-fill.svg`). */
+export const PHOSPHOR_FILL_ICONS: {
+    'material-symbols': string[];
+    lucide: string[];
+};
 /** Phosphor's name → Material Symbols' (Outlined, weight 400; `-fill` the filled one), for every icon the site and the
  * editor draw (usedIcons) but those in MATERIAL_DESIGN_ICONS['material-symbols']. */
 export const MATERIAL_SYMBOLS: {