@cardenelabs/cdl 0.108.0 → 0.110.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.108.0",
+  "version": "0.110.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/kinds/shape-basement.tsx

@@ -12,9 +12,9 @@ import {
   shapeRegion,
   textWidth,
   切って収まる下限,
+  帯で切る,
   type ArtExtent,
 } from "./shape-region";
-import { 幅で切る } from "./box-lines";
 
 /**
  * Shape-driven basement 8 kinds (CAR-1099、 CAR-1130 people ベース統一版)。
@@ -90,8 +90,14 @@ function labelBlock(
     node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING) : 0,
     node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0,
   );
-  // 横で縮める倍率を読める下限で止める (#953)。 切って収まらない幅では下限を当てない
-  const 下限 = 切って収まる下限(node.title ?? "", size, 0, band.w, textWidth);
+  // 横で縮める倍率を読める下限で止める (#953)。 切って収まらない幅では下限を当てない。
+  //
+  // **題が一番広い行のときだけ当てる** (#957)。 塊の倍率は一番広い行で決まるので、
+  // 補いの行が幅を決めている箱で下限を当てると、題を 0.6px 上げるために補いの行から
+  // 字を落とすことになる = 払うのと得るのが別の行になる
+  const 題幅 = textWidth(node.title ?? "", size);
+  const 下限 =
+    題幅 >= 幅 ? 切って収まる下限(node.title ?? "", size, 0, band.w, textWidth) : 0;
   const { k, x, y: baseline } = fitLabel(band, { 上, 下, 幅 }, pos, 下限);
   return { k, x, baseline, 上端: baseline - 上 * k, 下端: baseline + 下 * k };
 }
@@ -102,7 +108,7 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
   const x = 塊.x;
   // 下限で止めた行は帯に入らないので、入るところまで切って `…` を付ける (#953)
   const 切る = (t: string, 大きさ: number, 字間 = 0) =>
-    幅で切る(t, 大きさ * k, band.w, (u, f) => textWidth(u, f, 字間 * k));
+    帯で切る(t, 大きさ * k, band.w, (u, f) => textWidth(u, f, 字間 * k));
   return (
     <>
       {node.eyebrow && (
@@ -564,12 +570,15 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
     node.eyebrow && plan.肩書 ? textWidth(node.eyebrow, plan.肩書.size, EYEBROW_TRACKING) : 0,
     node.subtitle && plan.説明 ? textWidth(node.subtitle, plan.説明.size) : 0,
   );
-  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる
-  const 下限 = 切って収まる下限(node.title ?? "", plan.名前.size, 0, 幅上限, textWidth);
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
+  // 題が一番広い行のときだけ当てる (#957、 上の `labelBlock` と同じ理由)
+  const 題幅 = textWidth(node.title ?? "", plan.名前.size);
+  const 下限 =
+    題幅 >= 幅 ? 切って収まる下限(node.title ?? "", plan.名前.size, 0, 幅上限, textWidth) : 0;
   const k = 幅 > 0 && 幅上限 > 0 ? Math.min(1, Math.max(幅上限 / 幅, 下限)) : 1;
   // 下限で止めた行は箱に入らないので、入るところまで切って `…` を付ける (#953)
   const 切る = (t: string, 大きさ: number, 字間 = 0) =>
-    幅で切る(t, 大きさ * k, 幅上限, (u, f) => textWidth(u, f, 字間 * k));
+    帯で切る(t, 大きさ * k, 幅上限, (u, f) => textWidth(u, f, 字間 * k));
   return (
     <>
       {node.eyebrow && plan.肩書 && (

package/src/kinds/shape-blockchain.tsx

@@ -6,6 +6,7 @@ import {
   shapeRegion,
   幅の倍率,
   切って収まる下限,
+  帯で切る,
   打ち消しの倍率,
   絵の中の字の幅,
   type ArtExtent,
@@ -136,15 +137,18 @@ function blockchainNodeExtent(strokeWidth: number): ArtExtent {
  * 名前の塊を描く。 位置と大きさは `labelPlan` が決める (箱の下端から積み上げる、 #433)。
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
-  // 縮めは読める下限で止める (#953)。 止めた行は箱に入らないので、入るところまで切る
-  const 収める = (t: string, 大きさ: number, 字間: number) => {
+  // 縮めは読める下限で止める (#953)。 止めた行は箱に入らないので、入るところまで切る。
+  // 下限を当てるのは題の行だけ (#957) = 補いの行に当てると、収まっている行を大きくしてから
+  // 切ることになる
+  const 収める = (t: string, 大きさ: number, 字間: number, 題か = false) => {
     const 測る = (u: string, f: number, ls: number) => 字の幅(u, f) + ls * [...u].length;
-    const 倍率 = Math.max(幅の倍率(t, 大きさ, 字間, node.w), 切って収まる下限(t, 大きさ, 字間, node.w, 測る));
+    const 下限 = 題か ? 切って収まる下限(t, 大きさ, 字間, node.w, 測る) : 0;
+    const 倍率 = Math.max(幅の倍率(t, 大きさ, 字間, node.w), 下限);
     const size = 大きさ * 倍率;
-    return { 倍率, text: 幅で切る(t, size, node.w, (u, f) => 字の幅(u, f) + 字間 * 倍率 * [...u].length) };
+    return { 倍率, text: 帯で切る(t, size, node.w, (u, f) => 字の幅(u, f) + 字間 * 倍率 * [...u].length) };
   };
   const 肩 = node.eyebrow && plan.肩書 ? 収める(node.eyebrow, plan.肩書.size, 2) : { 倍率: 1, text: node.eyebrow ?? "" };
-  const 名 = 収める(node.title ?? "", plan.名前.size, 0);
+  const 名 = 収める(node.title ?? "", plan.名前.size, 0, true);
   const 説 = node.subtitle && plan.説明 ? 収める(node.subtitle, plan.説明.size, 0) : { 倍率: 1, text: node.subtitle ?? "" };
   const 肩書倍率 = 肩.倍率;
   const 名前倍率 = 名.倍率;

package/src/kinds/shape-commerce.tsx

@@ -7,8 +7,8 @@ import {
   打ち消しの倍率,
   type 打ち消す字,
   切って収まる下限,
+  帯で切る,
 } from "./shape-region";
-import { 幅で切る } from "./box-lines";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
@@ -101,17 +101,18 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  *
  * 字間も同じ割合で詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
  */
-function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number, 題か = false) {
   const 幅 = 字幅(文字列, 大きさ, 字間);
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
-  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
-  const 倍率 =
-    幅 > 0 && 箱幅 > 0
-      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅)))
-      : 1;
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)。
+  //
+  // **下限を当てるのは題の行だけ** (#957)。 補いの行に当てると、収まっている行を
+  // 大きくしてから切ることになる = 書いた字を落として得るのが 1px に満たない
+  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅) : 0;
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, Math.max(箱幅 / 幅, 下限)) : 1;
   const size = 大きさ * 倍率;
   const spacing = 字間 * 倍率;
-  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
+  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
 }
 
 /**
@@ -120,7 +121,7 @@ function 幅に収める(文字列: string, 大きさ: number, 字間: number,
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
   const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w);
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w, true);
   const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
   return (
     <>

package/src/kinds/shape-finance.tsx

@@ -6,8 +6,8 @@ import {
   打ち消しの倍率,
   type 打ち消す字,
   切って収まる下限,
+  帯で切る,
 } from "./shape-region";
-import { 幅で切る } from "./box-lines";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 
@@ -100,17 +100,18 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  *
  * 字間も同じ割合で詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
  */
-function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number, 題か = false) {
   const 幅 = 字幅(文字列, 大きさ, 字間);
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
-  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
-  const 倍率 =
-    幅 > 0 && 箱幅 > 0
-      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅)))
-      : 1;
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)。
+  //
+  // **下限を当てるのは題の行だけ** (#957)。 補いの行に当てると、収まっている行を
+  // 大きくしてから切ることになる = 書いた字を落として得るのが 1px に満たない
+  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅) : 0;
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, Math.max(箱幅 / 幅, 下限)) : 1;
   const size = 大きさ * 倍率;
   const spacing = 字間 * 倍率;
-  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
+  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
 }
 
 /**
@@ -119,7 +120,7 @@ function 幅に収める(文字列: string, 大きさ: number, 字間: number,
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
   const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w);
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w, true);
   const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
   return (
     <>

package/src/kinds/shape-hardware.tsx

@@ -1,6 +1,5 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt, textWidth, 切って収まる下限, type ArtExtent } from "./shape-region";
-import { 幅で切る } from "./box-lines";
+import { shapeRegion, labelPlan, fitArt, textWidth, 切って収まる下限, 帯で切る, type ArtExtent } from "./shape-region";
 import type { LaidNode } from "../types";
 
 /**
@@ -105,17 +104,18 @@ const LABEL_EYEBROW_SPACING = 2;
  * 字幅の見積りは共有の `textWidth` (実測を階級で丸め上げた表) が持つ。 字間も同じ割合で
  * 詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
  */
-function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number, 題か = false) {
   const 幅 = textWidth(文字列, 大きさ, 字間);
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
-  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
-  const 倍率 =
-    幅 > 0 && 箱幅 > 0
-      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, textWidth)))
-      : 1;
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)。
+  //
+  // **下限を当てるのは題の行だけ** (#957)。 補いの行に当てると、収まっている行を
+  // 大きくしてから切ることになる = 書いた字を落として得るのが 1px に満たない
+  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, textWidth) : 0;
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, Math.max(箱幅 / 幅, 下限)) : 1;
   const size = 大きさ * 倍率;
   const spacing = 字間 * 倍率;
-  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => textWidth(u, f, spacing)) };
+  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => textWidth(u, f, spacing)) };
 }
 
 /**
@@ -126,7 +126,7 @@ function 幅に収める(文字列: string, 大きさ: number, 字間: number,
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
   const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w);
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w, true);
   const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
   return (
     <>

package/src/kinds/shape-region.tsx

@@ -89,6 +89,31 @@ export function 読める下限の倍率(大きさ: number): number {
  * 測り方は呼ぶ側から渡す。 種別ごとに字幅の見積りが違い、ここで 1 つに決めると
  * 縮める時と切る時で別の幅を使うことになる。
  */
+/**
+ * 帯にちょうど収まる行を、丸め誤差で切らないための相対の余裕 (#957)。
+ *
+ * 塊の倍率は一番広い行が帯にちょうど収まる値なので、切る側の測り直しが浮動小数で
+ * 髪の毛 1 本ぶん上回ると、収まっている行を切る (実測 = `間隔を倍に広げる · 最大 3 回` が
+ * `... 最大 3 …` になった)。
+ *
+ * 相対で持つのは、帯の幅が 20 から 600 まで動くため。 絶対値で持つと狭い帯で効きすぎる。
+ */
+const 切る余裕 = 1e-9;
+
+/**
+ * 行を帯に収まるところまでで切り、切った時は `…` を付ける (#953)。
+ *
+ * ちょうど収まる行は切らない (§ 切る余裕)。
+ */
+export function 帯で切る(
+  text: string,
+  大きさ: number,
+  幅上限: number,
+  測る: (t: string, size: number) => number,
+): string {
+  return 幅で切る(text, 大きさ, 幅上限 * (1 + 切る余裕), 測る);
+}
+
 export function 切って収まる下限(
   題: string,
   大きさ: number,
@@ -98,7 +123,7 @@ export function 切って収まる下限(
 ): number {
   const 下限 = 読める下限の倍率(大きさ);
   if (!(下限 > 0) || !(幅上限 > 0)) return 0;
-  return 幅で切る(題, 大きさ * 下限, 幅上限, (u, f) => 測る(u, f, 字間 * 下限)) === "" ? 0 : 下限;
+  return 帯で切る(題, 大きさ * 下限, 幅上限, (u, f) => 測る(u, f, 字間 * 下限)) === "" ? 0 : 下限;
 }
 
 

package/src/render/header.tsx

@@ -10,6 +10,7 @@ export function CdlHeader({
   states,
   onJumpPhase,
   headingLevel = 3,
+  showTopic = true,
 }: {
   topic: string;
   phases: CdlPhase[];
@@ -21,12 +22,20 @@ export function CdlHeader({
   /** phase title 描画時の heading tag level (2 | 3 | 4)、 default 3 で従来動作維持。
    * downstream で h1 直後に配置する場合は 2、 h2 直後なら 3 (default)、 h3 直後なら 4。 */
   headingLevel?: 2 | 3 | 4;
+  /**
+   * 話題を左上に出すか (#955)。 図が同じ字を既に描いている時だけ呼出側が `false` を渡す。
+   *
+   * 段の印は `ml-auto` で右へ寄せてあるので、話題を落としても並びは動かない。
+   */
+  showTopic?: boolean;
 }): JSX.Element {
   const HeadingTag = (`h${headingLevel}` as "h2" | "h3" | "h4");
   return (
     <div className="border-b border-[var(--cdl-divider,#d4d4d8)]/35 px-7 py-6">
       <div className="mb-5 flex items-center gap-3">
-        <div className="text-[10px] font-bold uppercase tracking-[0.2em]" style={{ color: "var(--cdl-text-accent, #2d6a8f)" }}>{topic}</div>
+        {showTopic && (
+          <div className="text-[10px] font-bold uppercase tracking-[0.2em]" style={{ color: "var(--cdl-text-accent, #2d6a8f)" }}>{topic}</div>
+        )}
         <div className="ml-auto flex items-center gap-1.5">
           {phases.map((p, idx) => {
             const active = idx === phaseIdx;

package/src/render.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from "react";
 import type { JSX } from "react";
 import { useReducedMotion, useTimeline } from "./anim/react";
 import { compile } from "./compile";
+import { drawsFigureTitle } from "./layout/spec";
 import { CdlHeader } from "./render/header";
 import { CdlStage } from "./render/stage";
 import {
@@ -170,6 +171,21 @@ export function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hi
   // (出し分けと綴りで読む読み出しは値を綴りのまま読む)
   const 値の名前 = useMemo(() => 値の名前の表を作る(diagram.inputs), [diagram.inputs]);
 
+  /**
+   * 図が話題と同じ字を既に描いているか (#955)。
+   *
+   * 図表 15 種は 0.96.0 (#930) から自分の題を箱の上に描く。 頭の帯も話題を出すので、
+   * 話題と題が同じ図では同じ字が 2 か所に並ぶ。 描いている側を残し、帯の 1 行を落とす。
+   *
+   * 種別の一覧は `drawsFigureTitle` から導く。 手で持つと engine に図表が増えた日にずれる。
+   * 箱の題 (`node-label`) は数えない = 箱は図の中の 1 つにすぎず、話題を名乗る場所が他に無い。
+   */
+  const 図が話題を描く = useMemo(() => {
+    const 話題 = laid.topic.trim();
+    if (話題 === "") return false;
+    return laid.nodes.some((n) => drawsFigureTitle(n.kind) && (n.title ?? "").trim() === 話題);
+  }, [laid.nodes, laid.topic]);
+
   return (
     <div
       ref={isInteractive ? interactive.containerRef : undefined}
@@ -193,6 +209,7 @@ export function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hi
             timeline.play();
           }}
           headingLevel={headingLevel}
+          showTopic={!図が話題を描く}
         />
       )}
       {/* interactive panel = input widget / formula readout / scroll readout (SVG の上に配置)、