@cardenelabs/cdl 0.15.0 → 0.17.0

package/dist/{render-BS1E6Mlo.d.cts → render-Dc5Pdf7e.d.cts}

@@ -29,11 +29,72 @@ interface Computed<T> {
 }
 declare function computed<T>(fn: () => T): Computed<T>;
 
+/**
+ * 段が進むと濃さが移るための、状態の名前 (#578)。
+ *
+ * **記号を落とす**。 `{名前}` の中で読めるのは `\w` だけ (`template-name.ts`) で、`-` を
+ * 含む名前は 1 度も置換されない = 濃さが動かないまま緑になる (実測)。
+ *
+ * 見本の側 (`withSteps` の `sets`) と描く側 (`sequenceStep`) が同じ名前を引く必要があるので、
+ * 導き方をここに置いて両方から呼ぶ。
+ *
+ * **図の id からは導かない**。 記法は id を書けず名前から導く規則を持つため、同じ図を
+ * 記法から書くと状態の名前だけがずれる (実測)。 図の中に順序図の箱は 1 つしか無く、状態は
+ * 図ごとに閉じているので、決め打ちで足りる。
+ */
+declare function sequenceStepId(): string;
+type SequenceBoardActor = {
+    name: string;
+    subtitle?: string;
+};
+type SequenceBoardMessageKind = "call" | "return" | "fire";
+type SequenceBoardMessage = {
+    label: string;
+    /** 出どころの面の番号 */
+    from: number;
+    /** 着き先の面の番号。 `from` と同じなら自分宛て */
+    to: number;
+    kind: SequenceBoardMessageKind;
+};
+/** 動いている間の帯。 段の番号で持つ (途中で手が空く面があるので区間の並び) */
+type SequenceBoardBand = {
+    actor: number;
+    from: number;
+    to: number;
+};
+type SequenceBoardData = {
+    actors: readonly SequenceBoardActor[];
+    messages: readonly SequenceBoardMessage[];
+    bands: readonly SequenceBoardBand[];
+};
+type SequenceBoardMetrics = {
+    w: number;
+    h: number;
+    /** 語を置く左の桁の幅 = 最初の糸の x */
+    gutter: number;
+    colW: number;
+    /** 横罫の y */
+    headY: number;
+    /** 面 i の糸の x */
+    cx: (i: number) => number;
+    /** 段 i の y */
+    rowY: (i: number) => number;
+    /** 糸の下端 */
+    bottom: number;
+};
+/**
+ * 中身から寸法を出す。
+ *
+ * 幅は **語の桁 + 列 × 面の数**。 語を線の脇ではなく左の桁に置くので、線の長さが語の長さに
+ * 引きずられない = 面の数だけで横幅が決まる。
+ */
+declare function sequenceBoardMetrics(data: SequenceBoardData): SequenceBoardMetrics;
+
 /** 意味付きの色の名前。 検査・描画・test はこの 1 つの列を出所にする。 */
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 1 つの列を出所にする。 */
-declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-bar", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service", "mark-start", "mark-end"];
+declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-bar", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service", "mark-start", "mark-end", "sequence-board"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -41,25 +102,97 @@ type Side = "top" | "right" | "bottom" | "left";
  * - "solid" (default) ... 実線 + 矢頭、 inactive は dashed grey
  * - "dotted-flow" ... 点線 + active phase で粒子が path 沿いに流れる。
  *   path が経由 node を貫通する場合は自動で粒子が node 中心を貫通する動きに切替。
+ * - "dashed" ... 刻んだ線。 **光っていても刻みのまま**。
+ *
+ * `"dashed"` が要るのは、`"solid"` の刻みが「光っていない」 を表す合図に使われているため。
+ * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「満たす」 と「使う」、
+ * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
+ */
+type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/**
+ * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
+ *
+ * 利用側 (dragon の記法) は受理する語を手で並べており、種類を足した時に取り残されていた
+ * (実測 = `dashed` を足した後、記法に書くと「線種が読めません」 で落ちた)。 一覧をここから
+ * 導けば、足した時点で書けるようになる。
  */
-type EdgeStyle = "solid" | "dotted-flow";
+declare const EDGE_STYLES: readonly EdgeStyle[];
 /**
  * 関係の **端の形** (#560)。 線の種類 (`EdgeStyle`) とは別の軸で、線の先端に何を置くかを決める。
  *
+ * - `"none"` ... 何も描かない。 **端の 1 つに印を置かない関係** に使う (#578)
  * - `"triangle"` ... 塗った三角。 **既定**。 書かなければこれになる
  * - `"diamond"` ... 塗った菱。 「持っている」 側を指す
  * - `"open"` ... 閉じない 2 本の腕。 向きだけを示し、待たない
  * - `"crow"` ... 三又。 「多」 を示す (ER の鳥の足)
  *
+ * ER の端は **2 つの記号が重なってできている** (#578)。 箱に近い側が個数 (棒 = 1 /
+ * 三又 = 多)、その外側が任意か (棒 = 必須 / 丸 = 任意)。 2 × 2 の 4 通りを 1 つの形として持つ。
+ *
+ * - `"one"` ... 棒が 2 本。 ちょうど 1 つ
+ * - `"zero-one"` ... 棒に丸。 1 つ、または無い
+ * - `"many"` ... 三又に棒。 少なくとも 1 つ
+ * - `"zero-many"` ... 三又に丸。 いくつでも、無くてもよい
+ *
+ * 4 通りを 2 つの欄に分けないのは、**端の印は 1 つの記号として読まれる**ため。 欄を分けると
+ * 片方だけ書いた形 (個数はあるが任意かが無い) を許すことになり、描けない組み合わせが増える。
+ *
  * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
  * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
  * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
  */
-type EdgeHead = "triangle" | "diamond" | "open" | "crow";
+type EdgeHead = "none" | "triangle" | "diamond" | "open" | "crow" | "one" | "zero-one" | "many" | "zero-many";
 /** 書かなかった時の端の形。 既存の図はすべてこれで描かれている */
 declare const EDGE_HEAD_DEFAULT: EdgeHead;
 /** 端の形の全種。 marker の定義と検査の走査がこの並びを引く (書き写すとずれる) */
 declare const EDGE_HEADS: readonly EdgeHead[];
+/**
+ * 端の印の **塗り方** (#578)。 形 (`EdgeHead`) とは別の軸。
+ *
+ * - `"solid"` ... 墨で塗る。 **既定**。 書かなければ形ごとの既定 (`EDGE_HEAD_SHAPE.filled`) に従う
+ * - `"hollow"` ... 紙の色で塗り、輪郭だけを線で描く
+ *
+ * UML は同じ形を塗りで分ける = 白抜きの菱が「持つ」、塗った菱が「抱える」 (命が同じ)。
+ * 形を増やして表そうとすると、塗りの軸を持つ全ての形について語が倍になる。
+ *
+ * 塗らない形 (`"open"` / `"crow"`) には効かない。 元から輪郭しか無いため。
+ */
+type EdgeHeadFill = "solid" | "hollow";
+/** 書かなかった時の塗り方 */
+declare const EDGE_HEAD_FILL_DEFAULT: EdgeHeadFill;
+/** 塗り方の全種。 marker の定義と検査の走査がこの並びを引く */
+declare const EDGE_HEAD_FILLS: readonly EdgeHeadFill[];
+/**
+ * 行き先と出どころの **両端に印を置ける** (#578)。
+ *
+ * `head` が行き先、`tailHead` が出どころ。 どちらも `"none"` を書けばその端には何も描かない。
+ *
+ * 側が種類で割れるのが要点。 三角は「この先が親」 を指すので行き先に立ち、菱は
+ * 「この箱が持っている」 を指すので出どころに立つ。 ER は端ごとに違う個数を示すので両端に要る。
+ * 1 つの欄で「どちら側か」 を持つ形にすると、両端に置く関係が書けない。
+ */
+/**
+ * 行頭の印 (#578)。 **形 × 塗り の 2 軸**で 4 通りを分ける。
+ *
+ * 軸の意味は図の種類が決める = クラス図は 持ち物/振る舞い × 公開/非公開、
+ * ER 図は 値/外部キー × 必須/任意、状態遷移図は 状態の中/出入り × 続く/瞬間。
+ * 描画側が持つのは形だけで、意味は持たない。
+ *
+ * 印を持つ行は **区切り線を引かない**。 印が群を分けるので、線と印で二重に分けることになる。
+ */
+type RowMark = {
+    /** 四角 (`"square"`) か山形 (`"chevron"`) か */
+    shape: "square" | "chevron";
+    /** 塗るか。 塗らない印は輪郭だけを描く */
+    filled: boolean;
+    /**
+     * 名前に下線を引くか (#578)。 ER の主キーに使う。
+     *
+     * **印の 2 軸とは別の段**に置く。 3 つ目の軸を印に足すと 4 通りが 8 通りになって
+     * 見分けが付かなくなるので、下線を重ねる形にした = 外部キーの山形と重ねられる。
+     */
+    underline?: boolean;
+};
 type CdlLane = {
     id: string;
     /** lane の x 座標 (optional、 未指定なら engine が前 lane 右端 + gap で auto 計算) */
@@ -143,6 +276,29 @@ type CdlNode = {
     value?: string;
     /** kind=storage 時の行 (各 mono、 state 参照可) */
     rows?: string[];
+    /**
+     * 行頭の印 (#578)。 `rows` と同じ並びで、`null` の位置には印を描かない。
+     *
+     * **印を持つ行は書き方そのものが変わる**。 区切り線 2 本を引かず、名前を印の右に置き、
+     * 型を箱の右端へ薄く右揃えで置く。 線で分けるのをやめて印で分ける形なので、両方は要らない。
+     *
+     * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
+     */
+    rowMarks?: readonly (RowMark | null)[];
+    /**
+     * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
+     *
+     * 面々と言づてと帯を 1 つの箱に持たせ、内側の配置は種別が決める。 図表の種別
+     * (`gantt-timeline` 等) と同じ持ち方。
+     */
+    sequenceData?: SequenceBoardData;
+    /**
+     * いま何番目の言づてを見ているか (#578)。 `"{seq}"` のように状態から取る。
+     *
+     * 書かない図では全部を濃く出す = 段を持たない使い方 (縮小見本 / 静止画) で薄い絵にすると、
+     * 読み手には壊れて見える。
+     */
+    sequenceStep?: string;
     /** width override (default は NodeKind 別 NODE_SIZE)、 catalog thumbnail 用に縮小可 */
     w?: number;
     /** height override */
@@ -412,6 +568,21 @@ type CdlEdge = {
     style?: EdgeStyle;
     /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
     head?: EdgeHead;
+    /**
+     * 端の印の塗り方 (#578)。 書かなければ形ごとの既定。 塗らない形には効かない。
+     *
+     * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 持つ /
+     * 塗った菱 = 抱える)。
+     */
+    headFill?: EdgeHeadFill;
+    /**
+     * **出どころ側**の端の印 (#578)。 書かなければ何も描かない。
+     *
+     * 行き先側は `head`。 両方に置けるので、ER のように端ごとに違う個数を示す関係が書ける。
+     */
+    tailHead?: EdgeHead;
+    /** 出どころ側の印の塗り (#578)。 書かなければ形ごとの既定 */
+    tailHeadFill?: EdgeHeadFill;
     /**
      * FSM transition の guard 条件 (例 "if validated")。
      * stateMachine preset では sub に併合される、 text-dsl v0.5 では guard 単独で渡せる。
@@ -2615,4 +2786,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeEventBindingKey as A, type BBox as B, type CdlDiagram as C, computeFormulaKey as D, type EdgeStyle as E, computeInputSignalKey as F, computeScrollTriggerKey as G, computed as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, createInteractiveSignalsAccessor as K, type LaidDiagram as L, createScrollProgressHandle as M, type NodeKind as N, createScrollProgressSignals as O, hasInteractivePrimitives as P, type QuadrantKey as Q, signal as R, type Signal as S, type Tone as T, type CdlInput as a, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeHead as e, type CdlState as f, type CdlEventTarget as g, type Computed as h, type CdlDerivedValue as i, type CdlScrollTrigger as j, type CdlDiagramViewProps as k, type LaidEdge as l, type LaidNode as m, type CdlEdge as n, CdlDiagramView as o, type CdlEventBinding as p, type CdlEventKind as q, type CdlFormula as r, type CdlPhase as s, EDGE_HEADS as t, EDGE_HEAD_DEFAULT as u, type InteractiveSignalsAccessor as v, type LaidLane as w, NODE_KINDS as x, type ScrollProgressHandle as y, TONES as z };
+export { type LaidLane as A, type BBox as B, type CdlDiagram as C, NODE_KINDS as D, type EdgeStyle as E, type ScrollProgressHandle as F, TONES as G, computeEventBindingKey as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, computeFormulaKey as K, type LaidDiagram as L, computeInputSignalKey as M, type NodeKind as N, computeScrollTriggerKey as O, computed as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, createInteractiveSignalsAccessor as U, createScrollProgressHandle as V, createScrollProgressSignals as W, hasInteractivePrimitives as X, sequenceBoardMetrics as Y, sequenceStepId as Z, signal as _, type CdlInput as a, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeHead as e, type EdgeHeadFill as f, type CdlState as g, type CdlEventTarget as h, type Computed as i, type CdlDerivedValue as j, type CdlScrollTrigger as k, type CdlDiagramViewProps as l, type LaidEdge as m, type LaidNode as n, type CdlEdge as o, CdlDiagramView as p, type CdlEventBinding as q, type CdlEventKind as r, type CdlFormula as s, type CdlPhase as t, EDGE_HEADS as u, EDGE_HEAD_DEFAULT as v, EDGE_HEAD_FILLS as w, EDGE_HEAD_FILL_DEFAULT as x, EDGE_STYLES as y, type InteractiveSignalsAccessor as z };

package/dist/{render-BS1E6Mlo.d.ts → render-Dc5Pdf7e.d.ts}

@@ -29,11 +29,72 @@ interface Computed<T> {
 }
 declare function computed<T>(fn: () => T): Computed<T>;
 
+/**
+ * 段が進むと濃さが移るための、状態の名前 (#578)。
+ *
+ * **記号を落とす**。 `{名前}` の中で読めるのは `\w` だけ (`template-name.ts`) で、`-` を
+ * 含む名前は 1 度も置換されない = 濃さが動かないまま緑になる (実測)。
+ *
+ * 見本の側 (`withSteps` の `sets`) と描く側 (`sequenceStep`) が同じ名前を引く必要があるので、
+ * 導き方をここに置いて両方から呼ぶ。
+ *
+ * **図の id からは導かない**。 記法は id を書けず名前から導く規則を持つため、同じ図を
+ * 記法から書くと状態の名前だけがずれる (実測)。 図の中に順序図の箱は 1 つしか無く、状態は
+ * 図ごとに閉じているので、決め打ちで足りる。
+ */
+declare function sequenceStepId(): string;
+type SequenceBoardActor = {
+    name: string;
+    subtitle?: string;
+};
+type SequenceBoardMessageKind = "call" | "return" | "fire";
+type SequenceBoardMessage = {
+    label: string;
+    /** 出どころの面の番号 */
+    from: number;
+    /** 着き先の面の番号。 `from` と同じなら自分宛て */
+    to: number;
+    kind: SequenceBoardMessageKind;
+};
+/** 動いている間の帯。 段の番号で持つ (途中で手が空く面があるので区間の並び) */
+type SequenceBoardBand = {
+    actor: number;
+    from: number;
+    to: number;
+};
+type SequenceBoardData = {
+    actors: readonly SequenceBoardActor[];
+    messages: readonly SequenceBoardMessage[];
+    bands: readonly SequenceBoardBand[];
+};
+type SequenceBoardMetrics = {
+    w: number;
+    h: number;
+    /** 語を置く左の桁の幅 = 最初の糸の x */
+    gutter: number;
+    colW: number;
+    /** 横罫の y */
+    headY: number;
+    /** 面 i の糸の x */
+    cx: (i: number) => number;
+    /** 段 i の y */
+    rowY: (i: number) => number;
+    /** 糸の下端 */
+    bottom: number;
+};
+/**
+ * 中身から寸法を出す。
+ *
+ * 幅は **語の桁 + 列 × 面の数**。 語を線の脇ではなく左の桁に置くので、線の長さが語の長さに
+ * 引きずられない = 面の数だけで横幅が決まる。
+ */
+declare function sequenceBoardMetrics(data: SequenceBoardData): SequenceBoardMetrics;
+
 /** 意味付きの色の名前。 検査・描画・test はこの 1 つの列を出所にする。 */
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 1 つの列を出所にする。 */
-declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-bar", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service", "mark-start", "mark-end"];
+declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-bar", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service", "mark-start", "mark-end", "sequence-board"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -41,25 +102,97 @@ type Side = "top" | "right" | "bottom" | "left";
  * - "solid" (default) ... 実線 + 矢頭、 inactive は dashed grey
  * - "dotted-flow" ... 点線 + active phase で粒子が path 沿いに流れる。
  *   path が経由 node を貫通する場合は自動で粒子が node 中心を貫通する動きに切替。
+ * - "dashed" ... 刻んだ線。 **光っていても刻みのまま**。
+ *
+ * `"dashed"` が要るのは、`"solid"` の刻みが「光っていない」 を表す合図に使われているため。
+ * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「満たす」 と「使う」、
+ * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
+ */
+type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/**
+ * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
+ *
+ * 利用側 (dragon の記法) は受理する語を手で並べており、種類を足した時に取り残されていた
+ * (実測 = `dashed` を足した後、記法に書くと「線種が読めません」 で落ちた)。 一覧をここから
+ * 導けば、足した時点で書けるようになる。
  */
-type EdgeStyle = "solid" | "dotted-flow";
+declare const EDGE_STYLES: readonly EdgeStyle[];
 /**
  * 関係の **端の形** (#560)。 線の種類 (`EdgeStyle`) とは別の軸で、線の先端に何を置くかを決める。
  *
+ * - `"none"` ... 何も描かない。 **端の 1 つに印を置かない関係** に使う (#578)
  * - `"triangle"` ... 塗った三角。 **既定**。 書かなければこれになる
  * - `"diamond"` ... 塗った菱。 「持っている」 側を指す
  * - `"open"` ... 閉じない 2 本の腕。 向きだけを示し、待たない
  * - `"crow"` ... 三又。 「多」 を示す (ER の鳥の足)
  *
+ * ER の端は **2 つの記号が重なってできている** (#578)。 箱に近い側が個数 (棒 = 1 /
+ * 三又 = 多)、その外側が任意か (棒 = 必須 / 丸 = 任意)。 2 × 2 の 4 通りを 1 つの形として持つ。
+ *
+ * - `"one"` ... 棒が 2 本。 ちょうど 1 つ
+ * - `"zero-one"` ... 棒に丸。 1 つ、または無い
+ * - `"many"` ... 三又に棒。 少なくとも 1 つ
+ * - `"zero-many"` ... 三又に丸。 いくつでも、無くてもよい
+ *
+ * 4 通りを 2 つの欄に分けないのは、**端の印は 1 つの記号として読まれる**ため。 欄を分けると
+ * 片方だけ書いた形 (個数はあるが任意かが無い) を許すことになり、描けない組み合わせが増える。
+ *
  * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
  * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
  * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
  */
-type EdgeHead = "triangle" | "diamond" | "open" | "crow";
+type EdgeHead = "none" | "triangle" | "diamond" | "open" | "crow" | "one" | "zero-one" | "many" | "zero-many";
 /** 書かなかった時の端の形。 既存の図はすべてこれで描かれている */
 declare const EDGE_HEAD_DEFAULT: EdgeHead;
 /** 端の形の全種。 marker の定義と検査の走査がこの並びを引く (書き写すとずれる) */
 declare const EDGE_HEADS: readonly EdgeHead[];
+/**
+ * 端の印の **塗り方** (#578)。 形 (`EdgeHead`) とは別の軸。
+ *
+ * - `"solid"` ... 墨で塗る。 **既定**。 書かなければ形ごとの既定 (`EDGE_HEAD_SHAPE.filled`) に従う
+ * - `"hollow"` ... 紙の色で塗り、輪郭だけを線で描く
+ *
+ * UML は同じ形を塗りで分ける = 白抜きの菱が「持つ」、塗った菱が「抱える」 (命が同じ)。
+ * 形を増やして表そうとすると、塗りの軸を持つ全ての形について語が倍になる。
+ *
+ * 塗らない形 (`"open"` / `"crow"`) には効かない。 元から輪郭しか無いため。
+ */
+type EdgeHeadFill = "solid" | "hollow";
+/** 書かなかった時の塗り方 */
+declare const EDGE_HEAD_FILL_DEFAULT: EdgeHeadFill;
+/** 塗り方の全種。 marker の定義と検査の走査がこの並びを引く */
+declare const EDGE_HEAD_FILLS: readonly EdgeHeadFill[];
+/**
+ * 行き先と出どころの **両端に印を置ける** (#578)。
+ *
+ * `head` が行き先、`tailHead` が出どころ。 どちらも `"none"` を書けばその端には何も描かない。
+ *
+ * 側が種類で割れるのが要点。 三角は「この先が親」 を指すので行き先に立ち、菱は
+ * 「この箱が持っている」 を指すので出どころに立つ。 ER は端ごとに違う個数を示すので両端に要る。
+ * 1 つの欄で「どちら側か」 を持つ形にすると、両端に置く関係が書けない。
+ */
+/**
+ * 行頭の印 (#578)。 **形 × 塗り の 2 軸**で 4 通りを分ける。
+ *
+ * 軸の意味は図の種類が決める = クラス図は 持ち物/振る舞い × 公開/非公開、
+ * ER 図は 値/外部キー × 必須/任意、状態遷移図は 状態の中/出入り × 続く/瞬間。
+ * 描画側が持つのは形だけで、意味は持たない。
+ *
+ * 印を持つ行は **区切り線を引かない**。 印が群を分けるので、線と印で二重に分けることになる。
+ */
+type RowMark = {
+    /** 四角 (`"square"`) か山形 (`"chevron"`) か */
+    shape: "square" | "chevron";
+    /** 塗るか。 塗らない印は輪郭だけを描く */
+    filled: boolean;
+    /**
+     * 名前に下線を引くか (#578)。 ER の主キーに使う。
+     *
+     * **印の 2 軸とは別の段**に置く。 3 つ目の軸を印に足すと 4 通りが 8 通りになって
+     * 見分けが付かなくなるので、下線を重ねる形にした = 外部キーの山形と重ねられる。
+     */
+    underline?: boolean;
+};
 type CdlLane = {
     id: string;
     /** lane の x 座標 (optional、 未指定なら engine が前 lane 右端 + gap で auto 計算) */
@@ -143,6 +276,29 @@ type CdlNode = {
     value?: string;
     /** kind=storage 時の行 (各 mono、 state 参照可) */
     rows?: string[];
+    /**
+     * 行頭の印 (#578)。 `rows` と同じ並びで、`null` の位置には印を描かない。
+     *
+     * **印を持つ行は書き方そのものが変わる**。 区切り線 2 本を引かず、名前を印の右に置き、
+     * 型を箱の右端へ薄く右揃えで置く。 線で分けるのをやめて印で分ける形なので、両方は要らない。
+     *
+     * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
+     */
+    rowMarks?: readonly (RowMark | null)[];
+    /**
+     * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
+     *
+     * 面々と言づてと帯を 1 つの箱に持たせ、内側の配置は種別が決める。 図表の種別
+     * (`gantt-timeline` 等) と同じ持ち方。
+     */
+    sequenceData?: SequenceBoardData;
+    /**
+     * いま何番目の言づてを見ているか (#578)。 `"{seq}"` のように状態から取る。
+     *
+     * 書かない図では全部を濃く出す = 段を持たない使い方 (縮小見本 / 静止画) で薄い絵にすると、
+     * 読み手には壊れて見える。
+     */
+    sequenceStep?: string;
     /** width override (default は NodeKind 別 NODE_SIZE)、 catalog thumbnail 用に縮小可 */
     w?: number;
     /** height override */
@@ -412,6 +568,21 @@ type CdlEdge = {
     style?: EdgeStyle;
     /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
     head?: EdgeHead;
+    /**
+     * 端の印の塗り方 (#578)。 書かなければ形ごとの既定。 塗らない形には効かない。
+     *
+     * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 持つ /
+     * 塗った菱 = 抱える)。
+     */
+    headFill?: EdgeHeadFill;
+    /**
+     * **出どころ側**の端の印 (#578)。 書かなければ何も描かない。
+     *
+     * 行き先側は `head`。 両方に置けるので、ER のように端ごとに違う個数を示す関係が書ける。
+     */
+    tailHead?: EdgeHead;
+    /** 出どころ側の印の塗り (#578)。 書かなければ形ごとの既定 */
+    tailHeadFill?: EdgeHeadFill;
     /**
      * FSM transition の guard 条件 (例 "if validated")。
      * stateMachine preset では sub に併合される、 text-dsl v0.5 では guard 単独で渡せる。
@@ -2615,4 +2786,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeEventBindingKey as A, type BBox as B, type CdlDiagram as C, computeFormulaKey as D, type EdgeStyle as E, computeInputSignalKey as F, computeScrollTriggerKey as G, computed as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, createInteractiveSignalsAccessor as K, type LaidDiagram as L, createScrollProgressHandle as M, type NodeKind as N, createScrollProgressSignals as O, hasInteractivePrimitives as P, type QuadrantKey as Q, signal as R, type Signal as S, type Tone as T, type CdlInput as a, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeHead as e, type CdlState as f, type CdlEventTarget as g, type Computed as h, type CdlDerivedValue as i, type CdlScrollTrigger as j, type CdlDiagramViewProps as k, type LaidEdge as l, type LaidNode as m, type CdlEdge as n, CdlDiagramView as o, type CdlEventBinding as p, type CdlEventKind as q, type CdlFormula as r, type CdlPhase as s, EDGE_HEADS as t, EDGE_HEAD_DEFAULT as u, type InteractiveSignalsAccessor as v, type LaidLane as w, NODE_KINDS as x, type ScrollProgressHandle as y, TONES as z };
+export { type LaidLane as A, type BBox as B, type CdlDiagram as C, NODE_KINDS as D, type EdgeStyle as E, type ScrollProgressHandle as F, TONES as G, computeEventBindingKey as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, computeFormulaKey as K, type LaidDiagram as L, computeInputSignalKey as M, type NodeKind as N, computeScrollTriggerKey as O, computed as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, createInteractiveSignalsAccessor as U, createScrollProgressHandle as V, createScrollProgressSignals as W, hasInteractivePrimitives as X, sequenceBoardMetrics as Y, sequenceStepId as Z, signal as _, type CdlInput as a, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeHead as e, type EdgeHeadFill as f, type CdlState as g, type CdlEventTarget as h, type Computed as i, type CdlDerivedValue as j, type CdlScrollTrigger as k, type CdlDiagramViewProps as l, type LaidEdge as m, type LaidNode as n, type CdlEdge as o, CdlDiagramView as p, type CdlEventBinding as q, type CdlEventKind as r, type CdlFormula as s, type CdlPhase as t, EDGE_HEADS as u, EDGE_HEAD_DEFAULT as v, EDGE_HEAD_FILLS as w, EDGE_HEAD_FILL_DEFAULT as x, EDGE_STYLES as y, type InteractiveSignalsAccessor as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.15.0",
+  "version": "0.17.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/builder.ts

@@ -13,6 +13,7 @@ import type {
   CdlScrollTrigger,
   CdlState,
   EdgeHead,
+  EdgeHeadFill,
   EdgeStyle,
   NodeKind,
   Side,
@@ -1436,6 +1437,12 @@ export type DiagramBuilder = {
       style?: EdgeStyle;
       /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
       head?: EdgeHead;
+      /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
+      headFill?: EdgeHeadFill;
+      /** 出どころ側の端の印 (#578)。 書かなければ何も描かない */
+      tailHead?: EdgeHead;
+      /** 出どころ側の印の塗り (#578) */
+      tailHeadFill?: EdgeHeadFill;
       /** FSM guard 条件、 text-dsl v0.5 inline option (`guard: "..."`) を CdlEdge.guard へ透過 */
       guard?: string;
       /** ER 関係 cardinality、 text-dsl v0.5 inline option (`cardinality: "1:N"`) を CdlEdge.cardinality へ透過 */
@@ -1540,6 +1547,12 @@ export type DiagramBuilder = {
       style?: EdgeStyle;
       /** 端の形 (#560)、 既定は塗った三角 */
       head?: EdgeHead;
+      /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
+      headFill?: EdgeHeadFill;
+      /** 出どころ側の端の印 (#578)。 書かなければ何も描かない */
+      tailHead?: EdgeHead;
+      /** 出どころ側の印の塗り (#578) */
+      tailHeadFill?: EdgeHeadFill;
       guard?: string;
       cardinality?: string;
       labelOffsetX?: number;
@@ -1743,6 +1756,9 @@ export function diagram(
         side: opts.side,
         style: opts.style,
         head: opts.head,
+        headFill: opts.headFill,
+        tailHead: opts.tailHead,
+        tailHeadFill: opts.tailHeadFill,
         guard: opts.guard,
         cardinality: opts.cardinality,
         labelOffsetX: opts.labelOffsetX,
@@ -1874,6 +1890,9 @@ export function diagram(
           side: d.side,
           style: d.style,
           head: d.head,
+          headFill: d.headFill,
+          tailHead: d.tailHead,
+          tailHeadFill: d.tailHeadFill,
           guard: d.guard,
           cardinality: d.cardinality,
           labelOffsetX: d.labelOffsetX,

package/src/index.ts

@@ -194,6 +194,11 @@ export {
   bboxDiffWorld,
 } from "./layout/predict-bbox";
 export { swimlane, flow, sequence, topology, er, stateMachine, infrastructure, classDiagram, tree, userJourney, mindMap, funnel, quadrant, chart, gantt, flowchart, network, stateMachine2 } from "./presets";
+// 意匠の表 (#578)。 図の種類ごとに「何をどう描くか」 を持つ SSOT で、見本と検査が同じ表を引く
+export { CLASS_RELATION_LOOK, ER_CARDINALITY_HEAD, FSM_ACTION_MARK, SEQUENCE_MESSAGE_LOOK } from "./presets";
+// 時系列のやり取りの図が引く名前と寸法 (#578)。 **組み立て器ではない** ので presets からは出さない
+// (`mermaid-parity` が presets の公開関数を組み立て器として数える)
+export { sequenceStepId, sequenceBoardMetrics } from "./kinds/sequence-board-metrics";
 // Text DSL は @cardenelabs/dragon に切出済 (cdl は engine only)
 export type {
   SwimlanePreset,
@@ -203,6 +208,8 @@ export type {
   SequencePreset,
   SequenceBuilder,
   SequenceStep,
+  SequenceActor,
+  SequenceMessageKind,
   TopologyPreset,
   TopologyBuilder,
   TopologyGroupBuilder,
@@ -211,11 +218,14 @@ export type {
   ErPreset,
   ErBuilder,
   ErEntity,
+  ErColumn,
   ErRelation,
   ErRelationCardinality,
   StateMachinePreset,
   StateMachineBuilder,
   FsmState,
+  FsmStateAction,
+  FsmMark,
   FsmTransition,
   InfrastructurePreset,
   InfrastructureBuilder,
@@ -273,6 +283,8 @@ export type {
   CdlPhase,
   CdlState,
   EdgeHead,
+  EdgeHeadFill,
+  RowMark,
   EdgeStyle,
   LaidDiagram,
   LaidEdge,
@@ -286,7 +298,15 @@ export type {
 // 手書きせずに済ませるため公開する。
 // 値としての tone / kind 一覧。 downstream (dragon の記法一覧 / parser 等) が
 // 受理できる値の集合を手書きせずに済ませるため公開する。
-export { TONES, NODE_KINDS, EDGE_HEADS, EDGE_HEAD_DEFAULT } from "./types";
+export {
+  TONES,
+  NODE_KINDS,
+  EDGE_HEADS,
+  EDGE_HEAD_DEFAULT,
+  EDGE_HEAD_FILLS,
+  EDGE_HEAD_FILL_DEFAULT,
+  EDGE_STYLES,
+} from "./types";
 
 /**
  * 段ごとの実効値を出す 2 つ。 downstream が「この段で箱に何の字が出るか」 を

package/src/kinds/card.tsx

@@ -14,7 +14,9 @@ export function CardNode({ node, active }: { node: LaidNode; active: boolean }):
   // compact card (h<100) は中央揃え (sequence header 等の小型 card 用)。
   // 高さの境界は `compact-title.ts` が持つ = 4 種と同じ値を使う (#416)
   const compact = isCompactBox(node.h);
-  const titleY = compact ? node.h / 2 + 8 : 86;
+  // 小型の箱でも呼び名を出す (#578)。 出す時は題を上へ寄せて、2 行を箱の中で釣り合わせる
+  const 小型に呼び名 = compact && Boolean(node.subtitle);
+  const titleY = compact ? (小型に呼び名 ? node.h / 2 - 2 : node.h / 2 + 8) : 86;
   const titleX = compact ? node.w / 2 : 26;
   const paddingX = compact ? 16 : 52;
   const availableW = node.w - paddingX;
@@ -56,6 +58,18 @@ export function CardNode({ node, active }: { node: LaidNode; active: boolean }):
           {node.subtitle}
         </text>
       )}
+      {小型に呼び名 && (
+        <text
+          data-cdl-role="node-subtitle"
+          x={node.w / 2}
+          y={node.h / 2 + 24}
+          fontSize={Math.min(subtitleSize, 18)}
+          textAnchor="middle"
+          fill="var(--cdl-text-dim, #5a6270)"
+        >
+          {node.subtitle}
+        </text>
+      )}
     </g>
   );
 }