@brainfish-ai/devdoc 0.1.42 → 0.1.43

package/renderer/components/docs/mdx/highlight.tsx

@@ -1,151 +0,0 @@
-'use client'
-
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-type HighlightVariant = 'marker' | 'underline' | 'box' | 'gradient'
-type HighlightColor = 'yellow' | 'blue' | 'green' | 'pink' | 'orange' | 'purple' | 'red'
-
-interface HighlightProps {
-  children: ReactNode
-  /** Highlight style variant */
-  variant?: HighlightVariant
-  /** Highlight color */
-  color?: HighlightColor
-  /** Custom className */
-  className?: string
-  /** Whether to animate the highlight */
-  animated?: boolean
-}
-
-const colorStyles: Record<HighlightColor, Record<HighlightVariant, string>> = {
-  yellow: {
-    marker: 'bg-yellow-200/70 dark:bg-yellow-500/30',
-    underline: 'decoration-yellow-400 dark:decoration-yellow-500',
-    box: 'ring-yellow-400 dark:ring-yellow-500',
-    gradient: 'from-yellow-200/80 to-yellow-300/80 dark:from-yellow-500/30 dark:to-yellow-600/30',
-  },
-  blue: {
-    marker: 'bg-blue-200/70 dark:bg-blue-500/30',
-    underline: 'decoration-blue-400 dark:decoration-blue-500',
-    box: 'ring-blue-400 dark:ring-blue-500',
-    gradient: 'from-blue-200/80 to-blue-300/80 dark:from-blue-500/30 dark:to-blue-600/30',
-  },
-  green: {
-    marker: 'bg-green-200/70 dark:bg-green-500/30',
-    underline: 'decoration-green-400 dark:decoration-green-500',
-    box: 'ring-green-400 dark:ring-green-500',
-    gradient: 'from-green-200/80 to-green-300/80 dark:from-green-500/30 dark:to-green-600/30',
-  },
-  pink: {
-    marker: 'bg-pink-200/70 dark:bg-pink-500/30',
-    underline: 'decoration-pink-400 dark:decoration-pink-500',
-    box: 'ring-pink-400 dark:ring-pink-500',
-    gradient: 'from-pink-200/80 to-pink-300/80 dark:from-pink-500/30 dark:to-pink-600/30',
-  },
-  orange: {
-    marker: 'bg-orange-200/70 dark:bg-orange-500/30',
-    underline: 'decoration-orange-400 dark:decoration-orange-500',
-    box: 'ring-orange-400 dark:ring-orange-500',
-    gradient: 'from-orange-200/80 to-orange-300/80 dark:from-orange-500/30 dark:to-orange-600/30',
-  },
-  purple: {
-    marker: 'bg-purple-200/70 dark:bg-purple-500/30',
-    underline: 'decoration-purple-400 dark:decoration-purple-500',
-    box: 'ring-purple-400 dark:ring-purple-500',
-    gradient: 'from-purple-200/80 to-purple-300/80 dark:from-purple-500/30 dark:to-purple-600/30',
-  },
-  red: {
-    marker: 'bg-red-200/70 dark:bg-red-500/30',
-    underline: 'decoration-red-400 dark:decoration-red-500',
-    box: 'ring-red-400 dark:ring-red-500',
-    gradient: 'from-red-200/80 to-red-300/80 dark:from-red-500/30 dark:to-red-600/30',
-  },
-}
-
-/**
- * Highlight - Text highlighter component
- * 
- * Variants:
- * - marker: Background highlight like a marker pen
- * - underline: Wavy or straight underline
- * - box: Outlined box around text
- * - gradient: Gradient background highlight
- */
-export function Highlight({
-  children,
-  variant = 'marker',
-  color = 'yellow',
-  className,
-  animated = false,
-}: HighlightProps) {
-  const colorStyle = colorStyles[color]?.[variant] || colorStyles.yellow[variant]
-
-  const baseStyles = {
-    marker: cn(
-      'docs-highlight docs-highlight-marker',
-      'px-1 py-0.5 rounded-sm',
-      colorStyle,
-      animated && 'animate-pulse',
-      className
-    ),
-    underline: cn(
-      'docs-highlight docs-highlight-underline',
-      'underline decoration-wavy decoration-2 underline-offset-4',
-      colorStyle,
-      className
-    ),
-    box: cn(
-      'docs-highlight docs-highlight-box',
-      'px-1 py-0.5 ring-2 rounded',
-      colorStyle,
-      className
-    ),
-    gradient: cn(
-      'docs-highlight docs-highlight-gradient',
-      'px-1 py-0.5 rounded-sm bg-gradient-to-r',
-      colorStyle,
-      animated && 'animate-pulse',
-      className
-    ),
-  }
-
-  return (
-    <span className={baseStyles[variant]}>
-      {children}
-    </span>
-  )
-}
-
-/**
- * Marker - Shorthand for marker-style highlight
- */
-export function Marker({
-  children,
-  color = 'yellow',
-  className,
-}: Omit<HighlightProps, 'variant'>) {
-  return (
-    <Highlight variant="marker" color={color} className={className}>
-      {children}
-    </Highlight>
-  )
-}
-
-/**
- * Underline - Shorthand for underline-style highlight
- */
-export function Underline({
-  children,
-  color = 'orange',
-  className,
-}: Omit<HighlightProps, 'variant'>) {
-  return (
-    <Highlight variant="underline" color={color} className={className}>
-      {children}
-    </Highlight>
-  )
-}
-
-// Export all components
-export default Highlight

package/renderer/components/docs/mdx/iframe.tsx

@@ -1,134 +0,0 @@
-'use client'
-
-import React from 'react'
-import { cn } from '@/lib/utils'
-
-/**
- * Iframe Component for MDX Documentation
- * 
- * Embed external content like videos, demos, or interactive widgets.
- */
-
-interface IframeProps {
-  src: string
-  title?: string
-  width?: string | number
-  height?: string | number
-  aspectRatio?: '16/9' | '4/3' | '1/1' | '9/16' | string
-  allowFullScreen?: boolean
-  allow?: string
-  className?: string
-  frameBorder?: string | number
-}
-
-export function Iframe({
-  src,
-  title = 'Embedded content',
-  width,
-  height,
-  aspectRatio,
-  allowFullScreen = true,
-  allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
-  className,
-  frameBorder = 0,
-}: IframeProps) {
-  // Determine sizing approach
-  const hasFixedSize = width || height
-  const useAspectRatio = aspectRatio && !hasFixedSize
-
-  // Convert numeric values to pixels
-  const getSize = (value: string | number | undefined) => {
-    if (value === undefined) return undefined
-    if (typeof value === 'number') return `${value}px`
-    return value
-  }
-
-  const containerStyle: React.CSSProperties = useAspectRatio
-    ? { aspectRatio }
-    : {}
-
-  const iframeStyle: React.CSSProperties = {
-    width: getSize(width) || (useAspectRatio ? '100%' : undefined),
-    height: getSize(height) || (useAspectRatio ? '100%' : undefined),
-  }
-
-  return (
-    <div
-      className={cn(
-        'docs-iframe my-4 overflow-hidden rounded-lg border border-border',
-        useAspectRatio && 'w-full',
-        className
-      )}
-      style={containerStyle}
-    >
-      <iframe
-        src={src}
-        title={title}
-        style={iframeStyle}
-        frameBorder={frameBorder}
-        allowFullScreen={allowFullScreen}
-        allow={allow}
-        className={cn(
-          'docs-iframe-content',
-          useAspectRatio && 'w-full h-full'
-        )}
-      />
-    </div>
-  )
-}
-
-// Video embed component - convenience wrapper for common video platforms
-interface VideoProps {
-  src: string
-  title?: string
-  aspectRatio?: '16/9' | '4/3'
-  className?: string
-}
-
-export function Video({ src, title = 'Video', aspectRatio = '16/9', className }: VideoProps) {
-  // Convert YouTube watch URLs to embed URLs
-  let embedSrc = src
-  if (src.includes('youtube.com/watch')) {
-    const videoId = new URL(src).searchParams.get('v')
-    if (videoId) {
-      embedSrc = `https://www.youtube.com/embed/${videoId}`
-    }
-  } else if (src.includes('youtu.be/')) {
-    const videoId = src.split('youtu.be/')[1]?.split('?')[0]
-    if (videoId) {
-      embedSrc = `https://www.youtube.com/embed/${videoId}`
-    }
-  } else if (src.includes('vimeo.com/') && !src.includes('player.vimeo.com')) {
-    const videoId = src.split('vimeo.com/')[1]?.split('?')[0]
-    if (videoId) {
-      embedSrc = `https://player.vimeo.com/video/${videoId}`
-    }
-  }
-
-  return (
-    <Iframe
-      src={embedSrc}
-      title={title}
-      aspectRatio={aspectRatio}
-      className={cn('docs-video', className)}
-    />
-  )
-}
-
-// Loom embed component
-interface LoomProps {
-  id: string
-  title?: string
-  className?: string
-}
-
-export function Loom({ id, title = 'Loom video', className }: LoomProps) {
-  return (
-    <Iframe
-      src={`https://www.loom.com/embed/${id}`}
-      title={title}
-      aspectRatio="16/9"
-      className={cn('docs-loom', className)}
-    />
-  )
-}

package/renderer/components/docs/mdx/image.tsx

@@ -1,235 +0,0 @@
-'use client'
-
-import React from 'react'
-import { cn } from '@/lib/utils'
-
-/**
- * Image Component for MDX Documentation
- * 
- * Supports resizing via wsrv.nl image proxy for optimization.
- */
-
-interface ImageProps {
-  src: string
-  alt: string
-  width?: number
-  height?: number
-  maxWidth?: number
-  maxHeight?: number
-  caption?: string
-  className?: string
-  rounded?: boolean
-  shadow?: boolean
-  border?: boolean
-  align?: 'left' | 'center' | 'right'
-  optimize?: boolean // Enable wsrv.nl optimization (default: true for external images)
-  quality?: number // Image quality 1-100 (default: 80)
-}
-
-/**
- * Get resized image URL using wsrv.nl proxy
- */
-function getResizedImageUrl(
-  imageUrl: string,
-  options: {
-    width?: number
-    height?: number
-    maxWidth?: number
-    maxHeight?: number
-    quality?: number
-  } = {}
-): string {
-  const { width, height, maxWidth, maxHeight, quality = 80 } = options
-
-  // Skip if already a wsrv.nl URL
-  if (imageUrl.startsWith('https://wsrv.nl')) {
-    return imageUrl
-  }
-
-  // For data URLs, we can't use wsrv.nl
-  if (imageUrl.startsWith('data:')) {
-    return imageUrl
-  }
-
-  // For relative URLs (local images), don't proxy
-  if (imageUrl.startsWith('/') || imageUrl.startsWith('./') || imageUrl.startsWith('../')) {
-    return imageUrl
-  }
-
-  // Build wsrv.nl URL
-  const proxyUrl = new URL('https://wsrv.nl/')
-  proxyUrl.searchParams.set('url', imageUrl)
-
-  // Set dimensions
-  if (width) {
-    proxyUrl.searchParams.set('w', width.toString())
-  } else if (maxWidth) {
-    proxyUrl.searchParams.set('w', maxWidth.toString())
-  }
-
-  if (height) {
-    proxyUrl.searchParams.set('h', height.toString())
-  } else if (maxHeight) {
-    proxyUrl.searchParams.set('h', maxHeight.toString())
-  }
-
-  // If only max dimensions are set, use fit=inside to maintain aspect ratio
-  if ((maxWidth || maxHeight) && !width && !height) {
-    proxyUrl.searchParams.set('fit', 'inside')
-    proxyUrl.searchParams.set('n', '-1') // Don't upscale
-  }
-
-  // Quality and format
-  proxyUrl.searchParams.set('q', quality.toString())
-
-  return proxyUrl.toString()
-}
-
-export function Image({
-  src,
-  alt,
-  width,
-  height,
-  maxWidth,
-  maxHeight,
-  caption,
-  className,
-  rounded = true,
-  shadow = false,
-  border = false,
-  align = 'center',
-  optimize = true,
-  quality = 80,
-}: ImageProps) {
-  // Determine if we should optimize
-  const isExternalImage = src.startsWith('http://') || src.startsWith('https://')
-  const shouldOptimize = optimize && isExternalImage
-
-  // Get the final image URL
-  const imageSrc = shouldOptimize
-    ? getResizedImageUrl(src, { width, height, maxWidth, maxHeight, quality })
-    : src
-
-  const alignmentClasses = {
-    left: 'mr-auto',
-    center: 'mx-auto',
-    right: 'ml-auto',
-  }
-
-  const imageElement = (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={imageSrc}
-      alt={alt}
-      width={width}
-      height={height}
-      style={{
-        maxWidth: maxWidth ? `${maxWidth}px` : '100%',
-        maxHeight: maxHeight ? `${maxHeight}px` : undefined,
-        height: 'auto',
-      }}
-      className={cn(
-        'docs-image',
-        rounded && 'rounded-lg',
-        shadow && 'shadow-lg',
-        border && 'border border-border',
-        alignmentClasses[align],
-        className
-      )}
-      loading="lazy"
-    />
-  )
-
-  if (caption) {
-    return (
-      <figure className={cn('docs-image-figure my-6', alignmentClasses[align])}>
-        {imageElement}
-        <figcaption className="docs-image-caption mt-2 text-center text-sm text-muted-foreground">
-          {caption}
-        </figcaption>
-      </figure>
-    )
-  }
-
-  return <div className={cn('docs-image-wrapper my-4', alignmentClasses[align])}>{imageElement}</div>
-}
-
-/**
- * Screenshot component - convenience wrapper with default styling
- */
-export function Screenshot({
-  src,
-  alt,
-  caption,
-  maxWidth = 800,
-  className,
-  ...props
-}: Omit<ImageProps, 'shadow' | 'border' | 'rounded'>) {
-  return (
-    <Image
-      src={src}
-      alt={alt}
-      caption={caption}
-      maxWidth={maxWidth}
-      rounded
-      shadow
-      border
-      className={cn('docs-screenshot', className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Logo component - for displaying logos without optimization artifacts
- */
-export function Logo({
-  src,
-  alt,
-  width = 200,
-  height,
-  className,
-  ...props
-}: Omit<ImageProps, 'optimize' | 'quality' | 'shadow' | 'rounded' | 'border'>) {
-  return (
-    <Image
-      src={src}
-      alt={alt}
-      width={width}
-      height={height}
-      optimize={false}
-      rounded={false}
-      shadow={false}
-      border={false}
-      className={cn('docs-logo', className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Icon component - small images/icons
- */
-export function Icon({
-  src,
-  alt,
-  size = 24,
-  className,
-}: {
-  src: string
-  alt: string
-  size?: number
-  className?: string
-}) {
-  return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={src}
-      alt={alt}
-      width={size}
-      height={size}
-      className={cn('docs-icon inline-block', className)}
-      loading="lazy"
-    />
-  )
-}