@cardenelabs/cdl 0.5.0

package/src/kinds/user-journey.tsx

@@ -0,0 +1,240 @@
+import type { JSX } from "react";
+import type { LaidNode, JourneyStepPayload } from "../types";
+import { TONE } from "../render/tone";
+
+/**
+ * journey-map kind ... 1 node に step 配列 (journeyData) を保持し、 UX journey map を SVG 描画する。
+ *
+ * デザイン方針 (batch3):
+ *   - 感情 5 段階の水平 band 背景色 (delighted 緑 → angry 赤 の gradient)
+ *   - 各 step 区切りに縦線 + step index
+ *   - 感情曲線を bezier smooth curve + tone accent
+ *   - touchpoint は icon pill + step label 下に配置
+ *   - opportunity は 電球 + 吹き出し風 rounded rect
+ *   - 「ただの折れ線グラフ」 との差別化 = 5 emotion band + touchpoint 装飾 + opportunity call-out
+ */
+export function UserJourneyNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const steps = node.journeyData ?? [];
+
+  const PAD_TOP = 20;
+  const PAD_RIGHT = 32;
+  const PAD_BOTTOM = 108;
+  const PAD_LEFT = 108;
+  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
+  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+
+  const emotionRows: JourneyStepPayload["emotion"][] = ["delighted", "happy", "neutral", "frustrated", "angry"];
+  const emotionScore: Record<JourneyStepPayload["emotion"], number> = {
+    delighted: 4,
+    happy: 3,
+    neutral: 2,
+    frustrated: 1,
+    angry: 0,
+  };
+  // 感情ごとの色。 共有の表から引く (直書きすると表を直した時に取り残される)。
+  const emotionColor: Record<JourneyStepPayload["emotion"], string> = {
+    delighted: TONE.success,
+    happy: TONE.teal,
+    neutral: TONE.info,
+    frustrated: TONE.warning,
+    angry: TONE.error,
+  };
+  const emotionEmoji: Record<JourneyStepPayload["emotion"], string> = {
+    delighted: "😄",
+    happy: "🙂",
+    neutral: "😐",
+    frustrated: "😕",
+    angry: "😠",
+  };
+
+  const rowH = canvasH / 5;
+  // step を列の中央に置く。 端に寄せると、 step の下に置く touchpoint chip が枠からはみ出す。
+  const colW = canvasW / Math.max(steps.length, 1);
+  const xAt = (idx: number) =>
+    PAD_LEFT + (steps.length <= 1 ? canvasW / 2 : colW / 2 + colW * idx);
+  const yAt = (emotion: JourneyStepPayload["emotion"]) =>
+    PAD_TOP + rowH / 2 + (4 - emotionScore[emotion]) * rowH;
+
+  // smooth curve for emotion path
+  const pts = steps.map((s, i) => ({ x: xAt(i), y: yAt(s.emotion) }));
+  const smoothPath = pts.length > 1
+    ? pts.reduce((acc, p, i) => {
+        if (i === 0) return `M ${p.x} ${p.y}`;
+        const prev = pts[i - 1]!;
+        const midX = (prev.x + p.x) / 2;
+        return `${acc} C ${midX} ${prev.y}, ${midX} ${p.y}, ${p.x} ${p.y}`;
+      }, "")
+    : "";
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+
+      {emotionRows.map((e, i) => (
+        <g key={`band-${e}`}>
+          <rect
+            data-cdl-role="journey-band"
+            x={PAD_LEFT}
+            y={PAD_TOP + i * rowH}
+            width={canvasW}
+            height={rowH}
+            fill={emotionColor[e]}
+            fillOpacity={0.09}
+          />
+          <text
+            x={PAD_LEFT - 84}
+            y={PAD_TOP + i * rowH + rowH / 2 + 5}
+            fontSize={18}
+            textAnchor="middle"
+          >
+            {emotionEmoji[e]}
+          </text>
+          <text
+            x={PAD_LEFT - 14}
+            y={PAD_TOP + i * rowH + rowH / 2 + 4}
+            fontSize={12}
+            fontWeight={600}
+            textAnchor="end"
+            fill={emotionColor[e]}
+          >
+            {e}
+          </text>
+        </g>
+      ))}
+
+      {/*
+        段の区切りの縦線 (#424)。 `actor` と同じ理由で `--cdl-row-divider` に分けた。
+        破線は残す = 段の境目は補助線で、 実線にすると折れ線より前に出る。
+      */}
+      {steps.map((_, idx) => (
+        <line
+          key={`div-${idx}`}
+          data-cdl-role="node-column-divider"
+          x1={xAt(idx)}
+          y1={PAD_TOP}
+          x2={xAt(idx)}
+          y2={PAD_TOP + canvasH}
+          stroke="var(--cdl-row-divider, #7e848e)"
+          strokeDasharray="4 4"
+        />
+      ))}
+
+      {steps.length > 1 && (
+        <>
+          <path
+            data-cdl-role="journey-line-glow"
+            d={smoothPath}
+            fill="none"
+            stroke="var(--cdl-tone-accent, #2d6a8f)"
+            strokeOpacity={0.18}
+            strokeWidth={10}
+            strokeLinecap="round"
+          />
+          <path
+            data-cdl-role="journey-line"
+            d={smoothPath}
+            fill="none"
+            stroke="var(--cdl-tone-accent, #2d6a8f)"
+            strokeWidth={2.75}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+        </>
+      )}
+
+      {steps.map((s, idx) => (
+        <g key={`step-${s.id}`}>
+          <circle
+            cx={xAt(idx)}
+            cy={yAt(s.emotion)}
+            r={9}
+            fill="var(--cdl-node-fill, #ffffff)"
+            stroke={emotionColor[s.emotion]}
+            strokeWidth={2.5}
+          />
+          <circle
+            cx={xAt(idx)}
+            cy={yAt(s.emotion)}
+            r={4}
+            fill={emotionColor[s.emotion]}
+          />
+
+          <text
+            x={xAt(idx)}
+            y={PAD_TOP + canvasH + 24}
+            fontSize={12}
+            fontWeight={700}
+            textAnchor="middle"
+            fill="var(--cdl-text, #1a1f2a)"
+          >
+            {`${idx + 1}. ${s.title}`}
+          </text>
+          {s.touchpoint && (
+            <g>
+              {/* 枠の濃さは 0.5 だと背景に埋もれる (実測 = dark 2.86 / 明色 2.13)。 0.6 が
+                  3.0 を超える最小値 */}
+              <rect
+                data-cdl-role="journey-chip"
+                x={xAt(idx) - 40}
+                y={PAD_TOP + canvasH + 34}
+                width={80}
+                height={20}
+                rx={10}
+                fill="var(--cdl-tone-accent, #2d6a8f)"
+                fillOpacity={0.12}
+                stroke="var(--cdl-tone-accent, #2d6a8f)"
+                strokeOpacity={0.6}
+                strokeWidth={1}
+              />
+              <text
+                x={xAt(idx)}
+                y={PAD_TOP + canvasH + 48}
+                fontSize={10}
+                fontWeight={600}
+                textAnchor="middle"
+                fill="var(--cdl-tone-accent, #2d6a8f)"
+              >
+                {s.touchpoint}
+              </text>
+            </g>
+          )}
+          {s.opportunity && (
+            <g>
+              <rect
+                x={xAt(idx) - 55}
+                y={PAD_TOP + canvasH + 62}
+                width={110}
+                height={26}
+                rx={13}
+                fill="var(--cdl-note-fill, #fef3c7)"
+                stroke={TONE.warning}
+                strokeWidth={1}
+              />
+              <text
+                x={xAt(idx)}
+                y={PAD_TOP + canvasH + 79}
+                fontSize={10}
+                textAnchor="middle"
+                fill="var(--cdl-note-text, #7a5320)"
+              >
+                💡 {s.opportunity}
+              </text>
+            </g>
+          )}
+        </g>
+      ))}
+    </g>
+  );
+}

package/src/label-text.ts

@@ -0,0 +1,71 @@
+/**
+ * edge label の 2 行の文字仕様 SSOT。
+ *
+ * 描画 (`render/edges.tsx`) と検査 (`visual-validate.ts` の軸 27 `contrast-basics`) が同じ
+ * 値を読む。 描画側に literal を残して検査側が「描画はこうなっているはず」 と書き写す形は
+ * 使わない。 書き写しは片方だけが変わった時に検知できず、 検査が実在しない描画を測る
+ * (軸 27 が sub 行を通常文字として測っていた間、 描画は 19px のままで検査だけが正しかった
+ * ように見えていた)。
+ */
+
+/** edge label の行。 `main` = `label`、 `sub` = `sub`。 */
+export type EdgeLabelLine = "main" | "sub";
+
+export interface EdgeLabelTextSpec {
+  fontSize: number;
+  fontWeight: number;
+  /**
+   * 文字を背景に重ねる不透明度。 1 = 合成なし。
+   *
+   * 1 未満だと実際に目に入る色は背景との合成結果になり、 対比が必ず下がる。
+   */
+  opacity: number;
+  /**
+   * 描画で指定する font-family の先頭。 指定せず継承する行は null。
+   *
+   * 下流が「その太さの face を読み込んでいるか」 を確かめる時、 どの family を見ればよいかが
+   * ここで決まる。 主題が family を宣言しない時の落とし先でもある。
+   */
+  fontFamily: string | null;
+}
+
+export const EDGE_LABEL_TEXT: Record<EdgeLabelLine, EdgeLabelTextSpec> = {
+  // main 行は family を指定せず、 host 側の指定を継承する。
+  main: { fontSize: 22, fontWeight: 700, opacity: 1, fontFamily: null },
+  // sub を太字にすると WCAG の large text に入り、 要求される対比が 4.5:1 から 3:1 に下がる。
+  // 幅は変わらない = sub は JetBrains Mono (等幅) で描くため、 advance width が太さに依らない
+  // (`layout/text-width.ts` の mono 経路も太さを見ない)。
+  sub: { fontSize: 19, fontWeight: 700, opacity: 1, fontFamily: "JetBrains Mono" },
+};
+
+/** `font-family` 属性に書く値。 先頭の family と、 端末に入っている前提の代替を並べる。 */
+export function fontFamilyAttr(line: EdgeLabelLine): string | undefined {
+  const family = EDGE_LABEL_TEXT[line].fontFamily;
+  return family === null ? undefined : `'${family}', monospace`;
+}
+
+/** WCAG AA の large text (24px 以上 or 太字 18.66px 以上) の閾値。 */
+export const WCAG_AA_LARGE = 3.0;
+/** WCAG AA の通常文字の閾値。 */
+export const WCAG_AA_NORMAL = 4.5;
+
+/**
+ * WCAG の large text (14pt 太字 = 18.66px、 または 18pt = 24px) に当たるか。
+ *
+ * 太字の下限を 700 に取るのは WCAG が「bold」 の具体値を定めておらず、 CSS の `bold` が
+ * 700 に対応するため。 600 を太字と見なすと、 実際には満たさない対比を通す。
+ */
+export function isLargeText(spec: EdgeLabelTextSpec): boolean {
+  return spec.fontSize >= 24 || (spec.fontWeight >= 700 && spec.fontSize >= 18.66);
+}
+
+/** 文字仕様から WCAG AA が要求する対比を返す。 */
+export function requiredContrastRatio(spec: EdgeLabelTextSpec): number {
+  return isLargeText(spec) ? WCAG_AA_LARGE : WCAG_AA_NORMAL;
+}
+
+/** 検査の指摘文に出す文字の説明 (例 `19px 太字 = large text`)。 */
+export function describeTextSpec(spec: EdgeLabelTextSpec): string {
+  const weight = spec.fontWeight >= 700 ? " 太字" : "";
+  return `${spec.fontSize}px${weight} = ${isLargeText(spec) ? "large text" : "通常文字"}`;
+}

package/src/layout/clearance-constants.ts

@@ -0,0 +1,47 @@
+/**
+ * Clearance / distance SSOT 定数 (world unit)。
+ *
+ * label × node / label × label / label × path の clearance と label × path 距離の
+ * 目標範囲を engine 内で SSOT 定義。 downstream (edges / collisions / visual-diagnostics / dragon
+ * gate) が本 module を import して同一値を使うことで、 threshold の食い違いを防ぐ。
+ *
+ * world unit = SVG viewBox 内の座標系単位。 実 DOM px は viewBox scale で 縮小 / 拡大される
+ * (px-projection 参照)。 gate 判定は px-projection でこれらの world 値を実測 scale に変換して
+ * 使う (pixel-perfect assertion)。
+ */
+
+/** node × edge-label ... 誤読を起こす重大事案、 32 world unit (edges.ts / collisions.ts SSOT) */
+export const CLEARANCE_NODE_LABEL = 32;
+
+/** lane-label × edge-label ... lane 見出しと edge label の近接判定、 24 world unit */
+export const CLEARANCE_LANE_LABEL = 24;
+
+/** edge-label × edge-label ... 2 label が近接して読みづらい、 36 world unit */
+export const CLEARANCE_LABEL_LABEL = 36;
+
+/** edge-path × edge-label ... path 線が label 文字を貫通する誤読、 14 world unit */
+export const CLEARANCE_PATH_LABEL = 14;
+
+/** label 箱 → path 最短距離の下限 (label が path に貼り付き) */
+export const DIST_LABEL_PATH_MIN = 14;
+
+/**
+ * label 箱 → path 最短距離の上限 (label が path から浮遊)。
+ *
+ * 「見た目の隙間」 の上限で、 軸 7 (`edge-label-proximity`) の warn 閾値がこの値を使う。
+ * engine 自身が置く label は 16 world 以内に収まり、 これを超えるのは著者が `labelOffset`
+ * で動かした場合に限る。
+ */
+export const DIST_LABEL_PATH_MAX = 80;
+
+/** label 位置 score の目標 path 距離 (routing v10 SSOT、 NORMAL 100 world = DOM ~25 px 相当) */
+export const TARGET_LABEL_PATH_DIST = 100;
+
+/** arrow tail / head の折れ角許容 (degree) */
+export const ARROW_ANGLE_MAX_DEG = 100;
+
+/** Fan-in / fan-out path 分散の slot 幅 (world unit) */
+export const FAN_GAP = 120;
+
+/** Detour path の gap = obstacle bottom / top からの余白 (routing v10.1 SSOT、 44 → 94 拡張) */
+export const DETOUR_GAP = 94;