@ciderpress/ui 1.0.0-rc.3 → 1.0.0-rc.5

package/dist/theme/hooks/use-ciderpress.ts

@@ -1,17 +1,17 @@
-import type { FooterConfig, HomeConfig, SiteConfig } from '@ciderpress/config'
+import type { FooterConfig, HomeConfig, SerializedIcon } from '@ciderpress/config'
 import { useSite } from '@rspress/core/runtime'
 
 export interface CiderpressSidebarItem {
   readonly text?: string
   readonly link?: string
-  readonly icon?: string
+  readonly icon?: SerializedIcon
   readonly items?: readonly CiderpressSidebarItem[]
 }
 
 export interface CiderpressSidebarLink {
   readonly text: string
   readonly link: string
-  readonly icon?: string | { readonly id: string; readonly color: string }
+  readonly icon?: SerializedIcon
   readonly style?: 'brand' | 'alt' | 'ghost'
   readonly shape?: 'square' | 'rounded' | 'circle'
 }
@@ -19,7 +19,7 @@ export interface CiderpressSidebarLink {
 export interface WorkspaceCardData {
   readonly title: string
   readonly href: string
-  readonly icon: string | { readonly id: string; readonly color: string } | undefined
+  readonly icon: SerializedIcon | undefined
   readonly scope: string | undefined
   readonly description: string | undefined
   readonly tags: readonly string[]
@@ -33,6 +33,61 @@ export interface WorkspaceGroupData {
   readonly cards: readonly WorkspaceCardData[]
 }
 
+/**
+ * Serialised view of the unified `CiderpressConfig` that the runtime
+ * theme components still read through. The `site` field is rebuilt in
+ * `packages/ui/src/config.ts` (`buildSiteBlock`) from the new top-level
+ * `editLink` / `reportLink` / `topbar` / `sidebar` / `footer` / `version`
+ * config — kept under the legacy `site.*` name so theme components don't
+ * need to be rewired to look up each field individually.
+ */
+export interface CiderpressSiteBlock {
+  readonly version: string | undefined
+  readonly edit:
+    | {
+        readonly repo: string
+        readonly branch?: string
+        readonly directory?: string
+        readonly label?: string
+      }
+    | undefined
+  readonly report:
+    | {
+        readonly repo: string
+        readonly branch?: string
+        readonly directory?: string
+        readonly label?: string
+      }
+    | undefined
+  readonly topbarCta: { readonly text: string; readonly href: string } | undefined
+  readonly sidebarPromo:
+    | {
+        readonly title: string
+        readonly body: string
+        readonly cta: { readonly text: string; readonly href: string }
+      }
+    | undefined
+  readonly announcement:
+    | {
+        readonly id?: string
+        readonly lead?: string
+        readonly message: string
+        readonly cta?: { readonly href: string; readonly label: string }
+        readonly persistent?: boolean
+      }
+    | undefined
+  readonly footer:
+    | {
+        readonly columns?: readonly {
+          readonly heading: string
+          readonly links: readonly { readonly text: string; readonly href: string }[]
+        }[]
+        readonly tagline?: string
+        readonly brandMark?: string
+      }
+    | undefined
+}
+
 interface CiderpressThemeConfig {
   readonly sidebar: Record<string, readonly CiderpressSidebarItem[]>
   readonly sidebarAbove: readonly CiderpressSidebarLink[] | undefined
@@ -41,7 +96,7 @@ interface CiderpressThemeConfig {
   readonly standaloneScopePaths: readonly string[] | undefined
   readonly home: HomeConfig | undefined
   readonly ciderpressFooter: FooterConfig | undefined
-  readonly site: SiteConfig | undefined
+  readonly site: CiderpressSiteBlock | undefined
 }
 
 /**

package/dist/theme/lib/read-social-links.ts

@@ -2,8 +2,9 @@ import type { CiderpressSocialLink } from '../components/nav/ciderpress-nav-soci
 
 /**
  * Pull social-link entries (GitHub, npm, etc) from Rspress's `site`
- * shape. Lives on `site.themeConfig.socialLinks` after Rspress
- * normalisation but isn't surfaced on the public typings.
+ * shape. Lives on `site.themeConfig.socialLinks` after the
+ * `packages/ui/src/config.ts` serialiser writes the unified `socials`
+ * config into the runtime theme config.
  *
  * @param site - Rspress site data (typically the result of `useSite().site`)
  * @returns Array of social-link entries (empty array when not configured)
@@ -22,6 +23,6 @@ export function readSocialLinks(site: unknown): readonly CiderpressSocialLink[]
       typeof item === 'object' &&
       item !== null &&
       typeof (item as { icon?: unknown }).icon === 'string' &&
-      typeof (item as { content?: unknown }).content === 'string'
+      typeof (item as { url?: unknown }).url === 'string'
   )
 }

package/dist/theme/lib/theme-favicon.ts

@@ -107,7 +107,7 @@ function buildIconDataUri(brand: string, shadow: string, surface: string): strin
 /**
  * Locate the existing `<link rel="icon">` element, creating one if the
  * document head doesn't have one yet (a defensive fallback — Rspress
- * normally renders one from `config.icon`).
+ * normally renders one from `brand.favicon`).
  *
  * @private
  * @returns Mutable link element

package/dist/theme/lib/with-mount-base.ts

@@ -0,0 +1,31 @@
+import { withBase } from '@rspress/core/runtime'
+
+/**
+ * Prefix `value` with the configured Rspress `base` only when it's an
+ * absolute path that would otherwise escape the mount. Pass-through for
+ * data URIs, fully-qualified URLs, hash anchors, and relative paths —
+ * applying `withBase()` to those produces broken results (the kitchen-
+ * sink data-URI logo regression that the examples e2e caught).
+ *
+ * Use this wrapper at every render site that takes a user-supplied asset
+ * URL from the ciderpress config (`logo`, `heroDemo.src`, brand chips
+ * etc.), instead of calling `withBase()` directly.
+ *
+ * @param value - Asset URL or path from user config (may be `undefined`)
+ * @returns The base-prefixed URL when applicable, otherwise `value` as-is
+ */
+export function withMountBase(value: string | undefined): string {
+  if (value === undefined) {
+    return ''
+  }
+  if (!value.startsWith('/')) {
+    return value
+  }
+  // Data URIs (`data:image/svg+xml;...`) and protocol-relative or
+  // explicit-protocol URLs are absolute in their own namespace — never
+  // prefix.
+  if (value.startsWith('//') || /^[a-z][a-z0-9+\-.]*:/i.test(value)) {
+    return value
+  }
+  return withBase(value)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciderpress/ui",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.5",
   "description": "Rspress plugin, theme components, and styles for ciderpress",
   "keywords": [
     "ciderpress",
@@ -48,31 +48,31 @@
     "@iconify-json/catppuccin": "^1.2.17",
     "@iconify-json/devicon": "^1.2.62",
     "@iconify-json/logos": "^1.2.11",
-    "@iconify-json/material-icon-theme": "^1.2.67",
+    "@iconify-json/material-icon-theme": "^1.2.68",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/pixelarticons": "^1.2.6",
-    "@iconify-json/simple-icons": "^1.2.86",
+    "@iconify-json/simple-icons": "^1.2.87",
     "@iconify-json/skill-icons": "^1.2.4",
-    "@iconify-json/vscode-icons": "^1.2.55",
+    "@iconify-json/vscode-icons": "^1.2.62",
     "@iconify/react": "^6.0.2",
     "clsx": "^2.1.1",
     "katex": "^0.17.0",
-    "massaman": "^0.2.0",
+    "massaman": "^0.3.0",
     "mermaid": "^10.9.6",
     "openapi-sampler": "^1.7.4",
-    "react-aria-components": "^1.18.0",
+    "react-aria-components": "^1.19.0",
     "ts-morph": "^28.0.0",
     "unist-util-visit": "^5.1.0",
-    "@ciderpress/config": "1.0.0-rc.3",
-    "@ciderpress/theme": "1.0.0-rc.2"
+    "@ciderpress/config": "1.0.0-rc.4",
+    "@ciderpress/theme": "1.0.0-rc.3"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@rslib/core": "^0.22.0",
-    "@rspress/core": "^2.0.14",
+    "@rslib/core": "^0.23.1",
+    "@rspress/core": "^2.0.15",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "esbuild": "^0.28.0",
+    "esbuild": "^0.28.1",
     "geist": "^1.7.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -81,10 +81,10 @@
     "rspress-plugin-katex": "^1.0.1",
     "rspress-plugin-supersub": "^1.0.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.14",
+    "@rspress/core": "^2.0.15",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

package/src/theme/components/footer/site-footer.tsx

@@ -1,14 +1,15 @@
+import type { CopyrightConfig, FooterConfig } from '@ciderpress/config'
 import { useSite } from '@rspress/core/runtime'
-import { match } from 'massaman/match'
+import { match, P } from 'massaman/match'
 import type React from 'react'
 
 import { useCiderpress } from '../../hooks/use-ciderpress'
 import { readSocialLinks } from '../../lib/read-social-links'
 import { RouteLink } from '../../lib/route-link.tsx'
 import { safeUrl } from '../../lib/safe-url.ts'
+import { withMountBase } from '../../lib/with-mount-base.ts'
 import { CiderpressNavSocialLinks } from '../nav/ciderpress-nav-social-links'
 import { ThemeSwitcher } from '../nav/theme-switcher'
-import { CiderpressMark } from '../shared/ciderpress-mark'
 
 import './site-footer.css'
 
@@ -35,14 +36,17 @@ export function SiteFooter(): React.ReactElement | null {
   const { message, copyright, socials } = ciderpressFooter ?? {}
   const { columns, tagline, brandMark } = siteFooter ?? {}
 
-  const hasRspressContent = message !== undefined || copyright !== undefined || socials === true
+  const copyrightText = resolveCopyright(copyright, rspressSite.title)
+  const shouldRenderSocials = socials === true && socialLinks.length > 0
+
+  const hasFooterContent = message !== undefined || copyrightText !== null || shouldRenderSocials
   const hasSiteContent = columns !== undefined || tagline !== undefined
   // The footer also hosts the theme switcher when it's enabled — so a
-  // config with `theme.switcher: true` but no other footer content
+  // config with `theme.themeSwitcher: true` but no other footer content
   // still needs the footer shell rendered.
   const hasSwitcher = __CIDERPRESS_THEME_SWITCHER__
 
-  if (!hasRspressContent && !hasSiteContent && !hasSwitcher) {
+  if (!hasFooterContent && !hasSiteContent && !hasSwitcher) {
     return null
   }
 
@@ -56,7 +60,16 @@ export function SiteFooter(): React.ReactElement | null {
             <div className="cp-site-footer__brand-mark">
               {match(brandMark)
                 .with(undefined, () => (
-                  <CiderpressMark className="cp-site-footer__brand-icon" title="" />
+                  // Default to the project's `/icon.svg` (auto-generated
+                  // from `config.title` at sync time, or overridden by
+                  // shipping a `public/icon.svg`). This was previously
+                  // the hardcoded `<CiderpressMark />` apple, which
+                  // leaked ciderpress branding into every footer.
+                  <img
+                    src={withMountBase('/icon.svg')}
+                    alt=""
+                    className="cp-site-footer__brand-icon"
+                  />
                 ))
                 .otherwise((mark) => mark)}
             </div>
@@ -65,7 +78,7 @@ export function SiteFooter(): React.ReactElement | null {
               .otherwise((msg) => (
                 <p className="cp-site-footer__message">{msg}</p>
               ))}
-            {match(socials === true && socialLinks.length > 0)
+            {match(shouldRenderSocials)
               .with(true, () => (
                 <div className="cp-site-footer__socials">
                   <CiderpressNavSocialLinks links={socialLinks} />
@@ -95,8 +108,8 @@ export function SiteFooter(): React.ReactElement | null {
       </div>
       <div className="cp-site-footer__bottom">
         <div className="cp-site-footer__bottom-inner">
-          {match(copyright)
-            .with(undefined, () => null)
+          {match(copyrightText)
+            .with(null, () => null)
             .otherwise((cr) => (
               <span className="cp-site-footer__copyright">{cr}</span>
             ))}
@@ -113,3 +126,49 @@ export function SiteFooter(): React.ReactElement | null {
     </footer>
   )
 }
+
+/**
+ * Resolve the `footer.copyright` config union into a string for rendering.
+ *
+ * Accepts the new public shape: `true` for auto-generation from the site
+ * title + current year, a verbatim string, or a `CopyrightConfig` object
+ * with `company` / `dba` / `year`. `undefined` returns `null` so the
+ * caller can skip the render.
+ *
+ * @private
+ * @param copyright - The footer copyright config value
+ * @param siteTitle - The Rspress site title to use as fallback owner name
+ * @returns The formatted copyright string, or `null` when nothing should render
+ */
+function resolveCopyright(
+  copyright: FooterConfig['copyright'],
+  siteTitle: string | undefined
+): string | null {
+  return match(copyright)
+    .with(undefined, () => null)
+    .with(true, () => formatCopyright({}, siteTitle))
+    .with(P.string, (s) => s)
+    .otherwise((cfg) => formatCopyright(cfg, siteTitle))
+}
+
+/**
+ * Build a copyright string from a partial `CopyrightConfig`. Falls back to
+ * the site title for the owner name and the current year for the date.
+ *
+ * @private
+ * @param cfg - Copyright config object (may be empty)
+ * @param siteTitle - Fallback owner name
+ * @returns Formatted copyright string
+ */
+function formatCopyright(cfg: CopyrightConfig, siteTitle: string | undefined): string {
+  const currentYear = new Date().getFullYear()
+  const yearPart = match(cfg.year)
+    .with(undefined, () => String(currentYear))
+    .with(P.number, (n) => String(n))
+    .otherwise(({ from }) => `${from}–${currentYear}`)
+  const owner = cfg.dba ?? cfg.company ?? siteTitle ?? ''
+  const ownerPart = match(owner.length === 0)
+    .with(true, () => '')
+    .otherwise(() => ` ${owner}`)
+  return `© ${yearPart}${ownerPart}`
+}

package/src/theme/components/home/feature-card.tsx

@@ -3,14 +3,15 @@ import type React from 'react'
 
 import './feature-card.css'
 import { Card } from '../shared/card'
-import { Icon } from '../shared/icon'
+import { CardIcon } from '../shared/card-icon'
+import type { CardIconInput } from '../shared/resolve-card-icon'
 import { resolveCardIcon } from '../shared/resolve-card-icon'
 
 export interface FeatureCardProps {
   readonly title: string
   readonly description: string
   readonly href?: string
-  readonly icon?: string | { readonly id: string; readonly color: string }
+  readonly icon?: CardIconInput
   readonly span?: 2 | 3 | 4 | 6
   readonly titleLines?: number
   readonly descriptionLines?: number
@@ -23,7 +24,7 @@ export interface FeatureItem {
   readonly title: string
   readonly details: string
   readonly link?: string
-  readonly icon?: string | { readonly id: string; readonly color: string }
+  readonly icon?: CardIconInput
   readonly span?: 2 | 3 | 4 | 6
 }
 
@@ -46,11 +47,7 @@ export function FeatureCard({
   const resolved = resolveCardIcon(icon)
 
   const iconEl = match(resolved)
-    .with(P.nonNullable, (r) => (
-      <span className={`cp-card__icon cp-card__icon--${r.color}`}>
-        <Icon icon={r.id} />
-      </span>
-    ))
+    .with(P.nonNullable, (r) => <CardIcon resolved={r} className="cp-card__icon" />)
     .otherwise(() => null)
 
   const linkTail = match(href)

package/src/theme/components/home/feature.tsx

@@ -1,4 +1,4 @@
-import type { HomeGridConfig } from '@ciderpress/config'
+import type { HomeFeaturesConfig } from '@ciderpress/config'
 import { useFrontmatter } from '@rspress/core/runtime'
 import { match, P } from 'massaman/match'
 import type React from 'react'
@@ -7,6 +7,17 @@ import { useCiderpress } from '../../hooks/use-ciderpress'
 import { FeatureCard } from './feature-card'
 import type { FeatureItem } from './feature-card'
 
+interface FrontmatterFeaturesHeading {
+  readonly label?: string
+  readonly title?: string
+  readonly subtitle?: string
+}
+
+const DEFAULT_HEADING_EYEBROW = 'Features'
+const DEFAULT_HEADING_TITLE = 'Built for the way you ship.'
+const DEFAULT_HEADING_SUBTITLE =
+  "Everything you need, nothing you don't. Configured in TypeScript, validated at boot."
+
 /**
  * Custom HomeFeature override for ciderpress.
  * Uses useFrontmatter() hook to read features and renders with FeatureCard/FeatureGrid styling.
@@ -21,9 +32,21 @@ export function HomeFeature(): React.ReactElement | null {
   // Rspress types frontmatter as its own FrontMatterMeta shape which does not
   // include ciderpress-specific `features`. The double cast is necessary because
   // no shared Zod schema exists for frontmatter validation at runtime.
-  const features = (frontmatter as Record<string, unknown>).features as
-    | readonly FeatureItem[]
-    | undefined
+  const fm = frontmatter as Record<string, unknown>
+  const features = fm.features as readonly FeatureItem[] | undefined
+  const heading = fm.featuresHeading as FrontmatterFeaturesHeading | undefined
+  // Frontmatter is unvalidated user content — a `featuresHeading.title: {}`
+  // would otherwise render as `[object Object]` in the H2. Treat any
+  // non-string value as missing and fall through to the framework default.
+  const headingEyebrow = match(heading && heading.label)
+    .with(P.string, (s) => s)
+    .otherwise(() => DEFAULT_HEADING_EYEBROW)
+  const headingTitle = match(heading && heading.title)
+    .with(P.string, (s) => s)
+    .otherwise(() => DEFAULT_HEADING_TITLE)
+  const headingSubtitle = match(heading && heading.subtitle)
+    .with(P.string, (s) => s)
+    .otherwise(() => DEFAULT_HEADING_SUBTITLE)
 
   return match(features)
     .with(
@@ -31,12 +54,9 @@ export function HomeFeature(): React.ReactElement | null {
       (items) => (
         <div className="cp-feature-section">
           <div className="cp-feature-section-head">
-            <div className="cp-feature-section-head__eyebrow">Features</div>
-            <h2 className="cp-feature-section-head__title">Built for the way you ship.</h2>
-            <p className="cp-feature-section-head__sub">
-              Everything you need, nothing you don&apos;t. Configured in TypeScript, validated at
-              boot.
-            </p>
+            <div className="cp-feature-section-head__eyebrow">{headingEyebrow}</div>
+            <h2 className="cp-feature-section-head__title">{headingTitle}</h2>
+            <p className="cp-feature-section-head__sub">{headingSubtitle}</p>
           </div>
           <div className="cp-feature-grid">
             {items.map((f, i) => renderFeature(f, i, gridConfig))}
@@ -60,7 +80,7 @@ export function HomeFeature(): React.ReactElement | null {
 function renderFeature(
   feature: FeatureItem,
   index: number,
-  gridConfig: HomeGridConfig | undefined
+  gridConfig: HomeFeaturesConfig | undefined
 ): React.ReactElement {
   const titleLines = gridConfig && gridConfig.truncate && gridConfig.truncate.title
   const descLines = gridConfig && gridConfig.truncate && gridConfig.truncate.description

package/src/theme/components/home/hero-demo-custom.tsx

@@ -0,0 +1,116 @@
+import type { HomeHeroDemoConfig, HomeHeroDemoLine, HomeHeroDemoTerminal } from '@ciderpress/config'
+import { match } from 'massaman/match'
+import type React from 'react'
+
+import { withMountBase } from '../../lib/with-mount-base.ts'
+
+import './hero-demo.css'
+
+interface CustomHeroDemoProps {
+  readonly config: HomeHeroDemoConfig
+}
+
+/**
+ * Custom replacement for `<HeroDemo />`. Driven by `home.hero.demo` from
+ * `ciderpress.config.ts`:
+ *
+ * - **Image form** (`{ src, alt, width?, height? }`) — renders an
+ *   `<img>` inside the framework's framed `cp-hero-demo` container
+ *   (rounded corners + brand-soft glow shadow preserved).
+ * - **Terminal form** (`{ windowTitle?, command, lines }`) — keeps the
+ *   fake-macOS chrome but paints the user's command + output lines.
+ *
+ * The discriminator is structural: image objects carry `src`, terminal
+ * objects carry `lines`.
+ *
+ * @param props - Validated `HomeHeroDemoConfig`
+ * @returns Custom hero demo element
+ */
+export function CustomHeroDemo(props: CustomHeroDemoProps): React.ReactElement {
+  return match(props.config)
+    .when(
+      (c): c is HomeHeroDemoTerminal => 'lines' in c,
+      (c) => <CustomTerminal config={c} />
+    )
+    .otherwise((c) => (
+      <div className="cp-hero-demo cp-hero-demo--image">
+        <img
+          src={withMountBase(c.src)}
+          alt={c.alt ?? ''}
+          width={c.width}
+          height={c.height}
+          className="cp-hero-demo__img"
+        />
+      </div>
+    ))
+}
+
+interface CustomTerminalProps {
+  readonly config: HomeHeroDemoTerminal
+}
+
+/**
+ * Render the terminal-form hero demo with user-supplied command + lines.
+ *
+ * @private
+ * @param props - Validated terminal config
+ * @returns Terminal-shell hero demo element
+ */
+function CustomTerminal(props: CustomTerminalProps): React.ReactElement {
+  const { windowTitle, command, lines } = props.config
+  return (
+    <div className="cp-hero-demo">
+      <div className="cp-hero-demo__bar">
+        <span className="cp-hero-demo__dot" />
+        <span className="cp-hero-demo__dot" />
+        <span className="cp-hero-demo__dot" />
+        {match(windowTitle)
+          .with(undefined, () => null)
+          .otherwise((t) => (
+            <span className="cp-hero-demo__title">{t}</span>
+          ))}
+      </div>
+      <pre className="cp-hero-demo__body">
+        <span className="cp-hero-demo__prompt">$ </span>
+        {command}
+        {'\n\n'}
+        {lines.map((line, i) => (
+          <TerminalLine key={`${line.kind}-${i}`} line={line} />
+        ))}
+      </pre>
+    </div>
+  )
+}
+
+interface TerminalLineProps {
+  readonly line: HomeHeroDemoLine
+}
+
+/**
+ * Render a single line of the structured terminal hero demo. Each
+ * kind gets a coloured prefix glyph mirroring the framework default.
+ *
+ * @private
+ * @param props - Single line entry
+ * @returns Glyph-prefixed line followed by a newline
+ */
+function TerminalLine(props: TerminalLineProps): React.ReactElement {
+  const className = match(props.line.kind)
+    .with('ok', () => 'cp-hero-demo__ok')
+    .with('info', () => 'cp-hero-demo__info')
+    .with('cmt', () => 'cp-hero-demo__cmt')
+    .with('err', () => 'cp-hero-demo__err')
+    .exhaustive()
+  const glyph = match(props.line.kind)
+    .with('ok', () => ' ✓')
+    .with('info', () => ' ▸')
+    .with('cmt', () => ' ↻')
+    .with('err', () => ' ✗')
+    .exhaustive()
+  return (
+    <>
+      <span className={className}>{glyph}</span> {props.line.text}
+      {'\n'}
+    </>
+  )
+}

package/src/theme/components/home/hero-demo.css

@@ -64,3 +64,30 @@
 .cp-hero-demo__file {
   color: var(--cp-c-tint-amber-bright-fg);
 }
+
+/* Image-form hero demo — the frame chrome (rounded corners + brand-soft
+   glow shadow) stays; the `<img>` simply fills the surface. The hero
+   slot already constrains aspect ratio. */
+.cp-hero-demo--image {
+  padding: 0;
+}
+
+.cp-hero-demo__img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: inherit;
+}
+
+/* Custom Split visual `<pre>` shares the `.cp-split__code` surface with
+   the default `ConfigPreview` block — same padding, font, scrolling. */
+.cp-split__code {
+  margin: 0;
+  padding: var(--cp-s-20) var(--cp-s-24);
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-code);
+  line-height: var(--cp-lh-code);
+  white-space: pre;
+  overflow-x: auto;
+  color: var(--cp-c-text-1);
+}