kmcom-nuxt-layers 1.7.8 → 2.1.6

package/layers/{ui → visual}/app/components/Accent/Scene.vue

@@ -1,30 +1,33 @@
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import type { AccentSceneConfig, BlobConfig } from '../../types/accent'
+  // @ts-nocheck
+  import type { AccentSceneConfig, BlobConfig } from '../../types/accent'
 
-const props = withDefaults(
-  defineProps<{
-    preset?: string
-    blobs?: BlobConfig[]
-    tag?: string
-  }>(),
-  {
-    tag: 'div',
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      preset?: string
+      blobs?: BlobConfig[]
+      tag?: string
+    }>(),
+    {
+      tag: 'div',
+    }
+  )
 
-const appConfig = useAppConfig()
+  const appConfig = useAppConfig()
 
-const resolvedBlobs = computed((): BlobConfig[] => {
-  if (props.blobs) return props.blobs
-  if (props.preset) {
-    const scenes = (appConfig.uiLayer as Record<string, unknown> | undefined)?.accentScenes as
-      | Record<string, AccentSceneConfig>
-      | undefined
-    return scenes?.[props.preset]?.blobs ?? []
-  }
-  return []
-})
+  const resolvedBlobs = computed((): BlobConfig[] => {
+    if (props.blobs) return props.blobs
+    if (props.preset) {
+      const scenes = (appConfig.uiLayer as Record<string, unknown> | undefined)?.accentScenes as
+        | Record<string, AccentSceneConfig>
+        | undefined
+      return scenes?.[props.preset]?.blobs ?? []
+    }
+    return []
+  })
 </script>
 
 <template>

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

@@ -0,0 +1,123 @@
+<!-- eslint-disable vue/require-default-prop -->
+<script setup lang="ts">
+  /**
+   * BaseModal — overlay-compatible modal shell.
+   *
+   * Use this as a starting point for new modals:
+   *   1. Copy or extend this component
+   *   2. Add your props and content in the slots
+   *   3. Register with createModal() in a composable
+   *
+   * Example:
+   *   // components/ConfirmModal.vue
+   *   <BaseModal title="Are you sure?" @confirm="..." />
+   *
+   *   // composables/confirmModal.ts
+   *   export const useConfirmModal = createModal(ConfirmModal)
+   */
+  const {
+    open = false,
+    title,
+    description,
+    size = 'md',
+  } = defineProps<{
+    open?: boolean
+    title?: string
+    description?: string
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  }>()
+
+  const emit = defineEmits<{
+    'update:open': [value: boolean]
+    close: []
+  }>()
+
+  const sizeClass: Record<string, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    full: 'max-w-full',
+  }
+
+  function dismiss() {
+    emit('update:open', false)
+    emit('close')
+  }
+</script>
+
+<template>
+  <Transition name="base-modal">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4"
+      @click.self="dismiss"
+    >
+      <!-- Backdrop -->
+      <div class="bg-muted absolute inset-0 opacity-60" @click="dismiss" />
+
+      <!-- Panel -->
+      <div
+        class="bg-default ring-default relative w-full rounded-2xl shadow-xl ring-1"
+        :class="sizeClass[size]"
+      >
+        <!-- Header -->
+        <div
+          v-if="title || $slots.header"
+          class="border-default flex items-start justify-between border-b px-6 py-4"
+        >
+          <slot name="header">
+            <div>
+              <p class="text-default text-base font-semibold">
+                {{ title }}
+              </p>
+              <p v-if="description" class="text-muted mt-0.5 text-sm">
+                {{ description }}
+              </p>
+            </div>
+          </slot>
+          <button
+            class="text-muted hover:text-default ml-4 cursor-pointer border-0 bg-transparent p-1 transition-colors"
+            aria-label="Close"
+            @click="dismiss"
+          >
+            <UIcon name="lucide:x" class="size-5" />
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="px-6 py-5">
+          <slot />
+        </div>
+
+        <!-- Footer -->
+        <div v-if="$slots.footer" class="border-default flex justify-end gap-3 border-t px-6 py-4">
+          <slot name="footer" :dismiss />
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+  .base-modal-enter-active,
+  .base-modal-leave-active {
+    transition: opacity 200ms ease;
+  }
+
+  .base-modal-enter-from,
+  .base-modal-leave-to {
+    opacity: 0;
+  }
+  .base-modal-enter-active .bg-\(--ui-bg\),
+  .base-modal-leave-active .bg-\(--ui-bg\) {
+    transition:
+      opacity 200ms ease,
+      transform 200ms ease;
+  }
+  .base-modal-enter-from .bg-\(--ui-bg\),
+  .base-modal-leave-to .bg-\(--ui-bg\) {
+    transform: scale(0.96) translateY(4px);
+    opacity: 0;
+  }
+</style>

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

@@ -0,0 +1,24 @@
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<script setup lang="ts">
+  import type { GradientConfig } from '../../types/gradient'
+
+  const props = withDefaults(
+    defineProps<{
+      preset?: string
+      config?: GradientConfig
+      tag?: string
+    }>(),
+    {
+      tag: 'div',
+    }
+  )
+
+  const { style } = useGradient(computed(() => props.preset ?? props.config ?? 'brand'))
+</script>
+
+<template>
+  <component :is="tag" :style>
+    <slot />
+  </component>
+</template>

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

@@ -0,0 +1,24 @@
+<!-- eslint-disable vue/require-default-prop -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<script setup lang="ts">
+  import type { GradientConfig } from '../../types/gradient'
+
+  const props = withDefaults(
+    defineProps<{
+      preset?: string
+      config?: GradientConfig
+      tag?: string
+    }>(),
+    {
+      tag: 'span',
+    }
+  )
+
+  const { style } = useGradient(computed(() => props.preset ?? props.config ?? 'brand'))
+</script>
+
+<template>
+  <component :is="tag" :style class="gradient-text inline-block">
+    <slot />
+  </component>
+</template>

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

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+  import { usePicture } from '../../composables/picture'
+  import type { PictureProps } from '../../types/media'
+
+  const {
+    src,
+    alt,
+    width,
+    height,
+    sizes = '100vw',
+    format = 'webp',
+    quality = 80,
+    fit = 'cover',
+    loading = 'lazy',
+    fetchpriority = 'auto',
+    decoding = 'async',
+    provider,
+    preset,
+    densities,
+    class: wrapperClass = '',
+    imgClass = '',
+  } = defineProps<PictureProps>()
+
+  const { sizesString, computedFormat } = usePicture(
+    () => sizes,
+    () => format
+  )
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-duplicate-attr-inheritance -->
+  <NuxtPicture
+    :src
+    :alt
+    :width
+    :height
+    :sizes="sizesString"
+    :format="computedFormat"
+    :quality
+    :fit
+    :loading
+    :fetchpriority
+    :decoding
+    :provider
+    :preset
+    :densities
+    :class="wrapperClass"
+    :img-attrs="{ class: imgClass }"
+    v-bind="$attrs"
+  />
+</template>

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

@@ -0,0 +1,36 @@
+<!-- eslint-disable vue/require-default-prop -->
+<script setup lang="ts">
+  const {
+    progress = null,
+    color,
+    size,
+    orientation,
+    status,
+    animation,
+    inverted,
+  } = defineProps<{
+    progress?: number | null
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+    orientation?: 'horizontal' | 'vertical'
+    status?: boolean
+    animation?: 'carousel' | 'carousel-inverse' | 'swing' | 'elastic'
+    inverted?: boolean
+  }>()
+
+  const modelValue = computed(() => (progress != null ? progress * 100 : undefined))
+
+  const progressProps = computed(() => ({
+    ...(modelValue.value !== undefined && { modelValue: modelValue.value }),
+    ...(color !== undefined && { color: color as 'primary' | 'neutral' }),
+    ...(size !== undefined && { size }),
+    ...(orientation !== undefined && { orientation }),
+    ...(status !== undefined && { status }),
+    ...(animation !== undefined && { animation }),
+    ...(inverted !== undefined && { inverted }),
+  }))
+</script>
+
+<template>
+  <UProgress v-bind="progressProps" />
+</template>

package/layers/{ui → visual}/app/components/Progress/Circular.vue

@@ -1,26 +1,27 @@
+<!-- eslint-disable vue/no-boolean-default -->
 <script setup lang="ts">
-const {
-  progress,
-  size = 120,
-  strokeWidth = 8,
-  showPercentage = true,
-  colors = ['var(--color-primary-500)', 'rgb(168, 85, 247)', 'rgb(236, 72, 153)'],
-  bgColor = 'rgb(31, 41, 55)',
-} = defineProps<{
-  progress: number
-  size?: number
-  strokeWidth?: number
-  showPercentage?: boolean
-  colors?: [string, string, string]
-  bgColor?: string
-}>()
+  const {
+    progress,
+    size = 120,
+    strokeWidth = 8,
+    showPercentage = true,
+    colors = ['var(--color-primary-500)', 'rgb(168, 85, 247)', 'rgb(236, 72, 153)'],
+    bgColor = 'rgb(31, 41, 55)',
+  } = defineProps<{
+    progress: number
+    size?: number
+    strokeWidth?: number
+    showPercentage?: boolean
+    colors?: [string, string, string]
+    bgColor?: string
+  }>()
 
-const percentage = computed(() => Math.round(progress * 100))
-const radius = computed(() => (size - strokeWidth) / 2)
-const circumference = computed(() => 2 * Math.PI * radius.value)
-const strokeDasharray = computed(() => `${progress * circumference.value} ${circumference.value}`)
+  const percentage = computed(() => Math.round(progress * 100))
+  const radius = computed(() => (size - strokeWidth) / 2)
+  const circumference = computed(() => 2 * Math.PI * radius.value)
+  const strokeDasharray = computed(() => `${progress * circumference.value} ${circumference.value}`)
 
-const gradientId = `progress-circular-gradient-${useId()}`
+  const gradientId = `progress-circular-gradient-${useId()}`
 </script>
 
 <template>
@@ -32,7 +33,7 @@ const gradientId = `progress-circular-gradient-${useId()}`
         :r="radius"
         fill="none"
         :stroke="bgColor"
-        :stroke-width="strokeWidth"
+        :stroke-width
       />
       <circle
         :cx="size / 2"
@@ -40,7 +41,7 @@ const gradientId = `progress-circular-gradient-${useId()}`
         :r="radius"
         fill="none"
         :stroke="`url(#${gradientId})`"
-        :stroke-width="strokeWidth"
+        :stroke-width
         stroke-linecap="round"
         :stroke-dasharray
         class="transition-[stroke-dasharray] duration-100"
@@ -63,7 +64,7 @@ const gradientId = `progress-circular-gradient-${useId()}`
 </template>
 
 <style scoped>
-.tabular-nums {
-  font-variant-numeric: tabular-nums;
-}
+  .tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
 </style>

package/layers/visual/app/components/Tint/Overlay.vue

@@ -0,0 +1,27 @@
+<!-- eslint-disable vue/no-unused-properties -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<script setup lang="ts">
+  import type { ColorShade, TintColorSlot, TintLevel } from '../../types/tint'
+
+  const props = withDefaults(
+    defineProps<{
+      color: TintColorSlot
+      level: TintLevel
+      shade?: ColorShade
+      tag?: string
+    }>(),
+    {
+      shade: 500,
+      tag: 'div',
+    }
+  )
+
+  const { style } = useTint(props)
+</script>
+
+<template>
+  <component :is="tag" class="relative">
+    <slot />
+    <span class="absolute inset-0 pointer-events-none" :style aria-hidden="true" />
+  </component>
+</template>

package/layers/{ui → visual}/app/composables/accent.ts

@@ -1,4 +1,5 @@
 import type { ComputedRef, CSSProperties } from 'vue'
+
 import type { BlobBlur, BlobConfig } from '../types/accent'
 
 const BLUR_PX_MAP: Record<string, number> = {

package/layers/{ui → visual}/app/composables/gradient.ts

@@ -1,4 +1,7 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
+
 import type { GradientConfig, GradientStop } from '../types/gradient'
 
 const DEFAULT_CONFIG: GradientConfig = {

package/layers/{ui → visual}/app/composables/picture.ts

@@ -1,4 +1,6 @@
+/* eslint-disable complexity */
 import type { MaybeRefOrGetter } from 'vue'
+
 import {
   BREAKPOINT_VALUES,
   DEVICE_BREAKPOINT_VALUES,

package/layers/{ui → visual}/app/composables/tint.ts

@@ -1,6 +1,7 @@
+/* eslint-disable no-restricted-syntax */
 import type { ComputedRef, CSSProperties } from 'vue'
-import { TINT_LEVEL_OPACITY } from '../types/tint'
-import type { TintConfig } from '../types/tint'
+
+import { TINT_LEVEL_OPACITY, type TintConfig } from '../types/tint'
 
 export function useTint(config: TintConfig): {
   style: ComputedRef<CSSProperties>

package/layers/{ui → visual}/app/types/accent.ts

@@ -1,7 +1,7 @@
 export type AccentBlobColor = 'primary' | 'secondary' | 'info' | 'white' | 'black' | 'custom'
 export type BlobBlur = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | number
 
-export interface BlobConfig {
+export type BlobConfig = {
   x: number
   y: number
   size?: string
@@ -12,6 +12,6 @@ export interface BlobConfig {
   customColor?: string | undefined
 }
 
-export interface AccentSceneConfig {
+export type AccentSceneConfig = {
   blobs: BlobConfig[]
 }

package/layers/{ui → visual}/app/types/gradient.ts

@@ -12,13 +12,13 @@ export type GradientShape = 'linear' | 'radial' | 'conic'
 export type GradientOpacity = 0 | 10 | 20 | 25 | 30 | 40 | 50 | 60 | 70 | 75 | 80 | 90 | 100
 export type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
 
-export interface GradientStop {
+export type GradientStop = {
   color: GradientColorSlot
   shade?: ColorShade
   opacity?: GradientOpacity
 }
 
-export interface GradientConfig {
+export type GradientConfig = {
   shape?: GradientShape
   direction?: GradientDirection
   from: GradientStop

package/layers/{ui → visual}/app/types/media.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
 /**
  * Media Types
  *
@@ -68,7 +69,7 @@ export type {
  * }
  * ```
  */
-export interface ResponsiveSizes {
+export type ResponsiveSizes = {
   default: string
   // Tailwind breakpoints
   sm?: string
@@ -98,7 +99,7 @@ export interface ResponsiveSizes {
  * Props for Picture component
  * Wraps NuxtPicture with sensible defaults and responsive sizing
  */
-export interface PictureProps {
+export type PictureProps = {
   // Required props
   /** Image source URL or path */
   src: string
@@ -177,7 +178,7 @@ export interface PictureProps {
 /**
  * Return type for usePicture composable
  */
-export interface UsePictureReturn {
+export type UsePictureReturn = {
   /** Computed sizes attribute string */
   sizesString: import('vue').ComputedRef<string>
   /** Computed format string */

package/layers/{ui → visual}/app/types/tint.ts

@@ -18,7 +18,7 @@ export const TINT_LEVEL_OPACITY: Record<TintLevel, number> = {
   heavy: 50,
 }
 
-export interface TintConfig {
+export type TintConfig = {
   color: TintColorSlot
   level: TintLevel
   shade?: ColorShade

package/layers/visual/nuxt.config.ts

@@ -0,0 +1,19 @@
+export default defineNuxtConfig({
+  $meta: { name: 'visual' },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/visual': import.meta.dirname,
+    '#layers/visual/types': `${import.meta.dirname}/app/types`,
+  },
+
+  css: ['#layers/visual/app/assets/css/visual.css'],
+
+  compatibilityDate: '2026-06-06',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/visual/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "kmcom-layer-visual",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts"
+}

package/layers/visual/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/package.json

@@ -1,14 +1,25 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.7.8",
+  "version": "2.1.6",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
+    "./layers/seo": "./layers/seo/nuxt.config.ts",
+    "./layers/scripts": "./layers/scripts/nuxt.config.ts",
+    "./layers/typography": "./layers/typography/nuxt.config.ts",
+    "./layers/navigation": "./layers/navigation/nuxt.config.ts",
+    "./layers/visual": "./layers/visual/nuxt.config.ts",
     "./layers/ui": "./layers/ui/nuxt.config.ts",
     "./layers/layout": "./layers/layout/nuxt.config.ts",
+    "./layers/scroll": "./layers/scroll/nuxt.config.ts",
+    "./layers/animations": "./layers/animations/nuxt.config.ts",
+    "./layers/transitions": "./layers/transitions/nuxt.config.ts",
+    "./layers/page-transitions": "./layers/page-transitions/nuxt.config.ts",
     "./layers/motion": "./layers/motion/nuxt.config.ts",
+    "./layers/canvas": "./layers/canvas/nuxt.config.ts",
     "./layers/shader": "./layers/shader/nuxt.config.ts",
+    "./layers/mailer": "./layers/mailer/nuxt.config.ts",
     "./layers/forms": "./layers/forms/nuxt.config.ts",
     "./layers/theme": "./layers/theme/nuxt.config.ts",
     "./layers/content": "./layers/content/nuxt.config.ts",
@@ -36,6 +47,8 @@
     "packages/*"
   ],
   "peerDependencies": {
+    "@nuxt/scripts": "^0.11.0",
+    "@nuxtjs/seo": "^2.0.0",
     "@nuxt/content": "^3.14.0",
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/image": "^2.0.0",
@@ -58,6 +71,12 @@
     "zod": "^4.4.3"
   },
   "peerDependenciesMeta": {
+    "@nuxt/scripts": {
+      "optional": true
+    },
+    "@nuxtjs/seo": {
+      "optional": true
+    },
     "@nuxtjs/device": {
       "optional": true
     },
@@ -142,7 +161,7 @@
     "eslint-plugin-unused-imports": "^4.4.1",
     "eslint-plugin-vue": "^10.9.2",
     "netlify-cli": "^26.1.0",
-    "npm-check-updates": "^22.2.1",
+    "npm-check-updates": "^22.2.2",
     "nuxt": "^4.4.7",
     "pinia": "^3.0.4",
     "playwright": "^1.60.0",
@@ -164,8 +183,8 @@
     "turbo": "^2.9.16",
     "typescript": "^6",
     "vite-plugin-checker": "^0.14.1",
-    "vitest": "^4.1.7",
-    "vue": "latest",
+    "vitest": "^4.1.8",
+    "vue": "^3.5.35",
     "vue-tsc": "3.3.3",
     "zod": "^4.4.3",
     "zod-to-json-schema": "^3.25.2"
@@ -197,6 +216,12 @@
     "dev:motion": "PLAYGROUND_LAYERS=core,motion pnpm -F playground dev",
     "build": "turbo run build",
     "lint": "turbo run lint",
+    "lint:fix": "turbo run lint -- --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "fix": "pnpm lint:fix && pnpm format",
+    "fix:layer": "f(){ pnpm turbo run lint --filter \"./layers/$1\" -- --fix && prettier --write \"layers/$1\"; }; f",
+    "fix:app": "f(){ pnpm turbo run lint --filter \"./apps/$1\" -- --fix && prettier --write \"apps/$1\"; }; f",
     "typecheck": "turbo run typecheck",
     "clean": "pnpm -r exec rm -rf node_modules .nuxt .output .data && pnpm store prune && pnpm install",
     "cleancache": "pnpm store prune --force",