@morphemecms/cms 0.5.0-next-20261104200208 → 0.5.0

package/CHANGELOG.md

@@ -1,11 +1,18 @@
 # @morphemecms/cms
 
-## 0.5.0-next-20261104200208
+## 0.5.0
 
 ### Minor Changes
 
 - 322a404: Connect a site to the Morpheme store from the editor's Appstore. A key set by hand in MORPHEME_STORE_KEY still works.
 
+### Patch Changes
+
+- eb1f36f: A site's build reads Phosphor's icons one at a time, so it passes on Cloudflare's build image, which allows 1024 open files.
+- 6844676: The editor's start screen shows the installed CMS version before the update time, e.g. "Morpheme 0.5.0 · Updated 19.26". A pre-release shows short ("0.5.0-next"); a click shows the full version.
+- 2fa2bb3: New sites install a fixed postcss-selector-parser (6.1.5) under @tailwindcss/typography, which closes CVE-2026-104844.
+- f343523: The package has the types of the theme's `editor/looks.mjs`, so a site's type check (`tsc`) passes again.
+
 ## 0.4.0
 
 ### Minor Changes

package/lib/licenses.mjs

@@ -428,7 +428,7 @@ const HELPERS = [
   [/^\0vite\//, 'vite'],
   [/^\0rolldown\//, 'rolldown'],
 ];
-const OWN_VIRTUAL = [/^\0virtual:app-folders$/, /^\0site-theme-icons?(:|$)/];
+const OWN_VIRTUAL = [/^\0virtual:(app-folders|all-icons)$/, /^\0site-theme-icons?(:|$)/];
 
 /** An app or a theme as licensesIntegration takes it: its kind and id, its name, version and who made it, its manifest
  * (its defineApp or its theme.json, with `license` and `thirdParty`), its folder, and whether the site is built with it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.5.0-next-20261104200208",
+  "version": "0.5.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",
@@ -138,5 +138,10 @@
     "vite": "^8.3.4",
     "wrangler": "^4.152.0",
     "yaml": "^2.9.1"
+  },
+  "overrides": {
+    "@tailwindcss/typography": {
+      "postcss-selector-parser": "^6.1.5"
+    }
   }
 }

package/scripts/types-include.test.mjs

@@ -0,0 +1,93 @@
+// Tests that every .mjs module imported by TypeScript or Astro files in the package is included in tsconfig.types.json.
+// This is required because TypeScript reads no types from JavaScript in node_modules, so a site's tsc fails without a .d.mts.
+
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath } from 'node:url';
+
+const PACKAGE = fileURLToPath(new URL('..', import.meta.url));
+
+const tsconfigRaw = fs.readFileSync(path.join(PACKAGE, 'tsconfig.types.json'), 'utf-8');
+const tsconfigJson = JSON.parse(
+  tsconfigRaw
+    .split('\n')
+    .filter((line) => !line.trimStart().startsWith('//'))
+    .join('\n'),
+);
+const include = tsconfigJson.include;
+
+function matches(filePath, pattern) {
+  if (pattern.includes('**')) {
+    const dir = pattern.replace('/**/*.mjs', '');
+    return filePath.startsWith(`${dir}/`) && filePath.endsWith('.mjs');
+  }
+  return filePath === pattern;
+}
+
+function sources(dir) {
+  const results = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (entry.name.startsWith('.') || entry.name === 'node_modules') {
+      continue;
+    }
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      results.push(...sources(fullPath));
+    } else if (entry.name.endsWith('.ts') || entry.name.endsWith('.tsx') || entry.name.endsWith('.astro')) {
+      if (!entry.name.endsWith('.d.ts')) {
+        results.push(path.relative(PACKAGE, fullPath).replace(/\\/g, '/'));
+      }
+    }
+  }
+  return results;
+}
+
+function mjsImports(text) {
+  const regex = /(?:from\s+|import\s*\()\s*(['"])([^'"]+\.mjs)\1/g;
+  const specs = [];
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    specs.push(match[2]);
+  }
+  return specs;
+}
+
+function resolve(file, spec) {
+  if (spec.startsWith('@theme/')) {
+    return `theme/${spec.slice('@theme/'.length)}`;
+  }
+  if (spec.startsWith('.')) {
+    const dir = path.dirname(file);
+    return path.relative(PACKAGE, path.join(dir, spec)).replace(/\\/g, '/');
+  }
+  return null;
+}
+
+test('each .mjs a .ts, .tsx or .astro file imports is in tsconfig.types.json include', () => {
+  const missing = [];
+  const files = sources(PACKAGE);
+  for (const file of files) {
+    const content = fs.readFileSync(path.join(PACKAGE, file), 'utf-8');
+    const imports = mjsImports(content);
+    for (const spec of imports) {
+      const resolvedPath = resolve(file, spec);
+      if (resolvedPath !== null) {
+        const isMatched = include.some((pattern) => matches(resolvedPath, pattern));
+        if (!isMatched) {
+          missing.push({ file, spec, path: resolvedPath });
+        }
+      }
+    }
+  }
+  assert.deepEqual(missing, []);
+});
+
+test('matches', () => {
+  assert.equal(matches('theme/editor/looks.mjs', 'theme/**/*.mjs'), true);
+  assert.equal(matches('theme/editor/looks.mjs', 'lib/**/*.mjs'), false);
+  assert.equal(matches('scripts/releases.mjs', 'scripts/releases.mjs'), true);
+  assert.equal(matches('scripts/other.mjs', 'scripts/releases.mjs'), false);
+});

package/site/theme.d.mts

@@ -30,6 +30,10 @@ export function motionProblems(): string[];
 /** What is wrong with the system's icon packs (packProblems; a theme's own are its themeProblems) and the choice of one:
  * src/data/icons.json naming one that is not there. */
 export function iconPackProblems(): string[];
+/** The module code of all Phosphor's icons in `folder` (its `regular/` folder), by the keys `import.meta.glob` gave, the
+ * theme's (`icons`, as themeIcons returns them) in place of Phosphor's own. The files are read one at a time: a glob
+ * opens them all at once, and the build image's limit of open files (1024) stops the build. */
+export function allIconsModule(folder: any, icons: any): string;
 /** What a theme is missing (the standard theme: of THEME_FILES and the look of every standard block, another: of
  * OWN_FILES), what is wrong in its theme.json (name, version, author, icon), a block of its own (a folder in its
  * blocks/ that is not the look of a standard block, or with a block's contract in it), a part nothing uses (in a
@@ -76,6 +80,8 @@ export const THEME_FILES: string[];
 export function installedThemes(): string[];
 /** What every theme has itself. */
 export const OWN_FILES: string[];
+/** The virtual module with all Phosphor's icons (regular) as text (src/allIcons.ts). */
+export const ALL_ICONS: "virtual:all-icons";
 export function aliases(): {
     '@data': string;
     '@saturn': string;

package/site/theme.mjs

@@ -4,9 +4,9 @@
 // theme or the look of a block, is the standard theme's, styled by the theme in use's CSS. The site and the editor
 // reach the theme as @theme (themePlugin: the theme in use's file, else the standard theme's), and the site's own
 // parts (src/site/) as @site (aliases): for packages/editor/astro.mjs and packages/editor/scripts/check-content.mjs. Stops with what is
-// wrong, when the theme named is not installed.
+// wrong, when the theme named is not installed. Also the virtual module with all Phosphor's icons (allIconsModule).
 import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
-import { relative } from 'node:path';
+import { join, relative } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { svgParts } from '@morphemecms/cms/lib/svg.mjs';
 import { declarationProblems, ownerId } from '@morphemecms/cms/lib/licenses.mjs';
@@ -268,13 +268,35 @@ function reactIcons(icons) {
   return lines.join('\n');
 }
 
-/** An icon's SVG file as Phosphor's are (in the text's colour, `fill="currentColor"`), for an import of Phosphor's. */
-const fileIcon = (svg) => {
+/** The text of an icon's SVG file as Phosphor's are (in the text's colour, `fill="currentColor"`), not JSON-encoded. */
+const themedSvg = (svg) => {
   const { viewBox, inner } = svgParts(svg);
   const box = viewBox ? ` viewBox="${viewBox}"` : '';
-  return `export default ${JSON.stringify(`<svg xmlns="http://www.w3.org/2000/svg"${box} fill="currentColor">${inner}</svg>`)};`;
+  return `<svg xmlns="http://www.w3.org/2000/svg"${box} fill="currentColor">${inner}</svg>`;
 };
 
+/** An icon's SVG file as Phosphor's are, for an import of Phosphor's. */
+const fileIcon = (svg) => `export default ${JSON.stringify(themedSvg(svg))};`;
+
+/** The virtual module with all Phosphor's icons (regular) as text (src/allIcons.ts). */
+export const ALL_ICONS = 'virtual:all-icons';
+
+/** The module code of all Phosphor's icons in `folder` (its `regular/` folder), by the keys `import.meta.glob` gave, the
+ * theme's (`icons`, as themeIcons returns them) in place of Phosphor's own. The files are read one at a time: a glob
+ * opens them all at once, and the build image's limit of open files (1024) stops the build. */
+export function allIconsModule(folder, icons) {
+  const all = {};
+  for (const file of readdirSync(folder)
+    .filter((f) => f.endsWith('.svg'))
+    .sort()) {
+    const name = file.slice(0, -'.svg'.length);
+    all[`/node_modules/@phosphor-icons/core/assets/regular/${file}`] = svgParts(icons[name])
+      ? themedSvg(icons[name])
+      : readFileSync(join(folder, file), 'utf8');
+  }
+  return `export const allIcons = ${JSON.stringify(all)};`;
+}
+
 /** What a theme is missing (the standard theme: of THEME_FILES and the look of every standard block, another: of
  * OWN_FILES), what is wrong in its theme.json (name, version, author, icon), a block of its own (a folder in its
  * blocks/ that is not the look of a standard block, or with a block's contract in it), a part nothing uses (in a
@@ -444,6 +466,7 @@ export function themePlugin() {
     resolveId(source, importer) {
       // The theme's icons import Phosphor's own.
       if (source === PHOSPHOR_REACT) return own && importer !== REACT_ICONS ? REACT_ICONS : null;
+      if (source === ALL_ICONS) return '\0' + ALL_ICONS;
       const icon = source.match(PHOSPHOR_FILE)?.[1];
       if (icon) return svgParts(icons[icon]) ? FILE_ICON + icon : null;
       if (source.startsWith('@site/')) return siteFile(source.slice('@site/'.length));
@@ -458,6 +481,8 @@ export function themePlugin() {
     },
     load(id) {
       if (id === REACT_ICONS) return reactIcons(icons);
+      if (id === '\0' + ALL_ICONS)
+        return allIconsModule(fileURLToPath(new URL('node_modules/@phosphor-icons/core/assets/regular/', root)), icons);
       if (id.startsWith(FILE_ICON)) return fileIcon(icons[id.slice(FILE_ICON.length)]);
       return null;
     },

package/site/theme.test.mjs

@@ -0,0 +1,54 @@
+// Tests of allIconsModule (site/theme.mjs): all Phosphor's icons as one module, read one file at a time.
+// Run with `node --test site/theme.test.mjs`.
+import { strict as assert } from 'node:assert';
+import { mkdtempSync, writeFileSync } from 'node:fs';
+import { registerHooks } from 'node:module';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test } from 'node:test';
+
+// theme.mjs imports this package by its name, which only works from an installed copy: point the name at this folder.
+const PACKAGE = '@morphemecms/cms/';
+const pkg = new URL('../', import.meta.url);
+registerHooks({
+  resolve: (specifier, context, next) =>
+    specifier.startsWith(PACKAGE) ? next(new URL(specifier.slice(PACKAGE.length), pkg).href, context) : next(specifier, context),
+});
+const { allIconsModule } = await import('./theme.mjs');
+
+const PREFIX = '/node_modules/@phosphor-icons/core/assets/regular/';
+const A = '<svg viewBox="0 0 1 1"><path d="A"/></svg>';
+const B = '<svg viewBox="0 0 2 2"><path d="B"/></svg>';
+
+const folder = mkdtempSync(join(tmpdir(), 'icons-'));
+writeFileSync(join(folder, 'a.svg'), A);
+writeFileSync(join(folder, 'b.svg'), B);
+writeFileSync(join(folder, 'c.txt'), 'not an icon');
+
+const parse = (code) => JSON.parse(code.slice('export const allIcons = '.length, -1));
+
+test('the keys are the files, as import.meta.glob gave them', () => {
+  assert.deepEqual(Object.keys(parse(allIconsModule(folder, {}))), [`${PREFIX}a.svg`, `${PREFIX}b.svg`]);
+});
+
+test("Phosphor's icons are the file text, unchanged", () => {
+  assert.deepEqual(parse(allIconsModule(folder, {})), { [`${PREFIX}a.svg`]: A, [`${PREFIX}b.svg`]: B });
+});
+
+test("a theme's icon is in Phosphor's place", () => {
+  const themed = '<svg viewBox="0 0 10 10"><path d="M0 0"/></svg>';
+  const all = parse(allIconsModule(folder, { a: themed }));
+  assert.equal(
+    all[`${PREFIX}a.svg`],
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="currentColor"><path d="M0 0"/></svg>',
+  );
+  assert.equal(all[`${PREFIX}b.svg`], B);
+});
+
+test('a file that is not an svg has no key', () => {
+  assert.ok(!Object.keys(parse(allIconsModule(folder, {}))).some((k) => k.endsWith('c.txt')));
+});
+
+test('the code is a module that exports allIcons', () => {
+  assert.ok(allIconsModule(folder, {}).startsWith('export const allIcons = '));
+});

package/src/CmsVersion.tsx

@@ -0,0 +1,14 @@
+// The CMS's version as plain text on the start screen's status line; a pre-release's short form swaps to the full version on a click.
+// Exposes CmsVersion. Depends on cmsVersionView.mjs (shortVersion), SwapText and package.json's version.
+import { version } from '../package.json';
+import { shortVersion } from './cmsVersionView.mjs';
+import { SwapText } from './SwapText';
+import { t } from './i18n';
+
+// A release shows its version as it is: plain text. A pre-release shows it short; clicking swaps it to the full version, with
+// the build stamp, in place. `title` shows the full version on mouse hover. No tooltip: the phone's status line clips overflow.
+export function CmsVersion() {
+  const short = shortVersion(version) as string;
+  if (short === version) return <>{t.library.cmsVersion(version)}</>;
+  return <SwapText text={t.library.cmsVersion(short)} swapped={t.library.cmsVersion(version)} title={version} />;
+}

package/src/Library.tsx

@@ -33,6 +33,7 @@ import { byText, entryData, type Collection, type Part, type PartScreen } from '
 import { config, countsOf, header, relationsOf, siteName } from '@site/editor';
 import { iconPack, iconPacks } from './iconPacks';
 import { theme, themes, type ThemeInfo } from './themes';
+import { StartStatus } from './StartStatus';
 import {
   appearance,
   backFrom,
@@ -155,14 +156,14 @@ function PartRow({ id, label, href, count }: { id: string } & ReturnType<typeof
   return <ListItem href={href} icon={icons[id]} headline={label} count={count} arrow />;
 }
 
-// The start screen, with when the site was last updated (built on Cloudflare, App.tsx) under the title;
+// The start screen, with the CMS version and when the site was last updated (StartStatus.tsx) under the title;
 // on a computer the groups two side by side.
 export function Start({ files, builtAt }: { files: RepoFile[]; builtAt: Date | null }) {
   return (
     <Screen
       title={siteName}
       wide
-      status={builtAt ? t.library.siteUpdated(when(builtAt, { short: true })) : undefined}
+      status={<StartStatus builtAt={builtAt} />}
       // The notifications, the settings and the account in the top bar, on a phone too (Screen.tsx).
       home
     >

package/src/StartStatus.tsx

@@ -0,0 +1,24 @@
+// The start screen's status line: from expanded up the CMS version, a separator and the update time; below it (a phone) only the
+// update time, which a tap swaps for the short version. Exposes StartStatus. Depends on CmsVersion, SwapText, when and i18n.
+import { CmsVersion } from './CmsVersion';
+import { SwapText } from './SwapText';
+import { shortVersion } from './cmsVersionView.mjs';
+import { version } from '../package.json';
+import { t } from './i18n';
+import { when } from './when';
+
+// Screen.tsx draws the status twice, but only one place shows at a width; both forms are here, switched with the M3 breakpoint
+// classes (`expanded:`), never a width of their own.
+export function StartStatus({ builtAt }: { builtAt: Date | null }) {
+  const cms = t.library.cmsVersion(shortVersion(version) as string);
+  const updated = builtAt ? t.library.siteUpdated(when(builtAt, { short: true })) : null;
+  return (
+    <>
+      <span className="expanded:inline hidden">
+        <CmsVersion />
+        {updated && `${t.library.statusSeparator}${updated}`}
+      </span>
+      <span className="expanded:hidden">{updated ? <SwapText text={updated} swapped={cms} /> : cms}</span>
+    </>
+  );
+}

package/src/SwapText.tsx

@@ -0,0 +1,22 @@
+// A focusable span that swaps its text for another on a click or Enter/Space, and back (no link or button look: it inherits the text).
+// Exposes SwapText. Depends on nothing.
+import { useState } from 'react';
+
+export function SwapText({ text, swapped, title }: { text: string; swapped: string; title?: string }) {
+  const [on, setOn] = useState(false);
+  return (
+    <span
+      tabIndex={0}
+      title={title}
+      onClick={() => setOn((was) => !was)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setOn((was) => !was);
+        }
+      }}
+    >
+      {on ? swapped : text}
+    </span>
+  );
+}

package/src/allIcons.ts

@@ -1,7 +1,4 @@
 // All Phosphor's icons (regular) as text, by their file, for AnyIcon (icon.tsx): loaded only when it draws one the site
-// does not (an app's in the app store). The theme's are in their place, as for Svg (themePlugin, packages/editor/site/theme.mjs).
-export const allIcons = import.meta.glob<string>('/node_modules/@phosphor-icons/core/assets/regular/*.svg', {
-  query: '?raw',
-  import: 'default',
-  eager: true,
-});
+// does not (an app's in the app store). The theme's are in their place. One virtual module that themePlugin makes
+// (allIconsModule, packages/editor/site/theme.mjs), so the build does not open 1500 files at once.
+export { allIcons } from 'virtual:all-icons';

package/src/cmsVersionView.d.mts

@@ -0,0 +1,7 @@
+/**
+ * Provides a short form of the CMS version for the editor's start screen.
+ * Exposes the `shortVersion` function.
+ * Depends on nothing.
+ */
+/** The CMS version as the start screen shows it: a pre-release without its build stamp, else the version as it is. */
+export function shortVersion(version: any): any;

package/src/cmsVersionView.mjs

@@ -0,0 +1,11 @@
+/**
+ * Provides a short form of the CMS version for the editor's start screen.
+ * Exposes the `shortVersion` function.
+ * Depends on nothing.
+ */
+
+/** The CMS version as the start screen shows it: a pre-release without its build stamp, else the version as it is. */
+export function shortVersion(version) {
+  const match = /^(\d+\.\d+\.\d+-[a-z]+)-\d+$/.exec(version);
+  return match ? match[1] : version;
+}

package/src/cmsVersionView.test.mjs

@@ -0,0 +1,32 @@
+/**
+ * Tests for the CMS version short form logic.
+ * Exposes test cases for `shortVersion`.
+ * Depends on `node:test`, `node:assert/strict`, and `./cmsVersionView.mjs`.
+ */
+import { test } from 'node:test';
+import * as assert from 'node:assert/strict';
+import { shortVersion } from './cmsVersionView.mjs';
+
+test('strips build stamp from pre-release versions', () => {
+  assert.equal(shortVersion('0.5.0-next-20261104200208'), '0.5.0-next');
+});
+
+test('strips build stamp from beta versions', () => {
+  assert.equal(shortVersion('1.2.3-beta-7'), '1.2.3-beta');
+});
+
+test('keeps stable versions unchanged', () => {
+  assert.equal(shortVersion('0.5.0'), '0.5.0');
+});
+
+test('keeps pre-release versions without build stamp unchanged', () => {
+  assert.equal(shortVersion('0.5.0-next'), '0.5.0-next');
+});
+
+test('keeps versions with non-numeric build metadata unchanged', () => {
+  assert.equal(shortVersion('0.5.0-rc.1'), '0.5.0-rc.1');
+});
+
+test('handles empty string', () => {
+  assert.equal(shortVersion(''), '');
+});

package/src/i18n/da-DK/library.ts

@@ -2,6 +2,8 @@ import type { Messages } from '../en-US';
 
 export const library: Messages['library'] = {
   siteUpdated: (when) => `Opdateret ${when}`,
+  cmsVersion: (version) => `Morpheme ${version}`,
+  statusSeparator: ' · ',
   githubAccount: (login) => `GitHub-konto: ${login}`,
   logOut: 'Log ud',
   notifications: 'Notifikationer',

package/src/i18n/en-US/library.ts

@@ -2,6 +2,10 @@
 // with choices (Sheet.tsx).
 export const library = {
   siteUpdated: (when: string) => `Updated ${when}`,
+  /** The CMS's name and version on the start screen (CmsVersion.tsx), before the update time. */
+  cmsVersion: (version: string) => `Morpheme ${version}`,
+  /** Between the CMS version and the update time in the start screen's status. */
+  statusSeparator: ' · ',
   githubAccount: (login: string) => `GitHub account: ${login}`,
   logOut: 'Log out',
   /** The bell in the top bar and its screen (#notifikationer, Notifications.tsx): the messages shown at the bottom. */

package/src/virtual.d.ts

@@ -3,3 +3,8 @@ declare module 'virtual:app-folders' {
   const folders: Record<string, { files: string[]; csp?: Partial<Record<string, string[]>> }>;
   export default folders;
 }
+
+// All Phosphor's icons (regular) as text, by their file (allIconsModule in site/theme.mjs).
+declare module 'virtual:all-icons' {
+  export const allIcons: Record<string, string>;
+}

package/starter/package.json

@@ -31,7 +31,7 @@
     "@fontsource-variable/roboto": "^5.3.0",
     "@material/material-color-utilities": "^0.3.0",
     "@milkdown/kit": "^7.22.3",
-    "@morphemecms/cms": "0.4.0",
+    "@morphemecms/cms": "0.5.0",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",
@@ -63,5 +63,10 @@
     "prettier-plugin-astro": "^1.1.2",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "typescript": "^6.0.2"
+  },
+  "overrides": {
+    "@tailwindcss/typography": {
+      "postcss-selector-parser": "^6.1.5"
+    }
   }
 }

package/theme/editor/looks.d.mts

@@ -0,0 +1,2 @@
+export const LOOKS: {};
+export const HEADINGS: {};