skrypt-ai 0.3.2 → 0.3.4

package/dist/cli.js

@@ -18,7 +18,7 @@ import { loginCommand, logoutCommand, whoamiCommand } from './commands/login.js'
 import { cronCommand } from './commands/cron.js';
 import { deployCommand } from './commands/deploy.js';
 import { testCommand } from './commands/test.js';
-const VERSION = '0.3.2';
+const VERSION = '0.3.4';
 async function checkForUpdates() {
     try {
         const res = await fetch('https://registry.npmjs.org/skrypt-ai/latest', {

package/dist/template/next.config.mjs

@@ -1,9 +1,10 @@
 import createMDX from '@next/mdx'
+import remarkGfm from 'remark-gfm'
 
 const withMDX = createMDX({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [],
+    remarkPlugins: [remarkGfm],
     rehypePlugins: [],
   },
 })

package/dist/template/package.json

@@ -22,6 +22,7 @@
     "lucide-react": "^0.500.0",
     "clsx": "^2.1.0",
     "tailwind-merge": "^3.0.0",
+    "remark-gfm": "^4.0.0",
     "gray-matter": "^4.0.3",
     "@scalar/nextjs-api-reference": "^0.4.0",
     "@codesandbox/sandpack-react": "^2.20.0"

package/dist/template/src/app/docs/[...slug]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation'
 import { readFile, readdir, stat } from 'fs/promises'
 import { join } from 'path'
 import { compileMDX } from 'next-mdx-remote/rsc'
+import remarkGfm from 'remark-gfm'
 import * as components from '@/components/mdx'
 
 interface PageProps {
@@ -39,6 +40,9 @@ export default async function DocPage({ params }: PageProps) {
     components: components as any,
     options: {
       parseFrontmatter: true,
+      mdxOptions: {
+        remarkPlugins: [remarkGfm],
+      },
     },
   })
 

package/dist/template/src/app/docs/layout.tsx

@@ -1,9 +1,17 @@
 import { DocsLayout } from '@/components/docs-layout'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+
+function getDocsConfig() {
+  const configPath = join(process.cwd(), 'docs.json')
+  return JSON.parse(readFileSync(configPath, 'utf-8'))
+}
 
 export default function Layout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return <DocsLayout>{children}</DocsLayout>
+  const docsConfig = getDocsConfig()
+  return <DocsLayout docsConfig={docsConfig}>{children}</DocsLayout>
 }

package/dist/template/src/app/layout.tsx

@@ -2,18 +2,27 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import '@/styles/globals.css'
 import { SyntaxThemeProvider } from '@/contexts/syntax-theme'
+import { readFileSync } from 'fs'
+import { join } from 'path'
 
 const inter = Inter({ subsets: ['latin'] })
 
+function getDocsConfig() {
+  const configPath = join(process.cwd(), 'docs.json')
+  return JSON.parse(readFileSync(configPath, 'utf-8'))
+}
+
+const docsConfig = getDocsConfig()
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://docs.example.com'
-const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'API Documentation'
+const siteName = docsConfig.name || 'Documentation'
+const siteDescription = docsConfig.description || 'Documentation'
 
 export const metadata: Metadata = {
   title: {
     default: siteName,
     template: `%s | ${siteName}`,
   },
-  description: 'API documentation with interactive examples',
+  description: siteDescription,
   metadataBase: new URL(siteUrl),
   openGraph: {
     type: 'website',
@@ -21,12 +30,12 @@ export const metadata: Metadata = {
     url: siteUrl,
     siteName,
     title: siteName,
-    description: 'API documentation with interactive examples',
+    description: siteDescription,
   },
   twitter: {
     card: 'summary_large_image',
     title: siteName,
-    description: 'API documentation with interactive examples',
+    description: siteDescription,
   },
   robots: {
     index: true,
@@ -34,13 +43,12 @@ export const metadata: Metadata = {
   },
 }
 
-// JSON-LD structured data
 const jsonLd = {
   '@context': 'https://schema.org',
   '@type': 'WebSite',
   name: siteName,
   url: siteUrl,
-  description: 'API documentation with interactive examples',
+  description: siteDescription,
   potentialAction: {
     '@type': 'SearchAction',
     target: `${siteUrl}/docs?q={search_term_string}`,
@@ -61,7 +69,7 @@ export default function RootLayout({
           dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
         />
       </head>
-      <body className={inter.className}>
+      <body className={inter.className} suppressHydrationWarning>
         <SyntaxThemeProvider>
           {children}
         </SyntaxThemeProvider>

package/dist/template/src/app/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { readFileSync } from 'fs'
 import { join } from 'path'
+import { ArrowRight, BookOpen, Zap, Code } from 'lucide-react'
 
 function getDocsConfig() {
   const configPath = join(process.cwd(), 'docs.json')
@@ -10,19 +11,68 @@ function getDocsConfig() {
 
 export default function Home() {
   const docsConfig = getDocsConfig()
+  const firstPage = docsConfig.navigation?.[0]?.pages?.[0]?.path || '/docs'
 
   return (
-    <main className="min-h-screen flex flex-col items-center justify-center p-8">
-      <h1 className="text-4xl font-bold mb-4">{docsConfig.name} Documentation</h1>
-      <p className="text-[var(--color-text-secondary)] mb-8 text-center max-w-xl">
-        {docsConfig.description}
-      </p>
-      <Link
-        href="/docs"
-        className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg font-medium hover:bg-[var(--color-primary-dark)] transition-colors"
-      >
-        Get Started
-      </Link>
+    <main className="min-h-screen flex flex-col">
+      {/* Header */}
+      <header className="h-[var(--header-height)] border-b border-[var(--color-border)] flex items-center px-6">
+        <Link href="/" className="font-semibold text-[0.9375rem] tracking-tight text-[var(--color-text)] hover:no-underline">
+          {docsConfig.name}
+        </Link>
+      </header>
+
+      {/* Hero */}
+      <div className="flex-1 flex flex-col items-center justify-center px-6 py-20">
+        <div className="max-w-2xl mx-auto text-center">
+          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-[var(--color-text)] mb-4">
+            {docsConfig.name}
+          </h1>
+          <p className="text-lg text-[var(--color-text-secondary)] mb-8 max-w-lg mx-auto leading-relaxed">
+            {docsConfig.description}
+          </p>
+          <div className="flex items-center justify-center gap-3">
+            <Link
+              href={firstPage}
+              className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--color-text)] text-[var(--color-bg)] rounded-lg font-medium text-[0.875rem] hover:opacity-90 hover:no-underline transition-opacity"
+            >
+              Get Started
+              <ArrowRight size={16} />
+            </Link>
+            <Link
+              href="/docs"
+              className="inline-flex items-center gap-2 px-5 py-2.5 border border-[var(--color-border)] text-[var(--color-text)] rounded-lg font-medium text-[0.875rem] hover:bg-[var(--color-bg-secondary)] hover:no-underline transition-colors"
+            >
+              Documentation
+            </Link>
+          </div>
+        </div>
+
+        {/* Feature cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto mt-16 w-full">
+          <div className="p-5 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors">
+            <BookOpen size={18} className="text-[var(--color-text-tertiary)] mb-3" />
+            <h3 className="text-[0.875rem] font-semibold text-[var(--color-text)] mb-1">Guides</h3>
+            <p className="text-[0.8125rem] text-[var(--color-text-tertiary)] leading-relaxed">
+              Step-by-step tutorials and explanations.
+            </p>
+          </div>
+          <div className="p-5 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors">
+            <Code size={18} className="text-[var(--color-text-tertiary)] mb-3" />
+            <h3 className="text-[0.875rem] font-semibold text-[var(--color-text)] mb-1">API Reference</h3>
+            <p className="text-[0.8125rem] text-[var(--color-text-tertiary)] leading-relaxed">
+              Complete API documentation with examples.
+            </p>
+          </div>
+          <div className="p-5 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors">
+            <Zap size={18} className="text-[var(--color-text-tertiary)] mb-3" />
+            <h3 className="text-[0.875rem] font-semibold text-[var(--color-text)] mb-1">Quick Start</h3>
+            <p className="text-[0.8125rem] text-[var(--color-text-tertiary)] leading-relaxed">
+              Get up and running in minutes.
+            </p>
+          </div>
+        </div>
+      </div>
     </main>
   )
 }

package/dist/template/src/components/breadcrumbs.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { ChevronRight, Home } from 'lucide-react'
+import { ChevronRight } from 'lucide-react'
 
 export function Breadcrumbs() {
   const pathname = usePathname()
@@ -20,17 +20,17 @@ export function Breadcrumbs() {
   })
 
   return (
-    <nav className="flex items-center gap-1.5 text-[13px] text-[var(--color-text-tertiary)] mb-4">
-      <Link href="/" className="hover:text-[var(--color-text)]">
-        <Home size={14} />
+    <nav className="flex items-center gap-1 text-[0.8125rem] text-[var(--color-text-tertiary)] mb-6">
+      <Link href="/" className="hover:text-[var(--color-text)] hover:no-underline">
+        Docs
       </Link>
-      {crumbs.map((crumb, i) => (
-        <span key={crumb.href} className="flex items-center gap-1.5">
-          <ChevronRight size={14} />
-          {i === crumbs.length - 1 ? (
-            <span className="text-[var(--color-text)]">{crumb.label}</span>
+      {crumbs.slice(1).map((crumb, i) => (
+        <span key={crumb.href} className="flex items-center gap-1">
+          <ChevronRight size={12} className="text-[var(--color-text-tertiary)]" />
+          {i === crumbs.length - 2 ? (
+            <span className="text-[var(--color-text-secondary)]">{crumb.label}</span>
           ) : (
-            <Link href={crumb.href} className="hover:text-[var(--color-text)]">
+            <Link href={crumb.href} className="hover:text-[var(--color-text)] hover:no-underline">
               {crumb.label}
             </Link>
           )}

package/dist/template/src/components/docs-layout.tsx

@@ -1,12 +1,76 @@
 'use client'
 
 import { useState } from 'react'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { Sidebar } from './sidebar'
 import { Header } from './header'
 import { TableOfContents } from './table-of-contents'
 import { Breadcrumbs } from './breadcrumbs'
 
-export function DocsLayout({ children }: { children: React.ReactNode }) {
+interface DocsConfig {
+  name?: string
+  headerLinks?: Array<{ title: string; path: string }>
+  navigation: Array<{
+    group: string
+    pages: Array<{ title: string; path: string }>
+  }>
+}
+
+function getAllPages(config: DocsConfig): Array<{ title: string; path: string }> {
+  return config.navigation.flatMap((group) => group.pages)
+}
+
+function PrevNextNav({ docsConfig }: { docsConfig: DocsConfig }) {
+  const pathname = usePathname()
+  const allPages = getAllPages(docsConfig)
+  const currentIndex = allPages.findIndex((p) => p.path === pathname)
+
+  if (currentIndex === -1) return null
+
+  const prev = currentIndex > 0 ? allPages[currentIndex - 1] : null
+  const next = currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null
+
+  if (!prev && !next) return null
+
+  return (
+    <div className="mt-12 pt-6 border-t border-[var(--color-border)] grid grid-cols-2 gap-4">
+      {prev ? (
+        <Link
+          href={prev.path}
+          className="group flex flex-col gap-1 p-4 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] hover:bg-[var(--color-bg-secondary)] hover:no-underline transition-all"
+        >
+          <span className="flex items-center gap-1 text-xs text-[var(--color-text-tertiary)]">
+            <ChevronLeft size={12} />
+            Previous
+          </span>
+          <span className="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)]">
+            {prev.title}
+          </span>
+        </Link>
+      ) : (
+        <div />
+      )}
+      {next && (
+        <Link
+          href={next.path}
+          className="group flex flex-col items-end gap-1 p-4 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] hover:bg-[var(--color-bg-secondary)] hover:no-underline transition-all"
+        >
+          <span className="flex items-center gap-1 text-xs text-[var(--color-text-tertiary)]">
+            Next
+            <ChevronRight size={12} />
+          </span>
+          <span className="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)]">
+            {next.title}
+          </span>
+        </Link>
+      )}
+    </div>
+  )
+}
+
+export function DocsLayout({ children, docsConfig }: { children: React.ReactNode; docsConfig: DocsConfig }) {
   const [menuOpen, setMenuOpen] = useState(false)
 
   return (
@@ -14,18 +78,22 @@ export function DocsLayout({ children }: { children: React.ReactNode }) {
       <Header
         onMenuToggle={() => setMenuOpen(!menuOpen)}
         menuOpen={menuOpen}
+        siteName={docsConfig.name}
+        navLinks={docsConfig.headerLinks}
       />
       <div className="flex">
         <Sidebar
           open={menuOpen}
           onClose={() => setMenuOpen(false)}
+          docsConfig={docsConfig}
         />
-        <main className="flex-1 min-w-0 px-4 md:px-8 py-6 md:ml-[var(--sidebar-width)] xl:mr-[var(--toc-width)]">
-          <div className="max-w-3xl mx-auto">
+        <main className="flex-1 min-w-0 px-6 md:px-10 py-8 md:ml-[var(--sidebar-width)] xl:mr-[var(--toc-width)]">
+          <div className="max-w-[var(--content-max-width)] mx-auto">
             <Breadcrumbs />
             <article className="prose">
               {children}
             </article>
+            <PrevNextNav docsConfig={docsConfig} />
           </div>
         </main>
         <TableOfContents />

package/dist/template/src/components/header.tsx

@@ -10,47 +10,59 @@ import { SyntaxThemeSelector } from './syntax-theme-selector'
 interface HeaderProps {
   onMenuToggle?: () => void
   menuOpen?: boolean
+  siteName?: string
+  navLinks?: Array<{ title: string; path: string }>
 }
 
-export function Header({ onMenuToggle, menuOpen }: HeaderProps) {
+export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks }: HeaderProps) {
   const [searchOpen, setSearchOpen] = useState(false)
 
   return (
     <>
-      <header className="sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-bg)]/95 backdrop-blur">
-        <div className="flex items-center justify-between h-16 px-4 md:px-6">
-          <div className="flex items-center gap-4">
+      <header className="sticky top-0 z-50 h-[var(--header-height)] border-b border-[var(--color-border)] bg-[var(--color-bg)]/80 backdrop-blur-xl">
+        <div className="flex items-center justify-between h-full px-4 md:px-6">
+          <div className="flex items-center gap-6">
             {/* Mobile menu button */}
             <button
               onClick={onMenuToggle}
-              className="md:hidden p-2 -ml-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text)]"
+              className="md:hidden p-1.5 -ml-1.5 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]"
               aria-label={menuOpen ? 'Close menu' : 'Open menu'}
               aria-expanded={menuOpen}
             >
-              {menuOpen ? <X size={20} /> : <Menu size={20} />}
+              {menuOpen ? <X size={18} /> : <Menu size={18} />}
             </button>
 
-            <Link href="/" className="font-semibold text-lg">
-              Docs
+            <Link href="/" className="font-semibold text-[0.9375rem] tracking-tight text-[var(--color-text)] hover:no-underline">
+              {siteName}
             </Link>
-            <nav className="hidden md:flex items-center gap-4">
-              <Link href="/docs" className="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)]">
+
+            <nav className="hidden md:flex items-center gap-1">
+              <Link
+                href="/docs"
+                className="px-3 py-1.5 text-[0.8125rem] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] rounded-lg hover:no-underline"
+              >
                 Documentation
               </Link>
-              <Link href="/docs/api" className="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)]">
-                API Reference
-              </Link>
+              {navLinks?.map((link) => (
+                <Link
+                  key={link.path}
+                  href={link.path}
+                  className="px-3 py-1.5 text-[0.8125rem] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] rounded-lg hover:no-underline"
+                >
+                  {link.title}
+                </Link>
+              ))}
             </nav>
           </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5">
             <button
               onClick={() => setSearchOpen(true)}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm text-[var(--color-text-tertiary)] bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg hover:border-[var(--color-border-strong)] transition-colors"
+              className="flex items-center gap-2 px-3 py-1.5 text-[0.8125rem] text-[var(--color-text-tertiary)] bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg hover:border-[var(--color-border-strong)] hover:text-[var(--color-text-secondary)]"
             >
-              <Search size={16} />
-              <span className="hidden sm:inline">Search docs...</span>
-              <kbd className="hidden sm:inline px-1.5 py-0.5 text-xs bg-[var(--color-bg-tertiary)] rounded">
+              <Search size={14} />
+              <span className="hidden sm:inline">Search...</span>
+              <kbd className="hidden sm:inline ml-2 px-1.5 py-0.5 text-[0.6875rem] font-medium bg-[var(--color-bg)] border border-[var(--color-border)] rounded">
                 ⌘K
               </kbd>
             </button>

package/dist/template/src/components/mdx/accordion.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, ReactNode } from 'react'
-import { ChevronDown } from 'lucide-react'
+import { ChevronRight } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 interface AccordionProps {
@@ -14,27 +14,30 @@ export function Accordion({ title, defaultOpen = false, children }: AccordionPro
   const [open, setOpen] = useState(defaultOpen)
 
   return (
-    <div className="border border-[var(--color-border)] rounded-lg my-4">
+    <div className="border-b border-[var(--color-border)] last:border-b-0">
       <button
         onClick={() => setOpen(!open)}
-        className="flex items-center justify-between w-full px-4 py-3 text-left font-medium hover:bg-[var(--color-bg-secondary)] transition-colors"
+        className="flex items-center gap-2 w-full py-3.5 text-left text-[0.875rem] font-medium text-[var(--color-text)] hover:text-[var(--color-primary)] transition-colors"
       >
-        {title}
-        <ChevronDown
-          size={20}
+        <ChevronRight
+          size={14}
           className={cn(
-            'text-[var(--color-text-tertiary)] transition-transform',
-            open && 'rotate-180'
+            'text-[var(--color-text-tertiary)] transition-transform duration-200 shrink-0',
+            open && 'rotate-90'
           )}
         />
+        {title}
       </button>
-      {open && (
-        <div className="px-4 pb-4 pt-0 border-t border-[var(--color-border)]">
-          <div className="pt-3 text-[var(--color-text-secondary)]">
-            {children}
-          </div>
+      <div
+        className={cn(
+          'overflow-hidden transition-all duration-200',
+          open ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'
+        )}
+      >
+        <div className="pl-5 pb-4 text-[0.8125rem] text-[var(--color-text-secondary)] leading-relaxed">
+          {children}
         </div>
-      )}
+      </div>
     </div>
   )
 }
@@ -44,5 +47,5 @@ interface AccordionGroupProps {
 }
 
 export function AccordionGroup({ children }: AccordionGroupProps) {
-  return <div className="my-6 space-y-2">{children}</div>
+  return <div className="my-6 border-t border-[var(--color-border)]">{children}</div>
 }

package/dist/template/src/components/mdx/callout.tsx

@@ -18,74 +18,87 @@ interface CalloutProps {
 
 const config: Record<CalloutType, {
   icon: typeof InfoIcon
-  bg: string
-  border: string
-  title: string
-  text: string
+  borderColor: string
+  iconColor: string
+  bgColor: string
+  titleColor: string
+  textColor: string
+  defaultTitle: string
 }> = {
   info: {
     icon: InfoIcon,
-    bg: 'bg-blue-50 dark:bg-blue-950/30',
-    border: 'border-blue-200 dark:border-blue-800',
-    title: 'text-blue-800 dark:text-blue-300',
-    text: 'text-blue-700 dark:text-blue-400',
+    borderColor: 'border-l-blue-500',
+    iconColor: 'text-blue-500',
+    bgColor: 'bg-blue-500/5',
+    titleColor: 'text-blue-600 dark:text-blue-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Info',
   },
   warning: {
     icon: AlertTriangle,
-    bg: 'bg-amber-50 dark:bg-amber-950/30',
-    border: 'border-amber-200 dark:border-amber-800',
-    title: 'text-amber-800 dark:text-amber-300',
-    text: 'text-amber-700 dark:text-amber-400',
+    borderColor: 'border-l-amber-500',
+    iconColor: 'text-amber-500',
+    bgColor: 'bg-amber-500/5',
+    titleColor: 'text-amber-600 dark:text-amber-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Warning',
   },
   success: {
     icon: CheckCircle,
-    bg: 'bg-green-50 dark:bg-green-950/30',
-    border: 'border-green-200 dark:border-green-800',
-    title: 'text-green-800 dark:text-green-300',
-    text: 'text-green-700 dark:text-green-400',
+    borderColor: 'border-l-emerald-500',
+    iconColor: 'text-emerald-500',
+    bgColor: 'bg-emerald-500/5',
+    titleColor: 'text-emerald-600 dark:text-emerald-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Success',
   },
   error: {
     icon: XCircle,
-    bg: 'bg-red-50 dark:bg-red-950/30',
-    border: 'border-red-200 dark:border-red-800',
-    title: 'text-red-800 dark:text-red-300',
-    text: 'text-red-700 dark:text-red-400',
+    borderColor: 'border-l-red-500',
+    iconColor: 'text-red-500',
+    bgColor: 'bg-red-500/5',
+    titleColor: 'text-red-600 dark:text-red-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Error',
   },
   tip: {
     icon: Lightbulb,
-    bg: 'bg-purple-50 dark:bg-purple-950/30',
-    border: 'border-purple-200 dark:border-purple-800',
-    title: 'text-purple-800 dark:text-purple-300',
-    text: 'text-purple-700 dark:text-purple-400',
+    borderColor: 'border-l-violet-500',
+    iconColor: 'text-violet-500',
+    bgColor: 'bg-violet-500/5',
+    titleColor: 'text-violet-600 dark:text-violet-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Tip',
   },
   note: {
     icon: InfoIcon,
-    bg: 'bg-gray-50 dark:bg-gray-900/50',
-    border: 'border-gray-200 dark:border-gray-700',
-    title: 'text-gray-800 dark:text-gray-200',
-    text: 'text-gray-700 dark:text-gray-300',
+    borderColor: 'border-l-[var(--color-border-strong)]',
+    iconColor: 'text-[var(--color-text-tertiary)]',
+    bgColor: 'bg-[var(--color-bg-secondary)]',
+    titleColor: 'text-[var(--color-text)]',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Note',
   },
 }
 
 export function Callout({ type = 'info', title, children }: CalloutProps) {
-  const { icon: Icon, bg, border, title: titleColor, text } = config[type]
+  const { icon: Icon, borderColor, iconColor, bgColor, titleColor, textColor, defaultTitle } = config[type]
 
   return (
-    <div className={cn('my-6 p-4 border rounded-lg', bg, border)}>
+    <div className={cn('my-6 rounded-lg border-l-4 py-3 px-4', borderColor, bgColor)}>
       <div className="flex gap-3">
-        <Icon className={cn('w-5 h-5 mt-0.5 flex-shrink-0', titleColor)} />
-        <div>
-          {title && (
-            <div className={cn('font-medium mb-1', titleColor)}>{title}</div>
-          )}
-          <div className={cn('text-sm', text)}>{children}</div>
+        <Icon className={cn('w-[18px] h-[18px] mt-0.5 flex-shrink-0', iconColor)} />
+        <div className="min-w-0">
+          <div className={cn('text-[0.8125rem] font-semibold mb-0.5', titleColor)}>
+            {title || defaultTitle}
+          </div>
+          <div className={cn('text-[0.8125rem] leading-relaxed [&>p]:my-1', textColor)}>{children}</div>
         </div>
       </div>
     </div>
   )
 }
 
-// Convenience components
 export function Info(props: Omit<CalloutProps, 'type'>) {
   return <Callout type="info" {...props} />
 }