kmcom-nuxt-layers 1.7.9 → 2.2.0

package/layers/shader/app/components/Preset/ThemeBubble.client.vue

@@ -1,85 +1,122 @@
+<!-- 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 {
-  createAmbientUniforms,
-  createThemeBubbleColorNode,
-} from '#layers/shader/app/composables/useAmbientMaterials'
+  // @ts-nocheck - TSL types
+  import {
+    createAmbientUniforms,
+    createThemeBubbleColorNode,
+  } from '#layers/shader/app/composables/useAmbientMaterials'
 
-const props = withDefaults(
-  defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>(),
-  {
-    speed: 1.0,
-    intensity: 1.0,
-    mouseInteraction: true,
-    mouseStrength: 0.3,
-    color1: '#8b5cf6',
-    color2: '#6366f1',
-    color3: '#a78bfa',
-    color4: '#38bdf8',
-  }
-)
-
-const emit = defineEmits<{
-  node: [colorNode: any]
-}>()
+  const props = withDefaults(
+    defineProps<{
+      speed?: number
+      intensity?: number
+      mouseInteraction?: boolean
+      mouseStrength?: number
+      color1?: string
+      color2?: string
+      color3?: string
+      color4?: string
+    }>(),
+    {
+      speed: 1.0,
+      intensity: 1.0,
+      mouseInteraction: true,
+      mouseStrength: 0.3,
+      color1: '#8b5cf6',
+      color2: '#6366f1',
+      color3: '#a78bfa',
+      color4: '#38bdf8',
+    }
+  )
 
-const uniforms = createAmbientUniforms({
-  speed: props.speed,
-  intensity: props.intensity,
-  mouseInteraction: props.mouseInteraction,
-})
-if (props.mouseInteraction) {
-  uniforms.mouseStrength.value = props.mouseStrength
-}
+  const emit = defineEmits<{
+    node: [colorNode: any]
+  }>()
 
-const c1 = useShaderColor(props.color1)
-const c2 = useShaderColor(props.color2)
-const c3 = useShaderColor(props.color3)
-const c4 = useShaderColor(props.color4)
+  const uniforms = createAmbientUniforms({
+    speed: props.speed,
+    intensity: props.intensity,
+    mouseInteraction: props.mouseInteraction,
+  })
+  if (props.mouseInteraction) {
+    uniforms.mouseStrength.value = props.mouseStrength
+  }
 
-// color3/color4 accepted for API consistency but Bubble only uses color1+color2
-const colorNode = createThemeBubbleColorNode(uniforms, {
-  color1: c1.node,
-  color2: c2.node,
-  color3: c3.node,
-  color4: c4.node,
-})
+  const c1 = useShaderColor(props.color1)
+  const c2 = useShaderColor(props.color2)
+  const c3 = useShaderColor(props.color3)
+  const c4 = useShaderColor(props.color4)
 
-watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
-watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
-watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
-watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+  // color3/color4 accepted for API consistency but Bubble only uses color1+color2
+  const colorNode = createThemeBubbleColorNode(uniforms, {
+    color1: c1.node,
+    color2: c2.node,
+    color3: c3.node,
+    color4: c4.node,
+  })
 
-try {
-  const runtime = useShaderRuntimeContext()
   watch(
-    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-    ([mx, my]) => {
-      uniforms.mouseX.value = mx
-      uniforms.mouseY.value = my
-    },
-    { immediate: true }
+    () => props.color1,
+    (hex) => c1.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color2,
+    (hex) => c2.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color3,
+    (hex) => c3.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color4,
+    (hex) => c4.tweenTo(hex, 0.8)
   )
-} catch {
-  // No runtime context
-}
 
-watch(() => props.speed,            (v) => { uniforms.speed.value = v })
-watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
-watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
-watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+  try {
+    const runtime = useShaderRuntimeContext()
+    watch(
+      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+      ([mx, my]) => {
+        uniforms.mouseX.value = mx
+        uniforms.mouseY.value = my
+      },
+      { immediate: true }
+    )
+  } catch {
+    // No runtime context
+  }
+
+  watch(
+    () => props.speed,
+    (v) => {
+      uniforms.speed.value = v
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      uniforms.intensity.value = v
+    }
+  )
+  watch(
+    () => props.mouseInteraction,
+    (v) => {
+      uniforms.mouseStrength.value = v ? props.mouseStrength : 0
+    }
+  )
+  watch(
+    () => props.mouseStrength,
+    (v) => {
+      if (props.mouseInteraction) uniforms.mouseStrength.value = v
+    }
+  )
 
-emit('node', colorNode)
-defineExpose({ uniforms, colorNode })
+  emit('node', colorNode)
+  defineExpose({ uniforms, colorNode })
 </script>
 
 <template>

package/layers/shader/app/components/Preset/ThemeFlow.client.vue

@@ -1,84 +1,121 @@
+<!-- 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 {
-  createAmbientUniforms,
-  createThemeFlowColorNode,
-} from '#layers/shader/app/composables/useAmbientMaterials'
+  // @ts-nocheck - TSL types
+  import {
+    createAmbientUniforms,
+    createThemeFlowColorNode,
+  } from '#layers/shader/app/composables/useAmbientMaterials'
 
-const props = withDefaults(
-  defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>(),
-  {
-    speed: 1.0,
-    intensity: 1.0,
-    mouseInteraction: true,
-    mouseStrength: 0.3,
-    color1: '#8b5cf6',
-    color2: '#6366f1',
-    color3: '#a78bfa',
-    color4: '#38bdf8',
-  }
-)
-
-const emit = defineEmits<{
-  node: [colorNode: any]
-}>()
+  const props = withDefaults(
+    defineProps<{
+      speed?: number
+      intensity?: number
+      mouseInteraction?: boolean
+      mouseStrength?: number
+      color1?: string
+      color2?: string
+      color3?: string
+      color4?: string
+    }>(),
+    {
+      speed: 1.0,
+      intensity: 1.0,
+      mouseInteraction: true,
+      mouseStrength: 0.3,
+      color1: '#8b5cf6',
+      color2: '#6366f1',
+      color3: '#a78bfa',
+      color4: '#38bdf8',
+    }
+  )
 
-const uniforms = createAmbientUniforms({
-  speed: props.speed,
-  intensity: props.intensity,
-  mouseInteraction: props.mouseInteraction,
-})
-if (props.mouseInteraction) {
-  uniforms.mouseStrength.value = props.mouseStrength
-}
+  const emit = defineEmits<{
+    node: [colorNode: any]
+  }>()
 
-const c1 = useShaderColor(props.color1)
-const c2 = useShaderColor(props.color2)
-const c3 = useShaderColor(props.color3)
-const c4 = useShaderColor(props.color4)
+  const uniforms = createAmbientUniforms({
+    speed: props.speed,
+    intensity: props.intensity,
+    mouseInteraction: props.mouseInteraction,
+  })
+  if (props.mouseInteraction) {
+    uniforms.mouseStrength.value = props.mouseStrength
+  }
 
-const colorNode = createThemeFlowColorNode(uniforms, {
-  color1: c1.node,
-  color2: c2.node,
-  color3: c3.node,
-  color4: c4.node,
-})
+  const c1 = useShaderColor(props.color1)
+  const c2 = useShaderColor(props.color2)
+  const c3 = useShaderColor(props.color3)
+  const c4 = useShaderColor(props.color4)
 
-watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
-watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
-watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
-watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+  const colorNode = createThemeFlowColorNode(uniforms, {
+    color1: c1.node,
+    color2: c2.node,
+    color3: c3.node,
+    color4: c4.node,
+  })
 
-try {
-  const runtime = useShaderRuntimeContext()
   watch(
-    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-    ([mx, my]) => {
-      uniforms.mouseX.value = mx
-      uniforms.mouseY.value = my
-    },
-    { immediate: true }
+    () => props.color1,
+    (hex) => c1.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color2,
+    (hex) => c2.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color3,
+    (hex) => c3.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color4,
+    (hex) => c4.tweenTo(hex, 0.8)
   )
-} catch {
-  // No runtime context
-}
 
-watch(() => props.speed,            (v) => { uniforms.speed.value = v })
-watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
-watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
-watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+  try {
+    const runtime = useShaderRuntimeContext()
+    watch(
+      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+      ([mx, my]) => {
+        uniforms.mouseX.value = mx
+        uniforms.mouseY.value = my
+      },
+      { immediate: true }
+    )
+  } catch {
+    // No runtime context
+  }
+
+  watch(
+    () => props.speed,
+    (v) => {
+      uniforms.speed.value = v
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      uniforms.intensity.value = v
+    }
+  )
+  watch(
+    () => props.mouseInteraction,
+    (v) => {
+      uniforms.mouseStrength.value = v ? props.mouseStrength : 0
+    }
+  )
+  watch(
+    () => props.mouseStrength,
+    (v) => {
+      if (props.mouseInteraction) uniforms.mouseStrength.value = v
+    }
+  )
 
-emit('node', colorNode)
-defineExpose({ uniforms, colorNode })
+  emit('node', colorNode)
+  defineExpose({ uniforms, colorNode })
 </script>
 
 <template>

package/layers/shader/app/components/Preset/ThemeGradient.client.vue

@@ -1,85 +1,122 @@
+<!-- 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 {
-  createAmbientUniforms,
-  createThemeGradientColorNode,
-} from '#layers/shader/app/composables/useAmbientMaterials'
+  // @ts-nocheck - TSL types
+  import {
+    createAmbientUniforms,
+    createThemeGradientColorNode,
+  } from '#layers/shader/app/composables/useAmbientMaterials'
 
-const props = withDefaults(
-  defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>(),
-  {
-    speed: 1.0,
-    intensity: 1.0,
-    mouseInteraction: true,
-    mouseStrength: 0.3,
-    color1: '#8b5cf6',
-    color2: '#6366f1',
-    color3: '#a78bfa',
-    color4: '#38bdf8',
-  }
-)
-
-const emit = defineEmits<{
-  node: [colorNode: any]
-}>()
+  const props = withDefaults(
+    defineProps<{
+      speed?: number
+      intensity?: number
+      mouseInteraction?: boolean
+      mouseStrength?: number
+      color1?: string
+      color2?: string
+      color3?: string
+      color4?: string
+    }>(),
+    {
+      speed: 1.0,
+      intensity: 1.0,
+      mouseInteraction: true,
+      mouseStrength: 0.3,
+      color1: '#8b5cf6',
+      color2: '#6366f1',
+      color3: '#a78bfa',
+      color4: '#38bdf8',
+    }
+  )
 
-const uniforms = createAmbientUniforms({
-  speed: props.speed,
-  intensity: props.intensity,
-  mouseInteraction: props.mouseInteraction,
-})
-// createAmbientUniforms hardcodes 0.5 — override with our prop value
-if (props.mouseInteraction) {
-  uniforms.mouseStrength.value = props.mouseStrength
-}
+  const emit = defineEmits<{
+    node: [colorNode: any]
+  }>()
 
-const c1 = useShaderColor(props.color1)
-const c2 = useShaderColor(props.color2)
-const c3 = useShaderColor(props.color3)
-const c4 = useShaderColor(props.color4)
+  const uniforms = createAmbientUniforms({
+    speed: props.speed,
+    intensity: props.intensity,
+    mouseInteraction: props.mouseInteraction,
+  })
+  // createAmbientUniforms hardcodes 0.5 — override with our prop value
+  if (props.mouseInteraction) {
+    uniforms.mouseStrength.value = props.mouseStrength
+  }
 
-const colorNode = createThemeGradientColorNode(uniforms, {
-  color1: c1.node,
-  color2: c2.node,
-  color3: c3.node,
-  color4: c4.node,
-})
+  const c1 = useShaderColor(props.color1)
+  const c2 = useShaderColor(props.color2)
+  const c3 = useShaderColor(props.color3)
+  const c4 = useShaderColor(props.color4)
 
-watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
-watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
-watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
-watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+  const colorNode = createThemeGradientColorNode(uniforms, {
+    color1: c1.node,
+    color2: c2.node,
+    color3: c3.node,
+    color4: c4.node,
+  })
 
-try {
-  const runtime = useShaderRuntimeContext()
   watch(
-    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-    ([mx, my]) => {
-      uniforms.mouseX.value = mx
-      uniforms.mouseY.value = my
-    },
-    { immediate: true }
+    () => props.color1,
+    (hex) => c1.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color2,
+    (hex) => c2.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color3,
+    (hex) => c3.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color4,
+    (hex) => c4.tweenTo(hex, 0.8)
   )
-} catch {
-  // No runtime context
-}
 
-watch(() => props.speed,           (v) => { uniforms.speed.value = v })
-watch(() => props.intensity,       (v) => { uniforms.intensity.value = v })
-watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
-watch(() => props.mouseStrength,   (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+  try {
+    const runtime = useShaderRuntimeContext()
+    watch(
+      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+      ([mx, my]) => {
+        uniforms.mouseX.value = mx
+        uniforms.mouseY.value = my
+      },
+      { immediate: true }
+    )
+  } catch {
+    // No runtime context
+  }
+
+  watch(
+    () => props.speed,
+    (v) => {
+      uniforms.speed.value = v
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      uniforms.intensity.value = v
+    }
+  )
+  watch(
+    () => props.mouseInteraction,
+    (v) => {
+      uniforms.mouseStrength.value = v ? props.mouseStrength : 0
+    }
+  )
+  watch(
+    () => props.mouseStrength,
+    (v) => {
+      if (props.mouseInteraction) uniforms.mouseStrength.value = v
+    }
+  )
 
-emit('node', colorNode)
-defineExpose({ uniforms, colorNode })
+  emit('node', colorNode)
+  defineExpose({ uniforms, colorNode })
 </script>
 
 <template>