feat(ms-ai-architect): playground v3 HTML skeleton with vendored CSS

Step 1/17 av Playground v3-leveransen (Session 1, Wave 1).

- Single-file HTML med klassisk inline-script (file://-kompatibel per WHATWG
  html#8121: external type=module-scripts feiler på file:// i Chrome+Firefox)
- 7 vendored CSS-link-tags i korrekt rekkefølge: fonts, tokens, base, components,
  components-tier2, components-tier3, components-tier3-supplement
- 4 placeholder-overflater (#surface-onboarding, #surface-home, #surface-catalog,
  #surface-project) — fylles ut i Steps 5-7
- IIFE med STATE_KEY ('ms-ai-architect-state-v1') og SCHEMA_VERSION (1) konstanter
- Eksponerer __STATE_KEY og __SCHEMA_VERSION på window for Verify-asserts
- v2-fila beholdes parallelt frem til Step 17 (sletting)

Plan: .claude/projects/2026-05-03-playground-v3-architecture/plan.md
Brief: .claude/projects/2026-05-03-playground-v3-architecture/brief.md

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kjell Tore Guttormsen 2026-05-03 17:56:01 +02:00
commit 63746df184

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="nb" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ms-ai-architect — Playground v3</title>
<!-- Vendored design-system. Kilden er shared/playground-design-system/ — synces via
scripts/sync-design-system.mjs ved marketplace-rot. Aldri rediger filer under
playground/vendor/ direkte; endringer går i shared/ + re-sync. -->
<link rel="stylesheet" href="vendor/playground-design-system/fonts.css">
<link rel="stylesheet" href="vendor/playground-design-system/tokens.css">
<link rel="stylesheet" href="vendor/playground-design-system/base.css">
<link rel="stylesheet" href="vendor/playground-design-system/components.css">
<link rel="stylesheet" href="vendor/playground-design-system/components-tier2.css">
<link rel="stylesheet" href="vendor/playground-design-system/components-tier3.css">
<link rel="stylesheet" href="vendor/playground-design-system/components-tier3-supplement.css">
</head>
<body>
<!-- Walking-skeleton: 4 placeholder-overflater. Step 5-7 fyller dem ut.
Bare én av disse er aktiv om gangen via state.activeSurface. -->
<main id="app">
<section id="surface-onboarding" data-surface="onboarding" hidden></section>
<section id="surface-home" data-surface="home" hidden></section>
<section id="surface-catalog" data-surface="catalog" hidden></section>
<section id="surface-project" data-surface="project" hidden></section>
</main>
<!--
Klassisk script (ikke type="module") av to grunner:
1. External <script type="module" src="..."> feiler på file:// i Chrome+Firefox
(ref WHATWG html#8121, Chromium 41378227).
2. Single-file deployment per brief Constraints — ingen build-step.
Kommende steps utvider IIFE-en under: Step 2 (state-modul), Step 3 (eksport/import),
Step 4 (CATALOG), osv.
-->
<script>
(function () {
'use strict';
// localStorage-nøkkel og schema-versjon. Endring av STATE_KEY krever migrasjons-steg
// (se Step 3 — MIGRATIONS-pipeline). SCHEMA_VERSION bumpes ved breaking endringer
// i state-form og driver eager migrations ved import.
const STATE_KEY = 'ms-ai-architect-state-v1';
const SCHEMA_VERSION = 1;
// Eksponer som globals for Verify-asserts og DevTools-debugging. Senere steps
// utvider window.__-namespace med __store, __CATALOG, __PARSERS, __RENDERERS,
// __buildCommand, __buildEnvelope, __handlePasteImport.
window.__STATE_KEY = STATE_KEY;
window.__SCHEMA_VERSION = SCHEMA_VERSION;
})();
</script>
</body>
</html>