popilot 0.6.0 → 0.8.0

package/scaffold/spec-site/src/components/AuthGate.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import Icon from '@/components/Icon.vue'
+import { ref, onMounted } from 'vue'
+import { useAuth } from '@/composables/useAuth'
+import { loadNavData } from '@/composables/useNavStore'
+
+const { isAuthenticated, authLoading, login, tryAutoLogin } = useAuth()
+
+const tokenInput = ref('')
+const loginError = ref(false)
+const initializing = ref(true)
+
+onMounted(async () => {
+  const ok = await tryAutoLogin()
+  if (ok) loadNavData()
+  initializing.value = false
+})
+
+async function handleLogin() {
+  loginError.value = false
+  const ok = await login(tokenInput.value.trim())
+  if (!ok) {
+    loginError.value = true
+  } else {
+    tokenInput.value = ''
+    loadNavData()
+  }
+}
+</script>
+
+<template>
+  <!-- Initializing -->
+  <div v-if="initializing" class="auth-init">
+    <div class="auth-spinner"></div>
+  </div>
+
+  <!-- Authenticated -->
+  <slot v-else-if="isAuthenticated" />
+
+  <!-- Login required -->
+  <div v-else class="auth-page">
+    <div class="auth-card">
+      <div class="auth-logo"><Icon name="sprint" :size="14" /></div>
+      <!-- TODO: Change title to your project name -->
+      <h1 class="auth-title">Project Spec</h1>
+      <p class="auth-desc">Team-only spec site.<br>Enter your auth token to continue.</p>
+
+      <div class="auth-form">
+        <input
+          v-model="tokenInput"
+          type="text"
+          class="auth-input"
+          placeholder="Auth token"
+          autocomplete="off"
+          @keydown.enter="handleLogin"
+        />
+        <button
+          class="auth-btn"
+          @click="handleLogin"
+          :disabled="authLoading || !tokenInput.trim()"
+        >
+          {{ authLoading ? 'Verifying...' : 'Enter' }}
+        </button>
+      </div>
+
+      <p v-if="loginError" class="auth-error">Invalid token</p>
+      <p class="auth-hint">Contact your team admin for a token</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.auth-init {
+  height: 100vh; display: flex; align-items: center; justify-content: center;
+  background: #f8fafc;
+}
+.auth-spinner {
+  width: 32px; height: 32px; border: 3px solid #e2e8f0;
+  border-top-color: #3b82f6; border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.auth-page {
+  height: 100vh; display: flex; align-items: center; justify-content: center;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.auth-card {
+  background: #fff; border-radius: 16px; padding: 48px 40px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+  text-align: center; width: 380px; max-width: 90vw;
+}
+
+.auth-logo { font-size: 48px; margin-bottom: 12px; }
+.auth-title { font-size: 22px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
+.auth-desc { font-size: 14px; color: #64748b; line-height: 1.6; margin-bottom: 28px; }
+
+.auth-form { display: flex; gap: 8px; }
+.auth-input {
+  flex: 1; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px;
+  font-size: 14px; font-family: 'Roboto Mono', monospace; color: #1e293b;
+}
+.auth-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
+.auth-input::placeholder { color: #94a3b8; }
+
+.auth-btn {
+  padding: 12px 20px; background: #1e293b; color: #fff; border: none; border-radius: 10px;
+  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
+  transition: background 0.15s;
+}
+.auth-btn:hover { background: #334155; }
+.auth-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
+
+.auth-error { color: #ef4444; font-size: 13px; margin-top: 12px; }
+.auth-hint { color: #94a3b8; font-size: 12px; margin-top: 16px; }
+</style>

package/scaffold/spec-site/src/components/BurndownChart.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from 'vue'
+import { apiGet } from '@/composables/useTurso'
+
+const props = defineProps<{ sprintId: string }>()
+
+const data = ref<{ totalSP: number; dailyDone: any[]; startDate: string; endDate: string } | null>(null)
+
+async function loadBurndown() {
+  const { data: d } = await apiGet(`/api/v2/pm/sprints/${props.sprintId}/burndown`)
+  data.value = d as any
+}
+
+onMounted(loadBurndown)
+watch(() => props.sprintId, loadBurndown)
+
+const chartData = computed(() => {
+  if (!data.value) return { points: [], idealPoints: [], dates: [] }
+  const { totalSP, dailyDone, startDate, endDate } = data.value
+  if (!startDate || !endDate || !totalSP) return { points: [], idealPoints: [], dates: [] }
+
+  // Date array
+  const dates: string[] = []
+  let d = new Date(startDate)
+  const end = new Date(endDate)
+  while (d <= end) { dates.push(d.toISOString().split('T')[0]); d.setDate(d.getDate() + 1) }
+
+  // Daily done SP map
+  const doneMap: Record<string, number> = {}
+  for (const r of dailyDone) doneMap[r.date] = r.sp
+
+  // Remaining
+  let cumDone = 0
+  const points = dates.map(dt => { cumDone += doneMap[dt] || 0; return totalSP - cumDone })
+
+  // Ideal
+  const idealPoints = dates.map((_, i) => Math.round(totalSP * (1 - i / (dates.length - 1))))
+
+  return { points, idealPoints, dates }
+})
+
+const svgW = 400
+const svgH = 200
+const pad = 30
+
+function x(i: number, total: number) { return pad + (i / Math.max(total - 1, 1)) * (svgW - pad * 2) }
+function y(val: number, max: number) { return pad + (1 - val / Math.max(max, 1)) * (svgH - pad * 2) }
+
+function polyline(points: number[], max: number): string {
+  return points.map((p, i) => `${x(i, points.length)},${y(p, max)}`).join(' ')
+}
+</script>
+
+<template>
+  <div class="burndown-chart">
+    <h3>Burndown Chart</h3>
+    <svg v-if="chartData.points.length" :viewBox="`0 0 ${svgW} ${svgH}`" class="chart-svg">
+      <!-- Ideal line -->
+      <polyline :points="polyline(chartData.idealPoints, data?.totalSP || 1)" fill="none" stroke="#d1d5db" stroke-width="1.5" stroke-dasharray="4" />
+      <!-- Actual line -->
+      <polyline :points="polyline(chartData.points, data?.totalSP || 1)" fill="none" stroke="var(--primary)" stroke-width="2" />
+      <!-- Axes -->
+      <line :x1="pad" :y1="svgH - pad" :x2="svgW - pad" :y2="svgH - pad" stroke="#e5e7eb" />
+      <line :x1="pad" :y1="pad" :x2="pad" :y2="svgH - pad" stroke="#e5e7eb" />
+      <!-- Labels -->
+      <text :x="pad" :y="pad - 5" font-size="10" fill="var(--text-muted)">{{ data?.totalSP }}SP</text>
+      <text :x="svgW - pad" :y="svgH - pad + 15" font-size="9" fill="var(--text-muted)" text-anchor="end">{{ chartData.dates[chartData.dates.length - 1] }}</text>
+    </svg>
+    <div v-else class="chart-empty">No data</div>
+  </div>
+</template>
+
+<style scoped>
+.burndown-chart { background: var(--bg-card); border-radius: var(--radius-lg); padding: 16px; }
+.burndown-chart h3 { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
+.chart-svg { width: 100%; max-width: 500px; }
+.chart-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 24px; }
+</style>

package/scaffold/spec-site/src/components/DocComments.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { apiGet, apiPost, apiPatch, apiDelete } from '@/composables/useTurso'
+
+interface Comment {
+  id: number; doc_id: string; parent_id: number | null; author: string; content: string; created_at: string; updated_at: string
+}
+
+const props = defineProps<{ docId: string; currentUser: string }>()
+
+const comments = ref<Comment[]>([])
+const newComment = ref('')
+const replyTo = ref<number | null>(null)
+const editingId = ref<number | null>(null)
+const editingText = ref('')
+
+async function load() {
+  const { data } = await apiGet<{ comments: Comment[] }>(`/api/v2/docs/${props.docId}/comments`)
+  comments.value = data?.comments || []
+}
+
+const rootComments = () => comments.value.filter(c => !c.parent_id)
+const replies = (parentId: number) => comments.value.filter(c => c.parent_id === parentId)
+
+async function submit() {
+  const trimmed = newComment.value.trim()
+  if (!trimmed) return
+  await apiPost(`/api/v2/docs/${props.docId}/comments`, { content: trimmed, parentId: replyTo.value })
+  // @mention notification for doc comments
+  if (trimmed.includes('@')) {
+    apiPost('/api/v2/notifications/mention', {
+      content: trimmed,
+      sourceType: 'doc',
+      sourceId: props.docId,
+      pageId: `/docs/${props.docId}`,
+      actor: props.currentUser,
+    }).catch(() => {})
+  }
+  newComment.value = ''; replyTo.value = null
+  await load()
+}
+
+async function startEdit(c: Comment) { editingId.value = c.id; editingText.value = c.content }
+
+async function saveEdit() {
+  if (!editingId.value) return
+  await apiPatch(`/api/v2/docs/comments/${editingId.value}`, { content: editingText.value })
+  editingId.value = null; await load()
+}
+
+async function remove(id: number) {
+  if (!confirm('Delete this comment?')) return
+  await apiDelete(`/api/v2/docs/comments/${id}`)
+  await load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="doc-comments">
+    <h3 class="comments-title">Comments ({{ comments.length }})</h3>
+
+    <div v-for="c in rootComments()" :key="c.id" class="comment-thread">
+      <div class="comment-item">
+        <div class="comment-header">
+          <span class="comment-author">{{ c.author }}</span>
+          <span class="comment-time">{{ c.created_at }}</span>
+        </div>
+        <div v-if="editingId === c.id" class="comment-edit">
+          <textarea v-model="editingText" class="comment-textarea" rows="2" />
+          <button class="btn btn--xs btn--primary" @click="saveEdit">Save</button>
+          <button class="btn btn--xs" @click="editingId = null">Cancel</button>
+        </div>
+        <div v-else class="comment-body">{{ c.content }}</div>
+        <div class="comment-actions">
+          <button class="comment-action" @click="replyTo = c.id">Reply</button>
+          <template v-if="c.author === currentUser">
+            <button class="comment-action" @click="startEdit(c)">Edit</button>
+            <button class="comment-action danger" @click="remove(c.id)">Delete</button>
+          </template>
+        </div>
+
+        <!-- Replies -->
+        <div v-for="r in replies(c.id)" :key="r.id" class="comment-reply">
+          <div class="comment-header">
+            <span class="comment-author">{{ r.author }}</span>
+            <span class="comment-time">{{ r.created_at }}</span>
+          </div>
+          <div v-if="editingId === r.id" class="comment-edit">
+            <textarea v-model="editingText" class="comment-textarea" rows="2" />
+            <button class="btn btn--xs btn--primary" @click="saveEdit">Save</button>
+            <button class="btn btn--xs" @click="editingId = null">Cancel</button>
+          </div>
+          <div v-else class="comment-body">{{ r.content }}</div>
+          <div v-if="r.author === currentUser" class="comment-actions">
+            <button class="comment-action" @click="startEdit(r)">Edit</button>
+            <button class="comment-action danger" @click="remove(r.id)">Delete</button>
+          </div>
+        </div>
+
+        <!-- Reply input -->
+        <div v-if="replyTo === c.id" class="reply-form">
+          <textarea v-model="newComment" class="comment-textarea" rows="2" placeholder="Reply..." />
+          <button class="btn btn--xs btn--primary" @click="submit">Submit</button>
+          <button class="btn btn--xs" @click="replyTo = null">Cancel</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- New comment -->
+    <div v-if="!replyTo" class="new-comment">
+      <textarea v-model="newComment" class="comment-textarea" rows="2" placeholder="Write a comment..." />
+      <button class="btn btn--sm btn--primary" @click="submit" :disabled="!newComment.trim()">Submit</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.doc-comments { margin-top: 24px; border-top: 1px solid var(--border, #e5e7eb); padding-top: 16px; }
+.comments-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
+.comment-thread { margin-bottom: 12px; }
+.comment-item { padding: 8px 0; }
+.comment-header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
+.comment-author { font-size: 13px; font-weight: 600; }
+.comment-time { font-size: 11px; color: #9ca3af; }
+.comment-body { font-size: 13px; line-height: 1.6; color: #374151; }
+.comment-actions { display: flex; gap: 8px; margin-top: 4px; }
+.comment-action { border: none; background: none; font-size: 11px; color: #6b7280; cursor: pointer; padding: 0; }
+.comment-action:hover { color: #3b82f6; }
+.comment-action.danger:hover { color: #ef4444; }
+.comment-reply { margin-left: 24px; padding: 6px 0; border-left: 2px solid #e5e7eb; padding-left: 12px; }
+.comment-textarea { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px; font-size: 13px; resize: vertical; box-sizing: border-box; }
+.comment-edit { display: flex; flex-direction: column; gap: 4px; }
+.reply-form { margin-top: 8px; margin-left: 24px; display: flex; flex-direction: column; gap: 4px; }
+.new-comment { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
+</style>

package/scaffold/spec-site/src/components/DocEditor.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { onBeforeUnmount, watch } from 'vue'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+import { Table } from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import Placeholder from '@tiptap/extension-placeholder'
+import { SlashCommand } from './SlashCommand'
+
+const props = defineProps<{ modelValue: string; editable?: boolean }>()
+const emit = defineEmits<{ 'update:modelValue': [value: string]; 'focus': []; 'blur': [] }>()
+
+const editor = useEditor({
+  content: props.modelValue,
+  editable: props.editable !== false,
+  extensions: [
+    StarterKit,
+    Link.configure({ openOnClick: false }),
+    Image,
+    Table.configure({ resizable: true }),
+    TableRow, TableCell, TableHeader,
+    Placeholder.configure({ placeholder: 'Start writing... Type / to open the block menu.' }),
+    SlashCommand,
+  ],
+  onUpdate: ({ editor: e }) => {
+    emit('update:modelValue', e.getHTML())
+  },
+  onFocus: () => emit('focus'),
+  onBlur: () => emit('blur'),
+})
+
+watch(() => props.modelValue, (val) => {
+  if (editor.value && editor.value.getHTML() !== val) {
+    editor.value.commands.setContent(val, false)
+  }
+})
+
+onBeforeUnmount(() => { editor.value?.destroy() })
+</script>
+
+<template>
+  <div v-if="editor" class="doc-editor">
+    <!-- Toolbar -->
+    <div v-if="editable !== false" class="editor-toolbar">
+      <button :class="{ active: editor.isActive('bold') }" @click="editor.chain().focus().toggleBold().run()"><b>B</b></button>
+      <button :class="{ active: editor.isActive('italic') }" @click="editor.chain().focus().toggleItalic().run()"><i>I</i></button>
+      <span class="toolbar-sep" />
+      <button :class="{ active: editor.isActive('heading', { level: 1 }) }" @click="editor.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
+      <button :class="{ active: editor.isActive('heading', { level: 2 }) }" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
+      <button :class="{ active: editor.isActive('heading', { level: 3 }) }" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
+      <span class="toolbar-sep" />
+      <button :class="{ active: editor.isActive('bulletList') }" @click="editor.chain().focus().toggleBulletList().run()">&#8226;</button>
+      <button :class="{ active: editor.isActive('orderedList') }" @click="editor.chain().focus().toggleOrderedList().run()">1.</button>
+      <button :class="{ active: editor.isActive('codeBlock') }" @click="editor.chain().focus().toggleCodeBlock().run()">Code</button>
+      <button :class="{ active: editor.isActive('blockquote') }" @click="editor.chain().focus().toggleBlockquote().run()">Quote</button>
+      <span class="toolbar-sep" />
+      <button @click="addLink">Link</button>
+      <button @click="addImage">Image</button>
+      <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">Table</button>
+    </div>
+    <EditorContent :editor="editor" class="editor-content" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  methods: {
+    addLink() {
+      const url = prompt('Enter URL:')
+      if (url) (this as any).editor?.chain().focus().setLink({ href: url }).run()
+    },
+    addImage() {
+      const url = prompt('Enter image URL:')
+      if (url) (this as any).editor?.chain().focus().setImage({ src: url }).run()
+    },
+  },
+}
+</script>
+
+<style scoped>
+.doc-editor { border: none; overflow: hidden; }
+.editor-toolbar { display: flex; gap: 2px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; margin-bottom: 16px; flex-wrap: wrap; position: sticky; top: 0; background: #fff; z-index: 10; }
+.editor-toolbar button { border: none; background: none; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; color: #374151; }
+.editor-toolbar button:hover { background: #e5e7eb; }
+.editor-toolbar button.active { background: #3b82f6; color: #fff; }
+.toolbar-sep { width: 1px; background: #d1d5db; margin: 0 4px; }
+.editor-content { min-height: 300px; padding: 16px; }
+.editor-content :deep(.ProseMirror) { outline: none; min-height: 280px; }
+.editor-content :deep(.ProseMirror) { font-size: 15px; line-height: 1.8; color: #1a1a1a; }
+.editor-content :deep(.ProseMirror p) { margin: 0.5em 0; }
+.editor-content :deep(.ProseMirror h1) { font-size: 24px; font-weight: 700; margin: 1em 0 0.5em; }
+.editor-content :deep(.ProseMirror h2) { font-size: 20px; font-weight: 600; margin: 0.8em 0 0.4em; }
+.editor-content :deep(.ProseMirror h3) { font-size: 16px; font-weight: 600; margin: 0.6em 0 0.3em; }
+.editor-content :deep(.ProseMirror code) { background: #f1f5f9; color: #1e293b; padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'SF Mono', 'Fira Code', monospace; }
+.editor-content :deep(.ProseMirror pre) { background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
+.editor-content :deep(.ProseMirror pre code) { background: none; color: inherit; padding: 0; border-radius: 0; font-size: inherit; }
+.editor-content :deep(.ProseMirror pre::selection), .editor-content :deep(.ProseMirror pre *::selection) { background: rgba(99, 130, 191, 0.3); }
+.editor-content :deep(.ProseMirror .ProseMirror-selectednode) { outline: 2px solid #3b82f6; }
+.editor-content :deep(.ProseMirror blockquote) { border-left: 3px solid #3b82f6; padding-left: 16px; color: #475569; background: #f8fafc; margin: 12px 0; padding: 12px 16px; border-radius: 0 6px 6px 0; }
+.editor-content :deep(.ProseMirror ul) { padding-left: 20px; }
+.editor-content :deep(.ProseMirror ol) { padding-left: 20px; }
+.editor-content :deep(.ProseMirror img) { max-width: 100%; border-radius: 8px; }
+.editor-content :deep(.ProseMirror table) { border-collapse: collapse; width: 100%; }
+.editor-content :deep(.ProseMirror td), .editor-content :deep(.ProseMirror th) { border: 1px solid #d1d5db; padding: 6px 8px; }
+.editor-content :deep(.ProseMirror th) { background: #f9fafb; font-weight: 600; }
+.editor-content :deep(.ProseMirror .is-empty::before) { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; float: left; height: 0; }
+</style>
+
+<style>
+.slash-menu { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 4px; min-width: 180px; z-index: 9999; }
+.slash-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; }
+.slash-item:hover, .slash-active { background: #eff6ff; }
+.slash-icon { width: 20px; text-align: center; font-weight: 700; font-size: 12px; color: #6b7280; }
+</style>

package/scaffold/spec-site/src/components/DocExportBar.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  /** Raw markdown string (if available). If not provided, falls back to domRef text extraction */
+  rawMarkdown?: string
+  /** DOM element to extract text from when rawMarkdown is not available */
+  domRef?: HTMLElement | null
+  /** File name for download (without .md extension) */
+  fileName?: string
+}>()
+
+const copied = ref(false)
+
+function getContent(): string {
+  if (props.rawMarkdown) return props.rawMarkdown
+  if (props.domRef) return props.domRef.innerText
+  return ''
+}
+
+async function handleCopy() {
+  const content = getContent()
+  if (!content) return
+  try {
+    await navigator.clipboard.writeText(content)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    // Fallback for older browsers
+    const ta = document.createElement('textarea')
+    ta.value = content
+    ta.style.position = 'fixed'
+    ta.style.left = '-9999px'
+    document.body.appendChild(ta)
+    ta.select()
+    document.execCommand('copy')
+    document.body.removeChild(ta)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  }
+}
+
+function handleDownload() {
+  const content = getContent()
+  if (!content) return
+  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = (props.fileName || 'document') + '.md'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+</script>
+
+<template>
+  <div class="doc-export-bar">
+    <button class="export-btn" @click="handleCopy" :title="copied ? 'Copied!' : 'Copy to clipboard'">
+      <span v-if="copied" class="export-icon">&#10003;</span>
+      <span v-else class="export-icon">&#128203;</span>
+      <span class="export-label">{{ copied ? 'Copied' : 'Copy' }}</span>
+    </button>
+    <button class="export-btn" @click="handleDownload" title="Download .md file">
+      <span class="export-icon">&#8681;</span>
+      <span class="export-label">.md</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.doc-export-bar {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.export-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-family: var(--font-sans, 'Inter', sans-serif);
+  color: var(--text-muted, #94a3b8);
+  background: var(--bg, #f8fafc);
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.export-btn:hover {
+  color: var(--text-primary, #1e293b);
+  border-color: var(--text-muted, #94a3b8);
+  background: #fff;
+}
+
+.export-icon {
+  font-size: 13px;
+  line-height: 1;
+}
+
+.export-label {
+  font-size: 11px;
+  font-weight: 500;
+}
+</style>