@cardenelabs/cdl 0.5.0

package/src/render/edges.tsx

@@ -0,0 +1,318 @@
+import type { JSX } from "react";
+import type { LaidEdge } from "../types";
+import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
+import { hasTone, toneColor } from "./tone";
+import { EDGE_LABEL_TEXT, fontFamilyAttr, type EdgeLabelLine } from "../label-text";
+import { interpolate, pathSubpath, resolveNumericAttr, shrinkPathEnd } from "./utils";
+
+/**
+ * 不透明度が 1 の行では属性自体を出さない。 SSOT (`EDGE_LABEL_TEXT`) を 1 未満に変えれば
+ * 描画にも必ず現れる = 検査が読む値と描かれる値が食い違わない。
+ */
+export function opacityAttr(opacity: number): number | undefined {
+  // `opacity || undefined` と書いてはいけない。 0 は falsy なので完全に透明な指定が
+  // 「不透明度の指定なし」 = 不透明に化ける。 比較で判定する。
+  return opacity < 1 ? opacity : undefined;
+}
+
+function labelTextOpacity(line: EdgeLabelLine): number | undefined {
+  return opacityAttr(EDGE_LABEL_TEXT[line].opacity);
+}
+
+export function CdlEdgeView({
+  edge,
+  active,
+  progress,
+  stateValues,
+}: {
+  edge: LaidEdge;
+  active: boolean;
+  progress: number;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
+  const color = toneColor(edge.tone);
+  // 光っていない edge も tone の色で描く。 以前は一律の灰色に落としていたため、 何も光っていない
+  // 静的な図では全 edge が同じ色になり、 因果の向き (警戒 = 赤 / 良好 = 緑) が線から読めなかった。
+  // 光っている / いないの区別は、 実線は太さ (5 対 2.5) と線種 (実線対破線)、 点線は太さ (5 対 4)
+  // と進行点の粒子が担うので、 色で区別する必要はない。
+  // 矢頭は大きさだけ従来通り分ける (光っている 14 / いない 10)。
+  //
+  // 不透明度は光っていない側を 0.9 に置く。 0.5 では実効色が紙に寄りすぎて、 色が付いても線を
+  // 追えない。 0.9 という下限は利用側が色をどこまで濃くできるかで決まる = cdl の既定の TONE は
+  // 紙 (#fcf8ee / #f8ecd0) に対してどの不透明度でも 4.5:1 に届かない (0.9 で 2.39-4.53、
+  // 1.0 でも 2.92-5.55)。 dragon は edge 用に濃くした色 (#0063a1 等) を CSS で当てており、
+  // その色なら 0.9 で 4.51-4.92 と 4.5:1 を満たす (0.8 では 3.69-4.04 で届かない)。
+  // 実線と点線で同じ組を使い、 光らせた側が薄くなる逆転を作らない。
+  const marker = hasTone(edge.tone)
+    ? `cdl-arrow-${edge.tone}${active ? "" : "-sm"}`
+    : "cdl-arrow-muted";
+
+  const style = edge.style ?? "solid";
+  const isDotted = style === "dotted-flow";
+  const isPassThrough = isDotted && Boolean(edge.dThrough);
+
+  const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
+  const glowPathId = `cdl-edge-${edge.id}`;
+  // particle path = visible path に統一 (verify:dom で particle-out-of-path 19 件を解消)。
+  // 旧実装は passthrough edge で dThrough (node center 直線) を particle path にして visible path
+  // (orthogonal routing) と乖離させていたが、 視覚的にも整合性的にも問題なので統一。
+  // 貫通効果が必要な場合は別途 phase activation で表現する。
+  const glowPathD = edge.d;
+  void isPassThrough;
+
+  return (
+    <g
+      data-cdl-edge={edge.id}
+      data-cdl-from={edge.from}
+      data-cdl-to={edge.to}
+      data-cdl-active={active ? "true" : "false"}
+      data-cdl-path-d={edge.d}
+      data-cdl-label-x={edge.labelX}
+      data-cdl-label-y={edge.labelY}
+      data-cdl-edge-label={edge.label}
+      data-cdl-edge-sub={edge.sub ?? ""}
+      data-cdl-tone={edge.tone}
+    >
+      {isDotted ? (
+        <g>
+          <path id={glowPathId} d={glowPathD} fill="none" stroke="none" />
+          <path
+            data-cdl-role="edge-line"
+            d={lineDotsD}
+            fill="none"
+            stroke={color}
+            strokeOpacity={active ? 0.95 : 0.9}
+            strokeWidth={active ? 5 : 4}
+            strokeDasharray="0 18"
+            strokeLinecap="round"
+            style={{
+              transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease",
+            }}
+          />
+          {active && !isPassThrough && <EdgeGlowCircles color={color} edgeId={edge.id} />}
+        </g>
+      ) : (
+        <SolidEdgePath
+          edge={edge}
+          active={active}
+          progress={progress}
+          color={color}
+          marker={marker}
+          stateValues={stateValues}
+        />
+      )}
+      {active && style === "solid" && (
+        <path
+          data-cdl-role="edge-glow"
+          d={edge.d}
+          fill="none"
+          stroke={color}
+          strokeOpacity={0.15}
+          strokeWidth={14}
+          strokeLinecap="round"
+        />
+      )}
+    </g>
+  );
+}
+
+/**
+ * SolidEdgePath ... solid edge の path を progress 連動で「phase 開始時 0 → 進行と共に伸びる」 動きで描画。
+ * pathSubpath(d, progress) で d 自体を progress * totalLength の地点まで切り詰めて、
+ * SVG <path d=... markerEnd=...> で marker を path 末端 (= 現在進行位置) に atomic 配置。
+ */
+function SolidEdgePath({
+  edge,
+  active,
+  progress,
+  color,
+  marker,
+  stateValues,
+}: {
+  edge: LaidEdge;
+  active: boolean;
+  progress: number;
+  color: string;
+  marker: string;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
+  const visibleD = active ? pathSubpath(edge.d, progress) : edge.d;
+  // signal binding: widthBind / strokeBind / dashOffsetBind (CAR edge-signal-binding)
+  const defaultWidth = active ? 5 : 2.5;
+  const boundWidth = edge.widthBind && stateValues
+    ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth)
+    : defaultWidth;
+  const boundStroke = edge.strokeBind && stateValues
+    ? interpolate(edge.strokeBind, stateValues)
+    : color;
+  const boundDashOffset = edge.dashOffsetBind && stateValues
+    ? resolveNumericAttr(edge.dashOffsetBind, stateValues, 0)
+    : undefined;
+  // dashoffset は dasharray 前提、 signal 経由の流れる線を出したい時は "6 6" 等
+  const dashArray = active
+    ? boundDashOffset !== undefined ? "8 6" : undefined
+    : "4 5";
+  return (
+    <path
+      data-cdl-role="edge-line"
+      d={visibleD}
+      fill="none"
+      stroke={boundStroke}
+      strokeOpacity={active ? 0.95 : 0.9}
+      strokeWidth={boundWidth}
+      strokeDasharray={dashArray}
+      strokeDashoffset={boundDashOffset}
+      strokeLinecap="round"
+      markerEnd={`url(#${marker})`}
+      style={{
+        transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease",
+      }}
+    />
+  );
+}
+
+/**
+ * EdgeGlowCircles ... 進行点 glow 3 重円 (28/18/11px) を mpath で path 沿い移動。
+ */
+function EdgeGlowCircles({ color, edgeId }: { color: string; edgeId: string }): JSX.Element {
+  const ref = `#cdl-edge-${edgeId}`;
+  return (
+    <g data-cdl-particle={edgeId} data-cdl-particle-path-ref={ref}>
+      <circle r={28} fill={color}>
+        <animateMotion dur="2s" begin="-1s" repeatCount="indefinite" rotate="auto">
+          <mpath href={ref} />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          values="0;0.18;0.18;0"
+          keyTimes="0;0.05;0.95;1"
+          dur="2s"
+          begin="-1s"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle r={18} fill={color}>
+        <animateMotion dur="2s" begin="-1s" repeatCount="indefinite" rotate="auto">
+          <mpath href={ref} />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          values="0;0.45;0.45;0"
+          keyTimes="0;0.05;0.95;1"
+          dur="2s"
+          begin="-1s"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle r={11} fill={color}>
+        <animateMotion dur="2s" begin="-1s" repeatCount="indefinite" rotate="auto">
+          <mpath href={ref} />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          values="0;1;1;0"
+          keyTimes="0;0.05;0.95;1"
+          dur="2s"
+          begin="-1s"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </g>
+  );
+}
+
+/** dotted-through edge の 進行点 glow を 2nd pass で描画 (粒子が node を貫通する Legacy 表現) */
+export function CdlEdgeGlowView({
+  edge,
+  active,
+}: {
+  edge: LaidEdge;
+  active: boolean;
+}): JSX.Element | null {
+  if (!active) return null;
+  const color = toneColor(edge.tone);
+  return <EdgeGlowCircles color={color} edgeId={edge.id} />;
+}
+
+/** edge の label box を最前面 (nodes より後) で描画する 2 pass 設計の component */
+export function CdlEdgeLabelView({
+  edge,
+  active,
+}: {
+  edge: LaidEdge;
+  active: boolean;
+}): JSX.Element | null {
+  // routing v9 = 空 label / 空 sub の edge は DOM 描画自体を skip、
+  // collisions.ts 側 (bbox 生成 skip、 CAR-430 で SSOT 統一) と対称に render 層でも noop。
+  // 空 label でも rect + text で 12.5x12.5 の小 marker が残り、 dragon sweep で
+  // node bbox と数十 px² の実測 overlap を生む (mind-demo 61px² 事象)。
+  if (!hasRenderedLabel(edge)) return null;
+  const color = toneColor(edge.tone);
+  // SSOT = spec.ts の computeLabelBBoxWorld (CAR-431 で render / layout / predict-bbox 3 箇所の
+  // bbox 計算 drift を解消)。 pill h / w / padding / boxLeftX / boxTopY は本 helper 経由で取得、
+  // <g transform="translate(labelX, labelY)"> 内 rect は相対座標なので world x/y を helper から
+  // 引き算して rect x/y に渡す。
+  const bbox = computeLabelBBoxWorld(edge);
+  const boxW = bbox.w;
+  const boxH = bbox.h;
+  const boxLeftX = bbox.x - edge.labelX;
+  const boxTopY = bbox.y - edge.labelY;
+  const anchor = edge.labelAnchor;
+  const textX = anchor === "start" ? LABEL_PILL_PAD_X : anchor === "end" ? -LABEL_PILL_PAD_X : 0;
+  // 2 行 label の text y 座標。 CAR-581 で pill 中心 = labelY 対称化に統一、 main / sub 行を pill
+  // 中心 (translate(labelX, labelY) の原点) から上下均等に配置する:
+  //   sub あり = line1Y = -6 (main text baseline を中心より上) / line2Y = 18 (sub text baseline を中心より下)
+  //   sub なし = line1Y = 6 (main text 単独、 baseline 調整で中心近傍)
+  const line1Y = edge.sub ? -6 : 6;
+  const line2Y = 18;
+
+  return (
+    <g
+      transform={`translate(${edge.labelX} ${edge.labelY})`}
+      data-cdl-edge-label-for={edge.id}
+      data-cdl-edge-label-text={edge.label}
+      data-cdl-edge-sub-text={edge.sub ?? ""}
+    >
+      <rect
+        data-cdl-role="edge-label-bg"
+        x={boxLeftX}
+        y={boxTopY}
+        width={boxW}
+        height={boxH}
+        rx={10}
+        fill="var(--cdl-label-bg, #ffffff)"
+        stroke={active ? color : "var(--cdl-divider, #d4d4d8)"}
+        strokeOpacity={active ? 0.9 : 0.55}
+        strokeWidth={1.5}
+        opacity={active ? 1 : 0.92}
+      />
+      <text
+        data-cdl-role="edge-label"
+        x={textX}
+        y={line1Y}
+        fontSize={EDGE_LABEL_TEXT.main.fontSize}
+        fontWeight={EDGE_LABEL_TEXT.main.fontWeight}
+        textAnchor={anchor}
+        fill={active ? color : "var(--cdl-text-dim, #5a6270)"}
+        opacity={labelTextOpacity("main")}
+      >
+        {edge.label}
+      </text>
+      {edge.sub && (
+        <text
+          data-cdl-role="edge-label"
+          x={textX}
+          y={line2Y}
+          fontSize={EDGE_LABEL_TEXT.sub.fontSize}
+          fontWeight={EDGE_LABEL_TEXT.sub.fontWeight}
+          textAnchor={anchor}
+          fill={active ? color : "var(--cdl-text-dim, #5a6270)"}
+          opacity={labelTextOpacity("sub")}
+          style={{ fontFamily: fontFamilyAttr("sub") }}
+        >
+          {edge.sub}
+        </text>
+      )}
+    </g>
+  );
+}

package/src/render/header.tsx

@@ -0,0 +1,146 @@
+import type { JSX } from "react";
+import type { CdlPhase } from "../types";
+
+export function CdlHeader({
+  topic,
+  phases,
+  currentPhase,
+  phaseIdx,
+  stateValues,
+  states,
+  onJumpPhase,
+  headingLevel = 3,
+}: {
+  topic: string;
+  phases: CdlPhase[];
+  currentPhase: CdlPhase;
+  phaseIdx: number;
+  stateValues: Record<string, string>;
+  states: { id: string; initial: number | string }[];
+  onJumpPhase: (idx: number) => void;
+  /** phase title 描画時の heading tag level (2 | 3 | 4)、 default 3 で従来動作維持。
+   * downstream で h1 直後に配置する場合は 2、 h2 直後なら 3 (default)、 h3 直後なら 4。 */
+  headingLevel?: 2 | 3 | 4;
+}): 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>
+        <div className="ml-auto flex items-center gap-1.5">
+          {phases.map((p, idx) => {
+            const active = idx === phaseIdx;
+            const done = idx < phaseIdx;
+            return (
+              <button
+                key={p.id}
+                type="button"
+                onClick={() => onJumpPhase(idx)}
+                aria-current={active ? "step" : undefined}
+                aria-label={`phase ${idx + 1}${p.title ? `: ${p.title}` : ""}`}
+                className="flex items-center gap-1.5 bg-transparent p-0"
+                style={{ cursor: "pointer", border: 0 }}
+              >
+                <span
+                  className="inline-block transition-all duration-300"
+                  style={{
+                    width: active ? 22 : 8,
+                    height: 8,
+                    borderRadius: 4,
+                    background: active ? "var(--cdl-text-accent, #2d6a8f)" : done ? "color-mix(in srgb, var(--cdl-text-accent, #2d6a8f) 50%, transparent)" : "var(--cdl-divider, #d4d4d8)",
+                  }}
+                />
+              </button>
+            );
+          })}
+          <span className="ml-2 text-[11px] font-semibold text-[color:var(--cdl-text-dim,#5a6270)]">
+            {phaseIdx + 1} / {phases.length}
+          </span>
+        </div>
+      </div>
+      <div className="grid items-start gap-6 sm:grid-cols-[1fr_auto]">
+        <div className="space-y-2">
+          <div className="flex items-baseline gap-3">
+            <span
+              className="grid h-8 w-8 place-items-center rounded-full text-xs font-bold text-white"
+              style={{
+                background: "linear-gradient(135deg, var(--cdl-text-accent, #2d6a8f) 0%, var(--cdl-tone-accent-deep, #1f4d6e) 100%)",
+                boxShadow: "0 2px 4px color-mix(in srgb, var(--cdl-text-accent, #2d6a8f) 30%, transparent)",
+              }}
+            >
+              {String(phaseIdx + 1).padStart(2, "0")}
+            </span>
+            <HeadingTag className="text-xl font-bold text-[color:var(--cdl-text,#1a1f2a)] sm:text-2xl">{currentPhase.title}</HeadingTag>
+          </div>
+          <p className="max-w-2xl text-sm leading-relaxed text-[color:var(--cdl-text-dim,#5a6270)]">{currentPhase.body}</p>
+        </div>
+        {states.length > 0 && (
+          <StateDiffCard states={states} stateValues={stateValues} badge={currentPhase.badge} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StateDiffCard({
+  states,
+  stateValues,
+  badge,
+}: {
+  states: { id: string; initial: number | string }[];
+  stateValues: Record<string, string>;
+  badge?: string;
+}): JSX.Element {
+  return (
+    <div
+      className="rounded-[14px] px-4 py-3 text-xs"
+      style={{
+        background: "var(--cdl-label-bg, #ffffff)",
+        border: "1px solid var(--cdl-divider, #d4d4d8)",
+      }}
+    >
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <span className="font-bold tracking-wider text-[color:var(--cdl-text-dim,#5a6270)]">このステップの差分</span>
+        {badge && (
+          <span
+            className="rounded-full px-2 py-0.5 text-[10px] font-bold"
+            style={{
+              background: "color-mix(in srgb, var(--cdl-text-accent, #2d6a8f) 10%, transparent)",
+              color: "var(--cdl-text-accent, #2d6a8f)",
+            }}
+          >
+            {badge}
+          </span>
+        )}
+      </div>
+      <table className="w-full" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+        <thead>
+          <tr className="text-[10px] tracking-wider" style={{ color: "var(--cdl-text-mute, #8a8678)" }}>
+            <th className="pb-1 text-left">変数</th>
+            <th className="pb-1 text-right">初期</th>
+            <th className="pb-1 text-right">現在</th>
+          </tr>
+        </thead>
+        <tbody style={{ color: "var(--cdl-text, #1a1f2a)" }}>
+          {states.map((s) => {
+            const initial = String(s.initial);
+            const current = stateValues[s.id] ?? initial;
+            const changed = initial !== current;
+            return (
+              <tr key={s.id}>
+                <td className="py-1 text-left text-[12px]">{s.id}</td>
+                <td className="py-1 text-right text-[12px]" style={{ color: "var(--cdl-text-mute, #8a8678)" }}>{initial}</td>
+                <td
+                  className="py-1 text-right text-[13px] font-bold"
+                  style={{ color: changed ? "var(--cdl-text-accent, #2d6a8f)" : "var(--cdl-text, #1a1f2a)" }}
+                >
+                  {current}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}