Add ink integration UI and media playback

public/js/text-buffer-module.js

@@ -21,6 +21,7 @@ class TextBufferModule extends BaseModule {
         // Bind methods using parent's bindMethods utility
         this.bindMethods([
             'addText',
+            'addBlock',
             'splitIntoParagraphs',
             'processNextFromQueue',
             'processSentences',
@@ -135,6 +136,43 @@ class TextBufferModule extends BaseModule {
         }
     }
 
+    /**
+     * Add an already parsed render block to the processing queue.
+     * Engine protocols should prefer this over re-serializing tags into text markup.
+     * @param {Object} block - Parsed paragraph/media/heading block
+     */
+    addBlock(block) {
+        if (!block || !block.type) return;
+
+        if (block.type === 'paragraph') {
+            const paragraphId = block.id || `paragraph-${this.paragraphCounter + 1}`;
+            this.processingQueue.push({
+                ...block,
+                id: paragraphId,
+                paragraphIndex: this.paragraphCounter,
+                textBlockId: this.currentTextBlockId,
+                text: String(block.text || '').trim(),
+                layoutText: block.layoutText || block.text || ''
+            });
+            this.paragraphCounter += 1;
+        } else {
+            this.processingQueue.push({
+                ...block,
+                id: block.id || `${block.type}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+            });
+
+            if (block.type === 'image') {
+                this.currentTextBlockId += 1;
+            }
+        }
+
+        if (!this.isProcessingActive && this.onSentenceReadyCallback) {
+            this.processNextFromQueue();
+        } else {
+            console.log(`TextBuffer: ${block.type} block queued for processing`);
+        }
+    }
+
     /**
      * Split an incoming narrative fragment into book paragraphs.
      * Single newlines inside a paragraph are normalized to spaces; blank lines