feat: добавить лендинг, переписать документацию и унифицировать генерацию

- Добавлен лендинг на React + Vite с темой и карточками навигации
- Добавлен модуль темы (src/infra/theme) с поддержкой system/light/dark
- Документация переписана: разделы «Модули», «Сегменты», «Компонент»
- Добавлена страница навигации docs/index.md
- Генерация llms.txt переведена на парсинг сайдбара VitePress
- Описания для llms.txt вынесены в frontmatter (поле description)
- Удалена директория generated/, архив ZIP убран с лендинга
- Удалены английская документация, README_RU, concat-md.js
- Добавлен vite-плагин для UTF-8 заголовков текстовых артефактов
- Caddyfile обновлён: charset=utf-8 для llms.txt и ARCHITECTURE.md

src/infra/theme/config/theme.config.ts

@@ -0,0 +1,20 @@
+import type { ThemeMode } from '../types/theme-mode.type'
+
+export const THEME_STORAGE_KEY = 'slm-theme'
+
+export const THEME_TOGGLE_OPTIONS: ReadonlyArray<{
+  value: Exclude<ThemeMode, 'system'>
+  ariaLabel: string
+  title: string
+}> = [
+  {
+    value: 'light',
+    ariaLabel: 'Включить светлую тему',
+    title: 'Светлая',
+  },
+  {
+    value: 'dark',
+    ariaLabel: 'Включить тёмную тему',
+    title: 'Тёмная',
+  },
+]

src/infra/theme/hooks/use-theme.hook.ts

@@ -0,0 +1,79 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+
+import { THEME_STORAGE_KEY } from '../config/theme.config'
+import type { ResolvedTheme, ThemeMode } from '../types/theme-mode.type'
+
+const DARK_THEME_QUERY = '(prefers-color-scheme: dark)'
+
+const canUseDom = () => typeof window !== 'undefined' && typeof document !== 'undefined'
+
+const isThemeMode = (value: string | null): value is ThemeMode => {
+  return value === 'system' || value === 'dark' || value === 'light'
+}
+
+const getSystemTheme = (): ResolvedTheme => {
+  if (!canUseDom()) return 'light'
+
+  return window.matchMedia(DARK_THEME_QUERY).matches ? 'dark' : 'light'
+}
+
+const resolveTheme = (theme: ThemeMode): ResolvedTheme => {
+  return theme === 'system' ? getSystemTheme() : theme
+}
+
+const getStoredTheme = (): ThemeMode => {
+  if (!canUseDom()) return 'system'
+
+  const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY)
+
+  return isThemeMode(storedTheme) ? storedTheme : 'system'
+}
+
+const applyTheme = (theme: ThemeMode) => {
+  if (!canUseDom()) return
+
+  const resolvedTheme = resolveTheme(theme)
+
+  document.documentElement.dataset.theme = theme
+  document.documentElement.style.colorScheme = resolvedTheme
+
+  if (theme === 'system') {
+    window.localStorage.removeItem(THEME_STORAGE_KEY)
+    return
+  }
+
+  window.localStorage.setItem(THEME_STORAGE_KEY, theme)
+}
+
+export function useTheme() {
+  const [theme, setTheme] = useState<ThemeMode>(getStoredTheme)
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() => resolveTheme(getStoredTheme()))
+
+  useLayoutEffect(() => {
+    applyTheme(theme)
+    setResolvedTheme(resolveTheme(theme))
+  }, [theme])
+
+  useEffect(() => {
+    if (!canUseDom()) return undefined
+
+    const mediaQuery = window.matchMedia(DARK_THEME_QUERY)
+    const handleSystemThemeChange = () => {
+      if (theme !== 'system') return
+
+      const nextResolvedTheme = resolveTheme(theme)
+      document.documentElement.style.colorScheme = nextResolvedTheme
+      setResolvedTheme(nextResolvedTheme)
+    }
+
+    mediaQuery.addEventListener('change', handleSystemThemeChange)
+
+    return () => mediaQuery.removeEventListener('change', handleSystemThemeChange)
+  }, [theme])
+
+  return {
+    theme,
+    resolvedTheme,
+    setTheme,
+  }
+}

src/infra/theme/index.ts

@@ -0,0 +1,6 @@
+import './styles/theme.css'
+
+export { ThemeToggle } from './ui/theme-toggle'
+export { useTheme } from './hooks/use-theme.hook'
+
+export type { ResolvedTheme, ThemeMode } from './types/theme-mode.type'

src/infra/theme/styles/theme-toggle.module.css

@@ -0,0 +1,55 @@
+.root {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2px;
+  height: 36px;
+  padding: 4px;
+  border: 1px solid var(--border-soft);
+  border-radius: 999px;
+  background: var(--surface-soft);
+}
+
+.option {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  color: var(--text-muted);
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+}
+
+.option:hover {
+  color: var(--text-primary);
+}
+
+.option:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+.option[data-active='true'] {
+  color: var(--text-primary);
+  background: var(--page-bg);
+  box-shadow: 0 1px 2px var(--shadow-subtle);
+}
+
+.icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+}

src/infra/theme/styles/theme.css

@@ -0,0 +1,85 @@
+:root {
+  color-scheme: light;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  --page-bg: #f7f7fa;
+  --surface: #f0f1f5;
+  --surface-soft: #ffffff;
+  --surface-strong: #ffffff;
+  --surface-raised: #ffffff;
+  --surface-muted: #eef0ff;
+  --text-primary: #181a22;
+  --text-secondary: #5d6474;
+  --text-muted: #8b93a5;
+  --border-soft: #dfe2ea;
+  --border-strong: #c8ceda;
+  --accent-cool: #6677ff;
+  --focus-ring: rgba(102, 119, 255, 0.56);
+  --shadow-subtle: rgba(25, 31, 54, 0.1);
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --page-bg: #1b1c21;
+  --surface: #24262d;
+  --surface-soft: #202229;
+  --surface-strong: #2a2c34;
+  --surface-raised: #202229;
+  --surface-muted: #2b2e3b;
+  --text-primary: #f1f3f8;
+  --text-secondary: #a9afbf;
+  --text-muted: #747c90;
+  --border-soft: #343741;
+  --border-strong: #454957;
+  --accent-cool: #8492ff;
+  --focus-ring: rgba(132, 146, 255, 0.66);
+  --shadow-subtle: rgba(0, 0, 0, 0.24);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    color-scheme: dark;
+    --page-bg: #1b1c21;
+    --surface: #24262d;
+    --surface-soft: #202229;
+    --surface-strong: #2a2c34;
+    --surface-raised: #202229;
+    --surface-muted: #2b2e3b;
+    --text-primary: #f1f3f8;
+    --text-secondary: #a9afbf;
+    --text-muted: #747c90;
+    --border-soft: #343741;
+    --border-strong: #454957;
+    --accent-cool: #8492ff;
+    --focus-ring: rgba(132, 146, 255, 0.66);
+    --shadow-subtle: rgba(0, 0, 0, 0.24);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background: var(--page-bg);
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  background: var(--page-bg);
+  color: var(--text-primary);
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  color: inherit;
+}

src/infra/theme/types/theme-mode.type.ts

@@ -0,0 +1,3 @@
+export type ThemeMode = 'system' | 'dark' | 'light'
+
+export type ResolvedTheme = 'dark' | 'light'

src/infra/theme/ui/theme-toggle.tsx

@@ -0,0 +1,61 @@
+import { THEME_TOGGLE_OPTIONS } from '../config/theme.config'
+import { useTheme } from '../hooks/use-theme.hook'
+import type { ThemeMode } from '../types/theme-mode.type'
+import type { ReactNode } from 'react'
+import styles from '../styles/theme-toggle.module.css'
+
+const iconByTheme: Record<Exclude<ThemeMode, 'system'>, ReactNode> = {
+  light: (
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  ),
+  dark: (
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+}
+
+type ThemeToggleProps = {
+  className?: string
+}
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { theme, resolvedTheme, setTheme } = useTheme()
+  const rootClassName = className ? `${styles.root} ${className}` : styles.root
+  const toggleTheme = (value: Exclude<ThemeMode, 'system'>) => {
+    setTheme(theme === value ? 'system' : value)
+  }
+
+  return (
+    <div className={rootClassName} role="group" aria-label="Тема" data-resolved-theme={resolvedTheme}>
+      {THEME_TOGGLE_OPTIONS.map((option) => (
+        <button
+          className={styles.option}
+          type="button"
+          aria-pressed={theme === option.value}
+          aria-label={option.ariaLabel}
+          title={option.title}
+          data-active={theme === option.value}
+          key={option.value}
+          onClick={() => toggleTheme(option.value)}
+        >
+          <span className={styles.icon}>{iconByTheme[option.value]}</span>
+        </button>
+      ))}
+    </div>
+  )
+}