egatari 0.0.0-stage → 0.6.4

package/vendor/components/sha256/da3812937f8937dc61bed434374bb80342d3d4f78b33602d5574d515b7444dec/index.js

@@ -0,0 +1,217 @@
+// m-venn：2 つか 3 つの集合の円（ベン図）。集合を 1 つずつ出し、最後に重なりを強めて、その中の項目を出す
+// <m-venn style="height:420px"><script type="application/json">
+//   {"sets": [{"label": "哺乳類"}, {"label": "海の生き物"}],
+//    "regions": {"A": ["ライオン", "ウマ"], "B": ["マグロ", "タコ"], "AB": ["クジラ", "イルカ"]}}
+// （JSON の終わり）</m-venn>
+// 円は左右対称の決まった配置（面積は値に比例させない）。2 つは左右に、3 つは左上・右上・下に置く。集合の名前は円の外に書く
+// regions の鍵は集合の文字（1 つ目 A、2 つ目 B、3 つ目 C）の組：A は「A だけ」、AB は「A と B（C ではない）」、ABC は 3 つとも
+// 項目は 1 つ 1 行で、その領域の中に収まる位置を探して置く（字数から幅を見積もる）。字は size から 24 px まで縮め、収まらなければ ctx.report（size）
+// 段階：既定は 集合を 1 つずつ（その集合だけの項目と一緒に）→ 重なり（項目のある重なりを --emph で囲んで薄く塗り、項目を出す）。
+// overlaps="each" なら重なりを 1 つずつ（AB・AC・BC・ABC の順）
+// 見せ方（docs/conventions.md §1）：fade（既定。円が薄く現れる）・draw（円の線を引いてから、塗りと字が現れる）。
+// どちらも長さは dur で、段階の数・長さ・最後の中身は変わらない
+// 2.0（Egatari spec §6.1 の部品）：base の MotionElement・el・mtext・prog・lerp・variant・previewOpacity を使い、プレイヤーのグローバルは使わない。
+// 切り抜き（clipPath）の id は venn-2-0-0-<n>-in<i>・-out<i>（部品の名前と版。n はこの部品の数え。1.x は m-venn-<n>）
+egatariParts.define({name: "venn", version: "2.0.0", requires: {base: "1.0.0"}, element: "m-venn"}, function(deps){
+"use strict";
+var base = deps.base;
+var ID = "venn-2-0-0-", count = 0;   // ids this part writes: its name and version, and a counter of its own (spec §6.1 Identifiers)
+// 形の要素ごとに、書き直すと形が作り直される属性（render の終わりで使う）
+var SHAPE_GEOM = {rect: "width", circle: "r", ellipse: "rx", path: "d", line: "x1", polyline: "points", polygon: "points"};
+return class extends base.MotionElement {
+  static partName = "venn";   // the registry name (define meta name), for report prefixes
+  static variants = ["fade", "draw"];
+  // データの形（kit/shape.js）
+  static shape = (function(){
+    var items = {type: ["array", "string"], items: {type: "string"}};
+    return {
+      schema: {type: "object", additionalProperties: false, required: ["sets"], properties: {
+        sets: {type: "array", minItems: 2, maxItems: 3, items: {type: "object", additionalProperties: false, required: ["label"], properties: {
+          label: {type: "string"}, tone: {type: "string"}}}},
+        regions: {type: "object", additionalProperties: false, properties: {A: items, B: items, C: items, AB: items, AC: items, BC: items, ABC: items}}}},
+      example: {sets: [{label: "哺乳類"}, {label: "海の生き物"}], regions: {A: ["ライオン"], B: ["マグロ"], AB: ["クジラ", "イルカ"]}},
+    };
+  })();
+  static props = {
+    size:     {type: "number", default: 26, doc: "項目の字の大きさ（px）。収まらなければ 24 まで縮める"},
+    dur:      {type: "number", default: 0.7, doc: "1 つの集合（と重なり）が現れる秒数"},
+    spread:   {type: "number", default: 1, doc: "円の中心の間の距離 ÷ 半径（小さいほど重なりが広い。0.7〜1.3）"},
+    overlaps: {type: "string", default: "together", doc: "together（重なりを 1 段階でまとめて）か each（1 つずつ）"},
+  };
+  // 項目のある重なりの鍵（なければ 2 つの集合の重なりすべて）。順は AB・AC・BC・ABC
+  overlapKeys(){
+    var d = this.data || {}, n = Math.min(3, (d.sets || []).length), R = d.regions || {};
+    var all = n === 3 ? ["AB", "AC", "BC", "ABC"] : ["AB"];
+    var has = all.filter(function(k){ var v = R[k]; return v && (Array.isArray(v) ? v.length : String(v).trim()); });
+    return has.length ? has : n === 3 ? ["AB", "AC", "BC", "ABC"] : ["AB"];
+  }
+  get steps(){
+    if (this.getAttribute("steps") !== null) return +this.getAttribute("steps");
+    var n = ((this.data || {}).sets || []).length;
+    return n + (this.props.overlaps === "each" ? this.overlapKeys().length : 1);
+  }
+  mount(ctx){
+    var P = this.props, D = base, data = this.data || {sets: []}, self = this, id = ID + (++count);
+    this.variant = base.variant(this);
+    // 形（static shape）では書けない決まり：集合が 2 つなら C を含む領域（C・AC・BC・ABC）は書けない。黙って項目を落とさない
+    if ((data.sets || []).length < 3){
+      var bad = Object.keys(data.regions || {}).filter(function(k){ return k.indexOf("C") >= 0; });
+      if (bad.length) throw new Error("m-venn: regions " + bad.join(", ") + " need a third set, but sets has " + (data.sets || []).length + " (with two sets write only A, B and AB)");
+    }
+    this.style.display = "block"; this.style.position = "relative";
+    var W = this.clientWidth, H = this.clientHeight;
+    var svg = D.el("svg", {viewBox: "0 0 " + W + " " + H, width: W, height: H, style: "display:block;overflow:visible"}, this);
+    var sets = data.sets || [], n = sets.length, R = data.regions || {}, LET = "ABC";
+    var TONES = /^(term|emph|muted|accent2|series-[1-4])$/, DEF = ["term", "accent2", "series-4"];
+    var tone = function(i){ return "var(--" + (TONES.test(sets[i].tone || "") ? sets[i].tone : DEF[i]) + ")"; };
+    var est = function(s, fs, bold){ return [...String(s)].reduce(function(a, c){ return a + (c === " " ? 0.33 : /[\u0000-ɏ]/.test(c) ? 0.6 : 1); }, 0) * fs * (bold ? 1.04 : 1); };
+    var linesOf = function(v){ return v === undefined ? [] : Array.isArray(v) ? v.map(String) : String(v).split("\n"); };
+    // 円の配置：名前の幅を外に取って、要素の箱に収まる最大の半径
+    var LS = 30, sp = Math.max(0.5, Math.min(1.5, P.spread));
+    var lab = sets.map(function(s){ return est(s.label, LS, true); });
+    var lw = Math.max.apply(null, lab.concat([0])) + 14;
+    var C = [], r;
+    if (n === 3){
+      // 左上 A・右上 B・下 C。高さ 2r + 0.866 d、幅 2r + d と左右の名前
+      r = Math.min((H - 8) / (2 + 0.866 * sp), (W - 2 * lw) / (2 + sp));
+      var d = sp * r, top = (H - (2 * r + 0.866 * d)) / 2 + r;
+      C = [{x: W / 2 - d / 2, y: top}, {x: W / 2 + d / 2, y: top}, {x: W / 2, y: top + 0.866 * d}];
+    } else {
+      r = Math.min((H - 8) / 2, (W - 2 * lw) / (2 + sp));
+      var d2 = sp * r;
+      C = [{x: W / 2 - d2 / 2, y: H / 2}, {x: W / 2 + d2 / 2, y: H / 2}];
+    }
+    C.forEach(function(c){ c.r = r; });
+    // 点 (x, y) を含む集合の文字の組（"", "A", "AB", …）
+    var keyAt = function(x, y){ var s = ""; for (var i = 0; i < n; i++) if ((x - C[i].x) * (x - C[i].x) + (y - C[i].y) * (y - C[i].y) < r * r) s += LET[i]; return s; };
+    var clear = function(x, y){ var m = Infinity; for (var i = 0; i < n; i++) m = Math.min(m, Math.abs(Math.hypot(x - C[i].x, y - C[i].y) - r)); return m; };
+    // 領域 key の中に、行の幅 ws・行の高さ lh の字の塊を置く位置：どの行の箱も領域の中にあり、円の線から最も離れる中心
+    var place = function(key, ws, lh){
+      var inc = [...key].map(function(ch){ return C[LET.indexOf(ch)]; });
+      var x0 = Math.max.apply(null, inc.map(function(c){ return c.x - r; })), x1 = Math.min.apply(null, inc.map(function(c){ return c.x + r; }));
+      var y0 = Math.max.apply(null, inc.map(function(c){ return c.y - r; })), y1 = Math.min.apply(null, inc.map(function(c){ return c.y + r; }));
+      var h = ws.length * lh, best = null, part = null, pad = 6;
+      for (var py = y0 + h / 2; py <= y1 - h / 2; py += 4) for (var px = x0; px <= x1; px += 4){
+        var sc = Infinity, inside = 0, tot = 0;
+        for (var j = 0; j < ws.length; j++){
+          var ya = py - h / 2 + j * lh - pad, yb = ya + lh + pad * 2, hw = ws[j] / 2 + pad, nx = Math.max(2, Math.ceil(hw / 20));
+          for (var q = 0; q <= nx; q++) for (var yy = 0; yy < 2; yy++){
+            var xx = px - hw + 2 * hw * q / nx, y = yy ? yb : ya;
+            tot++;
+            if (keyAt(xx, y) === key){ inside++; sc = Math.min(sc, clear(xx, y)); }
+          }
+        }
+        // 全部が中に入る位置のうち円の線から最も離れる所。なければ中に入る点の多い所（収まらない印 fit: false）
+        if (inside === tot){ if (!best || sc > best.sc + 0.01) best = {x: px, y: py, sc: sc, fit: true}; }
+        else if (!part || inside / tot > part.f + 1e-9) part = {x: px, y: py, f: inside / tot, fit: false};
+      }
+      return best || part;
+    };
+    var keys = n === 3 ? ["A", "B", "C", "AB", "AC", "BC", "ABC"] : ["A", "B", "AB"];
+    var L = null;
+    for (var fs = Math.max(24, P.size); fs >= 24; fs--){
+      var lh = Math.round(fs * 1.25), ok = true, pos = {};
+      keys.forEach(function(k){
+        var ls = linesOf(R[k]);
+        if (!ls.length) return;
+        var ws = ls.map(function(s){ return est(s, fs, k.length > 1); }), p = place(k, ws, lh);
+        if (!p || !p.fit){ ok = false; if (!p){ var inc = [...k].map(function(ch){ return C[LET.indexOf(ch)]; });
+          p = {x: inc.reduce(function(a, c){ return a + c.x; }, 0) / inc.length, y: inc.reduce(function(a, c){ return a + c.y; }, 0) / inc.length}; } }
+        pos[k] = {x: p.x, y: p.y, lines: ls};
+      });
+      L = {fs: fs, lh: lh, pos: pos, ok: ok};
+      if (ok) break;
+    }
+    if (!L.ok) ctx.report("size", "[venn] the items do not fit in their regions even at 24 px (shorten them or make the element larger)");
+    // 切り抜き：円 i の内（in）と外（out。大きな四角から円をくりぬく）
+    var defs = D.el("defs", {}, svg);
+    var circ = function(c){ return "M" + (c.x - r).toFixed(2) + "," + c.y.toFixed(2) + "a" + r.toFixed(2) + "," + r.toFixed(2) + " 0 1,0 " + (2 * r).toFixed(2) + ",0a" + r.toFixed(2) + "," + r.toFixed(2) + " 0 1,0 " + (-2 * r).toFixed(2) + ",0Z"; };
+    C.forEach(function(c, i){
+      D.el("circle", {cx: c.x, cy: c.y, r: r}, D.el("clipPath", {id: id + "-in" + i}, defs));
+      D.el("path", {d: "M-20,-20H" + (W + 20) + "V" + (H + 20) + "H-20Z" + circ(c), "clip-rule": "evenodd"}, D.el("clipPath", {id: id + "-out" + i}, defs));
+    });
+    // 領域 key の形に切り抜いた入れ物（except の円は切り抜きに使わない：その円の線を、その円の外側の条件なしで描くため）
+    var clipped = function(parent, key, except){
+      var g = parent;
+      for (var i = 0; i < n; i++){
+        if (i === except) continue;
+        g = D.el("g", {"clip-path": "url(#" + id + (key.indexOf(LET[i]) >= 0 ? "-in" : "-out") + i + ")"}, g);
+      }
+      return g;
+    };
+    var gFill = D.el("g", {}, svg), gLine = D.el("g", {}, svg), gHi = D.el("g", {}, svg), gText = D.el("g", {}, svg);
+    var text = function(g, k, bold){
+      var p = L.pos[k];
+      if (!p) return;
+      var y0 = p.y - (p.lines.length - 1) * L.lh / 2 + L.fs * 0.36;
+      p.lines.forEach(function(s, j){ D.mtext(g, p.x, y0 + j * L.lh, s, {"text-anchor": "middle", "font-size": L.fs, fill: "var(--fg)", "font-weight": bold ? 700 : 400}); });
+    };
+    // 集合：塗り・線・名前・その集合だけの項目
+    this.sets = C.map(function(c, i){
+      var col = tone(i), st = i + 1;
+      var fill = D.el("circle", {cx: c.x, cy: c.y, r: r, fill: col, "fill-opacity": 0.13, opacity: 0}, gFill);
+      var line = D.el("circle", {cx: c.x, cy: c.y, r: r, fill: "none", stroke: col, "stroke-width": 3, pathLength: 1, opacity: 0,
+        transform: "rotate(" + (i === 0 ? 180 : i === 1 ? 0 : 90) + " " + c.x.toFixed(2) + " " + c.y.toFixed(2) + ")"}, gLine);
+      var gt = D.el("g", {opacity: 0}, gText);
+      // 名前は円の外：A は左上、B は右上、C は右下
+      var ang = n === 3 ? [150, 30, -30][i] : [135, 45][i], ca = Math.cos(ang * Math.PI / 180), sa = Math.sin(ang * Math.PI / 180);
+      var lx = c.x + ca * (r + 12), ly = c.y - sa * (r + 12) + (sa < 0 ? LS * 0.8 : 0);
+      // 灰色の集合（--muted・--series-4）の名前は、ほかの円の薄い塗りに重なると 4.5:1 に届かないので --fg（共通の決まり §2.3）
+      D.mtext(gt, lx, ly, sets[i].label, {"text-anchor": ca < 0 ? "end" : "start", "font-size": LS, "font-weight": 700, fill: /muted|series-4/.test(col) ? "var(--fg)" : col});
+      text(gt, LET[i], false);
+      return {fill: fill, line: line, gt: gt, step: st};
+    });
+    // 重なり：--emph-tint で塗り、縁を --emph の線で囲み、項目を太字で出す
+    var oks = this.overlapKeys(), each = P.overlaps === "each";
+    this.hi = oks.map(function(k, j){
+      var g = D.el("g", {opacity: 0}, gHi);
+      D.el("rect", {x: -20, y: -20, width: W + 40, height: H + 40, fill: "var(--emph-tint)"}, clipped(g, k, -1));
+      for (var i = 0; i < n; i++) D.el("circle", {cx: C[i].x, cy: C[i].y, r: r, fill: "none", stroke: "var(--emph)", "stroke-width": 4}, clipped(g, k, i));
+      var gt = D.el("g", {opacity: 0}, gText);
+      text(gt, k, true);
+      return {g: g, gt: gt, step: n + (each ? j + 1 : 1)};
+    });
+    // 形の一覧（render の終わりに形を作り直すため。下の render を見る）
+    this.shapes = [].slice.call(svg.querySelectorAll("rect,circle,ellipse,path,line,polyline,polygon"));
+  }
+  duration(k){
+    return k >= 1 && k <= this.steps ? this.props.dur : 0;
+  }
+  cues(){ return null; }
+  render(k, t, ctx){
+    var D = base, F = this.props.dur, draw = this.variant === "draw", lecture = !!ctx.preview;
+    // 先の段階の薄さ：テーマの --preview-opacity（ないときは 0.45）
+    var dim = lecture ? base.previewOpacity(this) : 0.45;
+    // 段階 s の中の進み具合（0〜1）：start から len 秒。授業の表示では先の段階を dim の濃さで見せる
+    var pr = function(s, start, len){
+      var e = s < k ? 1 : s > k ? 0 : D.prog(t, start, len);
+      return lecture ? (s > k ? dim : s === k ? D.lerp(dim, 1, e) : 1) : e;
+    };
+    this.sets.forEach(function(o){
+      if (draw && !lecture){
+        // 線を引く（dur の 60 %）→ 塗りと字（後ろの 50 %）
+        var a = pr(o.step, 0, F * 0.6), b = pr(o.step, F * 0.5, F * 0.5);
+        o.line.setAttribute("opacity", a > 0 ? 1 : 0);
+        o.line.setAttribute("stroke-dasharray", a >= 1 ? "none" : a.toFixed(4) + " 1");
+        o.fill.setAttribute("opacity", b.toFixed(3));
+        o.gt.setAttribute("opacity", b.toFixed(3));
+      } else {
+        var e = pr(o.step, 0, F);
+        o.line.setAttribute("opacity", e.toFixed(3));
+        o.line.removeAttribute("stroke-dasharray");
+        o.fill.setAttribute("opacity", e.toFixed(3));
+        o.gt.setAttribute("opacity", e.toFixed(3));
+      }
+    });
+    // 重なり：塗りと縁（dur の前の 60 %）、項目（後ろの 60 %）。見せ方によらず同じ
+    this.hi.forEach(function(o){
+      o.g.setAttribute("opacity", pr(o.step, 0, F * 0.6).toFixed(3));
+      o.gt.setAttribute("opacity", pr(o.step, F * 0.4, F * 0.6).toFixed(3));
+    });
+    // 形を作り直す（同じ値を書き直すだけで、DOM は変わらない）。Chrome は、変わっていない形を近くの変化のために塗り直す（ラスタライズし直す）と、
+    // 2 回目からその形の輪郭（曲線の縁）を別の方法で描き、縁の画素が数十個変わる（ソフトウェアの GPU、CI の Linux・Windows）。
+    // 何回塗り直されたかは呼び出しの間にコマが描かれたかで決まるので、作り直さないと同じ (k, t) でも呼び出しの順と時刻で画素が変わる（docs/contract.md §3）
+    this.shapes.forEach(function(e){ var a = SHAPE_GEOM[e.localName], v = e.getAttribute(a); if (v !== null) e.setAttribute(a, v); });
+  }
+};
+});

package/vendor/components/sha256/db50cdaca9acb73c96d9159ed99fafa7b8a03592d26a7e38d2aabf9a5043cfe2/README.md

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

package/vendor/components/sha256/db50cdaca9acb73c96d9159ed99fafa7b8a03592d26a7e38d2aabf9a5043cfe2/demo.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="ja" data-theme="default">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>m-collect の見本</title>
+<!-- 組み方：node kit/build.mjs components/collect/demo.html -o components/collect/out/demo.html -->
+<style>
+</style>
+</head>
+<body>
+<script>
+// 見本の数値：8 回のコイン投げ（表なら 1）から、一様な事前分布 Beta(1,1) のもとでの事後平均と事後分散を計算する
+document.addEventListener("DOMContentLoaded", function(){
+  var ans = [1, 1, 0, 1, 1, 0, 1, 1], s = ans.reduce(function(a, b){ return a + b; }, 0), n = ans.length;
+  var al = 1 + s, be = 1 + n - s, mean = al / (al + be), v = al * be / (Math.pow(al + be, 2) * (al + be + 1));
+  document.getElementById("ans-data").textContent = JSON.stringify({
+    cols: 4,
+    chips: ans.map(function(x, i){ return {label: "試行 " + (i + 1) + "：" + (x ? "表" : "裏"), to: [0, 1]}; }),
+    targets: [{label: "事後平均", tex: "\\mathrm{E}[\\theta\\mid D]", value: mean.toFixed(3)},
+              {label: "事後分散", tex: "\\mathrm{Var}[\\theta\\mid D]", value: v.toFixed(4)}]
+  });
+});
+</script>
+<div id="stage">
+
+<section class="slide">
+  <h2>観測の要約</h2>
+  <div class="body">
+    <p data-step="1">8 回の観測は，事後分布の 2 つのモーメントにまとまる</p>
+    <m-collect data-from="2" box-w="300" box-h="120" style="height:340px">
+      <script type="application/json" id="ans-data">{}</script>
+    </m-collect>
+  </div>
+  <div class="concl"><span>→ 次の予測には，この 2 つの値だけ持てばよい</span></div>
+</section>
+
+</div>
+</body>
+</html>

package/vendor/components/sha256/db50cdaca9acb73c96d9159ed99fafa7b8a03592d26a7e38d2aabf9a5043cfe2/index.js

@@ -0,0 +1,95 @@
+// m-collect：並んだ札（回答など）が動いて縮み、少数の箱（要約）にまとまる
+// <m-collect style="height:400px"><script type="application/json">
+//   {"chips":[{"label":"回答 1","to":[0,1]}, …], "targets":[{"label":"事後平均","tex":"\\mu_n"}, …], "cols":4}
+// （JSON の終わり）</m-collect>
+// 段階 1 で、札 i が targets[to] へ動く（to は番号か番号の配列。配列なら札の写しがそれぞれへ動く）。
+// 箱は始めに点線の枠だけ出し、札が着いてから中身（label / tex / value）を出す
+DECK.define("m-collect", class extends DECK.MotionElement {
+  // データの形（kit/shape.js）
+  static shape = {
+    schema: {type: "object", additionalProperties: false, required: ["chips", "targets"], properties: {
+      chips: {type: "array", minItems: 1, items: {type: "object", required: ["to"], properties: {label: {type: "string"}, to: {type: ["integer", "array"], items: {type: "integer"}}}}},
+      targets: {type: "array", minItems: 1, items: {type: "object", properties: {label: {type: "string"}, tex: {type: "string"}, value: {type: ["string", "number"]}, tone: {type: "string"}, x: {type: "number"}, y: {type: "number"}}}},
+      cols: {type: "integer"}}},
+    example: {chips: [{label: "表", to: 0}, {label: "裏", to: 1}], targets: [{label: "表の数"}, {label: "裏の数"}], cols: 2},
+  };
+  static steps = 1;
+  static props = {
+    move:    {type: "number", default: 0.9, doc: "札 1 枚が動く秒数"},
+    stagger: {type: "number", default: 0.08, doc: "札ごとの出発のずれ（秒）"},
+    shrink:  {type: "number", default: 0.35, doc: "着いたときの札の縮尺"},
+    "chip-w": {type: "number", default: 0, doc: "札の幅（0 なら列の数から決める）"},
+    "chip-h": {type: "number", default: 56, doc: "札の高さ"},
+    "box-w":  {type: "number", default: 260, doc: "箱の幅"},
+    "box-h":  {type: "number", default: 110, doc: "箱の高さ"},
+  };
+  mount(){
+    var P = this.props, D = DECK, self = this, data = this.data || {chips: [], targets: []};
+    this.style.display = "block";
+    var W = this.clientWidth, H = this.clientHeight;
+    var svg = D.el("svg", {viewBox: "0 0 " + W + " " + H, width: W, height: H, style: "display:block;overflow:visible"}, this);
+    var tone = {term: ["var(--term)", "var(--term-tint)"], emph: ["var(--emph)", "var(--emph-tint)"], muted: ["var(--muted)", "var(--bg)"]};
+    // 札の並び：上の段に cols 列で並べる
+    var C = data.chips || [], n = C.length, cols = data.cols || n, rows = Math.ceil(n / cols), gap = 14;
+    var cw = P["chip-w"] || Math.min(220, (W - gap * (cols - 1)) / cols), ch = P["chip-h"];
+    var gx = (W - (cw * cols + gap * (cols - 1))) / 2;
+    // 箱の並び：下の段に等間隔（x, y を書けばその位置。中心の座標）
+    var T = data.targets || [], bw = P["box-w"], bh = P["box-h"];
+    this.targets = T.map(function(tg, j){
+      var cx = tg.x !== undefined ? tg.x : W * (j + 1) / (T.length + 1), cy = tg.y !== undefined ? tg.y : H - bh / 2 - 4;
+      var c = tone[tg.tone || "emph"] || tone.emph;
+      var frame = D.el("rect", {x: cx - bw / 2, y: cy - bh / 2, width: bw, height: bh, rx: 12, fill: "none", stroke: "var(--line)", "stroke-width": 2, "stroke-dasharray": "8 6", opacity: 0}, svg);
+      var g = D.el("g", {opacity: 0}, svg);
+      D.el("rect", {x: cx - bw / 2, y: cy - bh / 2, width: bw, height: bh, rx: 12, fill: c[1], stroke: c[0], "stroke-width": 3}, g);
+      var hasV = tg.value !== undefined, ly = cy + (hasV ? -16 : 9);
+      if (tg.tex) D.svgMath(g, cx, ly + 4, tg.tex, {size: 30, anchor: "middle", color: c[0], w: bw, h: 50}).firstChild.style.verticalAlign = "top";
+      else D.mtext(g, cx, ly, tg.label || "", {"text-anchor": "middle", "font-size": 28, "font-weight": 700, fill: c[0]});
+      if (hasV) D.mtext(g, cx, cy + 38, String(tg.value), {"text-anchor": "middle", "font-size": 24, fill: "var(--fg)"});
+      if (tg.tex && tg.label) D.mtext(g, cx, cy + bh / 2 + 32, tg.label, {"text-anchor": "middle", "font-size": 24, fill: "var(--muted)"});
+      return {frame: frame, g: g, cx: cx, cy: cy, col: c, last: 0};
+    });
+    // 札と、行き先ごとの写し
+    this.chips = [];
+    C.forEach(function(cp, i){
+      var r = Math.floor(i / cols), q = i % cols;
+      var x = gx + q * (cw + gap) + cw / 2, y = 4 + ch / 2 + r * (ch + gap);
+      var to = Array.isArray(cp.to) ? cp.to : [cp.to === undefined ? 0 : cp.to];
+      var start = i * P.stagger;
+      to.forEach(function(j){
+        var tg = self.targets[j]; if (!tg) return;
+        var c = tone[cp.tone || "term"] || tone.term;
+        var g = D.el("g", {}, svg);
+        D.el("rect", {x: -cw / 2, y: -ch / 2, width: cw, height: ch, rx: 8, fill: c[1], stroke: c[0], "stroke-width": 2}, g);
+        D.mtext(g, 0, 9, cp.label || "", {"text-anchor": "middle", "font-size": 24});
+        tg.last = Math.max(tg.last, start + P.move);
+        self.chips.push({g: g, x0: x, y0: y, x1: tg.cx, y1: tg.cy, start: start});
+      });
+    });
+    this.rows = rows;
+  }
+  duration(k){ var d = 0; this.targets.forEach(function(tg){ d = Math.max(d, tg.last + 0.3); }); return k >= 1 ? d : 0; }
+  render(k, t, ctx){
+    var P = this.props, D = DECK;
+    var T = k < 1 ? -Infinity : t;   // 段階 0 は動く前
+    // 先の段階を薄く見せる表示（授業の表示）：段階 0 では、まとめた後の箱をテーマの --preview-opacity の濃さで出す（札は動かさない）
+    var PV = 0;
+    if (k < 1 && ctx && (ctx.preview || ctx.mode === "lecture")){ PV = parseFloat(getComputedStyle(this).getPropertyValue("--preview-opacity")); if (!(PV >= 0 && PV <= 1)) PV = 0.45; }
+    var pr = function(start, dur){ return T === -Infinity ? 0 : D.prog(T, start, dur); };
+    this.chips.forEach(function(c){
+      var e = pr(c.start, P.move);
+      // 少し持ち上げてから落ちる弧（中点で上へ 40px）
+      var x = D.lerp(c.x0, c.x1, e), y = D.lerp(c.y0, c.y1, e) - Math.sin(Math.PI * e) * 40;
+      var s = D.lerp(1, P.shrink, e), op = e < 0.75 ? 1 : 1 - (e - 0.75) / 0.25;
+      c.g.setAttribute("transform", "translate(" + x.toFixed(2) + " " + y.toFixed(2) + ") scale(" + s.toFixed(4) + ")");
+      c.g.setAttribute("opacity", op.toFixed(3));
+    });
+    this.targets.forEach(function(tg){
+      tg.frame.setAttribute("opacity", (pr(0, 0.3) * (1 - pr(tg.last - 0.1, 0.3))).toFixed(3));
+      var e = pr(tg.last - 0.15, 0.45);
+      if (PV){ e = 1; tg.g.setAttribute("opacity", PV.toFixed(3)); }
+      else tg.g.setAttribute("opacity", e.toFixed(3));
+      var s = D.lerp(0.9, 1, e);
+      tg.g.setAttribute("transform", "translate(" + tg.cx + " " + tg.cy + ") scale(" + s.toFixed(4) + ") translate(" + (-tg.cx) + " " + (-tg.cy) + ")");
+    });
+  }
+});

package/vendor/components/sha256/dbad89b7d46a01b29d05713b825a6aa4e7057df40bba3f9673cb5ae1292630d2/README.md

@@ -0,0 +1,41 @@
+---
+name: m-kobun
+series: kokugo
+summary: 古文を語に切り（スラッシュ）、品詞で色を分けて 1 文ずつ見せ、最後に現代語訳と並べる。助動詞を押すと活用表と意味
+steps: 文の数（現代語訳があれば ＋1）
+purposes: text-structure
+props: size, tate, yaku, fade, detail
+---
+
+古文の品詞分解を、板書のように 1 文ずつ見せるときに使う。段階 0 は切っていない本文。
+
+## 書き方
+
+1 行が 1 文（1 段階）。語は `/` で切り、語の後ろの `[ ]` に品詞（と、`・` で区切って詳しいこと）を書く。`[ ]` の後ろの字（`、` `。`）は語に付けて出す。
+
+```
+春[名]/は[係助]/あけぼの[名]。
+= 春は明け方（がよい）。
+紫だち[動・タ四・連用]/たる[助動・たり・存続・連体]/雲[名]/の[格助]/…
+```
+
+- 品詞：`名` `代` `動` `補動` `形` `形動` `副` `連体` `接` `感` `助動` `格助` `係助` `副助` `接助` `終助` `間助` `接頭` `接尾`（色：動詞 `--term`、形容詞・形容動詞 `--accent2`、助動詞 `--emph`、助詞 `--muted`、ほか `--fg`）
+- 助動詞：`[助動・基本形・この文での意味・活用形]`。基本形は部品の中の表（文語の助動詞 28 語。`なり`・`たり` は意味で断定と伝聞推定・完了を分ける）から引く。表にないものは知らせる
+- `= …` の行：直前の文の現代語訳（最後の段階で、本文の下、縦書きでは左に出す）
+- `{漢字|かな}`：振り仮名
+
+<!-- llm: omit -->
+## 押すと出る札
+
+助動詞は押す（タップする、または Tab で選んで Enter）と、基本形・活用の型・接続・意味と、6 つの活用形の表（この文の活用形に色）を出す。表は部品の中にあり、何も読み込まない（ネットワークを使わない。中身は文字だけ）。
+札は発表の操作で、画面の決まり（`DECK.seek(i, k, t)`）の外にある：段階を動かす・もう一度押す・札を押す・同じ段階に入り直す（ランタイムが `ctx.reset` を渡すとき）と消え、動画（`?mode=video`）では開かず、印刷には出ない。
+- 授業の表示（`ctx.preview`）：先の文の区切りと品詞の札、現代語訳を `--preview-opacity` の濃さで見せる。本文の字は初めから見えているので、品詞の色と、助動詞の地の薄い色（`--emph-tint`）は先に見せない。薄い語の札は開かない
+<!-- llm: end -->
+
+## 属性
+
+- `tate`：縦書き（品詞は語の左）
+- `detail`：品詞の下に `[ ]` の中をすべて出す（活用の種類・活用形まで。語の間が広がる）
+- `yaku="false"`：現代語訳の段階を作らない
+
+見本は `demo.html`（『枕草子』春はあけぼの、横書きと縦書き）。

package/vendor/components/sha256/dbad89b7d46a01b29d05713b825a6aa4e7057df40bba3f9673cb5ae1292630d2/demo.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="ja" data-theme="kokugo">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>m-kobun の見本</title>
+<!-- 組み方：node kit/build.mjs components/kobun/demo.html -o components/kobun/out/demo.html -->
+</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-kobun style="height:470px">
+      春[名]/は[係助]/あけぼの[名]。
+      = 春は明け方（がよい）。
+      やうやう[副]/白く[形・ク・連用]/なりゆく[動・カ四・連体]/山ぎは[名]、
+      = だんだん白くなっていく山ぎわ（の空）が、
+      少し[副]/明かり[動・ラ四・連用]/て[接助]、
+      = 少し明るくなって、
+      紫だち[動・タ四・連用]/たる[助動・たり・存続・連体]/雲[名]/の[格助]/細く[形・ク・連用]/たなびき[動・カ四・連用]/たる[助動・たり・存続・連体]。
+      = 紫がかった雲が細くたなびいている（のがよい）。
+    </m-kobun>
+  </div>
+</section>
+
+<section class="slide noconcl">
+  <h2>縦書きの品詞分解</h2>
+  <div class="body">
+    <m-kobun tate style="height:520px">
+      春[名]/は[係助]/あけぼの[名]。
+      = 春は明け方（がよい）。
+      少し[副]/明かり[動・ラ四・連用]/て[接助]、
+      = 少し明るくなって、
+    </m-kobun>
+  </div>
+</section>
+
+</div>
+</body>
+</html>