@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/starter/src/data/cookies.json

@@ -1,21 +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."
-}
+{
+  "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

@@ -1 +1 @@
-{}
+{}

package/starter/src/data/footer.json

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

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

package/starter/src/data/menu.json

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

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

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

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

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

package/starter/src/data/redirects.json

@@ -1 +1 @@
-{}
+{}

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

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

package/starter/src/data/theme.json

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

package/starter/src/env.d.ts

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

package/starter/src/site/config.ts

@@ -1,13 +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' },
-});
+// 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

@@ -1,14 +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 };
+// 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

@@ -1,17 +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/*"]
-    }
-  }
-}
+{
+  "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

@@ -1,6 +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 = {};
+// 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

@@ -1,39 +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,
-  },
-}
+// 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

@@ -1,21 +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.
+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

@@ -1,14 +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>
-  );
-}
+// 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

@@ -1,26 +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>
-  );
-}
+// 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

@@ -1,32 +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>
-  );
-}
+// 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>
+  );
+}

package/theme/blocks/Person.tsx

@@ -1,26 +1,26 @@
-// A person (.block-person in ../styles/blocks.css): their picture, small, beside their name and their role, at the top of
-// an app's box (@theme/blocks/Person). A theme draws it its own way with its own blocks/Person.tsx, with the same props.
-// The picture with the sizes the site made of it (pictureOf, packages/editor/site/images.mjs); in the editor the picture itself.
-import type { Picture } from '@morphemecms/cms/src/standard/view';
-
-export default function Person({ picture, name, role }: { picture: Picture; name: string; role?: string }) {
-  return (
-    <div className="block-person">
-      <img
-        src={picture.src}
-        srcSet={picture.srcset}
-        sizes={picture.srcset ? '56px' : undefined}
-        width={picture.width}
-        height={picture.height}
-        alt=""
-        loading="lazy"
-        decoding="async"
-        className="block-person-picture"
-      />
-      <p>
-        <span className="block-person-name">{name}</span>
-        <span className="block-person-role">{role}</span>
-      </p>
-    </div>
-  );
-}
+// A person (.block-person in ../styles/blocks.css): their picture, small, beside their name and their role, at the top of
+// an app's box (@theme/blocks/Person). A theme draws it its own way with its own blocks/Person.tsx, with the same props.
+// The picture with the sizes the site made of it (pictureOf, packages/editor/site/images.mjs); in the editor the picture itself.
+import type { Picture } from '@morphemecms/cms/src/standard/view';
+
+export default function Person({ picture, name, role }: { picture: Picture; name: string; role?: string }) {
+  return (
+    <div className="block-person">
+      <img
+        src={picture.src}
+        srcSet={picture.srcset}
+        sizes={picture.srcset ? '56px' : undefined}
+        width={picture.width}
+        height={picture.height}
+        alt=""
+        loading="lazy"
+        decoding="async"
+        className="block-person-picture"
+      />
+      <p>
+        <span className="block-person-name">{name}</span>
+        <span className="block-person-role">{role}</span>
+      </p>
+    </div>
+  );
+}