@docsector/docsector-reader 4.4.6 → 4.5.0

package/README.md

@@ -59,7 +59,10 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 🔎 **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, 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
+- 🏷️ **Clickable Header Branding** — The configured `branding.logo` and `branding.name` render as a home link in the global header, aligned left on desktop with a compact mobile treatment
 - 📚 **Book Tabs with Per-State Colors** — Define `*.book.js` tabs with icons, order, and `color.active` / `color.inactive`
+- 📐 **Book Layout Presets** — Configure books with the default documentation chrome or a `fullwidth` layout that keeps the header and book tabs while removing the sidebar, subpage toolbar, and Table of Contents
+- 🦶 **Global Branding Footer** — Built-in `Powered by Docsector` footer renders across documentation and system pages, while respecting each page's own scroll container for full-width layout integration without double scrollbars
 - 🔀 **Internal Shortcut Pages** — Route entries can redirect with `config.link.to`, keeping localized titles while inheriting icon/status from the destination page
 - 📐 **Responsive Subpage Toolbar** — Subpage actions align with the content column on desktop and dock to the bottom on mobile
 - ⬆️ **Reading Progress Back to Top** — Documentation subpages can show a floating back-to-top control with circular reading progress that stays above the mobile subpage toolbar
@@ -70,6 +73,7 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 📊 **Translation Progress** — Automatic translation percentage based on header coverage
 - 🌐 **Accurate Available Translations** — Locale availability counter now uses actual localized page source presence, avoiding false negatives when metadata is equal
 - 🏠 **Markdown Home at Root** — Homepage is rendered from `src/pages/Homepage.{lang}.md` directly at `/`
+- 🧱 **Configurable Homepage Layout** — Set `homePage.layout` to `default` or `fullwidth`; fullwidth keeps the header and book tabs while removing the sidebar, subpage toolbar, Table of Contents, and homepage footer
 - 🌍 **Remote README as Home** — Optional build-time remote README source for homepage with automatic local fallback and automatic primary-title handoff when the remote README already provides the project heading
 - 🔗 **GitHub-Compatible Heading Anchors** — Markdown headings use GitHub-style slugs so standard README Table of Contents links work inside Docsector
 - 🧬 **Scaffolded Homepage Override Wiring** — New consumer projects automatically wire `virtual:docsector-homepage-override` into i18n message building
@@ -476,6 +480,9 @@ You can configure Docsector Reader to use a remote README as homepage content.
 
 - Fetch happens at build-time.
 - The same README content is used for all configured languages.
+- The homepage uses the `default` layout unless `homePage.layout` is set to `fullwidth`.
+- `homePage.layout` accepts only `default` and `fullwidth`.
+- The `fullwidth` homepage layout keeps the global header and book tabs, but removes the sidebar, subpage toolbar, Table of Contents, and homepage footer.
 - When the remote README resolves successfully, Docsector hides the autogenerated homepage title and uses the README's own primary heading in the rendered content.
 - If fetch fails, it falls back to local `src/pages/Homepage.{lang}.md` by default and keeps the usual autogenerated homepage title.
 - Standard GitHub-style heading links and README Table of Contents fragments keep working in the rendered homepage.
@@ -488,6 +495,7 @@ export default {
 
   homePage: {
     source: 'remote-readme',
+    layout: 'fullwidth',
     remoteReadmeUrl: 'https://raw.githubusercontent.com/your-org/your-repo/main/README.md',
     timeoutMs: 8000,
     fallbackToLocal: true
@@ -1053,6 +1061,7 @@ export default defineBook({
   label: 'Guide',
   icon: 'school',
   order: 2,
+  layout: 'default',
   color: {
     active: 'white',
     inactive: 'secondary'
@@ -1090,6 +1099,8 @@ Notes:
 - `color.active` and `color.inactive` control the tab text color for each state.
 - Color values accept Quasar tokens (`secondary`, `red-6`), CSS variables (`--brand-color` or `var(--brand-color)`), and plain CSS colors (`white`, `#fff`, `rgb(...)`).
 - Legacy `color: 'secondary'` still works, but the object form is the recommended API.
+- `layout: 'default'` keeps the standard documentation chrome with sidebar, subpage toolbar, and Table of Contents.
+- `layout: 'fullwidth'` keeps the global header and book tabs, but removes the book sidebar, subpage toolbar, and Table of Contents for pages in that book.
 - Tabs are ordered by `order`.
 
 ---

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.6'
+const VERSION = '4.5.0'
 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/docsector.config.js

@@ -117,6 +117,7 @@ export default {
   // @ Home page source
   homePage: {
     source: 'remote-readme',
+    layout: 'default',
     remoteReadmeUrl: 'https://raw.githubusercontent.com/docsector/docsector-reader/main/README.md',
     timeoutMs: 8000,
     fallbackToLocal: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "4.4.6",
+  "version": "4.5.0",
   "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

@@ -54,6 +54,7 @@ const copyBtnIcon = ref('content_copy')
 const codeRef = ref(null)
 const activeTab = ref(0)
 const lineAnchorTopOffset = 34
+const lineAnchorScrollRetryDelay = 500
 
 const coloring = computed(() => $q.dark.isActive ? 'dark' : 'white')
 const anchor = computed(() => printToLetter(props.index + 1))
@@ -171,6 +172,13 @@ function buildLineHref(line) {
   return resolveSourceCodeLineHref(router, route.path, route.query, buildLineAnchorId(line))
 }
 
+function scrollToLineAnchor(hash) {
+  scrollToAnchor(hash, false)
+  window.setTimeout(() => {
+    scrollToAnchor(hash, false)
+  }, lineAnchorScrollRetryDelay)
+}
+
 async function navigateToLineAnchor(event, line) {
   if (!shouldHandleSourceCodeLineActivation(event)) {
     return
@@ -181,10 +189,14 @@ async function navigateToLineAnchor(event, line) {
   event.preventDefault()
 
   if (route.hash === hash) {
-    scrollToAnchor(hash, false)
+    scrollToLineAnchor(hash)
     return
   }
 
+  window.setTimeout(() => {
+    scrollToAnchor(hash, false)
+  }, lineAnchorScrollRetryDelay)
+
   await router.push({
     path: route.path,
     query: route.query,
@@ -192,7 +204,7 @@ async function navigateToLineAnchor(event, line) {
   })
 
   await nextTick()
-  scrollToAnchor(hash, false)
+  scrollToLineAnchor(hash)
 }
 
 function printToLetter(number) {

package/src/components/DFooter.vue

@@ -0,0 +1,43 @@
+<template>
+  <footer class="d-footer" role="contentinfo">
+    <div class="d-footer__content">
+      <span class="d-footer__label">Powered by</span>
+      <span class="d-footer__brand">Docsector</span>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+defineOptions({ name: 'DFooter' })
+</script>
+
+<style lang="sass">
+.d-footer
+  width: 100%
+  background: var(--q-primary, #655529)
+  color: #ffffff
+
+  .d-footer__content
+    max-width: 1200px
+    margin: 0 auto
+    padding: 14px 24px
+    display: flex
+    align-items: center
+    justify-content: center
+    gap: 6px
+    text-align: center
+    font-size: 0.95rem
+    line-height: 1.4
+
+  .d-footer__label
+    opacity: 0.84
+
+  .d-footer__brand
+    font-weight: 700
+
+@media (max-width: 599px)
+  .d-footer
+    .d-footer__content
+      padding: 12px 16px
+      font-size: 0.9rem
+</style>

package/src/components/DFooterHost.vue

@@ -0,0 +1,22 @@
+<template>
+  <teleport v-if="ready && siteFooterOutletElement" :to="siteFooterOutletElement">
+    <d-footer />
+  </teleport>
+
+  <d-footer v-else-if="ready" />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+
+import DFooter from './DFooter.vue'
+import { siteFooterOutletElement } from '../composables/site-footer-outlet'
+
+defineOptions({ name: 'DFooterHost' })
+
+const ready = ref(false)
+
+onMounted(() => {
+  ready.value = true
+})
+</script>

package/src/components/DFooterOutlet.vue

@@ -0,0 +1,33 @@
+<template>
+  <div ref="outlet" class="d-footer-outlet"></div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+
+import { registerSiteFooterOutlet, unregisterSiteFooterOutlet } from '../composables/site-footer-outlet'
+
+defineOptions({ name: 'DFooterOutlet' })
+
+const outlet = ref(null)
+
+onMounted(() => {
+  registerSiteFooterOutlet(outlet.value)
+})
+
+onBeforeUnmount(() => {
+  unregisterSiteFooterOutlet(outlet.value)
+})
+</script>
+
+<style lang="sass">
+.d-footer-outlet
+  width: calc(100% + (2 * var(--d-footer-outlet-padding-x, 0px)))
+  margin-left: calc(-1 * var(--d-footer-outlet-padding-x, 0px))
+  margin-right: calc(-1 * var(--d-footer-outlet-padding-x, 0px))
+  margin-bottom: calc(-1 * var(--d-footer-outlet-padding-bottom, 0px))
+
+  > .d-footer
+    box-sizing: border-box
+    padding-bottom: var(--d-footer-outlet-padding-bottom, 0px)
+</style>

package/src/components/DPage.vue

@@ -8,11 +8,14 @@ import docsectorConfig from 'docsector.config.js'
 
 import useNavigator from '../composables/useNavigator'
 import { getReadingProgressState } from '../composables/useReadingProgress'
+import { ANCHOR_SCROLL_EXTRA_BOTTOM_PROPERTY } from '../composables/anchor-scroll-state'
 import { normalizeAiAssistantConfig } from '../ai-assistant/config'
 import { getAssistantRightRailState } from '../ai-assistant/layout'
+import { resolveRoutePageLayout } from '../page-layout'
 
 import DPageAnchor from './DPageAnchor.vue'
 import DAssistantPanel from './DAssistantPanel.vue'
+import DFooterOutlet from './DFooterOutlet.vue'
 import DPageMeta from './DPageMeta.vue'
 
 const store = useStore()
@@ -21,7 +24,7 @@ const route = useRoute()
 const $q = useQuasar()
 const { locale } = useI18n()
 
-const { scrolling, navigate } = useNavigator()
+const { scrolling, navigate, anchor: scrollToAnchor } = useNavigator()
 
 const props = defineProps({
   disableNav: {
@@ -41,8 +44,14 @@ const pageMinHeight = ref('calc(100vh - 86px)')
 const submenuHeight = ref('36px')
 const pageBottomInset = ref('0px')
 const readingProgress = ref(getReadingProgressState())
+const routeHashScrollTimeout = ref(null)
 const assistantConfig = normalizeAiAssistantConfig(docsectorConfig)
 const assistantEnabled = assistantConfig.enabled === true
+const pageLayout = computed(() => resolveRoutePageLayout(route))
+const showSubmenu = computed(() => pageLayout.value.submenu)
+const showToc = computed(() => pageLayout.value.toc)
+const showPageMeta = computed(() => !props.disableNav && pageLayout.value.footer)
+const isFullwidthContent = computed(() => pageLayout.value.contentWidth === 'fullwidth')
 
 const getPageScrollContainer = () => {
   return pageScrollArea.value?.$el?.querySelector('.q-scrollarea__container') || null
@@ -67,19 +76,19 @@ const updatePageMinHeight = () => {
   const pageContainerEl = pageContainer.value?.$el || pageContainer.value
   const submenuEl = submenu.value?.$el || submenu.value
 
-  if (!pageContainerEl || !submenuEl) {
+  if (!pageContainerEl) {
     return
   }
 
   const pageContainerStyles = window.getComputedStyle(pageContainerEl)
   const headerHeight = Number.parseFloat(pageContainerStyles.paddingTop) || 0
-  const measuredSubmenuHeight = submenuEl.offsetHeight || 0
+  const measuredSubmenuHeight = showSubmenu.value ? (submenuEl?.offsetHeight || 0) : 0
   const isMobile = $q.screen.lt.md
-  const totalOffset = Math.max(0, Math.round(headerHeight + (isMobile ? 0 : measuredSubmenuHeight)))
+  const totalOffset = Math.max(0, Math.round(headerHeight + (isMobile || !showSubmenu.value ? 0 : measuredSubmenuHeight)))
 
   pageMinHeight.value = `calc(100vh - ${totalOffset}px)`
-  submenuHeight.value = `${Math.max(36, Math.round(measuredSubmenuHeight))}px`
-  pageBottomInset.value = isMobile ? submenuHeight.value : '0px'
+  submenuHeight.value = `${showSubmenu.value ? Math.max(36, Math.round(measuredSubmenuHeight)) : 0}px`
+  pageBottomInset.value = isMobile && showSubmenu.value ? submenuHeight.value : '0px'
   syncReadingProgress()
 }
 
@@ -91,6 +100,22 @@ const schedulePageMinHeightUpdate = () => {
   })
 }
 
+const scheduleRouteHashScroll = () => {
+  if (routeHashScrollTimeout.value) {
+    clearTimeout(routeHashScrollTimeout.value)
+    routeHashScrollTimeout.value = null
+  }
+
+  if (showToc.value || !route.hash) {
+    return
+  }
+
+  routeHashScrollTimeout.value = setTimeout(() => {
+    scrollToAnchor(route.hash, false)
+    routeHashScrollTimeout.value = null
+  }, 500)
+}
+
 const overview = computed(() => route.matched[0].path)
 const showcase = computed(() => {
   const showcase = route.matched[0].meta.subpages.showcase
@@ -123,7 +148,7 @@ const shouldShowBackToTopControl = computed(() => {
   return props.showBackToTopControl && readingProgress.value.hasOverflow && readingProgress.value.isVisible
 })
 const rightRailState = computed(() => getAssistantRightRailState({
-  tocOpen: layoutMeta.value,
+  tocOpen: showToc.value && layoutMeta.value,
   assistantOpen: assistantEnabled && layoutAssistant.value,
   screenWidth: $q.screen.width,
   assistantWidth: assistantWidth.value,
@@ -137,8 +162,8 @@ const mobileAssistantOpen = computed({
   set: (value) => { layoutAssistant.value = value }
 })
 const mobileTocOpen = computed({
-  get: () => rightRailState.value.isMobile && layoutMeta.value,
-  set: (value) => { layoutMeta.value = value }
+  get: () => showToc.value && rightRailState.value.isMobile && layoutMeta.value,
+  set: (value) => { layoutMeta.value = showToc.value && value }
 })
 const backToTopRightOffset = computed(() => {
   return rightRailState.value.backToTopRightOffset
@@ -157,6 +182,7 @@ const currentPageTitle = computed(() => {
 })
 
 const toggleSectionsTree = () => {
+  if (!showToc.value) return
   layoutMeta.value = !layoutMeta.value
 }
 
@@ -218,6 +244,8 @@ const subroute = (to) => {
 }
 
 const resetPageScroll = () => {
+  getPageScrollContainer()?.style.removeProperty(ANCHOR_SCROLL_EXTRA_BOTTOM_PROPERTY)
+
   if (pageScrollArea.value !== null) {
     pageScrollArea.value.setScrollPosition('vertical', 0, 0)
   }
@@ -331,12 +359,18 @@ onMounted(() => {
   window.addEventListener('resize', schedulePageMinHeightUpdate)
   nextTick(() => {
     schedulePageMinHeightUpdate()
+    scheduleRouteHashScroll()
   })
 
   router.beforeEach((to, from, next) => {
-    resetPageScroll()
+    const sameEffectivePage = isSameEffectivePage(from, to)
+    const hashOnlyNavigation = sameEffectivePage && to.hash !== ''
 
-    if (to.hash === '' && !isSameEffectivePage(from, to)) {
+    if (!hashOnlyNavigation) {
+      resetPageScroll()
+    }
+
+    if (to.hash === '' && !sameEffectivePage) {
       store.commit('page/resetAnchor')
       store.commit('page/resetAnchors')
       store.commit('page/resetNodes')
@@ -349,12 +383,17 @@ onMounted(() => {
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', handleMainScrollKeys)
   window.removeEventListener('resize', schedulePageMinHeightUpdate)
+
+  if (routeHashScrollTimeout.value) {
+    clearTimeout(routeHashScrollTimeout.value)
+  }
 })
 
 watch(() => route.fullPath, () => {
   nextTick(() => {
     schedulePageMinHeightUpdate()
     syncReadingProgress(0)
+    scheduleRouteHashScroll()
   })
 })
 </script>
@@ -368,8 +407,13 @@ watch(() => route.fullPath, () => {
     '--d-submenu-height': submenuHeight,
     '--d-page-bottom-inset': pageBottomInset
   }"
+  :class="[
+    `d-page-layout--${pageLayout.mode}`,
+    isFullwidthContent ? 'd-page-layout--fullwidth-content' : 'd-page-layout--contained-content'
+  ]"
 >
   <q-toolbar
+    v-if="showSubmenu"
     id="submenu"
     ref="submenu"
     class="bg-grey-8 text-white"
@@ -401,7 +445,7 @@ watch(() => route.fullPath, () => {
           />
         </q-btn-group>
       </q-toolbar-title>
-      <q-btn class="d-submenu__toggle" :class="layoutMeta ? 'active' : null" @click="toggleSectionsTree" icon="account_tree">
+      <q-btn v-if="showToc" class="d-submenu__toggle" :class="layoutMeta ? 'active' : null" @click="toggleSectionsTree" icon="account_tree">
         <q-tooltip>{{ $t('page.edit.anchor') }}</q-tooltip>
       </q-btn>
     </div>
@@ -409,10 +453,11 @@ watch(() => route.fullPath, () => {
 
   <q-page id="page">
     <q-scroll-area class="content" :class="main" ref="pageScrollArea">
-      <div id="scroll-container" @click="handleContentAnchorClick">
+      <div id="scroll-container" :class="isFullwidthContent ? 'd-scroll-container--fullwidth' : null" @click="handleContentAnchorClick">
         <slot />
       </div>
-      <d-page-meta v-if="!disableNav" />
+      <d-page-meta v-if="showPageMeta" />
+      <d-footer-outlet />
       <q-scroll-observer @scroll="handlePageScroll" :debounce="300" />
     </q-scroll-area>
   </q-page>
@@ -456,10 +501,10 @@ watch(() => route.fullPath, () => {
     @update:model-value="setRightRailOpen"
   >
     <div class="d-right-rail">
-      <div v-if="rightRailState.showToc" class="d-right-rail__toc" :style="{ width: `${rightRailState.tocWidth}px` }">
+      <div v-if="showToc && rightRailState.showToc" class="d-right-rail__toc" :style="{ width: `${rightRailState.tocWidth}px` }">
         <d-page-anchor id="anchor" />
       </div>
-      <q-separator v-if="rightRailState.showToc && rightRailState.showAssistant" vertical />
+      <q-separator v-if="showToc && rightRailState.showToc && rightRailState.showAssistant" vertical />
       <d-assistant-panel
         v-if="rightRailState.showAssistant"
         class="d-right-rail__assistant"
@@ -475,6 +520,7 @@ watch(() => route.fullPath, () => {
   </q-drawer>
 
   <q-dialog
+    v-if="showToc"
     v-model="mobileTocOpen"
     position="right"
     square
@@ -519,12 +565,16 @@ watch(() => route.fullPath, () => {
   min-height: var(--d-page-min-height, calc(100vh - 86px))
 
 .content > div.scroll > div.q-scrollarea__content
+  --d-page-content-padding-x: 15px
+  --d-page-content-padding-bottom: calc(15px + var(--d-page-bottom-inset, 0px) + var(--d-anchor-scroll-extra-bottom, 0px) + env(safe-area-inset-bottom, 0px))
+  --d-footer-outlet-padding-x: var(--d-page-content-padding-x)
+  --d-footer-outlet-padding-bottom: var(--d-page-content-padding-bottom)
   max-width: 100%
   box-sizing: border-box
 
 .content:not(.no-padding) > div.scroll > div.q-scrollarea__content
-  padding: 15px
-  padding-bottom: calc(15px + var(--d-page-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px))
+  padding: var(--d-page-content-padding-x)
+  padding-bottom: var(--d-page-content-padding-bottom)
 
 #page
   min-height: var(--d-page-min-height, calc(100vh - 86px)) !important
@@ -598,6 +648,17 @@ body.body--dark
   max-width: 1200px
   margin: auto
 
+#page-container.d-page-layout--fullwidth-content
+  #scroll-container,
+  #d-page-meta
+    max-width: none
+
+  #d-page-meta > .row,
+  #d-page-meta > #d-page-nav
+    padding-left: 15px
+    padding-right: 15px
+    box-sizing: border-box
+
 #submenu
   min-height: 36px
   padding: 0

package/src/composables/anchor-scroll-state.js

@@ -0,0 +1,35 @@
+export const ANCHOR_SCROLL_EXTRA_BOTTOM_PROPERTY = '--d-anchor-scroll-extra-bottom'
+
+const toFiniteNumber = (value) => {
+  const normalized = Number(value)
+  return Number.isFinite(normalized) ? normalized : 0
+}
+
+export function getAnchorScrollMaxTop ({ scrollHeight = 0, clientHeight = 0 } = {}) {
+  return Math.max(0, toFiniteNumber(scrollHeight) - toFiniteNumber(clientHeight))
+}
+
+export function getAnchorScrollExtraBottom ({ offsetTop = 0, scrollHeight = 0, clientHeight = 0, currentExtraBottom = 0 } = {}) {
+  const baseScrollHeight = Math.max(0, toFiniteNumber(scrollHeight) - Math.max(0, toFiniteNumber(currentExtraBottom)))
+  const maxScrollTop = getAnchorScrollMaxTop({ scrollHeight: baseScrollHeight, clientHeight })
+  return Math.ceil(Math.max(0, toFiniteNumber(offsetTop) - maxScrollTop))
+}
+
+export function setAnchorScrollExtraBottom (target, value = 0) {
+  if (typeof HTMLElement === 'undefined') {
+    return
+  }
+
+  if (!(target instanceof HTMLElement)) {
+    return
+  }
+
+  const extraBottom = Math.max(0, Math.ceil(toFiniteNumber(value)))
+
+  if (extraBottom > 0) {
+    target.style.setProperty(ANCHOR_SCROLL_EXTRA_BOTTOM_PROPERTY, `${extraBottom}px`)
+    return
+  }
+
+  target.style.removeProperty(ANCHOR_SCROLL_EXTRA_BOTTOM_PROPERTY)
+}

package/src/composables/site-footer-outlet.js

@@ -0,0 +1,15 @@
+import { shallowRef } from 'vue'
+
+export const siteFooterOutletElement = shallowRef(null)
+
+export function registerSiteFooterOutlet (element) {
+  if (element instanceof HTMLElement) {
+    siteFooterOutletElement.value = element
+  }
+}
+
+export function unregisterSiteFooterOutlet (element) {
+  if (siteFooterOutletElement.value === element) {
+    siteFooterOutletElement.value = null
+  }
+}

package/src/composables/useNavigator.js

@@ -4,6 +4,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { ref } from 'vue'
 
 import { DEFAULT_ACTIVE_ANCHOR_OFFSET, getActiveAnchorId } from './useActiveAnchor'
+import { ANCHOR_SCROLL_EXTRA_BOTTOM_PROPERTY, getAnchorScrollExtraBottom, setAnchorScrollExtraBottom } from './anchor-scroll-state'
 
 export default function useNavigator() {
   const store = useStore()
@@ -49,7 +50,26 @@ export default function useNavigator() {
     return 0
   }
 
-  const resolveAnchorScrollState = (anchorEl) => {
+  const syncAnchorScrollExtraBottom = (scrollTarget, offsetTop) => {
+    if (!(scrollTarget instanceof HTMLElement)) {
+      return
+    }
+
+    const extraBottom = getAnchorScrollExtraBottom({
+      offsetTop,
+      scrollHeight: scrollTarget.scrollHeight,
+      clientHeight: scrollTarget.clientHeight,
+      currentExtraBottom: Number.parseFloat(scrollTarget.style.getPropertyValue(ANCHOR_SCROLL_EXTRA_BOTTOM_PROPERTY) || '')
+    })
+
+    setAnchorScrollExtraBottom(scrollTarget, extraBottom)
+
+    if (extraBottom > 0) {
+      void scrollTarget.scrollHeight
+    }
+  }
+
+  const resolveAnchorScrollState = (anchorEl, { syncExtraBottom = true } = {}) => {
     if (!(anchorEl instanceof HTMLElement)) {
       return null
     }
@@ -61,9 +81,15 @@ export default function useNavigator() {
     const targetRectTop = getScrollTargetRectTop(scrollTarget)
     const anchorTopOffset = getAnchorTopOffset(anchorEl)
 
+    const offsetTop = Math.max(0, ((anchorRect.top - targetRectTop) + scrollTop) - anchorTopOffset)
+
+    if (syncExtraBottom) {
+      syncAnchorScrollExtraBottom(scrollTarget, offsetTop)
+    }
+
     return {
       scrollTarget,
-      offsetTop: Math.max(0, ((anchorRect.top - targetRectTop) + scrollTop) - anchorTopOffset)
+      offsetTop
     }
   }
 
@@ -155,7 +181,7 @@ export default function useNavigator() {
         const Anchor = document.getElementById(domAnchorId)
 
         if (Anchor !== null && typeof Anchor === 'object') {
-          return resolveAnchorScrollState(Anchor)?.offsetTop
+          return resolveAnchorScrollState(Anchor, { syncExtraBottom: false })?.offsetTop
         }
 
         return undefined

package/src/index.js

@@ -226,6 +226,7 @@ export function createDocsector (config = {}) {
 
     homePage: {
       source: 'local',
+      layout: 'default',
       remoteReadmeUrl: null,
       timeoutMs: 8000,
       fallbackToLocal: true,
@@ -237,10 +238,12 @@ export function createDocsector (config = {}) {
 /**
  * Define a Docsector book entry for the pages registry.
  *
- * @param {Object} config - Book configuration (id, label, icon, order, color)
+ * @param {Object} config - Book configuration (id, label, icon, order, color, layout)
  * @param {Object|string} [config.color] - Tab text color settings
  * @param {string} [config.color.active] - Active tab text color token (Quasar color key, CSS var, or CSS color)
  * @param {string} [config.color.inactive] - Inactive tab text color token (Quasar color key, CSS var, or CSS color)
+ * @param {string|Object} [config.layout] - Page layout preset for pages in the book (`default` or `fullwidth`)
+ * @param {string|Object} [config.layouts] - Alias for `layout`, useful when passing explicit layout flags
  * @returns {Object} Normalized book definition
  */
 export function defineBook (config = {}) {
@@ -251,7 +254,8 @@ export function defineBook (config = {}) {
   return {
     ...config,
     ...(resolvedId ? { id: resolvedId } : {}),
-    ...(resolvedLabel ? { label: resolvedLabel } : {})
+    ...(resolvedLabel ? { label: resolvedLabel } : {}),
+    ...(config.layouts === undefined && config.layout !== undefined ? { layouts: config.layout } : {})
   }
 }
 

package/src/layouts/DefaultLayout.vue

@@ -1,19 +1,36 @@
 <template>
 <q-layout view="lHh LpR lFf">
-  <q-header class="d-header left-btn" elevated>
+  <q-header class="d-header" :class="showSidebar ? 'left-btn' : 'd-header--no-sidebar'" elevated>
     <q-toolbar color="primary">
-      <q-btn class="filled" square icon="menu" aria-label="Toggle Menu" @click="toogleMenu" />
-      <q-toolbar-title class="text-center">
-        <img
-          v-if="branding.logo"
-          :src="branding.logo"
-          :alt="branding.name"
-          height="26"
-          style="vertical-align: middle;"
-          class="q-mr-sm"
-        />
-        <q-icon class="q-mb-xs q-mr-sm" :name="headerTitleIcon" />
-        {{ headerTitleText }}
+      <q-btn v-if="showSidebar" class="filled" square icon="menu" aria-label="Toggle Menu" @click="toogleMenu" />
+      <q-toolbar-title
+        class="d-header__brand-slot row no-wrap items-stretch self-stretch q-pa-none"
+        :class="$q.screen.lt.sm ? 'justify-start' : 'justify-center'"
+      >
+        <q-btn
+          class="filled d-header__brand"
+          :class="$q.screen.lt.sm ? 'q-px-sm' : 'q-px-md'"
+          align="left"
+          no-caps
+          stretch
+          to="/"
+          :aria-label="brandAriaLabel"
+        >
+          <img
+            v-if="branding.logo"
+            :src="branding.logo"
+            :alt="brandName"
+            height="26"
+            class="d-header__brand-logo q-mr-sm"
+          />
+          <span class="d-header__brand-text col column justify-center no-wrap">
+            <span class="d-header__brand-name ellipsis text-left">{{ brandName }}</span>
+            <span
+              v-if="brandVersion"
+              class="d-header__brand-version text-caption ellipsis text-left"
+            >{{ brandVersion }}</span>
+          </span>
+        </q-btn>
       </q-toolbar-title>
       <q-btn
         v-if="assistantEnabled"
@@ -53,55 +70,58 @@
     </q-tabs>
   </q-header>
 
-  <q-drawer elevated show-if-above side="left" v-model="layout.menu">
+  <q-drawer v-if="showSidebar" elevated show-if-above side="left" v-model="layout.menu">
     <d-menu />
   </q-drawer>
 
   <router-view />
+
+  <d-footer-host />
 </q-layout>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
-import { useMeta, colors } from 'quasar'
+import { useMeta, colors, useQuasar } from 'quasar'
 
 import DMenu from '../components/DMenu.vue'
+import DFooterHost from '../components/DFooterHost.vue'
 import docsectorConfig from 'docsector.config.js'
 import { normalizeAiAssistantConfig } from '../ai-assistant/config'
 import { allBooks, booksByVersion } from 'virtual:docsector-books'
-import { pageTitleI18nPath } from '../i18n/path'
+import { resolveRoutePageLayout } from '../page-layout'
 
 defineOptions({ name: 'LayoutDefault' })
 
 const branding = docsectorConfig.branding || {}
+const brandName = branding.name || 'Docsector'
+const brandVersion = typeof branding.version === 'string' ? branding.version.trim() : ''
+const brandAriaLabel = `Open ${brandName} home`
 const assistantConfig = normalizeAiAssistantConfig(docsectorConfig)
 const assistantEnabled = assistantConfig.enabled === true
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+const $q = useQuasar()
 const { t, locale } = useI18n()
 
 const layout = ref({
   menu: false
 })
 
+const pageLayout = computed(() => resolveRoutePageLayout(route))
+const showSidebar = computed(() => pageLayout.value.sidebar)
 const assistantOpen = computed(() => store.state.layout.assistant)
 
-const headerTitleIcon = computed(() => {
-  return route.matched[0].meta.icon ?? route.meta.icon
-})
-
-const headerTitleText = computed(() => {
-  if (store.state.i18n.base) {
-    return t(pageTitleI18nPath(store.state.i18n.base))
-  } else {
-    return t(`menu.${route.matched[1].meta.menu}`)
+watch(showSidebar, (value) => {
+  if (!value) {
+    layout.value.menu = false
   }
-})
+}, { immediate: true })
 
 const defaultBookTabColors = Object.freeze({
   active: 'white',
@@ -362,6 +382,24 @@ store.commit('page/resetAnchors')
   &.left-btn
     .q-toolbar
       padding: 0
+  .d-header__brand
+    min-width: 0
+    max-width: 100%
+  .d-header__brand-logo
+    display: block
+    flex-shrink: 0
+  .d-header__brand-text
+    min-width: 0
+    line-height: 1
+  .d-header__brand-name
+    display: block
+    line-height: 0.95rem
+  .d-header__brand-version
+    display: block
+    margin-top: -2px
+    font-size: 10px
+    line-height: 0.75rem
+    opacity: 0.8
   .q-tabs
     margin-top: 2px
   .d-book-tabs-separator

package/src/layouts/SystemLayout.vue

@@ -1,5 +1,12 @@
 <template>
   <q-layout view="lHh lpR lFr">
     <router-view />
+    <d-footer-host />
   </q-layout>
 </template>
+
+<script setup>
+import DFooterHost from '../components/DFooterHost.vue'
+
+defineOptions({ name: 'LayoutSystem' })
+</script>

package/src/page-layout.js

@@ -0,0 +1,156 @@
+export const PAGE_LAYOUT_DEFAULT = 'default'
+export const PAGE_LAYOUT_FULLWIDTH = 'fullwidth'
+
+const PAGE_LAYOUT_PRESETS = Object.freeze({
+  [PAGE_LAYOUT_DEFAULT]: Object.freeze({
+    mode: PAGE_LAYOUT_DEFAULT,
+    sidebar: true,
+    submenu: true,
+    toc: true,
+    footer: true,
+    contentWidth: 'contained'
+  }),
+  [PAGE_LAYOUT_FULLWIDTH]: Object.freeze({
+    mode: PAGE_LAYOUT_FULLWIDTH,
+    sidebar: false,
+    submenu: false,
+    toc: false,
+    footer: true,
+    contentWidth: 'fullwidth'
+  })
+})
+
+export const HOME_PAGE_FULLWIDTH_LAYOUT = Object.freeze({
+  ...PAGE_LAYOUT_PRESETS[PAGE_LAYOUT_FULLWIDTH],
+  footer: false
+})
+
+const normalizeLayoutMode = (value) => {
+  const normalized = String(value || '')
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_-]+/g, '-')
+
+  if (normalized === PAGE_LAYOUT_FULLWIDTH) {
+    return PAGE_LAYOUT_FULLWIDTH
+  }
+
+  return PAGE_LAYOUT_DEFAULT
+}
+
+const normalizeBoolean = (value, fallback) => {
+  if (typeof value === 'boolean') return value
+  if (value === undefined || value === null) return fallback
+
+  const normalized = String(value).trim().toLowerCase()
+  if (['true', '1', 'yes', 'on'].includes(normalized)) return true
+  if (['false', '0', 'no', 'off'].includes(normalized)) return false
+
+  return fallback
+}
+
+const firstDefined = (source, keys) => {
+  for (const key of keys) {
+    if (source?.[key] !== undefined) {
+      return source[key]
+    }
+  }
+
+  return undefined
+}
+
+const normalizeContentWidth = (value, fallback) => {
+  if (value === undefined || value === null) return fallback
+
+  const normalized = String(value).trim().toLowerCase().replace(/[\s_-]+/g, '-')
+  if (['full', 'fullwidth', 'full-width', 'wide', 'fluid'].includes(normalized)) {
+    return 'fullwidth'
+  }
+
+  return 'contained'
+}
+
+const toLayoutPatch = (source) => {
+  if (typeof source === 'string') {
+    return { mode: normalizeLayoutMode(source) }
+  }
+
+  if (!source || typeof source !== 'object' || Array.isArray(source)) {
+    return null
+  }
+
+  const patch = {}
+  const mode = firstDefined(source, ['mode', 'layout', 'preset', 'name', 'type'])
+  if (mode !== undefined) {
+    patch.mode = normalizeLayoutMode(mode)
+  }
+
+  const sidebar = firstDefined(source, ['sidebar', 'menu', 'left'])
+  const submenu = firstDefined(source, ['submenu', 'subpage', 'subpageBar'])
+  const toc = firstDefined(source, ['toc', 'tableOfContents', 'anchors', 'meta'])
+  const footer = firstDefined(source, ['footer', 'nav', 'navigationFooter'])
+  const contentWidth = firstDefined(source, ['contentWidth', 'width'])
+
+  if (sidebar !== undefined) patch.sidebar = normalizeBoolean(sidebar, true)
+  if (submenu !== undefined) patch.submenu = normalizeBoolean(submenu, true)
+  if (toc !== undefined) patch.toc = normalizeBoolean(toc, true)
+  if (footer !== undefined) patch.footer = normalizeBoolean(footer, true)
+  if (contentWidth !== undefined) patch.contentWidth = normalizeContentWidth(contentWidth, 'contained')
+
+  return patch
+}
+
+export function resolvePageLayout (...sources) {
+  let layout = { ...PAGE_LAYOUT_PRESETS[PAGE_LAYOUT_DEFAULT] }
+
+  for (const source of sources) {
+    const patch = toLayoutPatch(source)
+    if (!patch) continue
+
+    if (patch.mode) {
+      layout = { ...PAGE_LAYOUT_PRESETS[patch.mode] }
+    }
+
+    layout = {
+      ...layout,
+      ...patch,
+      mode: patch.mode || layout.mode,
+      contentWidth: normalizeContentWidth(patch.contentWidth, layout.contentWidth)
+    }
+  }
+
+  return layout
+}
+
+export function isHomeRoute (route = {}) {
+  const meta = route?.meta || route?.matched?.[0]?.meta || {}
+  return meta.book === 'home' || meta.type === 'home'
+}
+
+export function resolveHomePageLayout (homePage = {}) {
+  const mode = normalizeLayoutMode(homePage?.layout)
+
+  if (mode === PAGE_LAYOUT_FULLWIDTH) {
+    return { ...HOME_PAGE_FULLWIDTH_LAYOUT }
+  }
+
+  return resolvePageLayout(PAGE_LAYOUT_DEFAULT)
+}
+
+export function resolveRoutePageLayout (route = {}) {
+  const sources = []
+
+  if (Array.isArray(route?.matched)) {
+    for (const record of route.matched) {
+      const meta = record?.meta || {}
+      if (meta.layout !== undefined) sources.push(meta.layout)
+      if (meta.layouts !== undefined) sources.push(meta.layouts)
+    }
+  }
+
+  const meta = route?.meta || {}
+  if (meta.layout !== undefined) sources.push(meta.layout)
+  if (meta.layouts !== undefined) sources.push(meta.layouts)
+
+  return resolvePageLayout(...sources)
+}

package/src/pages/404Page.vue

@@ -9,7 +9,12 @@
         <strong>(404)</strong>
       </p>
       <q-btn color="secondary" style="width:200px;" @click="$router.push('/')">Go home</q-btn>
+      <d-footer-outlet />
     </q-scroll-area>
   </q-page>
 </q-page-container>
 </template>
+
+<script setup>
+import DFooterOutlet from 'components/DFooterOutlet.vue'
+</script>

package/src/pages/full/layout.overview.en-US.md

@@ -0,0 +1,49 @@
+## Overview
+
+The Full book is a working example of a book-level layout opt-in. It uses `layout: 'fullwidth'` in `src/pages/full.book.js`, so every page registered in `src/pages/full.index.js` inherits the fullwidth page chrome.
+
+This page should render with the global header and book tabs, but without the left sidebar, subpage toolbar, Table of Contents toggle, or Table of Contents rail.
+
+## Book Configuration
+
+```javascript
+import { defineBook } from '../index.js'
+
+export default defineBook({
+  id: 'full',
+  label: 'Full',
+  icon: 'fullscreen',
+  order: 3,
+  layout: 'fullwidth'
+})
+```
+
+The `layout` field accepts two values:
+
+- `default` keeps the standard documentation chrome.
+- `fullwidth` keeps the global header and book tabs, then removes the book sidebar, subpage toolbar, and Table of Contents for pages in that book.
+
+## When to Use It
+
+Use a fullwidth book when a section needs more freedom than a reference page, such as:
+
+- Product overview pages
+- Landing-style documentation sections
+- Rich Vue-driven pages
+- Visual guides with wide screenshots or diagrams
+- Documentation experiences that should not be constrained by a sidebar and Table of Contents
+
+## Homepage Comparison
+
+Homepage fullwidth is configured separately in `docsector.config.js`:
+
+```javascript
+export default {
+  homePage: {
+    source: 'local',
+    layout: 'fullwidth'
+  }
+}
+```
+
+That setting is opt-in for the homepage only. A book-level `layout: 'fullwidth'` is opt-in for every page in that book.

package/src/pages/full/layout.overview.pt-BR.md

@@ -0,0 +1,49 @@
+## Visão Geral
+
+O book Full é um exemplo funcional de opt-in de layout no nível do book. Ele usa `layout: 'fullwidth'` em `src/pages/full.book.js`, então toda página registrada em `src/pages/full.index.js` herda o chrome de página fullwidth.
+
+Esta página deve renderizar com o header global e as abas de books, mas sem a sidebar esquerda, sem a toolbar de subpáginas, sem o botão de Table of Contents e sem a área lateral do Table of Contents.
+
+## Configuração do Book
+
+```javascript
+import { defineBook } from '../index.js'
+
+export default defineBook({
+  id: 'full',
+  label: 'Full',
+  icon: 'fullscreen',
+  order: 3,
+  layout: 'fullwidth'
+})
+```
+
+O campo `layout` aceita dois valores:
+
+- `default` mantém o chrome padrão de documentação.
+- `fullwidth` mantém o header global e as abas de books, depois remove a sidebar do book, a toolbar de subpáginas e o Table of Contents das páginas desse book.
+
+## Quando Usar
+
+Use um book fullwidth quando uma seção precisa de mais liberdade do que uma página de referência, como:
+
+- Páginas de visão geral de produto
+- Seções de documentação com estilo de landing page
+- Páginas ricas movidas por Vue
+- Guias visuais com screenshots ou diagramas largos
+- Experiências de documentação que não devem ficar limitadas por uma sidebar e um Table of Contents
+
+## Comparação com a Homepage
+
+O fullwidth da homepage é configurado separadamente em `docsector.config.js`:
+
+```javascript
+export default {
+  homePage: {
+    source: 'local',
+    layout: 'fullwidth'
+  }
+}
+```
+
+Essa configuração é opt-in apenas para a homepage. Um `layout: 'fullwidth'` no nível do book é opt-in para todas as páginas desse book.

package/src/pages/full.book.js

@@ -0,0 +1,13 @@
+import { defineBook } from '../index.js'
+
+export default defineBook({
+  id: 'full',
+  label: 'Full',
+  icon: 'fullscreen',
+  order: 3,
+  layout: 'fullwidth',
+  color: {
+    active: 'white',
+    inactive: 'white'
+  }
+})

package/src/pages/full.index.js

@@ -0,0 +1,36 @@
+export default {
+  '/layout': {
+    config: {
+      icon: 'fullscreen',
+      status: 'new',
+      version: 'v4.5.0',
+      meta: {
+        description: {
+          'en-US': 'Fullwidth Layout — Documentation of Docsector Reader',
+          'pt-BR': 'Fullwidth Layout — Documentation of Docsector Reader'
+        }
+      },
+      book: 'full',
+      menu: {
+        header: {
+          icon: 'fullscreen',
+          label: 'Fullwidth'
+        }
+      },
+      subpages: {
+        showcase: false,
+        vs: false
+      }
+    },
+    data: {
+      'en-US': { title: 'Fullwidth Layout' },
+      'pt-BR': { title: 'Fullwidth Layout' }
+    },
+    metadata: {
+      tags: {
+        'en-US': 'fullwidth layout book sidebar table of contents home page landing page custom docs',
+        'pt-BR': 'fullwidth layout book sidebar table of contents home page landing page custom docs'
+      }
+    }
+  }
+}

package/src/quasar.factory.js

@@ -144,6 +144,7 @@ function getPagesRegistryFilesForRoot (root) {
 function normalizeBookConfig (rawConfig = {}, fallbackId = 'manual', index = 0) {
   const resolvedId = rawConfig.id || fallbackId || `book-${index + 1}`
   const label = rawConfig.label || (resolvedId.charAt(0).toUpperCase() + resolvedId.slice(1))
+  const layouts = rawConfig.layouts ?? rawConfig.layout
 
   return {
     ...rawConfig,
@@ -151,7 +152,8 @@ function normalizeBookConfig (rawConfig = {}, fallbackId = 'manual', index = 0)
     label,
     icon: rawConfig.icon || 'menu_book',
     order: rawConfig.order ?? (index + 1),
-    color: normalizeBookColorConfig(rawConfig.color)
+    color: normalizeBookColorConfig(rawConfig.color),
+    ...(layouts !== undefined ? { layouts } : {})
   }
 }
 
@@ -704,6 +706,7 @@ export const booksByVersion = entries.reduce((accumulator, entry, index) => {
     icon: config.icon || 'menu_book',
     order: config.order ?? (index + 1),
     color: normalizeBookColor(config.color),
+    ...(config.layouts !== undefined || config.layout !== undefined ? { layouts: config.layouts ?? config.layout } : {}),
     version: version.id,
     versionPrefix: version.routePrefix
   }

package/src/router/routes.js

@@ -1,5 +1,7 @@
 import { pageEntries, versions } from 'virtual:docsector-books'
 import boot from 'pages/boot'
+import docsectorConfig from 'docsector.config.js'
+import { resolveHomePageLayout, resolvePageLayout } from '../page-layout'
 
 const normalizeInternalLink = (linkTo) => {
   const normalized = String(linkTo || '').trim()
@@ -89,6 +91,7 @@ for (const entry of pageEntries || []) {
 
   const topPage = config.book ?? config.type ?? entry?.book ?? 'manual'
   const routePath = normalizeRoutePath(`${entry?.versionPrefix || ''}/${topPage}${path}`)
+  const layouts = resolvePageLayout(entry?.bookConfig?.layouts ?? entry?.bookConfig?.layout, config.layouts ?? config.layout)
   const hasInternalLink = typeof config?.link?.to === 'string' && config.link.to.trim().length > 0
   const internalLinkTo = hasInternalLink ? normalizeVersionedInternalLink(config.link.to, entry?.versionPrefix || '') : null
   const linkedConfig = hasInternalLink
@@ -167,6 +170,7 @@ for (const entry of pageEntries || []) {
       sourceRoot: entry.sourceRoot || '',
       sourcePathBase: buildSourcePathBase(entry, topPage, path),
       pagePath: path,
+      layouts,
       i18nSegments: entry.i18nSegments || [topPage, ...String(path).replace(/^\//, '').split('/').filter(Boolean)],
       menuGroupPath: String(path).replace(/^\//, '').split('/').filter(Boolean)[0] || '',
       unversionedPath: entry.unversionedPath || `/${topPage}${path}`
@@ -201,10 +205,7 @@ const routes = [
         }
       },
       meta: boot.meta,
-      layouts: {
-        footer: false,
-        submenu: false
-      },
+      layouts: resolveHomePageLayout(docsectorConfig.homePage),
       pages: {}
     },
     children: [