Stage 7 (wip): UI shell, libs, mock transport, screens (lobby->game), e2e smoke

- plain Svelte 5 + TS + Vite (no SvelteKit); CSS-token design system (Telegram-ready), hash router, IndexedDB session
- pure libs: domain model, premium/value maps ported from solver, board replay, placement state machine, i18n en/ru
- in-memory mock transport + seed data; pnpm start runs lobby->active game->board with no backend
- board: pointer-drag + tap placement, MakeMove (popup / 1s-hold commit), two-state zoom, blank chooser, exchange, hint, word-check, chat
- Playwright smoke (mock) green; svelte-check clean; mock bundle ~37 KB gzip

ui/src/game/Controls.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import type { EvalResult } from '../lib/model';
+  import { t } from '../lib/i18n/index.svelte';
+
+  let {
+    preview,
+    hints,
+    busy,
+    ambiguous,
+    dir,
+    ondraw,
+    onskip,
+    onshuffle,
+    onhint,
+    ondir,
+  }: {
+    preview: EvalResult | null;
+    hints: number;
+    busy: boolean;
+    ambiguous: boolean;
+    dir: 'H' | 'V';
+    ondraw: () => void;
+    onskip: () => void;
+    onshuffle: () => void;
+    onhint: () => void;
+    ondir: () => void;
+  } = $props();
+</script>
+
+<div class="controls">
+  <div class="preview">
+    {#if preview}
+      {#if preview.legal}
+        <span class="ok">{t('game.preview', { n: preview.score })}</span>
+      {:else}
+        <span class="bad">{t('game.previewIllegal')}</span>
+      {/if}
+    {/if}
+    {#if ambiguous}
+      <button class="dir" onclick={ondir} title="direction">{dir === 'H' ? '↔' : '↕'}</button>
+    {/if}
+  </div>
+  <div class="row">
+    <button onclick={ondraw} disabled={busy}>{t('game.draw')}</button>
+    <button onclick={onskip} disabled={busy}>{t('game.skip')}</button>
+    <button onclick={onshuffle} disabled={busy}>{t('game.shuffle')}</button>
+    <button class="hint" onclick={onhint} disabled={busy || hints <= 0}>
+      {t('game.hint')}{hints > 0 ? ` (${hints})` : ''}
+    </button>
+  </div>
+</div>
+
+<style>
+  .controls {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .preview {
+    min-height: 22px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 600;
+  }
+  .ok {
+    color: var(--ok);
+  }
+  .bad {
+    color: var(--danger);
+  }
+  .dir {
+    margin-left: auto;
+    width: 34px;
+    height: 28px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: var(--radius-sm);
+    font-size: 1rem;
+  }
+  .row {
+    display: flex;
+    gap: 6px;
+  }
+  .row button {
+    flex: 1;
+    padding: 11px 6px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: var(--radius-sm);
+    font-weight: 600;
+  }
+  .row button:disabled {
+    opacity: 0.45;
+  }
+  .hint {
+    color: var(--accent);
+  }
+</style>