Delete STYLE-SYSTEM-COMPLETION-PLAN.md

2026-07-24 22:11:51 +03:00
parent e6523bd35b
commit d42e7df8af
1 changed files with 0 additions and 570 deletions
--- a/STYLE-SYSTEM-COMPLETION-PLAN.md
+++ b/STYLE-SYSTEM-COMPLETION-PLAN.md
@@ -1,570 +0,0 @@
 # План завершения стилевой системы Glint
 ## Цель
 Достичь полной мощности HTML+CSS в языке Glint. Система разделена на 4 уровня:
 - **Парсер** (glt/src/style_parser.rs) — чтение `.glts`
 - **AST + Компилятор** (glt/src/ast.rs, compiler.rs) — представление и байткод
 - **Интерпретатор** (runtime/src/interpreter/) — VDOM + вычисление стилей
 - **Рендерер** (runtime/src/renderer.rs) — отрисовка через Iced
 ---
 ## 1. Селекторы (критично)
 ### 1.1 Структурированное представление селектора
 **Сейчас:** Селектор — плоская строка `"Panel.desktop"`, matching по точному совпадению.
 **Нужно:** Разобрать селектор в структуру:
 ```rust
 enum Selector {
    Simple(SimpleSelector),
    Compound(CompoundSelector),     // без комбинатора
    Complex {
        left: Box<Selector>,
        combinator: Combinator,
        right: Box<Selector>,
    },
    List(Vec<Selector>),            // запятые: `Button, .btn, #id`
 }
 struct SimpleSelector {
    tag: Option<String>,            // `Button` | `*`
    id: Option<String>,             // `#myid`
    classes: Vec<String>,           // `.foo.bar`
    pseudo_classes: Vec<PseudoClass>, // `:hover`
    pseudo_element: Option<PseudoElement>, // `::before`
    attribute: Vec<AttributeSelector>, // `[disabled]`, `[type="text"]`
 }
 enum Combinator {
    Descendant,   // пробел
    Child,        // >
    NextSibling,  // +
    Subsequent,   // ~
 }
 enum PseudoClass {
    Hover, Active, Focus,
    FirstChild, LastChild,
    NthChild(i32, i32),  // An+B
    FirstOfType, LastOfType,
    Disabled, Enabled, Checked,
    Root, Empty,
    Not(Box<Selector>),
    // ...
 }
 struct AttributeSelector {
    name: String,
    op: AttrOp,
    value: Option<String>,
 }
 enum AttrOp { Set, Eq, Contain, StartsWith, EndsWith, InList }
 ```
 ### 1.2 Парсинг селекторов (style_parser.rs)
 - Заменить `parse_selector()` на полноценный парсер селекторов.
 - Поддержка: `Button.active:hover`, `Panel > .btn`, `#header`, `[type="text"]`, `*`, `:nth-child(2n+1)`, запятые.
 - Валидация и сообщения об ошибках.
 ### 1.3 Байткод для селекторов
 - Новый опкод `OP_SELECTOR` или расширение `OP_STYLE_RULE`:
  - Записать дерево селектора в байткод.
  - На каждый тип узла — свой подопкод (0x30–0x3F).
 - Компилятор: сериализация структуры селектора.
 - Читатель (reader.rs): десериализация обратно в структуру.
 ### 1.4 Runtime matching (interpreter/mod.rs)
 - Заменить `collect_matching_styles()` на алгоритм обхода дерева селекторов.
 - **Специфичность:** inline > id > class/attr/pseudo > tag.
 - При одинаковой специфичности — порядок объявления (последний побеждает).
 - **Комбинаторы:** при обходе VDOM подниматься вверх по предкам/соседям.
 - Кэширование результатов matching для производительности.
 ---
 ## 2. Псевдоклассы (высокий приоритет)
 ### 2.1 Интерактивные (`:hover`, `:active`, `:focus`)
 **Сейчас:** Только у Button ховер/нажатие — хардкод в renderer.
 **Нужно:**
 - Хранить состояние интерактивности в VDOM/Element (`ElementState`).
 - В renderer передавать статус (hovered/pressed/focused) в `collect_matching_styles`.
 - `:hover`-стили переопределяют базовые.
 - Плавный переход между состояниями (см. transitions).
 **Изменения:**
 - `types.rs`: `Element` может получить поле `state: ElementState`.
 - `renderer.rs`: у `render_element` появляется доступ к состоянию мыши.
 - `style.rs`: `ComputedStyle::compute()` принимает псевдоклассы.
 ### 2.2 Структурные (`:first-child`, `:nth-child`, `:last-child`, `:first-of-type`, `:last-of-type`, `:empty`, `:root`)
 **Сейчас:** Не поддерживаются.
 **Нужно:**
 - При matching вычислять позицию элемента среди siblings.
 - Для `:nth-child(An+B)` — парсить выражение и проверять `(index - B) % A == 0`.
 - `:empty` — `el.children.is_empty()`.
 - `:root` — элемент верхнего уровня в VDOM.
 ### 2.3 Состояния (`:disabled`, `:enabled`, `:checked`)
 - `:disabled`/`:enabled` — по свойству `disabled`.
 - `:checked` — по свойству `checked`.
 ---
 ## 3. Медиа-запросы (`@media`) (средний приоритет)
 ### 3.1 Парсер
 ```glts
@media (max-width: 600px) {
    Panel { direction: vertical }
 }
 ```
 - Парсить `@media` в `Directive::MediaQuery { query, child_span }`.
 - Поддержка: `width`, `height`, `min-width`, `max-width`, `orientation`, `prefers-color-scheme`.
 - Логические операторы: `and`, `or`, `not`, `,` (or).
 ### 3.2 Runtime
 - Собрать информацию об окне (размер, тема ОС).
 - При изменении размера окна переоценивать media queries.
 - Хранить в `Document::media_state: MediaState`.
 - `collect_matching_styles` проверяет media query перед добавлением правил.
 ---
 ## 4. Анимации (`@anim`) (средний приоритет)
 ### 4.1 Парсинг — уже есть
 `@anim name { from { ... } to { ... } }` — парсится и компилируется.
 ### 4.2 Runtime — НЕ реализован
 **Сейчас:** `OP_STYLE_ANIM` пропускается.
 **Нужно:**
 1. Хранить `KeyframeAnimation` в `StyleSheet` (не только в байткоде, но и в runtime-структуре).
 2. В `Element` поле `animation_state: HashMap<String, AnimationInstance>`.
 3. Система тиков:
   - Iced `subscription` на каждый кадр (`on_every_event` → `Event::Window(RedrawRequested)`).
   - При каждом тике обновлять `elapsed` для активных анимаций.
   - Интерполировать между keyframes.
 4. Свойства `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-fill-mode`.
 5. Поддержка `@keyframes` с процентами: `0% { ... } 50% { ... } 100% { ... }`.
 ### 4.3 Timing functions
 - `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`.
 - `cubic-bezier(p1x, p1y, p2x, p2y)`.
 - `steps(n, direction)`.
 ---
 ## 5. Транзишены (`transition`) (средний приоритет)
 ### 5.1 Свойства
 - `transition-property`, `transition-duration`, `transition-timing-function`, `transition-delay`.
 - Шорткат `transition: all 0.3s ease`.
 ### 5.2 Runtime
 - При изменении `ComputedStyle` (например, при ховере) не применять мгновенно, а запускать интерполяцию.
 - Хранить `TransitionState` на элемент: `HashMap<String, (start_value, end_value, elapsed, duration, easing)>`.
 - Каждый кадр обновлять transitioning-свойства.
 ---
 ## 6. Новые CSS-свойства в ComputedStyle
 ### 6.1 Типографика
 | Свойство | Тип | Парсер |
 |----------|-----|--------|
 | `font-family` | `Option<String>` | список шрифтов |
 | `font-weight` | `Option<u16>` | `normal(400)`, `bold(700)`, числовое |
 | `font-style` | `Option<FontStyle>` | `normal`, `italic`, `oblique` |
 | `line-height` | `Option<f32>` | числовое или `normal` |
 | `letter-spacing` | `Option<f32>` | px |
 | `text-align` | `Option<TextAlign>` | `left`, `center`, `right`, `justify` |
 | `text-decoration` | `Option<TextDecoration>` | `none`, `underline`, `line-through` |
 | `text-transform` | `Option<TextTransform>` | `none`, `uppercase`, `lowercase`, `capitalize` |
 | `white-space` | `Option<WhiteSpace>` | `normal`, `nowrap`, `pre` |
 | `word-break` | `Option<WordBreak>` | `normal`, `break-all`, `keep-all` |
 | `text-overflow` | `Option<TextOverflow>` | `clip`, `ellipsis` |
 ### 6.2 Фон и границы
 | Свойство | Тип | Парсер |
 |----------|-----|--------|
 | `opacity` | `Option<f32>` | 0.0–1.0 |
 | `background-image` | `Option<String>` | `url(...)` |
 | `background-repeat` | `Option<BgRepeat>` | `repeat`, `no-repeat` |
 | `background-size` | `Option<BgSize>` | `cover`, `contain`, px, % |
 | `background-position` | `Option<BgPos>` | `center`, `top left`, px |
 | `linear-gradient(...)` | `Option<Gradient>` | парсить в `Value::Call` и обрабатывать |
 | `box-shadow` | `Option<Vec<Shadow>>` | `offset-x offset-y blur spread color` |
 | `text-shadow` | `Option<Vec<Shadow>>` | то же |
 | `outline` | `Option<Outline>` | width, style, color |
 | `border-style` | `Option<BorderStyle>` | `solid`, `dashed`, `dotted` |
 | `border` (шорткат) | — | разворачивать в width/style/color |
 ### 6.3 Flexbox (расширение)
 | Свойство | Тип |
 |----------|-----|
 | `justify-content` | `Option<JustifyContent>` | `start`, `center`, `end`, `space-between`, `space-around`, `space-evenly` |
 | `flex-wrap` | `Option<FlexWrap>` | `nowrap`, `wrap`, `wrap-reverse` |
 | `flex-direction` | `Option<FlexDirection>` | (расширение `LayoutDirection`) |
 | `align-self` | `Option<Alignment>` | переопределяет `align-items` для конкретного элемента |
 | `align-content` | `Option<AlignContent>` | multi-line выравнивание |
 | `flex` (шорткат) | — | grow, shrink, basis |
 | `flex-shrink` | `Option<f32>` | |
 | `flex-basis` | `Option<Length>` | |
 ### 6.4 Grid Layout
 | Свойство | Тип |
 |----------|-----|
 | `grid-template-columns` | `Option<Vec<GridTrack>>` | `1fr 1fr`, `repeat(3, 1fr)`, `auto` |
 | `grid-template-rows` | `Option<Vec<GridTrack>>` | |
 | `grid-gap` / `gap` | уже есть как `spacing` | |
 | `grid-column` | `Option<(u32, u32)>` | start / end |
 | `grid-row` | `Option<(u32, u32)>` | |
 | `grid-auto-flow` | `Option<GridFlow>` | |
 ### 6.5 Позиционирование (расширение)
 | Свойство | Тип | Статус |
 |----------|-----|--------|
 | `position: absolute` | — | сейчас мэппится в Static |
 | `position: relative` | — | сейчас мэппится в Static |
 | `position: sticky` | — | сейчас мэппится в Static |
 | `z-index` | `Option<i32>` | |
 | `display` | `Option<Display>` | `block`, `flex`, `grid`, `none`, `inline` |
 ### 6.6 Прочее
 | Свойство | Тип |
 |----------|-----|
 | `visibility` | `Option<Visibility>` | `visible`, `hidden` |
 | `cursor` | `Option<Cursor>` | `pointer`, `default`, `text` |
 | `pointer-events` | `Option<PointerEvents>` | `auto`, `none` |
 | `transform` | `Option<Vec<Transform>>` | `translate(x,y)`, `scale(s)`, `rotate(a)` |
 | `transform-origin` | `Option<String>` | |
 | `backdrop-filter` | `Option<Vec<Filter>>` | `blur(10px)`, `brightness(1.2)` |
 | `filter` | `Option<Vec<Filter>>` | то же |
 | `list-style` | `Option<ListStyle>` | |
 | `isolation` | `Option<Isolation>` | `auto`, `isolate` |
 | `mix-blend-mode` | `Option<BlendMode>` | `multiply`, `screen` |
 ### 6.7 Итого: ~40–60 новых полей в ComputedStyle
 Каждое поле: тип `Option<T>`, значение по умолчанию `None`.
 Парсинг: новая функция `parse_<property>(s: &str) -> Option<T>` для каждого.
 Lookup в `ComputedStyle::compute()`.
 **Рендеринг в Iced:**
 - Iced 0.14 поддерживает Background::Gradient.
 - Box-shadow пока не поддерживается, но можно эмулировать через container style с offset-тенью.
 - Transforms и filters — Iced пока не нативно; нужен кастомный widget или пропуск.
 ---
 ## 7. Система каскада и наследования
 ### 7.1 Наследование (сейчас: только `color`, `font-size`)
 Добавить наследование для:
 - `font-family`, `font-weight`, `font-style`, `line-height`, `letter-spacing`, `text-align`, `white-space`, `word-break`, `text-transform`, `visibility`, `cursor`, `pointer-events`.
 Механизм: в `render_element()` передавать не только `parent_color` и `parent_font_size`, а `&ComputedStyle` родителя или отдельный `InheritedStyle`.
 ### 7.2 `inherit` / `initial` / `unset`
 - Специальные значения для любого свойства.
 ### 7.3 `!important`
 - Флаг важности в правиле. Переопределяет специфичность.
 - Парсить `value!important`.
 ---
 ## 8. CSS-функции и значения
 ### 8.1 `calc()`
 ```rust
 enum CalcValue {
    Number(f32),
    Percentage(f32),
    Add(Box<CalcValue>, Box<CalcValue>),
    Sub(Box<CalcValue>, Box<CalcValue>),
    Mul(Box<CalcValue>, Box<CalcValue>),
    Div(Box<CalcValue>, Box<CalcValue>),
    Var(String),
 }
 ```
 - Парсить `calc(100% - 20px)`.
 - Вычислять в runtime с учётом контекста (размер родителя).
 ### 8.2 `var()` — CSS custom properties
 - `--my-var: value;` в правилах.
 - `var(--my-var, fallback)` при использовании.
 - Хранить custom properties в `ComputedStyle.custom_props: HashMap<String, String>`.
 - Наследуются по умолчанию.
 ### 8.3 `min()`, `max()`, `clamp()`
 - `min(100%, 500px)`, `max(200px, 50%)`, `clamp(200px, 50%, 500px)`.
 ### 8.4 `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`, `oklch()`, `color-mix()`
 - Сейчас только `#hex` и 3 named colors.
 - Парсить `rgb(255, 0, 0)`, `rgba(255, 0, 0, 0.5)`.
 - Расширить `parse_color()`.
 ### 8.5 Named colors
 - Расширить словарь до 140+ CSS named colors (AliceBlue, ...).
 ---
 ## 9. @-правила
 ### 9.1 `@import`
 ```glts
@import "theme.glts"
 ```
 - В парсере: обработать `@import`, загрузить файл, влить переменные и миксины.
 - Может быть сложным (циклы, кэширование). Опционально на раннем этапе.
 ### 9.2 `@font-face`
 ```glts
@font-face {
    font-family: "MyFont"
    src: fs:/fonts/myfont.ttf
 }
 ```
 - Регистрировать в Iced через `font::Family`.
 - Потребует `iced::font::load()`.
 ### 9.3 `@scope` (CSS Cascading Layers)
 - `@scope (.card) { ... }` — ограничение области действия правил.
 ---
 ## 10. Рендеринг (renderer.rs)
 ### 10.1 Псевдоклассы в рендере
 - Для интерактивных элементов передавать `button::Status`.
 - `:hover`/`:active`-стили должны пересчитываться при изменении статуса.
 ### 10.2 Flexbox (полноценный)
 - `justify-content`: Iced `Row`/`Column` не имеют нативного justifyContent; эмулировать через наполнители (`Length::Fill`).
 - `flex-wrap`: нужен `Flow` widget или эмуляция строками.
 ### 10.3 Grid
 - Полноценный CSS Grid: имплементировать кастомный Iced widget или разбивать на строки/колонки вручную.
 - `grid-template-columns: 1fr 1fr 1fr` → разбивка children на ряды.
 - `grid-column`/`grid-row`: позиционирование ячеек.
 ### 10.4 `display: none`
 - Пропускать элемент при рендеринге (уже частично — `None` возвращается).
 ### 10.5 `z-index`
 - Сортировать fixed-слой по z-index внутри stack.
 ### 10.6 `position: absolute` / `relative`
 - `relative`: смещение через padding контейнера.
 - `absolute`: позиционирование относительно предка с `position: relative` (или окна). Эмулировать через stack слои, как `fixed`.
 ### 10.7 `position: sticky`
 - Эмулировать через Iced scrollable + перехват событий скролла.
 - Пока не поддерживается Iced нативно. Можно через subscription на scroll position + ручное позиционирование.
 ### 10.8 `opacity`
 - Iced: `widget.opacity(f32)` (iced 0.14+).
 ### 10.9 `box-shadow`, `text-shadow`
 - Эмуляция: container с подложкой (offset background) или кастомный шейдер.
 - Iced 0.14 имеет `Border` только с `color`, `width`, `radius`. Shadow — нет.
 ### 10.10 `outline`
 - Через border с `outline-offset` эмуляцией.
 ### 10.11 Трансформы (`transform`)
 - Iced не поддерживает transforms нативно.
 - Потребуется кастомный widget с `lyon` или `vello` для path-трансформаций.
 - На раннем этапе — документировать как unsupported.
 ---
 ## 11. Инструментарий разработчика
 ### 11.1 Вывод вычисленных стилей
 - Флаг `--debug-styles` в CLI: печатать `ComputedStyle` каждого элемента.
 ### 11.2 Инспектор элементов
 - Iced debug overlay: `iced::widget::pane_grid` с инспектором.
 - Показывать matched selectors, specificity, computed properties.
 ### 11.3 Hot-reload стилей
 - Перекомпиляция `.glts` без перезапуска приложения.
 - Обновление bytecode в runtime.
 ---
 ## 12. Порядок реализации (приоритеты)
 ### Фаза 1: Критическое (MVP+)
 1. Структурированные селекторы + matching engine со специфичностью
 2. Комбинаторы (особенно descendant)
 3. Псевдоклассы `:hover`, `:active`, `:focus`
 4. Селектор по ID (`#id`)
 5. Множественные селекторы через запятую
 6. Псевдоклассы `:first-child`, `:nth-child`, `:last-child`, `:empty`
 ### Фаза 2: Визуальное обогащение
 7. Новые свойства: opacity, font-weight, text-align, justify-content, line-height
 8. fill-шорткаты для flex (flex-grow/shrink/basis)
 9. `position: absolute` / `relative` / `sticky`
 10. `z-index`
 11. `display: none`
 12. `calc()`, `min()`, `max()`, `clamp()`
 13. `rgb()`, `rgba()`, `hsl()` + расширенный словарь named colors
 14. `!important`
 ### Фаза 3: Продвинутое
 15. `@media` queries
 16. Animations (playback)
 17. Transitions
 18. `box-shadow`, `text-shadow` (эмуляция)
 19. CSS Grid
 20. `flex-wrap` + `justify-content` полноценно
 21. `var()` CSS custom properties
 22. `@import`
 23. `@font-face`
 ### Фаза 4: Экспертное
 24. `transform`, `transform-origin`
 25. `backdrop-filter`, `filter`
 26. `gradient` (linear, radial)
 27. `color-mix()`, `oklch()`
 28. Hot-reload
 29. DevTools инспектор
 30. `@scope`
 ---
 ## 13. Архитектурные изменения
 ### 13.1 `ComputedStyle` → разбить на подс-труктуры
 Вместо 40+ плоских полей:
 ```rust
 pub struct ComputedStyle {
    pub box_model: BoxModel,
    pub typography: Typography,
    pub background: BackgroundStyle,
    pub border: BorderStyle,
    pub flex: FlexStyle,
    pub grid: GridStyle,
    pub position: Positioning,
    pub effects: Effects,
    pub overflow: OverflowStyle,
    pub animation: AnimationStyle,
    pub custom: HashMap<String, String>,
    pub display: Option<Display>,
    pub visibility: Option<Visibility>,
 }
 ```
 ### 13.2 Selector engine — отдельный модуль
 ```rust
 mod selector {
    pub struct Selector { ... }
    pub fn parse(input: &str) -> Result<Selector, String>;
    pub fn specificity(&self) -> (u32, u32, u32);
    pub fn matches(&self, el: &Element, ctx: &MatchContext) -> bool;
 }
 ```
 ### 13.3 StyleSheet — расширение
 ```rust
 pub struct StyleRule {
    pub selector: Selector,
    pub properties: HashMap<String, String>,
    pub source_order: u32,
    pub media: Option<MediaQuery>,
    pub important: HashSet<String>,
 }
 ```
 ### 13.4 Система тиков для анимаций/транзишенов
 - Новый модуль `animation` в runtime.
 - `AnimationEngine` с `HashMap<AnimationId, AnimationInstance>`.
 - Iced subscription: `time::every(Duration::from_millis(16))` (60fps).
 ---
 ## 14. Оценка сложности
 | Компонент | Новые файлы | Изменённые файлы | Пример LOC |
 |-----------|-------------|------------------|------------|
 | Selector parser | `glt/src/selector.rs` | `style_parser.rs` | ~500 |
 | Selector matching | `runtime/src/selector.rs` | `mod.rs` | ~400 |
 | ComputedStyle расширение | — | `style.rs` | +400 |
 | Медиа-запросы | — | `style_parser.rs`, `mod.rs` | ~300 |
 | Анимации | `runtime/src/animation.rs` | `style.rs`, `mod.rs`, `app.rs` | ~500 |
 | Транзишены | `runtime/src/transition.rs` | | ~400 |
 | Псевдоклассы | — | `mod.rs`, `renderer.rs`, `types.rs` | ~300 |
 | Новые парсеры свойств | — | `style.rs` | +600 |
 | Рендеринг | — | `renderer.rs` | +500 |
 | Flex/Grid | `runtime/src/layout.rs` | `renderer.rs` | ~400 |
 | calc/var | `runtime/src/values.rs` | `style.rs` | ~300 |
 | @import/@font-face | — | `style_parser.rs`, `renderer.rs` | ~200 |
 | Инструменты | `runtime/src/inspector.rs` | `cli.rs`, `app.rs` | ~300 |
 **Итого:** ~5–7 новых файлов, ~15 изменённых, ~5000–6000 строк нового кода.