@pathmx/core 0.5.0

package/plugins/theme/foundation.css

@@ -0,0 +1,358 @@
+:root {
+  color-scheme: light dark;
+}
+
+:root[data-pmx-scheme="light"] {
+  color-scheme: light;
+}
+
+:root[data-pmx-scheme="dark"] {
+  color-scheme: dark;
+}
+
+:root {
+  --pmx-default-light-color-bg: oklch(0.985 0 0);
+  --pmx-default-light-color-fg: oklch(0.22 0.01 250);
+  --pmx-default-light-color-muted: oklch(0.48 0.02 250);
+  --pmx-default-light-color-surface: oklch(0.96 0.01 250);
+  --pmx-default-light-color-link: oklch(0.48 0.16 255);
+  --pmx-default-light-color-accent: oklch(0.54 0.18 255);
+  --pmx-default-light-color-danger: oklch(0.54 0.2 25);
+  --pmx-default-light-color-border: oklch(0.86 0.02 250);
+  --pmx-default-light-color-focus: oklch(0.54 0.18 255);
+  --pmx-default-dark-color-bg: oklch(0.18 0.01 250);
+  --pmx-default-dark-color-fg: oklch(0.94 0.01 250);
+  --pmx-default-dark-color-muted: oklch(0.72 0.02 250);
+  --pmx-default-dark-color-surface: oklch(0.24 0.015 250);
+  --pmx-default-dark-color-link: oklch(0.76 0.13 250);
+  --pmx-default-dark-color-accent: oklch(0.72 0.16 250);
+  --pmx-default-dark-color-danger: oklch(0.72 0.18 25);
+  --pmx-default-dark-color-border: oklch(0.36 0.02 250);
+  --pmx-default-dark-color-focus: oklch(0.76 0.13 250);
+
+  --pmx-color-bg: light-dark(
+    var(--pmx-default-light-color-bg),
+    var(--pmx-default-dark-color-bg)
+  );
+  --pmx-color-fg: light-dark(
+    var(--pmx-default-light-color-fg),
+    var(--pmx-default-dark-color-fg)
+  );
+  --pmx-color-muted: light-dark(
+    var(--pmx-default-light-color-muted),
+    var(--pmx-default-dark-color-muted)
+  );
+  --pmx-color-surface: light-dark(
+    var(--pmx-default-light-color-surface),
+    var(--pmx-default-dark-color-surface)
+  );
+  --pmx-color-link: light-dark(
+    var(--pmx-default-light-color-link),
+    var(--pmx-default-dark-color-link)
+  );
+  --pmx-color-accent: light-dark(
+    var(--pmx-default-light-color-accent),
+    var(--pmx-default-dark-color-accent)
+  );
+  --pmx-color-danger: light-dark(
+    var(--pmx-default-light-color-danger),
+    var(--pmx-default-dark-color-danger)
+  );
+  --pmx-color-border: light-dark(
+    var(--pmx-default-light-color-border),
+    var(--pmx-default-dark-color-border)
+  );
+  --pmx-color-focus: light-dark(
+    var(--pmx-default-light-color-focus),
+    var(--pmx-default-dark-color-focus)
+  );
+
+  --pmx-font-body: ui-sans-serif, system-ui, sans-serif;
+  --pmx-font-heading: var(--pmx-font-body);
+  --pmx-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --pmx-prose-size: 1rem;
+  --pmx-prose-leading: 1.6;
+  --pmx-prose-flow: 1em;
+  --pmx-prose-gutter: 1.75rem;
+  --pmx-radius: 0.5rem;
+  --pmx-radius-sm: 0.25rem;
+  --pmx-radius-md: 0.35rem;
+  --pmx-radius-lg: 0.5rem;
+  --pmx-radius-xl: 0.75rem;
+  --pmx-radius-2xl: 1rem;
+  --pmx-radius-3xl: 1.5rem;
+  --pmx-radius-4xl: 2rem;
+  --pmx-radius-full: 9999px;
+  --pmx-document-measure: 72ch;
+
+  /* Shared viewport chrome contract. Runtime-measured chrome updates insets. */
+  --pmx-viewport-inset-block-start: 0px;
+  --pmx-viewport-inset-block-end: 0px;
+  --pmx-viewport-gutter-block-start: max(1rem, env(safe-area-inset-top, 0px));
+  --pmx-viewport-gutter-block-end: max(1rem, env(safe-area-inset-bottom, 0px));
+  --pmx-scroll-offset-block-start: calc(
+    var(--pmx-viewport-inset-block-start) +
+      var(--pmx-viewport-gutter-block-start)
+  );
+  --pmx-sticky-block-start: var(--pmx-scroll-offset-block-start);
+  --pmx-sticky-block-end: calc(
+    var(--pmx-viewport-inset-block-end) + var(--pmx-viewport-gutter-block-end)
+  );
+  --pmx-sticky-max-block-size: max(
+    0px,
+    calc(100dvh - var(--pmx-sticky-block-start) - var(--pmx-sticky-block-end))
+  );
+  --pmx-sticky-header-transition-duration: 180ms;
+
+  --pmx-default-light-code-bg: oklch(0.955 0.01 250);
+  --pmx-default-light-code-fg: oklch(0.22 0.01 250);
+  --pmx-default-light-code-comment: oklch(0.48 0.02 250);
+  --pmx-default-light-code-keyword: oklch(0.47 0.16 255);
+  --pmx-default-light-code-string: oklch(0.43 0.12 145);
+  --pmx-default-light-code-punctuation: oklch(0.42 0.02 250);
+  --pmx-default-dark-code-bg: oklch(0.22 0.015 250);
+  --pmx-default-dark-code-fg: oklch(0.9 0.01 250);
+  --pmx-default-dark-code-comment: oklch(0.68 0.02 250);
+  --pmx-default-dark-code-keyword: oklch(0.78 0.13 255);
+  --pmx-default-dark-code-string: oklch(0.78 0.12 145);
+  --pmx-default-dark-code-punctuation: oklch(0.78 0.02 250);
+  --pmx-code-bg: light-dark(
+    var(--pmx-default-light-code-bg),
+    var(--pmx-default-dark-code-bg)
+  );
+  --pmx-code-fg: light-dark(
+    var(--pmx-default-light-code-fg),
+    var(--pmx-default-dark-code-fg)
+  );
+  --pmx-code-comment: light-dark(
+    var(--pmx-default-light-code-comment),
+    var(--pmx-default-dark-code-comment)
+  );
+  --pmx-code-keyword: light-dark(
+    var(--pmx-default-light-code-keyword),
+    var(--pmx-default-dark-code-keyword)
+  );
+  --pmx-code-string: light-dark(
+    var(--pmx-default-light-code-string),
+    var(--pmx-default-dark-code-string)
+  );
+  --pmx-code-punctuation: light-dark(
+    var(--pmx-default-light-code-punctuation),
+    var(--pmx-default-dark-code-punctuation)
+  );
+
+  /* border radii */
+  --pmx-radius-sm: 0.25rem;
+  --pmx-radius-md: 0.35rem;
+  --pmx-radius-lg: 0.5rem;
+  --pmx-radius-xl: 0.75rem;
+  --pmx-radius-2xl: 1rem;
+  --pmx-radius-3xl: 1.5rem;
+  --pmx-radius-full: 9999px;
+
+  /* Shadows follow a compact Tailwind-like elevation scale. */
+  --pmx-shadow-2xs: 0 1px rgb(0 0 0 / 5%);
+  --pmx-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  --pmx-shadow-sm:
+    0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
+  --pmx-shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+  --pmx-shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+  --pmx-shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+  --pmx-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
+  --pmx-shadow: var(--pmx-shadow-sm);
+
+  /* Material: frosted-glass fills. Thickness is how much sits behind shows through. */
+  --pmx-material-ultra-thin: color-mix(
+    in oklch,
+    var(--pmx-color-bg) 42%,
+    transparent
+  );
+  --pmx-material-thin: color-mix(
+    in oklch,
+    var(--pmx-color-bg) 56%,
+    transparent
+  );
+  --pmx-material-regular: color-mix(
+    in oklch,
+    var(--pmx-color-bg) 72%,
+    transparent
+  );
+  --pmx-material-thick: color-mix(
+    in oklch,
+    var(--pmx-color-bg) 86%,
+    transparent
+  );
+  --pmx-material-ultra-thick: color-mix(
+    in oklch,
+    var(--pmx-color-bg) 96%,
+    transparent
+  );
+  --pmx-material: var(--pmx-material-regular);
+  --pmx-material-filter: blur(1.25rem) saturate(1.8);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --pmx-material-ultra-thin: color-mix(
+      in oklch,
+      var(--pmx-color-bg) 88%,
+      transparent
+    );
+    --pmx-material-thin: color-mix(
+      in oklch,
+      var(--pmx-color-bg) 92%,
+      transparent
+    );
+    --pmx-material-regular: var(--pmx-color-bg);
+    --pmx-material-thick: var(--pmx-color-bg);
+    --pmx-material-ultra-thick: var(--pmx-color-bg);
+    --pmx-material-filter: none;
+  }
+}
+
+html {
+  scroll-padding-block-start: var(--pmx-scroll-offset-block-start);
+  scroll-padding-block-end: var(--pmx-sticky-block-end);
+}
+
+body {
+  margin: 0;
+  min-height: 100svh;
+  background: var(--pmx-color-bg);
+  color: var(--pmx-color-fg);
+  font-family: var(--pmx-font-body);
+  font-size: var(--pmx-prose-size);
+  line-height: var(--pmx-prose-leading);
+}
+
+:where([data-pmx-sticky-header]) {
+  position: sticky;
+  z-index: 10;
+  inset-block-start: 0;
+  transition:
+    opacity var(--pmx-sticky-header-transition-duration) ease-out,
+    transform var(--pmx-sticky-header-transition-duration) ease-out;
+}
+
+:where([data-pmx-sticky-header][data-pmx-hidden]) {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(calc(-100% - 1px));
+}
+
+:where([data-pmx-sticky-header]:focus-within) {
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-pmx-sticky-header]) {
+    transition: none;
+  }
+}
+
+.pmx-document {
+  max-width: var(--pmx-document-measure);
+  margin-inline: auto;
+  padding-block: 1.5rem 3rem;
+  padding-inline: max(1rem, var(--pmx-prose-gutter));
+}
+
+.pmx-document > * + * {
+  margin-block-start: var(--pmx-prose-flow);
+}
+
+.pmx-document > [data-pmx-block]:not(:last-of-type) {
+  padding-block-end: var(--pmx-prose-flow);
+  border-block-end: 1px solid var(--pmx-color-border);
+}
+
+.pmx-error {
+  margin-block: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--pmx-color-danger);
+  border-radius: var(--pmx-radius);
+  background: color-mix(
+    in oklch,
+    var(--pmx-color-danger) 8%,
+    var(--pmx-color-bg)
+  );
+  color: var(--pmx-color-fg);
+}
+
+.pmx-error strong {
+  color: var(--pmx-color-danger);
+}
+
+.pmx-error button {
+  display: block;
+  margin-block-start: 0.75rem;
+}
+
+/* links */
+
+.pmx-link {
+  color: var(--pmx-color-link);
+  text-decoration: none;
+}
+
+.pmx-link:hover {
+  text-decoration: underline;
+}
+
+.pmx-link-external {
+  color: var(--pmx-color-link);
+  text-decoration: none;
+}
+
+.pmx-link-external:hover {
+  text-decoration: underline;
+}
+
+.pmx-link-new-tab::after {
+  content: "";
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
+  margin-inline-start: 0.2em;
+  background: currentColor;
+  vertical-align: 0.05em;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='m10 14 11-11'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='m10 14 11-11'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+}
+
+:where(
+  .pmx-material-ultra-thin,
+  .pmx-material-thin,
+  .pmx-material-regular,
+  .pmx-material-thick,
+  .pmx-material-ultra-thick
+) {
+  backdrop-filter: var(--pmx-material-filter);
+}
+
+:where(.pmx-material-ultra-thin) {
+  background: var(--pmx-material-ultra-thin);
+}
+
+:where(.pmx-material-thin) {
+  background: var(--pmx-material-thin);
+}
+
+:where(.pmx-material-regular) {
+  background: var(--pmx-material);
+}
+
+:where(.pmx-material-thick) {
+  background: var(--pmx-material-thick);
+}
+
+:where(.pmx-material-ultra-thick) {
+  background: var(--pmx-material-ultra-thick);
+}

package/plugins/theme/index.ts

@@ -0,0 +1,333 @@
+import { cachedRouteTargets } from "../../invalidation.ts"
+import type { HtmlElement } from "../../environment.ts"
+import { posixPath } from "../../path.ts"
+import { isIndexSource } from "../../server/router.ts"
+import type { Source } from "../../source/index.ts"
+import type { Plugin, PluginLog } from "../types.ts"
+import foundation from "./foundation.css" with { type: "text" }
+import prose from "./prose.css" with { type: "text" }
+import viewTransition from "./view-transition.css" with { type: "text" }
+import { SchemeToggleComponent } from "./components.ts"
+
+type ThemeGroup = Record<string, string | number | undefined>
+
+export type PathMXTheme = {
+  color?: ThemeGroup
+  font?: ThemeGroup
+  prose?: ThemeGroup
+  shape?: ThemeGroup
+  code?: ThemeGroup
+  measure?: string
+  light?: PathMXTheme
+  dark?: PathMXTheme
+}
+
+const colorTokens: Record<string, string> = {
+  bg: "--pmx-color-bg",
+  fg: "--pmx-color-fg",
+  muted: "--pmx-color-muted",
+  surface: "--pmx-color-surface",
+  link: "--pmx-color-link",
+  accent: "--pmx-color-accent",
+  danger: "--pmx-color-danger",
+  border: "--pmx-color-border",
+  focus: "--pmx-color-focus",
+}
+
+const fontTokens: Record<string, string> = {
+  body: "--pmx-font-body",
+  heading: "--pmx-font-heading",
+  mono: "--pmx-font-mono",
+}
+
+const proseTokens: Record<string, string> = {
+  size: "--pmx-prose-size",
+  leading: "--pmx-prose-leading",
+  flow: "--pmx-prose-flow",
+  gutter: "--pmx-prose-gutter",
+}
+
+const shapeTokens: Record<string, string> = {
+  radius: "--pmx-radius",
+}
+
+const codeTokens: Record<string, string> = {
+  bg: "--pmx-code-bg",
+  fg: "--pmx-code-fg",
+  comment: "--pmx-code-comment",
+  keyword: "--pmx-code-keyword",
+  string: "--pmx-code-string",
+  punctuation: "--pmx-code-punctuation",
+}
+
+const variantKeys = ["color", "font", "prose", "shape", "code"] as const
+const themeKeys = [...variantKeys, "measure", "light", "dark"] as const
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value)
+}
+
+function isRootIndex(source: Source) {
+  return isIndexSource(source) && posixPath.dirname(source.path) === "/"
+}
+
+function readGroup(
+  value: unknown,
+  tokens: Record<string, string>,
+  log: PluginLog | undefined,
+  path: string,
+): ThemeGroup | undefined {
+  if (value === undefined) return
+  if (!isPlainObject(value)) {
+    log?.warn("invalid", { path, detail: "Expected an object." })
+    return
+  }
+  const group: ThemeGroup = {}
+  for (const [key, raw] of Object.entries(value)) {
+    if (!tokens[key]) {
+      // TODO: move this to zod/standard schema based validation
+      log?.warn("unknown", { path: `${path}.${key}` })
+      continue
+    }
+    if (typeof raw === "string" || typeof raw === "number") group[key] = raw
+  }
+  return Object.keys(group).length ? group : undefined
+}
+
+function readVariant(
+  value: unknown,
+  log: PluginLog | undefined,
+  path: string,
+  extra: readonly string[] = [],
+): PathMXTheme | undefined {
+  if (value === undefined) return
+  if (!isPlainObject(value)) {
+    log?.warn("invalid", { path, detail: "Expected an object." })
+    return
+  }
+  for (const key of Object.keys(value)) {
+    if (
+      ![...variantKeys, ...extra].includes(key as (typeof themeKeys)[number])
+    ) {
+      // TODO: move this to zod/standard schema based validation
+      log?.warn("unknown", { path: `${path}.${key}` })
+    }
+  }
+  const variant: PathMXTheme = {
+    color: readGroup(value.color, colorTokens, log, `${path}.color`),
+    font: readGroup(value.font, fontTokens, log, `${path}.font`),
+    prose: readGroup(value.prose, proseTokens, log, `${path}.prose`),
+    shape: readGroup(value.shape, shapeTokens, log, `${path}.shape`),
+    code: readGroup(value.code, codeTokens, log, `${path}.code`),
+  }
+  return Object.values(variant).some(Boolean) ? variant : undefined
+}
+
+export function normalizeTheme(
+  value: unknown,
+  log?: PluginLog,
+): PathMXTheme | undefined {
+  if (value === undefined) return
+  if (!isPlainObject(value)) {
+    log?.warn("invalid", { detail: "Expected an object." })
+    return
+  }
+  const base = readVariant(value, log, "theme", ["measure", "light", "dark"])
+  const measure = typeof value.measure === "string" ? value.measure : undefined
+  const light = readVariant(value.light, log, "theme.light")
+  const dark = readVariant(value.dark, log, "theme.dark")
+  const theme: PathMXTheme = {
+    ...(base ?? {}),
+    ...(measure ? { measure } : {}),
+    ...(light ? { light } : {}),
+    ...(dark ? { dark } : {}),
+  }
+  return Object.keys(theme).length ? theme : undefined
+}
+
+function declarations(theme: PathMXTheme | undefined) {
+  if (!theme) return []
+  const out: string[] = []
+  const add = (
+    group: ThemeGroup | undefined,
+    tokens: Record<string, string>,
+  ) => {
+    if (!group) return
+    for (const [key, value] of Object.entries(group)) {
+      const name = tokens[key]
+      if (name && value !== undefined) out.push(`${name}: ${value};`)
+    }
+  }
+  add(theme.color, colorTokens)
+  add(theme.font, fontTokens)
+  add(theme.prose, proseTokens)
+  add(theme.shape, shapeTokens)
+  add(theme.code, codeTokens)
+  if (theme.measure) out.push(`--pmx-document-measure: ${theme.measure};`)
+  return out
+}
+
+function renderRule(selector: string, decls: readonly string[]) {
+  if (!decls.length) return ""
+  return `${selector} {\n${decls.map((line) => `  ${line}`).join("\n")}\n}`
+}
+
+function indentRule(css: string) {
+  return css
+    .split("\n")
+    .map((line) => (line ? `  ${line}` : line))
+    .join("\n")
+}
+
+function forcedSelector(selector: string, scheme: "light" | "dark") {
+  return selector === ":root"
+    ? `:root[data-pmx-scheme="${scheme}"]`
+    : `[data-pmx-scheme="${scheme}"] ${selector}`
+}
+
+function systemSelector(selector: string, scheme: "light" | "dark") {
+  const opposite = scheme === "light" ? "dark" : "light"
+  return selector === ":root"
+    ? `:root:not([data-pmx-scheme="${opposite}"])`
+    : `:root:not([data-pmx-scheme="${opposite}"]) ${selector}`
+}
+
+function renderSchemeVariants(
+  selector: string,
+  scheme: "light" | "dark",
+  decls: readonly string[],
+) {
+  if (!decls.length) return []
+  return [
+    renderRule(forcedSelector(selector, scheme), decls),
+    `@media (prefers-color-scheme: ${scheme}) {\n${indentRule(
+      renderRule(systemSelector(selector, scheme), decls),
+    )}\n}`,
+  ]
+}
+
+export function renderThemeStyle(theme: PathMXTheme, selector: string) {
+  return [
+    renderRule(selector, declarations(theme)),
+    ...renderSchemeVariants(selector, "light", declarations(theme.light)),
+    ...renderSchemeVariants(selector, "dark", declarations(theme.dark)),
+  ]
+    .filter(Boolean)
+    .join("\n\n")
+}
+
+export const THEME_LIGHT_BG = "oklch(0.985 0 0)"
+export const THEME_DARK_BG = "oklch(0.18 0.01 250)"
+
+export function themeBackground(
+  theme: PathMXTheme | undefined,
+  scheme: "light" | "dark",
+) {
+  const authored = theme?.[scheme]?.color?.bg ?? theme?.color?.bg
+  if (typeof authored === "string" || typeof authored === "number")
+    return String(authored)
+  return scheme === "light" ? THEME_LIGHT_BG : THEME_DARK_BG
+}
+
+function rootThemeSignature(source?: Source) {
+  if (!source || !isRootIndex(source)) return ""
+  const theme = normalizeTheme(source.data.theme)
+  if (!theme) return ""
+  return [
+    renderThemeStyle(theme, ":root"),
+    themeBackground(theme, "light"),
+    themeBackground(theme, "dark"),
+  ].join("\n")
+}
+
+function appendCriticalBackground(
+  element: HtmlElement,
+  theme: PathMXTheme | undefined,
+) {
+  const current = element.getAttribute("style")?.trim() ?? ""
+  const scheme = element.getAttribute("data-pmx-scheme")
+  const declarations = current
+    ? [current.replace(/;?$/, ";")]
+    : [
+        `color-scheme: ${scheme === "light" || scheme === "dark" ? scheme : "light dark"};`,
+      ]
+  declarations.push(
+    `background-color: light-dark(${themeBackground(theme, "light")}, ${themeBackground(theme, "dark")});`,
+  )
+  element.setAttribute("style", declarations.join(" "))
+}
+
+export function ThemePlugin(): Plugin {
+  let rootTheme: PathMXTheme | undefined
+  let rootKeys: string[] = []
+
+  return {
+    id: "theme",
+    index(source, app) {
+      if (!isRootIndex(source)) return
+      rootKeys = [source.path, source.id]
+      rootTheme = normalizeTheme(source.data.theme, app.log)
+    },
+
+    unindex(sourcePath) {
+      if (!rootKeys.includes(sourcePath)) return
+      rootTheme = undefined
+      rootKeys = []
+    },
+
+    components: [SchemeToggleComponent],
+
+    documentAssets(ctx) {
+      const text = rootTheme
+        ? `${foundation}\n\n${prose}\n\n${viewTransition}\n\n${renderThemeStyle(rootTheme, ":root")}`
+        : `${foundation}\n\n${prose}\n\n${viewTransition}`
+      ctx.addAsset(
+        { type: "stylesheet", name: "theme.css", text },
+        {
+          type: "meta",
+          attrs: { name: "color-scheme", content: "light dark" },
+        },
+        {
+          type: "meta",
+          attrs: {
+            name: "theme-color",
+            media: "(prefers-color-scheme: light)",
+            content: themeBackground(rootTheme, "light"),
+          },
+        },
+        {
+          type: "meta",
+          attrs: {
+            name: "theme-color",
+            media: "(prefers-color-scheme: dark)",
+            content: themeBackground(rootTheme, "dark"),
+          },
+        },
+      )
+    },
+
+    streamSelectors() {
+      return {
+        html: {
+          element: (element) => appendCriticalBackground(element, rootTheme),
+        },
+      }
+    },
+
+    invalidate({ before, after }, app) {
+      if (rootThemeSignature(before) === rootThemeSignature(after)) return
+      return { targets: cachedRouteTargets(app.sources.builtPages()) }
+    },
+
+    page(html, ctx, app) {
+      if (isRootIndex(ctx.source)) return html
+      const theme = normalizeTheme(ctx.source.data.theme, app.log)
+      if (theme)
+        ctx.addAsset({
+          type: "style",
+          text: renderThemeStyle(theme, ".pmx-document"),
+        })
+      return html
+    },
+  }
+}