@morphemecms/cms 0.0.0-stage → 0.1.0

package/lib/svg.mjs

@@ -0,0 +1,231 @@
+// SVG files, as the site and the editor use them: cleaned (cleanSvg), so that only what draws is kept, and an icon as
+// the site and the editor draw every icon (Svg in ../src/icon.tsx; the play button of a video in the text, video.mjs):
+// the bare <svg> with the file's viewBox and what is inside it, at the size given, in the text's colour
+// (fill="currentColor"), hidden from screen readers. So an icon looks the same whether it is a theme's (in any viewBox:
+// Material Symbols' 0 -960 960 960) or Phosphor's (0 0 256 256).
+//
+// An SVG can hold code, which would run in the page an icon is drawn in, or when the file is opened on the site (both
+// where the editor's GitHub login is), and can load things from elsewhere. So every SVG the site keeps or draws (the
+// logo the owner picks, brand.ts; an icon pack's and a theme's icons, also from the app store) is read here and written
+// anew with only the elements and attributes below, no address outside the file (a link only to an id in it, "#…",
+// or a picture inside it as a data: PNG, JPEG, WebP or GIF), and no CSS that loads or runs something. What is written
+// is built from the parts read, never copied as text, so a file the reading misunderstands still cannot bring
+// anything else along.
+// Pure JavaScript, so it works the same in the browser (the editor) and in Node (the build, check:content).
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+const XML_NS = 'http://www.w3.org/XML/1998/namespace';
+const ELEMENTS = new Set(
+  (
+    'svg g defs symbol use image path circle ellipse rect line polyline polygon text tspan clipPath mask ' +
+    'linearGradient radialGradient stop title desc style'
+  ).split(' '),
+);
+const ATTRIBUTES = new Set(
+  (
+    'id class style viewBox width height x y x1 y1 x2 y2 cx cy r rx ry fx fy fr d points transform preserveAspectRatio ' +
+    'fill fill-rule fill-opacity stroke stroke-width stroke-linecap stroke-linejoin stroke-miterlimit stroke-dasharray ' +
+    'stroke-dashoffset stroke-opacity opacity clip-path clip-rule mask clipPathUnits maskUnits maskContentUnits ' +
+    'offset stop-color stop-opacity gradientUnits gradientTransform spreadMethod display visibility ' +
+    'font-family font-size font-weight font-style text-anchor dominant-baseline letter-spacing'
+  ).split(' '),
+);
+// CSS that loads or runs something: a url(…) to anything but an id in the file, the other ways of naming a picture or
+// a font by its address (image-set("…"), image("…"), src("…")), @import, IE's expression(…), a javascript: address,
+// and any escape (\75 rl(…) is url(…)).
+const OUTSIDE = /url\s*\(\s*(?!\s|['"]?\s*#)|image-set\s*\(|\b(image|src)\s*\(|@import|expression\s*\(|javascript:|\\/i;
+// A picture inside the file: only a PNG, JPEG, WebP or GIF as data: (the logo made from a PNG, logoFile in brand.ts).
+const PICTURE = /^data:image\/(png|jpeg|webp|gif);base64,[a-z0-9+/=\s]*$/i;
+// A viewBox: four numbers.
+const VIEW_BOX = /^\s*-?[\d.]+(?:e-?\d+)?(?:[\s,]+-?[\d.]+(?:e-?\d+)?){3}\s*$/i;
+
+const NAME = '[A-Za-z_][\\w.:-]*';
+const TAG = new RegExp(`<(${NAME})((?:\\s+${NAME}\\s*=\\s*(?:"[^"<]*"|'[^'<]*'))*)\\s*(/?)>`, 'y');
+const ATTRIBUTE = new RegExp(`(${NAME})\\s*=\\s*(?:"([^"<]*)"|'([^'<]*)')`, 'g');
+const CLOSE = new RegExp(`</(${NAME})\\s*>`, 'y');
+const DOCTYPE = /<!DOCTYPE\s[^[>]*(?:\[([^\]]*)\])?\s*>/iy;
+const ENTITY = /<!ENTITY\s+([A-Za-z_][\w.:-]*)\s+(?:"([^"]*)"|'([^']*)')\s*>/g;
+const BUILT_IN = { lt: '<', gt: '>', amp: '&', quot: '"', apos: "'" };
+
+/** Text with its references (&amp; &#160; &#xA0; and the file's own entities) as the characters they stand for;
+ * null for a reference that is not one. */
+function decode(text, entities) {
+  let ok = true;
+  const out = text.replace(/&(?:#x([0-9a-f]+)|#(\d+)|([A-Za-z_][\w.:-]*))?(;?)/gi, (all, hex, dec, name, end) => {
+    const code = hex ? parseInt(hex, 16) : dec ? parseInt(dec, 10) : NaN;
+    if (end && (hex || dec) && code > 0 && code <= 0x10ffff) return String.fromCodePoint(code);
+    if (end && name && Object.hasOwn(entities, name)) return entities[name];
+    ok = false;
+    return '';
+  });
+  return ok ? out : null;
+}
+
+/** An XML file as a tree of its elements ({ name, attributes, children }, a child being an element or text), or null
+ * when it is not well-formed. Comments, the XML declaration and processing instructions (an xml-stylesheet) are left
+ * out; the file's own entities (`<!ENTITY ns_svg "…">`, as old drawing programs wrote them) are put in, nothing else
+ * of a DOCTYPE. */
+function parse(text) {
+  const entities = { ...BUILT_IN };
+  const document = { name: '', attributes: [], children: [] };
+  const open = [document];
+  const addText = (value) => {
+    const decoded = decode(value, entities);
+    if (decoded === null) return false;
+    open.at(-1).children.push(decoded);
+    return true;
+  };
+  let i = 0;
+  while (i < text.length) {
+    const lt = text.indexOf('<', i);
+    if (lt < 0) return addText(text.slice(i)) && open.length === 1 ? document : null;
+    if (lt > i && !addText(text.slice(i, lt))) return null;
+    const until = (end, from) => {
+      const at = text.indexOf(end, from);
+      return at < 0 ? -1 : at + end.length;
+    };
+    if (text.startsWith('<!--', lt)) i = until('-->', lt + 4);
+    else if (text.startsWith('<![CDATA[', lt)) {
+      i = until(']]>', lt);
+      if (i < 0) return null;
+      open.at(-1).children.push(text.slice(lt + '<![CDATA['.length, i - 3));
+    } else if (text.startsWith('<?', lt)) i = until('?>', lt);
+    else if (text.startsWith('<!', lt)) {
+      DOCTYPE.lastIndex = lt;
+      const doctype = DOCTYPE.exec(text);
+      if (!doctype || open.length > 1) return null;
+      for (const [, name, double, single] of (doctype[1] ?? '').matchAll(ENTITY)) {
+        const value = decode(double ?? single, BUILT_IN);
+        if (value === null) return null;
+        if (!Object.hasOwn(entities, name)) entities[name] = value;
+      }
+      i = DOCTYPE.lastIndex;
+    } else if (text.startsWith('</', lt)) {
+      CLOSE.lastIndex = lt;
+      const close = CLOSE.exec(text);
+      if (!close || open.length === 1 || open.at(-1).name !== close[1]) return null;
+      open.pop();
+      i = CLOSE.lastIndex;
+    } else {
+      TAG.lastIndex = lt;
+      const tag = TAG.exec(text);
+      if (!tag) return null;
+      const attributes = [];
+      for (const [, name, double, single] of tag[2].matchAll(ATTRIBUTE)) {
+        const value = decode(double ?? single, entities);
+        if (value === null) return null;
+        if (!attributes.some(([n]) => n === name)) attributes.push([name, value]);
+      }
+      const element = { name: tag[1], attributes, children: [] };
+      open.at(-1).children.push(element);
+      if (!tag[3]) open.push(element);
+      i = TAG.lastIndex;
+    }
+    if (i < 0) return null;
+  }
+  return open.length === 1 ? document : null;
+}
+
+const escapeText = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const escapeAttribute = (s) => escapeText(s).replace(/"/g, '&quot;');
+
+/** An SVG file with only what draws (see above), or null when it is not one well-formed <svg>. `style`: keep
+ * <style> elements, for a file shown on its own (the logo); an icon drawn inside a page has none, as its CSS would
+ * apply to the whole page. `svg` is the cleaned file, `viewBox` and `inner` its viewBox (only four numbers) and what is
+ * inside its <svg>, and `removed` what was left out (`<script>`, `onload`, …), for check:content.
+ * @param {string | undefined} file @param {{ style?: boolean }} [options]
+ * @returns {{ svg: string, viewBox: string | undefined, inner: string, removed: string[] } | null} */
+export function cleanSvg(file, { style = false } = {}) {
+  const document = file === undefined ? null : parse(file);
+  const elements = document?.children.filter((c) => typeof c !== 'string') ?? [];
+  if (elements.length !== 1 || document.children.some((c) => typeof c === 'string' && c.trim())) return null;
+  const removed = new Set();
+
+  /** The namespaces in an element (by their prefix, '' the default one), with those around it. */
+  const namespacesIn = (element, around) => {
+    const own = { ...around };
+    for (const [name, value] of element.attributes)
+      if (name === 'xmlns') own[''] = value;
+      else if (name.startsWith('xmlns:')) own[name.slice('xmlns:'.length)] = value;
+    return own;
+  };
+  const split = (name) => (name.includes(':') ? name.split(':', 2) : ['', name]);
+  /** What of an element's attributes is kept, as [name, value]. */
+  const attributesOf = (element, local, namespaces) => {
+    const kept = [];
+    for (const [name, value] of element.attributes) {
+      if (name === 'xmlns' || name.startsWith('xmlns:')) continue;
+      const [prefix, own] = split(name);
+      const namespace = prefix ? namespaces[prefix] : '';
+      if (namespace === XML_NS) continue; // xml:space and xml:lang change nothing that is drawn
+      const href = own === 'href' && (namespace === '' || namespace === XLINK_NS);
+      if (
+        href
+          ? (value.startsWith('#') && !OUTSIDE.test(value)) || (local === 'image' && PICTURE.test(value))
+          : namespace === '' && ATTRIBUTES.has(name) && !OUTSIDE.test(value)
+      )
+        kept.push([href ? 'href' : name, value]);
+      else removed.add(name);
+    }
+    return kept;
+  };
+  /** What is inside an element, as it is written. */
+  const innerOf = (element, local, namespaces) => {
+    let inner = '';
+    for (const child of element.children)
+      if (typeof child !== 'string') inner += write(child, namespaces) ?? '';
+      else if (local !== 'style' || !OUTSIDE.test(child)) inner += escapeText(child);
+      else removed.add('<style>');
+    return inner;
+  };
+  const tag = (local, attributes, inner) => {
+    const head = attributes.map(([n, v]) => ` ${n}="${escapeAttribute(v)}"`).join('');
+    return inner ? `<${local}${head}>${inner}</${local}>` : `<${local}${head}/>`;
+  };
+  /** An element as it is written, or null when it is left out. */
+  const write = (element, around) => {
+    const namespaces = namespacesIn(element, around);
+    const [prefix, local] = split(element.name);
+    if (namespaces[prefix] !== SVG_NS || !ELEMENTS.has(local) || (local === 'style' && !style)) {
+      removed.add(`<${element.name}>`);
+      return null;
+    }
+    return tag(local, attributesOf(element, local, namespaces), innerOf(element, local, namespaces));
+  };
+
+  // The <svg> itself, read as SVG also without a namespace of its own, as a browser does inside a page.
+  const [root] = elements;
+  const namespaces = namespacesIn(root, { '': SVG_NS, xml: XML_NS });
+  if (root.name !== 'svg' || namespaces[''] !== SVG_NS) return null;
+  const attributes = attributesOf(root, 'svg', namespaces).filter(([name, value]) => {
+    if (name !== 'viewBox' || VIEW_BOX.test(value)) return true;
+    removed.add(name);
+    return false;
+  });
+  const inner = innerOf(root, 'svg', namespaces);
+  const viewBox = attributes.find(([name]) => name === 'viewBox')?.[1].trim();
+  return { svg: `${tag('svg', [['xmlns', SVG_NS], ...attributes], inner)}\n`, viewBox, inner, removed: [...removed] };
+}
+
+// The icons read, by their file's text: the editor draws the same few icons again and again.
+const read = new Map();
+
+/** An SVG file's viewBox and what is inside its <svg>, cleaned (cleanSvg), or null when it is not one <svg>.
+ * @param {string | undefined} file @returns {{ viewBox: string | undefined, inner: string } | null} */
+export function svgParts(file) {
+  if (file === undefined) return null;
+  if (!read.has(file)) {
+    const clean = cleanSvg(file);
+    read.set(file, clean && { viewBox: clean.viewBox, inner: clean.inner });
+  }
+  return read.get(file);
+}
+
+/** The icon as HTML, as <Svg> draws it. @param {string | undefined} file @param {number} size */
+export function svgHtml(file, size) {
+  const parts = svgParts(file);
+  if (!parts) return '';
+  const viewBox = parts.viewBox ? ` viewBox="${parts.viewBox}"` : '';
+  return `<svg width="${size}" height="${size}" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"${viewBox}>${parts.inner}</svg>`;
+}

package/lib/text-colors.d.mts

@@ -0,0 +1,11 @@
+/** A text with colours as HTML: its colours as they are, the rest made plain text by `plain` (a heading's, without
+ * Markdown) and escaped. 'Få <span class="color-accent">*samtalen*</span>' with a `plain` without the stars is
+ * 'Få <span class="color-accent">samtalen</span>'. Undefined for a text without colours. */
+export function coloredHtml(s: any, plain: any): any;
+/** The colours, by the name of the site's colour they are ("Tema › Farver"): the accent and the quiet text's. */
+export const TEXT_COLORS: string[];
+export function colorClass(name: any): string;
+export function colorOpen(name: any): string;
+export const COLOR_CLOSE: "</span>";
+export function colorOpened(html: any): string | null;
+export function withoutColors(s: any): string;

package/lib/text-colors.mjs

@@ -0,0 +1,43 @@
+// The colours a word or more of a text can have (the colour button over a selection, MarkdownEditor.tsx): only the
+// site's own colours, by name, so the text follows the theme and dark mode. In the Markdown it is HTML around the text,
+//   # Den tidlige ansøger får <span class="color-accent">samtalen</span>
+// which every Markdown reader shows (Astro's, GitHub's), and the editor reads and writes back as it was (markdown.mjs).
+// How a colour looks is the standard theme's blocks.css (.color-accent, .color-muted), which every theme imports. No
+// React or browser here: the site and the checks use it too.
+
+/** The colours, by the name of the site's colour they are ("Tema › Farver"): the accent and the quiet text's. */
+export const TEXT_COLORS = ['accent', 'muted'];
+
+/** The class of a colour (`color-accent`). */
+export const colorClass = (name) => `color-${name}`;
+
+/** The HTML that starts a colour, and the one that ends it. */
+export const colorOpen = (name) => `<span class="${colorClass(name)}">`;
+export const COLOR_CLOSE = '</span>';
+
+const OPEN = new RegExp(`^<span class="color-(${TEXT_COLORS.join('|')})">$`);
+const COLORED = new RegExp(`<span class="color-(${TEXT_COLORS.join('|')})">([\\s\\S]*?)</span>`, 'g');
+
+/** The colour a piece of HTML starts (`<span class="color-accent">`: 'accent'), or null. */
+export const colorOpened = (html) => String(html).match(OPEN)?.[1] ?? null;
+
+/** A text without its colours, their text kept. */
+export const withoutColors = (s) => String(s).replace(COLORED, '$2');
+
+const escape = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+/** A text with colours as HTML: its colours as they are, the rest made plain text by `plain` (a heading's, without
+ * Markdown) and escaped. 'Få <span class="color-accent">*samtalen*</span>' with a `plain` without the stars is
+ * 'Få <span class="color-accent">samtalen</span>'. Undefined for a text without colours. */
+export function coloredHtml(s, plain) {
+  let some = false;
+  // Each colour as a mark that no text has, while the text is made plain.
+  const marked = String(s).replace(COLORED, (_, color, text) => {
+    some = true;
+    return `\uE000${TEXT_COLORS.indexOf(color)}${text}\uE001`;
+  });
+  if (!some) return undefined;
+  return escape(plain(marked))
+    .replace(/\uE000(\d)/g, (_, i) => colorOpen(TEXT_COLORS[Number(i)]))
+    .replace(/\uE001/g, COLOR_CLOSE);
+}

package/lib/video-id.d.mts

@@ -0,0 +1,14 @@
+export function videoOf(text: any): {
+    site: string;
+    id: string;
+    hash?: undefined;
+} | {
+    site: string;
+    id: string;
+    hash: string | null;
+} | null;
+/** The address that plays the video, with the settings in the address of the iframe it came from. */
+export function player(video: any, frame: any): string;
+export function videoPage(video: any): string;
+export function stillName(video: any): string;
+export function vimeoInfo(video: any, width: any): string;

package/lib/video-id.mjs

@@ -0,0 +1,72 @@
+// The video in what is pasted for it, from YouTube or Vimeo: a link to it, in any form they give it, or
+// their code to embed it; null when it is not a video. Used by the video block on the site (video.mjs),
+// in the editor (src/standard/video/) and when the stills are fetched (packages/editor/scripts/video-thumbnails.mjs), so
+// all read it the same.
+//   { site: 'youtube', id }: youtube.com/watch?v=…, youtu.be/…, /shorts/…, /live/…, /embed/…
+//   { site: 'vimeo', id, hash }: vimeo.com/<id>, with the hash of an unlisted video after it
+//     (vimeo.com/<id>/<hash>), /channels/<name>/<id>, /showcase/…/video/<id>, /groups/…/videos/<id>,
+//     /manage/videos/<id> and player.vimeo.com/video/<id>?h=<hash>; hash is null when there is none.
+const YOUTUBE_ID = /^[\w-]{11}$/;
+const NUMBER = /^\d+$/;
+const HASH = /^[\da-f]+$/i;
+
+export function videoOf(text) {
+  const src = /\bsrc="([^"]+)"/.exec(text ?? '')?.[1]?.replaceAll('&amp;', '&') ?? String(text ?? '').trim();
+  let url;
+  try {
+    url = new URL(src.replace(/^\/\//, 'https://').replace(/^(?!https?:)(?=(www\.|m\.|player\.)?(youtu|vimeo))/i, 'https://'));
+  } catch {
+    return null;
+  }
+  const host = url.hostname.replace(/^(www|m)\./, '');
+  const part = (prefix) => (url.pathname.startsWith(prefix) ? url.pathname.slice(prefix.length).split('/')[0] : null);
+  if (host === 'youtu.be' || /^youtube(-nocookie)?\.com$/.test(host)) {
+    const id =
+      host === 'youtu.be'
+        ? url.pathname.slice(1).split('/')[0]
+        : (url.searchParams.get('v') ?? part('/embed/') ?? part('/shorts/') ?? part('/live/'));
+    return id && YOUTUBE_ID.test(id) ? { site: 'youtube', id } : null;
+  }
+  if (host === 'vimeo.com' || host === 'player.vimeo.com') {
+    const parts = url.pathname.split('/').filter(Boolean);
+    // The id is first, the third in a channel, and after "video" or "videos" everywhere else.
+    const at = NUMBER.test(parts[0] ?? '')
+      ? 0
+      : parts[0] === 'channels'
+        ? 2
+        : parts.findIndex((_, i) => /^videos?$/.test(parts[i - 1] ?? ''));
+    const id = parts[at];
+    if (!id || !NUMBER.test(id)) return null;
+    const hash = [parts[at + 1], url.searchParams.get('h')].find((h) => h && HASH.test(h)) ?? null;
+    return { site: 'vimeo', id, hash };
+  }
+  return null;
+}
+
+/** The address that plays the video, with the settings in the address of the iframe it came from. */
+export function player(video, frame) {
+  let params;
+  try {
+    params = new URL(frame).searchParams;
+  } catch {
+    params = new URLSearchParams();
+  }
+  params.delete('feature');
+  params.set('autoplay', '1');
+  if (video.site === 'youtube') return `https://www.youtube-nocookie.com/embed/${video.id}?${params}`;
+  if (video.hash) params.set('h', video.hash);
+  params.set('dnt', '1');
+  return `https://player.vimeo.com/video/${video.id}?${params}`;
+}
+
+/** The video's own page on YouTube or Vimeo. */
+export const videoPage = (video) =>
+  video.site === 'youtube'
+    ? `https://www.youtube.com/watch?v=${video.id}`
+    : `https://vimeo.com/${video.id}${video.hash ? `/${video.hash}` : ''}`;
+
+/** The name of the video's still on the site: /images/_video/<name>-480.webp and -960.webp. */
+export const stillName = (video) => `${video.site}-${video.id}`;
+
+/** Where Vimeo says what the video's still is (its thumbnail_url), at about `width` pixels wide. */
+export const vimeoInfo = (video, width) => `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(videoPage(video))}&width=${width}`;

package/lib/video.d.mts

@@ -0,0 +1,20 @@
+/** What stands in for a video (videoOf) on the site: its page, the address that plays it (`frame`: the address of the
+ * iframe it replaces, if any), its title, and its still from the site, when it could be fetched. The video block's
+ * view too (src/standard/video/load.ts). */
+export function facadeOf(video: any, title: any, frame: any): {
+    href: string;
+    player: string;
+    title: any;
+    still: {
+        src: string;
+        srcset: string;
+    } | null;
+};
+/** Rehype plugin: iframes with a video from YouTube or Vimeo become links that load the video on a
+ * click. Vimeo's code puts its iframe in a box of its own, which goes with it, and loads Vimeo's
+ * script, which is left out. `play`: the theme's play button (its icons/play-fill.svg, else the standard theme's: themeIcon in
+ * packages/editor/site/theme.mjs), else Phosphor's.
+ * @param {{ play?: string | null }} [options] */
+export function rehypeVideo({ play: file }?: {
+    play?: string | null;
+}): (tree: any) => void;

package/lib/video.mjs

@@ -0,0 +1,91 @@
+// Videos from YouTube and Vimeo in the text, without contacting them before the visitor asks for the
+// video (nothing from Google is loaded before consent, and nothing from Vimeo either).
+// Each <iframe> with a video becomes a link to the video with its title; a click puts the video in its
+// place, from youtube-nocookie.com or from Vimeo's player with dnt=1 (no tracking) (Base.astro). Without
+// JavaScript the link opens the video on YouTube or Vimeo. The iframe is an element here (rehype-raw runs
+// first, packages/editor/astro.mjs); one still in raw HTML (a Markdown pipeline without it) is handled too.
+// The video block (facadeOf, src/standard/video/) gives the same link. Behind it is a still
+// from the video, from the site itself (packages/editor/scripts/video-thumbnails.mjs), when it could be fetched.
+import fs from 'node:fs';
+import path from 'node:path';
+import { svgHtml } from './svg.mjs';
+import { player, stillName, videoOf, videoPage } from './video-id.mjs';
+
+const IFRAME = /<iframe\b[^>]*\bsrc="([^"]+)"[^>]*>\s*<\/iframe>/gi;
+
+// The play button, as the video block draws it (<Svg name="play" weight="fill" size={48}>): the theme's icon
+// (rehypeVideo's `play`), else Phosphor's.
+const playButton = (file) =>
+  svgHtml(file ?? fs.readFileSync(path.resolve('node_modules/@phosphor-icons/core/assets/fill/play-fill.svg'), 'utf8'), 48);
+
+const escapeHtml = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+const unescapeHtml = (s) => s.replace(/&(amp|lt|gt|quot|#39);/g, (_, e) => ({ amp: '&', lt: '<', gt: '>', quot: '"', '#39': "'" })[e]);
+
+/** The link that stands in for a video (videoOf), with its title; `frame`: the address of the iframe it
+ * replaces, if any. */
+function facade(video, title, frame, play) {
+  const { href, player, title: name, still } = facadeOf(video, title, frame);
+  const image = still
+    ? `<img class="video-facade-image" src="${still.src}" srcset="${still.srcset}" sizes="(min-width: 768px) 720px, 100vw" alt="" loading="lazy" decoding="async">`
+    : '';
+  return (
+    `<a class="video-facade${image ? ' video-facade-still' : ''}" href="${escapeHtml(href)}" data-video="${escapeHtml(player)}" data-title="${escapeHtml(name)}">` +
+    image +
+    play +
+    `<span class="video-facade-title">${escapeHtml(name)}</span></a>`
+  );
+}
+
+/** What stands in for a video (videoOf) on the site: its page, the address that plays it (`frame`: the address of the
+ * iframe it replaces, if any), its title, and its still from the site, when it could be fetched. The video block's
+ * view too (src/standard/video/load.ts). */
+export function facadeOf(video, title, frame) {
+  const still = `/images/_video/${stillName(video)}`;
+  return {
+    href: videoPage(video),
+    player: player(video, frame),
+    title: title || 'Video',
+    still: fs.existsSync(path.resolve(`public${still}-960.webp`))
+      ? { src: `${still}-960.webp`, srcset: `${still}-480.webp 480w, ${still}-960.webp 960w` }
+      : null,
+  };
+}
+
+/** The link for the video in an iframe's address, or null for one that is not a video. */
+function frameFacade(src, title, play) {
+  const video = videoOf(src);
+  return video && facade(video, title, src, play);
+}
+
+const isFrame = (node) => node.type === 'element' && node.tagName === 'iframe' && typeof node.properties?.src === 'string';
+
+/** Rehype plugin: iframes with a video from YouTube or Vimeo become links that load the video on a
+ * click. Vimeo's code puts its iframe in a box of its own, which goes with it, and loads Vimeo's
+ * script, which is left out. `play`: the theme's play button (its icons/play-fill.svg, else the standard theme's: themeIcon in
+ * packages/editor/site/theme.mjs), else Phosphor's.
+ * @param {{ play?: string | null }} [options] */
+export function rehypeVideo({ play: file } = {}) {
+  const play = playButton(file);
+  return (tree) => {
+    const visit = (node) => {
+      node.children?.forEach((child, i) => {
+        const inner =
+          child.type === 'element' && child.tagName === 'div' ? child.children.filter((c) => c.type !== 'text' || c.value.trim()) : [];
+        const frame = isFrame(child) ? child : inner.length === 1 && isFrame(inner[0]) ? inner[0] : null;
+        if (child.type === 'element' && child.tagName === 'script' && /player\.vimeo\.com\//.test(String(child.properties?.src))) {
+          node.children[i] = { type: 'raw', value: '' };
+        } else if (child.type === 'raw') {
+          child.value = child.value.replace(IFRAME, (tag, src) => {
+            const title = tag.match(/\btitle="([^"]*)"/)?.[1];
+            return frameFacade(unescapeHtml(src), title && unescapeHtml(title), play) ?? tag;
+          });
+        } else if (frame) {
+          const html = frameFacade(frame.properties.src, frame.properties.title, play);
+          if (html) node.children[i] = { type: 'raw', value: html };
+          else visit(child);
+        } else visit(child);
+      });
+    };
+    visit(tree);
+  };
+}

package/package.json

@@ -1,6 +1,131 @@
-{
-  "name": "@morphemecms/cms",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@morphemecms/cms",
+  "version": "0.1.0",
+  "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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/larsadolfsen/morpheme-cms.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "astro.mjs",
+    "astro.d.mts",
+    "client.d.ts",
+    "bin",
+    "defaults",
+    "demo",
+    "icons",
+    "lib",
+    "pages",
+    "scripts",
+    "!scripts/starter.mjs",
+    "!scripts/check-starter.mjs",
+    "site",
+    "src",
+    "starter",
+    "theme",
+    "worker"
+  ],
+  "type": "module",
+  "bin": {
+    "morpheme": "bin/morpheme.mjs"
+  },
+  "scripts": {
+    "icons": "node scripts/icon-packs.mjs",
+    "prepack": "node scripts/types.mjs write",
+    "postpack": "node scripts/types.mjs clean"
+  },
+  "peerDependencies": {
+    "@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",
+    "@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",
+    "playwright": "^1.64.1",
+    "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"
+  },
+  "peerDependenciesMeta": {
+    "esbuild": {
+      "optional": true
+    },
+    "jsdom": {
+      "optional": true
+    },
+    "playwright": {
+      "optional": true
+    },
+    "sharp": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "wrangler": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@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",
+    "@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",
+    "playwright": "^1.64.1",
+    "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",
+    "typescript": "^6.0.2",
+    "unified": "^11.0.5",
+    "vite": "^8.3.4",
+    "wrangler": "^4.152.0",
+    "yaml": "^2.9.1"
+  }
+}

package/pages/404.astro

@@ -0,0 +1,10 @@
+---
+// The page for an address that does not exist: the page chosen as the 404 page (packages/editor/site/standardPages.ts), drawn by the
+// theme (src/themes/<theme>/templates/NotFound.astro).
+import NotFound from '@theme/templates/NotFound.astro';
+import { notFoundPage } from '@morphemecms/cms/site/standardPages';
+
+const page = await notFoundPage();
+---
+
+<NotFound {...page} />