feat(trigcircle): Фаза 4 — таблица значений (особые углы, KaTeX)

Тумблер «Таблица значений» → компактная таблица первой четверти (0/30/45/60/90°)
с точными sin/cos/tg/ctg на KaTeX (строится один раз). Строка опорного острого угла
текущего положения подсвечивается (150° → подсвечена строка 30°). По симметрии/приведению
(Фаза 2) это покрывает все 16 углов.

Glue: _trigBuildValueTable (один раз) + trigToggleTable; подсветка строки в _trigUpdateUI
по refDeg. Панель: тумблер + #trig-table.

Verified: node --check; headless-смоук 10/10 (5 строк, заголовки, значения 30/45/90,
tg «не опр.», toggle показ/скрытие). Эмодзи нет.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/js/labs/trigcircle.js

@@ -1169,6 +1169,31 @@ if (typeof window !== 'undefined') window.TrigCircleSim = TrigCircleSim;
   }
   function trigEqKey(e) { if (e && (e.key === 'Enter' || e.keyCode === 13)) trigSolve(); }
 
+  /* ── Таблица значений (первая четверть) — строится один раз, KaTeX ── */
+  function _trigBuildValueTable() {
+    const el = document.getElementById('trig-table');
+    if (!el || el.dataset.built) return;
+    const cols = [['sin', '#EF476F'], ['cos', '#06D6E0'], ['tg', '#FFD166'], ['ctg', '#7BF5A4']];
+    const head = '<tr><th style="text-align:left;padding:2px 4px;color:var(--text-3);font-weight:700">α</th>' +
+      cols.map(([n, c]) => `<th style="padding:2px 4px;color:${c};font-weight:700">${n}</th>`).join('') + '</tr>';
+    const body = [0, 30, 45, 60, 90].map(deg => {
+      const a = deg * Math.PI / 180, sn = Math.sin(a), cs = Math.cos(a);
+      const tn = Math.abs(cs) > 1e-9 ? sn / cs : undefined;
+      const ct = Math.abs(sn) > 1e-9 ? cs / sn : undefined;
+      const cell = v => `<td style="padding:3px 4px;text-align:center">${_tex(_latexVal(v))}</td>`;
+      return `<tr data-deg="${deg}"><td style="padding:3px 4px;font-weight:700">${deg}°</td>${cell(sn)}${cell(cs)}${cell(tn)}${cell(ct)}</tr>`;
+    }).join('');
+    el.innerHTML = `<table style="width:100%;border-collapse:collapse;font-size:0.74rem">${head}${body}</table>`;
+    el.dataset.built = '1';
+  }
+  function trigToggleTable(rowEl) {
+    const on = rowEl.classList.toggle('active');
+    const el = document.getElementById('trig-table');
+    if (!el) return;
+    if (on) { _trigBuildValueTable(); el.style.display = ''; if (trigSim) _trigUpdateUI(trigSim.stats()); }
+    else el.style.display = 'none';
+  }
+
   function _trigUpdateUI(s) {
     const _f = v => {
       if (v === undefined) return '—';
@@ -1247,6 +1272,15 @@ if (typeof window !== 'undefined') window.TrigCircleSim = TrigCircleSim;
       }
     }
 
+    // Подсветка строки таблицы значений (по опорному острому углу)
+    const tbl = document.getElementById('trig-table');
+    if (tbl && tbl.dataset.built && typeof tbl.querySelectorAll === 'function') {
+      const beta = Math.round(s.refDeg);
+      tbl.querySelectorAll('tr[data-deg]').forEach(tr => {
+        tr.style.background = (Number(tr.dataset.deg) === beta) ? 'rgba(155,93,229,0.18)' : '';
+      });
+    }
+
     // Stats bar — значения тоже KaTeX (дроби/корни)
     document.getElementById('trigbar-angle').textContent = degStr;
     setMathVal('trigbar-sin', s.sin);

frontend/labs-bodies.html

@@ -599,6 +599,15 @@
             <div id="trig-eq-formula" style="font-size:0.82rem;color:var(--text);margin-bottom:4px;line-height:1.7"></div>
             <div id="trig-eq-sols" style="font-size:0.72rem;color:var(--text-3);margin-bottom:14px"></div>
 
+            <!-- Values table (first quadrant), toggle -->
+            <label class="tri-layer-row" style="margin-bottom:8px" onclick="trigToggleTable(this)">
+              <span class="tri-dot" style="background:var(--violet);box-shadow:0 0 5px var(--violet)"></span>
+              <span class="tri-layer-name">Таблица значений</span>
+              <span class="tri-layer-hint" style="color:var(--text-3)">0–90°</span>
+              <span class="tri-toggle"></span>
+            </label>
+            <div id="trig-table" style="display:none;margin-bottom:14px;background:rgba(155,93,229,0.05);border:1px solid rgba(155,93,229,0.13);border-radius:10px;padding:6px 8px;overflow-x:auto"></div>
+
             <!-- Notable angles -->
             <div class="gp-section-title" style="margin-bottom:8px">Табличные углы</div>
             <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px">