open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions
ktg-plugin-marketplace/shared/playground-design-system/CHANGELOG.md
Kjell Tore Guttormsen d8882f5220 feat(ms-ai-architect): v1.15.0 — playground v3 project-view integration 
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>
2026-05-16 20:58:51 +02:00

11 KiB
Raw Blame History

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:

<link rel="stylesheet" href="vendor/playground-design-system/components-tier4-project-view.css">

For å adoptere v0.6.0

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

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.