kmcom-nuxt-layers 2.2.0 → 2.2.1

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import { abs, float, floor, Fn, fract, length, min, mod, sin, vec2 } from 'three/tsl'
 
 import type { TSLNode } from '../../types'
@@ -18,7 +16,7 @@ export const checker = Fn(([uv, scale]: [TSLNode, TSLNode]) => {
  * Grid lines pattern
  */
 export const grid = Fn(([uv, scale, lineWidth]: [TSLNode, TSLNode, TSLNode]) => {
-  const scaledUV = fract(uv.mul(scale))
+  const scaledUV: TSLNode = fract(uv.mul(scale))
   const halfWidth = lineWidth.mul(0.5)
   const xLine = scaledUV.x.lessThan(halfWidth).or(scaledUV.x.greaterThan(float(1.0).sub(halfWidth)))
   const yLine = scaledUV.y.lessThan(halfWidth).or(scaledUV.y.greaterThan(float(1.0).sub(halfWidth)))
@@ -117,7 +115,7 @@ export const bricks = Fn(([uv, scale, ratio, gap]: [TSLNode, TSLNode, TSLNode, T
 export const concentricCircles = Fn(
   ([uv, center, scale, width]: [TSLNode, TSLNode, TSLNode, TSLNode]) => {
     const dist = length(uv.sub(center))
-    const rings = fract(dist.mul(scale))
+    const rings: TSLNode = fract(dist.mul(scale))
     return rings.lessThan(width).select(float(1.0), float(0.0))
   }
 )
@@ -142,7 +140,7 @@ export const radialLines = Fn(
  */
 export const diamonds = Fn(([uv, scale]: [TSLNode, TSLNode]) => {
   const scaledUV = fract(uv.mul(scale))
-  const centered = abs(scaledUV.sub(0.5))
+  const centered: TSLNode = abs(scaledUV.sub(0.5))
   return centered.x.add(centered.y).lessThan(0.5).select(float(1.0), float(0.0))
 })
 
@@ -151,7 +149,7 @@ export const diamonds = Fn(([uv, scale]: [TSLNode, TSLNode]) => {
  */
 export const triangles = Fn(([uv, scale]: [TSLNode, TSLNode]) => {
   const scaledUV = uv.mul(scale)
-  const p = fract(scaledUV)
+  const p: TSLNode = fract(scaledUV)
   const row = floor(scaledUV.y)
   const flip = mod(row, 2.0)
 

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

@@ -1,5 +1,3 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable max-params */
 /**
  * GPU-friendly uniform tweening via requestAnimationFrame.
  * Updates uniform .value each frame -- no shader recompilation.
@@ -43,9 +41,9 @@ export function tweenUniform(
 
     if (rawT < 1) {
       requestAnimationFrame(tick)
-    } else {
-      resolvePromise()
+      return
     }
+    resolvePromise()
   }
 
   requestAnimationFrame(tick)

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import { atan, cos, float, Fn, fract, length, sin, vec2 } from 'three/tsl'
 
 import type { TSLNode } from '../../types'
@@ -48,17 +46,19 @@ export const polarUV = Fn(([uv, center]: [TSLNode, TSLNode]) => {
  * Convert polar coordinates back to cartesian
  */
 export const cartesianUV = Fn(([polar, center]: [TSLNode, TSLNode]) => {
-  const angle = polar.x.sub(0.5).mul(Math.PI * 2)
+  const angle: TSLNode = polar.x.sub(0.5).mul(Math.PI * 2)
   const radius = polar.y
-  return vec2(cos(angle).mul(radius), sin(angle).mul(radius)).add(center)
+  const x: TSLNode = cos(angle).mul(radius)
+  const y: TSLNode = sin(angle).mul(radius)
+  return vec2(x, y).add(center)
 })
 
 /**
  * Wave distortion on UV
  */
 export const waveUV = Fn(([uv, freq, amp, time]: [TSLNode, TSLNode, TSLNode, TSLNode]) => {
-  const waveX = sin(uv.y.mul(freq).add(time)).mul(amp)
-  const waveY = sin(uv.x.mul(freq).add(time)).mul(amp)
+  const waveX: TSLNode = sin(uv.y.mul(freq).add(time)).mul(amp)
+  const waveY: TSLNode = sin(uv.x.mul(freq).add(time)).mul(amp)
   return uv.add(vec2(waveX, waveY))
 })
 

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

@@ -36,8 +36,6 @@
 </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="[
@@ -48,6 +46,6 @@
     :style="bgStyle"
     :aria-label="`Set accent color to ${color}`"
     :aria-pressed="active"
-    @click="emit('select', color)"
+    @click="() => emit('select', color)"
   />
 </template>

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
   import type { AccentColor } from '#layers/theme/app/types/theme'
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { AccentColor } from '#layers/theme/app/types/theme'
 import { createSharedComposable } from '@vueuse/core'
 

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

@@ -1,8 +1,8 @@
-/* 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(() => {
+export default defineNuxtPlugin({
+  name: 'theme:theme',
+  setup() {
   const { setAccent, activeAccent } = useAccentColor()
   const { setContrastOverride, effectiveHighContrast } = useThemeContrast()
   const { setMotionOverride, effectiveReducedMotion } = useThemeMotion()
@@ -54,4 +54,5 @@ export default defineNuxtPlugin(() => {
     },
     { immediate: true }
   )
+  },
 })

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

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

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

@@ -1,23 +1,16 @@
-<!-- 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',
-    }
-  )
+  const {
+    name = 'fade',
+    duration = 300,
+    delay = 0,
+    easing = 'ease-out',
+  } = defineProps<{
+    name?: string
+    duration?: number
+    delay?: number
+    easing?: string
+  }>()
 
   // State
   const isVisible = ref(false)
@@ -25,14 +18,14 @@
 
   // Computed classes
   const transitionClass = computed(() => {
-    return `transition-${props.name}`
+    return `transition-${name}`
   })
 
   const style = computed(() => {
     return {
-      transitionDuration: `${props.duration}ms`,
-      transitionDelay: `${props.delay}ms`,
-      transitionTimingFunction: props.easing,
+      transitionDuration: `${duration}ms`,
+      transitionDelay: `${delay}ms`,
+      transitionTimingFunction: easing,
     }
   })
 

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

@@ -1,5 +1,3 @@
-<!-- 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'
@@ -7,19 +5,18 @@
 
   defineOptions({ inheritAttrs: false })
 
-  const props = withDefaults(
-    defineProps<{
-      language?: string
-      color?: UiColors
-      size?: FontSize
-      class?: string
-    }>(),
-    {
-      class: '',
-      color: 'default',
-    }
-  )
-  const colorClass = useColor(props.color, 'text')
+  const {
+    language,
+    color = 'default',
+    size,
+    class: classProp = '',
+  } = defineProps<{
+    language?: string
+    color?: UiColors
+    size?: FontSize
+    class?: string
+  }>()
+  const colorClass = useColor(color, 'text')
 </script>
 
 <template>
@@ -27,16 +24,16 @@
     tag="pre"
     v-bind="{
       ...$attrs,
-      ...(props.size !== undefined && { size: props.size }),
-      ...(props.language !== undefined && { 'data-language': props.language }),
+      ...(size !== undefined && { size: size }),
+      ...(language !== undefined && { 'data-language': language }),
     }"
     class="overflow-x-auto"
-    :class="[props.class]"
+    :class="[classProp]"
   >
     <Typography
       tag="code"
       class="font-mono"
-      :class="[colorClass, props.language ? `language-${props.language}` : '']"
+      :class="[colorClass, language ? `language-${language}` : '']"
     >
       <slot />
     </Typography>

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

@@ -1,5 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
-<!-- eslint-disable vue/define-props-destructuring -->
 <script lang="ts" setup>
   import { useColor } from '../../composables/color'
   import { useTypography } from '../../composables/typography'
@@ -17,36 +15,35 @@
 
   defineOptions({ inheritAttrs: false })
 
-  const props = withDefaults(
-    defineProps<{
-      level?: 1 | 2 | 3 | 4 | 5 | 6
-      weight?: FontWeight
-      width?: FontWidth
-      slant?: FontSlant
-      leading?: FontLeading
-      tracking?: FontTracking
-      align?: TextAlign
-      transform?: TextTransform
-      color?: UiColors
-      size?: FontSize
-      class?: string
-    }>(),
-    {
-      level: 1,
-      weight: 'font-bold',
-      width: 'font-stretch-normal',
-      slant: 'normal',
-      leading: 'leading-tight',
-      tracking: 'tracking-tight',
-      align: 'left',
-      transform: 'none',
-      class: '',
-    }
-  )
-  const tag = computed(() => `h${props.level}` as const)
+  const {
+    level = 1,
+    weight = 'font-bold',
+    width = 'font-stretch-normal',
+    slant = 'normal',
+    leading = 'leading-tight',
+    tracking = 'tracking-tight',
+    align = 'left',
+    transform = 'none',
+    color,
+    size,
+    class: classProp = '',
+  } = defineProps<{
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+    weight?: FontWeight
+    width?: FontWidth
+    slant?: FontSlant
+    leading?: FontLeading
+    tracking?: FontTracking
+    align?: TextAlign
+    transform?: TextTransform
+    color?: UiColors
+    size?: FontSize
+    class?: string
+  }>()
+  const tag = computed(() => `h${level}` as const)
 
   const sizeClass = computed(() => {
-    if (props.size) return null
+    if (size) return null
 
     const sizes: Record<number, string> = {
       1: 'text-4xl sm:text-5xl',
@@ -56,34 +53,34 @@
       5: 'text-lg sm:text-xl',
       6: 'text-base sm:text-lg',
     }
-    return sizes[props.level]
+    return sizes[level]
   })
 
   const { classes } = useTypography({
-    weight: props.weight,
-    width: props.width,
-    slant: props.slant,
-    leading: props.leading,
-    tracking: props.tracking,
-    align: props.align,
-    transform: props.transform,
-    ...(props.size !== undefined && { size: props.size }),
+    weight: weight,
+    width: width,
+    slant: slant,
+    leading: leading,
+    tracking: tracking,
+    align: align,
+    transform: transform,
+    ...(size !== undefined && { size: size }),
   })
-  const colorClass = useColor(props.color, 'text')
+  const colorClass = useColor(color, 'text')
 </script>
 
 <template>
   <Typography
     :tag
-    :weight="props.weight"
-    :width="props.width"
-    :slant="props.slant"
-    :leading="props.leading"
-    :tracking="props.tracking"
-    :align="props.align"
-    :transform="props.transform"
-    :class="[sizeClass, classes, colorClass, props.class]"
-    v-bind="{ ...(props.size !== undefined && { size: props.size }), ...$attrs }"
+    :weight
+    :width
+    :slant
+    :leading
+    :tracking
+    :align
+    :transform
+    :class="[sizeClass, classes, colorClass, classProp]"
+    v-bind="{ ...(size !== undefined && { size: size }), ...$attrs }"
   >
     <slot />
   </Typography>

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

@@ -1,5 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
-<!-- eslint-disable vue/define-props-destructuring -->
 <script lang="ts" setup>
   import { useColor } from '../../composables/color'
   import { useTypography } from '../../composables/typography'
@@ -17,35 +15,33 @@
 
   defineOptions({ inheritAttrs: false })
 
-  const props = withDefaults(
-    defineProps<{
-      level?: 1 | 2 | 3 | 4 | 5 | 6
-      size?: FontScreenSize
-      weight?: FontWeight
-      width?: FontWidth
-      slant?: FontSlant
-      leading?: FontLeading
-      tracking?: FontTracking
-      align?: TextAlign
-      transform?: TextTransform
-      color?: UiColors
-      class?: string
-    }>(),
-    {
-      level: 1,
-      size: 'screen-xxl',
-      weight: 'font-bold',
-      width: 'font-stretch-normal',
-      slant: 'normal',
-      leading: 'leading-tight',
-      tracking: 'tracking-tight',
-      align: 'left',
-      transform: 'none',
-      class: '',
-    }
-  )
+  const {
+    level = 1,
+    size = 'screen-xxl',
+    weight = 'font-bold',
+    width = 'font-stretch-normal',
+    slant = 'normal',
+    leading = 'leading-tight',
+    tracking = 'tracking-tight',
+    align = 'left',
+    transform = 'none',
+    color,
+    class: classProp = '',
+  } = defineProps<{
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+    size?: FontScreenSize
+    weight?: FontWeight
+    width?: FontWidth
+    slant?: FontSlant
+    leading?: FontLeading
+    tracking?: FontTracking
+    align?: TextAlign
+    transform?: TextTransform
+    color?: UiColors
+    class?: string
+  }>()
 
-  const tag = computed(() => `h${props.level}` as const)
+  const tag = computed(() => `h${level}` as const)
 
   const sizeMap: Record<string, string> = {
     screen: 'text-screen',
@@ -53,23 +49,23 @@
     'screen-xxl': 'text-screen-xxl',
     'screen-xxxl': 'text-screen-xxxl',
   }
-  const sizeClass = computed(() => sizeMap[props.size] ?? 'text-screen-xxl')
+  const sizeClass = computed(() => sizeMap[size] ?? 'text-screen-xxl')
 
   const { classes } = useTypography({
-    weight: props.weight,
-    width: props.width,
-    slant: props.slant,
-    leading: props.leading,
-    tracking: props.tracking,
-    align: props.align,
-    transform: props.transform,
+    weight: weight,
+    width: width,
+    slant: slant,
+    leading: leading,
+    tracking: tracking,
+    align: align,
+    transform: transform,
   })
 
-  const colorClass = useColor(props.color, 'text')
+  const colorClass = useColor(color, 'text')
 </script>
 
 <template>
-  <component :is="tag" :class="[sizeClass, classes, colorClass, props.class]" v-bind="$attrs">
+  <component :is="tag" :class="[sizeClass, classes, colorClass, classProp]" v-bind="$attrs">
     <slot />
   </component>
 </template>

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
   import { useColor } from '../../composables/color'
   import type { UiColors } from '../../types/colors'
@@ -6,15 +5,15 @@
 
   defineOptions({ inheritAttrs: false })
 
-  const props = defineProps<{ color?: UiColors; size?: FontSize }>()
-  const colorClass = useColor(props.color, 'text')
+  const { color, size } = defineProps<{ color?: UiColors; size?: FontSize }>()
+  const colorClass = useColor(color, 'text')
 </script>
 
 <template>
   <Typography
     tag="blockquote"
     :class="colorClass"
-    v-bind="{ ...(props.size !== undefined && { size: props.size }), ...$attrs }"
+    v-bind="{ ...(size !== undefined && { size: size }), ...$attrs }"
   >
     <slot />
   </Typography>

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

@@ -1,32 +1,27 @@
-<!-- eslint-disable vue/define-props-destructuring -->
 <script lang="ts" setup>
-  const props = withDefaults(
-    defineProps<{
-      text: string
-      strokeWidth?: number
-      strokeColor?: string
-      fill?: string
-      linejoin?: 'round' | 'miter' | 'bevel'
-      tag?: string
-    }>(),
-    {
-      strokeWidth: 1.5,
-      strokeColor: 'currentColor',
-      fill: 'none',
-      linejoin: 'round',
-      tag: 'div',
-    }
-  )
+  const {
+    strokeWidth = 1.5,
+    strokeColor = 'currentColor',
+    fill = 'none',
+    linejoin = 'round',
+    tag = 'div',
+  } = defineProps<{
+    text: string
+    strokeWidth?: number
+    strokeColor?: string
+    fill?: string
+    linejoin?: 'round' | 'miter' | 'bevel'
+    tag?: string
+  }>()
   const id = useId()
   const contrast = usePreferredContrast()
 
   const effectiveStrokeWidth = computed(() =>
-    contrast.value === 'more' ? props.strokeWidth * 1.5 : props.strokeWidth
+    contrast.value === 'more' ? strokeWidth * 1.5 : strokeWidth
   )
 </script>
 
 <template>
-  <!-- eslint-disable vue/no-duplicate-attr-inheritance -->
   <component
     :is="tag"
     class="text-stroke inline-grid leading-none *:[grid-area:1/1]"

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

@@ -1,6 +1,3 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable vue/require-default-prop -->
-<!-- eslint-disable vue/no-unused-properties -->
 <script lang="ts" setup>
   import { useColor } from '../../composables/color'
   import { useTypography } from '../../composables/typography'
@@ -47,7 +44,6 @@
 </script>
 
 <template>
-  <!-- eslint-disable-next-line vue/no-duplicate-attr-inheritance -->
   <component :is="tag" :class="[classes, colorClass]" v-bind="$attrs">
     <slot />
   </component>

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import type {
   FontLeading,
   FontSize,
@@ -23,16 +22,19 @@ function normalizeAxis(
   const { prefix = '', fallback = '', numericFormatter } = options
 
   if (typeof value === 'number') {
-    return numericFormatter
-      ? numericFormatter(value)
-      : prefix
-        ? `${prefix}-[${value}]`
-        : `[${value}]`
+    if (numericFormatter) return numericFormatter(value)
+    if (prefix) return `${prefix}-[${value}]`
+    return `[${value}]`
   }
 
   return value ?? fallback
 }
 
+function getSizeClass(size: FontSize | undefined): string {
+  if (!size) return ''
+  return typeof size === 'number' ? `text-[${size}]` : `text-${size}`
+}
+
 export function useTypography(props: {
   weight?: FontWeight
   slant?: FontSlant
@@ -68,11 +70,7 @@ export function useTypography(props: {
         fallback: 'tracking-normal',
       }),
 
-      props.size
-        ? typeof props.size === 'number'
-          ? `text-[${props.size}]`
-          : `text-${props.size}`
-        : '',
+      getSizeClass(props.size),
 
       props.align ? `text-${props.align}` : '',
 

package/layers/visual/app/app.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-imports */
 export default defineAppConfig({
   uiLayer: {
     gradients: {
@@ -105,7 +104,7 @@ export default defineAppConfig({
 })
 
 declare module '@nuxt/schema' {
-  type AppConfigInput = {
+  interface AppConfigInput {
     uiLayer?: {
       name?: string
       gradients?: Record<string, import('./types/gradient').GradientConfig>

package/layers/visual/app/components/Accent/Blob.vue

@@ -1,6 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
-<!-- eslint-disable vue/no-unused-properties -->
-<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
   import type { AccentBlobColor, BlobBlur } from '../../types/accent'