kmcom-nuxt-layers 1.3.1 → 1.5.0

package/layers/ui/app/components/Progress/Circular.vue

@@ -0,0 +1,69 @@
+<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 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-${Math.random().toString(36).slice(2, 9)}`
+</script>
+
+<template>
+  <div class="progress-circular relative inline-flex items-center justify-center">
+    <svg :width="size" :height="size" class="-rotate-90" :viewBox="`0 0 ${size} ${size}`">
+      <circle
+        :cx="size / 2"
+        :cy="size / 2"
+        :r="radius"
+        fill="none"
+        :stroke="bgColor"
+        :stroke-width="strokeWidth"
+      />
+      <circle
+        :cx="size / 2"
+        :cy="size / 2"
+        :r="radius"
+        fill="none"
+        :stroke="`url(#${gradientId})`"
+        :stroke-width="strokeWidth"
+        stroke-linecap="round"
+        :stroke-dasharray
+        class="transition-[stroke-dasharray] duration-100"
+      />
+      <defs>
+        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" :style="`stop-color: ${colors[0]}`" />
+          <stop offset="50%" :style="`stop-color: ${colors[1]}`" />
+          <stop offset="100%" :style="`stop-color: ${colors[2]}`" />
+        </linearGradient>
+      </defs>
+    </svg>
+    <span
+      v-if="showPercentage"
+      class="absolute inset-0 flex items-center justify-center text-2xl font-bold tabular-nums"
+    >
+      {{ percentage }}%
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+</style>

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

@@ -0,0 +1,25 @@
+<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="style" aria-hidden="true" />
+  </component>
+</template>

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

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-defineOptions({ inheritAttrs: false })
 import { useColor } from '../../composables/color'
 import type { UiColors } from '../../types/colors'
 import type { FontSize } from '../../types/typography'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     language?: string

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-defineOptions({ inheritAttrs: false })
 import { useColor } from '../../composables/color'
 import { useTypography } from '../../composables/typography'
 import type { UiColors } from '../../types/colors'
@@ -14,6 +13,8 @@ import type {
   TextTransform,
 } from '../../types/typography'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-defineOptions({ inheritAttrs: false })
 import { useColor } from '../../composables/color'
 import type { UiColors } from '../../types/colors'
 import type { FontSize } from '../../types/typography'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<{ color?: UiColors; size?: FontSize }>()
 const colorClass = useColor(props.color, 'text')
 </script>

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

@@ -35,7 +35,9 @@ const effectiveStrokeWidth = computed(() =>
     v-bind="$attrs"
   >
     <!-- Sizer: transparent text for natural sizing + selectable -->
-    <span class="text-stroke-sizer text-transparent whitespace-nowrap" aria-hidden="true">{{ text }}</span>
+    <span class="text-stroke-sizer text-transparent whitespace-nowrap" aria-hidden="true">{{
+      text
+    }}</span>
 
     <!-- Visual SVG stroke -->
     <svg
@@ -50,18 +52,16 @@ const effectiveStrokeWidth = computed(() =>
       <defs v-if="fill === 'none'">
         <mask :id="`stroke-mask-${id}`">
           <rect x="-9999" y="-9999" width="99999" height="99999" fill="white" />
-          <text
-            x="0" y="0"
-            dominant-baseline="text-before-edge"
-            fill="black"
-            style="font: inherit"
-          >{{ text }}</text>
+          <text x="0" y="0" dominant-baseline="text-before-edge" fill="black" style="font: inherit">
+            {{ text }}
+          </text>
         </mask>
       </defs>
 
       <text
         v-if="fill === 'none'"
-        x="0" y="0"
+        x="0"
+        y="0"
         dominant-baseline="text-before-edge"
         fill="none"
         :stroke="strokeColor"
@@ -70,12 +70,15 @@ const effectiveStrokeWidth = computed(() =>
         vector-effect="non-scaling-stroke"
         :mask="`url(#stroke-mask-${id})`"
         style="font: inherit"
-      >{{ text }}</text>
+      >
+        {{ text }}
+      </text>
 
       <!-- Fill+stroke mode: paint-order renders stroke behind fill -->
       <text
         v-else
-        x="0" y="0"
+        x="0"
+        y="0"
         dominant-baseline="text-before-edge"
         :fill="fill"
         :stroke="strokeColor"
@@ -84,24 +87,23 @@ const effectiveStrokeWidth = computed(() =>
         vector-effect="non-scaling-stroke"
         paint-order="stroke"
         style="font: inherit"
-      >{{ text }}</text>
+      >
+        {{ text }}
+      </text>
     </svg>
 
     <!-- Accessible label for screen readers -->
-    <span
-      :id="`stroke-text-${id}`"
-      class="sr-only"
-    >{{ text }}</span>
+    <span :id="`stroke-text-${id}`" class="sr-only">{{ text }}</span>
   </component>
 </template>
 
 <style scoped>
-
 @media (forced-colors: active) {
   .text-stroke-sizer {
     visibility: visible;
     color: CanvasText;
   }
+
   .text-stroke-svg {
     display: none;
   }

package/layers/ui/app/composables/accent.ts

@@ -0,0 +1,51 @@
+import type { ComputedRef, CSSProperties } from 'vue'
+import type { BlobBlur, BlobConfig } from '../types/accent'
+
+const BLUR_PX_MAP: Record<string, number> = {
+  none: 0,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 40,
+  '3xl': 64,
+}
+
+function resolveBlurPx(blur: BlobBlur = '3xl'): number {
+  if (typeof blur === 'number') return blur
+  return BLUR_PX_MAP[blur] ?? 64
+}
+
+function resolveColor(config: BlobConfig): string {
+  const { color = 'primary', shade = 500, customColor } = config
+  if (color === 'custom') return customColor ?? 'transparent'
+  if (color === 'white') return '#ffffff'
+  if (color === 'black') return '#000000'
+  return `var(--ui-color-${color}-${shade})`
+}
+
+export function useAccentBlob(config: BlobConfig): {
+  style: ComputedRef<CSSProperties>
+} {
+  const style = computed((): CSSProperties => {
+    const size = config.size ?? '40rem'
+    const opacity = (config.opacity ?? 25) / 100
+    const blurPx = resolveBlurPx(config.blur)
+
+    return {
+      position: 'absolute',
+      left: `${config.x}%`,
+      top: `${config.y}%`,
+      transform: 'translate(-50%, -50%)',
+      width: size,
+      height: size,
+      backgroundColor: resolveColor(config),
+      opacity,
+      borderRadius: '9999px',
+      filter: blurPx > 0 ? `blur(${blurPx}px)` : undefined,
+      pointerEvents: 'none',
+    }
+  })
+
+  return { style }
+}

package/layers/ui/app/composables/gradient.ts

@@ -0,0 +1,79 @@
+import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
+import type { GradientConfig, GradientStop } from '../types/gradient'
+
+const DEFAULT_CONFIG: GradientConfig = {
+  shape: 'linear',
+  direction: 'to-br',
+  from: { color: 'primary', shade: 500 },
+  to: { color: 'secondary', shade: 500 },
+}
+
+const DIRECTION_MAP: Record<string, string> = {
+  'to-t': 'to top',
+  'to-tr': 'to top right',
+  'to-r': 'to right',
+  'to-br': 'to bottom right',
+  'to-b': 'to bottom',
+  'to-bl': 'to bottom left',
+  'to-l': 'to left',
+  'to-tl': 'to top left',
+}
+
+function resolveColor(stop: GradientStop): string {
+  const { color, shade = 500, opacity } = stop
+  if (color === 'transparent') return 'transparent'
+  if (color === 'white') {
+    return opacity !== undefined ? `rgb(255 255 255 / ${opacity / 100})` : '#ffffff'
+  }
+  if (color === 'black') {
+    return opacity !== undefined ? `rgb(0 0 0 / ${opacity / 100})` : '#000000'
+  }
+  const v = `var(--ui-color-${color}-${shade})`
+  return opacity !== undefined ? `color-mix(in srgb, ${v} ${opacity}%, transparent)` : v
+}
+
+function buildStyle(cfg: GradientConfig): CSSProperties {
+  const from = resolveColor(cfg.from)
+  const to = resolveColor(cfg.to)
+  const via = cfg.via ? resolveColor(cfg.via) : undefined
+  const stops = via ? `${from}, ${via}, ${to}` : `${from}, ${to}`
+
+  if (cfg.shape === 'radial') {
+    return { backgroundImage: `radial-gradient(circle, ${stops})` }
+  }
+  if (cfg.shape === 'conic') {
+    return { backgroundImage: `conic-gradient(${stops})` }
+  }
+  const dir = DIRECTION_MAP[cfg.direction ?? 'to-br'] ?? 'to bottom right'
+  return { backgroundImage: `linear-gradient(${dir}, ${stops})` }
+}
+
+export function useGradient(
+  config: MaybeRefOrGetter<GradientConfig | string>,
+  overrides?: MaybeRefOrGetter<Partial<GradientConfig>>
+): { style: ComputedRef<CSSProperties> } {
+  const appConfig = useAppConfig()
+
+  const style = computed((): CSSProperties => {
+    const raw = toValue(config)
+    const override = overrides ? toValue(overrides) : undefined
+
+    let resolved: GradientConfig
+    if (typeof raw === 'string') {
+      const preset = (appConfig.uiLayer as Record<string, unknown> | undefined)?.gradients as
+        | Record<string, GradientConfig>
+        | undefined
+      resolved = preset?.[raw] ?? DEFAULT_CONFIG
+    } else {
+      resolved = raw
+    }
+
+    if (override) {
+      resolved = { ...resolved, ...override }
+    }
+
+    return buildStyle(resolved)
+  })
+
+  return { style }
+}

package/layers/ui/app/composables/tint.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef, CSSProperties } from 'vue'
+import { TINT_LEVEL_OPACITY } from '../types/tint'
+import type { TintConfig } from '../types/tint'
+
+export function useTint(config: TintConfig): {
+  style: ComputedRef<CSSProperties>
+} {
+  const style = computed((): CSSProperties => {
+    const { color, shade = 500 } = config
+    let backgroundColor: string
+    if (color === 'white') backgroundColor = '#ffffff'
+    else if (color === 'black') backgroundColor = '#000000'
+    else backgroundColor = `var(--ui-color-${color}-${shade})`
+
+    const opacity = TINT_LEVEL_OPACITY[config.level] / 100
+    return { backgroundColor, opacity }
+  })
+
+  return { style }
+}

package/layers/ui/app/types/accent.ts

@@ -0,0 +1,17 @@
+export type AccentBlobColor = 'primary' | 'secondary' | 'info' | 'white' | 'black' | 'custom'
+export type BlobBlur = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | number
+
+export interface BlobConfig {
+  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
+}
+
+export interface AccentSceneConfig {
+  blobs: BlobConfig[]
+}

package/layers/ui/app/types/gradient.ts

@@ -0,0 +1,27 @@
+export type GradientColorSlot = 'primary' | 'secondary' | 'info' | 'white' | 'black' | 'transparent'
+export type GradientDirection =
+  | 'to-t'
+  | 'to-tr'
+  | 'to-r'
+  | 'to-br'
+  | 'to-b'
+  | 'to-bl'
+  | 'to-l'
+  | 'to-tl'
+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 {
+  color: GradientColorSlot
+  shade?: ColorShade
+  opacity?: GradientOpacity
+}
+
+export interface GradientConfig {
+  shape?: GradientShape
+  direction?: GradientDirection
+  from: GradientStop
+  via?: GradientStop
+  to: GradientStop
+}

package/layers/ui/app/types/tint.ts

@@ -0,0 +1,25 @@
+export type TintLevel = 'subtle' | 'light' | 'medium' | 'strong' | 'heavy'
+export type TintColorSlot =
+  | 'primary'
+  | 'secondary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'white'
+  | 'black'
+export type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+
+export const TINT_LEVEL_OPACITY: Record<TintLevel, number> = {
+  subtle: 5,
+  light: 10,
+  medium: 20,
+  strong: 35,
+  heavy: 50,
+}
+
+export interface TintConfig {
+  color: TintColorSlot
+  level: TintLevel
+  shade?: ColorShade
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",
@@ -21,26 +21,26 @@
     "packages/*"
   ],
   "peerDependencies": {
-    "@nuxt/content": "^3.0.0",
-    "@nuxt/eslint": "^1.0.0",
+    "@nuxt/content": "^3.12.0",
+    "@nuxt/eslint": "^1.15.2",
     "@nuxt/image": "^2.0.0",
-    "@nuxt/ui": "^4.5.0",
+    "@nuxt/ui": "^4.5.1",
     "@nuxtjs/device": "^4.0.0",
-    "@tresjs/cientos": "^5.0.0",
-    "@tresjs/core": "^5.0.0",
-    "@tresjs/nuxt": "^5.0.0",
-    "@tresjs/post-processing": "^3.0.0",
-    "@vite-pwa/nuxt": "^1.0.0",
-    "@vueuse/nuxt": "^14.0.0",
-    "better-sqlite3": "^12.0.0",
-    "gsap": "^3.12.0",
-    "locomotive-scroll": "^5.0.0",
+    "@tresjs/cientos": "^5.4.0",
+    "@tresjs/core": "^5.5.0",
+    "@tresjs/nuxt": "^5.3.0",
+    "@tresjs/post-processing": "^3.4.0",
+    "@vite-pwa/nuxt": "^1.1.1",
+    "@vueuse/nuxt": "^14.2.1",
+    "better-sqlite3": "^12.6.2",
+    "gsap": "^3.14.2",
+    "locomotive-scroll": "^5.0.1",
     "nuxt": "^4.3.1",
-    "nuxt-studio": "^1.0.0",
-    "pinia": "^3.0.0",
+    "nuxt-studio": "^1.4.0",
+    "pinia": "^3.0.4",
     "tailwindcss": "^4.2.1",
-    "three": "^0.170.0",
-    "zod": "^3.20.0"
+    "three": "^0.183.2",
+    "zod": "^4.3.6"
   },
   "peerDependenciesMeta": {
     "@nuxtjs/device": {
@@ -87,21 +87,21 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.4.1",
-    "@commitlint/config-conventional": "^20.4.1",
-    "@culur/config-stylelint": "^1.6.4",
+    "@commitlint/cli": "^20.4.3",
+    "@commitlint/config-conventional": "^20.4.3",
+    "@culur/config-stylelint": "^1.6.5",
     "@eslint/json": "^1.0.1",
     "@eslint/markdown": "^7.5.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
-    "@iconify-json/lucide": "^1.2.89",
+    "@iconify-json/lucide": "^1.2.95",
     "@nuxt/eslint": "^1.15.2",
-    "@nuxt/fonts": "^0.13.0",
+    "@nuxt/fonts": "^0.14.0",
     "@nuxt/image": "^2.0.0",
     "@nuxt/ui": "latest",
     "@nuxtjs/device": "^4.0.0",
     "@perplex-digital/stylelint-config": "^17.3.0",
     "@pinia/nuxt": "^0.11.3",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.3.3",
     "@typescript-eslint/eslint-plugin": "^8.56.1",
     "@typescript-eslint/parser": "^8.56.1",
     "@vue/eslint-config-typescript": "^14.7.0",
@@ -113,7 +113,7 @@
     "cypress": "^15.10.0",
     "depcheck": "^1.4.7",
     "eslint": "^10.0.2",
-    "eslint-plugin-compat": "^6.2.0",
+    "eslint-plugin-compat": "^6.2.1",
     "eslint-plugin-glsl": "0.0.0-wip",
     "eslint-plugin-oxlint": "^1.50.0",
     "eslint-plugin-pnpm": "^1.6.0",
@@ -121,7 +121,7 @@
     "eslint-plugin-unicorn": "^63.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
     "eslint-plugin-vue": "^10.8.0",
-    "npm-check-updates": "^19.5.0",
+    "npm-check-updates": "^19.6.3",
     "nuxt": "latest",
     "oxlint": "^1.43.0",
     "pinia": "^3.0.4",
@@ -129,11 +129,11 @@
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.1",
     "prettier-plugin-css-order": "^2.2.0",
-    "prettier-plugin-glsl": "^0.2.3",
+    "prettier-plugin-glsl": "^0.2.4",
     "prettier-plugin-organize-attributes": "^1.0.0",
     "prettier-plugin-tailwind-styled-components": "^2.0.2",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "stylelint": "^17.1.1",
+    "stylelint": "^17.4.0",
     "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-vue": "^1.0.0",
@@ -141,12 +141,14 @@
     "stylelint-no-unsupported-browser-features": "^8.1.1",
     "stylelint-prettier": "^5.0.3",
     "tailwindcss": "^4.2.1",
-    "turbo": "^2.8.10",
+    "turbo": "^2.8.13",
     "typescript": "^5.9.3",
     "vite-plugin-checker": "^0.12.0",
     "vitest": "^4.0.18",
     "vue": "latest",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.2.5",
+    "zod": "^4.3.6",
+    "zod-to-json-schema": "^3.25.1"
   },
   "browserslist": [
     "last 2 Chrome major versions",
@@ -155,7 +157,10 @@
     "last 2 Edge major versions"
   ],
   "dependencies": {
-    "skills": "^1.4.1"
+    "skills": "^1.4.3"
+  },
+  "engines": {
+    "node": ">=18 <21"
   },
   "scripts": {
     "dev": "pnpm -F playground dev",
@@ -195,6 +200,7 @@
     "layer:rebuild:ui": "pnpm build:ui && pnpm layer:generate:ui && pnpm layer:ui",
     "layer:rebuild:layout": "pnpm build:layout && pnpm layer:generate:layout && pnpm layer:layout",
     "layer:rebuild:motion": "pnpm build:motion && pnpm layer:generate:motion && pnpm layer:motion",
-    "browserlist": "npx update-browserslist-db@latest"
+    "browserlist": "npx update-browserslist-db@latest",
+    "deploy": "turbo run build --filter playground"
   }
 }