stylegallery 0.1.0

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "stylegallery",
+  "version": "0.1.0",
+  "description": "A governed gallery of portable interface knowledge with a deterministic CLI and read-only MCP server.",
+  "type": "module",
+  "homepage": "https://github.com/changeroa/StyleGallery#readme",
+  "bugs": {
+    "url": "https://github.com/changeroa/StyleGallery/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/changeroa/StyleGallery.git"
+  },
+  "keywords": [
+    "agents",
+    "css",
+    "design-engineering",
+    "layout",
+    "mcp",
+    "ui"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "bin": {
+    "sg": "scripts/sg.mjs",
+    "stylegallery": "scripts/sg.mjs",
+    "stylegallery-mcp": "scripts/sg-mcp.mjs"
+  },
+  "files": [
+    "AGENTS.md",
+    "CATALOG.md",
+    "DOMAINS.md",
+    "GOVERNANCE.md",
+    "GUIDE.md",
+    "consumer-reference/",
+    "design-engineering/",
+    "game-ui/",
+    "guides/",
+    "index.md",
+    "layout/",
+    "motion/",
+    "patterns/",
+    "platform-guides/",
+    "quality/",
+    "recipes/",
+    "scripts/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "audit:evidence": "node scripts/audit-evidence-freshness.mjs",
+    "build": "node scripts/build-reference-artifacts.mjs --adapter style-dictionary --fail-on-warning --json",
+    "create:component-state-session": "node scripts/create-component-state-session.mjs",
+    "test": "node scripts/test-reference-adapters.mjs --json",
+    "test:consumer-conformance": "playwright test tests/consumer-conformance.spec.mjs",
+    "test:component-state": "node scripts/test-component-state-source-contract.mjs && node scripts/test-validate-component-state.mjs --json && node scripts/test-validate-component-state-artifacts.mjs && node scripts/test-generate-consumer-reference-evidence.mjs --json",
+    "test:component-state:runtime": "playwright test tests/component-state-evidence.spec.mjs --project=chromium",
+    "test:component-state:runtime-negative": "node scripts/test-component-state-sentinel.mjs",
+    "test:sentinel": "playwright test tests/consumer-reference-sentinels.spec.mjs --project=chromium",
+    "sg": "node scripts/sg.mjs",
+    "sg:mcp": "node scripts/sg-mcp.mjs",
+    "test:agent-native": "node scripts/test-agent-knowledge-kernel.mjs --json && node scripts/test-agent-execution-kernel.mjs --json && node scripts/test-agent-execution-safety.mjs --json && node scripts/test-agent-events.mjs --json && node scripts/test-agent-learning.mjs --json && node scripts/test-agent-native-schemas.mjs --json && node scripts/test-sg-cli.mjs --json && node scripts/test-agent-conformance-receipt.mjs --json && node scripts/test-agent-mcp.mjs --json && node scripts/test-agent-registry-mcp-integrity.mjs --json && node scripts/test-agent-registry-mutations.mjs --json && node scripts/test-agent-adapter-conformance.mjs --json && node scripts/test-agent-projections.mjs --json",
+    "validate": "node scripts/validate-reference-artifacts.mjs --manifest consumer-reference/generated/manifest.json --json",
+    "validate:component-state": "node scripts/validate-component-state.mjs --json && node scripts/generate-consumer-reference-evidence.mjs --check --json"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "4.12.1",
+    "@playwright/test": "1.61.0",
+    "ajv": "8.20.0",
+    "ajv-formats": "3.0.1",
+    "style-dictionary": "5.5.0"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "1.29.0"
+  }
+}

package/patterns/centering/center.md

@@ -0,0 +1,87 @@
+---
+type: Layout Pattern
+name: center
+title: center
+category: Centering
+description: Center a block while respecting a maximum measure.
+primary_spatial_problem: Center a block while respecting a maximum measure.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://every-layout.dev/layouts/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# center
+
+## When To Use
+
+Use this pattern when you need to center a block while respecting a maximum measure.
+
+## HTML
+
+```html
+<article class="center" aria-labelledby="center-heading">
+    <h2 id="center-heading">Editorial policy</h2>
+    <p>Long-form guidance stays readable while the page around it remains fluid.</p>
+</article>
+```
+
+## CSS
+
+```css
+.center {
+    margin-inline: auto;
+    max-inline-size: 64rem;
+    padding-inline: 1rem;
+}
+```
+
+## Core Properties
+
+- `margin-inline`, `max-inline-size`, `padding-inline` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `margin-inline`, `max-inline-size`, `padding-inline` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `center` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Centering patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/centering/index.md

@@ -0,0 +1,6 @@
+# Centering
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+- [center](center.md) - Center a block while respecting a maximum measure.
+- [super-center](super-center.md) - Center one region along both axes.

package/patterns/centering/super-center.md

@@ -0,0 +1,89 @@
+---
+type: Layout Pattern
+name: super-center
+title: super-center
+category: Centering
+description: Center one region along both axes.
+primary_spatial_problem: Center one region along both axes.
+secondary_spatial_problems: none
+layout_axis: both
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://web.dev/articles/one-line-layouts
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# super-center
+
+## When To Use
+
+Use this pattern when you need to center one region along both axes.
+
+## HTML
+
+```html
+<section class="super_center" aria-labelledby="centered-dialog-title">
+    <form aria-labelledby="centered-dialog-title">
+        <h2 id="centered-dialog-title">Confirm archive</h2>
+        <button>Archive project</button>
+    </form>
+</section>
+```
+
+## CSS
+
+```css
+.super_center {
+    display: grid;
+    min-block-size: 100dvh;
+    place-items: center;
+}
+```
+
+## Core Properties
+
+- `display`, `min-block-size`, `place-items` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `min-block-size`, `place-items` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `super_center` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Centering patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/containment/box.md

@@ -0,0 +1,87 @@
+---
+type: Layout Pattern
+name: box
+title: box
+category: Containment
+description: Wrap content with predictable internal spacing.
+primary_spatial_problem: Wrap content with predictable internal spacing.
+secondary_spatial_problems: none
+layout_axis: block
+content_shape: mixed
+responsiveness: fixed
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://every-layout.dev/layouts/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# box
+
+## When To Use
+
+Use this pattern when you need to wrap content with predictable internal spacing.
+
+## HTML
+
+```html
+<aside class="box" aria-labelledby="box-heading">
+    <h2 id="box-heading">Support window</h2>
+    <p>Responses resume Monday at 09:00.</p>
+</aside>
+```
+
+## CSS
+
+```css
+.box {
+    box-sizing: border-box;
+    display: block;
+    padding: 1rem;
+}
+```
+
+## Core Properties
+
+- `box-sizing`, `display`, `padding` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `box-sizing`, `display`, `padding` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fixed responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `box` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Containment patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/containment/clamped-card.md

@@ -0,0 +1,86 @@
+---
+type: Layout Pattern
+name: clamped-card
+title: clamped-card
+category: Containment
+description: Constrain a card to a readable fluid width.
+primary_spatial_problem: Constrain a card to a readable fluid width.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://web.dev/articles/one-line-layouts
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# clamped-card
+
+## When To Use
+
+Use this pattern when you need to constrain a card to a readable fluid width.
+
+## HTML
+
+```html
+<article class="clamped_card" aria-labelledby="clamped-title">
+    <h2 id="clamped-title">Invite teammate</h2>
+    <p>The card grows with the viewport but stops at the intended reading width.</p>
+</article>
+```
+
+## CSS
+
+```css
+.clamped_card {
+    inline-size: clamp(16rem, 50vw, 28rem);
+    margin-inline: auto;
+}
+```
+
+## Core Properties
+
+- `inline-size`, `margin-inline` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `inline-size`, `margin-inline` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `clamped_card` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Containment patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/containment/content-limiter.md

@@ -0,0 +1,87 @@
+---
+type: Layout Pattern
+name: content-limiter
+title: content-limiter
+category: Containment
+description: Keep prose width readable inside fluid containers.
+primary_spatial_problem: Keep prose width readable inside fluid containers.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://design-system.service.gov.uk/styles/layout/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# content-limiter
+
+## When To Use
+
+Use this pattern when you need to keep prose width readable inside fluid containers.
+
+## HTML
+
+```html
+<article class="content_limiter" aria-labelledby="limiter-heading">
+    <h2 id="limiter-heading">Incident summary</h2>
+    <p>The report keeps a comfortable measure even inside a wide dashboard shell.</p>
+</article>
+```
+
+## CSS
+
+```css
+.content_limiter {
+    margin-inline: auto;
+    max-inline-size: 70ch;
+    padding-inline: 1rem;
+}
+```
+
+## Core Properties
+
+- `margin-inline`, `max-inline-size`, `padding-inline` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `margin-inline`, `max-inline-size`, `padding-inline` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `content_limiter` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Containment patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/containment/fluid-styles.md

@@ -0,0 +1,86 @@
+---
+type: Layout Pattern
+name: fluid-styles
+title: fluid-styles
+category: Containment
+description: Let a region fill available width without exceeding a readable max.
+primary_spatial_problem: Let a region fill available width without exceeding a readable max.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://carbondesignsystem.com/elements/2x-grid/overview/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# fluid-styles
+
+## When To Use
+
+Use this pattern when you need to let a region fill available width without exceeding a readable max.
+
+## HTML
+
+```html
+<section class="fluid_styles" aria-labelledby="fluid-title">
+    <h2 id="fluid-title">Operations overview</h2>
+    <p>The region fills the parent without exceeding the shared page measure.</p>
+</section>
+```
+
+## CSS
+
+```css
+.fluid_styles {
+    inline-size: min(100%, 72rem);
+    margin-inline: auto;
+}
+```
+
+## Core Properties
+
+- `inline-size`, `margin-inline` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `inline-size`, `margin-inline` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `fluid_styles` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Containment patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/containment/index.md

@@ -0,0 +1,8 @@
+# Containment
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+- [box](box.md) - Wrap content with predictable internal spacing.
+- [content-limiter](content-limiter.md) - Keep prose width readable inside fluid containers.
+- [clamped-card](clamped-card.md) - Constrain a card to a readable fluid width.
+- [fluid-styles](fluid-styles.md) - Let a region fill available width without exceeding a readable max.