kmcom-nuxt-layers 1.7.9 → 2.1.6

package/layers/shader/nuxt.config.ts

@@ -1,132 +1,25 @@
-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
+export default defineNuxtConfig({
+  $meta: {
+    name: 'shader',
   },
-  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) {
-      // Only intercept in SSR context
-      if (!options?.ssr) return null
-      // In three r182+, three/webgpu → three.webgpu.js, three/tsl → three.tsl.js
-      if (!id.includes('three.webgpu.js') && !id.includes('three.tsl.js')) return null
-      return { code: stub, map: null }
-    },
-  }
-}
-
-export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
 
+  extends: ['../canvas'],
+
   typescript: {
-    typeCheck: true,
+    typeCheck: false,
     strict: true,
   },
 
-  modules: ['@tresjs/nuxt'],
-
-  tres: {
-    devtools: true,
-  },
-
   css: ['#layers/shader/app/assets/css/shader.css'],
 
   alias: {
     '#layers/shader': import.meta.dirname,
+    '#layers/shader/types': `${import.meta.dirname}/app/types`,
   },
 
   imports: {
-    dirs: [
-      `${import.meta.dirname}/app/composables`,
-    ],
-  },
-
-  // Vite config for WebGPU/TSL support
-  vite: {
-    plugins: [threeWebGPUSSRStub()],
-    optimizeDeps: {
-      include: ['three', 'three/webgpu', 'three/tsl'],
-      esbuildOptions: {
-        target: 'esnext',
-      },
-    },
-    build: {
-      target: 'esnext',
-    },
-    // Bundle three for client-side SSR transforms
-    ssr: {
-      noExternal: ['three'],
-    },
+    dirs: [`${import.meta.dirname}/app/composables`],
   },
 })

package/layers/shader/package.json

@@ -4,17 +4,11 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,canvas,shader pnpm -F playground dev",
     "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
   },
   "dependencies": {
-    "@tresjs/cientos": "^5.7.2",
-    "@tresjs/core": "^5.8.1",
-    "@tresjs/nuxt": "^5.6.1",
-    "@tresjs/post-processing": "^3.7.2",
-    "@vueuse/core": "^14.3.0",
-    "three": "^0.184.0"
-  },
-  "devDependencies": {
-    "@types/three": "^0.184.1"
+    "@vueuse/core": "catalog:"
   }
 }

package/layers/theme/app/assets/css/theme.css

@@ -8,9 +8,9 @@
 
 /* --- Theme Transition --- */
 .theme-transition {
-  transition-property: color, background-color, border-color, fill, stroke, box-shadow;
-  transition-duration: 700ms;
   transition-delay: 0ms;
+  transition-duration: 700ms;
+  transition-property: color, background-color, border-color, fill, stroke, box-shadow;
 }
 
 /* --- Reduced Motion --- */

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

@@ -1,41 +1,43 @@
 <script setup lang="ts">
-import type { AccentColor } from '#layers/theme/app/types/theme'
+  import type { AccentColor } from '#layers/theme/app/types/theme'
 
-const COLORS: Record<AccentColor, string> = {
-  red: '#ef4444',
-  orange: '#f97316',
-  amber: '#f59e0b',
-  yellow: '#eab308',
-  lime: '#84cc16',
-  green: '#22c55e',
-  emerald: '#10b981',
-  teal: '#14b8a6',
-  cyan: '#06b6d4',
-  sky: '#0ea5e9',
-  blue: '#3b82f6',
-  indigo: '#6366f1',
-  violet: '#8b5cf6',
-  purple: '#a855f7',
-  fuchsia: '#d946ef',
-  pink: '#ec4899',
-  rose: '#f43f5e',
-}
+  const { color, active = false } = defineProps<{
+    color: AccentColor
+    active?: boolean
+  }>()
 
-const { color, active = false } = defineProps<{
-  color: AccentColor
-  active?: boolean
-}>()
+  const emit = defineEmits<{
+    select: [color: AccentColor]
+  }>()
 
-const emit = defineEmits<{
-  select: [color: AccentColor]
-}>()
+  const COLORS: Record<AccentColor, string> = {
+    red: '#ef4444',
+    orange: '#f97316',
+    amber: '#f59e0b',
+    yellow: '#eab308',
+    lime: '#84cc16',
+    green: '#22c55e',
+    emerald: '#10b981',
+    teal: '#14b8a6',
+    cyan: '#06b6d4',
+    sky: '#0ea5e9',
+    blue: '#3b82f6',
+    indigo: '#6366f1',
+    violet: '#8b5cf6',
+    purple: '#a855f7',
+    fuchsia: '#d946ef',
+    pink: '#ec4899',
+    rose: '#f43f5e',
+  }
 
-const bgStyle = computed(() => ({
-  backgroundColor: COLORS[color],
-}))
+  const bgStyle = computed(() => ({
+    backgroundColor: COLORS[color],
+  }))
 </script>
 
 <template>
+  <!-- eslint-disable vue/v-on-handler-style -->
+
   <button
     class="size-8 rounded-full ring-1 ring-offset-2 transition-shadow duration-200"
     :class="[

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

@@ -1,10 +1,11 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
-import type { AccentColor } from '#layers/theme/app/types/theme'
+  import type { AccentColor } from '#layers/theme/app/types/theme'
 
-const appConfig = useAppConfig()
-const { activeAccent, setAccent } = useAccentColor()
+  const appConfig = useAppConfig()
+  const { activeAccent, setAccent } = useAccentColor()
 
-const accents = computed(() => ((appConfig as any).themeLayer?.accents as AccentColor[]) ?? [])
+  const accents = computed(() => ((appConfig as any).themeLayer?.accents as AccentColor[]) ?? [])
 </script>
 
 <template>
@@ -12,7 +13,7 @@ const accents = computed(() => ((appConfig as any).themeLayer?.accents as Accent
     <ThemePickerAccentButton
       v-for="color in accents"
       :key="color"
-      :color="color"
+      :color
       :active="activeAccent === color"
       @select="setAccent"
     />

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

@@ -1,30 +1,30 @@
 <script setup lang="ts">
-const {
-  contrastOverride,
-  motionOverride,
-  transparencyOverride,
-  setContrastOverride,
-  setMotionOverride,
-  setTransparencyOverride,
-  effectiveHighContrast,
-  effectiveReducedMotion,
-  effectiveReducedTransparency,
-} = useTheme()
+  const {
+    contrastOverride,
+    motionOverride,
+    transparencyOverride,
+    setContrastOverride,
+    setMotionOverride,
+    setTransparencyOverride,
+    effectiveHighContrast,
+    effectiveReducedMotion,
+    effectiveReducedTransparency,
+  } = useTheme()
 
-const contrastModel = computed({
-  get: () => effectiveHighContrast.value,
-  set: (val: boolean) => setContrastOverride(val ? 'on' : 'system'),
-})
+  const contrastModel = computed({
+    get: () => effectiveHighContrast.value,
+    set: (val: boolean) => setContrastOverride(val ? 'on' : 'system'),
+  })
 
-const motionModel = computed({
-  get: () => effectiveReducedMotion.value,
-  set: (val: boolean) => setMotionOverride(val ? 'on' : 'system'),
-})
+  const motionModel = computed({
+    get: () => effectiveReducedMotion.value,
+    set: (val: boolean) => setMotionOverride(val ? 'on' : 'system'),
+  })
 
-const transparencyModel = computed({
-  get: () => effectiveReducedTransparency.value,
-  set: (val: boolean) => setTransparencyOverride(val ? 'on' : 'system'),
-})
+  const transparencyModel = computed({
+    get: () => effectiveReducedTransparency.value,
+    set: (val: boolean) => setTransparencyOverride(val ? 'on' : 'system'),
+  })
 </script>
 
 <template>

package/layers/theme/app/composables/useAccentColor.ts

@@ -1,5 +1,6 @@
-import { createSharedComposable } from '@vueuse/core'
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { AccentColor } from '#layers/theme/app/types/theme'
+import { createSharedComposable } from '@vueuse/core'
 
 export const useAccentColor = createSharedComposable(() => {
   const appConfig = useAppConfig()

package/layers/theme/app/composables/useThemeContrast.ts

@@ -1,5 +1,5 @@
-import { createSharedComposable, usePreferredContrast } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+import { createSharedComposable, usePreferredContrast } from '@vueuse/core'
 
 export const useThemeContrast = createSharedComposable(() => {
   const contrastOverride = useState<PreferenceOverride>('theme-contrast', () => 'system')

package/layers/theme/app/composables/useThemeMotion.ts

@@ -1,5 +1,5 @@
-import { createSharedComposable, usePreferredReducedMotion } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+import { createSharedComposable, usePreferredReducedMotion } from '@vueuse/core'
 
 export const useThemeMotion = createSharedComposable(() => {
   const motionOverride = useState<PreferenceOverride>('theme-motion', () => 'system')

package/layers/theme/app/composables/useThemeTransparency.ts

@@ -1,8 +1,5 @@
-import {
-  createSharedComposable,
-  usePreferredReducedTransparency,
-} from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+import { createSharedComposable, usePreferredReducedTransparency } from '@vueuse/core'
 
 export const useThemeTransparency = createSharedComposable(() => {
   const transparencyOverride = useState<PreferenceOverride>('theme-transparency', () => 'system')

package/layers/theme/app/plugins/theme.client.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { AccentColor, PreferenceOverride } from '#layers/theme/app/types/theme'
 
 export default defineNuxtPlugin(() => {
@@ -21,19 +23,35 @@ export default defineNuxtPlugin(() => {
   const storedTransparency = localStorage.getItem('theme-transparency')
   if (storedTransparency) setTransparencyOverride(storedTransparency as PreferenceOverride)
 
-  watch(activeAccent, (color) => {
-    document.documentElement.setAttribute('data-theme-colour', color)
-  }, { immediate: true })
-
-  watch(effectiveHighContrast, (high) => {
-    document.documentElement.setAttribute('data-theme-contrast', high ? 'high' : 'standard')
-  }, { immediate: true })
-
-  watch(effectiveReducedMotion, (reduced) => {
-    document.documentElement.setAttribute('data-theme-motion', reduced ? 'reduced' : 'full')
-  }, { immediate: true })
-
-  watch(effectiveReducedTransparency, (reduced) => {
-    document.documentElement.setAttribute('data-theme-transparency', reduced ? 'reduced' : 'full')
-  }, { immediate: true })
+  watch(
+    activeAccent,
+    (color) => {
+      document.documentElement.setAttribute('data-theme-colour', color)
+    },
+    { immediate: true }
+  )
+
+  watch(
+    effectiveHighContrast,
+    (high) => {
+      document.documentElement.setAttribute('data-theme-contrast', high ? 'high' : 'standard')
+    },
+    { immediate: true }
+  )
+
+  watch(
+    effectiveReducedMotion,
+    (reduced) => {
+      document.documentElement.setAttribute('data-theme-motion', reduced ? 'reduced' : 'full')
+    },
+    { immediate: true }
+  )
+
+  watch(
+    effectiveReducedTransparency,
+    (reduced) => {
+      document.documentElement.setAttribute('data-theme-transparency', reduced ? 'reduced' : 'full')
+    },
+    { immediate: true }
+  )
 })

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

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
 declare module '@nuxt/schema' {
-  interface AppConfigInput {
+  type AppConfigInput = {
     themeLayer?: {
-      accents?: import('./theme').AccentColor[]
+      accents?: Array<import('./theme').AccentColor>
       defaultAccent?: import('./theme').AccentColor
     }
   }

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

@@ -30,7 +30,7 @@ export type ThemeContrast = 'high' | 'standard'
 export type ThemeMotion = 'reduced' | 'full'
 export type ThemeTransparency = 'reduced' | 'full'
 
-export interface ThemePreferences {
+export type ThemePreferences = {
   accent: AccentColor
   contrast: PreferenceOverride
   motion: PreferenceOverride

package/layers/theme/nuxt.config.ts

@@ -4,8 +4,11 @@ export default defineNuxtConfig({
     name: 'theme',
   },
 
+  extends: ['../core'],
+
   alias: {
     '#layers/theme': import.meta.dirname,
+    '#layers/theme/types': `${import.meta.dirname}/app/types`,
   },
 
   css: ['#layers/theme/app/assets/css/theme.css'],
@@ -52,7 +55,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2026-01-30',
 
   typescript: {
-    typeCheck: true,
+    typeCheck: false,
     strict: true,
   },
 })

package/layers/transitions/app/components/Motion/Transition.vue

@@ -0,0 +1,76 @@
+<!-- eslint-disable vue/no-unused-properties -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<script setup lang="ts">
+  // Props
+  const props = withDefaults(
+    defineProps<{
+      name?: string
+      mode?: 'in-out' | 'out-in' | 'default'
+      duration?: number
+      delay?: number
+      easing?: string
+    }>(),
+    {
+      name: 'fade',
+      mode: 'default',
+      duration: 300,
+      delay: 0,
+      easing: 'ease-out',
+    }
+  )
+
+  // State
+  const isVisible = ref(false)
+  const isMounted = ref(false)
+
+  // Computed classes
+  const transitionClass = computed(() => {
+    return `transition-${props.name}`
+  })
+
+  const style = computed(() => {
+    return {
+      transitionDuration: `${props.duration}ms`,
+      transitionDelay: `${props.delay}ms`,
+      transitionTimingFunction: props.easing,
+    }
+  })
+
+  // Lifecycle
+  onMounted(() => {
+    isMounted.value = true
+    // Trigger initial animation
+    setTimeout(() => {
+      isVisible.value = true
+    }, 50)
+  })
+</script>
+
+<template>
+  <div class="motion-transition" :class="[transitionClass, { 'is-visible': isVisible }]" :style>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+  .motion-transition {
+    opacity: 0;
+    transition-property: all;
+  }
+
+  .motion-transition.is-visible {
+    opacity: 1;
+  }
+
+  .transition-fade {
+    transition-property: opacity;
+  }
+
+  .transition-slide {
+    transition-property: transform, opacity;
+  }
+
+  .transition-scale {
+    transition-property: transform, opacity;
+  }
+</style>

package/layers/transitions/nuxt.config.ts

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

package/layers/transitions/package.json

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

package/layers/transitions/tsconfig.json

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

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

@@ -0,0 +1,44 @@
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<script lang="ts" setup>
+  import { useColor } from '../../composables/color'
+  import type { UiColors } from '../../types/colors'
+  import type { FontSize } from '../../types/typography'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      language?: string
+      color?: UiColors
+      size?: FontSize
+      class?: string
+    }>(),
+    {
+      class: '',
+      color: 'default',
+    }
+  )
+  const colorClass = useColor(props.color, 'text')
+</script>
+
+<template>
+  <Typography
+    tag="pre"
+    v-bind="{
+      ...$attrs,
+      ...(props.size !== undefined && { size: props.size }),
+      ...(props.language !== undefined && { 'data-language': props.language }),
+    }"
+    class="overflow-x-auto"
+    :class="[props.class]"
+  >
+    <Typography
+      tag="code"
+      class="font-mono"
+      :class="[colorClass, props.language ? `language-${props.language}` : '']"
+    >
+      <slot />
+    </Typography>
+  </Typography>
+</template>