kmcom-nuxt-layers 2.7.4 → 3.0.0

package/layers/layout/app/app.config.ts

@@ -1,180 +0,0 @@
-export default {
-  /**
-   * Nuxt UI component theming — aligned to the Swiss Grid System.
-   *
-   * UHeader: removes the default max-width container so it spans the full
-   * viewport width, using clamp-based gutters that match the grid padding.
-   *
-   * UPage / UPage* components: participate as subgrid members so their
-   * columns align to the inherited mastmain grid lines.
-   *
-   * These overrides are additive and safe when the swiss grid is disabled —
-   * col-span-full / grid-cols-subgrid have no effect outside a grid context.
-   * The consuming app can override any of these via its own app.config.ts.
-   */
-  ui: {
-    header: {
-      container: 'max-w-full px-[clamp(1rem,2.5vw,2rem)]',
-    },
-
-    // UPage: transparent subgrid participant; left/center/right slots map
-    // to named column ranges on the 18-column grid (sidebar 4, content 10,
-    // right sidebar 4; all col-start values are explicit to avoid overlap)
-    page: {
-      root: 'col-span-full grid grid-cols-subgrid',
-      left: 'col-span-4',
-      center: 'col-start-5 col-span-10',
-      right: 'col-start-15 col-span-4',
-    },
-
-    // UPageBody: no opinionated padding — the grid and sections own spacing
-    pageBody: {
-      base: '',
-    },
-
-    // UPageGrid: inherits subgrid column lines; gap matches grid gap clamp
-    pageGrid: {
-      base: 'col-span-full grid grid-cols-subgrid gap-[clamp(0.75rem,1.5vw,1.5rem)]',
-    },
-
-    // UPageColumns: inherits subgrid column lines
-    pageColumns: {
-      base: 'col-span-full grid grid-cols-subgrid',
-    },
-  },
-
-  layoutLayer: {
-    ui: {
-      // Swiss Grid System Configuration
-      grid: {
-        /**
-         * Layout mode.
-         * - 'swiss'    — Swiss Grid System (default)
-         * - 'fluid'    — Container-query based auto-fit grid
-         * - 'disabled' — Falls back to standard UMain > UPage layout
-         */
-        mode: 'swiss',
-
-        /**
-         * @deprecated Use mode: 'disabled' instead. Kept for backwards compatibility.
-         * When false, acts as mode: 'disabled'.
-         */
-        enabled: true,
-
-        // Core settings
-        columns: { default: 6, md: 12, lg: 18 },
-        rowsPerSection: 12,
-        rhythm: '0.25rem',
-
-        // Z-index layers
-        layers: {
-          // Base layers (swiss grid stacking)
-          back: 0,
-          mid: 10,
-          front: 20,
-          top: 30,
-          // UI stacking layers
-          header: 100,
-          dropdown: 200,
-          overlay: 300,
-          modal: 400,
-          toast: 500,
-        },
-
-        // Preset layouts for common patterns
-        presets: {
-          // Full-viewport hero: full width, all 12 rows
-          hero: { colSpan: 'full', rowSpan: 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: {
-            colSpan: 'full',
-            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 },
-          },
-
-          // 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 },
-          },
-          content: {
-            colStart: { default: 1, md: 5, lg: 5 },
-            colSpan: { default: 6, md: 8, lg: 14 },
-          },
-
-          // 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 },
-            rowSpan: 12,
-          },
-          splitRight: {
-            colStart: { default: 1, md: 7, lg: 10 },
-            colSpan: { default: 6, md: 6, lg: 9 },
-            rowSpan: 12,
-          },
-
-          // 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 },
-            rowSpan: 12,
-          },
-          threeQuarterRight: {
-            colStart: { default: 1, md: 4, lg: 6 },
-            colSpan: { default: 6, md: 9, lg: 13 },
-            rowSpan: 12,
-          },
-
-          // 75/25 vertical splits (stack on mobile)
-          // lg: 13+5=18 ✓  |  md: 9+3=12 ✓
-          threeQuarterLeft: {
-            colStart: 1,
-            colSpan: { default: 6, md: 9, lg: 13 },
-            rowSpan: 12,
-          },
-          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/layout/app/assets/css/layout/modes/fluid.css

@@ -1,109 +0,0 @@
-/**
- * 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 {
-  box-sizing: border-box;
-  container-type: inline-size;
-  margin-inline: auto;
-  width: 100%;
-  max-width: 65ch;
-}
-
-.layout-container-wide {
-  box-sizing: border-box;
-  container-type: inline-size;
-  margin-inline: auto;
-  width: 100%;
-  max-width: 90rem;
-}
-
-.layout-container-fluid {
-  box-sizing: border-box;
-  container-type: inline-size;
-  width: 100%;
-  max-width: 100%;
-}
-
-.layout-container-full {
-  box-sizing: border-box;
-  container-type: inline-size;
-  margin-inline: calc(var(--grid-padding, clamp(1rem, 2.5vw, 2rem)) * -1);
-
-  /* Escape parent padding to reach the viewport edge */
-  width: 100vw;
-  max-width: 100vw;
-}

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

@@ -1,2 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-<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/Page/Container.vue

@@ -1,103 +0,0 @@
-<script setup lang="ts">
-  /**
-   * PageContainer - Unified page wrapper component
-   *
-   * Integrates with the Swiss Grid System and optionally supports UPage layout.
-   * Manages page metadata via useHead() and provides title redundancy.
-   *
-   * @prop {string} title - Page title (required) - sets <title> and displays in header
-   * @prop {string} description - Optional meta description for SEO
-   * @prop {boolean} showHeader - Show visible page header (default: true)
-   * @prop {string} headerPreset - Grid preset for header: 'hero', 'centered', 'fullWidth' (default: 'centered')
-   * @prop {string} layout - Layout mode: 'grid' | 'upage' (default: 'grid')
-   *
-   * @example
-   * <!-- Simple centered page -->
-   * <PageContainer title="About" description="Learn about our company">
-   *   <LayoutSection>
-   *     <LayoutGridItem preset="centered">
-   *       <p>Content here</p>
-   *     </LayoutGridItem>
-   *   </LayoutSection>
-   * </PageContainer>
-   *
-   * @example
-   * <!-- Hero page with custom grid (no visible header) -->
-   * <PageContainer title="Welcome" :show-header="false" description="Welcome page">
-   *   <LayoutSectionHero full-height>
-   *     <h1>{{ title }}</h1>
-   *   </LayoutSectionHero>
-   * </PageContainer>
-   *
-   * @example
-   * <!-- Documentation-style with UPage -->
-   * <PageContainer title="Documentation" layout="upage">
-   *   <UPageBody>
-   *     <p>Documentation content</p>
-   *   </UPageBody>
-   * </PageContainer>
-   */
-
-  defineOptions({ inheritAttrs: false })
-
-  const {
-    title,
-    description = undefined,
-    showHeader = true,
-    headerPreset = 'centered',
-    layout = 'grid',
-    back = undefined,
-  } = defineProps<{
-    title: string
-    description?: string
-    showHeader?: boolean
-    headerPreset?: string
-    layout?: 'grid' | 'upage'
-    back?: string
-  }>()
-
-  // Set page metadata for SEO and browser tab
-  useHead({
-    title,
-    meta: description
-      ? [
-          { name: 'description', content: description },
-          { property: 'og:title', content: title },
-          { property: 'og:description', content: description },
-        ]
-      : undefined,
-  })
-
-  // Provide title to child components (e.g., for breadcrumbs, schema.org)
-  provide('pageTitle', title)
-</script>
-
-<template>
-  <!-- Grid Layout Mode (default) - no wrapper, direct children of parent MastMain -->
-  <template v-if="layout === 'grid'">
-    <!-- Optional visible header -->
-    <LayoutSection v-if="showHeader">
-      <LayoutGridItem :preset="headerPreset">
-        <LayoutPageHeader
-          :title
-          v-bind="{
-            ...(description !== undefined && { description }),
-            ...(back !== undefined && { back }),
-          }"
-        />
-      </LayoutGridItem>
-    </LayoutSection>
-
-    <!-- Main content slot -->
-    <slot />
-  </template>
-
-  <!-- UPage Layout Mode - needs wrapper with MastMain -->
-  <div v-else>
-    <MastMain>
-      <UPage v-bind="$attrs">
-        <slot />
-      </UPage>
-    </MastMain>
-  </div>
-</template>

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

@@ -1,46 +0,0 @@
-<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

@@ -1,84 +0,0 @@
-<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: '9.375rem')
-   * @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 = '9.375rem',
-    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, 9.375rem), var(--sidebar-max, 25%)) 1fr;
-    gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
-    container-type: inline-size;
-    width: 100%;
-    height: 100%;
-
-    /* Collapse to a single column when the container itself is too narrow
-       for the sidebar split, regardless of viewport size. */
-    @container (width < 30rem) {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .sidebar-inner.sidebar-reverse {
-    grid-template-columns: 1fr minmax(var(--sidebar-min, 9.375rem), 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

@@ -1,63 +0,0 @@
-<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;
-    width: 100%;
-    height: 100%;
-  }
-
-  .stack-header,
-  .stack-footer {
-    /* auto — natural height */
-  }
-
-  .stack-main {
-    /* 1fr — grows to fill remaining space */
-  }
-</style>

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

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-  /**
-   * PageHeader - Standard page header component
-   *
-   * Displays a centered page title and optional description with consistent spacing.
-   * Used by PageContainer for visible page headers.
-   *
-   * @prop {string} title - Page title (displays as h1)
-   * @prop {string} description - Optional page description
-   *
-   * @example
-   * <LayoutSectionTitle
-   *   title="About Us"
-   *   description="Learn about our company and mission"
-   * />
-   */
-
-  interface Props {
-    title: string
-    description?: string
-  }
-
-  const { title, description = undefined } = defineProps<Props>()
-</script>
-
-<template>
-  <LayoutGridItem class="prose-rhythm text-center" align="start" justify="center">
-    <h1 class="text-5xl font-bold">{{ title }}</h1>
-    <p v-if="description" class="text-xl text-gray-600 dark:text-gray-400">
-      {{ description }}
-    </p>
-  </LayoutGridItem>
-</template>