@cardenelabs/dragon 0.35.0 → 0.36.0

package/src/player.ts

@@ -6,6 +6,10 @@
  * 図そのものは読み上げから隠して同じ中身を 2 度読ませない。
  * 見せ方は枠の幅で選び (`view.ts`)、寄って追う時は窓と全体図で描き直す。
  * 釦と段の一覧の読み上げの名前と全体図の札は、渡した言葉 (`options.lang`、書かなければ日本語) で出す (#3001)。
+ * 段が替わるたびに `options.onStep` で今の段を知らせ、頁の側が段の札や進み具合を出せるようにする (#3031)。
+ * 段の本文の帯は本文の最も長い段の高さに保ち、段を送っても図の大きさと位置を変えない (#3049)。
+ * 帯の中身の幅が `LOOK.player.narrow` より狭い時は、段を送る釦を指で押せる大きさにして段の番号と上の段に並べ、
+ * 題と本文をその下の段の全幅に置く (#3057、#3069)。
  */
 import { FIGURE_TEXT } from "./figure-text";
 import { FONT_VARS, LOOK, paletteVars, resolvePalette, type TextStyle, TYPE } from "./look/values";
@@ -13,6 +17,16 @@ import { drawSvg, type RenderOptions, renderDiagram } from "./render/svg";
 import type { Span } from "./timeline";
 import { chooseView } from "./view";
 
+export interface PlayerOptions extends RenderOptions {
+  /** 段が替わるたびに今の段 (0 から) を受け取る。置いた時にも最初の段で 1 度呼ぶ。頁の側で段の札や進み具合を出す時に使う (#3031) */
+  onStep?: (step: number) => void;
+  /**
+   * 図を、図の枠の中で見える高さに収める (#3047)。高さに収めると字が読めない図は寄って追う図にし、寄って追う窓と全体図をその高さに収める。
+   * 枠の高さが決まっている置き場 (カタログの拡大の重ね窓) で使う。枠の高さが図に合わせて伸びる置き場で使うと、描くたびに低くなる
+   */
+  fitHeight?: boolean;
+}
+
 export interface Player {
   /** 今の段 (0 から) */
   readonly step: number;
@@ -34,15 +48,37 @@ function playerCss(): string {
   return [
     `.dg-player{display:flex;flex-direction:column;gap:${px(P.gap)};color:var(--ink)}`,
     `.dg-player .dg-frame{border-radius:${px(P.radius)};overflow:hidden}`,
-    `.dg-bar{display:flex;align-items:flex-start;gap:${px(P.gap)}}`,
+    // 並べ方は帯の中身の幅で選ぶ。帯の中の 1 段 (`.dg-row`) が並べ替わり、帯の左右の余白は置いた頁が帯に付ける
+    `.dg-bar{container:dg-bar/inline-size}`,
+    `.dg-row{display:flex;align-items:flex-start;gap:${px(P.gap)}}`,
     `.dg-btns{display:flex;gap:${px(P.gap / 2)};flex:none}`,
     `.dg-btn{width:${px(P.button)};height:${px(P.button)};border-radius:${px(P.radius)};border:${px(LOOK.stroke.hair)} solid var(--hair);background:var(--surf);color:var(--ink);${font(TYPE.button)};cursor:pointer}`,
     `.dg-btn:focus-visible{outline:${px(P.focus)} solid var(--c-blue);outline-offset:${px(P.focus)}}`,
     `.dg-say{display:flex;gap:${px(P.gap)};min-width:0}`,
     `.dg-no{${font(TYPE.stepNo)};color:var(--mute);padding-top:${px(P.focus)}}`,
+    `.dg-txt{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}`,
+    `.dg-txt>*{grid-area:1/1}`,
+    `.dg-room{visibility:hidden}`,
     `.dg-tt{${font(TYPE.stepTitle)};margin:0}`,
     `.dg-tb{${font(TYPE.stepBody)};color:var(--ink2);margin:0;white-space:pre-line}`,
     `.dg-sr{position:absolute;width:${hidden};height:${hidden};margin:-${hidden};padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}`,
+    // 狭い帯 (携帯の幅) では、段を送る釦を指で押せる大きさにし、その横に番号を置き、
+    // 題を 2 段目、本文を 3 段目に置いてどちらも帯の全幅を使う (#3057、#3069)。
+    // 釦を大きくすると横に題を置く幅が足りず題が細かく折れるため、題は釦の段に置かない。
+    // 題と本文を包む箱を外して写しも同じ升に重ねるので、2 段目は最も高い題、3 段目は最も長い本文の高さになる。
+    // 題と本文の間は広い帯と同じく空けず、釦の段の下にだけ間を取って、帯が高くなる分を抑える
+    `@container dg-bar (width < ${px(P.narrow)}){` +
+      `.dg-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:0 ${px(P.gap)}}` +
+      `.dg-say,.dg-txt,.dg-txt>*{display:contents}` +
+      `.dg-btns{grid-area:1/1;margin-bottom:${px(P.gap / 2)}}` +
+      `.dg-btn{width:${px(P.touch)};height:${px(P.touch)}}` +
+      `.dg-no{grid-area:1/2;display:flex;align-items:center;min-height:${px(P.touch)};padding-top:0}` +
+      `.dg-tt{grid-area:2/1/3/3}` +
+      `.dg-tb{grid-area:3/1/4/3}` +
+      `}`,
+    // 指で触る時は、広い帯でも段を送る釦を指で押せる大きさにする (#3076)。並びは横 1 列のまま変えない。
+    // 広い帯は本文が 2 行あれば帯の高さが変わらず、本文の無い帯だけが釦の分だけ高くなる
+    `@media (pointer: coarse){.dg-btn{width:${px(P.touch)};height:${px(P.touch)}}}`,
   ].join("");
 }
 
@@ -61,7 +97,7 @@ const pad = (n: number): string => String(n).padStart(2, "0");
 /** 段の番号の札 (`01/12`)。`step` は 0 から数える。 */
 export const stepNo = (step: number, count: number): string => `${pad(step + 1)}/${pad(count)}`;
 
-export function mountDiagram(host: HTMLElement, diagram: unknown, options: RenderOptions = {}): Player {
+export function mountDiagram(host: HTMLElement, diagram: unknown, options: PlayerOptions = {}): Player {
   const doc = host.ownerDocument;
   const win = doc.defaultView;
   // 描く前に読む。描いた後に読むと、動きを嫌う人にも一瞬だけ流れてしまう
@@ -108,17 +144,41 @@ export function mountDiagram(host: HTMLElement, diagram: unknown, options: Rende
   no.className = "dg-no";
   no.dataset.dragon = "step-no";
   const text = doc.createElement("div");
+  text.className = "dg-txt";
   const title = doc.createElement("p");
   title.className = "dg-tt";
   title.dataset.dragon = "step-title";
   const body = doc.createElement("p");
   body.className = "dg-tb";
   body.dataset.dragon = "step-body";
-  text.append(title, body);
+  const live = doc.createElement("div");
+  live.append(title, body);
+  text.append(live);
+  // 全部の段の題と本文の写しを今の段と同じ升に重ね、見た目からは隠して場所だけを取る。
+  // 帯の高さが本文の最も長い段で決まり、段を送っても図の枠が伸び縮みしない (#3049)
+  for (const step of steps) {
+    const room = doc.createElement("div");
+    room.className = "dg-room";
+    room.dataset.dragon = "caption-room";
+    const roomTitle = doc.createElement("p");
+    roomTitle.className = "dg-tt";
+    roomTitle.textContent = step.title;
+    const roomBody = doc.createElement("p");
+    roomBody.className = "dg-tb";
+    roomBody.textContent = step.body;
+    room.append(roomTitle, roomBody);
+    text.append(room);
+  }
   say.append(no, text);
+  // 狭い帯では語りの箱を外して番号と題と本文を釦と同じ升の並びに置く (#3057)。
+  // 箱を外した要素の読み上げからの隠し方に頼らず、見える語りの 1 つずつも読み上げから隠す
+  for (const shown of [no, title, body]) shown.setAttribute("aria-hidden", "true");
+  const row = doc.createElement("div");
+  row.className = "dg-row";
+  row.append(buttons, say);
   const bar = doc.createElement("div");
   bar.className = "dg-bar";
-  bar.append(buttons, say);
+  bar.append(row);
 
   // 読み上げの道具が段の順に読む一覧。見た目からは外すが、読み上げからは隠さない
   const list = doc.createElement("ol");
@@ -142,8 +202,16 @@ export function mountDiagram(host: HTMLElement, diagram: unknown, options: Rende
   host.append(root);
 
   const frameWidth = (): number => frame.clientWidth || host.clientWidth || rendered.layout.width;
-  let mode = chooseView(rendered, frameWidth()).mode;
+  /** 高さに収めると頼まれた時だけ、図の枠の中で見える高さ (上下の余白を除く)。測れない時は `undefined` で、幅だけで決める */
+  const frameHeight = (): number | undefined => {
+    if (!options.fitHeight || !win) return undefined;
+    const style = win.getComputedStyle(frame);
+    const inner = frame.clientHeight - (Number.parseFloat(style.paddingTop) || 0) - (Number.parseFloat(style.paddingBottom) || 0);
+    return inner > 0 ? inner : undefined;
+  };
+  let mode = chooseView(rendered, frameWidth(), frameHeight()).mode;
   let width = frameWidth();
+  let height = frameHeight();
   let svg: SVGSVGElement | null = null;
   let step = 0;
   let playing = !reduce;
@@ -172,7 +240,7 @@ export function mountDiagram(host: HTMLElement, diagram: unknown, options: Rende
     svg = next;
     born = Date.now();
   };
-  const markup = (): string => (mode === "follow" ? drawSvg(rendered.diagram, rendered.layout, timeline, palette, rendered.theme, { width, lang }) : rendered.svg);
+  const markup = (): string => (mode === "follow" ? drawSvg(rendered.diagram, rendered.layout, timeline, palette, rendered.theme, { width, ...(height === undefined ? {} : { height }), lang }) : rendered.svg);
 
   const now = (): number => (playing ? (at + (Date.now() - born) / 1000) % timeline.total : at);
   const stepAt = (t: number): number => {
@@ -189,6 +257,7 @@ export function mountDiagram(host: HTMLElement, diagram: unknown, options: Rende
     body.textContent = current?.body ?? "";
     toggleButton.setAttribute("aria-label", playing ? words.pause : words.play);
     toggleButton.textContent = playing ? BUTTON_TEXT.pause : BUTTON_TEXT.play;
+    options.onStep?.(step);
   };
   const restart = (t: number, play: boolean): void => {
     at = t;
@@ -227,16 +296,18 @@ export function mountDiagram(host: HTMLElement, diagram: unknown, options: Rende
   toggleButton.addEventListener("click", onToggle);
   frame.addEventListener("click", onFigure);
 
-  // 枠の幅が変わったら見せ方を選び直す。寄って追う窓は幅で決まるので、幅が変われば描き直す
+  // 枠の大きさが変わったら見せ方を選び直す。寄って追う窓は幅 (高さに収める時は高さも) で決まるので、変われば描き直す
   const Observer = (win as (Window & { ResizeObserver?: typeof ResizeObserver }) | null)?.ResizeObserver;
   const observer = Observer
     ? new Observer(() => {
         const w = frameWidth();
-        const chosen = chooseView(rendered, w).mode;
-        if (chosen === mode && (mode === "fixed" || w === width)) return;
+        const h = frameHeight();
+        const chosen = chooseView(rendered, w, h).mode;
+        if (chosen === mode && (mode === "fixed" || (w === width && h === height))) return;
         const t = now();
         mode = chosen;
         width = w;
+        height = h;
         at = t;
         place(markup());
       })

package/src/printer.ts

@@ -1,76 +1,106 @@
 /**
- * 図の原本の JSON を、人が書く記法へ書き戻す。
+ * 図の原本の JSON を、人が書く dragon記法へ書き戻す (#3137)。
  *
  * 並べ方は決まった形に整える。JSON の欄の並び順は見ず、欄の名前で読むので、
  * 同じ内容の JSON からは毎回同じ文字列になる。書き手の行の並べ方とコメントは保たない。
  * 段の中で起きることは JSON の並び順 (起きる順) のまま書く。
  *
- * 語は渡した言葉で書く (#2997)。渡さなければ日本語で書く。
- * 英語では添え書きと下の字と書き換えの字を `"…"` で囲み、名前か字に `"` を含む物だけ「」で囲む。
- * 英語の語の file でも「」は読めるので、読み直すと同じ JSON に戻る。
+ * `"` で囲むのは要る時だけにする。`[` を含む名前と、`,` か `]` を含む属性の値と、`"` で始まる字を囲む。
+ * 箱は JSON の並びのまま書き、同じ区画の箱が続く所を 1 つの `group … end` にする。
+ * 区画の箱が飛び飛びの時は同じ `group` を開き直す。区画の並びが箱の現れる順と違う時と、
+ * 箱の無い区画がある時は、先に全ての区画を中の無い `group … end` で宣言してから開き直す。
  */
-import type { Box, Carry, Diagram, DiagramEvent, Region } from "./schema";
-import { type NotationLang, type WORDS, wordOf } from "./words";
+import type { Box, Diagram, DiagramEvent, Region } from "./schema";
 
-type AttrKey = keyof typeof WORDS.attr;
+const quote = (text: string): string => `"${text.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+/** 行の終わりか `[` の前に置く名前と文 */
+const name = (text: string): string => (text.includes("[") || text.startsWith('"') ? quote(text) : text);
+/** `:` の前に置く字 (帯の題と、`set` の欄) */
+const key = (text: string): string => (text.includes(":") || text.includes("[") || text.startsWith('"') ? quote(text) : text);
+/** `strip` の行に `,` で並べる欄 */
+const field = (text: string): string => (text.includes(",") || text.startsWith('"') ? quote(text) : text);
+/** 属性の値 */
+const value = (text: string): string => (text.includes(",") || text.includes("]") || text.startsWith('"') ? quote(text) : text);
 
-export interface PrintOptions {
-  /** 記法の語の言葉。既定は日本語 */
-  lang?: NotationLang;
-}
-
-/** 名前の後ろに `text` を囲んで付ける。`text` が無ければ何も付けない */
-function quoted(name: string, text: string | undefined, lang: NotationLang): string {
-  if (text === undefined) return "";
-  if (lang === "en" && !name.includes('"') && !text.includes('"')) return ` "${text}"`;
-  return `「${text}」`;
-}
+/** 属性の並び。値の無い鍵は書かず、1 つも無ければ何も付けない */
+const attrs = (pairs: [string, string | undefined][]): string => {
+  const written = pairs.filter((pair): pair is [string, string] => pair[1] !== undefined);
+  return written.length === 0 ? "" : ` [${written.map(([k, v]) => `${k}: ${value(v)}`).join(", ")}]`;
+};
 
-export function printNotation(diagram: Diagram, options: PrintOptions = {}): string {
-  const lang = options.lang ?? "ja";
-  const attrs = (pairs: [AttrKey, string | undefined][]): string =>
-    pairs
-      .filter((pair): pair is [AttrKey, string] => pair[1] !== undefined)
-      .map(([key, value]) => ` [${wordOf("attr", key, lang)} ${value}]`)
-      .join("");
+/** 名札と違う名前だけを `as` の後ろに書く */
+const shown = (id: string, text: string): string => (text === id ? "" : ` as ${name(text)}`);
 
-  const region = (r: Region): string =>
-    `${wordOf("head", "region", lang)} ${r.id} = ${r.name}${quoted(r.name, r.note, lang)}${attrs([["color", r.color], ["icon", r.icon]])}`;
-  const box = (b: Box): string =>
-    `${b.id} = ${b.name}${quoted(b.name, b.sub, lang)}${attrs([["color", b.color], ["icon", b.icon], ["region", b.region]])}`;
+const declareRegion = (r: Region): string =>
+  `group ${r.id}${shown(r.id, r.name)}${attrs([
+    ["note", r.note],
+    ["color", r.color],
+    ["icon", r.icon],
+  ])}`;
+const declareBox = (b: Box): string =>
+  `box ${b.id}${shown(b.id, b.name)}${attrs([
+    ["note", b.sub],
+    ["color", b.color],
+    ["icon", b.icon],
+  ])}`;
 
-  const carry = (c: Carry): string => {
-    if (c.kind === "envelope") return "";
-    if (c.kind === "tag") return ` [${wordOf("carry", "tag", lang)} ${c.text}]`;
-    return ` [${wordOf("carry", c.kind, lang)}]`;
-  };
+function event(e: DiagramEvent): string {
+  switch (e.type) {
+    case "edge": {
+      const carry: [string, string][] = e.carry.kind === "tag" ? [["tag", e.carry.text]] : e.carry.kind === "envelope" ? [] : [["carry", e.carry.kind]];
+      return `${e.from} -> ${e.to}${e.label === undefined ? "" : `: ${name(e.label)}`}${attrs([...carry, ["side", e.labelSide]])}`;
+    }
+    case "action":
+      return `act ${e.box}: ${e.label}`;
+    case "swap":
+      return `note ${e.box}: ${e.text}`;
+    case "strip":
+      return `set ${key(e.field)}${e.value === undefined ? "" : `: ${name(e.value)}`}${attrs([["tag", e.tag]])}`;
+  }
+}
 
-  const event = (e: DiagramEvent): string => {
-    switch (e.type) {
-      case "edge":
-        return `${e.from} -> ${e.to}${e.label === undefined ? "" : ` : ${e.label}`}${carry(e.carry)}${e.labelSide ? ` [${wordOf("attr", "label", lang)} ${wordOf("side", e.labelSide, lang)}]` : ""}`;
-      case "action":
-        return `${e.box} : ${e.label}`;
-      case "swap":
-        return `${e.box}${quoted("", e.text, lang)}`;
-      case "strip":
-        return `${wordOf("head", "strip", lang)} ${e.field}${e.value === undefined ? "" : ` = ${e.value}`}${e.tag === undefined ? "" : ` [${e.tag}]`}`;
+/** 区画と箱の宣言の塊。塊どうしは空行で区切る */
+function declarations(diagram: Diagram): string[] {
+  const regions = diagram.regions ?? [];
+  const runs: { region?: string; boxes: Box[] }[] = [];
+  for (const b of diagram.boxes) {
+    const last = runs.at(-1);
+    if (last && last.region === b.region) last.boxes.push(b);
+    else runs.push({ ...(b.region !== undefined ? { region: b.region } : {}), boxes: [b] });
+  }
+  const opened = [...new Set(runs.flatMap((run) => (run.region === undefined ? [] : [run.region])))];
+  const inOrder = opened.length === regions.length && opened.every((id, i) => regions[i]?.id === id);
+  const declared = new Set<string>();
+  const blocks: string[] = [];
+  if (!inOrder) {
+    for (const r of regions) {
+      blocks.push(`${declareRegion(r)}\nend`);
+      declared.add(r.id);
+    }
+  }
+  for (const run of runs) {
+    const lines = run.boxes.map(declareBox);
+    if (run.region === undefined) {
+      blocks.push(lines.join("\n"));
+      continue;
     }
-  };
+    const region = regions.find((r) => r.id === run.region);
+    const open = declared.has(run.region) || !region ? `group ${run.region}` : declareRegion(region);
+    declared.add(run.region);
+    blocks.push([open, ...lines.map((line) => `  ${line}`), "end"].join("\n"));
+  }
+  return blocks;
+}
 
-  const head = [
-    ...(diagram.view ? [`${wordOf("head", "view", lang)} ${wordOf("view", diagram.view, lang)}`] : []),
-    ...(diagram.regions ?? []).map(region),
-    ...diagram.boxes.map(box),
-    ...(diagram.strip ? [`${wordOf("head", "strip", lang)} ${diagram.strip.title} = ${diagram.strip.fields.join(", ")}`] : []),
-  ];
-  const steps = diagram.steps.map((step) =>
-    [
-      `# ${step.title}`,
-      ...step.body.split("\n").map((line) => `> ${line}`),
-      ...(step.code === undefined ? [] : [`\`${step.code}\``]),
-      ...step.events.map(event),
-    ].join("\n"),
-  );
-  return [`${wordOf("kind", diagram.kind, lang)} ${diagram.title}`, head.join("\n"), ...steps].join("\n\n") + "\n";
+export function printNotation(diagram: Diagram): string {
+  const blocks = [`${diagram.kind} ${name(diagram.title)}${attrs([["view", diagram.view]])}`, ...declarations(diagram)];
+  if (diagram.strip) blocks.push(`strip ${key(diagram.strip.title)}: ${diagram.strip.fields.map(field).join(", ")}`);
+  for (const step of diagram.steps) {
+    const body = step.body.split("\n");
+    const say = body.length === 1 ? [`  say ${step.body}`] : ["  say", ...body.map((line) => (line === "" ? "" : `    ${line}`))];
+    blocks.push(
+      [`step ${step.title}`, ...say, ...(step.code === undefined ? [] : [`  code ${step.code}`]), ...step.events.map((e) => `  ${event(e)}`)].join("\n"),
+    );
+  }
+  return `${blocks.join("\n\n")}\n`;
 }

package/src/render/parts.ts

@@ -76,31 +76,51 @@ export function band(region: SceneRegion): string {
 /** 箱の下の小さな字の移り変わり。`[時刻, 字, class]` の並びで、最初は元の字。 */
 export type SubChange = [number, string, string];
 
-/** 箱。動く段は縁に色を付け、外側に淡い光を足す。下の小さな字は起きたことに合わせて書き換わる。 */
-export function card(box: SceneBox, ctx: Ctx, on: number[], changes: SubChange[]): string {
-  const { m, sh } = ctx;
-  const { radius, icon, iconRadius, iconScale, iconY, nameY, subY } = LOOK.box;
+/** 箱の下の小さな字。基準線を `y` に置き、起きたことに合わせて書き換わる。 */
+function subLines(box: SceneBox, m: Motion, changes: SubChange[], y: number): string {
   const seq: SubChange[] = [[0, box.sub ?? "", "dg-ss"], ...changes];
-  const subs = seq
+  return seq
     .map(([t, text, cls], k) => {
       const next = seq[k + 1]?.[0];
       const anim = k === 0 ? (next === undefined ? "" : m.until(next - MOTION.untilFade)) : next === undefined ? m.rise(t) : m.rise(t, next - MOTION.untilFade);
       if (text === "") return "";
-      return `<g${anim ? ` class="dg-a" style="${anim}"` : ""}><text class="${cls}" x="${r1(box.cx)}" y="${r1(box.cy + subY)}" text-anchor="middle">${esc(text)}</text></g>`;
+      return `<g${anim ? ` class="dg-a" style="${anim}"` : ""}><text class="${cls}" x="${r1(box.cx)}" y="${r1(y)}" text-anchor="middle">${esc(text)}</text></g>`;
     })
     .join("");
+}
+
+/** 箱の地と縁。上端 `y` から高さ `h`。動く段 (`act` の間) は縁に色を付け、外側に淡い光を足す。 */
+function cardFrame(box: SceneBox, ctx: Ctx, act: string | undefined, y: number, h: number): string {
+  const rect = (cls: string, extra = ""): string => `<rect class="${cls}" x="${r1(box.x)}" y="${r1(y)}" width="${r1(box.w)}" height="${h}" rx="${LOOK.box.radius}"${extra}/>`;
+  return `${act ? `<g class="dg-a" style="${act}">${rect("dg-halo")}</g>` : ""}${rect("dg-st", ` ${ctx.sh}`)}${act ? `<g class="dg-a" style="${act}">${rect("dg-on")}</g>` : ""}`;
+}
+
+/** 箱。動く段は縁に色を付け、外側に淡い光を足す。下の小さな字は起きたことに合わせて書き換わる。 */
+export function card(box: SceneBox, ctx: Ctx, on: number[], changes: SubChange[]): string {
+  const { icon, iconRadius, iconScale, iconY, nameY, subY } = LOOK.box;
+  const subs = subLines(box, ctx.m, changes, box.cy + subY);
   const act = on.length > 0 ? activeKf(ctx, on) : undefined;
-  const rect = (cls: string, extra = ""): string => `<rect class="${cls}" x="${r1(box.x)}" y="${r1(box.y)}" width="${r1(box.w)}" height="${box.h}" rx="${radius}"${extra}/>`;
   const mark =
     box.icon && ICONS[box.icon]
       ? `<rect class="dg-ic" x="${r1(box.cx - icon / 2)}" y="${r1(box.cy + iconY - icon / 2)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(box.icon, box.cx, box.cy + iconY, iconScale)}`
       : "";
   return (
-    `<g style="${cs(box.color)}">${act ? `<g class="dg-a" style="${act}">${rect("dg-halo")}</g>` : ""}${rect("dg-st", ` ${sh}`)}${act ? `<g class="dg-a" style="${act}">${rect("dg-on")}</g>` : ""}` +
+    `<g style="${cs(box.color)}">${cardFrame(box, ctx, act, box.y, box.h)}` +
     `${mark}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(box.cy + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`
   );
 }
 
+/**
+ * 寄って追う時系列図の窓の上端に貼る頭の箱 (#3120)。図の頭の箱と同じ横の位置と縁で、アイコンを外して名前と下の字の 2 段にする。
+ * 携帯の幅では窓が低く、図の頭の箱のままでは窓の高さの 3 割を頭の列が取るため。
+ */
+export function headCard(box: SceneBox, ctx: Ctx, on: number[], changes: SubChange[]): string {
+  const { pad, h, nameY, subY } = LOOK.follow.head;
+  const subs = subLines(box, ctx.m, changes, pad + subY);
+  const act = on.length > 0 ? activeKf(ctx, on) : undefined;
+  return `<g style="${cs(box.color)}">${cardFrame(box, ctx, act, pad, h)}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(pad + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
+}
+
 export function lifeline(x: number, y1: number, y2: number): string {
   return `<line class="dg-ll" x1="${r1(x)}" y1="${r1(y1)}" x2="${r1(x)}" y2="${r1(y2)}"/>`;
 }