@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/theme.ts

@@ -1,90 +1,90 @@
-// Light or dark: as the phone or computer is set (auto), or always light or dark, picked on the account
-// and kept in this browser. It is set on <html> as data-theme, which the site's colours follow
-// (the theme's styles/global.css); the script in the head of packages/editor/pages/editor/index.astro does the same
-// before the page is drawn, so it does not flash in the other colours. Its own key, so the site's
-// choice (`theme`) is not changed by the editor's.
-import { colorsCss, isColor, type Colors } from '../lib/colors';
-import { motionCss, type MotionScheme } from '../lib/motion';
-
-export type Theme = 'light' | 'auto' | 'dark';
-
-const KEY = 'editor-theme';
-
-export function savedTheme(): Theme {
-  try {
-    const t = localStorage.getItem(KEY);
-    return t === 'light' || t === 'dark' ? t : 'auto';
-  } catch {
-    return 'auto';
-  }
-}
-
-export function setTheme(theme: Theme) {
-  try {
-    if (theme === 'auto') localStorage.removeItem(KEY);
-    else localStorage.setItem(KEY, theme);
-  } catch {}
-  applyTheme(theme);
-}
-
-// The colour of the phone's top bar (the theme-color tags) follows a chosen theme too: each tag has the
-// colour of its own mode in data-color (packages/editor/pages/editor/index.astro), and a picked mode puts its
-// colour in both.
-const bars = () => Array.from(document.querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]'));
-const isDark = (m: HTMLMetaElement) => m.media.includes('dark');
-
-// A screen that shows one mode at a time (Farver) holds the editor in it while it is open, whatever is
-// picked on the account; null lets go again. A change of the site's colours meanwhile (applyColors)
-// keeps it.
-let held: 'light' | 'dark' | null = null;
-
-export function holdTheme(mode: 'light' | 'dark' | null) {
-  held = mode;
-  applyTheme(savedTheme());
-}
-
-/** The mode the editor is shown in now: the one picked, or, on Auto, the phone's or computer's. */
-export function shownMode(): 'light' | 'dark' {
-  const theme = held ?? savedTheme();
-  if (theme !== 'auto') return theme;
-  return matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
-
-export function applyTheme(chosen: Theme) {
-  const theme = held ?? chosen;
-  const root = document.documentElement;
-  if (theme === 'auto') delete root.dataset.theme;
-  else root.dataset.theme = theme;
-  const all = bars();
-  const picked = all.find((m) => isDark(m) === (theme === 'dark'));
-  for (const m of all) m.content = (theme === 'auto' ? m.dataset.color : picked?.dataset.color) ?? m.content;
-}
-
-// The site's colours (colors.json, "Farver") as the editor has loaded them, in place of the ones its page
-// was built with, so a change shows at once, before the site is built again: the CSS (colorsCss) in the
-// <style> of the page, and the top bar in the background's colour.
-export function applyColors(colors: Colors) {
-  let css: string;
-  try {
-    css = colorsCss(colors);
-  } catch {
-    return;
-  }
-  const style = document.getElementById('site-colors');
-  if (style && style.textContent !== css) style.textContent = css;
-  for (const m of bars()) {
-    const bg = colors[isDark(m) ? 'dark' : 'light'].bg;
-    if (isColor(bg)) m.dataset.color = bg;
-  }
-  applyTheme(savedTheme());
-}
-
-// How the site moves ("Bevægelse") as the editor has loaded it, in place of the scheme its page was built with, so a new
-// choice shows at once, before the site is built again: its springs (motionCss) in the <style> of the page, and its name
-// on <html> for what animates in a script.
-export function applyMotion(scheme: MotionScheme) {
-  const css = motionCss(scheme);
-  const style = document.getElementById('site-motion');
-  if (style && style.textContent !== css) style.textContent = css;
-  document.documentElement.dataset.motionScheme = scheme;
-}
+// Light or dark: as the phone or computer is set (auto), or always light or dark, picked on the account
+// and kept in this browser. It is set on <html> as data-theme, which the site's colours follow
+// (the theme's styles/global.css); the script in the head of packages/editor/pages/editor/index.astro does the same
+// before the page is drawn, so it does not flash in the other colours. Its own key, so the site's
+// choice (`theme`) is not changed by the editor's.
+import { colorsCss, isColor, type Colors } from '../lib/colors';
+import { motionCss, type MotionScheme } from '../lib/motion';
+
+export type Theme = 'light' | 'auto' | 'dark';
+
+const KEY = 'editor-theme';
+
+export function savedTheme(): Theme {
+  try {
+    const t = localStorage.getItem(KEY);
+    return t === 'light' || t === 'dark' ? t : 'auto';
+  } catch {
+    return 'auto';
+  }
+}
+
+export function setTheme(theme: Theme) {
+  try {
+    if (theme === 'auto') localStorage.removeItem(KEY);
+    else localStorage.setItem(KEY, theme);
+  } catch {}
+  applyTheme(theme);
+}
+
+// The colour of the phone's top bar (the theme-color tags) follows a chosen theme too: each tag has the
+// colour of its own mode in data-color (packages/editor/pages/editor/index.astro), and a picked mode puts its
+// colour in both.
+const bars = () => Array.from(document.querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]'));
+const isDark = (m: HTMLMetaElement) => m.media.includes('dark');
+
+// A screen that shows one mode at a time (Farver) holds the editor in it while it is open, whatever is
+// picked on the account; null lets go again. A change of the site's colours meanwhile (applyColors)
+// keeps it.
+let held: 'light' | 'dark' | null = null;
+
+export function holdTheme(mode: 'light' | 'dark' | null) {
+  held = mode;
+  applyTheme(savedTheme());
+}
+
+/** The mode the editor is shown in now: the one picked, or, on Auto, the phone's or computer's. */
+export function shownMode(): 'light' | 'dark' {
+  const theme = held ?? savedTheme();
+  if (theme !== 'auto') return theme;
+  return matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function applyTheme(chosen: Theme) {
+  const theme = held ?? chosen;
+  const root = document.documentElement;
+  if (theme === 'auto') delete root.dataset.theme;
+  else root.dataset.theme = theme;
+  const all = bars();
+  const picked = all.find((m) => isDark(m) === (theme === 'dark'));
+  for (const m of all) m.content = (theme === 'auto' ? m.dataset.color : picked?.dataset.color) ?? m.content;
+}
+
+// The site's colours (colors.json, "Farver") as the editor has loaded them, in place of the ones its page
+// was built with, so a change shows at once, before the site is built again: the CSS (colorsCss) in the
+// <style> of the page, and the top bar in the background's colour.
+export function applyColors(colors: Colors) {
+  let css: string;
+  try {
+    css = colorsCss(colors);
+  } catch {
+    return;
+  }
+  const style = document.getElementById('site-colors');
+  if (style && style.textContent !== css) style.textContent = css;
+  for (const m of bars()) {
+    const bg = colors[isDark(m) ? 'dark' : 'light'].bg;
+    if (isColor(bg)) m.dataset.color = bg;
+  }
+  applyTheme(savedTheme());
+}
+
+// How the site moves ("Bevægelse") as the editor has loaded it, in place of the scheme its page was built with, so a new
+// choice shows at once, before the site is built again: its springs (motionCss) in the <style> of the page, and its name
+// on <html> for what animates in a script.
+export function applyMotion(scheme: MotionScheme) {
+  const css = motionCss(scheme);
+  const style = document.getElementById('site-motion');
+  if (style && style.textContent !== css) style.textContent = css;
+  document.documentElement.dataset.motionScheme = scheme;
+}

package/src/themeUi.ts

@@ -1,97 +1,97 @@
-// The theme's UI parts (packages/editor/theme/ui/, Material 3's names), which the editor draws with too:
-// on its own screens (packages/editor/src/ui.tsx, which takes nothing of the theme from anywhere else) and on "Dele" ›
-// "UI-komponenter" (BlockParts.tsx). Only the theme's parts, nothing of the editor, so the editor's parts can be made of them as
-// it loads.
-export { default as SiteButton, buttonShapes, buttonSizes } from '@theme/ui/Button';
-export { default as SiteIconButton, iconButtonWidths } from '@theme/ui/IconButton';
-export {
-  default as SiteTextField,
-  textFieldClass as siteTextFieldClass,
-  textFieldContainerClass as siteTextFieldContainerClass,
-  textFieldInputClass as siteTextFieldInputClass,
-  TextFieldButton as SiteTextFieldButton,
-} from '@theme/ui/TextField';
-export { default as SiteCheckbox } from '@theme/ui/Checkbox';
-export { default as SiteChip, chipKinds } from '@theme/ui/Chip';
-export { default as SiteChipSet, chipSetLayouts } from '@theme/ui/ChipSet';
-export { default as SiteDialog, dialogModalClass as siteDialogModalClass } from '@theme/ui/Dialog';
-export {
-  default as SiteBottomSheet,
-  BottomSheetHeader as SiteBottomSheetHeader,
-  bottomSheetCoverClass,
-  bottomSheetContainerClass as siteBottomSheetContainerClass,
-  bottomSheetFitClass as siteBottomSheetFitClass,
-  bottomSheetFullClass as siteBottomSheetFullClass,
-} from '@theme/ui/BottomSheet';
-export { default as SiteCarousel } from '@theme/ui/Carousel';
-export { default as SiteCard, cardKinds, cardClass as siteCardClass } from '@theme/ui/Card';
-export {
-  default as SiteList,
-  ListItem as SiteListItem,
-  ListItemLeadingIcon as SiteListItemLeadingIcon,
-  listClass as siteListClass,
-  listClasses as siteListClasses,
-} from '@theme/ui/List';
-/** The theme's navigation parts (the header's), for "Dele" › "UI-komponenter" (NavigationParts.tsx). */
-export { default as SiteTopAppBar } from '@theme/ui/TopAppBar';
-export {
-  Menu as SiteMenu,
-  MenuItem as SiteMenuItem,
-  MenuGroup as SiteMenuGroup,
-  MenuDivider as SiteMenuDivider,
-  DropdownMenu as SiteDropdownMenu,
-  menuClass as siteMenuClass,
-  menuItemClass as siteMenuItemClass,
-} from '@theme/ui/Menu';
-export { placeMenu as sitePlaceMenu } from '@theme/ui/dropdownMenu.script';
-export { default as SiteExposedDropdownMenu } from '@theme/ui/ExposedDropdownMenu';
-export {
-  NavigationDrawer as SiteNavigationDrawer,
-  navigationDrawerDialogClass as siteNavigationDrawerDialogClass,
-  NavigationDrawerItem as SiteNavigationDrawerItem,
-  NavigationDrawerRow as SiteNavigationDrawerRow,
-  NavigationDrawerSubitem as SiteNavigationDrawerSubitem,
-  NavigationDrawerToggle as SiteNavigationDrawerToggle,
-} from '@theme/ui/NavigationDrawer';
-export { Tabs as SiteTabs, Tab as SiteTab, tabsClass as siteTabsClass, tabClass as siteTabClass } from '@theme/ui/Tabs';
-export { Fab as SiteFab, ExtendedFab as SiteExtendedFab, fabKinds, fabSizes, extendedFabSizes } from '@theme/ui/Fab';
-/** The theme's action parts (button groups, segmented buttons, split buttons, the FAB menu), for "Dele" › "UI-komponenter"
- * (ActionParts.tsx). */
-export { default as SiteButtonGroup, buttonGroupKinds } from '@theme/ui/ButtonGroup';
-export { default as SiteSegmentedButton } from '@theme/ui/SegmentedButton';
-export { default as SiteSplitButton, splitButtonKinds } from '@theme/ui/SplitButton';
-export { default as SiteFabMenu, fabMenuKinds } from '@theme/ui/FabMenu';
-/** The theme's selection parts, dividers and side sheets, for "Dele" › "UI-komponenter" (SelectionParts.tsx). */
-export { default as SiteSwitch } from '@theme/ui/Switch';
-export { default as SiteRadioButton, RadioGroup as SiteRadioGroup } from '@theme/ui/RadioButton';
-export { default as SiteSlider } from '@theme/ui/Slider';
-export { default as SiteDivider } from '@theme/ui/Divider';
-export { default as SiteSideSheet } from '@theme/ui/SideSheet';
-/** The theme's communication parts, for "Dele" › "UI-komponenter" (CommunicationParts.tsx). */
-export { default as SiteBadge } from '@theme/ui/Badge';
-export { default as SiteLoadingIndicator } from '@theme/ui/LoadingIndicator';
-export {
-  LinearProgressIndicator as SiteLinearProgressIndicator,
-  CircularProgressIndicator as SiteCircularProgressIndicator,
-} from '@theme/ui/ProgressIndicator';
-export { default as SiteSnackbar } from '@theme/ui/Snackbar';
-export { default as SiteTooltip } from '@theme/ui/Tooltip';
-/** The ripple on the theme's parts when pressed (Material 3's pressed state), on the editor's screens too. */
-export { default as siteRipples } from '@theme/ui/ripple.script';
-/** The rest of the theme's navigation parts, for "Dele" › "UI-komponenter" (NavigationRestParts.tsx). */
-export { default as SiteNavigationBar, NavigationBarItem as SiteNavigationBarItem } from '@theme/ui/NavigationBar';
-export {
-  default as SiteNavigationRail,
-  NavigationRailItem as SiteNavigationRailItem,
-  NavigationRailSection as SiteNavigationRailSection,
-} from '@theme/ui/NavigationRail';
-export { default as SiteSearch, SearchBar as SiteSearchBar } from '@theme/ui/Search';
-export { default as SiteToolbar } from '@theme/ui/Toolbar';
-/** The theme's date and time pickers, for "Dele" › "UI-komponenter" (PickerParts.tsx). */
-export { default as SiteDatePicker, datePickerTexts } from '@theme/ui/DatePicker';
-export { default as SiteDatePickerContainer } from '@theme/ui/DatePickerContainer';
-export { default as SiteTimePicker, timePickerTexts } from '@theme/ui/TimePicker';
-export { default as SiteTimePickerContainer } from '@theme/ui/TimePickerContainer';
-export type { DatePickerTexts } from '@theme/ui/DatePickerContainer';
-export type { TimePickerTexts } from '@theme/ui/TimePickerContainer';
-export { dayPeriods } from '@theme/ui/dates';
+// The theme's UI parts (packages/editor/theme/ui/, Material 3's names), which the editor draws with too:
+// on its own screens (packages/editor/src/ui.tsx, which takes nothing of the theme from anywhere else) and on "Dele" ›
+// "UI-komponenter" (BlockParts.tsx). Only the theme's parts, nothing of the editor, so the editor's parts can be made of them as
+// it loads.
+export { default as SiteButton, buttonShapes, buttonSizes } from '@theme/ui/Button';
+export { default as SiteIconButton, iconButtonWidths } from '@theme/ui/IconButton';
+export {
+  default as SiteTextField,
+  textFieldClass as siteTextFieldClass,
+  textFieldContainerClass as siteTextFieldContainerClass,
+  textFieldInputClass as siteTextFieldInputClass,
+  TextFieldButton as SiteTextFieldButton,
+} from '@theme/ui/TextField';
+export { default as SiteCheckbox } from '@theme/ui/Checkbox';
+export { default as SiteChip, chipKinds } from '@theme/ui/Chip';
+export { default as SiteChipSet, chipSetLayouts } from '@theme/ui/ChipSet';
+export { default as SiteDialog, dialogModalClass as siteDialogModalClass } from '@theme/ui/Dialog';
+export {
+  default as SiteBottomSheet,
+  BottomSheetHeader as SiteBottomSheetHeader,
+  bottomSheetCoverClass,
+  bottomSheetContainerClass as siteBottomSheetContainerClass,
+  bottomSheetFitClass as siteBottomSheetFitClass,
+  bottomSheetFullClass as siteBottomSheetFullClass,
+} from '@theme/ui/BottomSheet';
+export { default as SiteCarousel } from '@theme/ui/Carousel';
+export { default as SiteCard, cardKinds, cardClass as siteCardClass } from '@theme/ui/Card';
+export {
+  default as SiteList,
+  ListItem as SiteListItem,
+  ListItemLeadingIcon as SiteListItemLeadingIcon,
+  listClass as siteListClass,
+  listClasses as siteListClasses,
+} from '@theme/ui/List';
+/** The theme's navigation parts (the header's), for "Dele" › "UI-komponenter" (NavigationParts.tsx). */
+export { default as SiteTopAppBar } from '@theme/ui/TopAppBar';
+export {
+  Menu as SiteMenu,
+  MenuItem as SiteMenuItem,
+  MenuGroup as SiteMenuGroup,
+  MenuDivider as SiteMenuDivider,
+  DropdownMenu as SiteDropdownMenu,
+  menuClass as siteMenuClass,
+  menuItemClass as siteMenuItemClass,
+} from '@theme/ui/Menu';
+export { placeMenu as sitePlaceMenu } from '@theme/ui/dropdownMenu.script';
+export { default as SiteExposedDropdownMenu } from '@theme/ui/ExposedDropdownMenu';
+export {
+  NavigationDrawer as SiteNavigationDrawer,
+  navigationDrawerDialogClass as siteNavigationDrawerDialogClass,
+  NavigationDrawerItem as SiteNavigationDrawerItem,
+  NavigationDrawerRow as SiteNavigationDrawerRow,
+  NavigationDrawerSubitem as SiteNavigationDrawerSubitem,
+  NavigationDrawerToggle as SiteNavigationDrawerToggle,
+} from '@theme/ui/NavigationDrawer';
+export { Tabs as SiteTabs, Tab as SiteTab, tabsClass as siteTabsClass, tabClass as siteTabClass } from '@theme/ui/Tabs';
+export { Fab as SiteFab, ExtendedFab as SiteExtendedFab, fabKinds, fabSizes, extendedFabSizes } from '@theme/ui/Fab';
+/** The theme's action parts (button groups, segmented buttons, split buttons, the FAB menu), for "Dele" › "UI-komponenter"
+ * (ActionParts.tsx). */
+export { default as SiteButtonGroup, buttonGroupKinds } from '@theme/ui/ButtonGroup';
+export { default as SiteSegmentedButton } from '@theme/ui/SegmentedButton';
+export { default as SiteSplitButton, splitButtonKinds } from '@theme/ui/SplitButton';
+export { default as SiteFabMenu, fabMenuKinds } from '@theme/ui/FabMenu';
+/** The theme's selection parts, dividers and side sheets, for "Dele" › "UI-komponenter" (SelectionParts.tsx). */
+export { default as SiteSwitch } from '@theme/ui/Switch';
+export { default as SiteRadioButton, RadioGroup as SiteRadioGroup } from '@theme/ui/RadioButton';
+export { default as SiteSlider } from '@theme/ui/Slider';
+export { default as SiteDivider } from '@theme/ui/Divider';
+export { default as SiteSideSheet } from '@theme/ui/SideSheet';
+/** The theme's communication parts, for "Dele" › "UI-komponenter" (CommunicationParts.tsx). */
+export { default as SiteBadge } from '@theme/ui/Badge';
+export { default as SiteLoadingIndicator } from '@theme/ui/LoadingIndicator';
+export {
+  LinearProgressIndicator as SiteLinearProgressIndicator,
+  CircularProgressIndicator as SiteCircularProgressIndicator,
+} from '@theme/ui/ProgressIndicator';
+export { default as SiteSnackbar } from '@theme/ui/Snackbar';
+export { default as SiteTooltip } from '@theme/ui/Tooltip';
+/** The ripple on the theme's parts when pressed (Material 3's pressed state), on the editor's screens too. */
+export { default as siteRipples } from '@theme/ui/ripple.script';
+/** The rest of the theme's navigation parts, for "Dele" › "UI-komponenter" (NavigationRestParts.tsx). */
+export { default as SiteNavigationBar, NavigationBarItem as SiteNavigationBarItem } from '@theme/ui/NavigationBar';
+export {
+  default as SiteNavigationRail,
+  NavigationRailItem as SiteNavigationRailItem,
+  NavigationRailSection as SiteNavigationRailSection,
+} from '@theme/ui/NavigationRail';
+export { default as SiteSearch, SearchBar as SiteSearchBar } from '@theme/ui/Search';
+export { default as SiteToolbar } from '@theme/ui/Toolbar';
+/** The theme's date and time pickers, for "Dele" › "UI-komponenter" (PickerParts.tsx). */
+export { default as SiteDatePicker, datePickerTexts } from '@theme/ui/DatePicker';
+export { default as SiteDatePickerContainer } from '@theme/ui/DatePickerContainer';
+export { default as SiteTimePicker, timePickerTexts } from '@theme/ui/TimePicker';
+export { default as SiteTimePickerContainer } from '@theme/ui/TimePickerContainer';
+export type { DatePickerTexts } from '@theme/ui/DatePickerContainer';
+export type { TimePickerTexts } from '@theme/ui/TimePickerContainer';
+export { dayPeriods } from '@theme/ui/dates';

package/src/themes.ts

@@ -1,91 +1,91 @@
-// The site's themes, for the editor: the one the site and the editor are built with (src/data/theme.json;
-// packages/editor/site/theme.mjs), by "Temaer" on "Udseende", and those installed in src/themes/, each a folder with its
-// theme.json, shown under "Temaer" with a page each to swap to it from (Themes and ThemePage in Library.tsx). Only
-// their theme.json, the pictures of the site in them (screenshots/, packages/editor/scripts/theme-screenshots.mjs) and, for one installed
-// 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';
-
-export type ThemeInfo = {
-  /** Its folder in src/themes/, as saved in src/data/theme.json. */
-  id: string;
-  name: string;
-  version: string;
-  /** Who made it. */
-  author: string;
-  /** Its picture, an address on the site. */
-  icon: string;
-  /** Its own licence ("UNLICENSED" when all rights are reserved) and the third-party work it brings (fonts, code,
-   * pictures), on its page and under "Licenser" (@morphemecms/cms/lib/licenses.mjs). */
-  license: string;
-  thirdParty: ThirdParty[];
-  /** The icon pack it uses while none is chosen ("icons" in its theme.json: a system pack, or one of its own by its
-   * folder; packOfTheme in icons.ts gives its id). */
-  icons?: string;
-  /** How it moves while the owner has chosen none ("motion" in its theme.json: a scheme of lib/motion.ts). */
-  motion?: string;
-  /** What it looks like, in a sentence or two, by the editor's language ("da-DK"), on its page. */
-  description?: Record<string, string>;
-  /** What it gives the site, a few short points by the editor's language, on its page. */
-  highlights?: Record<string, string[]>;
-  /** Pictures of the site in it (src/themes/<theme>/screenshots/<n>-<key>.jpg), in their order: what each shows (its
-   * name in the editor, t.library.themeShots) and its address. */
-  screenshots: { key: string; src: string }[];
-  /** Whether it is offered in the store (`"store": true` in its theme.json, npm run store:release), and where it came from
-   * when it was installed from it (its store.json). */
-  inStore?: boolean;
-  store?: StoreRecord;
-};
-
-// The standard theme's files (the package's theme/, @saturn) as if they were in src/themes/<its id>/, beside the others'.
-const asStandard = <T>(found: Record<string, T>) =>
-  Object.fromEntries(Object.entries(found).map(([path, v]) => [`/src/themes/${STANDARD_THEME}/${path.split('/theme/').pop()}`, v]));
-type Manifest = Omit<ThemeInfo, 'id' | 'screenshots' | 'inStore' | 'store'> & { store?: boolean };
-const manifests = {
-  ...asStandard(import.meta.glob<Manifest>('@saturn/theme.json', { eager: true, import: 'default' })),
-  ...import.meta.glob<Manifest>('/src/themes/*/theme.json', { eager: true, import: 'default' }),
-};
-const records = import.meta.glob<StoreRecord>('/src/themes/*/store.json', { eager: true, import: 'default' });
-const pictures = {
-  ...asStandard(import.meta.glob<string>('@saturn/screenshots/*.jpg', { eager: true, query: '?url', import: 'default' })),
-  ...import.meta.glob<string>('/src/themes/*/screenshots/*.jpg', { eager: true, query: '?url', import: 'default' }),
-};
-const idOf = (path: string) => path.split('/')[3];
-
-/** A theme's pictures, by the number in their names. */
-const screenshotsOf = (id: string) =>
-  Object.entries(pictures)
-    .filter(([path]) => idOf(path) === id)
-    .map(([path, src]) => ({
-      name: path
-        .split('/')
-        .pop()!
-        .replace(/\.jpg$/, ''),
-      src,
-    }))
-    .sort((a, b) => parseInt(a.name) - parseInt(b.name))
-    .map(({ name, src }) => ({ key: name.replace(/^\d+-/, ''), src }));
-
-/** The themes installed, by name. */
-export const themes: ThemeInfo[] = Object.entries(manifests)
-  .map(([path, m]) => ({
-    id: idOf(path),
-    name: m.name,
-    version: m.version,
-    author: m.author,
-    icon: m.icon,
-    license: m.license,
-    thirdParty: m.thirdParty,
-    ...(m.icons ? { icons: m.icons } : {}),
-    ...(m.motion ? { motion: m.motion } : {}),
-    description: m.description,
-    highlights: m.highlights,
-    screenshots: screenshotsOf(idOf(path)),
-    ...(m.store ? { inStore: true } : {}),
-    ...(records[`/src/themes/${idOf(path)}/store.json`] ? { store: records[`/src/themes/${idOf(path)}/store.json`] } : {}),
-  }))
-  .sort((a, b) => a.name.localeCompare(b.name));
-
-/** The theme the site and this editor are built with (the build stops when it is not installed). */
-export const theme: ThemeInfo = themes.find((x) => x.id === chosen.theme)!;
+// The site's themes, for the editor: the one the site and the editor are built with (src/data/theme.json;
+// packages/editor/site/theme.mjs), by "Temaer" on "Udseende", and those installed in src/themes/, each a folder with its
+// theme.json, shown under "Temaer" with a page each to swap to it from (Themes and ThemePage in Library.tsx). Only
+// their theme.json, the pictures of the site in them (screenshots/, packages/editor/scripts/theme-screenshots.mjs) and, for one installed
+// 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 './licenseData';
+
+export type ThemeInfo = {
+  /** Its folder in src/themes/, as saved in src/data/theme.json. */
+  id: string;
+  name: string;
+  version: string;
+  /** Who made it. */
+  author: string;
+  /** Its picture, an address on the site. */
+  icon: string;
+  /** Its own licence ("UNLICENSED" when all rights are reserved) and the third-party work it brings (fonts, code,
+   * pictures), on its page and under "Licenser" (@morphemecms/cms/lib/licenses.mjs). */
+  license: string;
+  thirdParty: ThirdParty[];
+  /** The icon pack it uses while none is chosen ("icons" in its theme.json: a system pack, or one of its own by its
+   * folder; packOfTheme in icons.ts gives its id). */
+  icons?: string;
+  /** How it moves while the owner has chosen none ("motion" in its theme.json: a scheme of lib/motion.ts). */
+  motion?: string;
+  /** What it looks like, in a sentence or two, by the editor's language ("da-DK"), on its page. */
+  description?: Record<string, string>;
+  /** What it gives the site, a few short points by the editor's language, on its page. */
+  highlights?: Record<string, string[]>;
+  /** Pictures of the site in it (src/themes/<theme>/screenshots/<n>-<key>.jpg), in their order: what each shows (its
+   * name in the editor, t.library.themeShots) and its address. */
+  screenshots: { key: string; src: string }[];
+  /** Whether it is offered in the store (`"store": true` in its theme.json, npm run store:release), and where it came from
+   * when it was installed from it (its store.json). */
+  inStore?: boolean;
+  store?: StoreRecord;
+};
+
+// The standard theme's files (the package's theme/, @saturn) as if they were in src/themes/<its id>/, beside the others'.
+const asStandard = <T>(found: Record<string, T>) =>
+  Object.fromEntries(Object.entries(found).map(([path, v]) => [`/src/themes/${STANDARD_THEME}/${path.split('/theme/').pop()}`, v]));
+type Manifest = Omit<ThemeInfo, 'id' | 'screenshots' | 'inStore' | 'store'> & { store?: boolean };
+const manifests = {
+  ...asStandard(import.meta.glob<Manifest>('@saturn/theme.json', { eager: true, import: 'default' })),
+  ...import.meta.glob<Manifest>('/src/themes/*/theme.json', { eager: true, import: 'default' }),
+};
+const records = import.meta.glob<StoreRecord>('/src/themes/*/store.json', { eager: true, import: 'default' });
+const pictures = {
+  ...asStandard(import.meta.glob<string>('@saturn/screenshots/*.jpg', { eager: true, query: '?url', import: 'default' })),
+  ...import.meta.glob<string>('/src/themes/*/screenshots/*.jpg', { eager: true, query: '?url', import: 'default' }),
+};
+const idOf = (path: string) => path.split('/')[3];
+
+/** A theme's pictures, by the number in their names. */
+const screenshotsOf = (id: string) =>
+  Object.entries(pictures)
+    .filter(([path]) => idOf(path) === id)
+    .map(([path, src]) => ({
+      name: path
+        .split('/')
+        .pop()!
+        .replace(/\.jpg$/, ''),
+      src,
+    }))
+    .sort((a, b) => parseInt(a.name) - parseInt(b.name))
+    .map(({ name, src }) => ({ key: name.replace(/^\d+-/, ''), src }));
+
+/** The themes installed, by name. */
+export const themes: ThemeInfo[] = Object.entries(manifests)
+  .map(([path, m]) => ({
+    id: idOf(path),
+    name: m.name,
+    version: m.version,
+    author: m.author,
+    icon: m.icon,
+    license: m.license,
+    thirdParty: m.thirdParty,
+    ...(m.icons ? { icons: m.icons } : {}),
+    ...(m.motion ? { motion: m.motion } : {}),
+    description: m.description,
+    highlights: m.highlights,
+    screenshots: screenshotsOf(idOf(path)),
+    ...(m.store ? { inStore: true } : {}),
+    ...(records[`/src/themes/${idOf(path)}/store.json`] ? { store: records[`/src/themes/${idOf(path)}/store.json`] } : {}),
+  }))
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+/** The theme the site and this editor are built with (the build stops when it is not installed). */
+export const theme: ThemeInfo = themes.find((x) => x.id === chosen.theme)!;