kmcom-nuxt-layers 1.4.0 → 1.5.1

package/layers/content/nuxt.config.ts

@@ -1,9 +1,11 @@
-// Conditionally load nuxt-studio if installed (optional peer dependency)
+// Conditionally load nuxt-studio if installed (optional peer dependency) and in development
 const studioModule: string[] = []
-try {
-  await import('nuxt-studio')
-  studioModule.push('nuxt-studio')
-} catch {}
+if (process.env.NODE_ENV === 'development') {
+  try {
+    await import('nuxt-studio')
+    studioModule.push('nuxt-studio')
+  } catch {}
+}
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -20,6 +22,15 @@ export default defineNuxtConfig({
 
   modules: ['@nuxt/ui', '@nuxt/content', ...studioModule],
 
+  // Configure @nuxt/content for production/Netlify builds
+  content: {
+    // Disable local database for production builds to avoid better-sqlite3 native module issues
+    // database: process.env.NETLIFY || process.env.NODE_ENV === 'production' ? false : {},
+    experimental: {
+      nativeSqlite: true,
+    },
+  },
+
   css: ['#layers/content/app/assets/css/main.css'],
 
   compatibilityDate: '2026-01-24',

package/layers/layout/app/components/Layout/Section/Gallery.vue

@@ -23,7 +23,7 @@
  */
 
 interface Props<T> {
-  items: T[]
+  items?: T[]
   columns?: 2 | 3 | 4 | 6
   itemRowSpan?: number
   fullHeight?: boolean

package/layers/routing/app/app.config.ts

@@ -0,0 +1,20 @@
+import type { RoutingLayerConfig } from './types/routing'
+
+export default defineAppConfig({
+  routingLayer: {
+    preset: 'simple',
+    strictDefaultDeny: false,
+    layerDefaultDeny: false,
+    runtimeFlags: false,
+    debug: false,
+    maintenance: { enabled: false, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: false, mode: 'replace' },
+    features: {},
+  } satisfies RoutingLayerConfig,
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    routingLayer?: Partial<import('./types/routing').RoutingLayerConfig>
+  }
+}

package/layers/routing/app/composables/useFeatures.ts

@@ -0,0 +1,12 @@
+import type { FeatureValue } from '../types/routing'
+
+export function useFeatures() {
+  const { config } = useRoutingConfig()
+  const runtimeFlags = useState<Record<string, FeatureValue>>('routing:flags', () => ({}))
+
+  function resolve(name: string): FeatureValue {
+    return runtimeFlags.value[name] ?? config.features[name] ?? 'disabled'
+  }
+
+  return { resolve, runtimeFlags }
+}

package/layers/routing/app/composables/useMaintenance.ts

@@ -0,0 +1,7 @@
+export function useMaintenance() {
+  const { config } = useRoutingConfig()
+  return {
+    isEnabled: computed(() => config.maintenance.enabled),
+    allowRoutes: computed(() => config.maintenance.allowRoutes),
+  }
+}

package/layers/routing/app/composables/useRoutingConfig.ts

@@ -0,0 +1,20 @@
+import { defu } from 'defu'
+import { ROUTING_PRESETS } from '../types/routing'
+import type { RoutingLayerConfig, FeatureValue } from '../types/routing'
+
+export function useRoutingConfig() {
+  const appConfig = useAppConfig()
+  const user = appConfig.routingLayer as Partial<RoutingLayerConfig>
+  const preset = ROUTING_PRESETS[user.preset ?? 'simple']
+  const config = defu(user, preset) as RoutingLayerConfig
+
+  return {
+    config,
+    isStrictMode: () => config.strictDefaultDeny,
+    isLayerDefaultDeny: () => config.layerDefaultDeny,
+    getFeatureVariant: (name: string): FeatureValue =>
+      config.features[name] ?? 'disabled',
+    isFeatureEnabled: (name: string) =>
+      config.features[name] === 'enabled',
+  }
+}

package/layers/routing/app/middleware/01.maintenance.global.ts

@@ -0,0 +1,6 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { isEnabled, allowRoutes } = useMaintenance()
+  if (!isEnabled.value) return
+  if (allowRoutes.value.some(r => to.path.startsWith(r))) return
+  return navigateTo(allowRoutes.value[0])
+})

package/layers/routing/app/middleware/02.governance.global.ts

@@ -0,0 +1,25 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { config, isStrictMode, isLayerDefaultDeny } = useRoutingConfig()
+  const { resolve } = useFeatures()
+  const meta = to.meta
+
+  if (config.debug) console.log('[routing] governance check', to.path, meta)
+
+  // strict default-deny: every route must declare a feature
+  if (isStrictMode() && !meta.feature) {
+    throw createError({ statusCode: 404 })
+  }
+
+  // layer default-deny: layer routes must declare a feature
+  if (isLayerDefaultDeny() && meta.__fromLayer && !meta.feature) {
+    throw createError({ statusCode: 404 })
+  }
+
+  if (!meta.feature) return
+
+  const variant = resolve(meta.feature)
+  if (config.debug) console.log(`[routing] feature "${meta.feature}" resolved to "${variant}"`)
+
+  if (variant === 'disabled') throw createError({ statusCode: 404 })
+  if (variant === 'beta' || variant === 'coming-soon') return navigateTo('/coming-soon')
+})

package/layers/routing/app/plugins/feature-flags.client.ts

@@ -0,0 +1,15 @@
+import type { FeatureValue } from '../types/routing'
+
+export default defineNuxtPlugin(async () => {
+  const { config } = useRoutingConfig()
+  if (!config.runtimeFlags) return
+
+  const { runtimeFlags } = useFeatures()
+  try {
+    const data = await $fetch<Record<string, FeatureValue>>('/api/feature-flags')
+    runtimeFlags.value = data
+  }
+  catch (e) {
+    if (config.debug) console.warn('[routing] Failed to fetch feature flags', e)
+  }
+})

package/layers/routing/app/plugins/scroll-routing.client.ts

@@ -0,0 +1,21 @@
+export default defineNuxtPlugin(() => {
+  const { config } = useRoutingConfig()
+  if (!config.scrollRouting.enabled) return
+
+  const router = useRouter()
+  const observer = new IntersectionObserver(
+    (entries) => {
+      const visible = entries.find(e => e.isIntersecting)
+      if (!visible) return
+      const id = visible.target.getAttribute('data-section')
+      if (!id) return
+      const method = config.scrollRouting.mode === 'push' ? 'push' : 'replace'
+      router[method]({ hash: `#${id}` })
+    },
+    { threshold: 0.5 },
+  )
+
+  onNuxtReady(() => {
+    document.querySelectorAll('[data-section]').forEach(el => observer.observe(el))
+  })
+})

package/layers/routing/app/types/route-meta.d.ts

@@ -0,0 +1,6 @@
+declare module 'vue-router' {
+  interface RouteMeta {
+    feature?: string
+    __fromLayer?: boolean
+  }
+}

package/layers/routing/app/types/routing.ts

@@ -0,0 +1,48 @@
+export type FeatureValue = 'enabled' | 'disabled' | 'beta' | 'coming-soon'
+export type RoutingPreset = 'simple' | 'marketing' | 'product' | 'enterprise'
+
+export interface RoutingLayerConfig {
+  preset: RoutingPreset
+  strictDefaultDeny: boolean
+  layerDefaultDeny: boolean
+  runtimeFlags: boolean
+  debug: boolean
+  maintenance: { enabled: boolean; allowRoutes: string[] }
+  scrollRouting: { enabled: boolean; mode: 'replace' | 'push' }
+  features: Record<string, FeatureValue>
+}
+
+export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'preset' | 'features'>> = {
+  simple: {
+    strictDefaultDeny: false,
+    layerDefaultDeny: false,
+    runtimeFlags: false,
+    debug: false,
+    maintenance: { enabled: false, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: false, mode: 'replace' },
+  },
+  marketing: {
+    strictDefaultDeny: false,
+    layerDefaultDeny: true,
+    runtimeFlags: false,
+    debug: false,
+    maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: true, mode: 'replace' },
+  },
+  product: {
+    strictDefaultDeny: false,
+    layerDefaultDeny: true,
+    runtimeFlags: true,
+    debug: false,
+    maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: false, mode: 'replace' },
+  },
+  enterprise: {
+    strictDefaultDeny: true,
+    layerDefaultDeny: true,
+    runtimeFlags: true,
+    debug: false,
+    maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: false, mode: 'replace' },
+  },
+}

package/layers/routing/nuxt.config.ts

@@ -0,0 +1,27 @@
+import type { NuxtPage } from '@nuxt/schema'
+
+export default defineNuxtConfig({
+  $meta: { name: 'routing' },
+
+  alias: {
+    '#layers/routing': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-01-30',
+
+  hooks: {
+    'pages:extend'(pages) {
+      const cwd = process.cwd()
+      const tag = (list: NuxtPage[]) => {
+        for (const page of list) {
+          if (page.file && !page.file.startsWith(cwd)) {
+            page.meta ??= {}
+            page.meta.__fromLayer = true
+          }
+          if (page.children) tag(page.children)
+        }
+      }
+      tag(pages)
+    },
+  },
+})

package/layers/routing/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@layers/routing",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./nuxt.config.ts"
+}

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+// @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 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)
+
+// 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,
+})
+
+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 })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeLavaLampColorNode,
+} 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 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 = createThemeLavaLampColorNode(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 })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemePlasmaColorNode,
+} 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 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 = createThemePlasmaColorNode(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 })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeWaveColorNode,
+} 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 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 = createThemeWaveColorNode(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 })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -138,6 +138,15 @@ watch(
   }
 )
 
+watch(
+  () => props.clearColor,
+  (color) => {
+    if (renderer && initialized) {
+      renderer.setClearColor(new Color(color))
+    }
+  }
+)
+
 watch([width, height], ([w, h]) => {
   if (!initialized) return
   camera.aspect = w / (h || 1)

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

@@ -10,6 +10,7 @@ import {
   mix,
   mul,
   pow,
+  sign,
   sin,
   smoothstep,
   sub,
@@ -22,6 +23,7 @@ import {
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import {
   simplexNoise2D,
+  simplexNoise3d,
   fbm2D,
   fbm3dSimplex,
   ridgedFbm2d,
@@ -427,6 +429,160 @@ export function createThemeAuroraColorNode(
   })()
 }
 
+export function createThemeWaveColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.1)
+    const mouseOff = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength),
+      mul(sub(uMouseY, 0.5), uMouseStrength),
+    )
+    const uvCoord = add(sub(uv(), 0.5), mouseOff)
+
+    // Noise-driven rotation
+    const degree = simplexNoise2D(vec2(t, uvCoord.x.mul(uvCoord.y))).mul(0.5).add(0.5)
+    const angle = degree.sub(0.5).mul(720.0 * Math.PI / 180.0).add(Math.PI)
+    const cosA = angle.cos()
+    const sinA = angle.sin()
+    const rx = uvCoord.x.mul(cosA).sub(uvCoord.y.mul(sinA))
+    const ry = uvCoord.x.mul(sinA).add(uvCoord.y.mul(cosA))
+
+    // Wave warp (order matters: warped x feeds into y)
+    const waveSpeed = mul(time, uSpeed, 2.0)
+    const wx = rx.add(sin(ry.mul(5.0).add(waveSpeed)).div(30.0))
+    const wy = ry.add(sin(wx.mul(7.5).add(waveSpeed)).div(15.0))
+
+    // -5° rotation for layer blend
+    const COS5 = Math.cos(-5 * Math.PI / 180)
+    const SIN5 = Math.sin(-5 * Math.PI / 180)
+    const rotated5x = wx.mul(COS5).sub(wy.mul(SIN5))
+
+    const layer1 = mix(colors.color1, colors.color2, smoothstep(-0.3, 0.2, rotated5x))
+    const layer2 = mix(colors.color3, colors.color4, smoothstep(-0.3, 0.2, rotated5x))
+
+    return mix(layer1, layer2, smoothstep(0.5, -0.3, wy)).mul(uIntensity)
+  })()
+}
+
+export function createThemeLavaLampColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.2)
+    const mouseOff = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength),
+      mul(sub(uMouseY, 0.5), uMouseStrength),
+    )
+    const uvCoord = add(sub(uv(), 0.5), mouseOff)
+
+    // 4 blobs anchored to quadrants, oscillation wide enough to cross center and intersect
+    const b1 = vec2(sin(mul(t, 0.9)).mul(0.22).sub(0.20), sin(mul(t, 0.7)).mul(0.22).sub(0.18))
+    const b2 = vec2(sin(mul(t, 0.8).add(2.1)).mul(0.22).add(0.20), sin(mul(t, 1.0).add(1.5)).mul(0.22).sub(0.18))
+    const b3 = vec2(sin(mul(t, 0.6).add(4.2)).mul(0.22).sub(0.20), sin(mul(t, 0.9).add(3.1)).mul(0.22).add(0.18))
+    const b4 = vec2(sin(mul(t, 1.1).add(1.0)).mul(0.22).add(0.20), sin(mul(t, 0.5).add(2.8)).mul(0.22).add(0.18))
+
+    // Per-blob breathing k: oscillates between -3.5 (large) and -6.5 (tight)
+    const k1 = sin(mul(t, 0.4)).mul(1.5).sub(5.0)
+    const k2 = sin(add(mul(t, 0.35), 2.1)).mul(1.5).sub(5.0)
+    const k3 = sin(add(mul(t, 0.45), 4.2)).mul(1.5).sub(5.0)
+    const k4 = sin(add(mul(t, 0.3), 1.0)).mul(1.5).sub(5.0)
+
+    const w1 = exp(length(sub(uvCoord, b1)).mul(k1))
+    const w2 = exp(length(sub(uvCoord, b2)).mul(k2))
+    const w3 = exp(length(sub(uvCoord, b3)).mul(k3))
+    const w4 = exp(length(sub(uvCoord, b4)).mul(k4))
+    const wTotal = add(w1, w2, w3, w4)
+
+    // Weighted colour blend
+    const colorNode = add(
+      mul(colors.color1, w1),
+      mul(colors.color2, w2),
+      mul(colors.color3, w3),
+      mul(colors.color4, w4),
+    ).div(wTotal.add(0.001))
+
+    // Darken space between blobs
+    const blobStrength = smoothstep(0.05, 0.9, wTotal)
+    const bg = mul(mix(colors.color1, colors.color2, 0.3), 0.15)
+    return mix(bg, colorNode, blobStrength).mul(uIntensity)
+  })()
+}
+
+export function createThemeBubbleColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.06)
+    const mouseOff = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength),
+      mul(sub(uMouseY, 0.5), uMouseStrength),
+    )
+    const uvCoord = add(uv(), mouseOff)
+
+    const n1 = simplexNoise3d(vec3(uvCoord.x.mul(1.5), uvCoord.y.mul(1.5), t)).mul(0.5).add(0.5)
+    const n2 = simplexNoise3d(vec3(
+      uvCoord.x.mul(2.5).add(1.3), uvCoord.y.mul(2.5).add(0.7), t.mul(0.8),
+    )).mul(0.5).add(0.5)
+
+    const blend1 = mix(colors.color1, colors.color2, smoothstep(0.3, 0.7, n1))
+    const blend2 = mix(colors.color3, colors.color4, smoothstep(0.3, 0.7, n2))
+    return mix(blend1, blend2, smoothstep(0.35, 0.65, n2)).mul(uIntensity)
+  })()
+}
+
+export function createThemePlasmaColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.03)
+    const mouseOff = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength, 0.2),
+      mul(sub(uMouseY, 0.5), uMouseStrength, 0.2),
+    )
+    const uvMut = add(sub(uv(), 0.5).mul(1.2), mouseOff).toVar()
+
+    const h = simplexNoise3d(vec3(uvMut.x.mul(2.0), uvMut.y.mul(2.0), t)).toVar()
+
+    // Unrolled distortion loop (n = 1..4)
+    for (let n = 1; n < 5; n++) {
+      const i = float(n)
+      uvMut.subAssign(vec2(
+        float(0.7).div(i).mul(sin(i.mul(uvMut.y).add(i).add(t.mul(1.5)).add(h.mul(i)))),
+        float(0.4).div(i).mul(sin(uvMut.x.add(4.0).sub(i).add(h).add(t.mul(1.5)).add(i.mul(0.3)))),
+      ))
+    }
+
+    // Final UV shift
+    uvMut.subAssign(vec2(
+      float(1.2).mul(sin(uvMut.x.add(t).add(h))),
+      float(0.4).mul(sin(uvMut.y.add(t).add(h.mul(0.3)))),
+    ))
+
+    const cx = sin(uvMut.x.mul(2.0)).mul(0.5).add(0.5)
+    const cxy = sin(uvMut.x.add(uvMut.y).mul(1.5)).mul(0.5).add(0.5)
+    const cy = sin(uvMut.y.mul(2.0)).mul(0.5).add(0.5)
+
+    const t12 = mix(colors.color1, colors.color2, cx)
+    const t34 = mix(colors.color3, colors.color4, cy)
+    const vivid = mix(t12, t34, cxy)
+    // Mix against near-black base so black/gray reads through between colour bands
+    return mix(vec3(0.03, 0.03, 0.03), vivid, float(0.65)).mul(uIntensity)
+  })()
+}
+
 export function createOceanColorNode(uniforms: AmbientUniforms): any {
   const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
 

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

@@ -24,19 +24,28 @@ export function useThemeColors() {
     }
   }
 
+  function applyColors() {
+    const isDark = colorMode.value === 'dark'
+    const primary = cssVarToHex('--ui-color-primary-500')
+    // CSS vars not ready yet (returns fallback) — retry next frame
+    if (primary === '#888888') {
+      requestAnimationFrame(applyColors)
+      return
+    }
+    primaryHex.value      = primary
+    secondaryHex.value    = isDark ? cssVarToHex('--ui-color-neutral-700')   : cssVarToHex('--ui-color-secondary-500')
+    primaryLightHex.value = isDark ? cssVarToHex('--ui-color-neutral-900')   : cssVarToHex('--ui-color-primary-300')
+    infoHex.value         = isDark ? cssVarToHex('--ui-color-secondary-500') : cssVarToHex('--ui-color-neutral-300')
+  }
+
   function refresh() {
-    nextTick(() => {
-      const isDark = colorMode.value === 'dark'
-      primaryHex.value      = cssVarToHex(isDark ? '--ui-color-primary-500'   : '--ui-color-primary-600')
-      secondaryHex.value    = cssVarToHex(isDark ? '--ui-color-secondary-500' : '--ui-color-secondary-700')
-      primaryLightHex.value = cssVarToHex(isDark ? '--ui-color-primary-300'   : '--ui-color-primary-400')
-      infoHex.value         = cssVarToHex(isDark ? '--ui-color-info-500'      : '--ui-color-info-600')
-    })
+    nextTick(applyColors)
   }
 
   if (import.meta.client) {
     watch(activeAccent, refresh, { immediate: true })
     watch(() => colorMode.value, refresh)
+    onMounted(applyColors)
   }
 
   return { primaryHex, secondaryHex, infoHex, primaryLightHex, clearColor, refresh }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",
@@ -159,6 +159,9 @@
   "dependencies": {
     "skills": "^1.4.3"
   },
+  "engines": {
+    "node": ">=18 <21"
+  },
   "scripts": {
     "dev": "pnpm -F playground dev",
     "dev:core": "PLAYGROUND_LAYERS=core pnpm -F playground dev",
@@ -197,6 +200,7 @@
     "layer:rebuild:ui": "pnpm build:ui && pnpm layer:generate:ui && pnpm layer:ui",
     "layer:rebuild:layout": "pnpm build:layout && pnpm layer:generate:layout && pnpm layer:layout",
     "layer:rebuild:motion": "pnpm build:motion && pnpm layer:generate:motion && pnpm layer:motion",
-    "browserlist": "npx update-browserslist-db@latest"
+    "browserlist": "npx update-browserslist-db@latest",
+    "deploy": "turbo run build --filter playground"
   }
 }