@sempods/apps 0.8.0 → 0.9.0-dev.1

package/instructions/visual-check.md

@@ -4,6 +4,20 @@ The owner judges an app by what they see. Before reporting a screen as done,
 look at it the way they will and fix what fails; the [app workflow](app-workflow.md)
 says when.
 
+## Check the theme's contrast
+
+Run `pnpm run check:theme <id>` first. It builds the app, loads its
+stylesheet in a browser and checks every role pair of the UI kit's theme
+contract in light and dark mode, in every action variant, the ones the page
+does not use too. Each failure names the variant, state, roles, colours and
+ratio, and the roles to adjust: change those in the app's theme, keeping the
+pairs listed alongside readable, and run it again until it passes. A scheme
+the theme excludes is reported as not sampled, not as passing. The first run
+on a machine may ask for `pnpm run check:theme --install-browser`.
+
+The command checks the palette roles only. Classes on single controls,
+images, opacity and interaction states need the screenshots below.
+
 ## Look at the real states
 
 Open the app in a browser you can control, signed in to the test context, and
@@ -22,7 +36,7 @@ screen is visible.
 
 - Spacing and alignment are consistent; nothing touches the screen edge.
 - The hierarchy is clear: one primary action per screen or dialog, other
-  actions read as text.
+  actions secondary or quieter.
 - Every control has a 44px touch target; checkboxes are wrapped in their
   label.
 - Nothing scrolls sideways at 375px.
@@ -31,9 +45,13 @@ screen is visible.
 - The app's icon and name are present in the header and on the sign-in
   screen.
 - Text and controls keep their contrast in both modes; colours come from the
-  app's theme.
+  app's theme roles, and `check:theme` passes.
 - A bar fixed at the bottom is not covered and leaves room for the content
   above it.
+- An item or action screen (`ScreenDialog`) fills the phone's screen and
+  closes with Back, Escape and Close; with an unsaved edit, each asks first.
+- Menus, dialogs and the date chooser work by keyboard: arrows move, Escape
+  closes one level, and focus returns to what opened them.
 
 ## Ask the owner
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sempods/apps",
-  "version": "0.8.0",
+  "version": "0.9.0-dev.1",
   "description": "Tooling for a sempods apps repository: create, check, update and publish several sempods apps with one shared SDK version.",
   "keywords": [
     "sempods",
@@ -45,6 +45,7 @@
     "LICENSE"
   ],
   "dependencies": {
+    "playwright": "1.64.1",
     "semver": "7.8.5",
     "typescript": "6.0.3"
   },
@@ -55,8 +56,9 @@
     "unified-engine": "11.2.2"
   },
   "peerDependencies": {
-    "@sempods/app-sdk": "^0.6.0",
-    "@sempods/client-sdk": "^0.6.0"
+    "@sempods/app-sdk": "^0.7.0-dev.2",
+    "@sempods/app-ui": "^0.7.0-dev.2",
+    "@sempods/client-sdk": "^0.7.0-dev.2"
   },
   "scripts": {}
 }

package/scripts/build-site.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // Builds every app with a published profile into its path of one static site
 // folder, site-dist/, with a page for each route, and writes the overview and
-// the host's routing files.
+// the host's routing files: 404.html, and _redirects for resource patterns.
 // apps/<id>/dist keeps the app's local build.
 // Usage: pnpm run build-site [--profile production|preview]
 //        (or SEMPODS_SITE_PROFILE=<profile> in the host's environment)
@@ -13,12 +13,12 @@ import {
   rmSync,
   writeFileSync,
 } from 'node:fs';
-import { join, relative, resolve } from 'node:path';
+import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parseArgs } from 'node:util';
 import { AUTO, readApps, SITE_PROFILES, siteIdentity } from './lib/apps.mjs';
 import { PROFILE_MODES, staleGenerated } from './lib/generate.mjs';
-import { ifPresent, writeJson } from './lib/json.mjs';
+import { ifPresent, readJson, writeJson } from './lib/json.mjs';
 import { renderNotFound, renderOverview } from './lib/overview.mjs';
 import { repositoryRoot } from './lib/paths.mjs';
 import { pnpm, scriptArgs } from './lib/pnpm.mjs';
@@ -51,6 +51,10 @@ const RESERVED = [
   'callback.html',
 ];
 
+const REDIRECTS_HEADER = `# Generated by pnpm run build-site from the resource patterns in apps.json.
+# Each line serves an app's page for its resource addresses.
+`;
+
 /** Removes a file or directory and reports whether there was one. */
 const removeIfPresent = (path) =>
   ifPresent(() => rmSync(path, { recursive: true }) ?? true) ?? false;
@@ -59,9 +63,13 @@ const removeIfPresent = (path) =>
 const copyIfPresent = (from, to) =>
   ifPresent(() => copyFileSync(from, to) ?? true) ?? false;
 
-/** The SDK's Apache-2.0 notices, which travel with the published code. */
+/**
+ * The Apache-2.0 notices of the SDK packages the app declares, which travel
+ * with the published code.
+ */
 function copyLicences(roots, appOut, appId) {
-  for (const pkg of SDK) {
+  const { dependencies = {} } = readJson(join(roots[0], 'package.json'));
+  for (const pkg of SDK.filter((name) => dependencies[name])) {
     const to = join(appOut, 'licenses', pkg.split('/')[1]);
     mkdirSync(to, { recursive: true });
     const from = roots
@@ -115,6 +123,7 @@ export function buildSite(root, { profile = 'production', build = appBuild } = {
 
   const entries = [];
   const warnings = [];
+  const rewrites = [];
   for (const app of apps) {
     const appDir = join(root, 'apps', app.id);
     const appOut = join(out, app.id);
@@ -147,14 +156,22 @@ export function buildSite(root, { profile = 'production', build = appBuild } = {
     const callback = new URL(redirectUri).pathname;
     writeFileSync(join(out, `${callback.slice(1)}.html`), html);
     // Each route answers the same way from a copy of the page, so the host
-    // needs no rewrite and unknown paths still show the not-found page.
-    for (const route of app.routes ?? []) {
+    // needs no rewrite for it and unknown paths still show the not-found page.
+    // A route with several segments gets its copy in a subfolder.
+    const routes = app.routes ?? [];
+    for (const route of routes)
       if (['', '.html'].some((ext) => existsSync(join(appOut, route + ext))))
         throw new Error(
           `apps/${app.id}: the route ${route} collides with ${route} in the app's build output; rename one of them.`,
         );
+    for (const route of routes) {
+      mkdirSync(dirname(join(appOut, route)), { recursive: true });
       writeFileSync(join(appOut, `${route}.html`), html);
     }
+    // Resource patterns have no file per address: the host rewrites exactly
+    // these addresses to the page, after the published files.
+    for (const pattern of app.resources ?? [])
+      rewrites.push(`${app.path}${pattern} ${app.path}index.html 200`);
 
     entries.push(overviewEntry(app, appOut));
   }
@@ -163,7 +180,14 @@ export function buildSite(root, { profile = 'production', build = appBuild } = {
   // Hosts serve it for unknown paths; without it, Cloudflare Pages would serve
   // the overview for every unknown path.
   writeFileSync(join(out, '404.html'), renderNotFound(entries));
-  return { apps, site, warnings };
+  // Netlify and Cloudflare Pages read it at the site root; a placeholder
+  // matches one segment, and a published file at the address wins.
+  if (rewrites.length > 0)
+    writeFileSync(
+      join(out, '_redirects'),
+      `${REDIRECTS_HEADER}${rewrites.join('\n')}\n`,
+    );
+  return { apps, site, warnings, rewrites };
 }
 
 function main() {
@@ -174,10 +198,14 @@ function main() {
   const root = repositoryRoot();
   const profile =
     values.profile ?? process.env.SEMPODS_SITE_PROFILE ?? 'production';
-  const { apps, site, warnings } = buildSite(root, { profile });
+  const { apps, site, warnings, rewrites } = buildSite(root, { profile });
   for (const warning of warnings) console.warn(`build-site: ${warning}`);
   console.log(`\nBuilt ${SITE_DIR}/ for ${site[profile]} (${profile}):`);
   for (const app of apps) console.log(`  ${site[profile]}${app.path}`);
+  if (rewrites.length > 0)
+    console.log(
+      `\n${SITE_DIR}/_redirects serves the resource addresses; the host must read it (Netlify, Cloudflare Pages).`,
+    );
 }
 
 if (

package/scripts/check-theme.mjs

@@ -0,0 +1,398 @@
+#!/usr/bin/env node
+// Checks the contrast of an app's theme in a browser: builds the app, loads
+// its stylesheet with the attributes of its <html> and runs the UI kit's role
+// check (@sempods/app-ui/theme-check) under a light and a dark colour
+// preference. Every action variant is sampled, the inactive ones too. A
+// failure names the variant, state, roles, colours and ratio; fix the roles it
+// names and run the command again. Screens still need a visual check.
+// Usage: pnpm run check:theme [<id>] [--json] [--install-browser]
+import { spawnSync } from 'node:child_process';
+import {
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+} from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join, relative, resolve, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseArgs } from 'node:util';
+import { readApps } from './lib/apps.mjs';
+import { isFile } from './lib/files.mjs';
+import { escapeHtml } from './lib/html.mjs';
+import { readJson } from './lib/json.mjs';
+import { repositoryRoot } from './lib/paths.mjs';
+import { pnpm, scriptArgs } from './lib/pnpm.mjs';
+import { UI_KIT } from './lib/sdk.mjs';
+
+export const SCHEMES = ['light', 'dark'];
+// The page's origin: requests to it are answered from local files, nothing
+// goes to the network.
+const ORIGIN = 'http://theme-check.invalid';
+
+/** The attributes of the page's <html> element, such as data-actions. */
+export function htmlAttributes(html) {
+  const tag = html.match(/<html\b([^>]*)>/i)?.[1] ?? '';
+  return [...tag.matchAll(/([^\s=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g)]
+    .map(([, name, a, b, c]) => [name.toLowerCase(), a ?? b ?? c ?? ''])
+    .filter(([name]) => name !== 'lang');
+}
+
+/** The stylesheets a built page links, as paths below the build folder. */
+export function linkedStylesheets(html, basePath) {
+  return [...html.matchAll(/<link\b[^>]*>/gi)]
+    .map(([tag]) => tag)
+    .filter((tag) => /\brel\s*=\s*["']?stylesheet\b/i.test(tag))
+    .map((tag) => tag.match(/\bhref\s*=\s*["']([^"']+)["']/i)?.[1])
+    .filter((href) => href?.startsWith(basePath))
+    .map((href) => href.slice(basePath.length));
+}
+
+/** The check page: the app's stylesheets, its <html> attributes, the check. */
+export function checkPage(attributes, stylesheets) {
+  const attrs = attributes
+    .map(([name, value]) => ` ${name}="${escapeHtml(value)}"`)
+    .join('');
+  const links = stylesheets
+    .map((file) => `<link rel="stylesheet" href="/app/${file}">`)
+    .join('');
+  return `<!doctype html><html${attrs}><head><meta charset="utf-8">${links}<script type="module">import * as check from '/theme-check/index.js'; window.themeCheck = check;</script></head><body></body></html>`;
+}
+
+/** The UI kit an app has installed, or undefined. */
+function installedKit(root, appDir) {
+  return [appDir, root]
+    .map((base) => join(base, 'node_modules', ...UI_KIT.split('/')))
+    .find((dir) => existsSync(join(dir, 'dist', 'theme-check', 'index.js')));
+}
+
+/** Builds the app into `outDir`, or throws. */
+function buildApp(appDir, outDir) {
+  // The output path is relative to the app, so no user directory name passes
+  // through the Windows shell (lib/pnpm.mjs).
+  const result = pnpm(
+    [
+      ...['exec', 'vite', 'build', '--outDir', relative(appDir, outDir)],
+      ...['--emptyOutDir', '--logLevel', 'error'],
+    ],
+    { cwd: appDir, stdio: ['ignore', 'pipe', 'pipe'], encoding: 'utf8' },
+  );
+  if (result.status !== 0)
+    throw new Error(
+      `the build failed:\n${`${result.stdout}${result.stderr}`.trim()}`,
+    );
+}
+
+const MISSING_BROWSER =
+  'the browser for the check is missing: run pnpm run check:theme --install-browser once, then again without it';
+
+/** Starts Chromium through the tooling's Playwright. */
+async function launch() {
+  const { chromium } = await import('playwright');
+  try {
+    return await chromium.launch();
+  } catch (error) {
+    if (/Executable doesn't exist|playwright install/i.test(error.message))
+      throw new Error(MISSING_BROWSER);
+    throw error;
+  }
+}
+
+/** Installs the Chromium of the tooling's Playwright into its user cache. */
+export function installBrowser() {
+  const cli = join(
+    dirname(createRequire(import.meta.url).resolve('playwright/package.json')),
+    'cli.js',
+  );
+  return (
+    spawnSync(process.execPath, [cli, 'install', 'chromium'], {
+      stdio: 'inherit',
+    }).status === 0
+  );
+}
+
+/** Serves `root` for requests below `prefix`, and nothing outside it. */
+function fileFrom(root, prefix, path) {
+  let name;
+  try {
+    name = decodeURIComponent(path.slice(prefix.length));
+  } catch {
+    return undefined;
+  }
+  // A null byte names no file; the file system would refuse it.
+  if (name.includes('\0')) return undefined;
+  const file = resolve(root, name);
+  return file.startsWith(root + sep) && isFile(file) ? file : undefined;
+}
+
+const TYPES = { '.css': 'text/css', '.js': 'text/javascript' };
+
+/**
+ * The reports of one built app under each colour preference: `{ scheme:
+ * report }`, with `error` for a scheme whose check threw.
+ */
+export async function inspectBuild(browser, { outDir, kitDir, basePath }) {
+  const html = readFileSync(join(outDir, 'index.html'), 'utf8');
+  const stylesheets = linkedStylesheets(html, basePath);
+  if (stylesheets.length === 0)
+    throw new Error('the built page links no stylesheet');
+  const page = await browser.newPage();
+  const checkDir = join(kitDir, 'dist', 'theme-check');
+  await page.route(`${ORIGIN}/**`, (route) => {
+    const { pathname } = new URL(route.request().url());
+    if (pathname === '/')
+      return route.fulfill({
+        contentType: 'text/html',
+        body: checkPage(htmlAttributes(html), stylesheets),
+      });
+    const file = pathname.startsWith('/app/')
+      ? fileFrom(outDir, '/app/', pathname)
+      : pathname.startsWith('/theme-check/')
+        ? fileFrom(checkDir, '/theme-check/', pathname)
+        : undefined;
+    if (!file) return route.fulfill({ status: 404, body: '' });
+    return route.fulfill({
+      contentType: TYPES[file.slice(file.lastIndexOf('.'))] ?? 'text/plain',
+      body: readFileSync(file),
+    });
+  });
+  // Fonts, images and anything else outside the page stay unloaded.
+  await page.route(
+    (url) => url.origin !== ORIGIN,
+    (route) => route.abort(),
+  );
+  try {
+    await page.goto(`${ORIGIN}/`);
+    await page.waitForFunction(() => 'themeCheck' in window);
+    const reports = {};
+    for (const scheme of SCHEMES) {
+      await page.emulateMedia({ colorScheme: scheme });
+      reports[scheme] = await page.evaluate((only) => {
+        try {
+          return window.themeCheck.checkTheme(only);
+        } catch (error) {
+          return { error: String(error?.message ?? error) };
+        }
+      }, scheme);
+    }
+    return reports;
+  } finally {
+    await page.close();
+  }
+}
+
+// The action variants the check samples: data-actions × data-secondary.
+const VARIANT_COUNT = 6;
+
+/**
+ * Failures of the same pair with the same colours, once each, with the
+ * variants they occur in; the page's own variant is marked.
+ */
+export function failureGroups(failures) {
+  const groups = new Map();
+  for (const f of failures) {
+    const key = [
+      f.state,
+      f.pair,
+      f.backdrop,
+      f.foreground.colour,
+      f.surface.colour,
+    ].join('|');
+    if (!groups.has(key)) groups.set(key, { failure: f, variants: [] });
+    groups
+      .get(key)
+      .variants.push(
+        `${f.variant.actions}/${f.variant.secondary}${f.active ? ' (the page)' : ''}`,
+      );
+  }
+  return [...groups.values()].map(({ failure, variants }) => ({
+    failure,
+    variants:
+      variants.length === VARIANT_COUNT
+        ? 'every variant'
+        : variants.join(', '),
+  }));
+}
+
+/** The variants a scheme skipped and why, for the end of its line. */
+function skippedNote(skips) {
+  if (skips.length === 0) return '';
+  const variants = skips.map((s) => `${s.variant.actions}/${s.variant.secondary}`);
+  const reasons = [...new Set(skips.map((s) => s.reason))];
+  return `; not sampled in ${[...new Set(variants)].join(', ')} (${reasons.join('; ')})`;
+}
+
+/**
+ * Lines for the console and whether everything passed. A scheme the theme
+ * excludes (a forced colour scheme) is reported as not sampled, not as
+ * passing or failing: the kit's report has no samples and so no pass for it.
+ * Each app needs at least one scheme with samples; variants a sampled scheme
+ * skipped are named on its line.
+ */
+export function summarize(results) {
+  const lines = [];
+  let ok = true;
+  for (const { id, error, reports } of results) {
+    if (error) {
+      ok = false;
+      lines.push(`✗ apps/${id}: ${error}`);
+      continue;
+    }
+    let sampled = false;
+    for (const scheme of SCHEMES) {
+      const report = reports[scheme];
+      const label = `apps/${id} ${scheme}`;
+      if (report.error) {
+        ok = false;
+        lines.push(`✗ ${label}: the check failed: ${report.error}`);
+        continue;
+      }
+      const failures = report.failures.filter((f) => f.scheme === scheme);
+      const skips = report.skipped.filter((skip) => skip.scheme === scheme);
+      // The kit passes a scheme only with samples and no failure; without
+      // either, nothing was measured.
+      if (!report.pass && failures.length === 0) {
+        lines.push(
+          `– ${label}: not sampled (${skips[0]?.reason ?? 'no sample was taken'})`,
+        );
+        continue;
+      }
+      sampled = true;
+      if (report.pass)
+        lines.push(
+          `✓ ${label}: every role pair passes in every sampled variant (the page uses ${report.active.actions}/${report.active.secondary})${skippedNote(skips)}`,
+        );
+      else {
+        ok = false;
+        const groups = failureGroups(failures);
+        lines.push(
+          `✗ ${label}: ${groups.length} pair(s) below the minimum${skippedNote(skips)}`,
+        );
+        for (const { failure: f, variants } of groups)
+          lines.push(
+            `    ${f.pair} on ${f.backdrop} (${f.state}): ${f.foreground.colour} on ${f.surface.colour}, ${f.ratio.toFixed(2)}:1, needs ${f.required}:1, in ${variants}. Adjust ${f.adjust.join(', ')}.`,
+          );
+      }
+    }
+    if (!sampled && SCHEMES.every((scheme) => !reports[scheme].error)) {
+      ok = false;
+      lines.push(`✗ apps/${id}: no colour scheme was sampled, so nothing was checked`);
+    }
+  }
+  return { ok, lines };
+}
+
+/** Checks the given apps; the build and the inspection are replaceable for tests. */
+export async function checkThemes(
+  root,
+  ids,
+  { build = buildApp, inspect, browser: start = launch } = {},
+) {
+  const { apps } = readApps(root);
+  const unknown = ids.filter((id) => !apps.some((app) => app.id === id));
+  if (unknown.length > 0)
+    throw new Error(`${unknown.join(', ')} is not listed in apps.json`);
+  const selected = ids.length
+    ? apps.filter((app) => ids.includes(app.id))
+    : apps;
+  const results = [];
+  const skipped = [];
+  let browser;
+  try {
+    for (const app of selected) {
+      const appDir = join(root, 'apps', app.id);
+      const { dependencies = {} } = readJson(join(appDir, 'package.json'));
+      if (!dependencies[UI_KIT]) {
+        skipped.push(
+          `apps/${app.id} does not use ${UI_KIT}; its theme is not checked`,
+        );
+        if (ids.length) results.push({ id: app.id, error: skipped.at(-1) });
+        continue;
+      }
+      const kitDir = installedKit(root, appDir);
+      if (!kitDir) {
+        results.push({
+          id: app.id,
+          error: `${UI_KIT} with its theme check is not installed; run pnpm install`,
+        });
+        continue;
+      }
+      // Inside the app's node_modules, where builds leave nothing to commit.
+      const cache = join(appDir, 'node_modules', '.cache');
+      mkdirSync(cache, { recursive: true });
+      const outDir = mkdtempSync(join(cache, 'sempods-theme-'));
+      try {
+        build(appDir, outDir);
+        const target = { outDir, kitDir, basePath: app.path };
+        const reports = inspect
+          ? await inspect(target)
+          : await inspectBuild((browser ??= await start()), target);
+        results.push({ id: app.id, reports });
+      } catch (error) {
+        if (error.message === MISSING_BROWSER) throw error;
+        results.push({ id: app.id, error: error.message });
+      } finally {
+        rmSync(outDir, { recursive: true, force: true });
+      }
+    }
+  } finally {
+    await browser?.close();
+  }
+  return { results, skipped };
+}
+
+async function main() {
+  const { values, positionals } = parseArgs({
+    args: scriptArgs(),
+    allowPositionals: true,
+    options: {
+      json: { type: 'boolean' },
+      'install-browser': { type: 'boolean' },
+    },
+  });
+  if (values['install-browser']) {
+    if (!installBrowser()) throw new Error('the browser could not be installed');
+    if (positionals.length === 0 && !values.json) return;
+  }
+  const root = repositoryRoot();
+  const { results, skipped } = await checkThemes(root, positionals);
+  const { ok, lines } = summarize(results);
+  if (values.json)
+    console.log(
+      JSON.stringify(
+        {
+          pass: ok,
+          apps: results.map(({ id, error, reports }) => ({
+            id,
+            ...(error ? { error } : {}),
+            ...(reports ? { schemes: reports } : {}),
+          })),
+          skipped,
+        },
+        null,
+        2,
+      ),
+    );
+  else {
+    for (const line of skipped) console.log(`– ${line}`);
+    for (const line of lines) console.log(line);
+    if (results.length === 0) console.log('No app uses the UI kit yet.');
+    console.log(
+      ok
+        ? '\ncheck:theme passed. Check the screens visually as well.'
+        : '\ncheck:theme failed: fix what is named above (a role, the colour scheme or the build), then run it again.',
+    );
+  }
+  if (!ok) process.exitCode = 1;
+}
+
+if (
+  process.argv[1] &&
+  resolve(process.argv[1]) === fileURLToPath(import.meta.url)
+)
+  main().catch((error) => {
+    console.error(`check:theme: ${error.message}`);
+    process.exitCode = 1;
+  });

package/scripts/check.mjs

@@ -26,7 +26,13 @@ import { migrationState } from './migrate.mjs';
 import { readJson, writeJson } from './lib/json.mjs';
 import { repositoryRoot, TOOLING } from './lib/paths.mjs';
 import { INSTALL, pnpm, scriptArgs } from './lib/pnpm.mjs';
-import { EXACT_VERSION, REFERENCE, SDK } from './lib/sdk.mjs';
+import {
+  appSdk,
+  EXACT_VERSION,
+  REFERENCE,
+  SDK,
+  UI_KIT,
+} from './lib/sdk.mjs';
 
 const SOURCE_EXT = /\.(ts|tsx|mts|cts|js|jsx|mjs|cjs)$/;
 const BUILTIN = new Set(builtinModules);
@@ -106,10 +112,14 @@ export function staticProblems(root, { tooling = TOOLING } = {}) {
       );
     versions.set(`${where} ${pkg}`, version);
   };
-  // The root installs the SDK too, so its shipped reference is there before any
-  // app; new-app gives a new app the root's version.
+  // The root installs the SDK and the UI kit too, so their shipped references
+  // are there before any app; new-app gives a new app the root's version.
   for (const pkg of SDK)
-    expect('root', pkg, rootManifest.devDependencies?.[pkg]);
+    if (pkg === UI_KIT && rootManifest.devDependencies?.[pkg] === undefined)
+      problems.push(
+        `root: package.json declares no ${pkg}; run pnpm run sdk-update <version>, which adds it at the SDK's version`,
+      );
+    else expect('root', pkg, rootManifest.devDependencies?.[pkg]);
 
   for (const app of manifest.apps) {
     const dir = join(appsDir, app.id);
@@ -123,7 +133,8 @@ export function staticProblems(root, { tooling = TOOLING } = {}) {
       );
     problems.push(...pageProblems(dir, app.id));
     const pkg = readJson(join(dir, 'package.json'));
-    for (const sdk of SDK)
+    // The UI kit is optional: an app built before it keeps its own kit.
+    for (const sdk of appSdk(pkg.dependencies))
       expect(`apps/${app.id}`, sdk, pkg.dependencies?.[sdk]);
     const declared = new Set([
       ...Object.keys(pkg.dependencies ?? {}),

package/scripts/icon.mjs

@@ -21,7 +21,7 @@ export function drawIcon(root, id) {
   const theme = appTheme(dir);
   if (!theme || !existsSync(join(dir, 'src', 'themes', `${theme}.css`)))
     throw new Error(
-      `apps/${id}/src/main.tsx imports no theme from src/themes/; import one as the skeleton does, then run this again`,
+      `apps/${id}/src/index.css imports no theme from src/themes/; import one as the skeleton does, then run this again`,
     );
   return writeAppIcons(dir, app.title, iconColours(themeCss(dir, theme))).map(
     (file) => `apps/${id}/${file}`,