4bnode 3.5.3 → 4.0.2

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} />`);