kmcom-nuxt-layers 2.7.5 → 3.0.0

package/docs/FALLOW-COMPLEXITY-DUPLICATION-AUDIT.md

@@ -55,7 +55,6 @@ pnpm typecheck
 - [layers/theme](./fallow-refactor/layers-theme.md)
 - [layers/transitions](./fallow-refactor/layers-transitions.md)
 - [layers/typography](./fallow-refactor/layers-typography.md)
-- [layers/ui](./fallow-refactor/layers-ui.md)
 - [layers/visual](./fallow-refactor/layers-visual.md)
 
 ## Non-Goals

package/docs/LAYOUT.md

@@ -1,6 +1,6 @@
 # Layout Layer
 
-Swiss Grid System for Nuxt 4 applications. Provides a responsive 6/12/18-column CSS subgrid, page structure components, a mode system, and fluid layout utilities.
+Swiss Grid System for Nuxt 4 applications. Provides a responsive 6/12/18-column CSS subgrid, page structure components, and a mode system.
 
 ---
 
@@ -20,15 +20,15 @@ Swiss Grid System for Nuxt 4 applications. Provides a responsive 6/12/18-column
 
 ## How it works
 
-The grid is a single CSS `display: grid` on `<main>` (the `.mastmain` class). Everything else — sections, items — participates via CSS `subgrid`, meaning they inherit the parent's column and row lines rather than defining their own. No JS is involved in the grid itself.
+The grid is a single CSS `display: grid` on `<main>` (the `.grid-root` class). Everything else — sections, items — participates via CSS `subgrid`, meaning they inherit the parent's column and row lines rather than defining their own. No JS is involved in the grid itself.
 
 ```
-<main class="mastmain">          ← defines the grid (6/12/18 cols, row height)
+<main class="grid-root">          ← defines the grid (6/12/18 cols, row height)
   <section class="basesection">  ← subgrid: inherits cols + rows, spans 12 rows (= 100vh)
     <div style="grid-column: ..."> ← positioned within the subgrid
 ```
 
-`LayoutMain` renders the `<main class="mastmain">`. `LayoutSection` renders `<section class="basesection">`. `LayoutGridItem` handles grid positioning via inline style or presets.
+`LayoutMain` renders the `<main class="grid-root">`. `LayoutSection` renders `<section class="basesection">`. `LayoutGridItem` handles grid positioning via inline style or presets.
 
 ---
 
@@ -55,7 +55,7 @@ The layout layer requires a dedicated Nuxt layout file and page-level layout dec
 </script>
 ```
 
-> `LayoutPage` is a fragment component — it intentionally provides no wrapper element. The `mastmain` grid lives on `LayoutMain` in the layout file, not in `LayoutPage` itself. Do not add a second `LayoutMain` inside `LayoutPage`.
+> `LayoutPage` is a fragment component — it intentionally provides no wrapper element. The `grid-root` grid lives on `LayoutMain` in the layout file, not in `LayoutPage` itself. Do not add a second `LayoutMain` inside `LayoutPage`.
 
 **Grid debug overlay** (`Cmd+G` to toggle) is rendered by `LayoutGridDebug` inside the layout file, not per-page.
 
@@ -63,13 +63,12 @@ The layout layer requires a dedicated Nuxt layout file and page-level layout dec
 
 ## Mode system
 
-The grid has three modes controlled via `app.config.ts`:
+The grid has two modes controlled via `app.config.ts`:
 
-| Mode         | Behaviour                                                                       |
-| ------------ | ------------------------------------------------------------------------------- |
-| `'swiss'`    | Default. Full Swiss grid with `mastmain`/`basesection` CSS subgrid.             |
-| `'fluid'`    | Container-query-based auto-fit grid. `basesection` still gets `container-type`. |
-| `'disabled'` | `LayoutMain` renders a plain `<main>` without grid CSS.                         |
+| Mode         | Behaviour                                                            |
+| ------------ | -------------------------------------------------------------------- |
+| `'swiss'`    | Default. Full Swiss grid with `grid-root`/`basesection` CSS subgrid. |
+| `'disabled'` | `LayoutMain` renders a plain `<main>` without grid CSS.              |
 
 Set in your `app.config.ts`:
 
@@ -78,7 +77,7 @@ export default defineAppConfig({
   layoutLayer: {
     ui: {
       grid: {
-        mode: 'swiss', // 'swiss' | 'fluid' | 'disabled'
+        mode: 'swiss', // 'swiss' | 'disabled'
       },
     },
   },
@@ -91,7 +90,7 @@ Read in code:
 
 ```ts
 const { mode, isEnabled } = useGridConfig()
-// mode.value === 'swiss' | 'fluid' | 'disabled'
+// mode.value === 'swiss' | 'disabled'
 // isEnabled.value === mode !== 'disabled'
 ```
 
@@ -101,7 +100,7 @@ const { mode, isEnabled } = useGridConfig()
 
 ### `LayoutMain`
 
-Renders `<main class="mastmain">`. When `mode === 'disabled'` it renders a plain `<main>` with no grid classes.
+Renders `<main class="grid-root">`. When `mode === 'disabled'` it renders a plain `<main>` with no grid classes.
 
 ```vue
 <LayoutMain>           <!-- default: <main> -->
@@ -169,7 +168,7 @@ Fragment component (no wrapper element). Handles `useHead()` SEO and optionally
 
 ### `LayoutSection`
 
-Full-viewport subgrid section. Spans 12 rows (= 100vh). Inherits the parent `.mastmain` grid columns via `subgrid`.
+Full-viewport subgrid section. Spans 12 rows (= 100vh). Inherits the parent `.grid-root` grid columns via `subgrid`.
 
 ```vue
 <LayoutSection>
@@ -218,19 +217,10 @@ Positioned child within a subgrid section. Use `preset` for common layouts or se
 
 **Built-in presets:**
 
-| Preset              | Columns        | Rows        |
-| ------------------- | -------------- | ----------- |
-| `hero`              | full width     | full height |
-| `centered`          | centre 10 cols | rows 2–10   |
-| `fullWidth`         | full width     | auto        |
-| `sidebar`           | cols 1–4       | full height |
-| `content`           | cols 5–14      | rows 2–10   |
-| `splitLeft`         | left half      | full        |
-| `splitRight`        | right half     | full        |
-| `quarterLeft`       | first quarter  | full        |
-| `threeQuarterRight` | right 3/4      | full        |
-| `halfTop`           | full width     | top half    |
-| `halfBottom`        | full width     | bottom half |
+| Preset     | Columns    | Rows        |
+| ---------- | ---------- | ----------- |
+| `hero`     | full width | full height |
+| `centered` | full width | 12 rows     |
 
 ---
 
@@ -294,14 +284,14 @@ Column overlay toggled with `Cmd+G`. Place once in your grid layout file, not in
 const { config, getPreset, isEnabled, mode, layers, useZIndex } = useGridConfig()
 ```
 
-| Return             | Type                           | Description                        |
-| ------------------ | ------------------------------ | ---------------------------------- |
-| `config`           | `Ref<GridConfig>`              | Raw config from `app.config`       |
-| `isEnabled`        | `ComputedRef<boolean>`         | `true` when `mode !== 'disabled'`  |
-| `mode`             | `ComputedRef<GridMode>`        | `'swiss' \| 'fluid' \| 'disabled'` |
-| `layers`           | `ComputedRef<GridLayers>`      | All z-index values                 |
-| `getPreset(name)`  | `GridPresetsItem \| undefined` | Look up a preset by name           |
-| `useZIndex(layer)` | `number`                       | Get a z-index value by layer name  |
+| Return             | Type                           | Description                       |
+| ------------------ | ------------------------------ | --------------------------------- |
+| `config`           | `Ref<GridConfig>`              | Raw config from `app.config`      |
+| `isEnabled`        | `ComputedRef<boolean>`         | `true` when `mode !== 'disabled'` |
+| `mode`             | `ComputedRef<GridMode>`        | `'swiss' \| 'disabled'`           |
+| `layers`           | `ComputedRef<GridLayers>`      | All z-index values                |
+| `getPreset(name)`  | `GridPresetsItem \| undefined` | Look up a preset by name          |
+| `useZIndex(layer)` | `number`                       | Get a z-index value by layer name |
 
 **`useZIndex` example:**
 
@@ -321,7 +311,7 @@ All grid CSS is in `layers/layout/app/assets/css/layout/`.
 
 ### `grids.css` — Core grid classes
 
-**`.mastmain`** — Root grid container on `<main>`.
+**`.grid-root`** — Root grid container on `<main>`.
 
 ```css
 /* Responsive column counts */
@@ -344,23 +334,6 @@ CSS custom properties exposed:
 
 **Vertical rhythm utilities** (`.leading-rhythm-*`, `.space-rhythm-*`, `.prose-rhythm`)
 
-### `modes/fluid.css` — Fluid grid classes
-
-Container-query-based auto-fit grids for components that should respond to their container width rather than the viewport.
-
-```vue
-<div class="fluid-grid">          <!-- auto-fit, min col 16rem -->
-<div class="fluid-grid-2">        <!-- 2-column at container ≥ 30rem -->
-<div class="fluid-grid-3">        <!-- 3-column at container ≥ 44rem -->
-<div class="fluid-grid-4">        <!-- 4-column at container ≥ 52rem -->
-```
-
-Tune minimum column width per-instance:
-
-```vue
-<div class="fluid-grid" style="--fluid-col-min: 20rem">
-```
-
 **Container size classes** (used by `LayoutContainer`):
 
 | Class                       | Effect                               |
@@ -423,7 +396,7 @@ Full type from `layers/layout/app/types/layouts.ts`:
 
 ```ts
 interface GridConfig {
-  mode?: 'swiss' | 'fluid' | 'disabled'
+  mode?: 'swiss' | 'disabled'
   /** @deprecated use mode: 'disabled' */
   enabled?: boolean
   layers?: Partial<GridLayers>
@@ -478,12 +451,12 @@ export default defineAppConfig({
 
 ```css
 /* Wrong — class will not exist in output */
-@utility mastmain {
+@utility grid-root {
   display: grid;
 }
 
 /* Correct */
-.mastmain {
+.grid-root {
   display: grid;
 }
 ```
@@ -492,16 +465,16 @@ export default defineAppConfig({
 
 The CSS overflow interaction rule: setting `overflow-x: hidden` on any element forces `overflow-y` from `visible` to `auto`, turning that element into a scroll container. When the element is `html` or `body`, `window.scrollY` stays 0 even when content overflows the viewport.
 
-**Use `overflow-x: clip` instead.** `clip` cuts off overflow without creating a scroll container and is not subject to the forced `overflow-y` conversion. This is why `.mastmain`, `html`, and `body` all use `overflow-x: clip` in this layer.
+**Use `overflow-x: clip` instead.** `clip` cuts off overflow without creating a scroll container and is not subject to the forced `overflow-y` conversion. This is why `.grid-root`, `html`, and `body` all use `overflow-x: clip` in this layer.
 
 ```css
 /* Wrong */
-.mastmain {
+.grid-root {
   overflow-x: hidden;
 } /* becomes a scroll container */
 
 /* Correct */
-.mastmain {
+.grid-root {
   overflow-x: clip;
 } /* clips without scroll container */
 ```
@@ -522,6 +495,6 @@ addRouteMiddleware((to, from) => {
 
 ### `LayoutPage` is a fragment — it provides no grid wrapper
 
-`LayoutPage` renders no element of its own. The `mastmain` grid lives on `LayoutMain` inside a layout file. If you use `<LayoutPage>` on a page that uses the `default` layout (which doesn't include `LayoutMain`), the grid CSS never applies.
+`LayoutPage` renders no element of its own. The `grid-root` grid lives on `LayoutMain` inside a layout file. If you use `<LayoutPage>` on a page that uses the `default` layout (which doesn't include `LayoutMain`), the grid CSS never applies.
 
 Always pair `LayoutPage` usage with `definePageMeta({ layout: 'grid' })` and ensure `layouts/grid.vue` exists with `<LayoutMain>`.

package/docs/MIGRATION.md

@@ -521,7 +521,7 @@ definePageMeta({
 // No chrome needed (content-only page):
 definePageMeta({ layout: 'grid' })
 
-// Full-bleed pages (no mastmain grid at all):
+// Full-bleed pages (no grid-root grid at all):
 definePageMeta({ layout: false })
 ```
 

package/docs/UPAGE-GRID-INTEGRATION.md

@@ -2,10 +2,10 @@
 
 ## The Problem
 
-`<LayoutMain>` renders `<main class="mastmain">` which sets:
+`<LayoutMain>` renders `<main class="grid-root">` which sets:
 
 ```css
-.mastmain {
+.grid-root {
   grid-auto-rows: calc((100vh - 11 * gap) / 12); /* ≈ 8.5vh per row */
 }
 ```
@@ -31,7 +31,7 @@ Every direct child that doesn't explicitly span rows becomes ~8.5vh tall. `<UPag
 **Change in `grids.css`:**
 
 ```css
-.mastmain {
+.grid-root {
   /* Before */
   grid-auto-rows: var(--grid-row-height);
 
@@ -67,7 +67,7 @@ ui: {
 }
 ```
 
-With `display: contents`, `<UPage>` generates no box — its children (`UPageHero`, `UPageSection`, etc.) become direct grid items in `mastmain`.
+With `display: contents`, `<UPage>` generates no box — its children (`UPageHero`, `UPageSection`, etc.) become direct grid items in `grid-root`.
 
 **What changes:**
 
@@ -93,7 +93,7 @@ A new component that gives pages an explicit choice between Swiss Grid and norma
 </script>
 
 <template>
-  <!-- Swiss: children participate directly in mastmain grid (use LayoutSection) -->
+  <!-- Swiss: children participate directly in grid-root grid (use LayoutSection) -->
   <template v-if="mode === 'swiss'">
     <slot />
   </template>
@@ -162,7 +162,7 @@ Don't apply `<LayoutMain>` in the layouts at all. Let pages that want the Swiss
 </template>
 ```
 
-**This is the current approach after the revert.** The layout layer is available everywhere but not globally applied. The `mastmain` CSS class exists — any element can opt in via `class="mastmain"` or `<LayoutMain tag="div">`.
+**This is the current approach after the revert.** The layout layer is available everywhere but not globally applied. The `grid-root` CSS class exists — any element can opt in via `class="grid-root"` or `<LayoutMain tag="div">`.
 
 **Trade-off:** No automatic column alignment across pages. Pages must explicitly adopt the grid.
 

package/docs/layout-shift-causes.md

@@ -72,7 +72,7 @@ Catalogue of layout shift (CLS) issues found and fixed in this monorepo, with ro
 
 ## 9. `NuxtAnnouncer` / `NuxtRouteAnnouncer` inside a CSS grid — `app.vue`
 
-**Cause:** `<NuxtAnnouncer>` and `<NuxtRouteAnnouncer>` were inside the `<NuxtLayout>` slot, making them direct children of the `mastmain` CSS grid. Before their `position: absolute` CSS loaded, they auto-placed as grid rows and pushed the `basesection` down by ~85px. When the CSS loaded and removed them from grid flow, the section jumped back up.
+**Cause:** `<NuxtAnnouncer>` and `<NuxtRouteAnnouncer>` were inside the `<NuxtLayout>` slot, making them direct children of the `grid-root` CSS grid. Before their `position: absolute` CSS loaded, they auto-placed as grid rows and pushed the `basesection` down by ~85px. When the CSS loaded and removed them from grid flow, the section jumped back up.
 
 **Fix:** Remove `<NuxtAnnouncer>` and `<NuxtRouteAnnouncer>` entirely — they are boilerplate and not needed in this project.