kmcom-nuxt-layers 1.6.39 → 1.6.43

package/layers/motion/app/composables/useCursorFollower.ts

@@ -0,0 +1,25 @@
+import type { MaybeRef } from 'vue'
+
+export function useCursorFollower(opts: { smoothing?: MaybeRef<number> } = {}) {
+  const { gsap } = useGsap()
+  const { x: mouseX, y: mouseY } = useMouse({ type: 'client' })
+
+  const x = ref(0)
+  const y = ref(0)
+
+  function tick() {
+    const factor = unref(opts.smoothing) ?? 0.15
+    x.value += (mouseX.value - x.value) * factor
+    y.value += (mouseY.value - y.value) * factor
+  }
+
+  onMounted(() => {
+    x.value = mouseX.value
+    y.value = mouseY.value
+    gsap.ticker.add(tick)
+  })
+
+  onUnmounted(() => gsap.ticker.remove(tick))
+
+  return { x, y }
+}

package/layers/motion/app/composables/useMagneticElement.ts

@@ -0,0 +1,56 @@
+export function useMagneticElement(
+  elementRef: Ref<HTMLElement | null>,
+  opts: {
+    strength?: number
+    radius?: number
+    damping?: number
+    stiffness?: number
+  } = {},
+) {
+  const { gsap } = useGsap()
+  const { elementX, elementY, elementWidth, elementHeight } = useMouseInElement(elementRef)
+
+  const currentX = ref(0)
+  const currentY = ref(0)
+  const isActive = ref(false)
+
+  function tick() {
+    const strength = opts.strength ?? 0.3
+    const radius = opts.radius ?? 100
+    const damping = (opts.damping ?? 30) / 1000
+    const stiffness = (opts.stiffness ?? 300) / 1000
+
+    const dx = elementX.value - elementWidth.value / 2
+    const dy = elementY.value - elementHeight.value / 2
+    const dist = Math.sqrt(dx * dx + dy * dy)
+
+    let targetX = 0
+    let targetY = 0
+
+    if (dist < radius) {
+      isActive.value = true
+      targetX = dx * strength
+      targetY = dy * strength
+    } else {
+      isActive.value = false
+    }
+
+    currentX.value += (targetX - currentX.value) * stiffness
+    currentX.value *= 1 - damping
+    currentY.value += (targetY - currentY.value) * stiffness
+    currentY.value *= 1 - damping
+
+    if (elementRef.value) {
+      gsap.set(elementRef.value, { x: currentX.value, y: currentY.value })
+    }
+  }
+
+  onMounted(() => gsap.ticker.add(tick))
+
+  onUnmounted(() => {
+    gsap.ticker.remove(tick)
+    if (elementRef.value) gsap.set(elementRef.value, { x: 0, y: 0 })
+  })
+
+  return { isActive }
+}

package/layers/motion/app/composables/useMarqueeCopies.ts

@@ -0,0 +1,50 @@
+import type { MaybeRef } from 'vue'
+
+export function useMarqueeCopies(
+  containerRefs: Ref<HTMLElement[]>,
+  copyRefs: Ref<HTMLSpanElement[]>,
+  rowCount: MaybeRef<number>,
+) {
+  const copyWidths = ref<number[]>([])
+  const calculatedCopies = ref<number[]>([])
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+  function calculate() {
+    const n = unref(rowCount)
+    for (let i = 0; i < n; i++) {
+      const copy = copyRefs.value[i]
+      const container = containerRefs.value[i]
+      if (!copy || !container) continue
+      const singleWidth = copy.offsetWidth
+      if (singleWidth === 0) continue
+      const effectiveWidth = Math.max(container.offsetWidth, window.innerWidth)
+      const minCopies = Math.ceil((effectiveWidth * 2.5) / singleWidth)
+      copyWidths.value[i] = singleWidth
+      calculatedCopies.value[i] = Math.max(minCopies, 8)
+    }
+  }
+
+  function debouncedCalculate() {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => {
+      calculate()
+      debounceTimer = null
+    }, 150)
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      calculate()
+      setTimeout(calculate, 100)
+    })
+    window.addEventListener('resize', debouncedCalculate, { passive: true })
+  })
+
+  onUnmounted(() => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    window.removeEventListener('resize', debouncedCalculate)
+  })
+
+  return { copyWidths, calculatedCopies }
+}

package/layers/motion/app/composables/useMarqueeVelocity.ts

@@ -0,0 +1,44 @@
+import type { MaybeRef } from 'vue'
+
+interface VelocityMapping {
+  input: [number, number]
+  output: [number, number]
+}
+
+interface UseMarqueeVelocityOptions {
+  damping?: MaybeRef<number>
+  stiffness?: MaybeRef<number>
+  velocityMapping?: MaybeRef<VelocityMapping>
+}
+
+export function useMarqueeVelocity(opts: UseMarqueeVelocityOptions = {}) {
+  const { velocity: rawVelocity } = useSmoothScroll()
+  const { gsap } = useGsap()
+
+  const smoothVelocity = ref(0)
+  const velocityFactor = ref(0)
+
+  function tick() {
+    const damping = (unref(opts.damping) ?? 50) / 1000
+    const stiffness = (unref(opts.stiffness) ?? 400) / 1000
+    const mapping: VelocityMapping = unref(opts.velocityMapping) ?? {
+      input: [0, 1000],
+      output: [0, 5],
+    }
+
+    smoothVelocity.value += (rawVelocity.value - smoothVelocity.value) * stiffness
+    smoothVelocity.value *= 1 - damping
+
+    const inputRange = mapping.input[1] - mapping.input[0]
+    const outputRange = mapping.output[1] - mapping.output[0]
+    let t = (Math.abs(smoothVelocity.value) - mapping.input[0]) / inputRange
+    t = Math.max(0, Math.min(1, t))
+    velocityFactor.value = mapping.output[0] + t * outputRange
+    if (smoothVelocity.value < 0) velocityFactor.value *= -1
+  }
+
+  onMounted(() => gsap.ticker.add(tick))
+  onUnmounted(() => gsap.ticker.remove(tick))
+
+  return { velocityFactor }
+}

package/layers/motion/app/composables/useSmoothScroll.ts

@@ -23,12 +23,19 @@ interface ScrollToOptions {
  */
 export function useSmoothScroll() {
   const nuxtApp = useNuxtApp()
+  const appConfig = useAppConfig()
 
   // Get the Locomotive Scroll instance from the reactive ref provided by the plugin
   const locomotiveScroll = computed<LocomotiveScroll | undefined>(
     () => (nuxtApp.$locomotiveScroll as Ref<LocomotiveScroll | null>)?.value ?? undefined
   )
 
+  // true if smooth scroll is configured to run (globally or per-route)
+  const isEnabled = computed(() => (appConfig.motion?.smoothScroll ?? true) !== false)
+
+  // true once the LocomotiveScroll instance is actually initialised on this route
+  const isReady = computed(() => locomotiveScroll.value != null)
+
   // Reactive scroll state from the plugin
   const scrollState = computed(
     () =>
@@ -110,6 +117,10 @@ export function useSmoothScroll() {
     // Locomotive Scroll instance
     locomotiveScroll,
 
+    // Scroll availability
+    isEnabled,
+    isReady,
+
     // Reactive scroll state
     scrollY,
     velocity,

package/layers/motion/app/composables/useTiltEffect.ts

@@ -0,0 +1,58 @@
+export function useTiltEffect(
+  elementRef: Ref<HTMLElement | null>,
+  opts: {
+    maxTilt?: number
+    perspective?: number
+    damping?: number
+    stiffness?: number
+  } = {},
+) {
+  const { gsap } = useGsap()
+  const { elementX, elementY, elementWidth, elementHeight, isOutside } =
+    useMouseInElement(elementRef)
+
+  const currentRotateX = ref(0)
+  const currentRotateY = ref(0)
+
+  function tick() {
+    const maxTilt = opts.maxTilt ?? 15
+    const perspective = opts.perspective ?? 800
+    const damping = (opts.damping ?? 40) / 1000
+    const stiffness = (opts.stiffness ?? 250) / 1000
+
+    const width = elementWidth.value || 1
+    const height = elementHeight.value || 1
+
+    let targetRotateX = 0
+    let targetRotateY = 0
+
+    if (!isOutside.value) {
+      const nx = (elementX.value / width) * 2 - 1
+      const ny = (elementY.value / height) * 2 - 1
+      targetRotateY = nx * maxTilt
+      targetRotateX = -ny * maxTilt
+    }
+
+    currentRotateX.value += (targetRotateX - currentRotateX.value) * stiffness
+    currentRotateX.value *= 1 - damping
+    currentRotateY.value += (targetRotateY - currentRotateY.value) * stiffness
+    currentRotateY.value *= 1 - damping
+
+    if (elementRef.value) {
+      gsap.set(elementRef.value, {
+        rotateX: currentRotateX.value,
+        rotateY: currentRotateY.value,
+        transformPerspective: perspective,
+      })
+    }
+  }
+
+  onMounted(() => gsap.ticker.add(tick))
+
+  onUnmounted(() => {
+    gsap.ticker.remove(tick)
+    if (elementRef.value) gsap.set(elementRef.value, { rotateX: 0, rotateY: 0 })
+  })
+
+  return { rotateX: currentRotateX, rotateY: currentRotateY }
+}

package/layers/motion/app/plugins/locomotive-scroll.client.ts

@@ -45,7 +45,7 @@ export default defineNuxtPlugin(() => {
   }
 
   const router = useRouter()
-  const appConfig = useAppConfig() as any
+  const appConfig = useAppConfig()
   const smoothScroll: boolean | string[] = appConfig.motion?.smoothScroll ?? true
 
   if (smoothScroll === true) {

package/layers/motion/app/types/app-config.d.ts

@@ -1,7 +1,16 @@
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    motionLayer?: {
-      name?: string
+    motion?: {
+      smoothScroll?: boolean | string[]
+      gsapScrollTrigger?: boolean
+      lenis?: {
+        duration?: number
+        orientation?: 'vertical' | 'horizontal'
+        gestureOrientation?: 'vertical' | 'horizontal'
+        smoothWheel?: boolean
+        smoothTouch?: boolean
+        touchMultiplier?: number
+      }
     }
   }
 }

package/layers/motion/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "../../apps/playground/tsconfig.json",
+
   "compilerOptions": {
     "strict": true
   },

package/layers/routing/app/middleware/02.governance.global.ts

@@ -1,27 +1,16 @@
 import { useFeatures } from '../composables/useFeatures'
+import { resolveRoute } from '../utils/resolveRoute'
 
 export default defineNuxtRouteMiddleware((to) => {
-  const { config, isStrictMode, isLayerDefaultDeny } = useRoutingConfig()
+  const { config } = useRoutingConfig()
   const { resolve } = useFeatures()
-  const meta = to.meta
 
-  if (config.debug) console.log('[routing] governance check', to.path, meta)
+  if (config.debug) console.log('[routing] governance check', to.path, to.meta)
 
-  // strict default-deny: every route must declare a feature
-  if (isStrictMode() && !meta.feature) {
-    throw createError({ statusCode: 404 })
-  }
+  const resolution = resolveRoute(to.meta, config, resolve)
 
-  // layer default-deny: layer routes must declare a feature
-  if (isLayerDefaultDeny() && meta.__fromLayer && !meta.feature) {
-    throw createError({ statusCode: 404 })
-  }
+  if (config.debug) console.log('[routing] resolution', resolution)
 
-  if (!meta.feature) return
-
-  const variant = resolve(meta.feature)
-  if (config.debug) console.log(`[routing] feature "${meta.feature}" resolved to "${variant}"`)
-
-  if (variant === 'disabled') throw createError({ statusCode: 404 })
-  if (variant === 'beta' || variant === 'coming-soon') return navigateTo('/coming-soon')
+  if (resolution.outcome === 'deny') throw createError({ statusCode: 404 })
+  if (resolution.outcome === 'redirect') return navigateTo(resolution.to)
 })

package/layers/routing/app/types/routing.ts

@@ -1,10 +1,16 @@
 export type FeatureValue = 'enabled' | 'disabled' | 'beta' | 'coming-soon'
 export type RoutingPreset = 'simple' | 'marketing' | 'product' | 'enterprise'
 
+export type RouteResolution =
+  | { outcome: 'allow' }
+  | { outcome: 'deny' }
+  | { outcome: 'redirect'; to: string }
+
 export interface RoutingLayerConfig {
   preset: RoutingPreset
   strictDefaultDeny: boolean
   layerDefaultDeny: boolean
+  betaRedirect: string
   runtimeFlags: boolean
   debug: boolean
   maintenance: { enabled: boolean; allowRoutes: string[] }
@@ -16,6 +22,7 @@ export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'pr
   simple: {
     strictDefaultDeny: false,
     layerDefaultDeny: false,
+    betaRedirect: '/coming-soon',
     runtimeFlags: false,
     debug: false,
     maintenance: { enabled: false, allowRoutes: ['/maintenance'] },
@@ -24,6 +31,7 @@ export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'pr
   marketing: {
     strictDefaultDeny: false,
     layerDefaultDeny: true,
+    betaRedirect: '/coming-soon',
     runtimeFlags: false,
     debug: false,
     maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
@@ -32,6 +40,7 @@ export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'pr
   product: {
     strictDefaultDeny: false,
     layerDefaultDeny: true,
+    betaRedirect: '/coming-soon',
     runtimeFlags: true,
     debug: false,
     maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
@@ -40,6 +49,7 @@ export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'pr
   enterprise: {
     strictDefaultDeny: true,
     layerDefaultDeny: true,
+    betaRedirect: '/coming-soon',
     runtimeFlags: true,
     debug: false,
     maintenance: { enabled: true, allowRoutes: ['/maintenance'] },

package/layers/routing/app/utils/resolveRoute.ts

@@ -0,0 +1,31 @@
+import type { FeatureValue, RouteResolution, RoutingLayerConfig } from '../types/routing'
+
+interface RouteMeta {
+  feature?: string
+  __fromLayer?: boolean
+}
+
+export function resolveRoute(
+  meta: RouteMeta,
+  config: RoutingLayerConfig,
+  resolveFeature: (name: string) => FeatureValue,
+): RouteResolution {
+  if (config.strictDefaultDeny && !meta.feature) {
+    return { outcome: 'deny' }
+  }
+
+  if (config.layerDefaultDeny && meta.__fromLayer && !meta.feature) {
+    return { outcome: 'deny' }
+  }
+
+  if (!meta.feature) return { outcome: 'allow' }
+
+  const variant = resolveFeature(meta.feature)
+
+  if (variant === 'disabled') return { outcome: 'deny' }
+  if (variant === 'beta' || variant === 'coming-soon') {
+    return { outcome: 'redirect', to: config.betaRedirect }
+  }
+
+  return { outcome: 'allow' }
+}

package/layers/shader/package.json

@@ -15,6 +15,7 @@
     "three": "^0.182.0"
   },
   "devDependencies": {
-    "@types/three": "^0.182.0"
+    "@types/three": "^0.184.0",
+    "vite": "^7.0.0"
   }
 }

package/layers/theme/app/composables/useAccentColor.ts

@@ -1,11 +1,10 @@
-// @ts-nocheck
 import { createSharedComposable, useLocalStorage } from '@vueuse/core'
 import type { AccentColor } from '#layers/theme/app/types/theme'
 
 export const useAccentColor = createSharedComposable(() => {
   const appConfig = useAppConfig()
 
-  const defaultAccent = ((appConfig as any).themeLayer?.defaultAccent ?? 'blue') as AccentColor
+  const defaultAccent = (appConfig.themeLayer?.defaultAccent ?? 'blue') as AccentColor
   const accent = useLocalStorage<AccentColor>('theme-colour', defaultAccent)
 
   const pageAccent = ref<AccentColor | null>(null)
@@ -19,16 +18,6 @@ export const useAccentColor = createSharedComposable(() => {
     pageAccent.value = color
   }
 
-  if (import.meta.client) {
-    watch(
-      activeAccent,
-      (color) => {
-        document.documentElement.setAttribute('data-theme-colour', color)
-      },
-      { immediate: true }
-    )
-  }
-
   return {
     accent: readonly(accent),
     setAccent,

package/layers/theme/app/composables/useThemeContrast.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { createSharedComposable, useLocalStorage, usePreferredContrast } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
@@ -16,16 +15,6 @@ export const useThemeContrast = createSharedComposable(() => {
     contrastOverride.value = value
   }
 
-  if (import.meta.client) {
-    watch(
-      effectiveHighContrast,
-      (high) => {
-        document.documentElement.setAttribute('data-theme-contrast', high ? 'high' : 'standard')
-      },
-      { immediate: true }
-    )
-  }
-
   return {
     contrastOverride: readonly(contrastOverride),
     setContrastOverride,

package/layers/theme/app/composables/useThemeMotion.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { createSharedComposable, useLocalStorage, usePreferredReducedMotion } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
@@ -16,16 +15,6 @@ export const useThemeMotion = createSharedComposable(() => {
     motionOverride.value = value
   }
 
-  if (import.meta.client) {
-    watch(
-      effectiveReducedMotion,
-      (reduced) => {
-        document.documentElement.setAttribute('data-theme-motion', reduced ? 'reduced' : 'full')
-      },
-      { immediate: true }
-    )
-  }
-
   return {
     motionOverride: readonly(motionOverride),
     setMotionOverride,

package/layers/theme/app/composables/useThemeTransparency.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {
   createSharedComposable,
   useLocalStorage,
@@ -20,19 +19,6 @@ export const useThemeTransparency = createSharedComposable(() => {
     transparencyOverride.value = value
   }
 
-  if (import.meta.client) {
-    watch(
-      effectiveReducedTransparency,
-      (reduced) => {
-        document.documentElement.setAttribute(
-          'data-theme-transparency',
-          reduced ? 'reduced' : 'full'
-        )
-      },
-      { immediate: true }
-    )
-  }
-
   return {
     transparencyOverride: readonly(transparencyOverride),
     setTransparencyOverride,

package/layers/theme/app/plugins/theme.client.ts

@@ -1,5 +1,22 @@
 export default defineNuxtPlugin(() => {
-  // Initialize shared composables — applies data-theme-colour, data-theme-contrast,
-  // data-theme-motion, and data-theme-transparency on <html> on first load.
-  useTheme()
+  const { activeAccent } = useAccentColor()
+  const { effectiveHighContrast } = useThemeContrast()
+  const { effectiveReducedMotion } = useThemeMotion()
+  const { effectiveReducedTransparency } = useThemeTransparency()
+
+  watch(activeAccent, (color) => {
+    document.documentElement.setAttribute('data-theme-colour', color)
+  }, { immediate: true })
+
+  watch(effectiveHighContrast, (high) => {
+    document.documentElement.setAttribute('data-theme-contrast', high ? 'high' : 'standard')
+  }, { immediate: true })
+
+  watch(effectiveReducedMotion, (reduced) => {
+    document.documentElement.setAttribute('data-theme-motion', reduced ? 'reduced' : 'full')
+  }, { immediate: true })
+
+  watch(effectiveReducedTransparency, (reduced) => {
+    document.documentElement.setAttribute('data-theme-transparency', reduced ? 'reduced' : 'full')
+  }, { immediate: true })
 })

package/layers/theme/app/types/app-config.d.ts

@@ -1,8 +1,8 @@
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     themeLayer?: {
-      accents?: string[]
-      defaultAccent?: string
+      accents?: import('./theme').AccentColor[]
+      defaultAccent?: import('./theme').AccentColor
     }
   }
 }

package/layers/ui/app/components/Base/Modal.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// @ts-nocheck
 /**
  * BaseModal — overlay-compatible modal shell.
  *

package/layers/ui/app/composables/color.ts

@@ -1,36 +1,5 @@
 import type { ColorUsage, UiColors } from '../types/colors'
 
-const colorMap: Record<UiColors, string> = {
-  // Semantic
-  dimmed: 'dimmed',
-  muted: 'muted',
-  toned: 'toned',
-  highlighted: 'highlighted',
-  inverted: 'inverted',
-  default: 'default',
-
-  // Status
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  error: 'error',
-
-  // Nuxt UI core
-  primary: 'primary',
-  neutral: 'neutral',
-
-  // Custom
-  secondary: 'secondary',
-  accent: 'accent',
-
-  // Base
-  black: 'black',
-  white: 'white',
-}
-
 export function useColor(color?: UiColors, type: ColorUsage = 'text') {
-  return computed(() => {
-    const colorName = color ? colorMap[color] : 'default'
-    return `${type}-${colorName}`
-  })
+  return computed(() => `${type}-${color ?? 'default'}`)
 }

package/layers/ui/app/utils/createModal.ts

@@ -1,5 +1,11 @@
 import type { Component } from 'vue'
 
+export interface ModalController<P extends Record<string, unknown>> {
+  open: (props?: Partial<P>) => void
+  close: () => void
+  patch: (props: Partial<P>) => void
+}
+
 /**
  * Factory that turns any overlay-compatible component into a shared modal composable.
  *
@@ -19,10 +25,13 @@ import type { Component } from 'vue'
  * Extend BaseModal.vue as a starting point.
  */
 export function createModal<P extends Record<string, unknown>>(component: Component) {
-  return createSharedComposable(() => {
-    if (import.meta.server) return { open: () => {}, close: () => {}, patch: () => {} }
+  return createSharedComposable((): ModalController<P> => {
+    if (import.meta.server) {
+      return { open: () => {}, close: () => {}, patch: () => {} }
+    }
 
     const overlay = useOverlay()
+    // useOverlay is a Nuxt UI auto-import; not resolvable in standalone layer typecheck
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const modal = overlay.create(component as any)
     return {