kmcom-nuxt-layers 1.7.9 → 2.1.6

package/layers/animations/nuxt.config.ts

@@ -0,0 +1,17 @@
+export default defineNuxtConfig({
+  $meta: { name: 'animations' },
+
+  extends: ['../scroll'],
+
+  alias: {
+    '#layers/animations': import.meta.dirname,
+    '#layers/animations/types': `${import.meta.dirname}/app/types`,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/animations/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "kmcom-layer-animations",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts"
+}

package/layers/animations/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/canvas/app/components/ShaderCanvas.vue

@@ -0,0 +1,125 @@
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script setup lang="ts">
+  // @ts-nocheck - Three.js WebGPU types + TresJS renderer factory
+  import { TresCanvas } from '@tresjs/core'
+  import {
+    ACESFilmicToneMapping,
+    CineonToneMapping,
+    Color,
+    LinearToneMapping,
+    ReinhardToneMapping,
+    SRGBColorSpace,
+    type ToneMapping,
+  } from 'three'
+  import { WebGPURenderer } from 'three/webgpu'
+
+  const props = withDefaults(
+    defineProps<{
+      clearColor?: string
+      toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
+      outputColorSpace?: 'srgb' | 'linear'
+      shadows?: boolean
+      antialias?: boolean
+      alpha?: boolean
+      preserveDrawingBuffer?: boolean
+      powerPreference?: 'default' | 'high-performance' | 'low-power'
+      windowSize?: boolean
+      /** Use WebGPURenderer (required for node materials / TSL shaders) */
+      webgpu?: boolean
+    }>(),
+    {
+      clearColor: '#000000',
+      toneMapping: 'aces',
+      outputColorSpace: 'srgb',
+      shadows: false,
+      antialias: true,
+      alpha: false,
+      preserveDrawingBuffer: false,
+      powerPreference: 'high-performance',
+      windowSize: true,
+      webgpu: false,
+    }
+  )
+
+  const emit = defineEmits<{
+    ready: [context: any]
+  }>()
+
+  const config = useAppConfig()
+  const shaderConfig = (config.shader || {}) as {
+    toneMapping?: string
+    maxPixelRatio?: number
+  }
+
+  const toneMappingMap: Record<string, ToneMapping> = {
+    aces: ACESFilmicToneMapping,
+    reinhard: ReinhardToneMapping,
+    cineon: CineonToneMapping,
+    linear: LinearToneMapping,
+  }
+
+  const resolvedToneMapping = computed(() => {
+    const key = props.toneMapping || shaderConfig.toneMapping || 'aces'
+    return toneMappingMap[key] ?? ACESFilmicToneMapping
+  })
+
+  const resolvedColorSpace = computed(() => {
+    return props.outputColorSpace === 'srgb' ? SRGBColorSpace : 'srgb-linear'
+  })
+
+  const maxDpr = computed(() => {
+    const configDpr = shaderConfig.maxPixelRatio ?? 2
+    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)
+  }
+</script>
+
+<template>
+  <TresCanvas
+    :clear-color
+    :tone-mapping="resolvedToneMapping"
+    :output-color-space="resolvedColorSpace"
+    :shadows
+    :antialias
+    :alpha
+    :preserve-drawing-buffer
+    :power-preference
+    :window-size
+    :dpr="maxDpr"
+    :renderer="webgpuRendererFactory"
+    class="shader-canvas"
+    @ready="onReady"
+  >
+    <slot />
+  </TresCanvas>
+</template>
+
+<style scoped>
+  .shader-canvas {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/layers/{shader → canvas}/app/composables/useRendererCapabilities.ts

@@ -1,6 +1,14 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import {
+  QUALITY_PRESETS,
+  type QualityLevel,
+  type QualitySettings,
+  type RendererBackend,
+  type RendererCapabilities,
+} from '#layers/canvas/types/renderer'
 import type { WebGLRenderer } from 'three'
-import type { QualityLevel, QualitySettings, RendererBackend, RendererCapabilities } from '../types'
-import { QUALITY_PRESETS } from '../types'
 
 /**
  * Detect and expose renderer capabilities

package/layers/{shader → canvas}/app/composables/useShaderTime.ts

@@ -1,8 +1,8 @@
-/* eslint-disable no-restricted-imports */
-import { uniform } from 'three/tsl'
+/* eslint-disable no-restricted-syntax */
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { uniform } from 'three/tsl'
 
-export interface ShaderTimeOptions {
+export type ShaderTimeOptions = {
   autoStart?: boolean
   speed?: number
 }

package/layers/canvas/app/types/renderer.ts

@@ -0,0 +1,50 @@
+export type RendererBackend = 'webgpu' | 'webgl'
+export type QualityLevel = 'low' | 'medium' | 'high' | 'ultra'
+export type ToneMappingPreset = 'aces' | 'reinhard' | 'cineon' | 'linear'
+
+export type RendererCapabilities = {
+  backend: RendererBackend
+  maxTextureSize: number
+  maxTextures: number
+  maxVertexUniforms: number
+  maxFragmentUniforms: number
+  floatTextures: boolean
+  anisotropy: number
+  precision: 'lowp' | 'mediump' | 'highp'
+  devicePixelRatio: number
+  isWebGPU: boolean
+}
+
+export type QualitySettings = {
+  pixelRatio: number
+  antialias: boolean
+  shadows: boolean
+  postProcessing: boolean
+}
+
+export const QUALITY_PRESETS: Record<QualityLevel, QualitySettings> = {
+  low: {
+    pixelRatio: 1,
+    antialias: false,
+    shadows: false,
+    postProcessing: false,
+  },
+  medium: {
+    pixelRatio: 1.5,
+    antialias: true,
+    shadows: false,
+    postProcessing: true,
+  },
+  high: {
+    pixelRatio: 2,
+    antialias: true,
+    shadows: true,
+    postProcessing: true,
+  },
+  ultra: {
+    pixelRatio: 2,
+    antialias: true,
+    shadows: true,
+    postProcessing: true,
+  },
+}

package/layers/canvas/nuxt.config.ts

@@ -0,0 +1,189 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Intercepts three.webgpu.js in SSR via the transform hook.
+ *
+ * Unlike resolveId (which isn't reliably called in vite-node dev mode after
+ * the module graph is built), transform IS called for every module evaluation.
+ * We know this because Vite's `define` substitution — which works via transform —
+ * successfully polyfilled `self` in earlier debugging.
+ *
+ * Both `three/webgpu` and `three/tsl` package.json exports resolve to the same
+ * file: three/build/three.webgpu.js. That file accesses `self` and `navigator`
+ * at module scope, crashing SSR startup. We return a lightweight stub instead.
+ */
+function threeWebGPUSSRStub(): Plugin {
+  const tslNoop = `
+const n = new Proxy(function noop() { return n }, {
+  get(_t, k) {
+    if (k === 'then' || k === Symbol.toPrimitive || k === Symbol.iterator || k === Symbol.toStringTag) return undefined
+    return n
+  },
+  apply() { return n },
+  construct() { return Object.create(n) },
+})
+`
+  const tslNames = [
+    // Constructors
+    'float',
+    'vec2',
+    'vec3',
+    'vec4',
+    'color',
+    'mat2',
+    'mat3',
+    'mat4',
+    // Uniforms / attributes
+    'uniform',
+    'attribute',
+    'varying',
+    // Function definition
+    'Fn',
+    // Arithmetic
+    'add',
+    'sub',
+    'mul',
+    'div',
+    'mod',
+    'abs',
+    'sign',
+    'floor',
+    'ceil',
+    'fract',
+    'round',
+    'min',
+    'max',
+    'clamp',
+    'mix',
+    'smoothstep',
+    'pow',
+    'sqrt',
+    'exp',
+    'log',
+    // Trigonometry
+    'sin',
+    'cos',
+    'tan',
+    'asin',
+    'acos',
+    'atan',
+    'atan2',
+    // Vector operations
+    'dot',
+    'cross',
+    'normalize',
+    'length',
+    'distance',
+    'reflect',
+    'refract',
+    // Matrix operations
+    'transpose',
+    'inverse',
+    // Texture
+    'texture',
+    'sampler',
+    // Comparison / selection
+    'lessThan',
+    'lessThanEqual',
+    'greaterThan',
+    'greaterThanEqual',
+    'step',
+    'select',
+    'cond',
+    // Built-in inputs
+    'uv',
+    'time',
+    'EPSILON',
+    'Loop',
+    'positionLocal',
+    'positionWorld',
+    'positionView',
+    'normalLocal',
+    'normalWorld',
+    'normalView',
+    'positionViewDirection',
+    'cameraPosition',
+    // Timers
+    'timerGlobal',
+    'timerLocal',
+    'timerDelta',
+  ]
+
+  const stub =
+    tslNoop +
+    tslNames.map((name) => `export const ${name} = n`).join('\n') +
+    `
+// WebGPU class stubs (used by three/webgpu imports)
+export class MeshBasicNodeMaterial {
+  constructor() { this.colorNode = null; this.side = null }
+}
+export class MeshStandardNodeMaterial {
+  constructor() { this.colorNode = null; this.side = null }
+}
+export class TextureLoader {
+  load() { return null }
+}
+export class UniformNode {}
+export default {}
+`
+
+  return {
+    name: 'three-webgpu-ssr-stub',
+    enforce: 'pre',
+    transform(_code, id, options) {
+      if (!options?.ssr) return null
+      if (!id.includes('three.webgpu.js') && !id.includes('three.tsl.js')) return null
+      return { code: stub, map: null }
+    },
+  }
+}
+
+export default defineNuxtConfig({
+  $meta: {
+    name: 'canvas',
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  extends: ['../core'],
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+
+  modules: ['@tresjs/nuxt'],
+
+  tres: {
+    devtools: true,
+  },
+
+  alias: {
+    // More specific alias must be registered first — Vite/Rollup alias
+    // resolution is order-dependent (first prefix match wins), so
+    // '#layers/canvas' would otherwise shadow '#layers/canvas/types'
+    // and resolve it to '<root>/types/...' instead of '<root>/app/types/...'.
+    '#layers/canvas/types': `${import.meta.dirname}/app/types`,
+    '#layers/canvas': import.meta.dirname,
+  },
+
+  imports: {
+    dirs: [`${import.meta.dirname}/app/composables`],
+  },
+
+  vite: {
+    plugins: [threeWebGPUSSRStub()],
+    optimizeDeps: {
+      include: ['three', 'three/webgpu', 'three/tsl'],
+      esbuildOptions: {
+        target: 'esnext',
+      },
+    },
+    build: {
+      target: 'esnext',
+    },
+    ssr: {
+      noExternal: ['three'],
+    },
+  },
+})

package/layers/canvas/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "kmcom-layer-canvas",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,canvas pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
+  },
+  "dependencies": {
+    "@tresjs/cientos": "catalog:",
+    "@tresjs/core": "catalog:",
+    "@tresjs/nuxt": "catalog:",
+    "@tresjs/post-processing": "catalog:",
+    "@vueuse/core": "catalog:",
+    "three": "catalog:"
+  },
+  "devDependencies": {
+    "@types/three": "catalog:"
+  }
+}

package/layers/canvas/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/content/app/components/Blog/Article.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import type { BlogCollectionItem } from '@nuxt/content'
+  import type { BlogCollectionItem } from '@nuxt/content'
 
-const { slug } = defineProps<{
-  slug: string
-}>()
+  const { slug } = defineProps<{
+    slug: string
+  }>()
 
-const asBlog = (item: unknown) => item as BlogCollectionItem
+  const asBlog = (item: unknown) => item as BlogCollectionItem
 </script>
 
 <template>
   <NuxtContentDetail collection="blog" :slug not-found-message="Blog post not found">
     <template #headline="{ item }">
       <div class="flex items-center gap-3 text-sm text-muted">
-        <time v-if="asBlog(item).date">{{ new Date(asBlog(item).date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}</time>
+        <time v-if="asBlog(item).date">{{
+          new Date(asBlog(item).date).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          })
+        }}</time>
         <UBadge v-if="asBlog(item).badge" color="primary" variant="subtle">
           {{ asBlog(item).badge }}
         </UBadge>

package/layers/content/app/components/Blog/Card.vue

@@ -1,30 +1,30 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-const {
-  title,
-  description,
-  date,
-  image,
-  badge,
-  authors = [],
-  to,
-} = defineProps<{
-  title: string
-  description?: string
-  date?: string
-  image?: string
-  badge?: string
-  authors?: { name: string; avatar?: string; url?: string }[]
-  to?: string
-}>()
+  const {
+    title,
+    description,
+    date,
+    image,
+    badge,
+    authors = [],
+    to,
+  } = defineProps<{
+    title: string
+    description?: string
+    date?: string
+    image?: string
+    badge?: string
+    authors?: { name: string; avatar?: string; url?: string }[]
+    to?: string
+  }>()
 
-const postProps = computed(() => ({
-  ...(description !== undefined && { description }),
-  ...(date !== undefined && { date }),
-  ...(image !== undefined && { image }),
-  ...(badge !== undefined && { badge }),
-  ...(to !== undefined && { to }),
-}))
+  const postProps = computed(() => ({
+    ...(description !== undefined && { description }),
+    ...(date !== undefined && { date }),
+    ...(image !== undefined && { image }),
+    ...(badge !== undefined && { badge }),
+    ...(to !== undefined && { to }),
+  }))
 </script>
 
 <template>

package/layers/content/app/components/Blog/List.vue

@@ -1,20 +1,17 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import type { BlogQueryOptions } from '../../types/content'
+  // @ts-nocheck
+  import type { BlogQueryOptions } from '../../types/content'
 
-const { options = {} } = defineProps<{
-  options?: BlogQueryOptions
-}>()
+  const { options = {} } = defineProps<{
+    options?: BlogQueryOptions
+  }>()
 
-const { data: posts, status } = await useBlogPosts(options)
+  const { data: posts, status } = await useBlogPosts(options)
 </script>
 
 <template>
-  <NuxtContentList
-    :status="status"
-    :has-items="!!posts?.length"
-    empty-message="No blog posts found"
-  >
+  <NuxtContentList :status :has-items="!!posts?.length" empty-message="No blog posts found">
     <UBlogPosts orientation="vertical">
       <UBlogPost
         v-for="post in posts"

package/layers/content/app/components/Gallery/AmbientImage.vue

@@ -1,18 +1,18 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-const {
-  src,
-  alt = '',
-  width,
-  height,
-  caption,
-} = defineProps<{
-  src: string
-  alt?: string
-  width?: number
-  height?: number
-  caption?: string
-}>()
+  const {
+    src,
+    alt = '',
+    width,
+    height,
+    caption,
+  } = defineProps<{
+    src: string
+    alt?: string
+    width?: number
+    height?: number
+    caption?: string
+  }>()
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const {
       <Teleport to="body">
         <div class="fixed inset-0 z-0 pointer-events-none overflow-hidden" aria-hidden="true">
           <img
-            :src="src"
+            :src
             alt=""
             class="absolute inset-0 w-full h-full object-cover blur-[100px] opacity-30 saturate-150 scale-125"
           />
@@ -36,7 +36,7 @@ const {
 
     <!-- Main image in normal flow -->
     <figure class="my-6">
-      <img :src="src" :alt="alt" :width="width" :height="height" class="w-full rounded-lg" />
+      <img :src :alt :width :height class="w-full rounded-lg" />
       <figcaption v-if="caption" class="mt-3 text-center text-sm text-muted italic">
         {{ caption }}
       </figcaption>

package/layers/content/app/components/Gallery/Card.vue

@@ -1,25 +1,25 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-const {
-  title,
-  description,
-  coverImage,
-  imageCount = 0,
-  tags = [],
-  to,
-} = defineProps<{
-  title: string
-  description?: string
-  coverImage?: { src: string; alt: string }
-  imageCount?: number
-  tags?: string[]
-  to?: string
-}>()
+  const {
+    title,
+    description,
+    coverImage,
+    imageCount = 0,
+    tags = [],
+    to,
+  } = defineProps<{
+    title: string
+    description?: string
+    coverImage?: { src: string; alt: string }
+    imageCount?: number
+    tags?: string[]
+    to?: string
+  }>()
 
-const cardProps = computed(() => ({
-  ...(description !== undefined && { description }),
-  ...(to !== undefined && { to }),
-}))
+  const cardProps = computed(() => ({
+    ...(description !== undefined && { description }),
+    ...(to !== undefined && { to }),
+  }))
 </script>
 
 <template>