@ciderpress/ui 1.0.0-rc.1

package/src/theme/components/content-footer/meta-actions.css

@@ -0,0 +1,25 @@
+.cp-meta-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-family: var(--cp-font-family-mono);
+  font-size: 12px;
+  color: var(--cp-c-text-3);
+  margin-bottom: 24px;
+}
+
+.cp-meta-actions__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--cp-c-text-2);
+  transition: color 0.15s ease;
+}
+
+.cp-meta-actions__item:hover {
+  color: var(--cp-c-text-1);
+}
+
+.cp-meta-actions__icon {
+  display: inline-flex;
+}

package/src/theme/components/content-footer/meta-actions.tsx

@@ -0,0 +1,57 @@
+import { match } from 'massaman/match'
+import React from 'react'
+
+import { safeUrl } from '../../lib/safe-url.ts'
+
+import './meta-actions.css'
+
+export interface MetaAction {
+  readonly href: string
+  readonly label: string
+  readonly icon?: React.ReactNode
+}
+
+export interface MetaActionsProps {
+  /**
+   * List of actions to render — typically Edit on GitHub, Report issue, Discuss.
+   */
+  readonly actions: readonly MetaAction[]
+}
+
+/**
+ * MetaActions — horizontal row of mono-styled links rendered below the
+ * feedback widget on doc pages. Each action is an external/internal link
+ * with an optional leading icon.
+ *
+ * @param props - Actions to render.
+ * @returns React element, or null when no actions are provided.
+ */
+export function MetaActions(props: MetaActionsProps): React.ReactElement | null {
+  const safeActions = props.actions.flatMap((action) => {
+    const href = safeUrl(action.href)
+    if (href === null) {
+      return []
+    }
+    return [{ ...action, href }]
+  })
+  return match(safeActions.length === 0)
+    .with(true, () => null)
+    .otherwise(() => (
+      <div className="cp-meta-actions">
+        {safeActions.map((action) => (
+          <a
+            key={`${action.label}:${action.href}`}
+            className="cp-meta-actions__item"
+            href={action.href}
+          >
+            {match(action.icon)
+              .with(undefined, () => null)
+              .otherwise((icon) => (
+                <span className="cp-meta-actions__icon">{icon}</span>
+              ))}
+            <span>{action.label}</span>
+          </a>
+        ))}
+      </div>
+    ))
+}

package/src/theme/components/content-footer/page-pager.css

@@ -0,0 +1,61 @@
+/* Content-footer wrapper — the band below the doc body containing the
+   feedback widget, meta-actions row, and prev/next pager. */
+.cp-content-footer {
+  margin-top: 56px;
+  border-top: 1px solid var(--cp-c-border);
+  padding-top: 32px;
+}
+
+.cp-pager {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.cp-pager__link {
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--cp-radius-card);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.15s ease;
+}
+
+.cp-pager__link:hover {
+  border-color: var(--cp-c-border);
+  background: var(--cp-c-bg-soft);
+  text-decoration: none;
+}
+
+.cp-pager__link--next {
+  text-align: right;
+  align-items: flex-end;
+}
+
+.cp-pager__placeholder {
+  /* keeps the grid cell open when only one side is provided */
+}
+
+.cp-pager__label {
+  font-family: var(--cp-font-family-mono);
+  font-size: 11px;
+  color: var(--cp-c-text-3);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cp-pager__title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--cp-c-text-1);
+}
+
+@media (max-width: 720px) {
+  .cp-pager {
+    grid-template-columns: 1fr;
+  }
+}

package/src/theme/components/content-footer/page-pager.tsx

@@ -0,0 +1,110 @@
+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 './page-pager.css'
+
+export interface PagerLink {
+  /**
+   * Link label.
+   */
+  readonly title: string
+  /**
+   * Destination URL.
+   */
+  readonly href: string
+}
+
+export interface PagePagerProps {
+  /**
+   * Previous page link, or undefined to hide the prev side.
+   */
+  readonly prev?: PagerLink
+  /**
+   * Next page link, or undefined to hide the next side.
+   */
+  readonly next?: PagerLink
+}
+
+/**
+ * PagePager — bottom-of-content prev/next navigation. Two side-by-side
+ * bordered link cards mirroring the mockup gutter pattern.
+ *
+ * @param props - Pager configuration.
+ * @returns React element, or null when both ends are empty.
+ */
+export function PagePager(props: PagePagerProps): React.ReactElement | null {
+  const { prev, next } = props
+
+  return match(prev === undefined && next === undefined)
+    .with(true, () => null)
+    .otherwise(() => (
+      <nav className="cp-pager">
+        {match(prev)
+          .with(undefined, () => <span className="cp-pager__placeholder" />)
+          .otherwise((p) => {
+            const href = safeUrl(p.href)
+            if (href === null) {
+              return <span className="cp-pager__placeholder" />
+            }
+            return (
+              <RouteLink className="cp-pager__link cp-pager__link--prev" href={href}>
+                <span className="cp-pager__label">
+                  <Chev direction="left" />
+                  Previous
+                </span>
+                <span className="cp-pager__title">{p.title}</span>
+              </RouteLink>
+            )
+          })}
+        {match(next)
+          .with(undefined, () => <span className="cp-pager__placeholder" />)
+          .otherwise((n) => {
+            const href = safeUrl(n.href)
+            if (href === null) {
+              return <span className="cp-pager__placeholder" />
+            }
+            return (
+              <RouteLink className="cp-pager__link cp-pager__link--next" href={href}>
+                <span className="cp-pager__label">
+                  Next
+                  <Chev direction="right" />
+                </span>
+                <span className="cp-pager__title">{n.title}</span>
+              </RouteLink>
+            )
+          })}
+      </nav>
+    ))
+}
+
+interface ChevProps {
+  readonly direction: 'left' | 'right'
+}
+
+/**
+ * Chevron arrow icon used inside the pager label row.
+ *
+ * @private
+ * @param props - direction
+ * @returns SVG element.
+ */
+function Chev(props: ChevProps): React.ReactElement {
+  const points = match(props.direction)
+    .with('left', () => '15 18 9 12 15 6')
+    .otherwise(() => '9 18 15 12 9 6')
+  return (
+    <svg
+      width="11"
+      height="11"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <polyline points={points} />
+    </svg>
+  )
+}

package/src/theme/components/edit-source-button.tsx

@@ -0,0 +1,97 @@
+import { match } from 'massaman/match'
+import type React from 'react'
+import { useEffect, useRef } from 'react'
+
+declare const __CIDERPRESS_VSCODE__: boolean
+
+/**
+ * "Edit" button injected next to the Rspress "Copy Markdown" LLMs button.
+ *
+ * Uses DOM injection to place the button inside the `.rp-llms-container`
+ * that Rspress renders on every doc page. Re-injects on SPA navigation
+ * by observing `<title>` mutations (same technique as vscode-nav.js).
+ *
+ * Posts a `ciderpress:edit` message to the parent VS Code webview,
+ * which resolves the URL path to the source markdown file and
+ * opens it in the editor.
+ *
+ * Registered as a globalUIComponent — renders on every page.
+ *
+ * @returns Null element (side-effect only component)
+ */
+export default function EditSourceButton(): React.ReactElement | null {
+  return match(__CIDERPRESS_VSCODE__)
+    .with(true, () => <EditSourceButtonInner />)
+    .otherwise(() => null)
+}
+
+/**
+ * Inner component that performs DOM injection. Only mounted in VS Code mode.
+ *
+ * @private
+ * @returns Null element (side-effect only)
+ */
+function EditSourceButtonInner(): React.ReactElement | null {
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    function inject(): void {
+      if (buttonRef.current) {
+        buttonRef.current.remove()
+        buttonRef.current = null
+      }
+
+      const container = document.querySelector('.rp-llms-container')
+      if (!container) {
+        return
+      }
+
+      const btn = document.createElement('button')
+      btn.type = 'button'
+      btn.className = 'cp-edit-source-btn'
+      btn.setAttribute('aria-label', 'Edit source file')
+      btn.title = 'Open in editor'
+      btn.innerHTML = [
+        '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">',
+        '<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>',
+        '<path d="m15 5 4 4"/>',
+        '</svg>',
+        '<span>Edit</span>',
+      ].join('')
+
+      btn.addEventListener('click', () => {
+        globalThis.parent.postMessage(
+          { type: 'ciderpress:edit', path: globalThis.location.pathname },
+          '*'
+        )
+      })
+
+      // oxlint-disable-next-line prefer-modern-dom-apis -- container.firstChild may be null; insertBefore(x, null) appends safely, but firstChild.before() would throw
+      container.insertBefore(btn, container.firstChild)
+      buttonRef.current = btn
+    }
+
+    inject()
+
+    const titleEl = document.querySelector('title')
+    const observer = match(titleEl)
+      .with(null, () => null)
+      .otherwise((el) => {
+        const obs = new MutationObserver(inject)
+        obs.observe(el, { childList: true })
+        return obs
+      })
+
+    return () => {
+      if (observer) {
+        observer.disconnect()
+      }
+      if (buttonRef.current) {
+        buttonRef.current.remove()
+        buttonRef.current = null
+      }
+    }
+  }, [])
+
+  return null
+}

package/src/theme/components/footer/site-footer.css

@@ -0,0 +1,179 @@
+.cp-site-footer {
+  background: transparent;
+  font-size: 13px;
+  color: var(--cp-c-text-2);
+}
+
+.cp-site-footer__inner {
+  padding: 56px 32px 0;
+}
+
+@media (max-width: 720px) {
+  .cp-site-footer__inner {
+    padding: 40px 20px 0;
+  }
+}
+
+.cp-site-footer__grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
+  gap: 48px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+@media (max-width: 880px) {
+  .cp-site-footer__grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 32px;
+  }
+}
+
+@media (max-width: 640px) {
+  .cp-site-footer__grid {
+    grid-template-columns: 1fr;
+    gap: 36px;
+    text-align: center;
+  }
+}
+
+.cp-site-footer__brand {
+  max-width: 320px;
+}
+
+@media (max-width: 640px) {
+  .cp-site-footer__brand {
+    margin: 0 auto;
+  }
+}
+
+.cp-site-footer__brand-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--cp-c-brand-1);
+  display: grid;
+  place-items: center;
+  color: var(--cp-c-brand-fg);
+  font-family: var(--cp-font-family-mono);
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.cp-site-footer__brand-mark:has(.cp-site-footer__brand-icon) {
+  background: transparent;
+  border-radius: 0;
+}
+
+.cp-site-footer__brand-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+@media (max-width: 640px) {
+  .cp-site-footer__brand-mark {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .cp-site-footer__socials {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.cp-site-footer__message {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: var(--cp-c-text-2);
+  line-height: 1.55;
+}
+
+.cp-site-footer__socials {
+  margin-top: 8px;
+}
+
+.cp-site-footer__col-title {
+  margin: 0 0 14px;
+  font-family: var(--cp-font-family-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cp-c-text-3);
+  font-weight: 500;
+}
+
+.cp-site-footer__col-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cp-site-footer__col-list a {
+  color: var(--cp-c-text-2);
+  font-size: 13px;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.cp-site-footer__col-list a:hover {
+  color: var(--cp-c-text-1);
+}
+
+.cp-site-footer__bottom {
+  margin-top: 48px;
+  border-top: 1px solid var(--cp-c-border);
+}
+
+.cp-site-footer__bottom-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 32px;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: var(--cp-font-family-mono);
+  font-size: 11px;
+  color: var(--cp-c-text-3);
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+@media (max-width: 720px) {
+  .cp-site-footer__bottom-inner {
+    padding: 20px;
+  }
+}
+
+@media (max-width: 640px) {
+  .cp-site-footer__bottom-inner {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    gap: 14px;
+  }
+
+  .cp-site-footer__bottom-end {
+    justify-content: center;
+  }
+}
+
+.cp-site-footer__copyright {
+  white-space: nowrap;
+}
+
+.cp-site-footer__tagline {
+  white-space: nowrap;
+}
+
+.cp-site-footer__bottom-end {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}

package/src/theme/components/footer/site-footer.tsx

@@ -0,0 +1,115 @@
+import { useSite } from '@rspress/core/runtime'
+import { match } 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 { CiderpressNavSocialLinks } from '../nav/ciderpress-nav-social-links'
+import { ThemeSwitcher } from '../nav/theme-switcher'
+import { CiderpressMark } from '../shared/ciderpress-mark'
+
+import './site-footer.css'
+
+declare const __CIDERPRESS_THEME_SWITCHER__: boolean
+
+/**
+ * Site-wide footer rendered at the bottom of every page.
+ *
+ * Brand block on the left, optional link columns on the right (from
+ * `site.footer.columns`), and a full-width bottom strip with copyright +
+ * tagline divided by a hairline.
+ *
+ * Renders `null` when neither the top-level `footer` config (Rspress-compat
+ * `message` / `copyright` / `socials`) nor `site.footer` is provided, so a
+ * consumer who configures neither gets no footer rather than an empty shell.
+ *
+ * @returns Footer element, or null when no footer config is provided.
+ */
+export function SiteFooter(): React.ReactElement | null {
+  const { ciderpressFooter, site } = useCiderpress()
+  const { site: rspressSite } = useSite()
+  const socialLinks = readSocialLinks(rspressSite)
+  const { footer: siteFooter } = site ?? {}
+  const { message, copyright, socials } = ciderpressFooter ?? {}
+  const { columns, tagline, brandMark } = siteFooter ?? {}
+
+  const hasRspressContent = message !== undefined || copyright !== undefined || socials === true
+  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
+  // still needs the footer shell rendered.
+  const hasSwitcher = __CIDERPRESS_THEME_SWITCHER__
+
+  if (!hasRspressContent && !hasSiteContent && !hasSwitcher) {
+    return null
+  }
+
+  const resolvedColumns = columns ?? []
+
+  return (
+    <footer className="cp-site-footer">
+      <div className="cp-site-footer__inner">
+        <div className="cp-site-footer__grid">
+          <div className="cp-site-footer__brand">
+            <div className="cp-site-footer__brand-mark">
+              {match(brandMark)
+                .with(undefined, () => (
+                  <CiderpressMark className="cp-site-footer__brand-icon" title="" />
+                ))
+                .otherwise((mark) => mark)}
+            </div>
+            {match(message)
+              .with(undefined, () => null)
+              .otherwise((msg) => (
+                <p className="cp-site-footer__message">{msg}</p>
+              ))}
+            {match(socials === true && socialLinks.length > 0)
+              .with(true, () => (
+                <div className="cp-site-footer__socials">
+                  <CiderpressNavSocialLinks links={socialLinks} />
+                </div>
+              ))
+              .otherwise(() => null)}
+          </div>
+          {resolvedColumns.map((col) => (
+            <div key={col.heading} className="cp-site-footer__col">
+              <h4 className="cp-site-footer__col-title">{col.heading}</h4>
+              <ul className="cp-site-footer__col-list">
+                {col.links.flatMap((link) => {
+                  const href = safeUrl(link.href)
+                  if (href === null) {
+                    return []
+                  }
+                  return [
+                    <li key={link.text}>
+                      <RouteLink href={href}>{link.text}</RouteLink>
+                    </li>,
+                  ]
+                })}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="cp-site-footer__bottom">
+        <div className="cp-site-footer__bottom-inner">
+          {match(copyright)
+            .with(undefined, () => null)
+            .otherwise((cr) => (
+              <span className="cp-site-footer__copyright">{cr}</span>
+            ))}
+          <div className="cp-site-footer__bottom-end">
+            {match(tagline)
+              .with(undefined, () => null)
+              .otherwise((tag) => (
+                <span className="cp-site-footer__tagline">{tag}</span>
+              ))}
+            <ThemeSwitcher />
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,67 @@
+.cp-cta {
+  padding: 96px 0;
+  text-align: center;
+}
+
+.cp-cta__inner {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+.cp-cta__title {
+  font-size: clamp(32px, 5vw, 56px);
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  margin: 0 0 20px;
+  color: var(--cp-c-text-1);
+}
+
+.cp-cta__sub {
+  font-size: 17px;
+  color: var(--cp-c-text-2);
+  max-width: 520px;
+  margin: 0 auto 36px;
+}
+
+.cp-cta__row {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.cp-cta__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-cta__btn:hover {
+  background: var(--cp-c-bg-soft);
+  border-color: var(--cp-c-border);
+}
+
+.cp-cta__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-cta__btn--primary:hover {
+  background: var(--cp-c-brand-2);
+  border-color: var(--cp-c-brand-2);
+}