@cardenelabs/cdl 0.22.0 → 0.24.0

package/dist/{render-Czv0tUon.d.cts → render-CfXUl0Yz.d.cts}

@@ -109,6 +109,8 @@ type Side = "top" | "right" | "bottom" | "left";
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+type EdgeRole = "main";
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -572,6 +574,21 @@ type CdlEdge = {
     side?: Side;
     /** visual style、 default "solid" */
     style?: EdgeStyle;
+    /**
+     * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+     *
+     * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+     * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+     * 主となる 1 本 (または 1 続き) にだけ書く。
+     */
+    role?: EdgeRole;
+    /**
+     * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+     *
+     * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+     * 線と名前の区別が付く。
+     */
+    labelPlate?: boolean;
     /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
     head?: EdgeHead;
     /**
@@ -2810,4 +2827,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { sequenceBoardMetrics as $, EDGE_STYLES as A, type BBox as B, type CdlDiagram as C, type EdgeReveal as D, type EdgeStyle as E, type InteractiveSignalsAccessor as F, type LaidLane as G, NODE_KINDS as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type ScrollProgressHandle as K, type LaidDiagram as L, TONES as M, type NodeKind as N, computeEventBindingKey as O, computeFormulaKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeInputSignalKey as U, computeScrollTriggerKey as V, computed as W, createInteractiveSignalsAccessor as X, createScrollProgressHandle as Y, createScrollProgressSignals as Z, hasInteractivePrimitives as _, type CdlInput as a, sequenceStepId as a0, signal as a1, 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_REVEALS as y, EDGE_REVEAL_DEFAULT as z };
+export { hasInteractivePrimitives as $, EDGE_REVEAL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_STYLES as D, type EdgeStyle as E, type EdgeReveal as F, type InteractiveSignalsAccessor as G, type LaidLane as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, NODE_KINDS as K, type LaidDiagram as L, type ScrollProgressHandle as M, type NodeKind as N, TONES as O, computeEventBindingKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeFormulaKey as U, computeInputSignalKey as V, computeScrollTriggerKey as W, computed as X, createInteractiveSignalsAccessor as Y, createScrollProgressHandle as Z, createScrollProgressSignals as _, type CdlInput as a, sequenceBoardMetrics as a0, sequenceStepId as a1, signal as a2, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, EDGE_HEADS as v, EDGE_HEAD_DEFAULT as w, EDGE_HEAD_FILLS as x, EDGE_HEAD_FILL_DEFAULT as y, EDGE_REVEALS as z };

package/dist/{render-Czv0tUon.d.ts → render-CfXUl0Yz.d.ts}

@@ -109,6 +109,8 @@ type Side = "top" | "right" | "bottom" | "left";
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+type EdgeRole = "main";
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -572,6 +574,21 @@ type CdlEdge = {
     side?: Side;
     /** visual style、 default "solid" */
     style?: EdgeStyle;
+    /**
+     * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+     *
+     * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+     * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+     * 主となる 1 本 (または 1 続き) にだけ書く。
+     */
+    role?: EdgeRole;
+    /**
+     * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+     *
+     * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+     * 線と名前の区別が付く。
+     */
+    labelPlate?: boolean;
     /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
     head?: EdgeHead;
     /**
@@ -2810,4 +2827,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { sequenceBoardMetrics as $, EDGE_STYLES as A, type BBox as B, type CdlDiagram as C, type EdgeReveal as D, type EdgeStyle as E, type InteractiveSignalsAccessor as F, type LaidLane as G, NODE_KINDS as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type ScrollProgressHandle as K, type LaidDiagram as L, TONES as M, type NodeKind as N, computeEventBindingKey as O, computeFormulaKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeInputSignalKey as U, computeScrollTriggerKey as V, computed as W, createInteractiveSignalsAccessor as X, createScrollProgressHandle as Y, createScrollProgressSignals as Z, hasInteractivePrimitives as _, type CdlInput as a, sequenceStepId as a0, signal as a1, 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_REVEALS as y, EDGE_REVEAL_DEFAULT as z };
+export { hasInteractivePrimitives as $, EDGE_REVEAL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_STYLES as D, type EdgeStyle as E, type EdgeReveal as F, type InteractiveSignalsAccessor as G, type LaidLane as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, NODE_KINDS as K, type LaidDiagram as L, type ScrollProgressHandle as M, type NodeKind as N, TONES as O, computeEventBindingKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeFormulaKey as U, computeInputSignalKey as V, computeScrollTriggerKey as W, computed as X, createInteractiveSignalsAccessor as Y, createScrollProgressHandle as Z, createScrollProgressSignals as _, type CdlInput as a, sequenceBoardMetrics as a0, sequenceStepId as a1, signal as a2, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, EDGE_HEADS as v, EDGE_HEAD_DEFAULT as w, EDGE_HEAD_FILLS as x, EDGE_HEAD_FILL_DEFAULT as y, EDGE_REVEALS as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.22.0",
+  "version": "0.24.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

@@ -15,6 +15,7 @@ import type {
   EdgeHead,
   EdgeHeadFill,
   EdgeStyle,
+  EdgeRole,
   NodeKind,
   Side,
   Tone,
@@ -1435,6 +1436,10 @@ export type DiagramBuilder = {
       tone?: Tone;
       side?: Side;
       style?: EdgeStyle;
+      /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+      role?: EdgeRole;
+      /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+      labelPlate?: boolean;
       /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
       head?: EdgeHead;
       /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
@@ -1755,6 +1760,8 @@ export function diagram(
         tone: opts.tone ?? "accent",
         side: opts.side,
         style: opts.style,
+        role: opts.role,
+        labelPlate: opts.labelPlate,
         head: opts.head,
         headFill: opts.headFill,
         tailHead: opts.tailHead,

package/src/index.ts

@@ -65,6 +65,10 @@ export { compile } from "./compile";
 export { layout } from "./layout";
 export { validate } from "./validate";
 export { countEdgeCrossings, visualValidate, visualValidateLaid, visualValidateAll } from "./visual-validate";
+// 並べ替え (#599)。 関係から lane / stack を決める純関数。 `compile` からは呼ばない =
+// 書き手が明示した配置を engine が黙って動かすと既存の全図が変わるため、呼ぶ判断は上流に置く
+export { orderNodes, countOrderCrossings } from "./layout/order";
+export type { OrderNode, OrderEdge, OrderResult } from "./layout/order";
 export type {
   Violation,
   VisualAxis,

package/src/kinds/generic.tsx

@@ -39,12 +39,71 @@ type KindStyle = {
   icon: string;
   /** shape: rect (default) / cylinder / cloud / diamond / hexagon */
   shape?: "rect" | "cylinder" | "cloud" | "diamond" | "hexagon";
+  /**
+   * 面と枠の描き方 (#616)。 未指定は従来どおり。
+   *
+   * 色で kind を分ける形は、 消費側の配色によっては読めない。 dragon の茶墨は
+   * kind の色が 4 つとも暗く彩度が低く、 枠線や細い帯の面積では差が出ない
+   * (隔たりは 18.6 以上あるが、 面積が小さいと効かない)。 形で分ける口を用意する。
+   */
+  look?: NodeLook;
 };
 
+/** 箱の見せ方。 何を示すかは値の名前が持つ */
+export type NodeLook =
+  /** 図の外にある = 面を塗らず枠だけ */
+  | "outline"
+  /** 通り道 = 薄い面。 止まらず抜ける */
+  | "tint"
+  /** ここが働く = ベタ塗り。 図で最も重い */
+  | "solid"
+  /** 消えては困る = 底を二重の罫で締める */
+  | "ledger"
+  /** 失っても作り直せる = 破線の枠 */
+  | "dashed";
+
+/** 薄い面の濃さ。 `color-mix` を読めない環境では第 2 引数の色に落ちる */
+const TINT_FILL = "color-mix(in srgb, var(--cdl-text, #1a1f2a) 6%, transparent)";
+
+/**
+ * `look` から面と枠を決める。
+ *
+ * 未指定は従来どおり (面 = node-fill、 枠 = 光れば kind の色 / 光らなければ divider)。
+ * ここを通らない kind の出力は 1 文字も変わらない。
+ */
+export function lookPaint(look: NodeLook | undefined, accent: string, active: boolean): {
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  dash?: string;
+  /** ベタ塗りの上では字を紙の色で抜く */
+  onSolid: boolean;
+} {
+  const 既定枠 = active ? accent : "var(--cdl-divider, #d4d4d8)";
+  const 既定太さ = active ? 3 : 1.25;
+  switch (look) {
+    case "outline":
+      return { fill: "none", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "tint":
+      return { fill: TINT_FILL, stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "solid":
+      // 枠は従来どおり (光れば kind の色)。 面だけを墨で塗る = 「光っている節の枠は kind の色」
+      // は既存の契約で、 `node-styling` が守っている
+      return { fill: "var(--cdl-text, #1a1f2a)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: true };
+    case "ledger":
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "dashed":
+      return { fill: "none", stroke: 既定枠, strokeWidth: 既定太さ, dash: "6 4", onSolid: false };
+    default:
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+  }
+}
+
 // 各 kind の visual style (icon は heroicons / lucide 風の minimal SVG path)
 const STYLES: Partial<Record<NodeKind, KindStyle>> = {
   // 人系
   person: {
+    look: "outline",
     accent: "var(--cdl-tone-accent, #2d6a8f)",
     eyebrowColor: "var(--cdl-tone-accent, #2d6a8f)",
     icon: "M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4z",
@@ -78,11 +137,13 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
     shape: "cylinder",
   },
   cache: {
+    look: "dashed",
     accent: "var(--cdl-tone-warning, #a67a2e)",
     eyebrowColor: "var(--cdl-tone-warning, #a67a2e)",
     icon: "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z",
   },
   queue: {
+    look: "ledger",
     accent: "var(--cdl-tone-warning, #a67a2e)",
     eyebrowColor: "var(--cdl-tone-warning, #a67a2e)",
     icon: "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z",
@@ -99,6 +160,7 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
     shape: "cloud",
   },
   cdn: {
+    look: "tint",
     accent: "var(--cdl-tone-info, #5a8ec1)",
     eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
     icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z",
@@ -106,6 +168,7 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
 
   // アプリ系
   service: {
+    look: "solid",
     accent: "var(--cdl-tone-teal, #2f8770)",
     eyebrowColor: "var(--cdl-tone-teal, #2f8770)",
     icon: "M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z",
@@ -188,6 +251,7 @@ export function GenericNode({
 
   // shape 別 path
   const shape = style.shape ?? "rect";
+  const paint = lookPaint(style.look, style.accent, active);
   const shapeEl = (() => {
     if (shape === "cylinder") {
       // 円柱 (top ellipse + side + bottom ellipse)
@@ -267,16 +331,23 @@ export function GenericNode({
     }
     // default rect
     return (
-      <rect
-        x={0}
-        y={0}
-        width={w}
-        height={h}
-        rx={18}
-        fill="var(--cdl-node-fill, #ffffff)"
-        stroke={active ? style.accent : "var(--cdl-divider, #d4d4d8)"}
-        strokeWidth={active ? 3 : 1.25}
-      />
+      <>
+        <rect
+          x={0}
+          y={0}
+          width={w}
+          height={h}
+          rx={18}
+          fill={paint.fill}
+          stroke={paint.stroke}
+          strokeWidth={paint.strokeWidth}
+          strokeDasharray={paint.dash}
+        />
+        {/* 台帳 = 底を二重の罫で締める。 消えては困る物という約束を形で示す (#616) */}
+        {style.look === "ledger" && (
+          <line x1={1} y1={h - 7} x2={w - 1} y2={h - 7} stroke={paint.stroke} strokeWidth={1} />
+        )}
+      </>
     );
   })();
 
@@ -332,7 +403,14 @@ export function GenericNode({
   const dominantBaseline = centered ? ("middle" as const) : undefined;
 
   return (
-    <g transform={`translate(${x} ${y})`} data-cdl-role="node-body">
+    <g
+      transform={`translate(${x} ${y})`}
+      data-cdl-role="node-body"
+      /* 見せ方を持つ箱だけに出す目印 (#620)。 消費側が `:not([data-cdl-look])` で
+         従来どおりの箱だけを上書きの対象にできる。 持たない kind には出さない
+         = 空文字を出すと選択子が効かなくなる */
+      data-cdl-look={style.look}
+    >
       {shapeEl}
       {/* icon */}
       <g transform={`translate(${iconX} ${iconY}) scale(1)`} data-cdl-role="node-kind-icon">
@@ -340,15 +418,15 @@ export function GenericNode({
         <path d={style.icon} fill={style.eyebrowColor} opacity={0.7} transform="scale(1)" />
       </g>
       {node.eyebrow && (
-        <text x={textX} y={eyebrowY} fontSize={17} fontWeight={700} letterSpacing={1.5} fill={style.eyebrowColor} textAnchor={textAnchor} dominantBaseline={dominantBaseline}>
+        <text x={textX} y={eyebrowY} fontSize={17} fontWeight={700} letterSpacing={1.5} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : style.eyebrowColor} textAnchor={textAnchor} dominantBaseline={dominantBaseline}>
           {node.eyebrow}
         </text>
       )}
-      <text data-cdl-role="node-label" x={textX} y={titleY} fontSize={20} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
+      <text data-cdl-role="node-label" x={textX} y={titleY} fontSize={20} fontWeight={700} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text, #1a1f2a)"} textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
         {node.title}
       </text>
       {node.subtitle && (
-        <text x={textX} y={subtitleY} fontSize={17} fill="var(--cdl-text-dim, #5a6270)" textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+        <text x={textX} y={subtitleY} fontSize={17} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)"} textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
           {node.subtitle}
         </text>
       )}