Kjell Tore Guttormsen
d8882f5220
Erstatter v2 project-surface (screen-tabs + category-tabs + per-command paste-cards)
med v3 renderProjectView (sidebar med 17 artifacts + main-area + import-modal overlay).
renderActive() ruter project-surface til renderProjectSurfaceV3() som wrapper
renderProjectView + topbar + app-shell.
V2-surface helt fjernet:
- renderProjectSurface (152 linjer)
- renderCommandSubCard (87 linjer)
- rehydratePasteImports (15 linjer)
- ACTIONS['project-screen'], currentProjectScreen
- 5 v2-CSS-klasser: .project-tabs, .project-tab*, .sub-zone, .paste-import-row, .project-header__*, .command-cards
Zombie-handlers beholdt for test-back-compat:
currentProjectTab, ACTIONS['project-tab'], ACTIONS['parse'],
handlePasteImport, window.__handlePasteImport. Unreachable fra v3 DOM
men nødvendige for test-playground-v3.sh + test-playground-parsers.sh.
2 fingerprint-gap lukket:
- requirements.headers: utvidet med "EU AI Act — Krav" pattern
- license.headers: utvidet med "Lisens-kapabilitetsmatrise" pattern
- KNOWN_GAP_FIXTURES = {} i test-playground-fingerprints.sh
migrateDataVersion utvidet med parserFor (3. arg):
- Demo-state med kun raw_markdown auto-parses til project.artifacts[cid]
- defaultParserFor(cmdId) resolverer PARSERS[archetypeFor(cmdId)]
- 3 bootstrap-callsites oppdatert (cold-load, import, load-demo)
Ship-QA bugfixes funnet via browser-dogfood:
- components-tier4-project-view.css lagt til i <link>-kjeden (var ikke loaded
-> modal-overlay og two-column layout virket ikke)
- renderImportModal setter data-open="true" (DS-kontrakt for display: flex)
Bundler også sesjon 2-4 deliverables som ikke ble committed tidligere:
- shared/playground-design-system v0.6.0 (Tier 4 project-view CSS + 6 tokens)
- ms-ai-architect/playground/vendor/ re-sync til DS v0.6.0
- tests/test-playground-fingerprints.sh (sesjon 4 NY - 32 PASS)
- tests/test-playground-projectview.sh (sesjon 4 NY - 30 PASS)
- tests/test-playground-actions.sh (sesjon 4 NY - 19 PASS)
- tests/test-playground-migrations.sh utvidet (7 -> 16 PASS)
- tests/run-e2e.sh wirer alle 6 playground-suiter
Stats:
- bash tests/run-e2e.sh --playground: 386 PASS, 0 FAIL, 2 WARN (pre-eks)
- bash tests/run-e2e.sh (full): All E2E suites passed
- bash tests/validate-plugin.sh: 219 PASS
Screenshots regenerert til playground/screenshots/v1.15.0/ (24 PNG-er, 12
surfaces x 2 tema). Nye v3-surfaces: project-overview, project-artifact-*,
project-import-modal (viewport-only), project-search.
Docs oppdatert (3 nivåer): README.md (badge + version history),
CHANGELOG.md, CLAUDE.md (playground-seksjon + valideringstabell),
rot-README.md + rot-CLAUDE.md (marketplace-landingen + plugin-index).
.gitignore: ny pattern *.local.html + *.local.json for sesjon-state-filer.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
146 lines
11 KiB
Markdown
146 lines
11 KiB
Markdown
# playground-design-system — CHANGELOG
|
|
|
|
## 0.6.0 — 2026-05-15
|
|
|
|
### Added — Project-view archetype (Tier 4)
|
|
|
|
Generic "project as artifact-collection" archetype for plugins where a project owns 0-N read-only report artifacts grouped by category. Default view is an aggregated dashboard; clicking a sidebar item swaps the main panel to the per-artifact render. Edit-mode is paste-import only (no inline editor).
|
|
|
|
- **New file `components-tier4-project-view.css`** — 11 sections covering:
|
|
- `.project-view` + `.project-view__layout` (grid: nav 280px + main 1fr, responsive collapse at 1280 / 960px)
|
|
- `.project-view__header` (CSS Grid with eyebrow/title/lede/verdict/key-stats/actions areas)
|
|
- `.verdict-pill` (small pill variant — companion to existing `.verdict-pill-lg` in tier2)
|
|
- `.project-view__nav` + `.project-view__nav-search` (sticky sidebar with search)
|
|
- `.artifact-list` + `__group` / `__group-label` / `__group-count` / `__group-items` / `__item` / `__item-marker` / `__item-body` / `__item-name` / `__item-meta` (grouped, severity-coded sidebar)
|
|
- `.artifact-status[data-severity]` (mini-pill: positive | medium | critical)
|
|
- `.project-view__main` (main column container)
|
|
- `.project-overview` + `__intro` / `__verdict-grid` / `__verdict-tile[data-severity]` / `__section` / `__top-risks` / `__next-actions` / `__missing-reports` (aggregated dashboard)
|
|
- `.project-view__artifact` + `__artifact-header` / `__artifact-title` / `__artifact-meta` / `__artifact-actions` / `__artifact-body` (single-rapport viewer wrapper)
|
|
- `.empty-artifact-prompt` + `__icon` / `__title` / `__text` / `__actions` (empty-state)
|
|
- `.import-modal` + `__backdrop` / `__panel` / `__head` / `__title` / `__close` / `__form` / `__detect` / `__preview` / `__preview-label` / `__footer` (overlay modal for paste-import)
|
|
|
|
- **6 new tokens in `tokens.css`:**
|
|
- `--project-view-nav-width: 280px` — sidebar width at full layout
|
|
- `--project-view-collapse-bp: 960px` — doc-only token referenced by responsive breakpoints
|
|
- `--artifact-list-item-pad-y: var(--space-2)` — sidebar row vertical padding
|
|
- `--artifact-list-item-pad-x: var(--space-3)` — sidebar row horizontal padding
|
|
- `--artifact-marker-size: 14px` — sidebar status marker diameter
|
|
- `--artifact-marker-border: 1.5px` — sidebar status marker border thickness
|
|
|
|
### Påvirkning
|
|
|
|
Endringen er **additiv**: ny komponent-fil + 6 nye tokens, ingen eksisterende selectors eller verdier endres. Plugin-konsumenter (`ms-ai-architect`, `llm-security`, `okr`, `config-audit`, `voyage`) får silent drift mot ny source-commit, men kan re-sync på eget tempo. Bare `ms-ai-architect` og `llm-security` re-syncer i samme commit som denne DS-bumpen (forberedelse til koordinert v1.15.0 / v7.7.0-release etter ~8 sesjoner med JS-implementasjon).
|
|
|
|
Førsteadoptere: `ms-ai-architect` v1.15.0 (17 artefakter, 5 kategorier) + `llm-security` v7.7.0 (≥18 artefakter, 6 kategorier). State-driven visibility håndteres i plugin-JS, ikke i denne CSS-en — kun aktiv state rendres per pass.
|
|
|
|
### Plugins som må laste den nye filen
|
|
|
|
Etter `<link>` til `components-tier3-supplement.css`, legg til:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="vendor/playground-design-system/components-tier4-project-view.css">
|
|
```
|
|
|
|
### For å adoptere v0.6.0
|
|
|
|
```bash
|
|
node scripts/sync-design-system.mjs <plugin-name>
|
|
# --force hvis drift detected
|
|
```
|
|
|
|
## 0.5.0 — 2026-05-10
|
|
|
|
### Added
|
|
- **voyage scope tokens (B-DS-4):** `--color-scope-voyage` (aqua-blue `#1B5FB8`), `--color-scope-voyage-soft` (`#E5EFFA`), `--color-scope-voyage-strong` (`#143E78`) appended to scope-color group in `tokens.css`. Matches the existing `--color-scope-{architect,okr,security,ultraplan,config}` family so voyage-playground can use the canonical badge convention.
|
|
- **`.badge--scope-voyage`** in `base.css`: white-on-aqua-blue badge variant matching the existing scope-badge family.
|
|
|
|
### Påvirkning
|
|
|
|
Endringen er **additiv**: legger TIL voyage-scope-tokens og en ny badge-modifier. Ingen eksisterende selectors eller token-verdier endres. Plugin-konsumenter (llm-security, ms-ai-architect, okr, config-audit) får stale vendor-state mot ny source-commit, men det er silent drift — re-sync skjer på eget tempo neste playground-touch. Bare `voyage` re-syncer i denne commit-en.
|
|
|
|
Førsteadopter: `voyage` v4.3.0 (multi-sesjons-løp 2026-05-10, sesjon 1 = Wave 0+1 Foundation).
|
|
|
|
## 0.4.0 — 2026-05-08
|
|
|
|
### Bug fixes
|
|
- **`.kanban-card__name`** (components-tier3-supplement.css): bytt `word-break: break-all` til `word-break: break-word` + `overflow-wrap: anywhere`. `break-all` knekker midt i ord ("Tekn isk dokumen tasjon"); ny verdi respekterer ordskjøt og brytter kun lange tokens (B-DS-1).
|
|
- **`.expansion__title-main`, `.expansion__title-sub`** (components-tier3-supplement.css): legg til `display: block`. Begge er `<span>`-elementer som flyter inline by default, noe som gir "dokumentertKilde: Art. 9" på samme linje. `display: block` sikrer vertikal stacking (B-DS-2).
|
|
- **`.matrix__bubble`** (components.css): legg til `cursor: pointer`, `transition`, `:hover { transform: scale(1.15) }` og `:focus-visible { outline + offset }`. Antar at consumer rendrer bobler som `<button>` for click-handlers — gir visuell + keyboard-fokus-feedback (B-DS-3).
|
|
|
|
### Påvirkning
|
|
|
|
Bugfixene er **backward-compatible** — alle eksisterende selectors og verdier som er endret, var bugfixes. Plugin-konsumenter som har lokal-overrides for disse mønstrene bør re-syncer og slette overridene:
|
|
|
|
- **ms-ai-architect:** re-sync i samme commit, sletter linje 191-193 (matrix-bubble), 208-211 (expansion-title), 213-216 (kanban-card-name) i `playground/ms-ai-architect-playground.html`.
|
|
- **llm-security, voyage, okr, config-audit:** re-sync på eget tempo (ikke breaking — gammel vendored DS fungerer fortsatt med eksisterende lokal-overrides).
|
|
|
|
### For å adoptere v0.4
|
|
|
|
```bash
|
|
node scripts/sync-design-system.mjs <plugin-name>
|
|
# --force hvis drift detected
|
|
```
|
|
|
|
Førsteadopter: `ms-ai-architect` v1.14.0 (planlagt 2026-05-08, multi-sesjons-løp som starter med DS-bump i sesjon 2).
|
|
|
|
## 0.3.0 — 2026-05-04
|
|
|
|
### Added — Playground/report-page foundation primitives (sections 13-25 in tier3-supplement)
|
|
|
|
Generiske mønstre som tidligere ble definert inline i plugin-playgrounds (først i ms-ai-architect v1.10) er hoisted hit slik at alle 5 plugin-konsumenter (`ms-ai-architect`, `okr`, `llm-security`, `ultraplan-local`, `config-audit`) kan dele samme vokabular og visuelle profil.
|
|
|
|
- **`.eyebrow` utility** — uppercase 11px monospace label med 0.08em letter-spacing. Bruk over seksjons-titler.
|
|
- **`.page__*` page-shell** (`.page__header`, `.page__header-main`, `.page__header-aside`, `.page__eyebrow`, `.page__title`, `.page__lede`, `.page__meta`) — standard rapport-side-header med eyebrow → h1 → lede → meta + verdict-slot side-by-side. Responsiv: kollapser til én kolonne under 720px.
|
|
- **`.key-stats` / `.key-stat`** — 2-5-kolonne responsivt grid av store tall-metrikker. `font-variant-numeric: tabular-nums`, `font-size-2xl` bold. Severity-modifiers (`.key-stat--critical/high/medium/low/positive/info`) tinter value-fargen.
|
|
- **`.verdict-pill-lg` 5-band utvidelse** — eksisterende `.verdict-pill-lg` aksepterer nå alle 5 severity-bånd: `critical/extreme/high/medium/low/positive` + neutral `n-a/info/neutral`. Bakoverkompatibel med eksisterende `block/warning/allow`.
|
|
- **`.tab-list` / `.tab` / `.tab-panel`** — generisk faneflate-komponent. ARIA-paritet: `role="tablist"`, `role="tab"`, `aria-current="true"`. `.tab__count` for badge-tall, `.tab-panel[hidden]` for skjuling.
|
|
- **`.top-risks` / `.top-risk[data-severity]`** — severity-ordnet liste over topp-risikoer med rank/desc/score-kolonner. Severity-attribut driver venstre-border + score-pill-bakgrunn.
|
|
- **`.recommendation-card[data-severity]`** — emphasized advisory-callout med label + body. 6 severity-modifiers.
|
|
- **`.card__*` subkomponenter** — komponerbare tillegg til eksisterende `.card` (base.css): `.card__head`, `.card__title`, `.card__desc`, `.card__id`, `.card__meta`, `.card__hint`, `.card__actions`, `.card__pill`. Pluss `.card--severity-{level}` for 4px venstre-border-modifier.
|
|
- **Form patterns** — `.field-row` (vertikal flex), `.field-label` (medium weight), `.field-help` (xs tertiary), `.required-mark` (severity-critical asterisk), `.multi-select` (fieldset reset), `.checkbox-row` (inline-flex med hover). Mirrors Aksel/Digdir form-konvensjoner.
|
|
- **Section-spacing utilities** — `.stack-lg` (margin-block: var(--space-8)), `.stack-md` (var(--space-5)), `.stack-sm` (var(--space-3)). Anvendes på parent for å gi konsistent vertikal rytme mellom barn-elementer.
|
|
- **`.pyramide-tier-detail`** — utvidbar `<details>`-blokk under `.pyramide`-visualisering. Custom chevron, ingen native marker. Brukes av AI Act-klassifiserings-renderer.
|
|
- **`.scenario-card-grid` / `.scenario-card[data-status="winner"]`** — auto-fit grid (minmax 240px) av scenario/alternativ-cards. Vinnerstatus får success-tinted bakgrunn + grønn count-pill.
|
|
- **`.app-shell` / `.app-shell--wide` / `.app-shell--narrow`** — sentralisert max-width page-wrapper. 1200/1400/880px varianter.
|
|
|
|
### Notes for vendor consumers
|
|
|
|
Versjon 0.3.0 er **rent additiv** — ingen eksisterende selector er endret eller fjernet. Alle eksisterende klasser (`.btn`, `.card`, `.expansion`, `.kanban-*`, `.mat-ladder`, `.read-more`, `.suppressed`, `.pair-before-after`, `.verdict-pill-lg` osv.) fungerer uendret.
|
|
|
|
For å adoptere v0.3:
|
|
1. Re-sync via `node scripts/sync-design-system.mjs <plugin-name>` (kreves `--force` hvis eksisterende drift)
|
|
2. Oppdater plugin HTML til å bruke nye klasser i stedet for inline CSS
|
|
3. Andre plugins kan vente med adopsjon — eksisterende DS-bruk fortsetter å fungere
|
|
|
|
Førsteadopter: `ms-ai-architect` v1.11.0 (planlagt 2026-05-04).
|
|
|
|
## 0.2.0 — 2026-05-04
|
|
|
|
### Added
|
|
- `[data-theme="light"]`-blokk i `tokens.css` (Aksel-aligned, WCAG AA-validert).
|
|
Full mirror av dark-blokken (26 vars) — alle theme-overridable tokens som
|
|
finnes i dark-blokken finnes nå også i light-blokken, slik at renderers ikke
|
|
faller gjennom til udefinerte verdier ved theme-switch.
|
|
- `color-scheme` CSS-property satt eksplisitt på `:root`, `[data-theme="light"]`
|
|
og `[data-theme="dark"]` for korrekt native form-controls/scrollbar-styling.
|
|
|
|
### Notes for vendor consumers
|
|
|
|
Andre plugins som vendrer design-systemet
|
|
(`okr`, `llm-security`, `ultraplan-local`, `config-audit`) får tilgang til
|
|
light-tokens etter neste re-sync. Adopsjon er valgfri — eksisterende dark-only
|
|
oppførsel er bakoverkompatibel siden ingen eksisterende verdi er endret.
|
|
|
|
For å adoptere light-mode i en konsument:
|
|
1. Re-sync via `node scripts/sync-design-system.mjs <plugin-name>`
|
|
2. Legg til en synkron `<script>`-IIFE i `<head>` før CSS-load som leser
|
|
`localStorage` og setter `data-theme` + `colorScheme` på `documentElement`.
|
|
3. Eksponere theme-toggle i UI som setter `documentElement.dataset.theme` +
|
|
persisterer i `localStorage`.
|
|
|
|
## 0.1.0 — 2026-04 (initial)
|
|
|
|
- Tier 1+2+3 design-system med Aksel/Digdir-aligned tokens, base, components.
|
|
- Dark mode default + `[data-theme="dark"]`-overrides.
|
|
- Self-hosted Inter, JetBrains Mono, Source Serif 4 fonts.
|
|
- Schemas for renderers + commands.
|