kmcom-nuxt-layers 1.2.0 → 1.3.0

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

@@ -7,7 +7,7 @@
  *
  * @prop {string} as - HTML element to render (default: 'div')
  * @prop {number | ResponsiveValue} colStart - Starting column (1-18)
- * @prop {number | ResponsiveValue} colSpan - Number of columns to span (default: 1)
+ * @prop {ColSpanValue | ResponsiveValue} colSpan - Columns to span (default: 'full')
  * @prop {number | ResponsiveValue} rowStart - Starting row (1-12)
  * @prop {number | ResponsiveValue} rowSpan - Number of rows to span (default: 1)
  * @prop {Alignment} align - Vertical alignment (align-self): start, center, end, stretch
@@ -29,6 +29,7 @@
  * </BaseGridItem>
  */
 
+type ColSpanValue = number | 'full'
 type Alignment = 'start' | 'center' | 'end' | 'stretch'
 type LayerName = 'back' | 'mid' | 'front' | 'top'
 type BleedDirection = 'left' | 'right' | 'both'
@@ -44,7 +45,7 @@ interface Props {
   preset?: string
   as?: string
   colStart?: number | ResponsiveValue<number>
-  colSpan?: number | ResponsiveValue<number>
+  colSpan?: ColSpanValue | ResponsiveValue<number>
   rowStart?: number | ResponsiveValue<number>
   rowSpan?: number | ResponsiveValue<number>
   align?: Alignment
@@ -57,18 +58,22 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { as = 'div', preset, align, justify, z, layer, bleed, aspect } = props
+const { as = 'div' } = props
 
 // Get preset configuration if preset prop is provided
 const { getPreset } = useGridConfig()
-const presetConfig = computed(() => (preset ? getPreset(preset) : undefined))
+const presetConfig = computed(() => (props.preset ? getPreset(props.preset) : undefined))
 
 // Merge preset values with explicit props (explicit props take precedence)
 const colStart = computed(() => props.colStart ?? presetConfig.value?.colStart)
-const colSpan = computed(() => props.colSpan ?? presetConfig.value?.colSpan ?? 1)
+const colSpan = computed(() => props.colSpan ?? presetConfig.value?.colSpan ?? 'full')
 const rowStart = computed(() => props.rowStart ?? presetConfig.value?.rowStart)
 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 layerZIndex: Record<LayerName, number> = {
   back: 0,
   mid: 10,
@@ -109,20 +114,39 @@ const style = computed(() => {
   const styles: Record<string, string> = {}
 
   const colStartVal = getDefaultValue(colStart.value, undefined)
-  const colSpanVal = getDefaultValue(colSpan.value, 1)
+  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) {
-    // Bleed is non-responsive — keep as direct inline style
-    if (bleed === 'both') {
+  if (props.bleed) {
+    if (props.bleed === 'both') {
       styles.gridColumn = '1 / -1'
-    } else if (bleed === 'left') {
-      styles.gridColumn = `1 / span ${colSpanVal}`
-    } else if (bleed === 'right') {
+      styles.marginInline = 'calc(-1 * var(--grid-padding))'
+    } else if (props.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 (props.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,
@@ -134,8 +158,8 @@ const style = computed(() => {
 
     const mdColStart = getResponsiveValue(colStart.value, 'md')
     const lgColStart = getResponsiveValue(colStart.value, 'lg')
-    const mdColSpan = getResponsiveValue(colSpan.value, 'md')
-    const lgColSpan = getResponsiveValue(colSpan.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')
@@ -152,15 +176,15 @@ const style = computed(() => {
   }
 
   // Content alignment
-  if (align || justify) {
+  if (align.value || justify.value) {
     styles.display = 'grid'
     styles.width = '100%'
     styles.height = '100%'
-    styles.placeItems = `${align ?? 'stretch'} ${justify ?? 'stretch'}`
+    styles.placeItems = `${align.value ?? 'stretch'} ${justify.value ?? 'stretch'}`
   }
 
   // Z-index
-  const zIndex = z ?? (layer ? layerZIndex[layer] : undefined)
+  const zIndex = props.z ?? (props.layer ? layerZIndex[props.layer] : undefined)
   if (zIndex !== undefined) styles.zIndex = String(zIndex)
 
   return styles
@@ -169,8 +193,8 @@ const style = computed(() => {
 const classes = computed(() => {
   const classList: string[] = ['gi-placed', '@container', '@container/item']
 
-  if (aspect) {
-    classList.push(aspectClasses[aspect])
+  if (props.aspect) {
+    classList.push(aspectClasses[props.aspect])
   }
 
   return classList.join(' ')

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * LayoutSectionGrid — RAM (Repeat Auto Minmax) pattern
+ *
+ * Auto-wrapping grid that fits as many columns as possible at `minItemWidth`
+ * without media queries. Uses `repeat(auto-fit, minmax(..., 1fr))`.
+ *
+ * @prop {string} minItemWidth - Minimum column width before wrapping (default: '200px')
+ * @prop {boolean} fullHeight - Force 100svh on the section (default: false)
+ *
+ * @slot default - Grid items
+ *
+ * @example
+ * <LayoutSectionGrid min-item-width="250px">
+ *   <div>Card 1</div>
+ *   <div>Card 2</div>
+ *   <div>Card 3</div>
+ * </LayoutSectionGrid>
+ */
+
+interface Props {
+  minItemWidth?: string
+  fullHeight?: boolean
+}
+
+const { minItemWidth = '200px', fullHeight = false } = defineProps<Props>()
+</script>
+
+<template>
+  <LayoutSection :full-height>
+    <LayoutGridItem>
+      <div
+        class="ram-grid"
+        :style="{ '--min-item-width': minItemWidth }"
+      >
+        <slot />
+      </div>
+    </LayoutGridItem>
+  </LayoutSection>
+</template>
+
+<style scoped>
+.ram-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width, 200px), 1fr));
+  gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+  width: 100%;
+}
+</style>

package/layers/layout/app/components/Layout/Section/Sidebar.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * LayoutSectionSidebar — Sidebar Says layout
+ *
+ * Two-column layout where the sidebar takes a clamped width and main content
+ * fills the rest. Uses `minmax(min, max) 1fr` (or reversed for right sidebar).
+ *
+ * @prop {string} sidebarMin - Minimum sidebar width (default: '150px')
+ * @prop {string} sidebarMax - Maximum sidebar width (default: '25%')
+ * @prop {boolean} reverse - Put sidebar on the right (default: false)
+ * @prop {boolean} fullHeight - Force 100svh on the section (default: false)
+ *
+ * @slot sidebar - Sidebar content
+ * @slot default - Main content (fills remaining space)
+ *
+ * @example
+ * <LayoutSectionSidebar sidebar-max="20rem">
+ *   <template #sidebar><nav>...</nav></template>
+ *   <article>Main content</article>
+ * </LayoutSectionSidebar>
+ */
+
+interface Props {
+  sidebarMin?: string
+  sidebarMax?: string
+  reverse?: boolean
+  fullHeight?: boolean
+}
+
+const { sidebarMin = '150px', sidebarMax = '25%', reverse = false, fullHeight = false } = defineProps<Props>()
+</script>
+
+<template>
+  <LayoutSection :full-height>
+    <LayoutGridItem>
+      <div
+        class="sidebar-inner"
+        :class="{ 'sidebar-reverse': reverse }"
+        :style="{ '--sidebar-min': sidebarMin, '--sidebar-max': sidebarMax }"
+      >
+        <div class="sidebar-aside">
+          <slot name="sidebar" />
+        </div>
+        <div class="sidebar-main">
+          <slot />
+        </div>
+      </div>
+    </LayoutGridItem>
+  </LayoutSection>
+</template>
+
+<style scoped>
+.sidebar-inner {
+  display: grid;
+  grid-template-columns: minmax(var(--sidebar-min, 150px), var(--sidebar-max, 25%)) 1fr;
+  gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+  width: 100%;
+  height: 100%;
+}
+
+.sidebar-inner.sidebar-reverse {
+  grid-template-columns: 1fr minmax(var(--sidebar-min, 150px), var(--sidebar-max, 25%));
+}
+
+.sidebar-inner.sidebar-reverse .sidebar-aside {
+  order: 2;
+}
+
+.sidebar-inner.sidebar-reverse .sidebar-main {
+  order: 1;
+}
+</style>

package/layers/layout/app/components/Layout/Section/Stack.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+/**
+ * LayoutSectionStack — Pancake Stack layout
+ *
+ * Full-section wrapper using `auto 1fr auto` row template. Header and footer
+ * take natural height; the default slot fills the remaining space.
+ *
+ * @prop {boolean} fullHeight - Force 100svh on the section (default: true)
+ *
+ * @slot header - Top-pinned content (auto height)
+ * @slot default - Main content area (fills remaining space)
+ * @slot footer - Bottom-pinned content (auto height)
+ *
+ * @example
+ * <LayoutSectionStack>
+ *   <template #header><nav>...</nav></template>
+ *   <main>Content</main>
+ *   <template #footer><footer>...</footer></template>
+ * </LayoutSectionStack>
+ */
+
+interface Props {
+  fullHeight?: boolean
+}
+
+const { fullHeight = true } = defineProps<Props>()
+</script>
+
+<template>
+  <LayoutSection :full-height>
+    <LayoutGridItem>
+      <div class="stack-inner">
+        <div v-if="$slots.header" class="stack-header">
+          <slot name="header" />
+        </div>
+        <div class="stack-main">
+          <slot />
+        </div>
+        <div v-if="$slots.footer" class="stack-footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </LayoutGridItem>
+  </LayoutSection>
+</template>
+
+<style scoped>
+.stack-inner {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100%;
+  width: 100%;
+}
+
+.stack-header,
+.stack-footer {
+  /* auto — natural height */
+}
+
+.stack-main {
+  /* 1fr — grows to fill remaining space */
+}
+</style>

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

@@ -32,8 +32,8 @@ export type GridDensity = 'compact' | 'normal' | 'relaxed'
 export type GridMode = 'swiss' | 'fluid' | 'disabled'
 
 export interface GridPresetsItem {
-  colStart: number | ResponsiveValue<number>
-  colSpan: number | ResponsiveValue<number>
+  colStart?: number | ResponsiveValue<number>
+  colSpan: number | 'full' | ResponsiveValue<number>
   rowStart?: number | ResponsiveValue<number>
   rowSpan?: number
   /** Container size applied to the item's content */
@@ -42,15 +42,13 @@ export interface GridPresetsItem {
   gap?: string
   /** Vertical rhythm density for this preset */
   density?: GridDensity
+  /** Vertical alignment (align-self) */
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  /** Horizontal alignment (justify-self) */
+  justify?: 'start' | 'center' | 'end' | 'stretch'
 }
 
-export interface GridPresets {
-  hero: GridPresetsItem
-  centered: GridPresetsItem
-  fullWidth: GridPresetsItem
-  sidebar: GridPresetsItem
-  content: GridPresetsItem
-}
+export type GridPresets = Record<string, GridPresetsItem>
 
 export interface GridConfig {
   /**

package/layers/layout/app.config.ts

@@ -83,20 +83,36 @@ export default defineAppConfig({
 
         // Preset layouts for common patterns
         presets: {
-          hero: {
+          // 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 ✓
+          centered: {
             colStart: { default: 1, md: 2, lg: 4 },
             colSpan: { default: 6, md: 10, lg: 12 },
             rowSpan: 12,
           },
-          centered: {
-            colStart: { default: 1, md: 2, lg: 5 },
-            colSpan: { default: 6, md: 10, lg: 10 },
-            rowSpan: 12,
+
+          // Full width (all columns, no bleed)
+          fullWidth: { colSpan: 'full' },
+
+          // Narrow prose column (tighter reading width)
+          // lg: 4 + 10 + 4 = 18 ✓  |  md: 2 + 8 + 2 = 12 ✓
+          prose: {
+            colStart: { default: 1, md: 3, lg: 5 },
+            colSpan: { default: 6, md: 8, lg: 10 },
           },
-          fullWidth: {
-            colStart: 1,
-            colSpan: { default: 6, md: 12, lg: 18 },
+
+          // Wide content (generous width, minimal margins)
+          // lg: 1 + 16 + 1 = 18 ✓  |  md: 1 + 10 + 1 = 12 ✓
+          wide: {
+            colStart: { default: 1, md: 2, lg: 2 },
+            colSpan: { default: 6, md: 10, lg: 16 },
           },
+
+          // Sidebar + content pair (use together)
+          // sidebar: cols 1-4 (lg) | content: cols 5-18 (14 cols) → 4+14=18 ✓
           sidebar: {
             colStart: { default: 1, md: 1, lg: 1 },
             colSpan: { default: 6, md: 4, lg: 4 },
@@ -106,7 +122,8 @@ export default defineAppConfig({
             colSpan: { default: 6, md: 8, lg: 14 },
           },
 
-          // 50/50 vertical split (stacks on mobile)
+          // 50/50 vertical splits (stack on mobile)
+          // lg: 9+9=18 ✓  |  md: 6+6=12 ✓
           splitLeft: {
             colStart: 1,
             colSpan: { default: 6, md: 6, lg: 9 },
@@ -118,7 +135,8 @@ export default defineAppConfig({
             rowSpan: 12,
           },
 
-          // 25/75 split (stacks on mobile)
+          // 25/75 vertical splits (stack on mobile)
+          // lg: 5+13=18 ✓  |  md: 3+9=12 ✓
           quarterLeft: {
             colStart: 1,
             colSpan: { default: 6, md: 3, lg: 5 },
@@ -130,18 +148,29 @@ export default defineAppConfig({
             rowSpan: 12,
           },
 
-          // Horizontal 50/50 split (100vw × 50vh each)
-          halfTop: {
+          // 75/25 vertical splits (stack on mobile)
+          // lg: 13+5=18 ✓  |  md: 9+3=12 ✓
+          threeQuarterLeft: {
             colStart: 1,
-            colSpan: { default: 6, md: 12, lg: 18 },
-            rowStart: 1,
-            rowSpan: 6,
+            colSpan: { default: 6, md: 9, lg: 13 },
+            rowSpan: 12,
           },
-          halfBottom: {
-            colStart: 1,
-            colSpan: { default: 6, md: 12, lg: 18 },
-            rowStart: 7,
-            rowSpan: 6,
+          quarterRight: {
+            colStart: { default: 1, md: 10, lg: 14 },
+            colSpan: { default: 6, md: 3, lg: 5 },
+            rowSpan: 12,
+          },
+
+          // Horizontal 50/50 stacks (100vw × 50vh each)
+          halfTop: { colSpan: 'full', rowStart: 1, rowSpan: 6 },
+          halfBottom: { colSpan: 'full', rowStart: 7, rowSpan: 6 },
+
+          // Super centered: full-width, full-height, content perfectly centered
+          superCentered: {
+            colSpan: 'full',
+            rowSpan: 12,
+            align: 'center',
+            justify: 'center',
           },
         },
       },

package/layers/motion/app/plugins/locomotive-scroll.client.ts

@@ -46,17 +46,17 @@ export default defineNuxtPlugin(() => {
 
   const router = useRouter()
 
-  // Only active on the locomotive-scroll route
+  const SMOOTH_SCROLL_ROUTES = ['/locomotive-scroll', '/layout-stacking', '/layout-blind-reveal']
+
   addRouteMiddleware((to, from) => {
-    if (to.path === '/locomotive-scroll') {
+    if (SMOOTH_SCROLL_ROUTES.includes(to.path)) {
       nextTick(init)
-    } else if (from?.path === '/locomotive-scroll') {
+    } else if (from?.path && SMOOTH_SCROLL_ROUTES.includes(from.path)) {
       destroy()
     }
   })
 
-  // Activate immediately if already on that route (e.g. hard refresh)
-  if (router.currentRoute.value.path === '/locomotive-scroll') {
+  if (SMOOTH_SCROLL_ROUTES.includes(router.currentRoute.value.path)) {
     init()
   }
 

package/package.json

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