@ciderpress/ui 1.0.0-rc.1

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

@@ -0,0 +1,52 @@
+/**
+ * Feature Card — layout and typography (base card styles from home-card.css).
+ */
+
+/* ── Feature card layout ───────────────────────────────────── */
+.cp-feature-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cp-s-10);
+  height: 100%;
+}
+
+/* Row 1: icon + title */
+.cp-feature-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--cp-s-12);
+}
+
+.cp-feature-card__title {
+  font-family: 'Geist Pixel Square', var(--rp-font-family-base, sans-serif);
+  font-size: var(--cp-fs-feature-title);
+  font-weight: var(--cp-fw-bold);
+  color: var(--rp-c-text-1, var(--cp-c-text-1));
+  line-height: var(--cp-lh-tight);
+}
+
+/* Row 2: description */
+.cp-feature-card__desc {
+  font-size: var(--cp-fs-feature-desc);
+  color: var(--rp-c-text-2, var(--cp-c-text-2));
+  line-height: var(--cp-lh-base);
+}
+
+/* ── Truncation ────────────────────────────────────────────── */
+.cp-feature-card__title.cp-clamp,
+.cp-feature-card__desc.cp-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Row 3: link tail (mockup pattern) */
+.cp-feature-card__link {
+  margin-top: auto;
+  padding-top: var(--cp-s-16);
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-feature-link);
+  color: var(--cp-c-brand-1);
+  font-weight: 500;
+}

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

@@ -0,0 +1,131 @@
+import { match, P } from 'massaman/match'
+import type React from 'react'
+
+import './feature-card.css'
+import { Card } from '../shared/card'
+import { Icon } from '../shared/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 span?: 2 | 3 | 4 | 6
+  readonly titleLines?: number
+  readonly descriptionLines?: number
+}
+
+/**
+ * Frontmatter-shaped data for consumers to map from.
+ */
+export interface FeatureItem {
+  readonly title: string
+  readonly details: string
+  readonly link?: string
+  readonly icon?: string | { readonly id: string; readonly color: string }
+  readonly span?: 2 | 3 | 4 | 6
+}
+
+/**
+ * Feature card for landing pages — matches the workspace/section card design.
+ * Renders as `<a>` when `href` is provided, `<div>` otherwise.
+ *
+ * @param props - Feature card props including title, description, href, icon, span, titleLines, descriptionLines
+ * @returns React element with feature card layout
+ */
+export function FeatureCard({
+  title,
+  description,
+  href,
+  icon,
+  span = 4,
+  titleLines,
+  descriptionLines,
+}: FeatureCardProps): React.ReactElement {
+  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>
+    ))
+    .otherwise(() => null)
+
+  const linkTail = match(href)
+    .with(P.nonNullable, () => <span className="cp-feature-card__link">Learn more →</span>)
+    .otherwise(() => null)
+
+  return (
+    <div className={`cp-feature-grid__item cp-feature-grid__item--span-${span}`}>
+      <div className="cp-feature-grid__item-wrap">
+        <Card href={href} className="cp-feature-card">
+          <div className="cp-feature-card__header">
+            {iconEl}
+            <span
+              className={clampClass('cp-feature-card__title', titleLines)}
+              style={clampStyle(titleLines)}
+            >
+              {title}
+            </span>
+          </div>
+          <span
+            className={clampClass('cp-feature-card__desc', descriptionLines)}
+            style={clampStyle(descriptionLines)}
+          >
+            {description}
+          </span>
+          {linkTail}
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+interface FeatureGridProps {
+  readonly children: React.ReactNode
+}
+
+/**
+ * Flex-wrap layout container for feature cards.
+ *
+ * @param props - Props with children to render inside the grid
+ * @returns React element wrapping children in a feature grid
+ */
+export function FeatureGrid({ children }: FeatureGridProps): React.ReactElement {
+  return (
+    <div className="cp-feature-section">
+      <div className="cp-feature-grid">{children}</div>
+    </div>
+  )
+}
+
+/**
+ * Build a className string with optional `cp-clamp` suffix.
+ *
+ * @private
+ * @param base - Base CSS class name
+ * @param lines - Optional line clamp value
+ * @returns Class string with or without cp-clamp
+ */
+function clampClass(base: string, lines: number | undefined): string {
+  if (lines) {
+    return `${base} cp-clamp`
+  }
+  return base
+}
+
+/**
+ * Build an inline style object for line clamping.
+ *
+ * @private
+ * @param lines - Optional line clamp value
+ * @returns Style object with WebkitLineClamp or undefined
+ */
+function clampStyle(lines: number | undefined): React.CSSProperties | undefined {
+  if (lines) {
+    return { WebkitLineClamp: lines }
+  }
+  return undefined
+}

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

@@ -0,0 +1,79 @@
+import type { HomeGridConfig } from '@ciderpress/config'
+import { useFrontmatter } from '@rspress/core/runtime'
+import { match, P } from 'massaman/match'
+import type React from 'react'
+
+import { useCiderpress } from '../../hooks/use-ciderpress'
+import { FeatureCard } from './feature-card'
+import type { FeatureItem } from './feature-card'
+
+/**
+ * Custom HomeFeature override for ciderpress.
+ * Uses useFrontmatter() hook to read features and renders with FeatureCard/FeatureGrid styling.
+ *
+ * @returns React element with 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
+
+  return match(features)
+    .with(
+      P.when((f): f is readonly FeatureItem[] => Array.isArray(f) && f.length > 0),
+      (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>
+          <div className="cp-feature-grid">
+            {items.map((f, i) => renderFeature(f, i, gridConfig))}
+          </div>
+        </div>
+      )
+    )
+    .otherwise(() => null)
+}
+
+/**
+ * Render a single feature as a FeatureCard element.
+ * Accepts the array index from `.map()` to guarantee unique keys.
+ *
+ * @private
+ * @param feature - Feature item data
+ * @param index - Array index for key generation
+ * @param gridConfig - Optional grid config for truncation
+ * @returns Feature card element
+ */
+function renderFeature(
+  feature: FeatureItem,
+  index: number,
+  gridConfig: HomeGridConfig | undefined
+): React.ReactElement {
+  const titleLines = gridConfig && gridConfig.truncate && gridConfig.truncate.title
+  const descLines = gridConfig && gridConfig.truncate && gridConfig.truncate.description
+
+  return (
+    <FeatureCard
+      key={`${feature.title}-${index}`}
+      title={feature.title}
+      description={feature.details}
+      href={feature.link}
+      icon={feature.icon}
+      titleLines={titleLines}
+      descriptionLines={descLines}
+    />
+  )
+}

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

@@ -0,0 +1,66 @@
+.cp-hero-demo {
+  max-width: var(--cp-size-demo-max);
+  margin: 0 auto;
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--cp-radius-lg);
+  background: var(--cp-code-block-bg);
+  overflow: hidden;
+  box-shadow: var(--cp-shadow-hero-demo);
+}
+
+.cp-hero-demo__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--cp-s-8);
+  padding: var(--cp-s-10) var(--cp-s-14);
+  background: var(--cp-c-bg-elv);
+  border-bottom: 1px solid var(--cp-c-border);
+}
+
+.cp-hero-demo__dot {
+  width: var(--cp-size-window-dot);
+  height: var(--cp-size-window-dot);
+  border-radius: 50%;
+  background: var(--cp-c-bg-soft);
+  border: 1px solid var(--cp-c-border);
+}
+
+.cp-hero-demo__title {
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-demo-title);
+  color: var(--cp-c-text-3);
+  margin-left: var(--cp-s-8);
+}
+
+.cp-hero-demo__title em {
+  color: var(--cp-c-text-2);
+  font-style: normal;
+}
+
+.cp-hero-demo__body {
+  margin: 0;
+  padding: var(--cp-s-20) var(--cp-s-24);
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-demo-body);
+  line-height: var(--cp-lh-demo);
+  white-space: pre;
+  overflow-x: auto;
+  color: var(--cp-c-text-1);
+}
+
+.cp-hero-demo__prompt,
+.cp-hero-demo__ok {
+  color: var(--cp-c-brand-1);
+}
+
+.cp-hero-demo__cmt {
+  color: var(--cp-c-text-3);
+}
+
+.cp-hero-demo__info {
+  color: var(--cp-c-tint-blue-fg);
+}
+
+.cp-hero-demo__file {
+  color: var(--cp-c-tint-amber-bright-fg);
+}

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

@@ -0,0 +1,46 @@
+import type React from 'react'
+
+import './hero-demo.css'
+
+/**
+ * HeroDemo — default terminal-style demo block used inside Hero.
+ *
+ * Renders a fake macOS window with `pnpm ciderpress dev` output. Self-contained
+ * so consumers can render it directly in MDX or via HomeLayout.
+ *
+ * @returns React element.
+ */
+export function HeroDemo(): React.ReactElement {
+  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" />
+        <span className="cp-hero-demo__title">
+          <em>~/code/acme</em> — pnpm ciderpress dev
+        </span>
+      </div>
+      <pre className="cp-hero-demo__body">
+        <span className="cp-hero-demo__prompt">$ </span>pnpm ciderpress dev
+        {'\n\n'}
+        <span className="cp-hero-demo__ok"> ▸</span> ciderpress 0.5 — Rspress 2.0
+        {'\n'}
+        <span className="cp-hero-demo__ok"> ▸</span> watching{' '}
+        <span className="cp-hero-demo__file">./docs</span>,{' '}
+        <span className="cp-hero-demo__file">./openapi.yaml</span>
+        {'\n'}
+        <span className="cp-hero-demo__ok"> ▸</span> sidebar synced from 24 files
+        {'\n'}
+        <span className="cp-hero-demo__info"> ▸</span> openapi spec parsed — 18 endpoints
+        {'\n'}
+        <span className="cp-hero-demo__ok"> ✓</span> ready on{' '}
+        <span className="cp-hero-demo__file">http://localhost:4321</span> in 412ms
+        {'\n\n'}
+        <span className="cp-hero-demo__cmt"> ↻ docs/guides/openapi.md changed</span>
+        {'\n'}
+        <span className="cp-hero-demo__cmt"> ↻ rebuilt sidebar in 8ms</span>
+      </pre>
+    </div>
+  )
+}

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

@@ -0,0 +1,96 @@
+.cp-hero {
+  position: relative;
+  padding: 96px 0 72px;
+  text-align: center;
+}
+
+.cp-hero__inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+.cp-hero__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--cp-radius-pill);
+  background: var(--cp-c-bg-elv);
+  font-family: var(--cp-font-family-mono);
+  font-size: 11px;
+  color: var(--cp-c-text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 28px;
+}
+
+.cp-hero__title {
+  font-size: clamp(40px, 6.5vw, 76px);
+  font-weight: 600;
+  letter-spacing: -0.04em;
+  line-height: 1;
+  margin: 0 0 24px;
+  color: var(--cp-c-text-1);
+}
+
+.cp-hero__title .cp-hero__grad {
+  color: var(--cp-c-brand-1);
+}
+
+.cp-hero__tagline {
+  max-width: 640px;
+  margin: 0 auto 40px;
+  font-size: 18px;
+  line-height: 1.6;
+  color: var(--cp-c-text-2);
+}
+
+.cp-hero__cta {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 56px;
+}
+
+.cp-hero__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: var(--cp-radius-pill);
+  border: 1px solid var(--cp-c-border);
+  background: transparent;
+  color: var(--cp-c-text-1);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.cp-hero__btn:hover {
+  background: var(--cp-c-bg-soft);
+  border-color: var(--cp-c-border);
+}
+
+.cp-hero__btn--primary {
+  background: var(--cp-c-brand-1);
+  color: var(--cp-c-brand-fg);
+  border-color: var(--cp-c-brand-1);
+  font-weight: 600;
+}
+
+.cp-hero__btn--primary:hover {
+  background: var(--cp-c-brand-2);
+  border-color: var(--cp-c-brand-2);
+}
+
+.cp-hero__demo {
+  max-width: 920px;
+  margin: 0 auto;
+  text-align: left;
+}

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

@@ -0,0 +1,111 @@
+import { match } from 'massaman/match'
+import type React from 'react'
+
+import { RouteLink } from '../../lib/route-link.tsx'
+import { safeUrl } from '../../lib/safe-url.ts'
+
+import './hero.css'
+
+export interface HeroAction {
+  /**
+   * Visible label.
+   */
+  readonly text: string
+  /**
+   * Destination URL.
+   */
+  readonly link: string
+  /**
+   * Visual style — `brand` is the filled primary, `alt` is the outline.
+   */
+  readonly theme?: 'brand' | 'alt'
+}
+
+export interface HeroProps {
+  /**
+   * Optional eyebrow chip (e.g. "★ 2.1k stars · v0.4.2").
+   */
+  readonly eyebrow?: React.ReactNode
+  /**
+   * Main heading. Wrap a fragment in `<span className="cp-hero__grad">…</span>`
+   * for the gradient phrase.
+   */
+  readonly title: React.ReactNode
+  /**
+   * Sub-text shown below the headline.
+   */
+  readonly tagline?: React.ReactNode
+  /**
+   * Two CTAs at most for visual balance.
+   */
+  readonly actions?: readonly HeroAction[]
+  /**
+   * Optional visual block beneath the CTAs (terminal demo, screenshot, etc).
+   */
+  readonly demo?: React.ReactNode
+}
+
+/**
+ * Hero — landing-page hero with eyebrow chip, gradient-friendly headline,
+ * tagline, CTAs, and an optional demo slot. The radial accent glow + dotted
+ * grid backdrop are baked in via CSS and adapt to the active theme.
+ *
+ * @param props - Hero configuration.
+ * @returns React element.
+ */
+export function Hero(props: HeroProps): React.ReactElement {
+  const { eyebrow, title, tagline, actions, demo } = props
+  const list = actions ?? []
+
+  return (
+    <section className="cp-hero">
+      <div className="cp-hero__inner">
+        {match(eyebrow)
+          .with(undefined, () => null)
+          .otherwise((e) => (
+            <div className="cp-hero__eyebrow">{e}</div>
+          ))}
+        <h1 className="cp-hero__title">{title}</h1>
+        {match(tagline)
+          .with(undefined, () => null)
+          .otherwise((t) => (
+            <p className="cp-hero__tagline">{t}</p>
+          ))}
+        {match(list.length === 0)
+          .with(true, () => null)
+          .otherwise(() => (
+            <div className="cp-hero__cta">{list.map(renderAction)}</div>
+          ))}
+        {match(demo)
+          .with(undefined, () => null)
+          .otherwise((d) => (
+            <div className="cp-hero__demo">{d}</div>
+          ))}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Render a single hero CTA action.
+ *
+ * @private
+ * @param action - Hero action.
+ * @param index - Array index for key generation.
+ * @returns Anchor element.
+ */
+function renderAction(action: HeroAction, index: number): React.ReactElement | null {
+  const href = safeUrl(action.link)
+  if (href === null) {
+    return null
+  }
+  const className = match(action.theme ?? 'brand')
+    .with('brand', () => 'cp-hero__btn cp-hero__btn--primary')
+    .otherwise(() => 'cp-hero__btn')
+
+  return (
+    <RouteLink key={`${href}:${index}`} href={href} className={className}>
+      {action.text}
+    </RouteLink>
+  )
+}