@morphemecms/cms 0.1.1-next-20261103223426 → 0.2.0

package/src/Media.tsx

@@ -23,7 +23,7 @@ import {
   X,
 } from '@phosphor-icons/react';
 import { moveRedirects, REDIRECTS } from './addresses';
-import { changesOf, flatten, readAll, REDIRECT_FILES } from './redirects';
+import { changesOf, flatten, readAll, REDIRECT_FILES } from './redirectData';
 import { ask } from './ask';
 import { dateName, headed, letterOf } from './Sheet';
 import Screen from './Screen';
@@ -501,7 +501,7 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
     setRenaming(true);
     env.notify({ text: t.common.saving });
     try {
-      // The redirects (redirects.ts): the old address sends on to the new one, and those that sent to
+      // The redirects (redirectData.ts): the old address sends on to the new one, and those that sent to
       // the old address send straight to the new one (no chain).
       const loaded = await env.load(REDIRECT_FILES);
       const all = readAll(loaded);

package/src/Notifications.tsx

@@ -1,5 +1,5 @@
 // "Notifikationer" (#notifikationer), which the bell in the top bar opens (Screen.tsx NotificationsLink): the
-// notifications of the editor and the apps (notifications.ts), newest first, each with when it came and, when it had
+// notifications of the editor and the apps (notificationData.ts), newest first, each with when it came and, when it had
 // one, a link to what it is about; an app's with the app's icon. Opening it marks them seen; at the top the bin clears
 // them and the sliders open "Konto", where each type is turned on or off.
 import { useEffect } from 'react';
@@ -8,7 +8,7 @@ import { siteName } from '@site/editor';
 import Screen from './Screen';
 import { EmptyNote, Group, IconButton, IconLink, ListItem } from './ui';
 import { apps } from './registry';
-import { clearNotifications, markSeen, useNotifications, type Notification } from './notifications';
+import { clearNotifications, markSeen, useNotifications, type Notification } from './notificationData';
 import { when } from './when';
 import { t } from './i18n';
 

package/src/Redirects.tsx

@@ -1,7 +1,7 @@
 // "Videresendelser" under Indstillinger › "Søgemaskineoptimering" (#seo/videresendelser): two rows with how many
 // each has, each opening a screen of its own.
 // "Alle videresendelser" (#seo/videresendelser/alle): every address of a page the site sends on elsewhere
-// (redirects.ts), by address, with where it sends to, and search. Tapping one opens a sheet where
+// (redirectData.ts), by address, with where it sends to, and search. Tapping one opens a sheet where
 // where it sends to can be changed, or the redirect deleted; "+" adds a new one (in the editor's own,
 // src/data/redirects.json). Each save is one commit, and none sends on through another afterwards
 // (flatten): a redirect to an address that is sent on goes straight to where that ends, and those
@@ -37,7 +37,7 @@ import {
 } from './ui';
 import type { Env } from './App';
 import type { RepoFile } from './github';
-import { changesOf, entriesOf, flatten, lookup, readAll, REDIRECT_FILES, setRedirect, type AllRedirects } from './redirects';
+import { changesOf, entriesOf, flatten, lookup, readAll, REDIRECT_FILES, setRedirect, type AllRedirects } from './redirectData';
 import type { Missing } from './notFound';
 import { when } from './when';
 import { headed, letterOf } from './Sheet';

package/src/Screen.tsx

@@ -16,7 +16,7 @@ import { settings, siteName } from '@site/editor';
 import { t } from './i18n';
 import { IconButton, IconLink, TabPanel, TabRow, TopAppBar, type TabChoice } from './ui';
 import { up } from './nav';
-import { unseen, useNotifications } from './notifications';
+import { unseen, useNotifications } from './notificationData';
 
 // `label` is the screen back goes to, named by the back arrow and the breadcrumbs. `guard` takes every
 // way out of the screen (back, the breadcrumbs and the logo) and goes it, after warning about changes

package/src/ThemeStore.tsx

@@ -110,7 +110,7 @@ const canUninstall = (id: string, files: RepoFile[]) =>
  * Each says true when it was saved. */
 function useThemeActions(env: Env) {
   const [saving, setSaving] = useState(false);
-  const recordOf = (x: ShownTheme): StoreRecord => ({ version: x.version, ref: x.ref, files: x.files });
+  const recordOf = (x: ShownTheme): StoreRecord => ({ version: x.version, ref: x.version, files: x.files });
 
   async function change(
     id: string,

package/src/apps.ts

@@ -44,7 +44,7 @@ import type { BlockData } from './blocks';
 import type { Field, FolderCollection, KindPart, Opens, OwnedList, PreviewVariant } from './schema';
 import type { ConsentCategory } from '../lib/cookieCategories.mjs';
 import type { AppCategory, AppCookie, AppNeeds, AppShot, StoreRecord } from './store';
-import type { ThirdParty } from './licenses';
+import type { ThirdParty } from './licenseData';
 import { config } from '@site/config';
 
 /** An app's settings, on its page once it is installed (#apps/<app>, AppList.tsx). */
@@ -101,7 +101,7 @@ export type AppScreen = { title: string; page: ComponentType<AppPageProps> };
  * the editor's parts and given the same `api`. */
 export type AppTab = { label: string; icon: Icon; page: ComponentType<AppPageProps> };
 
-/** The notifications an app sends ("Notifikationer", notifications.ts). `types`: each kind it sends, by its id, with its
+/** The notifications an app sends ("Notifikationer", notificationData.ts). `types`: each kind it sends, by its id, with its
  * name (in the site's language, shown with siteText), under "Konto" › "Notifikationer", where each can be turned off; it
  * sends no other. `check`: what it has to say now, asked with its `api` when the editor opens and every 15 minutes while
  * it is open; each comes once (by its `id`). */

package/src/checkSite.ts

@@ -5,7 +5,7 @@
 // screens under "Virksomheden" and "Blokke", the apps installed and their settings (src/apps/), and the
 // colours ("Farver": colours, readable together). A hidden block is not on the site, so it may be unfinished.
 // The rules of a page's template (collections.ts) too: what may be there, how many, and what must.
-// The redirects (redirects.ts): none sends on through another, and none in a loop. And the site's own rules
+// The redirects (redirectData.ts): none sends on through another, and none in a loop. And the site's own rules
 // (siteProblems in its rules.ts: a button that opens a promotion not on its page).
 // And the site's texts the editor has no translation of (untranslated).
 import { check } from './check';
@@ -37,7 +37,7 @@ import { appFolders } from './appFiles';
 import { colorPairs as shownPairs, sharedParts, translator, writtenApps, writtenBlockParts, writtenCollections } from './site';
 import { splitBlocks } from '../lib/blocks.mjs';
 import { appTexts, DEFAULTS_LOCALE, locales, siteLocale, t, type Texts } from './i18n';
-import { flatten, readAll, REDIRECT_FILES, type AllRedirects } from './redirects';
+import { flatten, readAll, REDIRECT_FILES, type AllRedirects } from './redirectData';
 
 const ratio = (n: number) => n.toLocaleString(config.locale, { maximumFractionDigits: 1 });
 

package/src/deploy.ts

@@ -1,6 +1,6 @@
 // After a save: tells when the site has been rebuilt with it. Each build writes the commit it was
 // made from to /editor/version.json (packages/editor/pages/editor/version.json.js), and the editor asks for that
-// until it is the saved commit or a later one. The message is a notification of the type `site` (notifications.ts),
+// until it is the saved commit or a later one. The message is a notification of the type `site` (notificationData.ts),
 // which also comes on the phone or computer when the editor is not on screen.
 // Each save says what it changed ("farver ændret", "side “Om” ændret", t.app.changes): right after it (savedText),
 // and, with the other saves since, when the website has been updated with them (changesText, App.tsx save).

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

@@ -1,4 +1,4 @@
-// "Consents" under "Privacy" (Consents.tsx, consents.ts), as in Danish (../da-DK/consents.ts).
+// "Consents" under "Privacy" (Consents.tsx, consentData.ts), as in Danish (../da-DK/consents.ts).
 import type { Messages } from '../en-US';
 
 export const consents: Messages['consents'] = {

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

@@ -78,7 +78,7 @@ export const apps = {
   searchStore: 'Search for apps',
   loadingStore: 'Loading apps',
   storeFailed: 'Couldn’t load the Appstore',
-  /** On "Appstore" when the site has none (config.store): only the site's own are there. */
+  /** On "Appstore" when the site's Worker has no store key: only the site's own are there. */
   noStore: 'The site has no Appstore',
   /** 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`,

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

@@ -1,4 +1,4 @@
-// "Samtykker" under "Privatliv" (Consents.tsx, consents.ts): the visitors' answers in the cookie banner.
+// "Samtykker" under "Privatliv" (Consents.tsx, consentData.ts): the visitors' answers in the cookie banner.
 export const consents = {
   title: 'Consents',
   intro: 'The visitors’ answers in the cookie banner, with the consent ID the banner shows them. They are deleted after 2 years.',

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

@@ -10,7 +10,7 @@ export const library = {
   notificationsNew: (count: number) => `Notifications, ${count} new`,
   noNotifications: 'No notifications',
   clearNotifications: 'Clear notifications',
-  /** On "Konto" › "Notifikationer" (Library.tsx NotificationChoices, notifications.ts). */
+  /** On "Konto" › "Notifikationer" (Library.tsx NotificationChoices, notificationData.ts). */
   /** The sliders on "Notifikationer": to "Konto", where they are turned on or off. */
   notificationChoices: 'Choose notifications',
   onDevice: 'On the phone',

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

@@ -1,6 +1,6 @@
 // "Licenser" under "Indstillinger" (Licenses.tsx): the third-party work the site and the editor are made with, and the
 // licences on an app's and a theme's page.
-import type { LicenseKind } from '../../licenses';
+import type { LicenseKind } from '../../licenseData';
 
 export const licenses = {
   /** The groups: the icon packs, what the editor and the site's own code bring, and each app and theme in use. */

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

@@ -1,4 +1,4 @@
-// "Videresendelser" (Redirects.tsx, redirects.ts).
+// "Videresendelser" (Redirects.tsx, redirectData.ts).
 export const redirects = {
   notLoaded: (error: string) => `Couldn’t load the redirects: ${error}`,
   noFrom: 'Type the address that should redirect.',
@@ -8,7 +8,7 @@ export const redirects = {
   alreadyRedirects: (from: string) => `There’s already a redirect from ${from}. Edit it in the list.`,
   /** Deleting one; `via`: how many other addresses send on through it. */
   deleteAsk: (from: string, via: number) => `Delete the redirect from ${from}? The address then shows the not-found page.`,
-  /** redirects.ts: the addresses that come back to one, joined by arrows. */
+  /** redirectData.ts: the addresses that come back to one, joined by arrows. */
   loop: (addresses: string) => `The redirects would go in a loop (${addresses}).`,
   /** checkSite.ts: a redirect that sends on through another, before the site is built. */
   chain: (from: string, to: string, end: string) =>

package/src/store.ts

@@ -1,13 +1,13 @@
 // The app store ("Indstillinger" › "Appstore", #indstillinger/appstore, AppList.tsx): the apps that are not in the site
-// and can be installed. The store is a GitHub repository (config.store) with a catalog (catalog.json): each app with
+// and can be installed. The store is reached through the site's Worker (/api/store/catalog, /api/store/files/<oid>;
+// the Worker holds the site's key to it, and the editor never calls the store itself): each app of its catalog with
 // its id, its version and the version of the contract it is written to (APP_API), its name, who made it, its icon
 // (Phosphor's name), what it does (in a sentence, and more fully), its category and the words it is found by, what it
 // adds (its blocks, the lists it brings and its kinds of the site's lists), what it needs (needsOf), the cookies it
 // sets, its pictures, what is new in each version (its release notes), its texts in the editor's other languages (as an app's texts.ts), its
-// licence and those of the third-party work it brings (StoreLicenses), and where its folder is in the
-// repository at which commit, file by file with their blob ids.
-// Installing one copies its folder into the site's (config.apps.folder/<id>/, at that commit, each file checked
-// against its id), with a note of where it came from (store.json, StoreRecord), and puts it among the apps installed,
+// licence and those of the third-party work it brings (StoreLicenses), and its folder file by file with their blob ids.
+// Installing one copies its folder into the site's (config.apps.folder/<id>/, each file checked against its id), with a
+// note of where it came from (store.json, StoreRecord; its `ref` is the version), and puts it among the apps installed,
 // in one commit (appChanges); the site's next build has it. Updating copies the newer version over it, and
 // uninstalling deletes the folder, also in one commit each. What was made with it (its settings, its entries) is the
 // site's data and stays.
@@ -17,26 +17,19 @@
 // with its store.json), and it can then be chosen under "Udseende" › "Temaer"; updating and uninstalling are as for
 // an app (themeChanges), and the theme in use cannot be uninstalled.
 // The catalog is what is released: an app's or a theme's entry is written from its folder by `npm run store:release
-// -- <id>` (scripts/store-release.mjs) when the owner releases it, not by each merge (packages/editor/scripts/releases.mjs). Until the real store exists, it is this repository's own (store/catalog.json, with the apps' folders in
-// src/apps/ and the themes' in src/themes/).
+// -- <id>` (scripts/store-release.mjs) when the owner releases it, not by each merge (packages/editor/scripts/releases.mjs).
+// A site whose Worker has no store key has no store (storeConnected): "Appstore" has only the site's own.
 import { config } from '@site/config';
-import { loadBytes, loadFrom, type Change, type RepoFile } from './github';
+import type { Change, RepoFile } from './github';
+import { blobId } from '../lib/git.mjs';
 import { locale, t } from './i18n';
 import { hooksOf, type AppHook } from '../lib/hooks';
-import type { StoreLicenses } from './licenses';
+import type { StoreLicenses } from './licenseData';
+import { APP_API, THEME_API } from '../lib/contracts.mjs';
+import { RECORD, STANDARD, isText, validApp, validTheme } from '../lib/storeEntries.mjs';
 
-/** The version of the contract between the editor and an app (apps.ts: defineApp, its folder, and the theme's parts it
- * draws with: the standard blocks' and the UI components, @theme/blocks/… and @theme/ui/…, imported from
- * @morphemecms/cms): an app in the store says which it is written to, and only those the editor can run are
- * offered. Raised when an app written to the one before no longer works. */
-export const APP_API = 1;
-
-/** The version of the contract between the editor and a theme (what a theme must and may have, "Hvad et tema må" in
- * CLAUDE.md, themeProblems in packages/editor/site/theme.mjs, the standard theme's UI parts with Material 3's names and
- * variants, the motion scheme's --motion-* springs and motionSpring/motionTiming (@morphemecms/cms/lib/motion),
- * and the classes it styles): only themes written to it are offered. Raised when a theme written to the one before no
- * longer works. */
-export const THEME_API = 2;
+// The contracts this editor runs (lib/contracts.mjs, also read by the site's Worker).
+export { APP_API, THEME_API };
 
 /** The kinds of apps, a filter in the store (t.apps.categories). */
 export const appCategories = ['booking', 'newsletter', 'payment', 'analytics', 'content', 'design'] as const;
@@ -142,14 +135,12 @@ export type StoreApp = {
   adds: { blocks: StoreAdd[]; lists: StoreAdd[]; kinds: (StoreAdd & { list: string })[] };
   /** Its texts in the editor's other languages, by the text as it is written. */
   texts?: Partial<Record<string, Record<string, string>>>;
-  /** Where its folder is in the store's repository, and at which commit. */
-  path: string;
-  ref: string;
+  /** Its folder, file by file. */
   files: StoreFile[];
 };
 
 /** A theme in the store's catalog: as its theme.json has it (its texts by the editor's language), its pictures of a
- * site in it (screenshots/<n>-<key>.jpg, t.library.themeShots) and where its folder is in the store's repository. */
+ * site in it (screenshots/<n>-<key>.jpg, t.library.themeShots) and its folder, file by file. */
 export type StoreTheme = {
   id: string;
   version: string;
@@ -168,8 +159,6 @@ export type StoreTheme = {
   /** The icon packs it brings (its icon-packs/<id>/, with their pack.json: name, who made it, licence), installed with it
    * and chosen under "Udseende" › "Ikonpakker". */
   iconPacks?: { id: string; name: string; author: string; license: string }[];
-  path: string;
-  ref: string;
   files: StoreFile[];
 };
 
@@ -185,7 +174,8 @@ export type ShownTheme = Omit<StoreTheme, 'description' | 'highlights' | 'releas
  * it (for the commits), and all its words in both, for the search. */
 export type ShownApp = StoreApp & { written: string; words: string };
 
-/** Where an app installed from the store came from: its version, the store's commit and its files (store.json). */
+/** Where an app installed from the store came from: its version, the version again as `ref` (an older store.json has
+ * the store's commit there) and its files (store.json). */
 export type StoreRecord = { version: string; ref: string; files: StoreFile[] };
 
 /** The store's address in the editor, under "Indstillinger" (its apps; its themes at STORE_THEMES), its address
@@ -200,8 +190,8 @@ export const DEVELOPER_ROUTE = 'apps/udvikler';
 export const appFolder = (id: string) => `${config.apps.folder}/${id}`;
 /** A theme's folder in the site; the standard theme's is always there. */
 export const themeFolder = (id: string) => `${config.themes}/${id}`;
-export const STANDARD_THEME = 'saturn';
-export const RECORD = 'store.json';
+export const STANDARD_THEME = STANDARD;
+export { RECORD };
 
 /** Whether a version is newer than another ("1.10.0" than "1.9.2"). */
 export function newer(a: string, b: string): boolean {
@@ -230,27 +220,8 @@ const notesOf = (x: unknown) =>
     ? Object.fromEntries(Object.entries(x).filter((e): e is [string, string] => isText(e[1])))
     : undefined;
 
-const isText = (v: unknown): v is string => typeof v === 'string' && v.trim() !== '';
-const isAdd = (v: any) => isText(v?.label) && isText(v?.icon);
-const ID = /^[a-z0-9][a-z0-9-]*$/;
-// A file's path in an app's folder: only within it.
-const isPath = (v: unknown) => isText(v) && v.split('/').every((part) => part !== '' && part !== '.' && part !== '..');
-
-/** Whether an entry of the catalog has what an app needs, written to the contract the editor runs, with files only in
- * its own folder, and not the store's own address. */
-function valid(a: any): a is StoreApp {
-  return (
-    ID.test(a?.id ?? '') &&
-    ![STORE_BEFORE, DEVELOPER_ROUTE].includes(`apps/${a.id}`) &&
-    isText(a.version) &&
-    a.api === APP_API &&
-    [a.label, a.publisher, a.icon, a.hint, a.path, a.ref].every(isText) &&
-    Array.isArray(a.files) &&
-    a.files.length > 0 &&
-    a.files.every((f: any) => isText(f?.oid) && isPath(f?.path) && f.path !== RECORD) &&
-    ['blocks', 'lists', 'kinds'].every((k) => Array.isArray(a.adds?.[k]) && a.adds[k].every(isAdd))
-  );
-}
+const validStoreApp = (a: any): a is StoreApp => validApp(a, APP_API);
+const validStoreTheme = (x: any): x is StoreTheme => validTheme(x, THEME_API);
 
 /** The apps in a catalog (catalog.json, as text) the editor can install, with their texts in its language. */
 export function catalogApps(text: string): ShownApp[] {
@@ -261,7 +232,7 @@ export function catalogApps(text: string): ShownApp[] {
     return [];
   }
   const apps: unknown[] = Array.isArray(json?.apps) ? json.apps : [];
-  return apps.filter(valid).map((a) => {
+  return apps.filter(validStoreApp).map((a) => {
     const own = a.texts?.[locale];
     const say = (s: string) => own?.[s] ?? s;
     const add = <A extends StoreAdd>(x: A): A => ({ ...x, label: say(x.label), ...(x.hint ? { hint: say(x.hint) } : {}) });
@@ -291,20 +262,6 @@ export function catalogApps(text: string): ShownApp[] {
   });
 }
 
-/** Whether an entry of the catalog has what a theme needs, written to the contract the editor runs, with files only
- * in its own folder; never the standard theme, which every site has. */
-function validTheme(x: any): x is StoreTheme {
-  return (
-    ID.test(x?.id ?? '') &&
-    x.id !== STANDARD_THEME &&
-    x.api === THEME_API &&
-    [x.version, x.name, x.author, x.icon, x.path, x.ref].every(isText) &&
-    Array.isArray(x.files) &&
-    x.files.length > 0 &&
-    x.files.every((f: any) => isText(f?.oid) && isPath(f?.path) && f.path !== RECORD)
-  );
-}
-
 /** The themes in a catalog (catalog.json, as text) the editor can install, with their texts in its language (else the
  * first they have). */
 export function catalogThemes(text: string): ShownTheme[] {
@@ -316,7 +273,7 @@ export function catalogThemes(text: string): ShownTheme[] {
   }
   const themes: unknown[] = Array.isArray(json?.themes) ? json.themes : [];
   const inLocale = <T>(x?: Record<string, T>) => x && (x[locale] ?? Object.values(x)[0]);
-  return themes.filter(validTheme).map((x) => {
+  return themes.filter(validStoreTheme).map((x) => {
     const description = inLocale(x.description);
     const highlights = inLocale(x.highlights) ?? [];
     return {
@@ -338,49 +295,72 @@ export function catalogThemes(text: string): ShownTheme[] {
 // The catalog, read once while the editor is open (again after it could not be read).
 let catalog: Promise<string> | null = null;
 
-/** Whether the site has an app store (config.store); without one, "Appstore" has only the site's own apps and themes. */
-export const hasStore = !!config.store;
-
-// The store's repository; only asked for what is in its catalog, so never without one.
-const storeRepo = () => {
-  if (!config.store) throw new Error(t.apps.noStore);
-  return config.store;
-};
-
+// The catalog as the site's Worker passes it on: `{ connected: false }` when the site has no key to the store.
 function catalogText(): Promise<string> {
-  if (!config.store) return Promise.resolve('{}');
-  catalog ??= loadFrom(config.store, config.store.branch, [config.store.catalog]).then(([file]) => {
-    if (file?.text == null) throw new Error(t.apps.storeFailed);
-    return file.text;
-  });
+  catalog ??= fetch('/api/store/catalog').then(
+    (res) => {
+      if (!res.ok) throw new Error(t.apps.storeFailed);
+      return res.text();
+    },
+    () => {
+      throw new Error(t.apps.storeFailed);
+    },
+  );
   catalog.catch(() => (catalog = null));
   return catalog;
 }
 
+/** 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> =>
+  catalogText().then((text) => {
+    try {
+      return JSON.parse(text)?.connected !== false;
+    } catch {
+      return true;
+    }
+  });
+
 /** The store's apps. Fails when the catalog cannot be read. */
 export const readCatalog = (): Promise<ShownApp[]> => catalogText().then(catalogApps);
 
 /** The store's themes. Fails when the catalog cannot be read. */
 export const readThemes = (): Promise<ShownTheme[]> => catalogText().then(catalogThemes);
 
-/** An app's (or a theme's) files from the store (its folder at the catalog's commit), each checked against its blob id. */
+// A file from the store by its blob id (through the site's Worker), checked against the id.
+async function readFile(oid: string): Promise<Uint8Array> {
+  const res = await fetch(`/api/store/files/${oid}`);
+  if (!res.ok) throw new Error(t.apps.storeFailed);
+  const bytes = new Uint8Array(await res.arrayBuffer());
+  if ((await blobId(bytes)) !== oid) throw new Error(t.apps.storeFailed);
+  return bytes;
+}
+
+// The text of a file, or null when it is binary (a NUL, or not UTF-8), as GitHub told them apart before.
+function textOf(bytes: Uint8Array): string | null {
+  if (bytes.includes(0)) return null;
+  try {
+    // ignoreBOM keeps a leading BOM in the text, so it encodes back to the same bytes (and the same blob id).
+    return new TextDecoder('utf-8', { fatal: true, ignoreBOM: true }).decode(bytes);
+  } catch {
+    return null;
+  }
+}
+
+/** An app's (or a theme's) files from the store, each checked against its blob id; text files as text. */
 export async function readApp(app: {
-  path: string;
-  ref: string;
   files: StoreFile[];
   label?: string;
   name?: string;
 }): Promise<{ path: string; content: string | Uint8Array }[]> {
-  const found = await loadFrom(
-    storeRepo(),
-    app.ref,
-    app.files.map((f) => `${app.path}/${f.path}`),
-  );
   return Promise.all(
     app.files.map(async (f) => {
-      const file = found.find((x) => x.path === `${app.path}/${f.path}`);
-      if (!file || file.oid !== f.oid) throw new Error(t.apps.storeBroken(app.label ?? app.name ?? app.path));
-      return { path: f.path, content: file.text ?? (await loadBytes(f.oid, undefined, storeRepo())) };
+      try {
+        const bytes = await readFile(f.oid);
+        return { path: f.path, content: textOf(bytes) ?? bytes };
+      } catch {
+        throw new Error(t.apps.storeBroken(app.label ?? app.name ?? f.path));
+      }
     }),
   );
 }
@@ -395,7 +375,7 @@ export async function readScreenshots(app: StoreApp): Promise<{ src: string; lab
       const type = types[x.file.split('.').pop()!.toLowerCase()];
       if (!oid || !type) return null;
       try {
-        const bytes = await loadBytes(oid, undefined, storeRepo());
+        const bytes = await readFile(oid);
         return { src: URL.createObjectURL(new Blob([bytes as BlobPart], { type })), label: x.label };
       } catch {
         return null;
@@ -413,7 +393,7 @@ export async function readThemeScreenshots(theme: Pick<StoreTheme, 'screenshots'
       const oid = theme.files.find((f) => f.path === `${SCREENSHOTS}/${x.file}`)?.oid;
       if (!oid) return null;
       try {
-        const bytes = await loadBytes(oid, undefined, storeRepo());
+        const bytes = await readFile(oid);
         return { key: x.key, src: URL.createObjectURL(new Blob([bytes as BlobPart], { type: 'image/jpeg' })) };
       } catch {
         return null;

package/src/themes.ts

@@ -5,7 +5,7 @@
 // from the store (packages/editor/src/store.ts), where it came from (store.json) are read: their code is not loaded.
 import chosen from '@data/theme.json';
 import { STANDARD_THEME, type StoreRecord } from './store';
-import type { ThirdParty } from './licenses';
+import type { ThirdParty } from './licenseData';
 
 export type ThemeInfo = {
   /** Its folder in src/themes/, as saved in src/data/theme.json. */

package/starter/README.md

@@ -9,6 +9,7 @@ Editoren, standardtemaet *Material* og sitets Worker er pakken [`@morphemecms/cm
 
 - `src/site/config.ts`: sitets navn, domæne, sprog og GitHub-repo; resten er pakkens standard (`defineSite`).
 - `src/site/worker.js`: det, Workeren har fra sitet.
+- Hemmeligheden `MORPHEME_STORE_KEY` (`npx wrangler secret put MORPHEME_STORE_KEY`) forbinder sitet til Morpheme-butikken; uden den har *Appstore* kun sitets egne apps og temaer.
 - `src/content/`: siderne og indlæggene, `src/data/`: sitets indstillinger, `public/`: billeder, logo og ikoner.
 - `src/themes/` og `src/apps/`: temaer og apps fra appbutikken, når der er installeret nogen.
 

package/theme/styles/ui.css

@@ -1272,7 +1272,7 @@
 /* ---- Containment: Dialog, BottomSheet, Carousel ---- */
 /*
   Dialogs (Dialog.tsx, dialogClass, dialogClassOf, dialogModalClass, dialogFullScreenModalClass, and dialog() in
-  dialog.ts for what a modal one does in a browser; m3.material.io/components/dialogs): .dialog is the container (a
+  dialogControl.ts for what a modal one does in a browser; m3.material.io/components/dialogs): .dialog is the container (a
   pop-up's box, the cookie question), and .dialog-modal the <dialog> it is shown in over the page, in the middle with
   the scrim behind it (a pop-up, Popup.astro). With its parts it is Material's basic dialog, .dialog-basic: evt. its
   icon (.dialog-icon, centred over the headline with .dialog-with-icon), .dialog-headline, .dialog-supporting-text,
@@ -1290,7 +1290,7 @@
     --dialog-full-screen-max-width, --dialog-full-screen-headline-size   a full-screen dialog from 48rem, and its
                      headline in its header
   Bottom sheets (BottomSheet.tsx, bottomSheetClass, bottomSheetContainerClass, and bottomSheet() and
-  standardBottomSheet() in bottomSheet.ts for what it does in a browser, bottomSheet.script.ts on the site;
+  standardBottomSheet() in bottomSheetControl.ts for what it does in a browser, bottomSheet.script.ts on the site;
   m3.material.io/components/bottom-sheets): a modal one's <dialog> is .bottom-sheet (an app's: Calendly's calendar), at
   most 44rem wide and nearly as high as the screen, from the bottom on a phone and in the middle of the screen from
   48rem (a dialog there, rounded all round, without the drag handle; with .bottom-sheet-fit as high as what is in
@@ -1669,7 +1669,7 @@
   }
 
   /* A standard bottom sheet: at the bottom of the screen with the page usable behind it, no scrim; as high as the state
-     it rests in (data-state), its height followed by bottomSheet.ts while it moves. 100cqh is the screen's height, or
+     it rests in (data-state), its height followed by bottomSheetControl.ts while it moves. 100cqh is the screen's height, or
      the frame's that is a size container (the editor's drawing, which holds it with contain: layout). */
   .bottom-sheet-standard {
     position: fixed;
@@ -3866,7 +3866,7 @@
   .divider-inset (in from the start) or .divider-middle-inset (in from both sides), and .divider-vertical (top to
   bottom, between things side by side).
     --divider-color, --divider-thickness, --divider-inset   the line, and how far in an inset one starts
-  Side sheets (SideSheet.tsx, sideSheetClass, sideSheetContainerClass, and sideSheet() in sideSheet.ts for what a modal
+  Side sheets (SideSheet.tsx, sideSheetClass, sideSheetContainerClass, and sideSheet() in sideSheetControl.ts for what a modal
   one does in a browser; m3.material.io/components/side-sheets): .side-sheet-container with its kind,
   .side-sheet-standard (beside what it is about, with a line between) or .side-sheet-modal (over the page, in the
   <dialog> .side-sheet at the side of the screen, over the scrim like a dialog's); in it .side-sheet-header

package/theme/ui/BottomSheet.tsx

@@ -3,14 +3,14 @@
 // close button, `closeLabel`), what it shows (`children`, filling the rest; what stands in place of a frame while it
 // loads has bottomSheetCoverClass) and evt. a footer (`footer`). Its kind (`kind`) is Material's:
 // - 'modal' (the default): over the page and its scrim, in a <dialog> with bottomSheetClass (an app's: Calendly's
-//   Sheet.astro), which bottomSheet() in bottomSheet.ts opens, closes and lets be dragged down; in the editor only
+//   Sheet.astro), which bottomSheet() in bottomSheetControl.ts opens, closes and lets be dragged down; in the editor only
 //   drawn, as high as `height` says.
 // - 'standard': at the bottom of the screen with the page usable behind it, without a scrim, a <section> named by its
 //   headline. It rests in one of its states (`state`, where it starts: 'collapsed', only the handle and the header;
 //   'half-expanded', at most half the screen's height; 'expanded', as high as what it shows, nearly to the top; or
 //   'hidden'), and its handle is a button (`dragHandleLabel`, what it says to a screen reader) that is dragged between
 //   them or tapped to expand and collapse it; with a close button it can be hidden. On the site bottomSheet.script.ts
-//   lets it be dragged (standardBottomSheet() in bottomSheet.ts, which a block's or an app's script can also use); in
+//   lets it be dragged (standardBottomSheet() in bottomSheetControl.ts, which a block's or an app's script can also use); in
 //   the editor it is drawn in its state and dragged here, at the bottom of its frame (which holds it with
 //   contain: layout, and is a size container).
 // The editor's own sheets (choices, fields) are modal ones in a <dialog> with bottomSheetFitClass, as high as what is in
@@ -21,7 +21,7 @@
 import { useEffect, useRef, type ReactNode } from 'react';
 import { useOnSite } from '@morphemecms/cms/src/standard/view';
 import IconButton from '@theme/ui/IconButton';
-import { standardBottomSheet } from '@theme/ui/bottomSheet';
+import { standardBottomSheet } from '@theme/ui/bottomSheetControl';
 
 /** The kinds of a bottom sheet, and the states a standard one rests in, as Material 3 names them. */
 export type BottomSheetKind = 'modal' | 'standard';

package/theme/ui/Dialog.tsx

@@ -10,7 +10,7 @@
 //   (`divider`), and under them what it shows (`supportingText` and `children`, scrolling). From 48rem, where Material
 //   shows it as a dialog, it is in the middle of the screen over the scrim, with the same header.
 // Shown modally it is in a <dialog> with dialogModalClass (a full-screen one with dialogFullScreenModalClass), which
-// dialog() in dialog.ts (or the script that shows it: Popup.astro) opens and closes. How it looks is the theme's
+// dialog() in dialogControl.ts (or the script that shows it: Popup.astro) opens and closes. How it looks is the theme's
 // (--dialog-*). Other attributes go on it, and `className` after its own classes (its place). An Astro component
 // without React gives an element the same classes with dialogClass.
 import type { ReactNode } from 'react';

package/theme/ui/SideSheet.tsx

@@ -3,7 +3,7 @@
 // close button, `closeLabel`, and what it does in the editor, `onClose`; none without it), what it shows (`children`, scrolling when it is long) and evt. its
 // actions at the bottom (`actions`: buttons). Its kind (`kind`): 'standard', beside what it is about on the page, an
 // <aside> named by its headline, its place the page's; or 'modal', over the page in a <dialog> with sideSheetClass over
-// the scrim, which sideSheet() in sideSheet.ts opens, closes and lets slide in from the side (the <dialog> gets
+// the scrim, which sideSheet() in sideSheetControl.ts opens, closes and lets slide in from the side (the <dialog> gets
 // aria-labelledby with `headlineId`). How it looks is the theme's (--side-sheet-*). In the editor only drawn, as high as
 // its place.
 import type { ReactNode } from 'react';

package/theme/ui/bottomSheet.script.ts

@@ -1,7 +1,7 @@
 // What a standard bottom sheet (BottomSheet.tsx with kind 'standard') does on the site: it can be dragged between its
-// states and tapped open and closed (standardBottomSheet in bottomSheet.ts). Run on every page by the theme's Base.astro
+// states and tapped open and closed (standardBottomSheet in bottomSheetControl.ts). Run on every page by the theme's Base.astro
 // (blockScripts, packages/editor/site/blockScripts.ts); without a standard bottom sheet on the page it does nothing.
-import { standardBottomSheet } from '@theme/ui/bottomSheet';
+import { standardBottomSheet } from '@theme/ui/bottomSheetControl';
 
 export default function bottomSheets() {
   document.querySelectorAll<HTMLElement>('[data-bottom-sheet-standard]').forEach((sheet) => standardBottomSheet(sheet));

package/worker/consent.js

@@ -1,5 +1,5 @@
 // The visitors' answers in the cookie banner, so the site can show that a visitor said yes (GDPR article 7(1)): the
-// consent log, "Samtykker" under "Privatliv" in the editor (packages/editor/src/consents.ts, Consents.tsx).
+// consent log, "Samtykker" under "Privatliv" in the editor (packages/editor/src/consentData.ts, Consents.tsx).
 // Kept in Cloudflare D1 (the binding CONSENT in wrangler.jsonc), never in the repository: one row per answer, with the
 // random consent id the visitor's browser keeps (consentId in src/scripts/tracking.ts, shown in the banner under
 // "Cookieindstillinger"), when, the yes or no to each category the banner asked about, and the banner it was given in

package/worker/index.js

@@ -13,6 +13,8 @@
 // - GitHub sign-in for the editor at /editor/ (/oauth/*, packages/editor/worker/oauth.js), kept in a cookie only the Worker reads
 //   (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.
 // - 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.
@@ -32,6 +34,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 { handleStore } from './store.js';
 import { handleR2 } from './r2-status.js';
 import { publishScheduled, SCHEDULED_LIST } from './publish.js';
 import { commitFiles, readFiles } from './github.js';
@@ -143,6 +146,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.startsWith('/api/store/')) return handleStore(request, env, ctx);
     if (/^\/api\/push(\/wait)?\/?$/.test(url.pathname)) return handlePush(request, env);
     const answer = appAnswer(request, url, env, ctx);
     if (answer) return answer;