feat: add Callout component with note/tip/warning/danger variants

app/globals.css

@@ -632,3 +632,46 @@ body, body *, [class*="bg-"], [class*="border-"], [class*="text-"] {
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
 }
+
+/* Callout/Admonition styles */
+.callout {
+  @apply my-6 rounded-lg border p-4 text-sm leading-relaxed;
+}
+.callout-title {
+  @apply flex items-center gap-2 font-semibold mb-2;
+}
+.callout-icon {
+  @apply text-base;
+}
+.callout-content {
+  @apply pl-6;
+}
+
+/* Type variants */
+.callout-note {
+  @apply border-accent/30 bg-accent/[0.06];
+}
+.callout-note .callout-title {
+  @apply text-accent;
+}
+
+.callout-tip {
+  @apply border-emerald-500/30 bg-emerald-500/[0.06];
+}
+.callout-tip .callout-title {
+  @apply text-emerald-600 dark:text-emerald-400;
+}
+
+.callout-warning {
+  @apply border-amber-500/30 bg-amber-500/[0.06];
+}
+.callout-warning .callout-title {
+  @apply text-amber-600 dark:text-amber-400;
+}
+
+.callout-danger {
+  @apply border-red-500/30 bg-red-500/[0.06];
+}
+.callout-danger .callout-title {
+  @apply text-red-600 dark:text-red-400;
+}

components/ui/Callout.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+interface CalloutProps {
+  type?: 'note' | 'tip' | 'warning' | 'danger';
+  title?: string;
+  children: ReactNode;
+}
+
+const iconMap: Record<string, string> = {
+  note: 'ℹ️',
+  tip: '💡',
+  warning: '⚠️',
+  danger: '🚫',
+};
+
+const typeClasses: Record<string, string> = {
+  note: 'callout-note',
+  tip: 'callout-tip',
+  warning: 'callout-warning',
+  danger: 'callout-danger',
+};
+
+export function Callout({ type = 'note', title, children }: CalloutProps) {
+  const className = `callout ${typeClasses[type] || typeClasses.note}`;
+
+  return (
+    <div className={className} role="note">
+      {title && (
+        <div className="callout-title">
+          <span className="callout-icon">{iconMap[type] || iconMap.note}</span>
+          <span>{title}</span>
+        </div>
+      )}
+      <div className="callout-content">{children}</div>
+    </div>
+  );
+}

mdx-components.tsx

@@ -1,9 +1,11 @@
 import type { MDXComponents } from 'mdx/types'
+import { Callout } from '@/components/ui/Callout'
 
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...components,
+    Callout,
     // Typography
     h1: (props) => (
       <h1 {...props} className="scroll-m-20 heading-xl text-ink mt-10 mb-4">