@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/i18n/index.ts

@@ -1,124 +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;
+// 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

@@ -1,160 +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 }));
+// 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 }));