@ciderpress/ui 1.0.0-rc.1 → 1.0.0-rc.11

package/dist/plugins/mermaid/MermaidRenderer.tsx

@@ -4,19 +4,46 @@
 // workspace dependencies here — they will cause "factory is undefined" runtime
 // errors. See packages/ui/AGENTS.md for details.
 //
-// IMPORTANT: mermaid must stay on v10.x. Mermaid v11 uses langium for its parser,
-// which depends on vscode-languageserver-types and has broken ESM exports that
-// Rspack cannot resolve. It also lazy-loads every diagram type via dynamic
-// import() — incompatible with Rspress's webpack compilation of global components.
+// MERMAID v11: works fine here — no pin needed. The earlier v10 pin blamed
+// langium/lazy-loading, but mermaid.render() actually resolves correctly. The
+// real bug was local: `config` defaults to a fresh {} each render, so keying
+// renderMermaid on it re-created the callback every render and re-fired the
+// render effect in a loop. Each loop iteration called mermaid.render() into the
+// same element id, clobbering the just-injected SVG — the diagram went blank
+// until an unrelated re-render happened to run last. Fixed by keying on a stable
+// serialized config value (see configKey below).
 
 // oxlint-disable no-ternary
 
+import elkLayouts from '@mermaid-js/layout-elk'
 import mermaid from 'mermaid'
 import type { MermaidConfig } from 'mermaid'
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 
 import './mermaid.css'
 
+// ELK layout support. Diagrams that opt in with `layout: elk` (via frontmatter or
+// `%%{init: {'layout': 'elk'}}%%`) need the ELK loaders registered before render,
+// or mermaid.render() throws and the diagram silently blanks. `elkLayouts` is an
+// array of lazy loaders (`() => import(...)`), so elkjs — and its web worker —
+// only load client-side when a diagram actually uses ELK, never at build/SSR time.
+// Registration itself is a cheap, edge-safe registry push. We guard on a module
+// flag so React re-mounts / StrictMode double-invokes register exactly once.
+const elkState = { registered: false }
+
+/**
+ * Register the ELK layout loaders with mermaid, exactly once per module load.
+ *
+ * @private
+ */
+function ensureElkRegistered(): void {
+  if (elkState.registered) {
+    return
+  }
+  elkState.registered = true
+  mermaid.registerLayoutLoaders(elkLayouts)
+}
+
 interface MermaidRendererProps {
   readonly code: string
   readonly config?: MermaidConfig
@@ -214,6 +241,11 @@ function MermaidRenderer(props: MermaidRendererProps): React.ReactElement | null
 
   const [svg, setSvg] = useState('')
   const [renderError, setRenderError] = useState(false)
+  // Monotonic counter for per-render element ids. mermaid.render() renders into a
+  // node keyed by the id we pass; reusing one id across calls (React StrictMode
+  // double-invokes the mount effect) lets a later call clobber the SVG an earlier
+  // call already injected. A fresh id per call makes every render self-contained.
+  const renderSeq = useRef(0)
   const [transform, setTransform] = useState<Transform>(INITIAL_TRANSFORM)
   const transformRef = useRef<Transform>(INITIAL_TRANSFORM)
   const [fullscreen, setFullscreen] = useState(false)
@@ -221,11 +253,21 @@ function MermaidRenderer(props: MermaidRendererProps): React.ReactElement | null
 
   const highlightedCode = useMemo(() => highlightMermaid(code), [code])
 
+  // Stable value-key for the config object. `config` defaults to a fresh {} on
+  // every render, so depending on it directly re-creates renderMermaid each
+  // render, which re-fires the render effect in a loop. Each re-render calls
+  // mermaid.render() into the same element id — which clobbers the SVG we just
+  // injected, leaving the diagram blank until an unrelated re-render happens to
+  // land last. Keying on the serialized value keeps renderMermaid stable.
+  const configKey = JSON.stringify(config)
+
   transformRef.current = transform
 
   const isPreview = tab === 'preview'
 
   const renderMermaid = useCallback(async () => {
+    ensureElkRegistered()
+
     const hasDarkClass = document.documentElement.classList.contains('dark')
 
     const mermaidConfig: MermaidConfig = {
@@ -235,14 +277,15 @@ function MermaidRenderer(props: MermaidRendererProps): React.ReactElement | null
       ...config,
     }
 
+    const renderId = `${id.replaceAll(':', '')}-${(renderSeq.current += 1)}`
     try {
       mermaid.initialize(mermaidConfig)
-      const result = await mermaid.render(id.replaceAll(':', ''), code as string)
+      const result = await mermaid.render(renderId, code as string)
       setSvg(result.svg)
     } catch {
       setRenderError(true)
     }
-  }, [code, config, id])
+  }, [code, configKey, id])
 
   useEffect(() => {
     renderMermaid()

package/dist/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/dist/theme/components/home/cta.css

@@ -9,6 +9,21 @@
   padding: 0 32px;
 }
 
+.cp-cta__eyebrow {
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--cp-letter-eyebrow);
+  /* Same shade pair as `.cp-accent` — `--cp-c-brand-1` is a fill colour and
+     misses 4.5:1 at this size on several themes. See styles/rich-text.css. */
+  color: var(--cp-c-brand-2, var(--cp-c-brand-1));
+  margin-bottom: var(--cp-s-12);
+}
+
+html[data-cp-variant='dark'] .cp-cta__eyebrow {
+  color: var(--cp-c-brand-light, var(--cp-c-brand-1));
+}
+
 .cp-cta__title {
   font-size: clamp(32px, 5vw, 56px);
   font-weight: 600;

package/dist/theme/components/home/cta.tsx

@@ -1,6 +1,7 @@
-import { match } from 'massaman/match'
+import { match, P } from 'massaman/match'
 import type React from 'react'
 
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { RouteLink } from '../../lib/route-link.tsx'
 import { safeUrl } from '../../lib/safe-url.ts'
 import type { HeroAction } from './hero'
@@ -8,6 +9,10 @@ import type { HeroAction } from './hero'
 import './cta.css'
 
 export interface CTAProps {
+  /**
+   * Small uppercase kicker rendered above the headline.
+   */
+  readonly eyebrow?: string
   /**
    * Headline.
    */
@@ -30,12 +35,15 @@ export interface CTAProps {
  * @returns React element.
  */
 export function CTA(props: CTAProps): React.ReactElement {
-  const { title, subtitle, actions } = props
+  const { eyebrow, title, subtitle, actions } = props
   const list = actions ?? []
 
   return (
     <section className="cp-cta">
       <div className="cp-cta__inner">
+        {match(eyebrow)
+          .with(P.string, (e) => <div className="cp-cta__eyebrow">{renderRichText(e)}</div>)
+          .otherwise(() => null)}
         <h2 className="cp-cta__title">{title}</h2>
         {match(subtitle)
           .with(undefined, () => null)

package/dist/theme/components/home/feature-card.css

@@ -18,7 +18,7 @@
 }
 
 .cp-feature-card__title {
-  font-family: 'Geist Pixel Square', var(--rp-font-family-base, sans-serif);
+  font-family: var(--cp-ff-display);
   font-size: var(--cp-fs-feature-title);
   font-weight: var(--cp-fw-bold);
   color: var(--rp-c-text-1, var(--cp-c-text-1));

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

@@ -2,15 +2,17 @@ import { match, P } from 'massaman/match'
 import type React from 'react'
 
 import './feature-card.css'
+import { renderRichText } from '../../lib/rich-text.tsx'
 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 +25,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 +48,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)
@@ -67,14 +65,14 @@ export function FeatureCard({
               className={clampClass('cp-feature-card__title', titleLines)}
               style={clampStyle(titleLines)}
             >
-              {title}
+              {renderRichText(title)}
             </span>
           </div>
           <span
             className={clampClass('cp-feature-card__desc', descriptionLines)}
             style={clampStyle(descriptionLines)}
           >
-            {description}
+            {renderRichText(description)}
           </span>
           {linkTail}
         </Card>

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

@@ -1,45 +1,68 @@
-import type { HomeGridConfig } from '@ciderpress/config'
-import { useFrontmatter } from '@rspress/core/runtime'
+import type { TruncateConfig } from '@ciderpress/config'
 import { match, P } from 'massaman/match'
 import type React from 'react'
 
-import { useCiderpress } from '../../hooks/use-ciderpress'
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { FeatureCard } from './feature-card'
 import type { FeatureItem } from './feature-card'
 
+interface FrontmatterFeaturesHeading {
+  readonly label?: string
+  readonly title?: string
+  readonly body?: string
+}
+
+interface HomeFeatureProps {
+  readonly items?: readonly FeatureItem[]
+  readonly heading?: FrontmatterFeaturesHeading
+  readonly columns?: 1 | 2 | 3 | 4
+  readonly truncate?: TruncateConfig
+}
+
+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.
+ * Features grid block. Renders the supplied feature cards under a heading,
+ * or nothing when no cards are present.
  *
- * @returns React element with feature grid or null
+ * @param props - Resolved feature cards, optional heading, and truncation limits.
+ * @returns React element with the feature grid, or null.
  */
-export function HomeFeature(): React.ReactElement | null {
-  const { frontmatter } = useFrontmatter()
-  const { home } = useCiderpress()
-  const gridConfig = home && home.features
-
-  // 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
+export function HomeFeature(props: HomeFeatureProps): React.ReactElement | null {
+  const { items, heading, columns, truncate } = props
+  // Frontmatter is unvalidated user content — a `heading.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.body)
+    .with(P.string, (s) => s)
+    .otherwise(() => DEFAULT_HEADING_SUBTITLE)
+  // Column count rides on a custom property so the grid keeps its CSS
+  // media queries — a narrow viewport still collapses to one column.
+  const gridStyle = match(columns)
+    .with(P.number, (c) => ({ '--cp-feature-cols': String(c) }) as React.CSSProperties)
+    .otherwise(() => undefined)
 
-  return match(features)
+  return match(items)
     .with(
       P.when((f): f is readonly FeatureItem[] => Array.isArray(f) && f.length > 0),
-      (items) => (
+      (list) => (
         <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">{renderRichText(headingEyebrow)}</div>
+            <h2 className="cp-feature-section-head__title">{renderRichText(headingTitle)}</h2>
+            <p className="cp-feature-section-head__sub">{renderRichText(headingSubtitle)}</p>
           </div>
-          <div className="cp-feature-grid">
-            {items.map((f, i) => renderFeature(f, i, gridConfig))}
+          <div className="cp-feature-grid" style={gridStyle}>
+            {list.map((f, i) => renderFeature(f, i, truncate))}
           </div>
         </div>
       )
@@ -54,16 +77,16 @@ export function HomeFeature(): React.ReactElement | null {
  * @private
  * @param feature - Feature item data
  * @param index - Array index for key generation
- * @param gridConfig - Optional grid config for truncation
+ * @param truncate - Optional line-clamp limits for card text
  * @returns Feature card element
  */
 function renderFeature(
   feature: FeatureItem,
   index: number,
-  gridConfig: HomeGridConfig | undefined
+  truncate: TruncateConfig | undefined
 ): React.ReactElement {
-  const titleLines = gridConfig && gridConfig.truncate && gridConfig.truncate.title
-  const descLines = gridConfig && gridConfig.truncate && gridConfig.truncate.description
+  const titleLines = truncate && truncate.title
+  const descLines = truncate && truncate.description
 
   return (
     <FeatureCard

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

@@ -64,3 +64,41 @@
 .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;
+}
+
+/* Code-form hero demo — the frame owns the chrome, so strip the native
+   Rspress code block's own margin and rounded corners. */
+.cp-hero-demo--code .rp-codeblock {
+  margin: 0;
+  border-radius: 0;
+}
+
+.cp-hero-demo--code .rp-codeblock pre {
+  overflow-x: auto;
+}
+
+.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);
+}