Návrh: prezentace Design Systemu (inspirace atlassian.design)

1. 9. 2026, k rozhodnutí Štěpána. Mock: :3777/preview/ds-site-home.html a

:3777/preview/ds-site-komponenta.html. Dnešní stav: :3777/ds.

1. Co dělá atlassian.design dobře (a co z toho přenést)

Co NEpřenášet: marketingový hero, News, Careers, obří patičku, Figma vrstvu (nemáme), tokenový mega-systém (náš je záměrně malý). Držet Attio-střízlivost a RULES §0 — DS web je sám ukázkou DS.

2. Návrh

2.1 Informační architektura

Domů                — hledání, 3 vstupy (Základy · Komponenty · Vzory), „Pro koho" (designér ·
                      vývojář · AI agent), Poslední změny (z git logu kanonu)
Začínáme            — pro vývojáře: zrcadlo, port, brány; pro designéra: pravidla, kandidát
Pravidla            — RULES.md rozdělený na stránky s kotvami (§0 containment … §10 dialog)
Základy             — Barvy · Typografie · Rozestupy/rádiusy/elevace · Ikony · Datum a čísla
                      (generováno z colors_and_type.css: token · hodnota · ukázka · kopírovat;
                      karty Foundations zůstávají jako „vizuální důkaz" vedle)
Komponenty          — 7 kategorií (níže), každá komponenta = stránka s taby
Vzory               — Obrazovky (27) · Registrace (8): kostra + z jakých komponent se skládá
Systém              — Adopce v repech (matice komponenta × repo) · Kandidáti · Změny (git log)

Kategorie komponent (návrh mapování 40 karet):

• Formuláře a vstupy — Inputs, Buttons, Segmented control, Filter bar, Drawer form, Multi-value editor, Popover & menu (výběr)
• Overlaye a dialogy — Dialog system, Dialog stavy okna, Dialog obchodu, Dialog poznámky, Dialog úkolu, Dialog sloučení, Identity image dialog, Mail compose, Entity preview popover
• Navigace — Sidebar nav, Section top bar, Record tabs (unified), Tabs (record sub-nav)
• Záznamy a data — Table, Table listing, Record list, Record detail rail, Task list, Email list, Deal card, Stat tile, Section block, Časová osa záznamu, Note card
• Identita — Avatars, Entity reference, Entity reference (mini), Entity reference (odebíratelná)
• Stavy a zpětná vazba — Empty & Error state, Status & health, Loading (skeleton), Notifikace a toasty, Tooltip
• AI — AI assistant, Discussion (návrh)

2.2 Stránka komponenty (viz mock)

Hlavička: název · jedna věta · stav (kanon / návrh / kandidát / zastaralé) · odkazy (karta ↗, zdroj v GitLabu, @acrm/ui <Button> · .btn, viewport). Taby:

1. Ukázka — živý render karty (iframe, viewport z @dsCard), kotvy na varianty.
2. Použití — Kdy použít · Kdy nepoužít · Anatomie a varianty (tabulka: varianta · třída · kdy · míry) · Doporučení (Ano/Ne páry) · Text · Související.
3. Kód — jak použít v každém repu (<Button variant="primary"> / .btn.primary), port CSS, story v Ladle, odkazy do zdrojáků.
4. Stav v repech — implementace (OK/ČÁST/CHYBÍ), zrcadlo aktuální/zastaralé, kde se používá (soubory) — dnešní /ds/_card tabulka.

Vpravo „Na této stránce" + mini souhrn implementace.

Prvky webu, které v kanonu nejsou (ke schválení předem, design gate): dlaždice rozcestníku na Domů, pár Ano/Ne, osnova „Na této stránce", drobečková navigace. Vše ostatní je 1:1 z kanonu (nav-item, .acrm-tab, .acrm-input, pill, .btn, typo tokeny).

2.3 Obsahový model — kde se text bere (bez CMS)

Zdroj pravdy zůstávají karty v kanonu. Přibývají dvě věci, obě v repu vedle karty:

1. Rozšířená @dsCard hlavička (stávající atributy zůstávají): category="Formuláře a vstupy" · summary="Tlačítko spouští akci…" (1 věta) · status="kanon|návrh|deprecated" · related="inputs.html,popover.html" · react="Button" (volitelně; jinak z ds-index konzumenta). Dnešní subtitle se dál zobrazuje jako „Poznámky ke kartě", dokud se nepřepíše.
2. <karta>.usage.md — obsah tabu Použití v pevné osnově (Kdy použít / Kdy ne / Doporučení / Text / Související). Markdown, Ano/Ne páry jako dva bloky; ukázky se berou z karty (data-example="primary" kotvy), ne z obrázků.

Generované, ne psané: Základy z colors_and_type.css, Změny z git log, Adopce z ds-index.json konzumentů, hledací index z hlaviček + tříd + tokenů + nadpisů usage.

2.4 Technika

• Stejný server, stejná adresa (:3777/ds), server-side render v ds-catalog.mjs — žádný build, žádný framework, žádný nový port (CLAUDE.md). Šablony a CSS webu žijí v DS repu (site/), takže vzhled webu je verzovaný a jiné týmy do něj můžou MR.
• Web používá DS tokeny a prvky 1:1: sidebar = nav-item karta (28px řádky), taby = .acrm-tab (46px, accent podtržení), vstup = .acrm-input (32px), pill = _ds/pills.css, typografie --h1/--h2/--h3/--label/--hint, Geist z fonts/.
• Hledání: JSON index generovaný při requestu s cache per HEAD, klient filtruje (⌘K).
• Picky fungují dál: každá stránka má <title> s verzí, iframe ukázky = kanonická karta.

2.5 Fáze

3. K rozhodnutí

Jedna otázka: souhlasíš s IA a kategoriemi v 2.1 (7 kategorií komponent, Vzory = Screens + Registrace, Systém = Adopce/Kandidáti/Změny)? Ostatní (tab model, obsahový model, technika) je odvozené a dá se dolaďovat na mocku pickerem.