@morphemecms/cms 0.9.1 → 0.10.0-next-20261105172247

package/scripts/check-language.mjs

@@ -0,0 +1,105 @@
+// Checks that tracked files outside the language files hold no Danish text (a Danish letter, or a Danish dictionary value).
+// Run: npm run check:language, or node scripts/check-language.mjs; --all ignores PENDING.
+// Depends on: lib/danish.mjs, Vite (loads the dictionaries), git (lists the files).
+import { execFileSync } from 'node:child_process';
+import { closeSync, existsSync, openSync, readFileSync, readSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { createServer } from 'vite';
+import { danishValuesOf, findDanish, isLanguagePath } from '../lib/danish.mjs';
+
+// Path prefixes not converted to English yet. Each batch of docs/superpowers/plans/2026-11-04-english-source.md
+// removes its own. The last batch deletes the list.
+const PENDING = [
+  'AGENTS.md',
+  'README.md',
+  'astro.mjs',
+  'defaults/',
+  'demo/',
+  'lib/',
+  'pages/',
+  'scripts/',
+  'site/',
+  'src/',
+  'starter/',
+  'theme/',
+  'worker/',
+];
+
+const root = fileURLToPath(new URL('..', import.meta.url));
+const all = process.argv.includes('--all');
+
+/** Whether the first 8000 bytes of a file hold a zero byte. @param {string} file */
+function isBinary(file) {
+  const fd = openSync(file, 'r');
+  try {
+    const buffer = Buffer.alloc(8000);
+    const n = readSync(fd, buffer, 0, 8000, 0);
+    return buffer.subarray(0, n).includes(0);
+  } finally {
+    closeSync(fd);
+  }
+}
+
+/** Whether a path is left out of the check. @param {string} path */
+function isSkipped(path) {
+  if (isLanguagePath(path)) return true;
+  if (path === 'CHANGELOG.md' || path === 'package-lock.json') return true;
+  if (path.startsWith('docs/superpowers/')) return true;
+  if (!all && PENDING.some((prefix) => path.startsWith(prefix))) return true;
+  if (!existsSync(`${root}${path}`)) return true;
+  return isBinary(`${root}${path}`);
+}
+
+const names = execFileSync('git', ['ls-files', '-z'], { cwd: root, encoding: 'utf8', maxBuffer: 1 << 28 })
+  .split('\0')
+  .filter(Boolean);
+const paths = names.filter((path) => !isSkipped(path));
+
+const server = await createServer({
+  root,
+  configFile: false,
+  logLevel: 'silent',
+  appType: 'custom',
+  server: { middlewareMode: true, hmr: false },
+  optimizeDeps: { noDiscovery: true },
+});
+let danishValues;
+try {
+  const danish = [(await server.ssrLoadModule('/src/i18n/da-DK/index.ts')).daDK];
+  if (existsSync(`${root}defaults/i18n/da-DK/index.ts`)) {
+    const defaults = await server.ssrLoadModule('/defaults/i18n/da-DK/index.ts');
+    for (const value of Object.values(defaults)) {
+      if (value && typeof value === 'object') danish.push(value);
+    }
+  }
+  const english = [(await server.ssrLoadModule('/src/i18n/en-US/index.ts')).enUS];
+  danishValues = danishValuesOf(danish, english);
+} finally {
+  await server.close();
+}
+
+let count = 0;
+const filesWithMatches = new Set();
+/** @param {string} path @param {{ line: number, match: string }[]} matches */
+function report(path, matches) {
+  for (const { line, match } of matches) {
+    console.log(`${path}:${line}  ${match}`);
+    count++;
+    filesWithMatches.add(path);
+  }
+}
+
+for (const path of paths) {
+  report(
+    path,
+    findDanish(path, new Set()).map((m) => ({ ...m, line: 0 })),
+  );
+  report(path, findDanish(readFileSync(`${root}${path}`, 'utf8'), danishValues));
+}
+
+if (count > 0) {
+  console.log(`${count} Danish texts in ${filesWithMatches.size} files outside the language files.`);
+  process.exitCode = 1;
+} else {
+  console.log('No Danish outside the language files.');
+}

package/scripts/editor-roundtrip.mjs

@@ -5,12 +5,13 @@
 // sections as blocks (packages/editor/src/sections.mjs) and read back: the sections must be the same, a section
 // of text with the same heading and the same HTML. Every page is also read into sections as the front page (as the
 // site reads the page that is the front page without the editor, partsOfMarkdown in sections.mjs, packages/editor/site/home.ts):
-// they must be those the editor reads. A page whose template is changed and changed back has the same front matter (the default leaves no key). Run: npm run check:editor [files...]
+// they must be those the editor reads. A page whose template is changed and changed back has the same front matter (the default leaves no key; template-round-trip.mjs). Run: npm run check:editor [files...]
 // A built-in sample with section colours checks that the editor and the site give the front page's sections the same colours.
 // Milkdown needs a DOM; jsdom stands in for the browser.
 import { existsSync, readFileSync, readdirSync } from 'node:fs';
 import { join } from 'node:path';
 import { JSDOM } from 'jsdom';
+import { templateRoundTripProblem } from './template-round-trip.mjs';
 
 const dom = new JSDOM('<!doctype html><html><body></body></html>', { pretendToBeVisual: true });
 globalThis.window = dom.window;
@@ -141,6 +142,7 @@ const frontSections = async (body, parts) => [
 }
 
 for (const file of files) {
+  const isPage = file.replaceAll('\\', '/').includes('src/content/pages/');
   if (file.endsWith('.json')) {
     const { sections, intro } = JSON.parse(readFileSync(file, 'utf8'));
     const field = textOf[file];
@@ -161,20 +163,13 @@ for (const file of files) {
   }
   // The template (templateWritten): the theme's default leaves no key; another one is written; changing back gives the
   // front matter as it was (without the key).
-  if (file.includes('src/content/pages/')) {
-    const [fallback] = STANDARD_TEMPLATES;
-    const plain = writeFields(yaml, { template: '' });
-    const chosen = writeFields(plain, { template: templateWritten('sidebar-left', STANDARD_TEMPLATES) });
-    const back = writeFields(chosen, { template: templateWritten(fallback, STANDARD_TEMPLATES) });
-    if (
-      !/^template: sidebar-left$/m.test(chosen) ||
-      back !== plain ||
-      writeFields(plain, { template: templateWritten(fallback, STANDARD_TEMPLATES) }) !== plain
-    ) {
+  if (isPage) {
+    const problem = templateRoundTripProblem(yaml, { writeFields, templateWritten, templates: STANDARD_TEMPLATES });
+    if (problem) {
       failed++;
       console.log(`
 ✗ ${file}
-  Skabelonen skiftet og skiftet tilbage giver ikke det samme front matter`);
+  Skabelonen skiftet og skiftet tilbage giver ikke det samme front matter (${problem})`);
       continue;
     }
   }
@@ -182,12 +177,12 @@ for (const file of files) {
   // As in the editor: with the free lines between the blocks, written without them.
   // A page also has the first-heading rule: opening and saving it must not change it.
   const made = makeEditor(root, body).use(spacing);
-  const editor = await (file.includes('src/content/pages/') ? made.use(firstHeading) : made).create();
+  const editor = await (isPage ? made.use(firstHeading) : made).create();
   editor.action((ctx) => ctx.get(editorViewCtx).dispatch(ctx.get(editorViewCtx).state.tr));
   const saved = editor.action(markdownOf);
   const parts = editor.action(partsOf);
   await editor.destroy();
-  if (file.includes('src/content/pages/')) {
+  if (isPage) {
     const [editors, site] = [
       await comparable('', sectionsFromParts(parts, frontLeads)),
       await comparable('', sectionsFromParts(partsOfMarkdown(body), frontLeads)),

package/scripts/template-round-trip.mjs

@@ -0,0 +1,22 @@
+// Checks that a page's front matter survives a template change and change back (used by editor-roundtrip.mjs).
+// Exports: templateRoundTripProblem(yaml, { writeFields, templateWritten, templates }). No imports; the callers pass the functions.
+const TEMPLATE_LINE = /^template: ("sidebar-left"|sidebar-left)$/m;
+
+/**
+ * Change the template of the front matter to sidebar-left and back to the default; the result must be the front matter as it was.
+ *
+ * @param {string} yaml Front matter text without the --- lines.
+ * @param {{ writeFields: (yaml: string, fields: object) => string, templateWritten: (id: string, templates: string[]) => string, templates: string[] }} deps
+ * @returns {string | null} A problem text, or null when the round trip holds.
+ */
+export function templateRoundTripProblem(yaml, { writeFields, templateWritten, templates }) {
+  const [fallback] = templates;
+  const plain = writeFields(yaml, { template: '' });
+  const chosen = writeFields(plain, { template: templateWritten('sidebar-left', templates) });
+  const back = writeFields(chosen, { template: templateWritten(fallback, templates) });
+  if (!TEMPLATE_LINE.test(chosen)) return 'the template line is not written';
+  if (back !== plain) return 'changing back does not give the front matter as it was';
+  if (writeFields(plain, { template: templateWritten(fallback, templates) }) !== plain)
+    return 'the default template changes the front matter';
+  return null;
+}

package/scripts/template-round-trip.test.mjs

@@ -0,0 +1,26 @@
+// Tests templateRoundTripProblem (template-round-trip.mjs) with the real writeFields and templateWritten.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { writeFields } from '../src/frontmatter.mjs';
+import { STANDARD_TEMPLATES, templateWritten } from '../lib/page-template.mjs';
+import { templateRoundTripProblem } from './template-round-trip.mjs';
+
+const deps = { writeFields, templateWritten, templates: STANDARD_TEMPLATES };
+
+test('a page with no template round-trips', () => {
+  assert.equal(templateRoundTripProblem('title: "X"', deps), null);
+});
+
+test('a page with a template round-trips', () => {
+  assert.equal(templateRoundTripProblem('title: "X"\ntemplate: "sidebar-right"', deps), null);
+});
+
+test('the chosen front matter has the template line', () => {
+  const chosen = writeFields('title: "X"', { template: templateWritten('sidebar-left', STANDARD_TEMPLATES) });
+  assert.match(chosen, /^template: "?sidebar-left"?$/m);
+});
+
+test('a writer that drops other keys is reported', () => {
+  const broken = (yaml, fields) => (fields.template ? `template: "${fields.template}"` : writeFields(yaml, fields));
+  assert.notEqual(templateRoundTripProblem('title: "X"', { ...deps, writeFields: broken }), null);
+});

package/site/icons.d.mts

@@ -151,6 +151,7 @@ export const MATERIAL_SYMBOLS: {
     'currency-circle-dollar': string;
     'cursor-click': string;
     database: string;
+    desktop: string;
     'device-mobile': string;
     'door-open': string;
     'download-simple': string;
@@ -341,6 +342,7 @@ export const LUCIDE: {
     'currency-circle-dollar': string;
     'cursor-click': string;
     database: string;
+    desktop: string;
     'device-mobile': string;
     'door-open': string;
     'download-simple': string;
@@ -531,6 +533,7 @@ export const PACK_MAPS: {
         'currency-circle-dollar': string;
         'cursor-click': string;
         database: string;
+        desktop: string;
         'device-mobile': string;
         'door-open': string;
         'download-simple': string;
@@ -719,6 +722,7 @@ export const PACK_MAPS: {
         'currency-circle-dollar': string;
         'cursor-click': string;
         database: string;
+        desktop: string;
         'device-mobile': string;
         'door-open': string;
         'download-simple': string;

package/site/icons.mjs

@@ -165,6 +165,7 @@ export const MATERIAL_SYMBOLS = {
   'currency-circle-dollar': 'paid',
   'cursor-click': 'ads_click',
   database: 'database',
+  desktop: 'desktop_windows',
   'device-mobile': 'mobile',
   'door-open': 'door_open',
   'download-simple': 'download',
@@ -356,6 +357,7 @@ export const LUCIDE = {
   'currency-circle-dollar': 'circle-dollar-sign',
   'cursor-click': 'mouse-pointer-click',
   database: 'database',
+  desktop: 'monitor',
   'device-mobile': 'smartphone',
   'door-open': 'door-open',
   'download-simple': 'download',

package/src/DataForm.tsx

@@ -22,6 +22,8 @@ import { useMediaPicker } from './Media';
 import FormFrame, { savedStatus, useSavedAt } from './FormFrame';
 import { savedOn, VersionNotice, VersionsButton, WithVersions, type ShownVersion } from './Versions';
 import { Button, CheckList, FoldSection, FormColumns, Group, IconButton, Preview, FormHeading, SharePreview, Notice, ListItem } from './ui';
+import { SearchPreview } from './SearchPreview';
+import { searchedAs } from './googleResult.mjs';
 import { plain, SEO_FIELDS, seoRating, SHARE_FIELDS, sharedAs } from './seo';
 import type { Env } from './App';
 import { kindAndName, lower, nameOf, savedText } from './deploy';
@@ -215,28 +217,46 @@ function Form({
       relations: env.relations,
     });
   }, [seoNow, seoFields.length]);
-  const seoSection = seoFields.length > 0 && (
-    <FoldSection title={t.forms.seo} open={seoOpen} onToggle={() => setSeoOpen(!seoOpen)}>
-      {rating.length > 0 && <CheckList title={t.forms.seoRating.title} items={rating} />}
-      <FieldList fields={seoFields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
-    </FoldSection>
-  );
-  // The link as shared (BlogIndex.astro): the heading or the tag's name with the site's name after it, and the
+  // The page as the site writes it (BlogIndex.astro): the heading or the tag's name with the site's name after it, and the
   // introduction or, on a tag, the number of its posts on the blog.
-  const card = () => {
+  const pageNow = () => {
     const name = String(values.heading ?? values.name ?? '');
     const intro = text?.intro ? plain(String(values[text.intro] ?? '')) : '';
     const tag = collection.kind === 'folder' && base.path ? slugOf(base.path, collection.folder) : '';
     const count = env.site.posts.filter((p) => p.categories.includes(tag)).length;
-    return sharedAs({
+    return {
       title: name,
       seoTitle: String(values.seoTitle ?? ''),
       seoDescription: String(values.seoDescription ?? ''),
-      shareImage: String(values.shareImage ?? ''),
       description: intro || (collection.kind === 'folder' ? siteT.forms.tagShared(count, name) : ''),
       site: sharing,
-    });
+    };
   };
+  // The link as shared.
+  const card = () => sharedAs({ ...pageNow(), shareImage: String(values.shareImage ?? '') });
+  // The Google result (SearchPreview) at the page's address on the site: a fixed page's own, a tag's /blog/kategori/<file
+  // name>/ (its name for one not saved yet).
+  const resultPath = () => {
+    if (fixed) return dataFile!.view;
+    if (collection.kind !== 'folder') return '/';
+    return `/blog/kategori/${base.path ? slugOf(base.path, collection.folder) : slugify(String(values.name ?? ''))}/`;
+  };
+  const result = seoFields.length > 0 && seoOpen ? searchedAs(pageNow()) : null;
+  const seoSection = seoFields.length > 0 && (
+    <FoldSection title={t.forms.seo} open={seoOpen} onToggle={() => setSeoOpen(!seoOpen)}>
+      {rating.length > 0 && <CheckList title={t.forms.seoRating.title} items={rating} />}
+      {result && (
+        <SearchPreview
+          domain={config.domain}
+          path={resultPath()}
+          siteName={sharing.name}
+          title={result.title}
+          description={result.description}
+        />
+      )}
+      <FieldList fields={seoFields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
+    </FoldSection>
+  );
   const shared = shareFields.length > 0 && shareOpen ? card() : null;
   const shareSection = shareFields.length > 0 && (
     <FoldSection title={t.forms.share} open={shareOpen} onToggle={() => setShareOpen(!shareOpen)}>

package/src/EntryForm.tsx

@@ -34,6 +34,8 @@ import { isOver } from '../lib/notice.mjs';
 import { splitPicture } from '../lib/crop.mjs';
 import { asStandardTemplate, blockProblems, notOffered, siteBlocks } from './registry';
 import { FieldInput, Fields, useWrongField, WrongField, type FieldContext } from './fields';
+import { SearchPreview } from './SearchPreview';
+import { searchedAs } from './googleResult.mjs';
 import { CheckList, FoldSection, FormColumns, type NavigationItem, SectionList, SectionPane, SharePreview, useInView } from './ui';
 import FormFrame, { savedStatus, useSavedAt } from './FormFrame';
 import { usePagePreview } from './pagePreview';
@@ -286,18 +288,27 @@ function Form({
   // The link as it is shared: as Base.astro writes it, from a page's H1 (pageH1) or a post's title, and its picture
   // (a post's "Billede øverst", else the first in the text; a page has its pictures in its text, and the front page shows
   // the site's picture, as Home.astro).
-  const card = sharedAs({
+  const shared = {
     title: (!post && pageH1(body).heading) || String(values.title ?? ''),
     front,
     seoTitle: String(values.seoTitle ?? ''),
     seoDescription: String(values.seoDescription ?? ''),
+    description: String(values.description ?? ''),
+    site: sharing,
+  };
+  const card = sharedAs({
+    ...shared,
     shareTitle: String(values.shareTitle ?? ''),
     shareDescription: String(values.shareDescription ?? ''),
     shareImage: String(values.shareImage ?? ''),
-    description: String(values.description ?? ''),
     image: front ? undefined : String(values.image ?? '') || firstPicture(body),
-    site: sharing,
   });
+  // The Google result (SearchPreview), at the address the page or post has now: the one typed in "Adresse" or, for a new
+  // one without, /<title>/, as "Gem" works it out; the front page is at /.
+  const result = searchedAs(shared);
+  const resultPath = front
+    ? '/'
+    : addressOf(String(values.path ?? ''), post ? 'post' : 'page') || (isNew ? `/${slugify(String(values.title ?? ''))}/` : url);
 
   // A picture is kept in the browser until "Gem", which uploads it with the page. A file in Filer the page refers to
   // now and did not in its last saved version (a picture, a PDF field, a link) gets the page's tags at "Gem" (autoTags.mjs).
@@ -663,6 +674,14 @@ function Form({
                   <FoldSection {...sectionProps('seo')}>
                     <div ref={seoBox} className="space-y-6">
                       {rating.length > 0 && <CheckList title={t.forms.seoRating.title} items={rating} />}
+                      <SearchPreview
+                        domain={config.domain}
+                        path={resultPath}
+                        siteName={sharing.name}
+                        title={result.title}
+                        description={result.description}
+                        date={post ? String(values.date ?? '') : undefined}
+                      />
                       {collection.fields.filter(inSection('seo')).map(field)}
                     </div>
                   </FoldSection>

package/src/Library.tsx

@@ -83,7 +83,7 @@ import { fileRating } from './seo';
 import { dateName, headed, letterOf } from './Sheet';
 import type { Env } from './App';
 import { kindAndName, savedText } from './deploy';
-import { when } from './when';
+import { shortDate, when } from './when';
 import { untilTime } from '../lib/notice.mjs';
 import { savedTheme, setTheme, shownMode, type Theme } from './theme';
 import { browserLocale, locale, localeName, locales, savedLocale, setLocale, siteLocale, siteT, siteText, t, type Locale } from './i18n';
@@ -1035,12 +1035,6 @@ function savedSort(c: Collection, sorts: Sort[], first: Sort): Sort {
 // "i dag kl. 13.42" as "I dag kl. 13.42", alone on its line.
 const capital = (s: string) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
 
-// "2023-10-01" as "1. okt. 2023" (in the editor's language).
-const date = (iso: string) =>
-  /^\d{4}-\d{2}-\d{2}$/.test(iso)
-    ? new Date(`${iso}T12:00`).toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' })
-    : iso;
-
 export function List({ collection, tab, files, env }: { collection: Collection; tab?: string; files: RepoFile[]; env: Env }) {
   // The kinds a new entry can be: the list's own and those of the apps installed and not turned off (apps.ts).
   const kinds = collection.kind === 'folder' ? kindsOffered(collection, apps, installedApps(files), offBlocks(files)) : [];
@@ -1309,7 +1303,7 @@ export function List({ collection, tab, files, env }: { collection: Collection;
               ) : (
                 <>
                   <Status item={item} />
-                  {collection.id === 'blog' ? date(item.detail) : item.detail}
+                  {collection.id === 'blog' ? shortDate(item.detail) : item.detail}
                 </>
               )}
             </Under>

package/src/MarkdownEditor.tsx

@@ -5,6 +5,7 @@
 // two cards to write in. A fixed page's sections are such a text too (SectionsField.tsx), so both look
 // and work the same. The last tool, "Section settings", opens the section's sheet (BlockDialog.tsx).
 import {
+  type CSSProperties,
   forwardRef,
   Fragment as ReactFragment,
   type MouseEvent as ReactMouseEvent,
@@ -55,7 +56,7 @@ import {
 } from '@phosphor-icons/react';
 import { HTML, makeEditor, markdownOf, partsOf, siteBlockSchema, spacing } from './markdown.mjs';
 import { firstHeading, topHeadings } from './firstHeading.mjs';
-import { showsH1Choice } from '../lib/heading-levels.mjs';
+import { headingChoices } from '../lib/heading-levels.mjs';
 import { TEXT_COLORS, colorClass } from '../lib/text-colors.mjs';
 import { SECTION_COLORS } from '../lib/section-marker.mjs';
 import { sectionHeading, setSectionColor } from './sectionState.mjs';
@@ -540,7 +541,7 @@ const inLabel = (state: EditorView['state']) => state.selection.$from.parent.typ
 
 // When a word or more is selected, or the cursor has stood still in a word (STILL_MS, stillCursor.mjs): a row of icons
 // over it, to make it bold, italic, a link, one of the site's colours (a menu under the button, opened by `colors`), the
-// page's H1 (`h1`, only while the text has none), a heading or a subheading, a label above the heading; the ones that apply are marked. At a still
+// page's headings (`h1`: only the levels headingChoices gives for the text), a heading or a subheading, a label above the heading; the ones that apply are marked. At a still
 // cursor, bold, italic, link and colour act on the whole word, the headings on the line; a move or a keypress hides the
 // row. On a phone, where the phone's own menu is over the selection and its handles under it, the row is at the bottom
 // of the screen, over the keyboard. sections: no colour in a heading (H2), the name of a section.
@@ -595,8 +596,8 @@ function selectionMenu(ctx: Ctx, h1: boolean, sections: boolean, colors: (button
           label: [t.text.pageHeading, t.text.heading, t.text.subheading][level - 1],
           on: (s: EditorView['state']) => heading(s, level),
           action: () => (heading(view.state, level) ? run(turnIntoTextCommand) : run(wrapInHeadingCommand, level)),
-          // The H1 choice is gone as soon as the page's text has an H1.
-          off: level === 1 ? (s: EditorView['state']) => !showsH1Choice(levelsOf(s.doc)) : undefined,
+          // On a page only the levels headingChoices gives are offered: H1 until the text has one, then H2 and H3.
+          off: h1 ? (s: EditorView['state']) => !headingChoices(levelsOf(s.doc)).includes(level) : undefined,
         })),
         // A label above the heading. Not on a fixed page's H1 or H2, whose headings are its sections (sections.mjs).
         {
@@ -857,8 +858,8 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
   looked.current = looks;
   // What applies where the cursor is (activeOf), marked in the toolbar.
   const [active, setActive] = useState<string[]>([]);
-  // Whether the page's text has no H1, so the H1 choice is shown (showsH1Choice).
-  const [h1Choice, setH1Choice] = useState(true);
+  // The heading levels the toolbar offers on a page (headingChoices): [1] while the text has no H1, then [2, 3].
+  const [choices, setChoices] = useState<number[]>([1]);
   // The colour button over the selection, while its menu with the colours is open.
   const [colorsAt, setColorsAt] = useState<HTMLElement | null>(null);
   useEffect(() => {
@@ -884,8 +885,8 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
         new Plugin({
           view: () => ({
             update: (view) => {
-              const choice = showsH1Choice(levelsOf(view.state.doc));
-              setH1Choice((was) => (was === choice ? was : choice));
+              const next = headingChoices(levelsOf(view.state.doc));
+              setChoices((was) => (was.join() === next.join() ? was : next));
               // On a page the first heading is the H1 by itself (firstHeading.mjs); the Heading button stands for it.
               const now = [...activeOf(view.state)].map((name) => (h1 && name === 'h1' ? 'h2' : name)).sort();
               setActive((was) => (was.join() === now.join() ? was : now));
@@ -1092,9 +1093,13 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
     { label: t.text.bold, icon: TextB, action: () => run(toggleStrongCommand), on: 'strong' },
     { label: t.text.italic, icon: TextItalic, action: () => run(toggleEmphasisCommand), on: 'emphasis' },
     { label: t.text.link, icon: LinkSimple, action: link, on: 'link' },
-    ...(h1 && h1Choice ? [{ label: t.text.pageHeading, icon: TextHOne, action: () => setKind('h1'), on: 'h1' }] : []),
-    { label: t.text.heading, icon: TextHTwo, action: () => setKind('h2'), on: 'h2' },
-    { label: t.text.subheading, icon: TextHThree, action: () => setKind('h3'), on: 'h3' },
+    // On a page the levels in choices (H1 until the text has one); a blog post has H2 and H3.
+    ...(h1 ? choices : [2, 3]).map((level) => ({
+      label: [t.text.pageHeading, t.text.heading, t.text.subheading][level - 1],
+      icon: [TextHOne, TextHTwo, TextHThree][level - 1],
+      action: () => setKind(`h${level}`),
+      on: `h${level}`,
+    })),
     { label: t.text.paragraph, icon: TextT, action: () => setKind('text'), on: 'text' },
     { label: t.text.bulletList, icon: ListBullets, action: () => setKind('bullet'), on: 'bullet' },
     { label: t.text.orderedList, icon: ListNumbers, action: () => setKind('ordered'), on: 'ordered' },
@@ -1194,6 +1199,7 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
       <div
         ref={root}
         className={`editor-text prose max-w-none px-5 py-4 medium:px-8 ${short ? 'editor-text-short' : ''} ${spaced ? 'editor-spaced' : ''}`}
+        style={{ '--editor-gap-text': JSON.stringify(t.text.typeHere) } as CSSProperties}
       />
     </div>
   );

package/src/SearchPreview.tsx

@@ -0,0 +1,75 @@
+// How a page looks as a Google result, on a phone or a computer (tabs): the site's name and address, the title and the description.
+// Exposes SearchPreview. Depends on googleResult.mjs (the address line), TabRow and TabPanel in ui.tsx, shortDate (when.ts) and i18n.
+import { useId, useState } from 'react';
+import { DeviceMobile, Desktop } from '@phosphor-icons/react';
+import { searchCrumbs } from './googleResult.mjs';
+import { TabPanel, TabRow } from './ui';
+import { shortDate } from './when';
+import { t } from './i18n';
+
+type Device = 'mobile' | 'desktop';
+
+/** How a page looks in Google's results, drawn as Google draws one, in Google's own colours (--google-* in editor.css,
+ * light and dark with the editor): a circle with the site's first letter, the site's name over the address line, the title
+ * in blue and the description, with a post's `date` before it. Tabs switch between a phone (opens first: the title cut off
+ * after two lines, the description after three, on a card at most 360 px wide) and a computer (one line of title, two of
+ * description, at most 600 px wide, Google's results column). `path`: the page's address on the site. */
+export function SearchPreview({
+  domain,
+  path,
+  siteName,
+  title,
+  description,
+  date,
+}: {
+  domain: string;
+  path: string;
+  siteName: string;
+  title: string;
+  description: string;
+  date?: string;
+}) {
+  const id = useId();
+  const [device, setDevice] = useState<Device>('mobile');
+  const phone = device === 'mobile';
+  return (
+    <div className="space-y-3">
+      <TabRow
+        id={id}
+        label={t.forms.searchPreview.on}
+        value={device}
+        options={[
+          { value: 'mobile', label: t.forms.searchPreview.mobile, icon: DeviceMobile },
+          { value: 'desktop', label: t.forms.searchPreview.desktop, icon: Desktop },
+        ]}
+        onChange={setDevice}
+      />
+      <TabPanel id={id} value={device}>
+        <figure
+          aria-label={t.forms.searchPreview.result}
+          className={`space-y-1 border border-line bg-(--google-background) p-4 font-[arial,sans-serif] ${
+            phone ? 'max-w-[360px] rounded-3xl' : 'max-w-[600px] rounded-lg'
+          }`}
+        >
+          <div className="flex items-center gap-3">
+            <span
+              aria-hidden="true"
+              className="flex size-[26px] shrink-0 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--google-text)_15%,transparent)] text-xs text-(--google-site)"
+            >
+              {[...siteName][0]?.toLocaleUpperCase()}
+            </span>
+            <span className="min-w-0">
+              <span className="block truncate text-sm text-(--google-site)">{siteName}</span>
+              <span className="block truncate text-xs text-(--google-text)">{searchCrumbs(domain, path)}</span>
+            </span>
+          </div>
+          <span className={`block text-(--google-title) ${phone ? 'line-clamp-2 text-lg' : 'truncate text-xl'}`}>{title}</span>
+          <p className={`text-sm leading-[22px] text-(--google-text) ${phone ? 'line-clamp-3' : 'line-clamp-2'}`}>
+            {date && <span className="text-(--google-date)">{shortDate(date)} — </span>}
+            {description}
+          </p>
+        </figure>
+      </TabPanel>
+    </div>
+  );
+}