@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/lib/video-id.mjs

@@ -1,72 +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}`;
+// 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.mjs

@@ -1,91 +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);
-  };
-}
+// 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,131 +1,136 @@
-{
-  "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"
-  }
-}
+{
+  "name": "@morphemecms/cms",
+  "version": "0.2.0-next-20261104150211",
+  "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",
+    "CHANGELOG.md",
+    "README.md",
+    "astro.mjs",
+    "astro.d.mts",
+    "client.d.ts",
+    "bin",
+    "defaults",
+    "demo",
+    "icons",
+    "lib",
+    "pages",
+    "scripts",
+    "!scripts/starter.mjs",
+    "!scripts/check-starter.mjs",
+    "!scripts/demo-build.mjs",
+    "site",
+    "src",
+    "starter",
+    "theme",
+    "worker"
+  ],
+  "type": "module",
+  "bin": {
+    "morpheme": "bin/morpheme.mjs"
+  },
+  "scripts": {
+    "build": "node scripts/demo-build.mjs",
+    "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",
+    "@changesets/changelog-git": "^1.0.0",
+    "@changesets/cli": "^3.0.3",
+    "@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

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