@dolphy-app/create-extension 0.4.0 → 0.5.0

package/dist/cli/main.js

@@ -65,33 +65,25 @@ const WHEN_KEYS = Object.freeze({
 });
 
 //#endregion
-//#region packages/extension-api/src/locale.ts
-/** Limits of a translation file; the values are checked at discovery and by the tools. */
-const LOCALE_LIMITS = Object.freeze({
-	/** Size of the file in bytes. */
-	fileBytes: 65536,
-	keys: 500,
-	/** Longest value in UTF-16 code units. */
-	valueLength: 500
+//#region packages/extension-api/src/hooks.ts
+/** Limits on hooks; the host and the engine check the same numbers. */
+const EXTENSION_HOOK_LIMITS = Object.freeze({
+	/** Budget of one handler call, ms. */
+	timeoutMs: 3e4,
+	/** Hooks registered by one extension. */
+	hooks: 8,
+	/** Exercises in a `practice.batch` response. */
+	maxExercises: 500
 });
 
 //#endregion
 //#region packages/extension-api/src/index.ts
-/**
-* Public extension API. The package depends on neither the engine nor the DOM: it is imported
-* by extension code (`main.mjs`), by the answer element (`view.mjs`), and by the engine itself.
-*/
 const EXTENSION_ID_PATTERN = /^[a-z][a-z0-9-]*(\.[a-z][a-z0-9-]*)*$/;
-/** Limits on widgets; the manifest and the app enforce them. */
-const EXTENSION_WIDGET_LIMITS = Object.freeze({
-	/** Widgets per extension. */
-	widgets: 3,
-	/** Smallest allowed `minHeight`, px. */
-	minHeight: 80,
-	/** Largest allowed `maxHeight`, px. */
-	maxHeight: 320
-});
-/** Limits on schedules; the manifest, the scheduler, and the runtime enforce them. */
+/** Limits on injections; the app enforces them. */
+const INJECTION_LIMITS = Object.freeze({ 
+/** Characters in `InjectionRegistration.target`. */
+selectorLength: 200 });
+/** Limits on schedules; the host, the scheduler, and the runtime enforce them. */
 const EXTENSION_SCHEDULE_LIMITS = Object.freeze({
 	/** Schedules per extension. */
 	schedules: 4,
@@ -102,7 +94,7 @@ const EXTENSION_SCHEDULE_LIMITS = Object.freeze({
 	/** How often the app looks for due firings, ms. */
 	tickMs: 3e4
 });
-/** Limits of the settings types (`text`, `color`, `list`, `group`, `order`); they match those checked by the manifest and the engine. */
+/** Limits of the settings types (`text`, `color`, `list`, `enum`, `group`, `order`); they match those checked by the host and the engine. */
 const SETTING_LIMITS = Object.freeze({
 	/** `maxLength` of `string` and `text`. */
 	stringLength: 1e4,
@@ -110,8 +102,16 @@ const SETTING_LIMITS = Object.freeze({
 	listItems: 50,
 	/** `itemMaxLength` of `list`. */
 	listItemLength: 200,
+	/** Length of a label, in UTF-16 code units; also of an option's label. */
+	labelLength: 60,
+	/** Length of a help text. */
+	descriptionLength: 500,
 	groupLength: 60,
-	orderMax: 1e3
+	orderMax: 1e3,
+	/** Options of one `enum`. */
+	options: 64,
+	/** Length of an option's value. */
+	optionValueLength: 100
 });
 const KEYBINDING_STROKE = `(?:(?:Mod|Ctrl|Control|Alt|Option|Shift|Cmd|Command|Meta|Win|Super)\\+){0,3}(?:[A-Z0-9]|F(?:[1-9]|1[0-9]|2[0-4])|Enter|Return|Space|Tab|Escape|Esc|Backspace|Delete|Insert|Arrow(?:Up|Down|Left|Right)|Home|End|Page(?:Up|Down)|Plus|\\[[A-Za-z][A-Za-z0-9]*\\]|[\`\\-=\\[\\]\\\\;',./+])`;
 /**
@@ -124,11 +124,11 @@ const KEYBINDING_STROKE = `(?:(?:Mod|Ctrl|Control|Alt|Option|Shift|Cmd|Command|M
 * host validates every string authoritatively with `@dolphy-app/keybindings`.
 */
 const KEYBINDING_PATTERN = new RegExp(`^${KEYBINDING_STROKE}(?: ${KEYBINDING_STROKE})?$`);
-/** Limits on commands and panels (R1, R3); they match those checked by the manifest, host, and engine. */
+/** Limits on commands and panels (R1, R3); they match those checked by the host and the engine. */
 const EXTENSION_COMMAND_LIMITS = Object.freeze({
 	/** Keybinding entries (`keybindings`) per command. */
 	keybindingsPerCommand: 4,
-	/** Length of a `when` condition (of a command, panel, widget or `keybindings[]` entry). */
+	/** Length of a `when` condition (of a command, panel or `keybindings[]` entry). */
 	whenLength: 200,
 	/** Commands per extension. */
 	commands: 64,
@@ -146,7 +146,7 @@ const EXTENSION_COMMAND_LIMITS = Object.freeze({
 	/** Handler budget, ms. */
 	handlerMs: 1e4
 });
-/** Limits on importers and exporters; the manifest, host, and engine check the same numbers. */
+/** Limits on importers and exporters; the host and the engine check the same numbers. */
 const EXTENSION_TRANSFER_LIMITS = Object.freeze({
 	/** Importers per extension. */
 	importers: 8,
@@ -171,6 +171,17 @@ const EXTENSION_TRANSFER_LIMITS = Object.freeze({
 	/** One path of the returned directory, UTF-8 bytes. */
 	pathBytes: 1024
 });
+/** Limits on RPC between the client and the server part of an extension; the host and the engine check the same numbers. */
+const EXTENSION_RPC_LIMITS = Object.freeze({
+	/** Characters in the name of a contract. */
+	nameLength: 120,
+	/** Handlers (`server.handle`) per extension. */
+	rpcs: 64,
+	/** `JSON.stringify(input).length` at the engine boundary. */
+	inputChars: 2e5,
+	/** Handler budget, ms. */
+	handlerMs: 1e4
+});
 /** Extension storage limits (R2); they match the engine's limits, which enforces them. */
 const EXTENSION_STORAGE_LIMITS = Object.freeze({
 	/** Key length in UTF-16 code units. */
@@ -191,11 +202,11 @@ const EXTENSION_SECRET_LIMITS = Object.freeze({
 	/** Number of keys. */
 	keys: 32
 });
-/** Limits of `ctx.stats`; the engine enforces them. */
+/** Limits of `server.stats`; the engine enforces them. */
 const EXTENSION_STATS_LIMITS = Object.freeze({ 
 /** Most dates in one `daily` range (both ends included). */
 dailyDays: 366 });
-/** Limits of `ctx.notifications`; the engine enforces them. */
+/** Limits of `server.notifications`; the engine enforces them. */
 const EXTENSION_NOTIFICATION_LIMITS = Object.freeze({
 	/** Title length in characters (code points). */
 	titleLength: 80,
@@ -206,6 +217,19 @@ const EXTENSION_NOTIFICATION_LIMITS = Object.freeze({
 	/** Notifications per rolling hour and extension. */
 	perHour: 30
 });
+/** Registration of an extension without a server part, or before it has registered anything. */
+const EMPTY_SERVER_REGISTRATION = Object.freeze({
+	exerciseTypes: Object.freeze([]),
+	gradePolicies: Object.freeze([]),
+	settings: Object.freeze([]),
+	events: Object.freeze([]),
+	commands: Object.freeze([]),
+	schedules: Object.freeze([]),
+	importers: Object.freeze([]),
+	exporters: Object.freeze([]),
+	rpcs: Object.freeze([]),
+	hooks: Object.freeze([])
+});
 
 //#endregion
 //#region packages/create-extension/src/templates/common.ts
@@ -215,38 +239,43 @@ const TEMPLATE_NAMES = [
 	"exercise",
 	"theme",
 	"command-panel",
+	"react-panel",
 	"events",
 	"blank"
 ];
 const DEFAULT_TEMPLATE = "exercise";
 const lines = (parts) => `${parts.join("\n")}\n`;
+/** `typecheck` script command (default `tsc`). */
+const typecheckCommand = (module) => module.typecheck ?? "tsc";
 /** The `pnpm` scripts of every generated project. */
-const scripts = (id) => ({
+const scripts = (id, module) => ({
 	build: "dolphy-ext build",
 	dev: "dolphy-ext build --watch",
-	types: "dolphy-ext types",
-	typecheck: "dolphy-ext types && tsc",
+	typecheck: typecheckCommand(module),
 	validate: `dolphy-ext validate dist-ext/${id}`,
 	lint: "dolphy-ext lint",
 	test: "vitest run"
 });
-const packageJson = ({ id, dependencies }) => `${JSON.stringify({
+const packageJson = ({ id, dependencies }, module) => `${JSON.stringify({
 	name: id,
 	version: INITIAL_VERSION,
 	private: true,
 	type: "module",
-	scripts: scripts(id),
-	devDependencies: {
+	scripts: scripts(id, module),
+	devDependencies: Object.fromEntries(Object.entries({
 		"@dolphy-app/extension-api": dependencies.api,
 		"@dolphy-app/extension-sdk": dependencies.sdk,
 		"@dolphy-app/extension-tools": dependencies.tools,
 		"@types/node": "^22.20.4",
 		"happy-dom": "^20.14.5",
 		typescript: "^6.0.3",
-		vitest: "^5.0.2"
-	}
+		vitest: "^5.0.2",
+		vue: "^3.5.35",
+		vuetify: "^4.0.1",
+		...module.devDependencies
+	}).sort(([a], [b]) => a < b ? -1 : 1))
 }, null, 2)}\n`;
-const tsconfigJson = () => lines([
+const tsconfigJson = (module) => lines([
 	"{",
 	"  \"compilerOptions\": {",
 	"    \"target\": \"ES2023\",",
@@ -260,18 +289,12 @@ const tsconfigJson = () => lines([
 	"    \"verbatimModuleSyntax\": true,",
 	"    \"isolatedModules\": true,",
 	"    \"skipLibCheck\": true,",
+	...Object.entries(module.compilerOptions ?? {}).map(([name, value]) => `    "${name}": ${value},`),
 	"    \"noEmit\": true",
 	"  },",
-	"  \"include\": [\"src\", \"test\", \".dolphy/ids.d.ts\"]",
+	"  \"include\": [\"src\", \"test\"]",
 	"}"
 ]);
-const idsBullet = [
-	"- `.dolphy/ids.d.ts` — generated from `extension.json` by",
-	"  `dolphy-ext types` (and by every build): the ids the manifest declares,",
-	"  as TypeScript types. Not committed. A misspelt id, a declared id without",
-	"  a handler or a view, or `ctx.settings.get` of an undeclared setting fails",
-	"  `pnpm typecheck`;"
-];
 const readme = (id, module) => lines([
 	`# ${id}`,
 	"",
@@ -297,7 +320,7 @@ const readme = (id, module) => lines([
 	"```",
 	"",
 	"A change to a file in `dist-ext` is applied live: the window does not",
-	"reload, mounted answer inputs are recreated. Load errors are shown in",
+	"reload, the components on screen are redrawn. Load errors are shown in",
 	"\"Settings → Extensions\".",
 	"",
 	"## Build, check, test",
@@ -306,7 +329,7 @@ const readme = (id, module) => lines([
 	`pnpm build      # dist-ext/${id}`,
 	"pnpm validate   # the same manifest parsing the app does",
 	"pnpm lint       # metadata and bundle checks before a catalog pull request",
-	"pnpm typecheck  # writes .dolphy/ids.d.ts, then tsc",
+	`pnpm typecheck  # ${typecheckCommand(module)}`,
 	"pnpm test",
 	"```",
 	"",
@@ -321,14 +344,10 @@ const readme = (id, module) => lines([
 	"`<userData>/extensions/` and restart the app.",
 	"",
 	"To try the extension while developing, set `DOLPHY_DEV_EXTENSIONS` to the",
-	"project `dist-ext` directory when starting the app (read only by an",
-	"unpackaged app)."
-]);
-const gitignore = () => lines([
-	"node_modules",
-	"dist-ext",
-	".dolphy"
+	"project `dist-ext` directory when starting the app (any build of the app",
+	"reads it, packaged or not; `dolphy-ext dev` relies on this)."
 ]);
+const gitignore = () => lines(["node_modules", "dist-ext"]);
 const claudeMd = () => "@AGENTS.md\n";
 const agentsMd = (id, module) => lines([
 	`# ${id}`,
@@ -347,8 +366,7 @@ const agentsMd = (id, module) => lines([
 	"- `pnpm install` — install the toolchain;",
 	`- \`pnpm build\` — build into \`dist-ext/${id}\`;`,
 	"- `pnpm dev` — rebuild on every change (`dolphy-ext build --watch`);",
-	"- `pnpm types` — write `.dolphy/ids.d.ts` from `extension.json`;",
-	"- `pnpm typecheck` — `types`, then `tsc`;",
+	`- \`pnpm typecheck\` — \`${typecheckCommand(module)}\`;`,
 	"- `pnpm validate` — parse the built manifest the way the app does;",
 	"- `pnpm lint` — metadata and bundle checks the catalog review also runs;",
 	"- `pnpm test` — `vitest`.",
@@ -358,21 +376,42 @@ const agentsMd = (id, module) => lines([
 	"",
 	"## Rules",
 	"",
-	"- `extension.json` is the only declaration: every id the code registers",
-	"  is declared there first. Never edit `.dolphy/ids.d.ts` or `dist-ext/`.",
-	`- Keep ids prefixed with the extension id (\`${id}\`).`,
-	"- Extension code runs in the extension process (`host`), the app window",
-	"  (`views`) or an isolated frame (`panels`, no network). Do not import",
-	"  `node:*` modules into code that runs in the window or a frame.",
+	"- `extension.json` holds the identity of the extension only (id, version,",
+	"  name, author, tags). Contributions are registered by code: `src/index.ts`",
+	"  exports `server` (`defineServer`, runs in the extension host) and/or",
+	"  `client` (`defineClient`, runs in the app window). `pnpm build` writes",
+	"  `main` and `client` into the built manifest; never edit `dist-ext/`.",
+	`- Write ids in the code, prefixed with the extension id (\`${id}\`): a`,
+	"  command, an exercise type, a setting, a panel. The host and the window",
+	"  refuse an id that is taken or does not carry the prefix.",
+	"- The server part (`server`) must not import `vue`, `vuetify` or any",
+	"  component. The client part (`client`) is components registered with",
+	"  `addPanel`, `addInjection`, `addAnswerView`, `addMarkdownRenderer`: a Vue",
+	"  component (`.vue` single-file components and `defineComponent` both work;",
+	"  `<v-btn>` and the other Vuetify components in a template need no import)",
+	"  or a `Mountable` (`defineMountable` from `@dolphy-app/extension-sdk`):",
+	"  an object with `mount(el, ctx)` that draws into `el` with any framework",
+	"  and returns the cleanup. The client part must not import `node:*`",
+	"  modules. The app gives the client code its own `vue` and `vuetify`:",
+	"  import them as usual, they stay out of the bundle. Any other framework",
+	"  is a bundled dependency of this extension and is switched on by",
+	"  `\"frameworks\": [\"react\"]` in `dolphy-ext.config.json` (React is the only",
+	"  one so far; `@dolphy-app/extension-sdk/react` has `reactComponent`).",
+	"  Keep both parts in separate files that `src/index.ts` re-exports, so the",
+	"  build of one never pulls in the other.",
+	"- A `<style>` of a single-file component goes into the whole window",
+	"  document as a `<style data-dolphy-ext>` tag: write `<style scoped>`.",
+	"  `<style module>` and `.vue` files in the server part are not supported.",
 	"- Before publishing replace `your-github-login` in the `author` field of",
 	"  `extension.json` with the GitHub login of the publisher.",
-	"- Ask only for the permissions the extension uses, and say in `README.md`",
-	"  what each one is for.",
-	"- No `eval`, no `new Function`, no minified or obfuscated sources, no",
-	"  `http(s)://` URLs unless the manifest declares the `network`",
-	"  permission: `pnpm lint` and the catalog review flag them.",
-	"- Keep tests next to the behaviour: `@dolphy-app/extension-sdk/testing`",
-	"  runs handlers, commands, events, views and panels without the app.",
+	"- No `eval`, no `new Function`, no minified or obfuscated sources:",
+	"  `pnpm lint` and the catalog review flag them.",
+	"- Keep tests next to the behaviour: `createTestServer` from",
+	"  `@dolphy-app/extension-sdk/testing` starts `server` on in-memory fakes and",
+	"  runs commands, events, schedules, exercise types, importers and",
+	"  exporters; `createTestClient` records what `client` adds; mount a Vue",
+	"  component with `createApp` from `vue` in `happy-dom`, a `Mountable` with",
+	"  `mountForTest`.",
 	"",
 	"## Guide",
 	"",
@@ -409,7 +448,7 @@ const ciYml = () => lines([
 
 //#endregion
 //#region packages/create-extension/src/templates/blank.ts
-const manifestJson$4 = (id) => `{
+const manifestJson$5 = (id) => `{
   "$schema": "./node_modules/@dolphy-app/extension-api/dist/extension.schema.json",
   "id": "${id}",
   "version": "${INITIAL_VERSION}",
@@ -417,57 +456,51 @@ const manifestJson$4 = (id) => `{
   "name": "Hello command",
   "description": "A command-palette command that shows a notification.",
   "author": "your-github-login",
-  "tags": ["productivity"],
-  "contributes": {
-    "commands": [{ "id": "${id}.hello", "title": "Say hello" }]
-  }
+  "tags": ["productivity"]
 }
 `;
-const indexTs$3 = (id) => `import { defineExtension, notify } from '@dolphy-app/extension-sdk';
-
-// extension code: runs in the extension process of the app
-// the command id comes from extension.json: a misspelt id or a declared id
-// without a handler fails \`pnpm typecheck\`
-export const host = defineExtension({
-  commands: {
-    '${id}.hello': () => notify('Hello from ${id}!'),
-  },
+const indexTs$5 = (id) => `import { defineServer, notify } from '@dolphy-app/extension-sdk';
+
+// runs in the extension host: every call registers a contribution
+export const server = defineServer((s) => {
+  s.registerCommand({
+    id: '${id}.hello',
+    title: { en: 'Say hello', ru: 'Поздороваться' },
+    run: () => notify('Hello from ${id}!'),
+  });
 });
 `;
-const indexTestTs$3 = (id) => `import { loadCommands } from '@dolphy-app/extension-sdk/testing';
+const indexTestTs$4 = (id) => `import { createTestServer } from '@dolphy-app/extension-sdk/testing';
 import { expect, it } from 'vitest';
-import { host } from '../src/index.ts';
+import { server } from '../src/index.ts';
 
 it('the hello command notifies', async () => {
-  const commands = await loadCommands(host, {
-    declaredCommands: ['${id}.hello'],
-  });
-  expect(await commands.run('${id}.hello')).toEqual({
+  const running = await createTestServer(server, { extensionId: '${id}' });
+  expect(await running.commands.run('${id}.hello')).toEqual({
     kind: 'notify',
     text: 'Hello from ${id}!',
   });
-  await commands.dispose();
+  await running.dispose();
 });
 `;
 const blank = {
 	summary: ["A Dolphy extension: the smallest project that does something, one command", "in the command palette (Ctrl/⌘+K) that shows a notification."],
 	layout: [
-		"- `extension.json` — the manifest (the command is declared in it);",
-		"- `src/index.ts` — all the extension code: `host` (`defineExtension`); the",
-		"  build writes it to `main.mjs`;",
-		...idsBullet,
+		"- `extension.json` — the manifest: identity only, the build adds `main`;",
+		"- `src/index.ts` — all the extension code: `server` (`defineServer`),",
+		"  which registers the command; the build writes it to `main.mjs`;",
 		"- `test/index.test.ts` — tests (`vitest`)."
 	],
 	files: (id) => ({
-		"extension.json": manifestJson$4(id),
-		"src/index.ts": indexTs$3(id),
-		"test/index.test.ts": indexTestTs$3(id)
+		"extension.json": manifestJson$5(id),
+		"src/index.ts": indexTs$5(id),
+		"test/index.test.ts": indexTestTs$4(id)
 	})
 };
 
 //#endregion
 //#region packages/create-extension/src/templates/command-panel.ts
-const manifestJson$3 = (id) => `{
+const manifestJson$4 = (id) => `{
   "$schema": "./node_modules/@dolphy-app/extension-api/dist/extension.schema.json",
   "id": "${id}",
   "version": "${INITIAL_VERSION}",
@@ -475,173 +508,278 @@ const manifestJson$3 = (id) => `{
   "name": "Hello panel",
   "description": "Palette commands that greet the learner and open a small panel.",
   "author": "your-github-login",
-  "tags": ["productivity"],
-  "contributes": {
-    "commands": [
-      { "id": "${id}.hello", "title": "Say hello", "category": "Hello" },
-      { "id": "${id}.open", "title": "Open the hello panel", "category": "Hello" },
-      { "id": "${id}.data", "title": "Hello panel data", "palette": false }
-    ],
-    "panels": [{ "id": "${id}.view", "title": "Hello" }]
-  }
+  "tags": ["productivity"]
 }
 `;
-const indexTs$2 = (id) => `import {
-  defineExtension,
-  defineExtensionPanel,
-  notify,
-  openPanel,
-} from '@dolphy-app/extension-sdk';
-import type { ExtensionPanels } from '@dolphy-app/extension-sdk';
-
-// extension code: \`host\` runs in the extension process of the app
-// the ids come from extension.json: a misspelt id or a declared id without a
-// handler fails \`pnpm typecheck\`
-export const host = defineExtension({
-  commands: {
-    // palette command: shows a notification
-    '${id}.hello': (args) => {
+const indexTs$4 = () => `export { client } from './client.ts';
+export { server } from './server.ts';
+`;
+const serverTs$2 = (id) => `import { defineServer, notify, openPanel } from '@dolphy-app/extension-sdk';
+
+// runs in the extension host: every call registers a contribution
+export const server = defineServer((s) => {
+  // palette command: shows a notification
+  s.registerCommand({
+    id: '${id}.hello',
+    title: { en: 'Say hello', ru: 'Поздороваться' },
+    category: 'Hello',
+    run: (args) => {
       const name = typeof args === 'string' ? args : 'world';
       return notify(\`Hello, \${name}!\`);
     },
-    // palette command: opens the panel with properties
-    '${id}.open': () => openPanel('${id}.view', { name: 'Dolphy' }),
-    // hidden from the palette (palette: false): the panel asks for data
-    '${id}.data': () => ({ message: 'Hello from ${id}' }),
-  },
-});
+  });
 
-// the panel runs in an isolated frame of the app window: no network, no
-// window.dolphy; the only way out is \`ctx.call\` to the commands above
-export const panels = {
-  '${id}.view': defineExtensionPanel({
-    async mount(container, ctx) {
-      const doc = container.ownerDocument;
-      const title = doc.createElement('h2');
-      const line = doc.createElement('p');
-      container.append(title, line);
-      const name = (props: unknown): string =>
-        typeof props === 'object' && props !== null && 'name' in props
-          ? String(props.name)
-          : 'world';
-      title.textContent = \`Hello, \${name(ctx.props)}!\`;
-      // the app opens the panel again with new properties: redraw the title
-      ctx.signal.addEventListener(
-        'abort',
-        ctx.onProps((props) => {
-          title.textContent = \`Hello, \${name(props)}!\`;
-        }),
-      );
-      const data = (await ctx.call('${id}.data')) as { message: string };
-      line.textContent = data.message;
-    },
-  }),
-} satisfies ExtensionPanels;
-`;
-const indexTestTs$2 = (id) => `// @vitest-environment happy-dom
-import {
-  loadCommands,
-  loadPanel,
-} from '@dolphy-app/extension-sdk/testing';
-import { afterEach, describe, expect, it } from 'vitest';
-import { host, panels } from '../src/index.ts';
+  // palette command: opens the panel (registered by the client) with properties
+  s.registerCommand({
+    id: '${id}.open',
+    title: { en: 'Open the hello panel', ru: 'Открыть панель' },
+    category: 'Hello',
+    run: () => openPanel('${id}.view', { name: 'Dolphy' }),
+  });
 
-const disposables: { dispose(): unknown }[] = [];
-afterEach(async () => {
-  await Promise.all(disposables.splice(0).map((item) => item.dispose()));
+  // hidden from the palette (palette: false): the panel asks for data
+  s.registerCommand({
+    id: '${id}.data',
+    title: 'Hello panel data',
+    palette: false,
+    run: () => ({ message: 'Hello from ${id}' }),
+  });
+});
+`;
+const clientTs$2 = (id) => `import { defineClient } from '@dolphy-app/extension-sdk';
+import StatusPanel from './StatusPanel.vue';
+
+// runs in the app window: the panel is a Vue component the app draws
+export const client = defineClient((c) => {
+  c.addPanel({
+    id: '${id}.view',
+    title: { en: 'Hello', ru: 'Привет' },
+    component: StatusPanel,
+  });
+});
+`;
+const statusPanelVue = (id) => `<script setup lang="ts">
+import { usePanel } from '@dolphy-app/extension-sdk/client';
+import { computed, ref } from 'vue';
+
+// \`usePanel()\` gives the panel the properties it was opened with and \`call\`
+// for the commands of the extension
+const panel = usePanel();
+const message = ref('');
+// the app opens the panel again with new properties: \`panel.props\` is
+// reactive, the title follows it
+const name = computed(() => {
+  const { props } = panel;
+  return typeof props === 'object' && props !== null && 'name' in props
+    ? String(props.name)
+    : 'world';
 });
 
 const load = async () => {
-  const commands = await loadCommands(host, {
-    declaredCommands: ['${id}.hello', '${id}.open', '${id}.data'],
-    declaredPanels: ['${id}.view'],
-  });
-  disposables.push(commands);
-  return commands;
+  const data = await panel.call('${id}.data');
+  message.value = (data as { message: string }).message;
 };
+void load();
+<\/script>
+
+<template>
+  <section class="status-panel">
+    <h2>Hello, {{ name }}!</h2>
+    <p>{{ message }}</p>
+    <v-btn color="primary" @click="load">Reload</v-btn>
+  </section>
+</template>
+
+<style scoped>
+.status-panel {
+  padding: 16px;
+}
+</style>
+`;
+const vitestConfigTs = () => `import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vitest/config';
 
-describe('${id}: commands', () => {
+export default defineConfig({ plugins: [vue()] });
+`;
+/** The tests of the server part: the same for every template with these commands. */
+const serverTestsTs = (id) => `const start = async () => {
+  const running = await createTestServer(server, { extensionId: '${id}' });
+  disposables.push(running);
+  return running;
+};
+
+describe('${id}: server', () => {
   it('hello greets the name from the arguments, "world" without them', async () => {
-    const commands = await load();
-    expect(await commands.run('${id}.hello', 'Ada')).toEqual({
+    const running = await start();
+    expect(await running.commands.run('${id}.hello', 'Ada')).toEqual({
       kind: 'notify',
       text: 'Hello, Ada!',
     });
-    expect(await commands.run('${id}.hello')).toEqual({
+    expect(await running.commands.run('${id}.hello')).toEqual({
       kind: 'notify',
       text: 'Hello, world!',
     });
   });
 
   it('open asks the app to open the panel with properties', async () => {
-    const commands = await load();
-    expect(await commands.run('${id}.open')).toEqual({
+    const running = await start();
+    expect(await running.commands.run('${id}.open')).toEqual({
       kind: 'openPanel',
       panelId: '${id}.view',
       props: { name: 'Dolphy' },
     });
   });
 
-  it('data returns what the panel shows', async () => {
-    const commands = await load();
-    expect(await commands.run('${id}.data')).toEqual({
+  it('data returns what the panel shows and stays out of the palette', async () => {
+    const running = await start();
+    expect(await running.commands.run('${id}.data')).toEqual({
       kind: 'data',
       value: { message: 'Hello from ${id}' },
     });
+    const hidden = running.registration.commands.find(
+      (command) => command.id === '${id}.data',
+    );
+    expect(hidden?.palette).toBe(false);
   });
+});`;
+const indexTestTs$3 = (id) => `// @vitest-environment happy-dom
+import { PANEL_HANDLE_KEY } from '@dolphy-app/extension-sdk';
+import type { JsonValue, PanelHandle } from '@dolphy-app/extension-sdk';
+import {
+  createTestClient,
+  createTestServer,
+} from '@dolphy-app/extension-sdk/testing';
+import { afterEach, describe, expect, it } from 'vitest';
+import { createApp, defineComponent, h, nextTick, shallowReactive } from 'vue';
+import { client, server } from '../src/index.ts';
+import StatusPanel from '../src/StatusPanel.vue';
+
+const disposables: { dispose(): unknown }[] = [];
+afterEach(async () => {
+  await Promise.all(disposables.splice(0).map((item) => item.dispose()));
+});
+
+${serverTestsTs(id)}
+
+describe('${id}: client', () => {
+  it('adds the panel that the open command points to', async () => {
+    const running = await createTestClient(client, { extensionId: '${id}' });
+    disposables.push(running);
+    expect(running.panels.map((panel) => panel.id)).toEqual(['${id}.view']);
+    expect(running.panels[0]?.component).toBe(StatusPanel);
+  });
+});
+
+// the app draws \`<v-btn>\` with its Vuetify; the test gives the panel a plain button
+const VBtn = defineComponent({
+  setup: (_props, { slots }) => () => h('button', slots['default']?.()),
 });
 
+// draws the panel the way the app does: the handle is provided to the component
+const mountPanel = async (
+  props: JsonValue | undefined,
+  call: PanelHandle['call'],
+) => {
+  const handle = shallowReactive({
+    panelId: '${id}.view',
+    props,
+    context: { courseId: null },
+    call,
+  });
+  const host = document.createElement('div');
+  document.body.append(host);
+  const app = createApp({ render: () => h(StatusPanel) });
+  app.component('v-btn', VBtn);
+  app.provide(PANEL_HANDLE_KEY, handle);
+  app.mount(host);
+  disposables.push({
+    dispose: () => {
+      app.unmount();
+      host.remove();
+    },
+  });
+  // the panel asks a command: wait for the reply, then for the redraw
+  const settle = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
+  };
+  await settle();
+  return {
+    host,
+    reopen: async (next: JsonValue) => {
+      handle.props = next;
+      await settle();
+    },
+  };
+};
+
 describe('${id}: panel', () => {
   it('shows the data command reply and follows new properties', async () => {
-    const panel = await loadPanel(panels, '${id}.view', {
-      props: { name: 'Ada' },
-      call: () => ({ message: 'Hello from the test' }),
+    const calls: string[] = [];
+    const panel = await mountPanel({ name: 'Ada' }, async (commandId) => {
+      calls.push(commandId);
+      return { message: 'Hello from the test' };
     });
-    disposables.push(panel);
-    expect(panel.container.querySelector('h2')?.textContent).toBe('Hello, Ada!');
-    expect(panel.container.querySelector('p')?.textContent).toBe(
+    expect(panel.host.querySelector('h2')?.textContent).toBe('Hello, Ada!');
+    expect(panel.host.querySelector('p')?.textContent).toBe(
       'Hello from the test',
     );
-    expect(panel.calls).toEqual([{ commandId: '${id}.data', args: undefined }]);
+    expect(calls).toEqual(['${id}.data']);
 
-    panel.setProps({ name: 'Grace' });
-    expect(panel.container.querySelector('h2')?.textContent).toBe(
-      'Hello, Grace!',
-    );
+    await panel.reopen({ name: 'Grace' });
+    expect(panel.host.querySelector('h2')?.textContent).toBe('Hello, Grace!');
   });
 
-  it('stops listening for properties when the panel closes', async () => {
-    const panel = await loadPanel(panels, '${id}.view', {
-      call: () => ({ message: 'x' }),
+  it('asks the data command again when the button is pressed', async () => {
+    const calls: string[] = [];
+    const panel = await mountPanel(undefined, async (commandId) => {
+      calls.push(commandId);
+      return { message: 'x' };
     });
-    const heading = panel.container.querySelector('h2');
-    panel.dispose();
-    expect(panel.aborted).toBe(true);
-    panel.setProps({ name: 'Late' });
-    expect(heading?.textContent).toBe('Hello, world!');
+    panel.host.querySelector('button')?.click();
+    await panel.reopen({});
+    expect(calls).toEqual(['${id}.data', '${id}.data']);
+  });
+
+  it('greets the world when it is opened without properties', async () => {
+    const panel = await mountPanel(undefined, async () => ({ message: 'x' }));
+    expect(panel.host.querySelector('h2')?.textContent).toBe('Hello, world!');
   });
 });
 `;
 const commandPanel = {
 	summary: ["A Dolphy extension: two commands in the command palette (Ctrl/⌘+K), a hidden", "data command and a panel — a page of the extension inside the app."],
 	layout: [
-		"- `extension.json` — the manifest (commands and the panel are declared in it);",
-		"- `src/index.ts` — all the extension code: `host` (`defineExtension`, the",
-		"  command handlers) and `panels` (`defineExtensionPanel`); the build",
-		"  splits it into `main.mjs` and `panel.mjs`;",
-		...idsBullet,
+		"- `extension.json` — the manifest: identity only, the build adds `main` and",
+		"  `client`;",
+		"- `src/server.ts` — `server` (`defineServer`): the command handlers; the",
+		"  build writes it to `main.mjs`;",
+		"- `src/client.ts` — `client` (`defineClient`): registers the panel with",
+		"  `addPanel`; `src/StatusPanel.vue` is the single-file Vue component the",
+		"  app draws; the build writes them to `client.mjs`;",
+		"- `vitest.config.ts` — `@vitejs/plugin-vue`, so a test can import `.vue`;",
+		"- `src/index.ts` — re-exports `server` and `client`;",
 		"- `test/index.test.ts` — tests (`vitest`, `happy-dom`)."
 	],
 	files: (id) => ({
-		"extension.json": manifestJson$3(id),
-		"src/index.ts": indexTs$2(id),
-		"test/index.test.ts": indexTestTs$2(id)
-	})
+		"extension.json": manifestJson$4(id),
+		"src/index.ts": indexTs$4(),
+		"src/server.ts": serverTs$2(id),
+		"src/client.ts": clientTs$2(id),
+		"src/StatusPanel.vue": statusPanelVue(id),
+		"vitest.config.ts": vitestConfigTs(),
+		"test/index.test.ts": indexTestTs$3(id)
+	}),
+	devDependencies: {
+		"@vitejs/plugin-vue": "^6.0.7",
+		"vue-tsc": "^3.3.3"
+	},
+	typecheck: "vue-tsc --noEmit"
 };
 
 //#endregion
 //#region packages/create-extension/src/templates/events.ts
-const manifestJson$2 = (id) => `{
+const manifestJson$3 = (id) => `{
   "$schema": "./node_modules/@dolphy-app/extension-api/dist/extension.schema.json",
   "id": "${id}",
   "version": "${INITIAL_VERSION}",
@@ -649,35 +787,19 @@ const manifestJson$2 = (id) => `{
   "name": "Day streak",
   "description": "Counts the days in a row with a closed attempt and shows the streak.",
   "author": "your-github-login",
-  "permissions": ["learning.events"],
-  "tags": ["learning"],
-  "contributes": {
-    "events": [{ "event": "attempt.closed" }],
-    "commands": [
-      { "id": "${id}.show", "title": "Show the streak", "category": "Streak" },
-      { "id": "${id}.data", "title": "Streak data", "palette": false }
-    ],
-    "panels": [{ "id": "${id}.view", "title": "Streak" }]
-  }
+  "tags": ["learning"]
 }
 `;
-const indexTs$1 = (id) => `import {
-  defineExtension,
-  defineExtensionPanel,
-  inActivate,
-  notify,
-  openPanel,
-} from '@dolphy-app/extension-sdk';
-import type { ExtensionPanels } from '@dolphy-app/extension-sdk';
-
-// a \`type\`, not an \`interface\`: an interface has no index signature and is
-// not JSON for \`ctx.storage\`
+const indexTs$3 = () => `export { client } from './client.ts';
+export { server } from './server.ts';
+`;
+const streakTs = () => `// a \`type\`, not an \`interface\`: an interface has no index signature and is
+// not JSON for \`server.storage\`
 export type Streak = {
   days: number;
   last: string;
 };
 
-const KEY = 'streak';
 const DAY_MS = 86_400_000;
 
 const dayOf = (at: number): string => new Date(at).toISOString().slice(0, 10);
@@ -691,69 +813,94 @@ export const advance = (streak: Streak | undefined, at: number): Streak => {
     streak !== undefined && dayOf(Date.parse(streak.last) + DAY_MS) === day;
   return { days: continues ? streak.days + 1 : 1, last: day };
 };
+`;
+const serverTs$1 = (id) => `import { defineServer, notify, openPanel } from '@dolphy-app/extension-sdk';
+import { advance } from './streak.ts';
+import type { Streak } from './streak.ts';
 
-// every event and command declared in extension.json is listed here;
-// \`inActivate\` means "registered in \`activate\`": the handlers need \`ctx\`
-export const host = defineExtension({
-  events: { 'attempt.closed': inActivate },
-  commands: { '${id}.show': inActivate, '${id}.data': inActivate },
-  activate(ctx) {
-    // delivered asynchronously, once per recorded attempt
-    ctx.events.on('attempt.closed', async ({ at, outcome }) => {
-      if (outcome === 'gave-up') return;
-      const streak = await ctx.storage.get<Streak>(KEY);
-      await ctx.storage.set(KEY, advance(streak, at));
-    });
+const KEY = 'streak';
 
-    // data for the panel: hidden from the palette, the panel calls it
-    ctx.commands.register(
-      '${id}.data',
-      async () => (await ctx.storage.get<Streak>(KEY)) ?? { days: 0, last: '' },
-    );
+// runs in the extension host: every call registers a contribution
+export const server = defineServer((s) => {
+  // delivered asynchronously, once per recorded attempt
+  s.on('attempt.closed', async ({ at, outcome }) => {
+    if (outcome === 'gave-up') return;
+    const streak = await s.storage.get<Streak>(KEY);
+    await s.storage.set(KEY, advance(streak, at));
+  });
+
+  // data for the panel: hidden from the palette, the panel calls it
+  s.registerCommand({
+    id: '${id}.data',
+    title: 'Streak data',
+    palette: false,
+    run: async () =>
+      (await s.storage.get<Streak>(KEY)) ?? { days: 0, last: '' },
+  });
 
-    ctx.commands.register('${id}.show', async () => {
-      const streak = await ctx.storage.get<Streak>(KEY);
+  s.registerCommand({
+    id: '${id}.show',
+    title: { en: 'Show the streak', ru: 'Показать серию' },
+    category: 'Streak',
+    run: async () => {
+      const streak = await s.storage.get<Streak>(KEY);
       if (streak === undefined) {
         return notify('No streak yet: finish your first exercise.');
       }
       return openPanel('${id}.view', { days: streak.days });
+    },
+  });
+});
+`;
+const clientTs$1 = (id) => `import { defineClient } from '@dolphy-app/extension-sdk';
+import { StreakPanel } from './streak-panel.ts';
+
+// runs in the app window: the panel is a Vue component the app draws
+export const client = defineClient((c) => {
+  c.addPanel({
+    id: '${id}.view',
+    title: { en: 'Streak', ru: 'Серия' },
+    component: StreakPanel,
+  });
+});
+`;
+const streakPanelTs = (id) => `import { usePanel } from '@dolphy-app/extension-sdk/client';
+import { defineComponent, h, ref, watchEffect } from 'vue';
+import type { Streak } from './streak.ts';
+
+// the only way to the data is \`panel.call\` to the commands of the server
+export const StreakPanel = defineComponent({
+  setup() {
+    const panel = usePanel();
+    const text = ref('');
+    // the command opens the panel again with new properties: ask again
+    watchEffect(async () => {
+      void panel.props;
+      const streak = (await panel.call('${id}.data')) as Streak;
+      text.value =
+        streak.days === 0
+          ? 'No streak yet.'
+          : \`Streak: \${streak.days} days, last day \${streak.last}\`;
     });
+    return () => h('p', text.value);
   },
 });
-
-// the panel runs in an isolated frame: no network, the only way out is \`ctx.call\`
-export const panels = {
-  '${id}.view': defineExtensionPanel({
-    async mount(container, ctx) {
-      const line = container.ownerDocument.createElement('p');
-      container.append(line);
-      const render = async () => {
-        const streak = (await ctx.call('${id}.data')) as Streak;
-        line.textContent =
-          streak.days === 0
-            ? 'No streak yet.'
-            : \`Streak: \${streak.days} days, last day \${streak.last}\`;
-      };
-      // the command opens the panel again with new properties: redraw
-      ctx.signal.addEventListener(
-        'abort',
-        ctx.onProps(() => void render()),
-      );
-      await render();
-    },
-  }),
-} satisfies ExtensionPanels;
 `;
-const indexTestTs$1 = (id) => `// @vitest-environment happy-dom
-import type { LearningEventPayloads } from '@dolphy-app/extension-api';
+const indexTestTs$2 = (id) => `// @vitest-environment happy-dom
+import { PANEL_HANDLE_KEY } from '@dolphy-app/extension-sdk';
+import type {
+  JsonValue,
+  LearningEventPayloads,
+  PanelHandle,
+} from '@dolphy-app/extension-sdk';
 import {
-  createMemoryStorage,
-  loadCommands,
-  loadEvents,
-  loadPanel,
+  createTestClient,
+  createTestServer,
 } from '@dolphy-app/extension-sdk/testing';
 import { afterEach, describe, expect, it } from 'vitest';
-import { host, panels } from '../src/index.ts';
+import { createApp, h, nextTick, shallowReactive } from 'vue';
+import { client, server } from '../src/index.ts';
+import { StreakPanel } from '../src/streak-panel.ts';
 
 const disposables: { dispose(): unknown }[] = [];
 afterEach(async () => {
@@ -772,44 +919,65 @@ const attempt = (day: string, outcome: Attempt['outcome'] = 'passed'): Attempt =
   at: Date.parse(\`\${day}T12:00:00Z\`),
 });
 
-const load = async () => {
-  const storage = createMemoryStorage();
-  const events = await loadEvents(host, {
-    storage,
-    declared: ['attempt.closed'],
+const start = async () => {
+  const running = await createTestServer(server, { extensionId: '${id}' });
+  disposables.push(running);
+  return running;
+};
+
+// draws the panel the way the app does: the handle is provided to the component
+const mountPanel = async (call: PanelHandle['call']) => {
+  const handle = shallowReactive({
+    panelId: '${id}.view',
+    props: undefined as JsonValue | undefined,
+    context: { courseId: null },
+    call,
   });
-  const commands = await loadCommands(host, {
-    storage,
-    declaredCommands: ['${id}.show', '${id}.data'],
-    declaredPanels: ['${id}.view'],
+  const host = document.createElement('div');
+  document.body.append(host);
+  const app = createApp({ render: () => h(StreakPanel) });
+  app.provide(PANEL_HANDLE_KEY, handle);
+  app.mount(host);
+  disposables.push({
+    dispose: () => {
+      app.unmount();
+      host.remove();
+    },
   });
-  disposables.push(events, commands);
-  return { storage, events, commands };
+  // the panel asks a command: wait for the reply, then for the redraw
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await nextTick();
+  return host;
 };
 
 describe('${id}: events and storage', () => {
+  it('subscribes to attempt.closed', async () => {
+    const running = await start();
+    expect(running.registration.events).toEqual(['attempt.closed']);
+  });
+
   it('counts consecutive days, ignores a repeat on the same day', async () => {
-    const { storage, events } = await load();
-    await events.emit('attempt.closed', attempt('2026-10-01'));
-    await events.emit('attempt.closed', attempt('2026-10-01'));
-    await events.emit('attempt.closed', attempt('2026-10-02'));
-    expect(await storage.get('streak')).toEqual({
+    const running = await start();
+    await running.events.emit('attempt.closed', attempt('2026-10-01'));
+    await running.events.emit('attempt.closed', attempt('2026-10-01'));
+    await running.events.emit('attempt.closed', attempt('2026-10-02'));
+    expect(await running.storage.get('streak')).toEqual({
       days: 2,
       last: '2026-10-02',
     });
   });
 
   it('a skipped day starts over; giving up leaves the streak alone', async () => {
-    const { storage, events } = await load();
-    await events.emit('attempt.closed', attempt('2026-10-01'));
-    await events.emit('attempt.closed', attempt('2026-10-02'));
-    await events.emit('attempt.closed', attempt('2026-10-03', 'gave-up'));
-    expect(await storage.get('streak')).toEqual({
+    const running = await start();
+    await running.events.emit('attempt.closed', attempt('2026-10-01'));
+    await running.events.emit('attempt.closed', attempt('2026-10-02'));
+    await running.events.emit('attempt.closed', attempt('2026-10-03', 'gave-up'));
+    expect(await running.storage.get('streak')).toEqual({
       days: 2,
       last: '2026-10-02',
     });
-    await events.emit('attempt.closed', attempt('2026-10-05'));
-    expect(await storage.get('streak')).toEqual({
+    await running.events.emit('attempt.closed', attempt('2026-10-05'));
+    expect(await running.storage.get('streak')).toEqual({
       days: 1,
       last: '2026-10-05',
     });
@@ -818,66 +986,73 @@ describe('${id}: events and storage', () => {
 
 describe('${id}: commands and panel', () => {
   it('without a streak the show command notifies, the data command returns zeros', async () => {
-    const { commands } = await load();
-    expect(await commands.run('${id}.show')).toMatchObject({ kind: 'notify' });
-    expect(await commands.run('${id}.data')).toEqual({
+    const running = await start();
+    expect(await running.commands.run('${id}.show')).toMatchObject({
+      kind: 'notify',
+    });
+    expect(await running.commands.run('${id}.data')).toEqual({
       kind: 'data',
       value: { days: 0, last: '' },
     });
   });
 
   it('with a streak the show command opens the panel with the days', async () => {
-    const { events, commands } = await load();
-    await events.emit('attempt.closed', attempt('2026-10-01'));
-    expect(await commands.run('${id}.show')).toEqual({
+    const running = await start();
+    await running.events.emit('attempt.closed', attempt('2026-10-01'));
+    expect(await running.commands.run('${id}.show')).toEqual({
       kind: 'openPanel',
       panelId: '${id}.view',
       props: { days: 1 },
     });
   });
 
+  it('the client adds the panel the show command opens', async () => {
+    const running = await createTestClient(client, { extensionId: '${id}' });
+    disposables.push(running);
+    expect(running.panels.map((panel) => panel.id)).toEqual(['${id}.view']);
+  });
+
   it('the panel shows what the data command returns', async () => {
-    const { events, commands } = await load();
-    await events.emit('attempt.closed', attempt('2026-10-01'));
-    const panel = await loadPanel(panels, '${id}.view', {
-      call: async (commandId) => {
-        const result = await commands.run(commandId);
-        return result.kind === 'data' ? result.value : undefined;
-      },
+    const running = await start();
+    await running.events.emit('attempt.closed', attempt('2026-10-01'));
+    const panel = await mountPanel(async (commandId) => {
+      const result = await running.commands.run(commandId);
+      return result.kind === 'data' ? (result.value as JsonValue) : undefined;
     });
-    disposables.push(panel);
-    expect(panel.container.querySelector('p')?.textContent).toBe(
+    expect(panel.querySelector('p')?.textContent).toBe(
       'Streak: 1 days, last day 2026-10-01',
     );
   });
 });
 `;
 const events = {
-	summary: [
-		"A Dolphy extension: a day streak. It listens to `attempt.closed`, keeps",
-		"the streak in `ctx.storage`, and shows it with a command and a panel.",
-		"It asks for the `learning.events` permission: without it no event arrives."
-	],
+	summary: ["A Dolphy extension: a day streak. It listens to `attempt.closed`, keeps", "the streak in `server.storage`, and shows it with a command and a panel."],
 	layout: [
-		"- `extension.json` — the manifest (the event, the commands, the panel and",
-		"  the `learning.events` permission are declared in it);",
-		"- `src/index.ts` — all the extension code: `host` (`defineExtension`: the",
-		"  event handler, the commands, `ctx.storage`) and `panels`",
-		"  (`defineExtensionPanel`); the build splits it into `main.mjs` and",
-		"  `panel.mjs`;",
-		...idsBullet,
+		"- `extension.json` — the manifest: identity only, the build adds `main` and",
+		"  `client`;",
+		"- `src/server.ts` — `server` (`defineServer`): the event handler, the",
+		"  commands, `server.storage`; `src/streak.ts` is the streak arithmetic; the",
+		"  build writes them to `main.mjs`;",
+		"- `src/client.ts` — `client` (`defineClient`): registers the panel with",
+		"  `addPanel`; `src/streak-panel.ts` is the Vue component the app draws; the",
+		"  build writes them to `client.mjs`;",
+		"- `src/index.ts` — re-exports `server` and `client`;",
 		"- `test/index.test.ts` — tests (`vitest`, `happy-dom`)."
 	],
 	files: (id) => ({
-		"extension.json": manifestJson$2(id),
-		"src/index.ts": indexTs$1(id),
-		"test/index.test.ts": indexTestTs$1(id)
+		"extension.json": manifestJson$3(id),
+		"src/index.ts": indexTs$3(),
+		"src/streak.ts": streakTs(),
+		"src/server.ts": serverTs$1(id),
+		"src/client.ts": clientTs$1(id),
+		"src/streak-panel.ts": streakPanelTs(id),
+		"test/index.test.ts": indexTestTs$2(id)
 	})
 };
 
 //#endregion
 //#region packages/create-extension/src/templates/exercise.ts
-const manifestJson$1 = (id) => `{
+const manifestJson$2 = (id) => `{
   "$schema": "./node_modules/@dolphy-app/extension-api/dist/extension.schema.json",
   "id": "${id}",
   "version": "${INITIAL_VERSION}",
@@ -885,71 +1060,61 @@ const manifestJson$1 = (id) => `{
   "name": "Text match",
   "description": "Exercise type: the learner types a string that is compared with the expected text.",
   "author": "your-github-login",
-  "tags": ["learning"],
-  "contributes": {
-    "exerciseTypes": [
-      {
-        "id": "${id}",
-        "specSchema": {
-          "type": "object",
-          "required": ["expected"],
-          "additionalProperties": false,
-          "properties": {
-            "expected": { "type": "string", "minLength": 1 },
-            "ignoreCase": { "type": "boolean" }
-          }
-        },
-        "answerSchema": { "type": "string" }
-      }
-    ],
-    "settings": [
-      {
-        "id": "${id}.trim",
-        "type": "boolean",
-        "label": "Ignore spaces around the answer",
-        "default": true
-      }
-    ],
-    "commands": [
-      { "id": "${id}.status", "title": "Show how answers are compared" }
-    ]
-  }
+  "tags": ["learning"]
 }
 `;
-const indexTs = (id) => `import {
-  defineAnswerView,
+const indexTs$2 = () => `export { client } from './client.ts';
+export { server } from './server.ts';
+`;
+const serverTs = (id) => `import {
   defineExerciseType,
-  defineExtension,
-  inActivate,
+  defineServer,
   notify,
 } from '@dolphy-app/extension-sdk';
-import type { ExtensionViews } from '@dolphy-app/extension-sdk';
 
 interface Spec {
   expected: string;
   ignoreCase?: boolean;
 }
 
-// filled from the setting in \`activate\`, read by the handlers below
-const options = { trim: true };
-
-const matches = (answer: string, spec: Spec): boolean => {
-  const given = options.trim ? answer.trim() : answer;
-  if (spec.ignoreCase === true) {
-    return given.toLowerCase() === spec.expected.toLowerCase();
-  }
-  return given === spec.expected;
-};
-
-// extension code: runs in the extension process of the app
-// the schemas from extension.json have already checked \`spec\` and the answer
-// before the handlers run
-// the ids come from extension.json: \`dolphy-ext types\` (and every build)
-// writes them to .dolphy/ids.d.ts, so a misspelt id, a declared id without a
-// handler or an undeclared setting fails \`pnpm typecheck\`
-export const host = defineExtension({
-  exerciseTypes: {
-    '${id}': defineExerciseType<Spec, string, Record<string, never>>({
+// runs in the extension host: every call registers a contribution
+export const server = defineServer((s) => {
+  s.registerSettings([
+    {
+      id: '${id}.trim',
+      type: 'boolean',
+      label: { en: 'Ignore spaces around the answer', ru: 'Игнорировать пробелы вокруг ответа' },
+      default: true,
+    },
+  ]);
+
+  // read when the handler runs, so a change in the settings applies at once
+  const trims = (): boolean => s.settings.get('${id}.trim') === true;
+
+  const matches = (answer: string, spec: Spec): boolean => {
+    const given = trims() ? answer.trim() : answer;
+    if (spec.ignoreCase === true) {
+      return given.toLowerCase() === spec.expected.toLowerCase();
+    }
+    return given === spec.expected;
+  };
+
+  // the app checks \`spec\` and the answer against the schemas before the
+  // handlers run
+  s.registerExerciseType(
+    defineExerciseType<Spec, string, Record<string, never>>({
+      id: '${id}',
+      title: 'Text match',
+      specSchema: {
+        type: 'object',
+        required: ['expected'],
+        additionalProperties: false,
+        properties: {
+          expected: { type: 'string', minLength: 1 },
+          ignoreCase: { type: 'boolean' },
+        },
+      },
+      answerSchema: { type: 'string' },
       project: () => ({}),
       grade: ({ spec, answer }) =>
         matches(answer, spec)
@@ -957,77 +1122,88 @@ export const host = defineExtension({
           : { outcome: 'failed', reason: 'mismatch' },
       referenceAnswer: ({ spec }) => spec.expected,
     }),
-  },
-  // this command is registered in \`activate\`: the marker names the id there
-  commands: { '${id}.status': inActivate },
-  activate(ctx) {
-    options.trim = ctx.settings.get('${id}.trim');
-    ctx.settings.onDidChange((change) => {
-      if (change.id === '${id}.trim') options.trim = change.value;
-    });
-    ctx.commands.register('${id}.status', () =>
+  );
+
+  s.registerCommand({
+    id: '${id}.status',
+    title: { en: 'Show how answers are compared', ru: 'Показать способ сравнения' },
+    run: () =>
       notify(
-        options.trim
+        trims()
           ? 'Answers are compared without the spaces around them.'
           : 'Answers are compared exactly as typed.',
       ),
-    );
-  },
+  });
 });
+`;
+const clientTs = (id) => `import { defineClient } from '@dolphy-app/extension-sdk';
+import { TextAnswer } from './text-answer.ts';
 
-// the answer input: runs in the app window; the build defines the custom
-// element with the tag from extension.json
-export const views = {
-  '${id}': defineAnswerView((api, initial) => {
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.spellcheck = false;
-    if (api.label !== null) input.setAttribute('aria-label', api.label);
-
-    const applyValue = (value: unknown) => {
-      input.value = typeof value === 'string' ? value : '';
-    };
-    let appliedValue = initial.value;
-    applyValue(appliedValue);
-    input.disabled = initial.disabled;
-
-    input.addEventListener('input', () => {
-      api.setAnswer(input.value, input.value.trim().length > 0);
-    });
-    input.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') api.submit();
-    });
-    api.root.append(input);
-
-    return {
-      update: (props) => {
-        input.disabled = props.disabled;
-        // apply the value only when the app really changed it
-        if (props.value !== appliedValue) {
-          appliedValue = props.value;
-          applyValue(appliedValue);
-        }
+// runs in the app window: the answer view is a Vue component for the exercise
+// type that \`server\` registers
+export const client = defineClient((c) => {
+  c.addAnswerView('${id}', TextAnswer);
+});
+`;
+const textAnswerTs = () => `import type { AnswerChange } from '@dolphy-app/extension-sdk';
+import { defineComponent, h, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+// the answer input: a Vue component the app draws in its own window tree. It
+// takes the props of \`AnswerViewProps\` and reports the answer with \`change\`;
+// \`submit\` asks the app to check it
+export const TextAnswer = defineComponent({
+  props: {
+    view: { type: null },
+    value: { type: null },
+    disabled: Boolean,
+    verdict: { type: null },
+    label: { type: String as PropType<string | null>, default: null },
+  },
+  emits: ['change', 'submit'],
+  setup(props, { emit }) {
+    const asText = (value: unknown): string =>
+      typeof value === 'string' ? value : '';
+    // what is typed stays on screen even if the app never returns \`value\`
+    const text = ref(asText(props.value));
+    watch(
+      () => props.value,
+      (value) => {
+        text.value = asText(value);
       },
-    };
-  }),
-} satisfies ExtensionViews;
+    );
+    return () =>
+      h('input', {
+        type: 'text',
+        spellcheck: false,
+        value: text.value,
+        disabled: props.disabled,
+        'aria-label': props.label ?? undefined,
+        onInput: (event: Event) => {
+          text.value = (event.target as HTMLInputElement).value;
+          const change: AnswerChange<string> = {
+            value: text.value,
+            complete: text.value.trim().length > 0,
+          };
+          emit('change', change);
+        },
+        onKeydown: (event: KeyboardEvent) => {
+          if (event.key === 'Enter') emit('submit');
+        },
+      });
+  },
+});
 `;
-const indexTestTs = (id) => `// @vitest-environment happy-dom
-import type { SettingContribution } from '@dolphy-app/extension-sdk';
+const indexTestTs$1 = (id) => `// @vitest-environment happy-dom
 import {
-  createMemorySettings,
   createSchemaValidator,
-  loadCommands,
-  loadExerciseType,
-  loadView,
+  createTestClient,
+  createTestServer,
 } from '@dolphy-app/extension-sdk/testing';
 import { afterEach, describe, expect, it } from 'vitest';
-import manifest from '../extension.json';
-import { host, views } from '../src/index.ts';
-
-const [contribution] = manifest.contributes.exerciseTypes;
-const validateSpec = createSchemaValidator(contribution.specSchema);
-const validateAnswer = createSchemaValidator(contribution.answerSchema);
+import { createApp, h, nextTick, reactive } from 'vue';
+import { client, server } from '../src/index.ts';
+import { TextAnswer } from '../src/text-answer.ts';
 
 const spec = { expected: 'Hello' };
 
@@ -1036,31 +1212,66 @@ afterEach(async () => {
   await Promise.all(disposables.splice(0).map((item) => item.dispose()));
 });
 
-const newSettings = () =>
-  createMemorySettings(manifest.contributes.settings as SettingContribution[]);
-
-const load = async (settings = newSettings()) => {
-  const type = await loadExerciseType(host, '${id}', { settings });
-  disposables.push(type);
-  return type;
+const start = async (settingValues = {}) => {
+  const running = await createTestServer(server, {
+    extensionId: '${id}',
+    settingValues,
+  });
+  disposables.push(running);
+  return running;
 };
 
+// mounts the answer view the way the app does: the props of \`AnswerViewProps\`
+// in, the \`change\` and \`submit\` events out
 const mount = async (label?: string) => {
-  const view = await loadView(views, '${id}', label === undefined ? {} : { label });
-  disposables.push(view);
-  const input = view.query<HTMLInputElement>('input');
+  const props = reactive<Record<string, unknown>>({
+    view: {},
+    value: undefined,
+    disabled: false,
+    verdict: null,
+    label: label ?? null,
+  });
+  const changes: unknown[] = [];
+  let submissions = 0;
+  const host = document.createElement('div');
+  document.body.append(host);
+  const app = createApp({
+    render: () =>
+      h(TextAnswer, {
+        ...props,
+        onChange: (change: unknown) => changes.push(change),
+        onSubmit: () => (submissions += 1),
+      }),
+  });
+  app.mount(host);
+  disposables.push({
+    dispose: () => {
+      app.unmount();
+      host.remove();
+    },
+  });
+  await nextTick();
+  const input = host.querySelector('input');
   if (input === null) throw new Error('no input');
-  return { view, input };
+  return {
+    input,
+    changes,
+    submissions: () => submissions,
+    update: async (next: Record<string, unknown>) => {
+      Object.assign(props, next);
+      await nextTick();
+    },
+  };
 };
 
 describe('${id}: handler', () => {
   it('project does not reveal the reference', async () => {
-    const type = await load();
+    const type = (await start()).exerciseType('${id}');
     expect(await type.project(spec)).toEqual({});
   });
 
   it('grade: a match passes, a mismatch does not', async () => {
-    const type = await load();
+    const type = (await start()).exerciseType('${id}');
     expect(await type.grade({ spec, answer: 'Hello' })).toEqual({
       outcome: 'passed',
     });
@@ -1071,7 +1282,7 @@ describe('${id}: handler', () => {
   });
 
   it('grade: ignoreCase turns case sensitivity off', async () => {
-    const type = await load();
+    const type = (await start()).exerciseType('${id}');
     const relaxed = { ...spec, ignoreCase: true };
     expect(await type.grade({ spec: relaxed, answer: 'hELLO' })).toEqual({
       outcome: 'passed',
@@ -1079,7 +1290,7 @@ describe('${id}: handler', () => {
   });
 
   it('referenceAnswer passes the check itself', async () => {
-    const type = await load();
+    const type = (await start()).exerciseType('${id}');
     const reference = await type.referenceAnswer(spec);
     expect(reference).toEqual({ found: true, answer: 'Hello' });
     if (!reference.found) throw new Error('reference expected');
@@ -1091,12 +1302,12 @@ describe('${id}: handler', () => {
 
 describe('${id}: settings and commands', () => {
   it('the trim setting decides whether the spaces around an answer count', async () => {
-    const settings = newSettings();
-    const type = await load(settings);
+    const running = await start();
+    const type = running.exerciseType('${id}');
     expect(await type.grade({ spec, answer: ' Hello ' })).toEqual({
       outcome: 'passed',
     });
-    await settings.set('${id}.trim', false);
+    await running.settings.set('${id}.trim', false);
     expect(await type.grade({ spec, answer: ' Hello ' })).toEqual({
       outcome: 'failed',
       reason: 'mismatch',
@@ -1104,29 +1315,40 @@ describe('${id}: settings and commands', () => {
   });
 
   it('the status command reports the current mode', async () => {
-    const settings = newSettings();
-    const commands = await loadCommands(host, {
-      declaredCommands: ['${id}.status'],
-      settings,
-    });
-    disposables.push(commands);
-    expect(await commands.run('${id}.status')).toEqual({
+    const running = await start();
+    expect(await running.commands.run('${id}.status')).toEqual({
       kind: 'notify',
       text: 'Answers are compared without the spaces around them.',
     });
-    await settings.set('${id}.trim', false);
-    expect(await commands.run('${id}.status')).toEqual({
+    await running.settings.set('${id}.trim', false);
+    expect(await running.commands.run('${id}.status')).toEqual({
       kind: 'notify',
       text: 'Answers are compared exactly as typed.',
     });
   });
+
+  it('a user value of the setting replaces the default', async () => {
+    const running = await start({ '${id}.trim': false });
+    expect(await running.commands.run('${id}.status')).toMatchObject({
+      text: 'Answers are compared exactly as typed.',
+    });
+  });
 });
 
 describe('${id}: schemas', () => {
+  const registered = async () => {
+    const [type] = (await start()).registration.exerciseTypes;
+    if (type === undefined) throw new Error('exercise type expected');
+    return {
+      validateSpec: createSchemaValidator(type.specSchema),
+      validateAnswer: createSchemaValidator(type.answerSchema),
+    };
+  };
+
   it.each([[{ expected: 'a' }], [{ expected: 'a', ignoreCase: true }]])(
     'spec %j is valid',
-    (value) => {
-      expect(validateSpec(value)).toEqual([]);
+    async (value) => {
+      expect((await registered()).validateSpec(value)).toEqual([]);
     },
   );
 
@@ -1135,49 +1357,58 @@ describe('${id}: schemas', () => {
     ['empty expected', { expected: '' }],
     ['ignoreCase is not a boolean', { expected: 'a', ignoreCase: 'yes' }],
     ['an extra field', { expected: 'a', extra: 1 }],
-  ])('spec: %s is rejected', (_name, value) => {
-    expect(validateSpec(value)).not.toEqual([]);
+  ])('spec: %s is rejected', async (_name, value) => {
+    expect((await registered()).validateSpec(value)).not.toEqual([]);
   });
 
-  it('answer: a string is valid, a number is not', () => {
+  it('answer: a string is valid, a number is not', async () => {
+    const { validateAnswer } = await registered();
     expect(validateAnswer('text')).toEqual([]);
     expect(validateAnswer(42)).not.toEqual([]);
   });
 });
 
+describe('${id}: client', () => {
+  it('adds the answer view for the exercise type', async () => {
+    const running = await createTestClient(client, { extensionId: '${id}' });
+    disposables.push(running);
+    expect(running.answerViews.get('${id}')).toBe(TextAnswer);
+  });
+});
+
 describe('${id}: view', () => {
   it('typing reports the answer; an empty input is incomplete', async () => {
-    const { view, input } = await mount();
+    const { changes, input } = await mount();
     input.value = 'Hello';
     input.dispatchEvent(new Event('input'));
     input.value = '  ';
     input.dispatchEvent(new Event('input'));
-    expect(view.changes).toEqual([
+    expect(changes).toEqual([
       { value: 'Hello', complete: true },
       { value: '  ', complete: false },
     ]);
   });
 
   it('Enter submits the answer', async () => {
-    const { view, input } = await mount();
+    const { input, submissions } = await mount();
     input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-    expect(view.submissions).toBe(1);
+    expect(submissions()).toBe(1);
   });
 
   it('disabled blocks the input', async () => {
-    const { view, input } = await mount();
-    await view.update({ disabled: true });
+    const { input, update } = await mount();
+    await update({ disabled: true });
     expect(input.disabled).toBe(true);
   });
 
   it('value restores the answer without events', async () => {
-    const { view, input } = await mount();
-    await view.update({ value: 'Hello' });
+    const { changes, input, update } = await mount();
+    await update({ value: 'Hello' });
     expect(input.value).toBe('Hello');
-    expect(view.changes).toEqual([]);
+    expect(changes).toEqual([]);
   });
 
-  it('the aria-label of the host goes to the input', async () => {
+  it('the label of the app becomes the aria-label of the input', async () => {
     const { input } = await mount('Your answer');
     expect(input.getAttribute('aria-label')).toBe('Your answer');
   });
@@ -1186,19 +1417,212 @@ describe('${id}: view', () => {
 const exercise = {
 	summary: ["A Dolphy extension: the \"text match\" exercise type (the learner types a", "string, it is compared with `spec.expected`), a setting and a command."],
 	layout: [
-		"- `extension.json` — the manifest (the `spec` and answer schemas are written",
-		"  in it);",
-		"- `src/index.ts` — all the extension code: `host` (`defineExtension` +",
-		"  `defineExerciseType`) and `views` (`defineAnswerView`); the build splits",
-		"  it into `main.mjs` and `view.mjs`;",
-		...idsBullet,
+		"- `extension.json` — the manifest: identity only, the build adds `main` and",
+		"  `client`;",
+		"- `src/server.ts` — `server` (`defineServer`): the exercise type with the",
+		"  `spec` and answer schemas, the setting and the command; the build writes",
+		"  it to `main.mjs`;",
+		"- `src/client.ts` — `client` (`defineClient`): adds the answer view with",
+		"  `addAnswerView`; `src/text-answer.ts` is the Vue component that is the",
+		"  answer input; the build writes them to `client.mjs`;",
+		"- `src/index.ts` — re-exports `server` and `client`;",
 		"- `test/index.test.ts` — tests (`vitest`, `happy-dom`)."
 	],
+	files: (id) => ({
+		"extension.json": manifestJson$2(id),
+		"src/index.ts": indexTs$2(),
+		"src/server.ts": serverTs(id),
+		"src/client.ts": clientTs(id),
+		"src/text-answer.ts": textAnswerTs(),
+		"test/index.test.ts": indexTestTs$1(id)
+	})
+};
+
+//#endregion
+//#region packages/create-extension/src/templates/react-panel.ts
+const manifestJson$1 = (id) => `{
+  "$schema": "./node_modules/@dolphy-app/extension-api/dist/extension.schema.json",
+  "id": "${id}",
+  "version": "${INITIAL_VERSION}",
+  "apiVersion": 1,
+  "name": "Hello React panel",
+  "description": "Palette commands that greet the learner and open a panel drawn with React.",
+  "author": "your-github-login",
+  "tags": ["productivity"]
+}
+`;
+const configJson = () => `{
+  "frameworks": ["react"]
+}
+`;
+const indexTs$1 = () => `export { client } from './client.tsx';
+export { server } from './server.ts';
+`;
+const clientTsx = (id) => `import { defineClient } from '@dolphy-app/extension-sdk';
+import type { PanelHandle, PanelProps } from '@dolphy-app/extension-sdk';
+import { reactComponent, usePanel } from '@dolphy-app/extension-sdk/react';
+import { useEffect, useState } from 'react';
+
+// \`reactComponent\` draws this component with React and gives it the props of
+// the panel; \`usePanel()\` is the handle with \`call\` for the commands of the
+// extension
+const HelloPanel = ({ props }: PanelProps) => {
+  const panel = usePanel();
+  const [message, setMessage] = useState('');
+  // the app opens the panel again with new properties: the component renders again
+  const name =
+    typeof props === 'object' && props !== null && 'name' in props
+      ? String(props.name)
+      : 'world';
+
+  const load = async () => {
+    const data = await panel.call('${id}.data');
+    setMessage((data as { message: string }).message);
+  };
+  useEffect(() => {
+    void load();
+  }, []);
+
+  return (
+    <section>
+      <h2>Hello, {name}!</h2>
+      <p>{message}</p>
+      <button type="button" onClick={() => void load()}>
+        Reload
+      </button>
+    </section>
+  );
+};
+
+// runs in the app window: the panel is a \`Mountable\` the app draws into its own element
+export const client = defineClient((c) => {
+  c.addPanel({
+    id: '${id}.view',
+    title: { en: 'Hello', ru: 'Привет' },
+    component: reactComponent<PanelProps, PanelHandle>(HelloPanel),
+  });
+});
+`;
+const indexTestTs = (id) => `// @vitest-environment happy-dom
+import { isMountable } from '@dolphy-app/extension-sdk';
+import type { PanelHandle, PanelProps } from '@dolphy-app/extension-sdk';
+import {
+  createTestClient,
+  createTestServer,
+  mountForTest,
+} from '@dolphy-app/extension-sdk/testing';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { client, server } from '../src/index.ts';
+
+const disposables: { dispose(): unknown }[] = [];
+afterEach(async () => {
+  await Promise.all(disposables.splice(0).map((item) => item.dispose()));
+});
+
+${serverTestsTs(id)}
+
+describe('${id}: client', () => {
+  it('adds the panel that the open command points to', async () => {
+    const running = await createTestClient(client, { extensionId: '${id}' });
+    disposables.push(running);
+    expect(running.panels.map((panel) => panel.id)).toEqual(['${id}.view']);
+    expect(isMountable(running.panels[0]?.component)).toBe(true);
+  });
+});
+
+// draws the panel the way the app does: into an element, on a context the test controls
+const mountPanel = async (
+  props: PanelProps['props'],
+  call: PanelHandle['call'],
+) => {
+  const running = await createTestClient(client, { extensionId: '${id}' });
+  disposables.push(running);
+  const component = running.panels[0]?.component;
+  if (!isMountable(component)) throw new Error('the panel is not a Mountable');
+  const panelProps: PanelProps = {
+    panelId: '${id}.view',
+    props,
+    context: { courseId: null },
+  };
+  const mounted = await mountForTest(component, {
+    props: panelProps,
+    handle: { ...panelProps, call },
+  });
+  disposables.push({ dispose: () => mounted.unmount() });
+  return { mounted, panelProps };
+};
+
+describe('${id}: panel', () => {
+  it('shows the data command reply and follows new properties', async () => {
+    const calls: string[] = [];
+    const { mounted, panelProps } = await mountPanel(
+      { name: 'Ada' },
+      async (commandId) => {
+        calls.push(commandId);
+        return { message: 'Hello from the test' };
+      },
+    );
+    expect(mounted.el.querySelector('h2')?.textContent).toBe('Hello, Ada!');
+    await vi.waitFor(() =>
+      expect(mounted.el.querySelector('p')?.textContent).toBe(
+        'Hello from the test',
+      ),
+    );
+    expect(calls).toEqual(['${id}.data']);
+
+    mounted.setProps({ ...panelProps, props: { name: 'Grace' } });
+    expect(mounted.el.querySelector('h2')?.textContent).toBe('Hello, Grace!');
+  });
+
+  it('greets the world when it is opened without properties', async () => {
+    const { mounted } = await mountPanel(undefined, async () => ({
+      message: 'x',
+    }));
+    expect(mounted.el.querySelector('h2')?.textContent).toBe('Hello, world!');
+  });
+
+  it('asks the data command again when the button is pressed', async () => {
+    const calls: string[] = [];
+    const { mounted } = await mountPanel(undefined, async (commandId) => {
+      calls.push(commandId);
+      return { message: 'x' };
+    });
+    mounted.el.querySelector('button')?.click();
+    await vi.waitFor(() => expect(calls).toEqual(['${id}.data', '${id}.data']));
+  });
+});
+`;
+const reactPanel = {
+	summary: ["A Dolphy extension: two commands in the command palette (Ctrl/⌘+K), a hidden", "data command and a panel drawn with React instead of Vue."],
+	layout: [
+		"- `extension.json` — the manifest: identity only, the build adds `main` and",
+		"  `client`;",
+		"- `dolphy-ext.config.json` — `\"frameworks\": [\"react\"]` switches the React",
+		"  build on (`.tsx` files, `react` and `react-dom` go into `client.mjs`);",
+		"- `src/server.ts` — `server` (`defineServer`): the command handlers; the",
+		"  build writes it to `main.mjs`;",
+		"- `src/client.tsx` — `client` (`defineClient`): registers the panel with",
+		"  `addPanel`; `reactComponent` from `@dolphy-app/extension-sdk/react` turns",
+		"  the React component into what the app draws; the build writes it to",
+		"  `client.mjs`;",
+		"- `src/index.ts` — re-exports `server` and `client`;",
+		"- `test/index.test.ts` — tests (`vitest`, `happy-dom`, `mountForTest`)."
+	],
 	files: (id) => ({
 		"extension.json": manifestJson$1(id),
-		"src/index.ts": indexTs(id),
+		"dolphy-ext.config.json": configJson(),
+		"src/index.ts": indexTs$1(),
+		"src/server.ts": serverTs$2(id),
+		"src/client.tsx": clientTsx(id),
 		"test/index.test.ts": indexTestTs(id)
-	})
+	}),
+	devDependencies: {
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		react: "^19.3.0",
+		"react-dom": "^19.3.0"
+	},
+	compilerOptions: { jsx: "\"react-jsx\"" }
 };
 
 //#endregion
@@ -1211,32 +1635,42 @@ const manifestJson = (id) => `{
   "name": "Midnight",
   "description": "A dark color theme with an amber accent for the Dolphy app.",
   "author": "your-github-login",
-  "tags": ["theme"],
-  "contributes": {
-    "themes": [
-      {
-        "id": "${id}",
-        "label": "Midnight",
-        "dark": true,
-        "colors": {
-          "background": "#101820",
-          "surface": "#1B2733",
-          "on-background": "#E6EDF3",
-          "on-surface": "#E6EDF3",
-          "primary": "#FFB000",
-          "on-primary": "#101820"
-        },
-        "variables": { "border-opacity": 0.2 }
-      }
-    ]
-  }
+  "tags": ["theme"]
 }
 `;
-const themeTestTs = (id) => `import { describe, expect, it } from 'vitest';
-import manifest from '../extension.json';
+const themeTs = (id) => `import type { ThemeRegistration } from '@dolphy-app/extension-sdk';
+
+// the allowed color and variable keys are \`THEME_COLOR_KEYS\` and
+// \`THEME_VARIABLE_KEYS\` of '@dolphy-app/extension-sdk'
+export const midnight: ThemeRegistration = {
+  id: '${id}',
+  label: 'Midnight',
+  dark: true,
+  colors: {
+    background: '#101820',
+    surface: '#1B2733',
+    'on-background': '#E6EDF3',
+    'on-surface': '#E6EDF3',
+    primary: '#FFB000',
+    'on-primary': '#101820',
+  },
+  variables: { 'border-opacity': 0.2 },
+};
+`;
+const indexTs = () => `import { defineClient } from '@dolphy-app/extension-sdk';
+import { midnight } from './theme.ts';
 
-const [theme] = manifest.contributes.themes;
-const colors: Record<string, string> = theme.colors;
+// runs in the app window: a theme is data, there is no server part
+export const client = defineClient((c) => {
+  c.addTheme(midnight);
+});
+`;
+const themeTestTs = (id) => `import { createTestClient } from '@dolphy-app/extension-sdk/testing';
+import { describe, expect, it } from 'vitest';
+import { client } from '../src/index.ts';
+import { midnight } from '../src/theme.ts';
+
+const colors = midnight.colors;
 
 // WCAG relative luminance of a #rrggbb color
 const luminance = (hex: string): number => {
@@ -1255,6 +1689,12 @@ const contrast = (foreground: string, background: string): number => {
 };
 
 describe('${id}: theme', () => {
+  it('the client adds the theme', async () => {
+    const running = await createTestClient(client, { extensionId: '${id}' });
+    expect(running.themes).toEqual([midnight]);
+    await running.dispose();
+  });
+
   it.each([
     ['on-surface', 'surface'],
     ['on-background', 'background'],
@@ -1267,20 +1707,25 @@ describe('${id}: theme', () => {
   it('a dark theme has a dark background and a light text', () => {
     const background = luminance(colors['background'] as string);
     const text = luminance(colors['on-background'] as string);
-    expect(theme.dark ? background < text : background > text).toBe(true);
+    expect(midnight.dark ? background < text : background > text).toBe(true);
   });
 });
 `;
 const theme = {
-	summary: ["A Dolphy extension: a color theme (\"Midnight\"). A theme is data only, so", "there is no code to build; the test checks the text contrast."],
+	summary: ["A Dolphy extension: a color theme (\"Midnight\"). A theme is data the client", "part registers with `addTheme`; the test checks the text contrast."],
 	layout: [
-		"- `extension.json` — the manifest: the theme `colors` (allowed keys are",
-		"  listed in the Dolphy extension guide) and `variables`;",
-		"- `test/theme.test.ts` — checks the contrast of the text colors",
-		"  (`vitest`); there is no `src/`, a theme has no code."
+		"- `extension.json` — the manifest: identity only, the build adds `client`;",
+		"- `src/theme.ts` — the theme: `colors` (the allowed keys are listed in the",
+		"  Dolphy extension guide) and `variables`;",
+		"- `src/index.ts` — `client` (`defineClient`), which adds the theme; the",
+		"  build writes it to `client.mjs`; there is no server part;",
+		"- `test/theme.test.ts` — checks the registration and the contrast of the",
+		"  text colors (`vitest`)."
 	],
 	files: (id) => ({
 		"extension.json": manifestJson(id),
+		"src/theme.ts": themeTs(id),
+		"src/index.ts": indexTs(),
 		"test/theme.test.ts": themeTestTs(id)
 	})
 };
@@ -1291,6 +1736,7 @@ const TEMPLATES = {
 	exercise,
 	theme,
 	"command-panel": commandPanel,
+	"react-panel": reactPanel,
 	events,
 	blank
 };
@@ -1299,7 +1745,7 @@ const isTemplateName = (name) => TEMPLATE_NAMES.includes(name);
 const MAX_ID_CHARS = 64;
 /** Without a build (sources, `--local`) the package version is a placeholder. */
 const UNPUBLISHED_VERSION = "^0.0.0";
-const builtPackageVersion = () => "0.4.0";
+const builtPackageVersion = () => "0.5.0";
 var GenerateError = class extends Error {
 	code;
 	constructor(code, message) {
@@ -1357,8 +1803,8 @@ const renderProject = (input) => {
 	const { id, template = DEFAULT_TEMPLATE } = input;
 	const module = TEMPLATES[template];
 	return new Map([
-		["package.json", packageJson(input)],
-		["tsconfig.json", tsconfigJson()],
+		["package.json", packageJson(input, module)],
+		["tsconfig.json", tsconfigJson(module)],
 		...Object.entries(module.files(id)),
 		["README.md", readme(id, module)],
 		["AGENTS.md", agentsMd(id, module)],
@@ -1404,7 +1850,7 @@ const USAGE = `usage: create-dolphy-extension <dir> [--id <id>] [--template <nam
   <dir>              new project directory (must be empty or not exist)
   --id <id>          extension id (default: kebab-case of the directory name)
   --template <name>  project kind: exercise (default), theme, command-panel,
-                     events or blank
+                     react-panel, events or blank
   --local <repoRoot> Dolphy repository root: @dolphy-app/extension-sdk and
                      @dolphy-app/extension-tools are linked as link:<repoRoot>/packages/...
   --help             show this help