egatari 0.0.0-stage → 0.6.4

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

@@ -0,0 +1,301 @@
+// m-pie：円グラフとドーナツグラフ。切れの名前と値（と割合）は、大きい切れなら中に、小さい切れなら外に引き出し線で書く
+// <m-pie unit="万円" digits="1" show="both" style="height:420px"><script type="application/json">
+//   {"slices": [{"label": "食費", "value": 7.2}, {"label": "住まい", "value": 8.5}, {"label": "その他", "value": 2.1, "tone": "muted"}]}
+// （JSON の終わり）</m-pie>
+// 段階：既定は全部を段階 1 で（全体と内訳は一度に見せる）。per-step="1" で 1 切れずつ（口述原稿が 1 切れずつ話すときだけ）、切れの step で直接
+// 切れは 12 時の位置から時計回りに、書いた順に並べる。割合は足して 100 になるように丸める（最大剰余法）
+// donut="0.55" でドーナツ（内側の半径の割合）。中の字は JSON の center（{total} は合計に置き換わる）
+// 見せ方（docs/conventions.md §1）：fade（フェードして少し上がりながら現れる、既定）・sweep（12 時の位置から時計回りに掃くように現れる）・
+// grow（中心から少し小さい大きさで現れて元の大きさに戻る）。段階の数・長さ・最後の中身は同じ
+(function(){
+// ---- BEGIN egatari-variant (source: tools/variant.js; copy with `node tools/variant-sync.mjs`; do not edit inside a component) ----
+// Choosing a presentation variant (Egatari spec §8.4, docs/conventions.md §1). A component lists its variant names in
+// `static variants` (index 0 is variant 0) and calls VARIANT.of(this) once, in mount. The choice reads, in order:
+//   the component's `variant` attribute (a name) → its `seed` attribute → `data-egatari-seed` on the root element → 0.
+// Seed 0 gives variant 0. Any other seed s gives the name v with the largest h("<s>|<tag>|<v>") (highest random weight),
+// so every instance of a component in one lesson shows the same variant, components choose independently, and adding a
+// variant later changes only the lessons where the new one wins. h is FNV-1a followed by the mixing of kit/deck.js's rng.
+// The choice is a pure function of these values: the picture still depends on (i, k, t) only.
+var VARIANT = (function(){
+  "use strict";
+  function mix(h){
+    h = Math.imul(h ^ (h >>> 15), 2246822507);
+    h = Math.imul(h ^ (h >>> 13), 3266489909);
+    return (h ^ (h >>> 16)) >>> 0;
+  }
+  function hash(s){
+    var h = 2166136261;
+    for (var i = 0; i < s.length; i++){ h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
+    return mix(h);
+  }
+  // A seed is a decimal integer 0 ≤ N < 2^32. Anything else is warned about and ignored (null)
+  function seedOf(v, what){
+    if (v === null || v === undefined) return null;
+    var s = String(v).trim();
+    if (/^\d{1,10}$/.test(s) && +s < 4294967296) return +s;
+    console.warn(what + "=" + JSON.stringify(v) + " is not an integer 0 ≤ N < 2^32 (ignored)");
+    return null;
+  }
+  // The variant name for seed s among names (for tools and tests; components call of)
+  function pick(s, tag, names){
+    if (!names.length) return null;
+    if (!s) return names[0];
+    var best = names[0], bh = -1;
+    names.forEach(function(v){ var x = hash(s + "|" + tag + "|" + v); if (x > bh){ bh = x; best = v; } });
+    return best;
+  }
+  // The effective seed of a component element (0 when nothing is written)
+  function seed(el){
+    var tag = el.tagName.toLowerCase(), s = seedOf(el.getAttribute("seed"), tag + " seed");
+    if (s === null) s = seedOf(document.documentElement.getAttribute("data-egatari-seed"), "data-egatari-seed");
+    return s === null ? 0 : s;
+  }
+  function of(el){
+    var tag = el.tagName.toLowerCase(), C = customElements.get(tag), names = (C && C.variants) || [], v = el.getAttribute("variant");
+    if (v !== null){
+      if (names.indexOf(v) >= 0) return v;
+      console.warn(tag + ' variant="' + v + '" is not one of ' + names.join(", ") + " (variant 0 is used)");
+      return names[0] || null;
+    }
+    return pick(seed(el), tag, names);
+  }
+  // A seeded generator for a variant that needs randomness (0 ≤ x < 1), from the same seed, tag and a key of your own
+  function rng(el, key){
+    var h = hash(seed(el) + "|" + el.tagName.toLowerCase() + "|" + (key || ""));
+    return function(){ h = mix((h + 0x9e3779b9) >>> 0); return h / 4294967296; };
+  }
+  return {of: of, pick: pick, seed: seed, rng: rng, hash: hash};
+})();
+// ---- END egatari-variant ----
+DECK.define("m-pie", class extends DECK.MotionElement {
+  static variants = ["fade", "sweep", "grow"];
+  // データの形（kit/shape.js）
+  static shape = {
+    schema: {type: "object", additionalProperties: false, required: ["slices"], properties: {
+      slices: {type: "array", minItems: 1, items: {type: "object", additionalProperties: false, required: ["value"], properties: {
+        label: {type: "string"}, value: {type: "number"}, tone: {type: "string"}, step: {type: "integer"}, place: {enum: ["auto", "in", "out"]}}}},
+      center: {type: "string"}}},
+    example: {slices: [{label: "食費", value: 7.2}, {label: "住まい", value: 8.5}, {label: "その他", value: 2.1, tone: "muted"}]},
+    note: {en: "the slices go in \"slices\" (not \"data\" or \"groups\"); value is a number, not a percentage string; the slices are drawn clockwise from 12 o'clock in the written order",
+           ja: "切れは \"slices\" に書く（\"data\" や \"groups\" ではない）。value は数（\"26%\" のような字ではない）。12 時の位置から時計回りに、書いた順に並ぶ"},
+  };
+  static props = {
+    donut:      {type: "number", default: 0, doc: "ドーナツの内側の半径の割合（0 = 円グラフ。0.5〜0.6 がよい）"},
+    unit:       {type: "string", default: "", doc: "値の単位（数字の後ろに付ける。万円、人、% など）"},
+    digits:     {type: "number", default: 0, doc: "値の小数桁"},
+    "pct-digits": {type: "number", default: 0, doc: "割合の小数桁"},
+    show:       {type: "string", default: "pct", doc: "名前の下に書くもの：pct（割合）・value（値）・both（値と割合）・none"},
+    "per-step": {type: "number", default: 0, doc: "1 段階に出す切れの数（0 = 全部を段階 1 で）"},
+    dur:        {type: "number", default: 1.0, doc: "1 段階の動きの秒数"},
+  };
+  get steps(){
+    if (this.getAttribute("steps") !== null) return +this.getAttribute("steps");
+    var m = 0;
+    this.plan().forEach(function(o){ m = Math.max(m, o.step); });
+    return m;
+  }
+  plan(){
+    if (this._plan) return this._plan;
+    var per = this.props["per-step"];
+    return (this._plan = ((this.data || {}).slices || []).map(function(s, i){
+      return {s: s, i: i, step: s.step !== undefined ? s.step : per > 0 ? Math.floor(i / per) + 1 : 1};
+    }));
+  }
+  mount(){
+    var P = this.props, D = DECK, self = this, pl = this.plan(), d = this.data || {};
+    this.variant = VARIANT.of(this);
+    this.style.display = "block"; this.style.position = "relative";
+    var W = this.clientWidth, H = this.clientHeight, TAU = Math.PI * 2;
+    var svg = D.el("svg", {viewBox: "0 0 " + W + " " + H, width: W, height: H, style: "display:block;overflow:visible"}, this);
+    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 total = pl.reduce(function(a, o){ return a + Math.max(0, +o.s.value); }, 0);
+    if (!(total > 0)) throw new Error("slices: the values add up to 0 (write positive numbers)");
+    pl.forEach(function(o){ if (+o.s.value < 0) console.warn("m-pie: the slice \"" + (o.s.label || o.i) + "\" has a negative value (drawn as 0)"); });
+    // 割合：足して 100 になるように丸める（最大剰余法）
+    var pd = P["pct-digits"], sc = Math.pow(10, pd), raw = pl.map(function(o){ return Math.max(0, +o.s.value) / total * 100 * sc; });
+    var fl = raw.map(Math.floor), left = Math.round(100 * sc) - fl.reduce(function(a, b){ return a + b; }, 0);
+    raw.map(function(v, i){ return [v - fl[i], i]; }).sort(function(a, b){ return b[0] - a[0] || a[1] - b[1]; }).slice(0, Math.max(0, left)).forEach(function(x){ fl[x[1]]++; });
+    var show = /^(pct|value|both|none)$/.test(P.show) ? P.show : "pct";
+    // 角度（12 時の位置から時計回り）と字
+    var acc = 0;
+    var sl = this.slices = pl.map(function(o, i){
+      var v = Math.max(0, +o.s.value), a0 = acc / total * TAU; acc += v;
+      var a1 = acc / total * TAU, pct = (fl[i] / sc).toFixed(pd) + "%", val = self.fmt(v);
+      var sub = show === "pct" ? pct : show === "value" ? val : show === "both" ? val + "（" + pct + "）" : "";
+      var lines = [];
+      if (o.s.label) lines.push({t: o.s.label, size: 26, bold: true});
+      if (sub) lines.push({t: sub, size: 24, bold: false});
+      // 中に入れるときの別の形：値と割合を 2 行に分けて幅を狭くする
+      var alt = show === "both" ? lines.slice(0, lines.length - 1).concat([{t: val, size: 24}, {t: pct, size: 24}]) : null;
+      // 既定の色：--series-1..3、次に同じ 3 色を薄く（0.5）、7 切れ目から --series-4（灰色は「その他」のために残す）、そのあとは繰り返し
+      var j6 = i % 7, tone = /^(term|emph|muted|accent2|fg|series-[1-4])$/.test(o.s.tone || "") ? o.s.tone : j6 === 6 ? "series-4" : "series-" + (j6 % 3 + 1);
+      return {o: o, i: i, a0: a0, a1: a1, mid: (a0 + a1) / 2, lines: lines, col: "var(--" + tone + ")", light: !o.s.tone && j6 >= 3 && j6 < 6,
+        forms: [lines].concat(alt ? [alt] : []).map(function(ls){ return {lines: ls, w: Math.max.apply(null, ls.map(function(l){ return est(l.t, l.size); }).concat([0])), h: ls.length * 30}; })};
+    });
+    var ratio = Math.max(0, Math.min(0.85, P.donut || 0));
+    // 中に収まるか：字の箱の 4 隅が、その切れの扇形（内側と外側の半径、両端の角度）の中にあるか
+    var pt = function(cx, cy, r, a){ return [cx + r * Math.sin(a), cy - r * Math.cos(a)]; };
+    var fits1 = function(s, R){
+      s.rm = ratio ? (1 + ratio) / 2 : 0.6;
+      if (!s.lines.length || s.o.s.place === "in") return true;
+      if (s.o.s.place === "out") return false;
+      // 字の中心の半径：ドーナツは輪の真ん中、円グラフは 0.6R → 0.5R → 0.7R の順に試す
+      var ri = R * ratio, cands = ratio ? [(ri + R) / 2] : [R * 0.6, R * 0.5, R * 0.7];
+      for (var n = 0; n < cands.length; n++){
+        var c = pt(0, 0, cands[n], s.mid), ok = true;
+        [[-1, -1], [1, -1], [1, 1], [-1, 1]].forEach(function(q){
+          var x = c[0] + q[0] * (s.w / 2 + 4), y = c[1] + q[1] * (s.h / 2 + 2), r = Math.hypot(x, y), a = Math.atan2(x, -y);
+          if (a < 0) a += TAU;
+          if (s.a1 - s.a0 < TAU - 1e-6 && !(a >= s.a0 + 0.02 && a <= s.a1 - 0.02)) ok = false;
+          if (r > R - 6 || r < ri + 6) ok = false;
+        });
+        if (ok){ s.rm = cands[n] / R; return true; }
+      }
+      return false;
+    };
+    // 形を 1 つずつ試す。どれも入らなければ外に書く形（最初の形）に戻す
+    var fits = function(s, R){
+      for (var f = 0; f < s.forms.length; f++){ use(s, f); if (fits1(s, R)) return true; }
+      use(s, 0);
+      return false;
+    };
+    function use(s, f){ s.lines = s.forms[f].lines; s.w = s.forms[f].w; s.h = s.forms[f].h; }
+    sl.forEach(function(s){ use(s, 0); });
+    // 半径：外の字の幅の分だけ左右をあける。中に収まる切れが増えれば半径を見直す（2 回）
+    var pad = 10, gap = 44, radius = function(outs){
+      var wl = 0, wr = 0;
+      outs.forEach(function(s){ if (Math.sin(s.mid) >= 0) wr = Math.max(wr, s.w); else wl = Math.max(wl, s.w); });
+      var side = Math.max(wl, wr);
+      return Math.max(40, Math.min((H / 2 - pad) * (outs.length ? 0.86 : 1), W / 2 - pad - (side ? side + gap : 0)));
+    };
+    var R = radius(sl.filter(function(s){ return s.lines.length; }));
+    for (var pass = 0; pass < 2; pass++){
+      sl.forEach(function(s){ s.inside = fits(s, R); });
+      R = radius(sl.filter(function(s){ return !s.inside; }));
+    }
+    sl.forEach(function(s){ if (!s.inside && s.o.s.place !== "out" && fits(s, R)) s.inside = true; });
+    // 字が片側だけなら、字と円をひとまとまりとして真ん中に寄せる
+    var wl = 0, wr = 0;
+    sl.forEach(function(s){ if (!s.inside && s.lines.length){ if (Math.sin(s.mid) >= 0) wr = Math.max(wr, s.w + gap); else wl = Math.max(wl, s.w + gap); } });
+    var cx = W / 2 + (wl - wr) / 2, cy = H / 2, ri = R * ratio;
+    this.R = R; this.ri = ri; this.cx = cx; this.cy = cy;
+    // 1 切れずつ出すときは、全体の輪郭を初めから薄く見せる（どれだけのうちの 1 切れかが分かるように）
+    if (pl.some(function(o){ return o.step > 1; })){
+      D.el("circle", {cx: cx, cy: cy, r: R, fill: "none", stroke: "var(--line)", "stroke-width": 2}, svg);
+      if (ri) D.el("circle", {cx: cx, cy: cy, r: ri, fill: "none", stroke: "var(--line)", "stroke-width": 2}, svg);
+    }
+    var gS = D.el("g", {}, svg), gL = D.el("g", {}, svg);
+    // 外の字：左右の列に置き、縦に重ならないように並べ直す
+    [1, -1].forEach(function(side){
+      var outs = sl.filter(function(s){ return !s.inside && s.lines.length && (Math.sin(s.mid) >= 0 ? 1 : -1) === side; });
+      outs.forEach(function(s){ s.yc = cy - (R + 18) * Math.cos(s.mid); });
+      outs.sort(function(a, b){ return a.yc - b.yc; });
+      // 上から押し下げ、下からはみ出す分を押し上げる（字の箱の間は 8 px）
+      for (var j = 0; j < outs.length; j++){
+        var mn = j ? outs[j - 1].yc + (outs[j - 1].h + outs[j].h) / 2 + 8 : outs[0].h / 2 + 2;
+        if (outs[j].yc < mn) outs[j].yc = mn;
+      }
+      for (var q = outs.length - 1; q >= 0; q--){
+        var mx = q === outs.length - 1 ? H - 2 - outs[q].h / 2 : outs[q + 1].yc - (outs[q + 1].h + outs[q].h) / 2 - 8;
+        if (outs[q].yc > mx) outs[q].yc = mx;
+      }
+      if (outs.length && outs[0].yc - outs[0].h / 2 < 0) console.warn("m-pie: the labels outside do not fit the height (make the element taller or put fewer slices)");
+      var colX = cx + side * (R + gap - 8);
+      outs.forEach(function(s){
+        // 引き出し線：切れの外の縁から、円の外側を回って字の列へ
+        var p1 = pt(cx, cy, R + 4, s.mid), dy = s.yc - cy, rr = R + 14;
+        var qx = cx + side * Math.max(Math.abs((R + 16) * Math.sin(s.mid)), Math.sqrt(Math.max(0, rr * rr - dy * dy)));
+        s.leader = D.el("path", {d: "M" + p1[0].toFixed(1) + "," + p1[1].toFixed(1) + "L" + qx.toFixed(1) + "," + s.yc.toFixed(1) + "L" + (colX - side * 6).toFixed(1) + "," + s.yc.toFixed(1),
+          fill: "none", stroke: "var(--muted)", "stroke-width": 1.5}, gL);
+        s.tx = colX; s.anchor = side > 0 ? "start" : "end";
+        if (side > 0 ? colX + s.w > W + 1 : colX - s.w < -1) console.warn("m-pie: the label \"" + s.lines[0].t + "\" is wider than the space beside the pie");
+      });
+    });
+    sl.forEach(function(s){
+      s.path = D.el("path", {d: "", fill: s.col, "fill-opacity": s.light ? 0.5 : 1, stroke: "var(--bg)", "stroke-width": 2, "stroke-linejoin": "round"}, gS);
+      if (!s.lines.length) return;
+      var g = s.g = D.el("g", {opacity: 0}, gL), x, y0;
+      if (s.inside){
+        var c = pt(cx, cy, s.rm * R, s.mid);
+        x = c[0]; y0 = c[1] - s.h / 2;
+      } else { x = s.tx; y0 = s.yc - s.h / 2; }
+      // 中の字は切れの色の上なので背景の色（濃い色の切れ）か本文の色（薄い切れ）
+      var fill = s.inside ? (s.light ? "var(--fg)" : "var(--bg)") : "var(--fg)";
+      s.lines.forEach(function(l, j){
+        D.mtext(g, x, y0 + j * 30 + 24, l.t, {"text-anchor": s.inside ? "middle" : s.anchor, "font-size": l.size, "font-weight": l.bold ? 700 : 400, fill: fill});
+      });
+    });
+    // ドーナツの中の字（{total} は合計）
+    this.center = null;
+    if (ri && d.center){
+      var cl = String(d.center).replace(/\{total\}/g, this.fmt(total)).split("\n"), size = 26;
+      var cw = Math.max.apply(null, cl.map(function(t){ return est(t, size); }));
+      if (cw > ri * 1.8){ size = 24; cw = cw * 24 / 26; }
+      if (cw > ri * 1.8) console.warn("m-pie: the center text is wider than the hole (make donut larger or the text shorter)");
+      var cg = this.center = D.el("g", {opacity: 0}, gL);
+      cl.forEach(function(t, j){ D.mtext(cg, cx, cy - (cl.length - 1) * 16 + j * 32 + 9, t, {"text-anchor": "middle", "font-size": size, "font-weight": j === 0 ? 700 : 400}); });
+    }
+  }
+  // 数の書き方：3 桁ごとのカンマ、小数桁、単位（m-bars と同じ）
+  fmt(v){
+    var s = Math.abs(v).toFixed(this.props.digits).split("."), i = s[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return (v < 0 ? "−" : "") + i + (s[1] ? "." + s[1] : "") + this.props.unit;
+  }
+  wedge(a0, a1, r0, r1){
+    var cx = this.cx, cy = this.cy, TAU = Math.PI * 2;
+    if (a1 - a0 <= 1e-6 || r1 <= 0) return "";
+    var p = function(r, a){ return (cx + r * Math.sin(a)).toFixed(2) + "," + (cy - r * Math.cos(a)).toFixed(2); };
+    if (a1 - a0 >= TAU - 1e-6){
+      // 全周：2 つの半円で描く
+      var full = "M" + p(r1, 0) + "A" + r1 + "," + r1 + " 0 1,1 " + p(r1, Math.PI) + "A" + r1 + "," + r1 + " 0 1,1 " + p(r1, 0) + "Z";
+      return r0 > 0 ? full + "M" + p(r0, 0) + "A" + r0 + "," + r0 + " 0 1,0 " + p(r0, Math.PI) + "A" + r0 + "," + r0 + " 0 1,0 " + p(r0, 0) + "Z" : full;
+    }
+    var big = a1 - a0 > Math.PI ? 1 : 0;
+    var s = "M" + p(r1, a0) + "A" + r1 + "," + r1 + " 0 " + big + ",1 " + p(r1, a1);
+    s += r0 > 0 ? "L" + p(r0, a1) + "A" + r0 + "," + r0 + " 0 " + big + ",0 " + p(r0, a0) + "Z" : "L" + cx.toFixed(2) + "," + cy.toFixed(2) + "Z";
+    return s;
+  }
+  duration(k){
+    return this.plan().some(function(o){ return o.step === k; }) ? this.props.dur : 0;
+  }
+  render(k, t, ctx){
+    var P = this.props, D = DECK, self = this, vr = this.variant, dur = P.dur, span = dur * 0.6, lecture = ctx && (ctx.preview || ctx.mode === "lecture");
+    var TAU = Math.PI * 2, R = this.R, ri = this.ri;
+    // 同じ段階の切れが占める角度の範囲（sweep はこの範囲を掃く）
+    var rng = {};
+    this.slices.forEach(function(s){ var st = s.o.step, q = rng[st] || (rng[st] = [Infinity, -Infinity]); q[0] = Math.min(q[0], s.a0); q[1] = Math.max(q[1], s.a1); });
+    var first = Infinity;
+    this.slices.forEach(function(s){
+      var st = s.o.step, tt = st < k ? Infinity : st > k ? -1 : t, faint = lecture && st > k;
+      first = Math.min(first, st);
+      var a0 = s.a0, a1 = s.a1, r0 = ri, r1 = R, op = 1, dy = 0, lo;
+      if (faint){ op = 0.45; lo = 0.45; }
+      else if (tt < 0){ op = 0; lo = 0; }
+      else if (vr === "sweep"){
+        // 12 時の位置（1 切れずつなら、その段階の最初の切れの端）から時計回りに掃く
+        var q = rng[st], e = D.prog(tt, 0, span), edge = q[0] + (q[1] - q[0]) * e;
+        a1 = Math.min(a1, edge);
+        lo = D.prog(tt, span * (s.a1 - q[0]) / Math.max(1e-6, q[1] - q[0]) * 0.9, dur - span);
+      } else if (vr === "grow"){
+        // 中心から：外側の縁が 12 px 内側から元の大きさへ（fade の上がる距離と同じ）
+        var g = D.prog(tt, 0, span), f = (R - 12 * (1 - g)) / R;
+        r0 = ri * f; r1 = R * f; op = Math.min(1, g * 2.5 + (g > 0 ? 0.2 : 0));
+        lo = D.prog(tt, span, dur - span);
+      } else {
+        var e2 = D.prog(tt, 0, span);
+        op = e2; dy = (1 - e2) * 12;
+        lo = D.prog(tt, span, dur - span);
+      }
+      s.path.setAttribute("d", op > 0 ? self.wedge(a0, a1, r0, r1) : "");
+      s.path.setAttribute("opacity", op.toFixed(3));
+      s.path.setAttribute("transform", dy ? "translate(0 " + dy.toFixed(2) + ")" : "");
+      if (s.g) s.g.setAttribute("opacity", lo.toFixed(3));
+      if (s.leader) s.leader.setAttribute("opacity", lo.toFixed(3));
+    });
+    if (this.center){
+      var c = first < k ? 1 : first > k ? (lecture ? 0.45 : 0) : D.prog(t, span, dur - span);
+      this.center.setAttribute("opacity", c.toFixed(3));
+    }
+  }
+});
+})();

package/vendor/components/sha256/da3812937f8937dc61bed434374bb80342d3d4f78b33602d5574d515b7444dec/CHANGELOG.md

@@ -0,0 +1,22 @@
+# m-venn changelog
+
+The part's own versions (Egatari spec §6.1). Releases of the whole library are in the repository's CHANGELOG.md.
+
+## 2.0.0 (components 2.0.0-rc.1 and 2.0.0)
+
+- Moved to `egatariParts.define({name: "venn", version: "2.0.0", requires: {base: "1.0.0"}, element: "m-venn"})`,
+  extending `base.MotionElement` with `base.el` / `mtext` / `prog` / `lerp` / `variant` / `previewOpacity`;
+  `static partName = "venn"`. The embedded `egatari-variant` block is gone (`base.variant`). The DOM is byte-identical to
+  1.13.0 on its demo at every step, up to the id rewrite below (tools/test-c2-identity.mjs).
+- Ids: its clip paths are `venn-2-0-0-<n>-in<i>` and `venn-2-0-0-<n>-out<i>` (1.13.0: `m-venn-<n>-in<i>`, `-out<i>`),
+  numbered by a counter of the part's own (1.13.0: the class's static `n`, which a frozen class cannot carry).
+  Rewrite in the identity test: `m-venn-\d+` → `venn-2-0-0-\d+`.
+- Items that do not fit their regions even at 24 px are reported with `ctx.report("size", "[venn] …")` (1.13.0:
+  `console.warn("m-venn: …")`). Regions with C in a two-set diagram still throw; base contains it.
+- The preview view is `ctx.preview` alone (1.13.0 also accepted `ctx.mode === "lecture"`).
+- Kept from 1.11: the shape geometry is written again at the end of every render (the raster fix,
+  tools/test-raster-history.mjs).
+
+## 1.13.0
+
+As released in the library's 1.13.0.

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

@@ -0,0 +1,35 @@
+---
+name: m-venn
+version: 2.0.0
+series: common
+tier: standard
+summary: 2 つか 3 つの集合の円（ベン図）。集合を 1 つずつ出し、最後に重なりを強めてその中の項目を出す
+steps: 集合の数 + 1（overlaps="each" なら 集合の数 + 項目のある重なりの数）
+purposes: overlap
+variants: fade, draw
+props: size, dur, spread, overlaps
+---
+
+2 つか 3 つのものの共通点と違い（哺乳類と海の生き物、3 つのスキルの重なり など）を、重なりで見せるときに使う。
+観点ごとに値を並べて比べるなら `m-compare`。
+
+子の JSON：`{"sets": [{"label", "tone"}, …], "regions": {"A": [...], "B": [...], "AB": [...], …}}`。
+
+- `sets`：集合（2 つか 3 つ）。`label` は円の外に書く名前、`tone` は円の色（`term`・`emph`・`muted`・`accent2`・`series-1..4`。既定は `term`・`accent2`・`series-4` の順）。`--emph` は重なりを強めるのに使うので、集合には使わないほうがよい
+- `regions`：領域ごとの項目（1 つ 1 行の配列か、`\n` で改行した字）。鍵は集合の文字の組で、アルファベット順に書く。文字は `sets` の順（`sets` の 1 つ目が A・2 つ目 B・3 つ目 C）：
+  - `A`：A だけ（ほかの集合には入らない）、`AB`：A と B の両方（3 つのときは、A と B に入り C には入らないところ）、`ABC`：3 つとも
+  - 2 つなら `A` `B` `AB`、3 つなら `A` `B` `C` `AB` `AC` `BC` `ABC`。どれも省いてよい。集合が 2 つのときに C を含む鍵（`C` `AC` `BC` `ABC`）を書くと、図の代わりに誤りの札が出る
+- 円は左右対称の決まった配置で、面積は値に比例しない（2 つは左右、3 つは左上・右上・下）。`spread`（既定 1）は円の中心の間の距離 ÷ 半径で、小さいほど重なりが広い
+- 項目は、その領域の中で円の線から最も離れる位置に置く。字は `size`（既定 26 px）から 24 px まで縮める。重なりの項目は太字
+- 段階：既定は 集合を 1 つずつ（その集合だけの項目と一緒に）→ 重なり（項目のある重なりを `--emph` で薄く塗って縁を囲み、項目を出す。項目のある重なりがなければ重なりすべて）。`overlaps="each"` なら重なりを 1 つずつ（`AB`・`AC`・`BC`・`ABC` の順）
+- 見せ方（`variant`、[共通の決まり](../../docs/conventions.ja.md) §1）：`fade`（既定。円が薄く現れる）・`draw`（円の線を引いてから、塗りと名前・項目が現れる）。書かなければ最初の見せ方。どちらも段階の数・長さ・最後の画面は同じ
+
+見本は `demo.html`（哺乳類と海の生き物、3 つのスキルの重なり（架空）、見せ方の種類）。
+
+<!-- llm: omit -->
+注意
+
+- 項目の幅は字数から見積もる（和文 1 字 = 1 字幅、英数字 0.6 字幅）。3 つの集合の重なりは狭いので、重なりの項目は 1〜2 語にする。収まらなければ 24 px まで縮め、それでも収まらなければ ctx.report で知らせる
+- 重なりの形は円の切り抜き（clipPath）で作る。色はテーマの変数だけ
+- 授業の表示（`ctx.preview`）では、先の段階の円と重なりをテーマの `--preview-opacity`（ないときは 0.45）の濃さで見せる
+<!-- llm: end -->

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

@@ -0,0 +1,69 @@
+<!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-venn の見本</title>
+<!-- 組み方：node kit/build.mjs components/venn/demo.html -o components/venn/out/demo.html（スキルの重なりは架空） -->
+<style>
+.vlabel{font-size:27px;color:var(--muted);margin:0 0 6px}
+</style>
+</head>
+<body>
+<div id="stage">
+
+<section class="slide">
+  <h2>哺乳類と海の生き物</h2>
+  <div class="body">
+    <m-venn style="height:420px">
+      <script type="application/json">{
+        "sets": [{"label": "哺乳類"}, {"label": "海の生き物"}],
+        "regions": {
+          "A": ["ライオン", "ウマ", "コウモリ"],
+          "B": ["マグロ", "タコ", "サンゴ"],
+          "AB": ["クジラ", "イルカ", "ジュゴン"]
+        }
+      }</script>
+    </m-venn>
+  </div>
+  <div class="concl"><span>→ クジラもイルカも、海にすむ哺乳類</span></div>
+</section>
+
+<section class="slide">
+  <h2>3 つのスキルの重なり（架空）</h2>
+  <div class="body">
+    <m-venn style="height:430px">
+      <script type="application/json">{
+        "sets": [{"label": "統計"}, {"label": "プログラミング"}, {"label": "現場の知識"}],
+        "regions": {
+          "AB": "機械学習",
+          "AC": "調査",
+          "BC": "自動化",
+          "ABC": "データ\n活用"
+        }
+      }</script>
+    </m-venn>
+  </div>
+  <div class="concl"><span>→ 3 つが重なるところで、データが仕事に生きる</span></div>
+</section>
+
+<section class="slide">
+  <h2>見せ方の種類（variant）</h2>
+  <div class="body">
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0 40px">
+      <div><p class="vlabel">fade（既定）</p>
+      <m-venn variant="fade" style="height:330px">
+        <script type="application/json">{"sets": [{"label": "朝型"}, {"label": "運動部"}], "regions": {"AB": ["早朝練習"]}}</script>
+      </m-venn></div>
+      <div><p class="vlabel">draw（線を引いてから塗る）</p>
+      <m-venn variant="draw" style="height:330px">
+        <script type="application/json">{"sets": [{"label": "朝型"}, {"label": "運動部"}], "regions": {"AB": ["早朝練習"]}}</script>
+      </m-venn></div>
+    </div>
+  </div>
+  <div class="concl"><span>→ 書かなければ最初の見せ方（fade）になる。例は架空</span></div>
+</section>
+
+</div>
+</body>
+</html>