Add ink integration UI and media playback

public/js/layout-renderer-module.js

@@ -96,6 +96,15 @@ class LayoutRendererModule extends BaseModule {
         }
 
         const lineHeight = lineHeightPx || parseFloat(window.getComputedStyle(paragraph).lineHeight) || 24;
+        if (layoutData.role === 'chapter-heading') {
+            paragraph.style.marginTop = `${lineHeight * 2}px`;
+            paragraph.style.marginBottom = `${lineHeight}px`;
+        } else if (layoutData.role === 'section-heading') {
+            paragraph.style.marginTop = `${lineHeight}px`;
+            paragraph.style.marginBottom = `${lineHeight}px`;
+        } else if (layoutData.addTopSpace) {
+            paragraph.style.marginTop = `${lineHeight}px`;
+        }
         const maxLineWidth = Array.isArray(measures) && measures.length > 0
             ? Math.max(...measures)
             : storyElement.clientWidth;
@@ -139,7 +148,9 @@ class LayoutRendererModule extends BaseModule {
                 : lineWidth;
             const lineOffset = isCentered
                 ? Math.max(0, (maxLineWidth - naturalLineWidth) / 2)
-                : maxLineWidth - lineWidth;
+                : Array.isArray(layoutData.lineOffsets)
+                    ? (layoutData.lineOffsets[Math.min(lineIndex, layoutData.lineOffsets.length - 1)] || 0)
+                    : maxLineWidth - lineWidth;
 
             let currentLeft = 0;
             lastChild = null;