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

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,6 +2,7 @@ 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 { CardIcon } from '../shared/card-icon'
 import type { CardIconInput } from '../shared/resolve-card-icon'
@@ -64,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,16 +1,22 @@
-import type { HomeFeaturesConfig } 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 subtitle?: 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'
@@ -19,23 +25,15 @@ 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 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: {}`
+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)
@@ -44,22 +42,27 @@ export function HomeFeature(): React.ReactElement | null {
   const headingTitle = match(heading && heading.title)
     .with(P.string, (s) => s)
     .otherwise(() => DEFAULT_HEADING_TITLE)
-  const headingSubtitle = match(heading && heading.subtitle)
+  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">{headingEyebrow}</div>
-            <h2 className="cp-feature-section-head__title">{headingTitle}</h2>
-            <p className="cp-feature-section-head__sub">{headingSubtitle}</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>
       )
@@ -74,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: HomeFeaturesConfig | 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

@@ -72,6 +72,17 @@
   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%;

package/dist/theme/components/home/home-visual.tsx

@@ -0,0 +1,226 @@
+import type { HomeVisual, HomeVisualLine, HomeVisualTerminal } from '@ciderpress/config'
+import { CodeBlockRuntime } from '@rspress/core/theme'
+import { match, P } from 'massaman/match'
+import type React from 'react'
+
+import { withMountBase } from '../../lib/with-mount-base.ts'
+
+import './hero-demo.css'
+
+/**
+ * Surface a {@link HomeVisual} is rendered into.
+ *
+ * - `'hero'` — supplies its own framed `cp-hero-demo` container
+ * - `'split'` — the parent `cp-split__visual` frame owns the chrome
+ * - `'tabs'` — the parent `cp-tabs__visual` frame owns the chrome
+ */
+export type HomeVisualContext = 'hero' | 'split' | 'tabs'
+
+interface HomeVisualViewProps {
+  readonly visual: HomeVisual
+  readonly context: HomeVisualContext
+}
+
+/**
+ * Render a user-supplied {@link HomeVisual}. One union, three variants,
+ * shared by `home.hero.demo` and `home.blocks[].visual`:
+ *
+ * - **code** — rendered through Rspress's native `CodeBlockRuntime`, the
+ *   same Shiki pipeline that highlights markdown code fences, so it
+ *   themes identically to the rest of the site.
+ * - **image** — a screenshot or graphic, base-prefixed via
+ *   {@link withMountBase} to survive a mounted `base`.
+ * - **terminal** — the framework's fake-macOS chrome painted with the
+ *   supplied command and output lines.
+ *
+ * Terminates in `.otherwise`, not `.exhaustive`: on a hand-authored home
+ * page this receives raw frontmatter, where a blank `visual:` parses to
+ * null and `type:` may name a variant that does not exist. Throwing
+ * `NonExhaustiveError` from here failed the entire site build, so an
+ * unrenderable visual yields nothing instead.
+ *
+ * @param props - Validated visual config and the surface it renders into
+ * @returns The visual's React element, or null when it cannot be rendered
+ */
+export function HomeVisualView(props: HomeVisualViewProps): React.ReactElement | null {
+  const { visual, context } = props
+  return match(visual)
+    .with({ type: 'code' }, (v) => renderCode(v.code, v.language, context))
+    .with({ type: 'image' }, (v) => renderImage(v, context))
+    .with({ type: 'terminal' }, (v) => <VisualTerminal config={v} />)
+    .otherwise(() => null)
+}
+
+/**
+ * Render the code variant, framing it only in the hero context.
+ *
+ * @private
+ * @param code - Snippet source
+ * @param language - Shiki language identifier, defaulting to `ts`
+ * @param context - Surface being rendered into
+ * @returns Highlighted code block
+ */
+function renderCode(
+  code: string,
+  language: string | undefined,
+  context: HomeVisualContext
+): React.ReactElement {
+  const block = <CodeBlockRuntime lang={language ?? 'ts'} code={code} />
+  return match(context)
+    .with('hero', () => <div className="cp-hero-demo cp-hero-demo--code">{block}</div>)
+    .otherwise(() => block)
+}
+
+/**
+ * Image variant fields shared by both surfaces.
+ *
+ * @private
+ */
+interface VisualImageFields {
+  readonly src: string
+  readonly alt?: string
+  readonly width?: number | string
+  readonly height?: number | string
+}
+
+/**
+ * Render the image variant with the class names its surface expects.
+ *
+ * @private
+ * @param image - Validated image visual
+ * @param context - Surface being rendered into
+ * @returns Image element, framed in the hero context
+ */
+function renderImage(image: VisualImageFields, context: HomeVisualContext): React.ReactElement {
+  const { src, alt, width, height } = image
+  const framedClass = match(context)
+    .with('tabs', () => 'cp-tabs__img')
+    .otherwise(() => 'cp-split__img')
+  return match(context)
+    .with(P.union('split', 'tabs'), () => (
+      <img
+        src={withMountBase(src)}
+        alt={alt ?? ''}
+        width={width}
+        height={height}
+        className={framedClass}
+      />
+    ))
+    .with('hero', () => (
+      <div className="cp-hero-demo cp-hero-demo--image">
+        <img
+          src={withMountBase(src)}
+          alt={alt ?? ''}
+          width={width}
+          height={height}
+          className="cp-hero-demo__img"
+        />
+      </div>
+    ))
+    .exhaustive()
+}
+
+interface VisualTerminalProps {
+  readonly config: HomeVisualTerminal
+}
+
+/**
+ * Render the terminal variant with the user-supplied command and lines.
+ * In the split context the parent frame flattens the chrome via CSS, so
+ * the markup is identical on both surfaces.
+ *
+ * @private
+ * @param props - Validated terminal config
+ * @returns Terminal-shell element
+ */
+function VisualTerminal(props: VisualTerminalProps): React.ReactElement {
+  const { windowTitle, command, lines } = props.config
+  // Hand-authored frontmatter bypasses the schema; a non-string here
+  // reaches React as a child and throws mid-render.
+  const commandText = match(command)
+    .with(P.string, (c) => c)
+    .otherwise(() => '')
+  const title = match(windowTitle)
+    .with(P.string, (w) => w)
+    .otherwise(() => undefined)
+  // `lines` is required by the type but frontmatter is unvalidated on
+  // hand-authored home pages — a missing key would otherwise throw here
+  // and blank the whole page.
+  const output = match(lines)
+    .with(
+      P.when((l): l is readonly HomeVisualLine[] => Array.isArray(l)),
+      (l) => l.filter(isTerminalLine)
+    )
+    .otherwise(() => [])
+  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(title)
+          .with(P.string, (w) => <span className="cp-hero-demo__title">{w}</span>)
+          .otherwise(() => null)}
+      </div>
+      <pre className="cp-hero-demo__body">
+        <span className="cp-hero-demo__prompt">$ </span>
+        {commandText}
+        {'\n\n'}
+        {output.map((line, i) => (
+          <TerminalLine key={`${line.kind}-${i}`} line={line} />
+        ))}
+      </pre>
+    </div>
+  )
+}
+
+/**
+ * Whether a frontmatter value is a renderable terminal line. A YAML
+ * sequence with a blank entry yields `null`, which would throw on the
+ * first property read.
+ *
+ * @private
+ * @param value - Unvalidated line from frontmatter
+ * @returns True when the line can be rendered
+ */
+function isTerminalLine(value: unknown): value is HomeVisualLine {
+  if (typeof value !== 'object' || value === null) {
+    return false
+  }
+  const line = value as { text?: unknown }
+  return typeof line.text === 'string'
+}
+
+interface TerminalLineProps {
+  readonly line: HomeVisualLine
+}
+
+/**
+ * Render a single terminal output line. 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 {
+  // `kind` is a union in the type but arrives unvalidated from
+  // hand-authored frontmatter — fall back to the neutral marker rather
+  // than throwing on an unknown value.
+  const className = match(props.line.kind)
+    .with('ok', () => 'cp-hero-demo__ok')
+    .with('cmt', () => 'cp-hero-demo__cmt')
+    .with('err', () => 'cp-hero-demo__err')
+    .otherwise(() => 'cp-hero-demo__info')
+  const glyph = match(props.line.kind)
+    .with('ok', () => ' ✓')
+    .with('cmt', () => ' ↻')
+    .with('err', () => ' ✗')
+    .otherwise(() => ' ▸')
+  return (
+    <>
+      <span className={className}>{glyph}</span> {props.line.text}
+      {'\n'}
+    </>
+  )
+}