@sempods/apps 0.7.1 → 0.8.0-dev.1

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,7 @@ import {
   replaceFile,
 } from './lib/files.mjs';
 import { GENERATED_FILES } from './lib/generate.mjs';
+import { 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 +74,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 +98,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 +377,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 +486,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 +504,27 @@ 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)) report.updated.push(...adoptPageTitle(dir, app));
+  }
+  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'],
     });

package/scripts/sdk-update.mjs

@@ -55,6 +55,20 @@ export function releaseLinks(version) {
   };
 }
 
+// Since 0.6.0 the SDK ships its release notes and migration guide; read the
+// installed ones, which match the installed code.
+const INSTALLED_DOCS = join('node_modules', '@sempods', 'app-sdk', 'docs');
+
+/**
+ * Where to read about `version` after it is installed: the installed notes
+ * and guide when the SDK ships them, otherwise the published ones.
+ */
+export function releaseDocs(root, version) {
+  const notes = join(INSTALLED_DOCS, 'releases', `${version}.md`);
+  if (!existsSync(join(root, notes))) return releaseLinks(version);
+  return { release: notes, migration: join(INSTALLED_DOCS, 'migration.md') };
+}
+
 /** Plan everything before writing. Registry injection keeps tests offline. */
 export function planUpdate(
   root,
@@ -202,8 +216,9 @@ function main() {
       ? `Updated SDK to ${plan.version}.`
       : `Already at SDK ${plan.version}; nothing changed.`,
   );
+  const docs = releaseDocs(root, plan.version);
   console.log(
-    `SDK release: ${plan.release}\nMigration guide: ${plan.migration}`,
+    `SDK release notes: ${docs.release}\nMigration guide: ${docs.migration}`,
   );
 }
 

package/shared/files/{f2fb601d5ebc4ca72274ac9d3fcf7b7a96e27958bb92cd065a9165b501ee94d7 → 44c114d4d2c8b172f4757100f79e8a1a00d30c96ba2ad8f75c3373e52f6b849f}

@@ -47,9 +47,9 @@ it. Keep it free of credentials and private data.
 - Created from (`.sempods-baseline.json`): not recorded
 - SDK version at setup (`@sempods/app-sdk` in the root `package.json`): not recorded
 - Owner and review identity: not recorded
-- UI language: not selected
+- Owner's language for the app texts: not recorded
 - First app ID and idea: not selected
-- Test Pod/context: not selected (optional; synthetic data only)
+- Test Pod and contexts: not selected (optional; synthetic data only)
 - sempods version PRs (Dependabot): not chosen
 - Local URL and check result: not checked
 - Pod exercise and remaining gaps: not tested

package/shared/files/{31ede0d1a035d8531100ebfd751510c772ab0871309a0b9752a77fb96187eb53 → 843c078e84912158607ebb8ce0042589d676a742bcd3cf8b6c474d62ff3a6845}

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "new-app": "sempods-apps new-app",
+    "icon": "sempods-apps icon",
     "dev": "sempods-apps dev",
     "regenerate": "sempods-apps regenerate",
     "configure-site": "sempods-apps configure-site",
@@ -18,8 +19,8 @@
     "migrate": "sempods-apps migrate"
   },
   "devDependencies": {
-    "@sempods/app-sdk": "0.5.0",
+    "@sempods/app-sdk": "0.6.0",
     "@sempods/apps": "0.0.0",
-    "@sempods/client-sdk": "0.5.0"
+    "@sempods/client-sdk": "0.6.0"
   }
 }

package/shared/files/{1c29eed0a0297c742ca5814de9081ff8efce3b2da5d9e1bdf90a403873da4aa9 → f30ec6b7f9de16be54919382ab18cdcc33ee64938f7b907d855bcf6740e4c102}

@@ -14,7 +14,8 @@ to it by itself.
 [Open this repository in your assistant and paste the starter prompt](../README.md#start-with-your-idea).
 Describe one thing you want to do: “Add something to my shopping list.” Your
 assistant sets up the app and gives you a local link to open.
-It chooses the technical details and asks you about what the app should do.
+It chooses the technical details and asks you a few short questions: what the
+app is for, which mood it should have, its name and icon.
 Review rules and automatic updates can wait until you have tried the first
 version.
 
@@ -29,7 +30,12 @@ Your existing apps stay in the same repository.
 Use a test context with made-up data in your Pod. Sign in on the Pod's page,
 then choose that context in the app. Ask your assistant to check a save and a
 reload, and to tell you what it has not tested. Never paste passwords or tokens
-into chat. Without a Pod, you can still try the screen.
+into chat. Without a Pod you only see the sign-in screen; the app's own
+screens need a test context.
+
+Before your assistant hands over a screen, it shows you a screenshot from a
+phone-sized window and asks what you think. Say what you like and what feels
+off; that is how the app gets its look.
 
 ## Keep apps up to date
 

package/shared/snapshot.json

@@ -1,6 +1,6 @@
 {
   "format": 1,
-  "revision": "b9a807367932b1331df3f586df6cd8144ca3db006bd58dd4e4b92cc412dd3ccd",
+  "revision": "1dd60bc5a3e7e0ab995d0d6941e78f96239ee8979a6c1d3a529ae4f79b680e1b",
   "files": {
     ".agents/skills/app-workflow/SKILL.md": "0221b70340152ba3cc615342254603b29b89c4d7d944d7b3b3e647873bdcefa0",
     ".agents/skills/update/SKILL.md": "d3ca3a13c6524a2ee9382977ddc0539790813225f366306024a58c957a4716ee",
@@ -14,12 +14,12 @@
     ".node-version": "b911698dc3cf3227d34d0ad6727f1c4408791203c9665de99ab959331a1fb07d",
     "AGENTS.md": "393b09ecd18889d9e1fdf2a6df12d1f6c193fc7fcd89ba808ad94df521bad8db",
     "CLAUDE.md": "f9e2544290ee8418484e47194444ee58c2ea675682871ae8a8727d1edb17978e",
-    "INIT.md": "f2fb601d5ebc4ca72274ac9d3fcf7b7a96e27958bb92cd065a9165b501ee94d7",
+    "INIT.md": "44c114d4d2c8b172f4757100f79e8a1a00d30c96ba2ad8f75c3373e52f6b849f",
     "README.md": "2818c884d46d97ec14fe4921dbdc147769d29846c08a92b1d3225c5297cfed93",
     "apps.json": "9945f9bd573e5af8aad2e65cc8b4284fbb1d7e8b96c4efdd42eeb49132fb4327",
     "apps/.gitkeep": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
-    "docs/start.md": "1c29eed0a0297c742ca5814de9081ff8efce3b2da5d9e1bdf90a403873da4aa9",
-    "package.json": "31ede0d1a035d8531100ebfd751510c772ab0871309a0b9752a77fb96187eb53",
+    "docs/start.md": "f30ec6b7f9de16be54919382ab18cdcc33ee64938f7b907d855bcf6740e4c102",
+    "package.json": "843c078e84912158607ebb8ce0042589d676a742bcd3cf8b6c474d62ff3a6845",
     "pnpm-workspace.yaml": "4660ca1887261ae658c7f587190e2b71ac91d15b1b6c4cf04dec823fdd0da654"
   }
 }

package/skeleton/app/NOTES.md

@@ -6,6 +6,16 @@ Your assistant keeps these notes up to date so the next session can continue.
 
 What the app is for and its first useful interaction.
 
+## Design
+
+Purpose and who uses it, the theme and how the icon was chosen, with later
+changes the owner asked for.
+
+## Data
+
+How the app uses contexts (one, several one at a time, read all and write in
+one, or write into several) and which contexts it reads and writes.
+
 ## Vocabulary
 
 Types and properties (full IRIs) the app reads and writes.
@@ -16,4 +26,4 @@ Choices the owner made, with the date.
 
 ## Tested
 
-What was tried, against which Pod and context, and what is still untested.
+What was tried, against which Pod and contexts, and what is still untested.

package/skeleton/app/index.html

@@ -3,11 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#176354" />
+    <!-- The layout resizes with the on-screen keyboard and reaches the edges. -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
+    />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111315" />
     <!-- The callback page must not send its code and state in Referer. -->
     <meta name="referrer" content="strict-origin" />
-    <title>__APP_TITLE__</title>
   </head>
   <body>
     <div id="root"></div>

package/skeleton/app/package.json

@@ -11,18 +11,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "19.3.0",
-    "react-dom": "19.3.0"
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
   },
   "devDependencies": {
-    "@types/node": "24.19.1",
+    "@types/node": "24.19.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "6.1.2",
-    "oxlint": "1.87.0",
+    "oxlint": "1.89.0",
     "typescript": "7.0.2",
-    "vite": "8.3.3",
+    "vite": "8.3.5",
     "vite-plugin-pwa": "2.0.0",
-    "vitest": "5.0.3"
+    "vitest": "5.0.5"
   }
 }

package/skeleton/app/src/App.tsx

@@ -1,64 +1,96 @@
 import { useRef, useState } from 'react';
 import { createBrowserRuntime } from '@sempods/app-sdk';
 import {
+  AccessNotice,
   AppAccess,
   SempodsProvider,
   TargetScreen,
   useAppState,
+  useMessages,
   useSdkLocale,
 } from '@sempods/app-sdk/react';
 import { NewVersionNotice } from './NewVersionNotice.tsx';
+import { replaceUrl } from './routes.ts';
 import { app, runtimeOptions } from './sempods.generated.ts';
-import { startMessage } from './start.ts';
+import { texts, uiLocale } from './texts.ts';
+import { MenuIcon } from './ui/icons.tsx';
+import { Menu } from './ui/Menu.tsx';
 
-// One runtime for the app's lifetime, created outside rendering.
-const runtime = createBrowserRuntime(runtimeOptions);
+// One runtime for the app's lifetime, created outside rendering. Its return
+// after a sign-in goes through the router, which then shows that route.
+const runtime = createBrowserRuntime({ ...runtimeOptions, replaceUrl });
+
+// One UI language for the app's texts, the SDK components and the page.
+const { locale, language } = uiLocale(app.language, navigator.languages);
+document.documentElement.lang = language;
 
 // Vite hot replacement ends this module's runtime lifetime.
 if (import.meta.hot) import.meta.hot.dispose(() => runtime.dispose());
 
+// The app icon (public/favicon.svg), decorative next to the app's name.
+const icon = <img src={`${app.basePath}favicon.svg`} alt="" />;
+
 export default function App({
   registration,
 }: {
   readonly registration: Promise<ServiceWorkerRegistration | undefined>;
 }) {
   return (
-    <SempodsProvider runtime={runtime} language={app.language}>
+    <SempodsProvider runtime={runtime} language={language} locale={locale}>
       <NewVersionNotice registration={registration} />
       <Frame />
     </SempodsProvider>
   );
 }
 
-// The app owns its layout. AppAccess shows sign-in and recovery beside the
-// content and hides once a context is readable; the button reopens it.
+// The app owns its layout: a header with the app's icon and name, its icon
+// actions and a menu; AppAccess beside the content for sign-in and recovery,
+// and as a dialog for managing Pods and sharing from the menu. An app that
+// switches between contexts (lists) puts ui/ContextSwitch in place of the
+// name.
 function Frame() {
-  const [open, setOpen] = useState(false);
-  const focusTarget = useRef<HTMLButtonElement>(null);
+  const [managing, setManaging] = useState(false);
+  const menuButton = useRef<HTMLButtonElement>(null);
   const { connections } = useAppState();
   const { messages } = useSdkLocale();
+  const t = useMessages(texts);
   const header = connections.length > 0;
   return (
     <main>
       {header && (
         <header>
-          <h1>{app.title}</h1>
-          <button
-            ref={focusTarget}
-            aria-expanded={open}
-            onClick={() => setOpen(!open)}
-          >
-            {messages.controls.dataAccess}
-          </button>
+          <h1>
+            {icon}
+            {app.title}
+          </h1>
+          <div className="header-actions">
+            {/* The app's own icon actions go here. */}
+            <Menu
+              label={t.menu}
+              trigger={<MenuIcon />}
+              button={menuButton}
+              items={[
+                {
+                  label: messages.controls.dataAccess,
+                  onSelect: () => setManaging(true),
+                },
+              ]}
+            />
+          </div>
         </header>
       )}
-      {/* Below the header's h1, AppAccess uses h2. */}
+      {/* Below the header's h1, AppAccess uses h2. It explains sign-in and
+          lost access; AccessNotice adds only that a context is read-only. */}
       <AppAccess
         appName={app.title}
+        description={app.description}
+        icon={icon}
         headingLevel={header ? 2 : 1}
-        open={open}
-        focusTarget={focusTarget}
+        open={managing}
+        onClose={() => setManaging(false)}
+        focusTarget={menuButton}
       />
+      <AccessNotice only="write" />
       <TargetScreen>
         <Start />
       </TargetScreen>
@@ -68,6 +100,6 @@ function Frame() {
 
 // Replace this screen with your app. It renders once a Pod context is chosen.
 function Start() {
-  const { language } = useSdkLocale();
-  return <p>{startMessage(language)}</p>;
+  const t = useMessages(texts);
+  return <p>{t.start}</p>;
 }

package/skeleton/app/src/NewVersionNotice.tsx

@@ -1,9 +1,10 @@
-// Adapted from the sempods TypeScript SDK v0.2.0 recipe
+// Adapted from the sempods TypeScript SDK v0.6.0 recipe
 // examples/todo/pwa/register.tsx, licensed under Apache-2.0; see
 // the LICENSE and NOTICE of the @sempods/app-sdk package. Changes: this header; the
-// registration function moved to pwa.ts.
+// registration function moved to pwa.ts; the text comes from texts.ts.
 import { useEffect, useState } from 'react';
-import { useSdkLocale } from '@sempods/app-sdk/react';
+import { useMessages } from '@sempods/app-sdk/react';
+import { texts } from './texts.ts';
 
 /**
  * Render beneath the app's actual locale provider so notices follow its language.
@@ -18,7 +19,7 @@ export function NewVersionNotice({
   readonly registration: Promise<ServiceWorkerRegistration | undefined>;
 }) {
   const [ready, setReady] = useState(false);
-  const { language } = useSdkLocale();
+  const t = useMessages(texts);
   useEffect(() => {
     let active = true;
     let stop = () => {};
@@ -53,11 +54,5 @@ export function NewVersionNotice({
     };
   }, [registration]);
   if (!ready) return null;
-  return (
-    <p role="status">
-      {language === 'de'
-        ? 'Eine neue Version ist bereit. Sie wird verwendet, sobald alle Fenster dieser App geschlossen sind.'
-        : 'A new version is ready. It is used once every window of this app has been closed.'}
-    </p>
-  );
+  return <p role="status">{t.newVersion}</p>;
 }