Update dependencies and version numbers in sandbox.html

Author: Figsh

sandbox.html

@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -26,17 +25,18 @@
   "description":"Interactive playground for building and testing devtemDesign configurations."
 }
 </script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/style.min.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Syne:wght@600;700;800&display=swap" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/script.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/script.min.js"></script>
 
   <style>
     /* ── SUPPRESS ENGINE HERO ────────────────────────────────── */
-    .hero-tag, .hero-title, .hero-sub,
-    .hero-buttons, .hero-inline-brands,
-    .features, .panels-section, .marquee-section { display: none !important; }
+    .hero-badge, .hero-title, .hero-sub,
+    .hero-actions, .hero-brands,
+    .features-grid, .panels-grid, .marquee-section,
+    .section:not(.cta-sec) { display: none !important; }
     .hero { min-height: unset; padding: 0; }
     footer { display: none !important; }
 
@@ -357,20 +357,21 @@
   logoName: "DEVTEM",
   logo: "https://fscss.devtem.org/assets/images/fscss.png",
   navLinks: [
-    { label: "Docs",       href: "/docs"    },
-    { label: "Sandbox",    href: "/sandbox" },
-    { label: "Schema API", href: "/api"     },
-    { label: "npm Package",href: "https://www.npmjs.com/package/devtemdesign" }, 
-    { label: "templates", href: "https://devtem.org/home?q=@devtemDesign"}
-  ],
+  { label: "Docs", href: "/docs" },
+  { label: "Sandbox", href: "/sandbox" },
+  { label: "Schema API", href: "/api" },
+  { label: "npm Package", href: "https://www.npmjs.com/package/devtemdesign" },
+  { label: "templates", href: "https://devtem.org/home?q=@devtemDesign" }
+],
   ctaText: "CDN →",
-  heroTag: "", heroTitleLine1: "", heroTitleLine2: "",
+  heroBadge: "", heroTitleLine1: "", heroTitleLine2: "",
   heroSubtitle: "", primaryBtnText: "", secondaryBtnText: "",
   brands: [], features: [], panels: []
 });
-document.querySelector(".nav-logo").onclick = () =>{
-    location.href = "/";
-}
+
+document.querySelector(".nav-brand")?.addEventListener("click", () => {
+  location.href = "/";
+});
 // ── DEFAULT CONFIG ───────────────────────────────────────────────
 const DEFAULT_CONFIG = `devtemDesign("app-root", {
   template: "cyber",
@@ -384,7 +385,7 @@
   ],
   ctaText: "Get Started →",
 
-  heroTag:          "✦ Live Preview",
+  heroBadge:        "✦ Live Preview",
   heroTitleLine1:   "Edit the config.",
   heroTitleLine2:   "See it render.",
   heroSubtitle:     "Modify the schema on the left. Hit Run or press Ctrl+Enter to update the preview.",
@@ -394,17 +395,17 @@
   brands: ["DEVTEMPLE", "FSCSS", "FIGSH", "ESBUILD"],
   brandsSubtitle: "built with open source",
 
-  featuresSectionLabel: "core mechanics",
-  featuresSectionTitle: "Pass data. The engine paints itself.",
+  featuresLabel: "core mechanics",
+  featuresTitle: "Pass data. The engine paints itself.",
   features: [
     {
       title: "Declarative Schema",
       desc:  "Map a config object to hardware-accelerated layouts.",
       icon:  "<i class='fas fa-cube'></i>"
     },
     {
-      title: "4 Live Themes",
-      desc:  "Switch figsh, cyber, aurora, monochrome with one token.",
+      title: "7 Live Themes",
+      desc:  "Switch figsh, cyber, aurora, monochrome, sunset, ocean, paper with one token.",
       icon:  "<i class='fas fa-palette'></i>"
     },
     {
@@ -438,7 +439,7 @@
     legal: [
       { label: "MIT License", href: "/license" }
     ],
-    copy: "© 2026 Figsh Digital · devtemDesign"
+    copy: "© 2026 Figsh / DevTemple · devtemDesign"
   }
 });`;
 
@@ -449,9 +450,9 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/style.css">
-<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/script.js"><\/script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/style.min.css">
+<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/script.min.js"><\/script>
 <style>body{cursor:auto;}</style>
 </head>
 <body>
@@ -482,7 +483,7 @@
     <div class="sb-topbar">
       <div class="sb-topbar-left">
         <span class="sb-title"><i class="fas fa-flask"></i> Sandbox</span>
-        <span class="sb-version">v0.0.2</span>
+        <span class="sb-version">v0.1.0</span>
         <div class="tpl-pills">
           <button class="tpl-pill" data-tpl="figsh">FIGSH</button>
           <button class="tpl-pill active" data-tpl="cyber">CYBER</button>
@@ -542,7 +543,7 @@
         <span class="sb-stat" id="statLines"><i class="fas fa-lines-leaning"></i> <span id="lineCount">-</span> lines</span>
       </div>
       <div class="sb-status-right">
-        <span class="sb-stat"><i class="fas fa-cube"></i> devtemdesign@0.0.2</span>
+        <span class="sb-stat"><i class="fas fa-cube"></i> devtemdesign@0.1.0</span>
         <span class="sb-stat"><i class="fab fa-js"></i> Vanilla JS</span>
       </div>
     </div>
@@ -695,3 +696,4 @@
 </script>
 </body>
 </html>
+