@sempods/apps 0.0.0-stage → 0.7.0-dev.1

package/shared/files/393b09ecd18889d9e1fdf2a6df12d1f6c193fc7fcd89ba808ad94df521bad8db

@@ -0,0 +1,41 @@
+# Working in this apps repository
+
+Scope: the whole repository. More specific app instructions can refine app work;
+the owner's requests and recorded choices determine the task.
+
+The owner describes what they need; you build small, usable steps for them to
+try. Do not assume developer knowledge. Explain what to try and any choice in
+everyday terms, in the owner's language. Make routine technical choices from
+the workflow and installed SDK reference, and record them in app notes. Ask
+only for the decisions that setup and the workflow leave to the owner, and use
+answers already given.
+
+The instructions you follow ship with the installed tooling package
+`@sempods/apps` and the SDK. If `node_modules` is missing, follow the
+bootstrap steps in [INIT.md](INIT.md) first.
+
+1. On first setup, read [INIT.md](INIT.md). On later sessions, read its setup
+   record and the target app's `apps/<id>/NOTES.md` first.
+2. Follow the app workflow,
+   `node_modules/@sempods/apps/instructions/app-workflow.md`, then the SDK's AI
+   entry, `node_modules/@sempods/app-sdk/docs/ai-app-builder.md`, and the
+   guides relevant to the change. They match the installed versions; use those
+   versions' API.
+3. Keep app-specific decisions in its notes and repository-wide choices in the
+   owner section below. Do not place credentials or private Pod data there.
+
+The app-workflow skill in `.claude/skills/` and `.agents/skills/` routes to the
+same workflow; skill discovery is optional. To update the tooling, follow the
+update skill there, `node_modules/@sempods/apps/skills/update/SKILL.md`.
+[User steps](docs/start.md) describe the same journey for the owner.
+
+## Owner instructions
+
+Updates must preserve the delimited section below verbatim. Only change it to
+record this owner's instructions or decisions.
+
+<!-- BEGIN OWNER INSTRUCTIONS -->
+
+No instance-specific instructions recorded yet.
+
+<!-- END OWNER INSTRUCTIONS -->

package/shared/files/4660ca1887261ae658c7f587190e2b71ac91d15b1b6c4cf04dec823fdd0da654

@@ -0,0 +1,22 @@
+packages:
+  - 'apps/*'
+
+# Added dependencies get exact versions; installs require the Node version
+# from engines.
+saveExact: true
+engineStrict: true
+
+# Scripts fail on dependencies out of sync with the manifests instead of
+# installing on their own, so check never rewrites pnpm-lock.yaml.
+verifyDepsBeforeRun: error
+
+# Dependencies run no install scripts: pnpm fails an install that would need
+# one (strictDepBuilds). Approve a package deliberately under allowBuilds.
+
+# Local installs have no minimum release age: pnpm would otherwise install a
+# dependency younger than a day anyway when nothing older fits, add it to this
+# file and stop the next `pnpm run` (verifyDepsBeforeRun). Dependabot applies
+# a cooldown to regular version updates (.github/dependabot.yml). That is no
+# universal age guarantee: local dependency changes, security updates and
+# pnpm fallback paths can admit younger releases.
+minimumReleaseAge: 0

package/shared/files/528d7544990228d6d66fa62423775338fe1716326fc68371fb2665aee86e39b0

@@ -0,0 +1,6 @@
+name: sempods apps
+# Explicit roots: the apps and the workflows. Keep them in the scan as the
+# repository grows.
+paths:
+  - apps
+  - .github

package/shared/files/676e6bf33b44044fb4c62c9fe5441729bd47f2d5077ff904e57a4a1b658859ac

@@ -0,0 +1,38 @@
+# My sempods apps
+
+Describe a shopping list, a small tracker or another idea to your coding
+assistant. Try the first version, then ask for the next change. Your
+[sempods](https://www.sempods.org/) Pod keeps the data; the app gives it a
+screen.
+
+You need a coding assistant that can work with local files, Node.js in the
+version `.node-version` names, pnpm, and a Pod account for trying real saves.
+Your assistant helps with the local setup. A hosting account is needed only to
+publish.
+
+> **Preview.** This starter is new and still changing. Today you can build
+> apps, try them locally against your Pod, update the SDK and the tooling, and
+> publish all apps together on one site.
+
+## Start with your idea
+
+Open this repository in your coding assistant and paste:
+
+> Read AGENTS.md and INIT.md. Help me build a shopping list in German. Start
+> with adding an item and marking it as bought. Show me how to try it on my Pod.
+
+[Start, change, try, publish](docs/start.md) explains the next steps. Sign in
+only in your browser; never paste passwords or tokens into the chat.
+
+Apps include PWA configuration by default, for later installation from your
+HTTPS site. That does not make data editing work offline.
+
+For assistants: [AGENTS.md](AGENTS.md) and [INIT.md](INIT.md).
+
+## Licence
+
+Your apps and this repository are yours; add the licence you choose. The
+tooling package `@sempods/apps` is MIT-0. The SDK packages, including the
+documentation and examples they ship, keep their own licences: Apache-2.0 for
+code and CC BY 4.0 for documentation. Code adapted from SDK examples keeps its
+Apache-2.0 notice.

package/shared/files/8b7567319e18694aeca8722107281a760e3100239c6d0f548acb71e1806fa172

@@ -0,0 +1,28 @@
+name: Check
+# Checks the apps as they are: manifest, generated configuration, the shared
+# SDK version, and lint, build and tests of each app, also on its own.
+on:
+  pull_request:
+  push:
+    branches: [main]
+  workflow_dispatch:
+permissions:
+  contents: read
+jobs:
+  check:
+    # A ruleset can require this check by name; keep it stable.
+    name: Apps
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      # Installs the pnpm version that packageManager in package.json pins.
+      - uses: pnpm/action-setup@ea17c68df8912ef543352723c149a84f56e3d413 # v6.1.0
+      - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+        with:
+          node-version-file: .node-version
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run check --standalone all

package/shared/files/9945f9bd573e5af8aad2e65cc8b4284fbb1d7e8b96c4efdd42eeb49132fb4327

@@ -0,0 +1,4 @@
+{
+  "schemaVersion": 1,
+  "apps": []
+}

package/shared/files/b911698dc3cf3227d34d0ad6727f1c4408791203c9665de99ab959331a1fb07d

@@ -0,0 +1 @@
+24.15.0

package/shared/files/c2a4b026a87f6c8e7473e7fc456c6020b63c7e675087f6b58013ed5163c2f6ee

@@ -0,0 +1,23 @@
+node_modules/
+dist/
+site-dist/
+.netlify/
+*.tsbuildinfo
+.env
+.env.*
+!.env.example
+.DS_Store
+dev-dist/
+# Personal assistant instructions stay local.
+CLAUDE.local.md
+AGENTS.override.md
+
+# Editor settings stay local.
+.idea/
+.vscode/
+
+# Local SDK update checkpoint; removed only after install and checks succeed.
+/.sdk-update-pending
+# Open starter migration: manual cases, their sources and suggestions;
+# removed once the migration is complete.
+/.sempods-migration/

package/shared/files/d3ca3a13c6524a2ee9382977ddc0539790813225f366306024a58c957a4716ee

@@ -0,0 +1,11 @@
+---
+name: update
+description:
+  Update the tooling of this sempods apps repository: install a newer
+  @sempods/apps, migrate the shared files, review and open a pull request.
+  Not for SDK-only updates.
+---
+
+Read the canonical update skill that the installed tooling package ships,
+`node_modules/@sempods/apps/skills/update/SKILL.md`. If `node_modules` is
+missing, follow the bootstrap steps in `INIT.md` first.

package/shared/files/e13474647ebaf26d042d76f4917203d209a2b14c0d2af8d12139ea328530823e

@@ -0,0 +1,78 @@
+# Version updates. Security updates are enabled in the repository settings.
+version: 2
+
+updates:
+  # The pinned `uses:` SHAs in the workflows are supply-chain dependencies too.
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+    # Reviewed releases of shared sempods actions need no waiting period;
+    # third-party actions keep Dependabot's default three-day cooldown.
+    cooldown:
+      exclude:
+        - 'sempods/.github/*'
+    groups:
+      github-actions:
+        patterns:
+          - '*'
+        update-types:
+          - 'minor'
+          - 'patch'
+
+  # Dependabot's npm ecosystem updates pnpm-lock.yaml too, and every
+  # package.json of the pnpm workspace: the root and each app.
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+    versioning-strategy: 'increase'
+    # Regular version updates wait three days; Dependabot also attempts an age
+    # gate for newly resolved transitive dependencies. Security updates skip
+    # it. sempods releases are reviewed upstream and need no waiting period.
+    cooldown:
+      default-days: 3
+      exclude:
+        - '@sempods/*'
+    # Ignore rules with update-types stop only version updates; security
+    # updates for these packages still arrive.
+    ignore:
+      # BEGIN OWNER SEMPODS UPDATES
+      # No version PRs for the SDK and the tooling. Remove the entry between
+      # these markers to receive them; updates keep this section as it is.
+      - dependency-name: '@sempods/*'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+          - 'version-update:semver-patch'
+      # END OWNER SEMPODS UPDATES
+      # Match the Node 24 runtime baseline; review runtime and typings together.
+      - dependency-name: '@types/node'
+        update-types:
+          - 'version-update:semver-major'
+    # A dependency joins the first group it matches. Both SDK packages move
+    # together in one PR; the tooling has its own, since it brings a starter
+    # migration (update skill). Security updates move only affected packages:
+    # their SDK group joins advisories for both, and a PR that moves one is
+    # completed with sdk-update (Update the SDK in the app workflow).
+    groups:
+      sempods-sdk:
+        patterns:
+          - '@sempods/app-sdk'
+          - '@sempods/client-sdk'
+      sempods-sdk-security:
+        applies-to: 'security-updates'
+        patterns:
+          - '@sempods/app-sdk'
+          - '@sempods/client-sdk'
+      sempods-apps:
+        patterns:
+          - '@sempods/apps'
+      npm:
+        patterns:
+          - '*'
+        exclude-patterns:
+          - '@sempods/*'
+        update-types:
+          - 'minor'
+          - 'patch'

package/shared/files/f2fb601d5ebc4ca72274ac9d3fcf7b7a96e27958bb92cd065a9165b501ee94d7

@@ -0,0 +1,57 @@
+# Set up this repository
+
+This is the assistant's starting point for setup. Users can start with
+[the short guide](docs/start.md). Follow [AGENTS.md](AGENTS.md) and preserve the
+setup record below on later runs and updates.
+
+## Bootstrap
+
+The setup procedure ships with the tooling package, so install the
+dependencies first. Check `node --version` against `.node-version`. If it
+differs, switch with the owner's version manager and name that version
+explicitly; not every manager reads `.node-version` by default, and with mise
+prefix each command with `mise exec node@<version> --`. Do not write a
+version-manager configuration into the repository: `.node-version` stays the
+only source. Otherwise ask the owner to install that version; do not work
+around it. `pnpm-workspace.yaml` sets `engineStrict`, so `pnpm install` stops
+on an older Node.
+
+Then check `pnpm --version`. If pnpm is missing, Node 24 brings Corepack:
+`corepack enable pnpm`. Without Corepack (Node 25 and later), or if it cannot
+write to Node's directory, install pnpm globally with npm after asking the
+owner. pnpm switches to the version that `packageManager` in `package.json`
+pins. From the repository root:
+
+```sh
+pnpm install
+```
+
+A repository that has committed `pnpm-lock.yaml` installs with
+`pnpm install --frozen-lockfile` instead. Commit the lockfile the first install
+writes.
+
+## Setup procedure
+
+Follow `node_modules/@sempods/apps/instructions/setup.md`. It covers the first
+app, optional repository preferences and when setup is done. Record progress
+only in the setup record below.
+
+## Setup record
+
+The assistant updates only this record as setup progresses; updates preserve
+it. Keep it free of credentials and private data.
+
+<!-- BEGIN INSTANCE SETUP RECORD -->
+
+- Status: not started
+- 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
+- First app ID and idea: not selected
+- Test Pod/context: 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
+
+<!-- END INSTANCE SETUP RECORD -->

package/shared/files/f9e2544290ee8418484e47194444ee58c2ea675682871ae8a8727d1edb17978e

@@ -0,0 +1,5 @@
+# Repository instructions
+
+Read [AGENTS.md](AGENTS.md). It routes to setup, the app workflow and tooling
+updates. The [app-workflow skill](.claude/skills/app-workflow/SKILL.md) uses
+the same instructions.

package/shared/files/ff9f774d9732fdc7d704ef37ddc40ef507a1bab7ee3c1db5b1a6a8f26e6e4b37

@@ -0,0 +1,35 @@
+name: CodeQL
+on:
+  pull_request:
+  push:
+    branches: [main]
+  schedule:
+    - cron: '41 6 * * 2'
+  workflow_dispatch:
+permissions:
+  contents: read
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    permissions:
+      contents: read
+      security-events: write
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [actions, javascript-typescript]
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      - uses: github/codeql-action/init@24c54180a607b1449ed407dd24f251e4e9147c8d # v4
+        with:
+          languages: ${{ matrix.language }}
+          build-mode: none
+          config-file: ./.github/codeql/codeql-config.yml
+          queries: security-extended
+      - uses: github/codeql-action/analyze@24c54180a607b1449ed407dd24f251e4e9147c8d # v4
+        with:
+          category: /language:${{ matrix.language }}

package/shared/snapshot.json

@@ -0,0 +1,25 @@
+{
+  "format": 1,
+  "revision": "71735f2f98610875bee974bb9b42651505d4b395dcdb02eb8ac8ff9ed48c6e2c",
+  "files": {
+    ".agents/skills/app-workflow/SKILL.md": "0221b70340152ba3cc615342254603b29b89c4d7d944d7b3b3e647873bdcefa0",
+    ".agents/skills/update/SKILL.md": "d3ca3a13c6524a2ee9382977ddc0539790813225f366306024a58c957a4716ee",
+    ".claude/skills/app-workflow/SKILL.md": "0221b70340152ba3cc615342254603b29b89c4d7d944d7b3b3e647873bdcefa0",
+    ".claude/skills/update/SKILL.md": "d3ca3a13c6524a2ee9382977ddc0539790813225f366306024a58c957a4716ee",
+    ".github/codeql/codeql-config.yml": "528d7544990228d6d66fa62423775338fe1716326fc68371fb2665aee86e39b0",
+    ".github/dependabot.yml": "e13474647ebaf26d042d76f4917203d209a2b14c0d2af8d12139ea328530823e",
+    ".github/workflows/check.yml": "8b7567319e18694aeca8722107281a760e3100239c6d0f548acb71e1806fa172",
+    ".github/workflows/codeql.yml": "ff9f774d9732fdc7d704ef37ddc40ef507a1bab7ee3c1db5b1a6a8f26e6e4b37",
+    ".gitignore": "c2a4b026a87f6c8e7473e7fc456c6020b63c7e675087f6b58013ed5163c2f6ee",
+    ".node-version": "b911698dc3cf3227d34d0ad6727f1c4408791203c9665de99ab959331a1fb07d",
+    "AGENTS.md": "393b09ecd18889d9e1fdf2a6df12d1f6c193fc7fcd89ba808ad94df521bad8db",
+    "CLAUDE.md": "f9e2544290ee8418484e47194444ee58c2ea675682871ae8a8727d1edb17978e",
+    "INIT.md": "f2fb601d5ebc4ca72274ac9d3fcf7b7a96e27958bb92cd065a9165b501ee94d7",
+    "README.md": "676e6bf33b44044fb4c62c9fe5441729bd47f2d5077ff904e57a4a1b658859ac",
+    "apps.json": "9945f9bd573e5af8aad2e65cc8b4284fbb1d7e8b96c4efdd42eeb49132fb4327",
+    "apps/.gitkeep": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
+    "docs/start.md": "1c29eed0a0297c742ca5814de9081ff8efce3b2da5d9e1bdf90a403873da4aa9",
+    "package.json": "31ede0d1a035d8531100ebfd751510c772ab0871309a0b9752a77fb96187eb53",
+    "pnpm-workspace.yaml": "4660ca1887261ae658c7f587190e2b71ac91d15b1b6c4cf04dec823fdd0da654"
+  }
+}

package/skeleton/app/.oxlintrc.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": [
+      "warn",
+      {
+        "allowConstantExport": true
+      }
+    ]
+  },
+  "ignorePatterns": ["node_modules", "dist", "dev-dist"]
+}

package/skeleton/app/NOTES.md

@@ -0,0 +1,19 @@
+# __APP_TITLE__: development notes
+
+Your assistant keeps these notes up to date so the next session can continue.
+
+## Idea
+
+What the app is for and its first useful interaction.
+
+## Vocabulary
+
+Types and properties (full IRIs) the app reads and writes.
+
+## Decisions
+
+Choices the owner made, with the date.
+
+## Tested
+
+What was tried, against which Pod and context, and what is still untested.

package/skeleton/app/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="__APP_LANGUAGE__">
+  <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 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>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/skeleton/app/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "__APP_ID__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "test": "vitest run --passWithNoTests",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "24.19.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "oxlint": "1.87.0",
+    "typescript": "7.0.2",
+    "vite": "8.3.3",
+    "vite-plugin-pwa": "2.0.0",
+    "vitest": "5.0.3"
+  }
+}

package/skeleton/app/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#176354"/></svg>

package/skeleton/app/src/App.tsx

@@ -0,0 +1,73 @@
+import { useRef, useState } from 'react';
+import { createBrowserRuntime } from '@sempods/app-sdk';
+import {
+  AppAccess,
+  SempodsProvider,
+  TargetScreen,
+  useAppState,
+  useSdkLocale,
+} from '@sempods/app-sdk/react';
+import { NewVersionNotice } from './NewVersionNotice.tsx';
+import { app, runtimeOptions } from './sempods.generated.ts';
+import { startMessage } from './start.ts';
+
+// One runtime for the app's lifetime, created outside rendering.
+const runtime = createBrowserRuntime(runtimeOptions);
+
+// Vite hot replacement ends this module's runtime lifetime.
+if (import.meta.hot) import.meta.hot.dispose(() => runtime.dispose());
+
+export default function App({
+  registration,
+}: {
+  readonly registration: Promise<ServiceWorkerRegistration | undefined>;
+}) {
+  return (
+    <SempodsProvider runtime={runtime} language={app.language}>
+      <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.
+function Frame() {
+  const [open, setOpen] = useState(false);
+  const focusTarget = useRef<HTMLButtonElement>(null);
+  const { connections } = useAppState();
+  const { messages } = useSdkLocale();
+  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>
+        </header>
+      )}
+      {/* Below the header's h1, AppAccess uses h2. */}
+      <AppAccess
+        appName={app.title}
+        headingLevel={header ? 2 : 1}
+        open={open}
+        focusTarget={focusTarget}
+      />
+      <TargetScreen>
+        <Start />
+      </TargetScreen>
+    </main>
+  );
+}
+
+// Replace this screen with your app. It renders once a Pod context is chosen.
+function Start() {
+  const { language } = useSdkLocale();
+  return <p>{startMessage(language)}</p>;
+}

package/skeleton/app/src/NewVersionNotice.tsx

@@ -0,0 +1,63 @@
+// Adapted from the sempods TypeScript SDK v0.2.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.
+import { useEffect, useState } from 'react';
+import { useSdkLocale } from '@sempods/app-sdk/react';
+
+/**
+ * Render beneath the app's actual locale provider so notices follow its language.
+ * Keep it outside target/access gates: updates also matter while signed out.
+ * Announces a downloaded version. It applies once every window of the app is
+ * closed, so an update never reloads a page over unsaved drafts or unconfirmed
+ * writes. App-owned recipe, not an SDK export.
+ */
+export function NewVersionNotice({
+  registration,
+}: {
+  readonly registration: Promise<ServiceWorkerRegistration | undefined>;
+}) {
+  const [ready, setReady] = useState(false);
+  const { language } = useSdkLocale();
+  useEffect(() => {
+    let active = true;
+    let stop = () => {};
+    void registration.then((r) => {
+      if (!r || !active) return;
+      // Only an update of a controlled page is news; a first install is not.
+      const check = () => {
+        if (active && r.waiting && navigator.serviceWorker.controller)
+          setReady(true);
+      };
+      // Follow a worker that was already installing before this subscription
+      // (updatefound fired earlier) as well as every later one.
+      const watched = new Set<ServiceWorker>();
+      const watch = (worker: ServiceWorker | null) => {
+        if (!worker || watched.has(worker)) return;
+        watched.add(worker);
+        worker.addEventListener('statechange', check);
+      };
+      const found = () => watch(r.installing);
+      r.addEventListener('updatefound', found);
+      watch(r.installing);
+      stop = () => {
+        r.removeEventListener('updatefound', found);
+        for (const worker of watched)
+          worker.removeEventListener('statechange', check);
+      };
+      check();
+    });
+    return () => {
+      active = false;
+      stop();
+    };
+  }, [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>
+  );
+}

package/skeleton/app/src/index.css

@@ -0,0 +1,37 @@
+:root {
+  /* Follow the system's light or dark mode; the SDK components follow the page.
+     The colours match the SDK defaults, so AppAccess sits seamlessly on the page. */
+  color-scheme: light dark;
+  font-family: system-ui, sans-serif;
+  color: light-dark(#202923, #e8eee9);
+  background: light-dark(#fff, #191b1a);
+}
+body {
+  margin: 0;
+}
+main {
+  max-width: 760px;
+  margin: auto;
+  padding: 16px;
+}
+header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+header h1 {
+  margin: 0;
+  font-size: 1.4rem;
+}
+button,
+input,
+select {
+  font: inherit;
+  margin: 0.25rem;
+  padding: 0.4rem;
+}
+input[type='checkbox'] {
+  accent-color: light-dark(#226044, #8acda6);
+}