mock: クラスターを選んでキーを足すと、そのクラスターに新しい行を作る(T-30 単位6)

これまではクラスターを1つのノードとして扱い、その右隣(親の中)に足していた。
クラスターの中に新しい行を作り、その左端に置く。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XsamNKrWY3obJwR746oQRq

mock/e2e/phy.spec.ts

@@ -617,3 +617,23 @@ test("クラスター内でキーを足すと、足したキーを選ぶ", async
   await expect(page.locator(`[data-sel-id="${added}"]`)).toHaveCount(1);
   await expect(page.locator("[data-sel-id]")).toHaveCount(1);
 });
+
+test("クラスターを選んでキーを足すと、そのクラスターに新しい行を作る", async ({ page }) => {
+  const cluster = await makeCluster(page);
+  const clusterId = await cluster.getAttribute("data-node-id");
+  await page.locator(`[data-tree-id="${clusterId}"]`).first().click();
+  const clusterKeys = cluster.locator('[data-node-type="key"]');
+  const before = await clusterKeys.evaluateAll((es) => es.map((e) => e.getAttribute("data-node-id")));
+  const boxes = await Promise.all(before.map((id) => page.locator(`[data-node-id="${id}"]`).boundingBox()));
+  await page.getByRole("button", { name: "キーを足す" }).click();
+  await expect(clusterKeys).toHaveCount(3);
+  const after = await clusterKeys.evaluateAll((es) => es.map((e) => e.getAttribute("data-node-id")));
+  const added = after.find((id) => !before.includes(id));
+  await expect(page.locator(`[data-sel-id="${added}"]`)).toHaveCount(1);
+  const box = (await page.locator(`[data-node-id="${added}"]`).boundingBox())!;
+  // The cluster holds two keys of the first row, 1U apart; the new row starts 1U below its left end.
+  const [left, right] = [...boxes].sort((a, b) => a!.x - b!.x);
+  const unit = right!.x - left!.x;
+  expect(Math.abs(box.x - left!.x)).toBeLessThan(1);
+  expect(Math.abs(box.y - (left!.y + unit))).toBeLessThan(1);
+});

mock/src/ui/phy/usePhyCommands.ts

@@ -128,7 +128,13 @@ export function usePhyCommands(options: Options) {
 
   function keyAdd() {
     const chosen = options.node(options.selected.value.at(-1) || "");
-    const parent = chosen ? options.selectedContainer(chosen.id) : insertionParent();
+    // A selected cluster receives a new row inside it, like an empty selection inside the focus.
+    const parent =
+      chosen?.type === "cluster"
+        ? chosen.id
+        : chosen
+          ? options.selectedContainer(chosen.id)
+          : insertionParent();
     const keys = nodesInContainer(parent).flatMap((node) =>
       node.type === "key" ? [{ id: node.id, x: node.transform.x, y: node.transform.y, ...node.size }] : [],
     );
@@ -137,7 +143,7 @@ export function usePhyCommands(options: Options) {
     const { x, y } =
       chosen?.type === "key"
         ? rowEndPosition(keys, chosen.id)!
-        : chosen
+        : chosen && chosen.type !== "cluster"
           ? { x: snap(chosen.transform.x + 1), y: snap(chosen.transform.y) }
           : (newRowPosition(keys) ?? { x: snap(center.x), y: snap(center.y) });
     let id = "";