@cardenelabs/dragon 0.36.3 → 0.37.0

package/dist/index.cjs

@@ -55,6 +55,7 @@ var ja = {
   minimum: (limit) => `${limit} \u4EE5\u4E0A\u306B\u3059\u308B`,
   const: (value2) => `${value2} \u306B\u3059\u308B`,
   not: (allowed) => allowed ? `${allowed.field} \u306E\u6B04\u306F kind \u304C ${allowed.kind} \u306E\u6642\u3060\u3051\u66F8\u3051\u308B` : "\u3053\u306E\u6B04\u306E\u7D44\u307F\u5408\u308F\u305B\u306F\u66F8\u3051\u306A\u3044",
+  reserved: (names) => `${names.join(" \u3068 ")} \u306F\u72B6\u614B\u9077\u79FB\u56F3\u306E\u59CB\u307E\u308A\u3068\u7D42\u308F\u308A\u306E\u5370\u306E\u540D\u524D\u3067\u3001\u7BB1\u306E\u540D\u672D\u306B\u4F7F\u3048\u306A\u3044`,
   anyOf: (fields) => fields.length > 0 ? `${fields.join(" \u304B ")} \u306E${fields.length === 2 ? "\u3069\u3061\u3089\u304B" : "\u3069\u308C\u304B"}\u306E\u6B04\u304C\u8981\u308B` : "\u66F8\u3051\u308B\u5F62\u306E\u3069\u308C\u306B\u3082\u5408\u308F\u306A\u3044",
   oneOf: "\u66F8\u3051\u308B\u5F62\u306E\u3069\u308C\u304B 1 \u3064\u3060\u3051\u306B\u5408\u308F\u305B\u308B",
   discriminator: (tag, values) => `${tag} \u306F ${values.join(" / ")} \u306E\u3069\u308C\u304B\u306B\u3059\u308B`,
@@ -71,6 +72,7 @@ var en = {
   minimum: (limit) => `Use ${limit} or greater`,
   const: (value2) => `Use ${value2}`,
   not: (allowed) => allowed ? `The ${allowed.field} field is allowed only when kind is ${allowed.kind}` : "This combination of fields is not allowed",
+  reserved: (names) => `${names.join(" and ")} name the start and end marks of a state diagram and cannot be box ids`,
   anyOf: (fields) => fields.length > 0 ? `Write one of the ${fields.join(" or ")} fields` : "Does not match any of the allowed shapes",
   oneOf: "Match exactly one of the allowed shapes",
   discriminator: (tag, values) => `${tag} is one of ${values.join(" / ")}`,
@@ -85,7 +87,7 @@ function ucs2length(str) {
   return length;
 }
 var validate_diagram_default = validate10;
-var schema11 = { "properties": { "version": { "description": "\u5F62\u5F0F\u306E\u7248", "type": "integer", "minimum": 1 }, "kind": { "description": "\u56F3\u306E\u7A2E\u985E", "enum": ["sequence", "architecture"] }, "title": { "$ref": "#/definitions/text" }, "view": { "description": "\u898B\u305B\u65B9\u3002\u66F8\u304B\u306A\u3051\u308C\u3070\u5B57\u306E\u5927\u304D\u3055\u3067\u9078\u3076\u3002fixed \u306F\u5168\u4F53\u3092\u6B62\u3081\u3066\u4E2D\u3060\u3051\u52D5\u304B\u3057\u3001follow \u306F\u5BC4\u3063\u3066\u52D5\u304B\u3057\u5168\u4F53\u56F3\u3067\u4ECA\u3069\u3053\u304B\u3092\u793A\u3059", "enum": ["fixed", "follow"] }, "regions": { "type": "array", "items": { "$ref": "#/definitions/region" } }, "boxes": { "type": "array", "minItems": 1, "items": { "$ref": "#/definitions/box" } }, "strip": { "$ref": "#/definitions/strip" }, "steps": { "type": "array", "minItems": 1, "items": { "$ref": "#/definitions/step" } }, "sequence": { "$ref": "#/definitions/sequence" } }};
+var schema11 = { "properties": { "version": { "description": "\u5F62\u5F0F\u306E\u7248", "type": "integer", "minimum": 1 }, "kind": { "description": "\u56F3\u306E\u7A2E\u985E", "enum": ["sequence", "architecture", "state"] }, "title": { "$ref": "#/definitions/text" }, "view": { "description": "\u898B\u305B\u65B9\u3002\u66F8\u304B\u306A\u3051\u308C\u3070\u5B57\u306E\u5927\u304D\u3055\u3067\u9078\u3076\u3002fixed \u306F\u5168\u4F53\u3092\u6B62\u3081\u3066\u4E2D\u3060\u3051\u52D5\u304B\u3057\u3001follow \u306F\u5BC4\u3063\u3066\u52D5\u304B\u3057\u5168\u4F53\u56F3\u3067\u4ECA\u3069\u3053\u304B\u3092\u793A\u3059", "enum": ["fixed", "follow"] }, "regions": { "type": "array", "items": { "$ref": "#/definitions/region" } }, "boxes": { "type": "array", "minItems": 1, "items": { "$ref": "#/definitions/box" } }, "strip": { "$ref": "#/definitions/strip" }, "steps": { "type": "array", "minItems": 1, "items": { "$ref": "#/definitions/step" } }, "sequence": { "$ref": "#/definitions/sequence" }, "state": { "$ref": "#/definitions/state" } }};
 var func2 = Object.prototype.hasOwnProperty;
 var func3 = ucs2length;
 var schema17 = { "enum": ["blue", "amber", "green", "violet", "rose", "slate", "coin"] };
@@ -1479,6 +1481,182 @@ function validate23(data, { instancePath = "", parentData, parentDataProperty, r
   validate23.errors = vErrors;
   return errors === 0;
 }
+function validate26(data, { instancePath = "", parentData, parentDataProperty, rootData = data } = {}) {
+  let vErrors = null;
+  let errors = 0;
+  if (data && typeof data == "object" && !Array.isArray(data)) {
+    if (data.from === void 0) {
+      const err0 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "from" }, message: "must have required property 'from'" };
+      if (vErrors === null) {
+        vErrors = [err0];
+      } else {
+        vErrors.push(err0);
+      }
+      errors++;
+    }
+    if (data.to === void 0) {
+      const err1 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "to" }, message: "must have required property 'to'" };
+      if (vErrors === null) {
+        vErrors = [err1];
+      } else {
+        vErrors.push(err1);
+      }
+      errors++;
+    }
+    for (const key0 in data) {
+      if (!(key0 === "from" || key0 === "to" || key0 === "label")) {
+        const err2 = { instancePath, schemaPath: "#/additionalProperties", keyword: "additionalProperties", params: { additionalProperty: key0 }, message: "must NOT have additional properties" };
+        if (vErrors === null) {
+          vErrors = [err2];
+        } else {
+          vErrors.push(err2);
+        }
+        errors++;
+      }
+    }
+    if (data.from !== void 0) {
+      let data0 = data.from;
+      if (typeof data0 === "string") {
+        if (!pattern0.test(data0)) {
+          const err3 = { instancePath: instancePath + "/from", schemaPath: "#/definitions/id/pattern", keyword: "pattern", params: { pattern: "^[^\\s\\[\\]\u300C\u300D=:]+$" }, message: 'must match pattern "^[^\\s\\[\\]\u300C\u300D=:]+$"' };
+          if (vErrors === null) {
+            vErrors = [err3];
+          } else {
+            vErrors.push(err3);
+          }
+          errors++;
+        }
+      } else {
+        const err4 = { instancePath: instancePath + "/from", schemaPath: "#/definitions/id/type", keyword: "type", params: { type: "string" }, message: "must be string" };
+        if (vErrors === null) {
+          vErrors = [err4];
+        } else {
+          vErrors.push(err4);
+        }
+        errors++;
+      }
+    }
+    if (data.to !== void 0) {
+      let data1 = data.to;
+      if (typeof data1 === "string") {
+        if (!pattern0.test(data1)) {
+          const err5 = { instancePath: instancePath + "/to", schemaPath: "#/definitions/id/pattern", keyword: "pattern", params: { pattern: "^[^\\s\\[\\]\u300C\u300D=:]+$" }, message: 'must match pattern "^[^\\s\\[\\]\u300C\u300D=:]+$"' };
+          if (vErrors === null) {
+            vErrors = [err5];
+          } else {
+            vErrors.push(err5);
+          }
+          errors++;
+        }
+      } else {
+        const err6 = { instancePath: instancePath + "/to", schemaPath: "#/definitions/id/type", keyword: "type", params: { type: "string" }, message: "must be string" };
+        if (vErrors === null) {
+          vErrors = [err6];
+        } else {
+          vErrors.push(err6);
+        }
+        errors++;
+      }
+    }
+    if (data.label !== void 0) {
+      let data2 = data.label;
+      if (typeof data2 === "string") {
+        if (func3(data2) < 1) {
+          const err7 = { instancePath: instancePath + "/label", schemaPath: "#/definitions/text/minLength", keyword: "minLength", params: { limit: 1 }, message: "must NOT have fewer than 1 characters" };
+          if (vErrors === null) {
+            vErrors = [err7];
+          } else {
+            vErrors.push(err7);
+          }
+          errors++;
+        }
+      } else {
+        const err8 = { instancePath: instancePath + "/label", schemaPath: "#/definitions/text/type", keyword: "type", params: { type: "string" }, message: "must be string" };
+        if (vErrors === null) {
+          vErrors = [err8];
+        } else {
+          vErrors.push(err8);
+        }
+        errors++;
+      }
+    }
+  } else {
+    const err9 = { instancePath, schemaPath: "#/type", keyword: "type", params: { type: "object" }, message: "must be object" };
+    if (vErrors === null) {
+      vErrors = [err9];
+    } else {
+      vErrors.push(err9);
+    }
+    errors++;
+  }
+  validate26.errors = vErrors;
+  return errors === 0;
+}
+function validate25(data, { instancePath = "", parentData, parentDataProperty, rootData = data } = {}) {
+  let vErrors = null;
+  let errors = 0;
+  if (data && typeof data == "object" && !Array.isArray(data)) {
+    if (data.paths === void 0) {
+      const err0 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "paths" }, message: "must have required property 'paths'" };
+      if (vErrors === null) {
+        vErrors = [err0];
+      } else {
+        vErrors.push(err0);
+      }
+      errors++;
+    }
+    for (const key0 in data) {
+      if (!(key0 === "paths")) {
+        const err1 = { instancePath, schemaPath: "#/additionalProperties", keyword: "additionalProperties", params: { additionalProperty: key0 }, message: "must NOT have additional properties" };
+        if (vErrors === null) {
+          vErrors = [err1];
+        } else {
+          vErrors.push(err1);
+        }
+        errors++;
+      }
+    }
+    if (data.paths !== void 0) {
+      let data0 = data.paths;
+      if (Array.isArray(data0)) {
+        if (data0.length < 1) {
+          const err2 = { instancePath: instancePath + "/paths", schemaPath: "#/properties/paths/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
+          if (vErrors === null) {
+            vErrors = [err2];
+          } else {
+            vErrors.push(err2);
+          }
+          errors++;
+        }
+        const len0 = data0.length;
+        for (let i0 = 0; i0 < len0; i0++) {
+          if (!validate26(data0[i0], { instancePath: instancePath + "/paths/" + i0, parentData: data0, parentDataProperty: i0, rootData })) {
+            vErrors = vErrors === null ? validate26.errors : vErrors.concat(validate26.errors);
+            errors = vErrors.length;
+          }
+        }
+      } else {
+        const err3 = { instancePath: instancePath + "/paths", schemaPath: "#/properties/paths/type", keyword: "type", params: { type: "array" }, message: "must be array" };
+        if (vErrors === null) {
+          vErrors = [err3];
+        } else {
+          vErrors.push(err3);
+        }
+        errors++;
+      }
+    }
+  } else {
+    const err4 = { instancePath, schemaPath: "#/type", keyword: "type", params: { type: "object" }, message: "must be object" };
+    if (vErrors === null) {
+      vErrors = [err4];
+    } else {
+      vErrors.push(err4);
+    }
+    errors++;
+  }
+  validate25.errors = vErrors;
+  return errors === 0;
+}
 function validate10(data, { instancePath = "", parentData, parentDataProperty, rootData = data } = {}) {
   let vErrors = null;
   let errors = 0;
@@ -1520,9 +1698,11 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
   let ifClause0;
   if (_valid0) {
     const _errs4 = errors;
+    const _errs5 = errors;
+    const _errs6 = errors;
     if (data && typeof data == "object" && !Array.isArray(data)) {
-      if (data.sequence === void 0) {
-        const err2 = { instancePath, schemaPath: "#/then/required", keyword: "required", params: { missingProperty: "sequence" }, message: "must have required property 'sequence'" };
+      if (data.state === void 0 && ("state")) {
+        const err2 = {};
         if (vErrors === null) {
           vErrors = [err2];
         } else {
@@ -1531,227 +1711,391 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
         errors++;
       }
     }
+    var valid2 = _errs6 === errors;
+    if (valid2) {
+      const err3 = { instancePath, schemaPath: "#/then/not", keyword: "not", params: {}, message: "must NOT be valid" };
+      if (vErrors === null) {
+        vErrors = [err3];
+      } else {
+        vErrors.push(err3);
+      }
+      errors++;
+    } else {
+      errors = _errs5;
+      if (vErrors !== null) {
+        if (_errs5) {
+          vErrors.length = _errs5;
+        } else {
+          vErrors = null;
+        }
+      }
+    }
+    if (data && typeof data == "object" && !Array.isArray(data)) {
+      if (data.sequence === void 0) {
+        const err4 = { instancePath, schemaPath: "#/then/required", keyword: "required", params: { missingProperty: "sequence" }, message: "must have required property 'sequence'" };
+        if (vErrors === null) {
+          vErrors = [err4];
+        } else {
+          vErrors.push(err4);
+        }
+        errors++;
+      }
+    }
     var _valid0 = _errs4 === errors;
     valid0 = _valid0;
     ifClause0 = "then";
   } else {
-    const _errs5 = errors;
-    const _errs6 = errors;
     const _errs7 = errors;
+    const _errs8 = errors;
+    const _errs9 = errors;
     if (data && typeof data == "object" && !Array.isArray(data)) {
       if (data.sequence === void 0 && ("sequence")) {
-        const err3 = {};
+        const err5 = {};
         if (vErrors === null) {
-          vErrors = [err3];
+          vErrors = [err5];
         } else {
-          vErrors.push(err3);
+          vErrors.push(err5);
         }
         errors++;
       }
     }
-    var valid2 = _errs7 === errors;
-    if (valid2) {
-      const err4 = { instancePath, schemaPath: "#/else/not", keyword: "not", params: {}, message: "must NOT be valid" };
+    var valid3 = _errs9 === errors;
+    if (valid3) {
+      const err6 = { instancePath, schemaPath: "#/else/not", keyword: "not", params: {}, message: "must NOT be valid" };
       if (vErrors === null) {
-        vErrors = [err4];
+        vErrors = [err6];
       } else {
-        vErrors.push(err4);
+        vErrors.push(err6);
       }
       errors++;
     } else {
-      errors = _errs6;
+      errors = _errs8;
       if (vErrors !== null) {
-        if (_errs6) {
-          vErrors.length = _errs6;
+        if (_errs8) {
+          vErrors.length = _errs8;
         } else {
           vErrors = null;
         }
       }
     }
-    var _valid0 = _errs5 === errors;
+    const _errs10 = errors;
+    let valid4 = true;
+    const _errs11 = errors;
+    if (data && typeof data == "object" && !Array.isArray(data)) {
+      if (data.kind === void 0 && ("kind")) {
+        const err7 = {};
+        if (vErrors === null) {
+          vErrors = [err7];
+        } else {
+          vErrors.push(err7);
+        }
+        errors++;
+      } else {
+        if (data.kind !== void 0) {
+          if ("state" !== data.kind) {
+            const err8 = {};
+            if (vErrors === null) {
+              vErrors = [err8];
+            } else {
+              vErrors.push(err8);
+            }
+            errors++;
+          }
+        }
+      }
+    }
+    var _valid1 = _errs11 === errors;
+    errors = _errs10;
+    if (vErrors !== null) {
+      if (_errs10) {
+        vErrors.length = _errs10;
+      } else {
+        vErrors = null;
+      }
+    }
+    let ifClause1;
+    if (_valid1) {
+      const _errs13 = errors;
+      if (data && typeof data == "object" && !Array.isArray(data)) {
+        if (data.boxes !== void 0) {
+          let data2 = data.boxes;
+          if (Array.isArray(data2)) {
+            const len0 = data2.length;
+            for (let i0 = 0; i0 < len0; i0++) {
+              let data3 = data2[i0];
+              if (data3 && typeof data3 == "object" && !Array.isArray(data3)) {
+                if (data3.id !== void 0) {
+                  let data4 = data3.id;
+                  const _errs17 = errors;
+                  const _errs18 = errors;
+                  if (!(data4 === "start" || data4 === "finish")) {
+                    const err9 = {};
+                    if (vErrors === null) {
+                      vErrors = [err9];
+                    } else {
+                      vErrors.push(err9);
+                    }
+                    errors++;
+                  }
+                  var valid10 = _errs18 === errors;
+                  if (valid10) {
+                    const err10 = { instancePath: instancePath + "/boxes/" + i0 + "/id", schemaPath: "#/else/then/properties/boxes/items/properties/id/not", keyword: "not", params: {}, message: "must NOT be valid" };
+                    if (vErrors === null) {
+                      vErrors = [err10];
+                    } else {
+                      vErrors.push(err10);
+                    }
+                    errors++;
+                  } else {
+                    errors = _errs17;
+                    if (vErrors !== null) {
+                      if (_errs17) {
+                        vErrors.length = _errs17;
+                      } else {
+                        vErrors = null;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      var _valid1 = _errs13 === errors;
+      valid4 = _valid1;
+      ifClause1 = "then";
+    } else {
+      const _errs19 = errors;
+      const _errs20 = errors;
+      const _errs21 = errors;
+      if (data && typeof data == "object" && !Array.isArray(data)) {
+        if (data.state === void 0 && ("state")) {
+          const err11 = {};
+          if (vErrors === null) {
+            vErrors = [err11];
+          } else {
+            vErrors.push(err11);
+          }
+          errors++;
+        }
+      }
+      var valid11 = _errs21 === errors;
+      if (valid11) {
+        const err12 = { instancePath, schemaPath: "#/else/else/not", keyword: "not", params: {}, message: "must NOT be valid" };
+        if (vErrors === null) {
+          vErrors = [err12];
+        } else {
+          vErrors.push(err12);
+        }
+        errors++;
+      } else {
+        errors = _errs20;
+        if (vErrors !== null) {
+          if (_errs20) {
+            vErrors.length = _errs20;
+          } else {
+            vErrors = null;
+          }
+        }
+      }
+      var _valid1 = _errs19 === errors;
+      valid4 = _valid1;
+      ifClause1 = "else";
+    }
+    if (!valid4) {
+      const err13 = { instancePath, schemaPath: "#/else/if", keyword: "if", params: { failingKeyword: ifClause1 }, message: 'must match "' + ifClause1 + '" schema' };
+      if (vErrors === null) {
+        vErrors = [err13];
+      } else {
+        vErrors.push(err13);
+      }
+      errors++;
+    }
+    var _valid0 = _errs7 === errors;
     valid0 = _valid0;
     ifClause0 = "else";
   }
   if (!valid0) {
-    const err5 = { instancePath, schemaPath: "#/if", keyword: "if", params: { failingKeyword: ifClause0 }, message: 'must match "' + ifClause0 + '" schema' };
+    const err14 = { instancePath, schemaPath: "#/if", keyword: "if", params: { failingKeyword: ifClause0 }, message: 'must match "' + ifClause0 + '" schema' };
     if (vErrors === null) {
-      vErrors = [err5];
+      vErrors = [err14];
     } else {
-      vErrors.push(err5);
+      vErrors.push(err14);
     }
     errors++;
   }
   if (data && typeof data == "object" && !Array.isArray(data)) {
     if (data.version === void 0) {
-      const err6 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "version" }, message: "must have required property 'version'" };
+      const err15 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "version" }, message: "must have required property 'version'" };
       if (vErrors === null) {
-        vErrors = [err6];
+        vErrors = [err15];
       } else {
-        vErrors.push(err6);
+        vErrors.push(err15);
       }
       errors++;
     }
     if (data.kind === void 0) {
-      const err7 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "kind" }, message: "must have required property 'kind'" };
+      const err16 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "kind" }, message: "must have required property 'kind'" };
       if (vErrors === null) {
-        vErrors = [err7];
+        vErrors = [err16];
       } else {
-        vErrors.push(err7);
+        vErrors.push(err16);
       }
       errors++;
     }
     if (data.title === void 0) {
-      const err8 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "title" }, message: "must have required property 'title'" };
+      const err17 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "title" }, message: "must have required property 'title'" };
       if (vErrors === null) {
-        vErrors = [err8];
+        vErrors = [err17];
       } else {
-        vErrors.push(err8);
+        vErrors.push(err17);
       }
       errors++;
     }
     if (data.boxes === void 0) {
-      const err9 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "boxes" }, message: "must have required property 'boxes'" };
+      const err18 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "boxes" }, message: "must have required property 'boxes'" };
       if (vErrors === null) {
-        vErrors = [err9];
+        vErrors = [err18];
       } else {
-        vErrors.push(err9);
+        vErrors.push(err18);
       }
       errors++;
     }
     if (data.steps === void 0) {
-      const err10 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "steps" }, message: "must have required property 'steps'" };
+      const err19 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "steps" }, message: "must have required property 'steps'" };
       if (vErrors === null) {
-        vErrors = [err10];
+        vErrors = [err19];
       } else {
-        vErrors.push(err10);
+        vErrors.push(err19);
       }
       errors++;
     }
     for (const key0 in data) {
       if (!func2.call(schema11.properties, key0)) {
-        const err11 = { instancePath, schemaPath: "#/additionalProperties", keyword: "additionalProperties", params: { additionalProperty: key0 }, message: "must NOT have additional properties" };
+        const err20 = { instancePath, schemaPath: "#/additionalProperties", keyword: "additionalProperties", params: { additionalProperty: key0 }, message: "must NOT have additional properties" };
         if (vErrors === null) {
-          vErrors = [err11];
+          vErrors = [err20];
         } else {
-          vErrors.push(err11);
+          vErrors.push(err20);
         }
         errors++;
       }
     }
     if (data.version !== void 0) {
-      let data1 = data.version;
-      if (!(typeof data1 == "number" && (!(data1 % 1) && !isNaN(data1)) && isFinite(data1))) {
-        const err12 = { instancePath: instancePath + "/version", schemaPath: "#/properties/version/type", keyword: "type", params: { type: "integer" }, message: "must be integer" };
+      let data5 = data.version;
+      if (!(typeof data5 == "number" && (!(data5 % 1) && !isNaN(data5)) && isFinite(data5))) {
+        const err21 = { instancePath: instancePath + "/version", schemaPath: "#/properties/version/type", keyword: "type", params: { type: "integer" }, message: "must be integer" };
         if (vErrors === null) {
-          vErrors = [err12];
+          vErrors = [err21];
         } else {
-          vErrors.push(err12);
+          vErrors.push(err21);
         }
         errors++;
       }
-      if (typeof data1 == "number" && isFinite(data1)) {
-        if (data1 < 1 || isNaN(data1)) {
-          const err13 = { instancePath: instancePath + "/version", schemaPath: "#/properties/version/minimum", keyword: "minimum", params: { comparison: ">=", limit: 1 }, message: "must be >= 1" };
+      if (typeof data5 == "number" && isFinite(data5)) {
+        if (data5 < 1 || isNaN(data5)) {
+          const err22 = { instancePath: instancePath + "/version", schemaPath: "#/properties/version/minimum", keyword: "minimum", params: { comparison: ">=", limit: 1 }, message: "must be >= 1" };
           if (vErrors === null) {
-            vErrors = [err13];
+            vErrors = [err22];
           } else {
-            vErrors.push(err13);
+            vErrors.push(err22);
           }
           errors++;
         }
       }
     }
     if (data.kind !== void 0) {
-      let data2 = data.kind;
-      if (!(data2 === "sequence" || data2 === "architecture")) {
-        const err14 = { instancePath: instancePath + "/kind", schemaPath: "#/properties/kind/enum", keyword: "enum", params: { allowedValues: schema11.properties.kind.enum }, message: "must be equal to one of the allowed values" };
+      let data6 = data.kind;
+      if (!(data6 === "sequence" || data6 === "architecture" || data6 === "state")) {
+        const err23 = { instancePath: instancePath + "/kind", schemaPath: "#/properties/kind/enum", keyword: "enum", params: { allowedValues: schema11.properties.kind.enum }, message: "must be equal to one of the allowed values" };
         if (vErrors === null) {
-          vErrors = [err14];
+          vErrors = [err23];
         } else {
-          vErrors.push(err14);
+          vErrors.push(err23);
         }
         errors++;
       }
     }
     if (data.title !== void 0) {
-      let data3 = data.title;
-      if (typeof data3 === "string") {
-        if (func3(data3) < 1) {
-          const err15 = { instancePath: instancePath + "/title", schemaPath: "#/definitions/text/minLength", keyword: "minLength", params: { limit: 1 }, message: "must NOT have fewer than 1 characters" };
+      let data7 = data.title;
+      if (typeof data7 === "string") {
+        if (func3(data7) < 1) {
+          const err24 = { instancePath: instancePath + "/title", schemaPath: "#/definitions/text/minLength", keyword: "minLength", params: { limit: 1 }, message: "must NOT have fewer than 1 characters" };
           if (vErrors === null) {
-            vErrors = [err15];
+            vErrors = [err24];
           } else {
-            vErrors.push(err15);
+            vErrors.push(err24);
           }
           errors++;
         }
       } else {
-        const err16 = { instancePath: instancePath + "/title", schemaPath: "#/definitions/text/type", keyword: "type", params: { type: "string" }, message: "must be string" };
+        const err25 = { instancePath: instancePath + "/title", schemaPath: "#/definitions/text/type", keyword: "type", params: { type: "string" }, message: "must be string" };
         if (vErrors === null) {
-          vErrors = [err16];
+          vErrors = [err25];
         } else {
-          vErrors.push(err16);
+          vErrors.push(err25);
         }
         errors++;
       }
     }
     if (data.view !== void 0) {
-      let data4 = data.view;
-      if (!(data4 === "fixed" || data4 === "follow")) {
-        const err17 = { instancePath: instancePath + "/view", schemaPath: "#/properties/view/enum", keyword: "enum", params: { allowedValues: schema11.properties.view.enum }, message: "must be equal to one of the allowed values" };
+      let data8 = data.view;
+      if (!(data8 === "fixed" || data8 === "follow")) {
+        const err26 = { instancePath: instancePath + "/view", schemaPath: "#/properties/view/enum", keyword: "enum", params: { allowedValues: schema11.properties.view.enum }, message: "must be equal to one of the allowed values" };
         if (vErrors === null) {
-          vErrors = [err17];
+          vErrors = [err26];
         } else {
-          vErrors.push(err17);
+          vErrors.push(err26);
         }
         errors++;
       }
     }
     if (data.regions !== void 0) {
-      let data5 = data.regions;
-      if (Array.isArray(data5)) {
-        const len0 = data5.length;
-        for (let i0 = 0; i0 < len0; i0++) {
-          if (!validate11(data5[i0], { instancePath: instancePath + "/regions/" + i0, parentData: data5, parentDataProperty: i0, rootData })) {
+      let data9 = data.regions;
+      if (Array.isArray(data9)) {
+        const len1 = data9.length;
+        for (let i1 = 0; i1 < len1; i1++) {
+          if (!validate11(data9[i1], { instancePath: instancePath + "/regions/" + i1, parentData: data9, parentDataProperty: i1, rootData })) {
             vErrors = vErrors === null ? validate11.errors : vErrors.concat(validate11.errors);
             errors = vErrors.length;
           }
         }
       } else {
-        const err18 = { instancePath: instancePath + "/regions", schemaPath: "#/properties/regions/type", keyword: "type", params: { type: "array" }, message: "must be array" };
+        const err27 = { instancePath: instancePath + "/regions", schemaPath: "#/properties/regions/type", keyword: "type", params: { type: "array" }, message: "must be array" };
         if (vErrors === null) {
-          vErrors = [err18];
+          vErrors = [err27];
         } else {
-          vErrors.push(err18);
+          vErrors.push(err27);
         }
         errors++;
       }
     }
     if (data.boxes !== void 0) {
-      let data7 = data.boxes;
-      if (Array.isArray(data7)) {
-        if (data7.length < 1) {
-          const err19 = { instancePath: instancePath + "/boxes", schemaPath: "#/properties/boxes/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
+      let data11 = data.boxes;
+      if (Array.isArray(data11)) {
+        if (data11.length < 1) {
+          const err28 = { instancePath: instancePath + "/boxes", schemaPath: "#/properties/boxes/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
           if (vErrors === null) {
-            vErrors = [err19];
+            vErrors = [err28];
           } else {
-            vErrors.push(err19);
+            vErrors.push(err28);
           }
           errors++;
         }
-        const len1 = data7.length;
-        for (let i1 = 0; i1 < len1; i1++) {
-          if (!validate13(data7[i1], { instancePath: instancePath + "/boxes/" + i1, parentData: data7, parentDataProperty: i1, rootData })) {
+        const len2 = data11.length;
+        for (let i2 = 0; i2 < len2; i2++) {
+          if (!validate13(data11[i2], { instancePath: instancePath + "/boxes/" + i2, parentData: data11, parentDataProperty: i2, rootData })) {
             vErrors = vErrors === null ? validate13.errors : vErrors.concat(validate13.errors);
             errors = vErrors.length;
           }
         }
       } else {
-        const err20 = { instancePath: instancePath + "/boxes", schemaPath: "#/properties/boxes/type", keyword: "type", params: { type: "array" }, message: "must be array" };
+        const err29 = { instancePath: instancePath + "/boxes", schemaPath: "#/properties/boxes/type", keyword: "type", params: { type: "array" }, message: "must be array" };
         if (vErrors === null) {
-          vErrors = [err20];
+          vErrors = [err29];
         } else {
-          vErrors.push(err20);
+          vErrors.push(err29);
         }
         errors++;
       }
@@ -1763,30 +2107,30 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
       }
     }
     if (data.steps !== void 0) {
-      let data10 = data.steps;
-      if (Array.isArray(data10)) {
-        if (data10.length < 1) {
-          const err21 = { instancePath: instancePath + "/steps", schemaPath: "#/properties/steps/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
+      let data14 = data.steps;
+      if (Array.isArray(data14)) {
+        if (data14.length < 1) {
+          const err30 = { instancePath: instancePath + "/steps", schemaPath: "#/properties/steps/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
           if (vErrors === null) {
-            vErrors = [err21];
+            vErrors = [err30];
           } else {
-            vErrors.push(err21);
+            vErrors.push(err30);
           }
           errors++;
         }
-        const len2 = data10.length;
-        for (let i2 = 0; i2 < len2; i2++) {
-          if (!validate17(data10[i2], { instancePath: instancePath + "/steps/" + i2, parentData: data10, parentDataProperty: i2, rootData })) {
+        const len3 = data14.length;
+        for (let i3 = 0; i3 < len3; i3++) {
+          if (!validate17(data14[i3], { instancePath: instancePath + "/steps/" + i3, parentData: data14, parentDataProperty: i3, rootData })) {
             vErrors = vErrors === null ? validate17.errors : vErrors.concat(validate17.errors);
             errors = vErrors.length;
           }
         }
       } else {
-        const err22 = { instancePath: instancePath + "/steps", schemaPath: "#/properties/steps/type", keyword: "type", params: { type: "array" }, message: "must be array" };
+        const err31 = { instancePath: instancePath + "/steps", schemaPath: "#/properties/steps/type", keyword: "type", params: { type: "array" }, message: "must be array" };
         if (vErrors === null) {
-          vErrors = [err22];
+          vErrors = [err31];
         } else {
-          vErrors.push(err22);
+          vErrors.push(err31);
         }
         errors++;
       }
@@ -1797,12 +2141,18 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
         errors = vErrors.length;
       }
     }
+    if (data.state !== void 0) {
+      if (!validate25(data.state, { instancePath: instancePath + "/state", parentData: data, parentDataProperty: "state", rootData })) {
+        vErrors = vErrors === null ? validate25.errors : vErrors.concat(validate25.errors);
+        errors = vErrors.length;
+      }
+    }
   } else {
-    const err23 = { instancePath, schemaPath: "#/type", keyword: "type", params: { type: "object" }, message: "must be object" };
+    const err32 = { instancePath, schemaPath: "#/type", keyword: "type", params: { type: "object" }, message: "must be object" };
     if (vErrors === null) {
-      vErrors = [err23];
+      vErrors = [err32];
     } else {
-      vErrors.push(err23);
+      vErrors.push(err32);
     }
     errors++;
   }
@@ -1810,13 +2160,43 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
   return errors === 0;
 }
 
+// src/words.ts
+var keys = (table) => Object.keys(table);
+var KINDS = keys({ sequence: true, architecture: true, state: true });
+var STATE_ENDS = ["start", "finish"];
+var HEADS = ["group", "end", "box", "strip", "step", "say", "code", "act", "note", "set"];
+var AS = "as";
+var ATTRS = {
+  diagram: ["view"],
+  group: ["note", "color", "icon"],
+  box: ["note", "color", "icon"],
+  edge: ["carry", "tag", "side"],
+  set: ["tag"]
+};
+var CARRIES = keys({ coin: true, none: true });
+var VIEWS = keys({ fixed: true, follow: true });
+var SIDES = keys({ above: true, below: true, left: true, right: true });
+var OLD_HEADS = {
+  \u6642\u7CFB\u5217\u56F3: "sequence",
+  \u69CB\u6210\u56F3: "architecture",
+  \u533A\u753B: "group",
+  \u898B\u305B\u65B9: "view",
+  region: "group",
+  view: "view"
+};
+
 // src/schema.ts
 var COLORS = ["blue", "amber", "green", "violet", "rose", "slate", "coin"];
 var EVENT_TYPES = ["edge", "action", "swap", "strip"];
+var ROOT_NOT_ALLOWED = {
+  "#/else/not": { field: "sequence", kind: "sequence" },
+  "#/then/not": { field: "state", kind: "state" },
+  "#/else/else/not": { field: "state", kind: "state" }
+};
 var NOT_ALLOWED = {
-  "": { field: "sequence", kind: "sequence" },
   carry: { field: "text", kind: "tag" }
 };
+var RESERVED_ID = /\/boxes\/items\/properties\/id\/not$/u;
 var escape = (key2) => key2.replaceAll("~", "~0").replaceAll("/", "~1");
 function forbiddenOf(pattern) {
   const inside = /^\^\[\^(.+)\]\+\$$/u.exec(pattern)?.[1];
@@ -1840,7 +2220,8 @@ function toFieldError(error, errors, m) {
       return { pointer: `${at}/${escape(key2)}`, message: m.required(key2) };
     }
     case "not": {
-      const allowed = NOT_ALLOWED[at.slice(at.lastIndexOf("/") + 1)];
+      if (RESERVED_ID.test(error.schemaPath)) return { pointer: at, message: m.reserved(STATE_ENDS) };
+      const allowed = at === "" ? ROOT_NOT_ALLOWED[error.schemaPath] : NOT_ALLOWED[at.slice(at.lastIndexOf("/") + 1)];
       return { pointer: allowed ? `${at}/${allowed.field}` : at, message: m.not(allowed) };
     }
     case "anyOf": {
@@ -1881,30 +2262,6 @@ function validateDiagram(input, options = {}) {
   return { ok: false, errors };
 }
 
-// src/words.ts
-var keys = (table) => Object.keys(table);
-var KINDS = keys({ sequence: true, architecture: true });
-var HEADS = ["group", "end", "box", "strip", "step", "say", "code", "act", "note", "set"];
-var AS = "as";
-var ATTRS = {
-  diagram: ["view"],
-  group: ["note", "color", "icon"],
-  box: ["note", "color", "icon"],
-  edge: ["carry", "tag", "side"],
-  set: ["tag"]
-};
-var CARRIES = keys({ coin: true, none: true });
-var VIEWS = keys({ fixed: true, follow: true });
-var SIDES = keys({ above: true, below: true, left: true, right: true });
-var OLD_HEADS = {
-  \u6642\u7CFB\u5217\u56F3: "sequence",
-  \u69CB\u6210\u56F3: "architecture",
-  \u533A\u753B: "group",
-  \u898B\u305B\u65B9: "view",
-  region: "group",
-  view: "view"
-};
-
 // src/messages.ts
 var list = (words) => words.join(" / ");
 var ja2 = () => {
@@ -1969,7 +2326,11 @@ var ja2 = () => {
     badView: `view \u306F ${list(VIEWS)} \u306E\u3069\u308C\u304B`,
     badCarry: `carry \u306F ${list(CARRIES)} \u306E\u3069\u308C\u304B\u3002\u672D\u306F tag: <\u5024> \u3067\u66F8\u304F`,
     badSide: `side \u306F ${list(SIDES)} \u306E\u3069\u308C\u304B`,
-    carryTwice: "\u904B\u3076\u7269\u306F 1 \u672C\u306E\u7DDA\u306B 1 \u3064\u307E\u3067\u3002carry \u3068 tag \u306F\u4E00\u7DD2\u306B\u66F8\u304B\u306A\u3044"
+    carryTwice: "\u904B\u3076\u7269\u306F 1 \u672C\u306E\u7DDA\u306B 1 \u3064\u307E\u3067\u3002carry \u3068 tag \u306F\u4E00\u7DD2\u306B\u66F8\u304B\u306A\u3044",
+    reservedId: (id) => `${id} \u306F\u72B6\u614B\u9077\u79FB\u56F3\u306E\u59CB\u307E\u308A\u3068\u7D42\u308F\u308A\u306E\u5370\u306E\u540D\u524D\u3067\u3001\u7BB1\u306E\u540D\u672D\u306B\u4F7F\u3048\u306A\u3044`,
+    intoStart: "start \u3078\u5165\u308B\u7DDA\u306F\u66F8\u3051\u306A\u3044\u3002start \u306F\u59CB\u307E\u308A\u306E\u5370\u3067\u3001\u7DDA\u306F start \u304B\u3089\u51FA\u308B",
+    outOfFinish: "finish \u304B\u3089\u51FA\u308B\u7DDA\u306F\u66F8\u3051\u306A\u3044\u3002finish \u306F\u7D42\u308F\u308A\u306E\u5370\u3067\u3001\u7DDA\u306F finish \u3078\u5165\u308B",
+    pathNoAttrs: "\u6700\u521D\u306E step \u3088\u308A\u524D\u306E\u7DDA\u306F\u4ECA\u56DE\u306F\u901A\u3089\u306A\u3044\u9053\u306A\u306E\u3067\u3001\u5C5E\u6027 (carry \u3068 tag \u3068 side) \u3092\u66F8\u3051\u306A\u3044"
   };
 };
 var en2 = () => {
@@ -2034,7 +2395,11 @@ var en2 = () => {
     badView: `view is one of ${list(VIEWS)}`,
     badCarry: `carry is one of ${list(CARRIES)}. Write a tag as tag: <value>`,
     badSide: `side is one of ${list(SIDES)}`,
-    carryTwice: "A line carries one thing. Do not write carry and tag together"
+    carryTwice: "A line carries one thing. Do not write carry and tag together",
+    reservedId: (id) => `${id} names the start or end mark of a state diagram and cannot be a box id`,
+    intoStart: "A line cannot go into start. start is the start mark, and lines leave it",
+    outOfFinish: "A line cannot leave finish. finish is the end mark, and lines go into it",
+    pathNoAttrs: "A line before the first step is a path not taken, so it takes no attributes (carry, tag, side)"
   };
 };
 var MESSAGES = { ja: ja2(), en: en2() };
@@ -2070,19 +2435,19 @@ function readDiagram(input, options = {}) {
   if (!checked.ok) return checked;
   return { ok: true, diagram: input, warnings: [] };
 }
-async function migrateFile(path) {
+async function migrateFile(path2) {
   const { readFile } = await import('fs/promises');
-  const input = JSON.parse(await readFile(path, "utf8"));
+  const input = JSON.parse(await readFile(path2, "utf8"));
   const read = readDiagram(input);
-  if (!read.ok) throw new Error(`${path} \u3092\u79FB\u305B\u306A\u3044: ${read.errors.map((error) => `${error.pointer} ${error.message}`).join(" / ")}`);
+  if (!read.ok) throw new Error(`${path2} \u3092\u79FB\u305B\u306A\u3044: ${read.errors.map((error) => `${error.pointer} ${error.message}`).join(" / ")}`);
   return { changed: false, from: read.diagram.version, to: FORMAT_VERSION };
 }
 
 // src/parser.ts
 var NotationError = class extends Error {
-  constructor(line, column, message) {
+  constructor(line2, column, message) {
     super(message);
-    this.line = line;
+    this.line = line2;
     this.column = column;
   }
   line;
@@ -2238,8 +2603,10 @@ function parseLines(lines, m) {
   const shown2 = titled.rest < head.text.length ? readAttrs(head, titled.rest, ATTRS.diagram, m).get("view") : void 0;
   if (shown2 && !isOneOf(VIEWS, shown2.value)) throw fail(head, shown2.at, m.badView);
   const view = shown2?.value;
+  const isState = kind === "state";
   const regions = [];
   const boxes = [];
+  const paths = [];
   const ids = /* @__PURE__ */ new Set();
   let strip2;
   const steps = [];
@@ -2253,6 +2620,14 @@ function parseLines(lines, m) {
     if (!boxes.some((box) => box.id === id)) throw fail(source, at, m.undeclaredBox(id));
     return id;
   };
+  const endAt = (source, id, at, side2) => {
+    if (!isState || !isOneOf(STATE_ENDS, id)) return boxAt(source, id, at);
+    if (id === "start" !== (side2 === "from")) throw fail(source, at, id === "start" ? m.intoStart : m.outOfFinish);
+    return id;
+  };
+  const notReserved = (source, id, at) => {
+    if (isState && isOneOf(STATE_ENDS, id)) throw fail(source, at, m.reservedId(id));
+  };
   const inStep = (source) => {
     if (!building) throw fail(source, 0, m.stepLineBeforeStep);
     return building;
@@ -2277,7 +2652,8 @@ function parseLines(lines, m) {
     const text2 = source.text;
     const edge2 = EDGE.exec(text2);
     if (edge2) {
-      inStep(source).events.push(readEdge(source, edge2));
+      if (isState && !building) paths.push(readPath(source, edge2));
+      else inStep(source).events.push(readEdge(source, edge2));
       continue;
     }
     const word = text2.split(/\s/u)[0] ?? "";
@@ -2349,7 +2725,8 @@ function parseLines(lines, m) {
     boxes,
     ...strip2 ? { strip: strip2 } : {},
     steps,
-    ...kind === "sequence" ? { sequence: { lifelines: boxes.map((box) => box.id) } } : {}
+    ...kind === "sequence" ? { sequence: { lifelines: boxes.map((box) => box.id) } } : {},
+    ...paths.length > 0 ? { state: { paths } } : {}
   };
   function readGroup(source) {
     beforeSteps(source);
@@ -2358,6 +2735,7 @@ function parseLines(lines, m) {
     if (regions.some((region) => region.id === declared.id)) {
       if (declared.name !== void 0 || declared.attrs.size > 0) throw fail(source, 0, m.regionReopened(declared.id));
     } else {
+      notReserved(source, declared.id, declared.idAt);
       declare(source, declared.id, declared.idAt);
       regions.push({ id: declared.id, name: declared.name ?? declared.id, ...lookOf(source, declared.attrs, m) });
     }
@@ -2366,6 +2744,7 @@ function parseLines(lines, m) {
   function readBox(source) {
     beforeSteps(source);
     const declared = readDeclared(source, "box", ATTRS.box, m);
+    notReserved(source, declared.id, declared.idAt);
     declare(source, declared.id, declared.idAt);
     const { note, ...look } = lookOf(source, declared.attrs, m);
     boxes.push({
@@ -2423,26 +2802,32 @@ function parseLines(lines, m) {
     if (!found || idAt === void 0 || (found[2] ?? "") === "") throw fail(source, 0, shape);
     return { box: boxAt(source, found[1] ?? "", idAt), text: found[2] ?? "" };
   }
+  function readLine(source, edge2) {
+    const text2 = source.text;
+    const from = endAt(source, edge2[1] ?? "", edge2.indices?.[1]?.[0] ?? 0, "from");
+    const to = endAt(source, edge2[2] ?? "", edge2.indices?.[2]?.[0] ?? 0, "to");
+    const at = skipSpaces(text2, edge2[0].length);
+    if (text2[at] !== ":") return { from, to, at };
+    const named = readName(source, at + 1, m);
+    if (named.value === "") throw fail(source, at, m.emptyLabel);
+    return { from, to, label: named.value, at: named.rest };
+  }
+  function readPath(source, edge2) {
+    const { from, to, label: label2, at } = readLine(source, edge2);
+    if (at < source.text.length) throw fail(source, at, source.text[at] === "[" ? m.pathNoAttrs : m.edgeShape);
+    return { from, to, ...label2 !== void 0 ? { label: label2 } : {} };
+  }
   function readEdge(source, edge2) {
     const text2 = source.text;
-    const from = boxAt(source, edge2[1] ?? "", edge2.indices?.[1]?.[0] ?? 0);
-    const to = boxAt(source, edge2[2] ?? "", edge2.indices?.[2]?.[0] ?? 0);
-    let at = skipSpaces(text2, edge2[0].length);
-    let label2;
-    if (text2[at] === ":") {
-      const named = readName(source, at + 1, m);
-      if (named.value === "") throw fail(source, at, m.emptyLabel);
-      label2 = named.value;
-      at = named.rest;
-    }
+    const { from, to, label: label2, at } = readLine(source, edge2);
     if (at < text2.length && text2[at] !== "[") throw fail(source, at, m.edgeShape);
     const attrs2 = at < text2.length ? readAttrs(source, at, ATTRS.edge, m) : /* @__PURE__ */ new Map();
     const tag = attrs2.get("tag");
     const carried = attrs2.get("carry");
     if (tag && carried) throw fail(source, Math.max(tag.at, carried.at), m.carryTwice);
     if (carried && !isOneOf(CARRIES, carried.value)) throw fail(source, carried.at, m.badCarry);
-    const side = attrs2.get("side");
-    if (side && !isOneOf(SIDES, side.value)) throw fail(source, side.at, m.badSide);
+    const side2 = attrs2.get("side");
+    if (side2 && !isOneOf(SIDES, side2.value)) throw fail(source, side2.at, m.badSide);
     let carry = { kind: "envelope" };
     if (tag) carry = { kind: "tag", text: tag.value };
     else if (carried) carry = carried.value === "coin" ? { kind: "coin" } : { kind: "none" };
@@ -2452,7 +2837,7 @@ function parseLines(lines, m) {
       to,
       ...label2 !== void 0 ? { label: label2 } : {},
       carry,
-      ...side ? { labelSide: side.value } : {}
+      ...side2 ? { labelSide: side2.value } : {}
     };
   }
   function readSet(source) {
@@ -2520,11 +2905,12 @@ var declareBox = (b) => `box ${b.id}${shown(b.id, b.name)}${attrs([
   ["color", b.color],
   ["icon", b.icon]
 ])}`;
+var line = (from, to, label2) => `${from} -> ${to}${label2 === void 0 ? "" : `: ${name(label2)}`}`;
 function event(e) {
   switch (e.type) {
     case "edge": {
       const carry = e.carry.kind === "tag" ? [["tag", e.carry.text]] : e.carry.kind === "envelope" ? [] : [["carry", e.carry.kind]];
-      return `${e.from} -> ${e.to}${e.label === void 0 ? "" : `: ${name(e.label)}`}${attrs([...carry, ["side", e.labelSide]])}`;
+      return `${line(e.from, e.to, e.label)}${attrs([...carry, ["side", e.labelSide]])}`;
     }
     case "action":
       return `act ${e.box}: ${e.label}`;
@@ -2562,16 +2948,17 @@ end`);
     const region = regions.find((r) => r.id === run.region);
     const open = declared.has(run.region) || !region ? `group ${run.region}` : declareRegion(region);
     declared.add(run.region);
-    blocks.push([open, ...lines.map((line) => `  ${line}`), "end"].join("\n"));
+    blocks.push([open, ...lines.map((line2) => `  ${line2}`), "end"].join("\n"));
   }
   return blocks;
 }
 function printNotation(diagram) {
   const blocks = [`${diagram.kind} ${name(diagram.title)}${attrs([["view", diagram.view]])}`, ...declarations(diagram)];
   if (diagram.strip) blocks.push(`strip ${key(diagram.strip.title)}: ${diagram.strip.fields.map(field).join(", ")}`);
+  if (diagram.state) blocks.push(diagram.state.paths.map((p) => line(p.from, p.to, p.label)).join("\n"));
   for (const step of diagram.steps) {
     const body = step.body.split("\n");
-    const say = body.length === 1 ? [`  say ${step.body}`] : ["  say", ...body.map((line) => line === "" ? "" : `    ${line}`)];
+    const say = body.length === 1 ? [`  say ${step.body}`] : ["  say", ...body.map((line2) => line2 === "" ? "" : `    ${line2}`)];
     blocks.push(
       [`step ${step.title}`, ...say, ...step.code === void 0 ? [] : [`  code ${step.code}`], ...step.events.map((e) => `  ${event(e)}`)].join("\n")
     );
@@ -2850,13 +3237,46 @@ var LOOK = {
   region: { pad: 18, gap: 10, radius: 14, inset: 14, icon: 24, iconRadius: 7, iconScale: 0.68, nameY: 58, line: 16, minH: 108 },
   architecture: { columns: 4, columnGap: 56, maxColumnGap: 160, rowGap: 44, labelRoom: 16 },
   sequence: { columnGap: 40, labelRoom: 16, firstRow: 22, rowGap: 14, stepGap: 8, minPitch: 40, tail: 18, selfW: 34, selfH: 18 },
-  edge: { inset: 3, arrow: 6, arrowHalf: 3.5, parallel: 5, ghostDash: 5, flowDash: 9 },
+  /**
+   * 状態遷移図 (#3163)。状態は `columns` つずつ並べて次の段へ折り返し、段の間 (`rowGap`) の真ん中を、段をまたぐ線が通る。
+   * `start` と `end` は始まりと終わりの印の半径と、印の中の丸の半径。`drop` は最初の状態の上端から始まりの印の中心まで、
+   * `below` は状態の下端から終わりの印の中心まで、`beside` は状態の右端から右に置く終わりの印の中心まで、`text` は印の中心から字の左端まで。
+   * `loop` は同じ状態へ戻る輪の幅と深さ。`side` は脇道の囲みの内側の余白、1 段目の上端との間、脇道へ入る線が横に通る所の囲みの下端からの離れ、
+   * 点線の線が箱へ入る所を箱の端から離す幅。
+   * `ghost` は脇道の点線の札で、絵柄を左に、名前と下の字を右に並べる (#3171)。`h` は札の高さ、`pad` は左右の余白、`gap` は絵柄と字の間、
+   * `nameY` と `subY` は札の真ん中から名前と下の字の基準線まで。
+   * `done` は出た状態の右上の済んだ印の半径と、箱の右上の角からの離れ。
+   * `loop` の `samples` は同じ状態へ戻る弧を区切る点の数、`badgeAt` は弧の段の番号を弧の上端から深さのどこに置くかの割合。
+   * `pastLabel` は段が終わった後に薄く残す線の名前の濃さ (#3171)
+   */
+  state: {
+    columns: 4,
+    columnGap: 64,
+    rowGap: 108,
+    labelRoom: 16,
+    start: 7,
+    end: { r: 9, inner: 5 },
+    drop: 56,
+    below: 64,
+    beside: 38,
+    text: 16,
+    loop: { w: 24, h: 34, samples: 12, badgeAt: 0.6 },
+    side: { pad: 16, gap: 76, lane: 30, entry: 28 },
+    ghost: { h: 52, pad: 12, gap: 10, nameY: -2, subY: 14 },
+    done: { r: 6.5, inset: 13 },
+    pastLabel: 0.85
+  },
+  /** `bend` は線の曲がりを丸める半径 (#3171) */
+  edge: { inset: 3, arrow: 6, arrowHalf: 3.5, parallel: 5, ghostDash: 5, flowDash: 9, bend: 12 },
   label: { h: 20, padX: 9, radius: 10, offset: 22, side: 14, search: 4, searchMax: 400, soft: 6 },
   action: { h: 22, padX: 10, radius: 11 },
   badge: { r: 9.5, ring: 9, inset: 4, along: 14, short: 44 },
   carrier: { envW: 24, envH: 17, coinR: 6.5, coinIn: 3.8, tagH: 18, tagPadX: 8, samples: 16 },
-  strip: { h: 72, line: 44, pad: 12, icon: 24, titleX: 44, fieldGap: 22, sepInset: 14, tagGap: 6, tagH: 15, tagPadX: 7, nameY: 22, valueY: 43 },
-  stroke: { hair: 1, edge: 1.7, edgeOn: 2.25, arrow: 1.5, flow: 1.3, halo: 7, on: 1.75, glyph: 2, lifeline: 1.2, envelope: 1.5, badgeRing: 1.5 },
+  /**
+   * `trail` は状態遷移図の帯の最後の、通った状態の点 (#3171)。`r` は点の半径、`step` は点の中心どうしの間、`now` は変わった値の欄の名前の横の点の半径と、名前からの離れ
+   */
+  strip: { h: 72, line: 44, pad: 12, icon: 24, titleX: 44, fieldGap: 22, sepInset: 14, tagGap: 6, tagH: 15, tagPadX: 7, nameY: 22, valueY: 43, trail: { r: 5.4, step: 16 }, now: { r: 3, gap: 7 } },
+  stroke: { hair: 1, edge: 1.7, edgeOn: 2.25, arrow: 1.5, flow: 1.3, halo: 7, on: 1.75, glyph: 2, lifeline: 1.2, envelope: 1.5, badgeRing: 1.5, path: 1.6, end: 1.6, done: 1.2, trail: 1.2 },
   shadow: { near: 0.8, far: 4, nearY: 1, farY: 3 },
   mini: { w: 168, pad: 8, title: 14, inset: 12, radius: 10 },
   /**
@@ -2870,9 +3290,9 @@ var LOOK = {
    */
   follow: { aspect: 0.75, minH: 320, fitMinH: 160, ease: 0.6, narrow: 440, badgeRoom: 8, headRoom: 10, head: { pad: 8, h: 40, nameY: 17, subY: 31 } },
   /** 色を混ぜる割合 (%) */
-  mix: { icon: 14, regionIcon: 16, regionIconEdge: 34, cap: 12, capEdge: 42, badgePast: 14, badgePastEdge: 70, mini: 62, miniBand: 16, miniBandEdge: 36, view: 6 },
+  mix: { icon: 14, regionIcon: 16, regionIconEdge: 34, cap: 12, capEdge: 42, badgePast: 14, badgePastEdge: 70, mini: 62, miniBand: 16, miniBandEdge: 36, view: 6, side: 4, sideEdge: 36, ghostEdge: 60, path: 55, past: 72 },
   /** 字の並びの基準線を、置きたい高さの真ん中からどれだけ下げるか */
-  baseline: { label: 3.8, badge: 3.5, carrier: 3.7, stripTitle: 4.5, tag: 3.6, action: 3.8 },
+  baseline: { label: 3.8, badge: 3.5, carrier: 3.7, stripTitle: 4.5, tag: 3.6, action: 3.8, mark: 4 },
   /** 浮いて出る物が下から上がる長さと、弾んで出る物の始まりの大きさ */
   rise: 5,
   popFrom: 0.4,
@@ -2913,7 +3333,9 @@ var MOTION = {
   popFade: 0.4,
   untilFade: 0.2,
   /** 段の止め絵を撮る時刻を、段の終わりからどれだけ前にするか */
-  still: 0.45
+  still: 0.45,
+  /** 状態遷移図で、札が状態を出てから済んだ印が出るまで */
+  done: 0.3
 };
 var READABLE_PX = 10.5;
 var EASE = {
@@ -2931,7 +3353,13 @@ var FIGURE_TEXT = {
     pause: "\u6B62\u3081\u308B",
     play: "\u52D5\u304B\u3059",
     next: "\u6B21\u306E\u6BB5",
-    steps: (title) => `${title} \u306E\u6BB5`
+    steps: (title) => `${title} \u306E\u6BB5`,
+    side: "\u8107\u9053",
+    sideNote: "\u4ECA\u56DE\u306F\u901A\u3089\u306A\u3044",
+    sideFrom: (count) => `${count} \u3064\u306E\u72B6\u614B\u304B\u3089\u5165\u308C\u308B`,
+    trail: "\u901A\u3063\u305F\u72B6\u614B",
+    start: "\u59CB\u307E\u308A",
+    end: "\u7D42\u308F\u308A"
   },
   en: {
     cannotDraw: (detail) => `Cannot draw the diagram: ${detail}`,
@@ -2940,7 +3368,13 @@ var FIGURE_TEXT = {
     pause: "Pause",
     play: "Play",
     next: "Next step",
-    steps: (title) => `Steps of ${title}`
+    steps: (title) => `Steps of ${title}`,
+    side: "Side path",
+    sideNote: "Not taken this time",
+    sideFrom: (count) => `Enterable from ${count} ${count === 1 ? "state" : "states"}`,
+    trail: "States passed",
+    start: "Start",
+    end: "End"
   }
 };
 
@@ -3035,12 +3469,12 @@ function placeLabel(request, obstacles) {
   const segment = longest(request.points);
   const mx = (segment.a[0] + segment.b[0]) / 2;
   const my = (segment.a[1] + segment.b[1]) / 2;
-  const side = request.side ?? (segment.vertical ? "right" : "above");
+  const side2 = request.side ?? (segment.vertical ? "right" : "above");
   const { offset, side: sideGap } = LOOK.label;
-  const base = side === "above" ? { x: mx - w / 2, y: my - offset - h / 2, w, h } : side === "below" ? { x: mx - w / 2, y: my + offset - h / 2, w, h } : side === "left" ? { x: mx - sideGap - w, y: my - h / 2, w, h } : { x: mx + sideGap, y: my - h / 2, w, h };
-  const away = side === "above" ? [0, -1] : side === "below" ? [0, 1] : side === "left" ? [-1, 0] : [1, 0];
+  const base = side2 === "above" ? { x: mx - w / 2, y: my - offset - h / 2, w, h } : side2 === "below" ? { x: mx - w / 2, y: my + offset - h / 2, w, h } : side2 === "left" ? { x: mx - sideGap - w, y: my - h / 2, w, h } : { x: mx + sideGap, y: my - h / 2, w, h };
+  const away = side2 === "above" ? [0, -1] : side2 === "below" ? [0, 1] : side2 === "left" ? [-1, 0] : [1, 0];
   const slideAxis = [Math.abs(away[1]), Math.abs(away[0])];
-  const slideMax = side === "above" || side === "below" ? w : h * 4;
+  const slideMax = side2 === "above" || side2 === "below" ? w : h * 4;
   const clear = (rect) => obstacles.hard.every((box) => gapBetween(rect, box) >= LOOK.gap) && obstacles.soft.every((other) => gapBetween(rect, other) >= LOOK.label.soft);
   const { search, searchMax } = LOOK.label;
   for (let d = 0; d <= searchMax; d += search) {
@@ -3066,29 +3500,36 @@ function fieldWidth(diagram, name2) {
   const both = value2 + (tag > 0 ? (value2 > 0 ? LOOK.strip.tagGap : 0) + tag : 0);
   return Math.max(textWidth(name2, TYPE.fieldName), both);
 }
-function stripNeed(diagram) {
+var trailWidth = (trail) => Math.max(textWidth(trail.title, TYPE.fieldName), trail.states.length * LOOK.strip.trail.step);
+function stripNeed(diagram, trail) {
   if (!diagram.strip) return 0;
   const { titleX, fieldGap, pad: pad2 } = LOOK.strip;
   const start = titleX + textWidth(diagram.strip.title, TYPE.stripTitle) + fieldGap;
-  return start + diagram.strip.fields.reduce((sum, name2) => sum + fieldWidth(diagram, name2) + fieldGap, 0) - fieldGap + pad2;
+  const widths = [...diagram.strip.fields.map((name2) => fieldWidth(diagram, name2)), ...trail ? [trailWidth(trail)] : []];
+  return start + widths.reduce((sum, w) => sum + w + fieldGap, 0) - fieldGap + pad2;
 }
-function layoutStrip(diagram, x, y, width) {
+function layoutStrip(diagram, x, y, width, trail) {
   if (!diagram.strip) return void 0;
-  const { titleX, fieldGap, pad: pad2, line, h } = LOOK.strip;
+  const { titleX, fieldGap, pad: pad2, line: line2, h } = LOOK.strip;
   const start = titleX + textWidth(diagram.strip.title, TYPE.stripTitle) + fieldGap;
   const fields = [];
   let cx = start;
   let row = 0;
-  for (const name2 of diagram.strip.fields) {
-    const w = fieldWidth(diagram, name2);
+  const place = (w) => {
     if (cx > start && cx + w > width - pad2) {
       cx = start;
       row++;
     }
-    fields.push({ name: name2, x: x + cx, y: y + row * line, w });
+    const at = { x: x + cx, y: y + row * line2 };
     cx += w + fieldGap;
+    return at;
+  };
+  for (const name2 of diagram.strip.fields) {
+    const w = fieldWidth(diagram, name2);
+    fields.push({ name: name2, ...place(w), w });
   }
-  return { x, y, w: width, h: h + row * line, title: diagram.strip.title, fields };
+  const laidTrail = trail ? { ...trail, ...place(trailWidth(trail)), w: trailWidth(trail) } : void 0;
+  return { x, y, w: width, h: h + row * line2, title: diagram.strip.title, fields, ...laidTrail ? { trail: laidTrail } : {} };
 }
 function shiftContent(layout, dx, dy) {
   const move = (rect) => {
@@ -3104,16 +3545,25 @@ function shiftContent(layout, dx, dy) {
     region.y += dy;
     move(region.header);
   }
-  for (const line of layout.lifelines) {
-    line.x += dx;
-    line.y1 += dy;
-    line.y2 += dy;
+  for (const line2 of layout.lifelines) {
+    line2.x += dx;
+    line2.y1 += dy;
+    line2.y2 += dy;
   }
   for (const edge2 of layout.edges) {
     edge2.points = edge2.points.map(([px2, py]) => [px2 + dx, py + dy]);
     if (edge2.settle) edge2.settle = [edge2.settle[0] + dx, edge2.settle[1] + dy];
   }
   for (const label2 of layout.labels) move(label2);
+  for (const path2 of layout.paths) {
+    path2.points = path2.points.map(([px2, py]) => [px2 + dx, py + dy]);
+    if (path2.label) move(path2.label);
+  }
+  for (const end of layout.ends) {
+    end.x += dx;
+    end.y += dy;
+  }
+  if (layout.side) move(layout.side);
   for (const action2 of layout.actions) move(action2);
   for (const badge2 of layout.badges) {
     badge2.x += dx;
@@ -3125,6 +3575,10 @@ function shiftContent(layout, dx, dy) {
       field2.x += dx;
       field2.y += dy;
     }
+    if (layout.strip.trail) {
+      layout.strip.trail.x += dx;
+      layout.strip.trail.y += dy;
+    }
   }
 }
 function cornerBadge(events, step, layout) {
@@ -3156,7 +3610,7 @@ function groupsOf(diagram) {
   if (loose.length > 0) groups.push({ members: loose });
   return groups;
 }
-var vertical = (side) => side === "left" || side === "right";
+var vertical = (side2) => side2 === "left" || side2 === "right";
 function placeBoxes(diagram, groups) {
   const columns = LOOK.architecture.columns;
   const edges = edgesOf(diagram).map((e) => e.edge);
@@ -3223,10 +3677,10 @@ function nameLines(name2) {
   return [name2.slice(0, at), name2.slice(at + 1)];
 }
 function headerSize(region) {
-  const { icon, nameY, line, inset } = LOOK.region;
+  const { icon, nameY, line: line2, inset } = LOOK.region;
   const lines = nameLines(region.name);
   const w = Math.max(icon, ...lines.map((l) => textWidth(l, TYPE.regionName)), textWidth(region.note ?? "", TYPE.regionNote));
-  const h = nameY - inset + (lines.length - 1) * line + (region.note ? line : 0) + LOOK.gap / 2;
+  const h = nameY - inset + (lines.length - 1) * line2 + (region.note ? line2 : 0) + LOOK.gap / 2;
   return { w, h, lines };
 }
 function arrange(diagram, groups, slots, rooms) {
@@ -3403,7 +3857,7 @@ function arrange(diagram, groups, slots, rooms) {
       )
     );
   }
-  const layout = { kind: "architecture", width: 0, height: 0, regions, boxes, lifelines: [], edges: sceneEdges, labels, actions: [], badges: [] };
+  const layout = { kind: "architecture", width: 0, height: 0, regions, boxes, lifelines: [], edges: sceneEdges, labels, actions: [], badges: [], paths: [], ends: [] };
   const shift = labels.length > 0 ? Math.max(0, margin + LOOK.label.soft - Math.min(...labels.map((l) => l.x))) : 0;
   if (shift > 0) shiftContent(layout, shift, 0);
   const contentRight = Math.max(...boxes.map((b) => b.x + b.w + R.pad), ...labels.map((l) => l.x + l.w + LOOK.label.soft), ...sceneEdges.flatMap((e) => e.points.map((p) => p[0] + R.pad)));
@@ -3510,11 +3964,11 @@ function layoutSequence(diagram) {
       let above;
       let under;
       if (event2.type === "edge") {
-        const side = event2.labelSide ?? "above";
+        const side2 = event2.labelSide ?? "above";
         const self = event2.from === event2.to;
         const named = event2.label !== void 0;
-        above = named && side === "above" ? L.offset + L.h / 2 : gap;
-        under = self ? Q.selfH + gap : named && side === "below" ? L.offset + L.h / 2 : gap;
+        above = named && side2 === "above" ? L.offset + L.h / 2 : gap;
+        under = self ? Q.selfH + gap : named && side2 === "below" ? L.offset + L.h / 2 : gap;
       } else {
         above = LOOK.action.h / 2;
         under = LOOK.action.h / 2;
@@ -3561,7 +4015,7 @@ function layoutSequence(diagram) {
     const soft = [...labels.filter((l) => l.step === request.step), ...actions];
     labels.push(placeLabel(request, { hard: boxes, soft }));
   }
-  const layout = { kind: "sequence", width: 0, height: 0, regions: [], boxes, lifelines, edges, labels, actions, badges: [] };
+  const layout = { kind: "sequence", width: 0, height: 0, regions: [], boxes, lifelines, edges, labels, actions, badges: [], paths: [], ends: [] };
   const lefts = [...boxes.map((b) => b.x), ...labels.map((l) => l.x), ...actions.map((a) => a.x)];
   const shift = Math.max(0, margin - Math.min(...lefts));
   if (shift > 0) shiftContent(layout, shift, 0);
@@ -3588,6 +4042,301 @@ function badges(diagram, layout) {
   });
 }
 
+// src/layout/state.ts
+var isEnd = (id) => STATE_ENDS.includes(id);
+function visitOrder(diagram) {
+  const order = [];
+  const add = (id) => {
+    if (!isEnd(id) && !order.includes(id)) order.push(id);
+  };
+  for (const { edge: edge2 } of edgesOf(diagram)) {
+    add(edge2.from);
+    add(edge2.to);
+  }
+  return order;
+}
+function carrierHalf(carry) {
+  const C = LOOK.carrier;
+  if (carry.kind === "tag") return (textWidth(carry.text, hasWide(carry.text) ? TYPE.carrierJa : TYPE.carrier) + C.tagPadX * 2) / 2;
+  if (carry.kind === "coin") return C.coinR;
+  return C.envW / 2;
+}
+var same = (a, b) => a.from === b.from && a.to === b.to;
+function layoutState(diagram, lang) {
+  const { box: B, state: T, margin, gap } = LOOK;
+  const inset = LOOK.edge.inset;
+  const words = FIGURE_TEXT[lang];
+  const colors = boxColors(diagram);
+  const steps = edgesOf(diagram);
+  const walked = visitOrder(diagram);
+  const ghosts = diagram.boxes.map((b) => b.id).filter((id) => !walked.includes(id));
+  const notTaken = (diagram.state?.paths ?? []).filter((p) => !steps.some(({ edge: edge2 }) => same(edge2, p)));
+  const lines = [...steps.map(({ edge: edge2 }) => edge2), ...notTaken];
+  const G = T.ghost;
+  const ghostWidth = (id) => {
+    const source = diagram.boxes.find((b) => b.id === id);
+    return G.pad * 2 + B.icon + G.gap + Math.max(textWidth(source?.name ?? id, TYPE.boxName), textWidth(source?.sub ?? "", TYPE.boxSub));
+  };
+  const widths = new Map(diagram.boxes.map((b) => [b.id, ghosts.includes(b.id) ? ghostWidth(b.id) : boxWidth(diagram, b.id, true)]));
+  const columnCount = Math.max(1, Math.min(T.columns, walked.length));
+  const rowCount = Math.max(1, Math.ceil(walked.length / T.columns));
+  const slot = new Map(
+    walked.map((id, k) => {
+      const row = Math.floor(k / T.columns);
+      const at = k % T.columns;
+      return [id, { row, col: row % 2 === 0 ? at : columnCount - 1 - at }];
+    })
+  );
+  const colW = Array.from({ length: columnCount }, (_, c) => Math.max(B.minW, ...walked.filter((id) => slot.get(id)?.col === c).map((id) => widths.get(id) ?? B.minW)));
+  const between = Array.from({ length: Math.max(0, columnCount - 1) }, () => T.columnGap);
+  for (const line2 of lines) {
+    const a = slot.get(line2.from);
+    const b = slot.get(line2.to);
+    if (!a || !b || line2.label === void 0 || a.row !== b.row || Math.abs(a.col - b.col) !== 1) continue;
+    const i = Math.min(a.col, b.col);
+    between[i] = Math.max(between[i] ?? 0, textWidth(line2.label, labelStyle(line2.label)) + LOOK.label.padX * 2 + T.labelRoom * 2);
+  }
+  const colLeft = [];
+  for (let c = 0; c < columnCount; c++) colLeft.push(c === 0 ? margin : colLeft[c - 1] + colW[c - 1] + between[c - 1]);
+  const center = (c) => colLeft[c] + colW[c] / 2;
+  const isGhost = (id) => ghosts.includes(id);
+  const enteringFrom = new Set(notTaken.filter((p) => isGhost(p.to) && !isGhost(p.from) && !isEnd(p.from)).map((p) => p.from));
+  const notes = [words.sideNote, ...enteringFrom.size > 0 ? [words.sideFrom(enteringFrom.size)] : []];
+  const titleW = Math.max(textWidth(words.side, TYPE.regionName), ...notes.map((note) => textWidth(note, TYPE.regionNote)));
+  const sideH = T.side.pad * 2 + Math.max(G.h, TYPE.regionName.size + LOOK.region.line * notes.length + T.side.pad / 4);
+  const starts = lines.some((line2) => line2.from === "start");
+  const top0 = margin + (ghosts.length > 0 ? sideH + T.side.gap : starts ? T.start + T.drop : 0);
+  const rowY = (row) => top0 + row * (B.h + T.rowGap);
+  const boxOf = (id, cx, y, ghost) => {
+    const source = diagram.boxes.find((b) => b.id === id);
+    const w = widths.get(id) ?? B.minW;
+    const h = ghost ? G.h : B.h;
+    return {
+      id,
+      name: source?.name ?? id,
+      ...source?.sub !== void 0 ? { sub: source.sub } : {},
+      ...source?.icon !== void 0 ? { icon: source.icon } : {},
+      color: colors.get(id) ?? "slate",
+      x: cx - w / 2,
+      y,
+      w,
+      h,
+      cx,
+      cy: y + h / 2,
+      ...ghost ? { ghost: true } : {}
+    };
+  };
+  const boxes = walked.map((id) => {
+    const s = slot.get(id);
+    return boxOf(id, center(s.col), rowY(s.row), false);
+  });
+  const byId = new Map(boxes.map((b) => [b.id, b]));
+  const below = (box) => boxes.some((other) => other !== box && Math.abs(other.cx - box.cx) < 0.5 && other.y > box.y);
+  const ends = [];
+  const first = boxes[0];
+  const contentRight = Math.max(...boxes.map((b) => b.x + b.w));
+  let side2;
+  const lane = margin + sideH + T.side.lane;
+  if (ghosts.length > 0) {
+    const sourcesOf = (id) => notTaken.filter((p) => p.to === id).flatMap((p) => byId.get(p.from) ?? []);
+    const all = ghosts.flatMap(sourcesOf);
+    const x = Math.max(margin, Math.min(...all.length > 0 ? all.map((b) => b.x) : [margin + T.side.pad]) - T.side.pad);
+    let cursor = x + T.side.pad + titleW + gap * 2;
+    const wanted = ghosts.map((id) => {
+      const from = sourcesOf(id);
+      return { id, cx: from.length > 0 ? from.reduce((sum, b) => sum + b.cx, 0) / from.length : cursor };
+    });
+    wanted.sort((a, b) => a.cx - b.cx);
+    let right = x;
+    for (const { id, cx } of wanted) {
+      const w = widths.get(id) ?? B.minW;
+      const left = Math.max(cx - w / 2, cursor);
+      const ghost = boxOf(id, left + w / 2, margin + (sideH - G.h) / 2, true);
+      boxes.push(ghost);
+      byId.set(id, ghost);
+      const finishes = notTaken.some((p) => p.from === id && p.to === "finish");
+      if (finishes) ends.push({ kind: "finish", x: ghost.x + ghost.w + T.beside, y: ghost.cy, r: T.end.r, ghost: true, text: "", box: id });
+      right = finishes ? ghost.x + ghost.w + T.beside + T.end.r : ghost.x + ghost.w;
+      cursor = right + gap * 2;
+    }
+    const rightmost = Math.max(right + T.side.pad, contentRight);
+    side2 = { x, y: margin, w: rightmost - x, h: sideH, title: words.side, notes };
+  }
+  if (first && starts) {
+    const reach = first.cx + T.start + T.text + textWidth(words.start, TYPE.regionNote) + gap;
+    const y = side2 && reach < side2.x ? side2.y + T.side.pad + T.start : first.y - T.drop;
+    ends.unshift({ kind: "start", x: first.cx, y, r: T.start, ghost: false, text: words.start });
+  }
+  for (const box of boxes.filter((b) => !b.ghost && lines.some((line2) => line2.from === b.id && line2.to === "finish"))) {
+    ends.push(
+      below(box) ? { kind: "finish", x: box.x + box.w + T.beside, y: box.cy, r: T.end.r, ghost: false, text: words.end, box: box.id } : { kind: "finish", x: box.cx, y: box.y + box.h + T.below, r: T.end.r, ghost: false, text: words.end, box: box.id }
+    );
+  }
+  const between2 = (a, b) => {
+    const sa = slot.get(a.id);
+    const sb = slot.get(b.id);
+    if (!sa || !sb) return [[a.cx, a.y + a.h], [b.cx, b.y - inset]];
+    if (sa.row === sb.row && Math.abs(sa.col - sb.col) === 1) {
+      return b.cx > a.cx ? [[a.x + a.w, a.cy], [b.x - inset, b.cy]] : [[a.x, a.cy], [b.x + b.w + inset, b.cy]];
+    }
+    if (sa.row === sb.row) {
+      const y2 = a.y + a.h + T.rowGap / 4;
+      return [[a.cx, a.y + a.h], [a.cx, y2], [b.cx, y2], [b.cx, b.y + b.h + inset]];
+    }
+    if (sb.row > sa.row) {
+      if (Math.abs(a.cx - b.cx) < 0.5) return [[a.cx, a.y + a.h], [b.cx, b.y - inset]];
+      const y2 = a.y + a.h + T.rowGap / 2;
+      return [[a.cx, a.y + a.h], [a.cx, y2], [b.cx, y2], [b.cx, b.y - inset]];
+    }
+    if (Math.abs(a.cx - b.cx) < 0.5) return [[a.cx, a.y], [b.cx, b.y + b.h + inset]];
+    const y = b.y + b.h + T.rowGap / 2;
+    return [[a.cx, a.y], [a.cx, y], [b.cx, y], [b.cx, b.y + b.h + inset]];
+  };
+  const entryOf = (from, to) => {
+    const sources = notTaken.filter((p) => p.to === to.id).flatMap((p) => byId.get(p.from) ?? []).sort((a, b) => a.cx - b.cx);
+    const k = sources.findIndex((b) => b.id === from);
+    if (sources.length <= 1) return Math.min(Math.max(sources[0]?.cx ?? to.cx, to.x + T.side.entry), to.x + to.w - T.side.entry);
+    return to.x + T.side.entry + (to.w - T.side.entry * 2) * Math.max(0, k) / (sources.length - 1);
+  };
+  const exitX = (box) => starts && box === first ? box.cx + T.side.entry : box.cx;
+  const finishOf = (id) => ends.find((e) => e.kind === "finish" && e.box === id);
+  const loopOf = (box) => {
+    const { w, h, samples } = T.loop;
+    const bottom2 = box.y + box.h;
+    const p0 = [box.cx + w / 2, bottom2];
+    const c1 = [box.cx + w * 3 / 4, bottom2 + h * 4 / 3];
+    const c2 = [box.cx - w * 3 / 4, bottom2 + h * 4 / 3];
+    const p3 = [box.cx - w / 2, bottom2 + inset];
+    return Array.from({ length: samples + 1 }, (_, k) => {
+      const t = k / samples;
+      const u = 1 - t;
+      const at = (i) => u * u * u * p0[i] + 3 * u * u * t * c1[i] + 3 * u * t * t * c2[i] + t * t * t * p3[i];
+      return [at(0), at(1)];
+    });
+  };
+  const route = (from, to) => {
+    if (from === "start") {
+      const start = ends.find((e) => e.kind === "start");
+      const target = byId.get(to);
+      if (!start || !target) return [];
+      return [[start.x, start.y + start.r], [target.cx, target.y - inset]];
+    }
+    const a = byId.get(from);
+    if (!a) return [];
+    if (to === "finish") {
+      const end = finishOf(from);
+      if (!end) return [];
+      return Math.abs(end.x - a.cx) < 0.5 ? [[a.cx, a.y + a.h], [a.cx, end.y - end.r - inset]] : [[a.x + a.w, a.cy], [end.x - end.r - inset, a.cy]];
+    }
+    const b = byId.get(to);
+    if (!b) return [];
+    if (from === to) return loopOf(a);
+    if (b.ghost && !a.ghost) {
+      const sx = exitX(a);
+      const ex = entryOf(from, b);
+      return Math.abs(sx - ex) < 0.5 ? [[sx, a.y], [ex, b.y + b.h + inset]] : [[sx, a.y], [sx, lane], [ex, lane], [ex, b.y + b.h + inset]];
+    }
+    if (a.ghost && b.ghost) return [[a.x + a.w, a.cy], [b.x - inset, b.cy]];
+    if (a.ghost) return [[a.cx, a.y + a.h], [a.cx, lane], [b.cx, lane], [b.cx, b.y - inset]];
+    return between2(a, b);
+  };
+  const settleOf = (edge2) => {
+    const target = byId.get(edge2.to);
+    if (target) return [target.cx, target.cy + B.iconY];
+    const end = edge2.to === "finish" ? finishOf(edge2.from) : void 0;
+    if (!end) return void 0;
+    const from = byId.get(edge2.from);
+    return from && Math.abs(end.x - from.cx) < 0.5 ? [end.x - end.r - gap - carrierHalf(edge2.carry), end.y] : [end.x, end.y + end.r + gap + LOOK.carrier.tagH / 2];
+  };
+  const sceneEdges = steps.map(({ step, event: event2, edge: edge2 }) => {
+    const settle = settleOf(edge2);
+    return {
+      step,
+      event: event2,
+      from: edge2.from,
+      to: edge2.to,
+      points: route(edge2.from, edge2.to),
+      color: colorOf(edge2, colors),
+      carry: edge2.carry,
+      ...settle ? { settle } : {}
+    };
+  });
+  for (const e of sceneEdges) {
+    if (e.points.length !== 2 || !sceneEdges.some((o) => o.from === e.to && o.to === e.from && o.points.length === 2)) continue;
+    const [p, q] = e.points;
+    const flat = Math.abs(q[1] - p[1]) < Math.abs(q[0] - p[0]);
+    const d = (e.from < e.to ? 1 : -1) * LOOK.edge.parallel;
+    e.points = e.points.map(([x, y]) => flat ? [x, y + d] : [x + d, y]);
+  }
+  const paths = notTaken.map((p) => ({ from: p.from, to: p.to, points: route(p.from, p.to) }));
+  const labels = [];
+  const soft = side2 ? [{ x: side2.x, y: side2.y, w: T.side.pad + titleW, h: side2.h }] : [];
+  for (const e of sceneEdges) {
+    const source = diagram.steps[e.step]?.events[e.event];
+    if (source?.type !== "edge" || source.label === void 0) continue;
+    const style = labelStyle(source.label);
+    if (e.from === e.to) {
+      const w = textWidth(source.label, style) + LOOK.label.padX * 2;
+      const bottom2 = Math.max(...e.points.map(([, y]) => y));
+      labels.push({ step: e.step, event: e.event, text: source.label, family: style.family, color: e.color, x: (e.points[0]?.[0] ?? 0) - T.loop.w / 2 - w / 2, y: bottom2 + LOOK.label.soft, w, h: LOOK.label.h });
+      continue;
+    }
+    const side22 = source.labelSide ?? (e.to === "finish" ? "left" : void 0);
+    labels.push(
+      placeLabel(
+        { step: e.step, event: e.event, text: source.label, points: e.points, color: e.color, ...side22 ? { side: side22 } : {} },
+        { hard: boxes, soft: [...soft, ...labels.filter((l) => l.step === e.step)] }
+      )
+    );
+  }
+  notTaken.forEach((p, i) => {
+    const path2 = paths[i];
+    if (p.label === void 0 || path2.points.length === 0) return;
+    const style = labelStyle(p.label);
+    const into = byId.get(p.to)?.ghost === true && byId.get(p.from)?.ghost !== true;
+    const rect = into ? { x: path2.points[0][0] + LOOK.label.soft, y: lane + LOOK.label.soft, w: textWidth(p.label, style) + LOOK.label.padX * 2, h: LOOK.label.h } : placeLabel({ step: -1, event: i, text: p.label, points: path2.points, color: "slate" }, { hard: boxes, soft });
+    path2.label = { x: rect.x, y: rect.y, w: rect.w, h: rect.h, text: p.label, family: style.family };
+  });
+  const layout = { kind: "state", width: 0, height: 0, regions: [], boxes, lifelines: [], edges: sceneEdges, labels, actions: [], badges: [], paths, ends, ...side2 ? { side: side2 } : {} };
+  const lefts = [...boxes.map((b) => b.x), ...labels.map((l) => l.x), ...paths.flatMap((p) => p.label ? [p.label.x] : [])];
+  const shift = Math.max(0, margin - Math.min(...lefts));
+  if (shift > 0) shiftContent(layout, shift, 0);
+  const endRight = (e) => e.x + (e.text === "" ? e.r : T.text + textWidth(e.text, TYPE.regionNote));
+  const rights = [
+    ...boxes.map((b) => b.x + b.w),
+    ...labels.map((l) => l.x + l.w),
+    ...ends.map(endRight),
+    ...sceneEdges.flatMap((e) => e.points.map((p) => p[0])),
+    ...paths.flatMap((p) => [...p.points.map((q) => q[0]), ...p.label ? [p.label.x + p.label.w] : []]),
+    ...side2 ? [side2.x + side2.w] : []
+  ];
+  const bottoms = [...boxes.map((b) => b.y + b.h), ...labels.map((l) => l.y + l.h), ...ends.map((e) => e.y + e.r), ...sceneEdges.flatMap((e) => e.points.map((p) => p[1]))];
+  const trail = { title: words.trail, states: walked.map((id) => ({ box: id, color: colors.get(id) ?? "slate" })) };
+  const width = Math.max(Math.max(...rights) + margin, stripNeed(diagram, trail) + margin * 2);
+  const bottom = Math.max(...bottoms, rowY(rowCount - 1) + B.h);
+  const strip2 = layoutStrip(diagram, margin, bottom + gap, width - margin * 2, trail);
+  layout.width = width;
+  layout.height = (strip2 ? strip2.y + strip2.h : bottom) + margin;
+  if (strip2) layout.strip = strip2;
+  layout.badges = diagram.steps.map((step, s) => {
+    const edge2 = sceneEdges.find((e) => e.step === s && e.points.length > 0);
+    if (!edge2) return cornerBadge(step.events, s, layout);
+    if (edge2.from === edge2.to) {
+      const right = Math.max(...edge2.points.map(([px2]) => px2));
+      const top = edge2.points[0][1];
+      const deep = Math.max(...edge2.points.map(([, py]) => py));
+      return { step: s, x: right + LOOK.badge.r + LOOK.badge.inset, y: top + (deep - top) * T.loop.badgeAt, color: edge2.color };
+    }
+    const [x, y] = badgeOnPath(edge2.points);
+    return { step: s, x, y, color: edge2.color };
+  });
+  return layout;
+}
+function colorOf(edge2, colors) {
+  if (edge2.carry.kind === "coin") return edgeColor(edge2, colors);
+  return colors.get(edge2.to === "finish" ? edge2.from : edge2.to) ?? "slate";
+}
+
 // src/timeline.ts
 function plan(step) {
   const out = { edges: [], events: [], busy: 0 };
@@ -3647,6 +4396,7 @@ function buildTimeline(diagram) {
       const later = named[k + 2];
       if (later) label2.end = Math.min(label2.end, later.start);
     });
+    if (diagram.kind === "state") for (const label2 of named) label2.after = { start: label2.end, end: last };
     labels.push(...named);
     for (const event2 of p.events) events.push({ step: s, event: event2.event, at: span.start + event2.at });
   });
@@ -3670,6 +4420,7 @@ function buildTimeline(diagram) {
     });
   }
   carriers.sort((x, y) => x.depart - y.depart);
+  const states = diagram.kind === "state" ? stateTimes(diagram, edges, last) : void 0;
   return {
     total,
     last,
@@ -3679,9 +4430,33 @@ function buildTimeline(diagram) {
     labels,
     badges: steps.map((span, s) => ({ step: s, appears: span.start })),
     events,
-    stills: steps.map((span) => span.end - MOTION.still)
+    stills: steps.map((span) => span.end - MOTION.still),
+    ...states ? { states } : {}
   };
 }
+var isEnd2 = (id) => STATE_ENDS.includes(id);
+function stateTimes(diagram, edges, last) {
+  const times = /* @__PURE__ */ new Map();
+  const of = (box) => {
+    const found = times.get(box) ?? { box, lit: [] };
+    times.set(box, found);
+    return found;
+  };
+  let on;
+  for (const edge2 of edges) {
+    const event2 = diagram.steps[edge2.step]?.events[edge2.event];
+    if (event2?.type !== "edge" || event2.from === event2.to) continue;
+    if (on) {
+      const left = of(on.box);
+      left.lit.push({ start: on.since, end: edge2.start });
+      if (on.box === event2.from && left.done === void 0) left.done = edge2.start + MOTION.done;
+      on = void 0;
+    }
+    if (!isEnd2(event2.to)) on = { box: event2.to, since: edge2.drawn };
+  }
+  if (on) of(on.box).lit.push({ start: on.since, end: last });
+  return [...times.values()];
+}
 
 // src/render/icons.ts
 var ICONS = {
@@ -3715,6 +4490,8 @@ var ICONS = {
   branch: "M -4 -4.5 v9 M 5 0.5 c0 4 -9 3 -9 6.5 M -6.2 -7 a2.2 2.2 0 1 0 4.4 0 a2.2 2.2 0 1 0 -4.4 0 M -6.2 7 a2.2 2.2 0 1 0 4.4 0 a2.2 2.2 0 1 0 -4.4 0 M 2.8 -2 a2.2 2.2 0 1 0 4.4 0 a2.2 2.2 0 1 0 -4.4 0",
   cloud: "M -7 6 h13 a4.5 4.5 0 0 0 0.5 -9 a6 6 0 0 0 -11.5 -1 a4.5 4.5 0 0 0 -2 10 z",
   refresh: "M 7 -3 a7.5 7.5 0 1 0 0.5 5 M 7.5 -8 v5 h-5",
+  undo: "M -7 -2 h10 a5 5 0 0 1 0 10 h-6 M -3 -6 l-4 4 l4 4",
+  yen: "M -6 -8 l6 7 l6 -7 M 0 -1 v9 M -5 1.5 h10 M -5 5 h10",
   layers: "M 0 -8 l9 4.5 l-9 4.5 l-9 -4.5 z M -9 2.5 l9 4.5 l9 -4.5",
   code: "M -4 -6 l-5 6 l5 6 M 4 -6 l5 6 l-5 6",
   paint: "M -8 8 c 0 -3 2 -5 4.5 -5 l 9 -9 l 3.5 3.5 l -9 9 c 0 2.5 -2 4.5 -5 4.5 z",
@@ -3729,7 +4506,30 @@ function glyph(name2, x, y, scale, cls = "dg-gl") {
   const d = name2 === void 0 ? void 0 : ICONS[name2];
   return d ? `<path class="${cls}" transform="translate(${r1(x)} ${r1(y)}) scale(${scale})" d="${d}"/>` : "";
 }
-var pathOf = (points) => points.map(([x, y], i) => `${i === 0 ? "M" : "L"} ${r1(x)} ${r1(y)}`).join(" ");
+function iconSvg(name2) {
+  if (!Object.hasOwn(ICONS, name2)) return void 0;
+  const width = LOOK.stroke.glyph * LOOK.box.iconScale;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-12 -12 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="${width}" stroke-linecap="round" stroke-linejoin="round"><path d="${ICONS[name2]}"/></svg>`;
+}
+function pathOf(points) {
+  const pts = points.filter((p, i) => i === 0 || p[0] !== points[i - 1][0] || p[1] !== points[i - 1][1]);
+  const [x0, y0] = pts[0];
+  let d = `M ${r1(x0)} ${r1(y0)}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const [ax, ay] = pts[i - 1];
+    const [bx, by] = pts[i];
+    const [cx, cy] = pts[i + 1];
+    const l1 = Math.hypot(bx - ax, by - ay);
+    const l2 = Math.hypot(cx - bx, cy - by);
+    const a = Math.min(LOOK.edge.bend, l1 / 2, l2 / 2);
+    d += ` L ${r1(bx - (bx - ax) / l1 * a)} ${r1(by - (by - ay) / l1 * a)} Q ${r1(bx)} ${r1(by)} ${r1(bx + (cx - bx) / l2 * a)} ${r1(by + (cy - by) / l2 * a)}`;
+  }
+  if (pts.length > 1) {
+    const [lx, ly] = pts[pts.length - 1];
+    d += ` L ${r1(lx)} ${r1(ly)}`;
+  }
+  return d;
+}
 function arrowHead(points) {
   const [ex, ey] = points[points.length - 1];
   const [px2, py] = points[points.length - 2];
@@ -3756,10 +4556,10 @@ function activeKf(ctx, on) {
   return rangeKf(ctx.m, ranges);
 }
 function band(region) {
-  const { radius, icon, iconRadius, iconScale, nameY, line } = LOOK.region;
+  const { radius, icon, iconRadius, iconScale, nameY, line: line2 } = LOOK.region;
   const { x, y } = region.header;
-  const lines = region.lines.map((t, k) => `<text class="dg-bz" x="${r1(x)}" y="${r1(region.y + nameY + k * line)}">${esc(t)}</text>`).join("");
-  const note = region.note ? `<text class="dg-bx" x="${r1(x)}" y="${r1(region.y + nameY + region.lines.length * line + 1)}">${esc(region.note)}</text>` : "";
+  const lines = region.lines.map((t, k) => `<text class="dg-bz" x="${r1(x)}" y="${r1(region.y + nameY + k * line2)}">${esc(t)}</text>`).join("");
+  const note = region.note ? `<text class="dg-bx" x="${r1(x)}" y="${r1(region.y + nameY + region.lines.length * line2 + 1)}">${esc(region.note)}</text>` : "";
   const mark = region.icon && ICONS[region.icon] ? `<rect class="dg-bi" x="${r1(x)}" y="${r1(y)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(region.icon, x + icon / 2, y + icon / 2, iconScale)}` : "";
   return `<g style="${cs(region.color)}"><rect class="dg-band" x="${r1(region.x + 0.5)}" y="${r1(region.y + 0.5)}" width="${r1(region.w - 1)}" height="${r1(region.h - 1)}" rx="${radius}"/>${mark}${lines}${note}</g>`;
 }
@@ -3776,10 +4576,10 @@ function cardFrame(box, ctx, act, y, h) {
   const rect = (cls, extra = "") => `<rect class="${cls}" x="${r1(box.x)}" y="${r1(y)}" width="${r1(box.w)}" height="${h}" rx="${LOOK.box.radius}"${extra}/>`;
   return `${act ? `<g class="dg-a" style="${act}">${rect("dg-halo")}</g>` : ""}${rect("dg-st", ` ${ctx.sh}`)}${act ? `<g class="dg-a" style="${act}">${rect("dg-on")}</g>` : ""}`;
 }
-function card(box, ctx, on, changes) {
+function card(box, ctx, on, changes, lit) {
   const { icon, iconRadius, iconScale, iconY, nameY, subY } = LOOK.box;
   const subs = subLines(box, ctx.m, changes, box.cy + subY);
-  const act = on.length > 0 ? activeKf(ctx, on) : void 0;
+  const act = lit ? lit.length > 0 ? rangeKf(ctx.m, lit.map((s) => [s.start, s.end])) : void 0 : on.length > 0 ? activeKf(ctx, on) : void 0;
   const mark = box.icon && ICONS[box.icon] ? `<rect class="dg-ic" x="${r1(box.cx - icon / 2)}" y="${r1(box.cy + iconY - icon / 2)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(box.icon, box.cx, box.cy + iconY, iconScale)}` : "";
   return `<g style="${cs(box.color)}">${cardFrame(box, ctx, act, box.y, box.h)}${mark}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(box.cy + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
 }
@@ -3789,15 +4589,54 @@ function headCard(box, ctx, on, changes) {
   const act = on.length > 0 ? activeKf(ctx, on) : void 0;
   return `<g style="${cs(box.color)}">${cardFrame(box, ctx, act, pad2, h)}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(pad2 + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
 }
+function ghostCard(box) {
+  const { icon, iconRadius, iconScale, radius } = LOOK.box;
+  const G = LOOK.state.ghost;
+  const ix = box.x + G.pad + icon / 2;
+  const tx = box.x + G.pad + icon + G.gap;
+  const mark = box.icon && ICONS[box.icon] ? `<rect class="dg-ic" x="${r1(ix - icon / 2)}" y="${r1(box.cy - icon / 2)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(box.icon, ix, box.cy, iconScale)}` : "";
+  const nameY = box.sub ? G.nameY : LOOK.baseline.mark;
+  const sub = box.sub ? `<text class="dg-ss" x="${r1(tx)}" y="${r1(box.cy + G.subY)}" text-anchor="start">${esc(box.sub)}</text>` : "";
+  return `<g data-ghost="${esc(box.id)}" style="${cs(box.color)}"><rect class="dg-ghost" x="${r1(box.x)}" y="${r1(box.y)}" width="${r1(box.w)}" height="${box.h}" rx="${radius}"/>${mark}<text class="dg-sn" x="${r1(tx)}" y="${r1(box.cy + nameY)}" text-anchor="start">${esc(box.name)}</text>${sub}</g>`;
+}
+function doneMark(box, at, ctx) {
+  const { r, inset } = LOOK.state.done;
+  const x = box.x + box.w - inset;
+  const y = box.y + inset;
+  return `<g class="dg-popc dg-a" data-done="${esc(box.id)}" style="${cs(box.color)};${ctx.m.pop(at)}"><circle class="dg-done" cx="${r1(x)}" cy="${r1(y)}" r="${r}"/>${glyph("check", x, y, 0.5, "dg-done-ck")}</g>`;
+}
+function path(p, color) {
+  const label2 = p.label ? `<text class="dg-path-t${p.label.family === "sans" ? " dg-path-tj" : ""}" x="${r1(p.label.x + LOOK.label.padX)}" y="${r1(p.label.y + p.label.h / 2 + LOOK.baseline.label)}">${esc(p.label.text)}</text>` : "";
+  return `<g data-path="${esc(`${p.from}->${p.to}`)}" style="${cs(color)}"><path class="dg-path" d="${pathOf(p.points)}"/><path class="dg-path-h" d="${arrowHead(p.points)}"/>${label2}</g>`;
+}
+function side(s, color) {
+  const { pad: pad2 } = LOOK.state.side;
+  const title = s.y + pad2 + TYPE.regionName.size;
+  const notes = s.notes.map((note, k) => `<text class="dg-side-n" x="${r1(s.x + pad2)}" y="${r1(title + LOOK.region.line * (k + 1))}">${esc(note)}</text>`).join("");
+  return `<g style="${cs(color)}"><rect class="dg-side" x="${r1(s.x + 0.5)}" y="${r1(s.y + 0.5)}" width="${r1(s.w - 1)}" height="${r1(s.h - 1)}" rx="${LOOK.region.radius}"/><text class="dg-side-t" x="${r1(s.x + pad2)}" y="${r1(title)}">${esc(s.title)}</text>${notes}</g>`;
+}
+function endMark(e, color) {
+  const { end } = LOOK.state;
+  const text2 = e.text === "" ? "" : `<text class="dg-mark" x="${r1(e.x + LOOK.state.text)}" y="${r1(e.y + LOOK.baseline.mark)}">${esc(e.text)}</text>`;
+  const x = r1(e.x);
+  const y = r1(e.y);
+  if (e.kind === "start") return `<g data-end="start"><circle class="dg-start" cx="${x}" cy="${y}" r="${e.r}"/>${text2}</g>`;
+  if (e.ghost) return `<g data-end="finish" style="${cs(color)}"><circle class="dg-end-x" cx="${x}" cy="${y}" r="${e.r}"/><circle class="dg-end-xi" cx="${x}" cy="${y}" r="${end.inner}"/>${text2}</g>`;
+  return `<g data-end="finish"><circle class="dg-end" cx="${x}" cy="${y}" r="${e.r}"/><circle class="dg-end-in" cx="${x}" cy="${y}" r="${end.inner}"/>${text2}</g>`;
+}
 function lifeline(x, y1, y2) {
   return `<line class="dg-ll" x1="${r1(x)}" y1="${r1(y1)}" x2="${r1(x)}" y2="${r1(y2)}"/>`;
 }
-function edge(e, time, ctx) {
+function edge(e, time, ctx, past = false) {
   const { m } = ctx;
   const d = pathOf(e.points);
   const head = arrowHead(e.points);
   const { start: a, drawn: b, end } = time;
-  const tail = [
+  const tail = past ? [
+    [end, { opacity: 1 }, EASE.inOut],
+    [end + 0.4, { opacity: 0 }],
+    [m.total, { opacity: 0 }]
+  ] : [
     [end, { opacity: 1 }, EASE.inOut],
     [end + 0.4, { opacity: 0.45 }],
     [ctx.end + 0.3, { opacity: 0.45 }, EASE.inOut],
@@ -3805,7 +4644,7 @@ function edge(e, time, ctx) {
     [m.last, { opacity: 0.95 }, EASE.inOut],
     [m.total, { opacity: 0 }]
   ];
-  const line = m.kf([
+  const line2 = m.kf([
     [0, { opacity: 0, "stroke-dashoffset": 1 }],
     [a, { opacity: 0, "stroke-dashoffset": 1 }, EASE.inOut],
     [a + 0.05, { opacity: 1 }],
@@ -3824,15 +4663,19 @@ function edge(e, time, ctx) {
     [end + 0.2, { opacity: 0, "stroke-dashoffset": run }],
     [m.total, { opacity: 0, "stroke-dashoffset": run }]
   ]);
+  const grey = past ? m.kf([[0, { opacity: 0 }], [end, { opacity: 0 }, EASE.inOut], [end + 0.4, { opacity: 1 }], [m.last, { opacity: 1 }, EASE.inOut], [m.total, { opacity: 0 }]]) : "";
   return {
-    base: `<path class="dg-e" d="${d}"/><path class="dg-eh" d="${head}"/>`,
-    lit: `<g style="${cs(e.color)}"><path class="dg-e-on dg-a" pathLength="1" d="${d}" style="${line}"/><path class="dg-eh-on dg-a" d="${head}" style="${hk}"/><path class="dg-flow dg-a" d="${d}" style="${flow}"/></g>`
+    base: `<path class="dg-e" d="${d}"/><path class="dg-eh" d="${head}"/>${past ? `<path class="dg-e-past dg-a" d="${d}" style="${grey}"/><path class="dg-eh-past dg-a" d="${head}" style="${grey}"/>` : ""}`,
+    lit: `<g style="${cs(e.color)}"><path class="dg-e-on dg-a" pathLength="1" d="${d}" style="${line2}"/><path class="dg-eh-on dg-a" d="${head}" style="${hk}"/><path class="dg-flow dg-a" d="${d}" style="${flow}"/></g>`
   };
 }
 function label(l, time, ctx) {
   const ja3 = l.family === "sans" ? " dg-capj" : "";
   const { radius } = LOOK.label;
-  return `<g class="dg-cap${ja3} dg-a" style="${cs(l.color)};${ctx.m.rise(time.start, time.end, true)}"><rect x="${r1(l.x)}" y="${r1(l.y)}" width="${r1(l.w)}" height="${l.h}" rx="${radius}"/><text x="${r1(l.x + l.w / 2)}" y="${r1(l.y + l.h / 2 + LOOK.baseline.label)}" text-anchor="middle">${esc(l.text)}</text></g>`;
+  const x = r1(l.x + l.w / 2);
+  const y = r1(l.y + l.h / 2 + LOOK.baseline.label);
+  const past = time.after ? `<g class="dg-cap-past${l.family === "sans" ? " dg-cap-pastj" : ""} dg-a" style="${ctx.m.vis(time.after.start, time.after.end)}"><text x="${x}" y="${y}" text-anchor="middle">${esc(l.text)}</text></g>` : "";
+  return `${past}<g class="dg-cap${ja3} dg-a" style="${cs(l.color)};${ctx.m.rise(time.start, time.end, true)}"><rect x="${r1(l.x)}" y="${r1(l.y)}" width="${r1(l.w)}" height="${l.h}" rx="${radius}"/><text x="${x}" y="${y}" text-anchor="middle">${esc(l.text)}</text></g>`;
 }
 function action(a, at, until, ctx) {
   return `<g class="dg-act dg-a" style="${cs(a.color)};${ctx.m.rise(at, until, true)}"><rect x="${r1(a.x)}" y="${r1(a.y)}" width="${r1(a.w)}" height="${a.h}" rx="${LOOK.action.radius}"/><text x="${r1(a.x + a.w / 2)}" y="${r1(a.y + a.h / 2 + LOOK.baseline.action)}" text-anchor="middle">${esc(a.text)}</text></g>`;
@@ -3854,21 +4697,21 @@ function carrier(e, time, ctx) {
   const n = LOOK.carrier.samples;
   const length = pathLength(e.points);
   const { depart: a, arrive: b, start: from, end: gone } = time;
-  const path = [];
+  const path2 = [];
   for (let k = 0; k <= n; k++) {
     const [x, y] = along(e.points, easeInOut(k / n) * length);
-    path.push([a + (b - a) * k / n, x, y]);
+    path2.push([a + (b - a) * k / n, x, y]);
   }
-  const first = path[0];
-  const lastPoint = path[path.length - 1];
+  const first = path2[0];
+  const lastPoint = path2[path2.length - 1];
   const rest = e.settle ?? [lastPoint[1], lastPoint[2]];
-  const pts = [[0, first[1], first[2]], ...path];
+  const pts = [[0, first[1], first[2]], ...path2];
   if (e.settle) pts.push([Math.min(b + 0.3, Math.max(gone, b + 0.01)), rest[0], rest[1]]);
   pts.push([gone, rest[0], rest[1]], [m.total, rest[0], rest[1]]);
   const fade = gone < m.last ? 0.05 : 0.18;
   return `<g class="dg-a" style="${m.move(pts, m.blink(from + 0.02, gone, fade))}">${carrierShape(e, ctx.sh)}</g>`;
 }
-function badge(b, ctx) {
+function badge(b, ctx, grey = false) {
   const { m } = ctx;
   const span = ctx.t.steps[b.step];
   const a = span.start;
@@ -3894,9 +4737,9 @@ function badge(b, ctx) {
   const y = r1(b.y);
   const ty = r1(b.y + LOOK.baseline.badge);
   const no = b.step + 1;
-  return `<g class="dg-bd" data-step="${b.step}" style="${cs(b.color)}"><circle class="dg-bdr dg-popc dg-a" cx="${x}" cy="${y}" r="${rr}" style="${ring}"/><g class="dg-a" style="${past}"><circle class="dg-bdp" cx="${x}" cy="${y}" r="${rr}"/><text class="dg-bdpt" x="${x}" y="${ty}" text-anchor="middle">${no}</text></g><g class="dg-popc dg-a" style="${fill}"><circle class="dg-bdf" cx="${x}" cy="${y}" r="${r}"/><text class="dg-bdft" x="${x}" y="${ty}" text-anchor="middle">${no}</text></g></g>`;
+  return `<g class="dg-bd" data-step="${b.step}" style="${cs(b.color)}"><circle class="dg-bdr dg-popc dg-a" cx="${x}" cy="${y}" r="${rr}" style="${ring}"/><g class="dg-a" style="${past}"><circle class="${grey ? "dg-bdp-g" : "dg-bdp"}" cx="${x}" cy="${y}" r="${rr}"/><text class="${grey ? "dg-bdpt-g" : "dg-bdpt"}" x="${x}" y="${ty}" text-anchor="middle">${no}</text></g><g class="dg-popc dg-a" style="${fill}"><circle class="dg-bdf" cx="${x}" cy="${y}" r="${r}"/><text class="dg-bdft" x="${x}" y="${ty}" text-anchor="middle">${no}</text></g></g>`;
 }
-function strip(s, changes, ctx) {
+function strip(s, changes, ctx, now = false, arrivals = /* @__PURE__ */ new Map()) {
   const { m, sh } = ctx;
   const S2 = LOOK.strip;
   const my = s.y + S2.h / 2;
@@ -3918,8 +4761,18 @@ function strip(s, changes, ctx) {
     values.forEach((c, k) => {
       const next = values[k + 1]?.at;
       const value2 = c.value;
-      const anim = next === void 0 ? m.rise(c.at) : m.rise(c.at, next - MOTION.untilFade);
-      parts.push(`<g class="dg-a" style="${anim}"><text class="${hasWide(value2) ? "dg-fvj" : "dg-fv"}" x="${r1(field2.x)}" y="${r1(field2.y + S2.valueY)}">${esc(value2)}</text></g>`);
+      const cls = hasWide(value2) ? "dg-fvj" : "dg-fv";
+      const textOf = (c2) => `<text class="${c2}" x="${r1(field2.x)}" y="${r1(field2.y + S2.valueY)}">${esc(value2)}</text>`;
+      const text2 = textOf(cls);
+      if (!now) {
+        const anim = next === void 0 ? m.rise(c.at) : m.rise(c.at, next - MOTION.untilFade);
+        parts.push(`<g class="dg-a" style="${anim}">${text2}</g>`);
+        return;
+      }
+      const until = Math.min(c.until, next ?? c.until);
+      const dot = `<circle class="dg-fl-now" cx="${r1(field2.x + textWidth(field2.name, TYPE.fieldName) + S2.now.gap)}" cy="${r1(field2.y + S2.nameY - TYPE.fieldName.size / 3)}" r="${S2.now.r}"/>`;
+      parts.push(`<g class="dg-fv-now dg-a" data-step="${c.step}" style="${cs(c.color)};${m.rise(c.at, until - MOTION.untilFade)}">${textOf(`${cls} dg-fv-c`)}${dot}</g>`);
+      if (next === void 0 || next > until) parts.push(`<g class="dg-a" style="${m.vis(until - MOTION.untilFade, next === void 0 ? m.last : next - MOTION.untilFade)}">${text2}</g>`);
     });
     tags.forEach((c, k) => {
       const next = tags[k + 1]?.at;
@@ -3933,6 +4786,22 @@ function strip(s, changes, ctx) {
       );
     });
   });
+  if (s.trail) {
+    const t = s.trail;
+    const last = s.fields[s.fields.length - 1];
+    if (last && last.y === t.y) {
+      const sx = t.x - S2.fieldGap / 2;
+      parts.push(`<line class="dg-sep" x1="${r1(sx)}" y1="${r1(t.y + S2.sepInset)}" x2="${r1(sx)}" y2="${r1(t.y + S2.h - S2.sepInset)}"/>`);
+    }
+    parts.push(`<text class="dg-fl" x="${r1(t.x)}" y="${r1(t.y + S2.nameY)}">${esc(t.title)}</text>`);
+    const dy = t.y + S2.valueY - TYPE.fieldValue.size / 3;
+    t.states.forEach((state, k) => {
+      const cx = r1(t.x + S2.trail.r + k * S2.trail.step);
+      const at = arrivals.get(state.box);
+      const fill = at === void 0 ? "" : `<circle class="dg-tr-fill dg-a" cx="${cx}" cy="${r1(dy)}" r="${S2.trail.r}" style="${m.pop(at)}"/>`;
+      parts.push(`<g data-trail="${esc(state.box)}" style="${cs(state.color)}"><circle class="dg-tr-ring" cx="${cx}" cy="${r1(dy)}" r="${S2.trail.r}"/>${fill}</g>`);
+    });
+  }
   return parts.join("");
 }
 
@@ -4029,6 +4898,7 @@ var font = (t) => `font:${t.weight} ${t.size}px var(--${t.family})`;
 var mix = (pct, base = "var(--surf)") => `color-mix(in srgb,var(--c) ${pct}%,${base})`;
 var S = LOOK.stroke;
 var X = LOOK.mix;
+var PAST = `color-mix(in srgb,var(--mute) ${X.past}%,var(--bg))`;
 var PART_CSS = [
   ".dg{display:block;width:100%;height:auto;overflow:visible}",
   ".dg .dg-a{animation-duration:var(--T);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;animation-delay:calc(var(--at,0) * -1s);animation-play-state:var(--play,running)}",
@@ -4053,15 +4923,21 @@ var PART_CSS = [
   `.dg-e-on{fill:none;stroke:var(--c);stroke-width:${S.edgeOn};stroke-linecap:round;stroke-dasharray:1 2}`,
   `.dg-eh-on{fill:none;stroke:var(--c);stroke-width:${S.edgeOn};stroke-linecap:round;stroke-linejoin:round}`,
   `.dg-flow{fill:none;stroke:var(--surf);stroke-width:${S.flow};stroke-linecap:round;stroke-dasharray:1.5 ${LOOK.edge.flowDash}}`,
+  `.dg-e-past{fill:none;stroke:${PAST};stroke-width:${S.edge};stroke-linecap:round}`,
+  `.dg-eh-past{fill:none;stroke:${PAST};stroke-width:${S.arrow};stroke-linecap:round;stroke-linejoin:round}`,
   ".dg-bd{cursor:pointer}",
   ".dg-bdf{fill:var(--c)}",
   `.dg-bdft{${font(TYPE.badge)};fill:var(--on-c)}`,
   `.dg-bdr{fill:none;stroke:var(--c);stroke-width:${S.badgeRing}}`,
   `.dg-bdp{fill:${mix(X.badgePast)};stroke:${mix(X.badgePastEdge, "transparent")};stroke-width:${S.hair}}`,
   `.dg-bdpt{${font(TYPE.badge)};fill:var(--ct)}`,
+  `.dg-bdp-g{fill:var(--surf);stroke:${PAST};stroke-width:${S.hair}}`,
+  `.dg-bdpt-g{${font(TYPE.badge)};fill:var(--mute)}`,
   `.dg-cap rect,.dg-act rect{fill:${mix(X.cap)};stroke:${mix(X.capEdge, "transparent")}}`,
   `.dg-cap text{${font(TYPE.label)};fill:var(--ct)}`,
   `.dg-capj text{${font(TYPE.labelJa)}}`,
+  `.dg-cap-past text{${font(TYPE.label)};fill:var(--mute);fill-opacity:${LOOK.state.pastLabel}}`,
+  `.dg-cap-pastj text{${font(TYPE.labelJa)}}`,
   `.dg-act text{${font(TYPE.action)};fill:var(--ct)}`,
   ".dg-car{fill:var(--carry,var(--ink))}",
   `.dg-car-t{${font(TYPE.carrier)};fill:var(--bg)}`,
@@ -4076,8 +4952,28 @@ var PART_CSS = [
   `.dg-fl{${font(TYPE.fieldName)};fill:var(--mute)}`,
   `.dg-fv{${font(TYPE.fieldValue)};fill:var(--ink)}`,
   `.dg-fvj{${font(TYPE.fieldValueJa)};fill:var(--ink)}`,
+  ".dg-fv-c{fill:var(--ct)}",
+  ".dg-fl-now{fill:var(--c)}",
+  `.dg-tr-ring{fill:none;stroke:var(--line);stroke-width:${S.trail}}`,
+  ".dg-tr-fill{fill:var(--c)}",
   ".dg-tg rect{fill:var(--c)}",
   `.dg-tg text{${font(TYPE.tag)};fill:var(--on-c)}`,
+  `.dg-side{fill:color-mix(in srgb,var(--c) ${X.side}%,var(--bg));stroke:${mix(X.sideEdge, "transparent")};stroke-dasharray:4 4}`,
+  `.dg-side-t{${font(TYPE.regionName)};fill:var(--ct)}`,
+  `.dg-side-n{${font(TYPE.regionNote)};fill:var(--mute)}`,
+  `.dg-ghost{fill:var(--surf);stroke:${mix(X.ghostEdge, "transparent")};stroke-dasharray:4 3}`,
+  `.dg-path{fill:none;stroke:${mix(X.path, "transparent")};stroke-width:${S.path};stroke-linecap:round;stroke-dasharray:0 ${LOOK.edge.ghostDash}}`,
+  `.dg-path-h{fill:none;stroke:${mix(X.path, "transparent")};stroke-width:${S.arrow};stroke-linecap:round;stroke-linejoin:round}`,
+  `.dg-path-t{${font(TYPE.label)};fill:var(--ct)}`,
+  `.dg-path-tj{${font(TYPE.labelJa)}}`,
+  ".dg-start{fill:var(--ink)}",
+  `.dg-end{fill:var(--bg);stroke:var(--ink);stroke-width:${S.end}}`,
+  ".dg-end-in{fill:var(--ink)}",
+  `.dg-end-x{fill:var(--bg);stroke:${mix(X.path, "transparent")};stroke-width:${S.arrow};stroke-dasharray:2 2.5}`,
+  `.dg-end-xi{fill:${mix(X.path, "transparent")}}`,
+  `.dg-mark{${font(TYPE.regionNote)};fill:var(--mute)}`,
+  `.dg-done{fill:var(--ink);stroke:var(--surf);stroke-width:${S.done}}`,
+  `.dg-done-ck{fill:none;stroke:var(--surf);stroke-width:${S.glyph};stroke-linecap:round;stroke-linejoin:round}`,
   ".dg-vp-bg{fill:var(--bg)}",
   ".dg-vp-frame{fill:none;stroke:var(--hair)}",
   ".dg-hd-bg{fill:var(--bg)}",
@@ -4155,7 +5051,8 @@ function fieldChanges(diagram, timeline, layout) {
     if (event2?.type !== "strip") continue;
     const color = layout.badges[time.step]?.color ?? "slate";
     const list2 = out.get(event2.field) ?? [];
-    list2.push({ at: time.at, color, ...event2.value !== void 0 ? { value: event2.value } : {}, ...event2.tag !== void 0 ? { tag: event2.tag } : {} });
+    const until = timeline.steps[time.step].end;
+    list2.push({ at: time.at, color, step: time.step, until, ...event2.value !== void 0 ? { value: event2.value } : {}, ...event2.tag !== void 0 ? { tag: event2.tag } : {} });
     out.set(event2.field, list2);
   }
   return out;
@@ -4165,20 +5062,36 @@ function drawSvg(diagram, layout, timeline, palette, theme, follow) {
   const m = new Motion(`dg${id}`, timeline.total, timeline.last);
   const ctx = { m, t: timeline, sh: `filter="url(#dg-sh-${id})"`, end: timeline.steps[timeline.steps.length - 1].end };
   const on = involved(diagram);
-  const subs = subChanges(diagram, timeline, layout.kind === "architecture");
+  const subs = subChanges(diagram, timeline, layout.kind !== "sequence");
   const L = { band: [], base: [], lit: [], node: [], badge: [], top: [] };
   for (const region of layout.regions) L.band.push(band(region));
-  if (layout.strip) L.band.push(strip(layout.strip, fieldChanges(diagram, timeline, layout), ctx));
-  for (const line of layout.lifelines) L.base.push(lifeline(line.x, line.y1, line.y2));
+  const ghostColor = layout.boxes.find((b) => b.ghost)?.color ?? "slate";
+  if (layout.side) L.band.push(side(layout.side, ghostColor));
+  const boxColor = (id2, ghost) => layout.boxes.find((b) => b.id === id2 && (ghost === void 0 || b.ghost === ghost))?.color;
+  for (const p of layout.paths) L.base.push(path(p, boxColor(p.to, true) ?? boxColor(p.from) ?? ghostColor));
+  for (const e of layout.ends) L.node.push(endMark(e, ghostColor));
+  const isState = layout.kind === "state";
+  const arrivals = new Map((timeline.states ?? []).flatMap((s) => s.lit[0] ? [[s.box, s.lit[0].start]] : []));
+  if (layout.strip) L.band.push(strip(layout.strip, fieldChanges(diagram, timeline, layout), ctx, isState, arrivals));
+  for (const line2 of layout.lifelines) L.base.push(lifeline(line2.x, line2.y1, line2.y2));
   for (const e of layout.edges) {
     const time = timeline.edges.find((t) => t.step === e.step && t.event === e.event);
     if (!time) continue;
-    const drawn = edge(e, time, ctx);
+    const drawn = edge(e, time, ctx, isState);
     L.base.push(drawn.base);
     L.lit.push(drawn.lit);
   }
-  for (const box of layout.boxes) L.node.push(card(box, ctx, on.get(box.id) ?? [], subs.get(box.id) ?? []));
-  for (const b of layout.badges) L.badge.push(badge(b, ctx));
+  const states = new Map((timeline.states ?? []).map((s) => [s.box, s]));
+  for (const box of layout.boxes) {
+    if (box.ghost) {
+      L.node.push(ghostCard(box));
+      continue;
+    }
+    const state = states.get(box.id);
+    L.node.push(card(box, ctx, on.get(box.id) ?? [], subs.get(box.id) ?? [], isState ? state?.lit ?? [] : void 0));
+    if (state?.done !== void 0) L.node.push(doneMark(box, state.done, ctx));
+  }
+  for (const b of layout.badges) L.badge.push(badge(b, ctx, isState));
   for (const l of layout.labels) {
     const time = timeline.labels.find((t) => t.step === l.step && t.event === l.event);
     if (time) L.top.push(label(l, time, ctx));
@@ -4314,7 +5227,7 @@ function renderDiagram(input, options = {}) {
   const diagram = read.diagram;
   const palette = resolvePalette(options.palette);
   const theme = options.theme === "dark" ? "dark" : "light";
-  const layout = diagram.kind === "sequence" ? layoutSequence(diagram) : layoutArchitecture(diagram);
+  const layout = diagram.kind === "sequence" ? layoutSequence(diagram) : diagram.kind === "state" ? layoutState(diagram, lang) : layoutArchitecture(diagram);
   const timeline = buildTimeline(diagram);
   return {
     svg: drawSvg(diagram, layout, timeline, palette, theme),
@@ -4462,9 +5375,9 @@ function mountDiagram(host, diagram, options = {}) {
     const head = doc.createElement("strong");
     head.textContent = step2.title;
     item.append(head);
-    for (const line of step2.body.split("\n")) {
+    for (const line2 of step2.body.split("\n")) {
       const p = doc.createElement("p");
-      p.textContent = line;
+      p.textContent = line2;
       item.append(p);
     }
     list2.append(item);
@@ -4602,10 +5515,12 @@ function mountDiagram(host, diagram, options = {}) {
 exports.DEFAULT_PALETTE = DEFAULT_PALETTE;
 exports.FONTS = FONTS;
 exports.FORMAT_VERSION = FORMAT_VERSION;
+exports.ICONS = ICONS;
 exports.PALETTES = PALETTES;
 exports.READABLE_PX = READABLE_PX;
 exports.chooseView = chooseView;
 exports.extractDiagrams = extractDiagrams;
+exports.iconSvg = iconSvg;
 exports.migrateFile = migrateFile;
 exports.mountDiagram = mountDiagram;
 exports.parseNotation = parseNotation;