@cardenelabs/cdl 0.82.0 → 0.102.0

package/src/kinds/quadrant.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { TONE, toneFill } from "../render/tone";
-import { measureTextWidth } from "../layout/text-width";
+import { measureTextWidth, 収める倍率 } from "../layout/text-width";
 import { resolveQuadrantData } from "../render/payload-binding";
 
 /**
@@ -10,6 +10,15 @@ import { resolveQuadrantData } from "../render/payload-binding";
  * layout = 中央十字線で 4 象限に分割、 各象限にほんのり色分け背景 + 象限 label、
  * item は象限内に大きめの card で配置、 軸両端に矢印 + label を配置。
  */
+/**
+ * 畳んだ段に出す文 (#915)。
+ *
+ * **数を文の中に入れる**。 「ほか」 だけでは何件あるか読めず、落としたのと変わらない。
+ */
+export function 畳んだ文(件数: number): string {
+  return `ほか ${件数} 件`;
+}
+
 export function QuadrantNode({
   node,
   active,
@@ -39,8 +48,16 @@ export function QuadrantNode({
   const ITEM_FONT = 13;
   const ITEM_PAD_X = 12;
   const ITEM_MIN_W = 48;
+  /** 座標で置いた項目の点の半径と、点と名前の間隔 */
+  const POINT_R = 5;
+  const POINT_GAP = 6;
+  /** 項目の補足の字。 名前より 1 段小さくして、読む順を名前から先にする (#931) */
+  const SUB_FONT = 10;
   const axisLabelPad = (text: string): number =>
-    Math.max(PAD_MIN, measureTextWidth(`← ${text}`, { fontSize: AXIS_LABEL_FONT, fontWeight: 700 }) + 12);
+    Math.max(
+      PAD_MIN,
+      measureTextWidth(`← ${text}`, { fontSize: AXIS_LABEL_FONT, fontWeight: 700 }) + 12,
+    );
   // 名前が長くても図そのものは残す。 上限を置かないと、 名前が箱の幅を超えた時に
   // 描く場所が無くなる (実測 = 幅 640 に 50 文字の名前を左右へ置くと canvasW が -143 になった)。
   // 名前は溢れるが、 読めない図を出すよりは良い。
@@ -60,11 +77,15 @@ export function QuadrantNode({
   const halfW = canvasW / 2;
   const halfH = canvasH / 2;
 
+  // 位置の決め方は 2 通りで、項目ごとにどちらか片方だけを使う (`QuadrantItemPayload`)。
+  // 座標を書いた項目は点として置き、書かなかった項目は今までどおり象限の中に積む
+  const 点で置く = data.items.filter((i) => i.at !== undefined);
+  const 積む = data.items.filter((i) => i.at === undefined);
   const itemsBy = {
-    topLeft: data.items.filter((i) => i.quadrant === "topLeft"),
-    topRight: data.items.filter((i) => i.quadrant === "topRight"),
-    bottomLeft: data.items.filter((i) => i.quadrant === "bottomLeft"),
-    bottomRight: data.items.filter((i) => i.quadrant === "bottomRight"),
+    topLeft: 積む.filter((i) => i.quadrant === "topLeft"),
+    topRight: 積む.filter((i) => i.quadrant === "topRight"),
+    bottomLeft: 積む.filter((i) => i.quadrant === "bottomLeft"),
+    bottomRight: 積む.filter((i) => i.quadrant === "bottomRight"),
   };
 
   // 4 象限の淡い背景。 色は共有の表から作る
@@ -95,10 +116,38 @@ export function QuadrantNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
-      <rect data-cdl-role="quadrant-bg" x={PAD_LEFT} y={PAD_TOP} width={halfW} height={halfH} {...quadrantColor.topLeft} />
-      <rect data-cdl-role="quadrant-bg" x={cx} y={PAD_TOP} width={halfW} height={halfH} {...quadrantColor.topRight} />
-      <rect data-cdl-role="quadrant-bg" x={PAD_LEFT} y={cy} width={halfW} height={halfH} {...quadrantColor.bottomLeft} />
-      <rect data-cdl-role="quadrant-bg" x={cx} y={cy} width={halfW} height={halfH} {...quadrantColor.bottomRight} />
+      <rect
+        data-cdl-role="quadrant-bg"
+        x={PAD_LEFT}
+        y={PAD_TOP}
+        width={halfW}
+        height={halfH}
+        {...quadrantColor.topLeft}
+      />
+      <rect
+        data-cdl-role="quadrant-bg"
+        x={cx}
+        y={PAD_TOP}
+        width={halfW}
+        height={halfH}
+        {...quadrantColor.topRight}
+      />
+      <rect
+        data-cdl-role="quadrant-bg"
+        x={PAD_LEFT}
+        y={cy}
+        width={halfW}
+        height={halfH}
+        {...quadrantColor.bottomLeft}
+      />
+      <rect
+        data-cdl-role="quadrant-bg"
+        x={cx}
+        y={cy}
+        width={halfW}
+        height={halfH}
+        {...quadrantColor.bottomRight}
+      />
 
       <rect
         data-cdl-role="quadrant-canvas"
@@ -112,32 +161,102 @@ export function QuadrantNode({
         rx={8}
       />
 
-      <line x1={cx} y1={PAD_TOP} x2={cx} y2={PAD_TOP + canvasH} stroke="var(--cdl-text-mute, #8a8678)" strokeWidth={1.5} />
-      <line x1={PAD_LEFT} y1={cy} x2={PAD_LEFT + canvasW} y2={cy} stroke="var(--cdl-text-mute, #8a8678)" strokeWidth={1.5} />
+      <line
+        x1={cx}
+        y1={PAD_TOP}
+        x2={cx}
+        y2={PAD_TOP + canvasH}
+        stroke="var(--cdl-text-mute, #8a8678)"
+        strokeWidth={1.5}
+      />
+      <line
+        x1={PAD_LEFT}
+        y1={cy}
+        x2={PAD_LEFT + canvasW}
+        y2={cy}
+        stroke="var(--cdl-text-mute, #8a8678)"
+        strokeWidth={1.5}
+      />
 
-      <text x={PAD_LEFT + halfW / 2} y={PAD_TOP + 22} fontSize={13} fontWeight={700} textAnchor="middle" fill={quadrantAccent.topLeft}>
+      <text
+        x={PAD_LEFT + halfW / 2}
+        y={PAD_TOP + 22}
+        fontSize={13}
+        fontWeight={700}
+        textAnchor="middle"
+        fill={quadrantAccent.topLeft}
+      >
         {data.quadrantLabels.topLeft}
       </text>
-      <text x={cx + halfW / 2} y={PAD_TOP + 22} fontSize={13} fontWeight={700} textAnchor="middle" fill={quadrantAccent.topRight}>
+      <text
+        x={cx + halfW / 2}
+        y={PAD_TOP + 22}
+        fontSize={13}
+        fontWeight={700}
+        textAnchor="middle"
+        fill={quadrantAccent.topRight}
+      >
         {data.quadrantLabels.topRight}
       </text>
-      <text x={PAD_LEFT + halfW / 2} y={PAD_TOP + canvasH - 12} fontSize={13} fontWeight={700} textAnchor="middle" fill={quadrantAccent.bottomLeft}>
+      <text
+        x={PAD_LEFT + halfW / 2}
+        y={PAD_TOP + canvasH - 12}
+        fontSize={13}
+        fontWeight={700}
+        textAnchor="middle"
+        fill={quadrantAccent.bottomLeft}
+      >
         {data.quadrantLabels.bottomLeft}
       </text>
-      <text x={cx + halfW / 2} y={PAD_TOP + canvasH - 12} fontSize={13} fontWeight={700} textAnchor="middle" fill={quadrantAccent.bottomRight}>
+      <text
+        x={cx + halfW / 2}
+        y={PAD_TOP + canvasH - 12}
+        fontSize={13}
+        fontWeight={700}
+        textAnchor="middle"
+        fill={quadrantAccent.bottomRight}
+      >
         {data.quadrantLabels.bottomRight}
       </text>
 
-      <text x={cx} y={PAD_TOP - 12} fontSize={12} fontWeight={700} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
+      <text
+        x={cx}
+        y={PAD_TOP - 12}
+        fontSize={12}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
         ↑ {data.yAxis.top}
       </text>
-      <text x={cx} y={PAD_TOP + canvasH + 24} fontSize={12} fontWeight={700} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
+      <text
+        x={cx}
+        y={PAD_TOP + canvasH + 24}
+        fontSize={12}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
         ↓ {data.yAxis.bottom}
       </text>
-      <text x={PAD_LEFT - 12} y={cy + 4} fontSize={AXIS_LABEL_FONT} fontWeight={700} textAnchor="end" fill="var(--cdl-text-dim, #5a6270)">
+      <text
+        x={PAD_LEFT - 12}
+        y={cy + 4}
+        fontSize={AXIS_LABEL_FONT}
+        fontWeight={700}
+        textAnchor="end"
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
         ← {data.xAxis.left}
       </text>
-      <text x={PAD_LEFT + canvasW + 12} y={cy + 4} fontSize={AXIS_LABEL_FONT} fontWeight={700} textAnchor="start" fill="var(--cdl-text-dim, #5a6270)">
+      <text
+        x={PAD_LEFT + canvasW + 12}
+        y={cy + 4}
+        fontSize={AXIS_LABEL_FONT}
+        fontWeight={700}
+        textAnchor="start"
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
         {data.xAxis.right} →
       </text>
 
@@ -164,39 +283,193 @@ export function QuadrantNode({
         // 象限の外へ置くより、 何も描かない方が図として正しい。
         const 枠の余地 = qHalfW;
         if (枠の余地 <= 0) return null;
-        const 枠の幅 = (title: string) =>
+        /*
+          枠の幅は **載せる行の広い方** で決める (#931)。 名前だけで決めると、名前より長い
+          補足が枠から出る。 行ごとに字の大きさと太さが違うので、文字列ではなく行の並びで受ける。
+        */
+        const 枠の幅 = (行ら: readonly { text: string; size: number; weight: number }[]) =>
           Math.min(
             枠の余地,
-            Math.max(ITEM_MIN_W, measureTextWidth(title, { fontSize: ITEM_FONT, fontWeight: 600 }) + ITEM_PAD_X * 2),
+            Math.max(
+              ITEM_MIN_W,
+              Math.max(
+                ...行ら.map((r) =>
+                  measureTextWidth(r.text, { fontSize: r.size, fontWeight: r.weight }),
+                ),
+              ) +
+                ITEM_PAD_X * 2,
+            ),
           );
+        /** その項目が枠に載せる行。 補足が空なら名前だけ */
+        const 行ら = (it: (typeof items)[number]) => {
+          const 補足 = (it.subtitle ?? "").trim();
+          return [
+            { text: it.title, size: ITEM_FONT, weight: 600 },
+            ...(補足 === "" ? [] : [{ text: 補足, size: SUB_FONT, weight: 500 }]),
+          ];
+        };
         const qHalfH = halfH - 60;
         const gap = 10;
         const rowH = 34;
         const maxRows = Math.max(1, Math.floor(qHalfH / (rowH + gap)));
-        return items.slice(0, maxRows).map((it, idx) => {
-          const py = qyStart + idx * (rowH + gap);
-          return (
-            <g key={`item-${it.id}`}>
-              <rect
-                data-cdl-role="quadrant-item"
-                data-cdl-unresolved={it.unresolved ? "true" : undefined}
-                x={qxStart}
-                y={py}
-                width={枠の幅(it.title)}
-                height={rowH}
-                rx={6}
-                fill="var(--cdl-node-fill, #ffffff)"
-                stroke={quadrantAccent[q]}
-                strokeWidth={1.5}
-              />
-              {/* 字間を 0 に固定する。 枠の幅は字幅の見積り (letterSpacing 0 前提) で決めるため、
-                  外から字間を継承すると見積りより名前が広がって枠から出る (#457 Round 4) */}
-              <text x={qxStart + ITEM_PAD_X} y={py + rowH / 2 + 5} fontSize={ITEM_FONT} fontWeight={600} letterSpacing={0} fill="var(--cdl-text, #1a1f2a)">
-                {it.title}
+        // 入りきらない件は **落とさずに畳む** (#915)。 落とすと、書いた項目が図に無い理由が
+        // 読めず、区画の厚みも実際より薄く出る。 半円ゲージが「その他」 に畳むのと同じ形。
+        //
+        // 名前を出すのは「置ける段数 - 1」 まで。 置ける段数が 1 の区画では名前を 1 件も
+        // 出さず、畳んだ段だけを出す = 名前 1 件と引き換えに残りが消えるより、件数が
+        // 正しいほうを採る。
+        const 畳む = items.length > maxRows;
+        const 名前を出す = 畳む ? items.slice(0, maxRows - 1) : items;
+        const 畳んだ件数 = items.length - 名前を出す.length;
+        return (
+          <g key={`q-${q}`}>
+            {名前を出す.map((it, idx) => {
+              const py = qyStart + idx * (rowH + gap);
+              const 幅 = 枠の幅(行ら(it));
+              const 補足 = (it.subtitle ?? "").trim();
+              // 枠は象限に収まる幅で頭打ちになるため、長い補足は枠に入らないことがある。
+              // 枠から出さずに字を縮める = 隣の項目や軸の名前に重なると両方読めなくなる
+              const 補足の字 =
+                SUB_FONT *
+                収める倍率(
+                  補足,
+                  { fontSize: SUB_FONT, fontWeight: 500 },
+                  Math.max(0, 幅 - ITEM_PAD_X * 2),
+                );
+              return (
+                <g key={`item-${it.id}`}>
+                  <rect
+                    data-cdl-role="quadrant-item"
+                    data-cdl-unresolved={it.unresolved ? "true" : undefined}
+                    x={qxStart}
+                    y={py}
+                    width={幅}
+                    height={rowH}
+                    rx={6}
+                    fill="var(--cdl-node-fill, #ffffff)"
+                    stroke={quadrantAccent[q]}
+                    strokeWidth={1.5}
+                  />
+                  {/* 字間を 0 に固定する。 枠の幅は字幅の見積り (letterSpacing 0 前提) で決めるため、
+                      外から字間を継承すると見積りより名前が広がって枠から出る (#457 Round 4) */}
+                  <text
+                    x={qxStart + ITEM_PAD_X}
+                    y={補足 === "" ? py + rowH / 2 + 5 : py + rowH / 2 - 2}
+                    fontSize={ITEM_FONT}
+                    fontWeight={600}
+                    letterSpacing={0}
+                    fill="var(--cdl-text, #1a1f2a)"
+                  >
+                    {it.title}
+                  </text>
+                  {補足 !== "" && (
+                    <text
+                      data-cdl-role="quadrant-item-subtitle"
+                      x={qxStart + ITEM_PAD_X}
+                      y={py + rowH / 2 + 11}
+                      fontSize={補足の字}
+                      fontWeight={500}
+                      letterSpacing={0}
+                      fill="var(--cdl-text-dim, #5a6270)"
+                    >
+                      {補足}
+                    </text>
+                  )}
+                </g>
+              );
+            })}
+            {畳む ? (
+              /*
+                畳んだ段は名前の段と見た目を分ける。 同じにすると「ほか 3 件」 という名前の
+                項目があるように読める。 枠を持たず、点線の下線と薄い字で「続きがある」 ことを表す。
+              */
+              <g key={`more-${q}`}>
+                <line
+                  data-cdl-role="quadrant-more-rule"
+                  x1={qxStart}
+                  y1={qyStart + 名前を出す.length * (rowH + gap) + rowH / 2 + 9}
+                  x2={qxStart + 枠の幅([{ text: 畳んだ文(畳んだ件数), size: ITEM_FONT, weight: 600 }])}
+                  y2={qyStart + 名前を出す.length * (rowH + gap) + rowH / 2 + 9}
+                  stroke={quadrantAccent[q]}
+                  strokeWidth={1}
+                  strokeDasharray="3 3"
+                  strokeOpacity={0.6}
+                />
+                <text
+                  data-cdl-role="quadrant-more"
+                  x={qxStart + ITEM_PAD_X}
+                  y={qyStart + 名前を出す.length * (rowH + gap) + rowH / 2 + 5}
+                  fontSize={ITEM_FONT}
+                  fontWeight={600}
+                  letterSpacing={0}
+                  fill={quadrantAccent[q]}
+                >
+                  {畳んだ文(畳んだ件数)}
+                </text>
+              </g>
+            ) : null}
+          </g>
+        );
+      })}
+
+      {/*
+        座標を書いた項目。 点と名前で描く。
+
+        名前は点の右に置くが、右半分の項目は左に置く = 右に置くと描画域の外へ出る。
+        名前の位置を点との間隔だけで決めると、右端の項目が枠を越える (軸の名前と同じ理屈)。
+      */}
+      {点で置く.map((it) => {
+        const at = it.at!;
+        const px = PAD_LEFT + at.x * canvasW;
+        // y は上向き。 SVG は下向きなので 1 から引く (`QuadrantAt`)
+        const py = PAD_TOP + (1 - at.y) * canvasH;
+        const 右寄り = at.x >= 0.5;
+        const 名前のx = px + (右寄り ? -(POINT_R + POINT_GAP) : POINT_R + POINT_GAP);
+        const 寄せ = 右寄り ? "end" : "start";
+        const 補足 = (it.subtitle ?? "").trim();
+        return (
+          <g key={`at-${it.id}`} data-cdl-unresolved={it.unresolved ? "true" : undefined}>
+            <circle
+              data-cdl-role="quadrant-point"
+              cx={px}
+              cy={py}
+              r={POINT_R}
+              fill={quadrantAccent[it.quadrant]}
+            />
+            <text
+              data-cdl-role="quadrant-point-label"
+              x={名前のx}
+              y={補足 === "" ? py + 4 : py - 1}
+              fontSize={ITEM_FONT}
+              fontWeight={600}
+              letterSpacing={0}
+              textAnchor={寄せ}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {it.title}
+            </text>
+            {/*
+              補足は名前の下に置く (#931)。 x と寄せ方を名前と揃えて 2 行を縦に並べる。
+
+              幅は測らない。 点の横は箱を持たないので収める先が無く、名前と同じ扱いにする
+              (名前は溢れても図を残す = この kind が軸の名前について採っている判断と同じ)。
+            */}
+            {補足 !== "" && (
+              <text
+                data-cdl-role="quadrant-point-subtitle"
+                x={名前のx}
+                y={py + 11}
+                fontSize={SUB_FONT}
+                fontWeight={500}
+                letterSpacing={0}
+                textAnchor={寄せ}
+                fill="var(--cdl-text-dim, #5a6270)"
+              >
+                {補足}
               </text>
-            </g>
-          );
-        });
+            )}
+          </g>
+        );
       })}
     </g>
   );

package/src/kinds/shape-blockchain.tsx

@@ -4,7 +4,7 @@ import {
   fitArt,
   labelPlan,
   shapeRegion,
-  textWidth,
+  幅の倍率,
   打ち消しの倍率,
   絵の中の字の幅,
   type ArtExtent,
@@ -39,6 +39,8 @@ const BLOCK_W = 240;
 const BLOCK_H = 220;
 /** `shape-blockchain-block` の字の指定 (#871 で打ち消しの計算に使うため定数へ出した) */
 const 見出しの字 = 13;
+/** 見出しの帯の右に置く肩書の字 (#941)。 題より小さくして、題の読みを主に保つ */
+const 肩書の字 = 10;
 const 名の字 = 11;
 const 値の字 = 11;
 /** 5 行を並べる間隔と、見出しが乗る帯の高さ。 打ち消しの上限をここから出す (#871) */
@@ -129,21 +131,6 @@ function blockchainNodeExtent(strokeWidth: number): ArtExtent {
   return { 上: 縦, 下: 縦, 左: 横, 右: 横 };
 }
 
-/**
- * 名前の行を箱の幅に収める倍率。
- *
- * 字間は字の大きさに追随しないため、 大きさだけを縮めても幅は `字間 x 字数` より狭く
- * ならない。 大きさと字間を同じ倍率で縮めると、 両項が揃って縮むので幅が倍率に比例する。
- *
- * 収まっている間は 1 を返す = 箱が広い時の見え方を変えない。
- */
-function 幅の倍率(text: string, size: number, letterSpacing: number, 幅: number): number {
-  if (!(幅 > 0) || !(size > 0)) return 1;
-  // 階級表を二重に持つと、 片方を直した時にもう片方だけ古くなる。
-  const 実幅 = textWidth(text, size, letterSpacing);
-  return 実幅 > 幅 ? 幅 / 実幅 : 1;
-}
-
 /**
  * 名前の塊を描く。 位置と大きさは `labelPlan` が決める (箱の下端から積み上げる、 #433)。
  */
@@ -373,8 +360,26 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
     };
   });
 
+  /*
+   * 見出しの帯の右に肩書を置く (#941)。 書かなければ 1 文字も描かない = 帯は題と丸だけの
+   * 今までの見え方に戻る。 課題の札と違って控えを持たないのは、連なりの塊の肩書が
+   * 「その塊が何か」 を言う語で、控えを置くと書いてもいない分類が図に出るため。
+   *
+   * **題の使える幅から肩書の分を引く**。 引かないと長い題と肩書が帯の中で重なる。
+   * 肩書の幅は帯の残りの 3 分の 1 を上限にする = 上限を置かないと、長い肩書が帯を占めて
+   * 題が 1 文字も読めなくなる。
+   */
+  const 肩書 = 渡された(node.eyebrow);
   // 見出しは右上の丸 (半径 5.5、 中心が bw - 16) に掛からないところまで
-  const 見出しの幅 = bw - 14 - 30;
+  const 帯の残り = bw - 14 - 30;
+  const 肩書の隙間 = 8;
+  // 上限は帯の残りの半分。 長い肩書は **切らずに字を縮める** = 分類を表す語なので、
+  // 末尾を落とすと何の分類か読めなくなる (`台帳…`)。 縮めた後の幅は上限ちょうどになる
+  const 肩書の上限 = (帯の残り - 肩書の隙間) / 2;
+  const 肩書の倍率 = 肩書 === "" ? 1 : 幅の倍率(肩書, 肩書の字, 0, 肩書の上限);
+  const 肩書の指定 = 肩書の字 * 肩書の倍率;
+  const 肩書の幅 = 肩書 === "" ? 0 : 字の幅(肩書, 肩書の指定);
+  const 見出しの幅 = 帯の残り - (肩書 === "" ? 0 : 肩書の幅 + 肩書の隙間);
   /*
    * 絵を **倍率を受け取ってから** 組む (#871)。 縮んだ分を字の指定で打ち消す。
    *
@@ -392,6 +397,10 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
    */
   const 打ち消す字ら: 打ち消す字[] = [
     { text: 見出し, size: 見出しの字, 帯: { 幅: 見出しの幅, 高さ: 見出しの帯 } },
+    // 肩書も帯に入れる = 入れないと打ち消しの倍率が肩書を見ずに決まり、帯から横へ出る
+    ...(肩書 === ""
+      ? []
+      : [{ text: 肩書, size: 肩書の指定, 帯: { 幅: 肩書の幅, 高さ: 見出しの帯 } }]),
     ...fields.flatMap((f): 打ち消す字[] => [
       { text: f.label, size: 名の字, 帯: { 幅: bw - 28, 高さ: 行の間隔 } },
       {
@@ -404,6 +413,7 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
   const art = (倍率: number): JSX.Element => {
     const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
     const 題の大きさ = 見出しの字 * 倍;
+    const 肩書の大きさ = 肩書の指定 * 倍;
     const 名の大きさ = 名の字 * 倍;
     const 値の大きさ = 値の字 * 倍;
     return (
@@ -416,6 +426,22 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
       <text data-cdl-role="blockchain-block-title" data-cdl-counter-scaled="1" x={x + 14} y={y + 22} fontSize={題の大きさ} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
         {幅で切る(見出し, 題の大きさ, 見出しの幅, 字の幅)}
       </text>
+      {肩書 !== "" && (
+        <text
+          data-cdl-role="blockchain-block-eyebrow"
+          data-cdl-counter-scaled="1"
+          x={x + bw - 30}
+          y={y + 21}
+          fontSize={肩書の大きさ}
+          fontWeight={600}
+          textAnchor="end"
+          fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
+          fill="#ffffff"
+          fillOpacity={0.78}
+        >
+          {肩書}
+        </text>
+      )}
       <circle cx={x + bw - 16} cy={y + 16} r={5.5} fill="#7cd88f" stroke="#ffffff" strokeWidth={1.5} />
       {/* fields */}
       {fields.map((f, i) => (
@@ -499,7 +525,13 @@ export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
             <text data-cdl-counter-scaled="0" x={bx + blockW / 2} y={cy + 8} fontSize={14} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)"} fontFamily="Georgia, serif">
               #
             </text>
-            <text data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy + 22} fontSize={CHAIN_HASH_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"} opacity={0.9}>
+            {/*
+              末尾の `…` は **書いてあるもの** で、engine が幅に入らず切った印ではない (#917)。
+              描いた結果を読む側からは両者が同じ形に見えるため、書いてある方に印を付けて
+              見分けられるようにする。 印を付け忘れると「切れた名前」 として報告されるので、
+              間違えた時は調べれば分かる側に倒れる。
+            */}
+            <text data-cdl-ellipsis="written" data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy + 22} fontSize={CHAIN_HASH_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"} opacity={0.9}>
               0x…
             </text>
           </g>

package/src/kinds/shape-commerce.tsx

@@ -349,13 +349,36 @@ export function ShapeWarehouseNode({ node, active, lang }: ShapeProps): JSX.Elem
 }
 
 /** shape-online-shop = O-A 大 shopping cart (縦長 260x320、 中身なし + badge なし = カート単体 + 車輪 + ハンドル + 籠 grid) */
+/**
+ * 買い物かごの絵の、中心から一番外まで出る距離 (#921)。
+ *
+ * 絵の中と、絵を中心へ置く計算の両方がこの値を読む。 別々に持つと片方だけ古くなり、
+ * ハンドルを伸ばした時に絵だけがずれる。
+ */
+/** ハンドルの握り (丸の中心) が中心から左へ出る距離 */
+const HANDLE_GRIP_X = 118;
+/** ハンドルの握りの丸の半径 */
+const HANDLE_GRIP_R = 4;
+/** 影の楕円が中心から左右へ出る距離。 絵の中で一番右まで来る部品 */
+const CART_SHADOW_RX = 80;
+
 export function ShapeOnlineShopNode({ node, active }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
-  const cx = r.cx;
   const cy = r.cy + 10;
   const scale = Math.min(r.availW / 260, r.availH / 320);
   const s = scale * 0.9;
+  /*
+   * 絵の横の広がりは左右で違う (#921)。 ハンドルは左へ 122 出るのに、一番右まで来る影は
+   * 80 しか出ない。 `r.cx` をそのまま絵の中心に使うと、描いたものの中心が
+   * `(122 - 80) / 2 = 21` だけ左へずれる (実測 = 節の中心 220 に対し絵の中心 205)。
+   *
+   * **数を直に書かず、絵が使っている値から導く**。 ハンドルや影の大きさを変えた時に、
+   * 中心の計算だけが古くなるのを防ぐ。
+   */
+  const 左へ出る = HANDLE_GRIP_X + HANDLE_GRIP_R;
+  const 右へ出る = CART_SHADOW_RX;
+  const cx = r.cx + ((左へ出る - 右へ出る) / 2) * s;
   const accent = "var(--cdl-tone-accent, #2d6a8f)";
   const accentDark = "#1a4a68";
   const accentDarker = "#0f3450";
@@ -372,11 +395,11 @@ export function ShapeOnlineShopNode({ node, active }: ShapeProps): JSX.Element {
   return (
     <g>
       {/* drop shadow */}
-      <ellipse cx={cx} cy={wheelY + 22 * s} rx={80 * s} ry={5 * s} fill={frame.stroke} opacity={0.25} stroke="none" />
+      <ellipse cx={cx} cy={wheelY + 22 * s} rx={CART_SHADOW_RX * s} ry={5 * s} fill={frame.stroke} opacity={0.25} stroke="none" />
       {/* ハンドル (左上から下降) */}
-      <path d={`M ${cx - 118 * s} ${basketTopY - 60 * s} L ${cx - 90 * s} ${basketTopY - 60 * s} L ${cx - 80 * s} ${basketTopY - 30 * s} L ${basketTopL} ${basketTopY}`} fill="none" stroke={accent} strokeWidth={6 * s} strokeLinecap="round" strokeLinejoin="round" />
+      <path d={`M ${cx - HANDLE_GRIP_X * s} ${basketTopY - 60 * s} L ${cx - 90 * s} ${basketTopY - 60 * s} L ${cx - 80 * s} ${basketTopY - 30 * s} L ${basketTopL} ${basketTopY}`} fill="none" stroke={accent} strokeWidth={6 * s} strokeLinecap="round" strokeLinejoin="round" />
       {/* ハンドル grip 端 (円) */}
-      <circle cx={cx - 118 * s} cy={basketTopY - 60 * s} r={4 * s} fill={accent} stroke={accentDark} strokeWidth={1.5} />
+      <circle cx={cx - HANDLE_GRIP_X * s} cy={basketTopY - 60 * s} r={HANDLE_GRIP_R * s} fill={accent} stroke={accentDark} strokeWidth={1.5} />
       {/* 籠本体 (台形) */}
       <path
         data-cdl-role="node-body"