diff --git a/src/components/generators/CardGenerator.astro b/src/components/generators/CardGenerator.astro
index 42c340e..e88277e 100644
--- a/src/components/generators/CardGenerator.astro
+++ b/src/components/generators/CardGenerator.astro
@@ -1,188 +1,272 @@
 ---
-import { useT } from '../../i18n/translations';
-const isRu = Astro.url.pathname.startsWith('/ru');
-const T = useT(isRu ? 'ru' : 'en');
+import { useT } from "../../i18n/translations";
+const isRu = Astro.url.pathname.startsWith("/ru");
+const T = useT(isRu ? "ru" : "en");
 ---
 
 <div id="card-generator" class="mt-8">
-  <div class="flex flex-col sm:flex-row gap-4 items-end">
-    <div class="flex-1">
-      <label for="crd-count" class="block text-sm font-medium text-zinc-400 mb-1">{T.cardsToDraw}</label>
-      <input
-        id="crd-count"
-        type="number"
-        value="1"
-        min="1"
-        max="52"
-        class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
-        aria-label={T.cardsToDraw}
-      />
+    <div class="flex flex-col sm:flex-row gap-4 items-end">
+        <div class="flex-1">
+            <label
+                for="crd-count"
+                class="block text-sm font-medium text-zinc-400 mb-1"
+                >{T.cardsToDraw}</label
+            >
+            <input
+                id="crd-count"
+                type="number"
+                value="1"
+                min="1"
+                max="52"
+                class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+                aria-label={T.cardsToDraw}
+            />
+        </div>
+        <label
+            class="flex items-center gap-2.5 cursor-pointer select-none group pb-2"
+        >
+            <input
+                id="crd-replace"
+                type="checkbox"
+                class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
+            />
+            <span
+                class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors"
+                >{T.allowDuplicates}</span
+            >
+        </label>
     </div>
-    <label class="flex items-center gap-2.5 cursor-pointer select-none group pb-2">
-      <input
-        id="crd-replace"
-        type="checkbox"
-        class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
-      />
-      <span class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">{T.allowDuplicates}</span>
-    </label>
-  </div>
 
-  <p
-    id="crd-error"
-    role="alert"
-    aria-live="polite"
-    class="mt-3 text-sm text-red-500 hidden"
-  ></p>
-
-  <div class="my-10 min-h-32 flex flex-col items-center justify-center gap-4">
-    <div
-      id="crd-cards"
-      class="flex flex-wrap justify-center gap-2"
-      aria-live="polite"
-      aria-label="Drawn cards"
-    ></div>
-
-    <button
-      id="crd-copy-btn"
-      type="button"
-      aria-label="Copy cards to clipboard"
-      class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+    <p
+        id="crd-error"
+        role="alert"
+        aria-live="polite"
+        class="mt-3 text-sm text-red-500 hidden"
     >
-      <span id="crd-copy-label">{T.copy}</span>
-      <span id="crd-copy-icon" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
-          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
-        </svg>
-      </span>
-      <span id="crd-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M20 6 9 17l-5-5"/>
-        </svg>
-      </span>
-    </button>
-  </div>
+    </p>
 
-  <div class="flex justify-center">
-    <button
-      id="crd-btn"
-      type="button"
-      class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
-    >
-      {T.draw}
-    </button>
-  </div>
+    <div class="my-10 min-h-32 flex flex-col items-center justify-center gap-4">
+        <div
+            id="crd-cards"
+            class="flex flex-wrap justify-center gap-2"
+            aria-live="polite"
+            aria-label="Drawn cards"
+        >
+        </div>
+
+        <button
+            id="crd-copy-btn"
+            type="button"
+            aria-label="Copy cards to clipboard"
+            class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+        >
+            <span id="crd-copy-label">{T.copy}</span>
+            <span id="crd-copy-icon" aria-hidden="true">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2"
+                    ></rect>
+                    <path
+                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    ></path>
+                </svg>
+            </span>
+            <span
+                id="crd-check-icon"
+                class="hidden text-[#534AB7]"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M20 6 9 17l-5-5"></path>
+                </svg>
+            </span>
+        </button>
+    </div>
+
+    <div class="flex justify-center">
+        <button
+            id="crd-btn"
+            type="button"
+            class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
+        >
+            {T.draw}
+        </button>
+    </div>
 </div>
 
 <script>
-  const isRu = document.documentElement.lang === 'ru';
-  const COPY_LABEL    = isRu ? 'Копировать' : 'Copy';
-  const COPIED_LABEL  = isRu ? 'Скопировано' : 'Copied';
-  const ERR_AT_LEAST  = isRu ? 'Вытащите хотя бы 1 карту.' : 'Draw at least 1 card.';
-  const ERR_UNIQUE    = isRu ? 'Нельзя вытащить более 52 уникальных карт.' : 'Cannot draw more than 52 unique cards.';
-  const ERR_MAX52     = isRu ? 'Максимум 52 карты одновременно.' : 'Maximum 52 cards at once.';
+    import { CopyFeedback } from "@/lib/client/clipboard";
+    import { createErrorDisplay } from "@/lib/client/validation";
 
-  const countInput = document.getElementById('crd-count')    as HTMLInputElement;
-  const replaceCb  = document.getElementById('crd-replace')  as HTMLInputElement;
-  const btn        = document.getElementById('crd-btn')      as HTMLButtonElement;
-  const copyBtn    = document.getElementById('crd-copy-btn') as HTMLButtonElement;
-  const cardsEl    = document.getElementById('crd-cards')    as HTMLDivElement;
-  const errorEl    = document.getElementById('crd-error')    as HTMLParagraphElement;
-  const copyLabel  = document.getElementById('crd-copy-label') as HTMLSpanElement;
-  const copyIcon   = document.getElementById('crd-copy-icon')  as HTMLSpanElement;
-  const checkIcon  = document.getElementById('crd-check-icon') as HTMLSpanElement;
+    const isRu = document.documentElement.lang === "ru";
+    const COPY_LABEL = isRu ? "Копировать" : "Copy";
+    const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
+    const ERR_AT_LEAST = isRu
+        ? "Вытащите хотя бы 1 карту."
+        : "Draw at least 1 card.";
+    const ERR_UNIQUE = isRu
+        ? "Нельзя вытащить более 52 уникальных карт."
+        : "Cannot draw more than 52 unique cards.";
+    const ERR_MAX52 = isRu
+        ? "Максимум 52 карты одновременно."
+        : "Maximum 52 cards at once.";
 
-  const RANKS = ['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
-  const SUITS = [
-    { symbol: '♠', label: 'Spades',   red: false },
-    { symbol: '♥', label: 'Hearts',   red: true  },
-    { symbol: '♦', label: 'Diamonds', red: true  },
-    { symbol: '♣', label: 'Clubs',    red: false },
-  ];
+    const countInput = document.getElementById("crd-count") as HTMLInputElement;
+    const replaceCb = document.getElementById(
+        "crd-replace",
+    ) as HTMLInputElement;
+    const btn = document.getElementById("crd-btn") as HTMLButtonElement;
+    const copyBtn = document.getElementById(
+        "crd-copy-btn",
+    ) as HTMLButtonElement;
+    const cardsEl = document.getElementById("crd-cards") as HTMLDivElement;
+    const errorEl = document.getElementById(
+        "crd-error",
+    ) as HTMLParagraphElement;
+    const copyLabel = document.getElementById(
+        "crd-copy-label",
+    ) as HTMLSpanElement;
+    const copyIcon = document.getElementById(
+        "crd-copy-icon",
+    ) as HTMLSpanElement;
+    const checkIcon = document.getElementById(
+        "crd-check-icon",
+    ) as HTMLSpanElement;
 
-  const DECK = SUITS.flatMap((suit) =>
-    RANKS.map((rank) => ({ rank, suit }))
-  );
+    const RANKS = [
+        "A",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "10",
+        "J",
+        "Q",
+        "K",
+    ];
+    const SUITS = [
+        { symbol: "♠", label: "Spades", red: false },
+        { symbol: "♥", label: "Hearts", red: true },
+        { symbol: "♦", label: "Diamonds", red: true },
+        { symbol: "♣", label: "Clubs", red: false },
+    ];
 
-  let lastCards: { rank: string; suit: typeof SUITS[number] }[] = [];
-  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+    const DECK = SUITS.flatMap((suit) => RANKS.map((rank) => ({ rank, suit })));
 
-  function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
-  function clearError()           { errorEl.textContent = '';  errorEl.classList.add('hidden');    }
+    let lastCards: { rank: string; suit: (typeof SUITS)[number] }[] = [];
 
-  function draw() {
-    const count = parseInt(countInput.value, 10);
-    const withReplacement = replaceCb.checked;
+    const errors = createErrorDisplay(errorEl);
+    const clipboard = new CopyFeedback(copyIcon, checkIcon);
 
-    if (!Number.isInteger(count) || count < 1) { showError(ERR_AT_LEAST); return; }
-    if (!withReplacement && count > 52)        { showError(ERR_UNIQUE); return; }
-    if (count > 52)                             { showError(ERR_MAX52); return; }
+    function draw() {
+        const count = parseInt(countInput.value, 10);
+        const withReplacement = replaceCb.checked;
 
-    clearError();
+        if (!Number.isInteger(count) || count < 1) {
+            errors.show(ERR_AT_LEAST);
+            return;
+        }
+        if (!withReplacement && count > 52) {
+            errors.show(ERR_UNIQUE);
+            return;
+        }
+        if (count > 52) {
+            errors.show(ERR_MAX52);
+            return;
+        }
 
-    if (withReplacement) {
-      lastCards = Array.from({ length: count }, () => DECK[Math.floor(Math.random() * DECK.length)]);
-    } else {
-      const deck = [...DECK];
-      for (let i = 0; i < count; i++) {
-        const j = i + Math.floor(Math.random() * (deck.length - i));
-        [deck[i], deck[j]] = [deck[j], deck[i]];
-      }
-      lastCards = deck.slice(0, count);
+        errors.clear();
+
+        if (withReplacement) {
+            lastCards = Array.from(
+                { length: count },
+                () => DECK[Math.floor(Math.random() * DECK.length)],
+            );
+        } else {
+            const deck = [...DECK];
+            for (let i = 0; i < count; i++) {
+                const j = i + Math.floor(Math.random() * (deck.length - i));
+                [deck[i], deck[j]] = [deck[j], deck[i]];
+            }
+            lastCards = deck.slice(0, count);
+        }
+
+        renderCards();
+        copyBtn.classList.remove("invisible");
+        copyLabel.textContent = COPY_LABEL;
     }
 
-    renderCards();
-    copyBtn.classList.remove('invisible');
-    copyLabel.textContent = COPY_LABEL;
-  }
+    function renderCards() {
+        cardsEl.innerHTML = "";
+        lastCards.forEach(({ rank, suit }) => {
+            const card = document.createElement("div");
+            card.setAttribute("aria-label", `${rank} of ${suit.label}`);
+            card.className = [
+                "flex flex-col items-center justify-between w-14 h-20 rounded-lg border px-1.5 py-1.5",
+                "bg-zinc-900 border-zinc-700 select-none",
+                suit.red ? "text-red-400" : "text-zinc-100",
+            ].join(" ");
 
-  function renderCards() {
-    cardsEl.innerHTML = '';
-    lastCards.forEach(({ rank, suit }) => {
-      const card = document.createElement('div');
-      card.setAttribute('aria-label', `${rank} of ${suit.label}`);
-      card.className = [
-        'flex flex-col items-center justify-between w-14 h-20 rounded-lg border px-1.5 py-1.5',
-        'bg-zinc-900 border-zinc-700 select-none',
-        suit.red ? 'text-red-400' : 'text-zinc-100',
-      ].join(' ');
+            const top = document.createElement("div");
+            top.className =
+                "w-full text-left text-sm font-bold leading-none tabular-nums";
+            top.textContent = rank;
 
-      const top = document.createElement('div');
-      top.className = 'w-full text-left text-sm font-bold leading-none tabular-nums';
-      top.textContent = rank;
+            const mid = document.createElement("div");
+            mid.className = "text-2xl leading-none";
+            mid.textContent = suit.symbol;
 
-      const mid = document.createElement('div');
-      mid.className = 'text-2xl leading-none';
-      mid.textContent = suit.symbol;
+            const bot = document.createElement("div");
+            bot.className =
+                "w-full text-right text-sm font-bold leading-none tabular-nums rotate-180";
+            bot.textContent = rank;
 
-      const bot = document.createElement('div');
-      bot.className = 'w-full text-right text-sm font-bold leading-none tabular-nums rotate-180';
-      bot.textContent = rank;
+            card.append(top, mid, bot);
+            cardsEl.appendChild(card);
+        });
+    }
 
-      card.append(top, mid, bot);
-      cardsEl.appendChild(card);
+    async function copyCards() {
+        if (!lastCards.length) return;
+        const text = lastCards
+            .map(({ rank, suit }) => `${rank}${suit.symbol}`)
+            .join(", ");
+        await navigator.clipboard.writeText(text);
+
+        clipboard.showCopied();
+        copyLabel.textContent = COPIED_LABEL;
+
+        setTimeout(() => {
+            copyLabel.textContent = COPY_LABEL;
+        }, 1500);
+    }
+
+    btn.addEventListener("click", draw);
+    copyBtn.addEventListener("click", copyCards);
+    countInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") draw();
     });
-  }
-
-  async function copyCards() {
-    if (!lastCards.length) return;
-    const text = lastCards.map(({ rank, suit }) => `${rank}${suit.symbol}`).join(', ');
-    await navigator.clipboard.writeText(text);
-
-    copyIcon.classList.add('hidden');
-    checkIcon.classList.remove('hidden');
-    copyLabel.textContent = COPIED_LABEL;
-
-    if (copyRevertTimer) clearTimeout(copyRevertTimer);
-    copyRevertTimer = setTimeout(() => {
-      checkIcon.classList.add('hidden');
-      copyIcon.classList.remove('hidden');
-      copyLabel.textContent = COPY_LABEL;
-    }, 1500);
-  }
-
-  btn.addEventListener('click', draw);
-  copyBtn.addEventListener('click', copyCards);
-  countInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') draw(); });
 </script>
diff --git a/src/components/generators/CoinGenerator.astro b/src/components/generators/CoinGenerator.astro
index be3a60b..dc79e6a 100644
--- a/src/components/generators/CoinGenerator.astro
+++ b/src/components/generators/CoinGenerator.astro
@@ -1,148 +1,200 @@
 ---
-import { useT } from '../../i18n/translations';
-const isRu = Astro.url.pathname.startsWith('/ru');
-const T = useT(isRu ? 'ru' : 'en');
+import { useT } from "../../i18n/translations";
+const isRu = Astro.url.pathname.startsWith("/ru");
+const T = useT(isRu ? "ru" : "en");
 ---
 
 <div id="coin-generator" class="mt-8">
-  <div>
-    <div class="flex items-center justify-between mb-1">
-      <label for="coin-count" class="text-sm font-medium text-zinc-400">{T.numberOfCoins}</label>
-      <span id="coin-count-val" class="text-sm font-semibold tabular-nums text-zinc-100">1</span>
+    <div>
+        <div class="flex items-center justify-between mb-1">
+            <label for="coin-count" class="text-sm font-medium text-zinc-400"
+                >{T.numberOfCoins}</label
+            >
+            <span
+                id="coin-count-val"
+                class="text-sm font-semibold tabular-nums text-zinc-100">1</span
+            >
+        </div>
+        <input
+            id="coin-count"
+            type="range"
+            min="1"
+            max="20"
+            value="1"
+            class="w-full accent-[#534AB7] cursor-pointer"
+            aria-label={T.numberOfCoins}
+        />
+        <div
+            class="flex justify-between text-xs text-zinc-600 mt-1 select-none"
+        >
+            <span>1</span><span>20</span>
+        </div>
     </div>
-    <input
-      id="coin-count"
-      type="range"
-      min="1"
-      max="20"
-      value="1"
-      class="w-full accent-[#534AB7] cursor-pointer"
-      aria-label={T.numberOfCoins}
-    />
-    <div class="flex justify-between text-xs text-zinc-600 mt-1 select-none">
-      <span>1</span><span>20</span>
+
+    <div class="my-10 min-h-28 flex flex-col items-center justify-center gap-4">
+        <div
+            id="coin-coins"
+            class="flex flex-wrap justify-center gap-2"
+            aria-live="polite"
+            aria-label="Coin results"
+        >
+        </div>
+
+        <div
+            id="coin-summary"
+            class="hidden text-sm text-zinc-500 tabular-nums"
+        >
+        </div>
+
+        <button
+            id="coin-copy-btn"
+            type="button"
+            aria-label="Copy results to clipboard"
+            class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+        >
+            <span id="coin-copy-label">{T.copy}</span>
+            <span id="coin-copy-icon" aria-hidden="true">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2"
+                    ></rect>
+                    <path
+                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    ></path>
+                </svg>
+            </span>
+            <span
+                id="coin-check-icon"
+                class="hidden text-[#534AB7]"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M20 6 9 17l-5-5"></path>
+                </svg>
+            </span>
+        </button>
     </div>
-  </div>
 
-  <div class="my-10 min-h-28 flex flex-col items-center justify-center gap-4">
-    <div
-      id="coin-coins"
-      class="flex flex-wrap justify-center gap-2"
-      aria-live="polite"
-      aria-label="Coin results"
-    ></div>
-
-    <div id="coin-summary" class="hidden text-sm text-zinc-500 tabular-nums"></div>
-
-    <button
-      id="coin-copy-btn"
-      type="button"
-      aria-label="Copy results to clipboard"
-      class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
-    >
-      <span id="coin-copy-label">{T.copy}</span>
-      <span id="coin-copy-icon" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
-          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
-        </svg>
-      </span>
-      <span id="coin-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M20 6 9 17l-5-5"/>
-        </svg>
-      </span>
-    </button>
-  </div>
-
-  <div class="flex justify-center">
-    <button
-      id="coin-btn"
-      type="button"
-      class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
-    >
-      {T.flip}
-    </button>
-  </div>
+    <div class="flex justify-center">
+        <button
+            id="coin-btn"
+            type="button"
+            class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
+        >
+            {T.flip}
+        </button>
+    </div>
 </div>
 
 <script>
-  const isRu = document.documentElement.lang === 'ru';
-  const COPY_LABEL    = isRu ? 'Копировать' : 'Copy';
-  const COPIED_LABEL  = isRu ? 'Скопировано' : 'Copied';
-  const HEADS_LABEL   = isRu ? 'О' : 'H';
-  const TAILS_LABEL   = isRu ? 'Р' : 'T';
-  const HEADS_WORD    = isRu ? 'орёл' : 'Heads';
-  const TAILS_WORD    = isRu ? 'решка' : 'Tails';
-  const HEADS_SUMMARY = isRu ? 'орёл' : 'heads';
-  const TAILS_SUMMARY = isRu ? 'решка' : 'tails';
+    import { CopyFeedback } from "@/lib/client/clipboard";
 
-  const countInput  = document.getElementById('coin-count')      as HTMLInputElement;
-  const countVal    = document.getElementById('coin-count-val')  as HTMLSpanElement;
-  const btn         = document.getElementById('coin-btn')        as HTMLButtonElement;
-  const copyBtn     = document.getElementById('coin-copy-btn')   as HTMLButtonElement;
-  const coinsEl     = document.getElementById('coin-coins')      as HTMLDivElement;
-  const summaryEl   = document.getElementById('coin-summary')    as HTMLDivElement;
-  const copyLabel   = document.getElementById('coin-copy-label') as HTMLSpanElement;
-  const copyIcon    = document.getElementById('coin-copy-icon')  as HTMLSpanElement;
-  const checkIcon   = document.getElementById('coin-check-icon') as HTMLSpanElement;
+    const isRu = document.documentElement.lang === "ru";
+    const COPY_LABEL = isRu ? "Копировать" : "Copy";
+    const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
+    const HEADS_LABEL = isRu ? "О" : "H";
+    const TAILS_LABEL = isRu ? "Р" : "T";
+    const HEADS_WORD = isRu ? "орёл" : "Heads";
+    const TAILS_WORD = isRu ? "решка" : "Tails";
+    const HEADS_SUMMARY = isRu ? "орёл" : "heads";
+    const TAILS_SUMMARY = isRu ? "решка" : "tails";
 
-  let lastResults: boolean[] = [];
-  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+    const countInput = document.getElementById(
+        "coin-count",
+    ) as HTMLInputElement;
+    const countVal = document.getElementById(
+        "coin-count-val",
+    ) as HTMLSpanElement;
+    const btn = document.getElementById("coin-btn") as HTMLButtonElement;
+    const copyBtn = document.getElementById(
+        "coin-copy-btn",
+    ) as HTMLButtonElement;
+    const coinsEl = document.getElementById("coin-coins") as HTMLDivElement;
+    const summaryEl = document.getElementById("coin-summary") as HTMLDivElement;
+    const copyLabel = document.getElementById(
+        "coin-copy-label",
+    ) as HTMLSpanElement;
+    const copyIcon = document.getElementById(
+        "coin-copy-icon",
+    ) as HTMLSpanElement;
+    const checkIcon = document.getElementById(
+        "coin-check-icon",
+    ) as HTMLSpanElement;
 
-  countInput.addEventListener('input', () => {
-    countVal.textContent = countInput.value;
-  });
+    let lastResults: boolean[] = [];
 
-  function flip() {
-    const count = parseInt(countInput.value, 10);
-    lastResults = Array.from({ length: count }, () => Math.random() < 0.5);
+    const clipboard = new CopyFeedback(copyIcon, checkIcon);
 
-    const heads = lastResults.filter(Boolean).length;
-    const tails = count - heads;
-
-    coinsEl.innerHTML = '';
-    lastResults.forEach((isHeads) => {
-      const coin = document.createElement('div');
-      coin.setAttribute('aria-label', isHeads ? HEADS_WORD : TAILS_WORD);
-      coin.className = [
-        'flex flex-col items-center justify-center w-14 h-14 rounded-full border-2 font-bold text-xs select-none',
-        isHeads
-          ? 'border-[#534AB7] bg-[#534AB7]/10 text-[#534AB7]'
-          : 'border-zinc-600 bg-zinc-800 text-zinc-400',
-      ].join(' ');
-      coin.textContent = isHeads ? HEADS_LABEL : TAILS_LABEL;
-      coinsEl.appendChild(coin);
+    countInput.addEventListener("input", () => {
+        countVal.textContent = countInput.value;
     });
 
-    if (count > 1) {
-      summaryEl.textContent = `${heads} ${HEADS_SUMMARY} · ${tails} ${TAILS_SUMMARY}`;
-      summaryEl.classList.remove('hidden');
-    } else {
-      summaryEl.classList.add('hidden');
+    function flip() {
+        const count = parseInt(countInput.value, 10);
+        lastResults = Array.from({ length: count }, () => Math.random() < 0.5);
+
+        const heads = lastResults.filter(Boolean).length;
+        const tails = count - heads;
+
+        coinsEl.innerHTML = "";
+        lastResults.forEach((isHeads) => {
+            const coin = document.createElement("div");
+            coin.setAttribute("aria-label", isHeads ? HEADS_WORD : TAILS_WORD);
+            coin.className = [
+                "flex flex-col items-center justify-center w-14 h-14 rounded-full border-2 font-bold text-xs select-none",
+                isHeads
+                    ? "border-[#534AB7] bg-[#534AB7]/10 text-[#534AB7]"
+                    : "border-zinc-600 bg-zinc-800 text-zinc-400",
+            ].join(" ");
+            coin.textContent = isHeads ? HEADS_LABEL : TAILS_LABEL;
+            coinsEl.appendChild(coin);
+        });
+
+        if (count > 1) {
+            summaryEl.textContent = `${heads} ${HEADS_SUMMARY} · ${tails} ${TAILS_SUMMARY}`;
+            summaryEl.classList.remove("hidden");
+        } else {
+            summaryEl.classList.add("hidden");
+        }
+
+        copyBtn.classList.remove("invisible");
+        copyLabel.textContent = COPY_LABEL;
     }
 
-    copyBtn.classList.remove('invisible');
-    copyLabel.textContent = COPY_LABEL;
-  }
+    async function copyResults() {
+        if (!lastResults.length) return;
+        const text = lastResults
+            .map((h) => (h ? HEADS_WORD : TAILS_WORD))
+            .join(", ");
+        await navigator.clipboard.writeText(text);
 
-  async function copyResults() {
-    if (!lastResults.length) return;
-    const text = lastResults.map((h) => (h ? HEADS_WORD : TAILS_WORD)).join(', ');
-    await navigator.clipboard.writeText(text);
+        clipboard.showCopied();
+        copyLabel.textContent = COPIED_LABEL;
 
-    copyIcon.classList.add('hidden');
-    checkIcon.classList.remove('hidden');
-    copyLabel.textContent = COPIED_LABEL;
+        setTimeout(() => {
+            copyLabel.textContent = COPY_LABEL;
+        }, 1500);
+    }
 
-    if (copyRevertTimer) clearTimeout(copyRevertTimer);
-    copyRevertTimer = setTimeout(() => {
-      checkIcon.classList.add('hidden');
-      copyIcon.classList.remove('hidden');
-      copyLabel.textContent = COPY_LABEL;
-    }, 1500);
-  }
-
-  btn.addEventListener('click', flip);
-  copyBtn.addEventListener('click', copyResults);
+    btn.addEventListener("click", flip);
+    copyBtn.addEventListener("click", copyResults);
 </script>
diff --git a/src/components/generators/ListGenerator.astro b/src/components/generators/ListGenerator.astro
index b36bfa9..c724dcb 100644
--- a/src/components/generators/ListGenerator.astro
+++ b/src/components/generators/ListGenerator.astro
@@ -1,179 +1,251 @@
 ---
-import { useT } from '../../i18n/translations';
-const isRu = Astro.url.pathname.startsWith('/ru');
-const T = useT(isRu ? 'ru' : 'en');
+import { useT } from "../../i18n/translations";
+const isRu = Astro.url.pathname.startsWith("/ru");
+const T = useT(isRu ? "ru" : "en");
 ---
 
 <div id="list-generator" class="mt-8">
-  <div class="flex flex-col gap-4">
-    <div>
-      <label for="lst-items" class="block text-sm font-medium text-zinc-400 mb-1">
-        {T.items} <span class="text-zinc-600">({T.itemsOneLine})</span>
-      </label>
-      <textarea
-        id="lst-items"
-        rows="6"
-        placeholder="Alice&#10;Bob&#10;Carol&#10;David"
-        class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
-        aria-label={T.items}
-      ></textarea>
+    <div class="flex flex-col gap-4">
+        <div>
+            <label
+                for="lst-items"
+                class="block text-sm font-medium text-zinc-400 mb-1"
+            >
+                {T.items}
+                <span class="text-zinc-600">({T.itemsOneLine})</span>
+            </label>
+            <textarea
+                id="lst-items"
+                rows="6"
+                placeholder="Alice
+Bob
+Carol
+David"
+                class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
+                aria-label={T.items}></textarea>
+        </div>
+
+        <div class="flex flex-col sm:flex-row gap-4 items-end">
+            <div class="flex-1">
+                <label
+                    for="lst-pick"
+                    class="block text-sm font-medium text-zinc-400 mb-1"
+                    >{T.pick}</label
+                >
+                <input
+                    id="lst-pick"
+                    type="number"
+                    value="1"
+                    min="1"
+                    class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+                    aria-label={T.pick}
+                />
+            </div>
+            <label
+                class="flex items-center gap-2.5 cursor-pointer select-none group pb-2"
+            >
+                <input
+                    id="lst-replace"
+                    type="checkbox"
+                    class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
+                />
+                <span
+                    class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors"
+                    >{T.allowDuplicates}</span
+                >
+            </label>
+        </div>
     </div>
 
-    <div class="flex flex-col sm:flex-row gap-4 items-end">
-      <div class="flex-1">
-        <label for="lst-pick" class="block text-sm font-medium text-zinc-400 mb-1">{T.pick}</label>
-        <input
-          id="lst-pick"
-          type="number"
-          value="1"
-          min="1"
-          class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
-          aria-label={T.pick}
-        />
-      </div>
-      <label class="flex items-center gap-2.5 cursor-pointer select-none group pb-2">
-        <input
-          id="lst-replace"
-          type="checkbox"
-          class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
-        />
-        <span class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">{T.allowDuplicates}</span>
-      </label>
+    <p
+        id="lst-error"
+        role="alert"
+        aria-live="polite"
+        class="mt-3 text-sm text-red-500 hidden"
+    >
+    </p>
+
+    <div class="my-8 min-h-16 flex flex-col items-center justify-center gap-3">
+        <div
+            id="lst-result"
+            class="flex flex-wrap justify-center gap-2"
+            aria-live="polite"
+            aria-label="Picked items"
+        >
+        </div>
+
+        <button
+            id="lst-copy-btn"
+            type="button"
+            aria-label="Copy picked items to clipboard"
+            class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+        >
+            <span id="lst-copy-label">{T.copy}</span>
+            <span id="lst-copy-icon" aria-hidden="true">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2"
+                    ></rect>
+                    <path
+                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    ></path>
+                </svg>
+            </span>
+            <span
+                id="lst-check-icon"
+                class="hidden text-[#534AB7]"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M20 6 9 17l-5-5"></path>
+                </svg>
+            </span>
+        </button>
     </div>
-  </div>
 
-  <p
-    id="lst-error"
-    role="alert"
-    aria-live="polite"
-    class="mt-3 text-sm text-red-500 hidden"
-  ></p>
-
-  <div class="my-8 min-h-16 flex flex-col items-center justify-center gap-3">
-    <div
-      id="lst-result"
-      class="flex flex-wrap justify-center gap-2"
-      aria-live="polite"
-      aria-label="Picked items"
-    ></div>
-
-    <button
-      id="lst-copy-btn"
-      type="button"
-      aria-label="Copy picked items to clipboard"
-      class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
-    >
-      <span id="lst-copy-label">{T.copy}</span>
-      <span id="lst-copy-icon" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
-          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
-        </svg>
-      </span>
-      <span id="lst-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M20 6 9 17l-5-5"/>
-        </svg>
-      </span>
-    </button>
-  </div>
-
-  <div class="flex justify-center">
-    <button
-      id="lst-btn"
-      type="button"
-      class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
-    >
-      {T.pick}
-    </button>
-  </div>
+    <div class="flex justify-center">
+        <button
+            id="lst-btn"
+            type="button"
+            class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
+        >
+            {T.pick}
+        </button>
+    </div>
 </div>
 
 <script>
-  const isRu = document.documentElement.lang === 'ru';
-  const COPY_LABEL   = isRu ? 'Копировать' : 'Copy';
-  const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
-  const ERR_ADD_ONE  = isRu ? 'Добавьте хотя бы один элемент в список.' : 'Add at least one item to the list.';
-  const ERR_PICK_ONE = isRu ? 'Выберите хотя бы 1 элемент.' : 'Pick at least 1 item.';
+    import { CopyFeedback } from "@/lib/client/clipboard";
+    import { createErrorDisplay } from "@/lib/client/validation";
 
-  const itemsInput = document.getElementById('lst-items')    as HTMLTextAreaElement;
-  const pickInput  = document.getElementById('lst-pick')     as HTMLInputElement;
-  const replaceCb  = document.getElementById('lst-replace')  as HTMLInputElement;
-  const btn        = document.getElementById('lst-btn')      as HTMLButtonElement;
-  const copyBtn    = document.getElementById('lst-copy-btn') as HTMLButtonElement;
-  const resultEl   = document.getElementById('lst-result')   as HTMLDivElement;
-  const errorEl    = document.getElementById('lst-error')    as HTMLParagraphElement;
-  const copyLabel  = document.getElementById('lst-copy-label') as HTMLSpanElement;
-  const copyIcon   = document.getElementById('lst-copy-icon')  as HTMLSpanElement;
-  const checkIcon  = document.getElementById('lst-check-icon') as HTMLSpanElement;
+    const isRu = document.documentElement.lang === "ru";
+    const COPY_LABEL = isRu ? "Копировать" : "Copy";
+    const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
+    const ERR_ADD_ONE = isRu
+        ? "Добавьте хотя бы один элемент в список."
+        : "Add at least one item to the list.";
+    const ERR_PICK_ONE = isRu
+        ? "Выберите хотя бы 1 элемент."
+        : "Pick at least 1 item.";
 
-  let lastPicked: string[] = [];
-  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+    const itemsInput = document.getElementById(
+        "lst-items",
+    ) as HTMLTextAreaElement;
+    const pickInput = document.getElementById("lst-pick") as HTMLInputElement;
+    const replaceCb = document.getElementById(
+        "lst-replace",
+    ) as HTMLInputElement;
+    const btn = document.getElementById("lst-btn") as HTMLButtonElement;
+    const copyBtn = document.getElementById(
+        "lst-copy-btn",
+    ) as HTMLButtonElement;
+    const resultEl = document.getElementById("lst-result") as HTMLDivElement;
+    const errorEl = document.getElementById(
+        "lst-error",
+    ) as HTMLParagraphElement;
+    const copyLabel = document.getElementById(
+        "lst-copy-label",
+    ) as HTMLSpanElement;
+    const copyIcon = document.getElementById(
+        "lst-copy-icon",
+    ) as HTMLSpanElement;
+    const checkIcon = document.getElementById(
+        "lst-check-icon",
+    ) as HTMLSpanElement;
 
-  function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
-  function clearError()           { errorEl.textContent = '';  errorEl.classList.add('hidden');    }
+    let lastPicked: string[] = [];
 
-  function pick() {
-    const items = itemsInput.value.split('\n').map((s) => s.trim()).filter(Boolean);
-    const count = parseInt(pickInput.value, 10);
-    const withReplacement = replaceCb.checked;
+    const errors = createErrorDisplay(errorEl);
+    const clipboard = new CopyFeedback(copyIcon, checkIcon);
 
-    if (items.length === 0) { showError(ERR_ADD_ONE); return; }
-    if (!Number.isInteger(count) || count < 1) { showError(ERR_PICK_ONE); return; }
-    if (!withReplacement && count > items.length) {
-      showError(
-        isRu
-          ? `Нельзя выбрать ${count} уникальных элементов из списка ${items.length}.`
-          : `Cannot pick ${count} unique items from a list of ${items.length}.`
-      );
-      return;
+    function pick() {
+        const items = itemsInput.value
+            .split("\n")
+            .map((s) => s.trim())
+            .filter(Boolean);
+        const count = parseInt(pickInput.value, 10);
+        const withReplacement = replaceCb.checked;
+
+        if (items.length === 0) {
+            errors.show(ERR_ADD_ONE);
+            return;
+        }
+        if (!Number.isInteger(count) || count < 1) {
+            errors.show(ERR_PICK_ONE);
+            return;
+        }
+        if (!withReplacement && count > items.length) {
+            errors.show(
+                isRu
+                    ? `Нельзя выбрать ${count} уникальных элементов из списка ${items.length}.`
+                    : `Cannot pick ${count} unique items from a list of ${items.length}.`,
+            );
+            return;
+        }
+
+        errors.clear();
+
+        if (withReplacement) {
+            lastPicked = Array.from(
+                { length: count },
+                () => items[Math.floor(Math.random() * items.length)],
+            );
+        } else {
+            const pool = [...items];
+            for (let i = 0; i < count; i++) {
+                const j = i + Math.floor(Math.random() * (pool.length - i));
+                [pool[i], pool[j]] = [pool[j], pool[i]];
+            }
+            lastPicked = pool.slice(0, count);
+        }
+
+        resultEl.innerHTML = "";
+        lastPicked.forEach((item) => {
+            const chip = document.createElement("span");
+            chip.textContent = item;
+            chip.className =
+                "inline-flex items-center px-3 py-1.5 rounded-full border border-[#534AB7]/40 bg-[#534AB7]/10 text-zinc-100 text-sm font-medium";
+            resultEl.appendChild(chip);
+        });
+
+        copyBtn.classList.remove("invisible");
+        copyLabel.textContent = COPY_LABEL;
     }
 
-    clearError();
+    async function copyPicked() {
+        if (!lastPicked.length) return;
+        await navigator.clipboard.writeText(lastPicked.join(", "));
 
-    if (withReplacement) {
-      lastPicked = Array.from({ length: count }, () => items[Math.floor(Math.random() * items.length)]);
-    } else {
-      const pool = [...items];
-      for (let i = 0; i < count; i++) {
-        const j = i + Math.floor(Math.random() * (pool.length - i));
-        [pool[i], pool[j]] = [pool[j], pool[i]];
-      }
-      lastPicked = pool.slice(0, count);
+        clipboard.showCopied();
+        copyLabel.textContent = COPIED_LABEL;
+
+        setTimeout(() => {
+            copyLabel.textContent = COPY_LABEL;
+        }, 1500);
     }
 
-    resultEl.innerHTML = '';
-    lastPicked.forEach((item) => {
-      const chip = document.createElement('span');
-      chip.textContent = item;
-      chip.className =
-        'inline-flex items-center px-3 py-1.5 rounded-full border border-[#534AB7]/40 bg-[#534AB7]/10 text-zinc-100 text-sm font-medium';
-      resultEl.appendChild(chip);
+    btn.addEventListener("click", pick);
+    copyBtn.addEventListener("click", copyPicked);
+    itemsInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && e.ctrlKey) pick();
     });
-
-    copyBtn.classList.remove('invisible');
-    copyLabel.textContent = COPY_LABEL;
-  }
-
-  async function copyPicked() {
-    if (!lastPicked.length) return;
-    await navigator.clipboard.writeText(lastPicked.join(', '));
-
-    copyIcon.classList.add('hidden');
-    checkIcon.classList.remove('hidden');
-    copyLabel.textContent = COPIED_LABEL;
-
-    if (copyRevertTimer) clearTimeout(copyRevertTimer);
-    copyRevertTimer = setTimeout(() => {
-      checkIcon.classList.add('hidden');
-      copyIcon.classList.remove('hidden');
-      copyLabel.textContent = COPY_LABEL;
-    }, 1500);
-  }
-
-  btn.addEventListener('click', pick);
-  copyBtn.addEventListener('click', copyPicked);
-  itemsInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter' && e.ctrlKey) pick();
-  });
 </script>
diff --git a/src/components/generators/LotteryGenerator.astro b/src/components/generators/LotteryGenerator.astro
index 6952ccf..dba76b1 100644
--- a/src/components/generators/LotteryGenerator.astro
+++ b/src/components/generators/LotteryGenerator.astro
@@ -1,116 +1,224 @@
 ---
-import { useT } from '../../i18n/translations';
-const isRu = Astro.url.pathname.startsWith('/ru');
-const T = useT(isRu ? 'ru' : 'en');
+import { useT } from "../../i18n/translations";
+const isRu = Astro.url.pathname.startsWith("/ru");
+const T = useT(isRu ? "ru" : "en");
 ---
 
 <div id="lottery-generator" class="mt-8">
-  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-    <div>
-      <label for="lg-from" class="block text-sm font-medium text-zinc-400 mb-1">{T.from}</label>
-      <input id="lg-from" type="number" value="1" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors" />
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div>
+            <label
+                for="lg-from"
+                class="block text-sm font-medium text-zinc-400 mb-1"
+                >{T.from}</label
+            >
+            <input
+                id="lg-from"
+                type="number"
+                value="1"
+                class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+            />
+        </div>
+        <div>
+            <label
+                for="lg-to"
+                class="block text-sm font-medium text-zinc-400 mb-1"
+                >{T.to}</label
+            >
+            <input
+                id="lg-to"
+                type="number"
+                value="49"
+                class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+            />
+        </div>
+        <div>
+            <label
+                for="lg-pick"
+                class="block text-sm font-medium text-zinc-400 mb-1"
+                >{T.pick}</label
+            >
+            <input
+                id="lg-pick"
+                type="number"
+                value="6"
+                min="1"
+                class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+            />
+        </div>
     </div>
-    <div>
-      <label for="lg-to" class="block text-sm font-medium text-zinc-400 mb-1">{T.to}</label>
-      <input id="lg-to" type="number" value="49" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors" />
+
+    <p
+        id="lg-error"
+        role="alert"
+        aria-live="polite"
+        class="mt-3 text-sm text-red-500 hidden"
+    >
+    </p>
+
+    <div class="my-10 min-h-24 flex flex-col items-center justify-center gap-4">
+        <div
+            id="lg-result"
+            class="flex flex-wrap justify-center gap-2"
+            aria-live="polite"
+        >
+        </div>
+        <button
+            id="lg-copy-btn"
+            type="button"
+            class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+        >
+            <span id="lg-copy-label">{T.copy}</span>
+            <span id="lg-copy-icon" aria-hidden="true"
+                ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><rect width="14" height="14" x="8" y="8" rx="2" ry="2"
+                    ></rect><path
+                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    ></path></svg
+                ></span
+            >
+            <span
+                id="lg-check-icon"
+                class="hidden text-[#534AB7]"
+                aria-hidden="true"
+                ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><path d="M20 6 9 17l-5-5"></path></svg
+                ></span
+            >
+        </button>
     </div>
-    <div>
-      <label for="lg-pick" class="block text-sm font-medium text-zinc-400 mb-1">{T.pick}</label>
-      <input id="lg-pick" type="number" value="6" min="1" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors" />
+
+    <div class="flex justify-center">
+        <button
+            id="lg-btn"
+            type="button"
+            class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
+        >
+            {T.draw}
+        </button>
     </div>
-  </div>
-
-  <p id="lg-error" role="alert" aria-live="polite" class="mt-3 text-sm text-red-500 hidden"></p>
-
-  <div class="my-10 min-h-24 flex flex-col items-center justify-center gap-4">
-    <div id="lg-result" class="flex flex-wrap justify-center gap-2" aria-live="polite"></div>
-    <button id="lg-copy-btn" type="button" class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded">
-      <span id="lg-copy-label">{T.copy}</span>
-      <span id="lg-copy-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></span>
-      <span id="lg-check-icon" class="hidden text-[#534AB7]" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
-    </button>
-  </div>
-
-  <div class="flex justify-center">
-    <button id="lg-btn" type="button" class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer">
-      {T.draw}
-    </button>
-  </div>
 </div>
 
 <script>
-  const isRu = document.documentElement.lang === 'ru';
-  const ERR_INTEGERS = isRu ? 'Все значения должны быть целыми числами.' : 'All values must be whole numbers.';
-  const ERR_FROM_TO  = isRu ? '«От» должно быть меньше «До».' : '"From" must be less than "To".';
-  const ERR_PICK_MIN = isRu ? '«Выбрать» должно быть не менее 1.' : '"Pick" must be at least 1.';
-  const COPY_LABEL   = isRu ? 'Копировать' : 'Copy';
-  const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
+    import { CopyFeedback } from "@/lib/client/clipboard";
+    import { createErrorDisplay, isInteger } from "@/lib/client/validation";
 
-  const fromInput = document.getElementById('lg-from')     as HTMLInputElement;
-  const toInput   = document.getElementById('lg-to')       as HTMLInputElement;
-  const pickInput = document.getElementById('lg-pick')     as HTMLInputElement;
-  const btn       = document.getElementById('lg-btn')      as HTMLButtonElement;
-  const copyBtn   = document.getElementById('lg-copy-btn') as HTMLButtonElement;
-  const resultEl  = document.getElementById('lg-result')   as HTMLDivElement;
-  const errorEl   = document.getElementById('lg-error')    as HTMLParagraphElement;
-  const copyLabel = document.getElementById('lg-copy-label') as HTMLSpanElement;
-  const copyIcon  = document.getElementById('lg-copy-icon')  as HTMLSpanElement;
-  const checkIcon = document.getElementById('lg-check-icon') as HTMLSpanElement;
-  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+    const isRu = document.documentElement.lang === "ru";
+    const ERR_INTEGERS = isRu
+        ? "Все значения должны быть целыми числами."
+        : "All values must be whole numbers.";
+    const ERR_FROM_TO = isRu
+        ? "«От» должно быть меньше «До»."
+        : '"From" must be less than "To".';
+    const ERR_PICK_MIN = isRu
+        ? "«Выбрать» должно быть не менее 1."
+        : '"Pick" must be at least 1.';
+    const COPY_LABEL = isRu ? "Копировать" : "Copy";
+    const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
 
-  function isInteger(val: string) { return /^-?\d+$/.test(val.trim()); }
-  function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
-  function clearError()           { errorEl.textContent = '';  errorEl.classList.add('hidden');    }
+    const fromInput = document.getElementById("lg-from") as HTMLInputElement;
+    const toInput = document.getElementById("lg-to") as HTMLInputElement;
+    const pickInput = document.getElementById("lg-pick") as HTMLInputElement;
+    const btn = document.getElementById("lg-btn") as HTMLButtonElement;
+    const copyBtn = document.getElementById("lg-copy-btn") as HTMLButtonElement;
+    const resultEl = document.getElementById("lg-result") as HTMLDivElement;
+    const errorEl = document.getElementById("lg-error") as HTMLParagraphElement;
+    const copyLabel = document.getElementById(
+        "lg-copy-label",
+    ) as HTMLSpanElement;
+    const copyIcon = document.getElementById("lg-copy-icon") as HTMLSpanElement;
+    const checkIcon = document.getElementById(
+        "lg-check-icon",
+    ) as HTMLSpanElement;
 
-  function draw() {
-    if (!isInteger(fromInput.value) || !isInteger(toInput.value) || !isInteger(pickInput.value)) { showError(ERR_INTEGERS); return; }
-    const min  = parseInt(fromInput.value, 10);
-    const max  = parseInt(toInput.value, 10);
-    const pick = parseInt(pickInput.value, 10);
-    const pool = max - min + 1;
-    if (min >= max) { showError(ERR_FROM_TO); return; }
-    if (pick < 1)   { showError(ERR_PICK_MIN); return; }
-    if (pick > pool) {
-      showError(isRu ? `Нельзя выбрать ${pick} уникальных чисел из диапазона ${pool}.` : `Cannot pick ${pick} unique numbers from a range of ${pool}.`);
-      return;
+    const errors = createErrorDisplay(errorEl);
+    const clipboard = new CopyFeedback(copyIcon, checkIcon);
+
+    function draw() {
+        if (
+            !isInteger(fromInput.value) ||
+            !isInteger(toInput.value) ||
+            !isInteger(pickInput.value)
+        ) {
+            errors.show(ERR_INTEGERS);
+            return;
+        }
+        const min = parseInt(fromInput.value, 10);
+        const max = parseInt(toInput.value, 10);
+        const pick = parseInt(pickInput.value, 10);
+        const pool = max - min + 1;
+        if (min >= max) {
+            errors.show(ERR_FROM_TO);
+            return;
+        }
+        if (pick < 1) {
+            errors.show(ERR_PICK_MIN);
+            return;
+        }
+        if (pick > pool) {
+            errors.show(
+                isRu
+                    ? `Нельзя выбрать ${pick} уникальных чисел из диапазона ${pool}.`
+                    : `Cannot pick ${pick} unique numbers from a range of ${pool}.`,
+            );
+            return;
+        }
+        errors.clear();
+        const nums = Array.from({ length: pool }, (_, i) => min + i);
+        for (let i = 0; i < pick; i++) {
+            const j = i + Math.floor(Math.random() * (pool - i));
+            [nums[i], nums[j]] = [nums[j], nums[i]];
+        }
+        const picked = nums.slice(0, pick).sort((a, b) => a - b);
+        resultEl.innerHTML = "";
+        picked.forEach((n) => {
+            const ball = document.createElement("span");
+            ball.textContent = String(n);
+            ball.className =
+                "inline-flex items-center justify-center min-w-[2.5rem] h-10 px-2 rounded-full bg-[#534AB7]/15 border border-[#534AB7]/40 text-zinc-100 font-bold tabular-nums text-sm";
+            resultEl.appendChild(ball);
+        });
+        copyBtn.classList.remove("invisible");
+        copyLabel.textContent = COPY_LABEL;
     }
-    clearError();
-    const nums = Array.from({ length: pool }, (_, i) => min + i);
-    for (let i = 0; i < pick; i++) {
-      const j = i + Math.floor(Math.random() * (pool - i));
-      [nums[i], nums[j]] = [nums[j], nums[i]];
+
+    async function copyNumbers() {
+        const balls = resultEl.querySelectorAll("span");
+        const value = Array.from(balls)
+            .map((b) => b.textContent)
+            .join(", ");
+        if (!value) return;
+        await navigator.clipboard.writeText(value);
+        clipboard.showCopied();
+        copyLabel.textContent = COPIED_LABEL;
+        setTimeout(() => {
+            copyLabel.textContent = COPY_LABEL;
+        }, 1500);
     }
-    const picked = nums.slice(0, pick).sort((a, b) => a - b);
-    resultEl.innerHTML = '';
-    picked.forEach((n) => {
-      const ball = document.createElement('span');
-      ball.textContent = String(n);
-      ball.className = 'inline-flex items-center justify-center min-w-[2.5rem] h-10 px-2 rounded-full bg-[#534AB7]/15 border border-[#534AB7]/40 text-zinc-100 font-bold tabular-nums text-sm';
-      resultEl.appendChild(ball);
+
+    btn.addEventListener("click", draw);
+    copyBtn.addEventListener("click", copyNumbers);
+    [fromInput, toInput, pickInput].forEach((input) => {
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") draw();
+        });
     });
-    copyBtn.classList.remove('invisible');
-    copyLabel.textContent = COPY_LABEL;
-  }
-
-  async function copyNumbers() {
-    const balls = resultEl.querySelectorAll('span');
-    const value = Array.from(balls).map((b) => b.textContent).join(', ');
-    if (!value) return;
-    await navigator.clipboard.writeText(value);
-    copyIcon.classList.add('hidden');
-    checkIcon.classList.remove('hidden');
-    copyLabel.textContent = COPIED_LABEL;
-    if (copyRevertTimer) clearTimeout(copyRevertTimer);
-    copyRevertTimer = setTimeout(() => {
-      checkIcon.classList.add('hidden');
-      copyIcon.classList.remove('hidden');
-      copyLabel.textContent = COPY_LABEL;
-    }, 1500);
-  }
-
-  btn.addEventListener('click', draw);
-  copyBtn.addEventListener('click', copyNumbers);
-  [fromInput, toInput, pickInput].forEach((input) => {
-    input.addEventListener('keydown', (e) => { if (e.key === 'Enter') draw(); });
-  });
 </script>
diff --git a/src/components/generators/NumberGenerator.astro b/src/components/generators/NumberGenerator.astro
index 4200483..5ac6594 100644
--- a/src/components/generators/NumberGenerator.astro
+++ b/src/components/generators/NumberGenerator.astro
@@ -1,126 +1,182 @@
 ---
-import { useT } from '../../i18n/translations';
-const isRu = Astro.url.pathname.startsWith('/ru');
-const T = useT(isRu ? 'ru' : 'en');
+import { useT } from "../../i18n/translations";
+const isRu = Astro.url.pathname.startsWith("/ru");
+const T = useT(isRu ? "ru" : "en");
 ---
 
-<div id="number-generator" class="mt-8" data-ru={isRu ? '1' : '0'}>
-  <div class="flex flex-col sm:flex-row gap-4">
-    <div class="flex-1">
-      <label for="ng-from" class="block text-sm font-medium text-zinc-400 mb-1">{T.from}</label>
-      <input
-        id="ng-from"
-        type="number"
-        value="1"
-        class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
-      />
+<div id="number-generator" class="mt-8" data-ru={isRu ? "1" : "0"}>
+    <div class="flex flex-col sm:flex-row gap-4">
+        <div class="flex-1">
+            <label
+                for="ng-from"
+                class="block text-sm font-medium text-zinc-400 mb-1"
+                >{T.from}</label
+            >
+            <input
+                id="ng-from"
+                type="number"
+                value="1"
+                class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+            />
+        </div>
+        <div class="flex-1">
+            <label
+                for="ng-to"
+                class="block text-sm font-medium text-zinc-400 mb-1"
+                >{T.to}</label
+            >
+            <input
+                id="ng-to"
+                type="number"
+                value="100"
+                class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+            />
+        </div>
     </div>
-    <div class="flex-1">
-      <label for="ng-to" class="block text-sm font-medium text-zinc-400 mb-1">{T.to}</label>
-      <input
-        id="ng-to"
-        type="number"
-        value="100"
-        class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
-      />
+
+    <p
+        id="ng-error"
+        role="alert"
+        aria-live="polite"
+        class="mt-2 text-sm text-red-600 hidden"
+    >
+    </p>
+
+    <div class="my-10 min-h-36 flex flex-col items-center justify-center gap-3">
+        <button
+            id="ng-copy-btn"
+            type="button"
+            class="group relative invisible cursor-copy rounded-xl px-3 py-1 -mx-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7]"
+            aria-live="polite"
+        >
+            <span
+                id="ng-result"
+                class="text-8xl font-bold tabular-nums tracking-tight text-zinc-100 select-none group-hover:text-zinc-300"
+                style="transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), opacity 0.08s ease, color 0.15s ease;"
+            ></span>
+            <span
+                id="ng-copy-icon"
+                class="absolute -right-7 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-zinc-500"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><rect width="14" height="14" x="8" y="8" rx="2" ry="2"
+                    ></rect><path
+                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    ></path></svg
+                >
+            </span>
+            <span
+                id="ng-check-icon"
+                class="absolute -right-7 top-1/2 -translate-y-1/2 hidden text-[#534AB7]"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><path d="M20 6 9 17l-5-5"></path></svg
+                >
+            </span>
+        </button>
+        <span
+            id="ng-copied-label"
+            class="text-xs font-medium text-[#534AB7] opacity-0 transition-opacity duration-200"
+            aria-live="polite"
+            aria-atomic="true">{T.copied}</span
+        >
     </div>
-  </div>
 
-  <p id="ng-error" role="alert" aria-live="polite" class="mt-2 text-sm text-red-600 hidden"></p>
-
-  <div class="my-10 min-h-36 flex flex-col items-center justify-center gap-3">
-    <button
-      id="ng-copy-btn"
-      type="button"
-      class="group relative invisible cursor-copy rounded-xl px-3 py-1 -mx-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7]"
-      aria-live="polite"
-    >
-      <span
-        id="ng-result"
-        class="text-8xl font-bold tabular-nums tracking-tight text-zinc-100 select-none group-hover:text-zinc-300"
-        style="transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), opacity 0.08s ease, color 0.15s ease;"
-      ></span>
-      <span id="ng-copy-icon" class="absolute -right-7 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-zinc-500" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
-      </span>
-      <span id="ng-check-icon" class="absolute -right-7 top-1/2 -translate-y-1/2 hidden text-[#534AB7]" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
-      </span>
-    </button>
-    <span id="ng-copied-label" class="text-xs font-medium text-[#534AB7] opacity-0 transition-opacity duration-200" aria-live="polite" aria-atomic="true">{T.copied}</span>
-  </div>
-
-  <div class="flex justify-center">
-    <button
-      id="ng-btn"
-      type="button"
-      class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
-    >
-      {T.generate}
-    </button>
-  </div>
+    <div class="flex justify-center">
+        <button
+            id="ng-btn"
+            type="button"
+            class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
+        >
+            {T.generate}
+        </button>
+    </div>
 </div>
 
 <script>
-  const isRu = document.documentElement.lang === 'ru';
-  const ERR_INTEGERS  = isRu ? 'Оба значения должны быть целыми числами.' : 'Both values must be whole numbers.';
-  const ERR_FROM_TO   = isRu ? '«От» должно быть меньше «До».' : '"From" must be less than "To".';
+    import { CopyFeedback } from "@/lib/client/clipboard";
+    import { createErrorDisplay, isInteger } from "@/lib/client/validation";
+    import { popElement } from "@/lib/client/animations";
 
-  const fromInput    = document.getElementById('ng-from')        as HTMLInputElement;
-  const toInput      = document.getElementById('ng-to')          as HTMLInputElement;
-  const btn          = document.getElementById('ng-btn')         as HTMLButtonElement;
-  const copyBtn      = document.getElementById('ng-copy-btn')    as HTMLButtonElement;
-  const resultEl     = document.getElementById('ng-result')      as HTMLSpanElement;
-  const errorEl      = document.getElementById('ng-error')       as HTMLParagraphElement;
-  const copyIcon     = document.getElementById('ng-copy-icon')   as HTMLSpanElement;
-  const checkIcon    = document.getElementById('ng-check-icon')  as HTMLSpanElement;
-  const copiedLabel  = document.getElementById('ng-copied-label') as HTMLSpanElement;
+    const isRu = document.documentElement.lang === "ru";
+    const ERR_INTEGERS = isRu
+        ? "Оба значения должны быть целыми числами."
+        : "Both values must be whole numbers.";
+    const ERR_FROM_TO = isRu
+        ? "«От» должно быть меньше «До»."
+        : '"From" must be less than "To".';
 
-  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+    const fromInput = document.getElementById("ng-from") as HTMLInputElement;
+    const toInput = document.getElementById("ng-to") as HTMLInputElement;
+    const btn = document.getElementById("ng-btn") as HTMLButtonElement;
+    const copyBtn = document.getElementById("ng-copy-btn") as HTMLButtonElement;
+    const resultEl = document.getElementById("ng-result") as HTMLSpanElement;
+    const errorEl = document.getElementById("ng-error") as HTMLParagraphElement;
+    const copyIcon = document.getElementById("ng-copy-icon") as HTMLSpanElement;
+    const checkIcon = document.getElementById(
+        "ng-check-icon",
+    ) as HTMLSpanElement;
+    const copiedLabel = document.getElementById(
+        "ng-copied-label",
+    ) as HTMLSpanElement;
 
-  function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
-  function clearError()           { errorEl.textContent = '';  errorEl.classList.add('hidden');    }
-  function isInteger(val: string) { return /^-?\d+$/.test(val.trim()); }
+    const errors = createErrorDisplay(errorEl);
+    const clipboard = new CopyFeedback(copyIcon, checkIcon);
 
-  function pop() {
-    resultEl.style.transform = 'scale(1.18)';
-    resultEl.style.opacity = '0.7';
-    requestAnimationFrame(() => requestAnimationFrame(() => {
-      resultEl.style.transform = 'scale(1)';
-      resultEl.style.opacity = '1';
-    }));
-  }
+    function generate() {
+        if (!isInteger(fromInput.value) || !isInteger(toInput.value)) {
+            errors.show(ERR_INTEGERS);
+            return;
+        }
+        const min = parseInt(fromInput.value, 10);
+        const max = parseInt(toInput.value, 10);
+        if (min >= max) {
+            errors.show(ERR_FROM_TO);
+            return;
+        }
+        errors.clear();
+        const result = Math.floor(Math.random() * (max - min + 1)) + min;
+        resultEl.textContent = String(result);
+        copyBtn.classList.remove("invisible");
+        popElement(resultEl);
+    }
 
-  function generate() {
-    if (!isInteger(fromInput.value) || !isInteger(toInput.value)) { showError(ERR_INTEGERS); return; }
-    const min = parseInt(fromInput.value, 10);
-    const max = parseInt(toInput.value, 10);
-    if (min >= max) { showError(ERR_FROM_TO); return; }
-    clearError();
-    const result = Math.floor(Math.random() * (max - min + 1)) + min;
-    resultEl.textContent = String(result);
-    copyBtn.classList.remove('invisible');
-    pop();
-  }
+    async function copyNumber() {
+        const value = resultEl.textContent?.trim();
+        if (!value) return;
+        await navigator.clipboard.writeText(value);
+        clipboard.showCopied();
+        copiedLabel.style.opacity = "1";
+        setTimeout(() => {
+            copiedLabel.style.opacity = "0";
+        }, 1500);
+    }
 
-  async function copyNumber() {
-    const value = resultEl.textContent?.trim();
-    if (!value) return;
-    await navigator.clipboard.writeText(value);
-    copyIcon.classList.add('hidden');
-    checkIcon.classList.remove('hidden');
-    copiedLabel.style.opacity = '1';
-    if (copyRevertTimer) clearTimeout(copyRevertTimer);
-    copyRevertTimer = setTimeout(() => {
-      checkIcon.classList.add('hidden');
-      copyIcon.classList.remove('hidden');
-      copiedLabel.style.opacity = '0';
-    }, 1500);
-  }
-
-  btn.addEventListener('click', generate);
-  copyBtn.addEventListener('click', copyNumber);
-  [fromInput, toInput].forEach((input) => {
-    input.addEventListener('keydown', (e) => { if (e.key === 'Enter') generate(); });
-  });
+    btn.addEventListener("click", generate);
+    copyBtn.addEventListener("click", copyNumber);
+    [fromInput, toInput].forEach((input) => {
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") generate();
+        });
+    });
 </script>
diff --git a/src/components/generators/PasswordGenerator.astro b/src/components/generators/PasswordGenerator.astro
index 129acfd..3fd261a 100644
--- a/src/components/generators/PasswordGenerator.astro
+++ b/src/components/generators/PasswordGenerator.astro
@@ -1,123 +1,227 @@
 ---
-import { useT } from '../../i18n/translations';
-const isRu = Astro.url.pathname.startsWith('/ru');
-const T = useT(isRu ? 'ru' : 'en');
+import { useT } from "../../i18n/translations";
+const isRu = Astro.url.pathname.startsWith("/ru");
+const T = useT(isRu ? "ru" : "en");
 ---
 
 <div id="password-generator" class="mt-8">
-  <div class="flex flex-col gap-5">
-    <div>
-      <div class="flex items-center justify-between mb-1">
-        <label for="pg-length" class="text-sm font-medium text-zinc-400">{T.length}</label>
-        <span id="pg-length-val" class="text-sm font-semibold tabular-nums text-zinc-100">16</span>
-      </div>
-      <input id="pg-length" type="range" min="4" max="64" value="16" class="w-full accent-[#534AB7] cursor-pointer" />
-      <div class="flex justify-between text-xs text-zinc-600 mt-1 select-none"><span>4</span><span>64</span></div>
+    <div class="flex flex-col gap-5">
+        <div>
+            <div class="flex items-center justify-between mb-1">
+                <label for="pg-length" class="text-sm font-medium text-zinc-400"
+                    >{T.length}</label
+                >
+                <span
+                    id="pg-length-val"
+                    class="text-sm font-semibold tabular-nums text-zinc-100"
+                    >16</span
+                >
+            </div>
+            <input
+                id="pg-length"
+                type="range"
+                min="4"
+                max="64"
+                value="16"
+                class="w-full accent-[#534AB7] cursor-pointer"
+            />
+            <div
+                class="flex justify-between text-xs text-zinc-600 mt-1 select-none"
+            >
+                <span>4</span><span>64</span>
+            </div>
+        </div>
+        <div class="grid grid-cols-2 gap-3">
+            {
+                [
+                    { id: "pg-upper", label: T.uppercase },
+                    { id: "pg-lower", label: T.lowercase },
+                    { id: "pg-digits", label: T.digits },
+                    { id: "pg-symbols", label: T.symbols },
+                ].map(({ id, label }) => (
+                    <label class="flex items-center gap-2.5 cursor-pointer select-none group">
+                        <input
+                            id={id}
+                            type="checkbox"
+                            checked
+                            class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
+                        />
+                        <span class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">
+                            {label}
+                        </span>
+                    </label>
+                ))
+            }
+        </div>
     </div>
-    <div class="grid grid-cols-2 gap-3">
-      {[
-        { id: 'pg-upper',   label: T.uppercase },
-        { id: 'pg-lower',   label: T.lowercase },
-        { id: 'pg-digits',  label: T.digits    },
-        { id: 'pg-symbols', label: T.symbols   },
-      ].map(({ id, label }) => (
-        <label class="flex items-center gap-2.5 cursor-pointer select-none group">
-          <input id={id} type="checkbox" checked class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer" />
-          <span class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">{label}</span>
-        </label>
-      ))}
+
+    <p
+        id="pg-error"
+        role="alert"
+        aria-live="polite"
+        class="mt-4 text-sm text-red-500 hidden"
+    >
+    </p>
+
+    <div class="my-10 min-h-24 flex flex-col items-center justify-center gap-3">
+        <button
+            id="pg-copy-btn"
+            type="button"
+            class="group relative invisible cursor-copy rounded-xl px-3 py-2 -mx-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7]"
+        >
+            <span
+                id="pg-result"
+                class="font-mono text-2xl sm:text-3xl font-bold tracking-wide text-zinc-100 break-all select-none group-hover:text-zinc-300"
+                style="transition: opacity 0.08s ease, color 0.15s ease;"
+            ></span>
+            <span
+                id="pg-copy-icon"
+                class="absolute -right-7 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-zinc-500"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><rect width="14" height="14" x="8" y="8" rx="2" ry="2"
+                    ></rect><path
+                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    ></path></svg
+                >
+            </span>
+            <span
+                id="pg-check-icon"
+                class="absolute -right-7 top-1/2 -translate-y-1/2 hidden text-[#534AB7]"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><path d="M20 6 9 17l-5-5"></path></svg
+                >
+            </span>
+        </button>
+        <span
+            id="pg-copied-label"
+            class="text-xs font-medium text-[#534AB7] opacity-0 transition-opacity duration-200"
+            aria-live="polite"
+            aria-atomic="true">{T.copied}</span
+        >
     </div>
-  </div>
 
-  <p id="pg-error" role="alert" aria-live="polite" class="mt-4 text-sm text-red-500 hidden"></p>
-
-  <div class="my-10 min-h-24 flex flex-col items-center justify-center gap-3">
-    <button id="pg-copy-btn" type="button" class="group relative invisible cursor-copy rounded-xl px-3 py-2 -mx-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7]">
-      <span id="pg-result" class="font-mono text-2xl sm:text-3xl font-bold tracking-wide text-zinc-100 break-all select-none group-hover:text-zinc-300" style="transition: opacity 0.08s ease, color 0.15s ease;"></span>
-      <span id="pg-copy-icon" class="absolute -right-7 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-zinc-500" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
-      </span>
-      <span id="pg-check-icon" class="absolute -right-7 top-1/2 -translate-y-1/2 hidden text-[#534AB7]" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
-      </span>
-    </button>
-    <span id="pg-copied-label" class="text-xs font-medium text-[#534AB7] opacity-0 transition-opacity duration-200" aria-live="polite" aria-atomic="true">{T.copied}</span>
-  </div>
-
-  <div class="flex justify-center">
-    <button id="pg-btn" type="button" class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer">
-      {T.generate}
-    </button>
-  </div>
+    <div class="flex justify-center">
+        <button
+            id="pg-btn"
+            type="button"
+            class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
+        >
+            {T.generate}
+        </button>
+    </div>
 </div>
 
 <script>
-  const isRu = document.documentElement.lang === 'ru';
-  const ERR_SELECT_TYPE = isRu ? 'Выберите хотя бы один тип символов.' : 'Select at least one character type.';
+    import { CopyFeedback } from "@/lib/client/clipboard";
+    import { createErrorDisplay } from "@/lib/client/validation";
 
-  const lengthInput  = document.getElementById('pg-length')      as HTMLInputElement;
-  const lengthVal    = document.getElementById('pg-length-val')  as HTMLSpanElement;
-  const upperCb      = document.getElementById('pg-upper')       as HTMLInputElement;
-  const lowerCb      = document.getElementById('pg-lower')       as HTMLInputElement;
-  const digitsCb     = document.getElementById('pg-digits')      as HTMLInputElement;
-  const symbolsCb    = document.getElementById('pg-symbols')     as HTMLInputElement;
-  const btn          = document.getElementById('pg-btn')         as HTMLButtonElement;
-  const copyBtn      = document.getElementById('pg-copy-btn')    as HTMLButtonElement;
-  const resultEl     = document.getElementById('pg-result')      as HTMLSpanElement;
-  const errorEl      = document.getElementById('pg-error')       as HTMLParagraphElement;
-  const copyIcon     = document.getElementById('pg-copy-icon')   as HTMLSpanElement;
-  const checkIcon    = document.getElementById('pg-check-icon')  as HTMLSpanElement;
-  const copiedLabel  = document.getElementById('pg-copied-label') as HTMLSpanElement;
+    const isRu = document.documentElement.lang === "ru";
+    const ERR_SELECT_TYPE = isRu
+        ? "Выберите хотя бы один тип символов."
+        : "Select at least one character type.";
 
-  const UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-  const LOWER = 'abcdefghijklmnopqrstuvwxyz';
-  const DIGITS = '0123456789';
-  const SYMBOLS = '!@#$%^&*()-_=+[]{}|;:,.<>?';
-  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+    const lengthInput = document.getElementById(
+        "pg-length",
+    ) as HTMLInputElement;
+    const lengthVal = document.getElementById(
+        "pg-length-val",
+    ) as HTMLSpanElement;
+    const upperCb = document.getElementById("pg-upper") as HTMLInputElement;
+    const lowerCb = document.getElementById("pg-lower") as HTMLInputElement;
+    const digitsCb = document.getElementById("pg-digits") as HTMLInputElement;
+    const symbolsCb = document.getElementById("pg-symbols") as HTMLInputElement;
+    const btn = document.getElementById("pg-btn") as HTMLButtonElement;
+    const copyBtn = document.getElementById("pg-copy-btn") as HTMLButtonElement;
+    const resultEl = document.getElementById("pg-result") as HTMLSpanElement;
+    const errorEl = document.getElementById("pg-error") as HTMLParagraphElement;
+    const copyIcon = document.getElementById("pg-copy-icon") as HTMLSpanElement;
+    const checkIcon = document.getElementById(
+        "pg-check-icon",
+    ) as HTMLSpanElement;
+    const copiedLabel = document.getElementById(
+        "pg-copied-label",
+    ) as HTMLSpanElement;
 
-  lengthInput.addEventListener('input', () => { lengthVal.textContent = lengthInput.value; });
+    const UPPER = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const LOWER = "abcdefghijklmnopqrstuvwxyz";
+    const DIGITS = "0123456789";
+    const SYMBOLS = "!@#$%^&*()-_=+[]{}|;:,.<>?";
 
-  function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
-  function clearError()           { errorEl.textContent = '';  errorEl.classList.add('hidden');    }
+    lengthInput.addEventListener("input", () => {
+        lengthVal.textContent = lengthInput.value;
+    });
 
-  function generate() {
-    const length = parseInt(lengthInput.value, 10);
-    const pools: string[] = [];
-    if (upperCb.checked)   pools.push(UPPER);
-    if (lowerCb.checked)   pools.push(LOWER);
-    if (digitsCb.checked)  pools.push(DIGITS);
-    if (symbolsCb.checked) pools.push(SYMBOLS);
-    if (pools.length === 0) { showError(ERR_SELECT_TYPE); return; }
-    clearError();
-    const required = pools.map((p) => p[Math.floor(Math.random() * p.length)]);
-    const combined = pools.join('');
-    const rest = Array.from({ length: length - required.length }, () => combined[Math.floor(Math.random() * combined.length)]);
-    const chars = [...required, ...rest];
-    for (let i = chars.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [chars[i], chars[j]] = [chars[j], chars[i]];
+    const errors = createErrorDisplay(errorEl);
+    const clipboard = new CopyFeedback(copyIcon, checkIcon);
+
+    function generate() {
+        const length = parseInt(lengthInput.value, 10);
+        const pools: string[] = [];
+        if (upperCb.checked) pools.push(UPPER);
+        if (lowerCb.checked) pools.push(LOWER);
+        if (digitsCb.checked) pools.push(DIGITS);
+        if (symbolsCb.checked) pools.push(SYMBOLS);
+        if (pools.length === 0) {
+            errors.show(ERR_SELECT_TYPE);
+            return;
+        }
+        errors.clear();
+        const required = pools.map(
+            (p) => p[Math.floor(Math.random() * p.length)],
+        );
+        const combined = pools.join("");
+        const rest = Array.from(
+            { length: length - required.length },
+            () => combined[Math.floor(Math.random() * combined.length)],
+        );
+        const chars = [...required, ...rest];
+        for (let i = chars.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [chars[i], chars[j]] = [chars[j], chars[i]];
+        }
+        resultEl.textContent = chars.join("");
+        resultEl.style.opacity = "0.5";
+        requestAnimationFrame(() =>
+            requestAnimationFrame(() => {
+                resultEl.style.opacity = "1";
+            }),
+        );
+        copyBtn.classList.remove("invisible");
     }
-    resultEl.textContent = chars.join('');
-    resultEl.style.opacity = '0.5';
-    requestAnimationFrame(() => requestAnimationFrame(() => { resultEl.style.opacity = '1'; }));
-    copyBtn.classList.remove('invisible');
-  }
 
-  async function copyPassword() {
-    const value = resultEl.textContent?.trim();
-    if (!value) return;
-    await navigator.clipboard.writeText(value);
-    copyIcon.classList.add('hidden');
-    checkIcon.classList.remove('hidden');
-    copiedLabel.style.opacity = '1';
-    if (copyRevertTimer) clearTimeout(copyRevertTimer);
-    copyRevertTimer = setTimeout(() => {
-      checkIcon.classList.add('hidden');
-      copyIcon.classList.remove('hidden');
-      copiedLabel.style.opacity = '0';
-    }, 1500);
-  }
+    async function copyPassword() {
+        const value = resultEl.textContent?.trim();
+        if (!value) return;
+        await navigator.clipboard.writeText(value);
+        clipboard.showCopied();
+        copiedLabel.style.opacity = "1";
+        setTimeout(() => {
+            copiedLabel.style.opacity = "0";
+        }, 1500);
+    }
 
-  btn.addEventListener('click', generate);
-  copyBtn.addEventListener('click', copyPassword);
+    btn.addEventListener("click", generate);
+    copyBtn.addEventListener("click", copyPassword);
 </script>
diff --git a/src/components/generators/UuidGenerator.astro b/src/components/generators/UuidGenerator.astro
index 1948870..b3b56e4 100644
--- a/src/components/generators/UuidGenerator.astro
+++ b/src/components/generators/UuidGenerator.astro
@@ -1,191 +1,263 @@
 ---
-import { useT } from '../../i18n/translations';
-const isRu = Astro.url.pathname.startsWith('/ru');
-const T = useT(isRu ? 'ru' : 'en');
+import { useT } from "../../i18n/translations";
+const isRu = Astro.url.pathname.startsWith("/ru");
+const T = useT(isRu ? "ru" : "en");
 ---
 
 <div id="uuid-generator" class="mt-8">
-  <div class="flex flex-col gap-4">
-    <div>
-      <label class="block text-sm font-medium text-zinc-400 mb-2">{T.type}</label>
-      <div class="flex flex-wrap gap-2" role="radiogroup" aria-label={T.type}>
-        {[
-          { value: 'uuid',   label: 'UUID v4' },
-          { value: 'hex',    label: 'Hex' },
-          { value: 'base64', label: 'Base64' },
-        ].map(({ value, label }) => (
-          <label class="cursor-pointer">
-            <input type="radio" name="ug-type" value={value} class="sr-only peer" checked={value === 'uuid'} />
-            <span class="inline-flex items-center justify-center px-4 h-9 rounded-lg border border-zinc-700 text-sm font-medium text-zinc-400 peer-checked:border-[#534AB7] peer-checked:text-[#534AB7] peer-checked:bg-[#534AB7]/10 hover:border-zinc-500 transition-colors select-none cursor-pointer">
-              {label}
+    <div class="flex flex-col gap-4">
+        <div>
+            <label class="block text-sm font-medium text-zinc-400 mb-2"
+                >{T.type}</label
+            >
+            <div
+                class="flex flex-wrap gap-2"
+                role="radiogroup"
+                aria-label={T.type}
+            >
+                {
+                    [
+                        { value: "uuid", label: "UUID v4" },
+                        { value: "hex", label: "Hex" },
+                        { value: "base64", label: "Base64" },
+                    ].map(({ value, label }) => (
+                        <label class="cursor-pointer">
+                            <input
+                                type="radio"
+                                name="ug-type"
+                                value={value}
+                                class="sr-only peer"
+                                checked={value === "uuid"}
+                            />
+                            <span class="inline-flex items-center justify-center px-4 h-9 rounded-lg border border-zinc-700 text-sm font-medium text-zinc-400 peer-checked:border-[#534AB7] peer-checked:text-[#534AB7] peer-checked:bg-[#534AB7]/10 hover:border-zinc-500 transition-colors select-none cursor-pointer">
+                                {label}
+                            </span>
+                        </label>
+                    ))
+                }
+            </div>
+        </div>
+
+        <div class="flex flex-col sm:flex-row gap-4">
+            <div id="ug-length-wrap" class="flex-1 hidden">
+                <label
+                    for="ug-length"
+                    class="block text-sm font-medium text-zinc-400 mb-1"
+                    >{T.lengthBytes}</label
+                >
+                <input
+                    id="ug-length"
+                    type="number"
+                    value="16"
+                    min="4"
+                    max="64"
+                    class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+                    aria-label={T.lengthBytes}
+                />
+            </div>
+            <div class="flex-1">
+                <label
+                    for="ug-count"
+                    class="block text-sm font-medium text-zinc-400 mb-1"
+                    >{T.count}</label
+                >
+                <input
+                    id="ug-count"
+                    type="number"
+                    value="1"
+                    min="1"
+                    max="20"
+                    class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+                    aria-label={T.count}
+                />
+            </div>
+        </div>
+    </div>
+
+    <div
+        class="my-8 min-h-16 flex flex-col gap-2"
+        aria-live="polite"
+        aria-label="Generated tokens"
+    >
+        <div id="ug-result" class="flex flex-col gap-2"></div>
+
+        <button
+            id="ug-copy-btn"
+            type="button"
+            aria-label="Copy all tokens to clipboard"
+            class="invisible self-start inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded mt-1"
+        >
+            <span id="ug-copy-label">{T.copyAll}</span>
+            <span id="ug-copy-icon" aria-hidden="true">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2"
+                    ></rect>
+                    <path
+                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    ></path>
+                </svg>
             </span>
-          </label>
-        ))}
-      </div>
+            <span
+                id="ug-check-icon"
+                class="hidden text-[#534AB7]"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M20 6 9 17l-5-5"></path>
+                </svg>
+            </span>
+        </button>
     </div>
 
-    <div class="flex flex-col sm:flex-row gap-4">
-      <div id="ug-length-wrap" class="flex-1 hidden">
-        <label for="ug-length" class="block text-sm font-medium text-zinc-400 mb-1">{T.lengthBytes}</label>
-        <input
-          id="ug-length"
-          type="number"
-          value="16"
-          min="4"
-          max="64"
-          class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
-          aria-label={T.lengthBytes}
-        />
-      </div>
-      <div class="flex-1">
-        <label for="ug-count" class="block text-sm font-medium text-zinc-400 mb-1">{T.count}</label>
-        <input
-          id="ug-count"
-          type="number"
-          value="1"
-          min="1"
-          max="20"
-          class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
-          aria-label={T.count}
-        />
-      </div>
+    <div class="flex justify-center">
+        <button
+            id="ug-btn"
+            type="button"
+            class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
+        >
+            {T.generate}
+        </button>
     </div>
-  </div>
-
-  <div class="my-8 min-h-16 flex flex-col gap-2" aria-live="polite" aria-label="Generated tokens">
-    <div id="ug-result" class="flex flex-col gap-2"></div>
-
-    <button
-      id="ug-copy-btn"
-      type="button"
-      aria-label="Copy all tokens to clipboard"
-      class="invisible self-start inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded mt-1"
-    >
-      <span id="ug-copy-label">{T.copyAll}</span>
-      <span id="ug-copy-icon" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
-          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
-        </svg>
-      </span>
-      <span id="ug-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M20 6 9 17l-5-5"/>
-        </svg>
-      </span>
-    </button>
-  </div>
-
-  <div class="flex justify-center">
-    <button
-      id="ug-btn"
-      type="button"
-      class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
-    >
-      {T.generate}
-    </button>
-  </div>
 </div>
 
 <script>
-  const isRu = document.documentElement.lang === 'ru';
-  const COPY_ALL_LABEL = isRu ? 'Копировать всё' : 'Copy all';
-  const COPIED_LABEL   = isRu ? 'Скопировано' : 'Copied';
+    import { CopyFeedback } from "@/lib/client/clipboard";
 
-  const lengthWrap  = document.getElementById('ug-length-wrap') as HTMLDivElement;
-  const lengthInput = document.getElementById('ug-length')      as HTMLInputElement;
-  const countInput  = document.getElementById('ug-count')       as HTMLInputElement;
-  const btn         = document.getElementById('ug-btn')         as HTMLButtonElement;
-  const copyBtn     = document.getElementById('ug-copy-btn')    as HTMLButtonElement;
-  const resultEl    = document.getElementById('ug-result')      as HTMLDivElement;
-  const copyLabel   = document.getElementById('ug-copy-label')  as HTMLSpanElement;
-  const copyIcon    = document.getElementById('ug-copy-icon')   as HTMLSpanElement;
-  const checkIcon   = document.getElementById('ug-check-icon')  as HTMLSpanElement;
+    const isRu = document.documentElement.lang === "ru";
+    const COPY_ALL_LABEL = isRu ? "Копировать всё" : "Copy all";
+    const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
 
-  let lastTokens: string[] = [];
-  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+    const lengthWrap = document.getElementById(
+        "ug-length-wrap",
+    ) as HTMLDivElement;
+    const lengthInput = document.getElementById(
+        "ug-length",
+    ) as HTMLInputElement;
+    const countInput = document.getElementById("ug-count") as HTMLInputElement;
+    const btn = document.getElementById("ug-btn") as HTMLButtonElement;
+    const copyBtn = document.getElementById("ug-copy-btn") as HTMLButtonElement;
+    const resultEl = document.getElementById("ug-result") as HTMLDivElement;
+    const copyLabel = document.getElementById(
+        "ug-copy-label",
+    ) as HTMLSpanElement;
+    const copyIcon = document.getElementById("ug-copy-icon") as HTMLSpanElement;
+    const checkIcon = document.getElementById(
+        "ug-check-icon",
+    ) as HTMLSpanElement;
 
-  function getType(): string {
-    return (document.querySelector('input[name="ug-type"]:checked') as HTMLInputElement)?.value ?? 'uuid';
-  }
+    let lastTokens: string[] = [];
 
-  document.querySelectorAll('input[name="ug-type"]').forEach((radio) => {
-    radio.addEventListener('change', () => {
-      const type = getType();
-      lengthWrap.classList.toggle('hidden', type === 'uuid');
-    });
-  });
+    const clipboard = new CopyFeedback(copyIcon, checkIcon);
 
-  function uuidV4(): string {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-      const r = (crypto.getRandomValues(new Uint8Array(1))[0] & 0xf);
-      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
-    });
-  }
+    function getType(): string {
+        return (
+            (
+                document.querySelector(
+                    'input[name="ug-type"]:checked',
+                ) as HTMLInputElement
+            )?.value ?? "uuid"
+        );
+    }
 
-  function randomBytes(n: number): Uint8Array {
-    const buf = new Uint8Array(n);
-    crypto.getRandomValues(buf);
-    return buf;
-  }
-
-  function toHex(bytes: Uint8Array): string {
-    return Array.from(bytes).map((b) => b.toString(16).padStart(2, '0')).join('');
-  }
-
-  function toBase64(bytes: Uint8Array): string {
-    return btoa(String.fromCharCode(...bytes))
-      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-  }
-
-  function generate() {
-    const type  = getType();
-    const count = parseInt(countInput.value, 10);
-    const length = parseInt(lengthInput.value, 10);
-
-    lastTokens = Array.from({ length: count }, () => {
-      if (type === 'uuid')   return uuidV4();
-      if (type === 'hex')    return toHex(randomBytes(length));
-      return toBase64(randomBytes(length));
+    document.querySelectorAll('input[name="ug-type"]').forEach((radio) => {
+        radio.addEventListener("change", () => {
+            const type = getType();
+            lengthWrap.classList.toggle("hidden", type === "uuid");
+        });
     });
 
-    resultEl.innerHTML = '';
-    lastTokens.forEach((token) => {
-      const row = document.createElement('div');
-      row.className =
-        'flex items-center justify-between gap-3 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2';
+    function uuidV4(): string {
+        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+            const r = crypto.getRandomValues(new Uint8Array(1))[0] & 0xf;
+            return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+        });
+    }
 
-      const code = document.createElement('code');
-      code.textContent = token;
-      code.className = 'text-sm font-mono text-zinc-100 break-all';
+    function randomBytes(n: number): Uint8Array {
+        const buf = new Uint8Array(n);
+        crypto.getRandomValues(buf);
+        return buf;
+    }
 
-      row.appendChild(code);
-      resultEl.appendChild(row);
+    function toHex(bytes: Uint8Array): string {
+        return Array.from(bytes)
+            .map((b) => b.toString(16).padStart(2, "0"))
+            .join("");
+    }
+
+    function toBase64(bytes: Uint8Array): string {
+        return btoa(String.fromCharCode(...bytes))
+            .replace(/\+/g, "-")
+            .replace(/\//g, "_")
+            .replace(/=+$/, "");
+    }
+
+    function generate() {
+        const type = getType();
+        const count = parseInt(countInput.value, 10);
+        const length = parseInt(lengthInput.value, 10);
+
+        lastTokens = Array.from({ length: count }, () => {
+            if (type === "uuid") return uuidV4();
+            if (type === "hex") return toHex(randomBytes(length));
+            return toBase64(randomBytes(length));
+        });
+
+        resultEl.innerHTML = "";
+        lastTokens.forEach((token) => {
+            const row = document.createElement("div");
+            row.className =
+                "flex items-center justify-between gap-3 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2";
+
+            const code = document.createElement("code");
+            code.textContent = token;
+            code.className = "text-sm font-mono text-zinc-100 break-all";
+
+            row.appendChild(code);
+            resultEl.appendChild(row);
+        });
+
+        copyBtn.classList.remove("invisible");
+        copyLabel.textContent = COPY_ALL_LABEL;
+    }
+
+    async function copyAll() {
+        if (!lastTokens.length) return;
+        await navigator.clipboard.writeText(lastTokens.join("\n"));
+
+        clipboard.showCopied();
+        copyLabel.textContent = COPIED_LABEL;
+
+        setTimeout(() => {
+            copyLabel.textContent = COPY_ALL_LABEL;
+        }, 1500);
+    }
+
+    btn.addEventListener("click", generate);
+    copyBtn.addEventListener("click", copyAll);
+    [countInput, lengthInput].forEach((el) => {
+        el.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") generate();
+        });
     });
-
-    copyBtn.classList.remove('invisible');
-    copyLabel.textContent = COPY_ALL_LABEL;
-  }
-
-  async function copyAll() {
-    if (!lastTokens.length) return;
-    await navigator.clipboard.writeText(lastTokens.join('\n'));
-
-    copyIcon.classList.add('hidden');
-    checkIcon.classList.remove('hidden');
-    copyLabel.textContent = COPIED_LABEL;
-
-    if (copyRevertTimer) clearTimeout(copyRevertTimer);
-    copyRevertTimer = setTimeout(() => {
-      checkIcon.classList.add('hidden');
-      copyIcon.classList.remove('hidden');
-      copyLabel.textContent = COPY_ALL_LABEL;
-    }, 1500);
-  }
-
-  btn.addEventListener('click', generate);
-  copyBtn.addEventListener('click', copyAll);
-  [countInput, lengthInput].forEach((el) => {
-    el.addEventListener('keydown', (e) => { if (e.key === 'Enter') generate(); });
-  });
 </script>
diff --git a/src/components/generators/WheelSpinner.astro b/src/components/generators/WheelSpinner.astro
index 166a2ac..b255ca6 100644
--- a/src/components/generators/WheelSpinner.astro
+++ b/src/components/generators/WheelSpinner.astro
@@ -1,332 +1,436 @@
 ---
-import { useT } from '../../i18n/translations';
-const isRu = Astro.url.pathname.startsWith('/ru');
-const T = useT(isRu ? 'ru' : 'en');
+import { useT } from "../../i18n/translations";
+const isRu = Astro.url.pathname.startsWith("/ru");
+const T = useT(isRu ? "ru" : "en");
 ---
 
 <div id="wheel-spinner" class="mt-8">
-
-  <!-- Items input -->
-  <div class="flex flex-col gap-3">
-    <div>
-      <label for="ws-items" class="block text-sm font-medium text-zinc-400 mb-1">
-        {T.items} <span class="text-zinc-600">({T.itemsOneLine224})</span>
-      </label>
-      <textarea
-        id="ws-items"
-        rows="6"
-        class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
-      >Alice
-Bob
-Carol
-Dave
-Eve
-Frank</textarea>
-    </div>
-    <p id="ws-error" role="alert" aria-live="polite" class="text-sm text-red-500 hidden"></p>
-  </div>
-
-  <!-- Wheel area -->
-  <div class="flex flex-col items-center mt-8 gap-6">
-    <div class="relative w-full max-w-[480px]" id="ws-wheel-wrap">
-      <!-- Pointer: triangle pointing down at top-center of wheel -->
-      <div
-        id="ws-pointer"
-        class="absolute left-1/2 top-0 z-10 -translate-x-1/2 -translate-y-1/2"
-        style="width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid #534AB7;filter:drop-shadow(0 2px 8px rgba(83,74,183,0.6));"
-        aria-hidden="true"
-      ></div>
-      <canvas
-        id="ws-canvas"
-        class="block w-full"
-        aria-label="Wheel of fortune"
-      ></canvas>
+    <!-- Items input -->
+    <div class="flex flex-col gap-3">
+        <div>
+            <label
+                for="ws-items"
+                class="block text-sm font-medium text-zinc-400 mb-1"
+            >
+                {T.items}
+                <span class="text-zinc-600">({T.itemsOneLine224})</span>
+            </label>
+            <textarea
+                id="ws-items"
+                rows="6"
+                class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
+                >Alice Bob Carol Dave Eve Frank</textarea
+            >
+        </div>
+        <p
+            id="ws-error"
+            role="alert"
+            aria-live="polite"
+            class="text-sm text-red-500 hidden"
+        >
+        </p>
     </div>
 
-    <button
-      id="ws-spin-btn"
-      type="button"
-      class="w-full sm:w-auto px-10 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
-    >
-      {T.spin}
-    </button>
-  </div>
+    <!-- Wheel area -->
+    <div class="flex flex-col items-center mt-8 gap-6">
+        <div class="relative w-full max-w-[480px]" id="ws-wheel-wrap">
+            <!-- Pointer: triangle pointing down at top-center of wheel -->
+            <div
+                id="ws-pointer"
+                class="absolute left-1/2 top-0 z-10 -translate-x-1/2 -translate-y-1/2"
+                style="width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid #534AB7;filter:drop-shadow(0 2px 8px rgba(83,74,183,0.6));"
+                aria-hidden="true"
+            >
+            </div>
+            <canvas
+                id="ws-canvas"
+                class="block w-full"
+                aria-label="Wheel of fortune"></canvas>
+        </div>
 
-  <!-- Result card (hidden until first spin) -->
-  <div id="ws-result-card" class="hidden mt-10 flex flex-col items-center gap-3" aria-live="polite">
-    <p id="ws-winner-label" class="text-xs font-semibold uppercase tracking-widest text-zinc-500">{T.winner}</p>
-    <span id="ws-result-text" class="text-3xl sm:text-4xl font-bold text-zinc-100 text-center break-words max-w-full"></span>
-    <button
-      id="ws-copy-btn"
-      type="button"
-      class="inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
-    >
-      <span id="ws-copy-label">{T.copy}</span>
-      <span id="ws-copy-icon" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
-          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
-        </svg>
-      </span>
-      <span id="ws-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M20 6 9 17l-5-5"/>
-        </svg>
-      </span>
-    </button>
-  </div>
+        <button
+            id="ws-spin-btn"
+            type="button"
+            class="w-full sm:w-auto px-10 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+            {T.spin}
+        </button>
+    </div>
 
+    <!-- Result card (hidden until first spin) -->
+    <div
+        id="ws-result-card"
+        class="hidden mt-10 flex flex-col items-center gap-3"
+        aria-live="polite"
+    >
+        <p
+            id="ws-winner-label"
+            class="text-xs font-semibold uppercase tracking-widest text-zinc-500"
+        >
+            {T.winner}
+        </p>
+        <span
+            id="ws-result-text"
+            class="text-3xl sm:text-4xl font-bold text-zinc-100 text-center break-words max-w-full"
+        ></span>
+        <button
+            id="ws-copy-btn"
+            type="button"
+            class="inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+        >
+            <span id="ws-copy-label">{T.copy}</span>
+            <span id="ws-copy-icon" aria-hidden="true">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2"
+                    ></rect>
+                    <path
+                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    ></path>
+                </svg>
+            </span>
+            <span
+                id="ws-check-icon"
+                class="hidden text-[#534AB7]"
+                aria-hidden="true"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M20 6 9 17l-5-5"></path>
+                </svg>
+            </span>
+        </button>
+    </div>
 </div>
 
 <style>
-  @keyframes ws-pop {
-    from { transform: scale(0.6); opacity: 0; }
-    to   { transform: scale(1);   opacity: 1; }
-  }
-  .ws-pop { animation: ws-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
+    @keyframes ws-pop {
+        from {
+            transform: scale(0.6);
+            opacity: 0;
+        }
+        to {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+    .ws-pop {
+        animation: ws-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    }
 </style>
 
 <script>
-  const isRu = document.documentElement.lang === 'ru';
-  const COPY_LABEL   = isRu ? 'Копировать' : 'Copy';
-  const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
-  const ERR_MIN2     = isRu ? 'Добавьте хотя бы 2 элемента.' : 'Add at least 2 items.';
-  const ERR_MAX24    = isRu ? 'Максимум 24 элемента.' : 'Maximum 24 items.';
+    import { CopyFeedback } from "@/lib/client/clipboard";
+    import { createErrorDisplay } from "@/lib/client/validation";
 
-  const COLORS = ['#534AB7','#0F6E56','#993C1D','#185FA5','#854F0B','#993556','#3B6D11','#A32D2D'];
-  const TAU = 2 * Math.PI;
+    const isRu = document.documentElement.lang === "ru";
+    const COPY_LABEL = isRu ? "Копировать" : "Copy";
+    const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
+    const ERR_MIN2 = isRu
+        ? "Добавьте хотя бы 2 элемента."
+        : "Add at least 2 items.";
+    const ERR_MAX24 = isRu ? "Максимум 24 элемента." : "Maximum 24 items.";
 
-  const textarea   = document.getElementById('ws-items')       as HTMLTextAreaElement;
-  const errorEl    = document.getElementById('ws-error')       as HTMLParagraphElement;
-  const canvas     = document.getElementById('ws-canvas')      as HTMLCanvasElement;
-  const spinBtn    = document.getElementById('ws-spin-btn')    as HTMLButtonElement;
-  const resultCard = document.getElementById('ws-result-card') as HTMLDivElement;
-  const resultText = document.getElementById('ws-result-text') as HTMLSpanElement;
-  const copyBtn    = document.getElementById('ws-copy-btn')    as HTMLButtonElement;
-  const copyLabel  = document.getElementById('ws-copy-label')  as HTMLSpanElement;
-  const copyIcon   = document.getElementById('ws-copy-icon')   as HTMLSpanElement;
-  const checkIcon  = document.getElementById('ws-check-icon')  as HTMLSpanElement;
-  const wheelWrap  = document.getElementById('ws-wheel-wrap')  as HTMLDivElement;
+    const COLORS = [
+        "#534AB7",
+        "#0F6E56",
+        "#993C1D",
+        "#185FA5",
+        "#854F0B",
+        "#993556",
+        "#3B6D11",
+        "#A32D2D",
+    ];
+    const TAU = 2 * Math.PI;
 
-  const ctx = canvas.getContext('2d')!;
-  let items: string[] = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank'];
-  let currentRotation = 0;
-  let isSpinning = false;
-  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+    const textarea = document.getElementById("ws-items") as HTMLTextAreaElement;
+    const errorEl = document.getElementById("ws-error") as HTMLParagraphElement;
+    const canvas = document.getElementById("ws-canvas") as HTMLCanvasElement;
+    const spinBtn = document.getElementById("ws-spin-btn") as HTMLButtonElement;
+    const resultCard = document.getElementById(
+        "ws-result-card",
+    ) as HTMLDivElement;
+    const resultText = document.getElementById(
+        "ws-result-text",
+    ) as HTMLSpanElement;
+    const copyBtn = document.getElementById("ws-copy-btn") as HTMLButtonElement;
+    const copyLabel = document.getElementById(
+        "ws-copy-label",
+    ) as HTMLSpanElement;
+    const copyIcon = document.getElementById("ws-copy-icon") as HTMLSpanElement;
+    const checkIcon = document.getElementById(
+        "ws-check-icon",
+    ) as HTMLSpanElement;
+    const wheelWrap = document.getElementById(
+        "ws-wheel-wrap",
+    ) as HTMLDivElement;
 
-  // ── Canvas sizing ────────────────────────────────────────────────
-  function resize() {
-    const size = Math.min(wheelWrap.offsetWidth, 480);
-    canvas.width = size;
-    canvas.height = size;
-    draw(currentRotation);
-  }
-  new ResizeObserver(resize).observe(wheelWrap);
-  resize();
+    const ctx = canvas.getContext("2d")!;
+    let items: string[] = ["Alice", "Bob", "Carol", "Dave", "Eve", "Frank"];
+    let currentRotation = 0;
+    let isSpinning = false;
 
-  // ── Drawing ──────────────────────────────────────────────────────
-  function clampText(text: string, maxWidth: number): string {
-    if (ctx.measureText(text).width <= maxWidth) return text;
-    let s = text;
-    while (s.length > 0 && ctx.measureText(s + '…').width > maxWidth) s = s.slice(0, -1);
-    return s + '…';
-  }
+    const errors = createErrorDisplay(errorEl);
+    const clipboard = new CopyFeedback(copyIcon, checkIcon);
 
-  function draw(rotation: number) {
-    const size = canvas.width;
-    const r = size / 2 - 6;
-    const n = items.length;
-    const seg = TAU / n;
+    // ── Canvas sizing ────────────────────────────────────────────────
+    function resize() {
+        const size = Math.min(wheelWrap.offsetWidth, 480);
+        canvas.width = size;
+        canvas.height = size;
+        draw(currentRotation);
+    }
+    new ResizeObserver(resize).observe(wheelWrap);
+    resize();
 
-    ctx.clearRect(0, 0, size, size);
-    ctx.save();
-    ctx.translate(size / 2, size / 2);
-
-    for (let i = 0; i < n; i++) {
-      const a0 = -Math.PI / 2 + i * seg + rotation;
-      const a1 = a0 + seg;
-
-      ctx.beginPath();
-      ctx.moveTo(0, 0);
-      ctx.arc(0, 0, r, a0, a1);
-      ctx.closePath();
-      ctx.fillStyle = COLORS[i % COLORS.length];
-      ctx.fill();
-
-      ctx.strokeStyle = 'rgba(255,255,255,0.13)';
-      ctx.lineWidth = 1.5;
-      ctx.stroke();
-
-      const mid = a0 + seg / 2;
-      const fontSize = Math.max(9, Math.min(14, Math.floor(r * seg * 0.4)));
-      ctx.save();
-      ctx.rotate(mid);
-      ctx.textAlign = 'right';
-      ctx.fillStyle = 'rgba(255,255,255,0.92)';
-      ctx.font = `bold ${fontSize}px 'Space Grotesk', sans-serif`;
-      const label = clampText(items[i], r * 0.54);
-      ctx.fillText(label, r - 10, fontSize * 0.38);
-      ctx.restore();
+    // ── Drawing ──────────────────────────────────────────────────────
+    function clampText(text: string, maxWidth: number): string {
+        if (ctx.measureText(text).width <= maxWidth) return text;
+        let s = text;
+        while (s.length > 0 && ctx.measureText(s + "…").width > maxWidth)
+            s = s.slice(0, -1);
+        return s + "…";
     }
 
-    ctx.beginPath();
-    ctx.arc(0, 0, r, 0, TAU);
-    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
-    ctx.lineWidth = 3;
-    ctx.stroke();
+    function draw(rotation: number) {
+        const size = canvas.width;
+        const r = size / 2 - 6;
+        const n = items.length;
+        const seg = TAU / n;
 
-    ctx.beginPath();
-    ctx.arc(0, 0, 15, 0, TAU);
-    ctx.fillStyle = '#18181b';
-    ctx.fill();
-    ctx.strokeStyle = 'rgba(255,255,255,0.22)';
-    ctx.lineWidth = 2;
-    ctx.stroke();
+        ctx.clearRect(0, 0, size, size);
+        ctx.save();
+        ctx.translate(size / 2, size / 2);
 
-    ctx.restore();
-  }
+        for (let i = 0; i < n; i++) {
+            const a0 = -Math.PI / 2 + i * seg + rotation;
+            const a1 = a0 + seg;
 
-  // ── Items ────────────────────────────────────────────────────────
-  function parseItems(): string[] | null {
-    const lines = textarea.value.split('\n').map(l => l.trim()).filter(Boolean);
-    if (lines.length < 2)  { showError(ERR_MIN2); return null; }
-    if (lines.length > 24) { showError(ERR_MAX24); return null; }
-    clearError();
-    return lines;
-  }
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            ctx.arc(0, 0, r, a0, a1);
+            ctx.closePath();
+            ctx.fillStyle = COLORS[i % COLORS.length];
+            ctx.fill();
 
-  function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
-  function clearError()           { errorEl.textContent = '';  errorEl.classList.add('hidden');    }
+            ctx.strokeStyle = "rgba(255,255,255,0.13)";
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
 
-  function applyItems() {
-    const parsed = parseItems();
-    if (parsed) { items = parsed; draw(currentRotation); }
-  }
+            const mid = a0 + seg / 2;
+            const fontSize = Math.max(
+                9,
+                Math.min(14, Math.floor(r * seg * 0.4)),
+            );
+            ctx.save();
+            ctx.rotate(mid);
+            ctx.textAlign = "right";
+            ctx.fillStyle = "rgba(255,255,255,0.92)";
+            ctx.font = `bold ${fontSize}px 'Space Grotesk', sans-serif`;
+            const label = clampText(items[i], r * 0.54);
+            ctx.fillText(label, r - 10, fontSize * 0.38);
+            ctx.restore();
+        }
 
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
-  textarea.addEventListener('input', () => {
-    if (debounceTimer) clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(applyItems, 300);
-  });
+        ctx.beginPath();
+        ctx.arc(0, 0, r, 0, TAU);
+        ctx.strokeStyle = "rgba(255,255,255,0.2)";
+        ctx.lineWidth = 3;
+        ctx.stroke();
 
-  // ── Spin ─────────────────────────────────────────────────────────
-  spinBtn.addEventListener('click', () => {
-    if (isSpinning) return;
-    const parsed = parseItems();
-    if (!parsed) return;
-    items = parsed;
-    draw(currentRotation);
+        ctx.beginPath();
+        ctx.arc(0, 0, 15, 0, TAU);
+        ctx.fillStyle = "#18181b";
+        ctx.fill();
+        ctx.strokeStyle = "rgba(255,255,255,0.22)";
+        ctx.lineWidth = 2;
+        ctx.stroke();
 
-    const n = items.length;
-    const seg = TAU / n;
-    const winnerIdx = Math.floor(Math.random() * n);
-
-    const desiredPhase = (-(winnerIdx + 0.5) * seg % TAU + TAU) % TAU;
-    const currentPhase = ((currentRotation % TAU) + TAU) % TAU;
-    let delta = (desiredPhase - currentPhase + TAU) % TAU;
-    if (delta < 0.5) delta += TAU;
-
-    const jitter = (Math.random() - 0.5) * seg * 0.55;
-    const fullTurns = 5 + Math.floor(Math.random() * 3);
-    const totalDelta = fullTurns * TAU + delta + jitter;
-
-    const startRot = currentRotation;
-    const duration = 4000 + Math.random() * 2000;
-    const t0 = performance.now();
-
-    isSpinning = true;
-    spinBtn.disabled = true;
-    resultCard.classList.add('hidden');
-
-    (function animate(now: number) {
-      const p = Math.min((now - t0) / duration, 1);
-      const eased = 1 - Math.pow(1 - p, 3);
-      currentRotation = startRot + totalDelta * eased;
-      draw(currentRotation);
-
-      if (p < 1) {
-        requestAnimationFrame(animate);
-      } else {
-        currentRotation = startRot + totalDelta;
-        isSpinning = false;
-        spinBtn.disabled = false;
-        showResult(items[winnerIdx]);
-        spawnConfetti();
-      }
-    })(t0);
-  });
-
-  // ── Result ───────────────────────────────────────────────────────
-  function showResult(winner: string) {
-    resultText.textContent = winner;
-    resultCard.classList.remove('hidden');
-    resultText.classList.remove('ws-pop');
-    void resultText.offsetWidth;
-    resultText.classList.add('ws-pop');
-    copyLabel.textContent = COPY_LABEL;
-    copyIcon.classList.remove('hidden');
-    checkIcon.classList.add('hidden');
-  }
-
-  copyBtn.addEventListener('click', async () => {
-    const value = resultText.textContent?.trim();
-    if (!value) return;
-    await navigator.clipboard.writeText(value);
-    copyIcon.classList.add('hidden');
-    checkIcon.classList.remove('hidden');
-    copyLabel.textContent = COPIED_LABEL;
-    if (copyRevertTimer) clearTimeout(copyRevertTimer);
-    copyRevertTimer = setTimeout(() => {
-      checkIcon.classList.add('hidden');
-      copyIcon.classList.remove('hidden');
-      copyLabel.textContent = COPY_LABEL;
-    }, 1500);
-  });
-
-  // ── Confetti ─────────────────────────────────────────────────────
-  function spawnConfetti() {
-    const cr = canvas.getBoundingClientRect();
-    const cx = cr.left + cr.width / 2;
-    const cy = cr.top  + cr.height / 2;
-
-    type Particle = { el: HTMLDivElement; x: number; y: number; vx: number; vy: number };
-    const particles: Particle[] = [];
-
-    for (let i = 0; i < 60; i++) {
-      const el = document.createElement('div');
-      const w = 4 + Math.random() * 6;
-      const h = 4 + Math.random() * 6;
-      el.style.cssText = `position:fixed;width:${w}px;height:${h}px;` +
-        `background:${COLORS[i % COLORS.length]};border-radius:1px;` +
-        `pointer-events:none;left:${cx}px;top:${cy}px;will-change:transform,opacity;z-index:9999;`;
-      document.body.appendChild(el);
-
-      const angle = Math.random() * TAU;
-      const speed = 4 + Math.random() * 7;
-      particles.push({
-        el, x: cx, y: cy,
-        vx: Math.cos(angle) * speed,
-        vy: -(Math.abs(Math.sin(angle)) * speed + 2 + Math.random() * 4),
-      });
+        ctx.restore();
     }
 
-    const dur = 2500;
-    const t0 = performance.now();
-    const gravity = 0.2;
+    // ── Items ────────────────────────────────────────────────────────
+    function parseItems(): string[] | null {
+        const lines = textarea.value
+            .split("\n")
+            .map((l) => l.trim())
+            .filter(Boolean);
+        if (lines.length < 2) {
+            errors.show(ERR_MIN2);
+            return null;
+        }
+        if (lines.length > 24) {
+            errors.show(ERR_MAX24);
+            return null;
+        }
+        errors.clear();
+        return lines;
+    }
 
-    (function tick(now: number) {
-      const elapsed = now - t0;
-      if (elapsed >= dur) { particles.forEach(p => p.el.remove()); return; }
-      const opacity = 1 - elapsed / dur;
-      particles.forEach(p => {
-        p.vy += gravity;
-        p.vx *= 0.99;
-        p.x += p.vx;
-        p.y += p.vy;
-        p.el.style.transform = `translate(${p.x - cx}px,${p.y - cy}px) rotate(${p.x * 2}deg)`;
-        p.el.style.opacity = String(Math.max(0, opacity));
-      });
-      requestAnimationFrame(tick);
-    })(t0);
-  }
+    function applyItems() {
+        const parsed = parseItems();
+        if (parsed) {
+            items = parsed;
+            draw(currentRotation);
+        }
+    }
+
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    textarea.addEventListener("input", () => {
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(applyItems, 300);
+    });
+
+    // ── Spin ─────────────────────────────────────────────────────────
+    spinBtn.addEventListener("click", () => {
+        if (isSpinning) return;
+        const parsed = parseItems();
+        if (!parsed) return;
+        items = parsed;
+        draw(currentRotation);
+
+        const n = items.length;
+        const seg = TAU / n;
+        const winnerIdx = Math.floor(Math.random() * n);
+
+        const desiredPhase = (((-(winnerIdx + 0.5) * seg) % TAU) + TAU) % TAU;
+        const currentPhase = ((currentRotation % TAU) + TAU) % TAU;
+        let delta = (desiredPhase - currentPhase + TAU) % TAU;
+        if (delta < 0.5) delta += TAU;
+
+        const jitter = (Math.random() - 0.5) * seg * 0.55;
+        const fullTurns = 5 + Math.floor(Math.random() * 3);
+        const totalDelta = fullTurns * TAU + delta + jitter;
+
+        const startRot = currentRotation;
+        const duration = 4000 + Math.random() * 2000;
+        const t0 = performance.now();
+
+        isSpinning = true;
+        spinBtn.disabled = true;
+        resultCard.classList.add("hidden");
+
+        (function animate(now: number) {
+            const p = Math.min((now - t0) / duration, 1);
+            const eased = 1 - Math.pow(1 - p, 3);
+            currentRotation = startRot + totalDelta * eased;
+            draw(currentRotation);
+
+            if (p < 1) {
+                requestAnimationFrame(animate);
+            } else {
+                currentRotation = startRot + totalDelta;
+                isSpinning = false;
+                spinBtn.disabled = false;
+                showResult(items[winnerIdx]);
+                spawnConfetti();
+            }
+        })(t0);
+    });
+
+    // ── Result ───────────────────────────────────────────────────────
+    function showResult(winner: string) {
+        resultText.textContent = winner;
+        resultCard.classList.remove("hidden");
+        resultText.classList.remove("ws-pop");
+        void resultText.offsetWidth;
+        resultText.classList.add("ws-pop");
+        copyLabel.textContent = COPY_LABEL;
+        copyIcon.classList.remove("hidden");
+        checkIcon.classList.add("hidden");
+    }
+
+    async function copyResult() {
+        const value = resultText.textContent?.trim();
+        if (!value) return;
+        await navigator.clipboard.writeText(value);
+        clipboard.showCopied();
+        copyLabel.textContent = COPIED_LABEL;
+        setTimeout(() => {
+            copyLabel.textContent = COPY_LABEL;
+        }, 1500);
+    }
+
+    copyBtn.addEventListener("click", copyResult);
+
+    // ── Confetti ─────────────────────────────────────────────────────
+    function spawnConfetti() {
+        const cr = canvas.getBoundingClientRect();
+        const cx = cr.left + cr.width / 2;
+        const cy = cr.top + cr.height / 2;
+
+        type Particle = {
+            el: HTMLDivElement;
+            x: number;
+            y: number;
+            vx: number;
+            vy: number;
+        };
+        const particles: Particle[] = [];
+
+        for (let i = 0; i < 60; i++) {
+            const el = document.createElement("div");
+            const w = 4 + Math.random() * 6;
+            const h = 4 + Math.random() * 6;
+            el.style.cssText =
+                `position:fixed;width:${w}px;height:${h}px;` +
+                `background:${COLORS[i % COLORS.length]};border-radius:1px;` +
+                `pointer-events:none;left:${cx}px;top:${cy}px;will-change:transform,opacity;z-index:9999;`;
+            document.body.appendChild(el);
+
+            const angle = Math.random() * TAU;
+            const speed = 4 + Math.random() * 7;
+            particles.push({
+                el,
+                x: cx,
+                y: cy,
+                vx: Math.cos(angle) * speed,
+                vy: -(
+                    Math.abs(Math.sin(angle)) * speed +
+                    2 +
+                    Math.random() * 4
+                ),
+            });
+        }
+
+        const dur = 2500;
+        const t0 = performance.now();
+        const gravity = 0.2;
+
+        (function tick(now: number) {
+            const elapsed = now - t0;
+            if (elapsed >= dur) {
+                particles.forEach((p) => p.el.remove());
+                return;
+            }
+            const opacity = 1 - elapsed / dur;
+            particles.forEach((p) => {
+                p.vy += gravity;
+                p.vx *= 0.99;
+                p.x += p.vx;
+                p.y += p.vy;
+                p.el.style.transform = `translate(${p.x - cx}px,${p.y - cy}px) rotate(${p.x * 2}deg)`;
+                p.el.style.opacity = String(Math.max(0, opacity));
+            });
+            requestAnimationFrame(tick);
+        })(t0);
+    }
 </script>
diff --git a/src/lib/client/animations.ts b/src/lib/client/animations.ts
new file mode 100644
index 0000000..123714c
--- /dev/null
+++ b/src/lib/client/animations.ts
@@ -0,0 +1,10 @@
+export function popElement(el: HTMLElement) {
+  el.style.transform = 'scale(1.18)';
+  el.style.opacity = '0.7';
+  requestAnimationFrame(() =>
+    requestAnimationFrame(() => {
+      el.style.transform = 'scale(1)';
+      el.style.opacity = '1';
+    })
+  );
+}
diff --git a/src/lib/client/clipboard.ts b/src/lib/client/clipboard.ts
new file mode 100644
index 0000000..d4fc76a
--- /dev/null
+++ b/src/lib/client/clipboard.ts
@@ -0,0 +1,25 @@
+export class CopyFeedback {
+  private timer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(
+    private copyIcon: HTMLElement,
+    private checkIcon: HTMLElement,
+    private duration = 1500
+  ) {}
+
+  showCopied() {
+    this.copyIcon.classList.add('hidden');
+    this.checkIcon.classList.remove('hidden');
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = setTimeout(() => this.revert(), this.duration);
+  }
+
+  revert() {
+    this.checkIcon.classList.add('hidden');
+    this.copyIcon.classList.remove('hidden');
+  }
+
+  cleanup() {
+    if (this.timer) clearTimeout(this.timer);
+  }
+}
diff --git a/src/lib/client/validation.ts b/src/lib/client/validation.ts
new file mode 100644
index 0000000..4f873e6
--- /dev/null
+++ b/src/lib/client/validation.ts
@@ -0,0 +1,16 @@
+export function createErrorDisplay(errorEl: HTMLElement) {
+  return {
+    show(msg: string) {
+      errorEl.textContent = msg;
+      errorEl.classList.remove('hidden');
+    },
+    clear() {
+      errorEl.textContent = '';
+      errorEl.classList.add('hidden');
+    },
+  };
+}
+
+export function isInteger(val: string): boolean {
+  return /^-?\d+$/.test(val.trim());
+}