The card-naming field suggests as you type

Illusionary Attack, Deja-Vu, Card Erasure, and the other name-a-card
spells asked for exact spell names from memory. The field is now a
native datalist: type a few letters and matching card names appear,
tuned per card — Illusionary Attack offers only attack spells (it can
only pretend to be one), Drop Object offers only the movable objects
plus Treasure, and the rest offer the whole playable pool.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/App.svelte

@@ -140,6 +140,22 @@
   }
 
   /** Map a typed card name to its id (case-insensitive). */
+  /** Suggest-as-you-type pool for the card-naming field, tuned per card. */
+  const nameSuggestions = $derived.by(() => {
+    if (!selectedCard) return [];
+    const pool = allCardDefs().filter(
+      (d) => (d.set === "basic" || d.set === "expansion1") && (d.quantity ?? 0) > 0,
+    );
+    let picks = pool;
+    if (selectedCard.cardId === "illusionary-attack") {
+      picks = pool.filter((d) => d.cardType === "attack");
+    } else if (selectedCard.cardId === "drop-object") {
+      picks = pool.filter((d) => isMovableObject(d.id));
+    }
+    const names = picks.map((d) => d.name).sort();
+    return selectedCard.cardId === "drop-object" ? ["Treasure", ...names] : names;
+  });
+
   function nameToCardId(name: string): string | null {
     const wanted = name.trim().toLowerCase();
     if (!wanted) return null;
@@ -1095,7 +1111,10 @@
               <span>{pendingSectorFrom ? "— now the destination area" : "— click the sector to move"}</span>
             {/if}
             {#if selectedCard && NAMED_CARDS.has(selectedCard.cardId)}
-              <label class="inline">name <input class="text-input" bind:value={nameInput} placeholder="e.g. Fireball" /></label>
+              <label class="inline">name <input class="text-input" list="card-name-options" bind:value={nameInput} placeholder="e.g. Fireball" /></label>
+              <datalist id="card-name-options">
+                {#each nameSuggestions as n (n)}<option value={n}></option>{/each}
+              </datalist>
               {#if selectedCard.cardId === "deja-vu"}
                 <button class="stamp tiny" onclick={() => {
                   const id = nameToCardId(nameInput);