egatari 0.0.0-stage → 0.6.4

package/vendor/components/sha256/0b3db4a02b369f58fc10aef5f4c26b95b7f1fbc18f9fcd073484e1f33cdafd82/index.js

@@ -0,0 +1,481 @@
+// m-hist：ヒストグラム（柱状グラフ）・度数折れ線・ドットプロット。生の値から部品が度数を数えるか、度数分布表を書く
+// <m-hist xl="記録（m）" yl="人数（人）" polygon="on" marks="mean,median,mode" style="height:440px">
+//   <script type="application/json">{"values": [23, 31, 27], "bins": {"start": 15, "width": 5}}
+// （JSON の終わり）</m-hist>
+// 段階：分布（既定は系列 1 つ = 1 段階。build="bins" は階級 1 つ = 1 段階、build="values" は値が 1 つずつ落ちて積もる）→ 度数折れ線（polygon="on"）
+//       → 代表値の印を 1 つずつ（marks の順）
+// 軸の属性（xr yr xt yt xf yf xl yl）は m-curves と同じ名前と意味。階級は「以上・未満」（start + i·width 以上、start + (i+1)·width 未満）
+// 見せ方（docs/conventions.md §1）：fade（棒・点がフェードして現れる、既定）・grow（棒が下から伸びる。点は下の段から順に現れる）
+// 2.0（Egatari spec §6.1 の部品）：base の MotionElement・el・mtext・prog・lerp・variant・previewOpacity、plot の Plot、
+// 代表値と度数は hist-core（1.x の static stats）を使い、プレイヤーのグローバルは使わない。書き方やデータの知らせ
+// （1.x の console.warn）は mount で ctx.report に。言語は ctx.lang（mount で読む）
+egatariParts.define({name: "hist", version: "2.0.0", requires: {base: "1.0.0", "hist-core": "1.0.0", plot: "1.0.0"}, element: "m-hist"}, function(deps){
+"use strict";
+var base = deps.base, plot = deps.plot;
+// ---- 代表値と度数（hist-core。tools/test-stats.mjs が試す） ----
+var STATS = deps["hist-core"];
+// 印の名前の置き場所：線の頭の右（start）か左（end）。名前がほかの印の線にかからない側を選び、名前がかかる線の印は
+// それより下の行に置く（線は自分の名前の行までしか伸びないので、上の名前を横切らない）。同じ行の名前は 14 px あける。
+// fl：[{x, w}]（x は線の位置、w は名前の幅）。各要素に a（start / end）・L・R・row を書き、行の数を返す。
+// 置き場所がないときは report(code, message)（ctx.report）で知らせる
+function FLAGS(fl, W, report){
+  var span = function(f, a){ var l = a === "start" ? f.x + 8 : f.x - 8 - f.w; return [l, l + f.w]; };
+  var covers = function(f, g){ return g !== f && g.x > f.L - 6 && g.x < f.R + 6; };
+  fl.forEach(function(f){
+    var best = null;
+    ["start", "end"].forEach(function(a){
+      var sp = span(f, a);
+      if (sp[0] < 2 || sp[1] > W - 2) return;
+      var n = fl.filter(function(g){ return g !== f && g.x > sp[0] - 6 && g.x < sp[1] + 6; }).length;
+      if (!best || n < best.n) best = {a: a, n: n};
+    });
+    f.a = best ? best.a : (f.x < W / 2 ? "start" : "end");
+    var sp2 = span(f, f.a); f.L = sp2[0]; f.R = sp2[1];
+  });
+  // 名前がかかる線の印が先（下の行）
+  var lv = fl.map(function(){ return 0; });
+  for (var it = 0; it < fl.length; it++) fl.forEach(function(f, i){ fl.forEach(function(g, j){ if (covers(f, g)) lv[i] = Math.max(lv[i], Math.min(fl.length, lv[j] + 1)); }); });
+  var order = fl.map(function(f, i){ return i; }).sort(function(a, b){ return lv[a] - lv[b] || a - b; });
+  var placed = [], rows = 0;
+  order.forEach(function(i){
+    var f = fl[i], row = 0;
+    placed.forEach(function(o){ if (covers(f, o)) row = Math.max(row, o.row + 1); });
+    for (;; row++){
+      var clash = placed.some(function(o){
+        return (o.row === row && f.L < o.R + 14 && o.L < f.R + 14) || (o.row < row && covers(o, f)) || (o.row > row && covers(f, o));
+      });
+      if (!clash) break;
+      if (row > 12){ report("layout", '[hist] no free place for the name "' + (f.text || "") + '" (it may overlap)'); break; }
+    }
+    f.row = row; placed.push(f); rows = Math.max(rows, row + 1);
+  });
+  return rows;
+}
+var ON = function(v){ return /^(on|true|yes)$/i.test(String(v || "").trim()); };
+return class extends base.MotionElement {
+  static partName = "hist";   // the registry name (define meta name), for report prefixes
+  static variants = ["fade", "grow"];
+  // データの形（kit/shape.js）
+  static shape = (function(){
+    var NUMS = {type: "array", minItems: 1, items: {type: "number"}};
+    var TABLE = {type: "array", minItems: 1, items: {type: "object", additionalProperties: false, required: ["from", "to", "count"],
+      properties: {from: {type: "number"}, to: {type: "number"}, count: {type: "integer"}}}};
+    return {
+      schema: {type: "object", additionalProperties: false, anyOf: [{required: ["values"]}, {required: ["table"]}, {required: ["series"]}], properties: {
+        values: NUMS, table: TABLE,
+        bins: {type: "object", additionalProperties: false, required: ["start", "width"], properties: {start: {type: "number"}, width: {type: "number"}}},
+        series: {type: "array", minItems: 1, maxItems: 2, items: {type: "object", additionalProperties: false, anyOf: [{required: ["values"]}, {required: ["table"]}],
+          properties: {label: {type: "string"}, tone: {type: "string"}, values: NUMS, table: TABLE}}}}},
+      example: {values: [23, 31, 27, 18, 25, 29, 33, 22, 26, 28], bins: {start: 15, width: 5}},
+      note: {en: "raw values with bins {start, width} (the part counts), or a frequency table [{from, to, count}]; up to 2 series [{label, tone, values | table}]",
+             ja: "生の値と階級 {start, width}（部品が数える）か、度数分布表 [{from, to, count}]。系列は 2 つまで [{label, tone, values か table}]"},
+    };
+  })();
+  static props = {
+    xr: {type: "json", default: null, doc: "横軸の範囲（書かなければ階級から）"}, yr: {type: "json", default: null, doc: "縦軸の範囲（書かなければ度数から）"},
+    xt: {type: "json", default: null, doc: "横軸の目盛り（書かなければ階級の境）"}, yt: {type: "json", default: null, doc: "縦軸の目盛り（書かなければ自動）"},
+    xf: {type: "number", default: undefined, doc: "横軸の目盛りの小数桁"}, yf: {type: "number", default: undefined, doc: "縦軸の目盛りの小数桁"},
+    xl: {type: "string", default: ""}, yl: {type: "string", default: ""},
+    unit:       {type: "string", default: "", doc: "代表値の数の後ろに付ける単位"},
+    digits:     {type: "number", default: undefined, doc: "代表値の小数桁（書かなければ値の桁＋1 まで）"},
+    polygon:    {type: "string", default: "off", doc: "on：度数折れ線"},
+    relative:   {type: "string", default: "off", doc: "on：相対度数"},
+    cumulative: {type: "string", default: "off", doc: "on：累積度数"},
+    kind:       {type: "string", default: "bars", doc: "bars（柱状グラフ）か dots（ドットプロット）"},
+    marks:      {type: "string", default: "", doc: "代表値の印：mean,median,mode のどれか（書いた順に 1 つずつ）"},
+    build:      {type: "string", default: "whole", doc: "whole・values（値を 1 つずつ数える）・bins（階級を 1 つずつ）"},
+    dur:        {type: "number", default: 0.8, doc: "1 段階の動きの秒数"},
+  };
+  get steps(){
+    if (this.getAttribute("steps") !== null) return +this.getAttribute("steps");
+    return this.plan().steps;
+  }
+  // 系列・階級・度数・代表値・段階（mount の前にも steps が要るので、データと属性だけから決める）
+  plan(){
+    if (this._plan) return this._plan;
+    var d = this.data || {}, P = this.props, S = STATS, notes = [];
+    var kind = P.kind, sa = this.getAttribute("style");
+    // style="dots" と書かれたとき（style は大きさに使う属性なので kind を勧める）
+    if (/^\s*(bars|dots)\s*$/.test(sa || "")){ kind = sa.trim(); notes.push(["attr", '[hist] write kind="' + kind + '" (style is for the size, e.g. style="height:420px")']); }
+    if (kind !== "bars" && kind !== "dots"){ notes.push(["attr", '[hist] kind="' + kind + '" is not bars or dots (bars is used)']); kind = "bars"; }
+    var src = Array.isArray(d.series) && d.series.length ? d.series : [{values: d.values, table: d.table}];
+    var ser = src.map(function(s, i){
+      return {i: i, label: s.label || "", tone: s.tone, values: Array.isArray(s.values) ? s.values.map(Number) : null,
+              table: Array.isArray(s.table) ? s.table.map(function(r){ return {from: +r.from, to: +r.to, count: +r.count}; }).sort(function(a, b){ return a.from - b.from; }) : null};
+    });
+    var raw = ser.every(function(s){ return s.values; });
+    if (kind === "dots" && !raw) throw new Error("m-hist: kind=\"dots\" needs raw values (\"values\": [...]), not a frequency table");
+    // 階級：度数分布表から、なければ bins から、なければ値から（柱状グラフのとき）
+    var bins = null, tab = ser.filter(function(s){ return s.table; });
+    var eq = function(a, b, w){ return Math.abs(a - b) <= Math.abs(w) * 1e-6; };
+    if (tab.length){
+      var t0 = tab[0].table, w = t0[0].to - t0[0].from;
+      if (!(w > 0)) throw new Error("m-hist: table rows need from < to");
+      t0.forEach(function(r, j){
+        if (!eq(r.to - r.from, w, w) || (j && !eq(r.from, t0[j - 1].to, w))) throw new Error("m-hist: the table's classes must have equal widths and follow each other (" + r.from + "〜" + r.to + ")");
+      });
+      bins = {start: t0[0].from, width: w, nb: t0.length};
+      tab.forEach(function(s){
+        if (s.table.length !== t0.length || s.table.some(function(r, j){ return !eq(r.from, t0[j].from, w) || !eq(r.to, t0[j].to, w); }))
+          throw new Error("m-hist: the two tables must have the same classes");
+      });
+    } else if (d.bins){
+      if (!(+d.bins.width > 0)) throw new Error("m-hist: bins.width must be greater than 0");
+      bins = {start: +d.bins.start, width: +d.bins.width, nb: 0};
+    }
+    var all = [].concat.apply([], ser.map(function(s){ return s.values || []; }));
+    var lo = all.length ? Math.min.apply(null, all) : 0, hi = all.length ? Math.max.apply(null, all) : 0;
+    var given = !!bins;
+    if (!bins && kind === "bars"){
+      // 階級を書かなければ、およそ 1 + log2(n) 個の切りのよい幅
+      var k0 = Math.max(1, Math.ceil(1 + Math.log2(Math.max(1, all.length)))), w0 = niceStep((hi - lo || 1) / k0);
+      bins = {start: S.clean(Math.floor(lo / w0 + 1e-9) * w0), width: w0, nb: 0};
+      notes.push(["data", "[hist] no bins were written; classes of width " + w0 + " from " + bins.start + " are used (write \"bins\": {\"start\", \"width\"})"]);
+    }
+    if (bins && all.length){
+      if (S.binOf(lo, bins.start, bins.width) < 0) throw new Error("m-hist: the value " + lo + " is below bins.start (" + bins.start + ")");
+      var need = S.binOf(hi, bins.start, bins.width) + 1;
+      if (tab.length && need > bins.nb) throw new Error("m-hist: the value " + hi + " is outside the table's classes");
+      bins.nb = Math.max(bins.nb, need);
+    }
+    if (bins){
+      bins.edges = []; for (var e = 0; e <= bins.nb; e++) bins.edges.push(S.clean(bins.start + e * bins.width));
+      bins.mids = S.mids(bins.start, bins.width, bins.nb);
+    }
+    var dec = function(v){ var s = String(v), m = s.match(/\.(\d+)$/); return m ? m[1].length : 0; };
+    var base = Math.max.apply(null, all.map(dec).concat(bins ? [dec(bins.start), dec(bins.width)] : []).concat([0]));
+    ser.forEach(function(s){
+      if (bins) s.counts = s.values ? S.counts(s.values, bins.start, bins.width, bins.nb) : s.table.map(function(r){ return r.count; });
+      s.n = s.values ? s.values.length : S.sum(s.counts);
+    });
+    // 代表値（marks の順）
+    var marks = [];
+    String(P.marks || "").split(/[\s,、]+/).filter(Boolean).forEach(function(m){
+      if (["mean", "median", "mode"].indexOf(m) < 0){ notes.push(["attr", '[hist] marks: "' + m + '" is not mean, median or mode (ignored)']); return; }
+      if (marks.some(function(x){ return x.type === m; })) return;
+      var per = ser.map(function(s){
+        if (!s.n) return null;
+        if (m === "mean") return {xs: [s.values ? S.mean(s.values) : S.tableMean(bins.mids, s.counts)]};
+        if (m === "median"){
+          if (s.values) return {xs: [S.median(s.values)]};
+          var md = S.tableMedian(bins.start, bins.width, s.counts);
+          return md.bin !== undefined ? {xs: [md.x], cls: [md.from, md.to]} : {xs: [md.at]};
+        }
+        // 最頻値：点を値の上に積むときは値から、階級でまとめるときは度数がいちばん多い階級の階級値
+        var mo = kind === "dots" && !given ? S.modes(s.values) : S.binModes(bins.mids, s.counts);
+        if (!mo.length){ notes.push(["data", "[hist] " + (s.label || "the data") + " has no mode (every value appears once); the mark is left out"]); return null; }
+        return {xs: mo, cls: kind === "dots" && !given ? null : true};
+      });
+      if (per.some(Boolean)) marks.push({type: m, per: per});
+    });
+    // 段階
+    var build = P.build;
+    if (["whole", "values", "bins"].indexOf(build) < 0){ notes.push(["attr", '[hist] build="' + build + '" is not whole, values or bins (whole is used)']); build = "whole"; }
+    if (build === "values" && !raw){ notes.push(["attr", '[hist] build="values" needs raw values; build="bins" is used']); build = "bins"; }
+    if (build === "bins" && kind === "dots"){ notes.push(["attr", '[hist] build="bins" is for bars; build="values" is used for dots']); build = "values"; }
+    var poly = ON(P.polygon), rel = ON(P.relative), cum = ON(P.cumulative);
+    if (kind === "dots" && (poly || rel || cum)){ notes.push(["attr", "[hist] polygon, relative and cumulative are for bars (ignored with kind=\"dots\")"]); poly = rel = cum = false; }
+    var k = 0;
+    if (build === "bins"){ ser.forEach(function(s){ s.step = 1; }); bins.step0 = 1; k = bins.nb; }
+    else ser.forEach(function(s){ s.step = ++k; });
+    var polyStep = poly ? ++k : 0;
+    marks.forEach(function(m){ m.step = ++k; });
+    // build="values"：値が落ちる間隔。1 段階が 3 秒ほどに収まるように（9 個までは 0.3 秒おき、それより多ければ詰める）
+    var DROP = 0.45;
+    ser.forEach(function(s){
+      s.gap = build === "values" && s.n > 1 ? Math.min(0.3, 2.5 / (s.n - 1)) : 0;
+      s.len = build === "values" ? (s.n - 1) * s.gap + DROP + 0.1 : P.dur;
+    });
+    return (this._plan = {kind: kind, ser: ser, bins: bins, given: given, marks: marks, build: build, poly: poly, rel: rel, cum: cum,
+      polyStep: polyStep, steps: Math.max(1, k), base: base, notes: notes, DROP: DROP, lo: lo, hi: hi});
+    function niceStep(r){ var e = Math.pow(10, Math.floor(Math.log10(r))), x = r / e; return S.clean((x <= 1 ? 1 : x <= 2 ? 2 : x <= 2.5 ? 2.5 : x <= 5 ? 5 : 10) * e); }
+  }
+  // 代表値の数の書き方：digits があればその桁、なければ値の桁＋1 まで（終わりの 0 は値の桁まで落とす）
+  fmt(v){
+    var P = this.props, pl = this.plan(), s;
+    if (P.digits !== undefined && isFinite(P.digits)) s = Math.abs(v).toFixed(P.digits);
+    else { s = Math.abs(v).toFixed(pl.base + 1); if (s.indexOf(".") >= 0){ var keep = pl.base; s = s.replace(/0+$/, ""); var dd = (s.split(".")[1] || "").length; if (dd < keep) s += Array(keep - dd + 1).join("0"); s = s.replace(/\.$/, ""); } }
+    var p = s.split("."), i = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return (v < 0 && +s !== 0 ? "−" : "") + i + (p[1] ? "." + p[1] : "");
+  }
+  mount(ctx){
+    var P = this.props, D = base, self = this, pl = this.plan(), S = STATS;
+    this.variant = base.variant(this);
+    // 書き方とデータの知らせ（plan が集めた [code, message]）
+    // ctx.report with each code as a literal (lint checks them): plan's notes (attr, data) and the flag placer's (layout)
+    var report = function(code, msg){ if (code === "attr") ctx.report("attr", msg); else if (code === "layout") ctx.report("layout", msg); else ctx.report("data", msg); };
+    pl.notes.forEach(function(n){ report(n[0], n[1]); });
+    this.classList.add("plot"); this.style.display = "block";
+    var ja = this.ja = /^ja\b/i.test(ctx.lang);
+    var est = function(s, size){ return [...String(s).replace(/[*_^]/g, "")].reduce(function(a, c){ return a + (/[\u0000-ɏ]/.test(c) ? 0.56 : 1); }, 0) * size; };
+    var colorOf = function(c, i){ return /^(term|emph|muted|accent2|fg|series-[1-4])$/.test(c || "") ? "var(--" + c + ")" : null; };
+    var two = pl.ser.length > 1, dots = pl.kind === "dots", bins = pl.bins;
+    pl.ser.forEach(function(s, i){ s.col = colorOf(s.tone) || (two ? "var(--series-" + (i + 1) + ")" : "var(--term)"); });
+    var W = this.clientWidth, H = this.clientHeight;
+    // 高さ：度数・相対度数・累積度数
+    var heights = function(c, n){ var h = pl.cum ? S.cumulative(c) : c.slice(); return pl.rel ? h.map(function(v){ return v / n; }) : h; };
+    // 横軸の範囲と目盛り
+    var xr = P.xr, xt = P.xt;
+    if (!xr){
+      if (bins) xr = pl.poly && !pl.cum ? [S.clean(bins.start - bins.width), S.clean(bins.edges[bins.nb] + bins.width)] : [bins.start, bins.edges[bins.nb]];
+      else { var st0 = dotStep(pl.hi - pl.lo); xr = [S.clean(Math.floor(pl.lo / st0 + 1e-9) * st0), S.clean(Math.ceil(pl.hi / st0 - 1e-9) * st0)]; if (xr[0] === xr[1]) xr = [xr[0] - st0, xr[1] + st0]; }
+    }
+    if (!xt){
+      if (bins){
+        // 階級の境（度数折れ線のために足した両端の階級には目盛りの数を書かない）
+        var ed = bins.edges.filter(function(v){ return v >= xr[0] - 1e-9 && v <= xr[1] + 1e-9; });
+        // 目盛りの数が重ならないように間引く（目盛りの数の幅＋12 px が、境の間隔の何個分か）
+        var dd0 = Math.max.apply(null, ed.map(function(x){ var mm = String(x).match(/\.(\d+)$/); return mm ? mm[1].length : 0; }).concat([0]));
+        var lw0 = Math.max.apply(null, ed.map(function(x){ return est(x.toFixed(dd0), 24); })) + 12;
+        var pxBin = (W - (dots ? 56 : 130)) * bins.width / (xr[1] - xr[0]);
+        var every = Math.max(Math.ceil(ed.length / 13), Math.ceil(lw0 / Math.max(1, pxBin))); xt = ed.filter(function(x, j){ return j % every === 0; });
+      } else { var st1 = dotStep(xr[1] - xr[0]); xt = []; for (var u = Math.ceil(xr[0] / st1 - 1e-9) * st1; u <= xr[1] + st1 * 1e-6; u += st1) xt.push(S.clean(u)); }
+    }
+    var xf = P.xf !== undefined ? P.xf : Math.max.apply(null, xt.map(function(x){ var m = String(x).match(/\.(\d+)$/); return m ? m[1].length : 0; }).concat([0]));
+    // 縦軸（柱状グラフ）
+    var yr = P.yr, yt = P.yt, yf = P.yf, top = 1e-9;
+    if (!dots){
+      pl.ser.forEach(function(s){ top = Math.max(top, Math.max.apply(null, heights(s.counts, s.n))); });
+      if (!yr){ var ys = niceStep(top * 1.12 / 5, !pl.rel); yr = [0, S.clean(Math.ceil(top * 1.12 / ys - 1e-9) * ys)]; }
+      if (!yt){ var ys2 = niceStep((yr[1] - yr[0]) / 5, !pl.rel); yt = []; for (var q = Math.ceil(yr[0] / ys2 - 1e-9) * ys2; q <= yr[1] + ys2 * 1e-6; q += ys2) yt.push(S.clean(q)); }
+      if (yf === undefined) yf = Math.max.apply(null, yt.map(function(x){ var m = String(x).match(/\.(\d+)$/); return m ? m[1].length : 0; }).concat([0]));
+    } else { yr = [0, 1]; yt = []; }
+    var yl = dots ? "" : P.yl || (pl.cum ? (pl.rel ? (ja ? "累積相対度数" : "Cumulative relative frequency") : (ja ? "累積度数" : "Cumulative frequency")) : pl.rel ? (ja ? "相対度数" : "Relative frequency") : (ja ? "度数" : "Frequency"));
+    var yw = Math.max.apply(null, yt.map(function(v){ return est(v.toFixed(yf), 24); }).concat([0]));
+    var m = {l: dots ? 28 : Math.max(64, yw + 22 + (yl ? 40 : 0)), r: 28, t: 16, b: P.xl ? 70 : 44};
+    // 系列の名前（2 つのとき）：図の上に右寄せで、印と一緒に
+    // 2 組の名前はいつも出す（label が無ければ「1 組目」「2 組目」にして知らせる）
+    if (two) pl.ser.forEach(function(s, i){ if (!s.label){ s.label = ja ? (i + 1) + " 組目" : "Group " + (i + 1); ctx.report("data", "[hist] series " + (i + 1) + " has no label; write \"label\" for the legend"); } });
+    var legendH = two ? 46 : 0;
+    // 代表値の名前：図の上の行に、印の線の頭の右か左に置く（ほかの名前と線に重ならない行へ）
+    var px0 = m.l, px1 = W - m.r, X = function(v){ return px0 + (v - xr[0]) / (xr[1] - xr[0]) * (px1 - px0); };
+    var NAMES = ja ? {mean: "平均値", median: "中央値", mode: "最頻値"} : {mean: "Mean", median: "Median", mode: "Mode"};
+    var flags = [];
+    pl.marks.forEach(function(mk){
+      mk.per.forEach(function(r, si){
+        if (!r) return;
+        var s = pl.ser[si], txt;
+        if (mk.type === "median" && r.cls) txt = (ja ? "中央値の階級 " : "Median class ") + self.fmt(r.cls[0]) + "〜" + self.fmt(r.cls[1]) + P.unit;
+        else txt = NAMES[mk.type] + " " + r.xs.map(function(x){ return self.fmt(x); }).join(", ") + P.unit;
+        flags.push({mk: mk, s: s, r: r, x: X(r.xs[0]), text: txt, w: est(txt, 24), col: two ? s.col : {mean: "var(--emph)", median: "var(--accent2)", mode: "var(--fg)"}[mk.type],
+          dash: {mean: null, median: "12 7", mode: "3 6"}[mk.type]});
+      });
+    });
+    var rows = FLAGS(flags, W, report);
+    m.t = legendH + (rows ? rows * 34 + 14 : 16);
+    // 数を棒の上に書く余白（系列が 1 つの柱状グラフ）
+    var p = this.p = plot.Plot(this, {xr: xr, yr: yr, xt: xt, yt: dots ? [] : yt, xf: xf, yf: yf, xl: P.xl, yl: yl, noY: dots, m: m});
+    var axl = p.svg.querySelectorAll("g.axes > line");
+    for (var a = 0; a < Math.min(dots ? 1 : 2, axl.length); a++) axl[a].setAttribute("class", "axis");
+    var x0 = m.l, x1 = W - m.r, y0 = m.t, y1 = H - m.b;
+    if (y1 - y0 < 60) ctx.report("size", "[hist] the element (" + W + "×" + H + " px) is too small for the figure; give it more height");
+    this.geo = {x0: x0, x1: x1, y0: y0, y1: y1, W: W, H: H};
+    var gB = D.el("g", {}, p.svg), gM = D.el("g", {}, p.svg), gP = D.el("g", {}, p.svg), gD = D.el("g", {}, p.svg), gT = D.el("g", {}, p.svg);
+    this.heights = heights;
+    // 柱状グラフ：系列ごとに階級の数だけの長方形（隙間なし）。2 系列は塗りを薄くして重ね、2 つ目は破線
+    if (!dots){
+      pl.ser.forEach(function(s, si){
+        s.H = heights(s.counts, s.n);
+        s.rects = bins.mids.map(function(mid, b){
+          var r = D.el("rect", {x: p.x(bins.edges[b]).toFixed(1), width: Math.max(0, p.x(bins.edges[b + 1]) - p.x(bins.edges[b])).toFixed(1), y: y1, height: 0,
+            fill: s.col, "fill-opacity": two ? 0.16 : 0.26, stroke: s.col, "stroke-width": two ? 3 : 2.5, opacity: 0, class: "outline"}, gB);
+          if (two && si === 1) r.setAttribute("stroke-dasharray", "10 6");
+          return r;
+        });
+        // 棒の上の数（系列が 1 つで、棒の幅に収まるとき）
+        var bw = p.x(bins.edges[1]) - p.x(bins.edges[0]);
+        s.nums = two ? [] : bins.mids.map(function(mid, b){
+          var txt = pl.rel ? s.H[b].toFixed(2) : String(s.H[b]);
+          if (est(txt, 24) > bw - 4) return null;
+          // 度数折れ線があれば、折れ線が棒の上を通らない側（となりの低い方）に寄せる（累積は右上がりなので左）
+          var x = p.x(mid), an = "middle";
+          if (pl.poly){
+            var hl = b ? s.H[b - 1] : 0, hr = b < bins.nb - 1 ? s.H[b + 1] : 0;
+            if (pl.cum || hl <= hr){ x = p.x(bins.edges[b]) + 6; an = "start"; } else { x = p.x(bins.edges[b + 1]) - 6; an = "end"; }
+          }
+          return D.el("text", {x: x.toFixed(1), y: y1, "font-size": 24, "text-anchor": an, fill: "var(--fg)", stroke: "var(--bg)", "stroke-width": 5,
+            "paint-order": "stroke", opacity: 0, style: "font-variant-numeric:tabular-nums"}, gT);
+        });
+        if (s.values){
+          // build="values"：値ごとの階級と、その値が積もる前の高さ・後の高さ
+          s.drops = s.values.map(function(v, j){
+            var b = S.binOf(v, bins.start, bins.width), cb = s.counts.map(function(){ return 0; });
+            for (var i = 0; i < j; i++) cb[S.binOf(s.values[i], bins.start, bins.width)]++;
+            var before = heights(cb, s.n)[b]; cb[b]++; var after = heights(cb, s.n)[b];
+            return {v: v, b: b, before: before, after: after};
+          });
+        }
+      });
+      // 落ちる値（build="values"）：1 つの箱と、間隔が広ければその値の数字
+      if (pl.build === "values"){
+        var bw2 = p.x(bins.edges[1]) - p.x(bins.edges[0]);
+        pl.ser.forEach(function(s){
+          var show = s.gap >= 0.2;
+          s.fall = s.drops.map(function(o){
+            var g = D.el("g", {opacity: 0}, gD);
+            D.el("rect", {x: (-bw2 / 2 + 4).toFixed(1), y: 0, width: Math.max(2, bw2 - 8).toFixed(1), height: 10, fill: s.col, "fill-opacity": 0.6, stroke: s.col, "stroke-width": 2}, g);
+            if (show) D.el("text", {x: 0, y: -8, "font-size": 24, "text-anchor": "middle", fill: "var(--fg)", stroke: "var(--bg)", "stroke-width": 5, "paint-order": "stroke"}, g).textContent = self.fmt(o.v);
+            return {g: g, rect: g.firstChild};
+          });
+        });
+      }
+      // 度数折れ線：両端に度数 0 の階級を足して階級値を結ぶ。累積度数なら階級の右の端を結ぶ
+      if (pl.poly){
+        pl.ser.forEach(function(s, si){
+          var pts = pl.cum ? [[bins.edges[0], 0]].concat(s.H.map(function(h, b){ return [bins.edges[b + 1], h]; }))
+                           : [[S.clean(bins.start - bins.width / 2), 0]].concat(s.H.map(function(h, b){ return [bins.mids[b], h]; })).concat([[S.clean(bins.edges[bins.nb] + bins.width / 2), 0]]);
+          var P2 = pts.map(function(q){ return [p.x(q[0]), p.y(q[1])]; }), len = 0;
+          for (var i = 1; i < P2.length; i++) len += Math.hypot(P2[i][0] - P2[i - 1][0], P2[i][1] - P2[i - 1][1]);
+          var col = two ? s.col : "var(--emph)";
+          var path = D.el("path", {d: P2.map(function(q, i){ return (i ? "L" : "M") + q[0].toFixed(1) + "," + q[1].toFixed(1); }).join(""), fill: "none", stroke: col, "stroke-width": 3.5, "stroke-linejoin": "round", opacity: 0}, gP);
+          var acc = 0, vs = P2.map(function(q, i){ if (i) acc += Math.hypot(q[0] - P2[i - 1][0], q[1] - P2[i - 1][1]); return {c: D.el("circle", {cx: q[0].toFixed(1), cy: q[1].toFixed(1), r: 5.5, fill: col, opacity: 0}, gP), f: len ? acc / len : 0}; });
+          s.poly = {path: path, len: len, vs: vs};
+        });
+      }
+    } else {
+      // ドットプロット：値（bins を書けば階級値）の上に、出てきた順に下から積む
+      var pos = function(v){ return pl.given ? bins.mids[S.binOf(v, bins.start, bins.width)] : v; };
+      var stack = {}, maxS = 1, xs = [];
+      pl.ser.forEach(function(s){ s.dpos = s.values.map(function(v){ var x = pos(v), k = String(x); stack[k] = (stack[k] || 0) + 1; maxS = Math.max(maxS, stack[k]); if (xs.indexOf(x) < 0) xs.push(x); return {x: x, lv: stack[k] - 1}; }); });
+      xs.sort(function(a2, b2){ return a2 - b2; });
+      var gapPx = Infinity; for (var i2 = 1; i2 < xs.length; i2++) gapPx = Math.min(gapPx, p.x(xs[i2]) - p.x(xs[i2 - 1]));
+      if (pl.given) gapPx = Math.min(gapPx, p.x(bins.edges[1]) - p.x(bins.edges[0]));
+      var R = Math.min(15, (y1 - y0 - 8) / (2 * maxS) - 1.5, isFinite(gapPx) ? gapPx / 2 - 1.5 : 15);
+      if (R < 4){ ctx.report("size", "[hist] the dots are too small (" + R.toFixed(1) + " px); give the element more height or fewer values"); R = Math.max(R, 2); }
+      this.R = R;
+      var shapes = [function(r){ return "M" + r + ",0A" + r + "," + r + " 0 1,1 " + (-r) + ",0A" + r + "," + r + " 0 1,1 " + r + ",0Z"; },
+                    function(r){ var s2 = r * 0.86; return "M" + (-s2) + "," + (-s2) + "H" + s2 + "V" + s2 + "H" + (-s2) + "Z"; }];
+      pl.ser.forEach(function(s, si){
+        s.dots = s.dpos.map(function(o){
+          var cx = p.x(o.x), cy = y1 - 3 - R - o.lv * (2 * R + 3);
+          return {cx: cx, cy: cy, lv: o.lv, g: D.el("path", {d: shapes[si](R), transform: "translate(" + cx.toFixed(1) + " " + cy.toFixed(1) + ")", fill: s.col, "fill-opacity": 0.9, opacity: 0}, gB)};
+        });
+        s.maxLv = Math.max.apply(null, s.dots.map(function(o){ return o.lv; }));
+      });
+    }
+    // 系列の名前（2 つのとき）
+    var lx = W - m.r;
+    pl.ser.slice().reverse().forEach(function(s, ri){
+      if (!legendH) return;
+      var si = pl.ser.length - 1 - ri, w = est(s.label, 24), sx = lx - w - 12 - 30;
+      var g = D.el("g", {opacity: 0}, gT);
+      if (dots) D.el("path", {d: si ? "M-10,-10H10V10H-10Z" : "M12,0A12,12 0 1,1 -12,0A12,12 0 1,1 12,0Z", fill: s.col, transform: "translate(" + (sx + 15) + " 24)"}, g);
+      else { var sw = D.el("rect", {x: sx, y: 13, width: 30, height: 22, fill: s.col, "fill-opacity": 0.16, stroke: s.col, "stroke-width": 3}, g); if (si) sw.setAttribute("stroke-dasharray", "8 5"); }
+      D.mtext(g, sx + 40, 33, s.label, {"font-size": 24, "font-weight": 700, fill: s.col});
+      s.leg = g; lx = sx - 32;
+    });
+    // 代表値の印：軸から名前の行まで伸びる線と名前
+    this.flags = flags.map(function(f){
+      var base = y0 - 14 - f.row * 34, tipY = base - 9;
+      var lines = f.r.xs.map(function(x, j){
+        var ln = D.el("line", {x1: p.x(x).toFixed(1), x2: p.x(x).toFixed(1), y1: y1, y2: j ? y0 - 4 : tipY, stroke: f.col, "stroke-width": 3.5, "stroke-linecap": "round", opacity: 0}, gM);
+        if (f.dash) ln.setAttribute("stroke-dasharray", f.dash);
+        return {el: ln, top: j ? y0 - 4 : tipY};
+      });
+      var tx = D.mtext(gT, f.a === "start" ? f.x + 8 : f.x - 8, base, f.text, {"text-anchor": f.a, "font-size": 24, "font-weight": 700, fill: f.col, opacity: 0});
+      return {f: f, lines: lines, text: tx};
+    });
+    function niceStep(r, whole){ var e = Math.pow(10, Math.floor(Math.log10(r))), x = r / e, s3 = (x <= 1 ? 1 : x <= 2 ? 2 : x <= 2.5 ? 2.5 : x <= 5 ? 5 : 10) * e; return whole ? (s3 === 2.5 ? 2 : Math.max(1, Math.round(s3))) : S.clean(s3); }
+    // ドットプロットの目盛り：整数の値で幅が 24 までなら 1 ずつ
+    function dotStep(span){ var allInt = pl.ser.every(function(s){ return s.values.every(function(v){ return v === Math.floor(v); }); }); return allInt && span <= 24 ? 1 : niceStep(Math.max(span, 1e-9) / 8, allInt); }
+  }
+  duration(k){
+    var P = this.props, pl = this.plan(), d = 0;
+    if (pl.build === "bins"){ if (k >= 1 && k <= pl.bins.nb) d = P.dur * 0.75; }
+    else pl.ser.forEach(function(s){ if (s.step === k) d = Math.max(d, s.len); });
+    if (k === pl.polyStep) d = Math.max(d, P.dur);
+    pl.marks.forEach(function(mk){ if (mk.step === k) d = Math.max(d, 0.7); });
+    return d;
+  }
+  render(k, t, ctx){
+    var P = this.props, D = base, pl = this.plan(), self = this, vr = this.variant, lecture = !!ctx.preview, p = this.p, g = this.geo, dur = P.dur;
+    // 段階 st の、時刻 at から len 秒の進み（授業の表示では先の段階を薄く：-1 を返す）
+    var ph = function(st, at, len){ return st < k ? 1 : st > k ? (lecture ? -1 : 0) : D.prog(t, at, len); };
+    var FAINT = 0.45;
+    if (lecture) FAINT = base.previewOpacity(this);   // 先の段階の薄さ：テーマの --preview-opacity（ないときは 0.45）
+    var binStep = function(b){ return pl.build === "bins" ? b + 1 : null; };
+    pl.ser.forEach(function(s){
+      if (s.leg){ var le = ph(pl.build === "bins" ? 1 : s.step, 0, 0.4); s.leg.setAttribute("opacity", (le < 0 ? FAINT : le).toFixed(3)); }
+      if (pl.kind === "dots"){
+        // 点：values は 1 つずつ落ちる。whole の fade はそろってフェード、grow は下の段から順に
+        var st = s.step, tt = st < k ? Infinity : st > k ? -1 : t;
+        s.dots.forEach(function(o, j){
+          var op = 1, dy = 0;
+          if (st > k){ op = lecture ? FAINT : 0; }
+          else if (tt !== Infinity){
+            if (pl.build === "values"){ var e = D.prog(tt, j * s.gap, pl.DROP); op = tt >= j * s.gap ? 1 : 0; dy = (1 - e) * (o.cy - (g.y0 - 10)); }
+            else if (vr === "grow"){ var span = dur * 0.7, sl = s.maxLv > 0 ? (span - 0.2) / (s.maxLv) : 0; op = D.prog(tt, o.lv * sl, 0.2); }
+            else op = D.prog(tt, 0, dur * 0.7);
+          }
+          o.g.setAttribute("opacity", op.toFixed(3));
+          o.g.setAttribute("transform", "translate(" + o.cx.toFixed(1) + " " + (o.cy - dy).toFixed(1) + ")");
+        });
+        return;
+      }
+      // 柱状グラフ
+      var vals = pl.build === "values" ? null : s.H, cur = s.H.slice(), fall = null;
+      if (pl.build === "values"){
+        var st2 = s.step;
+        if (st2 < k || (st2 > k && lecture)) cur = s.H.slice();
+        else if (st2 > k) cur = s.H.map(function(){ return 0; });
+        else {
+          // 落ちきった値だけを数える
+          var cb = s.counts.map(function(){ return 0; });
+          s.values.forEach(function(v, j){ if (t >= j * s.gap + pl.DROP) cb[s.drops[j].b]++; });
+          cur = self.heights(cb, s.n);
+          fall = true;
+        }
+      }
+      s.rects.forEach(function(r, b){
+        var st3 = pl.build === "bins" ? binStep(b) : s.step, e = ph(st3, 0, pl.build === "bins" ? dur * 0.75 : dur), h = cur[b], op = 1;
+        if (pl.build === "values"){ op = st3 > k ? (lecture ? FAINT : 0) : 1; e = 1; }
+        else if (e < 0){ op = FAINT; e = 1; }
+        else if (vr === "grow"){ h = s.H[b] * e; op = e > 0 ? 1 : 0; }
+        else op = e;
+        var yy = p.y(Math.max(0, h));
+        r.setAttribute("y", yy.toFixed(1)); r.setAttribute("height", Math.max(0, g.y1 - yy).toFixed(1));
+        r.setAttribute("opacity", (h > 0 ? op : 0).toFixed(3));
+        var nt = s.nums[b];
+        if (nt){
+          var no = pl.build === "values" ? (st3 > k ? (lecture ? FAINT : 0) : 1) : (function(){ var e2 = ph(st3, (pl.build === "bins" ? dur * 0.75 : dur) * 0.55, (pl.build === "bins" ? dur * 0.75 : dur) * 0.45); return e2 < 0 ? FAINT : e2; })();
+          var hv = pl.build === "values" ? h : s.H[b];
+          nt.textContent = pl.rel ? hv.toFixed(2) : String(Math.round(hv));
+          nt.setAttribute("y", (p.y(pl.build === "values" ? h : s.H[b]) - 8).toFixed(1));
+          nt.setAttribute("opacity", (hv > 0 ? no : 0).toFixed(3));   // 度数 0 の階級には書かない
+        }
+      });
+      if (s.fall) s.fall.forEach(function(f, j){
+        var o = s.drops[j], on = fall && t >= j * s.gap && t < j * s.gap + pl.DROP;
+        if (!on){ f.g.setAttribute("opacity", 0); return; }
+        var e = D.prog(t, j * s.gap, pl.DROP), yTop = p.y(o.after), yBot = p.y(o.before), hh = Math.max(4, yBot - yTop);
+        var y = D.lerp(g.y0 - hh - 6, yTop, e);
+        f.rect.setAttribute("height", hh.toFixed(1));
+        f.g.setAttribute("transform", "translate(" + p.x(pl.bins.mids[o.b]).toFixed(1) + " " + y.toFixed(1) + ")");
+        f.g.setAttribute("opacity", 1);
+      });
+      if (s.poly){
+        var e3 = ph(pl.polyStep, 0, dur), po = s.poly;
+        if (e3 < 0){ po.path.setAttribute("opacity", FAINT); po.path.removeAttribute("stroke-dasharray"); po.path.removeAttribute("stroke-dashoffset"); po.vs.forEach(function(v){ v.c.setAttribute("opacity", FAINT); }); }
+        else if (vr === "grow"){
+          po.path.setAttribute("stroke-dasharray", po.len.toFixed(1) + " " + (po.len + 10).toFixed(1));
+          po.path.setAttribute("stroke-dashoffset", (po.len * (1 - e3)).toFixed(1));
+          po.path.setAttribute("opacity", e3 > 0 ? 1 : 0);
+          po.vs.forEach(function(v){ v.c.setAttribute("opacity", e3 >= v.f - 1e-6 && e3 > 0 ? 1 : 0); });
+        } else { po.path.removeAttribute("stroke-dasharray"); po.path.removeAttribute("stroke-dashoffset"); po.path.setAttribute("opacity", e3.toFixed(3)); po.vs.forEach(function(v){ v.c.setAttribute("opacity", e3.toFixed(3)); }); }
+      }
+    });
+    // 代表値の印：fade は線と名前がフェード、grow は線が軸から上へ伸びてから名前
+    this.flags.forEach(function(F){
+      var e = ph(F.f.mk.step, 0, 0.7);
+      F.lines.forEach(function(L){
+        var y2 = L.top, op = e;
+        if (e < 0) op = FAINT;
+        else if (vr === "grow"){ y2 = D.lerp(g.y1, L.top, D.prog(t === Infinity || F.f.mk.step < k ? Infinity : t, 0, 0.45)); op = e > 0 ? 1 : 0; }
+        L.el.setAttribute("y2", y2.toFixed(1)); L.el.setAttribute("opacity", op.toFixed(3));
+      });
+      var te = vr === "grow" ? ph(F.f.mk.step, 0.35, 0.35) : e;
+      F.text.setAttribute("opacity", (te < 0 ? FAINT : te).toFixed(3));
+    });
+  }
+};
+});

package/vendor/components/sha256/0b97f68e55cdba5b9953775a5e79b4005f3f745b41756e4103556ef33a93d614/README.md

@@ -0,0 +1,48 @@
+---
+name: m-menu
+series: common
+summary: スライドへのリンクの札を格子に並べる（目次・単元の選び方）。札はふつうの <a href="#<スライドの id>">、行ったスライドの札に「見た」の印
+steps: ceil(札の数 / per-step)（既定の per-step="0" なら 0：初めから全部）
+purposes: contents
+props: cols, per-step, size, fade, stagger, visited
+---
+
+目次、授業の単元の選び方、「どこから見るか」を選ばせる 1 枚に使う。
+<!-- llm: omit -->
+札は子に書いたふつうのリンクで、部品は見た目（格子・丸の字・副題・印）を整えるだけ。押したときの動きは実行系（`kit/deck.js`）が受け持つ
+（[format spec §9.1A](https://github.com/egatari/egatari-spec/blob/main/egatari-1.0.md#91a-links-to-slides)、`docs/contract.md` §9）。
+
+<!-- llm: end -->
+```html
+<m-menu cols="3" aria-label="今日の内容">
+  <a href="#s-njd4kp" data-icon="一" data-sub="孟浩然">春暁</a>
+  <a href="#s-uhqygr:2" data-icon="二" data-sub="読む順から">春望</a>
+  <a href="lesson2.ega.html" data-sub="次の課">返り点の練習</a>
+</m-menu>
+```
+
+- 子の `<a href>` 1 つが札 1 枚。`href` は `#<スライドの id>`（その段階 0）か `#<id>:<段階の鍵>`（`0`・`1`・… か `concl`）。id は `npm run ids` が付けたもの。中身（文字・`<b>` など）が札の題になる
+- `data-icon`：題の左の丸に入れる短い字（`一`・`1`・`A` など。色は `--term`）。`data-sub`：題の下の副題（`--muted`）
+<!-- llm: omit -->
+- ほかのファイルへのリンク（`other.ega.html#s-…`）はふつうのリンクで、札の右下に「別のファイル」の印。そのファイルは 1 ファイル（.ega.html）には入らない
+- 押すと：発表ではその段階の最終状態へ、自動再生中ならそこから再生を続ける。行った先の左上に「戻る」（Backspace・Alt+←・ブラウザの戻る）
+- 「見た」の印：このセッションで札の行き先のスライドを開いたら、札の右上に ✓（保存しない。開き直すと消える）。動画では付けず、印刷に出ない。
+  発表の操作の側の表示で `DECK.seek(i, k, t)` の外（`m-kobun` の札と同じ扱い）。`visited="false"` で付けない
+<!-- llm: end -->
+- 段階：`per-step="n"` なら札が n 枚ずつ段階ごとに出る（`data-from` から。同じ段階の中は `stagger` 秒ずつずれる）。まだ出ていない札は押せず、Tab でも選べず、読み上げない。
+  `per-step="0"`（既定）なら初めから全部（段階を使わない）。段階は (k, t) だけで決まる
+- 並び：`cols`（既定は札の数から：3 枚までは 1 行、4 枚は 2 列、それより多ければ 3 列）。札の高さの下限は CSS の `--mm-h`（既定 104px）、間は `--mm-gap`（18px）。
+  本文いっぱいに置いて縦の真ん中にそろえるなら `style="height:100%;align-content:center;--mm-h:150px"`
+<!-- llm: omit -->
+- 字の大きさ：題は `size`（既定 34px）、副題はその 0.8 倍（本文の下限の 27px より小さくしない）
+<!-- llm: end -->
+
+見本は `demo.html`（4 枚、2 枚ずつ出る目次）と `examples/kokugo-kanbun` の 2 枚目（6 枚の目次）。
+
+<!-- llm: omit -->
+注意
+
+- スクリプトなしで開いたとき（1 ファイル（.ega.html）の読める層、印刷の前の HTML）は、ふつうのリンクの並びとして読める
+- 部品は札の中身を組み替える（題・副題・丸の字を `span` で包む）が、`<a>` とその `href` は書いたまま
+- CSS の transition は使わない（実時間で動くので、画面が (k, t) で決まらなくなる）
+<!-- llm: end -->

package/vendor/components/sha256/0b97f68e55cdba5b9953775a5e79b4005f3f745b41756e4103556ef33a93d614/demo.html

@@ -0,0 +1,61 @@
+<!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-menu の見本</title>
+<!-- 組み方：node kit/build.mjs components/menu/demo.html -o components/menu/out/demo.html。札はふつうの <a href="#<スライドの id>"> -->
+</head>
+<body>
+<div id="stage">
+
+<section class="slide noconcl" id="s-menu01">
+  <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-menu per-step="2" aria-label="今日の内容">
+      <a href="#s-part01" data-icon="1" data-sub="何を確かめたいか">問い</a>
+      <a href="#s-part02" data-icon="2" data-sub="集め方と人数">方法</a>
+      <a href="#s-part03" data-icon="3" data-sub="図と数字">結果</a>
+      <a href="#s-part03:2" data-icon="4" data-sub="結果の 2 段目から">効果の大きさ</a>
+    </m-menu>
+  </div>
+</section>
+
+<section class="slide" id="s-part01">
+  <h2>問い</h2>
+  <div class="body">
+    <ul>
+      <li>短い復習は、次の週の小テストの点を上げるか</li>
+      <li>上がるなら、どのくらいか</li>
+    </ul>
+    <p><a href="#s-menu01">目次へ</a></p>
+  </div>
+  <div class="concl"><span>確かめたいのは、効果の有無と大きさ</span></div>
+</section>
+
+<section class="slide" id="s-part02">
+  <h2>方法</h2>
+  <div class="body">
+    <ul>
+      <li>2 つの組（各 30 人）で、片方だけ毎回 5 分の復習</li>
+      <li>4 週の小テストの平均を比べる</li>
+    </ul>
+  </div>
+  <div class="concl"><span>違いは復習の有無だけにそろえる</span></div>
+</section>
+
+<section class="slide" id="s-part03">
+  <h2>結果</h2>
+  <div class="body">
+    <ul>
+      <li>復習した組の平均は 72 点、しなかった組は 66 点</li>
+      <li>差は 6 点（数字は見本のための架空のもの）</li>
+    </ul>
+  </div>
+  <div class="concl"><span>短い復習でも、点に差が出た</span></div>
+</section>
+
+</div>
+</body>
+</html>