@morphemecms/cms 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @morphemecms/cms
 
+## 0.12.0
+
+### Minor Changes
+
+- 382abd8: An H1 starts a section with its own section colour, as an H2 does.
+- 3123242: Store items have permanent ids: installed copies move to their new folder on their next update. Apps get their own id from @app/self (app contract 3).
+
+### Patch Changes
+
+- fd2fedf: From tablet width, tapping a block or picture opens its side panel; Remove is in the panel.
+- 1459102: The side panel opens from 840px and collapses the drawer to the rail below 1200px; the modal side sheet is used below 840px; the top bar scrolls with the page.
+- 79b6b33: The text toolbar and the menus over the text are white with a shadow.
+- 25d29f7: The create button of every list, of Files and of Redirects is a floating action button instead of a + in the top bar; a list of several kinds opens a menu of them. The FAB stands above a form's save bar.
+- d39abb5: The side panel follows Material 3: at most 400dp wide, full height, M3 spacing.
+- ee4fbba: Preview and View on site stand at the end of the page's title row on wide screens.
+- aa964b2: The package's checks now type-check its whole source the way a site does, so type errors a site would hit are caught before release.
+- ca51ab8: Fix the store's installed filter for apps with an old id.
+- 6b95110: Fix type errors that sites hit in the text editor.
+- abef25a: Sites type-check the video block: the types of `player` and `facadeOf` make `frame` optional, as the block calls them.
+
 ## 0.11.0
 
 ### Minor Changes

package/astro.mjs

@@ -20,6 +20,7 @@ import { rehypeVideo } from './lib/video.mjs';
 import { rehypeEmphasize } from './lib/rehype-emphasize.mjs';
 import { csp, joined } from './lib/csp.mjs';
 import { appBuilds, appFoldersPlugin } from './lib/apps.mjs';
+import { appSelf } from './site/appSelf.mjs';
 import { isNoindex } from './site/noindex.mjs';
 import { activeTheme, aliases, iconPackLicenses, STANDARD_THEME, themeIcon, themePlugin } from './site/theme.mjs';
 import { licensesIntegration, siteOwners } from './lib/licenses.mjs';
@@ -158,7 +159,7 @@ export async function siteConfig() {
       // The editor (packages/editor/) takes this site from src/site/ as @site (packages/editor/defaults/editor.ts), and the
       // site and the editor take the theme in use (src/data/theme.json) as @theme: its file, else the standard
       // theme's (themePlugin, packages/editor/site/theme.mjs); and what is in each app's folder (appFoldersPlugin).
-      plugins: [themePlugin(), appFoldersPlugin(ROOT), tailwindcss()],
+      plugins: [themePlugin(), appFoldersPlugin(ROOT), appSelf(), tailwindcss()],
       resolve: { alias: aliases() },
     },
   });

package/lib/appId.d.mts

@@ -0,0 +1 @@
+export function appIdOf(path: string): string;

package/lib/appId.mjs

@@ -0,0 +1,6 @@
+// The id of an app from the path of a file in its folder. Exposes appIdOf (re-exported by src/apps.ts).
+// No dependencies, so the Vite plugin site/appSelf.mjs can use it too.
+
+/** The id of an app from the path of a file in its folder ("/src/apps/mailchimp/index.ts": "mailchimp",
+ * also ".../apps/mailchimp/popups/View.tsx"). @param {string} path */
+export const appIdOf = (path) => path.split('/apps/')[1].split('/')[0];

package/lib/apps.mjs

@@ -1,3 +1,4 @@
+// A site folder in src/apps/ named app_ or theme_ that is not a store id stops the build (appIds, strayStoreId).
 // What an app (src/apps/<app>/, packages/editor/src/apps.ts) can have outside the editor and the pages, each only while
 // it is installed (src/data/apps.json):
 //   worker.js  its part of the site's Worker: its own addresses, /api/<app>/… (`fetch`), and what it does each hour
@@ -11,6 +12,7 @@
 import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
 import { join, sep } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
+import { strayStoreId } from './storeEntries.mjs';
 
 /** Where an app's files from the build are, in the build (dist/) and so on the site (served only to the Worker). */
 export const APP_FILES = '_apps';
@@ -19,14 +21,22 @@ const APPS = 'src/apps';
 const INSTALLED = 'src/data/apps.json';
 const WORKERS = 'worker/apps.js';
 
-/** The ids of the apps, all of them (the folders in src/apps/). @param {string} root */
-export const appIds = (root) =>
-  existsSync(join(root, APPS))
+/** The ids of the apps, all of them (the folders in src/apps/). Stops on a folder that starts with `app_` or `theme_` but
+ * is not a store id of an app. @param {string} root */
+export const appIds = (root) => {
+  const ids = existsSync(join(root, APPS))
     ? readdirSync(join(root, APPS), { withFileTypes: true })
         .filter((d) => d.isDirectory())
         .map((d) => d.name)
         .sort()
     : [];
+  const stray = ids.find((id) => strayStoreId(id, 'app'));
+  if (stray)
+    throw new Error(
+      `${APPS}/${stray}: the folder name looks like a store id but is not one. A store app id is app_ and 16 lowercase hex characters; rename the folder.`,
+    );
+  return ids;
+};
 
 /** The ids of the apps installed. @param {string} root @returns {string[]} */
 export function installedApps(root) {

package/lib/apps.test.mjs

@@ -5,7 +5,7 @@ import { strict as assert } from 'node:assert/strict';
 import { mkdtempSync, rmSync, writeFileSync, mkdirSync, readFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
-import { appWorkersFile, appWorkersProblems, writeAppWorkers } from './apps.mjs';
+import { appIds, appWorkersFile, appWorkersProblems, writeAppWorkers } from './apps.mjs';
 
 describe('lib/apps.mjs', () => {
   let root;
@@ -47,4 +47,13 @@ describe('lib/apps.mjs', () => {
     assert.equal(writeAppWorkers(root), true);
     assert.equal(readFileSync(file, 'utf8'), appWorkersFile(root));
   });
+
+  it('appIds lists permanent ids and own names, and stops on a folder that is not a store id', () => {
+    mkdirSync(join(root, 'src/apps/app_a030dfba69793996'), { recursive: true });
+    assert.deepEqual(appIds(root), ['app_a030dfba69793996', 'booking']);
+    mkdirSync(join(root, 'src/apps/app_xyz'), { recursive: true });
+    assert.throws(() => appIds(root), /src\/apps\/app_xyz/);
+    rmSync(join(root, 'src/apps/app_xyz'), { recursive: true });
+    rmSync(join(root, 'src/apps/app_a030dfba69793996'), { recursive: true });
+  });
 });

package/lib/contracts.d.mts

@@ -5,8 +5,9 @@
 /** The version of the contract between the editor and an app (apps.ts: defineApp, its folder, and the theme's parts it
  * draws with: the standard blocks' and the UI components, @theme/blocks/… and @theme/ui/…, imported from
  * @morphemecms/cms): an app in the store says which it is written to, and only those the editor can run are
- * offered. Raised when an app written to the one before no longer works. */
-export const APP_API: 2;
+ * offered. Raised when an app written to the one before no longer works. 3 adds `import self from '@app/self'` (the id
+ * of the app's own folder, site/appSelf.mjs); an app written to 2 works as before. */
+export const APP_API: 3;
 /** The version of the contract between the editor and a theme (what a theme must and may have, "Hvad et tema må" in
  * CLAUDE.md, themeProblems in packages/editor/site/theme.mjs, the standard theme's UI parts with Material 3's names and
  * variants, the motion scheme's --motion-* springs and motionSpring/motionTiming (@morphemecms/cms/lib/motion),

package/lib/contracts.mjs

@@ -6,8 +6,9 @@
 /** The version of the contract between the editor and an app (apps.ts: defineApp, its folder, and the theme's parts it
  * draws with: the standard blocks' and the UI components, @theme/blocks/… and @theme/ui/…, imported from
  * @morphemecms/cms): an app in the store says which it is written to, and only those the editor can run are
- * offered. Raised when an app written to the one before no longer works. */
-export const APP_API = 2;
+ * offered. Raised when an app written to the one before no longer works. 3 adds `import self from '@app/self'` (the id
+ * of the app's own folder, site/appSelf.mjs); an app written to 2 works as before. */
+export const APP_API = 3;
 
 /** The version of the contract between the editor and a theme (what a theme must and may have, "Hvad et tema må" in
  * CLAUDE.md, themeProblems in packages/editor/site/theme.mjs, the standard theme's UI parts with Material 3's names and

package/lib/folderChanges.d.mts

@@ -0,0 +1,29 @@
+/** @typedef {{ path: string, oid: string }} RepoFile
+ * @typedef {{ path: string, content: string | Uint8Array | null, oid: string | null }} Change */
+/** The changes that make a folder in the site (`current`, its files now) the store's version of an app or a theme, with
+ * the note of where it came from, or remove it (`next` null).
+ * @param {string} folder
+ * @param {RepoFile[]} current
+ * @param {{ files: { path: string, content: string | Uint8Array }[], record: { files: { path: string, oid: string }[] } } | null} next
+ * @returns {Change[]} */
+export function folderChanges(folder: string, current: RepoFile[], next: {
+    files: {
+        path: string;
+        content: string | Uint8Array;
+    }[];
+    record: {
+        files: {
+            path: string;
+            oid: string;
+        }[];
+    };
+} | null): Change[];
+export type RepoFile = {
+    path: string;
+    oid: string;
+};
+export type Change = {
+    path: string;
+    content: string | Uint8Array | null;
+    oid: string | null;
+};

package/lib/folderChanges.mjs

@@ -0,0 +1,34 @@
+// The changes that make a folder in a site the store's version of an app or a theme, with its store.json note, or remove
+// it. Exposes folderChanges (used by src/store.ts and src/legacyMove.ts). Depends on ./storeEntries.mjs (RECORD).
+import { RECORD } from './storeEntries.mjs';
+
+/** @typedef {{ path: string, oid: string }} RepoFile
+ * @typedef {{ path: string, content: string | Uint8Array | null, oid: string | null }} Change */
+
+/** The changes that make a folder in the site (`current`, its files now) the store's version of an app or a theme, with
+ * the note of where it came from, or remove it (`next` null).
+ * @param {string} folder
+ * @param {RepoFile[]} current
+ * @param {{ files: { path: string, content: string | Uint8Array }[], record: { files: { path: string, oid: string }[] } } | null} next
+ * @returns {Change[]} */
+export function folderChanges(folder, current, next) {
+  const now = new Map(current.map((f) => [f.path, f.oid]));
+  /** @type {{ path: string, content: string | Uint8Array, oid?: string }[]} */
+  const wanted = next
+    ? [
+        ...next.files.map((f) => ({
+          path: `${folder}/${f.path}`,
+          content: f.content,
+          oid: next.record.files.find((r) => r.path === f.path)?.oid,
+        })),
+        { path: `${folder}/${RECORD}`, content: `${JSON.stringify(next.record, null, 2)}\n` },
+      ]
+    : [];
+  return [
+    // A file the site has as it is in the store is left as it is.
+    ...wanted
+      .filter((w) => !w.oid || now.get(w.path) !== w.oid)
+      .map((w) => ({ path: w.path, content: w.content, oid: now.get(w.path) ?? null })),
+    ...current.filter((f) => !wanted.some((w) => w.path === f.path)).map((f) => ({ path: f.path, content: null, oid: f.oid })),
+  ];
+}

package/lib/section-ranges.d.mts

@@ -1,7 +1,7 @@
 /** The kind of a part, from its ProseMirror node name and heading level; the label is the eyebrow line before a heading. */
 export function partKind(typeName: any, level: any): "h1" | "h2" | "other" | "label";
 /**
- * The sections of a text: each H2 (with a label directly before it) and every part after it up to the next H2, the next H1
+ * The sections of a text: each H1 or H2 (with a label directly before it) and every part after it up to the next H1 or H2
  * or the end. `parts` is the top-level parts in order; the result has the index of each section's first and last part.
  */
 export function sectionRanges(parts: any): any[];

package/lib/section-ranges.mjs

@@ -1,4 +1,4 @@
-// Which top-level parts of a page's or blog post's text form H2 sections, for the editor's dotted frame.
+// Which top-level parts of a page's or blog post's text form sections (an H1 or an H2 starts one), for the editor's dotted frame.
 // Exposes sectionRanges, sectionPart and partKind. Pure, no dependencies (used by src/sectionFrame.ts).
 
 /** The kind of a part, from its ProseMirror node name and heading level; the label is the eyebrow line before a heading. */
@@ -7,8 +7,10 @@ export function partKind(typeName, level) {
   return typeName === 'eyebrow' ? 'label' : 'other';
 }
 
+const startsSection = (kind) => kind === 'h1' || kind === 'h2';
+
 /**
- * The sections of a text: each H2 (with a label directly before it) and every part after it up to the next H2, the next H1
+ * The sections of a text: each H1 or H2 (with a label directly before it) and every part after it up to the next H1 or H2
  * or the end. `parts` is the top-level parts in order; the result has the index of each section's first and last part.
  */
 export function sectionRanges(parts) {
@@ -19,18 +21,10 @@ export function sectionRanges(parts) {
     from = -1;
   };
   parts.forEach((part, i) => {
-    const next = parts[i + 1]?.kind;
-    if (part.kind === 'label') {
-      if (next === 'h2') {
-        close(i - 1);
-        from = i;
-      } else if (next === 'h1') close(i - 1);
-    } else if (part.kind === 'h2') {
-      if (parts[i - 1]?.kind !== 'label') {
-        close(i - 1);
-        from = i;
-      }
-    } else if (part.kind === 'h1') close(i - 1);
+    const starts = part.kind === 'label' ? startsSection(parts[i + 1]?.kind) : startsSection(part.kind) && parts[i - 1]?.kind !== 'label';
+    if (!starts) return;
+    close(i - 1);
+    from = i;
   });
   close(parts.length - 1);
   return ranges;

package/lib/section-ranges.test.mjs

@@ -1,4 +1,4 @@
-// Tests lib/section-ranges.mjs: which top-level parts of a text form H2 sections (the editor's dotted frame).
+// Tests lib/section-ranges.mjs: which top-level parts of a text form sections, H1 or H2 (the editor's dotted frame).
 // Run with `node --test packages/editor/lib/*.test.mjs` (part of npm run check).
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
@@ -15,13 +15,26 @@ const ranges = (text) =>
   );
 
 test('no parts, no sections', () => assert.deepEqual(ranges(''), []));
-test('no H2, no sections', () => assert.deepEqual(ranges('1 o o'), []));
+test('no heading, no sections', () => assert.deepEqual(ranges('o o'), []));
+test('an H1 starts a section', () => assert.deepEqual(ranges('1 o o'), [{ from: 0, to: 2 }]));
+test('an H1 then an H2 are a section each', () =>
+  assert.deepEqual(ranges('1 o 2 o'), [
+    { from: 0, to: 1 },
+    { from: 2, to: 3 },
+  ]));
+test('a label before an H1 starts the section', () => assert.deepEqual(ranges('l 1 o'), [{ from: 0, to: 2 }]));
+test('consecutive H1s are a section each', () =>
+  assert.deepEqual(ranges('o 1 1'), [
+    { from: 1, to: 1 },
+    { from: 2, to: 2 },
+  ]));
 test('an H2 at the start runs to the end', () => assert.deepEqual(ranges('2 o o'), [{ from: 0, to: 2 }]));
 test('text before the first H2 is outside', () => assert.deepEqual(ranges('o 2 o'), [{ from: 1, to: 2 }]));
 test('an H2 as the last part is a section of one', () => assert.deepEqual(ranges('o o 2'), [{ from: 2, to: 2 }]));
-test('an H1 ends a section', () =>
+test('an H1 ends the section above it and starts its own', () =>
   assert.deepEqual(ranges('2 o 1 o 2 o'), [
     { from: 0, to: 1 },
+    { from: 2, to: 3 },
     { from: 4, to: 5 },
   ]));
 test('consecutive H2s are a section each', () =>
@@ -36,8 +49,16 @@ test('a label before an H2 ends the section above it', () =>
     { from: 0, to: 1 },
     { from: 2, to: 4 },
   ]));
-test('a label before an H1 belongs to the H1', () => assert.deepEqual(ranges('2 o l 1 o'), [{ from: 0, to: 1 }]));
-test('a label at the start before an H1 starts nothing', () => assert.deepEqual(ranges('l 1 2 o'), [{ from: 2, to: 3 }]));
+test('a label before an H1 belongs to the H1', () =>
+  assert.deepEqual(ranges('2 o l 1 o'), [
+    { from: 0, to: 1 },
+    { from: 2, to: 4 },
+  ]));
+test('a label at the start before an H1 starts its section', () =>
+  assert.deepEqual(ranges('l 1 2 o'), [
+    { from: 0, to: 1 },
+    { from: 2, to: 3 },
+  ]));
 test('a label not before a heading is an ordinary part', () => {
   assert.deepEqual(ranges('2 l o'), [{ from: 0, to: 2 }]);
   assert.deepEqual(ranges('l o 2'), [{ from: 2, to: 2 }]);

package/lib/storeEntries.d.mts

@@ -13,6 +13,8 @@ export function validTheme(x: any, api: number): boolean;
 export function isText(v: unknown): v is string;
 export function isPath(v: unknown): boolean;
 export const ITEM_ID: RegExp;
-export const REFUSED_APPS: string[];
+export const HANDLE: RegExp;
+export const LEGACY: RegExp;
 export const STANDARD: "saturn";
 export const RECORD: "store.json";
+export function strayStoreId(name: string, kind: "app" | "theme"): boolean;

package/lib/storeEntries.mjs

@@ -1,6 +1,6 @@
 /**
  * Pure validation logic for store apps and themes.
- * Exposes isText, isPath, ITEM_ID, REFUSED_APPS, STANDARD, RECORD, validApp, validTheme.
+ * Exposes isText, isPath, ITEM_ID, HANDLE, LEGACY, STANDARD, RECORD, validApp, validTheme, strayStoreId.
  * No external dependencies.
  */
 
@@ -16,14 +16,28 @@ export const isText = (v) => typeof v === 'string' && v.trim() !== '';
  */
 export const isPath = (v) => isText(v) && v.split('/').every((part) => part !== '' && part !== '.' && part !== '..');
 
-export const ITEM_ID = /^[a-z0-9][a-z0-9-]*$/;
-// The store's address before and a developer's page (STORE_BEFORE and DEVELOPER_ROUTE in src/store.ts)
-export const REFUSED_APPS = ['butik', 'udvikler'];
+// A permanent id: the kind, then 16 lowercase hex characters
+export const ITEM_ID = /^(app|theme)_[0-9a-f]{16}$/;
+// An item's address in the store: publisher/name
+export const HANDLE = /^[a-z0-9][a-z0-9-]{0,39}\/[a-z0-9][a-z0-9-]{0,39}$/;
+// An item's folder name before it had a permanent id
+export const LEGACY = /^[a-z0-9][a-z0-9-]*$/;
 // The standard theme, which every site has
 export const STANDARD = 'saturn';
 // The note in an installed folder of where it came from
 export const RECORD = 'store.json';
 
+const hasId = (x, kind) => ITEM_ID.test(x?.id ?? '') && x.id.startsWith(`${kind}_`);
+const hasHandle = (x) => HANDLE.test(x?.handle ?? '') && (x.legacy === undefined || LEGACY.test(x.legacy));
+
+/**
+ * True when a site's own folder name looks like a store id of this kind (it starts with `app_` or `theme_`) but is not one.
+ * @param {string} name
+ * @param {'app' | 'theme'} kind
+ * @returns {boolean}
+ */
+export const strayStoreId = (name, kind) => /^(app|theme)_/.test(name) && !(ITEM_ID.test(name) && name.startsWith(`${kind}_`));
+
 const isAdd = (v) => isText(v?.label) && isText(v?.icon);
 const isGoodFile = (f) => isText(f?.oid) && isPath(f?.path) && f.path !== RECORD;
 
@@ -34,8 +48,8 @@ const isGoodFile = (f) => isText(f?.oid) && isPath(f?.path) && f.path !== RECORD
  */
 export function validApp(x, api) {
   return (
-    ITEM_ID.test(x?.id ?? '') &&
-    !REFUSED_APPS.includes(x.id) &&
+    hasId(x, 'app') &&
+    hasHandle(x) &&
     isText(x.version) &&
     x.api === api &&
     [x.label, x.publisher, x.icon, x.hint].every(isText) &&
@@ -53,8 +67,8 @@ export function validApp(x, api) {
  */
 export function validTheme(x, api) {
   return (
-    ITEM_ID.test(x?.id ?? '') &&
-    x.id !== STANDARD &&
+    hasId(x, 'theme') &&
+    hasHandle(x) &&
     x.api === api &&
     [x.version, x.name, x.author, x.icon].every(isText) &&
     Array.isArray(x.files) &&

package/lib/storeEntries.test.mjs

@@ -1,13 +1,15 @@
 /**
- * Tests for store entry validation logic (validApp, validTheme, isPath).
+ * Tests for store entry validation logic (validApp, validTheme, isPath, strayStoreId).
  * Run with `node --test packages/editor/lib/*.test.mjs` (part of npm run check).
  */
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { validApp, validTheme, isPath } from './storeEntries.mjs';
+import { validApp, validTheme, isPath, strayStoreId } from './storeEntries.mjs';
 
 const theme = () => ({
-  id: 'venus',
+  id: 'theme_fa395ad84690acbd',
+  handle: 'morpheme/venus',
+  legacy: 'venus',
   version: '1.0.0',
   api: 4,
   name: 'Venus',
@@ -16,7 +18,8 @@ const theme = () => ({
   files: [{ path: 'theme.json', oid: 'a'.repeat(40) }],
 });
 const app = () => ({
-  id: 'calendly',
+  id: 'app_a030dfba69793996',
+  handle: 'morpheme/calendly',
   version: '1.0.0',
   api: 2,
   label: 'Calendly',
@@ -35,8 +38,30 @@ test('valid theme wrong api', () => {
   assert.equal(validTheme({ ...theme(), api: 3 }, 4), false);
 });
 
-test('valid theme standard id', () => {
-  assert.equal(validTheme({ ...theme(), id: 'saturn' }, 4), false);
+test('valid theme old-style id', () => {
+  assert.equal(validTheme({ ...theme(), id: 'venus' }, 4), false);
+});
+
+test('valid theme app id (wrong kind)', () => {
+  assert.equal(validTheme({ ...theme(), id: 'app_a030dfba69793996' }, 4), false);
+});
+
+test('valid theme without handle', () => {
+  const { handle, ...rest } = theme();
+  assert.equal(validTheme(rest, 4), false);
+});
+
+test('valid theme bad handle', () => {
+  assert.equal(validTheme({ ...theme(), handle: 'venus' }, 4), false);
+  assert.equal(validTheme({ ...theme(), handle: 'Morpheme/venus' }, 4), false);
+});
+
+test('valid theme keeps legacy, and drops a bad one', () => {
+  assert.equal(validTheme(theme(), 4), true);
+  assert.equal(theme().legacy, 'venus');
+  assert.equal(validTheme({ ...theme(), legacy: 'Venus!' }, 4), false);
+  const { legacy, ...rest } = theme();
+  assert.equal(validTheme(rest, 4), true);
 });
 
 test('valid theme bad path', () => {
@@ -55,10 +80,25 @@ test('valid app', () => {
   assert.equal(validApp(app(), 2), true);
 });
 
-test('valid app refused id', () => {
+test('valid app old-style id', () => {
+  assert.equal(validApp({ ...app(), id: 'calendly' }, 2), false);
   assert.equal(validApp({ ...app(), id: 'butik' }, 2), false);
 });
 
+test('valid app theme id (wrong kind)', () => {
+  assert.equal(validApp({ ...app(), id: 'theme_fa395ad84690acbd' }, 2), false);
+});
+
+test('valid app without handle', () => {
+  const { handle, ...rest } = app();
+  assert.equal(validApp(rest, 2), false);
+});
+
+test('valid app bad id length', () => {
+  assert.equal(validApp({ ...app(), id: 'app_a030dfba6979399' }, 2), false);
+  assert.equal(validApp({ ...app(), id: 'app_A030DFBA69793996' }, 2), false);
+});
+
 test('valid app missing adds kinds', () => {
   assert.equal(validApp({ ...app(), adds: { blocks: [], lists: [] } }, 2), false);
 });
@@ -69,3 +109,12 @@ test('isPath cases', () => {
   assert.equal(isPath('./a'), false);
   assert.equal(isPath(''), false);
 });
+
+test('strayStoreId: a store-looking name that is not a store id of the kind', () => {
+  assert.equal(strayStoreId('app_a030dfba69793996', 'app'), false);
+  assert.equal(strayStoreId('app_xyz', 'app'), true);
+  assert.equal(strayStoreId('theme_fa395ad84690acbd', 'app'), true);
+  assert.equal(strayStoreId('theme_xyz', 'theme'), true);
+  assert.equal(strayStoreId('calendly', 'app'), false);
+  assert.equal(strayStoreId('my_theme', 'theme'), false);
+});

package/lib/text-sections.d.mts

@@ -1,5 +1,5 @@
 /** The text's HTML as runs: { color, html } with the marker removed; color is null for text outside a coloured section.
- * A marker with an unknown colour, or not followed by an H2, is dropped. Without any coloured section, the HTML is
+ * A marker with an unknown colour, or not followed by an H1 or H2, is dropped. Without any coloured section, the HTML is
  * returned as it came, in one run.
  * @param {string} html
  * @returns {{ color: string | null, html: string }[]} */
@@ -7,4 +7,14 @@ export function sectionsOf(html: string): {
     color: string | null;
     html: string;
 }[];
+/** The text before its first section starts (a marker, a label or an H1 or H2), and the rest from there. Without a heading
+ * the whole text is the intro. For a page whose coloured H1 panel holds the header and this intro (PageLayout.astro).
+ * @param {string} html
+ * @returns {{ intro: string, rest: string }} */
+export function introOf(html: string): {
+    intro: string;
+    rest: string;
+};
+export const MARKER: string;
+export const LABEL: string;
 export function sectionClass(color: any): string;

package/lib/text-sections.mjs

@@ -1,14 +1,15 @@
-// A page's or post's rendered text cut into runs for the site: a section with a colour (the marker before its H2,
-// lib/section-marker.mjs) is one run from the marker to the next H2, H1 or the end. Exposes sectionsOf and sectionClass,
-// used by theme/components/RichText.astro and src/pagePreview.tsx. Depends on section-marker.mjs.
+// A page's or post's rendered text cut into runs for the site: a section with a colour (the marker before its H1 or H2,
+// lib/section-marker.mjs) is one run from the marker to the next H1, H2 or the end. Exposes sectionsOf, introOf,
+// sectionClass and the marker and label patterns (MARKER, LABEL), used by theme/components/RichText.astro, lib/without-h1.mjs
+// and src/pagePreview.tsx. Depends on section-marker.mjs.
 import { SECTION_COLORS } from './section-marker.mjs';
 
 // The marker as the site's HTML pipeline writes it (rehype-raw keeps it as written; a space before `>` is tolerated).
-const MARKER = String.raw`<div data-section="([^"]*)"\s*><\/div>\s*`;
+export const MARKER = String.raw`<div data-section="([^"]*)"\s*><\/div>\s*`;
 // A label line (text-menu's <p class="block-eyebrow">) directly before a heading starts the heading's section.
-const LABEL = String.raw`(?:<p class="block-eyebrow">(?:(?!<\/p>)[\s\S])*<\/p>\s*)?`;
-// A marker followed by an H2 (with its label between): where a coloured section starts. Ends just after `<h2`.
-const START = new RegExp(`${MARKER}${LABEL}<h2\\b`, 'g');
+export const LABEL = String.raw`(?:<p class="block-eyebrow">(?:(?!<\/p>)[\s\S])*<\/p>\s*)?`;
+// A marker followed by an H1 or H2 (with its label between): where a coloured section starts. Ends just after `<h1` or `<h2`.
+const START = new RegExp(`${MARKER}${LABEL}<h[12]\\b`, 'g');
 // Where the next section (or an H1) starts: its marker and label if it has them, else its heading.
 const NEXT = new RegExp(`(?:${MARKER})?${LABEL}<h[12]\\b`);
 const MARKERS = new RegExp(MARKER, 'g');
@@ -16,7 +17,7 @@ const MARKERS = new RegExp(MARKER, 'g');
 const withoutMarkers = (html) => html.replace(MARKERS, '');
 
 /** The text's HTML as runs: { color, html } with the marker removed; color is null for text outside a coloured section.
- * A marker with an unknown colour, or not followed by an H2, is dropped. Without any coloured section, the HTML is
+ * A marker with an unknown colour, or not followed by an H1 or H2, is dropped. Without any coloured section, the HTML is
  * returned as it came, in one run.
  * @param {string} html
  * @returns {{ color: string | null, html: string }[]} */
@@ -41,5 +42,14 @@ export function sectionsOf(html) {
   return runs;
 }
 
+/** The text before its first section starts (a marker, a label or an H1 or H2), and the rest from there. Without a heading
+ * the whole text is the intro. For a page whose coloured H1 panel holds the header and this intro (PageLayout.astro).
+ * @param {string} html
+ * @returns {{ intro: string, rest: string }} */
+export function introOf(html) {
+  const at = html.search(NEXT);
+  return at < 0 ? { intro: html, rest: '' } : { intro: html.slice(0, at), rest: html.slice(at) };
+}
+
 /** The classes of a coloured section on the site (blocks.css). */
 export const sectionClass = (color) => `text-section text-section-${color}`;

package/lib/text-sections.test.mjs

@@ -4,7 +4,7 @@ import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { createMarkdownProcessor } from '@astrojs/markdown-remark';
 import rehypeRaw from 'rehype-raw';
-import { sectionClass, sectionsOf } from './text-sections.mjs';
+import { introOf, sectionClass, sectionsOf } from './text-sections.mjs';
 
 const M = (color) => `<div data-section="${color}"></div>`;
 
@@ -36,6 +36,23 @@ test('a run ends at an h1', () => {
   ]);
 });
 
+test('a marker before an h1 starts a coloured run that ends at the next h2', () => {
+  const html = `${M('tint')}<h1>A</h1><p>x</p><h2>B</h2>`;
+  assert.deepEqual(sectionsOf(html), [
+    { color: 'tint', html: '<h1>A</h1><p>x</p>' },
+    { color: null, html: '<h2>B</h2>' },
+  ]);
+});
+
+test('a marker and a label before an h1 start a coloured run', () => {
+  const html = `<p>Intro</p>${M('accent')}<p class="block-eyebrow">Hi</p><h1>A</h1><p>x</p><h1>B</h1>`;
+  assert.deepEqual(sectionsOf(html), [
+    { color: null, html: '<p>Intro</p>' },
+    { color: 'accent', html: '<p class="block-eyebrow">Hi</p><h1>A</h1><p>x</p>' },
+    { color: null, html: '<h1>B</h1>' },
+  ]);
+});
+
 test('two coloured sections after each other are two runs', () => {
   const html = `${M('tint')}\n<h2>A</h2>\n<p>x</p>\n${M('accent')}\n<h2>B</h2>\n<p>y</p>`;
   assert.deepEqual(sectionsOf(html), [
@@ -61,6 +78,22 @@ test('a marker not followed by an h2 is dropped', () => {
   assert.deepEqual(sectionsOf(`<p>a</p>\n${M('tint')}\n<h3>c</h3>`), [{ color: null, html: '<p>a</p>\n<h3>c</h3>' }]);
 });
 
+test('the intro is the text before the first section starts', () => {
+  assert.deepEqual(introOf(`<p>a</p>\n<p>b</p>\n${M('tint')}\n<h2>c</h2>\n<p>d</p>`), {
+    intro: '<p>a</p>\n<p>b</p>\n',
+    rest: `${M('tint')}\n<h2>c</h2>\n<p>d</p>`,
+  });
+  assert.deepEqual(introOf('<p>a</p><p class="block-eyebrow">L</p><h1>c</h1>'), {
+    intro: '<p>a</p>',
+    rest: '<p class="block-eyebrow">L</p><h1>c</h1>',
+  });
+});
+
+test('without a heading the text is all intro, and a text that starts with one has none', () => {
+  assert.deepEqual(introOf('<p>a</p>'), { intro: '<p>a</p>', rest: '' });
+  assert.deepEqual(introOf('<h2>a</h2><p>b</p>'), { intro: '', rest: '<h2>a</h2><p>b</p>' });
+});
+
 test('the class of a coloured section', () => {
   assert.equal(sectionClass('tint'), 'text-section text-section-tint');
 });

package/lib/video-id.d.mts

@@ -7,8 +7,12 @@ export function videoOf(text: any): {
     id: string;
     hash: string | null;
 } | null;
-/** The address that plays the video, with the settings in the address of the iframe it came from. */
-export function player(video: any, frame: any): string;
+/** The address that plays the video, with the settings in the address of the iframe it came from.
+ * @param {any} video
+ * @param {string | null} [frame]
+ * @returns {string}
+ */
+export function player(video: any, frame?: string | null): string;
 export function videoPage(video: any): string;
 export function stillName(video: any): string;
 export function vimeoInfo(video: any, width: any): string;