@morphemecms/cms 0.1.1-next-20261103223426 → 0.2.0

package/scripts/check-store.mjs

@@ -0,0 +1,160 @@
+// 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.
+// Run: npm run check:worker
+import { APP_API, THEME_API } from '../lib/contracts.mjs';
+import { workerModules } from './worker-modules.mjs';
+
+const [{ handleStore, STORE_URL }] = await workerModules('store.js', 'session.js');
+
+const problems = [];
+const expect = (ok, what) => ok || problems.push(what);
+
+const KEY = 'site-key-for-test';
+const OID = 'a'.repeat(40);
+const BYTES = new Uint8Array([1, 2, 3, 250]);
+
+/** A fake fetch: GitHub says what `repoAccess` says for a token; the store answers with `store(url, init)`. `storeCalls` records the store's requests. */
+function world({ repoAccess = { pull: true, push: false }, store = () => new Response('{}', { status: 200 }) } = {}) {
+  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), headers: init.headers ?? {} });
+    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 request = (path, { signedIn = true, method = 'GET' } = {}) =>
+  new Request(`https://editor.example/api/store/${path}`, {
+    method,
+    headers: { ...(signedIn ? { cookie: `editor_session=token-${++n}` } : {}), 'sec-fetch-site': 'same-origin' },
+  });
+const call = async (w, path, env = { MORPHEME_STORE_KEY: KEY }, options) => {
+  const res = await handleStore(request(path, options), env, {}, w.ask);
+  const bytes = new Uint8Array(await res.clone().arrayBuffer());
+  return { res, bytes, text: new TextDecoder().decode(bytes) };
+};
+
+// Signed out: 401, and the store is not asked.
+{
+  const w = world();
+  const { res } = await call(w, 'catalog', undefined, { signedIn: false });
+  expect(res.status === 401, `uden login var svaret ${res.status}, ikke 401`);
+  expect(w.storeCalls.length === 0, 'uden login blev butikken spurgt');
+}
+
+// Signed in without the right to read the repository: 403.
+{
+  const w = world({ repoAccess: { pull: false, push: false } });
+  const { res } = await call(w, 'catalog');
+  expect(res.status === 403, `uden læseret var svaret ${res.status}, ikke 403`);
+  expect(w.storeCalls.length === 0, 'uden læseret blev butikken spurgt');
+}
+
+// Without a key: the catalog says "not connected" and files are not found; the store is not asked.
+{
+  const w = world();
+  const catalog = await call(w, 'catalog', {});
+  expect(catalog.res.status === 200 && JSON.parse(catalog.text).connected === false, `uden nøgle var kataloget ${catalog.text}`);
+  const file = await call(w, `files/${OID}`, {});
+  expect(file.res.status === 404, `uden nøgle var en fil ${file.res.status}, ikke 404`);
+  expect(w.storeCalls.length === 0, 'uden nøgle blev butikken spurgt');
+}
+
+// With a key: one request to the catalog with the contract versions and the bearer, and the store's JSON back.
+{
+  const w = world({ store: () => Response.json({ apps: [{ id: 'x' }] }) });
+  const { res, text } = await call(w, 'catalog');
+  expect(res.status === 200 && JSON.parse(text).apps?.[0]?.id === 'x', `kataloget var ${res.status} ${text}`);
+  expect(w.storeCalls.length === 1, `butikken blev spurgt ${w.storeCalls.length} gange, ikke 1`);
+  expect(w.storeCalls[0]?.url === `${STORE_URL}/store/catalog?app=${APP_API}&theme=${THEME_API}`, `adressen var ${w.storeCalls[0]?.url}`);
+  expect(w.storeCalls[0]?.headers.authorization === `Bearer ${KEY}`, 'kataloget blev spurgt uden nøglen som bearer');
+  expect(!text.includes(KEY), 'kataloget indeholdt nøglen');
+}
+
+// MORPHEME_STORE_URL is used when set.
+{
+  const w = world();
+  await call(w, 'catalog', { MORPHEME_STORE_KEY: KEY, MORPHEME_STORE_URL: 'https://store.example' });
+  expect(
+    w.storeCalls[0]?.url === `https://store.example/store/catalog?app=${APP_API}&theme=${THEME_API}`,
+    `MORPHEME_STORE_URL blev ikke brugt: ${w.storeCalls[0]?.url}`,
+  );
+}
+
+// A file: only a 40-character oid; the bytes, content-type and cache-control go through.
+{
+  const w = world();
+  const bad = await call(w, 'files/xyz');
+  expect(bad.res.status === 404, `oid xyz gav ${bad.res.status}, ikke 404`);
+  expect(w.storeCalls.length === 0, 'oid xyz blev spurgt om i butikken');
+}
+{
+  const w = world({
+    store: () =>
+      new Response(BYTES, {
+        status: 200,
+        headers: { 'content-type': 'image/png', 'cache-control': 'public, max-age=31536000, immutable' },
+      }),
+  });
+  const { res, bytes } = await call(w, `files/${OID}`);
+  expect(res.status === 200 && bytes.join() === BYTES.join(), `filens bytes var ${bytes.join()}`);
+  expect(
+    res.headers.get('cache-control') === 'public, max-age=31536000, immutable',
+    `cache-control var ${res.headers.get('cache-control')}`,
+  );
+  expect(res.headers.get('content-type') === 'image/png', `content-type var ${res.headers.get('content-type')}`);
+  expect(w.storeCalls[0]?.url === `${STORE_URL}/store/files/${OID}`, `filens adresse var ${w.storeCalls[0]?.url}`);
+  expect(w.storeCalls[0]?.headers.authorization === `Bearer ${KEY}`, 'filen blev spurgt uden nøglen som bearer');
+}
+{
+  const w = world({ store: () => new Response('no', { status: 404 }) });
+  const { res } = await call(w, `files/${OID}`);
+  expect(res.status === 404, `en fil butikken ikke har gav ${res.status}, ikke 404`);
+}
+
+// The store refuses or fails: 502, and never the key.
+for (const [status, error] of [
+  [401, 'store refused'],
+  [403, 'store refused'],
+  [500, 'store failed'],
+  [400, 'store failed'],
+  [404, 'store failed'],
+]) {
+  for (const path of ['catalog', ...(status === 404 || status === 400 ? [] : [`files/${OID}`])]) {
+    const w = world({ store: () => new Response(`secret ${KEY}`, { status }) });
+    const { res, text } = await call(w, path);
+    expect(res.status === 502 && JSON.parse(text).error === error, `butikkens ${status} på ${path} gav ${res.status} ${text}`);
+    expect(
+      !text.includes(KEY) && ![...res.headers.values()].some((v) => v.includes(KEY)),
+      `svaret på butikkens ${status} indeholdt nøglen`,
+    );
+  }
+}
+{
+  const w = world({
+    store: () => {
+      throw new Error(`no network, ${KEY}`);
+    },
+  });
+  const { res, text } = await call(w, 'catalog');
+  expect(res.status === 502 && JSON.parse(text).error === 'store failed', `en netværksfejl gav ${res.status} ${text}`);
+  expect(!text.includes(KEY), 'svaret på en netværksfejl indeholdt nøglen');
+}
+
+// Other methods and addresses.
+{
+  const w = world();
+  expect((await call(w, 'catalog', undefined, { method: 'POST' })).res.status === 405, 'POST gav ikke 405');
+  expect((await call(w, 'other')).res.status === 404, 'en ukendt adresse gav ikke 404');
+  expect(w.storeCalls.length === 0, 'en forkert metode eller adresse blev spurgt om i butikken');
+}
+
+if (problems.length) {
+  console.error(problems.map((p) => `- ${p}`).join('\n'));
+  process.exit(1);
+}
+console.log('Workerens spørgsmål til butikken er i orden.');

package/site/defineSite.d.mts

@@ -45,7 +45,7 @@ export type SiteOwn = {
  * What a site can say of itself, else the standard: the owner's picture (beside a blog post, and shown when a page with
  * none of its own is shared), the booking page and the pages a booking ends on, the page about the owner, the block
  * drawn after every blog post, the word a page's title can end in, pictures that are the same though their names say
- * otherwise, the file of its redirects from old addresses, and its app store.
+ * otherwise, and the file of its redirects from old addresses.
  */
 export type SiteChoices = {
     /**
@@ -85,24 +85,12 @@ export type SiteChoices = {
     /**
      * The site's other redirects: rules ("<from> <to> 301", one to a
      * line) and the Worker's map (`{ ids, paths }`, worker/index.js), shown and changed with the editor's own under
-     * Videresendelser (src/redirects.ts).
+     * Videresendelser (src/redirectData.ts).
      */
     siteRedirects: {
         rules: string;
         map: string;
     };
-    /**
-     * The app store ("Apps" ›
-     * "Appstore", src/store.ts): the GitHub repository and branch of its catalog (`catalog`, the apps and themes that can
-     * be installed, each with where its folder is in the repository, at which commit), or none: then "Appstore" has only
-     * the site's own.
-     */
-    store: {
-        owner: string;
-        name: string;
-        branch: string;
-        catalog: string;
-    } | null;
 };
 export type SiteConfig = SiteOwn & SiteChoices & typeof STANDARD;
 declare namespace STANDARD {

package/site/defineSite.mjs

@@ -21,7 +21,7 @@
  * What a site can say of itself, else the standard: the owner's picture (beside a blog post, and shown when a page with
  * none of its own is shared), the booking page and the pages a booking ends on, the page about the owner, the block
  * drawn after every blog post, the word a page's title can end in, pictures that are the same though their names say
- * otherwise, the file of its redirects from old addresses, and its app store.
+ * otherwise, and the file of its redirects from old addresses.
  * @typedef {object} SiteChoices
  * @property {{ src: string; alt: string } | null} picture The owner's picture, or none.
  * @property {{ path: string; thanks: string[] }} booking The booking page, where "Book en tid" goes when no booking sheet
@@ -35,11 +35,7 @@
  *   saved under a new name), by name (samePicture in site/images.mjs).
  * @property {{ rules: string; map: string }} siteRedirects The site's other redirects: rules ("<from> <to> 301", one to a
  *   line) and the Worker's map (`{ ids, paths }`, worker/index.js), shown and changed with the editor's own under
- *   Videresendelser (src/redirects.ts).
- * @property {{ owner: string; name: string; branch: string; catalog: string } | null} store The app store ("Apps" ›
- *   "Appstore", src/store.ts): the GitHub repository and branch of its catalog (`catalog`, the apps and themes that can
- *   be installed, each with where its folder is in the repository, at which commit), or none: then "Appstore" has only
- *   the site's own.
+ *   Videresendelser (src/redirectData.ts).
  */
 
 /** @type {SiteChoices} */
@@ -51,7 +47,6 @@ const CHOICES = {
   titleEnd: '',
   samePictures: {},
   siteRedirects: { rules: 'public/_redirects', map: 'src/data/old-addresses.json' },
-  store: null,
 };
 
 /** The same on every site. */

package/site/storeTheme.d.mts

@@ -0,0 +1,6 @@
+/** What is wrong with the imports in a store theme's CSS file.
+ * @param {string} css the file's text
+ * @param {string} file its path in the theme, e.g. 'styles/global.css'
+ * @returns {string[]}
+ */
+export function storeImportProblems(css: string, file: string): string[];

package/site/storeTheme.mjs

@@ -0,0 +1,29 @@
+// Keeps a store theme's CSS to imports from the CMS and its own files, which is all that is there on a site that
+// installs it. Exposes storeImportProblems, the problems in one CSS file's imports. Depends on node:path only.
+import { posix } from 'node:path';
+
+/** What is wrong with the imports in a store theme's CSS file.
+ * @param {string} css the file's text
+ * @param {string} file its path in the theme, e.g. 'styles/global.css'
+ * @returns {string[]}
+ */
+export function storeImportProblems(css, file) {
+  const text = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  // One pass over both forms, so the targets come in the order they appear in the text.
+  const targets = [];
+  const targetRe = /@import\s+(['"])(.*?)\1|url\(\s*(['"]?)(.*?)\3\s*\)/g;
+  let match;
+  while ((match = targetRe.exec(text))) targets.push(match[2] !== undefined ? match[2] : match[4].trim());
+
+  return targets
+    .filter((target) => {
+      if (target.startsWith('data:')) return false;
+      if (target.startsWith('@morphemecms/cms/')) return false;
+      if (target.startsWith('./') || target.startsWith('../')) {
+        const joined = posix.normalize(posix.join(posix.dirname(file), target));
+        if (joined !== '..' && !joined.startsWith('../')) return false;
+      }
+      return true;
+    })
+    .map((target) => `${file}: et tema i butikken må kun importere fra @morphemecms/cms og sine egne filer, ikke "${target}".`);
+}

package/site/storeTheme.test.d.mts

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

package/site/storeTheme.test.mjs

@@ -0,0 +1,53 @@
+// What is wrong with a store theme's CSS imports: only the CMS and its own files are allowed.
+// Run with `node --test packages/editor/site/*.test.mjs` (part of npm run check).
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { storeImportProblems } from './storeTheme.mjs';
+
+const F = 'styles/global.css';
+const expected = (target) => `${F}: et tema i butikken må kun importere fra @morphemecms/cms og sine egne filer, ikke "${target}".`;
+
+test('an import of the CMS is allowed', () => {
+  const css = `@import '@morphemecms/cms/theme/styles/base.css';`;
+  assert.deepEqual(storeImportProblems(css, F), []);
+});
+
+test('an npm package is not there', () => {
+  const css = `@import '@fontsource-variable/outfit';`;
+  assert.deepEqual(storeImportProblems(css, F), [expected('@fontsource-variable/outfit')]);
+});
+
+test('a font in the theme is allowed', () => {
+  const css = `@font-face { src: url('../fonts/a.woff2') format('woff2'); }`;
+  assert.deepEqual(storeImportProblems(css, F), []);
+});
+
+test('a path that leaves the theme is not there', () => {
+  const css = `@font-face { src: url('../../x.woff2'); }`;
+  assert.deepEqual(storeImportProblems(css, F), [expected('../../x.woff2')]);
+});
+
+test('a font from another host is not there', () => {
+  const css = `@font-face { src: url(https://fonts.example/a.woff2); }`;
+  assert.deepEqual(storeImportProblems(css, F), [expected('https://fonts.example/a.woff2')]);
+});
+
+test('a data URI is allowed', () => {
+  const css = `@font-face { src: url(data:font/woff2;base64,AA); }`;
+  assert.deepEqual(storeImportProblems(css, F), []);
+});
+
+test('two targets outside the theme are two problems', () => {
+  const css = `@import 'https://a.example/x.css';\n@import url("other-package/x.css");`;
+  assert.deepEqual(storeImportProblems(css, F), [expected('https://a.example/x.css'), expected('other-package/x.css')]);
+});
+
+test('the problems come in the order of the text', () => {
+  const css = `@font-face { src: url(https://a.example/x); }\n@import 'b';`;
+  assert.deepEqual(storeImportProblems(css, F), [expected('https://a.example/x'), expected('b')]);
+});
+
+test('an import in a comment is not there', () => {
+  const css = `/* @import 'left-out'; */ @import './ui.css';`;
+  assert.deepEqual(storeImportProblems(css, F), []);
+});

package/site/theme.mjs

@@ -13,6 +13,7 @@ import { declarationProblems, ownerId } from '@morphemecms/cms/lib/licenses.mjs'
 import { installedPacks, isIconName, packFolder, packProblems, phosphorFile, svgProblems, usedIcons } from './icons.mjs';
 import { ICON_PACK_FILE, ICON_PACK_LICENSE, SYSTEM_PACKS, THEME_PACKS_FOLDER, packInUse, packTheme, themePackId } from './iconPacks.mjs';
 import { MOTION_SCHEMES } from '@morphemecms/cms/lib/motion-schemes.mjs';
+import { storeImportProblems } from './storeTheme.mjs';
 
 /** The site's choice of icon pack, `{ "pack": "<id>" }` (config.icons in src/site/config.ts). */
 const ICONS_FILE = 'src/data/icons.json';
@@ -336,6 +337,16 @@ export function themeProblems(theme) {
       problems.push(
         `${themeFolder(theme)}/theme.json: "store" kan kun være true (temaet står i Appstore, npm run store:release), og standardtemaet har det ikke.`,
       );
+    // A theme from the store is copied in as its folder only: its CSS imports nothing from outside it but the CMS.
+    if (manifest.store === true) {
+      const styles = `${themeFolder(theme)}/styles`;
+      for (const f of has(styles) ? readdirSync(new URL(`${styles}/`, root), { recursive: true }) : [])
+        if (String(f).endsWith('.css')) {
+          const inTheme = `styles/${String(f).replaceAll('\\', '/')}`;
+          for (const p of storeImportProblems(readFileSync(new URL(`${themeFolder(theme)}/${inTheme}`, root), 'utf8'), inTheme))
+            problems.push(`${themeFolder(theme)}/${p}`);
+        }
+    }
     // The icon pack it uses by default: a system pack, or one of its own by its folder; the standard theme's a system pack.
     const own = ownPacks(theme);
     if (
@@ -383,8 +394,8 @@ export function themeProblems(theme) {
   return [...problems, ...iconProblems(theme), ...packs.flatMap((p) => packProblems(themePackId(theme, p), used))];
 }
 
-// A site's own parts (src/site/<file>), else the package's standard ones (defaults/<file>): `@site/<file>`.
-const SITE_DIRS = [fileURLToPath(new URL('src/site/', root)), fileURLToPath(new URL('defaults/', pkg))];
+// A site's own parts (src/site/<file>), else the package's standard ones (defaults/<file>): `@site/<file>`. With `/` only, as Vite's ids (Windows).
+const SITE_DIRS = [fileURLToPath(new URL('src/site/', root)), fileURLToPath(new URL('defaults/', pkg))].map((d) => d.replaceAll('\\', '/'));
 
 /** The file `@site/<file>` is: the site's src/site/<file>, else the package's defaults/<file>, with or without its
  * extension (`@site/editor`, as TypeScript writes it), or null. */
@@ -422,7 +433,7 @@ export const aliases = () => ({
  * pack and no icons of its own nothing is changed. The pack is read when the site is built, so a new choice
  * (src/data/icons.json) or theme is in the site and the editor after the next build. */
 export function themePlugin() {
-  const themes = [activeTheme(), STANDARD_THEME].map((t) => fileURLToPath(new URL(`${themeFolder(t)}/`, root)));
+  const themes = [activeTheme(), STANDARD_THEME].map((t) => fileURLToPath(new URL(`${themeFolder(t)}/`, root)).replaceAll('\\', '/'));
   const icons = themeIcons();
   const own = Object.keys(icons).length > 0;
   return {

package/src/App.tsx

@@ -112,6 +112,7 @@ import {
   readApp,
   readCatalog,
   readScreenshots,
+  storeConnected,
   readThemes,
   readThemeScreenshots,
   STORE_BEFORE,
@@ -167,12 +168,12 @@ import { setSidebar, useSidebar } from './sidebar';
 import { Ask, ask } from './ask';
 import { LinkAsk } from './LinkSheet';
 import { type ListRows, type Option, type TestimonialRow } from './fields';
-import { endOf, entriesOf, lookup, readAll } from './redirects';
+import { endOf, entriesOf, lookup, readAll } from './redirectData';
 import { inForm, leaveTo, type Status } from './FormFrame';
 import { arrived, screenOf, up } from './nav';
 import { siteT, siteText, t } from './i18n';
 import { snackbar } from '../lib/snackbar';
-import { appType, clearNotifications, isOn, remember, signOff, stopServerWait, syncDevice, told, waitOnServer } from './notifications';
+import { appType, clearNotifications, isOn, remember, signOff, stopServerWait, syncDevice, told, waitOnServer } from './notificationData';
 import Notifications from './Notifications';
 import { EditorOwn, InEditor } from './standard/view';
 import './editor.css';
@@ -203,7 +204,7 @@ export type Env = {
   /** The files deleted from a folder (github.ts deletedFiles; Deleted.tsx). */
   deleted: (folder: string, options?: { text?: boolean }) => Promise<DeletedFile[]>;
   /** Why a new page or post cannot have this address (it is taken), or null; redirects: the files of
-   * the redirects as they are now (redirects.ts, loaded with `load`). */
+   * the redirects as they are now (redirectData.ts, loaded with `load`). */
   taken: (address: string, redirects: RepoFile[]) => Taken | null;
   /** Single files outside the folders the app loads (github.ts loadFiles). */
   load: (paths: string[]) => Promise<RepoFile[]>;
@@ -212,15 +213,10 @@ export type Env = {
   /** The app store (store.ts): its apps and its themes, an app's or a theme's files from it, and their pictures (as
    * addresses in this browser). */
   store: {
+    connected: () => Promise<boolean>;
     catalog: () => Promise<ShownApp[]>;
     themes: () => Promise<ShownTheme[]>;
-    files: (of: {
-      path: string;
-      ref: string;
-      files: StoreFile[];
-      label?: string;
-      name?: string;
-    }) => Promise<{ path: string; content: string | Uint8Array }[]>;
+    files: (of: { files: StoreFile[]; label?: string; name?: string }) => Promise<{ path: string; content: string | Uint8Array }[]>;
     screenshots: (app: StoreApp) => Promise<{ src: string; label: string }[]>;
     themeScreenshots: (theme: Pick<StoreTheme, 'screenshots' | 'files'>) => Promise<{ key: string; src: string }[]>;
   };
@@ -253,11 +249,11 @@ const RESERVED = config.reserved;
 
 /** Why a new page or post cannot have an address (/<slug>/): a message; with `redirect` when the site
  * sends it on elsewhere, which the site's owner may remove (EntryForm.tsx): where it ends after every redirect
- * (redirects.ts), its name, and how many other addresses send on through it. */
+ * (redirectData.ts), its name, and how many other addresses send on through it. */
 export type Taken = { text: string; redirect?: { end: string; name: string; via: number } };
 
 // Why a new page or post cannot have an address (/<slug>/), or null. redirects: the files of the
-// redirects (redirects.ts), as they are now.
+// redirects (redirectData.ts), as they are now.
 function taken(address: string, relations: Record<Relation, Option[]>, redirects: RepoFile[]): Taken | null {
   const pages = [...relations.pages, ...relations.fixed].map((o) => o.value);
   const posts = relations.blog.map((o) => `/${o.value}/`);
@@ -342,7 +338,7 @@ function Editor() {
   useEffect(registerWorker, []);
   useEffect(startRipples, []);
   // Signed up for the notifications on the phone from the site's Worker, also when the editor is closed, while
-  // "På telefonen" is on (notifications.ts).
+  // "På telefonen" is on (notificationData.ts).
   useEffect(() => {
     if (signedIn) syncDevice();
   }, [signedIn]);
@@ -478,7 +474,7 @@ function Editor() {
   const media = useMemo(() => mediaOf(files ?? []), [files]);
 
   // A message at the bottom (snackbar in lib/snackbar.ts, the same as on the site), with a link to what it
-  // is about; one of a kind kept in the notifications too (notifications.ts).
+  // is about; one of a kind kept in the notifications too (notificationData.ts).
   function notify(next: Status, device = true) {
     const edit = next?.edit;
     if (next?.kind)
@@ -512,7 +508,7 @@ function Editor() {
     stopWaiting.current?.();
     if (!waitingFor.current.includes(change)) waitingFor.current.push(change);
     const what = changesText(waitingFor.current);
-    // The Worker says it on the phone too, also when the editor is closed by then (notifications.ts).
+    // The Worker says it on the phone too, also when the editor is closed by then (notificationData.ts).
     const onServer = waitOnServer(saved.commit, t.app.siteUpdated(what), t.app.siteNotUpdated(what));
     stopWaiting.current = waitForSite(saved.commit, async (online) => {
       waitingFor.current = [];
@@ -562,6 +558,7 @@ function Editor() {
     load: (paths) => loadFiles(paths),
     folder: (path) => loadFolders({ all: path }, 8).then((r) => r.folders.all),
     store: {
+      connected: storeConnected,
       catalog: readCatalog,
       themes: readThemes,
       files: readApp,
@@ -632,7 +629,7 @@ function Editor() {
   }, [signedIn, loaded]);
 
   // What the installed apps have to say (AppNotifications in apps.ts): asked when the editor opens and every 15 minutes
-  // while it is open; each comes once, at the bottom and under "Notifikationer", while its type is on (notifications.ts).
+  // while it is open; each comes once, at the bottom and under "Notifikationer", while its type is on (notificationData.ts).
   const notifying = installedApps(files ?? [])
     .filter((id) => apps.some((a) => a.id === id && a.notifications))
     .join();

package/src/AppList.tsx

@@ -80,7 +80,6 @@ import {
   notesSince,
   recordIn,
   DEVELOPER_ROUTE,
-  hasStore,
   newer,
   STORE_ROUTE,
   STORE_THEMES,
@@ -99,7 +98,7 @@ import { config } from '@site/editor';
 import { allThemes, ThemeRow, themeInstalled, useThemeCatalog } from './ThemeStore';
 import { siteT, siteText, t } from './i18n';
 import { OwnerLicenses, StoreLicenseRows } from './Licenses';
-import { appType, setOn, told, useNotificationChoices } from './notifications';
+import { appType, setOn, told, useNotificationChoices } from './notificationData';
 import { kindAndName } from './deploy';
 
 export const appHref = (app: SiteApp) => `#apps/${app.id}`;
@@ -266,6 +265,23 @@ function useCatalog(env: Env, skip = false): ShownApp[] | null | 'failed' {
   return catalog;
 }
 
+/** Whether the site's Worker has a store key (store.ts storeConnected): null while it is not known; a catalog that could
+ * not be read counts as connected (the list says it failed). */
+function useStoreConnected(env: Env): boolean | null {
+  const [connected, setConnected] = useState<boolean | null>(null);
+  useEffect(() => {
+    let on = true;
+    env.store.connected().then(
+      (yes) => on && setConnected(yes),
+      () => on && setConnected(true),
+    );
+    return () => {
+      on = false;
+    };
+  }, []);
+  return connected;
+}
+
 // The apps updated while the editor is open, by their id, to their version: their page and the list say so until the
 // site's build has it (and the editor reloads with it, deploy.ts keepCurrent).
 const updated = new Map<string, string>();
@@ -582,6 +598,7 @@ export function StorePage({ env, files, tab }: { env: Env; files: RepoFile[]; ta
   const installed = installedApps(files);
   const catalog = useCatalog(env);
   const themeCatalog = useThemeCatalog(env);
+  const connected = useStoreConnected(env);
   const [query, setQuery] = useKept('butik-soeg', '');
   const [sort, pickSort] = useSort();
   const [category, setCategory] = useKept<AppCategory | ''>('butik-kategori', '');
@@ -671,9 +688,9 @@ export function StorePage({ env, files, tab }: { env: Env; files: RepoFile[]; ta
         </div>
       )}
       {/* The site's own are shown also when the store cannot be read. */}
-      {!hasStore ? (
+      {connected === false ? (
         <EmptyNote>{t.apps.noStore}</EmptyNote>
-      ) : read === null ? (
+      ) : read === null || connected === null ? (
         <EmptyNote busy>{t.apps.loadingStore}</EmptyNote>
       ) : read === 'failed' ? (
         <EmptyNote>{t.apps.storeFailed}</EmptyNote>
@@ -701,7 +718,7 @@ export function StorePage({ env, files, tab }: { env: Env; files: RepoFile[]; ta
   );
 }
 
-const recordOf = (app: ShownApp): StoreRecord => ({ version: app.version, ref: app.ref, files: app.files });
+const recordOf = (app: ShownApp): StoreRecord => ({ version: app.version, ref: app.version, files: app.files });
 
 /** The cookies an app sets (its cookies.json among its files from the store), in the site's language; none when it
  * has no such file. */

package/src/Consents.tsx

@@ -1,5 +1,5 @@
 // "Samtykker" (#privatliv/samtykker, Part.opens 'consents'): the visitors' answers in the cookie banner, as the site's
-// Worker keeps them (consents.ts, packages/editor/worker/consent.js), newest first, so the site can show that a visitor said yes. Over
+// Worker keeps them (consentData.ts, packages/editor/worker/consent.js), newest first, so the site can show that a visitor said yes. Over
 // the list the search by consent id (the one the banner shows the visitor under "Cookieindstillinger", asked of the
 // Worker, so older answers are found too) and the order (kept in this browser); in the top bar the download of all of
 // them as CSV. Tapping one opens a sheet with when, the banner's version and each yes or no, and the button that deletes
@@ -25,7 +25,7 @@ import {
   ListItem,
 } from './ui';
 import type { Env } from './App';
-import { CONSENT_API, deleteConsents, loadConsents, type ConsentAnswer } from './consents';
+import { CONSENT_API, deleteConsents, loadConsents, type ConsentAnswer } from './consentData';
 import { CONSENT_CATEGORIES } from '../lib/cookieCategories.mjs';
 import { when } from './when';
 import { t } from './i18n';

package/src/Deleted.tsx

@@ -12,7 +12,7 @@ import { Button, listClass, BottomSheet, SheetTitle, EmptyNote, SheetBody, Probl
 import { fileKindOf, typeOf } from './images';
 import { fileIcons, FileView, kindOf } from './FileView';
 import { ask } from './ask';
-import { REDIRECT_FILES } from './redirects';
+import { REDIRECT_FILES } from './redirectData';
 import { slugOf, type Collection } from './schema';
 import { asWritten, collections } from './site';
 import { ConflictError, type DeletedFile, type RepoFile } from './github';

package/src/EntryForm.tsx

@@ -11,7 +11,7 @@ import { config, frontLeads, headingLooks, sectionLooks, sharing, standardPages,
 import { asWritten, placeOf, standardPageAt } from './site';
 import { ConflictError, type Change, type RepoFile } from './github';
 import { addressOf, moveRedirects, REDIRECTS, retarget } from './addresses';
-import { changesOf, flatten, readAll, REDIRECT_FILES, setRedirect } from './redirects';
+import { changesOf, flatten, readAll, REDIRECT_FILES, setRedirect } from './redirectData';
 import { TAB_ROUTES } from './Redirects';
 import { choose } from './ask';
 import { readFields, splitFrontmatter, writeFields } from './frontmatter.mjs';
@@ -409,7 +409,7 @@ function Form({
     const name = post || isNew ? address.split('/').at(-2)! : slugOf(base.path, collection.folder);
     const path = isNew || (post && moved) ? `${collection.folder}/${name}.md` : base.path;
     // A new page or post, or a new address: not where another page is, or an address the site sends on
-    // elsewhere (the files of the redirects as they are now, redirects.ts).
+    // elsewhere (the files of the redirects as they are now, redirectData.ts).
     let loaded: RepoFile[] = [];
     if (isNew || moved)
       try {
@@ -481,7 +481,7 @@ function Form({
     }
     let next = `---\n${yaml}\n---\n${body}`;
 
-    // The redirects (redirects.ts): a freed address no longer sends on (those that went on through it
+    // The redirects (redirectData.ts): a freed address no longer sends on (those that went on through it
     // first go straight to where it sent them), the old address sends on to the new one, the new
     // address is the page's (the editor's own redirect from it goes), and none sends on through another.
     let redirectChanges: Change[] = [];

package/src/FormFrame.tsx

@@ -10,7 +10,7 @@ import { ArrowSquareOut, Binoculars, Trash } from '@phosphor-icons/react';
 import Screen, { type Back } from './Screen';
 import { Button, Group, IconButton, IconLink, LoadingIndicator, type TabChoice, ListItem } from './ui';
 import { hasUnsaved, setUnsaved } from './deploy';
-import { askToNotify } from './notifications';
+import { askToNotify } from './notificationData';
 import { choose } from './ask';
 import { when } from './when';
 import { useSidebar } from './sidebar';
@@ -18,9 +18,9 @@ import type { Env } from './App';
 import { t } from './i18n';
 
 import type { Edit } from './schema';
-import type { EditorType } from './notifications';
+import type { EditorType } from './notificationData';
 
-// `kind`: what kind of notification it is (notifications.ts: `site`, `saved`, `failed`), kept under "Notifikationer";
+// `kind`: what kind of notification it is (notificationData.ts: `site`, `saved`, `failed`), kept under "Notifikationer";
 // without it, it is only shown at the bottom (something going on, a form that cannot be saved).
 export type Status = { text: string; error?: boolean; edit?: Edit; kind?: EditorType } | null;
 

package/src/Library.tsx

@@ -87,7 +87,7 @@ import { when } from './when';
 import { untilTime } from '../lib/notice.mjs';
 import { savedTheme, setTheme, shownMode, type Theme } from './theme';
 import { browserLocale, locale, localeName, locales, savedLocale, setLocale, siteLocale, siteT, siteText, t, type Locale } from './i18n';
-import { appType, EDITOR_TYPES, setDevice, setOn, useNotificationChoices } from './notifications';
+import { appType, EDITOR_TYPES, setDevice, setOn, useNotificationChoices } from './notificationData';
 import { snackbar } from '../lib/snackbar';
 import { ask } from './ask';
 import { pagesWith } from './BlockSettings';
@@ -738,7 +738,7 @@ export function Account({ user, files, onLogout }: { user: Viewer | null; files:
   );
 }
 
-// "Notifikationer" (notifications.ts): "På telefonen", a switch for each of the editor's types, and under the name of each
+// "Notifikationer" (notificationData.ts): "På telefonen", a switch for each of the editor's types, and under the name of each
 // installed app that sends any, a switch for each of its types (`notifications` in its index.ts).
 function NotificationChoices({ files }: { files: RepoFile[] }) {
   const { off, device } = useNotificationChoices();

package/src/Licenses.tsx

@@ -26,7 +26,7 @@ import {
   type LicenseWhere,
   type StoreLicenses,
   type ThirdParty,
-} from './licenses';
+} from './licenseData';
 
 export const LICENSES_ROUTE = 'licenser';