@sempods/apps 0.7.1 → 0.8.0

package/scripts/lib/icon.mjs

@@ -0,0 +1,192 @@
+// The default app icon: a monogram, the first letter of the app's title on a
+// rounded square in the theme's accent. new-app and icon write it as
+// public/favicon.svg and as the PNG icons of the web app manifest, all from
+// the same strokes, so no font or image tool is needed.
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { crc32, deflateSync } from 'node:zlib';
+
+const VIEW = 64;
+const RADIUS = 14;
+const STROKE = 5;
+// Letters are drawn in a box 28 units high from y = 18, centred horizontally.
+const TOP = 18;
+// The calm theme's accent and the text on it, in light and dark mode; only
+// the SVG can follow the page's mode.
+export const CALM = {
+  light: { background: '#1f2933', letter: '#ffffff' },
+  dark: { background: '#e5e7eb', letter: '#111315' },
+};
+
+/** Points along an elliptical arc; angles in degrees, 0 = right, 90 = down. */
+function arc(cx, cy, rx, ry, from, to) {
+  const steps = Math.max(2, Math.ceil(Math.abs(to - from) / 6));
+  return Array.from({ length: steps + 1 }, (_, i) => {
+    const angle = ((from + ((to - from) * i) / steps) * Math.PI) / 180;
+    return [cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)];
+  });
+}
+
+// One entry per letter: strokes as lists of points in the letter's box.
+const GLYPHS = {
+  A: [[[0, 28], [11, 0], [22, 28]], [[4.5, 18], [17.5, 18]]],
+  B: [
+    [[0, 28], [0, 0], [10, 0], ...arc(10, 6.5, 6.5, 6.5, -90, 90), [0, 13]],
+    [[0, 13], [11, 13], ...arc(11, 20.5, 7.5, 7.5, -90, 90), [0, 28]],
+  ],
+  C: [arc(12, 14, 12, 14, -40, -320)],
+  D: [[[0, 0], [0, 28], [7, 28], ...arc(7, 14, 12, 14, 90, -90), [0, 0]]],
+  E: [[[17, 0], [0, 0], [0, 28], [17, 28]], [[0, 14], [13, 14]]],
+  F: [[[17, 0], [0, 0], [0, 28]], [[0, 14], [13, 14]]],
+  G: [[...arc(12, 14, 12, 14, -40, -360), [14, 14]]],
+  H: [[[0, 0], [0, 28]], [[18, 0], [18, 28]], [[0, 14], [18, 14]]],
+  I: [[[0, 0], [0, 28]]],
+  J: [[[14, 0], [14, 20], ...arc(7, 20, 7, 8, 0, 180)]],
+  K: [[[0, 0], [0, 28]], [[20, 0], [3, 15], [20, 28]]],
+  L: [[[0, 0], [0, 28], [16, 28]]],
+  M: [[[0, 28], [0, 0], [11, 18], [22, 0], [22, 28]]],
+  N: [[[0, 28], [0, 0], [18, 28], [18, 0]]],
+  O: [arc(12, 14, 12, 14, 0, 360)],
+  P: [[[0, 28], [0, 0], [10, 0], ...arc(10, 7.5, 7.5, 7.5, -90, 90), [0, 15]]],
+  Q: [arc(12, 14, 12, 14, 0, 360), [[14, 20], [23, 28]]],
+  R: [
+    [[0, 28], [0, 0], [10, 0], ...arc(10, 7.5, 7.5, 7.5, -90, 90), [0, 15]],
+    [[9, 15], [18, 28]],
+  ],
+  S: [[...arc(9, 7, 8.5, 7, -20, -270), ...arc(9, 21, 9, 7, -90, 160)]],
+  T: [[[0, 0], [20, 0]], [[10, 0], [10, 28]]],
+  U: [[[0, 0], [0, 19], ...arc(9, 19, 9, 9, 180, 0), [18, 0]]],
+  V: [[[0, 0], [10, 28], [20, 0]]],
+  W: [[[0, 0], [6, 28], [13, 8], [20, 28], [26, 0]]],
+  X: [[[0, 0], [19, 28]], [[19, 0], [0, 28]]],
+  Y: [[[0, 0], [10, 13], [20, 0]], [[10, 13], [10, 28]]],
+  Z: [[[0, 0], [18, 0], [0, 28], [18, 28]]],
+};
+
+/** The monogram letter of a title: its first letter A–Z, accents removed. */
+export function monogramLetter(title) {
+  const first = String(title).trim().normalize('NFD').charAt(0).toUpperCase();
+  return Object.hasOwn(GLYPHS, first) ? first : undefined;
+}
+
+/** The letter's strokes in icon coordinates, centred; none for no letter. */
+function strokes(letter) {
+  const glyph = GLYPHS[letter] ?? [];
+  const xs = glyph.flat().map(([x]) => x);
+  const shift = VIEW / 2 - (Math.min(...xs) + Math.max(...xs)) / 2;
+  return glyph.map((stroke) =>
+    stroke.map(([x, y]) => [x + shift, y + TOP]),
+  );
+}
+
+const round = (n) => Math.round(n * 100) / 100;
+const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+
+/**
+ * The SVG icon. In dark mode it takes the theme's dark accent, so it keeps its
+ * contrast on a dark page.
+ */
+export function monogramSvg(letter, colours = CALM) {
+  const d = strokes(letter)
+    .map((stroke) =>
+      stroke
+        .map(([x, y], i) => `${i ? 'L' : 'M'}${round(x)} ${round(y)}`)
+        .join(''),
+    )
+    .join('');
+  const path = d
+    ? `<path d="${d}" fill="none" stroke-width="${STROKE}" stroke-linecap="round" stroke-linejoin="round"/>`
+    : '';
+  const style = ({ background, letter }) =>
+    `rect{fill:${background}}path{stroke:${letter}}`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${VIEW} ${VIEW}"><style>${style(colours.light)}@media (prefers-color-scheme:dark){${style(colours.dark)}}</style><rect width="${VIEW}" height="${VIEW}" rx="${RADIUS}"/>${path}</svg>\n`;
+}
+
+function segmentDistance([px, py], [ax, ay], [bx, by]) {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const length = dx * dx + dy * dy;
+  const t =
+    length === 0
+      ? 0
+      : Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / length));
+  return Math.hypot(px - ax - t * dx, py - ay - t * dy);
+}
+
+/** Signed distance to the rounded square; negative inside. */
+function squareDistance([x, y]) {
+  const qx = Math.abs(x - VIEW / 2) - (VIEW / 2 - RADIUS);
+  const qy = Math.abs(y - VIEW / 2) - (VIEW / 2 - RADIUS);
+  return (
+    Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) +
+    Math.min(Math.max(qx, qy), 0) -
+    RADIUS
+  );
+}
+
+function chunk(type, data) {
+  const head = Buffer.alloc(8);
+  head.writeUInt32BE(data.length, 0);
+  head.write(type, 4, 'latin1');
+  const crc = Buffer.alloc(4);
+  crc.writeUInt32BE(crc32(Buffer.concat([head.subarray(4), data])) >>> 0, 0);
+  return Buffer.concat([head, data, crc]);
+}
+
+/** The PNG icon of `size` pixels, antialiased, with transparent corners. */
+export function monogramPng(letter, size, colours = CALM) {
+  const segments = strokes(letter).flatMap((stroke) =>
+    stroke.slice(1).map((point, i) => [stroke[i], point]),
+  );
+  const square = rgb(colours.light.background);
+  const mark = rgb(colours.light.letter);
+  const scale = size / VIEW;
+  const coverage = (distance) =>
+    Math.max(0, Math.min(1, 0.5 - distance * scale));
+  const rows = Buffer.alloc(size * (size * 4 + 1));
+  for (let y = 0; y < size; y++) {
+    const row = y * (size * 4 + 1);
+    rows[row] = 0; // filter: none
+    for (let x = 0; x < size; x++) {
+      const point = [(x + 0.5) / scale, (y + 0.5) / scale];
+      const alpha = coverage(squareDistance(point));
+      let near = Infinity;
+      for (const [a, b] of segments)
+        near = Math.min(near, segmentDistance(point, a, b));
+      const ink = coverage(near - STROKE / 2);
+      const offset = row + 1 + x * 4;
+      for (let c = 0; c < 3; c++)
+        rows[offset + c] = Math.round(square[c] * (1 - ink) + mark[c] * ink);
+      rows[offset + 3] = Math.round(alpha * 255);
+    }
+  }
+  const header = Buffer.alloc(13);
+  header.writeUInt32BE(size, 0);
+  header.writeUInt32BE(size, 4);
+  header.set([8, 6, 0, 0, 0], 8); // 8 bits, RGBA, no interlace
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    chunk('IHDR', header),
+    chunk('IDAT', deflateSync(rows)),
+    chunk('IEND', Buffer.alloc(0)),
+  ]);
+}
+
+/**
+ * Writes an app's icons: public/favicon.svg and the manifest's icon-192.png
+ * and icon-512.png. Returns them as paths inside the app.
+ */
+export function writeAppIcons(appDir, title, colours = CALM) {
+  const letter = monogramLetter(title);
+  const pub = join(appDir, 'public');
+  mkdirSync(pub, { recursive: true });
+  writeFileSync(join(pub, 'favicon.svg'), monogramSvg(letter, colours));
+  for (const size of [192, 512])
+    writeFileSync(
+      join(pub, `icon-${size}.png`),
+      monogramPng(letter, size, colours),
+    );
+  return ['favicon.svg', 'icon-192.png', 'icon-512.png'].map(
+    (file) => `public/${file}`,
+  );
+}

package/scripts/lib/overview.mjs

@@ -62,11 +62,12 @@ function card(entry) {
   const icon = entry.icon
     ? `<img src="${escape(entry.icon)}" alt="" width="64" height="64" />`
     : `<span class="letter" aria-hidden="true">${escape(letter)}</span>`;
+  const lang = entry.language ? ` lang="${escape(entry.language)}"` : '';
   const description = entry.description
     ? `\n          <span class="description">${escape(entry.description)}</span>`
     : '';
   return `        <li>
-          <a href="${escape(entry.href)}" lang="${escape(entry.language)}">
+          <a href="${escape(entry.href)}"${lang}>
           ${icon}
           <span class="name">${escape(entry.title)}</span>${description}
           </a>
@@ -81,8 +82,9 @@ export function siteLanguage(entries) {
 }
 
 /**
- * The overview: one card per `{ id, title, language, href, icon?,
- * description? }`, in the given order.
+ * The overview: one card per `{ id, title, language?, href, icon?,
+ * description? }`, in the given order; an app without a language follows the
+ * browser.
  */
 export function renderOverview(entries) {
   const language = siteLanguage(entries);

package/scripts/lib/page.mjs

@@ -0,0 +1,137 @@
+// The page title comes from apps.json: the generated Vite plugin pageTitle
+// adds it to the head, so an app's index.html has no <title> of its own and its
+// vite.config.ts uses the plugin. check reports what stands in the way; the
+// migration moves apps that still have the skeleton's files, and updates the
+// skeleton's head lines an app has kept.
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { escapeHtml } from './html.mjs';
+import { ifPresent } from './json.mjs';
+import { SKELETON } from './paths.mjs';
+
+export const PAGE = 'index.html';
+export const VITE_CONFIG = 'vite.config.ts';
+
+// The skeleton's vite.config.ts from 0.7.0 until the plugin, which the
+// migration replaces with the current one.
+const VITE_CONFIG_0_7 = `import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
+import { base, pwa, server } from './vite.sempods.generated.ts';
+
+// Base path, development port and PWA settings come from apps.json through the
+// generated file; add your own plugins and options here.
+export default defineConfig({
+  base,
+  server,
+  preview: server,
+  plugins: [react(), ...(pwa ? [VitePWA(pwa)] : [])],
+});
+`;
+
+// A <title> element in the head; an SVG <title> in the body is not one.
+const OWN_TITLE = /<title[\s>]/i;
+const head = (html) => html.split(/<body[\s>]/i)[0];
+const usesPlugin = (config) => /\bpageTitle\b/.test(config);
+
+/** Why the page would not get its title from apps.json; empty when it does. */
+export function pageProblems(appDir, id) {
+  const problems = [];
+  const html = ifPresent(() => readFileSync(join(appDir, PAGE), 'utf8'));
+  if (html !== undefined && OWN_TITLE.test(head(html)))
+    problems.push(
+      `apps/${id}/${PAGE} has its own <title>; remove it, the page title comes from apps.json`,
+    );
+  const config = ifPresent(() =>
+    readFileSync(join(appDir, VITE_CONFIG), 'utf8'),
+  );
+  if (config !== undefined && !usesPlugin(config))
+    problems.push(
+      `apps/${id}/${VITE_CONFIG} does not add pageTitle from vite.sempods.generated.ts to its plugins, so the page has no title`,
+    );
+  return problems;
+}
+
+/**
+ * Moves one app to the generated page title where that is unambiguous: a
+ * vite.config.ts unchanged from the skeleton gets the plugin, and a page
+ * whose only title is the app's title from apps.json loses it. Returns the
+ * changed files as apps/<id>/<file>; anything else is left to check.
+ */
+export function adoptPageTitle(appDir, app) {
+  const changed = [];
+  const configFile = join(appDir, VITE_CONFIG);
+  const config = ifPresent(() => readFileSync(configFile, 'utf8'));
+  if (config === VITE_CONFIG_0_7) {
+    writeFileSync(
+      configFile,
+      readFileSync(join(SKELETON, VITE_CONFIG), 'utf8'),
+    );
+    changed.push(VITE_CONFIG);
+  }
+  const pageFile = join(appDir, PAGE);
+  const html = ifPresent(() => readFileSync(pageFile, 'utf8'));
+  const line = new RegExp(
+    `^[ \\t]*<title>${escapeRegExp(escapeHtml(app.title))}</title>[ \\t]*\\r?\\n`,
+    'm',
+  );
+  if (
+    html !== undefined &&
+    (changed.length > 0 || usesPlugin(config ?? '')) &&
+    head(html).match(/<title[\s>]/gi)?.length === 1 &&
+    line.test(head(html))
+  ) {
+    writeFileSync(pageFile, html.replace(line, ''));
+    changed.push(PAGE);
+  }
+  return changed.map((file) => `apps/${app.id}/${file}`);
+}
+
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+// Head lines of the skeleton's index.html from 0.7.0 that the current
+// skeleton replaced: the viewport, which now reaches the screen's edges and
+// resizes with the on-screen keyboard, and the green theme colour, now one per
+// colour scheme. Each matches with either line ending.
+const HEAD_0_7 = {
+  viewport:
+    /^ {4}<meta name="viewport" content="width=device-width, initial-scale=1\.0" \/>(\r?\n)/gm,
+  themeColor: /^ {4}<meta name="theme-color" content="#176354" \/>(\r?\n)/gm,
+};
+
+/** The skeleton's current lines for each entry of HEAD_0_7. */
+function currentHead() {
+  const html = readFileSync(join(SKELETON, PAGE), 'utf8');
+  const lines = (pattern) => {
+    const match = html.match(pattern);
+    if (!match) throw new Error(`skeleton ${PAGE} lacks ${pattern}`);
+    return match[0];
+  };
+  return {
+    viewport: lines(
+      /^[ \t]*<!-- The layout resizes[^\n]*\n[ \t]*<meta\s+name="viewport"[^>]*\/>\n/m,
+    ),
+    themeColor: lines(/^(?:[ \t]*<meta name="theme-color"[^\n]*\n)+/m),
+  };
+}
+
+/**
+ * Replaces the skeleton's 0.7 head lines that one app's index.html still has
+ * unchanged with the current ones. Returns the changed file as
+ * apps/<id>/index.html; changed lines stay as the owner left them.
+ */
+export function adoptPageHead(appDir, app) {
+  const pageFile = join(appDir, PAGE);
+  const html = ifPresent(() => readFileSync(pageFile, 'utf8'));
+  if (html === undefined) return [];
+  const current = currentHead();
+  let next = html;
+  for (const [key, old] of Object.entries(HEAD_0_7))
+    if (head(next).match(old)?.length === 1)
+      next = next.replace(old, (_, eol) =>
+        current[key].replaceAll('\n', eol),
+      );
+  if (next === html) return [];
+  writeFileSync(pageFile, next);
+  return [`apps/${app.id}/${PAGE}`];
+}

package/scripts/lib/themes.mjs

@@ -0,0 +1,58 @@
+// The skeleton's themes: one CSS file per theme in src/themes/, which sets the
+// --sempods-* tokens in light and dark mode. An app imports one of them in its
+// src/main.tsx; its icon takes that theme's accent.
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { ifPresent } from './json.mjs';
+import { SKELETON } from './paths.mjs';
+
+export const DEFAULT_THEME = 'calm';
+const THEMES_DIR = join('src', 'themes');
+const IMPORT = /^import '\.\/themes\/([a-z-]+)\.css';$/m;
+
+/** The theme names the skeleton ships, the default first. */
+export function themeNames(skeleton = SKELETON) {
+  const names = readdirSync(join(skeleton, THEMES_DIR))
+    .filter((file) => file.endsWith('.css'))
+    .map((file) => file.slice(0, -'.css'.length))
+    .sort();
+  return [DEFAULT_THEME, ...names.filter((name) => name !== DEFAULT_THEME)];
+}
+
+/** A token's light and dark colour, from `--name: light-dark(#light, #dark)`. */
+export function tokenColours(css, token) {
+  const match = css.match(
+    new RegExp(
+      `--sempods-${token}:\\s*light-dark\\((#[0-9a-f]{6}),\\s*(#[0-9a-f]{6})\\)`,
+      'i',
+    ),
+  );
+  if (!match) throw new Error(`the theme sets no --sempods-${token}`);
+  return { light: match[1].toLowerCase(), dark: match[2].toLowerCase() };
+}
+
+/**
+ * The icon's colours for a theme file: the accent as the square and the text
+ * on the accent as the letter, in light and dark mode.
+ */
+export function iconColours(css) {
+  const accent = tokenColours(css, 'accent');
+  const on = tokenColours(css, 'on-accent');
+  return {
+    light: { background: accent.light, letter: on.light },
+    dark: { background: accent.dark, letter: on.dark },
+  };
+}
+
+/** The theme an app imports in src/main.tsx, if it imports one of these. */
+export function appTheme(appDir) {
+  const main = ifPresent(() =>
+    readFileSync(join(appDir, 'src', 'main.tsx'), 'utf8'),
+  );
+  return main?.match(IMPORT)?.[1];
+}
+
+/** The CSS of a theme file in an app or in the skeleton. */
+export function themeCss(dir, name) {
+  return readFileSync(join(dir, THEMES_DIR, `${name}.css`), 'utf8');
+}

package/scripts/migrate.mjs

@@ -32,6 +32,12 @@ import {
   replaceFile,
 } from './lib/files.mjs';
 import { GENERATED_FILES } from './lib/generate.mjs';
+import {
+  adoptPageHead,
+  adoptPageTitle,
+  PAGE,
+  VITE_CONFIG,
+} from './lib/page.mjs';
 import { formatJson, ifPresent, readJson, replaceJson } from './lib/json.mjs';
 import { mergeManifest, mergeText, withSection } from './lib/merge.mjs';
 import { repositoryRoot, TOOLING } from './lib/paths.mjs';
@@ -73,21 +79,23 @@ export function refuseUnfinishedSdkUpdate(root) {
     );
 }
 
+// A broken apps.json names no apps here; regenerating reports it later.
+function appsOf(root) {
+  try {
+    return readApps(root).apps;
+  } catch {
+    return [];
+  }
+}
+
 /**
  * Symbolic links where an update writes: the command's own files, the apps'
- * generated configuration and the given starter paths, each with its
- * ancestors, and anything inside the migration folder.
+ * generated configuration, page and Vite configuration and the given starter
+ * paths, each with its ancestors, and anything inside the migration folder.
  */
 export function linkedPaths(root, files = []) {
   const found = new Set();
-  // A broken apps.json names no apps here; regenerating reports it later.
-  const apps = (() => {
-    try {
-      return readApps(root).apps;
-    } catch {
-      return [];
-    }
-  })();
+  const apps = appsOf(root);
   for (const path of [
     'package.json',
     'pnpm-lock.yaml',
@@ -95,7 +103,9 @@ export function linkedPaths(root, files = []) {
     BASELINE_FILE,
     MIGRATION_DIR,
     ...apps.flatMap(({ id }) =>
-      GENERATED_FILES.map((file) => `apps/${id}/${file}`),
+      [...GENERATED_FILES, PAGE, VITE_CONFIG].map(
+        (file) => `apps/${id}/${file}`,
+      ),
     ),
     ...files,
   ]) {
@@ -372,6 +382,8 @@ export function migrate(
     if (baseline.revision === target.snapshot.revision) {
       // A leftover of a completed migration.
       rmSync(work, { recursive: true, force: true });
+      // The tooling may still have changed what it generates for apps.
+      updateApps(root, report);
       return { ...report, unchanged: true };
     }
   }
@@ -479,7 +491,7 @@ export function migrate(
     throw new Error(
       `${unresolved.map(({ file }) => file).join(', ')} still contain an unresolved suggestion; resolve them, then run pnpm run migrate --done again`,
     );
-  report.regenerated = regenerate(root);
+  updateApps(root, report);
   // A new starter can change the manifest or the workspace settings, so the
   // lockfile and node_modules follow before the migration counts as done.
   if (!install(root))
@@ -497,11 +509,29 @@ export function migrate(
   return report;
 }
 
+/**
+ * The apps' part of a migration: files a release moves where that is
+ * unambiguous, then the generated configuration.
+ */
+function updateApps(root, report) {
+  for (const app of appsOf(root)) {
+    const dir = join(root, 'apps', app.id);
+    if (!existsSync(dir)) continue;
+    const changed = [...adoptPageTitle(dir, app), ...adoptPageHead(dir, app)];
+    report.updated.push(...new Set(changed));
+  }
+  report.regenerated = regenerate(root);
+}
+
 export function formatMigration(report) {
-  if (report.unchanged)
-    return `The shared files already match ${PACKAGE} ${report.to}; nothing to migrate.`;
   const list = (title, items) =>
     items.length ? [`${title}:`, ...items.map((item) => `  ${item}`)] : [];
+  if (report.unchanged)
+    return [
+      `The shared files already match ${PACKAGE} ${report.to}; nothing to migrate.`,
+      ...list('Updated', report.updated),
+      ...list('Regenerated', report.regenerated),
+    ].join('\n');
   const lines = [
     `Migration from ${PACKAGE} ${report.from} to ${report.to}${report.unfinished ? ' is open' : ' is complete'}.`,
     ...list('Updated', report.updated),

package/scripts/new-app.mjs

@@ -1,10 +1,12 @@
 #!/usr/bin/env node
 // Creates apps/<id> from the skeleton with the root's SDK version and adds it
 // to apps.json.
-// Usage: pnpm run new-app <id> [--title "<title>"] [--language <de|en>] [--no-pwa]
+// Usage: pnpm run new-app <id> [--title "<title>"] [--description "<text>"]
+//        [--language <auto|de|en>] [--theme <name>] [--no-pwa]
 import {
   cpSync,
   existsSync,
+  mkdirSync,
   readdirSync,
   readFileSync,
   rmSync,
@@ -14,14 +16,23 @@ import { extname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parseArgs } from 'node:util';
 import {
+  APP_LANGUAGES,
+  AUTO,
+  invalidDescription,
   invalidId,
-  LANGUAGES,
   nextDevPort,
   readApps,
   writeApps,
 } from './lib/apps.mjs';
 import { writeGenerated } from './lib/generate.mjs';
 import { escapeHtml } from './lib/html.mjs';
+import { writeAppIcons } from './lib/icon.mjs';
+import {
+  DEFAULT_THEME,
+  iconColours,
+  themeCss,
+  themeNames,
+} from './lib/themes.mjs';
 import { readJson, writeJson } from './lib/json.mjs';
 import { repositoryRoot, SKELETON } from './lib/paths.mjs';
 import { INSTALL, pnpm, scriptArgs } from './lib/pnpm.mjs';
@@ -29,14 +40,14 @@ import { EXACT_VERSION, SDK } from './lib/sdk.mjs';
 
 const TEXT = new Set(['.json', '.html', '.md', '.ts', '.tsx', '.css']);
 
-function fillTokens(dir, app) {
+function fillTokens(dir, app, theme) {
   // Directory entries carry their type, so no separate stat precedes the read
   // and write of the same path.
   for (const entry of readdirSync(dir, { withFileTypes: true })) {
     const { name } = entry;
     const path = join(dir, name);
     if (entry.isDirectory()) {
-      fillTokens(path, app);
+      fillTokens(path, app, theme);
       continue;
     }
     if (!TEXT.has(extname(name))) continue;
@@ -44,8 +55,13 @@ function fillTokens(dir, app) {
     const source = readFileSync(path, 'utf8');
     const filled = source
       .replaceAll('__APP_ID__', app.id)
+      .replaceAll('__APP_THEME__', theme)
       .replaceAll('__APP_TITLE__', title)
-      .replaceAll('__APP_LANGUAGE__', app.language);
+      // The page's language until the app sets the one it resolved.
+      .replaceAll(
+        '__APP_LANGUAGE__',
+        app.language === AUTO ? 'en' : app.language,
+      );
     if (filled !== source) writeFileSync(path, filled);
   }
 }
@@ -74,12 +90,23 @@ function rootSdk(root) {
  */
 export function createApp(
   root,
-  { id, title = id, language = 'en', pwa = true },
+  {
+    id,
+    title = id,
+    description,
+    language = AUTO,
+    theme = DEFAULT_THEME,
+    pwa = true,
+  },
 ) {
   const reason = invalidId(id);
   if (reason) throw new Error(reason);
-  if (!LANGUAGES.includes(language))
-    throw new Error(`language must be one of ${LANGUAGES.join(', ')}`);
+  if (!themeNames().includes(theme))
+    throw new Error(`theme must be one of ${themeNames().join(', ')}`);
+  const problem = invalidDescription(description);
+  if (problem) throw new Error(problem);
+  if (!APP_LANGUAGES.includes(language))
+    throw new Error(`language must be one of ${APP_LANGUAGES.join(', ')}`);
   if (typeof title !== 'string' || title.trim() === '')
     throw new Error('the title must not be empty');
   const manifest = readApps(root);
@@ -91,6 +118,7 @@ export function createApp(
   const app = {
     id,
     title: title.trim(),
+    ...(description === undefined ? {} : { description: description.trim() }),
     language,
     path: `/${id}/`,
     devPort: nextDevPort(manifest),
@@ -98,7 +126,8 @@ export function createApp(
   };
   try {
     cpSync(SKELETON, appDir, { recursive: true, errorOnExist: true });
-    fillTokens(appDir, app);
+    fillTokens(appDir, app, theme);
+    writeAppIcons(appDir, app.title, iconColours(themeCss(appDir, theme)));
     const pkgFile = join(appDir, 'package.json');
     const pkg = readJson(pkgFile);
     // Package managers keep dependency lists sorted.
@@ -123,14 +152,16 @@ function main() {
     allowPositionals: true,
     options: {
       title: { type: 'string' },
+      description: { type: 'string' },
       language: { type: 'string' },
+      theme: { type: 'string' },
       'no-pwa': { type: 'boolean' },
       'skip-install': { type: 'boolean' },
     },
   });
   if (positionals.length !== 1) {
     console.error(
-      'Usage: pnpm run new-app <id> [--title "<title>"] [--language <de|en>] [--no-pwa]',
+      'Usage: pnpm run new-app <id> [--title "<title>"] [--description "<text>"] [--language <auto|de|en>] [--theme <name>] [--no-pwa]',
     );
     process.exit(2);
   }
@@ -140,6 +171,8 @@ function main() {
     app = createApp(root, {
       id: positionals[0],
       title: values.title,
+      description: values.description,
+      theme: values.theme,
       language: values.language,
       pwa: !values['no-pwa'],
     });