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/App.tsx

@@ -0,0 +1,5 @@
+import { HomeScreen } from './screens/home'
+
+export default function App() {
+  return <HomeScreen />
+}

src/env.d.ts

@@ -0,0 +1 @@
+declare const __BUILD_VERSION__: string

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>
+  )
+}

src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/screens/home/config/home-screen.config.ts

@@ -0,0 +1,30 @@
+export const repositoryUrl = 'https://gromlab.ru/gromov/slm-design'
+
+export const homeCards = [
+  {
+    title: 'Документация',
+    description: 'Слои, модули, сегменты и правила зависимостей для frontend-проектов.',
+    href: '/docs/',
+    cta: 'Открыть →',
+  },
+  {
+    title: 'ARCHITECTURE.md',
+    description: 'Полная версия архитектуры в одном файле',
+    href: '/ARCHITECTURE.md',
+    cta: 'Открыть →',
+  },
+  {
+    title: 'Ассистенту',
+    description: 'Карта документации для AI-агентов:',
+    actions: [
+      {
+        href: '/llms.txt',
+        label: 'llms.txt',
+      },
+      {
+        href: '/llms-full.txt',
+        label: 'llms-full.txt',
+      },
+    ],
+  },
+] as const

src/screens/home/home.screen.tsx

@@ -0,0 +1,66 @@
+import { ThemeToggle } from '../../infra/theme'
+import { homeCards, repositoryUrl } from './config/home-screen.config'
+import styles from './styles/home-screen.module.css'
+
+const version = __BUILD_VERSION__ as string
+
+export function HomeScreen() {
+  return (
+    <main className={styles.page}>
+      <section className={styles.hero}>
+        <h1 className={styles.title}>SLM Design</h1>
+        <p className={styles.lead}>
+          Scoped Layered Module Design — соглашения по архитектуре frontend-приложений:
+          слои, модули, сегменты, публичные API и направление зависимостей.
+        </p>
+
+        <div className={styles.controls}>
+          <a className={styles.repoLink} href={repositoryUrl} target="_blank" rel="noopener noreferrer">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z" />
+            </svg>
+            <span>Репозиторий</span>
+          </a>
+          <ThemeToggle className={styles.themeToggle} />
+        </div>
+      </section>
+
+      <section className={styles.cards} aria-label="Быстрые переходы">
+        {homeCards.map((card) => {
+          if ('href' in card) {
+            return (
+              <a
+                className={`${styles.card} ${styles.cardLink}`}
+                href={card.href}
+                download={'download' in card ? card.download : undefined}
+                key={card.title}
+              >
+                <h2>{card.title}</h2>
+                <p>{card.description}</p>
+                <span className={styles.cardCta}>{card.cta}</span>
+              </a>
+            )
+          }
+
+          return (
+            <article className={styles.card} key={card.title}>
+              <h2>{card.title}</h2>
+              <p>{card.description}</p>
+              <div className={styles.cardActions}>
+                {card.actions.map((action) => (
+                  <a className={styles.cardAction} href={action.href} key={action.href}>
+                    {action.label}
+                  </a>
+                ))}
+              </div>
+            </article>
+          )
+        })}
+      </section>
+
+      <footer className={styles.footer}>
+        <span>{version}</span>
+      </footer>
+    </main>
+  )
+}

src/screens/home/index.ts

@@ -0,0 +1 @@
+export { HomeScreen } from './home.screen'

src/screens/home/styles/home-screen.module.css

@@ -0,0 +1,216 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 64px;
+  min-height: 100vh;
+  padding: 48px 32px;
+  background: var(--page-bg);
+  color: var(--text-primary);
+}
+
+.hero {
+  text-align: center;
+}
+
+.title {
+  margin: 0 0 16px;
+  color: var(--accent-cool);
+  font-size: 56px;
+  font-weight: 750;
+  letter-spacing: -0.035em;
+  line-height: 1;
+}
+
+.lead {
+  max-width: 740px;
+  margin: 0 auto;
+  color: var(--text-secondary);
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.controls > * {
+  box-sizing: border-box;
+  height: 36px;
+}
+
+.repoLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+  border: 1px solid var(--border-soft);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  background: var(--surface-soft);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: border-color 150ms ease, color 150ms ease;
+}
+
+.repoLink:hover {
+  border-color: var(--accent-cool);
+  color: var(--text-primary);
+}
+
+.repoLink svg {
+  flex-shrink: 0;
+}
+
+.themeToggle {
+  flex-shrink: 0;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 178px;
+  padding: 24px;
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  color: inherit;
+  background: var(--surface-soft);
+  text-decoration: none;
+}
+
+.cardLink {
+  transition: border-color 200ms ease, transform 200ms ease;
+}
+
+.cardLink:hover {
+  border-color: var(--accent-cool);
+  transform: translateY(-2px);
+}
+
+.card h2 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 18px;
+  font-weight: 650;
+  line-height: 1.3;
+}
+
+.card p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.cardActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.cardCta {
+  margin-top: auto;
+  color: var(--accent-cool);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.cardAction {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  color: var(--text-primary);
+  background: var(--page-bg);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: border-color 150ms ease, color 150ms ease;
+}
+
+.cardAction:hover {
+  border-color: var(--accent-cool);
+  color: var(--accent-cool);
+}
+
+.footer {
+  margin: 0;
+  color: var(--text-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .page {
+    justify-content: flex-start;
+    gap: 40px;
+    padding: 48px 20px 56px;
+  }
+
+  .title {
+    font-size: 38px;
+  }
+
+  .lead {
+    font-size: 16px;
+  }
+
+  .cards {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .page {
+    gap: 36px;
+    padding: 44px 16px 48px;
+  }
+
+  .title {
+    font-size: 32px;
+  }
+
+  .lead {
+    font-size: 15px;
+    line-height: 1.5;
+  }
+
+  .controls {
+    margin-top: 32px;
+  }
+
+  .repoLink {
+    width: 36px;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .repoLink span {
+    display: none;
+  }
+
+  .card {
+    min-height: 160px;
+    padding: 20px;
+  }
+}