@morphemecms/cms 0.0.0-stage → 0.1.0

package/defaults/colors.ts

@@ -0,0 +1,125 @@
+// A site's colours under "Indstillinger › Farver" (packages/editor/src/Colors.tsx): the colours there
+// are, by their CSS variable in the theme (without "--"), the pairs that must be readable
+// (WCAG AA, checked before a save and before the build), and the colours a site has until it is given its own
+// ("Brug standardfarverne"), and the Material colour role each takes when they are made from one source
+// colour (dynamic colour, @morphemecms/cms/lib/dynamic-colors.ts). The colours themselves are in
+// src/data/colors.json (config.colors).
+import type { ColorPair, Colors } from '../lib/colors';
+import { dynamicColors, type ColorRoles } from '../lib/dynamic-colors';
+
+/** The colours, in the order they are shown, with what they are used for. */
+export const colorFields: { name: string; label: string; hint: string }[] = [
+  { name: 'bg', label: 'Baggrund', hint: 'Bag hele siden.' },
+  { name: 'surface', label: 'Flader', hint: 'Kort, felter og menuer.' },
+  { name: 'surface-container-lowest', label: 'Flade (lavest)', hint: 'Flader med mindst vægt.' },
+  { name: 'surface-container-low', label: 'Flade (lav)', hint: 'Kort med skygge, blokke og ark.' },
+  { name: 'surface-container', label: 'Flade (mellem)', hint: 'Menuer og bjælker.' },
+  { name: 'surface-container-high', label: 'Flade (høj)', hint: 'Dialoger og søgefeltet.' },
+  { name: 'surface-container-highest', label: 'Flade (højest)', hint: 'Udfyldte kort, felter og kontakter.' },
+  { name: 'inverse-surface', label: 'Omvendt flade', hint: 'Beskeder nederst og korte tooltips.' },
+  { name: 'inverse-on-surface', label: 'Tekst på omvendt flade', hint: 'Teksten og ikonerne på den omvendte flade.' },
+  { name: 'inverse-primary', label: 'Accentfarve på omvendt flade', hint: 'Knapperne på beskederne nederst.' },
+  { name: 'tint', label: 'Lys farve', hint: 'Lyse bokse og markeringer.' },
+  { name: 'ink', label: 'Tekst', hint: 'Al almindelig tekst og overskrifter.' },
+  { name: 'muted', label: 'Stille tekst', hint: 'Undertekster, datoer og noter.' },
+  { name: 'line', label: 'Streger', hint: 'Skillelinjer og kanten om kort.' },
+  { name: 'outline', label: 'Kanter', hint: 'Kanten om felter, knapper og chips.' },
+  { name: 'accent', label: 'Accentfarve', hint: 'Knapper, links, ikoner og logoet.' },
+  { name: 'accent-hover', label: 'Accentfarve under musen', hint: 'En knap, musen er over: lidt mørkere (i mørk tilstand lysere).' },
+  { name: 'on-accent', label: 'Tekst på accentfarven', hint: 'Teksten på knapperne.' },
+  { name: 'accent-container', label: 'Lys accentfarve', hint: 'Knapper og flader i en lys udgave af accentfarven.' },
+  { name: 'on-accent-container', label: 'Tekst på lys accentfarve', hint: 'Teksten og ikonerne på den lyse accentfarve.' },
+  { name: 'secondary', label: 'Sekundær farve', hint: 'Knapper i en anden farve end accentfarven.' },
+  { name: 'on-secondary', label: 'Tekst på sekundær farve', hint: 'Teksten og ikonerne på den sekundære farve.' },
+  { name: 'secondary-container', label: 'Lys sekundær farve', hint: 'Knapper og flader i en lys udgave af den sekundære farve.' },
+  { name: 'on-secondary-container', label: 'Tekst på lys sekundær farve', hint: 'Teksten og ikonerne på den lyse sekundære farve.' },
+  { name: 'tertiary', label: 'Tertiær farve', hint: 'Knapper i en tredje farve, der skiller sig ud fra de to andre.' },
+  { name: 'on-tertiary', label: 'Tekst på tertiær farve', hint: 'Teksten og ikonerne på den tertiære farve.' },
+  { name: 'tertiary-container', label: 'Lys tertiær farve', hint: 'Knapper og flader i en lys udgave af den tertiære farve.' },
+  { name: 'on-tertiary-container', label: 'Tekst på lys tertiær farve', hint: 'Teksten og ikonerne på den lyse tertiære farve.' },
+  { name: 'error', label: 'Fejlfarve', hint: 'Fejl i felter og mærker.' },
+  { name: 'on-error', label: 'Tekst på fejlfarven', hint: 'Teksten og ikonerne på fejlfarven.' },
+  { name: 'error-container', label: 'Lys fejlfarve', hint: 'Flader i en lys udgave af fejlfarven.' },
+  { name: 'on-error-container', label: 'Tekst på lys fejlfarve', hint: 'Teksten og ikonerne på den lyse fejlfarve.' },
+];
+
+/** The text and its background that must be readable, in both modes. */
+export const colorPairs: ColorPair[] = [
+  { text: 'ink', on: 'bg', what: 'Teksten på baggrunden' },
+  { text: 'ink', on: 'surface', what: 'Teksten på flader' },
+  { text: 'ink', on: 'tint', what: 'Teksten i lyse bokse' },
+  { text: 'muted', on: 'bg', what: 'Den stille tekst på baggrunden' },
+  { text: 'muted', on: 'surface', what: 'Den stille tekst på flader' },
+  { text: 'muted', on: 'tint', what: 'Den stille tekst i lyse bokse' },
+  { text: 'ink', on: 'surface-container-lowest', what: 'Teksten på den laveste flade' },
+  { text: 'ink', on: 'surface-container-low', what: 'Teksten på den lave flade' },
+  { text: 'ink', on: 'surface-container', what: 'Teksten på den mellemste flade' },
+  { text: 'ink', on: 'surface-container-high', what: 'Teksten på den høje flade' },
+  { text: 'ink', on: 'surface-container-highest', what: 'Teksten på den højeste flade' },
+  { text: 'muted', on: 'surface-container-lowest', what: 'Den stille tekst på den laveste flade' },
+  { text: 'muted', on: 'surface-container-low', what: 'Den stille tekst på den lave flade' },
+  { text: 'muted', on: 'surface-container', what: 'Den stille tekst på den mellemste flade' },
+  { text: 'muted', on: 'surface-container-high', what: 'Den stille tekst på den høje flade' },
+  { text: 'muted', on: 'surface-container-highest', what: 'Den stille tekst på den højeste flade' },
+  { text: 'accent', on: 'bg', what: 'Links på baggrunden' },
+  { text: 'accent', on: 'surface', what: 'Links på flader' },
+  { text: 'accent', on: 'tint', what: 'Accentfarven i lyse bokse' },
+  { text: 'accent', on: 'surface-container-low', what: 'Links på den lave flade' },
+  { text: 'on-accent', on: 'accent', what: 'Teksten på knapperne' },
+  { text: 'on-accent', on: 'accent-hover', what: 'Teksten på knapperne under musen' },
+  { text: 'on-accent-container', on: 'accent-container', what: 'Teksten på den lyse accentfarve' },
+  { text: 'on-secondary', on: 'secondary', what: 'Teksten på den sekundære farve' },
+  { text: 'on-secondary-container', on: 'secondary-container', what: 'Teksten på den lyse sekundære farve' },
+  { text: 'on-tertiary', on: 'tertiary', what: 'Teksten på den tertiære farve' },
+  { text: 'on-tertiary-container', on: 'tertiary-container', what: 'Teksten på den lyse tertiære farve' },
+  { text: 'error', on: 'bg', what: 'Fejl på baggrunden' },
+  { text: 'error', on: 'surface-container-highest', what: 'Fejl i udfyldte felter' },
+  { text: 'on-error', on: 'error', what: 'Teksten på fejlfarven' },
+  { text: 'on-error-container', on: 'error-container', what: 'Teksten på den lyse fejlfarve' },
+  { text: 'inverse-on-surface', on: 'inverse-surface', what: 'Teksten på den omvendte flade' },
+  { text: 'inverse-primary', on: 'inverse-surface', what: 'Knapperne på den omvendte flade' },
+];
+
+/** The Material colour role of each colour, for dynamic colour: the page on Material's surface, cards a step
+ * lighter (white in light mode), the light boxes on a higher container, so text and links can be read on them at
+ * every contrast level, Material's surface containers, inverse colours, outline and error colours as themselves (the
+ * theme's parts take them, as Material 3's do), buttons and links in the primary colour, and the other colours of the scheme (Material 3's
+ * containers, secondary and tertiary: the FABs and their menus) as their own roles. */
+export const colorRoles: ColorRoles = {
+  bg: 'surface',
+  surface: { light: 'surfaceContainerLowest', dark: 'surfaceContainerLow' },
+  'surface-container-lowest': 'surfaceContainerLowest',
+  'surface-container-low': 'surfaceContainerLow',
+  'surface-container': 'surfaceContainer',
+  'surface-container-high': 'surfaceContainerHigh',
+  'surface-container-highest': 'surfaceContainerHighest',
+  'inverse-surface': 'inverseSurface',
+  'inverse-on-surface': 'inverseOnSurface',
+  'inverse-primary': 'inversePrimary',
+  tint: 'surfaceContainerHigh',
+  ink: 'onSurface',
+  muted: 'onSurfaceVariant',
+  line: 'outlineVariant',
+  outline: 'outline',
+  accent: 'primary',
+  'accent-hover': 'primaryHover',
+  'on-accent': 'onPrimary',
+  'accent-container': 'primaryContainer',
+  'on-accent-container': 'onPrimaryContainer',
+  secondary: 'secondary',
+  'on-secondary': 'onSecondary',
+  'secondary-container': 'secondaryContainer',
+  'on-secondary-container': 'onSecondaryContainer',
+  tertiary: 'tertiary',
+  'on-tertiary': 'onTertiary',
+  'tertiary-container': 'tertiaryContainer',
+  'on-tertiary-container': 'onTertiaryContainer',
+  error: 'error',
+  'on-error': 'onError',
+  'error-container': 'errorContainer',
+  'on-error-container': 'onErrorContainer',
+};
+
+/** The colours a site has until it is given its own ("Brug standardfarverne"): Material 3's scheme of a blue (tonal
+ * spot), as the app store's pictures are taken with (packages/editor/scripts/app-screenshots.mjs). */
+export const defaultColors: Colors = dynamicColors({ source: '#1a73e8', variant: 'tonalSpot', contrast: 'standard' }, colorRoles);

package/defaults/company.ts

@@ -0,0 +1,20 @@
+// "Virksomheden": the business, in parts, each a screen of its own (CompanyForm.tsx): its phone, e-mail and address
+// (src/data/contact.json) and its bank details (src/data/payment.json, under "Betaling", where a site may add its
+// other ways to pay, and where the settings of the apps installed that are a way to pay come after, as MobilePay's),
+// used all over the site. The logo and the icon are under "Udseende" (BrandForm.tsx); the link to
+// the calendar in Calendly is the app Calendly's (src/apps/calendly/).
+import { AddressBook, Bank, CreditCard } from '@phosphor-icons/react';
+import type { Part } from '../src/schema';
+import { bankFields, contactFields } from '@site/collections';
+
+/** The parts of "Virksomheden", in their order, at #virksomheden/<id> ("Betaling"'s at #virksomheden/betaling/<id>). */
+export const companyParts: Part[] = [
+  { id: 'kontakt', label: 'Kontakt', icon: AddressBook, file: 'src/data/contact.json', fields: contactFields },
+  {
+    id: 'betaling',
+    label: 'Betaling',
+    icon: CreditCard,
+    apps: ['payment'],
+    parts: [{ id: 'bank', label: 'Bank', icon: Bank, file: 'src/data/payment.json', fields: bankFields }],
+  },
+];

package/defaults/editor.ts

@@ -0,0 +1,178 @@
+// What the editor edits on a site, and how: the one place the editor (packages/editor/, the package
+// @morphemecms/cms) takes the site from, as `@site/editor`. This and the other files of defaults/ are a site's
+// standard parts: a site has them unless its src/site/ has a file of the same name (siteFile in site/theme.mjs), which
+// may take the standard one from @morphemecms/cms/defaults/<file> and add its own.
+//   collections   the parts of the site and their fields (collections.ts)
+//   groups, lists, header, icons   the start screen
+//   appearance    the site's own parts under "Udseende", after the logo and icon ("Standardsider")
+//   companyParts, blockParts   the screens under "Virksomheden" and "Blokke" (company.ts, blockTexts.ts)
+//   partScreens   parts of the start screen that are screens with parts of their own (privacy.ts)
+//   seoParts      the site's own parts under "Søgemaskineoptimering", after the redirects (internalLinks.ts)
+//   relationsOf, usedBy, keptBy   what a field picks from, what cannot be deleted, and what cannot be saved so (rules.ts)
+//   siteProblems  what is wrong by the site's own rules, before it is built (rules.ts)
+//   usesOf, countsOf   the places that use an entry (a tag's "Bruges på") and their number at it in its list (rules.ts)
+//   testimonialsOf             the testimonials the blocks show (rules.ts)
+//   siteOf        what the blocks' previews show from the rest of the site (sitedata.ts)
+//   fixedPages, everyFixedPage   how the front page's sections look in the editor (the theme's editor/previews.tsx)
+//   sectionLooks, headingLooks   how the text of the front page looks in the editor (the theme's editor/looks.mjs)
+//   standardPages, standardPaths, frontLeads   the front page, the blog page, the 404 page and the others, and how the front page is
+//                 written (standardPages.ts)
+//   colorFields, colorPairs, colorRoles, defaultColors   the colours under "Farver" and their Material roles (colors.ts)
+//   siteName      the title of the start screen and the way back to it
+//   sharing       what a page shared on social media shows when it has nothing of its own (Base.astro)
+import {
+  Browser,
+  Buildings,
+  Certificate,
+  ChartLineUp,
+  DeviceMobile,
+  FileText,
+  House,
+  FolderSimple,
+  List as ListIcon,
+  MagnifyingGlass,
+  Megaphone,
+  ListChecks,
+  Newspaper,
+  PaintBrushBroad,
+  Palette,
+  PuzzlePiece,
+  Shapes,
+  ShieldCheck,
+  Signpost,
+  Smiley,
+  SlidersHorizontal,
+  SquareHalfBottom,
+  SquaresFour,
+  Sticker,
+  Storefront,
+  Swatches,
+  Tag,
+  ToggleRight,
+  WaveSine,
+  Wrench,
+  type Icon,
+} from '@phosphor-icons/react';
+import type { Part, PartScreen } from '../src/schema';
+import { site } from '../site/site';
+import { privacy } from '@site/privacy';
+import { internalLinks } from '@site/internalLinks';
+
+import { config } from '@site/config';
+export { config };
+import { collections, standardPageFieldsOf } from '@site/collections';
+import { drawActionBar, drawPopup } from '@site/popup';
+
+// A pop-up and an action bar ("Promovering") drawn beside their form (popup.tsx), and an app's kind with a
+// part in the pop-up's box (Mailchimp's signup: drawPart; an app's other kinds have their own drawing). Set here, as
+// collections.ts is also read by packages/editor/scripts/editor-roundtrip.mjs in plain Node, which cannot read JSX.
+const promotions = collections.find((c) => c.id === 'popups');
+if (promotions?.kind === 'folder') {
+  promotions.draws = { standard: (values, data) => drawPopup(values, data), bookingbar: drawActionBar };
+  promotions.drawPart = drawPopup;
+}
+export { collections };
+export { companyParts } from '@site/company';
+export { blockParts } from '@site/blockTexts';
+export { countsOf, keptBy, relationsOf, siteProblems, testimonialsOf, usedBy, usesOf, whatIsAt, type Use } from '@site/rules';
+export { siteOf, type SiteData } from '@site/sitedata';
+export { everyFixedPage, fixedPages, Texts, type Props } from '@theme/editor/previews';
+export { HEADINGS as headingLooks, LOOKS as sectionLooks } from '@theme/editor/looks.mjs';
+export { frontLeads, standardPages, standardPaths, type StandardPage } from '@site/standardPages';
+export { colorFields, colorPairs, colorRoles, defaultColors } from '@site/colors';
+
+/** Parts of the start screen that are a screen with parts, each a screen of its own: "Privatliv" (privacy.ts), and
+ * "Analytics" and "Promovering" with the settings of the apps installed that measure (Google Analytics, Google Ads,
+ * Google Tag Manager) and of those that add a kind of promotion (Calendly, Mailchimp), by their kind
+ * (AppDefinition.category, the app store's); the apps' own pages under "Apps" only install them. */
+export const partScreens: PartScreen[] = [
+  { id: 'maaling', label: 'Analytics', parts: [], apps: ['analytics'] },
+  { id: 'promovering', label: 'Promovering', parts: [], apps: ['booking', 'newsletter'] },
+  privacy,
+];
+
+/** The site's own parts under "Søgemaskineoptimering", each a screen of its own at #seo/<id>, after the editor's
+ * "Videresendelser": "Interne links" (internalLinks.ts). */
+export const seoParts = [internalLinks];
+
+/** The title of the start screen, and of the way back to it on every other screen. */
+export const siteName = site.name;
+
+/** What a page shared on social media shows when it has nothing of its own (Base.astro): the site's name after its
+ * title, its description and its picture (the owner's, config.picture). For the preview under "Sociale medier" (sharedAs in seo.ts). */
+export const sharing = { name: site.name, description: site.description, picture: site.portrait };
+
+/** The icon of each part on the start screen and in the sidebar, by its id. */
+export const icons: Record<string, Icon> = {
+  blog: Newspaper,
+  pages: FileText,
+  header: Browser,
+  menu: ListIcon,
+  mobilmenu: DeviceMobile,
+  kategorier: Tag,
+  popups: Megaphone,
+  virksomheden: Buildings,
+  blokke: SquaresFour,
+  filer: FolderSimple,
+  privatliv: ShieldCheck,
+  maaling: ChartLineUp,
+  promovering: SlidersHorizontal,
+  lister: ListChecks,
+  footer: SquareHalfBottom,
+  seo: MagnifyingGlass,
+  videresendelser: Signpost,
+  udseende: PaintBrushBroad,
+  blokvalg: ToggleRight,
+  apps: PuzzlePiece,
+  appstore: Storefront,
+  avanceret: Wrench,
+  licenser: Certificate,
+  // The screens under "Udseende" (Library.tsx Theme).
+  temaer: Swatches,
+  farver: Palette,
+  logo: Sticker,
+  ikonpakker: Smiley,
+  bevaegelse: WaveSine,
+  dele: Shapes,
+};
+
+// The parts of the site on the start screen, in groups: the content the owner writes and uploads (the
+// pages, the blog, its tags, the pop-ups and the files), what is on every page (the
+// header with the menus, the footer and "Virksomheden": name, contact and booking), the blocks (their
+// shared texts, "Lister", the testimonials and prices they show, which the standard blocks and the apps bring, and
+// "Blokindstillinger", which of them can be put in); the settings of the whole site are on a page of their own (settings).
+// Each is a collection (collections.ts), except "maaling", "promovering" and "privatliv" (partScreens) and the editor's own "virksomheden" (companyParts), "blokke"
+// (blockParts), "filer" (the pictures, PDFs, videos and zip files), "header", "lister", "udseende" (the theme, the colours, the logo
+// and icon, the standard pages (appearance) and the editor's parts: Colors.tsx, BrandForm.tsx and Parts.tsx), "blokvalg" (which blocks can be put in, BlockSettings.tsx), "apps"
+// (the apps that come with the site, src/apps/, AppList.tsx) and "seo" (the redirects, Redirects.tsx, and seoParts). The editor shows
+// each group's parts A–Å by their names in its language (partsIn in Library.tsx), whatever the order here.
+export const groups: { title: string; ids: string[] }[] = [
+  { title: 'Indhold', ids: ['pages', 'blog', 'kategorier', 'popups', 'filer'] },
+  { title: 'På alle sider', ids: ['header', 'footer', 'virksomheden'] },
+  { title: 'Blokke', ids: ['blokke', 'lister', 'blokvalg'] },
+];
+
+/** The settings of the whole site, not on the start screen but on "Indstillinger" (#indstillinger, Library.tsx
+ * Settings), which the gear in the top bar opens (Screen.tsx SettingsLink); A–Å as a group's. */
+export const settings: string[] = ['udseende', 'apps', 'appstore', 'maaling', 'promovering', 'privatliv', 'seo', 'avanceret', 'licenser'];
+
+/** The site's own short lists, on a screen of their own under "Lister" (#lister), with those the standard blocks
+ * bring ("Udtalelser") and the apps (their lists.ts). */
+export const lists: string[] = [];
+
+/** What is in the header on every page, on a screen of its own under "Header" (#header). */
+export const header = ['menu', 'mobilmenu'];
+
+/** The site's own parts under "Udseende" (#udseende), after the logo and icon, each a screen of its own at #udseende/<id>:
+ * "Standardsider", which pages are the front page, the blog page, the 404 page and the contact page, as a list
+ * (standardPageFieldsOf in collections.ts; the privacy policy and the cookie policy are under "Privatliv", privacy.ts). */
+export const appearance: Part[] = [
+  {
+    id: 'standardsider',
+    label: 'Standardsider',
+    icon: House,
+    file: config.standardPages,
+    fields: standardPageFieldsOf('front', 'blog', 'notFound', 'contact'),
+    rows: true,
+  },
+];

package/defaults/internalLinks.ts

@@ -0,0 +1,30 @@
+// "Interne links" under "Søgemaskineoptimering": the keywords of the pages, the posts and the blog page become links
+// to them when the site is built (packages/editor/site/autolinks.mjs), in src/data/internal-links.json: whether they do and how many
+// per page; under them the list of the keywords (`below`, Keywords.tsx in the editor).
+import { LinkSimple } from '@phosphor-icons/react';
+import type { Part } from '../src/schema';
+
+export const internalLinks: Part = {
+  id: 'interne-links',
+  label: 'Interne links',
+  icon: LinkSimple,
+  file: 'src/data/internal-links.json',
+  defaults: { enabled: true, maxPerPage: 8 },
+  below: 'keywords',
+  fields: [
+    {
+      name: 'enabled',
+      label: 'Aktiveret',
+      type: 'boolean',
+      toggle: ['Til', 'Fra'],
+      hint: 'Søgeordene på siderne og blogindlæggene bliver links til dem, når hjemmesiden opdateres.',
+    },
+    {
+      name: 'maxPerPage',
+      label: 'Antal links (pr. side)',
+      type: 'number',
+      required: true,
+      hint: 'Højst så mange automatiske links på en side eller i et indlæg.',
+    },
+  ],
+};

package/defaults/opens.ts

@@ -0,0 +1,18 @@
+// What a button can open of a promotion ("Indhold" › "Promovering"), by its kind (Opens in
+// packages/editor/src/schema.ts): the list's own (the pop-up opens itself; the contact bar nothing,
+// FolderCollection.opens in collections.ts) and the apps' (AppKind.opens: Calendly's booking sheet itself, as
+// "Book en tid" does). For a button's choices in the editor (rules.ts) and its link on the site
+// (standard.ts).
+import { appIdOf, type AppDefinition } from '../src/apps';
+import type { FolderCollection, Opens } from '../src/schema';
+import { collections } from '@site/collections';
+
+// Only the apps' index.ts: what a button needs, without their blocks (apps.ts loads those too).
+const appFiles = import.meta.glob<{ default: AppDefinition }>('/src/apps/*/index.ts', { eager: true });
+
+/** The list's own kinds that a button can open. */
+const ownOpens = (collections.find((c) => c.id === 'popups') as FolderCollection).opens ?? {};
+
+/** What a button opens of a promotion of this kind (its `type`; without one, the pop-up), or undefined for nothing. */
+export const opensOf = (kind: string | undefined): Opens | undefined =>
+  ownOpens[kind || 'standard'] ?? Object.entries(appFiles).find(([path]) => appIdOf(path) === kind)?.[1].default.kinds?.popups?.opens;

package/defaults/popup.tsx

@@ -0,0 +1,93 @@
+// The site's own kinds of promotion drawn beside their form in the editor. A pop-up ("Promovering", the
+// kind "Pop op-vindue") as it looks on the site: the theme's box (PopupView.tsx, the same as Popup.astro shows on the
+// site) with the picture, heading and text, and its button: "Book en tid", "Ring" with the number, a page by its name,
+// or "Download PDF", with the button's own text when it has one; and an app's kind with a part in it (Mailchimp's
+// signup, drawPart: FolderCollection.drawPart). Links and buttons are only drawn.
+import type { BlockData } from '../src/blocks';
+import type { KindPart } from '../src/schema';
+import { buttonsOf } from '../src/standard/buttons/view';
+import { shownPicture } from '../src/standard/view';
+import PopupView from '@theme/components/PopupView';
+import Button from '@theme/ui/Button';
+import Toolbar from '@theme/ui/Toolbar';
+import List, { ListItem } from '@theme/ui/List';
+import type { PopupButtonView } from '@theme/components/PopupButton';
+import { siteT } from '../src/i18n';
+
+// Its button, as the editor has the site's targets and pages.
+function buttonOf(p: Record<string, any>, data: BlockData): PopupButtonView | undefined {
+  const own = String(p.label ?? '').trim();
+  if (p.button === 'file') return { file: { href: '', label: own || 'Download PDF' } };
+  if (p.button !== 'booking' && p.button !== 'phone' && p.button !== 'page') return undefined;
+  const icon = p.button === 'phone' ? 'phone' : 'arrow-right';
+  return { buttons: buttonsOf([{ to: p.button, label: own, href: p.href, kind: 'filled', icon }], data) };
+}
+
+/** A pop-up, of the list's own kind or (`part`) an app's with its part under the text. */
+export function drawPopup(p: Record<string, any>, data: BlockData, part?: KindPart) {
+  const popup = {
+    slug: 'preview',
+    image: p.image ? shownPicture(p.image) : undefined,
+    heading: String(p.heading ?? ''),
+    text: String(p.text ?? '')
+      .split(/\n\s*\n/)
+      .map((t) => t.trim())
+      .filter(Boolean),
+    button: buttonOf(p, data),
+  };
+  return (
+    <div className="not-prose mx-auto max-w-md">
+      <PopupView popup={popup} Part={part?.View} part={part?.viewOf(p, data)} />
+    </div>
+  );
+}
+
+// An action bar ("Promovering", the kind "Handlingslinje") as it looks on a phone (ActionBar.astro in the
+// theme): its one or two items side by side, each a text (a list row of two lines: its heading over its text) or a button, the first button filled, the buttons with their own texts or those of their target
+// ("Book en tid", "Ring"), of what they open (a pop-up's heading, an app's booking sheet: "Book en tid") or of their
+// page; the calendar for what books, the phone for "Ring", the arrow after a page or a pop-up.
+export function drawActionBar(p: Record<string, any>, data: BlockData) {
+  const pageName = (href: string) =>
+    [...(data.relations.fixed ?? []), ...(data.relations.pages ?? [])].find((o) => o.value === href)?.label;
+  const buttons = (
+    (p.buttons ?? []) as { type?: string; heading?: string; text?: string; label?: string; to?: string; href?: string; open?: string }[]
+  ).slice(0, 2);
+  if (!buttons.length) return null;
+  const first = buttons.findIndex((b) => b.type !== 'text');
+  return (
+    <Toolbar label={siteT.theme.actions} className="theme-action-bar-drawn not-prose">
+      {buttons.map((b, i) => {
+        if (b.type === 'text')
+          return (
+            <List key={i} dividers="none" className="theme-action-bar-text">
+              <ListItem headline={String(b.heading ?? '').trim()} supporting={String(b.text ?? '').trim() || undefined} />
+            </List>
+          );
+        const own = String(b.label ?? '').trim();
+        const opens = b.to === 'promotion' ? data.relations.promotions?.find((o) => o.value === b.open) : undefined;
+        // What it does: "Book en tid" also for a promotion that stands for it (an app's booking sheet).
+        const to = opens?.as ?? b.to;
+        const text =
+          to === 'phone'
+            ? own || data.site.labels.call
+            : to === 'page'
+              ? own || pageName(b.href ?? '') || ''
+              : to === 'promotion'
+                ? own || opens?.text || ''
+                : own || data.site.labels.book;
+        const arrow = to === 'page' || to === 'promotion';
+        return (
+          <Button
+            key={i}
+            href=""
+            kind={i === first ? 'filled' : 'outlined'}
+            icon={arrow ? undefined : to === 'phone' ? 'phone' : 'calendar-blank'}
+            trailingIcon={arrow ? 'arrow-right' : undefined}
+          >
+            {text}
+          </Button>
+        );
+      })}
+    </Toolbar>
+  );
+}

package/defaults/privacy.ts

@@ -0,0 +1,79 @@
+// "Privatliv": what the site asks and tells its visitors about their data, as screens of their own (CompanyForm.tsx),
+// at #privatliv/<id>: the cookie banner (src/data/cookies.json, read by packages/editor/theme/components/CookieConsent.astro),
+// "Privatlivssider", which pages are the privacy policy and the cookie policy, as a list like "Standardsider" (in the
+// same file, config.standardPages; standardPages.ts), and "Samtykker", the visitors' answers in the banner.
+import { Cookie, FileText, ListChecks } from '@phosphor-icons/react';
+import type { CookieCategory } from '../lib/cookieCategories.mjs';
+import type { Field, PartScreen } from '../src/schema';
+import { standardPageFieldsOf } from '@site/collections';
+import { config } from '@site/config';
+
+/** The fields of a category of cookies in the banner: its name and what it is for. */
+function categoryFields(category: CookieCategory, place: string, hint = 'Vises, når en app beder om den.'): Field[] {
+  return [
+    { name: category, label: `Navn (${place})`, type: 'string', required: true, max: 30, hint },
+    { name: `${category}Text`, label: `Tekst (${place})`, type: 'text', required: true },
+  ];
+}
+
+export const privacy: PartScreen = {
+  id: 'privatliv',
+  label: 'Privatliv',
+  parts: [
+    {
+      id: 'cookiebanner',
+      label: 'Cookiebanner',
+      icon: Cookie,
+      file: 'src/data/cookies.json',
+      fields: [
+        {
+          name: 'enabled',
+          label: 'Aktiveret',
+          type: 'boolean',
+          toggle: ['Til', 'Fra'],
+          hint: 'Når banneret er fra, er der ingen måling eller annoncer.',
+          edit: { to: 'src/content/pages/privatlivspolitik.md', text: 'Rediger privatlivspolitik' },
+        },
+        { name: 'heading', label: 'Overskrift', type: 'string', required: true },
+        { name: 'text', label: 'Tekst', type: 'text', required: true },
+        {
+          name: 'more',
+          label: 'Linktekst',
+          type: 'string',
+          required: true,
+          hint: 'Linket går til cookiepolitikken.',
+          edit: { to: 'privatliv/privatlivssider', text: 'Rediger privatlivssider' },
+        },
+        { name: 'no', label: 'Knaptekst (nej)', type: 'string', required: true, max: 20 },
+        { name: 'yes', label: 'Knaptekst (ja)', type: 'string', required: true, max: 20 },
+        { name: 'choose', label: 'Knaptekst (avanceret)', type: 'string', required: true, max: 30 },
+        { name: 'save', label: 'Knaptekst (gem valg)', type: 'string', required: true, max: 30 },
+        {
+          name: 'consentId',
+          label: 'Tekst (samtykke-id)',
+          type: 'string',
+          required: true,
+          max: 30,
+          hint: 'Vises med den besøgendes id efter et svar.',
+        },
+        // Each category of cookies, with what it is for, when the banner's "Avanceret" shows them (the necessary ones
+        // always, the others when an app asks about them, packages/editor/site/consent.ts).
+        ...categoryFields('necessary', 'nødvendige', 'Vises altid; de kan ikke slås fra.'),
+        ...categoryFields('preferences', 'præferencer'),
+        ...categoryFields('statistics', 'statistik'),
+        ...categoryFields('marketing', 'marketing'),
+        ...categoryFields('targeting', 'målrettede annoncer'),
+      ],
+    },
+    {
+      id: 'privatlivssider',
+      label: 'Privatlivssider',
+      icon: FileText,
+      file: config.standardPages,
+      fields: standardPageFieldsOf('privacy', 'cookies'),
+      rows: true,
+    },
+    // The visitors' answers in the banner, kept by the Worker (packages/editor/worker/consent.js): the editor's own screen (Consents.tsx).
+    { id: 'samtykker', label: 'Samtykker', icon: ListChecks, opens: 'consents' },
+  ],
+};