kmcom-nuxt-layers 2.2.9 → 2.2.11

package/layers/animations/app/components/Motion/MarqueeText.vue

@@ -99,7 +99,7 @@
     directionFactors.value = new Array(texts.length).fill(1)
     animLastTime = performance.now()
 
-    const firstContainer = containerRef.value[0]
+    const firstContainer = containerRef.value?.[0]
     if (firstContainer) {
       scrollTriggerInstance = ScrollTrigger.create({
         trigger: firstContainer,

package/layers/canvas/app/composables/useRendererCapabilities.ts

@@ -15,10 +15,7 @@ export function useRendererCapabilities() {
   const isReady = ref(false)
 
   function detectFromRenderer(renderer: WebGPURenderer | WebGLRenderer) {
-    const isWebGPU = renderer.constructor?.name === 'WebGPURenderer'
-    const glCaps = renderer.capabilities
-
-    if (isWebGPU || !glCaps) {
+    if (!('capabilities' in renderer)) {
       capabilities.value = {
         backend: 'webgpu',
         maxTextureSize: 16384,
@@ -35,6 +32,8 @@ export function useRendererCapabilities() {
       return
     }
 
+    const glCaps = renderer.capabilities
+
     capabilities.value = {
       backend: 'webgl',
       maxTextureSize: glCaps.maxTextureSize,

package/layers/content/app/components/NuxtContent/Detail.vue

@@ -17,8 +17,8 @@
   const { data: item, status } = await useCollectionItem(collection, slug)
   const { data: surround } = await useCollectionSurround(collection, slug)
 
-  const surroundLinks = computed(
-    () => (surround.value ?? undefined) as ContentSurroundLink[] | undefined
+  const surroundLinks = computed<ContentSurroundLink[] | undefined>(
+    () => surround.value ?? undefined
   )
   const itemImage = computed(() => (item.value as { image?: string } | null)?.image)
 
@@ -51,7 +51,7 @@
         <slot name="after-content" :item />
 
         <USeparator class="my-8" />
-        <NuxtContentSurround :surround="surroundLinks" />
+        <NuxtContentSurround v-bind="surroundLinks?.length ? { surround: surroundLinks } : {}" />
       </UPageBody>
 
       <template v-if="!hideToc" #right>

package/layers/feeds/server/utils/content-adapter.ts

@@ -3,38 +3,77 @@ import type { H3Event } from 'h3'
 
 import type { FeedItem } from './types'
 
-type AnyContent = Record<string, unknown>
+type FeedSourceAuthor = {
+  name?: string | undefined
+}
+
+type FeedSourceItem = {
+  draft?: boolean | undefined
+  title?: string | undefined
+  description?: string | undefined
+  stem?: string | undefined
+  path?: string | undefined
+  _path?: string | undefined
+  date?: string | number | Date | undefined
+  createdAt?: string | number | Date | undefined
+  author?: FeedSourceAuthor | string | undefined
+  authors?: FeedSourceAuthor[] | undefined
+  tags?: string[] | undefined
+}
+
+type FeedCollectionQuery = {
+  all(): Promise<FeedSourceItem[]>
+}
+
+const getFeedCollection = queryCollection as unknown as (
+  event: H3Event,
+  collection: string
+) => FeedCollectionQuery
+
+function resolveFeedAuthor(item: FeedSourceItem): string | undefined {
+  const firstAuthor = item.authors?.[0]
+  if (typeof firstAuthor?.name === 'string' && firstAuthor.name.length > 0) {
+    return firstAuthor.name
+  }
+
+  if (typeof item.author === 'string' && item.author.length > 0) {
+    return item.author
+  }
+
+  if (item.author && typeof item.author === 'object' && typeof item.author.name === 'string') {
+    return item.author.name
+  }
+
+  return undefined
+}
+
+function resolveFeedDate(item: FeedSourceItem): Date {
+  return new Date(item.date ?? item.createdAt ?? Date.now())
+}
 
 export async function getContentFeedItems(
   event: H3Event,
   collection: string = 'blog',
   limit: number = 30
 ): Promise<FeedItem[]> {
-  // queryCollection's first argument is typed as a const collection name, but we pass
-  // a dynamic string at runtime — the cast is intentional and safe here.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const raw: AnyContent[] = await (queryCollection as any)(event, collection).all()
+  // queryCollection is keyed by literal collection names, but feed routes accept
+  // a runtime collection string; keep the unsafe bridge local here.
+  const raw = await getFeedCollection(event, collection).all()
 
   return raw
     .filter((item) => !item.draft)
-    .sort(
-      (a, b) =>
-        new Date(b.date ?? b.createdAt ?? 0).getTime() -
-        new Date(a.date ?? a.createdAt ?? 0).getTime()
-    )
+    .sort((a, b) => resolveFeedDate(b).getTime() - resolveFeedDate(a).getTime())
     .slice(0, limit)
-    .map((item) => {
-      const firstAuthor = Array.isArray(item.authors)
-        ? item.authors[0]?.name
-        : (item.author?.name ?? (typeof item.author === 'string' ? item.author : undefined))
+    .map((item): FeedItem => {
+      const link = item.path ?? item._path ?? ''
       return {
         title: item.title ?? item.stem ?? '',
         description: item.description,
-        link: item.path ?? item._path ?? '',
-        id: item.path ?? item._path ?? '',
-        date: new Date(item.date ?? item.createdAt ?? Date.now()),
-        author: firstAuthor ?? undefined,
-        tags: Array.isArray(item.tags) ? item.tags : undefined,
+        link,
+        id: link,
+        date: resolveFeedDate(item),
+        author: resolveFeedAuthor(item),
+        tags: item.tags,
       }
     })
 }

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

@@ -31,8 +31,8 @@
     watch(
       () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
       ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
+        uniforms.mouseX.value = mx ?? 0.5
+        uniforms.mouseY.value = my ?? 0.5
       },
       { immediate: true }
     )

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

@@ -32,8 +32,8 @@
     watch(
       () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
       ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
+        uniforms.mouseX.value = mx ?? 0.5
+        uniforms.mouseY.value = my ?? 0.5
       },
       { immediate: true }
     )

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

@@ -32,8 +32,8 @@
     watch(
       () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
       ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
+        uniforms.mouseX.value = mx ?? 0.5
+        uniforms.mouseY.value = my ?? 0.5
       },
       { immediate: true }
     )

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

@@ -32,8 +32,8 @@
     watch(
       () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
       ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
+        uniforms.mouseX.value = mx ?? 0.5
+        uniforms.mouseY.value = my ?? 0.5
       },
       { immediate: true }
     )

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

@@ -32,8 +32,8 @@
     watch(
       () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
       ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
+        uniforms.mouseX.value = mx ?? 0.5
+        uniforms.mouseY.value = my ?? 0.5
       },
       { immediate: true }
     )

package/layers/shader/app/components/Shader/Background.client.vue

@@ -12,6 +12,7 @@
     ReinhardToneMapping,
     Scene,
     SRGBColorSpace,
+    type ToneMapping,
   } from 'three'
   import { MeshBasicNodeMaterial, WebGPURenderer } from 'three/webgpu'
 
@@ -56,7 +57,7 @@
   let initStarted = false
   let disposed = false
 
-  const toneMappingMap: Record<string, number> = {
+  const toneMappingMap: Record<'aces' | 'reinhard' | 'cineon' | 'linear', ToneMapping> = {
     aces: ACESFilmicToneMapping,
     reinhard: ReinhardToneMapping,
     cineon: CineonToneMapping,
@@ -175,7 +176,7 @@
   )
 
   watch([width, height], ([w, h]) => {
-    if (!initialized) return
+    if (!initialized || !renderer) return
     camera.aspect = w / (h || 1)
     camera.updateProjectionMatrix()
     renderer.setSize(w, h)

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

@@ -28,7 +28,7 @@ import {
   voronoi2D,
 } from '../shaders/common/noise'
 import { cosinePalette } from '../shaders/common/palette'
-import type { FloatUniform, TSLNode, Vec3Uniform } from '../shaders/types'
+import type { ColorUniform, FloatUniform, TSLNode, Vec3Uniform } from '../shaders/types'
 
 // ============================================
 // Private helpers
@@ -368,10 +368,10 @@ export function createGradientMeshColorNode(uniforms: AmbientUniforms): TSLNode
 }
 
 export type ThemeColorUniforms = {
-  color1: Vec3Uniform
-  color2: Vec3Uniform
-  color3: Vec3Uniform
-  color4: Vec3Uniform
+  color1: ColorUniform | Vec3Uniform
+  color2: ColorUniform | Vec3Uniform
+  color3: ColorUniform | Vec3Uniform
+  color4: ColorUniform | Vec3Uniform
 }
 
 export function createThemeGradientColorNode(
@@ -448,10 +448,10 @@ export function createThemeGradientColorNode(
       add(0.7, mul(nm4, 0.3))
     )
 
-    let colorNode = mul(colors.color1, d1)
-    colorNode = add(colorNode, mul(colors.color2, d2))
-    colorNode = add(colorNode, mul(colors.color3, d3))
-    colorNode = add(colorNode, mul(colors.color4, d4))
+    let colorNode = mul(colors.color1.rgb, d1)
+    colorNode = add(colorNode, mul(colors.color2.rgb, d2))
+    colorNode = add(colorNode, mul(colors.color3.rgb, d3))
+    colorNode = add(colorNode, mul(colors.color4.rgb, d4))
 
     // Normalise first, then vignette, then intensity
     const totalWeight = add(d1, d2, d3, d4, 0.01)
@@ -555,8 +555,8 @@ export function createThemeAuroraColorNode(
     const colorDriver = add(mul(curtain2, 0.6), mul(curtain3, 0.4))
     const auroraColor = mix(colors.color1, colors.color2, colorDriver)
 
-    const skyColor = mul(colors.color1, 0.04)
-    const shimmerColor = mul(colors.color3, mul(shimmer, mul(aurora, 0.15)))
+    const skyColor = mul(colors.color1.rgb, 0.04)
+    const shimmerColor = mul(colors.color3.rgb, mul(shimmer, mul(aurora, 0.15)))
 
     return add(mix(skyColor, auroraColor, aurora), shimmerColor)
   })()
@@ -667,10 +667,10 @@ export function createThemeLavaLampColorNode(
 
     // Weighted colour blend
     const colorNode = add(
-      mul(colors.color1, w1),
-      mul(colors.color2, w2),
-      mul(colors.color3, w3),
-      mul(colors.color4, w4)
+      mul(colors.color1.rgb, w1),
+      mul(colors.color2.rgb, w2),
+      mul(colors.color3.rgb, w3),
+      mul(colors.color4.rgb, w4)
     ).div(wTotal.add(0.001))
 
     // Darken space between blobs

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

@@ -51,8 +51,8 @@ export function useThemePreset(
     watch(
       () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
       ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
+        uniforms.mouseX.value = mx ?? 0.5
+        uniforms.mouseY.value = my ?? 0.5
       },
       { immediate: true }
     )

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

@@ -7,7 +7,7 @@
 // This provides flexibility while maintaining code readability
 
 import type { UniformNode } from 'three/webgpu'
-import type { Vector3 } from 'three'
+import type { Color, Vector3 } from 'three'
 
 export type { TSLNode } from '../types/tsl'
 
@@ -17,5 +17,8 @@ export type FloatUniform = UniformNode<'float', number>
 /** Vec3 uniform: `uniform(new Vector3(...))` */
 export type Vec3Uniform = UniformNode<'vec3', Vector3>
 
+/** Color uniform: `uniform(new Color(...))` */
+export type ColorUniform = UniformNode<'color', Color>
+
 // Re-export common Three types
 export type { Color, Texture, Vector2, Vector3, Vector4 } from 'three'

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

@@ -1,11 +1,39 @@
-import type { Node } from 'three/webgpu'
+/**
+ * TSL Node types
+ *
+ * These are intentionally `any`. The Three.js TSL type system wraps every node in
+ * `ShaderNodeObject<T>` (from `three/tsl`) which adds method chaining (.add, .mul, etc.),
+ * but that type is only accessible via a deep import path and is not stable across
+ * Three.js minor versions. Components also access `.value` directly on uniform nodes
+ * (which are `UniformNode<T>`, a subclass of Node), so a simple `Node` alias would break them.
+ *
+ * TODO: Replace with `ShaderNodeObject<Node>` once three/tsl exports stabilise and
+ * uniform nodes are properly typed as `FloatUniform` at their use sites.
+ */
 
-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'>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLNode = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLFloat = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLVec2 = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLVec3 = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLVec4 = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLColor = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLMat3 = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLMat4 = any
 
 export type GradientStop = {
   position: number
@@ -19,3 +47,9 @@ export type FBMOptions = {
   amplitude?: number
   frequency?: number
 }
+
+export type VoronoiResult = {
+  distance: TSLFloat
+  cellCenter: TSLVec2
+  edgeDistance: TSLFloat
+}

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.2.9",
+  "version": "2.2.11",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -35,6 +35,7 @@
     "layers/*/app/**",
     "layers/*/public/**",
     "layers/*/server/**",
+    "types/**",
     "docs/"
   ],
   "repository": {

package/types/events.ts

@@ -0,0 +1,17 @@
+/** @consumers motion, core */
+export interface ScrollLockEvent {
+  locked: boolean
+  /** Which layer/component emitted this event */
+  source: string
+}
+
+/** @consumers core */
+export interface LoadingStateEvent {
+  loading: boolean
+  id?: string
+}
+
+/** @consumers core, motion */
+export type LayerEvent =
+  | { type: 'scroll:lock'; payload: ScrollLockEvent }
+  | { type: 'loading:state'; payload: LoadingStateEvent }

package/types/index.ts

@@ -0,0 +1,19 @@
+export type {
+  ColourMode,
+  ContrastLevel,
+  MotionPreference,
+  TransparencyPreference,
+  AccentColor,
+  ThemeState,
+  ThemeTokens,
+  ColorUsage,
+  UiColors,
+  UiSemanticColor,
+  UiStatusColor,
+  UiDefaultNuxtUiColors,
+  UiCustomColors,
+  UiBaseColor,
+} from './theme'
+export type { ScrollLockEvent, LoadingStateEvent, LayerEvent } from './events'
+export type { MotionConfig, TransitionConfig } from './motion'
+export type { PublicRuntimeConfig } from './runtime'

package/types/motion.ts

@@ -0,0 +1,14 @@
+/** @consumers motion, layout, shader */
+export interface MotionConfig {
+  duration: number
+  ease: string
+  delay?: number
+}
+
+/** @consumers motion, layout */
+export interface TransitionConfig extends MotionConfig {
+  enterFrom?: Record<string, string | number>
+  enterTo?: Record<string, string | number>
+  leaveFrom?: Record<string, string | number>
+  leaveTo?: Record<string, string | number>
+}

package/types/runtime.ts

@@ -0,0 +1,5 @@
+/** @consumers core */
+export interface PublicRuntimeConfig {
+  /** Base URL for API requests */
+  apiBase: string
+}

package/types/theme.ts

@@ -0,0 +1,60 @@
+/** @consumers ui, layout, motion, shader, theme */
+export type ColourMode = 'light' | 'dark' | 'system'
+
+/** @consumers theme, ui */
+export type ContrastLevel = 'standard' | 'high'
+
+/** @consumers motion, layout, theme */
+export type MotionPreference = 'full' | 'reduced' | 'none'
+
+/** @consumers theme, ui */
+export type TransparencyPreference = 'full' | 'reduced' | 'none'
+
+/** @consumers theme, visual, typography */
+export type AccentColor =
+  | 'red'
+  | 'orange'
+  | 'amber'
+  | 'yellow'
+  | 'lime'
+  | 'green'
+  | 'emerald'
+  | 'teal'
+  | 'cyan'
+  | 'sky'
+  | 'blue'
+  | 'indigo'
+  | 'violet'
+  | 'purple'
+  | 'fuchsia'
+  | 'pink'
+  | 'rose'
+
+/** @consumers theme, visual */
+export interface ThemeState {
+  mode: ColourMode
+  palette: string
+  contrast: ContrastLevel
+  motion: MotionPreference
+  transparency: TransparencyPreference
+}
+
+/** @consumers theme, ui */
+export interface ThemeTokens {
+  [key: string]: string
+}
+
+// UI semantic colour types (shared with typography and visual layers)
+/** @consumers typography, visual, ui */
+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