@ciderpress/ui 1.0.0-rc.1

package/src/theme/components/home/layout.tsx

@@ -0,0 +1,183 @@
+import { useFrontmatter } from '@rspress/core/runtime'
+import { match } from 'massaman/match'
+import type React from 'react'
+
+import { SiteFooter } from '../footer/site-footer'
+import { CTA } from './cta'
+import { HomeFeature } from './feature'
+import { Hero } from './hero'
+import type { HeroAction } from './hero'
+import { HeroDemo } from './hero-demo'
+import { PageRail } from './page-rail'
+import { HomeSplit } from './split'
+import { TrustStrip } from './trust-strip'
+import { HomeWorkspaces } from './workspaces'
+
+interface HomeLayoutProps {
+  readonly beforeHero?: React.ReactNode
+  readonly afterHero?: React.ReactNode
+  readonly beforeFeatures?: React.ReactNode
+  readonly afterFeatures?: React.ReactNode
+}
+
+interface FrontmatterHero {
+  readonly name?: string
+  readonly text?: string
+  readonly tagline?: string
+  readonly actions?: readonly HeroAction[]
+  readonly eyebrow?: string
+}
+
+interface FrontmatterTrust {
+  readonly lead?: string
+  readonly names?: readonly string[]
+}
+
+interface FrontmatterCTA {
+  readonly title?: string
+  readonly subtitle?: string
+  readonly actions?: readonly HeroAction[]
+}
+
+/**
+ * Custom HomeLayout for ciderpress.
+ *
+ * Renders the approved mockup landing surface inside a continuous PageRail:
+ * Hero → TrustStrip → Features → Workspaces → CTA → SiteFooter. Sections
+ * render only when their data is present in frontmatter, so consumers opt
+ * in to each band individually.
+ *
+ * @param props - Slot props (kept for API compatibility with Rspress's HomeLayout).
+ * @returns React element with the home page.
+ */
+export function HomeLayout(props: HomeLayoutProps): React.ReactElement {
+  const { frontmatter } = useFrontmatter()
+  const fm = frontmatter as Record<string, unknown>
+
+  const hero = fm.hero as FrontmatterHero | undefined
+  const trust = fm.trust as FrontmatterTrust | undefined
+  const cta = fm.cta as FrontmatterCTA | undefined
+
+  const heroSection = match(hero)
+    .with(undefined, () => null)
+    .otherwise((h) => (
+      <Hero
+        eyebrow={h.eyebrow}
+        title={renderTitle(h.text ?? h.name ?? '')}
+        tagline={h.tagline}
+        actions={h.actions}
+        demo={<HeroDemo />}
+      />
+    ))
+
+  const trustSection = match(trust)
+    .with(undefined, () => null)
+    .otherwise((t) => {
+      const names = t.names ?? []
+      return match(names.length === 0)
+        .with(true, () => null)
+        .otherwise(() => <TrustStrip lead={t.lead} names={names} />)
+    })
+
+  const ctaSection = match(cta)
+    .with(undefined, () => null)
+    .otherwise((c) =>
+      match(c.title === undefined)
+        .with(true, () => null)
+        .otherwise(() => <CTA title={c.title ?? ''} subtitle={c.subtitle} actions={c.actions} />)
+    )
+
+  return (
+    <PageRail>
+      {props.beforeHero}
+      {heroSection}
+      {props.afterHero}
+      {trustSection}
+      {props.beforeFeatures}
+      <HomeFeature />
+      {props.afterFeatures}
+      <HomeSplit
+        eyebrow="Configuration"
+        title="One file. Validated. Type-safe."
+        body="Define your docs site in ciderpress.config.ts. Zod validates at boot — no surprises in prod."
+        bullets={[
+          'Type-safe config with full IntelliSense',
+          'Hot-reloads on every save',
+          'Composable presets for OpenAPI, blog, changelog',
+          'First-class i18n out of the box',
+        ]}
+        action={{ theme: 'brand', text: 'Read the docs', link: '/getting-started/quick-start' }}
+        visual={<ConfigPreview />}
+      />
+      <HomeWorkspaces />
+      {ctaSection}
+      <SiteFooter />
+    </PageRail>
+  )
+}
+
+/**
+ * ConfigPreview — minimal `defineConfig` code preview shown inside the
+ * Split section. Imports come exclusively from `ciderpress` so the
+ * sample resolves against the published package set.
+ *
+ * @returns React element.
+ */
+function ConfigPreview(): React.ReactElement {
+  return (
+    <pre>
+      <span className="tok-kw">import</span> {'{ defineConfig }'}{' '}
+      <span className="tok-kw">from</span> <span className="tok-str">'ciderpress'</span>
+      {'\n\n'}
+      <span className="tok-kw">export default</span> <span className="tok-fn">defineConfig</span>
+      {'({\n'}
+      {'  title: '}
+      <span className="tok-str">'Acme Docs'</span>
+      {',\n'}
+      {'  sections: [\n'}
+      {'    { title: '}
+      <span className="tok-str">'Guides'</span>
+      {', include: '}
+      <span className="tok-str">'docs/guides/*.md'</span>
+      {' },\n'}
+      {'  ],\n'}
+      {'  theme: { name: '}
+      <span className="tok-str">'mulled'</span>
+      {' },\n'}
+      {'})'}
+    </pre>
+  )
+}
+
+/**
+ * Render a hero title with the trailing segment styled as a gradient.
+ *
+ * Splits the title on its last word break and wraps the tail in
+ * `<span className="cp-hero__grad">`. When the title is a single word
+ * (or empty), it renders verbatim.
+ *
+ * @private
+ * @param raw - The raw title string from frontmatter.
+ * @returns Title fragment with a gradient tail when applicable.
+ */
+function renderTitle(raw: string): React.ReactNode {
+  const trimmed = raw.trim()
+  return match(trimmed.length === 0)
+    .with(true, () => null)
+    .otherwise(() => {
+      const words = trimmed.split(/\s+/)
+      return match(words.length <= 1)
+        .with(true, () => trimmed)
+        .otherwise(() => {
+          const tailCount = Math.max(1, Math.ceil(words.length / 2))
+          const headWords = words.slice(0, words.length - tailCount).join(' ')
+          const tailWords = words.slice(words.length - tailCount).join(' ')
+          return (
+            <>
+              {headWords}
+              <span className="cp-hero__grad"> {tailWords}</span>
+            </>
+          )
+        })
+    })
+}

package/src/theme/components/home/page-rail.css

@@ -0,0 +1,21 @@
+.cp-page-rail {
+  max-width: var(--cp-landing-max-width);
+  margin: 0 var(--cp-frame-gutter);
+  background: transparent;
+  border-left: 1px solid var(--cp-c-border);
+  border-right: 1px solid var(--cp-c-border);
+}
+
+.cp-page-rail > * {
+  border-bottom: 1px solid var(--cp-c-border);
+}
+
+.cp-page-rail > *:last-child {
+  border-bottom: 0;
+}
+
+@media (min-width: 1248px) {
+  .cp-page-rail {
+    margin: 0 auto;
+  }
+}

package/src/theme/components/home/page-rail.tsx

@@ -0,0 +1,19 @@
+import type React from 'react'
+
+import './page-rail.css'
+
+export interface PageRailProps {
+  readonly children: React.ReactNode
+}
+
+/**
+ * PageRail — bounded max-width rail with continuous vertical hairlines on
+ * each outer edge. Wraps the entire home/landing surface so every section
+ * inside reads as a stack of compartments. Mirrors the mockup landing.
+ *
+ * @param props - Children to render inside the rail.
+ * @returns React element.
+ */
+export function PageRail(props: PageRailProps): React.ReactElement {
+  return <div className="cp-page-rail">{props.children}</div>
+}

package/src/theme/components/home/split.css

@@ -0,0 +1,148 @@
+.cp-split {
+  padding: var(--cp-s-96) var(--cp-s-32);
+}
+
+@media (max-width: 720px) {
+  .cp-split {
+    padding: var(--cp-s-64) var(--cp-s-20);
+  }
+}
+
+.cp-split__inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--cp-s-64);
+  align-items: center;
+  max-width: var(--cp-size-split-max);
+  margin: 0 auto;
+}
+
+@media (max-width: 880px) {
+  .cp-split__inner {
+    grid-template-columns: 1fr;
+    gap: var(--cp-s-32);
+  }
+}
+
+.cp-split__copy {
+  min-width: 0;
+}
+
+.cp-split__eyebrow {
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--cp-letter-eyebrow);
+  color: var(--cp-c-brand-1);
+  margin-bottom: var(--cp-s-12);
+}
+
+.cp-split__title {
+  font-size: var(--cp-fs-split-title);
+  font-weight: 600;
+  letter-spacing: var(--cp-letter-display);
+  line-height: var(--cp-lh-display);
+  margin: 0 0 var(--cp-s-16);
+  color: var(--cp-c-text-1);
+}
+
+.cp-split__body {
+  font-size: var(--cp-fs-body);
+  line-height: var(--cp-lh-relaxed);
+  color: var(--cp-c-text-2);
+  margin: 0 0 var(--cp-s-24);
+}
+
+.cp-split__bullets {
+  list-style: none;
+  margin: 0 0 var(--cp-s-24);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cp-s-12);
+}
+
+.cp-split__bullets li {
+  display: flex;
+  gap: var(--cp-s-12);
+  font-size: var(--cp-fs-bullet);
+  color: var(--cp-c-text-1);
+}
+
+.cp-split__check {
+  width: var(--cp-size-check);
+  height: var(--cp-size-check);
+  border-radius: 50%;
+  background: var(--cp-c-brand-soft);
+  color: var(--cp-c-brand-1);
+  display: grid;
+  place-items: center;
+  font-size: var(--cp-fs-check);
+  flex-shrink: 0;
+  margin-top: var(--cp-s-2);
+}
+
+.cp-split__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cp-s-8);
+  padding: var(--cp-s-10) var(--cp-s-18);
+  font-size: var(--cp-fs-btn);
+  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 var(--cp-duration-fast) var(--cp-ease-base);
+  text-decoration: none;
+}
+
+.cp-split__btn:hover {
+  background: var(--cp-c-bg-soft);
+  border-color: var(--cp-c-border);
+}
+
+.cp-split__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-split__btn--primary:hover {
+  background: var(--cp-c-brand-2);
+  border-color: var(--cp-c-brand-2);
+}
+
+/* Code visual styling — works for any pre/code or window child */
+.cp-split__visual {
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--cp-radius-lg);
+  overflow: hidden;
+  background: var(--cp-code-block-bg);
+}
+
+.cp-split__visual pre {
+  margin: 0;
+  padding: var(--cp-s-18) var(--cp-s-20);
+  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);
+}
+
+.cp-split__visual .tok-kw {
+  color: var(--cp-c-syntax-kw);
+}
+.cp-split__visual .tok-str {
+  color: var(--cp-c-syntax-str);
+}
+.cp-split__visual .tok-fn {
+  color: var(--cp-c-syntax-fn);
+}
+.cp-split__visual .tok-cmt {
+  color: var(--cp-c-text-3);
+}

package/src/theme/components/home/split.tsx

@@ -0,0 +1,120 @@
+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 './split.css'
+
+export interface SplitAction {
+  /**
+   * 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 SplitProps {
+  /**
+   * Eyebrow label rendered above the headline.
+   */
+  readonly eyebrow?: string
+  /**
+   * Section headline.
+   */
+  readonly title: React.ReactNode
+  /**
+   * Lead paragraph below the headline.
+   */
+  readonly body?: React.ReactNode
+  /**
+   * Optional checkmark bullets rendered under the body.
+   */
+  readonly bullets?: readonly string[]
+  /**
+   * Optional CTA action.
+   */
+  readonly action?: SplitAction
+  /**
+   * Right-side content — typically a code preview or screenshot.
+   */
+  readonly visual: React.ReactNode
+}
+
+/**
+ * HomeSplit — two-column "show and tell" section. Copy + checkmarks on the
+ * left, code/screenshot on the right. Mirrors the mockup landing.
+ *
+ * @param props - Split section configuration.
+ * @returns React element.
+ */
+export function HomeSplit(props: SplitProps): React.ReactElement {
+  const { eyebrow, title, body, bullets, action, visual } = props
+  const list = bullets ?? []
+
+  return (
+    <section className="cp-split">
+      <div className="cp-split__inner">
+        <div className="cp-split__copy">
+          {match(eyebrow)
+            .with(undefined, () => null)
+            .otherwise((e) => (
+              <div className="cp-split__eyebrow">{e}</div>
+            ))}
+          <h2 className="cp-split__title">{title}</h2>
+          {match(body)
+            .with(undefined, () => null)
+            .otherwise((b) => (
+              <p className="cp-split__body">{b}</p>
+            ))}
+          {match(list.length === 0)
+            .with(true, () => null)
+            .otherwise(() => (
+              <ul className="cp-split__bullets">
+                {list.map((bullet) => (
+                  <li key={bullet}>
+                    <span className="cp-split__check">✓</span>
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            ))}
+          {match(action)
+            .with(undefined, () => null)
+            .otherwise((a) => {
+              const href = safeUrl(a.link)
+              if (href === null) {
+                return null
+              }
+              return (
+                <RouteLink className={btnClass(a.theme)} href={href}>
+                  {a.text}
+                </RouteLink>
+              )
+            })}
+        </div>
+        <div className="cp-split__visual">{visual}</div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Build the CSS class for a split action button.
+ *
+ * @private
+ * @param theme - Action theme.
+ * @returns CSS class name string.
+ */
+function btnClass(theme: 'brand' | 'alt' | undefined): string {
+  return match(theme ?? 'brand')
+    .with('brand', () => 'cp-split__btn cp-split__btn--primary')
+    .otherwise(() => 'cp-split__btn')
+}

package/src/theme/components/home/trust-strip.css

@@ -0,0 +1,33 @@
+.cp-trust {
+  padding: 32px 0;
+}
+
+.cp-trust__row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-family: var(--cp-font-family-mono);
+  font-size: 12px;
+  color: var(--cp-c-text-3);
+}
+
+.cp-trust__lead {
+  margin-right: 4px;
+}
+
+.cp-trust__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.cp-trust__name {
+  color: var(--cp-c-text-1);
+  font-weight: 500;
+}
+
+.cp-trust__sep {
+  color: var(--cp-c-text-3);
+}

package/src/theme/components/home/trust-strip.tsx

@@ -0,0 +1,43 @@
+import { match } from 'massaman/match'
+import type React from 'react'
+
+import './trust-strip.css'
+
+export interface TrustStripProps {
+  /**
+   * Lead text shown before the names. Defaults to "used by".
+   */
+  readonly lead?: string
+  /**
+   * Names to render, separated by mono dots.
+   */
+  readonly names: readonly string[]
+}
+
+/**
+ * TrustStrip — a single-row "used by …" band with mono dots between names.
+ * Renders only when at least one name is supplied.
+ *
+ * @param props - Trust strip configuration.
+ * @returns React element, or null when no names are provided.
+ */
+export function TrustStrip(props: TrustStripProps): React.ReactElement | null {
+  const { lead = 'used by', names } = props
+  return match(names.length === 0)
+    .with(true, () => null)
+    .otherwise(() => (
+      <section className="cp-trust">
+        <div className="cp-trust__row">
+          <span className="cp-trust__lead">{lead}</span>
+          {names.map((name, i) => (
+            <span key={`${name}:${i}`} className="cp-trust__item">
+              <span className="cp-trust__name">{name}</span>
+              {match(i < names.length - 1)
+                .with(true, () => <span className="cp-trust__sep">·</span>)
+                .otherwise(() => null)}
+            </span>
+          ))}
+        </div>
+      </section>
+    ))
+}

package/src/theme/components/home/workspaces.tsx

@@ -0,0 +1,71 @@
+import type { HomeGridConfig } from '@ciderpress/config'
+import { match, P } from 'massaman/match'
+import type React from 'react'
+
+import { useCiderpress } from '../../hooks/use-ciderpress'
+import type { WorkspaceGroupData } from '../../hooks/use-ciderpress'
+import { WorkspaceCard } from '../workspaces/card'
+import { WorkspaceGrid } from '../workspaces/grid'
+
+/**
+ * Smart orchestrator that reads workspace data from themeConfig
+ * and renders workspace groups with the correct card component per type.
+ *
+ * @returns React element with workspace groups or null
+ */
+export function HomeWorkspaces(): React.ReactElement | null {
+  const { workspaces, home } = useCiderpress()
+  const gridConfig = home && home.workspaces
+
+  return match(workspaces)
+    .with(
+      P.when((w): w is readonly WorkspaceGroupData[] => Array.isArray(w) && w.length > 0),
+      (groups) => (
+        <div className="cp-workspace-section">
+          <hr className="cp-divider" />
+          {groups.map((group) => renderGroup(group, gridConfig))}
+        </div>
+      )
+    )
+    .otherwise(() => null)
+}
+
+/**
+ * Render a single workspace group with its cards.
+ *
+ * @private
+ * @param group - Workspace group data with heading, description, and cards
+ * @param gridConfig - Optional grid layout config for columns and truncation
+ * @returns Workspace grid element
+ */
+function renderGroup(
+  group: WorkspaceGroupData,
+  gridConfig: HomeGridConfig | undefined
+): React.ReactElement {
+  const titleLines = gridConfig && gridConfig.truncate && gridConfig.truncate.title
+  const descLines = gridConfig && gridConfig.truncate && gridConfig.truncate.description
+
+  return (
+    <WorkspaceGrid
+      key={group.heading}
+      heading={group.heading}
+      description={group.description}
+      columns={gridConfig && gridConfig.columns}
+    >
+      {group.cards.map((card, i) => (
+        <WorkspaceCard
+          key={`${card.title}-${i}`}
+          title={card.title}
+          href={card.href}
+          icon={card.icon}
+          scope={card.scope}
+          description={card.description}
+          tags={card.tags}
+          badge={card.badge}
+          titleLines={titleLines}
+          descriptionLines={descLines}
+        />
+      ))}
+    </WorkspaceGrid>
+  )
+}

package/src/theme/components/nav/branch-tag.css

@@ -0,0 +1,54 @@
+/**
+ * Branch tag pill — git branch badge positioned in the nav bar.
+ */
+
+.cp-branch-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 8px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  background: var(--cp-c-bg-soft);
+  border: 1px solid var(--cp-c-divider);
+  color: var(--cp-c-text-3);
+  font-family: var(--cp-font-family-mono);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  max-width: 180px;
+  text-decoration: none !important;
+  transition:
+    border-color 0.2s,
+    color 0.2s;
+}
+
+.cp-branch-tag:hover {
+  border-color: var(--cp-c-brand-1);
+  color: var(--cp-c-brand-1);
+  text-decoration: none !important;
+}
+
+.cp-branch-tag:focus-visible {
+  outline: 2px solid var(--rp-c-brand);
+  outline-offset: 2px;
+}
+
+.cp-branch-tag svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.cp-branch-tag__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Responsive ──────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .cp-branch-tag__text {
+    display: none;
+  }
+}