mock: バリアントグループを選んでキーを足すと、表示中のバリアントに新しい行を作る(T-30 単位6)

クラスターを選んだときと同じ挙動にそろえる。これまではグループの右隣(親の中)に足していた。

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

mock/e2e/phy.spec.ts

@@ -637,3 +637,24 @@ test("クラスターを選んでキーを足すと、そのクラスターに
   expect(Math.abs(box.x - left!.x)).toBeLessThan(1);
   expect(Math.abs(box.y - (left!.y + unit))).toBeLessThan(1);
 });
+
+test("バリアントグループを選んでキーを足すと、表示中のバリアントに新しい行を作る", async ({ page }) => {
+  await keysSelectVariantGroup(page);
+  const group = page.locator('[data-node-type="variantGroup"]').first();
+  const groupId = await group.getAttribute("data-node-id");
+  await page.locator(`[data-tree-id="${groupId}"]`).first().click();
+  const groupKeys = group.locator('[data-node-type="key"]');
+  const before = await groupKeys.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(groupKeys).toHaveCount(before.length + 1);
+  const after = await groupKeys.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 variant 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,13 +128,16 @@ export function usePhyCommands(options: Options) {
 
   function keyAdd() {
     const chosen = options.node(options.selected.value.at(-1) || "");
-    // A selected cluster receives a new row inside it, like an empty selection inside the focus.
+    // A selected cluster, or the shown variant of a selected group, 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();
+        : chosen?.type === "variantGroup"
+          ? options.variants.value[chosen.id] || chosen.default
+          : 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 }] : [],
     );
@@ -143,7 +146,7 @@ export function usePhyCommands(options: Options) {
     const { x, y } =
       chosen?.type === "key"
         ? rowEndPosition(keys, chosen.id)!
-        : chosen && chosen.type !== "cluster"
+        : chosen?.type === "component"
           ? { x: snap(chosen.transform.x + 1), y: snap(chosen.transform.y) }
           : (newRowPosition(keys) ?? { x: snap(center.x), y: snap(center.y) });
     let id = "";