kmcom-nuxt-layers 1.6.8 → 1.6.10

package/docs/LAYOUT.md

@@ -208,8 +208,11 @@ Positioned child within a subgrid section. Use `preset` for common layouts or se
 | `rowStart` | `number \| ResponsiveValue` | Grid row start |
 | `rowSpan` | `number \| ResponsiveValue` | Row span |
 | `layer` | `keyof GridLayers` | Z-index layer: `back`, `mid`, `front`, `top` |
-| `align` | `string` | `align-self` value |
-| `justify` | `string` | `justify-self` value |
+| `align` | `string` | `align-self` value: `start`, `center`, `end`, `stretch` |
+| `justify` | `string` | `justify-self` value: `start`, `center`, `end`, `stretch` |
+| `container` | `string` | Content width constraint: `content` (65ch), `wide` (90rem), `fluid`, `full` |
+| `gap` | `string` | Override `--grid-gap` for nested content (e.g. `'1rem'`) |
+| `density` | `string` | Rhythm base unit: `compact` (2px), `normal` (4px), `relaxed` (8px) |
 | `bleed` | `boolean` | Negative margin to reach viewport edge |
 | `as` | `string` | Tag override |
 
@@ -428,12 +431,14 @@ interface GridConfig {
 
 interface GridPresetsItem {
   colStart?: number | ResponsiveValue
-  colSpan?: number | ResponsiveValue
+  colSpan?: number | 'full' | ResponsiveValue
   rowStart?: number | ResponsiveValue
   rowSpan?: number | ResponsiveValue
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  justify?: 'start' | 'center' | 'end' | 'stretch'
   container?: 'content' | 'wide' | 'fluid' | 'full'
   gap?: string
-  density?: 'compact' | 'normal' | 'spacious'
+  density?: 'compact' | 'normal' | 'relaxed'
 }
 ```
 

package/layers/content/app/app.config.ts

@@ -0,0 +1,3 @@
+export default {
+  contentLayer: {},
+}

package/layers/content/app/types/app-config.d.ts

@@ -0,0 +1,7 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    contentLayer?: {
+      name?: string
+    }
+  }
+}

package/layers/core/{app.config.ts → app/app.config.ts}

@@ -1,6 +1,4 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
+export default {
   coreLayer: {
     // 404 Page defaults (all optional)
     notFound: {
@@ -72,4 +70,4 @@ export default defineAppConfig({
       debug: false,
     },
   },
-})
+}

package/layers/core/app/types/app-config.d.ts

@@ -0,0 +1,59 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    coreLayer?: {
+      /** Project name */
+      name?: string
+
+      /** 404 Not Found page configuration */
+      notFound?: {
+        icon?: string
+        title?: string
+        description?: string
+        showPath?: boolean
+        showHomeButton?: boolean
+        homeButtonLabel?: string
+        homeButtonTo?: string
+        showBackButton?: boolean
+        backButtonLabel?: string
+        actions?: Array<{
+          label: string
+          to?: string
+          icon?: string
+          color?: 'primary' | 'neutral' | 'error' | 'success'
+          variant?: 'solid' | 'outline' | 'ghost' | 'soft'
+          click?: () => void
+        }>
+        suggestions?: {
+          enabled?: boolean
+          title?: string
+          links?: Array<{ label: string; to: string; icon?: string }>
+        }
+      }
+
+      loading?: {
+        enabled?: boolean
+        minDuration?: number
+        maxDuration?: number
+        background?: string
+        textColor?: string
+        zIndex?: number
+      }
+
+      errors?: {
+        logToConsole?: boolean
+        logToExternal?: boolean
+        externalUrl?: string
+        externalToken?: string
+      }
+
+      scrollGuard?: {
+        enabled?: boolean
+        excludeSelectors?: string[]
+        strict?: boolean
+        transitionDuration?: number
+        resizeDebounce?: number
+        debug?: boolean
+      }
+    }
+  }
+}

package/layers/forms/app/app.config.ts

@@ -0,0 +1,3 @@
+export default {
+  formsLayer: {},
+}

package/layers/forms/app/types/app-config.d.ts

@@ -0,0 +1,7 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    formsLayer?: {
+      name?: string
+    }
+  }
+}

package/layers/layout/{app.config.ts → app/app.config.ts}

@@ -1,6 +1,4 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
+export default {
   /**
    * Nuxt UI component theming — aligned to the Swiss Grid System.
    *
@@ -88,11 +86,12 @@ export default defineAppConfig({
           // Full-viewport hero: full width, all 12 rows
           hero: { colSpan: 'full', rowSpan: 12 },
 
-          // Centered content column (equal margins both sides)
-          // lg: 3 + 12 + 3 = 18 ✓  |  md: 1 + 10 + 1 = 12 ✓
+          // Full-width content area within the grid's own padding.
+          // mastmain already applies padding-inline (clamp-based gutters),
+          // so col-start:1 / col-end:-1 is already visually centred.
+          // Use preset="prose" for a narrower reading-width column.
           centered: {
-            colStart: { default: 1, md: 2, lg: 4 },
-            colSpan: { default: 6, md: 10, lg: 12 },
+            colSpan: 'full',
             rowSpan: 12,
           },
 
@@ -178,4 +177,4 @@ export default defineAppConfig({
       },
     },
   },
-})
+}

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

@@ -12,6 +12,9 @@
  * @prop {number | ResponsiveValue} rowSpan - Number of rows to span (default: 1)
  * @prop {Alignment} align - Vertical alignment (align-self): start, center, end, stretch
  * @prop {Alignment} justify - Horizontal alignment (justify-self): start, center, end, stretch
+ * @prop {string} container - Content width constraint: content (65ch), wide (90rem), fluid, full
+ * @prop {string} gap - Override --grid-gap for nested content (e.g. '1rem', '2rem')
+ * @prop {string} density - Vertical rhythm: compact (2px), normal (4px), relaxed (8px)
  * @prop {number} z - Explicit z-index value
  * @prop {LayerName} layer - Semantic layer: back, mid, front, top
  * @prop {BleedDirection} bleed - Edge bleed: left, right, both
@@ -41,6 +44,9 @@ interface ResponsiveValue<T> {
   lg?: T
 }
 
+type ContainerSize = 'content' | 'wide' | 'fluid' | 'full'
+type Density = 'compact' | 'normal' | 'relaxed'
+
 interface Props {
   preset?: string
   as?: string
@@ -50,6 +56,9 @@ interface Props {
   rowSpan?: number | ResponsiveValue<number>
   align?: Alignment
   justify?: Alignment
+  container?: ContainerSize
+  gap?: string
+  density?: Density
   z?: number
   layer?: LayerName
   bleed?: BleedDirection
@@ -73,6 +82,9 @@ const rowSpan = computed(() => props.rowSpan ?? presetConfig.value?.rowSpan ?? 1
 // Preset-aware alignment computed refs
 const align = computed(() => props.align ?? presetConfig.value?.align)
 const justify = computed(() => props.justify ?? presetConfig.value?.justify)
+const container = computed(() => props.container ?? presetConfig.value?.container)
+const gap = computed(() => props.gap ?? presetConfig.value?.gap)
+const density = computed(() => props.density ?? presetConfig.value?.density)
 
 const layerZIndex: Record<LayerName, number> = {
   back: 0,
@@ -186,6 +198,19 @@ const style = computed(() => {
     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 = props.z ?? (props.layer ? layerZIndex[props.layer] : undefined)
   if (zIndex !== undefined) styles.zIndex = String(zIndex)
@@ -196,9 +221,8 @@ const style = computed(() => {
 const classes = computed(() => {
   const classList: string[] = ['gi-placed', '@container', '@container/item']
 
-  if (props.aspect) {
-    classList.push(aspectClasses[props.aspect])
-  }
+  if (props.aspect) classList.push(aspectClasses[props.aspect])
+  if (container.value) classList.push(`layout-container-${container.value}`)
 
   return classList.join(' ')
 })

package/layers/layout/app/types/app-config.d.ts

@@ -0,0 +1,10 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    layoutLayer?: {
+      name?: string
+      ui?: {
+        grid?: import('./layouts').GridConfig
+      }
+    }
+  }
+}

package/layers/layout/app/types/layouts.ts

@@ -28,7 +28,7 @@ export interface GridLayers {
 }
 
 export type GridContainerSize = 'content' | 'wide' | 'fluid' | 'full'
-export type GridDensity = 'compact' | 'normal' | 'relaxed'
+export type GridDensity = 'compact' | 'normal' | 'relaxed' // relaxed = 0.5rem --rhythm base
 export type GridMode = 'swiss' | 'fluid' | 'disabled'
 
 export interface GridPresetsItem {

package/layers/motion/{app.config.ts → app/app.config.ts}

@@ -1,6 +1,4 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
+export default {
   motion: {
     /**
      * Enable smooth scroll globally (true), on specific routes (string[]), or disable (false).
@@ -26,4 +24,4 @@ export default defineAppConfig({
       touchMultiplier: 2,
     },
   },
-})
+}

package/layers/motion/app/composables/useGsap.ts

@@ -1,5 +1,9 @@
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
 /**
- * GSAP composable - provides access to GSAP and ScrollTrigger
+ * Provides access to GSAP and ScrollTrigger.
+ * Registration is handled by v-gsap-nuxt.
  *
  * @example
  * const { gsap, ScrollTrigger } = useGsap()
@@ -11,11 +15,5 @@
  * })
  */
 export function useGsap() {
-  const nuxtApp = useNuxtApp()
-
-  return {
-    gsap: nuxtApp.$gsap as unknown as typeof import('gsap').gsap,
-    ScrollTrigger:
-      nuxtApp.$ScrollTrigger as unknown as typeof import('gsap/ScrollTrigger').ScrollTrigger,
-  }
+  return { gsap, ScrollTrigger }
 }

package/layers/motion/app/types/app-config.d.ts

@@ -0,0 +1,7 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    motionLayer?: {
+      name?: string
+    }
+  }
+}

package/layers/routing/app/app.config.ts

@@ -1,6 +1,4 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
+export default {
   routingLayer: {
     preset: 'simple',
     strictDefaultDeny: false,
@@ -11,4 +9,4 @@ export default defineAppConfig({
     scrollRouting: { enabled: false, mode: 'replace' },
     features: {},
   },
-})
+}

package/layers/shader/{app.config.ts → app/app.config.ts}

@@ -1,6 +1,4 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
+export default {
   shader: {
     preferWebGPU: true,
     maxPixelRatio: 2,
@@ -8,4 +6,4 @@ export default defineAppConfig({
     debugPanel: true,
     toneMapping: 'aces',
   },
-})
+}

package/layers/shader/app/types/app-config.d.ts

@@ -0,0 +1,7 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    shaderLayer?: {
+      name?: string
+    }
+  }
+}

package/layers/theme/app/app.config.ts

@@ -0,0 +1,3 @@
+export default {
+  themeLayer: {},
+}

package/layers/theme/app/types/app-config.d.ts

@@ -0,0 +1,8 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    themeLayer?: {
+      accents?: string[]
+      defaultAccent?: string
+    }
+  }
+}

package/layers/ui/app/app.config.ts

@@ -1,6 +1,4 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
+export default {
   mastNav: {
     links: [],
     scrollBehaviour: 'router',
@@ -37,4 +35,4 @@ export default defineAppConfig({
       },
     },
   },
-})
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.6.8",
+  "version": "1.6.10",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",

package/layers/content/app.config.ts

@@ -1,5 +0,0 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
-  contentLayer: {},
-})

package/layers/forms/app.config.ts

@@ -1,5 +0,0 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
-  formsLayer: {},
-})

package/layers/motion/app/composables/useMotion.ts

@@ -1,137 +0,0 @@
-import { useElementHover, useElementVisibility, useScroll } from '@vueuse/core'
-// eslint-disable-next-line no-restricted-imports
-import type { Ref } from 'vue'
-
-/**
- * Composable for handling element animations and transitions
- */
-export function useMotion(target?: Ref<HTMLElement | null>) {
-  // Hover state
-  const isHovered = ref(false)
-
-  // Visibility state
-  const isVisible = ref(false)
-
-  // Scroll position
-  const scroll = ref({ x: 0, y: 0 })
-
-  // Initialize if target is provided
-  if (target?.value) {
-    isHovered.value = useElementHover(target).value
-    isVisible.value = useElementVisibility(target).value
-
-    const scrollResult = useScroll(target)
-    scroll.value = {
-      x: scrollResult.x.value,
-      y: scrollResult.y.value,
-    }
-  }
-
-  // Animation trigger states
-  const animateOnHover = ref(false)
-  const animateOnVisible = ref(false)
-  const animateOnScroll = ref(false)
-
-  // Trigger functions
-  const triggerHoverAnimation = () => {
-    animateOnHover.value = true
-    setTimeout(() => {
-      animateOnHover.value = false
-    }, 300)
-  }
-
-  const triggerVisibleAnimation = () => {
-    animateOnVisible.value = true
-  }
-
-  const triggerScrollAnimation = () => {
-    animateOnScroll.value = true
-  }
-
-  return {
-    // States
-    isHovered,
-    isVisible,
-    scroll,
-    animateOnHover,
-    animateOnVisible,
-    animateOnScroll,
-
-    // Methods
-    triggerHoverAnimation,
-    triggerVisibleAnimation,
-    triggerScrollAnimation,
-  }
-}
-
-/**
- * Composable for managing CSS transitions
- */
-export function useTransition() {
-  const transitionClasses = ref<string[]>([])
-
-  const addTransition = (className: string) => {
-    if (!transitionClasses.value.includes(className)) {
-      transitionClasses.value.push(className)
-    }
-  }
-
-  const removeTransition = (className: string) => {
-    const index = transitionClasses.value.indexOf(className)
-    if (index > -1) {
-      transitionClasses.value.splice(index, 1)
-    }
-  }
-
-  const clearTransitions = () => {
-    transitionClasses.value = []
-  }
-
-  return {
-    transitionClasses,
-    addTransition,
-    removeTransition,
-    clearTransitions,
-  }
-}
-
-/**
- * Composable for managing CSS animations
- */
-export function useAnimation() {
-  const animationClasses = ref<string[]>([])
-  const isAnimating = ref(false)
-
-  const addAnimation = (className: string) => {
-    if (!animationClasses.value.includes(className)) {
-      animationClasses.value.push(className)
-      isAnimating.value = true
-
-      // Auto-remove after duration (assuming 300ms)
-      setTimeout(() => {
-        removeAnimation(className)
-        isAnimating.value = false
-      }, 300)
-    }
-  }
-
-  const removeAnimation = (className: string) => {
-    const index = animationClasses.value.indexOf(className)
-    if (index > -1) {
-      animationClasses.value.splice(index, 1)
-    }
-  }
-
-  const clearAnimations = () => {
-    animationClasses.value = []
-    isAnimating.value = false
-  }
-
-  return {
-    animationClasses,
-    isAnimating,
-    addAnimation,
-    removeAnimation,
-    clearAnimations,
-  }
-}

package/layers/motion/app/plugins/gsap.client.ts

@@ -1,15 +0,0 @@
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
-
-export default defineNuxtPlugin(() => {
-  // Register GSAP plugins
-  gsap.registerPlugin(ScrollTrigger)
-
-  // Provide GSAP globally
-  return {
-    provide: {
-      gsap,
-      ScrollTrigger,
-    },
-  }
-})

package/layers/theme/app.config.ts

@@ -1,5 +0,0 @@
-import { defineAppConfig } from 'nuxt/app'
-
-export default defineAppConfig({
-  themeLayer: {},
-})