@morphemecms/cms 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,15 @@
+// "Forhåndsvis" beside "Gem ændringer" and in the top bar (FormFrame.tsx): the page with what is in the
+// form now, in a sheet (pagePreview.tsx).
+export const preview = {
+  /** The button, the icon in the top bar, and the sheet. */
+  button: 'Preview',
+  title: 'Preview',
+  /** How wide the page is shown. */
+  device: 'Show as',
+  phone: 'Phone',
+  computer: 'Computer',
+  making: 'Making the preview…',
+  failed: (error: string) => `Couldn’t create the preview: ${error}`,
+  notHere: 'That page can’t be previewed',
+  pageNotLoaded: (status: number) => `The page answered ${status}`,
+};

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

@@ -0,0 +1,66 @@
+// "Videresendelser" (Redirects.tsx, redirects.ts).
+export const redirects = {
+  notLoaded: (error: string) => `Couldn’t load the redirects: ${error}`,
+  noFrom: 'Type the address that should redirect.',
+  noTo: 'Type the address it should redirect to.',
+  toSelf: 'An address can’t redirect to itself.',
+  pageHas: (from: string) => `There’s a page with the address ${from}. Give the page a new address instead.`,
+  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. */
+  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) =>
+    `${from} redirects to ${to}, which itself redirects to ${end}. Send it straight to ${end}.`,
+  chainRule: (line: string, flat: string) => `The rule "${line}" redirects through another. Write it as "${flat}".`,
+  count: (n: number) => `${n} ${n === 1 ? 'address' : 'addresses'}`,
+  /** The row under "Videresendelser" with all the redirects, and its screen's title. */
+  all: 'All redirects',
+  new: 'New redirect',
+  intro: 'Addresses that send visitors on to another page.',
+  searchLabel: 'Search the redirects',
+  /** The orders of the two lists (Redirects.tsx): by address, by the page it sends to, by visits, by the last visit. */
+  sorts: { az: 'A–Z', za: 'Z–A', page: 'By page', visits: 'Most visits first', last: 'Most recently visited first' },
+  /** The funnel over the redirects that shows only those to one page or post. */
+  pageFilter: 'Show by page',
+  /** Over the posts among its choices. */
+  postsGroup: 'Blog posts',
+  loading: 'Loading the redirects',
+  /** None, or none matching the search. */
+  none: (query: string) => `No redirects${query ? ` with "${query}"` : ''}`,
+  from: 'From',
+  fromHint: 'For example, /old-page/.',
+  to: 'To',
+  toHint: 'For example, /about-us/, or / for the home page.',
+  /** Where it sends to; `noPage`: an address of the site no page in the editor has. */
+  sendsTo: (name: string, noPage: boolean) => `Goes to ${name}${noPage ? ', which isn’t a page in the editor' : ''}.`,
+  deleteRedirect: 'Delete redirect',
+  /** "Ikke fundet": the addresses visitors came to that do not exist (notFound.ts). */
+  missing: {
+    /** Its row under "Videresendelser" and its screen's title. */
+    title: 'Not found',
+    intro: 'Addresses visitors tried to open that don’t exist.',
+    searchLabel: 'Search the addresses',
+    loading: 'Loading the addresses',
+    notLoaded: (error: string) => `Couldn’t load the addresses that don’t exist: ${error}`,
+    /** The site does not keep them (yet). */
+    notKept: 'The website doesn’t yet record addresses that don’t exist',
+    none: (query: string) => (query ? `No addresses with "${query}"` : 'No addresses yet'),
+    /** Under the address in the list: how many visits, and the last (when.ts). */
+    seen: (n: number, last: string) => `${n} ${n === 1 ? 'visit' : 'visits'}, last ${last}`,
+    /** In the sheet; `from`: where the last visitor came from (a page, another site), or ''. */
+    details: (n: number, first: string, last: string, from: string) =>
+      `${n === 1 ? `Visited once, ${last}` : `Visited ${n} times, first ${first} and last ${last}`}.${from ? ` The last visitor came from ${from}.` : ''}`,
+    sendOn: 'Redirect',
+    forget: 'Remove from the list',
+    forgotten: 'Removed from the list',
+    notForgotten: (error: string) => `Couldn’t remove the address from the list: ${error}`,
+  },
+  /** The commits, in the site's language (siteT). */
+  commit: {
+    add: (from: string, to: string) => `Editor: redirect ${from} to ${to}`,
+    change: (from: string, to: string) => `Editor: ${from} now redirects to ${to}`,
+    delete: (from: string) => `Editor: delete the redirect from ${from}`,
+  },
+};

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

@@ -0,0 +1,26 @@
+// "SEO-vurdering" under "Søgemaskineoptimering" (SeoScores.tsx): the SEO rating of every page and blog post.
+export const seo = {
+  /** Its row under "Søgemaskineoptimering" and its screen's title. */
+  title: 'SEO rating',
+  intro: 'The same rating as under Search engines on each page and blog post.',
+  /** Under the title: the average of the scores. */
+  average: (score: number) => `Average ${score} of 100`,
+  searchLabel: 'Search the pages and blog posts',
+  /** The orders: the lowest score first (the default), the highest first, by name. */
+  sorts: { low: 'Lowest first', high: 'Highest first', az: 'A–Z', za: 'Z–A' },
+  /** The ring, read aloud. */
+  scoreLabel: (score: number) => `SEO rating ${score} of 100`,
+  /** The filters in the funnel: by the colour of the rating, by whether a primary keyword is filled in, and by kind. */
+  ratingFilter: 'Rating',
+  allRatings: 'All ratings',
+  ratings: { good: 'Good (90–100)', average: 'Average (50–89)', bad: 'Poor (0–49)' },
+  keywordFilter: 'Primary keyword',
+  allKeywords: 'With and without a primary keyword',
+  keywords: { with: 'With a primary keyword', without: 'Without a primary keyword' },
+  kindFilter: 'Kind',
+  allKinds: 'Pages and blog posts',
+  /** Under the name of one without a primary keyword. */
+  noKeyword: 'No primary keyword',
+  /** None matching the search and the filters. */
+  none: 'No pages or blog posts match',
+};

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

@@ -0,0 +1,41 @@
+// The text and its toolbar (MarkdownEditor.tsx).
+export const text = {
+  /** The toolbar's name, for screen readers. */
+  tools: 'Tools for the text',
+  bold: 'Bold',
+  italic: 'Italic',
+  link: 'Link',
+  /** The page's own heading, at the top of its text (a page's, not a blog post's). */
+  pageHeading: 'Heading (H1)',
+  heading: 'Heading',
+  subheading: 'Subheading',
+  paragraph: 'Normal text',
+  bulletList: 'Bulleted list',
+  orderedList: 'Numbered list',
+  quote: 'Quote',
+  insert: 'Insert',
+  image: 'Image',
+  undo: 'Undo',
+  redo: 'Redo',
+  /** The kinds of text as one button, when the toolbar is too short. */
+  kind: 'Text style',
+  kindIs: (kind: string) => `Text style: ${kind}`,
+  /** The menu over a selection. */
+  selection: 'Selected text',
+  /** The colours a selection can have there (packages/editor/lib/text-colors.mjs), by the names under "Farver". */
+  color: 'Color',
+  colors: { accent: 'Accent color', muted: 'Muted text' },
+  noColor: 'No color',
+  /** The sheet of a link (LinkSheet.tsx). */
+  linkTo: 'The link goes to',
+  linkPage: 'Page',
+  linkAddress: 'Other address',
+  linkAddressHint: 'An email or a phone number becomes a link too.',
+  linkPosts: 'Blog posts',
+  insertLink: 'Insert link',
+  removeLink: 'Remove link',
+  /** A block's card. */
+  hiddenOnPage: 'Hidden on the page',
+  showOnPage: 'Show on the page',
+  hideOnPage: 'Hide on the page',
+};

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

@@ -0,0 +1,41 @@
+// The standard theme's own texts on the site (packages/editor/theme/: the header, the menu, the footer, the blog and its
+// posts, the pop-ups, the 404 page and the new versions under /ny/), in the site's language (siteT), as the blocks'
+// drawings are. What the owner writes (the menu, the buttons' texts, the footer) is the site's, not these.
+export const theme = {
+  skipToContent: 'Skip to content',
+  mainMenu: 'Main menu',
+  mobileMenu: 'Mobile menu',
+  openMenu: 'Open menu',
+  closeMenu: 'Close menu',
+  subpagesOf: (label: string) => `Pages under ${label}`,
+  close: 'Close',
+  actions: 'Actions',
+  cookies: 'Cookies',
+  cookieSettings: 'Cookie settings',
+  darkTheme: 'Dark theme',
+  lightTheme: 'Light theme',
+  tags: 'Tags',
+  allPosts: 'All',
+  noPosts: 'There are no posts here yet.',
+  seeAllPosts: 'See all posts',
+  seeAll: 'See all',
+  blog: 'Blog',
+  relatedPosts: 'Related posts',
+  readingTime: (minutes: number) => `${minutes} min read`,
+  postsAbout: (count: number, tag: string) => `${count} ${count === 1 ? 'post' : 'posts'} about ${tag}.`,
+  notFound: 'Page not found',
+  didYouMean: 'Did you mean',
+  newPages: 'New pages',
+  newPagesDescription: 'New versions of the pages, for review.',
+  newPagesIntro:
+    'New versions of the pages next to the current ones, for review. Google does not see them. When a page is approved, the new text moves to the current page’s address.',
+  newVersion: 'New version',
+  newPage: 'New page, does not exist today',
+  currentPage: (title: string) => `Current: ${title}`,
+  newPosts: 'New blog posts',
+  newPostsIntro: 'Hidden until they are approved: they are not on the blog, and Google does not see them.',
+  reviewNotice: 'New version for review. Google does not see it.',
+  seeCurrentPage: 'See the current page',
+  seeChanges: 'See what has changed',
+  allNewPages: 'All new pages',
+};

package/src/i18n/index.ts

@@ -0,0 +1,124 @@
+// The editor's language: its own texts (the buttons, the messages, the lines on the cards) and how it
+// writes dates, numbers and sorts, in one language, by its code with the country (BCP 47: da-DK,
+// en-US), used as it is with Intl. The language is the one picked on "Konto", else the browser's (the
+// same code, else the same language: en-GB is en-US), else the site's (config.locale). Picked once when
+// the editor opens; a new choice reloads it (setLocale). Away from a browser (the check before the
+// build, checkSite.ts) it is the site's.
+// What is the site's own (src/site/, src/apps/<app>/blocks/: the fields, the start screen's groups, the blocks'
+// names) is written in the site's language, and shown in the editor's by the site's own texts
+// (siteText, @site/texts). The blocks' drawings and the commits (siteT) stay in the site's
+// language, so the site looks as it is, and the history is in one language, whoever saved.
+// A language is a folder with the texts by the part of the editor they are in (en-US/index.ts). English is the
+// reference: its texts are written first (Messages is its type), and every other language translates them; a new
+// one is a copy of da-DK with its texts translated from en-US, added to `messages`. TypeScript says when a
+// translation is missing.
+import { config } from '@site/config';
+import { appTexts as appFiles, texts } from '@site/texts';
+import { daDK } from './da-DK';
+import { enUS, type Messages } from './en-US';
+
+export type { Messages };
+
+export const messages = { 'da-DK': daDK, 'en-US': enUS } satisfies Record<string, Messages>;
+export type Locale = keyof typeof messages;
+export const locales = Object.keys(messages) as Locale[];
+
+/** A code as it is written ("da-dk" as "da-DK"), or undefined when it is not one. */
+function canonical(code: string): string | undefined {
+  try {
+    return Intl.getCanonicalLocales(code)[0];
+  } catch {
+    return undefined;
+  }
+}
+
+const language = (code: string) => code.split('-')[0];
+
+/** The editor's language for codes, the first that fits: the same code, else the same language. */
+export function matchLocale(codes: readonly (string | null | undefined)[]): Locale | undefined {
+  const known = codes.flatMap((c) => (c && canonical(c)) || []);
+  return (
+    known.map((c) => locales.find((l) => l === c)).find(Boolean) ??
+    known.map((c) => locales.find((l) => language(l) === language(c))).find(Boolean)
+  );
+}
+
+/** The site's language, for what is the site's (the commits); da-DK when the editor does not have it. */
+export const siteLocale: Locale = matchLocale([config.locale]) ?? 'da-DK';
+
+const KEY = 'editor-locale';
+const inBrowser = typeof window !== 'undefined' && typeof navigator !== 'undefined';
+
+/** The language picked on "Konto" in this browser, or 'auto' (the browser's, else the site's). */
+export function savedLocale(): Locale | 'auto' {
+  try {
+    return matchLocale([localStorage.getItem(KEY)]) ?? 'auto';
+  } catch {
+    return 'auto';
+  }
+}
+
+/** Picks the language in this browser ('auto': none) and opens the editor again in it. */
+export function setLocale(pick: Locale | 'auto') {
+  try {
+    if (pick === 'auto') localStorage.removeItem(KEY);
+    else localStorage.setItem(KEY, pick);
+  } catch {}
+  location.reload();
+}
+
+/** The language the browser asks for, when the editor has it. */
+export const browserLocale = (): Locale | undefined => (inBrowser ? matchLocale(navigator.languages ?? [navigator.language]) : undefined);
+
+const saved = inBrowser ? savedLocale() : 'auto';
+
+/** The editor's language, and its texts. */
+export const locale: Locale = (saved !== 'auto' && saved) || browserLocale() || siteLocale;
+export const t: Messages = messages[locale];
+
+/** The texts in the site's language: the commits. */
+export const siteT: Messages = messages[siteLocale];
+
+/** The language the package's standard parts (defaults/) are written in, whatever the site's language is. */
+export const DEFAULTS_LOCALE: Locale = 'da-DK';
+
+/** Whether the site's own texts (written in the site's language) or the package's standard parts (written in
+ * DEFAULTS_LOCALE) may be shown in another language than they are written in. */
+export const translatingSite = locale !== siteLocale || locale !== DEFAULTS_LOCALE;
+
+/** The site's own texts in the editor's other languages: by language, by the text as it is written. */
+export type Texts = Partial<Record<string, Record<string, string>>>;
+
+/** The texts of each app and its blocks (src/apps/<app>/texts.ts, blocks/<type>/texts.ts), by the app's id or
+ * by "blocks/" and the block's type (an app and its block can have the same name, as MobilePay's). */
+export const appTexts: Record<string, Texts> = Object.fromEntries(
+  Object.entries(appFiles).map(([path, m]) => {
+    const [folder, name] = path.split('/').slice(-3, -1);
+    return [folder === 'blocks' ? `blocks/${name}` : name!, m.texts];
+  }),
+);
+
+const own: Record<string, string> = translatingSite
+  ? Object.assign({}, ...Object.values(appTexts).map((a) => a[locale]), (texts as Texts)[locale])
+  : {};
+
+/** One of the site's own texts (src/site/, src/themes/<theme>/blocks/, src/apps/), written in the site's language, in the editor's:
+ * its translation in @site/texts or in a block's texts.ts, else as it is written. `values` fill in
+ * its {name}s, after. */
+export function siteText(text: string, values?: Record<string, string | number>): string {
+  const said = own[text] ?? text;
+  return values ? said.replace(/\{(\w+)\}/g, (all, name: string) => (name in values ? String(values[name]) : all)) : said;
+}
+
+/** A language by its own name ("Dansk (Danmark)", "English (United States)"), or by its name in another
+ * (`inLanguage`: "Danish (Denmark)" in en-US). */
+export function localeName(code: Locale, inLanguage: Locale = code): string {
+  try {
+    const name = new Intl.DisplayNames([inLanguage], { type: 'language', languageDisplay: 'standard' }).of(code) ?? code;
+    return name.charAt(0).toLocaleUpperCase(inLanguage) + name.slice(1);
+  } catch {
+    return code;
+  }
+}
+
+if (typeof document !== 'undefined') document.documentElement.lang = locale;

package/src/icon.tsx

@@ -0,0 +1,160 @@
+// Every icon the site draws, on the site and in the editor alike, by its name: Phosphor's (regular, and a filled one as
+// `<name>-fill`), which the site's build puts the theme's own in place of (its icons/<name>.svg, else the icon pack in
+// use's, packages/editor/site/iconPacks.mjs: themePlugin in packages/editor/site/theme.mjs, which answers the imports below with them). The names are Phosphor's, as
+// the content stores them (a card's `icon: certificate`), so a theme without one still draws it.
+// Phosphor's here are those the site draws: the blocks' (src/themes/<theme>/blocks/, src/apps/<app>/blocks/), the
+// theme's parts' (Icon.astro, MobileMenu.tsx …) and those to pick from (iconNames, and `icons` in collections.ts,
+// shown as icons by fields.tsx). A name that is not among them is drawn as MISSING, the question mark, marked with
+// data-icon-missing (its name), which check:screens finds on the built site's pages and the editor's screens.
+import { cloneElement, isValidElement, useEffect, useState, type ReactElement } from 'react';
+import { svgParts } from '../lib/svg.mjs';
+
+const PHOSPHOR = '/node_modules/@phosphor-icons/core/assets/';
+const regular = import.meta.glob<string>(
+  '/node_modules/@phosphor-icons/core/assets/regular/{arrow-left,arrow-right,arrow-square-out,arrow-up-right,bank,bicycle,book-open,book-open-text,bus,calendar-blank,car,caret-down,caret-left,caret-right,certificate,chats,check,clock,coffee,cookie,copy,device-mobile,door-open,download-simple,envelope-simple,eye,eye-slash,flower-lotus,graduation-cap,hand-heart,handshake,heart,house,info,keyboard,leaf,lifebuoy,lightbulb,list,magnifying-glass,map-pin,map-trifold,medal,minus,moon,pencil-simple,phone,question,sun,ticket,train,trash,user,users,users-three,video-camera,warning-circle,wheelchair,x}.svg',
+  { query: '?raw', import: 'default', eager: true },
+);
+// The filled ones ("Video": its play button).
+const fills = import.meta.glob<string>('/node_modules/@phosphor-icons/core/assets/fill/{play-fill}.svg', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+});
+
+/** The icon drawn for one that is not found (a name the site does not draw, one Phosphor does not have): a question
+ * mark, the icon pack's as the others. */
+export const MISSING = 'question';
+
+/** An icon's SVG file by its name: the theme's, else Phosphor's; undefined for one the site does not draw. */
+export function iconFile(name: string, weight?: 'fill'): string | undefined {
+  return weight ? fills[`${PHOSPHOR}fill/${name}-${weight}.svg`] : regular[`${PHOSPHOR}regular/${name}.svg`];
+}
+
+/** An icon by name as the site and the editor draw it (the theme's View.tsx and its parts, Icon.astro, the editor's
+ * fields): the bare <svg> in its file's viewBox, at the size given, in the text's colour, hidden from screen readers
+ * (or named by `label`). A filled one the site does not draw is the regular one, and an icon it does not draw MISSING. */
+export function Svg({
+  name,
+  size = 20,
+  weight,
+  className,
+  label,
+}: {
+  name: string;
+  size?: number;
+  weight?: 'fill';
+  className?: string;
+  label?: string;
+}) {
+  const file = iconFile(name, weight) ?? iconFile(name);
+  return <Drawn file={file} missing={file ? undefined : name} size={size} className={className} label={label} />;
+}
+
+/** An icon by its name of all Phosphor's, not only those the site draws (an app's in the app store, store.ts): one the
+ * site draws at once, another from all Phosphor's (allIcons.ts, loaded the first time one is drawn), the theme's in
+ * their place as Svg's. Nothing while it loads, and MISSING for a name Phosphor does not have. */
+export function AnyIcon({ name, size = 20 }: { name: string; size?: number }) {
+  // null: not found.
+  const [file, setFile] = useState<string | null | undefined>(() => iconFile(name));
+  useEffect(() => {
+    if (iconFile(name)) return setFile(iconFile(name));
+    setFile(undefined);
+    let on = true;
+    import('./allIcons').then((m) => on && setFile(m.allIcons[`${PHOSPHOR}regular/${name}.svg`] ?? null));
+    return () => {
+      on = false;
+    };
+  }, [name]);
+  if (file === undefined) return null;
+  return <Drawn file={file ?? undefined} missing={file ? undefined : name} size={size} />;
+}
+
+/** An icon's SVG file drawn as it is, as Svg draws one, not the theme's in its place: an icon pack's own, to show what the
+ * pack looks like (IconSwatches in ui.tsx, "Ikonpakker"). */
+export function SvgFile({ file, size = 20 }: { file: string; size?: number }) {
+  return <Drawn file={file} size={size} />;
+}
+
+/** An SVG file drawn; MISSING in its place when there is none, or it is not an SVG (`missing`: the name asked for). */
+function Drawn({
+  file,
+  missing,
+  size,
+  className,
+  label,
+}: {
+  file: string | undefined;
+  missing?: string;
+  size: number;
+  className?: string;
+  label?: string;
+}) {
+  const parts = svgParts(file);
+  const shown = parts ?? svgParts(iconFile(MISSING));
+  if (!shown) return null;
+  return (
+    <svg
+      width={size}
+      height={size}
+      fill="currentColor"
+      {...(label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true })}
+      {...(parts ? {} : { 'data-icon-missing': missing ?? '' })}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={shown.viewBox}
+      dangerouslySetInnerHTML={{ __html: shown.inner }}
+    />
+  );
+}
+
+/** An icon as the theme's UI parts take it (packages/editor/theme/ui/): its name, as the site gives it, or an icon already
+ * made, as the editor gives it (a React icon from @phosphor-icons/react, the theme's in its place: <Plus />). */
+export type IconRef = string | ReactElement<{ size?: number; className?: string }>;
+
+/** An IconRef drawn: a name as Svg draws it, an icon made with this size and class. */
+export function Glyph({ icon, size = 20, className }: { icon: IconRef; size?: number; className?: string }) {
+  if (typeof icon === 'string') return <Svg name={icon} size={size} className={className} />;
+  return isValidElement(icon)
+    ? cloneElement(icon, { size, className: [icon.props.className, className].filter(Boolean).join(' ') || undefined })
+    : null;
+}
+
+/** The same as Svg (the editor's fields and the site's promotions draw their icons with it). */
+export const Icon = Svg;
+
+/** The icons to pick from on the standard blocks (a field with `icons`: Kort); this site's own
+ * fields have the same (`icons` in packages/editor/defaults/collections.ts). */
+export const iconNames = [
+  'certificate',
+  'heart',
+  'hand-heart',
+  'users-three',
+  'users',
+  'graduation-cap',
+  'handshake',
+  'book-open',
+  'book-open-text',
+  'medal',
+  'chats',
+  'flower-lotus',
+  'leaf',
+  'lightbulb',
+  'train',
+  'bus',
+  'bicycle',
+  'car',
+  'door-open',
+  'video-camera',
+  'lifebuoy',
+  'phone',
+  'clock',
+  'map-pin',
+  'coffee',
+  'wheelchair',
+  'info',
+  'envelope-simple',
+] as const;
+
+/** The icons to pick from as the options of a field, with their names (t.blocks.icons). */
+export const iconOptions = (names: Record<(typeof iconNames)[number], string>) =>
+  iconNames.map((value) => ({ label: names[value], value }));

package/src/iconPacks.ts

@@ -0,0 +1,89 @@
+// The site's icon packs, for the editor ("Indstillinger" › "Udseende" › "Ikonpakker", IconPacks in Library.tsx): the
+// system's own (packages/editor/icons/<pack>/: Material Symbols, Phosphor and Lucide) and those the themes installed bring
+// (src/themes/<theme>/icon-packs/<pack>/), each by its manifest (pack.json) with a few of its icons to show; and the one
+// the site and this editor are built with (packages/editor/site/iconPacks.mjs: the one chosen, src/data/icons.json, else the theme's,
+// else the standard theme's). The packs' icons are read as files: the editor draws them as they are, beside the icons it
+// draws itself, which are the pack in use's (themePlugin in packages/editor/site/theme.mjs).
+import { packInUse, packTheme, themePackId } from '../site/iconPacks.mjs';
+import { STANDARD_THEME } from './store';
+import { theme, themes } from './themes';
+
+export type IconPack = {
+  /** Its id: a system pack's folder (`lucide`), a theme's `<theme>/<folder>` (packages/editor/site/iconPacks.mjs). */
+  id: string;
+  name: string;
+  /** Who made it. */
+  author: string;
+  /** Its licence, as an SPDX id (`Apache-2.0`), in its folder as LICENSE. */
+  license: string;
+  version?: string;
+  url?: string;
+  /** The theme it came with; none for the system's own. */
+  theme?: string;
+  /** The sets it has icons from besides its own (Material Design Icons' logos), each with its licence in the folder. */
+  includes?: { name: string; author: string; license: string; licenseFile: string; icons: string[] }[];
+  /** A few of its icons' files, to show what it looks like (SAMPLES). */
+  samples: string[];
+};
+
+/** The icons each pack shows of itself, by the names the site draws them by. */
+const SAMPLES = ['house', 'magnifying-glass', 'calendar-blank', 'envelope-simple', 'heart'];
+
+type Manifest = Omit<IconPack, 'id' | 'theme' | 'samples'>;
+const manifests = import.meta.glob<Manifest>(['@icons/*/pack.json', '/src/themes/*/icon-packs/*/pack.json'], {
+  eager: true,
+  import: 'default',
+});
+const files = import.meta.glob<string>(
+  [
+    '@icons/*/{house,magnifying-glass,calendar-blank,envelope-simple,heart}.svg',
+    '/src/themes/*/icon-packs/*/{house,magnifying-glass,calendar-blank,envelope-simple,heart}.svg',
+  ],
+  { eager: true, query: '?raw', import: 'default' },
+);
+const chosen = import.meta.glob<{ pack?: string }>('/src/data/icons.json', { eager: true, import: 'default' })['/src/data/icons.json'];
+
+/** A pack's id from the path of a file in it: a theme's (src/themes/<theme>/icon-packs/<pack>/) or the system's (the
+ * CMS's icons/<pack>/, @icons). */
+const idOf = (path: string) => {
+  const own = path.match(/\/themes\/([^/]+)\/icon-packs\/([^/]+)\//);
+  return own ? themePackId(own[1], own[2]) : path.split('/').at(-2)!;
+};
+const folderOf = (path: string) => path.slice(0, path.lastIndexOf('/') + 1);
+
+/** The icon packs installed, by name. */
+export const iconPacks: IconPack[] = Object.entries(manifests)
+  .map(([path, m]) => {
+    const id = idOf(path);
+    const folder = folderOf(path);
+    const pack: IconPack = {
+      id,
+      name: m.name,
+      author: m.author,
+      license: m.license,
+      samples: SAMPLES.map((name) => files[`${folder}${name}.svg`]).filter(Boolean),
+    };
+    if (m.version) pack.version = m.version;
+    if (m.url) pack.url = m.url;
+    if (m.includes?.length) pack.includes = m.includes;
+    const from = packTheme(id);
+    if (from) pack.theme = from;
+    return pack;
+  })
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+const installed = iconPacks.map((p) => p.id);
+const standard = themes.find((x) => x.id === STANDARD_THEME);
+
+/** The pack a theme uses while none is chosen, by its id. */
+export const packOfTheme = (id: string): string =>
+  packInUse({ chosen: undefined, theme: id, icons: themes.find((x) => x.id === id)?.icons, standardIcons: standard?.icons, installed });
+
+/** The pack the site and this editor are built with, by its id. */
+export const iconPack: string = packInUse({
+  chosen: chosen?.pack,
+  theme: theme.id,
+  icons: theme.icons,
+  standardIcons: standard?.icons,
+  installed,
+});