@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/virtual.d.ts

@@ -0,0 +1,5 @@
+// What is in each app's folder (appFoldersPlugin in lib/apps.mjs): its files, by their paths in it, and its csp.json.
+declare module 'virtual:app-folders' {
+  const folders: Record<string, { files: string[]; csp?: Partial<Record<string, string[]>> }>;
+  export default folders;
+}

package/src/when.ts

@@ -0,0 +1,22 @@
+import { locale, t } from './i18n';
+
+// "i dag kl. 13.42", "i går kl. 9.05", "1. okt. kl. 13.42" or, another year, "1. okt. 2023 kl. 13.42";
+// in the editor's language. `short`: only the time today ("13.42").
+export function when(date: Date, { short = false } = {}) {
+  const day = (d: Date) => d.toLocaleDateString('sv');
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  const shown =
+    day(date) === day(new Date())
+      ? t.common.today
+      : day(date) === day(yesterday)
+        ? t.common.yesterday
+        : date.toLocaleDateString(locale, {
+            day: 'numeric',
+            month: 'short',
+            year: date.getFullYear() === new Date().getFullYear() ? undefined : 'numeric',
+          });
+  const time = date.toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit' });
+  if (short && shown === t.common.today) return time;
+  return t.common.at(shown, time);
+}

package/starter/.githooks/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+# Before a push, the checks Cloudflare runs before it builds (npm run check, the build command in wrangler.jsonc), so a
+# push that would fail there stops here. npm install turns this on (`prepare` in package.json). git push --no-verify skips it.
+exec npm run check

package/starter/.nvmrc

@@ -0,0 +1 @@
+22

package/starter/.prettierignore

@@ -0,0 +1,11 @@
+dist
+node_modules
+public
+.astro
+.wrangler
+package-lock.json
+# Written by the editor (/editor/) in its own form; formatting them here would give changes on every save.
+src/content
+src/data/**/*.json
+src/apps/*/store.json
+*.md

package/starter/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "printWidth": 140,
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./node_modules/@morphemecms/cms/theme/styles/global.css",
+  "overrides": [{ "files": "*.astro", "options": { "parser": "astro" } }]
+}

package/starter/README.md

@@ -0,0 +1,26 @@
+# Et site med Morpheme CMS
+
+Hjemmesiden er bygget med [Astro](https://astro.build), kører på [Cloudflare](https://www.cloudflare.com) og rettes i
+editoren på `/editor/`: sider, indlæg, billeder og indstillinger. Hvert gem er ét commit i dette repo, og Cloudflare
+bygger og udgiver sitet af sig selv bagefter.
+
+Editoren, standardtemaet *Material* og sitets Worker er pakken [`@morphemecms/cms`](https://www.npmjs.com/package/@morphemecms/cms)
+(MIT). Det, der er sitets eget, står her:
+
+- `src/site/config.ts`: sitets navn, domæne, sprog og GitHub-repo; resten er pakkens standard (`defineSite`).
+- `src/site/worker.js`: det, Workeren har fra sitet.
+- `src/content/`: siderne og indlæggene, `src/data/`: sitets indstillinger, `public/`: billeder, logo og ikoner.
+- `src/themes/` og `src/apps/`: temaer og apps fra appbutikken, når der er installeret nogen.
+
+## Udvikling
+
+```bash
+npm install
+```
+
+```bash
+npm run dev
+```
+
+`npm run check` kører tjekkene (formatering, typer, indholdet efter editorens regler, editoren og Workeren), før hver
+push og før hver bygning på Cloudflare, og `npm run build` bygger sitet i `dist/`.

package/starter/astro.config.mjs

@@ -0,0 +1,5 @@
+// @ts-check
+// The site's Astro config: the CMS's (@morphemecms/cms/astro.mjs), from this site's src/site/, src/data/ and src/themes/.
+import { siteConfig } from '@morphemecms/cms/astro.mjs';
+
+export default await siteConfig();

package/starter/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "morpheme-site",
+  "version": "1.0.0",
+  "description": "A site with Morpheme CMS.",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "predev": "morpheme images",
+    "dev": "astro dev",
+    "prebuild": "morpheme check:content && morpheme images",
+    "build": "astro build && morpheme after-build",
+    "preview": "astro preview",
+    "deploy": "wrangler deploy",
+    "check": "prettier --check . && astro sync && tsc --noEmit -p . && npm run check:content && npm run check:editor && npm run check:worker",
+    "check:content": "morpheme check:content",
+    "check:editor": "morpheme check:editor",
+    "check:worker": "morpheme check:worker",
+    "check:screens": "morpheme check:screens",
+    "check:themes": "morpheme check:themes",
+    "format": "prettier --write .",
+    "prepare": "git config core.hooksPath .githooks || true"
+  },
+  "dependencies": {
+    "@astrojs/markdown-remark": "^7.3.2",
+    "@astrojs/react": "^7.0.1",
+    "@astrojs/rss": "^4.0.19",
+    "@astrojs/sitemap": "^3.7.4",
+    "@fontsource-variable/roboto": "^5.3.0",
+    "@material/material-color-utilities": "^0.3.0",
+    "@milkdown/kit": "^7.22.3",
+    "@morphemecms/cms": "^0.1.0",
+    "@phosphor-icons/core": "^2.1.1",
+    "@phosphor-icons/react": "^2.1.10",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tailwindcss/vite": "^4.3.3",
+    "astro": "^7.3.7",
+    "esbuild": "^0.28.2",
+    "github-slugger": "^2.0.0",
+    "jsdom": "^29.1.1",
+    "motion": "^14.0.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "remark-smartypants": "^3.0.3",
+    "sharp": "^0.35.5",
+    "tailwindcss": "^4.3.3",
+    "unified": "^11.0.5",
+    "vite": "^8.3.4",
+    "wrangler": "^4.152.0",
+    "yaml": "^2.9.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "prettier": "^3.9.10",
+    "prettier-plugin-astro": "^1.1.2",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "typescript": "^6.0.2"
+  }
+}

package/starter/public/_redirects

@@ -0,0 +1 @@
+# Redirects from addresses the site no longer has: "<from> <to> 301", one to a line.

package/starter/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#f9f9ff"/><svg x="8" y="8" width="48" height="48" viewBox="0 0 64 64"><circle cx="32" cy="32" r="15" fill="#435e91"/><ellipse cx="32" cy="32" rx="29" ry="9" fill="none" stroke="#435e91" stroke-width="4" transform="rotate(-20 32 32)"/></svg></svg>

package/starter/public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentColor"><circle cx="32" cy="32" r="15"/><ellipse cx="32" cy="32" rx="29" ry="9" fill="none" stroke="currentColor" stroke-width="4" transform="rotate(-20 32 32)"/></svg>

package/starter/src/content/pages/blog.md

@@ -0,0 +1,8 @@
+---
+title: "Blog"
+path: "/blogside/"
+---
+
+# Blog
+
+<div data-block="posts" data-props="{&quot;show&quot;:&quot;all&quot;,&quot;design&quot;:&quot;featured&quot;}"></div>

package/starter/src/content/pages/forside.md

@@ -0,0 +1,9 @@
+---
+title: "Forside"
+---
+
+# Velkommen
+
+Her kommer en kort tekst om sitet.
+
+<div data-block="hero" data-props="{&quot;text&quot;:&quot;&lt;div data-block=\&quot;buttons\&quot;&gt;&lt;/div&gt;&quot;,&quot;width&quot;:&quot;full&quot;}"></div>

package/starter/src/content/pages/kontakt.md

@@ -0,0 +1,7 @@
+---
+title: "Kontakt"
+---
+
+# Kontakt
+
+Her kommer sitets kontaktoplysninger. De rettes i editoren under Virksomheden.

package/starter/src/content/pages/privatlivspolitik.md

@@ -0,0 +1,9 @@
+---
+title: "Privatlivspolitik"
+---
+
+# Privatlivspolitik
+
+Her kommer sitets privatlivspolitik.
+
+<div data-block="cookies"></div>

package/starter/src/content/pages/siden-findes-ikke.md

@@ -0,0 +1,7 @@
+---
+title: "Siden findes ikke"
+---
+
+# Vi kunne ikke finde siden
+
+Siden er måske flyttet, eller adressen er skrevet lidt forkert.

package/starter/src/content.config.ts

@@ -0,0 +1,2 @@
+// The site's content collections (pages and blog posts in src/content/): the CMS's.
+export { collections } from '@morphemecms/cms/site/content.config';

package/starter/src/data/apps.json

@@ -0,0 +1 @@
+{ "installed": [] }

package/starter/src/data/block-settings.json

@@ -0,0 +1,3 @@
+{
+  "off": []
+}

package/starter/src/data/blocks.json

@@ -0,0 +1 @@
+{}

package/starter/src/data/booking.json

@@ -0,0 +1,6 @@
+{
+  "heading": "Book en tid",
+  "text": "Book en tid online, eller ring.",
+  "book": "Book en tid",
+  "call": "Ring"
+}

package/starter/src/data/colors.json

@@ -0,0 +1,70 @@
+{
+  "light": {
+    "bg": "#f9f9ff",
+    "surface": "#ffffff",
+    "surface-container-lowest": "#ffffff",
+    "surface-container-low": "#f3f3fa",
+    "surface-container": "#ededf4",
+    "surface-container-high": "#e8e7ee",
+    "surface-container-highest": "#e2e2e9",
+    "inverse-surface": "#2f3036",
+    "inverse-on-surface": "#f0f0f7",
+    "inverse-primary": "#acc7ff",
+    "tint": "#e8e7ee",
+    "ink": "#1a1b20",
+    "muted": "#44474f",
+    "line": "#c4c6d0",
+    "outline": "#74777f",
+    "accent": "#435e91",
+    "accent-hover": "#375284",
+    "on-accent": "#ffffff",
+    "accent-container": "#d8e2ff",
+    "on-accent-container": "#2a4678",
+    "secondary": "#565e71",
+    "on-secondary": "#ffffff",
+    "secondary-container": "#dbe2f9",
+    "on-secondary-container": "#3f4759",
+    "tertiary": "#715574",
+    "on-tertiary": "#ffffff",
+    "tertiary-container": "#fbd7fc",
+    "on-tertiary-container": "#583e5b",
+    "error": "#ba1a1a",
+    "on-error": "#ffffff",
+    "error-container": "#ffdad6",
+    "on-error-container": "#93000a"
+  },
+  "dark": {
+    "bg": "#111318",
+    "surface": "#1a1b20",
+    "surface-container-lowest": "#0c0e13",
+    "surface-container-low": "#1a1b20",
+    "surface-container": "#1e2025",
+    "surface-container-high": "#282a2f",
+    "surface-container-highest": "#33353a",
+    "inverse-surface": "#e2e2e9",
+    "inverse-on-surface": "#2f3036",
+    "inverse-primary": "#435e91",
+    "tint": "#282a2f",
+    "ink": "#e2e2e9",
+    "muted": "#c4c6d0",
+    "line": "#44474f",
+    "outline": "#8e9099",
+    "accent": "#adc7ff",
+    "accent-hover": "#c3d5ff",
+    "on-accent": "#0f2f60",
+    "accent-container": "#2a4678",
+    "on-accent-container": "#d8e2ff",
+    "secondary": "#bfc6dc",
+    "on-secondary": "#283041",
+    "secondary-container": "#3f4759",
+    "on-secondary-container": "#dbe2f9",
+    "tertiary": "#debcdf",
+    "on-tertiary": "#402843",
+    "tertiary-container": "#583e5b",
+    "on-tertiary-container": "#fbd7fc",
+    "error": "#ffb4ab",
+    "on-error": "#690005",
+    "error-container": "#93000a",
+    "on-error-container": "#ffdad6"
+  }
+}

package/starter/src/data/contact.json

@@ -0,0 +1,8 @@
+{
+  "name": "Mit site",
+  "role": "Ejer",
+  "phone": "12 34 56 78",
+  "email": "mail@mit-site.dk",
+  "street": "Vejnavn 1",
+  "city": "1234 By"
+}

package/starter/src/data/cookies.json

@@ -0,0 +1,21 @@
+{
+  "enabled": true,
+  "heading": "Må vi bruge cookies?",
+  "text": "Vi bruger kun cookies, der ikke er nødvendige, hvis du siger ja. Du kan altid ændre dit valg nederst på siden.",
+  "more": "Læs mere",
+  "no": "Nej tak",
+  "yes": "Ja tak",
+  "choose": "Avanceret",
+  "save": "Gem valg",
+  "consentId": "Dit samtykke-id",
+  "necessary": "Nødvendige",
+  "necessaryText": "Får siden til at virke og husker dit valg. De kan ikke slås fra.",
+  "preferences": "Præferencer",
+  "preferencesText": "Husker dine indstillinger på siden.",
+  "statistics": "Statistik",
+  "statisticsText": "Viser, hvor mange der besøger siden, og hvad de læser.",
+  "marketing": "Marketing",
+  "marketingText": "Viser, om annoncer fører til et besøg.",
+  "targeting": "Målrettede annoncer",
+  "targetingText": "Bruger dit besøg til at vise dig annoncer andre steder."
+}

package/starter/src/data/csp.json

@@ -0,0 +1 @@
+{}

package/starter/src/data/footer.json

@@ -0,0 +1,15 @@
+{
+  "text": "Her kommer en kort tekst om sitet.",
+  "contactHeading": "Kontakt",
+  "linksHeading": "Links",
+  "links": [
+    {
+      "label": "Kontakt",
+      "href": "/kontakt/"
+    },
+    {
+      "label": "Privatlivspolitik",
+      "href": "/privatlivspolitik/"
+    }
+  ]
+}

package/starter/src/data/internal-links.json

@@ -0,0 +1,4 @@
+{
+  "enabled": true,
+  "maxPerPage": 8
+}

package/starter/src/data/menu.json

@@ -0,0 +1,4 @@
+{
+  "enabled": true,
+  "items": []
+}

package/starter/src/data/mobile-menu.json

@@ -0,0 +1,4 @@
+{
+  "enabled": false,
+  "items": []
+}

package/starter/src/data/old-addresses.json

@@ -0,0 +1 @@
+{ "ids": {}, "paths": {} }

package/starter/src/data/redirects.json

@@ -0,0 +1 @@
+{}

package/starter/src/data/standard-pages.json

@@ -0,0 +1,8 @@
+{
+  "front": "/forside/",
+  "blog": "/blogside/",
+  "notFound": "/siden-findes-ikke/",
+  "contact": "/kontakt/",
+  "privacy": "/privatlivspolitik/",
+  "cookies": "/privatlivspolitik/"
+}

package/starter/src/data/theme.json

@@ -0,0 +1 @@
+{ "theme": "saturn" }

package/starter/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference types="@morphemecms/cms/client" />

package/starter/src/site/config.ts

@@ -0,0 +1,13 @@
+// Who this site is, for the editor (/editor/) and its build: its name as an app, its domain, the GitHub repository it
+// saves to, and what it says of itself beyond the standard (defineSite in @morphemecms/cms/site/defineSite.mjs, where
+// each setting is explained). No React here, so the build and the editor's page can use it.
+import { defineSite } from '@morphemecms/cms/site/defineSite.mjs';
+
+export const config = defineSite({
+  name: 'Mit site',
+  description: 'Rediger indholdet på mit-site.dk.',
+  locale: 'da-DK',
+  domain: 'mit-site.dk',
+  siteDescription: 'Mit site.',
+  repo: { owner: 'mig', name: 'mit-site', branch: 'main' },
+});

package/starter/src/site/worker.js

@@ -0,0 +1,14 @@
+// What the site's Worker (@morphemecms/cms/worker/) has from this site, as `@site/worker` (the alias in wrangler.jsonc).
+// JavaScript, not TypeScript, because it imports worker/apps.js, which the build writes.
+import oldAddresses from '../data/old-addresses.json';
+import apps from '../data/apps.json';
+import contact from '../data/contact.json';
+import moved from '../data/redirects.json';
+import standard from '../data/standard-pages.json';
+
+export { appTexts, appWorkers } from '../../worker/apps.js';
+/** The apps installed (`installed`), the site's contact details (its name on the phone's notifications), the pages and
+ * posts that moved in the editor, and the pages that are the front page and the blog page. */
+export { apps, contact, moved, standard };
+/** The site's redirects from its old addresses, `{ ids, paths }`. */
+export { oldAddresses };

package/starter/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    // As the CMS resolves them when it builds the site (site/theme.mjs): the site's own part, else the CMS's standard
+    // one; the theme in use (here the standard theme, Material), else the standard theme.
+    "paths": {
+      "@site/*": ["./src/site/*", "./node_modules/@morphemecms/cms/defaults/*"],
+      "@data/*": ["./src/data/*"],
+      "@theme/*": ["./node_modules/@morphemecms/cms/theme/*"],
+      "@saturn/*": ["./node_modules/@morphemecms/cms/theme/*"]
+    }
+  }
+}

package/starter/worker/apps.js

@@ -0,0 +1,6 @@
+// Written by packages/editor/lib/apps.mjs (writeAppWorkers): the part of the Worker of each app
+// that has one (src/apps/<app>/worker.js), and its texts. Don't edit it; `npx morpheme app-workers` writes it again.
+
+export const appWorkers = {};
+
+export const appTexts = {};

package/starter/wrangler.jsonc

@@ -0,0 +1,39 @@
+// The site on Cloudflare: the build (npm run build) writes the static site to ./dist, and `wrangler deploy` uploads it as
+// static assets, with the CMS's Worker (@morphemecms/cms/worker/index.js) in front: the editor's login and its way to
+// GitHub, the redirects, the consent log, the notifications and the scheduled pages.
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "morpheme-site",
+  "compatibility_date": "2026-09-01",
+  "compatibility_flags": ["nodejs_compat"],
+  "main": "node_modules/@morphemecms/cms/worker/index.js",
+  // What the Worker has from this site: its settings and src/site/worker.js (its redirects, apps and contact).
+  "alias": { "@site/config": "./src/site/config.ts", "@site/worker": "./src/site/worker.js" },
+  // Keep the variables added in the dashboard (Settings → Variables and secrets) on every deploy.
+  "keep_vars": true,
+  "observability": { "logs": { "enabled": true, "invocation_logs": true } },
+  // NOT_FOUND: the addresses visitors came to that do not exist, for the editor. PUSH: the devices that get the editor's
+  // notifications, and the saves they wait for. Without an "id", `wrangler deploy` creates them the first time.
+  "kv_namespaces": [{ "binding": "NOT_FOUND" }, { "binding": "PUSH" }],
+  // FILES: R2 caching, the copy of the site's files in R2 in front of GitHub. Turned on and off in the editor
+  // ("Indstillinger" › "Avanceret"), which comments this line in or out, and turns it on only when Cloudflare has the bucket.
+  // "r2_buckets": [{ "binding": "FILES", "bucket_name": "morpheme-site-files", "jurisdiction": "eu" }],
+  // CONSENT: the consent log, the visitors' answers in the cookie banner, in D1, created by `wrangler deploy` the first time.
+  "d1_databases": [{ "binding": "CONSENT" }],
+  // Builds of other branches than main run `wrangler preview`, which needs this block.
+  "previews": {},
+  // The checks first, so a branch that fails them is neither built nor deployed.
+  "build": {
+    "command": "npm run check && npm run build",
+  },
+  // Each hour, the pages and posts that are Planlagt are published once their time has come, and the apps do theirs. Each
+  // minute, whether the site has been built with a save, for the notification on the phone.
+  "triggers": { "crons": ["7 * * * *", "* * * * *"] },
+  "assets": {
+    "directory": "./dist",
+    "binding": "ASSETS",
+    "not_found_handling": "404-page",
+    "html_handling": "force-trailing-slash",
+    "run_worker_first": true,
+  },
+}

package/theme/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lars Adolfsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/theme/blocks/ArrowLink.tsx

@@ -0,0 +1,14 @@
+// A link with an arrow after its text (.block-arrow-link in ../styles/blocks.css), last in a block or a panel: "Se alle
+// indlæg" under "Blogindlæg", and the apps' "Læs mere" (@theme/blocks/ArrowLink). A theme draws it its own way with its
+// own blocks/ArrowLink.tsx, with the same props. `className`: the place's own, after the part's.
+import { Svg } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export default function ArrowLink({ href, label, className }: { href: string; label: string; className?: string }) {
+  return (
+    <Link href={href} className={className ? `block-arrow-link ${className}` : 'block-arrow-link'}>
+      {label}
+      <Svg name="arrow-right" size={18} />
+    </Link>
+  );
+}

package/theme/blocks/BlockHead.tsx

@@ -0,0 +1,26 @@
+// A block's head (its contract: @morphemecms/cms/src/standard/head.ts), over the standard blocks that start a section
+// ("Kort", "Punkter med ikon", "Liste", "Trin", "Udtalelser", "Spørgsmål og svar", "Blogindlæg", "Foldeliste"), in the text's
+// style (InProse). Only a heading: the heading itself, as the text has its headings. With a label above it ("Etiket")
+// or a subheading under it ("Underoverskrift"): the three together (.block-head in ../styles/blocks.css, an <hgroup>),
+// each only when it is there. Nothing without any of them.
+import type { HeadView } from '@morphemecms/cms/src/standard/head';
+import { InProse } from '@morphemecms/cms/src/standard/view';
+
+export default function BlockHead({ view }: { view: HeadView }) {
+  const { eyebrow, heading, subheading } = view;
+  if (!eyebrow && !subheading)
+    return heading ? (
+      <InProse>
+        <h2>{heading}</h2>
+      </InProse>
+    ) : null;
+  return (
+    <InProse>
+      <hgroup className="block-head">
+        {eyebrow && <p className="block-eyebrow">{eyebrow}</p>}
+        {heading && <h2>{heading}</h2>}
+        {subheading && <p className="block-subheading">{subheading}</p>}
+      </hgroup>
+    </InProse>
+  );
+}

package/theme/blocks/Panel.tsx

@@ -0,0 +1,32 @@
+// A box: an outlined card (Card.tsx in ../ui/) that is a .block-panel (../styles/blocks.css), with what is in it: its
+// icon and its title first, when it has them, then the rest (its text, a list, buttons …, each a .block-panel-part with
+// room above it). The boxes of "Links" (links/LinkGroups.tsx) and the apps' boxes (@theme/blocks/Panel). A theme draws
+// it its own way with its own blocks/Panel.tsx, with the same props. `as`: the element, a <section> unless the box is no
+// part of the page's outline; `title` (also an empty one) in an <h2>, or `titleAs`; `className`: the place's own, after
+// the part's (useInText's in the text); the rest (aria-label, hidden, data-…) on the box.
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import Card from '@theme/ui/Card';
+
+type Props = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  as?: 'section' | 'div';
+  icon?: string;
+  title?: ReactNode;
+  titleAs?: 'h2' | 'h3' | 'p';
+  titleId?: string;
+  [data: `data-${string}`]: string | undefined;
+};
+
+export default function Panel({ as = 'section', icon, title, titleAs: Title = 'h2', titleId, className, children, ...rest }: Props) {
+  return (
+    <Card as={as} className={className ? `block-panel ${className}` : 'block-panel'} {...rest}>
+      {icon && <Svg name={icon} size={28} className="block-panel-icon" />}
+      {title != null && (
+        <Title className="block-panel-title" id={titleId}>
+          {title}
+        </Title>
+      )}
+      {children}
+    </Card>
+  );
+}