docbook 0.1.0

data/frontend/src/components/EbookTopBar.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="ebook-topbar" :class="{ 'ebook-topbar--with-sidebar': sidebarOpen }">
+    <div class="flex items-center justify-between px-4 py-2">
+      <!-- Left: Menu button -->
+      <button
+        @click="$emit('toggle-toc')"
+        class="p-2 rounded-lg hover:bg-black/10 dark:hover:bg-white/10 text-gray-700 dark:text-gray-300 transition-colors"
+      >
+        <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>
+
+      <!-- Center: Title -->
+      <div class="flex-1 text-center px-4">
+        <h1 class="text-sm font-medium text-gray-700 dark:text-gray-300 truncate">
+          {{ title }}
+        </h1>
+      </div>
+
+      <!-- Right: Actions -->
+      <div class="flex items-center gap-1">
+        <!-- Font settings -->
+        <button
+          @click="$emit('toggle-settings')"
+          class="p-2 rounded-lg hover:bg-black/10 dark:hover:bg-white/10 text-gray-700 dark:text-gray-300 transition-colors"
+          title="Display 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="M4 6h16M4 12h16M4 18h7"/>
+          </svg>
+        </button>
+
+        <!-- Theme toggle -->
+        <button
+          @click="cycleTheme"
+          class="p-2 rounded-lg hover:bg-black/10 dark:hover:bg-white/10 text-gray-700 dark:text-gray-300 transition-colors"
+          :title="`Theme: ${currentTheme}`"
+        >
+          <svg v-if="currentTheme === 'day'" 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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+          </svg>
+          <svg v-else-if="currentTheme === 'sepia'" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+          </svg>
+          <svg v-else-if="currentTheme === 'night'" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+          </svg>
+          <svg v-else 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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEbookStore, type Theme } from '@/composables/useEbookStore'
+
+defineProps<{
+  title?: string
+  sidebarOpen?: boolean
+}>()
+
+defineEmits<{
+  'toggle-toc': []
+  'toggle-settings': []
+}>()
+
+const ebookStore = useEbookStore()
+const currentTheme = computed(() => ebookStore.theme.value)
+
+const themeOrder: Theme[] = ['day', 'sepia', 'night', 'oled']
+
+function cycleTheme() {
+  const currentIndex = themeOrder.indexOf(ebookStore.theme.value)
+  const nextIndex = (currentIndex + 1) % themeOrder.length
+  ebookStore.setTheme(themeOrder[nextIndex])
+}
+</script>
+
+<style scoped>
+.ebook-topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 30;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  transition: left 0.2s ease;
+}
+
+:global(.dark) .ebook-topbar {
+  background: rgba(17, 24, 39, 0.9);
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.ebook-topbar--with-sidebar {
+  left: 280px;
+}
+
+@media (max-width: 1023px) {
+  .ebook-topbar--with-sidebar {
+    left: 0;
+  }
+}
+
+.ebook-topbar button {
+  min-width: 44px;
+  min-height: 44px;
+}
+</style>

data/frontend/src/components/PartSection.vue

@@ -0,0 +1,44 @@
+<template>
+  <section :id="section.id" class="mb-12 scroll-mt-20">
+    <h1 class="text-2xl font-bold mb-6 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
+      {{ section.title }}
+    </h1>
+    <BlockRenderer v-if="sectionContent" :blocks="sectionContent.blocks" />
+    <!-- Render children -->
+    <template v-if="section.children && section.children.length > 0">
+      <div v-for="child in section.children" :key="child.id">
+        <component :is="getChildComponent(child.type)" :section="child" />
+      </div>
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, markRaw } from 'vue'
+import { useDocumentStore, type TocItem } from '@/stores/documentStore'
+import SectionContent from '@/components/SectionContent.vue'
+import ChapterSection from '@/components/ChapterSection.vue'
+import AppendixSection from '@/components/AppendixSection.vue'
+import BlockRenderer from '@/components/BlockRenderer.vue'
+
+interface Props {
+  section: TocItem
+}
+
+const props = defineProps<Props>()
+const documentStore = useDocumentStore()
+
+const sectionContent = computed(() => documentStore.getSectionContent(props.section.id))
+
+function getChildComponent(type: string) {
+  switch (type) {
+    case 'chapter':
+    case 'reference':
+      return markRaw(ChapterSection)
+    case 'appendix':
+      return markRaw(AppendixSection)
+    default:
+      return markRaw(SectionContent)
+  }
+}
+</script>

data/frontend/src/components/ReferenceEntry.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="reference-entry mb-8 border-l-4 border-cyan-600 pl-4 py-3 bg-cyan-50/50 dark:bg-cyan-900/10 rounded-r-lg">
+    <!-- Reference meta (from refmeta - subtle metadata at top) -->
+    <template v-for="(child, idx) in block.children" :key="'meta-' + idx">
+      <span
+        v-if="child.type === 'reference_meta'"
+        class="reference-meta text-xs text-gray-400 dark:text-gray-500 block mb-1"
+      >
+        {{ child.text }}
+      </span>
+    </template>
+
+    <!-- Reference badge (from refnamediv.refclass - e.g., "pi") -->
+    <template v-for="(child, idx) in block.children" :key="'badge-' + idx">
+      <span
+        v-if="child.type === 'reference_badge'"
+        class="reference-badge inline-block text-[0.65rem] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 mb-2"
+      >
+        {{ child.text }}
+      </span>
+    </template>
+
+    <!-- Reference name (from refnamediv.refname - THE HEADWORD) -->
+    <template v-for="(child, idx) in block.children" :key="'name-' + idx">
+      <h2
+        v-if="child.type === 'reference_name'"
+        class="reference-name text-2xl font-bold font-mono text-cyan-700 dark:text-cyan-400 mb-1"
+      >
+        {{ child.text }}
+      </h2>
+    </template>
+
+    <!-- Reference definition (from refnamediv.refpurpose - THE DEFINITION) -->
+    <template v-for="(child, idx) in block.children" :key="'def-' + idx">
+      <p
+        v-if="child.type === 'reference_definition'"
+        class="reference-definition text-base text-gray-600 dark:text-gray-400 italic mb-4"
+      >
+        {{ child.text }}
+      </p>
+    </template>
+
+    <!-- Description section (from refsection) -->
+    <template v-for="(child, idx) in block.children" :key="'section-' + idx">
+      <div
+        v-if="child.type === 'description_section'"
+        class="description-section mt-4 pt-4 border-t border-gray-200 dark:border-gray-700"
+      >
+        <BlockRenderer :blocks="child.children || []" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContentBlock } from '../stores/documentStore'
+import BlockRenderer from './BlockRenderer.vue'
+
+defineProps<{
+  block: ContentBlock
+}>()
+</script>
+
+<style scoped>
+.reference-entry {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+.reference-name {
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+}
+
+.reference-badge {
+  letter-spacing: 0.05em;
+}
+
+.description-section {
+  /* Container styling handled by parent */
+}
+</style>

data/frontend/src/components/SearchModal.vue

@@ -0,0 +1,286 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="uiStore.searchOpen"
+      class="fixed inset-0 bg-black/50 z-50 flex items-start justify-center pt-[10vh] transition-opacity duration-200"
+      @click.self="uiStore.closeSearch"
+    >
+      <div class="w-full max-w-xl bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transition-transform duration-200">
+        <!-- Search Input -->
+        <div class="flex items-center gap-3 p-4 border-b border-gray-200 dark:border-gray-700">
+          <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+          </svg>
+          <input
+            ref="inputRef"
+            v-model="searchQuery"
+            type="text"
+            class="flex-1 bg-transparent border-none outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400 text-base"
+            placeholder="Search headings and content..."
+            @keydown="handleKeydown"
+          />
+          <button
+            v-if="searchQuery"
+            @click="searchQuery = ''"
+            class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Search Results -->
+        <div class="max-h-80 overflow-y-auto">
+          <div v-if="isSearching" class="p-8 text-center text-gray-500">
+            Searching...
+          </div>
+          <div v-else-if="searchQuery && results.length === 0" class="p-8 text-center text-gray-500">
+            No results found for "{{ searchQuery }}"
+          </div>
+          <div v-else-if="results.length > 0" class="p-2">
+            <a
+              v-for="(result, index) in results"
+              :key="result.id"
+              :href="'#' + result.id"
+              @click="selectResult(result)"
+              class="flex flex-col gap-1 px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+              :class="{ 'bg-gray-100 dark:bg-gray-700': focusedIndex === index }"
+              @mouseenter="focusedIndex = index"
+            >
+              <div class="flex items-center gap-3">
+                <span class="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300">
+                  {{ result.type }}
+                </span>
+                <span class="flex-1 text-gray-900 dark:text-gray-100" v-html="highlightMatch(result.title)"></span>
+              </div>
+              <div v-if="result.snippet" class="text-xs text-gray-500 dark:text-gray-400 pl-[3.5rem] line-clamp-2" v-html="highlightMatch(result.snippet)"></div>
+            </a>
+          </div>
+          <div v-else class="p-8 text-center text-gray-400 text-sm">
+            Type to search...
+          </div>
+        </div>
+
+        <!-- Footer hints -->
+        <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+          <div class="flex gap-4 text-xs text-gray-400">
+            <span><kbd class="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-300">↑</kbd><kbd class="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-300 ml-0.5">↓</kbd> Navigate</span>
+            <span><kbd class="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-300">Enter</kbd> Select</span>
+            <span><kbd class="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-300">Esc</kbd> Close</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, nextTick } from 'vue'
+import { useDocumentStore, type TocItem, type ContentBlock } from '@/stores/documentStore'
+import { useUiStore } from '@/stores/uiStore'
+import FlexSearch from 'flexsearch'
+
+const documentStore = useDocumentStore()
+const uiStore = useUiStore()
+
+interface SearchResult {
+  id: string
+  title: string
+  type: 'chapter' | 'appendix' | 'part' | 'section' | 'glossary' | 'bibliography' | 'index' | 'reference' | 'preface'
+  children?: TocItem[]
+  snippet?: string
+}
+
+const searchQuery = ref('')
+const results = ref<SearchResult[]>([])
+const isSearching = ref(false)
+const focusedIndex = ref(0)
+const inputRef = ref<HTMLInputElement | null>(null)
+
+// FlexSearch Document index for titles
+const index = new (FlexSearch as any).Document({
+  document: {
+    id: 'id',
+    index: ['title'],
+    store: ['id', 'title', 'type']
+  },
+  tokenize: 'forward',
+  resolution: 9
+})
+
+function buildIndexes() {
+  const sections = documentStore.sections
+  addToIndex(sections)
+}
+
+function addToIndex(items: TocItem[]) {
+  items.forEach(item => {
+    index.add({
+      id: item.id,
+      title: item.title,
+      type: item.type
+    })
+    if (item.children && item.children.length > 0) {
+      addToIndex(item.children)
+    }
+  })
+}
+
+function extractTextFromBlocks(blocks: ContentBlock[]): string {
+  return blocks.map(block => {
+    let text = block.text || ''
+    if (block.children) {
+      text += ' ' + extractTextFromBlocks(block.children)
+    }
+    return text
+  }).join(' ')
+}
+
+function searchContent(query: string): SearchResult[] {
+  const content = documentStore.content
+  const searchResults: SearchResult[] = []
+  const lowerQuery = query.toLowerCase()
+
+  for (const [id, sectionContent] of Object.entries(content)) {
+    const text = extractTextFromBlocks(sectionContent.blocks || []).toLowerCase()
+    if (text.includes(lowerQuery)) {
+      // Find the snippet around the match
+      const matchPos = text.indexOf(lowerQuery)
+      const start = Math.max(0, matchPos - 50)
+      const end = Math.min(text.length, matchPos + query.length + 100)
+      let snippet = extractTextFromBlocks(sectionContent.blocks || []).substring(start, end)
+      if (start > 0) snippet = '...' + snippet
+      if (end < text.length) snippet = snippet + '...'
+
+      // Get section info from TOC
+      const section = findSection(documentStore.sections, id)
+      searchResults.push({
+        id,
+        title: section?.title || id,
+        type: (section?.type || 'section') as SearchResult['type'],
+        snippet
+      })
+    }
+  }
+  return searchResults
+}
+
+function findSection(items: TocItem[], id: string): TocItem | null {
+  for (const item of items) {
+    if (item.id === id) return item
+    if (item.children && item.children.length > 0) {
+      const found = findSection(item.children, id)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+function search() {
+  if (!searchQuery.value.trim()) {
+    results.value = []
+    return
+  }
+
+  isSearching.value = true
+
+  // Search titles with FlexSearch
+  const searchResults = index.search(searchQuery.value, { limit: 30, enrich: true })
+
+  const titleResults: Map<string, TocItem> = new Map()
+  const seen = new Set<string>()
+
+  if (Array.isArray(searchResults)) {
+    searchResults.forEach((field: { result: Array<{ id: string; doc?: TocItem }> }) => {
+      if (field.result && Array.isArray(field.result)) {
+        field.result.forEach((r: { id: string; doc?: TocItem }) => {
+          if (r.doc && !seen.has(r.id)) {
+            seen.add(r.id)
+            titleResults.set(r.id, r.doc)
+          }
+        })
+      }
+    })
+  }
+
+  // Search full content
+  const contentResults = searchContent(searchQuery.value)
+
+  // Combine results, prioritizing title matches
+  const combined: SearchResult[] = []
+
+  // First add title matches
+  titleResults.forEach((tocItem) => {
+    combined.push({
+      id: tocItem.id,
+      title: tocItem.title,
+      type: tocItem.type,
+      children: tocItem.children
+    })
+  })
+
+  // Then add content-only matches
+  contentResults.forEach((cr) => {
+    if (!seen.has(cr.id)) {
+      seen.add(cr.id)
+      combined.push(cr)
+    }
+  })
+
+  results.value = combined.slice(0, 50)
+  isSearching.value = false
+}
+
+// Debounced search
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+watch(searchQuery, () => {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(search, 150)
+})
+
+// Watch for document data changes to rebuild indexes
+watch(
+  () => documentStore.documentData,
+  () => {
+    buildIndexes()
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  nextTick(() => inputRef.value?.focus())
+})
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    focusedIndex.value = Math.min(focusedIndex.value + 1, results.value.length - 1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    focusedIndex.value = Math.max(focusedIndex.value - 1, 0)
+  } else if (e.key === 'Enter' && results.value[focusedIndex.value]) {
+    e.preventDefault()
+    selectResult(results.value[focusedIndex.value])
+  } else if (e.key === 'Escape') {
+    uiStore.closeSearch()
+  }
+}
+
+function selectResult(result: SearchResult) {
+  // Scroll to section and close search
+  const element = document.getElementById(result.id)
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth' })
+    uiStore.closeSearch()
+    searchQuery.value = ''
+    results.value = []
+  }
+}
+
+function highlightMatch(text: string): string {
+  if (!searchQuery.value) return text
+  const regex = new RegExp(`(${searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
+  return text.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-600 rounded px-0.5">$1</mark>')
+}
+</script>

data/frontend/src/components/SectionContent.vue

@@ -0,0 +1,31 @@
+<template>
+  <section :id="section.id" class="mb-8 scroll-mt-20">
+    <h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200">
+      <span v-if="numbering" class="text-gray-500 dark:text-gray-400 mr-2">{{ numbering }}</span>
+      {{ section.title }}
+    </h3>
+    <BlockRenderer v-if="sectionContent" :blocks="sectionContent.blocks" />
+    <!-- Render children -->
+    <template v-if="section.children && section.children.length > 0">
+      <div v-for="child in section.children" :key="child.id" class="ml-4">
+        <SectionContent :section="child" />
+      </div>
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDocumentStore, type TocItem } from '@/stores/documentStore'
+import BlockRenderer from '@/components/BlockRenderer.vue'
+
+interface Props {
+  section: TocItem
+}
+
+const props = defineProps<Props>()
+const documentStore = useDocumentStore()
+
+const numbering = computed(() => documentStore.getNumbering(props.section.id))
+const sectionContent = computed(() => documentStore.getSectionContent(props.section.id))
+</script>