egatari 0.0.0-stage → 0.6.4

package/vendor/components/sha256/2ec8a9acdf58b641dbda9a31643e1c9f77d4e386ce654a58971e3ba6e5530455/index.js

@@ -0,0 +1,352 @@
+// m-cycle：循環の図。段階の箱を円（横に長い場所では楕円）の上に 12 時から時計回りに並べ、となりの段階へ円に沿った矢印でつなぐ
+// <m-cycle style="height:420px"><script type="application/json">
+//   {"center": {"label": "PDCA"},
+//    "nodes": [{"label": "計画", "note": "目標と手順"}, {"label": "実行"}, {"label": "評価"}, {"label": "改善"}]}
+// （JSON の終わり）</m-cycle>
+// 座標はデータに書かない（docs/conventions.md §2）。配列の順に回り、最後から最初へ戻る矢印は自動で引く（最後の段階と一緒に出る）
+// 段階は 3〜8 個を想定。箱の幅は字数から見積もる（字の読み込みを待たない）。入らなければ字を 24px まで縮め、それでも入らなければ ctx.report("size", …)
+// center（任意）：真ん中の名前。最初の段階と一緒に出る（center.step で変えられる）
+// 段階：既定は 1 段階に 1 つ（per-step で n 個ずつ、node の step で直接、at で段階の中の開始秒）
+// 見せ方（docs/conventions.md §2.5）：fade（既定。箱が下から 12 px 上がりながら現れてから入ってくる矢印を引く）・draw（矢印を先に引き、
+// その先に箱が前の箱の側から 12 px 寄りながら出る）・grow（矢印を引きながら、箱が前の箱の側から 12 px 寄って 0.92 → 1 に大きくなる）。
+// 箱の動きはどれも 12 px まで。段階の数・長さ・合図・最後の中身はどれも同じ
+// 2.0（Egatari spec §6.1 の部品）：base の MotionElement・el・mtext・prog・lerp・variant・previewOpacity を使い、プレイヤーのグローバルは使わない。
+// 式（tex）は組み立てのときに KaTeX で描く（spec §6.2）：build.fields の nodes[].tex・center.tex を作り手が描いて texHtml を足し、
+// この部品は markup-reader で決まった要素と属性だけを読んで置く（再生のときに KaTeX は動かない）。描いた結果がなければ tex を字のまま出して知らせる。
+// データの問題（ない箱を指す辺）と、入らないときは ctx.report で知らせる（1.x の console.warn の代わり）。
+// 配置を決める内部の関数は arrange(size)（1.x の layout(size)。2.0 の layout(ctx) は再生器が呼ぶので名前を分けた）
+egatariParts.define({name: "cycle", version: "2.0.2", requires: {base: "1.0.0", "markup-reader": "1.0.0"}, element: "m-cycle"}, function(deps){
+"use strict";
+var base = deps.base, MR = deps["markup-reader"];
+var Part = class extends base.MotionElement {
+  static partName = "cycle";   // the registry name (define meta name), for report prefixes
+  // 組み立てのときに描く欄（spec §6.2）。式の意味は字（tex）でも持つので、KaTeX の出力は HTML だけ
+  static build = {fields: {"nodes[].tex": "katex", "center.tex": "katex"}, options: {katex: {output: "html"}}};
+  static variants = ["fade", "draw", "grow"];
+  // データの形（kit/shape.js）
+  static shape = {
+    schema: {type: "object", additionalProperties: false, required: ["nodes"], properties: {
+      nodes: {type: "array", minItems: 2, items: {type: "object", properties: {
+        id: {type: ["string", "integer"]}, label: {type: "string"}, tex: {type: "string"}, texHtml: {type: "string"}, note: {type: "string"}, tone: {type: "string"},
+        step: {type: "integer"}, at: {type: "number"}}}},
+      center: {type: "object", properties: {label: {type: "string"}, tex: {type: "string"}, texHtml: {type: "string"}, note: {type: "string"}, tone: {type: "string"},
+        step: {type: "integer"}, at: {type: "number"}}},
+      edges: {type: "array", items: {type: "object", required: ["from", "to"], properties: {
+        from: {type: ["string", "integer"]}, to: {type: ["string", "integer"]}, label: {type: "string"}, tone: {type: "string"}, dash: {type: "boolean"},
+        step: {type: "integer"}, at: {type: "number"}}}},
+      renderers: {type: "object"}}},
+    example: {center: {label: "PDCA"}, nodes: [{label: "計画"}, {label: "実行"}, {label: "評価"}, {label: "改善"}]},
+  };
+  static props = {
+    "per-step": {type: "number", default: 1, doc: "1 段階に出す段階（箱）の数（0 = 全部を段階 1 で）"},
+    size:       {type: "number", default: 26, doc: "箱の字の大きさ（px。入らなければ 24 まで縮める）"},
+    dur:        {type: "number", default: 0.8, doc: "1 つの段階（入ってくる矢印と箱）が現れる秒数"},
+    stagger:    {type: "number", default: 0.3, doc: "同じ段階の箱の出だしのずれ（秒）"},
+  };
+  get steps(){
+    if (this.getAttribute("steps") !== null) return +this.getAttribute("steps");
+    var p = this.plan(), m = p.center ? p.center.step : 0;
+    p.stages.concat(p.arrows, p.edges).forEach(function(o){ m = Math.max(m, o.step); });
+    return m;
+  }
+  plan(){
+    if (this._plan) return this._plan;
+    var notes = this._notes = [];   // データの問題：mount が ctx.report で知らせる（段階の数を数えるときには ctx がない）
+    var P = this.props, per = P["per-step"], T = P.dur, data = this.data || {}, seen = {};
+    var stages = (data.nodes || []).map(function(n, i){
+      var step = n.step !== undefined ? n.step : per > 0 ? Math.floor(i / per) + 1 : 1, j = seen[step] = (seen[step] || 0) + 1;
+      return {n: n, i: i, step: step, at0: n.at !== undefined ? n.at : +((j - 1) * P.stagger).toFixed(3)};
+    });
+    stages.forEach(function(o){ o.at = o.at0; });
+    var N = stages.length, arrows = [];
+    // 矢印 i：段階 i から i + 1 へ（最後は最初へ戻る）。後に出る端の段階と一緒に出る
+    for (var i = 0; i < N && N > 1; i++){
+      var a = stages[i], b = stages[(i + 1) % N], closing = i === N - 1;
+      var owner = closing ? (a.step >= b.step ? a : b) : (b.step >= a.step ? b : a);
+      // ふつうは入っていく先の箱と一緒（見せ方で順が変わる）。戻る矢印と、先の箱がもう出ているものは、持ち主の箱が出終わってから
+      var withBox = !closing && owner === b;
+      arrows.push({i: i, from: a, to: b, step: owner.step, owner: owner, withBox: withBox, at: withBox ? owner.at : +(owner.at + T).toFixed(3)});
+    }
+    stages.forEach(function(o){ o.inArrow = null; });
+    arrows.forEach(function(r){ if (r.withBox) r.to.inArrow = r; });
+    var c = data.center ? {n: data.center, step: data.center.step !== undefined ? data.center.step : stages.length ? stages[0].step : 1, at: data.center.at || 0} : null;
+    var byId = {};
+    stages.forEach(function(o){ if (o.n.id !== undefined) byId[o.n.id] = o; });
+    var edges = (data.edges || []).map(function(e){
+      var a = byId[e.from], b = byId[e.to];
+      if (!a || !b){ notes.push("[cycle] an edge refers to an unknown node: " + JSON.stringify(e.from) + " → " + JSON.stringify(e.to) + " (not drawn)"); return null; }
+      var step = e.step !== undefined ? e.step : Math.max(a.step, b.step), at = 0;
+      [a, b].forEach(function(o){ if (o.step === step) at = Math.max(at, o.at + T); });
+      return {e: e, a: a, b: b, step: step, at: e.at !== undefined ? e.at : at};
+    }).filter(Boolean);
+    return (this._plan = {stages: stages, arrows: arrows, center: c, edges: edges});
+  }
+  mount(ctx){
+    var P = this.props, D = base, self = this;
+    this.variant = base.variant(this);
+    this.plan();
+    this._notes.forEach(function(m){ ctx.report("data", m); });
+    this.texSink = MR.sink(this, ctx);
+    this.style.display = "block"; this.style.position = "relative";
+    var W = this.W = this.clientWidth, H = this.H = this.clientHeight;
+    this.svg = D.el("svg", {viewBox: "0 0 " + W + " " + H, width: W, height: H, "aria-hidden": "true", style: "display:block;overflow:visible"}, this);
+    this.reportLayout = function(msg){ ctx.report("layout", msg); };   // draw の知らせ（名前の置き場がない辺）
+    // size：24 より小さい字は使わない（24 にする）。数でなければ既定の 26
+    var s0 = P.size;
+    if (!(typeof s0 === "number" && isFinite(s0))){ ctx.report("attr", "[cycle] size=\"" + this.getAttribute("size") + "\" is not a number (26 is used)"); s0 = 26; }
+    else if (s0 < 24){ ctx.report("attr", "[cycle] size=\"" + this.getAttribute("size") + "\" is below 24 (text is at least 24px; 24 is used)"); s0 = 24; }
+    var L = null;
+    for (var s = s0; ; s = Math.max(24, s - 2)){
+      L = this.arrange(s);
+      if (L.fits || s <= 24) break;
+    }
+    if (!L.fits) ctx.report("size", "[cycle] the cycle does not fit its box even at 24px (" + L.why + "); make the element larger or shorten the labels");
+    this.draw(L);
+    // 読み上げ：最後の形（一回りと、ほかのつながり）を 1 文で。作者の aria-label があればそれを使う（上書きしない）
+    if (this._aria === undefined) this._aria = this.getAttribute("aria-label");
+    this.setAttribute("role", "img");
+    if (!this._aria) this.setAttribute("aria-label", this.summary(/^ja\b/i.test(ctx.lang || "ja")));
+    this.texSink.flush();   // what the formulas have to report, once per kind (spec §6.2)
+  }
+  arrange(size){
+    var self = this, W = this.W, H = this.H, pl = this.plan(), N = pl.stages.length, why = [];
+    var th = function(i){ return -Math.PI / 2 + 2 * Math.PI * i / N; };
+    var boxes = pl.stages.map(function(o, i){
+      var lines = labelLines(o.n, size, textFill(o.n.tone));
+      // 強調の箱（--emph-tint の地）の中の補足は --fg（--muted では 4.5:1 に届かない。共通の決まり §2.3）
+      if (o.n.note) lines.push({text: o.n.note, size: 24, fill: o.n.tone === "emph" ? "var(--fg)" : "var(--muted)"});
+      var bs = boxSize(self, lines);
+      return {o: o, bs: bs, w: bs.w, h: bs.h, th: th(i)};
+    });
+    var cen = null;
+    if (pl.center){
+      var cl = labelLines(pl.center.n, size + 4).map(function(l){ l.weight = 700; l.fill = tone(pl.center.n.tone); return l; });
+      if (pl.center.n.note) cl.push({text: pl.center.n.note, size: 24, fill: "var(--muted)"});
+      cen = boxSize(self, cl);
+    }
+    // 縦：箱と円の上端から下端までが H に入る最大の ry（二分法）。横：箱と円が W に入る最大の rx（縦の 1.9 倍まで）。
+    // 円は縦に長くしない（ry ≤ rx の上限）
+    var span = function(ry){
+      var lo = -ry, hi = ry;
+      boxes.forEach(function(b){ var y = ry * Math.sin(b.th); lo = Math.min(lo, y - b.h / 2); hi = Math.max(hi, y + b.h / 2); });
+      return [lo, hi];
+    };
+    var rxMax = W / 2 - 4;
+    // 12 時と 6 時の箱（cos = 0）は rx によらない：要素より広ければ入らない
+    boxes.forEach(function(b, i){ var c = Math.abs(Math.cos(b.th)); if (c > 1e-6) rxMax = Math.min(rxMax, (W / 2 - 3 - b.w / 2) / c); else if (b.w > W - 6) why.push("box " + (i + 1) + " is " + Math.ceil(b.w) + "px wide, wider than the element (" + W + "px)"); });
+    var a = 0, b = H;
+    for (var it = 0; it < 40; it++){ var m = (a + b) / 2, sp = span(m); if (sp[1] - sp[0] <= H - 6) a = m; else b = m; }
+    var ry = Math.max(0, Math.min(a, rxMax)), sp = span(ry), cy = 3 - sp[0] + (H - 6 - (sp[1] - sp[0])) / 2, cx = W / 2;
+    var rx = Math.max(0, Math.min(rxMax, ry * 1.9));
+    if (ry < 40 || rx < 40) why.push("no room for the circle");
+    var P = function(t){ return [cx + rx * Math.cos(t), cy + ry * Math.sin(t)]; };
+    boxes.forEach(function(b){ var p = P(b.th); b.cx = p[0]; b.cy = p[1]; b.x = p[0] - b.w / 2; b.y = p[1] - b.h / 2; });
+    // 箱どうしが近すぎないか
+    for (var i = 0; i < N; i++) for (var j = i + 1; j < N; j++){
+      var p = boxes[i], q = boxes[j];
+      if (p.x < q.x + q.w + 8 && q.x < p.x + p.w + 8 && p.y < q.y + q.h + 8 && q.y < p.y + p.h + 8) why.push("boxes " + (i + 1) + " and " + (j + 1) + " overlap");
+    }
+    // 矢印：円に沿って、箱 i の外へ出たところから、箱 i+1 に入る手前まで（箱から 8px 空ける）
+    var inside = function(bx, t){ var p = P(t); return p[0] > bx.x - 8 && p[0] < bx.x + bx.w + 8 && p[1] > bx.y - 8 && p[1] < bx.y + bx.h + 8; };
+    var arcs = pl.arrows.map(function(r){
+      var A = boxes[r.i], B = boxes[(r.i + 1) % N], t0 = A.th, t1 = r.i === N - 1 ? B.th + 2 * Math.PI : B.th, d = 0.002;
+      while (t0 < t1 && inside(A, t0)) t0 += d;
+      while (t1 > t0 && inside(B, t1)) t1 -= d;
+      var len = 0, q = P(t0);
+      for (var t = t0 + d; t <= t1; t += d){ var p2 = P(t); len += Math.hypot(p2[0] - q[0], p2[1] - q[1]); q = p2; }
+      if (len < 30) why.push("no room for the arrow from " + (r.i + 1));
+      return {r: r, t0: t0, t1: t1, len: len};
+    });
+    if (cen){
+      var hw = cen.w / 2 + 16, hh = cen.h / 2 + 16;
+      if (Math.pow(hw / rx, 2) + Math.pow(hh / ry, 2) > 1) why.push("the center label is too large for the circle");
+      boxes.forEach(function(b){ if (Math.abs(b.cx - cx) < b.w / 2 + hw && Math.abs(b.cy - cy) < b.h / 2 + hh) why.push("the center label touches a box"); });
+    }
+    return {fits: !why.length, why: why.join("; "), size: size, boxes: boxes, arcs: arcs, cen: cen, cx: cx, cy: cy, rx: rx, ry: ry};
+  }
+  draw(L){
+    var D = base, self = this, svg = this.svg;
+    var gA = D.el("g", {}, svg), gB = D.el("g", {}, svg), gE = D.el("g", {}, svg), gC = D.el("g", {}, svg);
+    this.L = L;
+    this.pt = function(t){ return [L.cx + L.rx * Math.cos(t), L.cy + L.ry * Math.sin(t)]; };
+    var rects = {};
+    this.boxes = L.boxes.map(function(b){
+      var col = tone(b.o.n.tone), g = D.el("g", {opacity: 0}, gB);
+      D.el("rect", {class: "box", x: b.x.toFixed(1), y: b.y.toFixed(1), width: b.w, height: b.h, rx: 12, fill: boxFill(b.o.n.tone), stroke: col, "stroke-width": b.o.n.tone === "emph" ? 3 : 2.2}, g);
+      boxDraw(self, g, b.x, b.y, b.bs);
+      if (b.o.n.id !== undefined) rects[b.o.n.id] = b;
+      return {b: b, g: g, o: b.o};
+    });
+    this.arcs = L.arcs.map(function(a){
+      var col = "var(--muted)", g = D.el("g", {opacity: 0}, gA);
+      return {a: a, r: a.r, g: g, path: D.el("path", {d: "", fill: "none", stroke: col, "stroke-width": 3, "stroke-linecap": "round"}, g),
+        head: D.el("path", {d: "M0,0L-16,-7L-16,7Z", fill: col}, g)};
+    });
+    // 前の段階の箱から、この箱へ向かう向き（draw と grow で箱が寄ってくる向き）
+    this.boxes.forEach(function(o, i){
+      var q = L.boxes[(i + L.boxes.length - 1) % L.boxes.length], dx = o.b.cx - q.cx, dy = o.b.cy - q.cy, dl = Math.hypot(dx, dy) || 1;
+      o.dir = [dx / dl, dy / dl];
+    });
+    this.center = null;
+    if (L.cen){
+      var g = D.el("g", {opacity: 0}, gC);
+      boxDraw(self, g, L.cx - L.cen.w / 2, L.cy - L.cen.h / 2, L.cen);
+      this.center = {g: g};
+    }
+    this.edges = this.plan().edges.map(function(x){
+      var e = x.e, A = rects[e.from], B = rects[e.to];
+      if (!A || !B) return null;
+      var dx = B.cx - A.cx, dy = B.cy - A.cy, Lh = Math.hypot(dx, dy) || 1;
+      var cut = function(R, sx, sy){ var s = Math.min(sx ? (R.w / 2 + 6) / Math.abs(sx) : Infinity, sy ? (R.h / 2 + 6) / Math.abs(sy) : Infinity); return [R.cx + sx * s, R.cy + sy * s]; };
+      var p0 = cut(A, dx / Lh, dy / Lh), p1 = cut(B, -dx / Lh, -dy / Lh), col = e.tone ? tone(e.tone) : "var(--muted)";
+      var g = D.el("g", {opacity: 0}, gE), ux = p1[0] - p0[0], uy = p1[1] - p0[1], l2 = Math.hypot(ux, uy) || 1;
+      D.el("line", {x1: p0[0].toFixed(1), y1: p0[1].toFixed(1), x2: (p1[0] - ux / l2 * 14).toFixed(1), y2: (p1[1] - uy / l2 * 14).toFixed(1), stroke: col, "stroke-width": 3, "stroke-dasharray": e.dash === false ? "none" : "8 6"}, g);
+      D.el("path", {d: "M0,0L-16,-7L-16,7Z", fill: col, transform: "translate(" + p1[0].toFixed(1) + " " + p1[1].toFixed(1) + ") rotate(" + (Math.atan2(uy, ux) * 180 / Math.PI).toFixed(1) + ")"}, g);
+      if (e.label){
+        // 名前は線の横に（線・真ん中の名前・箱と重ならない所。なければ知らせる）
+        var obst = L.boxes.map(function(b){ return {x: b.x, y: b.y, w: b.w, h: b.h}; });
+        if (L.cen) obst.push({x: L.cx - L.cen.w / 2, y: L.cy - L.cen.h / 2, w: L.cen.w, h: L.cen.h});
+        var at = sideLabel(p0, p1, est(e.label, 24), 30, obst, self.W, self.H);
+        if (!at.ok) self.reportLayout("[cycle] the label \"" + e.label + "\" of the edge " + JSON.stringify(e.from) + " → " + JSON.stringify(e.to) + " has no free place beside its line (it may overlap; make the element larger or the label shorter)");
+        D.mtext(g, at.x, at.y, e.label, {"text-anchor": "middle", "font-size": 24, fill: e.tone ? col : "var(--muted)"});
+      }
+      return {g: g, step: x.step, at: x.at};
+    }).filter(Boolean);
+  }
+  // 最後の形を 1 文で（読み上げの名前）：「循環（PDCA）：計画：目標と手順 → 実行 → 評価 → 改善 → 計画に戻る。ほかのつながり：計画 → 評価（見直し）」
+  summary(ja){
+    var pl = this.plan(), one = function(n){ return String(n.label || n.tex || "").replace(/\s*\n\s*/g, " ").replace(/\*/g, ""); };
+    var full = function(n){ return one(n) + (n.note ? (ja ? "：" : ": ") + n.note : ""); };
+    var st = pl.stages.map(function(o){ return full(o.n); });
+    var s = (ja ? "循環" : "Cycle") + (pl.center ? (ja ? "（" + full(pl.center.n) + "）" : " (" + full(pl.center.n) + ")") : "") + (ja ? "：" : ": ") +
+      st.join(" → ") + (st.length > 1 ? (ja ? " → " + one(pl.stages[0].n) + "に戻る" : " → back to " + one(pl.stages[0].n)) : "");
+    var ed = pl.edges.map(function(x){ return one(x.a.n) + " → " + one(x.b.n) + (x.e.label ? (ja ? "（" + x.e.label + "）" : " (" + x.e.label + ")") : ""); });
+    if (ed.length) s += (ja ? "。ほかのつながり：" : ". Other links: ") + ed.join(ja ? "、" : ", ");
+    return s;
+  }
+  duration(k){
+    var T = this.props.dur, p = this.plan(), d = 0;
+    p.stages.forEach(function(o){ if (o.step === k) d = Math.max(d, o.at + T); });
+    p.arrows.forEach(function(o){ if (o.step === k && !o.withBox) d = Math.max(d, o.at + 0.5); });
+    if (p.center && p.center.step === k) d = Math.max(d, p.center.at + 0.45);
+    p.edges.forEach(function(o){ if (o.step === k) d = Math.max(d, o.at + 0.4); });
+    return d;
+  }
+  // 同じ段階の 2 つ目からの箱の開始時刻（口述原稿の {cue} に合わせられる）
+  cues(k){
+    var c = [];
+    this.plan().stages.forEach(function(o){ if (o.step === k && o.at0 > 0 && c.indexOf(o.at) < 0) c.push(o.at); });
+    return c.length ? c.sort(function(a, b){ return a - b; }) : null;
+  }
+  render(k, t, ctx){
+    var D = base, self = this, vr = this.variant, T = this.props.dur, L = this.L;
+    var lecture = !!ctx.preview, FAINT = 0.45;
+    if (lecture) FAINT = base.previewOpacity(this);
+    var pr = function(s, start, len){ return s < k ? 1 : s > k ? 0 : D.prog(t, start, len); };
+    // 授業の表示：後の段階は最後の形を薄く（テーマの --preview-opacity、ないときは 0.45）、今の段階はその薄さから濃くなる。形は動かさない（どの見せ方でも同じ）
+    var faint = function(s, start, len){ return s < k ? 1 : s > k ? FAINT : FAINT + (1 - FAINT) * D.prog(t, start, len); };
+    var boxE = {}, arrE = {};
+    // 段階ごとの箱と、一緒に出る入ってくる矢印の進み
+    // 箱の動きは 12 px まで（docs/conventions.md §1.2：どの見せ方も fade より遠くへ動かさない）
+    var OFF = 12;
+    this.boxes.forEach(function(o){
+      var s = o.o.step, st = o.o.at, op, sc = 1, e = 1, d = [0, -1], ar;
+      if (lecture){ op = faint(s, st, T); ar = 1; }
+      else if (vr === "draw"){
+        // 矢印を先に引き、その先に箱が前の箱の側から 12 px 寄りながら出る
+        ar = pr(s, st, 0.5 * T); e = op = pr(s, st + 0.45 * T, 0.55 * T); sc = 0.92 + 0.08 * e; d = o.dir;
+      } else if (vr === "grow"){
+        // 矢印を引きながら、箱が前の箱の側から 12 px 寄り、0.92 → 1 に大きくなる
+        ar = pr(s, st, 0.5 * T); e = pr(s, st + 0.3 * T, 0.55 * T); op = Math.min(1, e * 1.6); sc = 0.92 + 0.08 * e; d = o.dir;
+      } else {
+        // fade：箱が下から 12 px 上がりながら現れてから、入ってくる矢印を引く
+        e = op = pr(s, st, 0.55 * T); sc = 0.92 + 0.08 * e; ar = pr(s, st + 0.45 * T, 0.55 * T);
+      }
+      var dx = -d[0] * OFF * (1 - e), dy = -d[1] * OFF * (1 - e), cx = o.b.cx, cy = o.b.cy;
+      setIf(o.g, "opacity", op.toFixed(3));
+      setIf(o.g, "transform", sc >= 1 && Math.abs(dx) < 0.01 && Math.abs(dy) < 0.01 ? "" :
+        "translate(" + (cx + dx).toFixed(2) + " " + (cy + dy).toFixed(2) + ") scale(" + sc.toFixed(4) + ") translate(" + (-cx).toFixed(2) + " " + (-cy).toFixed(2) + ")");
+      if (o.o.inArrow) arrE[o.o.inArrow.i] = lecture ? [1, op] : [ar, 1];
+    });
+    this.arcs.forEach(function(o){
+      var r = o.r, v = arrE[r.i] || (lecture ? [1, faint(r.step, r.at, 0.5)] : [pr(r.step, r.at, 0.5), 1]);
+      var e = v[0], a = o.a, tc = a.t0 + (a.t1 - a.t0) * e;
+      setIf(o.g, "opacity", e > 0 ? v[1].toFixed(3) : 0);
+      // 見えない矢印も、render が書く属性はすべて書き直す（前の呼び出しの transform を残さない。docs/contract.md §3）
+      if (e <= 0){ setIf(o.path, "d", ""); if (o.head.hasAttribute("transform")) o.head.removeAttribute("transform"); return; }
+      // 線は矢じりの根元まで（矢じりは 14px、線が 20px 伸びるまでに大きくなる）
+      var p = self.pt(tc), sp = Math.hypot(L.rx * Math.sin(tc), L.ry * Math.cos(tc)) || 1;
+      var back = Math.min(14 / sp, tc - a.t0), te = tc - back, q0 = self.pt(a.t0), q1 = self.pt(te);
+      setIf(o.path, "d", "M" + q0[0].toFixed(2) + "," + q0[1].toFixed(2) + "A" + L.rx.toFixed(2) + "," + L.ry.toFixed(2) + " 0 " + (te - a.t0 > Math.PI ? 1 : 0) + " 1 " + q1[0].toFixed(2) + "," + q1[1].toFixed(2));
+      var ang = Math.atan2(L.ry * Math.cos(tc), -L.rx * Math.sin(tc)) * 180 / Math.PI, hs = Math.min(1, a.len * e / 20);
+      setIf(o.head, "transform", "translate(" + p[0].toFixed(2) + " " + p[1].toFixed(2) + ") rotate(" + ang.toFixed(2) + ") scale(" + hs.toFixed(4) + ")");
+    });
+    var c = this.plan().center;
+    if (this.center) setIf(this.center.g, "opacity", (lecture ? faint(c.step, c.at, 0.45) : pr(c.step, c.at, 0.45)).toFixed(3));
+    this.edges.forEach(function(o){ setIf(o.g, "opacity", (lecture ? faint(o.step, o.at, 0.4) : pr(o.step, o.at, 0.4)).toFixed(3)); });
+  }
+};
+
+// ---- 下の関数は m-cycle の中だけで使う（字の幅の見積もり・箱の中の行）
+// 属性は値が変わるときだけ書く：同じ値を書き直しても Chrome は塗り直し、macOS では入り直すたびに箱の縁の画素が揺れた（DOM は同じ）
+// 線 p0 → p1 の名前（幅 w、高さ h）の置き場：線の真ん中（次に 1/3・2/3・1/4・3/4・端の近く）の横に、線から離して（近くになければ 24・48 px 遠くへ）。
+// 上（か左）の側を先に試す。箱 obst と枠の外を避ける。返すのは字の基線の中心 {x, y, ok}
+function sideLabel(p0, p1, w, h, obst, W, H){
+  var ux = p1[0] - p0[0], uy = p1[1] - p0[1], l = Math.hypot(ux, uy) || 1, nx = -uy / l, ny = ux / l, first = null;
+  if (ny > 0 || (ny === 0 && nx > 0)){ nx = -nx; ny = -ny; }
+  var ts = [0.5, 0.35, 0.65, 0.25, 0.75, 0.1, 0.9];
+  for (var ex = 0; ex <= 48; ex += 24) for (var i = 0; i < ts.length; i++) for (var sd = 1; sd >= -1; sd -= 2){
+    var d = Math.abs(nx) * w / 2 + Math.abs(ny) * h / 2 + 8 + ex;
+    var cx = p0[0] + ux * ts[i] + sd * nx * d, cy = p0[1] + uy * ts[i] + sd * ny * d;
+    var b = {l: cx - w / 2, r: cx + w / 2, t: cy - h / 2, b: cy + h / 2};
+    var at = {x: cx, y: cy + 8, ok: true};
+    if (!first) first = at;
+    if (b.l < 0 || b.r > W || b.t < 0 || b.b > H) continue;
+    if (obst.some(function(o){ return b.l < o.x + o.w + 4 && o.x - 4 < b.r && b.t < o.y + o.h + 4 && o.y - 4 < b.b; })) continue;
+    return at;
+  }
+  return {x: first.x, y: first.y, ok: false};
+}
+function setIf(el, a, v){ v = String(v); if (el.getAttribute(a) !== v) el.setAttribute(a, v); }
+function tone(t){ return "var(--" + (/^(term|emph|muted|accent2|series-[1-4])$/.test(t || "") ? t : "term") + ")"; }
+// 箱の地と字の色（m-tree・m-fishbone と同じ決まり）：term と emph はテーマの薄い色の地、emph は字も emph
+function boxFill(t){ return t === "emph" ? "var(--emph-tint)" : /^(muted|accent2|series-[1-4])$/.test(t || "") ? tint(tone(t), 12) : "var(--term-tint)"; }
+function textFill(t){ return t === "emph" ? "var(--emph)" : "var(--fg)"; }
+function tint(c, p){ return "color-mix(in srgb," + c + " " + p + "%,var(--bg))"; }
+// 字の幅（px）：数字 0.6 字、ほかの欧文 0.62 字、空白 0.3 字、和文 1 字。*斜体* の * は数えない
+function est(s, fs){
+  var w = 0;
+  for (var ch of String(s).replace(/\*/g, "")) w += /[0-9]/.test(ch) ? 0.6 : ch === " " ? 0.3 : /[\u0000-ɏ]/.test(ch) ? 0.62 : /[｡-ﾟ]/.test(ch) ? 0.5 : 1;
+  return w * fs;
+}
+// KaTeX の式の幅：一度置いて測る
+function texWidth(el, l){
+  var g = base.el("g", {opacity: 0}, el.svg), fo = MR.texFrame(g, 0, 0, l.src, "tex", {size: l.size, anchor: "start"}, el.texSink);
+  var w = Math.max(0, (+fo.getAttribute("width") || 4) - 4);
+  el.svg.removeChild(g);
+  return w;
+}
+function labelLines(n, size, fill){
+  fill = fill || "var(--fg)";
+  if (n.tex) return [{tex: n.tex, src: n, size: size, fill: fill}];
+  return String(n.label || "").split("\n").map(function(s){ return {text: s, size: size, fill: fill}; });
+}
+// 箱の大きさと行の位置（基線は前の行の下 0.3 字 ＋ 今の行の 1.12 字：字の箱どうしが重ならない）
+function boxSize(el, lines){
+  var w = 0, y = 10, prev = null;
+  lines.forEach(function(l){
+    l.w = l.tex ? texWidth(el, l) : est(l.text, l.size) * (l.weight ? 1.05 : 1);
+    w = Math.max(w, l.w);
+    y += prev ? 0.3 * prev.size + 1.12 * l.size : 0.9 * l.size;
+    l.y = y; prev = l;
+  });
+  return {w: Math.ceil(w + 36), h: Math.ceil(y + 0.28 * prev.size + 10), lines: lines};
+}
+function boxDraw(el, g, x, y, bs){
+  bs.lines.forEach(function(l){
+    if (l.tex) MR.texFrame(g, x + bs.w / 2, y + l.y, l.src, "tex", {size: l.size, anchor: "middle", color: l.fill, w: l.w + 8, h: l.size * 1.6}, el.texSink).firstChild.style.verticalAlign = "top";
+    else base.mtext(g, x + bs.w / 2, y + l.y, l.text, {"text-anchor": "middle", "font-size": l.size, fill: l.fill, "font-weight": l.weight || 400});
+  });
+}
+return Part;
+});

package/vendor/components/sha256/301bd0fc3d9a7e43b555e571de221a1374cee99d5d9dafaf1904135894ca4e3d/CHANGELOG.md

@@ -0,0 +1,19 @@
+# m-collect 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: "collect", version: "2.0.0", requires: {base: "1.0.0", "markup-reader": "1.0.0"}, element: "m-collect"})`,
+  extending `base.MotionElement` with `base.el` / `mtext` / `prog` / `lerp` / `previewOpacity`; `static partName = "collect"`.
+  The DOM is byte-identical to 1.13.0 at every step (tools/test-c2-identity.mjs, with the formulas rendered at build time on the 2.0 side).
+- Formulas are rendered at build time (Egatari spec §6.2), no longer by KaTeX at play time: `static build = {fields: {"targets[].tex": "katex"}, options: {katex: {output: "html"}}}`. The producer adds `texHtml` beside each `tex` and `renderers: {katex: {version, options}}` at the top of the data (the shape now allows both). The part reads `texHtml` through `markup-reader` 1.0.0 (exactly the elements, attributes and style declarations of egatari-spec's `schema/rendered-markup-1.json`; anything else is dropped, an element with its subtree, an attribute or style declaration by itself, and reported at the end of mount once per kind with its count as `ctx.report("data", "[collect] …")`) into the same frame 1.13.0 drew (`foreignObject.smath` with an inline-block `div`), so the formula's DOM is that of 1.13.0's.
+- Without `texHtml` (a file built without the renderer, or after a tier A edit of a `tex`) the `tex` source is shown as plain text in the same frame and reported once with the count: `ctx.report("data", "[collect] N tex field(s) not rendered at build time, e.g. … (the source is shown as text)")` (1.13.0 showed the source as text only when KaTeX was missing).
+- Known differences from 1.13.0, all inside formulas and only through `tex`, as egatari-spec 56ae5da documents (§6.2: colours come only from classes and the theme): the colour of `\color` and `\textcolor`, the background and frame colour of `\colorbox` and `\fcolorbox`, `\pmb`'s shadow, and KaTeX's error colour for untrusted commands are dropped and reported; use `\hlE` `\hlT` `\hlM` (classes, spec §8.0), which are kept. Phantoms (`color: transparent`), boxes and their borders are kept. KaTeX writes `class=""` on some spans and an `<svg>`'s style as text when it draws in the page (1.13.0), and neither when it renders to markup: the identity test compares these as equal (`KATEX_EMPTY_CLASS`, `KATEX_SVG_STYLE`, approved in egatari-spec 56ae5da). The `\htmlClass` `\htmlId` `\htmlData` commands of spec §8.0 now work (1.13.0 drew them as errors: no trust at play time).
+- The preview view is `ctx.preview` alone (1.13.0 also accepted `ctx.mode === "lecture"`).
+- The v1.13.0 demo computed its targets (with their `tex`) in a page script at play time, so there was nothing to render at build time; the demo now writes the same data (same numbers) in the source. `tools/fixtures/c2-identity/collect.html` (that demo) replaces the v1.13.0 demo in the identity test (`c2-identity-replaces-demo`).
+- Ids: none written.
+
+## 1.13.0
+
+As released in the library's 1.13.0.

package/vendor/components/sha256/301bd0fc3d9a7e43b555e571de221a1374cee99d5d9dafaf1904135894ca4e3d/README.md

@@ -0,0 +1,21 @@
+---
+name: m-collect
+version: 2.0.0
+series: academic
+tier: extra
+summary: 並んだ札（回答など）が動いて縮み、少数の箱（要約）にまとまる
+steps: 1
+purposes: grouping
+props: move, stagger, shrink, chip-w, chip-h, box-w, box-h
+---
+
+「8 回の観測が 2 つの事後モーメントに要約される」のように、多くのものが少数の統計量に
+まとまることを見せるときに使う（motion-slides スキル §6「まとまる」）。
+
+子の JSON：`{"chips": [{"label", "to"}], "targets": [{"label", "tex", "value", "tone", "x", "y"}], "cols": 4}`。
+
+- `to` は行き先の番号、または番号の配列（配列なら札の写しがそれぞれの箱へ動く）
+- 札は上の段に `cols` 列で並ぶ。箱は下の段に等間隔（`x`, `y` を書けばその中心）
+- 段階 1 の始めに箱の点線の枠を出し、札が着いてから箱の中身を出す。`data-from` で始まる段階をずらせる
+
+見本は `demo.html`（コイン投げの結果から Beta 事後分布の平均と分散）。

package/vendor/components/sha256/301bd0fc3d9a7e43b555e571de221a1374cee99d5d9dafaf1904135894ca4e3d/demo.html

@@ -0,0 +1,33 @@
+<!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-collect の見本</title>
+<!-- 組み方：node kit/build.mjs components/collect/demo.html -o components/collect/out/demo.html -->
+<style>
+</style>
+</head>
+<body>
+<div id="stage">
+
+<section class="slide">
+  <h2>観測の要約</h2>
+  <div class="body">
+    <p data-step="1">8 回の観測は，事後分布の 2 つのモーメントにまとまる</p>
+    <!-- 見本の数値：8 回のコイン投げ（表なら 1：1 1 0 1 1 0 1 1）から、一様な事前分布 Beta(1,1) のもとでの事後平均 7/10 と事後分散 21/1100。
+         式（tex）は組み立てのときに描く（spec §6.2）ので、データは原稿に書く（再生のときにスクリプトで作ったデータの式は描かれない） -->
+    <m-collect data-from="2" box-w="300" box-h="120" style="height:340px">
+      <script type="application/json">{"cols": 4,
+        "chips": [{"label": "試行 1：表", "to": [0, 1]}, {"label": "試行 2：表", "to": [0, 1]}, {"label": "試行 3：裏", "to": [0, 1]}, {"label": "試行 4：表", "to": [0, 1]},
+                  {"label": "試行 5：表", "to": [0, 1]}, {"label": "試行 6：裏", "to": [0, 1]}, {"label": "試行 7：表", "to": [0, 1]}, {"label": "試行 8：表", "to": [0, 1]}],
+        "targets": [{"label": "事後平均", "tex": "\\mathrm{E}[\\theta\\mid D]", "value": "0.700"},
+                    {"label": "事後分散", "tex": "\\mathrm{Var}[\\theta\\mid D]", "value": "0.0191"}]}</script>
+    </m-collect>
+  </div>
+  <div class="concl"><span>→ 次の予測には，この 2 つの値だけ持てばよい</span></div>
+</section>
+
+</div>
+</body>
+</html>

package/vendor/components/sha256/301bd0fc3d9a7e43b555e571de221a1374cee99d5d9dafaf1904135894ca4e3d/index.js

@@ -0,0 +1,106 @@
+// m-collect：並んだ札（回答など）が動いて縮み、少数の箱（要約）にまとまる
+// <m-collect style="height:400px"><script type="application/json">
+//   {"chips":[{"label":"回答 1","to":[0,1]}, …], "targets":[{"label":"事後平均","tex":"\\mu_n"}, …], "cols":4}
+// （JSON の終わり）</m-collect>
+// 段階 1 で、札 i が targets[to] へ動く（to は番号か番号の配列。配列なら札の写しがそれぞれへ動く）。
+// 箱は始めに点線の枠だけ出し、札が着いてから中身（label / tex / value）を出す
+// 2.0（Egatari spec §6.1 の部品）：base の MotionElement・el・mtext・prog・lerp・previewOpacity を使い、プレイヤーのグローバルは使わない。
+// 式（tex）は組み立てのときに KaTeX で描く（spec §6.2）：build.fields の targets[].tex を作り手が描いて texHtml を足し、
+// この部品は markup-reader で決まった要素と属性だけを読んで置く（再生のときに KaTeX は動かない）。描いた結果がなければ tex を字のまま出して知らせる
+egatariParts.define({name: "collect", version: "2.0.0", requires: {base: "1.0.0", "markup-reader": "1.0.0"}, element: "m-collect"}, function(deps){
+"use strict";
+var base = deps.base, MR = deps["markup-reader"];
+return class extends base.MotionElement {
+  static partName = "collect";   // the registry name (define meta name), for report prefixes
+  // 組み立てのときに描く欄（spec §6.2）。式の意味は字（tex）でも持つので、KaTeX の出力は HTML だけ
+  static build = {fields: {"targets[].tex": "katex"}, options: {katex: {output: "html"}}};
+  // データの形（kit/shape.js）
+  static shape = {
+    schema: {type: "object", additionalProperties: false, required: ["chips", "targets"], properties: {
+      chips: {type: "array", minItems: 1, items: {type: "object", required: ["to"], properties: {label: {type: "string"}, to: {type: ["integer", "array"], items: {type: "integer"}}}}},
+      targets: {type: "array", minItems: 1, items: {type: "object", properties: {label: {type: "string"}, tex: {type: "string"}, texHtml: {type: "string"}, value: {type: ["string", "number"]}, tone: {type: "string"}, x: {type: "number"}, y: {type: "number"}}}},
+      cols: {type: "integer"}, renderers: {type: "object"}}},
+    example: {chips: [{label: "表", to: 0}, {label: "裏", to: 1}], targets: [{label: "表の数"}, {label: "裏の数"}], cols: 2},
+  };
+  static steps = 1;
+  static props = {
+    move:    {type: "number", default: 0.9, doc: "札 1 枚が動く秒数"},
+    stagger: {type: "number", default: 0.08, doc: "札ごとの出発のずれ（秒）"},
+    shrink:  {type: "number", default: 0.35, doc: "着いたときの札の縮尺"},
+    "chip-w": {type: "number", default: 0, doc: "札の幅（0 なら列の数から決める）"},
+    "chip-h": {type: "number", default: 56, doc: "札の高さ"},
+    "box-w":  {type: "number", default: 260, doc: "箱の幅"},
+    "box-h":  {type: "number", default: 110, doc: "箱の高さ"},
+  };
+  mount(ctx){
+    var P = this.props, D = base, self = this, data = this.data || {chips: [], targets: []}, sk = MR.sink(this, ctx);
+    this.style.display = "block";
+    var W = this.clientWidth, H = this.clientHeight;
+    var svg = D.el("svg", {viewBox: "0 0 " + W + " " + H, width: W, height: H, style: "display:block;overflow:visible"}, this);
+    var tone = {term: ["var(--term)", "var(--term-tint)"], emph: ["var(--emph)", "var(--emph-tint)"], muted: ["var(--muted)", "var(--bg)"]};
+    // 札の並び：上の段に cols 列で並べる
+    var C = data.chips || [], n = C.length, cols = data.cols || n, rows = Math.ceil(n / cols), gap = 14;
+    var cw = P["chip-w"] || Math.min(220, (W - gap * (cols - 1)) / cols), ch = P["chip-h"];
+    var gx = (W - (cw * cols + gap * (cols - 1))) / 2;
+    // 箱の並び：下の段に等間隔（x, y を書けばその位置。中心の座標）
+    var T = data.targets || [], bw = P["box-w"], bh = P["box-h"];
+    this.targets = T.map(function(tg, j){
+      var cx = tg.x !== undefined ? tg.x : W * (j + 1) / (T.length + 1), cy = tg.y !== undefined ? tg.y : H - bh / 2 - 4;
+      var c = tone[tg.tone || "emph"] || tone.emph;
+      var frame = D.el("rect", {x: cx - bw / 2, y: cy - bh / 2, width: bw, height: bh, rx: 12, fill: "none", stroke: "var(--line)", "stroke-width": 2, "stroke-dasharray": "8 6", opacity: 0}, svg);
+      var g = D.el("g", {opacity: 0}, svg);
+      D.el("rect", {x: cx - bw / 2, y: cy - bh / 2, width: bw, height: bh, rx: 12, fill: c[1], stroke: c[0], "stroke-width": 3}, g);
+      var hasV = tg.value !== undefined, ly = cy + (hasV ? -16 : 9);
+      if (tg.tex) MR.texFrame(g, cx, ly + 4, tg, "tex", {size: 30, anchor: "middle", color: c[0], w: bw, h: 50}, sk).firstChild.style.verticalAlign = "top";
+      else D.mtext(g, cx, ly, tg.label || "", {"text-anchor": "middle", "font-size": 28, "font-weight": 700, fill: c[0]});
+      if (hasV) D.mtext(g, cx, cy + 38, String(tg.value), {"text-anchor": "middle", "font-size": 24, fill: "var(--fg)"});
+      if (tg.tex && tg.label) D.mtext(g, cx, cy + bh / 2 + 32, tg.label, {"text-anchor": "middle", "font-size": 24, fill: "var(--muted)"});
+      return {frame: frame, g: g, cx: cx, cy: cy, col: c, last: 0};
+    });
+    // 札と、行き先ごとの写し
+    this.chips = [];
+    C.forEach(function(cp, i){
+      var r = Math.floor(i / cols), q = i % cols;
+      var x = gx + q * (cw + gap) + cw / 2, y = 4 + ch / 2 + r * (ch + gap);
+      var to = Array.isArray(cp.to) ? cp.to : [cp.to === undefined ? 0 : cp.to];
+      var start = i * P.stagger;
+      to.forEach(function(j){
+        var tg = self.targets[j]; if (!tg) return;
+        var c = tone[cp.tone || "term"] || tone.term;
+        var g = D.el("g", {}, svg);
+        D.el("rect", {x: -cw / 2, y: -ch / 2, width: cw, height: ch, rx: 8, fill: c[1], stroke: c[0], "stroke-width": 2}, g);
+        D.mtext(g, 0, 9, cp.label || "", {"text-anchor": "middle", "font-size": 24});
+        tg.last = Math.max(tg.last, start + P.move);
+        self.chips.push({g: g, x0: x, y0: y, x1: tg.cx, y1: tg.cy, start: start});
+      });
+    });
+    this.rows = rows;
+    sk.flush();   // what the formulas have to report, once per kind (spec §6.2)
+  }
+  duration(k){ var d = 0; this.targets.forEach(function(tg){ d = Math.max(d, tg.last + 0.3); }); return k >= 1 ? d : 0; }
+  render(k, t, ctx){
+    var P = this.props, D = base;
+    var T = k < 1 ? -Infinity : t;   // 段階 0 は動く前
+    // 先の段階を薄く見せる表示（授業の表示）：段階 0 では、まとめた後の箱をテーマの --preview-opacity の濃さで出す（札は動かさない）
+    var PV = 0;
+    if (k < 1 && ctx.preview) PV = base.previewOpacity(this);
+    var pr = function(start, dur){ return T === -Infinity ? 0 : D.prog(T, start, dur); };
+    this.chips.forEach(function(c){
+      var e = pr(c.start, P.move);
+      // 少し持ち上げてから落ちる弧（中点で上へ 40px）
+      var x = D.lerp(c.x0, c.x1, e), y = D.lerp(c.y0, c.y1, e) - Math.sin(Math.PI * e) * 40;
+      var s = D.lerp(1, P.shrink, e), op = e < 0.75 ? 1 : 1 - (e - 0.75) / 0.25;
+      c.g.setAttribute("transform", "translate(" + x.toFixed(2) + " " + y.toFixed(2) + ") scale(" + s.toFixed(4) + ")");
+      c.g.setAttribute("opacity", op.toFixed(3));
+    });
+    this.targets.forEach(function(tg){
+      tg.frame.setAttribute("opacity", (pr(0, 0.3) * (1 - pr(tg.last - 0.1, 0.3))).toFixed(3));
+      var e = pr(tg.last - 0.15, 0.45);
+      if (PV){ e = 1; tg.g.setAttribute("opacity", PV.toFixed(3)); }
+      else tg.g.setAttribute("opacity", e.toFixed(3));
+      var s = D.lerp(0.9, 1, e);
+      tg.g.setAttribute("transform", "translate(" + tg.cx + " " + tg.cy + ") scale(" + s.toFixed(4) + ") translate(" + (-tg.cx) + " " + (-tg.cy) + ")");
+    });
+  }
+};
+});

package/vendor/components/sha256/3148735986450083484a145f9399e146b3f27efc0efd75ea1c02e1fa8ef01d36/README.md

@@ -0,0 +1,49 @@
+---
+name: m-timeline
+series: common
+summary: 年表。出来事を時間の軸の上に 1 つずつ出す。期間は帯にして、重なる期間は段を分けて積む。end は含まない（"1912" は 1912 年の初め）
+steps: 出来事の数（既定は時刻の順に 1 つ = 1 段階。per-step で n 個ずつ、node の step が優先）
+purposes: timeline
+variants: fade, draw, grow
+props: orient, scale, per-step, size, dur, stagger
+---
+
+歴史の年表、人物の生涯の重なり、計画の日程など、出来事を時間の順に見せるときに使う。
+座標は書かない。中身と時刻だけを書けば、部品が並べる（[共通の決まり](../../docs/conventions.ja.md) §2）。
+
+子の JSON：`{"nodes": [...], "edges": [...]}`（`edges` は省ける）。
+
+- `when`：時刻。数（`1868`、`-500`、`0.5` など）か、文字列 `"YYYY"` `"YYYY-MM"` `"YYYY-MM-DD"`。箱の上の行に日付として出る（日本語の資料なら「1868年」「2026年10月」）
+- `whenLabel`：日付の行に、計算した日付の代わりに書く字（「明治元年」「平成の終わり」など）。位置は `when` で決まる
+- `label`：名前（`\n` で改行、`*斜体*` `_下付き` `^上付き`）。または `tex`（KaTeX）
+- `note`：箱の**中**の最後の行に小さく（`--muted`）。期間と節目では名前の後ろに続けて。例：「2 月 11 日」「新橋〜横浜」
+- `tone`：`term`（既定）・`emph`・`muted`・`accent2`・`series-1..4`。`emph` の箱は地が `--emph-tint`、枠と字が `--emph`
+- `end`：あれば期間。軸の下の段に帯で描き、名前は帯の中（入らなければ帯の右か左）に書く。名前を `\n` で何行かにすると、帯がその分太くなる
+- `end` は含まない（終わりの時点）。`"1912"` は 1912 年の初め。明治 1868–1912 と大正 1912–1926 は同じ段に並ぶ。12 月まで含めるなら次の月（`"2027-01"`）を書く。
+- `lane`：期間を名前の付いた段のまとまりに分ける（「時代」「作家」「設計」など）。まとまりの名前を左に書き、まとまりの間に薄い線を引く。重なる期間は、まとまりの中で自動で別の段に積む。`end` のない node に `lane` を書くと、その段の中の節目（◆）になる
+- `step`・`at`：出る段階と、段階の中の開始秒
+- `edges`：ほかのつながり（`from` `to` `label` `tone` `dash` `step`）。箱の縁から縁への破線の矢印（`dash: false` で実線）
+
+並べ方：
+
+- `orient`：`h`（既定、左から右へ）か `v`（上から下へ）
+- `scale`：`time`（既定、時間に比例した間隔）か `even`（使った時刻を等間隔に。間がとても不ぞろいなとき）
+- 出来事（`end` も `lane` もない node）は軸の上の点と、日付と名前の箱。箱は軸の上と下に交互に置く（`v` なら左と右）。混んでいて箱が点から離れすぎるときは 2 段にする
+- 期間があるときは、軸に切りのよい目盛り（年・月・数）を付け、出来事の箱はすべて軸の上に置く（下は期間の段）
+- 段階：既定は時刻の順に 1 つずつ（期間も出来事も同じ列で数える）。軸は最初の出来事と一緒に引かれる
+- 線：軸は `--muted` の 5 px（図の中心の線として 1 本だけ太い）。軸の目盛りと目盛りの字（図の字の大きさ）も `--muted`。段のまとまりの間の区切りの線だけ `--line`。箱から軸への線と `edges` は `--muted` の 3 px
+- 見せ方（`variant`）：`fade`（既定。箱が軸の側から 12 px 寄りながら現れてから軸からの線を引く。帯も軸の側から 12 px 寄りながら現れる）・`draw`（軸からの線を先に引き、その先に箱が軸の側から 12 px 寄りながら出る。帯は始まりから終わりへ線のように引く）・`grow`（箱が軸の側から 12 px 寄りながら 0.92 倍から大きくなる。帯は両端が 12 px ずつ伸びる）。書かなければ資料のシード値（`data-egatari-seed`）で選ばれる。どれも段階の数・長さ・最後の形は同じ
+- 動きの上限：どの見せ方でも箱が動くのは 12 px まで（箱の中心で測る）、時間も `fade` の長さの中（共通の決まり §1.2）
+- 授業の表示（`?mode=lecture`）：後の段階の出来事・期間を薄く（0.45）見せる
+- `cues(k)`：同じ段階に 2 つ以上あれば、2 つ目からの開始時刻を返す（口述原稿の `{cue}` に合わせられる）
+
+見本は `demo.html`（明治のおもな出来事、明治・大正の作家の生涯、見せ方の種類）。年はどれも広く知られた史実。
+
+<!-- llm: omit -->
+注意
+
+- 箱の幅と目盛りの字の幅は字数から見積もる（和文 1 字、数字 0.6 字、ほかの欧文 0.62 字）。字の読み込みを待たずに決まる
+- 入らないときは名前の字を `size` から 2px ずつ 24px まで縮め、それでも入らなければ `console.warn` で知らせる（字は 24px より小さくしない）
+- 日付の計算に `Date` は使わない（うるう年も自前で数える）。月と日は年の中の位置にして時間の軸に置く
+- 帯の名前は帯と同じ `g` の中に置く（試験の「箱に近い字」の確かめは、その箱の中の字を除く）
+<!-- llm: end -->