kmcom-nuxt-layers 1.7.9 → 2.1.6

package/layers/shader/app/components/Shader/Host.client.vue

@@ -1,139 +1,138 @@
+<!-- eslint-disable no-restricted-imports -->
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-import { DoubleSide } from 'three'
-import { mix as tslMix, uniform } from 'three/tsl'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
-import type { Component } from 'vue'
-import { tweenUniform } from '#layers/shader/app/utils/tsl/tween'
-
-const props = withDefaults(
-  defineProps<{
-    /** The active preset component */
-    preset?: Component | null
-    /** Crossfade duration in seconds */
-    transitionDuration?: number
-    /** Props forwarded to the active preset component */
-    presetProps?: Record<string, any>
-    /** ShaderBackground props */
-    clearColor?: string
-    toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
-    fixed?: boolean
-    zIndex?: number
-    pointerEvents?: 'none' | 'auto'
-  }>(),
-  {
-    preset: null,
-    transitionDuration: 1.0,
-    presetProps: () => ({}),
-    clearColor: '#000000',
-    toneMapping: 'aces',
-    fixed: true,
-    zIndex: -1,
-    pointerEvents: 'none',
+  // @ts-nocheck - TSL types
+  import type { Component } from 'vue'
+  import { tweenUniform } from '#layers/shader/app/utils/tsl/tween'
+  import { DoubleSide } from 'three'
+  import { mix as tslMix, uniform } from 'three/tsl'
+  import { MeshBasicNodeMaterial } from 'three/webgpu'
+
+  const props = withDefaults(
+    defineProps<{
+      /** The active preset component */
+      preset?: Component | null
+      /** Crossfade duration in seconds */
+      transitionDuration?: number
+      /** Props forwarded to the active preset component */
+      presetProps?: Record<string, any>
+      /** ShaderBackground props */
+      clearColor?: string
+      toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
+      fixed?: boolean
+      zIndex?: number
+      pointerEvents?: 'none' | 'auto'
+    }>(),
+    {
+      preset: null,
+      transitionDuration: 1.0,
+      presetProps: () => ({}),
+      clearColor: '#000000',
+      toneMapping: 'aces',
+      fixed: true,
+      zIndex: -1,
+      pointerEvents: 'none',
+    }
+  )
+
+  const emit = defineEmits<{
+    transitionStart: []
+    transitionEnd: []
+  }>()
+
+  // Transition state
+  const transitionProgress = uniform(0)
+  const isTransitioning = ref(false)
+
+  // Current and next preset tracking
+  const currentPreset = shallowRef<Component | null>(props.preset)
+  const nextPreset = shallowRef<Component | null>(null)
+
+  // Material created once, updated via colorNode
+  const material = new MeshBasicNodeMaterial()
+  material.side = DoubleSide
+
+  // Current and next graph nodes (set by preset via @node event)
+  let currentNode: any = null
+  let nextNode: any = null
+
+  function setCurrentNode(node: any) {
+    currentNode = node
+    updateMaterialNode()
   }
-)
-
-const emit = defineEmits<{
-  transitionStart: []
-  transitionEnd: []
-}>()
-
-// Transition state
-const transitionProgress = uniform(0)
-const isTransitioning = ref(false)
-
-// Current and next preset tracking
-const currentPreset = shallowRef<Component | null>(props.preset)
-const nextPreset = shallowRef<Component | null>(null)
-
-// Material created once, updated via colorNode
-const material = new MeshBasicNodeMaterial()
-material.side = DoubleSide
-
-// Current and next graph nodes (set by preset via @node event)
-let currentNode: any = null
-let nextNode: any = null
-
-function setCurrentNode(node: any) {
-  currentNode = node
-  updateMaterialNode()
-}
-
-function setNextNode(node: any) {
-  nextNode = node
-  updateMaterialNode()
-}
-
-function updateMaterialNode() {
-  if (isTransitioning.value && currentNode && nextNode) {
-    material.colorNode = tslMix(currentNode, nextNode, transitionProgress)
-    material.needsUpdate = true
-  } else if (currentNode) {
-    material.colorNode = currentNode
-    material.needsUpdate = true
+
+  function setNextNode(node: any) {
+    nextNode = node
+    updateMaterialNode()
   }
-}
 
-// Watch preset changes for crossfade
-watch(
-  () => props.preset,
-  async (newPreset, oldPreset) => {
-    if (!newPreset || newPreset === oldPreset) return
+  function updateMaterialNode() {
+    if (isTransitioning.value && currentNode && nextNode) {
+      material.colorNode = tslMix(currentNode, nextNode, transitionProgress)
+      material.needsUpdate = true
+    } else if (currentNode) {
+      material.colorNode = currentNode
+      material.needsUpdate = true
+    }
+  }
 
-    if (!currentPreset.value) {
-      // First preset — no transition
+  // Watch preset changes for crossfade
+  watch(
+    () => props.preset,
+    async (newPreset, oldPreset) => {
+      if (!newPreset || newPreset === oldPreset) return
+
+      if (!currentPreset.value) {
+        // First preset — no transition
+        currentPreset.value = newPreset
+        return
+      }
+
+      // Start crossfade
+      isTransitioning.value = true
+      nextPreset.value = newPreset
+      transitionProgress.value = 0
+      emit('transitionStart')
+
+      const handle = tweenUniform(
+        transitionProgress,
+        0,
+        1,
+        props.transitionDuration,
+        (t) => t * t * (3 - 2 * t) // smoothstep
+      )
+
+      await handle.promise
+
+      // Swap: next becomes current
       currentPreset.value = newPreset
-      return
+      currentNode = nextNode
+      nextPreset.value = null
+      nextNode = null
+      isTransitioning.value = false
+      transitionProgress.value = 0
+      updateMaterialNode()
+      emit('transitionEnd')
     }
+  )
 
-    // Start crossfade
-    isTransitioning.value = true
-    nextPreset.value = newPreset
-    transitionProgress.value = 0
-    emit('transitionStart')
-
-    const handle = tweenUniform(
-      transitionProgress,
-      0,
-      1,
-      props.transitionDuration,
-      (t) => t * t * (3 - 2 * t) // smoothstep
-    )
-
-    await handle.promise
-
-    // Swap: next becomes current
-    currentPreset.value = newPreset
-    currentNode = nextNode
-    nextPreset.value = null
-    nextNode = null
-    isTransitioning.value = false
-    transitionProgress.value = 0
-    updateMaterialNode()
-    emit('transitionEnd')
-  }
-)
-
-onUnmounted(() => {
-  material.dispose()
-})
+  onUnmounted(() => {
+    material.dispose()
+  })
 </script>
 
 <template>
-  <ShaderBackground
-    :material="material"
-    :clear-color="clearColor"
-    :tone-mapping="toneMapping"
-    :fixed="fixed"
-    :z-index="zIndex"
-    :pointer-events="pointerEvents"
-  />
+  <ShaderBackground :material :clear-color :tone-mapping :fixed :z-index :pointer-events />
 
   <!-- Render current preset (invisible — just registers its TSL node) -->
   <component
     :is="currentPreset"
     v-if="currentPreset"
-    :key="'current'"
+    key="current"
     v-bind="presetProps"
     @node="setCurrentNode"
   />
@@ -142,7 +141,7 @@ onUnmounted(() => {
   <component
     :is="nextPreset"
     v-if="nextPreset && isTransitioning"
-    :key="'next'"
+    key="next"
     v-bind="presetProps"
     @node="setNextNode"
   />

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

@@ -1,46 +1,52 @@
+<!-- eslint-disable vue/no-unused-properties -->
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-import { DoubleSide } from 'three'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
+  // @ts-nocheck - TSL types
+  import { DoubleSide } from 'three'
+  import { MeshBasicNodeMaterial } from 'three/webgpu'
 
-const props = withDefaults(
-  defineProps<{
-    transparent?: boolean
-    side?: 'front' | 'back' | 'double'
-  }>(),
-  {
-    transparent: false,
-    side: 'double',
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      transparent?: boolean
+      side?: 'front' | 'back' | 'double'
+    }>(),
+    {
+      transparent: false,
+      side: 'double',
+    }
+  )
 
-// Create the shader graph context for child nodes
-const graph = useShaderGraph()
+  // Create the shader graph context for child nodes
+  const graph = useShaderGraph()
 
-// Create material ONCE in setup -- never recreated
-const material = new MeshBasicNodeMaterial()
-material.side = DoubleSide
+  // Create material ONCE in setup -- never recreated
+  const material = new MeshBasicNodeMaterial()
+  material.side = DoubleSide
 
-if (props.transparent) {
-  material.transparent = true
-}
+  if (props.transparent) {
+    material.transparent = true
+  }
 
-// Watch graph topology changes and update material's colorNode
-watch(
-  graph.version,
-  () => {
-    const node = graph.finalNode.value
-    if (node) {
-      material.colorNode = node
-      material.needsUpdate = true
-    }
-  },
-  { immediate: true }
-)
+  // Watch graph topology changes and update material's colorNode
+  watch(
+    graph.version,
+    () => {
+      const node = graph.finalNode.value
+      if (node) {
+        material.colorNode = node
+        material.needsUpdate = true
+      }
+    },
+    { immediate: true }
+  )
 
-onUnmounted(() => {
-  material.dispose()
-})
+  onUnmounted(() => {
+    material.dispose()
+  })
 </script>
 
 <template>

package/layers/shader/app/components/Shader/Pipeline.client.vue

@@ -1,52 +1,61 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types are complex
-import { DoubleSide } from 'three'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { float, Fn, positionLocal, uv, vec3, vec4 } from 'three/tsl'
-
-const { transparent = false } = defineProps<{
-  transparent?: boolean
-}>()
-
-const pipeline = useShaderPipelineContext()
-
-const material = new MeshBasicNodeMaterial()
-material.side = DoubleSide
-if (transparent) {
-  material.transparent = true
-}
-
-// Starting node for the ray pipeline: centred screen coord → normalised ray direction.
-// Ray transformer blocks (Phase 4) refine this — FisheyeRay, RayTiltBasis, etc.
-const screenRayNode = vec3(uv().sub(0.5).mul(2.0), float(1.0)).normalize()
-
-watch(
-  pipeline.version,
-  () => {
-    const uvStages = pipeline.stagesFor('uv')
-    const fragment = pipeline.stagesFor('fragment')
-    const vertex = pipeline.stagesFor('vertex')
-    const ray = pipeline.stagesFor('ray')
-
-    // Wrap each chain in Fn() so TSL .toVar()/.assign() ops (used by noise functions
-    // like simplexNoise3d) have a valid stack context. Without this, TSL throws
-    // "No stack defined for assign operation".
-    pipeline.uvNode.value = Fn(() => uvStages.reduce((node, { fn }) => fn(node), uv()))()
-    pipeline.rayNode.value = Fn(() => ray.reduce((node, { fn }) => fn(node), screenRayNode))()
-    material.colorNode = Fn(() => fragment.reduce((node, { fn }) => fn(node), vec4(0, 0, 0, 1)))()
-    material.needsUpdate = true
-
-    if (vertex.length > 0) {
-      material.positionNode = Fn(() => vertex.reduce((node, { fn }) => fn(node), positionLocal))()
+  // @ts-nocheck - TSL types are complex
+  import { DoubleSide } from 'three'
+  import { float, Fn, positionLocal, uv, vec3, vec4 } from 'three/tsl'
+  import { MeshBasicNodeMaterial } from 'three/webgpu'
+
+  const { transparent = false } = defineProps<{
+    transparent?: boolean
+  }>()
+
+  const pipeline = useShaderPipelineContext()
+
+  const material = new MeshBasicNodeMaterial()
+  material.side = DoubleSide
+  if (transparent) {
+    material.transparent = true
+  }
+
+  // Starting node for the ray pipeline: centred screen coord → normalised ray direction.
+  // Ray transformer blocks (Phase 4) refine this — FisheyeRay, RayTiltBasis, etc.
+  const screenRayNode = vec3(uv().sub(0.5).mul(2.0), float(1.0)).normalize()
+
+  watch(
+    pipeline.version,
+    () => {
+      const uvStages = pipeline.stagesFor('uv')
+      const fragment = pipeline.stagesFor('fragment')
+      const vertex = pipeline.stagesFor('vertex')
+      const ray = pipeline.stagesFor('ray')
+
+      // Wrap each chain in Fn() so TSL .toVar()/.assign() ops (used by noise functions
+      // like simplexNoise3d) have a valid stack context. Without this, TSL throws
+      // "No stack defined for assign operation".
+      pipeline.uvNode.value = Fn(() => uvStages.reduce((node, { fn }) => fn(node), uv()))()
+      pipeline.rayNode.value = Fn(() => ray.reduce((node, { fn }) => fn(node), screenRayNode))()
+      material.colorNode = Fn(() => fragment.reduce((node, { fn }) => fn(node), vec4(0, 0, 0, 1)))()
       material.needsUpdate = true
-    }
-  },
-  { immediate: true },
-)
 
-onUnmounted(() => {
-  try { material.dispose() } catch { /* renderer already torn down */ }
-})
+      if (vertex.length > 0) {
+        material.positionNode = Fn(() => vertex.reduce((node, { fn }) => fn(node), positionLocal))()
+        material.needsUpdate = true
+      }
+    },
+    { immediate: true }
+  )
+
+  onUnmounted(() => {
+    try {
+      material.dispose()
+    } catch {
+      /* renderer already torn down */
+    }
+  })
 </script>
 
 <template>

package/layers/shader/app/components/Shader/PipelineContext.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-/**
- * Provides a ShaderPipeline context to its slot via the standard Vue DOM renderer.
- * Block components (which render <template />) must be placed inside this component,
- * NOT inside TresCanvas — TresJS's custom renderer crashes on null VNodes.
- *
- * Usage:
- *   <ShaderPipelineContext>
- *     <div class="hidden"><PipelineBlock ... /></div>   ← blocks in DOM
- *     <ShaderCanvas><TresMesh><ShaderPipeline /></TresMesh></ShaderCanvas>
- *   </ShaderPipelineContext>
- */
-useShaderPipeline()
+  /**
+   * Provides a ShaderPipeline context to its slot via the standard Vue DOM renderer.
+   * Block components (which render <template />) must be placed inside this component,
+   * NOT inside TresCanvas — TresJS's custom renderer crashes on null VNodes.
+   *
+   * Usage:
+   *   <ShaderPipelineContext>
+   *     <div class="hidden"><PipelineBlock ... /></div>   ← blocks in DOM
+   *     <ShaderCanvas><TresMesh><ShaderPipeline /></TresMesh></ShaderCanvas>
+   *   </ShaderPipelineContext>
+   */
+  useShaderPipeline()
 </script>
 
 <template>

package/layers/shader/app/components/Shader/Runtime.client.vue

@@ -1,45 +1,50 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    speed?: number
-    accentColor?: string
-    darkMode?: boolean
-    mouseSmoothing?: number
-  }>(),
-  {
-    speed: 1.0,
-    accentColor: '#8b5cf6',
-    darkMode: true,
-    mouseSmoothing: 0.1,
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      speed?: number
+      accentColor?: string
+      darkMode?: boolean
+      mouseSmoothing?: number
+    }>(),
+    {
+      speed: 1.0,
+      accentColor: '#8b5cf6',
+      darkMode: true,
+      mouseSmoothing: 0.1,
+    }
+  )
 
-const runtime = useShaderRuntime({
-  speed: props.speed,
-  accentColor: props.accentColor,
-  darkMode: props.darkMode,
-  mouseSmoothing: props.mouseSmoothing,
-})
+  const runtime = useShaderRuntime({
+    speed: props.speed,
+    accentColor: props.accentColor,
+    darkMode: props.darkMode,
+    mouseSmoothing: props.mouseSmoothing,
+  })
 
-// Watch props and update runtime uniforms
-watch(
-  () => props.speed,
-  (val) => runtime.time.setSpeed(val)
-)
+  // Watch props and update runtime uniforms
+  watch(
+    () => props.speed,
+    (val) => runtime.time.setSpeed(val)
+  )
 
-watch(
-  () => props.accentColor,
-  (val) => {
-    runtime.accentColor.value = val
-  }
-)
+  watch(
+    () => props.accentColor,
+    (val) => {
+      runtime.accentColor.value = val
+    }
+  )
 
-watch(
-  () => props.darkMode,
-  (val) => {
-    runtime.darkMode.value = val
-  }
-)
+  watch(
+    () => props.darkMode,
+    (val) => {
+      runtime.darkMode.value = val
+    }
+  )
 </script>
 
 <template>