4bnode 4.0.0 → 4.0.2

package/README.md

@@ -92,6 +92,16 @@ Presets available: `user`, `product`, `post`
 4bnode list routes         # List routes only
 ```
 
+### Dashboard Passkey
+
+During `npx 4bnode init`, you'll be prompted to set a 6-digit passkey to protect the dev dashboard.
+
+To change the passkey later, run inside your project:
+
+```sh
+4bnode passkey
+```
+
 ### Start Dev Dashboard
 
 ```sh

package/add-login.js

@@ -168,13 +168,13 @@ router.post('/login', async (req, res) => {
   try {
     const user = await ${pascalName}.findOne({ ${selectedFields[0]}: ${selectedFields[0]} });
     if (!user) {
-      return res.status(404).json({ message: 'User not found' });
+      return res.status(401).json({ message: 'Invalid credentials' });
     }
     ${
       selectedFields.includes("password")
         ? `const isMatch = await bcrypt.compare(password, user.password);
     if (!isMatch) {
-      return res.status(400).json({ message: 'Invalid credentials' });
+      return res.status(401).json({ message: 'Invalid credentials' });
     }`
         : ""
     }

package/index.js

@@ -2,10 +2,11 @@
 
 import fs from "fs";
 import path from "path";
+import crypto from "crypto";
 import { execFileSync } from "child_process";
 import { fileURLToPath } from "url";
 import chalk from "chalk";
-import { input, select } from "@inquirer/prompts";
+import { input, select, password } from "@inquirer/prompts";
 import { sanitizeName } from "./lib/names.js";
 import {
   checkMongoConfig,
@@ -53,7 +54,38 @@ function updatePackageName(destinationPath, projectName) {
   );
 }
 
-function createSkeletonApp(projectName) {
+function hashPasskey(pin) {
+  return crypto.createHash("sha256").update(pin).digest("hex");
+}
+
+async function promptPasskey() {
+  const passkey = await password({
+    message: "Set a 6-digit passkey for the dev dashboard:",
+    mask: "*",
+    validate: (v) => {
+      if (!/^\d{6}$/.test(v)) return "Passkey must be exactly 6 digits";
+      return true;
+    },
+  });
+
+  const confirm = await password({
+    message: "Confirm passkey:",
+    mask: "*",
+    validate: (v) => {
+      if (v !== passkey) return "Passkeys do not match";
+      return true;
+    },
+  });
+
+  return passkey;
+}
+
+function savePasskey(projectPath, passkey) {
+  const hash = hashPasskey(passkey);
+  fs.writeFileSync(path.join(projectPath, ".4bnode", ".passkey"), hash, "utf8");
+}
+
+async function createSkeletonApp(projectName) {
   showBanner();
 
   const targetPath = path.resolve(projectName);
@@ -67,6 +99,12 @@ function createSkeletonApp(projectName) {
   updatePackageName(targetPath, projectName);
   scaffoldSpinner.succeed(chalk.hex("#00f260").bold("Project scaffolded"));
 
+  // Ask for dashboard passkey
+  console.log();
+  const passkey = await promptPasskey();
+  savePasskey(targetPath, passkey);
+  console.log(chalk.hex("#00f260").bold("  ✔ Dashboard passkey set"));
+
   const installSpinner = createSpinner("Installing dependencies...");
   installSpinner.start();
   execFileSync("npm", ["install"], { stdio: "pipe", cwd: targetPath });
@@ -80,7 +118,7 @@ function createSkeletonApp(projectName) {
   showNextSteps([
     `cd ${projectName}`,
     "npm run dev",
-    "Open http://localhost:3000",
+    "Open http://localhost:3000/_dev",
   ]);
 }
 
@@ -210,6 +248,7 @@ function showHelp() {
   console.log(`  ${c("schema")} ${d("[name]")}    Manage schemas (create/view/edit)`);
   console.log(`  ${c("list")} ${d("[filter]")}    List models, routes & config status`);
   console.log(`  ${c("ui")}                 Start dev server with visual dashboard`);
+  console.log(`  ${c("passkey")}             Change dashboard passkey`);
   console.log();
   console.log(h("  ADD FEATURES\n"));
   console.log(`  ${c("add api")} ${d("[name]")}     API endpoint`);
@@ -306,11 +345,24 @@ async function main() {
     }
   } else if (command === "list") {
     showList(subCommand);
+  } else if (command === "passkey") {
+    // Must be inside a 4bnode project
+    const projectRoot = process.cwd();
+    const passkeyFile = path.join(projectRoot, ".4bnode", ".passkey");
+    if (!fs.existsSync(path.join(projectRoot, ".4bnode"))) {
+      showError("Not inside a 4bnode project. Run 'npx 4bnode init <name>' first.");
+      process.exit(1);
+    }
+    showBanner();
+    console.log();
+    const newPasskey = await promptPasskey();
+    savePasskey(projectRoot, newPasskey);
+    console.log(chalk.hex("#00f260").bold("\n  ✔ Dashboard passkey updated successfully\n"));
   } else if (command === "ui") {
-    // Must be inside a 4bnode project (has package.json + dev-api.js)
+    // Must be inside a 4bnode project (has package.json + .4bnode/)
     const projectRoot = process.cwd();
     const hasPackageJson = fs.existsSync(path.join(projectRoot, "package.json"));
-    const hasDevApi = fs.existsSync(path.join(projectRoot, "dev-api.js"));
+    const hasDevApi = fs.existsSync(path.join(projectRoot, ".4bnode", "dev-api.js")) || fs.existsSync(path.join(projectRoot, "dev-api.js"));
     if (!hasPackageJson || !hasDevApi) {
       showError("Not inside a 4bnode project. Run 'npx 4bnode init <name>' first, then cd into the project folder.");
       process.exit(1);

package/lib/indexFile.js

@@ -40,6 +40,11 @@ export function addRouteRegistration(importLine, useLine) {
         "server.listen(port",
         useLine.trim() + "\n" + "server.listen(port"
       );
+    } else if (content.match(/^startServer\(/m)) {
+      content = content.replace(
+        /^startServer\(/m,
+        useLine.trim() + "\n" + "startServer("
+      );
     }
   }
 
@@ -48,7 +53,7 @@ export function addRouteRegistration(importLine, useLine) {
 
 export function insertBeforeListen(codeBlock) {
   let content = readIndex();
-  const listenMatch = content.match(/(app|server)\.listen\(port/);
+  const listenMatch = content.match(/(app|server)\.listen\(port/) || content.match(/^startServer\(/m);
   if (listenMatch) {
     content = content.replace(
       listenMatch[0],
@@ -62,25 +67,67 @@ export function insertBeforeListen(codeBlock) {
 
 export function replaceAppListen(newListenBlock) {
   let content = readIndex();
-  content = content.replace(/app\.listen\(port[\s\S]*?\}\);?\n?/m, "");
-  if (!content.includes("server.listen(port")) {
-    content += "\n" + newListenBlock.trim() + "\n";
+
+  // If using startServer() pattern, just swap app.listen → server.listen inside it
+  if (content.includes("startServer(")) {
+    content = content.replace(
+      /const listener = app\.listen\(tryPort\)/,
+      "const listener = server.listen(tryPort)"
+    );
+    // Also swap standalone app.listen(tryPort) if no 'const listener' pattern
+    if (!content.includes("server.listen(tryPort)")) {
+      content = content.replace(
+        /app\.listen\(tryPort\)/,
+        "server.listen(tryPort)"
+      );
+    }
+  } else {
+    content = content.replace(/app\.listen\(port[\s\S]*?\}\);?\n?/m, "");
+    if (!content.includes("server.listen(port")) {
+      content += "\n" + newListenBlock.trim() + "\n";
+    }
   }
   writeIndex(content);
 }
 
 export function insertBeforeRoutes(codeBlock) {
   let content = readIndex();
-  const routesStart = content.indexOf("app.use(");
-  if (routesStart !== -1) {
-    content =
-      content.slice(0, routesStart) +
-      codeBlock.trim() +
-      "\n\n" +
-      content.slice(routesStart);
-  } else {
-    content += "\n" + codeBlock.trim() + "\n";
+
+  // Insert before startServer() or the start server section
+  const markers = [
+    "// ── Start Server",
+    "// ── Helpers",
+    "startServer(",
+  ];
+  let inserted = false;
+  for (const marker of markers) {
+    const idx = content.indexOf(marker);
+    if (idx !== -1) {
+      content =
+        content.slice(0, idx) +
+        codeBlock.trim() +
+        "\n\n" +
+        content.slice(idx);
+      inserted = true;
+      break;
+    }
   }
+
+  if (!inserted) {
+    // Fallback: before first app.use that isn't middleware
+    const routeUseMatch = content.match(/app\.use\(['"]\/(?!_dev)/);
+    if (routeUseMatch) {
+      const idx = content.indexOf(routeUseMatch[0]);
+      content =
+        content.slice(0, idx) +
+        codeBlock.trim() +
+        "\n\n" +
+        content.slice(idx);
+    } else {
+      content += "\n" + codeBlock.trim() + "\n";
+    }
+  }
+
   writeIndex(content);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "4bnode",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "A professional tool to generate a Node.js app by 4Brains Technologies",
   "main": "index.js",
   "type": "module",

package/skeleton/.4bnode/assets/js/App.js

@@ -0,0 +1,115 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { html, api, PAGE_TITLES } from "./lib.js";
+import { AppContext } from "./context.js";
+import { Sidebar } from "./components/Sidebar.js";
+import { ToastContainer } from "./components/ToastContainer.js";
+import { ConfirmDialog } from "./components/Modal.js";
+import { DashboardPage } from "./pages/DashboardPage.js";
+import { DatabasePage } from "./pages/DatabasePage.js";
+import { SchemasPage } from "./pages/SchemasPage.js";
+import { RoutesPage } from "./pages/RoutesPage.js";
+import { ApiTesterPage } from "./pages/ApiTesterPage.js";
+import { RealtimePage } from "./pages/RealtimePage.js";
+import { SerialPortPage } from "./pages/SerialPortPage.js";
+import { EnvironmentPage } from "./pages/EnvironmentPage.js";
+
+function getHashPage() {
+  const hash = window.location.hash.replace("#/", "").replace("#", "");
+  return hash && PAGE_TITLES[hash] ? hash : "dashboard";
+}
+
+export function App() {
+  const [page, setPageState] = useState(getHashPage);
+  const [data, setData] = useState({
+    models: [],
+    routes: [],
+    mongoConfigured: false,
+    routesDirExists: false,
+  });
+  const [status, setStatus] = useState({});
+  const [toasts, setToasts] = useState([]);
+  const [confirmState, setConfirmState] = useState(null);
+
+  const showConfirm = useCallback((message, opts = {}) => {
+    return new Promise((resolve) => {
+      setConfirmState({ message, ...opts, resolve });
+    });
+  }, []);
+
+  const setPage = useCallback((p) => {
+    window.location.hash = "#/" + p;
+  }, []);
+
+  useEffect(() => {
+    function onHash() {
+      setPageState(getHashPage());
+    }
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, []);
+
+  const toast = useCallback((message, type = "info") => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(
+      () => setToasts((prev) => prev.filter((t) => t.id !== id)),
+      3500,
+    );
+  }, []);
+
+  const refresh = useCallback(async () => {
+    const [dashData, statusData] = await Promise.all([
+      api("/dashboard"),
+      api("/status"),
+    ]);
+    setData(dashData);
+    setStatus(statusData);
+  }, []);
+
+  useEffect(() => {
+    refresh().catch(() => {});
+  }, []);
+
+  const pages = {
+    dashboard: html`<${DashboardPage} />`,
+    database: html`<${DatabasePage} />`,
+    schemas: html`<${SchemasPage} />`,
+    routes: html`<${RoutesPage} />`,
+    "api-tester": html`<${ApiTesterPage} />`,
+    realtime: html`<${RealtimePage} />`,
+    serialport: html`<${SerialPortPage} />`,
+    env: html`<${EnvironmentPage} />`,
+  };
+
+  return html`<${AppContext.Provider}
+    value=${{ page, setPage, data, status, toasts, toast, refresh, showConfirm }}
+  >
+    <${Sidebar} />
+    <div className="main">
+      <div className="topbar">
+        <h2>${PAGE_TITLES[page] || "Dashboard"}</h2>
+        <span className="topbar-badge">Development</span>
+      </div>
+      <div className="content">
+        <${AnimatePresence} mode="wait">
+          <${motion.div} key=${page}
+            initial=${{ opacity: 0, y: 8 }}
+            animate=${{ opacity: 1, y: 0 }}
+            exit=${{ opacity: 0, y: -8 }}
+            transition=${{ duration: 0.15 }}>
+            ${pages[page] || pages.dashboard}
+          <//>
+        <//>
+      </div>
+    </div>
+    <${ToastContainer} />
+    ${confirmState && html`<${ConfirmDialog}
+      message=${confirmState.message}
+      confirmLabel=${confirmState.confirmLabel}
+      danger=${confirmState.danger}
+      onConfirm=${() => { confirmState.resolve(true); setConfirmState(null); }}
+      onCancel=${() => { confirmState.resolve(false); setConfirmState(null); }}
+    />`}
+  <//>`;
+}

package/skeleton/.4bnode/assets/js/Root.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+import { AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
+import { html, API, getStoredPasskey } from "./lib.js";
+import { App } from "./App.js";
+import { SplashScreen } from "./screens/SplashScreen.js";
+import { PasskeyScreen } from "./screens/PasskeyScreen.js";
+
+export function Root() {
+  const [showSplash, setShowSplash] = useState(true);
+  const [authed, setAuthed] = useState(false);
+  const [checking, setChecking] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const stored = getStoredPasskey();
+        const res = await fetch(API + '/auth', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ passkey: stored }),
+        });
+        if (res.ok) setAuthed(true);
+      } catch {}
+      setChecking(false);
+    })();
+  }, []);
+
+  if (checking) return null;
+
+  return html`<${AnimatePresence} mode="wait">
+    ${showSplash
+      ? html`<${SplashScreen} key="splash" onDone=${() => setShowSplash(false)} />`
+      : !authed
+      ? html`<${PasskeyScreen} key="passkey" onSuccess=${() => setAuthed(true)} />`
+      : html`<${motion.div} key="app"
+          style=${{ display: 'flex', height: '100vh', width: '100%' }}
+          initial=${{ opacity: 0 }}
+          animate=${{ opacity: 1 }}
+          transition=${{ duration: 0.4 }}>
+          <${App} />
+        <//>`}
+  <//>`;
+}

package/skeleton/.4bnode/assets/js/components/Modal.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { LuTrash2, LuZap } from "react-icons/lu";
+import { html } from "../lib.js";
+
+export function Modal({ title, children, onClose, actions }) {
+  return html`<${AnimatePresence}><${motion.div}
+    className="modal-overlay"
+    onClick=${(e) => e.target === e.currentTarget && onClose()}
+    initial=${{ opacity: 0 }} animate=${{ opacity: 1 }} exit=${{ opacity: 0 }}
+    transition=${{ duration: 0.15 }}
+  >
+    <${motion.div} className="modal"
+      initial=${{ opacity: 0, scale: 0.95, y: 10 }}
+      animate=${{ opacity: 1, scale: 1, y: 0 }}
+      exit=${{ opacity: 0, scale: 0.95, y: 10 }}
+      transition=${{ duration: 0.15 }}>
+      <div className="modal-title">${title}</div>
+      ${children}
+      ${actions && html`<div className="modal-actions">${actions}</div>`}
+    <//>
+  <//><//>`;
+}
+
+export function ConfirmDialog({ message, onConfirm, onCancel, confirmLabel, danger }) {
+  return html`<${AnimatePresence}><${motion.div}
+    className="modal-overlay"
+    onClick=${onCancel}
+    initial=${{ opacity: 0 }} animate=${{ opacity: 1 }} exit=${{ opacity: 0 }}
+    transition=${{ duration: 0.15 }}
+  >
+    <${motion.div} className="modal" onClick=${e => e.stopPropagation()}
+      style=${{ minWidth: '380px', maxWidth: '440px' }}
+      initial=${{ opacity: 0, scale: 0.95, y: 10 }}
+      animate=${{ opacity: 1, scale: 1, y: 0 }}
+      exit=${{ opacity: 0, scale: 0.95, y: 10 }}
+      transition=${{ duration: 0.15 }}>
+      <div className="flex items-center gap-3" style=${{ marginBottom: '16px' }}>
+        <div style=${{ width: '40px', height: '40px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+          background: danger ? 'var(--error-glow)' : 'var(--warning-glow)' }}>
+          <${danger ? LuTrash2 : LuZap} size=${18} color=${danger ? 'var(--error)' : 'var(--warning)'} />
+        </div>
+        <div style=${{ fontSize: '15px', fontWeight: 600 }}>Confirm Action</div>
+      </div>
+      <div style=${{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: '1.6', marginBottom: '20px' }}>${message}</div>
+      <div className="modal-actions">
+        <button className="btn btn-ghost" onClick=${onCancel}>Cancel</button>
+        <button className=${`btn ${danger ? 'btn-danger' : 'btn-primary'}`} onClick=${onConfirm}>${confirmLabel || 'Confirm'}</button>
+      </div>
+    <//>
+  <//><//>`;
+}

package/skeleton/.4bnode/assets/js/components/Sidebar.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { html, Icons } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function Sidebar() {
+  const { page, setPage, data } = useApp();
+  const dbOk = data.mongoConfigured;
+
+  const navItems = [
+    {
+      id: "dashboard",
+      label: "Dashboard",
+      icon: Icons.dashboard,
+      section: "Overview",
+    },
+    {
+      id: "database",
+      label: "Database",
+      icon: Icons.database,
+      section: "Setup",
+    },
+    {
+      id: "schemas",
+      label: "Schemas",
+      icon: Icons.schema,
+      locked: !dbOk,
+      lockMsg: "Requires database",
+    },
+    { id: "routes", label: "API Routes", icon: Icons.route },
+    { id: "api-tester", label: "API Tester", icon: Icons.apiTester },
+    {
+      id: "realtime",
+      label: "Real-time",
+      icon: Icons.realtime,
+      section: "Features",
+    },
+    { id: "serialport", label: "SerialPort", icon: Icons.serial },
+    { id: "env", label: "Environment", icon: Icons.env, section: "Settings" },
+  ];
+
+  let currentSection = null;
+  return html`<div className="sidebar">
+    <div className="sidebar-brand">
+      <pre>${`██╗  ██╗██████╗ ███╗   ██╗ ██████╗ ██████╗ ███████╗\n██║  ██║██╔══██╗████╗  ██║██╔═══██╗██╔══██╗██╔════╝\n███████║██████╔╝██╔██╗ ██║██║   ██║██║  ██║█████╗\n╚════██║██╔══██╗██║╚██╗██║██║   ██║██║  ██║██╔══╝\n     ██║██████╔╝██║ ╚████║╚██████╔╝██████╔╝███████╗\n     ╚═╝╚═════╝ ╚═╝  ╚═══╝ ╚═════╝ ╚═════╝ ╚══════╝`}</pre>
+      <span>Project Dashboard</span>
+    </div>
+    ${navItems.map((item) => {
+      const sectionHeader =
+        item.section && item.section !== currentSection
+          ? ((currentSection = item.section),
+            html`<div className="sidebar-section">${item.section}</div>`)
+          : null;
+      return html`<${React.Fragment} key=${item.id}>
+        ${sectionHeader}
+        <div
+          className=${`sidebar-item ${page === item.id ? "active" : ""} ${item.locked ? "locked" : ""}`}
+          onClick=${() => !item.locked && setPage(item.id)}
+          title=${item.locked ? item.lockMsg : item.label}
+        >
+          <span className="sidebar-icon">${item.icon}</span>
+          ${item.label}
+          ${item.locked &&
+          html`<span className="lock-icon">${Icons.lock}</span>`}
+        </div>
+      <//>`;
+    })}
+  </div>`;
+}

package/skeleton/.4bnode/assets/js/components/ToastContainer.js

@@ -0,0 +1,15 @@
+import { html } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function ToastContainer() {
+  const { toasts } = useApp();
+  if (toasts.length === 0) return null;
+  return html`<div className="toast-container">
+    ${toasts.map(
+      (t) =>
+        html`<div key=${t.id} className=${`toast ${t.type}`}>
+          ${t.message}
+        </div>`,
+    )}
+  </div>`;
+}

package/skeleton/.4bnode/assets/js/context.js

@@ -0,0 +1,7 @@
+import React, { createContext, useContext } from "react";
+
+export const AppContext = createContext();
+
+export function useApp() {
+  return useContext(AppContext);
+}

package/skeleton/.4bnode/assets/js/lib.js

@@ -0,0 +1,83 @@
+import React from "react";
+import htm from "htm";
+import {
+  LuLayoutDashboard,
+  LuDatabase,
+  LuFileText,
+  LuRadio,
+  LuPlus,
+  LuTrash2,
+  LuCheck,
+  LuLock,
+  LuArrowRight,
+  LuPencil,
+  LuCable,
+  LuActivity,
+  LuZap,
+  LuShield,
+  LuBox,
+  LuFlaskConical,
+  LuSend,
+  LuSettings,
+} from "react-icons/lu";
+
+export const html = htm.bind(React.createElement);
+export const API = "/_dev/api";
+
+export function getStoredPasskey() {
+  return sessionStorage.getItem("_dev_passkey") || "";
+}
+
+export async function api(path, options = {}) {
+  const passkey = getStoredPasskey();
+  const headers = { "Content-Type": "application/json" };
+  if (passkey) headers["x-passkey"] = passkey;
+  const res = await fetch(API + path, {
+    headers,
+    ...options,
+    body: options.body ? JSON.stringify(options.body) : undefined,
+  });
+  const text = await res.text();
+  let data;
+  try {
+    data = JSON.parse(text);
+  } catch {
+    if (res.ok) return { message: "Done" };
+    throw new Error("Server restarting, please wait...");
+  }
+  if (!res.ok)
+    throw new Error(data.error || data.message || "Request failed");
+  return data;
+}
+
+export const Icons = {
+  dashboard: html`<${LuLayoutDashboard} size=${16} />`,
+  database: html`<${LuDatabase} size=${16} />`,
+  schema: html`<${LuFileText} size=${16} />`,
+  route: html`<${LuRadio} size=${16} />`,
+  realtime: html`<${LuActivity} size=${16} />`,
+  env: html`<${LuSettings} size=${16} />`,
+  plus: html`<${LuPlus} size=${16} />`,
+  trash: html`<${LuTrash2} size=${16} />`,
+  check: html`<${LuCheck} size=${16} />`,
+  lock: html`<${LuLock} size=${12} />`,
+  arrow: html`<${LuArrowRight} size=${14} />`,
+  edit: html`<${LuPencil} size=${16} />`,
+  serial: html`<${LuCable} size=${16} />`,
+  zap: html`<${LuZap} size=${16} />`,
+  shield: html`<${LuShield} size=${16} />`,
+  box: html`<${LuBox} size=${16} />`,
+  apiTester: html`<${LuFlaskConical} size=${16} />`,
+  send: html`<${LuSend} size=${16} />`,
+};
+
+export const PAGE_TITLES = {
+  dashboard: "Dashboard",
+  database: "Database",
+  schemas: "Schemas",
+  routes: "API Routes",
+  "api-tester": "API Tester",
+  realtime: "Real-time",
+  serialport: "SerialPort",
+  env: "Environment",
+};

package/skeleton/.4bnode/assets/js/main.js

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import { html } from "./lib.js";
+import { Root } from "./Root.js";
+
+createRoot(document.getElementById("root")).render(html`<${Root} />`);