metanorma-document 0.2.12 → 0.2.13

data/frontend/src/components/TopBar.vue

@@ -1,49 +0,0 @@
-<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

@@ -1,178 +0,0 @@
-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

@@ -1,74 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1,62 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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>