egatari 0.0.0-stage → 0.6.4

package/vendor/components/sha256/728f0777d7cdb6b78aa75123dac89831a21ecbe8dfbee49fea3a864538253ffe/index.js

@@ -0,0 +1,233 @@
+// 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 は今回の観測の位置
+// 2.0（Egatari spec §6.1 の部品）：base の MotionElement・el・mtext・prog・lerp・previewOpacity と plot の Plot を使い、プレイヤーのグローバルは使わない
+egatariParts.define({name: "seq", version: "2.0.1", requires: {base: "1.0.0", plot: "1.0.0"}, element: "m-seq"}, function(deps){
+"use strict";
+var base = deps.base, plot = deps.plot;
+// 点列の d。null の所で線を切り、次の有限な点から M で引き直す（plot の p.d と同じ字。切れ目がなければ同じ d）
+function pathOf(pts){
+  var d = "", pen = false;
+  pts.forEach(function(q){ if (q){ d += (pen ? "L" : "M") + q[0].toFixed(1) + "," + q[1].toFixed(1); pen = true; } else pen = false; });
+  return d;
+}
+// 線分 s = [[x, y], [x, y]] が箱 r = [x0, y0, x1, y1] にかかるか（Liang–Barsky）
+function segHitsBox(s, r){
+  var x = s[0][0], y = s[0][1], dx = s[1][0] - x, dy = s[1][1] - y, t0 = 0, t1 = 1;
+  var pp = [-dx, dx, -dy, dy], qq = [x - r[0], r[2] - x, y - r[1], r[3] - y];
+  for (var i = 0; i < 4; i++){
+    if (pp[i] === 0){ if (qq[i] < 0) return false; continue; }
+    var u = qq[i] / pp[i];
+    if (pp[i] < 0){ if (u > t1) return false; if (u > t0) t0 = u; }
+    else { if (u < t0) return false; if (u < t1) t1 = u; }
+  }
+  return true;
+}
+// 灰色の線の名前の置き場所：その線の上に、線の点を中心にして置く（字は背景色の縁取りで線を切るので、どの線の名前か読める）。
+// bd（字を置ける範囲）の中で、置いた字（boxes）に重ならず、ほかの線（lines：点列の配列。cl の中だけ描かれる）にかかる数が最も少なく、
+// 自分の線が字の高さの中に収まり（平らな所）、ほかの線から離れている所（40 px まで）。w は字の幅の見積もり、fs は字の大きさ。置けなければ null
+function placeOn(own, w, fs, lines, boxes, bd, cl){
+  var best = null, bc = Infinity;
+  var hits = function(L, r){
+    var q = [Math.max(r[0], cl[0]), Math.max(r[1], cl[1]), Math.min(r[2], cl[2]), Math.min(r[3], cl[3])];
+    if (q[0] >= q[2] || q[1] >= q[3]) return false;
+    for (var i = 1; i < L.length; i++) if (L[i - 1] && L[i] && segHitsBox([L[i - 1], L[i]], q)) return true;
+    return false;
+  };
+  for (var j = 0; j < own.length; j += 3){
+    var q = own[j];
+    if (!q || q[0] < cl[0] || q[0] > cl[2] || q[1] < cl[1] || q[1] > cl[3]) continue;   // 描かれている点だけ
+    // 横軸や上の端に沿う線では、字を範囲の中へ上下にずらす（線のすぐ上・下になる）
+    var y = q[1] + fs * 0.33;
+    y = Math.max(bd[1] + fs * 0.88, Math.min(bd[3] - fs * 0.22, y));
+    var r = [q[0] - w / 2, y - fs * 0.88, q[0] + w / 2, y + fs * 0.22];
+    if (r[0] < bd[0] || r[2] > bd[2]) continue;
+    if (boxes.some(function(b){ return r[0] < b[2] + 6 && b[0] < r[2] + 6 && r[1] < b[3] + 4 && b[1] < r[3] + 4; })) continue;
+    // ほかの線にかかれば 1 本につき 1000。自分の線が字の幅の間に字の高さより大きく上下すれば 300
+    var c = 0, r3 = [r[0] - 3, r[1] - 3, r[2] + 3, r[3] + 3], gap = 40, lo = Infinity, hi = -Infinity;
+    own.forEach(function(z){ if (z && z[0] >= r[0] && z[0] <= r[2]){ lo = Math.min(lo, z[1]); hi = Math.max(hi, z[1]); } });
+    if (hi - lo > fs * 0.9) c += 300;
+    lines.forEach(function(L){
+      if (L === own) return;
+      if (hits(L, r3)){ c += 1000; return; }
+      L.forEach(function(z){
+        if (z && z[0] >= cl[0] && z[0] <= cl[2] && z[1] >= cl[1] && z[1] <= cl[3]) gap = Math.min(gap, Math.hypot(Math.max(r[0] - z[0], 0, z[0] - r[2]), Math.max(r[1] - z[1], 0, z[1] - r[3])));
+      });
+    });
+    c += 40 - gap + (hi - lo) / fs;
+    if (c < bc){ bc = c; best = {x: q[0], y: y, box: r}; }
+  }
+  return best;
+}
+return class extends base.MotionElement {
+  static partName = "seq";   // the registry name (define meta name), for report prefixes
+  // データの形（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(ctx){
+    var D = base, 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 = plot.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}});
+    // 密度の点列（px）。有限でない値（NaN・±Infinity・足りない値）の点は null で、線はそこで切る
+    this.pts = function(dens){ return xs.map(function(x, i){ var X = p.x(x), Y = p.y(dens[i]); return typeof dens[i] === "number" && isFinite(X) && isFinite(Y) ? [X, Y] : null; }); };
+    var bad = [];
+    data.steps.forEach(function(s, i){ if (self.pts(s.dens).indexOf(null) >= 0) bad.push(i); });
+    if (bad.length) ctx.report("data", "[seq] steps " + bad.join(", ") + ": dens has values that are not finite numbers (NaN, ±Infinity or missing for some xs); the curve is broken there");
+    // 塗り（今の分布の下）→ 前の分布の薄い線 → 今の分布の線 の順に重ねる
+    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", pathOf(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};
+    });
+    // readout に書いていない名前は、前の値のまま出す（1 回だけ知らせる）
+    var miss = [];
+    keys.forEach(function(key){
+      var at = []; data.steps.forEach(function(s, i){ if ((s.readout || {})[key] === undefined) at.push(i); });
+      if (at.length) miss.push(JSON.stringify(key) + " (steps " + at.join(", ") + ")");
+    });
+    if (miss.length) ctx.report("data", "[seq] readout has no value for " + miss.join(", ") + "; the previous value is shown");
+    // 灰色の線（前の分布）の名前「n = 3」：最後の段階で残る線に、--muted の 24px で線の上に（背景色で縁取って）書く。
+    // 5 本以上なら最初と最後だけ。n は readout の n（*n* など、字が n の名前）の値、なければ更新の回数。
+    // 置き場所は最後の段階の形（今の線・灰色の線・観測の印）で決め、その線が灰色で見えている間だけ出す
+    var last = this.updates, G = this.props.ghosts, fs = 24, nk = null;
+    keys.forEach(function(key){ if (nk === null && key.replace(/[*_^]/g, "") === "n") nk = key; });
+    var wOf = function(str){ var w = 0; String(str).replace(/[*_^]/g, "").split("").forEach(function(ch){ w += ch.charCodeAt(0) > 255 ? fs : fs * 0.6; }); return w; };
+    var shown = [];
+    for (var i = Math.max(0, last - G); i < last; i++) shown.push(i);
+    if (shown.length > 4) shown = [shown[0], shown[shown.length - 1]];
+    var gp = data.steps.map(function(s){ return self.pts(s.dens); });
+    var lines = [gp[last]].concat(gp.slice(Math.max(0, last - G), last)), lm = data.steps[last].mark, boxes = [];
+    if (lm !== undefined && last > 0){
+      lines.push([[p.x(lm), p.m.t + 34], [p.x(lm), p.H - p.m.b]]);
+      var mw = wOf(data.markLabel || "") * 26 / 24;
+      boxes.push([p.x(lm) - mw / 2, p.m.t + 24 - 26 * 0.88, p.x(lm) + mw / 2, p.m.t + 24 + 26 * 0.22]);
+    }
+    data.steps.forEach(function(s, i){ if (s.mark !== undefined && i < last) boxes.push([p.x(s.mark) - 6, p.H - p.m.b - 13, p.x(s.mark) + 6, p.H - p.m.b - 1]); });
+    var bd = [p.m.l + 4, 4, p.W - pw - 16, p.H - p.m.b - 2], cl = [p.m.l, p.m.t - 4, p.W - pw - 16, p.H - p.m.b];
+    this.glabs = [];
+    shown.forEach(function(i){
+      var v = nk !== null ? (data.steps[i].readout || {})[nk] : i;
+      if (v === undefined) v = i;
+      var dg = nk !== null && (data.digits || {})[nk] !== undefined ? data.digits[nk] : 0;
+      var str = (nk !== null ? nk : "*n*") + " = " + (typeof v === "number" ? v.toFixed(dg).replace("-", "−") : String(v));
+      var at = placeOn(gp[i], wOf(str), fs, lines, boxes, bd, cl);
+      if (!at){ ctx.report("layout", "[seq] no free place for the name of the grey curve " + JSON.stringify(str) + " (not drawn)"); return; }
+      boxes.push(at.box);
+      self.glabs.push({i: i, el: D.mtext(p.svg, +at.x.toFixed(1), +at.y.toFixed(1), str, {"text-anchor": "middle", fill: "var(--muted)", stroke: "var(--bg)", "stroke-width": 6, "paint-order": "stroke", "font-size": fs, opacity: 0})});
+    });
+  }
+  // 段階 i までで readout の key に最後に書かれた値（なければ undefined）
+  valAt(i, key){ var S = this.data.steps; for (; i >= 0; i--){ var v = (S[i].readout || {})[key]; if (v !== undefined) return v; } return undefined; }
+  // 段階 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 = base, S = this.data.steps, p = this.p, slot = this.props.slot;
+    var preview = !!ctx.preview, PV = preview ? base.previewOpacity(this) : 1;
+
+    // 今の更新の番号 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];
+    // 前後のどちらかが有限でなければ補間せず、動き終わり（e = 1）は後の値、始め（e = 0）は前の値
+    var dens = this.data.xs.map(function(_, i){
+      var A = a.dens[i], B = b.dens[i];
+      return typeof A === "number" && typeof B === "number" && isFinite(A) && isFinite(B) ? D.lerp(A, B, e) : e >= 1 ? B : e <= 0 ? A : NaN;
+    });
+    // 線は有限な区間ごとに引き、塗りも区間ごとに横軸まで閉じる（切れ目がなければ今までと同じ d）
+    var q = this.pts(dens), d = pathOf(q), ar = "", y0 = p.y(0).toFixed(1);
+    for (var i = 0; i < q.length; i++){
+      if (!q[i]) continue;
+      var j = i; while (j + 1 < q.length && q[j + 1]) j++;
+      ar += pathOf(q.slice(i, j + 1)) + "L" + q[j][0].toFixed(1) + "," + y0 + "L" + q[i][0].toFixed(1) + "," + y0 + "Z";
+      i = j;
+    }
+    this.cur.setAttribute("d", d);
+    this.area.setAttribute("d", ar);
+    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 は base.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));
+    var self = this, ia = Math.max(0, idx - 1);
+    this.rows.forEach(function(r){
+      // 書いていない値は前の段階の値（桁もそろえる）
+      var va = self.valAt(ia, r.key), vb = self.valAt(idx, r.key), v;
+      if (typeof va === "number" && typeof vb === "number") v = D.lerp(va, vb, e);
+      else v = e < 0.5 && va !== undefined ? va : vb;
+      v = typeof v === "number" ? v.toFixed(r.dg).replace("-", "−") : String(v);
+      r.el.textContent = v === "−0" || /^−0\.0*$/.test(v) ? v.slice(1) : v;
+    });
+    // 灰色の線の名前は、その線が灰色で見えている間だけ
+    this.glabs.forEach(function(o){ o.el.setAttribute("opacity", !ahead(o.i) && o.i < idx && o.i >= idx - G ? 1 : 0); });
+  }
+};
+});

package/vendor/components/sha256/7324349691c265ff4cd5f9219bb9326bf966dbf0feb93dbe893edadd2c0595bc/CHANGELOG.md

@@ -0,0 +1,31 @@
+# m-predict changelog
+
+The part's own versions (Egatari spec §6.1). Releases of the whole library are in the repository's CHANGELOG.md.
+
+## 2.0.1 (components 2.0.0)
+
+- `layout(ctx)` (spec §8.4 Layout): at a new laid-out size the part redraws its picture and controls at that size, keeping the viewer's counts and prediction, and puts focus back on the rebuilt control in the same row and place (a field keeps its caret). Same size or a box of size 0: nothing changes (tools/test-layout.mjs).
+
+## 2.0.0 (components 2.0.0-rc.1)
+
+- Moved to `egatariParts.define({name: "predict", version: "2.0.0", requires: {base: "1.0.0"}, element: "m-predict"})`,
+  extending `base.MotionElement` with `base.el` / `mtext` / `prog` / `variant`; `static partName = "predict"`.
+  The DOM is byte-identical to 1.13.0 on its demo at every step (tools/test-c2-identity.mjs).
+- Viewer input (spec §8.4): the counts and the learner's prediction are reset only on the render where `ctx.entered` is
+  true; `ctx.reset` still only blurs a focused field or button. The `deck:pos` listener (1.13.0's fallback for players
+  without `ctx.entered`) is gone.
+- `render(k, t, ctx)` handles `ctx.entered` / `ctx.reset` and then draws with `paint(k, t, {mode, preview, live})`; a
+  redraw after viewer input (buttons, field, `input()`, prediction, print) calls `paint` with the last (k, t), so it never
+  goes through the player's or base's `render` again (1.13.0 called `render` with a reduced ctx).
+- Video: `ctx.mode === "video"` read in `mount` (1.13.0: `DECK.mode`), also for `input()`.
+- Print: `beforeprint` / `afterprint` on `document.defaultView` (1.13.0: `window`).
+- Reports: rows too low for the buttons and a question, label or note that does not fit at 24 px are
+  `ctx.report("size", "[predict] …")` (1.13.0: `console.warn("m-predict: …")`). An ignored `input(choice, count)` stays a
+  `console.warn`, now `[predict] input(…) ignored …` (a developer's call, not the lesson's data).
+- Variants: `base.variant(this)` instead of the embedded `egatari-variant` block.
+- Ids: its style element is `predict-2-0-0-css` (1.13.0: `m-predict-css`); it is in `<head>`, not in the component's DOM,
+  so no id rewrite is needed in the identity test.
+
+## 1.13.0
+
+As released in the library's 1.13.0.

package/vendor/components/sha256/7324349691c265ff4cd5f9219bb9326bf966dbf0feb93dbe893edadd2c0595bc/README.md

@@ -0,0 +1,35 @@
+---
+name: m-predict
+version: 2.0.1
+series: common
+tier: standard
+summary: 予想してから答えを開く。選択肢ごとの人数を棒で見せ、答えの段階で正解に枠
+steps: 0 問いと選択肢、1 人数の棒、answer-step（既定 2）で答え
+purposes: predict
+variants: fade, draw
+props: answer-step, unit, poll, ticks
+---
+
+「A だと思う人〜」と手を挙げてもらい、先生が −1・＋1 で数える（数を打ち込んでもよい）。一人で学ぶ人は選択肢を押すと自分の予想になる。
+
+子の JSON：`{"question", "choices": [{"label", "tone"?}], "answer": 正解の番号（0 から）, "counts"?: [選択肢ごとの例の人数], "note"?: 答えと出す一言}`
+
+- 選択肢は 2〜6。動画・印刷・最初の表示は `counts`（無ければ 0）。同じスライドにいるあいだは数が残る（答えの段階でも、戻っても）
+- 口述原稿は `counts` の数で書き、数える所は `{note:ここで手を挙げてもらう}` と書く（丸かっこは読み上げられる）
+- `poll="p1"`：live の投票の集計を出す
+
+<!-- llm: omit -->
+作る人向けの注（dev と確かめること）
+
+- 段階：0 は問い・選択肢・目盛り（地図の段階 0 の地と同じく、文脈は初めから見せる。共通の決まり）。1 で人数の棒と操作、`answer-step` で正解の枠・「✓ 正解」・`note`、ほかの選択肢は棒を薄く、字は `--muted`（4.5:1 以上）。`answer-step="1"` なら棒の後に続けて開く
+- 授業の表示（`ctx.preview`）の例外：先の段階を何も見せない（棒も**答え（枠・✓ 正解・note）**も。予想の部品なので）。index.js の `static preview = "none"` で、manifest.json に `preview: "none"` と載る（docs/conventions.md §1.2）
+- 見る人の状態（仕様 §8.4、egatari-spec 241770f）：数と自分の予想は、同じスライドにいるあいだは段階を進めても戻っても残る（答えの段階で、数えた数と予想の当たり外れが出る）。作者の値に戻すのは、ほかのスライドから入ったときと飛んだときの描画（`ctx.entered`）だけ。k が変わっただけでは戻さない。`ctx.reset`（触った部品が段階に入るとき）では欄やボタンのフォーカスだけを外し、数と予想は消さない（仕様 §8.4：`ctx.reset` は見る人の入力を消してはならない）
+- 2.0.0 から、戻すのは `ctx.entered` だけ（1.x の `deck:pos` を聞く代わりはやめた。2.0 の実行系はいつも `ctx.entered` を渡す）
+- 印刷：`beforeprint` から `afterprint` まで作者の値で描き（予想の印・当たり外れも出さない）、印刷の後は画面の数に戻す（消さない）
+- 要素のメソッド（Studio が呼ぶ）：`input(choice, count)`（choice は 0 から数える選択肢の番号、count は新しい数で 0〜9999 の整数。それ以外は console.warn して無視。動画では何もしない。返り値なし）。`counts()`：今の数の新しい配列（変えていなければ作者の値）。発表者の画面の `deck-cmd` `{type: "input", …}` から `input()` へ渡すのは Studio の中のこと
+- 数が変わったとき（ボタン・欄・キー・`input()`）と、数を変えた後に戻したとき（`ctx.entered`・ほかのスライドから入ったとき）：要素に `CustomEvent("egatari-input", {bubbles: true, detail: {counts}})`。ふつうの描画では出さない
+- live：`ctx.live?.poll(poll の値)` → `number[] | null`。配列のときだけ棒に出し（「投票の結果」、操作は隠す）、動画・印刷では出さない。見せてよいか（見せると決めた後、3 人以上）は実行系が決める。集計が変わったら実行系が render を呼び直す（仕様 §8.4）。発表者が入れた数は部品が自分で描き直す
+- index.js の `static interactive = true`（操作できるパーツ）と `static viewerInput = true`（入力を受け付ける）：manifest.json の `interactive`・`viewerInput` になる。README には書かない（AI への指示に入るので）
+- キー：数の欄と ±1 のボタンで `+` `-` `↑` `↓`（ボタンでは `←` `→` も）。数字のキーは割り当てない（欄の中で打つときだけ）。欄の中のキーはスライドに渡さない（Studio #69 の前でも）。Esc・Enter で欄を出る
+- 動画では操作も予想の印も作らない。印刷では `@media print` で隠す
+<!-- llm: end -->

package/vendor/components/sha256/7324349691c265ff4cd5f9219bb9326bf966dbf0feb93dbe893edadd2c0595bc/demo.html

@@ -0,0 +1,66 @@
+<!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-predict の見本</title>
+<!-- 組み方：node kit/build.mjs components/predict/demo.html -o components/predict/out/demo.html（人数はすべて架空の例） -->
+<style>
+</style>
+</head>
+<body>
+<div id="stage">
+
+<section class="slide">
+  <h2>予想してみよう：落ちる速さ</h2>
+  <div class="body">
+    <p class="ia-badge" style="margin:0 0 10px;line-height:1.3"><span style="display:inline-block;font-size:27px;font-weight:700;color:var(--fg);border:2px dashed var(--accent2);border-radius:8px;padding:0 12px">操作できる</span></p>
+    <m-predict unit="人" style="height:390px">
+      <script type="application/json">{
+        "question": "同じ高さから落とすと、重い球と軽い球のどちらが先に着く？",
+        "choices": [{"label": "重い球"}, {"label": "軽い球"}, {"label": "同時"}],
+        "answer": 2,
+        "counts": [17, 2, 11],
+        "note": "空気の抵抗が小さければ、重さによらず同時に着く（ガリレオ）"
+      }</script>
+    </m-predict>
+  </div>
+  <div class="concl"><span>→ 落ちる速さは重さで決まらない（人数は架空の例）</span></div>
+</section>
+
+<section class="slide">
+  <h2>予想してみよう：小数のかけ算</h2>
+  <div class="body">
+    <m-predict unit="人" poll="p1" style="height:440px">
+      <script type="application/json">{
+        "question": "0.1 × 0.1 はいくつ？",
+        "choices": [{"label": "0.1"}, {"label": "0.01"}, {"label": "0.2"}, {"label": "1"}],
+        "answer": 1,
+        "counts": [12, 10, 6, 2],
+        "note": "0.1 は 10 分の 1。10 分の 1 の 10 分の 1 は 100 分の 1"
+      }</script>
+    </m-predict>
+  </div>
+  <div class="concl"><span>→ 1 より小さい数をかけると、もとの数より小さくなる（人数は架空の例）</span></div>
+</section>
+
+<section class="slide">
+  <h2>見せ方の種類（variant）</h2>
+  <div class="body">
+    <div style="display:grid;grid-template-columns:190px 1fr;gap:20px 16px;align-items:center;font-size:27px">
+      <div>フェード<br>（fade）</div>
+      <m-predict variant="fade" unit="人" style="height:210px">
+        <script type="application/json">{"choices": [{"label": "A"}, {"label": "B"}], "answer": 0, "counts": [8, 5]}</script>
+      </m-predict>
+      <div>線を引く<br>（draw）</div>
+      <m-predict variant="draw" unit="人" style="height:210px">
+        <script type="application/json">{"choices": [{"label": "A"}, {"label": "B"}], "answer": 0, "counts": [8, 5]}</script>
+      </m-predict>
+    </div>
+  </div>
+  <div class="concl"><span>→ 書かなければ最初の見せ方（fade）になる。人数は架空</span></div>
+</section>
+
+</div>
+</body>
+</html>