webhanger 1.0.1 → 1.0.5

package/bin/cli.js

@@ -200,6 +200,60 @@ async function init() {
     console.log(chalk.green("\n✅ webhanger.config.json created."));
     console.log(chalk.yellow(`🔑 Project ID: ${projectId}`));
     console.log(chalk.gray("Keep your secretKey safe — it signs all your component URLs.\n"));
+
+    // ── Optional: Edge Worker setup ───────────────────────────────────────────
+    const { useEdge } = await inquirer.prompt([{
+        type: "confirm",
+        name: "useEdge",
+        message: "Setup Cloudflare Edge Worker for token validation + geo routing? (optional, recommended for production):",
+        default: false
+    }]);
+
+    if (useEdge) {
+        const { workerName } = await inquirer.prompt([{
+            type: "input",
+            name: "workerName",
+            message: "Cloudflare Worker name:",
+            default: `webhanger-edge-${answers.projectName.toLowerCase().replace(/\s+/g, "-")}`
+        }]);
+
+        // Write edge/worker.js
+        await fs.ensureDir("./edge");
+        const workerSrc = await fs.readFile(new URL("../edge/worker.js", import.meta.url), "utf-8").catch(() => null);
+        if (workerSrc) await fs.writeFile("./edge/worker.js", workerSrc, "utf-8");
+
+        // Write wrangler.toml
+        const wranglerToml = `name = "${workerName}"
+main = "worker.js"
+compatibility_date = "2024-01-01"
+
+[[kv_namespaces]]
+binding = "WH_SECRETS"
+id = "REPLACE_WITH_YOUR_KV_ID"
+
+[[kv_namespaces]]
+binding = "WH_VERSIONS"
+id = "REPLACE_WITH_YOUR_KV_ID_2"
+
+[vars]
+ORIGIN_DEFAULT = "${cdnUrl}"
+ORIGIN_AP      = "${cdnUrl}"
+ORIGIN_EU      = "${cdnUrl}"
+`;
+        await fs.writeFile("./edge/wrangler.toml", wranglerToml, "utf-8");
+
+        console.log(chalk.green("\n✅ Edge worker files created in ./edge/"));
+        console.log(chalk.white("\nNext steps to activate edge delivery:"));
+        console.log(chalk.gray("  1. Install wrangler:  npm install -g wrangler"));
+        console.log(chalk.gray("  2. Login:             wrangler login"));
+        console.log(chalk.gray("  3. Create KV stores:  wrangler kv:namespace create WH_SECRETS"));
+        console.log(chalk.gray("                        wrangler kv:namespace create WH_VERSIONS"));
+        console.log(chalk.gray("  4. Update KV IDs in   ./edge/wrangler.toml"));
+        console.log(chalk.gray(`  5. Push secret:       wrangler kv:key put --binding=WH_SECRETS "secret:${projectId}" "${secretKey}"`));
+        console.log(chalk.gray("  6. Deploy worker:     cd edge && wrangler deploy"));
+        console.log(chalk.gray("  7. Update cdn.url in  webhanger.config.json to your worker URL"));
+        console.log(chalk.yellow("\n⚡ Once deployed, all component requests are validated at the edge.\n"));
+    }
 }
 
 async function deployCommand() {
@@ -272,6 +326,402 @@ switch (command) {
     case "deploy":
         deployCommand();
         break;
+    case "edge-init": {
+        // Pushes projectId + secretKey to Cloudflare KV so the worker can validate tokens
+        const loadConfigFn = (await import("../helper/loadConfig.js")).default;
+        const config = loadConfigFn();
+        const { projectId, secretKey } = config;
+
+        console.log(chalk.cyan("\n⚡ Initializing edge worker...\n"));
+        console.log(chalk.white("Run these commands to push your secrets to Cloudflare KV:\n"));
+        console.log(chalk.gray(`  wrangler kv:key put --binding=WH_SECRETS "secret:${projectId}" "${secretKey}"`));
+        console.log(chalk.gray(`\nFor each deployed component, register its version:`));
+        console.log(chalk.gray(`  wrangler kv:key put --binding=WH_VERSIONS "version:navbar" "1.0.0"`));
+        console.log(chalk.yellow(`\n📁 Edge worker source: edge/worker.js`));
+        console.log(chalk.yellow(`📁 Wrangler config:    edge/wrangler.toml`));
+        console.log(chalk.white(`\nDeploy the worker:`));
+        console.log(chalk.gray(`  cd edge && wrangler deploy`));
+        console.log(chalk.white(`\nThen update your CDN URL in webhanger.config.json to point to the worker:`));
+        console.log(chalk.gray(`  "cdn": { "url": "https://webhanger-edge.your-subdomain.workers.dev" }`));
+        break;
+    }
+    case "breakdown": {
+        const bdDir = args[1];
+        if (!bdDir) {
+            console.log(chalk.red("Usage: wh breakdown <component-dir>"));
+            process.exit(1);
+        }
+        const { breakdown: runBreakdown } = await import("../helper/breakdown.js");
+        console.log(chalk.cyan(`\n🔧 Breaking down ${bdDir}...\n`));
+        const result = await runBreakdown(bdDir);
+        if (!result) {
+            console.log(chalk.gray("  Nothing to break down — files already separated or no embedded styles/scripts found."));
+        } else {
+            console.log(chalk.green("  ✅ Breakdown complete!"));
+            if (result.extracted.html) console.log(chalk.gray("  → index.html"));
+            if (result.extracted.css)  console.log(chalk.gray(`  → style.css  (${result.cssLines} lines)`));
+            if (result.extracted.js)   console.log(chalk.gray(`  → script.js  (${result.jsLines} lines)`));
+        }
+        break;
+    }
+    case "access": {
+        const subCmd = args[1]; // grant | revoke | list
+        const loadConfigFn = (await import("../helper/loadConfig.js")).default;
+        const { grantAccess, revokeAccess, listAccess, generateApiKey } = await import("../helper/accessControl.js");
+        const config = loadConfigFn();
+        const { projectId, db } = config;
+
+        if (subCmd === "grant") {
+            const { default: inquirerLocal } = await import("inquirer");
+            const ans = await inquirerLocal.prompt([
+                {
+                    type: "list",
+                    name: "role",
+                    message: "Select role:",
+                    choices: [
+                        { name: "owner    — full access", value: "owner" },
+                        { name: "admin    — deploy + delete + manage", value: "admin" },
+                        { name: "deployer — deploy + read only", value: "deployer" },
+                        { name: "viewer   — read only", value: "viewer" }
+                    ]
+                },
+                { type: "input", name: "label", message: "Label (e.g. CI/CD, teammate name):", default: "" }
+            ]);
+            const apiKey = generateApiKey();
+            const result = await grantAccess(db, projectId, apiKey, ans.role, ans.label);
+            console.log(chalk.green(`\n✅ Access granted`));
+            console.log(chalk.white(`  API Key     : ${result.apiKey}`));
+            console.log(chalk.white(`  Role        : ${result.role}`));
+            console.log(chalk.white(`  Permissions : ${result.permissions.join(", ")}`));
+            console.log(chalk.yellow(`\n  Store this key safely — it won't be shown again.\n`));
+
+        } else if (subCmd === "revoke") {
+            const apiKey = args[2];
+            if (!apiKey) { console.log(chalk.red("Usage: wh access revoke <api-key>")); process.exit(1); }
+            await revokeAccess(db, projectId, apiKey);
+            console.log(chalk.green(`✅ Access revoked for ${apiKey}`));
+
+        } else if (subCmd === "list") {
+            const entries = await listAccess(db, projectId);
+            if (!entries.length) { console.log(chalk.gray("No access entries found.")); break; }
+            console.log(chalk.cyan(`\n🔑 Access entries for project ${projectId}:\n`));
+            entries.forEach(e => {
+                console.log(chalk.white(`  ${e.apiKey.slice(0, 20)}...`));
+                console.log(chalk.gray(`    Role: ${e.role} | Permissions: ${e.permissions.join(", ")} | Label: ${e.label || "-"}`));
+            });
+            console.log();
+
+        } else {
+            console.log(chalk.white("Usage:"));
+            console.log(chalk.gray("  wh access grant          — generate a new API key with a role"));
+            console.log(chalk.gray("  wh access revoke <key>   — revoke an API key"));
+            console.log(chalk.gray("  wh access list           — list all access entries"));
+        }
+        break;
+    }
+    case "ship": {
+        const shipCompDir = args[1];
+        const shipSiteDir = args[2];
+        const shipVersion = args[3] || "1.0.0";
+        const shipOut     = args[4] || "./dist";
+
+        if (!shipCompDir || !shipSiteDir) {
+            console.log(chalk.red("Usage: wh ship <components-dir> <site-dir> [version] [out-dir]"));
+            console.log(chalk.gray("Example: wh ship ./components ./docs 1.0.0 ./dist"));
+            process.exit(1);
+        }
+
+        const { default: fsExtra } = await import("fs-extra");
+        const { default: pathMod } = await import("path");
+        const { deploy: registryDeploy } = await import("../core/registry.js");
+        const { resolve: resolveGraph } = await import("../core/resolver.js");
+        const { build } = await import("../core/builder.js");
+        const loadConfigFn = (await import("../helper/loadConfig.js")).default;
+        const { default: archiver } = await import("archiver");
+        const { default: fsSync } = await import("fs");
+
+        const config = loadConfigFn();
+        const { projectId, db } = config;
+
+        // ── Step 1: Deploy all components ─────────────────────────────────────
+        console.log(chalk.cyan(`\n🚀 [1/4] Deploying components from ${shipCompDir}...\n`));
+
+        const entries = await fsExtra.readdir(shipCompDir);
+        const compDirs = [];
+        for (const entry of entries) {
+            const full = pathMod.resolve(shipCompDir, entry);
+            const stat = await fsExtra.stat(full);
+            if (stat.isDirectory()) compDirs.push({ name: entry, dir: full });
+        }
+
+        if (!compDirs.length) {
+            console.log(chalk.red(`No component folders found in ${shipCompDir}`));
+            process.exit(1);
+        }
+
+        const deployed = {};
+        for (const comp of compDirs) {
+            process.stdout.write(`  ${comp.name}@${shipVersion}... `);
+            try {
+                deployed[comp.name] = await registryDeploy(config, comp.dir, comp.name, shipVersion);
+                console.log(chalk.green("✅"));
+            } catch (err) {
+                console.log(chalk.red(`❌ ${err.message}`));
+            }
+        }
+
+        // ── Step 2: Resolve dependency graph ──────────────────────────────────
+        console.log(chalk.cyan(`\n🔍 [2/4] Resolving dependency graph...\n`));
+
+        const allDeps = new Set();
+        for (const comp of compDirs) {
+            const metaPath = pathMod.join(comp.dir, "webhanger.component.json");
+            if (await fsExtra.pathExists(metaPath)) {
+                const meta = await fsExtra.readJson(metaPath);
+                (meta.dependencies || []).forEach(d => allDeps.add(d.split("@")[0]));
+            }
+        }
+        const roots = compDirs.filter(c => !allDeps.has(c.name));
+        console.log(chalk.gray(`  Root components: ${roots.map(r => r.name).join(", ")}`));
+
+        // Write wh-manifest.json into site dir
+        const manifest = {
+            pid: projectId,
+            components: Object.fromEntries(
+                Object.entries(deployed).map(([name, d]) => [
+                    name, { url: d.cdnUrl, urls: d.cdnUrls || [d.cdnUrl], token: d.token, expires: d.expires }
+                ])
+            )
+        };
+        await fsExtra.ensureDir(shipSiteDir);
+        await fsExtra.writeJson(pathMod.join(shipSiteDir, "wh-manifest.json"), manifest, { spaces: 2 });
+        console.log(chalk.gray(`  wh-manifest.json written to ${shipSiteDir}`));
+
+        // ── Step 3: Production build ───────────────────────────────────────────
+        console.log(chalk.cyan(`\n🏗️  [3/4] Building ${shipSiteDir} → ${shipOut}...\n`));
+
+        try {
+            const buildResult = await build(shipSiteDir, shipOut);
+            // Copy manifest to dist too
+            await fsExtra.copy(
+                pathMod.join(shipSiteDir, "wh-manifest.json"),
+                pathMod.join(shipOut, "wh-manifest.json")
+            );
+            buildResult.pages.forEach(p => {
+                const kb = (p.size / 1024).toFixed(1);
+                console.log(chalk.gray(`  ${p.fileName.padEnd(25)} ${kb} kB`));
+            });
+        } catch (err) {
+            console.log(chalk.yellow(`  Build warning: ${err.message}`));
+        }
+
+        // ── Step 4: Zip ───────────────────────────────────────────────────────
+        console.log(chalk.cyan(`\n📦 [4/4] Zipping ${shipOut}...\n`));
+
+        const zipPath = pathMod.join(pathMod.dirname(shipOut), "deploy.zip");
+        await new Promise((resolve, reject) => {
+            const output = fsSync.createWriteStream(zipPath);
+            const archive = archiver("zip", { zlib: { level: 9 } });
+            output.on("close", resolve);
+            archive.on("error", reject);
+            archive.pipe(output);
+            archive.directory(shipOut, false);
+            archive.finalize();
+        });
+
+        const zipSize = ((await fsExtra.stat(zipPath)).size / 1024).toFixed(1);
+
+        console.log(chalk.green(`\n✅ Ship complete!\n`));
+        console.log(chalk.white(`  Components deployed : ${compDirs.length}`));
+        console.log(chalk.white(`  Output              : ${shipOut}`));
+        console.log(chalk.white(`  Deploy zip          : ${zipPath} (${zipSize} kB)`));
+        console.log(chalk.gray(`\n  Upload deploy.zip to Netlify, S3, or any static host.\n`));
+        break;
+    }
+    case "graph-deploy": {
+        const graphDir = args[1];
+        const graphVersion = args[2] || "1.0.0";
+        const graphOut = args[3] || "./graph-output";
+
+        if (!graphDir) {
+            console.log(chalk.red("Usage: wh graph-deploy <components-dir> [version] [output-dir]"));
+            console.log(chalk.gray("Example: wh graph-deploy ./components 1.0.0 ./output"));
+            process.exit(1);
+        }
+
+        const { default: fsExtra } = await import("fs-extra");
+        const { default: pathMod } = await import("path");
+        const { deploy: registryDeploy } = await import("../core/registry.js");
+        const { resolve: resolveGraph } = await import("../core/resolver.js");
+        const loadConfigFn = (await import("../helper/loadConfig.js")).default;
+
+        const config = loadConfigFn();
+        const { projectId, db } = config;
+
+        // Scan all component folders
+        const entries = await fsExtra.readdir(graphDir);
+        const compDirs = [];
+        for (const entry of entries) {
+            const full = pathMod.join(graphDir, entry);
+            const stat = await fsExtra.stat(full);
+            if (stat.isDirectory()) compDirs.push({ name: entry, dir: full });
+        }
+
+        if (!compDirs.length) {
+            console.log(chalk.red(`No component folders found in ${graphDir}`));
+            process.exit(1);
+        }
+
+        console.log(chalk.cyan(`\n🚀 Graph deploying ${compDirs.length} components...\n`));
+
+        // Deploy all components
+        const deployed = {};
+        for (const comp of compDirs) {
+            process.stdout.write(`  ${comp.name}@${graphVersion}... `);
+            try {
+                deployed[comp.name] = await registryDeploy(config, comp.dir, comp.name, graphVersion);
+                console.log(chalk.green("✅"));
+            } catch (err) {
+                console.log(chalk.red(`❌ ${err.message}`));
+            }
+        }
+
+        // Find root component (one that is depended on by none, or named "dashboard"/"app"/"root")
+        const allDeps = new Set();
+        for (const comp of compDirs) {
+            const metaPath = pathMod.join(comp.dir, "webhanger.component.json");
+            if (await fsExtra.pathExists(metaPath)) {
+                const meta = await fsExtra.readJson(metaPath);
+                (meta.dependencies || []).forEach(d => allDeps.add(d.split("@")[0]));
+            }
+        }
+        const roots = compDirs.filter(c => !allDeps.has(c.name));
+        const rootName = roots[0]?.name || compDirs[compDirs.length - 1].name;
+
+        console.log(chalk.cyan(`\n🔍 Resolving graph from root: ${rootName}@${graphVersion}\n`));
+
+        let graph;
+        try {
+            graph = await resolveGraph(db, projectId, rootName, graphVersion);
+        } catch (err) {
+            console.log(chalk.red(`❌ Graph resolution failed: ${err.message}`));
+            process.exit(1);
+        }
+
+        console.log(chalk.white("Load order:"));
+        graph.forEach((c, i) => console.log(chalk.gray(`  ${i + 1}. ${c.name}@${c.version}`)));
+
+        // Generate manifest + HTML
+        await fsExtra.ensureDir(graphOut);
+        const selectors = graph.reduce((acc, c) => {
+            acc[c.name] = `[data-wh-${c.name}]`;
+            return acc;
+        }, {});
+
+        // Write wh-manifest.json — sensitive data stays out of HTML
+        const manifest = {
+            pid: projectId,
+            components: graph.reduce((acc, c) => {
+                acc[c.name] = { url: c.cdnUrl, token: c.token, expires: c.expires };
+                return acc;
+            }, {})
+        };
+        await fsExtra.writeJson(pathMod.join(graphOut, "wh-manifest.json"), manifest, { spaces: 2 });
+
+        const mounts = graph.map(c => `  <div data-wh-${c.name}></div>`).join("\n");
+
+        const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebHanger — ${rootName}</title>
+  <style>* { margin:0; padding:0; box-sizing:border-box; } body { background:#030712; }</style>
+</head>
+<body>
+${mounts}
+
+  <script src="https://unpkg.com/webhanger-front@latest/browser.min.js"></script>
+  <script>
+    const selectors = ${JSON.stringify(selectors, null, 2)};
+    const rootName = "${rootName}";
+
+    async function loadGraph() {
+      const res = await fetch("./wh-manifest.json");
+      const m = await res.json();
+      await WebHangerFront.clearCache();
+
+      // Inject root first so nested mount points exist in DOM
+      const root = m.components[rootName];
+      if (root) await WebHangerFront.load(root.url, m.pid, root.token, root.expires, selectors[rootName]);
+
+      // Then inject deps into their mount points
+      for (const [name, comp] of Object.entries(m.components)) {
+        if (name === rootName) continue;
+        const sel = selectors[name];
+        if (sel) await WebHangerFront.load(comp.url, m.pid, comp.token, comp.expires, sel);
+      }
+    }
+
+    loadGraph();
+  </script>
+</body>
+</html>`;
+
+        const outFile = pathMod.join(graphOut, "index.html");
+        await fsExtra.writeFile(outFile, html, "utf-8");
+
+        console.log(chalk.green(`\n✅ Done! Output: ${outFile}`));
+        break;
+    }
+    case "zip": {
+        const srcDir = args[1] || "./dist";
+        const outFile = args[2] || "./deploy.zip";
+        const { default: archiver } = await import("archiver");
+        const { default: fsSync } = await import("fs");
+
+        console.log(chalk.cyan(`\n📦 Zipping ${srcDir} → ${outFile}...`));
+
+        try {
+            await new Promise((resolve, reject) => {
+                const output = fsSync.createWriteStream(outFile);
+                const archive = archiver("zip", { zlib: { level: 9 } });
+                output.on("close", resolve);
+                archive.on("error", reject);
+                archive.pipe(output);
+                archive.directory(srcDir, false); // false = no parent folder in zip
+                archive.finalize();
+            });
+
+            const { default: fsExtra } = await import("fs-extra");
+            const size = ((await fsExtra.stat(outFile)).size / 1024).toFixed(1);
+            console.log(chalk.green(`\n✅ ${outFile} created (${size} kB)`));
+            console.log(chalk.gray("   Upload and unzip to any static host to deploy."));
+        } catch (err) {
+            console.log(chalk.red(`\n❌ Zip failed: ${err.message}`));
+            process.exit(1);
+        }
+        break;
+    }
+    case "build": {
+        const srcDir = args[1] || ".";
+        const outDir = args[2] || "./dist";
+        const { build } = await import("../core/builder.js");
+        console.log(chalk.cyan(`\n🏗️  Building ${srcDir} → ${outDir}...\n`));
+        try {
+            const result = await build(srcDir, outDir);
+            console.log(chalk.green(`✅ Build complete!\n`));
+            result.pages.forEach(p => {
+                const kb = (p.size / 1024).toFixed(1);
+                console.log(chalk.white(`  ${p.fileName.padEnd(25)} ${kb} kB`));
+            });
+            console.log(chalk.gray(`\n  Output: ${result.outDir}`));
+        } catch (err) {
+            console.log(chalk.red(`\n❌ Build failed: ${err.message}`));
+            process.exit(1);
+        }
+        break;
+    }
     case "convert": {
         const [,,,convertDir, convertName, convertTarget, convertOut] = process.argv;
         if (!convertDir || !convertName || !convertTarget) {
@@ -318,9 +768,14 @@ switch (command) {
     default:
         console.log(chalk.cyan(BANNER));
         console.log(chalk.white("Commands:"));
-        console.log(chalk.gray("  wh init                                        — setup your project"));
-        console.log(chalk.gray("  wh deploy <dir> <name> <version>               — bundle & deploy a component"));
-        console.log(chalk.gray("  wh analyze <dir>                               — detect framework, styling & CDN deps"));
-        console.log(chalk.gray("  wh convert <dir> <name> <target> [output-dir]  — convert to react/next/vue/svelte/angular/astro"));
+        console.log(chalk.gray("  wh init                                              — setup your project"));
+        console.log(chalk.gray("  wh ship <comp-dir> <site-dir> [version] [out-dir]    — deploy + build + zip in one shot"));
+        console.log(chalk.gray("  wh deploy <dir> <name> <version>                     — deploy a single component"));
+        console.log(chalk.gray("  wh graph-deploy <comp-dir> [version] [out-dir]       — deploy all + resolve dep graph"));
+        console.log(chalk.gray("  wh build <src-dir> [out-dir]                         — production build"));
+        console.log(chalk.gray("  wh zip <src-dir> [out-file]                          — zip for deployment"));
+        console.log(chalk.gray("  wh breakdown <dir>                               — extract CSS/JS from single HTML file"));
+        console.log(chalk.gray("  wh access grant|revoke|list                      — role-based access control"));
+        console.log(chalk.gray("  wh convert <dir> <name> <target> [out-dir]           — convert to react/vue/svelte/next/astro"));
         break;
 }

package/core/builder.js

@@ -0,0 +1,133 @@
+import fs from "fs-extra";
+import path from "path";
+import crypto from "crypto";
+
+// ─── Minifiers ────────────────────────────────────────────────────────────────
+
+function minifyHtml(html) {
+    return html
+        .replace(/<!--[\s\S]*?-->/g, "")           // remove comments
+        .replace(/\s+/g, " ")                       // collapse whitespace
+        .replace(/>\s+</g, "><")                    // remove whitespace between tags
+        .replace(/\s+>/g, ">")                      // trim before >
+        .replace(/<\s+/g, "<")                      // trim after <
+        .trim();
+}
+
+function minifyCss(css) {
+    return css
+        .replace(/\/\*[\s\S]*?\*\//g, "")          // remove comments
+        .replace(/\s+/g, " ")                       // collapse whitespace
+        .replace(/\s*([{}:;,>~+])\s*/g, "$1")      // remove spaces around operators
+        .replace(/;}/g, "}")                        // remove last semicolon
+        .trim();
+}
+
+function minifyJs(js) {
+    return js
+        .replace(/\/\/[^\n]*/g, "")                // remove single line comments
+        .replace(/\/\*[\s\S]*?\*\//g, "")          // remove block comments
+        .replace(/\s+/g, " ")                       // collapse whitespace
+        .replace(/\s*([=+\-*/{};:,()[\]])\s*/g, "$1") // spaces around operators
+        .trim();
+}
+
+// ─── Hash helper ──────────────────────────────────────────────────────────────
+
+function hashContent(content) {
+    return crypto.createHash("md5").update(content).digest("hex").slice(0, 8);
+}
+
+// ─── Process a single HTML file ───────────────────────────────────────────────
+
+async function processHtml(filePath, outDir, assetMap) {
+    let html = await fs.readFile(filePath, "utf-8");
+
+    // Inline local <link rel="stylesheet"> files
+    html = await replaceAsync(html, /<link[^>]+href="([^"]+\.css)"[^>]*>/g, async (match, href) => {
+        if (href.startsWith("http")) return match; // skip external
+        const cssPath = path.resolve(path.dirname(filePath), href);
+        if (!await fs.pathExists(cssPath)) return match;
+        const css = minifyCss(await fs.readFile(cssPath, "utf-8"));
+        return `<style>${css}</style>`;
+    });
+
+    // Inline local <script src="..."> files (non-module, non-external)
+    html = await replaceAsync(html, /<script[^>]+src="([^"]+\.js)"[^>]*><\/script>/g, async (match, src) => {
+        if (src.startsWith("http") || src.includes("unpkg") || src.includes("cdn")) return match;
+        const jsPath = path.resolve(path.dirname(filePath), src);
+        if (!await fs.pathExists(jsPath)) return match;
+        const js = minifyJs(await fs.readFile(jsPath, "utf-8"));
+        return `<script>${js}</script>`;
+    });
+
+    // Minify the HTML itself
+    html = minifyHtml(html);
+
+    // Write to dist
+    const fileName = path.basename(filePath);
+    const outPath = path.join(outDir, fileName);
+    await fs.writeFile(outPath, html, "utf-8");
+
+    return { fileName, size: Buffer.byteLength(html, "utf-8") };
+}
+
+// ─── Async replace helper ─────────────────────────────────────────────────────
+
+async function replaceAsync(str, regex, asyncFn) {
+    const promises = [];
+    str.replace(regex, (match, ...args) => {
+        promises.push(asyncFn(match, ...args));
+        return match;
+    });
+    const results = await Promise.all(promises);
+    return str.replace(regex, () => results.shift());
+}
+
+// ─── Main build function ──────────────────────────────────────────────────────
+
+/**
+ * Builds a WebHanger site for production.
+ * @param {string} srcDir   - source directory with HTML files
+ * @param {string} outDir   - output directory (default: ./dist)
+ */
+export async function build(srcDir, outDir = "./dist") {
+    const absOut = path.resolve(outDir);
+    await fs.ensureDir(absOut);
+    await fs.emptyDir(absOut);
+
+    const files = await fs.readdir(srcDir);
+    const htmlFiles = files.filter(f => f.endsWith(".html"));
+
+    if (!htmlFiles.length) throw new Error(`No HTML files found in ${srcDir}`);
+
+    const results = [];
+    const assetMap = {};
+
+    for (const file of htmlFiles) {
+        const filePath = path.join(srcDir, file);
+        const result = await processHtml(filePath, absOut, assetMap);
+        results.push(result);
+    }
+
+    // Copy non-HTML assets (images, fonts, etc.) preserving structure
+    for (const file of files) {
+        if (file.endsWith(".html")) continue;
+        const src = path.join(srcDir, file);
+        const stat = await fs.stat(src);
+        if (stat.isFile()) {
+            await fs.copy(src, path.join(absOut, file));
+        }
+    }
+
+    // Write build manifest
+    const manifest = {
+        builtAt: new Date().toISOString(),
+        srcDir,
+        outDir: absOut,
+        pages: results
+    };
+    await fs.writeJson(path.join(absOut, "build-manifest.json"), manifest, { spaces: 2 });
+
+    return { outDir: absOut, pages: results };
+}

package/core/registry.js

@@ -16,14 +16,23 @@ export async function deploy(config, componentDir, name, version, dependencies =
     // 1. Bundle + encode
     const bundledJs = await bundle(componentDir, projectId);
 
-    // 2. Upload
+    // 2. Extract dependencies declared in webhanger.component.json
+    let parsedPayload = {};
+    try { parsedPayload = JSON.parse(bundledJs); } catch (_) {}
+    const resolvedDeps = dependencies.length ? dependencies : (parsedPayload.dependencies || []);
+
+    // 3. Upload
     const storageKey = `components/${name}@${version}.js`;
     await upload(storage, storageKey, bundledJs);
 
-    // 3. Sign — use custom token if provided, otherwise HMAC-generate
+    // 4. Generate CDN URLs — primary + fallbacks for multi-CDN failover
     const cdnUrl = `${cdn.url}/${storageKey}`;
-    let token, expires;
+    const cdnUrls = [cdnUrl];
+    if (cdn.fallbacks && cdn.fallbacks.length) {
+        cdn.fallbacks.forEach(fb => cdnUrls.push(`${fb}/${storageKey}`));
+    }
 
+    let token, expires;
     if (customToken) {
         expires = expiresInSeconds ? Math.floor(Date.now() / 1000) + expiresInSeconds : 0;
         token = customToken;
@@ -31,8 +40,8 @@ export async function deploy(config, componentDir, name, version, dependencies =
         ({ token, expires } = signUrl(storageKey, projectId, secretKey, expiresInSeconds));
     }
 
-    // 4. Register in DB
-    await registerComponent(db, projectId, { name, version, cdnUrl, token, expires, dependencies });
+    // 5. Register with all CDN URLs
+    await registerComponent(db, projectId, { name, version, cdnUrl, cdnUrls, token, expires, dependencies: resolvedDeps });
 
-    return { cdnUrl, token, expires };
+    return { cdnUrl, cdnUrls, token, expires, dependencies: resolvedDeps };
 }