comparison mrjunejune/src/public/composer-lab.html @ 273:e02e2036ef84 default tip

add Layer 2 JRPG component system Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Sat, 08 Aug 2026 02:08:08 -0700
parents 41a49c29a28f
children
comparison
equal deleted inserted replaced
272:41a49c29a28f 273:e02e2036ef84
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Composer Lab | MrJuneJune</title> 6 <title>Composer Lab | MrJuneJune</title>
7 <link rel="stylesheet" href="/public/design-system/styles/tokens.css"> 7 <link rel="stylesheet" href="/public/design-system/styles/tokens.css">
8 <link rel="stylesheet" href="/public/design-system/styles/themes.css"> 8 <link rel="stylesheet" href="/public/design-system/styles/themes.css">
9 <link rel="stylesheet" href="/public/design-system/styles/components.css"> 9 <link rel="stylesheet" href="/public/design-system/styles/components.css">
10 <link rel="stylesheet" href="/public/mjj-composer.css">
11 <script type="module" src="/public/design-system/components/index.js"></script> 10 <script type="module" src="/public/design-system/components/index.js"></script>
12 <script type="module" src="/public/mjj-composer.js"></script> 11 <script type="module">
12 const version = Date.now();
13 const link = document.createElement("link");
14 link.rel = "stylesheet";
15 link.href = `/public/mjj-composer.css?sandbox=${version}`;
16 await new Promise((resolve, reject) => {
17 link.addEventListener("load", resolve, { once: true });
18 link.addEventListener("error", reject, { once: true });
19 document.head.append(link);
20 });
21 await import(`/public/mjj-composer.js?sandbox=${version}`);
22 void navigator.serviceWorker?.getRegistration()
23 .then(registration => registration?.update());
24 </script>
13 <style> 25 <style>
14 body { 26 body {
15 box-sizing: border-box; 27 box-sizing: border-box;
16 min-height: 100vh; 28 min-height: 100vh;
17 margin: 0; 29 margin: 0;