kmcom-nuxt-layers 1.7.9 → 2.1.6

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

@@ -1,36 +1,44 @@
 <script setup lang="ts">
-// @ts-nocheck
-import { Color } from 'three'
-import { mix, uniform, vec4 } from 'three/tsl'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  axis?: 'x' | 'y'
-  order?: number
-}>(), {
-  colorA: '#000000',
-  colorB: '#ffffff',
-  axis: 'y',
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      axis?: 'x' | 'y'
+      order?: number
+    }>(),
+    {
+      colorA: '#000000',
+      colorB: '#ffffff',
+      axis: 'y',
+      order: 0,
+    }
+  )
 
-const colorAVal = new Color(props.colorA)
-const colorBVal = new Color(props.colorB)
-const colorANode = uniform(colorAVal)
-const colorBNode = uniform(colorBVal)
-watch(() => props.colorA, v => { colorANode.value.set(v) })
-watch(() => props.colorB, v => { colorBNode.value.set(v) })
+  const colorAVal = new Color(props.colorA)
+  const colorBVal = new Color(props.colorB)
+  const colorANode = uniform(colorAVal)
+  const colorBNode = uniform(colorBVal)
+  watch(
+    () => props.colorA,
+    (v) => {
+      colorANode.value.set(v)
+    }
+  )
+  watch(
+    () => props.colorB,
+    (v) => {
+      colorBNode.value.set(v)
+    }
+  )
 
-const { uvNode } = useShaderPipelineContext()
+  const { uvNode } = useShaderPipelineContext()
 
-useShaderStage(
-  (_prev) => {
+  useShaderStage((_prev) => {
     const t = props.axis === 'x' ? uvNode.value.x : uvNode.value.y
     return vec4(mix(colorANode, colorBNode, t), 1.0)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,51 +1,77 @@
 <script setup lang="ts">
-// @ts-nocheck
-import { Color, Vector3 } from 'three'
-import { float, mix, step, uniform, vec4 } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, step, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  /** Optional third stop (defaults to colorB when omitted → 2-stop gradient) */
-  colorC?: string
-  /** Optional fourth stop (defaults to colorC when omitted → 3-stop gradient) */
-  colorD?: string
-  axis?: 'x' | 'y'
-  order?: number
-}>(), {
-  colorA: '#000000',
-  colorB: '#ffffff',
-  colorC: undefined,
-  colorD: undefined,
-  axis: 'y',
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      /** Optional third stop (defaults to colorB when omitted → 2-stop gradient) */
+      colorC?: string
+      /** Optional fourth stop (defaults to colorC when omitted → 3-stop gradient) */
+      colorD?: string
+      axis?: 'x' | 'y'
+      order?: number
+    }>(),
+    {
+      colorA: '#000000',
+      colorB: '#ffffff',
+      colorC: undefined,
+      colorD: undefined,
+      axis: 'y',
+      order: 0,
+    }
+  )
 
-function toVec3U(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  function toVec3U(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const cA = toVec3U(props.colorA)
-const cB = toVec3U(props.colorB)
-const cC = toVec3U(props.colorC ?? props.colorB)
-const cD = toVec3U(props.colorD ?? props.colorC ?? props.colorB)
+  const cA = toVec3U(props.colorA)
+  const cB = toVec3U(props.colorB)
+  const cC = toVec3U(props.colorC ?? props.colorB)
+  const cD = toVec3U(props.colorD ?? props.colorC ?? props.colorB)
 
-watch(() => props.colorA, v => { const c = new Color(v); cA.value.set(c.r, c.g, c.b) })
-watch(() => props.colorB, v => { const c = new Color(v); cB.value.set(c.r, c.g, c.b) })
-watch(() => props.colorC, v => { const c = new Color(v ?? props.colorB); cC.value.set(c.r, c.g, c.b) })
-watch(() => props.colorD, v => { const c = new Color(v ?? props.colorC ?? props.colorB); cD.value.set(c.r, c.g, c.b) })
+  watch(
+    () => props.colorA,
+    (v) => {
+      const c = new Color(v)
+      cA.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.colorB,
+    (v) => {
+      const c = new Color(v)
+      cB.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.colorC,
+    (v) => {
+      const c = new Color(v ?? props.colorB)
+      cC.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.colorD,
+    (v) => {
+      const c = new Color(v ?? props.colorC ?? props.colorB)
+      cD.value.set(c.r, c.g, c.b)
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  () => {
+  useShaderStage(() => {
     const t = props.axis === 'x' ? pipeline.uvNode.value.x : pipeline.uvNode.value.y
 
     // Map t [0,1] to 3 equal segments, clamping so t=1 maps to lt=1 not lt=0
     const tN = t.mul(float(3)).min(float(2.9999))
     const seg = tN.floor()
-    const lt = tN.sub(seg)    // local t within segment [0,1)
+    const lt = tN.sub(seg) // local t within segment [0,1)
 
     // All three segment interpolations share the same local t
     const c01 = mix(cA, cB, lt)
@@ -53,15 +79,11 @@ useShaderStage(
     const c23 = mix(cC, cD, lt)
 
     // step(edge, x): 0 if x < edge, 1 if x >= edge
-    const inSeg1 = step(float(1), tN)   // 1 when in segments 1 or 2
-    const inSeg2 = step(float(2), tN)   // 1 when in segment 2
+    const inSeg1 = step(float(1), tN) // 1 when in segments 1 or 2
+    const inSeg2 = step(float(2), tN) // 1 when in segment 2
 
     // Cascade: start with c01, replace with c12 at seg>=1, replace with c23 at seg>=2
     const col = mix(mix(c01, c12, inSeg1), c23, inSeg2)
     return vec4(col, float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,25 +1,31 @@
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec4, pow, float } from 'three/tsl'
+  // @ts-nocheck
+  import { float, pow, uniform, vec4 } from 'three/tsl'
 
-/**
- * Gamma-encodes linear light to sRGB for display.
- * Use as the last step in HDR pipelines before output.
- * Approximate form: pow(col, 1/2.2).
- */
-const props = withDefaults(defineProps<{
-  /** Gamma exponent — 2.2 matches sRGB standard */
-  gamma?: number
-  order?: number
-}>(), { gamma: 2.2, order: 0 })
+  /**
+   * Gamma-encodes linear light to sRGB for display.
+   * Use as the last step in HDR pipelines before output.
+   * Approximate form: pow(col, 1/2.2).
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Gamma exponent — 2.2 matches sRGB standard */
+      gamma?: number
+      order?: number
+    }>(),
+    { gamma: 2.2, order: 0 }
+  )
 
-const gammaNode = uniform(props.gamma)
-watch(() => props.gamma, v => { gammaNode.value = v })
+  const gammaNode = uniform(props.gamma)
+  watch(
+    () => props.gamma,
+    (v) => {
+      gammaNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => vec4(pow(prev.xyz.max(float(0)), float(1).div(gammaNode)), prev.w),
-  props.order,
-)
+  useShaderStage(
+    (prev) => vec4(pow(prev.xyz.max(float(0)), float(1).div(gammaNode)), prev.w),
+    props.order
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,69 +1,109 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color, Vector3 } from 'three'
-import { uniform, time, vec4, mix, sin, float } from 'three/tsl'
-import { fbm2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, sin, time, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Base (vein background) colour */
-  colorA?: string
-  /** Vein colour */
-  colorB?: string
-  /** Marble vein frequency */
-  frequency?: number
-  /** FBM noise scale for vein turbulence */
-  noiseScale?: number
-  /** Noise strength applied to sine input */
-  noiseStrength?: number
-  /** Vein sharpness — higher = thinner veins */
-  sharpness?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), {
-  colorA: '#f5f0e8',
-  colorB: '#6a5a4a',
-  frequency: 5,
-  noiseScale: 3,
-  noiseStrength: 8,
-  sharpness: 4,
-  speed: 0,
-  order: 0,
-})
+  import { fbm2D } from '../../shaders/common/noise'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  const props = withDefaults(
+    defineProps<{
+      /** Base (vein background) colour */
+      colorA?: string
+      /** Vein colour */
+      colorB?: string
+      /** Marble vein frequency */
+      frequency?: number
+      /** FBM noise scale for vein turbulence */
+      noiseScale?: number
+      /** Noise strength applied to sine input */
+      noiseStrength?: number
+      /** Vein sharpness — higher = thinner veins */
+      sharpness?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    {
+      colorA: '#f5f0e8',
+      colorB: '#6a5a4a',
+      frequency: 5,
+      noiseScale: 3,
+      noiseStrength: 8,
+      sharpness: 4,
+      speed: 0,
+      order: 0,
+    }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const freqNode = uniform(props.frequency)
-const noiseScaleNode = uniform(props.noiseScale)
-const noiseStrNode = uniform(props.noiseStrength)
-const sharpNode = uniform(props.sharpness)
-const speedNode = uniform(props.speed)
-watch(() => props.colorA, v => { const c = new Color(v); colorANode.value.set(c.r, c.g, c.b) })
-watch(() => props.colorB, v => { const c = new Color(v); colorBNode.value.set(c.r, c.g, c.b) })
-watch(() => props.frequency, v => { freqNode.value = v })
-watch(() => props.noiseScale, v => { noiseScaleNode.value = v })
-watch(() => props.noiseStrength, v => { noiseStrNode.value = v })
-watch(() => props.sharpness, v => { sharpNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const pipeline = useShaderPipelineContext()
+  const colorANode = toVec3Node(props.colorA)
+  const colorBNode = toVec3Node(props.colorB)
+  const freqNode = uniform(props.frequency)
+  const noiseScaleNode = uniform(props.noiseScale)
+  const noiseStrNode = uniform(props.noiseStrength)
+  const sharpNode = uniform(props.sharpness)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.colorA,
+    (v) => {
+      const c = new Color(v)
+      colorANode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.colorB,
+    (v) => {
+      const c = new Color(v)
+      colorBNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.frequency,
+    (v) => {
+      freqNode.value = v
+    }
+  )
+  watch(
+    () => props.noiseScale,
+    (v) => {
+      noiseScaleNode.value = v
+    }
+  )
+  watch(
+    () => props.noiseStrength,
+    (v) => {
+      noiseStrNode.value = v
+    }
+  )
+  watch(
+    () => props.sharpness,
+    (v) => {
+      sharpNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const t = time.mul(speedNode)
     const n = fbm2D(uv.mul(noiseScaleNode).add(t))
     // Sine + noise offset creates the vein pattern
-    const vein = sin(uv.x.mul(freqNode).add(n.mul(noiseStrNode))).abs().pow(sharpNode)
+    const vein = sin(uv.x.mul(freqNode).add(n.mul(noiseStrNode)))
+      .abs()
+      .pow(sharpNode)
     return vec4(mix(colorANode, colorBNode, vein), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,45 +1,55 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { smoothstep, uniform, vec4 } from 'three/tsl'
+  // @ts-nocheck
+  import { smoothstep, uniform, vec4 } from 'three/tsl'
 
-/**
- * Fades the accumulated pipeline colour toward transparent/black based on
- * a UV axis threshold. Useful as a final Y/X-axis gradient mask.
- *
- * Example (Grainient final step):
- *   <MixBlend axis="y" :edge0="0.45" :edge1="0.55" />
- */
-const props = withDefaults(defineProps<{
-  axis?: 'x' | 'y'
-  edge0?: number
-  edge1?: number
-  /** 0 = fade to transparent, 1 = fade to opaque (keep prev) */
-  invert?: boolean
-  order?: number
-}>(), {
-  axis: 'y',
-  edge0: 0.45,
-  edge1: 0.55,
-  invert: false,
-  order: 0,
-})
+  /**
+   * Fades the accumulated pipeline colour toward transparent/black based on
+   * a UV axis threshold. Useful as a final Y/X-axis gradient mask.
+   *
+   * Example (Grainient final step):
+   *   <MixBlend axis="y" :edge0="0.45" :edge1="0.55" />
+   */
+  const props = withDefaults(
+    defineProps<{
+      axis?: 'x' | 'y'
+      edge0?: number
+      edge1?: number
+      /** 0 = fade to transparent, 1 = fade to opaque (keep prev) */
+      invert?: boolean
+      order?: number
+    }>(),
+    {
+      axis: 'y',
+      edge0: 0.45,
+      edge1: 0.55,
+      invert: false,
+      order: 0,
+    }
+  )
 
-const edge0Node = uniform(props.edge0)
-const edge1Node = uniform(props.edge1)
-watch(() => props.edge0, v => { edge0Node.value = v })
-watch(() => props.edge1, v => { edge1Node.value = v })
+  const edge0Node = uniform(props.edge0)
+  const edge1Node = uniform(props.edge1)
+  watch(
+    () => props.edge0,
+    (v) => {
+      edge0Node.value = v
+    }
+  )
+  watch(
+    () => props.edge1,
+    (v) => {
+      edge1Node.value = v
+    }
+  )
 
-const { uvNode } = useShaderPipelineContext()
+  const { uvNode } = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const coord = props.axis === 'x' ? uvNode.value.x : uvNode.value.y
     const mask = smoothstep(edge0Node, edge1Node, coord)
     const alpha = props.invert ? mask.oneMinus() : mask
     return vec4(prev.xyz, prev.w.mul(alpha))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,31 +1,46 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color, Vector3 } from 'three'
-import { uniform, vec4 } from 'three/tsl'
-import { desaturate } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Tint colour applied after desaturation */
-  color?: string
-  /** How much to desaturate before tinting: 1 = full greyscale */
-  desaturation?: number
-  order?: number
-}>(), { color: '#4466aa', desaturation: 1, order: 0 })
+  import { desaturate } from '../../shaders/common/blend'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  const props = withDefaults(
+    defineProps<{
+      /** Tint colour applied after desaturation */
+      color?: string
+      /** How much to desaturate before tinting: 1 = full greyscale */
+      desaturation?: number
+      order?: number
+    }>(),
+    { color: '#4466aa', desaturation: 1, order: 0 }
+  )
 
-const colorNode = toVec3Node(props.color)
-const desatNode = uniform(props.desaturation)
-watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
-watch(() => props.desaturation, v => { desatNode.value = v })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-useShaderStage(
-  (prev) => vec4(desaturate(prev.xyz, desatNode).mul(colorNode), prev.w),
-  props.order,
-)
-</script>
+  const colorNode = toVec3Node(props.color)
+  const desatNode = uniform(props.desaturation)
+  watch(
+    () => props.color,
+    (v) => {
+      const c = new Color(v)
+      colorNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.desaturation,
+    (v) => {
+      desatNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage(
+    (prev) => vec4(desaturate(prev.xyz, desatNode).mul(colorNode), prev.w),
+    props.order
+  )
+</script>

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

@@ -1,24 +1,38 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color } from 'three'
-import { mix, uniform, vec4 } from 'three/tsl'
-import { blendMultiply } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  color?: string
-  opacity?: number
-  order?: number
-}>(), { color: '#808080', opacity: 1, order: 0 })
+  import { blendMultiply } from '../../shaders/common/blend'
 
-const colorNode = uniform(new Color(props.color))
-const opacityNode = uniform(props.opacity)
-watch(() => props.color, v => { colorNode.value.set(v) })
-watch(() => props.opacity, v => { opacityNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      color?: string
+      opacity?: number
+      order?: number
+    }>(),
+    { color: '#808080', opacity: 1, order: 0 }
+  )
 
-useShaderStage(
-  (prev) => vec4(mix(prev.xyz, blendMultiply(prev.xyz, colorNode), opacityNode), prev.w),
-  props.order,
-)
-</script>
+  const colorNode = uniform(new Color(props.color))
+  const opacityNode = uniform(props.opacity)
+  watch(
+    () => props.color,
+    (v) => {
+      colorNode.value.set(v)
+    }
+  )
+  watch(
+    () => props.opacity,
+    (v) => {
+      opacityNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage(
+    (prev) => vec4(mix(prev.xyz, blendMultiply(prev.xyz, colorNode), opacityNode), prev.w),
+    props.order
+  )
+</script>