kmcom-nuxt-layers 2.2.12 → 2.3.0

package/layers/layout/app/components/Layout/Grid/Item.vue

@@ -32,6 +32,11 @@
    * </BaseGridItem>
    */
 
+  import {
+    buildGridPlacementClasses,
+    buildGridPlacementStyle,
+  } from '#layers/layout/app/utils/gridPlacementStyle'
+
   type ColSpanValue = number | 'full'
   type Alignment = 'start' | 'center' | 'end' | 'stretch'
   type LayerName = 'back' | 'mid' | 'front' | 'top'
@@ -100,152 +105,30 @@
   const gap = computed(() => gapProp ?? presetConfig.value?.gap)
   const density = computed(() => densityProp ?? presetConfig.value?.density)
 
-  const layerZIndex: Record<LayerName, number> = {
-    back: 0,
-    mid: 10,
-    front: 20,
-    top: 30,
-  }
-
-  const aspectClasses: Record<AspectRatio, string> = {
-    '1/1': 'aspect-square',
-    '4/3': 'aspect-[4/3]',
-    '3/4': 'aspect-[3/4]',
-    '16/9': 'aspect-video',
-    '9/16': 'aspect-[9/16]',
-    '2/1': 'aspect-[2/1]',
-    '1/2': 'aspect-[1/2]',
-  }
-
-  const getDefaultValue = <T,>(value: T | ResponsiveValue<T> | undefined, defaultVal: T): T => {
-    if (value === undefined) return defaultVal
-    if (typeof value === 'object' && value !== null && 'default' in value) {
-      return value.default
-    }
-    return value as T
-  }
-
-  const getResponsiveValue = <T,>(
-    value: T | ResponsiveValue<T> | undefined,
-    breakpoint: 'md' | 'lg'
-  ): T | undefined => {
-    if (value === undefined) return undefined
-    if (typeof value === 'object' && value !== null && 'default' in value) {
-      return value[breakpoint]
-    }
-    return undefined
-  }
-
-  const style = computed(() => {
-    const styles: Record<string, string> = {}
-
-    const colStartVal = getDefaultValue(colStart.value, undefined)
-    const colSpanVal = getDefaultValue(
-      colSpan.value as ColSpanValue | ResponsiveValue<number> | undefined,
-      'full' as ColSpanValue
-    )
-    const rowStartVal = getDefaultValue(rowStart.value, undefined)
-    const rowSpanVal = getDefaultValue(rowSpan.value, 1)
-
-    if (bleed) {
-      if (bleed === 'both') {
-        styles.gridColumn = '1 / -1'
-        styles.marginInline = 'calc(-1 * var(--grid-padding))'
-      } else if (bleed === 'left') {
-        const spanNum = typeof colSpanVal === 'number' ? colSpanVal : undefined
-        styles.gridColumn = spanNum ? `1 / span ${spanNum}` : '1 / -1'
-        styles.marginInlineStart = 'calc(-1 * var(--grid-padding))'
-      } else if (bleed === 'right') {
-        styles.gridColumn = `${colStartVal ?? 'auto'} / -1`
-        styles.marginInlineEnd = 'calc(-1 * var(--grid-padding))'
-      }
-      styles.gridRow = `${rowStartVal ?? 'auto'} / span ${rowSpanVal}`
-    } else if (colSpanVal === 'full') {
-      // 'full' span: use inline gridColumn directly (no CSS var approach needed)
-      styles.gridColumn = `${colStartVal ?? 1} / -1`
-      // Still set row vars for responsive row support
-      styles['--_rs'] = String(rowStartVal ?? 'auto')
-      styles['--_re'] = String(rowSpanVal)
-
-      const mdRowStart = getResponsiveValue(rowStart.value, 'md')
-      const lgRowStart = getResponsiveValue(rowStart.value, 'lg')
-      const mdRowSpan = getResponsiveValue(rowSpan.value, 'md')
-      const lgRowSpan = getResponsiveValue(rowSpan.value, 'lg')
-
-      if (mdRowStart !== undefined) styles['--_md-rs'] = String(mdRowStart)
-      if (lgRowStart !== undefined) styles['--_lg-rs'] = String(lgRowStart)
-      if (mdRowSpan !== undefined) styles['--_md-re'] = String(mdRowSpan)
-      if (lgRowSpan !== undefined) styles['--_lg-re'] = String(lgRowSpan)
-    } else {
-      // Set CSS custom properties instead of grid-column/grid-row directly.
-      // The <style> block below reads these vars and applies them at each breakpoint,
-      // which correctly cascades without inline-style specificity conflicts.
-      styles['--_cs'] = String(colStartVal ?? 'auto')
-      styles['--_ce'] = String(colSpanVal)
-      styles['--_rs'] = String(rowStartVal ?? 'auto')
-      styles['--_re'] = String(rowSpanVal)
-
-      const mdColStart = getResponsiveValue(colStart.value, 'md')
-      const lgColStart = getResponsiveValue(colStart.value, 'lg')
-      const mdColSpan = getResponsiveValue(
-        colSpan.value as ResponsiveValue<number> | undefined,
-        'md'
-      )
-      const lgColSpan = getResponsiveValue(
-        colSpan.value as ResponsiveValue<number> | undefined,
-        'lg'
-      )
-      const mdRowStart = getResponsiveValue(rowStart.value, 'md')
-      const lgRowStart = getResponsiveValue(rowStart.value, 'lg')
-      const mdRowSpan = getResponsiveValue(rowSpan.value, 'md')
-      const lgRowSpan = getResponsiveValue(rowSpan.value, 'lg')
-
-      if (mdColStart !== undefined) styles['--_md-cs'] = String(mdColStart)
-      if (lgColStart !== undefined) styles['--_lg-cs'] = String(lgColStart)
-      if (mdColSpan !== undefined) styles['--_md-ce'] = String(mdColSpan)
-      if (lgColSpan !== undefined) styles['--_lg-ce'] = String(lgColSpan)
-      if (mdRowStart !== undefined) styles['--_md-rs'] = String(mdRowStart)
-      if (lgRowStart !== undefined) styles['--_lg-rs'] = String(lgRowStart)
-      if (mdRowSpan !== undefined) styles['--_md-re'] = String(mdRowSpan)
-      if (lgRowSpan !== undefined) styles['--_lg-re'] = String(lgRowSpan)
-    }
-
-    // Content alignment
-    if (align.value || justify.value) {
-      styles.display = 'grid'
-      styles.width = '100%'
-      styles.height = '100%'
-      styles.placeItems = `${align.value ?? 'stretch'} ${justify.value ?? 'stretch'}`
-    }
-
-    // Gap override — cascades to nested content via --grid-gap
-    if (gap.value) styles['--grid-gap'] = gap.value
-
-    // Density — sets --rhythm base unit for child spacing utilities
-    if (density.value) {
-      const rhythmMap: Record<Density, string> = {
-        compact: '0.125rem',
-        normal: '0.25rem',
-        relaxed: '0.5rem',
-      }
-      styles['--rhythm'] = rhythmMap[density.value]
-    }
-
-    // Z-index
-    const zIndex = z ?? (layer ? layerZIndex[layer] : undefined)
-    if (zIndex !== undefined) styles.zIndex = String(zIndex)
-
-    return styles
-  })
-
-  const classes = computed(() => {
-    const classList: string[] = ['gi-placed', '@container', '@container/item']
-
-    if (aspect) classList.push(aspectClasses[aspect])
-    if (container.value) classList.push(`layout-container-${container.value}`)
-
-    return classList.join(' ')
-  })
+  const style = computed(() =>
+    buildGridPlacementStyle({
+      colStart: colStart.value,
+      colSpan: colSpan.value as ColSpanValue | ResponsiveValue<number> | undefined,
+      rowStart: rowStart.value,
+      rowSpan: rowSpan.value,
+      align: align.value,
+      justify: justify.value,
+      container: container.value,
+      gap: gap.value,
+      density: density.value,
+      z,
+      layer,
+      bleed,
+      aspect,
+    })
+  )
+
+  const classes = computed(() =>
+    buildGridPlacementClasses({
+      aspect,
+      container: container.value,
+    })
+  )
 </script>
 
 <template>

package/layers/layout/app/utils/gridPlacementStyle.ts

@@ -0,0 +1,195 @@
+type ResponsiveValue<T> = {
+  default: T
+  md?: T
+  lg?: T
+}
+
+type Alignment = 'start' | 'center' | 'end' | 'stretch'
+type LayerName = 'back' | 'mid' | 'front' | 'top'
+type BleedDirection = 'left' | 'right' | 'both'
+type AspectRatio = '1/1' | '4/3' | '3/4' | '16/9' | '9/16' | '2/1' | '1/2'
+type ContainerSize = 'content' | 'wide' | 'fluid' | 'full'
+type Density = 'compact' | 'normal' | 'relaxed'
+
+export type GridPlacementInput = {
+  colStart?: number | ResponsiveValue<number> | undefined
+  colSpan?: number | 'full' | ResponsiveValue<number> | undefined
+  rowStart?: number | ResponsiveValue<number> | undefined
+  rowSpan?: number | ResponsiveValue<number> | undefined
+  align?: Alignment | undefined
+  justify?: Alignment | undefined
+  container?: ContainerSize | undefined
+  gap?: string | undefined
+  density?: Density | undefined
+  z?: number | undefined
+  layer?: LayerName | undefined
+  bleed?: BleedDirection | undefined
+  aspect?: AspectRatio | undefined
+}
+
+type PlacementStyle = Record<string, string>
+
+export const layerZIndex: Record<LayerName, number> = {
+  back: 0,
+  mid: 10,
+  front: 20,
+  top: 30,
+}
+
+export const aspectClasses: Record<AspectRatio, string> = {
+  '1/1': 'aspect-square',
+  '4/3': 'aspect-[4/3]',
+  '3/4': 'aspect-[3/4]',
+  '16/9': 'aspect-video',
+  '9/16': 'aspect-[9/16]',
+  '2/1': 'aspect-[2/1]',
+  '1/2': 'aspect-[1/2]',
+}
+
+// fallow-ignore-next-line complexity
+export function resolveDefaultPlacement<T>(
+  value: T | ResponsiveValue<T> | undefined,
+  fallback: T | undefined
+): T | undefined {
+  if (value === undefined) return fallback
+  if (typeof value === 'object' && value !== null && 'default' in value) {
+    return value.default
+  }
+  return value
+}
+
+// fallow-ignore-next-line complexity
+function resolveResponsivePlacementValue<T>(
+  value: T | ResponsiveValue<T> | undefined,
+  breakpoint: 'md' | 'lg'
+): T | undefined {
+  if (value === undefined) return undefined
+  if (typeof value === 'object' && value !== null && 'default' in value) {
+    return value[breakpoint]
+  }
+  return undefined
+}
+
+export function resolveResponsivePlacementVars<T>(
+  value: T | ResponsiveValue<T> | undefined,
+  prefix: string
+): PlacementStyle {
+  const styles: PlacementStyle = {}
+  const mdValue = resolveResponsivePlacementValue(value, 'md')
+  const lgValue = resolveResponsivePlacementValue(value, 'lg')
+
+  if (mdValue !== undefined) styles[`--_md-${prefix}`] = String(mdValue)
+  if (lgValue !== undefined) styles[`--_lg-${prefix}`] = String(lgValue)
+
+  return styles
+}
+
+// fallow-ignore-next-line complexity
+export function resolveBleedStyles(args: {
+  bleed?: BleedDirection | undefined
+  colStart?: number | undefined
+  colSpan?: number | 'full' | undefined
+  rowStart?: number | undefined
+  rowSpan?: number | undefined
+}): PlacementStyle {
+  const styles: PlacementStyle = {}
+  const { bleed, colStart, colSpan, rowStart, rowSpan } = args
+
+  if (!bleed) return styles
+
+  if (bleed === 'both') {
+    styles.gridColumn = '1 / -1'
+    styles.marginInline = 'calc(-1 * var(--grid-padding))'
+  } else if (bleed === 'left') {
+    const spanNum = typeof colSpan === 'number' ? colSpan : undefined
+    styles.gridColumn = spanNum ? `1 / span ${spanNum}` : '1 / -1'
+    styles.marginInlineStart = 'calc(-1 * var(--grid-padding))'
+  } else if (bleed === 'right') {
+    styles.gridColumn = `${colStart ?? 'auto'} / -1`
+    styles.marginInlineEnd = 'calc(-1 * var(--grid-padding))'
+  }
+
+  styles.gridRow = `${rowStart ?? 'auto'} / span ${rowSpan}`
+  return styles
+}
+
+// fallow-ignore-next-line complexity
+export function resolveAlignmentStyles(align?: Alignment, justify?: Alignment): PlacementStyle {
+  if (!align && !justify) return {}
+  return {
+    display: 'grid',
+    width: '100%',
+    height: '100%',
+    placeItems: `${align ?? 'stretch'} ${justify ?? 'stretch'}`,
+  }
+}
+
+export function resolveRhythmStyles(density?: Density): PlacementStyle {
+  if (!density) return {}
+
+  const rhythmMap: Record<Density, string> = {
+    compact: '0.125rem',
+    normal: '0.25rem',
+    relaxed: '0.5rem',
+  }
+
+  return { '--rhythm': rhythmMap[density] }
+}
+
+export function resolveLayerStyles(z?: number, layer?: LayerName): PlacementStyle {
+  const zIndex = z ?? (layer ? layerZIndex[layer] : undefined)
+  return zIndex !== undefined ? { zIndex: String(zIndex) } : {}
+}
+
+// fallow-ignore-next-line complexity
+export function buildGridPlacementStyle(input: GridPlacementInput): PlacementStyle {
+  const style: PlacementStyle = {}
+  const colStart = resolveDefaultPlacement(input.colStart, undefined)
+  const colSpan = resolveDefaultPlacement(input.colSpan, 'full')
+  const rowStart = resolveDefaultPlacement(input.rowStart, undefined)
+  const rowSpan = resolveDefaultPlacement(input.rowSpan, 1)
+
+  Object.assign(style, resolveBleedStyles({
+    bleed: input.bleed,
+    colStart,
+    colSpan,
+    rowStart,
+    rowSpan,
+  }))
+
+  if (!input.bleed) {
+    if (colSpan === 'full') {
+      style.gridColumn = `${colStart ?? 1} / -1`
+      style['--_rs'] = String(rowStart ?? 'auto')
+      style['--_re'] = String(rowSpan)
+      Object.assign(style, resolveResponsivePlacementVars(input.rowStart, 'rs'))
+      Object.assign(style, resolveResponsivePlacementVars(input.rowSpan, 're'))
+    } else {
+      style['--_cs'] = String(colStart ?? 'auto')
+      style['--_ce'] = String(colSpan)
+      style['--_rs'] = String(rowStart ?? 'auto')
+      style['--_re'] = String(rowSpan)
+      Object.assign(style, resolveResponsivePlacementVars(input.colStart, 'cs'))
+      Object.assign(style, resolveResponsivePlacementVars(input.colSpan, 'ce'))
+      Object.assign(style, resolveResponsivePlacementVars(input.rowStart, 'rs'))
+      Object.assign(style, resolveResponsivePlacementVars(input.rowSpan, 're'))
+    }
+  }
+
+  Object.assign(style, resolveAlignmentStyles(input.align, input.justify))
+  Object.assign(style, resolveRhythmStyles(input.density))
+  Object.assign(style, resolveLayerStyles(input.z, input.layer))
+
+  if (input.gap) style['--grid-gap'] = input.gap
+
+  return style
+}
+
+export function buildGridPlacementClasses(input: Pick<GridPlacementInput, 'aspect' | 'container'>) {
+  const classList: string[] = ['gi-placed', '@container', '@container/item']
+
+  if (input.aspect) classList.push(aspectClasses[input.aspect])
+  if (input.container) classList.push(`layout-container-${input.container}`)
+
+  return classList.join(' ')
+}

package/layers/mailer/app/types/mailer.ts

@@ -1,25 +1,7 @@
-export type ContactEmailData = {
-  name: string
-  email: string
-  message: string
-}
-
-export type ContactSubmittedPayload = {
-  name: string
-  email: string
-  message: string
-}
-
-export type ContactSentPayload = {
-  messageId: string
-} & ContactSubmittedPayload
-
-export type ContactFailedPayload = {
-  error: unknown
-} & ContactSubmittedPayload
-
-export type MailerLayerHooks = {
-  'contact:submitted': (payload: ContactSubmittedPayload) => void
-  'contact:sent': (payload: ContactSentPayload) => void
-  'contact:failed': (payload: ContactFailedPayload) => void
-}
+export type {
+  ContactEmailData,
+  ContactFailedPayload,
+  ContactSentPayload,
+  ContactSubmittedPayload,
+  MailerLayerHooks,
+} from '#layers/mailer/shared/contact'

package/layers/mailer/server/utils/email.ts

@@ -1,27 +1,42 @@
 import { Resend } from 'resend'
 
-export type ContactEmailData = {
-  name: string
-  email: string
-  message: string
+import type { ContactEmailData } from '#layers/mailer/shared/contact'
+
+type MailerTransport = {
+  from: string
+  to: string
 }
 
-export async function sendContactEmail(data: ContactEmailData) {
+function resolveMailerTransport() {
   const { resendApiKey, emailFrom, emailTo } = useMailerConfig()
+  if (!resendApiKey) return null
 
-  if (!resendApiKey) {
-    console.warn('[mailer] NUXT_MAILER_LAYER_RESEND_API_KEY not set — email skipped')
-    return { success: false as const, error: 'No API key configured' }
-  }
-
-  const resend = new Resend(resendApiKey)
-  const { data: result, error } = await resend.emails.send({
+  return {
+    apiKey: resendApiKey,
     from: emailFrom ?? '',
     to: emailTo ?? '',
+  } satisfies MailerTransport & { apiKey: string }
+}
+
+function buildContactEmailPayload(data: ContactEmailData, transport: MailerTransport) {
+  return {
+    from: transport.from,
+    to: transport.to,
     replyTo: data.email,
     subject: `Contact form submission from ${data.name}`,
     text: `Name: ${data.name}\nEmail: ${data.email}\n\nMessage:\n${data.message}`,
-  })
+  }
+}
+
+export async function sendContactEmail(data: ContactEmailData) {
+  const transport = resolveMailerTransport()
+  if (!transport) {
+    console.warn('[mailer] NUXT_MAILER_LAYER_RESEND_API_KEY not set — email skipped')
+    return { success: false as const, error: 'No API key configured' }
+  }
+
+  const resend = new Resend(transport.apiKey)
+  const { data: result, error } = await resend.emails.send(buildContactEmailPayload(data, transport))
 
   if (error) return { success: false as const, error }
   return { success: true as const, messageId: result?.id ?? '' }

package/layers/mailer/server/utils/hooks.ts

@@ -1,23 +1,4 @@
 import { createHooks } from 'hookable'
-
-export type ContactSubmittedPayload = {
-  name: string
-  email: string
-  message: string
-}
-
-export type ContactSentPayload = {
-  messageId: string
-} & ContactSubmittedPayload
-
-export type ContactFailedPayload = {
-  error: unknown
-} & ContactSubmittedPayload
-
-export type MailerLayerHooks = {
-  'contact:submitted': (payload: ContactSubmittedPayload) => void
-  'contact:sent': (payload: ContactSentPayload) => void
-  'contact:failed': (payload: ContactFailedPayload) => void
-}
+import type { MailerLayerHooks } from '#layers/mailer/shared/contact'
 
 export const mailerLayerHooks = createHooks<MailerLayerHooks>()

package/layers/navigation/app/composables/useSite.ts

@@ -1,13 +1,6 @@
-import { splitSpaces } from '../utils/regex'
+import { resolveSiteConfig } from '../utils/site'
 
 export function useSite() {
   const config = useAppConfig().site ?? {}
-
-  return {
-    title: (config.title ?? '') as string,
-    titleWords: splitSpaces((config.title ?? '') as string) as string[],
-    subtitle: (config.subtitle ?? '') as string,
-    subtitleWords: splitSpaces((config.subtitle ?? '') as string) as string[],
-    description: (config.description ?? '') as string,
-  }
+  return resolveSiteConfig(config)
 }

package/layers/navigation/app/utils/site.ts

@@ -0,0 +1,26 @@
+import { splitSpaces } from '../utils/regex'
+
+function resolveSiteText(value?: string) {
+  const text = value ?? ''
+  return {
+    text,
+    words: splitSpaces(text) as string[],
+  }
+}
+
+export function resolveSiteConfig(site: {
+  title?: string
+  subtitle?: string
+  description?: string
+}) {
+  const title = resolveSiteText(site.title)
+  const subtitle = resolveSiteText(site.subtitle)
+
+  return {
+    title: title.text,
+    titleWords: title.words,
+    subtitle: subtitle.text,
+    subtitleWords: subtitle.words,
+    description: site.description ?? '',
+  }
+}

package/layers/routing/app/utils/resolveRoute.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+
+import type { FeatureValue, RouteResolution, RoutingLayerConfig } from '../types/routing'
+import { resolveRoute } from './resolveRoute'
+
+function createConfig(overrides: Partial<RoutingLayerConfig> = {}): RoutingLayerConfig {
+  return {
+    preset: 'marketing',
+    strictDefaultDeny: false,
+    layerDefaultDeny: false,
+    betaRedirect: '/coming-soon',
+    runtimeFlags: false,
+    debug: false,
+    maintenance: { enabled: false, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: false, mode: 'replace' },
+    features: {},
+    ...overrides,
+  }
+}
+
+describe('resolveRoute', () => {
+  it('allows routes without a feature by default', () => {
+    expect(resolveRoute({}, createConfig(), () => 'enabled')).toEqual({ outcome: 'allow' })
+  })
+
+  it('denies routes when strict default deny is enabled', () => {
+    expect(resolveRoute({}, createConfig({ strictDefaultDeny: true }), () => 'enabled')).toEqual({
+      outcome: 'deny',
+    })
+  })
+
+  it('denies layer-owned routes without a feature when layer default deny is enabled', () => {
+    expect(
+      resolveRoute({ __fromLayer: true }, createConfig({ layerDefaultDeny: true }), () => 'enabled')
+    ).toEqual({ outcome: 'deny' })
+  })
+
+  const featureCases: Array<[FeatureValue, RouteResolution]> = [
+    ['disabled', { outcome: 'deny' }],
+    ['beta', { outcome: 'redirect', to: '/coming-soon' }],
+    ['coming-soon', { outcome: 'redirect', to: '/coming-soon' }],
+  ]
+
+  it.each(featureCases)('handles %s feature variants', (variant, expected) => {
+    expect(resolveRoute({ feature: 'feature-x' }, createConfig(), () => variant)).toEqual(expected)
+  })
+})

package/layers/routing/app/utils/resolveRoute.ts

@@ -5,27 +5,36 @@ type RouteMeta = {
   __fromLayer?: boolean
 }
 
+function shouldDenyStrict(meta: RouteMeta, config: RoutingLayerConfig): boolean {
+  return config.strictDefaultDeny && !meta.feature
+}
+
+function shouldDenyLayer(meta: RouteMeta, config: RoutingLayerConfig): boolean {
+  return config.layerDefaultDeny && meta.__fromLayer === true && !meta.feature
+}
+
+function resolveFeatureOutcome(variant: FeatureValue, config: RoutingLayerConfig): RouteResolution {
+  if (variant === 'disabled') return { outcome: 'deny' }
+  if (variant === 'beta' || variant === 'coming-soon') {
+    return { outcome: 'redirect', to: config.betaRedirect }
+  }
+  return { outcome: 'allow' }
+}
+
 export function resolveRoute(
   meta: RouteMeta,
   config: RoutingLayerConfig,
   resolveFeature: (name: string) => FeatureValue
 ): RouteResolution {
-  if (config.strictDefaultDeny && !meta.feature) {
+  if (shouldDenyStrict(meta, config)) {
     return { outcome: 'deny' }
   }
 
-  if (config.layerDefaultDeny && meta.__fromLayer && !meta.feature) {
+  if (shouldDenyLayer(meta, config)) {
     return { outcome: 'deny' }
   }
 
   if (!meta.feature) return { outcome: 'allow' }
 
-  const variant = resolveFeature(meta.feature)
-
-  if (variant === 'disabled') return { outcome: 'deny' }
-  if (variant === 'beta' || variant === 'coming-soon') {
-    return { outcome: 'redirect', to: config.betaRedirect }
-  }
-
-  return { outcome: 'allow' }
+  return resolveFeatureOutcome(resolveFeature(meta.feature), config)
 }