kmcom-nuxt-layers 2.2.5 → 2.2.8

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

@@ -3,30 +3,30 @@ import { checkWebGPUSupport } from '#layers/canvas/app/composables/useRendererCa
 export default defineNuxtPlugin({
   name: 'shader:shader',
   async setup() {
-  const config = useAppConfig()
-  const shaderConfig = (config.shader || {}) as {
-    preferWebGPU?: boolean
-  }
+    const config = useAppConfig()
+    const shaderConfig = (config.shader || {}) as {
+      preferWebGPU?: boolean
+    }
 
-  // Check WebGPU support
-  const hasWebGPU = await checkWebGPUSupport()
-  const useWebGPU = shaderConfig.preferWebGPU && hasWebGPU
+    // Check WebGPU support
+    const hasWebGPU = await checkWebGPUSupport()
+    const useWebGPU = shaderConfig.preferWebGPU && hasWebGPU
 
-  // Log renderer info in development
-  if (import.meta.dev) {
-    console.log('[Shader Layer] Initialized')
-    console.log(`[Shader Layer] WebGPU supported: ${hasWebGPU}`)
-    console.log(`[Shader Layer] Using: ${useWebGPU ? 'WebGPU' : 'WebGL'}`)
-  }
+    // Log renderer info in development
+    if (import.meta.dev) {
+      console.log('[Shader Layer] Initialized')
+      console.log(`[Shader Layer] WebGPU supported: ${hasWebGPU}`)
+      console.log(`[Shader Layer] Using: ${useWebGPU ? 'WebGPU' : 'WebGL'}`)
+    }
 
-  return {
-    provide: {
-      shader: {
-        hasWebGPU,
-        useWebGPU,
-        config: shaderConfig,
+    return {
+      provide: {
+        shader: {
+          hasWebGPU,
+          useWebGPU,
+          config: shaderConfig,
+        },
       },
-    },
-  }
+    }
   },
 })

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

@@ -26,6 +26,7 @@ import {
   vec4,
 } from 'three/tsl'
 
+import type { FBMOptions } from '../../types/tsl'
 import type { TSLNode } from '../types'
 import {
   fade,
@@ -204,13 +205,7 @@ export function gradientNoise3D(p: TSLNode): TSLNode {
 // FBM (Fractal Brownian Motion)
 // ============================================
 
-export type FBMOptions = {
-  octaves?: number
-  lacunarity?: number
-  gain?: number
-  amplitude?: number
-  frequency?: number
-}
+export type { FBMOptions }
 
 /**
  * 2D Fractal Brownian Motion

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

@@ -7,15 +7,15 @@
 // This provides flexibility while maintaining code readability
 
 import type { UniformNode } from 'three/webgpu'
+import type { Vector3 } from 'three'
 
-export type TSLNode = any
+export type { TSLNode } from '../types/tsl'
 
-/**
- * Float uniform with full TSL operator support.
- * `ReturnType<typeof uniform>` collapses to `UniformNode<unknown, unknown>`,
- * which has no operator methods — use this concrete type instead.
- */
+/** Float uniform: `uniform(someNumber)` */
 export type FloatUniform = UniformNode<'float', number>
 
+/** Vec3 uniform: `uniform(new Vector3(...))` */
+export type Vec3Uniform = UniformNode<'vec3', Vector3>
+
 // Re-export common Three types
 export type { Color, Texture, Vector2, Vector3, Vector4 } from 'three'

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

@@ -1,23 +1,11 @@
-/**
- * TSL Node types
- * Using generic types for flexibility across Three.js versions
- */
+import type { Node } from 'three/webgpu'
 
-export type TSLNode = any
-
-export type TSLFloat = any
-
-export type TSLVec2 = any
-
-export type TSLVec3 = any
-
-export type TSLVec4 = any
-
-export type TSLColor = any
-
-export type TSLMat3 = any
-
-export type TSLMat4 = any
+export type TSLNode = Node
+export type TSLVec3 = Node<'vec3'>
+export type TSLVec4 = Node<'vec4'>
+export type TSLColor = Node<'color'>
+export type TSLMat3 = Node<'mat3'>
+export type TSLMat4 = Node<'mat4'>
 
 export type GradientStop = {
   position: number
@@ -31,9 +19,3 @@ export type FBMOptions = {
   amplitude?: number
   frequency?: number
 }
-
-export type VoronoiResult = {
-  distance: TSLFloat
-  cellCenter: TSLVec2
-  edgeDistance: TSLFloat
-}

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
 export type UniformVector = Vector2 | Vector3 | Vector4
@@ -17,5 +18,5 @@ export type UniformValues = Record<string, UniformValue>
 
 export type UniformsState<T extends UniformValues> = {
   values: T
-  nodes: Record<keyof T, import('./tsl').TSLNode>
+  nodes: Record<keyof T, TSLNode>
 }

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

@@ -1,8 +1,14 @@
-import { abs, clamp, float, Fn, max, min, mix, mod, vec3 } from 'three/tsl'
+import { Color, Vector3 } from 'three'
+import { abs, clamp, float, Fn, max, min, mix, mod, uniform, vec3 } from 'three/tsl'
 
 import type { GradientStop, TSLNode } from '../../types'
 import { circularDistance } from './math'
 
+export function hexToVec3Uniform(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
 /**
  * Linear gradient with multiple color stops
  */

package/layers/shader/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,canvas,shader pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
   },
   "dependencies": {
     "@vueuse/core": "catalog:"

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

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-  import type { AccentColor } from '#layers/theme/app/types/theme'
-
   const appConfig = useAppConfig()
   const { activeAccent, setAccent } = useAccentColor()
 
-  const accents = computed(() => ((appConfig as any).themeLayer?.accents as AccentColor[]) ?? [])
+  const accents = computed(() => appConfig.themeLayer?.accents ?? [])
 </script>
 
 <template>

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

@@ -3,56 +3,59 @@ import type { AccentColor, PreferenceOverride } from '#layers/theme/app/types/th
 export default defineNuxtPlugin({
   name: 'theme:theme',
   setup() {
-  const { setAccent, activeAccent } = useAccentColor()
-  const { setContrastOverride, effectiveHighContrast } = useThemeContrast()
-  const { setMotionOverride, effectiveReducedMotion } = useThemeMotion()
-  const { setTransparencyOverride, effectiveReducedTransparency } = useThemeTransparency()
-
-  // Restore persisted preferences. useState defaults were serialized from the
-  // server, so hydration matches. We update to the stored values here, after
-  // hydration completes, to avoid any mismatch.
-  const storedAccent = localStorage.getItem('theme-colour')
-  if (storedAccent) setAccent(storedAccent as AccentColor)
-
-  const storedContrast = localStorage.getItem('theme-contrast')
-  if (storedContrast) setContrastOverride(storedContrast as PreferenceOverride)
-
-  const storedMotion = localStorage.getItem('theme-motion')
-  if (storedMotion) setMotionOverride(storedMotion as PreferenceOverride)
-
-  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 }
-  )
+    const { setAccent, activeAccent } = useAccentColor()
+    const { setContrastOverride, effectiveHighContrast } = useThemeContrast()
+    const { setMotionOverride, effectiveReducedMotion } = useThemeMotion()
+    const { setTransparencyOverride, effectiveReducedTransparency } = useThemeTransparency()
+
+    // Restore persisted preferences. useState defaults were serialized from the
+    // server, so hydration matches. We update to the stored values here, after
+    // hydration completes, to avoid any mismatch.
+    const storedAccent = localStorage.getItem('theme-colour')
+    if (storedAccent) setAccent(storedAccent as AccentColor)
+
+    const storedContrast = localStorage.getItem('theme-contrast')
+    if (storedContrast) setContrastOverride(storedContrast as PreferenceOverride)
+
+    const storedMotion = localStorage.getItem('theme-motion')
+    if (storedMotion) setMotionOverride(storedMotion as PreferenceOverride)
+
+    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 }
+    )
   },
 })

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

@@ -1,8 +1,10 @@
+import type { AccentColor } from './theme'
+
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     themeLayer?: {
-      accents?: Array<import('./theme').AccentColor>
-      defaultAccent?: import('./theme').AccentColor
+      accents?: AccentColor[]
+      defaultAccent?: AccentColor
     }
   }
 }

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

@@ -0,0 +1 @@
+export type * from './theme'

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

@@ -5,24 +5,9 @@
  * and the theme preferences interface.
  */
 
-export type AccentColor =
-  | 'red'
-  | 'orange'
-  | 'amber'
-  | 'yellow'
-  | 'lime'
-  | 'green'
-  | 'emerald'
-  | 'teal'
-  | 'cyan'
-  | 'sky'
-  | 'blue'
-  | 'indigo'
-  | 'violet'
-  | 'purple'
-  | 'fuchsia'
-  | 'pink'
-  | 'rose'
+import type { AccentColor } from '#types'
+
+export type { AccentColor }
 
 export type PreferenceOverride = 'system' | 'on' | 'off'
 

package/layers/theme/package.json

@@ -9,6 +9,7 @@
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
-    "preview": "nuxt preview .playground"
+    "preview": "nuxt preview .playground",
+    "lint": "eslint ."
   }
 }

package/layers/theme/server/plugins/theme-fouc.ts

@@ -150,7 +150,7 @@ const initScript = `(function(){
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('render:html', (html) => {
     html.head.unshift(
-      `<style id="theme-accent-css">${accentCSS}</style>` + `<script>${initScript}</script>`
+      `<style id="theme-accent-css">${accentCSS}</style><script>${initScript}</script>`
     )
   })
 })

package/layers/transitions/package.json

@@ -2,5 +2,8 @@
   "name": "kmcom-layer-transitions",
   "version": "0.0.1",
   "type": "module",
-  "main": "./nuxt.config.ts"
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "lint": "eslint ."
+  }
 }

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

@@ -6,9 +6,9 @@
   defineOptions({ inheritAttrs: false })
 
   const {
-    language,
+    language = undefined,
     color = 'default',
-    size,
+    size = undefined,
     class: classProp = '',
   } = defineProps<{
     language?: string

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

@@ -24,8 +24,8 @@
     tracking = 'tracking-tight',
     align = 'left',
     transform = 'none',
-    color,
-    size,
+    color = undefined,
+    size = undefined,
     class: classProp = '',
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6

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

@@ -25,7 +25,7 @@
     tracking = 'tracking-tight',
     align = 'left',
     transform = 'none',
-    color,
+    color = undefined,
     class: classProp = '',
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6

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

@@ -5,7 +5,10 @@
 
   defineOptions({ inheritAttrs: false })
 
-  const { color, size } = defineProps<{ color?: UiColors; size?: FontSize }>()
+  const { color = undefined, size = undefined } = defineProps<{
+    color?: UiColors
+    size?: FontSize
+  }>()
   const colorClass = useColor(color, 'text')
 </script>
 

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+  defineOptions({ inheritAttrs: false })
+
   const {
     strokeWidth = 1.5,
     strokeColor = 'currentColor',

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

@@ -14,33 +14,42 @@
     TypographyTag,
   } from '../../types/typography'
 
-  const props = withDefaults(
-    defineProps<{
-      tag?: TypographyTag
-      weight?: FontWeight
-      width?: FontWidth
-      slant?: FontSlant
-      leading?: FontLeading
-      tracking?: FontTracking
-      align?: TextAlign
-      transform?: TextTransform
-      color?: UiColors
-      size?: FontSize
-    }>(),
-    {
-      tag: 'p',
-      weight: 'font-normal',
-      width: 'font-stretch-normal',
-      slant: 'normal',
-      leading: 'leading-normal',
-      tracking: 'tracking-normal',
-      align: 'left',
-      transform: 'none',
-      size: 'base',
-    }
-  )
-  const { classes } = useTypography(props)
-  const colorClass = useColor(props.color, 'text')
+  defineOptions({ inheritAttrs: false })
+
+  const {
+    tag = 'p',
+    weight = 'font-normal',
+    width = 'font-stretch-normal',
+    slant = 'normal',
+    leading = 'leading-normal',
+    tracking = 'tracking-normal',
+    align = 'left',
+    transform = 'none',
+    color = undefined,
+    size = 'base',
+  } = defineProps<{
+    tag?: TypographyTag
+    weight?: FontWeight
+    width?: FontWidth
+    slant?: FontSlant
+    leading?: FontLeading
+    tracking?: FontTracking
+    align?: TextAlign
+    transform?: TextTransform
+    color?: UiColors
+    size?: FontSize
+  }>()
+  const { classes } = useTypography(() => ({
+    weight,
+    width,
+    slant,
+    leading,
+    tracking,
+    align,
+    transform,
+    size,
+  }))
+  const colorClass = useColor(color, 'text')
 </script>
 
 <template>

package/layers/typography/app/composables/typography.ts

@@ -1,3 +1,6 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+
 import type {
   FontLeading,
   FontSize,
@@ -35,50 +38,53 @@ function getSizeClass(size: FontSize | undefined): string {
   return typeof size === 'number' ? `text-[${size}]` : `text-${size}`
 }
 
-export function useTypography(props: {
-  weight?: FontWeight
-  slant?: FontSlant
-  width?: FontWidth
-  leading?: FontLeading
-  tracking?: FontTracking
-  align?: TextAlign
-  transform?: TextTransform
-  size?: FontSize
-}) {
-  const classes = computed(() =>
-    [
-      normalizeAxis(props.weight, {
+export function useTypography(
+  props: MaybeRefOrGetter<{
+    weight?: FontWeight
+    slant?: FontSlant
+    width?: FontWidth
+    leading?: FontLeading
+    tracking?: FontTracking
+    align?: TextAlign
+    transform?: TextTransform
+    size?: FontSize
+  }>
+) {
+  const classes = computed(() => {
+    const p = toValue(props)
+    return [
+      normalizeAxis(p.weight, {
         prefix: 'font',
         fallback: 'font-normal',
       }),
 
-      normalizeAxis(props.width, {
+      normalizeAxis(p.width, {
         numericFormatter: (v) => `font-stretch-[${v}%]`,
       }),
 
-      normalizeAxis(props.slant, {
+      normalizeAxis(p.slant, {
         fallback: 'not-italic',
       }),
 
-      normalizeAxis(props.leading, {
+      normalizeAxis(p.leading, {
         prefix: 'leading',
         fallback: 'leading-normal',
       }),
 
-      normalizeAxis(props.tracking, {
+      normalizeAxis(p.tracking, {
         prefix: 'tracking',
         fallback: 'tracking-normal',
       }),
 
-      getSizeClass(props.size),
+      getSizeClass(p.size),
 
-      props.align ? `text-${props.align}` : '',
+      p.align ? `text-${p.align}` : '',
 
-      props.transform && props.transform !== 'none' ? props.transform : '',
+      p.transform && p.transform !== 'none' ? p.transform : '',
     ]
       .filter(Boolean)
       .join(' ')
-  )
+  })
 
   return { classes }
 }

package/layers/typography/app/types/colors.ts

@@ -1,29 +1,9 @@
-/***************************************************************
-  UI Primitives - Semantic Color Types
-
-  `UiSemanticColor` defines neutral or semantic colors for general UI elements.
-  `UiStatusColor` defines status-related colors (info, success, warning, error).
-  `UiCustomColors` defines custom design colors like accent or secondary.
-  `UiBaseColor` defines fundamental colors (black, white).
-  `UiColors` is the union of all color types and can be applied to text, backgrounds, borders, or other UI elements.
-  `ColorUsage` defines the intended usage of a color in a component.
-***************************************************************/
-
-export type ColorUsage = 'text' | 'bg' | 'border'
-
-export type UiSemanticColor = 'dimmed' | 'muted' | 'toned' | 'default' | 'highlighted' | 'inverted'
-
-export type UiStatusColor = 'info' | 'success' | 'warning' | 'error'
-
-export type UiDefaultNuxtUiColors = 'primary' | 'neutral'
-
-export type UiCustomColors = 'secondary' | 'accent'
-
-export type UiBaseColor = 'black' | 'white'
-
-export type UiColors =
-  | UiSemanticColor
-  | UiStatusColor
-  | UiDefaultNuxtUiColors
-  | UiCustomColors
-  | UiBaseColor
+export type {
+  ColorUsage,
+  UiSemanticColor,
+  UiStatusColor,
+  UiDefaultNuxtUiColors,
+  UiCustomColors,
+  UiBaseColor,
+  UiColors,
+} from '#types'

package/layers/typography/app/types/index.ts

@@ -0,0 +1,2 @@
+export type * from './colors'
+export type * from './typography'

package/layers/typography/package.json

@@ -2,5 +2,8 @@
   "name": "kmcom-layer-typography",
   "version": "0.0.1",
   "type": "module",
-  "main": "./nuxt.config.ts"
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "lint": "eslint ."
+  }
 }

package/layers/ui/package.json

@@ -10,6 +10,7 @@
     "dev:prepare": "nuxt prepare .playground",
     "build": "UI_STANDALONE=true nuxi build",
     "generate": "UI_STANDALONE=true nuxi generate",
-    "preview": "nuxt preview .playground"
+    "preview": "nuxt preview .playground",
+    "lint": "eslint ."
   }
 }