@morphemecms/cms 0.7.1 → 0.8.0

package/src/Screen.tsx

@@ -8,7 +8,8 @@
 // scrolling and keeps clear of a phone's notch. A screen's tabs (`tabs`) are the bottom of the bar, under the title, as wide
 // as the content, and stay with it. The back arrow goes to the screen above, back in the history when that is the screen
 // before (nav.ts up). The content is as wide as a form reads well, or wider for lists and the grid of files (`wide`) and for
-// a form with its fields beside the text (`panel`).
+// a form with its fields beside the text (`panel`). The column (editor.css .editor-column) stands centred on the window,
+// off-centre only as far as the panels beside it require.
 // Under the content of every screen is the editor's footer (EditorFooter.tsx).
 import { useId, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
@@ -30,7 +31,7 @@ export type Back = { href: string; label: string; guard?: (go: () => void) => vo
 // `status`: more about the screen, e.g. when it was last saved: under the title, on a computer after it.
 // `wide`: the content is wider on a computer (lists, the files); `panel`: a form with its other fields
 // beside the text on a wide computer screen (FormColumns in ui.tsx). `drawer`: a button at the end of the
-// bar, after the account (a form's SectionsButton). `home`: the start screen,
+// bar, after the account. `home`: the start screen,
 // with the account on a phone too. `tabs`: the screen's tabs, in the bar, with the open one's content.
 type Props<T extends string> = {
   title: string;
@@ -93,7 +94,13 @@ export default function Screen<T extends string>({
   const id = useId();
   const menu = useMenuOpen();
   const { menuButtonInTopBar } = useMenuLayout();
-  const width = wide ? 'max-w-3xl medium:max-w-5xl' : panel ? 'max-w-3xl large:max-w-6xl' : 'max-w-3xl';
+  // The column's widest width (--column-width: 48rem; 64rem from medium for `wide`, 72rem from large for `panel`); editor.css
+  // (.editor-column) keeps it centred on the window.
+  const width = wide
+    ? 'editor-column [--column-width:48rem] medium:[--column-width:64rem]'
+    : panel
+      ? 'editor-column [--column-width:48rem] large:[--column-width:72rem]'
+      : 'editor-column [--column-width:48rem]';
   // A link out of the screen, through `guard`: the back arrow goes up (nav.ts), the other links as links.
   const leave = (go?: () => void) => (e: React.MouseEvent<HTMLAnchorElement>) => {
     if (!go && !back?.guard) return;
@@ -145,7 +152,7 @@ export default function Screen<T extends string>({
       </div>
       {tabs && (
         <div className="editor-bar-tabs">
-          <div className={`mx-auto medium:px-6 ${width}`}>
+          <div className={`medium:px-6 ${width}`}>
             <TabRow id={id} {...tabs} />
           </div>
         </div>
@@ -155,7 +162,7 @@ export default function Screen<T extends string>({
   return (
     <div className="min-h-dvh">
       {slot ? createPortal(bar, slot) : bar}
-      <main className={`editor-screen mx-auto px-4 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] medium:px-6 medium:pt-8 ${width}`}>
+      <main className={`editor-screen px-4 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] medium:px-6 medium:pt-8 ${width}`}>
         {/* At expanded and wider: the way here, the title and the status, under the bar. */}
         <div className="mb-6 hidden min-w-0 items-center gap-x-2 expanded:flex">
           {crumbs.length > 0 && (

package/src/editor.css

@@ -24,9 +24,10 @@
   --editor-section-gap: 2rem;
   --editor-section-rhythm: 0.625em;
 
-  /* A form's sections pane (SectionPane in ui.tsx): Material 3's 412dp pane against the window's end edge
-     (m3.material.io/foundations/layout/breakpoints/large-extra-large). */
-  --section-pane-width: 25.75rem;
+  /* A form's "on this page" area (SectionPane in ui.tsx) against the window's end edge: its width, the card in it
+     stands --section-pane-gap in from the end edge and from under the top bar. */
+  --section-pane-width: 16rem;
+  --section-pane-gap: 2rem;
 }
 
 /* In dark mode the score's number in the light colours, which are read on the dark. */
@@ -372,9 +373,73 @@
   }
 }
 
-/* The sections pane (FormColumns' `pane` in ui.tsx) stands against the window's end edge on large and wider: the content
-   keeps clear of it, so the form is centred to its left, and the save bar ends where the pane begins. */
+/* The type of the "on this page" card (SectionPane and SectionList in ui.tsx), from the theme's type roles: the small
+   caption, the form's name under it, and a section's name (the one in view in medium weight). */
+.section-pane-caption {
+  font-size: var(--type-label-small-size);
+  line-height: var(--type-label-small-line-height);
+  font-weight: var(--type-label-small-weight);
+  letter-spacing: var(--type-label-small-tracking);
+}
+.section-pane-title {
+  font-size: var(--type-headline-small-size);
+  line-height: var(--type-headline-small-line-height);
+  font-weight: var(--type-headline-small-weight);
+  letter-spacing: var(--type-headline-small-tracking);
+}
+.section-list-item {
+  font-size: var(--type-body-medium-size);
+  line-height: var(--type-body-medium-line-height);
+  font-weight: var(--type-body-medium-weight);
+  letter-spacing: var(--type-body-medium-tracking);
+}
+.section-list-item[aria-current='location'] {
+  font-weight: var(--type-label-medium-weight);
+}
+
+/* The content column (.editor-column: Screen.tsx's tabs row and its main) stands centred on the window, not in the space
+   beside the panels. --column-start and --column-end are the widths of the panels beside the content: the navigation
+   rail from medium, the standard drawer instead of it from expanded while it is open (:root[data-sidebar='open']; the
+   modal drawer below expanded is over the content, so the rail counts), and the "on this page" area at the end from large
+   (.editor-section-pane). The column keeps its width (--column-width, set by Screen.tsx) and moves off the middle only as
+   far as it must to stay clear of the panels: its start margin is the middle of the window less the start panel, but
+   not less than nothing and not more than the space left between the panels less the column. Only when that space is
+   smaller than the column does it get narrower. (Measured against the window's width, 100vw, scrollbar and all.) Below
+   medium nothing stands beside the content and the column is centred by auto margins. */
+:root {
+  --column-start: 0px;
+  --column-end: 0px;
+}
+.editor-column {
+  max-width: var(--column-width);
+  margin-inline: auto;
+}
+@media (width >= theme(--breakpoint-medium)) {
+  :root {
+    --column-start: var(--navigation-rail-width, 5.5rem);
+  }
+  .editor-column {
+    margin-inline-start: clamp(
+      0px,
+      (100vw - var(--column-width)) / 2 - var(--column-start),
+      100vw - var(--column-start) - var(--column-end) - var(--column-width)
+    );
+    margin-inline-end: auto;
+  }
+}
+@media (width >= theme(--breakpoint-expanded)) {
+  :root[data-sidebar='open'] {
+    --column-start: var(--navigation-drawer-width, 22.5rem);
+  }
+}
+
+/* The "on this page" area (FormColumns' `pane` in ui.tsx) stands against the window's end edge on large and wider: the
+   content keeps clear of it (its end padding; --column-end tells the column, so it stays centred on the window while
+   there is room), and the save bar ends where the area begins. */
 @media (width >= theme(--breakpoint-large)) {
+  :root:has(.editor-section-pane) {
+    --column-end: var(--section-pane-width);
+  }
   .editor-content:has(.editor-section-pane) {
     padding-inline-end: var(--section-pane-width);
   }

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

@@ -60,7 +60,7 @@ export const parts: Messages['parts'] = {
     editorFooter:
       'Linjen nederst på hver skærm, under indholdet, med et link til licenserne for det, hjemmesiden og editoren er lavet med.',
     sectionList:
-      'Afsnittene i en lang formular som en liste, hvor det afsnit, der ses, er markeret. På en stor skærm står den i et panel for enden af formularen, som knappen yderst i topbjælken viser og skjuler; på en mindre skærm åbner knappen den i et sidepanel, der lukker, når man vælger et afsnit.',
+      'Afsnittene i en lang formular som en »på denne side«-liste på et kort: almindelig tekst, det afsnit, der ses, i den primære farve, og formularens navn over. Den bliver i billedet for enden af formularen på en stor skærm; på en mindre skærm vises den ikke.',
   },
   /** Over the parts: the search, and the groups to show one of (as Material 3 sorts its components). */
   filter: {

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

@@ -21,6 +21,10 @@ export const theme: Messages['theme'] = {
   seeAll: 'Se alle',
   blog: 'Blog',
   relatedPosts: 'Relaterede indlæg',
+  share: 'Del',
+  shareOn: (network: string) => `Del på ${network}`,
+  copyLink: 'Kopiér link',
+  linkCopied: 'Linket er kopieret',
   readingTime: (minutes) => `${minutes} min. læsetid`,
   postsAbout: (count, tag) => `${count} indlæg om ${tag}`,
   notFound: 'Siden findes ikke',

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

@@ -60,7 +60,7 @@ export const parts = {
     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.',
+      'The sections of a long form as an "on this page" list on a card: plain text, the section in view in the accent color, and the form’s name over it. It stays in view at the end of the form on a large screen; on a smaller screen it is not shown.',
   },
   /** Over the parts: the search, and the groups to show one of (as Material 3 sorts its components). */
   filter: {

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

@@ -21,6 +21,10 @@ export const theme = {
   seeAll: 'See all',
   blog: 'Blog',
   relatedPosts: 'Related posts',
+  share: 'Share',
+  shareOn: (network: string) => `Share on ${network}`,
+  copyLink: 'Copy link',
+  linkCopied: 'Link copied',
   readingTime: (minutes: number) => `${minutes} min read`,
   postsAbout: (count: number, tag: string) => `${count} ${count === 1 ? 'post' : 'posts'} about ${tag}`,
   notFound: 'Page not found',

package/src/icon.tsx

@@ -37,7 +37,7 @@ function useMaterialLoaded(wanted: boolean) {
 
 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,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',
+  '/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,facebook-logo,flower-lotus,graduation-cap,hand-heart,handshake,heart,house,info,keyboard,leaf,lifebuoy,lightbulb,link-simple,linkedin-logo,list,magnifying-glass,map-pin,map-trifold,medal,minus,moon,pencil-simple,phone,pinterest-logo,question,sun,ticket,train,trash,user,users,users-three,video-camera,warning-circle,wheelchair,x,x-logo}.svg',
   { query: '?raw', import: 'default', eager: true },
 );
 // The filled ones ("Video": its play button; the navigation drawer's active item).

package/src/pagePreview.tsx

@@ -15,6 +15,9 @@
 // page of another one. As on the site but for this: a changed text has the pictures themselves (not
 // the sizes the build makes), its words are not yet links to other pages (packages/editor/site/autolinks.mjs), and
 // a video written in it as HTML is the video.
+//
+// A post's text starts with its lead, a paragraph drawn larger and before the picture (data-editor="lead",
+// theme/layouts/PostLayout.astro; lib/lead.mjs). The preview splits the text the same way, for a post only (postLead.mjs).
 import { useRef, useState, type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { flushSync } from 'react-dom';
@@ -23,6 +26,7 @@ import { sectionClass, sectionsOf } from '../lib/text-sections.mjs';
 import { BREAKPOINTS, breakpointOf, type Breakpoint } from '../lib/breakpoints.mjs';
 import { processor } from '../lib/markdown';
 import { splitPicture } from '../lib/crop.mjs';
+import { isPostPage, leadFill } from './postLead.mjs';
 import { preview as drawBlock, siteBlocks } from './registry';
 import { shownAt } from './images';
 import { pageH1 } from './sections.mjs';
@@ -40,6 +44,8 @@ export type PageDraft = {
   headingHtml?: string;
   /** The picture at the top (a blog post's); null: none. */
   image?: { src: string; alt: string } | null;
+  /** A blog post (not a page): only its text starts with a lead. */
+  post?: boolean;
   /** The text, in Markdown with its blocks. */
   body?: string;
   /** What the blocks are drawn with. */
@@ -136,8 +142,22 @@ export async function pageDocument(draft: PageDraft): Promise<string> {
       end.innerHTML = blockHtml(block.type, block.props, draft.data);
     } else end?.remove();
     const text = doc.querySelector('[data-editor="text"]')!;
+    // A post's lead goes before its picture (or before its text when it has none), as in PostLayout.astro.
+    const { lead, rest } = leadFill(html, isPostPage(draft));
+    let leadBox = doc.querySelector('[data-editor="lead"]');
+    if (!lead) leadBox?.remove();
+    else {
+      if (!leadBox) {
+        // The text's own tag and class plus post-lead, as the layout does (a theme may replace the layout).
+        leadBox = doc.createElement(text.tagName);
+        leadBox.setAttribute('data-editor', 'lead');
+        leadBox.className = `${text.className} post-lead`;
+        (doc.querySelector('[data-editor="image"]') ?? text).before(leadBox);
+      }
+      leadBox.innerHTML = lead;
+    }
     const types = siteBlocks.map((b) => b.type);
-    text.innerHTML = sectionsOf(html)
+    text.innerHTML = sectionsOf(rest)
       .map((run) => {
         const inner = splitBlocks(run.html, types)
           .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))

package/src/postLead.d.mts

@@ -0,0 +1,7 @@
+export function isPostPage(draft: {
+    post?: boolean;
+}): boolean;
+export function leadFill(html: string, isPost: boolean): {
+    lead: string;
+    rest: string;
+};

package/src/postLead.mjs

@@ -0,0 +1,9 @@
+// What the editor's preview puts in a post's lead and in its text: a post's text is split with splitLead, a page's never is.
+// Exposes isPostPage (reads draft.post from pagePreview.tsx) and leadFill. Depends on lib/lead.mjs.
+import { splitLead } from '../lib/lead.mjs';
+
+/** @param {{ post?: boolean }} draft */
+export const isPostPage = (draft) => draft.post === true;
+
+/** @param {string} html the text as HTML @param {boolean} isPost @returns {{ lead: string, rest: string }} */
+export const leadFill = (html, isPost) => (isPost ? splitLead(html) : { lead: '', rest: html });

package/src/postLead.test.mjs

@@ -0,0 +1,28 @@
+// Tests for isPostPage (draft.post) and leadFill (postLead.mjs).
+// Run with: node --test src/postLead.test.mjs
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { isPostPage, leadFill } from './postLead.mjs';
+
+test('a post with a paragraph first has a lead', () => {
+  assert.deepEqual(leadFill('<p>Hi</p><h2>A</h2>', true), { lead: '<p>Hi</p>', rest: '<h2>A</h2>' });
+});
+
+test('a post with a heading first has no lead', () => {
+  assert.deepEqual(leadFill('<h2>A</h2><p>Hi</p>', true), { lead: '', rest: '<h2>A</h2><p>Hi</p>' });
+});
+
+test('a page with a paragraph first stays unsplit', () => {
+  assert.deepEqual(leadFill('<p>Hi</p><h2>A</h2>', false), { lead: '', rest: '<p>Hi</p><h2>A</h2>' });
+});
+
+test('a post without a picture, text starting with a paragraph, has a lead', () => {
+  const isPost = isPostPage({ post: true });
+  assert.deepEqual(leadFill('<p>Hi</p>', isPost), { lead: '<p>Hi</p>', rest: '' });
+});
+
+test('only a draft marked post is a post', () => {
+  assert.equal(isPostPage({ post: true }), true);
+  assert.equal(isPostPage({ post: false }), false);
+  assert.equal(isPostPage({}), false);
+});

package/src/ui.tsx

@@ -38,14 +38,12 @@ import {
   CaretUp,
   Check,
   Funnel,
-  Layout,
   LockSimple,
   LockSimpleOpen,
   PencilSimple,
   Plus,
   Sidebar,
   SidebarSimple,
-  SquareHalf,
   X,
   type Icon,
 } from '@phosphor-icons/react';
@@ -90,8 +88,6 @@ import {
   SiteNavigationDrawerToggle,
   siteNavigationDrawerDialogClass,
   siteFocusNavigationDrawerItem,
-  siteSideSheet,
-  siteSideSheetDialogClass,
   SiteSegmentedButton,
   SiteSideSheet,
   SiteTab,
@@ -131,15 +127,15 @@ import { menuLayout } from '../lib/menu-layout.mjs';
 
 /** The theme's button (Material 3's buttons): filled, the one thing to do; tonal, an important step that is not the
  * main one; elevated, one on a coloured background; outlined, another choice beside it ("Annuller" too); text, a small
- * step on the side (Fjern, Tilføj). medium (the default): side by side, and across the screen or a sheet with `wide`
- * (Gem ændringer); small: in a line of text or by a field (Skift billede, Tilføj tag). */
+ * step on the side (Fjern, Tilføj). medium (the default): side by side, and with `wide` across the screen or a sheet on a
+ * phone (compact) and the width of its text from medium (Gem ændringer); small: in a line of text or by a field (Skift billede, Tilføj tag). */
 export type { ButtonKind };
 export type ButtonSize = 'medium' | 'small';
 
 type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
   kind?: ButtonKind;
   size?: ButtonSize;
-  /** Across the screen or the sheet. */
+  /** Across the screen or the sheet on a phone (compact), the width of its text from medium. */
   wide?: boolean;
   /** Before the text. */
   icon?: Icon;
@@ -148,7 +144,7 @@ type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
 
 export function Button({ icon: Glyph, wide, className, children, ...rest }: ButtonProps) {
   return (
-    <SiteButton icon={Glyph && <Glyph />} className={[wide && 'w-full', className].filter(Boolean).join(' ')} {...rest}>
+    <SiteButton icon={Glyph && <Glyph />} className={[wide && 'w-full medium:w-auto', className].filter(Boolean).join(' ')} {...rest}>
       {children}
     </SiteButton>
   );
@@ -164,7 +160,12 @@ export function LinkButton({
   ...rest
 }: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & { kind?: ButtonKind; size?: ButtonSize; wide?: boolean; icon?: Icon }) {
   return (
-    <SiteButton href={href} icon={Glyph && <Glyph />} className={[wide && 'w-full', className].filter(Boolean).join(' ')} {...rest}>
+    <SiteButton
+      href={href}
+      icon={Glyph && <Glyph />}
+      className={[wide && 'w-full medium:w-auto', className].filter(Boolean).join(' ')}
+      {...rest}
+    >
       {children}
     </SiteButton>
   );
@@ -2610,14 +2611,13 @@ export function SideSheet({ title, onClose, children }: { title: string; onClose
   );
 }
 
-/** One entry of a SectionList: its id, its name and its icon, and evt. the theme's Badge (how many are new there; or a
- * dot). */
-export type NavigationItem = { id: string; label: string; icon: Icon; badge?: number | boolean };
+/** One entry of a SectionList: its id, its name and evt. the theme's Badge (how many are new there; or a dot). */
+export type NavigationItem = { id: string; label: string; badge?: number | boolean };
 
-/** The sections of a long form (a page's, a post's: Indhold, Status, Andre felter …), as the theme's list (Material 3's
- * List and ListItem): each with its icon, its name and evt. its badge, the one open or in view (`value`) selected; a tap
- * calls `onChange` with its id (EntryForm scrolls to it). `title` names the navigation. In a SectionPane on large and
- * wider screens, in a SectionSheet below. */
+/** The sections of a long form (a page's, a post's: Indhold, Status, Andre felter …) as an "on this page" list, as on
+ * m3.material.io: plain text, no icons and no surface; the one in view (`value`) in the accent colour and medium
+ * weight (`aria-current="location"`). A tap calls `onChange` with its id (EntryForm scrolls to it). Evt. the theme's
+ * Badge after the name. `title` names the navigation. In a SectionPane. */
 export function SectionList({
   title,
   items,
@@ -2631,94 +2631,39 @@ export function SectionList({
 }) {
   return (
     <nav aria-label={title}>
-      <ul className={siteListClasses('standard', 'none')}>
-        {items.map(({ id, label, icon, badge }) => {
-          const open = id === value;
-          return (
-            <ListItem
-              key={id}
-              icon={icon}
-              iconSelected={open}
-              selected={open}
-              aria-current={open ? 'location' : undefined}
-              headline={label}
-              trailing={badge ? <SiteBadge count={badge === true ? undefined : badge} /> : undefined}
+      <ul className="m-0 flex list-none flex-col gap-1 p-0">
+        {items.map(({ id, label, badge }) => (
+          <li key={id}>
+            <button
+              type="button"
+              aria-current={id === value ? 'location' : undefined}
               onClick={() => onChange(id)}
-            />
-          );
-        })}
+              className="section-list-item flex w-full items-center gap-2 rounded-(--block-radius-small) px-2 py-2 text-start text-muted transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none aria-[current=location]:text-accent"
+            >
+              <span className="min-w-0">{label}</span>
+              {badge ? <SiteBadge count={badge === true ? undefined : badge} /> : null}
+            </button>
+          </li>
+        ))}
       </ul>
     </nav>
   );
 }
 
-/** The pane at the end of a long form on large and wider screens (Material 3's 412dp pane): the theme's standard side
- * sheet titled `title`, with the form's SectionList in it (`children`); it stays in view while the form scrolls. Nothing
- * when it is not `open`: the button in the top bar (SectionsButton) shows and hides it. Its place in the form is
- * FormColumns' `pane`, against the window's end edge; below large it is not drawn (a SectionSheet is). */
-export function SectionPane({ title, open, children }: { title: string; open: boolean; children: ReactNode }) {
-  const id = useId();
-  if (!open) return null;
+/** 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`
+ * (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 (
-    <SiteSideSheet headline={title} headlineId={id} className="editor-reveal h-full w-full [--side-sheet-width:var(--section-pane-width)]">
+    <div className={`${siteCardClass('outlined')} max-h-[calc(100dvh-var(--top-bar-height)-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}
-    </SiteSideSheet>
-  );
-}
-
-/** The sections below large: the theme's modal side sheet (Material 3's), from the end edge over the screen, titled
- * `title`, with the form's SectionList in it (`children`). Controlled: `open` shows it (the theme's `sideSheet()` slides
- * it in; with reduced motion it just appears), and `onClose` is called when it has been closed by its cross, Escape or a
- * tap on the scrim; a choice closes it by the caller setting `open` to false. The page does not scroll while it is
- * open (the theme's control), and it is given back if the sheet is taken away while open (the window grows to large). */
-export function SectionSheet({
-  title,
-  open,
-  onClose,
-  children,
-}: {
-  title: string;
-  open: boolean;
-  onClose: () => void;
-  children: ReactNode;
-}) {
-  const id = useId();
-  const dialog = useRef<HTMLDialogElement>(null);
-  const control = useRef<ReturnType<typeof siteSideSheet> | undefined>(undefined);
-  const closed = useRef(onClose);
-  closed.current = onClose;
-  useEffect(() => {
-    const el = dialog.current!;
-    control.current = siteSideSheet(el);
-    const done = () => closed.current();
-    el.addEventListener('close', done);
-    return () => {
-      el.removeEventListener('close', done);
-      if (el.open) el.close();
-      document.documentElement.style.overflow = '';
-    };
-  }, []);
-  useEffect(() => {
-    if (open) control.current?.open();
-    else void control.current?.close();
-  }, [open]);
-  return (
-    <dialog ref={dialog} aria-labelledby={id} className={siteSideSheetDialogClass}>
-      <SiteSideSheet kind="modal" headline={title} headlineId={id} closeLabel={t.common.close}>
-        {children}
-      </SiteSideSheet>
-    </dialog>
+    </div>
   );
 }
 
-/** The button at the end of the top bar (Screen's `drawer`) for a form's sections: on large and wider it shows and hides
- * the SectionPane (`open`: it is shown, so the icon is `right_panel_close` (`square-half`), else `right_panel_open` (`layout`)),
- * below it opens the SectionSheet, so the icon is always `right_panel_open`. `label` names it. */
-export function SectionsButton({ label, open, onClick }: { label: string; open?: boolean; onClick: () => void }) {
-  const pane = useAtLeast('large');
-  return <IconButton icon={pane && open ? SquareHalf : Layout} label={label} aria-expanded={open} onClick={onClick} />;
-}
-
 /** The editor's main navigation (Material 3's navigation drawer, the theme's, in its design): the site's parts in sections
  * (`MainDrawerSection`, `MainDrawerItem`), at the full height of the window, with the menu button at the top. From medium
  * and wider a navigation rail (`rail`: its destinations, `MainRailItem` and `MainRailSectionItem`) stands in its place while
@@ -3152,8 +3097,8 @@ export function FormColumns({
   side?: ReactNode;
   cards?: boolean;
   sticky?: boolean;
-  /** A SectionPane, on large and wider screens against the window's end edge under the top bar (412dp, fixed while the form
-   * scrolls; editor.css lets the content column keep clear of it, so `main` is centred to its left); below large nothing.
+  /** 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.
    * Instead of `first` and `side`. */
   pane?: ReactNode;
 }) {
@@ -3170,7 +3115,7 @@ 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-(--top-bar-height) large:z-10 large:block large:h-[calc(100dvh-var(--top-bar-height))] large:w-(--section-pane-width)">
+        <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>
       )}

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.7.1",
+    "@morphemecms/cms": "0.8.0",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",

package/starter/src/data/social.json

@@ -0,0 +1,14 @@
+{
+  "facebook": "",
+  "instagram": "",
+  "linkedin": "",
+  "x": "",
+  "youtube": "",
+  "tiktok": "",
+  "pinterest": "",
+  "shareFacebook": true,
+  "shareX": true,
+  "shareLinkedin": true,
+  "sharePinterest": true,
+  "shareCopyLink": true
+}

package/theme/components/PostAuthor.astro

@@ -0,0 +1,20 @@
+---
+// The author of a blog post: a round picture (when the site has one), the name and the role under it.
+// Props: name, role, portrait. A theme may replace this file to redesign the author.
+import Img from '@theme/components/Img.astro';
+
+interface Props {
+  name: string;
+  role?: string;
+  portrait?: string;
+}
+const { name, role, portrait } = Astro.props;
+---
+
+<div class="flex items-center gap-3">
+  {portrait && <Img src={portrait} alt="" loading="eager" class="size-11 rounded-full object-cover object-[50%_20%]" sizes="44px" />}
+  <div class="leading-snug">
+    <span class="block font-medium">{name}</span>
+    {role && <span class="block type-body-medium text-muted">{role}</span>}
+  </div>
+</div>

package/theme/components/PostCard.tsx

@@ -0,0 +1,26 @@
+// One related post under a blog post (RelatedPosts.astro): a Material card (ui/Card.tsx) with the post's picture, its
+// title, and its date and reading time (PostMeta.tsx). A theme may replace this file to redesign the card.
+import { BREAKPOINTS } from '@morphemecms/cms/lib/breakpoints.mjs';
+import Card from '@theme/ui/Card';
+import Img from '@theme/components/Img';
+import PostMeta from '@theme/components/PostMeta';
+import type { PostView } from '@theme/components/posts';
+
+export default function PostCard({ post }: { post: PostView }) {
+  return (
+    <Card as="article" href={post.href} className="h-full overflow-hidden">
+      {post.image && (
+        <Img
+          image={post.image}
+          alt={post.imageAlt ?? ''}
+          sizes={`(min-width: ${BREAKPOINTS.medium}px) 33vw, 100vw`}
+          className="aspect-[4/3] w-full object-cover"
+        />
+      )}
+      <div className="p-4">
+        <h3 className="type-title-medium">{post.title}</h3>
+        <PostMeta post={post} className="mt-2" />
+      </div>
+    </Card>
+  );
+}

package/theme/components/PostHeader.astro

@@ -0,0 +1,36 @@
+---
+// The header of a blog post: back link, title, author (from site), byline with tags, and share row, left-aligned.
+// Props: title, post (PostView), tags, share (ShareRow's props). A theme may replace this file to redesign the header.
+import Icon from '@theme/components/Icon.astro';
+import PostAuthor from '@theme/components/PostAuthor.astro';
+import PostMeta from '@theme/components/PostMeta';
+import ShareRow from '@theme/components/ShareRow.astro';
+import type { PostView } from '@theme/components/posts';
+import type { ShareId } from '@morphemecms/cms/site/social.mjs';
+import { site } from '@morphemecms/cms/site/site';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  title: string;
+  post: PostView;
+  tags: { label: string; href: string }[];
+  share: { url: string; title: string; picture?: string; share: ShareId[] };
+}
+const { title, post, tags, share } = Astro.props;
+---
+
+<header class="mx-auto max-w-3xl px-5 pt-8 medium:px-8 medium:pt-14">
+  <a href="/blog/" class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
+    <Icon name="arrow-left" size={16} /> {siteT.theme.blog}
+  </a>
+  <h1 data-editor="heading" class="theme-title mt-3">
+    {title}
+  </h1>
+  <div class="mt-6">
+    <PostAuthor name={site.name} role={site.role} portrait={site.portrait} />
+  </div>
+  <PostMeta post={post} tags={tags} className="mt-3" />
+  <div class="mt-4">
+    <ShareRow {...share} />
+  </div>
+</header>