specra 0.1.0

package/src/components/docs/category-index.tsx

@@ -0,0 +1,112 @@
+import Link from "next/link"
+import { ChevronRight, FileText } from "lucide-react"
+import type { Doc } from "@/lib/mdx"
+import { ReactNode } from "react"
+import { MDXRemote } from "next-mdx-remote/rsc"
+import remarkGfm from "remark-gfm"
+import { remarkCodeMeta } from "@/lib/remark-code-meta"
+import rehypeSlug from "rehype-slug"
+import { mdxComponents } from "./mdx-components"
+import { getConfig, processContentWithEnv, SpecraConfig } from "@/lib/config"
+import { sortSidebarItems } from "@/lib/sidebar-utils"
+
+interface CategoryIndexProps {
+  categoryPath: string
+  version: string
+  allDocs: Doc[]
+  title: string
+  description?: string
+  content?: string
+  config: SpecraConfig
+}
+
+export function CategoryIndex({ categoryPath, version, allDocs, title, description, content , config}: CategoryIndexProps) {
+  // Find all docs that are direct children of this category
+  const childDocs = allDocs.filter((doc) => {
+    // Get the parent path of the doc
+    const parts = doc.slug.split("/")
+    const docParent = parts.slice(0, -1).join("/")
+
+    // Check if this doc is a direct child of the category
+    return docParent === categoryPath && doc.slug !== categoryPath
+  })
+
+
+  // const config = getConfig();
+  const processedContent = () => {
+    if(content){
+      return processContentWithEnv(content, config);
+    }
+    return "";
+  };
+
+  // Sort by sidebar_position using unified sorting function
+  const sortedDocs = sortSidebarItems(childDocs)
+
+  return (
+    <div className="flex-1 min-w-0">
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold tracking-tight mb-3 text-foreground">{title}</h1>
+        {description && <p className="text-lg text-muted-foreground leading-relaxed">{description}</p>}
+        
+        <div className="prose prose-slate dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-semibold prose-h1:text-4xl prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-4 prose-h3:text-2xl prose-h3:mt-8 prose-h3:mb-3 prose-p:text-base prose-p:leading-7 prose-p:text-muted-foreground prose-p:mb-4 prose-a:font-normal prose-a:transition-all prose-code:text-primary prose-code:bg-muted/50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-[13px] prose-code:font-mono prose-code:border prose-code:border-border/50 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-transparent prose-pre:p-0 prose-ul:list-disc prose-ul:list-inside prose-ul:space-y-2 prose-ul:mb-4 prose-ol:list-decimal prose-ol:list-inside prose-ol:space-y-2 prose-ol:mb-4 prose-li:leading-7 prose-li:text-muted-foreground prose-strong:text-foreground prose-strong:font-semibold">
+                <MDXRemote
+                  source={processedContent()}
+                  options={{
+                    parseFrontmatter: false,
+                    mdxOptions: {
+                      remarkPlugins: [remarkGfm, remarkCodeMeta],
+                      rehypePlugins: [rehypeSlug],
+                      development: false,
+                    },
+                  }}
+                  components={mdxComponents as any}
+                />
+              </div>
+
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {sortedDocs.map((doc) => (
+          <Link
+            key={doc.slug}
+            href={`/docs/${version}/${doc.slug}`}
+            className="group block p-5 rounded-xl border border-border bg-card hover:bg-accent hover:border-primary/50 transition-all duration-200"
+            style={{
+              textDecoration: "none !important"
+            }}
+          >
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-2">
+                  <FileText className="h-6 w-6 text-primary shrink-0" />
+                  <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
+                    {doc.meta.title || doc.title}
+                  </h3>
+                </div>
+                {doc.meta.description && (
+                  <p className="text-sm text-muted-foreground line-clamp-2">
+                    {doc.meta.description}
+                  </p>
+                )}
+                {doc.meta.reading_time && (
+                  <p className="text-xs text-muted-foreground mt-2">
+                    {doc.meta.reading_time} min read
+                  </p>
+                )}
+              </div>
+              <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0 mt-1" />
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {sortedDocs.length === 0 && (
+        <div className="text-center py-12 text-muted-foreground">
+          <FileText className="h-12 w-12 mx-auto mb-3 opacity-50" />
+          <p>No documents found in this category.</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/docs/code-block.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import { useState } from "react"
+import { Check, Copy } from "lucide-react"
+
+interface CodeBlockProps {
+  code: string
+  language: string
+  filename?: string
+}
+
+export function CodeBlock({ code, language, filename }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const highlightCode = (code: string, lang: string) => {
+    const lines = code.split("\n")
+
+    return lines.map((line, i) => {
+      const tokens: Array<{ type: string; value: string }> = []
+      let currentPos = 0
+
+      // Regex patterns for different token types
+      const patterns = [
+        { type: "comment", regex: /(\/\/.*$|\/\*[\s\S]*?\*\/|#.*$)/ },
+        { type: "string", regex: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/ },
+        {
+          type: "keyword",
+          regex:
+            /\b(const|let|var|function|return|if|else|for|while|do|break|continue|switch|case|default|import|export|from|as|class|extends|implements|interface|type|enum|namespace|async|await|try|catch|finally|throw|new|this|super|static|public|private|protected|readonly|abstract|void|null|undefined|true|false|typeof|instanceof|delete|in|of)\b/,
+        },
+        { type: "operator", regex: /([+\-*/%=<>!&|^~?:]+)/ },
+        { type: "number", regex: /\b(0x[a-fA-F0-9]+|0b[01]+|\d+\.?\d*(?:e[+-]?\d+)?)\b/ },
+        { type: "function", regex: /\b([a-zA-Z_$][\w$]*)\s*(?=\()/ },
+        { type: "property", regex: /\.([a-zA-Z_$][\w$]*)/ },
+        { type: "punctuation", regex: /([{}[\]();,])/ },
+      ]
+
+      while (currentPos < line.length) {
+        let matched = false
+
+        for (const { type, regex } of patterns) {
+          const match = line.slice(currentPos).match(regex)
+          if (match && match.index === 0) {
+            tokens.push({ type, value: match[0] })
+            currentPos += match[0].length
+            matched = true
+            break
+          }
+        }
+
+        if (!matched) {
+          // Regular text or whitespace
+          const nextSpecialChar = line.slice(currentPos).search(/["'`/\w.+\-*/%=<>!&|^~?:;,()[\]{}#]/)
+          if (nextSpecialChar === -1) {
+            tokens.push({ type: "text", value: line.slice(currentPos) })
+            break
+          } else if (nextSpecialChar > 0) {
+            tokens.push({ type: "text", value: line.slice(currentPos, currentPos + nextSpecialChar) })
+            currentPos += nextSpecialChar
+          } else {
+            tokens.push({ type: "text", value: line[currentPos] })
+            currentPos++
+          }
+        }
+      }
+
+      return (
+        <div key={i} className="table-row">
+          <span className="table-cell pr-4 text-right select-none text-muted-foreground/40 w-8 align-top">{i + 1}</span>
+          <span className="table-cell align-top">
+            {tokens.length === 0 ? (
+              <span>&nbsp;</span>
+            ) : (
+              tokens.map((token, j) => (
+                <span key={j} className={`token-${token.type}`}>
+                  {token.value}
+                </span>
+              ))
+            )}
+          </span>
+        </div>
+      )
+    })
+  }
+
+  return (
+    <div className="relative group my-2">
+      {/* Header - always visible */}
+      <div className="bg-muted/50 dark:bg-muted/30 px-4 py-2 rounded-t-xl border border-b-0 border-border/50 flex items-center justify-between">
+        {/* Left section: Safari-style dots + filename */}
+        <div className="flex items-center gap-3">
+          {/* Safari-style window controls */}
+          <div className="flex items-center gap-1.5">
+            <div className="w-3 h-3 rounded-full bg-red-500/80 dark:bg-red-500/60" />
+            <div className="w-3 h-3 rounded-full bg-yellow-500/80 dark:bg-yellow-500/60" />
+            <div className="w-3 h-3 rounded-full bg-green-500/80 dark:bg-green-500/60" />
+          </div>
+          {/* Filename or "Code" */}
+          <span className="text-xs font-mono text-foreground">{filename || "Code"}</span>
+        </div>
+        
+        {/* Right section: Language + Copy button */}
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground/60 font-mono uppercase tracking-wide">{language}</span>
+          <button
+            onClick={handleCopy}
+            className="p-1.5 rounded-md hover:bg-muted/50 transition-colors"
+            aria-label="Copy code"
+          >
+            {copied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4 text-muted-foreground" />}
+          </button>
+        </div>
+      </div>
+      
+      {/* Code content */}
+      <div className="bg-gray-200/50 dark:bg-[#0d1117] rounded-b-xl overflow-x-auto border border-border/50">
+        <pre className="p-2 text-[13px] font-mono leading-relaxed text-gray-800 dark:text-gray-200">
+          <code className="table w-full">{highlightCode(code, language)}</code>
+        </pre>
+      </div>
+    </div>
+  )
+}

package/src/components/docs/columns.tsx

@@ -0,0 +1,45 @@
+interface ColumnsProps {
+  children: React.ReactNode
+  cols?: {
+    sm?: 1 | 2 | 3 | 4
+    md?: 1 | 2 | 3 | 4
+    lg?: 1 | 2 | 3 | 4
+    xl?: 1 | 2 | 3 | 4
+  }
+}
+
+export function Columns({ children, cols = { sm: 1, md: 2, lg: 3 } }: ColumnsProps) {
+  const colClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+  }
+
+  const smClass = cols.sm ? colClasses[cols.sm] : "grid-cols-1"
+  const mdClass = cols.md ? `md:${colClasses[cols.md]}` : ""
+  const lgClass = cols.lg ? `lg:${colClasses[cols.lg]}` : ""
+  const xlClass = cols.xl ? `xl:${colClasses[cols.xl]}` : ""
+
+  return (
+    <div className={`grid ${smClass} ${mdClass} ${lgClass} ${xlClass} gap-4 my-6`}>
+      {children}
+    </div>
+  )
+}
+
+interface ColumnProps {
+  children: React.ReactNode
+  span?: 1 | 2 | 3 | 4
+}
+
+export function Column({ children, span = 1 }: ColumnProps) {
+  const spanClass = {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+  }
+
+  return <div className={spanClass[span]}>{children}</div>
+}

package/src/components/docs/componentTextProps.ts

@@ -0,0 +1,85 @@
+
+
+export const COMPONENT_TEXT_PROPS: Record<string, string[]> = {
+    // Accordion components
+    Accordion: ["title"],
+    AccordionItem: ["title"],
+
+    // Alert/Callout components
+    Alert: ["title", "description"],
+    Banner: ["title"],
+    Callout: ["title", "content"],
+    Note: ["title"],
+    Warning: ["title", "text"],
+
+    // Navigation components
+    BreadCrumb: ["title", "slug", "version"],
+
+    // Card components
+    Card: ["title", "description"],
+    ImageCard: ["title", "description", "alt"],
+
+    // Media components
+    Image: ["alt", "caption"],
+    Video: ["caption"],
+    Frame: ["title"],
+    Mermaid: ["caption"],
+
+    // Interactive components
+    Tooltip: ["content"],
+
+    // Code components
+    CodeBlock: ["filename"],
+
+    // Step components
+    Step: ["title"],
+}
+
+export function extractComponentPropsText(mdx: string): string {
+    return mdx.replace(
+        /<([A-Z][\w]*)\b([^/>]*)\/>/g,
+        (_, component, props) => {
+            const searchableProps = COMPONENT_TEXT_PROPS[component]
+            if (!searchableProps) return " "
+
+            let extracted = ""
+
+            for (const prop of searchableProps) {
+                const match = props.match(
+                    new RegExp(`${prop}="([^"]+)"`, "i")
+                )
+                if (match) {
+                    extracted += " " + match[1]
+                }
+            }
+
+            return extracted || " "
+        }
+    )
+}
+
+export function extractSearchText(mdx: string): string {
+    return extractComponentPropsText(mdx)
+        // 2. Remove fenced code blocks
+        .replace(/```[\s\S]*?```/g, " ")
+
+        // 3. Remove JSX blocks with children
+        .replace(/<([A-Z][\w]*)\b[^>]*>[\s\S]*?<\/\1>/g, " ")
+
+        // 4. Remove remaining JSX & HTML
+        .replace(/<\/?[A-Za-z][^>]*>/g, " ")
+
+        // 5. Remove inline code
+        .replace(/`[^`]+`/g, " ")
+
+        // 6. Remove markdown links (keep text)
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+
+        // 7. Remove markdown noise
+        .replace(/[#>*_~=-]+/g, " ")
+
+        // 8. Normalize whitespace
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, 1000)
+}

package/src/components/docs/dev-mode-badge.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Code2, Wifi } from "lucide-react"
+
+export function DevModeBadge() {
+  const [isConnected, setIsConnected] = useState(true)
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return
+
+    // Check WebSocket connection status
+    const checkConnection = () => {
+      setIsConnected(navigator.onLine)
+    }
+
+    window.addEventListener("online", checkConnection)
+    window.addEventListener("offline", checkConnection)
+
+    return () => {
+      window.removeEventListener("online", checkConnection)
+      window.removeEventListener("offline", checkConnection)
+    }
+  }, [])
+
+  if (process.env.NODE_ENV !== "development") return null
+
+  return (
+    <div className="fixed top-20 left-4 z-40 flex items-center gap-2 px-3 py-1.5 bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20 rounded-full text-xs font-medium">
+      <Code2 className="h-3 w-3" />
+      <span>Dev Mode</span>
+      <div className={`h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"} animate-pulse`} />
+    </div>
+  )
+}

package/src/components/docs/doc-layout-wrapper.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { ReactNode, useEffect, useRef } from "react"
+import { MobileDocLayout } from "./mobile-doc-layout"
+import { useTabContext } from "./tab-context"
+import type { SpecraConfig } from "@/lib/config"
+import type { Doc } from "@/lib/mdx"
+
+interface DocLayoutWrapperProps {
+  header: ReactNode
+  docs: Doc[]
+  version: string
+  content: ReactNode
+  toc: ReactNode
+  config: SpecraConfig
+  currentPageTabGroup?: string
+}
+
+export function DocLayoutWrapper({ header, docs, version, content, toc, config, currentPageTabGroup }: DocLayoutWrapperProps) {
+  // Use global tab context instead of local state
+  const { activeTabGroup, setActiveTabGroup } = useTabContext()
+  const lastPageTabGroupRef = useRef<string | undefined>(undefined)
+  const isInitialMount = useRef(true)
+
+  // Set tab based on page's tab group
+  useEffect(() => {
+    // On initial mount, always set to current page's tab group
+    if (isInitialMount.current && currentPageTabGroup) {
+      setActiveTabGroup(currentPageTabGroup)
+      lastPageTabGroupRef.current = currentPageTabGroup
+      isInitialMount.current = false
+      return
+    }
+
+    // On subsequent renders, only update if navigating to a different page
+    if (currentPageTabGroup && lastPageTabGroupRef.current !== currentPageTabGroup) {
+      setActiveTabGroup(currentPageTabGroup)
+      lastPageTabGroupRef.current = currentPageTabGroup
+    }
+  }, [currentPageTabGroup, setActiveTabGroup])
+
+  return (
+    <MobileDocLayout
+      header={header}
+      docs={docs}
+      version={version}
+      content={content}
+      toc={toc}
+      config={config}
+      activeTabGroup={activeTabGroup}
+      onTabChange={setActiveTabGroup}
+    />
+  )
+}

package/src/components/docs/doc-layout.tsx

@@ -0,0 +1,111 @@
+import { ExternalLink, FileEdit } from "lucide-react"
+import { MDXRemote, type MDXRemoteProps } from "next-mdx-remote/rsc"
+import remarkGfm from "remark-gfm"
+import rehypeSlug from "rehype-slug"
+import { remarkCodeMeta } from "@/lib/remark-code-meta"
+import { mdxComponents } from "./mdx-components"
+import type { ComponentPropsWithoutRef } from "react"
+import { DocNavigation } from "./doc-navigation"
+import { Breadcrumb } from "./breadcrumb"
+import { DocMetadata } from "./doc-metadata"
+import { DraftBadge } from "./draft-badge"
+import { DocTags } from "./doc-tags"
+import { SearchHighlight } from "./search-highlight"
+import type { DocMeta } from "@/lib/mdx"
+import { getConfig, processContentWithEnv, type SpecraConfig } from "@/lib/config"
+
+interface DocLayoutProps {
+  meta: DocMeta
+  content: string
+  previousDoc?: {
+    title: string
+    slug: string
+  }
+  nextDoc?: {
+    title: string
+    slug: string
+  }
+  version: string
+  slug: string
+  config: SpecraConfig
+}
+
+
+
+export async function DocLayout({ content, meta, previousDoc, nextDoc, version, slug, config }: DocLayoutProps) {
+  const isDevelopment = process.env.NODE_ENV === "development"
+  // const config = getConfig()
+
+  // Process content with environment variables
+  const processedContent = processContentWithEnv(content, config)
+
+  // Build edit URL if configured
+  const editUrl = config.features?.editUrl && typeof config.features.editUrl === 'string'
+    ? `${config.features.editUrl}/${version}/${slug}.mdx`
+    : null
+
+  return (
+    <article className="flex-1 min-w-0">
+      <SearchHighlight />
+
+      {config.navigation?.showBreadcrumbs && (
+        <Breadcrumb version={version} slug={slug} title={meta.title} />
+      )}
+
+      {isDevelopment && meta.draft && <DraftBadge />}
+
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold tracking-tight mb-3 text-foreground">{meta.title}</h1>
+        {meta.description && <p className="text-lg text-muted-foreground leading-relaxed">{meta.description}</p>}
+      </div>
+
+      <DocMetadata meta={meta} config={config} />
+
+      <div className="prose prose-slate dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-semibold prose-h1:text-4xl prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-4 prose-h3:text-2xl prose-h3:mt-8 prose-h3:mb-3 prose-p:text-base prose-p:leading-7 prose-p:text-muted-foreground prose-p:mb-4 prose-a:font-normal prose-a:transition-all prose-code:text-primary prose-code:bg-muted/50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-[13px] prose-code:font-mono prose-code:border prose-code:border-border/50 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-transparent prose-pre:p-0 prose-ul:list-disc prose-ul:list-inside prose-ul:space-y-2 prose-ul:mb-4 prose-ol:list-decimal prose-ol:list-inside prose-ol:space-y-2 prose-ol:mb-4 prose-li:leading-7 prose-li:text-muted-foreground prose-strong:text-foreground prose-strong:font-semibold">
+        <MDXRemote
+          source={processedContent}
+          options={{
+            parseFrontmatter: false,
+            mdxOptions: {
+              remarkPlugins: [remarkGfm, remarkCodeMeta],
+              rehypePlugins: [rehypeSlug],
+              development: false,
+            },
+          }}
+          components={mdxComponents as any}
+        />
+      </div>
+
+      {config.features?.showTags && meta.tags && meta.tags.length > 0 && <DocTags tags={meta.tags} />}
+
+      {(editUrl || config.social?.github) && (
+        <div className="mt-12 pt-6 border-t border-border flex items-center justify-between">
+          {editUrl ? (
+            <a
+              href={editUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <FileEdit className="h-4 w-4" />
+              Edit this page
+            </a>
+          ) : <div />}
+          {config.social?.github && (
+            <a
+              href={`${config.social.github}/issues/new`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ExternalLink className="h-4 w-4" />
+              Report an issue
+            </a>
+          )}
+        </div>
+      )}
+
+      <DocNavigation previousDoc={previousDoc} nextDoc={nextDoc} version={version} />
+    </article>
+  )
+}

package/src/components/docs/doc-loading.tsx

@@ -0,0 +1,15 @@
+export function DocLoading() {
+  return (
+    <div className="max-w-4xl mx-auto px-6 py-8">
+      <div className="animate-pulse space-y-4">
+        <div className="h-8 bg-gray-200 rounded w-3/4" />
+        <div className="h-4 bg-gray-200 rounded w-1/2" />
+        <div className="space-y-3 mt-8">
+          <div className="h-4 bg-gray-200 rounded" />
+          <div className="h-4 bg-gray-200 rounded w-5/6" />
+          <div className="h-4 bg-gray-200 rounded w-4/6" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/docs/doc-metadata.tsx

@@ -0,0 +1,55 @@
+import { Clock, Calendar, User } from "lucide-react"
+import type { DocMeta } from "@/lib/mdx"
+import { getConfig, SpecraConfig } from "@/lib/config"
+
+interface DocMetadataProps {
+  meta: DocMeta
+  config: SpecraConfig
+}
+
+export function DocMetadata({ meta, config }: DocMetadataProps) {
+  // Server component - can use getConfig directly
+  // const config = getConfig()
+  
+  const showReadingTime = config.features?.showReadingTime && meta.reading_time
+  const showLastUpdated = config.features?.showLastUpdated && meta.last_updated
+  const showAuthors = config.features?.showAuthors && meta.authors?.length
+  
+  const hasMetadata = showReadingTime || showLastUpdated || showAuthors
+
+  if (!hasMetadata) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground border-b border-border pb-4 mb-6">
+      {showReadingTime && (
+        <div className="flex items-center gap-1.5">
+          <Clock className="h-4 w-4" />
+          <span>{meta.reading_time} min read</span>
+        </div>
+      )}
+      
+      {showLastUpdated && meta.last_updated && (
+        <div className="flex items-center gap-1.5">
+          <Calendar className="h-4 w-4" />
+          <span>Updated {new Date(meta.last_updated).toLocaleDateString()}</span>
+        </div>
+      )}
+      
+      {showAuthors && (
+        <div className="flex items-center gap-1.5">
+          <User className="h-4 w-4" />
+          <span>
+            {meta.authors!.map((author, idx) => (
+              <span key={author.id}>
+                {author.name || author.id}
+                {idx < meta.authors!.length - 1 && ", "}
+              </span>
+            ))}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}