@morphemecms/cms 0.11.0 → 0.13.0-next-20261106203613

package/src/standard/testimonials/list.ts

@@ -35,7 +35,7 @@ export default function testimonialsList(say: Messages): OwnedList {
         to: 'categories',
         multiple: true,
         add: own.addTag,
-        edit: { to: `ny/${config.lists.tags}`, text: own.entries.createTag },
+        edit: { to: `new/${config.lists.tags}`, text: own.entries.createTag },
       },
       { name: 'frontPage', label: own.entries.frontPage, type: 'boolean', default: true },
     ],

package/src/store.ts

@@ -1,4 +1,4 @@
-// The app store ("Indstillinger" › "Appstore", #indstillinger/appstore, AppList.tsx): the apps that are not in the site
+// The app store ("Indstillinger" › "Appstore", #settings/appstore, AppList.tsx): the apps that are not in the site
 // and can be installed. The store is reached through the site's Worker (/api/store/catalog, /api/store/files/<oid>;
 // the Worker holds the site's key to it, and the editor never calls the store itself): each app of its catalog with
 // its id, its version and the version of the contract it is written to (APP_API), its name, who made it, its icon
@@ -29,6 +29,8 @@ import type { StoreLicenses } from './licenseData';
 import { APP_API, THEME_API } from '../lib/contracts.mjs';
 import { RECORD, STANDARD, isText, validApp, validTheme } from '../lib/storeEntries.mjs';
 import { timedFetch } from './storeFetch';
+import { folderChanges } from '../lib/folderChanges.mjs';
+import { moveChanges as moveItem, type SitePaths } from './legacyMove';
 
 // The contracts this editor runs (lib/contracts.mjs, also read by the site's Worker).
 export { APP_API, THEME_API };
@@ -111,6 +113,9 @@ export const SCREENSHOTS = 'screenshots';
 /** An app in the store's catalog. */
 export type StoreApp = {
   id: string;
+  /** Its readable name for addresses (`publisher/name`) and the id it had before its permanent one (`legacy`). */
+  handle?: string;
+  legacy?: string;
   version: string;
   api: number;
   label: string;
@@ -145,6 +150,8 @@ export type StoreApp = {
  * site in it (screenshots/<n>-<key>.jpg, t.library.themeShots) and its folder, file by file. */
 export type StoreTheme = {
   id: string;
+  handle?: string;
+  legacy?: string;
   version: string;
   api: number;
   name: string;
@@ -183,10 +190,10 @@ export type StoreRecord = { version: string; ref: string; files: StoreFile[] };
 /** The store's address in the editor, under "Indstillinger" (its apps; its themes at STORE_THEMES), its address
  * before (STORE_BEFORE, which opens it, App.tsx MOVED), and that of a developer's page (DEVELOPER_ROUTE/<slug>); no
  * app can have the ids of the last two. */
-export const STORE_ROUTE = 'indstillinger/appstore';
-export const STORE_THEMES = 'indstillinger/appstore/temaer';
+export const STORE_ROUTE = 'settings/appstore';
+export const STORE_THEMES = 'settings/appstore/themes';
 export const STORE_BEFORE = 'apps/butik';
-export const DEVELOPER_ROUTE = 'apps/udvikler';
+export const DEVELOPER_ROUTE = 'apps/developer';
 
 /** An app's folder in the site, and the note in it of where it came from. */
 export const appFolder = (id: string) => `${config.apps.folder}/${id}`;
@@ -420,33 +427,6 @@ export function themeChanges(
   return folderChanges(themeFolder(id), current, next);
 }
 
-/** 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). */
-function folderChanges(
-  folder: string,
-  current: RepoFile[],
-  next: { files: { path: string; content: string | Uint8Array }[]; record: StoreRecord } | null,
-): Change[] {
-  const now = new Map(current.map((f) => [f.path, f.oid]));
-  const wanted: { path: string; content: string | Uint8Array; oid?: string }[] = 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 })),
-  ];
-}
-
 /** The changes that make an app's folder in the site (`current`, its files now) the store's version, with the note of
  * where it came from, or remove it (`next` null: uninstalling); and the site's file of apps with it among those
  * installed or not (`installed`: their ids now, `file`: the file). In one commit. */
@@ -474,6 +454,31 @@ export function recordIn(current: RepoFile[], root: string): StoreRecord | undef
   }
 }
 
+/** Where the site keeps what names an app or a theme (docs/store-ids.md); the popups' folder is the collection's. */
+const sitePaths: SitePaths = {
+  appsFolder: config.apps.folder,
+  themesFolder: config.themes,
+  installed: config.apps.installed,
+  settings: config.apps.settings,
+  theme: config.theme,
+  icons: config.icons,
+  blockSettings: config.blockSettings,
+  popups: 'src/data/popups',
+  cookieList: config.cookieList,
+};
+
+/** The changes that update a store app or theme to its permanent folder: from its legacy folder (`legacy`, its files now
+ * `current`) with every id in the site's files (`site`) rewritten, or, without `legacy`, as appChanges or themeChanges
+ * do for the folder. In one commit (legacyMove.ts). */
+export const moveChanges = (
+  entry: { id: string },
+  legacy: string | null,
+  next: Parameters<typeof moveItem>[2],
+  current: RepoFile[],
+  site: RepoFile[],
+) => moveItem(entry, legacy, next, current, site, sitePaths);
+export { appliedTo, installedHere, legacyOf, mergeChanges } from './legacyMove';
+
 /** The files of an app installed from the store that were changed in the site since (in its folder, `current`, not
  * as its note says), by their paths in the folder: an update writes over them. */
 export function changedFiles(id: string, record: StoreRecord, current: RepoFile[], root = appFolder(id)): string[] {

package/src/tagUses.d.mts

@@ -11,7 +11,7 @@ export function promotionTags(d: Record<string, unknown>): string[];
  */
 export function tagUses<F extends TagFile>(files: F[], folders: TagFolders): Map<string, Map<string, F>>;
 /**
- * A file record's use of a tag: the Filer address the file record is for, as a path under filer/.
+ * A file record's use of a tag: the Filer address the file record is for, as a path under files/.
  * @param {TagFile} file
  * @param {string} folder the file records folder
  * @returns {{ path: string; name: string } | null}

package/src/tagUses.mjs

@@ -87,7 +87,7 @@ export function tagUses(files, folders) {
 }
 
 /**
- * A file record's use of a tag: the Filer address the file record is for, as a path under filer/.
+ * A file record's use of a tag: the Filer address the file record is for, as a path under files/.
  * @param {TagFile} file
  * @param {string} folder the file records folder
  * @returns {{ path: string; name: string } | null}
@@ -95,7 +95,7 @@ export function tagUses(files, folders) {
 export function recordUse(file, folder) {
   const record = folder !== undefined && isRecordPath(file.path, folder) ? parseRecord(file.text) : null;
   if (!record) return null;
-  return { path: `filer${record.src}`, name: record.src.slice(record.src.lastIndexOf('/') + 1) };
+  return { path: `files${record.src}`, name: record.src.slice(record.src.lastIndexOf('/') + 1) };
 }
 
 /**

package/src/tagUses.test.mjs

@@ -127,7 +127,7 @@ test('taggedWith lists the file records with a tag in their categories', () => {
 
 test('recordUse gives the Filer path and the file name of a file record', () => {
   assert.deepEqual(recordUse(andromeda, 'src/data/files'), {
-    path: 'filer/images/uploads/2026/10/andromeda.webp',
+    path: 'files/images/uploads/2026/10/andromeda.webp',
     name: 'andromeda.webp',
   });
 });

package/src/topBarSlot.tsx

@@ -1,7 +1,8 @@
-// Where the editor's top bar stands: one sticky place at the top of the content column, beside the full-height navigation
-// rail or drawer (`aside`; App.tsx wraps the layout in TopBarLayout), which Screen.tsx draws its bar into. Exposes
-// TopBarLayout and useTopBarSlot. It keeps `--top-bar-height` (the bar's height) on the layout, for the sections pane.
-import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+// Where the editor's top bar stands: one place at the top of the content column, beside the full-height navigation
+// rail or drawer (`aside`; App.tsx wraps the layout in TopBarLayout), which Screen.tsx draws its bar into. The bar scrolls
+// away with the page. Exposes TopBarLayout and useTopBarSlot.
+// While the side panel is open the place ends at the panel's start edge (.editor-top-bar-slot in editor.css).
+import { createContext, useContext, useState, type ReactNode } from 'react';
 
 const Slot = createContext<HTMLElement | null>(null);
 
@@ -13,22 +14,13 @@ export const useTopBarSlot = () => useContext(Slot);
  * screen's bar does not first stand in the screen and then move. */
 export function TopBarLayout({ above, aside, children }: { above?: ReactNode; aside?: ReactNode; children: ReactNode }) {
   const [slot, setSlot] = useState<HTMLDivElement | null>(null);
-  const [layout, setLayout] = useState<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!slot || !layout) return;
-    const measure = () => layout.style.setProperty('--top-bar-height', `${slot.offsetHeight}px`);
-    measure();
-    const watch = new ResizeObserver(measure);
-    watch.observe(slot);
-    return () => watch.disconnect();
-  }, [slot, layout]);
   return (
-    <div ref={setLayout} className="[--top-bar-height:4rem]">
+    <div>
       {above}
       <div className="flex">
         {aside}
         <div className="min-w-0 flex-1">
-          <div ref={setSlot} className="sticky top-0 z-20" />
+          <div ref={setSlot} className="editor-top-bar-slot" />
           <Slot.Provider value={slot}>{slot && children}</Slot.Provider>
         </div>
       </div>

package/src/ui.tsx

@@ -1,7 +1,7 @@
 // The editor's parts: every button, field, switch, chip and row a screen is made of, each with one
 // look, set here. A screen uses these and never writes the classes of a button or a field itself
 // (CLAUDE.md), so the editor looks the same everywhere and a change here changes it everywhere. They
-// are all shown, in every state, on the screen #udseende/dele (Parts.tsx). The screen itself, with its top bar,
+// are all shown, in every state, on the screen #appearance/parts (Parts.tsx). The screen itself, with its top bar,
 // is Screen.tsx.
 import {
   useEffect,
@@ -72,7 +72,7 @@ import {
   SiteDatePicker,
   SiteDialog,
   siteDialogModalClass,
-  SiteExtendedFab,
+  SiteFab,
   SiteFabMenu,
   SiteIconButton,
   SiteLoadingIndicator,
@@ -1096,7 +1096,7 @@ const PAGE_STATES: PageState[] = ['published', 'draft', 'unlisted', 'scheduled']
  * menu links to it and its date. */
 export type Pickable = { value: string; label: string; state?: PageState; inMenu?: boolean; date?: string };
 
-type PickSort = 'nyeste' | 'aeldste' | 'az' | 'za';
+type PickSort = 'newest' | 'oldest' | 'az' | 'za';
 type InMenu = '' | 'in' | 'out';
 
 /** The order and the filters of a sheet of choices (PagePicker, MultiChoice), as over the lists: the arrows with A–Å and
@@ -1106,7 +1106,7 @@ type InMenu = '' | 'in' | 'out';
  * and `arrange` orders and filters choices. */
 export function usePickTools(all: Pickable[], keep: string) {
   const dated = all.some((o) => o.date);
-  const sorts: PickSort[] = dated ? ['nyeste', 'aeldste', 'az', 'za'] : ['az', 'za'];
+  const sorts: PickSort[] = dated ? ['newest', 'oldest', 'az', 'za'] : ['az', 'za'];
   const sortKey = `editor-sort-valg-${keep}`;
   const [savedSort, setSort] = useState<PickSort | null>(() => {
     try {
@@ -1151,8 +1151,8 @@ export function usePickTools(all: Pickable[], keep: string) {
 
   const byDate = (a: Pickable, b: Pickable) => (b.date ?? '').localeCompare(a.date ?? '');
   const compare: Record<PickSort, (a: Pickable, b: Pickable) => number> = {
-    nyeste: (a, b) => byDate(a, b) || byText(a.label, b.label),
-    aeldste: (a, b) => byDate(b, a) || byText(a.label, b.label),
+    newest: (a, b) => byDate(a, b) || byText(a.label, b.label),
+    oldest: (a, b) => byDate(b, a) || byText(a.label, b.label),
     az: (a, b) => byText(a.label, b.label),
     za: (a, b) => byText(b.label, a.label),
   };
@@ -2541,6 +2541,9 @@ export function useAtLeast(name: Exclude<Breakpoint, 'compact'>) {
   return useMedia(atLeast(name));
 }
 
+/** Whether the window is at least as wide as the breakpoint right now (not kept up to date: for a tap's handler). */
+export const atLeastNow = (name: Exclude<Breakpoint, 'compact'>) => matchMedia(atLeast(name)).matches;
+
 /** How the main menu is laid out in this window (lib/menu-layout.mjs): whether the navigation rail stands, which way it
  * expands, and whether the top bar has the menu button. */
 export function useMenuLayout() {
@@ -2602,7 +2605,7 @@ export function SideSheet({ title, onClose, children }: { title: string; onClose
       headlineId={id}
       closeLabel={t.common.close}
       onClose={onClose}
-      className="editor-reveal sticky top-24 max-h-[calc(100dvh-7rem)] self-start"
+      className="editor-reveal sticky top-8 max-h-[calc(100dvh-3rem)] self-start"
     >
       <div className="space-y-5">{children}</div>
     </SiteSideSheet>
@@ -2649,12 +2652,12 @@ export function SectionList({
 }
 
 /** The "on this page" card at the end of a long form on large and wider screens: the theme's outlined card, as tall as
- * its content (it scrolls inside only when that is taller than the window less the top bar), with the small `caption`
+ * its content (it scrolls inside only when that is taller than the window), with the small `caption`
  * (Afsnit), the form's `title` under it and the form's SectionList (`children`). It stays in view while the form
  * scrolls. Its place is FormColumns' `pane`, against the window's end edge; below large it is not drawn. */
 export function SectionPane({ caption, title, children }: { caption: string; title: string; children: ReactNode }) {
   return (
-    <div className={`${siteCardClass('outlined')} max-h-[calc(100dvh-var(--top-bar-height)-2*var(--section-pane-gap))] overflow-y-auto`}>
+    <div className={`${siteCardClass('outlined')} max-h-[calc(100dvh-2*var(--section-pane-gap))] overflow-y-auto`}>
       <p className="section-pane-caption m-0 text-muted">{caption}</p>
       <h2 className="section-pane-title m-0 mb-3 text-ink">{title}</h2>
       {children}
@@ -2737,11 +2740,11 @@ function MainRail({ label, onOpen, children }: { label: string; onOpen: () => vo
 // menu button. The header cell starts at the drawer items' outer edge: the row has no start padding, and the header (the
 // account row, the back row) brings the items' inline padding itself, so its pill (editor.css, .editor-main-drawer-header)
 // has the shape of an item's and the avatar or arrow stands over the items' icons. The button is centred on the 1.5rem box
-// of the items' trailing arrows (a negative end margin from the button's own width). A divider (middle inset) stands under the row.
+// of the items' trailing arrows (a negative end margin from the button's own width). The row is the top bar's height (`--top-app-bar-height`), so the divider (middle inset) under it stands level with the top bar's line.
 function MainDrawerMenuButton({ onClick, header }: { onClick: () => void; header?: ReactNode }) {
   return (
     <>
-      <div className="editor-main-drawer-header mt-2 mb-3 flex items-center gap-1 p-(--navigation-drawer-item-padding,0_1rem) py-0 ps-0">
+      <div className="editor-main-drawer-header flex min-h-(--top-app-bar-height,4rem) items-center gap-1 p-(--navigation-drawer-item-padding,0_1rem) py-0 ps-0">
         <div className="min-w-0 flex-1">{header}</div>
         <MenuButton label={t.library.closeMenu} open onClick={onClick} className="-me-[calc((var(--icon-button-width)-1.5rem)/2)]" />
       </div>
@@ -3114,13 +3117,13 @@ export function FormColumns({
   cards?: boolean;
   sticky?: boolean;
   /** A SectionPane, on large and wider screens against the window's end edge under the top bar (--section-pane-width
-   * wide, fixed while the form scrolls; editor.css lets the content column keep clear of it); below large nothing.
+   * wide, in an absolute strip along the content that its card sticks in while the form scrolls; editor.css lets the content column keep clear of it); below large nothing.
    * Instead of `first` and `side`. */
   pane?: ReactNode;
 }) {
   // On a wide computer screen (large) each of the right column's parts on the theme's outlined card.
   const carded = useAtLeast('large') && cards;
-  const right = `space-y-6 large:col-start-2 ${carded ? siteCardClass('outlined') : ''} ${sticky ? 'large:sticky large:top-24' : ''}`;
+  const right = `space-y-6 large:col-start-2 ${carded ? siteCardClass('outlined') : ''} ${sticky ? 'large:sticky large:top-8' : ''}`;
   return (
     <div
       className={`flex flex-col gap-6 ${
@@ -3131,8 +3134,8 @@ export function FormColumns({
       <div className="min-w-0 space-y-6 large:col-start-1 large:row-span-2 large:row-start-1">{main}</div>
       {side && <div className={`${right} ${first ? 'large:row-start-2' : 'large:row-span-2 large:row-start-1'}`}>{side}</div>}
       {pane && (
-        <div className="editor-section-pane hidden large:fixed large:end-0 large:top-[calc(var(--top-bar-height)+var(--section-pane-gap))] large:z-10 large:block large:w-(--section-pane-width) large:pe-(--section-pane-gap)">
-          {pane}
+        <div className="editor-section-pane hidden large:absolute large:inset-y-0 large:end-0 large:z-10 large:block large:w-(--section-pane-width) large:pe-(--section-pane-gap)">
+          <div className="large:sticky large:top-(--section-pane-gap) large:mt-(--section-pane-gap)">{pane}</div>
         </div>
       )}
     </div>
@@ -3183,7 +3186,7 @@ export function LeadingToken({ kind, value, weight }: { kind: TokenKind; value:
 // ---------------------------------------------------------------------------------------------------
 // The sheet from the bottom
 
-/** A screen's top bar (Screen.tsx): the theme's top app bar (Material 3's), at the top of the screen while it scrolls,
+/** A screen's top bar (Screen.tsx): the theme's top app bar (Material 3's), at the top of the screen (it scrolls away with the page),
  * below a phone's clock, and marked as the theme marks it once the screen has scrolled under it (data-stuck). */
 export function TopAppBar({ children }: { children: ReactNode }) {
   const [stuck, setStuck] = useState(false);
@@ -3194,7 +3197,7 @@ export function TopAppBar({ children }: { children: ReactNode }) {
     return () => removeEventListener('scroll', check);
   }, []);
   return (
-    <SiteTopAppBar className="sticky top-0 z-20 pt-[env(safe-area-inset-top)]" data-stuck={stuck || undefined}>
+    <SiteTopAppBar className="pt-[env(safe-area-inset-top)]" data-stuck={stuck || undefined}>
       {children}
     </SiteTopAppBar>
   );
@@ -3855,14 +3858,22 @@ export function NewChoice<T extends string>({
   );
 }
 
-/** One action of a FAB menu: its icon, its name and where it goes. */
-export type FabAction = { icon: Icon; label: string; href: string };
+/** One action of a FAB menu: its icon, its name and what it does: a link (`href`) or a button (`onClick`). While `busy` its
+ * action runs, and it is disabled as with `disabled`. */
+export type FabAction = { icon: Icon; label: string; href?: string; onClick?: () => void; busy?: boolean; disabled?: boolean };
 
 // An action's icon, drawn.
 const iconOf = ({ icon: Item }: FabAction) => <Item />;
 
+// What an action's element gets besides its icon and name: busy is disabled and aria-busy (a link has neither).
+const fabProps = ({ href, onClick, busy, disabled }: FabAction) => ({
+  href,
+  onClick,
+  ...(href === undefined ? { disabled: disabled || busy, 'aria-busy': busy || undefined } : {}),
+});
+
 /** The screen's main actions at the bottom right (.editor-fab, editor.css): the theme's FAB menu, opened and closed as
- * on the site (setUpFabMenu), or with one action that action as an extended FAB; nothing without any. Drawn in a portal
+ * on the site (setUpFabMenu), or with one action that action as a FAB (its icon, its name as its tooltip and read by screen readers; a link, or a button); nothing without any. Drawn in a portal
  * on <body>, since the screen's entrance animation (a transform) would make its <main> the containing block of a fixed FAB. */
 export function FabMenu({ icon: Glyph, label, items }: { icon: Icon; label: string; items: FabAction[] }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -3879,10 +3890,10 @@ export function FabMenu({ icon: Glyph, label, items }: { icon: Icon; label: stri
           icon={<Glyph />}
           label={label}
           closeLabel={t.common.close}
-          items={items.map((item) => ({ ...item, icon: iconOf(item) }))}
+          items={items.map((item) => ({ label: item.label, icon: iconOf(item), ...fabProps(item) }))}
         />
       ) : (
-        <SiteExtendedFab icon={iconOf(items[0])} label={items[0].label} href={items[0].href} />
+        <SiteFab icon={iconOf(items[0])} label={items[0].label} title={items[0].label} {...fabProps(items[0])} />
       )}
     </div>,
     document.body,

package/src/virtual.d.ts

@@ -27,3 +27,9 @@ declare module 'virtual:theme-coverage' {
   } | null;
   export default coverage;
 }
+
+// The id of the app whose folder the importing file is in (appSelf in site/appSelf.mjs; app contract 3).
+declare module '@app/self' {
+  const self: { readonly id: string };
+  export default self;
+}

package/starter/package.json

@@ -32,7 +32,7 @@
     "@material-symbols/svg-400": "0.48.2",
     "@material/material-color-utilities": "^0.3.0",
     "@milkdown/kit": "^7.22.3",
-    "@morphemecms/cms": "0.11.0",
+    "@morphemecms/cms": "0.12.0",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",

package/theme/components/PageHeading.astro

@@ -0,0 +1,22 @@
+---
+// The top of a page's text (PageLayout.astro): the link back to its parent page and the page's H1 (data-editor="heading", which
+// the editor's preview fills in). Props: parent ({ href, title }), heading, headingHtml (the heading with its coloured words).
+import Icon from '@theme/components/Icon.astro';
+
+interface Props {
+  parent?: { href: string; title: string };
+  heading: string;
+  headingHtml?: string;
+}
+const { parent, heading, headingHtml } = Astro.props;
+---
+
+{parent && (
+  <a href={parent.href} class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
+    <Icon name="arrow-left" size={16} />
+    {parent.title}
+  </a>
+)}
+<h1 data-editor="heading" class="theme-title mt-3 max-w-[22ch]">
+  {headingHtml ? <Fragment set:html={headingHtml} /> : heading}
+</h1>

package/theme/layouts/Base.astro

@@ -164,7 +164,7 @@ const jsonLd = {
   </head>
   <body class="flex min-h-dvh flex-col">
     <a
-      href="#hovedindhold"
+      href="#main-content"
       class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-full focus:bg-accent focus:px-4 focus:py-2 focus:text-on-accent"
     >
       {siteT.theme.skipToContent}
@@ -172,7 +172,7 @@ const jsonLd = {
 
     <Header />
 
-    <main id="hovedindhold" class="flex-1">
+    <main id="main-content" class="flex-1">
       <slot />
     </main>
 

package/theme/layouts/PageLayout.astro

@@ -8,12 +8,23 @@
 // paragraph is the lead (type-lead, ui.css: the --type-lead-* tokens), muted and 52ch wide.
 // data-editor marks what the editor's preview fills in with what is in its form ("Forhåndsvis",
 // packages/editor/src/pagePreview.tsx): the heading, the text, and the booking prompt at the end.
+// A page whose H1 has a section colour (the marker before it, lib/section-marker.mjs) draws the heading and the text up to the
+// first H2 in one panel (data-editor="h1-section", sectionClass); with a column beside the text the panel holds the heading only.
 import Base from '@theme/layouts/Base.astro';
-import Icon from '@theme/components/Icon.astro';
+import PageHeading from '@theme/components/PageHeading.astro';
 import EndBlock from '@theme/components/EndBlock.astro';
 import Block from '@morphemecms/cms/src/standard/Block.astro';
 import { blockLoads, endBlock, sideBlock } from '@morphemecms/cms/src/standard/views';
-import { getPages, pageHeading, pageHeadingHtml, parentPage, stateOf, withoutH1, type Page } from '@morphemecms/cms/site/content';
+import {
+  getPages,
+  h1SectionColor,
+  pageHeading,
+  pageHeadingHtml,
+  parentPage,
+  stateOf,
+  withoutH1,
+  type Page,
+} from '@morphemecms/cms/site/content';
 import { blockTexts, nav } from '@morphemecms/cms/site/site';
 import { firstPicture, picturesOf } from '@morphemecms/cms/site/images.mjs';
 import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
@@ -22,6 +33,7 @@ import { offeredTemplates } from '@morphemecms/cms/site/templates';
 import { markdownHtml } from '@morphemecms/cms/lib/inline';
 import Container from '@theme/components/Container.astro';
 import RichText from '@theme/components/RichText.astro';
+import { introOf, sectionClass } from '@morphemecms/cms/lib/text-sections.mjs';
 import Snackbar from '@theme/ui/Snackbar';
 import { isPreview, livePath, PREVIEW, previewId } from '@morphemecms/cms/site/noindex.mjs';
 import { siteT } from '@morphemecms/cms/src/i18n';
@@ -51,7 +63,10 @@ const picture = firstPicture(page.body);
 // e.g. "Book en tid", as on most pages) is shown across the page below the text and the column next to it; not when
 // it is hidden (RichText.astro leaves hidden blocks out).
 // Without the H1 at the top of the text (the page's heading, drawn above).
-const html = withoutH1(await Astro.slots.render('default'));
+const text = await Astro.slots.render('default');
+const html = withoutH1(text);
+// The colour of the H1's section (the marker before the H1): the heading and the text up to the first H2 are one panel.
+const h1Color = h1SectionColor(text);
 const end = endBlock(html);
 // The questions in the text's "Spørgsmål og svar" blocks (not the hidden ones), for the structured data
 // (an FAQPage, packages/editor/site/schema.ts); the answers as HTML, as on the page (the block's load.ts).
@@ -76,6 +91,12 @@ const side =
   (await blockLoads[sideType].load({}, { texts: blockTexts[sideType] ?? {}, index: 0, path: current, preview, html: sideText })) !== null
     ? sideType
     : null;
+// In a coloured H1 section the text up to the first H2 (intro) is in the panel with the heading; with a column beside the text
+// the text stays whole in its grid and the panel holds the heading only.
+const { intro, rest } = h1Color && !side ? introOf(sideText) : { intro: '', rest: sideText };
+const textClass = side
+  ? 'prose max-w-[66ch]'
+  : 'prose max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:type-lead [&>p:first-child]:text-muted [&>p:first-child]:max-w-[52ch]';
 ---
 
 <Base
@@ -96,28 +117,24 @@ const side =
 >
   <article data-template={template}>
     <Container as="header" class="pt-8 medium:pt-14">
-      {parent && (
-        <a href={parent.href} class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
-          <Icon name="arrow-left" size={16} />
-          {parent.title}
-        </a>
+      {h1Color ? (
+        <section class={sectionClass(h1Color)} data-editor="h1-section">
+          <PageHeading parent={parent} heading={heading} headingHtml={headingHtml} />
+          {intro && (
+            <div data-editor="intro" class={textClass}>
+              <RichText html={intro} path={current} preview={preview} />
+            </div>
+          )}
+        </section>
+      ) : (
+        <PageHeading parent={parent} heading={heading} headingHtml={headingHtml} />
       )}
-      <h1 data-editor="heading" class="theme-title mt-3 max-w-[22ch]">
-        {headingHtml ? <Fragment set:html={headingHtml} /> : heading}
-      </h1>
     </Container>
 
     <Container as="div" class="mt-8 medium:mt-12">
       <div {...(side ? { class: 'page-with-side', 'data-side': template === 'sidebar-left' ? 'left' : 'right' } : {})}>
-        <div
-          data-editor="text"
-          class={
-            side
-              ? 'prose max-w-[66ch]'
-              : 'prose max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:type-lead [&>p:first-child]:text-muted [&>p:first-child]:max-w-[52ch]'
-          }
-        >
-          <RichText html={sideText} path={current} preview={preview} />
+        <div data-editor="text" class={textClass}>
+          <RichText html={rest} path={current} preview={preview} />
         </div>
         {side && (
           <aside class="page-side">

package/theme/styles/global.css

@@ -752,7 +752,8 @@
   }
 
   /* An M3 side sheet's headline in on-surface-variant. */
-  .side-sheet-headline {
+  .side-sheet-headline,
+  .bottom-sheet-container[data-wide='side-sheet'] .bottom-sheet-headline {
     color: var(--muted);
   }