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

package/dist/theme/styles/themes/mulled.css

@@ -7,7 +7,7 @@
   --cp-c-brand-fg: #ffffff;
   --cp-c-brand-soft: rgba(153, 27, 27, 0.14);
   --cp-c-on-brand: #ffffff;
-  --cp-c-brand-light: #dc2626;
+  --cp-c-brand-light: #ef4444;
   --cp-c-brand-lighter: #f87171;
   --cp-c-success: #16a34a;
   --cp-c-error: #dc2626;
@@ -130,8 +130,11 @@
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -251,7 +254,7 @@
   --rp-c-bg-mute: #0a0a0a;
   --rp-c-bg-soft: #1c1c1c;
   --rp-c-brand: #991b1b;
-  --rp-c-brand-light: #dc2626;
+  --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #f87171;
   --rp-c-brand-dark: #7f1d1d;
   --rp-c-brand-darker: #450a0a;
@@ -270,6 +273,18 @@
   --rp-home-feature-bg: #1c1c1c;
   --rp-home-hero-secondary-color: rgba(245, 245, 245, 0.72);
   --rp-home-hero-title-color: #f5f5f5;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }
 
 html[data-cp-theme='mulled'][data-cp-variant='dark'] {
@@ -279,7 +294,7 @@ html[data-cp-theme='mulled'][data-cp-variant='dark'] {
   --cp-c-brand-fg: #ffffff;
   --cp-c-brand-soft: rgba(153, 27, 27, 0.14);
   --cp-c-on-brand: #ffffff;
-  --cp-c-brand-light: #dc2626;
+  --cp-c-brand-light: #ef4444;
   --cp-c-brand-lighter: #f87171;
   --cp-c-success: #16a34a;
   --cp-c-error: #dc2626;
@@ -402,8 +417,11 @@ html[data-cp-theme='mulled'][data-cp-variant='dark'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -523,7 +541,7 @@ html[data-cp-theme='mulled'][data-cp-variant='dark'] {
   --rp-c-bg-mute: #0a0a0a;
   --rp-c-bg-soft: #1c1c1c;
   --rp-c-brand: #991b1b;
-  --rp-c-brand-light: #dc2626;
+  --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #f87171;
   --rp-c-brand-dark: #7f1d1d;
   --rp-c-brand-darker: #450a0a;
@@ -542,6 +560,18 @@ html[data-cp-theme='mulled'][data-cp-variant='dark'] {
   --rp-home-feature-bg: #1c1c1c;
   --rp-home-hero-secondary-color: rgba(245, 245, 245, 0.72);
   --rp-home-hero-title-color: #f5f5f5;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }
 
 html[data-cp-theme='mulled'][data-cp-variant='light'] {
@@ -551,7 +581,7 @@ html[data-cp-theme='mulled'][data-cp-variant='light'] {
   --cp-c-brand-fg: #ffffff;
   --cp-c-brand-soft: rgba(153, 27, 27, 0.14);
   --cp-c-on-brand: #ffffff;
-  --cp-c-brand-light: #dc2626;
+  --cp-c-brand-light: #ef4444;
   --cp-c-brand-lighter: #f87171;
   --cp-c-success: #16a34a;
   --cp-c-error: #dc2626;
@@ -674,8 +704,11 @@ html[data-cp-theme='mulled'][data-cp-variant='light'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -795,7 +828,7 @@ html[data-cp-theme='mulled'][data-cp-variant='light'] {
   --rp-c-bg-mute: #fbf6f4;
   --rp-c-bg-soft: #ead9d4;
   --rp-c-brand: #991b1b;
-  --rp-c-brand-light: #dc2626;
+  --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #f87171;
   --rp-c-brand-dark: #7f1d1d;
   --rp-c-brand-darker: #450a0a;
@@ -814,4 +847,16 @@ html[data-cp-theme='mulled'][data-cp-variant='light'] {
   --rp-home-feature-bg: #ead9d4;
   --rp-home-hero-secondary-color: rgba(42, 6, 6, 0.72);
   --rp-home-hero-title-color: #2a0606;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciderpress/ui",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.11",
   "description": "Rspress plugin, theme components, and styles for ciderpress",
   "keywords": [
     "ciderpress",
@@ -42,37 +42,39 @@
   },
   "publishConfig": {
     "access": "public",
-    "provenance": false
+    "provenance": true
   },
   "dependencies": {
     "@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.69",
     "@iconify-json/mdi": "^1.2.3",
-    "@iconify-json/pixelarticons": "^1.2.6",
-    "@iconify-json/simple-icons": "^1.2.86",
+    "@iconify-json/pixel": "^1.2.2",
+    "@iconify-json/pixelarticons": "^1.2.7",
+    "@iconify-json/simple-icons": "^1.2.89",
     "@iconify-json/skill-icons": "^1.2.4",
-    "@iconify-json/vscode-icons": "^1.2.55",
+    "@iconify-json/vscode-icons": "^1.2.65",
     "@iconify/react": "^6.0.2",
+    "@mermaid-js/layout-elk": "^0.2.2",
     "clsx": "^2.1.1",
     "katex": "^0.17.0",
-    "massaman": "^0.2.0",
-    "mermaid": "^10.9.6",
+    "massaman": "^0.3.0",
+    "mermaid": "^11.16.0",
     "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/theme": "1.0.0-rc.1",
-    "@ciderpress/config": "1.0.0-rc.1"
+    "@ciderpress/config": "1.0.0-rc.8",
+    "@ciderpress/theme": "1.0.0-rc.5"
   },
   "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.16",
     "@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 +83,10 @@
     "rspress-plugin-katex": "^1.0.1",
     "rspress-plugin-supersub": "^1.0.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.14",
+    "@rspress/core": "^2.0.16",
     "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/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/src/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/src/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/src/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/src/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/src/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);
+}