npm - layout-style-css - Versions diffs - 2.1.1 → 3.0.1 - Mend

layout-style-css 2.1.1 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/CHANGELOG.md +47 -0
package/README.md +127 -143
package/dist/core.css +2 -1
package/dist/foundation.css +194 -0
package/dist/layout-style-css.css +527 -984
package/dist/layout-style-css.min.css +1 -1
package/dist/personalities/bauhaus.css +13 -42
package/dist/personalities/bento.css +16 -40
package/dist/personalities/brutalism.css +13 -33
package/dist/personalities/cyberpunk.css +12 -32
package/dist/personalities/f-pattern.css +16 -45
package/dist/personalities/maximalist.css +16 -48
package/dist/personalities/minimal-saas.css +7 -33
package/dist/personalities/mondrian.css +12 -40
package/dist/personalities/neumorphism.css +15 -39
package/dist/personalities/retro-glass.css +14 -42
package/dist/personalities/retrofuturism.css +12 -32
package/dist/personalities/split-screen.css +24 -36
package/dist/personalities/synthwave.css +13 -41
package/dist/personalities/tactile.css +15 -32
package/dist/personalities/y2k.css +13 -33
package/dist/personalities/z-pattern.css +16 -46
package/dist/personalities.css +1 -1
package/dist/primitives.css +27 -63
package/dist/recipes.css +92 -175
package/dist/utilities.css +39 -104
package/dist/wrappers.css +28 -108
package/docs/wiki/Contributing.md +3 -1
package/docs/wiki/Demo-And-GitHub-Pages.md +24 -33
package/docs/wiki/Getting-Started.md +39 -27
package/docs/wiki/Home.md +21 -27
package/docs/wiki/Installation-And-CDN.md +47 -42
package/docs/wiki/Layout-Primitives.md +48 -34
package/docs/wiki/Layout-Recipes.md +42 -33
package/docs/wiki/Layout-Styles.md +60 -26
package/docs/wiki/Migrating-To-3.0.md +205 -0
package/docs/wiki/Release-And-Publishing.md +36 -51
package/docs/wiki/Security-And-Support.md +18 -22
package/docs/wiki/UI-Style-Kit-Compatibility.md +21 -30
package/docs/wiki/_Sidebar.md +12 -15
package/manifest.json +98 -0
package/package.json +33 -28
package/personalities.json +147 -0
package/CONTRIBUTING.md +0 -55
package/SECURITY.md +0 -50
package/demo/assets/apple-touch-icon.svg +0 -7
package/demo/assets/favicon.svg +0 -7
package/demo/assets/social-card.png +0 -0
package/demo/browserconfig.xml +0 -9
package/demo/demo.css +0 -523
package/demo/demo.js +0 -605
package/demo/index.html +0 -325
package/demo/robots.txt +0 -4
package/demo/site.webmanifest +0 -23
package/demo/sitemap.xml +0 -9
package/dist/integrations/ui-style-kit.css +0 -175
package/dist/legacy.css +0 -822
package/styles/core.css +0 -6
package/styles/integrations/ui-style-kit.css +0 -175
package/styles/legacy.css +0 -173
package/styles/personalities/bauhaus.css +0 -49
package/styles/personalities/bento.css +0 -46
package/styles/personalities/brutalism.css +0 -39
package/styles/personalities/cyberpunk.css +0 -39
package/styles/personalities/f-pattern.css +0 -51
package/styles/personalities/maximalist.css +0 -54
package/styles/personalities/minimal-saas.css +0 -39
package/styles/personalities/mondrian.css +0 -47
package/styles/personalities/neumorphism.css +0 -46
package/styles/personalities/retro-glass.css +0 -47
package/styles/personalities/retrofuturism.css +0 -39
package/styles/personalities/split-screen.css +0 -41
package/styles/personalities/synthwave.css +0 -48
package/styles/personalities/tactile.css +0 -39
package/styles/personalities/y2k.css +0 -39
package/styles/personalities/z-pattern.css +0 -52
package/styles/personalities.css +0 -18
package/styles/primitives.css +0 -219
package/styles/recipes.css +0 -278
package/styles/utilities.css +0 -162
package/styles/wrappers.css +0 -174

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

@@ -1,25 +1,16 @@
-# UI Style Kit Compatibility
+# Companion Library Compatibility
-Layout Style CSS is dependency-free. `ui-style-kit-css@2.1.0` is the released visual fixture for 2.1 ecosystem verification and is not a runtime or peer dependency.
+Layout Style CSS v3 has no bridge, peer dependency, or companion import.
-## Ownership Boundary
+## Ownership
-| Package | Owns |
-| --- | --- |
-| `layout-style-css` | Wrappers, containment, flow, areas, grids, spans, recipes, and spatial personalities. |
-| `ui-style-kit-css` | Color, typography, borders, shadows, native controls, component paint, themes, and modes. |
-| `interactive-surface-css` | Interaction-state styling. |
+Layout owns structure. UI Style Kit owns paint. Interactive Surface owns interaction styling.
-## Explicit Imports
-Layout plus UI:
-```js
-import "ui-style-kit-css/visual.css";
-import "layout-style-css";
-```
+- Layout: wrappers, containment, measures, flow, tracks, grid areas, ratios, overflow bounds, and responsive topology
+- UI Style Kit: color, typography, borders, radii, shadows, component paint, and theme roles
+- Interactive Surface: hover, focus, pressed, selected, disabled, loading, and other interaction-state styling
-All three libraries:
+## Explicit Imports
 ```js
 import "ui-style-kit-css/visual.css";
@@ -28,22 +19,22 @@ import "interactive-surface-css/state-core.css";
 import "layout-style-css";
 ```
-The Layout integration bridge contains structural mappings but no package imports. It remains available as deprecated compatibility for legacy UI-prefixed structural aliases. The removed `all-with-ui-kit*` aggregates have no v2 replacement because dependency ownership stays with the application.
+Applications may use Layout alone, Layout plus UI Style Kit, or all three. The default Layout bundle never imports or assumes either companion.
-## Structural Aliases
+## Markup
-The bridge supports the `saas`, `bento`, `max`, `bau`, `tactile`, `neo`, `retro`, `brutal`, `cyber`, `y2k`, and `rg` prefixes for container, section, stack, cluster, grid, split, button-group, card-grid, card-size, gallery, and carousel structure.
+Put canonical structural hooks in markup:
-Visual component names remain owned by UI Style Kit. The bridge does not map color, typography, border, shadow, theme, or interaction tokens.
-The removed v1 `.ly-surface--raised` selector is not restored by `legacy.css`; its radius and raised paint belong to UI Style Kit or application theme styling. Likewise, the legacy `.ly-divider` alias supplies structural size and spacing only, leaving the visible separator to the UI layer.
+```html
+<body class="ly-root" data-ly-layout="minimal-saas" data-ui="minimal-saas">
+  <main class="ly-wrapper" data-ly-recipe="dashboard">
+    <header data-ly-area="header" class="saas-card">Dashboard</header>
+  </main>
+</body>
+```
-## Compatibility Baseline
+The `ly-*` hooks control structure. Companion classes and data attributes can paint or animate the same elements without taking over layout.
-| Library | Verified fixture | Consumer requirement |
-| --- | --- | --- |
-| Layout Style CSS | `2.1.1` | Required for this API |
-| UI Style Kit CSS | `2.1.0` visual CSS and manifest | Optional released fixture |
-| Interactive Surface CSS | `1.5.0` `state-core.css` | Optional released fixture |
+## v3 Boundary
-Current evergreen Chromium, Firefox, and WebKit are covered by the release gate.
+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 CHANGED Viewed

@@ -1,15 +1,12 @@
-# Wiki Navigation
-- [Home](Home.md)
-- [Getting Started](Getting-Started.md)
-- [Installation And CDN](Installation-And-CDN.md)
-- [Layout Primitives](Layout-Primitives.md)
-- [Layout Recipes](Layout-Recipes.md)
-- [Layout Styles](Layout-Styles.md)
-- [UI Style Kit Compatibility](UI-Style-Kit-Compatibility.md)
-- [Migrating To 2.0](Migrating-To-2.0.md)
-- [Demo And GitHub Pages](Demo-And-GitHub-Pages.md)
-- [Release And Publishing](Release-And-Publishing.md)
-- [Security And Support](Security-And-Support.md)
-- [Contributing](Contributing.md)
+- [Home](Home)
+- [Getting Started](Getting-Started)
+- [Installation And CDN](Installation-And-CDN)
+- [Layout Primitives](Layout-Primitives)
+- [Layout Recipes](Layout-Recipes)
+- [Layout Styles](Layout-Styles)
+- [Companion Compatibility](UI-Style-Kit-Compatibility)
+- [Migrating To 3.0](Migrating-To-3.0)
+- [Demo And GitHub Pages](Demo-And-GitHub-Pages)
+- [Release And Publishing](Release-And-Publishing)
+- [Security And Support](Security-And-Support)
+- [Contributing](Contributing)

package/manifest.json ADDED Viewed

@@ -0,0 +1,98 @@
+{
+  "schemaVersion": 1,
+  "schemaPolicy": {
+    "compatibility": "additive-within-major",
+    "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
+  },
+  "name": "layout-style-css",
+  "version": "3.0.1",
+  "entrypoints": {
+    "default": "./dist/layout-style-css.css",
+    "minified": "./dist/layout-style-css.min.css",
+    "core": "./dist/core.css",
+    "foundation": "./dist/foundation.css",
+    "wrappers": "./dist/wrappers.css",
+    "primitives": "./dist/primitives.css",
+    "recipes": "./dist/recipes.css",
+    "utilities": "./dist/utilities.css",
+    "personalities": "./dist/personalities.css",
+    "personalityModules": "./dist/personalities/*.css",
+    "personalityMetadata": "./personalities.json"
+  },
+  "selectors": {
+    "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"],
+  "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"],
+  "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": "synthwave",
+      "label": "Synthwave",
+      "visualCompatibility": "recommended",
+      "recommendedVisualPresets": ["cyberpunk", "retrofuturism"],
+      "visualVerification": {
+        "method": "rendered-computed-style",
+        "test": "test/demo-smoke.test.mjs",
+        "computedProperties": {
+          "cyberpunk": { "boxShadow": "0px 0px 18px" },
+          "retrofuturism": { "boxShadow": "0px 10px 30px" }
+        },
+        "assertion": "A visible browser contract fixture renders each preset's distinct article box-shadow while data-ly-layout remains synthwave."
+      }
+    }
+  ],
+  "containers": {
+    "names": ["ly-scope"],
+    "type": "inline-size"
+  },
+  "thresholds": {
+    "containerMinWidths": ["42rem", "44rem", "48rem", "52rem", "72rem"],
+    "viewportMaxHeights": ["44rem", "30rem"]
+  },
+  "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-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-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-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-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",
+      "--ly-docs-wide-columns", "--ly-list-detail-wide-areas", "--ly-list-detail-wide-columns",
+      "--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"
+    ]
+  },
+  "companions": {
+    "ui-style-kit-css": ">=2.1.0 <3.0.0",
+    "interactive-surface-css": ">=1.5.0 <2.0.0"
+  }
+}

package/package.json CHANGED Viewed

@@ -1,10 +1,10 @@
 {
   "name": "layout-style-css",
-  "version": "2.1.1",
+  "version": "3.0.1",
   "description": "Dependency-free structural CSS for responsive wrappers, composition primitives, recipes, utilities, and layout personalities.",
   "type": "module",
   "license": "MIT",
-  "homepage": "https://github.com/Foscat/layout-style-css#readme",
+  "homepage": "https://foscat.github.io/Layout-Style-CSS/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Foscat/layout-style-css.git"
@@ -24,7 +24,7 @@
     "shell-layouts"
   ],
   "main": "dist/layout-style-css.css",
-  "style": "dist/layout-style-css.min.css",
+  "style": "dist/layout-style-css.css",
   "unpkg": "dist/layout-style-css.min.css",
   "jsdelivr": "dist/layout-style-css.min.css",
   "scripts": {
@@ -32,7 +32,8 @@
     "pages:build": "node scripts/build-pages.mjs",
     "lint": "stylelint \"styles/**/*.css\" \"demo/**/*.css\"",
     "check:demo-js": "node --check demo/demo.js",
-    "test:static": "node test/layout-css-contract.test.mjs && node test/release-docs-contract.test.mjs",
+    "check:ownership": "node scripts/check-css-ownership.mjs",
+    "test:static": "node --test --test-concurrency=1 test/manifest-contract.test.mjs test/ownership-boundaries.test.mjs test/package-contract.test.mjs test/release-preflight.test.mjs && node test/layout-css-contract.test.mjs && node test/release-docs-contract.test.mjs",
     "test:demo:quick": "node test/demo-smoke.test.mjs --quick --browser=chromium",
     "test:demo:chromium": "node test/demo-smoke.test.mjs --browser=chromium",
     "test:demo:firefox": "node test/demo-smoke.test.mjs --browser=firefox",
@@ -41,11 +42,12 @@
     "test:pages": "node test/pages-artifact.test.mjs",
     "test": "npm run test:static && npm run test:demo:quick && npm run test:pages",
     "test:full": "npm run test:static && npm run test:demo:all && npm run test:pages",
-    "check": "npm run build && npm run lint && npm run check:demo-js && npm test && npm run pack:dry-run",
-    "check:full": "npm run build && npm run lint && npm run check:demo-js && npm run test:full && npm run pack:dry-run",
+    "check": "npm run build && npm run check:ownership && npm run lint && npm run check:demo-js && npm test && npm run pack:dry-run",
+    "check:full": "npm run build && npm run check:ownership && npm run lint && npm run check:demo-js && npm run test:full && npm run pack:dry-run",
     "pack:dry-run": "npm pack --dry-run --ignore-scripts",
     "publish:dry-run": "npm publish --dry-run --access public --ignore-scripts",
-    "release:verify": "npm run check:full && npm audit --audit-level=moderate && npm run publish:dry-run",
+    "release:preflight": "npm run build && node scripts/release-fixture-contract.mjs",
+    "release:verify": "npm run check:full && npm run release:preflight && npm audit --audit-level=moderate && npm run publish:dry-run",
     "prepack": "npm run build && npm run test:static",
     "prepublishOnly": "npm run release:verify"
   },
@@ -54,45 +56,48 @@
   },
   "devDependencies": {
     "@playwright/test": "1.61.1",
+    "css-tree": "3.2.1",
     "interactive-surface-css": "1.5.0",
     "stylelint": "17.14.0",
     "ui-style-kit-css": "2.1.0"
   },
+  "overrides": {
+    "fast-uri": "3.1.5",
+    "js-yaml": "4.3.1",
+    "nanoid": "3.3.17",
+    "postcss": "8.5.23"
+  },
   "exports": {
     ".": "./dist/layout-style-css.css",
-    "./css": "./dist/layout-style-css.css",
-    "./css.css": "./dist/layout-style-css.css",
-    "./min": "./dist/layout-style-css.min.css",
     "./min.css": "./dist/layout-style-css.min.css",
     "./core.css": "./dist/core.css",
+    "./foundation.css": "./dist/foundation.css",
     "./wrappers.css": "./dist/wrappers.css",
     "./primitives.css": "./dist/primitives.css",
     "./recipes.css": "./dist/recipes.css",
     "./utilities.css": "./dist/utilities.css",
     "./personalities.css": "./dist/personalities.css",
     "./personalities/*.css": "./dist/personalities/*.css",
-    "./integrations/ui-style-kit.css": "./dist/integrations/ui-style-kit.css",
-    "./legacy.css": "./dist/legacy.css",
+    "./personalities.json": "./personalities.json",
+    "./manifest.json": "./manifest.json",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "styles",
-    "docs/wiki",
-    "demo/index.html",
-    "demo/demo.css",
-    "demo/demo.js",
-    "demo/assets/apple-touch-icon.svg",
-    "demo/assets/favicon.svg",
-    "demo/assets/social-card.png",
-    "demo/browserconfig.xml",
-    "demo/robots.txt",
-    "demo/site.webmanifest",
-    "demo/sitemap.xml",
+    "dist/layout-style-css.css",
+    "dist/layout-style-css.min.css",
+    "dist/core.css",
+    "dist/foundation.css",
+    "dist/wrappers.css",
+    "dist/primitives.css",
+    "dist/recipes.css",
+    "dist/utilities.css",
+    "dist/personalities.css",
+    "dist/personalities/*.css",
+    "personalities.json",
+    "manifest.json",
     "README.md",
+    "LICENSE",
     "CHANGELOG.md",
-    "CONTRIBUTING.md",
-    "SECURITY.md",
-    "LICENSE"
+    "docs/wiki"
   ]
 }

package/personalities.json ADDED Viewed

@@ -0,0 +1,147 @@
+{
+  "schemaVersion": 1,
+  "generatedFrom": "manifest.json",
+  "selector": "data-ly-layout",
+  "independentSelectors": [
+    "data-ly-layout",
+    "data-ui",
+    "data-theme",
+    "data-mode"
+  ],
+  "personalities": [
+    {
+      "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": "synthwave",
+      "label": "Synthwave",
+      "visualCompatibility": "recommended",
+      "recommendedVisualPresets": [
+        "cyberpunk",
+        "retrofuturism"
+      ],
+      "visualVerification": {
+        "method": "rendered-computed-style",
+        "test": "test/demo-smoke.test.mjs",
+        "computedProperties": {
+          "cyberpunk": {
+            "boxShadow": "0px 0px 18px"
+          },
+          "retrofuturism": {
+            "boxShadow": "0px 10px 30px"
+          }
+        },
+        "assertion": "A visible browser contract fixture renders each preset's distinct article box-shadow while data-ly-layout remains synthwave."
+      }
+    }
+  ]
+}

package/CONTRIBUTING.md DELETED Viewed

@@ -1,55 +0,0 @@
-# Contributing
-Thanks for improving `layout-style-css`. This repository is a CSS layout library, so changes should keep structure, spacing, responsive behavior, and package contracts separate from visual styling.
-## Local Setup
-```bash
-npm install
-npm run build
-npm run lint
-npm run check:demo-js
-npm test
-```
-Run the full release gate before opening a release PR:
-```bash
-npm run release:verify
-```
-## Development Rules
-- Keep authored CSS in `styles/`.
-- Regenerate `dist/` with `npm run build`; do not hand-edit generated dist files.
-- Keep public layout classes prefixed with `ly-`.
-- Leave colors, typography, borders, shadows, native controls, focus states, themes, and modes to `ui-style-kit-css`.
-- Add structural aliases in `styles/integrations/ui-style-kit.css` only when they map to layout primitives or layout recipes.
-- Preserve semantic mobile DOM, reading, and focus order; built-in recipes must use named areas instead of `order`.
-- Test container behavior below and above `48rem` and `64rem`.
-- Update README, `docs/wiki`, and `CHANGELOG.md` when a public class, export, recipe, release workflow, or package behavior changes.
-## Testing Expectations
-Every change that affects public behavior should update or preserve:
-- `test/layout-css-contract.test.mjs` for package, CSS, docs, and tarball contracts.
-- `test/release-docs-contract.test.mjs` for current documentation and workflow contracts.
-- `test/demo-smoke.test.mjs` for rendered demo behavior.
-- `test/pages-artifact.test.mjs` for GitHub Pages output.
-- `stylelint` for authored CSS formatting.
-## Review Checklist
-- The package remains publishable as a public npm library.
-- The npm tarball contains only intended release files.
-- README examples use exported package entrypoints.
-- Documentation links resolve to versioned files.
-- Demo controls remain compact on mobile and tablet viewports.
-- Chromium, Firefox, and WebKit pass for release-facing rendered changes.
-- New CSS does not introduce UI Style Kit-owned visual declarations.
-## Wiki Updates
-The source for the project wiki is `docs/wiki/`. If GitHub Wiki is enabled for the repository, mirror those files into the wiki remote after the main branch documentation is merged.

package/SECURITY.md DELETED Viewed

@@ -1,50 +0,0 @@
-# Security Policy
-`layout-style-css` is a CSS-only layout package. It does not execute JavaScript at runtime, make network requests, process user input, store credentials, or read secrets.
-## Supported Versions
-| Version | Supported |
-| --- | --- |
-| `2.x` | Yes |
-| `1.1.x` | Migration support only |
-| `1.0.x` | No |
-## Reporting A Vulnerability
-Use GitHub security advisories for private reports when available. If advisories are not enabled, open a minimal GitHub issue that avoids public exploit details and asks for a private coordination path.
-Please include:
-- affected version and package entrypoint
-- affected selector, file, or demo behavior
-- reproduction steps
-- expected impact
-- whether the issue affects package consumers, the demo, or GitHub Pages deployment
-## Security Model
-The primary security risks for this package are supply-chain and documentation risks:
-- incorrect package exports that make consumers import unexpected files
-- malformed CDN examples that point to wrong assets
-- accidental runtime JavaScript or network behavior in docs or demo code
-- package contents that include secrets, build caches, or unrelated local files
-- CSS that hides important controls or breaks keyboard-visible flows in the demo
-The release gate verifies package contents, README imports, documentation links, CSS contracts, GitHub Pages artifact structure, and rendered behavior in Chromium, Firefox, and WebKit.
-## Dependency Checks
-Run the local dependency audit before publishing:
-```bash
-npm audit --audit-level=moderate
-```
-The package also uses `npm run release:verify` to run build, lint, static, Pages, cross-browser, pack dry-run, and publish dry-run checks.
-The npm workflow validates a strict tag, exact peeled commit, protected-main ancestry, and package version before dependency lifecycle code runs. Publishing requires the protected `npm` GitHub Environment, emits npm provenance, and exposes `NODE_AUTH_TOKEN` only to the publish step. npm trusted publishing and immutable commit SHA pins for GitHub Actions remain follow-up hardening work.
-The demo's two exact-version companion CDN fixtures use SHA-384 subresource integrity with anonymous CORS. Their hashes are derived from the pinned local development fixtures and enforced by the rendered smoke contract.

package/demo/assets/apple-touch-icon.svg DELETED Viewed

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" role="img" aria-labelledby="title">
-  <title id="title">layout-style-css app icon</title>
-  <rect width="180" height="180" rx="40" fill="#111827"/>
-  <rect x="30" y="34" width="40" height="112" rx="12" fill="#7dd3fc"/>
-  <rect x="88" y="34" width="62" height="44" rx="12" fill="#fbbf24"/>
-  <rect x="88" y="100" width="62" height="46" rx="12" fill="#f472b6"/>
-</svg>

package/demo/assets/favicon.svg DELETED Viewed

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title">
-  <title id="title">layout-style-css favicon</title>
-  <rect width="64" height="64" rx="14" fill="#111827"/>
-  <rect x="10" y="12" width="14" height="40" rx="4" fill="#7dd3fc"/>
-  <rect x="30" y="12" width="24" height="16" rx="4" fill="#fbbf24"/>
-  <rect x="30" y="36" width="24" height="16" rx="4" fill="#f472b6"/>
-</svg>

package/demo/assets/social-card.png DELETED Viewed

Binary file

package/demo/browserconfig.xml DELETED Viewed

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-  <msapplication>
-    <tile>
-      <square150x150logo src="./assets/apple-touch-icon.svg"/>
-      <TileColor>#111827</TileColor>
-    </tile>
-  </msapplication>
-</browserconfig>