kmcom-nuxt-layers 1.1.4 → 1.1.6

package/layers/layout/app/assets/css/layout/grids.css

@@ -48,16 +48,12 @@
 
   /* Tablet: 12 columns */
   @media (width >= 48rem) {
-    :root {
-      --grid-cols: 12;
-    }
+    --grid-cols: 12;
   }
 
   /* Desktop: 18 columns */
   @media (width >= 80rem) {
-    :root {
-      --grid-cols: 18;
-    }
+    --grid-cols: 18;
   }
 }
 

package/layers/layout/app/components/Layout/Grid/Item.vue

@@ -94,17 +94,27 @@ const getDefaultValue = <T,>(value: T | ResponsiveValue<T> | undefined, defaultV
   return value as T
 }
 
+const getResponsiveValue = <T,>(
+  value: T | ResponsiveValue<T> | undefined,
+  breakpoint: 'md' | 'lg',
+): T | undefined => {
+  if (value === undefined) return undefined
+  if (typeof value === 'object' && value !== null && 'default' in value) {
+    return value[breakpoint]
+  }
+  return undefined
+}
+
 const style = computed(() => {
   const styles: Record<string, string> = {}
 
-  // Grid placement - use computed merged values
   const colStartVal = getDefaultValue(colStart.value, undefined)
   const colSpanVal = getDefaultValue(colSpan.value, 1)
   const rowStartVal = getDefaultValue(rowStart.value, undefined)
   const rowSpanVal = getDefaultValue(rowSpan.value, 1)
 
   if (bleed) {
-    // Bleed overrides column positioning
+    // Bleed is non-responsive — keep as direct inline style
     if (bleed === 'both') {
       styles.gridColumn = '1 / -1'
     } else if (bleed === 'left') {
@@ -112,19 +122,40 @@ const style = computed(() => {
     } else if (bleed === 'right') {
       styles.gridColumn = `${colStartVal ?? 'auto'} / -1`
     }
+    styles.gridRow = `${rowStartVal ?? 'auto'} / span ${rowSpanVal}`
   } else {
-    styles.gridColumn = `${colStartVal ?? 'auto'} / span ${colSpanVal}`
+    // Set CSS custom properties instead of grid-column/grid-row directly.
+    // The <style> block below reads these vars and applies them at each breakpoint,
+    // which correctly cascades without inline-style specificity conflicts.
+    styles['--_cs'] = String(colStartVal ?? 'auto')
+    styles['--_ce'] = String(colSpanVal)
+    styles['--_rs'] = String(rowStartVal ?? 'auto')
+    styles['--_re'] = String(rowSpanVal)
+
+    const mdColStart = getResponsiveValue(colStart.value, 'md')
+    const lgColStart = getResponsiveValue(colStart.value, 'lg')
+    const mdColSpan = getResponsiveValue(colSpan.value, 'md')
+    const lgColSpan = getResponsiveValue(colSpan.value, 'lg')
+    const mdRowStart = getResponsiveValue(rowStart.value, 'md')
+    const lgRowStart = getResponsiveValue(rowStart.value, 'lg')
+    const mdRowSpan = getResponsiveValue(rowSpan.value, 'md')
+    const lgRowSpan = getResponsiveValue(rowSpan.value, 'lg')
+
+    if (mdColStart !== undefined) styles['--_md-cs'] = String(mdColStart)
+    if (lgColStart !== undefined) styles['--_lg-cs'] = String(lgColStart)
+    if (mdColSpan !== undefined) styles['--_md-ce'] = String(mdColSpan)
+    if (lgColSpan !== undefined) styles['--_lg-ce'] = String(lgColSpan)
+    if (mdRowStart !== undefined) styles['--_md-rs'] = String(mdRowStart)
+    if (lgRowStart !== undefined) styles['--_lg-rs'] = String(lgRowStart)
+    if (mdRowSpan !== undefined) styles['--_md-re'] = String(mdRowSpan)
+    if (lgRowSpan !== undefined) styles['--_lg-re'] = String(lgRowSpan)
   }
 
-  styles.gridRow = `${rowStartVal ?? 'auto'} / span ${rowSpanVal}`
-
-  // Content alignment - make this element a grid container to center its children
+  // Content alignment
   if (align || justify) {
     styles.display = 'grid'
     styles.width = '100%'
     styles.height = '100%'
-    // Use place-items to control how children fill the cell
-    // align controls vertical, justify controls horizontal
     styles.placeItems = `${align ?? 'stretch'} ${justify ?? 'stretch'}`
   }
 
@@ -135,36 +166,9 @@ const style = computed(() => {
   return styles
 })
 
-const getResponsiveClasses = <T,>(
-  value: T | ResponsiveValue<T> | undefined,
-  classGenerator: (val: T) => string
-): string[] => {
-  if (value === undefined) return []
-  if (typeof value === 'object' && value !== null && 'default' in value) {
-    const classes: string[] = []
-    if (value.md !== undefined) classes.push(`md:${classGenerator(value.md)}`)
-    if (value.lg !== undefined) classes.push(`lg:${classGenerator(value.lg)}`)
-    return classes
-  }
-  return []
-}
-
 const classes = computed(() => {
-  const classList: string[] = ['@container', '@container/item']
-
-  // Responsive column start - use merged values
-  classList.push(...getResponsiveClasses(colStart.value, (val) => `col-start-${val}`))
+  const classList: string[] = ['gi-placed', '@container', '@container/item']
 
-  // Responsive column span
-  classList.push(...getResponsiveClasses(colSpan.value, (val) => `col-span-${val}`))
-
-  // Responsive row start
-  classList.push(...getResponsiveClasses(rowStart.value, (val) => `row-start-${val}`))
-
-  // Responsive row span
-  classList.push(...getResponsiveClasses(rowSpan.value, (val) => `row-span-${val}`))
-
-  // Aspect ratio
   if (aspect) {
     classList.push(aspectClasses[aspect])
   }
@@ -178,3 +182,24 @@ const classes = computed(() => {
     <slot />
   </component>
 </template>
+
+<style>
+.gi-placed {
+  grid-column: var(--_cs, auto) / span var(--_ce, 1);
+  grid-row: var(--_rs, auto) / span var(--_re, 1);
+}
+
+@media (width >= 48rem) {
+  .gi-placed {
+    grid-column: var(--_md-cs, var(--_cs, auto)) / span var(--_md-ce, var(--_ce, 1));
+    grid-row: var(--_md-rs, var(--_rs, auto)) / span var(--_md-re, var(--_re, 1));
+  }
+}
+
+@media (width >= 80rem) {
+  .gi-placed {
+    grid-column: var(--_lg-cs, var(--_md-cs, var(--_cs, auto))) / span var(--_lg-ce, var(--_md-ce, var(--_ce, 1)));
+    grid-row: var(--_lg-rs, var(--_md-rs, var(--_rs, auto))) / span var(--_lg-re, var(--_md-re, var(--_re, 1)));
+  }
+}
+</style>

package/layers/shader/app/components/Node/Color.client.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import { Color } from 'three'
+import { uniform, vec3 } from 'three/tsl'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    color?: string
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>(),
+  {
+    id: 'color',
+    color: '#ffffff',
+    order: 0,
+    blend: 'normal',
+    opacity: 1.0,
+  }
+)
+
+const graph = useShaderGraphContext()
+
+// Create uniform once
+const colorValue = new Color(props.color)
+const colorNode = uniform(colorValue)
+
+// Build TSL node once (references uniform by pointer)
+const node = vec3(colorNode)
+
+// Register in graph
+graph.register(props.id, node, props.order, props.blend, props.opacity)
+
+// Watch props to update uniform value (no recompilation)
+watch(
+  () => props.color,
+  (hex) => {
+    colorValue.set(hex)
+    colorNode.value = colorValue
+  }
+)
+
+onUnmounted(() => {
+  graph.unregister(props.id)
+})
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Node/Fresnel.client.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  cameraPosition,
+  normalView,
+  positionWorld,
+  pow,
+  sub,
+  uniform,
+  vec3,
+} from 'three/tsl'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    power?: number
+    color?: string
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>(),
+  {
+    id: 'fresnel',
+    power: 2.0,
+    color: '#ffffff',
+    order: 0,
+    blend: 'add',
+    opacity: 1.0,
+  }
+)
+
+const graph = useShaderGraphContext()
+
+// Create uniforms once
+const uPower = uniform(props.power)
+
+// Build fresnel node
+const viewDirection = positionWorld.sub(cameraPosition).normalize()
+const fresnelFactor = pow(sub(1.0, normalView.dot(viewDirection.negate()).abs()), uPower)
+const node = vec3(fresnelFactor, fresnelFactor, fresnelFactor)
+
+graph.register(props.id, node, props.order, props.blend, props.opacity)
+
+watch(() => props.power, (v) => { uPower.value = v })
+
+onUnmounted(() => {
+  graph.unregister(props.id)
+})
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Node/Gradient.client.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import { add, mul, time, uniform, uv } from 'three/tsl'
+import { cosinePalette } from '#layers/shader/app/shaders/common/palette'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    /** Cosine palette type or 'linear' for UV-based gradient */
+    type?: 'rainbow' | 'sunset' | 'ocean' | 'fire' | 'ice' | 'neon' | 'pastel' | 'custom'
+    speed?: number
+    /** Custom brightness for cosine palette [r,g,b] */
+    brightness?: [number, number, number]
+    /** Custom contrast for cosine palette [r,g,b] */
+    contrast?: [number, number, number]
+    /** Custom frequency for cosine palette [r,g,b] */
+    frequency?: [number, number, number]
+    /** Custom phase for cosine palette [r,g,b] */
+    phase?: [number, number, number]
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>(),
+  {
+    id: 'gradient',
+    type: 'rainbow',
+    speed: 0.1,
+    brightness: () => [0.5, 0.5, 0.5],
+    contrast: () => [0.5, 0.5, 0.5],
+    frequency: () => [1.0, 1.0, 1.0],
+    phase: () => [0.0, 0.33, 0.67],
+    order: 0,
+    blend: 'normal',
+    opacity: 1.0,
+  }
+)
+
+const graph = useShaderGraphContext()
+
+const uSpeed = uniform(props.speed)
+
+// Palette presets
+const palettePresets: Record<string, [[number, number, number], [number, number, number], [number, number, number], [number, number, number]]> = {
+  rainbow: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.0, 0.33, 0.67]],
+  sunset: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 0.7, 0.4], [0.0, 0.15, 0.2]],
+  ocean: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.3, 0.2, 0.2]],
+  fire: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 0.5, 0.0], [0.0, 0.1, 0.2]],
+  ice: [[0.5, 0.5, 0.5], [0.4, 0.4, 0.5], [0.0, 0.1, 0.2], [0.0, 0.0, 0.0]],
+  neon: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [2.0, 1.0, 0.0], [0.5, 0.2, 0.25]],
+  pastel: [[0.8, 0.8, 0.8], [0.2, 0.2, 0.2], [1.0, 1.0, 1.0], [0.0, 0.33, 0.67]],
+}
+
+function buildNode() {
+  const uvCoord = uv()
+  const t = add(uvCoord.x, mul(time, uSpeed))
+
+  const preset = palettePresets[props.type]
+  if (preset) {
+    return cosinePalette(t, preset[0], preset[1], preset[2], preset[3])
+  }
+
+  // Custom
+  return cosinePalette(t, props.brightness, props.contrast, props.frequency, props.phase)
+}
+
+let node = buildNode()
+graph.register(props.id, node, props.order, props.blend, props.opacity)
+
+watch(() => props.speed, (v) => { uSpeed.value = v })
+
+// Rebuild on type or custom param changes
+watch(
+  () => [props.type, props.brightness, props.contrast, props.frequency, props.phase] as const,
+  () => {
+    node = buildNode()
+    graph.update(props.id, node)
+  }
+)
+
+onUnmounted(() => {
+  graph.unregister(props.id)
+})
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Node/Mix.client.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+/**
+ * Mix node -- combines child nodes registered in a nested shader graph.
+ * Children register into this component's own sub-graph, which is then
+ * composed and registered as a single node in the parent graph.
+ */
+import { vec3 } from 'three/tsl'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>(),
+  {
+    id: 'mix',
+    order: 0,
+    blend: 'normal',
+    opacity: 1.0,
+  }
+)
+
+const parentGraph = useShaderGraphContext()
+
+// Create a sub-graph for children
+const subGraph = useShaderGraph()
+
+// Watch sub-graph and register its composite into parent
+watch(
+  subGraph.version,
+  () => {
+    const node = subGraph.finalNode.value || vec3(0, 0, 0)
+    if (parentGraph) {
+      // Re-register with updated composite node
+      parentGraph.register(props.id, node, props.order, props.blend, props.opacity)
+    }
+  },
+  { immediate: true }
+)
+
+onUnmounted(() => {
+  parentGraph.unregister(props.id)
+})
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Node/Noise.client.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import { add, mul, time, uniform, uv, vec2, vec3 } from 'three/tsl'
+import {
+  simplexNoise2D,
+  fbm2D,
+  ridgedFbm2d,
+  voronoi2D,
+  fbm3dSimplex,
+} from '#layers/shader/app/shaders/common/noise'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    type?: 'simplex' | 'fbm' | 'voronoi' | 'ridged' | 'fbm3d'
+    scale?: number
+    speed?: number
+    octaves?: number
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>(),
+  {
+    id: 'noise',
+    type: 'simplex',
+    scale: 3.0,
+    speed: 0.2,
+    octaves: 4,
+    order: 0,
+    blend: 'normal',
+    opacity: 1.0,
+  }
+)
+
+const graph = useShaderGraphContext()
+
+// Create uniforms once
+const uScale = uniform(props.scale)
+const uSpeed = uniform(props.speed)
+
+// Build TSL node
+function buildNode() {
+  const uvCoord = uv()
+  const t = mul(time, uSpeed)
+  const scaledUV = mul(uvCoord, uScale)
+  const animatedUV = add(scaledUV, vec2(t, mul(t, 0.3)))
+
+  let noiseValue
+
+  switch (props.type) {
+    case 'fbm':
+      noiseValue = fbm2D(animatedUV, { octaves: props.octaves, frequency: 1.0 })
+        .mul(0.5)
+        .add(0.5)
+      break
+    case 'voronoi': {
+      const { distance } = voronoi2D(animatedUV, 1.0)
+      noiseValue = distance
+      break
+    }
+    case 'ridged':
+      noiseValue = ridgedFbm2d(animatedUV, { octaves: props.octaves, frequency: 1.0 })
+      break
+    case 'fbm3d':
+      noiseValue = fbm3dSimplex(vec3(scaledUV, t), { octaves: props.octaves })
+        .mul(0.5)
+        .add(0.5)
+      break
+    case 'simplex':
+    default:
+      noiseValue = simplexNoise2D(animatedUV).mul(0.5).add(0.5)
+      break
+  }
+
+  return vec3(noiseValue, noiseValue, noiseValue)
+}
+
+const node = buildNode()
+graph.register(props.id, node, props.order, props.blend, props.opacity)
+
+// Watch uniform-driven props (no recompilation)
+watch(() => props.scale, (v) => { uScale.value = v })
+watch(() => props.speed, (v) => { uSpeed.value = v })
+
+// Watch topology-changing props (requires graph update)
+watch(
+  () => [props.type, props.octaves] as const,
+  () => {
+    const newNode = buildNode()
+    graph.update(props.id, newNode)
+  }
+)
+
+onUnmounted(() => {
+  graph.unregister(props.id)
+})
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import { uniform } from 'three/tsl'
+import {
+  createAmbientUniforms,
+  createAuroraColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+// Create uniforms once
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+
+// Build the TSL color node (references uniforms by pointer)
+const colorNode = createAuroraColorNode(uniforms)
+
+// Wire mouse from runtime if available
+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 -- mouse can be set externally
+}
+
+// Watch props to update uniforms (no recompilation)
+watch(() => props.speed, (v) => { uniforms.speed.value = v })
+watch(() => props.intensity, (v) => { uniforms.intensity.value = v })
+watch(
+  () => props.mouseInteraction,
+  (v) => { uniforms.mouseStrength.value = v ? 0.5 : 0 }
+)
+
+// Emit the node for parent (ShaderHost) to consume
+emit('node', colorNode)
+
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createFlowColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+
+const colorNode = createFlowColorNode(uniforms)
+
+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
+}
+
+watch(() => props.speed, (v) => { uniforms.speed.value = v })
+watch(() => props.intensity, (v) => { uniforms.intensity.value = v })
+watch(
+  () => props.mouseInteraction,
+  (v) => { uniforms.mouseStrength.value = v ? 0.5 : 0 }
+)
+
+emit('node', colorNode)
+
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>