diff --git a/docs/configurator-design.md b/docs/configurator-design.md new file mode 100644 index 00000000..7122e148 --- /dev/null +++ b/docs/configurator-design.md @@ -0,0 +1,897 @@ +# SLASHED Configurator — Projekt od zera + +> **Punkt wyjścia:** Mamy framework CSS z 686 tokenami (`--sf-*`), dokumentację w `docs/llm-guide.md` oraz dwa wzorce UX: +> - **Automatic.CSS panel** — przejrzysty, wizualny, każda kategoria ma „global controls" na górze + sekcje per-feature +> - **CORE Framework panel** — token-centryczny, grupy wg funkcji, inline preview, eksport jednym kliknięciem +> +> Piszemy projekt UI/UX konfiguratora od zera, nie wiedząc jak wygląda żaden istniejący kod. + +--- + +## 1. Filozofia designu + +### 1.1 Główne zasady + +**Zasada 1 — Efekt widoczny natychmiast** +Każda zmiana powinna odbić się w podglądzie w < 100 ms. Użytkownik kręci suwakiem i widzi jak cała paleta kolorów, typografia lub odstępy zmieniają się na żywo. + +**Zasada 2 — Global first, granular second** +Inspiracja z Automatic.CSS: na górze każdej domeny stoją 2–4 „power knobs" które kontrolują całe podsystemy (skala spacing, mnożnik radiusa, siła cieni). Szczegółowe overrides są schowane poniżej za `
`. + +**Zasada 3 — Źródło vs. pochodne** +SLASHED rozróżnia tokeny-źródła (`knob`) i tokeny-wyjściowe (`consumption`). Użytkownik edytuje TYLKO źródła — pochodne pokazujemy read-only jako wizualny feedback (ramp kolorów, tabela kroków skali). + +**Zasada 4 — Progressywne ujawnianie** +- **Poziom 1 (Basic):** 30 najważniejszych tokenów, widoczne zawsze +- **Poziom 2 (Standard):** Kompletne sekcje per-domena +- **Poziom 3 (Advanced):** Tokeny `PUBLIC-ADVANCED` (fluid engine, palette mix, LumLocker) — za togglem "Pokaż zaawansowane" + +**Zasada 5 — Zero straty pracy** +Historia undo/redo (50 kroków), persystencja w localStorage, shareable URL. + +--- + +## 2. Układ interfejsu + +### 2.1 Trzy-strefowy desktop (≥ 1100 px) + +``` +┌──────────────────────────────────────────────────────────────────────┐ +│ TOPBAR: Logo · Szukaj (/) · Modyfikowane: N · Undo/Redo · Motyw UI │ +├─────────────┬────────────────────────────────────┬───────────────────┤ +│ │ │ │ +│ NAWIGACJA │ PANEL EDYCJI │ PODGLĄD LIVE │ +│ (sidebar) │ (domenowe studio) │ (izolowany) │ +│ │ │ │ +├─────────────┴────────────────────────────────────┴───────────────────┤ +│ SZUFLADA CSS OUTPUT (zwijana, otwiera się klikając "N modyfikowanych")│ +└──────────────────────────────────────────────────────────────────────┘ +``` + +**Proporcje:** Nawigacja 220px · Edycja flex · Podgląd 420px (oba resizable). + +### 2.2 Responsywność + +| Viewport | Zachowanie | +|---|---| +| ≥ 1100 px | Pełny 3-strefowy layout | +| 600–1099 px | Podgląd chowany za przyciskiem (slide-over z prawej); nawigacja → 56px rail z ikonami | +| < 600 px | Rail 44px; szuflada CSS domyślnie zwinięta | + +### 2.3 Pięć stref + +**Topbar** — Brand + wyszukiwarka globalna (skrót `/`) + licznik modyfikacji (klikalny → otwiera szufladę CSS) + przyciski Undo / Redo + toggle motyw UI (Dark/Light) + Share (URL encoding). + +**Nawigacja (sidebar)** — Lista domen z ikonami SVG, labelami i badge'ami (liczba zmodyfikowanych tokenów per domena). Na górze: Home / Overview. Na dole: sekcja Narzędzi (WCAG, Themes, Install, Cheatsheet). Można zwinąć do icon-rail. Skróty `[` / `]` — cyklowanie domen. + +**Panel edycji** — Studio per domena (patrz sekcja 3). Zawiera: CategoryHeader z tytułem + licznikiem + przycisk „Reset domeny", Power Knobs, sekcje tematyczne, sekcję Advanced ukrytą za togglem. + +**Podgląd live** — Izolowany iframe / scoped div. Selektor viewport: Mobile / Tablet / Desktop / Fluid. Toggle: Light / Dark preview. Toggle: Normal motion / Reduced. Wszystkie overrides aplikowane jako CSS `