feat: add remark-directive and callout directive transformer

lib/callout-directive.js

@@ -0,0 +1,41 @@
+import { visit } from 'unist-util-visit';
+
+export default function calloutDirective() {
+  return (tree) => {
+    visit(tree, (node) => {
+      // Handle textDirective (has content) and leafDirective (no content)
+      if (node.type === 'textDirective' || node.type === 'leafDirective') {
+        const name = node.name;
+
+        // Only handle known callout types
+        const validTypes = ['note', 'tip', 'warning', 'danger'];
+        if (!validTypes.includes(name)) return;
+
+        // Extract attributes (e.g., title="...")
+        const attributes = node.attributes || [];
+        const attrs = attributes.map((attr) => ({
+          type: 'mdxJsxAttribute',
+          name: attr.name,
+          value: attr.value,
+        }));
+
+        // Add type attribute
+        attrs.push({
+          type: 'mdxJsxAttribute',
+          name: 'type',
+          value: { type: 'mdxFlowExpression', value: `"${name}"` },
+        });
+
+        // Build children from node's children
+        const children = node.children || [];
+
+        // Transform to mdxJsxFlowElement
+        node.type = 'mdxJsxFlowElement';
+        node.name = 'Callout';
+        node.attributes = attrs;
+        node.children = children;
+        node.data = { hName: 'Callout', hProperties: {} };
+      }
+    });
+  };
+}