metanorma-document 0.2.9 → 0.2.12

data/frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "metanorma-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@types/prismjs": "^1.26.6",
+    "pinia": "^2.1.7",
+    "prismjs": "^1.30.0",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/test-utils": "^2.4.8",
+    "autoprefixer": "^10.5.0",
+    "happy-dom": "^20.9.0",
+    "postcss": "^8.5.9",
+    "puppeteer": "^25.1.0",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.4.0",
+    "vite": "^5.2.0",
+    "vitest": "^4.1.5",
+    "vue-tsc": "^2.0.6"
+  }
+}

data/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

data/frontend/src/App.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="['h-screen overflow-hidden', ebookStore.getThemeClass()]" :style="ebookStore.getCssVariables()">
+    <div id="metanorma-error" class="error-fallback" style="display:none">
+      <div class="error-content">
+        <svg class="error-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
+        <h2>Something went wrong</h2>
+        <p class="error-message">An error occurred while rendering this document.</p>
+        <button @click="reload" class="error-retry">Reload page</button>
+      </div>
+    </div>
+    <DocumentReader />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useEbookStore } from '@/stores/ebookStore'
+import { useDocumentStore } from '@/stores/documentStore'
+import DocumentReader from '@/components/DocumentReader.vue'
+
+const ebookStore = useEbookStore()
+const documentStore = useDocumentStore()
+
+documentStore.loadFromWindow()
+
+onMounted(() => {
+  ebookStore.applyTheme()
+})
+
+function reload() {
+  window.location.reload()
+}
+</script>
+
+<style>
+.error-fallback {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #fefce8;
+  color: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.error-content {
+  text-align: center;
+  max-width: 400px;
+  padding: 2rem;
+}
+.error-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 1rem;
+  color: #f59e0b;
+}
+.error-content h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+.error-message {
+  font-size: 0.9rem;
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+}
+.error-retry {
+  padding: 8px 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: 8px;
+  background: #0d9488;
+  color: #fff;
+  cursor: pointer;
+}
+.error-retry:hover {
+  background: #0f766e;
+}
+</style>

data/frontend/src/app.ts

@@ -0,0 +1,21 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import './styles.css'
+
+const pinia = createPinia()
+
+const app = createApp(App)
+app.use(pinia)
+
+app.config.errorHandler = (err, _instance, info) => {
+  console.error(`[Metanorma] ${info}:`, err)
+  const el = document.getElementById('metanorma-error')
+  if (el) {
+    el.style.display = 'flex'
+    const msg = el.querySelector('.error-message')
+    if (msg) msg.textContent = err instanceof Error ? err.message : String(err)
+  }
+}
+
+app.mount('#metanorma-app')

data/frontend/src/components/AppSidebar.vue

@@ -0,0 +1,77 @@
+<template>
+  <aside :class="['sidebar', { 'sidebar-open': uiStore.sidebarOpen }]">
+    <div class="sidebar-header">
+      <h2 class="sidebar-title">{{ documentStore.title }}</h2>
+      <button @click="uiStore.closeSidebar" class="sidebar-close" title="Close sidebar">
+        <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="M6 18L18 6M6 6l12 12"/></svg>
+      </button>
+    </div>
+    <nav class="sidebar-nav">
+      <ul class="toc-list">
+        <TocItem v-for="item in documentStore.sections" :key="item.id" :item="item" />
+      </ul>
+    </nav>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { useDocumentStore } from '@/stores/documentStore'
+import { useUiStore } from '@/stores/uiStore'
+import TocItem from './TocItem.vue'
+
+const documentStore = useDocumentStore()
+const uiStore = useUiStore()
+</script>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 280px;
+  height: 100vh;
+  background: var(--chrome-bg);
+  border-right: 1px solid var(--chrome-border);
+  transform: translateX(-100%);
+  transition: transform 0.2s ease;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.sidebar-open {
+  transform: translateX(0);
+}
+@media (min-width: 1024px) {
+  .sidebar-open { transform: translateX(0); }
+}
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--chrome-border);
+  min-height: 56px;
+}
+.sidebar-title {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--chrome-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+.sidebar-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--chrome-text-dim);
+  padding: 4px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.sidebar-close:hover { background: var(--chrome-bg-hover); }
+.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
+.toc-list { list-style: none; padding: 0; margin: 0; }
+</style>

data/frontend/src/components/DocumentReader.vue

@@ -0,0 +1,180 @@
+<template>
+  <a href="#main-content" class="skip-link" @click.prevent="skipToContent">Skip to content</a>
+
+  <ReadingProgressBar :progress="readingProgress" :visible="ebookStore.showProgress" />
+
+  <div v-if="uiStore.sidebarOpen" @click="uiStore.closeSidebar" class="fixed inset-0 bg-black/50 z-40 lg:hidden"></div>
+
+  <AppSidebar v-show="!ebookStore.focusMode || uiStore.sidebarOpen" />
+
+  <div :class="['focus-mode-topbar', { 'focus-mode-topbar--hidden': ebookStore.focusMode && !uiStore.sidebarOpen }]">
+    <TopBar
+      :title="documentStore.title"
+      :sidebar-open="uiStore.sidebarOpen"
+      @toggle-toc="ebookStore.toggleToc"
+      @toggle-settings="ebookStore.toggleSettings"
+    />
+  </div>
+
+  <main ref="mainContent" id="main-content" role="main" :class="[
+    'h-screen overflow-y-auto transition-all duration-200',
+    !ebookStore.focusMode ? 'pt-14' : 'pt-0',
+    uiStore.sidebarOpen ? 'lg:pl-[280px]' : '',
+  ]" @scroll="onScroll">
+    <div class="px-6 py-10 lg:px-8 lg:py-12 mx-auto transition-[max-width] duration-300 ease-out" :style="contentStyle">
+      <div v-if="documentStore.loadError" class="error-state">
+        <svg class="error-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
+        <h2>Failed to load document</h2>
+        <p class="error-detail">{{ documentStore.loadError }}</p>
+        <button @click="retryLoad" class="error-retry">Retry</button>
+      </div>
+
+      <div v-else-if="!documentStore.mirrorDocument" class="loading-state">
+        <div class="loading-skeleton">
+          <div class="skeleton-title"></div>
+          <div class="skeleton-line w-3/4"></div>
+          <div class="skeleton-line w-full"></div>
+          <div class="skeleton-line w-5/6"></div>
+        </div>
+      </div>
+
+      <template v-else>
+        <div v-if="documentStore.mirrorDocument" class="mn-content" :class="{ 'mn-content--reveal': contentRevealed }">
+          <MirrorRenderer :blocks="documentStore.mirrorDocument.content || []" :top="true" />
+        </div>
+
+        <footer class="doc-fin">
+          <div class="doc-fin-rule"></div>
+          <h3 class="doc-fin-title">End of document</h3>
+          <button @click="scrollToTop" class="doc-fin-btn">Back to top</button>
+          <p class="doc-fin-credit">Generated by <a href="https://github.com/metanorma" class="doc-fin-credit-link">Metanorma</a></p>
+        </footer>
+      </template>
+    </div>
+  </main>
+
+  <Transition name="back-to-top-fade">
+    <button v-if="showBackToTop" class="back-to-top" @click="scrollToTop" title="Back to top">
+      <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="M5 15l7-7 7 7"/>
+      </svg>
+    </button>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue'
+import { useDocumentStore } from '@/stores/documentStore'
+import { useUiStore } from '@/stores/uiStore'
+import { useEbookStore } from '@/stores/ebookStore'
+import AppSidebar from '@/components/AppSidebar.vue'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+import TopBar from '@/components/TopBar.vue'
+import ReadingProgressBar from '@/components/ReadingProgressBar.vue'
+
+const documentStore = useDocumentStore()
+const uiStore = useUiStore()
+const ebookStore = useEbookStore()
+const mainContent = ref<HTMLElement | null>(null)
+
+const contentRevealed = ref(false)
+const readingProgress = ref(0)
+const showBackToTop = ref(false)
+
+const contentStyle = computed(() => {
+  const vars = ebookStore.getCssVariables()
+  return { maxWidth: vars['--ebook-max-width'], margin: '0 auto' }
+})
+
+watch(() => documentStore.mirrorDocument, (doc) => {
+  if (doc) {
+    nextTick(() => { contentRevealed.value = true })
+  }
+}, { immediate: true })
+
+function onScroll() {
+  if (!mainContent.value) return
+  const el = mainContent.value
+  const progress = el.scrollTop / (el.scrollHeight - el.clientHeight) * 100
+  readingProgress.value = Math.min(100, Math.max(0, progress))
+  showBackToTop.value = el.scrollTop > 400
+
+  const sections = el.querySelectorAll('[id]')
+  for (let i = sections.length - 1; i >= 0; i--) {
+    const section = sections[i] as HTMLElement
+    if (section.getBoundingClientRect().top <= 120) {
+      uiStore.setActiveSection(section.id)
+      break
+    }
+  }
+}
+
+function scrollToTop() {
+  mainContent.value?.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+function skipToContent() {
+  mainContent.value?.focus()
+  mainContent.value?.scrollTo({ top: 0 })
+}
+
+function retryLoad() {
+  documentStore.loadFromWindow()
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+  if (window.innerWidth >= 1024) uiStore.openSidebar()
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    ebookStore.closeAll()
+  } else if (e.key === 'f' && !e.ctrlKey && !e.metaKey) {
+    const tag = (e.target as HTMLElement).tagName
+    if (tag !== 'INPUT' && tag !== 'TEXTAREA') {
+      ebookStore.toggleFocusMode()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.skip-link { position: absolute; top: -100px; left: 0; background: var(--chrome-accent, #0d9488); color: #fff; padding: 8px 16px; z-index: 100; font-size: 0.85rem; font-weight: 600; border-radius: 0 0 8px 0; text-decoration: none; transition: top 0.1s; }
+.skip-link:focus { top: 0; }
+:deep(.mn-content--reveal) { animation: content-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
+@keyframes content-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+
+.doc-fin { margin-top: 6rem; padding: 3rem 1rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
+.doc-fin-rule { width: 100px; height: 1px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ebook-accent) 40%, var(--ebook-border)), transparent); margin-bottom: 2rem; }
+.doc-fin-title { font-family: ui-monospace, monospace; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ebook-text-muted); margin: 0 0 1.5rem; }
+.doc-fin-btn { padding: 9px 20px; font-size: 0.78rem; font-weight: 500; border-radius: 8px; border: 1px solid var(--ebook-border); color: var(--ebook-text); background: transparent; cursor: pointer; }
+.doc-fin-btn:hover { background: var(--ebook-bg-secondary); }
+.doc-fin-credit { font-size: 0.6rem; color: var(--ebook-text-muted); opacity: 0.4; margin: 1rem 0 0; }
+.doc-fin-credit-link { color: var(--ebook-text-muted); text-decoration: none; }
+.doc-fin-credit-link:hover { text-decoration: underline; }
+
+.error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; gap: 0.75rem; text-align: center; }
+.error-icon { width: 40px; height: 40px; color: #f59e0b; }
+.error-state h2 { font-size: 1.1rem; font-weight: 600; color: var(--chrome-text); }
+.error-detail { font-size: 0.85rem; color: var(--chrome-text-dim); max-width: 300px; }
+.error-retry { margin-top: 0.5rem; padding: 8px 20px; font-size: 0.8rem; font-weight: 600; border-radius: 8px; background: var(--chrome-accent, #0d9488); color: #fff; cursor: pointer; }
+.error-retry:hover { opacity: 0.9; }
+
+.loading-skeleton { max-width: 500px; margin: 0 auto; padding-top: 2rem; }
+.skeleton-title { height: 32px; width: 60%; border-radius: 6px; background: var(--chrome-bg-hover); margin-bottom: 1.5rem; animation: skeleton-pulse 1.5s ease-in-out infinite; }
+.skeleton-line { height: 14px; border-radius: 4px; background: var(--chrome-bg-hover); margin-bottom: 0.6rem; animation: skeleton-pulse 1.5s ease-in-out infinite; }
+@keyframes skeleton-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
+
+.focus-mode-topbar { transition: opacity 0.2s ease; }
+.focus-mode-topbar--hidden { opacity: 0; pointer-events: none; }
+
+.back-to-top { position: fixed; bottom: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--chrome-bg-glass); color: var(--chrome-text); border: 1px solid var(--chrome-border); backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); cursor: pointer; z-index: 35; transition: background 0.15s ease, transform 0.15s ease; }
+.back-to-top:hover { background: var(--chrome-bg-hover); transform: translateY(-2px); }
+.back-to-top-fade-enter-active, .back-to-top-fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.back-to-top-fade-enter-from, .back-to-top-fade-leave-to { opacity: 0; transform: translateY(16px); }
+</style>

data/frontend/src/components/MirrorRenderer.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="content-blocks">
+    <template v-for="(block, index) in blocks" :key="index">
+      <MirrorRenderer v-if="block.type === 'doc'" :blocks="block.content || []" />
+      <TextRenderer v-else-if="block.type === 'text'" :node="block as any" />
+      <ClauseBlock v-else-if="isSectionType(block.type)" :block="block" />
+      <br v-else-if="block.type === 'soft_break'" />
+      <component v-else :is="getBlockComponent(block.type)" :block="block" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode, MirrorTextNode } from '@/stores/documentStore'
+import ClauseBlock from './blocks/ClauseBlock.vue'
+import TextRenderer from './TextRenderer.vue'
+import { getBlockComponent } from './blocks'
+import { isSectionType } from '@/utils/typeMetadata'
+
+defineProps<{
+  blocks: (MirrorBlockNode | MirrorTextNode)[]
+}>()
+</script>

data/frontend/src/components/ReadingProgressBar.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-if="visible" class="reading-progress">
+    <div class="reading-progress-bar" :style="{ width: `${progress}%` }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  progress: number
+  visible: boolean
+}>()
+</script>
+
+<style scoped>
+.reading-progress {
+  position: fixed;
+  top: 56px;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--chrome-border);
+  z-index: 39;
+}
+.reading-progress-bar {
+  height: 100%;
+  background: var(--chrome-accent, #0d9488);
+  transition: width 0.1s ease-out;
+}
+</style>

data/frontend/src/components/TextRenderer.vue

@@ -0,0 +1,131 @@
+<template>
+  <component :is="wrapInMarks(node.marks || [])">
+    {{ node.text }}
+  </component>
+</template>
+
+<script setup lang="ts">
+import { h, type VNode, type Component } from 'vue'
+
+interface Mark {
+  type: string
+  attrs?: Record<string, any>
+}
+
+interface MirrorTextNode {
+  type: 'text'
+  text: string
+  marks?: Mark[]
+}
+
+defineProps<{
+  node: MirrorTextNode
+}>()
+
+function markToTag(mark: Mark): string {
+  switch (mark.type) {
+    case 'emphasis':
+      return 'em'
+    case 'strong':
+      return 'strong'
+    case 'subscript':
+      return 'sub'
+    case 'superscript':
+      return 'sup'
+    case 'code':
+      return 'code'
+    case 'underline':
+      return 'u'
+    case 'strike':
+      return 's'
+    case 'link':
+    case 'xref':
+    case 'eref':
+      return 'a'
+    case 'footnote':
+      return 'sup'
+    case 'stem':
+    case 'concept':
+    case 'bcp14':
+    case 'span':
+    default:
+      return 'span'
+  }
+}
+
+function markAttrs(mark: Mark): Record<string, any> {
+  switch (mark.type) {
+    case 'link':
+      return {
+        href: mark.attrs?.href || '#',
+        class: 'link-text hover:underline',
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      }
+    case 'xref':
+      return {
+        href: `#${mark.attrs?.target || ''}`,
+        class: 'xref link-text',
+      }
+    case 'eref':
+      return {
+        class: 'eref link-text',
+        cite: mark.attrs?.citeas || '',
+      }
+    case 'emphasis':
+      return { class: 'italic ebook-text' }
+    case 'strong':
+      return { class: 'font-bold heading-text' }
+    case 'code':
+      return { class: 'inline-code px-1.5 py-0.5 rounded text-sm font-mono border' }
+    case 'footnote':
+      return { class: 'footnote-inline' }
+    case 'smallcap':
+      return { class: 'smallcap' }
+    case 'span': {
+      const cls = mark.attrs?.class_attr
+      return cls ? { class: cls } : {}
+    }
+    default:
+      return {}
+  }
+}
+
+function wrapInMarks(marks: Mark[]): Component {
+  return {
+    setup(_, { slots }) {
+      return () => {
+        if (marks.length === 0) {
+          return h('span', {}, slots.default?.())
+        }
+
+        let inner: VNode | null = null
+        for (let i = marks.length - 1; i >= 0; i--) {
+          const mark = marks[i]
+          const tag = markToTag(mark)
+          const attrs = markAttrs(mark)
+
+          if (inner) {
+            inner = h(tag, attrs, inner)
+          } else {
+            inner = h(tag, attrs, slots.default?.())
+          }
+        }
+
+        return inner || h('span', {}, slots.default?.())
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.ebook-text { color: var(--ebook-text); }
+.heading-text { color: var(--ebook-text-heading); }
+.link-text { color: var(--ebook-link-color); transition: color 0.15s ease; }
+.xref { text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--ebook-link-color) 40%, transparent); }
+.xref:hover { border-bottom-color: var(--ebook-link-color); border-bottom-style: solid; }
+.inline-code { background: var(--ebook-inline-code-bg); color: var(--ebook-inline-code-text); border-color: var(--ebook-inline-code-border); }
+.footnote-inline { font-size: 0.75em; }
+.smallcap { font-variant: small-caps; }
+</style>

data/frontend/src/components/TocItem.vue

@@ -0,0 +1,57 @@
+<template>
+  <li>
+    <a
+      :href="`#${item.id}`"
+      :class="['toc-link', { 'toc-active': isActive }]"
+      @click.prevent="navigate"
+    >
+      <span v-if="number" class="toc-number">{{ number }}</span>
+      {{ item.title }}
+    </a>
+    <ul v-if="item.children.length > 0" class="toc-list">
+      <TocItem v-for="child in item.children" :key="child.id" :item="child" />
+    </ul>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDocumentStore, type TocItem as TocItemType } from '@/stores/documentStore'
+import { useUiStore } from '@/stores/uiStore'
+
+const props = defineProps<{ item: TocItemType }>()
+
+const documentStore = useDocumentStore()
+const uiStore = useUiStore()
+
+const isActive = computed(() => uiStore.activeSectionId === props.item.id)
+const number = computed(() => documentStore.getNumbering(props.item.id))
+
+function navigate() {
+  const el = document.getElementById(props.item.id)
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    history.replaceState(null, '', `#${props.item.id}`)
+  }
+  if (window.innerWidth < 1024) uiStore.closeSidebar()
+}
+</script>
+
+<style scoped>
+.toc-list { list-style: none; padding-left: 12px; margin: 0; }
+.toc-link {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 6px 16px;
+  font-size: 0.82rem;
+  color: var(--chrome-text-dim);
+  text-decoration: none;
+  border-radius: 6px;
+  transition: background 0.1s ease, color 0.1s ease;
+  cursor: pointer;
+}
+.toc-link:hover { background: var(--chrome-bg-hover); color: var(--chrome-text); }
+.toc-active { color: var(--chrome-accent, #0d9488); background: color-mix(in srgb, var(--chrome-accent, #0d9488) 15%, transparent); }
+.toc-number { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--chrome-text-muted); min-width: 2em; }
+</style>