kmcom-nuxt-layers 2.6.2 → 2.7.0

package/layers/metadata/providers/google-books/server/utils/metadata-google-books/provider.ts

@@ -8,8 +8,8 @@ export const googleBooksProvider: MetadataProvider = {
   async search({ query, mediaType, limit = 10 }) {
     const subjectHints: Record<string, string> = {
       'graphic-novel': '+subject:"Comics & Graphic Novels"',
-      'manga': '+subject:manga',
-      'book': '+-subject:"Comics & Graphic Novels"+-subject:manga',
+      manga: '+subject:manga',
+      book: '+-subject:"Comics & Graphic Novels"+-subject:manga',
     }
     const q = query + (mediaType ? (subjectHints[mediaType] ?? '') : '')
     const res = await searchGoogleBooks(q, limit)
@@ -23,6 +23,9 @@ export const googleBooksProvider: MetadataProvider = {
   },
 
   async sync({ providerId }) {
-    return (await googleBooksProvider.lookup!({ provider: 'google-books', providerId }))!
+    const record = await googleBooksProvider.lookup({ provider: 'google-books', providerId })
+    if (!record)
+      throw new MetadataProviderError('google-books', `No record found for ${providerId}`)
+    return record
   },
 }

package/layers/metadata/providers/openlibrary/server/utils/metadata-openlibrary/normalise.test.ts

@@ -136,7 +136,9 @@ describe('normaliseOpenLibraryEdition', () => {
   })
 
   it('takes publisher from publishers[0]', () => {
-    const record = normaliseOpenLibraryEdition(baseEdition({ publishers: ['DC Comics', 'Vertigo'] }))
+    const record = normaliseOpenLibraryEdition(
+      baseEdition({ publishers: ['DC Comics', 'Vertigo'] })
+    )
     expect(record.publisher).toBe('DC Comics')
   })
 })

package/layers/metadata/providers/openlibrary/server/utils/metadata-openlibrary/provider.ts

@@ -20,10 +20,12 @@ export const openLibraryProvider: MetadataProvider = {
   },
 
   async sync({ providerId, resourceType = 'work' }) {
-    return (await openLibraryProvider.lookup!({
+    const record = await openLibraryProvider.lookup({
       provider: 'openlibrary',
       providerId,
       resourceType,
-    }))!
+    })
+    if (!record) throw new MetadataProviderError('openlibrary', `No record found for ${providerId}`)
+    return record
   },
 }

package/layers/metadata/providers/themoviedb/server/utils/metadata-tmdb/client.test.ts

@@ -24,8 +24,6 @@ describe('tmdbImageUrl', () => {
   })
 
   it('prefixes imageBaseUrl from runtime config', () => {
-    expect(tmdbImageUrl('/backdrop.jpg')).toBe(
-      'https://image.tmdb.org/t/p/w500/backdrop.jpg'
-    )
+    expect(tmdbImageUrl('/backdrop.jpg')).toBe('https://image.tmdb.org/t/p/w500/backdrop.jpg')
   })
 })

package/layers/metadata/providers/themoviedb/server/utils/metadata-tmdb/provider.ts

@@ -32,6 +32,8 @@ export const tmdbProvider: MetadataProvider = {
   },
 
   async sync(input) {
-    return (await tmdbProvider.lookup!(input))!
+    const record = await tmdbProvider.lookup(input)
+    if (!record) throw new MetadataProviderError('tmdb', `No record found for ${input.providerId}`)
+    return record
   },
 }

package/layers/metadata/server/api/metadata/status.get.ts

@@ -1,24 +1,19 @@
 export default defineEventHandler(async () => {
   const providers = getProviders()
 
-  const results = await Promise.allSettled(
+  return Promise.all(
     providers.map(async (p) => {
-      await p.search({ query: 'test', limit: 1 })
-      return { id: p.id, label: p.label, ok: true, error: null }
-    }),
+      try {
+        await p.search({ query: 'test', limit: 1 })
+        return { id: p.id, label: p.label, ok: true, error: null }
+      } catch (err) {
+        return {
+          id: p.id,
+          label: p.label,
+          ok: false,
+          error: err instanceof Error ? err.message : String(err),
+        }
+      }
+    })
   )
-
-  return results.map((outcome, i) => {
-    const p = providers[i]!
-    if (outcome.status === 'fulfilled') {
-      return { id: p.id, label: p.label, ok: true, error: null }
-    }
-    const err = outcome.reason
-    return {
-      id: p.id,
-      label: p.label,
-      ok: false,
-      error: err instanceof Error ? err.message : String(err),
-    }
-  })
 })

package/layers/metadata/server/utils/metadata/provider-registry.test.ts

@@ -1,7 +1,7 @@
+import type { MetadataProvider } from '#layers/metadata/shared/types'
 import { describe, expect, it } from 'vitest'
 
 import { getProvider, getProviders, registerProvider } from './provider-registry'
-import type { MetadataProvider } from '#layers/metadata/shared/types'
 
 function makeProvider(overrides: Partial<MetadataProvider> = {}): MetadataProvider {
   return {

package/layers/metadata/server/utils/metadata/search.test.ts

@@ -1,17 +1,17 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { hashQuery, makeCacheKey } from './cache'
 import type {
   MetadataProvider,
   MetadataSearchInput,
   MetadataSearchResult,
 } from '#layers/metadata/shared/types'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { hashQuery, makeCacheKey } from './cache'
 
 // search.ts calls getProviders()/makeCacheKey()/hashQuery()/getSearchCache()/setSearchCache()
 // as Nitro auto-imports (sibling server/utils files). Stub the pure cache helpers with their
 // real implementations, and control provider/cache lookups directly via mocks.
-let mockProviders: MetadataProvider[] = []
-const getProvidersMock = vi.fn(() => mockProviders)
+const providerState: { mockProviders: MetadataProvider[] } = { mockProviders: [] }
+const getProvidersMock = vi.fn(() => providerState.mockProviders)
 const getSearchCacheMock = vi.fn(async () => null as MetadataSearchResult[] | null)
 const setSearchCacheMock = vi.fn(async () => undefined)
 
@@ -46,7 +46,7 @@ function makeProvider(overrides: Partial<MetadataProvider> = {}): MetadataProvid
 }
 
 beforeEach(() => {
-  mockProviders = []
+  providerState.mockProviders = []
   getProvidersMock.mockClear()
   getSearchCacheMock.mockClear()
   getSearchCacheMock.mockResolvedValue(null)
@@ -61,7 +61,7 @@ describe('searchMetadata', () => {
   it('targets only providers named in input.providers', async () => {
     const a = vi.fn(async () => [makeResult({ id: 'a-1' })])
     const b = vi.fn(async () => [makeResult({ id: 'b-1' })])
-    mockProviders = [
+    providerState.mockProviders = [
       makeProvider({ id: 'comicvine', search: a }),
       makeProvider({ id: 'openlibrary', mediaTypes: ['book'], search: b }),
     ]
@@ -75,7 +75,7 @@ describe('searchMetadata', () => {
   it('targets providers by mediaType when providers[] is not given', async () => {
     const comic = vi.fn(async () => [makeResult()])
     const book = vi.fn(async () => [makeResult({ mediaType: 'book' })])
-    mockProviders = [
+    providerState.mockProviders = [
       makeProvider({ id: 'comicvine', mediaTypes: ['comic'], search: comic }),
       makeProvider({ id: 'openlibrary', mediaTypes: ['book'], search: book }),
     ]
@@ -89,7 +89,7 @@ describe('searchMetadata', () => {
   it('targets all providers when neither providers[] nor mediaType is given', async () => {
     const comic = vi.fn(async () => [makeResult()])
     const book = vi.fn(async () => [makeResult({ mediaType: 'book' })])
-    mockProviders = [
+    providerState.mockProviders = [
       makeProvider({ id: 'comicvine', mediaTypes: ['comic'], search: comic }),
       makeProvider({ id: 'openlibrary', mediaTypes: ['book'], search: book }),
     ]
@@ -101,7 +101,7 @@ describe('searchMetadata', () => {
   })
 
   it('returns [] when no providers match the given targets', async () => {
-    mockProviders = [makeProvider({ id: 'comicvine', mediaTypes: ['comic'] })]
+    providerState.mockProviders = [makeProvider({ id: 'comicvine', mediaTypes: ['comic'] })]
 
     const result = await searchMetadata(baseInput({ mediaType: 'movie' }))
 
@@ -110,7 +110,7 @@ describe('searchMetadata', () => {
   })
 
   it('returns [] when providers[] names an id with no registered provider', async () => {
-    mockProviders = [makeProvider({ id: 'comicvine' })]
+    providerState.mockProviders = [makeProvider({ id: 'comicvine' })]
 
     const result = await searchMetadata(baseInput({ providers: ['tmdb'] }))
 
@@ -122,7 +122,7 @@ describe('searchMetadata', () => {
     const failing = vi.fn(async () => {
       throw new Error('boom')
     })
-    mockProviders = [
+    providerState.mockProviders = [
       makeProvider({ id: 'comicvine', search: ok }),
       makeProvider({ id: 'openlibrary', mediaTypes: ['book'], search: failing }),
     ]
@@ -132,7 +132,7 @@ describe('searchMetadata', () => {
     const result = await searchMetadata(baseInput())
 
     expect(result).toHaveLength(1)
-    expect(result[0]!.id).toBe('ok-1')
+    expect(result.at(0)?.id).toBe('ok-1')
     expect(consoleErrorSpy).toHaveBeenCalled()
 
     consoleErrorSpy.mockRestore()
@@ -145,7 +145,7 @@ describe('searchMetadata', () => {
     const b = vi.fn(async () => [
       makeResult({ id: 'b-1', title: 'WATCHMEN', mediaType: 'comic', publishedAt: '1986-12-25' }),
     ])
-    mockProviders = [
+    providerState.mockProviders = [
       makeProvider({ id: 'comicvine', search: a }),
       makeProvider({ id: 'openlibrary', mediaTypes: ['comic'], search: b }),
     ]
@@ -153,7 +153,7 @@ describe('searchMetadata', () => {
     const result = await searchMetadata(baseInput())
 
     expect(result).toHaveLength(1)
-    expect(result[0]!.id).toBe('a-1')
+    expect(result.at(0)?.id).toBe('a-1')
   })
 
   it('does not dedupe results with different years', async () => {
@@ -163,7 +163,7 @@ describe('searchMetadata', () => {
     const b = vi.fn(async () => [
       makeResult({ id: 'b-1', title: 'Watchmen', publishedAt: '2019-10-20' }),
     ])
-    mockProviders = [
+    providerState.mockProviders = [
       makeProvider({ id: 'comicvine', search: a }),
       makeProvider({ id: 'openlibrary', mediaTypes: ['comic'], search: b }),
     ]
@@ -177,7 +177,7 @@ describe('searchMetadata', () => {
     const cached = [makeResult({ id: 'cached-1' })]
     getSearchCacheMock.mockResolvedValue(cached)
     const search = vi.fn(async () => [makeResult({ id: 'live-1' })])
-    mockProviders = [makeProvider({ id: 'comicvine', search })]
+    providerState.mockProviders = [makeProvider({ id: 'comicvine', search })]
 
     const result = await searchMetadata(baseInput())
 
@@ -188,7 +188,7 @@ describe('searchMetadata', () => {
 
   it('writes deduped results to the cache after a live search', async () => {
     const search = vi.fn(async () => [makeResult({ id: 'live-1' })])
-    mockProviders = [makeProvider({ id: 'comicvine', search })]
+    providerState.mockProviders = [makeProvider({ id: 'comicvine', search })]
 
     const result = await searchMetadata(baseInput())
 

package/layers/metadata/server/utils/metadata/search.ts

@@ -3,8 +3,9 @@ import type { MetadataSearchInput, MetadataSearchResult } from '#layers/metadata
 // fallow-ignore-next-line complexity
 export async function searchMetadata(input: MetadataSearchInput): Promise<MetadataSearchResult[]> {
   const all = getProviders()
-  const targets = input.providers?.length
-    ? all.filter((p) => input.providers!.includes(p.id))
+  const requestedProviders = input.providers
+  const targets = requestedProviders?.length
+    ? all.filter((p) => requestedProviders.includes(p.id))
     : all.filter((p) => !input.mediaType || p.mediaTypes.includes(input.mediaType))
 
   if (!targets.length) return []
@@ -19,16 +20,23 @@ export async function searchMetadata(input: MetadataSearchInput): Promise<Metada
   const cached = await getSearchCache<MetadataSearchResult[]>(cacheKey)
   if (cached) return cached
 
-  const settled = await Promise.allSettled(targets.map((p) => p.search(input)))
+  const settled = await Promise.all(
+    targets.map(async (p) => {
+      try {
+        return { provider: p, value: await p.search(input) }
+      } catch (reason) {
+        return { provider: p, reason }
+      }
+    })
+  )
 
   const results: MetadataSearchResult[] = []
-  for (let i = 0; i < settled.length; i++) {
-    const outcome = settled[i]!
-    if (outcome.status === 'fulfilled') {
+  for (const outcome of settled) {
+    if ('value' in outcome) {
       results.push(...outcome.value)
-    } else {
-      console.error(`[metadata] provider "${targets[i]!.id}" search failed:`, outcome.reason)
+      continue
     }
+    console.error(`[metadata] provider "${outcome.provider.id}" search failed:`, outcome.reason)
   }
 
   const deduped = deduplicateResults(results)

package/layers/navigation/app/utils/site.test.ts

@@ -14,9 +14,7 @@ describe('resolveSiteConfig', () => {
   })
 
   it('splits the title and subtitle into words', () => {
-    expect(
-      resolveSiteConfig({ title: 'Nuxt Layers', subtitle: 'Composable Vue apps' })
-    ).toEqual({
+    expect(resolveSiteConfig({ title: 'Nuxt Layers', subtitle: 'Composable Vue apps' })).toEqual({
       title: 'Nuxt Layers',
       titleWords: ['Nuxt', 'Layers'],
       subtitle: 'Composable Vue apps',

package/layers/scroll/app/components/Motion/PinnedSection.vue

@@ -73,8 +73,18 @@
 
 <template>
   <section ref="sectionRef" class="motion-pinned-section h-screen relative">
-    <div ref="contentRef" class="h-full flex items-center justify-center">
+    <div ref="contentRef" class="motion-pinned-content h-full flex items-center justify-center">
       <slot />
     </div>
   </section>
 </template>
+
+<style scoped>
+  /* Match gsap.set()'s initial state (opacity:0, y:60, scale:0.9) so the SSR/first-paint
+     frame is already hidden — GSAP then animates from this state instead of visibly
+     snapping into it post-mount, which reads as a layout shift. */
+  .motion-pinned-content > :deep(*) {
+    transform: translateY(60px) scale(0.9);
+    opacity: 0;
+  }
+</style>

package/layers/scroll/app/composables/useSectionProgress.ts

@@ -1,5 +1,5 @@
-import type { ScrollTrigger } from 'gsap/ScrollTrigger'
 import type { MaybeRef } from 'vue'
+import type { ScrollTrigger } from 'gsap/ScrollTrigger'
 
 type SectionProgressOptions = {
   start?: string

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

@@ -1,5 +1,6 @@
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 import LocomotiveScroll from 'locomotive-scroll'
+
 import type { ScrollState } from '../types/scroll'
 
 export default defineNuxtPlugin({
@@ -32,6 +33,11 @@ export default defineNuxtPlugin({
           ScrollTrigger.update()
         },
       })
+
+      // ScrollTriggers created before Lenis exists (page:finish can fire first)
+      // refresh against a null instance — remeasure once real layout settles.
+      requestAnimationFrame(() => ScrollTrigger.refresh())
+      document.fonts?.ready?.then(() => ScrollTrigger.refresh())
     }
 
     function destroy() {

package/layers/scroll/app/utils/scroll.ts

@@ -91,7 +91,11 @@ export function runNativeScroll(target: ScrollTarget, options?: ScrollToOptions)
     return
   }
 
-  runSmoothScroll(targetPosition, resolveNativeScrollDelay(options), resolveScrollOnComplete(options))
+  runSmoothScroll(
+    targetPosition,
+    resolveNativeScrollDelay(options),
+    resolveScrollOnComplete(options)
+  )
 }
 
 export function runLocomotiveScroll(

package/layers/seo/app/utils/seoConfig.test.ts

@@ -1,6 +1,6 @@
+import type { SiteConfig } from '#layers/core/app/types/site'
 import { describe, expect, it } from 'vitest'
 
-import type { SiteConfig } from '#layers/core/app/types/site'
 import { resolveSeoConfig } from './seoConfig'
 
 const site: SiteConfig = { title: 'Nuxt Layers', description: 'A composable layer system' }

package/layers/shader/app/assets/css/shader.css

@@ -12,7 +12,7 @@
   z-index: 9999;
   backdrop-filter: blur(8px);
   border-radius: 0.5rem;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgb(0 0 0 / 0.8);
   padding: 0.75rem 1rem;
   min-width: 200px;
   color: #fff;

package/layers/shader/app/components/Material/AmbientAurora.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -18,7 +19,6 @@
   import { fbm2D, simplexNoise2D } from '../../shaders/common/noise'
   import { cosinePalette } from '../../shaders/common/palette'
   import type { TSLNode } from '../../shaders/types'
-  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     speed = 1.0,
@@ -58,10 +58,22 @@
   watchUniformProp(() => mouseX, mouseXUniform)
   watchUniformProp(() => mouseY, mouseYUniform)
   watchUniformProp(() => mouseStrength, mouseStrengthUniform)
-  watchUniformProp(() => color1, color1Uniform, (val) => new Color(val))
-  watchUniformProp(() => color2, color2Uniform, (val) => new Color(val))
+  watchUniformProp(
+    () => color1,
+    color1Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color2,
+    color2Uniform,
+    (val) => new Color(val)
+  )
   // fallow-ignore-next-line code-duplication
-  watchUniformProp(() => color3, color3Uniform, (val) => new Color(val))
+  watchUniformProp(
+    () => color3,
+    color3Uniform,
+    (val) => new Color(val)
+  )
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()

package/layers/shader/app/components/Material/AmbientFlow.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -18,7 +19,6 @@
   import { fbm2D, ridgedFbm2d, warpedFbmCoords } from '../../shaders/common/noise'
   import { cosinePalette } from '../../shaders/common/palette'
   import type { TSLNode } from '../../shaders/types'
-  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     speed = 1.0,
@@ -60,10 +60,26 @@
   watchUniformProp(() => mouseX, mouseXUniform)
   watchUniformProp(() => mouseY, mouseYUniform)
   watchUniformProp(() => mouseStrength, mouseStrengthUniform)
-  watchUniformProp(() => color1, color1Uniform, (val) => new Color(val))
-  watchUniformProp(() => color2, color2Uniform, (val) => new Color(val))
-  watchUniformProp(() => color3, color3Uniform, (val) => new Color(val))
-  watchUniformProp(() => color4, color4Uniform, (val) => new Color(val))
+  watchUniformProp(
+    () => color1,
+    color1Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color2,
+    color2Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color3,
+    color3Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color4,
+    color4Uniform,
+    (val) => new Color(val)
+  )
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()

package/layers/shader/app/components/Material/AmbientGradientMesh.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -19,7 +20,6 @@
 
   import { fbm2D, simplexNoise2D } from '../../shaders/common/noise'
   import type { TSLNode } from '../../shaders/types'
-  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     speed = 1.0,
@@ -61,10 +61,26 @@
   watchUniformProp(() => mouseX, mouseXUniform)
   watchUniformProp(() => mouseY, mouseYUniform)
   watchUniformProp(() => mouseStrength, mouseStrengthUniform)
-  watchUniformProp(() => color1, color1Uniform, (val) => new Color(val))
-  watchUniformProp(() => color2, color2Uniform, (val) => new Color(val))
-  watchUniformProp(() => color3, color3Uniform, (val) => new Color(val))
-  watchUniformProp(() => color4, color4Uniform, (val) => new Color(val))
+  watchUniformProp(
+    () => color1,
+    color1Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color2,
+    color2Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color3,
+    color3Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color4,
+    color4Uniform,
+    (val) => new Color(val)
+  )
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()

package/layers/shader/app/components/Material/AmbientNebula.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -19,7 +20,6 @@
   import { fbm3D, hash21, ridgedFbm2d, voronoi2D } from '../../shaders/common/noise'
   import { cosinePalette } from '../../shaders/common/palette'
   import type { TSLNode } from '../../shaders/types'
-  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     // fallow-ignore-next-line code-duplication
@@ -62,11 +62,27 @@
   watchUniformProp(() => mouseX, mouseXUniform)
   watchUniformProp(() => mouseY, mouseYUniform)
   watchUniformProp(() => mouseStrength, mouseStrengthUniform)
-  watchUniformProp(() => color1, color1Uniform, (val) => new Color(val))
-  watchUniformProp(() => color2, color2Uniform, (val) => new Color(val))
-  watchUniformProp(() => color3, color3Uniform, (val) => new Color(val))
+  watchUniformProp(
+    () => color1,
+    color1Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color2,
+    color2Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color3,
+    color3Uniform,
+    (val) => new Color(val)
+  )
   // fallow-ignore-next-line code-duplication
-  watchUniformProp(() => color4, color4Uniform, (val) => new Color(val))
+  watchUniformProp(
+    () => color4,
+    color4Uniform,
+    (val) => new Color(val)
+  )
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()

package/layers/shader/app/components/Material/AmbientOcean.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -20,7 +21,6 @@
 
   import { simplexNoise2D } from '../../shaders/common/noise'
   import type { TSLNode } from '../../shaders/types'
-  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     speed = 1.0,
@@ -59,9 +59,21 @@
   watchUniformProp(() => mouseX, mouseXUniform)
   watchUniformProp(() => mouseY, mouseYUniform)
   watchUniformProp(() => mouseStrength, mouseStrengthUniform)
-  watchUniformProp(() => color1, color1Uniform, (val) => new Color(val))
-  watchUniformProp(() => color2, color2Uniform, (val) => new Color(val))
-  watchUniformProp(() => color3, color3Uniform, (val) => new Color(val))
+  watchUniformProp(
+    () => color1,
+    color1Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color2,
+    color2Uniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => color3,
+    color3Uniform,
+    (val) => new Color(val)
+  )
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()

package/layers/shader/app/components/Material/Gradient.client.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
   import { Color, DoubleSide } from 'three'
   import { mix, sin, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
   import type { TSLNode } from '../../types'
-  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     colors = ['#4f46e5', '#7c3aed', '#ec4899'],

package/layers/shader/app/components/Material/Image.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
   import { DoubleSide, type Texture } from 'three'
   import {
     float,
@@ -17,7 +18,6 @@
 
   import type { TSLNode } from '../../types'
   import { simplexNoise2D } from '../../utils/tsl/noise'
-  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     src,