@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/templates/Blog.astro

@@ -0,0 +1,38 @@
+---
+// The blog (/blog/): the page chosen as the blog page under "Indstillinger" › "Udseende" › "Standardsider"
+// (packages/editor/site/standardPages.ts), which the owner edits as a page in the editor: its heading and introduction at the top
+// with the tags, then its sections: a text, and each block by its type (PageBlock.astro), among them its posts (the
+// standard block "Blogindlæg", across the page as the front page's blocks; the first close to the tags).
+import BlogIndex from '@theme/components/BlogIndex.astro';
+import TextSection from '@theme/components/TextSection.astro';
+import PageBlock from '@theme/components/home/PageBlock.astro';
+import { space } from '@morphemecms/cms/site/sections';
+import type { StandardPageView } from '@morphemecms/cms/site/standardPages';
+
+type Props = StandardPageView;
+const { page, heading, intro, sections } = Astro.props;
+---
+
+<BlogIndex
+  title={heading}
+  intro={intro ?? ''}
+  seo={{
+    description: page.data.description,
+    seoTitle: page.data.seoTitle,
+    seoDescription: page.data.seoDescription,
+    canonical: page.data.canonical,
+    noindex: page.data.noindex,
+    shareImage: page.data.shareImage,
+    shareTitle: page.data.shareTitle,
+    shareDescription: page.data.shareDescription,
+  }}
+>
+  {sections.map((s, i) => {
+    switch (s.type) {
+      case 'text':
+        return <TextSection heading={s.heading} body={s.body ?? ''} class={space(i)} />;
+      default:
+        return <PageBlock section={s} class={i === 0 ? 'theme-blog-first' : undefined} />;
+    }
+  })}
+</BlogIndex>

package/theme/templates/Category.astro

@@ -0,0 +1,19 @@
+---
+// A tag's page on the blog (/blog/kategori/<slug>/, packages/editor/pages/blog/kategori/[category].astro): its posts.
+import BlogIndex from '@theme/components/BlogIndex.astro';
+import BlogPosts from '@theme/components/BlogPosts.astro';
+import type { Post } from '@morphemecms/cms/site/content';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  /** The tag's slug, its name, and its posts. */
+  category: string;
+  name: string;
+  posts: Post[];
+}
+const { category, name, posts } = Astro.props;
+---
+
+<BlogIndex title={name} intro={siteT.theme.postsAbout(posts.length, name.toLowerCase())} activeCategory={category}>
+  <BlogPosts posts={posts} />
+</BlogIndex>

package/theme/templates/Home.astro

@@ -0,0 +1,36 @@
+---
+// The front page (the standard theme's): the page chosen under "Indstillinger" › "Udseende" › "Standardsider" (packages/editor/site/home.ts), its
+// heading, then its sections in order: a text, and a block by its type in a section of its own (PageBlock.astro): the
+// standard ones' and the apps', the top ("Hero") among them.
+import Base from '@theme/layouts/Base.astro';
+import Container from '@theme/components/Container.astro';
+import Text from '@theme/components/home/Text.astro';
+import PageBlock from '@theme/components/home/PageBlock.astro';
+import { site } from '@morphemecms/cms/site/site';
+import { picturesOf } from '@morphemecms/cms/site/images.mjs';
+import type { FrontPage } from '@morphemecms/cms/site/home';
+
+type Props = FrontPage;
+const { page, heading, headingHtml, sections } = Astro.props;
+---
+
+<Base
+  title={heading}
+  description={page.data.description || site.description}
+  seoTitle={page.data.seoTitle}
+  seoDescription={page.data.seoDescription}
+  canonical={page.data.canonical}
+  noindex={page.data.noindex}
+  shareImage={page.data.shareImage}
+  pictures={picturesOf(page.body)}
+  shareTitle={page.data.shareTitle}
+  shareDescription={page.data.shareDescription}
+>
+  <Container class="pt-8 md:pt-16">
+    <h1 class="theme-title max-w-[22ch]">{headingHtml ? <Fragment set:html={headingHtml} /> : heading}</h1>
+  </Container>
+  {sections.map((s, i) => {
+    const first = i === 0 ? 'theme-home-first' : undefined;
+    return s.type === 'text' ? <Text {...s} class={first} /> : <PageBlock section={s} class={first} />;
+  })}
+</Base>

package/theme/templates/New.astro

@@ -0,0 +1,68 @@
+---
+// /ny/: the new versions of pages (/ny/<the current page's address>, packages/editor/site/noindex.mjs) next to the current ones,
+// to compare before they replace them, with what to look at on each (`review`; the snackbar on a new version links to
+// its row, /ny/#<id>), and below them the blog posts that are hidden until they are approved. Not for search engines
+// (noindex, not in the sitemap).
+import Base from '@theme/layouts/Base.astro';
+import Icon from '@theme/components/Icon.astro';
+import Container from '@theme/components/Container.astro';
+import PageHeader from '@theme/components/PageHeader.astro';
+import { displayTitle, getPages, getPosts, pageHeading, postPath, stateOf } from '@morphemecms/cms/site/content';
+import { isPreview, livePath, previewId } from '@morphemecms/cms/site/noindex.mjs';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+const pages = await getPages();
+const byPath = new Map(pages.map((p) => [p.data.path, p]));
+const rows = pages
+  .filter((p) => isPreview(p.data.path))
+  .map((p) => ({ page: p, current: byPath.get(livePath(p.data.path)) }))
+  .sort((a, b) => a.page.data.path.localeCompare(b.page.data.path));
+
+const posts = (await getPosts({ unlisted: true })).filter((p) => stateOf(p.data) === 'unlisted');
+---
+
+<Base title={siteT.theme.newPages} description={siteT.theme.newPagesDescription}>
+  <PageHeader title={siteT.theme.newPages} intro={siteT.theme.newPagesIntro} />
+
+  {rows.length > 0 && (
+    <Container as="section" class="mt-12 md:mt-16">
+      <ul class="rounded-panel border border-line px-5 md:px-7">
+        {rows.map(({ page, current }, i) => (
+          <li id={previewId(page.data.path)} class:list={['scroll-mt-24 py-5', i > 0 && 'border-t border-line']}>
+            <p class="type-title-medium">{pageHeading(page)}</p>
+            <p class="mt-1.5 flex flex-wrap gap-x-6 gap-y-1">
+              <a href={page.data.path} class="inline-flex items-center gap-1.5 text-accent hover:underline">
+                {siteT.theme.newVersion} <Icon name="arrow-right" size={16} />
+              </a>
+              {current ? (
+                <a href={current.data.path} class="inline-flex items-center gap-1.5 text-muted hover:text-accent">
+                  {siteT.theme.currentPage(displayTitle(current.data.title))}
+                </a>
+              ) : (
+                <span class="text-muted">{siteT.theme.newPage}</span>
+              )}
+            </p>
+            {page.data.review && <p class="mt-2 max-w-[75ch] type-body-medium whitespace-pre-line text-muted">{page.data.review}</p>}
+          </li>
+        ))}
+      </ul>
+    </Container>
+  )}
+
+  {posts.length > 0 && (
+    <Container as="section" class="mt-12 mb-20 md:mt-16 md:mb-28">
+      <h2 class="type-headline-small md:type-headline-medium">{siteT.theme.newPosts}</h2>
+      <p class="mt-2 max-w-[60ch] text-muted">{siteT.theme.newPostsIntro}</p>
+      <ul class="mt-5 rounded-panel border border-line px-5 md:px-7">
+        {posts.map((p, i) => (
+          <li class:list={['py-4', i > 0 && 'border-t border-line']}>
+            <a href={postPath(p)} class="inline-flex items-center gap-1.5 font-medium hover:text-accent">
+              {displayTitle(p.data.title)} <Icon name="arrow-right" size={16} />
+            </a>
+            {p.data.description && <p class="mt-1 max-w-[75ch] type-body-medium text-muted">{p.data.description}</p>}
+          </li>
+        ))}
+      </ul>
+    </Container>
+  )}
+</Base>

package/theme/templates/NotFound.astro

@@ -0,0 +1,117 @@
+---
+// 404 (the standard theme's): the page chosen as the 404 page under "Indstillinger" › "Udseende" › "Standardsider"
+// (packages/editor/site/standardPages.ts), which the owner edits as a page in the editor. Its heading and introduction, then the
+// page the visitor most likely meant (matched on the words in the address, in the browser; an outlined card,
+// ui/Card.tsx), and below that its sections: a text and any block by its type (PageBlock.astro).
+import Base from '@theme/layouts/Base.astro';
+import Icon from '@theme/components/Icon.astro';
+import Card from '@theme/ui/Card';
+import PageHeader from '@theme/components/PageHeader.astro';
+import Container from '@theme/components/Container.astro';
+import TextSection from '@theme/components/TextSection.astro';
+import PageBlock from '@theme/components/home/PageBlock.astro';
+import { space } from '@morphemecms/cms/site/sections';
+import { displayTitle, getPages, getPosts, pageHeading } from '@morphemecms/cms/site/content';
+import { standardPaths, type StandardPageView } from '@morphemecms/cms/site/standardPages';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+type Props = StandardPageView;
+const { heading, intro, sections } = Astro.props;
+// The front page is at / and the blog page at /blog/ (their own addresses send on there); the 404 page is not a page to go to.
+const own = [standardPaths.front, standardPaths.blog, standardPaths.notFound];
+const pages = (await getPages({ previews: false, unlisted: false })).filter((p) => !own.includes(p.data.path));
+const posts = await getPosts();
+// Every page and post the suggestion can point to: [path, title].
+const index: [string, string][] = [
+  ...pages.map((p): [string, string] => [p.data.path, pageHeading(p)]),
+  ...posts.map((p): [string, string] => [`/${p.id}/`, displayTitle(p.data.title)]),
+  ['/blog/', 'Blog'],
+];
+
+// Less space above the first section than on the other pages: the suggestion sits between.
+const spaceOf = (i: number) => (i === 0 ? 'mt-6 md:mt-8' : space(i));
+---
+
+<Base title={siteT.theme.notFound} noindex>
+  <PageHeader title={heading} intro={intro} />
+
+  <Container as="div" class="mt-8 md:mt-12">
+    <Card href="" id="suggestion" hidden className="group flex max-w-2xl items-center justify-between gap-6">
+      <span>
+        <span class="type-body-medium block text-muted">{siteT.theme.didYouMean}</span>
+        <span id="suggestion-title" class="type-title-large mt-1 block group-hover:text-accent"></span>
+      </span>
+      <Icon name="arrow-right" size={22} class="shrink-0 text-accent transition-transform group-hover:translate-x-0.5" />
+    </Card>
+  </Container>
+
+  {sections.map((s, i) => {
+    switch (s.type) {
+      case 'text':
+        return <TextSection heading={s.heading} body={s.body ?? ''} class={spaceOf(i)} />;
+      default:
+        // A block: the standard one's or the app's, by its type.
+        return <PageBlock section={s} />;
+    }
+  })}
+
+  <script is:inline type="application/json" id="page-index" set:html={JSON.stringify(index).replace(/</g, '\\u003c')} />
+  <script>
+    // Suggest the page whose address shares the most words with the one that was not found.
+    const decoded = (s: string) => {
+      try {
+        return decodeURIComponent(s);
+      } catch {
+        return s;
+      }
+    };
+    const words = (s: string) =>
+      decoded(s)
+        .toLowerCase()
+        .split(/[^a-z0-9æøå]+/)
+        .filter((w) => w.length > 2 && !/^\d+$/.test(w));
+
+    function distance(a: string, b: string) {
+      const row = Array.from({ length: b.length + 1 }, (_, i) => i);
+      for (let i = 1; i <= a.length; i++) {
+        let prev = row[0];
+        row[0] = i;
+        for (let j = 1; j <= b.length; j++) {
+          const cur = row[j];
+          row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+          prev = cur;
+        }
+      }
+      return row[b.length];
+    }
+
+    const likeness = (a: string, b: string) => {
+      if (a === b) return 1;
+      // One word inside the other: "pris" in "priser", "kage" in "pandekage".
+      if (a.length >= 4 && b.length >= 4 && (a.includes(b) || b.includes(a))) return 0.8;
+      const d = 1 - distance(a, b) / Math.max(a.length, b.length);
+      return d >= 0.75 ? d : 0;
+    };
+
+    const wanted = words(location.pathname);
+    const index: [string, string][] = JSON.parse(document.getElementById('page-index')!.textContent!);
+    let best: [string, string] | undefined;
+    let bestScore = 0;
+    if (wanted.length) {
+      for (const entry of index) {
+        const have = words(entry[0]);
+        if (!have.length) continue;
+        const hits = wanted.reduce((sum, w) => sum + Math.max(...have.map((h) => likeness(w, h))), 0);
+        // Mostly how many of the wanted words were found; a little for how close the page is in length.
+        const score = hits / wanted.length - 0.02 * Math.abs(have.length - wanted.length);
+        if (score > bestScore) [best, bestScore] = [entry, score];
+      }
+    }
+    if (best && bestScore >= 0.4) {
+      const link = document.getElementById('suggestion') as HTMLAnchorElement;
+      link.href = best[0];
+      document.getElementById('suggestion-title')!.textContent = best[1];
+      link.hidden = false;
+    }
+  </script>
+</Base>

package/theme/theme.json

@@ -0,0 +1,28 @@
+{
+  "name": "Material",
+  "version": "1.0.0",
+  "author": "Lars Adolfsen",
+  "icon": "/editor/icon-192.png",
+  "license": "MIT",
+  "thirdParty": [],
+  "icons": "material-symbols",
+  "motion": "expressive",
+  "description": {
+    "da-DK": "Hjemmesiden i Googles Material Design 3, som mange kender fra Android: klar, enkel og velkendt.",
+    "en-US": "The website in Google's Material Design 3, which many know from Android: clear, simple and familiar."
+  },
+  "highlights": {
+    "da-DK": [
+      "Roboto og Materials tekststørrelser",
+      "Tonede flader i stedet for streger",
+      "Materials former, knapper og bevægelser",
+      "Materials ikoner"
+    ],
+    "en-US": [
+      "Roboto and Material's type scale",
+      "Tonal surfaces instead of lines",
+      "Material's shapes, buttons and motion",
+      "Material's icons"
+    ]
+  }
+}

package/theme/ui/Badge.tsx

@@ -0,0 +1,45 @@
+// A badge (m3.material.io/components/badges, .badge in ../styles/ui.css): a small dot (without `count`: something new)
+// or a number (`count`, more than `max` shown as "999+"), on what it is about (`children`: an icon or an icon button,
+// at its top end corner, .badge-anchor) or by itself after a label (a navigation drawer's item). The badge is only seen:
+// what it says is read by screen readers from `label` (e.g. "3 nye beskeder"), or, on an icon button, from the button's
+// own name, which should say it. How it looks is the theme's (--badge-*). An Astro component gives an element the same
+// classes with badgeClass.
+import type { ReactNode } from 'react';
+
+/** A badge's classes: the small dot, or the large one with a number. */
+export const badgeClass = (large: boolean) => `badge ${large ? 'badge-large' : 'badge-small'}`;
+
+export default function Badge({
+  count,
+  max = 999,
+  label,
+  className,
+  children,
+  ...rest
+}: {
+  count?: number;
+  max?: number;
+  label?: string;
+  className?: string;
+  children?: ReactNode;
+} & Record<string, unknown>) {
+  const large = count !== undefined;
+  const badge = (
+    <span className={[badgeClass(large), className].filter(Boolean).join(' ')} aria-hidden="true" {...rest}>
+      {large && (count > max ? `${max}+` : count)}
+    </span>
+  );
+  const read = label && <span className="badge-label">{label}</span>;
+  return children === undefined ? (
+    <>
+      {badge}
+      {read}
+    </>
+  ) : (
+    <span className="badge-anchor">
+      {children}
+      {badge}
+      {read}
+    </span>
+  );
+}

package/theme/ui/BottomSheet.tsx

@@ -0,0 +1,148 @@
+// A bottom sheet (m3.material.io/components/bottom-sheets, .bottom-sheet in ../styles/ui.css): its container, with the
+// drag handle, the header (the headline, `headline` with its id `headlineId`, the supporting text under it and evt. the
+// close button, `closeLabel`), what it shows (`children`, filling the rest; what stands in place of a frame while it
+// loads has bottomSheetCoverClass) and evt. a footer (`footer`). Its kind (`kind`) is Material's:
+// - 'modal' (the default): over the page and its scrim, in a <dialog> with bottomSheetClass (an app's: Calendly's
+//   Sheet.astro), which bottomSheet() in bottomSheet.ts opens, closes and lets be dragged down; in the editor only
+//   drawn, as high as `height` says.
+// - 'standard': at the bottom of the screen with the page usable behind it, without a scrim, a <section> named by its
+//   headline. It rests in one of its states (`state`, where it starts: 'collapsed', only the handle and the header;
+//   'half-expanded', at most half the screen's height; 'expanded', as high as what it shows, nearly to the top; or
+//   'hidden'), and its handle is a button (`dragHandleLabel`, what it says to a screen reader) that is dragged between
+//   them or tapped to expand and collapse it; with a close button it can be hidden. On the site bottomSheet.script.ts
+//   lets it be dragged (standardBottomSheet() in bottomSheet.ts, which a block's or an app's script can also use); in
+//   the editor it is drawn in its state and dragged here, at the bottom of its frame (which holds it with
+//   contain: layout, and is a size container).
+// The editor's own sheets (choices, fields) are modal ones in a <dialog> with bottomSheetFitClass, as high as what is in
+// 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`).
+// How it looks is the theme's (--bottom-sheet-*).
+import { useEffect, useRef, type ReactNode } from 'react';
+import { useOnSite } from '@morphemecms/cms/src/standard/view';
+import IconButton from '@theme/ui/IconButton';
+import { standardBottomSheet } from '@theme/ui/bottomSheet';
+
+/** The kinds of a bottom sheet, and the states a standard one rests in, as Material 3 names them. */
+export type BottomSheetKind = 'modal' | 'standard';
+export type BottomSheetState = 'collapsed' | 'half-expanded' | 'expanded' | 'hidden';
+
+/** The class of the <dialog> a modal bottom sheet is in, of what stands in place of what it shows (over a frame while
+ * it loads, or instead of it), and a bottom sheet's container's classes. */
+export const bottomSheetClass = 'bottom-sheet';
+export const bottomSheetCoverClass = 'bottom-sheet-cover';
+export const bottomSheetContainerClass = (kind: BottomSheetKind = 'modal') =>
+  kind === 'standard' ? 'bottom-sheet-container bottom-sheet-standard' : 'bottom-sheet-container';
+/** The classes of the <dialog> of a modal sheet as high as what is in it (at most most of the screen), and of one as high
+ * as the screen and on a computer wider than a sheet (a whole page in it: the editor's preview). */
+export const bottomSheetFitClass = 'bottom-sheet bottom-sheet-fit';
+export const bottomSheetFullClass = 'bottom-sheet bottom-sheet-full';
+
+/** A bottom sheet's drag handle and header: its headline, the supporting text under it and evt. the close button. The
+ * handle is a button with `handleLabel` (a standard sheet's, `expanded` saying whether it is up; the editor's, which
+ * does `onHandle`); the close button does `onClose` in the editor. */
+export function BottomSheetHeader({
+  headline,
+  headlineId,
+  supportingText,
+  closeLabel,
+  handleLabel,
+  expanded,
+  standard,
+  onHandle,
+  onClose,
+}: {
+  headline: ReactNode;
+  headlineId?: string;
+  supportingText?: ReactNode;
+  closeLabel?: string;
+  handleLabel?: string;
+  expanded?: boolean;
+  standard?: boolean;
+  onHandle?: () => void;
+  onClose?: () => void;
+}) {
+  return (
+    <>
+      {handleLabel !== undefined ? (
+        <button
+          type="button"
+          className="bottom-sheet-drag-handle"
+          aria-label={handleLabel}
+          aria-expanded={standard ? expanded : undefined}
+          data-bottom-sheet-handle=""
+          onClick={onHandle}
+        ></button>
+      ) : (
+        <div className="bottom-sheet-drag-handle" data-bottom-sheet-handle=""></div>
+      )}
+      <div className="bottom-sheet-header" data-bottom-sheet-header={standard ? '' : undefined}>
+        <div className="bottom-sheet-heading">
+          <h2 id={headlineId} className="bottom-sheet-headline">
+            {headline}
+          </h2>
+          {supportingText && <p className="bottom-sheet-supporting-text">{supportingText}</p>}
+        </div>
+        {closeLabel && <IconButton icon="x" label={closeLabel} data-bottom-sheet-close="" onClick={onClose} />}
+      </div>
+    </>
+  );
+}
+
+export default function BottomSheet({
+  kind = 'modal',
+  state = 'collapsed',
+  headline,
+  headlineId,
+  supportingText,
+  closeLabel,
+  dragHandleLabel,
+  footer,
+  height,
+  className,
+  children,
+}: {
+  kind?: BottomSheetKind;
+  state?: BottomSheetState;
+  headline: ReactNode;
+  headlineId?: string;
+  supportingText?: ReactNode;
+  closeLabel?: string;
+  dragHandleLabel?: string;
+  footer?: ReactNode;
+  height?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  const standard = kind === 'standard';
+  const onSite = useOnSite();
+  const sheet = useRef<HTMLDivElement>(null);
+  // In the editor a standard one is dragged here, as bottomSheet.script.ts lets it be on the site.
+  useEffect(() => {
+    if (standard && !onSite && sheet.current) standardBottomSheet(sheet.current);
+  }, [standard, onSite]);
+  const Container = standard ? 'section' : 'div';
+  return (
+    <Container
+      ref={sheet}
+      className={[bottomSheetContainerClass(kind), className].filter(Boolean).join(' ')}
+      aria-labelledby={standard ? headlineId : undefined}
+      data-bottom-sheet-container=""
+      data-bottom-sheet-standard={standard ? '' : undefined}
+      data-state={standard ? state : undefined}
+      style={height ? { height } : undefined}
+    >
+      <BottomSheetHeader
+        headline={headline}
+        headlineId={headlineId}
+        supportingText={supportingText}
+        closeLabel={closeLabel}
+        handleLabel={standard ? (dragHandleLabel ?? '') : undefined}
+        expanded={state === 'half-expanded' || state === 'expanded'}
+        standard={standard}
+      />
+      <div className="bottom-sheet-content">{children}</div>
+      {footer && <p className="bottom-sheet-footer">{footer}</p>}
+    </Container>
+  );
+}

package/theme/ui/Button.tsx

@@ -0,0 +1,79 @@
+// A button (m3.material.io/components/buttons, .button in ../styles/ui.css): a label, an icon before it (`icon`) and
+// evt. one after it (`trailingIcon`, the arrow; each its name, or in the editor an icon already made; its class button-trailing-icon, so a theme can hide or move it). Its
+// kind (`kind`: filled, the default, tonal, elevated, outlined or text), its size (`size`: xsmall, small, medium, the
+// default, large or xlarge) and its shape (`shape`: round, the default, or square) are Material's names; how each looks
+// is the theme's. With `selected` (true or false) it is a toggle button, aria-pressed: the theme gives each kind its
+// look off and on, and its corners turn square when it is on (round when it is square). A text button is never a toggle
+// (Material). What turns it on and off is the script of the block that shows it. Its icon is then drawn filled while it
+// is on, where the site draws the icon filled. With `href` it is a link (Link: on the site; in the editor only drawn;
+// never a toggle), else a <button> (`type`, button by default). Other attributes (data-…, aria-…, disabled) go on it, and `className`
+// after its own classes (its width). An Astro component without React gives an element the same classes with
+// buttonClass, and a toggle aria-pressed itself.
+import type { ReactNode } from 'react';
+import { Glyph, Svg, iconFile, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link, type ButtonKind } from '@morphemecms/cms/src/standard/view';
+
+export const buttonSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
+export type ButtonSize = (typeof buttonSizes)[number];
+export const buttonShapes = ['round', 'square'] as const;
+export type ButtonShape = (typeof buttonShapes)[number];
+
+/** A button's classes: its kind's and, unless it is medium, its size's and, unless it is round, its shape's. */
+export const buttonClass = (kind: ButtonKind = 'filled', size: ButtonSize = 'medium', shape: ButtonShape = 'round') =>
+  ['button', `button-${kind}`, size !== 'medium' && `button-${size}`, shape !== 'round' && `button-${shape}`].filter(Boolean).join(' ');
+
+/** A toggle's icon (a Button's, an IconButton's): the icon, and the same icon filled while it is on, where the site
+ * draws it filled (the theme shows the one of the state it is in: .<part>-unselected-icon, .<part>-selected-icon). */
+export function ToggleIcon({ part, name, size }: { part: 'button' | 'icon-button'; name: string; size: number }) {
+  if (!iconFile(name, 'fill')) return <Svg name={name} size={size} />;
+  return (
+    <>
+      <Svg name={name} size={size} className={`${part}-unselected-icon`} />
+      <Svg name={name} weight="fill" size={size} className={`${part}-selected-icon`} />
+    </>
+  );
+}
+
+export default function Button({
+  kind,
+  size,
+  shape,
+  selected,
+  icon,
+  trailingIcon,
+  href,
+  type = 'button',
+  className,
+  children,
+  ...rest
+}: {
+  kind?: ButtonKind;
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  selected?: boolean;
+  icon?: IconRef;
+  trailingIcon?: IconRef;
+  href?: string;
+  type?: 'button' | 'submit';
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const classes = [buttonClass(kind, size, shape), className].filter(Boolean).join(' ');
+  const toggle = selected !== undefined && href === undefined;
+  const content = (
+    <>
+      {icon && (toggle && typeof icon === 'string' ? <ToggleIcon part="button" name={icon} size={20} /> : <Glyph icon={icon} size={20} />)}
+      {children}
+      {trailingIcon && <Glyph icon={trailingIcon} size={18} className="button-trailing-icon" />}
+    </>
+  );
+  return href === undefined ? (
+    <button type={type} className={classes} aria-pressed={toggle ? selected : undefined} {...rest}>
+      {content}
+    </button>
+  ) : (
+    <Link href={href} className={classes} {...rest}>
+      {content}
+    </Link>
+  );
+}

package/theme/ui/ButtonGroup.tsx

@@ -0,0 +1,31 @@
+// A button group (m3.material.io/components/button-groups, .button-group in ../styles/ui.css): buttons or icon buttons
+// that belong together side by side (`children`: the theme's Button and IconButton), in a group with its name (`label`,
+// read by screen readers). Its kind (`kind`) is Material's name; how it looks is the theme's: standard (the default,
+// with a gap between them; the one pressed a little wider and its neighbours a little narrower) or connected (joined,
+// the corners between them small, larger with the size, the outer ones the buttons'). The buttons in it have one size
+// and one shape (`size`, `shape` on each: Button's and IconButton's), and the group follows them. A toggle button in it
+// is a Button or an IconButton with `selected` (aria-pressed): the theme gives it its look on and off (the Button's and
+// the IconButton's), in a standard group with the group's corners while it is on, in a connected one fully round. What
+// turns it on and off is the script of the block that shows it. Other attributes (data-…) go on the group, and `className` after its own classes. An Astro component gives
+// an element the same classes with buttonGroupClass.
+import type { ReactNode } from 'react';
+
+export const buttonGroupKinds = ['standard', 'connected'] as const;
+export type ButtonGroupKind = (typeof buttonGroupKinds)[number];
+
+/** A button group's classes: its kind's. */
+export const buttonGroupClass = (kind: ButtonGroupKind = 'standard') => `button-group button-group-${kind}`;
+
+export default function ButtonGroup({
+  kind,
+  label,
+  className,
+  children,
+  ...rest
+}: { kind?: ButtonGroupKind; label: string; className?: string; children: ReactNode } & Record<string, unknown>) {
+  return (
+    <div role="group" aria-label={label} className={[buttonGroupClass(kind), className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </div>
+  );
+}

package/theme/ui/Card.tsx

@@ -0,0 +1,45 @@
+// A card (m3.material.io/components/cards, .card in ../styles/ui.css): the surface a block or an app's block is, with
+// what is on it (`children`: the block's own heading, text, picture …). Its kind (`kind`: outlined, the default,
+// elevated or filled) is Material's name; how each looks is the theme's, and so is its elevation (lifted when it is
+// a link pointed at, and `dragged`: while it is dragged to another place). With `href` the whole card is a link (Link:
+// on the site; in the editor only drawn), else the element `as` (a <div>, a <section>, an <article>, a <figure> or an
+// <li>). `className` after its own classes (the block's: its layout and what is on it); the rest (aria-…, id, data-…)
+// on it. An Astro component without React gives an element the same classes with cardClass.
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export const cardKinds = ['elevated', 'filled', 'outlined'] as const;
+export type CardKind = (typeof cardKinds)[number];
+
+/** A card's classes: its kind's, and evt. dragged. */
+export const cardClass = (kind: CardKind = 'outlined', { dragged = false } = {}) =>
+  ['card', `card-${kind}`, dragged && 'card-dragged'].filter(Boolean).join(' ');
+
+export default function Card({
+  kind,
+  dragged,
+  as: Box = 'div',
+  href,
+  className,
+  children,
+  ...rest
+}: Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> & {
+  kind?: CardKind;
+  dragged?: boolean;
+  as?: 'div' | 'section' | 'article' | 'figure' | 'li';
+  href?: string;
+  className?: string;
+  children: ReactNode;
+  [data: `data-${string}`]: string | undefined;
+}) {
+  const classes = [cardClass(kind, { dragged }), className].filter(Boolean).join(' ');
+  return href === undefined ? (
+    <Box className={classes} {...rest}>
+      {children}
+    </Box>
+  ) : (
+    <Link href={href} className={classes} {...rest}>
+      {children}
+    </Link>
+  );
+}