kmcom-nuxt-layers 1.6.4 → 1.6.6

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

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+// @ts-nocheck - Three.js WebGPU types + TresJS renderer factory
 import { TresCanvas } from '@tresjs/core'
 import type { ToneMapping } from 'three'
 import {
   ACESFilmicToneMapping,
   CineonToneMapping,
+  Color,
   LinearToneMapping,
   ReinhardToneMapping,
   SRGBColorSpace,
 } from 'three'
+import { WebGPURenderer } from 'three/webgpu'
 
 const props = withDefaults(
   defineProps<{
@@ -20,6 +23,8 @@ const props = withDefaults(
     preserveDrawingBuffer?: boolean
     powerPreference?: 'default' | 'high-performance' | 'low-power'
     windowSize?: boolean
+    /** Use WebGPURenderer (required for node materials / TSL shaders) */
+    webgpu?: boolean
   }>(),
   {
     clearColor: '#000000',
@@ -31,6 +36,7 @@ const props = withDefaults(
     preserveDrawingBuffer: false,
     powerPreference: 'high-performance',
     windowSize: true,
+    webgpu: false,
   }
 )
 
@@ -65,6 +71,23 @@ const maxDpr = computed(() => {
   return Math.min(window.devicePixelRatio, configDpr)
 })
 
+// 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 onReady(context: any) {
   emit('ready', context)
 }
@@ -82,6 +105,7 @@ function onReady(context: any) {
     :power-preference
     :window-size
     :dpr="maxDpr"
+    :renderer="webgpuRendererFactory"
     class="shader-canvas"
     @ready="onReady"
   >

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types are complex
+import { DoubleSide } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { float, 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')
+
+    // UV chain — generators read pipeline.uvNode.value in their stage fn closures
+    pipeline.uvNode.value = uvStages.reduce((node, { fn }) => fn(node), uv())
+
+    // Ray chain — sky/tunnel generators read pipeline.rayNode.value in their closures
+    pipeline.rayNode.value = ray.reduce((node, { fn }) => fn(node), screenRayNode)
+
+    // Fragment chain
+    material.colorNode = fragment.reduce((node, { fn }) => fn(node), vec4(0, 0, 0, 1))
+    material.needsUpdate = true
+
+    if (vertex.length > 0) {
+      material.positionNode = vertex.reduce((node, { fn }) => fn(node), positionLocal)
+      material.needsUpdate = true
+    }
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  try { material.dispose() } catch { /* renderer already torn down */ }
+})
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>

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

@@ -0,0 +1,18 @@
+<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()
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/composables/useCSSColourUniform.ts

@@ -0,0 +1,41 @@
+import { Color, Vector3 } from 'three'
+import { uniform } from 'three/tsl'
+
+/**
+ * Creates a TSL vec3 uniform that tracks a CSS custom property (colour).
+ * Syncs on mount and whenever :root's class or style changes (theme switches).
+ *
+ * @example
+ * const primaryNode = useCSSColourUniform('--ui-color-primary-500')
+ * // Use primaryNode directly inside useShaderStage closures.
+ */
+export function useCSSColourUniform(varName: string) {
+  // @ts-ignore — TSL uniform types
+  const node = uniform(new Vector3(0, 0, 0))
+  const c = new Color()
+
+  function sync() {
+    const raw = getComputedStyle(document.documentElement)
+      .getPropertyValue(varName)
+      .trim()
+    if (!raw) return
+    try {
+      c.set(raw)
+      // @ts-ignore
+      node.value.set(c.r, c.g, c.b)
+    }
+    catch { /* unsupported format — leave previous value */ }
+  }
+
+  onMounted(() => {
+    sync()
+    const observer = new MutationObserver(sync)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    })
+    onUnmounted(() => observer.disconnect())
+  })
+
+  return node
+}

package/layers/shader/app/composables/useCSSFloatUniform.ts

@@ -0,0 +1,34 @@
+import { uniform } from 'three/tsl'
+
+/**
+ * Creates a TSL float uniform that tracks a numeric CSS custom property.
+ * Syncs on mount and whenever :root's class or style changes (theme switches).
+ *
+ * @example
+ * const spacingNode = useCSSFloatUniform('--spacing-scale')
+ */
+export function useCSSFloatUniform(varName: string) {
+  // @ts-ignore — TSL uniform types
+  const node = uniform(0)
+
+  function sync() {
+    const raw = getComputedStyle(document.documentElement)
+      .getPropertyValue(varName)
+      .trim()
+    const val = parseFloat(raw)
+    // @ts-ignore
+    if (!isNaN(val)) node.value = val
+  }
+
+  onMounted(() => {
+    sync()
+    const observer = new MutationObserver(sync)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    })
+    onUnmounted(() => observer.disconnect())
+  })
+
+  return node
+}

package/layers/shader/app/composables/useShaderPerf.ts

@@ -0,0 +1,73 @@
+/**
+ * useShaderPerf — lightweight performance monitor for shader pipelines.
+ *
+ * Tracks frame time, frame rate, and stage count for a named pipeline.
+ * Designed to be used in development to identify bottlenecks.
+ *
+ * Usage:
+ *   const perf = useShaderPerf('myScene')
+ *   // call perf.tick() each frame (e.g. from useRenderLoop or requestAnimationFrame)
+ *   // read perf.fps, perf.frameMs, perf.stageCount
+ */
+export function useShaderPerf(label = 'pipeline') {
+  const fps = ref(0)
+  const frameMs = ref(0)
+  const stageCount = ref(0)
+
+  let lastTime = performance.now()
+  let frames = 0
+  let accumMs = 0
+  let rafId: number | null = null
+  let running = false
+
+  const pipeline = useShaderPipelineContext()
+
+  function tick() {
+    if (!running) return
+    const now = performance.now()
+    const delta = now - lastTime
+    lastTime = now
+
+    frames++
+    accumMs += delta
+
+    if (accumMs >= 500) {
+      fps.value = Math.round((frames / accumMs) * 1000)
+      frameMs.value = Math.round(accumMs / frames * 10) / 10
+      frames = 0
+      accumMs = 0
+    }
+
+    stageCount.value = pipeline
+      ? (pipeline.stagesFor('uv').length + pipeline.stagesFor('fragment').length)
+      : 0
+    rafId = requestAnimationFrame(tick)
+  }
+
+  function start() {
+    if (running) return
+    running = true
+    lastTime = performance.now()
+    rafId = requestAnimationFrame(tick)
+  }
+
+  function stop() {
+    running = false
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+  }
+
+  onMounted(start)
+  onUnmounted(stop)
+
+  if (import.meta.dev) {
+    watch([fps, frameMs, stageCount], ([f, ms, s]) => {
+      // eslint-disable-next-line no-console
+      console.debug(`[ShaderPerf:${label}] ${f}fps  ${ms}ms/frame  ${s} stages`)
+    })
+  }
+
+  return { fps, frameMs, stageCount, start, stop }
+}

package/layers/shader/app/composables/useShaderPipeline.ts

@@ -0,0 +1,99 @@
+import type { InjectionKey, Ref, ShallowRef } from 'vue'
+import type { TSLNode } from '../types'
+
+export type ShaderStage = 'fragment' | 'vertex' | 'ray' | 'uv'
+
+export interface ShaderStageEntry {
+  fn: (input: TSLNode) => TSLNode
+  order: number
+  stage: ShaderStage
+}
+
+export interface ShaderPipelineContext {
+  register: (fn: ShaderStageEntry['fn'], order?: number, stage?: ShaderStage) => void
+  unregister: (fn: ShaderStageEntry['fn']) => void
+  stagesFor: (stage: ShaderStage) => ShaderStageEntry[]
+  /** Increments on topology changes (add/remove) to trigger material recompilation */
+  version: Ref<number>
+  /** Current UV node — starts as uv(), updated by UV transformer blocks before generators run.
+   *  Generators read this via useShaderPipelineContext().uvNode to get the transformed UV. */
+  uvNode: ShallowRef<TSLNode | null>
+  /** Built ray direction node — populated by ShaderPipeline after ray transformers reduce.
+   *  Terminal generators (SkyAtmosphere, RaymarchTunnel, etc.) read this in Phase 4. */
+  rayNode: ShallowRef<TSLNode | null>
+}
+
+export const SHADER_PIPELINE_KEY: InjectionKey<ShaderPipelineContext> = Symbol('shader-pipeline')
+
+/**
+ * Creates a shader pipeline context and provides it to child components.
+ * Call this inside <ShaderPipeline> — it provides the context that useShaderStage() injects.
+ */
+export function useShaderPipeline(): ShaderPipelineContext {
+  const entries: ShaderStageEntry[] = []
+  const version = ref(0)
+  const uvNode = shallowRef<TSLNode | null>(null)
+  const rayNode = shallowRef<TSLNode | null>(null)
+
+  function register(fn: ShaderStageEntry['fn'], order = 0, stage: ShaderStage = 'fragment') {
+    entries.push({ fn, order, stage })
+    version.value++
+  }
+
+  function unregister(fn: ShaderStageEntry['fn']) {
+    const i = entries.findIndex(e => e.fn === fn)
+    if (i !== -1) {
+      entries.splice(i, 1)
+      version.value++
+    }
+  }
+
+  function stagesFor(stage: ShaderStage): ShaderStageEntry[] {
+    return entries.filter(e => e.stage === stage).sort((a, b) => a.order - b.order)
+  }
+
+  const context: ShaderPipelineContext = { register, unregister, stagesFor, version, uvNode, rayNode }
+  provide(SHADER_PIPELINE_KEY, context)
+  return context
+}
+
+/**
+ * Registers a stage function into the nearest parent ShaderPipeline.
+ * The function receives the current pipeline node and returns the transformed node.
+ *
+ * @param stageFn - Transform function: (input: TSLNode) => TSLNode
+ * @param order   - Execution order within the stage (lower runs first)
+ * @param stage   - 'fragment' (default), 'vertex', or 'ray'
+ *
+ * @example
+ * // Inside a block component's <script setup>:
+ * useShaderStage((_prev) => vec4(colorNode, 1.0), props.order ?? 0)
+ *
+ * // Vertex deformation:
+ * useShaderStage((pos) => pos.add(normalNode.mul(offset)), 0, 'vertex')
+ */
+export function useShaderStage(
+  stageFn: ShaderStageEntry['fn'],
+  order = 0,
+  stage: ShaderStage = 'fragment',
+): void {
+  const pipeline = inject(SHADER_PIPELINE_KEY)
+  if (!pipeline) {
+    throw new Error('useShaderStage() must be called inside a <ShaderPipeline> component')
+  }
+  onMounted(() => pipeline.register(stageFn, order, stage))
+  onUnmounted(() => pipeline.unregister(stageFn))
+}
+
+/**
+ * Injects the pipeline context from a parent ShaderPipeline.
+ * Use this in advanced block components that need direct context access
+ * (e.g. terminal ray generators that read pipeline.rayNode).
+ */
+export function useShaderPipelineContext(): ShaderPipelineContext {
+  const pipeline = inject(SHADER_PIPELINE_KEY)
+  if (!pipeline) {
+    throw new Error('useShaderPipelineContext() must be called inside a <ShaderPipeline> component')
+  }
+  return pipeline
+}

package/layers/shader/app/composables/useSunDirectionUniform.ts

@@ -0,0 +1,54 @@
+import { Vector2 } from 'three'
+import { float, time, uniform, vec3 } from 'three/tsl'
+
+export interface SunDirectionOptions {
+  /** Animation speed (radians/second). Only used when useMouseY is false. */
+  speed?: number
+  /** Drive elevation from mouse Y instead of time. */
+  useMouseY?: boolean
+}
+
+/**
+ * Returns a live TSL vec3 node representing a normalised sun direction.
+ *
+ * Animated mode (default): elevation oscillates via sin(time * speed).
+ * Mouse mode: elevation tracks mouse Y position.
+ *
+ * The guide formula: rotX(vec3(0,0,1), angle * 5 + 0.5)
+ * → vec3(0, -sin(a), cos(a))  where a = angle * 5 + 0.5
+ *
+ * @example
+ * const sunDir = useSunDirectionUniform({ speed: 0.05 })
+ * // Pass sunDir directly to SkyAtmosphere or any shader that needs sun position.
+ */
+export function useSunDirectionUniform(options: SunDirectionOptions = {}) {
+  const { speed = 0.05, useMouseY = false } = options
+
+  if (useMouseY) {
+    // @ts-ignore
+    const mouse = uniform(new Vector2(0.5, 0.5))
+
+    onMounted(() => {
+      const onMove = (e: MouseEvent) => {
+        // @ts-ignore
+        mouse.value.set(e.clientX / window.innerWidth, e.clientY / window.innerHeight)
+      }
+      window.addEventListener('mousemove', onMove)
+      onUnmounted(() => window.removeEventListener('mousemove', onMove))
+    })
+
+    // angle = -(mouseY - 0.5) — top of screen = sun high, bottom = sun low
+    const angle = mouse.y.oneMinus().sub(0.5)
+    const a = angle.mul(5).add(0.5)
+    // @ts-ignore
+    return vec3(float(0), a.sin().negate(), a.cos())
+  }
+
+  // Animated mode — pure TSL expression, no JS uniform needed
+  // @ts-ignore
+  const speedNode = uniform(speed)
+  const angle = time.mul(speedNode).sin().div(8).sub(0.2)
+  const a = angle.mul(5).add(0.5)
+  // @ts-ignore
+  return vec3(float(0), a.sin().negate(), a.cos())
+}

package/layers/shader/app/composables/useTSLNodes.ts

@@ -64,7 +64,6 @@ export function useTSLNodes() {
     asin: TSL.asin,
     acos: TSL.acos,
     atan: TSL.atan,
-    atan2: TSL.atan2,
 
     // Vector operations
     dot: TSL.dot,

package/layers/shader/app/shaders/common/complex.ts

@@ -0,0 +1,29 @@
+// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
+/**
+ * Complex number arithmetic in TSL
+ * Both functions operate on vec2 (x = real, y = imaginary).
+ */
+import { vec2, dot } from 'three/tsl'
+import type { TSLNode } from '../types'
+
+/**
+ * Complex division: a / b
+ * (a.x*b.x + a.y*b.y) / |b|² , (a.y*b.x - a.x*b.y) / |b|²
+ * Used in imaginary2 for the Möbius transformation (z-p)/(z-q).
+ */
+export function complexDiv(a: TSLNode, b: TSLNode): TSLNode {
+  const denom = dot(b, b)
+  return vec2(
+    a.x.mul(b.x).add(a.y.mul(b.y)).div(denom),
+    a.y.mul(b.x).sub(a.x.mul(b.y)).div(denom),
+  )
+}
+
+/**
+ * Complex natural logarithm: ln(z)
+ * Produces (ln|z|, arg(z)) — magnitude and winding angle.
+ * Used in imaginary2 to extract the winding angle between two poles.
+ */
+export function complexLog(z: TSLNode): TSLNode {
+  return vec2(z.length().log(), z.y.atan(z.x))
+}

package/layers/shader/app/shaders/common/shapes.ts

@@ -5,7 +5,7 @@
  */
 import {
   abs,
-  atan2,
+  atan,
   cos,
   float,
   floor,
@@ -281,7 +281,7 @@ export function star(
   const outer = typeof outerRadius === 'number' ? float(outerRadius) : outerRadius
 
   const p = uv.sub(c)
-  const angle = atan2(p.y, p.x)
+  const angle = atan(p.y, p.x)
   const dist = length(p)
 
   const segmentAngle = float((Math.PI * 2) / points)
@@ -310,7 +310,7 @@ export function radialLines(
   const t = typeof thickness === 'number' ? float(thickness) : thickness
 
   const p = uv.sub(c)
-  const angle = atan2(p.y, p.x).add(Math.PI)
+  const angle = atan(p.y, p.x).add(Math.PI)
   const segment = float((Math.PI * 2) / numLines)
 
   const foldedAngle = fract(angle.div(segment))
@@ -353,7 +353,7 @@ export function polygon(
   const rot = typeof rotation === 'number' ? float(rotation) : rotation
 
   const p = uv.sub(c)
-  const angle = atan2(p.y, p.x).add(rot)
+  const angle = atan(p.y, p.x).add(rot)
   const dist = length(p)
 
   const segmentAngle = float((Math.PI * 2) / sides)

package/layers/shader/app/shaders/common/uv.ts

@@ -3,7 +3,7 @@
  * Modular TSL UV Manipulation Utilities
  * Provides composable UV transformation functions
  */
-import { abs, atan2, cos, float, floor, fract, length, pow, sin, smoothstep, vec2 } from 'three/tsl'
+import { abs, atan, cos, float, floor, fract, length, pow, sin, smoothstep, vec2 } from 'three/tsl'
 import type { TSLNode } from '../types'
 
 // ============================================
@@ -96,7 +96,7 @@ export function toPolar(uv: TSLNode, center: TSLNode | [number, number] = [0.5,
   const centered = uv.sub(c)
 
   const radius = length(centered)
-  const angle = atan2(centered.y, centered.x)
+  const angle = atan(centered.y, centered.x)
     .add(Math.PI)
     .div(Math.PI * 2)
 

package/layers/shader/app/utils/tsl/patterns.ts

@@ -126,7 +126,7 @@ export const radialLines = Fn(
   ([uv, center, count, width]: [TSLNode, TSLNode, TSLNode, TSLNode]) => {
     const centered = uv.sub(center)
     const angle = centered.y
-      .atan2(centered.x)
+      .atan(centered.x)
       .div(Math.PI * 2)
       .add(0.5)
     const segment = fract(angle.mul(count))

package/layers/shader/app/utils/tsl/uv.ts

@@ -1,4 +1,4 @@
-import { atan2, cos, float, Fn, fract, length, sin, vec2 } from 'three/tsl'
+import { atan, cos, float, Fn, fract, length, sin, vec2 } from 'three/tsl'
 import type { TSLNode } from '../../types'
 
 /**
@@ -34,7 +34,7 @@ export const distortUV = Fn(([uv, noiseValue, strength]: [TSLNode, TSLNode, TSLN
  */
 export const polarUV = Fn(([uv, center]: [TSLNode, TSLNode]) => {
   const centered = uv.sub(center)
-  const angle = atan2(centered.y, centered.x)
+  const angle = atan(centered.y, centered.x)
     .div(Math.PI * 2)
     .add(0.5)
   const radius = length(centered)
@@ -94,7 +94,7 @@ export const mirrorUV = Fn(([uv]: [TSLNode]) => {
  */
 export const kaleidoscopeUV = Fn(([uv, center, segments]: [TSLNode, TSLNode, TSLNode]) => {
   const centered = uv.sub(center)
-  const angle = atan2(centered.y, centered.x)
+  const angle = atan(centered.y, centered.x)
   const radius = length(centered)
 
   const segmentAngle = float(Math.PI * 2).div(segments)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",
@@ -38,7 +38,7 @@
     "nuxt": "^4.4.2",
     "nuxt-studio": "^1.4.0",
     "pinia": "^3.0.4",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.4",
     "three": "^0.183.2",
     "v-gsap-nuxt": ">=1.0.0",
     "zod": "^4.3.6"
@@ -98,6 +98,7 @@
     "@eslint/markdown": "^7.5.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "@iconify-json/lucide": "^1.2.102",
+    "@netlify/nuxt": "0.2.41",
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/fonts": "^0.14.0",
     "@nuxt/image": "^2.0.0",
@@ -124,7 +125,7 @@
     "eslint-plugin-unicorn": "^64.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
     "eslint-plugin-vue": "^10.8.0",
-    "npm-check-updates": "^19.6.3",
+    "npm-check-updates": "^21.0.3",
     "nuxt": "latest",
     "pinia": "^3.0.4",
     "playwright": "^1.58.2",
@@ -142,11 +143,11 @@
     "stylelint-config-tailwindcss": "^1.0.1",
     "stylelint-no-unsupported-browser-features": "^8.1.1",
     "stylelint-prettier": "^5.0.3",
-    "tailwindcss": "^4.2.2",
-    "turbo": "^2.8.13",
+    "tailwindcss": "^4.2.4",
+    "turbo": "^2.9.6",
     "typescript": "^6.0.2",
-    "vite-plugin-checker": "^0.12.0",
-    "vitest": "^4.0.18",
+    "vite-plugin-checker": "^0.13.0",
+    "vitest": "^4.1.5",
     "vue": "latest",
     "vue-tsc": "^3.2.6",
     "zod": "^4.3.6",
@@ -159,6 +160,7 @@
     "last 2 Edge major versions"
   ],
   "dependencies": {
+    "node-gyp": "^12.3.0",
     "skills": "^1.5.0"
   },
   "engines": {