@usecross/docs 0.10.2 → 0.12.0

package/src/components/api/Docstring.tsx

@@ -0,0 +1,269 @@
+import type { GriffeDocstring, GriffeDocstringSection, GriffeDocstringElement, GriffeExpression } from '../../types'
+import { Markdown } from '../Markdown'
+
+/**
+ * Render a type annotation expression to string
+ */
+function renderExpression(expr: GriffeExpression | string | undefined): string {
+  if (!expr) return ''
+  if (typeof expr === 'string') return expr
+  if (expr.str) return expr.str
+  if (expr.canonical) return expr.canonical
+
+  const exprAny = expr as any
+
+  // Handle ExprName with member reference
+  if (expr.name && typeof expr.name === 'string') return expr.name
+
+  // Handle ExprBoolOp (like `config or StrawberryConfig()`)
+  if (exprAny.cls === 'ExprBoolOp' && exprAny.operator && Array.isArray(exprAny.values)) {
+    return exprAny.values.map((v: any) => renderExpression(v)).join(` ${exprAny.operator} `)
+  }
+
+  // Handle ExprBinOp (like `type | None`)
+  if (exprAny.cls === 'ExprBinOp' && exprAny.left && exprAny.right) {
+    const left = renderExpression(exprAny.left)
+    const right = renderExpression(exprAny.right)
+    const op = exprAny.operator || '|'
+    return `${left} ${op} ${right}`
+  }
+
+  // Handle ExprCall (like `StrawberryConfig()`)
+  if (exprAny.cls === 'ExprCall' && exprAny.function) {
+    const funcName = renderExpression(exprAny.function)
+    const args = Array.isArray(exprAny.arguments)
+      ? exprAny.arguments.map((a: any) => renderExpression(a)).join(', ')
+      : ''
+    return `${funcName}(${args})`
+  }
+
+  // Handle ExprAttribute (like contextlib.asynccontextmanager)
+  if (exprAny.cls === 'ExprAttribute' && Array.isArray(exprAny.values)) {
+    return exprAny.values.map((v: any) => renderExpression(v)).join('.')
+  }
+
+  // Handle ExprList and ExprTuple
+  if ('elements' in exprAny && Array.isArray(exprAny.elements)) {
+    const inner = exprAny.elements.map((el: any) => renderExpression(el)).join(', ')
+    return exprAny.cls === 'ExprTuple' ? `(${inner})` : `[${inner}]`
+  }
+
+  // Handle ExprDict
+  if (exprAny.cls === 'ExprDict' && Array.isArray(exprAny.keys) && Array.isArray(exprAny.values)) {
+    const pairs = exprAny.keys.map((k: any, i: number) =>
+      `${renderExpression(k)}: ${renderExpression(exprAny.values[i])}`
+    ).join(', ')
+    return `{${pairs}}`
+  }
+
+  // Handle ExprSubscript (like Dict[str, int])
+  if (exprAny.left && exprAny.slice) {
+    const left = renderExpression(exprAny.left)
+    const slice = renderExpression(exprAny.slice)
+    return `${left}[${slice}]`
+  }
+
+  // Handle slice expressions
+  if ('slice' in exprAny && exprAny.slice && !exprAny.left) {
+    return renderExpression(exprAny.slice)
+  }
+
+  // Fallback for unknown expressions
+  if (typeof expr === 'object') {
+    return JSON.stringify(expr)
+  }
+
+  return String(expr)
+}
+
+interface DocstringSectionProps {
+  section: GriffeDocstringSection
+}
+
+function DocstringSection({ section }: DocstringSectionProps) {
+  switch (section.kind) {
+    case 'text':
+      return (
+        <div className="prose prose-sm dark:prose-invert max-w-none">
+          <Markdown content={section.value as string} />
+        </div>
+      )
+
+    case 'parameters':
+      return (
+        <div className="mt-4">
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">Parameters</h4>
+          <dl className="space-y-2">
+            {(section.value as GriffeDocstringElement[])?.map((param) => (
+              <div key={param.name} className="grid grid-cols-[auto_1fr] gap-x-3">
+                <dt className="font-mono text-sm">
+                  <span className="text-orange-600 dark:text-orange-400">{param.name}</span>
+                  {param.annotation && (
+                    <span className="text-gray-500 dark:text-gray-400">
+                      {' '}({renderExpression(param.annotation)})
+                    </span>
+                  )}
+                </dt>
+                <dd className="text-sm text-gray-600 dark:text-gray-300">
+                  {param.description}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      )
+
+    case 'returns':
+      return (
+        <div className="mt-4">
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">Returns</h4>
+          <div className="text-sm text-gray-600 dark:text-gray-300">
+            {Array.isArray(section.value) ? (
+              (section.value as GriffeDocstringElement[]).map((ret, i) => (
+                <div key={i}>
+                  {ret.annotation && (
+                    <span className="font-mono text-green-600 dark:text-green-400">
+                      {renderExpression(ret.annotation)}
+                    </span>
+                  )}
+                  {ret.description && <span> - {ret.description}</span>}
+                </div>
+              ))
+            ) : (
+              section.value
+            )}
+          </div>
+        </div>
+      )
+
+    case 'raises':
+      return (
+        <div className="mt-4">
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">Raises</h4>
+          <dl className="space-y-2">
+            {(section.value as GriffeDocstringElement[])?.map((exc, i) => (
+              <div key={i} className="grid grid-cols-[auto_1fr] gap-x-3">
+                <dt className="font-mono text-sm text-red-600 dark:text-red-400">
+                  {exc.annotation ? renderExpression(exc.annotation) : exc.name}
+                </dt>
+                <dd className="text-sm text-gray-600 dark:text-gray-300">
+                  {exc.description}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      )
+
+    case 'examples':
+      return (
+        <div className="mt-4">
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">Examples</h4>
+          <pre className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm">
+            <code>{section.value as string}</code>
+          </pre>
+        </div>
+      )
+
+    case 'attributes':
+      return (
+        <div className="mt-4">
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">Attributes</h4>
+          <dl className="space-y-2">
+            {(section.value as GriffeDocstringElement[])?.map((attr) => (
+              <div key={attr.name} className="grid grid-cols-[auto_1fr] gap-x-3">
+                <dt className="font-mono text-sm">
+                  <span className="text-orange-600 dark:text-orange-400">{attr.name}</span>
+                  {attr.annotation && (
+                    <span className="text-gray-500 dark:text-gray-400">
+                      {' '}({renderExpression(attr.annotation)})
+                    </span>
+                  )}
+                </dt>
+                <dd className="text-sm text-gray-600 dark:text-gray-300">
+                  {attr.description}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      )
+
+    case 'deprecated':
+      return (
+        <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+          <h4 className="text-sm font-semibold text-yellow-800 dark:text-yellow-200 mb-1">Deprecated</h4>
+          <p className="text-sm text-yellow-700 dark:text-yellow-300">{section.value as string}</p>
+        </div>
+      )
+
+    case 'admonition':
+      return (
+        <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          {section.title && (
+            <h4 className="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-1">{section.title}</h4>
+          )}
+          <p className="text-sm text-blue-700 dark:text-blue-300">{section.value as string}</p>
+        </div>
+      )
+
+    default:
+      if (section.title) {
+        return (
+          <div className="mt-4">
+            <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">{section.title}</h4>
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {typeof section.value === 'string' ? section.value : JSON.stringify(section.value)}
+            </div>
+          </div>
+        )
+      }
+      return null
+  }
+}
+
+interface DocstringProps {
+  docstring: GriffeDocstring | undefined
+  /** Show raw text instead of parsed sections */
+  raw?: boolean
+  /** Only show the text/description part, skip parameters/returns/etc */
+  showOnlyText?: boolean
+  /** Additional CSS class */
+  className?: string
+}
+
+/**
+ * Renders a parsed docstring with sections for parameters, returns, raises, etc.
+ */
+export function Docstring({ docstring, raw = false, showOnlyText = false, className = '' }: DocstringProps) {
+  if (!docstring) return null
+
+  // If raw mode or no parsed sections, show raw value
+  if (raw || !docstring.parsed || docstring.parsed.length === 0) {
+    return (
+      <div className={`prose prose-sm dark:prose-invert max-w-none ${className}`}>
+        <p className="whitespace-pre-wrap text-gray-600 dark:text-gray-300">{docstring.value}</p>
+      </div>
+    )
+  }
+
+  // If showOnlyText, only render the first text section (the description)
+  if (showOnlyText) {
+    const firstTextSection = docstring.parsed.find(s => s.kind === 'text')
+    if (!firstTextSection) return null
+
+    return (
+      <div className={`prose prose-sm dark:prose-invert max-w-none ${className}`}>
+        <Markdown content={firstTextSection.value as string} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      {docstring.parsed.map((section, i) => (
+        <DocstringSection key={`${section.kind}-${i}`} section={section} />
+      ))}
+    </div>
+  )
+}

package/src/components/api/FunctionDoc.tsx

@@ -0,0 +1,130 @@
+import type { GriffeFunction, GriffeDocstringElement } from '../../types'
+import { Signature } from './Signature'
+import { Docstring } from './Docstring'
+import { ParameterTable } from './ParameterTable'
+import { CodeSpan } from './CodeSpan'
+import { Markdown } from '../Markdown'
+
+interface FunctionDocProps {
+  fn: GriffeFunction
+  /** Whether this is a method (inside a class) */
+  isMethod?: boolean
+  /** Show function name as title */
+  showName?: boolean
+  /** GitHub repo URL for source links */
+  githubUrl?: string
+  /** Additional CSS class */
+  className?: string
+  /** Override display path (e.g., for aliases to show alias name instead of target path) */
+  displayPath?: string
+}
+
+/**
+ * Renders documentation for a function or method matching strawberry.rocks design.
+ */
+export function FunctionDoc({ fn, isMethod = false, showName = true, githubUrl, className = '', displayPath }: FunctionDocProps) {
+  const hasParams = fn.parameters && fn.parameters.filter(p => p.name !== 'self').length > 0
+
+  // Get returns description from docstring
+  const returnsSection = fn.docstring?.parsed?.find(s => s.kind === 'returns')
+  const returnsValue = returnsSection?.value
+  const returnsDescription = Array.isArray(returnsValue)
+    ? (returnsValue[0] as GriffeDocstringElement)?.description
+    : undefined
+
+  // Get additional text sections (examples, notes, etc.) - all text sections after the first
+  const textSections = fn.docstring?.parsed?.filter(s => s.kind === 'text') || []
+  const additionalTextSections = textSections.slice(1) // Skip first (description)
+
+  // Get relative filepath for display (prefer package-relative path)
+  const relativeFilepath = fn.relative_package_filepath || fn.relative_filepath || fn.filepath
+
+  // Build GitHub URL for source link
+  const githubSourceUrl = githubUrl && relativeFilepath && fn.lineno
+    ? `${githubUrl}/blob/main/${relativeFilepath}#L${fn.lineno}-L${fn.endlineno || fn.lineno}`
+    : undefined
+
+  return (
+    <article id={fn.name} className={`scroll-mt-20 ${className}`}>
+      {/* Function name/title */}
+      {showName && (
+        <h1 className="font-mono text-2xl font-normal text-gray-900 dark:text-white mb-8">
+          {displayPath || fn.path || fn.name}
+        </h1>
+      )}
+
+      {/* Docstring - description text only */}
+      {fn.docstring && (
+        <div className="mb-6">
+          <Docstring docstring={fn.docstring} showOnlyText />
+        </div>
+      )}
+
+      {/* Returns section */}
+      {returnsDescription && (
+        <section className="mb-6">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Returns:
+          </h2>
+          <p className="text-gray-700 dark:text-gray-300">
+            {returnsDescription}
+          </p>
+        </section>
+      )}
+
+      {/* Signature section */}
+      <section className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Signature:
+        </h2>
+        <Signature fn={fn} />
+      </section>
+
+      {/* Parameters section */}
+      {hasParams && (
+        <section id="parameters" className="mb-6">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Parameters:
+          </h2>
+          <ParameterTable
+            parameters={fn.parameters!}
+            docstringSections={fn.docstring?.parsed}
+          />
+        </section>
+      )}
+
+      {/* Additional text sections (examples, notes, etc.) */}
+      {additionalTextSections.length > 0 && (
+        <section className="mb-6 prose prose-sm dark:prose-invert max-w-none">
+          {additionalTextSections.map((section, i) => (
+            <Markdown key={i} content={section.value as string} />
+          ))}
+        </section>
+      )}
+
+      {/* Footer with file path and GitHub link (only for top-level functions) */}
+      {!isMethod && relativeFilepath && (
+        <footer className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 space-y-4">
+          <p className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+              File path:
+            </span>
+            <CodeSpan allowCopy>{relativeFilepath}</CodeSpan>
+          </p>
+          {githubSourceUrl && (
+            <p>
+              <a
+                href={githubSourceUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm font-semibold text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 uppercase tracking-wide"
+              >
+                Open in GitHub
+              </a>
+            </p>
+          )}
+        </footer>
+      )}
+    </article>
+  )
+}

package/src/components/api/ModuleDoc.tsx

@@ -0,0 +1,298 @@
+import { Link } from '@inertiajs/react'
+import type { GriffeModule, GriffeClass, GriffeFunction, GriffeAttribute, GriffeMember, GriffeExpression } from '../../types'
+import { Docstring } from './Docstring'
+import { ClassDoc } from './ClassDoc'
+import { FunctionDoc } from './FunctionDoc'
+
+/**
+ * Safely render a Griffe expression or value to a string
+ */
+function renderValue(value: string | GriffeExpression | undefined): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  // Handle Griffe expression objects
+  if (value.str) return value.str
+  if (value.canonical) return value.canonical
+
+  const exprAny = value as any
+
+  // Handle ExprName with member reference
+  if (value.name && typeof value.name === 'string') return value.name
+
+  // Handle ExprBoolOp (like `config or StrawberryConfig()`)
+  if (exprAny.cls === 'ExprBoolOp' && exprAny.operator && Array.isArray(exprAny.values)) {
+    return exprAny.values.map((v: any) => renderValue(v)).join(` ${exprAny.operator} `)
+  }
+
+  // Handle ExprBinOp (like `type | None`)
+  if (exprAny.cls === 'ExprBinOp' && exprAny.left && exprAny.right) {
+    const left = renderValue(exprAny.left)
+    const right = renderValue(exprAny.right)
+    const op = exprAny.operator || '|'
+    return `${left} ${op} ${right}`
+  }
+
+  // Handle ExprCall (like `StrawberryConfig()`)
+  if (exprAny.cls === 'ExprCall' && exprAny.function) {
+    const funcName = renderValue(exprAny.function)
+    const args = Array.isArray(exprAny.arguments)
+      ? exprAny.arguments.map((a: any) => renderValue(a)).join(', ')
+      : ''
+    return `${funcName}(${args})`
+  }
+
+  // Handle ExprAttribute (like contextlib.asynccontextmanager)
+  if (exprAny.cls === 'ExprAttribute' && Array.isArray(exprAny.values)) {
+    return exprAny.values.map((v: any) => renderValue(v)).join('.')
+  }
+
+  // Handle ExprList and ExprTuple
+  if ('elements' in exprAny && Array.isArray(exprAny.elements)) {
+    const inner = exprAny.elements.map((el: any) => renderValue(el)).join(', ')
+    return exprAny.cls === 'ExprTuple' ? `(${inner})` : `[${inner}]`
+  }
+
+  // Handle ExprDict
+  if (exprAny.cls === 'ExprDict' && Array.isArray(exprAny.keys) && Array.isArray(exprAny.values)) {
+    const pairs = exprAny.keys.map((k: any, i: number) =>
+      `${renderValue(k)}: ${renderValue(exprAny.values[i])}`
+    ).join(', ')
+    return `{${pairs}}`
+  }
+
+  // Handle ExprSubscript (like Dict[str, int])
+  if (exprAny.left && exprAny.slice) {
+    const left = renderValue(exprAny.left)
+    const slice = renderValue(exprAny.slice)
+    return `${left}[${slice}]`
+  }
+
+  // Handle slice expressions
+  if ('slice' in exprAny && exprAny.slice && !exprAny.left) {
+    return renderValue(exprAny.slice)
+  }
+
+  // Fallback for unknown expressions
+  if (typeof value === 'object') {
+    return JSON.stringify(value)
+  }
+
+  return String(value)
+}
+
+interface ModuleDocProps {
+  module: GriffeModule
+  /** URL prefix for links */
+  prefix?: string
+  /** Show full module content or just summary */
+  showFull?: boolean
+  /** Additional CSS class */
+  className?: string
+  /** Override display path (e.g., for aliases to show alias name instead of target path) */
+  displayPath?: string
+  /** GitHub repository URL for "Open in GitHub" links */
+  githubUrl?: string
+}
+
+/**
+ * Renders documentation for a module including its classes, functions, and submodules.
+ */
+export function ModuleDoc({ module, prefix = '/api', showFull = true, className = '', displayPath, githubUrl }: ModuleDocProps) {
+  const members = module.members ?? {}
+
+  // Separate members by type
+  const submodules: GriffeModule[] = []
+  const classes: GriffeClass[] = []
+  const functions: GriffeFunction[] = []
+  const attributes: GriffeAttribute[] = []
+
+  for (const member of Object.values(members)) {
+    switch (member.kind) {
+      case 'module':
+        submodules.push(member as GriffeModule)
+        break
+      case 'class':
+        classes.push(member as GriffeClass)
+        break
+      case 'function':
+        functions.push(member as GriffeFunction)
+        break
+      case 'attribute':
+        attributes.push(member as GriffeAttribute)
+        break
+    }
+  }
+
+  // Sort alphabetically
+  submodules.sort((a, b) => a.name.localeCompare(b.name))
+  classes.sort((a, b) => a.name.localeCompare(b.name))
+  functions.sort((a, b) => a.name.localeCompare(b.name))
+  attributes.sort((a, b) => a.name.localeCompare(b.name))
+
+  // Generate href for a member using dotted path
+  const memberHref = (member: GriffeMember) => {
+    const modulePath = module.path || module.name
+    return `${prefix}/${modulePath}.${member.name}`
+  }
+
+  return (
+    <div className={className}>
+      {/* Module header */}
+      <h1 id={module.name} className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+        <span className="text-gray-500 dark:text-gray-400 font-normal">module </span>
+        {displayPath || module.path || module.name}
+      </h1>
+
+      {/* Docstring */}
+      {module.docstring && (
+        <div className="mb-8">
+          <Docstring docstring={module.docstring} />
+        </div>
+      )}
+
+      {/* Submodules */}
+      {submodules.length > 0 && (
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
+            Submodules
+          </h2>
+          <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {submodules.map((submodule) => (
+              <li key={submodule.name}>
+                <Link
+                  href={`${prefix}/${submodule.path || submodule.name}`}
+                  className="block p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-colors"
+                >
+                  <div className="font-mono text-sm text-primary-600 dark:text-primary-400">
+                    {submodule.path || submodule.name}
+                  </div>
+                  {submodule.docstring && (
+                    <div className="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">
+                      {submodule.docstring.value.split('\n')[0]}
+                    </div>
+                  )}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Classes - summary or full */}
+      {classes.length > 0 && (
+        <div id="classes" className="mb-8">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
+            Classes
+          </h2>
+          {showFull ? (
+            <div className="space-y-12">
+              {classes.map((cls) => (
+                <ClassDoc key={cls.name} cls={cls} prefix={prefix} githubUrl={githubUrl} />
+              ))}
+            </div>
+          ) : (
+            <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              {classes.map((cls) => (
+                <li key={cls.name}>
+                  <Link
+                    href={memberHref(cls)}
+                    className="block p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-colors"
+                  >
+                    <div className="font-mono text-sm text-primary-600 dark:text-primary-400">
+                      {cls.name}
+                    </div>
+                    {cls.docstring && (
+                      <div className="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">
+                        {cls.docstring.value.split('\n')[0]}
+                      </div>
+                    )}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+
+      {/* Functions - summary or full */}
+      {functions.length > 0 && (
+        <div id="functions" className="mb-8">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
+            Functions
+          </h2>
+          {showFull ? (
+            <div className="space-y-8">
+              {functions.map((fn) => (
+                <FunctionDoc key={fn.name} fn={fn} githubUrl={githubUrl} />
+              ))}
+            </div>
+          ) : (
+            <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              {functions.map((fn) => (
+                <li key={fn.name}>
+                  <Link
+                    href={memberHref(fn)}
+                    className="block p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-colors"
+                  >
+                    <div className="font-mono text-sm text-primary-600 dark:text-primary-400">
+                      {fn.name}()
+                    </div>
+                    {fn.docstring && (
+                      <div className="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">
+                        {fn.docstring.value.split('\n')[0]}
+                      </div>
+                    )}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+
+      {/* Module-level attributes */}
+      {attributes.length > 0 && (
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
+            Attributes
+          </h2>
+          <dl className="space-y-3">
+            {attributes.map((attr) => (
+              <div key={attr.name} id={attr.name} className="scroll-mt-20">
+                <dt className="font-mono text-sm">
+                  <span className="text-orange-600 dark:text-orange-400 font-semibold">{attr.name}</span>
+                  {attr.annotation && (
+                    <>
+                      <span className="text-gray-600 dark:text-gray-400">: </span>
+                      <span className="text-green-600 dark:text-green-400">
+                        {typeof attr.annotation === 'string' ? attr.annotation : attr.annotation.str || attr.annotation.name}
+                      </span>
+                    </>
+                  )}
+                  {attr.value && (
+                    <>
+                      <span className="text-gray-600 dark:text-gray-400"> = </span>
+                      <span className="text-cyan-600 dark:text-cyan-400">{renderValue(attr.value)}</span>
+                    </>
+                  )}
+                </dt>
+                {attr.docstring && (
+                  <dd className="mt-1 text-sm text-gray-600 dark:text-gray-300 ml-4">
+                    {attr.docstring.value}
+                  </dd>
+                )}
+              </div>
+            ))}
+          </dl>
+        </div>
+      )}
+
+      {/* Source location */}
+      {(module.relative_package_filepath || module.filepath) && (
+        <div className="mt-4 text-xs text-gray-500 dark:text-gray-400">
+          <span className="font-mono">{module.relative_package_filepath || module.filepath}</span>
+        </div>
+      )}
+    </div>
+  )
+}