kmcom-nuxt-layers 6.2.1 → 6.4.0

package/layers/structure/navigation/app/composables/mastNav.ts

@@ -1,15 +1,40 @@
-import MastNavModal from '../components/Mast/NavModal.vue'
-import { createModal } from '../utils/createModal'
+/**
+ * Shared open state for the site nav. Plain `useState`, not an overlay: layouts and triggers read
+ * `isOpen`, and `<MastNavModal />` (rendered once by the layout) binds to it. Any number of
+ * `<MastNav>` triggers share the one modal.
+ *
+ * Scroll lock: UModal (Reka) locks body scroll and pads for the scrollbar, so this only stops
+ * Lenis — and only after Reka has measured. Hiding overflow first (lockScrolling) left Reka
+ * measuring a 0px scrollbar, and the page widened by the scrollbar on open.
+ */
+export function useMastNav() {
+  const isOpen = useState('mast-nav:open', () => false)
 
-export const useMastNav = createModal(MastNavModal, {
-  onOpen: () => {
+  function smoothScroll() {
     try {
-      useSmoothScroll().lockScrolling()
-    } catch {}
-  },
-  onClose: () => {
-    try {
-      useSmoothScroll().unlockScrolling()
-    } catch {}
-  },
-})
+      return useSmoothScroll().locomotiveScroll
+    } catch {
+      return undefined
+    }
+  }
+
+  function open() {
+    const scroll = smoothScroll()
+    isOpen.value = true
+    if (import.meta.client) nextTick(() => scroll?.value?.stop())
+  }
+
+  function close() {
+    const scroll = smoothScroll()
+    isOpen.value = false
+    if (!import.meta.client) return
+    scroll?.value?.start()
+    // Lenis/Locomotive measure the page while stopped; resize after restart so they resync
+    scroll?.value?.lenisInstance?.resize()
+    requestAnimationFrame(() => scroll?.value?.resize())
+  }
+
+  const toggle = () => (isOpen.value ? close() : open())
+
+  return { isOpen: readonly(isOpen), open, close, toggle }
+}

package/layers/structure/navigation/app/types/nav.ts

@@ -8,4 +8,38 @@ export type MastNavLink = {
         params?: Record<string, string | number>
         query?: Record<string, string | number>
       }
+  /** Skip the link without passing a custom `links` prop. */
+  hidden?: boolean
+}
+
+/**
+ * UButton props for the MastNav trigger. Plain strings: Nuxt UI's ButtonProps is derived from the
+ * resolved app config, so using it inside app.config.ts would be a type cycle.
+ */
+export type MastNavTrigger = {
+  label?: string
+  icon?: string
+  trailingIcon?: string
+  color?: string
+  variant?: string
+  size?: string
+  square?: boolean
+  class?: string
+}
+
+/** Class strings for MastNavModal's parts. Merged per key over app.config; strings replace. */
+export type MastNavUi = {
+  content: string
+  close: string
+  nav: string
+  link: string
+  linkActive: string
+}
+
+export type SiteLogoSize = 'sm' | 'md' | 'lg' | 'display'
+
+export type SiteLogoConfig = {
+  stacked: boolean
+  ui: { root: string; word: string }
+  sizes: Record<SiteLogoSize, string>
 }

package/layers/structure/navigation/nuxt.config.ts

@@ -1,7 +1,13 @@
 export default defineNuxtConfig({
   $meta: { name: 'navigation' },
 
-  extends: ['../../core', '../../motion/scroll', '../layout', '../../design-system/typography'],
+  extends: [
+    '../../core',
+    '../../motion/scroll',
+    '../layout',
+    '../../design-system/typography',
+    '../../design-system/visual',
+  ],
 
   alias: {
     '#layers/navigation': import.meta.dirname,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "6.2.1",
+  "version": "6.4.0",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",