sparkdesign 0.0.1 → 0.2.6

package/cli/registry/chat/image-attachment.tsx

@@ -0,0 +1,166 @@
+import { forwardRef, useState, useCallback, useEffect } from 'react'
+import type { HTMLAttributes } from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from '@/lib/utils'
+import type { ReactNode } from 'react'
+import { CloseLine, CloseLargeLine } from '../basic/icons-inline'
+import { IconButton } from '../basic/icon-button'
+
+const SIZE_CLASS = {
+  sm: 'w-12 h-12',
+  md: 'w-16 h-16',
+  lg: 'w-20 h-20',
+} as const
+
+const PREVIEW_MAX = 'max-w-[90vw] max-h-[90vh] object-contain'
+const closeClass = 'h-2.5 w-2.5 text-text-secondary'
+const closeLargeClass = 'h-4 w-4 text-text-secondary'
+
+export interface ImageAttachmentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  src: string
+  alt?: string
+  onRemove?: (e: React.MouseEvent) => void
+  previewable?: boolean
+  onClick?: (e: React.MouseEvent) => void
+  size?: keyof typeof SIZE_CLASS
+  closeIcon?: ReactNode
+  closeLargeIcon?: ReactNode
+}
+
+export const ImageAttachment = forwardRef<HTMLDivElement, ImageAttachmentProps>(
+  (
+    {
+      src,
+      alt = '',
+      onRemove,
+      previewable = true,
+      onClick,
+      size = 'sm',
+      className,
+      closeIcon,
+      closeLargeIcon,
+      ...props
+    },
+    ref
+  ) => {
+    const [previewOpen, setPreviewOpen] = useState(false)
+    const defaultClose = closeIcon ?? <CloseLine className={closeClass} />
+    const defaultCloseLarge = closeLargeIcon ?? <CloseLargeLine className={closeLargeClass} />
+    const showClose = typeof onRemove === 'function'
+
+    const openPreview = useCallback(() => {
+      if (previewable) setPreviewOpen(true)
+    }, [previewable])
+
+    const closePreview = useCallback(() => setPreviewOpen(false), [])
+
+    const handleThumbClick = useCallback(
+      (e: React.MouseEvent) => {
+        onClick?.(e)
+        if (!e.defaultPrevented && previewable) openPreview()
+      },
+      [onClick, previewable, openPreview]
+    )
+
+    const handleRemove = useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation()
+        onRemove?.(e)
+      },
+      [onRemove]
+    )
+
+    useEffect(() => {
+      if (!previewOpen) return
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') closePreview()
+      }
+      window.addEventListener('keydown', onKeyDown)
+      return () => window.removeEventListener('keydown', onKeyDown)
+    }, [previewOpen, closePreview])
+
+    const previewPortal =
+      previewOpen && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              className="fixed inset-0 z-[9999] flex items-center justify-center bg-bg-mask"
+              role="dialog"
+              aria-modal="true"
+              aria-label="图片预览"
+              onClick={(e) => {
+                if (e.target === e.currentTarget) closePreview()
+              }}
+              onKeyDown={(e) => e.key === 'Escape' && closePreview()}
+            >
+              <img
+                src={src}
+                alt={alt}
+                className={cn('rounded-lg shadow-xl', PREVIEW_MAX)}
+                onClick={(e) => e.stopPropagation()}
+                draggable={false}
+              />
+              <IconButton
+                variant="tertiary"
+                size="md"
+                rounded="pill"
+                icon={defaultCloseLarge}
+                onClick={closePreview}
+                aria-label="关闭预览"
+                className="absolute top-4 right-4 bg-bg-base border border-border-tertiary shadow-sm"
+              />
+            </div>,
+            document.body
+          )
+        : null
+
+    return (
+      <>
+        <div
+          ref={ref}
+          role={previewable ? 'button' : undefined}
+          tabIndex={previewable ? 0 : undefined}
+          className={cn(
+            'relative group shrink-0',
+            previewable && 'cursor-pointer',
+            className
+          )}
+          onClick={handleThumbClick}
+          onKeyDown={
+            previewable
+              ? (e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    openPreview()
+                  }
+                }
+              : undefined
+          }
+          {...props}
+        >
+          <img
+            src={src}
+            alt={alt}
+            className={cn(
+              'rounded-lg object-cover border border-border-tertiary',
+              SIZE_CLASS[size]
+            )}
+            draggable={false}
+          />
+          {showClose && (
+            <button
+              type="button"
+              onClick={handleRemove}
+              aria-label="移除"
+              className="absolute -top-0.5 -right-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-bg-base border border-border-tertiary shadow-sm opacity-0 group-hover:opacity-100 transition-opacity hover:bg-fill-secondary"
+            >
+              {defaultClose}
+            </button>
+          )}
+        </div>
+        {previewPortal}
+      </>
+    )
+  }
+)
+
+ImageAttachment.displayName = 'ImageAttachment'

package/cli/registry/chat/image-generating.tsx

@@ -0,0 +1,281 @@
+import { useEffect, useRef } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { motion } from 'framer-motion'
+import { SparklingLine } from '../basic/icons-inline'
+
+export interface ImageGeneratingProps extends HTMLAttributes<HTMLDivElement> {
+  width?: string
+  height?: string
+  speed?: number
+  caption?: string
+  captionClassName?: string
+  showOverlay?: boolean
+  overlayText?: string
+  sparklingIcon?: ReactNode
+}
+
+function cn(...inputs: (string | undefined | false)[]): string {
+  return inputs.filter(Boolean).join(' ')
+}
+
+const defaultSparkling = <SparklingLine className="h-5 w-5 text-text-on-primary" />
+
+export function ImageGenerating({
+  width = 'var(--spacing-80)',
+  height = 'var(--spacing-60)',
+  speed = 1.0,
+  caption = 'Qoder is drawing...',
+  captionClassName,
+  className,
+  style: styleProp,
+  showOverlay = false,
+  overlayText,
+  sparklingIcon = defaultSparkling,
+  ...props
+}: ImageGeneratingProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (typeof CSS !== 'undefined' && CSS.registerProperty) {
+      try {
+        CSS.registerProperty({ name: '--a', syntax: '<angle>', inherits: true, initialValue: '0deg' })
+        CSS.registerProperty({ name: '--l', syntax: '<number>', inherits: true, initialValue: '0' })
+        CSS.registerProperty({ name: '--x', syntax: '<length>', inherits: false, initialValue: '0' })
+        CSS.registerProperty({ name: '--y', syntax: '<length>', inherits: false, initialValue: '0' })
+        CSS.registerProperty({ name: '--o', syntax: '<number>', inherits: false, initialValue: '0' })
+        CSS.registerProperty({ name: '--value', syntax: '<angle>', inherits: true, initialValue: '0deg' })
+        CSS.registerProperty({ name: '--width-ratio', syntax: '<number>', inherits: true, initialValue: '0' })
+        CSS.registerProperty({ name: '--scale', syntax: '<number>', inherits: true, initialValue: '0' })
+      } catch {
+        // ignore
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    const updateSize = () => {
+      const rect = container.getBoundingClientRect()
+      if (rect.width > 0 && rect.height > 0) {
+        const size = Math.max(rect.width, rect.height)
+        container.style.setProperty('--actual-size', `${size}px`)
+      }
+    }
+    const isPercent = (typeof width === 'string' && width.includes('%')) || (typeof height === 'string' && height.includes('%'))
+    let resizeObserver: ResizeObserver | null = null
+    const setup = () => {
+      updateSize()
+      resizeObserver = new ResizeObserver(updateSize)
+      resizeObserver.observe(container)
+    }
+    if (isPercent) {
+      const id = requestAnimationFrame(() => setup())
+      return () => {
+        cancelAnimationFrame(id)
+        resizeObserver?.disconnect()
+      }
+    }
+    setup()
+    return () => resizeObserver?.disconnect()
+  }, [width, height])
+
+  return (
+    <>
+      <style>{`
+        @keyframes ai {
+          from { --a: 360deg; --l: 0.35; --o: 1; }
+          30% { --l: 1.5; }
+          70% { --o: 0.4; --l: 0.05; }
+          98% { --o: 0.7; }
+          to { --a: 0deg; --l: 0.35; --o: 1; }
+        }
+        @keyframes ring {
+          from { --value: var(--start); --scale: 1; }
+          50% { --scale: 1.2; --width-ratio: 1.5; }
+          70% { --scale: 1; --value: calc(var(--start) + 180deg); --width-ratio: 1; }
+          80% { --scale: 1.2; --width-ratio: 1.5; }
+          to { --value: calc(var(--start) + 360deg); --scale: 1; --width-ratio: 1; }
+        }
+        .image-generating-container {
+          --s: var(--actual-size, max(var(--container-width), var(--container-height)));
+          --p: calc(var(--s) / 4);
+          --radius: calc(var(--s) * 0.25);
+          --count: 4;
+          --width: calc(var(--s) * 0.025);
+          --duration: calc(8s / var(--image-generating-speed, 1));
+          --ai-duration: calc(5.5s / var(--image-generating-speed, 1));
+          width: var(--container-width);
+          height: var(--container-height);
+          --bg-color: color-mix(in srgb, var(--color-primary), transparent 92%);
+          background: radial-gradient(60% 75% at center, var(--bg-color) 50%, transparent 50%),
+            radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);
+          overflow: hidden;
+          position: relative;
+          border-radius: var(--radius-xl);
+        }
+        .image-generating-container .fluid-inner {
+          overflow: hidden;
+          background: var(--color-bg-base);
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: grid;
+          place-items: center;
+          border-radius: var(--radius-xl);
+        }
+        .image-generating-container .c {
+          opacity: 0.9;
+          position: absolute;
+          width: calc(var(--s) * 0.4);
+          aspect-ratio: 1;
+          border-radius: 50%;
+          --offset-per-item: calc(360deg / var(--count));
+          --current-angle-offset: calc(var(--offset-per-item) * var(--i) + var(--a));
+          translate: calc(cos(var(--current-angle-offset)) * var(--radius) + var(--x, 0))
+            calc(sin(var(--current-angle-offset)) * var(--radius) * -1);
+          scale: calc(0.6 + var(--l));
+          animation: ai var(--ai-duration) cubic-bezier(0.45, -0.35, 0.16, 1.5) infinite;
+          transition: opacity 0.3s linear;
+          opacity: var(--o, 1);
+        }
+        .image-generating-container .c1 {
+          background: radial-gradient(50% 50% at center, var(--color-primary), color-mix(in srgb, var(--color-primary), transparent 30%));
+          --x: calc(var(--s) * 0.04);
+          width: calc(var(--s) * 0.6);
+          animation-timing-function: cubic-bezier(0.12, 0.32, 0.68, 0.24);
+        }
+        .image-generating-container .c2 {
+          background: radial-gradient(50% 50% at center, var(--color-primary-active), color-mix(in srgb, var(--color-primary-active), var(--color-bg-base) 45%));
+          width: calc(var(--s) * 0.55);
+        }
+        .image-generating-container .c3 {
+          background: radial-gradient(50% 50% at center, var(--color-primary-hover), transparent);
+          width: calc(var(--s) * 0.2);
+          opacity: 0.6;
+          --x: calc(var(--s) * -0.04);
+        }
+        .image-generating-container .c4 {
+          background: var(--color-primary-border-hover);
+          animation-timing-function: cubic-bezier(0.39, -0.03, 0.75, 0.47);
+        }
+        .image-generating-container .glass {
+          overflow: hidden;
+          position: absolute;
+          inset: 0;
+          backdrop-filter: blur(calc(var(--s) * 0.12));
+          box-shadow: 0 0 calc(var(--s) * 0.2) color-mix(in srgb, var(--color-text-base), transparent 70%);
+          border-radius: var(--radius-xl);
+          pointer-events: none;
+        }
+        .image-generating-container .glass::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          --c: color-mix(in srgb, var(--color-text-base), transparent 97%);
+          --w: 0.0625rem;
+          --g: 0.1875rem;
+          background: repeating-linear-gradient(
+            var(--c), var(--c), var(--w), transparent var(--w), transparent calc(var(--w) + var(--g))
+          );
+          border-radius: var(--radius-xl);
+        }
+        .image-generating-container .rings {
+          aspect-ratio: 1;
+          border-radius: 50%;
+          position: absolute;
+          inset: 0;
+          perspective: calc(var(--s) * 2.75);
+          opacity: 0.9;
+        }
+        .image-generating-container .rings::before,
+        .image-generating-container .rings::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          border-radius: 50%;
+          --width-ratio: 1;
+          border: calc(var(--width) * var(--width-ratio)) solid transparent;
+          mask: linear-gradient(var(--color-image-generating-mask, var(--color-bg-base)) 0 0) padding-box, linear-gradient(var(--color-image-generating-mask, var(--color-bg-base)) 0 0);
+          background: linear-gradient(
+            var(--color-bg-base),
+            var(--color-primary),
+            var(--color-primary-active),
+            var(--color-primary-hover)
+          ) border-box;
+          mask-composite: exclude;
+          animation: ring var(--duration) ease-in-out infinite;
+          --start: 180deg;
+          --value: var(--start);
+          --scale: 1;
+          transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale));
+        }
+        .image-generating-container .rings::before { --start: 180deg; }
+        .image-generating-container .rings::after { --start: 90deg; }
+        .image-generating-container .content-overlay {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: var(--spacing-3);
+          z-index: 2;
+          pointer-events: none;
+        }
+        .image-generating-container .content-overlay .caption {
+          font-size: var(--font-size-xs);
+          font-weight: 500;
+          color: var(--color-text-on-primary);
+        }
+        .image-generating-container .remaining-overlay {
+          background: var(--color-bg-mask);
+          border-radius: var(--radius-xl);
+        }
+        .image-generating-container .remaining-text {
+          font-size: var(--font-size-3xl);
+          font-weight: 600;
+          color: var(--color-text-on-primary);
+        }
+      `}</style>
+      <div
+        ref={containerRef}
+        className={cn('image-generating-container', className)}
+        style={{
+          ['--container-width' as string]: width,
+          ['--container-height' as string]: height,
+          ['--image-generating-speed' as string]: String(speed),
+          ...(styleProp && typeof styleProp === 'object' ? styleProp : {}),
+        }}
+        {...props}
+      >
+        <div className="fluid-inner">
+          <div className="c c4" style={{ ['--i' as string]: 0 }} />
+          <div className="c c1" style={{ ['--i' as string]: 1 }} />
+          <div className="c c2" style={{ ['--i' as string]: 2 }} />
+          <div className="c c3" style={{ ['--i' as string]: 3 }} />
+          <div className="rings" />
+        </div>
+        <div className="glass" />
+        {showOverlay ? (
+          <div className="content-overlay remaining-overlay">
+            <span className="remaining-text">{overlayText}</span>
+          </div>
+        ) : (
+          <div className="content-overlay">
+            <motion.span
+              className="inline-flex items-center justify-center"
+              animate={{ scale: [1, 1.08, 1], opacity: [0.9, 1, 0.9] }}
+              transition={{ duration: 1.2, repeat: Infinity, ease: [0.16, 1, 0.3, 1] as const }}
+            >
+              {sparklingIcon}
+            </motion.span>
+            <span className={cn('caption', captionClassName)}>{caption}</span>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+ImageGenerating.displayName = 'ImageGenerating'

package/cli/registry/chat/markdown.tsx

@@ -0,0 +1,146 @@
+import type { Components } from 'react-markdown'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
+import { cn } from '@/lib/utils'
+import { Scrollbar } from '../basic/scrollbar'
+
+export interface MarkdownBodyProps {
+  children: string
+  className?: string
+}
+
+const markdownComponents: Components = {
+  p: ({ children }) => (
+    <p className="text-sm leading-sm text-text [&:not(:first-child)]:mt-6 last:mb-0">{children}</p>
+  ),
+  h1: ({ children }) => (
+    <h1 className="scroll-m-20 text-4xl font-medium tracking-tight text-text">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="scroll-m-20 border-b border-border-secondary pb-2 text-3xl font-semibold tracking-tight text-text first:mt-0 [&:not(:first-child)]:mt-10">
+      {children}
+    </h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight text-text [&:not(:first-child)]:mt-8">
+      {children}
+    </h3>
+  ),
+  h4: ({ children }) => (
+    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight text-text [&:not(:first-child)]:mt-6">
+      {children}
+    </h4>
+  ),
+  h5: ({ children }) => (
+    <h5 className="scroll-m-20 text-lg font-semibold tracking-tight text-text-secondary [&:not(:first-child)]:mt-4">
+      {children}
+    </h5>
+  ),
+  h6: ({ children }) => (
+    <h6 className="scroll-m-20 text-base font-semibold tracking-tight text-text-tertiary uppercase [&:not(:first-child)]:mt-4">
+      {children}
+    </h6>
+  ),
+  blockquote: ({ children }) => (
+    <blockquote className="mt-6 border-l-2 border-border-secondary pl-6 italic text-text-secondary">
+      {children}
+    </blockquote>
+  ),
+  ul: ({ className, children }) => (
+    <ul
+      className={cn(
+        'my-6 ml-6 text-text [&>li]:mt-2',
+        String(className ?? '').includes('contains-task-list') ? 'list-none' : 'list-disc'
+      )}
+    >
+      {children}
+    </ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="my-6 ml-6 list-decimal text-text [&>li]:mt-2">{children}</ol>
+  ),
+  li: ({ className, children }) => (
+    <li
+      className={cn(
+        'leading-sm',
+        String(className ?? '').includes('task-list-item') &&
+          'list-none flex items-start gap-2 [&>input]:mt-0.5 [&>input]:shrink-0'
+      )}
+    >
+      {children}
+    </li>
+  ),
+  pre: ({ children }) => (
+    <Scrollbar
+      scrollbarVisibility="auto"
+      className="my-6 rounded-lg border border-border-tertiary bg-bg-base p-4 font-mono text-sm leading-sm text-text"
+    >
+      <pre className="m-0 font-mono text-sm leading-sm text-text border-0 bg-transparent p-0">
+        {children}
+      </pre>
+    </Scrollbar>
+  ),
+  code: ({ className, children, ...props }) => {
+    const isBlock = typeof className === 'string' && className.startsWith('language-')
+    if (!isBlock) {
+      return (
+        <code
+          className="relative rounded bg-fill-tertiary px-[0.3rem] py-[0.2rem] font-mono text-sm leading-sm font-semibold text-text"
+          {...props}
+        >
+          {children}
+        </code>
+      )
+    }
+    return (
+      <code className={cn(className, 'font-mono text-sm leading-sm')} {...props}>
+        {children}
+      </code>
+    )
+  },
+  table: ({ children }) => (
+    <Scrollbar
+      scrollbarVisibility="auto"
+      className="my-6 w-full rounded-md border border-border-secondary"
+    >
+      <table className="w-full border-collapse text-sm leading-sm text-text">{children}</table>
+    </Scrollbar>
+  ),
+  thead: ({ children }) => (
+    <thead className="border-b border-border-secondary bg-fill-tertiary">{children}</thead>
+  ),
+  tbody: ({ children }) => (
+    <tbody className="[&>tr]:border-b [&>tr]:border-border-tertiary">{children}</tbody>
+  ),
+  tr: ({ children }) => <tr>{children}</tr>,
+  th: ({ children }) => (
+    <th className="px-4 py-2 text-left font-semibold text-text">{children}</th>
+  ),
+  td: ({ children }) => <td className="px-4 py-2 text-text">{children}</td>,
+  a: ({ href, children }) => (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
+      {children}
+    </a>
+  ),
+  hr: () => <hr className="my-6 border-0 border-t border-border-secondary" />,
+  strong: ({ children }) => <strong className="font-semibold text-text">{children}</strong>,
+  em: ({ children }) => <em className="italic text-text">{children}</em>,
+}
+
+export function MarkdownBody({ children, className }: MarkdownBodyProps) {
+  return (
+    <div className={cn('markdown-body text-sm leading-sm text-text', className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeKatex]}
+        components={markdownComponents}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  )
+}
+
+MarkdownBody.displayName = 'MarkdownBody'

package/cli/registry/chat/mermaid-part.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useId, useMemo, useState, useRef, type ReactNode } from 'react'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { Button } from '../basic/button'
+import { FileList2Line } from '../basic/icons-inline'
+import { Scrollbar } from '../basic/scrollbar'
+import { useMermaidRender } from '../lib/use-mermaid-render'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 text-text-secondary'
+
+export interface MermaidPartProps {
+  content?: string
+  className?: string
+  headerIcon?: ReactNode
+  /** 布局风格，与 data-style 一致（如 soft/neutral/sharp），用于图表节点圆角等；不传则从 document 读取 */
+  dataStyle?: string
+}
+
+const defaultHeaderIcon = <FileList2Line className={ICON_CLASS} />
+
+export function MermaidPart({ content = '', className, headerIcon, dataStyle }: MermaidPartProps) {
+  const id = useId()
+  const normalized = useMemo(() => (content ?? '').trim(), [content])
+  const { svg, error } = useMermaidRender(normalized, id, dataStyle)
+  const [scale, setScale] = useState(1)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!svg || error || !containerRef.current) return
+    const el = containerRef.current
+    const handleWheel = (e: WheelEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault()
+        const delta = e.deltaY > 0 ? -0.1 : 0.1
+        setScale((prev) => Math.max(0.5, Math.min(3, Math.round((prev + delta) * 10) / 10)))
+      }
+    }
+    el.addEventListener('wheel', handleWheel, { passive: false })
+    return () => el.removeEventListener('wheel', handleWheel)
+  }, [svg, error])
+
+  const zoomIn = () => setScale((s) => Math.min(3, Math.round((s + 0.1) * 10) / 10))
+  const zoomOut = () => setScale((s) => Math.max(0.5, Math.round((s - 0.1) * 10) / 10))
+  const reset = () => setScale(1)
+
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={<span className="text-text-secondary">Mermaid</span>}
+      headerRight={
+        svg && !error ? (
+          <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+            <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); zoomOut() }} className="shrink-0 px-1.5 py-0.5 text-xs text-text-secondary hover:text-text" aria-label="Zoom out">−</Button>
+            <span className="text-xs text-text-secondary min-w-[var(--spacing-10)] text-center">{Math.round(scale * 100)}%</span>
+            <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); reset() }} className="shrink-0 px-1.5 py-0.5 text-xs text-text-secondary hover:text-text" aria-label="Reset">Reset</Button>
+            <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); zoomIn() }} className="shrink-0 px-1.5 py-0.5 text-xs text-text-secondary hover:text-text" aria-label="Zoom in">+</Button>
+          </div>
+        ) : undefined
+      }
+      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
+      className={className}
+    >
+      {!normalized ? (
+        <div className="text-xs text-text-tertiary">Mermaid content is empty.</div>
+      ) : error ? (
+        <div className="space-y-2">
+          <div className="text-xs text-text-secondary">Mermaid render unavailable.</div>
+          <div className="text-xs text-text-tertiary">{error}</div>
+          <pre className="m-0 whitespace-pre-wrap break-words font-mono text-xs text-text">{normalized}</pre>
+        </div>
+      ) : (
+        <div className="relative" ref={containerRef}>
+          <Scrollbar
+            scrollbarVisibility="auto"
+            maxHeight={600}
+            className="overflow-x-auto"
+          >
+            <div
+              className="flex justify-center items-center"
+              style={{ transform: `scale(${scale})`, transformOrigin: 'center top', minHeight: scale > 1 ? '100%' : 'auto' }}
+            >
+              <div dangerouslySetInnerHTML={{ __html: svg }} />
+            </div>
+          </Scrollbar>
+        </div>
+      )}
+    </CollapsibleCard>
+  )
+}
+
+MermaidPart.displayName = 'MermaidPart'