@echelon-foundry/design-system 0.9.0 → 0.10.0-main.257.1

package/CHANGELOG.md

@@ -7,6 +7,42 @@ published as GitHub release tarballs
 and to npm. Earlier releases are described in `docs/CONSUMING-FORMA.md` and
 `HANDOFF.md`.
 
+## 0.10.0
+
+Minor release: layout constraint enforcement (LCE-001, `experiments/LCE-001/REPORT.md`). `@echelon-foundry/forma-workflow` 1.1.0 ships the matching engine.
+
+### Fixed
+- **Pill diagram nodes.** The curve no longer cuts multi-line text. The corner radius is bounded by the node padding, so a short pill stays a stadium.
+- **Ellipse diagram nodes.** Padding is the inscribed bound (14.65% plus clearance).
+- **Diamond diagram nodes.** Padding is now 25% plus clearance; at 20%, the content corners fell outside the diamond.
+- **Marketing card, badge and button.** A brand `--ef-shape-radius` is capped by each component's padding, so a pill or 50% brand radius cannot cut multi-line content.
+- **Marketing button and badge.** They use `overflow-wrap: anywhere`, so a word wider than the row breaks instead of overflowing.
+- **Diagrams inside `.ef-site`.** They keep their own type metrics: `.ef-diagram` pins its type context, and `revert-layer` stops site prose defaults at the diagram.
+- **Wizard step indicators.** They widen into a pill for multi-digit text instead of overflowing the circle.
+- **Connector labels.** They wrap at 12rem.
+
+### Changed
+- **Node sizing in `Forma.Workflow`.** Sizing is shape-aware and uses a script-aware text estimate (`LayoutText`) that reserves WCAG 1.4.12 text-spacing room. Nodes can be taller than before.
+- **Rank gaps.** They fit the widest connector label.
+- **Connector routing.** Connectors avoid unrelated nodes.
+- **Label placement.** Labels are placed without collisions.
+- **Diagram geometry.** It is emitted in rem (1rem = 16 canvas units), so it scales with enlarged text. The exported example documents were regenerated.
+
+### Added
+- **`Forma.Workflow.LayoutGeometry`.** Shape geometry: CSS radius normalisation, inner borders, curved and rotated boundaries.
+- **`Forma.Workflow.LayoutCheck`.** Static layout validation: authored sizes too small for their content, node overlap, connectors through nodes, and label collisions.
+- **`tests/layout` and `npm run test:layout`.** An adversarial F# layout probe with browser measurement, plus 50 regression fixtures, including the three Causa historical diagrams.
+
+## 0.9.1
+
+Patch release: deterministic browser runtime version diagnostics.
+
+### Added
+- The `@echelon-foundry/design-system/runtime` entry point, generated from the package version, registers Forma 0.9.1 in `window.__ECHELON_RUNTIME__` and emits one compact console diagnostic.
+- Cross-browser Playwright coverage for actual build metadata, independent load order, duplicate initialization, conflict diagnostics, and the combined Echelon registry.
+
+Component HTML and CSS remain behavior-free. The diagnostic does not inspect or modify the DOM and adds no production dependency.
+
 ## 0.9.0
 
 Minor release: public semantic color contracts and rendered state validation.

package/contracts/color-contract.json

@@ -1,6 +1,6 @@
 {
   "format": "forma.color-contract/1.0.0",
-  "formaVersion": "0.9.0",
+  "formaVersion": "0.10.0",
   "validationScope": "CSS var() references to --ef-color-* plus reserved internal color-related prefixes; other Forma APIs are governed by their own contracts.",
   "compatibility": {
     "policy": "Validate with the contract shipped by the pinned Forma package version.",

package/contracts/diagram-presentation.json

@@ -81,6 +81,7 @@
     "canvasHeight": "--ef-diagram-canvas-h",
     "portOffset": "--ef-diagram-port-offset",
     "unit": "px",
+    "unitNote": "Any CSS length is accepted. Forma.Workflow emits rem (1rem = 16 canvas px), so diagram geometry scales with enlarged text (LCE-001).",
     "axes": "physical (does not mirror in right-to-left documents)"
   },
   "color": {

package/dist/all.css

@@ -1709,6 +1709,11 @@
     vertical-align: middle;
   }
 
+  /*
+   * The trigger is a circle for a single glyph (the canonical "?"). LCE-001
+   * measured multi-character text ("1.5k") crossing the curve; that is outside
+   * this contract, not a supported variant.
+   */
   .ef-tooltip__trigger {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
@@ -2840,13 +2845,16 @@
     font-size: 0.8125rem;
   }
 
+  /* A circle for one or two digits; longer step text widens it into a pill (LCE-001). */
   .ef-wizard__steps li > span {
     display: grid;
     place-items: center;
-    inline-size: 1.75rem;
+    min-inline-size: 1.75rem;
     block-size: 1.75rem;
+    padding-inline: 0.375rem;
     border: 1px solid var(--ef-color-border-functional, #3a403c);
-    border-radius: 50%;
+    border-radius: 999px;
+    white-space: nowrap;
   }
 
   .ef-wizard__steps [data-state="complete"] > span::after { content: "✓"; position: absolute; }
@@ -5476,7 +5484,25 @@
    * Non-color cues: the visible node kind text, data-ef-shape, data-ef-line and
    * the textual relationship list. Focus never reads authored color.
    */
-  .ef-diagram { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ef-primitive-spacing-4, 1rem); min-inline-size: 0; margin: 0; }
+  /*
+   * The diagram pins its own type context: node geometry is computed for these
+   * metrics, so a host's font, line height or spacing must not change them
+   * (LCE-001: a diagram inside a marketing card inherited its typography and
+   * outgrew its layout). User text-spacing overrides still apply.
+   */
+  .ef-diagram {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ef-primitive-spacing-4, 1rem);
+    min-inline-size: 0;
+    margin: 0;
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.6;
+    letter-spacing: normal;
+    word-spacing: normal;
+  }
   .ef-diagram > figcaption { font-weight: 700; }
   .ef-diagram__viewport {
     max-inline-size: 100%;
@@ -5516,7 +5542,18 @@
     overflow-wrap: anywhere;
   }
   .ef-diagram-node[data-ef-shape="rounded"] { border-radius: var(--ef-primitive-spacing-3, 0.75rem); }
-  .ef-diagram-node[data-ef-shape="pill"] { border-radius: 999px; padding-inline: var(--ef-primitive-spacing-5, 1.5rem); }
+  /*
+   * A pill is a stadium while it is short. A taller (multi-line) pill keeps
+   * the largest corner radius whose curve stays 4px clear of the content box
+   * (LCE-001), instead of letting the curve cut through the text: for inline
+   * padding pi, block padding pb (pb <= pi), border b and clearance c the
+   * bound is pi + pb·(1 + √2) - c·(1 + √2) + b, about 45px with Forma's
+   * spacing tokens. It follows the padding tokens, so it holds at any text size.
+   */
+  .ef-diagram-node[data-ef-shape="pill"] {
+    border-radius: min(999px, calc(var(--ef-primitive-spacing-5, 1.5rem) + var(--ef-primitive-spacing-3, 0.75rem) * 2.414 - 7.66px));
+    padding-inline: var(--ef-primitive-spacing-5, 1.5rem);
+  }
   /*
    * FMD-M2 (forma#88). Ellipse and diamond keep a real border (never a
    * background-only shape) so the boundary survives backgrounds-off print and
@@ -5527,7 +5564,8 @@
     border-radius: 50%;
     border-inline-start-width: 2px;
     border-block-end: 6px solid var(--ef-diagram-node-accent);
-    padding: var(--ef-primitive-spacing-4, 1rem) calc(var(--ef-diagram-w, 12rem) * 0.14);
+    /* The content's corners stay inside the ellipse: 14.65% is (1 - 1/√2) / 2 of the width, plus clearance (LCE-001). */
+    padding: var(--ef-primitive-spacing-4, 1rem) calc(var(--ef-diagram-w, 12rem) * 0.1465 + 0.25rem);
     place-content: center;
     text-align: center;
   }
@@ -5535,12 +5573,14 @@
   .ef-diagram-node[data-ef-shape="diamond"] .ef-diagram-node__meta { grid-template-columns: auto auto; justify-content: center; text-align: start; }
   /*
    * A square box whose ::before is the diamond; the content sits in the
-   * inscribed square. Padding is derived from --ef-diagram-w because percentage
+   * inscribed square, which is half the side, so the padding is a quarter of
+   * the width plus clearance (LCE-001; 0.2 put content corners outside the
+   * diamond). Padding is derived from --ef-diagram-w because percentage
    * padding would resolve against the canvas, not the node.
    */
   .ef-diagram-node[data-ef-shape="diamond"] {
     aspect-ratio: 1;
-    padding: calc(var(--ef-diagram-w, 12rem) * 0.2);
+    padding: calc(var(--ef-diagram-w, 12rem) * 0.25 + 0.25rem);
     border: 0;
     background: transparent;
     place-content: center;
@@ -5580,7 +5620,10 @@
     background: var(--ef-color-surface-primary, #f2efe7);
     color: var(--ef-color-text-primary, #171a18);
     font-size: 0.875rem;
-    white-space: nowrap;
+    /* One line up to 12rem, then wrapping: the layout reserves that box (LCE-001). */
+    inline-size: max-content;
+    max-inline-size: 12rem;
+    overflow-wrap: anywhere;
   }
 
   /* The text equivalent: every relationship in reading order. */
@@ -7786,6 +7829,14 @@
     opacity: var(--ef-site-backdrop-opacity, 1);
   }
 
+  /*
+   * Prose defaults stop at an embedded diagram (LCE-001). Diagram geometry is
+   * computed for the component layer's type metrics; a site heading size or
+   * paragraph margin made nodes outgrow their layout. revert-layer hands these
+   * elements back to the earlier layers.
+   */
+  .ef-site .ef-diagram :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, svg, dl, dt, dd, strong, b) { all: revert-layer; }
+
   .ef-site :where(h1, h2, h3, h4, h5, h6) {
     margin-block: 0;
     color: var(--ef-tone-heading);
@@ -8084,7 +8135,8 @@
     min-block-size: calc(var(--ef-layout-target-min) + var(--ef-space-2));
     padding: var(--ef-space-3) var(--ef-space-5);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
-    border-radius: var(--ef-shape-radius);
+    /* Bounded so a brand radius never reaches the content (LCE-001, see .ef-card). */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-5) + var(--ef-space-3) * 2.414 - 2.414px));
     background: transparent;
     color: var(--ef-tone-text);
     font: inherit;
@@ -8096,7 +8148,10 @@
     /* Never wider than its row and never split mid-word unless one word is
        wider than the row (ULI-L05, L06). */
     max-inline-size: 100%;
-    overflow-wrap: break-word;
+    /* anywhere, not break-word: inside inline-flex only anywhere lets the
+       min-content width shrink, so a word wider than the row breaks instead of
+       overflowing the button (LCE-001). Words still break only when they must. */
+    overflow-wrap: anywhere;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -8141,11 +8196,13 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ef-space-1);
+    max-inline-size: 100%;
     padding: var(--ef-space-1) var(--ef-space-2);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-2) + var(--ef-space-1) * 2.414 - 2.414px));
     color: var(--ef-tone-text);
     font-family: var(--ef-type-family-mono);
+    overflow-wrap: anywhere;
     font-size: var(--ef-type-size-label);
     line-height: var(--ef-type-leading-snug);
     text-decoration: none;
@@ -8191,7 +8248,15 @@
     min-inline-size: 0;
     padding: var(--ef-layout-block-space);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    /*
+     * A brand radius is capped by the padding (LCE-001). Content whose corner
+     * sits at padding p from both edges stays clear of a circular corner of
+     * radius r while r <= (2 + √2)·(p - c) + c for clearance c; with c = 1px
+     * that is p·3.414 - 2.414px. A badge or button uses its own two paddings:
+     * pi + pb·2.414 - 2.414px (pb the smaller). A larger brand radius (a pill
+     * or 50%) would otherwise cut through multi-line content.
+     */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-layout-block-space) * 3.414 - 2.414px));
   }
 
   /* Inside a grid, cards share hairline rules instead of doubling borders. */

package/dist/build-metrics.json

@@ -337,16 +337,17 @@
     "patterns/wizard.html",
     "patterns/work-queue.html",
     "patterns/workspace-shell.html",
+    "runtime.js",
     "skins.css",
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 332985,
+    "all.css": 336382,
     "assessment.css": 36343,
     "brands/echelon.css": 4213,
     "brands/example-harbor.css": 4229,
     "brands/index.json": 335,
-    "components.css": 211421,
+    "components.css": 213356,
     "foundations.css": 15326,
     "icons/add.svg": 216,
     "icons/agent.svg": 354,
@@ -486,7 +487,7 @@
     "icons/phone.svg": 274,
     "icons/print.svg": 318,
     "icons/refresh.svg": 277,
-    "icons/registry.json": 28723,
+    "icons/registry.json": 28724,
     "icons/reply-all.svg": 268,
     "icons/reply.svg": 234,
     "icons/save.svg": 275,
@@ -509,7 +510,7 @@
     "icons/warning.svg": 324,
     "icons/wifi-off.svg": 269,
     "icons/workflow.svg": 345,
-    "marketing.css": 46156,
+    "marketing.css": 47618,
     "patterns/active-filter-summary.html": 532,
     "patterns/alert.html": 384,
     "patterns/allocation.html": 1033,
@@ -678,6 +679,7 @@
     "patterns/wizard.html": 817,
     "patterns/work-queue.html": 971,
     "patterns/workspace-shell.html": 479,
+    "runtime.js": 3030,
     "skins.css": 924,
     "tokens.css": 23735
   }

package/dist/components.css

@@ -799,6 +799,11 @@
     vertical-align: middle;
   }
 
+  /*
+   * The trigger is a circle for a single glyph (the canonical "?"). LCE-001
+   * measured multi-character text ("1.5k") crossing the curve; that is outside
+   * this contract, not a supported variant.
+   */
   .ef-tooltip__trigger {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
@@ -1930,13 +1935,16 @@
     font-size: 0.8125rem;
   }
 
+  /* A circle for one or two digits; longer step text widens it into a pill (LCE-001). */
   .ef-wizard__steps li > span {
     display: grid;
     place-items: center;
-    inline-size: 1.75rem;
+    min-inline-size: 1.75rem;
     block-size: 1.75rem;
+    padding-inline: 0.375rem;
     border: 1px solid var(--ef-color-border-functional, #3a403c);
-    border-radius: 50%;
+    border-radius: 999px;
+    white-space: nowrap;
   }
 
   .ef-wizard__steps [data-state="complete"] > span::after { content: "✓"; position: absolute; }
@@ -4566,7 +4574,25 @@
    * Non-color cues: the visible node kind text, data-ef-shape, data-ef-line and
    * the textual relationship list. Focus never reads authored color.
    */
-  .ef-diagram { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ef-primitive-spacing-4, 1rem); min-inline-size: 0; margin: 0; }
+  /*
+   * The diagram pins its own type context: node geometry is computed for these
+   * metrics, so a host's font, line height or spacing must not change them
+   * (LCE-001: a diagram inside a marketing card inherited its typography and
+   * outgrew its layout). User text-spacing overrides still apply.
+   */
+  .ef-diagram {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ef-primitive-spacing-4, 1rem);
+    min-inline-size: 0;
+    margin: 0;
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.6;
+    letter-spacing: normal;
+    word-spacing: normal;
+  }
   .ef-diagram > figcaption { font-weight: 700; }
   .ef-diagram__viewport {
     max-inline-size: 100%;
@@ -4606,7 +4632,18 @@
     overflow-wrap: anywhere;
   }
   .ef-diagram-node[data-ef-shape="rounded"] { border-radius: var(--ef-primitive-spacing-3, 0.75rem); }
-  .ef-diagram-node[data-ef-shape="pill"] { border-radius: 999px; padding-inline: var(--ef-primitive-spacing-5, 1.5rem); }
+  /*
+   * A pill is a stadium while it is short. A taller (multi-line) pill keeps
+   * the largest corner radius whose curve stays 4px clear of the content box
+   * (LCE-001), instead of letting the curve cut through the text: for inline
+   * padding pi, block padding pb (pb <= pi), border b and clearance c the
+   * bound is pi + pb·(1 + √2) - c·(1 + √2) + b, about 45px with Forma's
+   * spacing tokens. It follows the padding tokens, so it holds at any text size.
+   */
+  .ef-diagram-node[data-ef-shape="pill"] {
+    border-radius: min(999px, calc(var(--ef-primitive-spacing-5, 1.5rem) + var(--ef-primitive-spacing-3, 0.75rem) * 2.414 - 7.66px));
+    padding-inline: var(--ef-primitive-spacing-5, 1.5rem);
+  }
   /*
    * FMD-M2 (forma#88). Ellipse and diamond keep a real border (never a
    * background-only shape) so the boundary survives backgrounds-off print and
@@ -4617,7 +4654,8 @@
     border-radius: 50%;
     border-inline-start-width: 2px;
     border-block-end: 6px solid var(--ef-diagram-node-accent);
-    padding: var(--ef-primitive-spacing-4, 1rem) calc(var(--ef-diagram-w, 12rem) * 0.14);
+    /* The content's corners stay inside the ellipse: 14.65% is (1 - 1/√2) / 2 of the width, plus clearance (LCE-001). */
+    padding: var(--ef-primitive-spacing-4, 1rem) calc(var(--ef-diagram-w, 12rem) * 0.1465 + 0.25rem);
     place-content: center;
     text-align: center;
   }
@@ -4625,12 +4663,14 @@
   .ef-diagram-node[data-ef-shape="diamond"] .ef-diagram-node__meta { grid-template-columns: auto auto; justify-content: center; text-align: start; }
   /*
    * A square box whose ::before is the diamond; the content sits in the
-   * inscribed square. Padding is derived from --ef-diagram-w because percentage
+   * inscribed square, which is half the side, so the padding is a quarter of
+   * the width plus clearance (LCE-001; 0.2 put content corners outside the
+   * diamond). Padding is derived from --ef-diagram-w because percentage
    * padding would resolve against the canvas, not the node.
    */
   .ef-diagram-node[data-ef-shape="diamond"] {
     aspect-ratio: 1;
-    padding: calc(var(--ef-diagram-w, 12rem) * 0.2);
+    padding: calc(var(--ef-diagram-w, 12rem) * 0.25 + 0.25rem);
     border: 0;
     background: transparent;
     place-content: center;
@@ -4670,7 +4710,10 @@
     background: var(--ef-color-surface-primary, #f2efe7);
     color: var(--ef-color-text-primary, #171a18);
     font-size: 0.875rem;
-    white-space: nowrap;
+    /* One line up to 12rem, then wrapping: the layout reserves that box (LCE-001). */
+    inline-size: max-content;
+    max-inline-size: 12rem;
+    overflow-wrap: anywhere;
   }
 
   /* The text equivalent: every relationship in reading order. */

package/dist/icons/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "formaVersion": "0.9.0",
+  "formaVersion": "0.10.0",
   "grid": 24,
   "icons": [
     {

package/dist/marketing/forma-all.css

@@ -1,4 +1,4 @@
-/*! Forma 0.9.0 | forma-all.css | bundle echelon-marketing
+/*! Forma 0.10.0 | forma-all.css | bundle echelon-marketing
     Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -1714,6 +1714,11 @@
     vertical-align: middle;
   }
 
+  /*
+   * The trigger is a circle for a single glyph (the canonical "?"). LCE-001
+   * measured multi-character text ("1.5k") crossing the curve; that is outside
+   * this contract, not a supported variant.
+   */
   .ef-tooltip__trigger {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
@@ -2845,13 +2850,16 @@
     font-size: 0.8125rem;
   }
 
+  /* A circle for one or two digits; longer step text widens it into a pill (LCE-001). */
   .ef-wizard__steps li > span {
     display: grid;
     place-items: center;
-    inline-size: 1.75rem;
+    min-inline-size: 1.75rem;
     block-size: 1.75rem;
+    padding-inline: 0.375rem;
     border: 1px solid var(--ef-color-border-functional, #3a403c);
-    border-radius: 50%;
+    border-radius: 999px;
+    white-space: nowrap;
   }
 
   .ef-wizard__steps [data-state="complete"] > span::after { content: "✓"; position: absolute; }
@@ -5481,7 +5489,25 @@
    * Non-color cues: the visible node kind text, data-ef-shape, data-ef-line and
    * the textual relationship list. Focus never reads authored color.
    */
-  .ef-diagram { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ef-primitive-spacing-4, 1rem); min-inline-size: 0; margin: 0; }
+  /*
+   * The diagram pins its own type context: node geometry is computed for these
+   * metrics, so a host's font, line height or spacing must not change them
+   * (LCE-001: a diagram inside a marketing card inherited its typography and
+   * outgrew its layout). User text-spacing overrides still apply.
+   */
+  .ef-diagram {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ef-primitive-spacing-4, 1rem);
+    min-inline-size: 0;
+    margin: 0;
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.6;
+    letter-spacing: normal;
+    word-spacing: normal;
+  }
   .ef-diagram > figcaption { font-weight: 700; }
   .ef-diagram__viewport {
     max-inline-size: 100%;
@@ -5521,7 +5547,18 @@
     overflow-wrap: anywhere;
   }
   .ef-diagram-node[data-ef-shape="rounded"] { border-radius: var(--ef-primitive-spacing-3, 0.75rem); }
-  .ef-diagram-node[data-ef-shape="pill"] { border-radius: 999px; padding-inline: var(--ef-primitive-spacing-5, 1.5rem); }
+  /*
+   * A pill is a stadium while it is short. A taller (multi-line) pill keeps
+   * the largest corner radius whose curve stays 4px clear of the content box
+   * (LCE-001), instead of letting the curve cut through the text: for inline
+   * padding pi, block padding pb (pb <= pi), border b and clearance c the
+   * bound is pi + pb·(1 + √2) - c·(1 + √2) + b, about 45px with Forma's
+   * spacing tokens. It follows the padding tokens, so it holds at any text size.
+   */
+  .ef-diagram-node[data-ef-shape="pill"] {
+    border-radius: min(999px, calc(var(--ef-primitive-spacing-5, 1.5rem) + var(--ef-primitive-spacing-3, 0.75rem) * 2.414 - 7.66px));
+    padding-inline: var(--ef-primitive-spacing-5, 1.5rem);
+  }
   /*
    * FMD-M2 (forma#88). Ellipse and diamond keep a real border (never a
    * background-only shape) so the boundary survives backgrounds-off print and
@@ -5532,7 +5569,8 @@
     border-radius: 50%;
     border-inline-start-width: 2px;
     border-block-end: 6px solid var(--ef-diagram-node-accent);
-    padding: var(--ef-primitive-spacing-4, 1rem) calc(var(--ef-diagram-w, 12rem) * 0.14);
+    /* The content's corners stay inside the ellipse: 14.65% is (1 - 1/√2) / 2 of the width, plus clearance (LCE-001). */
+    padding: var(--ef-primitive-spacing-4, 1rem) calc(var(--ef-diagram-w, 12rem) * 0.1465 + 0.25rem);
     place-content: center;
     text-align: center;
   }
@@ -5540,12 +5578,14 @@
   .ef-diagram-node[data-ef-shape="diamond"] .ef-diagram-node__meta { grid-template-columns: auto auto; justify-content: center; text-align: start; }
   /*
    * A square box whose ::before is the diamond; the content sits in the
-   * inscribed square. Padding is derived from --ef-diagram-w because percentage
+   * inscribed square, which is half the side, so the padding is a quarter of
+   * the width plus clearance (LCE-001; 0.2 put content corners outside the
+   * diamond). Padding is derived from --ef-diagram-w because percentage
    * padding would resolve against the canvas, not the node.
    */
   .ef-diagram-node[data-ef-shape="diamond"] {
     aspect-ratio: 1;
-    padding: calc(var(--ef-diagram-w, 12rem) * 0.2);
+    padding: calc(var(--ef-diagram-w, 12rem) * 0.25 + 0.25rem);
     border: 0;
     background: transparent;
     place-content: center;
@@ -5585,7 +5625,10 @@
     background: var(--ef-color-surface-primary, #f2efe7);
     color: var(--ef-color-text-primary, #171a18);
     font-size: 0.875rem;
-    white-space: nowrap;
+    /* One line up to 12rem, then wrapping: the layout reserves that box (LCE-001). */
+    inline-size: max-content;
+    max-inline-size: 12rem;
+    overflow-wrap: anywhere;
   }
 
   /* The text equivalent: every relationship in reading order. */
@@ -7791,6 +7834,14 @@
     opacity: var(--ef-site-backdrop-opacity, 1);
   }
 
+  /*
+   * Prose defaults stop at an embedded diagram (LCE-001). Diagram geometry is
+   * computed for the component layer's type metrics; a site heading size or
+   * paragraph margin made nodes outgrow their layout. revert-layer hands these
+   * elements back to the earlier layers.
+   */
+  .ef-site .ef-diagram :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, svg, dl, dt, dd, strong, b) { all: revert-layer; }
+
   .ef-site :where(h1, h2, h3, h4, h5, h6) {
     margin-block: 0;
     color: var(--ef-tone-heading);
@@ -8089,7 +8140,8 @@
     min-block-size: calc(var(--ef-layout-target-min) + var(--ef-space-2));
     padding: var(--ef-space-3) var(--ef-space-5);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
-    border-radius: var(--ef-shape-radius);
+    /* Bounded so a brand radius never reaches the content (LCE-001, see .ef-card). */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-5) + var(--ef-space-3) * 2.414 - 2.414px));
     background: transparent;
     color: var(--ef-tone-text);
     font: inherit;
@@ -8101,7 +8153,10 @@
     /* Never wider than its row and never split mid-word unless one word is
        wider than the row (ULI-L05, L06). */
     max-inline-size: 100%;
-    overflow-wrap: break-word;
+    /* anywhere, not break-word: inside inline-flex only anywhere lets the
+       min-content width shrink, so a word wider than the row breaks instead of
+       overflowing the button (LCE-001). Words still break only when they must. */
+    overflow-wrap: anywhere;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -8146,11 +8201,13 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ef-space-1);
+    max-inline-size: 100%;
     padding: var(--ef-space-1) var(--ef-space-2);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-2) + var(--ef-space-1) * 2.414 - 2.414px));
     color: var(--ef-tone-text);
     font-family: var(--ef-type-family-mono);
+    overflow-wrap: anywhere;
     font-size: var(--ef-type-size-label);
     line-height: var(--ef-type-leading-snug);
     text-decoration: none;
@@ -8196,7 +8253,15 @@
     min-inline-size: 0;
     padding: var(--ef-layout-block-space);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    /*
+     * A brand radius is capped by the padding (LCE-001). Content whose corner
+     * sits at padding p from both edges stays clear of a circular corner of
+     * radius r while r <= (2 + √2)·(p - c) + c for clearance c; with c = 1px
+     * that is p·3.414 - 2.414px. A badge or button uses its own two paddings:
+     * pi + pb·2.414 - 2.414px (pb the smaller). A larger brand radius (a pill
+     * or 50%) would otherwise cut through multi-line content.
+     */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-layout-block-space) * 3.414 - 2.414px));
   }
 
   /* Inside a grid, cards share hairline rules instead of doubling borders. */

package/dist/marketing/forma-echelon-marketing.css

@@ -1,4 +1,4 @@
-/*! Forma 0.9.0 | forma-echelon-marketing.css | bundle echelon-marketing
+/*! Forma 0.10.0 | forma-echelon-marketing.css | bundle echelon-marketing
     Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -1137,6 +1137,14 @@
     opacity: var(--ef-site-backdrop-opacity, 1);
   }
 
+  /*
+   * Prose defaults stop at an embedded diagram (LCE-001). Diagram geometry is
+   * computed for the component layer's type metrics; a site heading size or
+   * paragraph margin made nodes outgrow their layout. revert-layer hands these
+   * elements back to the earlier layers.
+   */
+  .ef-site .ef-diagram :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, svg, dl, dt, dd, strong, b) { all: revert-layer; }
+
   .ef-site :where(h1, h2, h3, h4, h5, h6) {
     margin-block: 0;
     color: var(--ef-tone-heading);
@@ -1436,7 +1444,8 @@
     min-block-size: calc(var(--ef-layout-target-min) + var(--ef-space-2));
     padding: var(--ef-space-3) var(--ef-space-5);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
-    border-radius: var(--ef-shape-radius);
+    /* Bounded so a brand radius never reaches the content (LCE-001, see .ef-card). */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-5) + var(--ef-space-3) * 2.414 - 2.414px));
     background: transparent;
     color: var(--ef-tone-text);
     font: inherit;
@@ -1448,7 +1457,10 @@
     /* Never wider than its row and never split mid-word unless one word is
        wider than the row (ULI-L05, L06). */
     max-inline-size: 100%;
-    overflow-wrap: break-word;
+    /* anywhere, not break-word: inside inline-flex only anywhere lets the
+       min-content width shrink, so a word wider than the row breaks instead of
+       overflowing the button (LCE-001). Words still break only when they must. */
+    overflow-wrap: anywhere;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -1493,11 +1505,13 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ef-space-1);
+    max-inline-size: 100%;
     padding: var(--ef-space-1) var(--ef-space-2);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-2) + var(--ef-space-1) * 2.414 - 2.414px));
     color: var(--ef-tone-text);
     font-family: var(--ef-type-family-mono);
+    overflow-wrap: anywhere;
     font-size: var(--ef-type-size-label);
     line-height: var(--ef-type-leading-snug);
     text-decoration: none;
@@ -1543,7 +1557,15 @@
     min-inline-size: 0;
     padding: var(--ef-layout-block-space);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    /*
+     * A brand radius is capped by the padding (LCE-001). Content whose corner
+     * sits at padding p from both edges stays clear of a circular corner of
+     * radius r while r <= (2 + √2)·(p - c) + c for clearance c; with c = 1px
+     * that is p·3.414 - 2.414px. A badge or button uses its own two paddings:
+     * pi + pb·2.414 - 2.414px (pb the smaller). A larger brand radius (a pill
+     * or 50%) would otherwise cut through multi-line content.
+     */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-layout-block-space) * 3.414 - 2.414px));
   }
 
   /* Inside a grid, cards share hairline rules instead of doubling borders. */

package/dist/marketing/forma-marketing-theme-echelon.css

@@ -1,4 +1,4 @@
-/*! Forma 0.9.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
+/*! Forma 0.10.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
     Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 

package/dist/marketing/forma-marketing.css

@@ -1,4 +1,4 @@
-/*! Forma 0.9.0 | forma-marketing.css | bundle echelon-marketing
+/*! Forma 0.10.0 | forma-marketing.css | bundle echelon-marketing
     Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -1136,6 +1136,14 @@
     opacity: var(--ef-site-backdrop-opacity, 1);
   }
 
+  /*
+   * Prose defaults stop at an embedded diagram (LCE-001). Diagram geometry is
+   * computed for the component layer's type metrics; a site heading size or
+   * paragraph margin made nodes outgrow their layout. revert-layer hands these
+   * elements back to the earlier layers.
+   */
+  .ef-site .ef-diagram :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, svg, dl, dt, dd, strong, b) { all: revert-layer; }
+
   .ef-site :where(h1, h2, h3, h4, h5, h6) {
     margin-block: 0;
     color: var(--ef-tone-heading);
@@ -1435,7 +1443,8 @@
     min-block-size: calc(var(--ef-layout-target-min) + var(--ef-space-2));
     padding: var(--ef-space-3) var(--ef-space-5);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
-    border-radius: var(--ef-shape-radius);
+    /* Bounded so a brand radius never reaches the content (LCE-001, see .ef-card). */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-5) + var(--ef-space-3) * 2.414 - 2.414px));
     background: transparent;
     color: var(--ef-tone-text);
     font: inherit;
@@ -1447,7 +1456,10 @@
     /* Never wider than its row and never split mid-word unless one word is
        wider than the row (ULI-L05, L06). */
     max-inline-size: 100%;
-    overflow-wrap: break-word;
+    /* anywhere, not break-word: inside inline-flex only anywhere lets the
+       min-content width shrink, so a word wider than the row breaks instead of
+       overflowing the button (LCE-001). Words still break only when they must. */
+    overflow-wrap: anywhere;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -1492,11 +1504,13 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ef-space-1);
+    max-inline-size: 100%;
     padding: var(--ef-space-1) var(--ef-space-2);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-2) + var(--ef-space-1) * 2.414 - 2.414px));
     color: var(--ef-tone-text);
     font-family: var(--ef-type-family-mono);
+    overflow-wrap: anywhere;
     font-size: var(--ef-type-size-label);
     line-height: var(--ef-type-leading-snug);
     text-decoration: none;
@@ -1542,7 +1556,15 @@
     min-inline-size: 0;
     padding: var(--ef-layout-block-space);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    /*
+     * A brand radius is capped by the padding (LCE-001). Content whose corner
+     * sits at padding p from both edges stays clear of a circular corner of
+     * radius r while r <= (2 + √2)·(p - c) + c for clearance c; with c = 1px
+     * that is p·3.414 - 2.414px. A badge or button uses its own two paddings:
+     * pi + pb·2.414 - 2.414px (pb the smaller). A larger brand radius (a pill
+     * or 50%) would otherwise cut through multi-line content.
+     */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-layout-block-space) * 3.414 - 2.414px));
   }
 
   /* Inside a grid, cards share hairline rules instead of doubling borders. */

package/dist/marketing/forma-marketing.manifest.json

@@ -1,15 +1,15 @@
 {
   "schemaVersion": 1,
-  "forma": "0.9.0",
+  "forma": "0.10.0",
   "bundle": "echelon-marketing",
   "description": "Forma presentation artifacts for Echelon marketing sites. Every artifact is a single self-contained CSS file with no imports or relative URLs.",
-  "releaseTag": "v0.9.0",
+  "releaseTag": "v0.10.0",
   "artifacts": [
     {
       "file": "forma-marketing.css",
       "description": "Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.",
-      "bytes": 85780,
-      "sha256": "cd2e2d259bb5d88de91c00ce7a63d0afa2eb1ca67dbcc7c100b10bffd1bee89e",
+      "bytes": 87243,
+      "sha256": "d8a900aecd8aa4a72cbda731d3bbcfadbf872bc8aed1a8ef74f5ef3169af4cc6",
       "sources": [
         "dist/tokens.css",
         "src/marketing/roles.css",
@@ -22,8 +22,8 @@
     {
       "file": "forma-marketing-theme-echelon.css",
       "description": "Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.",
-      "bytes": 6295,
-      "sha256": "e9e6fa2f3ab1d9950145639f1346441d636638cd028e55c730aee0231de14271",
+      "bytes": 6296,
+      "sha256": "e3e05cf66b87ac6be686896c353ab87f47ad1be589c1fc2895238d1bd987d9e6",
       "sources": [
         "build/marketing/echelon-marketing.tokens.css",
         "themes/echelon/marketing.css"
@@ -32,8 +32,8 @@
     {
       "file": "forma-echelon-marketing.css",
       "description": "Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.",
-      "bytes": 91920,
-      "sha256": "095a7df7bf669fbc640e064339507695de92d9fc29154ddc7ec74b290a6aa967",
+      "bytes": 93383,
+      "sha256": "837ddc667b3eccbc6a0512fe767708212a2aeffe18f9c2a27cbedad9be2937f3",
       "sources": [
         "artifact:forma-marketing.css",
         "artifact:forma-marketing-theme-echelon.css"
@@ -42,8 +42,8 @@
     {
       "file": "forma-all.css",
       "description": "Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.",
-      "bytes": 333347,
-      "sha256": "9ef1cb63edae74c194936fa623604c18e42a765565346aa50e1081c86f64a96d",
+      "bytes": 336745,
+      "sha256": "6666ea17b441934dd66807f9aefae86213ca228c92eed8da17faed2b2d816b18",
       "sources": [
         "dist/all.css"
       ]

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-cd2e2d259bb5d88de91c00ce7a63d0afa2eb1ca67dbcc7c100b10bffd1bee89e  forma-marketing.css
-e9e6fa2f3ab1d9950145639f1346441d636638cd028e55c730aee0231de14271  forma-marketing-theme-echelon.css
-095a7df7bf669fbc640e064339507695de92d9fc29154ddc7ec74b290a6aa967  forma-echelon-marketing.css
-9ef1cb63edae74c194936fa623604c18e42a765565346aa50e1081c86f64a96d  forma-all.css
+d8a900aecd8aa4a72cbda731d3bbcfadbf872bc8aed1a8ef74f5ef3169af4cc6  forma-marketing.css
+e3e05cf66b87ac6be686896c353ab87f47ad1be589c1fc2895238d1bd987d9e6  forma-marketing-theme-echelon.css
+837ddc667b3eccbc6a0512fe767708212a2aeffe18f9c2a27cbedad9be2937f3  forma-echelon-marketing.css
+6666ea17b441934dd66807f9aefae86213ca228c92eed8da17faed2b2d816b18  forma-all.css

package/dist/marketing.css

@@ -218,6 +218,14 @@
     opacity: var(--ef-site-backdrop-opacity, 1);
   }
 
+  /*
+   * Prose defaults stop at an embedded diagram (LCE-001). Diagram geometry is
+   * computed for the component layer's type metrics; a site heading size or
+   * paragraph margin made nodes outgrow their layout. revert-layer hands these
+   * elements back to the earlier layers.
+   */
+  .ef-site .ef-diagram :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, svg, dl, dt, dd, strong, b) { all: revert-layer; }
+
   .ef-site :where(h1, h2, h3, h4, h5, h6) {
     margin-block: 0;
     color: var(--ef-tone-heading);
@@ -516,7 +524,8 @@
     min-block-size: calc(var(--ef-layout-target-min) + var(--ef-space-2));
     padding: var(--ef-space-3) var(--ef-space-5);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
-    border-radius: var(--ef-shape-radius);
+    /* Bounded so a brand radius never reaches the content (LCE-001, see .ef-card). */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-5) + var(--ef-space-3) * 2.414 - 2.414px));
     background: transparent;
     color: var(--ef-tone-text);
     font: inherit;
@@ -528,7 +537,10 @@
     /* Never wider than its row and never split mid-word unless one word is
        wider than the row (ULI-L05, L06). */
     max-inline-size: 100%;
-    overflow-wrap: break-word;
+    /* anywhere, not break-word: inside inline-flex only anywhere lets the
+       min-content width shrink, so a word wider than the row breaks instead of
+       overflowing the button (LCE-001). Words still break only when they must. */
+    overflow-wrap: anywhere;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -573,11 +585,13 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ef-space-1);
+    max-inline-size: 100%;
     padding: var(--ef-space-1) var(--ef-space-2);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-space-2) + var(--ef-space-1) * 2.414 - 2.414px));
     color: var(--ef-tone-text);
     font-family: var(--ef-type-family-mono);
+    overflow-wrap: anywhere;
     font-size: var(--ef-type-size-label);
     line-height: var(--ef-type-leading-snug);
     text-decoration: none;
@@ -623,7 +637,15 @@
     min-inline-size: 0;
     padding: var(--ef-layout-block-space);
     border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
-    border-radius: var(--ef-shape-radius);
+    /*
+     * A brand radius is capped by the padding (LCE-001). Content whose corner
+     * sits at padding p from both edges stays clear of a circular corner of
+     * radius r while r <= (2 + √2)·(p - c) + c for clearance c; with c = 1px
+     * that is p·3.414 - 2.414px. A badge or button uses its own two paddings:
+     * pi + pb·2.414 - 2.414px (pb the smaller). A larger brand radius (a pill
+     * or 50%) would otherwise cut through multi-line content.
+     */
+    border-radius: min(var(--ef-shape-radius), calc(var(--ef-layout-block-space) * 3.414 - 2.414px));
   }
 
   /* Inside a grid, cards share hairline rules instead of doubling borders. */

package/dist/runtime.js

@@ -0,0 +1,57 @@
+// Generated by tools/build-runtime.mjs from package.json. Do not edit.
+const SCHEMA_VERSION = 1;
+const REGISTRY_KEY = "__ECHELON_RUNTIME__";
+const REGISTER_KEY = "__ECHELON_REGISTER_RUNTIME__";
+
+const libraryLabel = name => name.split("-").map(part => part ? part[0].toUpperCase() + part.slice(1) : part).join(" ");
+const diagnostic = (target, method, message) => target.console?.[method]?.(message);
+
+export function installEchelonRuntimeRegistrar(target = globalThis) {
+  const installed = target[REGISTER_KEY];
+  if (typeof installed === "function" && installed.echelonRuntimeSchemaVersion === SCHEMA_VERSION) return installed;
+  if (installed !== undefined) {
+    diagnostic(target, "warn", "Echelon Runtime registrar conflict: an incompatible global registrar is already installed.");
+    return undefined;
+  }
+
+  let registry = target[REGISTRY_KEY];
+  if (registry === undefined) {
+    registry = { schemaVersion: SCHEMA_VERSION, libraries: {} };
+    target[REGISTRY_KEY] = registry;
+  } else if (registry === null || typeof registry !== "object" || registry.schemaVersion !== SCHEMA_VERSION || registry.libraries === null || typeof registry.libraries !== "object") {
+    diagnostic(target, "warn", "Echelon Runtime registry conflict: schemaVersion 1 is required; the existing registry was left unchanged.");
+    return undefined;
+  }
+
+  const register = (name, metadata) => {
+    if (typeof name !== "string" || !/^[a-z][a-z0-9-]*$/.test(name)) throw new TypeError("Echelon runtime library names must be lowercase identifiers.");
+    if (metadata === null || typeof metadata !== "object" || typeof metadata.version !== "string" || metadata.version.length === 0) throw new TypeError("Echelon runtime metadata requires a version string.");
+
+    const candidate = { version: metadata.version };
+    if (typeof metadata.commit === "string" && metadata.commit.length > 0) candidate.commit = metadata.commit;
+    if (typeof metadata.buildTime === "string" && metadata.buildTime.length > 0) candidate.buildTime = metadata.buildTime;
+
+    const current = registry.libraries[name];
+    if (current !== undefined) {
+      if (current.version === candidate.version) return current;
+      diagnostic(target, "warn", `Echelon Runtime conflict: ${libraryLabel(name)} v${current.version} is already registered; ignored v${candidate.version}.`);
+      return current;
+    }
+
+    registry.libraries[name] = candidate;
+    diagnostic(target, "info", `Echelon Runtime · ${libraryLabel(name)} v${candidate.version}`);
+    return candidate;
+  };
+
+  Object.defineProperty(register, "echelonRuntimeSchemaVersion", { value: SCHEMA_VERSION });
+  Object.defineProperty(target, REGISTER_KEY, { value: register, configurable: true });
+  return register;
+}
+
+export function registerEchelonRuntime(name, metadata, target = globalThis) {
+  return installEchelonRuntimeRegistrar(target)?.(name, metadata);
+}
+
+export const FORMA_VERSION = "0.10.0";
+
+if (typeof window !== "undefined") registerEchelonRuntime("forma", { version: FORMA_VERSION }, window);

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@echelon-foundry/design-system",
-  "version": "0.9.0",
+  "version": "0.10.0-main.257.1",
   "private": false,
   "type": "module",
-  "description": "Zero-runtime HTML and CSS design system for Echelon Foundry applications.",
+  "description": "Zero-component-runtime HTML and CSS design system for Echelon Foundry applications.",
   "sideEffects": [
+    "./dist/runtime.js",
     "./dist/*.css",
     "./dist/brands/*.css",
     "./dist/marketing.css",
     "./dist/marketing/*.css"
   ],
   "exports": {
+    "./runtime": "./dist/runtime.js",
     "./tokens.css": "./dist/tokens.css",
     "./foundations.css": "./dist/foundations.css",
     "./components.css": "./dist/components.css",
@@ -67,7 +69,8 @@
     "clean": "node tools/clean.mjs",
     "tokens:build": "dotnet run --project tools/TokenCompiler/TokenCompiler.fsproj -- tokens/echelon.tokens.json dist/tokens.css",
     "assets:build": "node tools/build-assets.mjs",
-    "build": "npm run clean && npm run tokens:build && npm run brands:build && npm run color:build && npm run marketing:theme && npm run assets:build && npm run marketing:build && npm run example:install",
+    "build": "npm run clean && npm run tokens:build && npm run brands:build && npm run color:build && npm run marketing:theme && npm run runtime:build && npm run assets:build && npm run marketing:build && npm run example:install",
+    "runtime:build": "node tools/build-runtime.mjs",
     "test:tokens": "node --test tests/token-compiler.test.mjs",
     "test:browser": "playwright test",
     "test:a11y": "playwright test tests/browser/accessibility.spec.mjs",
@@ -99,6 +102,8 @@
     "catalog:check": "node tools/catalog/validate.mjs && node tools/catalog/inventory.mjs --check",
     "catalog:inventory": "node tools/catalog/inventory.mjs",
     "workflow:test": "dotnet run --project tests/workflow/Forma.Workflow.Tests -c Release",
+    "layout:probe": "dotnet run --project tests/layout/Forma.Layout.Probe -c Release --",
+    "test:layout": "dotnet run --project tests/layout/Forma.Layout.Probe -c Release -- regress",
     "workflow:build": "node tools/build-workflow-package.mjs",
     "workflow:validate": "dotnet run --project src/workflow/Forma.Workflow.Cli -c Release -- validate examples/workflows/forma/workflows/*.forma-workflow.json",
     "design:validate": "node tools/design-contract/cli.mjs validate examples/design/valid/*.forma-design.json",
@@ -127,7 +132,7 @@
   "homepage": "https://forma.echelonfoundry.com/",
   "keywords": [
     "design-system",
-    "zero-runtime",
+    "zero-component-runtime",
     "marketing-presentation",
     "accessibility",
     "workflow",