kmcom-nuxt-layers 1.1.9 → 1.3.0

package/layers/layout/app/assets/css/layout/modes/fluid.css

@@ -0,0 +1,100 @@
+/**
+ * Fluid Mode — Container-Query Based Grid Utilities
+ *
+ * These utilities complement .mastmain/.basesection and are safe to use
+ * alongside them — they only take effect when their class is applied.
+ *
+ * Design goals:
+ * - Auto-fit columns that respond to their *container* width, not the viewport
+ * - No fixed breakpoints — layout adapts continuously
+ * - Consistent gap matching the base grid gap custom property
+ */
+
+/**
+ * .fluid-grid — auto-fit grid that fills its container.
+ *
+ * Columns shrink no smaller than --fluid-col-min (default 16rem / 256px).
+ * Use `--fluid-col-min` to tune the minimum column width per-instance.
+ *
+ * @example
+ * <div class="fluid-grid" style="--fluid-col-min: 20rem">…</div>
+ */
+.fluid-grid {
+  --fluid-col-min: 16rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--fluid-col-min), 1fr));
+  gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+}
+
+/**
+ * .fluid-grid-2 through .fluid-grid-4 — named column-count variants.
+ *
+ * These use container queries so the number of columns degrades gracefully
+ * when the container is too narrow.
+ */
+.fluid-grid-2 {
+  --fluid-col-min: 14rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--fluid-col-min), 1fr));
+  gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+
+  @container (width >= 30rem) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.fluid-grid-3 {
+  --fluid-col-min: 14rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--fluid-col-min), 1fr));
+  gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+
+  @container (width >= 44rem) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.fluid-grid-4 {
+  --fluid-col-min: 12rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--fluid-col-min), 1fr));
+  gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+
+  @container (width >= 52rem) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/**
+ * LayoutContainer size utilities
+ *
+ * Used by the <LayoutContainer> component. Each class constrains the element
+ * width and centres it within its parent.
+ */
+.layout-container-content {
+  max-width: 65ch;
+  width: 100%;
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+
+.layout-container-wide {
+  max-width: 90rem;
+  width: 100%;
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+
+.layout-container-fluid {
+  max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.layout-container-full {
+  /* Escape parent padding to reach the viewport edge */
+  width: 100vw;
+  max-width: 100vw;
+  margin-inline: calc(var(--grid-padding, clamp(1rem, 2.5vw, 2rem)) * -1);
+  box-sizing: border-box;
+}

package/layers/layout/app/assets/css/main.css

@@ -1 +1,2 @@
 @import '#layers/layout/app/assets/css/layout/grids.css';
+@import '#layers/layout/app/assets/css/layout/modes/fluid.css';

package/layers/layout/app/components/Layout/Container.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * LayoutContainer — constrained content width wrapper.
+ *
+ * Provides four standard container widths that sit within the grid:
+ *
+ * | size    | max-width | use case                        |
+ * |---------|-----------|----------------------------------|
+ * | content | 65ch      | Long-form prose, articles        |
+ * | wide    | 90rem     | Cards, media-rich sections       |
+ * | fluid   | 100%      | Full bleed within grid padding   |
+ * | full    | 100vw     | True full-bleed (escapes padding)|
+ *
+ * The container is centred with `margin-inline: auto` for `content` and `wide`.
+ *
+ * @prop {GridContainerSize} size — Container width variant (default: 'wide')
+ * @prop {string}            tag  — HTML element to render (default: 'div')
+ *
+ * @example
+ * <LayoutContainer size="content">
+ *   <p>Readable prose constrained to ~65 characters wide.</p>
+ * </LayoutContainer>
+ */
+
+import type { GridContainerSize } from '#layers/layout/app/types/layouts'
+
+interface Props {
+  size?: GridContainerSize
+  tag?: string
+}
+
+const { size = 'wide', tag = 'div' } = defineProps<Props>()
+
+const sizeClass: Record<GridContainerSize, string> = {
+  content: 'layout-container-content',
+  wide: 'layout-container-wide',
+  fluid: 'layout-container-fluid',
+  full: 'layout-container-full',
+}
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="sizeClass[size]"
+  >
+    <slot />
+  </component>
+</template>

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

@@ -34,22 +34,35 @@ const handleKeydown = (event: KeyboardEvent) => {
   }
 }
 
+// Track column count in JS so v-for renders the correct number of divs.
+// Mirrors the same breakpoints as mastmain (48rem = 768px, 80rem = 1280px).
+const cols = ref(6)
+
+const updateCols = () => {
+  if (window.matchMedia('(min-width: 80rem)').matches) cols.value = 18
+  else if (window.matchMedia('(min-width: 48rem)').matches) cols.value = 12
+  else cols.value = 6
+}
+
 onMounted(() => {
+  updateCols()
+  window.addEventListener('resize', updateCols)
   window.addEventListener('keydown', handleKeydown)
 })
 
 onUnmounted(() => {
+  window.removeEventListener('resize', updateCols)
   window.removeEventListener('keydown', handleKeydown)
 })
 
-// Use CSS variables to match the responsive grid
+// Do NOT set --grid-cols here as an inline style — that would override the
+// CSS media queries in <style scoped> below. Let CSS own the variable.
 const style = computed(() => ({
   display: 'grid',
-  gridTemplateColumns: 'repeat(var(--grid-cols, 6), 1fr)',
+  gridTemplateColumns: `repeat(${cols.value}, 1fr)`,
   gap,
-  paddingInline: 'var(--grid-padding, clamp(1rem, 2.5vw, 2rem))',
+  paddingInline: 'clamp(1rem, 2.5vw, 2rem)',
   pointerEvents: 'none' as const,
-  '--grid-cols': '6',
 }))
 
 defineExpose({ toggle })
@@ -58,22 +71,8 @@ defineExpose({ toggle })
 <template>
   <Teleport to="body">
     <div v-if="visible" :style class="grid-debug z-9999 fixed inset-0" aria-hidden="true">
-      <div v-for="i in 18" :key="i" :style="{ backgroundColor: color }" class="h-full" />
+      <div v-for="i in cols" :key="i" :style="{ backgroundColor: color }" class="h-full" />
     </div>
   </Teleport>
 </template>
 
-<style scoped>
-/* Match responsive breakpoints from mastmain */
-@media (width >= 48rem) {
-  .grid-debug {
-    --grid-cols: 12;
-  }
-}
-
-@media (width >= 80rem) {
-  .grid-debug {
-    --grid-cols: 18;
-  }
-}
-</style>

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/Main.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * LayoutMain — grid root container applying the `mastmain` utility.
+ *
+ * Use this component when you need an explicit wrapper element that owns the
+ * Swiss Grid stacking context. The default layout can use it in place of a
+ * raw `<main class="mastmain">`.
+ *
+ * When `mode` is `'disabled'`, falls back to a plain semantic `<main>` so the
+ * page renders correctly without grid dependencies.
+ *
+ * @prop {string} tag — HTML element to render (default: 'main')
+ *
+ * @example
+ * <LayoutMain>
+ *   <LayoutSection>…</LayoutSection>
+ * </LayoutMain>
+ */
+
+interface Props {
+  tag?: string
+}
+
+const { tag = 'main' } = defineProps<Props>()
+
+const { mode } = useGridConfig()
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="mode !== 'disabled' ? 'mastmain' : undefined"
+  >
+    <slot />
+  </component>
+</template>

package/layers/layout/app/components/Layout/Page/index.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * LayoutPage — canonical page wrapper for the Swiss Grid System.
+ *
+ * This is a fragment component (no wrapper element). The grid root is already
+ * provided by MastMain at the layout level via <div class="mastmain">.
+ * Adding another mastmain wrapper here would nest grids and misalign everything.
+ *
+ * Responsibilities:
+ *   - SEO via useHead()
+ *   - provides 'pageTitle' to child components
+ *   - optional visible header (LayoutSection + LayoutPageHeader)
+ *
+ * LayoutGridDebug is owned by the default layout — do NOT add it here.
+ *
+ * @prop {string}  title       — Page title: sets <title> and optional visible heading
+ * @prop {string}  description — Optional meta description for SEO
+ * @prop {boolean} showHeader  — Render a LayoutPageHeader block (default: false)
+ *
+ * @example
+ * <LayoutPage title="Home">
+ *   <LayoutSectionHero>
+ *     <h1>Welcome</h1>
+ *   </LayoutSectionHero>
+ * </LayoutPage>
+ *
+ * @example
+ * <LayoutPage title="About" description="Learn more." :show-header="true">
+ *   <LayoutSection>
+ *     <LayoutGridItem preset="centered">
+ *       <p>Content here.</p>
+ *     </LayoutGridItem>
+ *   </LayoutSection>
+ * </LayoutPage>
+ */
+
+interface Props {
+  title: string
+  description?: string
+  showHeader?: boolean
+}
+
+const { title, description, showHeader = false } = defineProps<Props>()
+
+useHead({
+  title,
+  meta: description
+    ? [
+        { name: 'description', content: description },
+        { property: 'og:title', content: title },
+        { property: 'og:description', content: description },
+      ]
+    : undefined,
+})
+
+provide('pageTitle', title)
+</script>
+
+<template>
+  <!-- Optional visible page header — rendered as a grid section -->
+  <LayoutSection v-if="showHeader">
+    <LayoutGridItem preset="centered">
+      <LayoutPageHeader :title :description />
+    </LayoutGridItem>
+  </LayoutSection>
+
+  <!-- Page content — direct children of mastmain (via MastMain in the layout) -->
+  <slot />
+</template>

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>