From 4f786dd44b4f2e5dd54365644a24d20417822dc3 Mon Sep 17 00:00:00 2001
From: Hermann_Kitio <hermannkitio94@gmail.com>
Date: Mon, 20 Apr 2026 23:37:58 +0300
Subject: [PATCH] =?UTF-8?q?feat(simulations):=20composant=20clavier=20cara?=
 =?UTF-8?q?ct=C3=A8res=20sp=C3=A9ciaux=20fran=C3=A7ais?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SpecialCharsKeyboard.tsx       | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/features/simulations/components/SpecialCharsKeyboard.tsx

diff --git a/src/features/simulations/components/SpecialCharsKeyboard.tsx b/src/features/simulations/components/SpecialCharsKeyboard.tsx
new file mode 100644
index 0000000..adf3aa0
--- /dev/null
+++ b/src/features/simulations/components/SpecialCharsKeyboard.tsx
@@ -0,0 +1,47 @@
+/**
+ * Clavier de caractères spéciaux français pour la zone de saisie.
+ *
+ * Affiche une rangée horizontale scrollable de 30 caractères accentués
+ * (15 minuscules + 15 majuscules). Un clic insère le caractère à la
+ * position du curseur via le callback `onInsert`.
+ *
+ * Règle H : purement présentationnel, la logique d'insertion est dans le parent.
+ * Règle L : tokens Direction H exclusivement.
+ *
+ * `onMouseDown preventDefault` empêche le textarea de perdre le focus au clic,
+ * ce qui permet de conserver la position du curseur lors de l'insertion.
+ */
+
+const SPECIAL_CHARS = [
+  'à', 'â', 'é', 'è', 'ê', 'ë', 'î', 'ï', 'ô', 'ù', 'û', 'ü', 'ç', 'œ', 'æ',
+  'À', 'Â', 'É', 'È', 'Ê', 'Ë', 'Î', 'Ï', 'Ô', 'Ù', 'Û', 'Ü', 'Ç', 'Œ', 'Æ',
+] as const
+
+interface Props {
+  onInsert: (char: string) => void
+  disabled?: boolean
+}
+
+export function SpecialCharsKeyboard({ onInsert, disabled = false }: Props) {
+  return (
+    <div
+      role="toolbar"
+      aria-label="Caractères spéciaux"
+      className="flex gap-1.5 overflow-x-auto rounded-md border border-line bg-canvas-2 p-2"
+    >
+      {SPECIAL_CHARS.map((char) => (
+        <button
+          key={char}
+          type="button"
+          disabled={disabled}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => onInsert(char)}
+          aria-label={`Insérer le caractère ${char}`}
+          className="size-10 shrink-0 rounded-md border border-line bg-surface text-sm font-medium text-ink-1 transition-colors hover:border-expria hover:bg-expria-50 hover:text-expria focus:border-expria focus:outline-none focus:ring-2 focus:ring-expria/20 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {char}
+        </button>
+      ))}
+    </div>
+  )
+}