@ciderpress/ui 1.0.0-rc.1

package/dist/theme/components/shared/desktop-window.tsx

@@ -0,0 +1,535 @@
+import { CodeBlockRuntime } from '@rspress/core/theme'
+import { match, P } from 'massaman/match'
+import type React from 'react'
+
+import './desktop-window.css'
+
+export interface WindowTab {
+  /**
+   * Tab label text.
+   */
+  readonly name: string
+  /**
+   * Whether this tab is the active/selected tab.
+   */
+  readonly active?: boolean
+}
+
+export interface DesktopWindowProps {
+  /**
+   * Optional title text displayed in the title bar (12px mono, muted by default).
+   */
+  readonly title?: string
+  /**
+   * Optional tabs rendered in the title bar after the dots.
+   */
+  readonly tabs?: readonly WindowTab[]
+  /**
+   * Optional CSS class name for the window variant (e.g. `cp-window--browser`).
+   */
+  readonly variant?: string
+  /**
+   * Content rendered inside the window body.
+   */
+  readonly children: React.ReactNode
+}
+
+/**
+ * Base macOS-style window chrome with traffic-light dots.
+ * All other window components (BrowserWindow, IDEWindow, TerminalWindow)
+ * compose this component.
+ *
+ * @param props - Window configuration
+ * @returns React element with desktop window chrome
+ */
+export function DesktopWindow({
+  title,
+  tabs,
+  variant,
+  children,
+}: DesktopWindowProps): React.ReactElement | null {
+  if (import.meta.env.SSG_MD) {
+    return null
+  }
+
+  const className = match(variant)
+    .with(P.nonNullable, (v) => `cp-window ${v}`)
+    .otherwise(() => 'cp-window')
+
+  const titlebarCenter = match(tabs)
+    .with(P.nonNullable, (t) => (
+      <div className="cp-window__tabs">
+        {t.map((tab) => {
+          const tabClass = match(tab.active)
+            .with(true, () => 'cp-window__tab cp-window__tab--active')
+            .otherwise(() => 'cp-window__tab')
+
+          return (
+            <span key={tab.name} className={tabClass}>
+              <span className="cp-window__tab-dot" />
+              {tab.name}
+            </span>
+          )
+        })}
+      </div>
+    ))
+    .otherwise(() =>
+      match(title)
+        .with(P.nonNullable, (t) => <span className="cp-window__title">{t}</span>)
+        .otherwise(() => null)
+    )
+
+  return (
+    <div className={className}>
+      <div className="cp-window__titlebar">
+        <div className="cp-window__dots">
+          <span className="cp-window__dot cp-window__dot--close" />
+          <span className="cp-window__dot cp-window__dot--minimize" />
+          <span className="cp-window__dot cp-window__dot--maximize" />
+        </div>
+        {titlebarCenter}
+      </div>
+      <div className="cp-window__content">{children}</div>
+    </div>
+  )
+}
+
+export interface BrowserTab {
+  /**
+   * Tab label text.
+   */
+  readonly title: string
+  /**
+   * Optional icon rendered before the title.
+   */
+  readonly icon?: React.ReactNode
+}
+
+export interface BrowserWindowProps {
+  /**
+   * URL displayed in the address bar.
+   */
+  readonly url?: string
+  /**
+   * Optional tab rendered in the title bar with icon + title.
+   */
+  readonly tab?: BrowserTab
+  /**
+   * Optional tabs rendered in the title bar (passed through to DesktopWindow).
+   */
+  readonly tabs?: readonly WindowTab[]
+  /**
+   * Image source rendered as content when no children are provided.
+   */
+  readonly image?: string
+  /**
+   * Content rendered inside the window body. Takes priority over `image`.
+   */
+  readonly children?: React.ReactNode
+}
+
+/**
+ * Browser-style window with traffic-light dots, a configurable tab,
+ * and a Chrome-style URL bar with navigation controls.
+ *
+ * When `children` are provided they are rendered as the body content.
+ * Otherwise, if `image` is provided it is rendered as a full-width image.
+ *
+ * @param props - Props with optional URL, tab, tabs, image, and children
+ * @returns React element with browser window chrome
+ */
+export function BrowserWindow({
+  url,
+  tab,
+  tabs,
+  image,
+  children,
+}: BrowserWindowProps): React.ReactElement | null {
+  if (import.meta.env.SSG_MD) {
+    const title = match(tab)
+      .with(P.nonNullable, (t) => t.title)
+      .otherwise(() => 'Browser')
+    const urlLine = match(url)
+      .with(P.nonNullable, (u) => `\n\n${u}`)
+      .otherwise(() => '')
+    const header = `**${title}**${urlLine}`
+    return match(children)
+      .with(P.nonNullable, (c) => (
+        <>
+          {header}
+          {c}
+        </>
+      ))
+      .otherwise(() => <>{header}</>)
+  }
+
+  const body = match({ children, image })
+    .with({ children: P.nonNullable }, ({ children: c }) => (
+      <div className="cp-window__content">{c}</div>
+    ))
+    .with({ image: P.nonNullable }, ({ image: src }) => (
+      <div className="cp-window__content">
+        <img
+          src={src}
+          alt={match(tab)
+            .with(P.nonNullable, (t) => t.title)
+            .otherwise(() => '')}
+        />
+      </div>
+    ))
+    .otherwise(() => null)
+
+  const titlebarTabs = match(tabs)
+    .with(P.nonNullable, (t) => (
+      <div className="cp-window__tabs">
+        {t.map((windowTab) => {
+          const tabClass = match(windowTab.active)
+            .with(true, () => 'cp-window__tab cp-window__tab--active')
+            .otherwise(() => 'cp-window__tab')
+
+          return (
+            <span key={windowTab.name} className={tabClass}>
+              <span className="cp-window__tab-dot" />
+              {windowTab.name}
+            </span>
+          )
+        })}
+      </div>
+    ))
+    .otherwise(() => null)
+
+  return (
+    <div className="cp-window cp-window--browser">
+      <div className="cp-window__titlebar">
+        <div className="cp-window__dots">
+          <span className="cp-window__dot cp-window__dot--close" />
+          <span className="cp-window__dot cp-window__dot--minimize" />
+          <span className="cp-window__dot cp-window__dot--maximize" />
+        </div>
+        {match(tab)
+          .with(P.nonNullable, (t) => (
+            <div className="cp-browser__tab">
+              {match(t.icon)
+                .with(P.nonNullable, (icon) => <span className="cp-browser__tab-icon">{icon}</span>)
+                .otherwise(() => null)}
+              <span className="cp-browser__tab-title">{t.title}</span>
+            </div>
+          ))
+          .otherwise(() => null)}
+        {titlebarTabs}
+      </div>
+      {match(url)
+        .with(P.nonNullable, (u) => (
+          <div className="cp-browser__url-bar">
+            <BrowserNavButtons />
+            <span className="cp-browser__url">{u}</span>
+            <BrowserMenuButton />
+          </div>
+        ))
+        .otherwise(() => null)}
+      {body}
+    </div>
+  )
+}
+
+/**
+ * Back, forward, and refresh navigation buttons for the browser URL bar.
+ *
+ * @private
+ * @returns SVG icon group
+ */
+function BrowserNavButtons(): React.ReactElement {
+  return (
+    <div className="cp-browser__nav">
+      <svg className="cp-browser__nav-icon" viewBox="0 0 16 16" fill="currentColor">
+        <path
+          d="M10.5 3L5.5 8l5 5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <svg className="cp-browser__nav-icon" viewBox="0 0 16 16" fill="currentColor">
+        <path
+          d="M5.5 3L10.5 8l-5 5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <svg className="cp-browser__nav-icon" viewBox="0 0 16 16" fill="currentColor">
+        <path
+          d="M13 8A5 5 0 113 8a5 5 0 0110 0z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          fill="none"
+        />
+        <path
+          d="M8 3v2"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          fill="none"
+        />
+      </svg>
+    </div>
+  )
+}
+
+/**
+ * Vertical three-dot menu button for the browser URL bar.
+ *
+ * @private
+ * @returns SVG icon
+ */
+function BrowserMenuButton(): React.ReactElement {
+  return (
+    <svg className="cp-browser__menu-icon" viewBox="0 0 16 16" fill="currentColor">
+      <circle cx="8" cy="3" r="1.2" />
+      <circle cx="8" cy="8" r="1.2" />
+      <circle cx="8" cy="13" r="1.2" />
+    </svg>
+  )
+}
+
+export interface IDEFileTab {
+  /**
+   * Filename displayed in the tab.
+   */
+  readonly name: string
+  /**
+   * Whether this tab is the active/selected tab.
+   */
+  readonly active?: boolean
+}
+
+export interface IDEWindowProps {
+  /**
+   * File tabs displayed in the title bar. At least one should be `active`.
+   */
+  readonly files: readonly IDEFileTab[]
+  /**
+   * Raw code string to display. Define as an `export const` in MDX to preserve indentation.
+   */
+  readonly code?: string
+  /**
+   * Language identifier for the code block (e.g. `'ts'`, `'json'`). Only used with `code`.
+   */
+  readonly lang?: string
+  /**
+   * Content rendered inside the window body. Ignored when `code` is provided.
+   */
+  readonly children?: React.ReactNode
+}
+
+/**
+ * IDE-style window with file tabs in the title bar.
+ * When using `code`, define it as an `export const` in MDX — inline template
+ * literals in JSX attributes are dedented by the MDX compiler.
+ *
+ * @param props - Props with file tabs and code or children
+ * @returns React element with IDE window chrome
+ */
+export function IDEWindow({
+  files,
+  code,
+  lang,
+  children,
+}: IDEWindowProps): React.ReactElement | null {
+  if (import.meta.env.SSG_MD) {
+    const activeFile = files.find((f) => f.active)
+    const filename = match(activeFile)
+      .with(P.nonNullable, (f) => f.name)
+      .otherwise(() =>
+        match(files[0])
+          .with(P.nonNullable, (f) => f.name)
+          .otherwise(() => '')
+      )
+    const langId = lang ?? 'text'
+    const header = `**${filename}**\n\n`
+    const codeBlock = match(code)
+      .with(P.nonNullable, (c) => `${header}\`\`\`${langId}\n${c}\n\`\`\``)
+      .otherwise(() =>
+        match(children)
+          .with(P.nonNullable, () => header)
+          .otherwise(() => null)
+      )
+    return match(codeBlock)
+      .with(P.nonNullable, (md) => <>{md}</>)
+      .otherwise(() => null)
+  }
+
+  const tabs = files.map((file) => ({ name: file.name, active: file.active }))
+
+  const body = match(code)
+    .with(P.nonNullable, (c) => (
+      <div className="cp-window__code">
+        <CodeBlockRuntime
+          lang={match(lang)
+            .with(P.nonNullable, (l) => l)
+            .otherwise(() => 'text')}
+          code={c}
+        />
+      </div>
+    ))
+    .otherwise(() => children)
+
+  return (
+    <DesktopWindow variant="cp-window--ide" tabs={tabs}>
+      {body}
+    </DesktopWindow>
+  )
+}
+
+export type TerminalColor =
+  | 'red'
+  | 'green'
+  | 'blue'
+  | 'yellow'
+  | 'cyan'
+  | 'magenta'
+  | 'white'
+  | 'gray'
+  | 'success'
+  | 'error'
+  | 'warn'
+  | 'info'
+  | 'muted'
+  | 'bar'
+  | 'step'
+
+export interface TerminalLineConfig {
+  /**
+   * The text content of this line.
+   */
+  readonly text: string
+  /**
+   * Whether this is a command (prefixed with `$`) or output. Defaults to `'output'`.
+   */
+  readonly type?: 'command' | 'output'
+}
+
+export interface TerminalWindowProps {
+  /**
+   * Optional title displayed in the center of the title bar (e.g. `"zsh"`, `"bash"`).
+   */
+  readonly title?: string
+  /**
+   * Lines to render in the terminal.
+   */
+  readonly children: React.ReactNode
+}
+
+/**
+ * Terminal-style window with dark background and monospace text.
+ * Use `<Command>` and `<Output>` children to compose the terminal content,
+ * or use `<Line>` for colored inline text.
+ *
+ * @param props - Props with optional title and children
+ * @returns React element with terminal window chrome
+ */
+export function TerminalWindow({ title, children }: TerminalWindowProps): React.ReactElement {
+  if (import.meta.env.SSG_MD) {
+    return <>{children}</>
+  }
+
+  return (
+    <DesktopWindow variant="cp-window--terminal" title={title ?? 'Terminal'}>
+      {children}
+    </DesktopWindow>
+  )
+}
+
+export interface CommandProps {
+  /**
+   * The command text (rendered after a `$` prompt).
+   */
+  readonly children: React.ReactNode
+}
+
+/**
+ * A terminal command line prefixed with `$`.
+ *
+ * @param props - Props with command text
+ * @returns React element for a terminal command line
+ */
+export function Command({ children }: CommandProps): React.ReactElement {
+  if (import.meta.env.SSG_MD) {
+    return <>{`$ ${String(children)}\n`}</>
+  }
+
+  return <span className="cp-term-line cp-term-line--command">{children}</span>
+}
+
+export interface OutputProps {
+  /**
+   * The output text.
+   */
+  readonly children: React.ReactNode
+}
+
+/**
+ * Terminal output text (no prompt prefix).
+ *
+ * @param props - Props with output text
+ * @returns React element for terminal output
+ */
+export function Output({ children }: OutputProps): React.ReactElement {
+  if (import.meta.env.SSG_MD) {
+    return <>{`${String(children)}\n`}</>
+  }
+
+  return <span className="cp-term-line cp-term-line--output">{children}</span>
+}
+
+export interface LineProps {
+  /**
+   * Text color. Accepts terminal colors or semantic colors.
+   */
+  readonly color?: TerminalColor
+  /**
+   * Whether the text is bold.
+   */
+  readonly bold?: boolean
+  /**
+   * Whether the text is dimmed.
+   */
+  readonly dim?: boolean
+  /**
+   * The text content.
+   */
+  readonly children: React.ReactNode
+}
+
+/**
+ * Inline colored text for terminal output formatting.
+ * Combine multiple `<Line>` elements within `<Output>` for rich formatting.
+ *
+ * @param props - Props with color, bold, dim, and text content
+ * @returns React element with colored terminal text
+ */
+export function Line({ color, bold, dim, children }: LineProps): React.ReactElement {
+  if (import.meta.env.SSG_MD) {
+    return <>{String(children)}</>
+  }
+
+  const classes = [
+    match(color)
+      .with(P.nonNullable, (c) => `cp-term-text--${c}`)
+      .otherwise(() => ''),
+    match(bold)
+      .with(true, () => 'cp-term-text--bold')
+      .otherwise(() => ''),
+    match(dim)
+      .with(true, () => 'cp-term-text--dim')
+      .otherwise(() => ''),
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return <span className={classes}>{children}</span>
+}

package/dist/theme/components/shared/field.css

@@ -0,0 +1,158 @@
+/* ── Field ── */
+
+.cp-field {
+  padding: var(--cp-s-12) var(--cp-s-16);
+  border-bottom: 1px solid var(--cp-c-border);
+}
+
+.cp-field:last-child {
+  border-bottom: none;
+}
+
+.cp-field__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--cp-s-8);
+  flex-wrap: wrap;
+  margin-bottom: var(--cp-s-4);
+}
+
+.cp-field__name {
+  font-family: var(--cp-font-family-mono);
+  font-weight: 600;
+  font-size: var(--cp-fs-field-name);
+  color: var(--cp-c-text-1);
+}
+
+.cp-field__name--deprecated {
+  text-decoration: line-through;
+  opacity: var(--cp-opacity-deprecated);
+}
+
+.cp-field__type {
+  display: inline-block;
+  padding: var(--cp-s-1) var(--cp-s-8);
+  border-radius: var(--cp-radius-pill);
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-field-type);
+  color: var(--cp-c-text-2);
+  background: var(--cp-c-bg-soft);
+}
+
+.cp-field__badge {
+  font-size: var(--cp-fs-field-badge);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: var(--cp-letter-wide);
+}
+
+.cp-field__badge--required {
+  color: var(--cp-c-tint-red-fg);
+}
+
+.cp-field__badge--optional {
+  color: var(--cp-c-text-3);
+}
+
+.cp-field__badge--deprecated {
+  padding: var(--cp-s-1) var(--cp-s-8);
+  border-radius: var(--cp-radius-pill);
+  background: var(--cp-c-tint-amber-bg);
+  color: var(--cp-c-tint-amber-fg);
+}
+
+.cp-field__default {
+  font-size: var(--cp-fs-field-default);
+  color: var(--cp-c-text-3);
+  margin-bottom: var(--cp-s-2);
+}
+
+.cp-field__default code {
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-field-default-code);
+  padding: var(--cp-s-1) var(--cp-s-4);
+  border-radius: var(--cp-radius-sm);
+  background: var(--cp-c-bg-soft);
+  color: var(--cp-c-text-2);
+}
+
+.cp-field__body {
+  font-size: var(--cp-fs-field-body);
+  color: var(--cp-c-text-2);
+  line-height: var(--cp-lh-relaxed);
+}
+
+.cp-field__body > p {
+  margin: 0;
+}
+
+/* ── FieldGroup (top-level) ── */
+
+.cp-field-group {
+  margin: var(--cp-s-16) 0;
+}
+
+.cp-field-group__title {
+  font-size: var(--cp-fs-field-group-title);
+  font-weight: 600;
+  color: var(--cp-c-text-1);
+  margin-bottom: var(--cp-s-12);
+  padding-bottom: var(--cp-s-8);
+  border-bottom: 1px solid var(--cp-c-border);
+}
+
+/* ── FieldGroup (expandable) ── */
+
+.cp-field-group--expandable {
+  margin: var(--cp-s-8) 0 0;
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--cp-radius-md-sm);
+  overflow: hidden;
+}
+
+.cp-field-group__trigger {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--cp-s-6);
+  width: 100%;
+  padding: var(--cp-s-8) var(--cp-s-12);
+  border: none;
+  background: var(--cp-c-bg-soft);
+  color: var(--cp-c-text-2);
+  font-size: var(--cp-fs-field-trigger);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cp-field-group__trigger:hover {
+  color: var(--cp-c-text-1);
+}
+
+.cp-field-group__chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cp-size-chevron);
+  height: var(--cp-size-chevron);
+  color: var(--cp-c-text-3);
+  transition: transform var(--cp-duration-base);
+}
+
+.cp-field-group--expandable[data-open] .cp-field-group__chevron {
+  transform: rotate(90deg);
+}
+
+.cp-field-group__panel {
+  display: none;
+  padding: var(--cp-s-4) 0;
+}
+
+.cp-field-group--expandable[data-open] .cp-field-group__panel {
+  display: block;
+}
+
+.cp-field-group--expandable .cp-field {
+  padding-left: var(--cp-s-24);
+}