layout-style-css 3.1.0 → 3.2.0

package/dist/recipes.css

@@ -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

@@ -14,7 +14,10 @@
   .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 { gap: var(--ly-space-0); }
   .ly-gap-1 { gap: var(--ly-space-1); }

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.1.0` and import the root bundle:
+Install `layout-style-css@3.2.0` and import the root bundle:
 
 ```bash
-npm install layout-style-css@3.1.0
+npm install layout-style-css@3.2.0
 ```
 
 ```js
@@ -64,5 +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,6 +1,6 @@
 # Layout Style CSS v3
 
-`layout-style-css@3.1.0` 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
 
@@ -9,7 +9,8 @@
 - 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.
 
@@ -22,8 +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.1.0
+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.1.0/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.1.0/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.

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

@@ -36,19 +36,23 @@ Use content for conventional page content and workspace for task-oriented applic
 - `.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` owns vertical overflow without imposing a height cap.
+- `.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` introduces 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` 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.
+
+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
 

package/docs/wiki/Layout-Recipes.md

@@ -18,7 +18,7 @@ Recipe roots also establish `ly-scope`, so child compositions can respond withou
 
 `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. Header and footer tracks remain intrinsic while the main workspace receives the flexible row, including personality-specific four-row topologies.
+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,7 @@ 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
 
@@ -37,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-ly-density`, `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
 

package/docs/wiki/Migrating-To-3.2.md

@@ -0,0 +1,70 @@
+# Migrating To 3.2
+
+Layout Style CSS 3.2 is additive: existing v3 selectors, package exports, semantic areas, automatic recipe thresholds, and manual-responsive behavior are retained. The release expands composition APIs, makes automatic content tracks more resilient, and grows the layout personality inventory from sixteen to twenty.
+
+## Mosaic
+
+Use `.ly-mosaic` for deliberate heterogeneous tile geometry. It starts as one column, becomes six columns at `42rem`, and becomes twelve columns at `72rem`, based on the nearest `ly-scope` container.
+
+```html
+<section class="ly-mosaic">
+  <article class="ly-span-6 ly-row-span-2">Primary canvas</article>
+  <article class="ly-span-4">Signal health</article>
+  <article class="ly-span-full">System status</article>
+</section>
+```
+
+Span utilities collapse below their supported tier, and Mosaic never uses dense auto-placement. DOM, reading, keyboard, and focus order remain authoritative. Set `data-ly-responsive="manual"` on the Mosaic when application CSS owns its columns.
+
+## Action Bar
+
+Use `.ly-action-bar` with `data-ly-actions="start"` and `data-ly-actions="end"` groups for workflow controls. The groups wrap in DOM order; the end group moves to the logical edge when space allows.
+
+```html
+<div class="ly-action-bar ly-action-bar--sticky">
+  <div data-ly-actions="start"><button>Save draft</button></div>
+  <div data-ly-actions="end"><button>Publish</button></div>
+</div>
+```
+
+The sticky modifier uses `--ly-sticky-position`, honors the block-end safe area, and becomes normal flow in the shallow-height tier so required actions remain reachable.
+
+## Area-Aware App Shell
+
+The automatic, feature-detected area-aware App Shell no longer reserves empty columns when the direct-child sidebar, aside, or both are absent. Full five-area shells retain their personality-approved topology. Browsers without the required selector support keep the safe shared layout, and `data-ly-responsive="manual"` remains application-owned.
+
+## Content Resilience
+
+- `--ly-recipe-main-min: 20rem` now guards automatic App Shell, Dashboard, and Docs primary tracks.
+- Both List Detail tracks retain the `--ly-pane-min` floor.
+- Both Split Hero tracks retain the `--ly-split-min` floor.
+- `.ly-scroll` now exposes horizontal as well as vertical overflow with reachable scrollbars instead of clipping legitimate wide content.
+- Long labels, paragraphs, URLs, tables, code, and diagram-like content remain reachable rather than being hidden to preserve a desktop composition.
+
+UI Style Kit 2.4 companion fixtures should allow their content boxes to shrink and wrap while leaving deliberate wide tables, code, or technical canvases inside `.ly-scroll`. Do not apply generic `overflow: hidden` to a required structural region.
+
+## New Personality IDs
+
+- `technical-blueprint`: full-width engineering canvas with a `2.2fr / 0.8fr` Split bias.
+- `data-terminal`: dense full-width data composition with `10rem` grid, card, and gallery minima.
+- `industrial-hmi`: full-width supervisory shell with a `7rem` rail and `32rem` aside.
+- `editorial`: `108rem` publication composition with a `1.65fr / 0.75fr` Split and `4 / 5` Frame.
+
+See [Layout Personality Reference](Layout-Personality-Reference.md) for the canonical twenty-profile geometry and visual-preset pairings.
+
+## Existing Geometry Changes
+
+- Bento removes its old four-track App Shell and remains a canonical Mosaic profile.
+- Maximalist reduces its profile gap to `--ly-space-3` while preserving dense card and gallery minima.
+- Bauhaus reduces its gap to `--ly-space-2`, removes its old shell, and adds a `0.7fr / 1.3fr` Split bias.
+- Tactile moves to the `96rem` workspace measure and removes its old sidebar/aside stacking topology.
+- Neumorphism removes its persistent-right-sidebar topology and increases its aside preference to `22rem`.
+- Brutalism becomes full width, uses `--ly-space-1`, and removes its persistent-right-sidebar topology.
+- Y2K becomes full width with a global header/footer and persistent dual rails.
+- Retro Glass becomes full width with a global header/footer and dual-rail desktop workbench.
+
+Retrofuturism, Cyberpunk, Split Screen, Mondrian, Synthwave, and the other profiles not listed above preserve their approved topology and defining recipe biases.
+
+## Pairing Metadata
+
+Every entry in `layout-style-css/personalities.json` now has both `recommendedVisualPresets` and additive `compatibleVisualPresets` arrays. These values are guidance only: changing `data-ly-layout` never changes the independently selected `data-ui`, `data-theme`, `data-mode`, or density.

package/docs/wiki/Release-And-Publishing.md

@@ -1,6 +1,6 @@
 # Release And Publishing
 
-This guide describes the release gate for `layout-style-css@3.1.0`. Running verification does not publish, tag, push, create a GitHub Release, or change the npm registry.
+This guide describes the release gate for `layout-style-css@3.2.0`. Running verification does not publish, tag, push, create a GitHub Release, or change the npm registry.
 
 ## Local Candidate Gate
 
@@ -23,20 +23,20 @@ The package's `prepublishOnly` script runs `npm run release:verify`, so a direct
 
 The immutable cross-repository pins require this exact remote sequence:
 
-1. Push a stable UI bootstrap ref containing `a44dd41bf3611aba0a20bddfd00eb37938ca884f`.
+1. Use the published UI Style Kit 2.4.0 fixture ref containing `835aa4474c49b7b766d3f5a923f023725bc14331`.
 2. Push and merge Interactive Surface CSS and Layout Style CSS with merge commits so their reviewed commit SHAs remain reachable.
 3. Update and verify the final UI companion pins against those merged companion commits.
 4. Push the final UI branch, rerun its ecosystem preflight, and merge UI with a merge commit.
 5. Do not squash, rebase, or delete the only remote refs until every pinned commit is reachable through merged ancestry.
 
-The bootstrap SHA is deliberately stable: companion workflows use it to load the reviewed preflight implementation before the final UI commit can reference the companion heads.
+The UI fixture SHA is deliberately stable: companion workflows use it to load the reviewed preflight implementation and final 2.4.0 package contract before Layout Style CSS is published.
 
 ## Candidate Inspection
 
 Confirm:
 
-- package version is `3.1.0`
-- intended tag would be `v3.1.0`
+- package version is `3.2.0`
+- intended tag would be `v3.2.0`
 - runtime and peer dependencies are empty
 - exact exports and tarball files match the v3 contract
 - generated CSS matches authored sources
@@ -50,7 +50,7 @@ Only after explicit approval:
 1. Commit the verified candidate.
 2. Push the intended branch.
 3. Merge through the repository's normal review policy.
-4. Create the exact `v3.1.0` tag from the protected release commit.
+4. Create the exact `v3.2.0` tag from the protected release commit.
 5. Publish the GitHub Release.
 6. Let the protected npm workflow verify the tag and publish with provenance.
 7. Confirm the GitHub Release, tag, and npm registry state independently.

package/docs/wiki/UI-Style-Kit-Compatibility.md

@@ -35,6 +35,12 @@ Put canonical structural hooks in markup:
 
 The `ly-*` hooks control structure. Companion classes and data attributes can paint or animate the same elements without taking over layout.
 
+## Pairing Guidance
+
+`layout-style-css/personalities.json` publishes independent `recommendedVisualPresets` and `compatibleVisualPresets` arrays. The Layout Lab displays both for the selected personality but never changes the user's `data-ui` selection. See [Layout Personality Reference](Layout-Personality-Reference.md) for the complete matrix.
+
+For UI Style Kit 2.4 content, allow long labels and paragraphs to wrap and keep required structural regions shrink-safe. Put legitimately wide tables, code, or technical canvases inside `.ly-scroll`; do not conceal them with generic clipping.
+
 ## v3 Boundary
 
 The deprecated v2 UI-prefixed structural bridge is not shipped. Migrate bridge aliases to canonical Layout hooks; do not copy the bridge into application CSS. See [Migrating To 3.0](Migrating-To-3.0.md).

package/docs/wiki/_Sidebar.md

@@ -4,9 +4,11 @@
 - [Layout Primitives](Layout-Primitives)
 - [Layout Recipes](Layout-Recipes)
 - [Layout Styles](Layout-Styles)
+- [Layout Personality Reference](Layout-Personality-Reference)
 - [Companion Compatibility](UI-Style-Kit-Compatibility)
 - [Migrating To 3.0](Migrating-To-3.0)
 - [Migrating To 3.1](Migrating-To-3.1)
+- [Migrating To 3.2](Migrating-To-3.2)
 - [Demo And GitHub Pages](Demo-And-GitHub-Pages)
 - [Release And Publishing](Release-And-Publishing)
 - [Security And Support](Security-And-Support)

package/manifest.json

@@ -5,7 +5,7 @@
     "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
   },
   "name": "layout-style-css",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "entrypoints": {
     "default": "./dist/layout-style-css.css",
     "minified": "./dist/layout-style-css.min.css",
@@ -24,41 +24,46 @@
     "deprecated": []
   },
   "wrappers": ["compact", "prose", "content", "workspace", "wide", "full", "breakout"],
-  "primitives": ["page", "header", "footer", "main", "section", "surface", "readable", "stack", "cluster", "center", "cover", "switcher", "sidebar", "grid", "split", "panes", "media", "reel", "frame", "scroll"],
+  "primitives": ["page", "header", "footer", "main", "section", "surface", "readable", "stack", "cluster", "center", "cover", "switcher", "sidebar", "grid", "mosaic", "action-bar", "split", "panes", "media", "reel", "frame", "scroll"],
   "recipes": ["app-shell", "dashboard", "docs", "list-detail", "split-hero", "gallery", "card-grid"],
   "areas": ["header", "nav", "sidebar", "main", "aside", "footer", "content", "media", "actions", "primary", "secondary"],
-  "personalities": ["minimal-saas", "bento", "maximalist", "bauhaus", "tactile", "neumorphism", "retrofuturism", "brutalism", "cyberpunk", "y2k", "retro-glass", "f-pattern", "z-pattern", "split-screen", "mondrian", "synthwave"],
+  "personalities": ["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", "editorial"],
   "personalityPairings": [
-    { "id": "minimal-saas", "label": "Minimal SaaS", "visualCompatibility": "native", "recommendedVisualPresets": ["minimal-saas"] },
-    { "id": "bento", "label": "Bento", "visualCompatibility": "native", "recommendedVisualPresets": ["bento"] },
-    { "id": "maximalist", "label": "Maximalist", "visualCompatibility": "native", "recommendedVisualPresets": ["maximalist"] },
-    { "id": "bauhaus", "label": "Bauhaus", "visualCompatibility": "native", "recommendedVisualPresets": ["bauhaus"] },
-    { "id": "tactile", "label": "Tactile", "visualCompatibility": "native", "recommendedVisualPresets": ["tactile"] },
-    { "id": "neumorphism", "label": "Neumorphism", "visualCompatibility": "native", "recommendedVisualPresets": ["neumorphism"] },
-    { "id": "retrofuturism", "label": "Retrofuturism", "visualCompatibility": "native", "recommendedVisualPresets": ["retrofuturism"] },
-    { "id": "brutalism", "label": "Brutalism", "visualCompatibility": "native", "recommendedVisualPresets": ["brutalism"] },
-    { "id": "cyberpunk", "label": "Cyberpunk", "visualCompatibility": "native", "recommendedVisualPresets": ["cyberpunk"] },
-    { "id": "y2k", "label": "Y2K", "visualCompatibility": "native", "recommendedVisualPresets": ["y2k"] },
-    { "id": "retro-glass", "label": "Retro Glass", "visualCompatibility": "native", "recommendedVisualPresets": ["retro-glass"] },
-    { "id": "f-pattern", "label": "F-pattern", "visualCompatibility": "any", "recommendedVisualPresets": [] },
-    { "id": "z-pattern", "label": "Z-pattern", "visualCompatibility": "any", "recommendedVisualPresets": [] },
-    { "id": "split-screen", "label": "Split Screen", "visualCompatibility": "any", "recommendedVisualPresets": [] },
-    { "id": "mondrian", "label": "Mondrian", "visualCompatibility": "any", "recommendedVisualPresets": [] },
+    { "id": "minimal-saas", "label": "Minimal SaaS", "visualCompatibility": "native", "recommendedVisualPresets": ["minimal-saas"], "compatibleVisualPresets": ["organic-modern"] },
+    { "id": "bento", "label": "Bento", "visualCompatibility": "native", "recommendedVisualPresets": ["bento"], "compatibleVisualPresets": [] },
+    { "id": "maximalist", "label": "Maximalist", "visualCompatibility": "native", "recommendedVisualPresets": ["maximalist"], "compatibleVisualPresets": [] },
+    { "id": "bauhaus", "label": "Bauhaus", "visualCompatibility": "native", "recommendedVisualPresets": ["bauhaus"], "compatibleVisualPresets": ["art-deco"] },
+    { "id": "tactile", "label": "Tactile", "visualCompatibility": "native", "recommendedVisualPresets": ["tactile"], "compatibleVisualPresets": ["clay"] },
+    { "id": "neumorphism", "label": "Neumorphism", "visualCompatibility": "native", "recommendedVisualPresets": ["neumorphism"], "compatibleVisualPresets": [] },
+    { "id": "retrofuturism", "label": "Retrofuturism", "visualCompatibility": "native", "recommendedVisualPresets": ["retrofuturism"], "compatibleVisualPresets": [] },
+    { "id": "brutalism", "label": "Brutalism", "visualCompatibility": "native", "recommendedVisualPresets": ["brutalism"], "compatibleVisualPresets": [] },
+    { "id": "cyberpunk", "label": "Cyberpunk", "visualCompatibility": "native", "recommendedVisualPresets": ["cyberpunk"], "compatibleVisualPresets": [] },
+    { "id": "y2k", "label": "Y2K", "visualCompatibility": "native", "recommendedVisualPresets": ["y2k"], "compatibleVisualPresets": [] },
+    { "id": "retro-glass", "label": "Retro Glass", "visualCompatibility": "native", "recommendedVisualPresets": ["retro-glass"], "compatibleVisualPresets": [] },
+    { "id": "f-pattern", "label": "F-pattern", "visualCompatibility": "any", "recommendedVisualPresets": [], "compatibleVisualPresets": [] },
+    { "id": "z-pattern", "label": "Z-pattern", "visualCompatibility": "any", "recommendedVisualPresets": [], "compatibleVisualPresets": [] },
+    { "id": "split-screen", "label": "Split Screen", "visualCompatibility": "any", "recommendedVisualPresets": [], "compatibleVisualPresets": [] },
+    { "id": "mondrian", "label": "Mondrian", "visualCompatibility": "any", "recommendedVisualPresets": [], "compatibleVisualPresets": [] },
     {
       "id": "synthwave",
       "label": "Synthwave",
       "visualCompatibility": "recommended",
       "recommendedVisualPresets": ["cyberpunk", "retrofuturism"],
+      "compatibleVisualPresets": [],
       "visualVerification": {
         "method": "rendered-computed-style",
         "test": "test/demo-smoke.test.mjs",
         "computedProperties": {
-          "cyberpunk": { "boxShadow": "0px 0px 18px" },
-          "retrofuturism": { "boxShadow": "0px 10px 30px" }
+          "cyberpunk": { "boxShadow": "0px 0px 12px" },
+          "retrofuturism": { "boxShadow": "0px 2.88px 6.72px" }
         },
         "assertion": "A visible browser contract fixture renders each preset's distinct article box-shadow while data-ly-layout remains synthwave."
       }
-    }
+    },
+    { "id": "technical-blueprint", "label": "Technical Blueprint", "visualCompatibility": "native", "recommendedVisualPresets": ["technical-blueprint"], "compatibleVisualPresets": [] },
+    { "id": "data-terminal", "label": "Data Terminal", "visualCompatibility": "native", "recommendedVisualPresets": ["data-terminal"], "compatibleVisualPresets": ["neo-noir"] },
+    { "id": "industrial-hmi", "label": "Industrial HMI", "visualCompatibility": "recommended", "recommendedVisualPresets": ["industrial-utility"], "compatibleVisualPresets": [] },
+    { "id": "editorial", "label": "Editorial", "visualCompatibility": "recommended", "recommendedVisualPresets": ["editorial-luxe", "paper-editorial"], "compatibleVisualPresets": [] }
   ],
   "containers": {
     "names": ["ly-scope"],
@@ -73,6 +78,9 @@
       "docs": { "wide": "48rem" },
       "appShell": { "medium": "52rem", "wide": "72rem" },
       "dashboard": { "medium": "52rem", "wide": "72rem" }
+    },
+    "compositions": {
+      "mosaic": { "medium": "42rem", "wide": "72rem" }
     }
   },
   "tokens": {
@@ -88,10 +96,12 @@
       "--ly-sticky-position", "--ly-cover-min",
       "--ly-shell-min", "--ly-scroll-max", "--ly-scroll-viewport-max", "--ly-switcher-threshold",
       "--ly-sidebar-size",
-      "--ly-sidebar-content-min", "--ly-grid-columns", "--ly-grid-min", "--ly-split-min",
+      "--ly-sidebar-content-min", "--ly-grid-columns", "--ly-grid-min", "--ly-mosaic-medium-columns",
+      "--ly-mosaic-wide-columns", "--ly-split-min",
       "--ly-pane-min", "--ly-pane-size", "--ly-media-min", "--ly-media-size", "--ly-reel-item-min",
       "--ly-reel-item-max", "--ly-frame-ratio", "--ly-split-primary", "--ly-split-secondary",
-      "--ly-recipe-rail", "--ly-recipe-aside", "--ly-gallery-min", "--ly-card-grid-min",
+      "--ly-recipe-main-min", "--ly-recipe-rail", "--ly-recipe-aside", "--ly-gallery-min",
+      "--ly-card-grid-min",
       "--ly-app-shell-medium-areas", "--ly-app-shell-medium-columns", "--ly-app-shell-wide-areas",
       "--ly-app-shell-wide-columns", "--ly-dashboard-medium-areas", "--ly-dashboard-medium-columns",
       "--ly-dashboard-wide-areas", "--ly-dashboard-wide-columns", "--ly-docs-wide-areas",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "layout-style-css",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Dependency-free structural CSS for responsive wrappers, composition primitives, recipes, utilities, and layout personalities.",
   "type": "module",
   "license": "MIT",
@@ -59,10 +59,10 @@
     "css-tree": "3.2.1",
     "interactive-surface-css": "1.5.0",
     "stylelint": "17.14.0",
-    "ui-style-kit-css": "2.1.0"
+    "ui-style-kit-css": "2.4.0"
   },
   "overrides": {
-    "fast-uri": "3.1.5",
+    "fast-uri": "3.1.7",
     "js-yaml": "4.3.1",
     "nanoid": "3.3.18",
     "postcss": "8.5.23"