@echelon-foundry/design-system 0.3.0-main.219.1 → 0.4.0-main.220.2

package/README.md

@@ -123,6 +123,26 @@ Workflow/diagram items may also carry authored fill, border/stroke, accent, conn
 
 See `requirements/OBJECT-METADATA-AND-DIAGRAM-PRESENTATION.md`.
 
+## Portable workflows
+
+Forma owns the portable workflow standard (`.forma-workflow.json`): a versioned
+JSON Schema, independent validation, deterministic layout, static HTML
+rendering, and the embeddable `<forma-workflow>` renderer and editor. None of it
+needs Forma Studio.
+
+| Need | Use |
+|---|---|
+| The format | [`docs/workflow/FORMAT.md`](docs/workflow/FORMAT.md), schema [`schemas/workflow/1.0/forma-workflow.schema.json`](schemas/workflow/1.0/forma-workflow.schema.json) |
+| Validate in CI or from an agent | `forma-workflow validate --json` ([`docs/workflow/VALIDATION.md`](docs/workflow/VALIDATION.md)) |
+| Static or complete-document HTML | `forma-workflow render` ([`docs/workflow/RENDERING.md`](docs/workflow/RENDERING.md)) |
+| Embed a viewer or editor | `@echelon-foundry/forma-workflow` ([`docs/workflow/EMBEDDING.md`](docs/workflow/EMBEDDING.md), [`examples/workflow-embedding`](examples/workflow-embedding)) |
+| Produce workflows elsewhere | [`docs/workflow/EXTERNAL-PRODUCERS.md`](docs/workflow/EXTERNAL-PRODUCERS.md) |
+| Reference fixtures | [`examples/workflows/`](examples/workflows/) |
+
+The design-system package stays zero-runtime. The editor ships separately; see
+[ADR-0006](docs/decisions/ADR-0006-portable-workflow-capability.md). Run
+`npm run workflow:check` for the full workflow test suite.
+
 ## Figma
 
 Forma treats Figma as a design and developer-consumption surface, not as a

package/contracts/diagram-presentation.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": "1.0.0",
   "contract": "forma.diagram-presentation",
-  "contractVersion": "2.0.0",
+  "contractVersion": "2.1.0",
   "stylesheet": "components.css",
   "decision": "docs/decisions/ADR-0004-diagram-presentation-boundary.md",
   "requirements": "requirements/OBJECT-METADATA-AND-DIAGRAM-PRESENTATION.md",
   "ownership": {
-    "forma": ["surface", "node", "group", "connector", "connectorLabel", "marker", "relations", "legend", "valueState"],
-    "consumer": ["geometry", "routing", "semanticKind", "metadataValues", "metadataVisibility", "namedStyles", "paletteSlots", "metadataMappings", "appearancePrecedence", "membership"],
+    "forma": ["surface", "node", "group", "connector", "connectorLabel", "marker", "relations", "legend", "valueState", "port", "status", "description", "membership"],
+    "consumer": ["geometry", "routing", "semanticKind", "metadataValues", "metadataVisibility", "namedStyles", "paletteSlots", "metadataMappings", "appearancePrecedence", "membership", "portPlacement", "statusValues"],
     "editorOnly": ["selection", "handles", "guides", "routePreview", "marquee", "dragTargets", "connectionTargets", "minimap", "validationOverlay"],
     "editorOnlyRule": "Editor-only adorners never use ef-diagram* classes and never appear in exported output."
   },
@@ -16,7 +16,10 @@
     "node": {
       "element": "article",
       "class": "ef-diagram-node",
-      "regions": { "kind": "ef-diagram-node__kind", "label": "ef-diagram-node__label", "metadata": "ef-diagram-node__meta" },
+      "regions": { "kind": "ef-diagram-node__kind", "label": "ef-diagram-node__label", "description": "ef-diagram-node__description", "metadata": "ef-diagram-node__meta" },
+      "statusAttribute": "data-ef-status",
+      "statusCues": { "active": "outer ring", "blocked": "double border", "failed": "double border", "skipped": "dashed border", "cancelled": "dashed border", "pending": "dotted border", "waiting": "dotted border" },
+      "statusRule": "Status is text in the node metadata (dt Status, dd label). data-ef-status selects only a secondary non-colour cue; other values render no cue.",
       "shapeAttribute": "data-ef-shape",
       "shapes": ["rectangle", "rounded", "pill", "ellipse", "diamond"],
       "defaultShape": "rectangle",
@@ -47,6 +50,8 @@
       "markers": { "class": "ef-diagram-marker", "kinds": ["arrow"], "attachment": ["marker-start", "marker-end"] },
       "appearance": ["connectorStroke", "connectorWidth"]
     },
+    "port": { "element": "span", "class": "ef-diagram-port", "parent": "ef-diagram-node", "label": "ef-diagram-port__label", "sideAttribute": "data-ef-side", "sides": ["top", "right", "bottom", "left"], "directionAttribute": "data-ef-direction", "directions": ["in", "out", "inout"], "directionCue": "in: square, out: circle, inout: diamond", "offset": "--ef-diagram-port-offset", "rule": "A port is a marker. The relationship list names the port in text when a connector uses it." },
+    "membership": { "element": "dl", "class": "ef-diagram__membership", "rule": "One dt per group, lane or phase; its dd lists members in reading order. Canvas overlap never implies membership." },
     "connectorLabel": { "element": "span", "class": "ef-diagram-connector__label", "geometry": ["x", "y"] },
     "relations": { "element": "ol", "class": "ef-diagram__relations", "rule": "One text item per connector, in reading order." },
     "legend": { "element": "dl", "class": "ef-diagram-legend", "swatch": "ef-diagram-legend__swatch", "appearance": ["fill", "stroke", "accent"] },
@@ -74,6 +79,7 @@
     "h": "--ef-diagram-h",
     "canvasWidth": "--ef-diagram-canvas-w",
     "canvasHeight": "--ef-diagram-canvas-h",
+    "portOffset": "--ef-diagram-port-offset",
     "unit": "px",
     "axes": "physical (does not mirror in right-to-left documents)"
   },

package/contracts/workflow-capabilities.json

@@ -0,0 +1,25 @@
+{
+  "schemaVersion": "1.0.0",
+  "contract": "forma.workflow-capabilities",
+  "contractVersion": "1.0.0",
+  "formatVersions": ["1.0.0"],
+  "formaVersion": "0.4.0",
+  "decision": "docs/decisions/ADR-0006-portable-workflow-capability.md",
+  "requirements": "requirements/PORTABLE-WORKFLOW-INTERCHANGE.md",
+  "rule": "A workflow targeting a Forma version earlier than a capability's 'since' version, or requiring a capability this list does not contain, is valid format using unavailable Forma capabilities.",
+  "capabilities": {
+    "workflow.core": { "since": "0.4.0", "description": "Nodes, edges, labels, kinds, descriptions and the accessible relationship list." },
+    "workflow.shapes": { "since": "0.4.0", "description": "Node variants rectangle, rounded, pill, ellipse and diamond (diagram contract 2.0.0)." },
+    "workflow.color": { "since": "0.4.0", "description": "Authored fill, stroke, accent, foreground and connector stroke as tokens or literals." },
+    "workflow.palette": { "since": "0.4.0", "description": "Named palette slots referenced as palette:<slot>." },
+    "workflow.groups": { "since": "0.4.0", "description": "Groups and containers with explicit membership." },
+    "workflow.swimlanes": { "since": "0.4.0", "description": "Swimlanes and phases." },
+    "workflow.ports": { "since": "0.4.0", "description": "Named connection points on node sides (diagram contract 2.1.0)." },
+    "workflow.status": { "since": "0.4.0", "description": "Semantic status shown as text on nodes, edges and groups (diagram contract 2.1.0)." },
+    "workflow.references": { "since": "0.4.0", "description": "Typed domain references displayed as text or links." },
+    "workflow.interactions": { "since": "0.4.0", "description": "Declarative interaction intents reported to the host." },
+    "workflow.legend": { "since": "0.4.0", "description": "A key explaining authored colour and line meaning." },
+    "workflow.layout": { "since": "0.4.0", "description": "Authored geometry, waypoints and the deterministic default layout." },
+    "workflow.embed": { "since": "0.4.0", "description": "The @echelon-foundry/forma-workflow embeddable renderer and editor." }
+  }
+}

package/dist/all.css

@@ -642,6 +642,8 @@
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
+  /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
@@ -774,6 +776,8 @@
     font-size: 0.8125rem;
     line-height: 1.4;
   }
+  /* On a secondary surface, text-secondary falls below 4.5:1; use the surface's own text colour (forma#93). */
+  .ef-surface .ef-field__description { color: var(--ef-color-text-on-secondary-surface, #3a403c); }
 
   /* Motion model vocabulary --------------------------------------------- */
   /*
@@ -5294,6 +5298,61 @@
     .ef-diagram { break-inside: avoid; }
   }
 
+  /*
+   * Diagram contract 2.1.0 (workflow capability, forma#93; ADR-0006): ports,
+   * node status, node description and the membership list. Presentation only.
+   * Ports are connection-point markers placed by the consumer on a node side
+   * (data-ef-side) at an offset along it (--ef-diagram-port-offset, a
+   * percentage). Status is text in the node's metadata; data-ef-status only
+   * selects a secondary, non-colour cue (outline, border style).
+   */
+  .ef-diagram-node__description { font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; }
+  .ef-diagram-port {
+    position: absolute;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    box-sizing: border-box;
+    border: 2px solid var(--ef-diagram-node-stroke, var(--ef-color-border-functional, #3a403c));
+    border-radius: 50%;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    transform: translate(-50%, -50%);
+  }
+  .ef-diagram-port[data-ef-side="top"] { left: var(--ef-diagram-port-offset, 50%); top: 0; }
+  .ef-diagram-port[data-ef-side="bottom"] { left: var(--ef-diagram-port-offset, 50%); top: 100%; }
+  .ef-diagram-port[data-ef-side="left"] { left: 0; top: var(--ef-diagram-port-offset, 50%); }
+  .ef-diagram-port[data-ef-side="right"] { left: 100%; top: var(--ef-diagram-port-offset, 50%); }
+  .ef-diagram-port[data-ef-direction="in"] { border-radius: 0; }
+  .ef-diagram-port[data-ef-direction="inout"] { border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
+  .ef-diagram-port__label {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    padding: 0 0.125rem;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 0.6875rem;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+  .ef-diagram-node[data-ef-status="active"] { box-shadow: 0 0 0 3px var(--ef-color-surface-primary, #f2efe7), 0 0 0 6px var(--ef-diagram-node-stroke); }
+  .ef-diagram-node[data-ef-status="blocked"],
+  .ef-diagram-node[data-ef-status="failed"] { border-style: double; border-width: 4px; border-inline-start-width: 6px; }
+  .ef-diagram-node[data-ef-status="skipped"],
+  .ef-diagram-node[data-ef-status="cancelled"] { border-style: dashed; border-inline-start-style: solid; }
+  .ef-diagram-node[data-ef-status="pending"],
+  .ef-diagram-node[data-ef-status="waiting"] { border-style: dotted; border-inline-start-style: solid; }
+  .ef-diagram__membership { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--ef-primitive-spacing-1, 0.25rem) var(--ef-primitive-spacing-3, 0.75rem); margin: 0; }
+  .ef-diagram__membership :where(dt) { font-weight: 700; overflow-wrap: anywhere; }
+  .ef-diagram__membership :where(dd) { margin: 0; overflow-wrap: anywhere; }
+  @media (max-width: 30rem) {
+    .ef-diagram__membership { grid-template-columns: minmax(0, 1fr); }
+  }
+  @media (forced-colors: active) {
+    .ef-diagram-port, .ef-diagram-port__label { border-color: CanvasText; background: Canvas; color: CanvasText; }
+    .ef-diagram-node[data-ef-status="active"] { box-shadow: none; outline: 3px solid CanvasText; outline-offset: 3px; }
+  }
+
   /* BEGIN generated: character-grid coordinates (tools/character-grid-css.mjs) */
   .ef-character-grid[data-ef-rows="1"] { --ef-grid-rows: 1; }
   .ef-character-grid[data-ef-rows="2"] { --ef-grid-rows: 2; }

package/dist/build-metrics.json

@@ -177,13 +177,13 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 306099,
+    "all.css": 309758,
     "assessment.css": 34482,
     "brands/echelon.css": 3621,
     "brands/example-harbor.css": 3637,
     "brands/index.json": 335,
-    "components.css": 194978,
-    "foundations.css": 10639,
+    "components.css": 198383,
+    "foundations.css": 10893,
     "marketing.css": 45073,
     "patterns/active-filter-summary.html": 532,
     "patterns/alert.html": 384,

package/dist/components.css

@@ -35,6 +35,8 @@
     font-size: 0.8125rem;
     line-height: 1.4;
   }
+  /* On a secondary surface, text-secondary falls below 4.5:1; use the surface's own text colour (forma#93). */
+  .ef-surface .ef-field__description { color: var(--ef-color-text-on-secondary-surface, #3a403c); }
 
   /* Motion model vocabulary --------------------------------------------- */
   /*
@@ -4555,6 +4557,61 @@
     .ef-diagram { break-inside: avoid; }
   }
 
+  /*
+   * Diagram contract 2.1.0 (workflow capability, forma#93; ADR-0006): ports,
+   * node status, node description and the membership list. Presentation only.
+   * Ports are connection-point markers placed by the consumer on a node side
+   * (data-ef-side) at an offset along it (--ef-diagram-port-offset, a
+   * percentage). Status is text in the node's metadata; data-ef-status only
+   * selects a secondary, non-colour cue (outline, border style).
+   */
+  .ef-diagram-node__description { font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; }
+  .ef-diagram-port {
+    position: absolute;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    box-sizing: border-box;
+    border: 2px solid var(--ef-diagram-node-stroke, var(--ef-color-border-functional, #3a403c));
+    border-radius: 50%;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    transform: translate(-50%, -50%);
+  }
+  .ef-diagram-port[data-ef-side="top"] { left: var(--ef-diagram-port-offset, 50%); top: 0; }
+  .ef-diagram-port[data-ef-side="bottom"] { left: var(--ef-diagram-port-offset, 50%); top: 100%; }
+  .ef-diagram-port[data-ef-side="left"] { left: 0; top: var(--ef-diagram-port-offset, 50%); }
+  .ef-diagram-port[data-ef-side="right"] { left: 100%; top: var(--ef-diagram-port-offset, 50%); }
+  .ef-diagram-port[data-ef-direction="in"] { border-radius: 0; }
+  .ef-diagram-port[data-ef-direction="inout"] { border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
+  .ef-diagram-port__label {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    padding: 0 0.125rem;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 0.6875rem;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+  .ef-diagram-node[data-ef-status="active"] { box-shadow: 0 0 0 3px var(--ef-color-surface-primary, #f2efe7), 0 0 0 6px var(--ef-diagram-node-stroke); }
+  .ef-diagram-node[data-ef-status="blocked"],
+  .ef-diagram-node[data-ef-status="failed"] { border-style: double; border-width: 4px; border-inline-start-width: 6px; }
+  .ef-diagram-node[data-ef-status="skipped"],
+  .ef-diagram-node[data-ef-status="cancelled"] { border-style: dashed; border-inline-start-style: solid; }
+  .ef-diagram-node[data-ef-status="pending"],
+  .ef-diagram-node[data-ef-status="waiting"] { border-style: dotted; border-inline-start-style: solid; }
+  .ef-diagram__membership { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--ef-primitive-spacing-1, 0.25rem) var(--ef-primitive-spacing-3, 0.75rem); margin: 0; }
+  .ef-diagram__membership :where(dt) { font-weight: 700; overflow-wrap: anywhere; }
+  .ef-diagram__membership :where(dd) { margin: 0; overflow-wrap: anywhere; }
+  @media (max-width: 30rem) {
+    .ef-diagram__membership { grid-template-columns: minmax(0, 1fr); }
+  }
+  @media (forced-colors: active) {
+    .ef-diagram-port, .ef-diagram-port__label { border-color: CanvasText; background: Canvas; color: CanvasText; }
+    .ef-diagram-node[data-ef-status="active"] { box-shadow: none; outline: 3px solid CanvasText; outline-offset: 3px; }
+  }
+
   /* BEGIN generated: character-grid coordinates (tools/character-grid-css.mjs) */
   .ef-character-grid[data-ef-rows="1"] { --ef-grid-rows: 1; }
   .ef-character-grid[data-ef-rows="2"] { --ef-grid-rows: 2; }

package/dist/foundations.css

@@ -107,6 +107,8 @@
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
+  /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }

package/dist/marketing/forma-all.css

@@ -1,4 +1,4 @@
-/*! Forma 0.3.0 | forma-all.css | bundle echelon-marketing
+/*! Forma 0.4.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. */
 
@@ -647,6 +647,8 @@
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
+  /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
@@ -779,6 +781,8 @@
     font-size: 0.8125rem;
     line-height: 1.4;
   }
+  /* On a secondary surface, text-secondary falls below 4.5:1; use the surface's own text colour (forma#93). */
+  .ef-surface .ef-field__description { color: var(--ef-color-text-on-secondary-surface, #3a403c); }
 
   /* Motion model vocabulary --------------------------------------------- */
   /*
@@ -5299,6 +5303,61 @@
     .ef-diagram { break-inside: avoid; }
   }
 
+  /*
+   * Diagram contract 2.1.0 (workflow capability, forma#93; ADR-0006): ports,
+   * node status, node description and the membership list. Presentation only.
+   * Ports are connection-point markers placed by the consumer on a node side
+   * (data-ef-side) at an offset along it (--ef-diagram-port-offset, a
+   * percentage). Status is text in the node's metadata; data-ef-status only
+   * selects a secondary, non-colour cue (outline, border style).
+   */
+  .ef-diagram-node__description { font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; }
+  .ef-diagram-port {
+    position: absolute;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    box-sizing: border-box;
+    border: 2px solid var(--ef-diagram-node-stroke, var(--ef-color-border-functional, #3a403c));
+    border-radius: 50%;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    transform: translate(-50%, -50%);
+  }
+  .ef-diagram-port[data-ef-side="top"] { left: var(--ef-diagram-port-offset, 50%); top: 0; }
+  .ef-diagram-port[data-ef-side="bottom"] { left: var(--ef-diagram-port-offset, 50%); top: 100%; }
+  .ef-diagram-port[data-ef-side="left"] { left: 0; top: var(--ef-diagram-port-offset, 50%); }
+  .ef-diagram-port[data-ef-side="right"] { left: 100%; top: var(--ef-diagram-port-offset, 50%); }
+  .ef-diagram-port[data-ef-direction="in"] { border-radius: 0; }
+  .ef-diagram-port[data-ef-direction="inout"] { border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
+  .ef-diagram-port__label {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    padding: 0 0.125rem;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 0.6875rem;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+  .ef-diagram-node[data-ef-status="active"] { box-shadow: 0 0 0 3px var(--ef-color-surface-primary, #f2efe7), 0 0 0 6px var(--ef-diagram-node-stroke); }
+  .ef-diagram-node[data-ef-status="blocked"],
+  .ef-diagram-node[data-ef-status="failed"] { border-style: double; border-width: 4px; border-inline-start-width: 6px; }
+  .ef-diagram-node[data-ef-status="skipped"],
+  .ef-diagram-node[data-ef-status="cancelled"] { border-style: dashed; border-inline-start-style: solid; }
+  .ef-diagram-node[data-ef-status="pending"],
+  .ef-diagram-node[data-ef-status="waiting"] { border-style: dotted; border-inline-start-style: solid; }
+  .ef-diagram__membership { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--ef-primitive-spacing-1, 0.25rem) var(--ef-primitive-spacing-3, 0.75rem); margin: 0; }
+  .ef-diagram__membership :where(dt) { font-weight: 700; overflow-wrap: anywhere; }
+  .ef-diagram__membership :where(dd) { margin: 0; overflow-wrap: anywhere; }
+  @media (max-width: 30rem) {
+    .ef-diagram__membership { grid-template-columns: minmax(0, 1fr); }
+  }
+  @media (forced-colors: active) {
+    .ef-diagram-port, .ef-diagram-port__label { border-color: CanvasText; background: Canvas; color: CanvasText; }
+    .ef-diagram-node[data-ef-status="active"] { box-shadow: none; outline: 3px solid CanvasText; outline-offset: 3px; }
+  }
+
   /* BEGIN generated: character-grid coordinates (tools/character-grid-css.mjs) */
   .ef-character-grid[data-ef-rows="1"] { --ef-grid-rows: 1; }
   .ef-character-grid[data-ef-rows="2"] { --ef-grid-rows: 2; }

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

@@ -1,4 +1,4 @@
-/*! Forma 0.3.0 | forma-echelon-marketing.css | bundle echelon-marketing
+/*! Forma 0.4.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. */
 
@@ -747,6 +747,8 @@
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
+  /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }

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

@@ -1,4 +1,4 @@
-/*! Forma 0.3.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
+/*! Forma 0.4.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.3.0 | forma-marketing.css | bundle echelon-marketing
+/*! Forma 0.4.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. */
 
@@ -746,6 +746,8 @@
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
+  /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }

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

@@ -1,15 +1,15 @@
 {
   "schemaVersion": 1,
-  "forma": "0.3.0",
+  "forma": "0.4.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.3.0",
+  "releaseTag": "v0.4.0",
   "artifacts": [
     {
       "file": "forma-marketing.css",
       "description": "Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.",
-      "bytes": 77198,
-      "sha256": "9aec7b369ef6b60ceb5c8db51f088d232d2da07816cf9074ef1859fe035f4a65",
+      "bytes": 77452,
+      "sha256": "e9f2f952cbec98bbdf270d8a6ed639fa8abc57d45053a78acbb85775102f35ea",
       "sources": [
         "dist/tokens.css",
         "src/marketing/roles.css",
@@ -23,7 +23,7 @@
       "file": "forma-marketing-theme-echelon.css",
       "description": "Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.",
       "bytes": 6295,
-      "sha256": "157f1ec870a8825a0bbbfed4e719db7b92962e2625a8165f73abc4214c01e907",
+      "sha256": "295da09137526ef046ec46101db12231755d13b5ce5377a180f34ea1064417c6",
       "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": 83338,
-      "sha256": "383948a077c070ad4bda90688a84f65bd319fde1e326197d5917f0dde632f947",
+      "bytes": 83592,
+      "sha256": "c0634b649d91f3a4fda166c3b926655fd1dc0270406e0a2bb43dc38303fa7709",
       "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": 306461,
-      "sha256": "976b95c7e990ecc746f627be981a6d91721132ef8d242cd60992df94dbfccb24",
+      "bytes": 310120,
+      "sha256": "0d74d63c0cf65c732e32c1cdc66d241cec660b198b1151c54b2edafc5e32fa68",
       "sources": [
         "dist/all.css"
       ]

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-9aec7b369ef6b60ceb5c8db51f088d232d2da07816cf9074ef1859fe035f4a65  forma-marketing.css
-157f1ec870a8825a0bbbfed4e719db7b92962e2625a8165f73abc4214c01e907  forma-marketing-theme-echelon.css
-383948a077c070ad4bda90688a84f65bd319fde1e326197d5917f0dde632f947  forma-echelon-marketing.css
-976b95c7e990ecc746f627be981a6d91721132ef8d242cd60992df94dbfccb24  forma-all.css
+e9f2f952cbec98bbdf270d8a6ed639fa8abc57d45053a78acbb85775102f35ea  forma-marketing.css
+295da09137526ef046ec46101db12231755d13b5ce5377a180f34ea1064417c6  forma-marketing-theme-echelon.css
+c0634b649d91f3a4fda166c3b926655fd1dc0270406e0a2bb43dc38303fa7709  forma-echelon-marketing.css
+0d74d63c0cf65c732e32c1cdc66d241cec660b198b1151c54b2edafc5e32fa68  forma-all.css

package/docs/workflow/EMBEDDING.md

@@ -0,0 +1,148 @@
+# Embedding the workflow renderer and editor
+
+`@echelon-foundry/forma-workflow` is the reusable workflow component. It
+provides the public `<forma-workflow>` element and runs the F# engine
+(`Forma.Workflow`) on .NET WebAssembly. It is a separate, opt-in package. The
+design-system package stays zero-runtime (ADR-0006). You do not need Forma
+Studio.
+
+A complete host application that is not Studio lives in
+[`examples/workflow-embedding/`](../../examples/workflow-embedding/). It shows
+runtime, edit, pick and isolated modes and a partner brand. Its browser tests
+are in [`tests/browser/workflow-embed.spec.mjs`](../../tests/browser/workflow-embed.spec.mjs).
+
+## Same-page embedding (no iframe)
+
+```html
+<link rel="stylesheet" href="/assets/forma/tokens.css">
+<link rel="stylesheet" href="/assets/forma/foundations.css">
+<link rel="stylesheet" href="/assets/forma/components.css">
+<link rel="stylesheet" href="/assets/forma-workflow/forma-workflow.css">
+<script type="module" src="/assets/forma-workflow/forma-workflow.js"></script>
+
+<forma-workflow id="designer" mode="edit"></forma-workflow>
+<script type="module">
+  const designer = document.getElementById("designer");
+  const workflow = await (await fetch("/forma/workflows/launch.forma-workflow.json")).json();
+  await designer.load(workflow);
+  designer.addEventListener("forma-workflow-change", (e) => save(e.detail.workflow));
+</script>
+```
+
+You can also put the document inline as an inert data block. The element then
+loads it on start, and the static figure inside the element is the
+no-script fallback:
+
+```html
+<forma-workflow mode="view">
+  <script type="application/json" class="forma-workflow-source">{ "format": "forma-workflow", … }</script>
+  <figure class="ef-diagram">…static rendering…</figure>
+</forma-workflow>
+```
+
+The element inherits Forma tokens, brands (`data-ef-brand` on any ancestor),
+themes, forced colours, reduced motion and responsive behaviour from the host
+page.
+
+## Host modes
+
+| `mode` | What people can do |
+|---|---|
+| `view` | Read. Zoom. Activate declared intents. |
+| `inspect` | Select objects and read their metadata, references, status and extensions. |
+| `edit` | Create, connect, reconnect, move, resize, rename and recolour. Set status, ports, groups and lanes, metadata, references, interactions and accessibility. Arrange. Undo and redo. |
+| `pick` | Choose one or more objects; the host receives them on "Use selection". |
+| `runtime` | Read. The host projects live state with `setRuntimeState`. The document is never changed. |
+
+## Host contract `forma-workflow-host/1`
+
+The contract is small and versioned. Hosts never see the engine's internal state.
+
+**Attributes:** `mode`, `instance` (optional stable id), `engine` (optional URL of the engine directory).
+
+**Methods** (each returns a promise):
+
+| Method | Effect |
+|---|---|
+| `load(workflow)` | Load a document (object or JSON text). Emits `forma-workflow-load`. |
+| `getWorkflow()` | The current document, canonical JSON. |
+| `execute(command)` | Run a validated command, for example `{ name: "addNode", kind: "task", label: "Review" }`, `{ name: "connect", source: { node: "a" }, target: { node: "b" } }`, `{ name: "setLabel", object: "node:a", value: "…" }`, `{ name: "setMetadata", object: "node:a", key: "owner", value: "Ops" }`, `{ name: "setStatus", object: "node:a", status: { state: "active" } }`, `{ name: "setColor", object: "node:a", property: "fill", value: "#e8f0ff" }`, `{ name: "move", nodes: ["a"], dx: 8, dy: 0 }`, `{ name: "delete", objects: ["edge:e1"] }`, `{ name: "autoLayout" }`. |
+| `undo()`, `redo()` | History. |
+| `select(objects)` | `["node:a", { type: "edge", id: "e1" }]`. |
+| `focusObject(object)` | Move keyboard focus to an object. |
+| `setRuntimeState(states)` | `{ "nodeId": { state: "active", label: "In progress" }, "other": null }`. |
+| `validate(workflow)` | The validation report, without loading. |
+
+**Events** (bubbling `CustomEvent`s; `detail` is JSON):
+
+| Event | `detail` |
+|---|---|
+| `forma-workflow-ready` | Engine started. |
+| `forma-workflow-load` | `valid`, `class`, `findings`, `workflow`. |
+| `forma-workflow-change` | `description`, `workflow` (the new document), `valid`, `class`, `findings`. Only legal, validated changes arrive. |
+| `forma-workflow-selection` | `objects: [{ type, id }]`. |
+| `forma-workflow-focus` | `object`. |
+| `forma-workflow-intent` | `object`, `action`, `target`, `command`, `label`, `parameters`. The host decides what to do. |
+| `forma-workflow-pick` | `objects`. |
+| `forma-workflow-refused` | `message`. A command was refused and nothing changed. |
+| `forma-workflow-error` | `message` (the engine failed to start). |
+
+A command that would introduce a new validation error is refused. Examples are a
+dangling connection, a port over its limit, or a blank name. Unknown metadata
+and extensions survive every edit.
+
+## Interaction model
+
+- **Keyboard.** Every object is a button in the Objects list. Arrow keys move the selected steps (Shift moves further). Delete removes them. Escape cancels. All inspector fields are native form controls.
+- **Pointer.** Click selects. Ctrl, Cmd or Shift-click adds to the selection. Drag a selected step to move it; it is one change when released. Drag the corner handle to resize. Drag the round handle onto another step to connect.
+- **Touch and mobile.** Tap selects. No operation needs dragging: "Connect" then tap a target, the Connect form, the Move buttons and the Position and size fields all work without it. Handles have a 44px hit area. Below 64rem the layout stacks, with the canvas first, and the canvas scrolls inside its own region.
+- **Zoom and pan.** Use the zoom buttons. Pan by scrolling the canvas. Zoom is view state and is never saved.
+- **Announcements.** A polite live region reports each change, refusal and selection.
+
+## .NET hosts
+
+A host that already runs .NET, such as Forma Studio, links `Forma.Workflow`.
+It supplies the element's transport itself instead of loading a second runtime:
+
+```js
+element.transport = {
+  async dispatch(json) { return myExports.WorkflowDispatch(json); }, // backed by EmbedHost.dispatch
+  async document(id) { return myExports.WorkflowDocument(id); },
+  async dispose(id) { myExports.WorkflowDispose(id); },
+  async validate(text) { return JSON.parse(myExports.WorkflowValidate(text)); }
+};
+```
+
+## Isolated mode (iframe)
+
+Use isolated mode only when you need stronger separation. It carries the same
+portable document over the same `forma-workflow-host/1` contract, through
+`postMessage`:
+
+```html
+<iframe src="/assets/forma-workflow/frame.html?parent=https://app.example.org&forma=https://app.example.org/assets/forma/&brand=echelon"></iframe>
+```
+
+| From the parent | Fields |
+|---|---|
+| `{ protocol, id, type: "load", document }` | |
+| `{ protocol, id, type: "mode", mode }` | |
+| `{ protocol, id, type: "command", command }` | |
+| `{ protocol, id, type: "select", objects }`, `"focus"`, `"runtime"`, `"undo"`, `"redo"`, `"get"` | |
+
+| From the frame | Fields |
+|---|---|
+| `{ protocol, type: "frame-ready" }` | |
+| `{ protocol, type: "reply", id, ok, workflow?, error? }` | |
+| `{ protocol, type: "event", event: { type, … } }` | the same events as above |
+
+The frame accepts messages only from the origin in `?parent=`, and only from
+`window.parent`. It posts only to that origin.
+
+## Security
+
+Workflow files are data. The engine builds every view from a typed HTML tree
+that escapes all text and attributes. It never emits event-handler attributes
+or `javascript:` URLs. Intents are reported, never executed. The host element
+has no `eval`, no `new Function` and no decision logic; a package test checks
+this.