feat(ui): modifier profile editor shell + rules drawer entry

Adds ModifierProfileEditor modal shell with 3 placeholder panels
(T21 catalog / T22 board preview / T23 profile list). Esc closes
the modal via a window keydown listener active only while isOpen.

Wires a 'Modifier Profiles' button into the RulesDrawer footer that
opens the editor. Adds e2e/modifier-profiles.spec.ts with 2 tests:
open-from-drawer and esc-to-close.

packages/chess/src/ui/ModifierProfileEditor.tsx

@@ -0,0 +1,80 @@
+/**
+ * Modifier Profile Editor — modal shell.
+ *
+ * Shell only: three placeholder panels filled by later tasks:
+ *   T21 — modifier catalog (left panel)
+ *   T22 — board preview (center panel)
+ *   T23 — profile list (right panel)
+ *
+ * Follows the same overlay/close pattern as LayoutEditor.tsx.
+ */
+import { useEffect } from 'react';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ModifierProfileEditor({ isOpen, onClose }: Props) {
+  // Register Esc listener only while the modal is visible.
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      data-testid="modifier-editor-modal"
+      className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
+    >
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-6xl max-h-[95vh] overflow-hidden flex flex-col">
+        {/* Header */}
+        <header className="flex items-center justify-between px-6 py-4 border-b border-neutral-200">
+          <h2 className="text-lg font-bold text-neutral-900">
+            Modifier Profiles
+          </h2>
+          <button
+            onClick={onClose}
+            aria-label="Close modifier editor"
+            className="p-2 text-neutral-500 hover:bg-neutral-100 rounded transition-colors"
+          >
+            ×
+          </button>
+        </header>
+
+        {/* Body — three placeholder panels, filled by T21 / T22 / T23 */}
+        <div className="flex-1 overflow-hidden flex">
+          <aside className="w-64 border-r border-neutral-200 bg-neutral-50 p-4">
+            <p className="text-xs font-bold text-neutral-400 uppercase tracking-widest mb-2">
+              Modifiers
+            </p>
+            <p className="text-sm text-neutral-500 italic">
+              Modifier catalog (T21)
+            </p>
+          </aside>
+
+          <main className="flex-1 flex items-center justify-center p-6 bg-white">
+            <p className="text-sm text-neutral-500 italic">
+              Board preview (T22)
+            </p>
+          </main>
+
+          <aside className="w-72 border-l border-neutral-200 bg-neutral-50 p-4">
+            <p className="text-xs font-bold text-neutral-400 uppercase tracking-widest mb-2">
+              Profiles
+            </p>
+            <p className="text-sm text-neutral-500 italic">
+              Profile list (T23)
+            </p>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/chess/src/ui/RulesDrawer.tsx

@@ -5,6 +5,7 @@ import type { PresetActivation } from '../net/types.js';
 import { AnimatePresence, motion } from 'motion/react';
 import { Settings2, X } from 'lucide-react';
 import { toast } from 'sonner';
+import { ModifierProfileEditor } from './ModifierProfileEditor.js';
 
 /**
  * A collapsible side-drawer for toggling preset rules mid-game.
@@ -65,6 +66,7 @@ export function RulesDrawer({
   onRulesChanged,
 }: RulesDrawerProps) {
   const [open, setOpen] = useState(false);
+  const [modifierEditorOpen, setModifierEditorOpen] = useState(false);
   const presets = useMemo(() => PRESET_REGISTRY.getAll(), []);
   const activeById = useMemo(() => {
     const map = new Map<string, PresetActivation>();
@@ -484,15 +486,30 @@ export function RulesDrawer({
                 })}
               </div>
 
-              <footer className="p-4 border-t border-neutral-100 bg-white text-xs font-medium text-neutral-400 text-center">
-                {activeById.size === 0
-                  ? 'Standard FIDE chess — no presets active'
-                  : `${activeById.size} preset${activeById.size === 1 ? '' : 's'} active`}
+              <footer className="p-4 border-t border-neutral-100 bg-white space-y-3">
+                <button
+                  type="button"
+                  data-testid="open-modifier-editor"
+                  onClick={() => setModifierEditorOpen(true)}
+                  className="w-full px-3 py-2 text-sm font-semibold text-neutral-700 bg-neutral-50 border border-neutral-200 rounded-lg hover:bg-neutral-100 transition-colors"
+                >
+                  Modifier Profiles
+                </button>
+                <p className="text-xs font-medium text-neutral-400 text-center">
+                  {activeById.size === 0
+                    ? 'Standard FIDE chess — no presets active'
+                    : `${activeById.size} preset${activeById.size === 1 ? '' : 's'} active`}
+                </p>
               </footer>
             </motion.aside>
           </>
         )}
       </AnimatePresence>
+
+      <ModifierProfileEditor
+        isOpen={modifierEditorOpen}
+        onClose={() => setModifierEditorOpen(false)}
+      />
     </>
   );
 }