layout-style-css 3.0.2 → 3.2.0

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

@@ -0,0 +1,62 @@
+# Migrating To 3.1
+
+Layout Style CSS 3.1 is additive: no package export, recipe, area, personality, or recipe threshold was removed or renamed. The refinements make density, gap locality, Wrapper intent, and Scroll constraints explicit.
+
+## Section Rhythm And Density
+
+Normal density is now the conservative zero-configuration rhythm. The former larger marketing rhythm is available through spacious density:
+
+```html
+<!-- Former normal marketing rhythm -->
+<main class="ly-root" data-ly-density="spacious">
+  <section class="ly-section">Campaign overview</section>
+</main>
+```
+
+Use compact density for task-heavy application regions and normal for conventional content. Density can be set at the root or reset on a nested subtree:
+
+```html
+<!-- Task-oriented application workspace -->
+<main class="ly-wrapper ly-wrapper--workspace" data-ly-density="compact">
+  <section class="ly-section">Inventory workspace</section>
+</main>
+```
+
+The public values are `data-ly-density="compact"`, `data-ly-density="normal"`, and `data-ly-density="spacious"`. A nested value intentionally resets inherited gap and section tokens.
+
+## Gap Locality
+
+`.ly-gap-0` through `.ly-gap-9` now set `gap` only on the element carrying the class. Descendant Stacks, Clusters, Grids, and recipes keep their defaults. Move shared spacing intent to the public inherited variables:
+
+```html
+<!-- Intentional inherited spacing context -->
+<section style="--ly-gap: var(--ly-space-7); --ly-grid-gap: var(--ly-gap);">
+  <div class="ly-grid"><article>Primary</article><article>Secondary</article></div>
+</section>
+```
+
+Use a local utility when only one composition changes, for example `class="ly-grid ly-gap-9"`.
+
+## Scroll Constraints
+
+Base `.ly-scroll` now owns overflow without choosing a maximum height. Add the modifier that matches the container contract:
+
+```html
+<!-- Former 3.0.x Scroll behavior -->
+<div class="ly-scroll ly-scroll--viewport">Viewport-relative activity log</div>
+
+<!-- Stable application-controlled Scroll cap -->
+<div class="ly-scroll ly-scroll--bounded" style="--ly-scroll-max: 32rem">
+  Application-controlled activity log
+</div>
+```
+
+`ly-scroll--viewport` consumes `--ly-scroll-viewport-max` and adapts at the `44rem` and `30rem` viewport-height tiers. `ly-scroll--bounded` consumes `--ly-scroll-max` and remains stable unless the application overrides it.
+
+## Structured Threshold Metadata
+
+The generic threshold arrays remain available. `manifest.json` now also publishes recipe ownership under `thresholds.recipes`, so tooling can distinguish the medium and wide tiers for App Shell and Dashboard from each recipe's single wide tier. Release validation requires every public geometry token to be consumed by runtime CSS.
+
+## Compatibility
+
+All 13 package exports and the `42rem`, `44rem`, `48rem`, `52rem`, and `72rem` recipe thresholds remain unchanged. Existing markup without a density attribute uses normal density. Legacy demo links containing `?density=comfortable` normalize to `normal`.

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.0.2`. 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 `33e3c834aec62b85650dd14aea9d7d388abef191`.
+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.0.2`
-- intended tag would be `v3.0.2`
+- 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.0.2` 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,8 +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.0.2",
+  "version": "3.2.0",
   "entrypoints": {
     "default": "./dist/layout-style-css.css",
     "minified": "./dist/layout-style-css.min.css",
@@ -23,42 +23,47 @@
     "stable": [".ly-root", ".ly-wrapper"],
     "deprecated": []
   },
-  "wrappers": ["compact", "prose", "content", "wide", "full", "breakout"],
-  "primitives": ["page", "header", "footer", "main", "section", "surface", "readable", "stack", "cluster", "center", "cover", "switcher", "sidebar", "grid", "split", "panes", "media", "reel", "frame", "scroll"],
+  "wrappers": ["compact", "prose", "content", "workspace", "wide", "full", "breakout"],
+  "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"],
@@ -66,23 +71,37 @@
   },
   "thresholds": {
     "containerMinWidths": ["42rem", "44rem", "48rem", "52rem", "72rem"],
-    "viewportMaxHeights": ["44rem", "30rem"]
+    "viewportMaxHeights": ["44rem", "30rem"],
+    "recipes": {
+      "splitHero": { "wide": "42rem" },
+      "listDetail": { "wide": "44rem" },
+      "docs": { "wide": "48rem" },
+      "appShell": { "medium": "52rem", "wide": "72rem" },
+      "dashboard": { "medium": "52rem", "wide": "72rem" }
+    },
+    "compositions": {
+      "mosaic": { "medium": "42rem", "wide": "72rem" }
+    }
   },
   "tokens": {
     "geometry": [
       "--ly-space-0", "--ly-space-1", "--ly-space-2", "--ly-space-3", "--ly-space-4",
       "--ly-space-5", "--ly-space-6", "--ly-space-7", "--ly-space-8", "--ly-space-9",
-      "--ly-wrapper-compact", "--ly-wrapper-prose", "--ly-wrapper-content", "--ly-wrapper-wide",
+      "--ly-wrapper-compact", "--ly-wrapper-prose", "--ly-wrapper-content", "--ly-wrapper-workspace",
+      "--ly-wrapper-wide",
       "--ly-page-padding-inline", "--ly-safe-area-inline", "--ly-safe-area-block-start",
       "--ly-safe-area-block-end", "--ly-wrapper-gutter", "--ly-wrapper-max", "--ly-profile-gap",
       "--ly-gap", "--ly-grid-gap", "--ly-stack-gap", "--ly-cluster-gap",
       "--ly-section-padding-block", "--ly-section-padding-block-compact", "--ly-header-height",
       "--ly-sticky-position", "--ly-cover-min",
-      "--ly-shell-min", "--ly-scroll-max", "--ly-switcher-threshold", "--ly-sidebar-size",
-      "--ly-sidebar-content-min", "--ly-grid-columns", "--ly-grid-min", "--ly-split-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-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",
@@ -90,7 +109,8 @@
       "--ly-split-hero-wide-areas", "--ly-split-hero-wide-columns", "--ly-center-max",
       "--ly-cover-padding", "--ly-z-header", "--ly-split-align", "--ly-media-align",
       "--ly-split-hero-align"
-    ]
+    ],
+    "extensionOnly": []
   },
   "companions": {
     "ui-style-kit-css": ">=2.1.0 <3.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "layout-style-css",
-  "version": "3.0.2",
+  "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"

package/personalities.json

@@ -4,6 +4,7 @@
   "selector": "data-ly-layout",
   "independentSelectors": [
     "data-ly-layout",
+    "data-ly-density",
     "data-ui",
     "data-theme",
     "data-mode"
@@ -15,6 +16,9 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "minimal-saas"
+      ],
+      "compatibleVisualPresets": [
+        "organic-modern"
       ]
     },
     {
@@ -23,7 +27,8 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "bento"
-      ]
+      ],
+      "compatibleVisualPresets": []
     },
     {
       "id": "maximalist",
@@ -31,7 +36,8 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "maximalist"
-      ]
+      ],
+      "compatibleVisualPresets": []
     },
     {
       "id": "bauhaus",
@@ -39,6 +45,9 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "bauhaus"
+      ],
+      "compatibleVisualPresets": [
+        "art-deco"
       ]
     },
     {
@@ -47,6 +56,9 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "tactile"
+      ],
+      "compatibleVisualPresets": [
+        "clay"
       ]
     },
     {
@@ -55,7 +67,8 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "neumorphism"
-      ]
+      ],
+      "compatibleVisualPresets": []
     },
     {
       "id": "retrofuturism",
@@ -63,7 +76,8 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "retrofuturism"
-      ]
+      ],
+      "compatibleVisualPresets": []
     },
     {
       "id": "brutalism",
@@ -71,7 +85,8 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "brutalism"
-      ]
+      ],
+      "compatibleVisualPresets": []
     },
     {
       "id": "cyberpunk",
@@ -79,7 +94,8 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "cyberpunk"
-      ]
+      ],
+      "compatibleVisualPresets": []
     },
     {
       "id": "y2k",
@@ -87,7 +103,8 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "y2k"
-      ]
+      ],
+      "compatibleVisualPresets": []
     },
     {
       "id": "retro-glass",
@@ -95,31 +112,36 @@
       "visualCompatibility": "native",
       "recommendedVisualPresets": [
         "retro-glass"
-      ]
+      ],
+      "compatibleVisualPresets": []
     },
     {
       "id": "f-pattern",
       "label": "F-pattern",
       "visualCompatibility": "any",
-      "recommendedVisualPresets": []
+      "recommendedVisualPresets": [],
+      "compatibleVisualPresets": []
     },
     {
       "id": "z-pattern",
       "label": "Z-pattern",
       "visualCompatibility": "any",
-      "recommendedVisualPresets": []
+      "recommendedVisualPresets": [],
+      "compatibleVisualPresets": []
     },
     {
       "id": "split-screen",
       "label": "Split Screen",
       "visualCompatibility": "any",
-      "recommendedVisualPresets": []
+      "recommendedVisualPresets": [],
+      "compatibleVisualPresets": []
     },
     {
       "id": "mondrian",
       "label": "Mondrian",
       "visualCompatibility": "any",
-      "recommendedVisualPresets": []
+      "recommendedVisualPresets": [],
+      "compatibleVisualPresets": []
     },
     {
       "id": "synthwave",
@@ -129,19 +151,59 @@
         "cyberpunk",
         "retrofuturism"
       ],
+      "compatibleVisualPresets": [],
       "visualVerification": {
         "method": "rendered-computed-style",
         "test": "test/demo-smoke.test.mjs",
         "computedProperties": {
           "cyberpunk": {
-            "boxShadow": "0px 0px 18px"
+            "boxShadow": "0px 0px 12px"
           },
           "retrofuturism": {
-            "boxShadow": "0px 10px 30px"
+            "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": []
     }
   ]
 }