metanorma-document 0.2.12 → 0.2.13

data/frontend/package.json

@@ -1,32 +0,0 @@
-{
-  "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

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

data/frontend/src/App.vue

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

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

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

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

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

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

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

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