layout-style-css 1.0.0 → 1.1.2

package/dist/layout-style-z-pattern.css

@@ -0,0 +1,76 @@
+/*
+  Layout style: z-pattern.
+  Header-first scan path that moves from broad lead content to a right-side
+  support rail. Visual identity remains owned by ui-style-kit-css.
+*/
+
+@layer ly.styles.z_pattern {
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) {
+    --ly-container-max: 100rem;
+    --ly-page-padding-inline: clamp(1rem, 3.4vw, 3rem);
+    --ly-section-padding-block: clamp(2rem, 5.5vw, 5rem);
+    --ly-sidebar-width: clamp(14rem, 20vw, 21rem);
+    --ly-grid-min: 15rem;
+    --ly-gap: clamp(1rem, 2.4vw, 2rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(0.875rem, 1.9vw, 1.5rem);
+  }
+
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-app-main {
+    padding-block: clamp(1rem, 2.6vw, 2.5rem);
+  }
+
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-container,
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-wrapper {
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-grid--auto {
+    grid-auto-rows: minmax(8rem, auto);
+  }
+
+  @media (min-width: 48rem) {
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-app-shell {
+      grid-template-areas:
+        "header header"
+        "main sidebar";
+      grid-template-columns: minmax(0, 1.18fr) minmax(min(100%, 15rem), 0.42fr);
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-app-sidebar {
+      display: block;
+      position: sticky;
+      top: var(--ly-space-4);
+      height: calc(100svh - (var(--ly-space-4) * 2));
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-grid--auto > :nth-child(4n + 2) {
+      grid-column: span 2;
+      min-height: 12rem;
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-sidebar-layout {
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 15rem), 0.36fr);
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-split {
+      grid-template-columns: minmax(0, 0.92fr) minmax(min(100%, 19rem), 1.08fr);
+      align-items: end;
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-panes--two {
+      grid-template-columns: minmax(0, 1.25fr) minmax(min(100%, 17rem), 0.75fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-panes--three {
+      grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 15rem), 0.55fr) minmax(min(100%, 14rem), 0.35fr);
+    }
+  }
+}

package/dist/layout-ui-style-kit-bridge.css

@@ -7,6 +7,16 @@
 @layer ly.bridge {
   :where(.ly-root[data-ui][data-theme][data-mode], [data-ui][data-theme][data-mode] .ly-root) {
     --ly-ui-style-kit-bridge: 1;
+
+    /*
+      Normalize UI kit root background geometry without redefining its paint.
+      Patterned theme layers should fill the viewport once instead of tiling.
+    */
+    min-block-size: 100svh;
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
 
   :where(.ly-root[data-ui="minimal-saas"], [data-ui="minimal-saas"] .ly-root) {
@@ -52,4 +62,109 @@
   :where(.ly-root[data-ui="retro-glass"], [data-ui="retro-glass"] .ly-root) {
     --ly-ui-style-kit-bridge-style: retro-glass;
   }
+
+  :where(.saas-container, .bento-container, .max-container, .bau-container, .tactile-container, .neo-container, .retro-container, .brutal-container, .cyber-container, .y2k-container, .rg-container) {
+    /* UI Style Kit naming can opt into layout sizing without taking over visual paint. */
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+    margin-inline: auto;
+  }
+
+  :where(.saas-section, .bento-section, .max-section, .bau-section, .tactile-section, .neo-section, .retro-section, .brutal-section, .cyber-section, .y2k-section, .rg-section) {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.saas-stack, .bento-stack, .max-stack, .bau-stack, .tactile-stack, .neo-stack, .retro-stack, .brutal-stack, .cyber-stack, .y2k-stack, .rg-stack) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ly-stack-gap);
+  }
+
+  :where(.saas-cluster, .bento-cluster, .max-cluster, .bau-cluster, .tactile-cluster, .neo-cluster, .retro-cluster, .brutal-cluster, .cyber-cluster, .y2k-cluster, .rg-cluster) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+  }
+
+  :where(.saas-grid, .bento-grid, .max-grid, .bau-grid, .tactile-grid, .neo-grid, .retro-grid, .brutal-grid, .cyber-grid, .y2k-grid, .rg-grid) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--ly-gap);
+    align-items: var(--ly-split-align, center);
+  }
+
+  :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) > * {
+    min-width: 0;
+  }
+
+  :where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+  }
+
+  :where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) > * {
+    flex: 0 1 auto;
+    min-width: min(100%, var(--ly-button-min, 8rem));
+  }
+
+  :where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  :where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) > * {
+    min-width: 0;
+  }
+
+  :where(.saas-card-sm, .bento-card-sm, .max-card-sm, .bau-card-sm, .tactile-card-sm, .neo-card-sm, .retro-card-sm, .brutal-card-sm, .cyber-card-sm, .y2k-card-sm, .rg-card-sm) {
+    min-block-size: var(--ly-card-size-sm);
+  }
+
+  :where(.saas-card-md, .bento-card-md, .max-card-md, .bau-card-md, .tactile-card-md, .neo-card-md, .retro-card-md, .brutal-card-md, .cyber-card-md, .y2k-card-md, .rg-card-md) {
+    min-block-size: var(--ly-card-size-md);
+  }
+
+  :where(.saas-card-lg, .bento-card-lg, .max-card-lg, .bau-card-lg, .tactile-card-lg, .neo-card-lg, .retro-card-lg, .brutal-card-lg, .cyber-card-lg, .y2k-card-lg, .rg-card-lg) {
+    min-block-size: var(--ly-card-size-lg);
+  }
+
+  :where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  :where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) > * {
+    min-width: 0;
+  }
+
+  :where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-carousel) {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(min(100%, var(--ly-carousel-item-min)), var(--ly-carousel-item-max));
+    gap: var(--ly-grid-gap);
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: x proximity;
+  }
+
+  :where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-carousel) > * {
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+
+  @media (min-width: 48rem) {
+    :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
+      grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
+    }
+  }
 }

package/docs/wiki/Contributing.md

@@ -0,0 +1,30 @@
+# Contributing
+
+Contribution work should preserve the package boundary: `layout-style-css` owns structure, `ui-style-kit-css` owns visual styling.
+
+## Workflow
+
+```bash
+npm install
+npm run build
+npm run lint
+npm test
+```
+
+Use `npm run release:verify` before release-facing changes are merged.
+
+## CSS Guidelines
+
+- Keep source CSS in `styles/`.
+- Regenerate dist files with `npm run build`.
+- Prefix public layout classes with `ly-`.
+- Prefer layout variables and recipes before introducing new public classes.
+- Keep new grid tracks mobile-safe with `minmax(0, 1fr)` or guarded fixed floors.
+- Do not add colors, shadows, borders, typography, focus styling, or native control styling.
+
+## Documentation Guidelines
+
+Update README and wiki pages whenever a public export, selector, layout recipe, package file, release command, or deployment behavior changes.
+
+Update `CHANGELOG.md` for every release-facing change.
+

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

@@ -0,0 +1,39 @@
+# Demo And GitHub Pages
+
+The demo lives at `demo/index.html` and is packaged with the library. GitHub Pages deployment uses a generated root artifact so Pages can serve `index.html` from the site root.
+
+## Local Demo
+
+Run the demo through the test suite:
+
+```bash
+npm test
+```
+
+The Playwright smoke checks verify responsive behavior across mobile portrait, mobile landscape, tablet, and desktop conditions.
+
+## Pages Artifact
+
+Build the artifact:
+
+```bash
+npm run pages:build
+```
+
+The artifact is written to `output/github-pages/` and contains:
+
+- root `index.html`
+- copied assets and metadata
+- generated `dist/` CSS
+- `.nojekyll`
+
+## Repository Settings
+
+Before deployment, enable GitHub Pages in repository settings and select GitHub Actions as the source.
+
+The workflow verifies the package, builds the Pages artifact, uploads it, and deploys from `main` or `workflow_dispatch`.
+
+## Mobile Header Contract
+
+The demo header should remain compact on mobile. Controls are exposed through the drawer toggle rather than an always-expanded stack of full-width controls.
+

package/docs/wiki/Getting-Started.md

@@ -0,0 +1,68 @@
+# Getting Started
+
+Use `layout-style-css` when an application needs predictable page structure without duplicating a visual design system.
+
+## Install
+
+```bash
+npm install layout-style-css ui-style-kit-css@2.0.1
+```
+
+Optional Interactive Surface pairing:
+
+```bash
+npm install interactive-surface-css@1.2.5
+```
+
+## First Import
+
+Use the layout-only package entry when the app already imports UI styles:
+
+```js
+import "ui-style-kit-css/dist/ui-style-kit.css";
+import "layout-style-css";
+```
+
+Use the aggregate import when the project wants UI Style Kit and all layouts from one package entry:
+
+```js
+import "layout-style-css/all-with-ui-kit.css";
+```
+
+## First Shell
+
+```html
+<body class="ly-root" data-ui="minimal-saas" data-layout="minimal-saas" data-theme="arctic-indigo" data-mode="light">
+  <div class="ly-app-shell">
+    <aside class="ly-app-sidebar ly-pad-6">Navigation</aside>
+    <header class="ly-app-header ly-pad-4">Toolbar</header>
+    <main class="ly-app-main">
+      <section class="ly-wrapper ly-wrapper--wide ly-section ly-stack">
+        <h1>Workspace</h1>
+        <div class="ly-card-grid">
+          <article class="ly-surface ly-card-md ly-pad-6">Metric</article>
+          <article class="ly-surface ly-card-md ly-pad-6">Metric</article>
+          <article class="ly-surface ly-card-md ly-pad-6">Metric</article>
+        </div>
+      </section>
+    </main>
+  </div>
+</body>
+```
+
+## Switch Layout Personality
+
+Layout styles are selected independently from UI styles:
+
+```js
+const root = document.body;
+
+root.dataset.ui = "cyberpunk";
+root.dataset.layout = "synthwave";
+root.setAttribute("layout-style", "synthwave");
+root.dataset.theme = "cyber-lime";
+root.dataset.mode = "dark";
+```
+
+This lets a product test different spatial systems without rewriting the component paint layer.
+

package/docs/wiki/Home.md

@@ -0,0 +1,48 @@
+# Layout Style CSS Wiki
+
+Version 1.1.2 documents the professional library contract for `layout-style-css`: install paths, package exports, layout primitives, recipes, UI Style Kit compatibility, demo deployment, security, and release workflow.
+
+## Start Here
+
+| Page | Purpose |
+| --- | --- |
+| [Getting Started](Getting-Started.md) | First install, first shell, and switching layout personalities. |
+| [Installation And CDN](Installation-And-CDN.md) | npm, bundler, CDN, and export guidance. |
+| [Layout Primitives](Layout-Primitives.md) | Core `ly-*` wrappers, grids, panes, frames, and utilities. |
+| [Layout Recipes](Layout-Recipes.md) | Copyable patterns for common application surfaces. |
+| [Layout Styles](Layout-Styles.md) | All layout personalities and when to use them. |
+| [UI Style Kit Compatibility](UI-Style-Kit-Compatibility.md) | Prefix aliases and ownership boundaries. |
+| [Demo And GitHub Pages](Demo-And-GitHub-Pages.md) | Demo QA and Pages deployment. |
+| [Release And Publishing](Release-And-Publishing.md) | npm v1.1.2 verification and publish checklist. |
+| [Security And Support](Security-And-Support.md) | Security model, supported versions, and reporting path. |
+| [Contributing](Contributing.md) | Contribution workflow and review expectations. |
+
+## Library Positioning
+
+`layout-style-css` is the spatial layer for front-end products. It owns wrappers, spacing, shells, grids, split views, panes, layout recipes, and switchable layout personalities. It does not own paint, typography, component borders, shadows, native controls, focus states, themes, or modes.
+
+The recommended pairing is:
+
+```js
+import "ui-style-kit-css/with-bridge.css";
+import "layout-style-css/all.css";
+```
+
+Use the three-library path only when a project also needs Interactive Surface behavior:
+
+```js
+import "layout-style-css/all-with-ui-kit-and-interactive-surface.css";
+```
+
+## Wiki Source
+
+This `docs/wiki` directory is the versioned source for the GitHub Wiki. Keeping it in the main repository makes docs reviewable with code changes and keeps npm package documentation aligned with the release.
+
+When GitHub Wiki is enabled, mirror these files into the wiki repository:
+
+```bash
+git clone https://github.com/Foscat/Layout-Style-CSS.wiki.git layout-style-css-wiki
+```
+
+Copy the Markdown files from `docs/wiki/`, commit, and push from the wiki clone.
+

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

@@ -0,0 +1,58 @@
+# Installation And CDN
+
+This package ships authored source files, generated dist files, and importable entrypoints for bundlers and CDNs.
+
+## npm
+
+```bash
+npm install layout-style-css ui-style-kit-css@2.0.1
+```
+
+The default entry is the full flattened layout-only CSS:
+
+```js
+import "layout-style-css";
+```
+
+## Entry Points
+
+| Import | Purpose |
+| --- | --- |
+| `layout-style-css` | Full flattened layout-only CSS. |
+| `layout-style-css/min.css` | Minified layout-only CSS. |
+| `layout-style-css/base.css` | Base primitives only. |
+| `layout-style-css/bridge.css` | UI Style Kit naming bridge only. |
+| `layout-style-css/all.css` | Import-based bundle for all layout files. |
+| `layout-style-css/all-with-ui-kit.css` | UI Style Kit plus Layout Style CSS. |
+| `layout-style-css/all-with-ui-kit-and-interactive-surface.css` | UI Style Kit, Interactive Surface, and Layout Style CSS. |
+| `layout-style-css/<layout>.css` | One layout style, such as `layout-style-css/synthwave.css`. |
+| `layout-style-css/dist/*.css` | Direct generated dist files for advanced consumers. |
+
+## CDN
+
+Layout-only:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/layout-style-css@1/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@1/dist/layout-style-css.min.css">
+```
+
+Recommended UI Style Kit pairing:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.0.1/dist/ui-style-kit.with-bridge.min.css">
+<link rel="stylesheet" href="https://unpkg.com/layout-style-css@1/dist/layout-style-css.min.css">
+```
+
+Three-library pairing:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.0.1/dist/ui-style-kit.with-bridge.min.css">
+<link rel="stylesheet" href="https://unpkg.com/layout-style-css@1/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.2.5/dist/interactive-surface.min.css">
+```
+
+## Package Ownership
+
+`styles/` is source. `dist/` is generated by `npm run build`. Consumers should import package entrypoints or dist files, not source files inside `styles/`.
+

package/docs/wiki/Layout-Primitives.md

@@ -0,0 +1,57 @@
+# Layout Primitives
+
+Primitives are the stable `ly-*` classes that make the package useful without committing to one layout personality.
+
+## Root And Page
+
+| Class | Purpose |
+| --- | --- |
+| `.ly-root` | Scope layout variables and box sizing. |
+| `.ly-page` | Full-height page wrapper. |
+| `.ly-header`, `.ly-footer`, `.ly-main` | Basic document regions. |
+
+## Wrappers
+
+Use `.ly-wrapper` for new markup. `.ly-container` remains supported for compatibility.
+
+| Class | Purpose |
+| --- | --- |
+| `.ly-wrapper` | Responsive centered content wrapper. |
+| `.ly-wrapper--sm` | Small wrapper. |
+| `.ly-wrapper--md` | Medium wrapper. |
+| `.ly-wrapper--lg` | Large wrapper. |
+| `.ly-wrapper--xl` | Extra-large wrapper. |
+| `.ly-wrapper--wide` | Wide application wrapper. |
+| `.ly-wrapper--fluid` | Full-width wrapper with responsive padding. |
+| `.ly-wrapper--readable` | Readable content wrapper based on line length. |
+
+## Shells And Regions
+
+| Class | Purpose |
+| --- | --- |
+| `.ly-app-shell` | Header, sidebar, and main application shell. |
+| `.ly-app-header` | Header region inside the app shell. |
+| `.ly-app-sidebar` | Sidebar region inside the app shell. |
+| `.ly-app-main` | Main content region inside the app shell. |
+| `.ly-sidebar-layout` | Local content plus secondary sidebar. |
+| `.ly-split` | Two-part split layout. |
+| `.ly-panes`, `.ly-panes--two`, `.ly-panes--three` | Adaptive pane layouts. |
+
+## Composition
+
+| Class | Purpose |
+| --- | --- |
+| `.ly-section` | Vertical section spacing. |
+| `.ly-stack` | Vertical rhythm. |
+| `.ly-cluster` | Wrapping horizontal group. |
+| `.ly-grid` | Grid foundation. |
+| `.ly-grid--auto` | Responsive auto-fit grid. |
+| `.ly-row`, `.ly-col` | Flex row and column utilities. |
+| `.ly-surface` | Structural surface hook with no visual styling. |
+| `.ly-frame` | Aspect-ratio media or content frame. |
+| `.ly-scroll-area` | Bounded scroll area. |
+
+## Utility Rules
+
+Utilities set layout variables, spacing, flow, visibility, overflow, or ratios. They must not introduce color, typography, borders, shadows, theme modes, or component paint.
+

package/docs/wiki/Layout-Recipes.md

@@ -0,0 +1,80 @@
+# Layout Recipes
+
+Recipes are stable combinations of primitives. They are intended to be copied into applications and paired with UI Style Kit component classes.
+
+## App Shell
+
+```html
+<div class="ly-app-shell">
+  <aside class="ly-app-sidebar ly-pad-6">Navigation</aside>
+  <header class="ly-app-header ly-pad-4">Toolbar</header>
+  <main class="ly-app-main">
+    <section class="ly-wrapper ly-wrapper--wide ly-section">Workspace</section>
+  </main>
+</div>
+```
+
+## Content Wrapper
+
+```html
+<article class="ly-wrapper ly-wrapper--readable ly-section ly-stack">
+  <h1>Documentation</h1>
+  <p>Readable content stays centered and responsive.</p>
+</article>
+```
+
+## Split Screen
+
+```html
+<section class="ly-wrapper ly-wrapper--xl ly-section">
+  <div class="ly-split">
+    <div class="ly-stack">Primary content</div>
+    <aside class="ly-frame ly-surface ly-pad-6">Preview</aside>
+  </div>
+</section>
+```
+
+## Button Group
+
+```html
+<div class="ly-button-group">
+  <button class="saas-button">Save</button>
+  <button class="saas-button-secondary">Preview</button>
+  <button class="saas-button-secondary">Export</button>
+</div>
+```
+
+Button groups wrap without forcing every button to full parent width on mobile.
+
+## Card Grid And Card Size
+
+```html
+<div class="ly-card-grid">
+  <article class="saas-card ly-card-sm">Compact</article>
+  <article class="saas-card ly-card-md">Standard</article>
+  <article class="saas-card ly-card-lg">Feature</article>
+</div>
+```
+
+## Gallery
+
+```html
+<div class="ly-gallery">
+  <figure class="ly-frame ly-frame-4x3">Image</figure>
+  <figure class="ly-frame ly-frame-4x3">Image</figure>
+  <figure class="ly-frame ly-frame-4x3">Image</figure>
+</div>
+```
+
+## Carousel
+
+```html
+<div class="ly-carousel">
+  <article class="ly-surface ly-card-md">Step one</article>
+  <article class="ly-surface ly-card-md">Step two</article>
+  <article class="ly-surface ly-card-md">Step three</article>
+</div>
+```
+
+The carousel recipe provides horizontal flow and scroll snapping without adding visual chrome.
+

package/docs/wiki/Layout-Styles.md

@@ -0,0 +1,43 @@
+# Layout Styles
+
+Layout styles change spatial behavior without changing UI paint. Select them with `data-layout`, `layout-style`, `.ly-layout-*`, or `.ly-style-*`.
+
+## Available Styles
+
+| Style | Best for |
+| --- | --- |
+| `minimal-saas` | Quiet SaaS dashboards, admin tools, and predictable workspaces. |
+| `bento` | Modular dashboards with repeated card surfaces. |
+| `maximalist` | Editorial pages and feature-heavy product screens. |
+| `bauhaus` | Strict modular grids and structured presentation. |
+| `tactile` | Instrument panels and control-heavy interfaces. |
+| `neumorphism` | Centered island layouts and roomy product surfaces. |
+| `retrofuturism` | Panoramic shells and wide staged views. |
+| `brutalism` | Full-bleed slabs and abrupt sectional hierarchy. |
+| `cyberpunk` | Dense command surfaces and narrow utility rails. |
+| `y2k` | Centered hub shells with dock-like support regions. |
+| `retro-glass` | Layered top-frame shells with floating utility rails. |
+| `f-pattern` | Western reading paths with strong top and left scan zones. |
+| `z-pattern` | Landing and promotional flows that move diagonally across the viewport. |
+| `split-screen` | Two competing focal points with equal weight. |
+| `mondrian` | Asymmetric rectangular block compositions. |
+| `synthwave` | Cinematic preview flows and retro-futuristic stage layouts. |
+
+## Selector Contract
+
+```html
+<body data-layout="synthwave" layout-style="synthwave" class="ly-root">
+  <main class="ly-layout-synthwave ly-style-synthwave">...</main>
+</body>
+```
+
+Most applications only need `data-layout`. The class and `layout-style` selectors are provided for integration flexibility.
+
+## Mixing UI And Layout
+
+```html
+<body data-ui="cyberpunk" data-layout="synthwave" data-theme="cyber-lime" data-mode="dark">
+```
+
+This is supported because layout styles do not target `data-ui`.
+