callouts: container directive support, mono tags

components/ui/Callout.tsx

@@ -8,11 +8,11 @@ interface CalloutProps {
   children: ReactNode;
 }
 
-const iconMap: Record<string, string> = {
+const tagMap: Record<string, string> = {
-  note: 'ℹ️',
+  note: 'NOTE',
-  tip: '💡',
+  tip: 'TIP',
-  warning: '⚠️',
+  warning: 'WARNING',
-  danger: '🚫',
+  danger: 'DANGER',
 };
 
 const typeClasses: Record<string, string> = {
@@ -27,12 +27,14 @@ export function Callout({ type = 'note', title, children }: CalloutProps) {
 
   return (
     <div className={className} role="note">
-      {title && (
+      <div className="callout-title">
-        <div className="callout-title">
+        <span className="text-[11px] font-mono tracking-[0.16em]">
-          <span className="callout-icon">{iconMap[type] || iconMap.note}</span>
+          {tagMap[type] || tagMap.note}
+        </span>
+        {title && (
           <span>{title}</span>
-        </div>
+        )}
-      )}
+      </div>
       <div className="callout-content">{children}</div>
     </div>
   );

lib/callout-directive.js

@@ -3,8 +3,12 @@ import { visit } from 'unist-util-visit';
 export default function calloutDirective() {
   return (tree) => {
     visit(tree, (node) => {
-      // Handle textDirective (has content) and leafDirective (no content)
+      // Handle textDirective, leafDirective, and containerDirective callouts
-      if (node.type === 'textDirective' || node.type === 'leafDirective') {
+      if (
+        node.type === 'textDirective' ||
+        node.type === 'leafDirective' ||
+        node.type === 'containerDirective'
+      ) {
         const name = node.name;
 
         // Only handle known callout types
@@ -12,11 +16,10 @@ export default function calloutDirective() {
         if (!validTypes.includes(name)) return;
 
         // Extract attributes (e.g., title="...")
-        const attributes = node.attributes || [];
+        const attrs = Object.entries(node.attributes ?? {}).map(([name, value]) => ({
-        const attrs = attributes.map((attr) => ({
           type: 'mdxJsxAttribute',
-          name: attr.name,
+          name,
-          value: attr.value,
+          value,
         }));
 
         // Add type attribute