feat(mdxish): support tutorial tile in mdxish

__tests__/lib/mdxish/magic-blocks.test.ts

@@ -145,6 +145,46 @@ ${JSON.stringify(
     });
   });
 
+  describe('recipe block', () => {
+    it('should restore tutorial-tile block to Recipe component', () => {
+      const md = `[block:tutorial-tile]
+{
+  "emoji": "🦉",
+  "slug": "whoaaa",
+  "title": "WHOAAA"
+}
+[/block]`;
+
+      const ast = mdxish(md);
+      expect(ast.children).toHaveLength(1);
+      expect(ast.children[0].type).toBe('element');
+
+      const recipeElement = ast.children[0] as Element;
+      expect(recipeElement.tagName).toBe('Recipe');
+      expect(recipeElement.properties.slug).toBe('whoaaa');
+      expect(recipeElement.properties.title).toBe('WHOAAA');
+    });
+
+    it('should restore recipe block to Recipe component', () => {
+      const md = `[block:recipe]
+{
+  "slug": "test-recipe",
+  "title": "Test Recipe",
+  "emoji": "👉"
+}
+[/block]`;
+
+      const ast = mdxish(md);
+      expect(ast.children).toHaveLength(1);
+      expect(ast.children[0].type).toBe('element');
+
+      const recipeElement = ast.children[0] as Element;
+      expect(recipeElement.tagName).toBe('Recipe');
+      expect(recipeElement.properties.slug).toBe('test-recipe');
+      expect(recipeElement.properties.title).toBe('Test Recipe');
+    });
+  });
+
   describe('callout block', () => {
     it('should restore callout block', () => {
       const md = '[block:callout]{"type":"info","title":"Note","body":"This is important"}[/block]';

processor/transform/mdxish/mdxish-magic-blocks.ts

@@ -79,6 +79,15 @@ interface HtmlJson extends MagicBlockJson {
   html: string;
 }
 
+interface RecipeJson extends MagicBlockJson {
+  backgroundColor?: string;
+  emoji?: string;
+  id?: string;
+  link?: string;
+  slug: string;
+  title: string;
+}
+
 export interface ParseMagicBlockOptions {
   alwaysThrow?: boolean;
   compatibilityMode?: boolean;
@@ -379,6 +388,27 @@ function parseMagicBlock(raw: string, options: ParseMagicBlockOptions = {}): Mda
       ];
     }
 
+    // Recipe/TutorialTile: renders as Recipe component
+    case 'recipe':
+    case 'tutorial-tile': {
+      const recipeJson = json as RecipeJson;
+      if (!recipeJson.slug || !recipeJson.title) return [];
+
+      // Create mdxJsxFlowElement directly for mdxish flow
+      // Note: Don't wrap in pinned blocks for mdxish - rehypeMdxishComponents handles component resolution
+      // The node structure matches what mdxishComponentBlocks creates for JSX tags
+      const recipeNode: MdxJsxFlowElement = {
+        type: 'mdxJsxFlowElement',
+        name: 'Recipe',
+        attributes: toAttributes(recipeJson, ['slug', 'title']),
+        children: [],
+        // Position is optional but helps with debugging
+        position: undefined,
+      };
+
+      return [recipeNode as unknown as MdastNode];
+    }
+
     // Unknown block types: render as generic div with JSON properties
     default: {
       const text = (json as { html?: string; text?: string }).text || (json as { html?: string }).html || '';