layout-style-css 3.0.2 → 3.2.0

package/dist/primitives.css

@@ -1,4 +1,4 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
 
 /* Composition primitives use intrinsic sizing so their content chooses reflow points. */
 
@@ -115,6 +115,44 @@
     grid-template-columns: repeat(var(--ly-grid-columns), minmax(0, 1fr));
   }
 
+  .ly-mosaic {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ly-grid-gap);
+  }
+
+  .ly-mosaic > * {
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  .ly-action-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+    min-inline-size: 0;
+    padding-block-end: var(--ly-safe-area-block-end);
+  }
+
+  .ly-action-bar > :where([data-ly-actions="start"], [data-ly-actions="end"]) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+    min-inline-size: 0;
+  }
+
+  .ly-action-bar > [data-ly-actions="end"] {
+    margin-inline-start: auto;
+  }
+
+  .ly-action-bar--sticky {
+    position: var(--ly-sticky-position, sticky);
+    inset-block-end: 0;
+    z-index: var(--ly-z-header, 20);
+  }
+
   .ly-split {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-split-min)), 1fr));
@@ -175,9 +213,89 @@
 
   .ly-scroll {
     min-block-size: 0;
-    max-block-size: var(--ly-scroll-max);
-    overflow-x: clip;
-    overflow-y: auto;
+    overflow: auto;
     overscroll-behavior-block: contain;
   }
+
+  .ly-scroll--bounded {
+    max-block-size: var(--ly-scroll-max);
+  }
+
+  .ly-scroll--viewport {
+    max-block-size: var(--ly-scroll-viewport-max);
+  }
+}
+
+/*
+  Mosaic span behavior lives in the final structural context layer so it can
+  deliberately override the general-purpose span utilities at automatic tiers.
+*/
+@layer ly.context {
+  .ly-mosaic:not([data-ly-responsive="manual"]) > :where(
+    .ly-span-1,
+    .ly-span-2,
+    .ly-span-3,
+    .ly-span-4,
+    .ly-span-6,
+    .ly-span-full
+  ) {
+    grid-column: 1 / -1;
+  }
+
+  .ly-mosaic:not([data-ly-responsive="manual"]) > :where(
+    .ly-row-span-2,
+    .ly-row-span-3
+  ) {
+    grid-row: auto;
+  }
+
+  @container ly-scope (min-width: 42rem) {
+    .ly-mosaic:not([data-ly-responsive="manual"]) {
+      grid-template-columns: repeat(
+        var(--ly-mosaic-medium-columns),
+        minmax(0, 1fr)
+      );
+    }
+
+    .ly-mosaic:not([data-ly-responsive="manual"]) > .ly-span-1 {
+      grid-column: span 1;
+    }
+
+    .ly-mosaic:not([data-ly-responsive="manual"]) > .ly-span-2 {
+      grid-column: span 2;
+    }
+
+    .ly-mosaic:not([data-ly-responsive="manual"]) > .ly-span-3 {
+      grid-column: span 3;
+    }
+
+    .ly-mosaic:not([data-ly-responsive="manual"]) > .ly-span-4 {
+      grid-column: span 4;
+    }
+
+    .ly-mosaic:not([data-ly-responsive="manual"]) > .ly-span-6 {
+      grid-column: span 6;
+    }
+
+    .ly-mosaic:not([data-ly-responsive="manual"]) > .ly-span-full {
+      grid-column: 1 / -1;
+    }
+
+    .ly-mosaic:not([data-ly-responsive="manual"]) > .ly-row-span-2 {
+      grid-row: span 2;
+    }
+
+    .ly-mosaic:not([data-ly-responsive="manual"]) > .ly-row-span-3 {
+      grid-row: span 3;
+    }
+  }
+
+  @container ly-scope (min-width: 72rem) {
+    .ly-mosaic:not([data-ly-responsive="manual"]) {
+      grid-template-columns: repeat(
+        var(--ly-mosaic-wide-columns),
+        minmax(0, 1fr)
+      );
+    }
+  }
 }

package/dist/recipes.css

@@ -1,4 +1,4 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
 
 /*
   Recipes preserve the narrow-screen DOM order. Automatic topology queries
@@ -194,4 +194,87 @@
       grid-template-columns: var(--ly-dashboard-wide-columns);
     }
   }
+
+  /*
+    Feature-detected presence rules remove absent side tracks without changing
+    the canonical area vocabulary or personality-owned both-side topologies.
+  */
+  @supports selector(:has(*)) {
+    @container ly-scope (min-width: 52rem) {
+      [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]):has(
+        > [data-ly-area="sidebar"]
+      ):not(:has(> [data-ly-area="aside"])) {
+        grid-template-areas:
+          "header header"
+          "sidebar main"
+          "footer footer";
+        grid-template-columns:
+          minmax(min(100%, var(--ly-recipe-rail)), auto)
+          minmax(min(100%, var(--ly-recipe-main-min)), 1fr);
+        grid-template-rows: auto minmax(0, 1fr) auto;
+      }
+
+      [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]):not(
+        :has(> [data-ly-area="sidebar"])
+      ):has(> [data-ly-area="aside"]) {
+        grid-template-areas:
+          "header header"
+          "main aside"
+          "footer footer";
+        grid-template-columns:
+          minmax(min(100%, var(--ly-recipe-main-min)), 1fr)
+          minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+        grid-template-rows: auto minmax(0, 1fr) auto;
+      }
+
+      [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]):not(
+        :has(> [data-ly-area="sidebar"])
+      ):not(:has(> [data-ly-area="aside"])) {
+        grid-template-areas:
+          "header"
+          "main"
+          "footer";
+        grid-template-columns:
+          minmax(min(100%, var(--ly-recipe-main-min)), 1fr);
+        grid-template-rows: auto minmax(0, 1fr) auto;
+      }
+    }
+
+    @container ly-scope (min-width: 72rem) {
+      [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]):has(
+        > [data-ly-area="sidebar"]
+      ):not(:has(> [data-ly-area="aside"])) {
+        grid-template-areas:
+          "sidebar header"
+          "sidebar main"
+          "sidebar footer";
+        grid-template-columns:
+          minmax(min(100%, var(--ly-recipe-rail)), auto)
+          minmax(min(100%, var(--ly-recipe-main-min)), 1fr);
+      }
+
+      [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]):not(
+        :has(> [data-ly-area="sidebar"])
+      ):has(> [data-ly-area="aside"]) {
+        grid-template-areas:
+          "header header"
+          "main aside"
+          "footer footer";
+        grid-template-columns:
+          minmax(min(100%, var(--ly-recipe-main-min)), 1fr)
+          minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+      }
+
+      [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]):not(
+        :has(> [data-ly-area="sidebar"])
+      ):not(:has(> [data-ly-area="aside"])) {
+        grid-template-areas:
+          "header"
+          "main"
+          "footer";
+        grid-template-columns:
+          minmax(min(100%, var(--ly-recipe-main-min)), 1fr);
+      }
+    }
+  }
 }

package/dist/utilities.css

@@ -1,4 +1,4 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
 
 /* Optional structural utilities expose direct token overrides without breakpoint tiers. */
 
@@ -14,42 +14,21 @@
   .ly-span-2 { grid-column: span 2; }
   .ly-span-3 { grid-column: span 3; }
   .ly-span-4 { grid-column: span 4; }
+  .ly-span-6 { grid-column: span 6; }
   .ly-span-full { grid-column: 1 / -1; }
+  .ly-row-span-2 { grid-row: span 2; }
+  .ly-row-span-3 { grid-row: span 3; }
 
-  .ly-gap-0 {
-    --ly-gap: var(--ly-space-0);
-    --ly-grid-gap: var(--ly-space-0);
-    --ly-stack-gap: var(--ly-space-0);
-    --ly-cluster-gap: var(--ly-space-0);
-  }
-
-  .ly-gap-2 {
-    --ly-gap: var(--ly-space-2);
-    --ly-grid-gap: var(--ly-space-2);
-    --ly-stack-gap: var(--ly-space-2);
-    --ly-cluster-gap: var(--ly-space-2);
-  }
-
-  .ly-gap-4 {
-    --ly-gap: var(--ly-space-4);
-    --ly-grid-gap: var(--ly-space-4);
-    --ly-stack-gap: var(--ly-space-4);
-    --ly-cluster-gap: var(--ly-space-4);
-  }
-
-  .ly-gap-6 {
-    --ly-gap: var(--ly-space-6);
-    --ly-grid-gap: var(--ly-space-6);
-    --ly-stack-gap: var(--ly-space-6);
-    --ly-cluster-gap: var(--ly-space-6);
-  }
-
-  .ly-gap-8 {
-    --ly-gap: var(--ly-space-8);
-    --ly-grid-gap: var(--ly-space-8);
-    --ly-stack-gap: var(--ly-space-8);
-    --ly-cluster-gap: var(--ly-space-8);
-  }
+  .ly-gap-0 { gap: var(--ly-space-0); }
+  .ly-gap-1 { gap: var(--ly-space-1); }
+  .ly-gap-2 { gap: var(--ly-space-2); }
+  .ly-gap-3 { gap: var(--ly-space-3); }
+  .ly-gap-4 { gap: var(--ly-space-4); }
+  .ly-gap-5 { gap: var(--ly-space-5); }
+  .ly-gap-6 { gap: var(--ly-space-6); }
+  .ly-gap-7 { gap: var(--ly-space-7); }
+  .ly-gap-8 { gap: var(--ly-space-8); }
+  .ly-gap-9 { gap: var(--ly-space-9); }
 
   .ly-pad-0 { padding: var(--ly-space-0); }
   .ly-pad-2 { padding: var(--ly-space-2); }

package/dist/wrappers.css

@@ -1,4 +1,4 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
 
 /* Wrappers provide fluid measures and become the nearest responsive scope. */
 
@@ -31,6 +31,10 @@
     --ly-wrapper-max: var(--ly-wrapper-content);
   }
 
+  .ly-wrapper--workspace {
+    --ly-wrapper-max: var(--ly-wrapper-workspace);
+  }
+
   .ly-wrapper--wide {
     --ly-wrapper-max: var(--ly-wrapper-wide);
   }

package/docs/wiki/Demo-And-GitHub-Pages.md

@@ -6,7 +6,9 @@ The v3 demo is an intrinsic responsive workbench, not a fixed-device screenshot
 
 - Independent preview width and height
 - Automatic and manual recipe responsiveness
-- Wrapper, recipe, and all sixteen personality profiles
+- Wrapper, recipe, and all twenty personality profiles sourced from generated metadata
+- Independent recommended and compatible UI-pairing guidance
+- Visible Mosaic, Action Bar, and content-resilience fixtures within the selected preview allocation
 - Layout-only, Layout plus UI, and all-three ecosystem modes
 - Live rendered dimensions and active topology
 - Copy-ready canonical attribute markup
@@ -30,7 +32,7 @@ npm run test:demo:quick
 npm run test:demo:all
 ```
 
-The full matrix runs in Chromium, Firefox, and WebKit. It checks meaningful DOM, unchanged source/focus order, automatic and manual topologies, nearest-container behavior, short-height escape hatches, zero-width tracks, overlap, and unintended overflow.
+The full matrix runs in Chromium, Firefox, and WebKit. It checks meaningful DOM, unchanged source/focus order, automatic and manual topologies, nearest-container behavior, short-height escape hatches, Mosaic thresholds, Action Bar wrapping/stickiness, reachable two-axis Scroll overflow, zero-width tracks, overlap, and unintended document overflow.
 
 ## GitHub Pages
 

package/docs/wiki/Getting-Started.md

@@ -1,9 +1,9 @@
 # Getting Started
 
-Install `layout-style-css@3.0.2` and import the root bundle:
+Install `layout-style-css@3.2.0` and import the root bundle:
 
 ```bash
-npm install layout-style-css@3.0.2
+npm install layout-style-css@3.2.0
 ```
 
 ```js
@@ -12,7 +12,7 @@ import "layout-style-css";
 
 ## First Automatic Layout
 
-The zero-configuration path needs only `.ly-root`, a recipe attribute, and semantic areas:
+The zero-configuration path uses normal density and needs only `.ly-root`, a recipe attribute, and semantic areas:
 
 ```html
 <body class="ly-root" data-ly-layout="minimal-saas">
@@ -39,7 +39,11 @@ Use wrappers when a composition needs a named measure or local responsive scope:
 </section>
 ```
 
-Available measures are `.ly-wrapper--compact`, `.ly-wrapper--prose`, `.ly-wrapper--content`, `.ly-wrapper--wide`, `.ly-wrapper--full`, and `.ly-wrapper--breakout`.
+Available measures are `.ly-wrapper--compact`, `.ly-wrapper--prose`, `.ly-wrapper--content`, `.ly-wrapper--workspace`, `.ly-wrapper--wide`, `.ly-wrapper--full`, and `.ly-wrapper--breakout`. Workspace is the `96rem` task-oriented application measure; content is the conventional `72rem` measure.
+
+## Optional Density
+
+Set `data-ly-density="compact"`, `data-ly-density="normal"`, or `data-ly-density="spacious"` on the root or a nested subtree. Nested contexts intentionally reset inherited spacing.
 
 ## Manual Topology
 
@@ -60,4 +64,7 @@ Keep mobile DOM order authoritative. The package never changes reading or focus
 - [Layout Primitives](Layout-Primitives.md)
 - [Layout Recipes](Layout-Recipes.md)
 - [Layout Styles](Layout-Styles.md)
+- [Layout Personality Reference](Layout-Personality-Reference.md)
 - [Migrating To 3.0](Migrating-To-3.0.md)
+- [Migrating To 3.1](Migrating-To-3.1.md)
+- [Migrating To 3.2](Migrating-To-3.2.md)

package/docs/wiki/Home.md

@@ -1,14 +1,16 @@
 # Layout Style CSS v3
 
-`layout-style-css@3.0.2` is a dependency-free, CSS-only structural system for layouts that adapt to available width and height.
+`layout-style-css@3.2.0` is the current release candidate. It remains a dependency-free, CSS-only structural system for layouts that adapt to available width and height.
 
 ## Contract
 
 - `.ly-root` is a usable layout and named `ly-scope` container.
 - Wrappers are optional measure and nesting controls.
+- Normal density is the zero-configuration default; compact and spacious contexts can be nested locally.
 - Seven `data-ly-recipe` values enhance a semantic stacked fallback.
 - `data-ly-responsive="manual"` transfers topology ownership to application CSS.
-- Sixteen `data-ly-layout` profiles tune one shared responsive engine.
+- Twenty `data-ly-layout` profiles tune one shared responsive engine.
+- Mosaic, Action Bar, area-aware App Shell behavior, and guarded content floors remain structural and CSS-only.
 - `100dvh` behavior and the `44rem`/`30rem` height tiers avoid short-screen traps.
 - The mobile DOM order remains the reading, keyboard, and focus order.
 
@@ -21,7 +23,10 @@ Layout owns structure. UI Style Kit owns paint. Interactive Surface owns interac
 - [Layout Primitives](Layout-Primitives.md)
 - [Layout Recipes](Layout-Recipes.md)
 - [Layout Styles](Layout-Styles.md)
+- [Layout Personality Reference](Layout-Personality-Reference.md)
 - [Migrating To 3.0](Migrating-To-3.0.md)
+- [Migrating To 3.1](Migrating-To-3.1.md)
+- [Migrating To 3.2](Migrating-To-3.2.md)
 - [Demo And GitHub Pages](Demo-And-GitHub-Pages.md)
 - [Release And Publishing](Release-And-Publishing.md)
 - [Security And Support](Security-And-Support.md)

package/docs/wiki/Installation-And-CDN.md

@@ -9,7 +9,7 @@
 ## Package
 
 ```bash
-npm install layout-style-css@3.0.2
+npm install layout-style-css@3.2.0
 ```
 
 ```js
@@ -36,11 +36,11 @@ Package and bundler defaults (`main`, `style`, and the root export) use the read
 ## CDN
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.2/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.2.0/dist/layout-style-css.min.css">
 ```
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.2/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.2.0/dist/layout-style-css.min.css">
 ```
 
 The CDN paths include `/dist/` because CDN clients address files in the published tarball, while package import maps use the public exports.
@@ -69,9 +69,10 @@ The module order is:
 5. `ly.recipes`
 6. `ly.utilities`
 7. `ly.personalities`
+8. `ly.context`
 
-Application styles can override public custom properties without reordering the package modules.
+The final context layer lets explicit density profiles override personality defaults. Unlayered application styles remain stronger than every package layer and can override public custom properties without reordering modules.
 
 ## Clean-Break Note
 
-v3 does not export a compatibility bundle, legacy aliases, the deprecated structural bridge, extensionless aliases, or responsive/order utility families. See [Migrating To 3.0](Migrating-To-3.0.md).
+v3 does not export a compatibility bundle, legacy aliases, the deprecated structural bridge, extensionless aliases, or responsive/order utility families. See [Migrating To 3.0](Migrating-To-3.0.md) for the major migration and [Migrating To 3.1](Migrating-To-3.1.md) for current behavioral refinements.

package/docs/wiki/Layout-Personality-Reference.md

@@ -0,0 +1,67 @@
+# Layout Personality Reference
+
+Layout Style CSS v3.2 publishes twenty `data-ly-layout` personalities. Each one is a structural token profile consumed by the shared responsive engine; it does not own color, type, borders, shadows, interaction state, or an independent breakpoint system.
+
+Layout owns structure. UI Style Kit owns paint. Interactive Surface owns interaction styling.
+
+## Geometry Targets
+
+These are the canonical release values. Preferred wrapper refers to the default `.ly-wrapper` measure selected by the personality.
+
+| Layout | Preferred wrapper | Profile gap | Grid min | Rail | Aside | Other required behavior |
+| --- | --- | --- | --- | --- | --- | --- |
+| Minimal SaaS | `88rem` | `--ly-space-5` (1.5rem) | `16rem` | `15rem` | `16rem` | Keep split `1.05fr / 0.95fr`; conservative shared topology |
+| Bento | `112rem` | `--ly-space-4` (1rem) | `12rem` | `14rem` | `18rem` | Keep card `14rem`, gallery `11rem`; remove old four-track shell; canonical Mosaic consumer |
+| Maximalist | `100%` | `--ly-space-3` (0.75rem) | `10rem` | `15rem` | `18rem` | Keep card `13rem`, gallery `10rem`; remove old four-track shell |
+| Bauhaus | `96rem` | `--ly-space-2` (0.5rem) | `13rem` | `14rem` | `18rem` | Remove old four-track shell; set split bias `0.7fr / 1.3fr`; canonical Mosaic consumer |
+| Tactile | `96rem` | `--ly-space-4` (1rem) | `15rem` | `17rem` | `20rem` | Preserve List Detail bias `0.5fr / 0.9fr`; remove left sidebar/aside stacking topology |
+| Neumorphism | `84rem` | `--ly-space-6` (2rem) | `17rem` | `17rem` | `22rem` | Remove persistent-right-sidebar topology; preserve List Detail `1.1fr / 0.7fr` |
+| Retrofuturism | `106rem` | `--ly-space-5` (1.5rem) | `14rem` | `14rem` | `17rem` | Preserve current dual-rail wide topology |
+| Brutalism | `100%` | `--ly-space-1` (0.25rem) | `14rem` | `16rem` | `18rem` | Remove persistent-right-sidebar topology; canonical Mosaic consumer |
+| Cyberpunk | `112rem` | `--ly-space-4` (1rem) | `12rem` | `13rem` | `19rem` | Preserve current wide topology |
+| Y2K | `100%` | `--ly-space-2` (0.5rem) | `13rem` | `18rem` | `16rem` | Wide shell uses global header/footer with persistent dual rails; Mosaic consumer |
+| Retro Glass | `100%` | `--ly-space-2` (0.5rem) | `15rem` | `16rem` | `17rem` | Wide shell uses global header/footer with dual-rail desktop workbench; Mosaic consumer |
+| F-pattern | `92rem` | `--ly-space-4` (1rem) | `14rem` | `16rem` | `18rem` | Preserve Split Hero `1.8fr / 0.8fr` |
+| Z-pattern | `108rem` | `--ly-space-5` (1.5rem) | `14rem` | `17rem` | `19rem` | Preserve Split Hero `1.5fr / 0.5fr` and current directional weighting |
+| Split Screen | `100%` | `--ly-space-4` (1rem) | `20rem` | `24rem` | `24rem` | Preserve equal-half App Shell, Split Hero, and List Detail behavior |
+| Mondrian | `112rem` | `--ly-space-3` (0.75rem) | `11rem` | `13rem` | `18rem` | Preserve asymmetric wide composition |
+| Synthwave | `112rem` | `--ly-space-6` (2rem) | `14rem` | `16rem` | `20rem` | Preserve three-zone wide shell and `20rem` Reel item minimum |
+| Technical Blueprint | `100%` | `--ly-space-1` (0.25rem) | `10rem` | `11rem` | `26rem` | Split bias `2.2fr / 0.8fr`; technical-canvas-dominant; Mosaic consumer |
+| Data Terminal | `100%` | `--ly-space-1` (0.25rem) | `10rem` | `12rem` | `18rem` | Band-dense command/data composition; card/gallery mins `10rem`; no new Band primitive in 3.2 |
+| Industrial HMI | `100%` | `--ly-space-2` (0.5rem) | `11rem` | `7rem` | `32rem` | Narrow persistent nav + dominant process canvas + large controls rail |
+| Editorial | `108rem` | `--ly-space-6` (2rem) | `16rem` | `10rem` | `18rem` | Split bias `1.65fr / 0.75fr`; default Frame ratio `4 / 5`; publication-first composition |
+
+## Purpose, Responsive Intent, and Pairing
+
+Narrow layouts preserve semantic DOM order as a single stack. Medium layouts use the shared recipe thresholds. Wide behavior below describes each personality's defining enhancement. “Canonical” means Mosaic is a primary expression of the personality; “useful” means it is supported but optional.
+
+| Layout | Purpose and canonical spatial model | Wide intent | Recommended UI | Compatible UI | Mosaic | Action Bar |
+| --- | --- | --- | --- | --- | --- | --- |
+| Minimal SaaS | Content-first application shell with conservative whitespace | Shared rail/content/aside topology | `minimal-saas` | `organic-modern` | Optional | Useful for forms |
+| Bento | Heterogeneous modular tile dashboard | Shared shell with compact intrinsic tile grids | `bento` | None listed | Canonical | Useful |
+| Maximalist | Maximum content density rather than maximum whitespace | Shared shell with dense card and gallery tracks | `maximalist` | None listed | Useful | Common |
+| Bauhaus | Low-gap geometric asymmetry | Shared shell; media-biased Split | `bauhaus` | `art-deco` | Canonical | Useful |
+| Tactile | Broad task workspace with physical grouping | Shared shell; secondary-biased List Detail | `tactile` | `clay` | Optional | Common |
+| Neumorphism | Bounded configuration and readiness workspace | Shared shell; primary-biased List Detail | `neumorphism` | None listed | Optional | Common |
+| Retrofuturism | Dual-rail workstation | Persistent navigation and settings rails | `retrofuturism` | None listed | Useful | Common |
+| Brutalism | Near-zero-gap operational control grid | Shared area-aware shell at full width | `brutalism` | None listed | Canonical | Common |
+| Cyberpunk | Broad operational shell with compact navigation and substantial settings rail | Preserved asymmetric operational topology | `cyberpunk` | None listed | Useful | Common |
+| Y2K | Dense portal with persistent dual rails | Global header/footer around sidebar, main, and aside | `y2k` | None listed | Useful | Common |
+| Retro Glass | Desktop workbench with global chrome and dual rails | Global header/footer around sidebar, main, and aside | `retro-glass` | None listed | Useful | Common |
+| F-pattern | Strong top-left and primary-content reading priority | Content-biased Split Hero | Any visual preset | None listed | Optional | Useful |
+| Z-pattern | Deliberate diagonal attention path | Strong directional Split Hero weighting | Any visual preset | None listed | Optional | Useful |
+| Split Screen | Equal-priority dual workspaces | Equal halves across shell, hero, and detail | Any visual preset | None listed | Optional | Common |
+| Mondrian | Asymmetric modular blocks | Preserved asymmetric wide composition | Any visual preset | None listed | Useful | Useful |
+| Synthwave | Neon workstation geometry independent of paint | Preserved three-zone shell and broad Reel items | `cyberpunk`, `retrofuturism` | None listed | Useful | Common |
+| Technical Blueprint | Engineering sheet and canvas workspace | Dominant technical canvas with supporting inspector | `technical-blueprint` | None listed | Canonical | Common |
+| Data Terminal | Horizontal telemetry and command bands | Dense full-width data composition | `data-terminal` | `neo-noir` | Useful | Common |
+| Industrial HMI | Supervisory process canvas with instrument rail | Narrow persistent navigation and large controls aside | `industrial-utility` | None listed | Useful | Common |
+| Editorial | Publication composition with readable text and dominant media | Asymmetric editorial Split and portrait Frame | `editorial-luxe`, `paper-editorial` | None listed | Optional | Useful |
+
+## Area-Aware Shells
+
+Automatic App Shell enhancement removes an absent sidebar or aside instead of reserving an empty track. Technical Blueprint, Data Terminal, Editorial, Neumorphism, and Brutalism use this shared behavior when a reference omits a side region. Y2K and Retro Glass keep global header/footer rows with both rails when all areas are present. `data-ly-responsive="manual"` remains a stacked, application-owned fallback.
+
+## Pairing Is Advisory
+
+`layout-style-css/personalities.json` is the machine-readable source for `recommendedVisualPresets` and `compatibleVisualPresets`. Layout selection never changes `data-ui`, `data-theme`, or `data-mode`. UI-only presets such as `clay`, `neo-noir`, `art-deco`, `organic-modern`, `industrial-utility`, `editorial-luxe`, and `paper-editorial` are not layout personality IDs.

package/docs/wiki/Layout-Primitives.md

@@ -13,6 +13,7 @@ Wrappers are optional local responsive scopes:
 - `.ly-wrapper--compact`
 - `.ly-wrapper--prose`
 - `.ly-wrapper--content`
+- `.ly-wrapper--workspace`
 - `.ly-wrapper--wide`
 - `.ly-wrapper--full`
 - `.ly-wrapper--breakout`
@@ -21,6 +22,8 @@ Breakout children select clamped lanes with `data-ly-lane="content"`, `data-ly-l
 
 `--ly-page-padding-inline` supplies the default `--ly-wrapper-gutter` value. `--ly-wrapper-gutter` controls rendered Wrapper padding at the scope where it is overridden, while the Wrapper applies safe-area compensation once at its outer edge.
 
+Use content for conventional page content and workspace for task-oriented application layouts that need the `96rem` measure.
+
 ## Flow
 
 - `.ly-stack` creates vertical flow.
@@ -33,21 +36,27 @@ Breakout children select clamped lanes with `data-ly-lane="content"`, `data-ly-l
 - `.ly-switcher` wraps when its intrinsic threshold is no longer feasible.
 - `.ly-sidebar` keeps a preferred rail while the content can meet its minimum.
 - `.ly-grid` uses auto-fit tracks and `--ly-grid-min`.
+- `.ly-mosaic` uses one column by default, six columns at `42rem`, and twelve columns at `72rem`; span and row-span utilities activate only at supported tiers.
 - `.ly-split` creates balanced intrinsic regions.
 - `.ly-panes` creates a preferred workspace rail and flexible pane.
 - `.ly-media` wraps media and content without a viewport breakpoint.
+- `.ly-action-bar` wraps start/end workflow groups in DOM order; `.ly-action-bar--sticky` uses height-aware sticky behavior and safe-area padding.
 
 ## Frame And Overflow
 
 - `.ly-frame` keeps a configurable aspect ratio.
 - `.ly-reel` is the deliberate horizontal-flow primitive.
-- `.ly-scroll` is the deliberate bounded vertical-scroll primitive.
+- `.ly-scroll` owns horizontal and vertical overflow without imposing a height cap.
+- `.ly-scroll--bounded` applies the stable `--ly-scroll-max` cap.
+- `.ly-scroll--viewport` applies the height-aware `--ly-scroll-viewport-max` cap.
+
+In normal use, only `.ly-reel` and `.ly-scroll` introduce intentional horizontal scrolling, and only `.ly-scroll` and its modifiers introduce intentional vertical scrolling. Other wrappers, primitives, and recipes clamp to their available inline size.
 
-In normal use, only `.ly-reel` introduces intentional horizontal scrolling, and only `.ly-scroll` introduces intentional vertical scrolling. Other wrappers, primitives, and recipes clamp to their available inline size.
+Mosaic never uses `grid-auto-flow: dense`; visual spans do not change reading or focus order. Action Bar groups also wrap without visual reordering.
 
 ## Height Behavior
 
-Page, cover, and bounded scroll behaviors use `vh` fallbacks followed by dynamic viewport units such as `100dvh`.
+Page, cover, and viewport-relative Scroll behaviors use `vh` fallbacks followed by dynamic viewport units such as `100dvh`. Bounded Scroll remains application-controlled across viewport tiers.
 
 At `44rem` viewport height or less, gaps and scroll maxima tighten. At `30rem` or less, forced cover/shell minimums and recipe-owned sticky positioning are removed. Required regions remain in normal document flow.
 
@@ -64,3 +73,7 @@ Advanced consumers can override stable custom properties for:
 - shell, cover, and bounded-scroll sizing
 
 These tokens tune behavior without creating a second breakpoint system.
+
+## Local Gap Utilities
+
+`.ly-gap-0` through `.ly-gap-9` set `gap` only on the element carrying the class. Nested primitives keep their own default gaps. For an intentionally inherited spacing context, set `--ly-gap`, `--ly-grid-gap`, `--ly-stack-gap`, or `--ly-cluster-gap` on the shared ancestor instead.

package/docs/wiki/Layout-Recipes.md

@@ -16,7 +16,9 @@ Recipes are attribute-only semantic layouts. The mobile DOM order is authoritati
 
 Recipe roots also establish `ly-scope`, so child compositions can respond without extra setup.
 
-App Shell base, medium, and wide topologies own matching row definitions. Header and footer tracks remain intrinsic while the main workspace receives the flexible row, including personality-specific four-row topologies.
+`manifest.json` publishes the same ownership under `thresholds.recipes`, in addition to the generic `containerMinWidths` and `viewportMaxHeights` arrays. The release gate checks those mappings against authored queries and verifies public-token liveness.
+
+App Shell base, medium, and wide topologies own matching row definitions. Automatic enhancement is area-aware: a missing direct-child sidebar, aside, or both removes the corresponding empty track. Full-area personality shells keep their approved topology, and manual responsiveness remains stacked. Header and footer tracks remain intrinsic while the guarded main workspace consumes `--ly-recipe-main-min: 20rem`.
 
 ## Areas
 

package/docs/wiki/Layout-Styles.md

@@ -1,8 +1,8 @@
 # Layout Styles
 
-The sixteen `data-ly-layout` values are focused token and topology profiles:
+The twenty `data-ly-layout` values are focused token and topology profiles:
 
-`minimal-saas`, `bauhaus`, `tactile`, `cyberpunk`, `f-pattern`, `brutalism`, `neumorphism`, `y2k`, `retro-glass`, `z-pattern`, `retrofuturism`, `mondrian`, `synthwave`, `bento`, `maximalist`, and `split-screen`.
+`minimal-saas`, `bento`, `maximalist`, `bauhaus`, `tactile`, `neumorphism`, `retrofuturism`, `brutalism`, `cyberpunk`, `y2k`, `retro-glass`, `f-pattern`, `z-pattern`, `split-screen`, `mondrian`, `synthwave`, `technical-blueprint`, `data-terminal`, `industrial-hmi`, and `editorial`.
 
 ```html
 <body class="ly-root" data-ly-layout="bento">
@@ -23,7 +23,11 @@ Every profile feeds the same wrapper, primitive, and recipe engine. Profiles tun
 
 A profile must remain visibly distinct through at least two spatial characteristics. Personality files may not declare their own `@container`, viewport, or orientation breakpoint systems.
 
-When a profile supplies an App Shell area template, its matching row definition must contain the same number of rows and keep the main workspace on the flexible track.
+When a profile supplies an App Shell area template, its matching row definition must contain the same number of rows and keep the main workspace on the flexible track. Other profiles inherit the shared area-aware App Shell, which removes absent direct-child side tracks without changing DOM order.
+
+## Density Contexts
+
+Normal density is the zero-configuration default. `data-ly-density="compact"`, `data-ly-density="normal"`, and `data-ly-density="spacious"` override personality spacing at the root or on a nested layout subtree. A nested density context intentionally resets inherited gap and section tokens while leaving the selected personality unchanged.
 
 ## Ownership
 
@@ -33,26 +37,9 @@ The personality name does not promise colors, typography, borders, shadows, or i
 
 ## Visual Pairing Guidance
 
-[`layout-style-css/personalities.json`](../../personalities.json) is the public, machine-readable pairing source used by the demo. Its entries are recommendations, never dependencies: `data-ly-layout`, `data-ui`, `data-theme`, and `data-mode` are independently selectable on the same document.
-
-| Layout personality | Visual pairing guidance |
-| --- | --- |
-| Minimal SaaS | Native match: `minimal-saas` |
-| Bento | Native match: `bento` |
-| Maximalist | Native match: `maximalist` |
-| Bauhaus | Native match: `bauhaus` |
-| Tactile | Native match: `tactile` |
-| Neumorphism | Native match: `neumorphism` |
-| Retrofuturism | Native match: `retrofuturism` |
-| Brutalism | Native match: `brutalism` |
-| Cyberpunk | Native match: `cyberpunk` |
-| Y2K | Native match: `y2k` |
-| Retro Glass | Native match: `retro-glass` |
-| F-pattern | Any visual preset; this is structure only |
-| Z-pattern | Any visual preset; this is structure only |
-| Split Screen | Any visual preset; this is structure only |
-| Mondrian | Any visual preset; this is structure only |
-| Synthwave | Recommended: `cyberpunk` or `retrofuturism`; the browser contract verifies each preset's distinct rendered article shadow while retaining `data-ly-layout="synthwave"` |
+[`layout-style-css/personalities.json`](../../personalities.json) is the public, machine-readable pairing source used by the demo. Its recommended and compatible arrays are guidance, never dependencies: `data-ly-layout`, `data-ly-density`, `data-ui`, `data-theme`, and `data-mode` are independently selectable on the same document.
+
+See the [Layout Personality Reference](Layout-Personality-Reference.md) for the canonical 20-profile geometry, responsive intent, Mosaic role, and full pairing matrix.
 
 ## Customization