@cardenelabs/dragon 0.34.0 → 0.35.1

package/src/layout/scene.ts

@@ -0,0 +1,353 @@
+/**
+ * 置き場所を決めた結果 (場面) の形と、図の種類に依らず使う置き方。
+ *
+ * 座標は字が原寸の時の px で、左上を (0, 0) にする。線の名前は線の脇から箱を避けて置き、
+ * 中身の帯は図の下に横いっぱいに置く。
+ */
+import type { Family } from "../look/fonts";
+import { COLOR_ORDER, type ColorKey, LOOK, TYPE } from "../look/values";
+import type { Carry, Diagram, DiagramEvent, LabelSide } from "../schema";
+import { hasWide, textWidth } from "./measure";
+
+export type Point = [number, number];
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface SceneBox extends Rect {
+  id: string;
+  name: string;
+  sub?: string;
+  icon?: string;
+  color: ColorKey;
+  cx: number;
+  cy: number;
+}
+
+export interface SceneRegion extends Rect {
+  id: string;
+  /** 名前を折り返した行 */
+  lines: string[];
+  note?: string;
+  icon?: string;
+  color: ColorKey;
+  /** 名前と印が占める所 */
+  header: Rect;
+}
+
+/** 線。`step` と `event` は原本の `steps[step].events[event]` を指す。 */
+export interface SceneEdge {
+  step: number;
+  event: number;
+  from: string;
+  to: string;
+  points: Point[];
+  color: ColorKey;
+  carry: Carry;
+  /** 着いた運ぶ物が留まる点。無ければ線の終わり */
+  settle?: Point;
+}
+
+export interface SceneLabel extends Rect {
+  step: number;
+  event: number;
+  text: string;
+  family: Family;
+  color: ColorKey;
+}
+
+/** 時系列図の箱の中の処理。生存線の上に札で出す。 */
+export interface SceneAction extends Rect {
+  step: number;
+  event: number;
+  box: string;
+  text: string;
+  color: ColorKey;
+}
+
+export interface SceneBadge {
+  step: number;
+  x: number;
+  y: number;
+  color: ColorKey;
+}
+
+export interface SceneLifeline {
+  id: string;
+  x: number;
+  y1: number;
+  y2: number;
+}
+
+export interface SceneField {
+  name: string;
+  x: number;
+  y: number;
+  w: number;
+}
+
+export interface SceneStrip extends Rect {
+  title: string;
+  fields: SceneField[];
+}
+
+export interface Layout {
+  kind: Diagram["kind"];
+  width: number;
+  height: number;
+  regions: SceneRegion[];
+  boxes: SceneBox[];
+  lifelines: SceneLifeline[];
+  edges: SceneEdge[];
+  labels: SceneLabel[];
+  actions: SceneAction[];
+  badges: SceneBadge[];
+  strip?: SceneStrip;
+}
+
+export type EdgeEvent = Extract<DiagramEvent, { type: "edge" }>;
+
+/** 段と線の位置を添えた線の並び。段の順、段の中は起きる順。 */
+export function edgesOf(diagram: Diagram): { step: number; event: number; edge: EdgeEvent }[] {
+  return diagram.steps.flatMap((step, s) =>
+    step.events.flatMap((event, e) => (event.type === "edge" ? [{ step: s, event: e, edge: event }] : [])),
+  );
+}
+
+/** 箱の色。書いていなければ区画の色、区画も無ければ並んだ順に分類の色を配る。 */
+export function boxColors(diagram: Diagram): Map<string, ColorKey> {
+  const regions = regionColors(diagram);
+  const colors = new Map<string, ColorKey>();
+  diagram.boxes.forEach((box, i) => {
+    const fromRegion = box.region === undefined ? undefined : regions.get(box.region);
+    colors.set(box.id, box.color ?? fromRegion ?? (COLOR_ORDER[i % COLOR_ORDER.length] as ColorKey));
+  });
+  return colors;
+}
+
+export function regionColors(diagram: Diagram): Map<string, ColorKey> {
+  const colors = new Map<string, ColorKey>();
+  (diagram.regions ?? []).forEach((region, i) => colors.set(region.id, region.color ?? (COLOR_ORDER[i % COLOR_ORDER.length] as ColorKey)));
+  return colors;
+}
+
+/** 線の色。硬貨を運ぶ線は硬貨の色、それ以外は送る側の箱の色。 */
+export const edgeColor = (edge: EdgeEvent, colors: Map<string, ColorKey>): ColorKey =>
+  edge.carry.kind === "coin" ? "coin" : (colors.get(edge.from) ?? "slate");
+
+/** 箱の幅。名前、下の小さな字、書き換わる字、中で出す処理のどれもが収まる幅。 */
+export function boxWidth(diagram: Diagram, id: string, withActions: boolean): number {
+  const box = diagram.boxes.find((b) => b.id === id);
+  if (!box) return LOOK.box.minW;
+  const lines = [textWidth(box.name, TYPE.boxName), textWidth(box.sub ?? "", TYPE.boxSub)];
+  for (const step of diagram.steps) {
+    for (const event of step.events) {
+      if (event.type === "swap" && event.box === id) lines.push(textWidth(event.text, TYPE.boxSubStrong));
+      if (withActions && event.type === "action" && event.box === id) lines.push(textWidth(event.label, TYPE.boxSubStrong));
+    }
+  }
+  return Math.max(LOOK.box.minW, Math.max(...lines) + LOOK.box.padX * 2);
+}
+
+/** 2 つの四角の隙間。重なる時は負。縦か横のどちらかで離れていれば、その離れ方の大きい方。 */
+export function gapBetween(a: Rect, b: Rect): number {
+  const dx = Math.max(b.x - (a.x + a.w), a.x - (b.x + b.w));
+  const dy = Math.max(b.y - (a.y + a.h), a.y - (b.y + b.h));
+  return Math.max(dx, dy);
+}
+
+/** 折れ線のうち一番長い区間。 */
+export function longest(points: Point[]): { a: Point; b: Point; vertical: boolean } {
+  let best = { a: points[0] as Point, b: (points[1] ?? points[0]) as Point, length: -1 };
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1] as Point;
+    const b = points[i] as Point;
+    const length = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (length > best.length) best = { a, b, length };
+  }
+  return { a: best.a, b: best.b, vertical: Math.abs(best.b[0] - best.a[0]) < Math.abs(best.b[1] - best.a[1]) };
+}
+
+/** 折れ線の長さと、始まりから `distance` 進んだ点。 */
+export function along(points: Point[], distance: number): Point {
+  let left = distance;
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1] as Point;
+    const b = points[i] as Point;
+    const length = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (left <= length && length > 0) return [a[0] + ((b[0] - a[0]) * left) / length, a[1] + ((b[1] - a[1]) * left) / length];
+    left -= length;
+  }
+  return points[points.length - 1] as Point;
+}
+
+export function pathLength(points: Point[]): number {
+  let sum = 0;
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1] as Point;
+    const b = points[i] as Point;
+    sum += Math.hypot(b[0] - a[0], b[1] - a[1]);
+  }
+  return sum;
+}
+
+/** 段の番号を置く点。線の始まりから少し進んだ所。短い線は始まりに置くと箱と重なるので中ほど。 */
+export function badgeOnPath(points: Point[]): Point {
+  const length = pathLength(points);
+  return along(points, length < LOOK.badge.short ? length / 2 : LOOK.badge.along);
+}
+
+export interface LabelRequest {
+  step: number;
+  event: number;
+  text: string;
+  points: Point[];
+  side?: LabelSide;
+  color: ColorKey;
+}
+
+export interface Obstacles {
+  /** 10px 以上離す物 (箱) */
+  hard: Rect[];
+  /** 重ならなければよい物 (区画の名前、同じ段の線の名前) */
+  soft: Rect[];
+}
+
+export const labelStyle = (text: string) => (hasWide(text) ? TYPE.labelJa : TYPE.label);
+
+/**
+ * 線の名前を置く。線の一番長い区間の中ほどから、寄せの指示の側 (無ければ横の線は上、縦の線は右) へ
+ * 離して置く。箱や区画の名前に掛かる時は、指示の側へさらに離し、線に沿ってもずらして空きを探す。
+ */
+export function placeLabel(request: LabelRequest, obstacles: Obstacles): SceneLabel {
+  const w = textWidth(request.text, labelStyle(request.text)) + LOOK.label.padX * 2;
+  const h = LOOK.label.h;
+  const segment = longest(request.points);
+  const mx = (segment.a[0] + segment.b[0]) / 2;
+  const my = (segment.a[1] + segment.b[1]) / 2;
+  const side = request.side ?? (segment.vertical ? "right" : "above");
+  const { offset, side: sideGap } = LOOK.label;
+  const base: Rect =
+    side === "above"
+      ? { x: mx - w / 2, y: my - offset - h / 2, w, h }
+      : side === "below"
+        ? { x: mx - w / 2, y: my + offset - h / 2, w, h }
+        : side === "left"
+          ? { x: mx - sideGap - w, y: my - h / 2, w, h }
+          : { x: mx + sideGap, y: my - h / 2, w, h };
+  // 離す向き (指示の側) と、ずらす向き (それに直交する向き)
+  const away: Point = side === "above" ? [0, -1] : side === "below" ? [0, 1] : side === "left" ? [-1, 0] : [1, 0];
+  const slideAxis: Point = [Math.abs(away[1]), Math.abs(away[0])];
+  const slideMax = side === "above" || side === "below" ? w : h * 4;
+  const clear = (rect: Rect): boolean =>
+    obstacles.hard.every((box) => gapBetween(rect, box) >= LOOK.gap) && obstacles.soft.every((other) => gapBetween(rect, other) >= LOOK.label.soft);
+  const { search, searchMax } = LOOK.label;
+  for (let d = 0; d <= searchMax; d += search) {
+    for (let s = 0; s <= slideMax; s += search) {
+      for (const sign of s === 0 ? [1] : [1, -1]) {
+        const rect = { x: base.x + away[0] * d + slideAxis[0] * s * sign, y: base.y + away[1] * d + slideAxis[1] * s * sign, w, h };
+        if (clear(rect)) return { ...rect, step: request.step, event: request.event, text: request.text, family: labelStyle(request.text).family, color: request.color };
+      }
+    }
+  }
+  return { ...base, step: request.step, event: request.event, text: request.text, family: labelStyle(request.text).family, color: request.color };
+}
+
+/** 中身の帯の欄の幅。欄の名前と、入る値と札を並べた最も長い形が収まる幅。 */
+function fieldWidth(diagram: Diagram, name: string): number {
+  let value = 0;
+  let tag = 0;
+  for (const step of diagram.steps) {
+    for (const event of step.events) {
+      if (event.type !== "strip" || event.field !== name) continue;
+      if (event.value !== undefined) value = Math.max(value, textWidth(event.value, hasWide(event.value) ? TYPE.fieldValueJa : TYPE.fieldValue));
+      if (event.tag !== undefined) tag = Math.max(tag, textWidth(event.tag, TYPE.tag) + LOOK.strip.tagPadX * 2);
+    }
+  }
+  const both = value + (tag > 0 ? (value > 0 ? LOOK.strip.tagGap : 0) + tag : 0);
+  return Math.max(textWidth(name, TYPE.fieldName), both);
+}
+
+/** 1 行に並べた時に帯が要る幅。 */
+export function stripNeed(diagram: Diagram): number {
+  if (!diagram.strip) return 0;
+  const { titleX, fieldGap, pad } = LOOK.strip;
+  const start = titleX + textWidth(diagram.strip.title, TYPE.stripTitle) + fieldGap;
+  return start + diagram.strip.fields.reduce((sum, name) => sum + fieldWidth(diagram, name) + fieldGap, 0) - fieldGap + pad;
+}
+
+/** 中身の帯。欄は左から並べ、幅に収まらない欄は次の行へ送る。 */
+export function layoutStrip(diagram: Diagram, x: number, y: number, width: number): SceneStrip | undefined {
+  if (!diagram.strip) return undefined;
+  const { titleX, fieldGap, pad, line, h } = LOOK.strip;
+  const start = titleX + textWidth(diagram.strip.title, TYPE.stripTitle) + fieldGap;
+  const fields: SceneField[] = [];
+  let cx = start;
+  let row = 0;
+  for (const name of diagram.strip.fields) {
+    const w = fieldWidth(diagram, name);
+    if (cx > start && cx + w > width - pad) {
+      cx = start;
+      row++;
+    }
+    fields.push({ name, x: x + cx, y: y + row * line, w });
+    cx += w + fieldGap;
+  }
+  return { x, y, w: width, h: h + row * line, title: diagram.strip.title, fields };
+}
+
+/** 場面の全ての物を (dx, dy) だけ動かす。区画と帯は動かさず、横いっぱいの形を保つ。 */
+export function shiftContent(layout: Layout, dx: number, dy: number): void {
+  const move = (rect: Rect): void => {
+    rect.x += dx;
+    rect.y += dy;
+  };
+  for (const box of layout.boxes) {
+    move(box);
+    box.cx += dx;
+    box.cy += dy;
+  }
+  for (const region of layout.regions) {
+    region.y += dy;
+    move(region.header);
+  }
+  for (const line of layout.lifelines) {
+    line.x += dx;
+    line.y1 += dy;
+    line.y2 += dy;
+  }
+  for (const edge of layout.edges) {
+    edge.points = edge.points.map(([px, py]) => [px + dx, py + dy]);
+    if (edge.settle) edge.settle = [edge.settle[0] + dx, edge.settle[1] + dy];
+  }
+  for (const label of layout.labels) move(label);
+  for (const action of layout.actions) move(action);
+  for (const badge of layout.badges) {
+    badge.x += dx;
+    badge.y += dy;
+  }
+  if (layout.strip) {
+    layout.strip.y += dy;
+    for (const field of layout.strip.fields) {
+      field.x += dx;
+      field.y += dy;
+    }
+  }
+}
+
+/** 線も処理も無い段の番号。書き換わる箱の左上か、中身の帯の左上か、最初の箱の左上。 */
+export function cornerBadge(events: DiagramEvent[], step: number, layout: Layout): SceneBadge {
+  const { inset } = LOOK.badge;
+  for (const event of events) {
+    const id = event.type === "swap" || event.type === "action" ? event.box : undefined;
+    const box = layout.boxes.find((b) => b.id === id);
+    if (box) return { step, x: box.x + inset, y: box.y + inset, color: box.color };
+  }
+  if (layout.strip && events.some((event) => event.type === "strip")) return { step, x: layout.strip.x + inset, y: layout.strip.y + inset, color: "slate" };
+  const box = layout.boxes[0] as SceneBox;
+  return { step, x: box.x + inset, y: box.y + inset, color: box.color };
+}

package/src/layout/sequence.ts

@@ -0,0 +1,189 @@
+/**
+ * 時系列図の置き場所。
+ *
+ * 生存線の頭の箱を上に横 1 列に並べ、段で起きる線と処理を起きる順に 1 行ずつ下へ積む。
+ * 生存線の間は、箱の幅と、その間を走る線の名前が収まる幅を取る。中身の帯は一番下に置く。
+ */
+import { LOOK, TYPE } from "../look/values";
+import type { Diagram } from "../schema";
+import { textWidth } from "./measure";
+import {
+  badgeOnPath,
+  boxColors,
+  cornerBadge,
+  boxWidth,
+  edgeColor,
+  labelStyle,
+  type Layout,
+  layoutStrip,
+  type Point,
+  placeLabel,
+  type SceneAction,
+  type SceneBadge,
+  type SceneBox,
+  type SceneEdge,
+  type SceneLabel,
+  shiftContent,
+  stripNeed,
+} from "./scene";
+
+export function layoutSequence(diagram: Diagram): Layout {
+  const { box: B, sequence: Q, label: L, margin, gap } = LOOK;
+  const colors = boxColors(diagram);
+  const listed = diagram.sequence?.lifelines ?? [];
+  const order = [...listed, ...diagram.boxes.map((b) => b.id).filter((id) => !listed.includes(id))];
+  const column = new Map(order.map((id, i) => [id, i]));
+  const widths = order.map((id) => boxWidth(diagram, id, false));
+
+  // 生存線の間。隣の箱どうしの隙間を取り、名前のある線が走る間は名前が収まるまで広げる
+  const spacing = widths.slice(1).map((w, i) => (widths[i] as number) / 2 + w / 2 + Q.columnGap);
+  const needs: { from: number; to: number; need: number }[] = [];
+  for (const step of diagram.steps) {
+    for (const event of step.events) {
+      if (event.type !== "edge" || event.label === undefined) continue;
+      const a = column.get(event.from) ?? 0;
+      const b = column.get(event.to) ?? 0;
+      const w = textWidth(event.label, labelStyle(event.label)) + L.padX * 2;
+      if (a === b) {
+        // 自分へ戻る線は名前を右に置くので、右の生存線までに輪と名前が収まる幅を取る
+        if (a < spacing.length) needs.push({ from: a, to: a + 1, need: Q.selfW + L.side + w + Q.labelRoom });
+      } else {
+        needs.push({ from: Math.min(a, b), to: Math.max(a, b), need: w + Q.labelRoom * 2 });
+      }
+    }
+  }
+  needs.sort((x, y) => x.to - x.from - (y.to - y.from));
+  for (const { from, to, need } of needs) {
+    let have = 0;
+    for (let i = from; i < to; i++) have += spacing[i] ?? 0;
+    if (have >= need) continue;
+    const add = (need - have) / (to - from);
+    for (let i = from; i < to; i++) spacing[i] = (spacing[i] ?? 0) + add;
+  }
+  const xs: number[] = [];
+  order.forEach((_, i) => xs.push(i === 0 ? margin + (widths[0] as number) / 2 : (xs[i - 1] as number) + (spacing[i - 1] as number)));
+
+  const boxes: SceneBox[] = order.map((id, i) => {
+    const source = diagram.boxes.find((b) => b.id === id);
+    const w = widths[i] as number;
+    const cx = xs[i] as number;
+    return {
+      id,
+      name: source?.name ?? id,
+      ...(source?.sub !== undefined ? { sub: source.sub } : {}),
+      ...(source?.icon !== undefined ? { icon: source.icon } : {}),
+      color: colors.get(id) ?? "slate",
+      x: cx - w / 2,
+      y: margin,
+      w,
+      h: B.h,
+      cx,
+      cy: margin + B.h / 2,
+    };
+  });
+  const headBottom = margin + B.h;
+
+  // 行を積む。線は上か下に名前を、処理は札を持つので、行ごとに上下に要る高さが違う
+  const edges: SceneEdge[] = [];
+  const actions: SceneAction[] = [];
+  const requests: Parameters<typeof placeLabel>[0][] = [];
+  let y = headBottom + Q.firstRow;
+  let below = 0;
+  let first = true;
+  diagram.steps.forEach((step, s) => {
+    step.events.forEach((event, e) => {
+      if (event.type !== "edge" && event.type !== "action") return;
+      let above: number;
+      let under: number;
+      if (event.type === "edge") {
+        const side = event.labelSide ?? "above";
+        const self = event.from === event.to;
+        const named = event.label !== undefined;
+        above = named && side === "above" ? L.offset + L.h / 2 : gap;
+        under = self ? Q.selfH + gap : named && side === "below" ? L.offset + L.h / 2 : gap;
+      } else {
+        above = LOOK.action.h / 2;
+        under = LOOK.action.h / 2;
+      }
+      y = first ? y + above : y + Math.max(Q.minPitch, below + Q.rowGap + above) + (e === 0 && s > 0 ? Q.stepGap : 0);
+      first = false;
+      below = under;
+
+      if (event.type === "edge") {
+        const xf = xs[column.get(event.from) ?? 0] as number;
+        const xt = xs[column.get(event.to) ?? 0] as number;
+        const dir = Math.sign(xt - xf) || 1;
+        const points: Point[] =
+          xf === xt
+            ? [
+                [xf, y],
+                [xf + Q.selfW, y],
+                [xf + Q.selfW, y + Q.selfH],
+                [xf + LOOK.edge.inset, y + Q.selfH],
+              ]
+            : [
+                [xf, y],
+                [xt - dir * LOOK.edge.inset, y],
+              ];
+        const color = edgeColor(event, colors);
+        edges.push({ step: s, event: e, from: event.from, to: event.to, points, color, carry: event.carry });
+        if (event.label !== undefined) {
+          requests.push({
+            step: s,
+            event: e,
+            text: event.label,
+            points,
+            color,
+            ...(event.labelSide ? { side: event.labelSide } : xf === xt ? { side: "right" as const } : {}),
+          });
+        }
+      } else {
+        // 札は生存線の上の番号の丸を隠さないよう、丸の右に出す (#3017)
+        const x = xs[column.get(event.box) ?? 0] as number;
+        const w = textWidth(event.label, TYPE.action) + LOOK.action.padX * 2;
+        actions.push({ step: s, event: e, box: event.box, text: event.label, color: colors.get(event.box) ?? "slate", x: x + LOOK.badge.r + 4, y: y - LOOK.action.h / 2, w, h: LOOK.action.h });
+      }
+    });
+  });
+  const bottom = (first ? headBottom : y + below) + Q.tail;
+  const lifelines = order.map((id, i) => ({ id, x: xs[i] as number, y1: headBottom, y2: bottom }));
+
+  const labels: SceneLabel[] = [];
+  for (const request of requests) {
+    const soft = [...labels.filter((l) => l.step === request.step), ...actions];
+    labels.push(placeLabel(request, { hard: boxes, soft }));
+  }
+
+  const layout: Layout = { kind: "sequence", width: 0, height: 0, regions: [], boxes, lifelines, edges, labels, actions, badges: [] };
+
+  // 図の幅。名前が左に出たら全体を右へ寄せ、右端は一番右の物に余白を足した所
+  const lefts = [...boxes.map((b) => b.x), ...labels.map((l) => l.x), ...actions.map((a) => a.x)];
+  const shift = Math.max(0, margin - Math.min(...lefts));
+  if (shift > 0) shiftContent(layout, shift, 0);
+  const rights = [...boxes.map((b) => b.x + b.w), ...labels.map((l) => l.x + l.w), ...actions.map((a) => a.x + a.w), ...edges.flatMap((edge) => edge.points.map((p) => p[0]))];
+  const width = Math.max(Math.max(...rights) + margin, stripNeed(diagram) + margin * 2);
+  const strip = layoutStrip(diagram, margin, bottom + gap, width - margin * 2);
+  layout.width = width;
+  layout.height = (strip ? strip.y + strip.h : bottom) + margin;
+  if (strip) layout.strip = strip;
+  layout.badges = badges(diagram, layout);
+  return layout;
+}
+
+/**
+ * 段の番号。その段の最初の線の始まりに置き、線が無ければ処理する箱の生存線の上、無ければ書き換わる箱の角。
+ * 処理の札はその段の終わりに消えるので、札に付けると止め絵で丸だけが浮く (#3017)。
+ */
+function badges(diagram: Diagram, layout: Layout): SceneBadge[] {
+  return diagram.steps.map((step, s) => {
+    const edge = layout.edges.find((e) => e.step === s);
+    if (edge) {
+      const [x, y] = badgeOnPath(edge.points);
+      return { step: s, x, y, color: edge.color };
+    }
+    const action = layout.actions.find((a) => a.step === s);
+    const lifeline = action && layout.lifelines.find((l) => l.id === action.box);
+    if (action && lifeline) return { step: s, x: lifeline.x, y: action.y + action.h / 2, color: action.color };
+    return cornerBadge(step.events, s, layout);
+  });
+}

package/src/load-fonts.ts

@@ -0,0 +1,8 @@
+/**
+ * 頁に同梱の字を読み込む入口 (`@cardenelabs/dragon/fonts`)。頁で 1 度だけ import する。
+ *
+ * 字の CSS (`@font-face`) を読み込むだけで、何も出さない。束ねる道具 (Vite など) が CSS と字の file を頁へ運ぶ。
+ * 描く入口 (`@cardenelabs/dragon`) から分けているのは、node で原本を検査する時に CSS を読ませないため。
+ */
+import "@fontsource-variable/noto-sans-jp";
+import "@fontsource-variable/jetbrains-mono";

package/src/look/fonts.ts

@@ -0,0 +1,33 @@
+/**
+ * 図が使う 2 つの字。どちらも package の依存として同梱する。
+ *
+ * 描いた SVG は字をこの 2 つの名前でしか名指さない。端末の字の名前を持たないので、
+ * 同梱した字が読み込まれていない時に、端末の字へ黙って落ちて幅が変わることが無い。
+ * 頁に字を読み込むのは `@cardenelabs/dragon/fonts` の入口 (`load-fonts.ts`) が持つ。
+ */
+export const FONTS = { sans: "Noto Sans JP Variable", mono: "JetBrains Mono Variable" } as const;
+
+/**
+ * 和文の字の英数字と記号の幅 (1000 分率)。使う太さ (500 / 600 / 650 / 700) のうち一番広い値。
+ * `scripts/font-widths.mjs` が同梱の字をブラウザに読ませて測った値で、字を上げた時は測り直して貼る。
+ * 表に無い字のうち U+2E80 以降 (仮名と漢字と全角の記号) は全角 (1000) とする。
+ */
+export const SANS_ADVANCE: Readonly<Record<string, number>> = {"0":590,"1":590,"2":590,"3":590,"4":590,"5":590,"6":590,"7":590,"8":590,"9":590," ":228,"!":371,"\"":575,"#":590,"$":590,"%":963,"&":740,"'":325,"(":378,")":378,"*":507,"+":590,",":325,"-":371,".":325,"/":390,":":325,";":325,"<":590,"=":590,">":590,"?":514,"@":1007,"A":642,"B":682,"C":657,"D":715,"E":616,"F":586,"G":718,"H":758,"I":330,"J":568,"K":686,"L":579,"M":854,"N":750,"O":771,"P":668,"Q":771,"R":682,"S":624,"T":626,"U":748,"V":619,"W":915,"X":627,"Y":581,"Z":614,"[":378,"\\":390,"]":378,"^":590,"_":568,"`":626,"a":591,"b":644,"c":528,"d":645,"e":581,"f":372,"g":598,"h":640,"i":305,"j":306,"k":605,"l":315,"m":964,"n":641,"o":626,"p":645,"q":645,"r":437,"s":495,"t":421,"u":638,"v":576,"w":863,"x":562,"y":575,"z":512,"{":378,"|":297,"}":378,"~":590,"…":1000,"−":590,"×":1000,"→":1000,"←":1000,"↑":1000,"↓":1000,"–":545,"—":908,"‘":325,"’":325,"“":575,"”":575,"°":404,"±":1000,"·":593,"•":379};
+
+/** 等幅の字の幅 (1000 分率)。どの字も同じ幅。 */
+export const MONO_ADVANCE = 600;
+
+/** 全角として数える字の始まり。仮名と漢字と全角の記号はここから後ろにある。 */
+export const WIDE_FROM = 0x2e80;
+
+export type Family = keyof typeof FONTS;
+
+/** 字の大きさを 1000 とした時の幅。上の表はこの単位で持つ。 */
+export const EM = 1000;
+
+/** 1 字の幅 (1000 分率)。表に無い字は全角とする。 */
+export function advance(ch: string, family: Family): number {
+  if ((ch.codePointAt(0) ?? 0) >= WIDE_FROM) return EM;
+  if (family === "mono") return MONO_ADVANCE;
+  return SANS_ADVANCE[ch] ?? EM;
+}