kmcom-nuxt-layers 2.2.11 → 2.2.13

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

@@ -1,6 +1,7 @@
 import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
 
-import type { GradientConfig, GradientStop } from '../types/gradient'
+import type { GradientConfig } from '../types/gradient'
+import { buildGradientStyle } from '../utils/gradientStyle'
 
 const DEFAULT_CONFIG: GradientConfig = {
   shape: 'linear',
@@ -9,44 +10,41 @@ const DEFAULT_CONFIG: GradientConfig = {
   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 resolveGradientConfig(
+  raw: GradientConfig | string,
+  override: Partial<GradientConfig> | undefined,
+  appConfig: ReturnType<typeof useAppConfig>
+): GradientConfig {
+  return mergeGradientOverride(resolveGradientPreset(raw, appConfig), override)
 }
 
-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 resolveGradientPreset(
+  raw: GradientConfig | string,
+  appConfig: ReturnType<typeof useAppConfig>
+): GradientConfig {
+  if (typeof raw !== 'string') return raw
+
+  return resolveGradientPresetByName(raw, getGradientPresetMap(appConfig))
+}
+
+function getGradientPresetMap(appConfig: ReturnType<typeof useAppConfig>) {
+  return (appConfig.uiLayer as Record<string, unknown> | undefined)?.['gradients'] as
+    | Record<string, GradientConfig>
+    | undefined
 }
 
-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}`
+function resolveGradientPresetByName(
+  name: string,
+  presets: Record<string, GradientConfig> | undefined
+) {
+  return presets?.[name] ?? DEFAULT_CONFIG
+}
 
-  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})` }
+function mergeGradientOverride(
+  resolved: GradientConfig,
+  override: Partial<GradientConfig> | undefined
+): GradientConfig {
+  return override ? { ...resolved, ...override } : resolved
 }
 
 export function useGradient(
@@ -58,18 +56,7 @@ export function useGradient(
   const style = computed((): CSSProperties => {
     const raw = toValue(config)
     const override = overrides ? toValue(overrides) : undefined
-
-    const presets = (appConfig.uiLayer as Record<string, unknown> | undefined)?.['gradients'] as
-      | Record<string, GradientConfig>
-      | undefined
-    let resolved: GradientConfig =
-      typeof raw === 'string' ? (presets?.[raw] ?? DEFAULT_CONFIG) : raw
-
-    if (override) {
-      resolved = { ...resolved, ...override }
-    }
-
-    return buildStyle(resolved)
+    return buildGradientStyle(resolveGradientConfig(raw, override, appConfig))
   })
 
   return { style }

package/layers/visual/app/composables/picture.ts

@@ -1,12 +1,7 @@
 import type { MaybeRefOrGetter } from 'vue'
 
-import {
-  BREAKPOINT_VALUES,
-  DEVICE_BREAKPOINT_VALUES,
-  PHONE_BREAKPOINT_VALUES,
-  TABLET_BREAKPOINT_VALUES,
-} from '../types/breakpoints'
 import type { PictureProps, ResponsiveSizes, UsePictureReturn } from '../types/media'
+import { buildResponsiveSizesQueries } from '../utils/responsiveSizes'
 
 /**
  * Convert ResponsiveSizes object to CSS sizes attribute string
@@ -32,79 +27,7 @@ import type { PictureProps, ResponsiveSizes, UsePictureReturn } from '../types/m
  * ```
  */
 function responsiveSizesToString(sizes: ResponsiveSizes): string {
-  // Combine all min-width breakpoints with their values
-  const breakpointEntries: Array<{ key: keyof ResponsiveSizes; value: number }> = []
-
-  // Add Tailwind breakpoints
-  const tailwindBreakpoints: Array<keyof typeof BREAKPOINT_VALUES> = ['2xl', 'xl', 'lg', 'md', 'sm']
-  for (const bp of tailwindBreakpoints) {
-    if (sizes[bp]) {
-      breakpointEntries.push({ key: bp, value: BREAKPOINT_VALUES[bp] })
-    }
-  }
-
-  // Add device breakpoints (skip mobile as it's 0px - handled by default)
-  const deviceBreakpoints: Array<keyof typeof DEVICE_BREAKPOINT_VALUES> = [
-    'wide',
-    'desktop',
-    'tablet',
-  ]
-  for (const bp of deviceBreakpoints) {
-    if (sizes[bp]) {
-      breakpointEntries.push({ key: bp, value: DEVICE_BREAKPOINT_VALUES[bp] })
-    }
-  }
-
-  // Add phone breakpoints
-  const phoneBreakpoints: Array<keyof typeof PHONE_BREAKPOINT_VALUES> = [
-    'phone-lg',
-    'phone-md',
-    'phone-sm',
-  ]
-  for (const bp of phoneBreakpoints) {
-    if (sizes[bp]) {
-      breakpointEntries.push({ key: bp, value: PHONE_BREAKPOINT_VALUES[bp] })
-    }
-  }
-
-  // Add tablet breakpoints
-  const tabletBreakpoints: Array<keyof typeof TABLET_BREAKPOINT_VALUES> = [
-    'tablet-lg',
-    'tablet-md',
-    'tablet-sm',
-  ]
-  for (const bp of tabletBreakpoints) {
-    if (sizes[bp]) {
-      breakpointEntries.push({ key: bp, value: TABLET_BREAKPOINT_VALUES[bp] })
-    }
-  }
-
-  // Sort by value descending (largest to smallest)
-  breakpointEntries.sort((a, b) => b.value - a.value)
-
-  // Build media queries
-  const mediaQueries: string[] = []
-
-  // Add orientation breakpoints first (these are feature queries, not min-width)
-  if (sizes.landscape) {
-    mediaQueries.push(`(orientation: landscape) ${sizes.landscape}`)
-  }
-  if (sizes.portrait) {
-    mediaQueries.push(`(orientation: portrait) ${sizes.portrait}`)
-  }
-
-  // Add min-width breakpoints
-  for (const entry of breakpointEntries) {
-    const size = sizes[entry.key]
-    if (size) {
-      mediaQueries.push(`(min-width: ${entry.value}px) ${size}`)
-    }
-  }
-
-  // Add default size at the end (no media query)
-  mediaQueries.push(sizes.default)
-
-  return mediaQueries.join(', ')
+  return buildResponsiveSizesQueries(sizes).join(', ')
 }
 
 /**

package/layers/visual/app/utils/colorTokens.ts

@@ -0,0 +1,23 @@
+type ResolvableColorToken = {
+  color?: string | undefined
+  shade?: number | undefined
+  opacity?: number | undefined
+  customColor?: string | undefined
+}
+
+// fallow-ignore-next-line complexity
+export function resolveUiColorToken(token: ResolvableColorToken): string {
+  const { color = 'primary', shade = 500, opacity, customColor } = token
+
+  if (color === 'custom') return customColor ?? 'transparent'
+  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 value = `var(--ui-color-${color}-${shade})`
+  return opacity !== undefined ? `color-mix(in srgb, ${value} ${opacity}%, transparent)` : value
+}

package/layers/visual/app/utils/gradientStyle.ts

@@ -0,0 +1,41 @@
+import type { CSSProperties } from 'vue'
+
+import type { GradientConfig, GradientStop } from '../types/gradient'
+import { resolveUiColorToken } from './colorTokens'
+
+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',
+}
+
+export function resolveGradientColor(stop: GradientStop): string {
+  return resolveUiColorToken(stop)
+}
+
+function resolveGradientStops(cfg: GradientConfig) {
+  const from = resolveGradientColor(cfg.from)
+  const to = resolveGradientColor(cfg.to)
+  const via = cfg.via ? resolveGradientColor(cfg.via) : undefined
+  return via ? `${from}, ${via}, ${to}` : `${from}, ${to}`
+}
+
+// fallow-ignore-next-line complexity
+export function buildGradientStyle(cfg: GradientConfig): CSSProperties {
+  const stops = resolveGradientStops(cfg)
+
+  if (cfg.shape === 'radial') {
+    return { backgroundImage: `radial-gradient(circle, ${stops})` }
+  }
+  if (cfg.shape === 'conic') {
+    return { backgroundImage: `conic-gradient(${stops})` }
+  }
+
+  const direction = DIRECTION_MAP[cfg.direction ?? 'to-br'] ?? 'to bottom right'
+  return { backgroundImage: `linear-gradient(${direction}, ${stops})` }
+}

package/layers/visual/app/utils/responsiveSizes.ts

@@ -0,0 +1,49 @@
+import {
+  BREAKPOINT_VALUES,
+  DEVICE_BREAKPOINT_VALUES,
+  PHONE_BREAKPOINT_VALUES,
+  TABLET_BREAKPOINT_VALUES,
+} from '../types/breakpoints'
+
+import type { ResponsiveSizes } from '../types/media'
+
+type BreakpointGroup = readonly [keyof ResponsiveSizes, number]
+
+const BREAKPOINT_GROUPS = [
+  ['2xl', BREAKPOINT_VALUES['2xl']],
+  ['xl', BREAKPOINT_VALUES.xl],
+  ['lg', BREAKPOINT_VALUES.lg],
+  ['md', BREAKPOINT_VALUES.md],
+  ['sm', BREAKPOINT_VALUES.sm],
+  ['wide', DEVICE_BREAKPOINT_VALUES.wide],
+  ['desktop', DEVICE_BREAKPOINT_VALUES.desktop],
+  ['tablet', DEVICE_BREAKPOINT_VALUES.tablet],
+  ['phone-lg', PHONE_BREAKPOINT_VALUES['phone-lg']],
+  ['phone-md', PHONE_BREAKPOINT_VALUES['phone-md']],
+  ['phone-sm', PHONE_BREAKPOINT_VALUES['phone-sm']],
+  ['tablet-lg', TABLET_BREAKPOINT_VALUES['tablet-lg']],
+  ['tablet-md', TABLET_BREAKPOINT_VALUES['tablet-md']],
+  ['tablet-sm', TABLET_BREAKPOINT_VALUES['tablet-sm']],
+] as const satisfies readonly BreakpointGroup[]
+
+// fallow-ignore-next-line complexity
+export function buildResponsiveSizesQueries(sizes: ResponsiveSizes): string[] {
+  const breakpoints = BREAKPOINT_GROUPS.filter(([key]) => sizes[key])
+    .map(([key, value]) => ({ key, value }))
+    .sort((a, b) => b.value - a.value)
+
+  const queries: string[] = []
+
+  if (sizes.landscape) queries.push(`(orientation: landscape) ${sizes.landscape}`)
+  if (sizes.portrait) queries.push(`(orientation: portrait) ${sizes.portrait}`)
+
+  for (const breakpoint of breakpoints) {
+    const size = sizes[breakpoint.key]
+    if (size) {
+      queries.push(`(min-width: ${breakpoint.value}px) ${size}`)
+    }
+  }
+
+  queries.push(sizes.default)
+  return queries
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.2.11",
+  "version": "2.2.13",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -139,16 +139,20 @@
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/fonts": "^0.14.0",
     "@nuxt/image": "^2.0.0",
+    "@nuxt/test-utils": "^4.0.3",
+    "@playwright/test": "1.61.0",
     "@nuxt/ui": "latest",
     "@nuxtjs/device": "^4.0.0",
     "@oxc-parser/binding-darwin-arm64": "^0.134.0",
     "@perplex-digital/stylelint-config": "^17.4.0",
     "@pinia/nuxt": "^0.11.3",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@types/node": "^25.9.1",
     "@types/three": "^0.184.1",
     "@typescript-eslint/eslint-plugin": "^8.60.1",
     "@typescript-eslint/parser": "^8.60.1",
     "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/test-utils": "^2.4.10",
     "@vueuse/core": "^14.3.0",
     "@vueuse/nuxt": "^14.3.0",
     "@webgpu/glslang": "^0.0.15",
@@ -167,11 +171,11 @@
     "eslint-plugin-unused-imports": "^4.4.1",
     "eslint-plugin-vue": "^10.9.2",
     "fallow": "^2.92.1",
+    "happy-dom": "^20.10.3",
     "netlify-cli": "^26.1.0",
     "npm-check-updates": "^22.2.2",
     "nuxt": "^4.4.7",
     "pinia": "^3.0.4",
-    "playwright": "^1.60.0",
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.3",
     "prettier-plugin-css-order": "^2.2.0",
@@ -201,11 +205,11 @@
     "last 2 Chrome major versions",
     "last 2 Firefox major versions",
     "last 2 Safari major versions",
-    "last 2 Edge major versions"
+    "last 2 Edge major versions",
+    "baseline widely available"
   ],
   "dependencies": {
     "node-gyp": "^12.3.0",
-    "pnpm": "11.5.3",
     "skills": "^1.5.10"
   },
   "engines": {
@@ -213,7 +217,7 @@
   },
   "volta": {
     "node": "24.16.0",
-    "pnpm": "11.5.1"
+    "pnpm": "11.5.3"
   },
   "scripts": {
     "dev": "pnpm -F playground dev",
@@ -232,6 +236,14 @@
     "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": "vue-tsc --noEmit -p tsconfig.typecheck.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:unit": "vitest run --project unit",
+    "test:vitest": "vitest run --project vitest",
+    "test:vue": "vitest run --project vue",
+    "test:nuxt": "vitest run --project nuxt",
+    "test:playwright": "playwright test",
+    "test:e2e": "playwright test",
     "clean": "pnpm -r exec rm -rf node_modules .nuxt .output .data && pnpm store prune && pnpm install",
     "cleancache": "pnpm store prune --force",
     "update": "ncu -i",

package/layers/feeds/server/routes/feed/discovery.get.ts

@@ -1,29 +0,0 @@
-export default defineEventHandler((event) => {
-  const appConfig = useAppConfig()
-  const feedConfig = appConfig.feedsLayer?.feed ?? {}
-  const collections: string[] = feedConfig.collections ?? ['blog']
-
-  const requestUrl = getRequestURL(event)
-  // Always use the request origin so discovery URLs are reachable from wherever
-  // the request came from, not the configured canonical site URL.
-  const baseUrl = `${requestUrl.protocol}//${requestUrl.host}`
-
-  setHeader(event, 'Cache-Control', 'public, max-age=300, s-maxage=3600')
-
-  const formats = [
-    { format: 'RSS 2.0', ext: 'rss', contentType: 'application/rss+xml' },
-    { format: 'Atom 1.0', ext: 'atom', contentType: 'application/atom+xml' },
-    { format: 'JSON Feed 1.1', ext: 'json', contentType: 'application/feed+json' },
-  ]
-
-  return {
-    feeds: collections.flatMap((collection) =>
-      formats.map(({ format, ext, contentType }) => ({
-        collection,
-        format,
-        url: `${baseUrl}/feed/${collection}/${ext}`,
-        contentType,
-      }))
-    ),
-  }
-})