kmcom-nuxt-layers 2.2.11 → 2.2.13

package/docs/fallow-refactor/layers-mailer.md

@@ -0,0 +1,32 @@
+# layers/mailer
+
+`layers/mailer` has one high-complexity email helper and one type-like duplicate group.
+
+## Complexity Findings
+
+- `1` complexity finding.
+- `layers/mailer/server/utils/email.ts:9` defines `sendContactEmail` with high complexity.
+
+## Duplication Findings
+
+- `2` duplicate warnings.
+- `app/types/mailer.ts:7-24` duplicates `server/utils/hooks.ts:3-20`.
+
+## Component Opportunities
+
+- No component extraction is relevant.
+
+## Composable Opportunities
+
+- No composable extraction is recommended.
+
+## Utility Opportunities
+
+- Move shared hook/event types into one importable type module.
+- Split `sendContactEmail()` into payload validation, recipient resolution, template data creation, and provider send call.
+
+## Acceptance Criteria
+
+- The duplicated mailer type block has one source of truth.
+- Server email sending behavior remains unchanged.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-motion.md

@@ -0,0 +1,27 @@
+# layers/motion
+
+`layers/motion` has no complexity or duplication findings in the current Fallow snapshot used for this audit.
+
+## Complexity Findings
+
+- No current findings.
+
+## Duplication Findings
+
+- No current findings in the supplied Problems export.
+
+## Component Opportunities
+
+- No extraction is recommended.
+
+## Composable Opportunities
+
+- No extraction is recommended.
+
+## Utility Opportunities
+
+- No extraction is recommended.
+
+## Agent Notes
+
+Do not create refactor work for this layer unless a later Fallow run introduces findings.

package/docs/fallow-refactor/layers-navigation.md

@@ -0,0 +1,31 @@
+# layers/navigation
+
+`layers/navigation` has a small high-complexity composable finding. It also has a circular dependency warning outside this scope, but this document focuses on complexity and duplication only.
+
+## Complexity Findings
+
+- `1` complexity finding.
+- `layers/navigation/app/composables/useSite.ts:3` defines `useSite` with high complexity.
+
+## Duplication Findings
+
+- No duplication warnings for this layer in the supplied Problems export.
+
+## Component Opportunities
+
+- No component extraction is recommended from the current findings.
+
+## Composable Opportunities
+
+- Keep `useSite()` as the public composable.
+
+## Utility Opportunities
+
+- Extract site config default resolution into a pure helper.
+- Use small helpers for title, subtitle, nav groups, and footer defaults if those branches exist in the composable.
+
+## Acceptance Criteria
+
+- `useSite()` keeps its public return shape.
+- Config fallback behavior remains unchanged.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-page-transitions.md

@@ -0,0 +1,30 @@
+# layers/page-transitions
+
+`layers/page-transitions` has only low-risk moderate complexity findings.
+
+## Complexity Findings
+
+- `2` complexity findings.
+- Both are moderate.
+- Main findings include `usePageTransition.ts:12` and `page-transitions.client.ts:3`.
+
+## Duplication Findings
+
+- No duplication warnings for this layer in the supplied Problems export.
+
+## Component Opportunities
+
+- No component extraction is recommended.
+
+## Composable Opportunities
+
+- Keep `usePageTransition()` as the public API.
+
+## Utility Opportunities
+
+- Extract transition config defaulting if more transition modes are added.
+
+## Acceptance Criteria
+
+- No behavior changes to page transition config.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-routing.md

@@ -0,0 +1,33 @@
+# layers/routing
+
+`layers/routing` has modest complexity in route resolution and middleware checks. Keep the public utility API stable.
+
+## Complexity Findings
+
+- `3` complexity findings.
+- `1` critical finding.
+- `layers/routing/app/utils/resolveRoute.ts:8` defines `resolveRoute` with cyclomatic complexity `10`.
+- `layers/routing/nuxt.config.ts:27` and `middleware/02.governance.global.ts:4` have moderate findings.
+
+## Duplication Findings
+
+- No duplication warnings for this layer in the supplied Problems export.
+
+## Component Opportunities
+
+- No component extraction is relevant.
+
+## Composable Opportunities
+
+- No composable extraction is recommended.
+
+## Utility Opportunities
+
+- Split `resolveRoute()` into maintenance, strict deny, layer deny, and feature result helpers.
+- Keep the exported `resolveRoute()` as the orchestration function.
+
+## Acceptance Criteria
+
+- `resolveRoute()` keeps the same input and output contract.
+- Individual rule helpers can be tested independently.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-scripts.md

@@ -0,0 +1,35 @@
+# layers/scripts
+
+`layers/scripts` has high-complexity script and analytics composables. Split consent decisions from script loading.
+
+## Complexity Findings
+
+- `2` complexity findings.
+- Both are high.
+- Main findings include `useAnalytics.ts:10` and `useGtm.ts:1`.
+- Fallow also identifies `useScriptsConsent.ts` as a high-impact split target because several files depend on it.
+
+## Duplication Findings
+
+- No duplication warnings for this layer in the supplied Problems export.
+
+## Component Opportunities
+
+- No component extraction is relevant.
+
+## Composable Opportunities
+
+- Keep `useAnalytics()`, `useGtm()`, and `useScriptsConsent()` as public APIs.
+- Extract consent evaluation from script loading side effects.
+
+## Utility Opportunities
+
+- Create `resolveScriptConsentState()`.
+- Create `shouldLoadScriptProvider()`.
+- Create provider-specific script config builders.
+
+## Acceptance Criteria
+
+- Consent logic can be tested without loading scripts.
+- Public composable return shapes stay stable.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-scroll.md

@@ -0,0 +1,38 @@
+# layers/scroll
+
+`layers/scroll` has complexity in scroll option handling and motion components. The work is mostly local function splitting.
+
+## Complexity Findings
+
+- `10` complexity findings.
+- `2` critical findings.
+- `layers/scroll/app/composables/useSmoothScroll.ts:63` defines `scrollTo`.
+- `layers/scroll/app/composables/useSmoothScroll.ts:116` defines `nativeScrollTo`.
+- `layers/scroll/app/components/Motion/Parallax.vue:41` has a high-complexity computed arrow function.
+
+## Duplication Findings
+
+- No duplication warnings for this layer in the supplied Problems export.
+
+## Component Opportunities
+
+- No new component is recommended.
+- Keep existing motion components as the public API.
+
+## Composable Opportunities
+
+- Keep `useSmoothScroll()` as the public API.
+- Extract option normalization into helper functions inside the composable or a utility module.
+
+## Utility Opportunities
+
+- Create `normalizeScrollTarget()`.
+- Create `normalizeScrollOptions()`.
+- Create `runNativeScroll()`.
+- Create `resolveParallaxTransform()` for the Parallax component.
+
+## Acceptance Criteria
+
+- `scrollTo` and `nativeScrollTo` become small orchestration functions.
+- Scroll behavior remains unchanged for string selectors, elements, numbers, and top scrolling.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-seo.md

@@ -0,0 +1,32 @@
+# layers/seo
+
+`layers/seo` has a small complexity finding in config resolution. Treat this as a low-risk utility cleanup.
+
+## Complexity Findings
+
+- `1` complexity finding.
+- `1` critical finding.
+- `layers/seo/app/composables/useSeoConfig.ts:1` defines `useSeoConfig` with cyclomatic complexity `11`.
+
+## Duplication Findings
+
+- No duplication warnings for this layer in the supplied Problems export.
+
+## Component Opportunities
+
+- No component extraction is relevant.
+
+## Composable Opportunities
+
+- Keep `useSeoConfig()` as the public composable.
+
+## Utility Opportunities
+
+- Extract config defaults into a pure resolver.
+- Use small helpers for site metadata, Open Graph defaults, and optional feature flags.
+
+## Acceptance Criteria
+
+- `useSeoConfig()` becomes a thin wrapper around pure resolvers.
+- Existing SEO config output remains unchanged.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-shader.md

@@ -0,0 +1,53 @@
+# layers/shader
+
+`layers/shader` dominates the duplication report. It also has several critical complexity findings, but most work should preserve public component names and extract shared internals.
+
+## Complexity Findings
+
+- `41` complexity findings.
+- `6` critical findings.
+- `layers/shader/app/composables/useShader.ts:38` defines `applyConfig` with cyclomatic complexity `18` and cognitive complexity `20`.
+- Other critical findings include `Material/Gradient.client.vue`, `Material/Node.client.vue`, `Shader/Background.client.vue`, and shader layer uniform update functions.
+
+## Duplication Findings
+
+- `341` duplicate warnings.
+- `useAmbientMaterials.ts:272-368` duplicates `useAmbientMaterials.ts:496-563` for `97` lines.
+- `Material/AmbientFlow.client.vue:22-102` duplicates `Material/AmbientNebula.client.vue:23-103` for `81` lines.
+- `Material/AmbientGradientMesh.client.vue:30-100` duplicates `Material/AmbientNebula.client.vue:30-100` for `71` lines.
+- `Material/AmbientAurora.client.vue:28-92` duplicates `Material/AmbientOcean.client.vue:30-94` for `65` lines.
+- Many `Pipeline/*` components duplicate uniform setup and stage registration.
+- `Preset/Theme*.client.vue` files share a repeated theme preset wrapper pattern.
+
+## Component Opportunities
+
+- Create an internal material host component for repeated canvas and plane markup.
+- Create a shared preset shell for ambient preset components.
+- Consider `Preset/Theme.client.vue` with a `preset` prop, while keeping existing `Preset/ThemeWave.client.vue`, `Preset/ThemeAurora.client.vue`, and similar wrappers.
+
+## Composable Opportunities
+
+- Create `useReactiveShaderUniforms()` for repeated prop-to-uniform watchers.
+- Create `useAmbientMaterial()` for shared speed, intensity, mouse, and color uniforms.
+- Create `usePipelineStageUniforms()` for repeated `uniform()` plus `watch()` setup in pipeline components.
+- Create `useShaderMaterialPlane()` for material creation, disposal, and render-plane lifecycle.
+
+## Utility Opportunities
+
+- Create `layers/shader/app/utils/materialConfig.ts` for `applyNodeMaterialConfig()`.
+- Create `layers/shader/app/utils/uniformSetters.ts` for repeated uniform updates.
+- Create `layers/shader/app/utils/tsl/ambient.ts` for mouse offset, radial falloff, flow warp, aurora curtain, and palette mixing helpers.
+- Extract shared noise pipeline builders that accept a noise strategy and color strategy.
+
+## Refactor Constraints
+
+- Do not collapse all public pipeline components into one dynamic component unless there is a migration plan.
+- Keep public auto-import component files as thin wrappers if needed.
+- Consolidate internals before changing public component APIs.
+
+## Acceptance Criteria
+
+- The largest shader duplicate groups shrink materially.
+- Public shader component names continue to auto-import.
+- `applyConfig` drops below critical complexity.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-theme.md

@@ -0,0 +1,33 @@
+# layers/theme
+
+`layers/theme` has one duplicate with the playground and one server-side CSS generation complexity finding.
+
+## Complexity Findings
+
+- `2` complexity findings.
+- `layers/theme/server/plugins/theme-fouc.ts:86` defines `buildAccentCSS` with high complexity.
+- `layers/theme/app/plugins/theme.client.ts:5` has a moderate setup finding.
+
+## Duplication Findings
+
+- `1` duplicate warning.
+- `ThemePicker/Menu.vue:12-27` duplicates `apps/playground/app/pages/theme.vue:29-45`.
+
+## Component Opportunities
+
+- Keep the canonical theme picker menu in `layers/theme`.
+- Update the playground theme page to consume the layer component instead of duplicating menu behavior.
+
+## Composable Opportunities
+
+- No new composable is required from the current findings.
+
+## Utility Opportunities
+
+- Split `buildAccentCSS()` into token extraction, CSS variable formatting, and selector assembly helpers.
+
+## Acceptance Criteria
+
+- The playground theme page no longer duplicates `ThemePicker/Menu.vue` logic.
+- `buildAccentCSS()` delegates formatting to pure helpers.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-transitions.md

@@ -0,0 +1,27 @@
+# layers/transitions
+
+`layers/transitions` has no complexity or duplication findings in the current Fallow snapshot used for this audit.
+
+## Complexity Findings
+
+- No current findings.
+
+## Duplication Findings
+
+- No current findings in the supplied Problems export.
+
+## Component Opportunities
+
+- No extraction is recommended.
+
+## Composable Opportunities
+
+- No extraction is recommended.
+
+## Utility Opportunities
+
+- No extraction is recommended.
+
+## Agent Notes
+
+Do not create refactor work for this layer unless a later Fallow run introduces findings.

package/docs/fallow-refactor/layers-typography.md

@@ -0,0 +1,29 @@
+# layers/typography
+
+`layers/typography` has one moderate normalization finding. Treat this as a low-priority utility cleanup.
+
+## Complexity Findings
+
+- `1` complexity finding.
+- `layers/typography/app/composables/typography.ts:17` defines `normalizeAxis` with moderate complexity.
+
+## Duplication Findings
+
+- No duplication warnings for this layer in the supplied Problems export.
+
+## Component Opportunities
+
+- No component extraction is recommended.
+
+## Composable Opportunities
+
+- Keep typography composables stable.
+
+## Utility Opportunities
+
+- Replace branching in `normalizeAxis()` with a lookup table if the supported axes are fixed.
+
+## Acceptance Criteria
+
+- Axis normalization output remains unchanged.
+- `pnpm typecheck` passes.

package/docs/fallow-refactor/layers-ui.md

@@ -0,0 +1,27 @@
+# layers/ui
+
+`layers/ui` has no complexity or duplication findings in the current Fallow snapshot used for this audit.
+
+## Complexity Findings
+
+- No current findings.
+
+## Duplication Findings
+
+- No current findings in the supplied Problems export.
+
+## Component Opportunities
+
+- No extraction is recommended.
+
+## Composable Opportunities
+
+- No extraction is recommended.
+
+## Utility Opportunities
+
+- No extraction is recommended.
+
+## Agent Notes
+
+Do not create refactor work for this layer unless a later Fallow run introduces findings.

package/docs/fallow-refactor/layers-visual.md

@@ -0,0 +1,34 @@
+# layers/visual
+
+`layers/visual` has complexity in responsive image size formatting and gradient style helpers. Prefer pure utilities.
+
+## Complexity Findings
+
+- `7` complexity findings.
+- `1` critical finding.
+- `layers/visual/app/composables/picture.ts:34` defines `responsiveSizesToString` with cyclomatic complexity `13` and cognitive complexity `17`.
+- `layers/visual/app/composables/gradient.ts` has several high-complexity color and style helpers.
+
+## Duplication Findings
+
+- No duplication warnings for this layer in the supplied Problems export.
+
+## Component Opportunities
+
+- No component extraction is recommended.
+
+## Composable Opportunities
+
+- Keep `picture.ts` and `gradient.ts` composable entry points stable.
+
+## Utility Opportunities
+
+- Split `responsiveSizesToString()` into parser, normalizer, and serializer helpers.
+- Extract shared color resolution used by accent and gradient helpers.
+- Create a gradient style builder utility that has no Vue dependencies.
+
+## Acceptance Criteria
+
+- `responsiveSizesToString` drops below critical complexity.
+- Existing `Media/Picture.vue` behavior remains unchanged.
+- `pnpm typecheck` passes.

package/layers/animations/app/composables/useMagneticElement.ts

@@ -1,3 +1,5 @@
+import { resolvePointerSpring, usePointerMotionFrame } from '../utils/pointerMotion'
+
 export function useMagneticElement(
   elementRef: Ref<HTMLElement | null>,
   opts: {
@@ -7,7 +9,6 @@ export function useMagneticElement(
     stiffness?: number
   } = {}
 ) {
-  const { gsap } = useGsap()
   const { elementX, elementY, elementWidth, elementHeight } = useMouseInElement(elementRef)
 
   const currentX = ref(0)
@@ -33,20 +34,21 @@ export function useMagneticElement(
       targetY = dy * strength
     }
 
-    currentX.value += (targetX - currentX.value) * stiffness
-    currentX.value *= 1 - damping
-    currentY.value += (targetY - currentY.value) * stiffness
-    currentY.value *= 1 - damping
+    currentX.value = resolvePointerSpring(currentX.value, targetX, {
+      damping,
+      stiffness,
+    })
+    currentY.value = resolvePointerSpring(currentY.value, targetY, {
+      damping,
+      stiffness,
+    })
 
     if (elementRef.value) {
       gsap.set(elementRef.value, { x: currentX.value, y: currentY.value })
     }
   }
 
-  onMounted(() => gsap.ticker.add(tick))
-
-  onUnmounted(() => {
-    gsap.ticker.remove(tick)
+  const { gsap } = usePointerMotionFrame(tick, () => {
     if (elementRef.value) gsap.set(elementRef.value, { x: 0, y: 0 })
   })
 

package/layers/animations/app/composables/useTiltEffect.ts

@@ -1,3 +1,5 @@
+import { resolvePointerSpring, usePointerMotionFrame } from '../utils/pointerMotion'
+
 export function useTiltEffect(
   elementRef: Ref<HTMLElement | null>,
   opts: {
@@ -7,7 +9,6 @@ export function useTiltEffect(
     stiffness?: number
   } = {}
 ) {
-  const { gsap } = useGsap()
   const { elementX, elementY, elementWidth, elementHeight, isOutside } =
     useMouseInElement(elementRef)
 
@@ -33,10 +34,14 @@ export function useTiltEffect(
       targetRotateX = -ny * maxTilt
     }
 
-    currentRotateX.value += (targetRotateX - currentRotateX.value) * stiffness
-    currentRotateX.value *= 1 - damping
-    currentRotateY.value += (targetRotateY - currentRotateY.value) * stiffness
-    currentRotateY.value *= 1 - damping
+    currentRotateX.value = resolvePointerSpring(currentRotateX.value, targetRotateX, {
+      damping,
+      stiffness,
+    })
+    currentRotateY.value = resolvePointerSpring(currentRotateY.value, targetRotateY, {
+      damping,
+      stiffness,
+    })
 
     if (elementRef.value) {
       gsap.set(elementRef.value, {
@@ -47,10 +52,7 @@ export function useTiltEffect(
     }
   }
 
-  onMounted(() => gsap.ticker.add(tick))
-
-  onUnmounted(() => {
-    gsap.ticker.remove(tick)
+  const { gsap } = usePointerMotionFrame(tick, () => {
     if (elementRef.value) gsap.set(elementRef.value, { rotateX: 0, rotateY: 0 })
   })
 

package/layers/animations/app/utils/pointerMotion.ts

@@ -0,0 +1,31 @@
+export function resolvePointerSpring(
+  current: number,
+  target: number,
+  options: {
+    damping?: number
+    stiffness?: number
+  } = {}
+) {
+  const damping = options.damping ?? 0
+  const stiffness = options.stiffness ?? 0
+  const next = current + (target - current) * stiffness
+  return next * (1 - damping)
+}
+
+export function usePointerMotionFrame(
+  update: () => void,
+  cleanup?: () => void
+) {
+  const { gsap } = useGsap()
+
+  onMounted(() => {
+    gsap.ticker.add(update)
+  })
+
+  onUnmounted(() => {
+    gsap.ticker.remove(update)
+    cleanup?.()
+  })
+
+  return { gsap }
+}

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

@@ -9,7 +9,7 @@
     SRGBColorSpace,
     type ToneMapping,
   } from 'three'
-  import { WebGPURenderer } from 'three/webgpu'
+  import * as ThreeWebGPU from 'three/webgpu'
 
   const {
     clearColor = '#000000',
@@ -70,7 +70,7 @@
   // WebGPU renderer factory — TresJS v5 calls renderer.init() automatically
   // when the returned object has isRenderer === true (three/webgpu Renderer base class)
   function webgpuRendererFactory({ canvas }: TresRendererSetupContext) {
-    const r = new WebGPURenderer({
+    const r = new ThreeWebGPU.WebGPURenderer({
       canvas: unref(canvas),
       antialias,
       // WebGPU has no 'default' power preference — omit to let the browser decide

package/layers/content/app/composables/useCollectionItems.ts

@@ -0,0 +1,28 @@
+import type { Collections } from '@nuxt/content'
+
+type CollectionItem<TCollection extends keyof Collections> = Collections[TCollection]
+
+export function useCollectionItems<TCollection extends keyof Collections>(args: {
+  key: string
+  collection: TCollection
+  sort: (a: CollectionItem<TCollection>, b: CollectionItem<TCollection>) => number
+  options?: { limit?: number | undefined }
+  filter?: (item: CollectionItem<TCollection>) => boolean
+}) {
+  const { key, collection, sort, options = {}, filter } = args
+
+  return useContentData(key, async () => {
+    let items = (await queryCollection(collection).all()) as CollectionItem<TCollection>[]
+    items = items.sort(sort)
+
+    if (filter) {
+      items = items.filter(filter)
+    }
+
+    if (options.limit !== undefined) {
+      items = items.slice(0, options.limit)
+    }
+
+    return items
+  })
+}

package/layers/content/app/composables/useGalleryItems.ts

@@ -1,21 +1,15 @@
 import type { GalleryQueryOptions } from '../types/content'
+import { useCollectionItems } from './useCollectionItems'
 
 export function useGalleryItems(options: GalleryQueryOptions = {}) {
   const { tags, limit } = options
 
-  return useContentData('gallery-items', async () => {
-    let items = (await queryCollection('gallery').all()).sort((a, b) =>
-      (b.date ?? '').localeCompare(a.date ?? '')
-    )
-
-    if (tags?.length) {
-      items = items.filter((item) => item.tags?.some((tag: string) => tags.includes(tag)))
-    }
-
-    if (limit) {
-      items = items.slice(0, limit)
-    }
-
-    return items
+  return useCollectionItems({
+    key: 'gallery-items',
+    collection: 'gallery',
+    sort: (a, b) => (b.date ?? '').localeCompare(a.date ?? ''),
+    options: { limit },
+    filter: (item) =>
+      !tags?.length || Boolean(item.tags?.some((tag: string) => tags.includes(tag))),
   })
 }