kmcom-nuxt-layers 2.2.12 → 2.3.0

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

@@ -24,13 +24,9 @@ function normalizeAxis(
 ) {
   const { prefix = '', fallback = '', numericFormatter } = options
 
-  if (typeof value === 'number') {
-    if (numericFormatter) return numericFormatter(value)
-    if (prefix) return `${prefix}-[${value}]`
-    return `[${value}]`
-  }
-
-  return value ?? fallback
+  return typeof value === 'number'
+    ? numericFormatter?.(value) ?? (prefix ? `${prefix}-[${value}]` : `[${value}]`)
+    : value ?? fallback
 }
 
 function getSizeClass(size: FontSize | undefined): string {

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

@@ -2,6 +2,7 @@ import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
 
 import type { BlobBlur, BlobConfig } from '../types/accent'
+import { resolveUiColorToken } from '../utils/colorTokens'
 
 const BLUR_PX_MAP: Record<string, number> = {
   none: 0,
@@ -18,14 +19,6 @@ function resolveBlurPx(blur: BlobBlur = '3xl'): number {
   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: MaybeRefOrGetter<BlobConfig>): {
   style: ComputedRef<CSSProperties>
 } {
@@ -42,7 +35,7 @@ export function useAccentBlob(config: MaybeRefOrGetter<BlobConfig>): {
       transform: 'translate(-50%, -50%)',
       width: size,
       height: size,
-      backgroundColor: resolveColor(resolved),
+      backgroundColor: resolveUiColorToken(resolved),
       opacity,
       borderRadius: '9999px',
       filter: blurPx > 0 ? `blur(${blurPx}px)` : undefined,

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.12",
+  "version": "2.3.0",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -24,7 +24,8 @@
     "./layers/theme": "./layers/theme/nuxt.config.ts",
     "./layers/content": "./layers/content/nuxt.config.ts",
     "./layers/feeds": "./layers/feeds/nuxt.config.ts",
-    "./layers/routing": "./layers/routing/nuxt.config.ts"
+    "./layers/routing": "./layers/routing/nuxt.config.ts",
+    "./layers/starter": "./layers/starter/nuxt.config.ts"
   },
   "files": [
     "layers/*/nuxt.config.ts",
@@ -139,16 +140,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 +172,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",
@@ -206,7 +211,6 @@
   ],
   "dependencies": {
     "node-gyp": "^12.3.0",
-    "pnpm": "11.5.3",
     "skills": "^1.5.10"
   },
   "engines": {
@@ -214,7 +218,7 @@
   },
   "volta": {
     "node": "24.16.0",
-    "pnpm": "11.5.1"
+    "pnpm": "11.5.3"
   },
   "scripts": {
     "dev": "pnpm -F playground dev",
@@ -233,6 +237,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/app/utils/feed-catalog.test.ts

@@ -1,71 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { createFeedCatalog } from './feed-catalog'
-
-describe('createFeedCatalog', () => {
-  it('builds the feed manifest from app config and content collections', () => {
-    const catalog = createFeedCatalog({
-      site: {
-        title: 'Nuxt Layers Playground',
-        description: 'Demo and development playground for nuxt-layers.',
-        url: 'https://nuxtlayers.netlify.app/',
-      },
-      feed: {
-        collections: ['blog', 'portfolio', 'gallery'],
-        defaultCollection: 'blog',
-        limit: 30,
-      },
-      manifest: {
-        content: { type: 'page' },
-        blog: { type: 'page' },
-        portfolio: { type: 'page' },
-        gallery: { type: 'page' },
-        info: { type: 'data' },
-      },
-    })
-
-    expect(catalog.site.title).toBe('Nuxt Layers Playground')
-    expect(catalog.feed.defaultCollection).toBe('blog')
-    expect(catalog.feed.limit).toBe(30)
-    expect(catalog.feed.collections).toEqual(['blog', 'portfolio', 'gallery'])
-    expect(catalog.feed.availableCollections).toEqual(['content', 'blog', 'portfolio', 'gallery'])
-    expect(catalog.feed.missingCollections).toEqual([])
-    expect(catalog.siteRoutes.map((route) => route.path)).toEqual([
-      '/feed',
-      '/feed/discovery',
-      '/feed/rss',
-      '/feed/atom',
-      '/feed/json',
-    ])
-    expect(catalog.collectionGroups).toHaveLength(3)
-    expect(catalog.collectionGroups[1]).toMatchObject({
-      collection: 'portfolio',
-      label: 'Portfolio',
-    })
-    expect(catalog.collectionGroups[1]?.routes.map((route) => route.path)).toEqual([
-      '/feed/portfolio/rss',
-      '/feed/portfolio/atom',
-      '/feed/portfolio/json',
-    ])
-  })
-
-  it('surfaces configured collections that do not exist in content', () => {
-    const catalog = createFeedCatalog({
-      feed: {
-        collections: ['blog', 'missing'],
-        defaultCollection: 'missing',
-      },
-      manifest: {
-        blog: { type: 'page' },
-        gallery: { type: 'page' },
-      },
-    })
-
-    expect(catalog.feed.missingCollections).toEqual(['missing'])
-    expect(catalog.collectionGroups).toHaveLength(1)
-    expect(catalog.collectionGroups[0]).toMatchObject({
-      collection: 'blog',
-      label: 'Blog',
-    })
-  })
-})

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

@@ -1,31 +0,0 @@
-import contentManifest from '#content/manifest'
-
-import { createFeedCatalog } from '../../../app/utils/feed-catalog'
-
-export default defineEventHandler((event) => {
-  const appConfig = useAppConfig()
-
-  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}`
-
-  const catalog = createFeedCatalog({
-    site: appConfig.site,
-    feed: appConfig.feedsLayer?.feed,
-    manifest: contentManifest,
-  })
-
-  setHeader(event, 'Cache-Control', 'public, max-age=300, s-maxage=3600')
-
-  return {
-    feeds: catalog.collectionGroups.flatMap((group) =>
-      group.routes.map((route) => ({
-        collection: group.collection,
-        format: route.label,
-        url: `${baseUrl}${route.path}`,
-        contentType: route.contentType ?? 'application/octet-stream',
-      }))
-    ),
-  }
-})