@ripla/godd-mcp 1.0.4-canary.8 → 1.0.4

package/notes/app/src/components/PanelResizeHandle.test.tsx

@@ -0,0 +1,481 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import PanelResizeHandle from "./PanelResizeHandle";
+
+describe("PanelResizeHandle", () => {
+  const onWidthChange = vi.fn();
+  const defaultResize = {
+    width: 320,
+    minWidth: 240,
+    maxWidth: 560,
+    onWidthChange,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("slider ロールと aria 属性を持つ", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const handle = screen.getByRole("slider", { name: "コメントパネルの幅を変更" });
+    expect(handle.getAttribute("aria-orientation")).toBe("horizontal");
+    expect(handle.getAttribute("tabindex")).toBe("0");
+    expect(handle.getAttribute("aria-valuenow")).toBe("320");
+    expect(handle.getAttribute("aria-valuetext")).toBe("320px");
+    expect(handle.getAttribute("aria-valuemin")).toBe("240");
+    expect(handle.getAttribute("aria-valuemax")).toBe("560");
+  });
+
+  it("pointerdown を親へ通知する", () => {
+    const onPointerDown = vi.fn();
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={onPointerDown}
+        {...defaultResize}
+      />,
+    );
+
+    fireEvent.pointerDown(screen.getByRole("slider"));
+    expect(onPointerDown).toHaveBeenCalledTimes(1);
+  });
+
+  it("REQ-UI-AC-06: ArrowLeft 後に aria-valuenow が新しい幅を反映する", () => {
+    const { rerender } = render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const handle = screen.getByRole("slider");
+    expect(handle.getAttribute("aria-valuenow")).toBe("320");
+
+    act(() => {
+      fireEvent.keyDown(handle, { key: "ArrowLeft" });
+    });
+    expect(onWidthChange).toHaveBeenCalledWith(336);
+
+    rerender(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={336}
+      />,
+    );
+    expect(handle.getAttribute("aria-valuenow")).toBe("336");
+  });
+
+  it("左端ハンドルで ArrowLeft により幅を広げる", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(onWidthChange).toHaveBeenCalledWith(336);
+  });
+
+  it("左端ハンドルで ArrowRight により幅を狭める", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(onWidthChange).toHaveBeenCalledWith(304);
+  });
+
+  it("右端ハンドルで ArrowLeft により幅を狭める", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(onWidthChange).toHaveBeenCalledWith(304);
+  });
+
+  it("右端ハンドルで ArrowRight により幅を広げる", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(onWidthChange).toHaveBeenCalledWith(336);
+  });
+
+  it("max 境界で ArrowLeft を押しても onWidthChange を呼ばない", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={560}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(onWidthChange).not.toHaveBeenCalled();
+  });
+
+  it("min 境界で ArrowRight を押しても onWidthChange を呼ばない", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={240}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(onWidthChange).not.toHaveBeenCalled();
+  });
+
+  it("右端ハンドル max 境界で ArrowRight を押しても onWidthChange を呼ばない", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={560}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(onWidthChange).not.toHaveBeenCalled();
+  });
+
+  it("右端ハンドル min 境界で ArrowLeft を押しても onWidthChange を呼ばない", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={240}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(onWidthChange).not.toHaveBeenCalled();
+  });
+
+  it("Home キーで minWidth にジャンプする", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "Home" });
+    expect(onWidthChange).toHaveBeenCalledWith(240);
+  });
+
+  it("End キーで maxWidth にジャンプする", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "End" });
+    expect(onWidthChange).toHaveBeenCalledWith(560);
+  });
+
+  it("Home で既に minWidth のとき onWidthChange を呼ばない", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={240}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "Home" });
+    expect(onWidthChange).not.toHaveBeenCalled();
+  });
+
+  it("End で既に maxWidth のとき onWidthChange を呼ばない", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={560}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "End" });
+    expect(onWidthChange).not.toHaveBeenCalled();
+  });
+
+  it("右端ハンドルで Home 時に既に minWidth のとき onWidthChange を呼ばない", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={240}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "Home" });
+    expect(onWidthChange).not.toHaveBeenCalled();
+  });
+
+  it("右端ハンドルで End 時に既に maxWidth のとき onWidthChange を呼ばない", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+        width={560}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "End" });
+    expect(onWidthChange).not.toHaveBeenCalled();
+  });
+
+  it("左端ハンドルはパネル境界線上に straddle 配置する", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const handle = screen.getByRole("slider", { name: "コメントパネルの幅を変更" });
+    expect(handle.className).toContain("-start-1.5");
+    expect(handle.className).toContain("w-3");
+  });
+
+  it("右端ハンドルはパネル境界線上に straddle 配置する", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const handle = screen.getByRole("slider", { name: "左サイドバーの幅を変更" });
+    expect(handle.className).toContain("-end-1.5");
+    expect(handle.className).toContain("w-3");
+  });
+
+  it("REQ-UI-AC-05 (#991/#1009): inline-end エッジの視覚線を start-1/2 起点で inline-end 側 border に重ねる（translate 無し）", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const line = screen.getByRole("slider", { name: "左サイドバーの幅を変更" }).querySelector("div");
+    expect(line).not.toBeNull();
+    const classes = line?.classList;
+    // border は padding-edge の外側 1px に描画される。論理 inset `start-1/2` で線の inline-start 端を
+    // 中心(50%)に固定すれば inline-end 側へ 1px 展開して border に重なり、translate 無しで dir 反転する。
+    // class トークン完全一致で検証し、部分一致による誤検知を避ける
+    expect(classes?.contains("start-1/2")).toBe(true);
+    expect(classes?.contains("end-1/2")).toBe(false);
+    // 物理 translate は使わない（論理 inset で left/right を吸収するため）
+    expect(classes?.contains("translate-x-0")).toBe(false);
+    expect(classes?.contains("-translate-x-full")).toBe(false);
+    expect(classes?.contains("-translate-x-1/2")).toBe(false);
+    // hover / drag のインジケーター色は維持
+    expect(classes?.contains("group-hover:bg-blue-500/70")).toBe(true);
+    expect(classes?.contains("group-active:bg-blue-400")).toBe(true);
+  });
+
+  it("REQ-UI-AC-05 (#991/#1009): inline-start エッジの視覚線を end-1/2 起点で inline-start 側 border に重ねる（translate 無し）", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const line = screen.getByRole("slider", { name: "コメントパネルの幅を変更" }).querySelector("div");
+    expect(line).not.toBeNull();
+    const classes = line?.classList;
+    // 論理 inset `end-1/2` で線の inline-end 端を中心(50%)に固定すれば inline-start 側へ 1px 展開して
+    // border に重なり、translate 無しで dir 反転する。
+    // class トークン完全一致で検証し、部分一致による誤検知を避ける
+    expect(classes?.contains("end-1/2")).toBe(true);
+    expect(classes?.contains("start-1/2")).toBe(false);
+    // 物理 translate は使わない
+    expect(classes?.contains("-translate-x-full")).toBe(false);
+    expect(classes?.contains("translate-x-0")).toBe(false);
+    expect(classes?.contains("-translate-x-1/2")).toBe(false);
+    // hover / drag のインジケーター色は維持
+    expect(classes?.contains("group-hover:bg-blue-500/70")).toBe(true);
+    expect(classes?.contains("group-active:bg-blue-400")).toBe(true);
+  });
+
+  it("REQ-UI-AC-11 (#992): キーボードフォーカスを受け取れる（tabIndex=0 で focus 到達）", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const handle = screen.getByRole("slider", { name: "左サイドバーの幅を変更" });
+    handle.focus();
+    expect(document.activeElement).toBe(handle);
+  });
+
+  it("REQ-UI-AC-11 (#992): フォーカス時に内側視覚線が青くなる（overflow にクリップされない可視インジケーター）", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-end"
+        ariaLabel="左サイドバーの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const line = screen.getByRole("slider", { name: "左サイドバーの幅を変更" }).querySelector("div");
+    expect(line).not.toBeNull();
+    const classes = line?.classList;
+    // 全高・border 上の内側線にフォーカス色を付与することで、祖先 overflow-hidden に
+    // クリップされ得るリングに依存せず確実に可視なフォーカスインジケーターとする。
+    // hover(blue-500/70) と弁別するため明色 blue-400(不透明)、WCAG 2.4.11 のため 2px(w-0.5)。
+    expect(classes?.contains("group-focus-visible:bg-blue-400")).toBe(true);
+    expect(classes?.contains("group-focus-visible:w-0.5")).toBe(true);
+    // hover 色とは別トークンで弁別可能であること
+    expect(classes?.contains("group-focus-visible:bg-blue-500/70")).toBe(false);
+  });
+
+  it("REQ-UI-AC-11 (#992): 左端ハンドルもフォーカス可能でフォーカス色を持つ", () => {
+    render(
+      <PanelResizeHandle
+        edge="inline-start"
+        ariaLabel="コメントパネルの幅を変更"
+        onPointerDown={vi.fn()}
+        {...defaultResize}
+      />,
+    );
+
+    const handle = screen.getByRole("slider", { name: "コメントパネルの幅を変更" });
+    handle.focus();
+    expect(document.activeElement).toBe(handle);
+
+    const line = handle.querySelector("div");
+    expect(line?.classList.contains("group-focus-visible:bg-blue-400")).toBe(true);
+    expect(line?.classList.contains("group-focus-visible:w-0.5")).toBe(true);
+  });
+});
+
+describe("PanelResizeHandle RTL（#1009 / REQ-UI-AC-12）", () => {
+  const onWidthChange = vi.fn();
+  const defaultResize = {
+    width: 320,
+    minWidth: 240,
+    maxWidth: 560,
+    onWidthChange,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // dir="rtl" 祖先を与え isRtlContext を rtl 判定させる。物理矢印キーの拡大方向が LTR と逆転する。
+  function renderRtl(edge: "inline-start" | "inline-end", ariaLabel: string) {
+    return render(
+      <div dir="rtl">
+        <PanelResizeHandle edge={edge} ariaLabel={ariaLabel} onPointerDown={vi.fn()} {...defaultResize} />
+      </div>,
+    );
+  }
+
+  it("RTL: inline-end エッジは ArrowLeft で拡大する（LTR の ArrowRight と逆）", () => {
+    renderRtl("inline-end", "左サイドバーの幅を変更");
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(onWidthChange).toHaveBeenCalledWith(336);
+  });
+
+  it("RTL: inline-end エッジは ArrowRight で縮小する", () => {
+    renderRtl("inline-end", "左サイドバーの幅を変更");
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(onWidthChange).toHaveBeenCalledWith(304);
+  });
+
+  it("RTL: inline-start エッジは ArrowRight で拡大する（LTR の ArrowLeft と逆）", () => {
+    renderRtl("inline-start", "コメントパネルの幅を変更");
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(onWidthChange).toHaveBeenCalledWith(336);
+  });
+
+  it("RTL: inline-start エッジは ArrowLeft で縮小する", () => {
+    renderRtl("inline-start", "コメントパネルの幅を変更");
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(onWidthChange).toHaveBeenCalledWith(304);
+  });
+
+  it("RTL でも Home/End は min/max ジャンプで不変（書字方向非依存）", () => {
+    renderRtl("inline-start", "コメントパネルの幅を変更");
+    const handle = screen.getByRole("slider");
+    fireEvent.keyDown(handle, { key: "Home" });
+    expect(onWidthChange).toHaveBeenCalledWith(240);
+    fireEvent.keyDown(handle, { key: "End" });
+    expect(onWidthChange).toHaveBeenCalledWith(560);
+  });
+});

package/notes/app/src/components/PanelResizeHandle.tsx

@@ -0,0 +1,96 @@
+import type { KeyboardEvent } from "react";
+import {
+  isRtlContext,
+  PANEL_RESIZE_KEYBOARD_STEP_PX,
+  clampPanelWidth,
+  type PanelResizeProps,
+  type ResizeEdge,
+} from "@/lib/resizable-panel";
+
+type Props = {
+  edge: ResizeEdge;
+  ariaLabel: string;
+} & Pick<PanelResizeProps, "onPointerDown" | "width" | "minWidth" | "maxWidth" | "onWidthChange">;
+
+/**
+ * 物理矢印キーから幅の増減量を求める。拡大する物理方向は「論理エッジ × 書字方向」で決まり、
+ * `dir="rtl"` では LTR と逆転する（#1009）。物理ドラッグ方向と整合させるため矢印は物理キーのまま扱う。
+ */
+function keyboardWidthDelta(edge: ResizeEdge, key: string, isRtl: boolean): number | null {
+  // inline-end エッジは LTR で右(ArrowRight)が拡大、RTL では反転する。
+  const widenOnArrowRight = (edge === "inline-end") !== isRtl;
+  if (key === "ArrowRight") return widenOnArrowRight ? PANEL_RESIZE_KEYBOARD_STEP_PX : -PANEL_RESIZE_KEYBOARD_STEP_PX;
+  if (key === "ArrowLeft") return widenOnArrowRight ? -PANEL_RESIZE_KEYBOARD_STEP_PX : PANEL_RESIZE_KEYBOARD_STEP_PX;
+  return null;
+}
+
+function keyboardJumpWidth(
+  key: string,
+  minWidth: number,
+  maxWidth: number,
+): number | null {
+  if (key === "Home") return minWidth;
+  if (key === "End") return maxWidth;
+  return null;
+}
+
+export default function PanelResizeHandle({
+  edge,
+  onPointerDown,
+  ariaLabel,
+  width,
+  minWidth,
+  maxWidth,
+  onWidthChange,
+}: Props) {
+  // 論理 inset でハンドルをパネル境界（inline-start / inline-end）に straddle 配置する（#1009）。
+  const positionClass = edge === "inline-start" ? "-start-1.5" : "-end-1.5";
+  // 視覚線(w-px)を親 aside の border 位置に正確に重ねる（#991 / #1009）。
+  // ハンドル中心は親 padding-edge に一致するが、border-box の border は padding-edge の外側 1px に
+  // 描画される。論理 inset で border 側の端を中心(50%)に固定すれば translate 無しで重なり、
+  // `dir="rtl"` でも左右が自動反転する:
+  // - inline-end エッジ: `start-1/2` で inline-start 端を中心に置き inline-end 側へ 1px 展開
+  // - inline-start エッジ: `end-1/2` で inline-end 端を中心に置き inline-start 側へ 1px 展開
+  const lineAlignClass = edge === "inline-start" ? "end-1/2" : "start-1/2";
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const jumpWidth = keyboardJumpWidth(event.key, minWidth, maxWidth);
+    if (jumpWidth != null) {
+      event.preventDefault();
+      if (jumpWidth !== width) {
+        onWidthChange(jumpWidth);
+      }
+      return;
+    }
+    const delta = keyboardWidthDelta(edge, event.key, isRtlContext(event.currentTarget));
+    if (delta == null) return;
+    const nextWidth = clampPanelWidth(width + delta, minWidth, maxWidth);
+    event.preventDefault();
+    if (nextWidth !== width) {
+      onWidthChange(nextWidth);
+    }
+  };
+
+  return (
+    <div
+      role="slider"
+      tabIndex={0}
+      aria-orientation="horizontal"
+      aria-label={ariaLabel}
+      aria-valuenow={width}
+      aria-valuetext={`${width}px`}
+      aria-valuemin={minWidth}
+      aria-valuemax={maxWidth}
+      onPointerDown={onPointerDown}
+      onKeyDown={handleKeyDown}
+      className={`hidden md:block absolute top-0 ${positionClass} z-30 h-full w-3 cursor-col-resize touch-none group outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70`}
+    >
+      {/* キーボードフォーカス時は内側線(全高・border 上)を強調する（#992）。focus-visible:ring は
+          祖先の overflow-hidden でクリップされ得るが、内側線はハンドル内に収まりクリップされないため、
+          リングに依存しない確実に可視なフォーカスインジケーターになる。
+          hover(blue-500/70) と弁別するため明色 blue-400(不透明)、WCAG 2.4.11(Focus Appearance)
+          の面積/コントラストを満たすため 2px(w-0.5) に強調する。 */}
+      <div className={`absolute ${lineAlignClass} top-0 h-full w-px bg-gray-700 transition-colors group-hover:bg-blue-500/70 group-active:bg-blue-400 group-focus-visible:bg-blue-400 group-focus-visible:w-0.5`} />
+    </div>
+  );
+}