kmcom-nuxt-layers 2.6.2 → 2.7.0

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
   import { Color, DoubleSide } from 'three'
   import { mix, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
   import type { TSLNode } from '../../shaders/types'
   import { fbm, simplexNoise2D } from '../../utils/tsl/noise'
-  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     scale = 3,
@@ -52,8 +52,16 @@
   watchUniformProp(() => mouseX, mouseXUniform)
   watchUniformProp(() => mouseY, mouseYUniform)
   watchUniformProp(() => mouseStrength, mouseStrengthUniform)
-  watchUniformProp(() => baseColor, baseColorUniform, (val) => new Color(val))
-  watchUniformProp(() => peakColor, peakColorUniform, (val) => new Color(val))
+  watchUniformProp(
+    () => baseColor,
+    baseColorUniform,
+    (val) => new Color(val)
+  )
+  watchUniformProp(
+    () => peakColor,
+    peakColorUniform,
+    (val) => new Color(val)
+  )
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()

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

@@ -34,7 +34,6 @@ import type { ColorUniform, FloatUniform, TSLNode, Vec3Uniform } from '../shader
 // Private helpers
 // ============================================
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function buildFlowWarpedUV(
   uvCoord: any,
   t: any,

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

@@ -169,7 +169,11 @@ export function blendPinLight(base: TSLNode, blend: TSLNode): TSLNode {
  */
 export function blendWithOpacity(
   base: TSLNode,
-  ...args: [blend: TSLNode, blendFn: (a: TSLNode, b: TSLNode) => TSLNode, opacity?: TSLNode | number]
+  ...args: [
+    blend: TSLNode,
+    blendFn: (a: TSLNode, b: TSLNode) => TSLNode,
+    opacity?: TSLNode | number,
+  ]
 ): TSLNode {
   const [blend, blendFn, opacity = 1] = args
   const op = toScalarNode(opacity)

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

@@ -151,7 +151,11 @@ export function interlace(
  */
 export function vignette(
   uv: TSLNode,
-  ...args: [intensity?: TSLNode | number, smoothness?: TSLNode | number, roundness?: TSLNode | number]
+  ...args: [
+    intensity?: TSLNode | number,
+    smoothness?: TSLNode | number,
+    roundness?: TSLNode | number,
+  ]
 ): TSLNode {
   const [intensity = 0.5, smoothness = 0.5, roundness = 1] = args
   const int = toScalarNode(intensity)

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

@@ -126,12 +126,7 @@ export type LightingOptions = {
  */
 export function phongLighting(
   viewDir: TSLNode,
-  ...args: [
-    normal: TSLNode,
-    lightDir: TSLNode,
-    lightColor: TSLNode,
-    options?: LightingOptions,
-  ]
+  ...args: [normal: TSLNode, lightDir: TSLNode, lightColor: TSLNode, options?: LightingOptions]
 ): TSLNode {
   const [normal, lightDir, lightColor, options = {}] = args
   const { ambient = 0.1, diffuseStrength = 1.0, specularStrength = 0.5, shininess = 32 } = options

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

@@ -149,7 +149,9 @@ export function simplexNoise2D(v: TSLNode): TSLNode {
   const ox = floor(x.add(0.5))
   const a0 = x.sub(ox)
 
-  const mMod: TSLNode = m4.mul(float(1.79284291400159).sub(a0.mul(a0).add(h.mul(h)).mul(0.85373472095314)))
+  const mMod: TSLNode = m4.mul(
+    float(1.79284291400159).sub(a0.mul(a0).add(h.mul(h)).mul(0.85373472095314))
+  )
 
   const gx: TSLNode = a0.x.mul(x0.x).add(h.x.mul(x0.y))
   const gy: TSLNode = a0.y.mul(x12_mod.x).add(h.y.mul(x12_mod.y))

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

@@ -18,8 +18,8 @@ import {
 } from 'three/tsl'
 
 import type { TSLNode } from '../types'
-import { fbm3dSimplex, simplexNoise3d } from './noise'
 import { toScalarNode, toVec2Node } from './nodes'
+import { fbm3dSimplex, simplexNoise3d } from './noise'
 
 // ============================================
 // Canvas Weave Pattern

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

@@ -338,7 +338,11 @@ export function radialLines(
  */
 export function concentricCircles(
   uv: TSLNode,
-  ...args: [center?: TSLNode | [number, number], frequency?: TSLNode | number, thickness?: TSLNode | number]
+  ...args: [
+    center?: TSLNode | [number, number],
+    frequency?: TSLNode | number,
+    thickness?: TSLNode | number,
+  ]
 ): TSLNode {
   const [center = [0.5, 0.5], frequency = 10, thickness = 0.5] = args
   const c = toVec2Node(center)

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

@@ -2,7 +2,20 @@
  * Modular TSL UV Manipulation Utilities
  * Provides composable UV transformation functions
  */
-import { abs, atan, cos, float, floor, fract, length, mix, pow, sin, smoothstep, vec2 } from 'three/tsl'
+import {
+  abs,
+  atan,
+  cos,
+  float,
+  floor,
+  fract,
+  length,
+  mix,
+  pow,
+  sin,
+  smoothstep,
+  vec2,
+} from 'three/tsl'
 
 import type { TSLNode } from '../types'
 import { toScalarNode, toVec2Node } from './nodes'
@@ -179,7 +192,11 @@ export function rippleUV(
  */
 export function swirlUV(
   uv: TSLNode,
-  ...args: [center?: TSLNode | [number, number], strength?: TSLNode | number, radius?: TSLNode | number]
+  ...args: [
+    center?: TSLNode | [number, number],
+    strength?: TSLNode | number,
+    radius?: TSLNode | number,
+  ]
 ): TSLNode {
   const [center = [0.5, 0.5], strength = 1, radius = 0.5] = args
   const c = toVec2Node(center)

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

@@ -6,8 +6,6 @@ import { BackSide, DoubleSide, FrontSide, type Side } from 'three'
 import { vec4 } from 'three/tsl'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 
-import type { TSLNode } from './types'
-
 import {
   aurora,
   createAuroraUniforms,
@@ -44,7 +42,7 @@ import {
   type StripeGradientOptions,
   type StripeGradientUniforms,
 } from './layers/stripe'
-
+import type { TSLNode } from './types'
 
 // ============================================
 // Types
@@ -112,19 +110,26 @@ function createShaderUniforms<T extends ShaderType>(
 ): ShaderUniforms<T> {
   switch (type) {
     case 'stripe':
-      return createStripeGradientUniforms(shaderOptions as StripeGradientOptions) as ShaderUniforms<T>
+      return createStripeGradientUniforms(
+        shaderOptions as StripeGradientOptions
+      ) as ShaderUniforms<T>
     case 'meshGradient':
       return createMeshGradientUniforms(shaderOptions as MeshGradientOptions) as ShaderUniforms<T>
     case 'aurora':
       return createAuroraUniforms(shaderOptions as AuroraOptions) as ShaderUniforms<T>
     case 'shaderGradient':
-      return createShaderGradientUniforms(shaderOptions as ShaderGradientOptions) as ShaderUniforms<T>
+      return createShaderGradientUniforms(
+        shaderOptions as ShaderGradientOptions
+      ) as ShaderUniforms<T>
     case 'paperShading':
       return createPaperShadingUniforms(shaderOptions as PaperShadingOptions) as ShaderUniforms<T>
   }
 }
 
-function createShaderColorNode<T extends ShaderType>(type: T, uniforms: ShaderUniforms<T>): TSLNode {
+function createShaderColorNode<T extends ShaderType>(
+  type: T,
+  uniforms: ShaderUniforms<T>
+): TSLNode {
   switch (type) {
     case 'stripe':
       return stripeGradient(uniforms as StripeGradientUniforms)

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

@@ -75,18 +75,8 @@ export type ShaderGradientUniforms = {
 export function createShaderGradientUniforms(
   options: ShaderGradientOptions = {}
 ): ShaderGradientUniforms {
-  const {
-    color1,
-    color2,
-    color3,
-    speed,
-    morphIntensity,
-    grain,
-    lightX,
-    lightY,
-    brightness,
-    zoom,
-  } = { ...DEFAULT_SHADER_GRADIENT_OPTIONS, ...options }
+  const { color1, color2, color3, speed, morphIntensity, grain, lightX, lightY, brightness, zoom } =
+    { ...DEFAULT_SHADER_GRADIENT_OPTIONS, ...options }
 
   return {
     color1: uniform(new Color(color1)),

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

@@ -6,8 +6,8 @@
 // TSL nodes are complex internally, so we use a simple type alias
 // This provides flexibility while maintaining code readability
 
-import type { UniformNode } from 'three/webgpu'
 import type { Color, Vector3 } from 'three'
+import type { UniformNode } from 'three/webgpu'
 
 export type { TSLNode } from '../types/tsl'
 

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

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

@@ -30,43 +30,43 @@ export const loopTime = Fn(([time, duration]: [TSLNode, TSLNode]) => {
  * Bounce easing (standalone so `easing` does not reference itself)
  */
 const easeOutBounceFn = Fn(([t]: [TSLNode]) => {
-    const n1 = 7.5625
-    const d1 = 2.75
-
-    const c1 = t.lessThan(1.0 / d1).select(t.mul(t).mul(n1), float(0.0))
-    const c2 = t
-      .greaterThanEqual(1.0 / d1)
-      .mul(t.lessThan(2.0 / d1))
-      .select(
-        t
-          .sub(1.5 / d1)
-          .mul(t.sub(1.5 / d1))
-          .mul(n1)
-          .add(0.75),
-        float(0.0)
-      )
-    const c3 = t
-      .greaterThanEqual(2.0 / d1)
-      .mul(t.lessThan(2.5 / d1))
-      .select(
-        t
-          .sub(2.25 / d1)
-          .mul(t.sub(2.25 / d1))
-          .mul(n1)
-          .add(0.9375),
-        float(0.0)
-      )
-    const c4 = t.greaterThanEqual(2.5 / d1).select(
+  const n1 = 7.5625
+  const d1 = 2.75
+
+  const c1 = t.lessThan(1.0 / d1).select(t.mul(t).mul(n1), float(0.0))
+  const c2 = t
+    .greaterThanEqual(1.0 / d1)
+    .mul(t.lessThan(2.0 / d1))
+    .select(
       t
-        .sub(2.625 / d1)
-        .mul(t.sub(2.625 / d1))
+        .sub(1.5 / d1)
+        .mul(t.sub(1.5 / d1))
         .mul(n1)
-        .add(0.984375),
+        .add(0.75),
       float(0.0)
     )
-
-    return c1.add(c2).add(c3).add(c4)
-  })
+  const c3 = t
+    .greaterThanEqual(2.0 / d1)
+    .mul(t.lessThan(2.5 / d1))
+    .select(
+      t
+        .sub(2.25 / d1)
+        .mul(t.sub(2.25 / d1))
+        .mul(n1)
+        .add(0.9375),
+      float(0.0)
+    )
+  const c4 = t.greaterThanEqual(2.5 / d1).select(
+    t
+      .sub(2.625 / d1)
+      .mul(t.sub(2.625 / d1))
+      .mul(n1)
+      .add(0.984375),
+    float(0.0)
+  )
+
+  return c1.add(c2).add(c3).add(c4)
+})
 
 /**
  * Easing functions
@@ -85,9 +85,7 @@ export const easing = {
   easeOutCubic: Fn(([t]: [TSLNode]) => float(1.0).sub(pow(float(1.0).sub(t), 3.0))),
   easeInOutCubic: Fn(([t]: [TSLNode]) => {
     const inv: TSLNode = float(-2.0).mul(t).add(2.0)
-    return t
-      .lessThan(0.5)
-      .select(t.mul(t).mul(t).mul(4.0), float(1.0).sub(inv.pow(3.0).div(2.0)))
+    return t.lessThan(0.5).select(t.mul(t).mul(t).mul(4.0), float(1.0).sub(inv.pow(3.0).div(2.0)))
   }),
 
   // Quartic

package/layers/starter/app/components/StarterDesignSystem.vue

@@ -1,130 +1,130 @@
 <script setup lang="ts">
-useSeoMeta({
-  title: 'Design System — kmcom-nuxt-layers',
-  description:
-    'Comprehensive design system reference: typography, colors, layout grid, section components, motion components, and UI components.',
-})
-
-// Grid debug ref
-const gridDebug = ref<{ toggle: () => void } | null>(null)
-
-// Color tokens for demo
-const semanticColors = ['dimmed', 'muted', 'toned', 'default', 'highlighted', 'inverted'] as const
-const statusColors = ['info', 'success', 'warning', 'error'] as const
-const brandColors = ['primary', 'secondary', 'neutral'] as const
-
-// Typography weight demos
-const fontWeights = [
-  'font-thin',
-  'font-light',
-  'font-normal',
-  'font-medium',
-  'font-semibold',
-  'font-bold',
-  'font-black',
-] as const
-
-// Sample code for CodeBlock demo
-const sampleCode = `function useScreen() {
+  useSeoMeta({
+    title: 'Design System — kmcom-nuxt-layers',
+    description:
+      'Comprehensive design system reference: typography, colors, layout grid, section components, motion components, and UI components.',
+  })
+
+  // Grid debug ref
+  const gridDebug = useTemplateRef<{ toggle: () => void }>('gridDebug')
+
+  // Color tokens for demo
+  const semanticColors = ['dimmed', 'muted', 'toned', 'default', 'highlighted', 'inverted'] as const
+  const statusColors = ['info', 'success', 'warning', 'error'] as const
+  const brandColors = ['primary', 'secondary', 'neutral'] as const
+
+  // Typography weight demos
+  const fontWeights = [
+    'font-thin',
+    'font-light',
+    'font-normal',
+    'font-medium',
+    'font-semibold',
+    'font-bold',
+    'font-black',
+  ] as const
+
+  // Sample code for CodeBlock demo
+  const sampleCode = `function useScreen() {
   const breakpoints = useBreakpoints(breakpointsTailwind)
   const isMobile = breakpoints.smaller('md')
   const isDesktop = breakpoints.greaterOrEqual('lg')
   return { isMobile, isDesktop }
 }`
 
-// Code samples — kept as script variables to avoid the Vue HTML lexer treating
-// <!-- sequences inside {{ `` }} template literals as HTML comment nodes.
-const scrollProgressCodeSample = [
-  '<!-- Fixed top bar -->',
-  '<div class="fixed top-0 left-0 right-0 z-50">',
-  '  <MotionScrollProgress type="linear" :height="3" />',
-  '</div>',
-  '',
-  '<!-- Floating circular indicator -->',
-  '<div class="fixed bottom-6 right-6">',
-  '  <MotionScrollProgress type="circular" :size="56" :stroke-width="4" :show-percentage="false" />',
-  '</div>',
-].join('\n')
-
-const scrollStatsCodeSample = [
-  '<!-- Add during development only -->',
-  "<MotionScrollStats :show=\"['velocity', 'progress', 'scrollY']\" position=\"bottom-right\" />",
-].join('\n')
-
-const layoutPageCodeSample = [
-  '// Standard page with grid layout + header and footer',
-  'definePageMeta({',
-  "  layout: { name: 'grid', props: { showHeader: true, showFooter: true } },",
-  '})',
-  '',
-  '// No chrome — content-only',
-  "definePageMeta({ layout: 'grid' })",
-  '',
-  '// Full-bleed / animation page — opt out entirely',
-  'definePageMeta({ layout: false })',
-  '',
-  '// In the template:',
-  '// <LayoutPage title="About" description="Learn more." :show-header="true">',
-  '//   <LayoutSection>...</LayoutSection>',
-  '// </LayoutPage>',
-].join('\n')
-
-// Table of contents
-const tocItems = [
-  {
-    id: 'typography-headlines',
-    label: 'Typography — Headlines',
-    icon: 'i-lucide-heading',
-  },
-  {
-    id: 'typography-controls',
-    label: 'Typography — Controls',
-    icon: 'i-lucide-type',
-  },
-  {
-    id: 'typography-decorative',
-    label: 'Typography — Decorative',
-    icon: 'i-lucide-pen-tool',
-  },
-  {
-    id: 'typography-blocks',
-    label: 'Typography — Blocks',
-    icon: 'i-lucide-code',
-  },
-  { id: 'color-system', label: 'Color System', icon: 'i-lucide-palette' },
-  { id: 'layout-grid', label: 'Layout Grid', icon: 'i-lucide-grid-3x3' },
-  { id: 'layout-page', label: 'LayoutPage', icon: 'i-lucide-file' },
-  {
-    id: 'section-components',
-    label: 'Section Components',
-    icon: 'i-lucide-image',
-  },
-  {
-    id: 'motion-components',
-    label: 'Motion Components',
-    icon: 'i-lucide-sparkles',
-  },
-  {
-    id: 'links-group',
-    label: 'LinksGroup',
-    icon: 'i-lucide-mouse-pointer-click',
-  },
-  {
-    id: 'ui-components',
-    label: 'UI Components',
-    icon: 'i-lucide-mouse-pointer',
-  },
-]
-
-// Gallery items for section demo
-const galleryItems = [
-  { id: 1, title: 'Item 1', color: 'bg-blue-500' },
-  { id: 2, title: 'Item 2', color: 'bg-green-500' },
-  { id: 3, title: 'Item 3', color: 'bg-purple-500' },
-  { id: 4, title: 'Item 4', color: 'bg-orange-500' },
-  { id: 5, title: 'Item 5', color: 'bg-pink-500' },
-  { id: 6, title: 'Item 6', color: 'bg-cyan-500' },
-]
+  // Code samples — kept as script variables to avoid the Vue HTML lexer treating
+  // <!-- sequences inside {{ `` }} template literals as HTML comment nodes.
+  const scrollProgressCodeSample = [
+    '<!-- Fixed top bar -->',
+    '<div class="fixed top-0 left-0 right-0 z-50">',
+    '  <MotionScrollProgress type="linear" :height="3" />',
+    '</div>',
+    '',
+    '<!-- Floating circular indicator -->',
+    '<div class="fixed bottom-6 right-6">',
+    '  <MotionScrollProgress type="circular" :size="56" :stroke-width="4" :show-percentage="false" />',
+    '</div>',
+  ].join('\n')
+
+  const scrollStatsCodeSample = [
+    '<!-- Add during development only -->',
+    "<MotionScrollStats :show=\"['velocity', 'progress', 'scrollY']\" position=\"bottom-right\" />",
+  ].join('\n')
+
+  const layoutPageCodeSample = [
+    '// Standard page with grid layout + header and footer',
+    'definePageMeta({',
+    "  layout: { name: 'grid', props: { showHeader: true, showFooter: true } },",
+    '})',
+    '',
+    '// No chrome — content-only',
+    "definePageMeta({ layout: 'grid' })",
+    '',
+    '// Full-bleed / animation page — opt out entirely',
+    'definePageMeta({ layout: false })',
+    '',
+    '// In the template:',
+    '// <LayoutPage title="About" description="Learn more." :show-header="true">',
+    '//   <LayoutSection>...</LayoutSection>',
+    '// </LayoutPage>',
+  ].join('\n')
+
+  // Table of contents
+  const tocItems = [
+    {
+      id: 'typography-headlines',
+      label: 'Typography — Headlines',
+      icon: 'i-lucide-heading',
+    },
+    {
+      id: 'typography-controls',
+      label: 'Typography — Controls',
+      icon: 'i-lucide-type',
+    },
+    {
+      id: 'typography-decorative',
+      label: 'Typography — Decorative',
+      icon: 'i-lucide-pen-tool',
+    },
+    {
+      id: 'typography-blocks',
+      label: 'Typography — Blocks',
+      icon: 'i-lucide-code',
+    },
+    { id: 'color-system', label: 'Color System', icon: 'i-lucide-palette' },
+    { id: 'layout-grid', label: 'Layout Grid', icon: 'i-lucide-grid-3x3' },
+    { id: 'layout-page', label: 'LayoutPage', icon: 'i-lucide-file' },
+    {
+      id: 'section-components',
+      label: 'Section Components',
+      icon: 'i-lucide-image',
+    },
+    {
+      id: 'motion-components',
+      label: 'Motion Components',
+      icon: 'i-lucide-sparkles',
+    },
+    {
+      id: 'links-group',
+      label: 'LinksGroup',
+      icon: 'i-lucide-mouse-pointer-click',
+    },
+    {
+      id: 'ui-components',
+      label: 'UI Components',
+      icon: 'i-lucide-mouse-pointer',
+    },
+  ]
+
+  // Gallery items for section demo
+  const galleryItems = [
+    { id: 1, title: 'Item 1', color: 'bg-blue-500' },
+    { id: 2, title: 'Item 2', color: 'bg-green-500' },
+    { id: 3, title: 'Item 3', color: 'bg-purple-500' },
+    { id: 4, title: 'Item 4', color: 'bg-orange-500' },
+    { id: 5, title: 'Item 5', color: 'bg-pink-500' },
+    { id: 6, title: 'Item 6', color: 'bg-cyan-500' },
+  ]
 </script>
 
 <template>