kmcom-nuxt-layers 2.2.12 → 2.3.0

package/docs/FEEDS.md

@@ -106,7 +106,6 @@ Plus site-wide shorthand and index routes:
 |-----|---------|
 | `/feed/rss`, `/feed/atom`, `/feed/json` | Shorthand → serves `defaultCollection` |
 | `/feed` | JSON index of all configured feeds |
-| `/feed/discovery` | Machine-readable feed discovery document |
 | `/feed/style.xsl` | Browser stylesheet (applied automatically) |
 
 Opening any feed URL in a browser shows a styled page thanks to the XSLT stylesheet — no app work required.
@@ -115,7 +114,7 @@ Opening any feed URL in a browser shows a styled page thanks to the XSLT stylesh
 
 ## Step 4 — Prerender collection routes (required for static / Netlify)
 
-Feed routes are **server routes**. The prerender crawler can't discover `/feed/:collection/*` because nothing links to them with an `<a href>`. The feeds layer already prerenders the **shorthand** routes (`/feed`, `/feed/rss`, `/feed/atom`, `/feed/json`, `/feed/style.xsl`, `/feed/discovery`). You must list the **collection-specific** routes in your app's `nuxt.config.ts` — one trio per collection in `feedsLayer.feed.collections`:
+Feed routes are **server routes**. The prerender crawler can't discover `/feed/:collection/*` because nothing links to them with an `<a href>`. The feeds layer already prerenders the **shorthand** routes (`/feed`, `/feed/rss`, `/feed/atom`, `/feed/json`, `/feed/style.xsl`). You must list the **collection-specific** routes in your app's `nuxt.config.ts` — one trio per collection in `feedsLayer.feed.collections`:
 
 ```ts
 // nuxt.config.ts

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

@@ -1,3 +1,5 @@
+import { resolvePointerSpring, usePointerMotionFrame } from '../utils/pointerMotion'
+
 export function useMagneticElement(
   elementRef: Ref<HTMLElement | null>,
   opts: {
@@ -7,7 +9,6 @@ export function useMagneticElement(
     stiffness?: number
   } = {}
 ) {
-  const { gsap } = useGsap()
   const { elementX, elementY, elementWidth, elementHeight } = useMouseInElement(elementRef)
 
   const currentX = ref(0)
@@ -33,20 +34,21 @@ export function useMagneticElement(
       targetY = dy * strength
     }
 
-    currentX.value += (targetX - currentX.value) * stiffness
-    currentX.value *= 1 - damping
-    currentY.value += (targetY - currentY.value) * stiffness
-    currentY.value *= 1 - damping
+    currentX.value = resolvePointerSpring(currentX.value, targetX, {
+      damping,
+      stiffness,
+    })
+    currentY.value = resolvePointerSpring(currentY.value, targetY, {
+      damping,
+      stiffness,
+    })
 
     if (elementRef.value) {
       gsap.set(elementRef.value, { x: currentX.value, y: currentY.value })
     }
   }
 
-  onMounted(() => gsap.ticker.add(tick))
-
-  onUnmounted(() => {
-    gsap.ticker.remove(tick)
+  const { gsap } = usePointerMotionFrame(tick, () => {
     if (elementRef.value) gsap.set(elementRef.value, { x: 0, y: 0 })
   })
 

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

@@ -1,3 +1,5 @@
+import { resolvePointerSpring, usePointerMotionFrame } from '../utils/pointerMotion'
+
 export function useTiltEffect(
   elementRef: Ref<HTMLElement | null>,
   opts: {
@@ -7,7 +9,6 @@ export function useTiltEffect(
     stiffness?: number
   } = {}
 ) {
-  const { gsap } = useGsap()
   const { elementX, elementY, elementWidth, elementHeight, isOutside } =
     useMouseInElement(elementRef)
 
@@ -33,10 +34,14 @@ export function useTiltEffect(
       targetRotateX = -ny * maxTilt
     }
 
-    currentRotateX.value += (targetRotateX - currentRotateX.value) * stiffness
-    currentRotateX.value *= 1 - damping
-    currentRotateY.value += (targetRotateY - currentRotateY.value) * stiffness
-    currentRotateY.value *= 1 - damping
+    currentRotateX.value = resolvePointerSpring(currentRotateX.value, targetRotateX, {
+      damping,
+      stiffness,
+    })
+    currentRotateY.value = resolvePointerSpring(currentRotateY.value, targetRotateY, {
+      damping,
+      stiffness,
+    })
 
     if (elementRef.value) {
       gsap.set(elementRef.value, {
@@ -47,10 +52,7 @@ export function useTiltEffect(
     }
   }
 
-  onMounted(() => gsap.ticker.add(tick))
-
-  onUnmounted(() => {
-    gsap.ticker.remove(tick)
+  const { gsap } = usePointerMotionFrame(tick, () => {
     if (elementRef.value) gsap.set(elementRef.value, { rotateX: 0, rotateY: 0 })
   })
 

package/layers/animations/app/utils/pointerMotion.ts

@@ -0,0 +1,31 @@
+export function resolvePointerSpring(
+  current: number,
+  target: number,
+  options: {
+    damping?: number
+    stiffness?: number
+  } = {}
+) {
+  const damping = options.damping ?? 0
+  const stiffness = options.stiffness ?? 0
+  const next = current + (target - current) * stiffness
+  return next * (1 - damping)
+}
+
+export function usePointerMotionFrame(
+  update: () => void,
+  cleanup?: () => void
+) {
+  const { gsap } = useGsap()
+
+  onMounted(() => {
+    gsap.ticker.add(update)
+  })
+
+  onUnmounted(() => {
+    gsap.ticker.remove(update)
+    cleanup?.()
+  })
+
+  return { gsap }
+}

package/layers/canvas/app/components/ShaderCanvas.vue

@@ -9,7 +9,7 @@
     SRGBColorSpace,
     type ToneMapping,
   } from 'three'
-  import { WebGPURenderer } from 'three/webgpu'
+  import * as ThreeWebGPU from 'three/webgpu'
 
   const {
     clearColor = '#000000',
@@ -70,7 +70,7 @@
   // WebGPU renderer factory — TresJS v5 calls renderer.init() automatically
   // when the returned object has isRenderer === true (three/webgpu Renderer base class)
   function webgpuRendererFactory({ canvas }: TresRendererSetupContext) {
-    const r = new WebGPURenderer({
+    const r = new ThreeWebGPU.WebGPURenderer({
       canvas: unref(canvas),
       antialias,
       // WebGPU has no 'default' power preference — omit to let the browser decide

package/layers/content/app/composables/useCollectionItems.ts

@@ -0,0 +1,28 @@
+import type { Collections } from '@nuxt/content'
+
+type CollectionItem<TCollection extends keyof Collections> = Collections[TCollection]
+
+export function useCollectionItems<TCollection extends keyof Collections>(args: {
+  key: string
+  collection: TCollection
+  sort: (a: CollectionItem<TCollection>, b: CollectionItem<TCollection>) => number
+  options?: { limit?: number | undefined }
+  filter?: (item: CollectionItem<TCollection>) => boolean
+}) {
+  const { key, collection, sort, options = {}, filter } = args
+
+  return useContentData(key, async () => {
+    let items = (await queryCollection(collection).all()) as CollectionItem<TCollection>[]
+    items = items.sort(sort)
+
+    if (filter) {
+      items = items.filter(filter)
+    }
+
+    if (options.limit !== undefined) {
+      items = items.slice(0, options.limit)
+    }
+
+    return items
+  })
+}

package/layers/content/app/composables/useGalleryItems.ts

@@ -1,21 +1,15 @@
 import type { GalleryQueryOptions } from '../types/content'
+import { useCollectionItems } from './useCollectionItems'
 
 export function useGalleryItems(options: GalleryQueryOptions = {}) {
   const { tags, limit } = options
 
-  return useContentData('gallery-items', async () => {
-    let items = (await queryCollection('gallery').all()).sort((a, b) =>
-      (b.date ?? '').localeCompare(a.date ?? '')
-    )
-
-    if (tags?.length) {
-      items = items.filter((item) => item.tags?.some((tag: string) => tags.includes(tag)))
-    }
-
-    if (limit) {
-      items = items.slice(0, limit)
-    }
-
-    return items
+  return useCollectionItems({
+    key: 'gallery-items',
+    collection: 'gallery',
+    sort: (a, b) => (b.date ?? '').localeCompare(a.date ?? ''),
+    options: { limit },
+    filter: (item) =>
+      !tags?.length || Boolean(item.tags?.some((tag: string) => tags.includes(tag))),
   })
 }

package/layers/content/app/composables/usePortfolioItems.ts

@@ -1,25 +1,17 @@
 import type { PortfolioQueryOptions } from '../types/content'
+import { useCollectionItems } from './useCollectionItems'
 
 export function usePortfolioItems(options: PortfolioQueryOptions = {}) {
   const { featured, tags, limit } = options
 
-  return useContentData('portfolio-items', async () => {
-    let items = (await queryCollection('portfolio').all()).sort(
-      (a, b) => (b.year ?? 0) - (a.year ?? 0)
-    )
-
-    if (featured !== undefined) {
-      items = items.filter((item) => item.featured === featured)
-    }
-
-    if (tags?.length) {
-      items = items.filter((item) => item.tags?.some((tag: string) => tags.includes(tag)))
-    }
-
-    if (limit) {
-      items = items.slice(0, limit)
-    }
-
-    return items
+  return useCollectionItems({
+    key: 'portfolio-items',
+    collection: 'portfolio',
+    sort: (a, b) => (b.year ?? 0) - (a.year ?? 0),
+    options: { limit },
+    // fallow-ignore-next-line complexity
+    filter: (item) =>
+      (featured === undefined || item.featured === featured) &&
+      (!tags?.length || Boolean(item.tags?.some((tag: string) => tags.includes(tag)))),
   })
 }

package/layers/core/app/composables/useBrowser.ts

@@ -1,63 +1,9 @@
-// composables/useBrowser.ts
-
-type BrowserInfo = {
-  name: string
-  version: string
-  engine: string
-  os: string
-}
-
-/**
- * Parse user agent to detect browser information
- */
-function parseBrowserInfo(): BrowserInfo {
-  if (!import.meta.client) {
-    return {
-      name: 'unknown',
-      version: '0',
-      engine: 'unknown',
-      os: 'unknown',
-    }
-  }
-
-  const ua = navigator.userAgent
-  let name = 'unknown'
-  let version = '0'
-  let engine = 'unknown'
-  let os = 'unknown'
-
-  // Detect OS
-  if (ua.includes('Win')) os = 'windows'
-  else if (ua.includes('Mac')) os = 'macos'
-  else if (ua.includes('Linux')) os = 'linux'
-  else if (ua.includes('Android')) os = 'android'
-  else if (ua.includes('iOS') || ua.includes('iPhone') || ua.includes('iPad')) os = 'ios'
-
-  // Detect browser (order matters - check most specific first)
-  if (ua.includes('Edg/')) {
-    name = 'edge'
-    engine = 'blink'
-    version = ua.match(/Edg\/([\d.]+)/)?.[1] || '0'
-  } else if (ua.includes('Chrome/') && !ua.includes('Edg')) {
-    name = 'chrome'
-    engine = 'blink'
-    version = ua.match(/Chrome\/([\d.]+)/)?.[1] || '0'
-  } else if (ua.includes('Safari/') && !ua.includes('Chrome')) {
-    name = 'safari'
-    engine = 'webkit'
-    version = ua.match(/Version\/([\d.]+)/)?.[1] || '0'
-  } else if (ua.includes('Firefox/')) {
-    name = 'firefox'
-    engine = 'gecko'
-    version = ua.match(/Firefox\/([\d.]+)/)?.[1] || '0'
-  } else if (ua.includes('Opera/') || ua.includes('OPR/')) {
-    name = 'opera'
-    engine = 'blink'
-    version = ua.match(/(?:Opera|OPR)\/([\d.]+)/)?.[1] || '0'
-  }
-
-  return { name, version, engine, os }
-}
+import {
+  getBrowserVersionParts,
+  isBrowserAtLeast,
+  parseBrowserInfo,
+  type BrowserInfo,
+} from '#layers/core/app/utils/browserInfo'
 
 /**
  * Browser detection composable
@@ -93,15 +39,11 @@ export function useBrowser() {
 
   // Version helpers
   const majorVersion = computed(() => {
-    const parts = info.value.version.split('.')
-    const major = parts[0]
-    return major ? parseInt(major, 10) : 0
+    return getBrowserVersionParts(info.value.version).major
   })
 
   const minorVersion = computed(() => {
-    const parts = info.value.version.split('.')
-    const minor = parts[1] || '0'
-    return parseInt(minor, 10)
+    return getBrowserVersionParts(info.value.version).minor
   })
 
   /**
@@ -109,22 +51,7 @@ export function useBrowser() {
    * @param minVersion - Minimum version string (e.g., "100" or "100.0")
    */
   const isAtLeast = (minVersion: string): boolean => {
-    const parts = minVersion.split('.')
-    const minMajor = parts[0]
-    const minMinor = parts[1] || '0'
-
-    if (!minMajor) return false
-
-    const major = majorVersion.value
-    const minor = minorVersion.value
-
-    const minMajorNum = parseInt(minMajor, 10)
-    const minMinorNum = parseInt(minMinor, 10)
-
-    if (major > minMajorNum) return true
-    if (major === minMajorNum && minor >= minMinorNum) return true
-
-    return false
+    return isBrowserAtLeast(info.value.version, minVersion)
   }
 
   return {

package/layers/core/app/composables/useFeatures.ts

@@ -1,5 +1,6 @@
 // composables/useFeatures.ts
 import type { FeatureDetection } from '#layers/core/app/types/detection'
+import { getFeatureClassNames, removeFeatureClasses } from '#layers/core/app/utils/featureClasses'
 import {
   usePreferredContrast,
   usePreferredDark,
@@ -139,34 +140,9 @@ async function checkImageFormat(format: 'webp' | 'avif'): Promise<boolean> {
 function applyFeatureClasses(features: FeatureDetection) {
   if (!import.meta.client || !document.documentElement) return
 
-  // Remove old classes first
   const htmlClasses = document.documentElement.classList
-  const classesToRemove = Array.from(htmlClasses).filter(
-    (cls) => cls.startsWith('supports-') || cls.startsWith('no-') || cls.startsWith('has-')
-  )
-  htmlClasses.remove(...classesToRemove)
-
-  const classes: string[] = []
-
-  // CSS features
-  classes.push(features.grid ? 'supports-grid' : 'no-grid')
-  classes.push(features.subgrid ? 'supports-subgrid' : 'no-subgrid')
-  classes.push(features.containerQueries ? 'supports-container-queries' : 'no-container-queries')
-  classes.push(features.has ? 'supports-has' : 'no-has')
-  classes.push(features.aspectRatio ? 'supports-aspect-ratio' : 'no-aspect-ratio')
-  classes.push(features.backdropFilter ? 'supports-backdrop-filter' : 'no-backdrop-filter')
-
-  // JS APIs
-  if (features.intersectionObserver) classes.push('has-intersection-observer')
-  if (features.resizeObserver) classes.push('has-resize-observer')
-  if (features.serviceWorker) classes.push('has-service-worker')
-  if (features.webGL) classes.push('has-webgl')
-
-  // Image formats
-  if (features.webp) classes.push('supports-webp')
-  if (features.avif) classes.push('supports-avif')
-
-  htmlClasses.add(...classes)
+  removeFeatureClasses(htmlClasses)
+  htmlClasses.add(...getFeatureClassNames(features))
 }
 
 /**