kmcom-nuxt-layers 2.2.6 → 2.2.9

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/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 ."
   }
 }

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

@@ -1,3 +1,6 @@
+import type { GradientConfig } from './types/gradient'
+import type { AccentSceneConfig } from './types/accent'
+
 export default defineAppConfig({
   uiLayer: {
     gradients: {
@@ -107,8 +110,8 @@ declare module '@nuxt/schema' {
   interface AppConfigInput {
     uiLayer?: {
       name?: string
-      gradients?: Record<string, import('./types/gradient').GradientConfig>
-      accentScenes?: Record<string, import('./types/accent').AccentSceneConfig>
+      gradients?: Record<string, GradientConfig>
+      accentScenes?: Record<string, AccentSceneConfig>
     }
   }
 }

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

@@ -1,27 +1,27 @@
 <script setup lang="ts">
   import type { AccentBlobColor, BlobBlur } from '../../types/accent'
 
-  const props = withDefaults(
-    defineProps<{
-      x: number
-      y: number
-      size?: string
-      blur?: BlobBlur
-      opacity?: number
-      color?: AccentBlobColor
-      shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
-      customColor?: string
-    }>(),
-    {
-      size: '40rem',
-      blur: '3xl',
-      opacity: 25,
-      color: 'primary',
-      shade: 500,
-    }
-  )
+  const {
+    x,
+    y,
+    size = '40rem',
+    blur = '3xl',
+    opacity = 25,
+    color = 'primary',
+    shade = 500,
+    customColor = undefined,
+  } = defineProps<{
+    x: number
+    y: number
+    size?: string
+    blur?: BlobBlur
+    opacity?: number
+    color?: AccentBlobColor
+    shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+    customColor?: string
+  }>()
 
-  const { style } = useAccentBlob(props)
+  const { style } = useAccentBlob(() => ({ x, y, size, blur, opacity, color, shade, customColor }))
 </script>
 
 <template>

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

@@ -2,8 +2,8 @@
   import type { AccentSceneConfig, BlobConfig } from '../../types/accent'
 
   const {
-    preset,
-    blobs,
+    preset = undefined,
+    blobs = undefined,
     tag = 'div',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Base/Modal.vue

@@ -16,8 +16,8 @@
    */
   const {
     open = false,
-    title,
-    description,
+    title = undefined,
+    description = undefined,
     size = 'md',
   } = defineProps<{
     open?: boolean

package/layers/visual/app/components/Gradient/Background.vue

@@ -2,8 +2,8 @@
   import type { GradientConfig } from '../../types/gradient'
 
   const {
-    preset,
-    config,
+    preset = undefined,
+    config = undefined,
     tag = 'div',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Gradient/Text.vue

@@ -2,8 +2,8 @@
   import type { GradientConfig } from '../../types/gradient'
 
   const {
-    preset,
-    config,
+    preset = undefined,
+    config = undefined,
     tag = 'span',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Media/Picture.vue

@@ -2,6 +2,8 @@
   import { usePicture } from '../../composables/picture'
   import type { PictureProps } from '../../types/media'
 
+  defineOptions({ inheritAttrs: false })
+
   const {
     src,
     alt,
@@ -40,7 +42,7 @@
     :loading
     :fetchpriority
     :decoding
-    :provider="(provider as any)"
+    :provider="provider as any"
     :preset
     :densities
     :class="wrapperClass"

package/layers/visual/app/components/Progress/Bar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
   const {
     progress = null,
-    color,
-    size,
-    orientation,
-    status,
-    animation,
-    inverted,
+    color = undefined,
+    size = undefined,
+    orientation = undefined,
+    status = undefined,
+    animation = undefined,
+    inverted = undefined,
   } = defineProps<{
     progress?: number | null
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'