egatari 0.0.0-stage → 0.6.4

package/server/hints.js

@@ -0,0 +1,251 @@
+// プレビューの中（デッキの文書）で動く小さな部品。開発サーバー（server/dev.mjs）と編集アプリ（app/）が </body> の前に入れる
+// ここは「指さすだけ」：どの要素を直したいか・どの段階の口述原稿を開きたいか・どこにコメントしたいかを親の画面（信頼する編集の画面、
+// server/editor-ui.js）に知らせる（hint）。書き込む本文も合言葉も持たず、ここから原稿を書き換える手段はない。
+// 読む・確かめる・見せる・保存するのは親の画面で、保存は親の画面のボタン（⌘/Ctrl+Enter）を押したときだけ
+//
+// デッキ → 親：{type: "edit-hint", kind, …}
+//   ready                           実行系の準備ができた（親は位置を戻し、編集モードの状態を送り返す）
+//   key      {key}                  e・n・c・Escape が押された（入力中でないとき）
+//   tool     {mode}                 発表の道具が変わった（"laser"・"pen"・"vpen"、編集中のマーカー "ink" か null。kit/tools.js の deck:tool。親は画面の端に今のモードを出す）
+//   edit     {src, h, tag, rect}     編集モードでダブルクリックした要素（data-src の範囲と data-src-h）
+//   comment  {key, src, quote, near, pin, rect} Alt/⌥+クリックした所（段階の鍵・要素の範囲・80 字までの引用、
+//            near：押した所の近くの字（部品の中の札・語など。60 字まで）、pin：押した点のスライドの座標 {x, y}（1280×720、表示の倍率によらない））
+//            段階の途中（動いている間）に押しても、点は鍵の段階の最後の状態（DECK.seek(i, k, Infinity)）を指すものとして残す
+//   comment  {…, strokes}           マーカー（編集中の道具 ink、m）で線を描き終えるたび（kit/tools.js の deck:ink）。strokes は書きかけのメモの線の全部
+//            [[[x, y], …], …]（スライドの座標。親が edit-ink-reset を送るか段階が変わるまで足していく。20 本まで）。
+//            pin は全部の線の重心（長さで重みを付けた区間の中点の平均）、key・src・quote・near は Alt+クリックと同じく、重心の下の要素から
+//            （重心が舞台の外・描く面の外なら 1 本目の 1 点目の下）。線を丸め・間引き・確かめるのは親の画面と書き込む側（kit/core/comment-core.mjs の normStrokes）
+//   位置は実行系の deck-pos（kit/deck.js）をそのまま使う
+// 親 → デッキ：
+//   {type: "edit-state", edit, target}  編集モードの枠を出す・消す、target の要素（data-src の範囲か "#comment"）に印。
+//                                       編集モードが変わったら document に deck:edit {on} を送る（kit/deck.js・kit/tools.js が発表の道具と自動再生・暗転・一覧などを切る）
+//   {type: "edit-go-key", key}          その段階へ移る（コメントの一覧から）
+//   {type: "edit-ink", on}              マーカーの道具（kit/tools.js の ink）を出す・切る（編集モードの間だけ）
+//   {type: "edit-ink-reset"}            書きかけのマーカーの線を捨てる（親がメモを残した・取り消した）
+// 部品はすべて class="edit-ui"（印刷では base.css が隠す）
+(function(){
+"use strict";
+var Q = new URLSearchParams(location.search);
+if (window.parent === window) return;            // 親の画面がない（直接開いた）：知らせる相手がいない
+var P = window.parent;
+// 発表者ビュー（p）：sandbox の中では窓を開けないので、親に頼む。発表者ビューの文書は親（中継役）を opener にする
+window.open = function(u){
+  if (/[?&]presenter=1/.test(String(u || ""))) P.postMessage({type: "app-open-presenter"}, "*");
+  return null;
+};
+if (Q.get("presenter")) { try { if (!window.opener) window.opener = P; } catch (e) {} }
+if (Q.get("view") || Q.get("presenter")) return;
+window.DECK_DEV = true;                           // kit/tools.js のキーの一覧に e・n・c を載せる
+function send(m){ m.type = "edit-hint"; try { P.postMessage(m, "*"); } catch (e) {} }
+
+var css = [
+  "html.dev-edit #stage .slide.active [data-src]{outline:1px dashed rgba(37,99,235,.28);outline-offset:2px}",
+  "html.dev-edit #stage [data-src].dev-hover{outline:2px solid #2563eb!important;outline-offset:3px;background:rgba(37,99,235,.06);cursor:text}",
+  "#stage .dev-target{outline:2px solid #f59e0b!important;outline-offset:3px}",
+  "html.dev-edit #dt-layer:not(.ink){pointer-events:none!important}"
+].join("\n");
+var st = document.createElement("style"); st.className = "edit-ui"; st.textContent = css; (document.head || document.documentElement).appendChild(st);
+
+function stage(){ return document.getElementById("stage"); }
+function inStage(el){ var s = stage(); return !!(s && el && s.contains(el)); }
+function rectOf(r){ return {l: r.left, t: r.top, r: r.right, b: r.bottom}; }
+function clip(v, n){ v = String(v || "").replace(/\s+/g, " ").trim(); return v.length > n ? v.slice(0, n - 1) + "…" : v; }
+// 押した点をスライドの座標（1280×720）にする：#stage の見えている四角から測る（表示の倍率・窓の大きさによらない）
+function slidePoint(e){
+  var s = stage(); if (!s) return null;
+  var r = s.getBoundingClientRect(); if (!(r.width > 0 && r.height > 0)) return null;
+  return {x: Math.round((e.clientX - r.left) * 12800 / r.width) / 10, y: Math.round((e.clientY - r.top) * 7200 / r.height) / 10};
+}
+// 押した所の近くの字（部品の中の札・語・図の中の文字）。影の木（shadow DOM）の中も composedPath で辿る。60 字まで
+function ownText(n){
+  for (var c = n.firstChild; c; c = c.nextSibling) if (c.nodeType === 3 && /\S/.test(c.nodeValue)) return true;
+  return false;
+}
+function up(n){ return n.parentNode && n.parentNode.nodeType === 11 ? n.parentNode.host : n.parentElement; }
+function nearText(e, el){
+  var path = e.composedPath ? e.composedPath() : [e.target], deep = path[0];
+  if (!deep || deep.nodeType !== 1) deep = e.target;
+  // 1. 押した要素から el まで：短い名前（aria-label）か、短い字を持つもの
+  for (var n = deep, i = 0; n && i < 12; n = up(n), i++){
+    var lab = n.getAttribute && n.getAttribute("aria-label");
+    if (lab && /\S/.test(lab) && clip(lab, 400).length <= 60) return clip(lab, 60);   // 長い名前（段落全体の読み上げなど）は点の手がかりにならない
+    if (n !== el){ var t = clip(n.textContent, 400); if (t && t.length <= 60) return t; }
+    if (n === el) break;
+  }
+  // 2. 長い字の中を押した：その点の前後の字（影の木の外だけ）
+  var root = deep.getRootNode ? deep.getRootNode() : document;
+  if (root === document && document.caretRangeFromPoint){
+    var cr = document.caretRangeFromPoint(e.clientX, e.clientY), tn = cr && cr.startContainer;
+    // 字の上を押したときだけ（字のない所では、いちばん近い字に寄せられてしまう）
+    var on = false;
+    if (tn && tn.nodeType === 3 && deep.contains(tn) && tn.nodeValue.length){
+      var q = document.createRange(), at = Math.min(cr.startOffset, tn.nodeValue.length - 1);
+      q.setStart(tn, at); q.setEnd(tn, at + 1);
+      var cb = q.getBoundingClientRect(), pad = Math.max(cb.width, cb.height) * 0.75;
+      on = cb.width + cb.height > 0 && e.clientX >= cb.left - pad && e.clientX <= cb.right + pad && e.clientY >= cb.top - pad && e.clientY <= cb.bottom + pad;
+    }
+    if (on){
+      var v = tn.nodeValue, o = cr.startOffset, a = Math.max(0, o - 24), b = Math.min(v.length, o + 24);
+      var w = clip(v.slice(a, b), 60);
+      if (w) return (a > 0 ? "…" : "") + w + (b < v.length ? "…" : "");
+    }
+  }
+  // 3. 字のない所（図の線・面）：点にいちばん近い字（160px まで）。まず図（svg）の中の字（札）から探し、なければ同じ木（影の木か el）の中から
+  function dist(x){
+    var r = x.getBoundingClientRect(); if (!r.width && !r.height) return Infinity;
+    var dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right), dy = Math.max(r.top - e.clientY, 0, e.clientY - r.bottom);
+    return dx * dx + dy * dy;
+  }
+  function nearest(scope){
+    var best = null, bd = 160 * 160, all = scope.querySelectorAll("*");
+    for (var j = 0; j < all.length && j < 3000; j++){
+      var x = all[j]; if (!ownText(x)) continue;
+      var d = dist(x); if (d < bd){ bd = d; best = x; }
+    }
+    return best;
+  }
+  var scope = root !== document && root.querySelectorAll ? root : el, best = null;
+  [].some.call(scope.querySelectorAll("svg"), function(g){ var x = nearest(g); if (x && (!best || dist(x) < dist(best))) best = x; return false; });
+  if (!best) best = nearest(scope);
+  return best ? clip(best.textContent, 60) : "";
+}
+// 入力中か（影の木の中の欄も composedPath の先頭で見る）
+function typing(e){
+  var t = e.composedPath ? e.composedPath()[0] : e.target;
+  if (!t || t.nodeType !== 1) t = e.target;
+  return !!(t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)));
+}
+
+var editOn = false, hoverEl = null, lastComment = null;
+function setTarget(t){
+  [].forEach.call(document.querySelectorAll(".dev-target"), function(x){ x.classList.remove("dev-target"); });
+  var el = null;
+  if (t === "#comment") el = lastComment;
+  else if (typeof t === "string" && /^\d+-\d+$/.test(t)) el = document.querySelector('#stage [data-src="' + t + '"]');
+  if (el) el.classList.add("dev-target");
+}
+function posOfKey(key){
+  var D = window.DECK; if (!D || !D.slides) return null;
+  var p = key.lastIndexOf(":"), sk = key.slice(0, p), stp = key.slice(p + 1);
+  var i = D.slides.findIndex(function(s){ return s._key === sk; });
+  if (i < 0) return null;
+  var s = D.slides[i];
+  return {i: i, k: stp === "concl" ? (s._cstep >= 0 ? s._cstep : s._max) : Math.min(+stp || 0, s._max)};
+}
+window.addEventListener("message", function(e){
+  if (e.source !== P) return;
+  var m = e.data || {};
+  if (m.type === "edit-state"){
+    var was = editOn;
+    editOn = !!m.edit;
+    document.documentElement.classList.toggle("dev-edit", editOn);
+    if (editOn !== was) document.dispatchEvent(new CustomEvent("deck:edit", {detail: {on: editOn}}));
+    if (!editOn && hoverEl){ hoverEl.classList.remove("dev-hover"); hoverEl = null; }
+    if (!editOn){ inkPend = []; inkKey = null; }
+    setTarget(m.target);
+  } else if (m.type === "edit-ink"){
+    var T = window.DECK && window.DECK.tools;
+    if (T && editOn) T.setMode(m.on ? "ink" : null);
+  } else if (m.type === "edit-ink-reset"){
+    inkPend = []; inkKey = null;
+  } else if (m.type === "edit-go-key" && typeof m.key === "string"){
+    var p = posOfKey(m.key);
+    if (p && window.DECK) window.DECK.go(p.i, p.k, false);
+  }
+});
+document.addEventListener("mouseover", function(e){
+  if (!editOn) return;
+  var t = e.target && e.target.closest ? e.target.closest("[data-src]") : null;
+  if (t && !inStage(t)) t = null;
+  if (t === hoverEl) return;
+  if (hoverEl) hoverEl.classList.remove("dev-hover");
+  hoverEl = t;
+  if (t) t.classList.add("dev-hover");
+});
+document.addEventListener("dblclick", function(e){
+  if (!editOn) return;
+  var t = e.target && e.target.closest ? e.target.closest("[data-src]") : null;
+  if (!t || !inStage(t)) return;
+  e.preventDefault();
+  var sel = window.getSelection && window.getSelection(); if (sel) sel.removeAllRanges();
+  send({kind: "edit", src: t.getAttribute("data-src"), h: t.getAttribute("data-src-h"), tag: t.tagName.toLowerCase(), rect: rectOf(t.getBoundingClientRect())});
+});
+// 押した（または線の重心の）要素から、コメントの知らせ（段階の鍵・要素の範囲・引用・近くの字）を作る。e は clientX・clientY・composedPath を持つもの
+function commentHint(e, target){
+  var el = target.closest("[data-src]") || target.closest("[data-step], m-sweep, svg, .concl, .body, .slide") || target;
+  lastComment = el;
+  var full = (el.textContent || "").replace(/\s+/g, " ").trim(), quote = full.slice(0, 80), near = "";
+  try { near = nearText(e, el); } catch (err) { near = ""; }
+  // 要素の字が引用に収まり、近くの字もその中にあるなら、付けても手がかりは増えない
+  if (full.length <= 80 && quote.indexOf(near.replace(/^…|…$/g, "")) >= 0) near = "";
+  return {kind: "comment", key: window.DECK.state().key, src: el.getAttribute("data-src") || null,
+    quote: quote, near: near && near !== quote ? near : "", pin: slidePoint(e),
+    rect: {l: e.clientX - 20, t: e.clientY - 8, r: e.clientX, b: e.clientY + 8}};
+}
+document.addEventListener("click", function(e){
+  if (!e.altKey || !inStage(e.target) || !window.DECK) return;
+  e.preventDefault(); e.stopPropagation();
+  send(commentHint(e, e.target));
+}, true);
+// マーカー：全部の線の重心（なければ 1 本目の 1 点目）の下の要素を、描く面（#dt-layer）を除いて探す。影の木（shadow DOM）の中へも降りる
+function centroid(S){
+  var sx = 0, sy = 0, sl = 0;
+  S.forEach(function(P){
+    for (var i = 1; i < P.length; i++){
+      var l = Math.hypot(P[i][0] - P[i - 1][0], P[i][1] - P[i - 1][1]);
+      sx += l * (P[i][0] + P[i - 1][0]) / 2; sy += l * (P[i][1] + P[i - 1][1]) / 2; sl += l;
+    }
+  });
+  return sl > 0 ? [sx / sl, sy / sl] : S[0][0];
+}
+// 書きかけのメモの線（親が edit-ink-reset を送るまで。段階が変われば新しいメモ）
+var INK_MAX = 20, inkPend = [], inkKey = null;
+function pointAt(sx, sy){
+  var s = stage(); if (!s) return null;
+  var r = s.getBoundingClientRect(), cx = r.left + sx * r.width / 1280, cy = r.top + sy * r.height / 720;
+  var skip = function(x){ return x.id === "dt-layer" || (x.closest && x.closest("#dt-layer, .deck-tools, .edit-ui")); };
+  var hit = [].filter.call(document.elementsFromPoint(cx, cy), function(x){ return !skip(x); })[0];
+  if (!hit || !inStage(hit)) return null;
+  // 影の木の中の、いちばん奥の要素（nearText が composedPath で辿る）
+  var deep = hit;
+  for (var n = 0; deep.shadowRoot && n < 8; n++){
+    var inner = [].filter.call(deep.shadowRoot.elementsFromPoint(cx, cy), function(x){ return x !== deep && !skip(x); })[0];
+    if (!inner || inner === deep) break;
+    deep = inner;
+  }
+  var path = []; for (var p = deep; p; p = up(p)) path.push(p);
+  return {target: hit, ev: {clientX: cx, clientY: cy, target: hit, composedPath: function(){ return path; }}};
+}
+document.addEventListener("deck:ink", function(e){
+  var P = e.detail && e.detail.pts;
+  if (!editOn || !window.DECK || !Array.isArray(P) || P.length < 2) return;
+  var key = window.DECK.state().key;
+  if (key !== inkKey){ inkPend = []; inkKey = key; }
+  if (inkPend.length >= INK_MAX){ if (window.DECK.toast) window.DECK.toast(window.DECK.ja === false ? "A comment holds at most 20 lines" : "1 つのコメントの線は 20 本まで"); return; }
+  var S = inkPend.concat([P]), c = centroid(S), at = pointAt(c[0], c[1]) || pointAt(S[0][0][0], S[0][0][1]);
+  if (!at) return;
+  inkPend = S;
+  var m = commentHint(at.ev, at.target);
+  m.pin = {x: Math.round(c[0] * 10) / 10, y: Math.round(c[1] * 10) / 10};
+  m.strokes = S.slice();
+  send(m);
+});
+// r（録音モードを開く）の直後の Space は、デッキに渡さない（デッキが段階を進めてしまう）。録音モードはすぐフォーカスを
+// 編集の画面に移すので、その前に押されたものだけ（録音は編集の画面のキーでしか始まらないので、ここでは捨てるだけ）
+var recAt = -1e9;
+window.addEventListener("keydown", function(e){
+  if ((e.key === " " || e.key === "Spacebar") && Date.now() - recAt < 800 && !typing(e)){ e.preventDefault(); e.stopImmediatePropagation(); }
+}, true);
+document.addEventListener("keydown", function(e){
+  if (typing(e) || e.metaKey || e.ctrlKey || e.altKey) return;
+  if (e.key === "r" && !e.shiftKey) recAt = Date.now();
+  if (e.key === "e" || e.key === "n" || e.key === "c" || e.key === "r" || e.key === "Escape") send({kind: "key", key: e.key});
+});
+document.addEventListener("deck:tool", function(e){ send({kind: "tool", mode: e.detail ? e.detail.mode : null}); });
+function ready(){
+  send({kind: "ready"});
+  var T = window.DECK && window.DECK.tools;
+  send({kind: "tool", mode: T && T.mode ? T.mode() : null});
+}
+if (window.DECK && window.DECK.ready) ready(); else document.addEventListener("deck:ready", ready);
+})();

package/server/shell.js

@@ -0,0 +1,71 @@
+// 開発サーバーの外枠（server/dev.mjs が / で配るページ）。デッキは sandbox の iframe（/preview、origin を持たない）の中で動き、
+// 編集の画面（server/editor-ui.js）と合言葉はこの外枠にだけある。デッキからは知らせ（server/hints.js）を受けるだけで、
+// 読み書きはここが合言葉を付けて /__dev/ に頼む
+import { createEditorUI } from './editor-ui.js';
+
+const cfg = JSON.parse(document.getElementById('dev-cfg').textContent);
+const TOKEN = cfg.token;
+const frame = document.getElementById('deck');
+const api = (method, url, body) => {
+  const headers = { 'x-deck-token': TOKEN };
+  if (body) headers['content-type'] = 'application/json';
+  return fetch(url, { method, headers, body: body ? JSON.stringify(body) : undefined, cache: 'no-store' })
+    .then((r) => r.json().catch(() => ({})).then((j) => { j._status = r.status; return j; }));
+};
+let info = { warn: cfg.warn || [] };
+const store = {
+  get: (k) => JSON.parse(sessionStorage.getItem('dev:' + k) || 'null'),
+  set: (k, v) => { if (v === null) sessionStorage.removeItem('dev:' + k); else sessionStorage.setItem('dev:' + k, JSON.stringify(v)); },
+};
+const ui = createEditorUI({
+  frame: () => frame, api, lang: cfg.lang, drawerHost: document.getElementById('wrap'), store,
+  modeHost: document.getElementById('dev-bar'),   // 今のモード（編集中・発表の道具）は下の帯に出す（舞台に重ねない）
+  markLabel: cfg.lang === 'en' ? 'Editing — dev server' : '編集中 — 開発サーバー',
+  warnings: () => info.warn, reload: () => load(true),
+});
+window.__DEV_UI = ui;   // 確かめ方（tools/test-dev-server.mjs）が状態を読む
+
+// ---------------------------------------------------------------- デッキを読み込む（読み込み直すたびに _r を変える：同じ URL の # だけの移動にしない）
+let n = 0;
+function deckUrl(first) {
+  const q = new URLSearchParams(location.search);
+  q.set('cap', cfg.cap);              // 外枠ごとの /preview の印（server/dev.mjs。直接開いた最上位の文書にはデッキを出さない）
+  if (!first) q.set('_r', String(++n));
+  const s = q.toString();
+  return '/preview' + (s ? '?' + s : '') + (first ? location.hash : '');
+}
+function load(keepPos) {
+  ui.frameLoading(keepPos);
+  frame.src = deckUrl(false);
+}
+const hs = parseInt((location.hash || '').slice(1), 10);
+ui.restoreSaved(Number.isFinite(hs) ? hs - 1 : null);
+frame.src = deckUrl(true);
+window.__DEV_LOADS = 0;   // 確かめ方が読み込みを数える
+frame.addEventListener('load', () => { window.__DEV_LOADS++; try { frame.focus(); } catch { /* 無視 */ } });
+
+// 組み直されたら読み込み直す（Server-Sent Events。合言葉はこの外枠だけが持つ）
+const es = new EventSource('/__dev/events?token=' + encodeURIComponent(TOKEN));
+es.addEventListener('reload', () => {
+  load(true);
+  api('GET', '/__dev/info').then((j) => { if (j._status === 200) info = j; });
+  if (pres && !pres.closed) pres.postMessage({ type: 'app-pres-reload' }, '*');
+});
+
+// ---------------------------------------------------------------- 発表者ビュー（外枠が開く窓。その中でもデッキは sandbox の iframe）
+// デッキの p は入り切り（kit/deck.js の openPresenter と同じ）：開いていれば閉じて、フォーカスをプレビューに返す
+let pres = null;
+function togglePresenter() {
+  if (pres && !pres.closed) { try { pres.close(); } catch { /* 無視 */ } pres = null; try { frame.focus(); } catch { /* 無視 */ } return; }
+  pres = window.open('/?presenter=1', 'deck-presenter', 'width=1400,height=820');
+}
+window.addEventListener('message', (e) => {
+  const m = e.data || {};
+  if (e.source === frame.contentWindow) {
+    if (ui.message(e)) { /* 知らせ・位置 */ }
+    if (m.type === 'app-open-presenter') togglePresenter();
+    if (typeof m.type === 'string' && /^deck-/.test(m.type) && pres && !pres.closed) pres.postMessage({ type: 'app-pres-down', m }, '*');
+  } else if (pres && e.source === pres && m.type === 'app-pres-up' && m.m && typeof m.m.type === 'string' && /^deck-/.test(m.m.type)) {
+    frame.contentWindow && frame.contentWindow.postMessage(m.m, '*');
+  }
+});

package/themes/asagi/theme.json

@@ -0,0 +1,14 @@
+{
+  "name": "asagi",
+  "extends": "default",
+  "version": "1.0.0",
+  "fonts": {
+    "body": "Zen Maru Gothic",
+    "heading": "Zen Maru Gothic"
+  },
+  "look": {
+    "heading": "soft",
+    "cover": "circle",
+    "concl": "rounded"
+  }
+}

package/themes/asagi/tokens.css

@@ -0,0 +1,17 @@
+/* 浅葱（asagi）：くすんだ浅葱に丸ゴシック（Zen Maru Gothic、OFL。組み立てが使う字だけを埋め込む：theme.json の fonts）、淡い地。
+   小学校・広報・案内向け。見出しは淡い地の角丸、結論の行も角丸、表紙の右上に大きな丸。形は kit/core/theme-shapes.mjs の断片（theme.json の look） */
+:root{
+  --base: #1d6a85;                 /* 浅葱（白地 5.8:1） */
+  --bg: #fbfaf6;
+  --cover-bg: #eaf3f5;
+  --font-sans: "Zen Maru Gothic", "BIZ UDPGothic", sans-serif;
+}
+/* look heading: soft */
+.slide:not(.cover):not(.sec):not(.layout-tate) > h2{border-bottom:0;background:var(--base-wash);border-radius:16px;padding:8px 22px}
+/* /look */
+/* look cover: circle */
+.slide.cover::before{left:auto;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:var(--base-tint)}
+/* /look */
+/* look concl: rounded */
+.slide:not(.layout-tate) .concl{border:2.3px solid var(--emph);border-radius:36px;padding-left:24px}
+/* /look */

package/themes/business/theme.json

@@ -0,0 +1,5 @@
+{
+  "name": "business",
+  "extends": "default",
+  "version": "1.0.1"
+}

package/themes/business/tokens.css

@@ -0,0 +1,28 @@
+/* ビジネス・ピッチ向けの中立テーマ（business）。機関のロゴを持たない
+   紺の基調色に、結論・強調は橙、3 つ目の系列は青緑。遠くからでも読めるように、文字は黒に近い濃い灰、
+   細い線と淡色は少し濃くする。字は既定の BIZ UDPゴシック（default と同じ） */
+:root{
+  --base: #1b3a5c;                 /* 紺 */
+  --emph: #ba3c05;                 /* 橙（白地 5.6:1、淡い橙の地 --emph-tint の上でも 4.66:1。1.0.1） */
+  --accent2: #0f6e6a;              /* 青緑。3 つ目の系列 */
+  --fg: #1c2530;
+  --muted: #5b6573;                /* 白地とのコントラスト 5.8:1 */
+  --line: #c3cad3;
+  --title: var(--base);
+  --rule: var(--emph);             /* 見出しの下線は橙 */
+  --concl-bg: #fdf3ec;             /* 結論の行は淡い橙の地 */
+  --cover-bg: #f2f5f8;
+  --sec-bg: var(--base);
+  --stage-bg: #1e2329;
+  --series-1: var(--base);
+  --series-2: var(--emph);
+  --series-3: var(--accent2);
+  --series-4: var(--muted);
+}
+@supports (color: color-mix(in oklch, red 10%, white)){
+  :root{
+    --term-tint: color-mix(in oklch, var(--base) 9%, white);
+    --emph-tint: color-mix(in oklch, var(--emph) 13%, white);
+    --concl-bg: color-mix(in oklch, var(--emph) 6%, white);
+  }
+}

package/themes/default/README.ja.md

@@ -0,0 +1,31 @@
+<!-- i18n: pair=README.md sha256=7a810a05df2aafc0 -->
+# テーマ `default`
+
+[English](README.md)
+
+同梱の既定のテーマ。版は `theme.json` にあり、前の版は `vendor/themes/default/<版>/` に残して `themes.lock.json` に載せる（[リファレンス](../../docs/reference.ja.md#テーマ)「テーマの版」）。組み立てが読むのは `theme.json` と `tokens.css` だけで、このファイルはテーマの hash に入らない。
+
+## この色にした理由（1.1.0）
+
+| token | 値 | 白地 | 役割 |
+|---|---|---|---|
+| `--emph` | `#BE3012` | 5.80:1（WCAG AA） | 結論・問題・目標 |
+| `--muted` | `#5C5853` | 7.06:1（WCAG AAA の水準） | 既知の結果・比較の相手・図の説明・引用 |
+| `--fg` | `#222222` | 15.91:1 | 本文（墨） |
+
+- **`--emph` `#BE3012`。** カラーユニバーサルデザイン（CUD）が P 型・D 型の色覚の人のために勧める、黄み（橙）寄りの赤を、文字に使える濃さにしたもの。白地 5.80:1 で WCAG AA を満たす。1 型色覚の模擬で墨との CIEDE2000 の色差は 22.5 から 26.0 に上がり、結論の行が本文と同じ黒に見えにくい。前の臙脂 `#C50516`（1.0.0、`oklch(0.52 0.21 27)`）は青みに寄っていて、CUD が避けるよう勧める側だった。意図して選んだ色ではなかった。
+- **`--muted` `#5C5853`。** 白地 7.06:1（WCAG AAA の水準）。教室の光で黒が浮くプロジェクターでも、小さい字（`.cite`・`.figcap`）でも読める。引き換えに墨との色差は小さくなる（CIEDE2000 25.6 → 18.2）。灰の字は色だけでなく役割と位置（図の説明・引用・比べる相手の結果）でも墨と分かれるので、これでよいとした。
+- これらの token を書かずに `default` を継ぐテーマは、そのまま受け継ぐ。`kokugo` は自分の赤（`--emph-hue: 38`）のまま、新しい灰を継ぐ。
+
+## 結論の行（1.2.0）
+
+@totasuko-lab さんの plain テーマの提案から（1.1.0 は色だけを取り入れた）。結論の行は、色だけに頼らないように（WCAG 1.4.1）4 つの手がかりで示す：左の `--emph` の 5px の縦線、決まった位置（上端 571px・高さ 72px。前と同じ）、太字、淡い地 `--concl-bg`。字は枠の中央でなく、縦線から左揃えにする。縦組み（`layout-tate`）の結論の列は今までの枠のまま。
+
+| `--concl-bg` の候補 | `--emph` の字 | `--fg` の字 | 白地との差 | `--emph` の字（白飛び 15%） |
+|---|---|---|---|---|
+| `#FFFFFF`（1.1.0。透明） | 5.80:1 | 15.91:1 | 1.00（なし） | 3.37:1 |
+| **`#F5F5F5`**（採用） | **5.32:1** | **14.59:1** | 1.09、ΔE00 2.0 | 3.13:1 |
+| `#F6F3EF`（提案の生成り） | 5.24:1 | 14.38:1 | 1.11、ΔE00 3.2（白黒では 2.3） | 3.10:1 |
+
+- **`--concl-bg` `#F5F5F5`。** 無彩の灰は色相を持たないので、どの型の色覚でも白黒の印刷でも同じに見え、行の帯がどこでも同じ程度に分かる。手がかりは縦線と太字が担うので、地はかろうじて見えれば足りる。行が分かる地のうちで、字のコントラストを最も落とさない（`--emph` 5.32:1。大きさによらず AA）。生成り `#F6F3EF` は色のある画面では少し目立つが、白黒では色の見た目ほど分かれず、コントラストも余計に落とす。
+- `default` を継ぐテーマは形を受け継ぐ。`kokugo` は自分の赤の縦線と灰の地、`business` は自分の淡い橙の `--concl-bg` のまま。

package/themes/default/README.md

@@ -0,0 +1,31 @@
+<!-- i18n: pair=README.ja.md sha256=0365c828a3fde5cd -->
+# Theme `default`
+
+[日本語](README.ja.md)
+
+The bundled default theme. Its version is in `theme.json`; earlier versions are kept in `vendor/themes/default/<version>/` and listed in `themes.lock.json` ([reference](../../docs/reference.md#themes), “Theme versions”). The build reads only `theme.json` and `tokens.css`; this file is not part of the theme's hash.
+
+## Why these colors (1.1.0)
+
+| Token | Value | On white | Role |
+|---|---|---|---|
+| `--emph` | `#BE3012` | 5.80:1 (WCAG AA) | conclusions, problems, goals |
+| `--muted` | `#5C5853` | 7.06:1 (WCAG AAA level) | known results, comparisons, captions, citations |
+| `--fg` | `#222222` | 15.91:1 | body text (the ink) |
+
+- **`--emph` `#BE3012`.** The orange-leaning red that colour universal design (CUD) guidance recommends for people with P- and D-type colour vision, darkened to text strength: 5.80:1 on white, which meets WCAG AA. Under protan simulation its CIEDE2000 distance to the ink rises from 22.5 to 26.0, so a conclusion line does not read as body text. The previous crimson `#C50516` (1.0.0, `oklch(0.52 0.21 27)`) leaned bluish, which CUD advises against; it was never a deliberate choice.
+- **`--muted` `#5C5853`.** 7.06:1 on white (WCAG AAA level), so grey text stays readable on projectors, where black is lifted by room light, and at small sizes (`.cite`, `.figcap`). The trade-off is a smaller distance to the ink (CIEDE2000 25.6 → 18.2). That is acceptable because muted text also differs from the ink by role and position (captions, citations, the compared result), not by colour alone.
+- Themes that extend `default` without setting these tokens inherit them: `kokugo` keeps its own red (`--emph-hue: 38`) and takes the new grey.
+
+## The conclusion row (1.2.0)
+
+From the plain-theme proposal by @totasuko-lab (1.1.0 took its colours). The conclusion row is marked by four cues, so it does not depend on colour alone (WCAG 1.4.1): a 5px bar in `--emph` on its left, its fixed position (top 571px, height 72px, as before), bold text, and a light ground `--concl-bg`. The text is left-aligned from the bar instead of centred in a frame. Vertical slides (`layout-tate`) keep the framed conclusion column.
+
+| `--concl-bg` candidate | `--emph` text | `--fg` text | ground vs white | `--emph` text, 15% washout |
+|---|---|---|---|---|
+| `#FFFFFF` (1.1.0: transparent) | 5.80:1 | 15.91:1 | 1.00 (none) | 3.37:1 |
+| **`#F5F5F5`** (chosen) | **5.32:1** | **14.59:1** | 1.09, ΔE00 2.0 | 3.13:1 |
+| `#F6F3EF` (proposal's warm off-white) | 5.24:1 | 14.38:1 | 1.11, ΔE00 3.2 (2.3 in greyscale) | 3.10:1 |
+
+- **`--concl-bg` `#F5F5F5`.** A neutral grey has no hue, so it looks the same for every colour-vision type and in greyscale print: the row reads as a band everywhere to the same degree. The bar and bold carry the cue, so the ground only needs to be just visible; this one costs the least contrast among the grounds that still separate the row (`--emph` 5.32:1, above AA for any size). The warm `#F6F3EF` is a little more visible in colour, but in greyscale it separates less than its colour suggests and it costs more contrast.
+- Themes that extend `default` take the shape: `kokugo` gets the bar in its own red and the grey ground; `business` keeps its own pale-orange `--concl-bg`.

package/themes/default/theme.json

@@ -0,0 +1,4 @@
+{
+  "name": "default",
+  "version": "1.2.0"
+}

package/themes/default/tokens.css

@@ -0,0 +1,73 @@
+/* 既定のテーマ（default）
+   基調色 --base を 1 つ決めれば、ほかの色はそこから導く（academic-* テーマの「基調色＋補色＋淡色」と同じ考え方）。
+   部品とレイアウトは意味で名付けた変数（--term, --emph, --muted …）だけを参照する */
+:root{
+  --base: #1d4f91;                 /* 基調色。テーマごとにこれを替える */
+  /* --emph-hue（結論・問題の色相）：既定では宣言しない。テーマが宣言すると --emph は oklch(0.52 0.21 <色相>) から導く
+     （下の @supports。kokugo は 38）。宣言しなければ --emph は下の固定の値 */
+
+  /* 導かれる色。ここでは古いブラウザ向けの固定の値（既定の --base #1d4f91 から計算した値）を置き、
+     下の @supports で基調色から導く式に置き換える（カスタムプロパティは後の宣言が常に勝つので、
+     「前に予備の値を書く」だけでは効かない。対応しているかを @supports で分ける） */
+  --complement: #744400;
+  --accent2:    #744400;
+  --base-tint:  #cbd7e8;
+  --base-wash:  #eef2f8;
+  --comp-tint:  #e0d4c3;
+
+  /* 意味の色（部品はここだけを使う） */
+  --fg:      #222222;
+  --bg:      #ffffff;
+  --title:   var(--base);                       /* 古いブラウザでは基調色そのもの */
+  --term:    var(--base);                       /* 用語・問い・補足 */
+  --emph:    var(--emph-from-hue, #BE3012);     /* 結論・問題・目標。朱寄りの赤（白地 5.8:1。1 型色覚の模擬でも墨と分かれる。1.1.0） */
+  --muted:   #5C5853;                           /* 既知の結果・比較対象。温かい灰（白地 7.1:1。明るい教室の投影でも読める。1.1.0） */
+  --line:    #cccccc;
+  --rule:    var(--base);
+  --term-tint: var(--base-wash);
+  --emph-tint: #fbe7e3;
+  --concl-bg:  #F5F5F5;                         /* 結論の行の地。無彩のごく淡い灰（--emph の字 5.3:1・--fg 14.6:1。色覚の型と白黒でも見え方が同じ。1.2.0） */
+
+  /* 先のステップを薄く見せるときの濃さ（format spec §8.4 の --preview-opacity。プレーヤーも部品もこれを読む） */
+  --preview-opacity: .45;
+
+  /* 図の系列の色（順に使う） */
+  --series-1: var(--term);
+  --series-2: var(--emph);
+  --series-3: var(--accent2);
+  --series-4: var(--muted);
+
+  /* 字 */
+  --font-sans: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
+  --weight-body: 400;
+
+  /* 字幕（s）：字の大きさ・下端からの距離・左右の余白・1 まとまりの行数の上限。読む速さ（字/秒）は --cap-rate（既定 ja 7、en 15） */
+  --cap-size: 27px;
+  --cap-bottom: 18px;
+  --cap-side: 96px;
+  --cap-max-lines: 3;
+}
+/* 対応しているブラウザでは基調色から導く（Chrome/Edge 119+、Firefox 128+、Safari 18+）。
+   テーマの tokens.css はこの後に読まれるので、テーマが上書きした値はそのまま勝つ */
+/* --emph-hue を宣言したテーマだけ：--emph-hue がなければ --emph-from-hue は無効になり、--emph は固定の値 #BE3012 になる */
+@supports (color: oklch(0.5 0.1 30)){
+  :root{ --emph-from-hue: oklch(0.52 0.21 var(--emph-hue)); }
+}
+@supports (color: color-mix(in oklch, red 10%, white)){
+  :root{
+    --base-tint:  color-mix(in oklch, var(--base) 22%, white);
+    --base-wash:  color-mix(in oklch, var(--base) 7%, white);
+    --emph-tint:  color-mix(in oklch, var(--emph) 12%, white);
+  }
+}
+@supports (color: oklch(from red min(l, 0.5) c calc(h + 180))) and (color: color-mix(in oklch, red 10%, white)){
+  :root{
+    --complement: oklch(from var(--base) l c calc(h + 180));
+    --accent2:    oklch(from var(--complement) min(l, 0.55) c h);
+    --comp-tint:  color-mix(in oklch, var(--complement) 22%, white);
+    --title:      oklch(from var(--base) min(l, 0.32) c h);
+  }
+}
+/* 結論の行（1.2.0）：左の縦線＋決まった位置（571px・高さ 72px は kit/layouts.css のまま）＋太字＋淡い灰の地 --concl-bg。色だけに頼らない（WCAG 1.4.1）。
+   テーマの CSS は layouts.css の後に読まれるので、同じ詳細度（:where は 0）で勝つ。縦組み（layout-tate）の結論の列は今までの枠のまま */
+:where(.slide:not(.layout-tate)) .concl{left:30px;border:0;border-left:5px solid var(--emph);border-radius:0;justify-content:flex-start;padding-left:13px}

package/themes/kogecha/theme.json

@@ -0,0 +1,10 @@
+{
+  "name": "kogecha",
+  "extends": "default",
+  "version": "1.0.0",
+  "look": {
+    "heading": "double",
+    "cover": "frame",
+    "concl": "left-rule"
+  }
+}

package/themes/kogecha/tokens.css

@@ -0,0 +1,16 @@
+/* 焦茶（kogecha）：暗く冷たい茶に青緑、生成りの地。人文・歴史・地域向け。見出しは二重線、表紙は細い枠。
+   赤との差を保つため茶を暗く冷たくした（1 型の模擬で赤との差 ΔE*ab 28 → 37、ΔE00 は 20.0 → 23.0）。形は kit/core/theme-shapes.mjs の断片（theme.json の look） */
+:root{
+  --base: #3d3132;                 /* 焦茶（1 型・2 型・3 型の模擬で強調の赤と ΔE00 23 以上） */
+  --accent2: #1d6b70;              /* 青緑。3 つ目の系列 */
+  --bg: #fcfaf5;                   /* 生成り */
+  --cover-bg: #f3ece1;
+  --sec-bg: #3d3132;
+  --series-3: var(--accent2);
+}
+/* look heading: double */
+.slide:not(.cover):not(.sec):not(.layout-tate) > h2{border-bottom:6px double var(--base)}
+/* /look */
+/* look cover: frame */
+.slide.cover::before{left:28px;right:28px;top:28px;bottom:28px;height:auto;background:transparent;border:2px solid var(--base)}
+/* /look */

package/themes/kokugo/theme.json

@@ -0,0 +1,4 @@
+{
+  "name": "kokugo",
+  "extends": "default"
+}

package/themes/kokugo/tokens.css

@@ -0,0 +1,12 @@
+/* 国語（kokugo）：本文は明朝（BIZ UDP明朝）、基調色は藍、強調は朱（訓点を朱で書き入れる習いから）、地は生成り。
+   縦書き（.tate）と国語の部品（m-kanbun・m-kobun・m-gendai）に合わせる。機関に依存しない。
+   字幕（s）だけはゴシックにする（小さく速く読む字なので。編集アプリの段 A の字の補いもゴシックだけを補う） */
+:root{
+  --base: #264a7c;                 /* 藍 */
+  --emph-hue: 38;                  /* 朱（default は 27 の赤） */
+  --fg: #2a2522;                   /* 墨 */
+  --bg: #fffdf8;                   /* 生成り */
+  --cover-bg: #f6f1e6;
+  --font-sans: var(--font-mincho);
+  --font-cap: "BIZ UDPGothic", "Hiragino Sans", sans-serif;
+}

package/themes/murasaki/theme.json

@@ -0,0 +1,10 @@
+{
+  "name": "murasaki",
+  "extends": "default",
+  "version": "1.0.0",
+  "look": {
+    "heading": "left-bar",
+    "cover": "bottom-band",
+    "concl": "left-rule"
+  }
+}

package/themes/murasaki/tokens.css

@@ -0,0 +1,12 @@
+/* 江戸紫（murasaki）：ロゴの紺藍に近い紫。研究・一般向けの講演向け。見出しの左に縦の帯（下線なし）、表紙は下に紫の帯。
+   形は kit/core/theme-shapes.mjs の断片（theme.json の look） */
+:root{
+  --base: #5a3d8f;                 /* 江戸紫 */
+}
+/* look heading: left-bar */
+.slide:not(.cover):not(.sec):not(.layout-tate) > h2{border-bottom:0;border-left:10px solid var(--base);padding:4px 0 4px 18px}
+/* /look */
+/* look cover: bottom-band */
+.slide.cover::before{top:auto;bottom:0;height:120px}
+.slide.cover .au{top:420px}
+/* /look */

package/themes/sumi/theme.json

@@ -0,0 +1,10 @@
+{
+  "name": "sumi",
+  "extends": "default",
+  "version": "1.0.0",
+  "look": {
+    "heading": "band",
+    "cover": "left-bar",
+    "concl": "left-rule"
+  }
+}