@mohou/ui 1.0.20

package/src/products/markdown-editor.tsx

@@ -0,0 +1,77 @@
+
+import * as React from 'react'
+
+import { Button } from '@mohou/ui/components/button'
+import { CodeEditor } from '@mohou/ui/products/code-editor'
+import { Markdown } from '@mohou/ui/products/markdown'
+import { cn } from '@mohou/ui/lib/utils'
+import { useLabels } from '@mohou/ui/i18n/context'
+
+export type MarkdownEditorMode = 'edit' | 'split' | 'preview'
+
+/**
+ * Markdown edit + preview toggle.
+ * @when Authoring md bodies. Read-only render → `Markdown`.
+ * @example
+ * <MarkdownEditor value={md} onChange={(v) => set(v)} />
+ * @family Rich text
+ */
+export function MarkdownEditor({
+  value,
+  onChange,
+  mode = 'split',
+  onModeChange,
+}: {
+  value: string
+  onChange?: (value: string) => void
+  mode?: MarkdownEditorMode | undefined
+  onModeChange?: (mode: MarkdownEditorMode) => void
+}) {
+  const t = useLabels('markdownEditor')
+  const [currentMode, setCurrentMode] = React.useState<MarkdownEditorMode>(mode)
+  React.useEffect(() => setCurrentMode(mode), [mode])
+  const setMode = (next: MarkdownEditorMode) => {
+    setCurrentMode(next)
+    onModeChange?.(next)
+  }
+  return (
+    <div data-testid="markdown-editor" className="overflow-hidden rounded-xl border bg-card">
+      <div className="flex items-center gap-1 border-b p-1">
+        {(['edit', 'split', 'preview'] as const).map(item => (
+          <Button
+            key={item}
+            size="sm"
+            variant={currentMode === item ? 'default' : 'ghost'}
+            data-testid={`markdown-mode-${item}`}
+            onClick={() => setMode(item)}
+          >
+            {t[item]}
+          </Button>
+        ))}
+      </div>
+      <div
+        className={cn(
+          'grid min-h-[280px]',
+          currentMode === 'split' ? 'md:grid-cols-2' : 'grid-cols-1'
+        )}
+      >
+        {currentMode !== 'preview' ? (
+          <div className={cn(currentMode === 'split' && 'border-b md:border-r md:border-b-0')}>
+            <CodeEditor
+              value={value}
+              onChange={onChange}
+              language="md"
+              height="280px"
+              className="rounded-none border-0"
+            />
+          </div>
+        ) : null}
+        {currentMode !== 'edit' ? (
+          <div className="overflow-auto p-3" data-testid="markdown-preview">
+            <Markdown>{value}</Markdown>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/products/markdown.tsx

@@ -0,0 +1,50 @@
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+import { cn } from '@mohou/ui/lib/utils'
+
+/**
+ * Render a markdown string. The component owns the reading styles.
+ * `className` overrides. A normal document does not add its own.
+ * @when Model output, README-ish bodies. Children must be a string.
+ * @example
+ * <Markdown>{text}</Markdown>
+ * @family Rich text
+ */
+export function Markdown({
+  children,
+  className,
+}: {
+  children: string
+  className?: string
+}) {
+  return (
+    <div data-testid="markdown" className={cn(markdownClass, className)}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{children}</ReactMarkdown>
+    </div>
+  )
+}
+
+const markdownClass = [
+  'max-w-full overflow-x-auto text-sm leading-relaxed',
+  '[&_h1]:mt-5 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:tracking-tight',
+  '[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold',
+  '[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:text-sm [&_h3]:font-semibold',
+  '[&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:text-sm [&_h4]:font-medium',
+  '[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0',
+  '[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5',
+  '[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5',
+  '[&_li]:my-1 [&_li]:pl-0.5',
+  '[&_a]:underline [&_a]:underline-offset-2',
+  '[&_strong]:font-semibold',
+  '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]',
+  '[&_pre]:my-3 [&_pre]:overflow-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:bg-muted/40 [&_pre]:p-3',
+  '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
+  '[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground',
+  '[&_hr]:my-4 [&_hr]:border-border',
+  '[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_table]:text-left',
+  '[&_th]:border [&_th]:border-border [&_th]:bg-muted/70 [&_th]:px-2 [&_th]:py-1.5 [&_th]:text-left [&_th]:font-medium [&_th]:align-top',
+  '[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1.5 [&_td]:align-top',
+  '[&_img]:max-w-full',
+].join(' ')

package/src/products/rich-text-editor.tsx

@@ -0,0 +1,89 @@
+
+import * as React from 'react'
+import { Bold, Code, Italic, List, ListOrdered } from 'lucide-react'
+
+import { Button } from '@mohou/ui/components/button'
+import { useLabels } from '@mohou/ui/i18n/context'
+import { cn } from '@mohou/ui/lib/utils'
+
+function runCommand(command: string, value?: string) {
+  // Same primitive as react-simple-wysiwyg. Deprecated, still what lightweight
+  // browsers expose for simple WYSIWYG; no TipTap / CDN / second React.
+  document.execCommand(command, false, value)
+}
+
+/**
+ * Lightweight rich-text editor (contentEditable + toolbar), same idea as
+ * `react-simple-wysiwyg`. HTML is browser-generated — sanitize server-side if needed.
+ * @family Rich text
+ * @when Notes/descriptions you store as **HTML**. Markdown → `MarkdownEditor`; code → `CodeEditor`. Sanitize server-side before rendering elsewhere.
+ */
+export function RichTextEditor({
+  value = '<p></p>',
+  onChange,
+  placeholder,
+}: {
+  value?: string
+  onChange?: (html: string) => void
+  placeholder?: string
+}) {
+  const t = useLabels('richText')
+  const ref = React.useRef<HTMLDivElement>(null)
+  const ph = placeholder ?? t.placeholder
+
+  React.useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (el.innerHTML !== value) el.innerHTML = value || ''
+  }, [value])
+
+  const emit = () => {
+    onChange?.(ref.current?.innerHTML ?? '')
+  }
+
+  const cmd = (command: string, arg?: string) => (e: React.MouseEvent) => {
+    e.preventDefault()
+    ref.current?.focus()
+    runCommand(command, arg)
+    emit()
+  }
+
+  return (
+    <div data-testid="rich-text-editor" className="overflow-hidden rounded-xl border bg-card">
+      <div className="flex flex-wrap gap-0.5 border-b p-1">
+        <Button type="button" size="sm" variant="ghost" aria-label={t.bold} onMouseDown={cmd('bold')}>
+          <Bold className="size-3.5" />
+        </Button>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.italic} onMouseDown={cmd('italic')}>
+          <Italic className="size-3.5" />
+        </Button>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.code} onMouseDown={cmd('formatBlock', 'pre')}>
+          <Code className="size-3.5" />
+        </Button>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.bullet} onMouseDown={cmd('insertUnorderedList')}>
+          <List className="size-3.5" />
+        </Button>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.ordered} onMouseDown={cmd('insertOrderedList')}>
+          <ListOrdered className="size-3.5" />
+        </Button>
+      </div>
+      <div
+        ref={ref}
+        role="textbox"
+        aria-multiline="true"
+        aria-placeholder={ph}
+        contentEditable
+        suppressContentEditableWarning
+        data-placeholder={ph}
+        className={cn(
+          'min-h-40 px-3 py-2 text-sm outline-none',
+          '[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6',
+          '[&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:px-2 [&_pre]:py-1 [&_pre]:font-mono [&_pre]:text-xs',
+          'empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]',
+        )}
+        onInput={emit}
+        onBlur={emit}
+      />
+    </div>
+  )
+}

package/src/products/sortable-list.tsx

@@ -0,0 +1,67 @@
+
+import {
+  DndContext,
+  closestCenter,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical } from 'lucide-react'
+
+export type SortableItem = { id: string; label: string }
+
+function Row({ item }: { item: SortableItem }) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: item.id })
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className="flex items-center gap-2 rounded-lg border bg-card px-2 py-1.5 text-sm"
+    >
+      <button type="button" className="text-muted-foreground" {...attributes} {...listeners}>
+        <GripVertical className="size-3.5" />
+      </button>
+      {item.label}
+    </div>
+  )
+}
+
+/**
+ * Drag-to-reorder list.
+ * @when Priority queues / column order. Read-only ordered events → `Timeline`.
+ * @example
+ * <SortableList items={items} onChange={(next) => set(next)} />
+ * @family Data & tables
+ */
+export function SortableList({
+  items,
+  onChange,
+}: {
+  items: SortableItem[]
+  onChange?: (items: SortableItem[]) => void
+}) {
+  const onDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    const oldIndex = items.findIndex(item => item.id === active.id)
+    const newIndex = items.findIndex(item => item.id === over.id)
+    onChange?.(arrayMove(items, oldIndex, newIndex))
+  }
+  return (
+    <DndContext collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+      <SortableContext items={items.map(item => item.id)} strategy={verticalListSortingStrategy}>
+        <div className="flex flex-col gap-1.5" data-testid="sortable-list">
+          {items.map(item => (
+            <Row key={item.id} item={item} />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  )
+}

package/src/products/stepper.tsx

@@ -0,0 +1,237 @@
+
+import * as React from 'react';
+import { Check } from 'lucide-react';
+
+import { cn } from '@mohou/ui/lib/utils';
+
+export type StepStatus = 'default' | 'active' | 'completed';
+
+export interface StepperProps {
+  /** StepperItem elements. */
+  children: React.ReactNode
+  /** Layout direction. Defaults to "vertical". */
+  orientation?: 'vertical' | 'horizontal' | undefined
+  className?: string | undefined
+}
+
+export interface StepperItemProps {
+  /** Step heading text. */
+  title: string
+  /** Optional description below the title. */
+  description?: string | undefined
+  /** Override the auto-incremented step number. */
+  step?: number | undefined
+  /** Visual status of this step. Defaults to "default". */
+  status?: StepStatus | undefined
+  /** Custom icon to replace the step number circle. */
+  icon?: React.ReactNode | undefined
+  /** Content rendered below the step header (code blocks, text, etc.). */
+  children?: React.ReactNode | undefined
+  className?: string | undefined
+}
+
+/**
+ * One step inside `Stepper` (title, description, status).
+ * @family Feedback & status
+ * @when As a child of `Stepper` only — status is `default | active | completed` (lowercase).
+ */
+export function StepperItem({
+  title,
+  description,
+  step,
+  status = 'default',
+  icon,
+  children,
+  className,
+}: StepperItemProps) {
+  const stepNumber = step ?? 1
+
+  return (
+    <div
+      data-slot="stepper-item"
+      data-status={status}
+      className={cn('group/step relative', className)}
+    >
+      <div className="flex gap-3">
+        <div className="flex shrink-0 flex-col items-center self-stretch">
+          <div
+            className={cn(
+              'relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors',
+              status === 'completed' &&
+                'border-primary bg-primary text-primary-foreground',
+              status === 'active' &&
+                'border-primary bg-primary/10 text-primary',
+              status === 'default' &&
+                'border-border bg-background text-muted-foreground'
+            )}
+          >
+            {icon ? (
+              icon
+            ) : status === 'completed' ? (
+              <Check className="size-3.5" aria-hidden="true" />
+            ) : (
+              <span className="text-xs">{stepNumber}</span>
+            )}
+          </div>
+
+          <div
+            className={cn(
+              'w-px min-h-4 grow',
+              status === 'completed'
+                ? 'bg-primary'
+                : 'bg-border dark:bg-muted-foreground/25',
+              'group-last/step:hidden'
+            )}
+          />
+        </div>
+
+        <div className="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/step:pb-0">
+          <div className="flex flex-col gap-0.5">
+            <h3 className="text-sm font-semibold leading-tight text-foreground">
+              {title}
+            </h3>
+            {description ? (
+              <p className="text-sm text-muted-foreground">{description}</p>
+            ) : null}
+          </div>
+          {children ? <div className="mt-2">{children}</div> : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function VerticalStepper({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string | undefined
+}) {
+  const items = React.Children.toArray(children).filter(React.isValidElement)
+
+  return (
+    <div
+      data-testid="stepper"
+      data-slot="stepper"
+      data-orientation="vertical"
+      className={cn('flex flex-col', className)}
+    >
+      {items.map((child, index) => {
+        if (!React.isValidElement<StepperItemProps>(child)) return child
+        return React.cloneElement(child, {
+          step: child.props.step ?? index + 1,
+          key: child.key ?? index,
+        })
+      })}
+    </div>
+  )
+}
+
+function HorizontalStepper({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string | undefined
+}) {
+  const items = React.Children.toArray(children).filter(React.isValidElement)
+
+  return (
+    <div
+      data-testid="stepper"
+      data-slot="stepper"
+      data-orientation="horizontal"
+      className={cn('flex flex-col gap-4', className)}
+    >
+      <div className="flex items-center">
+        {items.map((child, index) => {
+          if (!React.isValidElement<StepperItemProps>(child)) return null
+          const { status = 'default', icon, step: stepProp } = child.props
+          const stepNumber = stepProp ?? index + 1
+          const isLast = index === items.length - 1
+
+          return (
+            <React.Fragment key={child.key ?? index}>
+              <div className="flex flex-col items-center gap-1.5">
+                <div
+                  className={cn(
+                    'flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors',
+                    status === 'completed' &&
+                      'border-primary bg-primary text-primary-foreground',
+                    status === 'active' &&
+                      'border-primary bg-primary/10 text-primary',
+                    status === 'default' &&
+                      'border-border bg-background text-muted-foreground'
+                  )}
+                >
+                  {icon ? (
+                    icon
+                  ) : status === 'completed' ? (
+                    <Check className="size-3.5" aria-hidden="true" />
+                  ) : (
+                    <span className="text-xs">{stepNumber}</span>
+                  )}
+                </div>
+                <span
+                  className={cn(
+                    'max-w-[8rem] text-center text-xs font-medium',
+                    status === 'default'
+                      ? 'text-muted-foreground'
+                      : 'text-foreground'
+                  )}
+                >
+                  {child.props.title}
+                </span>
+              </div>
+              {!isLast ? (
+                <div
+                  className={cn(
+                    'mb-5 h-px flex-1',
+                    status === 'completed' ? 'bg-primary' : 'bg-border'
+                  )}
+                />
+              ) : null}
+            </React.Fragment>
+          )
+        })}
+      </div>
+
+      {items.map((child, index) => {
+        if (!React.isValidElement<StepperItemProps>(child)) return null
+        const { status = 'default', description, children: stepChildren } =
+          child.props
+        if (status !== 'active') return null
+
+        return (
+          <div key={child.key ?? index} className="flex flex-col gap-1.5">
+            {description ? (
+              <p className="text-sm text-muted-foreground">{description}</p>
+            ) : null}
+            {stepChildren ? <div>{stepChildren}</div> : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * Numbered steps with status; children are `StepperItem`.
+ * @family Feedback & status
+ * @when Wizard/progress of an ordered process. Time axis → `RunTimeline`.
+ * @example
+ * <Stepper><StepperItem title="上传" status="pass" /><StepperItem title="校验" status="running" /></Stepper>
+ */
+export function Stepper({
+  children,
+  orientation = 'vertical',
+  className,
+}: StepperProps) {
+  if (orientation === 'horizontal') {
+    return (
+      <HorizontalStepper className={className}>{children}</HorizontalStepper>
+    )
+  }
+  return <VerticalStepper className={className}>{children}</VerticalStepper>
+}

package/src/products/timeline.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@mohou/ui/lib/utils'
+
+export type TimelineItem = {
+  id: string
+  title: string
+  description?: string
+  time?: string
+}
+
+/**
+ * Vertical ordered events.
+ * @when Statuses/history without durations. Durations → `RunTimeline`.
+ * @example
+ * <Timeline items={[{ id: "1", title: "已创建", time: "09:00" }]} />
+ * @family Realtime
+ */
+export function Timeline({ items }: { items: TimelineItem[] }) {
+  return (
+    <ol className="relative space-y-4 border-l pl-4" data-testid="timeline">
+      {items.map((item, index) => (
+        <li key={item.id} className="relative">
+          <span
+            className={cn(
+              'absolute top-1.5 -left-[21px] size-2.5 rounded-full border bg-background',
+              index === 0 ? 'border-primary bg-primary' : 'border-muted-foreground/40'
+            )}
+          />
+          <div className="text-sm font-medium">{item.title}</div>
+          {item.description ? (
+            <p className="text-muted-foreground text-xs">{item.description}</p>
+          ) : null}
+          {item.time ? (
+            <p className="text-muted-foreground mt-0.5 text-[11px]">{item.time}</p>
+          ) : null}
+        </li>
+      ))}
+    </ol>
+  )
+}

package/src/products/tree-view.tsx

@@ -0,0 +1,62 @@
+
+import * as React from 'react'
+import { ChevronRight } from 'lucide-react'
+
+import { cn } from '@mohou/ui/lib/utils'
+
+export type TreeNode = {
+  id: string
+  label: string
+  children?: TreeNode[]
+}
+
+function Node({
+  node,
+  depth,
+}: {
+  node: TreeNode
+  depth: number
+}) {
+  const [open, setOpen] = React.useState(true)
+  const hasChildren = Boolean(node.children?.length)
+  return (
+    <div>
+      <button
+        type="button"
+        className="flex w-full items-center gap-1 rounded-md px-1 py-0.5 text-left text-sm hover:bg-muted"
+        style={{ paddingLeft: depth * 12 }}
+        onClick={() => hasChildren && setOpen(value => !value)}
+      >
+        <ChevronRight
+          className={cn(
+            'size-3.5 text-muted-foreground transition',
+            hasChildren ? (open ? 'rotate-90' : '') : 'opacity-0'
+          )}
+        />
+        {node.label}
+      </button>
+      {open && hasChildren
+        ? node.children!.map(child => (
+          <Node key={child.id} node={child} depth={depth + 1} />
+        ))
+        : null}
+    </div>
+  )
+}
+
+/**
+ * Generic expandable node list.
+ * @when Any hierarchy without file semantics. Files → `FileTree`.
+ * @example
+ * <TreeView nodes={[{ id: "a", label: "华东" }]} />
+ * @family Data & tables
+ */
+export function TreeView({ nodes }: { nodes: TreeNode[] }) {
+  return (
+    <div data-testid="tree-view">
+      {nodes.map(node => (
+        <Node key={node.id} node={node} depth={0} />
+      ))}
+    </div>
+  )
+}