@ciderpress/ui 1.0.0-rc.1

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

@@ -0,0 +1,178 @@
+/**
+ * Prompt — AI prompt block with action buttons and dropdown.
+ */
+
+.cp-prompt {
+  display: flex;
+  flex-direction: column;
+  margin: var(--cp-s-16) 0;
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--rp-radius);
+  overflow: visible;
+  position: relative;
+}
+
+.cp-prompt__header {
+  display: flex;
+  align-items: center;
+  gap: var(--cp-s-10);
+  padding: var(--cp-s-10) var(--cp-s-14);
+  background: var(--cp-c-bg-elv);
+  border-radius: var(--rp-radius);
+}
+
+.cp-prompt__header:has(+ .cp-prompt__code) {
+  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
+}
+
+.cp-prompt__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--cp-size-prompt-icon);
+  height: var(--cp-size-prompt-icon);
+  color: var(--cp-c-brand-1);
+}
+
+.cp-prompt__description {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--cp-fs-prompt-desc);
+  line-height: var(--cp-lh-base);
+  color: var(--cp-c-text-1);
+}
+
+.cp-prompt__feedback {
+  font-size: var(--cp-fs-prompt-feedback);
+  font-weight: 500;
+  color: var(--cp-c-brand-1);
+  white-space: nowrap;
+}
+
+.cp-prompt__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cp-s-4);
+  flex-shrink: 0;
+}
+
+/* ── Buttons ──────────────────────────────────────────────── */
+
+.cp-prompt__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cp-s-6);
+  padding: 0;
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--rp-radius);
+  background: var(--cp-c-bg);
+  color: var(--cp-c-text-2);
+  font-family: var(--cp-font-family-base);
+  font-size: var(--cp-fs-prompt-btn);
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    color var(--cp-duration-fast),
+    border-color var(--cp-duration-fast),
+    background var(--cp-duration-fast);
+}
+
+.cp-prompt__btn:hover {
+  color: var(--cp-c-brand-1);
+  border-color: var(--cp-c-brand-1);
+}
+
+.cp-prompt__btn--primary {
+  padding: var(--cp-s-4) var(--cp-s-12);
+  height: var(--cp-size-prompt-btn);
+}
+
+.cp-prompt__btn--icon {
+  width: var(--cp-size-prompt-btn);
+  height: var(--cp-size-prompt-btn);
+}
+
+/* ── Dropdown ─────────────────────────────────────────────── */
+
+.cp-prompt__dropdown {
+  position: relative;
+}
+
+.cp-prompt__menu {
+  position: absolute;
+  top: calc(100% + var(--cp-s-6));
+  right: 0;
+  z-index: var(--cp-z-dropdown);
+  min-width: var(--cp-size-menu-min);
+  padding: var(--cp-s-4);
+  background: var(--cp-c-bg);
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--rp-radius);
+  box-shadow: var(--cp-shadow-menu);
+}
+
+.cp-prompt__menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--cp-s-10);
+  width: 100%;
+  padding: var(--cp-s-8) var(--cp-s-10);
+  border: none;
+  border-radius: var(--rp-radius-small);
+  background: none;
+  color: var(--cp-c-text-1);
+  font-family: var(--cp-font-family-base);
+  font-size: var(--cp-fs-prompt-menu-item);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--cp-duration-fast);
+}
+
+.cp-prompt__menu-item:hover {
+  background: var(--cp-c-bg-soft);
+}
+
+.cp-prompt__menu-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--cp-size-prompt-menu-icon);
+  height: var(--cp-size-prompt-menu-icon);
+  color: var(--cp-c-text-2);
+}
+
+.cp-prompt__menu-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.cp-prompt__menu-label {
+  font-weight: 500;
+  line-height: var(--cp-lh-tighter);
+}
+
+.cp-prompt__menu-desc {
+  font-size: var(--cp-fs-prompt-menu-desc);
+  color: var(--cp-c-text-3);
+  line-height: var(--cp-lh-tighter);
+}
+
+/* ── Hidden raw & Code block ──────────────────────────────── */
+
+.cp-prompt__raw {
+  display: none;
+}
+
+.cp-prompt__code {
+  border-top: 1px solid var(--cp-c-border);
+}
+
+.cp-prompt__code div[class*='language-'] {
+  margin: 0 !important;
+  border-radius: 0 0 var(--rp-radius) var(--rp-radius) !important;
+}

package/dist/theme/components/shared/prompt.stories.tsx

@@ -0,0 +1,57 @@
+import type { Story } from '@ladle/react'
+
+import { Prompt } from './prompt.tsx'
+
+const meta = {
+  title: 'Data Display / Prompt',
+}
+
+export default meta
+
+const SAMPLE_PROMPT = `You are a senior TypeScript engineer. Review the diff below and flag
+correctness issues, edge cases, and missing tests. Be terse and prescriptive
+— no praise, no recap.`
+
+/**
+ * Default — description, copy action, and an expandable code view of
+ * the raw prompt text.
+ *
+ * @returns Prompt with single Copy action
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const Default: Story = () => (
+  <Prompt description="Senior TypeScript code review prompt">{SAMPLE_PROMPT}</Prompt>
+)
+
+/**
+ * Prompt with multiple actions — Copy is primary, the rest live in a
+ * dropdown next to it.
+ *
+ * @returns Prompt with full action set
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const MultipleActions: Story = () => (
+  <Prompt
+    description="Open this prompt in your tool of choice"
+    actions={['copy', 'cursor', 'vscode', 'chatgpt', 'claude']}
+  >
+    {SAMPLE_PROMPT}
+  </Prompt>
+)
+
+/**
+ * Custom icon — overrides the default `pixelarticons:sparkles`.
+ *
+ * @returns Prompt with custom icon
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const CustomIcon: Story = () => (
+  <Prompt
+    icon="pixelarticons:bug"
+    description="Reproduce and isolate a flaky test"
+    actions={['copy', 'claude']}
+  >
+    Identify which test is flaky in the attached file, reduce it to a minimal repro, and propose a
+    fix that doesn't trade speed for stability.
+  </Prompt>
+)

package/dist/theme/components/shared/prompt.tsx

@@ -0,0 +1,369 @@
+import { CodeBlockRuntime } from '@rspress/core/theme'
+import { match, P } from 'massaman/match'
+import type React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Icon } from './icon'
+
+export type PromptAction = 'copy' | 'cursor' | 'vscode' | 'chatgpt' | 'claude'
+
+export interface PromptProps {
+  /**
+   * Short description of what the prompt does.
+   * Displayed as the visible summary.
+   */
+  readonly description?: string
+  /**
+   * Iconify icon ID rendered before the description.
+   * Defaults to `pixelarticons:sparkles`.
+   */
+  readonly icon?: string
+  /**
+   * Action buttons to display. Defaults to `['copy']`.
+   * - `copy` — copy prompt text to clipboard
+   * - `cursor` — copy to clipboard and launch Cursor IDE
+   * - `vscode` — copy to clipboard and launch VS Code
+   * - `chatgpt` — open ChatGPT in a new tab with prompt pre-filled
+   * - `claude` — open Claude in a new tab with prompt pre-filled
+   */
+  readonly actions?: readonly PromptAction[]
+  /**
+   * The raw prompt text. Rendered inside an expandable code block.
+   */
+  readonly children: React.ReactNode
+}
+
+/**
+ * AI prompt block with description, action buttons, and an expandable
+ * code view for the full prompt text.
+ *
+ * @param props - Prompt configuration with description, icon, and actions
+ * @returns React element with prompt card
+ */
+export function Prompt({
+  description,
+  icon = 'pixelarticons:sparkles',
+  actions = ['copy'],
+  children,
+}: PromptProps): React.ReactElement {
+  const [expanded, setExpanded] = useState(false)
+  const [feedback, setFeedback] = useState<string | null>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const getRawText = useCallback(
+    (): string =>
+      match(contentRef.current)
+        .with(null, () => '')
+        .otherwise((el) => el.textContent ?? ''),
+    []
+  )
+
+  const feedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(
+    () => () => {
+      if (feedbackTimerRef.current !== null) {
+        clearTimeout(feedbackTimerRef.current)
+      }
+    },
+    []
+  )
+
+  const showFeedback = useCallback((msg: string) => {
+    if (feedbackTimerRef.current !== null) {
+      clearTimeout(feedbackTimerRef.current)
+    }
+    setFeedback(msg)
+    feedbackTimerRef.current = setTimeout(() => setFeedback(null), 2000)
+  }, [])
+
+  const handleAction = useCallback(
+    (action: PromptAction) => {
+      const text = getRawText()
+
+      match(action)
+        .with('copy', () => {
+          navigator.clipboard
+            .writeText(text)
+            .then(() => {
+              showFeedback('Copied!')
+              return null
+            })
+            .catch(() => {
+              showFeedback('Copy failed')
+            })
+        })
+        .with('cursor', () => {
+          // Copy prompt to clipboard then open Cursor so the user can paste into composer
+          navigator.clipboard
+            .writeText(text)
+            .then(() => {
+              showFeedback('Copied — opening Cursor…')
+              globalThis.open('cursor://', '_self')
+              return null
+            })
+            .catch(() => {
+              showFeedback('Copy failed')
+            })
+        })
+        .with('vscode', () => {
+          navigator.clipboard
+            .writeText(text)
+            .then(() => {
+              showFeedback('Copied — opening VS Code…')
+              globalThis.open('vscode://', '_self')
+              return null
+            })
+            .catch(() => {
+              showFeedback('Copy failed')
+            })
+        })
+        .with('chatgpt', () => {
+          const encoded = encodeURIComponent(text)
+          globalThis.open(`https://chatgpt.com/?hints=search&prompt=${encoded}`, '_blank')
+          showFeedback('Opened ChatGPT')
+        })
+        .with('claude', () => {
+          const encoded = encodeURIComponent(text)
+          globalThis.open(`https://claude.ai/new?q=${encoded}`, '_blank')
+          showFeedback('Opened Claude')
+        })
+        .exhaustive()
+    },
+    [getRawText, showFeedback]
+  )
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+
+  const descEl = match(description)
+    .with(P.nonNullable, (d) => <span className="cp-prompt__description">{d}</span>)
+    .otherwise(() => null)
+
+  const feedbackEl = match(feedback)
+    .with(P.nonNullable, (msg) => <span className="cp-prompt__feedback">{msg}</span>)
+    .otherwise(() => null)
+
+  const primaryAction = actions[0] ?? 'copy'
+  const dropdownActions = actions.slice(1)
+
+  return (
+    <div className="cp-prompt">
+      <div className="cp-prompt__header">
+        <span className="cp-prompt__icon">
+          <Icon icon={icon} />
+        </span>
+        {descEl}
+        {feedbackEl}
+        <span className="cp-prompt__actions">
+          <PrimaryButton action={primaryAction} onPress={handleAction} />
+          {match(dropdownActions.length > 0)
+            .with(true, () => <ActionDropdown actions={dropdownActions} onPress={handleAction} />)
+            .otherwise(() => null)}
+          <button
+            type="button"
+            className="cp-prompt__btn cp-prompt__btn--icon"
+            onClick={toggleExpanded}
+            title={match(expanded)
+              .with(true, () => 'Hide prompt')
+              .otherwise(() => 'Show prompt')}
+          >
+            <Icon
+              icon={match(expanded)
+                .with(true, () => 'pixelarticons:collapse')
+                .otherwise(() => 'pixelarticons:expand')}
+            />
+          </button>
+        </span>
+      </div>
+      <div ref={contentRef} className="cp-prompt__raw" hidden>
+        {children}
+      </div>
+      {match(expanded)
+        .with(true, () => (
+          <div className="cp-prompt__code">
+            <CodeBlockRuntime lang="markdown" code={getRawText()} />
+          </div>
+        ))
+        .otherwise(() => null)}
+    </div>
+  )
+}
+
+/**
+ * Action metadata for display.
+ *
+ * @private
+ */
+interface ActionMeta {
+  readonly label: string
+  readonly icon: React.ReactNode
+  readonly description: string
+}
+
+/**
+ * Resolve display metadata for a prompt action.
+ *
+ * @private
+ * @param action - The prompt action type
+ * @returns Label, icon, and description for the action
+ */
+function actionMeta(action: PromptAction): ActionMeta {
+  return match(action)
+    .with('copy', () => ({
+      label: 'Copy',
+      icon: <Icon icon="pixelarticons:clipboard" />,
+      description: 'Copy to clipboard',
+    }))
+    .with('cursor', () => ({
+      label: 'Cursor',
+      icon: <Icon icon="simple-icons:cursor" />,
+      description: 'Copy and open Cursor IDE',
+    }))
+    .with('vscode', () => ({
+      label: 'VS Code',
+      icon: <Icon icon="mdi:microsoft-visual-studio-code" />,
+      description: 'Copy and open VS Code',
+    }))
+    .with('chatgpt', () => ({
+      label: 'ChatGPT',
+      icon: <Icon icon="simple-icons:openai" />,
+      description: 'Open in ChatGPT with prompt',
+    }))
+    .with('claude', () => ({
+      label: 'Claude',
+      icon: <Icon icon="simple-icons:claude" />,
+      description: 'Open in Claude with prompt',
+    }))
+    .exhaustive()
+}
+
+interface PrimaryButtonProps {
+  readonly action: PromptAction
+  readonly onPress: (action: PromptAction) => void
+}
+
+/**
+ * Full-width primary action button.
+ *
+ * @private
+ * @param props - Action and press handler
+ * @returns Button element
+ */
+function PrimaryButton({ action, onPress }: PrimaryButtonProps): React.ReactElement {
+  const meta = actionMeta(action)
+  const handleClick = useCallback(() => {
+    onPress(action)
+  }, [action, onPress])
+
+  return (
+    <button type="button" className="cp-prompt__btn cp-prompt__btn--primary" onClick={handleClick}>
+      {meta.icon}
+      <span>{meta.label}</span>
+    </button>
+  )
+}
+
+interface ActionDropdownProps {
+  readonly actions: readonly PromptAction[]
+  readonly onPress: (action: PromptAction) => void
+}
+
+/**
+ * Dropdown menu for additional prompt actions.
+ *
+ * @private
+ * @param props - Actions list and press handler
+ * @returns Dropdown element with toggle and menu
+ */
+function ActionDropdown({ actions, onPress }: ActionDropdownProps): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    function handler(e: MouseEvent): void {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const handleToggle = useCallback(() => {
+    setOpen((prev) => !prev)
+  }, [])
+
+  return (
+    <div ref={ref} className="cp-prompt__dropdown">
+      <button
+        type="button"
+        className="cp-prompt__btn cp-prompt__btn--icon"
+        onClick={handleToggle}
+        aria-expanded={open}
+        aria-haspopup="menu"
+      >
+        <Icon
+          icon={match(open)
+            .with(true, () => 'pixelarticons:chevron-up')
+            .otherwise(() => 'pixelarticons:chevron-down')}
+        />
+      </button>
+      {match(open)
+        .with(true, () => (
+          <div className="cp-prompt__menu" role="menu">
+            {actions.map((action) => {
+              const meta = actionMeta(action)
+              return (
+                <DropdownItem
+                  key={action}
+                  action={action}
+                  meta={meta}
+                  onPress={(a) => {
+                    onPress(a)
+                    setOpen(false)
+                  }}
+                />
+              )
+            })}
+          </div>
+        ))
+        .otherwise(() => null)}
+    </div>
+  )
+}
+
+interface DropdownItemProps {
+  readonly action: PromptAction
+  readonly meta: ActionMeta
+  readonly onPress: (action: PromptAction) => void
+}
+
+/**
+ * A single item in the action dropdown menu.
+ *
+ * @private
+ * @param props - Action, display metadata, and press handler
+ * @returns Menu item button
+ */
+function DropdownItem({ action, meta, onPress }: DropdownItemProps): React.ReactElement {
+  const handleClick = useCallback(() => {
+    onPress(action)
+  }, [action, onPress])
+
+  return (
+    <button type="button" className="cp-prompt__menu-item" role="menuitem" onClick={handleClick}>
+      <span className="cp-prompt__menu-icon">{meta.icon}</span>
+      <span className="cp-prompt__menu-text">
+        <span className="cp-prompt__menu-label">{meta.label}</span>
+        <span className="cp-prompt__menu-desc">{meta.description}</span>
+      </span>
+    </button>
+  )
+}

package/dist/theme/components/shared/resolve-card-icon.ts

@@ -0,0 +1,28 @@
+/**
+ * Resolved icon with id and color.
+ */
+export interface ResolvedCardIcon {
+  readonly id: string
+  readonly color: string
+}
+
+/**
+ * Resolve a unified icon config into id + color.
+ *
+ * String icons get the default `'purple'` color. Object icons pass through.
+ * Returns `undefined` for undefined input.
+ *
+ * @param icon - Icon config (string, object, or undefined)
+ * @returns Resolved icon or undefined
+ */
+export function resolveCardIcon(
+  icon: string | { readonly id: string; readonly color: string } | undefined
+): ResolvedCardIcon | undefined {
+  if (icon === undefined) {
+    return undefined
+  }
+  if (typeof icon === 'string') {
+    return { id: icon, color: 'purple' }
+  }
+  return icon
+}

package/dist/theme/components/shared/section-card.stories.tsx

@@ -0,0 +1,51 @@
+import type { Story } from '@ladle/react'
+
+import { SectionCard } from './section-card.tsx'
+
+const meta = {
+  title: 'Surface / Section Card',
+}
+
+export default meta
+
+/**
+ * Default — icon, title, description. Renders as a clickable `<a>`
+ * routed through the stubbed Rspress `<Link>`.
+ *
+ * @returns Linked section card
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const Default: Story = () => (
+  <SectionCard
+    href="/guides/getting-started"
+    title="Getting started"
+    description="Spin up a Ciderpress site against your existing markdown in under five minutes."
+    icon="pixelarticons:flag"
+  />
+)
+
+/**
+ * No description — minimum content.
+ *
+ * @returns Section card with title only
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const TitleOnly: Story = () => (
+  <SectionCard href="/concepts" title="Concepts" icon="pixelarticons:bulb" />
+)
+
+/**
+ * Custom icon + colour — pass `{ id, color }` to override the auto
+ * resolution from `resolveCardIcon`.
+ *
+ * @returns Card with explicit blue icon
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const CustomIcon: Story = () => (
+  <SectionCard
+    href="/references/api"
+    title="API reference"
+    description="Every public export with full prop tables and example snippets."
+    icon={{ id: 'pixelarticons:code', color: 'blue' }}
+  />
+)