@cardenelabs/dragon 0.35.0 → 0.36.0

package/dist/index.js

@@ -43,15 +43,15 @@ var TYPES_EN = {
 };
 var plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
 var ja = {
-  additionalProperties: (key) => `${key} \u3068\u3044\u3046\u6B04\u306F\u66F8\u3051\u306A\u3044`,
-  required: (key) => `${key} \u306E\u6B04\u304C\u8981\u308B`,
+  additionalProperties: (key2) => `${key2} \u3068\u3044\u3046\u6B04\u306F\u66F8\u3051\u306A\u3044`,
+  required: (key2) => `${key2} \u306E\u6B04\u304C\u8981\u308B`,
   enum: (values) => `${values.join(" / ")} \u306E\u3069\u308C\u304B\u306B\u3059\u308B`,
   type: (type) => TYPES_JA[type] ?? `${type} \u306B\u3059\u308B`,
   minLength: (limit) => `${limit} \u5B57\u4EE5\u4E0A\u66F8\u304F`,
   pattern: (forbidden) => forbidden ? `${forbidden.space ? "\u7A7A\u767D\u3068 " : ""}${forbidden.chars.join(" ")} \u306F\u4F7F\u3048\u306A\u3044` : "\u4F7F\u3048\u306A\u3044\u5B57\u304C\u5165\u3063\u3066\u3044\u308B",
   minItems: (limit) => `${limit} \u3064\u4EE5\u4E0A\u66F8\u304F`,
   minimum: (limit) => `${limit} \u4EE5\u4E0A\u306B\u3059\u308B`,
-  const: (value) => `${value} \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",
   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",
@@ -59,15 +59,15 @@ var ja = {
   newer: (version, tool) => `\u7248 ${version} \u306E\u56F3\u306F\u3001\u3053\u306E\u9053\u5177 (\u7248 ${tool}) \u3088\u308A\u65B0\u3057\u3044\u306E\u3067\u8AAD\u3081\u306A\u3044\u3002\u9053\u5177\u3092\u65B0\u3057\u304F\u3059\u308B`
 };
 var en = {
-  additionalProperties: (key) => `The ${key} field is not allowed`,
-  required: (key) => `The ${key} field is required`,
+  additionalProperties: (key2) => `The ${key2} field is not allowed`,
+  required: (key2) => `The ${key2} field is required`,
   enum: (values) => `Use one of ${values.join(" / ")}`,
   type: (type) => TYPES_EN[type] ?? `Use ${type}`,
   minLength: (limit) => `Write at least ${plural(limit, "character")}`,
   pattern: (forbidden) => forbidden ? `Cannot contain ${forbidden.space ? "spaces or " : ""}${forbidden.chars.join(" ")}` : "Contains characters that are not allowed",
   minItems: (limit) => `Write at least ${plural(limit, "item")}`,
   minimum: (limit) => `Use ${limit} or greater`,
-  const: (value) => `Use ${value}`,
+  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",
   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",
@@ -1815,7 +1815,7 @@ var NOT_ALLOWED = {
   "": { field: "sequence", kind: "sequence" },
   carry: { field: "text", kind: "tag" }
 };
-var escape = (key) => key.replaceAll("~", "~0").replaceAll("/", "~1");
+var escape = (key2) => key2.replaceAll("~", "~0").replaceAll("/", "~1");
 function forbiddenOf(pattern) {
   const inside = /^\^\[\^(.+)\]\+\$$/u.exec(pattern)?.[1];
   if (inside === void 0) return void 0;
@@ -1830,12 +1830,12 @@ function toFieldError(error, errors, m) {
   const at = error.instancePath;
   switch (error.keyword) {
     case "additionalProperties": {
-      const key = String(params.additionalProperty);
-      return { pointer: `${at}/${escape(key)}`, message: m.additionalProperties(key) };
+      const key2 = String(params.additionalProperty);
+      return { pointer: `${at}/${escape(key2)}`, message: m.additionalProperties(key2) };
     }
     case "required": {
-      const key = String(params.missingProperty);
-      return { pointer: `${at}/${escape(key)}`, message: m.required(key) };
+      const key2 = String(params.missingProperty);
+      return { pointer: `${at}/${escape(key2)}`, message: m.required(key2) };
     }
     case "not": {
       const allowed = NOT_ALLOWED[at.slice(at.lastIndexOf("/") + 1)];
@@ -1880,145 +1880,174 @@ function validateDiagram(input, options = {}) {
 }
 
 // src/words.ts
-var WORDS = {
-  /** 最初の行の図の種類 */
-  kind: { sequence: { ja: "\u6642\u7CFB\u5217\u56F3", en: "sequence" }, architecture: { ja: "\u69CB\u6210\u56F3", en: "architecture" } },
-  /** 段の見出しより前の行の頭 */
-  head: {
-    region: { ja: "\u533A\u753B", en: "region" },
-    strip: { ja: "\u5E2F", en: "strip" },
-    view: { ja: "\u898B\u305B\u65B9", en: "view" }
-  },
-  /** 行の終わりの `[<鍵> <値>]` の鍵 */
-  attr: {
-    color: { ja: "\u8272", en: "color" },
-    icon: { ja: "\u5370", en: "icon" },
-    region: { ja: "\u533A\u753B", en: "region" },
-    label: { ja: "\u540D\u524D", en: "label" }
-  },
-  /** 線の上を走る物 */
-  carry: {
-    envelope: { ja: "\u5C01\u7B52", en: "envelope" },
-    tag: { ja: "\u672D", en: "tag" },
-    coin: { ja: "\u786C\u8CA8", en: "coin" },
-    none: { ja: "\u306A\u3057", en: "none" }
-  },
-  /** 見せ方の値 */
-  view: { fixed: { ja: "\u6B62\u3081\u308B", en: "fixed" }, follow: { ja: "\u5BC4\u308B", en: "follow" } },
-  /** 線の名前を置く側 */
-  side: {
-    above: { ja: "\u4E0A", en: "above" },
-    below: { ja: "\u4E0B", en: "below" },
-    left: { ja: "\u5DE6", en: "left" },
-    right: { ja: "\u53F3", en: "right" }
-  }
+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"
 };
-function wordOf(group, value, lang) {
-  return WORDS[group][value][lang];
-}
-function valueOf(group, word, lang) {
-  const found = Object.entries(WORDS[group]).find(([, pair]) => pair[lang] === word);
-  return found?.[0];
-}
-var otherLang = (lang) => lang === "ja" ? "en" : "ja";
-function languageOf(headLine) {
-  const first = headLine.trim().split(/\s+/)[0] ?? "";
-  return ["ja", "en"].find((lang) => valueOf("kind", first, lang) !== void 0);
-}
-function notationLanguage(notation) {
-  const head = notation.split(/\r?\n/).map((line) => line.trim()).find((line) => line !== "" && !line.startsWith("//"));
-  return head === void 0 ? void 0 : languageOf(head);
-}
 
 // src/messages.ts
+var list = (words) => words.join(" / ");
 var ja2 = () => {
-  const w = (group, value) => wordOf(group, value, "ja");
+  const shapes = {
+    sequence: "sequence <\u984C>",
+    architecture: "architecture <\u984C>",
+    group: "group <\u540D\u672D> as <\u540D\u524D> [note: <\u6DFB\u3048\u66F8\u304D>] \u304B\u3089 end \u307E\u3067",
+    box: "box <\u540D\u672D> as <\u540D\u524D> [note: <\u4E0B\u306E\u5C0F\u3055\u306A\u5B57>]",
+    strip: "strip <\u984C>: <\u6B04>, <\u6B04>",
+    view: "sequence <\u984C> [view: follow]",
+    step: "step <\u6BB5\u306E\u984C>",
+    say: "say <\u6BB5\u306E\u672C\u6587>",
+    code: "code <\u547D\u4EE4>",
+    act: "act <\u540D\u672D>: <\u51E6\u7406\u306E\u540D\u524D>",
+    note: "note <\u540D\u672D>: <\u4E0B\u306E\u5C0F\u3055\u306A\u5B57>",
+    set: "set <\u6B04>: <\u5024> [tag: <\u672D>]"
+  };
   return {
-    noHead: `\u6700\u521D\u306E\u884C\u306B\u56F3\u306E\u7A2E\u985E (${w("kind", "sequence")} \u304B ${w("kind", "architecture")}) \u3068\u984C\u3092\u66F8\u304F`,
-    badHead: `\u6700\u521D\u306E\u884C\u306F ${w("kind", "sequence")} \u304B ${w("kind", "architecture")} \u3067\u59CB\u3081\u3001\u7D9A\u3051\u3066\u984C\u3092\u66F8\u304F`,
+    noHead: `\u6700\u521D\u306E\u884C\u306B\u56F3\u306E\u7A2E\u985E (${list(KINDS)}) \u3068\u984C\u3092\u66F8\u304F`,
+    badHead: `\u6700\u521D\u306E\u884C\u306F ${KINDS.join(" \u304B ")} \u3067\u59CB\u3081\u3001\u7D9A\u3051\u3066\u984C\u3092\u66F8\u304F`,
+    oldForm: (word, shape) => `${word} \u306F\u4ECA\u306E\u5F62\u306E\u66F8\u304D\u65B9\u3002\u65B0\u3057\u3044\u5F62\u3067\u306F ${shapes[shape]} \u3068\u66F8\u304F`,
+    unknownHead: (word) => `${word} \u306F\u884C\u306E\u982D\u306B\u66F8\u3051\u306A\u3044\u3002\u884C\u306F ${list(HEADS)} \u304B\u3001<\u540D\u672D> -> <\u540D\u672D> \u3067\u59CB\u3081\u308B`,
     duplicate: (id) => `${id} \u306F\u65E2\u306B\u5BA3\u8A00\u3057\u305F\u540D\u672D`,
+    needsId: (word) => `${word} \u306E\u5F8C\u308D\u306B\u540D\u672D\u3092\u66F8\u304F`,
+    badId: (id) => `${id} \u306F\u540D\u672D\u306B\u4F7F\u3048\u306A\u3044\u3002\u540D\u672D\u306B\u306F\u7A7A\u767D\u3068 [ ] \u300C \u300D = : \u3092\u542B\u3081\u306A\u3044`,
+    afterId: "\u540D\u672D\u306E\u5F8C\u308D\u306B\u306F as <\u540D\u524D> \u304B\u5C5E\u6027\u3092\u66F8\u304F",
     undeclaredBox: (id) => `${id} \u3068\u3044\u3046\u7BB1\u306F\u5BA3\u8A00\u3057\u3066\u3044\u306A\u3044`,
-    noBody: (title) => `\u6BB5\u300C${title}\u300D\u306B\u672C\u6587 (> \u3067\u59CB\u307E\u308B\u884C) \u304C\u8981\u308B`,
-    emptyStepTitle: "\u6BB5\u306E\u898B\u51FA\u3057 (#) \u306B\u984C\u3092\u66F8\u304F",
+    noBody: (title) => `\u6BB5\u300C${title}\u300D\u306B\u672C\u6587 (say \u306E\u884C) \u304C\u8981\u308B`,
+    emptyStepTitle: "step \u306E\u5F8C\u308D\u306B\u6BB5\u306E\u984C\u3092\u66F8\u304F",
     noBoxes: "\u7BB1\u3092 1 \u3064\u4EE5\u4E0A\u5BA3\u8A00\u3059\u308B",
-    noSteps: "\u6BB5 (# \u3067\u59CB\u307E\u308B\u884C) \u3092 1 \u3064\u4EE5\u4E0A\u66F8\u304F",
-    viewTwice: `${w("head", "view")}\u306F 1 \u884C\u3060\u3051\u66F8\u304F`,
-    badView: `${w("head", "view")}\u306F ${w("view", "fixed")} \u304B ${w("view", "follow")}`,
-    stripTwice: "\u4E2D\u8EAB\u306E\u5E2F\u306F 1 \u3064\u3060\u3051\u5BA3\u8A00\u3059\u308B",
-    emptyStripField: "\u5E2F\u306E\u6B04\u306E\u540D\u524D\u304C\u7A7A",
-    stepLineBeforeStep: "\u7DDA\u3084\u51E6\u7406\u306F\u6BB5\u306E\u898B\u51FA\u3057 (#) \u306E\u4E0B\u306B\u66F8\u304F",
-    unreadableDeclaration: "\u8AAD\u3081\u306A\u3044\u884C\u3002\u7BB1\u306E\u5BA3\u8A00\u306F <\u540D\u672D> = <\u540D\u524D>\u300C<\u4E0B\u306E\u5C0F\u3055\u306A\u5B57>\u300D \u306E\u5F62\u3067\u66F8\u304F",
+    noSteps: "\u6BB5 (step \u306E\u884C) \u3092 1 \u3064\u4EE5\u4E0A\u66F8\u304F",
+    emptySay: "say \u306E\u5F8C\u308D\u304B\u3001\u305D\u306E\u4E0B\u306B\u5B57\u4E0B\u3052\u3057\u305F\u884C\u306B\u6BB5\u306E\u672C\u6587\u3092\u66F8\u304F",
+    sayTwice: "1 \u3064\u306E\u6BB5\u306B say \u306F 1 \u3064\u307E\u3067\u3002\u9577\u3044\u672C\u6587\u306F say \u306E\u4E0B\u306B\u5B57\u4E0B\u3052\u3057\u3066\u7D9A\u3051\u308B",
+    codeTwice: "1 \u3064\u306E\u6BB5\u306B code \u306F 1 \u884C\u307E\u3067",
+    emptyCode: "code \u306E\u5F8C\u308D\u306B\u547D\u4EE4\u3092\u66F8\u304F",
+    declarationInStep: "group \u3068 box \u3068 strip \u306F\u6700\u521D\u306E step \u3088\u308A\u524D\u306B\u66F8\u304F",
+    stepLineBeforeStep: "\u7DDA\u3068 say \u3068 code \u3068 act \u3068 note \u3068 set \u306F step \u306E\u4E0B\u306B\u66F8\u304F",
+    nestedGroup: "group \u306E\u4E2D\u306B group \u306F\u66F8\u3051\u306A\u3044\u3002\u5148\u306B end \u3067\u9589\u3058\u308B",
+    strayEnd: "end \u306E\u524D\u306B\u3001\u9589\u3058\u308B group \u304C\u7121\u3044",
+    endTakesNothing: "end \u306E\u5F8C\u308D\u306B\u306F\u4F55\u3082\u66F8\u304B\u306A\u3044",
+    unclosedGroup: (id) => `group ${id} \u3092 end \u3067\u9589\u3058\u3066\u3044\u306A\u3044`,
+    regionReopened: (id) => `group ${id} \u306F\u5BA3\u8A00\u6E08\u307F\u3002\u3082\u3046\u4E00\u5EA6\u958B\u304F\u6642\u306F group ${id} \u3060\u3051\u3092\u66F8\u304D\u3001\u540D\u524D\u3068\u5C5E\u6027\u306F\u6700\u521D\u306E\u5BA3\u8A00\u306B\u66F8\u304F`,
     emptyName: (id) => `${id} \u306E\u540D\u524D\u304C\u7A7A`,
-    badColor: `${w("attr", "color")}\u306F ${COLORS.join(" / ")} \u306E\u3069\u308C\u304B`,
-    regionFirst: (id) => `${w("attr", "region")} ${id} \u3092\u5148\u306B\u5BA3\u8A00\u3059\u308B`,
-    badAttr: (raw) => `[${raw}] \u306F\u66F8\u3051\u306A\u3044\u6307\u5B9A`,
-    codeTwice: "1 \u3064\u306E\u6BB5\u306B\u547D\u4EE4 (` \u3067\u56F2\u3093\u3060\u884C) \u306F 1 \u884C\u307E\u3067",
-    declarationInStep: "\u7BB1\u306E\u5BA3\u8A00\u306F\u6700\u521D\u306E\u6BB5\u306E\u898B\u51FA\u3057 (#) \u3088\u308A\u524D\u306B\u66F8\u304F",
-    emptySwap: "\u300C\u300D\u306E\u4E2D\u306B\u66F8\u304D\u63DB\u3048\u308B\u5B57\u3092\u66F8\u304F",
-    unreadableStepLine: "\u8AAD\u3081\u306A\u3044\u884C\u3002\u7DDA\u306F <\u540D\u672D> -> <\u540D\u672D> : <\u7DDA\u306E\u540D\u524D>\u3001\u51E6\u7406\u306F <\u540D\u672D> : <\u51E6\u7406\u306E\u540D\u524D> \u306E\u5F62\u3067\u66F8\u304F",
-    edgeShape: "\u7DDA\u306F <\u540D\u672D> -> <\u540D\u672D> : <\u7DDA\u306E\u540D\u524D> \u306E\u5F62\u3067\u66F8\u304F",
-    carryTwice: "\u904B\u3076\u7269\u306F 1 \u672C\u306E\u7DDA\u306B 1 \u3064\u307E\u3067",
-    tagNeedsValue: `${w("carry", "tag")}\u306B\u306F\u5024\u3092\u66F8\u304F ([${w("carry", "tag")} <\u5024>])`,
-    carryTakesNoValue: (key) => `[${key}] \u306B\u306F\u5024\u3092\u66F8\u304B\u306A\u3044`,
-    stripUndeclared: `\u5E2F\u306E\u5024\u3092\u66F8\u304F\u524D\u306B\u3001\u5E2F\u3092\u5BA3\u8A00\u3059\u308B (${w("head", "strip")} <\u984C> = <\u6B04>, <\u6B04>)`,
-    stripTagOnce: "\u5E2F\u306E\u672D\u306F 1 \u3064\u307E\u3067",
-    noSuchField: (field) => `${field} \u3068\u3044\u3046\u6B04\u306F\u5E2F\u306B\u7121\u3044`,
-    stripNeedsValue: "\u5E2F\u306E\u6B04\u306B\u306F = <\u5024> \u304B [<\u672D>] \u3092\u66F8\u304F",
-    otherLanguageWord: (word, own) => `\u3053\u306E\u56F3\u306F\u65E5\u672C\u8A9E\u306E\u8A9E\u3067\u66F8\u304F\u3002${word} \u3067\u306F\u306A\u304F ${own} \u3068\u66F8\u304F`
+    stripTwice: "strip \u306F 1 \u3064\u3060\u3051\u5BA3\u8A00\u3059\u308B",
+    stripShape: "strip \u306F strip <\u984C>: <\u6B04>, <\u6B04> \u306E\u5F62\u3067\u66F8\u304F",
+    emptyStripField: "strip \u306E\u6B04\u306E\u540D\u524D\u304C\u7A7A",
+    stripUndeclared: "set \u3092\u66F8\u304F\u524D\u306B\u3001strip <\u984C>: <\u6B04>, <\u6B04> \u3067\u5E2F\u3092\u5BA3\u8A00\u3059\u308B",
+    noSuchField: (field2) => `${field2} \u3068\u3044\u3046\u6B04\u306F strip \u306B\u7121\u3044`,
+    stripNeedsValue: "set \u306F set <\u6B04>: <\u5024> \u304B set <\u6B04> [tag: <\u672D>] \u306E\u5F62\u3067\u66F8\u304F",
+    actShape: "act \u306F act <\u540D\u672D>: <\u51E6\u7406\u306E\u540D\u524D> \u306E\u5F62\u3067\u66F8\u304F",
+    noteShape: "note \u306F note <\u540D\u672D>: <\u4E0B\u306E\u5C0F\u3055\u306A\u5B57> \u306E\u5F62\u3067\u66F8\u304F",
+    edgeShape: "\u7DDA\u306F <\u540D\u672D> -> <\u540D\u672D>: <\u7DDA\u306E\u540D\u524D> [<\u5C5E\u6027>] \u306E\u5F62\u3067\u66F8\u304F",
+    emptyLabel: "\u7DDA\u306E : \u306E\u5F8C\u308D\u306B\u7DDA\u306E\u540D\u524D\u3092\u66F8\u304F\u3002\u540D\u524D\u3092\u66F8\u304B\u306A\u3044\u6642\u306F : \u3082\u66F8\u304B\u306A\u3044",
+    quoteUnclosed: '" \u3067\u59CB\u3081\u305F\u5B57\u3092 " \u3067\u9589\u3058\u3066\u3044\u306A\u3044',
+    afterQuote: '" \u3067\u9589\u3058\u305F\u5B57\u306E\u5F8C\u308D\u306B\u306F\u3001\u5C5E\u6027\u304B\u6B21\u306E , \u3060\u3051\u3092\u66F8\u304F',
+    attrUnclosed: "\u5C5E\u6027\u306F [ \u3067\u59CB\u3081\u3066 ] \u3067\u9589\u3058\u3001\u884C\u306E\u7D42\u308F\u308A\u306B\u7F6E\u304F",
+    attrNoColon: (raw) => `[${raw}] \u306F\u66F8\u3051\u306A\u3044\u3002\u5C5E\u6027\u306F [<\u9375>: <\u5024>] \u306E\u5F62\u3067\u66F8\u304F`,
+    attrNoValue: (key2) => `${key2}: \u306E\u5F8C\u308D\u306B\u5024\u3092\u66F8\u304F`,
+    attrTwice: (key2) => `${key2} \u306F 1 \u3064\u306E\u884C\u306B 1 \u3064\u307E\u3067`,
+    badAttr: (key2, allowed) => `${key2} \u306F\u3053\u306E\u884C\u306B\u66F8\u3051\u306A\u3044\u5C5E\u6027\u3002\u66F8\u3051\u308B\u306E\u306F ${list(allowed)}`,
+    badColor: `color \u306F ${list(COLORS)} \u306E\u3069\u308C\u304B`,
+    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"
   };
 };
 var en2 = () => {
-  const w = (group, value) => wordOf(group, value, "en");
+  const shapes = {
+    sequence: "sequence <title>",
+    architecture: "architecture <title>",
+    group: "group <id> as <name> [note: <note>] through end",
+    box: "box <id> as <name> [note: <caption>]",
+    strip: "strip <title>: <field>, <field>",
+    view: "sequence <title> [view: follow]",
+    step: "step <step title>",
+    say: "say <step body>",
+    code: "code <command>",
+    act: "act <id>: <action>",
+    note: "note <id>: <caption>",
+    set: "set <field>: <value> [tag: <tag>]"
+  };
   return {
-    noHead: `Write the diagram kind (${w("kind", "sequence")} or ${w("kind", "architecture")}) and a title on the first line`,
-    badHead: `Start the first line with ${w("kind", "sequence")} or ${w("kind", "architecture")}, followed by the title`,
+    noHead: `Write the diagram kind (${list(KINDS)}) and a title on the first line`,
+    badHead: `Start the first line with ${KINDS.join(" or ")}, followed by the title`,
+    oldForm: (word, shape) => `${word} is the old notation. Write ${shapes[shape]} instead`,
+    unknownHead: (word) => `A line cannot start with ${word}. Start a line with ${list(HEADS)}, or <id> -> <id>`,
     duplicate: (id) => `${id} is already declared`,
+    needsId: (word) => `Write an id after ${word}`,
+    badId: (id) => `${id} cannot be an id. An id has no spaces and none of [ ] \u300C \u300D = :`,
+    afterId: "Write as <name> or attributes after the id",
     undeclaredBox: (id) => `No box named ${id} is declared`,
-    noBody: (title) => `Step "${title}" needs a body (a line starting with >)`,
-    emptyStepTitle: "Write a title after the step heading (#)",
+    noBody: (title) => `Step "${title}" needs a body (a say line)`,
+    emptyStepTitle: "Write a title after step",
     noBoxes: "Declare at least one box",
-    noSteps: "Write at least one step (a line starting with #)",
-    viewTwice: `Write ${w("head", "view")} only once`,
-    badView: `${w("head", "view")} is ${w("view", "fixed")} or ${w("view", "follow")}`,
-    stripTwice: `Declare only one ${w("head", "strip")}`,
-    emptyStripField: `A ${w("head", "strip")} field name is empty`,
-    stepLineBeforeStep: "Write lines and actions under a step heading (#)",
-    unreadableDeclaration: 'Cannot read this line. Declare a box as <id> = <name> "<caption>"',
+    noSteps: "Write at least one step (a step line)",
+    emptySay: "Write the step body after say, or on indented lines below it",
+    sayTwice: "A step takes one say. Continue a long body on indented lines below it",
+    codeTwice: "A step takes at most one code line",
+    emptyCode: "Write the command after code",
+    declarationInStep: "Write group, box and strip before the first step",
+    stepLineBeforeStep: "Write lines, say, code, act, note and set under a step",
+    nestedGroup: "A group cannot hold another group. Close it with end first",
+    strayEnd: "There is no group for this end to close",
+    endTakesNothing: "Write nothing after end",
+    unclosedGroup: (id) => `group ${id} is not closed with end`,
+    regionReopened: (id) => `group ${id} is already declared. To open it again, write only group ${id}; put the name and attributes on the first one`,
     emptyName: (id) => `${id} has an empty name`,
-    badColor: `${w("attr", "color")} is one of ${COLORS.join(" / ")}`,
-    regionFirst: (id) => `Declare ${w("attr", "region")} ${id} first`,
-    badAttr: (raw) => `[${raw}] cannot be written here`,
-    codeTwice: "A step takes at most one command (a line in backticks)",
-    declarationInStep: "Declare boxes before the first step heading (#)",
-    emptySwap: 'Write the new caption inside "\u2026"',
-    unreadableStepLine: "Cannot read this line. Write a line as <id> -> <id> : <label>, or an action as <id> : <action>",
-    edgeShape: "Write a line as <id> -> <id> : <label>",
-    carryTwice: "A line carries at most one thing",
-    tagNeedsValue: `${w("carry", "tag")} needs a value ([${w("carry", "tag")} <value>])`,
-    carryTakesNoValue: (key) => `[${key}] takes no value`,
-    stripUndeclared: `Declare the ${w("head", "strip")} before writing its values (${w("head", "strip")} <title> = <field>, <field>)`,
-    stripTagOnce: `A ${w("head", "strip")} value takes at most one tag`,
-    noSuchField: (field) => `The ${w("head", "strip")} has no field named ${field}`,
-    stripNeedsValue: `Write = <value> or [<tag>] after the ${w("head", "strip")} field`,
-    otherLanguageWord: (word, own) => `This diagram uses English words. Write ${own} instead of ${word}`
+    stripTwice: "Declare only one strip",
+    stripShape: "Write a strip as strip <title>: <field>, <field>",
+    emptyStripField: "A strip field name is empty",
+    stripUndeclared: "Declare the strip as strip <title>: <field>, <field> before writing set",
+    noSuchField: (field2) => `The strip has no field named ${field2}`,
+    stripNeedsValue: "Write set as set <field>: <value> or set <field> [tag: <tag>]",
+    actShape: "Write act as act <id>: <action>",
+    noteShape: "Write note as note <id>: <caption>",
+    edgeShape: "Write a line as <id> -> <id>: <label> [<attributes>]",
+    emptyLabel: "Write the label after the : of a line, or leave out the : as well",
+    quoteUnclosed: 'A value that starts with " is not closed with "',
+    afterQuote: 'After a value closed with ", write only attributes or the next ,',
+    attrUnclosed: "Start attributes with [, close them with ], and put them at the end of the line",
+    attrNoColon: (raw) => `[${raw}] cannot be read. Write an attribute as [<key>: <value>]`,
+    attrNoValue: (key2) => `Write a value after ${key2}:`,
+    attrTwice: (key2) => `Write ${key2} only once on a line`,
+    badAttr: (key2, allowed) => `${key2} cannot be written on this line. Write ${list(allowed)}`,
+    badColor: `color is one of ${list(COLORS)}`,
+    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"
   };
 };
 var MESSAGES = { ja: ja2(), en: en2() };
 var messagesFor = (lang) => MESSAGES[lang];
 
 // src/tokenize.ts
+var isBlankOrComment = (source) => source.text === "" || source.text.startsWith("//");
 function columnOf(source, index) {
   return source.column + Array.from(source.text.slice(0, index)).length;
 }
 function tokenize(notation) {
-  const lines = [];
-  notation.split(/\r?\n/).forEach((raw, index) => {
-    const text2 = raw.trim();
-    if (text2 === "" || text2.startsWith("//")) return;
-    const lead = raw.length - raw.trimStart().length;
-    lines.push({ line: index + 1, column: Array.from(raw.slice(0, lead)).length + 1, text: text2 });
+  return notation.split(/\r?\n/).map((raw, index) => {
+    const indent = Array.from(raw.slice(0, raw.length - raw.trimStart().length)).length;
+    return { line: index + 1, column: indent + 1, indent, text: raw.trim() };
   });
-  return lines;
 }
 
 // src/version.ts
@@ -2058,74 +2087,162 @@ var NotationError = class extends Error {
   column;
 };
 var fail = (source, index, message) => new NotationError(source.line, columnOf(source, index), message);
-function trailingAttrs(source, start) {
-  const attrs = [];
-  let end = source.text.length;
-  for (; ; ) {
-    const found = /\s*\[([^[\]]*)\]$/.exec(source.text.slice(start, end));
-    if (!found) break;
-    const raw = (found[1] ?? "").trim();
-    const [key = "", ...words] = raw.split(/\s+/);
-    attrs.unshift({ raw, key, value: words.join(" "), at: start + found.index + found[0].indexOf("[") });
-    end = start + found.index;
+var ID = /^[^\s[\]「」=:]+$/u;
+var EDGE = /^([^\s:[\]]+?)\s*->\s*([^\s:[\]]+)/du;
+var isOneOf = (list2, word) => list2.includes(word);
+function skipSpaces(text2, at) {
+  let i = at;
+  while (i < text2.length && /\s/u.test(text2[i] ?? "")) i++;
+  return i;
+}
+function readQuoted(source, at, m) {
+  const text2 = source.text;
+  let value2 = "";
+  for (let i = at + 1; i < text2.length; i++) {
+    const c = text2[i] ?? "";
+    const next = text2[i + 1] ?? "";
+    if (c === "\\" && (next === '"' || next === "\\")) {
+      value2 += next;
+      i++;
+    } else if (c === '"') {
+      return { value: value2, end: i + 1 };
+    } else {
+      value2 += c;
+    }
   }
-  return { end, attrs };
+  throw fail(source, at, m.quoteUnclosed);
 }
-var escape2 = (word) => word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-var QUOTES = {
-  ja: [["\u300C", "\u300D"]],
-  en: [
-    ["\u300C", "\u300D"],
-    ['"', '"']
-  ]
-};
-function nameAndNote(text2, lang) {
-  for (const [open, close] of QUOTES[lang]) {
-    const found = new RegExp(`^(.*?)\\s*${escape2(open)}(.*)${escape2(close)}$`).exec(text2);
-    if (found) return { name: (found[1] ?? "").trim(), note: found[2] ?? "" };
+function readName(source, at, m) {
+  const text2 = source.text;
+  const start = skipSpaces(text2, at);
+  if (text2[start] === '"') {
+    const quoted = readQuoted(source, start, m);
+    const rest2 = skipSpaces(text2, quoted.end);
+    if (rest2 < text2.length && text2[rest2] !== "[") throw fail(source, rest2, m.afterQuote);
+    return { value: quoted.value, rest: rest2 };
   }
-  return { name: text2.trim() };
+  const open = text2.indexOf("[", start);
+  const rest = open < 0 ? text2.length : open;
+  return { value: text2.slice(start, rest).trim(), rest };
 }
-function swapLine(text2, lang) {
-  const opens = QUOTES[lang].map(([o]) => escape2(o)).join("");
-  for (const [open, close] of QUOTES[lang]) {
-    const found = new RegExp(`^([^\\s${opens}]+)\\s*${escape2(open)}(.*)${escape2(close)}$`, "d").exec(text2);
-    if (found) return found;
+function readAttrs(source, at, allowed, m) {
+  const text2 = source.text;
+  if (!text2.endsWith("]")) throw fail(source, at, m.attrUnclosed);
+  const close = text2.length - 1;
+  const attrs2 = /* @__PURE__ */ new Map();
+  for (let i = at + 1; ; ) {
+    const start = skipSpaces(text2, i);
+    let colon = start;
+    while (colon < close && text2[colon] !== ":" && text2[colon] !== ",") colon++;
+    if (colon >= close || text2[colon] !== ":") throw fail(source, start, m.attrNoColon(text2.slice(start, colon).trim()));
+    const key2 = text2.slice(start, colon).trim();
+    if (!allowed.includes(key2)) throw fail(source, start, m.badAttr(key2, allowed));
+    if (attrs2.has(key2)) throw fail(source, start, m.attrTwice(key2));
+    let end = skipSpaces(text2, colon + 1);
+    let value2;
+    if (text2[end] === '"') {
+      const quoted = readQuoted(source, end, m);
+      value2 = quoted.value;
+      end = skipSpaces(text2, quoted.end);
+      if (end < close && text2[end] !== ",") throw fail(source, end, m.afterQuote);
+    } else {
+      const comma = text2.indexOf(",", end);
+      const stop = comma < 0 || comma > close ? close : comma;
+      value2 = text2.slice(end, stop).trim();
+      end = stop;
+    }
+    if (value2 === "") throw fail(source, start, m.attrNoValue(key2));
+    attrs2.set(key2, { value: value2, at: start });
+    if (end >= close) return attrs2;
+    i = end + 1;
+  }
+}
+function readList(source, at, m) {
+  const text2 = source.text;
+  const items = [];
+  for (let i = at; ; ) {
+    const start = skipSpaces(text2, i);
+    let value2;
+    let end;
+    if (text2[start] === '"') {
+      const quoted = readQuoted(source, start, m);
+      value2 = quoted.value;
+      end = skipSpaces(text2, quoted.end);
+      if (end < text2.length && text2[end] !== ",") throw fail(source, end, m.afterQuote);
+    } else {
+      const comma = text2.indexOf(",", start);
+      end = comma < 0 ? text2.length : comma;
+      value2 = text2.slice(start, end).trim();
+    }
+    if (value2 === "") throw fail(source, start, m.emptyStripField);
+    items.push(value2);
+    if (end >= text2.length) return items;
+    i = end + 1;
+  }
+}
+function readDeclared(source, word, allowed, m) {
+  const text2 = source.text;
+  const start = skipSpaces(text2, word.length);
+  const id = /^[^\s[]+/u.exec(text2.slice(start))?.[0];
+  if (id === void 0) throw fail(source, 0, m.needsId(word));
+  if (!ID.test(id)) throw fail(source, start, m.badId(id));
+  let rest = skipSpaces(text2, start + id.length);
+  let name2;
+  if (text2.startsWith(AS, rest) && /^(\s|$)/u.test(text2.slice(rest + AS.length, rest + AS.length + 1))) {
+    const named = readName(source, rest + AS.length, m);
+    if (named.value === "") throw fail(source, rest, m.emptyName(id));
+    name2 = named.value;
+    rest = named.rest;
   }
-  return null;
+  if (rest < text2.length && text2[rest] !== "[") throw fail(source, rest, m.afterId);
+  const attrs2 = rest < text2.length ? readAttrs(source, rest, allowed, m) : /* @__PURE__ */ new Map();
+  return { id, idAt: start, ...name2 !== void 0 ? { name: name2 } : {}, attrs: attrs2 };
 }
-function headShapes(lang, reading) {
-  const head = (key) => escape2(wordOf("head", key, lang));
-  const opens = QUOTES[reading].map(([open]) => `|${escape2(open)}`).join("");
+function lookOf(source, attrs2, m) {
+  const color = attrs2.get("color");
+  if (color && !isOneOf(COLORS, color.value)) throw fail(source, color.at, m.badColor);
+  const note = attrs2.get("note")?.value;
+  const icon = attrs2.get("icon")?.value;
   return {
-    view: new RegExp(`^${head("view")}\\s+(\\S+)$`),
-    strip: new RegExp(`^${head("strip")}\\s+(.+?)\\s*=\\s*(.+)$`),
-    region: new RegExp(`^${head("region")}\\s+([^\\s=]+)\\s*=\\s*`, "d"),
-    // 空白を全部読んでから次の字を見る (`\s` を外すと、空白 2 つの `帯  -> 受け手` を帯の値と読む)
-    stripValue: new RegExp(`^${head("strip")}\\s+(?!\\s|->|:|=${opens})`)
+    ...note !== void 0 ? { note } : {},
+    ...color ? { color: color.value } : {},
+    ...icon !== void 0 ? { icon } : {}
   };
 }
-function parseLines(lines, fallback) {
-  const [head, ...rest] = lines;
-  if (!head) throw new NotationError(1, 1, messagesFor(fallback).noHead);
-  const found = languageOf(head.text);
-  const m = messagesFor(found ?? fallback);
-  const header = /^(\S+)\s+(.+)$/.exec(head.text);
-  const kind = found && valueOf("kind", header?.[1] ?? "", found);
-  if (!found || !header || !kind) throw fail(head, 0, m.badHead);
-  const lang = found;
-  const title = header[2] ?? "";
-  const other = otherLang(lang);
-  const own = headShapes(lang, lang);
-  const foreign = headShapes(other, lang);
-  const foreignWord = (source, at, group, word) => fail(source, at, m.otherLanguageWord(word, wordOf(group, valueOf(group, word, other), lang)));
+function oldForm(text2, inStep) {
+  const first = text2.split(/\s/u)[0] ?? "";
+  if (first === "\u5E2F") return { word: first, shape: inStep ? "set" : "strip" };
+  if (Object.hasOwn(OLD_HEADS, first)) return { word: first, shape: OLD_HEADS[first] };
+  if (text2.startsWith("#")) return { word: "#", shape: "step" };
+  if (text2.startsWith(">")) return { word: ">", shape: "say" };
+  if (text2.startsWith("`")) return { word: "`", shape: "code" };
+  if (text2.includes("\u300C")) return { word: "\u300C\u300D", shape: inStep ? "note" : "box" };
+  if (/^[^\s=:]+\s*=(?!>)/u.test(text2)) return { word: "=", shape: "box" };
+  if (inStep && /^[^\s:]+\s*:/u.test(text2)) return { word: ":", shape: "act" };
+  return void 0;
+}
+function parseLines(lines, m) {
+  const headAt = lines.findIndex((source) => !isBlankOrComment(source));
+  const head = lines[headAt];
+  if (!head) throw new NotationError(1, 1, m.noHead);
+  const kind = head.text.split(/\s/u)[0] ?? "";
+  if (!isOneOf(KINDS, kind)) {
+    const old = oldForm(head.text, false);
+    throw fail(head, 0, old ? m.oldForm(old.word, old.shape) : m.badHead);
+  }
+  const titled = readName(head, kind.length, m);
+  if (titled.value === "") throw fail(head, 0, m.badHead);
+  const title = titled.value;
+  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 regions = [];
   const boxes = [];
   const ids = /* @__PURE__ */ new Set();
   let strip2;
-  let view;
   const steps = [];
   let building;
+  let group;
   const declare = (source, id, at) => {
     if (ids.has(id)) throw fail(source, at, m.duplicate(id));
     ids.add(id);
@@ -2134,9 +2251,16 @@ function parseLines(lines, fallback) {
     if (!boxes.some((box) => box.id === id)) throw fail(source, at, m.undeclaredBox(id));
     return id;
   };
+  const inStep = (source) => {
+    if (!building) throw fail(source, 0, m.stepLineBeforeStep);
+    return building;
+  };
+  const beforeSteps = (source) => {
+    if (building) throw fail(source, 0, m.declarationInStep);
+  };
   const finish = () => {
     if (!building) return;
-    if (building.body.length === 0) throw fail(building.source, 0, m.noBody(building.title));
+    if (building.body === void 0) throw fail(building.source, 0, m.noBody(building.title));
     steps.push({
       title: building.title,
       body: building.body.join("\n"),
@@ -2144,21 +2268,73 @@ function parseLines(lines, fallback) {
       events: building.events
     });
   };
-  for (const source of rest) {
+  const rest = lines.slice(headAt + 1);
+  for (let i = 0; i < rest.length; i++) {
+    const source = rest[i];
+    if (!source || isBlankOrComment(source)) continue;
     const text2 = source.text;
-    if (text2.startsWith("#")) {
-      finish();
-      const stepTitle = text2.slice(1).trim();
-      if (stepTitle === "") throw fail(source, 0, m.emptyStepTitle);
-      building = { source, title: stepTitle, body: [], events: [] };
+    const edge2 = EDGE.exec(text2);
+    if (edge2) {
+      inStep(source).events.push(readEdge(source, edge2));
       continue;
     }
-    if (!building) {
-      parseDeclaration(source);
-      continue;
+    const word = text2.split(/\s/u)[0] ?? "";
+    if (!isOneOf(HEADS, word)) {
+      const old = oldForm(text2, building !== void 0);
+      throw fail(source, 0, old ? m.oldForm(old.word, old.shape) : m.unknownHead(word));
+    }
+    switch (word) {
+      case "group":
+        readGroup(source);
+        break;
+      case "end":
+        if (text2 !== word) throw fail(source, word.length, m.endTakesNothing);
+        if (!group) throw fail(source, 0, m.strayEnd);
+        group = void 0;
+        break;
+      case "box":
+        readBox(source);
+        break;
+      case "strip":
+        readStrip(source);
+        break;
+      case "step": {
+        if (group) throw fail(group.source, 0, m.unclosedGroup(group.id));
+        finish();
+        const stepTitle = text2.slice(word.length).trim();
+        if (stepTitle === "") throw fail(source, 0, m.emptyStepTitle);
+        building = { source, title: stepTitle, events: [] };
+        break;
+      }
+      case "say":
+        i = readSay(source, i);
+        break;
+      case "code": {
+        const step = inStep(source);
+        if (step.code !== void 0) throw fail(source, 0, m.codeTwice);
+        const command = text2.slice(word.length).trim();
+        if (command === "") throw fail(source, 0, m.emptyCode);
+        step.code = command;
+        break;
+      }
+      case "act": {
+        const step = inStep(source);
+        const on = readOnBox(source, word, m.actShape);
+        step.events.push({ type: "action", box: on.box, label: on.text });
+        break;
+      }
+      case "note": {
+        const step = inStep(source);
+        const on = readOnBox(source, word, m.noteShape);
+        step.events.push({ type: "swap", box: on.box, text: on.text });
+        break;
+      }
+      case "set":
+        inStep(source).events.push(readSet(source));
+        break;
     }
-    building.events.push(...parseStepLine(source, building));
   }
+  if (group) throw fail(group.source, 0, m.unclosedGroup(group.id));
   finish();
   if (boxes.length === 0) throw fail(head, 0, m.noBoxes);
   if (steps.length === 0) throw fail(head, 0, m.noSteps);
@@ -2173,168 +2349,148 @@ function parseLines(lines, fallback) {
     steps,
     ...kind === "sequence" ? { sequence: { lifelines: boxes.map((box) => box.id) } } : {}
   };
-  function parseDeclaration(source) {
-    const text2 = source.text;
-    const viewDecl = own.view.exec(text2);
-    if (viewDecl) {
-      if (view) throw fail(source, 0, m.viewTwice);
-      const word = viewDecl[1] ?? "";
-      const at = text2.indexOf(word);
-      const chosen = valueOf("view", word, lang);
-      if (!chosen) {
-        if (valueOf("view", word, other) !== void 0) throw foreignWord(source, at, "view", word);
-        throw fail(source, at, m.badView);
-      }
-      view = chosen;
-      return;
-    }
-    const stripDecl = own.strip.exec(text2);
-    if (stripDecl) {
-      if (strip2) throw fail(source, 0, m.stripTwice);
-      const fields = (stripDecl[2] ?? "").split(",").map((field) => field.trim());
-      if (fields.some((field) => field === "")) throw fail(source, 0, m.emptyStripField);
-      strip2 = { title: stripDecl[1] ?? "", fields };
-      return;
-    }
-    const regionDecl = own.region.exec(text2);
-    const boxDecl = regionDecl ? void 0 : /^([^\s=]+)\s*=(?!>)\s*/d.exec(text2);
-    const decl = regionDecl ?? boxDecl;
-    if (!decl?.indices?.[1]) {
-      if (foreign.view.test(text2) || foreign.strip.test(text2) || foreign.region.test(text2)) {
-        throw foreignWord(source, 0, "head", text2.split(/\s+/)[0] ?? "");
-      }
-      if (looksLikeStepLine(text2, lang)) throw fail(source, 0, m.stepLineBeforeStep);
-      throw fail(source, 0, m.unreadableDeclaration);
-    }
-    const id = decl[1] ?? "";
-    declare(source, id, decl.indices[1][0]);
-    const { end, attrs } = trailingAttrs(source, decl[0].length);
-    const { name, note } = nameAndNote(text2.slice(decl[0].length, end), lang);
-    if (name === "") throw fail(source, decl[0].length, m.emptyName(id));
-    const look = {};
-    for (const attr of attrs) {
-      const key = valueOf("attr", attr.key, lang);
-      if (key === "color") {
-        if (!COLORS.includes(attr.value)) throw fail(source, attr.at, m.badColor);
-        look.color = attr.value;
-      } else if (key === "icon" && attr.value !== "") {
-        look.icon = attr.value;
-      } else if (key === "region" && !regionDecl) {
-        if (!regions.some((region) => region.id === attr.value)) throw fail(source, attr.at, m.regionFirst(attr.value));
-        look.region = attr.value;
-      } else {
-        if (valueOf("attr", attr.key, other) !== void 0) throw foreignWord(source, attr.at, "attr", attr.key);
-        throw fail(source, attr.at, m.badAttr(attr.raw));
-      }
-    }
-    if (regionDecl) {
-      regions.push({
-        id,
-        name,
-        ...note !== void 0 ? { note } : {},
-        ...look.color ? { color: look.color } : {},
-        ...look.icon ? { icon: look.icon } : {}
-      });
-      return;
+  function readGroup(source) {
+    beforeSteps(source);
+    if (group) throw fail(source, 0, m.nestedGroup);
+    const declared = readDeclared(source, "group", ATTRS.group, 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 {
+      declare(source, declared.id, declared.idAt);
+      regions.push({ id: declared.id, name: declared.name ?? declared.id, ...lookOf(source, declared.attrs, m) });
     }
+    group = { source, id: declared.id };
+  }
+  function readBox(source) {
+    beforeSteps(source);
+    const declared = readDeclared(source, "box", ATTRS.box, m);
+    declare(source, declared.id, declared.idAt);
+    const { note, ...look } = lookOf(source, declared.attrs, m);
     boxes.push({
-      id,
-      name,
+      id: declared.id,
+      name: declared.name ?? declared.id,
       ...note !== void 0 ? { sub: note } : {},
-      ...look.color ? { color: look.color } : {},
-      ...look.icon ? { icon: look.icon } : {},
-      ...look.region ? { region: look.region } : {}
+      ...look,
+      ...group ? { region: group.id } : {}
     });
   }
-  function parseStepLine(source, step) {
+  function readStrip(source) {
+    beforeSteps(source);
+    if (strip2) throw fail(source, 0, m.stripTwice);
     const text2 = source.text;
-    if (text2.startsWith(">")) {
-      step.body.push(text2.slice(1).trim());
-      return [];
-    }
-    const code = /^`(.*)`$/.exec(text2);
-    if (code) {
-      if (step.code !== void 0) throw fail(source, 0, m.codeTwice);
-      step.code = code[1] ?? "";
-      return [];
-    }
-    if (own.stripValue.test(text2)) return [parseStripValue(source)];
-    if (foreign.stripValue.test(text2)) throw foreignWord(source, 0, "head", text2.split(/\s+/)[0] ?? "");
-    if (text2.includes("->")) return [parseEdge(source)];
-    if (/^[^\s=]+\s*=(?!>)/.test(text2)) throw fail(source, 0, m.declarationInStep);
-    const swap = swapLine(text2, lang);
-    if (swap?.indices?.[1]) {
-      const box = boxAt(source, swap[1] ?? "", swap.indices[1][0]);
-      if ((swap[2] ?? "") === "") throw fail(source, swap.indices[1][1], m.emptySwap);
-      return [{ type: "swap", box, text: swap[2] ?? "" }];
+    const start = skipSpaces(text2, "strip".length);
+    let stripTitle;
+    let colon;
+    if (text2[start] === '"') {
+      const quoted = readQuoted(source, start, m);
+      stripTitle = quoted.value;
+      colon = skipSpaces(text2, quoted.end);
+    } else {
+      colon = text2.indexOf(":", start);
+      stripTitle = colon < 0 ? "" : text2.slice(start, colon).trim();
     }
-    const action2 = /^([^\s:]+)\s*:\s*(.+)$/d.exec(text2);
-    if (action2?.indices?.[1]) return [{ type: "action", box: boxAt(source, action2[1] ?? "", action2.indices[1][0]), label: action2[2] ?? "" }];
-    throw fail(source, 0, m.unreadableStepLine);
+    if (stripTitle === "" || text2[colon] !== ":") throw fail(source, 0, m.stripShape);
+    strip2 = { title: stripTitle, fields: readList(source, colon + 1, m) };
   }
-  function parseEdge(source) {
-    const { end, attrs } = trailingAttrs(source, 0);
-    const edge2 = /^([^\s:]+)\s*->\s*([^\s:]+)(?:\s*:\s*(.+))?$/d.exec(source.text.slice(0, end));
-    if (!edge2?.indices?.[1] || !edge2.indices[2]) throw fail(source, 0, m.edgeShape);
-    const from = boxAt(source, edge2[1] ?? "", edge2.indices[1][0]);
-    const to = boxAt(source, edge2[2] ?? "", edge2.indices[2][0]);
-    let carry;
-    let labelSide;
-    for (const attr of attrs) {
-      const kind2 = valueOf("carry", attr.key, lang);
-      const label2 = valueOf("attr", attr.key, lang) === "label";
-      if (kind2 !== void 0) {
-        if (carry) throw fail(source, attr.at, m.carryTwice);
-        if (kind2 === "tag") {
-          if (attr.value === "") throw fail(source, attr.at, m.tagNeedsValue);
-          carry = { kind: kind2, text: attr.value };
-        } else {
-          if (attr.value !== "") throw fail(source, attr.at, m.carryTakesNoValue(attr.key));
-          carry = { kind: kind2 };
-        }
-      } else if (label2 && valueOf("side", attr.value, lang) !== void 0) {
-        labelSide = valueOf("side", attr.value, lang);
-      } else {
-        if (label2 && valueOf("side", attr.value, other) !== void 0) throw foreignWord(source, attr.at, "side", attr.value);
-        if (valueOf("carry", attr.key, other) !== void 0) throw foreignWord(source, attr.at, "carry", attr.key);
-        if (valueOf("attr", attr.key, other) !== void 0) throw foreignWord(source, attr.at, "attr", attr.key);
-        throw fail(source, attr.at, m.badAttr(attr.raw));
+  function readSay(source, index) {
+    const step = inStep(source);
+    if (step.body !== void 0) throw fail(source, 0, m.sayTwice);
+    const inline = source.text.slice("say".length).trim();
+    const body = inline === "" ? [] : [inline];
+    let blanks = 0;
+    let last = index;
+    for (let j = index + 1; j < rest.length; j++) {
+      const next = rest[j];
+      if (!next) break;
+      if (next.text === "") {
+        blanks++;
+        continue;
       }
+      if (next.indent <= source.indent) break;
+      body.push(...Array.from({ length: blanks }, () => ""), next.text);
+      blanks = 0;
+      last = j;
     }
+    if (body.length === 0) throw fail(source, 0, m.emptySay);
+    step.body = body;
+    return last;
+  }
+  function readOnBox(source, word, shape) {
+    const found = new RegExp(`^${word}\\s+([^\\s:]+)\\s*:\\s*(.*)$`, "du").exec(source.text);
+    const idAt = found?.indices?.[1]?.[0];
+    if (!found || idAt === void 0 || (found[2] ?? "") === "") throw fail(source, 0, shape);
+    return { box: boxAt(source, found[1] ?? "", idAt), text: found[2] ?? "" };
+  }
+  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;
+    }
+    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);
+    let carry = { kind: "envelope" };
+    if (tag) carry = { kind: "tag", text: tag.value };
+    else if (carried) carry = carried.value === "coin" ? { kind: "coin" } : { kind: "none" };
     return {
       type: "edge",
       from,
       to,
-      ...edge2[3] !== void 0 ? { label: edge2[3] } : {},
-      carry: carry ?? { kind: "envelope" },
-      ...labelSide ? { labelSide } : {}
+      ...label2 !== void 0 ? { label: label2 } : {},
+      carry,
+      ...side ? { labelSide: side.value } : {}
     };
   }
-  function parseStripValue(source) {
-    if (!strip2) throw fail(source, 0, m.stripUndeclared);
-    const start = new RegExp(`^${escape2(wordOf("head", "strip", lang))}\\s+`).exec(source.text)?.[0].length ?? 0;
-    const { end, attrs } = trailingAttrs(source, start);
-    if (attrs.length > 1) throw fail(source, attrs[1]?.at ?? 0, m.stripTagOnce);
-    const rest2 = source.text.slice(start, end);
-    const assigned = /^(.+?)\s*=\s*(.+)$/.exec(rest2);
-    const field = (assigned ? assigned[1] : rest2)?.trim() ?? "";
-    if (!strip2.fields.includes(field)) throw fail(source, start, m.noSuchField(field));
-    const tag = attrs[0]?.raw;
-    if (!assigned && tag === void 0) throw fail(source, start, m.stripNeedsValue);
+  function readSet(source) {
+    const declared = strip2;
+    if (!declared) throw fail(source, 0, m.stripUndeclared);
+    const text2 = source.text;
+    const start = skipSpaces(text2, "set".length);
+    let field2;
+    let at;
+    if (text2[start] === '"') {
+      const quoted = readQuoted(source, start, m);
+      field2 = quoted.value;
+      at = skipSpaces(text2, quoted.end);
+    } else {
+      at = start;
+      while (at < text2.length && text2[at] !== ":" && text2[at] !== "[") at++;
+      field2 = text2.slice(start, at).trim();
+    }
+    if (!declared.fields.includes(field2)) throw fail(source, start, m.noSuchField(field2));
+    let value2;
+    if (text2[at] === ":") {
+      const named = readName(source, at + 1, m);
+      if (named.value === "") throw fail(source, at, m.stripNeedsValue);
+      value2 = named.value;
+      at = named.rest;
+    }
+    if (at < text2.length && text2[at] !== "[") throw fail(source, at, m.stripNeedsValue);
+    const tag = at < text2.length ? readAttrs(source, at, ATTRS.set, m).get("tag")?.value : void 0;
+    if (value2 === void 0 && tag === void 0) throw fail(source, 0, m.stripNeedsValue);
     return {
       type: "strip",
-      field,
-      ...assigned ? { value: assigned[2] ?? "" } : {},
+      field: field2,
+      ...value2 !== void 0 ? { value: value2 } : {},
       ...tag !== void 0 ? { tag } : {}
     };
   }
 }
-function looksLikeStepLine(text2, lang) {
-  return text2.startsWith(">") || text2.startsWith("`") || text2.includes("->") || swapLine(text2, lang) !== null;
-}
 function parseNotation(notation, options = {}) {
   try {
-    return { ok: true, diagram: parseLines(tokenize(notation), options.lang ?? "ja") };
+    return { ok: true, diagram: parseLines(tokenize(notation), messagesFor(options.lang ?? "ja")) };
   } catch (error) {
     if (!(error instanceof NotationError)) throw error;
     return { ok: false, errors: [{ line: error.line, column: error.column, message: error.message }] };
@@ -2342,48 +2498,84 @@ function parseNotation(notation, options = {}) {
 }
 
 // src/printer.ts
-function quoted(name, text2, lang) {
-  if (text2 === void 0) return "";
-  if (lang === "en" && !name.includes('"') && !text2.includes('"')) return ` "${text2}"`;
-  return `\u300C${text2}\u300D`;
+var quote = (text2) => `"${text2.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+var name = (text2) => text2.includes("[") || text2.startsWith('"') ? quote(text2) : text2;
+var key = (text2) => text2.includes(":") || text2.includes("[") || text2.startsWith('"') ? quote(text2) : text2;
+var field = (text2) => text2.includes(",") || text2.startsWith('"') ? quote(text2) : text2;
+var value = (text2) => text2.includes(",") || text2.includes("]") || text2.startsWith('"') ? quote(text2) : text2;
+var attrs = (pairs) => {
+  const written = pairs.filter((pair) => pair[1] !== void 0);
+  return written.length === 0 ? "" : ` [${written.map(([k, v]) => `${k}: ${value(v)}`).join(", ")}]`;
+};
+var shown = (id, text2) => text2 === id ? "" : ` as ${name(text2)}`;
+var declareRegion = (r) => `group ${r.id}${shown(r.id, r.name)}${attrs([
+  ["note", r.note],
+  ["color", r.color],
+  ["icon", r.icon]
+])}`;
+var declareBox = (b) => `box ${b.id}${shown(b.id, b.name)}${attrs([
+  ["note", b.sub],
+  ["color", b.color],
+  ["icon", b.icon]
+])}`;
+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]])}`;
+    }
+    case "action":
+      return `act ${e.box}: ${e.label}`;
+    case "swap":
+      return `note ${e.box}: ${e.text}`;
+    case "strip":
+      return `set ${key(e.field)}${e.value === void 0 ? "" : `: ${name(e.value)}`}${attrs([["tag", e.tag]])}`;
+  }
 }
-function printNotation(diagram, options = {}) {
-  const lang = options.lang ?? "ja";
-  const attrs = (pairs) => pairs.filter((pair) => pair[1] !== void 0).map(([key, value]) => ` [${wordOf("attr", key, lang)} ${value}]`).join("");
-  const region = (r) => `${wordOf("head", "region", lang)} ${r.id} = ${r.name}${quoted(r.name, r.note, lang)}${attrs([["color", r.color], ["icon", r.icon]])}`;
-  const box = (b) => `${b.id} = ${b.name}${quoted(b.name, b.sub, lang)}${attrs([["color", b.color], ["icon", b.icon], ["region", b.region]])}`;
-  const carry = (c) => {
-    if (c.kind === "envelope") return "";
-    if (c.kind === "tag") return ` [${wordOf("carry", "tag", lang)} ${c.text}]`;
-    return ` [${wordOf("carry", c.kind, lang)}]`;
-  };
-  const event = (e) => {
-    switch (e.type) {
-      case "edge":
-        return `${e.from} -> ${e.to}${e.label === void 0 ? "" : ` : ${e.label}`}${carry(e.carry)}${e.labelSide ? ` [${wordOf("attr", "label", lang)} ${wordOf("side", e.labelSide, lang)}]` : ""}`;
-      case "action":
-        return `${e.box} : ${e.label}`;
-      case "swap":
-        return `${e.box}${quoted("", e.text, lang)}`;
-      case "strip":
-        return `${wordOf("head", "strip", lang)} ${e.field}${e.value === void 0 ? "" : ` = ${e.value}`}${e.tag === void 0 ? "" : ` [${e.tag}]`}`;
+function declarations(diagram) {
+  const regions = diagram.regions ?? [];
+  const runs = [];
+  for (const b of diagram.boxes) {
+    const last = runs.at(-1);
+    if (last && last.region === b.region) last.boxes.push(b);
+    else runs.push({ ...b.region !== void 0 ? { region: b.region } : {}, boxes: [b] });
+  }
+  const opened = [...new Set(runs.flatMap((run) => run.region === void 0 ? [] : [run.region]))];
+  const inOrder = opened.length === regions.length && opened.every((id, i) => regions[i]?.id === id);
+  const declared = /* @__PURE__ */ new Set();
+  const blocks = [];
+  if (!inOrder) {
+    for (const r of regions) {
+      blocks.push(`${declareRegion(r)}
+end`);
+      declared.add(r.id);
     }
-  };
-  const head = [
-    ...diagram.view ? [`${wordOf("head", "view", lang)} ${wordOf("view", diagram.view, lang)}`] : [],
-    ...(diagram.regions ?? []).map(region),
-    ...diagram.boxes.map(box),
-    ...diagram.strip ? [`${wordOf("head", "strip", lang)} ${diagram.strip.title} = ${diagram.strip.fields.join(", ")}`] : []
-  ];
-  const steps = diagram.steps.map(
-    (step) => [
-      `# ${step.title}`,
-      ...step.body.split("\n").map((line) => `> ${line}`),
-      ...step.code === void 0 ? [] : [`\`${step.code}\``],
-      ...step.events.map(event)
-    ].join("\n")
-  );
-  return [`${wordOf("kind", diagram.kind, lang)} ${diagram.title}`, head.join("\n"), ...steps].join("\n\n") + "\n";
+  }
+  for (const run of runs) {
+    const lines = run.boxes.map(declareBox);
+    if (run.region === void 0) {
+      blocks.push(lines.join("\n"));
+      continue;
+    }
+    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"));
+  }
+  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(", ")}`);
+  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}`)];
+    blocks.push(
+      [`step ${step.title}`, ...say, ...step.code === void 0 ? [] : [`  code ${step.code}`], ...step.events.map((e) => `  ${event(e)}`)].join("\n")
+    );
+  }
+  return `${blocks.join("\n\n")}
+`;
 }
 
 // src/look/fonts.ts
@@ -2619,7 +2811,7 @@ function resolvePalette(id) {
   return found ?? PALETTES[DEFAULT_PALETTE];
 }
 function paletteVars(palette, theme) {
-  return Object.entries(palette[theme]).map(([key, value]) => `--${key}:${value}`).join(";");
+  return Object.entries(palette[theme]).map(([key2, value2]) => `--${key2}:${value2}`).join(";");
 }
 var FONT_VARS = `--sans:"${FONTS.sans}";--mono:"${FONTS.mono}"`;
 var COLOR_ORDER = ["blue", "amber", "green", "violet", "rose"];
@@ -2665,8 +2857,16 @@ var LOOK = {
   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 },
   shadow: { near: 0.8, far: 4, nearY: 1, farY: 3 },
   mini: { w: 168, pad: 8, title: 14, inset: 12, radius: 10 },
-  /** 寄って追う見せ方の窓の高さの、幅に対する割合と下限 */
-  follow: { aspect: 0.75, minH: 320, ease: 0.6 },
+  /**
+   * 寄って追う見せ方の窓の高さの、幅に対する割合と下限。
+   * `fitMinH` は見える高さに収める時 (#3047) の窓の高さの下限で、これより低い枠では収めずに枠の中で送る。
+   * `narrow` は縦長の全体図を出す枠の幅の下限で、これより狭い枠 (携帯の幅) では全体図を出さずに窓へ幅を渡す (#3055)。
+   * `badgeRoom` は番号の丸が窓から外れる段で窓を寄せ直す時に、丸の周りに空ける幅 (#3046)。
+   * `headRoom` は時系列図の図の頭の箱の下端から、窓に線を見せ始める所までの幅 (#3118)。
+   * `head` は時系列図の窓の上端に貼る頭の列の頭の箱で、アイコンを外した名前と下の字の 2 段 (#3120)。
+   * `pad` は頭の列の上下の余白、`h` は箱の高さ、`nameY` と `subY` は箱の上端から名前と下の字の基準線まで
+   */
+  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 },
   /** 字の並びの基準線を、置きたい高さの真ん中からどれだけ下げるか */
@@ -2674,8 +2874,12 @@ var LOOK = {
   /** 浮いて出る物が下から上がる長さと、弾んで出る物の始まりの大きさ */
   rise: 5,
   popFrom: 0.4,
-  /** 動きを嫌わない人の頁の部品 */
-  player: { gap: 10, radius: 12, button: 36, hidden: 1, focus: 2 }
+  /**
+   * 動きを嫌わない人の頁の部品。
+   * `narrow` は段の本文の帯を横 1 列に並べる帯の中身の幅の下限で、これより狭い帯 (携帯の幅) では題と本文を釦と番号の段の下に置く (#3057、#3069)。
+   * `touch` はその狭い帯で段を送る釦の縦横で、指で押せる大きさにする (#3069)
+   */
+  player: { gap: 10, radius: 12, button: 36, touch: 44, hidden: 1, focus: 2, narrow: 440 }
 };
 var MOTION = {
   /** 最初の段の前に全体を見せる長さ */
@@ -2753,7 +2957,7 @@ function textWidth(text2, style) {
 // src/layout/scene.ts
 function edgesOf(diagram) {
   return diagram.steps.flatMap(
-    (step, s) => step.events.flatMap((event, e) => event.type === "edge" ? [{ step: s, event: e, edge: event }] : [])
+    (step, s) => step.events.flatMap((event2, e) => event2.type === "edge" ? [{ step: s, event: e, edge: event2 }] : [])
   );
 }
 function boxColors(diagram) {
@@ -2776,9 +2980,9 @@ function boxWidth(diagram, id, withActions) {
   if (!box) return LOOK.box.minW;
   const lines = [textWidth(box.name, TYPE.boxName), textWidth(box.sub ?? "", TYPE.boxSub)];
   for (const step of diagram.steps) {
-    for (const event of step.events) {
-      if (event.type === "swap" && event.box === id) lines.push(textWidth(event.text, TYPE.boxSubStrong));
-      if (withActions && event.type === "action" && event.box === id) lines.push(textWidth(event.label, TYPE.boxSubStrong));
+    for (const event2 of step.events) {
+      if (event2.type === "swap" && event2.box === id) lines.push(textWidth(event2.text, TYPE.boxSubStrong));
+      if (withActions && event2.type === "action" && event2.box === id) lines.push(textWidth(event2.label, TYPE.boxSubStrong));
     }
   }
   return Math.max(LOOK.box.minW, Math.max(...lines) + LOOK.box.padX * 2);
@@ -2847,24 +3051,24 @@ function placeLabel(request, obstacles) {
   }
   return { ...base, step: request.step, event: request.event, text: request.text, family: labelStyle(request.text).family, color: request.color };
 }
-function fieldWidth(diagram, name) {
-  let value = 0;
+function fieldWidth(diagram, name2) {
+  let value2 = 0;
   let tag = 0;
   for (const step of diagram.steps) {
-    for (const event of step.events) {
-      if (event.type !== "strip" || event.field !== name) continue;
-      if (event.value !== void 0) value = Math.max(value, textWidth(event.value, hasWide(event.value) ? TYPE.fieldValueJa : TYPE.fieldValue));
-      if (event.tag !== void 0) tag = Math.max(tag, textWidth(event.tag, TYPE.tag) + LOOK.strip.tagPadX * 2);
+    for (const event2 of step.events) {
+      if (event2.type !== "strip" || event2.field !== name2) continue;
+      if (event2.value !== void 0) value2 = Math.max(value2, textWidth(event2.value, hasWide(event2.value) ? TYPE.fieldValueJa : TYPE.fieldValue));
+      if (event2.tag !== void 0) tag = Math.max(tag, textWidth(event2.tag, TYPE.tag) + LOOK.strip.tagPadX * 2);
     }
   }
-  const both = value + (tag > 0 ? (value > 0 ? LOOK.strip.tagGap : 0) + tag : 0);
-  return Math.max(textWidth(name, TYPE.fieldName), both);
+  const both = value2 + (tag > 0 ? (value2 > 0 ? LOOK.strip.tagGap : 0) + tag : 0);
+  return Math.max(textWidth(name2, TYPE.fieldName), both);
 }
 function stripNeed(diagram) {
   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, name) => sum + fieldWidth(diagram, name) + fieldGap, 0) - fieldGap + pad2;
+  return start + diagram.strip.fields.reduce((sum, name2) => sum + fieldWidth(diagram, name2) + fieldGap, 0) - fieldGap + pad2;
 }
 function layoutStrip(diagram, x, y, width) {
   if (!diagram.strip) return void 0;
@@ -2873,13 +3077,13 @@ function layoutStrip(diagram, x, y, width) {
   const fields = [];
   let cx = start;
   let row = 0;
-  for (const name of diagram.strip.fields) {
-    const w = fieldWidth(diagram, name);
+  for (const name2 of diagram.strip.fields) {
+    const w = fieldWidth(diagram, name2);
     if (cx > start && cx + w > width - pad2) {
       cx = start;
       row++;
     }
-    fields.push({ name, x: x + cx, y: y + row * line, w });
+    fields.push({ name: name2, x: x + cx, y: y + row * line, w });
     cx += w + fieldGap;
   }
   return { x, y, w: width, h: h + row * line, title: diagram.strip.title, fields };
@@ -2915,20 +3119,20 @@ function shiftContent(layout, dx, dy) {
   }
   if (layout.strip) {
     layout.strip.y += dy;
-    for (const field of layout.strip.fields) {
-      field.x += dx;
-      field.y += dy;
+    for (const field2 of layout.strip.fields) {
+      field2.x += dx;
+      field2.y += dy;
     }
   }
 }
 function cornerBadge(events, step, layout) {
   const { inset } = LOOK.badge;
-  for (const event of events) {
-    const id = event.type === "swap" || event.type === "action" ? event.box : void 0;
+  for (const event2 of events) {
+    const id = event2.type === "swap" || event2.type === "action" ? event2.box : void 0;
     const box2 = layout.boxes.find((b) => b.id === id);
     if (box2) return { step, x: box2.x + inset, y: box2.y + inset, color: box2.color };
   }
-  if (layout.strip && events.some((event) => event.type === "strip")) return { step, x: layout.strip.x + inset, y: layout.strip.y + inset, color: "slate" };
+  if (layout.strip && events.some((event2) => event2.type === "strip")) return { step, x: layout.strip.x + inset, y: layout.strip.y + inset, color: "slate" };
   const box = layout.boxes[0];
   return { step, x: box.x + inset, y: box.y + inset, color: box.color };
 }
@@ -3010,11 +3214,11 @@ function placeBoxes(diagram, groups) {
   for (const slot of slots.values()) slot.col = used.indexOf(slot.col);
   return slots;
 }
-function nameLines(name) {
-  const spaces = [...name.matchAll(/ /g)].map((m) => m.index);
-  if (spaces.length === 0) return [name];
-  const at = spaces.reduce((best, i) => Math.abs(i - name.length / 2) < Math.abs(best - name.length / 2) ? i : best);
-  return [name.slice(0, at), name.slice(at + 1)];
+function nameLines(name2) {
+  const spaces = [...name2.matchAll(/ /g)].map((m) => m.index);
+  if (spaces.length === 0) return [name2];
+  const at = spaces.reduce((best, i) => Math.abs(i - name2.length / 2) < Math.abs(best - name2.length / 2) ? i : best);
+  return [name2.slice(0, at), name2.slice(at + 1)];
 }
 function headerSize(region) {
   const { icon, nameY, line, inset } = LOOK.region;
@@ -3145,11 +3349,11 @@ function arrange(diagram, groups, slots, rooms) {
     ];
     return candidates.find((points) => !blocked(points, from, to)) ?? candidates[2];
   };
-  const sceneEdges = edges.map(({ step, event, edge: edge2 }) => {
+  const sceneEdges = edges.map(({ step, event: event2, edge: edge2 }) => {
     const target = byId.get(edge2.to);
     return {
       step,
-      event,
+      event: event2,
       from: edge2.from,
       to: edge2.to,
       points: route(edge2.from, edge2.to),
@@ -3251,11 +3455,11 @@ function layoutSequence(diagram) {
   const spacing = widths.slice(1).map((w, i) => widths[i] / 2 + w / 2 + Q.columnGap);
   const needs = [];
   for (const step of diagram.steps) {
-    for (const event of step.events) {
-      if (event.type !== "edge" || event.label === void 0) continue;
-      const a = column.get(event.from) ?? 0;
-      const b = column.get(event.to) ?? 0;
-      const w = textWidth(event.label, labelStyle(event.label)) + L.padX * 2;
+    for (const event2 of step.events) {
+      if (event2.type !== "edge" || event2.label === void 0) continue;
+      const a = column.get(event2.from) ?? 0;
+      const b = column.get(event2.to) ?? 0;
+      const w = textWidth(event2.label, labelStyle(event2.label)) + L.padX * 2;
       if (a === b) {
         if (a < spacing.length) needs.push({ from: a, to: a + 1, need: Q.selfW + L.side + w + Q.labelRoom });
       } else {
@@ -3299,14 +3503,14 @@ function layoutSequence(diagram) {
   let below = 0;
   let first = true;
   diagram.steps.forEach((step, s) => {
-    step.events.forEach((event, e) => {
-      if (event.type !== "edge" && event.type !== "action") return;
+    step.events.forEach((event2, e) => {
+      if (event2.type !== "edge" && event2.type !== "action") return;
       let above;
       let under;
-      if (event.type === "edge") {
-        const side = event.labelSide ?? "above";
-        const self = event.from === event.to;
-        const named = event.label !== void 0;
+      if (event2.type === "edge") {
+        const side = 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;
       } else {
@@ -3316,9 +3520,9 @@ function layoutSequence(diagram) {
       y = first ? y + above : y + Math.max(Q.minPitch, below + Q.rowGap + above) + (e === 0 && s > 0 ? Q.stepGap : 0);
       first = false;
       below = under;
-      if (event.type === "edge") {
-        const xf = xs[column.get(event.from) ?? 0];
-        const xt = xs[column.get(event.to) ?? 0];
+      if (event2.type === "edge") {
+        const xf = xs[column.get(event2.from) ?? 0];
+        const xt = xs[column.get(event2.to) ?? 0];
         const dir = Math.sign(xt - xf) || 1;
         const points = xf === xt ? [
           [xf, y],
@@ -3329,22 +3533,22 @@ function layoutSequence(diagram) {
           [xf, y],
           [xt - dir * LOOK.edge.inset, y]
         ];
-        const color = edgeColor(event, colors);
-        edges.push({ step: s, event: e, from: event.from, to: event.to, points, color, carry: event.carry });
-        if (event.label !== void 0) {
+        const color = edgeColor(event2, colors);
+        edges.push({ step: s, event: e, from: event2.from, to: event2.to, points, color, carry: event2.carry });
+        if (event2.label !== void 0) {
           requests.push({
             step: s,
             event: e,
-            text: event.label,
+            text: event2.label,
             points,
             color,
-            ...event.labelSide ? { side: event.labelSide } : xf === xt ? { side: "right" } : {}
+            ...event2.labelSide ? { side: event2.labelSide } : xf === xt ? { side: "right" } : {}
           });
         }
       } else {
-        const x = xs[column.get(event.box) ?? 0];
-        const w = textWidth(event.label, TYPE.action) + LOOK.action.padX * 2;
-        actions.push({ step: s, event: e, box: event.box, text: event.label, color: colors.get(event.box) ?? "slate", x: x + LOOK.badge.r + 4, y: y - LOOK.action.h / 2, w, h: LOOK.action.h });
+        const x = xs[column.get(event2.box) ?? 0];
+        const w = textWidth(event2.label, TYPE.action) + LOOK.action.padX * 2;
+        actions.push({ step: s, event: e, box: event2.box, text: event2.label, color: colors.get(event2.box) ?? "slate", x: x + LOOK.badge.r + 4, y: y - LOOK.action.h / 2, w, h: LOOK.action.h });
       }
     });
   });
@@ -3388,17 +3592,17 @@ function plan(step) {
   let cursor = MOTION.edgeAt;
   let arrived;
   let changes = 0;
-  step.events.forEach((event, e) => {
-    if (event.type === "edge") {
-      const carries = event.carry.kind !== "none";
+  step.events.forEach((event2, e) => {
+    if (event2.type === "edge") {
+      const carries = event2.carry.kind !== "none";
       const a = cursor;
       const b = a + (carries ? MOTION.drawCarry : MOTION.draw);
-      out.edges.push({ event: e, a, b, carries, coin: event.carry.kind === "coin", named: event.label !== void 0 });
+      out.edges.push({ event: e, a, b, carries, coin: event2.carry.kind === "coin", named: event2.label !== void 0 });
       cursor = a + MOTION.stagger;
       arrived = b;
       changes = 0;
       out.busy = Math.max(out.busy, b);
-    } else if (event.type === "action") {
+    } else if (event2.type === "action") {
       out.events.push({ event: e, at: cursor });
       out.busy = Math.max(out.busy, cursor + MOTION.action);
       cursor += MOTION.action;
@@ -3442,15 +3646,15 @@ function buildTimeline(diagram) {
       if (later) label2.end = Math.min(label2.end, later.start);
     });
     labels.push(...named);
-    for (const event of p.events) events.push({ step: s, event: event.event, at: span.start + event.at });
+    for (const event2 of p.events) events.push({ step: s, event: event2.event, at: span.start + event2.at });
   });
   const first = steps[0]?.start ?? 0;
   const hasMain = departures.some((d) => d.who === "main");
   const carriers = [];
   for (const who of ["main", "coin"]) {
-    const list = departures.filter((d) => d.who === who);
-    list.forEach((d, k) => {
-      const next = list[k + 1];
+    const list2 = departures.filter((d) => d.who === who);
+    list2.forEach((d, k) => {
+      const next = list2[k + 1];
       const waits = k === 0 && (who === "main" || !hasMain);
       carriers.push({
         step: d.step,
@@ -3519,8 +3723,8 @@ var ICONS = {
 var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 var r1 = (v) => Math.round(v * 100) / 100;
 var cs = (k) => k === "coin" ? "--c:var(--coin);--ct:var(--coint)" : `--c:var(--c-${k});--ct:var(--t-${k})`;
-function glyph(name, x, y, scale, cls = "dg-gl") {
-  const d = name === void 0 ? void 0 : ICONS[name];
+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(" ");
@@ -3557,20 +3761,31 @@ function band(region) {
   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>`;
 }
-function card(box, ctx, on, changes) {
-  const { m, sh } = ctx;
-  const { radius, icon, iconRadius, iconScale, iconY, nameY, subY } = LOOK.box;
+function subLines(box, m, changes, y) {
   const seq = [[0, box.sub ?? "", "dg-ss"], ...changes];
-  const subs = seq.map(([t, text2, cls], k) => {
+  return seq.map(([t, text2, cls], k) => {
     const next = seq[k + 1]?.[0];
     const anim = k === 0 ? next === void 0 ? "" : m.until(next - MOTION.untilFade) : next === void 0 ? m.rise(t) : m.rise(t, next - MOTION.untilFade);
     if (text2 === "") return "";
-    return `<g${anim ? ` class="dg-a" style="${anim}"` : ""}><text class="${cls}" x="${r1(box.cx)}" y="${r1(box.cy + subY)}" text-anchor="middle">${esc(text2)}</text></g>`;
+    return `<g${anim ? ` class="dg-a" style="${anim}"` : ""}><text class="${cls}" x="${r1(box.cx)}" y="${r1(y)}" text-anchor="middle">${esc(text2)}</text></g>`;
   }).join("");
+}
+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) {
+  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 rect = (cls, extra = "") => `<rect class="${cls}" x="${r1(box.x)}" y="${r1(box.y)}" width="${r1(box.w)}" height="${box.h}" rx="${radius}"${extra}/>`;
   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)}">${act ? `<g class="dg-a" style="${act}">${rect("dg-halo")}</g>` : ""}${rect("dg-st", ` ${sh}`)}${act ? `<g class="dg-a" style="${act}">${rect("dg-on")}</g>` : ""}${mark}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(box.cy + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
+  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>`;
+}
+function headCard(box, ctx, on, changes) {
+  const { pad: pad2, h, nameY, subY } = LOOK.follow.head;
+  const subs = subLines(box, ctx.m, changes, pad2 + subY);
+  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 lifeline(x, y1, y2) {
   return `<line class="dg-ll" x1="${r1(x)}" y1="${r1(y1)}" x2="${r1(x)}" y2="${r1(y2)}"/>`;
@@ -3688,29 +3903,29 @@ function strip(s, changes, ctx) {
     `<g style="${cs("slate")}"><rect class="dg-bi" x="${r1(s.x + S2.pad)}" y="${r1(my - S2.icon / 2)}" width="${S2.icon}" height="${S2.icon}" rx="${LOOK.box.iconRadius}"/>${glyph("env", s.x + S2.pad + S2.icon / 2, my, 0.78)}</g>`,
     `<text class="dg-sh" x="${r1(s.x + S2.titleX)}" y="${r1(my + LOOK.baseline.stripTitle)}">${esc(s.title)}</text>`
   ];
-  s.fields.forEach((field, i) => {
+  s.fields.forEach((field2, i) => {
     const prev = s.fields[i - 1];
-    if (prev && prev.y === field.y) {
-      const sx = field.x - S2.fieldGap / 2;
-      parts.push(`<line class="dg-sep" x1="${r1(sx)}" y1="${r1(field.y + S2.sepInset)}" x2="${r1(sx)}" y2="${r1(field.y + S2.h - S2.sepInset)}"/>`);
+    if (prev && prev.y === field2.y) {
+      const sx = field2.x - S2.fieldGap / 2;
+      parts.push(`<line class="dg-sep" x1="${r1(sx)}" y1="${r1(field2.y + S2.sepInset)}" x2="${r1(sx)}" y2="${r1(field2.y + S2.h - S2.sepInset)}"/>`);
     }
-    parts.push(`<text class="dg-fl" x="${r1(field.x)}" y="${r1(field.y + S2.nameY)}">${esc(field.name)}</text>`);
-    const list = changes.get(field.name) ?? [];
-    const values = list.filter((c) => c.value !== void 0);
-    const tags = list.filter((c) => c.tag !== void 0);
+    parts.push(`<text class="dg-fl" x="${r1(field2.x)}" y="${r1(field2.y + S2.nameY)}">${esc(field2.name)}</text>`);
+    const list2 = changes.get(field2.name) ?? [];
+    const values = list2.filter((c) => c.value !== void 0);
+    const tags = list2.filter((c) => c.tag !== void 0);
     values.forEach((c, k) => {
       const next = values[k + 1]?.at;
-      const value = c.value;
+      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(value) ? "dg-fvj" : "dg-fv"}" x="${r1(field.x)}" y="${r1(field.y + S2.valueY)}">${esc(value)}</text></g>`);
+      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>`);
     });
     tags.forEach((c, k) => {
       const next = tags[k + 1]?.at;
       const tag = c.tag;
-      const shown = [...values].reverse().find((v) => v.at <= c.at + 1e-9)?.value;
-      const x = field.x + (shown ? textWidth(shown, hasWide(shown) ? TYPE.fieldValueJa : TYPE.fieldValue) + S2.tagGap : 0);
+      const shown2 = [...values].reverse().find((v) => v.at <= c.at + 1e-9)?.value;
+      const x = field2.x + (shown2 ? textWidth(shown2, hasWide(shown2) ? TYPE.fieldValueJa : TYPE.fieldValue) + S2.tagGap : 0);
       const w = textWidth(tag, TYPE.tag) + S2.tagPadX * 2;
-      const y = field.y + S2.valueY - S2.tagH / 2 - LOOK.baseline.tag;
+      const y = field2.y + S2.valueY - S2.tagH / 2 - LOOK.baseline.tag;
       parts.push(
         `<g class="dg-tg dg-popc dg-a" style="${cs(c.color)};${next === void 0 ? m.pop(c.at) : m.pop(c.at, next - MOTION.untilFade)}"><rect x="${r1(x)}" y="${r1(y)}" width="${r1(w)}" height="${S2.tagH}" rx="${S2.tagH / 2}"/><text x="${r1(x + w / 2)}" y="${r1(y + S2.tagH / 2 + LOOK.baseline.tag)}" text-anchor="middle">${esc(tag)}</text></g>`
       );
@@ -3737,7 +3952,7 @@ var Motion = class {
   }
   /** keyframes を 1 つ足し、その名前を付ける style の字を返す。 */
   kf(points) {
-    const name = `${this.prefix}-${this.count++}`;
+    const name2 = `${this.prefix}-${this.count++}`;
     const at = /* @__PURE__ */ new Map();
     for (const [t, props, ease] of [...points].sort((a, b) => a[0] - b[0])) {
       const p = this.pct(t);
@@ -3751,8 +3966,8 @@ var Motion = class {
       if (ease) d.push(`animation-timing-function:${ease}`);
       return `${p}%{${d.join(";")}}`;
     }).join("");
-    this.frames.push(`@keyframes ${name}{${body}}`);
-    return `animation-name:${name}`;
+    this.frames.push(`@keyframes ${name2}{${body}}`);
+    return `animation-name:${name2}`;
   }
   /** `a` で出て `b` から消える。`within` を立てると `b` までに消え終わる。 */
   vis(a, b = this.last, o = {}) {
@@ -3863,6 +4078,7 @@ var PART_CSS = [
   `.dg-tg text{${font(TYPE.tag)};fill:var(--on-c)}`,
   ".dg-vp-bg{fill:var(--bg)}",
   ".dg-vp-frame{fill:none;stroke:var(--hair)}",
+  ".dg-hd-bg{fill:var(--bg)}",
   ".dg-mm-bg{fill:var(--surf);stroke:var(--hair)}",
   `.dg-mm-t{${font(TYPE.miniTitle)};fill:var(--mute)}`,
   ".dg-mm-world{fill:var(--sunk);stroke:var(--hair)}",
@@ -3884,11 +4100,11 @@ function involved(diagram) {
     on.set(id, (on.get(id) ?? /* @__PURE__ */ new Set()).add(s));
   };
   diagram.steps.forEach((step, s) => {
-    for (const event of step.events) {
-      if (event.type === "edge") {
-        add(event.from, s);
-        add(event.to, s);
-      } else if (event.type === "action" || event.type === "swap") add(event.box, s);
+    for (const event2 of step.events) {
+      if (event2.type === "edge") {
+        add(event2.from, s);
+        add(event2.to, s);
+      } else if (event2.type === "action" || event2.type === "swap") add(event2.box, s);
     }
   });
   return new Map([...on].map(([id, steps]) => [id, [...steps].sort((a, b) => a - b)]));
@@ -3897,11 +4113,11 @@ function subChanges(diagram, timeline, actionsInBox) {
   const raw = [];
   let order = 0;
   for (const time of timeline.events) {
-    const event = diagram.steps[time.step]?.events[time.event];
-    if (event?.type === "swap") raw.push({ t: time.at, order: order++, box: event.box, set: event.text });
-    if (actionsInBox && event?.type === "action") {
-      raw.push({ t: time.at, order: order++, box: event.box, act: event.label });
-      raw.push({ t: timeline.steps[time.step].end, order: order++, box: event.box, act: null });
+    const event2 = diagram.steps[time.step]?.events[time.event];
+    if (event2?.type === "swap") raw.push({ t: time.at, order: order++, box: event2.box, set: event2.text });
+    if (actionsInBox && event2?.type === "action") {
+      raw.push({ t: time.at, order: order++, box: event2.box, act: event2.label });
+      raw.push({ t: timeline.steps[time.step].end, order: order++, box: event2.box, act: null });
     }
   }
   raw.sort((a, b) => a.t - b.t || a.order - b.order);
@@ -3909,8 +4125,8 @@ function subChanges(diagram, timeline, actionsInBox) {
   for (const box of diagram.boxes) {
     let base = [box.sub ?? "", "dg-ss"];
     let acting;
-    let shown = base.join("|");
-    const list = [];
+    let shown2 = base.join("|");
+    const list2 = [];
     for (const change of raw.filter((r) => r.box === box.id)) {
       if (change.set !== void 0) {
         base = [change.set, "dg-ss-ok"];
@@ -3918,12 +4134,12 @@ function subChanges(diagram, timeline, actionsInBox) {
       }
       if (change.act !== void 0) acting = change.act ?? void 0;
       const now = acting !== void 0 ? [acting, "dg-ss-act"] : base;
-      if (now.join("|") === shown) continue;
-      shown = now.join("|");
-      list.push([change.t, now[0], now[1]]);
+      if (now.join("|") === shown2) continue;
+      shown2 = now.join("|");
+      list2.push([change.t, now[0], now[1]]);
     }
-    const kept = list.filter((change, k) => {
-      const next = list[k + 1];
+    const kept = list2.filter((change, k) => {
+      const next = list2[k + 1];
       return next === void 0 || next[0] - change[0] >= MOTION.minShow;
     });
     out.set(box.id, kept);
@@ -3933,12 +4149,12 @@ function subChanges(diagram, timeline, actionsInBox) {
 function fieldChanges(diagram, timeline, layout) {
   const out = /* @__PURE__ */ new Map();
   for (const time of timeline.events) {
-    const event = diagram.steps[time.step]?.events[time.event];
-    if (event?.type !== "strip") continue;
+    const event2 = diagram.steps[time.step]?.events[time.event];
+    if (event2?.type !== "strip") continue;
     const color = layout.badges[time.step]?.color ?? "slate";
-    const list = out.get(event.field) ?? [];
-    list.push({ at: time.at, color, ...event.value !== void 0 ? { value: event.value } : {}, ...event.tag !== void 0 ? { tag: event.tag } : {} });
-    out.set(event.field, list);
+    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 } : {} });
+    out.set(event2.field, list2);
   }
   return out;
 }
@@ -3976,43 +4192,84 @@ function drawSvg(diagram, layout, timeline, palette, theme, follow) {
   const content = Object.values(L).map((parts) => parts.join("")).join("");
   const { near, far, nearY, farY } = LOOK.shadow;
   const shadow = `<filter id="dg-sh-${id}" x="-20%" y="-30%" width="140%" height="180%"><feDropShadow dx="0" dy="${nearY}" stdDeviation="${near}" style="flood-color:var(--sh);flood-opacity:var(--shA)"/><feDropShadow dx="0" dy="${farY}" stdDeviation="${far}" style="flood-color:var(--sh);flood-opacity:var(--shB)"/></filter>`;
-  const view = follow ? followView(layout, timeline, diagram, m, id, content, follow) : { body: `<rect class="dg-bg" width="${layout.width}" height="${layout.height}" rx="${LOOK.region.radius}"/>${content}`, w: layout.width, h: layout.height };
+  const heads = follow && layout.kind === "sequence" ? layout.boxes.map((box) => headCard(box, ctx, on.get(box.id) ?? [], subs.get(box.id) ?? [])).join("") : "";
+  const view = follow ? followView(layout, timeline, diagram, m, id, content, follow, heads) : { body: `<rect class="dg-bg" width="${layout.width}" height="${layout.height}" rx="${LOOK.region.radius}"/>${content}`, w: layout.width, h: layout.height };
   const css = `.dg-${id}{${FONT_VARS};--T:${timeline.total}s;${paletteVars(palette, theme)}}${PART_CSS}${m.frames.join("")}`;
   return `<svg xmlns="http://www.w3.org/2000/svg" class="dg dg-${id}" viewBox="0 0 ${Math.ceil(view.w)} ${Math.ceil(view.h)}" width="${Math.ceil(view.w)}" height="${Math.ceil(view.h)}" role="img" aria-label="${esc(diagram.title)}" data-dragon="figure" data-view="${follow ? "follow" : "fixed"}"><style>${css}</style><defs>${shadow}</defs>${view.body}</svg>`;
 }
+function union(rects) {
+  const x = Math.min(...rects.map((r) => r.x));
+  const y = Math.min(...rects.map((r) => r.y));
+  return { x, y, w: Math.max(...rects.map((r) => r.x + r.w)) - x, h: Math.max(...rects.map((r) => r.y + r.h)) - y };
+}
 function focusOf(layout, diagram, step) {
+  const rects = focusParts(layout, diagram, step);
+  return rects.length === 0 ? void 0 : union(rects);
+}
+function badgeFocus(badge2, parts, vw, vh) {
+  const room = LOOK.badge.r + LOOK.follow.badgeRoom;
+  const { x: bx, y: by } = badge2;
+  const away = (p) => Math.hypot(Math.max(0, p.x - bx, bx - p.x - p.w), Math.max(0, p.y - by, by - p.y - p.h));
+  let held = { x: bx - room, y: by - room, w: room * 2, h: room * 2 };
+  for (const p of [...parts].sort((a, b) => away(a) - away(b))) {
+    const next = union([held, p]);
+    if (next.w <= vw && next.h <= vh) held = next;
+  }
+  return held;
+}
+function focusParts(layout, diagram, step) {
   const rects = [];
-  for (const e of layout.edges.filter((x2) => x2.step === step)) {
+  for (const e of layout.edges.filter((x) => x.step === step)) {
     const xs = e.points.map((p) => p[0]);
     const ys = e.points.map((p) => p[1]);
     rects.push({ x: Math.min(...xs), y: Math.min(...ys), w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) });
   }
   rects.push(...layout.labels.filter((l) => l.step === step), ...layout.actions.filter((a) => a.step === step));
-  for (const event of diagram.steps[step]?.events ?? []) {
-    const ids = event.type === "edge" ? [event.from, event.to] : event.type === "action" || event.type === "swap" ? [event.box] : [];
+  for (const event2 of diagram.steps[step]?.events ?? []) {
+    const ids = event2.type === "edge" ? [event2.from, event2.to] : event2.type === "action" || event2.type === "swap" ? [event2.box] : [];
     for (const id of ids) {
       const box = layout.boxes.find((b) => b.id === id);
-      if (box && (layout.kind === "architecture" || event.type === "swap")) rects.push(box);
+      if (box && (layout.kind === "architecture" || event2.type === "swap")) rects.push(box);
     }
   }
-  if (rects.length === 0) return void 0;
-  const x = Math.min(...rects.map((r) => r.x));
-  const y = Math.min(...rects.map((r) => r.y));
-  return { x, y, w: Math.max(...rects.map((r) => r.x + r.w)) - x, h: Math.max(...rects.map((r) => r.y + r.h)) - y };
+  return rects;
 }
-function followView(layout, timeline, diagram, m, id, content, follow) {
+function followView(layout, timeline, diagram, m, id, content, follow, heads) {
   const F = LOOK.follow;
   const M = LOOK.mini;
-  const vw = Math.min(layout.width, Math.max(1, follow.width));
-  const vh = Math.min(layout.height, Math.max(F.minH, vw * F.aspect));
+  const frameWidth = Math.max(1, follow.width);
+  const full = Math.min(layout.width, frameWidth);
+  const title = FIGURE_TEXT[follow.lang].overview;
+  const sized = (vh2) => {
+    const mw2 = Math.min(M.w, full * 0.4, vh2 * 0.4 / layout.height * layout.width);
+    const k2 = mw2 / layout.width;
+    const mh2 = layout.height * k2;
+    const bw2 = Math.max(mw2, Math.ceil(textWidth(title, TYPE.miniTitle)));
+    return { vh: vh2, mw: mw2, k: k2, mh: mh2, bw: bw2, bgW: bw2 + M.pad * 2, bgH: mh2 + M.pad * 2 + M.title, beside: mh2 > mw2 };
+  };
+  const natural = sized(Math.min(layout.height, Math.max(F.minH, full * F.aspect)));
+  const bare = natural.beside && frameWidth < F.narrow;
+  const room = follow.height === void 0 ? Number.POSITIVE_INFINITY : natural.beside ? follow.height : follow.height - natural.bgH - M.inset;
+  const { vh, mw, k, mh, bw, bgW, bgH, beside } = room < natural.vh ? sized(Math.max(F.fitMinH, room)) : { ...natural, vh: Number.isFinite(room) ? Math.min(layout.height, room) : natural.vh };
+  const vw = beside && !bare ? Math.min(layout.width, frameWidth - bgW - M.inset) : full;
   const clampX = (x) => Math.min(layout.width - vw / 2, Math.max(vw / 2, x));
-  const clampY = (y) => Math.min(layout.height - vh / 2, Math.max(vh / 2, y));
+  const top = heads === "" ? 0 : Math.max(...layout.boxes.map((b) => b.y + b.h)) + F.headRoom;
+  const strip2 = heads === "" ? 0 : F.head.pad * 2 + F.head.h;
+  const below = vh - strip2;
+  const clampY = (y) => Math.min(layout.height - below / 2, Math.max(top + below / 2, y));
+  const r = LOOK.badge.r;
   let prev = [layout.width / 2, layout.height / 2];
-  const centers = timeline.steps.map((_, s) => {
+  const middles = timeline.steps.map((_, s) => {
     const f = focusOf(layout, diagram, s);
     prev = f ? [f.x + f.w / 2, f.y + f.h / 2] : prev;
+    const at = [clampX(prev[0]), clampY(prev[1])];
+    const b = layout.badges.find((x) => x.step === s);
+    if (!b || Math.abs(b.x - at[0]) <= vw / 2 - r && Math.abs(b.y - at[1]) <= below / 2 - r) return at;
+    const near = badgeFocus(b, focusParts(layout, diagram, s), vw, below);
+    prev = [near.x + near.w / 2, near.y + near.h / 2];
     return [clampX(prev[0]), clampY(prev[1])];
   });
+  const centers = middles.map(([x, y]) => [x, y - strip2 / 2]);
   const c0 = centers[0];
   const cam = [
     [0, c0[0], c0[1]],
@@ -4027,22 +4284,26 @@ function followView(layout, timeline, diagram, m, id, content, follow) {
   const cl = centers[centers.length - 1];
   cam.push([timeline.last, cl[0], cl[1], 1, EASE.inOut], [timeline.total, c0[0], c0[1]]);
   const camKf = m.move(cam.map(([t, cx, cy, s, e]) => [t, vw / 2 - cx, vh / 2 - cy, s, e]));
-  const mw = Math.min(M.w, vw * 0.4, vh * 0.4 / layout.height * layout.width);
-  const k = mw / layout.width;
-  const mh = layout.height * k;
-  const title = FIGURE_TEXT[follow.lang].overview;
-  const bw = Math.max(mw, Math.ceil(textWidth(title, TYPE.miniTitle)));
-  const bx = vw - bw - M.inset - M.pad;
+  const bgX = beside ? vw + M.inset : vw - bgW - M.inset;
+  const bgY = beside ? 0 : vh + M.inset;
+  const bx = bgX + M.pad;
   const mx = bx + (bw - mw) / 2;
-  const my = M.inset + M.pad + M.title;
-  const shapes = [
-    ...layout.regions.map((r) => `<rect class="dg-mm-band" style="${cs(r.color)}" x="${mx + r.x * k}" y="${my + r.y * k}" width="${r.w * k}" height="${r.h * k}" rx="3"/>`),
-    ...layout.boxes.map((b) => `<rect class="dg-mm-card" style="${cs(b.color)}" x="${mx + b.x * k}" y="${my + b.y * k}" width="${b.w * k}" height="${b.h * k}" rx="1.5"/>`)
-  ].join("");
-  const vp = m.move(cam.map(([t, cx, cy, , e]) => [t, mx + (cx - vw / 2) * k, my + (cy - vh / 2) * k, 1, e]));
-  const mini = `<rect class="dg-mm-bg" x="${bx - M.pad}" y="${my - M.pad - M.title}" width="${bw + M.pad * 2}" height="${mh + M.pad * 2 + M.title}" rx="${M.radius}"/><text class="dg-mm-t" x="${bx}" y="${my - M.pad + 2}">${title}</text><g clip-path="url(#dg-mm-${id})"><rect class="dg-mm-world" x="${mx}" y="${my}" width="${mw}" height="${mh}"/>${shapes}<rect class="dg-mm-vp dg-a" width="${vw * k}" height="${vh * k}" rx="2" style="${vp}"/></g>`;
-  const body = `<defs><clipPath id="dg-vp-${id}"><rect width="${vw}" height="${vh}" rx="${LOOK.region.radius}"/></clipPath><clipPath id="dg-mm-${id}"><rect x="${mx}" y="${my}" width="${mw}" height="${mh}" rx="4"/></clipPath></defs><g clip-path="url(#dg-vp-${id})"><rect class="dg-vp-bg" width="${vw}" height="${vh}"/><g class="dg-a" style="${camKf}">${content}</g></g><rect class="dg-vp-frame" x="0.5" y="0.5" width="${vw - 1}" height="${vh - 1}" rx="${LOOK.region.radius}"/>${mini}`;
-  return { body, w: vw, h: vh };
+  const my = bgY + M.pad + M.title;
+  const overview = () => {
+    const shapes = [
+      ...layout.regions.map((r3) => `<rect class="dg-mm-band" style="${cs(r3.color)}" x="${mx + r3.x * k}" y="${my + r3.y * k}" width="${r3.w * k}" height="${r3.h * k}" rx="3"/>`),
+      ...layout.boxes.map((b) => `<rect class="dg-mm-card" style="${cs(b.color)}" x="${mx + b.x * k}" y="${my + b.y * k}" width="${b.w * k}" height="${b.h * k}" rx="1.5"/>`)
+    ].join("");
+    const vp = m.move(cam.map(([t, cx, cy, , e]) => [t, mx + (cx - vw / 2) * k, my + (cy - vh / 2) * k, 1, e]));
+    return {
+      clip: `<clipPath id="dg-mm-${id}"><rect x="${mx}" y="${my}" width="${mw}" height="${mh}" rx="4"/></clipPath>`,
+      body: `<rect class="dg-mm-bg" x="${bgX}" y="${bgY}" width="${bgW}" height="${bgH}" rx="${M.radius}"/><text class="dg-mm-t" x="${bx}" y="${my - M.pad + 2}">${title}</text><g clip-path="url(#dg-mm-${id})"><rect class="dg-mm-world" x="${mx}" y="${my}" width="${mw}" height="${mh}"/>${shapes}<rect class="dg-mm-vp dg-a"${strip2 === 0 ? "" : ` y="${strip2 * k}"`} width="${vw * k}" height="${(vh - strip2) * k}" rx="2" style="${vp}"/></g>`
+    };
+  };
+  const mini = bare ? { clip: "", body: "" } : overview();
+  const head = strip2 === 0 ? "" : `<g class="dg-hd"><rect class="dg-hd-bg" width="${vw}" height="${strip2}"/><line class="dg-sep" x1="0" y1="${strip2}" x2="${vw}" y2="${strip2}"/><g class="dg-a" style="${m.move(cam.map(([t, cx, , s, e]) => [t, vw / 2 - cx, 0, s, e]))}">${heads}</g></g>`;
+  const body = `<defs><clipPath id="dg-vp-${id}"><rect width="${vw}" height="${vh}" rx="${LOOK.region.radius}"/></clipPath>${mini.clip}</defs><g clip-path="url(#dg-vp-${id})"><rect class="dg-vp-bg" width="${vw}" height="${vh}"/><g class="dg-a" style="${camKf}">${content}</g>${head}</g><rect class="dg-vp-frame" x="0.5" y="0.5" width="${vw - 1}" height="${vh - 1}" rx="${LOOK.region.radius}"/>${mini.body}`;
+  return { body, w: beside && !bare ? vw + M.inset + bgW : full, h: beside ? vh : bgY + bgH };
 }
 function renderDiagram(input, options = {}) {
   const lang = options.lang ?? "ja";
@@ -4066,8 +4327,10 @@ function renderDiagram(input, options = {}) {
 }
 
 // src/view.ts
-function chooseView(rendered, frameWidth) {
-  const textPx = Math.max(0, frameWidth) / rendered.layout.width * TYPE.boxName.size;
+function chooseView(rendered, frameWidth, frameHeight) {
+  const byWidth = Math.max(0, frameWidth) / rendered.layout.width;
+  const scale = frameHeight === void 0 ? byWidth : Math.min(byWidth, Math.max(0, frameHeight) / rendered.layout.height);
+  const textPx = scale * TYPE.boxName.size;
   if (rendered.view) return { mode: rendered.view, textPx };
   return { mode: textPx >= READABLE_PX ? "fixed" : "follow", textPx };
 }
@@ -4081,15 +4344,29 @@ function playerCss() {
   return [
     `.dg-player{display:flex;flex-direction:column;gap:${px(P.gap)};color:var(--ink)}`,
     `.dg-player .dg-frame{border-radius:${px(P.radius)};overflow:hidden}`,
-    `.dg-bar{display:flex;align-items:flex-start;gap:${px(P.gap)}}`,
+    // 並べ方は帯の中身の幅で選ぶ。帯の中の 1 段 (`.dg-row`) が並べ替わり、帯の左右の余白は置いた頁が帯に付ける
+    `.dg-bar{container:dg-bar/inline-size}`,
+    `.dg-row{display:flex;align-items:flex-start;gap:${px(P.gap)}}`,
     `.dg-btns{display:flex;gap:${px(P.gap / 2)};flex:none}`,
     `.dg-btn{width:${px(P.button)};height:${px(P.button)};border-radius:${px(P.radius)};border:${px(LOOK.stroke.hair)} solid var(--hair);background:var(--surf);color:var(--ink);${font2(TYPE.button)};cursor:pointer}`,
     `.dg-btn:focus-visible{outline:${px(P.focus)} solid var(--c-blue);outline-offset:${px(P.focus)}}`,
     `.dg-say{display:flex;gap:${px(P.gap)};min-width:0}`,
     `.dg-no{${font2(TYPE.stepNo)};color:var(--mute);padding-top:${px(P.focus)}}`,
+    `.dg-txt{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}`,
+    `.dg-txt>*{grid-area:1/1}`,
+    `.dg-room{visibility:hidden}`,
     `.dg-tt{${font2(TYPE.stepTitle)};margin:0}`,
     `.dg-tb{${font2(TYPE.stepBody)};color:var(--ink2);margin:0;white-space:pre-line}`,
-    `.dg-sr{position:absolute;width:${hidden};height:${hidden};margin:-${hidden};padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}`
+    `.dg-sr{position:absolute;width:${hidden};height:${hidden};margin:-${hidden};padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}`,
+    // 狭い帯 (携帯の幅) では、段を送る釦を指で押せる大きさにし、その横に番号を置き、
+    // 題を 2 段目、本文を 3 段目に置いてどちらも帯の全幅を使う (#3057、#3069)。
+    // 釦を大きくすると横に題を置く幅が足りず題が細かく折れるため、題は釦の段に置かない。
+    // 題と本文を包む箱を外して写しも同じ升に重ねるので、2 段目は最も高い題、3 段目は最も長い本文の高さになる。
+    // 題と本文の間は広い帯と同じく空けず、釦の段の下にだけ間を取って、帯が高くなる分を抑える
+    `@container dg-bar (width < ${px(P.narrow)}){.dg-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:0 ${px(P.gap)}}.dg-say,.dg-txt,.dg-txt>*{display:contents}.dg-btns{grid-area:1/1;margin-bottom:${px(P.gap / 2)}}.dg-btn{width:${px(P.touch)};height:${px(P.touch)}}.dg-no{grid-area:1/2;display:flex;align-items:center;min-height:${px(P.touch)};padding-top:0}.dg-tt{grid-area:2/1/3/3}.dg-tb{grid-area:3/1/4/3}}`,
+    // 指で触る時は、広い帯でも段を送る釦を指で押せる大きさにする (#3076)。並びは横 1 列のまま変えない。
+    // 広い帯は本文が 2 行あれば帯の高さが変わらず、本文の無い帯だけが釦の分だけ高くなる
+    `@media (pointer: coarse){.dg-btn{width:${px(P.touch)};height:${px(P.touch)}}}`
   ].join("");
 }
 function ensureCss(doc) {
@@ -4120,11 +4397,11 @@ function mountDiagram(host, diagram, options = {}) {
   root.setAttribute("style", `${FONT_VARS};${paletteVars(palette, rendered.theme)}`);
   const frame = doc.createElement("div");
   frame.className = "dg-frame";
-  const button = (name, label2, text3) => {
+  const button = (name2, label2, text3) => {
     const b = doc.createElement("button");
     b.type = "button";
     b.className = "dg-btn";
-    b.dataset.dragon = name;
+    b.dataset.dragon = name2;
     b.setAttribute("aria-label", label2);
     b.textContent = text3;
     return b;
@@ -4143,21 +4420,41 @@ function mountDiagram(host, diagram, options = {}) {
   no.className = "dg-no";
   no.dataset.dragon = "step-no";
   const text2 = doc.createElement("div");
+  text2.className = "dg-txt";
   const title = doc.createElement("p");
   title.className = "dg-tt";
   title.dataset.dragon = "step-title";
   const body = doc.createElement("p");
   body.className = "dg-tb";
   body.dataset.dragon = "step-body";
-  text2.append(title, body);
+  const live = doc.createElement("div");
+  live.append(title, body);
+  text2.append(live);
+  for (const step2 of steps) {
+    const room = doc.createElement("div");
+    room.className = "dg-room";
+    room.dataset.dragon = "caption-room";
+    const roomTitle = doc.createElement("p");
+    roomTitle.className = "dg-tt";
+    roomTitle.textContent = step2.title;
+    const roomBody = doc.createElement("p");
+    roomBody.className = "dg-tb";
+    roomBody.textContent = step2.body;
+    room.append(roomTitle, roomBody);
+    text2.append(room);
+  }
   say.append(no, text2);
+  for (const shown2 of [no, title, body]) shown2.setAttribute("aria-hidden", "true");
+  const row = doc.createElement("div");
+  row.className = "dg-row";
+  row.append(buttons, say);
   const bar = doc.createElement("div");
   bar.className = "dg-bar";
-  bar.append(buttons, say);
-  const list = doc.createElement("ol");
-  list.className = "dg-sr";
-  list.dataset.dragon = "steps";
-  list.setAttribute("aria-label", words.steps(rendered.diagram.title));
+  bar.append(row);
+  const list2 = doc.createElement("ol");
+  list2.className = "dg-sr";
+  list2.dataset.dragon = "steps";
+  list2.setAttribute("aria-label", words.steps(rendered.diagram.title));
   for (const step2 of steps) {
     const item = doc.createElement("li");
     const head = doc.createElement("strong");
@@ -4168,13 +4465,20 @@ function mountDiagram(host, diagram, options = {}) {
       p.textContent = line;
       item.append(p);
     }
-    list.append(item);
+    list2.append(item);
   }
-  root.append(frame, bar, list);
+  root.append(frame, bar, list2);
   host.append(root);
   const frameWidth = () => frame.clientWidth || host.clientWidth || rendered.layout.width;
-  let mode = chooseView(rendered, frameWidth()).mode;
+  const frameHeight = () => {
+    if (!options.fitHeight || !win) return void 0;
+    const style = win.getComputedStyle(frame);
+    const inner = frame.clientHeight - (Number.parseFloat(style.paddingTop) || 0) - (Number.parseFloat(style.paddingBottom) || 0);
+    return inner > 0 ? inner : void 0;
+  };
+  let mode = chooseView(rendered, frameWidth(), frameHeight()).mode;
   let width = frameWidth();
+  let height = frameHeight();
   let svg = null;
   let step = 0;
   let playing = !reduce;
@@ -4201,7 +4505,7 @@ function mountDiagram(host, diagram, options = {}) {
     svg = next;
     born = Date.now();
   };
-  const markup = () => mode === "follow" ? drawSvg(rendered.diagram, rendered.layout, timeline, palette, rendered.theme, { width, lang }) : rendered.svg;
+  const markup = () => mode === "follow" ? drawSvg(rendered.diagram, rendered.layout, timeline, palette, rendered.theme, { width, ...height === void 0 ? {} : { height }, lang }) : rendered.svg;
   const now = () => playing ? (at + (Date.now() - born) / 1e3) % timeline.total : at;
   const stepAt = (t) => {
     let found = 0;
@@ -4217,6 +4521,7 @@ function mountDiagram(host, diagram, options = {}) {
     body.textContent = current?.body ?? "";
     toggleButton.setAttribute("aria-label", playing ? words.pause : words.play);
     toggleButton.textContent = playing ? BUTTON_TEXT.pause : BUTTON_TEXT.play;
+    options.onStep?.(step);
   };
   const restart = (t, play) => {
     at = t;
@@ -4242,8 +4547,8 @@ function mountDiagram(host, diagram, options = {}) {
   const onPrev = () => go(step - 1);
   const onNext = () => go(step + 1);
   const onToggle = () => playing ? restart(now(), false) : restart(at, true);
-  const onFigure = (event) => {
-    const target = event.target?.closest?.("[data-step]");
+  const onFigure = (event2) => {
+    const target = event2.target?.closest?.("[data-step]");
     const s = target ? Number(target.getAttribute("data-step")) : Number.NaN;
     if (Number.isInteger(s)) go(s);
   };
@@ -4254,11 +4559,13 @@ function mountDiagram(host, diagram, options = {}) {
   const Observer = win?.ResizeObserver;
   const observer = Observer ? new Observer(() => {
     const w = frameWidth();
-    const chosen = chooseView(rendered, w).mode;
-    if (chosen === mode && (mode === "fixed" || w === width)) return;
+    const h = frameHeight();
+    const chosen = chooseView(rendered, w, h).mode;
+    if (chosen === mode && (mode === "fixed" || w === width && h === height)) return;
     const t = now();
     mode = chosen;
     width = w;
+    height = h;
     at = t;
     place(markup());
   }) : void 0;
@@ -4290,6 +4597,6 @@ function mountDiagram(host, diagram, options = {}) {
   };
 }
 
-export { DEFAULT_PALETTE, FONTS, FORMAT_VERSION, PALETTES, chooseView, extractDiagrams, migrateFile, mountDiagram, notationLanguage, parseNotation, printNotation, readDiagram, renderDiagram, resolvePalette, validateDiagram };
+export { DEFAULT_PALETTE, FONTS, FORMAT_VERSION, PALETTES, READABLE_PX, chooseView, extractDiagrams, migrateFile, mountDiagram, parseNotation, printNotation, readDiagram, renderDiagram, resolvePalette, validateDiagram };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map