@morphemecms/cms 0.9.1 → 0.10.0-next-20261105153927

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @morphemecms/cms
 
+## 0.10.0-next-20261105153927
+
+### Minor Changes
+
+- 999142f: The action bar at the bottom of a phone's screen is a standard bottom sheet, on the site and in the editor.
+- 358c778: The page and post forms show a Google result preview for phone and computer; the shared-link card keeps its shared width.
+
+### Patch Changes
+
+- 1478765: On a page, the heading menus offer only H1 until the text has one, then H2 and H3.
+
 ## 0.9.1
 
 ### Patch Changes

package/defaults/popup.tsx

@@ -8,6 +8,7 @@ import type { KindPart } from '../src/schema';
 import { buttonsOf } from '../src/standard/buttons/view';
 import { shownPicture } from '../src/standard/view';
 import PopupView from '@theme/components/PopupView';
+import BottomSheet from '@theme/ui/BottomSheet';
 import Button from '@theme/ui/Button';
 import Toolbar from '@theme/ui/Toolbar';
 import List, { ListItem } from '@theme/ui/List';
@@ -43,7 +44,8 @@ export function drawPopup(p: Record<string, any>, data: BlockData, part?: KindPa
 }
 
 // An action bar ("Promovering", the kind "Handlingslinje") as it looks on a phone (ActionBar.astro in the
-// theme): its one or two items side by side, each a text (a list row of two lines: its heading over its text) or a button, the first button filled, the buttons with their own texts or those of their target
+// theme): the same standard bottom sheet (BottomSheet, .theme-action-bar-drawn in styles/components.css: in its place,
+// a phone wide) with the same toolbar row in it, its one or two items side by side, each a text (a list row of two lines: its heading over its text) or a button, the first button filled, the buttons with their own texts or those of their target
 // ("Book en tid", "Ring"), of what they open (a pop-up's heading, an app's booking sheet: "Book en tid") or of their
 // page; the calendar for what books, the phone for "Ring", the arrow after a page or a pop-up.
 export function drawActionBar(p: Record<string, any>, data: BlockData) {
@@ -55,39 +57,48 @@ export function drawActionBar(p: Record<string, any>, data: BlockData) {
   if (!buttons.length) return null;
   const first = buttons.findIndex((b) => b.type !== 'text');
   return (
-    <Toolbar label={siteT.theme.actions} className="theme-action-bar-drawn not-prose">
-      {buttons.map((b, i) => {
-        if (b.type === 'text')
+    <BottomSheet
+      kind="standard"
+      wide="sheet"
+      dragHandle={false}
+      states={['expanded']}
+      label={siteT.theme.actions}
+      className="theme-action-bar-drawn not-prose"
+    >
+      <Toolbar label={siteT.theme.actions} className="theme-action-bar-row">
+        {buttons.map((b, i) => {
+          if (b.type === 'text')
+            return (
+              <List key={i} dividers="none" className="theme-action-bar-text">
+                <ListItem headline={String(b.heading ?? '').trim()} supporting={String(b.text ?? '').trim() || undefined} />
+              </List>
+            );
+          const own = String(b.label ?? '').trim();
+          const opens = b.to === 'promotion' ? data.relations.promotions?.find((o) => o.value === b.open) : undefined;
+          // What it does: "Book en tid" also for a promotion that stands for it (an app's booking sheet).
+          const to = opens?.as ?? b.to;
+          const text =
+            to === 'phone'
+              ? own || data.site.labels.call
+              : to === 'page'
+                ? own || pageName(b.href ?? '') || ''
+                : to === 'promotion'
+                  ? own || opens?.text || ''
+                  : own || data.site.labels.book;
+          const arrow = to === 'page' || to === 'promotion';
           return (
-            <List key={i} dividers="none" className="theme-action-bar-text">
-              <ListItem headline={String(b.heading ?? '').trim()} supporting={String(b.text ?? '').trim() || undefined} />
-            </List>
+            <Button
+              key={i}
+              href=""
+              kind={i === first ? 'filled' : 'outlined'}
+              icon={arrow ? undefined : to === 'phone' ? 'phone' : 'calendar-blank'}
+              trailingIcon={arrow ? 'arrow-right' : undefined}
+            >
+              {text}
+            </Button>
           );
-        const own = String(b.label ?? '').trim();
-        const opens = b.to === 'promotion' ? data.relations.promotions?.find((o) => o.value === b.open) : undefined;
-        // What it does: "Book en tid" also for a promotion that stands for it (an app's booking sheet).
-        const to = opens?.as ?? b.to;
-        const text =
-          to === 'phone'
-            ? own || data.site.labels.call
-            : to === 'page'
-              ? own || pageName(b.href ?? '') || ''
-              : to === 'promotion'
-                ? own || opens?.text || ''
-                : own || data.site.labels.book;
-        const arrow = to === 'page' || to === 'promotion';
-        return (
-          <Button
-            key={i}
-            href=""
-            kind={i === first ? 'filled' : 'outlined'}
-            icon={arrow ? undefined : to === 'phone' ? 'phone' : 'calendar-blank'}
-            trailingIcon={arrow ? 'arrow-right' : undefined}
-          >
-            {text}
-          </Button>
-        );
-      })}
-    </Toolbar>
+        })}
+      </Toolbar>
+    </BottomSheet>
   );
 }

package/defaults/texts.ts

@@ -15,7 +15,7 @@ export const texts: Record<string, Record<string, string>> = {
     'Nyt blogindlæg': 'New blog post',
     Titel: 'Title',
     Dato: 'Date',
-    Adresse: 'Address',
+    Adresse: 'URL',
     'Kort beskrivelse': 'Short description',
     Tags: 'Tags',
     'Opret et tag': 'Create a tag',

package/icons/lucide/desktop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2" /> <line x1="8" x2="16" y1="21" y2="21" /> <line x1="12" x2="12" y1="17" y2="21" /></g></svg>

package/icons/material-symbols/desktop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M334-120v-60h86v-100H140q-24 0-42-18t-18-42v-440q0-24 18-42t42-18h680q24 0 42 18t18 42v440q0 24-18 42t-42 18H540v100h86v60H334ZM140-340h680v-440H140v440Zm0 0v-440 440Z"/></svg>

package/icons/phosphor/desktop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24h72v16H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16H136V200h72a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40ZM48,56H208a8,8,0,0,1,8,8v80H40V64A8,8,0,0,1,48,56ZM208,184H48a8,8,0,0,1-8-8V160H216v16A8,8,0,0,1,208,184Z"/></svg>

package/lib/google-result.test.mjs

@@ -0,0 +1,70 @@
+// Run: node --test lib/google-result.test.mjs
+// Tests src/googleResult.mjs: the title, description and address line of a page's Google result.
+// Depends on node:test, node:assert/strict and ../src/googleResult.mjs.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { pageTitle, searchedAs, searchCrumbs } from '../src/googleResult.mjs';
+
+const site = { name: 'Morpheme', description: 'The site.' };
+
+test('a page title gets the site name after it', () => {
+  assert.equal(pageTitle({ title: 'About', front: false, siteName: 'Morpheme' }), 'About | Morpheme');
+});
+
+test('the page title is trimmed before the site name is added', () => {
+  assert.equal(pageTitle({ title: '  About ', front: false, siteName: 'Morpheme' }), 'About | Morpheme');
+});
+
+test('the front page title has no site name', () => {
+  assert.equal(pageTitle({ title: 'Welcome', front: true, siteName: 'Morpheme' }), 'Welcome');
+});
+
+test('without a title the site name is the title', () => {
+  assert.equal(pageTitle({ title: '', front: false, siteName: 'Morpheme' }), 'Morpheme');
+});
+
+test('a blank title on the front page is the site name', () => {
+  assert.equal(pageTitle({ title: '   ', front: true, siteName: 'Morpheme' }), 'Morpheme');
+});
+
+test('the SEO title is the result title when it is set', () => {
+  assert.equal(searchedAs({ title: 'About', seoTitle: 'Our story', site }).title, 'Our story');
+});
+
+test('a blank SEO title falls back to the page title', () => {
+  assert.equal(searchedAs({ title: 'About', seoTitle: '  ', site }).title, 'About | Morpheme');
+});
+
+test('without any title the result title is the site name', () => {
+  assert.equal(searchedAs({ title: '', site }).title, 'Morpheme');
+});
+
+test('the SEO description is the result description when it is set', () => {
+  const result = searchedAs({ title: 'A', seoDescription: 'Google text', description: 'Short', site });
+  assert.equal(result.description, 'Google text');
+});
+
+test('the page description is used when the SEO description is blank', () => {
+  const result = searchedAs({ title: 'A', seoDescription: '', description: ' Short ', site });
+  assert.equal(result.description, 'Short');
+});
+
+test('the site description is used when the page has no description', () => {
+  assert.equal(searchedAs({ title: 'A', site }).description, 'The site.');
+});
+
+test('the address line is the domain and the path parts', () => {
+  assert.equal(searchCrumbs('morpheme.example', '/blog/my-post/'), 'morpheme.example › blog › my-post');
+});
+
+test('the front page address line is only the domain', () => {
+  assert.equal(searchCrumbs('morpheme.example', '/'), 'morpheme.example');
+});
+
+test('an empty path gives only the domain', () => {
+  assert.equal(searchCrumbs('morpheme.example', ''), 'morpheme.example');
+});
+
+test('a path without a leading slash still gives its parts', () => {
+  assert.equal(searchCrumbs('morpheme.example', 'about'), 'morpheme.example › about');
+});

package/lib/heading-levels.d.mts

@@ -5,3 +5,4 @@
  */
 export function headingLevels(levels: number[]): number[];
 export function showsH1Choice(levels: number[]): boolean;
+export function headingChoices(levels: number[]): number[];

package/lib/heading-levels.mjs

@@ -1,5 +1,5 @@
 // The levels of a page's headings as the editor keeps them: the first heading is the page's H1, and no later one is.
-// Exposes headingLevels and showsH1Choice (pure); the editor's plugin that applies it is src/firstHeading.mjs. No dependencies.
+// Exposes headingLevels, showsH1Choice and headingChoices (pure); the editor's plugin that applies it is src/firstHeading.mjs. No dependencies.
 
 /**
  * The levels with the first set to 1 and every later 1 set to 2 (the others as they are).
@@ -14,3 +14,8 @@ export function headingLevels(levels) {
  * @param {number[]} levels The levels (1 to 6) of the headings of a text, in order.
  * @returns {boolean} */
 export const showsH1Choice = (levels) => !levels.includes(1);
+
+/** The heading levels the editor offers on a page: only the H1 while the text has no H1, after that H2 and H3.
+ * @param {number[]} levels The levels (1 to 6) of the headings of a text, in order.
+ * @returns {number[]} */
+export const headingChoices = (levels) => (showsH1Choice(levels) ? [1] : [2, 3]);

package/lib/heading-levels.test.mjs

@@ -2,7 +2,7 @@
 // Run with `node --test packages/editor/lib/*.test.mjs` (part of npm run check).
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { headingLevels, showsH1Choice } from './heading-levels.mjs';
+import { headingLevels, showsH1Choice, headingChoices } from './heading-levels.mjs';
 
 test('no headings, no levels', () => {
   assert.deepEqual(headingLevels([]), []);
@@ -35,3 +35,17 @@ test('the H1 choice is shown only while no heading is an H1', () => {
   assert.equal(showsH1Choice([1]), false);
   assert.equal(showsH1Choice([2, 1, 3]), false);
 });
+
+test('only H1 is offered until the page has one', () => {
+  assert.deepEqual(headingChoices([]), [1]);
+  assert.deepEqual(headingChoices([2, 3]), [1]);
+  assert.deepEqual(headingChoices([1]), [2, 3]);
+  assert.deepEqual(headingChoices([1, 2, 3]), [2, 3]);
+  assert.deepEqual(headingChoices([2, 1]), [2, 3]);
+});
+
+test('the list given to headingChoices is not changed', () => {
+  const given = [2, 1];
+  headingChoices(given);
+  assert.deepEqual(given, [2, 1]);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.9.1",
+  "version": "0.10.0-next-20261105153927",
   "description": "Morpheme CMS: the editor for a site built with Astro, its screens, its blocks and the rules a site gives it. See README.md.",
   "license": "MIT",
   "author": "Lars Adolfsen",

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

@@ -55,7 +55,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 +540,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 +595,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 +857,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 +884,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 +1092,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' },

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>
+  );
+}

package/src/editor.css

@@ -17,6 +17,14 @@
   --editor-status-bad-text: #cc0000;
   --editor-status-bad-surface: color-mix(in srgb, #ff4e42 10%, var(--surface));
 
+  /* A Google result (SearchPreview.tsx) in Google's own colours, light: its background, the title, the site's name, the
+     address and the text, and the date before the text. */
+  --google-background: #fff;
+  --google-title: #1a0dab;
+  --google-site: #202124;
+  --google-text: #4d5156;
+  --google-date: #70757a;
+
   /* The dotted frame round an H2 section of a page or blog post (sectionFrame.ts): its line, the space between the line and
      the text, the space above a section, and the space between two parts inside it (em: it scales with the part's text). */
   --editor-section-frame: 2px dotted var(--block-line);
@@ -34,15 +42,25 @@
   --side-panel-width: calc((100vw - var(--column-start)) / 2);
 }
 
-/* In dark mode the score's number in the light colours, which are read on the dark. */
+/* In dark mode the score's number in the light colours, which are read on the dark, and Google's dark colours. */
 @media (prefers-color-scheme: dark) {
   :where(:root:not([data-theme='light'])) {
+    --google-background: #1f1f1f;
+    --google-title: #99c3ff;
+    --google-site: #dadce0;
+    --google-text: #bfbfbf;
+    --google-date: #9aa0a6;
     --editor-status-good-text: var(--editor-status-good);
     --editor-status-average-text: var(--editor-status-average);
     --editor-status-bad-text: var(--editor-status-bad);
   }
 }
 :where(:root[data-theme='dark']) {
+  --google-background: #1f1f1f;
+  --google-title: #99c3ff;
+  --google-site: #dadce0;
+  --google-text: #bfbfbf;
+  --google-date: #9aa0a6;
   --editor-status-good-text: var(--editor-status-good);
   --editor-status-average-text: var(--editor-status-average);
   --editor-status-bad-text: var(--editor-status-bad);

package/src/googleResult.d.mts

@@ -0,0 +1,20 @@
+/** The page's own title as the site writes it in <title> when it has no Google title. */
+export function pageTitle({ title, front, siteName }: {
+    title: any;
+    front: any;
+    siteName: any;
+}): string;
+/** The title and description a Google result shows for the page. `site`: { name, description }. */
+export function searchedAs({ title, front, seoTitle, seoDescription, description, site }: {
+    title: any;
+    front: any;
+    seoTitle: any;
+    seoDescription: any;
+    description: any;
+    site: any;
+}): {
+    title: string;
+    description: string;
+};
+/** The address line of a Google result: the domain and the path's parts, joined by " › ". */
+export function searchCrumbs(domain: any, path: any): string;

package/src/googleResult.mjs

@@ -0,0 +1,30 @@
+// The texts of a page's Google result: its title and description as the site writes them, and the address line.
+// Exposes pageTitle, searchedAs and searchCrumbs. Mirrors theme/layouts/Base.astro; no dependencies.
+// Missing (undefined or null) string inputs count as empty strings.
+
+const SEPARATOR = ' › ';
+
+const text = (s) => String(s ?? '').trim();
+
+/** The page's own title as the site writes it in <title> when it has no Google title. */
+export function pageTitle({ title, front, siteName }) {
+  const own = text(title);
+  if (!own) return String(siteName ?? '');
+  if (front) return own;
+  return `${own} | ${siteName ?? ''}`;
+}
+
+/** The title and description a Google result shows for the page. `site`: { name, description }. */
+export function searchedAs({ title, front, seoTitle, seoDescription, description, site }) {
+  const resultTitle = text(seoTitle) || pageTitle({ title, front, siteName: site.name });
+  const resultDescription = text(seoDescription) || text(description) || String(site.description ?? '');
+  return { title: resultTitle, description: resultDescription };
+}
+
+/** The address line of a Google result: the domain and the path's parts, joined by " › ". */
+export function searchCrumbs(domain, path) {
+  const parts = String(path ?? '')
+    .split('/')
+    .filter((part) => part !== '');
+  return [domain, ...parts].join(SEPARATOR);
+}

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

@@ -10,6 +10,12 @@ export const forms: Messages['forms'] = {
   seo: 'Søgemaskiner',
   share: 'Sociale medier',
   sharePreview: 'Sådan ser et link til siden ud, når det deles',
+  searchPreview: {
+    on: 'Google-resultat på',
+    mobile: 'Mobil',
+    desktop: 'Computer',
+    result: 'Forhåndsvisning af Google-resultatet',
+  },
   tagShared: (n, name) => `${n} indlæg om ${name.toLowerCase()}.`,
   seoRating: {
     title: 'SEO-vurdering',

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

@@ -12,6 +12,14 @@ export const forms = {
    * to it looks (SharePreview in ui.tsx). */
   share: 'Social media',
   sharePreview: 'How a link to the page looks when it is shared',
+  /** The preview of the Google result at the top of "Søgemaskiner" (SearchPreview.tsx): the name of its tabs, the tabs and
+   * what a screen reader says of the result. */
+  searchPreview: {
+    on: 'Google result on',
+    mobile: 'Mobile',
+    desktop: 'Desktop',
+    result: 'Preview of the Google result',
+  },
   /** What a tag's page says about itself when it is shared without a Google description (the site's text, Category.astro). */
   tagShared: (n: number, name: string) => `${n} ${n === 1 ? 'post' : 'posts'} about ${name.toLowerCase()}.`,
   /** The SEO rating at the top of "Søgemaskiner" (seo.ts): its heading and what each check says; `post`: a
@@ -62,7 +70,7 @@ export const forms = {
   },
   /** Over the places that use an entry (a tag), DataForm.tsx. */
   usedOn: 'Used on',
-  address: 'Address',
+  address: 'URL',
   writeAddress: 'Write the address with letters or digits.',
   /** The commits; `what` is a name or a file name in quotation marks. */
   commit: {

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

@@ -86,7 +86,7 @@ export const parts = {
     bold: 'Bold',
     insert: 'Insert',
     cookieBanner: 'The cookie banner',
-    address: 'Address',
+    address: 'URL',
     addressHint: 'For example, /about/.',
     sendsTo: 'Sends to the page "Second page."',
     color: 'Accent color',

package/src/seo.ts

@@ -7,6 +7,7 @@
 import { t } from './i18n';
 import { decorativeOf } from '../lib/crop.mjs';
 import { readFields, splitFrontmatter } from './frontmatter.mjs';
+import { searchedAs } from './googleResult.mjs';
 
 /** What the rating looks at: a blog post (whose title is its H1) or a page (whose H1 is in its text). */
 export type SeoInput = {
@@ -71,8 +72,8 @@ export const SHARE_FIELDS = ['shareImage', 'shareTitle', 'shareDescription'];
 
 /** What a page shows when a link to it is shared (Facebook, LinkedIn, a message), worked out as Base.astro writes its
  * og: tags: the title when shared, else the Google title, else the page's own with the site's name after it (the front
- * page's without); the description when shared, else the Google description, else the page's own (`description`: its
- * "Kort beskrivelse", a fixed page's introduction), else the site's; the picture when shared, else the page's own
+ * page's without; a page without a title: only the site's name, as `searchedAs` has it); the description when shared,
+ * else the Google description, else the page's own (`description`: its "Kort beskrivelse", a fixed page's introduction), else the site's; the picture when shared, else the page's own
  * (`image`: "Billede øverst", else the first picture in the text), else the site's. */
 export type ShareInput = {
   /** The page's own title as the site has it: a page's H1, a post's title, a fixed page's heading, a tag's name. */
@@ -89,11 +90,14 @@ export type ShareInput = {
   site: { name: string; description: string; picture: string };
 };
 
-export const sharedAs = (input: ShareInput) => ({
-  title: input.shareTitle?.trim() || input.seoTitle?.trim() || (input.front ? input.title : `${input.title} | ${input.site.name}`),
-  description: input.shareDescription?.trim() || input.seoDescription?.trim() || input.description?.trim() || input.site.description,
-  image: input.shareImage || input.image || input.site.picture,
-});
+export const sharedAs = (input: ShareInput) => {
+  const searched = searchedAs(input);
+  return {
+    title: input.shareTitle?.trim() || searched.title,
+    description: input.shareDescription?.trim() || searched.description,
+    image: input.shareImage || input.image || input.site.picture,
+  };
+};
 
 /** The first picture in a text (its address), not one in the text of a block in it (a "Banner"'s, on its line of HTML),
  * as the site picks it (firstImage in packages/editor/site/images.mjs). */

package/src/ui.tsx

@@ -2466,11 +2466,12 @@ export function CheckList({ title, items }: { title?: string; items: Check[] })
 
 /** How a link to a page looks when it is shared on social media (Facebook, LinkedIn, a message), as a card: its picture
  * cut to 1.91:1 (one on its side or square keeps its upper part, as the site cuts it), the site's domain in small
- * capitals, the title and the description, each cut off after two lines. Material 3 has none, so it has its own name. */
+ * capitals, the title and the description, each cut off after two lines. It is never wider than 500 px, the width of a link
+ * card in the Facebook feed, and sits at the start of its column. Material 3 has none, so it has its own name. */
 export function SharePreview({ image, domain, title, description }: { image: string; domain: string; title: string; description: string }) {
   const [tall, setTall] = useState(false);
   return (
-    <figure aria-label={t.forms.sharePreview} className={`${siteCardClass('outlined')} overflow-hidden p-0`}>
+    <figure aria-label={t.forms.sharePreview} className={`${siteCardClass('outlined')} max-w-[500px] overflow-hidden p-0`}>
       <img
         src={image}
         alt=""

package/src/when.ts

@@ -20,3 +20,9 @@ export function when(date: Date, { short = false } = {}) {
   if (short && shown === t.common.today) return time;
   return t.common.at(shown, time);
 }
+
+// "2023-10-01" as "1. okt. 2023" (in the editor's language); anything else as it is.
+export const shortDate = (iso: string) =>
+  /^\d{4}-\d{2}-\d{2}$/.test(iso)
+    ? new Date(`${iso}T12:00`).toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' })
+    : iso;

package/theme/components/ActionBar.astro

@@ -5,12 +5,14 @@
 // its text (the theme's List and ListItem, .theme-action-bar-text: beside the button, in the room it leaves; one button alone takes the whole width, two share it, styles/components.css). Each button goes
 // where a button of "Knapper" can, and is drawn by the same component (Buttons.tsx, with `bar`): "Book en tid" opens
 // what books on the page (`data-open="booking"`: an app's booking sheet) or goes to the booking page, "Ring" calls, "Åbn
-// promovering" opens a pop-up or an app's booking sheet, and a page is a link. Built of the theme's docked toolbar
-// (toolbarClass, ui/Toolbar.tsx), fixed at the bottom (.theme-action-bar in styles/components.css), and its buttons
-// (ui/Button.tsx); only the first bar on a page is shown, and it moves away while the buttons at the top of the front
-// page are on screen (data-action-bar, the script in Base.astro). Not on a page one of its buttons goes to (the booking
+// promovering" opens a pop-up or an app's booking sheet, and a page is a link. A standard bottom
+// sheet (ui/BottomSheet.tsx: fixed at the bottom, its surface, top corners and shadow, without handle, one state,
+// .theme-action-bar in styles/components.css) with the theme's docked toolbar in it (toolbarClass, ui/Toolbar.tsx, the
+// row .theme-action-bar-row, without a surface of its own) and its buttons (ui/Button.tsx); only the first bar on a page is
+// shown, and it moves away while the buttons at the top of the front page are on screen (data-action-bar, the script in Base.astro). Not on a page one of its buttons goes to (the booking
 // page for "Book en tid") or the thank-you page.
 import Buttons from '@theme/blocks/buttons/Buttons';
+import BottomSheet from '@theme/ui/BottomSheet';
 import List, { ListItem } from '@theme/ui/List';
 import { toolbarClass } from '@theme/ui/Toolbar';
 import { loadButtons } from '@morphemecms/cms/src/standard/buttons/load';
@@ -49,15 +51,24 @@ const shown = await Promise.all(
 ---
 
 {shown.some((s) => s.heading || s.button) && (
-  <div class={`${toolbarClass()} theme-action-bar`} role="toolbar" aria-label={siteT.theme.actions} data-action-bar>
-    {shown.map((s) =>
-      s.button ? (
-        <Buttons buttons={[s.button]} />
-      ) : s.heading ? (
-        <List dividers="none" className="theme-action-bar-text">
-          <ListItem headline={s.heading} supporting={s.text} />
-        </List>
-      ) : null,
-    )}
-  </div>
+  <BottomSheet
+    kind="standard"
+    dragHandle={false}
+    states={['expanded']}
+    label={siteT.theme.actions}
+    className="theme-action-bar"
+    data-action-bar=""
+  >
+    <div class={`${toolbarClass()} theme-action-bar-row`} role="toolbar" aria-label={siteT.theme.actions}>
+      {shown.map((s) =>
+        s.button ? (
+          <Buttons buttons={[s.button]} />
+        ) : s.heading ? (
+          <List dividers="none" className="theme-action-bar-text">
+            <ListItem headline={s.heading} supporting={s.text} />
+          </List>
+        ) : null,
+      )}
+    </div>
+  </BottomSheet>
 )}

package/theme/layouts/Base.astro

@@ -64,7 +64,9 @@ const { title, image, type = 'website', crumbs, questions, schema = [] } = Astro
 const entry = seo[Astro.url.pathname];
 const noindex = Astro.props.noindex || entry?.noindex || isNoindex(Astro.url.pathname);
 // `||`, not `??`: an empty field (the content schemas default to '') falls through to the next.
-const fullTitle = Astro.props.seoTitle || entry?.title || (Astro.url.pathname === '/' ? title : `${title} | ${site.name}`);
+// A page without a title shows only the site's name, without " | " (pageTitle in src/googleResult.mjs).
+const fullTitle =
+  Astro.props.seoTitle || entry?.title || (!title ? site.name : Astro.url.pathname === '/' ? title : `${title} | ${site.name}`);
 const description = Astro.props.seoDescription || entry?.description || Astro.props.description || site.description;
 // When the page is shared: its own title and description for that ("Titel ved deling", "Beskrivelse ved deling"), else
 // the Google ones.

package/theme/styles/components.css

@@ -109,20 +109,19 @@
     --theme-section-space: var(--theme-blog-first-space);
     --theme-section-space-large: var(--theme-blog-first-space-large);
   }
-  /* The bar at the bottom of a phone's screen (a promotion: ActionBar.astro), a docked toolbar
-     (.toolbar-docked, ui.css) fixed there: the page gets room under its footer, and only the first bar on a page is
-     shown. data-hidden: moved down out of sight (while the buttons at the top of the front page are on screen, the script
-     in Base.astro). Not from the medium width (a tablet in portrait, a computer). */
+  /* The bar at the bottom of a phone's screen (a promotion: ActionBar.astro), a standard bottom sheet
+     (.bottom-sheet-standard, ui.css: fixed at the bottom, its surface, corners and shadow) with a docked toolbar in it
+     (.theme-action-bar-row): the page gets room under its footer, and only the first bar on a page is shown.
+     data-hidden: moved down out of sight (while the buttons at the top of the front page are on screen, the script in
+     Base.astro). Not from the medium width (a tablet in portrait, a computer): the display rules name both classes, so
+     they win over the sheet's own display and its data-wide="side-sheet" whatever the order of the files. */
   .theme-action-bar {
-    position: fixed;
-    inset: auto 0 0;
-    z-index: 30;
     transition: transform var(--motion-spatial-slow);
   }
   .theme-action-bar[data-hidden] {
     transform: translateY(100%);
   }
-  .theme-action-bar ~ .theme-action-bar {
+  .bottom-sheet-standard.theme-action-bar ~ .bottom-sheet-standard.theme-action-bar {
     display: none;
   }
   @media (width < theme(--breakpoint-medium)) {
@@ -131,22 +130,36 @@
     }
   }
   @media (width >= theme(--breakpoint-medium)) {
-    .theme-action-bar {
+    .bottom-sheet-standard.theme-action-bar {
       display: none;
     }
   }
-  /* Its buttons and its text, on the site and as the editor draws it: one button alone the whole width; two side by side
+  /* The sheet's room round what is in it is the row's (the toolbar's), which has no surface of its own (the sheet's shows),
+     no line over it and no blur behind it. */
+  .bottom-sheet-standard:is(.theme-action-bar, .theme-action-bar-drawn) {
+    padding-bottom: 0;
+  }
+  .bottom-sheet-standard:is(.theme-action-bar, .theme-action-bar-drawn) > .bottom-sheet-content {
+    overflow: visible;
+    padding: 0;
+  }
+  .toolbar.theme-action-bar-row {
+    --toolbar-docked-line-width: 0px;
+    --toolbar-docked-backdrop: none;
+    background: none;
+  }
+  /* Its buttons and its text, in the row, on the site and as the editor draws it: one button alone the whole width; two side by side
      as wide as each other, unless one's text needs more (a button's text stays on one line), and under each other, each
      the whole width, when they cannot stand side by side; a text (a list row of two lines, the theme's List) in the room
      the button beside it leaves, without the row's own room round it, the button as wide as its text (under the text,
      the whole width, when they cannot stand side by side). */
-  :is(.theme-action-bar, .theme-action-bar-drawn) {
+  .theme-action-bar-row {
     flex-wrap: wrap;
   }
-  :is(.theme-action-bar, .theme-action-bar-drawn) > .button {
+  .theme-action-bar-row > .button {
     flex: 1 1 0;
   }
-  :is(.theme-action-bar, .theme-action-bar-drawn):has(> .theme-action-bar-text) > .button {
+  .theme-action-bar-row:has(> .theme-action-bar-text) > .button {
     flex: 1 0 auto;
   }
   .theme-action-bar-text {
@@ -157,12 +170,15 @@
     flex: 1000 1 0;
     min-width: 8rem;
   }
-  /* The editor's drawing of one (packages/editor/defaults/popup.tsx): in its place, as wide as a phone, in a frame. */
-  .theme-action-bar-drawn {
+  /* The editor's drawing of one (defaults/popup.tsx): the same sheet, in its place in the editor's frame
+     instead of fixed at the bottom of the screen, as wide as a phone, with the sheet's own corners and shadow. It is a
+     wide="sheet" there (the editor is wider than the medium width), the selector names data-wide to win over that. */
+  .bottom-sheet-standard.theme-action-bar-drawn[data-wide] {
+    position: static;
+    width: 100%;
     max-width: 24rem;
+    max-height: none;
     margin-inline: auto;
-    border: 1px solid var(--block-line);
-    border-radius: var(--block-radius);
   }
 }
 

package/theme/styles/global.css

@@ -928,12 +928,6 @@
     }
   }
 
-  /* The editor's drawing of the bar at the bottom of a phone's screen (components.css): without a frame, rounded. */
-  .theme-action-bar-drawn {
-    border: 0;
-    border-radius: var(--md-shape-medium);
-  }
-
   /* The carousel's page indicator (its variables above): the dots half seen through, the chosen one wholly. */
   .carousel-indicator-dot > span {
     opacity: 0.5;
@@ -1121,7 +1115,7 @@
       display: none;
     }
   }
-  :is(.theme-action-bar, .theme-action-bar-drawn) > .button-filled {
+  .theme-action-bar-row > .button-filled {
     order: 2;
   }
 

package/theme/ui/BottomSheet.tsx

@@ -42,6 +42,8 @@
 // them (bottomSheetFullClass: as high as the screen, a whole page in it), with the container and its header
 // (BottomSheetHeader, whose handle is a button there, `onHandle`, named `handleLabel`, and whose close button does
 // `onClose`).
+// Other attributes (data-…, as the action bar's data-action-bar) go on the container, as Toolbar's do on it, and `className`
+// after its own classes.
 // How it looks is the theme's (--bottom-sheet-*).
 import { useEffect, useId, useRef, type ReactNode } from 'react';
 import { useOnSite } from '@morphemecms/cms/src/standard/view';
@@ -183,6 +185,7 @@ export default function BottomSheet({
   height,
   className,
   children,
+  ...rest
 }: {
   state?: BottomSheetState;
   states?: [BottomSheetState, ...BottomSheetState[]];
@@ -195,7 +198,8 @@ export default function BottomSheet({
   height?: string;
   className?: string;
   children: ReactNode;
-} & BottomSheetKindWide &
+} & Record<`data-${string}`, unknown> &
+  BottomSheetKindWide &
   BottomSheetName &
   BottomSheetResize) {
   const shownState = state ?? startState(states);
@@ -223,6 +227,7 @@ export default function BottomSheet({
       data-state={standard ? shownState : undefined}
       data-states={standard && states ? states.join(' ') : undefined}
       style={height ? { height } : undefined}
+      {...rest}
     >
       <BottomSheetHeader
         headline={headline}