egatari 0.0.0-stage → 0.6.4

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

@@ -0,0 +1,313 @@
+// m-predict：予想してから答えを開く。問いと選択肢、クラスの数（手を挙げた人数）を選択肢ごとの棒で見せ、作者の書いた段階で答えを開く
+// <m-predict unit="人" style="height:440px"><script type="application/json">
+//   {"question": "重い球と軽い球、どちらが先に落ちる？",
+//    "choices": [{"label": "重い球"}, {"label": "軽い球"}, {"label": "同時"}],
+//    "answer": 2, "counts": [14, 3, 9], "note": "空気の抵抗を除けば、重さによらず同時に落ちる（ガリレオ）"}
+// （JSON の終わり）</m-predict>
+// 段階：0 = 問いと選択肢（と目盛り）。1 = 数の棒。answer-step（既定 2）= 答え（正しい選択肢に枠と ✓、ほかは薄く、note）
+// 見る人の入力（仕様 §8.4「Viewer input」、Studio の約束事 §3）：選択肢ごとの −1・＋1 と数の欄（発表者が数える）、選択肢の名前を押すと「自分の予想」。
+//   入力は (i, k, t) の外で、同じスライドにいるあいだは（段階を進めても戻っても）残る。ほかのスライドから入ったとき・飛んだとき（ctx.entered）だけ作者の counts に戻る。
+//   ctx.reset（触った部品を段階に入るときに戻す）では、触った跡（欄やボタンのフォーカス）だけを戻し、数と予想は残す（仕様 §8.4）
+//   動画（?mode=video）では操作を作らず、input() も受け付けない。印刷では操作を隠し、作者の数を字で出す
+// live（拡張 live §2.5）：poll="p1" と書き、ctx.live があれば ctx.live.poll("p1") の数（number[] | null）を棒に出す。
+//   見せてよいか（先生が見せると決めたか、3 人以上か）は実行系が決める。部品は配列が来たときだけ出し、動画・印刷では出さない
+// 見せ方（docs/conventions.md §1）：fade（0。棒と答えの印がフェードして現れる）・draw（棒が上の選択肢から順に現れ、答えの枠を線で引く。長さは同じ）
+// 2.0（Egatari spec §6.1 の部品）：base の MotionElement・el・mtext・prog・variant を使い、プレイヤーのグローバルは使わない。
+//   見る人の入力を戻すのは ctx.entered だけ（1.x の deck:pos の代わりはない）。動画かどうかは mount の ctx.mode。
+//   要素の大きさの問題は ctx.report("size", …)。印刷の前後は document.defaultView の beforeprint・afterprint
+egatariParts.define({name: "predict", version: "2.0.0", requires: {base: "1.0.0"}, element: "m-predict"}, function(deps){
+"use strict";
+var base = deps.base;
+var CSS_ID = "predict-2-0-0-css";   // the style element this part writes, named with its name and version (spec §6.1 Identifiers)
+var CSS = [
+  "m-predict .pd-say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}",
+  "m-predict .pd-pick{position:absolute;background:transparent;border:0;border-radius:10px;cursor:pointer;padding:0;margin:0}",
+  "m-predict .pd-pick:focus-visible,m-predict .pd-btn:focus-visible,m-predict .pd-num:focus-visible{outline:3px solid var(--emph);outline-offset:2px}",
+  "m-predict .pd-ctl{position:absolute;display:flex;gap:8px;align-items:center;height:48px}",
+  "m-predict .pd-btn{width:60px;height:48px;font:700 27px/1 var(--font-cap,var(--font-sans,sans-serif));color:var(--fg);background:var(--bg);border:2px solid var(--term);border-radius:8px;cursor:pointer;padding:0;touch-action:manipulation}",
+  "m-predict .pd-btn:active{background:var(--term-tint)}",
+  "m-predict .pd-num{width:80px;height:48px;box-sizing:border-box;font:700 27px/1 var(--font-cap,var(--font-sans,sans-serif));font-variant-numeric:tabular-nums;text-align:center;color:var(--fg);background:var(--bg);border:2px solid var(--muted);border-radius:8px;padding:0}",
+  "@media print{m-predict .pd-ctl,m-predict .pd-pick,m-predict .pd-mark,m-predict .pd-live{display:none!important}}",
+].join("\n");
+return class extends base.MotionElement {
+  static partName = "predict";   // the registry name (define meta name), for report prefixes
+  static variants = ["fade", "draw"];
+  static interactive = true;   // 操作できるパーツ（docs/conventions.md §6）
+  static viewerInput = true;   // 見る人の入力を受け付ける（仕様 §8.4）
+  static preview = "none";     // 先の段階は答えなので、授業の表示でも先を見せない（仕様 §8.4、docs/conventions.md §1.2）
+  // データの形（kit/shape.js）
+  static shape = {
+    schema: {type: "object", additionalProperties: false, required: ["choices", "answer"], properties: {
+      question: {type: "string"},
+      choices: {type: "array", minItems: 2, maxItems: 6, items: {type: "object", additionalProperties: false, required: ["label"], properties: {
+        label: {type: "string"}, tone: {type: "string"}}}},
+      answer: {type: "integer"},
+      counts: {type: "array", items: {type: "integer"}},
+      note: {type: "string"}}},
+    example: {question: "重い球と軽い球、どちらが先に落ちる？", choices: [{label: "重い球"}, {label: "軽い球"}, {label: "同時"}], answer: 2, counts: [14, 3, 9], note: "空気の抵抗を除けば同時に落ちる"},
+    note: {en: "choices are objects {\"label\": …} (not strings); answer is the 0-based index of the right choice; counts (optional) has one whole number ≥ 0 per choice",
+           ja: "choices は {\"label\": …} の並び（字の並びではない）。answer は正しい選択肢の番号（0 から数える）。counts（省略可）は選択肢ごとに 0 以上の整数を 1 つずつ"},
+  };
+  static props = {
+    "answer-step": {type: "number", default: 2, doc: "答えを開く段階（1 以上。1 なら数の棒と同時）"},
+    unit:          {type: "string", default: "", doc: "数の単位（人 など）"},
+    poll:          {type: "string", default: "", doc: "live の投票の id（live 拡張のある再生で、見せてよいと決まった集計を棒に出す）"},
+    ticks:         {type: "bool", default: true, doc: "数の軸の目盛りと格子"},
+  };
+  get aStep(){ return Math.max(1, Math.round(this.props["answer-step"]) || 2); }
+  get steps(){ return this.getAttribute("steps") !== null ? +this.getAttribute("steps") : this.aStep; }
+  // 作者の数（counts。書かなければ全部 0）
+  get author(){
+    var d = this.data || {}, n = (d.choices || []).length;
+    return Array.from({length: n}, function(_, i){ var v = d.counts && d.counts[i]; return Number.isInteger(v) && v > 0 ? v : 0; });
+  }
+  mount(ctx){
+    var self = this, P = this.props, D = base, d = this.data || {}, ch = d.choices || [], n = ch.length;
+    if (!(d.answer >= 0 && d.answer < n)) throw new Error("answer " + d.answer + " is not a choice index (0–" + (n - 1) + ")");
+    if (d.counts && d.counts.length !== n) throw new Error("counts has " + d.counts.length + " numbers for " + n + " choices");
+    if (d.counts && d.counts.some(function(v){ return v < 0; })) throw new Error("counts must be 0 or more");
+    this.variant = base.variant(this);
+    this.video = ctx.mode === "video";
+    this.style.display = "block"; this.style.position = "relative";
+    if (!document.getElementById(CSS_ID)){ var st = document.createElement("style"); st.id = CSS_ID; st.textContent = CSS; document.head.appendChild(st); }
+    var W = this.clientWidth, H = this.clientHeight, inter = !this.video;
+    var est = function(s, size){ return [...String(s)].reduce(function(a, c){ return a + (/[\u0000-ɏ]/.test(c) ? 0.56 : 1); }, 0) * size; };
+    // 縦：問い・行・目盛り・注（と予想の当たり外れ）
+    var qh = d.question ? 54 : 0, nh = d.note || inter ? 50 : 0, tb = P.ticks ? 40 : 8;
+    var rh = Math.min(88, (H - qh - nh - tb) / n);
+    if (inter && rh < 54) ctx.report("size", "[predict] rows are " + rh.toFixed(0) + " px high; the −1/+1 buttons need 54 (make the element taller or use fewer choices)");
+    // 横：予想の印・選択肢の名前・棒・数と「正解」・操作
+    var mk = inter ? 40 : 0, LS = 26;
+    var lw = Math.min(W * 0.34, Math.max.apply(null, ch.map(function(c){ return est(c.label, LS); })) + 16);
+    var cw = inter ? 232 : 0;
+    var valW = est("9999" + P.unit, 26) + 12, okW = est("✓ 正解", 26) + 16;
+    this.g = {W: W, H: H, qh: qh, nh: nh, rh: rh, mk: mk, lw: lw, cw: cw,
+      x0: mk + lw + 8, x1: W - cw - valW - okW - 8, y0: qh, y1: qh + rh * n};
+    var G = this.g;
+    var svg = this.svg = D.el("svg", {viewBox: "0 0 " + W + " " + H, width: W, height: H, style: "display:block;overflow:visible"}, this);
+    var fitText = function(el, s, max, size, what){
+      var z = size;
+      while (z > 24 && est(s, z) > max) z--;
+      if (est(s, z) > max) ctx.report("size", "[predict] the " + what + " does not fit (" + Math.ceil(est(s, z) - max) + " px too wide at 24 px); shorten it");
+      el.setAttribute("font-size", z);
+      return el;
+    };
+    if (d.question) fitText(D.mtext(svg, 0, 36, d.question, {"font-size": 30, "font-weight": 700}), d.question, W - 8, 30, "question");
+    // 答えの枠（行の後ろ）
+    this.frame = D.el("rect", {x: 2, y: 0, width: Math.max(0, W - cw - 12), height: rh - 8, rx: 10, fill: "none", stroke: "var(--emph)", "stroke-width": 3, opacity: 0}, svg);
+    this.frameLen = 2 * (W - cw - 12 + rh - 8);
+    // 目盛り（数の軸の上限は数で決まるので、render で置き直す。入れ物は先に作る）
+    var gT = D.el("g", {}, svg);
+    this.ticks = !P.ticks ? [] : Array.from({length: 8}, function(){
+      return {grid: D.el("line", {stroke: "var(--line)", "stroke-width": 1.2, y1: G.y0 + 4, y2: G.y1}, gT),
+              text: D.el("text", {"font-size": 24, "text-anchor": "middle", y: G.y1 + 30, style: "font-variant-numeric:tabular-nums"}, gT)};
+    });
+    if (P.ticks){ var z = D.el("text", {"font-size": 24, "text-anchor": "middle", x: G.x0, y: G.y1 + 30}, gT); z.textContent = "0"; }
+    D.el("line", {x1: G.x0, y1: G.y0 + 4, x2: G.x0, y2: G.y1, stroke: "var(--fg)", "stroke-width": 1.5}, svg);
+    var bw = Math.min(46, rh * 0.56);
+    this.rows = ch.map(function(c, i){
+      var cy = G.y0 + rh * (i + 0.5), col = tone(c.tone);
+      var r = {cy: cy, col: col,
+        mark: inter ? D.el("circle", {cx: 16, cy: cy, r: 11, fill: "none", stroke: "var(--term)", "stroke-width": 2.5, "class": "pd-mark"}, svg) : null,
+        dot: inter ? D.el("circle", {cx: 16, cy: cy, r: 6, fill: "var(--term)", opacity: 0, "class": "pd-mark"}, svg) : null,
+        bar: D.el("rect", {x: G.x0, y: (cy - bw / 2).toFixed(1), height: bw.toFixed(1), rx: 3, fill: col, opacity: 0}, svg),
+        label: fitText(D.mtext(svg, mk + lw, cy + 9, c.label, {"text-anchor": "end", "font-size": LS}), c.label, lw - 8, LS, "label " + JSON.stringify(c.label)),
+        val: D.el("text", {"font-size": 26, "font-weight": 700, y: (cy + 9).toFixed(1), opacity: 0, style: "font-variant-numeric:tabular-nums"}, svg)};
+      if (i === d.answer) r.ok = D.el("text", {"font-size": 26, "font-weight": 700, y: (cy + 9).toFixed(1), fill: "var(--emph)", opacity: 0}, svg);
+      if (r.ok) r.ok.textContent = "✓ 正解";
+      return r;
+    });
+    this.bw = bw;
+    // 注（答えと一緒に）と、予想の当たり外れ（見る人が予想したときだけ）
+    this.noteEl = D.el("text", {x: 0, y: H - 14, "font-size": 26, opacity: 0}, svg);
+    this.noteText = d.note || "";
+    if (d.note) fitText(this.noteEl, "予想ははずれ。" + d.note, W - 8, 26, "note");
+    // live の集計の見出し（集計を出すときだけ）
+    this.liveEl = D.el("text", {x: W, y: G.y1 + 30, "font-size": 24, "text-anchor": "end", opacity: 0, "class": "pd-live"}, svg);
+    this.liveEl.textContent = "投票の結果";
+    // 読み上げソフトへの知らせ
+    this.say = document.createElement("div"); this.say.className = "pd-say"; this.say.setAttribute("role", "status"); this.say.setAttribute("aria-live", "polite");
+    this.appendChild(this.say);
+    if (d.question) this.setAttribute("aria-label", d.question);
+    // 操作：選択肢の名前（自分の予想）、−1・数の欄・＋1。動画では作らない
+    if (inter){
+      var mkEl = function(tag, cls, attrs){ var e = document.createElement(tag); e.className = cls; for (var a in attrs) e.setAttribute(a, attrs[a]); self.appendChild(e); return e; };
+      var unit = P.unit;
+      this.rows.forEach(function(r, i){
+        var top = r.cy - 24;
+        r.pick = mkEl("button", "pd-pick", {type: "button", "aria-pressed": "false", "aria-label": "予想：" + ch[i].label});
+        Object.assign(r.pick.style, {left: "0px", top: (r.cy - rh / 2 + 4) + "px", width: (mk + lw) + "px", height: (rh - 8) + "px"});
+        r.pick.addEventListener("click", function(e){ e.stopPropagation(); self.choose(i); });
+        var ctl = r.ctl = mkEl("div", "pd-ctl", {role: "group", "aria-label": ch[i].label + "の数"});
+        Object.assign(ctl.style, {left: (W - cw + 16) + "px", top: top + "px"});
+        var bt = function(txt, dlt, lab){
+          var b = document.createElement("button"); b.type = "button"; b.className = "pd-btn"; b.textContent = txt; b.setAttribute("aria-label", ch[i].label + "：" + lab);
+          b.addEventListener("click", function(e){ e.stopPropagation(); self.bump(i, dlt); });
+          b.addEventListener("keydown", function(e){ self.key(e, i, false); });
+          return b;
+        };
+        ctl.appendChild(bt("−1", -1, "1 減らす"));
+        var f = r.field = document.createElement("input");
+        f.type = "text"; f.className = "pd-num"; f.setAttribute("inputmode", "numeric"); f.setAttribute("autocomplete", "off");
+        f.setAttribute("aria-label", ch[i].label + "の数" + (unit ? "（" + unit + "）" : ""));
+        f.addEventListener("keydown", function(e){ self.key(e, i, true); });
+        f.addEventListener("input", function(){
+          var s = f.value.replace(/[^0-9]/g, "").slice(0, 4);
+          if (s !== f.value) f.value = s;
+          self.set(i, s === "" ? 0 : +s);
+        });
+        f.addEventListener("change", function(){ f.value = String(self.counts()[i]); });
+        ctl.appendChild(f);
+        ctl.appendChild(bt("+1", 1, "1 増やす"));
+      });
+      // 印刷は作者の値で描く（画面の数は消さない。afterprint で戻す）。beforeprint・afterprint は文書の窓（document.defaultView）に来る
+      var view = document.defaultView;
+      if (view){
+        view.addEventListener("beforeprint", function(){ self._printing = true; self.redraw(); });
+        view.addEventListener("afterprint", function(){ self._printing = false; self.redraw(); });
+      }
+    }
+    function tone(t){ return /^(term|emph|muted|accent2|fg|series-[1-4])$/.test(t || "") ? "var(--" + t + ")" : "var(--term)"; }
+  }
+  // ---- 見る人の状態（(i, k, t) の外）
+  // 今の数（見る人が変えていればその値、そうでなければ作者の値）。新しい配列を返す
+  counts(){ return (this._vc || this.author).slice(); }
+  // 発表者の画面から（Studio が呼ぶ）：choice は 0 から数える選択肢の番号、count は新しい数（0 以上の整数）
+  input(choice, count){
+    if (this.video) return;
+    var n = this.author.length;
+    if (!Number.isInteger(choice) || choice < 0 || choice >= n || !Number.isInteger(count) || count < 0 || count > 9999){
+      console.warn("[predict] input(" + JSON.stringify(choice) + ", " + JSON.stringify(count) + ") ignored (choice 0–" + (n - 1) + ", count a whole number 0–9999)");
+      return;
+    }
+    this.set(choice, count);
+  }
+  bump(i, dl){ this.set(i, this.counts()[i] + dl); }
+  set(i, v){
+    if (this.video || !this.rows) return;
+    v = Math.max(0, Math.min(9999, v));
+    var c = this.counts();
+    if (c[i] === v) return;
+    c[i] = v; this._vc = c;
+    this.redraw();
+    this.say.textContent = this.data.choices[i].label + "：" + v + this.props.unit;
+    this.emit();
+  }
+  // 自分の予想（1 つ。もう一度押すと外す）
+  choose(i){
+    if (this.video) return;
+    var d = this.data;
+    this._pick = this._pick === i ? null : i;
+    this.redraw();
+    var lab = d.choices[i].label;
+    this.say.textContent = this._pick === null ? "予想を外しました" : this.revealed() ? (i === d.answer ? "当たり：" + lab : "はずれ。答えは " + d.choices[d.answer].label) : "あなたの予想：" + lab;
+  }
+  revealed(){ return this._k !== undefined && this._k >= this.aStep; }
+  key(e, i, field){
+    var k = e.key, up = k === "+" || k === "ArrowUp" || (!field && k === "ArrowRight"), dn = k === "-" || k === "−" || k === "ArrowDown" || (!field && k === "ArrowLeft");
+    if (up || dn){ e.preventDefault(); e.stopPropagation(); this.bump(i, up ? 1 : -1); return; }
+    if (field){
+      // 欄の中のキー（数字・矢印・Space など）はスライドを動かさない。Esc で欄を出る
+      e.stopPropagation();
+      if (k === "Escape" || k === "Enter") e.target.blur();
+    }
+  }
+  emit(){ this.dispatchEvent(new CustomEvent("egatari-input", {bubbles: true, detail: {counts: this.counts()}})); }
+  // 見る人の状態を捨てて作者の値に戻す。数を変えていたら知らせる
+  reset(){
+    var had = !!this._vc;
+    if (!had && this._pick == null) return false;
+    this._vc = null; this._pick = null;
+    if (had) this.emit();
+    return true;
+  }
+  // 触った跡だけを戻す（ctx.reset）：部品の中のフォーカスを外す（欄は今の数を出し直す）。数と予想（見る人の入力）は残す
+  untouch(){
+    var a = document.activeElement;
+    if (a && a !== this && this.contains(a) && a.blur) a.blur();
+  }
+  // 入力のあとの描き直し：最後の (k, t) で paint だけを呼ぶ（render を通さないので、ctx.entered・ctx.reset を繰り返さない）
+  redraw(){ if (this._k !== undefined) this.paint(this._k, this._t, this._ctx); }
+  duration(k){
+    var a = this.aStep, d = 0;
+    if (k === 1) d = 0.6;
+    if (k === a) d += 0.6;
+    return d;
+  }
+  render(k, t, ctx){
+    // ほかのスライドから入ったとき・飛んだとき（ctx.entered）だけ、見る人の状態を捨てる。同じスライドの中の段階の移りでは残す。
+    // ctx.reset（触った部品が段階に入るとき）は触った跡だけを戻し、見る人の入力は消さない（仕様 §8.4）
+    if (ctx.entered === true) this.reset();
+    if (ctx.reset) this.untouch();
+    this._k = k; this._t = t; this._ctx = {mode: ctx.mode, preview: ctx.preview, live: ctx.live};
+    this.paint(k, t, this._ctx);
+  }
+  // (k, t) と見る人の状態の絵。ctx は {mode, preview, live}
+  paint(k, t, ctx){
+    var self = this, P = this.props, D = base, G = this.g, dd = this.data, n = this.rows.length, vr = this.variant;
+    var a = this.aStep;
+    // 数：live の集計（実行系が見せてよいと渡したときだけ）→ 見る人の数 → 作者の数
+    var live = null;
+    if (P.poll && ctx && ctx.live && typeof ctx.live.poll === "function" && !this.video && !this._printing){
+      var lv = ctx.live.poll(P.poll);
+      if (Array.isArray(lv)) live = Array.from({length: n}, function(_, i){ var v = +lv[i]; return isFinite(v) && v > 0 ? Math.round(v) : 0; });
+    }
+    var c = live || (this._printing ? this.author : this.counts()), pick = this._printing ? null : this._pick;
+    // 段階 1 の棒（draw は上から順に、同じ長さの中で）、答えの段階
+    // 先の段階は授業の表示（ctx.preview）でも見せない：予想する前に棒や答えが見えてはいけない（static preview = "none"）
+    var e1 = k > 1 ? 1 : k < 1 ? 0 : null;
+    var at1 = 0, ea = k > a ? 1 : k < a ? 0 : D.prog(t, a === 1 ? 0.6 : 0, 0.6);
+    var rowE = function(j){
+      if (e1 !== null) return e1;
+      if (vr === "draw"){ var s = n > 1 ? 0.3 / (n - 1) : 0; return D.prog(t, at1 + j * s, 0.3); }
+      return D.prog(t, at1, 0.6);
+    };
+    // 数の軸
+    var M = nice(Math.max(4, Math.max.apply(null, c)) * 1.12), len = G.x1 - G.x0, X = function(v){ return G.x0 + Math.min(v, M) / M * len; };
+    var ts = Math.max(1, tickStep(M)), ti = 0;
+    this.ticks.forEach(function(o, j){
+      var v = (j + 1) * ts, on = v <= M + 1e-9;
+      o.grid.setAttribute("x1", X(v).toFixed(1)); o.grid.setAttribute("x2", X(v).toFixed(1));
+      o.text.setAttribute("x", X(v).toFixed(1)); o.text.textContent = on ? String(v) : "";
+      o.grid.setAttribute("opacity", on ? 0.8 : 0); o.text.setAttribute("opacity", on ? 1 : 0);
+    });
+    var shown = ea > 0.5;
+    this.rows.forEach(function(r, j){
+      var e = rowE(j), isA = j === dd.answer, dim = isA ? 1 : 1 - 0.65 * ea;
+      r.bar.setAttribute("width", Math.max(0, X(c[j]) - G.x0).toFixed(1));
+      r.bar.setAttribute("opacity", (e * dim).toFixed(3));
+      r.val.textContent = self.fmt(c[j]);
+      r.val.setAttribute("x", (X(c[j]) + 10).toFixed(1));
+      r.val.setAttribute("opacity", e.toFixed(3));
+      // 答えを開いたら、ほかの選択肢の字は --muted（読める濃さのまま）
+      var txt = !isA && shown ? "var(--muted)" : "var(--fg)";
+      r.val.style.fill = txt; r.label.style.fill = txt;
+      r.label.setAttribute("font-weight", isA && shown ? 700 : 400);
+      if (r.ok){ r.ok.setAttribute("x", (X(c[j]) + 10 + est(self.fmt(c[j]), 26) + 14).toFixed(1)); r.ok.setAttribute("opacity", ea.toFixed(3)); }
+      if (r.dot){ r.dot.setAttribute("opacity", pick === j ? 1 : 0); r.pick.setAttribute("aria-pressed", pick === j ? "true" : "false"); }
+      if (r.ctl){
+        r.ctl.style.display = k >= 1 && !live ? "" : "none";
+        if (document.activeElement !== r.field) r.field.value = String(c[j]);
+      }
+    });
+    // 答えの枠：fade はフェード、draw は線を引く（同じ長さ）
+    var fy = G.y0 + G.rh * dd.answer + 4;
+    this.frame.setAttribute("y", fy.toFixed(1));
+    if (vr === "draw" && ea > 0 && ea < 1){ this.frame.setAttribute("stroke-dasharray", this.frameLen.toFixed(0)); this.frame.setAttribute("stroke-dashoffset", (this.frameLen * (1 - ea)).toFixed(1)); this.frame.setAttribute("opacity", 1); }
+    else { this.frame.removeAttribute("stroke-dasharray"); this.frame.removeAttribute("stroke-dashoffset"); this.frame.setAttribute("opacity", ea.toFixed(3)); }
+    // 注と、予想の当たり外れ
+    var pk = pick, st = pk != null && k >= a ? (pk === dd.answer ? "予想は当たり。" : "予想ははずれ。") : "";
+    this.noteEl.textContent = (k >= a ? st : "") + this.noteText;
+    this.noteEl.setAttribute("opacity", ea.toFixed(3));
+    this.liveEl.setAttribute("opacity", live && k >= 1 ? 1 : 0);
+    // 答えを開いた段階に入ったら知らせる（入力の知らせは set・choose が後から書く）
+    if (this._sayK !== k && !this.video){ this._sayK = k; this.say.textContent = k >= a ? "答え：" + dd.choices[dd.answer].label + (this.noteText ? "。" + this.noteText : "") : ""; }
+    function est(s, size){ return [...String(s)].reduce(function(a, c){ return a + (/[\u0000-ɏ]/.test(c) ? 0.56 : 1); }, 0) * size; }
+    function nice(v){ var e = Math.pow(10, Math.floor(Math.log10(v))), x = v / e;
+      return [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].filter(function(s){ return s >= x - 1e-9; })[0] * e; }
+    function tickStep(M){ var r = M / 4.5, e = Math.pow(10, Math.floor(Math.log10(r))), x = r / e;
+      return Math.round((x <= 1 ? 1 : x <= 2 ? 2 : x <= 2.5 ? 2.5 : x <= 5 ? 5 : 10) * e); }
+  }
+  fmt(v){ return String(v).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + this.props.unit; }
+};
+});

package/vendor/components/sha256/2ec8a9acdf58b641dbda9a31643e1c9f77d4e386ce654a58971e3ba6e5530455/CHANGELOG.md

@@ -0,0 +1,32 @@
+# m-cycle changelog
+
+The part's own versions (Egatari spec §6.1). Releases of the whole library are in the repository's CHANGELOG.md.
+
+## 2.0.2 (components 2.1.2)
+
+- Fix: an edge label was centred on its own line, so it straddled a vertical line and the centre name; it is now placed beside the line, clear of the boxes and the centre name, and `layout` is reported when there is no clear place.
+- Fix: a box at 12 or 6 o'clock wider than the element was not checked; it now makes the layout fail and `size` is reported.
+- Fix: a size below 24 was used as written, and a size that is not a number never stopped shrinking; a size below 24 is now 24, a non-number is the default 26, and both report `attr`.
+- Fix: the element had no role or accessible name, and screen readers read the raw svg text; it now has role="img" and an aria-label that states the final state in one sentence (the centre name, the stages in order and the other links). An author's aria-label is kept, and the svg is aria-hidden.
+
+## 2.0.1 (components 2.0.0)
+
+- Render writes an attribute only when its value changes (the 1.13.1 fix): writing the same value again made Chrome repaint, and on macOS re-entering a step moved two pixels. The DOM at every step is unchanged (tools/test-cycle-rewrite.mjs).
+
+## 2.0.0 (components 2.0.0-rc.1)
+
+- Moved to `egatariParts.define({name: "cycle", version: "2.0.0", requires: {base: "1.0.0", "markup-reader": "1.0.0"}, element: "m-cycle"})`,
+  extending `base.MotionElement` with `base.el` / `mtext` / `prog` / `lerp` / `variant` / `previewOpacity`; `static partName = "cycle"`. The embedded variant block is gone (`base.variant`).
+  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: {"nodes[].tex": "katex", "center.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", "[cycle] …")`) 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", "[cycle] 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).
+- An edge to an unknown node is reported with `ctx.report("data", "[cycle] …")` from mount (1.13.0: `console.warn` while planning the steps), and a cycle that does not fit even at 24 px with `ctx.report("size", "[cycle] …")`.
+- The internal method `layout(size)` is renamed `arrange(size)`: in 2.0 `layout(ctx)` is the player's optional method (spec §8.4), which base calls with a ctx.
+- The preview view is `ctx.preview` alone (1.13.0 also accepted `ctx.mode === "lecture"`).
+- Identity fixture `tools/fixtures/c2-identity/cycle.html` (the v1.13.0 demo has no `tex`).
+- Ids: none written.
+
+## 1.13.0
+
+As released in the library's 1.13.0.

package/vendor/components/sha256/2ec8a9acdf58b641dbda9a31643e1c9f77d4e386ce654a58971e3ba6e5530455/README.md

@@ -0,0 +1,43 @@
+---
+name: m-cycle
+version: 2.0.2
+series: common
+tier: standard
+summary: 循環の図。段階の箱を円の上に 12 時から時計回りに並べ、円に沿った矢印でつなぐ（最後から最初へ戻る矢印も）
+steps: 段階の数（既定は 1 つ = 1 段階。per-step で n 個ずつ、node の step が優先）
+purposes: cycle
+variants: fade, draw, grow
+props: per-step, size, dur, stagger
+---
+
+PDCA、水の循環、細胞周期、学習のサイクルなど、同じ順で回り続ける段階を見せるときに使う。
+座標は書かない。段階の中身を配列の順に書けば、部品が並べる（[共通の決まり](../../docs/conventions.ja.md) §2）。
+
+子の JSON：`{"nodes": [...], "center": {...}, "edges": [...]}`（`center` と `edges` は省ける）。
+
+- `nodes`：段階（3〜8 個を想定）。配列の順に回る。12 時の位置から時計回りに置き、となりの段階へ円に沿った矢印を引く。最後から最初へ戻る矢印は自動で引く
+  - `label`（`\n` で改行）か `tex`（KaTeX）、`note`（箱の中の 2 行目に小さく、`--muted`）、`tone`（`term`（既定）・`emph`・`muted`・`accent2`・`series-1..4`）、`step`、`at`、`id`
+- `center`：真ん中の名前（`{"label": "PDCA", "note": "…"}`）。最初の段階と一緒に出る（`center.step` で変えられる）。`center` はオブジェクト。`m-pie` の `center` は字（文字列）なので取り違えない
+  - `label`（`\n` で改行）か `tex`（KaTeX）、`note`（箱の**中**の最後の行に小さく、`--muted`）、`tone`（`term`（既定）・`emph`・`muted`・`accent2`・`series-1..4`）、`step`、`at`、`id`
+  - `tone: emph` の箱は、地が `--emph-tint`、枠と字が `--emph`
+- `edges`：ほかのつながり（`from` `to` は段階の `id`、`label` `tone` `dash` `step`）。箱の縁から縁への破線の矢印
+- 矢印の色は `--muted`、3 px（`edges` も `tone` がなければ `--muted`）
+
+並べ方：
+
+- 横に長い場所では円を横に伸ばした楕円にする（縦の 1.9 倍まで。縦に長くはしない）。箱と矢印が要素の箱に入る大きさにする
+- 段階：既定は 1 段階に 1 つ。入ってくる矢印はその段階の箱と一緒に出る。最後から最初へ戻る矢印は、最後の段階の箱が出たあとに引く
+- 見せ方（`variant`）：`fade`（既定。箱が下から 12 px 上がりながら現れてから入ってくる矢印を引く）・`draw`（矢印を先に引き、その先に箱が前の箱の側から 12 px 寄りながら出る）・`grow`（矢印を引きながら、箱が前の箱の側から 12 px 寄って 0.92 倍から大きくなる）。書かなければ最初の見せ方。どれも段階の数・長さ・最後の形は同じ
+- 動きの上限：どの見せ方でも箱が動くのは 12 px まで（箱の中心で測る。大きさは 0.92 倍から、`fade` と同じ）、時間も `fade` の長さの中（共通の決まり §1.2）
+- 授業の表示（`ctx.preview`）：後の段階の箱と矢印をテーマの薄さで見せる
+- `cues(k)`：同じ段階に 2 つ以上の箱があれば、2 つ目からの開始時刻を返す
+
+見本は `demo.html`（PDCA、水の循環、見せ方の種類）。
+
+<!-- llm: omit -->
+注意
+
+- 箱の幅は字数から見積もる（和文 1 字、数字 0.6 字、ほかの欧文 0.62 字）。字の読み込みを待たずに決まる
+- 入らないとき（箱どうしが重なる・矢印を引く間がない・真ん中の名前が円に入らない）は字を `size` から 2px ずつ 24px まで縮め、それでも入らなければ `console.warn` で知らせる
+- 矢印は楕円の弧（SVG の `A`）で、箱から 8px 空けたところから次の箱の手前まで。段階が 8 個を超えると矢印が短くなりすぎる
+<!-- llm: end -->

package/vendor/components/sha256/2ec8a9acdf58b641dbda9a31643e1c9f77d4e386ce654a58971e3ba6e5530455/demo.html

@@ -0,0 +1,75 @@
+<!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-cycle の見本</title>
+<!-- 組み方：node kit/build.mjs components/cycle/demo.html -o components/cycle/out/demo.html -->
+<style>
+.vcap{font-size:27px;line-height:1.3;margin:0 0 6px;color:var(--muted)}
+</style>
+</head>
+<body>
+<div id="stage">
+
+<section class="slide">
+  <h2>PDCA サイクル</h2>
+  <div class="body">
+    <m-cycle style="height:430px">
+      <script type="application/json">{
+        "center": {"label": "PDCA"},
+        "nodes": [
+          {"label": "計画（Plan）", "note": "目標と手順を決める"},
+          {"label": "実行（Do）", "note": "計画どおりにやってみる"},
+          {"label": "評価（Check）", "note": "結果を目標と比べる"},
+          {"label": "改善（Act）", "note": "やり方を直して次へ", "tone": "emph"}
+        ]
+      }</script>
+    </m-cycle>
+  </div>
+  <div class="concl"><span>→ 1 周ごとに、やり方が少しずつよくなる</span></div>
+</section>
+
+<section class="slide">
+  <h2>水の循環</h2>
+  <div class="body">
+    <m-cycle style="height:430px">
+      <script type="application/json">{
+        "center": {"label": "水の循環", "note": "太陽の熱で動く"},
+        "nodes": [
+          {"label": "蒸発", "note": "海や地面の水が水蒸気に"},
+          {"label": "雲ができる", "note": "上空で冷えて水や氷の粒に"},
+          {"label": "雨・雪", "note": "粒が大きくなって落ちる"},
+          {"label": "しみこむ・流れる", "note": "地下水や川になる"},
+          {"label": "海へ", "note": "川が海に注ぐ"}
+        ]
+      }</script>
+    </m-cycle>
+  </div>
+  <div class="concl"><span>→ 水は形を変えながら、地球の上を回り続ける</span></div>
+</section>
+
+<section class="slide">
+  <h2>見せ方の種類（variant）</h2>
+  <div class="body">
+    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 36px">
+      <div><p class="vcap">現れてから矢印（fade、既定）</p>
+        <m-cycle variant="fade" style="height:360px">
+          <script type="application/json">{"nodes": [{"label": "計画"}, {"label": "実行"}, {"label": "評価"}, {"label": "改善"}]}</script>
+        </m-cycle></div>
+      <div><p class="vcap">矢印を引いてから（draw）</p>
+        <m-cycle variant="draw" style="height:360px">
+          <script type="application/json">{"nodes": [{"label": "計画"}, {"label": "実行"}, {"label": "評価"}, {"label": "改善"}]}</script>
+        </m-cycle></div>
+      <div><p class="vcap">前の箱の側から大きくなる（grow）</p>
+        <m-cycle variant="grow" style="height:360px">
+          <script type="application/json">{"nodes": [{"label": "計画"}, {"label": "実行"}, {"label": "評価"}, {"label": "改善"}]}</script>
+        </m-cycle></div>
+    </div>
+  </div>
+  <div class="concl"><span>→ 書かなければ最初の見せ方（fade）になる</span></div>
+</section>
+
+</div>
+</body>
+</html>