feat: reactivityl; vdom; rhei; styles; fs; image element

main.glts

@@ -0,0 +1,106 @@
+// =============================================================================
+// Glint Design System — Master Stylesheet (main.glts)
+// =============================================================================
+
+// ── 1. Цветовая палитра и константы (Variables) ──────────────────────────────
+$bg-app        = #11111b  // Глубокий темный фон для всего окна
+$bg-panel      = #1e1e2e  // Базовый цвет для контейнеров и панелей
+$bg-surface    = #313244  // Цвет для карточек и выделенных блоков
+$bg-field      = #181825  // Внутренний фон для полей ввода (Input)
+
+$text-main     = #cdd6f4  // Мягкий белый основной текст
+$text-muted    = #9399b2  // Серый приглушенный текст для описаний
+$accent        = #b4befe  // Лавандовый акцентный цвет для кнопок и заголовков
+$border-glow   = #45475a  // Цвет аккуратных рамок и разделителей
+
+// Сетка отступов (Размеры автоматически очищаются от "px" парсером Glint)
+$pad-dense     = 6px
+$pad-normal    = 12px
+$pad-roomy     = 20px
+$pad-window    = 28px
+
+// ── 2. Шаблоны стилей (Mixins) ───────────────────────────────────────────────
+
+@mixin text-body {
+    color: $text-main
+    font-size: 15px
+}
+
+@mixin standard-card {
+    background: $bg-panel
+    border-color: $border-glow
+    border-width: 1px
+    border-radius: 12px
+}
+
+// ── 3. Правила для UI-компонентов (Element Rules) ────────────────────────────
+
+// Главное окно приложения
+Window {
+    background: $bg-app
+    padding: $pad-window
+    spacing: $pad-roomy
+}
+
+// Универсальный контейнер ( viewport, карточки, обертки списков )
+Panel {
+    @use standard-card
+    padding: $pad-normal
+    gap: 14px
+    direction: vertical
+    align-items: center
+    content-align: center
+}
+
+// Крупные заголовки секций
+Header {
+    color: $accent
+    font-size: 22px
+    padding: 4px
+}
+
+// Обычный текст
+Text {
+    @use text-body
+}
+
+// Подписи, второстепенные метаданные
+Label {
+    color: $text-muted
+    font-size: 13px
+}
+
+// Интерактивные элементы управления
+Button {
+    border-radius: 8px
+    border-width: 1px
+}
+
+Image {
+    border-radius: 8px
+    border-width: 1px
+}
+
+// Текстовые поля ввода
+Input {
+    background-color: $bg-field
+    color: $text-main
+    font-size: 14px
+    padding: 12px
+    border-radius: 16px
+    border-width: 1px
+    border-color: $border-glow
+    width: 320px
+}
+
+// Переключатели
+Toggle {
+    color: $text-main
+    font-size: 15px
+}
+
+// Разделительные линии (Divider / Separator)
+Divider {
+    background: $border-glow
+    border-width: 1px
+}