kmcom-nuxt-layers 2.2.6 → 2.2.8

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

@@ -1,41 +1,33 @@
 <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 {
+    speed = 1.0,
+    accentColor = '#8b5cf6',
+    darkMode = true,
+    mouseSmoothing = 0.1,
+  } = defineProps<{
+    speed?: number
+    accentColor?: string
+    darkMode?: boolean
+    mouseSmoothing?: number
+  }>()
 
-  const runtime = useShaderRuntime({
-    speed: props.speed,
-    accentColor: props.accentColor,
-    darkMode: props.darkMode,
-    mouseSmoothing: props.mouseSmoothing,
-  })
+  const runtime = useShaderRuntime({ speed, accentColor, darkMode, mouseSmoothing })
 
   // Watch props and update runtime uniforms
   watch(
-    () => props.speed,
+    () => speed,
     (val) => runtime.time.setSpeed(val)
   )
 
   watch(
-    () => props.accentColor,
+    () => accentColor,
     (val) => {
       runtime.accentColor.value = val
     }
   )
 
   watch(
-    () => props.darkMode,
+    () => darkMode,
     (val) => {
       runtime.darkMode.value = val
     }

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

@@ -28,7 +28,35 @@ import {
   voronoi2D,
 } from '../shaders/common/noise'
 import { cosinePalette } from '../shaders/common/palette'
-import type { TSLNode } from '../shaders/types'
+import type { FloatUniform, TSLNode, Vec3Uniform } from '../shaders/types'
+
+// ============================================
+// Private helpers
+// ============================================
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function buildFlowWarpedUV(uvCoord: any, t: any, mouseOffset: any): {
+  warpedUV: TSLNode
+  n1: TSLNode
+  n2: TSLNode
+} {
+  const warpCoarse1 = simplexNoise2D(add(mul(uvCoord, 1.5), t))
+  const warpCoarse2 = simplexNoise2D(add(mul(uvCoord, 1.5), mul(t, -0.5), 7.0))
+  const warpedUV1 = add(uvCoord, mul(vec2(warpCoarse1, warpCoarse2), 0.25), mouseOffset)
+
+  const warpMed1 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, 0.7)))
+  const warpMed2 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, -0.3), 15.0))
+  const warpedUV2 = add(warpedUV1, mul(vec2(warpMed1, warpMed2), 0.12))
+
+  const warpFine1 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, 1.2)))
+  const warpFine2 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, -0.8), 25.0))
+  const warpedUV = add(warpedUV2, mul(vec2(warpFine1, warpFine2), 0.05))
+
+  const n1 = fbm2D(warpedUV, { octaves: 5, frequency: 2.0 }).mul(0.5).add(0.5)
+  const n2 = ridgedFbm2d(warpedUV, { octaves: 4, frequency: 1.5 })
+
+  return { warpedUV, n1, n2 }
+}
 
 // ============================================
 // Types
@@ -42,11 +70,11 @@ export type AmbientMaterialOptions = {
 }
 
 export type AmbientUniforms = {
-  speed: any
-  intensity: any
-  mouseX: any
-  mouseY: any
-  mouseStrength: any
+  speed: FloatUniform
+  intensity: FloatUniform
+  mouseX: FloatUniform
+  mouseY: FloatUniform
+  mouseStrength: FloatUniform
 }
 
 export type AmbientMaterialResult = {
@@ -55,7 +83,7 @@ export type AmbientMaterialResult = {
 }
 
 export type AmbientNodeResult = {
-  colorNode: any
+  colorNode: TSLNode
   uniforms: AmbientUniforms
 }
 
@@ -78,7 +106,7 @@ export function createAmbientUniforms(options: AmbientMaterialOptions = {}): Amb
 // Color Node Creators (TSL node, no material)
 // ============================================
 
-export function createAuroraColorNode(uniforms: AmbientUniforms): any {
+export function createAuroraColorNode(uniforms: AmbientUniforms): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -137,7 +165,7 @@ export function createAuroraColorNode(uniforms: AmbientUniforms): any {
   })()
 }
 
-export function createNebulaColorNode(uniforms: AmbientUniforms): any {
+export function createNebulaColorNode(uniforms: AmbientUniforms): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -205,7 +233,7 @@ export function createNebulaColorNode(uniforms: AmbientUniforms): any {
   })()
 }
 
-export function createFlowColorNode(uniforms: AmbientUniforms): any {
+export function createFlowColorNode(uniforms: AmbientUniforms): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -223,20 +251,7 @@ export function createFlowColorNode(uniforms: AmbientUniforms): any {
       mul(sub(uMouseY, 0.5), uMouseStrength, 0.3)
     )
 
-    const warpCoarse1 = simplexNoise2D(add(mul(uvCoord, 1.5), t))
-    const warpCoarse2 = simplexNoise2D(add(mul(uvCoord, 1.5), mul(t, -0.5), 7.0))
-    const warpedUV1 = add(uvCoord, mul(vec2(warpCoarse1, warpCoarse2), 0.25), mouseOffset)
-
-    const warpMed1 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, 0.7)))
-    const warpMed2 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, -0.3), 15.0))
-    const warpedUV2 = add(warpedUV1, mul(vec2(warpMed1, warpMed2), 0.12))
-
-    const warpFine1 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, 1.2)))
-    const warpFine2 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, -0.8), 25.0))
-    const warpedUV = add(warpedUV2, mul(vec2(warpFine1, warpFine2), 0.05))
-
-    const n1 = fbm2D(warpedUV, { octaves: 5, frequency: 2.0 }).mul(0.5).add(0.5)
-    const n2 = ridgedFbm2d(warpedUV, { octaves: 4, frequency: 1.5 })
+    const { n1, n2 } = buildFlowWarpedUV(uvCoord, t, mouseOffset)
 
     const color1 = vec3(0.075, 0.306, 0.369)
     const color2 = vec3(0.443, 0.698, 0.502)
@@ -266,7 +281,7 @@ export function createFlowColorNode(uniforms: AmbientUniforms): any {
   })()
 }
 
-export function createGradientMeshColorNode(uniforms: AmbientUniforms): any {
+export function createGradientMeshColorNode(uniforms: AmbientUniforms): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -353,16 +368,16 @@ export function createGradientMeshColorNode(uniforms: AmbientUniforms): any {
 }
 
 export type ThemeColorUniforms = {
-  color1: any // TSL uniform node wrapping a THREE.Color
-  color2: any
-  color3: any
-  color4: any
+  color1: Vec3Uniform
+  color2: Vec3Uniform
+  color3: Vec3Uniform
+  color4: Vec3Uniform
 }
 
 export function createThemeGradientColorNode(
   uniforms: AmbientUniforms,
   colors: ThemeColorUniforms
-): any {
+): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -453,7 +468,7 @@ export function createThemeGradientColorNode(
 export function createThemeFlowColorNode(
   uniforms: AmbientUniforms,
   colors: ThemeColorUniforms
-): any {
+): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -471,20 +486,7 @@ export function createThemeFlowColorNode(
       mul(sub(uMouseY, 0.5), uMouseStrength, 0.3)
     )
 
-    const warpCoarse1 = simplexNoise2D(add(mul(uvCoord, 1.5), t))
-    const warpCoarse2 = simplexNoise2D(add(mul(uvCoord, 1.5), mul(t, -0.5), 7.0))
-    const warpedUV1 = add(uvCoord, mul(vec2(warpCoarse1, warpCoarse2), 0.25), mouseOffset)
-
-    const warpMed1 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, 0.7)))
-    const warpMed2 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, -0.3), 15.0))
-    const warpedUV2 = add(warpedUV1, mul(vec2(warpMed1, warpMed2), 0.12))
-
-    const warpFine1 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, 1.2)))
-    const warpFine2 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, -0.8), 25.0))
-    const warpedUV = add(warpedUV2, mul(vec2(warpFine1, warpFine2), 0.05))
-
-    const n1 = fbm2D(warpedUV, { octaves: 5, frequency: 2.0 }).mul(0.5).add(0.5)
-    const n2 = ridgedFbm2d(warpedUV, { octaves: 4, frequency: 1.5 })
+    const { n1, n2 } = buildFlowWarpedUV(uvCoord, t, mouseOffset)
 
     let colorNode = mix(colors.color1, colors.color2, n1)
     colorNode = mix(colorNode, colors.color3, mul(n2, 0.5))
@@ -506,7 +508,7 @@ export function createThemeFlowColorNode(
 export function createThemeAuroraColorNode(
   uniforms: AmbientUniforms,
   colors: ThemeColorUniforms
-): any {
+): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -563,7 +565,7 @@ export function createThemeAuroraColorNode(
 export function createThemeWaveColorNode(
   uniforms: AmbientUniforms,
   colors: ThemeColorUniforms
-): any {
+): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -613,7 +615,7 @@ export function createThemeWaveColorNode(
 export function createThemeLavaLampColorNode(
   uniforms: AmbientUniforms,
   colors: ThemeColorUniforms
-): any {
+): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -681,7 +683,7 @@ export function createThemeLavaLampColorNode(
 export function createThemeBubbleColorNode(
   uniforms: AmbientUniforms,
   colors: ThemeColorUniforms
-): any {
+): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -716,7 +718,7 @@ export function createThemeBubbleColorNode(
 export function createThemePlasmaColorNode(
   uniforms: AmbientUniforms,
   colors: ThemeColorUniforms
-): any {
+): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,
@@ -770,7 +772,7 @@ export function createThemePlasmaColorNode(
   })()
 }
 
-export function createOceanColorNode(uniforms: AmbientUniforms): any {
+export function createOceanColorNode(uniforms: AmbientUniforms): TSLNode {
   const {
     speed: uSpeed,
     intensity: uIntensity,

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

@@ -0,0 +1,26 @@
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+
+import type { TSLNode } from '../types/tsl'
+
+export function useShaderMixBlend(
+  blendFn: (base: TSLNode, blend: TSLNode) => TSLNode,
+  colorGetter: () => string,
+  opacityGetter: () => number,
+  order: number = 0
+) {
+  const colorNode = uniform(new Color(colorGetter()))
+  const opacityNode = uniform(opacityGetter())
+
+  watch(colorGetter, (v) => {
+    colorNode.value.set(v)
+  })
+  watch(opacityGetter, (v) => {
+    opacityNode.value = v
+  })
+
+  useShaderStage(
+    (prev) => vec4(mix(prev.xyz, blendFn(prev.xyz, colorNode as unknown as TSLNode), opacityNode), prev.w),
+    order
+  )
+}

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

@@ -0,0 +1,75 @@
+import {
+  createAmbientUniforms,
+  type AmbientUniforms,
+  type ThemeColorUniforms,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+import type { TSLNode } from '#layers/shader/app/types/tsl'
+
+export type ThemePresetProps = {
+  speed?: number
+  intensity?: number
+  mouseInteraction?: boolean
+  mouseStrength?: number
+  color1?: string
+  color2?: string
+  color3?: string
+  color4?: string
+}
+
+export function useThemePreset(
+  colorNodeFactory: (uniforms: AmbientUniforms, colors: ThemeColorUniforms) => TSLNode,
+  props: Readonly<Required<ThemePresetProps>>
+) {
+  const uniforms = createAmbientUniforms({
+    speed: props.speed,
+    intensity: props.intensity,
+    mouseInteraction: props.mouseInteraction,
+  })
+  if (props.mouseInteraction) {
+    uniforms.mouseStrength.value = props.mouseStrength
+  }
+
+  const c1 = useShaderColor(props.color1)
+  const c2 = useShaderColor(props.color2)
+  const c3 = useShaderColor(props.color3)
+  const c4 = useShaderColor(props.color4)
+
+  const colorNode = colorNodeFactory(uniforms, {
+    color1: c1.node,
+    color2: c2.node,
+    color3: c3.node,
+    color4: c4.node,
+  })
+
+  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))
+
+  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 }
+  )
+
+  return { uniforms, colorNode }
+}

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

@@ -26,6 +26,7 @@ import {
   vec4,
 } from 'three/tsl'
 
+import type { FBMOptions } from '../../types/tsl'
 import type { TSLNode } from '../types'
 import {
   fade,
@@ -204,13 +205,7 @@ export function gradientNoise3D(p: TSLNode): TSLNode {
 // FBM (Fractal Brownian Motion)
 // ============================================
 
-export type FBMOptions = {
-  octaves?: number
-  lacunarity?: number
-  gain?: number
-  amplitude?: number
-  frequency?: number
-}
+export type { FBMOptions }
 
 /**
  * 2D Fractal Brownian Motion

package/layers/shader/app/shaders/types.ts

@@ -7,15 +7,15 @@
 // This provides flexibility while maintaining code readability
 
 import type { UniformNode } from 'three/webgpu'
+import type { Vector3 } from 'three'
 
-export type TSLNode = any
+export type { TSLNode } from '../types/tsl'
 
-/**
- * Float uniform with full TSL operator support.
- * `ReturnType<typeof uniform>` collapses to `UniformNode<unknown, unknown>`,
- * which has no operator methods — use this concrete type instead.
- */
+/** Float uniform: `uniform(someNumber)` */
 export type FloatUniform = UniformNode<'float', number>
 
+/** Vec3 uniform: `uniform(new Vector3(...))` */
+export type Vec3Uniform = UniformNode<'vec3', Vector3>
+
 // Re-export common Three types
 export type { Color, Texture, Vector2, Vector3, Vector4 } from 'three'

package/layers/shader/app/types/tsl.ts

@@ -1,23 +1,11 @@
-/**
- * TSL Node types
- * Using generic types for flexibility across Three.js versions
- */
+import type { Node } from 'three/webgpu'
 
-export type TSLNode = any
-
-export type TSLFloat = any
-
-export type TSLVec2 = any
-
-export type TSLVec3 = any
-
-export type TSLVec4 = any
-
-export type TSLColor = any
-
-export type TSLMat3 = any
-
-export type TSLMat4 = any
+export type TSLNode = Node
+export type TSLVec3 = Node<'vec3'>
+export type TSLVec4 = Node<'vec4'>
+export type TSLColor = Node<'color'>
+export type TSLMat3 = Node<'mat3'>
+export type TSLMat4 = Node<'mat4'>
 
 export type GradientStop = {
   position: number
@@ -31,9 +19,3 @@ export type FBMOptions = {
   amplitude?: number
   frequency?: number
 }
-
-export type VoronoiResult = {
-  distance: TSLFloat
-  cellCenter: TSLVec2
-  edgeDistance: TSLFloat
-}

package/layers/shader/app/types/uniforms.ts

@@ -1,4 +1,5 @@
 import type { Color, Matrix3, Matrix4, Texture, Vector2, Vector3, Vector4 } from 'three'
+import type { TSLNode } from './tsl'
 
 export type UniformPrimitive = number | boolean | string
 export type UniformVector = Vector2 | Vector3 | Vector4
@@ -17,5 +18,5 @@ export type UniformValues = Record<string, UniformValue>
 
 export type UniformsState<T extends UniformValues> = {
   values: T
-  nodes: Record<keyof T, import('./tsl').TSLNode>
+  nodes: Record<keyof T, TSLNode>
 }

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

@@ -1,8 +1,14 @@
-import { abs, clamp, float, Fn, max, min, mix, mod, vec3 } from 'three/tsl'
+import { Color, Vector3 } from 'three'
+import { abs, clamp, float, Fn, max, min, mix, mod, uniform, vec3 } from 'three/tsl'
 
 import type { GradientStop, TSLNode } from '../../types'
 import { circularDistance } from './math'
 
+export function hexToVec3Uniform(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
 /**
  * Linear gradient with multiple color stops
  */

package/layers/shader/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,canvas,shader pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
   },
   "dependencies": {
     "@vueuse/core": "catalog:"

package/layers/theme/app/components/ThemePicker/Colors.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-  import type { AccentColor } from '#layers/theme/app/types/theme'
-
   const appConfig = useAppConfig()
   const { activeAccent, setAccent } = useAccentColor()
 
-  const accents = computed(() => ((appConfig as any).themeLayer?.accents as AccentColor[]) ?? [])
+  const accents = computed(() => appConfig.themeLayer?.accents ?? [])
 </script>
 
 <template>

package/layers/theme/app/types/app-config.d.ts

@@ -1,8 +1,10 @@
+import type { AccentColor } from './theme'
+
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     themeLayer?: {
-      accents?: Array<import('./theme').AccentColor>
-      defaultAccent?: import('./theme').AccentColor
+      accents?: AccentColor[]
+      defaultAccent?: AccentColor
     }
   }
 }

package/layers/theme/app/types/index.ts

@@ -0,0 +1 @@
+export type * from './theme'

package/layers/theme/app/types/theme.ts

@@ -5,24 +5,9 @@
  * and the theme preferences interface.
  */
 
-export type AccentColor =
-  | 'red'
-  | 'orange'
-  | 'amber'
-  | 'yellow'
-  | 'lime'
-  | 'green'
-  | 'emerald'
-  | 'teal'
-  | 'cyan'
-  | 'sky'
-  | 'blue'
-  | 'indigo'
-  | 'violet'
-  | 'purple'
-  | 'fuchsia'
-  | 'pink'
-  | 'rose'
+import type { AccentColor } from '#types'
+
+export type { AccentColor }
 
 export type PreferenceOverride = 'system' | 'on' | 'off'
 

package/layers/theme/package.json

@@ -9,6 +9,7 @@
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
-    "preview": "nuxt preview .playground"
+    "preview": "nuxt preview .playground",
+    "lint": "eslint ."
   }
 }

package/layers/theme/server/plugins/theme-fouc.ts

@@ -150,7 +150,7 @@ const initScript = `(function(){
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('render:html', (html) => {
     html.head.unshift(
-      `<style id="theme-accent-css">${accentCSS}</style>` + `<script>${initScript}</script>`
+      `<style id="theme-accent-css">${accentCSS}</style><script>${initScript}</script>`
     )
   })
 })

package/layers/transitions/package.json

@@ -2,5 +2,8 @@
   "name": "kmcom-layer-transitions",
   "version": "0.0.1",
   "type": "module",
-  "main": "./nuxt.config.ts"
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "lint": "eslint ."
+  }
 }

package/layers/typography/app/components/Typography/CodeBlock.vue

@@ -6,9 +6,9 @@
   defineOptions({ inheritAttrs: false })
 
   const {
-    language,
+    language = undefined,
     color = 'default',
-    size,
+    size = undefined,
     class: classProp = '',
   } = defineProps<{
     language?: string

package/layers/typography/app/components/Typography/Headline.vue

@@ -24,8 +24,8 @@
     tracking = 'tracking-tight',
     align = 'left',
     transform = 'none',
-    color,
-    size,
+    color = undefined,
+    size = undefined,
     class: classProp = '',
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6

package/layers/typography/app/components/Typography/HeadlineScreen.vue

@@ -25,7 +25,7 @@
     tracking = 'tracking-tight',
     align = 'left',
     transform = 'none',
-    color,
+    color = undefined,
     class: classProp = '',
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6

package/layers/typography/app/components/Typography/QuoteBlock.vue

@@ -5,7 +5,10 @@
 
   defineOptions({ inheritAttrs: false })
 
-  const { color, size } = defineProps<{ color?: UiColors; size?: FontSize }>()
+  const { color = undefined, size = undefined } = defineProps<{
+    color?: UiColors
+    size?: FontSize
+  }>()
   const colorClass = useColor(color, 'text')
 </script>
 

package/layers/typography/app/components/Typography/TextStroke.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+  defineOptions({ inheritAttrs: false })
+
   const {
     strokeWidth = 1.5,
     strokeColor = 'currentColor',