htmlboard 0.2.0 → 0.4.0

package/src/server.js

@@ -3,6 +3,7 @@ import net from 'node:net';
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { loadDesignsManifest } from './designs.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -31,210 +32,12 @@ const MIME_TYPES = {
   '.mp4': 'video/mp4'
 };
 
-const IGNORED_DIRS = new Set([
-  'node_modules',
-  '.git',
-  '.github',
-  'dist',
-  'build',
-  '.vscode',
-  '.idea',
-  '.gemini',
-  '.agents'
-]);
-
-/**
- * Extract <title> content from HTML text if available
- */
-function extractTitleFromHtml(content, fallbackName) {
-  const match = content.match(/<title[^>]*>([^<]+)<\/title>/i);
-  if (match && match[1]?.trim()) {
-    return match[1].trim();
-  }
-  return fallbackName
-    .replace(/\.html$/i, '')
-    .replace(/[-_]/g, ' ')
-    .replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
-/** Default frame size for each category */
-const CATEGORY_SIZES = {
-  mobile: [390, 844],
-  tablet: [768, 1024],
-  components: [720, 600],
-  desktop: [1280, 800],
-  responsive: [1200, 800]
-};
-
-/**
- * Guess an artboard's category from words in its path, then from its width
- */
-export function inferCategory(file, width) {
-  const lower = file.toLowerCase();
-  if (/mobile|phone|iphone/.test(lower)) return 'mobile';
-  if (/tablet|ipad/.test(lower)) return 'tablet';
-  if (/component|\bui\b|atomic/.test(lower)) return 'components';
-  if (/desktop|laptop|screen/.test(lower)) return 'desktop';
-  if (width) {
-    if (width <= 480) return 'mobile';
-    if (width <= 1024) return 'tablet';
-    return 'desktop';
-  }
-  return 'responsive';
-}
-
-function slugify(text) {
-  return String(text).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '')
-    .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
-}
-
 /** True when target is base itself or inside it */
 function isInside(base, target) {
   const rel = path.relative(base, target);
   return rel === '' || (!rel.startsWith('..') && !path.isAbsolute(rel));
 }
 
-/**
- * Scan target directory recursively for HTML files to auto-discover
- */
-export function discoverDesigns(baseDir) {
-  const artboards = [];
-
-  function scan(currentDir, relativePath = '') {
-    let entries;
-    try {
-      entries = fs.readdirSync(currentDir, { withFileTypes: true });
-    } catch {
-      return;
-    }
-
-    for (const entry of entries) {
-      if (entry.name.startsWith('.') && entry.name !== '.') continue;
-      if (IGNORED_DIRS.has(entry.name)) continue;
-
-      const fullPath = path.join(currentDir, entry.name);
-      const relPath = relativePath ? path.join(relativePath, entry.name) : entry.name;
-
-      if (entry.isDirectory()) {
-        scan(fullPath, relPath);
-      } else if (entry.isFile() && entry.name.toLowerCase().endsWith('.html')) {
-        let title = '';
-        let fileContent = '';
-        try {
-          fileContent = fs.readFileSync(fullPath, 'utf8');
-          title = extractTitleFromHtml(fileContent, entry.name);
-        } catch {
-          title = entry.name;
-        }
-
-        const category = inferCategory(relPath);
-        const [width, height] = CATEGORY_SIZES[category];
-
-        const sectionName = relativePath ? relativePath.replace(/[\\/]/g, ' / ') : 'Root Designs';
-
-        artboards.push({
-          id: slugify(relPath.replace(/\.html$/i, '')),
-          title,
-          file: relPath.replace(/\\/g, '/'),
-          category,
-          width,
-          height,
-          sectionName,
-          tags: [category]
-        });
-      }
-    }
-  }
-
-  scan(baseDir);
-
-  // Group into sections
-  const sectionsMap = new Map();
-  for (const board of artboards) {
-    const sName = board.sectionName;
-    if (!sectionsMap.has(sName)) {
-      sectionsMap.set(sName, {
-        id: sName.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
-        name: sName,
-        description: `HTML artboards discovered in ${sName}`,
-        artboards: []
-      });
-    }
-    const { sectionName, ...rest } = board;
-    sectionsMap.get(sName).artboards.push(rest);
-  }
-
-  const projectName = path.basename(path.resolve(baseDir)) || 'Design Explorer';
-
-  return {
-    title: projectName,
-    description: 'Auto-discovered HTML artboards in workspace',
-    autoDiscovered: true,
-    sections: Array.from(sectionsMap.values())
-  };
-}
-
-/**
- * Fill in what a manifest may leave out, so the explorer always gets
- * `sections[].{id, name, artboards[].{id, title, file, category}}`.
- * Accepts the short form too: `sections[].title` and `sections[].designs[]`
- * with only `{ file, title, width, height }`.
- * `prefix` is prepended to every file (the designs folder relative to the served root).
- */
-export function normalizeManifest(manifest, prefix = '') {
-  const usedIds = new Set();
-  const uniqueId = (wanted) => {
-    let id = wanted || 'artboard';
-    for (let n = 2; usedIds.has(id); n++) id = `${wanted}-${n}`;
-    usedIds.add(id);
-    return id;
-  };
-
-  const sections = (Array.isArray(manifest.sections) ? manifest.sections : []).map((section, i) => {
-    const name = section.name ?? section.title ?? `Section ${i + 1}`;
-    const boards = section.artboards ?? section.designs ?? [];
-    return {
-      ...section,
-      id: section.id ?? (slugify(name) || `section-${i + 1}`),
-      name,
-      artboards: boards.filter((board) => board && board.file).map((board) => {
-        const file = prefix ? path.posix.join(prefix, board.file) : board.file;
-        return {
-          ...board,
-          id: uniqueId(board.id ?? slugify(board.file.replace(/\.html?(?=$|\?)/i, ''))),
-          title: board.title ?? board.file,
-          file,
-          category: board.category ?? inferCategory(board.file.split('?')[0], board.width)
-        };
-      })
-    };
-  });
-
-  return { ...manifest, sections };
-}
-
-/**
- * Load designs configuration from designs.json or auto-discover.
- * With `rootDir` (a folder containing baseDir), artboard paths are given relative to it.
- */
-export function loadDesignsManifest(baseDir, rootDir = baseDir) {
-  const prefix = path.relative(rootDir, baseDir).split(path.sep).join('/');
-  const configPath = path.join(baseDir, 'designs.json');
-  if (fs.existsSync(configPath)) {
-    try {
-      const raw = fs.readFileSync(configPath, 'utf8');
-      const data = JSON.parse(raw);
-      return {
-        ...normalizeManifest(data, prefix),
-        autoDiscovered: false
-      };
-    } catch (err) {
-      console.warn(`[htmlboard] Failed parsing designs.json: ${err.message}. Falling back to auto-discovery.`);
-    }
-  }
-  return normalizeManifest(discoverDesigns(baseDir), prefix);
-}
-
 /** Folders the watcher leaves alone: hidden ones (.git, .vscode, …) and dependencies */
 const skipWatching = (name) => name.startsWith('.') || name === 'node_modules';
 

package/src/templates/{artboards/desktop.html → 01-screens/01-desktop.html}

@@ -4,30 +4,11 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Desktop Dashboard</title>
+  <meta name="description" content="Main analytics dashboard with sidebar, metric cards, and charts">
+  <meta name="htmlboard" content="width=1280, height=820">
+  <link rel="stylesheet" href="../styles.css">
   <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      -webkit-font-smoothing: antialiased;
-    }
-    :root {
-      --bg: #0b0d13;
-      --sidebar-bg: #10131d;
-      --panel-bg: #151824;
-      --border: #23283c;
-      --accent: #6366f1;
-      --accent-light: #818cf8;
-      --text: #f1f5f9;
-      --text-muted: #94a3b8;
-      --emerald: #10b981;
-      --amber: #f59e0b;
-      --purple: #a855f7;
-    }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      background: var(--bg);
-      color: var(--text);
       display: flex;
       height: 100vh;
       overflow: hidden;
@@ -35,7 +16,7 @@
     /* Sidebar */
     .sidebar {
       width: 240px;
-      background: var(--sidebar-bg);
+      background: #10131d;
       border-right: 1px solid var(--border);
       display: flex;
       flex-direction: column;
@@ -43,10 +24,8 @@
       flex-shrink: 0;
     }
     .logo-container {
-      display: flex;
-      align-items: center;
-      gap: 10px;
       padding: 4px 8px 24px;
+      gap: 10px;
       font-weight: 700;
       font-size: 17px;
       letter-spacing: -0.02em;
@@ -54,8 +33,8 @@
     .logo-badge {
       width: 32px;
       height: 32px;
-      background: linear-gradient(135deg, #6366f1, #3b82f6);
-      border-radius: 8px;
+      background: linear-gradient(135deg, var(--accent), #3b82f6);
+      border-radius: var(--radius);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -68,22 +47,14 @@
       gap: 4px;
       flex: 1;
     }
-    .nav-label {
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: #64748b;
-      padding: 8px 12px 4px;
-      font-weight: 600;
-    }
+    .nav-group .label { padding: 8px 12px 4px; font-size: 11px; }
     .nav-link {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 10px 12px;
-      border-radius: 8px;
+      border-radius: var(--radius);
       color: var(--text-muted);
-      text-decoration: none;
       font-size: 14px;
       font-weight: 500;
       transition: all 0.15s ease;
@@ -98,25 +69,12 @@
       font-weight: 600;
     }
     .user-footer {
-      display: flex;
-      align-items: center;
-      gap: 12px;
       padding: 12px;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid var(--border);
     }
-    .user-avatar {
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, #ec4899, #8b5cf6);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
-      font-size: 14px;
-    }
+    .user-footer .avatar { background: linear-gradient(135deg, #ec4899, #8b5cf6); font-weight: 600; }
     /* Main Content */
     .main {
       flex: 1;
@@ -124,7 +82,6 @@
       flex-direction: column;
       overflow-y: auto;
     }
-    /* Top Header */
     .topbar {
       height: 64px;
       border-bottom: 1px solid var(--border);
@@ -135,114 +92,51 @@
       background: rgba(11, 13, 19, 0.8);
       backdrop-filter: blur(12px);
     }
-    .search-input {
-      background: var(--panel-bg);
-      border: 1px solid var(--border);
-      padding: 8px 16px 8px 36px;
-      border-radius: 8px;
-      color: var(--text);
-      font-size: 13px;
-      width: 280px;
-      position: relative;
-    }
-    .header-actions {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-    .primary-btn {
-      background: var(--accent);
-      color: #fff;
-      border: none;
-      padding: 8px 18px;
-      border-radius: 8px;
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-    }
-    /* Dashboard Area */
+    .topbar .input { width: 280px; padding: 8px 16px; }
+    .topbar .row { gap: 16px; font-size: 13px; }
     .content {
       padding: 28px 32px;
       display: flex;
       flex-direction: column;
       gap: 24px;
     }
-    .page-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-    }
     .page-title {
       font-size: 24px;
       font-weight: 700;
       letter-spacing: -0.02em;
     }
-    .page-sub {
-      color: var(--text-muted);
-      font-size: 14px;
-      margin-top: 4px;
-    }
+    .page-sub { font-size: 14px; margin-top: 4px; }
     /* Stat Cards */
     .stats-row {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
     }
-    .stat-card {
-      background: var(--panel-bg);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 20px;
-    }
-    .stat-title {
-      font-size: 13px;
-      color: var(--text-muted);
-      margin-bottom: 8px;
-    }
+    .stat-title { font-size: 13px; margin-bottom: 8px; }
     .stat-val {
       font-size: 26px;
       font-weight: 700;
       margin-bottom: 8px;
     }
-    .stat-badge {
-      font-size: 12px;
-      font-weight: 600;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-    }
+    .stat-badge { font-size: 12px; font-weight: 600; }
     .stat-badge.pos { color: var(--emerald); }
     .stat-badge.warn { color: var(--amber); }
-
-    /* Visual Grid */
+    /* Panels */
     .grid-2 {
       display: grid;
       grid-template-columns: 2fr 1fr;
       gap: 20px;
     }
-    .panel {
-      background: var(--panel-bg);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 22px;
-    }
+    .grid-2 .card { padding: 22px; }
     .panel-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
+      font-size: 12px;
     }
-    .panel-title {
-      font-size: 16px;
-      font-weight: 600;
-    }
-    /* Chart SVG */
-    .chart-container {
-      width: 100%;
-      height: 180px;
-    }
-    /* Table */
+    .panel-title { font-size: 16px; font-weight: 600; }
+    .chart-container { width: 100%; height: 180px; }
     .data-table {
       width: 100%;
       border-collapse: collapse;
@@ -250,7 +144,7 @@
     }
     .data-table th {
       text-align: left;
-      color: #64748b;
+      color: var(--text-subtle);
       font-weight: 500;
       padding-bottom: 12px;
       border-bottom: 1px solid var(--border);
@@ -259,90 +153,80 @@
       padding: 12px 0;
       border-bottom: 1px solid rgba(255, 255, 255, 0.04);
     }
-    .status-pill {
-      display: inline-block;
-      padding: 3px 8px;
-      border-radius: 12px;
-      font-size: 11px;
-      font-weight: 600;
-    }
-    .status-pill.success { background: rgba(16, 185, 129, 0.15); color: var(--emerald); }
-    .status-pill.pending { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
+    .data-table .badge { padding: 3px 8px; font-size: 11px; }
   </style>
 </head>
 <body>
   <aside class="sidebar">
-    <div class="logo-container">
+    <div class="logo-container row">
       <div class="logo-badge">⚡</div>
       <span>Nexus Platform</span>
     </div>
 
     <nav class="nav-group">
-      <div class="nav-label">Core</div>
+      <div class="label">Core</div>
       <a href="#" class="nav-link active">📊 Dashboard</a>
       <a href="#" class="nav-link">👥 Customers</a>
       <a href="#" class="nav-link">💳 Invoices</a>
       <a href="#" class="nav-link">📈 Analytics</a>
 
-      <div class="nav-label" style="margin-top: 16px;">System</div>
+      <div class="label" style="margin-top: 16px">System</div>
       <a href="#" class="nav-link">⚙️ Settings</a>
       <a href="#" class="nav-link">🛡️ Security</a>
     </nav>
 
-    <div class="user-footer">
-      <div class="user-avatar">AD</div>
+    <div class="user-footer row">
+      <div class="avatar">AD</div>
       <div>
-        <div style="font-size: 13px; font-weight: 600;">Alex Morgan</div>
-        <div style="font-size: 11px; color: var(--text-muted);">alex@nexus.io</div>
+        <div style="font-size: 13px; font-weight: 600">Alex Morgan</div>
+        <div class="muted" style="font-size: 11px">alex@nexus.io</div>
       </div>
     </div>
   </aside>
 
   <main class="main">
     <header class="topbar">
-      <input type="text" class="search-input" placeholder="Search resources, clients, reports...">
-      <div class="header-actions">
-        <span style="font-size: 13px; color: var(--text-muted);">Last sync: Just now</span>
-        <button class="primary-btn">+ New Deployment</button>
+      <input type="text" class="input" placeholder="Search resources, clients, reports...">
+      <div class="row">
+        <span class="muted">Last sync: Just now</span>
+        <button class="btn btn-primary">+ New Deployment</button>
       </div>
     </header>
 
     <div class="content">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">Executive Overview</h1>
-          <p class="page-sub">Performance metrics and active client deployments</p>
-        </div>
+      <div>
+        <h1 class="page-title">Executive Overview</h1>
+        <p class="page-sub muted">Performance metrics and active client deployments</p>
       </div>
 
       <div class="stats-row">
-        <div class="stat-card">
-          <div class="stat-title">Monthly Recurring Revenue</div>
+        <div class="card">
+          <div class="stat-title muted">Monthly Recurring Revenue</div>
           <div class="stat-val">$184,290</div>
           <div class="stat-badge pos">▲ +12.4% vs last mo</div>
         </div>
-        <div class="stat-card">
-          <div class="stat-title">Active Organizations</div>
+        <div class="card">
+          <div class="stat-title muted">Active Organizations</div>
           <div class="stat-val">1,428</div>
           <div class="stat-badge pos">▲ +48 new</div>
         </div>
-        <div class="stat-card">
-          <div class="stat-title">API Requests (24h)</div>
+        <div class="card">
+          <div class="stat-title muted">API Requests (24h)</div>
           <div class="stat-val">42.8M</div>
           <div class="stat-badge pos">▲ 99.98% uptime</div>
         </div>
-        <div class="stat-card">
-          <div class="stat-title">Average Latency</div>
+        <div class="card">
+          <div class="stat-title muted">Average Latency</div>
           <div class="stat-val">34ms</div>
           <div class="stat-badge warn">▼ -2ms target</div>
         </div>
       </div>
 
       <div class="grid-2">
-        <div class="panel">
+        <div class="card">
           <div class="panel-header">
             <h2 class="panel-title">Throughput & Workload Trends</h2>
-            <span style="font-size: 12px; color: var(--text-muted);">Trailing 7 Days</span>
+            <span class="muted">Trailing 7 Days</span>
           </div>
           <div class="chart-container">
             <svg viewBox="0 0 500 150" width="100%" height="100%" preserveAspectRatio="none">
@@ -359,7 +243,7 @@
           </div>
         </div>
 
-        <div class="panel">
+        <div class="card">
           <div class="panel-header">
             <h2 class="panel-title">Recent Audits</h2>
           </div>
@@ -373,19 +257,19 @@
             <tbody>
               <tr>
                 <td>us-east-cluster-01</td>
-                <td><span class="status-pill success">Optimal</span></td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
               </tr>
               <tr>
                 <td>auth-gateway-proxy</td>
-                <td><span class="status-pill success">Optimal</span></td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
               </tr>
               <tr>
                 <td>edge-cache-frankfurt</td>
-                <td><span class="status-pill pending">Rebalancing</span></td>
+                <td><span class="badge badge-amber">Rebalancing</span></td>
               </tr>
               <tr>
                 <td>db-replica-primary</td>
-                <td><span class="status-pill success">Optimal</span></td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
               </tr>
             </tbody>
           </table>