@docsector/docsector-reader 4.4.4 → 4.4.6

package/README.md

@@ -57,7 +57,7 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 🔗 **Anchor Navigation** — Right-side source-ordered Table of Contents tree with stable scroll tracking, resize-safe drawer state, auto-scroll to the active section, and active-heading resolution based on the last heading that crossed the content threshold
 - 🖱️ **Active Menu Item UX** — Active menu entries keep pointer cursor, clear URL hash without redundant navigation, and prevent accidental label text selection
 - 🔎 **Search** — Menu search across all documentation content and tags
-- 💬 **Assistant Chat UX Enhancements** — Long conversations keep focus on recent messages, load earlier history progressively, deduplicate repeated sources, include per-message copy actions, and show a floating quick return to the bottom
+- 💬 **Assistant Chat UX Enhancements** — Long conversations keep focus on recent messages, load earlier history progressively, deduplicate repeated sources, preserve the assistant panel open state across reloads, include per-message copy actions, and show a floating quick return to the bottom
 - 📱 **Responsive** — Mobile-friendly with collapsible sidebar and drawers
 - 📚 **Book Tabs with Per-State Colors** — Define `*.book.js` tabs with icons, order, and `color.active` / `color.inactive`
 - 🔀 **Internal Shortcut Pages** — Route entries can redirect with `config.link.to`, keeping localized titles while inheriting icon/status from the destination page
@@ -298,7 +298,7 @@ Check `checks.discovery.webMcp.status` equals `"pass"`.
 
 Docsector Reader can add an opt-in assistant panel for documentation Q&A. Users open it from the global header while reading pages and subpages; it is not a dedicated documentation route. The drawer posts to a same-origin Cloudflare Pages Function, and that function calls Cloudflare AI Search so secrets, rate-limit strategy, provider errors, and future auth stay server-side.
 
-The panel is disabled by default. When enabled, desktop pages get a dedicated right-side assistant rail that can sit beside the table of contents on wide screens. Mobile uses a fullscreen dialog. Conversations restore at the latest message, reveal earlier history progressively in long chats, deduplicate repeated source links, and provide per-message copy actions.
+The panel is disabled by default. When enabled, desktop pages get a dedicated right-side assistant rail that can sit beside the table of contents on wide screens. Mobile uses a fullscreen dialog. Conversations restore at the latest message, reveal earlier history progressively in long chats, deduplicate repeated source links, preserve the panel open state across page reloads, and provide per-message copy actions.
 
 ### Configure
 

package/bin/docsector.js

@@ -24,7 +24,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '4.4.4'
+const VERSION = '4.4.6'
 const AUTHORING_SKILL_NAME = 'docsector-documentation-authoring'
 const AUTHORING_SKILL_DESCRIPTION = 'Author Docsector documentation with Markdown, custom blocks, MCP, and WebMCP.'
 const AUTHORING_SKILL_PUBLIC_PATH = `/.well-known/agent-skills/${AUTHORING_SKILL_NAME}/SKILL.md`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "4.4.4",
+  "version": "4.4.6",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/src/components/DBlockSourceCode.vue

@@ -1,10 +1,16 @@
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
-import { useStore } from 'vuex'
 import Prism from './code-block-highlighting'
+import {
+  buildSourceCodeLineAnchorId,
+  resolveSourceCodeLineHref,
+  shouldHandleSourceCodeLineActivation
+} from './source-code-anchor'
 import { countRenderedCodeLines } from './source-code-lines'
 import { looksLikeFileName, resolveFileIconUrl } from '../composables/useFileIcon'
+import useNavigator from '../composables/useNavigator'
 
 defineOptions({
   name: 'DBlockSourceCode'
@@ -38,15 +44,17 @@ const props = defineProps({
 })
 
 const $q = useQuasar()
-const store = useStore()
+const route = useRoute()
+const router = useRouter()
+const { anchor: scrollToAnchor } = useNavigator()
 
 const copyBtnDisabled = ref(false)
 const copyBtnColor = ref(null)
 const copyBtnIcon = ref('content_copy')
 const codeRef = ref(null)
 const activeTab = ref(0)
+const lineAnchorTopOffset = 34
 
-const href = computed(() => `${store.state.page.absolute}#${anchor.value}`)
 const coloring = computed(() => $q.dark.isActive ? 'dark' : 'white')
 const anchor = computed(() => printToLetter(props.index + 1))
 
@@ -155,6 +163,38 @@ function copyCode() {
   }
 }
 
+function buildLineAnchorId(line) {
+  return buildSourceCodeLineAnchorId(anchor.value, line)
+}
+
+function buildLineHref(line) {
+  return resolveSourceCodeLineHref(router, route.path, route.query, buildLineAnchorId(line))
+}
+
+async function navigateToLineAnchor(event, line) {
+  if (!shouldHandleSourceCodeLineActivation(event)) {
+    return
+  }
+
+  const hash = `#${buildLineAnchorId(line)}`
+
+  event.preventDefault()
+
+  if (route.hash === hash) {
+    scrollToAnchor(hash, false)
+    return
+  }
+
+  await router.push({
+    path: route.path,
+    query: route.query,
+    hash
+  })
+
+  await nextTick()
+  scrollToAnchor(hash, false)
+}
+
 function printToLetter(number) {
   const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
   let result = ''
@@ -245,9 +285,9 @@ function printToLetter(number) {
     <div class="code" :class="coloring">
       <div class="lines" v-if="lines && lines > 1">
         <template v-for="(line, index) in lines" :key="index">
-          <a class="line" :href="href+line">
+          <a class="line" :href="buildLineHref(line)" @click="navigateToLineAnchor($event, line)">
             <i class="fa fa-link" aria-hidden="true" data-hidden="true"></i>
-            <span :id="`${anchor}${line}`">{{ line }}</span>
+            <span :id="buildLineAnchorId(line)" :data-anchor-offset-top="lineAnchorTopOffset">{{ line }}</span>
           </a>
         </template>
       </div>

package/src/components/source-code-anchor.js

@@ -0,0 +1,15 @@
+export function buildSourceCodeLineAnchorId(anchorPrefix, line) {
+  return `${anchorPrefix}${line}`
+}
+
+export function resolveSourceCodeLineHref(router, routePath, routeQuery, anchorId) {
+  return router.resolve({
+    path: routePath,
+    query: routeQuery,
+    hash: `#${anchorId}`
+  }).href
+}
+
+export function shouldHandleSourceCodeLineActivation(event) {
+  return !(event.defaultPrevented || event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+}

package/src/composables/useNavigator.js

@@ -11,6 +11,62 @@ export default function useNavigator() {
   const route = useRoute()
   const selected = ref(null)
 
+  const normalizeScrollTarget = (target) => {
+    if (target === document.body || target === document.documentElement) {
+      return window
+    }
+
+    return target
+  }
+
+  const getScrollTargetTop = (target) => {
+    if (target === window) {
+      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+    }
+
+    return target?.scrollTop || 0
+  }
+
+  const getScrollTargetRectTop = (target) => {
+    if (target === window) {
+      return 0
+    }
+
+    return target?.getBoundingClientRect?.().top || 0
+  }
+
+  const getAnchorTopOffset = (anchorEl) => {
+    if (!(anchorEl instanceof HTMLElement)) {
+      return 0
+    }
+
+    const explicitOffset = Number.parseFloat(anchorEl.dataset.anchorOffsetTop || '')
+
+    if (Number.isFinite(explicitOffset)) {
+      return Math.max(0, explicitOffset)
+    }
+
+    return 0
+  }
+
+  const resolveAnchorScrollState = (anchorEl) => {
+    if (!(anchorEl instanceof HTMLElement)) {
+      return null
+    }
+
+    const pageScrollContainer = anchorEl.closest('.q-scrollarea__container')
+    const scrollTarget = normalizeScrollTarget(pageScrollContainer || scroll.getScrollTarget(anchorEl))
+    const anchorRect = anchorEl.getBoundingClientRect()
+    const scrollTop = getScrollTargetTop(scrollTarget)
+    const targetRectTop = getScrollTargetRectTop(scrollTarget)
+    const anchorTopOffset = getAnchorTopOffset(anchorEl)
+
+    return {
+      scrollTarget,
+      offsetTop: Math.max(0, ((anchorRect.top - targetRectTop) + scrollTop) - anchorTopOffset)
+    }
+  }
+
   const normalizeDomAnchorId = (id) => {
     if (id === null || id === undefined || id === false) {
       return ''
@@ -62,10 +118,11 @@ export default function useNavigator() {
     const Anchor = document.getElementById(anchorId)
 
     if (Anchor !== null && typeof Anchor === 'object') {
-      const ScrollTarget = scroll.getScrollTarget(Anchor)
-      const AnchorOffsetTop = Anchor.offsetTop
+      const scrollState = resolveAnchorScrollState(Anchor)
 
-      scroll.setVerticalScrollPosition(ScrollTarget, AnchorOffsetTop, 300)
+      if (scrollState !== null) {
+        scroll.setVerticalScrollPosition(scrollState.scrollTarget, scrollState.offsetTop, 300)
+      }
 
       setTimeout(() => {
         store.commit('page/setScrolling', true)
@@ -98,7 +155,7 @@ export default function useNavigator() {
         const Anchor = document.getElementById(domAnchorId)
 
         if (Anchor !== null && typeof Anchor === 'object') {
-          return Anchor.offsetTop
+          return resolveAnchorScrollState(Anchor)?.offsetTop
         }
 
         return undefined

package/src/store/Layout.js

@@ -1,7 +1,35 @@
-export default {
-  namespaced: true,
+export const LAYOUT_ASSISTANT_STORAGE_KEY = 'docsector.layout.assistant.v1'
+
+function getStorage (storage = null) {
+  if (storage) return storage
+  if (typeof window === 'undefined') return null
+  return window.localStorage || null
+}
+
+export function loadPersistedAssistantLayout ({ storage = null, key = LAYOUT_ASSISTANT_STORAGE_KEY } = {}) {
+  const target = getStorage(storage)
+  if (!target) return false
+
+  try {
+    return target.getItem(key) === 'true'
+  } catch {
+    return false
+  }
+}
+
+export function savePersistedAssistantLayout (value, { storage = null, key = LAYOUT_ASSISTANT_STORAGE_KEY } = {}) {
+  const target = getStorage(storage)
+  if (!target) return
 
-  state: {
+  try {
+    target.setItem(key, value ? 'true' : 'false')
+  } catch {
+    // Ignore storage failures so layout keeps working in memory.
+  }
+}
+
+export function createLayoutState () {
+  return {
     header: true,
     footer: true,
     left: false,
@@ -30,9 +58,15 @@ export default {
     scrolling: true,
     meta: true,
     metaToggle: false,
-    assistant: false,
+    assistant: loadPersistedAssistantLayout(),
     assistantWidth: 380
-  },
+  }
+}
+
+export default {
+  namespaced: true,
+
+  state: createLayoutState,
   getters: {
     view (state) {
       const
@@ -122,7 +156,8 @@ export default {
       state.metaToggle = val
     },
     setAssistant (state, val) {
-      state.assistant = val
+      state.assistant = Boolean(val)
+      savePersistedAssistantLayout(state.assistant)
     },
     setAssistantWidth (state, val) {
       state.assistantWidth = val