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

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/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/dist/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/dist/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/dist/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);
+}