egatari 0.0.0-stage → 0.6.4

package/vendor/components/sha256/1783baf0a5eb04bb570ce4f2cffd09ab28c458f74286851fa90cfa0a4ff99fa9/index.js

@@ -0,0 +1,258 @@
+// m-scatter：散布図。点の組（系列）を段階ごとに出し、そのあと傾向の線を引く
+// <m-scatter xr="[20,36]" yr="[0,800]" xl="最高気温（℃）" yl="売上（個）" style="height:420px">
+//   <script type="application/json">{"series": [{"label": "晴れ", "points": [[24, 210], [31, 560]]}], "trend": "linear"}
+// （JSON の終わり）</m-scatter>
+// 段階：既定は系列 1 つ = 1 段階、そのあと傾向の線（全部で 1 段階）。系列・線の step で直接
+// 軸の属性（xr yr xt yt xf yf xl yl）は m-curves と同じ名前と意味。xr / yr を書かなければデータから切りのよい範囲を決め、
+// xt / yt を書かなければ目盛りも決める
+// 見せ方（docs/conventions.md §1）：fade（点がフェードして現れる、既定）・sweep（左から右へ順に現れる）・grow（点が小さい点から
+// 大きくなる）。傾向の線は fade では薄く現れ、sweep では左から引き、grow では真ん中から両側へ伸びる。段階の数・長さ・最後の中身は同じ
+// 2.0（Egatari spec §6.1 の部品）：base の MotionElement・el・mtext・prog・lerp・variant・previewOpacity と plot の Plot を使い、
+// プレイヤーのグローバルは使わない。名前の置き場がない・傾向の線が軸の外・上の名前が図より広い、は ctx.report で知らせる
+// （1.x は console.warn）
+egatariParts.define({name: "scatter", version: "2.0.0", requires: {base: "1.0.0", plot: "1.0.0"}, element: "m-scatter"}, function(deps){
+"use strict";
+var base = deps.base, plot = deps.plot;
+return class extends base.MotionElement {
+  static partName = "scatter";   // the registry name (define meta name), for report prefixes
+  static variants = ["fade", "sweep", "grow"];
+  // データの形（kit/shape.js）
+  static shape = (function(){
+    // 傾向の線の 2 点：ちょうど 2 つの [x, y]
+    var PTS = {type: "array", minItems: 2, maxItems: 2, items: {type: "array", minItems: 2, maxItems: 2, items: {type: "number"}}};
+    return {
+      schema: {type: "object", additionalProperties: false, required: ["series"], properties: {
+        series: {type: "array", minItems: 1, items: {type: "object", additionalProperties: false, required: ["points"], properties: {
+          label: {type: "string"}, tone: {type: "string"}, step: {type: "integer"}, at: {type: "number"},
+          points: {type: "array", items: {type: ["array", "object"], items: {type: "number"}, minItems: 2, maxItems: 2, required: ["x", "y"],
+            properties: {x: {type: "number"}, y: {type: "number"}, label: {type: "string"}, anchor: {enum: ["right", "left", "above", "below", "top", "bottom"]}, tone: {type: "string"}}}}}}},
+        trend: {type: ["string", "object", "array"], properties: {fit: {enum: ["linear"]}, pts: PTS, series: {type: ["integer", "array"]},
+          label: {type: "string"}, tone: {type: "string"}, dash: {type: "boolean"}, step: {type: "integer"}, at: {type: "number"}, digits: {type: "integer"}},
+          items: {type: "object", properties: {fit: {enum: ["linear"]}, pts: PTS, series: {type: ["integer", "array"]},
+            label: {type: "string"}, tone: {type: "string"}, dash: {type: "boolean"}, step: {type: "integer"}, at: {type: "number"}, digits: {type: "integer"}}}}}},
+      example: {series: [{label: "晴れ", points: [[24, 210], [28, 380], [31, 560], {x: 34, y: 690, label: "猛暑日"}]}], trend: "linear"},
+      note: {en: "points are [x, y] or {\"x\", \"y\", \"label\"}; axes go in attributes (xr=\"[0,10]\" xl=\"…\"); trend is \"linear\" or {\"fit\": \"linear\", \"label\": \"…\"} or {\"pts\": [[x0, y0], [x1, y1]]}",
+             ja: "点は [x, y] か {\"x\", \"y\", \"label\"}。軸は属性に書く（xr=\"[0,10]\" xl=\"…\"）。trend は \"linear\" か {\"fit\": \"linear\", \"label\": \"…\"} か {\"pts\": [[x0, y0], [x1, y1]]}"},
+    };
+  })();
+  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: ""},
+    r:   {type: "number", default: 9, doc: "点の半径（px）"},
+    dur: {type: "number", default: 1.0, doc: "1 段階の動きの秒数"},
+  };
+  get steps(){
+    if (this.getAttribute("steps") !== null) return +this.getAttribute("steps");
+    var m = 0, pl = this.plan();
+    pl.series.forEach(function(s){ m = Math.max(m, s.step); });
+    pl.trends.forEach(function(s){ m = Math.max(m, s.step); });
+    return m;
+  }
+  // 系列と傾向の線の段階（mount の前にも steps が要るので、データだけから決める）
+  plan(){
+    if (this._plan) return this._plan;
+    var d = this.data || {}, last = 0;
+    var series = (d.series || []).map(function(s, i){
+      var step = s.step !== undefined ? s.step : i + 1;
+      last = Math.max(last, step);
+      return {s: s, i: i, step: step, at: s.at || 0};
+    });
+    var tr = d.trend === undefined || d.trend === null || d.trend === false ? [] : Array.isArray(d.trend) ? d.trend : [d.trend];
+    var trends = tr.map(function(t, i){
+      if (typeof t === "string") t = {fit: t};   // "linear" のほかは mount で知らせる（steps の計算では投げない）
+      return {t: t, i: i, step: t.step !== undefined ? t.step : last + 1, at: t.at || 0};
+    });
+    return (this._plan = {series: series, trends: trends});
+  }
+  mount(ctx){
+    var P = this.props, D = base, self = this, pl = this.plan();
+    this.variant = base.variant(this);
+    this.classList.add("plot"); this.style.display = "block";
+    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){
+      if (!c) return "var(--series-" + (i % 4 + 1) + ")";
+      return /^(term|emph|muted|accent2|fg|series-[1-4])$/.test(c) ? "var(--" + c + ")" : "var(--series-" + (i % 4 + 1) + ")";
+    };
+    // 点を {x, y, label, anchor, tone} にそろえる
+    var all = [];
+    pl.series.forEach(function(o){
+      o.pts = (o.s.points || []).map(function(q){ var p = Array.isArray(q) ? {x: +q[0], y: +q[1]} : {x: +q.x, y: +q.y, label: q.label, anchor: q.anchor, tone: q.tone}; all.push(p); return p; });
+    });
+    // 軸の範囲と目盛り：書かれていなければデータから切りのよい数に
+    var auto = function(vals, pad){
+      var lo = Math.min.apply(null, vals), hi = Math.max.apply(null, vals);
+      if (!isFinite(lo)) return [0, 1];
+      if (hi === lo){ hi += 1; lo -= 1; }
+      var st = tickStep((hi - lo) * (1 + 2 * pad)), a = Math.floor((lo - (hi - lo) * pad) / st) * st, b = Math.ceil((hi + (hi - lo) * pad) / st) * st;
+      if (lo >= 0 && a < 0) a = 0;
+      return [+a.toFixed(10), +b.toFixed(10)];
+    };
+    var xr = P.xr || auto(all.map(function(p){ return p.x; }), 0.04), yr = P.yr || auto(all.map(function(p){ return p.y; }), 0.06);
+    var ticks = function(r){ var st = tickStep(r[1] - r[0]), out = []; for (var v = Math.ceil(r[0] / st - 1e-9) * st; v <= r[1] + st * 1e-6; v += st) out.push(+v.toFixed(10)); return out; };
+    var xt = P.xt || ticks(xr), yt = P.yt || ticks(yr);
+    var fmt = function(v, f){ return f !== undefined ? v.toFixed(f) : String(v); };
+    var named = pl.series.some(function(o){ return o.s.label; }) || pl.trends.some(function(o){ return o.t.label; });
+    var yw = Math.max.apply(null, yt.map(function(v){ return est(fmt(v, P.yf), 24); }).concat([0]));
+    var m = {l: Math.max(64, yw + 22 + (P.yl ? 40 : 0)), r: 24, t: named ? 72 : 20, b: P.xl ? 66 : 42};
+    var p = this.p = plot.Plot(this, {xr: xr, yr: yr, xt: xt, yt: yt, xf: P.xf, yf: P.yf, xl: P.xl, yl: P.yl, m: m});
+    // 軸の線（横軸と縦軸。目盛りの短い線は除く）に印を付ける（tools/test-components.mjs が字との交差を見る）
+    var axl = p.svg.querySelectorAll("g.axes > line");
+    for (var a = 0; a < Math.min(2, axl.length); a++) axl[a].setAttribute("class", "axis");
+    var W = p.W, H = p.H, x0 = m.l, x1 = W - m.r, y0 = m.t, y1 = H - m.b;
+    var gT = D.el("g", {}, p.svg), gP = D.el("g", {}, p.svg), gL = D.el("g", {}, p.svg);
+    var R = P.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 s = r * 0.86; return "M" + (-s) + "," + (-s) + "H" + s + "V" + s + "H" + (-s) + "Z"; },
+      function(r){ var s = r * 1.2; return "M0," + (-s) + "L" + (s * 0.95).toFixed(2) + "," + (s * 0.62).toFixed(2) + "H" + (-s * 0.95).toFixed(2) + "Z"; },
+      function(r){ var s = r * 1.2; return "M0," + (-s) + "L" + s + ",0L0," + s + "L" + (-s) + ",0Z"; }];
+    // 置いた字と点の箱（重なりを避ける）
+    var boxes = [];
+    all.forEach(function(q){ boxes.push({l: p.x(q.x) - R - 2, r: p.x(q.x) + R + 2, t: p.y(q.y) - R - 2, b: p.y(q.y) + R + 2, pt: q}); });
+    var hits = function(b, self2){ return boxes.some(function(o){ return o.pt !== self2 && b.l < o.r && o.l < b.r && b.t < o.b && o.t < b.b; }); };
+    this.series = pl.series.map(function(o){
+      var col = colorOf(o.s.tone, o.i), path = shapes[o.i % 4](R);
+      var marks = o.pts.map(function(q){
+        var g = D.el("g", {transform: "translate(" + p.x(q.x).toFixed(1) + " " + p.y(q.y).toFixed(1) + ")", opacity: 0}, gP);
+        var c = q.tone ? colorOf(q.tone, o.i) : col;
+        var sh = D.el("path", {d: path, fill: c, "fill-opacity": 0.85, stroke: "var(--bg)", "stroke-width": 1.5}, g);
+        return {q: q, g: g, sh: sh, cx: p.x(q.x), cy: p.y(q.y)};
+      });
+      // 左から右の順（sweep）
+      var order = marks.slice().sort(function(u, v){ return u.cx - v.cx; });
+      order.forEach(function(mk, j){ mk.rank = order.length > 1 ? j / (order.length - 1) : 0; });
+      // 名前のある点：右 → 左 → 上 → 下（anchor があればそれを先に）の順に、点・字・軸と重ならず枠に収まる所へ
+      var labels = marks.filter(function(mk){ return mk.q.label; }).map(function(mk){
+        var w = est(mk.q.label, 24), cands = {
+          right: {x: mk.cx + R + 8, y: mk.cy + 8, a: "start", b: {l: mk.cx + R + 6, r: mk.cx + R + 10 + w, t: mk.cy - 14, b: mk.cy + 12}},
+          left: {x: mk.cx - R - 8, y: mk.cy + 8, a: "end", b: {l: mk.cx - R - 10 - w, r: mk.cx - R - 6, t: mk.cy - 14, b: mk.cy + 12}},
+          above: {x: mk.cx, y: mk.cy - R - 10, a: "middle", b: {l: mk.cx - w / 2 - 2, r: mk.cx + w / 2 + 2, t: mk.cy - R - 34, b: mk.cy - R - 4}},
+          below: {x: mk.cx, y: mk.cy + R + 28, a: "middle", b: {l: mk.cx - w / 2 - 2, r: mk.cx + w / 2 + 2, t: mk.cy + R + 4, b: mk.cy + R + 34}}};
+        var pref = ["right", "left", "above", "below"];
+        var an = {top: "above", bottom: "below"}[mk.q.anchor] || mk.q.anchor;   // top / bottom は above / below の別名
+        if (an) pref = [an].concat(pref.filter(function(x){ return x !== an; }));
+        var inPlot = function(b){ return b.l >= x0 + 4 && b.r <= x1 && b.t >= y0 && b.b <= y1 - 4; };
+        var inBox = function(b){ return b.l >= 0 && b.r <= W && b.t >= 0 && b.b <= H; };
+        var pick = pref.filter(function(k){ return inPlot(cands[k].b) && !hits(cands[k].b, mk.q); })[0]
+          || pref.filter(function(k){ return inBox(cands[k].b) && !hits(cands[k].b, mk.q); })[0];
+        if (!pick){ pick = pref.filter(function(k){ return inBox(cands[k].b); })[0] || pref[0]; ctx.report("layout", "[scatter] the label \"" + mk.q.label + "\" has no free place (it may overlap)"); }
+        var c = cands[pick];
+        boxes.push({l: c.b.l, r: c.b.r, t: c.b.t, b: c.b.b, pt: mk.q});
+        return D.mtext(gL, c.x, c.y, mk.q.label, {"text-anchor": c.a, "font-size": 24, fill: mk.q.tone ? colorOf(mk.q.tone, o.i) : "var(--fg)", opacity: 0});
+      });
+      return {o: o, col: col, path: path, marks: marks, labels: labels};
+    });
+    // 傾向の線：最小二乗の直線（fit: "linear"）か、2 点（pts）
+    this.trends = pl.trends.map(function(o){
+      var t = o.t, a, b, r = null, xa, xb;
+      var ya, yb;
+      if (t.pts){
+        if (t.pts.length !== 2 || !t.pts.every(function(q){ return Array.isArray(q) && q.length === 2 && q.every(isFinite); }))
+          throw new Error("trend.pts: write two points [[x0, y0], [x1, y1]]");
+        xa = +t.pts[0][0]; xb = +t.pts[1][0]; ya = +t.pts[0][1]; yb = +t.pts[1][1];
+        if (xa === xb && ya === yb) throw new Error("trend.pts: the two points are the same (write two different points)");
+        // 書いた 2 点をそのまま端にする（縦の線なら傾きと切片はない）
+        if (xb !== xa){ a = (yb - ya) / (xb - xa); b = ya - a * xa; } else { a = null; b = null; }
+      } else {
+        if (t.fit !== undefined && t.fit !== "linear") throw new Error('trend: "' + t.fit + '" is not "linear" (write "linear", {"fit": "linear"} or {"pts": [[x0, y0], [x1, y1]]})');
+        var use = t.series === undefined ? pl.series : [].concat(t.series).map(function(i){ return pl.series[i]; }).filter(Boolean);
+        var q = [].concat.apply([], use.map(function(s){ return s.pts; }));
+        if (q.length < 2) throw new Error("trend: a linear fit needs two or more points");
+        var n = q.length, sx = 0, sy = 0;
+        q.forEach(function(v){ sx += v.x; sy += v.y; });
+        var mx = sx / n, my = sy / n, sxx = 0, sxy = 0, syy = 0;
+        q.forEach(function(v){ sxx += (v.x - mx) * (v.x - mx); sxy += (v.x - mx) * (v.y - my); syy += (v.y - my) * (v.y - my); });
+        a = sxx ? sxy / sxx : 0; b = my - a * mx;
+        r = sxx && syy ? sxy / Math.sqrt(sxx * syy) : 0;
+        xa = Math.min.apply(null, q.map(function(v){ return v.x; })); xb = Math.max.apply(null, q.map(function(v){ return v.x; }));
+        ya = a * xa + b; yb = a * xb + b;
+      }
+      var col = t.tone ? colorOf(t.tone, 0) : "var(--fg)";
+      var A = [p.x(xa), p.y(ya)], B = [p.x(xb), p.y(yb)], out = false;
+      // 図の枠の中に切る（Liang–Barsky。clip-path は使わない）
+      var u0 = 0, u1 = 1, dx = B[0] - A[0], dy = B[1] - A[1];
+      [[-dx, A[0] - x0], [dx, x1 - A[0]], [-dy, A[1] - y0], [dy, y1 - A[1]]].forEach(function(c){
+        if (c[0] === 0){ if (c[1] < 0) u1 = -1; return; }
+        var u = c[1] / c[0];
+        if (c[0] < 0) u0 = Math.max(u0, u); else u1 = Math.min(u1, u);
+      });
+      // 枠の外の線は描かない（名前も図の上に出さない）
+      if (u1 <= u0){ out = true; ctx.report("range", "[scatter] the trend line is outside the axes (it is not drawn)"); }
+      else { B = [A[0] + dx * u1, A[1] + dy * u1]; A = [A[0] + dx * u0, A[1] + dy * u0]; }
+      var line = D.el("path", {d: "M0,0", fill: "none", stroke: col, "stroke-width": 3.5, "stroke-linecap": "round", opacity: 0}, gT);
+      if (t.dash) line.setAttribute("stroke-dasharray", "12 9");
+      // 名前：{r} {a} {b} を相関係数・傾き・切片に置き換える（digits 桁、既定 2）
+      var dg = t.digits !== undefined ? t.digits : 2, num = function(v){ return v === null ? "" : (v < 0 ? "−" : "") + Math.abs(v).toFixed(dg); };
+      var text = String(t.label || "").replace(/\{r\}/g, num(r)).replace(/\{a\}/g, num(a)).replace(/\{b\}/g, num(b));
+      var len = Math.hypot(B[0] - A[0], B[1] - A[1]);
+      return {o: o, line: line, text: out ? "" : text, col: col, A: A, B: B, len: len, dash: !!t.dash, out: out};
+    });
+    // 系列と傾向の線の名前：図の上（右寄せ）に印と一緒に並べる（凡例の箱は作らない。点や線と重ならない）
+    var lx = x1, entries = this.series.filter(function(se){ return se.o.s.label; }).map(function(se){ return {it: se, text: se.o.s.label, col: se.col, path: se.path}; })
+      .concat(this.trends.filter(function(tr){ return tr.text; }).map(function(tr){ return {it: tr, text: tr.text, col: tr.col, line: true, dash: tr.dash}; }));
+    // 印を左、字をその右に置く（字の幅は見積もりなので、ずれは右端に出る）
+    entries.reverse().forEach(function(en){
+      var w = est(en.text, 24), sw = en.line ? 40 : 2 * R, sx = lx - w - 10 - sw;
+      var g = D.el("g", {opacity: 0}, gL);
+      if (en.line){
+        var ln = D.el("line", {x1: sx, x2: sx + sw, y1: 26, y2: 26, stroke: en.col, "stroke-width": 3.5, "stroke-linecap": "round"}, g);
+        if (en.dash) ln.setAttribute("stroke-dasharray", "10 7");
+      } else D.el("path", {d: en.path, fill: en.col, "fill-opacity": 0.85, transform: "translate(" + (sx + R).toFixed(1) + " 26)"}, g);
+      D.mtext(g, sx + sw + 10, 34, en.text, {"font-size": 24, "font-weight": 700, fill: en.col});
+      en.it.leg = g;
+      lx = sx - 32;
+    });
+    if (lx + 32 < 0) ctx.report("size", "[scatter] the names above the figure are wider than the figure");
+    function tickStep(span){ var r = span / 5, e = Math.pow(10, Math.floor(Math.log10(r))), x = r / e;
+      return (x <= 1 ? 1 : x <= 2 ? 2 : x <= 2.5 ? 2.5 : x <= 5 ? 5 : 10) * e; }
+  }
+  duration(k){
+    var P = this.props, d = 0, pl = this.plan();
+    pl.series.forEach(function(o){ if (o.step === k) d = Math.max(d, o.at + P.dur); });
+    pl.trends.forEach(function(o){ if (o.step === k) d = Math.max(d, o.at + P.dur); });
+    return d;
+  }
+  cues(k){
+    var c = [], pl = this.plan();
+    pl.series.concat(pl.trends).forEach(function(o){ if (o.step === k && o.at > 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 P = this.props, D = base, vr = this.variant, dur = P.dur, lecture = !!ctx.preview, FAINT = 0.45;
+    if (lecture) FAINT = base.previewOpacity(this);   // 先の段階の薄さ：テーマの --preview-opacity（ないときは 0.45）
+    // この部品の段階の中の時刻（-1 = まだ。授業の表示では先の段階を薄く見せる）
+    var local = function(o){ return o.step < k ? Infinity : o.step > k ? -1 : t - o.at; };
+    var faint = function(o){ return lecture && o.step > k; };
+    this.series.forEach(function(se){
+      var o = se.o, tt = local(o), f = faint(o), span = dur * 0.7;
+      se.marks.forEach(function(mk){
+        var op, sc = 1;
+        if (f){ op = FAINT; }
+        else if (tt < 0){ op = 0; }
+        else if (vr === "sweep"){ op = D.prog(tt, mk.rank * (span - 0.2), 0.2); }
+        else if (vr === "grow"){ sc = D.prog(tt, 0, span); op = sc > 0 ? Math.min(1, sc * 3) : 0; }
+        else { op = D.prog(tt, 0, span); }
+        mk.g.setAttribute("opacity", op.toFixed(3));
+        mk.g.setAttribute("transform", "translate(" + mk.cx.toFixed(1) + " " + mk.cy.toFixed(1) + ")" + (sc < 1 ? " scale(" + Math.max(0.001, sc).toFixed(4) + ")" : ""));
+      });
+      var lo = f ? FAINT : tt < 0 ? 0 : D.prog(tt, dur * 0.6, dur * 0.4);
+      se.labels.forEach(function(l){ l.setAttribute("opacity", lo.toFixed(3)); });
+      if (se.leg) se.leg.setAttribute("opacity", (f ? FAINT : tt < 0 ? 0 : D.prog(tt, 0, dur * 0.5)).toFixed(3));
+    });
+    this.trends.forEach(function(tr){
+      var o = tr.o, tt = local(o), f = faint(o), span = dur * 0.7, A = tr.A, B = tr.B, e = f ? 1 : tt < 0 ? 0 : D.prog(tt, 0, span);
+      var s0 = 0, s1 = 1, op = e > 0 ? 1 : 0;
+      if (!f && vr === "sweep"){ s1 = e; }
+      else if (!f && vr === "grow"){ s0 = 0.5 - e / 2; s1 = 0.5 + e / 2; }
+      else op = e;
+      tr.line.setAttribute("d", "M" + D.lerp(A[0], B[0], s0).toFixed(1) + "," + D.lerp(A[1], B[1], s0).toFixed(1) + "L" + D.lerp(A[0], B[0], s1).toFixed(1) + "," + D.lerp(A[1], B[1], s1).toFixed(1));
+      if (tr.dash) tr.line.setAttribute("stroke-dashoffset", (s0 * tr.len).toFixed(1));
+      tr.line.setAttribute("opacity", (tr.out ? 0 : f ? FAINT : op).toFixed(3));
+      if (tr.leg) tr.leg.setAttribute("opacity", (f ? FAINT : tt < 0 ? 0 : D.prog(tt, span, dur * 0.3)).toFixed(3));
+    });
+  }
+};
+});

package/vendor/components/sha256/17e0e42b8e72b34ff4acf5ac64dbcdf4173949d41015ea6003f0f0a378f268bd/README.md

@@ -0,0 +1,33 @@
+---
+name: m-timer
+series: common
+summary: グループワークの進行タイマー。区切りごとに残り時間を大きく数え、区切りの一覧で今の区切りを示す
+steps: 0 準備の画面、区切り 1 つが 1 段階（その長さ = sec 秒）
+purposes: timebox
+variants: fade
+props: （なし）
+---
+
+依頼にグループワーク・作業時間・制限時間があるときだけ使う。→ キーで段階を進めると数え始める。
+
+子の JSON：`{"ready"?: {"title", "text"}, "phases": [{"title", "short"?, "text"?, "sec", "bells"?}], "bells"?: […], "labels"?: {…}}`
+
+- `sec` は秒の整数（3 分なら 180）。`short` は右の一覧に出す短い名前、`text` は 2 行まで
+- 最後の 1 分は赤、最後の 10 秒は時計が点滅
+- 字は `<html lang>` で日本語か英語。`labels` で変えられる：`total` `remaining` `done` `start` `next` `end` `min` `sec` `plus` `minus`
+- 実行系が対応していれば ＋1 分・−1 分のボタンが出る（同じスライドにいるあいだは延ばした時間が残る）
+- ベル（学会タイマーのように）：`"bells": [{"left": 300, "count": 1}, {"left": 120, "count": 2}, {"left": 0, "count": 3}]`（残り秒と回数）。全体か区切りごとに書く。書かなければ鳴らない
+
+<!-- llm: omit -->
+作る人向けの注（dev と確かめること）
+
+- 元は雲居玄道が研修の資料のために作った部品（デッキの中の部品から部品庫へ。データの形はそのまま使える。古い書き方の `"done": "終了"` も `labels.done` と `labels.end` として受け付ける。`steps` 属性が無ければ区切りの数）
+- 段階 k の t は経過時間なので、時計は (k, t) で決まる。`duration(k)` は作者の `sec`。fade（見せ方 0、これだけ）：区切りが始まると題・説明・時計が 0.4 秒でフェードして現れる
+- 終わった区切りは `--muted`（透明にはしない。4.5:1 を保つ）、今の区切りは `--term` の枠と `--term-tint`
+- 点滅は注目のためだけ（共通の決まり §1.2）。動画・最後の状態（t = ∞）では止まる。動きを減らす設定では実行系が t = ∞ で描くので、時計は始めから 0:00（実行系への相談：時計の部品は動きを減らす設定でも実時間で数えたい）
+- 授業の表示（lecture）でも先の区切りの時計は出さない（一覧はいつも全部見える）
+- ＋1 分・−1 分（仕様 §8.4 `ctx.extend(seconds)`、egatari-spec 485ae54）：render の ctx に `extend` があるときだけボタンを作る（Studio v0.4.3 には無いので出ない）。押すと `ctx.extend(±60)`。返り値が数ならそれを今の区切りの延長の合計とし、そうでなければ部品が合計を数える。縮めるのは 0:00 まで、延ばすのは 1 時間まで。延長は区切りごとの見る人の状態で、同じスライドにいるあいだは残り、`ctx.reset` と、それを渡さない Studio では `deck:pos` でほかのスライドから入ったときに戻る。変えたら `egatari-input`（`detail: {step, extend}`）。ボタンは 52 px の高さ、フォーカスがあれば `+` `-`。数字のキーは使わない。マウスで押した後はフォーカスを外す（Space で次の段階へ進めるように）
+- 動画ではボタンを作らず、延長も使わない。印刷では隠し、作者の秒数で描く
+- 区切りの始まりと終わりを `aria-live` で知らせる（毎秒は読まない）
+- `static interactive = true`・`static viewerInput = true`（index.js だけ）
+<!-- llm: end -->

package/vendor/components/sha256/17e0e42b8e72b34ff4acf5ac64dbcdf4173949d41015ea6003f0f0a378f268bd/demo.html

@@ -0,0 +1,50 @@
+<!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-timer の見本</title>
+<!-- 組み方：node kit/build.mjs components/timer/demo.html -o components/timer/out/demo.html（架空の研修。見本なので秒数は短い。授業では 180 など） -->
+<style>
+</style>
+</head>
+<body>
+<div id="stage">
+
+<section class="slide noconcl">
+  <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-timer style="height:420px">
+      <script type="application/json">{
+        "ready": {"title": "準備の確認", "text": "付箋とペン、A3 の用紙がそろっているか。\n終わらなくてよい。書けた所までを持ち帰る。"},
+        "phases": [
+          {"title": "① 付箋に書く", "short": "付箋に書く", "sec": 90, "text": "職場の困りごとを、付箋 1 枚に 1 件。\n個人で、3 枚を目安に。"},
+          {"title": "② 島で読み上げる", "short": "島で読み上げる", "sec": 15, "text": "順に読み上げて貼る。近いものを寄せる。"},
+          {"title": "③ 1 つ選ぶ", "short": "1 つ選ぶ", "sec": 20, "text": "よく起きて、手間の大きいものを 1 つ選ぶ。"}
+        ],
+        "bells": [{"left": 60, "count": 1}, {"left": 10, "count": 2}, {"left": 0, "count": 3}]
+      }</script>
+    </m-timer>
+  </div>
+</section>
+
+<section class="slide noconcl">
+  <h2>字を変える（labels）</h2>
+  <div class="body">
+    <m-timer style="height:470px">
+      <script type="application/json">{
+        "ready": {"title": "合図を待つ", "text": "全員が席に着いたら始める。"},
+        "phases": [
+          {"title": "考える時間", "short": "1 人で考える", "sec": 20, "text": "話さずに、自分の考えをメモに書く。"},
+          {"title": "話す時間", "short": "2 人で話す", "sec": 15, "text": "隣の人と、メモを見せ合う。"}
+        ],
+        "labels": {"total": "全部で", "remaining": "あと", "done": "そこまで", "start": "合図で始めます", "next": "そこまで。次へ進みます", "end": "そこまで"}
+      }</script>
+    </m-timer>
+  </div>
+</section>
+
+</div>
+</body>
+</html>

package/vendor/components/sha256/17e0e42b8e72b34ff4acf5ac64dbcdf4173949d41015ea6003f0f0a378f268bd/index.js

@@ -0,0 +1,231 @@
+// m-timer：グループワークの進行タイマー。段階 0 は準備の画面、段階 k で phases[k-1] の残り時間を数える（元は雲居玄道が研修の資料のために作った部品）
+// <m-timer style="height:432px"><script type="application/json">
+//   {"ready": {"title": "準備の確認", "text": "用紙とペンがそろっているか"},
+//    "phases": [{"title": "① 付箋に書く", "short": "付箋に書く", "text": "1 枚に 1 件", "sec": 180}, …]}
+// （JSON の終わり）</m-timer>
+// duration(k) = phases[k-1].sec。実行系は t を実時間で進めるので、時計は (k, t) だけで決まる。→ キー（段階を進める）がスタートの合図
+// 左：題・説明・残り時間の大きな時計・進みの棒。右：区切りの一覧（今の区切りに枠、終わった区切りは --muted）
+// 最後の 1 分は時計と棒が --emph。最後の 10 秒は時計が 1 秒おきに薄くなる（注目のため。動画・動きを減らす設定・最後の状態では止まる）
+// 字は部品の中に書かない：<html lang> で日本語か英語の表を選び、データの labels で上書きできる
+// ＋1 分・−1 分（仕様 §8.4 ctx.extend、egatari-spec 485ae54）：実行系が ctx.extend を渡すときだけボタンを出す。延ばした秒数は見る人の状態で、
+//   同じスライドにいるあいだは残り、ほかのスライドから入ったとき・飛んだとき（ctx.reset）に戻る。動画・印刷は作者の秒数
+(function(){
+DECK.define("m-timer", class extends DECK.MotionElement {
+  static variants = ["fade"];
+  static interactive = true;   // 操作できるパーツ（docs/conventions.md §6）
+  static clock = true;         // 経った時間そのものが中身：動きを減らす設定でも実時間の t で描く（仕様 §9.1）
+  // 「道具」の組（頼まれたときだけ使う部品）と、新規作成の道具の札（docs/conventions.md §7。tools/release.mjs が manifest に写す。JSON で書く）
+  static group = "tool";
+  static tile = {"label": {"ja": "タイマー", "en": "Timer"}, "examples": {"ja": "グループワークの時間・残り時間・ベル", "en": "Group-work time, time left, bells"}, "icon": "timer"};
+  static viewerInput = true;   // 見る人の入力（区切りの時間を延ばす・縮める。仕様 §8.4）
+  // データの形（kit/shape.js）
+  static shape = {
+    schema: {type: "object", additionalProperties: false, required: ["phases"], properties: {
+      ready: {type: "object", additionalProperties: false, properties: {title: {type: "string"}, text: {type: "string"}}},
+      phases: {type: "array", minItems: 1, maxItems: 8, items: {type: "object", additionalProperties: false, required: ["title", "sec"], properties: {
+        title: {type: "string"}, short: {type: "string"}, text: {type: "string"}, sec: {type: "integer"}, bells: {type: "array", maxItems: 6, items: {type: "object", additionalProperties: false, required: ["left"], properties: {left: {type: "integer"}, count: {type: "integer"}}}}}}},
+      bells: {type: "array", maxItems: 6, items: {type: "object", additionalProperties: false, required: ["left"], properties: {left: {type: "integer"}, count: {type: "integer"}}}},
+      done: {type: "string"},
+      labels: {type: "object", additionalProperties: false, properties: {
+        ready: {type: "string"}, total: {type: "string"}, remaining: {type: "string"}, done: {type: "string"}, start: {type: "string"},
+        next: {type: "string"}, end: {type: "string"}, min: {type: "string"}, sec: {type: "string"}, plus: {type: "string"}, minus: {type: "string"}}}}},
+    example: {ready: {title: "準備の確認", text: "用紙とペンがそろっているか"}, phases: [{title: "① 付箋に書く", short: "付箋に書く", sec: 180}, {title: "② 島で選ぶ", short: "島で選ぶ", sec: 300}]},
+    note: {en: "phases is a list of {\"title\", \"sec\"} (sec: whole seconds, not \"3分\"); one phase per step",
+           ja: "phases は {\"title\", \"sec\"} の並び（sec は秒の整数。\"3分\" のような字ではない）。区切り 1 つが 1 段階"},
+  };
+  static props = {};
+  get steps(){ return this.getAttribute("steps") !== null ? +this.getAttribute("steps") : ((this.data || {}).phases || []).length; }
+  // 字の表（<html lang> で選ぶ。データの labels が勝つ。古い書き方の "done" も受け付ける）
+  get L(){
+    if (this._L) return this._L;
+    var d = this.data || {}, base = DECK.ja ? JA : EN, o = {};
+    for (var k in base) o[k] = base[k];
+    if (typeof d.done === "string") o.done = o.end = d.done;
+    var lb = d.labels || {};
+    for (var j in lb) o[j] = lb[j];
+    return (this._L = o);
+  }
+  mount(){
+    var self = this, D = DECK, d = this.data || {}, L = this.L;
+    this.P = d.phases || [];
+    if (this.P.some(function(p){ return !(p.sec > 0); })) throw new Error("every phase needs sec > 0 (whole seconds)");
+    this.video = D.mode === "video";
+    this.style.display = "block"; this.style.position = "relative";
+    if (!document.getElementById("m-timer-css")){ var st = document.createElement("style"); st.id = "m-timer-css"; st.textContent = CSS; document.head.appendChild(st); }
+    var W = this.clientWidth, H = this.clientHeight;
+    var f = this.f = Math.max(0.6, Math.min(1.2, H / 432, W / 1180)), F = function(z){ return Math.max(24, Math.round(z * f)); };
+    var LW = this.LW = W * 0.525, RX = W * 0.576;
+    var svg = D.el("svg", {viewBox: "0 0 " + W + " " + H, width: W, height: H, style: "display:block;overflow:visible"}, this);
+    var est = this.est = function(s, z){ return [...String(s)].reduce(function(a, c){ return a + (/[\u0000-ɏ]/.test(c) ? 0.56 : 1); }, 0) * z; };
+    // 題（長ければ 24 px まで小さく）と説明（2 行まで。幅で折り返す）
+    var fit = function(s, max, z, what){
+      var y = z; while (y > 24 && est(s, y) > max) y--;
+      if (est(s, y) > max) console.warn("m-timer: the " + what + " " + JSON.stringify(s) + " does not fit (" + Math.ceil(est(s, y) - max) + " px too wide); shorten it");
+      return y;
+    };
+    var wrap = function(s, max, z, what){
+      var out = [];
+      String(s || "").split("\n").forEach(function(line){
+        var cur = "";
+        [...line].forEach(function(c){ if (cur && est(cur + c, z) > max){ out.push(cur); cur = ""; } cur += c; });
+        out.push(cur);
+      });
+      if (out.length > 2) console.warn("m-timer: the text of " + what + " needs " + out.length + " lines (2 fit); shorten it");
+      return out.slice(0, 2);
+    };
+    var heads = [d.ready || {}].concat(this.P);
+    this.heads = heads.map(function(h, j){
+      var title = h.title || (j === 0 ? L.ready : "");
+      return {title: title, size: fit(title, LW, F(44), j ? "title of phase " + j : "ready title"), lines: wrap(h.text, LW, F(30), j ? "phase " + j : "ready")};
+    });
+    this.ttl = D.el("text", {x: 0, y: 46 * f, "font-weight": 700}, svg);
+    this.l1 = D.el("text", {x: 0, y: 96 * f, "font-size": F(30), fill: "var(--fg)"}, svg);
+    this.l2 = D.el("text", {x: 0, y: 136 * f, "font-size": F(30), fill: "var(--fg)"}, svg);
+    this.lab = D.el("text", {x: 0, y: 190 * f, "font-size": F(26), fill: "var(--muted)"}, svg);
+    // 時計：「00:00」が左の幅に収まる大きさ。字の上端が「残り」の字に重ならないように下げる
+    var cz = Math.min(150 * f, LW / 3.0), cy = 190 * f + 14 + cz * 0.98, by = cy + 18 * f;
+    this.clock = D.el("text", {x: 0, y: cy.toFixed(1), "font-size": cz.toFixed(0), "font-weight": 700, style: "font-variant-numeric:tabular-nums"}, svg);
+    D.el("rect", {x: 0, y: by.toFixed(1), width: LW, height: 20 * f, rx: 10 * f, fill: "var(--line)"}, svg);
+    this.bar = D.el("rect", {x: 0, y: by.toFixed(1), width: 0, height: 20 * f, rx: 10 * f}, svg);
+    if (by + 20 * f > H - 40 * f) console.warn("m-timer: the element is too low for the clock, the bar and the line under it (make it taller)");
+    this.foot = D.el("text", {x: 0, y: H - 4, "font-size": F(32), "font-weight": 700, fill: "var(--emph)"}, svg);
+    // 区切りの一覧
+    var n = this.P.length, top = 180 * f, rh = Math.min(48 * f, (H - top) / Math.max(n, 1));
+    if (rh < 34) console.warn("m-timer: " + n + " phases do not fit in the list (make the element taller or use fewer phases)");
+    this.rows = this.P.map(function(p, j){
+      var y = top + j * rh, s = (j + 1) + (DECK.ja ? "　" : "  ") + self.span(p.sec) + (DECK.ja ? "　" : "  ") + (p.short || p.title);
+      var box = D.el("rect", {x: RX, y: y, width: W - RX, height: rh - 6, rx: 8, fill: "none", stroke: "none", "stroke-width": 2.5}, svg);
+      var tx = D.el("text", {x: RX + 14, y: y + rh / 2 + 7, "font-size": fit(s, W - RX - 28, F(28), "phase list entry")}, svg);
+      tx.textContent = s;
+      return {box: box, tx: tx};
+    });
+    this.total = this.P.reduce(function(a, p){ return a + p.sec; }, 0);
+    // 読み上げソフトへの知らせ（区切りの始まりと終わりだけ。毎秒は読まない）
+    this.say = document.createElement("div"); this.say.className = "tm-say"; this.say.setAttribute("role", "status"); this.say.setAttribute("aria-live", "polite");
+    this.appendChild(this.say);
+    this._ext = {};
+    this.RX = RX; this.W = W;
+    if (!this.video){
+      // ctx.reset を渡さない Studio（v0.4.x）のための代わり：ほかのスライドからこのスライドに入ったときだけ戻す（m-predict と同じ）
+      var slide = this.closest("section"), mine = function(){ return DECK.slides ? [].indexOf.call(DECK.slides, slide) : -1; };
+      document.addEventListener("deck:pos", function(e){
+        var i = e.detail && e.detail.i, was = self._posI;
+        self._posI = i;
+        if (i === mine() && was !== i && self.reset()) self.redraw();
+      });
+      window.addEventListener("beforeprint", function(){ self._printing = true; self.redraw(); });
+      window.addEventListener("afterprint", function(){ self._printing = false; self.redraw(); });
+    }
+  }
+  // 秒数の書き方：「3分」「20秒」「1分30秒」（英語は 3 min・20 s）
+  span(s){
+    var L = this.L, m = Math.floor(s / 60), r = s % 60;
+    return s < 60 ? s + L.sec : r === 0 ? m + L.min : m + L.min + (DECK.ja ? "" : " ") + r + L.sec;
+  }
+  clockText(s){ s = Math.max(0, Math.ceil(s - 1e-9)); return Math.floor(s / 60) + ":" + ("0" + (s % 60)).slice(-2); }
+  duration(k){ return k >= 1 && this.P[k - 1] ? this.P[k - 1].sec : 0; }
+  // 学会タイマーのようなベル（仕様 §8.4「Component sounds」）：部品は音を鳴らさず、鳴らす時刻を宣言するだけ。鳴らすのは再生器
+  // （発表の再生で t が前へ越えたときだけ、Web Audio で合成。動画には同じ時刻で入る。延長は再生器がずらす）。
+  // bells は区切りの bells か、全体の bells：[{left: 残りの秒, count: 1〜3}]。書かなければ鳴らない。音だけに頼らず、時計と色でも示す
+  events(k){
+    var p = k >= 1 && this.P[k - 1];
+    if (!p) return [];
+    var bells = (p.bells || (this.data && this.data.bells) || []);
+    return bells.filter(function(b){ return b.left >= 0 && b.left <= p.sec; })
+      .map(function(b){ return {t: p.sec - b.left, sound: "bell", count: Math.max(1, Math.min(3, b.count || 1))}; })
+      .sort(function(a, b){ return a.t - b.t; });
+  }
+  // ---- 見る人の状態：区切りごとに延ばした秒数（−sec より短くはしない）
+  ext(k){ return this.video || this._printing ? 0 : this._ext[k] || 0; }
+  extend(dl){
+    var ctx = this._ctx, k = this._k;
+    if (this.video || !ctx || typeof ctx.extend !== "function" || !(k >= 1)) return;
+    var sec = this.P[k - 1].sec, cur = this._ext[k] || 0, el = this._t === Infinity ? sec + cur : Math.min(this._t || 0, sec + cur);
+    // 縮めるのは今の時刻まで（0:00 で終わる）。延ばすのは 1 時間まで
+    var next = Math.max(cur + dl, el - sec, -sec);
+    next = Math.min(next, 3600);
+    if (next === cur) return;
+    var r = ctx.extend(next - cur);
+    this._ext[k] = typeof r === "number" && isFinite(r) ? r : next;
+    this.redraw();
+    this.say.textContent = this.L.remaining + " " + this.clockText(sec + this._ext[k] - Math.min(el, sec + this._ext[k]));
+    this.dispatchEvent(new CustomEvent("egatari-input", {bubbles: true, detail: {step: k, extend: this._ext[k]}}));
+  }
+  reset(){
+    var had = Object.keys(this._ext).some(function(k){ return this._ext[k]; }, this);
+    this._ext = {};
+    if (had) this.dispatchEvent(new CustomEvent("egatari-input", {bubbles: true, detail: {step: this._k, extend: 0}}));
+    return had;
+  }
+  redraw(){ if (this._k !== undefined) this.render(this._k, this._t, this._ctx); }
+  // ＋1 分・−1 分：実行系が ctx.extend を渡したときに初めて作る（渡さない実行系・動画では作らない）
+  buttons(){
+    if (this.btns || this.video) return;
+    var self = this, L = this.L, box = this.btns = document.createElement("div");
+    box.className = "tm-ctl";
+    Object.assign(box.style, {left: this.RX + "px", top: Math.round(96 * this.f - 34) + "px"});
+    [[L.minus, -60], [L.plus, 60]].forEach(function(b){
+      var e = document.createElement("button");
+      e.type = "button"; e.className = "tm-btn"; e.textContent = b[0]; e.setAttribute("aria-label", b[0]);
+      e.addEventListener("click", function(ev){ ev.stopPropagation(); self.extend(b[1]); if (ev.detail !== 0) e.blur(); });
+      e.addEventListener("keydown", function(ev){
+        var up = ev.key === "+", dn = ev.key === "-" || ev.key === "−";
+        if (up || dn){ ev.preventDefault(); ev.stopPropagation(); self.extend(up ? 60 : -60); }
+      });
+      box.appendChild(e);
+    });
+    this.appendChild(box);
+  }
+  render(k, t, ctx){
+    var D = DECK, L = this.L, P = this.P, n = P.length, run = k >= 1 && P[k - 1];
+    if (ctx && ctx.reset) this.reset();
+    this._k = k; this._t = t; if (ctx) this._ctx = ctx;
+    var hasExt = !this.video && ctx && typeof ctx.extend === "function";
+    if (hasExt) this.buttons();
+    if (this.btns) this.btns.style.display = hasExt && run ? "" : "none";
+    // 延ばした合計は実行系が持つ（ctx.extend(0) は変えずに読むだけ。仕様 §8.4）。発表者の画面で延ばした分もこれでそろう
+    if (hasExt && run){ var r0 = ctx.extend(0); if (typeof r0 === "number" && isFinite(r0)) this._ext[k] = r0; }
+    var sec = run ? P[k - 1].sec : 0, end = sec + (run ? this.ext(k) : 0);
+    var el = !run ? 0 : t === Infinity ? end : Math.min(Math.max(0, t), end);
+    var rem = run ? end - el : this.total, finished = run && el >= end, warn = run && rem <= 60;
+    // fade（見せ方 0）：区切りが始まると、題・説明・時計がフェードして現れる
+    var a = run && t !== Infinity ? D.prog(t, 0, 0.4) : 1;
+    var h = this.heads[run ? k : 0];
+    this.ttl.textContent = h.title; this.ttl.setAttribute("font-size", h.size);
+    this.ttl.style.fill = run ? "var(--term)" : "var(--emph)";
+    this.l1.textContent = h.lines[0] || ""; this.l2.textContent = h.lines[1] || "";
+    [this.ttl, this.l1, this.l2].forEach(function(e){ e.setAttribute("opacity", a.toFixed(3)); });
+    this.lab.textContent = !run ? L.total : finished ? L.done : L.remaining;
+    this.clock.textContent = this.clockText(rem);
+    this.clock.style.fill = !run ? "var(--muted)" : warn || finished ? "var(--emph)" : "var(--fg)";
+    // 最後の 10 秒は 1 秒おきに薄く（注目のため。動画・最後の状態では止まる。動きを減らす設定では実行系が最後の状態で描く）
+    var pulse = run && !finished && rem <= 10 && t !== Infinity && !this.video && Math.floor(t) % 2 === 1;
+    this.clock.setAttribute("opacity", (pulse ? 0.45 : a).toFixed(3));
+    this.bar.setAttribute("width", (this.LW * (run ? el / end : 0)).toFixed(1));
+    this.bar.style.fill = warn || finished ? "var(--emph)" : "var(--term)";
+    this.foot.textContent = !run ? L.start : finished ? (k < n ? L.next : L.end) : "";
+    this.rows.forEach(function(r, j){
+      var cur = run && j + 1 === k, done = run && j + 1 < k;
+      r.box.style.fill = cur ? "var(--term-tint)" : "none";
+      r.box.style.stroke = cur ? "var(--term)" : "none";
+      // 終わった区切りは --muted（薄くしても 4.5:1 は保つので、透明にはしない）
+      r.tx.style.fill = done ? "var(--muted)" : "var(--fg)";
+      r.tx.setAttribute("font-weight", cur ? "700" : "400");
+    });
+    var s = !run ? "" : finished ? h.title + "：" + L.done : h.title;
+    if (this._said !== s && !this.video){ this._said = s; this.say.textContent = s; }
+  }
+});
+var JA = {ready: "準備の確認", total: "合計", remaining: "残り", done: "時間です", start: "準備ができたら　→ キーでスタート", next: "終了　→ キーで次へ", end: "終了",
+          min: "分", sec: "秒", plus: "＋1 分", minus: "−1 分"};
+var EN = {ready: "Ready?", total: "Total", remaining: "Remaining", done: "Time's up", start: "When ready, press → to start", next: "Time's up. Press → for the next", end: "Time's up",
+          min: " min", sec: " s", plus: "+1 min", minus: "−1 min"};
+var CSS = [
+  "m-timer .tm-say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}",
+  "m-timer .tm-ctl{position:absolute;display:flex;gap:12px}",
+  "m-timer .tm-btn{min-width:112px;height:52px;padding:0 14px;font:700 26px/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;touch-action:manipulation}",
+  "m-timer .tm-btn:active{background:var(--term-tint)}",
+  "m-timer .tm-btn:focus-visible{outline:3px solid var(--emph);outline-offset:2px}",
+  "@media print{m-timer .tm-ctl{display:none!important}}",
+].join("\n");
+})();

package/vendor/components/sha256/195331193a9d0a5677400f354cafb77ed1f7543b6996f07c0ccd934432c92463/README.md

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