@morphemecms/cms 0.4.0 → 0.5.0-next-20261104200208

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @morphemecms/cms
 
+## 0.5.0-next-20261104200208
+
+### Minor Changes
+
+- 322a404: Connect a site to the Morpheme store from the editor's Appstore. A key set by hand in MORPHEME_STORE_KEY still works.
+
 ## 0.4.0
 
 ### Minor Changes

package/bin/morpheme.mjs

@@ -12,7 +12,7 @@ const COMMANDS = {
   'after-build': ['scheduled-list', 'link-counts', 'page-colors'],
   'check:content': ['check-content'],
   'check:editor': ['editor-roundtrip'],
-  'check:worker': ['check-worker', 'check-consent', 'check-store', 'check-cms-update'],
+  'check:worker': ['check-worker', 'check-consent', 'check-store', 'check-cms-update', 'check-store-connection'],
   'check:screens': ['editor-screens'],
   'check:themes': ['check-themes'],
   'check:demo': ['check-demo'],
@@ -24,7 +24,7 @@ const COMMANDS = {
 };
 
 // Node warns that node:sqlite is experimental, which the consent log's check uses as D1.
-const QUIET = new Set(['check-consent']);
+const QUIET = new Set(['check-consent', 'check-store-connection']);
 
 const [command, ...args] = process.argv.slice(2);
 if (!COMMANDS[command]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.4.0",
+  "version": "0.5.0-next-20261104200208",
   "description": "Morpheme CMS: the editor for a site built with Astro, its screens, its blocks and the rules a site gives it. See README.md.",
   "license": "MIT",
   "author": "Lars Adolfsen",

package/scripts/built-site.mjs

@@ -124,19 +124,36 @@ const CMS_STATUS = {
   notes: [{ version: '99.0.0', text: 'A made-up note for the checks.\n\nA second paragraph.' }],
 };
 
+// The site's key to the store (/api/store/connection, packages/editor/worker/store-connection.js), made up, in the three
+// states "Appstore" shows: a key from the button, no key and the editor may connect, no key and it may only read. A POST
+// or DELETE moves a fake store between the first two, as the Worker would.
+export const STORE_STATES = {
+  button: { connected: true, by: 'button', site: 'site_sample', since: '2026-11-04T08:00:00.000Z', mayChange: true },
+  open: { connected: false, mayChange: true },
+  readOnly: { connected: false, mayChange: false },
+};
+
 /** Opens the editor (/editor/) of the site at `site` in `page`, signed in, with GitHub answered from the files on disk
- * (`texts`: some with other texts), and waits until it has loaded the site. */
-export async function openEditor(page, site, texts = {}) {
+ * (`texts`: some with other texts), and waits until it has loaded the site. `store`: the state of the site's key to the
+ * store (a key of STORE_STATES). */
+export async function openEditor(page, site, texts = {}, store = 'button') {
+  let state = STORE_STATES[store];
   // R2 caching under "Avanceret": Cloudflare has the bucket (packages/editor/worker/r2-status.js).
   await page.route(`${site}/api/r2?**`, (r) =>
     r.fulfill({ contentType: 'application/json', body: JSON.stringify({ bound: false, bucket: 'ready' }) }),
   );
   await page.route(`${site}/api/cms`, (r) => r.fulfill({ contentType: 'application/json', body: JSON.stringify(CMS_STATUS) }));
-  await page.route(`${site}/api/store/**`, (r) =>
-    new URL(r.request().url()).pathname === '/api/store/catalog'
-      ? r.fulfill({ contentType: 'application/json', body: JSON.stringify(STORE_CATALOG) })
-      : r.fulfill({ status: 404 }),
-  );
+  await page.route(`${site}/api/store/**`, (r) => {
+    const path = new URL(r.request().url()).pathname;
+    const answer = (body) => r.fulfill({ contentType: 'application/json', body: JSON.stringify(body) });
+    if (path === '/api/store/catalog') return answer(state.connected ? STORE_CATALOG : { connected: false });
+    if (path === '/api/store/connection') {
+      if (r.request().method() === 'POST') state = STORE_STATES.button;
+      if (r.request().method() === 'DELETE') state = STORE_STATES.open;
+      return answer(state);
+    }
+    return r.fulfill({ status: 404 });
+  });
   await page.route(`${site}/api/github/**`, (r) => {
     const route = new URL(r.request().url()).pathname.slice('/api/github/'.length);
     const found = workerAnswer(route, JSON.parse(r.request().postData() || '{}'), texts);

package/scripts/check-store-connection.mjs

@@ -0,0 +1,226 @@
+// Checks how the site's Worker gets and keeps a store key from "Connect to Morpheme" (packages/editor/worker/store-connection.js):
+// /api/store/connection for GET, POST and DELETE, who may do what, the table with the key (D1 played by Node's SQLite), and
+// storeKey(). GitHub and the store are played by a fake fetch that records each request; nothing goes to either.
+// Run: npm run check:worker
+import { DatabaseSync } from 'node:sqlite';
+import { workerModules } from './worker-modules.mjs';
+
+const [{ handleConnection, storeKey, forgetKey }] = await workerModules('store-connection.js', 'session.js', 'store.js');
+
+const problems = [];
+const expect = (ok, what) => ok || problems.push(what);
+
+/** D1, as much of it as the Worker uses, on an SQLite database in memory. */
+function d1() {
+  const db = new DatabaseSync(':memory:');
+  const statement = (sql, args = []) => ({
+    bind: (...values) => statement(sql, values),
+    run: async () => ({ meta: { changes: Number(db.prepare(sql).run(...args).changes) } }),
+    all: async () => ({ results: db.prepare(sql).all(...args) }),
+    first: async (column) => db.prepare(sql).get(...args)?.[column] ?? null,
+  });
+  return { db, prepare: (sql) => statement(sql), batch: async (list) => Promise.all(list.map((s) => s.run())) };
+}
+const rowsOf = (store) => store.db.prepare('SELECT site, key FROM store_connection').all();
+
+const SITE = `site_${'a1'.repeat(12)}`;
+const KEY = 'isk_x';
+const HAND = 'hand-key-for-test';
+
+/** A fake fetch: GitHub says what `repoAccess` says; the store answers with `store(url, init)`. `storeCalls` records its requests. */
+function world({ repoAccess = { pull: true, push: true }, store = () => Response.json({ site: SITE, key: KEY }, { status: 201 }) } = {}) {
+  const storeCalls = [];
+  const ask = async (url, init = {}) => {
+    if (String(url).startsWith('https://api.github.com/')) return Response.json({ permissions: repoAccess });
+    storeCalls.push({ url: String(url), method: init.method ?? 'GET', headers: init.headers ?? {}, body: init.body });
+    return store(String(url), init);
+  };
+  return { ask, storeCalls };
+}
+
+let n = 0;
+/** A request from the editor's page; a fresh token each time (the Worker remembers what GitHub said about a token). */
+const call = async (w, method, env, { signedIn = true } = {}) => {
+  const request = new Request('https://site.example/api/store/connection', {
+    method,
+    headers: { ...(signedIn ? { cookie: `editor_session=token-${++n}` } : {}), 'sec-fetch-site': 'same-origin' },
+  });
+  const res = await handleConnection(request, env, {}, w.ask);
+  const text = await res.text();
+  return { res, text, body: text.startsWith('{') ? JSON.parse(text) : null };
+};
+/** An env with a fresh database, with a row for each [site, key] given. */
+const envWith = async (rows = [], extra = {}) => {
+  const CONSENT = d1();
+  if (rows.length) {
+    await call(world(), 'GET', { CONSENT }); // makes the table on first use
+    for (const [site, key] of rows) {
+      CONSENT.db.prepare('INSERT INTO store_connection (site, key, connected) VALUES (?, ?, ?)').run(site, key, '2026-11-04T10:00:00.000Z');
+    }
+  }
+  return { CONSENT, ...extra };
+};
+
+// Signed out: 401 for each method, and the store is not asked.
+for (const method of ['GET', 'POST', 'DELETE']) {
+  const w = world();
+  const { res } = await call(w, method, await envWith(), { signedIn: false });
+  expect(res.status === 401, `uden login var ${method} ${res.status}, ikke 401`);
+  expect(w.storeCalls.length === 0, `uden login blev butikken spurgt (${method})`);
+}
+
+// Not even allowed to read: 403.
+{
+  const w = world({ repoAccess: { pull: false, push: false } });
+  const { res } = await call(w, 'GET', await envWith());
+  expect(res.status === 403, `uden læseret var svaret ${res.status}, ikke 403`);
+}
+
+// Read-only: GET works, POST and DELETE are 403, and the store is not asked.
+{
+  const w = world({ repoAccess: { pull: true, push: false } });
+  const env = await envWith();
+  const get = await call(w, 'GET', env);
+  expect(get.res.status === 200 && get.body.connected === false && get.body.mayChange === false, `GET med kun læseret gav ${get.text}`);
+  for (const method of ['POST', 'DELETE']) {
+    const { res } = await call(w, method, env);
+    expect(res.status === 403, `${method} med kun læseret gav ${res.status}, ikke 403`);
+  }
+  expect(w.storeCalls.length === 0, 'med kun læseret blev butikken spurgt');
+  expect(rowsOf(env.CONSENT).length === 0, 'med kun læseret blev der gemt en række');
+}
+
+// Connect: the store gets the origin and owner/name; the row has the key; no answer has the key; a second connect is 409.
+{
+  const w = world();
+  const env = await envWith();
+  const { res, text, body } = await call(w, 'POST', env);
+  expect(
+    res.status === 200 &&
+      body.connected === true &&
+      body.by === 'button' &&
+      body.site === SITE &&
+      body.mayChange === true &&
+      typeof body.since === 'string',
+    `POST gav ${res.status} ${text}`,
+  );
+  expect(!text.includes(KEY), 'svaret på POST indeholdt nøglen');
+  expect(w.storeCalls.length === 1 && w.storeCalls[0].method === 'POST', `butikken blev spurgt ${w.storeCalls.length} gange`);
+  expect(w.storeCalls[0]?.url.endsWith('/store/connect'), `adressen var ${w.storeCalls[0]?.url}`);
+  const sent = JSON.parse(w.storeCalls[0]?.body ?? '{}');
+  expect(sent.address === 'https://site.example' && /^[^/]+\/[^/]+$/.test(sent.repo), `butikken fik ${w.storeCalls[0]?.body}`);
+  const rows = rowsOf(env.CONSENT);
+  expect(rows.length === 1 && rows[0].site === SITE && rows[0].key === KEY, 'rækken har ikke nøglen');
+  const get = await call(w, 'GET', env);
+  expect(get.body.by === 'button' && get.body.site === SITE && !get.text.includes(KEY), `GET efter POST gav ${get.text}`);
+  const second = await call(w, 'POST', env);
+  expect(second.res.status === 409, `en anden POST gav ${second.res.status}, ikke 409`);
+  expect(w.storeCalls.length === 1, 'en anden POST spurgte butikken');
+  // MORPHEME_STORE_URL is used when set.
+  const w2 = world();
+  await call(w2, 'POST', await envWith([], { MORPHEME_STORE_URL: 'https://store.example' }));
+  expect(w2.storeCalls[0]?.url === 'https://store.example/store/connect', `MORPHEME_STORE_URL blev ikke brugt: ${w2.storeCalls[0]?.url}`);
+}
+
+// The store's 429: 429 and no row. Its 500, an answer without a key, or a thrown fetch: 502 and no row.
+{
+  const env = await envWith();
+  const { res, body } = await call(world({ store: () => new Response('{}', { status: 429 }) }), 'POST', env);
+  expect(res.status === 429 && body.error === 'busy', `butikkens 429 gav ${res.status}`);
+  expect(rowsOf(env.CONSENT).length === 0, 'butikkens 429 gav en række');
+}
+for (const [what, store] of [
+  ['500', () => new Response(`secret ${KEY}`, { status: 500 })],
+  ['et svar uden nøgle', () => Response.json({ site: SITE }, { status: 201 })],
+  [
+    'en netværksfejl',
+    () => {
+      throw new Error(`no network, ${KEY}`);
+    },
+  ],
+]) {
+  const env = await envWith();
+  const { res, text, body } = await call(world({ store }), 'POST', env);
+  expect(res.status === 502 && body.error === 'store failed', `butikkens ${what} gav ${res.status} ${text}`);
+  expect(!text.includes(KEY), `svaret på butikkens ${what} indeholdt nøglen`);
+  expect(rowsOf(env.CONSENT).length === 0, `butikkens ${what} gav en række`);
+}
+
+// No database (a branch preview): GET says not connected, POST is 503.
+{
+  const w = world();
+  const get = await call(w, 'GET', {});
+  expect(get.res.status === 200 && get.body.connected === false, `GET uden CONSENT gav ${get.text}`);
+  const post = await call(w, 'POST', {});
+  expect(post.res.status === 503 && post.body.error === 'no database', `POST uden CONSENT gav ${post.res.status}`);
+  expect(w.storeCalls.length === 0, 'POST uden CONSENT spurgte butikken');
+}
+
+// A key set by hand: GET says so, POST and DELETE are 409, and the store is not asked.
+{
+  const w = world();
+  const env = await envWith([], { MORPHEME_STORE_KEY: HAND });
+  const get = await call(w, 'GET', env);
+  expect(get.body.connected === true && get.body.by === 'hand' && !get.text.includes(HAND), `GET med nøgle i hånden gav ${get.text}`);
+  expect((await call(w, 'DELETE', env)).res.status === 409, 'DELETE med nøgle i hånden gav ikke 409');
+  expect((await call(w, 'POST', env)).res.status === 409, 'POST med nøgle i hånden gav ikke 409');
+  expect(w.storeCalls.length === 0, 'med nøgle i hånden blev butikken spurgt');
+}
+
+// Disconnect: on the store's 200 or 401 the row goes (the bearer is the row's key); on 500 or a thrown fetch it stays.
+for (const status of [200, 401]) {
+  const w = world({ store: () => new Response('{}', { status }) });
+  const env = await envWith([[SITE, KEY]]);
+  const { res, body, text } = await call(w, 'DELETE', env);
+  expect(
+    res.status === 200 && body.connected === false && body.mayChange === true,
+    `DELETE med butikkens ${status} gav ${res.status} ${text}`,
+  );
+  expect(rowsOf(env.CONSENT).length === 0, `DELETE med butikkens ${status} lod rækken stå`);
+  expect(w.storeCalls[0]?.method === 'DELETE' && w.storeCalls[0].url.endsWith('/store/connect'), 'DELETE spurgte ikke butikken rigtigt');
+  expect(w.storeCalls[0]?.headers.authorization === `Bearer ${KEY}`, 'DELETE brugte ikke rækkens nøgle som bearer');
+}
+for (const store of [
+  () => new Response('{}', { status: 500 }),
+  () => {
+    throw new Error('no network');
+  },
+]) {
+  const env = await envWith([[SITE, KEY]]);
+  const { res, body } = await call(world({ store }), 'DELETE', env);
+  expect(res.status === 502 && body.error === 'store failed', `DELETE med en fejl i butikken gav ${res.status}`);
+  expect(rowsOf(env.CONSENT).length === 1, 'DELETE med en fejl i butikken slettede rækken');
+}
+// No key at all: DELETE is a quiet 200 and the store is not asked.
+{
+  const w = world();
+  const { res, body } = await call(w, 'DELETE', await envWith());
+  expect(res.status === 200 && body.connected === false, `DELETE uden nøgle gav ${res.status}`);
+  expect(w.storeCalls.length === 0, 'DELETE uden nøgle spurgte butikken');
+}
+
+// Other methods: 405.
+expect((await call(world(), 'PUT', await envWith())).res.status === 405, 'PUT gav ikke 405');
+
+// storeKey: the hand key first, then the row, else null; forgetKey deletes the rows.
+{
+  const env = await envWith([[SITE, KEY]], { MORPHEME_STORE_KEY: HAND });
+  const hand = await storeKey(env);
+  expect(hand?.key === HAND && hand.by === 'hand', `storeKey med begge gav ${JSON.stringify(hand)}`);
+  const row = await storeKey({ CONSENT: env.CONSENT });
+  expect(
+    row?.key === KEY && row.by === 'button' && row.site === SITE && typeof row.since === 'string',
+    `storeKey med en række gav ${JSON.stringify(row)}`,
+  );
+  expect((await storeKey({ MORPHEME_STORE_KEY: HAND }))?.by === 'hand', 'storeKey uden CONSENT gav ikke nøglen i hånden');
+  expect((await storeKey({})) === null, 'storeKey uden noget gav ikke null');
+  await forgetKey(env);
+  expect(rowsOf(env.CONSENT).length === 0, 'forgetKey slettede ikke rækken');
+  expect((await storeKey({ CONSENT: env.CONSENT })) === null, 'storeKey efter forgetKey gav ikke null');
+}
+
+if (problems.length) {
+  console.error(problems.map((p) => `- ${p}`).join('\n'));
+  process.exit(1);
+}
+console.log('Workerens nøgle fra Forbind til Morpheme er i orden.');

package/scripts/check-store.mjs

@@ -1,11 +1,13 @@
 // Checks the site's Worker's questions to the store (packages/editor/worker/store.js): /api/store/catalog and /api/store/files/<oid>,
-// who may ask, what happens without a key, and the store's refusals and failures. GitHub and the store are played by a fake
-// fetch that records each request; nothing goes to either.
+// who may ask, what happens without a key, the key from the button (in D1, played by Node's SQLite) that is forgotten when
+// the store refuses it, and the store's refusals and failures. GitHub and the store are played by a fake fetch that records
+// each request; nothing goes to either.
 // Run: npm run check:worker
 import { APP_API, THEME_API } from '../lib/contracts.mjs';
+import { DatabaseSync } from 'node:sqlite';
 import { workerModules } from './worker-modules.mjs';
 
-const [{ handleStore, STORE_URL }] = await workerModules('store.js', 'session.js');
+const [{ handleStore, STORE_URL }, , { storeKey }] = await workerModules('store.js', 'session.js', 'store-connection.js');
 
 const problems = [];
 const expect = (ok, what) => ok || problems.push(what);
@@ -25,6 +27,28 @@ function world({ repoAccess = { pull: true, push: false }, store = () => new Res
   return { ask, storeCalls };
 }
 
+/** D1, as much of it as the Worker uses, on an SQLite database in memory. */
+function d1() {
+  const db = new DatabaseSync(':memory:');
+  const statement = (sql, args = []) => ({
+    bind: (...values) => statement(sql, values),
+    run: async () => ({ meta: { changes: Number(db.prepare(sql).run(...args).changes) } }),
+    all: async () => ({ results: db.prepare(sql).all(...args) }),
+    first: async (column) => db.prepare(sql).get(...args)?.[column] ?? null,
+  });
+  return { db, prepare: (sql) => statement(sql), batch: async (list) => Promise.all(list.map((s) => s.run())) };
+}
+/** An env with a key from the button in its database (the table is made by storeKey, as on first use). */
+async function envWithRow(key) {
+  const CONSENT = d1();
+  await storeKey({ CONSENT });
+  CONSENT.db
+    .prepare('INSERT INTO store_connection (site, key, connected) VALUES (?, ?, ?)')
+    .run(`site_${'a1'.repeat(12)}`, key, '2026-11-04T10:00:00.000Z');
+  return { CONSENT };
+}
+const rowCount = (env) => env.CONSENT.db.prepare('SELECT COUNT(*) AS n FROM store_connection').get().n;
+
 let n = 0;
 /** A request from the editor's page; a fresh token each time (the Worker remembers what GitHub said about a token). */
 const request = (path, { signedIn = true, method = 'GET' } = {}) =>
@@ -145,6 +169,32 @@ for (const [status, error] of [
   expect(!text.includes(KEY), 'svaret på en netværksfejl indeholdt nøglen');
 }
 
+// A key from the button: the store gets it as the bearer; when the store refuses it, the row goes, the catalog says
+// "not connected" and a file is not found. A key set by hand that is refused stays a 502.
+{
+  const w = world();
+  await call(w, 'catalog', await envWithRow('isk_row'));
+  expect(
+    w.storeCalls[0]?.headers.authorization === 'Bearer isk_row',
+    `kataloget blev spurgt med ${w.storeCalls[0]?.headers.authorization}`,
+  );
+}
+for (const status of [401, 403]) {
+  for (const path of ['catalog', `files/${OID}`]) {
+    const env = await envWithRow('isk_row');
+    const { res, text } = await call(world({ store: () => new Response('no', { status }) }), path, env);
+    const want = path === 'catalog' ? res.status === 200 && JSON.parse(text).connected === false : res.status === 404;
+    expect(want, `butikkens ${status} på ${path} med en nøgle fra knappen gav ${res.status} ${text}`);
+    expect(rowCount(env) === 0, `butikkens ${status} på ${path} lod nøglen fra knappen stå`);
+  }
+}
+{
+  const env = { ...(await envWithRow('isk_row')), MORPHEME_STORE_KEY: KEY };
+  const { res, text } = await call(world({ store: () => new Response('no', { status: 401 }) }), 'catalog', env);
+  expect(res.status === 502 && JSON.parse(text).error === 'store refused', `en nøgle i hånden, der blev afvist, gav ${res.status} ${text}`);
+  expect(rowCount(env) === 1, 'en nøgle i hånden, der blev afvist, slettede rækken');
+}
+
 // Other methods and addresses.
 {
   const w = world();

package/scripts/editor-screens.mjs

@@ -10,6 +10,8 @@
 import { existsSync, readFileSync, readdirSync } from 'node:fs';
 import { join, relative, resolve } from 'node:path';
 import { chromium } from 'playwright';
+import { mkdirSync } from 'node:fs';
+import { tmpdir } from 'node:os';
 import { openEditor, serveBuilt } from './built-site.mjs';
 
 const ROOT = `${process.cwd()}/`;
@@ -92,6 +94,30 @@ for (const [width, height] of [
   await page.close();
 }
 
+// "Appstore" in the three states of the site's key to the store (STORE_STATES): what each shows, and a picture of it in
+// SCREENS_DIR (the temporary folder's morpheme-screens by default).
+const shots = process.env.SCREENS_DIR || join(tmpdir(), 'morpheme-screens');
+mkdirSync(shots, { recursive: true });
+const keyStates = {
+  open: { shows: ['Hjemmesiden er ikke forbundet til Morpheme', 'Forbind til Morpheme'], hides: ['Afbryd forbindelsen til Morpheme'] },
+  readOnly: { shows: ['Hjemmesiden har ingen Appstore'], hides: ['Forbind til Morpheme', 'Afbryd forbindelsen til Morpheme'] },
+  button: { shows: ['Forbundet til Morpheme', 'site_sample', 'Afbryd forbindelsen til Morpheme'], hides: ['Forbind til Morpheme'] },
+};
+for (const [state, { shows, hides }] of Object.entries(keyStates)) {
+  const page = await browser.newPage({ viewport: { width: 390, height: 844 }, locale: 'da-DK' });
+  page.on('pageerror', (e) => problems.push(`Appstore (${state}): ${e.message}`));
+  await openEditor(page, site, {}, state);
+  await page.evaluate(() => (location.hash = 'indstillinger/appstore'));
+  await page.waitForTimeout(500);
+  const text = await page.evaluate(() => document.body.innerText);
+  for (const x of shows) if (!text.includes(x)) problems.push(`Appstore (${state}): "${x}" mangler`);
+  for (const x of hides) if (text.includes(x)) problems.push(`Appstore (${state}): "${x}" skal ikke vises`);
+  const file = join(shots, `appstore-${state}.png`);
+  await page.screenshot({ path: file });
+  console.log(`Appstore (${state}): ${file}`);
+  await page.close();
+}
+
 await browser.close();
 server.close();
 if (problems.length) {

package/src/AppList.tsx

@@ -98,6 +98,9 @@ import { config } from '@site/editor';
 import { allThemes, ThemeRow, themeInstalled, useThemeCatalog } from './ThemeStore';
 import { siteT, siteText, t } from './i18n';
 import { OwnerLicenses, StoreLicenseRows } from './Licenses';
+import { StoreConnectNotice } from './StoreConnectNotice';
+import { StoreConnectedRow } from './StoreConnectedRow';
+import { connection, type StoreConnection } from './storeConnection';
 import { appType, setOn, told, useNotificationChoices } from './notificationData';
 import { kindAndName } from './deploy';
 
@@ -594,8 +597,18 @@ export function DeveloperRow({ name }: { name: string }) {
  * and those installed, each with its version and who made it; each opening its page. With search (by name, what it
  * does, who made it and the words it is found by, in both languages), the order and the filters by category (apps)
  * and by whether it is installed, each picked one as a chip. */
-export function StorePage({ env, files, tab }: { env: Env; files: RepoFile[]; tab: 'apps' | 'themes' }) {
+export function StorePage(props: { env: Env; files: RepoFile[]; tab: 'apps' | 'themes' }) {
+  // Connecting or disconnecting draws the screen again from the start, so the catalogs and the key are asked again.
+  const [round, setRound] = useState(0);
+  return <StoreScreen key={round} {...props} again={() => setRound((r) => r + 1)} />;
+}
+
+function StoreScreen({ env, files, tab, again }: { env: Env; files: RepoFile[]; tab: 'apps' | 'themes'; again: () => void }) {
   const installed = installedApps(files);
+  const [key, setKey] = useState<StoreConnection | null>(null);
+  useEffect(() => {
+    connection().then(setKey, () => {});
+  }, []);
   const catalog = useCatalog(env);
   const themeCatalog = useThemeCatalog(env);
   const connected = useStoreConnected(env);
@@ -689,7 +702,7 @@ export function StorePage({ env, files, tab }: { env: Env; files: RepoFile[]; ta
       )}
       {/* The site's own are shown also when the store cannot be read. */}
       {connected === false ? (
-        <EmptyNote>{t.apps.noStore}</EmptyNote>
+        <StoreConnectNotice mayChange={key?.mayChange ?? false} onConnected={again} />
       ) : read === null || connected === null ? (
         <EmptyNote busy>{t.apps.loadingStore}</EmptyNote>
       ) : read === 'failed' ? (
@@ -714,6 +727,7 @@ export function StorePage({ env, files, tab }: { env: Env; files: RepoFile[]; ta
           </Group>
         ))
       )}
+      {key?.connected && key.by === 'button' && key.mayChange && <StoreConnectedRow site={key.site} onDisconnected={again} />}
     </Screen>
   );
 }

package/src/StoreConnectNotice.tsx

@@ -0,0 +1,34 @@
+// The box in "Appstore" for a site without a key to the store: the button "Connect to Morpheme", or a note for editors who may only read.
+// Exposes StoreConnectNotice({ mayChange, onConnected }); uses Notice, Button, EmptyNote (ui.tsx), snackbar (lib/snackbar.ts) and connect (storeConnection.ts).
+import { useState } from 'react';
+import { snackbar } from '../lib/snackbar';
+import { connect } from './storeConnection';
+import { Button, EmptyNote, Notice } from './ui';
+import { t } from './i18n';
+
+export function StoreConnectNotice({ mayChange, onConnected }: { mayChange: boolean; onConnected: () => void }) {
+  const [busy, setBusy] = useState(false);
+  if (!mayChange) return <EmptyNote>{t.apps.noStore}</EmptyNote>;
+  async function connectNow() {
+    setBusy(true);
+    try {
+      await connect();
+      onConnected();
+    } catch (e) {
+      snackbar({ text: (e as Error).message, error: true });
+      setBusy(false);
+    }
+  }
+  return (
+    <Notice
+      title={t.apps.connectTitle}
+      action={
+        <Button disabled={busy} onClick={connectNow}>
+          {t.apps.connect}
+        </Button>
+      }
+    >
+      {t.apps.connectText}
+    </Notice>
+  );
+}

package/src/StoreConnectedRow.tsx

@@ -0,0 +1,36 @@
+// The row at the bottom of "Appstore" that says the site is connected to Morpheme, with the button "Disconnect from Morpheme" (asks first).
+// Exposes StoreConnectedRow({ site, onDisconnected }); uses Group, ListItem, Button (ui.tsx), ask (ask.tsx), snackbar (lib/snackbar.ts) and disconnect (storeConnection.ts).
+import { useState } from 'react';
+import { snackbar } from '../lib/snackbar';
+import { ask } from './ask';
+import { disconnect } from './storeConnection';
+import { Button, Group, ListItem } from './ui';
+import { t } from './i18n';
+
+export function StoreConnectedRow({ site, onDisconnected }: { site: string; onDisconnected: () => void }) {
+  const [busy, setBusy] = useState(false);
+  async function disconnectNow() {
+    if (!(await ask(t.apps.disconnectAsk, t.apps.disconnect))) return;
+    setBusy(true);
+    try {
+      await disconnect();
+      onDisconnected();
+    } catch (e) {
+      snackbar({ text: (e as Error).message, error: true });
+      setBusy(false);
+    }
+  }
+  return (
+    <Group>
+      <ListItem
+        headline={t.apps.connected}
+        supporting={site}
+        actions={
+          <Button disabled={busy} onClick={disconnectNow}>
+            {t.apps.disconnect}
+          </Button>
+        }
+      />
+    </Group>
+  );
+}

package/src/i18n/da-DK/apps.ts

@@ -53,6 +53,13 @@ export const apps: Messages['apps'] = {
   loadingStore: 'Henter apps',
   storeFailed: 'Kunne ikke hente Appstore.',
   noStore: 'Sitet har ingen Appstore.',
+  connectTitle: 'Hjemmesiden er ikke forbundet til Morpheme',
+  connectText: 'Forbind den for at installere apps og temaer fra Appstore.',
+  connect: 'Forbind til Morpheme',
+  connected: 'Forbundet til Morpheme',
+  disconnect: 'Afbryd forbindelsen til Morpheme',
+  disconnectAsk: 'Afbryd hjemmesidens forbindelse til Morpheme? Installerede apps og temaer bliver.',
+  connectBusy: 'Mange hjemmesider forbinder lige nu. Prøv igen om en time.',
   storeBroken: (app) => `${app} kunne ikke hentes rigtigt fra Appstore.`,
   notInStore: 'Appen findes ikke i Appstore.',
   categoryFilter: 'Kategori',

package/src/i18n/en-US/apps.ts

@@ -80,6 +80,14 @@ export const apps = {
   storeFailed: 'Couldn’t load the Appstore',
   /** On "Appstore" when the site's Worker has no store key: only the site's own are there. */
   noStore: 'The site has no Appstore',
+  /** On "Appstore": the box that connects the site to the Morpheme store, the row that disconnects it, and the answer at the store's hourly limit. */
+  connectTitle: 'The website is not connected to Morpheme',
+  connectText: 'Connect it to install apps and themes from the Appstore.',
+  connect: 'Connect to Morpheme',
+  connected: 'Connected to Morpheme',
+  disconnect: 'Disconnect from Morpheme',
+  disconnectAsk: 'Disconnect the website from Morpheme? Installed apps and themes stay.',
+  connectBusy: 'Many websites are connecting right now. Try again in an hour.',
   /** An app's files did not come from the store as its catalog says. */
   storeBroken: (app: string) => `${app} couldn’t be loaded correctly from the Appstore`,
   /** At an address of an app the store does not have. */

package/src/store.ts

@@ -310,6 +310,11 @@ function catalogText(): Promise<string> {
   return catalog;
 }
 
+/** Makes the catalog be read again, the next time it is asked for (after the site is connected or disconnected). */
+export function forgetCatalog(): void {
+  catalog = null;
+}
+
 /** Whether the site's Worker has a store key; without one, "Appstore" has only the site's own apps and themes. Fails when
  * the catalog cannot be read. */
 export const storeConnected = (): Promise<boolean> =>

package/src/storeConnection.ts

@@ -0,0 +1,24 @@
+// The site's connection to the Morpheme store, from the editor: connection() reads it, connect() and disconnect() change it.
+// Exposes connection, connect, disconnect and StoreConnection; used by StoreConnectNotice.tsx, StoreConnectedRow.tsx and AppList.tsx.
+// Depends on storeConnectionCall.ts (the request), store.ts (forgetCatalog) and i18n (the texts of a failure).
+import { callConnection, type ConnectionDeps, type StoreConnection } from './storeConnectionCall';
+import { forgetCatalog } from './store';
+import { t } from './i18n';
+
+export type { StoreConnection };
+
+const deps = (): ConnectionDeps => ({
+  fetch: (url, init) => fetch(url, init),
+  forgetCatalog,
+  busy: t.apps.connectBusy,
+  failed: t.apps.storeFailed,
+});
+
+/** Whether the site has a key to the store, and who may change that. */
+export const connection = () => callConnection('GET', deps());
+
+/** Asks the store for a key for this site. */
+export const connect = () => callConnection('POST', deps());
+
+/** Tells the store to drop the site's key. */
+export const disconnect = () => callConnection('DELETE', deps());

package/src/storeConnectionCall.test.mjs

@@ -0,0 +1,57 @@
+// Tests for src/storeConnectionCall.ts: the request for "Connect to Morpheme" and the text of a failure.
+// Run: node --test packages/editor/src/storeConnectionCall.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { callConnection } from './storeConnectionCall.ts';
+
+const make = (answer) => {
+  const calls = { fetched: [], forgot: 0 };
+  const deps = {
+    fetch: async (url, init) => {
+      calls.fetched.push([url, init.method]);
+      if (answer instanceof Error) throw answer;
+      return answer;
+    },
+    forgetCatalog: () => calls.forgot++,
+    busy: 'BUSY',
+    failed: 'FAILED',
+  };
+  return { deps, calls };
+};
+const ok = (body) => ({ ok: true, status: 200, json: async () => body });
+
+test('a read gives the answer and keeps the catalog', async () => {
+  const { deps, calls } = make(ok({ connected: false, mayChange: true }));
+  assert.deepEqual(await callConnection('GET', deps), { connected: false, mayChange: true });
+  assert.deepEqual(calls.fetched, [['/api/store/connection', 'GET']]);
+  assert.equal(calls.forgot, 0);
+});
+
+test('connect and disconnect make the catalog be read again', async () => {
+  for (const method of ['POST', 'DELETE']) {
+    const { deps, calls } = make(ok({ connected: false, mayChange: true }));
+    await callConnection(method, deps);
+    assert.equal(calls.fetched[0][1], method);
+    assert.equal(calls.forgot, 1);
+  }
+});
+
+test('429 says the store is busy', async () => {
+  const { deps, calls } = make({ ok: false, status: 429, json: async () => ({}) });
+  await assert.rejects(callConnection('POST', deps), { message: 'BUSY' });
+  assert.equal(calls.forgot, 0);
+});
+
+const failures = [
+  { ok: false, status: 502, json: async () => ({}) },
+  new Error('offline'),
+  { ok: true, status: 200, json: async () => Promise.reject(new Error('not json')) },
+];
+
+test('any other failure says the store failed', async () => {
+  for (const answer of failures) {
+    const { deps, calls } = make(answer);
+    await assert.rejects(callConnection('DELETE', deps), { message: 'FAILED' });
+    assert.equal(calls.forgot, 0);
+  }
+});

package/src/storeConnectionCall.ts

@@ -0,0 +1,37 @@
+// The request to the site's Worker for "Connect to Morpheme" (/api/store/connection): GET, POST, DELETE, and what a failure says.
+// Exposes StoreConnection and callConnection(method, deps); no imports of the editor, so node --test runs it (storeConnectionCall.test.mjs).
+// Used by storeConnection.ts, which gives it the real fetch, forgetCatalog and texts.
+
+/** What the Worker says about the site's key to the store (packages/editor/worker/store-connection.js). */
+export type StoreConnection =
+  | { connected: false; mayChange: boolean }
+  | { connected: true; by: 'hand'; mayChange: boolean }
+  | { connected: true; by: 'button'; site: string; since: string; mayChange: boolean };
+
+export type ConnectionDeps = {
+  fetch: (url: string, init: { method: string }) => Promise<{ ok: boolean; status: number; json: () => Promise<unknown> }>;
+  /** Asks the store's catalog again (store.ts forgetCatalog). */
+  forgetCatalog: () => void;
+  /** The texts of a failure: the store's hourly limit (429) and any other. */
+  busy: string;
+  failed: string;
+};
+
+/** Sends one request. A failure throws an Error with the text for it; POST and DELETE that succeed make the catalog be read again. */
+export async function callConnection(method: 'GET' | 'POST' | 'DELETE', deps: ConnectionDeps): Promise<StoreConnection> {
+  let res;
+  try {
+    res = await deps.fetch('/api/store/connection', { method });
+  } catch {
+    throw new Error(deps.failed);
+  }
+  if (!res.ok) throw new Error(res.status === 429 ? deps.busy : deps.failed);
+  let found: StoreConnection;
+  try {
+    found = (await res.json()) as StoreConnection;
+  } catch {
+    throw new Error(deps.failed);
+  }
+  if (method !== 'GET') deps.forgetCatalog();
+  return found;
+}

package/worker/index.js

@@ -14,7 +14,8 @@
 //   (packages/editor/worker/session.js), and what the editor asks of GitHub with it (/api/github/*, packages/editor/worker/editor-github.js), the site's
 //   files through the cache in R2 (packages/editor/worker/files.js).
 // - what the editor asks of the app store (/api/store/catalog and /api/store/files/<oid>, packages/editor/worker/store.js), with the
-//   site's key (MORPHEME_STORE_KEY) that never leaves the Worker.
+//   site's key (MORPHEME_STORE_KEY, or the one from "Connect to Morpheme", /api/store/connection, packages/editor/worker/store-connection.js, in D1)
+//   that never leaves the Worker.
 // - the addresses visitors came to that do not exist, for the editor (/api/not-found, packages/editor/worker/not-found.js).
 // - the visitors' answers in the cookie banner, the consent log (/api/consent, packages/editor/worker/consent.js, in D1), and each hour
 //   those older than two years deleted.
@@ -36,6 +37,7 @@ import { handleNotFound, isVisit, json, recordNotFound } from './not-found.js';
 import { forgetOldConsents, handleConsent } from './consent.js';
 import { access, mayEdit } from './session.js';
 import { handleGitHub } from './editor-github.js';
+import { handleConnection } from './store-connection.js';
 import { handleStore } from './store.js';
 import { handleR2 } from './r2-status.js';
 import { publishScheduled, SCHEDULED_LIST } from './publish.js';
@@ -149,6 +151,7 @@ export default {
     if (url.pathname === '/api/consent') return handleConsent(request, env);
     if (url.pathname === '/api/r2') return handleR2(request, env);
     if (url.pathname.startsWith('/api/github/')) return handleGitHub(request, env, ctx);
+    if (url.pathname === '/api/store/connection') return handleConnection(request, env, ctx);
     if (url.pathname.startsWith('/api/store/')) return handleStore(request, env, ctx);
     if (/^\/api\/push(\/wait)?\/?$/.test(url.pathname)) return handlePush(request, env);
     if (/^\/api\/cms(\/update)?\/?$/.test(url.pathname)) return handleCms(request, env, ctx);

package/worker/store-connection.js

@@ -0,0 +1,106 @@
+// The key the site gets from "Connect to Morpheme": kept in D1 (the binding CONSENT), asked for and removed by the editor.
+// Exposes handleConnection (/api/store/connection), storeKey(env), forgetKey(env) and STORE_URL; used by worker/index.js and worker/store.js.
+// Depends on worker/session.js (sign-in and access), worker/not-found.js (json) and @site/config (the repository). The key never leaves the Worker.
+//   GET    /api/store/connection   { connected, by?, site?, since?, mayChange }; mayChange = the editor may save the site
+//   POST   /api/store/connection   asks the store for a key (POST <store>/store/connect) and keeps it
+//   DELETE /api/store/connection   tells the store to drop the key (DELETE <store>/store/connect) and forgets it
+import { config } from '@site/config';
+import { json } from './not-found.js';
+import { access, sessionToken } from './session.js';
+
+// Lives here, not in store.js, so store.js can import storeKey from this file without a cycle; store.js exports it again.
+export const STORE_URL = 'https://morpheme-appstore.larsadolfsen.workers.dev';
+
+// The table, made the first time an isolate needs it for a database (D1 has no migrations on deploy), as in consent.js.
+const ready = new WeakMap();
+function table(db) {
+  if (!ready.has(db)) {
+    const made = db
+      .prepare('CREATE TABLE IF NOT EXISTS store_connection (site TEXT PRIMARY KEY, key TEXT NOT NULL, connected TEXT NOT NULL)')
+      .run()
+      .catch((e) => {
+        ready.delete(db);
+        throw e;
+      });
+    ready.set(db, made);
+  }
+  return ready.get(db);
+}
+
+/** The key the Worker asks the store with: the one set by hand (MORPHEME_STORE_KEY) first, else the one from the button; null without. */
+export async function storeKey(env) {
+  if (env.MORPHEME_STORE_KEY) return { key: env.MORPHEME_STORE_KEY, by: 'hand' };
+  if (!env.CONSENT) return null;
+  await table(env.CONSENT);
+  const { results } = await env.CONSENT.prepare('SELECT site, key, connected FROM store_connection ORDER BY connected DESC LIMIT 1').all();
+  const row = results[0];
+  return row ? { key: row.key, by: 'button', site: row.site, since: row.connected } : null;
+}
+
+/** Forgets the key from the button (the store no longer knows it, or the owner disconnected). */
+export async function forgetKey(env) {
+  if (!env.CONSENT) return;
+  await table(env.CONSENT);
+  await env.CONSENT.prepare('DELETE FROM store_connection').run();
+}
+
+/** The answer for GET (never the key). @param {Awaited<ReturnType<typeof storeKey>>} found @param {boolean} mayChange */
+const state = (found, mayChange) =>
+  json(
+    !found
+      ? { connected: false, mayChange }
+      : found.by === 'hand'
+        ? { connected: true, by: 'hand', mayChange }
+        : { connected: true, by: 'button', site: found.site, since: found.since, mayChange },
+  );
+
+/** @param {Request} request @param {Record<string, any>} env @param {unknown} _ctx @param {typeof fetch} [ask] fetch, for the store and GitHub */
+export async function handleConnection(request, env, _ctx, ask = fetch) {
+  if (!sessionToken(request)) return json({ error: 'signed out' }, 401);
+  const may = await access(request, ask);
+  if (!may) return json({ error: 'signed out' }, 401);
+  if (!may.read) return json({ error: 'forbidden' }, 403);
+  const method = request.method;
+  if (method !== 'GET' && method !== 'POST' && method !== 'DELETE') return json({ error: 'method' }, 405);
+  if (method === 'GET') return state(await storeKey(env), may.push);
+  if (!may.push) return json({ error: 'forbidden' }, 403);
+
+  const base = env.MORPHEME_STORE_URL ?? STORE_URL;
+  const found = await storeKey(env);
+  if (method === 'POST') {
+    if (found) return json({ error: 'connected' }, 409);
+    if (!env.CONSENT) return json({ error: 'no database' }, 503);
+    let res;
+    try {
+      res = await ask(`${base}/store/connect`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ address: new URL(request.url).origin, repo: `${config.repo.owner}/${config.repo.name}` }),
+      });
+    } catch {
+      return json({ error: 'store failed' }, 502);
+    }
+    if (res.status === 429) return json({ error: 'busy' }, 429);
+    if (res.status !== 201) return json({ error: 'store failed' }, 502);
+    const given = await res.json().catch(() => null);
+    if (typeof given?.site !== 'string' || typeof given?.key !== 'string' || !given.key) return json({ error: 'store failed' }, 502);
+    await table(env.CONSENT);
+    await env.CONSENT.prepare('INSERT OR REPLACE INTO store_connection (site, key, connected) VALUES (?, ?, ?)')
+      .bind(given.site, given.key, new Date().toISOString())
+      .run();
+    return state(await storeKey(env), true);
+  }
+
+  // DELETE
+  if (found?.by === 'hand') return json({ error: 'set by hand' }, 409);
+  if (!found) return json({ connected: false, mayChange: true });
+  let res;
+  try {
+    res = await ask(`${base}/store/connect`, { method: 'DELETE', headers: { authorization: `Bearer ${found.key}` } });
+  } catch {
+    return json({ error: 'store failed' }, 502);
+  }
+  if (res.status !== 200 && res.status !== 401) return json({ error: 'store failed' }, 502);
+  await forgetKey(env);
+  return json({ connected: false, mayChange: true });
+}

package/worker/store.js

@@ -1,13 +1,16 @@
 // What the editor asks of the store, through the Worker (the store's key never leaves it): the catalog and the files in it.
 // Exposes handleStore(request, env, ctx, ask) and STORE_URL; used by packages/editor/worker/index.js (/api/store/*).
-// Depends on packages/editor/worker/session.js (sign-in and access) and packages/editor/lib/contracts.mjs (APP_API, THEME_API).
-//   GET /api/store/catalog       the store's catalog for this site's contracts; { connected: false } without MORPHEME_STORE_KEY
+// Depends on packages/editor/worker/session.js (sign-in and access), packages/editor/worker/store-connection.js (the key) and packages/editor/lib/contracts.mjs (APP_API, THEME_API).
+//   GET /api/store/catalog       the store's catalog for this site's contracts; { connected: false } without a key
 //   GET /api/store/files/<oid>   a file of the store by its git id, streamed through with its content-type and cache-control
+// The key is MORPHEME_STORE_KEY or the one from "Connect to Morpheme"; a key from the button that the store refuses is forgotten.
 import { APP_API, THEME_API } from '../lib/contracts.mjs';
 import { access, sessionToken } from './session.js';
 import { json } from './not-found.js';
+import { forgetKey, storeKey } from './store-connection.js';
 
-export const STORE_URL = 'https://morpheme-appstore.larsadolfsen.workers.dev';
+export { STORE_URL } from './store-connection.js';
+import { STORE_URL } from './store-connection.js';
 
 const OID = /^[0-9a-f]{40}$/;
 
@@ -22,17 +25,22 @@ export async function handleStore(request, env, _ctx, ask = fetch) {
   const isCatalog = route === 'catalog';
   const oid = route.startsWith('files/') ? route.slice('files/'.length) : null;
   if (!isCatalog && !(oid !== null && OID.test(oid))) return json({ error: 'not found' }, 404);
-  if (!env.MORPHEME_STORE_KEY) return isCatalog ? json({ connected: false }) : json({ error: 'not found' }, 404);
+  const found = await storeKey(env);
+  if (!found) return isCatalog ? json({ connected: false }) : json({ error: 'not found' }, 404);
 
   const base = env.MORPHEME_STORE_URL ?? STORE_URL;
   const url = isCatalog ? `${base}/store/catalog?app=${APP_API}&theme=${THEME_API}` : `${base}/store/files/${oid}`;
   let res;
   try {
-    res = await ask(url, { headers: { authorization: `Bearer ${env.MORPHEME_STORE_KEY}` } });
+    res = await ask(url, { headers: { authorization: `Bearer ${found.key}` } });
   } catch {
     return json({ error: 'store failed' }, 502);
   }
-  if (res.status === 401 || res.status === 403) return json({ error: 'store refused' }, 502);
+  if (res.status === 401 || res.status === 403) {
+    if (found.by !== 'button') return json({ error: 'store refused' }, 502);
+    await forgetKey(env);
+    return isCatalog ? json({ connected: false }) : json({ error: 'not found' }, 404);
+  }
   if (!isCatalog && res.status === 404) return json({ error: 'not found' }, 404);
   if (res.status !== 200) return json({ error: 'store failed' }, 502);
   if (isCatalog) {

package/lib/apps.test.d.mts

@@ -1 +0,0 @@
-export {};

package/lib/caseCollisions.test.d.mts

@@ -1 +0,0 @@
-export {};

package/lib/changelog.test.d.mts

@@ -1 +0,0 @@
-export {};

package/lib/cms-version.test.d.mts

@@ -1 +0,0 @@
-export {};

package/lib/lockfile.test.d.mts

@@ -1 +0,0 @@
-export {};

package/lib/range.test.d.mts

@@ -1 +0,0 @@
-export {};

package/lib/side-block.test.d.mts

@@ -1 +0,0 @@
-export {};

package/lib/storeEntries.test.d.mts

@@ -1 +0,0 @@
-export {};

package/site/storeTheme.test.d.mts

@@ -1 +0,0 @@
-export {};

package/src/cmsView.test.d.mts

@@ -1 +0,0 @@
-export {};

package/src/frontmatter.test.d.mts

@@ -1 +0,0 @@
-export {};

package/src/standard/leads.test.d.mts

@@ -1 +0,0 @@
-export {};