callouts: container directive support, mono tags

components/ui/Callout.tsx

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