isokit: project layer, Studio GUI, MCP server, viewer, CLI, demo project and docs

viewer/page.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}}</title>
+<!-- Built by isokit (https://git.b4l.co.th/B4L/isokit) from the project's isokit.toml, scene.json and scripts. Edit those, not this file. -->
+<script>
+(function(){var t=null;try{t=localStorage.getItem("isokit-theme")}catch(e){}
+if(t!=="light"&&t!=="dark")t=window.matchMedia&&matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";
+document.documentElement.setAttribute("data-theme",t);})();
+</script>
+<style>
+  :root { color-scheme: dark; --bg: #0a0f1a; --panel: #0f1626; --stroke: #2a3a56; --fg: #d6deeb; --mute: #8a97b0; --accent: #3ddc84; }
+  html[data-theme=light] { color-scheme: light; --bg: #f4f6fa; --panel: #ffffff; --stroke: #cfd8e6; --fg: #1b2533; --mute: #5b6880; --accent: #0e8f4f; }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
+  header, .wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
+  header { padding-top: 24px; display: flex; align-items: center; gap: 12px; }
+  h1 { margin: 0; font-size: 24px; flex: 1; }
+  .themebtn { background: var(--panel); color: var(--fg); border: 1px solid var(--stroke); border-radius: 5px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
+  .themebtn:hover { border-color: var(--accent); }
+  .card { background: var(--panel); border: 1px solid var(--stroke); border-radius: 8px; padding: 14px; margin: 16px 0; }
+  .picked { min-height: 44px; color: var(--mute); font-size: 14px; }
+  .picked b { color: var(--fg); }
+  .picked table { border-collapse: collapse; margin-top: 4px; }
+  .picked th { text-align: left; font-weight: 400; padding: 1px 14px 1px 0; }
+  .picked td { color: var(--fg); }
+  footer { color: var(--mute); font-size: 12px; padding: 0 0 24px; }
+/*ISOKIT_CSS*/
+</style>
+</head>
+<body>
+<header><h1>{{title}}</h1><button class="themebtn" id="themebtn" type="button">Light / dark</button></header>
+<div class="wrap">
+  <div class="card"><div id="view"></div></div>
+  <div class="card picked" id="picked">Tap or click anything for its details.</div>
+  <footer>Made with isokit · built {{date}}</footer>
+</div>
+<script id="isokit-data" type="application/json">/*ISOKIT_DATA*/</script>
+<script>
+/*ISOKIT_JS*/
+</script>
+<script>
+(function () {
+  var data = JSON.parse(document.getElementById("isokit-data").textContent);
+  var picked = document.getElementById("picked");
+  function esc(s) { return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }
+  var view = IsoKit.mount(document.getElementById("view"), IsoKit.staticSource(data), {
+    fullscreen: document.querySelector(".card"),
+    onPick: function (i) {
+      if (!i) { picked.textContent = "Tap or click anything for its details."; return; }
+      picked.innerHTML = "<b>" + esc(i.name) + "</b>" + (i.detail ? "<br>" + esc(i.detail) : "") +
+        (i.rows && i.rows.length ? "<table>" + i.rows.map(function (r) { return "<tr><th>" + esc(r[0]) + "</th><td>" + esc(r[1]) + "</td></tr>"; }).join("") + "</table>" : "");
+    }
+  });
+  window.__isokit = { view: view, data: data };
+  document.getElementById("themebtn").addEventListener("click", function () {
+    var t = document.documentElement.getAttribute("data-theme") === "light" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", t);
+    try { localStorage.setItem("isokit-theme", t); } catch (e) { /* private mode */ }
+  });
+})();
+</script>
+</body>
+</html>