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>
55 lines
2.6 KiB
HTML
55 lines
2.6 KiB
HTML
<!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>
|