kmcom-nuxt-layers 2.2.0 → 2.2.1

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

@@ -1,11 +1,11 @@
 import type { MaybeRef } from 'vue'
 
-interface VelocityMapping {
+type VelocityMapping = {
   input: [number, number]
   output: [number, number]
 }
 
-interface UseMarqueeVelocityOptions {
+type UseMarqueeVelocityOptions = {
   damping?: MaybeRef<number>
   stiffness?: MaybeRef<number>
   velocityMapping?: MaybeRef<VelocityMapping>

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

@@ -1,9 +1,4 @@
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
-  // @ts-nocheck - Three.js WebGPU types + TresJS renderer factory
   import { TresCanvas } from '@tresjs/core'
   import {
     ACESFilmicToneMapping,
@@ -16,33 +11,30 @@
   } from 'three'
   import { WebGPURenderer } from 'three/webgpu'
 
-  const props = withDefaults(
-    defineProps<{
-      clearColor?: string
-      toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
-      outputColorSpace?: 'srgb' | 'linear'
-      shadows?: boolean
-      antialias?: boolean
-      alpha?: boolean
-      preserveDrawingBuffer?: boolean
-      powerPreference?: 'default' | 'high-performance' | 'low-power'
-      windowSize?: boolean
-      /** Use WebGPURenderer (required for node materials / TSL shaders) */
-      webgpu?: boolean
-    }>(),
-    {
-      clearColor: '#000000',
-      toneMapping: 'aces',
-      outputColorSpace: 'srgb',
-      shadows: false,
-      antialias: true,
-      alpha: false,
-      preserveDrawingBuffer: false,
-      powerPreference: 'high-performance',
-      windowSize: true,
-      webgpu: false,
-    }
-  )
+  const {
+    clearColor = '#000000',
+    toneMapping = 'aces',
+    outputColorSpace = 'srgb',
+    shadows = false,
+    antialias = true,
+    alpha = false,
+    preserveDrawingBuffer = false,
+    powerPreference = 'high-performance',
+    windowSize = true,
+    webgpu = false,
+  } = defineProps<{
+    clearColor?: string
+    toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
+    outputColorSpace?: 'srgb' | 'linear'
+    shadows?: boolean
+    antialias?: boolean
+    alpha?: boolean
+    preserveDrawingBuffer?: boolean
+    powerPreference?: 'default' | 'high-performance' | 'low-power'
+    windowSize?: boolean
+    /** Use WebGPURenderer (required for node materials / TSL shaders) */
+    webgpu?: boolean
+  }>()
 
   const emit = defineEmits<{
     ready: [context: any]
@@ -62,12 +54,12 @@
   }
 
   const resolvedToneMapping = computed(() => {
-    const key = props.toneMapping || shaderConfig.toneMapping || 'aces'
+    const key = toneMapping || shaderConfig.toneMapping || 'aces'
     return toneMappingMap[key] ?? ACESFilmicToneMapping
   })
 
   const resolvedColorSpace = computed(() => {
-    return props.outputColorSpace === 'srgb' ? SRGBColorSpace : 'srgb-linear'
+    return outputColorSpace === 'srgb' ? SRGBColorSpace : 'srgb-linear'
   })
 
   const maxDpr = computed(() => {
@@ -77,20 +69,21 @@
 
   // WebGPU renderer factory — TresJS v5 calls renderer.init() automatically
   // when the returned object has isRenderer === true (three/webgpu Renderer base class)
-  const webgpuRendererFactory = props.webgpu
-    ? ({ canvas }: { canvas: any }) => {
-        const r = new WebGPURenderer({
-          canvas: unref(canvas),
-          antialias: props.antialias,
-          powerPreference: props.powerPreference,
-        })
-        r.setPixelRatio(Math.min(window.devicePixelRatio, maxDpr.value))
-        r.setClearColor(new Color(props.clearColor))
-        r.toneMapping = resolvedToneMapping.value
-        r.outputColorSpace = resolvedColorSpace.value
-        return r
-      }
-    : undefined
+  function webgpuRendererFactory({ canvas }: { canvas: any }) {
+    const r = new WebGPURenderer({
+      canvas: unref(canvas),
+      antialias,
+      // WebGPU has no 'default' power preference — omit to let the browser decide
+      ...(powerPreference === 'default' ? {} : { powerPreference }),
+    })
+    r.setPixelRatio(Math.min(window.devicePixelRatio, maxDpr.value))
+    r.setClearColor(new Color(clearColor))
+    r.toneMapping = resolvedToneMapping.value
+    r.outputColorSpace = resolvedColorSpace.value
+    return r
+  }
+
+  const rendererBinding = computed(() => (webgpu ? { renderer: webgpuRendererFactory } : {}))
 
   function onReady(context: any) {
     emit('ready', context)
@@ -109,7 +102,7 @@
     :power-preference
     :window-size
     :dpr="maxDpr"
-    :renderer="webgpuRendererFactory"
+    v-bind="rendererBinding"
     class="shader-canvas"
     @ready="onReady"
   >

package/layers/canvas/app/composables/useRendererCapabilities.ts

@@ -1,6 +1,3 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import {
   QUALITY_PRESETS,
   type QualityLevel,
@@ -8,7 +5,6 @@ import {
   type RendererBackend,
   type RendererCapabilities,
 } from '#layers/canvas/types/renderer'
-import type { WebGLRenderer } from 'three'
 
 /**
  * Detect and expose renderer capabilities
@@ -17,23 +13,36 @@ export function useRendererCapabilities() {
   const capabilities = ref<RendererCapabilities | null>(null)
   const isReady = ref(false)
 
-  function detectFromRenderer(renderer: WebGLRenderer) {
+  function detectFromRenderer(renderer: any) {
+    const isWebGPU = renderer.constructor?.name === 'WebGPURenderer'
     const glCaps = renderer.capabilities
 
-    // Check if WebGPU
-    const isWebGPU = 'gpu' in navigator && renderer.constructor.name === 'WebGPURenderer'
-
-    capabilities.value = {
-      backend: (isWebGPU ? 'webgpu' : 'webgl') as RendererBackend,
-      maxTextureSize: glCaps.maxTextureSize,
-      maxTextures: glCaps.maxTextures,
-      maxVertexUniforms: glCaps.maxVertexUniforms,
-      maxFragmentUniforms: glCaps.maxFragmentUniforms,
-      floatTextures: glCaps.isWebGL2 || false,
-      anisotropy: renderer.capabilities.getMaxAnisotropy(),
-      precision: glCaps.precision as 'lowp' | 'mediump' | 'highp',
-      devicePixelRatio: renderer.getPixelRatio(),
-      isWebGPU,
+    if (isWebGPU || !glCaps) {
+      capabilities.value = {
+        backend: 'webgpu',
+        maxTextureSize: 16384,
+        maxTextures: 16,
+        maxVertexUniforms: 256,
+        maxFragmentUniforms: 256,
+        floatTextures: true,
+        anisotropy: 16,
+        precision: 'highp',
+        devicePixelRatio: renderer.getPixelRatio?.() ?? 1,
+        isWebGPU: true,
+      }
+    } else {
+      capabilities.value = {
+        backend: 'webgl',
+        maxTextureSize: glCaps.maxTextureSize,
+        maxTextures: glCaps.maxTextures,
+        maxVertexUniforms: glCaps.maxVertexUniforms,
+        maxFragmentUniforms: glCaps.maxFragmentUniforms,
+        floatTextures: glCaps.isWebGL2 || false,
+        anisotropy: glCaps.getMaxAnisotropy(),
+        precision: glCaps.precision as 'lowp' | 'mediump' | 'highp',
+        devicePixelRatio: renderer.getPixelRatio(),
+        isWebGPU: false,
+      }
     }
 
     isReady.value = true
@@ -96,14 +105,13 @@ export function useAutoQuality() {
     const cores = navigator.hardwareConcurrency || 2
 
     // Determine quality
+    quality.value = 'ultra'
     if (isMobile || cores <= 2) {
       quality.value = 'low'
     } else if (dpr <= 1 || cores <= 4) {
       quality.value = 'medium'
     } else if (dpr <= 2) {
       quality.value = 'high'
-    } else {
-      quality.value = 'ultra'
     }
   })
 

package/layers/canvas/app/composables/useShaderTime.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-syntax */
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { uniform } from 'three/tsl'
 
@@ -136,11 +135,11 @@ export function useShaderTime(options: ShaderTimeOptions = {}) {
 /**
  * Simple global time singleton for basic use cases
  */
-let globalTime: ReturnType<typeof useShaderTime> | null = null
+const _globalTime = { instance: null as ReturnType<typeof useShaderTime> | null }
 
 export function useGlobalShaderTime() {
-  if (!globalTime) {
-    globalTime = useShaderTime({ autoStart: true })
+  if (!_globalTime.instance) {
+    _globalTime.instance = useShaderTime({ autoStart: true })
   }
-  return globalTime
+  return _globalTime.instance
 }

package/layers/canvas/app/types/renderer.ts

@@ -20,6 +20,7 @@ export type QualitySettings = {
   antialias: boolean
   shadows: boolean
   postProcessing: boolean
+  particleCount: number
 }
 
 export const QUALITY_PRESETS: Record<QualityLevel, QualitySettings> = {
@@ -28,23 +29,27 @@ export const QUALITY_PRESETS: Record<QualityLevel, QualitySettings> = {
     antialias: false,
     shadows: false,
     postProcessing: false,
+    particleCount: 500,
   },
   medium: {
     pixelRatio: 1.5,
     antialias: true,
     shadows: false,
     postProcessing: true,
+    particleCount: 2500,
   },
   high: {
     pixelRatio: 2,
     antialias: true,
     shadows: true,
     postProcessing: true,
+    particleCount: 10000,
   },
   ultra: {
     pixelRatio: 2,
     antialias: true,
     shadows: true,
     postProcessing: true,
+    particleCount: 50000,
   },
 }

package/layers/content/app/components/Blog/Article.vue

@@ -6,19 +6,22 @@
   }>()
 
   const asBlog = (item: unknown) => item as BlogCollectionItem
+
+  function formatDate(date?: string) {
+    if (!date) return ''
+    return new Date(date).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+  }
 </script>
 
 <template>
   <NuxtContentDetail collection="blog" :slug not-found-message="Blog post not found">
     <template #headline="{ item }">
       <div class="flex items-center gap-3 text-sm text-muted">
-        <time v-if="asBlog(item).date">{{
-          new Date(asBlog(item).date).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-          })
-        }}</time>
+        <time v-if="asBlog(item).date">{{ formatDate(asBlog(item).date) }}</time>
         <UBadge v-if="asBlog(item).badge" color="primary" variant="subtle">
           {{ asBlog(item).badge }}
         </UBadge>

package/layers/content/app/components/Blog/Card.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   const {
     title,

package/layers/content/app/components/Blog/List.vue

@@ -1,6 +1,4 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import type { BlogQueryOptions } from '../../types/content'
 
   const { options = {} } = defineProps<{
@@ -17,10 +15,10 @@
         v-for="post in posts"
         :key="post.id"
         :title="post.title"
-        :date="post.date"
         :to="post.path"
         variant="outline"
         v-bind="{
+          ...(post.date !== undefined && { date: post.date }),
           ...(post.description !== undefined && { description: post.description }),
           ...(post.image !== undefined && { image: post.image }),
           ...(post.badge !== undefined && { badge: post.badge }),
@@ -28,7 +26,7 @@
             authors: post.authors.map((a) => ({
               name: a.name,
               ...(a.avatar && { avatar: { src: a.avatar } }),
-              ...(a.url && { to: a.url, target: '_blank' as const }),
+              ...(a.link && { to: a.link, target: '_blank' as const }),
             })),
           }),
         }"

package/layers/content/app/components/Gallery/AmbientImage.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   const {
     src,

package/layers/content/app/components/Gallery/Card.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   const {
     title,

package/layers/content/app/components/Gallery/Detail.vue

@@ -1,6 +1,4 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import type { GalleryCollectionItem } from '@nuxt/content'
 
   const { slug } = defineProps<{

package/layers/content/app/components/Gallery/Grid.vue

@@ -1,6 +1,4 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import type { GalleryQueryOptions } from '../../types/content'
 
   const { options = {} } = defineProps<{

package/layers/content/app/components/Gallery/ImageDetail.vue

@@ -1,6 +1,4 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import type { GalleryCollectionItem } from '@nuxt/content'
 
   const { slug, index } = defineProps<{

package/layers/content/app/components/Gallery/Lightbox.vue

@@ -34,10 +34,6 @@
     else if (event.key === 'ArrowRight') next()
   }
 
-  function open() {
-    open = false
-  }
-
   onMounted(() => {
     globalThis.addEventListener('keydown', onKeydown)
   })
@@ -61,9 +57,8 @@
           color="neutral"
           variant="ghost"
           class="absolute top-4 right-4 text-white"
-          @click="open"
+          @click="() => (open = false)"
         />
-        <!-- @click="open = false" -->
 
         <!-- Prev -->
         <UButton

package/layers/content/app/components/NuxtContent/Detail.vue

@@ -1,14 +1,13 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-  // @ts-nocheck
+  import type { PageCollections } from '@nuxt/content'
+
   const {
     collection,
     slug,
     notFoundMessage = 'Content not found',
     hideToc = false,
   } = defineProps<{
-    collection: string
+    collection: keyof PageCollections
     slug: string
     notFoundMessage?: string
     hideToc?: boolean

package/layers/content/app/components/NuxtContent/List.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-boolean-default -->
 <script setup lang="ts">
   const {
     status,

package/layers/content/app/components/NuxtContent/Surround.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   const { surround } = defineProps<{
     surround?: unknown[]

package/layers/content/app/components/NuxtContent/Toc.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   import type { TocLink } from '@nuxt/content'
 

package/layers/content/app/components/Portfolio/Card.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   const {
     title,

package/layers/content/app/components/Portfolio/ColorPalette.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   import type { PortfolioColor } from '../../types/content'
 

package/layers/content/app/components/Portfolio/Detail.vue

@@ -1,11 +1,9 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
-  import type { PortfolioCollectionItem } from '@nuxt/content'
+  import type { PageCollections, PortfolioCollectionItem } from '@nuxt/content'
 
   const { slug, collection = 'portfolio' } = defineProps<{
     slug: string
-    collection?: string
+    collection?: keyof PageCollections
   }>()
 
   const asPortfolio = (item: unknown) => item as PortfolioCollectionItem

package/layers/content/app/components/Portfolio/ItemPage.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+  import type { PageCollections } from '@nuxt/content'
+
   const { slug, collection = 'portfolio' } = defineProps<{
     slug: string
-    collection?: string
+    collection?: keyof PageCollections
   }>()
   const { contentLayer } = useAppConfig()
   if (contentLayer?.sections?.portfolio === false) {

package/layers/content/app/components/Portfolio/List.vue

@@ -1,22 +1,37 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
+  import type { Collections } from '@nuxt/content'
+
   import type { PortfolioQueryOptions } from '../../types/content'
 
   const { options = {}, collection = 'portfolio' } = defineProps<{
     options?: PortfolioQueryOptions
-    collection?: string
+    collection?: keyof Collections
   }>()
 
   const { useItems } = createPortfolioComposables(collection)
   const { data: items, status } = await useItems(options)
+
+  // Items may come from any collection — normalize the portfolio-style
+  // metadata so the template works on a single shape
+  const cards = computed(() =>
+    (items.value ?? []).map((item) => ({
+      id: item.id,
+      title: item.title,
+      description: item.description,
+      path: item.path,
+      image: 'image' in item ? item.image : undefined,
+      client: 'client' in item ? item.client : undefined,
+      year: 'year' in item ? item.year : undefined,
+      tags: 'tags' in item ? (item.tags ?? []) : [],
+    }))
+  )
 </script>
 
 <template>
-  <NuxtContentList :status :has-items="!!items?.length" empty-message="No items found">
+  <NuxtContentList :status :has-items="!!cards.length" empty-message="No items found">
     <UPageGrid>
       <UPageCard
-        v-for="item in items"
+        v-for="item in cards"
         :key="item.id"
         :title="item.title"
         variant="outline"

package/layers/content/app/components/Portfolio/Typography.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   import type { PortfolioFont } from '../../types/content'
 

package/layers/content/app/components/content/Figure.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   const {
     src,

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

@@ -1,22 +1,36 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
+import type { Collections } from '@nuxt/content'
+
 import type { PortfolioQueryOptions } from '../types/content'
 
-export function createPortfolioComposables(collectionName: string) {
+type CollectionItem = Collections[keyof Collections]
+
+function itemYear(item: CollectionItem): number {
+  return 'year' in item ? (item.year ?? 0) : 0
+}
+
+function itemFeatured(item: CollectionItem): boolean {
+  return 'featured' in item ? (item.featured ?? false) : false
+}
+
+function itemTags(item: CollectionItem): string[] {
+  return 'tags' in item ? (item.tags ?? []) : []
+}
+
+export function createPortfolioComposables(collectionName: keyof Collections) {
   function useItems(options: PortfolioQueryOptions = {}) {
     const { featured, tags, limit } = options
 
     return useContentData(`${collectionName}-items`, async () => {
-      let items = (await queryCollection(collectionName).all()).sort(
-        (a, b) => (b.year ?? 0) - (a.year ?? 0)
+      let items: CollectionItem[] = (await queryCollection(collectionName).all()).sort(
+        (a, b) => itemYear(b) - itemYear(a)
       )
 
       if (featured !== undefined) {
-        items = items.filter((item) => item.featured === featured)
+        items = items.filter((item) => itemFeatured(item) === featured)
       }
 
       if (tags?.length) {
-        items = items.filter((item) => item.tags?.some((tag: string) => tags.includes(tag)))
+        items = items.filter((item) => itemTags(item).some((tag) => tags.includes(tag)))
       }
 
       if (limit) {

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

@@ -1,9 +1,8 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { Collections } from '@nuxt/content'
 
-export function useCollectionItem(collection: string, slug: string) {
+export function useCollectionItem(collection: keyof Collections, slug: string) {
   return useContentData(`${collection}-${slug}`, () =>
-    queryCollection(collection as keyof Collections)
+    queryCollection(collection)
       .path(`/${collection}/${slug}`)
       .first()
   )

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

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { PageCollections } from '@nuxt/content'
 
-export function useCollectionSurround(collection: string, slug: string) {
+export function useCollectionSurround(collection: keyof PageCollections, slug: string) {
   return useContentData(`${collection}-${slug}-surround`, () =>
-    queryCollectionItemSurroundings(collection as keyof PageCollections, `/${collection}/${slug}`)
+    queryCollectionItemSurroundings(collection, `/${collection}/${slug}`)
   )
 }

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 export function useContentPage(path: string) {
   return useContentData(`content-page-${path}`, () => queryCollection('content').path(path).first())
 }

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import type { GalleryQueryOptions } from '../types/content'
 
 export function useGalleryItems(options: GalleryQueryOptions = {}) {

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import type { PortfolioQueryOptions } from '../types/content'
 
 export function usePortfolioItems(options: PortfolioQueryOptions = {}) {

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

@@ -1,5 +1,5 @@
 declare module '@nuxt/schema' {
-  type AppConfigInput = {
+  interface AppConfigInput {
     contentLayer?: {
       name?: string
       sections?: {
@@ -10,3 +10,5 @@ declare module '@nuxt/schema' {
     }
   }
 }
+
+export {}