@cardenelabs/cdl 0.27.0 → 0.29.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-ViWKnlu1.cjs';
-export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-ViWKnlu1.cjs';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-CabTMeao.cjs';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-CabTMeao.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1210,6 +1210,10 @@ declare function diagram(id: string, options: {
      * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
      */
     palette?: string;
+    /**
+     * この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
+     */
+    type?: string;
 }): DiagramBuilder;
 
 /**

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-ViWKnlu1.js';
-export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-ViWKnlu1.js';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-CabTMeao.js';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-CabTMeao.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1210,6 +1210,10 @@ declare function diagram(id: string, options: {
      * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
      */
     palette?: string;
+    /**
+     * この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
+     */
+    type?: string;
 }): DiagramBuilder;
 
 /**

package/dist/index.js

@@ -11484,6 +11484,8 @@ function diagram(id, options) {
         ...options.structuredData === "exclude" ? { structuredData: "exclude" } : {},
         // 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
         ...options.palette !== void 0 ? { palette: options.palette } : {},
+        // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
+        ...options.type !== void 0 ? { type: options.type } : {},
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
         ...inputs.length > 0 ? { inputs: [...inputs] } : {},
         ...formulas.length > 0 ? { formulas: [...formulas] } : {},
@@ -20280,6 +20282,8 @@ function layout(diag) {
     // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
     // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
     ...diag.palette ? { palette: diag.palette } : {},
+    // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
+    ...diag.type ? { type: diag.type } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -29699,6 +29703,7 @@ function CdlStage({
         "data-cdl-stage": "",
         "data-cdl-scale": diagramScale === 1 ? void 0 : diagramScale,
         "data-cdl-palette": laid.palette,
+        "data-cdl-type": laid.type,
         children: [
           /* @__PURE__ */ jsxs("defs", { children: [
             Object.entries(TONE).flatMap(
@@ -30368,7 +30373,7 @@ function fitRowsWidth(boxW, rows) {
 }
 function swimlane(preset) {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "swimlane" });
   const labelToId = /* @__PURE__ */ new Map();
   const idsInOrder = [];
   for (const label of preset.lanes) {
@@ -30388,7 +30393,7 @@ function swimlane(preset) {
 }
 function flow(preset) {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "flow" });
   b.lane("flow", { width: w, ...preset.laneLabel ? { label: preset.laneLabel } : {} });
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "dotted-flow";
@@ -30449,7 +30454,7 @@ var SEQUENCE_MESSAGE_LOOK = {
 };
 function sequence(preset) {
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "sequence" });
   const \u9762\u3005 = preset.actors.map(
     (a) => typeof a === "string" ? { name: a } : { name: a.name, ...a.subtitle ? { subtitle: a.subtitle } : {} }
   );
@@ -30504,7 +30509,7 @@ function topology(preset) {
   const groupW = preset.groupWidth ?? 460;
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "topology" });
   const groupOrder = [];
   const groupStackCount = /* @__PURE__ */ new Map();
   const phaseActivate = [];
@@ -30573,7 +30578,7 @@ function er(preset) {
   const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
   const tone = preset.defaultTone ?? "info";
   const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
-  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "er" });
   const entities = [];
   const phaseActivate = [];
   let relIdx = 0;
@@ -30659,7 +30664,7 @@ var FSM_ACTION_MARK = {
 function stateMachine(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
   const phaseActivate = [];
   const stateOrder = /* @__PURE__ */ new Map();
   const \u72B6\u614B = [];
@@ -30771,7 +30776,7 @@ function infrastructure(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "infrastructure" });
   const colLaneIds = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let connIdx = 0;
@@ -30830,6 +30835,14 @@ var CLASS_RELATION_LOOK = {
   associates: { head: "open", fill: "solid", tailHead: "none", tailFill: "solid", style: "solid" },
   uses: { head: "open", fill: "solid", tailHead: "none", tailFill: "solid", style: "dashed" }
 };
+var CLASS_RELATION_TONE = {
+  extends: "accent",
+  implements: "accent",
+  aggregates: "teal",
+  composes: "teal",
+  associates: "success",
+  uses: "success"
+};
 Object.fromEntries(
   Object.entries(CLASS_RELATION_LOOK).map(([k, v]) => [k, v.head])
 );
@@ -30842,9 +30855,9 @@ function stripAccess(row) {
 }
 function classDiagram(preset) {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
-  const tone = preset.defaultTone ?? "info";
+  const \u56F3\u306E\u65E2\u5B9A = preset.defaultTone;
   const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
-  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "class" });
   const classes = [];
   const phaseActivate = [];
   const \u7BB1 = [];
@@ -30906,7 +30919,7 @@ function classDiagram(preset) {
           id: edgeId,
           label: r.label ?? r.type,
           ...r.cardinality ? { sub: r.cardinality } : {},
-          tone: r.tone ?? tone,
+          tone: r.tone ?? \u56F3\u306E\u65E2\u5B9A ?? CLASS_RELATION_TONE[r.type],
           // 関係の種類から線と端の形を決める (cdl#574 / #578)。 書いた値が勝つ
           style: r.style ?? \u898B\u305F\u76EE.style,
           head: r.head ?? \u898B\u305F\u76EE.head,
@@ -30931,7 +30944,7 @@ function classDiagram(preset) {
 function tree(preset) {
   const canvasW = preset.nodeWidth ? preset.nodeWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "tree" });
   const treeNodes = [];
   const api = {
     node(n) {
@@ -30969,7 +30982,7 @@ function tree(preset) {
 function userJourney(preset) {
   const canvasW = preset.stepWidth ? preset.stepWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "journey" });
   const steps = [];
   const api = {
     step(s) {
@@ -31008,7 +31021,7 @@ function userJourney(preset) {
 function mindMap(preset) {
   const canvasW = preset.branchWidth ? preset.branchWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "mindmap" });
   const branches = [];
   const api = {
     branch(br) {
@@ -31052,7 +31065,7 @@ function mindMap(preset) {
 function funnel(preset) {
   const canvasW = toGridSize(preset.stageWidth ?? 560);
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "funnel" });
   const stages = [];
   const api = {
     stage(s) {
@@ -31090,7 +31103,7 @@ function funnel(preset) {
 function quadrant(preset) {
   const canvasW = 640;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "quadrant" });
   const items = [];
   const api = {
     item(it) {
@@ -31141,7 +31154,7 @@ function chart(preset) {
   const canvasH = toGridSize(
     preset.type === "pie" || preset.type === "gauge" || preset.type === "radial" || preset.type === "stat" || preset.type === "waffle" || preset.type === "stacked-bar" ? 320 : 360
   );
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "chart" });
   const data = [];
   const kindMap = {
     line: "chart-line",
@@ -31190,7 +31203,7 @@ function gantt(preset) {
   const canvasW = preset.laneWidth ? preset.laneWidth * 2 : 720;
   const canvasH = 360;
   const tone = preset.defaultTone ?? "teal";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "gantt" });
   const tasks = [];
   const api = {
     task(t) {
@@ -31256,7 +31269,7 @@ var SHAPE_EYEBROW = {
 function flowchart(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
   const laneToId = /* @__PURE__ */ new Map();
   const laneStackCount = /* @__PURE__ */ new Map();
   for (const label of preset.lanes) {
@@ -31317,7 +31330,7 @@ var NET_KIND_MAP = {
 function network(preset) {
   const laneW = preset.laneWidth ?? 320;
   const tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "network" });
   const colLaneIds = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let edgeIdx = 0;
@@ -31367,7 +31380,7 @@ function stateMachine2(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
   const laneW = boxLaneW(stateW);
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
   const stateOrder = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let transIdx = 0;