egatari 0.0.0-stage → 0.6.4

package/vendor/components/sha256/e4c3831784c03c174fc2edf507a2a3d22d1f234863817afc2020099b9ec6a5e3/README.md

@@ -0,0 +1,24 @@
+---
+name: m-seq
+series: academic
+summary: 観測を 1 つずつ加え、分布と数値が更新されていく様子を見せる（前の分布は薄く残す）
+steps: ceil((steps の数 − 1) / per-step)
+purposes: spread
+props: per-step, slot, xr, yr, xt, yt, xf, yf, xl, yl, digits, panel, ghosts
+---
+
+回答や観測を 1 個ずつ加えて、事後分布と推定値が絞られていく過程を見せるときに使う
+（motion-slides スキル §6「逐次更新」）。
+
+子の JSON：`{"xs": [...], "steps": [{"dens": [...], "readout": {"名前": 値}, "mark": x}, ...], "digits": {"名前": 桁}, "markLabel": "*y*_n"}`。
+`xl` `yl` `yr` などの軸の設定は JSON にも書ける（属性があれば属性を優先）。
+
+- `steps[0]` が始めの状態（段階 0）、`steps[1..]` が 1 回ずつの更新
+- `per-step` 回の更新を 1 段階の中で順に動かす。1 回の長さは `slot` 秒、`cues(k)` は各更新の開始時刻を返すので、
+  口述原稿の `{cue}` を更新の数だけ置けば、音声に合わせて 1 回ずつ動く
+- 数値は前後の値の間を補間し、`digits` の桁でそろえて表示する（等幅の数字）
+
+見本は `demo.html`（分散既知の正規モデルで平均の事後分布を更新）。
+<!-- llm: omit -->
+授業の表示（`ctx.preview`）：最後の段階の密度の曲線と、先の観測の点を薄く見せる。途中の曲線と読み取りの値は見せない（全部の曲線を重ねると図が読めない）
+<!-- llm: end -->

package/vendor/components/sha256/e4c3831784c03c174fc2edf507a2a3d22d1f234863817afc2020099b9ec6a5e3/demo.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="ja" data-theme="default">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>m-seq の見本</title>
+<!-- 組み方：node kit/build.mjs components/seq/demo.html -o components/seq/out/demo.html -->
+<style>
+</style>
+</head>
+<body>
+<script>
+// 見本の数値：分散 1 が既知の正規モデルで、平均 θ の事後分布 N(μ_n, σ_n^2) を観測 1 個ずつ更新する（事前 N(0, 1.5^2)）
+document.addEventListener("DOMContentLoaded", function(){
+  var ys = [1.8, 0.9, 1.4, 2.1, 1.2, 1.6], m0 = 0, s0 = 1.5, xs = [];
+  for (var i = 0; i <= 280; i++) xs.push(+(-3 + 7 * i / 280).toFixed(4));
+  var pdf = function(m, s){ return xs.map(function(x){ return +(Math.exp(-0.5 * Math.pow((x - m) / s, 2)) / (s * Math.sqrt(2 * Math.PI))).toFixed(5); }); };
+  var steps = [], prec = 1 / (s0 * s0), num = m0 / (s0 * s0);
+  steps.push({dens: pdf(m0, s0), readout: {"*n*": 0, "*μ*_n": m0, "*σ*_n": s0}});
+  ys.forEach(function(y, n){
+    prec += 1; num += y;
+    var m = num / prec, s = 1 / Math.sqrt(prec);
+    steps.push({dens: pdf(m, s), readout: {"*n*": n + 1, "*μ*_n": m, "*σ*_n": s}, mark: y});
+  });
+  document.getElementById("seq-data").textContent = JSON.stringify({xs: xs, steps: steps, digits: {"*n*": 0}, markLabel: "*y*_n"});
+});
+</script>
+<div id="stage">
+
+<section class="slide">
+  <h2>逐次更新</h2>
+  <div class="body">
+    <m-seq per-step="2" xr="[-3,4]" yr="[0,1.25]" xt="[-2,0,2,4]" yt="[0,0.5,1]" yf="1" xl="平均 *θ*" yl="密度" style="height:420px">
+      <script type="application/json" id="seq-data">{}</script>
+    </m-seq>
+  </div>
+  <div class="concl"><span>→ 観測が増えるほど，事後分布は狭くなる</span></div>
+</section>
+
+</div>
+</body>
+</html>

package/vendor/components/sha256/e4c3831784c03c174fc2edf507a2a3d22d1f234863817afc2020099b9ec6a5e3/index.js

@@ -0,0 +1,116 @@
+// m-seq：観測を 1 つずつ加えて、分布（事後分布など）と数値が更新されていく様子を見せる
+// <m-seq per-step="2" style="height:400px"><script type="application/json">
+//   {"xs":[…], "steps":[{"dens":[…], "readout":{"n":0,"μ_n":0.00}}, {"dens":[…], "readout":{…}, "mark":1.2}, …],
+//    "xl":"*θ*", "yl":"密度", "yr":[0,2], "digits":{"n":0}, "markLabel":"*y*_n"}
+// （JSON の終わり）</m-seq>
+// steps[0] は始めの状態（段階 0）。steps[1..] が 1 回ずつの更新。1 段階に per-step 回の更新を、等しい時間枠で順に動かす。
+// 今の分布は濃く、前の分布は薄い線で残す。右の欄に readout の数値（桁をそろえる）。mark は今回の観測の位置
+DECK.define("m-seq", class extends DECK.MotionElement {
+  // データの形（kit/shape.js）。軸の設定（xl yl yr など）も JSON に書ける
+  static shape = {
+    schema: {type: "object", required: ["xs", "steps"], properties: {
+      xs: {type: "array", minItems: 2, items: {type: "number"}},
+      steps: {type: "array", minItems: 1, items: {type: "object", required: ["dens"], properties: {dens: {type: "array", items: {type: "number"}}, readout: {type: "object"}, mark: {type: "number"}}}},
+      digits: {type: "object"}, markLabel: {type: "string"}}},
+    example: {xs: [-2, -1, 0, 1, 2], steps: [{dens: [0.05, 0.24, 0.4, 0.24, 0.05], readout: {n: 0}}, {dens: [0.02, 0.2, 0.5, 0.2, 0.02], readout: {n: 1}, mark: 0.3}]},
+  };
+  static props = {
+    "per-step": {type: "number", default: 1, doc: "1 段階で動かす更新の回数"},
+    slot:  {type: "number", default: 0.9, doc: "更新 1 回の秒数（cues はこの間隔）"},
+    xr: {type: "json", default: null, doc: "横軸の範囲（既定は xs の端）"}, yr: {type: "json", default: [0, 1]},
+    xt: {type: "json", default: []}, yt: {type: "json", default: []},
+    xf: {type: "number", default: undefined}, yf: {type: "number", default: undefined},
+    xl: {type: "string", default: ""}, yl: {type: "string", default: ""},
+    digits: {type: "number", default: 2, doc: "数値の小数の桁数（data.digits で名前ごとに上書き）"},
+    panel:  {type: "number", default: 250, doc: "右の数値の欄の幅（px）"},
+    ghosts: {type: "number", default: 99, doc: "残す前の分布の数"},
+  };
+  // 属性があれば属性、なければ data の同名の値、なければ既定
+  opt(name){ var d = this.data || {}; return this.hasAttribute(name) || d[name] === undefined ? this.props[name] : d[name]; }
+  get updates(){ return Math.max(0, ((this.data || {}).steps || []).length - 1); }
+  get steps(){ return this.getAttribute("steps") !== null ? +this.getAttribute("steps") : Math.ceil(this.updates / this.props["per-step"]); }
+  mount(){
+    var D = DECK, self = this, data = this.data, xs = data.xs;
+    this.classList.add("plot"); this.style.display = "block";
+    var xr = this.opt("xr") || [xs[0], xs[xs.length - 1]], pw = this.opt("panel");
+    var p = this.p = D.Plot(this, {xr: xr, yr: this.opt("yr"), xt: this.opt("xt"), yt: this.opt("yt"), xf: this.opt("xf"), yf: this.opt("yf"),
+                                   xl: this.opt("xl"), yl: this.opt("yl"), m: {l: 86, r: pw + 16, t: 24, b: 64}});
+    this.pts = function(dens){ return xs.map(function(x, i){ return [x, dens[i]]; }); };
+    // 塗り（今の分布の下）→ 前の分布の薄い線 → 今の分布の線 の順に重ねる
+    this.area = D.el("path", {fill: "var(--term-tint)", stroke: "none", "clip-path": p.clip}, p.svg);
+    var gG = D.el("g", {"clip-path": p.clip}, p.svg);
+    this.ghostEls = data.steps.map(function(s){
+      var e = D.el("path", {fill: "none", stroke: "var(--line)", "stroke-width": 2.5, opacity: 0}, gG);
+      e.setAttribute("d", p.poly(self.pts(s.dens)));
+      return e;
+    });
+    this.cur = D.el("path", {fill: "none", stroke: "var(--term)", "stroke-width": 3.5, "stroke-linejoin": "round", "clip-path": p.clip}, p.svg);
+    // 観測の印：今回は縦の点線と名前、前の観測は横軸の上の小さな点
+    this.dots = data.steps.map(function(s){
+      return s.mark === undefined ? null : D.el("circle", {cx: p.x(s.mark), cy: p.H - p.m.b - 7, r: 6, fill: "var(--muted)", opacity: 0}, p.svg);
+    });
+    this.markLine = D.el("line", {x1: 0, x2: 0, y1: p.m.t + 34, y2: p.H - p.m.b, stroke: "var(--emph)", "stroke-width": 2.5, "stroke-dasharray": "7 6", opacity: 0}, p.svg);
+    this.markLab = D.mtext(p.svg, 0, p.m.t + 24, data.markLabel || "", {"text-anchor": "middle", fill: "var(--emph)", "font-size": 26, opacity: 0});
+    // 数値の欄（名前は左寄せ、値は右寄せ。等幅の数字）
+    var keys = Object.keys(data.steps[0].readout || {}), px = p.W - pw + 8, px2 = p.W - 8;
+    D.el("rect", {x: px - 8, y: p.m.t, width: pw, height: 40 + keys.length * 44, rx: 10, fill: "var(--term-tint)", stroke: "var(--line)", "stroke-width": 1.5}, p.svg);
+    this.rows = keys.map(function(key, j){
+      var y = p.m.t + 44 + j * 44;
+      D.mtext(p.svg, px + 12, y, key, {"font-size": 28});
+      var v = D.el("text", {x: px2 - 12, y: y, "text-anchor": "end", "font-size": 28, style: "font-variant-numeric:tabular-nums;font-feature-settings:'tnum'"}, p.svg);
+      return {key: key, el: v, dg: (data.digits || {})[key] !== undefined ? data.digits[key] : self.props.digits};
+    });
+  }
+  // 段階 k が受け持つ更新の番号 [first, last]
+  span(k){ var P = this.props["per-step"]; return [(k - 1) * P + 1, Math.min(k * P, this.updates)]; }
+  duration(k){ if (k < 1) return 0; var s = this.span(k); return Math.max(0, s[1] - s[0] + 1) * this.props.slot; }
+  cues(k){
+    if (k < 1) return null;
+    var s = this.span(k), out = [];
+    for (var j = 0; j <= s[1] - s[0]; j++) out.push(+(j * this.props.slot).toFixed(4));
+    return out;
+  }
+  render(k, t, ctx){
+    var D = DECK, S = this.data.steps, p = this.p, slot = this.props.slot;
+    var preview = !!(ctx && (ctx.preview || ctx.mode === "lecture")), PV = 1;
+    if (preview){ PV = parseFloat(getComputedStyle(this).getPropertyValue("--preview-opacity")); if (!(PV >= 0 && PV <= 1)) PV = 0.45; }
+
+    // 今の更新の番号 idx と、その更新の進み具合 e（0 なら一つ前の状態、1 なら更新後）
+    var idx = 0, e = 1, tm = 0;
+    if (k >= 1){
+      var s = this.span(k), n = s[1] - s[0] + 1;
+      if (t === Infinity){ idx = s[1]; tm = Infinity; }
+      else { var j = Math.max(0, Math.min(n - 1, Math.floor(t / slot))); idx = s[0] + j; tm = t - j * slot; }
+      e = D.prog(tm, 0, slot * 0.8);
+    }
+    var a = S[Math.max(0, idx - 1)], b = S[idx];
+    var dens = b.dens.map(function(v, i){ return D.lerp(a.dens[i], v, e); });
+    var d = p.poly(this.pts(dens));
+    this.cur.setAttribute("d", d);
+    this.area.setAttribute("d", d + "L" + p.x(this.data.xs[this.data.xs.length - 1]).toFixed(1) + "," + p.y(0).toFixed(1) + "L" + p.x(this.data.xs[0]).toFixed(1) + "," + p.y(0).toFixed(1) + "Z");
+    var G = this.props.ghosts, last = this.updates, end = this.span(k)[1];
+    // 先の段階を薄く見せる表示（授業の表示）：後の段階の終わりの分布を今の線の色で、後の観測の点とともに、
+    // テーマの --preview-opacity の濃さに（途中の分布は重ねない）
+    var ahead = function(i){ return preview && i > Math.max(idx, k >= 1 ? end : 0); };
+    this.ghostEls.forEach(function(g, i){
+      var f = ahead(i) && i === last;
+      var col = f ? "var(--term)" : "var(--line)";
+      // style は DECK.el と同じ書き方で書く（style.stroke に代入すると "stroke: var(--x);" になり、作った直後と字が変わる）
+      g.setAttribute("style", "stroke:" + col + ";");
+      g.setAttribute("opacity", f ? PV : i < idx && i >= idx - G ? 1 : 0);
+    });
+    this.dots.forEach(function(c, i){ if (c) c.setAttribute("opacity", ahead(i) ? PV : i < idx ? 1 : 0); });
+    var mo = b.mark !== undefined && idx > 0 ? D.prog(tm, 0, 0.25) : 0;
+    // 印のない段階では作った直後の位置（0）に戻す（前の段階の位置を残さない。docs/contract.md §3）
+    var mx = b.mark !== undefined ? p.x(b.mark) : 0;
+    this.markLine.setAttribute("x1", mx); this.markLine.setAttribute("x2", mx); this.markLab.setAttribute("x", mx);
+    this.markLine.setAttribute("opacity", mo.toFixed(3));
+    this.markLab.setAttribute("opacity", mo.toFixed(3));
+    this.rows.forEach(function(r){
+      var va = (a.readout || {})[r.key], vb = (b.readout || {})[r.key], v;
+      if (typeof va === "number" && typeof vb === "number") v = D.lerp(va, vb, e).toFixed(r.dg).replace("-", "−");
+      else v = String(e < 0.5 && va !== undefined ? va : vb);
+      r.el.textContent = v === "−0" || /^−0\.0*$/.test(v) ? v.slice(1) : v;
+    });
+  }
+});

package/vendor/components/sha256/e6fbdf9015a07418baed8905f2ce36f649b7172bc1603e74082643cdeb8b3922/CHANGELOG.md

@@ -0,0 +1,19 @@
+# m-gendai changelog
+
+The part's own versions (Egatari spec §6.1). Releases of the whole library are in the repository's CHANGELOG.md.
+
+## 2.0.0 (components 2.0.0-rc.1 and 2.0.0)
+
+- Moved to `egatariParts.define({name: "gendai", version: "2.0.0", requires: {base: "1.0.0"}, element: "m-gendai"})`,
+  extending `base.MotionElement` with `base.el` / `prog` / `previewOpacity`; `static partName = "gendai"`.
+  The DOM is byte-identical to 1.13.0 on its demo at every step (tools/test-c2-identity.mjs).
+- Writing errors in the text (a paragraph or anchor that does not exist, an unknown mark, an unclosed or nested mark) are
+  reported with `ctx.report("data", "[gendai] …")` from `mount` (1.13.0: `console.warn("m-gendai: …")`).
+- The reader for tests is `static testing = {parse}` on the class, read through the registry (1.13.0: `DECK.gendai`);
+  no part reads it.
+- The preview view is `ctx.preview` alone (1.13.0 also accepted `ctx.mode === "lecture"`).
+- Ids: none written.
+
+## 1.13.0
+
+As released in the library's 1.13.0.

package/vendor/components/sha256/e6fbdf9015a07418baed8905f2ce36f649b7172bc1603e74082643cdeb8b3922/README.md

@@ -0,0 +1,44 @@
+---
+name: m-gendai
+version: 2.0.0
+series: kokugo
+tier: specialized
+set: kokugo
+summary: 現代文の読解の図：傍線・二重傍線を引き、指示語から指す内容へ矢印、段落を役割（主張・具体例・対比）の枠で囲んで線でつなぐ
+steps: 中身のある phases の数（既定 marks refs roles）
+purposes: text-structure
+props: size, tate, phases, draw
+---
+
+現代文の文章の構造（筆者の主張と、それを支える具体例・対比）と、指示語の指す内容を見せるときに使う。段階 0 は本文だけ。
+
+## 書き方
+
+段落は空行で区切る。段落の頭の行で役割と名前、つながりを書く（なくてもよい）。
+
+```
+@具体例#p1>p3
+駅までの道を、私は{地図アプリ|#app}に頼って歩く。…{それ|>app}を閉じると、…
+
+@対比#p2~p1
+…
+
+@主張#p3
+便利な道具は、私たちから==迷う機会を奪う==。だが、{迷うことこそが…|_A}。
+```
+
+- `@役割#名前>名前`：役割（自由な言葉。主張・結論は `--emph`、対比・反論は `--accent2`、具体例は `--term`、ほかは `--muted`）、この段落の名前、矢印でつなぐ段落。`~名前` は対比（両向きの線）
+- `__語句__` 傍線、`==語句==` 二重傍線
+- `{語句|しるし,…}`：`_A` 傍線と記号 A、`=B` 二重傍線と記号 B（記号なしは `_` `=`）、`#名前` 指示語が指す先、`>名前` 指示語。しるしは入れ子にできない（`{語句|=,#q}` のように 1 つにまとめる）
+
+## 段階
+
+`phases`（既定 `marks refs roles`）の順に。中身のないものは段階にしない。
+
+- `marks`：傍線・二重傍線を順に引く（縦書きは字の右、横書きは字の下。行をまたぐときは行ごとに続けて）。記号（A など）は線の始まりのすぐ外に付く。縦書きは傍線と記号が入るように行の送りを広く取る（2.4）
+- `refs`：指示語を囲み、指す先に淡い色を敷いて、指示語から矢印（指す先の行のうち近いほうへ）
+- `roles`：段落を役割の色の枠で囲み、札を付け、最後につなぐ線。線は札から札へ、札と枠の外の通り道（縦書きは札の上、横書きは札の左）を通り、矢じりは相手の札の辺に当たる。間の段落を越える線ほど外の段を通し、段の数だけ場所を空ける（線は札にも枠にも重ならない）
+
+線と枠は字の位置を測って SVG で描く。描くたびに測るので、呼び出しの順によらない（字が読み込まれる前と後では位置が違うので、品質チェックと動画は字を待ってから撮る）。
+
+見本は `demo.html`（縦書きの 3 段落と、横書きの 2 段落）。本文は見本のために書いたもの。

package/vendor/components/sha256/e6fbdf9015a07418baed8905f2ce36f649b7172bc1603e74082643cdeb8b3922/demo.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="ja" data-theme="kokugo">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>m-gendai の見本</title>
+<!-- 組み方：node kit/build.mjs components/gendai/demo.html -o components/gendai/out/demo.html -->
+<!-- 本文は見本のために書いたもの -->
+</head>
+<body>
+<div id="stage">
+
+<section class="slide noconcl">
+  <h2>段落の役割と指示語（縦書き）</h2>
+  <div class="body">
+    <m-gendai tate style="height:540px">
+      @具体例#p1>p3
+      駅までの道を、私は{地図アプリ|#app}に頼って歩く。画面の矢印に従えば迷うことはない。だが、{それ|>app}を閉じると、さっき通った角さえ思い出せない。
+
+      @対比#p2~p1
+      かつての旅人は、{山の形や川の流れを目印にして|#mark}道を覚えた。{そう|>mark}して得た知識は、歩いた体に刻まれていた。
+
+      @主張#p3
+      便利な道具は、私たちから==迷う機会を奪う==。だが、{迷うことこそが、土地を自分のものにする営みなのである|_A}。
+    </m-gendai>
+  </div>
+</section>
+
+<section class="slide noconcl">
+  <h2>横書きの傍線</h2>
+  <div class="body">
+    <m-gendai style="height:400px">
+      @主張#q1
+      道具は、__使う人の考え方__までも形づくる。{これ|>q}は、{手で書くか打つかで文章が変わる|=,#q}ことからも分かる。
+
+      @具体例#q2>q1
+      手で書くと、書く前に考える。打つと、書きながら考える。
+    </m-gendai>
+  </div>
+</section>
+
+</div>
+</body>
+</html>

package/vendor/components/sha256/e6fbdf9015a07418baed8905f2ce36f649b7172bc1603e74082643cdeb8b3922/index.js

@@ -0,0 +1,334 @@
+// m-gendai：現代文の読解の図。傍線・二重傍線を引き、指示語から指す内容へ矢印を出し、段落を役割（主張・具体例・対比）の枠で囲んで線でつなぐ
+// <m-gendai tate style="height:440px">
+//   @具体例#p1>p3
+//   駅までの道を、私は{地図アプリ|#app}に頼って歩く。…{それ|>app}を閉じると、…
+//
+//   @主張#p3
+//   便利な道具は、私たちから=={迷う機会を奪う}==。…{迷うことこそが…営みなのである|_A}
+// </m-gendai>
+// 段落は空行で区切る。段落の頭の行「@役割#名前」で役割（主張・具体例・対比・反論・結論など、自由な言葉）と名前を付け、
+// 「>名前」（その段落を支える・つながる。矢印）か「~名前」（対比。両向きの線）で別の段落とつなぐ。
+// 本文の中：__語句__ 傍線、==語句== 二重傍線、{語句|しるし,…}（しるし：_A 傍線と記号 A、=B 二重傍線と記号 B、#名前 指す先、>名前 指示語）
+// 段階（phases の順。中身のないものは飛ばす。既定は marks refs roles）：marks 傍線 → refs 指示語の矢印 → roles 段落の枠と線
+// 線と枠は、字の位置を測って SVG で描く（部品の中の座標。描く度に測るので、呼び出しの順によらない）
+// 2.0（Egatari spec §6.1 の部品）：base の MotionElement・el・prog・previewOpacity を使い、プレイヤーのグローバルは使わない。
+// 書き方の誤りは ctx.report("data", "[gendai] …") で知らせる（1.x の console.warn("m-gendai: …") の代わり）。
+// 読み取り（parse）は試験のために static testing に出す（ほかのパーツは読まない）
+egatariParts.define({name: "gendai", version: "2.0.0", requires: {base: "1.0.0"}, element: "m-gendai"}, function(deps){
+"use strict";
+var base = deps.base;
+var D = base;
+
+// ---------------------------------------------------------------- 読み取り
+// parse(文字列) → {paras: [{role, id, to, rel, runs: [{t, line, label, id, ref}]}], warnings}
+function parse(src){
+  var paras = [], warnings = [], blocks = String(src || "").replace(/\r/g, "").split(/\n\s*\n/);
+  blocks.forEach(function(b){
+    var lines = b.split("\n").map(function(l){ return l.trim(); }).filter(Boolean);
+    if (!lines.length) return;
+    var p = {role: "", id: "", to: "", rel: "", runs: []};
+    var m = /^@([^#>~\s]*)(?:#([^>~\s]+))?(?:([>~])(\S+))?\s*$/.exec(lines[0]);
+    if (m){ p.role = m[1]; p.id = m[2] || ""; p.rel = m[3] || ""; p.to = m[4] || ""; lines.shift(); }
+    p.runs = inline(lines.join(""), warnings);
+    paras.push(p);
+  });
+  var ids = {};
+  paras.forEach(function(p){ if (p.id) ids[p.id] = true; });
+  paras.forEach(function(p){ if (p.to && !ids[p.to]) warnings.push("段落「" + p.to + "」がない（@" + p.role + "）"); });
+  var anchors = {};
+  paras.forEach(function(p){ p.runs.forEach(function(r){ if (r.id) anchors[r.id] = true; }); });
+  paras.forEach(function(p){ p.runs.forEach(function(r){ if (r.ref && !anchors[r.ref]) warnings.push("指す先「#" + r.ref + "」がない（" + r.t + "）"); }); });
+  return {paras: paras, warnings: warnings};
+}
+// 本文の中のしるし → 字の並び（runs）。run = {t, line: 0 | 1 | 2（傍線・二重傍線）, label, id, ref}
+function inline(s, warnings){
+  var runs = [], re = /__(.+?)__|==(.+?)==|\{([^{}|]+)\|([^{}]*)\}/g, last = 0, m;
+  var plain = function(t){ if (t) runs.push({t: t, line: 0, label: "", id: "", ref: ""}); };
+  while ((m = re.exec(s))){
+    plain(s.slice(last, m.index)); last = re.lastIndex;
+    if (m[1] !== undefined){ runs.push({t: m[1], line: 1, label: "", id: "", ref: ""}); continue; }
+    if (m[2] !== undefined){ runs.push({t: m[2], line: 2, label: "", id: "", ref: ""}); continue; }
+    var r = {t: m[3], line: 0, label: "", id: "", ref: ""};
+    m[4].split(/[,，、]/).map(function(f){ return f.trim(); }).filter(Boolean).forEach(function(f){
+      if (f[0] === "_"){ r.line = 1; r.label = f.slice(1); }
+      else if (f[0] === "="){ r.line = 2; r.label = f.slice(1); }
+      else if (f[0] === "#") r.id = f.slice(1);
+      else if (f[0] === ">") r.ref = f.slice(1);
+      else warnings.push("知らないしるし「" + f + "」（" + m[3] + "）");
+    });
+    runs.push(r);
+  }
+  plain(s.slice(last));
+  // 残った { } __ ==：閉じていないか、入れ子にしたしるし（しるしは入れ子にできない。{語句|=,#名前} のように 1 つにまとめる）
+  runs.forEach(function(r){ if (/[{}]|__|==/.test(r.t)) warnings.push("しるしの書き方が違う（閉じていない・入れ子）：" + r.t); });
+  return runs;
+}
+
+// ---------------------------------------------------------------- 部品
+var ROLE_COLOR = function(role){ return /主張|結論|筆者/.test(role) ? "var(--emph)" : /対比|反論|対立/.test(role) ? "var(--accent2)" : /具体|例/.test(role) ? "var(--term)" : "var(--muted)"; };
+var PH = ["marks", "refs", "roles"];
+// 枠をつなぐ線は札（枠の上の名前）から札へ、札と枠の外の通り道（縦書きは札の上、横書きは札の左）を通す。
+// 通り道は線ごとに段（level）を分け、間の段落を越える線ほど外の段を通る。段の数だけ場所を空ける（線が札や枠に重ならないように）
+var CHIP = 34;              // 札の高さ
+var STUB = 22, STEP = 16;   // 札から 1 段目までの距離、段の間
+var LH_TATE = 2.4;          // 縦書きの行の送り（傍線と記号 A の入る列の間を空ける）
+return class extends base.MotionElement {
+  static partName = "gendai";   // the registry name (define meta name), for report prefixes
+  static testing = {parse: parse};   // for tools/test-kokugo.mjs only (no part reads it)
+  // データの形（kit/shape.js）：JSON ではなく、要素の中に本文の字（段落は空行で区切る）
+  static shape = {text: true, example: "@主張#p1\n便利な道具は、私たちから==迷う機会を奪う==。"};
+  static props = {
+    size:   {type: "number", default: 28, doc: "本文の字の大きさ（px）"},
+    tate:   {type: "bool", default: false, doc: "縦書きにする（段落は右から左へ、枠をつなぐ線は上を通す）"},
+    phases: {type: "string", default: "marks refs roles", doc: "段階の並び（marks 傍線・refs 指示語・roles 段落の枠から選ぶ。中身のないものは飛ばす）"},
+    draw:   {type: "number", default: 0.7, doc: "線 1 本を引く秒数"},
+  };
+  get model(){ if (!this._m) this._m = parse(this._src !== undefined ? this._src : this.textContent); return this._m; }
+  get phaseList(){
+    var m = this.model, has = {
+      marks: m.paras.some(function(p){ return p.runs.some(function(r){ return r.line; }); }),
+      refs: m.paras.some(function(p){ return p.runs.some(function(r){ return r.ref; }); }),
+      roles: m.paras.some(function(p){ return p.role; })};
+    return String(this.props.phases || "").split(/[\s,]+/).filter(function(x){ return PH.indexOf(x) >= 0 && has[x]; });
+  }
+  get steps(){ return this.getAttribute("steps") !== null ? +this.getAttribute("steps") : this.phaseList.length; }
+  phaseStep(name){ return this.phaseList.indexOf(name) + 1; }
+  mount(ctx){
+    var self = this, P = this.props, tate = P.tate;
+    this._src = this.textContent;
+    var m = this.model;
+    m.warnings.forEach(function(w){ ctx.report("data", "[gendai] " + w); });
+    this.textContent = "";
+    this.classList.add("plot");
+    this.style.display = "block"; this.style.position = "relative";
+    this.style.fontFamily = "var(--font-mincho)";
+    var W =this.clientWidth || 1184, H = this.clientHeight || 440;
+    var roles = m.paras.some(function(p){ return p.role; });
+    // つなぐ線の段：つなぐ段落の間の短いものから順に、重なる線より 1 つ外の段へ
+    var pIdx = {};
+    m.paras.forEach(function(p, i){ if (p.id) pIdx[p.id] = i; });
+    var spans = m.paras.map(function(p, i){ return p.to && pIdx[p.to] !== undefined ? {i: i, lo: Math.min(i, pIdx[p.to]), hi: Math.max(i, pIdx[p.to])} : null; }).filter(Boolean)
+      .sort(function(a, b){ return (a.hi - a.lo) - (b.hi - b.lo) || a.lo - b.lo; });
+    var levelOf = {}, placed = [], nLev = 0;
+    spans.forEach(function(o){
+      var lv = 1;
+      placed.forEach(function(q){ if (q.lo < o.hi && o.lo < q.hi) lv = Math.max(lv, q.lv + 1); });
+      o.lv = lv; placed.push(o); levelOf[o.i] = lv; nLev = Math.max(nLev, lv);
+    });
+    this.nLev = nLev;
+    // 通り道と札の場所：縦書きは上に（札 + 段）、横書きは左に（段）と上に（札）
+    var lane = nLev ? STUB + (nLev - 1) * STEP + 10 : 0;
+    this.padTop = tate ? (roles ? CHIP + lane + 10 : 20) : (roles ? CHIP + 10 : 20);
+    this.padLeft = tate ? 0 : (nLev ? lane - 2 : 4);
+    // 重ね順：塗り（指す先の淡い色）→ 字 → 線・枠・矢印
+    this.back = D.el("svg", {width: W, height: H, viewBox: "0 0 " + W + " " + H, style: "position:absolute;left:0;top:0;overflow:visible;pointer-events:none"}, this);
+    var text = document.createElement("div");
+    text.style.cssText = "position:absolute;inset:0;font-size:" + P.size + "px;line-height:" + (tate ? LH_TATE : 1.85) + ";padding-top:" + this.padTop + "px;" + (tate ? "writing-mode:vertical-rl;" : "padding-left:" + this.padLeft + "px;");
+    this.appendChild(text);
+    this.front = D.el("svg", {width: W, height: H, viewBox: "0 0 " + W + " " + H, style: "position:absolute;left:0;top:0;overflow:visible;pointer-events:none"}, this);
+    this.text = text;
+    var byId = {};
+    this.paras = m.paras.map(function(p, pi){
+      var d = document.createElement("div");
+      // 枠の内側の余白と、段落の間（枠の名前の札が入る）
+      // 横書きは次の段落の札が前の枠に掛からないように空ける
+      d.style.cssText = "padding:10px 14px;text-indent:1em;" + (tate ? "margin:0 0 0 22px;" : "margin:0 0 " + (roles ? CHIP + 12 : 22) + "px 0;");
+      text.appendChild(d);
+      var P2 = {p: p, el: d, spans: []};
+      p.runs.forEach(function(r){
+        if (!r.line && !r.id && !r.ref){ d.appendChild(document.createTextNode(r.t)); return; }
+        var s = document.createElement("span"); s.textContent = r.t; d.appendChild(s);
+        P2.spans.push({r: r, el: s});
+        if (r.id) byId[r.id] = s;
+      });
+      return P2;
+    });
+    this.byId = byId;
+    // 傍線（引く順に）
+    this.lines = [];
+    this.paras.forEach(function(P2){ P2.spans.forEach(function(s){ if (s.r.line){
+      var g = D.el("g", {}, self.front), o = {el: s.el, r: s.r, g: g, segs: [], lab: null};
+      if (s.r.label) o.lab = D.el("text", {"font-size": 24, "font-weight": 700, fill: "var(--emph)", "text-anchor": "middle", opacity: 0}, g);
+      if (o.lab) o.lab.textContent = s.r.label;
+      self.lines.push(o);
+    } }); });
+    // 指示語 → 指す先
+    this.refs = [];
+    this.paras.forEach(function(P2){ P2.spans.forEach(function(s){ if (s.r.ref && byId[s.r.ref]){
+      self.refs.push({from: s.el, to: byId[s.r.ref],
+        fill: D.el("g", {opacity: 0}, self.back),
+        box: D.el("g", {opacity: 0}, self.front),
+        path: D.el("path", {fill: "none", stroke: "var(--emph)", "stroke-width": 3, "stroke-linecap": "round", pathLength: 1, "stroke-dasharray": 1, "stroke-dashoffset": 1}, self.front),
+        head: D.el("path", {d: "M0,0L-14,-7L-14,7Z", fill: "var(--emph)", opacity: 0}, self.front)});
+    } }); });
+    // 段落の枠・札・つなぐ線
+    var pById = {};
+    this.paras.forEach(function(P2){ if (P2.p.id) pById[P2.p.id] = P2; });
+    this.boxes = this.paras.filter(function(P2){ return P2.p.role; }).map(function(P2){
+      var c = ROLE_COLOR(P2.p.role);
+      var rect = D.el("rect", {fill: "none", stroke: c, "stroke-width": 2.5, rx: 10, pathLength: 1, "stroke-dasharray": 1, "stroke-dashoffset": 1}, self.front);
+      var chip = D.el("g", {opacity: 0}, self.front);
+      var cr = D.el("rect", {fill: "var(--bg)", stroke: c, "stroke-width": 2, rx: 14, height: 34}, chip);
+      var ct = D.el("text", {"font-size": 24, "font-weight": 700, fill: c, "text-anchor": "middle"}, chip);
+      ct.textContent = P2.p.role;
+      return {P2: P2, c: c, rect: rect, chip: chip, cr: cr, ct: ct};
+    });
+    this.links = this.paras.filter(function(P2){ return P2.p.to && pById[P2.p.to]; }).map(function(P2){
+      var c = P2.p.rel === "~" ? "var(--accent2)" : "var(--muted)";
+      return {a: P2, b: pById[P2.p.to], rel: P2.p.rel, c: c, lv: levelOf[self.paras.indexOf(P2)] || 1,
+        path: D.el("path", {fill: "none", stroke: c, "stroke-width": 2.5, "stroke-dasharray": P2.p.rel === "~" ? "none" : "none", pathLength: 1}, self.front),
+        h1: D.el("path", {d: "M0,0L-13,-6.5L-13,6.5Z", fill: c, opacity: 0}, self.front),
+        h0: P2.p.rel === "~" ? D.el("path", {d: "M0,0L-13,-6.5L-13,6.5Z", fill: c, opacity: 0}, self.front) : null};
+    });
+    this.setAttribute("aria-label", m.paras.map(function(p){ return (p.role ? "【" + p.role + "】" : "") + p.runs.map(function(r){ return r.t; }).join(""); }).join(" "));
+  }
+  // 要素の字の箱（行ごと）を部品の座標で。部品の外側の拡大（舞台の scale・段階の translate）によらない
+  rects(e){
+    var R = this.getBoundingClientRect(), sc = R.width / (this.offsetWidth || 1) || 1;
+    return [].map.call(e.getClientRects(), function(r){ return {l: (r.left - R.left) / sc, t: (r.top - R.top) / sc, r: (r.right - R.left) / sc, b: (r.bottom - R.top) / sc}; })
+      .filter(function(r){ return r.r - r.l > 0.5 && r.b - r.t > 0.5; });
+  }
+  box(e){ var r = this.rects(e), o = null; r.forEach(function(x){ o = o ? {l: Math.min(o.l, x.l), t: Math.min(o.t, x.t), r: Math.max(o.r, x.r), b: Math.max(o.b, x.b)} : x; }); return o; }
+  duration(k){
+    var name = this.phaseList[k - 1], P = this.props;
+    if (name === "marks") return this.lines.length * P.draw * 0.8 + 0.3;
+    if (name === "refs") return this.refs.length * (P.draw + 0.3) + 0.2;
+    if (name === "roles") return this.boxes.length * 0.35 + P.draw + (this.links.length ? 0.3 + P.draw : 0);
+    return 0;
+  }
+  render(k, t, ctx){
+    var self = this, P = this.props, tate = P.tate;
+    var at = function(name){ var s = self.phaseStep(name); if (!s) return -1; return k > s ? Infinity : k < s ? -1 : t; };
+    var pr = function(tt, a, d){ return tt < 0 ? 0 : D.prog(tt, a, d); };
+    var tm = at("marks"), trf = at("refs"), tro = at("roles");
+    // 先の段階を薄く見せる表示（授業の表示）：後の段階の傍線・指示語の囲みと矢印・段落の枠と札とつなぐ線を、
+    // 引き終えた形のまま --preview-opacity の濃さで出す
+    var preview = !!ctx.preview, PV = preview ? base.previewOpacity(this) : 0.45;
+    var later = function(name){ return preview && self.phaseStep(name) > k; };
+    var fM = later("marks"), fR = later("refs"), fO = later("roles");
+    if (fM) tm = Infinity;
+    if (fR) trf = Infinity;
+    if (fO) tro = Infinity;
+    var f1 = function(x){ return x.toFixed(1); };
+    // ---- 傍線：縦書きは字の右、横書きは字の下。二重傍線は 2 本。行をまたぐときは行ごとに順に引く
+    this.lines.forEach(function(o, j){
+      var e = pr(tm, j * P.draw * 0.8, P.draw), rs = self.rects(o.el), total = 0;
+      rs.forEach(function(r){ total += tate ? r.b - r.t : r.r - r.l; });
+      while (o.g.childNodes.length > (o.lab ? 1 : 0)) o.g.removeChild(o.g.lastChild);
+      if (fM) o.g.setAttribute("opacity", PV); else o.g.removeAttribute("opacity");
+      var left = e * total;
+      rs.forEach(function(r){
+        var len = tate ? r.b - r.t : r.r - r.l, d = Math.max(0, Math.min(len, left)); left -= len;
+        if (d <= 0) return;
+        for (var q = 0; q < o.r.line; q++){
+          var off = 3 + q * 5;
+          var attrs = tate ? {x1: f1(r.r + off), x2: f1(r.r + off), y1: f1(r.t), y2: f1(r.t + d)} : {x1: f1(r.l), x2: f1(r.l + d), y1: f1(r.b + off), y2: f1(r.b + off)};
+          attrs.stroke = "var(--emph)"; attrs["stroke-width"] = 2.2;
+          D.el("line", attrs, o.g);
+        }
+      });
+      if (o.lab && rs.length){
+        var r0 = rs[0];
+        // 記号（A など）は線の始まりの外：縦書きは線の右の列の間で始まりより上、横書きは線の下の行の間
+        // 縦書きは線のすぐ右（列の間の、自分の列に寄ったところ）に、線の始まりから下へ
+        if (tate){ o.lab.setAttribute("x", f1(r0.r + 3 + o.r.line * 5 + 7)); o.lab.setAttribute("y", f1(r0.t + 22)); }
+        else { o.lab.setAttribute("x", f1(r0.l + 10)); o.lab.setAttribute("y", f1(r0.b + 3 + o.r.line * 5 + 20)); }
+        o.lab.setAttribute("opacity", pr(tm, j * P.draw * 0.8, 0.3).toFixed(3));
+      }
+    });
+    // ---- 指示語：指示語を四角で囲み、指す先に淡い色を敷き、指示語から指す先へ矢印
+    this.refs.forEach(function(o, j){
+      var a0 = j * (P.draw + 0.3), eb = pr(trf, a0, 0.3), ea = pr(trf, a0 + 0.25, P.draw);
+      var A = self.box(o.from), B = self.box(o.to);
+      while (o.box.firstChild) o.box.removeChild(o.box.firstChild);
+      while (o.fill.firstChild) o.fill.removeChild(o.fill.firstChild);
+      if (!A || !B){ o.box.setAttribute("opacity", 0); return; }
+      if (fR) eb = ea = PV;
+      D.el("rect", {x: f1(A.l - 3), y: f1(A.t - 2), width: f1(A.r - A.l + 6), height: f1(A.b - A.t + 4), rx: 5, fill: "none", stroke: "var(--emph)", "stroke-width": 2.5}, o.box);
+      self.rects(o.to).forEach(function(r){ D.el("rect", {x: f1(r.l - 2), y: f1(r.t), width: f1(r.r - r.l + 4), height: f1(r.b - r.t), rx: 4, fill: "var(--emph-tint)"}, o.fill); });
+      o.box.setAttribute("opacity", eb.toFixed(3)); o.fill.setAttribute("opacity", ea.toFixed(3));
+      // 矢印：指す先の行（字の箱）のうち指示語に近いものへ。同じ列（行）なら列の右（行の上）に弧、違えば列の頭（行の上）の側を通す
+      var ac = {x: (A.l + A.r) / 2, y: (A.t + A.b) / 2}, Bn = null, bd = Infinity;
+      self.rects(o.to).forEach(function(r){ var d = Math.hypot((r.l + r.r) / 2 - ac.x, (r.t + r.b) / 2 - ac.y); if (d < bd){ bd = d; Bn = r; } });
+      var x0, y0, x1, y1, cx, cy, same = tate ? Math.abs((Bn.l + Bn.r) / 2 - ac.x) < 6 : Math.abs((Bn.t + Bn.b) / 2 - ac.y) < 6;
+      if (tate && same){ var up = Bn.b <= A.t; x0 = A.r + 4; y0 = up ? A.t + 4 : A.b - 4; x1 = Bn.r + 4; y1 = up ? Bn.b - 4 : Bn.t + 4; cx = Math.max(x0, x1) + 44; cy = (y0 + y1) / 2; }
+      else if (tate){ x0 = ac.x; y0 = A.t - 4; x1 = (Bn.l + Bn.r) / 2; y1 = Bn.t - 4; cx = (x0 + x1) / 2; cy = Math.min(y0, y1) - 60; }
+      else if (same){ x0 = ac.x; y0 = A.t - 2; x1 = (Bn.l + Bn.r) / 2; y1 = Bn.t - 2; cx = (x0 + x1) / 2; cy = Math.min(y0, y1) - 46; }
+      else { var above = Bn.b <= A.t; x0 = ac.x; y0 = above ? A.t - 2 : A.b + 2; x1 = (Bn.l + Bn.r) / 2; y1 = above ? Bn.b + 2 : Bn.t - 2; cx = (x0 + x1) / 2 + 40; cy = (y0 + y1) / 2; }
+      // 指示語と指す先が同じ段落なら、弧の膨らみをその段落の枠の内側にとどめる（2 次曲線の頂は端と制御点の中ほど）
+      var para = o.from.parentNode === o.to.parentNode ? self.box(o.from.parentNode) : null, pad = 6;
+      if (para){
+        var mid = function(a, b){ return (a + b) / 2; };
+        if (cy < mid(y0, y1)) cy = Math.max(cy, 2 * (para.t + pad) - mid(y0, y1));
+        if (cx > mid(x0, x1)) cx = Math.min(cx, 2 * (para.r - pad) - mid(x0, x1));
+      }
+      o.path.setAttribute("d", "M" + f1(x0) + "," + f1(y0) + "Q" + f1(cx) + "," + f1(cy) + " " + f1(x1) + "," + f1(y1));
+      o.path.setAttribute("stroke-dashoffset", (fR ? 0 : 1 - ea).toFixed(4));
+      o.path.setAttribute("opacity", fR ? PV : ea > 0 ? 1 : 0);
+      o.head.setAttribute("transform", "translate(" + f1(x1) + " " + f1(y1) + ") rotate(" + (Math.atan2(y1 - cy, x1 - cx) * 180 / Math.PI).toFixed(1) + ")");
+      o.head.setAttribute("opacity", fR ? PV : ea >= 0.98 ? 1 : 0);
+    });
+    // ---- 段落の枠：順に囲み、札を出し、最後につなぐ線
+    var nb = this.boxes.length, tLink = nb * 0.35 + P.draw;
+    var boxOf = {}, chipOf = {};
+    this.boxes.forEach(function(o, j){
+      var e = pr(tro, j * 0.35, P.draw), el = o.P2.el;
+      var x = el.offsetLeft, y = el.offsetTop, w = el.offsetWidth, h = el.offsetHeight;
+      // offset は .text の中の座標。.text は部品の左上にある
+      boxOf[o.P2.p.id || j] = {x: x, y: y, w: w, h: h};
+      o.rect.setAttribute("x", x); o.rect.setAttribute("y", y); o.rect.setAttribute("width", w); o.rect.setAttribute("height", h);
+      o.rect.setAttribute("stroke-dashoffset", (1 - e).toFixed(4));
+      o.rect.setAttribute("opacity", fO ? PV : e > 0 ? 1 : 0);
+      // 札：縦書きは枠の上の辺の右寄り、横書きは左上の角
+      var tw = Array.from(o.P2.p.role).length * 24 + 24;
+      var cx = tate ? x + w - tw / 2 - 12 : x + tw / 2 + 12, cy = tate ? y - 17 : y - 17;
+      o.cr.setAttribute("x", f1(cx - tw / 2)); o.cr.setAttribute("y", f1(cy - 17)); o.cr.setAttribute("width", tw);
+      o.ct.setAttribute("x", f1(cx)); o.ct.setAttribute("y", f1(cy + 8.5));
+      o.chip.setAttribute("opacity", (fO ? PV : pr(tro, j * 0.35 + P.draw * 0.5, 0.3)).toFixed(3));
+      chipOf[o.P2.p.id || j] = {l: cx - tw / 2, r: cx + tw / 2, t: cy - 17, b: cy + 17, at: []};
+    });
+    // 札に付く線の端：縦書きは札の上の辺に左から、横書きは札の左の辺に上から並べる。
+    // 相手が左（上）にある線を先に、段の低い順に。相手が右（下）にある線は後に、段の高い順に（縦の線が横の線を横切らないように）
+    var ends = [];
+    this.links.forEach(function(o){
+      var A = chipOf[o.a.p.id], B = chipOf[o.b.p.id];
+      if (!A || !B) return;
+      var ca = tate ? (A.l + A.r) / 2 : (A.t + A.b) / 2, cb = tate ? (B.l + B.r) / 2 : (B.t + B.b) / 2;
+      o.ea = {link: o, chip: A, dir: cb < ca ? -1 : 1}; o.eb = {link: o, chip: B, dir: ca < cb ? -1 : 1};
+      A.at.push(o.ea); B.at.push(o.eb); ends.push(A, B);
+    });
+    ends.forEach(function(C){
+      if (C.done) return; C.done = true;
+      C.at.sort(function(p, q){ return p.dir !== q.dir ? p.dir - q.dir : p.dir < 0 ? p.link.lv - q.link.lv : q.link.lv - p.link.lv; });
+      var n = C.at.length;
+      C.at.forEach(function(e, i){
+        if (tate){ e.x = C.l + (C.r - C.l) * (i + 1) / (n + 1); e.y = C.t - 1; }
+        else { e.x = C.l - 1; e.y = C.t + (C.b - C.t) * (i + 1) / (n + 1); }
+      });
+    });
+    this.links.forEach(function(o){
+      if (!o.ea){ o.path.setAttribute("opacity", 0); o.h1.setAttribute("opacity", 0); if (o.h0) o.h0.setAttribute("opacity", 0); return; }
+      var e = pr(tro, tLink, P.draw), d, ang1, ang0, x0 = o.ea.x, y0 = o.ea.y, x1 = o.eb.x, y1 = o.eb.y, rr = 8;
+      if (tate){
+        // 札の上の辺から上へ出て、段の高さを横に通り、相手の札の上の辺へ下りる（角は丸める）
+        var top = Math.min(o.ea.chip.t, o.eb.chip.t), yl = top - STUB - (o.lv - 1) * STEP, sx = x1 < x0 ? -1 : 1;
+        d = "M" + f1(x0) + "," + f1(y0) + "V" + f1(yl + rr) + "Q" + f1(x0) + "," + f1(yl) + " " + f1(x0 + sx * rr) + "," + f1(yl) +
+          "H" + f1(x1 - sx * rr) + "Q" + f1(x1) + "," + f1(yl) + " " + f1(x1) + "," + f1(yl + rr) + "V" + f1(y1);
+        ang1 = 90; ang0 = 90;
+      } else {
+        // 札の左の辺から左へ出て、段の位置を縦に通り、相手の札の左の辺へ
+        var lft = Math.min(o.ea.chip.l, o.eb.chip.l), xl = lft - STUB - (o.lv - 1) * STEP, sy = y1 < y0 ? -1 : 1;
+        d = "M" + f1(x0) + "," + f1(y0) + "H" + f1(xl + rr) + "Q" + f1(xl) + "," + f1(y0) + " " + f1(xl) + "," + f1(y0 + sy * rr) +
+          "V" + f1(y1 - sy * rr) + "Q" + f1(xl) + "," + f1(y1) + " " + f1(xl + rr) + "," + f1(y1) + "H" + f1(x1);
+        ang1 = 0; ang0 = 0;
+      }
+      o.path.setAttribute("d", d);
+      o.path.setAttribute("stroke-dasharray", "1"); o.path.setAttribute("stroke-dashoffset", (1 - e).toFixed(4));
+      o.path.setAttribute("opacity", fO ? PV : e > 0 ? 1 : 0);
+      o.h1.setAttribute("transform", "translate(" + f1(x1) + " " + f1(y1) + ") rotate(" + ang1 + ")");
+      o.h1.setAttribute("opacity", fO ? PV : e >= 0.98 ? 1 : 0);
+      if (o.h0){ o.h0.setAttribute("transform", "translate(" + f1(x0) + " " + f1(y0) + ") rotate(" + ang0 + ")"); o.h0.setAttribute("opacity", fO ? PV : e >= 0.98 ? 1 : 0); }
+    });
+  }
+};
+});