metanorma-document 0.2.9 → 0.2.12

data/frontend/src/components/TopBar.vue

@@ -0,0 +1,49 @@
+<template>
+  <header class="topbar">
+    <div class="topbar-left">
+      <button @click="$emit('toggleToc')" class="topbar-btn" title="Toggle TOC">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
+      </button>
+      <span class="topbar-title">{{ title }}</span>
+    </div>
+    <div class="topbar-right">
+      <button @click="$emit('toggleSettings')" class="topbar-btn" title="Settings">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+      </button>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  sidebarOpen: boolean
+}>()
+
+defineEmits<{
+  toggleToc: []
+  toggleSettings: []
+}>()
+</script>
+
+<style scoped>
+.topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  background: var(--chrome-bg);
+  border-bottom: 1px solid var(--chrome-border);
+  z-index: 40;
+  backdrop-filter: blur(8px);
+}
+.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }
+.topbar-title { font-size: 0.85rem; font-weight: 600; color: var(--chrome-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }
+.topbar-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--chrome-text-dim); cursor: pointer; }
+.topbar-btn:hover { background: var(--chrome-bg-hover); color: var(--chrome-text); }
+</style>

data/frontend/src/components/__tests__/MirrorRenderer.test.ts

@@ -0,0 +1,178 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import MirrorRenderer from '../../components/MirrorRenderer.vue'
+import { useDocumentStore } from '../../stores/documentStore'
+import fixture from '@test/fixtures/iso-document.json'
+
+function mountRenderer(content: any[]) {
+  setActivePinia(createPinia())
+  const store = useDocumentStore()
+  store.processMetanormaData(fixture)
+
+  const wrapper = mount(MirrorRenderer, {
+    props: { blocks: content },
+    global: { plugins: [createPinia()] },
+  })
+
+  // Need to set up store after pinia is injected
+  const store2 = useDocumentStore()
+  store2.processMetanormaData(fixture)
+
+  return wrapper
+}
+
+describe('MirrorRenderer with fixture data', () => {
+  it('renders top-level sections', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('Foreword')
+    expect(html).toContain('Scope')
+    expect(html).toContain('Normative references')
+    expect(html).toContain('Terms and definitions')
+    expect(html).toContain('Test methods')
+  })
+
+  it('renders paragraphs with text content', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('ISO (the International Organization')
+    expect(html).toContain('the test methods')
+  })
+
+  it('renders strong marks', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('the test methods')
+    // Vue adds scoped data attributes and CSS classes, so check tag + text
+    const strongEls = wrapper.findAll('strong')
+    const texts = strongEls.map(e => e.text())
+    expect(texts).toContain('the test methods')
+  })
+
+  it('renders emphasis marks', () => {
+    const wrapper = mountRenderer(fixture.content!)
+
+    const emEls = wrapper.findAll('em')
+    const texts = emEls.map(e => e.text())
+    expect(texts).toContain('Oryza sativa L.')
+    expect(texts).toContain('Oryza glaberrima')
+  })
+
+  it('renders bullet lists', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('Milling quality assessment')
+    expect(html).toContain('Moisture content determination')
+    expect(html).toContain('<ul')
+    expect(html).toContain('<li')
+  })
+
+  it('renders tables with thead and tbody', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('Parameter')
+    expect(html).toContain('Method')
+    expect(html).toContain('Unit')
+    expect(html).toContain('ISO 712')
+    expect(html).toContain('ISO 520')
+  })
+
+  it('renders admonition blocks', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('(20 ± 2) °C')
+    expect(html).toContain('admonition-warning')
+  })
+
+  it('renders sourcecode blocks', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('moisture_content')
+    expect(html).toContain('python')
+  })
+
+  it('renders figures with images', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('grain.png')
+    expect(html).toContain('Grain structure diagram')
+    expect(html).toContain('Grain structure')
+  })
+
+  it('renders ordered lists', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('Weigh the sample')
+    expect(html).toContain('Dry at 130 °C')
+    expect(html).toContain('<ol')
+  })
+
+  it('renders blockquotes', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('Precision is the soul of science')
+    expect(html).toContain('blockquote')
+  })
+
+  it('renders nested clauses (terms)', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('rice')
+    expect(html).toContain('Oryza sativa L.')
+  })
+
+  it('renders xref marks as links', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('ISO 712')
+    // xref should produce an <a> tag with href to target
+    expect(html).toMatch(/href.*iso712/)
+  })
+
+  it('renders notes with title', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('Note')
+    expect(html).toContain('paddy rice')
+  })
+
+  it('renders examples', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('Long-grain rice')
+  })
+
+  it('renders formula blocks', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('formula')
+  })
+
+  it('renders footnotes section', () => {
+    const wrapper = mountRenderer(fixture.content!)
+    const html = wrapper.html()
+
+    expect(html).toContain('Published by ISO')
+  })
+
+  it('renders document with no content without error', () => {
+    const wrapper = mountRenderer([])
+    expect(wrapper.html()).toContain('content-blocks')
+  })
+})

data/frontend/src/components/blocks/AdmonitionBlock.vue

@@ -0,0 +1,74 @@
+<template>
+  <div :class="getAdmonitionClass(block.attrs?.type)" class="admonition">
+    <div class="admonition-icon" v-html="getAdmonitionIconSvg(block.attrs?.type)"></div>
+    <div class="admonition-content">
+      <div class="admonition-title">{{ getAdmonitionTitle(block.attrs?.type) }}</div>
+      <MirrorRenderer :blocks="block.content || []" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+
+const ADMONITION_TITLES: Record<string, string> = {
+  danger: 'Danger', caution: 'Caution', warning: 'Warning',
+  important: 'Important', 'safety precautions': 'Safety Precautions',
+  editorial: 'Editorial', tip: 'Tip', note: 'Note', commentary: 'Commentary',
+}
+
+function getAdmonitionClass(type: string | undefined): string {
+  switch (type) {
+    case 'note': return 'admonition-note'
+    case 'warning': return 'admonition-warning'
+    case 'danger': return 'admonition-danger'
+    case 'caution': return 'admonition-caution'
+    case 'important': return 'admonition-important'
+    case 'tip': return 'admonition-tip'
+    case 'editorial': return 'admonition-editorial'
+    default: return 'admonition-note'
+  }
+}
+
+function getAdmonitionIconSvg(type: string | undefined): string {
+  const s = 'width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"'
+  switch (type) {
+    case 'note':
+      return `<svg ${s}><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`
+    case 'warning':
+      return `<svg ${s}><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`
+    case 'danger':
+      return `<svg ${s}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`
+    case 'caution':
+      return `<svg ${s}><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`
+    case 'important':
+      return `<svg ${s}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`
+    case 'tip':
+      return `<svg ${s}><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2z"/></svg>`
+    default:
+      return `<svg ${s}><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`
+  }
+}
+
+function getAdmonitionTitle(type: string | undefined): string {
+  return ADMONITION_TITLES[type || ''] || (type ? type.charAt(0).toUpperCase() + type.slice(1) : 'Note')
+}
+</script>
+
+<style scoped>
+.admonition { display: flex; gap: 12px; padding: 14px 16px; border-radius: 8px; margin: 16px 0; }
+.admonition-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
+.admonition-icon :deep(svg) { width: 20px; height: 20px; }
+.admonition-title { font-weight: 700; margin-bottom: 4px; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.04em; }
+.admonition-content { flex: 1; min-width: 0; }
+.admonition-note { background: color-mix(in srgb, #0d9488 10%, var(--ebook-bg)); color: color-mix(in srgb, #0d9488 70%, var(--ebook-text)); border-left: 3px solid #0d9488; }
+.admonition-warning { background: color-mix(in srgb, #eab308 10%, var(--ebook-bg)); color: color-mix(in srgb, #eab308 70%, var(--ebook-text)); border-left: 3px solid #eab308; }
+.admonition-danger { background: color-mix(in srgb, #ef4444 10%, var(--ebook-bg)); color: color-mix(in srgb, #ef4444 70%, var(--ebook-text)); border-left: 3px solid #ef4444; }
+.admonition-caution { background: color-mix(in srgb, #f97316 10%, var(--ebook-bg)); color: color-mix(in srgb, #f97316 70%, var(--ebook-text)); border-left: 3px solid #f97316; }
+.admonition-important { background: color-mix(in srgb, #a855f7 10%, var(--ebook-bg)); color: color-mix(in srgb, #a855f7 70%, var(--ebook-text)); border-left: 3px solid #a855f7; }
+.admonition-tip { background: color-mix(in srgb, #22c55e 10%, var(--ebook-bg)); color: color-mix(in srgb, #22c55e 70%, var(--ebook-text)); border-left: 3px solid #22c55e; }
+.admonition-editorial { background: color-mix(in srgb, #6366f1 10%, var(--ebook-bg)); color: color-mix(in srgb, #6366f1 70%, var(--ebook-text)); border-left: 3px solid #6366f1; }
+</style>

data/frontend/src/components/blocks/ClauseBlock.vue

@@ -0,0 +1,53 @@
+<template>
+  <component :is="meta.tag" :id="block.attrs?.id" class="mn-clause mb-6">
+    <component
+      v-if="block.attrs?.title"
+      :is="meta.headingTag"
+      :class="['heading-with-anchor heading-text', meta.headingClass]"
+    >
+      <a
+        v-if="block.attrs?.id"
+        :href="`#${block.attrs.id}`"
+        class="anchor-link"
+        @click.prevent="copyAnchor(block.attrs.id)"
+      >#</a>
+      <span v-if="getNumbering(block.attrs?.id)" class="muted-text mr-2">{{ getNumbering(block.attrs?.id) }}</span>
+      {{ block.attrs.title }}
+    </component>
+    <MirrorRenderer :blocks="block.content || []" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import { useDocumentStore } from '@/stores/documentStore'
+import { SECTION_META } from '@/utils/typeMetadata'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+const props = defineProps<{ block: MirrorBlockNode }>()
+
+const documentStore = useDocumentStore()
+
+const meta = computed(() => {
+  return SECTION_META[props.block.type] || SECTION_META['clause']!
+})
+
+function getNumbering(id: string | undefined): string {
+  if (!id) return ''
+  return documentStore.getNumbering(id)
+}
+
+function copyAnchor(id: string) {
+  const url = `${window.location.origin}${window.location.pathname}#${id}`
+  navigator.clipboard.writeText(url)
+}
+</script>
+
+<style scoped>
+.heading-text { color: var(--ebook-text-heading); }
+.muted-text { color: var(--ebook-text-muted); }
+.heading-with-anchor { position: relative; scroll-margin-top: 70px; }
+.anchor-link { position: absolute; left: -1.2em; color: var(--ebook-text-muted); opacity: 0; transition: opacity 0.15s ease; text-decoration: none; font-weight: 400; font-size: 0.7em; }
+.heading-with-anchor:hover .anchor-link, .anchor-link:focus { opacity: 1; }
+</style>

data/frontend/src/components/blocks/ExampleBlock.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :id="block.attrs?.id" class="mn-example">
+    <div class="example-label">EXAMPLE</div>
+    <div class="example-content">
+      <MirrorRenderer :blocks="block.content || []" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+</script>
+
+<style scoped>
+.mn-example { padding: 1rem 1.25rem; margin: 1.25rem 0; border-radius: 8px; border-left: 3px solid #3b82f6; background: color-mix(in srgb, var(--ebook-bg-secondary) 50%, transparent); }
+.example-label { font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #3b82f6; margin-bottom: 6px; }
+.example-content { color: var(--ebook-text); }
+</style>

data/frontend/src/components/blocks/FallbackBlock.vue

@@ -0,0 +1,18 @@
+<template>
+  <div :id="block.attrs?.id" class="mn-fallback">
+    <div class="fallback-type">{{ block.type }}</div>
+    <MirrorRenderer v-if="block.content?.length" :blocks="block.content" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+</script>
+
+<style scoped>
+.mn-fallback { padding: 0.5rem 0; }
+.fallback-type { font-family: ui-monospace, monospace; font-size: 0.65rem; color: var(--ebook-text-muted); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.05em; }
+</style>

data/frontend/src/components/blocks/FigureBlock.vue

@@ -0,0 +1,26 @@
+<template>
+  <figure :id="block.attrs?.id" class="mn-figure">
+    <template v-if="block.type === 'image'">
+      <img :src="block.attrs?.src" :alt="block.attrs?.alt || ''"
+           :height="block.attrs?.height" :width="block.attrs?.width"
+           loading="lazy" class="figure-image" />
+    </template>
+    <template v-else>
+      <MirrorRenderer :blocks="block.content || []" />
+    </template>
+    <figcaption v-if="block.attrs?.title" class="figure-caption">{{ block.attrs.title }}</figcaption>
+  </figure>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+</script>
+
+<style scoped>
+.mn-figure { margin: 2rem 0; padding: 1rem; background: color-mix(in srgb, var(--ebook-bg-secondary) 40%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ebook-border) 60%, transparent); }
+.figure-image { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 0 auto; }
+.figure-caption { text-align: center; font-size: 0.78rem; color: var(--ebook-text-muted); margin-top: 0.6rem; font-style: italic; }
+</style>

data/frontend/src/components/blocks/FootnotesBlock.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="mn-footnotes">
+    <ol class="footnotes-list">
+      <li v-for="(fn, index) in (block.content || [])" :key="index" :id="(fn as any).attrs?.id" class="footnote-entry">
+        <MirrorRenderer :blocks="(fn as any).content || []" />
+        <a v-if="(fn as any).attrs?.ref_id" :href="`#${(fn as any).attrs.ref_id}`" class="footnote-backref">&#8617;</a>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+</script>
+
+<style scoped>
+.mn-footnotes { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ebook-border); }
+.footnotes-list { list-style-type: decimal; padding-left: 1.5rem; font-size: 0.85rem; color: var(--ebook-text-muted); }
+.footnote-entry { margin-bottom: 0.5rem; line-height: 1.6; }
+.footnote-backref { color: var(--ebook-link-color); text-decoration: none; margin-left: 4px; }
+.footnote-backref:hover { text-decoration: underline; }
+</style>

data/frontend/src/components/blocks/ListBlocks.vue

@@ -0,0 +1,62 @@
+<template>
+  <component :is="listTag" :class="listClass">
+    <template v-for="(item, index) in (block.content || [])" :key="index">
+      <template v-if="item.type === 'list_item'">
+        <li class="mn-list-item">
+          <template v-for="(child, ci) in (item.content || [])" :key="ci">
+            <TextRenderer v-if="child.type === 'text'" :node="child as any" />
+            <br v-else-if="child.type === 'soft_break'" />
+            <component v-else :is="getBlockComponent(child.type)" :block="child" />
+          </template>
+        </li>
+      </template>
+      <template v-else-if="item.type === 'dt'">
+        <dt class="mn-dt">
+          <template v-for="(child, ci) in (item.content || [])" :key="ci">
+            <TextRenderer v-if="child.type === 'text'" :node="child as any" />
+          </template>
+        </dt>
+      </template>
+      <template v-else-if="item.type === 'dd'">
+        <dd class="mn-dd">
+          <MirrorRenderer :blocks="item.content || []" />
+        </dd>
+      </template>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import TextRenderer from '@/components/TextRenderer.vue'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+import { getBlockComponent } from './index'
+
+const props = defineProps<{ block: MirrorBlockNode }>()
+
+const listTag = computed(() => {
+  switch (props.block.type) {
+    case 'ordered_list': return 'ol'
+    case 'dl': return 'dl'
+    default: return 'ul'
+  }
+})
+
+const listClass = computed(() => {
+  switch (props.block.type) {
+    case 'ordered_list': return 'mn-ordered-list'
+    case 'dl': return 'mn-definition-list'
+    default: return 'mn-bullet-list'
+  }
+})
+</script>
+
+<style scoped>
+.mn-bullet-list { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
+.mn-ordered-list { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
+.mn-definition-list { margin: 1rem 0; }
+.mn-list-item { margin-bottom: 0.3rem; line-height: 1.65; color: var(--ebook-text); }
+.mn-dt { font-weight: 600; color: var(--ebook-text-heading); margin-top: 1rem; }
+.mn-dd { margin-left: 1.5rem; margin-bottom: 0.5rem; color: var(--ebook-text); line-height: 1.65; }
+</style>

data/frontend/src/components/blocks/NoteBlock.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :id="block.attrs?.id" class="mn-note">
+    <div class="note-title">Note</div>
+    <div class="note-content">
+      <MirrorRenderer :blocks="block.content || []" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+</script>
+
+<style scoped>
+.mn-note { padding: 1rem 1.25rem; margin: 1.25rem 0; border-radius: 8px; border-left: 3px solid #0d9488; background: color-mix(in srgb, var(--ebook-bg-secondary) 50%, transparent); }
+.note-title { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #0d9488; margin-bottom: 6px; }
+.note-content { color: var(--ebook-text); }
+</style>

data/frontend/src/components/blocks/ParagraphBlock.vue

@@ -0,0 +1,25 @@
+<template>
+  <p :id="block.attrs?.id" class="mn-paragraph mb-3 ebook-text leading-relaxed">
+    <template v-for="(child, ci) in block.content" :key="ci">
+      <TextRenderer v-if="child.type === 'text'" :node="child as any" />
+      <br v-else-if="child.type === 'soft_break'" />
+      <sup v-else-if="child.type === 'footnote_marker'" class="footnote-marker">
+        <a :href="`#${child.attrs?.ref_id}`" :id="child.attrs?.id">{{ child.attrs?.number || '*' }}</a>
+      </sup>
+    </template>
+  </p>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import TextRenderer from '@/components/TextRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+</script>
+
+<style scoped>
+.ebook-text { color: var(--ebook-text); }
+.footnote-marker { font-size: 0.75em; vertical-align: super; line-height: 0; }
+.footnote-marker a { color: var(--ebook-link-color); text-decoration: none; cursor: pointer; }
+.footnote-marker a:hover { text-decoration: underline; }
+</style>

data/frontend/src/components/blocks/QuoteBlock.vue

@@ -0,0 +1,25 @@
+<template>
+  <blockquote :id="block.attrs?.id" class="mn-quote">
+    <MirrorRenderer :blocks="block.content || []" />
+  </blockquote>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+</script>
+
+<style scoped>
+.mn-quote {
+  position: relative;
+  border-left: 3px solid var(--ebook-accent);
+  padding: 0.75rem 1.25rem 0.75rem 1.5rem;
+  margin: 1.5rem 0;
+  font-style: italic;
+  color: var(--ebook-text-muted);
+  background: color-mix(in srgb, var(--ebook-bg-secondary) 60%, transparent);
+  border-radius: 0 8px 8px 0;
+}
+</style>

data/frontend/src/components/blocks/ReviewBlock.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :id="block.attrs?.id" class="mn-review mb-4 border-l-3 rounded-md" :class="borderClass">
+    <div v-if="block.attrs?.title || block.attrs?.reviewer" class="review-header">
+      <span v-if="block.attrs?.title" class="review-title">{{ block.attrs.title }}</span>
+      <span v-if="block.attrs?.reviewer" class="review-reviewer">— {{ block.attrs.reviewer }}</span>
+    </div>
+    <div class="review-content">
+      <MirrorRenderer :blocks="block.content || []" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+const props = defineProps<{ block: MirrorBlockNode }>()
+
+const borderClass = computed(() => {
+  switch (props.block.attrs?.review_type) {
+    case 'editorial': return 'review-editorial'
+    case 'technical': return 'review-technical'
+    case 'general': return 'review-general'
+    default: return 'review-general'
+  }
+})
+</script>
+
+<style scoped>
+.mn-review { border-left: 3px solid var(--ebook-border); padding: 0.75rem 1rem; background: var(--ebook-bg-secondary); }
+.review-header { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; }
+.review-title { color: var(--ebook-text-heading); }
+.review-reviewer { color: var(--ebook-text-muted); font-weight: 400; }
+.review-content { font-size: 0.9rem; }
+.review-editorial { border-left-color: #f59e0b; }
+.review-technical { border-left-color: #ef4444; }
+.review-general { border-left-color: #3b82f6; }
+</style>