@cardenelabs/cdl 0.108.0 → 0.109.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.108.0",
+  "version": "0.109.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/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 の上に配置)、